/* ==========================================================================
   Pro Arcade — "Prism" light premium design system
   ========================================================================== */
:root{
  --bg:            #f5f5fa;
  --surface:       #ffffff;
  --surface-solid: #ffffff;
  --surface-2:     #f0f0f7;
  --edge:          rgba(22,22,50,.07);
  --edge-strong:   rgba(22,22,50,.13);
  --ink:           #15152e;
  --muted:         #6c6e8a;
  --muted-2:       #a0a2ba;

  --violet:        #6c4bff;
  --violet-2:      #8f76ff;
  --violet-deep:   #3f26c9;
  --cyan:          #0ea5e9;
  --pink:          #ff4d8d;
  --gold:          #f5a623;
  --gold-2:        #ff8a00;
  --gold-ink:      #b86e00;
  --green:         #10b981;
  --rose:          #ef4444;

  --shadow-sm: 0 1px 2px rgba(22,22,50,.05), 0 8px 18px -10px rgba(22,22,50,.14);
  --shadow-md: 0 2px 4px rgba(22,22,50,.04), 0 22px 40px -20px rgba(22,22,50,.26);

  --r-sm: 14px; --r-md: 18px; --r-lg: 24px; --r-xl: 30px;

  --app-w: 430px;
  /* Telegram's Android client draws its own top bar (account switcher / close / menu) OVER the WebView instead of
     resizing it — so on Android, 100vh/100dvh can report space the app cannot actually use, cutting off whatever sits
     at the bottom (the nav bar, the last bit of a scrolling list). Telegram's own JS keeps --tg-viewport-stable-height
     in sync with the space that is genuinely free (both platforms; harmless where it isn't set, e.g. a plain browser). */
  --app-vh: var(--tg-viewport-stable-height, 100dvh);
  /* Safe areas. In full-screen Telegram draws its own buttons over the top of the app, so the top space is
     device inset (notch / status bar) + Telegram's content inset. max() takes the larger of the browser's and Telegram's
     value for the DEVICE part, so the notch is never counted twice. */
  --safe-t: calc(max(env(safe-area-inset-top, 0px), var(--tg-safe-area-inset-top, 0px)) + var(--tg-content-safe-area-inset-top, 0px));
  --safe-b: max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px));
  --safe-l: max(env(safe-area-inset-left, 0px), var(--tg-safe-area-inset-left, 0px));
  --safe-r: max(env(safe-area-inset-right, 0px), var(--tg-safe-area-inset-right, 0px));
}

*{ -webkit-tap-highlight-color:transparent; box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
/* overflow-x MUST be set on both html and body together, not just one: a mobile browser only backs off its own
   "shrink the whole page to fit whatever's widest" zoom when it can see BOTH ancestors have overflow explicitly
   handled — with only one set, the off-canvas side drawer (closed, sitting past the right edge on purpose) still
   triggers that zoom, and the entire app renders slightly shrunk with a blank strip down one side (confirmed by
   testing exactly this split, real Chromium/WebKit, real content: it brought the shrinking back).
   USE `clip`, NOT `hidden`: a real Android bug (2026-09-23) was root-caused to `overflow-x:hidden` on html/body —
   setting it to non-`visible` forces the coupled `overflow-y` to become an explicit scroll container even though it
   was never written, which on some Android Chrome/WebView builds breaks touch-driven scrolling for normal in-flow
   content while leaving position:fixed elements (like the bottom nav) unaffected — exactly matching a real report of
   "scrolling works from the bottom nav but not from anywhere else". Root-caused via bisection: isolated to this exact
   rule, then to this exact property, confirmed fixed by switching to `clip`, which clips the same overflow without
   turning html/body into a real scroll container. `clip` needs Chrome 90+ / Safari 16+ (long ubiquitous); the
   @supports rule below is a no-op safety net for anything older, keeping the old (safe but scroll-breaking) behavior
   only where `clip` truly isn't available. Never change this back to `hidden`. */
html,body{ min-height:100%; background:var(--bg); overflow-x:hidden; }
@supports (overflow-x: clip){
  html,body{ overflow-x:clip; }
}
/* Off-canvas panels (the side drawer, the game player before it fades in, …) sit past the right edge on purpose while
   closed; without this, some mobile browsers treat that as "the page is wider than the screen" and zoom the whole
   app out to fit it — shrinking everything and leaving a blank strip down one side. Only X is clipped; Y still scrolls. */
html.lock-scroll, html.lock-scroll body{ overflow:hidden; }
html{ overscroll-behavior-y:none; }
body{
  font-family:'Inter',ui-sans-serif,system-ui,sans-serif;
  color:var(--ink);
  overscroll-behavior-y:none;
  -webkit-font-smoothing:antialiased;
  -webkit-touch-callout:none;
  touch-action:manipulation;
}
button, a, [data-goto], [data-open-game]{ -webkit-user-select:none; user-select:none; touch-action:manipulation; }
input, textarea{ -webkit-user-select:text; user-select:text; }
:focus-visible{ outline:2px solid var(--violet); outline-offset:2px; }
::-webkit-scrollbar{ display:none; }
*{ scrollbar-width:none; }

.font-display{ font-family:'Outfit','Inter',sans-serif; letter-spacing:-.015em; }

/* ==========================================================================
   Background — soft colour washes
   ========================================================================== */
.bg-app{
  background:
    radial-gradient(70% 34% at 8% -6%, rgba(108,75,255,.13), transparent 62%),
    radial-gradient(60% 30% at 100% 2%, rgba(14,165,233,.10), transparent 60%),
    var(--bg);
}

/* ==========================================================================
   Text utilities
   ========================================================================== */
.text-muted{ color:var(--muted); }
.text-muted-2{ color:var(--muted-2); }
.text-violet{ color:var(--violet); }
.text-cyan{ color:#0284c7; }
.text-gold{ color:var(--gold-ink); }
.text-good{ color:#059669; }
.text-bad{ color:var(--rose); }

/* ==========================================================================
   Header icon buttons — bare icons, no bubble
   ========================================================================== */
.icon-btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px;
  color:var(--ink);
  border-radius:12px;
  transition:background .15s ease, transform .15s ease;
}
.icon-btn:active{ background:rgba(22,22,50,.07); transform:scale(.94); }
.icon-btn .dot{ position:absolute; right:9px; top:9px; width:7px; height:7px; border-radius:99px; background:var(--pink); box-shadow:0 0 0 2px var(--bg); }

.logo-mark{
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:12px; flex-shrink:0;
  background:linear-gradient(140deg,var(--violet-2),var(--violet) 55%,#4a2fe0);
  box-shadow:0 8px 18px -8px rgba(108,75,255,.65), inset 0 1px 0 rgba(255,255,255,.35);
}

.coin-pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px 5px 6px;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--edge);
  box-shadow:var(--shadow-sm);
  font-size:12.5px; font-weight:800;
}

/* ==========================================================================
   Surfaces
   ========================================================================== */
.card{
  position:relative;
  background:var(--surface);
  border:1px solid var(--edge);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
}
.list-card{
  background:var(--surface);
  border:1px solid var(--edge);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}
.list-row{ display:flex; align-items:center; gap:.8rem; padding:.85rem 1rem; }
.list-row + .list-row{ border-top:1px solid var(--edge); }

/* vibrant hero */
.hero-banner{
  position:relative;
  overflow:hidden;
  border-radius:var(--r-xl);
  background:
    radial-gradient(90% 120% at 100% -10%, rgba(255,255,255,.28), transparent 55%),
    radial-gradient(70% 90% at -5% 110%, rgba(14,165,233,.35), transparent 55%),
    linear-gradient(135deg,var(--hb1,#6c4bff) 0%,var(--hb2,#8a3ffc) 48%,var(--hb3,#e0389a) 100%);
  box-shadow:0 28px 50px -24px var(--hb-shadow,rgba(108,75,255,.6));
  color:#fff;
}
.hero-banner .star{ position:absolute; color:rgba(255,255,255,.7); }

.stat-strip{
  display:grid; grid-template-columns:repeat(3,1fr);
  background:var(--surface);
  border:1px solid var(--edge);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
}
.stat-strip > div{ padding:.85rem .4rem; text-align:center; }
.stat-strip > div + div{ border-left:1px solid var(--edge); }

.stat-tile{
  background:var(--surface);
  border:1px solid var(--edge);
  border-radius:var(--r-md);
  padding:.8rem .4rem;
  text-align:center;
  box-shadow:var(--shadow-sm);
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.4rem; border-radius:var(--r-sm); font-weight:800; min-height:44px; white-space:nowrap; transition:transform .16s ease, box-shadow .16s ease; overflow:hidden; }
.btn:active{ transform:scale(.965); }

.btn-play{
  color:#fff;
  background:linear-gradient(140deg,var(--violet-2),var(--violet) 60%,#4a2fe0);
  box-shadow:0 14px 26px -12px rgba(108,75,255,.65), inset 0 1px 0 rgba(255,255,255,.3);
}
.btn-light{
  color:var(--violet);
  background:#fff;
  box-shadow:0 12px 22px -12px rgba(20,10,80,.45);
}
.btn-gold{
  color:#3a2200;
  background:linear-gradient(150deg,#ffd166,var(--gold) 60%,var(--gold-2));
  box-shadow:0 12px 22px -12px rgba(245,166,35,.6), inset 0 1px 0 rgba(255,255,255,.5);
}
.btn-ghost{
  color:var(--ink);
  background:#fff;
  border:1px solid var(--edge-strong);
}
.btn-ghost-light{
  color:#fff;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.32);
  backdrop-filter:blur(6px);
}

/* ==========================================================================
   Icon badges — pastel tint, solid glyph
   ========================================================================== */
.icon-badge{
  flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--r-sm);
}
.icon-badge--violet{ background:rgba(108,75,255,.11); color:var(--violet); }
.icon-badge--cyan{   background:rgba(14,165,233,.12); color:#0284c7; }
.icon-badge--pink{   background:rgba(255,77,141,.12); color:#e11d6a; }
.icon-badge--gold{   background:rgba(245,166,35,.16); color:var(--gold-ink); }
.icon-badge--green{  background:rgba(16,185,129,.13); color:#059669; }
.icon-badge--rose{   background:rgba(239,68,68,.12);  color:#dc2626; }
.icon-badge--flat{   background:var(--surface-2);     color:var(--muted); }

.coin{
  flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border-radius:999px;
  background:radial-gradient(120% 120% at 30% 20%, #ffe9a8, var(--gold) 55%, #c77700 100%);
  color:#4a2c00;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.8), 0 3px 8px -3px rgba(245,166,35,.7);
}

/* ==========================================================================
   Category tiles (Home)
   ========================================================================== */
.cat-tile{
  flex:1; min-width:0;
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
}
.cat-tile .tile{
  display:flex; align-items:center; justify-content:center;
  width:100%; aspect-ratio:1/1; border-radius:20px;
  color:#fff;
  box-shadow:0 12px 22px -12px var(--tile-shadow, rgba(22,22,50,.4)), inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .15s ease;
}
.cat-tile:active .tile{ transform:scale(.94); }
.cat-tile span.lbl{ font-size:11px; font-weight:700; color:var(--ink); }

/* ==========================================================================
   Game cards
   ========================================================================== */
.game-card{
  border-radius:22px;
  background:var(--surface);
  border:1px solid var(--edge);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  transition:transform .15s ease;
}
.game-card:active{ transform:scale(.97); }
.game-cover{
  position:relative;
  aspect-ratio:16/11;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.game-cover::after{
  content:'';
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.24), transparent 46%);
}
.game-cover svg{ position:relative; z-index:1; }
.game-tag{
  position:absolute; left:8px; top:8px; z-index:2;
  border-radius:999px; padding:.22rem .6rem;
  font-size:9.5px; font-weight:800; letter-spacing:.03em; text-transform:capitalize;
  background:rgba(255,255,255,.88); color:var(--ink);
  backdrop-filter:blur(6px);
}
.cover-chip{
  position:absolute; left:8px; bottom:8px; z-index:2;
  display:inline-flex; align-items:center; gap:4px;
  border-radius:999px; padding:.2rem .55rem .2rem .25rem;
  font-size:10px; font-weight:800;
  background:rgba(20,10,60,.55); color:#fff;
  backdrop-filter:blur(8px);
}

/* ==========================================================================
   XP bar / progress
   ========================================================================== */
.xp-track{ height:8px; width:100%; overflow:hidden; border-radius:999px; background:#e9e8f4; }
.xp-fill{ height:100%; border-radius:999px; background:linear-gradient(90deg,var(--violet),var(--cyan)); transition:width .6s ease; }

/* ==========================================================================
   Chips / segmented
   ========================================================================== */
.chip{
  flex-shrink:0;
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.55rem .95rem; min-height:40px;
  border-radius:999px;
  font-size:12.5px; font-weight:700;
  background:#fff;
  border:1px solid var(--edge-strong);
  color:var(--muted);
  transition:.2s ease;
}
.chip.is-active{
  color:#fff;
  background:linear-gradient(140deg,var(--violet-2),var(--violet));
  border-color:transparent;
  box-shadow:0 8px 16px -8px rgba(108,75,255,.6);
}
.segmented{ display:grid; grid-auto-flow:column; background:#eceaf6; border-radius:16px; padding:4px; }
.segmented button{ border-radius:12px; padding:.7rem 0; min-height:40px; font-size:12.5px; font-weight:700; color:var(--muted); transition:.2s ease; }
.segmented button.is-active{ background:#fff; color:var(--ink); box-shadow:var(--shadow-sm); }

.pill{
  display:inline-flex; align-items:center; gap:.3rem;
  border-radius:999px;
  font-weight:700;
  background:var(--surface-2);
}

/* ==========================================================================
   Podium
   ========================================================================== */
.podium{ display:grid; grid-template-columns:1fr 1.15fr 1fr; align-items:end; gap:10px; }
.podium-col{ display:flex; flex-direction:column; align-items:center; }
.podium-block{
  width:100%;
  border-radius:16px 16px 0 0;
  display:flex; align-items:flex-start; justify-content:center;
  padding-top:8px;
  font-family:'Outfit',sans-serif; font-weight:800; font-size:20px; color:rgba(255,255,255,.95);
}
.podium-block--1{ height:96px; background:linear-gradient(180deg,#ffd166,#f5a623); }
.podium-block--2{ height:70px; background:linear-gradient(180deg,#d9deea,#a9b3c8); }
.podium-block--3{ height:54px; background:linear-gradient(180deg,#f4bc94,#d18450); }
.podium-avatar{
  display:flex; align-items:center; justify-content:center;
  border-radius:999px;
  font-weight:800;
  background:linear-gradient(150deg,var(--violet-2),var(--violet));
  color:#fff;
  position:relative;
  box-shadow:0 8px 16px -8px rgba(108,75,255,.55);
}
.podium-crown{ position:absolute; top:-17px; left:50%; transform:translateX(-50%); }
.rank-badge{
  display:flex; align-items:center; justify-content:center;
  height:1.5rem; width:1.5rem; border-radius:999px;
  font-size:11px; font-weight:800;
  flex-shrink:0;
  background:var(--surface-2); color:var(--muted);
}

/* ==========================================================================
   Achievement badges
   ========================================================================== */
.badge-tile{
  display:flex; flex-direction:column; align-items:center; gap:.45rem;
  padding:.95rem .3rem;
  border-radius:var(--r-md);
  background:var(--surface);
  border:1px solid var(--edge);
  box-shadow:var(--shadow-sm);
  text-align:center;
}
.badge-tile .ic{
  display:flex; align-items:center; justify-content:center;
  height:2.8rem; width:2.8rem; border-radius:16px;
  background:linear-gradient(145deg,var(--violet-2),var(--violet));
  color:#fff;
  box-shadow:0 10px 18px -10px rgba(108,75,255,.7);
}
.badge-tile.is-locked{ box-shadow:none; background:transparent; border-style:dashed; }
.badge-tile.is-locked .ic{ background:var(--surface-2); color:var(--muted-2); box-shadow:none; }
.badge-tile.is-locked span:last-child{ color:var(--muted-2); }

/* ==========================================================================
   Inputs
   ========================================================================== */
.input{
  width:100%;
  border-radius:var(--r-sm);
  border:1px solid var(--edge-strong);
  background:#fff;
  padding:.85rem .95rem;
  font-size:13.5px;
  font-weight:500;
  color:var(--ink);
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.input:focus{ border-color:rgba(108,75,255,.6); box-shadow:0 0 0 3px rgba(108,75,255,.14); }
.input::placeholder{ color:var(--muted-2); font-weight:500; }
select.input{
  min-height:40px;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236c6e8a' stroke-width='2'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right .85rem center; padding-right:2.3rem;
}

/* ==========================================================================
   Menu rows
   ========================================================================== */
.menu-row{
  display:flex; width:100%; align-items:center; gap:.8rem;
  padding:.9rem 1rem;
  text-align:left;
}
.menu-row + .menu-row{ border-top:1px solid var(--edge); }
.menu-row .chev{ margin-left:auto; color:var(--muted-2); }

/* ==========================================================================
   Bottom nav — floating frosted pill
   ========================================================================== */
#bottom-nav{
  position:fixed;
  left:max(14px, var(--safe-l));
  right:max(14px, var(--safe-r));
  bottom:calc(var(--safe-b) + 10px);
  width:auto;
  max-width:calc(var(--app-w) - 28px);
  margin:0 auto;
  border-radius:26px;
  background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  backdrop-filter:blur(22px) saturate(180%);
  border:1px solid rgba(22,22,50,.06);
  box-shadow:0 18px 44px -16px rgba(22,22,50,.32);
  display:flex;
  padding:5px;
  z-index:30;
  transition:transform .22s ease, opacity .22s ease;
}
.nav-btn{
  flex:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  position:relative;
  padding:.5rem 0; min-height:48px; min-width:0;
  border-radius:20px;
  color:var(--muted-2);
  font-size:10.5px;
  font-weight:700;
  transition:color .18s ease, background .18s ease, transform .15s ease;
}
.nav-btn:active{ transform:scale(.93); }
.nav-btn svg{ height:19px; width:19px; }
.nav-btn.is-active{
  color:#fff;
  background:linear-gradient(140deg,var(--violet-2),var(--violet));
  box-shadow:0 10px 20px -10px rgba(108,75,255,.75);
}

/* ==========================================================================
   Drawer
   ========================================================================== */
.drawer-overlay{ position:fixed; inset:0; background:rgba(21,21,46,.38); backdrop-filter:blur(3px); z-index:60; opacity:0; pointer-events:none; transition:opacity .28s ease; }
.drawer-overlay.open{ opacity:1; pointer-events:auto; }
#side-drawer{
  position:fixed; top:0; bottom:0; right:0;
  width:min(86vw, 320px);
  height:100vh; height:100dvh; height:var(--app-vh);
  overscroll-behavior:contain;
  background:#fff;
  z-index:70;
  transform:translateX(100%);
  transition:transform .32s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column;
  box-shadow:-24px 0 60px -20px rgba(21,21,46,.35);
}
#side-drawer.open{ transform:translateX(0); }
.drawer-item{ display:flex; align-items:center; gap:.75rem; padding:.7rem .65rem; border-radius:var(--r-sm); color:var(--ink); font-size:13.5px; font-weight:600; transition:background .15s ease; }
.drawer-item:active{ background:var(--surface-2); }
.social-btn{ display:flex; height:2.3rem; width:2.3rem; align-items:center; justify-content:center; border-radius:12px; background:var(--surface-2); color:var(--muted); }

/* ==========================================================================
   Toast / modal
   ========================================================================== */
.toast{
  background:var(--ink);
  color:#fff;
  font-size:12.5px; font-weight:600;
  padding:.65rem 1.05rem;
  border-radius:999px;
  box-shadow:0 16px 32px -12px rgba(21,21,46,.5);
  animation:toastIn .22s ease both;
}
@keyframes toastIn{ from{ opacity:0; transform:translateY(10px) scale(.97); } to{ opacity:1; transform:none; } }

.modal-layer{ position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center; padding:20px; }
.modal-backdrop{ position:absolute; inset:0; background:rgba(21,21,46,.5); backdrop-filter:blur(4px); }
.ring-progress{ background:conic-gradient(var(--violet) var(--p,0%), #e9e8f4 0); border-radius:999px; transition:background .5s linear; }

/* ==========================================================================
   Avatar
   ========================================================================== */
.avatar-ring{ padding:3px; border-radius:999px; background:linear-gradient(135deg,var(--violet-2),var(--pink)); box-shadow:0 14px 26px -12px rgba(108,75,255,.6); }
.avatar-ring > *{ border-radius:999px; }

/* ==========================================================================
   Motion
   ========================================================================== */
.view{ animation:fadeIn .24s ease both; }
@keyframes fadeIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.hidden{ display:none !important; }
.float-spark{ animation:floaty 3.2s ease-in-out infinite; }
.float-spark.d1{ animation-delay:.4s; }
.float-spark.d2{ animation-delay:1.1s; }
@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }
@keyframes pulseGlow{ 0%,100%{ box-shadow:0 0 0 0 rgba(245,166,35,.4); } 50%{ box-shadow:0 0 0 7px rgba(245,166,35,.1); } }
.pulse-ring{ animation:pulseGlow 2.4s ease-in-out infinite; }


/* ==========================================================================
   Responsive & mobile hardening
   ========================================================================== */
/* iOS reliably reports env(safe-area-inset-*) itself, so the header/nav/home-indicator clearance already works even if
   Telegram's own bridge value is ever missing. Android has no such native fallback, and this only matters once the app
   is edge-to-edge (full screen) — outside full screen the WebView's own boundary already excludes the system bars, so
   nothing extra is needed there. In full screen, Android depends entirely on Telegram correctly reporting
   --tg-safe-area-inset-* (especially the bottom one, for the OS's own gesture bar) — so, on Android in full screen only
   (js/prism.v15.js sets .is-android from Telegram.WebApp.platform; .tg-fullscreen already exists for the fullscreen
   feature; never on iPhone, desktop or outside full screen), never let that clearance collapse all the way to 0. */
html.is-android.tg-fullscreen{
  --safe-t: calc(max(env(safe-area-inset-top, 0px), var(--tg-safe-area-inset-top, 0px), 12px) + var(--tg-content-safe-area-inset-top, 0px));
  --safe-b: max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px), 12px);
}
.app-shell{
  width:100%;
  max-width:var(--app-w);
  margin:0 auto;
  min-height:100vh; min-height:100dvh; min-height:var(--app-vh);
  padding-left:var(--safe-l);
  padding-right:var(--safe-r);
}
.main-pad{ padding-bottom:calc(var(--safe-b) + 108px); }
.safe-top{ padding-top:calc(var(--safe-t) + 4px); }
.drawer-top{ padding-top:calc(var(--safe-t) + 18px); }
.drawer-bottom{ padding-bottom:calc(var(--safe-b) + 18px); }

.toast-wrap{
  position:fixed; left:0; right:0; z-index:90;
  bottom:calc(var(--safe-b) + 92px);
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  padding:0 16px; pointer-events:none;
}
.toast{ max-width:100%; text-align:center; }

/* fluid type */
.h-title{ font-size:clamp(23px, 7.4vw, 28px); line-height:1.1; }
.h-hero{ font-size:clamp(23px, 7.2vw, 28px); line-height:1.12; }
.h-card{ font-size:clamp(20px, 6.2vw, 24px); }
.h-balance{ font-size:clamp(30px, 10vw, 38px); }
.brand-text{ min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* horizontal scroll rows */
.h-scroll{
  display:flex; gap:.75rem;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x proximity;
  scroll-padding-inline:1.25rem;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
}
.h-scroll > *{ scroll-snap-align:start; }
.game-card--wide{ flex:0 0 clamp(150px, 44vw, 176px); }
.cat-tile{ flex:1 0 54px; }

/* hero */
.hero-row{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; }
.hero-cover{ flex-shrink:0; width:clamp(84px, 27vw, 104px); aspect-ratio:1; overflow:hidden; border-radius:26px; }

/* small buttons / links with safe hit areas */
.link-btn{ display:inline-flex; align-items:center; min-height:40px; padding:0 .5rem; margin-right:-.5rem; }
.pill-btn{ min-height:40px; justify-content:center; }
.input.has-action{ padding:.35rem .4rem .35rem 1rem; }

/* inputs: 16px stops iOS auto-zoom on focus */
@media (max-width:767px){
  input, select, textarea{ font-size:16px !important; }
}

/* on-screen keyboard: get the floating nav out of the way */
.kbd-open #bottom-nav{ transform:translateY(160%); opacity:0; pointer-events:none; }

/* breakpoints ------------------------------------------------------------ */
@media (max-width:359px){
  .brand-text{ display:none; }
  .game-tag{ display:none; }
  .cover-chip{ font-size:9.5px; }
}
@media (max-width:339px){
  .hero-cover{ display:none; }
  .grid.btn-pair{ grid-template-columns:1fr !important; }
}
@media (max-width:299px){
  #library-grid{ grid-template-columns:1fr; }
  .podium{ gap:6px; }
}
@media (min-width:600px){
  :root{ --app-w:540px; }
  #library-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
@media (min-width:900px){
  :root{ --app-w:600px; }
}

/* landscape phones: compact nav, more room for content */
@media (max-height:480px) and (orientation:landscape){
  .nav-btn span{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .nav-btn{ min-height:42px; padding:.4rem 0; }
  #bottom-nav{ bottom:calc(var(--safe-b) + 6px); max-width:min(calc(var(--app-w) - 28px), 380px); }
  .main-pad{ padding-bottom:calc(var(--safe-b) + 76px); }
  .toast-wrap{ bottom:calc(var(--safe-b) + 72px); }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}


/* ==========================================================================
   Hero carousel (swipe + dots)
   ========================================================================== */
.hero-carousel{ position:relative; margin-bottom:-10px; }
.hero-track{
  position:relative; z-index:1;
  display:flex;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  min-height:200px;
  /* headroom so the banner's drop shadow isn't clipped by the scroller; bottom == the 24px section gap */
  padding:6px 0 24px; margin:-6px 0 -24px;
  outline-offset:-2px; border-radius:var(--r-xl);
}
.hero-slide{
  flex:0 0 100%; min-width:0;
  display:flex;
  scroll-snap-align:center; scroll-snap-stop:always;
}
.hero-slide > .hero-banner{
  flex:1; min-width:0;
  /* reach = 22 - 24 + 26 = 24px: stays inside the scroller's headroom, so nothing is clipped */
  box-shadow:0 22px 26px -24px var(--hb-shadow, rgba(108,75,255,.6));
  transform:scale(.94); opacity:.62;
  transition:transform .5s cubic-bezier(.22,1,.36,1), opacity .5s ease;
}
.hero-slide.is-active > .hero-banner{ transform:none; opacity:1; }

/* pagination dots: 6px dots, active one stretches into a gradient pill.
   Each button is 28x40 for touch but only takes 22px of layout height (negative margin). */
.hero-dots{
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:center;
  margin-top:12px;
}
.hero-dot{
  width:28px; height:40px; margin:-9px 0;
  display:flex; align-items:center; justify-content:center;
}
.hero-dot i{
  display:block; width:6px; height:6px; border-radius:99px;
  background:rgba(108,75,255,.22);
  transition:width .4s cubic-bezier(.22,1,.36,1), background .3s ease, box-shadow .3s ease, transform .2s ease;
}
.hero-dot:active i{ transform:scale(.8); }
.hero-dot[aria-current="true"] i{
  width:22px;
  background:linear-gradient(90deg,var(--violet-2),var(--violet));
  box-shadow:0 3px 8px -2px rgba(108,75,255,.65);
}
@media (max-width:359px){ .hero-dot{ width:24px; } }
/* on very narrow screens the first sparkle sits on top of the longest tag ("TOP EARNER") */
@media (max-width:339px){ .hero-slide .star.float-spark:not(.d1):not(.d2){ display:none; } }

/* ==========================================================================
   Bottom nav — 6 tabs (badge + narrow-screen tuning)
   ========================================================================== */
.nav-btn span{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nav-badge{
  position:absolute; top:3px; left:calc(50% + 6px);
  min-width:16px; height:16px; padding:0 4px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:99px; border:2px solid #fff; box-sizing:content-box;
  background:var(--pink); color:#fff;
  font-size:9px; font-weight:800; line-height:1; font-style:normal;
  box-shadow:0 3px 8px -2px rgba(255,77,141,.7);
}
.nav-badge[hidden]{ display:none; }
@media (max-width:359px){
  #bottom-nav{ left:max(10px, var(--safe-l)); right:max(10px, var(--safe-r)); padding:4px; border-radius:24px; }
  .nav-btn{ font-size:10px; border-radius:18px; }
  .nav-btn svg{ height:18px; width:18px; }
}
/* very narrow (Galaxy Fold cover screen etc.): icons only, labels stay for screen readers */
@media (max-width:299px){
  .nav-btn span:not(.nav-badge){ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .nav-btn{ min-height:44px; }
  .nav-badge{ left:calc(50% + 4px); top:4px; }
}

/* ==========================================================================
   Tasks
   ========================================================================== */
.task-reset{
  flex-shrink:0; white-space:nowrap;
  padding:.28rem .65rem; border-radius:999px;
  font-size:11px; font-weight:700; color:#fff;
  background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.28);
}
.task-bar{ height:8px; border-radius:999px; background:rgba(255,255,255,.26); overflow:hidden; }
.task-bar > i{ display:block; height:100%; border-radius:inherit; background:#fff; box-shadow:0 0 12px rgba(255,255,255,.7); transition:width .5s cubic-bezier(.22,1,.36,1); }
.task-claim-all{ min-height:40px; }

.task-row{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; column-gap:.8rem;
  padding:.9rem 1rem;
}
.task-row + .task-row{ border-top:1px solid var(--edge); }
.task-ic{ width:44px; height:44px; border-radius:15px; }
.task-title{ font-size:14px; font-weight:700; line-height:1.25; overflow-wrap:anywhere; }
.task-meta{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin:.3rem 0 .4rem; }
.task-reward{ display:inline-flex; align-items:center; gap:.3rem; font-size:12px; font-weight:800; color:var(--gold-ink); white-space:nowrap; }
.task-count{ font-size:11.5px; font-weight:600; color:var(--muted); white-space:nowrap; }
.task-track{ height:6px; }
.task-row.is-done .xp-fill{ background:linear-gradient(90deg,#34d399,var(--green)); }
.task-row.is-claim .xp-fill{ background:linear-gradient(90deg,#ffd166,var(--gold)); }
.task-row.is-done .task-title{ color:var(--muted); }
.task-act{ display:flex; justify-content:flex-end; min-width:72px; }
.task-btn{ min-height:40px; min-width:72px; padding:0 1rem; font-size:12.5px; }
.task-btn--go{ color:var(--violet); background:rgba(108,75,255,.1); }
.task-done{ display:inline-flex; align-items:center; gap:.3rem; min-height:40px; font-size:12px; font-weight:800; color:#059669; }
@media (max-width:339px){
  .task-row{ grid-template-columns:auto minmax(0,1fr); row-gap:.65rem; padding:.8rem .85rem; }
  .task-ic{ width:38px; height:38px; border-radius:13px; }
  .task-act{ grid-column:1 / -1; }
  .task-btn{ width:100%; }
  .task-done{ width:100%; justify-content:center; min-height:32px; }
}
@media (min-width:600px){
  .task-row{ padding:1rem 1.15rem; }
  .task-title{ font-size:15px; }
}

/* ==========================================================================
   Backend states: loading, withdraw sheet, spin used
   ========================================================================== */
/* inside Telegram, real numbers are on their way: hide the sample values instead of flashing them */
[data-bind], [data-live]{ transition:opacity .25s ease; }
html.api-pending [data-bind], html.api-pending [data-live]{ opacity:0; }
.empty\:hidden:empty{ display:none; }
#spin-btn:disabled, #spin-btn.is-done{ opacity:.55; box-shadow:none; }

/* bottom sheet on phones, centred card on tablets */
.sheet-layer{ align-items:flex-end; padding:0; }
.sheet{
  max-width:var(--app-w);
  border-radius:28px 28px 0 0;
  padding:20px 20px calc(var(--safe-b) + 22px);
  max-height:92vh; max-height:92dvh; max-height:calc(var(--app-vh) * 0.92); overflow-y:auto; overscroll-behavior:contain;
  animation:sheetUp .28s cubic-bezier(.22,1,.36,1) both;
}
@keyframes sheetUp{ from{ transform:translateY(40px); opacity:0; } to{ transform:none; opacity:1; } }
@media (min-width:600px){
  .sheet-layer{ align-items:center; padding:20px; }
  .sheet{ border-radius:28px; max-width:440px; }
}
@media (max-height:480px) and (orientation:landscape){
  .sheet{ max-height:100vh; max-height:100dvh; max-height:var(--app-vh); border-radius:20px 20px 0 0; padding-top:14px; }
}

/* podium: long player names must truncate inside their column instead of stretching the grid */
.podium > .podium-col{ min-width:0; }
.podium-col > p{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:center; }

/* ==========================================================================
   Admin-managed artwork + full-screen game player
   ========================================================================== */
.cover-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.hero-cover{ position:relative; }
.game-cover .game-tag, .game-cover .cover-chip{ z-index:3; }
.player-layer{ position:fixed; inset:0; z-index:85; background:#000; overflow:hidden; overscroll-behavior:none; touch-action:manipulation; }
html.lock-scroll, html.lock-scroll body{ overscroll-behavior:none; }
/* the stage is the game's screen. When the phone is held the "wrong" way for the game it is turned 90 degrees by script
   (JS sets its size + transform) and the safe-area paddings are re-mapped to the turned edges. */
.player-stage{
  position:absolute; left:0; top:0; width:100%; height:100%; transform-origin:0 0; box-sizing:border-box; background:#000;
  --pt:var(--safe-t); --pr:var(--safe-r); --pb:var(--safe-b); --pl:var(--safe-l);
  padding:var(--pt) var(--pr) var(--pb) var(--pl);
}
.player-stage.rot{ --pt:var(--safe-r); --pr:var(--safe-b); --pb:var(--safe-l); --pl:var(--safe-t); }
#player-frame{ display:block; width:100%; height:100%; border:0; background:#0f0f1f; }
.player-loading{ position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); text-align:center; color:rgba(255,255,255,.7); font-weight:600; font-size:13px; pointer-events:none; }

/* floating HUD: timer ring -> Collect button, plus close (and rotate when relevant). Small, translucent, movable. */
.player-hud{ position:absolute; z-index:6; display:flex; align-items:center; gap:8px; touch-action:none; transition:opacity .35s ease; -webkit-user-select:none; user-select:none; }
.player-hud.pos-tl{ top:calc(var(--pt) + 8px); left:calc(var(--pl) + 8px); }
.player-hud.pos-tr{ top:calc(var(--pt) + 8px); right:calc(var(--pr) + 8px); flex-direction:row-reverse; }
.player-hud.pos-bl{ bottom:calc(var(--pb) + 8px); left:calc(var(--pl) + 8px); }
.player-hud.pos-br{ bottom:calc(var(--pb) + 8px); right:calc(var(--pr) + 8px); flex-direction:row-reverse; }
.player-hud.idle{ opacity:.42; }
.player-hud.dragging{ opacity:.95; transition:none; }
.hud-btn, .hud-collect{
  flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff;
  background:rgba(12,12,28,.62); border:1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); box-shadow:0 6px 16px -6px rgba(0,0,0,.5);
}
.hud-btn{ width:38px; height:38px; border-radius:50%; }
.hud-collect{ position:relative; height:44px; min-width:44px; width:44px; padding:0; border-radius:22px; overflow:hidden; justify-content:flex-start; transition:width .3s ease, background .3s ease; }
.hud-collect:disabled{ cursor:default; opacity:1; }
.hud-ring{ position:absolute; left:0; top:0; width:44px; height:44px; transform:rotate(-90deg); }
.hud-ring circle{ fill:none; stroke-width:3.2; }
.hud-ring-bg{ stroke:rgba(255,255,255,.22); }
.hud-ring-fg{ stroke:#fff; stroke-linecap:round; stroke-dasharray:119.38; stroke-dashoffset:0; transition:stroke-dashoffset .3s linear, stroke .3s; }
.hud-count{ position:absolute; left:0; top:0; width:44px; height:44px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.hud-label{ display:none; font-weight:800; font-size:13px; white-space:nowrap; }
.player-hud[data-state="ready"] .hud-collect{ width:auto; padding:0 15px 0 52px; color:#3a2200; background:linear-gradient(150deg,#ffd166,#f5a623 60%,#ff8a00); border-color:rgba(255,255,255,.55); cursor:pointer; animation:pulseGlow 1.6s ease-in-out infinite; }
.player-hud[data-state="ready"] .hud-ring-bg{ stroke:rgba(58,34,0,.25); }
.player-hud[data-state="ready"] .hud-ring-fg{ stroke:#3a2200; stroke-dashoffset:0 !important; }
.player-hud[data-state="ready"] .hud-label{ display:block; }
.player-hud[data-state="ready"].idle{ opacity:1; }
.hud-tip{ position:absolute; top:100%; margin-top:8px; width:max-content; max-width:min(230px, 60vw); padding:8px 12px; border-radius:12px; background:rgba(12,12,28,.86); color:#fff; font-size:12px; font-weight:600; line-height:1.3; pointer-events:none; }
.pos-tl .hud-tip, .pos-bl .hud-tip{ left:0; } .pos-tr .hud-tip, .pos-br .hud-tip{ right:0; }
.pos-bl .hud-tip, .pos-br .hud-tip{ top:auto; bottom:100%; margin-top:0; margin-bottom:8px; }
.player-hint{ position:absolute; left:50%; bottom:calc(var(--pb) + 18px); transform:translateX(-50%); z-index:7; display:flex; align-items:center; gap:9px; padding:9px 15px; border-radius:99px; background:rgba(12,12,28,.78); color:#fff; font-size:13px; font-weight:700; white-space:nowrap; pointer-events:none; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); transition:opacity .4s ease; }
.hint-phone{ animation:hintTurn 1.8s ease-in-out infinite; }
@keyframes hintTurn{ 0%,25%{ transform:rotate(0); } 65%,100%{ transform:rotate(90deg); } }

/* ==========================================================================
   Splash screen — shown the instant the page paints (pure CSS, no assets to
   fetch), independent of the app's light theme. JS removes it entirely once
   the app is ready, never just hides it. This block does NOT set overflow,
   touch-action, or overscroll-behavior on html/body/#app — it must never
   interact with the overflow-x:clip fix that rule owns (see the comment on
   that rule, above `*{...}`). The two background glows and the logo pulse
   animate via `transform`/`opacity` only (compositor-only, no layout/paint
   cost), never `background-position` (repaints every frame).
   ========================================================================== */
.splash{
  position:fixed; inset:0; z-index:999; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  padding:max(24px,var(--safe-t)) max(24px,var(--safe-r)) max(24px,var(--safe-b)) max(24px,var(--safe-l));
  box-sizing:border-box; text-align:center;
  background:
    radial-gradient(120% 100% at 50% 50%, transparent 40%, rgba(0,0,0,.5) 100%),
    linear-gradient(160deg,#2a1c6b 0%,#170f3c 50%,#08060f 100%);
  transition:opacity .5s cubic-bezier(.4,0,.2,1), transform .55s cubic-bezier(.4,0,.2,1);
}
.splash.hide{ opacity:0; transform:scale(1.05); pointer-events:none; }
.splash-glow{ position:absolute; border-radius:50%; pointer-events:none; will-change:transform; }
.splash-glow-a{
  left:-18%; top:-16%; width:clamp(240px,62vw,460px); height:clamp(240px,62vw,460px);
  background:radial-gradient(closest-side, rgba(143,118,255,.55), rgba(143,118,255,0) 70%);
  animation:splashDriftA 10s ease-in-out infinite alternate;
}
.splash-glow-b{
  right:-18%; bottom:-16%; width:clamp(220px,56vw,420px); height:clamp(220px,56vw,420px);
  background:radial-gradient(closest-side, rgba(245,166,35,.42), rgba(245,166,35,0) 70%);
  animation:splashDriftB 10s ease-in-out infinite alternate;
}
@keyframes splashDriftA{ from{ transform:translate(0,0); } to{ transform:translate(8vw,6vh); } }
@keyframes splashDriftB{ from{ transform:translate(0,0); } to{ transform:translate(-7vw,-6vh); } }
.splash-body{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; max-width:min(86vw,360px); }
.splash-mark{
  width:clamp(72px,21vw,92px); height:clamp(72px,21vw,92px); border-radius:27%;
  background:linear-gradient(140deg,var(--violet-2),var(--violet) 55%,#4a2fe0);
  box-shadow:0 24px 54px -16px rgba(108,75,255,.75), 0 0 0 1px rgba(255,255,255,.08) inset;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform:translateY(10px) scale(.82);
  animation:splashMarkIn .7s cubic-bezier(.2,.85,.3,1.1) .05s both;
}
.splash-mark-in{ animation:splashPulse 2.6s ease-in-out .75s infinite; }
@keyframes splashMarkIn{ to{ opacity:1; transform:translateY(0) scale(1); } }
@keyframes splashPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.06); } }
.splash-word{
  margin-top:clamp(20px,5.5vh,28px); font-family:'Outfit','Inter',sans-serif; font-weight:800;
  font-size:clamp(28px,8.4vw,44px); letter-spacing:-.02em; line-height:1.05; color:rgba(255,255,255,.97);
  opacity:0; transform:translateY(8px); animation:splashRise .6s ease .22s both;
}
.splash-word span{
  background:linear-gradient(95deg,#ffd166,var(--gold) 45%,var(--gold-2) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.splash-tag{
  margin-top:9px; font-size:clamp(11px,3vw,13px); font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.5);
  opacity:0; transform:translateY(8px); animation:splashRise .6s ease .38s both;
}
@keyframes splashRise{ to{ opacity:1; transform:translateY(0); } }
.splash-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.splash-bar{
  margin-top:clamp(32px,8.5vh,44px); width:min(46vw,150px); height:4px; border-radius:999px; overflow:hidden;
  background:rgba(255,255,255,.14);
  opacity:0; animation:splashRise .5s ease .52s both;
}
.splash-bar span{
  display:block; height:100%; width:38%; border-radius:inherit; transform:translateX(-140%);
  background:linear-gradient(90deg,rgba(255,255,255,0),var(--violet-2) 35%,var(--gold) 65%,rgba(255,255,255,0));
  animation:splashSweep 1.3s ease-in-out .6s infinite;
}
@keyframes splashSweep{ 0%{ transform:translateX(-140%); } 100%{ transform:translateX(360%); } }
@media (prefers-reduced-motion:reduce){
  /* the global reduced-motion rule elsewhere turns every animation off; without this, these elements would stay
     stuck at their opacity:0 starting point (that state only ever changes via the disabled entrance animation). */
  .splash-mark, .splash-word, .splash-tag, .splash-bar{ opacity:1 !important; transform:none !important; }
  .splash-bar span{ transform:none !important; }
  .splash-glow-a, .splash-glow-b{ animation:none !important; }
}

/* while the access gate is showing, the app shell (and splash, if it hasn't been removed yet) are hidden entirely —
   never just visually covered — so nothing behind the gate is reachable by touch/scroll or visible in any way. */
body.gated #app{ display:none; }
body.gated #splash{ display:none; }

/* ==========================================================================
   Access gate — shown instead of the app when opened outside Telegram. Its
   own full-screen fixed layer, independent of the splash/app; does not set
   overflow/touch-action/overscroll-behavior on html/body/#app, so it can
   never interact with the overflow-x:clip fix those rely on. Light theme
   (unlike the dark splash) so the QR code sits on maximum-contrast white for
   reliable scanning, and so it reads as a distinct "you're in the wrong
   place" screen rather than a themed part of the app itself.
   ========================================================================== */
.qr-gate{
  position:fixed; inset:0; z-index:998; overflow-y:auto; -webkit-overflow-scrolling:touch;
  display:flex; align-items:center; justify-content:center;
  padding:max(28px,var(--safe-t)) max(20px,var(--safe-r)) max(28px,var(--safe-b)) max(20px,var(--safe-l));
  box-sizing:border-box;
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(108,75,255,.14), transparent 60%),
    radial-gradient(70% 50% at 100% 100%, rgba(245,166,35,.10), transparent 60%),
    var(--bg);
}
.qr-gate.hidden{ display:none; }
.qr-gate-card{
  position:relative; width:min(400px,100%); box-sizing:border-box;
  background:var(--surface); border-radius:var(--r-xl); padding:clamp(28px,6vw,40px) clamp(22px,6vw,32px);
  box-shadow:0 30px 60px -24px rgba(21,21,46,.28), 0 1px 0 rgba(255,255,255,.6) inset;
  text-align:center;
}
.qr-gate-mark{
  width:52px; height:52px; margin:0 auto; border-radius:26%;
  background:linear-gradient(140deg,var(--violet-2),var(--violet) 55%,#4a2fe0);
  box-shadow:0 14px 28px -10px rgba(108,75,255,.55), 0 0 0 1px rgba(255,255,255,.08) inset;
  display:flex; align-items:center; justify-content:center;
}
.qr-gate-title{
  margin-top:16px; font-family:'Outfit','Inter',sans-serif; font-weight:800;
  font-size:clamp(22px,6vw,26px); letter-spacing:-.02em; color:var(--ink);
}
.qr-gate-title span{
  background:linear-gradient(95deg,#e08f00,var(--gold) 45%,var(--gold-2) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.qr-gate-sub{ margin-top:8px; font-size:13.5px; line-height:1.5; color:var(--muted); }
.qr-gate-qr-wrap{
  margin:22px auto 0; width:fit-content; padding:14px; border-radius:20px;
  background:#fff; border:1px solid var(--edge); box-shadow:var(--shadow-sm);
}
.qr-gate-qr{ width:min(200px,52vw); height:min(200px,52vw); display:flex; align-items:center; justify-content:center; }
.qr-gate-qr img, .qr-gate-qr canvas{ width:100% !important; height:100% !important; display:block; border-radius:4px; }
.qr-gate-divider{
  display:flex; align-items:center; gap:12px; margin:22px 0 18px; color:var(--muted-2);
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
}
.qr-gate-divider::before, .qr-gate-divider::after{ content:''; flex:1; height:1px; background:var(--edge-strong); }
@media (min-width:640px){
  .qr-gate-qr{ width:220px; height:220px; }
}

/* ==========================================================================
   Banner ad (Game Details page). overflow:hidden here is a deliberate safety
   net, not just tidiness: the iframe inside keeps its native 320x50 layout
   box even when JS scales it down to fit narrower phones (CSS transform
   never changes an element's own layout size) — without this rule, that
   unscaled box could overflow horizontally on any device narrower than
   320px and reopen the exact zoom-out bug documented elsewhere in this file
   (see the responsive-fix / overflow-x:clip entries above). This container
   clips and contains that overflow regardless of whether the JS scaling
   ever ran, the same technique already used for .splash and .qr-gate.
   ========================================================================== */
.ad-banner-wrap{
  display:flex; align-items:center; justify-content:center;
  width:100%; overflow:hidden; margin:16px 0;
}
/* targets whatever iframe the ad network's own script inserts here — it isn't ours to add a class to */
.ad-banner-wrap iframe{
  flex-shrink:0; transform-origin:center center;
}