:root{
  --gold:#ffb95e;
  --gold-deep:#e2862b;
  --cream:#f8e8cf;
  --ink:#140c07;
  --panel:#1d1109;
  --line:rgba(255,190,110,.28);
  --shadow:0 18px 60px rgba(0,0,0,.55);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#0b0705;overflow:hidden;color:var(--cream);
  font-family:"Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.hidden{display:none !important}
#app{position:fixed;inset:0;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
#game{position:absolute;inset:0}
#game canvas{display:block;width:100% !important;height:100% !important;touch-action:none}
#grade{position:absolute;inset:0;pointer-events:none;z-index:2;
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(255,164,74,.20), transparent 60%),
    radial-gradient(90% 90% at 50% 50%, transparent 45%, rgba(20,8,3,.34) 100%);
  mix-blend-mode:screen}
#grade:after{content:"";position:absolute;inset:0;mix-blend-mode:multiply;
  background:linear-gradient(180deg, rgba(255,180,100,.06), rgba(80,30,10,.16))}

/* ---------- HUD ---------- */
#hud{position:absolute;inset:0;z-index:12;pointer-events:none}
.hud-row{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:10px;
  padding:calc(8px + env(safe-area-inset-top)) calc(10px + env(safe-area-inset-right)) 18px calc(10px + env(safe-area-inset-left));
  background:linear-gradient(180deg, rgba(10,6,4,.80), rgba(10,6,4,.42) 62%, transparent);
  pointer-events:none}
.lapbox{flex:1;min-width:0;max-width:260px}
.lapline{display:flex;align-items:baseline;gap:6px;letter-spacing:.14em;font-size:10px;color:var(--cream)}
.lapline #lap-n{font-family:Georgia,"Times New Roman",serif;font-size:16px;font-weight:700;color:var(--gold);letter-spacing:0}
.lapline .dim{opacity:.66}
.bar{position:relative;height:6px;margin-top:5px;border-radius:99px;background:rgba(255,240,220,.16);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.45)}
.bar-fill{position:absolute;left:0;top:0;bottom:0;width:0%;border-radius:99px;
  background:linear-gradient(90deg,#ffdc9a,#ff9c3d);box-shadow:0 0 10px rgba(255,160,60,.55)}
.bar .dot{position:absolute;top:50%;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;
  transform:translateY(-50%);background:var(--gold);border:1.5px solid #211207;box-shadow:0 0 8px rgba(0,0,0,.5)}
.bar .dot.rival{background:#8fc08a}
.lives{display:flex;gap:5px;align-items:center}
.lives i{display:block;width:9px;height:9px;transform:rotate(45deg);background:var(--gold);
  border-radius:1px;box-shadow:0 0 6px rgba(255,170,70,.5);transition:opacity .2s,background .2s}
.lives i.lost{background:rgba(255,240,220,.14);box-shadow:none}
.clock{display:flex;flex-direction:column;align-items:flex-end;line-height:1;gap:3px;margin-left:auto}
#clock{font-family:Georgia,"Times New Roman",serif;font-size:17px;letter-spacing:.02em;color:#fff3df;
  font-variant-numeric:tabular-nums;text-shadow:0 1px 3px rgba(0,0,0,.6)}
#speed{font-size:9px;letter-spacing:.18em;opacity:.72}
.icon{pointer-events:auto;width:34px;height:34px;flex:0 0 auto;display:grid;place-items:center;
  border:1px solid rgba(255,225,190,.24);border-radius:50%;background:rgba(18,10,6,.6);color:var(--cream)}
.icon svg{width:17px;height:17px;fill:currentColor}
.icon:active{background:rgba(255,180,90,.28)}
.pane-tag{position:absolute;z-index:11;font-size:9px;letter-spacing:.16em;color:#ffe1b6;
  background:rgba(14,8,5,.62);border:1px solid rgba(255,190,110,.24);border-radius:99px;
  padding:4px 9px;pointer-events:none;white-space:nowrap;backdrop-filter:blur(3px)}
.pane-tag.me{color:#1b0d04;background:linear-gradient(180deg,#ffd692,#ffab4b);border-color:#ffe6b8;font-weight:700}
#split{position:absolute;z-index:10;pointer-events:none;background:linear-gradient(90deg,rgba(255,180,90,.0),rgba(255,190,110,.7),rgba(255,180,90,.0));
  box-shadow:0 0 12px rgba(0,0,0,.7)}
#hint{position:absolute;z-index:13;left:50%;transform:translateX(-50%);font-size:9px;letter-spacing:.18em;
  color:#ffe3b8;background:rgba(14,7,4,.6);border:1px solid rgba(255,190,110,.22);
  border-radius:99px;padding:6px 12px;pointer-events:none;white-space:nowrap;transition:opacity .5s}
#toast{position:absolute;z-index:16;left:50%;top:44%;transform:translate(-50%,-50%);
  font-family:Georgia,"Times New Roman",serif;font-size:clamp(18px,4vmin,34px);color:#ffe4b0;
  text-shadow:0 2px 12px rgba(0,0,0,.8);pointer-events:none;letter-spacing:.06em;white-space:nowrap}
#toast.show{animation:toast 1.1s ease forwards}
@keyframes toast{0%{opacity:0;transform:translate(-50%,-30%) scale(.9)}18%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  70%{opacity:1}100%{opacity:0;transform:translate(-50%,-70%) scale(1.02)}}
#countdown{position:absolute;inset:0;z-index:15;display:grid;place-items:center;pointer-events:none}
#countdown span{font-family:Georgia,"Times New Roman",serif;font-size:clamp(64px,20vmin,170px);
  color:#ffe2ac;text-shadow:0 6px 30px rgba(0,0,0,.65),0 0 40px rgba(255,150,50,.35)}
#countdown.pop span{animation:pop .42s cubic-bezier(.2,.9,.3,1.4)}
@keyframes pop{0%{transform:scale(.55);opacity:0}60%{opacity:1}100%{transform:scale(1)}}

/* ---------- touch ---------- */
#touch{position:absolute;z-index:9;display:flex;align-items:flex-end;justify-content:space-between;
  pointer-events:none;padding:0 8px}
.steer{display:flex;gap:6px;pointer-events:none}
.tbtn{pointer-events:auto;width:46px;height:46px;display:grid;place-items:center;border-radius:14px;
  color:#ffe8c6;background:rgba(16,9,5,.52);border:1px solid rgba(255,215,170,.30);
  backdrop-filter:blur(3px);touch-action:none;-webkit-tap-highlight-color:transparent;
  box-shadow:0 4px 14px rgba(0,0,0,.3)}
.tbtn svg{width:24px;height:24px}
.tbtn.gas{width:60px;height:52px;font-size:11px;font-weight:800;letter-spacing:.18em;border-radius:18px;
  background:linear-gradient(180deg,rgba(255,196,110,.92),rgba(214,124,32,.92));color:#241205;
  border-color:#ffe7bd}
.tbtn.on{background:rgba(255,184,88,.85);color:#1d0f04;border-color:#ffe8c2;transform:scale(.96)}
.tbtn.gas.on{filter:brightness(1.08);transform:scale(.96)}
.tbtn.gas.pulse{animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,180,90,.5)}50%{box-shadow:0 0 0 10px rgba(255,180,90,0)}}

/* ---------- overlays ---------- */
.overlay{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;
  background:rgba(9,5,3,.72);backdrop-filter:blur(3px)}
.sheet{width:min(92vw,470px);max-height:min(92vh,760px);overflow:auto;padding:clamp(16px,3.2vw,28px);
  background:linear-gradient(180deg,#28170c,#160d07 70%);border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--shadow);text-align:center}
.sheet.small{width:min(90vw,360px)}
.kicker{font-size:9px;letter-spacing:.32em;color:var(--gold);opacity:.9}
.sheet h2{font-family:Georgia,"Times New Roman",serif;font-weight:700;letter-spacing:.02em;
  font-size:clamp(21px,3.4vmin,30px);margin:7px 0 6px;color:#fff1dc}
.lede{font-size:11px;line-height:1.5;letter-spacing:.04em;opacity:.72;margin:0 auto 14px;max-width:30ch}
.btn{position:relative;display:block;width:100%;min-height:46px;border-radius:7px;border:1px solid transparent;
  font-size:11px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  padding:7px 12px;transition:transform .12s,filter .12s;margin:7px 0}
.btn:active{transform:translateY(1px)}
.btn.primary{background:linear-gradient(180deg,#ffd491,#f0a23c 55%,#d97d1f);color:#261305;
  border-color:#ffe8bd;box-shadow:0 6px 20px rgba(255,150,50,.26),inset 0 1px 0 #fff2d4}
.btn.primary span{font-size:8px;font-weight:700;letter-spacing:.14em;opacity:.7}
.btn.secondary{background:rgba(22,13,8,.7);border-color:rgba(255,200,140,.4);color:var(--cream)}
.btn.ghost{background:transparent;border-color:rgba(255,240,220,.18);color:rgba(248,232,207,.72);min-height:38px}
.btn.tiny{width:auto;min-height:38px;margin:0;padding:0 14px;font-size:9px;letter-spacing:.12em;
  background:rgba(255,200,140,.14);border-color:rgba(255,200,140,.35);border-radius:6px;color:var(--cream)}
.btnrow{display:flex;gap:8px;margin-top:10px}
.btnrow .btn{margin:0}
.note{font-size:10px;letter-spacing:.06em;color:#ffcf9a;min-height:14px;margin:8px 0 4px;line-height:1.4}
.keys{font-size:8.5px;letter-spacing:.12em;text-align:center;opacity:.5;margin:10px 0 0;line-height:1.6}

/* ---------- menu ---------- */
#menu{display:block;background:#0d0805;backdrop-filter:none;padding:0}
.menu-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.menu-bg.wide{display:none}
.veil{position:absolute;inset:0;background:
  linear-gradient(180deg, rgba(9,5,3,.72) 0%, rgba(9,5,3,.18) 34%, rgba(9,5,3,.50) 66%, rgba(9,5,3,.94) 100%),
  radial-gradient(90% 60% at 20% 0%, rgba(0,0,0,.42), transparent 60%)}
.menu-inner{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:space-between;
  height:100%;padding:calc(14px + env(safe-area-inset-top)) clamp(15px,4vw,46px) calc(14px + env(safe-area-inset-bottom))}
.menu-head{max-width:820px}
.kicker{text-shadow:0 1px 8px rgba(0,0,0,.6)}
.menu-head h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(34px,min(12vw,11vh),92px);
  line-height:.9;margin:6px 0 0;color:#fff2dd;letter-spacing:-.005em;
  text-shadow:0 2px 0 rgba(30,10,0,.35),0 10px 44px rgba(0,0,0,.65)}
.menu-head h1 span{color:var(--gold);font-style:italic;letter-spacing:.015em}
.menu-head .tag{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-size:clamp(11px,1.7vmin,15px);
  color:rgba(255,238,214,.82);margin:8px 0 0;text-shadow:0 2px 10px rgba(0,0,0,.6)}
.menu-foot{width:min(100%,420px);align-self:flex-start}
.best{font-size:9px;letter-spacing:.24em;color:var(--gold);min-height:13px;margin-bottom:7px;
  text-shadow:0 1px 8px rgba(0,0,0,.7)}
.menu-foot .keys{margin-top:6px;text-align:left}
.icon.sound{position:absolute;z-index:3;top:calc(12px + env(safe-area-inset-top));right:calc(12px + env(safe-area-inset-right));
  width:38px;height:38px;background:rgba(12,7,4,.5)}
.icon.sound .slash{display:none}
.icon.sound.muted .slash{display:block}
.icon.sound.muted .waves{opacity:.15}

/* ---------- lobby ---------- */
.lobby-bg{position:absolute;inset:-30px;background:url(assets/title_wide.webp) center 45%/cover;
  filter:blur(7px) brightness(.42) saturate(1.05)}
#lobby .sheet{position:relative;z-index:2}
.seats{display:flex;flex-direction:column;gap:6px;margin:2px 0 12px}
.seat{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;
  background:rgba(255,230,200,.05);border:1px solid rgba(255,210,160,.14);text-align:left}
.seat .no{font-family:Georgia,serif;font-size:12px;color:var(--gold);width:16px;flex:0 0 auto}
.seat .who{font-size:11px;letter-spacing:.1em;font-weight:700;color:#fff0d9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seat .st{margin-left:auto;font-size:8px;letter-spacing:.18em;color:#9fd39a;flex:0 0 auto}
.seat.open{opacity:.6}
.seat.open .st{color:rgba(255,235,210,.5)}
.linkrow{display:flex;gap:6px;margin:4px 0 10px}
#lobby-link{flex:1;min-width:0;background:rgba(0,0,0,.35);border:1px solid rgba(255,210,160,.22);
  border-radius:6px;color:#f0dcc0;font-size:10px;padding:0 10px;height:38px;letter-spacing:.02em}
#lobby-note{margin:2px 0 6px}

/* ---------- result ---------- */
.result-sheet{width:min(94vw,520px)}
.bigtime{font-family:Georgia,"Times New Roman",serif;font-size:clamp(34px,7vmin,56px);line-height:1;
  color:#fff0d8;margin:6px 0 4px;font-variant-numeric:tabular-nums;letter-spacing:.01em;
  text-shadow:0 4px 24px rgba(255,140,40,.25)}
.result-sheet .sub{font-size:9px;letter-spacing:.2em;color:#ffd39a;min-height:12px;margin-bottom:10px}
.board{text-align:left;border-top:1px solid rgba(255,210,160,.16);padding-top:9px;margin-top:2px}
.board-title{font-size:8px;letter-spacing:.28em;color:rgba(255,220,180,.55);margin-bottom:6px}
#board-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
#board-list li{display:flex;align-items:center;gap:8px;font-size:10px;letter-spacing:.06em;
  padding:3px 4px;border-radius:5px}
#board-list li.mine{background:rgba(255,180,90,.12)}
#board-list .rk{font-family:Georgia,serif;width:16px;color:var(--gold);opacity:.8;flex:0 0 auto}
#board-list .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#f4e3cc}
#board-list .nm a{color:inherit;text-decoration:none;border-bottom:1px dotted rgba(255,220,180,.3)}
#board-list .tm{font-variant-numeric:tabular-nums;color:#ffe0b0;font-size:10px}
.board-note{font-size:9px;letter-spacing:.08em;opacity:.55;margin-top:6px;min-height:12px}
.board-note a{color:var(--gold);pointer-events:auto;cursor:pointer;text-decoration:underline}

/* ---------- loader ---------- */
#loader{position:absolute;inset:0;z-index:40;background:#120b06;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px}
.load-title{font-size:9px;letter-spacing:.34em;color:var(--gold);opacity:.9}
.load-bar{width:min(58vw,220px);height:3px;background:rgba(255,240,220,.14);border-radius:99px;overflow:hidden}
#load-fill{height:100%;width:0%;background:linear-gradient(90deg,#ffcf86,#ff9d3a);transition:width .2s}

/* ---------- responsive ---------- */
@media (orientation:landscape){
  .menu-bg.tall{display:none}
  .menu-bg.wide{display:block}
}
@media (orientation:portrait){
  .menu-inner{justify-content:flex-end;gap:14px}
  .menu-head{margin-top:auto}
}
@media (max-height:430px){
  .menu-head h1{font-size:clamp(30px,min(13vw,12vh),64px)}
  .menu-head .tag{display:none}
  .menu-head .kicker{font-size:8px}
  .menu-foot{width:min(100%,380px)}
  .menu-foot .keys{display:none}
  .menu-foot .best{margin-bottom:5px}
  .btn{min-height:40px;margin:5px 0}
  .btn.primary span{font-size:7px}
  .menu-inner{padding-top:calc(10px + env(safe-area-inset-top));padding-bottom:calc(10px + env(safe-area-inset-bottom))}
  .sheet h2{font-size:20px}
  .lede{margin-bottom:10px}
  .bigtime{font-size:32px}
  .pane-tag{font-size:8px;padding:3px 7px}
}
@media (max-height:320px){
  .menu-head h1{font-size:min(13vw,30px)}
  .menu-head .kicker{display:none}
  .menu-foot .best{display:none}
  .menu-foot .btn{min-height:36px}
  .menu-head .tag{display:none}
  .hud-row{padding-top:calc(5px + env(safe-area-inset-top));padding-bottom:12px}
  .lapbox{max-width:200px}
}
@media (min-width:900px){
  .menu-foot{width:380px}
  .menu-head h1{font-size:clamp(60px,9vmin,96px)}
}


/* ---------- effects and tweaks ---------- */
#flash{position:absolute;inset:0;z-index:9;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% 62%, rgba(255,74,32,.55), rgba(255,40,20,.12) 45%, transparent 70%)}
#app.hit #flash{animation:hitflash .38s ease-out}
@keyframes hitflash{0%{opacity:1}100%{opacity:0}}
.pane-tag{max-width:62%;overflow:hidden;text-overflow:ellipsis}
.tbtn{width:42px;height:44px}
.tbtn.gas{width:54px;height:48px;font-size:10px}
.btn:disabled{opacity:.65;filter:saturate(.6);cursor:default}
#hint{z-index:11}
@media (max-width:420px){
  .lapbox{max-width:150px}
  #clock{font-size:16px}
}