html,body{margin:0;padding:0;height:100%;background:#0b1f3a;color:#fff;font-family:"PingFang SC","Microsoft YaHei",sans-serif;overflow:hidden;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
*{box-sizing:border-box}
button,input{font:inherit}
#app{position:fixed;inset:0;display:flex;flex-direction:column}
#hud{height:64px;display:flex;justify-content:space-between;align-items:center;padding:0 8px;background:rgba(0,0,0,.4);flex:none}
.hud-item{display:flex;flex-direction:column;align-items:center;line-height:1.25;min-width:48px}
.hud-item .k{font-size:10px;opacity:.78;white-space:nowrap}.hud-item .v{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums}
#stage{flex:1;position:relative;overflow:hidden}canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
.panel{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(6,20,44,.94);z-index:5;padding:22px;text-align:center}
.panel h1{font-size:23px;margin:0 0 8px}.panel p{font-size:14px;line-height:1.7;color:#cfe0ff;margin:4px 0}.panel .mode-label{margin-top:4px}
input[type=text]{font-size:20px;padding:10px 12px;width:210px;text-align:center;border-radius:10px;border:1px solid transparent;margin:8px 0;background:#fff;color:#111;outline:none}
input[type=text]:focus{border-color:#ffb703;box-shadow:0 0 0 3px rgba(255,183,3,.22)}
.mode-buttons{display:flex;flex-wrap:wrap;justify-content:center;max-width:360px}
.btn{font-size:18px;padding:12px 24px;margin:6px;border:none;border-radius:24px;background:#ffb703;color:#241a00;font-weight:700;cursor:pointer}.btn.second{background:#2f6fed;color:#fff}.btn:active{transform:scale(.95)}
#panelEnd .big{font-size:30px;margin:4px 0}#panelEnd .big.success{color:#ffe66d;animation:resultPop .65s ease-out,successGlow 1.2s ease-in-out infinite alternate}
#endCheer{height:42px;font-size:28px;letter-spacing:5px}#endCheer.success{animation:cheerBounce .8s ease-in-out infinite alternate}
#hudMissed.pulse,#hudBombErrors.pulse{animation:mistakePulse .48s ease-out}
#stats{font-size:15px;line-height:1.9;text-align:left;background:rgba(255,255,255,.09);padding:12px 18px;border-radius:12px;margin:8px 0;min-width:220px}#stats div b{float:right;font-variant-numeric:tabular-nums;margin-left:30px}
.hidden{display:none!important}#panelCount .num{font-size:96px;font-weight:700;color:#ffd166}.note{font-size:12px!important;color:#8fb0ff!important;min-height:20px}
@keyframes mistakePulse{0%{transform:scale(1)}35%{transform:scale(1.5);color:#ffb703;text-shadow:0 0 15px #ffb703}100%{transform:scale(1)}}
@keyframes resultPop{0%{transform:scale(.45);opacity:0}70%{transform:scale(1.16)}100%{transform:scale(1);opacity:1}}
@keyframes successGlow{from{text-shadow:0 0 4px #ffb703}to{text-shadow:0 0 20px #ffb703}}
@keyframes cheerBounce{from{transform:translateY(4px) rotate(-2deg)}to{transform:translateY(-7px) rotate(2deg)}}
@media (max-width:380px){.hud-item{min-width:44px}.hud-item .k{font-size:9px}.hud-item .v{font-size:15px}.btn{font-size:16px;padding:11px 18px}}