:root{
  --bg0:#0d1021; --bg1:#191d3a; --card:#22263f; --line:#ffffff22;
  --ink:#fffefa; --dim:#ffffffb3; --lime:#d8fd71; --dark:#292a23;
  --accent:#7c6cff; --danger:#ff5d5d;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:radial-gradient(1200px 600px at 50% -10%,#2a2f63 0%,var(--bg0) 60%) fixed,var(--bg0);color:var(--ink);font-family:"Avenir Next","Segoe UI",system-ui,-apple-system,sans-serif}
#app{max-width:1000px;margin:0 auto;padding:14px 14px 26px}
#topbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:space-between;margin-bottom:12px}
.startng-card{display:flex;align-items:center;gap:12px;padding:6px 14px 6px 6px;border-radius:999px;background:var(--dark);color:var(--ink);border:1px solid var(--line);min-width:230px}
.startng-card img{width:48px;height:48px;border-radius:50%;background:var(--lime);object-fit:cover;display:block}
.pinfo b{display:block;font-size:16px;line-height:1.1}
.pinfo span{font-size:12px;opacity:.7}
.startng-card button{margin-left:8px;border:0;border-radius:999px;padding:7px 13px;background:var(--lime);color:#1a1c12;font-weight:800;cursor:pointer}
.startng-card button[hidden]{display:none}
.title-wrap{text-align:center;flex:1;min-width:220px}
.title-wrap h1{margin:0;font-size:30px;letter-spacing:4px;background:linear-gradient(90deg,#d8fd71,#7cf7ff,#c9a6ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.title-wrap .sub{margin:2px 0 0;font-size:12px;color:var(--dim);letter-spacing:1px}
.hud-pills{display:flex;gap:8px}
.pill{background:#ffffff14;border:1px solid var(--line);border-radius:12px;padding:7px 12px;font-size:11px;letter-spacing:1px;color:var(--dim)}
.pill b{display:block;font-size:18px;color:var(--ink);letter-spacing:0}
#stage-wrap{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--line);box-shadow:0 20px 60px #0009}
#game{display:block;width:100%;height:auto;background:#0e1330;touch-action:none;cursor:pointer}
.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0b0e26cc;backdrop-filter:blur(3px);padding:18px}
.overlay[hidden]{display:none}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:24px 26px;max-width:520px;text-align:center;box-shadow:0 12px 40px #000a}
.card h2{margin:0 0 10px;font-size:26px}
.card p{color:var(--dim);line-height:1.55}
.big-stats{font-size:22px;color:var(--ink);font-weight:800}
.tiny{font-size:12px;opacity:.8}
.controls-row{display:flex;gap:10px;justify-content:center;margin:16px 0 8px;flex-wrap:wrap}
button.big{background:var(--lime);border:0;border-radius:999px;padding:12px 22px;font-weight:900;font-size:16px;cursor:pointer;color:#1c1e12}
button.big:hover{filter:brightness(1.07)}
button.ghost{background:transparent;border:1px solid var(--line);color:var(--ink);border-radius:999px;padding:12px 18px;cursor:pointer}
#board{text-align:left;margin:0 auto;max-width:420px;padding-left:22px;line-height:1.9}
#board li.me{color:var(--lime);font-weight:800}
.how-card{max-width:560px;max-height:92%;overflow:auto}
.how-fly{margin-top:0}
.how-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0 4px;text-align:left}
.how-row{display:flex;gap:10px;align-items:center;background:#ffffff0d;border:1px solid var(--line);border-radius:12px;padding:9px 11px}
.how-row b{display:block;font-size:14px}
.how-row span{display:block;font-size:12px;color:var(--dim)}
.how-icon{font-size:26px;line-height:1}
.how-row.good{border-left:4px solid var(--lime)}
.how-row.bad{border-left:4px solid var(--danger)}
.how-row.safe{border-left:4px solid #7cf7ff}
@media (max-width:560px){.how-grid{grid-template-columns:1fr}}
#foot{display:flex;align-items:center;gap:10px;margin-top:12px;color:var(--dim);font-size:13px}
.chip{background:#ffffff14;border:1px solid var(--line);color:var(--ink);border-radius:999px;padding:7px 13px;cursor:pointer}
.diff-row{display:flex;gap:8px;justify-content:center;margin-top:14px}
.diff.on{background:var(--lime);border-color:var(--lime);color:#1c1e12;font-weight:800}
.vol{display:flex;align-items:center;gap:7px}
.vol input{width:86px;accent-color:var(--lime);cursor:pointer}
.hint{margin-left:auto;opacity:.8}
.box-emoji{font-size:18px}
@media (max-width:640px){
  .title-wrap h1{font-size:22px}
  #topbar{justify-content:center}
  .hint{display:none}
}