/* ==========================================================================
   Self-hosted fonts (were Google Fonts CDN). Same families/weights, served
   from our own origin with font-display:swap - removes two render-blocking
   third-party requests from every page load. Files in /assets/fonts/.
   ========================================================================== */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/plusjakartasans-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/plusjakartasans-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/plusjakartasans-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/plusjakartasans-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/plusjakartasans-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/plusjakartasans-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/plusjakartasans-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/plusjakartasans-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/spacegrotesk-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/spacegrotesk-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/spacegrotesk-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/spacegrotesk-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/spacemono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/spacemono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/spacemono-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/spacemono-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   HOKU GAMES — design system v2
   Theme: bright neon blue + white, with green reserved specifically for
   "play" actions and reward/currency UI - never used decoratively.
   color means one thing, used consistently, instead of being decorative.
   ========================================================================== */

:root {
    /* ---- palette - strictly white / neon blue / neon green, as specified -------- */
    --bg:          #FBFFFF;
    --surface:     #FFFFFF;
    --surface-2:   #EAEDFF;
    --line:        #DBDEFF;
    --line-strong: #9A9CFF;

    --blue:        #2323FF;
    --blue-deep:   #1A1ABF;
    --blue-dark:   #13138C;
    --green:       #39FF14;
    --green-dark:  #1A7309;
    --green-darker:#114C06;
    --danger:      #E5304B; /* the one deliberate exception - error states need to read as "wrong", not blue or green */

    --ink:         #0B0B1A;
    --ink-dim:     #46466E;
    --ink-faint:   #8587B8;
    --on-dark:     #FBFFFF;

    /* ---- type --------------------------------------------------------- */
    --font-display: 'Space Grotesk', sans-serif;
    --font-body:    'Plus Jakarta Sans', sans-serif;
    --font-data:    'Space Mono', monospace;

    /* ---- layout --------------------------------------------------------- */
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --container: 1320px;
    --nav-h: 64px;

    --shadow-card: 0 6px 20px rgba(35, 35, 255, 0.12);
    --shadow-glow-blue: 0 0 0 1px rgba(35,35,255,.4), 0 8px 26px rgba(35,35,255,.28);
    --shadow-glow-green: 0 0 0 1px rgba(57,255,20,.45), 0 8px 24px rgba(57,255,20,.3);
}

/* ---- dark mode: only the neutrals flip - --blue/--green/--danger stay exactly
   the same in both themes, so the "strict palette" brand rule still holds; dark
   mode is just a different set of neutrals to show those same accents on. ---- */
html[data-theme="dark"] {
    color-scheme: dark;
    --bg:          #000000;
    --surface:     #0E0E0E;
    --surface-2:   #181818;
    --line:        #262626;
    --line-strong: #3C3C3C;

    --ink:         #F5F5F5;
    --ink-dim:     #B4B4B4;
    --ink-faint:   #767676;

    --shadow-card: 0 6px 20px rgba(0, 0, 0, 0.55);
    --shadow-glow-blue: 0 0 0 1px rgba(35,35,255,.5), 0 8px 26px rgba(35,35,255,.35);
    --shadow-glow-green: 0 0 0 1px rgba(57,255,20,.5), 0 8px 24px rgba(57,255,20,.35);
}
html[data-theme="dark"] body { background: var(--bg); }
html[data-theme="dark"] .site-nav { background: rgba(0, 0, 0, 0.88); }
html[data-theme="dark"] #hoku-splash { background: #000000; }
html[data-theme="dark"] .stardust-pill { background: var(--surface-2); border-color: var(--line-strong); color: #7CFF57; }
html[data-theme="dark"] .reward-card { background: linear-gradient(135deg, var(--surface-2), #101010); border-color: var(--line-strong); }
/* Profile invite card: colors live here (not inline) so dark mode can restyle it. */
#invite-card { background: linear-gradient(135deg, #EAEDFF, #EAF5FF); border: 1px solid #9A9CFF; }
#invite-card #invite-count { color: var(--green-dark); }
html[data-theme="dark"] #invite-card { background: linear-gradient(135deg, #0E0E2E, #0A0A1C); border-color: #34349A; }
html[data-theme="dark"] #invite-card #invite-count { color: #7CFF57; }

* { box-sizing: border-box; }
/* Global guard against a horizontal "empty patch": if ANY element ever pushes the
   page wider than the screen (a stray wide element, a desktop-mode fixed viewport,
   an injected ad iframe, a future bug), overflow-x:hidden on the ROOT clips it so
   there is never dead scrollable space on the right. It's on <html> ONLY (never
   also on body) so the root stays the viewport scroll container: vertical scrolling
   and the sticky nav keep working (putting it on body too traps the scroll). The
   site's intended horizontal rows (.game-row, .category-cards) scroll inside their
   OWN overflow-x:auto containers, so they are unaffected by this. */
html { color-scheme: light; scroll-behavior: smooth; overflow-x: hidden; }
/* max-width belt-and-suspenders: body can never itself be wider than the viewport.
   NOTE: overflow-x is deliberately NOT set on body as well — with html already
   hidden, adding it to body makes body its own scroll container and traps vertical
   scrolling (root-overflow propagation only happens while html is visible). */
body { max-width: 100%; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body {
    margin: 0;
    background: radial-gradient(circle at 18% -8%, #DCEEFF 0%, var(--bg) 48%) fixed;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; color: var(--ink); letter-spacing: -0.01em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { max-width: 100%; display: block; }
ul { margin: 0; padding: 0; list-style: none; }

:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 20px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ==========================================================================
   NAV (now with a mobile hamburger menu so items never get cut off)
   ========================================================================== */
.site-nav {
    position: sticky; top: 0; z-index: 50;
    min-height: var(--nav-h);
    padding-top: env(safe-area-inset-top);
    display: flex; align-items: center;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
}
.site-nav .container { display: flex; align-items: center; gap: 16px; }

.brand { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 21px; font-weight: 700; flex-shrink: 0; }
.brand .mark { width: 30px; height: 30px; flex-shrink: 0; }
.brand .wordmark {
    background: linear-gradient(95deg, var(--blue-deep) 0%, var(--blue) 70%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

.nav-search { flex: 1; max-width: 380px; position: relative; display: none; }
.nav-search input {
    width: 100%; height: 38px; border-radius: 999px; border: 1px solid var(--line);
    background: var(--surface-2); color: var(--ink); padding: 0 16px 0 38px; font-size: 14px;
}
/* type="search" inputs render their own native clear (✕) icon in Chrome/Edge/
   Safari - suppressed so only our custom .nav-search-clear button shows,
   otherwise there are two overlapping X's once text is typed. */
.nav-search input[type="search"]::-webkit-search-cancel-button,
.nav-search input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.nav-search input::placeholder { color: var(--ink-faint); }
.nav-search input:focus { border-color: var(--blue); background: var(--surface); }
.nav-search svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--ink-faint); pointer-events: none; }
.nav-search.has-value input { padding-right: 34px; }
.nav-search-clear {
    display: none; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    width: 24px; height: 24px; border-radius: 50%; border: none; background: var(--surface-2);
    color: var(--ink-dim); font-size: 12px; align-items: center; justify-content: center;
}
.nav-search.has-value .nav-search-clear { display: flex; }
.nav-search-clear:hover { background: var(--line); color: var(--ink); }
@media (min-width: 760px) { .nav-search { display: block; } }
/* On phones the search used to be hidden entirely (no way for users to search).
   Show it on its OWN full-width row under the nav so it never crowds/overflows the
   logo + buttons. */
@media (max-width: 759px) {
    /* Only the homepage (<body class="has-nav-search">) actually has a search
       bar to wrap onto its own row now - everywhere else the nav is a single
       row and should stay at the compact base --nav-h. Growing --nav-h
       site-wide left every other page with a tall, empty-looking nav once
       the search bar was removed from them. The nav-drawer's top offset also
       reads --nav-h, so it stays correctly positioned either way. */
    body.has-nav-search { --nav-h: 96px; }
    body.has-nav-search .site-nav .container { flex-wrap: wrap; row-gap: 10px; align-content: center; }
    body.has-nav-search .nav-search { display: block; order: 3; flex: 0 0 100%; max-width: none; }
}

.nav-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
/* Higher specificity than .btn / .avatar-btn (which are defined later and would
   otherwise win the display battle), so these stay hidden on mobile. */
.nav-right .nav-link-desktop { display: none; }
/* Show the full link row ONLY when there's genuinely room for all of it: brand +
   search + theme toggle + Stars pill + 6 links + avatar + the green Install button
   measures ~1200px of content. The old 900px breakpoint was calibrated WITHOUT the
   Install button + Stars pill visible (they only appear logged-in on install-capable
   browsers), so on "desktop mode" phones (~980px layout viewport) the full row
   overflowed the right edge, widened the document, and left a white patch beside
   the page content. Below this width everything lives in the burger menu. */
@media (min-width: 1260px) { .nav-right .nav-link-desktop { display: inline-flex; } }

.stardust-pill {
    display: flex; align-items: center; gap: 6px;
    background: #EAEDFF; border: 1px solid #9A9CFF;
    border-radius: 999px; padding: 6px 12px 6px 8px;
    font-family: var(--font-data); font-size: 14px; color: var(--green-dark);
    transition: transform .15s ease, box-shadow .15s ease; flex-shrink: 0;
}
.stardust-pill:hover { box-shadow: var(--shadow-glow-green); transform: translateY(-1px); }
.stardust-pill .spark { width: 18px; height: 18px; flex-shrink: 0; }
.stardust-pill .count.bump { animation: count-bump .35s ease; }
@keyframes count-bump { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 100% { transform: scale(1); } }

.avatar-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface-2); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
.avatar-btn img, .avatar-btn svg { width: 100%; height: 100%; }

.nav-burger {
    display: flex; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line);
    background: var(--surface); align-items: center; justify-content: center; flex-shrink: 0;
}
@media (min-width: 1260px) { .nav-burger { display: none; } }
.nav-burger svg { width: 18px; height: 18px; color: var(--ink); }

.theme-toggle-btn {
    display: flex; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line);
    background: var(--surface); align-items: center; justify-content: center; flex-shrink: 0;
    color: var(--ink-dim); transition: background .15s ease, color .15s ease, transform .2s ease;
}
.theme-toggle-btn:hover { color: var(--blue-deep); border-color: var(--blue); transform: rotate(12deg); }
.theme-toggle-btn svg { width: 18px; height: 18px; }
.theme-toggle-btn .icon-sun { display: none; }
html[data-theme="dark"] .theme-toggle-btn .icon-sun { display: block; }
html[data-theme="dark"] .theme-toggle-btn .icon-moon { display: none; }

/* small unread dot on the desktop "Messages" nav link */
.nav-badge-dot {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    background: var(--green); margin-left: 5px; vertical-align: middle;
    box-shadow: 0 0 0 2px var(--surface);
}

.nav-drawer {
    position: fixed; top: calc(var(--nav-h) + env(safe-area-inset-top)); right: 0; z-index: 60;
    width: 240px; max-width: 80vw; background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--radius-md);
    margin: 8px; box-shadow: var(--shadow-card);
    display: none; flex-direction: column; padding: 8px; gap: 4px;
}
.nav-drawer.open { display: flex; }
.nav-drawer a, .nav-drawer button {
    display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: var(--radius-sm);
    background: none; border: none; text-align: left; font-size: 14px; font-weight: 600; color: var(--ink); width: 100%;
}
.nav-drawer a:hover, .nav-drawer button:hover { background: var(--surface-2); }

/* ==========================================================================
   BUTTONS - color now carries meaning: blue = general action, green = play,
   green = play AND stardust reward (the only two accent hues we have), used consistently.
   ========================================================================== */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 42px; padding: 0 20px; border-radius: 999px; border: none;
    font-family: var(--font-body); font-weight: 700; font-size: 14px;
    transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
    white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--blue); color: white; box-shadow: 0 4px 16px rgba(0,144,255,.32); }
.btn-primary:hover { box-shadow: var(--shadow-glow-blue); transform: translateY(-1px); }
.btn-play { background: linear-gradient(95deg, var(--green), #21E07A); color: #07330F; box-shadow: 0 4px 18px rgba(24,201,100,.35); }
.btn-play:hover { box-shadow: var(--shadow-glow-green); transform: translateY(-1px); }
.btn-stardust { background: linear-gradient(95deg, var(--green), #7CFF57); color: var(--green-darker); box-shadow: 0 4px 16px rgba(57,255,20,.3); }
.btn-stardust:hover { box-shadow: var(--shadow-glow-green); transform: translateY(-1px); }
.btn-ghost { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.btn-ghost:hover { border-color: var(--blue); color: var(--blue-deep); }
.btn-sm { height: 34px; padding: 0 14px; font-size: 13px; }
.btn-lg { height: 52px; padding: 0 30px; font-size: 16px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
.btn-block { width: 100%; }

/* ==========================================================================
   SECTIONS / ROW HEADERS
   ========================================================================== */
.section { padding: 22px 0; }
.row-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; gap: 12px; }
.row-head h2 { font-size: 19px; display: flex; align-items: center; gap: 9px; }
.row-head h2::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 10px rgba(0,144,255,.6); flex-shrink: 0; }
.row-head a { font-size: 13px; color: var(--ink-dim); font-weight: 600; flex-shrink: 0; }
.row-head a:hover { color: var(--blue-deep); }

/* ==========================================================================
   HERO — featured game (kept image-based, so its own internal scrim stays
   dark for legibility regardless of the overall light theme)
   ========================================================================== */
.hero { display: grid; grid-template-columns: 1fr; gap: 16px; padding: 24px 0 6px; }
.hero-feature {
    position: relative; border-radius: var(--radius-lg); overflow: hidden;
    background: var(--surface-2); border: 1px solid var(--line);
    min-height: 280px; display: flex; align-items: flex-end;
    background-size: cover; background-position: center;
}
.hero-feature::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(8,16,40,0) 0%, rgba(8,16,40,.55) 55%, rgba(8,16,40,.92) 100%);
}
.hero-feature .hero-content { position: relative; z-index: 1; padding: 26px; width: 100%; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-data); font-size: 12px; color: #7DFF5C; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 10px; }
.hero-eyebrow::before { content: '●'; font-size: 8px; }
.hero-content h1, .hero-content .hero-game-title { font-family: var(--font-display); font-size: clamp(24px, 4vw, 38px); font-weight: 700; margin: 0 0 6px; color: white; letter-spacing: -0.01em; }
.hero-content p { color: #C9D8F2; max-width: 520px; margin-bottom: 16px; font-size: 14px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ==========================================================================
   GAME GRID + CARDS
   ========================================================================== */
/* Same glow-room pattern as .category-cards above. */
.game-row { display: flex; gap: 14px; overflow-x: auto; padding: 12px 12px 8px; margin: -12px -12px 0; scroll-snap-type: x proximity; }
.game-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 540px)  { .game-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 800px)  { .game-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1100px) { .game-grid { grid-template-columns: repeat(6, 1fr); } }

.game-card {
    position: relative; border-radius: var(--radius-md); overflow: hidden;
    background: var(--surface); border: 1px solid var(--line); cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    scroll-snap-align: start;
}
.game-row .game-card { flex: 0 0 150px; }
.game-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-glow-blue); border-color: var(--blue); }
.game-card .thumb-wrap { aspect-ratio: 1/1; background: var(--surface-2); overflow: hidden; }
.game-card .thumb-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.game-card:hover .thumb-wrap img { transform: scale(1.06); }
.game-card .info { padding: 10px; }
.game-card .info h3 { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.game-card .info .cat { font-size: 11px; color: var(--ink-faint); margin-top: 2px; }
.game-card .fav-btn {
    position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 50%;
    background: rgba(15,30,61,.55); border: none; display: flex; align-items: center; justify-content: center;
    color: white; opacity: 0; transition: opacity .15s ease, color .15s ease, background .15s ease;
}
.game-card:hover .fav-btn, .game-card .fav-btn.is-fav { opacity: 1; }
.game-card .fav-btn.is-fav { color: var(--blue); }
.game-card .play-count { position: absolute; bottom: 8px; left: 8px; font-family: var(--font-data); font-size: 10px; background: rgba(15,30,61,.6); padding: 3px 7px; border-radius: 999px; color: white; opacity: 0; transition: opacity .15s ease; }
.game-card:hover .play-count { opacity: 1; }

/* locked / premium games */
.game-card.is-locked .thumb-wrap img { filter: grayscale(.35) brightness(.6); }
.lock-badge {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; background: rgba(10,20,45,.4); color: white; font-family: var(--font-data); font-size: 12px;
}
.lock-badge svg { width: 22px; height: 22px; }
.lock-badge .price { background: var(--green); color: var(--green-darker); padding: 3px 10px; border-radius: 999px; font-weight: 700; }

/* ==========================================================================
   AD SLOT — clearly a placeholder
   ========================================================================== */
.ad-slot {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    border: 1.5px dashed var(--line-strong); border-radius: var(--radius-md);
    background: var(--surface); color: var(--ink-faint); min-height: 100px;
}
.ad-slot .x-mark { width: 26px; height: 26px; opacity: .55; }
.ad-slot .label { font-family: var(--font-data); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.ad-slot.banner { min-height: 90px; margin: 26px 0; }
.ad-slot.tile { aspect-ratio: 1/1; }

/* ==========================================================================
   STARDUST / REWARDS PANEL
   ========================================================================== */
.reward-card {
    background: linear-gradient(135deg, #EAEDFF, #EAF5FF);
    border: 1px solid #9A9CFF; border-radius: var(--radius-lg);
    padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.reward-card .spark-lg { width: 34px; height: 34px; flex-shrink: 0; }
.reward-card h3 { font-size: 15px; margin-bottom: 2px; }
.reward-card p { color: var(--ink-dim); font-size: 12px; }

.panel-overlay {
    position: fixed; inset: 0; background: rgba(10,20,45,.45); backdrop-filter: blur(2px);
    display: flex; align-items: center; justify-content: center; z-index: 200; padding: 16px;
}
.panel {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
    width: 100%; max-width: 380px; padding: 28px; text-align: center; position: relative;
    box-shadow: 0 20px 60px rgba(10,30,70,.25);
}
.panel .close-x { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%; background: transparent; border: none; color: var(--ink-dim); display: flex; align-items: center; justify-content: center; }
.panel .close-x:hover { background: var(--surface-2); color: var(--ink); }
.ad-progress-ring { width: 96px; height: 96px; margin: 12px auto 18px; }
.ad-progress-ring circle { fill: none; stroke-width: 6; }
.ad-progress-ring .bg { stroke: var(--line); }
.ad-progress-ring .fg { stroke: var(--green); stroke-linecap: round; transform: rotate(-90deg); transform-origin: center; transition: stroke-dashoffset .2s linear; }
.ad-progress-ring text { font-family: var(--font-data); fill: var(--ink); font-size: 22px; }

.sparkle-burst { position: fixed; z-index: 300; pointer-events: none; }
.sparkle-burst .bit { position: absolute; width: 8px; height: 8px; background: var(--green); border-radius: 2px; animation: sparkle-fly .6s ease-out forwards; }
@keyframes sparkle-fly { 0% { opacity: 1; transform: translate(0,0) scale(1) rotate(0deg); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.3) rotate(90deg); } }

/* ==========================================================================
   AUTH FORMS
   ========================================================================== */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.auth-card { width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow-card); }
.auth-card .brand { justify-content: center; margin-bottom: 4px; }
.auth-card .sub { text-align: center; color: var(--ink-dim); font-size: 13px; margin-bottom: 24px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--ink-dim); }
.field input { width: 100%; height: 44px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); color: var(--ink); padding: 0 14px; font-size: 14px; }
.field input:focus { border-color: var(--blue); }
.field .hint { font-size: 12px; color: var(--ink-faint); margin-top: 5px; }
.form-error { background: #FFEAEE; border: 1px solid var(--danger); color: #9C1530; border-radius: var(--radius-sm); padding: 10px 14px; font-size: 13px; margin-bottom: 16px; display: none; }
.form-error.visible { display: block; }
.auth-switch { text-align: center; margin-top: 18px; font-size: 13px; color: var(--ink-dim); }
.auth-switch a { color: var(--blue-deep); font-weight: 700; }

/* ==========================================================================
   PROFILE / FRIENDS
   ========================================================================== */
.profile-header { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; padding: 28px 0; }
.profile-header .avatar-lg { width: 84px; height: 84px; border-radius: 50%; background: var(--surface-2); border: 2px solid var(--blue); flex-shrink: 0; }
.stat-pill { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 14px; text-align: center; min-width: 80px; }
.stat-pill .num { font-family: var(--font-data); font-size: 18px; color: var(--ink); }
.stat-pill .lbl { font-size: 11px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .05em; }
.badge-pill { display: inline-flex; align-items: center; gap: 4px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 700; color: var(--blue-deep); }

.friend-row { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--radius-md); transition: background .15s ease; }
.friend-row:hover { background: var(--surface-2); }
.friend-row .avatar-sm { width: 42px; height: 42px; border-radius: 50%; background: var(--surface-2); position: relative; flex-shrink: 0; }
.online-dot { position: absolute; bottom: -2px; right: -2px; width: 12px; height: 12px; border-radius: 50%; background: var(--ink-faint); border: 2px solid var(--surface); }
.online-dot.online { background: var(--green); box-shadow: 0 0 6px rgba(24,201,100,.6); }
.friend-row .name { font-weight: 700; font-size: 14px; }
.friend-row .meta { font-size: 12px; color: var(--ink-faint); }
.friend-actions { margin-left: auto; display: flex; gap: 8px; }
.tab-row { display: flex; gap: 6px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.tab-btn { padding: 10px 16px; font-size: 13px; font-weight: 700; color: var(--ink-dim); border-bottom: 2px solid transparent; }
.tab-btn.active { color: var(--ink); border-color: var(--blue); }

/* ==========================================================================
   MESSAGES — a per-friend "chat" where the only content is shared games
   ========================================================================== */
.msg-layout { display: flex; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); min-height: 62vh; }
.msg-sidebar { width: 280px; flex-shrink: 0; border-right: 1px solid var(--line); overflow-y: auto; max-height: 74vh; }
.msg-sidebar .empty-state { padding: 24px 16px; }
.msg-thread-row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; border-bottom: 1px solid var(--line); }
.msg-thread-row:hover, .msg-thread-row.active { background: var(--surface-2); }
.msg-thread-row .avatar-sm { width: 38px; height: 38px; border-radius: 50%; position: relative; flex-shrink: 0; }
.msg-thread-row .name { font-weight: 700; font-size: 14px; }
.msg-thread-row .meta { font-size: 11px; color: var(--ink-faint); }
.msg-unread-pill { margin-left: auto; background: var(--green); color: #06280D; font-size: 11px; font-weight: 800; border-radius: 999px; padding: 2px 8px; flex-shrink: 0; }

.msg-thread { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.msg-thread-empty { display: flex; align-items: center; justify-content: center; flex: 1; color: var(--ink-faint); font-size: 14px; padding: 40px 20px; text-align: center; }
.msg-thread-active { flex-direction: column; min-height: 0; flex: 1; }
.msg-thread-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.msg-back-btn { display: none; width: 32px; height: 32px; border-radius: 50%; background: var(--surface-2); border: none; color: var(--ink); align-items: center; justify-content: center; flex-shrink: 0; }
.msg-thread-head .avatar-sm { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; }
.msg-thread-head .name { font-weight: 700; font-size: 15px; }

.msg-bubbles { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; max-height: 54vh; }
.msg-bubble-row { display: flex; }
.msg-bubble-row.mine { justify-content: flex-end; }
.msg-bubble {
    display: flex; align-items: center; gap: 10px; max-width: 300px; padding: 8px; border-radius: var(--radius-md);
    background: var(--surface-2); border: 1px solid var(--line); cursor: pointer; transition: transform .15s ease, border-color .15s ease;
}
.msg-bubble:hover { transform: translateY(-2px); border-color: var(--blue); }
.msg-bubble-row.mine .msg-bubble { background: linear-gradient(95deg, rgba(57,255,20,.16), rgba(57,255,20,.06)); border-color: rgba(57,255,20,.4); }
.msg-bubble img { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.msg-bubble .mb-info { min-width: 0; }
.msg-bubble .mb-title { font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 170px; }
.msg-bubble .mb-cat { font-size: 11px; color: var(--ink-faint); }
.msg-bubble .mb-play { font-size: 11px; font-weight: 800; color: var(--green-dark); margin-top: 2px; }

.msg-composer { padding: 12px 16px; border-top: 1px solid var(--line); }

@media (max-width: 720px) {
    .msg-sidebar { width: 100%; border-right: none; }
    .msg-layout.thread-open .msg-sidebar { display: none; }
    .msg-layout:not(.thread-open) .msg-thread { display: none; }
    .msg-back-btn { display: flex; }
}

.game-picker-panel { max-width: 480px; text-align: left; }
.game-picker-results { max-height: 340px; overflow-y: auto; margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.gp-item { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--radius-sm); cursor: pointer; }
.gp-item:hover { background: var(--surface-2); }
.gp-item img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.gp-item .gp-title { font-weight: 700; font-size: 13px; }
.gp-item .gp-cat { font-size: 11px; color: var(--ink-faint); }

/* ==========================================================================
   SHOP (avatars + badges purchased with Stardust)
   ========================================================================== */
.shop-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 540px) { .shop-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .shop-grid { grid-template-columns: repeat(4, 1fr); } }
.shop-item {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md);
    padding: 18px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px;
    transition: box-shadow .15s ease, transform .15s ease;
}
.shop-item:hover { box-shadow: var(--shadow-glow-blue); transform: translateY(-3px); }
.shop-item .shop-icon { width: 64px; height: 64px; }
.shop-item .shop-name { font-weight: 700; font-size: 14px; }
.shop-item .shop-price { font-family: var(--font-data); color: var(--green-dark); font-size: 13px; }
.shop-item .owned-tag { font-size: 12px; color: var(--green-dark); font-weight: 700; }

/* ==========================================================================
   QUESTS
   ========================================================================== */
.quest-item { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--line); }
.quest-item .quest-icon { width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; background: var(--surface-2); display: flex; align-items: center; justify-content: center; }
.quest-item .quest-info { flex: 1; min-width: 0; }
.quest-item .quest-title { font-weight: 700; font-size: 14px; }
.quest-item .quest-progress-track { height: 6px; border-radius: 99px; background: var(--surface-2); margin-top: 6px; overflow: hidden; }
.quest-item .quest-progress-fill { height: 100%; background: var(--blue); border-radius: 99px; transition: width .3s ease; }
.quest-item .quest-reward { font-family: var(--font-data); color: var(--green-dark); font-size: 13px; flex-shrink: 0; }

/* ==========================================================================
   LEADERBOARD
   ========================================================================== */
.lb-list { display: flex; flex-direction: column; gap: 6px; }
.lb-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--line); }
.lb-row .lb-rank { font-family: var(--font-data); font-size: 15px; font-weight: 700; width: 30px; text-align: center; color: var(--ink-faint); flex-shrink: 0; }
.lb-row.top1 { border-color: var(--green); box-shadow: var(--shadow-glow-green); }
.lb-row.top1 .lb-rank, .lb-row.top2 .lb-rank, .lb-row.top3 .lb-rank { color: var(--blue-deep); font-size: 17px; }
.lb-row.top1 .lb-rank::before { content: '🥇'; } .lb-row.top2 .lb-rank::before { content: '🥈'; } .lb-row.top3 .lb-rank::before { content: '🥉'; }
.lb-row.top1 .lb-rank, .lb-row.top2 .lb-rank, .lb-row.top3 .lb-rank { font-size: 18px; }
.lb-row .lb-avatar { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--surface-2); }
.lb-row .lb-who { flex: 1; min-width: 0; }
.lb-row .lb-name { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-row .lb-sub { font-size: 12px; color: var(--ink-faint); }
.lb-row .lb-metric { font-family: var(--font-data); font-weight: 700; font-size: 15px; color: var(--green-dark); flex-shrink: 0; white-space: nowrap; }
.lb-row .lb-metric.blue { color: var(--blue-deep); }

/* ==========================================================================
   TOASTS
   ========================================================================== */
#toast-stack { position: fixed; bottom: 20px; right: 20px; z-index: 400; display: flex; flex-direction: column; gap: 10px; max-width: 320px; }
.toast { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 16px; font-size: 13px; box-shadow: var(--shadow-card); animation: toast-in .2s ease; color: var(--ink); }
.toast.success { border-color: var(--green); }
.toast.error { border-color: var(--danger); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* In-game quick reward bubble - a brief, non-blocking "+1 Star" notice for the
   passive playtime reward, shown ABOVE the fullscreen player (z-index 500+) so
   it's actually visible while a game is open, unlike the normal #toast-stack. */
.quick-reward {
    position: fixed; top: calc(12px + env(safe-area-inset-top)); left: 50%;
    transform: translate(-50%, -14px); z-index: 520; pointer-events: none;
    background: rgba(10,20,45,.85); color: var(--green); border: 1px solid rgba(57,255,20,.5);
    border-radius: 999px; padding: 7px 16px; font-family: var(--font-data); font-weight: 700; font-size: 13px;
    opacity: 0; transition: opacity .25s ease, transform .25s ease; white-space: nowrap;
}
.quick-reward.show { opacity: 1; transform: translate(-50%, 0); }

/* ==========================================================================
   EMPTY STATES
   ========================================================================== */
.empty-state { text-align: center; padding: 48px 20px; color: var(--ink-dim); }
.empty-state h3 { color: var(--ink); margin-bottom: 6px; }
.empty-state p { font-size: 13px; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer { border-top: 1px solid var(--line); padding: 28px 0; margin-top: 40px; color: var(--ink-faint); font-size: 13px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }

/* ==========================================================================
   PLAY PAGE — pre-play info card, then a true fullscreen overlay player
   ========================================================================== */
.game-detail-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); }
.game-detail-thumb { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: var(--surface-2); }
.game-detail-body { padding: 22px; }
.game-detail-body h1 { font-size: 22px; margin-bottom: 4px; }
.game-detail-meta { font-size: 13px; color: var(--ink-faint); margin-bottom: 16px; }
.game-detail-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.rotate-hint { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-dim); background: var(--surface-2); border-radius: 999px; padding: 8px 14px; width: fit-content; }
.rotate-hint svg { width: 16px; height: 16px; flex-shrink: 0; }

/* the actual fullscreen player - CSS-driven so it works identically on
   every device, instead of relying only on the inconsistent native
   Fullscreen API (which iOS Safari doesn't support for non-video elements) */
.fullscreen-player {
    position: fixed; inset: 0; z-index: 500; background: #000;
    display: none; flex-direction: column;
}
.fullscreen-player.active { display: flex; }
.fullscreen-player iframe { flex: 1; width: 100%; height: 100%; border: none; display: block; }
/* ---- exit control: a single circular ✕ button. Press & hold to drag it
   freely anywhere on screen. ---- */
.game-controls {
    position: absolute; top: 10px; z-index: 510; touch-action: none;
}
.gc-btn {
    width: 42px; height: 42px; flex-shrink: 0; border: none; border-radius: 50%;
    background: rgba(15,30,61,.7); color: white; display: flex; align-items: center; justify-content: center;
    font-size: 18px; transition: transform .15s ease, box-shadow .15s ease;
    touch-action: none;
    /* Without these, a press-and-hold on mobile is indistinguishable from a
       long-press on plain text, so the browser pops its native "Copy"
       selection menu instead of letting our drag gesture take over. */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}
.game-controls.dragging .gc-btn { transform: scale(1.12); box-shadow: 0 0 0 4px rgba(57,255,20,.55); cursor: grabbing; }
.fullscreen-loading {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    color: white; font-family: var(--font-data); font-size: 14px; gap: 10px; flex-direction: column;
    background: #000;
}
.fullscreen-loading .spinner { width: 34px; height: 34px; border: 3px solid rgba(255,255,255,.25); border-top-color: var(--blue); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- branded game cover: masks the third-party (GamePix) loader on EVERY
   device. position:absolute + inset:0 inside the fixed fullscreen player means
   it always fills the whole screen, at any size/orientation/resize. It stays up
   until the player taps Play, so the third-party logo is never on show. ---- */
.game-cover {
    position: absolute; inset: 0; z-index: 506;
    display: flex; align-items: center; justify-content: center; text-align: center;
    background: radial-gradient(125% 125% at 50% 28%, #2a2aff 0%, #1414cc 46%, #07073f 100%);
    color: var(--white, #FBFFFF); overflow: hidden; cursor: pointer;
    transition: opacity .45s ease;
    padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
}
.game-cover.hiding { opacity: 0; pointer-events: none; }
.gc-glow {
    position: absolute; width: 60vmin; height: 60vmin; border-radius: 50%;
    background: radial-gradient(circle, rgba(57,255,20,.35), transparent 62%);
    filter: blur(28px); animation: gcPulse 2.6s ease-in-out infinite;
    transition: opacity .15s ease;
}
/* Fade the glow out fast (well before the rest of the cover finishes its slower
   .45s fade) so its translucent green circle doesn't visibly double-expose over
   the watermark patch underneath during the crossfade - was reported as the
   patch "getting in the way of" the glow on mobile. */
.game-cover.hiding .gc-glow { opacity: 0; }
@keyframes gcPulse { 0%,100% { transform: scale(.85); opacity: .55; } 50% { transform: scale(1.12); opacity: 1; } }
.gc-inner { position: relative; z-index: 1; max-width: 90vw; }
.gc-logo { width: 68px; height: 68px; filter: drop-shadow(0 6px 22px rgba(0,0,0,.4)); }
.gc-word { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 26px; margin-top: 10px; letter-spacing: .4px; }
.gc-word span { color: var(--green, #39FF14); }
.gc-title { font-size: 15px; opacity: .85; margin-top: 6px; }
.gc-spinner { display: flex; gap: 8px; justify-content: center; margin-top: 22px; height: 14px; }
.gc-spinner span { width: 12px; height: 12px; border-radius: 50%; background: var(--white, #FBFFFF); animation: gcBounce 1s infinite ease-in-out; }
.gc-spinner span:nth-child(2) { animation-delay: .15s; }
.gc-spinner span:nth-child(3) { animation-delay: .30s; }
@keyframes gcBounce { 0%,80%,100% { transform: translateY(0); opacity: .4; } 40% { transform: translateY(-10px); opacity: 1; } }
.gc-play {
    margin-top: 20px; border: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
    background: var(--green, #39FF14); color: #06280D; font-weight: 800; font-size: 18px;
    padding: 14px 36px; border-radius: 999px; box-shadow: 0 10px 26px rgba(57,255,20,.45);
    animation: gcPop .4s cubic-bezier(.2,.9,.3,1.4);
}
.gc-play[hidden] { display: none; }
@keyframes gcPop { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.gc-tag { margin-top: 18px; font-size: 11px; letter-spacing: .5px; opacity: .65; text-transform: uppercase; }

/* ---- persistent, NON-BLOCKING branding strip during gameplay (free promo for
   anyone recording/streaming). pointer-events:none => it can never get in the
   way of the game on any device. ---- */
.game-brand-bar {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 505;
    display: flex; align-items: center; justify-content: center; gap: 7px;
    padding: 7px 14px; padding-bottom: max(7px, env(safe-area-inset-bottom));
    pointer-events: none; white-space: nowrap;
    background: linear-gradient(to top, rgba(7,7,40,.8), rgba(7,7,40,0));
    color: var(--white, #FBFFFF); font-weight: 600; font-size: clamp(10px, 3.1vw, 13px);
    opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .5s ease;
}
.game-brand-bar.show { opacity: 1; transform: translateY(0); }
.gbb-logo { width: 18px; height: 18px; flex: none; }
.gbb-name span { color: var(--green, #39FF14); }
.gbb-sep { opacity: .5; }
.gbb-msg { opacity: .92; }

/* While a game is open, the site's own floating bars (cookie notice, install /
   notification banners) must never sit over the game or over anything the game
   frame shows (e.g. GamePix's own consent notice lives at the frame's bottom
   edge, exactly where our cookie bar floats). play.js toggles body.game-open. */
body.game-open .cookie-bar,
body.game-open .install-banner { display: none; }

.exit-hint {
    position: absolute; top: 96px; right: 8px; z-index: 511;
    max-width: 190px; padding: 8px 12px; border-radius: 12px;
    background: rgba(7,7,40,.92); color: var(--white, #FBFFFF);
    font-size: 12px; font-weight: 600; text-align: center; line-height: 1.4;
    box-shadow: 0 6px 20px rgba(0,0,0,.35); pointer-events: none;
    opacity: 0; transform: translateY(-6px); transition: opacity .4s ease, transform .4s ease;
}
.exit-hint.show { opacity: 1; transform: translateY(0); }

/* ---- legal pages (privacy / terms) ---- */
.legal { max-width: 760px; padding-top: 28px; padding-bottom: 60px; }
.legal h1 { font-size: 30px; }
.legal h2 { font-size: 18px; margin-top: 28px; margin-bottom: 8px; }
.legal p, .legal li { color: var(--ink-dim); line-height: 1.65; font-size: 15px; }
.legal ul { margin: 8px 0 8px 20px; }
.legal li { margin-bottom: 6px; }
.legal a { color: var(--blue-deep, #2323FF); font-weight: 600; }
.legal-updated { font-size: 13px; opacity: .75; margin-top: 4px; }
.legal-note { margin-top: 28px; font-size: 13px; opacity: .7; font-style: italic; }

/* footer legal links */
.site-footer a { color: inherit; text-decoration: underline; opacity: .85; }
.site-footer a:hover { opacity: 1; }

/* ---- cookie notice (essential cookies only — informative, not a blocking gate) ---- */
.cookie-bar {
    position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 600;
    max-width: 720px; margin: 0 auto;
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    background: var(--surface, #fff); border: 1px solid var(--line, #e3e3ef);
    border-radius: var(--radius-lg, 16px); box-shadow: var(--shadow-card, 0 10px 30px rgba(0,0,0,.14));
    padding: 14px 16px; font-size: 13px; color: var(--ink-dim);
    transform: translateY(160%); transition: transform .45s cubic-bezier(.2,.8,.2,1);
}
.cookie-bar.show { transform: translateY(0); }
.cookie-bar p { margin: 0; flex: 1; min-width: 200px; line-height: 1.5; }
.cookie-bar a { color: var(--blue-deep, #2323FF); font-weight: 700; }
.cookie-bar button { flex: none; }

/* ==========================================================================
   INSTALL BUTTON
   ========================================================================== */
.install-btn {
    display: none; align-items: center; gap: 7px; background: var(--green); color: #06280D;
    border: none; border-radius: 999px; padding: 0 16px; height: 38px; font-weight: 700; font-size: 13px;
    box-shadow: var(--shadow-glow-green); flex-shrink: 0;
}
.install-btn.visible { display: inline-flex; }
.install-btn svg { width: 16px; height: 16px; }
/* Icon-only on phones - with the full "Install" label, brand + toggle + stardust
   pill + Install + burger don't fit on one line on most phones, so the logo was
   wrapping onto its own row above everything else. Icon-only brings it all back
   onto a single row next to the logo. Must come after the base .install-btn rule
   above (same specificity - source order decides the tie, so this needs to be later). */
@media (max-width: 759px) {
    .install-btn { padding: 0 10px; gap: 0; font-size: 0; }
}
.ios-install-tip {
    display: none; position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 350;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md);
    padding: 14px 16px; box-shadow: 0 10px 30px rgba(10,30,70,.2); font-size: 13px; color: var(--ink);
    align-items: center; gap: 10px;
}
.ios-install-tip.visible { display: flex; }
.ios-install-tip .close-tip { margin-left: auto; background: none; border: none; color: var(--ink-faint); font-size: 16px; flex-shrink: 0; }

/* Friendly "install as an app" banner that slides up shortly after someone
   arrives (only on browsers that actually support installing, and only if they
   haven't dismissed/installed recently). The green Install button in the nav is
   always there too - this is just the prominent on-arrival nudge. */
.install-banner {
    position: fixed; left: 50%; bottom: 16px; z-index: 360;
    transform: translateX(-50%) translateY(160%);
    width: calc(100% - 24px); max-width: 470px;
    background: var(--surface); border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg); box-shadow: 0 16px 44px rgba(35,35,255,.24);
    padding: 13px 14px; display: flex; align-items: center; gap: 12px;
    transition: transform .4s cubic-bezier(.2,.8,.2,1);
}
.install-banner.show { transform: translateX(-50%) translateY(0); }
.install-banner .ib-mark { width: 42px; height: 42px; flex-shrink: 0; border-radius: 11px; }
.install-banner .ib-text { flex: 1; min-width: 0; }
.install-banner .ib-title { font-weight: 800; font-size: 14px; color: var(--ink); line-height: 1.2; }
.install-banner .ib-sub { font-size: 12px; color: var(--ink-dim); margin-top: 2px; }
.install-banner .ib-install {
    display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
    background: var(--green); color: #06280D; border: none; border-radius: 999px;
    height: 40px; padding: 0 18px; font-weight: 800; font-size: 14px;
    box-shadow: var(--shadow-glow-green);
}
.install-banner .ib-install svg { width: 16px; height: 16px; }
.install-banner .ib-close {
    background: none; border: none; color: var(--ink-faint); font-size: 17px;
    width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
}
.install-banner .ib-close:hover { background: var(--surface-2); color: var(--ink); }
@media (max-width: 420px) {
    .install-banner .ib-sub { display: none; }
    .install-banner .ib-install { padding: 0 14px; }
}

/* ==========================================================================
   CARD TAGS (New / Hot) — replaces "0 plays"
   ========================================================================== */
.card-tag { position: absolute; top: 8px; left: 8px; font-family: var(--font-data); font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 999px; color: #fff; letter-spacing: .04em; }
.card-tag.new { background: var(--blue); }
.card-tag.hot { background: linear-gradient(95deg, #FF6A00, #FF3D2E); }

/* ==========================================================================
   CATEGORY CARDS
   ========================================================================== */
/* Two scrollable rows so all ~25 genre buckets stay browsable without eating
   the whole homepage - twice the categories visible at once vs one strip. */
/* Scroll containers clip on BOTH axes, so hover glow/lift on cards at the strip
   edge gets cut off - give the scrollport inner padding for the glow to render
   in, and pull it back with negative margins so the layout doesn't move
   (bottom margin only cancels the extra, keeping the original 6px/8px gap). */
.category-cards { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-auto-columns: 108px; gap: 10px; overflow-x: auto; padding: 12px 12px 6px; margin: -12px -12px 0; scrollbar-width: none; }
.category-cards::-webkit-scrollbar { display: none; }
.cat-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; height: 90px; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--surface); cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.cat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-glow-blue); border-color: var(--blue); }
.cat-card .cat-emoji { font-size: 30px; line-height: 1; }
.cat-card .cat-name { font-size: 12px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 94px; }

/* ==========================================================================
   GAME OF THE DAY
   ========================================================================== */
.gotd-card { position: relative; border-radius: var(--radius-lg); overflow: hidden; min-height: 200px; background-size: cover; background-position: center; background-color: var(--surface-2); display: flex; align-items: flex-end; }
.gotd-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,16,40,0) 30%, rgba(8,16,40,.9) 100%); }
.gotd-overlay { position: relative; z-index: 1; padding: 22px; }
.gotd-overlay .gotd-cat { font-family: var(--font-data); font-size: 12px; color: #7DFF5C; text-transform: uppercase; letter-spacing: .06em; }
.gotd-overlay .gotd-title { font-family: var(--font-display); font-size: clamp(20px,4vw,30px); font-weight: 700; color: #fff; margin: 4px 0 14px; }

/* ==========================================================================
   SEARCH AUTOCOMPLETE
   ========================================================================== */
.search-ac { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-card); z-index: 70; overflow: hidden; display: none; }
.search-ac.open { display: block; }
.search-ac .ac-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer; }
.search-ac .ac-item:hover, .search-ac .ac-item.active { background: var(--surface-2); }
.search-ac .ac-item img { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; background: var(--surface-2); flex-shrink: 0; }
.search-ac .ac-item .ac-title { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-ac .ac-item .ac-cat { font-size: 11px; color: var(--ink-faint); }

/* ==========================================================================
   HOMEPAGE REWARDS ROW (Daily Spin / Trophies / Quests)
   ========================================================================== */
.rewards-row { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 560px) { .rewards-row { grid-template-columns: repeat(3, 1fr); } }
.reward-tile { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--surface); cursor: pointer; text-align: left; width: 100%; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.reward-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-glow-blue); border-color: var(--blue); }
.reward-tile .rt-emoji { font-size: 28px; line-height: 1; }
.reward-tile .rt-text { display: flex; flex-direction: column; }
.reward-tile .rt-text b { font-size: 14px; color: var(--ink); }
.reward-tile .rt-text small { font-size: 12px; color: var(--ink-faint); }

/* ==========================================================================
   ACHIEVEMENTS
   ========================================================================== */
.ach-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 640px) { .ach-grid { grid-template-columns: 1fr 1fr; } }
.ach-card { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--line); }
.ach-card.ready { border-color: var(--green); box-shadow: var(--shadow-glow-green); }
.ach-card.locked { opacity: .7; }
.ach-card .ach-icon { width: 46px; height: 46px; flex-shrink: 0; border-radius: 12px; background: var(--surface-2); display: flex; align-items: center; justify-content: center; font-size: 24px; }
.ach-card.ready .ach-icon, .ach-card.claimed .ach-icon { background: linear-gradient(135deg,#EAEDFF,#EAF5FF); }
.ach-card .ach-info { flex: 1; min-width: 0; }
.ach-card .ach-name { font-weight: 700; font-size: 14px; }
.ach-card .ach-desc { font-size: 12px; color: var(--ink-faint); }
.ach-card .ach-track { height: 6px; border-radius: 99px; background: var(--surface-2); margin-top: 7px; overflow: hidden; }
.ach-card .ach-fill { height: 100%; background: var(--blue); border-radius: 99px; transition: width .3s ease; }
.ach-card.ready .ach-fill, .ach-card.claimed .ach-fill { background: var(--green); }
.ach-card .ach-action { flex-shrink: 0; }
.ach-card .ach-status { font-family: var(--font-data); font-size: 12px; color: var(--ink-faint); white-space: nowrap; }
.ach-card .ach-status.done { color: var(--green-dark); font-weight: 700; }

/* ==========================================================================
   DAILY SPIN WHEEL
   ========================================================================== */
.spin-wheel-wrap { position: relative; width: 224px; height: 224px; margin: 18px auto 22px; }
.spin-wheel { width: 224px; height: 224px; border-radius: 50%; position: relative; border: 6px solid #fff; box-shadow: 0 8px 30px rgba(35,35,255,.32), inset 0 0 0 2px var(--line-strong); transform: rotate(0deg); }
.spin-label { position: absolute; top: 50%; left: 50%; width: 34px; margin: -12px 0 0 -17px; text-align: center; font-family: var(--font-data); font-weight: 700; font-size: 14px; color: #fff; line-height: 1; }
.spin-label small { display: block; font-size: 9px; color: #CFE6FF; }
.spin-pointer { position: absolute; top: -7px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 11px solid transparent; border-right: 11px solid transparent; border-top: 19px solid var(--green); z-index: 3; filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
.spin-hub { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 46px; height: 46px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.2); display: flex; align-items: center; justify-content: center; color: var(--green-dark); font-size: 20px; z-index: 2; }

/* ==========================================================================
   FLOATING "BACK TO HOMEPAGE" BUTTON
   ========================================================================== */
.home-fab {
    position: fixed; left: 16px; bottom: 16px; z-index: 340;
    display: inline-flex; align-items: center; gap: 7px;
    height: 44px; padding: 0 16px 0 13px; border-radius: 999px;
    background: var(--blue); color: #fff; font-weight: 700; font-size: 14px;
    box-shadow: 0 6px 20px rgba(35,35,255,.35);
    transition: transform .15s ease, background .15s ease;
}
.home-fab:hover { background: var(--blue-deep); transform: translateY(-2px); }
.home-fab svg { width: 18px; height: 18px; }

/* ==========================================================================
   STREAK "PET" WIDGET — floating badge (bottom-right) + 7-day panel.
   Green per the strict palette rule (green = Play + Stars only) since this
   IS a Stars-reward surface.
   ========================================================================== */
.streak-fab {
    position: fixed; right: 16px; bottom: 16px; z-index: 340;
    width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: radial-gradient(120% 120% at 32% 26%, #74FF5C, var(--green) 55%, #0B8A3E);
    box-shadow: 0 6px 18px rgba(24,201,100,.4), 0 0 0 3px rgba(57,255,20,.22);
    animation: streakFabPulse 2.6s ease-in-out infinite;
    transition: transform .15s ease;
}
.streak-fab:hover { transform: scale(1.07); }
.streak-fab .sf-emoji { font-size: 19px; line-height: 1; }
.streak-fab .sf-count { font-family: var(--font-data); font-weight: 800; font-size: 12px; line-height: 1; margin-top: 1px; color: #06280D; }
@keyframes streakFabPulse {
    0%, 100% { box-shadow: 0 6px 18px rgba(24,201,100,.4), 0 0 0 3px rgba(57,255,20,.22); }
    50%      { box-shadow: 0 8px 24px rgba(24,201,100,.55), 0 0 0 7px rgba(57,255,20,.1); }
}
@media (max-width: 759px) { .streak-fab { right: 12px; bottom: 12px; width: 50px; height: 50px; } }

.streak-strip { display: flex; gap: 6px; margin-top: 18px; overflow-x: auto; padding-bottom: 2px; }
.sd-card {
    flex: 1 0 44px; min-width: 44px; border-radius: var(--radius-sm); padding: 8px 4px;
    text-align: center; border: 1px solid var(--line); background: var(--surface-2);
}
.sd-card .sd-label { font-size: 9px; font-weight: 700; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .02em; }
.sd-card .sd-icon { font-size: 16px; line-height: 1.6; }
.sd-card .sd-reward { font-family: var(--font-data); font-size: 10px; font-weight: 700; color: var(--ink-dim); }
.sd-card.sd-claimed { background: rgba(57,255,20,.12); border-color: var(--green); }
.sd-card.sd-claimed .sd-reward { color: var(--green-dark); }
.sd-card.sd-today { background: rgba(35,35,255,.1); border-color: var(--blue); box-shadow: 0 0 0 2px rgba(35,35,255,.15); }
.sd-card.sd-today .sd-reward { color: var(--blue-deep); }
.sd-card.sd-locked { opacity: .55; }
.sd-card.sd-none { opacity: .35; }

/* ==========================================================================
   LOADING SPLASH (shown on first paint, fades out once the page is ready)
   ========================================================================== */
#hoku-splash {
    position: fixed; inset: 0; z-index: 9999;
    background: radial-gradient(circle at 50% 34%, #DCEEFF 0%, #FBFFFF 62%);
    display: flex; align-items: center; justify-content: center;
    transition: opacity .45s ease, visibility .45s ease;
}
#hoku-splash.hide { opacity: 0; visibility: hidden; }
#hoku-splash .hs-inner { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 24px; }
#hoku-splash .hs-logo { width: 96px; height: 96px; animation: hs-pulse 1.2s ease-in-out infinite; }
#hoku-splash .hs-word { font-family: var(--font-display), 'Space Grotesk', sans-serif; font-weight: 700; font-size: 30px; letter-spacing: -0.5px; color: var(--blue-deep); }
#hoku-splash .hs-word span { color: var(--green-dark); }
#hoku-splash .hs-bar { width: 180px; height: 6px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
#hoku-splash .hs-bar span { display: block; height: 100%; width: 38%; border-radius: 99px; background: linear-gradient(90deg, var(--blue), var(--green)); animation: hs-load 1.1s ease-in-out infinite; }
@keyframes hs-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.09); } }
@keyframes hs-load { 0% { transform: translateX(-130%); } 100% { transform: translateX(360%); } }

/* ==========================================================================
   DAILY STREAK POPUP icon bounce
   ========================================================================== */
.streak-emoji { animation: streak-pop .5s ease; display: inline-block; }
@keyframes streak-pop { 0% { transform: scale(.4); } 60% { transform: scale(1.2); } 100% { transform: scale(1); } }

@media (max-width: 600px) {
    .section { padding: 16px 0; }
    .hero-feature { min-height: 220px; }
    .reward-card { padding: 12px 14px; gap: 10px; }
    .reward-card > div:first-child { gap: 10px !important; }
    .reward-card .spark-lg { width: 26px; height: 26px; }
    .reward-card h3 { font-size: 13px; }
    .reward-card p { display: none; }
    .reward-card .btn { padding: 8px 14px; font-size: 12px; }
}

/* ============================================================
   Announcement banner (admin panel). Was previously unstyled.
   ============================================================ */
.announce-bar {
    background: linear-gradient(95deg, var(--blue-deep), var(--blue));
    color: #FBFFFF;
}
.announce-inner {
    max-width: 1320px; margin: 0 auto; padding: 10px 16px;
    display: flex; align-items: center; gap: 12px;
}
.announce-inner p { margin: 0; font-size: 13px; font-weight: 600; flex: 1; min-width: 0; }
.announce-inner a { color: #39FF14; font-weight: 700; font-size: 13px; white-space: nowrap; }
.announce-close {
    flex: none; background: rgba(255,255,255,.14); border: none; color: #FBFFFF;
    width: 26px; height: 26px; border-radius: 50%; cursor: pointer; font-size: 12px; line-height: 1;
}
.announce-close:hover { background: rgba(255,255,255,.3); }

/* ============================================================
   Social login + magic phrase (login / register)
   ============================================================ */
.auth-divider {
    display: flex; align-items: center; gap: 10px; margin: 18px 0 12px;
    color: var(--ink-faint); font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
}
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.oauth-btn {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; padding: 11px 14px; margin-top: 8px;
    border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--ink); font-weight: 700; font-size: 14px;
    text-decoration: none; transition: border-color .15s, transform .15s;
}
.oauth-btn:hover { border-color: var(--blue); transform: translateY(-1px); }
.oauth-fineprint { font-size: 11px; color: var(--ink-faint); margin-top: 10px; line-height: 1.5; }
.oauth-fineprint a { color: var(--blue-deep); font-weight: 700; }
.phrase-input {
    width: 100%; margin-top: 12px; padding: 12px; font-size: 15px; font-family: var(--font-data);
    border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--ink); resize: vertical;
}
.phrase-input:focus { outline: none; border-color: var(--blue); }
.phrase-words {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px;
}
.phrase-words .pw {
    display: flex; align-items: center; gap: 8px; padding: 9px 12px;
    background: var(--surface-2, #F1F4FF); border: 1.5px solid var(--line-strong);
    border-radius: var(--radius-sm); font-family: var(--font-data); font-weight: 700; font-size: 15px;
}
.phrase-words .pw b {
    flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--blue);
    color: #FBFFFF; font-size: 11px; display: flex; align-items: center; justify-content: center;
}

/* ============================================================
   First-visit tour
   ============================================================ */
.tour-overlay { position: fixed; inset: 0; z-index: 300; }
.tour-overlay::before { content: ""; position: absolute; inset: 0; }
.tour-pane { position: fixed; background: rgba(8, 12, 40, .62); }
.tour-spot {
    position: fixed; border-radius: 14px; pointer-events: none;
    border: 2px solid var(--green); box-shadow: 0 0 22px rgba(57, 255, 20, .5);
}
.tour-tip {
    position: fixed; z-index: 301; width: min(330px, calc(100vw - 20px));
    background: var(--surface); color: var(--ink); border-radius: 16px; padding: 16px;
    box-shadow: 0 18px 50px rgba(10, 16, 60, .35); border: 1.5px solid var(--line-strong);
}
.tour-tip.tour-center {
    top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.tour-title { font-family: var(--font-display, inherit); font-weight: 700; font-size: 17px; }
.tour-text { font-size: 13px; color: var(--ink-dim); line-height: 1.55; margin: 8px 0 0; }
.tour-dots { display: flex; gap: 5px; margin: 12px 0 0; }
.tour-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); }
.tour-dot.on { background: var(--blue); }
.tour-btns { display: flex; justify-content: space-between; gap: 8px; margin-top: 12px; }
/* "+5 ✦" chip that pops in the tour tooltip every time Next pays out */
.tour-earn {
    display: inline-flex; align-items: center; gap: 4px; margin-left: 8px;
    font-family: var(--font-data); font-weight: 700; font-size: 12px;
    color: var(--green-dark); background: rgba(57,255,20,.14);
    border: 1px solid rgba(57,255,20,.5); border-radius: 999px; padding: 2px 9px;
    animation: tour-earn-pop .45s cubic-bezier(.2,.9,.3,1.4);
}
@keyframes tour-earn-pop { from { transform: scale(.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ============================================================
   Exit confirmation inside the fullscreen player. Shown when the ✕ is
   tapped so nobody leaves a game by accident thinking the ✕ skips an ad
   (in-game ads close on their own; our ✕ only exits the game).
   ============================================================ */
.exit-confirm {
    position: absolute; inset: 0; z-index: 540; display: none;
    align-items: center; justify-content: center; padding: 18px;
    background: rgba(4, 6, 26, .62);
}
.exit-confirm.show { display: flex; }
.exit-confirm .ec-card {
    width: 100%; max-width: 340px; background: var(--surface, #fff); color: var(--ink, #0B0B1A);
    border-radius: 20px; padding: 22px; text-align: center;
    box-shadow: 0 24px 70px rgba(0,0,0,.5);
    animation: gcPop .3s cubic-bezier(.2,.9,.3,1.3);
}
.exit-confirm h3 { font-size: 18px; margin-bottom: 8px; }
.exit-confirm p { font-size: 13px; color: var(--ink-dim, #46466E); line-height: 1.55; }
.exit-confirm .ec-btns { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }

/* ============================================================
   Kids Zone + parental controls
   ============================================================ */
.kids-tag {
    margin-left: 8px; padding: 3px 9px; border-radius: 999px; background: var(--green);
    color: #06280D; font-weight: 800; font-size: 11px; letter-spacing: .08em;
}
.kids-hero {
    text-align: center; padding: 34px 14px 10px;
}
.kids-hero h1 { font-size: clamp(30px, 7vw, 44px); }
.kids-hero p { color: var(--ink-dim); font-size: 15px; margin-top: 6px; }
.kids-note {
    font-size: 12px; color: var(--ink-faint); line-height: 1.6; margin: 26px 0 10px;
    padding: 14px 16px; background: var(--surface-2, #F1F4FF); border-radius: var(--radius-sm);
}
.kids-note a { color: var(--blue-deep); font-weight: 700; }
.kids-card .info h3 { font-size: 14px; }
.kp-row {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 12px 0; border-bottom: 1px solid var(--line); cursor: pointer; font-size: 14px;
}
.kp-row small { color: var(--ink-faint); font-weight: 400; }
.kp-select {
    padding: 8px 10px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 600;
}
.kids-lock {
    position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 50% 30%, #2a2aff 0%, #14144d 55%, #07073f 100%);
    padding: 18px;
}
.kl-card {
    max-width: 360px; width: 100%; background: var(--surface); border-radius: 22px;
    padding: 26px 22px; text-align: center; box-shadow: 0 24px 70px rgba(0,0,0,.45);
}
.kl-emoji { font-size: 52px; line-height: 1; }
.kl-card h2 { margin-top: 10px; font-size: 22px; }
.kl-card p { color: var(--ink-dim); font-size: 13px; line-height: 1.55; margin-top: 8px; }
.kl-pin {
    width: 160px; margin-top: 14px; padding: 10px; text-align: center; font-size: 20px; letter-spacing: .3em;
    border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink);
}
.kl-err { color: var(--danger); font-size: 12px; font-weight: 700; min-height: 16px; margin-top: 6px; }
.kl-btns { display: flex; gap: 8px; justify-content: center; margin-top: 10px; flex-wrap: wrap; }

/* ==========================================================================
   SEO / server-rendered page components (homepage H1, breadcrumbs, category
   chip rows, pager, tag collections). These classes existed unstyled on the
   /games pages - this section gives them a proper on-palette look.
   ========================================================================== */
.home-h1 { font-size: clamp(19px, 2.6vw, 24px); font-weight: 700; color: var(--ink); margin: 18px 0 0; }
.home-h1 span { color: var(--blue); }
a.cat-card { text-decoration: none; }

.crumbs { font-size: 13px; color: var(--ink-faint); }
.crumbs a { color: var(--ink-dim); text-decoration: none; font-weight: 600; }
.crumbs a:hover { color: var(--blue); }
.crumbs span { color: var(--ink-faint); }

.seo-intro { color: var(--ink-dim); font-size: 14.5px; line-height: 1.65; max-width: 760px; margin: 10px 0 18px; }

.seo-cat-links, .seo-tag-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 10px; }
.seo-cat-links a, .seo-tag-links a {
    display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px;
    background: var(--surface); border: 1px solid var(--line); color: var(--ink);
    font-weight: 600; font-size: 13.5px; text-decoration: none;
    transition: background .15s, border-color .15s, transform .1s;
}
.seo-cat-links a:hover, .seo-tag-links a:hover { border-color: var(--blue); transform: translateY(-1px); }
.seo-cat-links a.cur { background: var(--blue); border-color: var(--blue); color: #FFFFFF; }

.pager { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; margin: 26px 0 6px; }
.pager a, .pager .cur {
    min-width: 38px; padding: 8px 12px; text-align: center; border-radius: var(--radius-sm);
    border: 1px solid var(--line); background: var(--surface); color: var(--ink);
    font-weight: 700; font-size: 14px; text-decoration: none;
}
.pager a:hover { border-color: var(--blue); color: var(--blue); }
.pager .cur { background: var(--blue); border-color: var(--blue); color: #FFFFFF; }
.pager .gap { color: var(--ink-faint); padding: 0 2px; }

.seo-more-links { color: var(--ink-dim); font-size: 14px; margin-top: 14px; }
.seo-more-links a { color: var(--blue-deep); font-weight: 700; }

/* Game page: visible how-to-play + about blocks (server-rendered). */
.game-howto { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 18px 20px; max-width: 860px; }
.game-howto p { color: var(--ink-dim); font-size: 14.5px; line-height: 1.65; margin: 8px 0 0; }
.game-about-facts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 10px 0 2px; padding: 0; list-style: none; }
.game-about-facts li { font-size: 13.5px; color: var(--ink-dim); }
.game-about-facts b { color: var(--ink); font-weight: 700; }
.game-about-facts a { color: var(--blue-deep); font-weight: 700; text-decoration: none; }
.game-about-facts a:hover { text-decoration: underline; }