/* Self-hosted fonts. These are the same Nunito and Plus Jakarta Sans files the
   mobile app ships, subsetted to the characters this site uses. They are served
   from our own origin on purpose: loading them from Google Fonts handed Google
   every visitor's IP address, which is personal data under GDPR and something
   our privacy policy promises we do not do. Do not reintroduce a
   fonts.googleapis.com or fonts.gstatic.com link. */
@font-face { font-family:"Nunito"; font-style:normal; font-weight:800;
  src:url("fonts/nunito-800.woff") format("woff"); font-display:swap; }
@font-face { font-family:"Nunito"; font-style:normal; font-weight:900;
  src:url("fonts/nunito-900.woff") format("woff"); font-display:swap; }
@font-face { font-family:"Plus Jakarta Sans"; font-style:normal; font-weight:500;
  src:url("fonts/jakarta-500.woff") format("woff"); font-display:swap; }
@font-face { font-family:"Plus Jakarta Sans"; font-style:normal; font-weight:600;
  src:url("fonts/jakarta-600.woff") format("woff"); font-display:swap; }
@font-face { font-family:"Plus Jakarta Sans"; font-style:normal; font-weight:700;
  src:url("fonts/jakarta-700.woff") format("woff"); font-display:swap; }
@font-face { font-family:"Plus Jakarta Sans"; font-style:normal; font-weight:800;
  src:url("fonts/jakarta-800.woff") format("woff"); font-display:swap; }

/* BubbleSudoku, shared brand + site chrome
   Palette + wordmark mirror the mobile app (src/constants). */
:root {
  --accent: #6018C0;
  --accent-dark: #43108A;
  --text: #1A1A1A;
  /* Stationery surface set (Aug 6, 2026). The site now speaks the same language
     as the in-app pause sheet: warm paper, warm gray ink, a strong 2px rule and
     a dashed inset frame that echoes the empty middle cell of the app icon.
     Color is an accent here, never a field. Do not reintroduce pastel gradient
     bands or cool grays. */
  --muted: #77706A;      /* warm secondary ink (was cool #6E6E76) */
  --quiet: #948C84;      /* the pause screen's quiet note gray */
  --border: #E4E0D9;     /* warm hairline (was cool #E6E4EC) */
  --hair: #E4E0D9;
  --rule: #444444;       /* the stationery edge, from the pause overlay */
  --dash: rgba(148,140,132,0.45); /* dashed inset frame, same as the app */
  --bg: #FCFBF8;         /* warm paper (was cool #F7F6FB) */
  --paper-2: #F3F1EC;    /* one step down, for quiet panels */
  --card: #FFFFFF;
  --radius: 14px;
  --shadow: none;
  /* nine bubble hues + rims, straight from the app's BUBBLES table */
  --b1:#F02309; --b2:#FF7900; --b3:#F5CE1B; --b4:#7FE637; --b5:#2C9414;
  --b6:#1CC9DB; --b7:#3D8AFF; --b8:#A9ACF8; --b9:#8662E2;
  --b1r:#B51A07; --b2r:#C25C00; --b3r:#BA9A08; --b4r:#56B21F; --b5r:#1E6B0F;
  --b6r:#1291A6; --b7r:#2563C9; --b8r:#7A7EDF; --b9r:#6248A5;
  /* app action colors (buttons keep the original turquoise) */
  --act:#1FD6C1; --act-rim:#0B6B5F; --act-text:#0C3B37;
  --post:#8662E2; --post-rim:#44219A;
  --line:#222222;
}
/* matte bubble fills with per-color rims */
.bc1{background:var(--b1);border-color:var(--b1r)} .bc2{background:var(--b2);border-color:var(--b2r)}
.bc3{background:var(--b3);border-color:var(--b3r)} .bc4{background:var(--b4);border-color:var(--b4r)}
.bc5{background:var(--b5);border-color:var(--b5r)} .bc6{background:var(--b6);border-color:var(--b6r)}
.bc7{background:var(--b7);border-color:var(--b7r)} .bc8{background:var(--b8);border-color:var(--b8r)}
.bc9{background:var(--b9);border-color:var(--b9r)}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ── Wordmark ─────────────────────────────────────────────── */
.wordmark {
  font-family: "Nunito", sans-serif;
  font-weight: 900;
  letter-spacing: -0.5px;
  line-height: 0.9;
  display: inline-flex;
  flex-direction: column;
}
.wordmark .wm-main { color: var(--text); }
.wordmark .wm-sub {
  color: var(--accent);
  font-size: 0.38em;
  letter-spacing: 4px;
  font-weight: 900;
  margin-top: -1px;
  padding-left: 2px;
}

/* ── Top nav ──────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px clamp(16px, 5vw, 48px);
  /* matches the hero tone so the nav and the hero read as one warm block,
     which the nine-hue swatch strip then cuts off. If .hero-band changes,
     change this with it. */
  background: rgba(250, 248, 243, 0.93);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav .brand { display: flex; align-items: center; gap: 6px; }
/* logo mark: exact replica of the app icon, transparent background */
/* sized to match the wordmark: top of "Bubble" to bottom of "SUDOKU" */
.nav .brand .logomark { width: 32px; height: 32px; display: block; }
.nav .brand .wordmark { font-size: 27px; }
.nav-links { display: flex; align-items: center; gap: 6px; }
.nav-links a {
  padding: 9px 14px; border-radius: 10px; font-weight: 700; font-size: 15px;
  color: var(--muted); transition: background .15s, color .15s;
}
.nav-links a:hover { color: var(--text); background: rgba(68,68,68,0.06); }
/* the active tab is marked with a rule under it, not a colored pill */
.nav-links a.active {
  color: var(--text); background: none;
  box-shadow: inset 0 -3px 0 0 var(--rule);
  border-radius: 4px;
}
/* Play is the one filled control in the chrome. Solid ink, no rim. */
.nav-links a.cta {
  color: #FFFFFF; background: #1A1A1A;
  border: 1.5px solid #1A1A1A; border-radius: 9px; padding: 8px 16px;
}
.nav-links a.cta:hover { color: #FFFFFF; background: #000000; }
/* Mobile nav: brand on its own line, links in a row below (no wrapping/jumble).
   The Home link hides on phones (the logo already links home) so all tabs fit
   on a 390px screen; on very narrow phones the row scrolls sideways. */
@media (max-width: 720px) {
  .nav { flex-wrap: wrap; row-gap: 6px; padding: 10px 14px 8px; }
  .nav .brand .logomark { width: 27px; height: 27px; }
  .nav .brand .wordmark { font-size: 23px; }
  .nav-links {
    width: 100%; overflow-x: auto; gap: 2px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a { padding: 7px 10px; font-size: 13.5px; white-space: nowrap; flex-shrink: 0; }
  .nav-links a.cta { padding: 7px 12px; }
  .nav-links a[href$="index.html"] { display: none; }
}

/* ── Buttons ───────────────────────────────────────────────────
   SITE buttons are web buttons, not app buttons (Kasey, Aug 6, 2026: the
   matte-fill-plus-2px-rim control "feels very app and not website"). Site
   primaries are solid ink with no rim. The app's colored matte controls live
   ONLY inside the game overlays on the play page, where app language is right.
   ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 700; font-size: 15.5px; padding: 12px 24px; letter-spacing: -0.1px;
  border-radius: 10px; border: 1.5px solid transparent; cursor: pointer;
  transition: transform .12s ease, background .15s, border-color .15s, color .15s;
}
.btn:active { transform: translateY(1px); }
/* the site primary: solid ink */
.btn-primary {
  background: #1A1A1A; color: #FFFFFF; border-color: #1A1A1A;
}
.btn-primary:hover { background: #000000; border-color: #000000; }
/* secondary: paper with a quiet warm line that firms up on hover */
.btn-ghost {
  background: var(--card); color: var(--text);
  border-color: #CFC8BE;
}
.btn-ghost:hover { border-color: var(--text); background: var(--card); }
/* IN-GAME post-game action only (Play Again / New puzzle in the win overlay).
   This is app language on purpose. Do not use it in site chrome. */
.btn-post {
  background: var(--post); color: #fff; border: 2px solid var(--post-rim);
  border-radius: 14px; font-weight: 800; font-size: 16px; padding: 13px 28px;
}
.btn-post:hover { background: #7A55D6; }

/* ── Stationery utilities ─────────────────────────────────────
   Three shared devices carry the whole visual system. Reach for these before
   inventing a new panel style on any page.
     .sheet        an opaque paper card with the 2px stationery edge
     .sheet-frame  the dashed inset frame (echoes the app icon's empty cell)
     .accent-rule  a short colored rule that fades out, used above a heading
   ───────────────────────────────────────────────────────────── */
.sheet {
  position: relative; background: var(--card);
  border: 2px solid var(--rule); border-radius: 14px;
}
.sheet-frame {
  position: absolute; inset: 9px; pointer-events: none;
  border: 2px dashed var(--dash); border-radius: 8px;
}
.accent-rule {
  display: block; width: 46px; height: 3px; border-radius: 2px;
  margin-bottom: 14px; background: var(--rc, var(--rule));
  -webkit-mask-image: linear-gradient(90deg, #000 45%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 45%, transparent 100%);
}
/* The nine hues as a printed swatch strip, the way a paint card or a book
   spine carries color. This is how the full palette appears at page scale
   without scattering bubbles around, which Kasey has rejected twice. */
.spectrum { display: grid; grid-template-columns: repeat(9, 1fr); height: 7px; }
.spectrum span { display: block; }

/* small caps label, the only place letterspacing is allowed to get loud */
.label {
  font-size: 11.5px; font-weight: 800; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--quiet);
}

/* ── App store badges ─────────────────────────────────────── */
.store-badges { display: flex; flex-wrap: wrap; gap: 12px; }
.store-badge {
  display: inline-flex; align-items: center; gap: 10px;
  background: #000; color: #fff; border-radius: 12px;
  padding: 9px 16px; border: 1px solid #000;
  transition: transform .12s ease;
}
.store-badge:hover { transform: translateY(-2px); }
.store-badge svg { width: 24px; height: 24px; flex-shrink: 0; fill: #fff; }
.store-badge .sb-text { display: flex; flex-direction: column; line-height: 1.05; text-align: left; }
.store-badge .sb-top { font-size: 10px; font-weight: 600; opacity: 0.9; letter-spacing: .2px; }
.store-badge .sb-main { font-size: 17px; font-weight: 700; font-family: "Plus Jakarta Sans", sans-serif; }

/* ── Footer ───────────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 40px clamp(16px, 5vw, 48px);
  color: var(--quiet); font-size: 14px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
}
.site-footer a { color: var(--muted); font-weight: 600; }
.site-footer a:hover { text-decoration: underline; }
.site-footer .foot-links { display: flex; gap: 20px; flex-wrap: wrap; }