:root {
  --cat-ink: #402a35;
  --cat-muted: #705664;
  --cat-rose: #ef7580;
  --cat-pink: #fde8e5;
  --cat-cream: #fffaf5;
  --cat-gold: #d99831;
  --cat-line: rgba(84, 49, 61, .14);
}

.cat-page { background: var(--cat-cream); color: var(--cat-ink); }
.cat-page .site-header { background: rgba(255, 250, 245, .87); border-color: rgba(84, 49, 61, .1); }
.cat-page .brand-logo { display: block; width: clamp(118px, 15vw, 176px); height: auto; object-fit: contain; }
.cat-page .section-kicker { color: #b94f64; }
.cat-page .btn-dark { background: #573442; box-shadow: 0 12px 30px rgba(87, 52, 66, .23); }
.cat-page .btn-outline { border-color: rgba(87, 52, 66, .2); background: rgba(255, 255, 255, .72); }

.cat-hero {
  position: relative;
  overflow: hidden;
  min-height: calc(100svh - 68px);
  display: grid;
  align-items: center;
  background:
    radial-gradient(circle at 81% 21%, rgba(255, 214, 137, .5), transparent 17%),
    radial-gradient(circle at 8% 86%, rgba(246, 163, 181, .32), transparent 19%),
    linear-gradient(140deg, #fffaf4 0%, #fee9e5 49%, #fbc3c7 100%);
}
.cat-hero::before,
.cat-hero::after { content: "✦"; position: absolute; color: rgba(212, 139, 42, .7); font-size: clamp(2rem, 5vw, 4rem); }
.cat-hero::before { top: 15%; left: 8%; transform: rotate(12deg); }
.cat-hero::after { right: 11%; bottom: 14%; transform: rotate(-14deg); }
.cat-hero-inner { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 76px 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .76fr); gap: clamp(30px, 7vw, 100px); align-items: center; }
.cat-eyebrow { margin: 0 0 12px; font-size: .78rem; font-weight: 900; letter-spacing: .18em; color: #b94f64; }
.cat-title { margin: 0; max-width: 10ch; font-size: clamp(3rem, 7.5vw, 6.6rem); line-height: .95; letter-spacing: -.075em; }
.cat-subtitle { margin: 20px 0 0; font-size: clamp(1.08rem, 2vw, 1.55rem); font-weight: 800; color: #b94f64; }
.cat-lead { max-width: 42ch; margin: 24px 0 0; font-size: 1.08rem; color: var(--cat-muted); }
.cat-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.cat-hero-art { position: relative; width: min(390px, 82vw); margin: 0 auto; }
.cat-hero-art::before { content: ""; position: absolute; inset: 10% -11%; z-index: 0; border-radius: 43% 57% 52% 48% / 42% 46% 54% 58%; background: linear-gradient(135deg, rgba(255, 255, 255, .8), rgba(255, 218, 145, .58)); transform: rotate(-9deg); }
.cat-icon { position: relative; z-index: 1; border-radius: 24%; box-shadow: 0 30px 72px rgba(117, 60, 73, .27); transform: rotate(4deg); }
.cat-paw { position: absolute; z-index: 2; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: #fffaf5; color: #e37383; box-shadow: 0 12px 30px rgba(117, 60, 73, .16); font-size: 1.7rem; }
.cat-paw.one { left: -7%; top: 14%; transform: rotate(-16deg); }
.cat-paw.two { right: -8%; bottom: 11%; transform: rotate(16deg); }

.cat-intro { padding-bottom: clamp(30px, 5vw, 66px); }
.cat-intro-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, .72fr); gap: clamp(30px, 7vw, 92px); align-items: center; }
.cat-rule-summary { padding: 30px; border: 1px solid var(--cat-line); border-radius: 28px; background: #fff; box-shadow: 0 20px 48px rgba(111, 65, 78, .08); }
.cat-rule-summary ul { margin: 18px 0 0; padding: 0; list-style: none; }
.cat-rule-summary li { padding: 12px 0 12px 34px; position: relative; border-top: 1px solid var(--cat-line); font-weight: 700; }
.cat-rule-summary li::before { content: "✓"; position: absolute; left: 2px; color: #cd6678; font-weight: 900; }
.cat-rule-summary li:first-child { border-top: 0; }

.cat-rules { background: #573442; color: #fff9f4; }
.cat-rules .section-kicker { color: #ffd88c; }
.cat-rules .section-lead { color: rgba(255, 249, 244, .72); }
.cat-rule-grid { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.cat-rule-card { margin: 0; padding: 16px; border-radius: 28px; background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .17); }
.cat-rule-card img { border-radius: 18px; background: #fff8f3; }
.cat-rule-card figcaption { padding: 17px 6px 5px; }
.cat-rule-card strong { display: block; font-size: 1.12rem; }
.cat-rule-card span { display: block; margin-top: 4px; font-size: .92rem; color: rgba(255, 249, 244, .72); }

.cat-modes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 48px; }
.cat-mode { position: relative; min-height: 274px; overflow: hidden; padding: 31px; border: 1px solid var(--cat-line); border-radius: 30px; background: #fff; box-shadow: 0 18px 42px rgba(111, 65, 78, .08); }
.cat-mode::after { content: "♛"; position: absolute; right: 23px; bottom: -22px; color: rgba(238, 117, 128, .14); font-size: 9rem; line-height: 1; }
.cat-mode--double { background: linear-gradient(145deg, #fff5e2, #fff); }
.cat-mode h3 { margin: 8px 0; font-size: clamp(1.55rem, 3vw, 2.3rem); line-height: 1.05; }
.cat-mode p { position: relative; z-index: 1; margin: 0; max-width: 30ch; color: var(--cat-muted); }
.cat-mode .mode-count { color: #bc5266; font-weight: 900; letter-spacing: .12em; font-size: .77rem; }

.cat-cta { padding-top: clamp(30px, 5vw, 66px); }
.cat-cta-panel { position: relative; overflow: hidden; text-align: center; padding: clamp(48px, 8vw, 86px) 24px; border-radius: 40px; background: linear-gradient(145deg, #f78689, #e46579); color: #fffaf5; }
.cat-cta-panel::before { content: ""; position: absolute; inset: 0; opacity: .2; background-image: radial-gradient(circle at 15% 18%, #fff 0 3px, transparent 4px), radial-gradient(circle at 80% 72%, #fff 0 3px, transparent 4px); background-size: 60px 60px; }
.cat-cta-panel > * { position: relative; z-index: 1; }
.cat-cta-icon { width: 112px; margin: 0 auto 22px; border-radius: 25px; box-shadow: 0 14px 36px rgba(81, 39, 48, .25); }
.cat-cta-panel .section-kicker { color: #fff4d7; }
.cat-cta-panel .section-title { max-width: 16ch; margin-inline: auto; }
.cat-cta-panel p { color: rgba(255, 250, 245, .86); }
.cat-cta-actions { justify-content: center; align-items: center; }
.cat-page .site-footer { background: #f9e6e1; border-color: rgba(84, 49, 61, .1); }

.cat-page .google-play-badge { display: block; line-height: 0; }
.cat-page .google-play-badge img { width: 180px; height: auto; }
.game-panel.cat-queens {
  color: var(--cat-ink);
  background:
    radial-gradient(circle at 78% 20%, rgba(255, 223, 142, .72), transparent 20%),
    linear-gradient(145deg, #fffaf4 0%, #fee7e4 55%, #f4b5bd 100%);
}
.game-panel.cat-queens::before { content: "🐾"; position: absolute; right: 8%; top: 10%; font-size: 4.2rem; opacity: .18; transform: rotate(15deg); }
.game-panel.cat-queens::after { background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(98, 48, 63, .13)); }
.game-panel.cat-queens .game-icon { width: min(142px, 34vw); margin: 0 0 20px; border-radius: 26%; box-shadow: 0 18px 42px rgba(117, 60, 73, .2); }
.game-panel.cat-queens .panel-copy { color: #664a58; }

@media (max-width: 900px) {
  .cat-hero-inner, .cat-intro-grid { grid-template-columns: 1fr; }
  .cat-hero-inner { padding-top: 58px; }
  .cat-hero-copy { text-align: center; }
  .cat-title, .cat-lead { margin-inline: auto; }
  .cat-actions { justify-content: center; }
  .cat-rule-grid { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
}
@media (max-width: 600px) {
  .cat-hero-inner { width: min(100% - 32px, 1180px); }
  .cat-hero-art { width: min(285px, 72vw); }
  .cat-paw { width: 48px; height: 48px; font-size: 1.3rem; }
  .cat-modes { grid-template-columns: 1fr; }
  .cat-mode { min-height: 230px; }
}