:root{--control-size: 76px;--control-gap: 18px;font-family:Microsoft YaHei,PingFang SC,system-ui,sans-serif;color:#17324d;background:#8fd7ff}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden;touch-action:none;overscroll-behavior:none;-webkit-user-select:none;user-select:none}body{background:linear-gradient(180deg,#8fd7ff,#dff8ff 58%,#dd6b20)}button,input{font:inherit}button{border:0;border-radius:8px;cursor:pointer;font-weight:800;touch-action:none;-webkit-tap-highlight-color:transparent}#game{position:fixed;top:0;right:0;bottom:0;left:0}.hud{position:fixed;top:max(14px,env(safe-area-inset-top));left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));z-index:3;display:flex;align-items:center;justify-content:space-between;gap:12px;pointer-events:none;color:#12324d;text-shadow:0 2px 12px rgba(255,255,255,.78)}.brand{font-size:clamp(18px,2.3vw,30px);font-weight:900}.stats{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;font-weight:900}.stats span{min-width:82px;padding:7px 11px;border:1px solid rgba(255,255,255,.72);border-radius:8px;background:#ffffffc2;text-align:center;box-shadow:0 8px 24px #1e406024}.panel{position:fixed;top:50%;left:50%;z-index:5;width:min(92vw,440px);transform:translate(-50%,-50%);padding:26px;border:1px solid rgba(255,255,255,.74);border-radius:8px;background:#ffffffe6;box-shadow:0 24px 80px #1e40603d;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.panel.hidden{display:none}.panel h1{margin:0 0 8px;font-size:clamp(34px,8vw,54px);line-height:1}.tagline{margin:0 0 20px;color:#32536b}.name-field{display:grid;gap:8px;margin-bottom:18px;color:#24465f;font-weight:800}.name-field input{width:100%;height:44px;padding:0 12px;border:1px solid rgba(36,70,95,.28);border-radius:8px;background:#fffffffa;color:#12231f;outline:none}.actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}.actions button{min-height:46px;color:#12324d;background:#ffd166}.actions button+button{color:#fff;background:#247ba0}.leaderboard{margin-top:18px;display:grid;gap:8px;max-height:220px;overflow:auto}.leaderboard-row{display:grid;grid-template-columns:34px 1fr auto;gap:8px;align-items:center;padding:8px 10px;border-radius:8px;background:#247ba01c}.mobile-controls{position:fixed;left:max(var(--control-gap),env(safe-area-inset-left));right:max(var(--control-gap),env(safe-area-inset-right));bottom:max(var(--control-gap),env(safe-area-inset-bottom));z-index:4;display:flex;justify-content:space-between;pointer-events:none}.mobile-controls button,.sound-button{pointer-events:auto;min-width:calc(var(--control-size) * 1.45);min-height:var(--control-size);color:#12324d;background:#ffd166;border:2px solid rgba(255,255,255,.82);box-shadow:0 14px 34px #1e406047;touch-action:none}.mobile-controls button.is-pressed{transform:translateY(3px) scale(.98);background:#f4a261;box-shadow:0 8px 18px #1e40603d}.sound-button{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:calc(max(var(--control-gap),env(safe-area-inset-bottom)) + var(--control-size) + 14px);z-index:4;min-width:92px;min-height:44px;background:#ffffffeb}@media (pointer: fine) and (min-width: 900px){.mobile-controls{display:none}}@media (pointer: coarse),(max-width: 760px){:root{--control-size: 78px;--control-gap: 16px}.hud{align-items:flex-start;gap:8px}.brand{max-width:45vw;font-size:20px;line-height:1.1}.stats{max-width:158px;font-size:12px;gap:6px}.stats span{min-width:70px;padding:5px 8px}.panel{top:45%;width:min(94vw,420px);padding:20px}.panel h1{font-size:clamp(30px,11vw,46px)}.mobile-controls button{font-size:20px}}@media (orientation: landscape) and (max-height: 520px){:root{--control-size: 64px;--control-gap: 14px}.mobile-controls{left:max(24px,env(safe-area-inset-left));right:max(24px,env(safe-area-inset-right))}.panel{top:50%;max-height:88vh;overflow:auto}.sound-button{min-height:40px}}