/* ===========================================================
   SBONK GAME — full stylesheet (game + events + hall of fame)
   =========================================================== */
:root{
  --bg:#0c0a14; --bg2:#120e1d;
  --surface:#1a1426; --surface2:#241a36;
  --line:rgba(255,255,255,.10);
  --text:#f6f1ff; --muted:#a99cc9;
  --magenta:#ff2e88; --lime:#c6ff3c; --cyan:#33e1ff; --yellow:#ffd23d; --violet:#9b6cff; --orange:#ff7a2f;
  --gold:#ffcb45;
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; padding:0; height:100%; }
body{ font-family:'Space Grotesk',sans-serif; background:var(--bg); color:var(--text); overflow:hidden; }

.sg-stage{ position:fixed; top:0; left:0; right:0; height:100vh; height:100dvh; display:grid; place-items:center; padding:max(10px,env(safe-area-inset-top)) 12px max(10px,env(safe-area-inset-bottom));
  background:
    radial-gradient(120% 80% at 18% -10%, #25113f 0%, transparent 50%),
    radial-gradient(100% 70% at 110% 110%, #07273a 0%, transparent 55%), var(--bg); }
.sg-screen{ position:relative; height:min(880px,100%); aspect-ratio:9/16; width:auto; max-width:97vw;
  background:var(--bg2); border:1px solid var(--line); border-radius:30px; overflow:hidden; display:flex; flex-direction:column;
  box-shadow:0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04), 0 0 60px rgba(255,46,136,.10); }
.sg-screen::before{ content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:radial-gradient(120% 100% at 50% 0%, transparent 60%, rgba(0,0,0,.35)); }
.sg-screen.flash-good::after,.sg-screen.flash-bad::after{ content:''; position:absolute; inset:0; pointer-events:none; z-index:45; animation:flash .48s ease-out; }
.sg-screen.flash-good::after{ background:radial-gradient(circle at center, rgba(198,255,60,.30), transparent 70%); }
.sg-screen.flash-bad::after{ background:radial-gradient(circle at center, rgba(255,46,136,.34), transparent 70%); }

/* otto helper */
.otto{ display:block; }

/* ---------- HUD ---------- */
.hud{ padding:12px 16px 4px; position:relative; z-index:5; }
.hud-top{ display:flex; justify-content:space-between; align-items:center; }
.hearts{ display:flex; gap:2px; font-size:17px; }
.heart.empty{ filter:grayscale(1) brightness(1.4) opacity(.55); }
.hud-right{ display:flex; gap:7px; align-items:center; }
.pill{ background:var(--surface2); border:1px solid var(--line); color:var(--text); font-weight:600; font-size:13px; padding:5px 11px; border-radius:999px; }
.coin-pill{ color:var(--yellow); }
.mute-mini{ cursor:pointer; padding:5px 9px; background:var(--surface2); border:1px solid var(--line); border-radius:999px; color:var(--text); }
.mode-pill{ color:var(--cyan); font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.06em; }

/* ---------- mode select ---------- */
.modes-pad{ justify-content:flex-start; padding:0; overflow:hidden; }
.modes-head{ display:flex; align-items:center; justify-content:space-between; width:100%; padding:16px 18px 12px; background:var(--bg2); border-bottom:1px solid var(--line-2); position:sticky; top:0; z-index:2; }
.modes-head .modes-title{ font-family:Anton; font-size:22px; letter-spacing:.5px; }
.mode-list{ width:100%; display:flex; flex-direction:column; gap:11px; overflow-y:auto; padding:14px 18px 22px; flex:1; }
.mode-card{ display:flex; align-items:center; gap:14px; width:100%; text-align:left; cursor:pointer;
  background:var(--surface); border:2px solid var(--line); border-left:5px solid var(--ac); border-radius:18px; padding:14px 16px;
  color:var(--text); box-shadow:0 5px 0 rgba(0,0,0,.35); transition:transform .12s, border-color .15s; }
.mode-card:hover{ transform:translateX(3px); border-color:var(--ac); }
.mode-card:active{ transform:translateY(2px); box-shadow:0 2px 0 rgba(0,0,0,.35); }
.mode-card .mc-ico{ font-size:30px; width:46px; height:46px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; }
.mode-card .mc-ico .otto{ width:46px; }
.mode-card .mc-txt{ display:flex; flex-direction:column; gap:5px; flex:1; min-width:0; }
.mode-card .mc-title{ font-family:Anton; font-size:18px; letter-spacing:.3px; line-height:1.2; }
.mode-card .mc-desc{ font-size:12px; color:var(--muted); line-height:1.3; }
.mode-card .mc-arrow{ font-family:Anton; font-size:20px; color:var(--ac); flex:0 0 auto; }
.hud-mid{ display:flex; align-items:center; justify-content:space-between; margin-top:10px; gap:8px; }
.score-wrap{ display:flex; flex-direction:column; line-height:.85; }
.score-num{ font-family:Anton; font-size:30px; color:#fff; letter-spacing:.5px; }
.score-lbl{ font-size:10px; letter-spacing:.14em; color:var(--muted); font-weight:600; margin-top:3px; }
.combo-badge{ font-family:Anton; font-size:17px; color:#1a1426; background:var(--yellow); padding:5px 11px; border-radius:999px; transform:rotate(-4deg); box-shadow:0 3px 0 rgba(0,0,0,.3); animation:pop .3s; }

/* ---------- feed / cards ---------- */
.feed{ flex:1; position:relative; display:flex; flex-direction:column; padding:8px 16px 16px; min-height:0; z-index:4; }
.card-slot{ flex:1; display:flex; min-height:0; animation:cardEnter .42s cubic-bezier(.2,.8,.2,1); }
.qcard{ flex:1; display:flex; flex-direction:column; gap:12px; min-height:0; }
.chiprow{ display:flex; gap:9px; align-items:center; }
.theme-chip{ font-family:Anton; font-size:13px; letter-spacing:.05em; color:#0c0a14; background:var(--c); padding:4px 12px; border-radius:8px; }
.mode-chip{ font-size:12px; color:var(--muted); font-weight:600; letter-spacing:.03em; }
.qtext{ font-weight:700; font-size:21px; line-height:1.13; color:#fff; text-wrap:balance; }
.qtext-big{ font-size:26px; }
.qtext-sm{ font-size:18px; }
.emoji-stage{ font-size:44px; text-align:center; padding:4px 0; letter-spacing:6px; filter:drop-shadow(0 8px 18px rgba(0,0,0,.55)); animation:floaty 3s ease-in-out infinite; }

.opts{ display:flex; flex-direction:column; gap:8px; margin-top:auto; }
.opts-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.opt{ display:flex; align-items:center; gap:10px; background:var(--surface); border:2px solid var(--line); color:#fff; font-weight:600; font-size:15.5px; padding:10px 14px; border-radius:14px; text-align:left; cursor:pointer; transition:transform .12s,background .15s,border-color .15s; box-shadow:0 4px 0 rgba(0,0,0,.35); }
.opt:hover:not(:disabled){ transform:translateY(-2px); border-color:rgba(255,255,255,.28); }
.opt:active:not(:disabled){ transform:translateY(2px); box-shadow:0 1px 0 rgba(0,0,0,.35); }
.opt-big{ justify-content:center; flex-direction:column; gap:5px; font-family:Anton; font-size:23px; padding:15px; }
.opt-emoji{ font-size:20px; }
.opt-big .opt-emoji{ font-size:34px; }
.opt-mark{ margin-left:auto; font-size:18px; }
.opt-big .opt-mark{ position:absolute; }
.opt.is-correct{ background:color-mix(in srgb,var(--lime) 22%, var(--surface)); border-color:var(--lime); animation:pulseGood .4s; }
.opt.is-wrong{ background:color-mix(in srgb,var(--magenta) 20%, var(--surface)); border-color:var(--magenta); animation:shake .4s; }
.opt.is-dim{ opacity:.38; }

.tot-wrap{ flex:1; display:flex; flex-direction:column; gap:18px; position:relative; margin-top:auto; min-height:0; }
.tot-panel{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:14px; background:var(--surface); border:2px solid var(--line); border-radius:20px; color:#fff; cursor:pointer; box-shadow:0 5px 0 rgba(0,0,0,.35); transition:transform .12s,border-color .15s; position:relative; overflow:hidden; }
.tot-panel:hover:not(:disabled){ transform:scale(1.012); border-color:rgba(255,255,255,.28); }
.tot-emoji{ font-size:42px; }
.tot-label{ font-family:Anton; font-size:22px; white-space:nowrap; }
.tot-panel.is-correct{ border-color:var(--lime); background:color-mix(in srgb,var(--lime) 16%, var(--surface)); }
.tot-panel.is-wrong{ border-color:var(--magenta); background:color-mix(in srgb,var(--magenta) 16%, var(--surface)); }
.tot-panel.is-dim{ opacity:.4; }
.tot-mark{ position:absolute; top:10px; right:14px; font-size:22px; }
.vs-badge{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) rotate(-8deg); width:46px; height:46px; border-radius:50%; background:var(--magenta); color:#fff; display:grid; place-items:center; font-family:Anton; font-size:19px; z-index:3; box-shadow:0 0 0 5px var(--bg2),0 6px 16px rgba(0,0,0,.5); }

/* puzzle card */
.puz-card{ flex:1; display:flex; flex-direction:column; gap:10px; min-height:0; }
.puz-stage{ flex:1; position:relative; border-radius:16px; overflow:hidden; background:linear-gradient(135deg,#9b6cff,#33e1ff); display:flex; align-items:center; justify-content:center; }
.puz-hidden{ font-size:96px; filter:drop-shadow(0 6px 12px rgba(0,0,0,.4)); }
.puz-tiles{ position:absolute; inset:0; display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(4,1fr); gap:4px; padding:4px; }
.puz-tile{ background:var(--surface); border-radius:7px; display:flex; align-items:center; justify-content:center; font-family:Anton; font-size:15px; color:var(--muted); cursor:pointer; transition:opacity .3s, transform .2s; }
.puz-tile:hover{ transform:scale(.94); }
.puz-tile.off{ opacity:0; pointer-events:none; }
.puz-hint{ text-align:center; font-size:12px; color:var(--muted); }

/* timer ring already inline svg from component */

/* intruders / bursts */
.intruder{ position:absolute; transform:translate(-50%,-50%) rotate(var(--rot)); display:flex; flex-direction:column; align-items:center; cursor:pointer; z-index:20; user-select:none; animation:intrBob 1.3s ease-in-out infinite; }
.intruder.caught{ animation:caughtPop .2s forwards; }
.intruder .otto{ width:78px; filter:drop-shadow(0 6px 10px rgba(0,0,0,.55)); }
.intruder-taunt{ font-family:Anton; font-size:12px; background:#fff; color:#0c0a14; padding:3px 9px; border-radius:8px; margin-bottom:-4px; transform:rotate(-3deg); box-shadow:0 3px 0 rgba(0,0,0,.3); white-space:nowrap; z-index:1; }
.intruder-hint{ font-weight:700; font-size:11px; color:var(--lime); margin-top:-6px; }
.float-burst{ position:absolute; transform:translate(-50%,-50%); font-family:Anton; font-size:30px; pointer-events:none; z-index:30; animation:burst .9s ease-out forwards; text-shadow:0 3px 12px rgba(0,0,0,.65); white-space:nowrap; }
.next-hint{ text-align:center; font-size:12px; color:var(--muted); letter-spacing:.12em; padding-top:8px; animation:blink 1.2s infinite; }

/* ---------- overlays / sheets ---------- */
.overlay{ position:absolute; inset:0; background:rgba(8,6,14,.84); backdrop-filter:blur(6px); display:grid; place-items:center; z-index:50; padding:20px; animation:fadeIn .25s; }
.sheet{ width:100%; background:var(--surface); border:1px solid var(--line); border-radius:24px; padding:22px 18px; text-align:center; box-shadow:0 20px 60px rgba(0,0,0,.6); }
.sheet-kick{ font-family:Anton; font-size:13px; letter-spacing:.1em; color:var(--yellow); }
.sheet-title{ font-family:Anton; font-size:27px; margin:6px 0 4px; color:#fff; }
.sheet-sub{ color:var(--muted); font-size:13px; margin:0 0 16px; }
.big-emoji{ font-size:48px; }
.cta{ display:block; width:100%; border:none; border-radius:16px; font-family:Anton; font-size:17px; letter-spacing:.02em; padding:14px; cursor:pointer; box-shadow:0 5px 0 rgba(0,0,0,.35); transition:transform .1s; color:#fff; }
.cta:active{ transform:translateY(3px); box-shadow:0 2px 0 rgba(0,0,0,.35); }
.cta-pink{ background:var(--magenta); }
.cta-lime{ background:var(--lime); color:#0c0a14; }
.cta-ghost{ background:var(--surface2); border:2px solid var(--line); box-shadow:0 4px 0 rgba(0,0,0,.3); }
.cta-faint{ background:transparent; color:var(--muted); box-shadow:none; font-size:14px; padding:10px; }
.cta.disabled{ opacity:.5; }
.paywall-opts{ display:flex; flex-direction:column; gap:10px; }
.event-badge{ display:inline-block; font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.16em; color:var(--muted); margin-bottom:4px; }

/* wheel */
.wheel-area{ position:relative; width:200px; height:200px; margin:8px auto 16px; }
.wheel{ width:200px; height:200px; border-radius:50%; position:relative; border:6px solid #0c0a14; box-shadow:0 0 0 4px rgba(255,255,255,.10),0 10px 30px rgba(0,0,0,.5); transition:transform 2.5s cubic-bezier(.12,.7,.12,1); }
.wheel-seg{ position:absolute; top:0; left:50%; height:50%; transform-origin:bottom center; display:flex; align-items:flex-start; justify-content:center; padding-top:14px; }
.wheel-seg span{ font-family:Anton; font-size:13px; color:#0c0a14; }
.wheel-ptr{ position:absolute; top:-12px; left:50%; transform:translateX(-50%); color:var(--yellow); font-size:24px; z-index:5; filter:drop-shadow(0 2px 2px rgba(0,0,0,.5)); }
.wheel-hub{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:46px; height:46px; border-radius:50%; background:#0c0a14; display:grid; place-items:center; font-size:22px; z-index:4; box-shadow:0 0 0 4px rgba(255,255,255,.10); }
.reward-line{ font-size:15px; color:#fff; margin:2px 0 14px; font-weight:600; }

/* slot */
.reels{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:12px 0; padding:12px; border-radius:16px; background:linear-gradient(180deg,#2a1c08,#1a1030); border:2px solid var(--gold); box-shadow:inset 0 0 24px rgba(0,0,0,.6); position:relative; }
.reel{ height:84px; border-radius:10px; background:var(--bg); overflow:hidden; position:relative; border:1px solid var(--line); }
.reel-strip{ position:absolute; left:0; right:0; top:0; display:flex; flex-direction:column; align-items:center; }
.reel-sym{ height:84px; display:flex; align-items:center; justify-content:center; font-size:40px; }
.slot-win{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.slot-win span{ font-family:Anton; font-size:30px; color:var(--lime); text-shadow:0 0 20px rgba(198,255,60,.7); opacity:0; }
.slot-win.show span{ animation:winpop 1.1s ease; }
.slot-pay{ font-family:'Space Mono',monospace; font-size:10px; color:var(--muted); text-align:center; margin:6px 0 12px; line-height:1.6; }

/* boss */
.boss-wrap{ position:absolute; inset:0; background:radial-gradient(120% 90% at 50% 20%, #2a0a20, #0c0a14); display:flex; flex-direction:column; padding:18px; z-index:50; animation:fadeIn .25s; }
.boss-head{ display:flex; justify-content:space-between; align-items:center; font-family:'Space Mono',monospace; font-size:11px; color:var(--muted); }
.boss-hp{ width:100%; height:14px; border-radius:999px; background:var(--surface); border:1px solid var(--line); overflow:hidden; margin:10px 0; }
.boss-hp i{ display:block; height:100%; background:linear-gradient(90deg,var(--magenta),var(--orange)); transition:width .12s; }
.boss-arena{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; cursor:pointer; user-select:none; }
.boss-mon{ width:160px; filter:drop-shadow(0 10px 24px rgba(255,46,136,.5)); animation:bossbob 1.2s ease-in-out infinite; }
.boss-mon.hit{ animation:bossHit .12s; }
.boss-tap{ font-family:Anton; font-size:26px; color:var(--lime); margin-top:14px; text-align:center; line-height:.95; }
.boss-tap small{ display:block; font-family:'Space Grotesk'; font-size:12px; color:var(--muted); font-weight:600; margin-top:4px; }
.boss-timer{ font-family:Anton; font-size:20px; color:var(--cyan); }

/* blitz */
.blitz-wrap{ position:absolute; inset:0; background:radial-gradient(120% 90% at 50% 0%, #07273a, #0c0a14); display:flex; flex-direction:column; padding:18px; z-index:50; animation:fadeIn .25s; }
.blitz-time{ font-family:Anton; font-size:54px; line-height:1; color:var(--cyan); text-shadow:0 0 30px rgba(51,225,255,.5); text-align:center; }
.blitz-bar{ width:100%; height:8px; border-radius:999px; background:var(--surface); overflow:hidden; margin:10px 0 18px; }
.blitz-bar i{ display:block; height:100%; background:var(--cyan); transition:width .12s linear; }
.blitz-q{ font-weight:700; font-size:20px; text-align:center; flex:1; display:flex; align-items:center; justify-content:center; text-wrap:balance; }
.blitz-opts{ display:flex; gap:10px; }
.blitz-opt{ flex:1; background:var(--surface); border:2px solid var(--line); border-radius:14px; padding:16px 8px; font-family:Anton; font-size:20px; text-align:center; cursor:pointer; box-shadow:0 4px 0 rgba(0,0,0,.35); }
.blitz-opt:active{ transform:translateY(2px); }
.blitz-score{ text-align:center; font-family:Anton; font-size:16px; color:var(--lime); margin-top:10px; }

/* chest */
.chests{ display:flex; gap:10px; justify-content:center; margin:14px 0 6px; }
.chest{ flex:1; aspect-ratio:.8; background:var(--surface2); border:2px solid var(--line); border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:44px; cursor:pointer; transition:transform .15s; box-shadow:0 5px 0 rgba(0,0,0,.35); }
.chest:hover{ transform:translateY(-4px); border-color:var(--yellow); }
.chest.opened{ animation:pop .4s; border-color:var(--gold); background:color-mix(in srgb,var(--gold) 16%, var(--surface2)); }
.chest.dim{ opacity:.4; pointer-events:none; }

/* duel */
.duel-wrap{ position:absolute; inset:0; background:radial-gradient(120% 90% at 50% 0%, #2a1140, #0c0a14); display:flex; flex-direction:column; padding:18px; z-index:50; animation:fadeIn .25s; }
.duel-vs{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.duel-fighter{ display:flex; flex-direction:column; align-items:center; gap:4px; width:80px; }
.duel-fighter .otto{ width:56px; }
.duel-fighter .dn{ font-size:12px; font-weight:700; }
.duel-fighter .dhp{ font-family:'Space Mono',monospace; font-size:11px; color:var(--muted); }
.duel-vsbadge{ font-family:Anton; font-size:24px; color:var(--magenta); }
.duel-q{ font-weight:700; font-size:18px; text-align:center; margin:6px 0 12px; text-wrap:balance; }

/* ad */
.ad-box{ width:100%; background:var(--surface); border-radius:24px; padding:18px; text-align:center; }
.ad-tag{ font-size:11px; letter-spacing:.2em; color:var(--muted); }
.ad-fake{ background:linear-gradient(135deg,#ff8a3d,#ff2e88); border-radius:18px; padding:26px 16px; margin:12px 0; color:#fff; }
.ad-emoji{ font-size:46px; }
.ad-copy{ font-family:Anton; font-size:24px; margin-top:8px; line-height:1; }
.ad-copy span{ font-family:'Space Grotesk'; font-size:13px; font-weight:600; opacity:.92; }
.ad-fine{ font-size:10px; opacity:.85; margin-top:8px; }
.ad-skip{ font-size:13px; color:var(--muted); }

/* ---------- start / results ---------- */
.screen-pad{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:30px 26px; text-align:center; position:relative; overflow:hidden; z-index:4; }
.start-logo{ font-family:Anton; font-size:64px; line-height:.82; color:#fff; letter-spacing:1px; text-shadow:0 6px 0 var(--magenta),0 0 40px rgba(255,46,136,.45); }
.start-logo .bang{ color:var(--lime); text-shadow:0 6px 0 #0c0a14; }
.start-otto{ width:150px; margin:6px 0 2px; animation:bobby 4s ease-in-out infinite; }
.start-tag{ color:var(--muted); font-size:15px; margin:10px 0 24px; line-height:1.45; }
.big-cta{ width:auto; padding:16px 44px; font-size:22px; }
.start-row{ display:flex; gap:10px; margin-top:18px; align-items:center; flex-wrap:wrap; justify-content:center; }
.link-btn{ cursor:pointer; background:var(--surface2); border:1px solid var(--line); color:var(--text); border-radius:999px; padding:7px 14px; font-size:12px; font-weight:600; }

.res-kick{ font-family:Anton; letter-spacing:.15em; color:var(--muted); font-size:13px; }
.rank-badge{ width:108px; height:108px; border-radius:28px; display:grid; place-items:center; margin:12px 0; background:var(--rc); box-shadow:0 0 44px color-mix(in srgb,var(--rc) 50%, transparent),0 10px 0 rgba(0,0,0,.3); transform:rotate(-4deg); animation:popBig .5s; }
.rank-letter{ font-family:Anton; font-size:64px; color:#0c0a14; line-height:1; }
.res-score{ font-family:Anton; font-size:34px; color:#fff; }
.res-score span{ font-size:15px; color:var(--muted); }
.res-best{ font-family:Anton; color:var(--yellow); font-size:16px; animation:pop .4s; }
.res-stats{ display:grid; grid-template-columns:1fr 1fr; gap:9px; width:100%; margin:16px 0; }
.res-stats div{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:10px; }
.res-stats b{ font-family:Anton; font-size:18px; color:#fff; display:block; }
.res-stats span{ font-size:11px; color:var(--muted); letter-spacing:.04em; }
.res-cta{ display:flex; flex-direction:column; gap:10px; width:100%; }

/* ---------- hall of fame screen ---------- */
.hof-wrap{ position:absolute; inset:0; z-index:55; display:flex; flex-direction:column; background:var(--bg2); animation:fadeIn .25s; }
.hof-bar{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px 8px; }
.hof-bar .hb-t{ font-family:Anton; font-size:18px; letter-spacing:.4px; }
.hof-close{ cursor:pointer; background:var(--surface2); border:1px solid var(--line); color:var(--text); border-radius:999px; width:32px; height:32px; font-size:16px; }
.hof-scroll{ flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.hof{ position:relative; background:linear-gradient(180deg,#2a1c08 0%,#43340f 5%,#2b1a3e 22%,#1a1030 42%,#140c24 62%,#0c0818 82%,#060409 100%); padding-bottom:18px; }
.hof::before{ content:''; position:absolute; top:0; left:0; right:0; height:220px; pointer-events:none; background:radial-gradient(120% 90% at 50% -10%, rgba(255,203,69,.5), rgba(255,203,69,0) 60%); z-index:1; }
.hof-title{ position:relative; z-index:2; text-align:center; padding:12px 0 4px; }
.hof-title .ht-k{ font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.24em; color:var(--gold); }
.hof-title .ht-m{ font-family:Anton; font-size:28px; line-height:.92; letter-spacing:.5px; margin-top:2px; background:linear-gradient(180deg,#fff,#ffcb45); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hof-title .ht-s{ font-size:11px; color:var(--muted); margin-top:3px; }
.podium{ position:relative; z-index:2; display:flex; justify-content:center; align-items:flex-end; gap:10px; padding:12px 16px 16px; }
.pod{ display:flex; flex-direction:column; align-items:center; flex:1; }
.pod .pav{ width:54px; height:54px; border-radius:50%; overflow:hidden; border:3px solid var(--gold); background:var(--surface); display:flex; align-items:center; justify-content:center; box-shadow:0 0 24px rgba(255,203,69,.5); }
.pod.silver .pav{ border-color:#d7e0ee; width:48px; height:48px; }
.pod.bronze .pav{ border-color:#e08a52; width:48px; height:48px; }
.pod .pav .otto{ width:128%; }
.pod .crown{ font-size:20px; margin-bottom:-4px; }
.pod .pname{ font-weight:700; font-size:12px; margin-top:7px; max-width:84px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pod .pscore{ font-family:'Space Mono',monospace; font-size:11px; color:var(--gold); }
.pod .base{ margin-top:8px; width:100%; border-radius:9px 9px 0 0; background:linear-gradient(180deg,var(--surface2),var(--surface)); border:1px solid var(--line); border-bottom:none; display:flex; align-items:flex-start; justify-content:center; font-family:Anton; padding-top:6px; }
.pod.gold .base{ height:56px; color:var(--gold); font-size:22px; }
.pod.silver .base{ height:42px; font-size:18px; color:var(--muted); }
.pod.bronze .base{ height:32px; font-size:18px; color:var(--muted); }
.tier{ position:relative; z-index:2; }
.tier-band{ display:flex; align-items:center; gap:9px; padding:9px 16px 6px; }
.tier-band .tb-ico{ font-size:15px; }
.tier-band .tb-name{ font-family:Anton; font-size:15px; letter-spacing:.06em; color:var(--tc,#fff); }
.tier-band .tb-line{ flex:1; height:1px; background:linear-gradient(90deg,var(--tc,#fff),transparent); opacity:.5; }
.tier-band .tb-range{ font-family:'Space Mono',monospace; font-size:9.5px; color:var(--muted); }
.lbrow{ position:relative; z-index:2; display:flex; align-items:center; gap:11px; margin:5px 12px; padding:8px 11px; background:rgba(255,255,255,.035); border:1px solid var(--line); border-radius:13px; }
.lbrow .rk{ font-family:Anton; font-size:15px; width:26px; text-align:center; color:var(--muted); flex:0 0 auto; }
.lbrow .av{ width:32px; height:32px; border-radius:50%; overflow:hidden; background:var(--surface2); border:1.5px solid var(--line); flex:0 0 auto; display:flex; align-items:center; justify-content:center; }
.lbrow .av .otto{ width:130%; }
.lbrow .nm{ font-weight:600; font-size:13.5px; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lbrow .sc{ font-family:'Space Mono',monospace; font-size:12px; color:var(--text); flex:0 0 auto; }
.lbrow .tr{ font-size:10px; width:16px; text-align:center; flex:0 0 auto; }
.tr.up{ color:var(--lime); } .tr.dn{ color:var(--magenta); } .tr.eq{ color:var(--muted); }
.lbrow.me{ background:linear-gradient(90deg,color-mix(in srgb,var(--lime) 22%, transparent),rgba(255,255,255,.03)); border-color:var(--lime); box-shadow:0 0 22px rgba(198,255,60,.18); }
.lbrow.me .rk{ color:var(--lime); }
.abyss{ position:relative; z-index:2; margin:14px 12px 4px; padding:12px; border-radius:14px; background:radial-gradient(120% 100% at 50% 0%, rgba(255,46,136,.10), transparent 70%); border:1px dashed rgba(255,46,136,.3); }
.abyss .ab-h{ display:flex; align-items:center; gap:8px; justify-content:center; font-family:Anton; font-size:14px; color:var(--magenta); letter-spacing:.08em; }
.abyss .ab-s{ text-align:center; font-size:10.5px; color:var(--muted); margin-top:2px; }
.lbrow.lost{ opacity:.62; }
.lbrow.lost .av .otto{ filter:grayscale(.6); }

/* ---------- keyframes ---------- */
@keyframes pop{ 0%{transform:scale(.6)} 60%{transform:scale(1.15)} 100%{transform:scale(1)} }
@keyframes popBig{ 0%{transform:scale(.3) rotate(-4deg)} 70%{transform:scale(1.12) rotate(-4deg)} 100%{transform:scale(1) rotate(-4deg)} }
@keyframes pulseGood{ 0%{transform:scale(1)} 40%{transform:scale(1.03)} 100%{transform:scale(1)} }
@keyframes shake{ 0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 40%{transform:translateX(6px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)} }
@keyframes cardEnter{ 0%{opacity:0; transform:translateY(40px) scale(.98)} 100%{opacity:1; transform:none} }
@keyframes floaty{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes bobby{ 0%,100%{transform:translateY(0) rotate(-2deg)} 50%{transform:translateY(-12px) rotate(2deg)} }
@keyframes intrBob{ 0%,100%{transform:translate(-50%,-50%) rotate(var(--rot)) translateY(0)} 50%{transform:translate(-50%,-50%) rotate(var(--rot)) translateY(-7px)} }
@keyframes caughtPop{ 0%{transform:translate(-50%,-50%) rotate(var(--rot)) scale(1); opacity:1} 100%{transform:translate(-50%,-50%) rotate(var(--rot)) scale(1.7); opacity:0} }
@keyframes bossbob{ 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-8px) scale(1.03)} }
@keyframes bossHit{ 0%{transform:scale(1)} 50%{transform:scale(.9) rotate(3deg)} 100%{transform:scale(1)} }
@keyframes burst{ 0%{opacity:0; transform:translate(-50%,-50%) scale(.4)} 20%{opacity:1; transform:translate(-50%,-50%) scale(1.1)} 100%{opacity:0; transform:translate(-50%,-150%) scale(1)} }
@keyframes winpop{ 0%{opacity:0; transform:scale(.5)} 40%{opacity:1; transform:scale(1.15)} 100%{opacity:0; transform:scale(1)} }
@keyframes flash{ 0%{opacity:0} 30%{opacity:1} 100%{opacity:0} }
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
@keyframes blink{ 0%,100%{opacity:.4} 50%{opacity:1} }
@media(prefers-reduced-motion:reduce){ *{ animation-duration:.01ms !important; } }

/* Hall of Fame: tab modalità (classifiche separate) */
.hof-tabs{ display:flex; gap:7px; padding:2px 14px 10px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.hof-tabs::-webkit-scrollbar{ display:none; }
.hof-tab{ flex:0 0 auto; cursor:pointer; font-size:12px; font-weight:700; padding:7px 13px; border-radius:999px; background:var(--surface2); border:1px solid var(--line); color:var(--muted); white-space:nowrap; }
.hof-tab.on{ background:linear-gradient(90deg,var(--lime),var(--cyan)); color:#0a0a12; border-color:transparent; box-shadow:0 0 16px rgba(198,255,60,.3); }
/* genere selezionato per la Rush */
.pick-cat .pc-chk{ position:absolute; top:5px; right:6px; font-size:11px; color:var(--lime); font-weight:800; }
.pick-cat{ position:relative; }

/* Word Game card */
.word-boxes{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin:12px 0 6px; }
.word-box{ width:30px; height:38px; border-radius:8px; background:var(--surface); border:2px solid var(--line); display:flex; align-items:center; justify-content:center; font-family:Anton; font-size:20px; }
.word-box.filled{ border-color:var(--cyan); }
.word-box.ok{ border-color:var(--lime); background:color-mix(in srgb,var(--lime) 18%, var(--surface)); }
.word-box.ko{ border-color:var(--magenta); background:color-mix(in srgb,var(--magenta) 18%, var(--surface)); }
.word-gap{ width:12px; }
.word-hints{ display:flex; flex-direction:column; gap:5px; align-items:center; margin:2px 0 6px; }
.word-hint{ font-size:12px; color:var(--muted); text-align:center; }
.word-hintbtn{ font-size:12px; color:var(--cyan); background:transparent; border:1px solid var(--line); border-radius:999px; padding:5px 12px; cursor:pointer; }
.word-keys{ margin-top:auto; display:flex; flex-direction:column; gap:6px; padding-bottom:2px; }
.word-krow{ display:flex; gap:4px; justify-content:center; }
.word-key{ flex:1; max-width:32px; height:42px; border-radius:7px; background:var(--surface2); border:1px solid var(--line); color:var(--text); font-weight:700; font-size:15px; cursor:pointer; padding:0; }
.word-key:active:not(:disabled){ background:var(--cyan); color:#0c0a14; }
.word-key.wk-back{ max-width:44px; }