*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{background:#05070f;color:#eef2ff;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;display:flex;justify-content:center;min-height:100vh;min-height:100dvh}
#wrap{width:100%;max-width:480px;display:flex;flex-direction:column;height:100vh;height:100dvh}
#topbar{display:flex;align-items:center;gap:8px;padding:8px 10px;background:linear-gradient(180deg,#141b3d,#0b1026);border-bottom:1px solid #2a3570;min-height:56px}
#hearts{font-size:20px;letter-spacing:2px;min-width:74px;text-shadow:0 0 8px #ff4d6d}
#mid{flex:1;text-align:center}
#raid{font-size:12px;font-weight:700;letter-spacing:1px;color:#9fb2ff}
#score{font-size:20px;font-weight:800}
#score #best{font-size:11px;color:#8b93b8;font-weight:600;margin-left:6px}
#btns{display:flex;gap:6px}
button{font:inherit;color:#fff;background:linear-gradient(180deg,#3b4a9e,#26306e);border:1px solid #5a6be0;border-radius:10px;padding:8px 10px;font-weight:700;cursor:pointer;touch-action:manipulation}
button:active{transform:scale(.95)}
button.ghost{background:#1a2145;border-color:#3a4480}
#stage{position:relative;flex:1;min-height:0;background:#0b1026}
#game{position:absolute;display:block;touch-action:none;user-select:none;-webkit-user-select:none}
#tutor{position:absolute;top:64px;left:50%;transform:translateX(-50%);background:rgba(10,14,35,.92);border:1px solid #ffd166;color:#ffe9a8;font-weight:700;font-size:15px;padding:8px 14px;border-radius:12px;white-space:nowrap;pointer-events:none;box-shadow:0 0 18px rgba(255,209,102,.35);z-index:5}
#banner{position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);font-size:34px;font-weight:900;letter-spacing:2px;color:#fff;text-shadow:0 0 24px #6c8bff,0 4px 0 #000;pointer-events:none;z-index:5;text-align:center}
.hidden{display:none!important}
.ov{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:rgba(5,8,20,.88);backdrop-filter:blur(3px);z-index:10;text-align:center;padding:24px}
.ov h1{font-size:52px;letter-spacing:3px;text-shadow:0 0 30px #6c8bff}
.ov h1 span{color:#ffd166;text-shadow:0 0 30px #ff9f1c}
.ov h2{font-size:34px;letter-spacing:2px}
.ov .sub{color:#aeb8e8}
.ov ul{list-style:none;color:#dfe6ff;font-size:15px;line-height:1.9;background:#121838;border:1px solid #2c3875;border-radius:12px;padding:10px 18px}
.ov .f{color:#ff7a5c}.ov .o{color:#7dff9a}.ov .h{color:#c99aff}
.ov .tiny{font-size:12px;color:#8b93b8}
#bStart,#bAgain,#bResume{font-size:18px;padding:12px 26px;background:linear-gradient(180deg,#ffb703,#fb8500);border-color:#ffe08a;color:#231400}
@media (max-height:700px){.ov h1{font-size:40px}.ov ul{font-size:13px;line-height:1.6}}