*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:
    radial-gradient(1100px 700px at 50% -15%, #33205f 0%, transparent 62%),
    radial-gradient(900px 620px at 88% 115%, #0e3d5a 0%, transparent 62%),
    radial-gradient(700px 500px at 5% 95%, #4a1338 0%, transparent 60%),
    #07070f;
  color:#e9e7f5;
  font-family:"Trebuchet MS","Segoe UI",system-ui,-apple-system,sans-serif;
  overflow:hidden;
  -webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent;
}
/* full-screen backdrop, two layers so a level change can crossfade between them.
   `cover` keeps the aspect ratio and crops the overflow — no JS scaling maths. */
#bg1,#bg2{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:center/cover no-repeat;opacity:0;transition:opacity .8s ease}

#app{height:100dvh;display:flex;flex-direction:column}
#stage{flex:1;display:flex;gap:18px;padding:16px;min-height:0}

/* ---------- HUD ---------- */
#hud{
  width:225px;flex:none;display:flex;flex-direction:column;gap:9px;
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.13);border-radius:18px;padding:16px 15px;
  box-shadow:0 14px 44px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.14);
  backdrop-filter:blur(8px);
}
.brand{font-size:21px;font-weight:800;letter-spacing:.09em;line-height:1;
  background:linear-gradient(180deg,#fff3c4,#f0b93a 55%,#b2761a);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 6px rgba(240,185,58,.35))}
.brand span{display:block;font-size:21px;letter-spacing:.24em}
.modetag{font-size:11px;letter-spacing:.22em;font-weight:700;color:#b9a8ff;
  border:1px solid rgba(185,168,255,.35);border-radius:999px;padding:3px 10px;
  align-self:flex-start;margin-bottom:4px}
.stat{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.stat label{font-size:10.5px;letter-spacing:.18em;color:#8f8ab0;font-weight:700}
.stat b{font-size:26px;font-weight:800;font-variant-numeric:tabular-nums;
  text-shadow:0 0 18px rgba(255,225,150,.35)}
.stat.sm b{font-size:15px;color:#b6b1d4;text-shadow:none}
.progwrap{height:11px;border-radius:99px;background:rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.12);overflow:hidden;margin-top:2px}
.prog{height:100%;width:0%;border-radius:99px;
  background:linear-gradient(90deg,#4be0ff,#7a6bff 45%,#ff6bd0);
  box-shadow:0 0 14px rgba(122,107,255,.8);transition:width .35s ease}
.goal{font-size:11.5px;letter-spacing:.06em;color:#9c96bd;min-height:15px}
.btns{display:flex;flex-wrap:wrap;gap:7px;margin-top:6px}
button{font:inherit;cursor:pointer;border-radius:10px;border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.05));
  color:#eceafb;padding:8px 11px;font-size:12.5px;font-weight:700;letter-spacing:.05em;
  transition:transform .08s ease, background .15s ease, box-shadow .15s ease}
button:hover{background:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,.09));
  box-shadow:0 4px 16px rgba(0,0,0,.4)}
button:active{transform:translateY(1px)}
button.icon{padding:8px 10px;line-height:1}
button.lang{font-size:11.5px;letter-spacing:.02em}
.langbtn{position:absolute;top:13px;right:13px;padding:5px 10px;font-size:11px;
  letter-spacing:.04em;border-radius:9px;opacity:.8}
.langbtn:hover{opacity:1}
button.off{opacity:.45}
.tip{font-size:10.5px;line-height:1.6;color:#7b7699;margin:auto 0 0}
kbd{background:rgba(255,255,255,.12);border-radius:4px;padding:1px 4px;font-size:10px}

/* ---------- board ---------- */
#boardwrap{flex:1;min-width:0;min-height:0;display:flex;align-items:center;justify-content:center;position:relative}
#board{
  touch-action:none;display:block;border-radius:14px;
  box-shadow:0 0 0 2px rgba(255,255,255,.10), 0 0 0 7px rgba(24,18,48,.9),
             0 0 0 8px rgba(240,185,58,.35), 0 26px 70px rgba(0,0,0,.65);
}
#banner{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  pointer-events:none;font-size:min(9vw,60px);font-weight:900;letter-spacing:.12em;
  background:linear-gradient(180deg,#fffbe8,#ffd35e 55%,#e07a12);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 4px 18px rgba(0,0,0,.85));opacity:0;
}
#banner.show{animation:pop 1.25s ease forwards}
@keyframes pop{
  0%{opacity:0;transform:scale(.55)}
  18%{opacity:1;transform:scale(1.12)}
  30%{transform:scale(1)}
  75%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(1.25)}
}

/* ---------- overlays ---------- */
.overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(6,5,16,.72);backdrop-filter:blur(9px);z-index:10;padding:20px;
  animation:fade .25s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.overlay.hidden{display:none}
.panel{position:relative;width:min(420px,100%);text-align:center;
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.16);border-radius:22px;padding:28px 24px;
  box-shadow:0 24px 80px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.18)}
/* the two wordmark lines are letter-spaced to equal width; text-indent cancels the
   trailing letter-space so each line still centres on the panel */
.panel h1{margin:0 0 2px;font-size:40px;font-weight:900;letter-spacing:.06em;text-indent:.06em;line-height:.98;
  background:linear-gradient(180deg,#fff6d0,#f2bd41 55%,#a86c12);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.panel h1 span{display:block;letter-spacing:.2em;text-indent:.2em}
.panel h2{margin:0 0 6px;font-size:30px;font-weight:900;letter-spacing:.1em;color:#ffd7dd}
.sub{color:#9b95bd;font-size:12.5px;margin:0 0 18px;letter-spacing:.05em}
button.big{display:block;width:100%;text-align:left;padding:14px 16px;margin:9px 0;border-radius:14px}
button.big b{display:block;font-size:15px;letter-spacing:.14em}
button.big i{display:block;font-style:normal;font-size:11.5px;color:#a19bc4;margin-top:4px;line-height:1.5}
button.big.ghost{background:rgba(255,255,255,.05)}
#btnAgain,#btnBack,#btnAboutBack{text-align:center}
#btnAgain b,#btnBack b,#btnAboutBack b{letter-spacing:.2em}
.linkbtn{background:none;border:0;box-shadow:none;margin-top:16px;padding:6px 10px;
  font-size:10.5px;letter-spacing:.18em;color:#807ba1}
.linkbtn:hover{background:none;box-shadow:none;color:#e9e7f5}
.abouttext{margin:0 0 12px;text-align:left;font-size:12px;line-height:1.75;color:#a19bc4;overflow-wrap:anywhere}
.abouttext a,#about .sub a{color:#e2c977;overflow-wrap:anywhere}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;margin:18px 0 0;
  font-size:10.5px;color:#807ba1;letter-spacing:.04em}
.legend em{font-style:normal;color:#e2c977}
.finalscore{margin:6px 0 14px}
.finalscore label{display:block;font-size:10px;letter-spacing:.2em;color:#8f8ab0;font-weight:700}
.finalscore b{font-size:44px;font-weight:900;font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#fff,#ffd35e);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- narrow ---------- */
@media (max-width:760px), (max-height:560px){
  #stage{flex-direction:column;gap:10px;padding:10px}
  #hud{width:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:10px 12px;border-radius:14px}
  .brand,.tip{display:none}
  .modetag{margin:0;order:-1}
  .stat{flex:0 0 auto;gap:6px}
  .stat b{font-size:19px}
  .progwrap{flex:1 1 90px;min-width:80px;margin:0}
  .goal{flex:1 1 100%;order:9;font-size:10.5px}
  .btns{margin:0;gap:6px}
  .btns button{padding:6px 9px;font-size:11.5px}
}