/* ════════════════════════════════════════════════════════════════════
   Bhuchi Arcade — web hub.
   Glassmorphism pass: frosted surfaces over a slow-drifting aurora,
   with motion that reacts to input rather than decorating idly.

   PERFORMANCE NOTE (deliberate, please keep):
   `backdrop-filter` is genuinely expensive — the compositor re-samples
   everything behind the element every frame. It is therefore used only on
   the handful of LARGE, mostly-static surfaces (header, rail, hero,
   sheets, player bar). The 30 game cards use a layered translucent
   gradient that *reads* as glass but costs nothing, because 30
   simultaneously-blurring surfaces drops mid-range phones to single-digit
   frame rates. Same look, a fraction of the cost.

   Breakpoints — mobile-first:
     base      phone      : 2-col grid, pill category row
     >=480px   big phone  : slightly roomier
     >=700px   tablet     : 3-col, search + sort side by side
     >=1080px  desktop    : glass rail + 4-col + side panel by the game
     >=1500px  wide       : 5-col
     >=1900px  ultrawide  : 6-col, capped content width
   Plus landscape-phone and reduced-motion variants.
   ════════════════════════════════════════════════════════════════════ */

:root {
  --bg: #0E0F16;              /* neutral charcoal-navy, not black */
  --bg-raise: #171926;        /* cards and rails sit one step up from the page */
  --text: #F4F5F8;
  --muted: #9AA0B4;
  --accent: #8B5CFF;          /* overwritten at runtime by the accent picker */
  --success: #35D9A0;
  --danger: #FF5A6E;

  /* Surface tokens. Named "glass-*" for continuity with the rest of the
     sheet; in the CRT theme they are flat tinted panels rather than blurs,
     because a blur behind a scanline veil just reads as mud. */
  --glass-bg: #171926;
  --glass-bg-strong: #171926;
  --glass-brd: rgba(255, 255, 255, .08);
  --glass-brd-lit: rgba(255, 255, 255, .18);
  --glass-blur: none;
  --glass-shadow: 0 1px 2px rgba(0, 0, 0, .3);

  --radius: 14px;
  --radius-sm: 10px;
  --tap: 48px;
  --font-display: inherit;
  --ease: cubic-bezier(.22, 1, .36, 1);       /* soft overshoot-free ease-out */
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
}
body { position: relative; overflow-x: hidden; }

/* ═══════════ BACKGROUND ═══════════
   Deliberately almost nothing. Poki and CrazyGames both ship a flat
   surface and let the game tiles carry all the colour; every decorative
   layer we tried (scanlines, starfield, grid horizon) competed with the
   cards and made the page feel noisy and cheap. One very soft accent wash
   at the top is the entire treatment.
   ─────────────────────────────── */
.screen::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0 0 auto 0;
  height: 420px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 10%, transparent) 0%, transparent 100%);
  pointer-events: none;
}
.crt-veil { display: none; }

button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 10px; }
[hidden] { display: none !important; }
.screen { min-height: 100%; display: flex; flex-direction: column; }

/* ─────────── Reusable glass surface ─────────── */
.hub-header, .rail, .hero, .sheet, .player-bar, .side-panel, .search-wrap, .coach-card {
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
/* Without backdrop-filter support, fall back to a solid-ish panel so text
   never sits on a transparent wash it can't be read against. */
@supports not (backdrop-filter: blur(2px)) {
  .hub-header, .rail, .hero, .sheet, .player-bar, .side-panel, .search-wrap, .coach-card {
    background-color: rgba(16, 13, 34, .93) !important;
  }
}

/* ─────────── Header ─────────── */
.hub-header {
  position: sticky; top: 0; z-index: 30;
  background: linear-gradient(180deg, rgba(12,9,24,.80), rgba(12,9,24,.55));
  border-bottom: 1px solid var(--glass-brd);
  padding-top: env(safe-area-inset-top);
}
.hub-header-inner {
  max-width: 1600px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 14px clamp(14px, 4vw, 28px);
}
.wordmark {
  margin: 0; font-weight: 900; letter-spacing: -.03em;
  font-size: clamp(1.15rem, 1rem + 1.2vw, 1.6rem);
  animation: fade-down .5s var(--ease) both;
}
.wordmark span {
  background: linear-gradient(90deg, #B98CFF, #FF4FA3, #B98CFF);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: sheen 6s linear infinite;
}
@keyframes sheen { to { background-position: -200% 0; } }
@keyframes fade-down { from { opacity: 0; transform: translateY(-8px); } }

.icon-btn {
  min-width: var(--tap); min-height: var(--tap);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--glass-brd);
  background: var(--glass-bg);
  font-size: 1.05rem; line-height: 1;
  transition: background .2s var(--ease), transform .2s var(--ease-spring), border-color .2s;
}
.icon-btn:hover { background: rgba(255,255,255,.13); border-color: var(--glass-brd-lit); transform: translateY(-1px); }
.icon-btn:active { transform: scale(.9); }

/* ─────────── Layout ─────────── */
.hub-body {
  flex: 1; width: 100%; max-width: 1600px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr;
  padding: 0 0 calc(32px + env(safe-area-inset-bottom));
}
.hub-main { padding: clamp(14px, 3vw, 26px); min-width: 0; }
.rail { display: none; }

/* ─────────── Hero ─────────── */
.hero {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 16px;
  padding: clamp(16px, 3vw, 22px);
  margin-bottom: 18px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(185,140,255,.16), rgba(255,79,163,.07));
  border: 1px solid var(--glass-brd-lit);
  box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,.14);
  animation: rise-in .55s var(--ease) both;
}
/* slow light sweep across the glass */
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.13) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: sweep 7s ease-in-out infinite;
  pointer-events: none;
}
@keyframes sweep { 0%, 62% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@keyframes rise-in { from { opacity: 0; transform: translateY(14px); } }

.hero-avatar {
  width: clamp(48px, 12vw, 62px); aspect-ratio: 1; flex: none;
  display: grid; place-items: center; font-size: clamp(1.4rem, 5vw, 1.9rem);
  border-radius: 999px;
  background: linear-gradient(145deg, #B98CFF, #5A1FE0);
  box-shadow: 0 0 24px rgba(139,92,255,.6), inset 0 1px 0 rgba(255,255,255,.4);
  animation: bob 4.5s ease-in-out infinite;
}
@keyframes bob { 50% { transform: translateY(-5px); } }
.hero-copy { min-width: 0; }
.hero-name { margin: 0; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.hero-line { margin: 4px 0 0; font-weight: 650; font-size: clamp(.95rem, .85rem + .5vw, 1.15rem); }
.hero-meta { margin: 6px 0 0; font-size: .74rem; color: var(--muted); }

/* ─────────── Controls ─────────── */
.controls { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.search-wrap {
  display: flex; align-items: center; gap: 9px;
  min-height: var(--tap); padding: 0 14px;
  border-radius: 999px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-brd);
  transition: border-color .25s, box-shadow .25s, background .25s;
}
.search-wrap:focus-within {
  border-color: color-mix(in srgb, var(--accent) 70%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
  background: rgba(255,255,255,.08);
}
.search-icon { font-size: .9rem; opacity: .75; }
#search { flex: 1; min-width: 0; background: none; border: 0; color: var(--text); font-size: 1rem; padding: 12px 0; }
#search::placeholder { color: var(--muted); }
#search:focus { outline: none; }
#search::-webkit-search-cancel-button { display: none; }
.search-clear { border: 0; background: none; color: var(--muted); min-width: 34px; min-height: 34px; border-radius: 999px; transition: color .2s, transform .2s; }
.search-clear:hover { color: var(--text); transform: rotate(90deg); }

.sorts { display: flex; gap: 7px; flex-wrap: wrap; }
.chip {
  /* Finger-sized by default; only shrinks for a mouse (see below). Relying
     solely on `pointer: coarse` would leave touch laptops and any device
     that reports a fine pointer with a 36px target. */
  min-height: 44px; padding: 0 16px;
  border-radius: 999px; font-size: .78rem;
  border: 1px solid var(--glass-brd);
  background: var(--glass-bg); color: var(--muted);
  transition: all .22s var(--ease);
}
.chip:hover { color: var(--text); border-color: var(--glass-brd-lit); }
.chip.is-active {
  color: #fff; font-weight: 700;
  border-color: transparent;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #FF4FA3));
  box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 45%, transparent);
}

.pill-cats { display: flex; gap: 9px; overflow-x: auto; padding: 2px 0 6px; margin-bottom: 16px; scrollbar-width: none; }
.pill-cats::-webkit-scrollbar { display: none; }
.cat-pill {
  flex: none; display: flex; align-items: center; gap: 8px;
  min-height: var(--tap); padding: 0 16px;
  border-radius: 999px; white-space: nowrap; font-size: .85rem;
  border: 1px solid var(--glass-brd);
  background: var(--glass-bg); color: var(--muted);
  transition: all .25s var(--ease);
}
.cat-pill:hover { transform: translateY(-2px); border-color: var(--glass-brd-lit); }
.cat-pill:active { transform: scale(.96); }
.cat-pill .dot {
  width: 22px; aspect-ratio: 1; border-radius: 999px;
  display: grid; place-items: center; font-size: .72rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}
.cat-pill[aria-selected="true"] { color: var(--text); font-weight: 700; }

/* ─────────── Sections ─────────── */
.section-label { margin: 0; font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.continue { margin-bottom: 20px; animation: rise-in .5s .05s var(--ease) both; }
.continue-row { display: flex; gap: 11px; overflow-x: auto; padding: 11px 2px 6px; scrollbar-width: none; }
.continue-row::-webkit-scrollbar { display: none; }
.cont-card {
  flex: none; display: flex; align-items: center; gap: 11px;
  min-height: var(--tap); padding: 11px 16px;
  border-radius: var(--radius-sm); text-align: left;
  border: 1px solid var(--glass-brd);
  background: var(--glass-bg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  transition: transform .25s var(--ease), box-shadow .25s, border-color .25s;
}
.cont-card:hover { transform: translateY(-3px); border-color: var(--glass-brd-lit); box-shadow: 0 10px 26px rgba(0,0,0,.4); }
.cont-card:active { transform: scale(.97); }
.cont-emoji { font-size: 1.35rem; }
.cont-name { font-size: .84rem; font-weight: 700; }
.cont-best { font-size: .7rem; color: var(--muted); }

.grid-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.count { font-size: .72rem; color: var(--muted); }

/* ─────────── Game grid ─────────── */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(10px, 2vw, 16px); }

.card-game {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; gap: 7px;
  padding: clamp(13px, 2.4vw, 17px);
  min-height: clamp(132px, 26vw, 168px);
  text-align: left;
  border-radius: var(--radius);
  /* Fake-glass: layered translucency instead of backdrop-filter (see note) */
  background:
    linear-gradient(160deg, rgba(255,255,255,.085) 0%, rgba(255,255,255,.02) 42%, rgba(255,255,255,.045) 100%),
    rgba(18, 15, 38, .55);
  border: 1px solid var(--glass-brd);
  box-shadow: 0 4px 18px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.10);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s;
  animation: card-in .42s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 22ms);
}
@keyframes card-in { from { opacity: 0; transform: translateY(16px) scale(.97); } }

/* moving highlight on hover */
.card-game::before {
  content: ""; position: absolute; inset: -1px; z-index: -1;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.16) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: transform .7s var(--ease);
}
.card-game:hover::before { transform: translateX(100%); }
.card-game:hover { transform: translateY(-5px); border-color: var(--glass-brd-lit); box-shadow: 0 16px 38px rgba(0,0,0,.5); }
.card-game:active { transform: translateY(-1px) scale(.985); }

.card-emoji { font-size: clamp(1.5rem, 5vw, 1.9rem); transition: transform .3s var(--ease-spring); }
.card-game:hover .card-emoji { transform: scale(1.16) rotate(-6deg); }
.card-title { font-size: clamp(.85rem, .78rem + .3vw, .96rem); font-weight: 700; }
.card-desc { font-size: clamp(.7rem, .66rem + .2vw, .78rem); color: var(--muted); line-height: 1.4; }
.card-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 4px; }
.badge {
  font-size: .64rem; font-weight: 700; padding: 4px 9px; border-radius: 999px;
  background: rgba(255,255,255,.09); color: var(--muted);
  border: 1px solid rgba(255,255,255,.07);
}
.badge.best { color: #0B0A14; border: 0; box-shadow: 0 2px 10px rgba(0,0,0,.35); }

.empty { text-align: center; padding: 56px 20px; color: var(--muted); animation: rise-in .4s var(--ease) both; }
.empty-icon { font-size: 2.2rem; animation: bob 3s ease-in-out infinite; }
.empty-title { margin: 12px 0 4px; font-weight: 700; color: var(--text); }
.empty-sub { margin: 0; font-size: .84rem; }

/* ─────────── Player ─────────── */
.player-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px clamp(12px, 3vw, 20px);
  padding-top: calc(10px + env(safe-area-inset-top));
  border-bottom: 1px solid var(--glass-brd);
  background: linear-gradient(180deg, rgba(12,9,24,.82), rgba(12,9,24,.55));
  animation: fade-down .4s var(--ease) both;
}
.player-title { display: flex; align-items: center; gap: 9px; font-weight: 700; min-width: 0; }
.player-title span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-score { margin-left: auto; font-size: .82rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.challenge-target { margin: 8px auto 0; width: min(560px, calc(100% - 20px)); padding: 8px 12px; border: 1px solid color-mix(in srgb, var(--accent) 55%, rgba(255,255,255,.18)); border-radius: 999px; background: color-mix(in srgb, var(--accent) 13%, rgba(14,15,22,.94)); color: var(--text); text-align: center; font-size: .76rem; font-weight: 750; letter-spacing: .01em; }
.challenge-target strong { color: var(--accent); }
.challenge-target[hidden] { display: none; }

.stage-wrap { flex: 1; display: flex; gap: clamp(12px, 2.5vw, 24px); justify-content: center; align-items: stretch; padding: clamp(10px, 2.5vw, 22px); min-height: 0; }
.stage {
  position: relative; flex: 1;
  max-width: min(100%, calc((100dvh - 150px) * 4 / 7));
  aspect-ratio: 4 / 7; margin: 0 auto;
  border-radius: 22px; overflow: hidden;
  background: #0F1120;
  border: 1px solid var(--glass-brd-lit);
  /* glow frame — the game itself stays perfectly crisp, never blurred */
  box-shadow: 0 24px 60px rgba(0,0,0,.6), 0 0 60px -12px color-mix(in srgb, var(--accent) 55%, transparent);
  animation: stage-in .45s var(--ease) both;
}
@keyframes stage-in { from { opacity: 0; transform: scale(.97); } }
#frame { width: 100%; height: 100%; border: 0; display: block; }
.frame-loading { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: .85rem; background: #0F1120; }
.frame-loading::after { content: ""; margin-left: 8px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--muted); border-top-color: transparent; animation: spin .8s linear infinite; }
.frame-loading.is-error::after { display:none; }
.load-error { display:grid; gap:12px; justify-items:center; max-width:320px; padding:24px; text-align:center; color:var(--muted); }
.load-error strong { color:var(--text); font-size:1.1rem; }
.load-error span { font-size:.88rem; line-height:1.5; }
.load-error div { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.load-error .btn { position:relative; z-index:1; }
@keyframes spin { to { transform: rotate(360deg); } }
.side-panel { display: none; }

/* Directional D-pad removed from the web player.
   Mobile games use their native tap / drag / swipe gestures instead. */
.dpad,
.dpad-btn {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ─────────── Overlays ─────────── */
.overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center; padding: clamp(14px, 4vw, 24px);
  background: rgba(4, 2, 10, .68);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  animation: fade .22s var(--ease);
}
@keyframes fade { from { opacity: 0; } }
.sheet {
  width: 100%; max-width: 430px;
  border-radius: 26px; padding: clamp(18px, 4vw, 24px);
  background: linear-gradient(150deg, rgba(255,255,255,.10), rgba(255,255,255,.03)), var(--glass-bg-strong);
  border: 1px solid var(--glass-brd-lit);
  box-shadow: 0 30px 70px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.18);
  animation: sheet-in .34s var(--ease-spring) both;
}
@keyframes sheet-in { from { opacity: 0; transform: translateY(20px) scale(.95); } }
.sheet-tall { max-width: 540px; max-height: min(88dvh, 780px); display: flex; flex-direction: column; padding: 0; }
.sheet-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--glass-brd); }
.sheet-bar h2 { margin: 0; font-size: 1.15rem; }
.sheet-scroll { overflow-y: auto; padding: 4px 20px 24px; -webkit-overflow-scrolling: touch; }

.sheet-head { text-align: center; margin-bottom: 18px; }
.sheet-icon { font-size: 2.1rem; animation: pop .45s var(--ease-spring) both; }
@keyframes pop { from { opacity: 0; transform: scale(.5); } }
.sheet-head h2 { margin: 8px 0 2px; font-size: 1.32rem; }
.sheet-sub { margin: 0; font-size: .8rem; color: var(--muted); }
.sheet-best { margin: 9px 0 0; font-size: .72rem; color: var(--muted); }
.sheet-actions { display: flex; flex-direction: column; gap: 10px; }
.share-icon { display:inline-flex; align-items:center; justify-content:center; width:1.15em; height:1.15em; margin-right:4px; font-weight:800; line-height:1; }

/* Result screen: compact enough for small phones, but still feels like a
   celebration rather than a settings sheet. */
.result-sheet { max-width:460px; max-height:min(92dvh,780px); overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
.result-head { margin-bottom:12px; }
.result-head .sheet-icon { font-size:2.35rem; }
.result-score-block { margin-bottom:16px; }
.result-actions { display:flex; flex-direction:column; gap:10px; }
.result-rewards { display:flex; flex-direction:column; gap:8px; }
.result-share-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.btn-compact { min-height:46px; padding-inline:12px; font-size:.84rem; }
.result-play-again { min-height:54px; font-size:1rem; }
.result-exit { min-height:44px; color:var(--muted); }
.social-share-row { display:grid; grid-template-columns:repeat(5, 1fr); gap:8px; padding:4px 0 2px; animation:sharePanelIn .18s ease-out both; }
@keyframes sharePanelIn { from { opacity:0; transform:translateY(-5px) scale(.985); } to { opacity:1; transform:none; } }
.social-icon-btn { appearance:none; -webkit-appearance:none; min-width:0; width:100%; aspect-ratio:1.2/1; min-height:46px; max-height:52px; display:grid; place-items:center; border-radius:14px; border:1px solid rgba(255,255,255,.22); color:#fff; cursor:pointer; box-shadow:0 5px 14px rgba(0,0,0,.18); transition:transform .16s var(--ease-spring), filter .18s, border-color .18s, box-shadow .18s; }
.social-icon-btn:hover { filter:brightness(1.08); border-color:rgba(255,255,255,.55); transform:translateY(-1px); box-shadow:0 7px 18px rgba(0,0,0,.24); }
.social-icon-btn:active { transform:scale(.95); }
.social-icon-btn:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.social-icon-btn .brand-logo { width:23px; height:23px; display:block; object-fit:contain; }
.social-icon-btn img.brand-logo { filter:brightness(0) invert(1); }
.social-whatsapp { background:#25D366; }
.social-facebook { background:#1877F2; }
.social-instagram { background:linear-gradient(135deg,#833AB4 0%,#C13584 35%,#FD1D1D 68%,#FCB045 100%); }
.social-x { background:#000; }
.social-copy { background:linear-gradient(145deg, color-mix(in srgb, var(--accent) 72%, #30285a), #2a2446); color:#fff; }
.social-copy .copy-logo { fill:none; stroke:currentColor; stroke-width:1.8; }
#r-share[aria-expanded="true"] { border-color:color-mix(in srgb, var(--accent) 60%, #fff); background:color-mix(in srgb, var(--accent) 16%, var(--glass-bg)); }

.btn {
  position: relative; overflow: hidden;
  min-height: 52px; padding: 0 20px; width: 100%;
  border-radius: 16px; font-size: .95rem; font-weight: 650;
  border: 1px solid var(--glass-brd);
  background: var(--glass-bg); color: var(--text);
  transition: transform .18s var(--ease-spring), filter .2s, box-shadow .25s, border-color .2s;
}
.btn:hover { filter: brightness(1.2); border-color: var(--glass-brd-lit); }
.btn:active { transform: scale(.97); }
.btn.primary {
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 50%, #FF4FA3));
  border-color: transparent; color: #fff;
  box-shadow: 0 8px 26px color-mix(in srgb, var(--accent) 50%, transparent);
}
.btn.primary::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.28) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: transform .6s var(--ease);
}
.btn.primary:hover::after { transform: translateX(100%); }
.btn.danger { background: rgba(255,46,106,.15); border-color: rgba(255,46,106,.5); color: #FF88AC; }

.toggles { border-radius: var(--radius-sm); overflow: hidden; background: rgba(255,255,255,.045); border: 1px solid var(--glass-brd); margin-bottom: 16px; }
.toggle-row { width: 100%; min-height: 56px; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 0; background: none; text-align: left; transition: background .2s; }
.toggle-row:hover { background: rgba(255,255,255,.04); }
.toggles .toggle-row + .toggle-row { border-top: 1px solid var(--glass-brd); }
.toggle-row span strong { display: block; font-size: .92rem; font-weight: 650; }
.toggle-row span small { display: block; font-size: .74rem; color: var(--muted); margin-top: 2px; }
.switch { flex: none; width: 48px; height: 28px; border-radius: 999px; background: #241C4A; position: relative; transition: background .25s var(--ease); box-shadow: inset 0 1px 3px rgba(0,0,0,.5); }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 999px; background: #F5F3FF; transition: transform .28s var(--ease-spring); box-shadow: 0 1px 4px rgba(0,0,0,.4); }
[aria-checked="true"] .switch { background: linear-gradient(135deg, var(--accent), #FF4FA3); }
[aria-checked="true"] .switch::after { transform: translateX(20px); }

.howto { font-size: .8rem; color: var(--muted); background: rgba(255,255,255,.045); border: 1px solid var(--glass-brd); border-radius: var(--radius-sm); padding: 13px 15px; margin-bottom: 16px; }
.howto:empty { display: none; }
.howto b { display: block; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 5px; color: var(--text); }

.confirm-title { margin: 0 0 6px; text-align: center; font-weight: 650; }
.confirm-sub { margin: 0 0 20px; text-align: center; font-size: .8rem; color: var(--muted); }

.score-block { text-align: center; margin-bottom: 20px; }
.score-main { font-size: clamp(2.6rem, 12vw, 3.2rem); font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, #fff, var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: pop .5s var(--ease-spring) both; }
.score-best { margin-top: 8px; font-size: .78rem; color: var(--muted); }

.group-label { margin: 24px 0 8px; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.card { background: rgba(255,255,255,.045); border: 1px solid var(--glass-brd); border-radius: var(--radius-sm); padding: 16px; margin-bottom: 9px; }
.card-title { display: block; font-size: .92rem; margin-bottom: 6px; }
.card-body { margin: 0 0 6px; font-size: .78rem; color: var(--muted); line-height: 1.55; }
.toggle-row.card { padding: 14px 16px; }
.linkcard { padding: 0; }
.linkrow { width: 100%; min-height: 56px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; border: 0; background: none; text-align: left; font-size: .9rem; transition: background .2s, padding-left .2s; }
.linkrow:hover { background: rgba(255,255,255,.05); padding-left: 20px; }
.linkrow + .linkrow { border-top: 1px solid var(--glass-brd); }
.linkrow span { color: var(--muted); }

.accents { display: flex; gap: 14px; flex-wrap: wrap; }
.accent-dot { width: 46px; aspect-ratio: 1; border-radius: 999px; border: 3px solid transparent; padding: 0; display: grid; place-items: center; background: none; transition: transform .25s var(--ease-spring), border-color .2s; }
.accent-dot:hover { transform: scale(1.12); }
.accent-dot i { display: block; width: 34px; height: 34px; border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255,255,255,.4); }
.accent-dot[aria-checked="true"] { border-color: #F5F3FF; transform: scale(1.08); }

.toast {
  position: fixed; left: 50%; bottom: calc(26px + env(safe-area-inset-bottom));
  transform: translateX(-50%); z-index: 1010;
  background: var(--glass-bg-strong); color: var(--text);
  border: 1px solid var(--glass-brd-lit);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  padding: 13px 20px; border-radius: 999px; font-size: .84rem;
  box-shadow: var(--glass-shadow); max-width: 90vw; text-align: center;
  animation: toast-in .4s var(--ease-spring) both;
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 24px); } }

/* ─────────── Tutorial ─────────── */
.tut-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tut-head span { font-size: 1.4rem; }
.tut-head h2 { margin: 0; font-size: 1.08rem; }
.sheet-foot { border-top: 1px solid var(--glass-brd); padding: 14px 20px calc(16px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px; }
.foot-actions { display: flex; gap: 10px; }
.foot-actions .btn { flex: 1; }
.skip-row { display: flex; align-items: center; gap: 10px; font-size: .8rem; color: var(--muted); cursor: pointer; min-height: 34px; }
.skip-row input { width: 18px; height: 18px; accent-color: var(--accent); }
.tut-goal { font-size: .95rem; line-height: 1.6; margin: 16px 0 4px; }
.tut-section { margin-top: 22px; }
.tut-section h3 { margin: 0 0 8px; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ctrl-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 11px 0; border-bottom: 1px solid var(--glass-brd); }
.ctrl-row:last-child { border-bottom: 0; }
.ctrl-chip { font-size: .74rem; padding: 6px 11px; border-radius: 9px; white-space: nowrap; background: rgba(255,255,255,.08); border: 1px solid var(--glass-brd); }
.ctrl-chip.kbd { background: color-mix(in srgb, var(--accent) 18%, transparent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.ctrl-act { font-size: .84rem; color: var(--muted); flex: 1; min-width: 140px; }
.tut-list { margin: 0; padding-left: 18px; }
.tut-list li { font-size: .84rem; color: var(--muted); line-height: 1.65; margin-bottom: 5px; }
.tut-tip { margin-top: 20px; padding: 15px 17px; border-radius: var(--radius-sm); font-size: .84rem; line-height: 1.6;
  background: color-mix(in srgb, var(--accent) 14%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent); }
.tut-tip b { display: block; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 5px; color: var(--accent); }
.tut-access-note { margin: 12px 0 18px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 10px; color: var(--muted); font-size: .82rem; }

/* ─────────── Coach marks ─────────── */
.coach { position: fixed; inset: 0; z-index: 1005; animation: fade .25s var(--ease); }
.coach-hole {
  position: absolute; border-radius: 14px;
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 9999px rgba(3,2,8,.82), 0 0 28px color-mix(in srgb, var(--accent) 75%, transparent);
  transition: all .34s var(--ease);
  pointer-events: none;
  animation: halo 2s ease-in-out infinite;
}
@keyframes halo {
  50% { box-shadow: 0 0 0 9999px rgba(3,2,8,.82), 0 0 44px color-mix(in srgb, var(--accent) 95%, transparent); }
}
.coach-card {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: min(380px, calc(100vw - 32px));
  background: linear-gradient(150deg, rgba(255,255,255,.10), rgba(255,255,255,.03)), var(--glass-bg-strong);
  border: 1px solid var(--glass-brd-lit);
  border-radius: 20px; padding: 19px;
  box-shadow: 0 20px 50px rgba(0,0,0,.6);
  animation: sheet-in .3s var(--ease-spring) both;
}
.coach-step { margin: 0 0 6px; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); font-weight: 800; }
.coach-card h3 { margin: 0 0 6px; font-size: 1rem; }
.coach-card p:not(.coach-step) { margin: 0; font-size: .86rem; color: var(--muted); line-height: 1.55; }
.coach-actions { display: flex; gap: 10px; margin-top: 16px; }
.coach-actions .btn { flex: 1; min-height: 46px; }

/* ─────────── Phone cost reduction ───────────
   Phones are where a GPU actually struggles, and it's also where the effect
   is least visible (small surfaces, less parallax behind them). So on narrow
   screens: soften the aurora, drop one blob entirely, and take
   backdrop-filter off the small always-on-screen surfaces — the layered
   translucency underneath already reads as glass. Header and sheets keep
   it, because those genuinely overlap moving content. */
@media (max-width: 700px) {
  body::before { filter: blur(64px); width: 70vmax; height: 70vmax; }
  body::after  { display: none; }
  .screen::before { display: none; }
  .search-wrap, .hero {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background-color: rgba(20, 16, 42, .55);
  }
  .stage-wrap { padding-left: max(8px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right)); }
  .player-bar { padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right)); }
  #frame { max-width: 100%; touch-action: none; }
  .player-score { font-size: .74rem; }
}

/* Touch devices get larger hit areas than a mouse needs. The sort chips
   read fine at 36px with a cursor, but that's under the ~44px minimum for
   a fingertip, so they grow only where it matters. */
@media (pointer: coarse) {
  .search-clear { min-width: 44px; min-height: 44px; }
  .accent-dot { width: 48px; }
}
/* Roomy desktop + a real mouse: chips can tighten up again. */
@media (min-width: 1080px) and (pointer: fine) {
  .chip { min-height: 36px; padding-inline: 14px; }
}

/* ═══════════ BIG PHONE ═══════════ */
@media (min-width: 480px) {
  .grid { gap: 14px; }
  .continue-row { gap: 12px; }
}

/* ═══════════ TABLET ═══════════ */
@media (min-width: 700px) {
  .grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .controls { flex-direction: row; align-items: center; justify-content: space-between; }
  .search-wrap { flex: 1; max-width: 440px; }
}

/* ═══════════ DESKTOP ═══════════ */
@media (min-width: 1080px) {
  .hub-body { grid-template-columns: 248px minmax(0,1fr); gap: 26px; padding-inline: clamp(20px, 3vw, 34px); }
  .hub-main { padding: 26px 0; }

  .rail {
    display: flex; flex-direction: column; gap: 10px;
    position: sticky; top: 96px; align-self: start;
    padding: 18px; border-radius: var(--radius);
    background: var(--glass-bg); border: 1px solid var(--glass-brd);
    box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,.10);
    animation: rise-in .5s var(--ease) both;
  }
  .rail-cats { display: flex; flex-direction: column; gap: 7px; }
  .rail-cats .cat-pill { width: 100%; justify-content: flex-start; }
  .rail-cats .cat-pill:hover { transform: translateX(4px); }
  .rail-stat { background: rgba(255,255,255,.05); border: 1px solid var(--glass-brd); border-radius: var(--radius-sm); padding: 14px 16px; }
  .rail-stat-num { font-size: 1.6rem; font-weight: 900; background: linear-gradient(135deg,#fff,var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .rail-stat-label { font-size: .68rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }

  .pill-cats { display: none; }
  .grid { grid-template-columns: repeat(4, minmax(0,1fr)); }

  .stage-wrap { align-items: flex-start; }
  .stage { flex: 0 1 auto; max-width: min(470px, calc((100dvh - 165px) * 4 / 7)); }
  .side-panel {
    display: block; width: 280px; flex: none; align-self: flex-start;
    background: var(--glass-bg); border: 1px solid var(--glass-brd);
    border-radius: var(--radius); padding: 22px;
    box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,.10);
    animation: rise-in .5s .08s var(--ease) both;
  }
  .side-title { margin: 0 0 14px; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
  .keylist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
  .keylist li { display: flex; align-items: center; gap: 5px; font-size: .78rem; color: var(--muted); flex-wrap: wrap; }
  .keylist span { margin-left: auto; color: var(--text); }
  kbd { font-family: inherit; font-size: .68rem; min-width: 25px; text-align: center; padding: 4px 7px; border-radius: 7px;
    background: rgba(255,255,255,.09); border: 1px solid var(--glass-brd); box-shadow: 0 2px 0 rgba(0,0,0,.4); }
  .side-note { font-size: .72rem; color: var(--muted); margin: 18px 0 0; line-height: 1.55; }
  .side-best { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--glass-brd); display: flex; align-items: baseline; justify-content: space-between; }
  .side-best-label { font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
  .side-best-val { font-size: 1.6rem; font-weight: 900; font-variant-numeric: tabular-nums; }
}

@media (min-width: 1500px) { .grid { grid-template-columns: repeat(5, minmax(0,1fr)); } }
@media (min-width: 1900px) { .grid { grid-template-columns: repeat(6, minmax(0,1fr)); } }

/* Mobile D-pad intentionally removed. */

/* Landscape phones: the stage would be unusably short with full chrome */
@media (max-height: 560px) and (orientation: landscape) {
  .stage-wrap { padding: 8px; }
  .stage { max-width: calc((100dvh - 74px) * 4 / 7); }
  .player-bar { padding-block: 6px; }
  .hero { display: none; }             /* reclaim vertical space on the hub */
}

/* Very small phones (≤340px): drop to a single column so cards stay legible */
@media (max-width: 340px) {
  .grid { grid-template-columns: 1fr; }
  .hero-avatar { display: none; }
}

/* Motion off — kill every animation and transition, keep all layout */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   ARCADE VAULT — 3D depth pass
   The scene is deliberately behind the interaction plane. It gives the
   hub a physical arcade-world feel without making 30 fast-scrolling cards
   pay the cost of filters or continuous canvas animation.
   ═══════════════════════════════════════════════════════════════════════ */
.ambient-stage {
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(72% 46% at 50% -8%, rgba(101, 74, 255, .22), transparent 72%),
    linear-gradient(180deg, #08060f 0%, #0b0920 52%, #07070e 100%);
}
.ambient-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("visuals/arcade-vault-bg.webp") center top / cover no-repeat;
  opacity: .72;
  mix-blend-mode: screen;
  animation: vault-drift 22s ease-in-out infinite alternate;
}
.ambient-stage::after {
  content: "";
  position: absolute;
  inset: 18% -14% -35%;
  background-image:
    linear-gradient(rgba(129, 105, 255, .12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(68, 239, 255, .10) 1px, transparent 1px);
  background-size: 44px 44px;
  transform: perspective(720px) rotateX(64deg);
  transform-origin: center bottom;
  mask-image: linear-gradient(to bottom, transparent, #000 42%, transparent 95%);
  opacity: .48;
}
.ambient-orb {
  position: absolute;
  width: 34rem;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(24px);
  opacity: .34;
  mix-blend-mode: screen;
}
.ambient-orb-a { top: 18%; left: -18rem; background: #3a83ff; animation: orb-float-a 14s ease-in-out infinite; }
.ambient-orb-b { right: -14rem; bottom: 8%; background: #ff3c93; animation: orb-float-b 17s ease-in-out infinite; }
@keyframes vault-drift { from { transform: scale(1.02) translate3d(0, 0, 0); } to { transform: scale(1.08) translate3d(0, -1.4%, 0); } }
@keyframes orb-float-a { 50% { transform: translate3d(6rem, 3rem, 0) scale(.82); } }
@keyframes orb-float-b { 50% { transform: translate3d(-5rem, -4rem, 0) scale(1.13); } }

.screen { position: relative; z-index: 1; }
.hub-header {
  background: linear-gradient(180deg, rgba(8, 6, 15, .88), rgba(8, 6, 15, .60));
  border-bottom-color: rgba(190, 177, 255, .20);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .20);
}
.wordmark {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.35rem, 1.08rem + 1.4vw, 1.9rem);
  letter-spacing: -.055em;
}
.hub-main { position: relative; }
.hero, .rail, .search-wrap, .sorts, .side-panel {
  background: linear-gradient(140deg, rgba(30, 26, 57, .80), rgba(10, 9, 24, .68));
  border-color: rgba(205, 196, 255, .24);
  box-shadow: 0 24px 56px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255,255,255,.16);
}
.hero {
  min-height: 126px;
  transform: translateZ(0);
  border-radius: 22px;
}
.hero::before {
  content: "";
  position: absolute;
  width: 11rem;
  height: 11rem;
  right: -3.5rem;
  top: -5rem;
  border-radius: 42% 58% 54% 46%;
  background: linear-gradient(135deg, rgba(200,255,77,.45), rgba(92,244,255,.08));
  filter: blur(4px);
  transform: rotate(28deg);
}
.hero-avatar {
  position: relative;
  z-index: 1;
  box-shadow: 0 13px 0 rgba(0,0,0,.28), 0 20px 36px rgba(20, 14, 59, .6);
  transform: perspective(280px) rotateY(-13deg) rotateX(5deg);
}
.card-game {
  position: relative;
  isolation: isolate;
  border-radius: 18px;
  background: linear-gradient(155deg, rgba(35, 31, 68, .94), rgba(13, 12, 30, .94));
  border: 1px solid color-mix(in srgb, var(--tile) 45%, rgba(255,255,255,.16));
  box-shadow:
    0 12px 0 color-mix(in srgb, var(--tile) 18%, #08060f),
    0 21px 35px rgba(0,0,0,.36),
    inset 0 1px 0 rgba(255,255,255,.18);
  transform-style: preserve-3d;
  transition: transform .26s var(--ease-spring), box-shadow .26s var(--ease), border-color .26s var(--ease);
}
.card-game::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 1px;
  border-radius: 17px;
  background: radial-gradient(90% 82% at 50% 0%, color-mix(in srgb, var(--tile) 28%, transparent), transparent 72%);
  opacity: .9;
}
.card-game::after {
  content: "";
  position: absolute;
  top: 0; left: 10%; right: 10%; height: 1px;
  background: rgba(255,255,255,.5);
  filter: blur(.4px);
}
.card-game:hover {
  transform: perspective(800px) translateY(-10px) rotateX(4deg) rotateY(-2deg);
  border-color: color-mix(in srgb, var(--tile) 76%, white);
  box-shadow: 0 18px 0 color-mix(in srgb, var(--tile) 22%, #08060f), 0 32px 52px rgba(0,0,0,.48), 0 0 34px color-mix(in srgb, var(--tile) 30%, transparent), inset 0 1px 0 rgba(255,255,255,.25);
}
.card-game:active { transform: translateY(5px); box-shadow: 0 6px 0 color-mix(in srgb, var(--tile) 18%, #08060f), 0 12px 20px rgba(0,0,0,.3); }
.card-emoji {
  position: relative;
  overflow: visible;
  margin: 14px 12px 12px;
  width: calc(100% - 24px);
  aspect-ratio: 1 / .70;
  border-radius: 14px;
  background: radial-gradient(circle at 50% 8%, color-mix(in srgb, var(--tile) 50%, white 8%), transparent 46%), linear-gradient(145deg, color-mix(in srgb, var(--tile) 28%, #202047), #0b0a1c 72%);
  border: 1px solid color-mix(in srgb, var(--tile) 38%, rgba(255,255,255,.16));
  box-shadow: inset 0 2px 6px rgba(255,255,255,.13), inset 0 -12px 20px rgba(0,0,0,.25), 0 10px 16px rgba(0,0,0,.30);
  transform: translateZ(20px);
}
.card-emoji .gicon { filter: drop-shadow(0 11px 10px rgba(0,0,0,.52)); transform: scale(1.05); transition: transform .26s var(--ease-spring); }
.card-game:hover .card-emoji .gicon { transform: scale(1.18) rotate(-3deg); }
.card-title { font-size: 1rem; font-weight: 850; letter-spacing: -.025em; }
.card-desc { font-size: .76rem; line-height: 1.42; }
.badge { border: 1px solid rgba(255,255,255,.10); }

@media (max-width: 700px) {
  .ambient-stage::before { opacity: .45; background-position: center top; }
  .ambient-stage::after { opacity: .24; }
  .ambient-orb { display: none; }
  .hero, .search-wrap { background: rgba(16, 13, 38, .86); }
  .card-game:hover { transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
  .ambient-stage::before, .ambient-orb { animation: none; }
  .card-game { transition: none; }
}

.hero-copy { position: relative; z-index: 2; min-width: 0; }
.hero-eyebrow { margin: 0 0 7px; color: #c8ff4d; font-size: .61rem; font-weight: 850; letter-spacing: .14em; }
.feature-play { z-index: 3; flex: 0 0 min(238px, 34%); min-height: 88px; display: grid; grid-template-columns: 42px 1fr 20px; grid-template-rows: auto 1fr; align-items: center; gap: 0 9px; padding: 12px 14px; text-align: left; border-radius: 16px; background: linear-gradient(135deg, rgba(33, 57, 91, .98), rgba(15, 18, 48, .98)); border-color: rgba(92, 244, 255, .52); box-shadow: 0 8px 0 #0a1128, 0 17px 28px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.22); }
.feature-play::before { background: radial-gradient(circle at 0 0, rgba(92,244,255,.42), transparent 58%); }
.feature-play:hover { transform: perspective(800px) translateY(-7px) rotateY(-4deg) rotateX(3deg); box-shadow: 0 15px 0 #0a1128, 0 28px 42px rgba(0,0,0,.5), 0 0 32px rgba(92,244,255,.2); }
.feature-play-label { grid-column: 1 / -1; align-self: start; color: #8eeeff; font-size: .56rem; font-weight: 850; letter-spacing: .13em; }
.feature-icon { grid-column: 1; grid-row: 2; display: grid; place-items: center; width: 40px; aspect-ratio: 1; border-radius: 12px; background: linear-gradient(145deg, #6b5cff, #243869); font-size: 1.35rem; box-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 7px 11px rgba(0,0,0,.28); transform: translateZ(28px) rotate(-5deg); }
.feature-copy { grid-column: 2; grid-row: 2; display: grid; gap: 2px; min-width: 0; }
.feature-copy strong { font-size: .86rem; letter-spacing: -.02em; white-space: nowrap; }
.feature-copy small { color: #aeb5d0; font-size: .67rem; }
.feature-arrow { grid-column: 3; grid-row: 2; color: #c8ff4d; font-size: 1.15rem; font-weight: 900; }
@media (max-width: 700px) { .hero { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px 12px; } .hero-avatar { grid-column: 1; grid-row: 1; } .hero-copy { grid-column: 2; grid-row: 1; } .feature-play { grid-column: 1 / -1; grid-row: 2; width: 100%; min-height: 76px; } }

/* ════════════════════════════════════════════════════════════════════
   HUB SURFACE PASS
   Modelled on how CrazyGames and Poki actually lay out a game hub:
   flat neutral surfaces, colour carried by the tiles themselves, sentence
   case, and imagery given far more room than text.
   ════════════════════════════════════════════════════════════════════ */

.hub-header {
  background: rgba(14, 15, 22, .92) !important;
  border-bottom: 1px solid var(--glass-brd);
}
.rail, .hero, .side-panel, .sheet, .coach-card, .player-bar {
  background: var(--bg-raise);
  border-color: var(--glass-brd);
}
.search-wrap { background: #10121B; border-color: var(--glass-brd); }
.search-wrap::after { content: none; }        /* the CRT caret is gone */
@supports not (backdrop-filter: blur(2px)) {
  .hub-header, .rail, .hero, .sheet, .player-bar, .side-panel, .search-wrap, .coach-card {
    background-color: var(--bg-raise) !important;
  }
}

/* Type: sentence case throughout, no monospace. */
.wordmark, .section-label, .card-title, .hero-line, .player-title,
.sheet h2, .empty-title, .score-main, .rail-stat-num, .side-best-val {
  font-family: inherit;
  text-transform: none;
  letter-spacing: -.01em;
  text-shadow: none;
}
.wordmark span { color: var(--accent); text-shadow: none; }

/* Cards become colour tiles. With no per-game artwork, each game's own
   accentColor drives a gradient panel behind an oversized icon — the
   nearest honest equivalent of a thumbnail, and it makes the grid scan by
   colour the way a real hub does. */
.card-game {
  background: var(--bg-raise);
  border: 1px solid var(--glass-brd);
  border-radius: var(--radius);
  overflow: hidden;
  padding: 0 0 12px;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease);
}
.card-game:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0,0,0,.45);
  border-color: var(--glass-brd-lit);
}
/* The icons are full-colour illustrations now, so the tile has to recede.
   A near-neutral panel with a faint wash of the game's own colour keeps the
   grid scannable by hue without fighting the artwork sitting on top. */
.card-emoji {
  display: flex; align-items: center; justify-content: center;
  width: 100%; aspect-ratio: 16 / 10; margin: 0 0 10px;
  background:
    radial-gradient(70% 90% at 50% 115%,
      color-mix(in srgb, var(--tile, var(--accent)) 42%, transparent), transparent 70%),
    linear-gradient(160deg, #232637, #141724);
}
.card-emoji .gicon {
  width: 54%; height: auto;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.45));
  transition: transform .22s var(--ease-spring);
}
.card-game:hover .card-emoji { filter: none; }
.card-game:hover .card-emoji .gicon { transform: scale(1.08); }
.card-title, .card-desc, .card-foot { padding-inline: 12px; }
.card-desc { color: var(--muted); }
.badge { background: rgba(255,255,255,.08); color: var(--muted); border-radius: 6px; }
.badge.best { color: #10121B; }
.sheet-icon, #player-icon, #tut-icon { color: var(--accent); }

/* ── Full-bleed play screen ──────────────────────────────────────────
   The stage used to be a fixed narrow column with the page scrolling
   around it, which is what made games feel like a small window. It now
   sizes to the viewport: the player screen is exactly one screen tall,
   the stage takes all the height left after the bar, and width follows
   from the 400:700 ratio. On desktop the side panel only appears when
   there is genuinely spare width. */
#player { height: 100dvh; max-height: 100dvh; overflow: hidden; }
.stage-wrap {
  flex: 1; min-height: 0;
  align-items: center; justify-content: center;
  padding: clamp(6px, 1.5vh, 18px) clamp(6px, 2vw, 20px);
}
.stage {
  height: 100%;
  width: auto;
  max-width: 100%;
  aspect-ratio: 400 / 700;
  border-radius: 12px;
  border: 1px solid var(--glass-brd);
  box-shadow: 0 18px 50px rgba(0,0,0,.6);
}
.stage iframe { width: 100%; height: 100%; border: 0; display: block; }
/* Under ~1200px the panel would squeeze the stage, so drop it and let the
   game have the room — the same call CrazyGames makes on narrow windows. */
@media (max-width: 1200px) { .side-panel { display: none !important; } }
@media (max-width: 900px) {
  .stage { border-radius: 10px; }
  .stage-wrap { padding: 4px; }
}

/* Ad slot. Reserves no space until an ad actually mounts, so an unconfigured
   or unfilled unit never leaves a hole in the layout. The label makes it
   obvious to the player what it is — required by the better-ads standard and
   it keeps the page honest. */
.ad-slot { display: block; margin: 22px auto 0; max-width: 970px; min-height: 0; }
.ad-slot[data-ad-mounted] { min-height: 100px; }
.ad-slot[data-ad-mounted]::before {
  content: "Advertisement";
  display: block; margin-bottom: 6px;
  font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); text-align: center;
}
#player .ad-slot { display: none !important; }   /* never during play */

/* Final visual direction: a brighter, dimensional arcade atmosphere. The
   floating marks are HTML so they stay crisp, cheap, and accessible-hidden
   with the rest of the decorative scene. */
.ambient-stage {
  z-index: 0;
  background:
    radial-gradient(55% 45% at 82% 8%, rgba(255, 73, 169, .20), transparent 72%),
    radial-gradient(42% 38% at 12% 26%, rgba(74, 214, 255, .18), transparent 72%),
    linear-gradient(180deg, #100c26 0%, #0d1026 45%, #080914 100%);
}
.ambient-stage::before {
  opacity: .38;
  mix-blend-mode: screen;
  filter: saturate(1.25) contrast(1.06);
}
.ambient-stage::after {
  inset: 42% -12% -30%;
  background-image:
    linear-gradient(rgba(109, 232, 255, .17) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 99, 190, .13) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity: .55;
  mask-image: linear-gradient(to bottom, transparent, #000 24%, transparent 92%);
  animation: horizon-breathe 9s ease-in-out infinite alternate;
}
@keyframes horizon-breathe { to { transform: perspective(720px) rotateX(64deg) translateY(18px) scale(1.04); opacity: .32; } }
.ambient-stage .float-icon {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: clamp(28px, 3vw, 46px);
  aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 14px;
  color: #f6f2ff;
  font: 900 clamp(1rem, 2vw, 1.55rem)/1 Georgia, serif;
  background: linear-gradient(145deg, rgba(255,255,255,.20), rgba(255,255,255,.04));
  box-shadow: inset 0 1px rgba(255,255,255,.38), 0 16px 32px rgba(0,0,0,.24), 0 0 24px rgba(112,222,255,.12);
  backdrop-filter: blur(8px);
  transform: translate3d(0,0,0) rotate(12deg);
  opacity: .78;
}
.float-icon-1 { left: 8%; top: 20%; color: #cbff62 !important; animation: float-a 8s ease-in-out infinite; }
.float-icon-2 { left: 74%; top: 17%; color: #74efff !important; animation: float-b 10s ease-in-out -2s infinite; }
.float-icon-3 { right: 8%; top: 52%; color: #ff79c8 !important; animation: float-a 11s ease-in-out -5s infinite; }
.float-icon-4 { left: 18%; top: 67%; color: #74efff !important; animation: float-b 9s ease-in-out -1s infinite; }
.float-icon-5 { right: 24%; top: 76%; color: #cbff62 !important; animation: float-a 12s ease-in-out -4s infinite; }
.float-icon-6 { left: 48%; top: 10%; color: #ffbf6b !important; animation: float-b 7s ease-in-out -3s infinite; }
@keyframes float-a { 50% { transform: translate3d(14px,-22px,40px) rotate(-15deg) scale(1.08); } }
@keyframes float-b { 50% { transform: translate3d(-18px,18px,20px) rotate(18deg) scale(.92); } }
.hub-header, .hero, .rail, .search-wrap, .sorts, .side-panel, .player-bar {
  background: linear-gradient(145deg, rgba(39, 31, 74, .70), rgba(10, 13, 30, .62));
  border-color: rgba(212, 230, 255, .22);
  box-shadow: 0 24px 70px rgba(2,4,16,.36), inset 0 1px rgba(255,255,255,.17);
  backdrop-filter: blur(16px) saturate(1.18);
}
.hero { transform-style: preserve-3d; box-shadow: 0 28px 70px rgba(3,4,19,.44), inset 0 1px rgba(255,255,255,.2); }
.card-game { background: linear-gradient(145deg, rgba(37,34,75,.86), rgba(13,15,34,.84)); border-color: rgba(255,255,255,.14); box-shadow: 0 12px 0 rgba(6,7,21,.48), 0 22px 36px rgba(0,0,0,.30), inset 0 1px rgba(255,255,255,.22); }
.card-game:hover { box-shadow: 0 16px 0 rgba(6,7,21,.48), 0 28px 52px rgba(0,0,0,.44), 0 0 30px color-mix(in srgb, var(--tile) 24%, transparent), inset 0 1px rgba(255,255,255,.28); }
@media (max-width: 700px) {
  .ambient-stage::before { opacity: .24; }
  .ambient-stage::after { opacity: .32; }
  .ambient-stage .float-icon { opacity: .48; transform: scale(.78); }
  .float-icon-2, .float-icon-5 { display: none; }
  .hub-header, .hero, .search-wrap { backdrop-filter: blur(12px); }
}
@media (prefers-reduced-motion: reduce) {
  .ambient-stage::after, .ambient-stage .float-icon { animation: none; }
}

/* ═══════════ MOBILE PLAYER FINAL PASS ═══════════
   No universal arrow pad: maximize the actual game surface. */
@media (max-width: 700px) {
  #player {
    min-height: 100dvh;
  }

  .player-bar {
    gap: 8px;
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
  }

  .player-title {
    flex: 1 1 auto;
    min-width: 0;
  }

  #player-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .player-score {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .stage-wrap {
    padding: 4px 4px calc(6px + env(safe-area-inset-bottom));
  }

  .stage {
    max-width: min(100%, calc((100dvh - 92px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 4 / 7));
  }

  /* Absolute safety net: these controls can never reappear from old classes. */
  #dpad,
  .dpad,
  .dpad.is-on,
  .dpad-btn {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

@media (max-width: 390px) {
  .player-bar {
    gap: 6px;
  }

  .player-score {
    font-size: .76rem;
  }
}
.btn.reward { color: #07121a; background: linear-gradient(135deg, #7CFFD4, #5CF4FF); border-color: transparent; }
.sr-only { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; }
.high-contrast { --muted:#D7D9EA; }
.high-contrast body { color:#fff; }
.high-contrast .card-game, .high-contrast .sheet, .high-contrast .player-bar, .high-contrast .search-wrap { border-color:rgba(255,255,255,.38); }
.high-contrast :focus-visible { outline-width:3px; outline-color:#FFF; }


/* Result modal small-screen safety. */
@media (max-width: 430px) {
  #result.overlay { padding:8px; align-items:center; }
  .result-sheet { max-height:calc(100dvh - 16px); padding:16px; border-radius:22px; }
  .result-head { margin-bottom:9px; }
  .result-head .sheet-icon { font-size:2rem; }
  .result-head h2 { margin-top:5px; font-size:1.16rem; }
  .result-score-block { margin-bottom:12px; }
  .score-main { font-size:clamp(2.35rem, 13vw, 3rem); }
  .result-actions { gap:8px; }
  .result-share-actions { gap:7px; }
  .btn-compact { min-height:44px; padding-inline:8px; font-size:.78rem; }
  .social-share-row { gap:7px; }
  .social-icon-btn { min-height:44px; border-radius:13px; }
  .social-icon-btn .brand-logo { width:21px; height:21px; }
  .result-play-again { min-height:50px; }
  .result-exit { min-height:42px; }
}
@media (max-height: 640px) {
  .result-sheet { max-height:calc(100dvh - 10px); padding-top:13px; padding-bottom:13px; }
  .result-head { margin-bottom:7px; }
  .result-head .sheet-icon { font-size:1.8rem; }
  .result-head h2 { margin-top:3px; }
  .result-score-block { margin-bottom:9px; }
  .score-best { margin-top:5px; }
  .result-actions { gap:7px; }
  .social-icon-btn { min-height:40px; max-height:44px; }
  .btn-compact, .result-exit { min-height:40px; }
  .result-play-again { min-height:46px; }
}
.social-icon-btn > * { grid-area:1 / 1; }
.social-icon-btn.share-confirmed .brand-logo { opacity:.2; transform:scale(.9); }
.social-icon-btn .share-check { font-size:1rem; font-weight:900; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.45); }


/* ═══════════════════════════════════════════════════════════════════
   V6 RESULT SCREEN — fixed alignment, compact share tray, cache-safe
   ═══════════════════════════════════════════════════════════════════ */
#result.overlay {
  padding: clamp(12px, 3vw, 28px);
  align-items: center;
  justify-content: center;
}
.result-sheet {
  width: min(100%, 420px);
  max-width: 420px;
  max-height: min(94dvh, 720px);
  padding: clamp(18px, 3.3vw, 24px);
  border-radius: 28px;
  overflow-y: auto;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 50% -12%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 38%),
    linear-gradient(155deg, rgba(255,255,255,.105), rgba(255,255,255,.025)),
    var(--glass-bg-strong);
}
.result-head { margin-bottom: 12px; }
.result-head .sheet-icon {
  width: 48px; height: 48px; margin: 0 auto 8px;
  display: grid; place-items: center;
  font-size: 1.85rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 13%, rgba(255,255,255,.06));
  border: 1px solid color-mix(in srgb, var(--accent) 34%, rgba(255,255,255,.16));
  box-shadow: 0 10px 28px rgba(0,0,0,.23);
}
.result-head h2 { margin: 0 0 4px; font-size: 1.28rem; letter-spacing: -.018em; }
.result-head .sheet-sub { font-size: .79rem; }

.result-score-block {
  position: relative;
  margin: 0 0 14px;
  padding: 13px 14px 12px;
  min-height: 112px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 11%, rgba(255,255,255,.045)), rgba(255,255,255,.02));
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--glass-brd));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
}
.result-score-label {
  margin-bottom: 2px;
  color: var(--muted);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .14em;
}
.result-score-block .score-main {
  margin: 0;
  font-size: clamp(2.65rem, 11vw, 3.55rem);
  line-height: .98;
  letter-spacing: -.055em;
}
.result-score-block .score-best { margin-top: 7px; font-size: .74rem; }

.result-actions { gap: 9px; }
.result-rewards { gap: 7px; }
.result-play-again {
  order: 1;
  min-height: 54px;
  border-radius: 17px;
  font-size: .96rem;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--accent) 25%, transparent);
}
.result-btn-icon { margin-right: 7px; font-size: 1.08rem; }
.result-share-actions {
  order: 2;
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 8px;
}
.result-secondary {
  min-width: 0;
  min-height: 46px;
  padding-inline: 10px;
  border-radius: 15px;
  font-size: .8rem;
  white-space: nowrap;
}
.result-secondary .share-icon { margin-right: 5px; flex: 0 0 auto; }

.result-share-tray {
  order: 3;
  width: 100%;
  padding: 10px 10px 11px;
  border-radius: 18px;
  background: rgba(7,8,18,.46);
  border: 1px solid rgba(255,255,255,.11);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  animation: sharePanelIn .18s ease-out both;
}
.result-share-tray[hidden] { display: none !important; }
.result-share-title {
  margin: 0 0 8px;
  text-align: center;
  color: var(--muted);
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.social-share-row {
  display: grid;
  grid-template-columns: repeat(5, 48px);
  justify-content: center;
  align-items: center;
  gap: 9px;
  padding: 0;
}
.social-icon-btn {
  appearance: none;
  -webkit-appearance: none;
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  max-width: 48px;
  max-height: 48px;
  aspect-ratio: 1;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.20);
  color: #fff;
  box-shadow: 0 7px 18px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.13);
  overflow: hidden;
}
.social-icon-btn .brand-logo {
  width: 23px;
  height: 23px;
  display: block;
  fill: currentColor;
  color: #fff;
  filter: none !important;
}
.social-icon-btn.social-instagram .brand-logo { width: 22px; height: 22px; }
.social-icon-btn.social-x .brand-logo { width: 20px; height: 20px; }
.social-copy .copy-logo { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.social-whatsapp { background: #25D366; }
.social-facebook { background: #1877F2; }
.social-instagram { background: radial-gradient(circle at 31% 104%,#fdf497 0 5%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 92%); }
.social-x { background: #050505; }
.social-copy { background: color-mix(in srgb, var(--accent) 45%, #242038); }
.social-icon-btn:hover { transform: translateY(-2px) scale(1.025); }
.social-icon-btn:active { transform: scale(.94); }
#r-share[aria-expanded="true"] {
  background: color-mix(in srgb, var(--accent) 15%, var(--glass-bg));
  border-color: color-mix(in srgb, var(--accent) 54%, rgba(255,255,255,.25));
}
.result-exit {
  order: 4;
  min-height: 42px;
  border-radius: 14px;
  border-color: transparent;
  background: transparent;
  color: var(--muted);
  font-size: .8rem;
}
.result-exit:hover { background: rgba(255,255,255,.045); color: var(--text); }
.result-exit > span { margin-right: 6px; }

@media (max-width: 430px) {
  #result.overlay { padding: 8px; }
  .result-sheet { width: min(100%, 390px); max-height: calc(100dvh - 16px); padding: 16px; border-radius: 23px; }
  .result-head .sheet-icon { width: 43px; height: 43px; font-size: 1.65rem; }
  .result-head h2 { font-size: 1.16rem; }
  .result-score-block { min-height: 101px; padding: 11px 12px; }
  .result-play-again { min-height: 50px; }
  .result-secondary { min-height: 44px; font-size: .75rem; padding-inline: 7px; }
  .social-share-row { grid-template-columns: repeat(5, 44px); gap: 8px; }
  .social-icon-btn { width: 44px; height: 44px; min-width: 44px; min-height: 44px; max-width: 44px; max-height: 44px; }
  .social-icon-btn .brand-logo { width: 21px; height: 21px; }
}
@media (max-width: 340px) {
  .result-share-actions { grid-template-columns: 1fr; }
  .social-share-row { grid-template-columns: repeat(5, 40px); gap: 6px; }
  .social-icon-btn { width: 40px; height: 40px; min-width: 40px; min-height: 40px; max-width: 40px; max-height: 40px; }
}
@media (max-height: 650px) {
  .result-sheet { max-height: calc(100dvh - 10px); padding-top: 13px; padding-bottom: 13px; }
  .result-head { margin-bottom: 8px; }
  .result-head .sheet-icon { width: 39px; height: 39px; margin-bottom: 6px; font-size: 1.45rem; }
  .result-score-block { min-height: 88px; margin-bottom: 10px; padding-block: 9px; }
  .result-score-block .score-main { font-size: 2.5rem; }
  .result-actions { gap: 7px; }
  .result-play-again { min-height: 46px; }
  .result-secondary { min-height: 40px; }
  .result-share-tray { padding-block: 8px; }
  .social-share-row { grid-template-columns: repeat(5, 40px); gap: 7px; }
  .social-icon-btn { width: 40px; height: 40px; min-width: 40px; min-height: 40px; max-width: 40px; max-height: 40px; }
  .result-exit { min-height: 36px; }
}


/* ════════════════════════════════════════════════════════════════════
   V8 — HUB LAYOUT CORRECTION
   Screenshot-driven desktop polish: compact rail, balanced hero,
   non-clipping recent row, quieter backdrop and denser game cards.
   ════════════════════════════════════════════════════════════════════ */

/* Keep the artwork atmospheric instead of competing with the interface. */
.ambient-stage::before {
  opacity: .20;
  filter: saturate(.95) contrast(1.02) brightness(.78);
}
.ambient-stage::after { opacity: .25; }
.ambient-orb { opacity: .20; }
.ambient-stage .float-icon { opacity: .42; }

/* The hero copy must consume the middle track; this is the core fix for
   the large dead area visible in the desktop screenshot. */
.hero-copy { flex: 1 1 auto; }
.feature-play { margin-left: auto; }

/* A tighter visual rhythm leaves the first game row visible on normal
   laptop/desktop screens without making the interface feel cramped. */
.continue { margin-bottom: 15px; }
.grid-head { margin-bottom: 10px; }
.card-game { padding-bottom: 10px; }
.card-emoji { aspect-ratio: 16 / 9; margin-bottom: 8px; }
.card-title {
  min-height: 1.2em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: 2.12em;
}

@media (min-width: 1080px) {
  .hub-header-inner {
    padding-block: 11px;
    padding-inline: clamp(24px, 2.5vw, 34px);
  }

  .hub-body {
    grid-template-columns: 218px minmax(0, 1fr);
    gap: 20px;
    padding-inline: clamp(24px, 2.5vw, 34px);
  }
  .hub-main { padding-block: 20px 28px; }

  /* Compact category rail. Stats share the final row instead of creating
     a tall left-side tower. */
  .rail {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    padding: 14px;
    top: 82px;
  }
  .rail-cats {
    grid-column: 1 / -1;
    gap: 6px;
  }
  .rail-cats .cat-pill {
    min-height: 46px;
    padding-inline: 13px;
  }
  .rail-stat {
    min-width: 0;
    padding: 11px 10px;
    text-align: center;
  }
  .rail-stat-num { font-size: 1.35rem; }
  .rail-stat-label {
    font-size: .60rem;
    letter-spacing: .055em;
    white-space: normal;
    line-height: 1.25;
  }

  /* Balanced three-part hero: mascot | message | featured game. */
  .hero {
    min-height: 112px;
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr) minmax(235px, 280px);
    align-items: center;
    gap: 16px;
    padding: 15px 18px;
    margin-bottom: 14px;
  }
  .hero-avatar {
    width: 58px;
    grid-column: 1;
  }
  .hero-copy {
    grid-column: 2;
    width: 100%;
    min-width: 0;
  }
  .hero-line {
    max-width: 620px;
    font-size: clamp(1rem, .92rem + .3vw, 1.15rem);
  }
  .hero-meta { margin-top: 5px; }
  .feature-play {
    grid-column: 3;
    width: 100%;
    min-height: 78px;
    margin-left: 0;
    padding: 10px 12px;
  }

  /* Search and sort belong to the same working cluster. Keeping them near
     one another removes the huge empty toolbar gap seen in the screenshot. */
  .controls {
    justify-content: flex-start;
    gap: 12px;
    margin-bottom: 11px;
  }
  .search-wrap {
    flex: 0 1 560px;
    width: min(560px, 100%);
    max-width: 560px;
  }
  .sorts { flex: 0 0 auto; }

  /* Never allow the recent list to disappear off the right side. Six
     recent games fill a desktop row predictably; mobile keeps horizontal
     scrolling from the base styles. */
  .continue-row {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 9px;
    overflow: visible;
    padding: 8px 0 4px;
  }
  .cont-card {
    min-width: 0;
    min-height: 58px;
    padding: 8px 10px;
    gap: 8px;
  }
  .cont-emoji { flex: 0 0 auto; font-size: 1.1rem; }
  .cont-card > span:last-child { min-width: 0; }
  .cont-name,
  .cont-best {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .cont-name { font-size: .78rem; }
  .cont-best { font-size: .64rem; margin-top: 2px; }

  .section-label { font-size: .68rem; }
  .grid { gap: 13px; }
}

/* Five columns work well at the screenshot's ~1650px viewport, but don't
   force them early on narrower desktop windows. */
@media (min-width: 1500px) and (max-width: 1899px) {
  .grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (min-width: 1080px) and (max-width: 1290px) {
  .hero { grid-template-columns: 54px minmax(0, 1fr) 230px; gap: 12px; }
  .hero-avatar { width: 52px; }
  .feature-play { min-height: 74px; }
  .continue-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 700px) and (max-width: 1079px) {
  .controls { justify-content: flex-start; }
  .search-wrap { max-width: 520px; }
}

@media (max-width: 700px) {
  .ambient-stage::before { opacity: .13; }
  .ambient-stage::after { opacity: .14; }
  .ambient-stage .float-icon { opacity: .26; }
  .card-desc { min-height: 0; }
}


/* ═══════════ SECOND PASS · HUB RETENTION + TRANSITIONS ═══════════ */
.game-card-wrap {
  position: relative;
  min-width: 0;
  border-radius: var(--radius);
  animation: card-in .42s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 22ms);
}
.game-card-wrap > .card-game { width: 100%; height: 100%; animation: none; }
.favorite-btn {
  position: absolute; z-index: 4; top: 10px; right: 10px;
  width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 999px; border: 1px solid rgba(255,255,255,.16);
  background: rgba(8,7,18,.66); color: rgba(255,255,255,.78);
  font-size: 1.16rem; line-height: 1;
  box-shadow: 0 5px 16px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.10);
  transition: transform .2s var(--ease-spring), background .2s, color .2s, border-color .2s;
}
.favorite-btn:hover { transform: scale(1.10); color: #fff; border-color: rgba(255,255,255,.34); }
.favorite-btn:active { transform: scale(.88); }
.favorite-btn.is-favorite {
  color: #ff5f9f; background: rgba(255,47,111,.14); border-color: rgba(255,95,159,.48);
  text-shadow: 0 0 16px rgba(255,95,159,.75);
  animation: favorite-pop .34s var(--ease-spring);
}
@keyframes favorite-pop { 45% { transform: scale(1.28) rotate(-7deg); } }

.surprise-chip {
  min-height: 44px; padding: 0 17px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, rgba(255,255,255,.15));
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, rgba(20,16,42,.86)), rgba(255,79,163,.10));
  color: var(--text); font-size: .78rem; font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
  transition: transform .22s var(--ease-spring), box-shadow .22s, border-color .22s;
}
.surprise-chip:hover { transform: translateY(-2px) rotate(-1deg); border-color: var(--accent); box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 22%, transparent); }
.surprise-chip:active { transform: scale(.96); }

.frame-loading { padding: 24px; text-align: center; }
.frame-loading:has(.game-load-card)::after { display: none; }
.game-load-card {
  width: min(310px, 82%); display: grid; justify-items: center; gap: 9px;
  animation: game-load-arrive .42s var(--ease-spring) both;
}
.game-load-icon {
  width: 86px; height: 86px; display: grid; place-items: center;
  border-radius: 26px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--load-accent) 30%, #171126), rgba(12,10,24,.92));
  border: 1px solid color-mix(in srgb, var(--load-accent) 62%, rgba(255,255,255,.12));
  box-shadow: 0 16px 38px rgba(0,0,0,.40), 0 0 36px color-mix(in srgb, var(--load-accent) 28%, transparent);
  animation: game-load-float 1.45s ease-in-out infinite;
}
.game-load-card strong { color: var(--text); font-size: 1.05rem; }
.game-load-card > span { max-width: 260px; color: var(--muted); line-height: 1.45; font-size: .79rem; }
.game-load-card small { color: color-mix(in srgb, var(--muted) 80%, transparent); font-size: .66rem; letter-spacing: .025em; }
.game-load-track {
  width: min(230px, 82%); height: 5px; overflow: hidden; border-radius: 999px;
  background: rgba(255,255,255,.08); margin: 5px 0 2px;
}
.game-load-track i {
  display: block; width: 42%; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, transparent, var(--load-accent), #fff, var(--load-accent), transparent);
  box-shadow: 0 0 16px var(--load-accent);
  animation: game-load-scan 1.05s ease-in-out infinite;
}
@keyframes game-load-arrive { from { opacity: 0; transform: translateY(10px) scale(.96); } }
@keyframes game-load-float { 50% { transform: translateY(-5px) scale(1.025); } }
@keyframes game-load-scan { from { transform: translateX(-120%); } to { transform: translateX(330%); } }

.result-progress {
  margin-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 13px; border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 10%, rgba(255,255,255,.04));
  border: 1px solid color-mix(in srgb, var(--accent) 28%, rgba(255,255,255,.08));
  font-size: .76rem; color: var(--text);
  animation: result-progress-in .42s .12s var(--ease-spring) both;
}
.result-progress[hidden] { display: none; }
.result-progress span { min-width: 0; font-weight: 750; }
.result-progress strong { flex: none; color: var(--muted); font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; }
@keyframes result-progress-in { from { opacity: 0; transform: translateY(7px) scale(.98); } }

@media (max-width: 520px) {
  .sorts { gap: 6px; }
  .surprise-chip { flex: 1 1 100%; justify-content: center; }
  .favorite-btn { width: 42px; height: 42px; top: 8px; right: 8px; }
}

/* Step 32 — arcade progression */
.arcade-progress{margin:16px 0 20px;display:grid;gap:12px}.level-card{display:flex;align-items:center;gap:13px;padding:14px 16px;border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 10%,var(--panel)),var(--panel));border-radius:18px;overflow:hidden;position:relative}.level-card:after{content:"";position:absolute;right:-40px;top:-70px;width:150px;height:150px;border-radius:50%;background:color-mix(in srgb,var(--accent) 12%,transparent);filter:blur(12px);pointer-events:none}.level-orb{width:54px;height:54px;border-radius:17px;display:grid;place-items:center;font-size:1.35rem;font-weight:950;background:linear-gradient(145deg,var(--accent),color-mix(in srgb,var(--accent) 52%,#111));color:#fff;box-shadow:0 8px 25px color-mix(in srgb,var(--accent) 30%,transparent);flex:none}.level-copy{min-width:0;flex:1}.level-row{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-bottom:8px}.level-row strong{font-size:.9rem}.level-row span{font-size:.68rem;color:var(--muted);font-weight:800}.xp-track,.mission-bar{height:7px;background:rgba(255,255,255,.08);border-radius:999px;overflow:hidden}.xp-track span,.mission-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),#fff);transition:width .5s var(--ease-spring)}.streak-pill{z-index:1;min-width:78px;text-align:center;border-left:1px solid var(--line);padding-left:14px;display:grid;grid-template-columns:auto auto;justify-content:center;align-items:center;gap:3px}.streak-pill span{font-size:1.25rem}.streak-pill strong{font-size:1.25rem}.streak-pill small{grid-column:1/-1;color:var(--muted);font-size:.58rem;text-transform:uppercase;letter-spacing:.08em}.streak-pill.is-hot span{animation:streak-fire 1s ease-in-out infinite alternate}@keyframes streak-fire{to{transform:translateY(-2px) scale(1.12);filter:drop-shadow(0 0 8px #ff7a00)}}.mission-head{display:flex;align-items:end;justify-content:space-between}.mission-head h2{font-size:.98rem;margin:1px 0 0}.mission-kicker,.mission-reset{font-size:.6rem;letter-spacing:.1em;color:var(--muted);font-weight:850}.mission-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.mission-card{display:flex;align-items:center;gap:10px;padding:11px;border:1px solid var(--line);border-radius:14px;background:var(--panel);min-width:0}.mission-card.is-done{border-color:color-mix(in srgb,#38e58c 55%,var(--line));background:color-mix(in srgb,#38e58c 7%,var(--panel))}.mission-icon{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:rgba(255,255,255,.06);font-size:1rem;flex:none}.mission-card.is-done .mission-icon{background:#25c979;color:#071b12;font-weight:950}.mission-copy{min-width:0;flex:1}.mission-copy strong,.mission-copy span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mission-copy strong{font-size:.73rem}.mission-copy span{font-size:.6rem;color:var(--muted);margin:3px 0 7px}.mission-bar{height:4px}.mission-card.is-done .mission-bar i{background:#38e58c}.achievement-strip{display:flex;gap:7px;align-items:center;overflow-x:auto;padding-bottom:3px;scrollbar-width:none}.achievement-strip::-webkit-scrollbar{display:none}.achievement-label{font-size:.58rem;letter-spacing:.1em;color:var(--muted);font-weight:900;flex:none;margin-right:2px}.achievement-badge{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;border:1px solid var(--line);border-radius:999px;padding:6px 9px;font-size:.61rem;color:var(--muted);filter:grayscale(1);opacity:.48}.achievement-badge b{font-size:.82rem}.achievement-badge.unlocked{filter:none;opacity:1;color:var(--text);border-color:color-mix(in srgb,var(--accent) 38%,var(--line));background:color-mix(in srgb,var(--accent) 8%,transparent);animation:badge-in .45s var(--ease-spring)}@keyframes badge-in{from{transform:scale(.8);opacity:0}}
@media(max-width:760px){.mission-grid{grid-template-columns:1fr}.level-card{padding:12px}.level-orb{width:46px;height:46px;border-radius:14px}.streak-pill{min-width:67px;padding-left:10px}.level-row{align-items:flex-start;flex-direction:column;gap:3px}.mission-head{margin-top:3px}}

/* Step 33 — progression celebration layer */
.reward-celebration{position:fixed;left:50%;top:82px;transform:translateX(-50%);z-index:1060;width:min(92vw,430px);pointer-events:none;opacity:0;filter:blur(3px)}
.reward-celebration.is-showing{animation:reward-layer 1.7s var(--ease-spring) both}
.reward-card{position:relative;display:flex;align-items:center;gap:13px;padding:14px 15px;border-radius:19px;border:1px solid color-mix(in srgb,var(--accent) 48%,var(--glass-brd-lit));background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 17%,var(--glass-bg-strong)),var(--glass-bg-strong));-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 16px 55px rgba(0,0,0,.34),0 0 35px color-mix(in srgb,var(--accent) 16%,transparent);overflow:hidden}
.reward-icon{width:54px;height:54px;flex:none;border-radius:17px;display:grid;place-items:center;font-size:1.55rem;background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 86%,#fff),color-mix(in srgb,var(--accent) 55%,#090614));box-shadow:inset 0 1px 0 rgba(255,255,255,.38),0 8px 22px color-mix(in srgb,var(--accent) 28%,transparent);animation:reward-icon-pop .75s var(--ease-spring) both}
.reward-copy{min-width:0;flex:1}.reward-copy small,.reward-copy strong,.reward-copy span{display:block}.reward-copy small{font-size:.58rem;letter-spacing:.13em;font-weight:950;color:color-mix(in srgb,var(--accent) 62%,#fff)}.reward-copy strong{font-size:.94rem;margin:2px 0 2px}.reward-copy span{font-size:.66rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.reward-xp{flex:none;border-radius:999px;padding:7px 9px;background:color-mix(in srgb,var(--accent) 17%,transparent);border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));font-size:.65rem;color:var(--text)}
.reward-burst{position:absolute;inset:-25px;pointer-events:none}.reward-celebration.is-showing .reward-burst:before,.reward-celebration.is-showing .reward-burst:after{content:"✦  ✧  ✦  ✧  ✦";position:absolute;left:50%;top:50%;font-size:1.05rem;letter-spacing:18px;color:color-mix(in srgb,var(--accent) 75%,#fff);transform:translate(-50%,-50%) scale(.4);opacity:0;animation:reward-sparks 1s ease-out both}.reward-celebration.is-showing .reward-burst:after{animation-delay:.12s;transform:translate(-50%,-50%) rotate(28deg) scale(.4)}
.reward-celebration[data-kind="level"] .reward-card{border-color:color-mix(in srgb,#ffd45c 65%,var(--line));background:linear-gradient(120deg,color-mix(in srgb,#ffd45c 16%,var(--glass-bg-strong)),var(--glass-bg-strong))}.reward-celebration[data-kind="level"] .reward-icon{background:linear-gradient(145deg,#ffe37d,#ff8a24);color:#2a1600}.reward-celebration[data-kind="achievement"] .reward-icon{background:linear-gradient(145deg,#f9d46b,#8b5cff)}.reward-celebration[data-kind="mission"] .reward-icon{background:linear-gradient(145deg,#60f2b1,#008e68)}
@keyframes reward-layer{0%{opacity:0;filter:blur(4px);transform:translate(-50%,-18px) scale(.9)}12%,80%{opacity:1;filter:blur(0);transform:translate(-50%,0) scale(1)}100%{opacity:0;filter:blur(2px);transform:translate(-50%,-10px) scale(.97)}}
@keyframes reward-icon-pop{0%{transform:scale(.3) rotate(-15deg)}55%{transform:scale(1.16) rotate(5deg)}100%{transform:scale(1) rotate(0)}}
@keyframes reward-sparks{0%{opacity:0;transform:translate(-50%,-50%) scale(.35)}25%{opacity:.9}100%{opacity:0;transform:translate(-50%,-115%) scale(1.2)}}
.level-card.level-up{animation:level-card-pop .8s var(--ease-spring)}
@keyframes level-card-pop{0%,100%{transform:none}40%{transform:translateY(-3px) scale(1.015);box-shadow:0 14px 44px color-mix(in srgb,var(--accent) 24%,transparent)}}
@media(max-width:560px){.reward-celebration{top:68px;width:calc(100vw - 24px)}.reward-card{padding:12px}.reward-icon{width:47px;height:47px;border-radius:15px}.reward-xp{font-size:.59rem;padding:6px 8px}.reward-copy span{white-space:normal;line-height:1.3}}
@media(prefers-reduced-motion:reduce){.reward-celebration.is-showing,.reward-icon,.reward-burst:before,.reward-burst:after{animation:none!important}.reward-celebration.is-showing{opacity:1;filter:none;transform:translateX(-50%)}}

/* Step 34 — daily chest + cosmetic progression */
:root[data-arcade-theme="sunset"]{--bg:#151016;--bg-raise:#231722;--glass-bg:#231722;--glass-bg-strong:#291925;--accent:#ff7a45}
:root[data-arcade-theme="mint"]{--bg:#091713;--bg-raise:#10241d;--glass-bg:#10241d;--glass-bg-strong:#132a22;--accent:#35dfa3}
:root[data-arcade-theme="cyber"]{--bg:#07101d;--bg-raise:#0d1c30;--glass-bg:#0d1c30;--glass-bg-strong:#10243c;--accent:#35a7ff}
:root[data-arcade-theme="gold"]{--bg:#151107;--bg-raise:#251e0d;--glass-bg:#251e0d;--glass-bg-strong:#2c2410;--accent:#f5c451}
:root[data-arcade-theme="starlight"]{--bg:#090818;--bg-raise:#16132d;--glass-bg:#16132d;--glass-bg-strong:#1b1737;--accent:#bd8cff}
:root[data-arcade-theme="starlight"] .screen::before{height:520px;background:radial-gradient(circle at 20% 15%,rgba(105,90,255,.18),transparent 30%),radial-gradient(circle at 78% 10%,rgba(240,100,255,.11),transparent 24%),linear-gradient(180deg,color-mix(in srgb,var(--accent) 12%,transparent),transparent)}

.profile-avatar{width:54px;height:54px;border:1px solid color-mix(in srgb,var(--accent) 38%,var(--line));border-radius:17px;background:color-mix(in srgb,var(--accent) 10%,var(--panel));display:grid;place-items:center;font-size:1.48rem;flex:none;position:relative;z-index:2;box-shadow:inset 0 1px 0 rgba(255,255,255,.08);transition:transform .2s var(--ease-spring),background .2s ease}.profile-avatar:hover{transform:translateY(-2px) scale(1.04);background:color-mix(in srgb,var(--accent) 18%,var(--panel))}.profile-avatar:after{content:"EDIT";position:absolute;bottom:-5px;right:-6px;font-size:.43rem;letter-spacing:.06em;font-weight:950;padding:2px 4px;border-radius:5px;background:var(--accent);color:#fff}

.daily-reward-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 14px;border:1px solid color-mix(in srgb,#ffd05c 32%,var(--line));border-radius:16px;background:linear-gradient(115deg,color-mix(in srgb,#ffd05c 8%,var(--panel)),var(--panel));overflow:hidden;position:relative}.daily-reward-card:before{content:"";position:absolute;width:150px;height:90px;right:-30px;top:-35px;border-radius:50%;background:rgba(255,205,80,.08);filter:blur(10px);pointer-events:none}.daily-chest{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;font-size:1.35rem;background:linear-gradient(145deg,#ffe47d,#d98920);box-shadow:0 7px 20px rgba(220,145,28,.22);animation:chest-float 1.8s ease-in-out infinite alternate}.daily-reward-copy{min-width:0}.daily-reward-copy span,.daily-reward-copy strong,.daily-reward-copy small{display:block}.daily-reward-copy span{font-size:.55rem;letter-spacing:.12em;font-weight:950;color:#e5b94a}.daily-reward-copy strong{font-size:.82rem;margin:2px 0}.daily-reward-copy small{font-size:.62rem;color:var(--muted);line-height:1.35}.daily-reward-btn{position:relative;z-index:1;min-height:40px;padding:0 13px;border-radius:12px;border:1px solid rgba(255,215,110,.32);background:linear-gradient(145deg,#ffd861,#f2a22d);color:#271700;font-size:.62rem;font-weight:950;letter-spacing:.05em;box-shadow:0 6px 20px rgba(235,170,43,.18)}.daily-reward-btn:not(:disabled):hover{transform:translateY(-1px);filter:brightness(1.06)}.daily-reward-btn:disabled{background:rgba(255,255,255,.05);border-color:var(--line);color:var(--muted);box-shadow:none;cursor:default}.daily-reward-card.is-opened{border-color:var(--line);background:var(--panel)}.daily-reward-card.is-opened .daily-chest{animation:none;background:rgba(255,255,255,.06);box-shadow:none}@keyframes chest-float{to{transform:translateY(-3px) rotate(2deg);box-shadow:0 10px 28px rgba(220,145,28,.3)}}

.unlock-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}.unlock-item,.avatar-option{min-width:0;display:flex;align-items:center;gap:9px;text-align:left;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.025);padding:10px;transition:transform .18s var(--ease),border-color .18s ease,background .18s ease}.unlock-item b,.avatar-option b{width:34px;height:34px;border-radius:10px;background:color-mix(in srgb,var(--accent) 10%,rgba(255,255,255,.04));display:grid;place-items:center;font-size:1.05rem;flex:none}.unlock-item span,.avatar-option span{font-size:.67rem;font-weight:850;min-width:0;flex:1}.unlock-item small,.avatar-option small{display:block;color:var(--muted);font-size:.53rem;font-weight:650;margin-top:2px}.unlock-item i{font-style:normal;font-size:.52rem;color:var(--accent);font-weight:950}.unlock-item:not(:disabled):hover,.avatar-option:not(:disabled):hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--accent) 45%,var(--line));background:color-mix(in srgb,var(--accent) 6%,transparent)}.unlock-item.is-selected,.avatar-option.is-selected{border-color:color-mix(in srgb,var(--accent) 62%,var(--line));background:color-mix(in srgb,var(--accent) 10%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 10%,transparent) inset}.unlock-item.is-locked,.avatar-option.is-locked{opacity:.48;filter:grayscale(.75);cursor:not-allowed}.avatar-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px}.avatar-option{display:grid;grid-template-columns:auto minmax(0,1fr);padding:9px}.avatar-option b{font-size:1.25rem}

@media(max-width:760px){.profile-avatar{width:46px;height:46px;border-radius:14px;font-size:1.25rem}.daily-reward-card{grid-template-columns:auto minmax(0,1fr);padding:11px}.daily-reward-btn{grid-column:1/-1;width:100%;min-height:44px}.avatar-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.unlock-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.daily-chest{animation:none!important}.profile-avatar,.unlock-item,.avatar-option{transition:none!important}}

/* Step 35 — personal competition and replay guidance */
.arcade-insights{display:grid;gap:9px;margin-top:2px}.insight-head{display:flex;align-items:end;justify-content:space-between}.insight-head h2{font-size:.98rem;margin:1px 0 0}.insight-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.insight-card{min-width:0;padding:10px 11px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 5%,var(--panel)),var(--panel));display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:center}.insight-card>span{grid-row:1/3;font-size:1rem}.insight-card strong{font-size:.9rem;line-height:1}.insight-card small{margin-top:3px;color:var(--muted);font-size:.58rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.most-played{border:1px solid var(--line);border-radius:15px;background:var(--panel);padding:10px}.most-played-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.most-played-title strong{font-size:.72rem}.most-played-title span{font-size:.54rem;color:var(--muted);letter-spacing:.1em;font-weight:900}.most-played-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}.most-played-game{border:1px solid transparent;background:rgba(255,255,255,.035);border-radius:11px;padding:7px;display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:6px;align-items:center;text-align:left;color:var(--text);min-width:0}.most-played-game:hover{border-color:color-mix(in srgb,var(--accent) 38%,var(--line));background:color-mix(in srgb,var(--accent) 7%,var(--panel))}.most-played-game>b{font-size:.55rem;color:var(--muted)}.most-played-game>span{display:grid;place-items:center}.most-played-game div{min-width:0}.most-played-game strong,.most-played-game small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.most-played-game strong{font-size:.61rem}.most-played-game small{font-size:.52rem;color:var(--muted);margin-top:2px}.most-played-empty{font-size:.64rem;color:var(--muted);padding:5px;text-align:center}
.run-history{margin-top:10px;border-top:1px solid var(--line);padding-top:9px}.run-history-head{display:flex;justify-content:space-between;font-size:.52rem;letter-spacing:.1em;color:var(--muted);font-weight:900}.run-bars{height:55px;display:flex;gap:5px;align-items:end;padding-top:8px}.run-bars i{position:relative;flex:1;min-width:0;max-width:38px;border-radius:5px 5px 2px 2px;background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 45%,#191528));animation:runbar-in .45s var(--ease-spring) both}.run-bars i:last-child{box-shadow:0 0 14px color-mix(in srgb,var(--accent) 30%,transparent)}.run-bars i span{position:absolute;left:50%;bottom:100%;transform:translate(-50%,-2px);font-style:normal;font-size:.45rem;color:var(--muted);white-space:nowrap}@keyframes runbar-in{from{height:0!important;opacity:.2}}
.next-target{margin-top:9px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));background:color-mix(in srgb,var(--accent) 7%,var(--panel));border-radius:12px;padding:8px 10px;text-align:left}.next-target>span{font-size:.53rem;color:var(--muted);font-weight:900;letter-spacing:.08em}.next-target>strong{font-size:.9rem;text-align:center}.next-target>small{font-size:.53rem;color:var(--muted);text-align:right}.result-next-game{min-height:44px;border-color:color-mix(in srgb,var(--accent) 25%,var(--line));background:color-mix(in srgb,var(--accent) 7%,var(--panel));display:flex;justify-content:center;align-items:center;gap:8px}
@media(max-width:760px){.insight-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.most-played-row{grid-template-columns:1fr 1fr}.most-played-game:nth-child(5){grid-column:1/-1}.next-target{grid-template-columns:1fr auto}.next-target>span{grid-column:1/-1}.next-target>small{text-align:right}.run-bars{height:48px}}

/* Step 36 — non-blocking onboarding and smarter continuation */
.starter-path{display:grid;gap:9px;padding:12px 14px;border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));border-radius:17px;background:linear-gradient(125deg,color-mix(in srgb,var(--accent) 8%,var(--panel)),var(--panel));box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.starter-path[hidden]{display:none}.starter-head{display:flex;justify-content:space-between;align-items:end;gap:12px}.starter-head h2{font-size:.98rem;margin:1px 0 0}.starter-progress{font-size:.62rem;font-weight:950;color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));background:color-mix(in srgb,var(--accent) 8%,transparent);padding:5px 8px;border-radius:999px}.starter-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.starter-step{min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:9px;padding:10px;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.025);opacity:.58}.starter-step.is-current{opacity:1;border-color:color-mix(in srgb,var(--accent) 45%,var(--line));background:color-mix(in srgb,var(--accent) 8%,var(--panel));box-shadow:0 0 18px color-mix(in srgb,var(--accent) 10%,transparent)}.starter-step.is-done{opacity:.84;background:rgba(53,223,163,.055);border-color:rgba(53,223,163,.22)}.starter-step-icon{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:rgba(255,255,255,.05);font-size:1rem;font-weight:950}.starter-step.is-current .starter-step-icon{background:color-mix(in srgb,var(--accent) 14%,var(--panel));animation:starter-pulse 1.6s ease-in-out infinite}.starter-step.is-done .starter-step-icon{background:rgba(53,223,163,.13);color:#77f5c6}.starter-step strong,.starter-step small{display:block}.starter-step strong{font-size:.68rem}.starter-step small{font-size:.56rem;color:var(--muted);line-height:1.35;margin-top:2px}@keyframes starter-pulse{50%{transform:scale(1.08);box-shadow:0 0 18px color-mix(in srgb,var(--accent) 28%,transparent)}}
.badge.played{color:var(--muted);background:rgba(255,255,255,.04)}.badge.new-game{color:#c8ff4d;background:rgba(200,255,77,.08);border-color:rgba(200,255,77,.18);font-weight:950;letter-spacing:.06em}
.game-load-control{width:min(280px,86%);display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px;padding:8px 10px;border:1px solid color-mix(in srgb,var(--load-accent) 34%,var(--line));border-radius:11px;background:color-mix(in srgb,var(--load-accent) 7%,rgba(255,255,255,.025));margin:2px auto 1px}.game-load-control b{font-size:.52rem;color:var(--load-accent);letter-spacing:.1em}.game-load-control em{min-width:0;font-size:.61rem;color:var(--text);font-style:normal;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:760px){.starter-steps{grid-template-columns:1fr}.starter-step{padding:9px 10px}.game-load-control{width:92%}.game-load-control em{white-space:normal}}
@media(prefers-reduced-motion:reduce){.starter-step.is-current .starter-step-icon{animation:none!important}}

/* Step 37 — unified audio controls */
.audio-control-card{display:grid;gap:10px}.audio-control-head{display:flex;align-items:center;justify-content:space-between;gap:14px}.audio-control-head span{min-width:0}.audio-control-head strong,.audio-control-head small{display:block}.audio-control-head small{font-size:.68rem;color:var(--muted);margin-top:2px}.audio-control-head b{font-size:.72rem;color:var(--accent);font-variant-numeric:tabular-nums;min-width:40px;text-align:right}.audio-range{width:100%;height:34px;accent-color:var(--accent);cursor:pointer;background:transparent}.audio-range::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 55%,#fff),rgba(255,255,255,.09))}.audio-range::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;margin-top:-7px;background:#fff;border:3px solid var(--accent);box-shadow:0 2px 10px color-mix(in srgb,var(--accent) 35%,transparent)}.audio-range::-moz-range-track{height:6px;border-radius:999px;background:rgba(255,255,255,.09)}.audio-range::-moz-range-progress{height:6px;border-radius:999px;background:var(--accent)}.audio-range::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--accent)}

/* ════════════════════════════════════════════════════════════════════
   STEP 38 — Unified player chrome
   Consistent spacing, readable controls and calm transitions across every
   game without flattening each title's own art direction.
   ════════════════════════════════════════════════════════════════════ */
#player {
  background:
    radial-gradient(80% 55% at 50% -10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 68%),
    var(--bg);
}
.player-bar {
  min-height: 64px;
  gap: 9px;
  background: color-mix(in srgb, var(--bg-raise) 92%, transparent);
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
}
.player-bar .icon-btn {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  flex: 0 0 44px;
  background: rgba(255,255,255,.055);
  border-color: rgba(255,255,255,.10);
}
.player-title {
  min-width: 0;
  font-size: .94rem;
  letter-spacing: -.01em;
}
.player-score {
  flex: 0 0 auto;
  min-width: 76px;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 11px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, rgba(255,255,255,.045));
  border: 1px solid color-mix(in srgb, var(--accent) 28%, rgba(255,255,255,.09));
  color: var(--text);
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .035em;
  font-variant-numeric: tabular-nums;
}
.stage-wrap { position: relative; }
.stage {
  isolation: isolate;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, rgba(255,255,255,.13));
  box-shadow:
    0 22px 60px rgba(0,0,0,.58),
    0 0 52px -20px color-mix(in srgb, var(--accent) 68%, transparent),
    inset 0 1px 0 rgba(255,255,255,.08);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.stage::before {
  content: "";
  position: absolute;
  z-index: 3;
  left: 12%; right: 12%; top: -1px;
  height: 2px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: .72;
  pointer-events: none;
}
.side-panel {
  width: min(300px, 25vw);
  align-self: center;
  padding: 18px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
  border: 1px solid var(--glass-brd);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 16px 40px rgba(0,0,0,.24);
}
.side-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.side-panel-kicker {
  color: var(--muted);
  font-size: .62rem;
  font-weight: 850;
  letter-spacing: .13em;
}
.side-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #86f5c9;
  font-size: .6rem;
  font-weight: 850;
  letter-spacing: .08em;
}
.side-live i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 9px currentColor;
  animation: side-live-pulse 1.7s ease-in-out infinite;
}
@keyframes side-live-pulse { 50% { opacity:.35; transform:scale(.75); } }
.side-title {
  margin: 0 0 15px;
  font-size: .9rem;
  line-height: 1.45;
  font-weight: 720;
  color: var(--text);
}
.game-keylist {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.game-keylist li {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 5px;
  padding: 10px 11px;
  border-radius: 12px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.06);
}
.game-keylist .control-input {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  color: var(--text);
  font-size: .78rem;
  font-weight: 760;
}
.game-keylist li > span {
  color: var(--muted);
  font-size: .7rem;
  line-height: 1.4;
}
.game-keylist kbd {
  margin-left: auto;
  max-width: 100%;
  padding: 3px 7px;
  border: 1px solid rgba(255,255,255,.15);
  border-bottom-color: rgba(255,255,255,.24);
  border-radius: 7px;
  background: rgba(0,0,0,.24);
  color: var(--text);
  font-family: inherit;
  font-size: .64rem;
  font-weight: 800;
  white-space: normal;
  text-align: center;
}
.side-tip {
  display: grid;
  gap: 5px;
  margin-top: 12px;
  padding: 11px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, rgba(255,255,255,.06));
}
.side-tip b {
  color: var(--accent);
  font-size: .62rem;
  letter-spacing: .08em;
}
.side-tip span {
  color: var(--muted);
  font-size: .7rem;
  line-height: 1.45;
}
.side-best {
  margin-top: 13px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.07);
}
.side-best-val { font-variant-numeric: tabular-nums; }
.overlay:not([hidden]) .sheet {
  animation: unified-sheet-in .28s var(--ease-spring) both;
}
@keyframes unified-sheet-in {
  from { opacity:0; transform:translateY(12px) scale(.975); }
  to { opacity:1; transform:none; }
}
@media (max-width: 700px) {
  .player-bar { min-height: 56px; padding-block: 6px; }
  .player-bar .icon-btn { width: 42px; height: 42px; min-width:42px; min-height:42px; flex-basis:42px; }
  .player-score { min-width: 66px; padding-inline: 8px; font-size: .67rem; }
  .player-title { font-size: .86rem; }
  .stage-wrap { padding: 4px max(4px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left)); }
}
@media (max-width: 390px) {
  .player-title span:first-child { display:none; }
  .player-bar { gap: 6px; }
  .player-score { min-width: 58px; }
}
@media (prefers-reduced-motion: reduce) {
  .side-live i { animation: none; }
  .overlay:not([hidden]) .sheet { animation: none; }
}

/* ════════════════════════════════════════════════════════════════════
   STEP 43 — Premium hub + cinematic game launch
   Stronger hierarchy, less dashboard clutter, calmer cards and a game
   handoff that feels like entering an arcade cabinet rather than loading
   an iframe.
   ════════════════════════════════════════════════════════════════════ */
.wordmark{display:flex;align-items:baseline;gap:7px;font-family:Inter,ui-sans-serif,system-ui,sans-serif;font-weight:950;letter-spacing:-.055em}
.wordmark span{background:linear-gradient(90deg,#c8ff4d,#5cf4ff 55%,#b98cff);-webkit-background-clip:text;background-clip:text;color:transparent}
.wordmark small{font-size:.52rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:800;margin-left:3px}
.hub-header-inner{min-height:64px}
.hub-main{display:grid;gap:15px}

.hero{margin:0;min-height:172px;padding:clamp(18px,2.5vw,28px);display:grid;grid-template-columns:auto minmax(0,1fr) minmax(250px,330px);gap:clamp(16px,2.5vw,28px);align-items:center;border-radius:26px;background:linear-gradient(120deg,rgba(25,22,54,.94),rgba(12,14,32,.95));border:1px solid rgba(255,255,255,.12);box-shadow:0 22px 55px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.10)}
.hero::before{width:18rem;height:18rem;right:-4rem;top:-10rem;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 34%,#5cf4ff),transparent 66%);filter:blur(8px);opacity:.7}
.hero::after{opacity:.34;animation-duration:9s}
.hero-avatar{width:78px;height:78px;font-size:2.2rem;border-radius:22px;transform:none;box-shadow:0 14px 34px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.28);animation:hero-avatar-breathe 4s ease-in-out infinite}
@keyframes hero-avatar-breathe{50%{transform:translateY(-4px) rotate(-2deg)}}
.hero-eyebrow{font-size:.62rem;letter-spacing:.18em;color:#aeb7cc;margin-bottom:8px}
.hero-name{font-size:.72rem;letter-spacing:.12em}
.hero-line{font-size:clamp(1.28rem,1rem + 1vw,1.85rem);line-height:1.08;letter-spacing:-.035em;font-weight:900;max-width:650px;margin-top:5px}
.hero-meta{font-size:.72rem;margin-top:8px}
.hero-proof{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}.hero-proof span{font-size:.58rem;font-weight:850;color:#dfe5f5;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.045);padding:5px 8px;border-radius:999px}
.feature-play{min-height:112px;grid-template-columns:50px minmax(0,1fr) 24px;grid-template-rows:auto 1fr;padding:16px 17px;border-radius:20px;background:linear-gradient(145deg,color-mix(in srgb,var(--tile) 16%,#1b2040),rgba(12,15,35,.98));border:1px solid color-mix(in srgb,var(--tile) 58%,rgba(255,255,255,.16));box-shadow:0 16px 38px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.13);transform:none}
.feature-play:hover{transform:translateY(-4px);box-shadow:0 22px 44px rgba(0,0,0,.42),0 0 26px color-mix(in srgb,var(--tile) 16%,transparent)}
.feature-play-label{font-size:.54rem;letter-spacing:.16em}.feature-copy strong{font-size:1.02rem}.feature-copy small{font-size:.65rem;margin-top:4px}.feature-arrow{font-size:1.25rem}

.controls{margin:0;display:grid;grid-template-columns:minmax(260px,1fr) auto;align-items:center;gap:10px;padding:0}.search-wrap{width:100%;max-width:none;min-height:50px;border-radius:15px;background:rgba(18,18,39,.78);box-shadow:none}.sorts{justify-content:flex-end}.chip,.surprise-chip{min-height:42px}.surprise-chip{background:linear-gradient(135deg,#c8ff4d,#7de36a)!important;color:#11170c!important;border-color:transparent!important;font-weight:950!important;box-shadow:0 7px 18px rgba(153,220,76,.16)}

/* Keep the first screen about playing. Progression now lives after the game shelf. */
.arcade-progress{margin-top:12px;border-top:1px solid rgba(255,255,255,.08);padding-top:18px;gap:10px}.arcade-progress::before{content:"YOUR ARCADE PROGRESS";font-size:.58rem;font-weight:950;letter-spacing:.16em;color:var(--muted);margin-bottom:-2px}.level-card{border-radius:16px;background:linear-gradient(145deg,rgba(30,28,61,.76),rgba(13,14,31,.82));box-shadow:none}.daily-reward-card,.mission-card,.most-played,.starter-path{box-shadow:none}.mission-grid{gap:7px}.achievement-strip{opacity:.88}

/* Cleaner premium game shelf: artwork does the talking, not giant 3D shadows. */
.grid{gap:14px}.game-card-wrap{border-radius:19px}.card-game{border-radius:19px;padding-bottom:11px;background:linear-gradient(160deg,rgba(29,29,60,.92),rgba(11,13,29,.96));border:1px solid rgba(255,255,255,.11);box-shadow:0 12px 28px rgba(0,0,0,.22);transform:none;overflow:hidden}.card-game::after{display:none}.card-game::before{inset:0;border-radius:inherit;background:radial-gradient(110% 70% at 50% -15%,color-mix(in srgb,var(--tile) 24%,transparent),transparent 66%);opacity:.8}.card-game:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--tile) 52%,rgba(255,255,255,.16));box-shadow:0 20px 38px rgba(0,0,0,.32),0 0 24px color-mix(in srgb,var(--tile) 10%,transparent)}
.card-game:active{transform:scale(.985)}.card-emoji{margin:10px 10px 9px;width:calc(100% - 20px);aspect-ratio:16/9;border-radius:14px;background:radial-gradient(circle at 50% 4%,color-mix(in srgb,var(--tile) 38%,#fff 4%),transparent 48%),linear-gradient(155deg,color-mix(in srgb,var(--tile) 18%,#252746),#090b1a 74%);border-color:color-mix(in srgb,var(--tile) 24%,rgba(255,255,255,.12));box-shadow:inset 0 1px 0 rgba(255,255,255,.12);transform:none}.card-emoji .gicon{filter:drop-shadow(0 10px 12px rgba(0,0,0,.42));transform:scale(.98)}.card-game:hover .card-emoji .gicon{transform:scale(1.07) rotate(-2deg)}.card-title{font-size:.94rem}.card-desc{font-size:.69rem;line-height:1.35;color:#9299ad}.card-foot{padding-top:6px}.badge{font-size:.53rem}.favorite-btn{backdrop-filter:blur(8px)}
.grid-head{margin-top:3px;margin-bottom:-3px}.section-label{font-size:.78rem;letter-spacing:.04em;text-transform:none}.count{font-size:.62rem;color:var(--muted)}

/* Cinematic launch layer */
.frame-loading{background:radial-gradient(80% 62% at 50% 35%,color-mix(in srgb,var(--launch-accent,#8b5cff) 12%,#101224),#090a14 72%);padding:20px;color:var(--text);z-index:8;overflow:hidden}.frame-loading::before{content:"";position:absolute;inset:-25%;background:conic-gradient(from 180deg,transparent,color-mix(in srgb,var(--launch-accent,#8b5cff) 16%,transparent),transparent 28%);animation:launch-aurora 7s linear infinite;opacity:.6;pointer-events:none}.frame-loading:has(.game-load-card)::after{display:none}@keyframes launch-aurora{to{transform:rotate(360deg)}}
.game-load-card{--load-accent:var(--launch-accent,#8b5cff);position:relative;width:min(430px,94%);display:grid;justify-items:center;gap:10px;padding:24px 24px 21px;border-radius:26px;border:1px solid color-mix(in srgb,var(--load-accent) 32%,rgba(255,255,255,.12));background:linear-gradient(160deg,rgba(26,27,55,.88),rgba(10,11,25,.94));box-shadow:0 34px 75px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.10);animation:launch-card-in .48s cubic-bezier(.2,.85,.3,1) both;isolation:isolate}
@keyframes launch-card-in{from{opacity:0;transform:translateY(20px) scale(.96)}}
.game-load-kicker{font-size:.55rem;font-weight:950;letter-spacing:.2em;color:var(--load-accent)}
.game-load-orbit{position:relative;width:104px;height:104px;display:grid;place-items:center}.game-load-orbit::before,.game-load-orbit::after{content:"";position:absolute;border-radius:50%;border:1px solid color-mix(in srgb,var(--load-accent) 42%,transparent)}.game-load-orbit::before{inset:4px;animation:launch-ring 2.1s linear infinite}.game-load-orbit::after{inset:-6px;border-style:dashed;opacity:.45;animation:launch-ring 5s linear reverse infinite}@keyframes launch-ring{to{transform:rotate(360deg)}}
.game-load-icon{width:78px;height:78px;border-radius:22px;display:grid;place-items:center;background:radial-gradient(circle at 35% 20%,color-mix(in srgb,var(--load-accent) 34%,#fff 10%),color-mix(in srgb,var(--load-accent) 14%,#15172d) 62%,#0d0f1e);border:1px solid color-mix(in srgb,var(--load-accent) 45%,rgba(255,255,255,.12));box-shadow:0 18px 38px rgba(0,0,0,.38),0 0 35px color-mix(in srgb,var(--load-accent) 20%,transparent);animation:launch-icon-breathe 1.8s ease-in-out infinite}@keyframes launch-icon-breathe{50%{transform:scale(1.045);box-shadow:0 18px 38px rgba(0,0,0,.38),0 0 50px color-mix(in srgb,var(--load-accent) 30%,transparent)}}
.game-load-title{font-size:clamp(1.25rem,1rem + 1vw,1.62rem)!important;letter-spacing:-.035em;line-height:1.05;text-align:center}.game-load-card>.game-load-goal{max-width:340px;font-size:.72rem!important;line-height:1.5;text-align:center}.game-load-control{width:100%;max-width:350px;min-height:50px;border-radius:14px;padding:9px 12px;background:rgba(255,255,255,.035)}.game-load-control b{font-size:.5rem}.game-load-control em{font-size:.66rem}.game-load-steps{width:100%;max-width:350px;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:2px}.game-load-step{display:grid;justify-items:center;gap:5px;color:#7f879a;font-size:.5rem;font-weight:800}.game-load-step i{width:7px;height:7px;border-radius:50%;background:#3b4050;box-shadow:0 0 0 4px rgba(255,255,255,.025)}.game-load-step:nth-child(1){color:#dce6ff}.game-load-step:nth-child(1) i{background:var(--load-accent);box-shadow:0 0 16px var(--load-accent);animation:launch-step 1.4s ease-in-out infinite}.game-load-step:nth-child(2) i{animation:launch-step 1.4s .34s ease-in-out infinite}.game-load-step:nth-child(3) i{animation:launch-step 1.4s .68s ease-in-out infinite}@keyframes launch-step{40%{background:var(--load-accent);box-shadow:0 0 14px var(--load-accent);transform:scale(1.35)}70%{background:#3b4050;box-shadow:none;transform:scale(1)}}
.game-load-track{width:100%;max-width:350px;height:3px;margin:2px 0;background:rgba(255,255,255,.06)}.game-load-card small{font-size:.55rem!important;letter-spacing:.08em;text-transform:uppercase}

@media(max-width:900px){.hero{grid-template-columns:auto 1fr}.feature-play{grid-column:1/-1;min-height:86px}.controls{grid-template-columns:1fr}.sorts{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px;scrollbar-width:none}.sorts::-webkit-scrollbar{display:none}}
@media(max-width:700px){.hub-main{padding:12px;gap:12px}.hub-header-inner{min-height:56px}.wordmark small{display:none}.hero{min-height:auto;grid-template-columns:56px minmax(0,1fr);gap:12px;padding:15px;border-radius:20px}.hero-avatar{width:56px;height:56px;border-radius:17px;font-size:1.65rem}.hero-line{font-size:1.12rem}.hero-proof{margin-top:9px}.hero-proof span{font-size:.52rem;padding:4px 7px}.feature-play{grid-column:1/-1;min-height:78px;border-radius:16px;padding:11px 12px}.controls{gap:8px}.search-wrap{min-height:46px}.grid{gap:10px}.card-game{border-radius:16px}.card-emoji{margin:7px 7px 8px;width:calc(100% - 14px);border-radius:11px}.card-title,.card-desc,.card-foot{padding-inline:9px}.card-title{font-size:.83rem}.card-desc{font-size:.62rem}.game-load-card{padding:20px 16px 17px;border-radius:22px}.game-load-orbit{width:94px;height:94px}.game-load-icon{width:70px;height:70px}}
@media(max-width:390px){.hero-proof span:last-child{display:none}.feature-play{grid-template-columns:42px 1fr 18px}.game-load-steps{gap:3px}.game-load-step{font-size:.46rem}}
@media(prefers-reduced-motion:reduce){.hero-avatar,.frame-loading::before,.game-load-orbit::before,.game-load-orbit::after,.game-load-icon,.game-load-step i{animation:none!important}}


/* STEP 44 — conversion polish + seamless cabinet handoff */
.feature-play{grid-template-columns:50px minmax(0,1fr) auto 20px;column-gap:12px}
.feature-cta{align-self:center;justify-self:end;min-height:34px;display:inline-grid;place-items:center;padding:0 11px;border-radius:999px;background:var(--tile);color:#090b12;font-size:.54rem;font-weight:950;letter-spacing:.08em;box-shadow:0 8px 18px color-mix(in srgb,var(--tile) 20%,transparent);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.feature-play:hover .feature-cta{transform:translateY(-1px) scale(1.04);box-shadow:0 10px 24px color-mix(in srgb,var(--tile) 28%,transparent)}
.feature-arrow{opacity:.72;transition:transform .2s var(--ease)}.feature-play:hover .feature-arrow{transform:translateX(3px)}
.card-game .card-foot::after{content:"PLAY";margin-left:auto;align-self:center;font-size:.48rem;font-weight:950;letter-spacing:.1em;color:color-mix(in srgb,var(--tile) 78%,#fff);opacity:.66;transition:opacity .2s var(--ease),transform .2s var(--ease)}
.card-game:hover .card-foot::after{opacity:1;transform:translateX(2px)}

/* The iframe starts visually quiet beneath the launch layer, then becomes the
   surface of the same cabinet when the game declares itself ready. */
#frame{opacity:.18;transform:scale(1.012);filter:saturate(.8);transition:opacity .34s var(--ease),transform .44s var(--ease),filter .34s var(--ease)}
.stage.is-game-ready #frame{opacity:1;transform:scale(1);filter:none}
.frame-loading{transition:opacity .32s var(--ease),transform .32s var(--ease),visibility .32s}
.frame-loading.is-booting .game-load-step:nth-child(1),.frame-loading.is-booting .game-load-step:nth-child(2){color:#dce6ff}
.frame-loading.is-booting .game-load-step:nth-child(1) i,.frame-loading.is-booting .game-load-step:nth-child(2) i{background:var(--load-accent);box-shadow:0 0 14px var(--load-accent)}
.frame-loading.is-ready{opacity:0;transform:scale(1.015);pointer-events:none}
.frame-loading.is-ready .game-load-step{color:#e8edff}
.frame-loading.is-ready .game-load-step i{background:#72f2b0;box-shadow:0 0 14px rgba(114,242,176,.65);animation:none}
.frame-loading.is-ready .game-load-track i{width:100%;transform:none;animation:none;background:linear-gradient(90deg,var(--load-accent),#72f2b0);transition:width .2s ease}

@media(max-width:700px){
  .feature-play{grid-template-columns:42px minmax(0,1fr) auto 16px;column-gap:9px}
  .feature-cta{min-height:32px;padding-inline:9px;font-size:.49rem}
  .card-game .card-foot::after{font-size:.44rem}
}
@media(max-width:390px){.feature-cta{display:none}.feature-play{grid-template-columns:42px 1fr 18px}.feature-arrow{grid-column:3}}
@media(prefers-reduced-motion:reduce){#frame,.frame-loading,.feature-cta,.feature-arrow{transition:none!important}.frame-loading.is-ready{opacity:0}}


/* ════════════════════════════════════════════════════════════════════
   STEP 45 · FINAL HOMEPAGE VISUAL DETAILING
   Stronger art stages, category navigation, responsive density and a
   restrained ambient layer. All motion is decorative and disabled for
   reduced-motion users.
   ════════════════════════════════════════════════════════════════════ */

/* A low-cost arcade atmosphere: pure gradients, no filters/backdrop work. */
#hub::before {
  content:"";
  position:fixed;
  inset:58px 0 0;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(circle at 12% 14%, color-mix(in srgb,var(--accent) 8%,transparent) 0 1px, transparent 2px),
    radial-gradient(circle at 78% 22%, rgba(92,244,255,.075) 0 1px, transparent 2px),
    radial-gradient(circle at 38% 72%, rgba(200,255,77,.055) 0 1px, transparent 2px);
  background-size:71px 71px, 97px 97px, 113px 113px;
  opacity:.9;
  animation:hub-stars-drift 28s linear infinite;
}
@keyframes hub-stars-drift { to { background-position:71px 71px,-97px 97px,113px -113px; } }

/* First-screen hero: one clear light source and a subtle game portal motif. */
.hero { position:relative; isolation:isolate; overflow:hidden; }
.hero::before {
  content:"";
  position:absolute;
  width:min(520px,58vw); aspect-ratio:1;
  right:-12%; top:-175%; z-index:-1;
  border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb,var(--accent) 18%,transparent), transparent 67%);
  pointer-events:none;
}
.hero::after {
  content:"";
  position:absolute; inset:auto -8% -76% 28%; height:160%; z-index:-1;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 48px);
  transform:perspective(450px) rotateX(68deg);
  transform-origin:bottom;
  mask-image:linear-gradient(to top,#000,transparent 68%);
  opacity:.36; pointer-events:none;
}
.hero-avatar { position:relative; box-shadow:0 16px 32px rgba(0,0,0,.30),0 0 30px color-mix(in srgb,var(--accent) 17%,transparent),inset 0 1px 0 rgba(255,255,255,.30); }
.hero-avatar::after { content:""; position:absolute; inset:-6px; border:1px solid rgba(255,255,255,.10); border-radius:inherit; transform:rotate(8deg); pointer-events:none; }
.hero-eyebrow { color:#aeb9d9; }
.hero-line { line-height:1.12; }
.hero-proof span { background:rgba(9,11,24,.52); border-color:rgba(255,255,255,.09); }

/* Featured game reads like a mini cabinet, not another generic card. */
.feature-play { overflow:hidden; isolation:isolate; }
.feature-play::after {
  content:""; position:absolute; width:120px; height:120px; right:-42px; bottom:-55px; z-index:-1;
  border-radius:50%; border:1px solid color-mix(in srgb,var(--tile,var(--accent)) 42%,transparent);
  box-shadow:0 0 0 18px color-mix(in srgb,var(--tile,var(--accent)) 4%,transparent),0 0 0 36px color-mix(in srgb,var(--tile,var(--accent)) 3%,transparent);
  opacity:.78;
}
.feature-icon { border:1px solid color-mix(in srgb,var(--tile,var(--accent)) 36%,rgba(255,255,255,.12)); background:color-mix(in srgb,var(--tile,var(--accent)) 11%,#111426); }
.feature-icon .gicon { width:82%; filter:drop-shadow(0 8px 10px rgba(0,0,0,.36)); }
.feature-cta { border-radius:999px; padding:7px 9px; background:color-mix(in srgb,var(--tile,var(--accent)) 13%,rgba(255,255,255,.04)); border:1px solid color-mix(in srgb,var(--tile,var(--accent)) 28%,rgba(255,255,255,.08)); }

/* Category navigation: illustrated icon, name, and useful inventory count. */
.cat-pill { position:relative; gap:9px; border-color:rgba(255,255,255,.085); }
.cat-pill .dot {
  width:31px; height:31px; flex:none; overflow:hidden;
  background:linear-gradient(145deg,color-mix(in srgb,var(--cat-a) 15%,#25283b),color-mix(in srgb,var(--cat-b) 9%,#11131f));
  border:1px solid color-mix(in srgb,var(--cat-a) 24%,rgba(255,255,255,.08));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.cat-pill .dot .gicon { width:76%; height:76%; }
.cat-pill .cat-count { margin-left:auto; min-width:22px; padding:2px 6px; border-radius:999px; font-size:.56rem; font-weight:850; color:#8890a8; background:rgba(255,255,255,.045); }
.cat-pill[aria-selected="true"] .cat-count { color:var(--text); background:rgba(255,255,255,.10); }
.cat-all-mark { width:17px; height:17px; display:grid; grid-template-columns:1fr 1fr; gap:2px; }
.cat-all-mark i { display:block; border-radius:2px; background:linear-gradient(145deg,var(--cat-a),var(--cat-b)); }
.rail-cats .cat-pill { padding-right:10px; }

/* Artwork gets the largest share of each card, with category + play affordance
   embedded in the artwork rather than adding more text below it. */
.card-emoji { position:relative; isolation:isolate; overflow:hidden; }
.card-emoji::before {
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(circle at 50% 88%, color-mix(in srgb,var(--tile) 31%,transparent), transparent 48%),
    linear-gradient(180deg,rgba(255,255,255,.035),transparent 42%);
}
.card-emoji::after {
  content:""; position:absolute; inset:auto -16% -43% 36%; height:70%;
  border-radius:50%; border:1px solid color-mix(in srgb,var(--tile) 23%,transparent);
  box-shadow:0 0 0 13px color-mix(in srgb,var(--tile) 3%,transparent),0 0 0 26px color-mix(in srgb,var(--tile) 2%,transparent);
  transform:rotate(-11deg); pointer-events:none;
}
.card-emoji > .gicon { position:relative; z-index:2; width:58%; max-height:72%; transition:transform .22s var(--ease-spring),filter .22s ease; }
.card-art-category {
  position:absolute; z-index:3; left:8px; top:8px; display:inline-flex; align-items:center; gap:4px;
  max-width:68%; padding:4px 7px; border-radius:999px; font-size:.49rem; font-weight:850; letter-spacing:.04em;
  color:#e9edff; background:rgba(5,7,17,.55); border:1px solid rgba(255,255,255,.09);
}
.card-art-play {
  position:absolute; z-index:4; right:8px; bottom:8px; width:31px; height:31px; display:grid; place-items:center;
  border-radius:50%; color:#11150b; background:#c8ff4d; font-size:.65rem; padding-left:2px;
  box-shadow:0 8px 18px rgba(0,0,0,.34),0 0 18px rgba(200,255,77,.18);
  transform:translateY(4px) scale(.88); opacity:.82;
  transition:transform .2s var(--ease-spring),opacity .2s ease,box-shadow .2s ease;
}
.card-game:hover .card-art-play { transform:translateY(0) scale(1); opacity:1; box-shadow:0 10px 24px rgba(0,0,0,.38),0 0 26px rgba(200,255,77,.28); }
.card-game:hover .card-emoji > .gicon { transform:translateY(-3px) scale(1.07) rotate(-1.5deg); filter:drop-shadow(0 13px 15px rgba(0,0,0,.48)); }
.card-title { font-weight:790; letter-spacing:-.018em; }
.card-foot { align-items:center; }
.badge.new-game { color:#c8ff4d; border-color:rgba(200,255,77,.16); background:rgba(200,255,77,.055); }
.badge.played { color:#b7c1dc; }

/* Density follows available space instead of forcing five cards too early. */
@media (min-width:1080px) and (max-width:1249px) { .grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:1250px) and (max-width:1549px) { .grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (min-width:1550px) and (max-width:1949px) { .grid { grid-template-columns:repeat(5,minmax(0,1fr)); } }
@media (min-width:1950px) { .grid { grid-template-columns:repeat(6,minmax(0,1fr)); } }

@media (min-width:700px) and (max-width:1079px) {
  .grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .card-emoji > .gicon { width:54%; }
}

@media (max-width:700px) {
  #hub::before { opacity:.52; animation-duration:42s; }
  .hero::after { opacity:.20; }
  .cat-pill { padding-inline:10px; }
  .cat-pill .dot { width:29px; height:29px; }
  .cat-pill .cat-count { font-size:.50rem; }
  .card-emoji { aspect-ratio:16/10.6; }
  .card-emoji > .gicon { width:58%; max-height:69%; }
  .card-art-category { left:6px; top:6px; padding:3px 6px; font-size:.44rem; }
  .card-art-play { width:28px; height:28px; right:6px; bottom:6px; opacity:.9; transform:none; }
}

@media (max-width:390px) {
  .card-art-category { display:none; }
  .cat-pill .cat-count { display:none; }
}

@media (prefers-reduced-motion:reduce) {
  #hub::before { animation:none !important; }
  .card-game:hover .card-emoji > .gicon,
  .card-game:hover .card-art-play { transform:none; }
}

/* ======================================================================
   v1.9.4 — CONSOLIDATED UI SYSTEM
   Canonical responsive layer: mobile, tablet, desktop and large desktop.
   ====================================================================== */

:root {
  --panel: var(--surface, var(--glass-bg));
  --ui-edge: clamp(12px, 2.4vw, 28px);
  --ui-gap: 14px;
  --ui-section: 20px;
  --rail-width: 216px;
  --content-max: 1600px;
  --surface: rgba(18,20,38,.94);
  --surface-soft: rgba(18,20,38,.82);
  --surface-strong: rgba(12,14,28,.98);
  --line: rgba(255,255,255,.10);
  --line-strong: rgba(255,255,255,.18);
  --shadow: 0 14px 36px rgba(0,0,0,.28);
  --tap: 46px;
}

html,body,#hub { width:100%; max-width:100%; overflow-x:clip; }
#hub,.screen,.hub-body,.hub-main,.hub-header,.hub-header-inner,.hero,.controls,.grid-head,.grid,.arcade-progress,.level-card,.mission-grid,.mission-card,.daily-reward-card,.arcade-insights,.insight-grid,.most-played,.starter-path,.player-bar,.stage-wrap,.stage,.sheet,.sheet-scroll { max-width:100%; min-width:0; box-sizing:border-box; }
.wordmark,.hero-copy,.feature-copy,.search-wrap,.grid-head,.level-copy,.mission-copy,.daily-reward-copy,.insight-card,.most-played-game,.reward-copy,.audio-control-head span { min-width:0; overflow-wrap:anywhere; }
body { background:#080a13; }
button,input { touch-action:manipulation; }

/* ---------- Background ---------- */
.ambient-stage {
  background:linear-gradient(180deg,#090b15 0%,#0b0e1b 48%,#080a13 100%);
}
.ambient-stage::before {
  background:url("visuals/arcade-vault-bg.webp") center top/cover no-repeat;
  opacity:.08;
  mix-blend-mode:normal;
  filter:saturate(.68) brightness(.55) contrast(.94);
  animation:none;
}
.ambient-stage::after,.ambient-orb,.ambient-stage .float-icon { display:none; }
.crt-veil { display:none; }

/* ---------- Global interaction ---------- */
.icon-btn,.chip,.surprise-chip,.cat-pill,.favorite-btn,.cont-card,.btn,.daily-reward-btn,.linkrow {
  min-height:var(--tap);
}
.favorite-btn { min-width:44px; min-height:44px; }
@media (hover:hover) and (pointer:fine) {
  .icon-btn:hover,.chip:hover,.cat-pill:hover,.cont-card:hover,.btn:hover,.favorite-btn:hover { transform:translateY(-1px); }
}

/* ---------- Header ---------- */
.hub-header {
  background:rgba(9,10,20,.96);
  border-bottom:1px solid var(--line);
  box-shadow:none;
  backdrop-filter:none;
}
.hub-header-inner {
  width:min(100%,var(--content-max));
  min-height:70px;
  padding:calc(10px + env(safe-area-inset-top)) var(--ui-edge) 10px;
}
.wordmark { font-size:clamp(1.2rem,1rem + 1vw,1.7rem); }
.wordmark span { color:#8fff85; background:none; -webkit-text-fill-color:currentColor; animation:none; }

/* ---------- Page geometry ---------- */
.hub-body {
  width:min(100%,var(--content-max));
  margin-inline:auto;
  padding:0 var(--ui-edge) calc(36px + env(safe-area-inset-bottom));
  gap:var(--ui-gap);
}
.hub-main {
  min-width:0;
  padding:var(--ui-section) 0 36px;
  display:flex;
  flex-direction:column;
  gap:var(--ui-gap);
}
.hub-main > * { min-width:0; max-width:100%; }

/* ---------- Category rail ---------- */
.rail {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--shadow);
  backdrop-filter:none;
}
.rail-cats { display:grid; gap:7px; }
.cat-pill {
  border:1px solid var(--line);
  background:rgba(255,255,255,.035);
  color:var(--muted);
  box-shadow:none;
  justify-content:flex-start;
}
.cat-pill[aria-selected="true"] {
  color:var(--text);
  background:color-mix(in srgb,var(--cat-a) 12%,var(--surface));
  border-color:color-mix(in srgb,var(--cat-a) 44%,var(--line));
}
.cat-label { display:flex; min-width:0; flex-direction:column; line-height:1.1; }
.cat-label strong { color:inherit; font-size:.82rem; font-weight:800; }
.cat-label small { margin-top:3px; color:var(--muted); font-size:.62rem; font-weight:700; }
.cat-count { margin-left:auto; min-width:24px; text-align:center; font-size:.66rem; color:var(--muted); }
.rail-stat { background:rgba(255,255,255,.025); border-color:var(--line); }
.rail-stat-num { color:#d8caff; }

/* ---------- Hero ---------- */
.hero {
  margin:0;
  min-width:0;
  background:linear-gradient(135deg,rgba(21,23,48,.98),rgba(13,15,31,.98));
  border:1px solid var(--line-strong);
  border-radius:22px;
  box-shadow:var(--shadow),inset 0 1px rgba(255,255,255,.05);
  backdrop-filter:none;
  overflow:hidden;
}
.hero::after { display:none; }
.hero-avatar { box-shadow:0 8px 24px rgba(0,0,0,.28); animation:none; }
.hero-eyebrow { color:#aeb5d0; }
.hero-name { color:#9eefff; }
.hero-line { font-size:clamp(1.08rem,.95rem + .55vw,1.65rem); font-weight:900; letter-spacing:-.025em; }
.hero-meta { font-size:.76rem; }
.feature-play {
  position:relative;
  min-width:0;
  text-align:left;
  border:1px solid var(--line-strong);
  background:rgba(255,255,255,.035);
  box-shadow:none;
  border-radius:17px;
  color:var(--text);
}
.feature-play::before,.feature-play::after { display:none; }
.feature-play-label { color:#8de8ff; font-size:.64rem; font-weight:900; letter-spacing:.12em; }
.feature-icon { flex:none; }
.feature-copy { min-width:0; }
.feature-copy strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.feature-copy small { display:block; color:var(--muted); line-height:1.35; }
.feature-cta { flex:none; min-height:38px; padding:0 14px; display:grid; place-items:center; border-radius:999px; background:#baff49; color:#10160a; font-size:.7rem; font-weight:950; }
.feature-arrow { display:none; }

/* ---------- Discovery ---------- */
.controls {
  margin:0;
  padding:0;
  display:grid;
  gap:10px;
}
.search-wrap {
  min-height:52px;
  width:100%;
  border-radius:14px;
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:none;
  backdrop-filter:none;
}
.search-wrap:focus-within { border-color:color-mix(in srgb,var(--accent) 58%,#fff 10%); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent); }
.pill-cats { margin:0; padding:0 0 3px; gap:7px; }
.pill-cats .cat-pill { min-height:44px; padding:0 12px; }
.pill-cats .cat-label small,.pill-cats .cat-count { display:none; }
.discovery-actions { display:flex; align-items:flex-end; gap:10px; min-width:0; }
.control-group { display:grid; gap:5px; }
.control-label { padding-left:4px; color:var(--muted); font-size:.61rem; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
.control-buttons { display:flex; gap:6px; }
.chip,.surprise-chip {
  min-height:44px;
  padding:0 13px;
  border-radius:12px;
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--muted);
  box-shadow:none;
  font-size:.76rem;
  white-space:nowrap;
}
.chip.is-active { background:color-mix(in srgb,var(--accent) 24%,var(--surface)); color:#fff; border-color:color-mix(in srgb,var(--accent) 55%,var(--line)); box-shadow:none; }
.surprise-chip { margin-left:auto; color:#d9ff98; border-color:rgba(186,255,73,.30); background:rgba(186,255,73,.075); font-weight:800; }

/* ---------- Continue / sections ---------- */
.continue,.grid-head,.grid,.empty,.starter-path,.arcade-progress,.seo-browse,.ad-slot { margin-left:0; margin-right:0; }
.section-label { color:#c8ccda; font-size:.82rem; font-weight:900; letter-spacing:-.01em; text-transform:none; }
.continue { margin:0; }
.continue-row { padding:7px 1px 4px; gap:9px; }
.cont-card { min-width:190px; border-radius:14px; border-color:var(--line); background:var(--surface-soft); box-shadow:none; }
.grid-head { margin:4px 0 0; align-items:center; }
.count { font-size:.72rem; }

/* ---------- Game cards ---------- */
.grid { margin:0; gap:12px; }
.game-card-wrap { position:relative; min-width:0; }
.card-game {
  width:100%;
  min-width:0;
  padding:0 0 12px;
  border-radius:16px;
  border:1px solid var(--line);
  background:var(--surface);
  box-shadow:0 8px 22px rgba(0,0,0,.23);
  gap:6px;
}
.card-game::before { display:none; }
.card-emoji { margin-bottom:9px; border-bottom:1px solid rgba(255,255,255,.055); }
.card-art-category { font-size:.64rem; }
.card-title { padding-inline:11px; font-size:.94rem; line-height:1.2; }
.card-desc { padding-inline:11px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.8em; font-size:.76rem; }
.card-foot { padding:4px 11px 0; justify-content:flex-start; flex-wrap:wrap; }
.card-foot .badge { font-size:.63rem; padding:4px 7px; }
.favorite-btn { position:absolute; top:8px; right:8px; width:44px; height:44px; display:grid; place-items:center; border-radius:999px; border:1px solid rgba(255,255,255,.16); background:rgba(8,10,20,.82); color:#fff; z-index:4; }

/* ---------- Progress / SEO ---------- */
.starter-path,.arcade-progress,.seo-browse { background:rgba(14,16,31,.72); border-color:var(--line); box-shadow:none; }
body.is-filtering-games .starter-path,body.is-filtering-games .arcade-progress,body.is-filtering-games .seo-browse,body.is-filtering-games #ad-hub { display:none; }
.seo-browse { border-radius:14px; }
.seo-browse summary { min-height:44px; display:flex; align-items:center; }

/* ---------- Player ---------- */
#player { width:100%; height:100dvh; max-height:100dvh; overflow:hidden; background:#070912; }
.player-bar {
  min-height:60px;
  padding:calc(8px + env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) 8px max(10px,env(safe-area-inset-left));
  gap:8px;
  background:rgba(9,10,20,.98);
  border-bottom:1px solid var(--line);
  box-shadow:none;
  backdrop-filter:none;
}
.player-title { flex:1 1 auto; min-width:0; }
#player-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.player-score { flex:0 1 auto; min-width:0; max-width:34vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.78rem; }
.stage-wrap { flex:1; min-height:0; width:100%; max-width:100%; padding:8px; overflow:hidden; }
.stage {
  flex:0 1 auto;
  width:auto;
  height:min(82dvh,100%);
  max-width:100%;
  max-height:100%;
  aspect-ratio:400/700;
  border-radius:14px;
  border:1px solid var(--line-strong);
  box-shadow:0 16px 38px rgba(0,0,0,.48);
}
#frame { width:100%; height:100%; max-width:100%; border:0; }
.landscape-note { display:none; }
.side-panel { background:var(--surface); border-color:var(--line); box-shadow:none; backdrop-filter:none; }
.dpad,.dpad-btn { display:none !important; visibility:hidden !important; pointer-events:none !important; }

/* ---------- Overlays / sheets ---------- */
.overlay { padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left)); background:rgba(2,3,9,.76); }
.sheet { width:min(100%,460px); max-height:calc(100dvh - 20px); border-radius:22px; background:var(--surface-strong); border-color:var(--line-strong); box-shadow:0 24px 60px rgba(0,0,0,.55); backdrop-filter:none; }
.sheet-tall { width:min(100%,560px); max-height:calc(100dvh - 20px); }
.sheet-scroll { overscroll-behavior:contain; }
.toggle-row.card,.audio-control-card,.card { border-color:var(--line); background:rgba(255,255,255,.035); }
.is-disabled { opacity:.48; cursor:not-allowed; }
.is-disabled:hover { transform:none; }
.audio-range:disabled { opacity:.45; cursor:not-allowed; }

/* ---------- Result hierarchy ---------- */
.result-sheet { width:min(100%,430px); max-width:430px; max-height:calc(100dvh - 20px); overflow:auto; }
.result-actions { display:flex; flex-direction:column; gap:8px; }
.result-play-again { order:1; min-height:54px; }
.result-rewards { order:2; display:grid; gap:7px; }
.result-rewards:empty { display:none; }
.result-next-game { order:3; min-height:48px; }
#r-share { order:4; min-height:44px; }
.result-share-tray { order:5; }
.result-challenge { width:100%; margin-top:8px; }
.result-exit { order:6; min-height:42px; background:transparent; border-color:transparent; color:var(--muted); }
.result-share-tray[hidden] { display:none !important; }

/* ---------- Responsive: phone ---------- */
@media (max-width:699px) {
  :root { --ui-edge:12px; --ui-gap:12px; --ui-section:10px; --tap:44px; }

  /* One mobile alignment system: header, hero, discovery, sections and grid
     all resolve to the same physical left/right gutter. */
  .hub-header-inner {
    min-height:60px;
    padding:calc(8px + env(safe-area-inset-top)) var(--ui-edge) 8px;
    align-items:center;
  }
  .hub-header .icon-btn { flex:none; width:44px; height:44px; }
  .wordmark { font-size:1.24rem; line-height:1; }
  .hub-body { display:block; padding-inline:0; }
  .rail { display:none; }
  .hub-main { width:100%; padding:10px var(--ui-edge) 28px; gap:12px; }
  .hub-main > * { width:100%; min-width:0; max-width:100%; }

  /* Compact featured area. The feature card is part of the hero, not a
     second full-size game card competing with the catalog. */
  .hero {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:10px;
    min-height:0;
    width:100%;
    padding:12px;
    border-radius:17px;
  }
  .hero-avatar,.hero-name { display:none; }
  .hero-copy { min-width:0; }
  .hero-eyebrow { margin:0; font-size:.62rem; line-height:1.25; letter-spacing:.12em; }
  .hero-line { margin:4px 0 0; font-size:1.12rem; line-height:1.12; }
  .hero-meta { margin-top:6px; font-size:.72rem; line-height:1.35; }
  .feature-play {
    display:grid;
    grid-template-columns:42px minmax(0,1fr) auto;
    grid-template-areas:"icon copy cta";
    align-items:center;
    gap:8px;
    width:100%;
    min-width:0;
    min-height:64px;
    padding:8px 9px;
    border-radius:14px;
  }
  .feature-play-label { display:none; }
  .feature-icon {
    grid-area:icon;
    width:42px; height:42px;
    display:grid; place-items:center;
    border-radius:11px;
    background:rgba(255,255,255,.05);
  }
  .feature-icon .gicon { width:32px; height:32px; }
  .feature-copy { grid-area:copy; min-width:0; }
  .feature-copy strong { font-size:.86rem; line-height:1.15; }
  .feature-copy small {
    margin-top:2px;
    font-size:.67rem;
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .feature-cta {
    grid-area:cta;
    min-width:54px;
    min-height:40px;
    padding:0 9px;
    font-size:.62rem;
  }

  /* Discovery: one full-width search, then two native horizontal rails.
     This prevents the old two-row/tall-Surprise geometry from looking skewed. */
  .controls { width:100%; gap:9px; }
  .search-wrap { width:100%; min-height:48px; }
  .pill-cats {
    display:flex;
    width:100%; max-width:100%;
    gap:7px;
    margin:0;
    padding:0 0 4px;
    overflow-x:auto; overflow-y:hidden;
    scroll-padding-inline:0;
    scrollbar-width:none;
  }
  .pill-cats::-webkit-scrollbar { display:none; }
  .pill-cats .cat-pill { flex:0 0 auto; min-height:44px; padding:0 11px; gap:7px; }
  .pill-cats .cat-label strong { font-size:.75rem; }

  .discovery-actions {
    display:flex;
    width:100%; max-width:100%;
    min-width:0;
    align-items:center;
    gap:6px;
    overflow-x:auto; overflow-y:hidden;
    padding:0 0 3px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .discovery-actions::-webkit-scrollbar { display:none; }
  .browse-group,.sort-group,.control-buttons { display:contents; }
  .control-label { display:none; }
  .chip,.surprise-chip {
    flex:0 0 auto;
    width:auto;
    min-width:68px;
    min-height:44px;
    margin:0;
    padding:0 11px;
    font-size:.7rem;
    border-radius:11px;
  }
  .surprise-chip {
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    gap:5px;
    min-width:96px;
  }
  .surprise-chip span:last-child { font-size:.68rem; }

  /* Sections share the same baseline and are deliberately separated by
     rhythm rather than different ad-hoc margins. */
  .continue,.grid-head,.grid,.empty,.starter-path,.arcade-progress,.seo-browse,.ad-slot { width:100%; }
  .section-label { font-size:.84rem; line-height:1.2; }
  .continue { margin:0; }
  .continue-row {
    width:100%;
    max-width:100%;
    overflow-x:auto; overflow-y:hidden;
    gap:8px;
    padding:5px 0 3px;
    scroll-padding-inline:0;
    scroll-snap-type:x proximity;
  }
  .cont-card {
    flex:0 0 clamp(224px,calc(100vw - 78px),300px);
    min-width:0;
    min-height:58px;
    padding:10px 12px;
    gap:10px;
    scroll-snap-align:start;
  }
  .cont-name { font-size:.82rem; }
  .cont-best { font-size:.68rem; }

  .grid-head { margin:1px 0 0; min-height:28px; align-items:center; }
  .count { flex:none; font-size:.7rem; }
  .grid { width:100%; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .game-card-wrap { min-width:0; }
  .card-game { width:100%; min-width:0; border-radius:13px; padding-bottom:9px; gap:4px; }
  .card-emoji {
    width:calc(100% - 12px);
    margin:6px 6px 7px;
    aspect-ratio:3/2;
    border-radius:10px;
  }
  .card-art-category { display:none; }
  .card-title {
    min-height:2.35em;
    padding-inline:8px;
    font-size:.82rem;
    line-height:1.18;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .card-desc { display:none; }
  .card-foot { min-height:20px; padding:2px 8px 0; gap:4px; align-items:center; }
  .card-foot .played { display:none; }
  .card-foot .badge { max-width:100%; font-size:.58rem; padding:3px 5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .favorite-btn {
    top:3px; right:3px;
    width:44px; height:44px;
    border:0;
    background:transparent;
    box-shadow:none;
  }
  .favorite-btn span {
    width:34px; height:34px;
    display:grid; place-items:center;
    margin:auto;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.16);
    background:rgba(5,7,16,.82);
  }

  .arcade-progress,.starter-path { padding:11px; }

  /* Player remains exactly as Step 82; only homepage geometry above changed. */
  .player-bar .icon-btn { min-width:44px; min-height:44px; }
  #player-icon { display:none; }
  #player-name { font-size:.8rem; }
  .player-score { font-size:.7rem; max-width:29vw; }
  #btn-fs { display:none; }
  .stage-wrap { padding:4px 4px calc(6px + env(safe-area-inset-bottom)); }
  .stage { height:min(80dvh,100%); max-width:100%; border-radius:10px; }
  .side-panel { display:none; }

  .sheet { border-radius:18px; }
  .sheet-bar { padding:14px 15px; }
  .sheet-scroll { padding:3px 14px 18px; }
  .group-label { margin-top:18px; }
  .result-sheet { padding:15px; }
  .result-share-actions { grid-template-columns:1fr; }
}

/* ---------- Responsive: very narrow phone ---------- */
@media (max-width:359px) {
  :root { --ui-edge:10px; }
  .hub-header-inner { padding-inline:var(--ui-edge); }
  .wordmark { font-size:1.18rem; }
  .hub-main { padding-top:8px; gap:10px; }
  .hero { padding:11px; gap:8px; }
  .hero-line { font-size:1.04rem; }
  .hero-meta { font-size:.68rem; }
  .feature-play { grid-template-columns:40px minmax(0,1fr) auto; min-height:60px; padding:7px 8px; }
  .feature-icon { width:40px; height:40px; }
  .feature-cta { min-width:50px; padding:0 7px; font-size:.58rem; }
  .pill-cats .cat-pill { padding-inline:10px; }
  .chip { min-width:64px; padding-inline:10px; }
  .surprise-chip { min-width:90px; }
  .cont-card { flex-basis:calc(100vw - 72px); max-width:276px; }
  .grid { gap:7px; }
  .card-title { font-size:.78rem; }
  .card-foot .badge { font-size:.55rem; }
  .favorite-btn span { width:32px; height:32px; }

  .player-bar { gap:5px; padding-inline:6px; }
  .player-bar .icon-btn { min-width:42px; width:42px; min-height:42px; height:42px; }
  #player-name { font-size:.75rem; }
  .player-score { font-size:.65rem; max-width:25vw; }
}

/* ---------- Responsive: tablet ---------- */
@media (min-width:700px) and (max-width:1079px) {
  :root { --ui-edge:18px; }
  .hub-body { display:block; }
  .rail { display:none; }
  .hero { display:grid; grid-template-columns:70px minmax(0,1fr) minmax(250px,310px); align-items:center; gap:18px; }
  .hero-avatar { width:68px; height:68px; }
  .feature-play { min-height:92px; display:grid; grid-template-columns:46px minmax(0,1fr); gap:10px; padding:12px; }
  .feature-cta { position:absolute; right:10px; bottom:10px; }
  .controls { grid-template-columns:minmax(280px,1fr) auto; align-items:end; }
  .search-wrap { grid-column:1; }
  .pill-cats { grid-column:1/-1; }
  .discovery-actions { grid-column:2; grid-row:1; }
  .control-label { display:none; }
  .grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .continue-row { overflow-x:auto; }
  .cont-card { flex:0 0 210px; }
}

/* ---------- Responsive: desktop ---------- */
@media (min-width:1080px) {
  :root { --ui-edge:36px; --ui-gap:14px; --rail-width:216px; }
  .hub-header-inner { padding-left:var(--ui-edge); padding-right:var(--ui-edge); }
  .hub-body {
    display:grid;
    grid-template-columns:var(--rail-width) minmax(0,1fr);
    column-gap:20px;
    padding-left:var(--ui-edge);
    padding-right:var(--ui-edge);
    align-items:start;
  }
  .rail {
    display:block;
    position:sticky;
    top:86px;
    margin-top:20px;
    padding:13px;
    align-self:start;
  }
  .pill-cats { display:none; }
  .hub-main { padding-top:20px; }
  .hero { display:grid; grid-template-columns:88px minmax(0,1fr) minmax(290px,350px); align-items:center; gap:22px; min-height:174px; padding:20px 24px; }
  .hero-avatar { width:84px; height:84px; border-radius:22px; }
  .feature-play { min-height:112px; padding:14px; display:grid; grid-template-columns:48px minmax(0,1fr); grid-template-rows:auto 1fr; gap:8px 11px; }
  .feature-play-label { grid-column:1/-1; }
  .feature-icon { grid-column:1; }
  .feature-copy { grid-column:2; }
  .feature-copy strong { font-size:.96rem; }
  .feature-copy small { font-size:.72rem; margin-top:4px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .feature-cta { position:absolute; right:12px; bottom:12px; }
  .controls { grid-template-columns:minmax(320px,1fr) auto; align-items:end; gap:12px; }
  .search-wrap { grid-column:1; }
  .discovery-actions { grid-column:2; }
  .grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .continue-row { display:flex; overflow-x:auto; }
  .cont-card { flex:0 0 200px; }
  .side-panel { display:block; flex:0 0 min(310px,24vw); max-width:310px; }
}

@media (min-width:1450px) {
  .grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
  .continue-row { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); overflow:visible; }
  .cont-card { min-width:0; width:100%; }
}

@media (min-width:1900px) {
  .grid { grid-template-columns:repeat(6,minmax(0,1fr)); }
}

/* ---------- Short landscape phone ---------- */
@media (max-width:900px) and (orientation:landscape) and (max-height:520px) {
  .player-bar { min-height:50px; padding-top:max(5px,env(safe-area-inset-top)); padding-bottom:5px; }
  .stage-wrap { padding:3px 8px calc(3px + env(safe-area-inset-bottom)); }
  .stage { height:calc(100dvh - 60px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); max-height:100%; }
  .landscape-note { display:block; position:absolute; z-index:4; top:60px; left:50%; transform:translateX(-50%); padding:5px 9px; border-radius:999px; background:rgba(7,9,18,.82); color:#d6d9e7; font-size:.65rem; pointer-events:none; }
}

@media (prefers-reduced-motion:reduce) {
  .hero,.card-game,.cont-card,.sheet,.stage,.reward-celebration { animation:none !important; transition:none !important; }
}

/* ======================================================================
   v1.9.4 — NATIVE MOBILE SCROLLING
   Never intercept mobile scrolling with pointer capture/preventDefault.
   ====================================================================== */
html, body {
  overscroll-behavior-x: none;
  overscroll-behavior-y: auto;
  touch-action: auto;
}

/* Horizontal discovery rails use the browser's native momentum scroller.
   Vertical gestures can naturally bubble into the page. */
.pill-cats,
.discovery-actions,
.continue-row,
.achievement-strip,
.sorts {
  overflow-x: auto;
  overflow-y: hidden;
  touch-action: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
  scrollbar-width: none;
  scroll-behavior: auto;
}
.pill-cats::-webkit-scrollbar,
.discovery-actions::-webkit-scrollbar,
.continue-row::-webkit-scrollbar,
.achievement-strip::-webkit-scrollbar,
.sorts::-webkit-scrollbar { display:none; }

@media (max-width:699px) {
  .pill-cats { scroll-snap-type:x proximity; }
  .pill-cats > .cat-pill { scroll-snap-align:start; }
  .continue-row { scroll-snap-type:x proximity; }
  .continue-row > .cont-card { scroll-snap-align:start; }
}

/* CSS-only press feedback; does not participate in gesture handling. */
@media (hover:none) and (pointer:coarse) {
  :where(.cat-pill,.chip,.surprise-chip,.feature-play,.cont-card,.card-game,.favorite-btn,.icon-btn,.daily-reward-btn):active {
    transform:scale(.975);
  }
}

/* ======================================================================
   v1.9.5 — MOBILE VISIBILITY & SAFE-LAYOUT FINAL OVERRIDE
   Purpose: every important UI element remains readable, tappable and
   reachable on 320px–699px phones without horizontal page overflow.
   ====================================================================== */
@media (max-width:699px) {
  :root {
    --mobile-edge: max(10px, env(safe-area-inset-left));
    --mobile-edge-r: max(10px, env(safe-area-inset-right));
    --mobile-text: .78rem;
  }

  html, body, #hub, #player {
    width:100%;
    max-width:100%;
    overflow-x:clip;
  }

  body {
    min-width:0;
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
  }

  /* Keep all major content inside the physical viewport. */
  .hub-header-inner,
  .hub-body,
  .hub-main,
  .hero,
  .controls,
  .search-wrap,
  .pill-cats,
  .discovery-actions,
  .continue,
  .continue-row,
  .grid-head,
  .grid,
  .starter-path,
  .arcade-progress,
  .daily-reward-card,
  .mission-grid,
  .achievement-strip,
  .arcade-insights,
  .insight-grid,
  .most-played,
  .seo-browse,
  .ad-slot,
  .player-bar,
  .stage-wrap,
  .stage,
  .sheet,
  .sheet-scroll,
  .result-sheet {
    min-width:0;
    max-width:100%;
    box-sizing:border-box;
  }

  /* Header */
  .hub-header-inner {
    padding-left:max(10px,env(safe-area-inset-left));
    padding-right:max(10px,env(safe-area-inset-right));
    gap:8px;
  }
  .wordmark {
    min-width:0;
    font-size:clamp(1.08rem,5vw,1.28rem);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .hub-header .icon-btn {
    width:44px;
    min-width:44px;
    height:44px;
    min-height:44px;
  }

  /* Hero: show meaningful copy and prevent CTA clipping. */
  .hero {
    overflow:visible;
  }
  .hero-copy,
  .feature-copy {
    min-width:0;
  }
  .hero-line,
  .hero-meta,
  .feature-copy strong,
  .feature-copy small {
    overflow-wrap:anywhere;
  }
  .feature-copy small {
    white-space:normal;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    line-height:1.3;
  }
  .feature-cta {
    position:static;
    flex:none;
    min-width:56px;
    white-space:nowrap;
  }

  /* Search / discovery */
  #search {
    min-width:0;
    font-size:16px; /* prevents iOS zoom */
  }
  .search-clear {
    min-width:44px;
    min-height:44px;
  }
  .pill-cats,
  .discovery-actions,
  .continue-row,
  .achievement-strip {
    scroll-padding-inline:2px;
  }
  .cat-pill,
  .chip,
  .surprise-chip,
  .daily-reward-btn,
  .social-icon-btn,
  .btn,
  .linkrow,
  .toggle-row {
    min-height:44px;
  }

  /* Game cards: descriptions stay visible and readable on mobile. */
  .card-game {
    min-height:0;
    overflow:hidden;
  }
  .card-title {
    min-height:0;
    font-size:clamp(.80rem,3.4vw,.90rem);
    line-height:1.25;
  }
  .card-desc {
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
    min-height:2.55em;
    padding-inline:8px;
    font-size:clamp(.66rem,2.7vw,.74rem);
    line-height:1.32;
    color:color-mix(in srgb,var(--text) 72%,var(--muted));
  }
  .card-foot {
    min-height:24px;
  }
  .card-foot .badge {
    line-height:1.2;
  }

  /* Progress / missions */
  .level-card {
    flex-wrap:wrap;
  }
  .level-copy {
    flex:1 1 150px;
  }
  .level-row {
    width:100%;
  }
  .streak-pill {
    flex:none;
  }
  .daily-reward-card {
    gap:9px;
  }
  .daily-reward-copy strong,
  .daily-reward-copy small,
  .mission-copy strong,
  .mission-copy span,
  .insight-card small,
  .most-played-game strong,
  .most-played-game small {
    white-space:normal;
    overflow-wrap:anywhere;
  }
  .mission-card,
  .insight-card,
  .most-played-game {
    min-width:0;
  }

  /* Player toolbar: keep Back, title, score, fullscreen and pause reachable. */
  #player {
    height:100dvh;
    min-height:100dvh;
  }
  .player-bar {
    display:grid;
    grid-template-columns:40px minmax(0,1fr) auto 40px 40px;
    min-height:56px;
    padding:
      calc(6px + env(safe-area-inset-top))
      max(6px,env(safe-area-inset-right))
      6px
      max(6px,env(safe-area-inset-left));
    gap:4px;
    align-items:center;
  }
  .player-bar .icon-btn {
    width:40px;
    min-width:40px;
    height:40px;
    min-height:40px;
    padding:0;
  }
  .player-title {
    min-width:0;
    overflow:hidden;
  }
  #player-icon {
    display:none;
  }
  #player-name {
    display:block;
    min-width:0;
    font-size:.72rem;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .player-score {
    margin-left:0;
    max-width:74px;
    min-width:0;
    font-size:.62rem;
    line-height:1.15;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  #btn-fs {
    display:inline-flex;
  }

  /* Use all remaining vertical space for the actual game. */
  .stage-wrap {
    position:relative;
    flex:1 1 auto;
    min-height:0;
    padding:4px max(4px,env(safe-area-inset-right))
            calc(5px + env(safe-area-inset-bottom))
            max(4px,env(safe-area-inset-left));
    align-items:center;
    overflow:hidden;
  }
  .stage {
    width:min(100%, calc((100dvh - 72px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 4 / 7));
    height:auto;
    max-height:100%;
    aspect-ratio:4/7;
    margin:auto;
    border-radius:10px;
  }
  #frame {
    width:100%;
    height:100%;
    max-width:100%;
    max-height:100%;
  }

  /* Dialogs/settings/results: every control remains reachable by scrolling. */
  .overlay {
    align-items:center;
    overflow:hidden;
  }
  .sheet,
  .sheet-tall,
  .result-sheet {
    width:100%;
    max-width:min(100%,460px);
    max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px);
    overflow:hidden;
  }
  .sheet-tall {
    display:flex;
    flex-direction:column;
  }
  .sheet-scroll,
  .result-sheet {
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  .sheet-scroll {
    flex:1 1 auto;
    min-height:0;
  }
  .sheet-bar,
  .sheet-foot {
    flex:none;
  }
  .sheet-bar {
    padding:12px 13px;
  }
  .sheet-foot {
    padding:10px 13px calc(10px + env(safe-area-inset-bottom));
  }
  .result-sheet {
    padding:13px;
  }
  .result-head {
    margin-bottom:8px;
  }
  .score-main {
    font-size:clamp(2.15rem,12vw,3rem);
  }
  .result-actions {
    gap:7px;
  }
  .social-share-row {
    gap:6px;
  }
  .social-icon-btn {
    min-height:44px;
    max-height:none;
  }

  /* Settings: long labels should wrap instead of disappearing. */
  .toggle-row,
  .audio-control-head,
  .linkrow {
    min-width:0;
  }
  .toggle-row > span:first-child,
  .audio-control-head > span:first-child {
    min-width:0;
    flex:1 1 auto;
  }
  .toggle-row span strong,
  .toggle-row span small,
  .audio-control-head strong,
  .audio-control-head small,
  .card-body {
    white-space:normal;
    overflow-wrap:anywhere;
  }
  .switch {
    flex:none;
  }

  /* SEO / legal text */
  .seo-browse,
  .seo-browse-copy,
  .seo-browse-links,
  .card-body {
    overflow-wrap:anywhere;
  }
}

/* Extra protection for 320–359px devices. */
@media (max-width:359px) {
  .grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px;
  }
  .card-game {
    border-radius:11px;
  }
  .card-title {
    font-size:.76rem;
    padding-inline:6px;
  }
  .card-desc {
    font-size:.63rem;
    padding-inline:6px;
  }
  .player-bar {
    grid-template-columns:38px minmax(0,1fr) auto 38px 38px;
    gap:2px;
  }
  .player-bar .icon-btn {
    width:38px;
    min-width:38px;
    height:38px;
    min-height:38px;
    font-size:.88rem;
  }
  .player-score {
    max-width:58px;
    font-size:.56rem;
  }
  #player-name {
    font-size:.66rem;
  }
  .sheet,
  .sheet-tall,
  .result-sheet {
    border-radius:14px;
  }
  .social-share-row {
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:4px;
  }
}

/* Short landscape phones: preserve controls and maximize game area. */
@media (max-width:900px) and (orientation:landscape) and (max-height:520px) {
  .player-bar {
    grid-template-columns:38px minmax(0,1fr) auto 38px 38px;
    min-height:46px;
    padding-top:max(3px,env(safe-area-inset-top));
    padding-bottom:3px;
  }
  .player-bar .icon-btn {
    width:38px;
    min-width:38px;
    height:38px;
    min-height:38px;
  }
  .stage-wrap {
    padding:2px 6px calc(2px + env(safe-area-inset-bottom));
  }
  .stage {
    width:auto;
    height:calc(100dvh - 54px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    max-width:100%;
    max-height:100%;
  }
}

/* ======================================================================
   v1.9.6 — AUTHORITATIVE MOBILE HERO FIX
   Replaces all earlier mobile hero/grid behavior on phones.
   ====================================================================== */
@media (max-width:699px) {

  .hero {
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:12px !important;

    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    min-height:0 !important;

    padding:16px !important;
    margin:0 0 14px !important;

    overflow:hidden !important;
  }

  .hero-avatar {
    display:none !important;
  }

  .hero-copy {
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    display:block !important;
    position:relative !important;
    z-index:2 !important;
  }

  .hero-eyebrow {
    margin:0 0 6px !important;
    font-size:.62rem !important;
    line-height:1.3 !important;
    letter-spacing:.12em !important;
  }

  .hero-line {
    margin:0 !important;
    font-size:1.12rem !important;
    line-height:1.25 !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
  }

  .hero-meta {
    margin:6px 0 0 !important;
    font-size:.72rem !important;
    line-height:1.35 !important;
    white-space:normal !important;
  }

  .feature-play {
    position:relative !important;

    display:grid !important;
    grid-template-columns:48px minmax(0,1fr) auto !important;
    grid-template-areas:"icon copy cta" !important;

    align-items:center !important;
    column-gap:10px !important;
    row-gap:0 !important;

    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    min-height:68px !important;

    margin:0 !important;
    padding:10px 12px !important;

    border-radius:14px !important;
    overflow:hidden !important;
  }

  .feature-play-label {
    display:none !important;
  }

  .feature-icon {
    grid-area:icon !important;

    width:46px !important;
    height:46px !important;
    min-width:46px !important;

    display:grid !important;
    place-items:center !important;

    margin:0 !important;
    font-size:1.35rem !important;
  }

  .feature-copy {
    grid-area:copy !important;

    display:block !important;
    min-width:0 !important;
    max-width:100% !important;
    overflow:hidden !important;
  }

  .feature-copy strong {
    display:block !important;

    min-width:0 !important;
    max-width:100% !important;

    font-size:.9rem !important;
    line-height:1.25 !important;

    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  .feature-copy small {
    display:block !important;

    min-width:0 !important;
    max-width:100% !important;

    margin-top:3px !important;

    font-size:.68rem !important;
    line-height:1.3 !important;

    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  .feature-cta {
    grid-area:cta !important;

    position:static !important;
    inset:auto !important;

    display:inline-grid !important;
    place-items:center !important;

    min-width:64px !important;
    min-height:40px !important;

    margin:0 !important;
    padding:0 12px !important;

    font-size:.66rem !important;
    line-height:1 !important;

    white-space:nowrap !important;
  }

  .feature-arrow {
    display:none !important;
  }
}

/* Extra-small phones */
@media (max-width:359px) {

  .hero {
    padding:12px !important;
    gap:10px !important;
  }

  .hero-line {
    font-size:1rem !important;
  }

  .feature-play {
    grid-template-columns:42px minmax(0,1fr) 58px !important;
    min-height:62px !important;
    padding:8px 9px !important;
    column-gap:8px !important;
  }

  .feature-icon {
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    font-size:1.2rem !important;
  }

  .feature-copy strong {
    font-size:.82rem !important;
  }

  .feature-copy small {
    font-size:.62rem !important;
  }

  .feature-cta {
    min-width:58px !important;
    min-height:38px !important;
    padding:0 8px !important;
    font-size:.61rem !important;
  }
}


/* Phase 10.2: live-site UI contract. Core rules above are the deployed Midnight Arcade UI. */
.skip-link{position:fixed;left:12px;top:8px;z-index:10000;transform:translateY(-160%);padding:10px 14px;border-radius:10px;background:#fff;color:#111;font-weight:900;text-decoration:none}
.skip-link:focus{transform:translateY(0)}
.live-brand-copy{display:grid;gap:1px;margin-left:10px;min-width:0}
.live-brand-copy span{font-size:.68rem;font-weight:800;color:var(--muted);white-space:nowrap}
.live-brand-copy small{font-size:.58rem;color:var(--muted);opacity:.72;white-space:nowrap}
.live-quick-picks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:-2px}
.live-quick-pick{min-height:46px;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;align-items:center;text-align:left;padding:8px 10px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(255,255,255,.035);color:inherit;cursor:pointer}
.live-quick-pick small{grid-column:1;font-size:.56rem;color:var(--muted);font-weight:850}
.live-quick-pick strong{grid-column:1;font-size:.76rem;line-height:1.2}
.live-quick-pick>span{grid-column:2;grid-row:1/3;font-size:1.1rem}
@media(max-width:700px){.live-brand-copy{display:none}.live-quick-picks{gap:6px}.live-quick-pick{min-height:44px;padding:7px 9px}}
@media(forced-colors:active){.skip-link,.live-quick-pick{border:1px solid CanvasText}}


/* Hand Cricket V2.2 — full-width stadium cabinet. The other arcade games retain
   their portrait cabinet; this flagship uses the entire remaining player area. */
#player.is-hand-cricket .stage-wrap{
  padding:0!important;
  align-items:stretch!important;
  justify-content:stretch!important;
}
#player.is-hand-cricket .stage{
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  aspect-ratio:auto!important;
  margin:0!important;
  border-radius:0!important;
  border:0!important;
  box-shadow:none!important;
  flex:1 1 auto!important;
}
#player.is-hand-cricket #frame{
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
}
@media (max-width:700px){
  #player.is-hand-cricket .stage-wrap{padding:0!important}
  #player.is-hand-cricket .stage{width:100%!important;height:100%!important;aspect-ratio:auto!important}
}

/* Snake Reborn Flagship V2 — responsive stadium cabinet. Like Hand Cricket,
   Snake uses the entire player area; the game itself adapts with a central
   arena plus contextual side rails instead of a narrow portrait letterbox. */
#player.is-snake .stage-wrap{padding:0!important;align-items:stretch!important;justify-content:stretch!important}
#player.is-snake .stage{width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;aspect-ratio:auto!important;margin:0!important;border-radius:0!important;border:0!important;box-shadow:none!important;flex:1 1 auto!important}
#player.is-snake #frame{width:100%!important;height:100%!important;max-width:none!important;max-height:none!important}
@media(max-width:700px){#player.is-snake .stage-wrap{padding:0!important}#player.is-snake .stage{width:100%!important;height:100%!important;aspect-ratio:auto!important}}

/* Universal responsive player shell v103 — every playable title receives the
   full Bhuchi player area. Portrait games use game-responsive-v103 inside the
   iframe to turn spare width into useful game-specific side rails. */
#player.is-fluid-game .stage-wrap{padding:0!important;align-items:stretch!important;justify-content:stretch!important}
#player.is-fluid-game .stage{width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;aspect-ratio:auto!important;margin:0!important;border-radius:0!important;border:0!important;box-shadow:none!important;flex:1 1 auto!important}
#player.is-fluid-game #frame{width:100%!important;height:100%!important;max-width:none!important;max-height:none!important}
@media(max-width:700px){#player.is-fluid-game .stage-wrap{padding:0!important}#player.is-fluid-game .stage{width:100%!important;height:100%!important;aspect-ratio:auto!important}}

/* Stack Tower Flagship V1 — give its own responsive canvas/side panels the full cabinet. */
#player.is-stack-tower .stage-wrap{padding:0!important;align-items:stretch!important;justify-content:stretch!important}
#player.is-stack-tower .stage{width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;aspect-ratio:auto!important;margin:0!important;border-radius:0!important;border:0!important;box-shadow:none!important;flex:1 1 auto!important}
#player.is-stack-tower #frame{width:100%!important;height:100%!important;max-width:none!important;max-height:none!important}
@media(max-width:700px){#player.is-stack-tower .stage-wrap{padding:0!important}#player.is-stack-tower .stage{width:100%!important;height:100%!important;aspect-ratio:auto!important}}


/* Hand Cricket Immersive V108 — the stadium is the experience.
   The generic desktop HOW TO PLAY rail and first-run modal are intentionally
   not part of active Hand Cricket play. Help remains available from Pause. */
#player.is-hand-cricket .side-panel{
  display:none!important;
  width:0!important;
  flex:0 0 0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
}
#player.is-hand-cricket .stage-wrap{
  gap:0!important;
}

/* Hand Cricket already renders its own score, teams, target and match state.
   On wider screens the Bhuchi controls float above the stadium instead of
   consuming a permanent row of viewport height. */
@media (min-width:900px){
  #player.is-hand-cricket{
    position:relative;
  }
  #player.is-hand-cricket .player-bar{
    position:absolute!important;
    z-index:40;
    top:max(10px,env(safe-area-inset-top));
    left:max(10px,env(safe-area-inset-left));
    right:max(10px,env(safe-area-inset-right));
    width:auto;
    min-height:0!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
    pointer-events:none;
    animation:none!important;
  }
  #player.is-hand-cricket .player-bar .player-title,
  #player.is-hand-cricket .player-bar .player-score{
    display:none!important;
  }
  #player.is-hand-cricket .player-bar .icon-btn{
    pointer-events:auto;
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    min-height:44px!important;
    border:1px solid rgba(255,255,255,.20)!important;
    border-radius:14px!important;
    background:rgba(5,8,16,.60)!important;
    color:#fff!important;
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
    box-shadow:0 8px 24px rgba(0,0,0,.28)!important;
  }
  #player.is-hand-cricket #btn-back{margin-right:auto!important}
  #player.is-hand-cricket .challenge-target{
    position:absolute;
    z-index:39;
    top:max(12px,env(safe-area-inset-top));
    left:50%;
    transform:translateX(-50%);
    margin:0!important;
    max-width:min(520px,48vw);
    pointer-events:none;
  }
  #player.is-hand-cricket .stage-wrap{
    width:100%!important;
    height:100dvh!important;
    flex:1 1 100%!important;
  }
}

/* If Help is opened manually, use the screen as a responsive guide rather
   than a narrow desktop card. It is temporary and never opens automatically. */
#player.is-hand-cricket ~ #tutorial .sheet-tall{max-width:540px}


/* Hand Cricket Immersive V109 — hard full-browser-content viewport. */
html.hand-cricket-active #player.is-hand-cricket .side-panel{display:none!important}
html.hand-cricket-active #player.is-hand-cricket .stage-wrap{position:absolute!important;inset:0!important;width:100vw!important;height:100dvh!important;padding:0!important;gap:0!important}
html.hand-cricket-active #player.is-hand-cricket .stage{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;aspect-ratio:auto!important;border:0!important;border-radius:0!important}


/* Space Blaster Flagship V1 — full-browser battlefield. The shooter renders its
   own cockpit and full-viewport starfield, so generic instructions/chrome must
   not consume permanent desktop space. Help remains available from Pause. */
#player.is-space-blaster .side-panel{display:none!important;width:0!important;flex:0 0 0!important;margin:0!important;padding:0!important;border:0!important}
#player.is-space-blaster .stage-wrap{padding:0!important;gap:0!important;align-items:stretch!important;justify-content:stretch!important}
#player.is-space-blaster .stage,#player.is-space-blaster #frame{width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;aspect-ratio:auto!important;margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important}
@media(min-width:900px){
  #player.is-space-blaster{position:relative}
  #player.is-space-blaster .player-bar{position:absolute!important;z-index:40;top:max(10px,env(safe-area-inset-top));left:max(10px,env(safe-area-inset-left));right:max(10px,env(safe-area-inset-right));padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;pointer-events:none}
  #player.is-space-blaster .player-title,#player.is-space-blaster .player-score{display:none!important}
  #player.is-space-blaster .player-bar .icon-btn{pointer-events:auto;width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;border:1px solid rgba(255,255,255,.18)!important;border-radius:14px!important;background:rgba(4,8,22,.58)!important;color:#fff!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 8px 24px rgba(0,0,0,.28)!important}
  #player.is-space-blaster #btn-back{margin-right:auto!important}
  #player.is-space-blaster .stage-wrap{width:100%!important;height:100dvh!important;flex:1 1 100%!important}
}
html.space-blaster-active #player.is-space-blaster .stage-wrap{position:absolute!important;inset:0!important;width:100vw!important;height:100dvh!important;padding:0!important;gap:0!important}

/* V151: the tutorial and Pause > Help are the single instruction surfaces. */
#player.is-fluid-game .side-panel{display:none!important;width:0!important;max-width:0!important;flex:0 0 0!important;margin:0!important;padding:0!important;border:0!important}
#player.is-fluid-game .stage-wrap{gap:0!important}
html.space-blaster-active #player.is-space-blaster .stage{position:absolute!important;inset:0!important;width:100%!important;height:100%!important}

/* V149: honest, readable single-stage game launch card. */
.game-load-card{gap:12px!important;padding:22px!important}
.game-load-cover{position:relative;width:min(220px,62vw);aspect-ratio:4/3;overflow:hidden;border-radius:20px;border:1px solid color-mix(in srgb,var(--load-accent) 48%,rgba(255,255,255,.16));background:#11172a;box-shadow:0 20px 42px rgba(0,0,0,.4),0 0 30px color-mix(in srgb,var(--load-accent) 18%,transparent)}
.game-load-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.game-load-fallback{position:absolute;inset:0;display:grid;place-items:center}
.game-load-kicker{font-size:.7rem!important;letter-spacing:.16em!important}
.game-load-title{font-size:clamp(1.45rem,1.12rem + 1.2vw,1.9rem)!important}
.game-load-card>.game-load-goal{max-width:360px;font-size:.88rem!important;line-height:1.5!important}
.game-load-control b{font-size:.64rem!important}
.game-load-control em{font-size:.82rem!important}
.game-load-card small{font-size:.67rem!important;letter-spacing:.06em!important}
@media(max-width:520px){.game-load-cover{width:min(190px,58vw)}.game-load-card{padding:18px 15px!important}.game-load-card>.game-load-goal{font-size:.82rem!important}}