/* Map quizzes web prototype (DEV only). Colors/radii/sizes come from tokens.css (generated from
   docs/design-tokens.json). The few sizes below that have no token yet are marked TODO(tokens). */
@font-face{font-family:Inter;font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/inter-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:Inter;font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/inter-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Inter;font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/inter-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Inter;font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Vollkorn;font-style:normal;font-weight:600;font-display:swap;src:url(fonts/vollkorn_semibold.woff2) format('woff2')}

:root{
  --ui:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans","Noto Sans Arabic","Noto Sans SC","Noto Sans JP","Noto Sans KR",sans-serif;
  --serif:Vollkorn,"Iowan Old Style",Georgia,"Noto Serif","Noto Naskh Arabic","Noto Serif SC","Noto Serif JP","Noto Serif KR",serif;
  --safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px);
  --ease:cubic-bezier(.2,0,0,1);           /* emphasized */
  --glass-blur:blur(14px) saturate(1.3);
  --status-h:96px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{background:var(--t-playPage);color:var(--t-playText);font:15px/1.4 var(--ui);-webkit-font-smoothing:antialiased;overscroll-behavior:none}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid var(--t-accent);outline-offset:2px}
[hidden]{display:none!important}
svg{display:block}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ------------------------------------------------------------ Lumen buttons (docs/design.md#buttons-lumen) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-lumenGap);border:1px solid transparent;background:transparent;font-weight:600;
  white-space:nowrap;transition:background .15s,color .15s,border-color .15s,transform .15s var(--ease);user-select:none;text-decoration:none}
.btn:active{transform:scale(.98)}
.btn.l{height:var(--s-lumenHeightL);padding:0 var(--s-lumenPaddingL);border-radius:var(--r-lumenLarge);font-size:16px;letter-spacing:-.01em}
.btn.m{height:var(--s-lumenHeightM);padding:0 var(--s-lumenPaddingM);border-radius:var(--r-lumenMedium);font-size:15px}
.btn.s{height:var(--s-lumenHeightS);padding:0 var(--s-lumenPaddingS);border-radius:var(--r-lumenSmall);font-size:14px}
.btn.icon{padding:0;aspect-ratio:1}
.btn.block{width:100%}
.btn svg{width:var(--s-lumenIconL);height:var(--s-lumenIconL);flex:none}
.btn.s svg{width:var(--s-lumenIconS);height:var(--s-lumenIconS)}
.btn.primary{background:var(--t-lumenPrimaryFill);border-color:var(--t-lumenPrimaryEdge);color:var(--t-lumenPrimaryText);
  box-shadow:inset 0 1px 0 var(--t-lumenHighlight),0 6px 22px -10px var(--t-lumenPrimaryGlow)}
.btn.primary:hover,.btn.primary:active{background:var(--t-lumenPrimaryFillPressed);border-color:var(--t-lumenPrimaryEdgePressed)}
.btn.secondary{background:var(--t-lumenSecondaryFill);border-color:var(--t-lumenSecondaryEdge);color:var(--t-lumenSecondaryText)}
.btn.secondary:hover,.btn.secondary:active{background:var(--t-lumenSecondaryFillPressed)}
.btn.tertiary{padding-inline:var(--s-lumenPaddingTertiary);color:var(--t-lumenTertiaryText)}
.btn.tertiary:hover,.btn.tertiary:active{background:var(--t-lumenTertiaryFillPressed);color:var(--t-lumenTertiaryTextPressed)}
.btn.danger{background:var(--t-lumenDangerFill);border-color:var(--t-lumenDangerEdge);color:var(--t-lumenDangerText)}
.btn.danger:hover,.btn.danger:active{background:var(--t-lumenDangerFillPressed)}
.btn[disabled]{background:var(--t-lumenDisabledFill);color:var(--t-lumenDisabledText);border-color:transparent;box-shadow:none;pointer-events:none}

/* Map chrome: round glass buttons (exception to Lumen, docs/design.md map chrome) */
.chrome{width:var(--chrome,44px);height:var(--chrome,44px);border-radius:50%;border:0;display:grid;place-items:center;flex:none;
  background:var(--t-mapControlSurface);color:var(--t-mapControlTint);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 6px 18px -8px rgba(0,0,0,.35);transition:transform .15s var(--ease),background .15s}
.chrome svg{width:22px;height:22px}
.chrome:hover{background:var(--t-atlasChrome)}
.chrome:active{transform:scale(.94)}
.chrome[aria-pressed="true"]{color:var(--t-lumenPrimaryText);background:var(--t-lumenPrimaryFill)}

/* ------------------------------------------------------------ catalog */
.cat{min-height:100dvh;padding-bottom:calc(40px + var(--safe-b))}
.cat-head{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--t-playPage) 88%,transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  padding:calc(var(--safe-t) + 14px) 16px 10px}
.cat-inner{max-width:1100px;margin:0 auto}
.cat-title-row{display:flex;align-items:center;gap:10px}
.cat-title{font:600 34px/1.1 var(--serif);letter-spacing:-.8px;margin:0;flex:1;min-width:0}
.cat-sub{color:var(--t-playMuted);font-size:13px;margin-top:2px}
.cat-tools{display:flex;gap:8px;align-items:center}
.sel{appearance:none;height:36px;border-radius:var(--r-lumenSmall);border:1px solid var(--t-lumenSecondaryEdge);background:var(--t-lumenSecondaryFill);color:var(--t-playText);
  padding:0 30px 0 12px;font:600 14px var(--ui);max-width:150px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5l4 4 4-4' fill='none' stroke='%23999' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center}
[dir=rtl] .sel{padding:0 12px 0 30px;background-position:left 10px center}
.sel option{color:#111}
.search{position:relative;margin-top:12px}
.search input{width:100%;height:44px;border-radius:var(--r-lumenMedium);border:1px solid transparent;background:var(--t-playChip);color:var(--t-playText);
  padding:0 14px 0 42px;font:16px var(--ui)}
[dir=rtl] .search input{padding:0 42px 0 14px}
.search input::placeholder{color:var(--t-playMuted)}
.search input:focus{border-color:var(--t-accentLine);outline:none}
.search svg{position:absolute;inset-inline-start:13px;top:50%;translate:0 -50%;width:18px;height:18px;color:var(--t-playMuted);pointer-events:none}
.chips{display:flex;gap:8px;margin-top:10px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;margin-inline:-16px;padding-inline:16px}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none}
.cat-body{padding:6px 16px 0}
.group{margin-top:22px}
.overline{font-size:11px;font-weight:500;letter-spacing:.88px;text-transform:uppercase;color:var(--t-playMuted);margin:0 2px 10px}
.rows{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:10px}
.row{display:flex;align-items:center;gap:12px;width:100%;text-align:start;padding:10px 12px;border-radius:var(--r-playCard);background:var(--t-playSurface);
  border:1px solid var(--t-playLine);transition:transform .15s var(--ease),border-color .15s;content-visibility:auto;contain-intrinsic-size:auto 62px}
.row:hover{border-color:var(--t-accentLine)}
.row:active{transform:scale(.985)}
.row-main{flex:1;min-width:0}
.row-title{font:600 16px/1.25 var(--serif);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.row-meta{color:var(--t-playMuted);font-size:12.5px;margin-top:2px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.diff{display:inline-flex;gap:2px;vertical-align:middle}
.diff i{width:5px;height:9px;border-radius:2px;background:var(--t-playTrack)}
.diff i.on{background:var(--t-accentText)}
.row-end{display:flex;align-items:center;gap:8px;flex:none}
.pro{font-size:10px;font-weight:700;letter-spacing:.06em;padding:2px 6px;border-radius:6px;background:var(--t-playGold);color:#3a2b00;text-transform:uppercase}
.ring{position:relative;width:36px;height:36px;flex:none}
.ring svg{width:36px;height:36px;transform:rotate(-90deg)}
.ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:10px;font-weight:700;font-variant-numeric:tabular-nums}
.ring .tr{stroke:var(--t-playTrack)}.ring .fg{stroke:var(--t-playSuccess)}
.empty{text-align:center;color:var(--t-playMuted);padding:60px 0}
.foot{max-width:1100px;margin:34px auto 0;padding:0 16px;color:var(--t-playMuted);font-size:12px}
.dev{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:999px;
  background:var(--t-playAccentTint);color:var(--t-accentText);vertical-align:middle;margin-inline-start:8px}

/* thumbnails */
.thumb{width:56px;height:40px;border-radius:8px;overflow:hidden;background:var(--t-mapquizSea);flex:none;position:relative;box-shadow:inset 0 0 0 1px var(--t-playLine)}
.thumb svg{width:100%;height:100%}
.thumb .ctx{fill:var(--t-mapquizContext)}
.thumb .it{fill:var(--t-accent)}
.thumb .dot{fill:var(--t-accent);stroke:var(--t-mapquizSea);stroke-width:.8}
.thumb.flags{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--t-playLine)}
.thumb.flags img{width:100%;height:100%;object-fit:cover;display:block}
.thumb.big{width:100%;height:auto;aspect-ratio:16/8;border-radius:14px}

/* quiz sheet (catalog) */
.scrim{position:fixed;inset:0;z-index:30;background:var(--t-atlasScrim);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:flex-end;justify-content:center;animation:fade .18s}
.sheet{width:100%;max-width:440px;background:var(--t-playSurface);border-radius:22px 22px 0 0;padding:14px 18px calc(18px + var(--safe-b));box-shadow:0 -10px 40px -12px rgba(0,0,0,.4);
  animation:rise .32s var(--ease);max-height:92dvh;overflow:auto}
.sheet h2{font:600 24px/1.2 var(--serif);margin:14px 0 4px;letter-spacing:-.3px}
.sheet .row-meta{font-size:13.5px}
.sheet .note{color:var(--t-playMuted);font-size:13px;margin:12px 0 0}
.sheet .btns{display:grid;gap:10px;margin-top:16px}
.grab{width:38px;height:4px;border-radius:2px;background:var(--t-playTrack);margin:0 auto}
@media (min-width:640px){.scrim{align-items:center}.sheet{border-radius:22px;padding-bottom:20px}.grab{display:none}.sheet h2{margin-top:16px}}

/* ------------------------------------------------------------ accounts + paywall (only rendered when build.mjs got the accounts config) */
:root{--apple-bg:#000;--apple-fg:#fff}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--apple-bg:#fff;--apple-fg:#000}}
:root[data-theme="dark"]{--apple-bg:#fff;--apple-fg:#000}
.btn.apple{background:var(--apple-bg);color:var(--apple-fg);border-color:var(--apple-bg)}
.btn.apple:hover,.btn.apple:active{opacity:.88}
#acctSlot{display:contents}
.acct{gap:8px;padding-inline:12px}
.acct .av{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font:700 12px var(--ui);font-style:normal;background:var(--t-accent);color:var(--t-lumenPrimaryText)}
.acct .pro{margin-inline-start:2px}
@media (max-width:520px){.acct .lbl{display:none}.acct:not(.on){padding-inline:0;aspect-ratio:1}}
.pill{display:inline-block;font-size:11.5px;font-weight:600;padding:2px 9px;border-radius:999px;background:var(--t-playAccentTint);color:var(--t-accentText);margin-inline-start:10px;vertical-align:1px}
.pro svg{width:10px;height:10px;display:inline-block;vertical-align:-1px;margin-inline-end:3px}
.sheet .btns .btn{width:100%}
.sheet .note.c,.sheet .legal{text-align:center}
.auth{display:grid;gap:10px;margin-top:16px}
.gbtn{min-height:44px;display:flex;justify-content:center;color-scheme:normal}
.or{display:flex;align-items:center;gap:12px;color:var(--t-playMuted);font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--t-playLine)}
.stack{display:grid;gap:10px}
.stack .note{margin:0}
.field{width:100%;height:44px;border-radius:var(--r-lumenMedium);border:1px solid transparent;background:var(--t-playChip);color:var(--t-playText);padding:0 14px;font:16px var(--ui)}
.field::placeholder{color:var(--t-playMuted)}
.field:focus{border-color:var(--t-accentLine);outline:none}
.field.code{text-align:center;font:600 24px var(--ui);letter-spacing:.3em;font-variant-numeric:tabular-nums}
.err-line{margin:0;color:var(--t-mapquizWrong);font-size:13px;text-align:center}
.benefits{display:grid;gap:12px;margin:16px 0 4px}
.benefit{display:flex;gap:12px;align-items:flex-start}
.benefit svg{width:20px;height:20px;flex:none;margin-top:1px;color:var(--t-playSuccess)}
.benefit b{display:block;font-weight:600}
.benefit small{display:block;color:var(--t-playMuted);font-size:13px;margin-top:1px}
#pwBody{display:grid;gap:12px;margin-top:16px}
.pw-spin{display:grid;place-items:center;height:96px}
.plans{display:grid;gap:8px}
.plan{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;text-align:start;padding:12px 14px;border-radius:var(--r-lumenMedium);
  background:var(--t-playChip);border:1.5px solid transparent;transition:border-color .15s,background .15s}
.plan[aria-checked="true"]{border-color:var(--t-accent);background:var(--t-playAccentTint)}
.plan .pn{font-weight:600;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.plan .pn em{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.04em;padding:2px 8px;border-radius:999px;background:var(--t-playGold);color:#3a2b00}
.plan .pp{color:var(--t-playMuted);font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap}
.fine{margin:0;font-size:12.5px}
.legal{color:var(--t-playMuted);font-size:12px;margin-top:14px;line-height:1.5}
.legal a{color:inherit;text-decoration:underline}
.foot.legal{margin-top:10px;text-align:start}
.scrim.busy{visibility:hidden}
.toast{position:fixed;left:50%;bottom:calc(24px + var(--safe-b));translate:-50% 0;z-index:60;max-width:min(92vw,420px);padding:10px 16px;border-radius:999px;
  background:var(--t-playSurface);color:var(--t-playText);font:600 14px var(--ui);box-shadow:0 10px 30px -10px rgba(0,0,0,.5),0 0 0 1px var(--t-playLine);animation:pop .25s var(--ease)}

/* ------------------------------------------------------------ quiz screen */
.quiz{position:fixed;inset:0;overflow:hidden;background:var(--t-mapquizSea);--chrome:44px}
.quiz.globe{background:var(--t-playPage)}
#map{position:absolute;inset:0;direction:ltr;transition:filter .3s,opacity .3s}
#map .maplibregl-canvas{outline:none}
.quiz.paused #map{filter:blur(6px) saturate(.8);opacity:.7}
.hud-top{position:absolute;top:0;inset-inline:0;display:flex;flex-direction:column;gap:10px;padding:calc(var(--safe-t) + 10px) 12px 0;pointer-events:none;z-index:4}
.hud-top>*{pointer-events:auto}
.topbar{display:flex;align-items:center;gap:8px}
.topbar .title{flex:0 1 auto;margin-inline:auto;min-width:0;max-width:min(100% - 140px,460px);padding:0 16px;height:44px;display:flex;align-items:center;border-radius:22px;
  background:var(--t-mapControlSurface);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);font:600 15px var(--ui);color:var(--t-playText)}
.topbar .title span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar .spacer{flex:1}
.prompt{align-self:center;width:100%;max-width:520px;border-radius:20px;padding:12px 16px;display:flex;align-items:center;gap:14px;min-height:72px;
  background:var(--t-mapControlSurface);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:0 10px 30px -14px rgba(0,0,0,.45),inset 0 0 0 1px var(--t-playLine);
  overflow:hidden}
.prompt-main{flex:1;min-width:0}
.prompt .kick{font-size:11px;font-weight:600;letter-spacing:.88px;text-transform:uppercase;color:var(--t-playMuted)}
.prompt .big{font:600 30px/1.1 var(--serif);letter-spacing:-.5px;margin-top:2px;overflow-wrap:anywhere}
.prompt .big.long{font-size:24px}
.prompt .flag{height:72px;max-width:100%;width:auto;border-radius:6px;display:block;margin-top:6px;box-shadow:0 0 0 1px var(--t-playLine),0 4px 12px -6px rgba(0,0,0,.4);background:var(--t-playChip)}
.prompt-side{text-align:end;flex:none}
.count{font:600 15px var(--ui);font-variant-numeric:tabular-nums;color:var(--t-playText)}
.pips{display:flex;gap:5px;justify-content:flex-end;margin-top:8px}
.pips i{width:9px;height:9px;border-radius:50%;background:var(--t-accent);transition:background .2s,transform .2s var(--ease)}
.pips i.lost{background:transparent;box-shadow:inset 0 0 0 2px var(--t-mapquizWrong);transform:scale(.9)}
.prompt.next{animation:slide .18s var(--ease)}
.prompt.shake{animation:shake .32s}
.prompt .cont{font-size:13px;color:var(--t-playMuted);margin-top:4px}
.prompt .auto{position:absolute;inset-inline:0;bottom:0;height:3px;background:var(--t-mapquizRevealed);transform-origin:left;transform:scaleX(0)}
[dir=rtl] .prompt .auto{transform-origin:right}
.prompt .auto.run{animation:auto var(--auto-ms,1500ms) linear forwards}
.learn-hint{color:var(--t-playMuted);font-size:15px;line-height:1.35}
.learn-card{display:flex;align-items:center;gap:14px}
.prompt .flag-slot{width:144px;height:72px}
.learn-card .flag{margin-top:0;height:48px}
.learn-card .nm{font:600 24px/1.15 var(--serif);overflow-wrap:anywhere}
.learn-card .st{color:var(--t-playMuted);font-size:13.5px;margin-top:2px}

.tools{position:absolute;inset-inline-start:12px;bottom:calc(var(--status-h) + 14px);display:flex;flex-direction:column;gap:8px;z-index:3}
.status{position:absolute;inset-inline:0;bottom:0;z-index:4;padding:12px 16px calc(12px + var(--safe-b));border-radius:20px 20px 0 0;
  background:var(--t-mapControlSurface);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:0 -8px 30px -14px rgba(0,0,0,.4),inset 0 1px 0 var(--t-playLine)}
.progress{height:5px;border-radius:3px;background:var(--t-playTrack);overflow:hidden}
.progress i{display:block;height:100%;width:0;border-radius:3px;background:linear-gradient(90deg,var(--t-accent),var(--t-accentText));transition:width .35s var(--ease)}
.stat-row{display:flex;align-items:center;gap:16px;margin-top:10px}
.stat{display:flex;flex-direction:column;min-width:0}
.stat small{font-size:10.5px;font-weight:600;letter-spacing:.7px;text-transform:uppercase;color:var(--t-playMuted)}
.stat b{font:600 18px var(--ui);font-variant-numeric:tabular-nums}
.stat-row .grow{flex:1}
@media (min-width:720px){
  .status{inset-inline:auto;left:50%;translate:-50% 0;bottom:16px;width:min(480px,calc(100% - 32px));border-radius:22px;padding-bottom:12px}
  .tools{bottom:16px}
  .hud-top{padding-inline:16px}
}
.learn-bar{position:absolute;inset-inline:0;bottom:0;z-index:4;padding:12px 16px calc(14px + var(--safe-b));display:flex;justify-content:center;pointer-events:none}
.learn-bar .btn{pointer-events:auto;min-width:220px}

.bubble{position:absolute;z-index:6;max-width:min(320px,calc(100% - 24px));padding:8px 12px;border-radius:12px;background:var(--t-playSurface);color:var(--t-playText);
  font:600 14px/1.3 var(--ui);box-shadow:0 10px 30px -10px rgba(0,0,0,.5),0 0 0 1px var(--t-playLine);pointer-events:none;translate:-50% calc(-100% - 14px);animation:pop .2s var(--ease);
  transition:opacity .3s}
.bubble.wrong{box-shadow:0 10px 30px -10px rgba(0,0,0,.5),0 0 0 2px var(--t-mapquizWrong)}
.bubble.out{opacity:0}
.bubble small{display:block;font-weight:400;color:var(--t-playMuted);margin-top:2px}

.mq-label{pointer-events:none;font:600 12px/1 var(--ui);color:var(--t-mapquizLabelInk);white-space:nowrap;transform:translateZ(0);
  text-shadow:0 0 2px var(--t-mapquizLabelHalo),0 0 2px var(--t-mapquizLabelHalo),0 0 3px var(--t-mapquizLabelHalo),0 0 5px var(--t-mapquizLabelHalo);
  opacity:0;transition:opacity .35s}
.mq-label.show{opacity:1}
.mq-label.hide{opacity:0!important}
.maplibregl-marker{will-change:transform}

.overlay{position:absolute;inset:0;z-index:20;display:grid;place-items:center;background:var(--t-atlasScrim);animation:fade .2s;padding:16px}
.dialog{width:100%;max-width:360px;background:var(--t-playSurface);border-radius:22px;padding:22px 20px 20px;box-shadow:0 30px 60px -20px rgba(0,0,0,.55);animation:pop .28s var(--ease);text-align:center}
.dialog h2{font:600 26px/1.15 var(--serif);margin:0 0 6px;letter-spacing:-.4px}
.dialog p{margin:0 0 16px;color:var(--t-playMuted)}
.dialog .btns{display:grid;gap:10px;margin-top:14px}
.kbd{margin-top:12px;color:var(--t-playMuted);font-size:12px}

/* result */
.result{position:absolute;z-index:10;inset-inline:0;bottom:0;max-height:66dvh;overflow:auto;background:var(--t-playSurface);border-radius:24px 24px 0 0;
  padding:18px 18px calc(18px + var(--safe-b));box-shadow:0 -12px 40px -14px rgba(0,0,0,.5);animation:rise .45s var(--ease)}
.result .kick{font-size:11px;font-weight:600;letter-spacing:.88px;text-transform:uppercase;color:var(--t-playMuted);text-align:center}
.result .pts{font:600 68px/1 var(--serif);text-align:center;letter-spacing:-1.5px;margin-top:6px;font-variant-numeric:tabular-nums}
.result .of{text-align:center;color:var(--t-playMuted);font-size:13px;margin-top:2px}
.newbest{display:flex;justify-content:center;margin-top:10px}
.newbest span{background:var(--t-playGold);color:#3a2b00;font-weight:700;font-size:12px;padding:4px 12px;border-radius:999px;letter-spacing:.04em;text-transform:uppercase;animation:pop .5s var(--ease)}
.perfect{text-align:center;color:var(--t-playSuccess);font-weight:600;margin-top:8px;font-size:14px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0 4px}
.stats div{background:var(--t-playChip);border-radius:14px;padding:10px 6px;text-align:center}
.stats small{display:block;font-size:10.5px;font-weight:600;letter-spacing:.7px;text-transform:uppercase;color:var(--t-playMuted)}
.stats b{font:600 20px var(--ui);font-variant-numeric:tabular-nums}
.missed{margin-top:14px}
.missed h3{margin:0 0 6px}
.mrow{display:flex;align-items:center;gap:10px;width:100%;text-align:start;border:0;background:transparent;padding:8px 6px;border-radius:12px}
.mrow:hover{background:var(--t-playRowHover)}
.mrow .fl{width:30px;height:20px;border-radius:4px;object-fit:cover;box-shadow:0 0 0 1px var(--t-playLine);flex:none}
.mrow .nm{flex:1;min-width:0;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.badge{flex:none;min-width:24px;height:24px;border-radius:12px;display:grid;place-items:center;font-size:12px;font-weight:700;color:#1b1206;padding:0 7px}
.badge.a2{background:var(--t-mapquizFound2)}.badge.a3{background:var(--t-mapquizFound3)}.badge.a0{background:var(--t-mapquizRevealed);color:#fff}
.result .btns{display:grid;gap:10px;margin-top:16px}
@media (min-width:900px){
  .result{inset-inline-start:16px;inset-inline-end:auto;top:16px;bottom:16px;width:400px;max-height:none;border-radius:24px}
  .hud-top{padding-inline:16px}
}
:root.playing,:root.playing body{overflow:hidden}
.loading{position:absolute;inset:0;display:grid;place-items:center;color:var(--t-playMuted);z-index:2;pointer-events:none}
.spin{width:28px;height:28px;border-radius:50%;border:3px solid var(--t-playTrack);border-top-color:var(--t-accent);animation:spin .8s linear infinite}
.err{padding:40px 20px;text-align:center}

@keyframes fade{from{opacity:0}}
@keyframes rise{from{transform:translateY(40px);opacity:0}}
@keyframes pop{from{transform:scale(.92);opacity:0}}
@keyframes slide{from{transform:translateY(10px);opacity:0}}
@keyframes shake{20%{translate:-6px 0}40%{translate:6px 0}60%{translate:-4px 0}80%{translate:3px 0}}
@keyframes auto{to{transform:scaleX(1)}}
@keyframes spin{to{rotate:360deg}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
.maplibregl-ctrl-logo{display:none!important}