:root{ --cyan:#00f0ff; --pink:#ff2fb3; --yellow:#ffe14d; --green:#3dff7a; }
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:#07070f}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:#eef2ff; user-select:none; -webkit-user-select:none;
}
#wrap{position:fixed;inset:0;overflow:hidden}
#game{position:absolute;inset:0;touch-action:none;display:block}
#topbar{
  position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:10px;
  padding:calc(10px + env(safe-area-inset-top)) 14px 10px;pointer-events:none;z-index:5;
}
#topbar>*{pointer-events:auto}
#homeBtn{
  width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.08);color:#fff;text-decoration:none;font-size:24px;font-weight:700;
  border:1px solid rgba(255,255,255,.15);
}
#diffLabel{
  font-size:12px;font-weight:800;letter-spacing:2px;color:var(--cyan);
  text-shadow:0 0 10px rgba(0,240,255,.8);
}
.spacer{flex:1}
#muteBtn,#pauseBtn{
  width:38px;height:38px;border-radius:12px;border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.08);font-size:17px;color:#fff;cursor:pointer;
}
#banner{
  position:absolute;top:22%;left:0;right:0;text-align:center;z-index:4;pointer-events:none;
  font-size:52px;font-weight:900;letter-spacing:3px;color:#fff;
  text-shadow:0 0 20px var(--cyan),0 0 60px var(--cyan);
  animation:bannerpop .5s ease-out;
}
@keyframes bannerpop{from{transform:scale(.6);opacity:0}}
.overlay{
  position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:rgba(5,5,12,.82);backdrop-filter:blur(6px);padding:24px;text-align:center;gap:14px;
}
.overlay[hidden]{display:none}
.title{font-size:clamp(40px,10vw,72px);font-weight:900;line-height:1;letter-spacing:2px;
  text-shadow:0 0 24px rgba(0,240,255,.9),0 0 80px rgba(0,240,255,.4)}
.title span{color:var(--pink);text-shadow:0 0 24px rgba(255,47,179,.9),0 0 80px rgba(255,47,179,.4)}
.tagline{color:#aab2d8;font-size:16px}
.rules{color:#8b93b8;font-size:13.5px;max-width:340px;line-height:1.6}
.rules b{color:var(--yellow)}
.modes{display:flex;gap:12px}
.modes button{
  width:140px;height:64px;border-radius:16px;border:2px solid rgba(255,255,255,.14);cursor:pointer;
  background:rgba(255,255,255,.05);color:#fff;font-size:24px;display:flex;flex-direction:row;
  align-items:center;justify-content:center;gap:8px;transition:transform .12s;
}
.modes button span{font-size:14px;font-weight:700;letter-spacing:1px}
.modes button.sel{border-color:var(--pink);box-shadow:0 0 18px rgba(255,47,179,.5);transform:scale(1.04)}
.modes button:active{transform:scale(.95)}
#start2pBtn{margin-top:2px}
.diffs{display:flex;gap:12px}
.diffs[hidden]{display:none}
.diffs button{
  width:92px;height:92px;border-radius:18px;border:2px solid rgba(255,255,255,.14);cursor:pointer;
  background:rgba(255,255,255,.05);color:#fff;font-size:30px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;transition:transform .12s;
}
.diffs button span{font-size:13px;font-weight:700;letter-spacing:1px}
.diffs button.sel{border-color:var(--cyan);box-shadow:0 0 18px rgba(0,240,255,.5);transform:scale(1.06)}
.diffs button:active{transform:scale(.94)}
.best{color:#8b93b8;font-size:13px;min-height:18px}
.overlay h2{font-size:40px;font-weight:900;letter-spacing:3px}
.big-btn{
  background:linear-gradient(135deg,var(--cyan),#00a8ff);border:none;color:#04121a;font-weight:800;
  font-size:17px;padding:14px 30px;border-radius:14px;cursor:pointer;min-width:200px;
  box-shadow:0 0 22px rgba(0,240,255,.4);
}
.big-btn:active{transform:scale(.96)}
.ghost-btn{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);color:#fff;font-weight:600;
  font-size:15px;padding:12px 24px;border-radius:14px;cursor:pointer;min-width:140px;
}
.row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.final-score{font-size:56px;font-weight:900;letter-spacing:4px;text-shadow:0 0 24px rgba(0,240,255,.7)}
.stats{color:#aab2d8;font-size:14px;line-height:1.7}
.toast{color:var(--green);font-weight:700;font-size:14px;min-height:20px}
#gameover.win #resultTitle{color:var(--green);text-shadow:0 0 24px rgba(61,255,122,.8)}
#gameover.lose #resultTitle{color:var(--pink);text-shadow:0 0 24px rgba(255,47,179,.8)}