:root{
  --bg:#070b18; --panel:#0d1428ee; --line:#1e2a4d;
  --cy:#22e6ff; --mg:#ff3df0; --lm:#a3ff5e; --gd:#ffd23d;
  --tx:#eaf2ff; --dim:#8ea0c7;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;background:var(--bg);color:var(--tx);
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  overscroll-behavior:none}
body{touch-action:none;user-select:none;-webkit-user-select:none;overflow-x:hidden}
#app{max-width:920px;margin:0 auto;padding:8px 10px 18px;min-height:100vh;display:flex;flex-direction:column}
#topbar{display:flex;align-items:center;justify-content:space-between;padding:6px 2px}
.brand{font-weight:800;letter-spacing:2px;font-size:15px}
.brand em{color:var(--mg);font-style:normal;text-shadow:0 0 12px var(--mg)}
.logo-ball{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:8px;
  background:radial-gradient(circle at 35% 35%,#fff,var(--cy) 55%,#0af);
  box-shadow:0 0 12px var(--cy)}
.topbtns{display:flex;gap:8px}
.icon-btn{width:44px;height:44px;border-radius:12px;border:1px solid var(--line);
  background:#111a33;color:var(--tx);font-size:19px;font-weight:800;cursor:pointer}
.icon-btn:active{transform:scale(.93);background:#1a2650}
#hud{display:flex;align-items:center;justify-content:space-between;gap:8px;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:8px 12px}
.hud-left,.hud-right{display:flex;gap:14px}
.hud-item{display:flex;flex-direction:column;line-height:1.1}
.hud-item label{font-size:10px;letter-spacing:2px;color:var(--dim)}
.hud-item span{font-size:19px;font-weight:800;font-variant-numeric:tabular-nums}
.hud-item.dim span{color:var(--dim)}
#rooftopBadge{font-weight:900;letter-spacing:1px;padding:7px 14px;border-radius:999px;font-size:14px;
  background:linear-gradient(90deg,#ff3df0,#ff9d3d,#ffd23d);color:#14060f;white-space:nowrap;
  box-shadow:0 0 18px #ff3df0aa;animation:pulse .7s infinite alternate}
#rooftopBadge.hidden{display:none}
#rooftopBadge b{font-size:18px}
@keyframes pulse{from{transform:scale(1)}to{transform:scale(1.07)}}
#chips{display:flex;flex-wrap:wrap;gap:6px;min-height:30px;padding:6px 2px}
.chip{font-size:12px;font-weight:800;padding:4px 10px;border-radius:999px;letter-spacing:.5px;
  border:1px solid var(--line);background:#131d3d}
.chip small{opacity:.75;font-weight:600}
#stageWrap{position:relative;flex:1;display:flex;flex-direction:column}
#game{width:100%;height:min(68vh,620px);min-height:420px;display:block;border-radius:16px;
  border:1px solid var(--line);background:#050816;touch-action:none;cursor:none}
.overlay{position:absolute;inset:0;display:none;align-items:center;justify-content:center;
  background:rgba(4,7,18,.72);backdrop-filter:blur(4px);z-index:10;border-radius:16px;padding:14px}
.overlay.show{display:flex}
.card{background:linear-gradient(180deg,#101a3acc,#0a1028f2);border:1px solid #2b3c74;border-radius:20px;
  padding:26px 26px 20px;max-width:560px;width:100%;text-align:center;
  box-shadow:0 0 60px #22e6ff33,inset 0 0 40px #22e6ff11;max-height:100%;overflow:auto}
.card.slim{max-width:420px}
.kicker{letter-spacing:4px;font-size:12px;color:var(--cy);font-weight:800}
.kicker.red{color:#ff5d6c}.kicker.gold{color:var(--gd)}
.card h1{font-size:52px;line-height:.95;margin:10px 0;letter-spacing:2px}
.card h1 span{color:var(--mg);text-shadow:0 0 24px var(--mg)}
.card h2{letter-spacing:2px;margin:6px 0 8px}
.card h3{color:var(--cy);letter-spacing:2px;font-size:13px;margin:14px 0 6px}
.sub{color:#c4d2f2}
.legend-mini{display:flex;flex-wrap:wrap;gap:8px 14px;justify-content:center;font-size:12px;color:var(--dim);margin:10px 0}
.dot{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:baseline}
.dot.g{background:#3ae0ff}.dot.v{background:#ffd23d}.dot.a{background:#ff5d6c}.dot.s{background:#a3ff5e}.dot.p{background:#b06bff}
.legend{text-align:left;font-size:13.5px;line-height:1.5;color:#cdd9f5;display:grid;gap:6px}
.legend b{color:#fff}
.sw{display:inline-block;width:16px;height:12px;border-radius:3px;margin-right:8px;vertical-align:middle}
.sw.g{background:#3ae0ff}.sw.v{background:#ffd23d}.sw.a{background:#ff5d6c}.sw.s{background:#a3ff5e}.sw.p{background:#b06bff}.sw.m{background:linear-gradient(90deg,#22e6ff,#ff3df0)}
.how{text-align:left;font-size:13.5px;line-height:1.55;color:#cdd9f5}
.cy{color:var(--cy)}
.btnrow{display:flex;gap:10px;justify-content:center;margin-top:16px;flex-wrap:wrap}
.big-btn{background:linear-gradient(90deg,var(--cy),var(--mg));border:none;color:#0a0616;font-weight:900;
  font-size:17px;letter-spacing:1px;padding:14px 30px;border-radius:14px;cursor:pointer;min-height:52px;
  box-shadow:0 0 24px #22e6ff66}
.big-btn:active{transform:scale(.96)}
.ghost-btn{background:#141f42;border:1px solid #33477f;color:var(--tx);font-weight:700;font-size:14px;
  padding:13px 20px;border-radius:14px;cursor:pointer;min-height:52px}
.lvlselect{margin-top:14px}
.lvlselect label{font-size:11px;letter-spacing:3px;color:var(--dim)}
#lvlBtns{display:flex;gap:8px;justify-content:center;margin-top:6px;flex-wrap:wrap}
#lvlBtns button{width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:#141f42;
  color:var(--tx);font-weight:800;cursor:pointer;font-size:15px}
#lvlBtns button.done{border-color:var(--lm);color:var(--lm)}
#lvlBtns button.cur{border-color:var(--cy);box-shadow:0 0 10px var(--cy)}
.hint{font-size:12px;color:var(--dim)}
#toast{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:5;pointer-events:none;
  display:flex;flex-direction:column;gap:6px;align-items:center}
.toastmsg{font-weight:900;letter-spacing:2px;font-size:20px;text-shadow:0 0 14px currentColor;animation:rise 1.4s forwards}
@keyframes rise{0%{opacity:0;transform:scale(.6)}15%{opacity:1;transform:scale(1.1)}30%{transform:scale(1)}80%{opacity:1}100%{opacity:0;transform:translateY(-24px)}}
#combo{position:absolute;top:34%;left:50%;transform:translate(-50%,-50%);z-index:5;pointer-events:none;
  font-size:44px;font-weight:900;letter-spacing:3px;color:#fff;opacity:0;
  text-shadow:0 0 24px var(--mg),0 0 60px var(--cy)}
#combo.pop{animation:comboPop 1.1s ease-out}
@keyframes comboPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}20%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}40%{transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-60%) scale(1.05)}}
#touchbar{display:flex;gap:10px;margin-top:10px}
.touch-btn{flex:1;min-height:56px;border-radius:16px;border:1px solid #2b3c74;font-size:17px;font-weight:900;
  letter-spacing:1px;background:linear-gradient(180deg,#182452,#101a3a);color:var(--tx);cursor:pointer}
.touch-btn.small{flex:0 0 130px}
.touch-btn:active{transform:scale(.97);background:#22306b}
#foot{text-align:center;color:var(--dim);font-size:12px;margin:8px 0 0}
@media (max-width:480px){
  #app{padding:6px 6px 14px}
  #game{height:62vh;min-height:380px}
  .card h1{font-size:40px}
  #combo{font-size:32px}
  .hud-item span{font-size:16px}
  #rooftopBadge{font-size:12px;padding:6px 10px}
}
@media (hover:hover){ #game{cursor:none} }