:root{ --text:#0b1220; --muted:#4b5563; --accent:#2563eb; --good:#16a34a; --warn:#ef4444; --gold:#f59e0b;}
html,body{height:100%;margin:0;background:#87CEEB;color:var(--text);font-family:ui-sans-serif,system-ui,Segoe UI,Roboto,Helvetica,Arial}
.wrap{display:grid;grid-template-columns:1fr 320px;gap:12px;padding:12px;height:100%;box-sizing:border-box}
.card{background:#99d6ff;border:1px solid rgba(0,0,0,.08);border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.2);position:relative;overflow:hidden}
#gameCanvas{display:block;width:100%;height:100%;image-rendering:pixelated}
.hud{position:absolute;inset:10px auto auto 10px;display:flex;gap:8px;align-items:center;font-weight:700;background:rgba(255,255,255,.65);padding:6px 10px;border-radius:10px;border:1px solid rgba(0,0,0,.06);z-index:3}
.hud .pill{padding:3px 8px;border-radius:8px;background:rgba(255,255,255,.6);font-variant-numeric:tabular-nums}
.hud .score{color:var(--good)} .hud .time{color:var(--accent)} .hud .bonus{color:var(--gold)}
.hud .bonus.active{color:var(--good); text-shadow:0 0 6px rgba(255,255,0,.65)}
.hud2{position:absolute;right:10px;top:10px;display:flex;gap:6px;z-index:3}
.btn{cursor:pointer;border:1px solid rgba(0,0,0,.12);background:linear-gradient(180deg,#fff,#e7f3ff);color:#0b1220;padding:6px 10px;border-radius:8px;font-weight:700;letter-spacing:.2px}
.overlay{position:absolute;inset:0;display:none;align-items:center;justify-content:center;z-index:4;backdrop-filter:saturate(120%) blur(2px)}
.overlay.show{display:flex}
.modal{width:min(560px,92%);background:linear-gradient(180deg,#fff,#ecf5ff);border:1px solid rgba(0,0,0,.08);border-radius:14px;padding:18px;box-shadow:0 20px 60px rgba(0,0,0,.2)}
.modal h1{margin:0 0 6px 0;font-size:22px}
.rightCol{padding:10px;display:flex;flex-direction:column;gap:10px}
.panel{padding:10px;border-radius:10px;border:1px solid rgba(0,0,0,.06);background:linear-gradient(180deg,#fff,#f3f7fb)}
table{width:100%;border-collapse:collapse} th,td{padding:6px 5px;border-bottom:1px dashed rgba(0,0,0,.08);text-align:left}
.hint{position:absolute;left:8px;bottom:8px;font-size:12px;color:var(--muted);z-index:2}
.settings{position:absolute;left:10px;top:56px;z-index:3;background:rgba(255,255,255,.7);padding:6px 10px;border-radius:10px;border:1px solid rgba(0,0,0,.06);font-weight:600}

.charPicker{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
.charCard{user-select:none;cursor:pointer;border-radius:12px;border:1px solid rgba(0,0,0,.08);background:linear-gradient(180deg,#fff,#eef5ff);padding:10px;display:flex;flex-direction:column;align-items:center;gap:8px;transition:.15s transform,.15s box-shadow,.15s border-color}
.charCard:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.12)}
.charCard.selected{outline:2px solid var(--accent);border-color:var(--accent)}
.charThumb{width:64px;height:64px;image-rendering:pixelated;background:#e8f2ff;display:flex;align-items:center;justify-content:center;border-radius:10px;overflow:hidden}
.charName{font-weight:700}
.charHint{font-size:12px;color:var(--muted)}

.mobileCtrls{position:absolute;left:0;right:0;bottom:0;display:none;gap:12px;justify-content:space-between;align-items:center;padding:10px 12px;z-index:5;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.78));-webkit-user-select:none;user-select:none}
.mobileCtrls .grp{display:flex;gap:10px}
.mobileBtn{-webkit-tap-highlight-color:transparent;user-select:none;touch-action:manipulation;cursor:pointer;min-width:64px;min-height:64px;border-radius:14px;font-weight:900;font-size:18px;border:1px solid rgba(0,0,0,.12);background:linear-gradient(180deg,#fff,#e7f3ff);box-shadow:0 8px 20px rgba(0,0,0,.15);display:flex;align-items:center;justify-content:center}

@media (max-width:900px){
  .wrap{grid-template-columns:1fr;height:100svh}
  .rightCol{display:none}
  .mobileCtrls{display:flex}
  .settings{display:none}
}