/* ==========================================================================
   Pocket Bear Games — site styles
   Breakpoint: mobile < 720px, desktop >= 720px (one breakpoint, used everywhere)
   ========================================================================== */

:root {
  --bark: #3B2B22;        /* primary ink, dark surfaces */
  --bark-2: #4A382D;      /* hover on dark, dividers on dark */
  --fur: #D9A170;         /* accent */
  --snout: #F0D6B4;       /* light accent text on dark */
  --cream: #FBF5E9;       /* page background */
  --sand: #F4E9D3;        /* section / card wells */
  --sand-2: #EFE0C3;      /* image wells, hover on sand */
  --line: #EFE2C8;        /* header border */
  --muted: #8A7358;       /* labels, secondary text */
  --body: #5C574C;        /* paragraph text */
  --red: #C4462F;         /* section titles, link hover */
  --footer-muted: #9C8168;

  --display: 'Baloo 2', cursive;
  --text: 'Karla', system-ui, sans-serif;
  --pad-x: clamp(20px, 5.5vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--bark);
  font-family: var(--text);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; }
a { color: var(--bark); }
a:hover { color: var(--red); }

.page { min-height: 100vh; display: flex; flex-direction: column; }

/* Shared bits */
.eyebrow { font: 600 11px/1 var(--text); letter-spacing: .32em; text-transform: uppercase; color: var(--muted); }
.rule { width: 64px; height: 5px; border-radius: 999px; background: var(--fur); }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; width: 100%; background: var(--cream); border-bottom: 1px solid var(--line); }
.site-header__inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; padding: 18px clamp(20px, 4vw, 32px); }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand__mark { width: 46px; height: 46px; }
.brand__text { display: flex; flex-direction: column; gap: 2px; }
.brand__name { font: 800 22px/1 var(--display); color: var(--bark); }
.brand__sub { font: 600 9px/1 var(--text); letter-spacing: .34em; text-transform: uppercase; color: var(--muted); }

.nav { display: flex; align-items: center; gap: 28px; }
.nav__link { font: 600 11px/1 var(--text); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); text-decoration: none; }
.nav__link:hover, .nav__link.is-active { color: var(--bark); }

.menu-btn { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 46px; height: 46px; padding: 0 11px; background: var(--sand); border: none; border-radius: 12px; cursor: pointer; }
.menu-btn:hover { background: var(--sand-2); }
.menu-btn span { display: block; height: 2.5px; border-radius: 999px; background: var(--bark); }

.mobile-menu { position: absolute; top: 84px; right: 20px; left: 20px; z-index: 20; display: none; flex-direction: column; padding: 8px; background: var(--cream); border: 1px solid #E7DCC6; border-radius: 16px; box-shadow: 0 18px 40px -22px rgba(59, 43, 34, .55); }
.mobile-menu.is-open { display: flex; }
.mobile-menu a { font: 600 12px/1 var(--text); letter-spacing: .22em; text-transform: uppercase; color: var(--bark); text-decoration: none; padding: 18px 16px; border-radius: 12px; }
.mobile-menu a:hover { background: var(--sand); color: var(--bark); }

/* ---------- Home: hero ---------- */
.hero { display: flex; flex-direction: column; align-items: center; gap: 26px; width: 100%; max-width: 1000px; margin: 0 auto; padding: 76px var(--pad-x) 96px; text-align: center; }
.hero__title { margin: 0; max-width: 16ch; font: 800 clamp(44px, 6.4vw, 82px)/1.02 var(--display); color: var(--bark); text-wrap: balance; }
.hero__lede { margin: 0; max-width: 52ch; font: 400 19px/1.6 var(--text); color: var(--body); text-wrap: pretty; }

/* ---------- Home: Meowsweeper spotlight ---------- */
.spotlight { background: var(--sand); padding: 88px var(--pad-x) 96px; }
.spotlight__inner { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 52px; }
.key-art { width: 100%; max-width: 1040px; aspect-ratio: 16 / 9; border-radius: 26px; overflow: hidden; background: var(--sand-2); box-shadow: 0 26px 60px -30px rgba(59, 43, 34, .5); }
.key-art img, .feature__art img, .screens__item img { width: 100%; height: 100%; object-fit: cover; }

.game-intro { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 660px; text-align: center; }
.play-now { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-bottom: 26px; }
.play-now__label { font: 800 clamp(30px, 4vw, 40px)/1 var(--display); color: var(--red); }
.game-title { margin: 0 0 2px; font: 800 clamp(46px, 6vw, 78px)/1 var(--display); color: var(--bark); }
.game-desc { margin: 0; font: 400 18px/1.65 var(--text); color: var(--body); text-wrap: pretty; }
.game-meta { font: 400 15px/1.5 var(--text); color: var(--muted); }

/* Store badges */
.store-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.store-badge { display: flex; align-items: center; gap: 12px; padding: 13px 24px; background: var(--bark); border-radius: 14px; text-decoration: none; }
.store-badge:hover { background: var(--bark-2); }
.store-badge svg { width: 22px; height: 22px; flex: none; fill: var(--cream); }
.store-badge .icon-play { fill: var(--fur); }
.store-badge__text { display: flex; flex-direction: column; gap: 3px; text-align: left; }
.store-badge__kicker { font: 600 9px/1 var(--text); letter-spacing: .2em; text-transform: uppercase; color: var(--fur); }
.store-badge__name { font: 800 18px/1 var(--display); color: var(--cream); }
/* "Coming soon" state — not a link */
.store-badge--soon { padding: 11px 22px; background: transparent; border: 2px dashed #C3AF95; }
.store-badge--soon:hover { background: transparent; }
.store-badge--soon svg, .store-badge--soon .icon-play { fill: #B79B7C; }
.store-badge--soon .store-badge__kicker { color: #7A6349; }
.store-badge--soon .store-badge__name { color: #6E5A47; }

/* Key features — cards alternate art-left / art-right */
.features { display: flex; flex-direction: column; align-items: center; gap: 26px; width: 100%; max-width: 940px; margin-top: 18px; }
.section-title { margin: 0 0 4px; font: 800 clamp(30px, 4vw, 42px)/1 var(--display); color: var(--red); }
.feature { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 28px; width: 100%; padding: 26px 30px; background: var(--cream); border-radius: 20px; }
.feature--reverse { flex-wrap: wrap-reverse; }
.feature__art { width: 200px; height: 150px; flex: none; border-radius: 14px; overflow: hidden; background: var(--sand-2); }
.feature__text { flex: 1; min-width: 320px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; text-align: right; }
.feature--reverse .feature__text { align-items: flex-start; text-align: left; }
.feature__title { font: 800 24px/1.15 var(--display); color: var(--bark); }
.feature__body { margin: 0; max-width: 52ch; font: 400 16px/1.65 var(--text); color: var(--body); text-wrap: balance; }
.feature__body--pretty { text-wrap: pretty; }

/* Screenshots */
.screens { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; width: 100%; max-width: 1040px; }
.screens__item { aspect-ratio: 9 / 16; border-radius: 20px; overflow: hidden; background: var(--sand-2); }

/* ---------- About ---------- */
.about { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; width: 100%; max-width: 900px; margin: 0 auto; padding: 88px var(--pad-x) 104px; text-align: center; }
.about__plate { display: grid; place-items: center; width: 148px; height: 148px; border-radius: 999px; background: var(--sand); }
.about__plate img { width: 104px; height: 104px; }
.about__text { margin: 0; max-width: 52ch; font: 400 23px/1.6 var(--text); color: var(--body); text-wrap: pretty; }

/* ---------- Legal pages (Privacy / Terms) ---------- */
.legal { width: 100%; max-width: 760px; margin: 0 auto; padding: 64px var(--pad-x) 110px; display: flex; flex-direction: column; gap: 26px; }
.legal__title { margin: 0; font: 800 clamp(40px, 5.4vw, 62px)/1.02 var(--display); color: var(--bark); }
.legal__card { display: flex; flex-direction: column; gap: 14px; padding: 34px 36px; background: var(--sand); border-radius: 18px; }
.legal__body { margin: 0; font: 400 17px/1.7 var(--text); color: var(--body); text-wrap: pretty; }
.legal__note { margin: 0; font: 400 15px/1.7 var(--text); color: var(--muted); text-wrap: pretty; }
.legal__note a { color: var(--red); }
.legal__updated { font: 400 13px/1.5 var(--text); color: var(--muted); }

/* ---------- Footer (Home / Privacy / Terms) ---------- */
.site-footer { margin-top: auto; padding: 52px var(--pad-x) 40px; background: var(--bark); color: var(--cream); }
.site-footer__top { max-width: 1100px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 32px; }
.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-brand img { width: 44px; height: 44px; }
.footer-brand__text { display: flex; flex-direction: column; gap: 3px; }
.footer-brand__name { font: 800 21px/1 var(--display); color: var(--cream); }
.footer-brand__sub { font: 600 9px/1 var(--text); letter-spacing: .34em; text-transform: uppercase; color: var(--fur); }
.footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
.footer-links > a { font: 400 14px/1 var(--text); color: var(--snout); text-decoration: none; }
.footer-links > a:hover { color: var(--fur); }
.site-footer__legal { max-width: 1100px; margin: 34px auto 0; padding-top: 22px; border-top: 1px solid var(--bark-2); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; }
.site-footer__legal span { font: 400 12px/1.5 var(--text); color: var(--footer-muted); }

/* Social icons (all footers) — grouped, 10px apart */
.socials { display: flex; flex-wrap: wrap; gap: 10px; }
.social { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 999px; background: var(--bark-2); }
.social:hover { background: var(--fur); }
.social svg { width: 18px; height: 18px; fill: none; stroke: var(--cream); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.social .dot { fill: var(--cream); stroke: none; }

/* ---------- Footer (About — large, 4 columns) ---------- */
.site-footer--lg { position: relative; overflow: hidden; padding-top: 64px; }
.footer-watermark { position: absolute; left: -90px; bottom: -120px; width: 320px; height: 320px; opacity: .11; pointer-events: none; }
.footer-grid { position: relative; max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 40px; }
.footer-col { display: flex; flex-direction: column; gap: 14px; }
.footer-col--brand { gap: 20px; }
.footer-brand--lg img { width: 52px; height: 52px; }
.footer-brand--lg .footer-brand__text { gap: 4px; }
.footer-brand--lg .footer-brand__name { font-size: 24px; }
.footer-col__head { font: 600 11px/1 var(--text); letter-spacing: .28em; text-transform: uppercase; color: var(--cream); }
.footer-col__item { font: 400 15px/1.4 var(--text); color: var(--snout); }
.footer-col a { font: 400 15px/1.4 var(--text); color: var(--fur); text-decoration: none; }
.footer-col a:hover { color: var(--cream); }
.footer-col .social:hover { background: var(--fur); }
.footer-col__stack { display: flex; flex-direction: column; gap: 8px; }
.site-footer--lg .site-footer__legal { position: relative; margin-top: 44px; flex-direction: column; align-items: center; gap: 6px; text-align: center; }

/* ==========================================================================
   Coming Soon page (pre-launch). Standalone — no header, minimal footer.
   ========================================================================== */
.cs { min-height: 100vh; display: flex; flex-direction: column; }
.cs a { color: #8A5A3A; }
.cs a:hover { color: var(--bark); }
.cs__main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 72px clamp(21px, 5.5vw, 40px) 56px; text-align: center; }
.cs__mark { width: clamp(120px, 22vw, 156px); height: auto; aspect-ratio: 1; overflow: visible; }
.cs__wordmark { display: flex; flex-direction: column; align-items: center; gap: 7px; margin-top: 22px; }
.cs__name { font: 800 30px/1 var(--display); letter-spacing: -.01em; color: var(--bark); }
.cs__sub { padding-left: .42em; font: 600 12px/1 var(--text); letter-spacing: .42em; text-transform: uppercase; color: var(--muted); }
.cs__title { margin: clamp(44px, 7vw, 64px) 0 0; max-width: 14ch; font: 800 clamp(38px, 6.4vw, 60px)/1.05 var(--display); letter-spacing: -.015em; color: var(--bark); text-wrap: balance; }
.cs__lede { margin: 18px 0 0; max-width: 52ch; font: 400 clamp(16px, 1.9vw, 18px)/1.6 var(--text); color: var(--body); text-wrap: balance; }
.cs__lede strong { font-weight: 700; color: var(--bark); }

.signup { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; max-width: 440px; margin-top: 36px; }
.signup__form { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.signup__input { width: 100%; height: 52px; padding: 0 20px; border: 2px solid #E3D5BF; border-radius: 999px; background: #FFFDF8; font: 400 16px/1 var(--text); color: var(--bark); text-align: center; outline: none; }
.signup__input::placeholder { color: #A0937F; }
.signup__input:focus { border-color: var(--fur); }
.signup__btn { height: 52px; padding: 0 26px; border: none; border-radius: 999px; background: var(--bark); color: var(--cream); font: 700 15px/1 var(--text); letter-spacing: .02em; cursor: pointer; }
.signup__btn:hover { background: var(--bark-2); }
.signup__done { display: none; align-items: center; gap: 12px; height: 52px; padding: 0 24px; border-radius: 999px; background: #F3E6D2; font: 600 15px/1 var(--text); color: var(--bark); }
.signup__done svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--bark); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.signup.is-done .signup__form { display: none; }
.signup.is-done .signup__done { display: flex; }

.cs .socials { margin-top: 40px; }
.cs .social { width: 40px; height: 40px; background: var(--bark); }
.cs .social:hover { background: #8A5A3A; }

.cs__footer { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 22px; padding: 22px clamp(21px, 5.5vw, 40px) 28px; border-top: 1px solid #EADFCD; }
.cs__footer span, .cs__footer a { font: 400 13px/1 var(--text); color: #7A6349; text-decoration: none; }
.cs__footer a:hover { color: var(--bark); }

/* Bear-pops-out-of-pocket animation (same timing as the app splash ident) */
.cs .anim-paws { animation: pbPaws .46s cubic-bezier(.2, 1.3, .4, 1) .3s both; }
.cs .anim-head { animation: pbHead .66s cubic-bezier(.2, 1.25, .4, 1) .56s both; }
@keyframes pbPaws { 0% { transform: translateY(12px); } 100% { transform: translateY(0); } }
@keyframes pbHead { 0% { transform: translateY(34px); } 58% { transform: translateY(-2.6px); } 78% { transform: translateY(1.1px); } 100% { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .cs .anim-paws, .cs .anim-head { animation: none; } }

/* ==========================================================================
   Mobile (< 720px)
   ========================================================================== */
@media (min-width: 720px) {
  .mobile-menu, .mobile-menu.is-open { display: none; }
}
@media (max-width: 719px) {
  .nav__link { display: none; }
  .menu-btn { display: flex; }

  .br-desktop { display: none; }
  .hero__lede { max-width: 32ch; font-size: 16px; line-height: 1.55; }

  .feature { justify-content: center; }
  .feature__text,
  .feature--reverse .feature__text { flex-basis: 100%; min-width: 0; align-items: center; text-align: center; }
  .feature__title { font-size: 20px; }
  .feature__body { max-width: 34ch; font-size: 14px; text-wrap: pretty; }
}

.cs .cs__contact { display: inline-flex; align-items: center; height: 52px; margin-top: 36px; padding: 0 28px; border-radius: 999px; background: var(--bark); color: var(--cream); font: 700 15px/1 var(--text); letter-spacing: .02em; text-decoration: none; }
.cs .cs__contact:hover { background: var(--bark-2); }