*{box-sizing:border-box}
:root{
  --bg:#07090f;
  --panel:rgba(10,14,26,.94);
  --line:#2a3557;
  --text:#f4f7ff;
  --muted:#9aa6c3;
  --green:#42ff77;
  --cyan:#38d9ff;
  --yellow:#ffd43b;
  --red:#ff4d5a;
  --purple:#b67cff;
}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#000;font-family:Arial,Helvetica,sans-serif;color:var(--text)}
body{display:flex;align-items:center;justify-content:center}
#app{position:relative;width:100vw;height:100vh;background:var(--bg);overflow:hidden}
#gameCanvas{position:absolute;inset:0;width:100%;height:100%;background:linear-gradient(#0d1120,#07090f)}
#overlay{position:absolute;inset:0;pointer-events:none}
.screen{display:none;position:absolute;inset:0;align-items:center;justify-content:center;flex-direction:column;padding:24px;pointer-events:auto;background:rgba(3,5,10,.74);backdrop-filter:blur(5px)}
.screen.active{display:flex}
h1{font-size:clamp(46px,8vw,110px);line-height:.9;margin:0;text-align:center;letter-spacing:-4px;text-shadow:0 0 30px rgba(66,255,119,.35)}
h2{font-size:clamp(28px,4vw,52px);margin:0}
.subtitle{font-size:clamp(18px,2vw,28px);color:var(--muted);margin:18px 0 34px}
.menu-stack{display:flex;flex-direction:column;gap:12px;width:min(420px,90vw)}
button{font:inherit;font-weight:900;letter-spacing:.7px;color:white;background:#171d31;border:2px solid #34405f;border-radius:12px;padding:15px 20px;cursor:pointer;transition:.12s transform,.12s background,.12s border}
button:hover{transform:translateY(-2px);background:#202946;border-color:#5b6c9a}
button.primary{background:#176a35;border-color:#42ff77}
button.primary:hover{background:#1b8440}
button.danger{background:#5b1620;border-color:#ff4d5a}
.footer-note{position:absolute;bottom:22px;color:#72809f;font-size:13px}
.screen-header{position:absolute;left:24px;right:24px;top:22px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.screen-header>:last-child{justify-self:end}
.back-btn{justify-self:start}
.coin-total{font-weight:900;color:var(--yellow);font-size:20px}
.stage-grid,.character-grid,.mode-grid{
  width:min(1100px,94vw);max-height:78vh;overflow:auto;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;padding:12px
}
.stage-card,.character-card,.mode-card{
  background:linear-gradient(145deg,#141a2c,#0b0f1b);border:2px solid #293654;border-radius:18px;padding:16px;min-height:145px;cursor:pointer;transition:.15s transform,.15s border,.15s box-shadow;position:relative
}
.stage-card:hover,.character-card:hover,.mode-card:hover{transform:translateY(-4px);border-color:#526dba;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.stage-card.locked{opacity:.45;filter:grayscale(.6);cursor:not-allowed}
.stage-number{font-size:34px;font-weight:1000}
.stage-name{font-weight:900;margin-top:4px}
.stage-difficulty{font-size:12px;font-weight:900;margin:7px 0 12px;color:var(--cyan)}
.stage-coins{color:var(--yellow);letter-spacing:4px;font-size:20px}
.lock-msg{font-size:12px;color:#ff9ca5;margin-top:10px;font-weight:700}
.badge{position:absolute;right:10px;top:10px;padding:5px 8px;border-radius:8px;background:#222d4e;font-size:10px;font-weight:900}
.character-card.selected,.mode-card.selected{border-color:var(--green);box-shadow:0 0 25px rgba(66,255,119,.18)}
.character-icon{font-size:54px;height:65px;display:flex;align-items:center}
.character-name,.mode-name{font-size:20px;font-weight:900;margin:4px 0}
.card-desc{color:var(--muted);font-size:13px;line-height:1.35}
.modal-screen{background:rgba(0,0,0,.58)}
.modal{width:min(560px,92vw);text-align:center;background:var(--panel);border:2px solid #33405f;border-radius:24px;padding:30px}
.big-coins{font-size:40px;color:var(--yellow);letter-spacing:10px;margin:20px 0}
.menu-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
#hud{position:absolute;top:12px;left:12px;right:12px;z-index:5;display:flex;gap:8px;align-items:center;pointer-events:auto}
#hud.hidden{display:none}
.hud-stat{background:rgba(7,10,18,.8);border:1px solid #2c3756;border-radius:9px;padding:7px 11px;min-width:78px}
.hud-stat span{display:block;font-size:9px;color:#7f8bab;font-weight:900}
.hud-stat b{font-size:13px}
.small-btn{padding:9px 12px;font-size:11px}
@media(max-width:700px){
  .screen-header{grid-template-columns:1fr auto;gap:10px}.screen-header>:last-child{grid-column:1/-1;justify-self:center}
  .stage-grid,.character-grid,.mode-grid{grid-template-columns:repeat(2,minmax(0,1fr));padding-top:70px}
  #hud{flex-wrap:wrap}.hud-stat{min-width:62px;padding:5px 8px}.hud-stat:nth-of-type(4){display:none}
}