:root{
  --bg:#04060b; --panel:#0a0f1a; --line:#152238;
  --cyan:#22d3ee; --mag:#e879f9; --grn:#4ade80; --gold:#fbbf24; --red:#fb7185; --org:#fb923c;
  --txt:#dbe7f4; --dim:#5b7290;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  margin:0; background:var(--bg); color:var(--txt);
  font-family:'Rajdhani',sans-serif; overflow:hidden;
  display:flex; flex-direction:column; touch-action:none; user-select:none;
}
.gx-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px; border-bottom:1px solid var(--line);
  background:rgba(4,6,11,.9); z-index:20;
}
.gx-back{
  display:inline-flex; align-items:center; gap:6px;
  font-family:'Orbitron',sans-serif; font-size:11px; font-weight:700;
  letter-spacing:.14em; color:var(--org); text-decoration:none;
  padding:6px 12px; border:1px solid #7c2d12; border-radius:6px;
  background:rgba(251,146,60,.06); transition:.18s;
}
.gx-back:hover{background:rgba(251,146,60,.16); box-shadow:0 0 18px rgba(251,146,60,.35);}
.gx-brand{font-family:'Orbitron',sans-serif; font-weight:900; font-size:14px; letter-spacing:.18em; color:var(--txt); text-decoration:none;}
.gx-brand b{color:var(--cyan); font-weight:900;}
.gx-brand i{font-style:normal; color:var(--mag);}
main{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:8px; min-height:0;}
.hud{display:flex; align-items:center; gap:18px; flex-wrap:wrap; justify-content:center;}
.stat{display:flex; flex-direction:column; align-items:center; min-width:56px;}
.stat .k{font-size:10px; letter-spacing:.28em; color:var(--dim); font-weight:600;}
.stat .v{font-family:'Orbitron',sans-serif; font-size:18px; font-weight:700; color:var(--txt); line-height:1.15; text-shadow:0 0 12px rgba(251,146,60,.5);}
.stat.best .v{color:var(--gold); text-shadow:0 0 12px rgba(251,191,36,.5);}
.stat.lvl .v{color:var(--org); text-shadow:0 0 12px rgba(251,146,60,.6);}
.icon-btn{
  background:none; border:1px solid var(--line); color:var(--dim); border-radius:6px;
  width:36px; height:36px; cursor:pointer; font-size:16px; line-height:1; transition:.18s;
  display:flex; align-items:center; justify-content:center;
}
.icon-btn:hover{color:var(--org); border-color:var(--org); box-shadow:0 0 14px rgba(251,146,60,.3);}
.stage{position:relative; line-height:0;}
canvas#game{
  border:1px solid var(--line); border-radius:10px;
  background:#05070d; box-shadow:0 0 60px rgba(251,146,60,.06), inset 0 0 80px rgba(0,0,0,.5);
  max-width:calc(100vw - 14px); max-height:calc(100vh - 210px);
}
/* hp + chips plate (bottom-left over canvas) */
.plate{
  position:absolute; left:12px; bottom:12px; z-index:5; display:flex; flex-direction:column; gap:7px;
  pointer-events:none;
}
.hpwrap{
  position:relative; width:190px; height:18px; border:1px solid var(--line); border-radius:9px;
  background:rgba(4,6,11,.7); overflow:hidden;
}
.hpbar{
  position:absolute; inset:2px; border-radius:7px;
  background:linear-gradient(90deg,#f97316,#fbbf24);
  box-shadow:0 0 14px rgba(251,146,60,.6);
  transform-origin:left; transition:transform .15s ease-out;
}
.hplabel{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:'Orbitron',sans-serif; font-size:10px; font-weight:700; color:#fff;
  text-shadow:0 1px 3px #000; letter-spacing:.14em;
}
.fxchips{display:flex; gap:6px; flex-wrap:wrap;}
.chip{
  display:inline-flex; flex-direction:column; gap:2px; align-items:center;
  font-family:'Orbitron',sans-serif; font-size:9px; font-weight:700; letter-spacing:.16em;
  padding:4px 9px 5px; border-radius:6px; border:1px solid; background:rgba(4,6,11,.65);
}
.chip .bar{width:100%; height:3px; border-radius:2px; background:rgba(255,255,255,.12); overflow:hidden;}
.chip .bar i{display:block; height:100%; border-radius:2px;}
/* boss bar */
.bossbar{
  position:absolute; top:14px; left:50%; transform:translateX(-50%); z-index:5;
  width:min(420px, 70%); pointer-events:none;
}
.bossbar span{
  font-family:'Orbitron',sans-serif; font-size:10px; font-weight:700; letter-spacing:.34em;
  color:var(--red); text-shadow:0 0 12px rgba(251,113,133,.7); display:block; text-align:center; margin-bottom:4px;
}
.bossbar .bb{height:8px; border:1px solid #7f1d1d; border-radius:5px; background:rgba(4,6,11,.7); overflow:hidden;}
.bossbar .bb i{display:block; height:100%; background:linear-gradient(90deg,#dc2626,#fb7185); box-shadow:0 0 12px rgba(251,113,133,.8); transition:width .12s;}
/* banner + toast */
.banner{
  position:absolute; top:22%; left:50%; transform:translateX(-50%);
  font-family:'Orbitron',sans-serif; font-weight:900; font-size:clamp(20px,5vw,34px);
  letter-spacing:.24em; color:var(--txt); text-align:center; line-height:1.5;
  text-shadow:0 0 24px currentColor; pointer-events:none; z-index:9;
  animation:bIn .5s cubic-bezier(.2,1.4,.4,1) both;
}
.banner small{display:block; font-size:12px; letter-spacing:.4em; color:var(--dim); font-weight:600;}
.banner.out{animation:bOut .4s ease-in both;}
@keyframes bIn{from{opacity:0; transform:translateX(-50%) scale(.7)}to{opacity:1; transform:translateX(-50%) scale(1)}}
@keyframes bOut{from{opacity:1}to{opacity:0; transform:translateX(-50%) translateY(-14px)}}
.toast{
  position:absolute; bottom:70px; left:50%; transform:translateX(-50%);
  background:rgba(4,6,11,.92); border:1px solid var(--org); border-radius:8px;
  padding:8px 18px; font-family:'Orbitron',sans-serif; font-size:11px; font-weight:700;
  letter-spacing:.2em; color:var(--org); text-shadow:0 0 12px rgba(251,146,60,.7);
  box-shadow:0 0 30px rgba(251,146,60,.25); z-index:9; pointer-events:none; white-space:nowrap;
  animation:tIn .3s ease both;
}
.toast.out{animation:tOut .4s ease-in both;}
@keyframes tIn{from{opacity:0; transform:translateX(-50%) translateY(12px)}to{opacity:1; transform:translateX(-50%) translateY(0)}}
@keyframes tOut{from{opacity:1}to{opacity:0; transform:translateX(-50%) translateY(-10px)}}
/* ===== touch UI ===== */
.touch-ui{position:absolute; inset:0; z-index:6; display:none; pointer-events:none;}
.touch-ui.on{display:block;}
.stick-zone{position:absolute; bottom:0; height:62%; width:44%; pointer-events:auto;}
.stick-zone.left{left:0;}
.stick-zone.right{right:0;}
.stick-base{
  position:absolute; width:110px; height:110px; border-radius:50%;
  border:2px solid rgba(251,146,60,.3); background:rgba(251,146,60,.05);
  left:34px; bottom:44px; opacity:.55; transition:opacity .15s;
}
.stick-zone.right .stick-base{left:auto; right:34px;}
.stick-zone.active .stick-base{opacity:1; border-color:rgba(251,146,60,.65); box-shadow:0 0 26px rgba(251,146,60,.25);}
.stick-knob{
  position:absolute; width:48px; height:48px; border-radius:50%;
  background:rgba(251,146,60,.25); border:2px solid rgba(251,146,60,.8);
  left:50%; top:50%; translate:-50% -50%;
  box-shadow:0 0 18px rgba(251,146,60,.4);
}
.stick-hint{
  position:absolute; left:50%; translate:-50%; bottom:-24px;
  font-family:'Orbitron',sans-serif; font-size:9px; letter-spacing:.3em; color:var(--dim);
}
.tbtn{
  position:absolute; pointer-events:auto; border-radius:50%; cursor:pointer;
  font-family:'Orbitron',sans-serif; font-weight:700; letter-spacing:.1em;
  border:2px solid rgba(251,146,60,.55); background:rgba(251,146,60,.12); color:var(--org);
  text-shadow:0 0 10px rgba(251,146,60,.6);
}
.tbtn:active{background:rgba(251,146,60,.35);}
.tbtn.dash{left:50%; translate:-50%; bottom:22px; width:66px; height:66px; font-size:11px; opacity:.88;}
.tbtn.dash.cd{opacity:.35;}
.tbtn.pause{top:10px; right:10px; width:40px; height:40px; font-size:13px;}
/* ===== overlays ===== */
.overlay{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(4,6,11,.86); backdrop-filter:blur(4px); border-radius:10px; z-index:10; overflow-y:auto;
}
.overlay.hidden{display:none;}
.panel{text-align:center; padding:22px; max-width:94%;}
.title{
  font-family:'Orbitron',sans-serif; font-weight:900; letter-spacing:.1em;
  font-size:clamp(24px,5.6vw,42px); margin:0 0 4px;
  color:var(--org); text-shadow:0 0 24px rgba(251,146,60,.65), 0 0 60px rgba(251,146,60,.3);
}
.title .alt{color:var(--cyan); text-shadow:0 0 24px rgba(34,211,238,.6);}
.subtitle{color:var(--dim); letter-spacing:.3em; font-size:11px; font-weight:600; margin-bottom:14px;}
.desc{color:var(--txt); font-size:15px; line-height:1.5; margin:0 0 14px; opacity:.9;}
.desc b{color:var(--grn);}
.mode-row{display:flex; gap:8px; justify-content:center; align-items:center; flex-wrap:wrap; margin-bottom:16px;}
.mode-label{font-size:11px; letter-spacing:.2em; color:var(--dim); font-weight:600;}
.mode{
  font-family:'Orbitron',sans-serif; font-size:10px; font-weight:700; letter-spacing:.12em;
  padding:8px 14px; cursor:pointer; border-radius:6px;
  border:1px solid var(--line); background:rgba(10,15,26,.7); color:var(--dim); transition:.15s;
}
.mode:hover{color:var(--txt); border-color:var(--dim);}
.mode.sel{color:var(--org); border-color:var(--org); background:rgba(251,146,60,.1); box-shadow:0 0 16px rgba(251,146,60,.25);}
.btn{
  font-family:'Orbitron',sans-serif; font-size:14px; font-weight:700; letter-spacing:.2em;
  padding:13px 40px; cursor:pointer; border-radius:8px; border:1px solid var(--org);
  background:rgba(251,146,60,.1); color:var(--org); transition:.18s;
  text-shadow:0 0 10px rgba(251,146,60,.6);
}
.btn:hover{background:rgba(251,146,60,.22); box-shadow:0 0 30px rgba(251,146,60,.5); transform:translateY(-1px);}
.btn.ghost{border-color:var(--line); color:var(--dim); background:none; text-shadow:none; font-size:11px; padding:9px 20px;}
.btn.ghost:hover{color:var(--txt); border-color:var(--dim); box-shadow:none;}
.keys{color:var(--dim); font-size:13px; letter-spacing:.08em; margin-top:14px; line-height:1.9;}
.keys kbd{
  font-family:'Orbitron',sans-serif; font-size:10px; padding:2px 7px; margin:0 2px;
  border:1px solid var(--line); border-bottom-width:2px; border-radius:4px; color:var(--txt); background:#0a0f1a;
}
.final-score{font-family:'Orbitron',sans-serif; font-size:42px; font-weight:900; color:var(--txt); margin:6px 0 2px;}
.final-best{color:var(--gold); letter-spacing:.2em; font-size:12px; margin-bottom:10px; font-weight:600;}
.newbest{color:var(--gold); animation:pulse 1s infinite alternate; font-weight:700;}
@keyframes pulse{from{opacity:.6}to{opacity:1}}
.run-stats{display:flex; gap:16px; justify-content:center; color:var(--dim); font-size:13px; letter-spacing:.08em; margin-bottom:16px; flex-wrap:wrap;}
.run-stats b{color:var(--txt);}
footer{padding:8px; text-align:center; color:var(--dim); font-size:11px; letter-spacing:.18em;}
footer a{color:var(--org); text-decoration:none;}
@media (max-width:560px){
  .hud{gap:12px;}
  .stat{min-width:50px;}
  .stat .v{font-size:15px;}
  .plate{left:8px; bottom:170px;}
  .hpwrap{width:140px;}
}

/* ===== pause menu + settings ===== */
.pmenu{display:flex; flex-direction:column; gap:10px; margin:18px auto 0; max-width:300px;}
.pmenu .btn{width:100%;}
.settings{margin-top:16px; text-align:left; border:1px solid var(--line); border-radius:10px; padding:10px 14px; background:rgba(10,16,26,.55);}
.setrow{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 2px; font-weight:600; letter-spacing:.08em; font-size:14px; color:#9fb0c8;}
.setrow + .setrow{border-top:1px solid rgba(21,34,56,.6);}
.mode-mini{display:flex; gap:6px;}
.mode-mini .mode{padding:6px 10px;}
.tog{font-family:'Orbitron',sans-serif; font-size:10px; font-weight:700; letter-spacing:.14em; padding:6px 14px; border-radius:999px; border:1px solid rgba(91,114,144,.5); background:transparent; color:var(--dim); cursor:pointer; transition:.15s; min-width:64px;}
.tog.on{border-color:#4ade80; color:#4ade80; box-shadow:0 0 12px rgba(74,222,128,.25);}
.setnote{margin:10px 2px 0; font-size:12px; color:var(--dim); font-weight:500; line-height:1.5;}