@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@700;800;900&family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@400;500;600;700&family=Montserrat:wght@700;800;900&family=Nunito+Sans:wght@800;900&family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Saira+Condensed:wght@600;700&family=Sora:wght@600;700;800&family=Spectral:wght@500;600;700;800&display=swap');
:root{
  --bg:#0c1018; --bg-glow:#16203a; --bg2:#11182a; --card:#161e30; --card2:#1c2740;
  --line:#26314d; --line2:#33406a;
  --text:#eef2fb; --muted:#9aa7c7; --faint:#6b78a0;
  --gold:#f5b82e; --gold-d:#ca9a26; --green:#37d07f; --red:#ff5d5d; --amber:#f1a73a;
  --accent-ink:#241a02;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  --font-display:'Montserrat',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-brand:'Nunito Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --r:14px;
  --t-rookie:#8a93ad; --t-buff:#4f9bff; --t-aficionado:#27c2a8;
  --t-savant:#a47bff; --t-master:#ff8a4c; --t-grandmaster:#ff5d5d; --t-legend:#f5b82e;
}
*{box-sizing:border-box;margin:0;padding:0}
/* lock horizontal drift (esp. installed iOS PWA — vertical scroll only) */
html,body{height:100%;max-width:100%;overflow-x:hidden;overscroll-behavior-x:none}
html{background:var(--bg)}   /* solid dark canvas so the page is never white even if the gradient below fails to paint (iOS) */
body{
  background:radial-gradient(1200px 600px at 50% -10%, var(--bg-glow) 0%, var(--bg) 60%) var(--bg) fixed;
  color:var(--text);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased; line-height:1.5;
}
/* iOS-standalone-proof app shell (play.html only — the marketing landing is body>.lp and stays
   a normal scrolling page). The page is a fixed-height flex COLUMN so the bottom tab bar is a
   normal-flow item at the TRUE screen bottom — no position:fixed drift that leaves a dead band
   below the nav in a home-screen PWA — and #app scrolls internally. 100dvh = the real dynamic
   viewport; falls back to the height:100% from the html,body rule where dvh is unsupported. */
body.app-shell{height:100dvh;display:flex;flex-direction:column;overflow:hidden}
/* width:100% is REQUIRED here: #app has `margin:0 auto`, and in a flex column those become auto
   cross-axis margins that cancel align-items:stretch — without an explicit width #app shrinks to
   its content (narrow screens like Settings collapsed to ~226px). width:100% + max-width:960 keeps
   full-width on phones and centered-capped on desktop. */
body.app-shell #app{flex:1 1 auto;min-height:0;width:100%;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.lp-hero h1,.ready-title,.res-title,.cd-num,.gtile .gt-name,.grouptitle,.stat .v{font-family:var(--font-display)}
#app{max-width:960px;margin:0 auto;min-height:100%;padding:calc(18px + env(safe-area-inset-top,0px)) calc(16px + env(safe-area-inset-right,0px)) calc(24px + env(safe-area-inset-bottom,0px)) calc(16px + env(safe-area-inset-left,0px))}
.screen{max-width:600px;margin:0 auto}

/* header */
.brand{display:flex;align-items:center;justify-content:center;gap:11px;margin:4px 0 2px}
.brand .logo{width:64px;height:64px;display:grid;place-items:center;cursor:pointer;border-radius:11px;transition:transform .1s}
.brand .logo:hover{transform:translateY(-1px)}
.brand .logo:active{transform:scale(.92)}
.brand-ico{width:64px;height:64px;display:block;object-fit:contain;color:var(--gold)}
.brand-ico-b{fill:var(--bg);font-family:var(--font-display);font-weight:900;font-size:25px}
@keyframes trophyShake{0%,100%{transform:rotate(0)}12%{transform:rotate(-15deg)}24%{transform:rotate(12deg)}36%{transform:rotate(-9deg)}48%{transform:rotate(7deg)}62%{transform:rotate(-5deg)}76%{transform:rotate(3deg)}88%{transform:rotate(-1deg)}}
.brand-ico.shake{animation:trophyShake .62s ease}
.brand h1{font-family:var(--font-brand);font-size:27px;font-weight:900;letter-spacing:0;cursor:pointer}
.brand h1:hover{opacity:.85}
.brand h1 b{color:var(--gold);font-weight:900}
.tag{text-align:center;color:var(--faint);font-size:12.5px;margin-bottom:16px;font-style:italic}

/* top stat strip */
.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;margin-bottom:18px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:11px 12px;text-align:center}
.stat .k{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px}
.stat .v{font-size:20px;font-weight:800;margin-top:2px}
.stat .v small{font-size:12px;font-weight:600;color:var(--faint)}

.section-h{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.7px;margin:6px 2px 10px}

/* topic cards */
.topics{display:flex;flex-direction:column;gap:11px}
.topic{
  display:flex;align-items:center;gap:13px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:13px 14px;cursor:pointer;transition:.14s;text-align:left;width:100%;color:inherit
}
.topic:hover{border-color:var(--line2);background:var(--card2);transform:translateY(-1px)}
.topic .emo{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;font-size:23px;background:#0f1626;border:1px solid var(--line);flex:0 0 auto}
.topic .mid{flex:1;min-width:0}
.topic .name{font-weight:700;font-size:16px}
.topic .sub{font-size:12.5px;color:var(--faint);margin-top:1px}
.topic .right{text-align:right;flex:0 0 auto}
.pill{display:inline-block;font-size:11px;font-weight:800;padding:3px 9px;border-radius:999px;letter-spacing:.3px}
.topic .rt{font-size:12px;color:var(--muted);margin-top:4px}
.done-tag{font-size:11px;color:var(--green);font-weight:700;margin-top:4px}
.home .strip,.home .search,.home .foot,.no-res{max-width:660px;margin-left:auto;margin-right:auto}
.search{display:block;width:100%;box-sizing:border-box;margin:0 auto 18px;padding:12px 16px;font-size:15px;border-radius:12px;border:1px solid var(--line2);background:var(--card);color:var(--text)}
.search::placeholder{color:var(--faint)}
.search:focus{outline:none;border-color:var(--gold)}
.no-res{text-align:center;color:var(--faint);font-size:14px;padding:18px}
.group{margin-bottom:12px}
.group-h{width:100%;display:flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:11px 14px;cursor:pointer;color:var(--text);font-size:15px;font-weight:700;text-align:left;transition:.12s}
.group-h:hover{background:var(--card2);border-color:var(--line2)}
.group-h .chev{font-size:12px;color:var(--muted);display:inline-block;transition:transform .15s;width:12px}
.group:not(.collapsed) .group-h .chev{transform:rotate(90deg)}
.group-h .ge{font-size:18px}
.group-h .gn{flex:1}
.group-h .gc{font-size:11px;font-weight:600;color:var(--faint);background:var(--bg2);border:1px solid var(--line);border-radius:999px;padding:2px 9px}
.tiles{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:10px 0 4px}
.tiles .tile{flex:1 1 148px;max-width:220px}
.group.collapsed .tiles{display:none}
.tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 10px 13px;cursor:pointer;color:inherit;transition:.12s;text-align:center}
.tile:hover{border-color:var(--line2);background:var(--card2);transform:translateY(-1px)}
.tile .t-emo{font-size:30px;line-height:1}
.tile .t-name{font-size:13.5px;font-weight:600;line-height:1.25}
.tile .t-pill{font-size:10.5px;padding:2px 8px 2px 5px;display:inline-flex;align-items:center;gap:4px}
.tile .tile-done{position:absolute;top:7px;right:9px;font-size:11px;color:var(--green);font-weight:800}
/* favourite crown sits INLINE just before the category name (subtle when off, gold when on) */
.tile .t-name .tile-fav{display:inline-flex;align-items:center;vertical-align:-3px;margin-right:4px;color:var(--faint);opacity:.55;cursor:pointer;user-select:none;transition:.12s}
.tile .t-name .tile-fav:hover{color:var(--gold);opacity:1;transform:scale(1.18)}
.tile .t-name .tile-fav.on{color:var(--gold);opacity:1}
/* favourite = a little CROWN (tiles, ready-screen corner, and the tappable quiz orb) */
.crown{display:block}
.tile .tile-fav .crown{width:15px;height:15px}
/* single favourite crown to the RIGHT of the ready-screen quiz title */
.nr-titlefav{background:none;border:0;padding:4px;margin:0;cursor:pointer;color:var(--faint);opacity:.6;flex:none;display:inline-flex;align-items:center;transition:.12s;vertical-align:middle}
.nr-titlefav .crown{width:24px;height:24px}
.nr-titlefav.on{color:var(--gold);opacity:1}
.nr-titlefav:hover{color:var(--gold);opacity:1;transform:scale(1.12)}
/* "Hide from suggestions" — mirror of the favourite crown, on the opposite side of the title */
.nr-titlehide{background:none;border:0;padding:4px;margin:0;cursor:pointer;color:var(--faint);opacity:.55;flex:none;display:inline-flex;align-items:center;transition:.12s;vertical-align:middle}
.nr-titlehide .hideglyph{width:22px;height:22px}
.nr-titlehide.on{color:var(--red);opacity:1}
.nr-titlehide:hover{color:var(--red);opacity:1;transform:scale(1.12)}
/* centered "are you sure?" confirm modal (hiding a game) */
.kd-confirm{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(6,9,16,.74);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:kdFadeIn .16s ease both}
.kd-confirm-card{background:linear-gradient(180deg,#1d2740,#131a2b);border:1px solid var(--line2);border-radius:18px;padding:26px 22px 20px;max-width:340px;width:100%;text-align:center;box-shadow:0 26px 70px rgba(0,0,0,.6);animation:kdSlam .4s cubic-bezier(.2,1.35,.5,1) both}
.kd-confirm-ico{font-size:40px;line-height:1;margin-bottom:8px}
.kd-confirm-title{font-family:var(--font-display);font-weight:800;font-size:22px;margin-bottom:8px}
.kd-confirm-sub{font-size:13.5px;color:var(--muted);line-height:1.5;margin-bottom:20px}
.kd-confirm-actions{display:flex;gap:10px}
.kd-confirm-actions button{flex:1;font:inherit;font-weight:700;font-size:14.5px;padding:12px 10px;border-radius:12px;cursor:pointer;border:1px solid var(--line2);transition:.12s}
.kd-confirm-cancel{background:transparent;color:var(--text)}
.kd-confirm-cancel:hover{border-color:var(--muted)}
.kd-confirm-yes{background:var(--red);border-color:var(--red);color:#fff}
.kd-confirm-yes:hover{filter:brightness(1.08)}
.fav-h{color:var(--gold)}
.ready-fav{display:block;margin:0 auto 4px;background:none;border:none;color:var(--faint);font-size:26px;line-height:1;cursor:pointer;padding:2px 8px;transition:.12s}
.ready-fav:hover{color:var(--gold);transform:scale(1.12)}
.ready-fav.on{color:var(--gold)}
.mini-cap{font-size:9.5px;color:var(--faint);margin-top:3px;line-height:1.2}
/* per-question answer stat */
.rv-stat{font-size:11.5px;color:var(--gold);font-weight:600;margin:4px 0 6px}
/* header date + mode meta */
.hdr-meta{display:flex;align-items:center;justify-content:center;gap:7px;font-size:11.5px;color:var(--faint);margin:-10px 0 16px}
.hdr-meta .hm-date{color:var(--muted)}
.hdr-meta .hm-mode{text-transform:uppercase;letter-spacing:.6px;color:var(--gold);font-weight:700}
.hdr-meta .hm-dot{color:var(--line2)}
/* streak chip — top-left of home */
.home{position:relative}
.hm-streak{position:absolute;top:0;left:0;z-index:3;display:inline-flex;align-items:center;gap:5px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:5px 11px;font-size:14px;color:var(--gold);font-weight:800;cursor:pointer;line-height:1;font-family:inherit}
.hm-streak b{font-weight:800}
.hm-streak small{font-size:9.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.hm-streak:hover{border-color:var(--gold)}
/* practice / archive banners */
.practice-banner{text-align:center;font-size:11.5px;font-weight:700;letter-spacing:.5px;color:var(--bg);background:var(--amber);border-radius:10px;padding:7px 12px;margin:0 0 14px}
/* very-bottom, discreet "embed this game" link on the results screen */
.res-embed{text-align:center;margin:20px 0 2px}
.res-embed-link{display:inline-flex;align-items:center;gap:7px;color:var(--faint);font-size:12.5px;font-weight:600;text-decoration:none;padding:6px 12px;border-radius:9px}
.res-embed-link svg{width:15px;height:15px}
.res-embed-link:hover{color:var(--muted)}
/* casual "Just for Fun" new personal-best flourish (pressure-free, no rank) */
.pb-banner{margin:12px auto 2px;width:max-content;max-width:100%;background:linear-gradient(180deg,rgba(245,184,46,.2),rgba(245,184,46,.06));border:1px solid rgba(245,184,46,.55);color:var(--gold);font-weight:800;font-size:13.5px;letter-spacing:.2px;padding:8px 18px;border-radius:999px;text-align:center;animation:kdSlam .42s cubic-bezier(.2,1.35,.5,1) both}
.archive-banner{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;font-size:12.5px;font-weight:600;color:var(--bg);background:var(--amber);border-radius:12px;padding:10px 14px;margin:0 0 16px}
.arch-clear{background:rgba(0,0,0,.18);border:none;color:var(--bg);font-size:12px;font-weight:700;cursor:pointer;border-radius:999px;padding:4px 10px}
/* "last season's champions" home banner (see loadSeasonBanner in app.js) */
.season-champ{display:flex;align-items:center;gap:10px;background:linear-gradient(180deg,rgba(245,184,46,.16),rgba(245,184,46,.05));border:1px solid rgba(245,184,46,.4);border-radius:12px;padding:9px 12px;margin:0 0 14px;font-size:13px;color:var(--text)}
.season-champ .sc-ico{font-size:16px;flex:0 0 auto}
.season-champ .sc-av{flex:0 0 auto;display:flex}
.season-champ .sc-txt{flex:1 1 auto;min-width:0}
.season-champ .sc-txt b{color:var(--gold)}
.season-champ .sc-x{flex:0 0 auto;background:none;border:none;color:var(--muted);font-size:13px;cursor:pointer;padding:4px 6px;line-height:1}
.season-champ .sc-x:hover{color:var(--text)}
/* calendar */
.cal-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin:6px 0 14px}
.cal-nav .cal-month{font-size:17px;font-weight:800}
.cal-arrow{background:var(--card);border:1px solid var(--line);color:var(--text);font-size:18px;font-weight:700;cursor:pointer;border-radius:10px;width:38px;height:38px}
.cal-arrow:hover:not([disabled]){border-color:var(--line2);background:var(--card2)}
.cal-arrow[disabled]{opacity:.32;cursor:default}
.cal-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:6px}
.cal-dow span{text-align:center;font-size:11px;color:var(--muted);font-weight:700}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal-day{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;aspect-ratio:1;background:var(--card);border:1px solid var(--line);border-radius:10px;color:var(--text);cursor:default;font-size:13px;padding:0}
.cal-day.blank{background:none;border:none}
.cal-day small{font-size:8.5px;color:var(--faint);line-height:1}
.cal-day.playable{cursor:pointer}
.cal-day.playable:hover{border-color:var(--gold);background:var(--card2)}
.cal-day.disabled{opacity:.3}
.cal-day.today{border-color:var(--gold);background:var(--card2)}
.cal-day.today b{color:var(--gold)}
.cal-hint{text-align:center;font-size:11.5px;color:var(--faint);margin-top:12px}
/* Day-streak stat as the mini-calendar trigger + the compact dropdown */
.strip .stat-btn{cursor:pointer;font:inherit;color:inherit}
.strip .stat-btn .k{font-family:var(--font)}
.minical{background:var(--card);border:1px solid var(--line2);border-radius:14px;padding:12px;margin:-6px 0 16px}
.minical .mc-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.minical .cal-month{font-size:14px;font-weight:800}
.minical .cal-arrow{width:30px;height:30px;font-size:16px;border-radius:8px}
.minical .cal-dow{gap:4px;margin-bottom:4px}
.minical .cal-dow span{font-size:10px}
.minical .cal-grid{gap:4px}
.minical .cal-day{font-size:12px;border-radius:8px}
.minical .cal-hint{margin-top:10px;font-size:11px}
.minical .mc-head{text-align:center;margin-bottom:10px}
.minical .mc-streak{font-size:15px;font-weight:800;color:var(--text)}
.minical .mc-streak b{color:var(--gold);font-size:18px;margin:0 1px}
.minical .mc-best{color:var(--muted);font-weight:600;font-size:12px}
.minical .mc-mstat{font-size:11px;color:var(--faint);margin-top:2px}
.minical .cal-day.instreak{background:var(--gold);border-color:var(--gold);color:var(--accent-ink);box-shadow:0 0 8px rgba(245,184,46,.35)}
.minical .cal-day.instreak b{color:var(--accent-ink);font-weight:800}
.minical .cal-day.played{background:rgba(245,184,46,.14);border-color:rgba(245,184,46,.32)}
.minical .cal-day.today{outline:2px solid var(--text);outline-offset:-2px}
.minical .cal-day.sel{position:relative;z-index:2;transform:scale(1.12);box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--text),0 0 14px rgba(245,184,46,.5)}
.minical .mc-detail{margin-top:11px;border-top:1px solid var(--line);padding-top:10px}
.minical .mc-detail .cal-hint{margin-top:0}
.minical .mc-dh{font-size:12px;font-weight:800;color:var(--text);margin-bottom:5px}
.minical .mc-grow{display:flex;align-items:center;gap:8px;font-size:12.5px;padding:4px 0}
.minical .mc-gemo{font-size:15px;line-height:1;flex:none}
.minical .mc-gname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}
.minical .mc-gsc{flex:none;color:var(--muted);font-weight:600;font-variant-numeric:tabular-nums}
.minical .mc-gsc b{color:var(--text)}
.minical .mc-gd.up{color:var(--green)}
.minical .mc-gd.down{color:var(--red)}
.minical .mc-empty{font-size:12px;color:var(--faint);padding:4px 0}
.minical .mc-play{display:block;width:100%;margin-top:10px;background:var(--card2);border:1px solid var(--line2);color:var(--text);font:inherit;font-weight:700;font-size:12.5px;border-radius:9px;padding:9px;cursor:pointer}
.minical .mc-play:hover{border-color:var(--gold)}
.gtiles{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-bottom:14px}
.gtiles .gtile{flex:1 1 210px;max-width:340px}
.gtile{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:28px 16px;cursor:pointer;color:inherit;transition:.13s;text-align:center}
.gtile:hover{border-color:var(--line2);background:var(--card2);transform:translateY(-2px)}
.gtile .gt-emo{font-size:42px;line-height:1}
.gtile .gt-name{font-size:17px;font-weight:700}
.gtile .gt-sub{font-size:12.5px;color:var(--faint)}
.gtile .gt-done{position:absolute;top:9px;right:11px;font-size:11px;color:var(--green);font-weight:800}
.backbar{background:none;border:none;color:var(--muted);font-size:14px;font-weight:600;cursor:pointer;padding:6px 2px;margin-bottom:2px}
.backbar:hover{color:var(--text)}
.grouptitle{display:flex;align-items:center;gap:10px;font-size:22px;font-weight:800;margin:2px 2px 16px}
.grouptitle .gt-emo{font-size:26px}
.tiles.flat{margin-top:0}

/* tier colours */
.t-rookie{color:#0c1018;background:var(--t-rookie)}
.t-buff{color:#04122b;background:var(--t-buff)}
.t-aficionado{color:#012b25;background:var(--t-aficionado)}
.t-savant{color:#1a0c3b;background:var(--t-savant)}
.t-master{color:#2a1305;background:var(--t-master)}
.t-grandmaster{color:#2b0606;background:var(--t-grandmaster)}
.t-legend{color:#2a1f02;background:var(--t-legend)}

/* play view */
.play-top{display:flex;align-items:center;justify-content:space-between;margin:4px 0 14px}
.qcount{font-size:13px;color:var(--muted);font-weight:700}
.x-btn{background:none;border:none;color:var(--faint);font-size:22px;cursor:pointer;line-height:1}
.back-btn{background:none;border:0;color:var(--muted);font:inherit;font-size:14px;font-weight:600;cursor:pointer;padding:0}
.timer{height:7px;background:#0f1626;border-radius:999px;overflow:hidden;margin-bottom:22px;border:1px solid var(--line)}
.timer > i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--green),var(--gold));border-radius:999px;transition:width .12s linear}
.timer.warn > i{background:linear-gradient(90deg,var(--amber),var(--red))}
.q{font-size:21px;font-weight:700;line-height:1.35;margin-bottom:22px;min-height:84px}
/* image questions (flags, country shapes, etc.) — the picture IS the prompt */
.q-img-wrap{display:flex;justify-content:center;margin:0 0 16px}
.q-img{max-width:100%;max-height:190px;width:auto;height:auto;border-radius:12px;border:1px solid var(--line);background:#0f1626;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.q-img-wrap{flex-direction:column;align-items:center}
.q-credit{font-size:9.5px;color:var(--faint);margin-top:5px;text-align:center;max-width:100%;line-height:1.3}
/* category/section sticker icons (PNG) — replace the old emoji; emoji is the fallback */
.ico{display:inline-block;vertical-align:middle;object-fit:contain}
.ico-emo{display:inline-block;line-height:1;vertical-align:middle}
.nrq .q-img-wrap+.q{min-height:0}
.choices{display:flex;flex-direction:column;gap:11px}
.choice{
  text-align:left;background:var(--card);border:1.5px solid var(--line);border-radius:12px;
  padding:15px 16px;font-size:16px;font-weight:600;color:var(--text);cursor:pointer;transition:.12s;
  display:flex;align-items:center;gap:12px
}
.choice .ltr{width:26px;height:26px;border-radius:7px;background:#0f1626;border:1px solid var(--line2);display:grid;place-items:center;font-size:13px;font-weight:800;color:var(--muted);flex:0 0 auto}
.choice:hover:not(:disabled){border-color:var(--line2);background:var(--card2)}
.choice:disabled{cursor:default}
.choice.correct{border-color:var(--green);background:rgba(55,208,127,.14)}
.choice.correct .ltr{background:var(--green);color:#04210f;border-color:var(--green)}
.choice.wrong{border-color:var(--red);background:rgba(255,93,93,.13)}
.choice.wrong .ltr{background:var(--red);color:#280505;border-color:var(--red)}
.choice.dim{opacity:.45}
.choice.picked{border-color:var(--gold);background:rgba(245,184,46,.10)}
.choice.picked .ltr{background:var(--gold);color:#241a02;border-color:var(--gold)}
.qfb{margin-top:14px;display:flex;flex-direction:column;align-items:center;gap:11px;animation:qfbin .18s ease}
@keyframes qfbin{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.qstat{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:8px;font-size:14px}
.qstat .qs-ok{color:var(--green)}
.qstat .qs-no{color:var(--red)}
.qstat .qs-pct{color:var(--muted);font-size:13px}
.qstat .qs-pts{color:var(--gold);font-weight:800;font-size:14px}
.qstat .qs-pts.zero{color:var(--faint);font-weight:700}
.qnext{appearance:none;border:none;cursor:pointer;font-family:inherit;font-weight:800;font-size:15px;color:#10161f;background:var(--gold);border-radius:12px;padding:13px 30px}
.qnext:hover{background:var(--gold-d)}
.qprog{display:flex;gap:6px;justify-content:center;margin:0 0 13px}
.qp{flex:1 1 0;max-width:42px;height:30px;border-radius:8px;display:grid;place-items:center;font-size:12px;font-weight:800;background:var(--card2);border:1px solid var(--line);color:var(--muted);transition:.15s}
.qp.cur{border-color:var(--gold);color:var(--gold);box-shadow:0 0 0 2px rgba(245,184,46,.18)}
.qp.correct{background:rgba(55,208,127,.16);border-color:var(--green);color:var(--green)}
.qp.wrong{background:rgba(255,93,93,.14);border-color:var(--red);color:var(--red)}
.qp.done{background:var(--line2);border-color:var(--line2);color:var(--text)}
.gh-empty{color:var(--muted);font-size:14px;line-height:1.5;background:var(--card);border:1px solid var(--line);border-radius:13px;padding:18px}
.gh-list{display:flex;flex-direction:column;gap:11px}
.gh-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 15px}
.gh-top{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.gh-emoji{font-size:20px;line-height:1}
.gh-name{font-weight:800;font-size:15px;flex:1 1 auto}
.gh-date{color:var(--muted);font-size:12px;white-space:nowrap}
.gh-sq{font-size:18px;letter-spacing:2px;line-height:1.2;margin-bottom:6px}
.gh-meta{color:var(--muted);font-size:13px;margin-bottom:11px}
.gh-actions{display:flex;gap:9px}
.gh-view,.gh-share{flex:1 1 0;appearance:none;cursor:pointer;font-family:inherit;font-weight:700;font-size:13.5px;border-radius:10px;padding:10px 12px;border:1px solid var(--line2);background:transparent;color:var(--text)}
.gh-view:hover{border-color:var(--gold);background:var(--card2)}
.gh-share{background:var(--gold);border-color:var(--gold);color:#10161f}
.gh-share:hover{background:var(--gold-d)}
.review{display:flex;flex-direction:column;gap:11px;margin-bottom:16px}
.rv{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 13px}
.rv-img-wrap{display:flex;justify-content:center;margin:0 0 10px}
.rv-img{max-width:100%;max-height:120px;width:auto;border-radius:8px;border:1px solid var(--line);background:#0f1626}
.rvq{font-size:14px;font-weight:600;margin-bottom:9px;line-height:1.4}
.rvn{color:var(--gold);font-variant-numeric:tabular-nums}
.rc{font-size:13px;padding:7px 11px;border-radius:8px;border:1px solid var(--line);margin-bottom:6px;color:var(--muted)}
.rc:last-child{margin-bottom:0}
.rc-correct{border-color:var(--green);background:rgba(55,208,127,.12);color:var(--text);font-weight:600}
.rc-wrong{border-color:var(--red);background:rgba(255,93,93,.10);color:var(--text)}
.rv-report{display:block;width:100%;text-align:right;margin-top:9px;background:none;border:none;color:var(--faint);font-size:11.5px;font-weight:600;cursor:pointer;padding:0}
.rv-report:hover:not(:disabled){color:var(--muted)}
.rv-report:disabled{color:var(--green);cursor:default}
.flagbtn{margin-top:14px;align-self:center;background:none;border:none;color:var(--faint);font-size:12.5px;cursor:pointer;padding:6px}
.flagbtn:hover:not(:disabled){color:var(--muted)}
.flagbtn:disabled{color:var(--green);cursor:default}

/* ready screen + countdown */
.ready{text-align:center;padding:34px 10px 10px}
.ready-emoji{font-size:56px;line-height:1}
.ready-title{font-size:25px;font-weight:800;margin:12px 0 4px}
.ready-rank{font-size:14.5px;font-weight:700;margin:0 0 8px;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.ready-rank .rr-elo{color:var(--muted);font-weight:600}
.ready-lb-link{display:inline-flex;align-items:center;gap:6px;margin:3px auto 6px;background:none;border:none;color:var(--gold);font-size:13.5px;font-weight:700;cursor:pointer;font-family:inherit}
.ready-lb-link:hover{text-decoration:underline}
.gh-flow-link{display:block;width:fit-content;margin:16px auto 0;background:none;border:none;color:var(--muted);font-size:13px;font-weight:600;cursor:pointer;font-family:inherit}
.gh-flow-link:hover{color:var(--text);text-decoration:underline}
/* collection (earned cosmetics) */
.coll-sub{font-size:13px;color:var(--muted);text-align:center;margin:-4px auto 14px;max-width:420px}
.coll-sec{font-size:13.5px;font-weight:800;margin:18px auto 10px;max-width:460px}
.coll-sec .coll-sech{font-weight:600;color:var(--faint);font-size:12px}
.coll-item{display:flex;align-items:center;gap:14px;padding:11px 14px;border-radius:12px;background:var(--card);border:1px solid transparent;margin:0 auto 8px;max-width:460px;opacity:.5}
.coll-item.earned{opacity:1;border-color:var(--line2)}
.coll-av{flex:0 0 auto;display:inline-flex;width:46px;height:46px;align-items:center;justify-content:center}
.coll-info{flex:1;min-width:0}
.coll-n{font-size:14px;font-weight:700}
.coll-tick{font-size:11px;color:var(--green);font-weight:800}
.coll-p{font-size:12px;color:var(--muted);margin-top:1px}
.ready-no{font-size:12.5px;font-weight:700;letter-spacing:.1em;color:var(--faint);text-transform:uppercase;margin:0 0 18px}
.ready-sub{font-size:14px;color:var(--muted);max-width:340px;margin:0 auto 28px;line-height:1.55}
.ready-btn{max-width:260px;margin:0 auto}
.ready-hint{font-size:12px;color:var(--faint);margin-top:14px}
.ready-share{max-width:360px;margin:26px auto 0}
.rs-label{font-size:11.5px;color:var(--faint);text-transform:uppercase;letter-spacing:.6px;margin-bottom:11px}
.countdown{display:flex;align-items:center;justify-content:center;min-height:320px}
.cd-num{font-size:104px;font-weight:900;color:var(--gold);line-height:1;animation:cdpop .7s ease}
@keyframes cdpop{0%{transform:scale(.55);opacity:0}30%{transform:scale(1.12);opacity:1}100%{transform:scale(1);opacity:1}}

/* ===== neon "Arena Start" ready screen (--tier = the player's tier colour) ===== */
.nr{max-width:432px;margin:0 auto;--tier:var(--gold);position:relative}
.nr-top{display:flex;align-items:center;justify-content:space-between;padding:2px 0 0;gap:10px}
/* top-right link to the topic's broader category (its group) on the ready screen */
.nr-cat{flex:none;max-width:48%;display:inline-flex;align-items:center;gap:4px;min-width:0;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:7px 13px;font:inherit;font-size:12.5px;font-weight:700;color:var(--muted);cursor:pointer;white-space:nowrap;transition:.12s}
.nr-cat .nc-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nr-cat:hover{color:var(--text);border-color:var(--line2)}
.nr-brand{display:flex;align-items:center;gap:9px;cursor:pointer;background:none;border:0;padding:0;font:inherit;text-align:left;min-width:0}
.nr-brand .brand-ico{width:38px;height:38px;flex:none;filter:drop-shadow(0 0 6px rgba(245,184,46,.4))}
.nr-wm{display:block;font-family:var(--font-brand);font-weight:900;font-size:18px;letter-spacing:0;color:var(--text);line-height:1}
.nr-wm b{color:var(--gold);font-weight:900}
.nr-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:13px 0 0}
.nr-back{display:inline-flex;align-items:center;gap:4px;flex:none;background:var(--card);border:1px solid var(--line);border-radius:999px;font:inherit;font-size:12.5px;color:var(--muted);font-weight:700;cursor:pointer;padding:7px 14px 7px 10px;transition:.12s}
.nr-back:hover{color:var(--text);border-color:var(--line2)}
.nr-back svg{width:14px;height:14px}
.nr-hero{display:flex;flex-direction:column;align-items:center;padding:12px 0 2px;text-align:center}
.nr-rankgroup{display:flex;flex-direction:column;align-items:center;gap:8px;margin:2px 0 14px}
.nr-orbwrap{position:relative;width:150px;height:150px;display:flex;align-items:center;justify-content:center}
.nr-halo{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--tier) 42%,transparent) 0%,color-mix(in srgb,var(--tier) 10%,transparent) 42%,transparent 68%);filter:blur(2px)}
.nr-ring{position:absolute;inset:14px;border-radius:50%;border:1px solid color-mix(in srgb,var(--tier) 55%,transparent);box-shadow:0 0 18px color-mix(in srgb,var(--tier) 38%,transparent),inset 0 0 22px color-mix(in srgb,var(--tier) 20%,transparent)}
.nr-ring2{position:absolute;inset:26px;border-radius:50%;border:1px solid color-mix(in srgb,var(--tier) 18%,transparent)}
.nr-orb{position:relative;width:94px;height:94px;border-radius:50%;background:radial-gradient(circle at 50% 32%,#20304f 0%,#131b2d 70%,#0e1422 100%);border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;font-size:46px;line-height:1;box-shadow:inset 0 2px 10px rgba(255,255,255,.07),inset 0 -10px 18px rgba(0,0,0,.5),0 0 30px color-mix(in srgb,var(--tier) 18%,transparent)}
.nr-topic{font-family:var(--font-display);font-weight:800;font-size:27px;margin-top:12px;line-height:1.05;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.nr-state{margin-top:9px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;display:inline-flex;align-items:center;gap:8px}
.nr-state.rank{color:var(--green)}
.nr-state.prac{color:var(--amber)}
.nr-state.fun{color:#a78bfa}
.nr-state::before,.nr-state::after{content:"";width:16px;height:1px;background:currentColor;opacity:.45}
.nr-chips{display:flex;gap:10px;margin-top:16px}
.nr-chip{flex:1;min-width:0;border-radius:14px;background:linear-gradient(180deg,var(--card2),var(--card));border:1px solid var(--line);padding:11px 13px;overflow:hidden;position:relative;font:inherit;color:inherit;text-align:left}
.nr-chip.pack,.nr-chip.tier{cursor:pointer;transition:.12s}
.nr-chip.pack:hover{border-color:color-mix(in srgb,var(--gold) 45%,transparent)}
.nr-chip.tier:hover{border-color:color-mix(in srgb,var(--tier) 80%,transparent)}
.nr-chip.pack::after,.nr-chip.tier::after{content:"›";position:absolute;top:8px;right:11px;color:var(--faint);font-size:16px;font-weight:700;line-height:1}
.nr-chip.tier{border-color:color-mix(in srgb,var(--tier) 45%,transparent);box-shadow:inset 0 0 18px color-mix(in srgb,var(--tier) 10%,transparent)}
.nr-lbl{font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--faint);font-weight:700}
.nr-tier{font-family:var(--font-display);font-weight:800;font-size:21px;line-height:1;color:var(--tier);margin-top:6px;text-shadow:0 0 14px color-mix(in srgb,var(--tier) 45%,transparent);white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:7px}
.nr-tdot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--tier);box-shadow:0 0 8px var(--tier);margin-right:6px;vertical-align:middle}
.nr-elo{font-size:12.5px;color:var(--muted);margin-top:5px;font-weight:600;letter-spacing:.03em}
.nr-elo b{color:#cdd6ef;font-weight:700}
.nr-elo #ready-rank{color:var(--gold)}
.nr-pno{font-family:var(--font-display);font-weight:800;font-size:24px;line-height:1;color:var(--gold);margin-top:5px;letter-spacing:.04em;text-transform:uppercase;text-shadow:0 0 14px rgba(245,184,46,.5)}
.nr-psub{font-size:11px;color:var(--muted);margin-top:4px;font-weight:500}
.nr-lb{display:flex;justify-content:center;margin-top:13px}
.nr-lb button{display:inline-flex;align-items:center;gap:6px;background:none;border:0;font:inherit;font-size:13px;font-weight:700;color:var(--gold);cursor:pointer}
.nr-lb button:hover{text-decoration:underline}
.nr-lb svg{width:14px;height:14px}
.nr-rules{margin-top:16px}
.nr-rt{font-size:9px;letter-spacing:.17em;text-transform:uppercase;color:var(--faint);font-weight:700;margin:0 0 10px 2px;display:flex;align-items:center;gap:8px}
.nr-rt::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
.nr-rgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.nr-rule{border-radius:13px;background:var(--card);border:1px solid var(--line);padding:11px 12px;display:flex;align-items:center;gap:10px}
.nr-rule.wide{grid-column:1 / -1}
.nr-ico{width:30px;height:30px;border-radius:9px;flex:none;background:color-mix(in srgb,var(--tier) 10%,transparent);border:1px solid color-mix(in srgb,var(--tier) 25%,transparent);display:flex;align-items:center;justify-content:center;color:var(--tier)}
.nr-ico svg{width:15px;height:15px}
.nr-rule.gold .nr-ico{background:rgba(245,184,46,.1);border-color:rgba(245,184,46,.3);color:var(--gold)}
.nr-rmain{font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--text);line-height:1.1}
.nr-rsub{font-size:10px;color:var(--muted);margin-top:2px;line-height:1.2}
.nr-cta{width:100%;border:none;cursor:pointer;border-radius:15px;padding:17px;margin-top:20px;font-family:var(--font-display);font-weight:800;font-size:19px;letter-spacing:.04em;text-transform:uppercase;color:var(--accent-ink);background:linear-gradient(180deg,#ffd266,#f5b82e 55%,#e0a316);box-shadow:0 0 0 1px rgba(245,184,46,.55),0 8px 26px rgba(245,184,46,.4),inset 0 1px 0 rgba(255,255,255,.55),inset 0 -3px 8px rgba(120,80,0,.35);display:flex;align-items:center;justify-content:center;gap:10px;animation:nrpulse 2.1s ease-in-out infinite}
.nr-cta:hover{filter:brightness(1.04)}
.nr-cta svg{width:18px;height:18px}
.nr-startnote{margin-top:10px;padding:0 10px;text-align:center;font-size:12px;line-height:1.35;font-weight:700;color:var(--muted)}
.nr-startnote.rank{color:#f2c85c}

/* ---- Friend duels ---- */
.nrr-duel{background:linear-gradient(180deg,#7d97ff,#4f6bf0 55%,#3f54d8);color:#fff;box-shadow:0 0 0 1px rgba(79,107,240,.55),0 8px 26px rgba(79,107,240,.38),inset 0 1px 0 rgba(255,255,255,.4);animation:none;text-transform:none;letter-spacing:.01em}
.nrr-duelresult{margin-top:16px}
.nrr-actions{display:flex;margin-top:18px;border-radius:15px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.05)}
.nrr-half{flex:1;min-width:0;border:none;cursor:pointer;padding:16px 8px;font-family:var(--font-display);font-weight:800;font-size:16px;letter-spacing:.02em;color:var(--accent-ink);background:linear-gradient(180deg,#ffd266,#f5b82e 55%,#e0a316);display:flex;align-items:center;justify-content:center;gap:8px}
.nrr-half.nrr-duel{color:#fff;background:linear-gradient(180deg,#7d97ff,#4f6bf0 55%,#3f54d8);text-transform:none;animation:none;letter-spacing:.01em}
.nrr-half+.nrr-half{box-shadow:inset 2px 0 0 rgba(0,0,0,.18)}
.nrr-half:hover{filter:brightness(1.05)}
.nrr-half svg{width:17px;height:17px}
.dp-ov{position:fixed;inset:0;z-index:200;background:rgba(6,9,16,.72);display:flex;align-items:center;justify-content:center;padding:18px;animation:dpf .15s ease}
@keyframes dpf{from{opacity:0}to{opacity:1}}
.dp-card{width:100%;max-width:360px;background:var(--card,#161e30);border:1px solid var(--line,#26304a);border-radius:18px;padding:20px 18px;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.dp-h{font-size:18px;font-weight:800;color:var(--text,#eef2fb);text-align:center}
.dp-sub{font-size:13px;color:var(--muted,#9aa7c7);text-align:center;margin:5px 0 16px;line-height:1.45}
.dp-list{display:flex;flex-direction:column;gap:7px;max-height:46vh;overflow-y:auto}
.dp-friend{display:flex;align-items:center;gap:11px;width:100%;background:var(--card2,#1c2740);border:1px solid var(--line,#26304a);border-radius:12px;padding:9px 12px;cursor:pointer;font:inherit;color:var(--text,#eef2fb)}
.dp-friend:hover{border-color:var(--gold,#f5b82e)}
.dp-friend:disabled{cursor:default}.dp-friend.sending{opacity:.45}
.dp-fn{flex:1;text-align:left;font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dp-go{color:#7d97ff;font-size:15px}
.dp-cancel{display:block;width:100%;margin-top:14px;background:none;border:0;color:var(--muted,#9aa7c7);font:inherit;font-size:13px;cursor:pointer;text-decoration:underline}
.dr-card{border:1px solid var(--line2);border-radius:16px;padding:16px;text-align:center;background:var(--card2)}
.dr-card.dr-win{border-color:var(--green);box-shadow:0 0 26px rgba(55,208,127,.22)}
.dr-card.dr-loss{border-color:var(--red)}
.dr-card.dr-tie{border-color:var(--gold)}
.dr-verdict{font-family:var(--font-display);font-weight:800;font-size:22px;letter-spacing:.03em;margin-bottom:10px;color:var(--text)}
.dr-card.dr-win .dr-verdict{color:var(--green)}
.dr-card.dr-loss .dr-verdict{color:var(--red)}
.dr-card.dr-tie .dr-verdict{color:var(--gold)}
.dr-row{display:flex;align-items:center;justify-content:space-between;padding:8px 11px;border-radius:10px;background:rgba(255,255,255,.05)}
.dr-row.dr-rowwin{background:rgba(55,208,127,.16);box-shadow:inset 0 0 0 1px rgba(55,208,127,.4)}
.dr-card.dr-pending .dr-verdict{color:var(--muted);font-size:15px;font-family:var(--font);font-weight:600;margin-bottom:0}
.dr-name{font-weight:700;color:var(--text)}
.dr-score{font-family:var(--font-display);font-weight:800;font-size:20px;color:var(--text)}
.dr-vs{font-size:11px;color:var(--faint);margin:5px 0;text-transform:uppercase;letter-spacing:.12em}
.di-card{margin:18px auto 0;max-width:440px;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:24px 20px;text-align:center}
.di-emo{font-size:40px;line-height:1}
.di-head{font-family:var(--font-display);font-weight:800;font-size:22px;margin-top:8px;color:var(--text)}
.di-topic{display:flex;align-items:center;justify-content:center;gap:8px;margin:14px 0;font-size:18px;color:var(--text)}
.di-topic img,.di-topic svg{width:34px;height:34px;border-radius:8px}
.di-score{color:var(--muted);font-size:15px;margin-bottom:4px}
.di-sub{color:var(--faint);font-size:13px;margin:10px 0}
.duel-outcome{max-width:440px;margin:24px auto 0}
.duels-wrap{max-width:520px;margin:0 auto;padding:0 4px}
.du-row{width:100%;display:flex;align-items:center;gap:10px;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-top:8px;cursor:pointer;color:var(--text)}
.du-row:hover{border-color:var(--line2)}
.du-topic{flex:1;font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.du-opp{color:var(--muted);font-size:13px}
.du-sc{font-family:var(--font-display);font-weight:800;color:var(--muted);font-size:14px}
.du-b{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:3px 8px;border-radius:999px;white-space:nowrap}
.du-won{background:rgba(55,208,127,.16);color:var(--green)}
.du-lost{background:rgba(255,93,93,.16);color:var(--red)}
.du-tie{background:rgba(245,184,46,.16);color:var(--gold)}
.du-wait{background:rgba(255,255,255,.06);color:var(--faint)}
.du-turn{background:rgba(79,107,240,.18);color:#8aa0ff}
.kd-frduels{width:100%;margin:10px 0 0;padding:11px;border-radius:12px;border:1px solid var(--line2);background:rgba(79,107,240,.12);color:#8aa0ff;font-weight:800;cursor:pointer;font-size:15px}
.kd-frduels:hover{background:rgba(79,107,240,.2)}

@keyframes nrpulse{0%,100%{box-shadow:0 0 0 1px rgba(245,184,46,.55),0 8px 26px rgba(245,184,46,.4),inset 0 1px 0 rgba(255,255,255,.55),inset 0 -3px 8px rgba(120,80,0,.35)}50%{box-shadow:0 0 0 1px rgba(245,184,46,.8),0 10px 36px rgba(245,184,46,.62),inset 0 1px 0 rgba(255,255,255,.6),inset 0 -3px 8px rgba(120,80,0,.35)}}
.nr-foot{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:14px}
.nr-foot button{display:inline-flex;align-items:center;gap:6px;background:none;border:0;font:inherit;font-size:11.5px;color:var(--muted);font-weight:600;cursor:pointer}
.nr-foot button:hover{color:var(--text)}
.nr-foot svg{width:13px;height:13px}
.nr-foot .nr-dot{width:3px;height:3px;border-radius:50%;background:var(--line2)}
/* global reduced-motion FLOOR — one rule kills entrance/loop animation app-wide (JS mirrors via ANIM.off) */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}

/* ---- results screen: the one daily climax. Final state is the default; .kd-anim adds entrance sugar ---- */
@keyframes kdPop{0%{opacity:0;transform:scale(.6)}60%{transform:scale(1.12)}100%{opacity:1;transform:scale(1)}}
@keyframes kdRise{0%{opacity:0;transform:translateY(9px)}100%{opacity:1;transform:translateY(0)}}
@keyframes kdSq{0%{opacity:0;transform:scale(.3)}100%{opacity:1;transform:scale(1)}}
.cl-squares .sq{display:inline-block}
.nrr.kd-anim .nrr-med{animation:kdPop .3s ease both}
.nrr.kd-anim .cl-verdict{animation:kdRise .22s ease both .16s}
.nrr.kd-anim .cl-line{animation:kdRise .26s ease both .3s}
.nrr.kd-anim .cl-squares .sq{opacity:0;animation:kdSq .22s ease forwards;animation-delay:calc(.42s + var(--i) * .05s)}
.nrr.kd-anim .cl-leg{animation:kdRise .25s ease both .92s}
.nrr.kd-anim .bigrank{animation:kdRise .3s ease both .5s}

/* ---- rare-moment celebration overlay (rank-up / perfect round) ---- */
.kd-celebrate{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(6,9,16,.85);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:kdFadeIn .18s ease both}
.kd-celebrate.out{animation:kdFadeOut .2s ease both}
.kd-cel-card{text-align:center;max-width:330px;padding:30px 32px 26px;border-radius:22px;background:linear-gradient(180deg,#1d2740,#131a2b);border:1.5px solid color-mix(in srgb,var(--cel) 60%,transparent);box-shadow:0 26px 70px rgba(0,0,0,.55),0 0 46px -12px var(--cel);animation:kdSlam .42s cubic-bezier(.2,1.35,.5,1) both}
.kd-cel-big{font-family:var(--font-display);font-weight:800;font-size:36px;letter-spacing:.04em;color:var(--cel);text-shadow:0 1px 2px rgba(0,0,0,.5),0 0 22px color-mix(in srgb,var(--cel) 45%,transparent)}
.kd-cel-sub{font-size:15px;font-weight:700;color:#cdd6ea;margin-top:10px;opacity:1}
.kd-confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.kd-pip{position:absolute;top:-14px;width:8px;height:13px;border-radius:2px;opacity:0;animation-name:kdConfetti;animation-timing-function:ease-in;animation-fill-mode:forwards}
@keyframes kdConfetti{0%{opacity:0;transform:translateY(-12px) translateX(0) rotate(0)}10%{opacity:1}100%{opacity:0;transform:translateY(88vh) translateX(var(--x)) rotate(var(--rot))}}
@keyframes kdSlam{0%{opacity:0;transform:translateY(-20px) scale(.7)}60%{transform:translateY(0) scale(1.08)}100%{opacity:1;transform:scale(1)}}
@keyframes kdFadeIn{from{opacity:0}to{opacity:1}}
@keyframes kdFadeOut{from{opacity:1}to{opacity:0}}

/* ===== Arena play (question) screen — tier-coloured accents ===== */
.nrq{max-width:480px;margin:0 auto;--tier:var(--gold)}
.nrq-top{display:flex;align-items:center;gap:10px;padding:2px 0 0}
.nrq-topic{display:flex;align-items:center;gap:8px;min-width:0;font-family:var(--font-display);font-weight:800;font-size:16px}
.nrq-topic .e{font-size:20px;line-height:1;flex:none;filter:drop-shadow(0 0 8px color-mix(in srgb,var(--tier) 45%,transparent))}
.nrq-topic .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nrq-x{margin-left:auto;flex:none;width:34px;height:34px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center}
.nrq-x:hover{color:var(--text);border-color:var(--line2)}
.nrq-x svg{width:15px;height:15px}
.nrq-actions{margin-left:auto;display:flex;gap:6px;align-items:center}
.nrq-actions .nrq-x{margin-left:0}
.nrq-snd svg{width:17px;height:17px}
.nrq-meta{display:flex;align-items:center;gap:10px;margin:13px 0 11px;font-weight:700}
.nrq-count{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.nrq-count b{color:var(--tier);font-family:var(--font-display);font-size:14px;margin:0 1px}
.nrq-mode{margin-left:auto;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase}
.nrq-mode.prac{color:var(--amber)}
.nrq-mode.rank{color:var(--green)}
.nrq .qp.cur{border-color:var(--tier);color:var(--tier);box-shadow:0 0 0 2px color-mix(in srgb,var(--tier) 20%,transparent),0 0 12px color-mix(in srgb,var(--tier) 28%,transparent)}
.nrq .q{font-size:22px;line-height:1.32}
.nrq .choice{background:linear-gradient(180deg,var(--card2),var(--card))}
.nrq .choice:not(.correct):not(.wrong):not(.picked):hover:not(:disabled){border-color:color-mix(in srgb,var(--tier) 55%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--tier) 22%,transparent)}
.nrq .choice:not(.correct):not(.wrong):not(.picked) .ltr{background:color-mix(in srgb,var(--tier) 14%,transparent);border-color:color-mix(in srgb,var(--tier) 32%,transparent);color:var(--tier)}

/* ===== Arena results screen ===== */
.nrr{max-width:560px;margin:0 auto;--tier:var(--gold)}
.nrr-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:2px 0 10px}
.nrr-back{display:inline-flex;align-items:center;gap:6px;background:none;border:0;font:inherit;font-size:12.5px;color:var(--muted);font-weight:600;cursor:pointer;padding:2px 0}
.nrr-back:hover{color:var(--text)}
.nrr-back svg{width:14px;height:14px}
.nrr-brand{display:flex;align-items:center;gap:8px;background:none;border:0;cursor:pointer;font:inherit;padding:0}
.nrr-brand .brand-ico{width:32px;height:32px;flex:none;filter:drop-shadow(0 0 6px rgba(245,184,46,.4))}
.nrr-wm{font-family:var(--font-brand);font-weight:900;font-size:15px;letter-spacing:0;color:var(--text)}
.nrr-wm b{color:var(--gold);font-weight:900}
.nrr .closer{background:linear-gradient(180deg,var(--card2),var(--card));border-radius:18px;padding:20px 16px 16px;box-shadow:0 0 34px color-mix(in srgb,var(--tier) 12%,transparent),inset 0 0 24px color-mix(in srgb,var(--tier) 6%,transparent)}
.nrr .closer:not(.cl-flawless){border-color:color-mix(in srgb,var(--tier) 38%,transparent)}
.nrr-med{width:74px;height:74px;margin:0 auto 12px;position:relative;display:flex;align-items:center;justify-content:center}
/* when the med holds the wide shield rank badge (ranked results) it sizes to content */
.nrr-med.nrr-med-badge{width:auto;height:auto;max-width:100%}
.nrr-med .halo{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--tier) 42%,transparent),transparent 68%);filter:blur(2px)}
.nrr-med .ring{position:absolute;inset:7px;border-radius:50%;border:1px solid color-mix(in srgb,var(--tier) 50%,transparent);box-shadow:0 0 14px color-mix(in srgb,var(--tier) 35%,transparent),inset 0 0 14px color-mix(in srgb,var(--tier) 18%,transparent)}
.nrr-med .orb{position:relative;width:50px;height:50px;border-radius:50%;background:radial-gradient(circle at 50% 32%,#20304f,#0e1422 75%);border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;font-size:26px;line-height:1;box-shadow:inset 0 1px 6px rgba(255,255,255,.06),inset 0 -6px 12px rgba(0,0,0,.5)}
.nrr .closer .res-title{font-size:15px;margin:0 0 6px;color:var(--muted)}
.nrr-share{animation:none;margin-top:14px;font-size:16px;padding:15px}
.nrr .title-earned{margin-top:16px}
.nrr .bigrank{background:linear-gradient(180deg,var(--card2),var(--card));border-color:color-mix(in srgb,var(--tier) 28%,transparent);margin-top:14px}
.nrr .bigrank .badge{box-shadow:0 0 16px color-mix(in srgb,var(--tier) 35%,transparent)}
.nrr-foot{margin-top:6px}
.nrr-foot .gh-flow-link{display:inline-flex;align-items:center;gap:5px}
.nrr-foot .gh-flow-link svg{width:13px;height:13px}
/* post-game keep-playing CTAs: Play again (this topic, previous packs) + Try another (next topic) */
.nrr-next{display:flex;gap:10px;margin-top:14px}
.nrr-next .nr-cta{flex:1;min-width:0;margin-top:0;animation:none;flex-direction:column;gap:2px;padding:13px 12px;font-size:15px;letter-spacing:.02em;line-height:1.12}
.nrr-next .nr-cta small{font-size:11px;font-weight:700;text-transform:none;letter-spacing:0;opacity:.85;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nrr-another{color:var(--text);background:var(--card2);box-shadow:0 0 0 1px var(--line2),inset 0 1px 0 rgba(255,255,255,.04)}
.nrr-another small{color:var(--muted);opacity:1}
/* keep-playing, category-forward: a big "More <category>" card, then Play again / Try another chips */
.nrr-catcard{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;width:100%;margin-top:14px;background:linear-gradient(180deg,var(--card2),var(--card));border:1px solid rgba(245,184,46,.45);border-radius:16px;padding:16px 14px;cursor:pointer;font:inherit;transition:.12s}
.nrr-catcard:hover{border-color:var(--gold);transform:translateY(-1px)}
.nrr-catcard .ncc-ico{flex:none}
.nrr-catcard .ncc-ico .ico{width:48px;height:48px;display:block}
.nrr-catcard .ncc-mid{max-width:100%;display:flex;flex-direction:column;align-items:center;gap:3px}
.nrr-catcard .ncc-main{font-size:16.5px;font-weight:800;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nrr-catcard .ncc-sub{font-size:11.5px;font-weight:700;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nrr-catcard .ncc-go{display:none}
.nrr-chips{display:flex;gap:9px;margin-top:9px}
.nrr-chip{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--card2);border:1px solid var(--line2);border-radius:12px;padding:11px 10px;font:inherit;font-size:13.5px;font-weight:800;color:var(--text);cursor:pointer;line-height:1.12;transition:.12s}
.nrr-chip small{font-size:11px;font-weight:700;color:var(--muted);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nrr-chip:hover{border-color:var(--faint)}
.nrr-chip .nrc-ico{width:30px;height:30px;border-radius:9px;background:rgba(245,184,46,.14);color:var(--gold);display:flex;align-items:center;justify-content:center;font-size:16px;margin-bottom:3px}
.nrr-chip .nrc-l{font-size:13.5px;font-weight:800}

/* ===== Arena theme — home / lobby (gradient cards, glowing tiles + brand) ===== */
.brand .logo .brand-ico{filter:drop-shadow(0 0 10px rgba(245,184,46,.35))}
.stat{background:linear-gradient(180deg,var(--card2),var(--card))}
.strip .stat-btn{transition:.13s}
.strip .stat-btn:hover{border-color:var(--line2);transform:translateY(-1px)}
.search{background:linear-gradient(180deg,var(--card2),var(--card));border-color:var(--line)}
.search:focus{border-color:color-mix(in srgb,var(--gold) 60%,transparent);box-shadow:0 0 0 3px rgba(245,184,46,.12)}
.section-h{display:flex;align-items:center;gap:9px}
.section-h::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
.gtile{background:linear-gradient(180deg,var(--card2),var(--card))}
.gtile:hover{border-color:color-mix(in srgb,var(--gold) 45%,transparent);background:var(--card2);transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.38),0 0 0 1px color-mix(in srgb,var(--gold) 20%,transparent)}
.gtile .gt-emo{filter:drop-shadow(0 4px 10px rgba(0,0,0,.45))}
.gtile-pop:hover{border-color:color-mix(in srgb,var(--gold) 70%,transparent);box-shadow:0 12px 30px rgba(0,0,0,.38),0 0 0 1px color-mix(in srgb,var(--gold) 35%,transparent),0 0 24px rgba(245,184,46,.14)}

/* ===== Arena home — Daily Hero (orb glows in the player's tier colour) ===== */
.home{--tier:var(--gold)}
.home .strip,.home .foot{max-width:none}
.hhero{display:flex;align-items:center;gap:26px;background:linear-gradient(180deg,var(--card2),var(--card));border:1px solid color-mix(in srgb,var(--tier) 32%,transparent);border-radius:20px;padding:24px 28px;margin:6px 0 16px;position:relative;overflow:hidden;box-shadow:0 0 40px color-mix(in srgb,var(--tier) 10%,transparent),inset 0 0 30px color-mix(in srgb,var(--tier) 5%,transparent)}
.hhero-orb{position:relative;width:128px;min-height:128px;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px}
.hh-orbtier{font-family:var(--font-display);font-weight:800;font-size:16px;line-height:1;letter-spacing:.02em}
.hh-orbcap{font-size:11px;font-weight:700;color:var(--muted);white-space:nowrap;line-height:1}
.hho-halo{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--tier) 42%,transparent),transparent 68%);filter:blur(2px)}
.hho-ring{position:absolute;inset:12px;border-radius:50%;border:1px solid color-mix(in srgb,var(--tier) 52%,transparent);box-shadow:0 0 16px color-mix(in srgb,var(--tier) 35%,transparent),inset 0 0 18px color-mix(in srgb,var(--tier) 18%,transparent)}
.hho-ring2{position:absolute;inset:22px;border-radius:50%;border:1px solid color-mix(in srgb,var(--tier) 18%,transparent)}
.hho-core{position:relative;width:80px;height:80px;border-radius:50%;background:radial-gradient(circle at 50% 32%,#20304f,#0e1422 75%);border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;font-size:40px;line-height:1;box-shadow:inset 0 2px 8px rgba(255,255,255,.06),inset 0 -8px 14px rgba(0,0,0,.5)}
.hhero-mid{flex:1;min-width:0}
.hhero-badge{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--tier);background:color-mix(in srgb,var(--tier) 12%,transparent);border:1px solid color-mix(in srgb,var(--tier) 30%,transparent);border-radius:999px;padding:4px 11px;margin-bottom:10px}
.hhero-title{font-family:var(--font-display);font-weight:800;font-size:30px;line-height:1.1;letter-spacing:-.01em}
.hhero-sub{font-size:13.5px;color:var(--muted);margin-top:9px;line-height:1.5;max-width:560px}
.hhero-act{flex:none;display:flex;flex-direction:column;align-items:stretch;gap:9px;width:264px}
.hhero-cta{margin-top:0;font-size:16px;letter-spacing:.03em;white-space:nowrap;animation:none;padding:16px;display:flex;align-items:center;justify-content:center;gap:11px}
/* day-streak chip lives ON the Play button — pressing Play feeds the streak; tapping the chip opens the calendar */
.hp-streak{display:inline-flex;align-items:center;gap:3px;flex:none;background:rgba(20,12,2,.2);border:1px solid rgba(20,12,2,.14);border-radius:999px;padding:4px 9px 4px 7px;cursor:pointer;line-height:1}
.hp-streak .hp-flame{font-size:14px;line-height:1}
.hp-streak b{font-size:14.5px;font-weight:800;color:#241a02;line-height:1}
.hp-streak:hover{background:rgba(20,12,2,.3)}
.hhero-browse{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--card2);border:1px solid var(--line2);border-radius:12px;font:inherit;font-size:14.5px;font-weight:700;color:var(--text);cursor:pointer;padding:13px;transition:.12s}
.hhero-browse svg{width:17px;height:17px;color:var(--gold)}
.hhero-browse:hover{background:#212c49;border-color:var(--faint)}
.hhero-yesterday{display:flex;align-items:center;justify-content:center;background:rgba(245,184,46,.08);border:1px solid rgba(245,184,46,.3);border-radius:10px;font:inherit;font-size:12.5px;font-weight:750;color:var(--gold);cursor:pointer;padding:9px 11px;transition:.12s}
.hhero-yesterday:hover{background:rgba(245,184,46,.14);border-color:rgba(245,184,46,.55)}
/* streak flame + number, top-right of the header (label lives in the profile) */
.hud-streak{position:absolute;top:14px;right:2px;z-index:6;display:inline-flex;align-items:center;gap:5px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:6px 12px 6px 9px;cursor:pointer;font:inherit;line-height:1;color:var(--text);font-weight:800;font-size:15px;transition:.12s}
.hud-streak .hs-flame{font-size:15px;line-height:1}
.hud-streak:hover{border-color:var(--line2)}
/* floating RANK pill straddling the hero's top edge (rank is the one prominent stat) */
.hhero-wrap{position:relative;margin:24px 0 18px}
.hhero-wrap .hhero{margin:0}
.hhero-rankgroup{display:flex;flex-direction:column;align-items:center;gap:6px;margin:0 0 12px}
.kd-rankbtn{background:none;border:0;font:inherit;cursor:pointer;padding:0;transition:.12s}
.kd-rankbtn:hover{filter:brightness(1.07);transform:translateY(-1px)}
.nr-rankgroup .kd-pfrank,.hhero-rankgroup .kd-pfrank{margin:0}
.hhero-rankpill{position:relative;display:inline-flex;align-items:center;background:var(--card);border:0;border-radius:999px;padding:9px 19px;cursor:pointer;font:inherit;box-shadow:0 8px 22px rgba(0,0,0,.5);transition:.12s}
.hhero-rankpill:hover{transform:translateY(-1px);filter:brightness(1.08)}
.hhero-rankpill .hrp-ring{position:absolute;inset:0;overflow:visible;pointer-events:none;z-index:0}
.hhero-rankpill .hrp-inner{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.hhero-rankpill .hrp-rating{font-size:22px;font-weight:800;line-height:1;color:var(--gold)}
.hhero-rankpill .hrp-tier{font-size:16px;font-weight:800;line-height:1}
.hhero-rankpill .hrp-num{font-size:11px;font-weight:800;line-height:1;color:var(--faint);padding-left:8px;border-left:1px solid var(--line2)}
.hhero-rankpill .hrp-num:empty{display:none}
/* win-card: leads with the shield rank badge (same as the ready screen); +18 rides the badge */
.closer-wrap{position:relative;margin:18px 0 16px}
.closer-wrap .closer{margin:0}
/* ELO delta — a small pill riding inline on the badge's rating line ("1,330 rating +73") */
.nrr-delta{display:inline-block;vertical-align:middle;margin-left:6px;font-size:12px;font-weight:800;line-height:1;padding:3px 8px;border-radius:999px}
.nrr-delta.up{background:var(--green);color:#06250f}
.nrr-delta.down{background:var(--red);color:#2a0606}
.nrr-delta.flat{background:var(--line2);color:var(--text)}
/* reset countdown — a quiet line under the orb */
/* daily-reset countdown — a quiet line UNDER the Play button (home hero + quiz ready screen) */
.reset-line{font-size:11.5px;color:var(--faint);line-height:1;text-align:center;margin-top:10px}
.reset-line #reset-cd{color:#5b8cff;font-weight:700}
.hhero-act .reset-line{margin-top:0}   /* the act column's flex gap already spaces it */
/* today's packs — a thin progress bar under the Play button */
.hhero-packs{display:flex;align-items:center;gap:11px}
.hhero-packs .hp-track{flex:1;height:5px;border-radius:999px;background:var(--line);overflow:hidden}
.hhero-packs .hp-fill{height:100%;border-radius:999px;background:#5b8cff;min-width:5px}
.hhero-packs .hp-label{font-size:11px;font-weight:700;color:var(--faint);white-space:nowrap}
.browsebar{display:flex;align-items:center;gap:16px;margin:6px 0 14px;max-width:none}
.browsebar .section-h{margin:0;flex:none}
.browsebar .section-h::after{display:none}
.browsebar .search{margin:0;flex:1;max-width:none}
.sh-sub{color:var(--faint);font-weight:600;letter-spacing:.02em;text-transform:none;font-size:11.5px}
.gfeatrow{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px;max-width:none}
.gfeatrow:has(.gfeat:only-child){grid-template-columns:1fr}
.gfeat{display:flex;align-items:center;gap:14px;text-align:left;background:linear-gradient(180deg,var(--card2),var(--card));border:1px solid var(--line);border-radius:16px;padding:16px 18px;cursor:pointer;color:inherit;transition:.13s;position:relative}
.gfeat:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--gold) 45%,transparent);box-shadow:0 12px 30px rgba(0,0,0,.38),0 0 0 1px color-mix(in srgb,var(--gold) 20%,transparent)}
.gfeat .gf-ico{width:50px;height:50px;flex:none;border-radius:13px;display:grid;place-items:center;font-size:26px;line-height:1;background:var(--card2);border:1px solid var(--line2)}
.gfeat-fav .gf-ico{color:var(--gold);background:rgba(245,184,46,.08);border-color:rgba(245,184,46,.3)}
.gfeat-pop{border-color:color-mix(in srgb,var(--gold) 40%,transparent)}
.gfeat-pop .gf-ico{background:rgba(245,184,46,.1);border-color:rgba(245,184,46,.35)}
.gf-txt{display:flex;flex-direction:column;min-width:0}
.gf-name{font-family:var(--font-display);font-weight:800;font-size:18px}
.gf-sub{font-size:12.5px;color:var(--faint);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gfeat-pop .gf-sub,.gfeat-fav .gf-sub{color:var(--gold)}
.gf-done{margin-left:auto;flex:none;font-size:11px;color:var(--green);font-weight:800;background:rgba(55,208,127,.12);border:1px solid rgba(55,208,127,.3);border-radius:999px;padding:3px 9px}
@media (max-width:680px){.hhero{flex-direction:column;text-align:center}.hhero-mid{text-align:center}.hhero-sub{margin-left:auto;margin-right:auto}.hhero-act{width:100%}.browsebar{flex-direction:column;align-items:stretch}.gfeatrow{grid-template-columns:1fr}}

/* Touch devices: never let :hover stick to the element under the last tap — on phones
   that made one answer choice / tile look stuck-highlighted with a border. Reset to resting. */
@media (hover:none){
  .choice:hover:not(:disabled){border-color:var(--line);background:linear-gradient(180deg,var(--card2),var(--card))}
  .nrq .choice:not(.correct):not(.wrong):not(.picked):hover:not(:disabled){border-color:var(--line);box-shadow:none}
  .gtile:hover{transform:none;box-shadow:none;border-color:var(--line);background:linear-gradient(180deg,var(--card2),var(--card))}
  .gtile-pop:hover{border-color:var(--gold);box-shadow:none}
  .gfeat:hover{transform:none;box-shadow:none;border-color:var(--line)}
  .gfeat-pop:hover{border-color:color-mix(in srgb,var(--gold) 40%,transparent)}
}

/* results */
.res-head{text-align:center;margin:6px 0 4px}
.res-emoji{font-size:42px}
.res-title{font-size:22px;font-weight:800;margin-top:2px}
.res-no{font-size:13px;font-weight:700;color:var(--faint);letter-spacing:.04em}
.res-sub{color:var(--muted);font-size:13px;margin-bottom:18px;text-align:center}
.bigrank{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-bottom:14px}
.bigrank .badge{width:54px;height:54px;border-radius:13px;display:grid;place-items:center;font-size:22px;font-weight:900;flex:0 0 auto}
.cbadge{flex:0 0 auto;width:56px;height:56px;display:grid;place-items:center}
.cb-svg{display:block;filter:drop-shadow(0 5px 10px rgba(0,0,0,.45))}
/* game orb = tier ring + the same sticker icon used on the browse tiles, centred inside */
.orb-ic{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none}
.orb-ic-img{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.orb-ic-img .ico{display:block;filter:drop-shadow(0 3px 7px rgba(0,0,0,.45))}
.orb-ic-img .ico-emo{filter:drop-shadow(0 3px 7px rgba(0,0,0,.45))}
.hhero-orb .cb-svg,.nr-orbwrap .cb-svg,.nrr-med .cb-svg{filter:drop-shadow(0 0 22px color-mix(in srgb,var(--tier) 42%,transparent))}
.bigrank .info{flex:1}
.bigrank .tn{font-size:18px;font-weight:800}
.bigrank .rr{font-size:13px;color:var(--muted)}
.delta{font-size:20px;font-weight:900}
.delta.up{color:var(--green)} .delta.down{color:var(--red)} .delta.flat{color:var(--faint)}
/* results Stats/Review tab bar (owner call 2026-07-04): two panes, same content, half the scroll */
.res-tabs{display:flex;background:var(--card);border:1px solid var(--line);border-radius:13px;overflow:hidden;margin-bottom:12px}
.rt-tab{flex:1;min-width:0;padding:12px 4px;border:none;background:none;cursor:pointer;font-family:inherit;font-weight:800;font-size:13.5px;letter-spacing:.02em;color:var(--muted)}
.rt-tab.on{background:var(--card2);color:var(--text);box-shadow:inset 0 -2px 0 var(--gold)}
.rt-pane.rt-off{display:none}
.gridrow{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.mini{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:13px;text-align:center}
.mini .k{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.mini .v{font-size:22px;font-weight:800;margin-top:3px}
.mini .v .v-max{font-size:14px;font-weight:700;color:var(--muted)}
.mini.streak{border-color:rgba(255,150,60,.5);background:linear-gradient(180deg,rgba(255,150,60,.16),var(--card))}
.mini.streak .k{color:#ffb877}
.mini.streak .v{color:#ff9f43;font-size:24px}
.mini.streak .v .fl{font-size:20px;filter:drop-shadow(0 0 5px rgba(255,120,40,.65))}
.squares{font-size:24px;letter-spacing:3px;text-align:center;margin:6px 0 16px}
.note{font-size:11.5px;color:var(--faint);text-align:center;margin-top:-8px;margin-bottom:14px}
.title-earned{text-align:center;font-size:13px;color:var(--muted);margin:-6px 0 16px}
.title-earned b{color:var(--gold);font-weight:700}
.ranks{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.ranks .rk{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:11px 13px;display:flex;flex-direction:column;gap:3px}
.ranks .rkk{font-size:12px;color:var(--muted)}
.ranks .rkv{font-size:18px;font-weight:800}
.ranks .rkv small{font-size:12px;font-weight:600;color:var(--faint)}
.ranks.placement{display:block;background:linear-gradient(180deg,rgba(79,155,255,.12),var(--card));border:1px solid color-mix(in srgb,#4f9bff 45%,transparent);border-radius:12px;padding:12px 14px;text-align:center}
.rk-place{font-family:var(--font-display);font-weight:800;font-size:15px;color:#7fbcff}
.rk-place-sub{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.45}

/* ladder */
.ladder{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:8px 12px;margin-bottom:16px}
.lrow{display:flex;align-items:center;gap:10px;padding:7px 2px;border-bottom:1px solid var(--line)}
.lrow:last-child{border-bottom:none}
.lrow .lb{width:38px;height:38px;display:grid;place-items:center;flex:0 0 auto}
.lrow .ln{flex:1;font-size:14px;font-weight:600}
.lrow .lr{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.lrow.here{background:rgba(245,184,46,.08);border-radius:8px}
.lrow.here .ln{font-weight:800;color:var(--gold)}

/* buttons */
.btn{display:block;width:100%;text-align:center;border-radius:12px;padding:15px;font-size:16px;font-weight:800;cursor:pointer;border:none;transition:.12s}
.btn.primary{background:var(--gold);color:var(--accent-ink)}
.btn.primary:hover{filter:brightness(1.07)}
.btn.ghost{background:var(--card);color:var(--text);border:1px solid var(--line2);margin-top:10px}
.btn.ghost:hover{background:var(--card2)}
.share-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin-bottom:10px}
.share-row.res-share-top{margin-bottom:20px}
.sbtn{background:var(--card);border:1px solid var(--line2);border-radius:11px;padding:12px 8px;font-size:14px;font-weight:700;color:var(--text);cursor:pointer;transition:.12s}
.sbtn:hover{background:var(--card2);border-color:var(--gold)}
.sbtn.sb-x:hover{border-color:#fff}
.sbtn.sb-wa:hover{border-color:#25d366}
.foot{text-align:center;color:var(--faint);font-size:11.5px;margin-top:26px}
.foot b{color:var(--muted)}
.toast{position:fixed;left:50%;bottom:calc(82px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:#0f1626;border:1px solid var(--line2);color:var(--text);padding:11px 18px;border-radius:10px;font-size:13.5px;font-weight:600;opacity:0;transition:.2s;pointer-events:none;z-index:20}
.toast.show{opacity:1}

/* ---------- landing page ---------- */
.lp{max-width:680px;margin:0 auto;padding:0 16px 80px}
.lp-nav{display:flex;align-items:center;justify-content:space-between;padding:18px 2px}
.lp-logo{display:flex;align-items:center;gap:10px;font-family:var(--font-brand);font-size:23px;font-weight:900;letter-spacing:0}
.lp-logo b{color:var(--gold);font-weight:900}
.lp-navcta{color:var(--text);text-decoration:none;font-weight:700;font-size:14px;border:1px solid var(--line2);padding:8px 16px;border-radius:10px;transition:.12s}
.lp-navcta:hover{background:var(--card2)}
.lp-hero{text-align:center;padding:42px 10px 30px}
.lp-badge{width:74px;height:74px;margin:0 auto 14px;display:grid;place-items:center}
.lp-badge .brand-ico{width:74px;height:74px}
.lp-logo .brand-ico{width:46px;height:46px}
.lp-foot .brand-ico{width:16px;height:16px;display:inline-block;vertical-align:-3px}
.lp-hero h1{font-size:48px;font-weight:900;letter-spacing:-1.6px;line-height:1}
.lp-hero h1 b{color:var(--gold)}
.lp-tag{color:var(--faint);font-style:italic;font-size:14px;margin-top:11px}
.lp-pitch{color:var(--muted);font-size:18px;line-height:1.5;max-width:450px;margin:18px auto 26px}
.lp-cta{display:inline-block;background:var(--gold);color:var(--accent-ink);font-weight:800;font-size:17px;padding:15px 30px;border-radius:13px;text-decoration:none;transition:.12s}
.lp-cta:hover{filter:brightness(1.07);transform:translateY(-1px)}
.lp-mini{color:var(--faint);font-size:12.5px;margin-top:14px;letter-spacing:.3px}
.lp-signin{color:var(--muted);text-decoration:none;font-weight:600;font-size:14px;transition:.12s}
.lp-signin:hover{color:var(--text)}
.lp-eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--gold);background:rgba(245,184,46,.1);border:1px solid rgba(245,184,46,.25);padding:5px 12px;border-radius:20px;margin-bottom:18px}
.lp-pitch em{color:var(--gold);font-style:normal;font-weight:700}
.lp-hero .lp-cta,.lp-finalcta .lp-cta{box-shadow:0 8px 26px rgba(245,184,46,.22)}
.lp-hero{background:radial-gradient(120% 80% at 50% 0,rgba(245,184,46,.06),transparent 60%)}
.lp-final-h{font-size:26px;font-weight:800;letter-spacing:-.6px;margin:0 0 8px}
.lp-final-p{color:var(--muted);font-size:14px;margin:0 0 22px}
.lp-shero{text-align:center;padding:34px 6px 4px}
.lp-sh-h{font-size:34px;font-weight:900;letter-spacing:-1px;line-height:1.12;margin:4px 0 0}
.lp-sh-h b{color:var(--gold)}
.lp-sh-sub{color:var(--muted);font-size:15px;line-height:1.5;max-width:480px;margin:14px auto 0}
.lp-tap{font-size:13px;font-weight:700;color:var(--text);margin:22px 0 14px;text-align:center}
.lp-slate-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:11px}
.lp-tile{display:flex;flex-direction:column;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 12px;text-decoration:none;color:var(--text);transition:.12s}
.lp-tile:hover{border-color:var(--gold);background:var(--card2);transform:translateY(-2px)}
.lp-tile-e{font-size:28px;line-height:1}
.lp-tile-n{font-size:14px;font-weight:700;text-align:center}
.lp-browse{text-align:center;margin-top:16px}
.lp-browse-btn{display:inline-block;border:1px solid var(--line2);border-radius:11px;padding:11px 22px;font-weight:700;font-size:14px;color:var(--text);text-decoration:none;transition:.12s}
.lp-browse-btn:hover{border-color:var(--gold);background:var(--card2)}
.lp-sec{margin-top:48px}
.lp-info-start{margin-top:62px;padding-top:38px;border-top:1px solid var(--line)}
.lp-sec h2{font-size:13px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);text-align:center;margin-bottom:18px;font-weight:700}
.lp-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.lp-step{padding:6px 10px;text-align:center}
.lp-step .si{font-size:34px}
.lp-step h3{font-size:16px;margin:10px 0 5px;font-weight:700}
.lp-step p{font-size:13.5px;color:var(--muted);line-height:1.45}
.lp-ladder{max-width:420px;margin:0 auto;padding:0}
.lp-lrow{display:flex;align-items:center;gap:11px;padding:8px 2px;border-bottom:1px solid var(--line)}
.lp-lrow:last-child{border-bottom:none}
.lp-lb{width:25px;height:25px;border-radius:7px;display:grid;place-items:center;font-size:12px;font-weight:900;flex:0 0 auto}
.lp-lrow .nm{flex:1;font-weight:600;font-size:14.5px}
.lp-lr{color:var(--muted);font-size:12.5px;font-variant-numeric:tabular-nums}
.lp-note{text-align:center;color:var(--faint);font-size:13px;margin:14px auto 0;max-width:400px}
.lp-topics{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.lp-chip{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:9px 16px;font-weight:600;font-size:14.5px}
.lp-chip .ce{font-size:18px}
.lp-whygrid{display:flex;flex-direction:column;max-width:460px;margin:0 auto}
.lp-whygrid .wc{padding:16px 2px;border-top:1px solid var(--line)}
.lp-whygrid .wc:first-child{border-top:none}
.lp-whygrid .wc h3{font-size:15px;margin-bottom:6px;color:var(--gold);font-weight:700}
.lp-whygrid .wc p{font-size:13.5px;color:var(--muted);line-height:1.5}
.lp-finalcta{text-align:center;margin-top:48px}
.lp-foot{text-align:center;color:var(--faint);font-size:12px;margin-top:50px;line-height:1.7}
.lp-foot b{color:var(--muted)}

/* ---------- most popular ---------- */
.gtile-pop{border-color:var(--gold)}
.gtile-pop .gt-sub{color:var(--gold)}
.gtile-fav .gt-emo{color:var(--gold)}
.gtile-fav .gt-sub{color:var(--gold)}
/* all-games-played outline (green) — group with every game done, or a done tile */
.gtile.gdone{border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green)}
.tile.tdone{border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green)}
/* results: clickable rank name -> leaderboard */
.tn-link{cursor:pointer}
.tn-link .tn-go{color:var(--muted);font-weight:400;font-size:.8em}
.tn-link:hover{text-decoration:underline}

/* ---------- live theme toggles ---------- */
.themebar{display:flex;gap:7px;overflow-x:auto;padding:0 0 14px;margin-bottom:2px;scrollbar-width:none}
.themebar::-webkit-scrollbar{display:none}
.tchip{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;background:var(--card);border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:7px 13px;font-size:12.5px;font-weight:700;cursor:pointer;transition:.12s;white-space:nowrap;font-family:var(--font)}
.tchip:hover{border-color:var(--line2);color:var(--text)}
.tchip.on{border-color:var(--gold);color:var(--text);background:var(--card2)}
.tchip .sw{width:12px;height:12px;border-radius:50%;flex:0 0 auto;box-shadow:0 0 0 2px rgba(255,255,255,.08)}

html[data-theme="arena"]{--bg:#07090E;--bg-glow:#102530;--bg2:#0d121b;--card:#121826;--card2:#171f30;--line:#1f2838;--line2:#2c3a54;--text:#E8EEF6;--muted:#9AA6BC;--faint:#7E8AA0;--gold:#2DE2E6;--gold-d:#1FC9CC;--accent-ink:#03171A;--r:16px;--font:'Inter',sans-serif;--font-display:'Saira Condensed',sans-serif}
html[data-theme="aurora"]{--bg:#0A0B12;--bg-glow:#231a4d;--bg2:#0e0f18;--card:#15161f;--card2:#1b1d28;--line:#222433;--line2:#2f3247;--text:#F4F5FB;--muted:#9296B0;--faint:#7A7E9A;--gold:#9B8CFF;--gold-d:#7C6BF5;--accent-ink:#140d2e;--r:16px;--font:'Inter Tight',sans-serif;--font-display:'Sora',sans-serif}
html[data-theme="broadsheet"]{--bg:#f6f3ec;--bg-glow:#efe7d7;--bg2:#efe9dd;--card:#fbf9f3;--card2:#ffffff;--line:#e3ddd0;--line2:#d3cbb9;--text:#1c1a17;--muted:#6b6353;--faint:#a59c89;--gold:#b0432e;--gold-d:#933726;--accent-ink:#ffffff;--r:13px;--font:'Inter Tight',sans-serif;--font-display:'Spectral',Georgia,serif}
html[data-theme="emerald"]{--bg:#08110D;--bg-glow:#0f3d2a;--bg2:#0c1812;--card:#10201a;--card2:#152a22;--line:#1c3329;--line2:#2a4a3b;--text:#EAF5EF;--muted:#93B0A4;--faint:#6F8C80;--gold:#21C77A;--gold-d:#17A865;--accent-ink:#04130C;--r:14px;--font:'Inter',sans-serif;--font-display:'Sora',sans-serif}
html[data-theme="mono"]{--bg:#0B0C0E;--bg-glow:#1a1d22;--bg2:#101115;--card:#15171B;--card2:#1B1E23;--line:#23262C;--line2:#31353D;--text:#F2F4F7;--muted:#9A9FA8;--faint:#6E727B;--gold:#E6EAF0;--gold-d:#C9D0DA;--accent-ink:#0B0C0E;--r:12px;--font:'Inter',sans-serif;--font-display:'Inter',sans-serif}

/* light-theme tweaks so dark insets don't clash */
html[data-theme="broadsheet"] .timer,
html[data-theme="broadsheet"] .choice .ltr,
html[data-theme="broadsheet"] .topic .emo,
html[data-theme="broadsheet"] .toast{background:var(--bg2)}

/* On narrow screens the fixed top-right chip (theme/friends/leaderboard/account)
   shares the row with the centered wordmark — reserve top space so content sits
   below it instead of tucking under the icons. */
@media (max-width:680px){#app{padding-top:calc(18px + env(safe-area-inset-top,0px))}}

/* OVERTIME — final-question framing (display only) */
.overtime{display:flex;flex-direction:column;align-items:center;gap:1px;background:var(--card2);border:1px solid var(--gold);border-radius:12px;padding:9px 12px;margin:0 0 14px}
.overtime .ot-k{font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--faint)}
.overtime .ot-v{font-family:var(--font-display);font-size:21px;font-weight:900;color:var(--gold);letter-spacing:.05em}
.overtime .ot-sub{font-size:11.5px;color:var(--muted)}
/* Closer Card — result verdict (display/share only) */
.closer{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 16px 15px;text-align:center;margin:8px 0 16px}
.closer.cl-flawless{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
.closer .cl-label{font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--faint);margin-bottom:6px}
.closer .cl-verdict{font-family:var(--font-display);font-size:40px;font-weight:900;line-height:1.04;letter-spacing:-.01em;color:var(--text)}
.closer.cl-flawless .cl-verdict{color:var(--gold)}
.closer.cl-hot .cl-verdict{color:var(--red)}
.closer.cl-good .cl-verdict{color:var(--green)}
.closer.cl-ok .cl-verdict{color:var(--t-buff)}
.closer.cl-meh .cl-verdict{color:var(--muted)}
.closer.cl-cold .cl-verdict{color:var(--faint)}
.closer .cl-line{font-size:13px;color:var(--muted);margin-top:9px}
.closer .cl-line .cl-score{color:var(--text);font-weight:800}
.closer .cl-squares{font-size:22px;letter-spacing:3px;margin-top:11px;line-height:1}
.closer .cl-leg{font-size:10.5px;color:var(--faint);margin-top:7px}

/* ---- embed widget mode (play.html?embed=1): a clean framable surface ---- */
html.embed #kd-chip{display:none!important}
/* In the embed use a FLAT solid background — iOS Safari frequently fails to paint a
   `background-attachment:fixed` gradient inside a cross-site iframe, leaving a white screen. */
html.embed body{background:var(--bg)!important}
/* trim the tall intro in the embed so the game isn't a mile long in the host:
   drop the leaderboard link, the rules cards, the redundant brand header and the
   tier/pack chips, and shrink the big dial. */
html.embed .nr-lb,html.embed .nr-rules,html.embed .nr-top,html.embed .nr-chips,html.embed .nr-cat{display:none!important}
html.embed .nr-orbwrap{transform:scale(.56);margin:-34px auto -26px}
html.embed .nr-hero{margin-top:4px}
/* tighten the gameplay screen too (keep answer buttons comfortably tappable) */
html.embed .q{font-size:18px;margin-bottom:12px;min-height:0}
html.embed .timer{margin-bottom:12px}
html.embed .nrq-meta{margin:8px 0}
html.embed .qprog{margin:0 0 8px}
html.embed .choices{gap:8px}
html.embed .choice{padding:11px 14px;font-size:15px}
/* embed-only Share button surfaced ABOVE the tall rank card so it's visible without
   scrolling even in a short host iframe (see renderResults). */
html.embed .nrr-share-embed{margin:10px 0 2px}
/* footer flows at the END of content (not fixed) so auto-resize includes it and it never overlaps */
.bgo-embed-foot{display:block;width:max-content;max-width:88%;margin:14px auto 16px;text-align:center;font:600 11px/1 system-ui,-apple-system,sans-serif;color:var(--muted);text-decoration:none;background:rgba(12,16,24,.85);border:1px solid var(--line);border-radius:999px;padding:6px 13px}
.bgo-embed-foot:hover{color:var(--text)}
html:not(.embed) .bgo-embed-foot{display:none}