@font-face{
  font-family:'Fredoka';
  src:url('assets/fonts/Fredoka.woff2') format('woff2');
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
}

:root{
  --cream:#F3E9D2;
  --cream-hi:#FBF4E4;
  --cream-lo:#E7D7B4;
  --ink:#1F2A3A;
  --red:#B0302A;
  --red-dark:#8A211D;
  --green:#7FA650;
  --blue:#3E7CB1;
  --mustard:#E3A72F;
  --aurora:#57E0A6;
  --wood:#C39A5E;
  --wood-d:#8A6236;
  --plum:#7B4A7E;
  --shadow:0 5px 0 rgba(31,42,58,.82);
  --r:18px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0}
body{
  font-family:'Fredoka','Trebuchet MS',system-ui,sans-serif;
  background:#14202b;color:var(--ink);
  overflow:hidden;
  -webkit-user-select:none;user-select:none;
  overscroll-behavior:none;
}
button{font-family:inherit;color:inherit;border:0;background:none;cursor:pointer;touch-action:manipulation}
img{pointer-events:none}
.hidden{display:none!important}

#app{position:fixed;inset:0;overflow:hidden}
#scene{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}

/* ---------------- shared boards ---------------- */
.hud-card{
  position:absolute;
  background:linear-gradient(180deg,var(--cream-hi),var(--cream) 55%,var(--cream-lo));
  border:3px solid var(--ink);
  border-radius:var(--r);
  box-shadow:var(--shadow),inset 0 0 0 2px rgba(255,255,255,.5);
}
.lbl{
  display:block;font-weight:600;letter-spacing:.14em;
  font-size:11px;line-height:1;color:rgba(31,42,58,.68);
}
.small-note{font-size:13px;color:rgba(31,42,58,.66);margin:12px 0 0;line-height:1.35}

/* ---------------- HUD ---------------- */
#hud{position:absolute;inset:0;pointer-events:none;z-index:10}
.pos-card{
  top:calc(10px + env(safe-area-inset-top));left:calc(10px + env(safe-area-inset-left));
  padding:7px 16px 9px;min-width:104px;text-align:center;
}
.pos-val{
  display:block;font-weight:700;font-size:46px;line-height:.98;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.pos-of{display:block;font-size:11px;font-weight:500;color:rgba(31,42,58,.6);margin-top:1px}
.lap-card{
  top:calc(10px + env(safe-area-inset-top));right:calc(10px + env(safe-area-inset-right));
  padding:8px 16px 10px;min-width:104px;text-align:center;
}
.lap-val{display:block;font-weight:600;font-size:30px;line-height:1.05;font-variant-numeric:tabular-nums}

.top-btns{
  position:absolute;right:calc(10px + env(safe-area-inset-right));
  top:calc(96px + env(safe-area-inset-top));
  display:flex;flex-direction:column;gap:8px;pointer-events:auto;
}
.round-btn{
  width:44px;height:44px;border-radius:50%;
  background:linear-gradient(180deg,var(--cream-hi),var(--cream-lo));
  border:3px solid var(--ink);box-shadow:0 4px 0 rgba(31,42,58,.8);
  display:flex;align-items:center;justify-content:center;
  color:var(--ink);transition:transform .06s;
}
.round-btn:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(31,42,58,.8)}

.minimap-card{
  left:calc(12px + env(safe-area-inset-left));
  bottom:calc(12px + env(safe-area-inset-bottom));
  width:152px;height:152px;padding:7px;border-radius:22px;
}
.minimap-card canvas{width:100%;height:100%;display:block}

.gauge-card{
  position:absolute;
  right:calc(6px + env(safe-area-inset-right));
  bottom:calc(4px + env(safe-area-inset-bottom));
  width:158px;height:158px;
  filter:drop-shadow(0 6px 0 rgba(31,42,58,.45));
  pointer-events:none;
}
.gauge-card canvas{width:100%;height:100%;display:block}

.hint{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:calc(14px + env(safe-area-inset-bottom));
  background:rgba(243,233,210,.94);border:2px solid rgba(31,42,58,.75);
  border-radius:999px;padding:7px 16px;font-size:12.5px;font-weight:500;
  white-space:nowrap;box-shadow:0 3px 0 rgba(31,42,58,.35);
  transition:opacity .4s;max-width:calc(100vw - 40px);overflow:hidden;text-overflow:ellipsis;
}
.hint.fade{opacity:0}

/* touch controls */
.touch-controls{
  position:absolute;left:0;right:0;
  bottom:calc(8px + env(safe-area-inset-bottom));
  display:none;justify-content:space-between;align-items:flex-end;
  padding:0 calc(14px + env(safe-area-inset-left)) 0 calc(14px + env(safe-area-inset-right));
  pointer-events:none;z-index:12;
}
body.touch .touch-controls{display:flex}
.touch-controls.hidden{display:none!important}
.steer-pad,.pedal-pad{display:flex;gap:10px;align-items:flex-end;pointer-events:auto}
.tbtn{
  width:72px;height:72px;border-radius:50%;
  background:linear-gradient(180deg,rgba(251,244,228,.96),rgba(231,215,180,.94));
  border:3px solid var(--ink);box-shadow:0 6px 0 rgba(31,42,58,.78);
  display:flex;align-items:center;justify-content:center;color:var(--ink);
  transition:transform .05s,background .05s;
}
.tbtn.gas{
  width:82px;height:82px;color:var(--cream);
  background:linear-gradient(180deg,#C73B33,var(--red) 58%,var(--red-dark));
}
.tbtn.brake{width:60px;height:60px;background:linear-gradient(180deg,var(--cream-hi),var(--mustard))}
.tbtn.active{transform:translateY(5px);box-shadow:0 1px 0 rgba(31,42,58,.7)}
.tbtn.gas.active{background:linear-gradient(180deg,var(--red),var(--red-dark))}

body.touch .minimap-card{bottom:calc(98px + env(safe-area-inset-bottom))}
body.touch .gauge-card{bottom:calc(86px + env(safe-area-inset-bottom))}
body.touch .hint{top:calc(88px + env(safe-area-inset-top));bottom:auto;max-width:min(290px,70vw);white-space:normal;line-height:1.22;text-align:center;padding:6px 14px}

/* ---------------- countdown / banner / toast ---------------- */
#countdown{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  z-index:16;pointer-events:none;
}
#countdownInner{
  display:flex;align-items:center;justify-content:center;
  width:170px;height:170px;border-radius:50%;
  background:linear-gradient(180deg,var(--cream-hi),var(--cream) 60%,var(--cream-lo));
  border:7px solid var(--ink);
  box-shadow:0 10px 0 rgba(31,42,58,.55),inset 0 0 0 5px rgba(255,255,255,.5);
  font-size:96px;font-weight:700;line-height:1;color:var(--ink);
  text-shadow:0 3px 0 rgba(31,42,58,.15);
}
#countdownInner.go{
  width:auto;min-width:280px;height:150px;border-radius:38px;padding:0 36px;
  font-size:68px;letter-spacing:.03em;color:var(--cream);
  background:linear-gradient(180deg,#C73B33,var(--red) 55%,var(--red-dark));
  text-shadow:0 5px 0 rgba(0,0,0,.2);
}
.pop{animation:pop .8s cubic-bezier(.2,.9,.25,1) both}
@keyframes pop{
  0%{transform:scale(.35);opacity:0}
  22%{transform:scale(1.07);opacity:1}
  55%{transform:scale(1);opacity:1}
  100%{transform:scale(1);opacity:1}
}

#levelBanner{
  position:absolute;left:50%;top:15%;transform:translateX(-50%);
  z-index:14;pointer-events:none;text-align:center;
  background:linear-gradient(180deg,var(--cream-hi),var(--cream) 60%,var(--cream-lo));
  border:4px solid var(--ink);border-radius:22px;
  box-shadow:0 9px 0 rgba(31,42,58,.5),inset 0 0 0 3px rgba(255,255,255,.5);
  padding:12px 34px 14px;animation:bannerIn .7s ease both;
}
@keyframes bannerIn{from{opacity:0;transform:translate(-50%,-16px)}to{opacity:1;transform:translate(-50%,0)}}
.lb-kicker{display:block;font-size:12px;letter-spacing:.2em;font-weight:600;color:var(--red)}
.lb-name{display:block;font-size:34px;font-weight:700;line-height:1.05;margin-top:2px}
.lb-sub{display:block;font-size:13px;color:rgba(31,42,58,.66);margin-top:3px}
#levelBanner.out{animation:bannerOut .45s ease both}
@keyframes bannerOut{to{opacity:0;transform:translate(-50%,-12px)}}

#toast{
  position:absolute;left:50%;top:calc(96px + env(safe-area-inset-top));transform:translateX(-50%);
  background:var(--ink);color:var(--cream);font-size:14px;font-weight:500;
  padding:9px 20px;border-radius:999px;z-index:55;pointer-events:none;
  box-shadow:0 4px 0 rgba(0,0,0,.28);white-space:nowrap;
}

/* ---------------- screens / panels ---------------- */
.screen{position:absolute;inset:0;z-index:20}
.overlay{
  display:flex;align-items:center;justify-content:center;
  padding:14px;background:rgba(14,22,31,.5);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
}
.panel{
  position:relative;width:min(560px,100%);max-height:94vh;overflow:auto;
  background:
    radial-gradient(120% 90% at 20% 0%,rgba(255,255,255,.6),transparent 60%),
    linear-gradient(180deg,var(--cream-hi),var(--cream) 45%,var(--cream-lo));
  border:4px solid var(--ink);border-radius:30px;
  box-shadow:0 12px 0 rgba(31,42,58,.5),0 30px 60px rgba(0,0,0,.3),inset 0 0 0 4px rgba(255,255,255,.4);
  padding:24px 24px 22px;text-align:center;
  animation:panelIn .3s cubic-bezier(.2,.9,.3,1) both;
}
@keyframes panelIn{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
.panel h2{font-size:40px;line-height:1;margin:0 0 6px;font-weight:700;letter-spacing:-.01em}

/* menu */
#menu{
  background:
    radial-gradient(120% 80% at 50% -10%,#FFF9EA 0%,#F6ECD7 45%,#E9D9B6 100%);
  overflow-y:auto;overflow-x:hidden;z-index:22;
}
.menu-scroll{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:100%;gap:clamp(8px,1.6vh,16px);
  padding:calc(12px + env(safe-area-inset-top)) clamp(10px,3vw,30px) calc(14px + env(safe-area-inset-bottom));
}
.menu-head{flex:0 0 auto}
.logo{
  display:block;width:min(340px,60vw,26vh);height:auto;
  filter:drop-shadow(0 9px 0 rgba(31,42,58,.18)) drop-shadow(0 18px 26px rgba(31,42,58,.14));
}
.map-frame{
  position:relative;flex:0 0 auto;
  width:min(92vw,1100px,calc((100vh - 330px) * 1.5));
  aspect-ratio:3/2;border-radius:26px;overflow:hidden;
  border:5px solid #FFF8E7;
  box-shadow:0 10px 0 rgba(31,42,58,.22),0 24px 44px rgba(31,42,58,.18),inset 0 0 0 2px rgba(31,42,58,.18);
  container-type:inline-size;
  background:#EFE3C6;
}
.map-frame>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.badges{position:absolute;inset:0}
.level-badge{
  position:absolute;transform:translate(-50%,-50%);
  width:14cqw;height:14cqw;border-radius:50%;
  background:radial-gradient(circle at 36% 28%,#FFF9EA,var(--cream) 55%,#E3D0A9);
  border:.85cqw solid var(--ink);
  box-shadow:0 .9cqw 0 rgba(31,42,58,.38),inset 0 0 0 .45cqw var(--cream-hi);
  display:flex;align-items:center;justify-content:center;
  padding:0;z-index:2;transition:transform .12s;
  cursor:pointer;
}
.level-badge .num{
  font-size:5.6cqw;font-weight:700;line-height:1;color:var(--ink);
  transform:translateY(-.4cqw);
}
.level-badge .nm{
  position:absolute;top:102%;left:50%;transform:translateX(-50%);
  font-size:1.9cqw;font-weight:600;white-space:nowrap;
  background:rgba(243,233,210,.95);padding:.35cqw 1.1cqw;border-radius:1cqw;
  border:.22cqw solid rgba(31,42,58,.45);
  box-shadow:0 .3cqw 0 rgba(31,42,58,.22);
}
.level-badge .lock{
  position:absolute;top:50%;left:50%;width:58%;height:58%;
  transform:translate(-50%,-50%);object-fit:contain;
  opacity:.85;
}
.level-badge .done{
  position:absolute;right:-8%;top:-8%;width:36%;height:36%;
  border-radius:50%;background:var(--green);border:.55cqw solid var(--ink);
  color:#fff;font-size:2.2cqw;font-weight:700;display:flex;align-items:center;justify-content:center;
  box-shadow:0 .3cqw 0 rgba(31,42,58,.35);
}
.level-badge[data-state="locked"]{
  background:radial-gradient(circle at 36% 28%,#DCD5C6,#BDB6A7 60%,#9C958A);
  border-color:#5B5A57;cursor:pointer;filter:saturate(.3);
}
.level-badge[data-state="locked"] .lbl-locked{
  position:absolute;top:102%;left:50%;transform:translateX(-50%);
  font-size:1.9cqw;font-weight:600;white-space:nowrap;color:#4A4A48;
  background:rgba(243,233,210,.95);padding:.35cqw 1.1cqw;border-radius:1cqw;
  border:.22cqw solid rgba(31,42,58,.4);
}
.level-badge[data-state="open"]{border-color:var(--red)}
.level-badge[data-state="done"]{border-color:#B8862B;box-shadow:0 .9cqw 0 rgba(31,42,58,.38),inset 0 0 0 .45cqw #FFE9A8}
.level-badge:hover:not(.disabled){transform:translate(-50%,-50%) scale(1.06)}
.level-badge:active:not(.disabled){transform:translate(-50%,-50%) scale(.96)}
.level-badge.disabled{cursor:not-allowed}
.shake{animation:shake .4s}
@keyframes shake{0%,100%{transform:translate(-50%,-50%)}25%{transform:translate(calc(-50% - 6px),-50%)}75%{transform:translate(calc(-50% + 6px),-50%)}}

.level-strip{
  display:flex;flex-wrap:wrap;justify-content:center;gap:7px;
  max-width:900px;width:100%;
}
.lvl-chip{
  display:flex;align-items:center;gap:8px;
  background:linear-gradient(180deg,var(--cream-hi),var(--cream-lo));
  border:2.5px solid var(--ink);border-radius:999px;
  padding:6px 13px 7px;font-size:13px;font-weight:500;
  box-shadow:0 3px 0 rgba(31,42,58,.45);transition:transform .08s;
}
.lvl-chip:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(31,42,58,.45)}
.lvl-chip .cnum{
  width:22px;height:22px;border-radius:50%;background:var(--red);color:var(--cream);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:0 0 auto;
}
.lvl-chip .cname{font-weight:600}
.lvl-chip .cbest{font-size:11px;opacity:.62;font-variant-numeric:tabular-nums}
.lvl-chip[data-state="locked"]{opacity:.55;filter:saturate(.15)}
.lvl-chip[data-state="locked"] .cnum{background:#6b6c6b}
.lvl-chip[data-state="done"] .cnum{background:var(--green)}
.lvl-chip.sel{outline:3px solid rgba(176,48,42,.4);outline-offset:2px}

.menu-foot{display:flex;flex-direction:column;align-items:center;gap:8px}
.big-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:200px;padding:13px 34px;
  border-radius:999px;border:3px solid var(--ink);
  background:linear-gradient(180deg,#C73B33,var(--red) 58%,var(--red-dark));
  color:var(--cream);font-size:22px;font-weight:600;letter-spacing:.04em;
  box-shadow:0 6px 0 rgba(31,42,58,.8),inset 0 2px 0 rgba(255,255,255,.22);
  text-shadow:0 2px 0 rgba(0,0,0,.18);
  transition:transform .06s;
}
.big-btn:active{transform:translateY(4px);box-shadow:0 2px 0 rgba(31,42,58,.8)}
.wood-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:150px;padding:11px 24px;border-radius:999px;
  border:3px solid var(--ink);
  background:linear-gradient(180deg,var(--cream-hi),var(--cream-lo));
  color:var(--ink);font-size:16px;font-weight:600;
  box-shadow:0 5px 0 rgba(31,42,58,.6);
  transition:transform .06s;
}
.wood-btn:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(31,42,58,.6)}
.menu-hint{margin:0;font-size:13px;color:rgba(31,42,58,.62);text-align:center;max-width:520px}

/* pause / help */
.pause-panel{width:min(420px,100%)}
.btn-col{display:flex;flex-direction:column;gap:11px;align-items:center;margin-top:18px}
.btn-col .big-btn,.btn-col .wood-btn{width:min(280px,100%)}

.help-panel{width:min(500px,100%)}
.help-grid{display:flex;flex-direction:column;gap:9px;margin:18px 0 4px}
.help-row{display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:rgba(255,255,255,.35);border:2px solid rgba(31,42,58,.14);border-radius:12px;padding:7px 12px}
.help-row .keys{display:flex;gap:5px;flex-wrap:wrap}
kbd{
  font-family:inherit;font-size:12px;font-weight:600;
  background:var(--cream-hi);border:2px solid var(--ink);border-bottom-width:3px;
  border-radius:7px;padding:2px 8px;color:var(--ink);display:inline-block;
}
.help-panel .big-btn{margin-top:18px}

/* results */
.results-panel{width:min(590px,100%);padding-top:18px}
.result-top{display:flex;align-items:center;justify-content:center;gap:10px;min-height:100px}
.trophy{height:118px;width:auto;filter:drop-shadow(0 7px 0 rgba(31,42,58,.25));animation:trophyIn .7s cubic-bezier(.2,1.3,.4,1) both}
@keyframes trophyIn{0%{transform:scale(.2) rotate(-12deg);opacity:0}70%{transform:scale(1.06) rotate(3deg)}100%{transform:scale(1) rotate(0);opacity:1}}
.result-title-wrap{text-align:left}
.result-kicker{font-size:12px;letter-spacing:.2em;font-weight:600;color:var(--red)}
.results-panel h2{font-size:44px;margin:0}
.result-sub{margin:2px 0 0;font-size:14px;color:rgba(31,42,58,.65)}
.result-order{display:flex;flex-direction:column;gap:5px;margin:16px 0 18px}
.order-row{
  display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.35);border:2px solid rgba(31,42,58,.12);
  border-radius:12px;padding:7px 12px;font-size:14px;
}
.order-row.me{background:rgba(176,48,42,.13);border-color:rgba(176,48,42,.5)}
.order-row .op{width:26px;font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.order-row .odot{width:13px;height:13px;border-radius:50%;border:2px solid rgba(31,42,58,.65);flex:0 0 auto}
.order-row .oname{font-weight:600;flex:1;text-align:left}
.order-row .otime{font-size:12px;color:rgba(31,42,58,.62);font-variant-numeric:tabular-nums}
.btn-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.btn-row .big-btn{font-size:19px;padding:11px 26px;min-width:170px}

/* loading */
#loading{
  background:radial-gradient(120% 80% at 50% 0%,#FFF9EA,#F1E4C9 60%,#E6D4AE);
  display:flex;align-items:center;justify-content:center;z-index:60;
}
.loading-inner{display:flex;flex-direction:column;align-items:center;gap:18px}
.loading-logo{width:min(340px,70vw);filter:drop-shadow(0 8px 0 rgba(31,42,58,.18))}
#loadingText{font-size:15px;color:rgba(31,42,58,.7);margin:0}
.spinner{width:58px;height:58px;position:relative}
.spinner span{
  position:absolute;inset:0;border-radius:50%;
  border:7px solid rgba(31,42,58,.16);border-top-color:var(--red);
  animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------------- responsive ---------------- */
@media (max-width:760px){
  .pos-card{padding:5px 13px 7px;min-width:86px;border-radius:15px}
  .pos-val{font-size:37px}
  .lap-card{padding:6px 13px 8px;min-width:88px;border-radius:15px}
  .lap-val{font-size:24px}
  .lbl{font-size:9.5px}
  .top-btns{top:calc(82px + env(safe-area-inset-top))}
  .round-btn{width:40px;height:40px}
  .minimap-card{width:112px;height:112px;border-radius:18px;padding:5px}
  .gauge-card{width:120px;height:120px}
  .tbtn{width:66px;height:66px}
  .tbtn.gas{width:76px;height:76px}
  .tbtn.brake{width:56px;height:56px}
  body.touch .minimap-card{bottom:calc(92px + env(safe-area-inset-bottom))}
  body.touch .gauge-card{bottom:calc(82px + env(safe-area-inset-bottom))}
  .hint{font-size:11px;padding:6px 12px}
  .level-strip{display:flex;gap:5px}
  .lvl-chip{font-size:12px;padding:5px 10px 6px;gap:6px}
  .lvl-chip .cnum{width:19px;height:19px;font-size:11px}
  .lvl-chip .cbest{font-size:10px}
  .level-badge .nm,.level-badge .lbl-locked{display:none}
  .map-frame{width:min(94vw,calc((100vh - 290px) * 1.5));height:calc(min(94vw,calc((100vh - 290px) * 1.5)) / 1.5)}
  .logo{width:min(360px,74vw,34vh)}
  .menu-scroll{gap:10px}
  .result-top{flex-direction:column;gap:4px;text-align:center}
  .result-title-wrap{text-align:center}
  .results-panel h2{font-size:36px}
  .panel{padding:20px 16px 18px;border-radius:24px}
  .panel h2{font-size:33px}
  .btn-row .big-btn{min-width:140px;font-size:17px;padding:10px 20px}
}

@media (max-height:560px) and (orientation:landscape){
  .pos-card{padding:4px 12px 6px;min-width:78px}
  .pos-val{font-size:31px}
  .lap-val{font-size:21px}
  .top-btns{top:calc(76px + env(safe-area-inset-top));gap:6px}
  .round-btn{width:36px;height:36px;border-width:2px}
  .round-btn svg{width:18px;height:18px}
  .minimap-card{width:94px;height:94px}
  .gauge-card{width:106px;height:106px}
  .tbtn{width:58px;height:58px}
  .tbtn.gas{width:68px;height:68px}
  .tbtn.brake{width:50px;height:50px}
  body.touch .minimap-card{bottom:calc(80px + env(safe-area-inset-bottom))}
  body.touch .gauge-card{bottom:calc(72px + env(safe-area-inset-bottom))}
  .hint{display:none}
  .level-strip{display:none}
  .map-frame{width:min(76vw,calc((100vh - 185px) * 1.5))}
  .logo{width:min(300px,30vw,34vh)}
  .level-badge .nm,.level-badge .lbl-locked{display:none}
  .menu-scroll{gap:7px;padding-top:6px;padding-bottom:8px}
  .menu-hint{display:none}
  .big-btn{padding:9px 26px;font-size:18px}
  .lb-name{font-size:26px}
  .lb-kicker{font-size:10px}
  .lb-sub{font-size:11px}
  #countdownInner{width:130px;height:130px;font-size:72px}
  #countdownInner.go{min-width:220px;height:116px;font-size:52px}
}