:root{color-scheme:dark;font-family:"Microsoft YaHei",system-ui,sans-serif}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:#081321;display:grid;place-items:center;overflow:hidden}.game-shell{width:min(100vw,620px);height:min(100vh,1100px);aspect-ratio:750/1334;position:relative;overflow:hidden;background:#17243d;box-shadow:0 0 50px #000}canvas{width:100%;height:100%;display:block}.sound-button{position:absolute;z-index:5;right:13px;top:94px;width:30px;height:30px;border:1px solid #8cb4ca;border-radius:50%;background:#102c43cc;color:#e7f8ff;font-size:16px}.hud{position:absolute;z-index:2;top:0;left:0;width:100%;height:19%;padding:4.2% 4% 0;display:flex;justify-content:space-between;align-items:flex-start;background:linear-gradient(#07111fe8 0%,#0d1d2cbb 54%,transparent);pointer-events:none}.team-card{width:29%;display:flex;gap:7px;align-items:center;color:#fff;padding:7px 4px;border-bottom:3px solid}.team-card b{display:block;font-size:13px;white-space:nowrap}.team-card small{display:block;font-size:10px;margin-top:3px;color:#b4c6d6}.blue-team{justify-content:flex-end;text-align:right;border-color:#4aa9f6}.red-team{border-color:#fa5b61}.portrait{width:35px;height:35px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:900;border:2px solid #fff8;box-shadow:0 1px 5px #0008}.red-team .portrait{background:linear-gradient(135deg,#ff8383,#ca2639)}.blue-team .portrait{background:linear-gradient(135deg,#76c9ff,#235ec3)}.scoreboard{position:absolute;left:50%;transform:translateX(-50%);top:5px;min-width:145px;text-align:center}.score-line{height:57px;display:flex;align-items:center;justify-content:center;gap:10px;color:#fff;text-shadow:0 2px 3px #000}.score-line strong{font-family:Arial Black,Impact,sans-serif;font-size:48px;line-height:1}.score-line strong:first-child{color:#ff6268}.score-line strong:last-child{color:#54b7ff}.score-line i{font-style:normal;font-size:33px;color:#e6eff8}.round{display:flex;align-items:center;justify-content:center;gap:7px;font-size:10px;color:#a9c6dc}.round span{padding:3px 7px;border-radius:9px;background:#1b3045}.round i{font-style:normal;color:#fff}.round b{color:#ffe18b;font-size:10px}.message{position:absolute;z-index:2;top:18%;left:50%;transform:translateX(-50%);color:#fff8db;background:#112c3fbe;border:1px solid #8db8ca;border-radius:16px;padding:6px 14px;font-size:12px;white-space:nowrap;transition:opacity .25s}.controls{position:absolute;z-index:3;bottom:4%;left:0;width:100%;display:flex;justify-content:space-between;align-items:flex-end;padding:0 5%}.controls button{border:0;color:#fff;touch-action:none;user-select:none;-webkit-user-select:none;box-shadow:inset 0 2px #ffffff77,0 5px 0 #062634,0 9px 15px #0006}.controls button:active{transform:translateY(4px);box-shadow:inset 0 1px #ffffff55,0 1px 0 #062634}.move-controls{display:flex;gap:9px}.move-controls button{width:62px;height:62px;border-radius:50%;font-size:28px;background:linear-gradient(145deg,#4e9cc2,#176288)}.hit-controls{display:flex;gap:10px}.hit-controls button{width:84px;height:84px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center}.hit-controls em{font-style:normal;font-size:29px;font-weight:900;line-height:1}.hit-controls span{font-size:10px;margin-top:3px}.low{background:linear-gradient(145deg,#64c9a0,#16835e)}.high{background:linear-gradient(145deg,#fb9865,#d74d3e)}.panel{position:absolute;inset:0;z-index:4;background:linear-gradient(180deg,#071323e8,#142b47dc);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;text-align:center}.panel p{margin:0;color:#f9d762;font-size:16px;letter-spacing:5px}.panel h1{font-size:43px;margin:10px 0 6px;text-shadow:0 3px #081725}.panel span{color:#c8e0ec;font-size:13px}.panel button{margin-top:32px;border:0;border-radius:28px;padding:15px 47px;background:linear-gradient(#ffcb5d,#ee7540);box-shadow:0 5px #994022;color:#fff;font-size:18px;font-weight:800}.hidden{display:none}@media (max-aspect-ratio:750/1334){.game-shell{width:100vw;height:100vh}}