:root{
  --ink:#141418; --muted:#8a8a92; --line:#e4e4e8;
  --radius:28px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0}
body{
  font-family:"Noto Sans KR",system-ui,sans-serif;
  background:#ececef;color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  min-height:100vh;min-height:100dvh;overflow-x:hidden;
}
.num{font-family:"Archivo",sans-serif;font-variant-numeric:tabular-nums}

/* floating game card — white */
#app{width:100%;max-width:500px;min-width:0;height:min(800px,100vh);height:min(800px,100dvh);position:relative}
.card{position:absolute;inset:0;background:#fff;border-radius:var(--radius);overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.14)}
@media(max-width:460px){#app{height:100vh;height:100dvh;max-width:100%}.card{border-radius:0;box-shadow:none}}
.screen{padding:26px 24px;display:flex;flex-direction:column;height:100%}
.hidden{display:none !important}

/* HUD */
.hud{display:flex;align-items:flex-start;justify-content:space-between;position:relative;z-index:3}
.hud--over{position:absolute;top:26px;left:24px;right:24px}
.round-ind{font-family:"Archivo";font-weight:800;font-size:19px;letter-spacing:.5px;color:#111;
  background:#f1f1f4;padding:4px 10px;border-radius:10px}
.brand-sm{font-family:"Archivo",sans-serif;font-weight:800;letter-spacing:.4px;color:#c62b1f;
  font-size:14px;background:#fdeceb;padding:4px 10px;border-radius:10px;text-transform:uppercase}
.icon-btn{background:none;border:none;color:#111;font-size:22px;cursor:pointer;opacity:.7;padding:2px}

/* language toggle */
.lang-toggle{position:absolute;top:16px;left:14px;z-index:6;display:flex;gap:2px;
  background:rgba(255,255,255,.8);border-radius:999px;padding:3px;backdrop-filter:blur(4px);
  box-shadow:0 2px 8px rgba(0,0,0,.18)}
.lang-toggle button{border:none;background:none;font-size:18px;line-height:1;padding:5px 8px;
  border-radius:999px;cursor:pointer;opacity:.42;transition:.15s}
.lang-toggle button.is-on{opacity:1;background:rgba(255,255,255,.95)}

/* trophy shortcut to the leaderboard, just under the language pill */
.trophy-btn{position:absolute;top:60px;left:14px;z-index:6;
  border:none;cursor:pointer;width:40px;height:40px;border-radius:999px;padding:0;
  display:flex;align-items:center;justify-content:center;color:#e0a91b;
  background:rgba(255,255,255,.8);backdrop-filter:blur(4px);box-shadow:0 2px 8px rgba(0,0,0,.18);
  transition:transform .15s ease}
.trophy-btn svg{width:24px;height:24px}
.trophy-btn:hover{transform:scale(1.08)}
.trophy-btn:active{transform:scale(.92)}

/* sound toggle + volume popover (mirror of the language pill, top-right) */
.sound-wrap{position:absolute;top:16px;right:14px;z-index:6}
.sound-toggle{border:none;cursor:pointer;width:40px;height:40px;border-radius:999px;padding:0;
  display:flex;align-items:center;justify-content:center;color:#2a2a30;
  background:rgba(255,255,255,.8);backdrop-filter:blur(4px);box-shadow:0 2px 8px rgba(0,0,0,.18);
  transition:.15s}
.sound-toggle .ico{display:block;width:26px;height:26px}
.sound-toggle .ico-mute{display:none}
.sound-toggle.muted{color:#c8321f}
.sound-toggle.muted .ico-vol{display:none}
.sound-toggle.muted .ico-mute{display:block}
/* global settings button, bottom-left on every in-game screen */
.settings-fab{position:absolute;left:14px;bottom:14px;z-index:8}
.settings-fab:hover{transform:scale(1.08) rotate(20deg)}
.settings-fab svg{transition:transform .2s}
/* vertical volume popover, dropping straight down under the speaker */
.vol-panel{position:absolute;top:47px;right:2px;display:none;flex-direction:column;align-items:center;
  background:rgba(255,255,255,.8);backdrop-filter:blur(6px);border-radius:22px;
  padding:16px 8px;box-shadow:0 6px 20px rgba(0,0,0,.22)}
.vol-panel.open{display:flex}
.vol-slider{-webkit-appearance:none;appearance:none;
  writing-mode:vertical-lr;direction:rtl;-webkit-writing-mode:vertical-lr;
  touch-action:none;
  width:8px;height:120px;border-radius:999px;outline:none;cursor:pointer;
  background:linear-gradient(to top,#ffd23f,#ff5a1e)}
.vol-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;
  border-radius:50%;background:#fff;border:3px solid #ff7a1e;box-shadow:0 2px 6px rgba(0,0,0,.3);cursor:pointer}
.vol-slider::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;
  border:3px solid #ff7a1e;box-shadow:0 2px 6px rgba(0,0,0,.3);cursor:pointer}

/* oven stage (canvas holder) */
.oven-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
.oven-stage canvas{max-width:100%;max-height:100%;width:auto;height:auto;display:block}
/* oven +50%. bold dark outline (drawn on the canvas) replaces the old white glow — cartoon-sticker look */
.stage-sm{flex:0 0 auto;height:345px;margin-bottom:0}
#heroOven,#guessOven{filter:none}
/* "bkmgLab" over "presents", stacked */
.presents{display:flex;flex-direction:column;align-items:center;gap:3px;margin:0 0 4px}
.presents .bkmg-mark{height:19px;width:auto;display:block;filter:drop-shadow(0 1px 4px rgba(255,255,255,.95))}
.presents span{font-family:Georgia,"Noto Sans KR",serif;font-style:italic;font-weight:600;font-size:15px;
  color:#141414;text-shadow:0 1px 4px rgba(255,255,255,.95)}
/* fireboy logo (+25%), lowered; white glow to match the lit oven */
.fireboy-wrap{position:relative;display:block;width:min(250px,64vw);margin:16px auto -30px}
.fireboy-logo{display:block;width:100%;height:auto;
  filter:drop-shadow(0 0 16px rgba(255,255,255,.95)) drop-shadow(0 0 36px rgba(255,255,255,.7))}
.flame-flicker{position:absolute;left:38%;top:-3%;width:18%;height:26%;pointer-events:none;
  background:radial-gradient(52% 60% at 50% 58%,rgba(255,228,130,.95),rgba(255,140,30,.62) 44%,rgba(255,80,20,0) 72%);
  filter:blur(3px);mix-blend-mode:screen;transform-origin:50% 92%;
  animation:flameFlicker 900ms ease-in-out infinite}
@keyframes flameFlicker{
  0%{opacity:.72;transform:scale(1,1)}
  15%{opacity:1;transform:scale(1.06,1.13)}
  30%{opacity:.68;transform:scale(.95,.97)}
  45%{opacity:.96;transform:scale(1.03,1.09)}
  60%{opacity:.74;transform:scale(.99,1.01)}
  78%{opacity:1;transform:scale(1.05,1.11)}
  100%{opacity:.76;transform:scale(1,1)}
}
@media (prefers-reduced-motion:reduce){.flame-flicker{animation:none}}
/* result ovens: crop the canvas's transparent margin so the oven itself fills the column.
   max-height:none lets the column width set the size, so the stage can be short without shrinking the oven. */
.stage-xs{flex:0 0 auto;height:216px;overflow:hidden}
#resMine,#resReal{max-height:none;transform:scale(1.185)}

/* ---------- start ---------- */
#startScreen{justify-content:center;background:url(../assets/kitchen_bg.jpg) center/cover no-repeat}
.start-mid{text-align:center;display:flex;flex-direction:column;align-items:center}
.title{font-family:"Archivo","Noto Sans KR";font-weight:900;font-size:34px;letter-spacing:-.5px;margin:4px 0 12px;color:#111}
.title .fire{color:#e2231a}
.lede{color:#2c2c30;line-height:1.55;font-size:16px;margin:2px 0 18px;font-weight:700;
  text-shadow:0 1px 3px rgba(255,255,255,.98),0 0 10px rgba(255,255,255,.95)}
/* chunky, glossy mobile-game button with a 3D bottom edge + shine + idle pulse */
.start-btn{align-self:center;position:relative;margin:-24px 0 74px;padding:18px 64px;border:none;border-radius:22px;cursor:pointer;
  font-family:"Archivo","Noto Sans KR",sans-serif;font-weight:900;font-size:23px;letter-spacing:.6px;color:#fff;
  text-shadow:0 2px 0 rgba(150,20,0,.55);overflow:hidden;isolation:isolate;
  background:linear-gradient(#ffd23f,#ff9a1e 32%,#ff5a1e 64%,#ff2d1e);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.7),inset 0 -6px 0 rgba(150,20,0,.32),
    0 8px 0 #c21808,0 15px 24px rgba(226,35,26,.5);
  animation:btnPulse 1.8s ease-in-out infinite}
/* bubbly display font on the English Play button (Korean keeps Noto Sans KR) */
html[lang="en"] .start-btn{font-family:"Titan One","Archivo",cursive;font-weight:400;font-size:26px;letter-spacing:1px}
.start-btn::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.6) 50%,transparent 60%);
  background-size:250% 100%;animation:btnShine 3s ease-in-out infinite}
@keyframes btnShine{0%{background-position:150% 0}55%,100%{background-position:-60% 0}}
@keyframes btnPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.start-btn:active{transform:translateY(5px) scale(1);animation:none;
  box-shadow:inset 0 3px 0 rgba(255,255,255,.55),inset 0 -3px 0 rgba(150,20,0,.32),
    0 3px 0 #c21808,0 6px 12px rgba(226,35,26,.5)}
@media (prefers-reduced-motion:reduce){.start-btn{animation:none}.start-btn::after,.visit-btn::after{animation:none}}
.start-btn.again{width:100%;margin:6px 0 0;padding:16px 20px;font-size:21px;letter-spacing:.2px;
  line-height:1;display:flex;align-items:center;justify-content:center;min-height:56px;
  white-space:nowrap;animation:none}
html[lang="en"] .start-btn.again{font-size:19px;letter-spacing:.4px}
/* Hangul has no descenders, so nudge it down to look optically centered */
html[lang="ko"] .start-btn.again{padding-top:19px;padding-bottom:13px}

/* Italian-kitchen background behind the memorize & guess levels */
#memScreen,#guessScreen{
  background:url(../assets/level_bg.jpg) center/cover no-repeat}
/* results sit INSIDE the framed picture on the kitchen wall */
#resultScreen{background:url(../assets/results_bg.jpg) 62% center/cover no-repeat;padding:0}
/* Everything inside the frame is sized against the frame itself (container query units),
   so the pill, score, ovens and quip always fit no matter the phone's height. */
.frame-inner{position:absolute;left:13%;right:13%;top:15%;bottom:42%;z-index:2;
  container-type:size;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  gap:0;padding:1.5cqh 4% 2cqh;text-align:center;overflow:hidden}
/* round indicator + score near the top of the frame (score dark wood brown); ovens fill what's left */
.frame-inner .round-ind{flex:0 0 auto;background:rgba(255,255,255,.5);
  font-size:clamp(9px,3.6cqw,13px);padding:2px 9px;line-height:1.35}
.frame-inner .round-score{flex:0 0 auto;font-size:clamp(30px,18cqw,62px);
  margin:1cqh 0 0;color:#5a3311;line-height:.95}
.frame-inner .res-ovens{flex:1 1 auto;min-height:0;width:100%;gap:2px;align-items:stretch}
.frame-inner .res-col{min-height:0;justify-content:flex-end;gap:0}
/* stage flexes to the leftover height; the canvas is capped by whichever of w/h runs out first */
.frame-inner .stage-xs{flex:1 1 auto;height:auto;min-height:0}
.frame-inner #resMine,.frame-inner #resReal{max-height:100%}
.frame-inner .res-cap{flex:0 0 auto;font-size:clamp(13px,5cqw,18px);margin-top:.5cqh}
.frame-inner .quip{flex:0 0 auto;font-size:clamp(13px,5.4cqw,20px);
  margin:1cqh 0 0;min-height:auto;line-height:1.3;color:#3a3020}
/* next button: red circle, centered on the counter under the frame */
#resultScreen .next-fab{left:50%;right:auto;bottom:16%;transform:translateX(-50%)}
#resultScreen .next-fab:active{transform:translateX(-50%) scale(.92)}

/* memorize / guess share the pad-less oven layout */
#memScreen,#guessScreen{padding:0}
#memScreen .hud,#guessScreen .hud--over{position:absolute;top:22px;left:22px;right:22px}
#memScreen .oven-stage,#guessScreen .oven-stage{padding:64px 24px 40px}

/* big white instruction under the oven — same spot on memorize & guess */
.cue{position:absolute;left:0;right:0;bottom:136px;z-index:3;margin:0;pointer-events:none;
  text-align:center;color:#fff;font-weight:900;font-size:26px;letter-spacing:.3px;line-height:1.25;
  padding:0 22px;
  text-shadow:0 2px 10px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.5),0 0 26px rgba(0,0,0,.35)}
/* friendly rounded display face, sentence case (matches the Play button + score) */
html[lang="en"] .cue{font-family:"Titan One","Archivo",cursive;font-weight:400;font-size:28px;letter-spacing:.6px}
/* on the guess screen the cue is an in-flow label sitting just above the bottom slider bank */
#guessScreen .cue{position:static;bottom:auto;margin:4px 0 14px;font-size:21px}

/* memorize timer — white, centered in the HUD row so it reads above the oven */
.timer-wrap{position:absolute;left:0;right:0;top:0;display:flex;flex-direction:column;align-items:center;
  pointer-events:none}
.timer{font-family:"Archivo";font-weight:900;font-size:56px;line-height:.9;color:#fff;font-variant-numeric:tabular-nums;
  text-shadow:0 2px 10px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.5),0 0 26px rgba(0,0,0,.35)}
.timer-label{font-size:11px;color:rgba(255,255,255,.92);font-weight:800;margin-top:5px;letter-spacing:1px;
  text-transform:uppercase;text-shadow:0 1px 4px rgba(0,0,0,.6)}

/* ---------- guess sliders (horizontal, in a bottom control zone so the thumb never covers the oven) ---------- */
.sliders{z-index:3;display:flex;flex-direction:column;gap:22px;padding:0 6px 2px}
.hslider{display:flex}
.htrack{position:relative;width:100%;height:18px;border-radius:999px;border:2px solid rgba(0,0,0,.14);
  touch-action:none;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.12)}
/* brushed-chrome knob: steep light-to-dark ramp reads as a curved metal surface */
.hhandle{position:absolute;top:50%;left:50%;width:32px;height:32px;border-radius:50%;
  transform:translate(-50%,-50%);cursor:grab;
  background:linear-gradient(155deg,#ffffff 0%,#eef2f6 14%,#c3ccd6 34%,#8b95a2 50%,#6f7885 58%,
    #b6c0cb 72%,#f2f6fa 86%,#9aa4b1 100%);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.95),inset 0 -2px 3px rgba(0,0,0,.32),
    0 0 0 1px rgba(0,0,0,.10),0 3px 9px rgba(0,0,0,.38)}
/* specular glint across the upper-left of the knob */
.hhandle::after{content:"";position:absolute;left:16%;top:10%;width:56%;height:34%;border-radius:50%;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.15) 70%,rgba(255,255,255,0))}
.hhandle:active{cursor:grabbing}
.hsb-readout{position:absolute;left:0;right:0;bottom:24px;text-align:center;z-index:3;
  font-family:"Archivo";font-weight:600;font-size:13px;color:#555;letter-spacing:.5px;
  background:#f1f1f4;width:max-content;margin:0 auto;padding:4px 12px;border-radius:9px}
.submit-fab,.next-fab{position:absolute;right:22px;bottom:20px;z-index:4;width:60px;height:60px;border-radius:50%;
  border:none;background:#e2231a;color:#fff;font-size:26px;font-weight:900;cursor:pointer;
  box-shadow:0 8px 20px rgba(226,35,26,.36);transition:transform .1s}
.submit-fab:active,.next-fab:active{transform:scale(.92)}
/* labeled submit button, centered at the very bottom, below the slider bank */
.submit-btn{align-self:center;flex:0 0 auto;z-index:4;margin:20px 0 22px;
  border:none;cursor:pointer;padding:15px 58px;border-radius:20px;color:#fff;
  font-family:"Archivo","Noto Sans KR",sans-serif;font-weight:900;font-size:21px;letter-spacing:.5px;
  background:linear-gradient(#ff6a3d,#e2231a);
  box-shadow:0 7px 0 #a5140d,0 14px 22px rgba(226,35,26,.42);
  transition:transform .08s,box-shadow .08s}
.submit-btn:active{transform:translateY(4px);
  box-shadow:0 3px 0 #a5140d,0 6px 12px rgba(226,35,26,.42)}
html[lang="en"] .submit-btn{font-family:"Titan One","Archivo",cursive;font-weight:400;letter-spacing:1px}

/* ---------- round result ---------- */
/* score sits right above the two ovens, centered; bubbly display face.
   top margin drops the whole score/ovens/quip group down the card */
.round-score{font-family:"Titan One","Archivo",cursive;font-weight:400;font-size:98px;line-height:1;color:#111;
  text-align:center;margin:106px 0 18px;letter-spacing:2px}
.res-ovens{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:4px;padding:0}
.res-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.res-cap{font-weight:800;font-size:14px;color:#111;margin-top:2px}
.res-val{font-family:"Archivo";font-weight:600;font-size:12px;letter-spacing:.4px;color:#8a8a92}
/* quip now follows the ovens directly rather than being pinned near the card floor */
.quip{font-size:18px;font-weight:700;color:#333;margin:18px 2px 0;line-height:1.5;min-height:52px;text-align:center}

/* ---------- final ---------- */
.rank{font-family:"Archivo";font-weight:800;font-size:18px;color:#555;letter-spacing:.3px}
.score-wrap{display:flex;align-items:center;justify-content:center;gap:4px;margin:4px 0 0}
.wreath{height:92px;width:auto;flex:0 0 auto}
.wreath-l{margin-right:-2px}
.wreath-r{margin-left:-2px}
.final-score{font-family:"Archivo";font-weight:900;font-size:74px;line-height:1;margin:0;letter-spacing:-2px;text-align:center;
  color:#f6c945;-webkit-text-stroke:1.5px #1a1a1a;
  text-shadow:0 0 7px rgba(255,255,255,.95),0 0 16px rgba(255,255,255,.7),0 2px 3px rgba(0,0,0,.3);
  animation:scoreGlow 2s ease-in-out infinite}
@keyframes scoreGlow{
  0%,100%{text-shadow:0 0 5px rgba(255,255,255,.6),0 0 11px rgba(255,255,255,.35),0 2px 3px rgba(0,0,0,.3)}
  50%{text-shadow:0 0 12px rgba(255,255,255,1),0 0 28px rgba(255,255,255,.9),0 2px 3px rgba(0,0,0,.3)}
}
@media (prefers-reduced-motion:reduce){.final-score{animation:none}}
.final-score small{font-size:26px;color:#bbb;letter-spacing:0}
/* lifted 10px (top 22->12); bottom grows to match so nothing below it shifts */
.quip--final{min-height:auto;margin:12px 2px 20px;color:#555;font-size:15px;text-align:center}
.breakdown{background:rgba(255,251,243,.72);border:1.5px solid rgba(150,110,60,.28);border-radius:16px;padding:9px 11px;margin-bottom:8px;backdrop-filter:blur(2px)}
.bd-label{font-weight:800;font-size:13px;margin-bottom:7px;display:flex;justify-content:space-between;color:#111}
.bd-label b{font-family:"Archivo"}
.bd-bar{display:flex;gap:6px}
.bd-seg{flex:1;aspect-ratio:1/0.68;border-radius:10px;position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center}
.bd-seg .bd-num{position:relative;z-index:2;font-family:"Archivo";font-weight:900;font-size:15px;color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.45)}
#finalScreen{justify-content:flex-start;padding:20px 22px 16px;overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:url(../assets/results_paper.jpg) center/cover no-repeat}
#finalScreen .final-score{align-self:auto}
#finalScreen .hud{justify-content:center}
#finalScreen .hud .rank{text-align:center}
#finalScreen .hud .icon-btn{position:absolute;top:0;right:0}

/* --- pizza conversion CTA on the final screen --- */
.pizza-cta{margin-top:26px;padding:18px 16px 24px;border-radius:18px;
  background:rgba(255,248,238,.78);border:1.5px solid rgba(150,110,60,.3);text-align:center;backdrop-filter:blur(2px)}
.pizza-title{font-family:"Archivo","Noto Sans KR";font-weight:800;font-size:15px;line-height:1.4;
  color:#222;margin:0 0 14px}
.pizza-title b{font-family:"Archivo";font-weight:900;font-size:19px;color:#e2231a}
.pizza-ovens{display:flex;justify-content:center;align-items:flex-end;gap:14px;margin:0 0 14px}
.pizza-oven{height:112px;width:auto;flex:0 0 auto;
  filter:drop-shadow(0 6px 14px rgba(200,40,20,.28))}
.pizza-sub{font-size:15px;line-height:1.45;color:#444;font-weight:700;margin:0;text-align:center}
.visit-btn{position:relative;overflow:hidden;isolation:isolate;
  display:flex;align-items:center;justify-content:center;min-height:54px;
  margin:22px auto 0;padding:15px 22px;border-radius:14px;
  background:linear-gradient(#ff5a3c,#e2231a);color:#fff;line-height:1;
  font-family:"Archivo","Noto Sans KR",sans-serif;font-weight:900;font-size:21px;letter-spacing:.2px;
  text-shadow:0 2px 0 rgba(150,20,0,.55);text-decoration:none;text-align:center;
  box-shadow:0 5px 0 #a5140d,0 10px 16px rgba(226,35,26,.4);transition:transform .05s,box-shadow .05s}
html[lang="en"] .visit-btn{font-family:"Titan One","Archivo",cursive;font-weight:400;font-size:19px;letter-spacing:.4px}
html[lang="ko"] .visit-btn{padding-top:18px;padding-bottom:12px}
.pizza-cta .visit-btn{margin-top:16px}
.visit-btn::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.6) 50%,transparent 60%);
  background-size:250% 100%;animation:btnShine 3s ease-in-out infinite}
.visit-btn:active{transform:translateY(3px);box-shadow:0 2px 0 #a5140d}
.final-actions{position:relative;display:flex;justify-content:center;align-items:center;margin:10px 0 2px}
.again-link{display:block;margin:0;padding:5px;background:none;border:none;
  cursor:pointer;font-family:inherit;font-weight:800;font-size:14px;color:#1a1a1a;text-decoration:underline}
.again-link:active{color:#000}
.scores-link{position:absolute;right:2px;top:50%;transform:translateY(-50%);
  background:none;border:none;cursor:pointer;font-family:inherit;font-weight:800;font-size:13px;
  color:#1a1a1a;text-decoration:underline;padding:5px}
.scores-link:active{color:#000}

/* --- high scores screen --- */
#scoresScreen{padding:18px 20px 18px;background:url(../assets/results_paper.jpg) center/cover no-repeat;
  display:flex;flex-direction:column}
#scoresScreen .hud{justify-content:center;flex:0 0 auto}
.scores-title{display:flex;align-items:center;justify-content:center;gap:8px}
.scores-title .stw{height:44px;width:auto;flex:0 0 auto}
#scoresScreen .hud .rank{text-align:center;font-size:23px;color:#3a2a12;letter-spacing:1px}
html[lang="en"] #scoresScreen .hud .rank{font-family:"Titan One","Archivo",cursive;font-weight:400;font-size:25px}
#scoresScreen .hud .icon-btn{position:absolute;top:0;right:0}
.scores-frame{flex:1;min-height:0;margin-top:12px;display:flex;flex-direction:column;overflow:hidden;
  border-style:solid;border-width:40px 32px 40px 32px;
  border-image:url(../assets/wood_frame.png) 108 100 100 100 fill / 40px 32px 40px 32px}
.scores-list{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  display:flex;flex-direction:column;padding:2px 4px}
.score-row{display:flex;align-items:center;gap:10px;padding:8px 8px;color:#fff;
  border-bottom:1px solid rgba(255,255,255,.14)}
.score-row:last-child{border-bottom:none}
.score-row.is-me{background:rgba(246,201,69,.32);border-radius:8px;border-bottom-color:transparent}
.sr-rank{font-family:"Archivo";font-weight:900;font-size:15px;color:#f4d58a;width:30px;text-align:center;flex:0 0 auto;
  text-shadow:0 1px 2px rgba(0,0,0,.6)}
.scores-list .score-row:nth-child(1) .sr-rank{color:#ffd23f;font-size:18px}
.scores-list .score-row:nth-child(2) .sr-rank{color:#e2e2e2;font-size:17px}
.scores-list .score-row:nth-child(3) .sr-rank{color:#f0a969;font-size:17px}
.sr-name{flex:1;display:flex;align-items:center;gap:8px;min-width:0;
  font-family:"Archivo";font-weight:900;font-size:17px;letter-spacing:1px;color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.65)}
.sr-flag{font-size:18px;flex:0 0 auto;letter-spacing:0}
.sr-score{font-family:"Archivo";font-weight:900;font-size:19px;color:#fff;flex:0 0 auto;
  text-shadow:0 1px 2px rgba(0,0,0,.65)}
.scores-empty{text-align:center;color:#fff;font-weight:700;margin-top:40px;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.scores-total{text-align:center;color:#fff;font-weight:700;font-size:12px;letter-spacing:.3px;
  padding:14px 4px 6px;opacity:.78;text-shadow:0 1px 2px rgba(0,0,0,.6)}

/* --- initials entry modal --- */
.name-modal{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;
  background:rgba(20,10,4,.55);backdrop-filter:blur(3px)}
.name-modal.hidden{display:none}
.name-card{background:url(../assets/results_paper.jpg) center/cover no-repeat;border-radius:22px;
  padding:26px 24px 24px;width:78%;max-width:320px;text-align:center;
  box-shadow:0 20px 50px rgba(0,0,0,.4);border:1.5px solid rgba(150,110,60,.35)}
.name-title{font-family:"Archivo","Noto Sans KR";font-weight:900;font-size:22px;color:#2a1c0c;margin:0 0 18px}
html[lang="en"] .name-title{font-family:"Titan One","Archivo",cursive;font-weight:400;font-size:24px;letter-spacing:.5px}
.name-inputs{display:flex;gap:12px;justify-content:center}
.name-cell{width:60px;height:74px;box-sizing:border-box;text-align:center;text-transform:uppercase;
  font-family:"Archivo";font-weight:900;font-size:42px;color:#1a1a1a;caret-color:#e2231a;padding:0;
  border:2px solid rgba(150,110,60,.4);border-bottom:4px solid #e2231a;border-radius:12px;
  background:rgba(255,255,255,.72);outline:none;transition:border-color .12s,box-shadow .12s}
.name-cell:focus{border-color:#e2231a;background:#fff;box-shadow:0 0 0 3px rgba(226,35,26,.16)}
.name-card .start-btn{margin:22px 0 0;width:100%;animation:none}
/* settings modal: two labeled toggle switches */
.settings-card{max-width:340px}
.setting-row{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:13px 4px;border-bottom:1.5px solid rgba(150,110,60,.22)}
.setting-row:first-of-type{border-top:1.5px solid rgba(150,110,60,.22)}
.setting-row span{font-family:"Archivo","Noto Sans KR";font-weight:800;font-size:18px;color:#2a1c0c}
html[lang="en"] .setting-row span{font-family:"Titan One","Archivo",cursive;font-weight:400;letter-spacing:.4px}
.switch{position:relative;width:56px;height:32px;border-radius:999px;border:none;cursor:pointer;padding:0;
  background:#b8ab8f;box-shadow:inset 0 2px 4px rgba(0,0,0,.25);transition:background .18s}
.switch[aria-checked="true"]{background:#e2231a}
.switch .knob{position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;
  box-shadow:0 2px 5px rgba(0,0,0,.35);transition:left .18s}
.switch[aria-checked="true"] .knob{left:27px}