.combat-game{position:relative}.combat-stage{height:clamp(500px,72dvh,850px);background:#7d8d88}.combat-stage canvas{width:100%;height:100%;aspect-ratio:auto;max-height:none;touch-action:none}.combat-hud{position:absolute;z-index:2;left:16px;right:16px;top:64px;pointer-events:none;grid-template-columns:1fr 1fr .65fr;gap:12px}.combat-hud>div{background:#142e32ba;backdrop-filter:blur(8px);border-color:#e1d4a74d;padding:10px 16px}.combat-hud strong{font-size:21px}.combat-enemy-status{top:112px;z-index:1}.combat-crosshair{position:absolute;z-index:1;left:50%;top:50%;transform:translate(-50%,-50%);font:28px/1 system-ui;color:#fbf1c7;text-shadow:0 0 4px #142824;pointer-events:none}.combat-asset-note{position:absolute;bottom:12px;right:14px;z-index:1;color:#f5e5c7;background:#213b38a8;border-radius:5px;padding:5px 8px;font-size:11px;pointer-events:none}.combat-controls{grid-template-columns:repeat(8,minmax(0,1fr))}.combat-controls button{font-size:13px}.combat-overlay{z-index:5}.combat-joystick{display:none}.combat-demo{border-top:1px solid #526b6b;margin-top:24px;padding-top:18px}.combat-demo p{font-size:14px}.combat-dialog{background:linear-gradient(100deg,#d7bd8e,#f2e5c3 12%,#eddfb8 87%,#c5a570);border:3px solid #98713f;border-top-width:12px;border-bottom-width:12px;color:#392e23;box-shadow:0 0 45px #6cd5be33,0 8px 28px #0005}.combat-dialog h2,.combat-dialog h3,.combat-dialog .combat-prompt{color:#453425}.combat-dialog .combat-feedback{color:#8a332c}.combat-dialog .pinyin{color:#8b3c38}.combat-dialog .combat-hint,.combat-dialog details{color:#655337}.combat-dialog .combat-assembled{background:#fff8df;border-color:#a58b62}.combat-dialog .combat-assembled>span{color:#75674f}.combat-dialog .combat-tokens button,.combat-dialog .combat-assembled button{background:#f9efcf;color:#503c2a;border-color:#ad905d}.combat-dialog .badge{background:#b5945b22;color:#785226}.combat-dialog .combat-answer{color:#493626}
@media(max-width:900px){.combat-hud{top:64px}.combat-hud span{font-size:11px}.combat-hud strong{font-size:18px}.combat-controls{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(pointer:coarse){.combat-joystick{display:grid;position:absolute;z-index:3;left:16px;bottom:90px;width:90px;height:90px;place-items:center;border:1px solid #b6d4c487;border-radius:50%;background:#203d3dc7;touch-action:none;user-select:none}.combat-joystick>span{width:38px;height:38px;border-radius:50%;background:#a5c9b1;border:2px solid #f2deb0;pointer-events:none}}
@media(max-width:600px){body.combat-playing .combat-game{position:relative;grid-template-rows:auto minmax(0,1fr) auto auto;gap:8px}body.combat-playing .combat-hud{position:absolute;top:57px;left:8px;right:8px;z-index:2;gap:6px}body.combat-playing .combat-hud>div,body.combat-playing .combat-hud>div:last-child{padding:7px 8px;gap:2px;background:#16332ebd}body.combat-playing .combat-hud strong{font-size:17px}body.combat-playing .combat-hud span,body.combat-playing .combat-hud small{font-size:9px}body.combat-playing .combat-hud meter{height:8px}.combat-enemy-status{top:90px;font-size:11px}.combat-stage{height:100%}.combat-crosshair{font-size:24px}.combat-asset-note{font-size:9px;right:6px;bottom:6px}.combat-controls{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin-left:98px}.combat-controls button{font-size:11px;padding:7px 3px;min-height:46px}.combat-joystick{display:grid;bottom:8px;left:1px;width:84px;height:84px}body.combat-playing .combat-overlay{position:fixed;z-index:100;padding:14px}.combat-dialog{font-size:14px;padding:18px 14px}.combat-dialog h2{font-size:20px}.combat-help{display:none}}
@media(max-height:500px) and (pointer:coarse){.combat-stage{height:70dvh}.combat-hud>div{padding:5px 8px}.combat-joystick{bottom:12px}.combat-overlay{position:fixed;z-index:100}.combat-dialog{max-height:92dvh}}
/* Visual phase: smaller edge HUD, center reticle, ammunition on the fire control. */
.combat-hud{grid-template-columns:minmax(0,220px) minmax(0,220px);justify-content:space-between;gap:24px;top:65px}.combat-hud>div{border-radius:10px;padding:9px 13px;background:linear-gradient(120deg,#142a2dcf,#213d3980);box-shadow:0 3px 18px #071b2522}.combat-hud>div:nth-child(2){text-align:right}.combat-hud span{font-size:11px;letter-spacing:.02em}.combat-hud strong{font-size:19px}.combat-hud meter{height:8px}.combat-enemy-status{top:18px;padding:6px 12px;font-size:12px;background:#152e34b3}.combat-crosshair{left:50%!important;top:50%!important;font-size:22px;opacity:.75}.combat-aim-marker{position:absolute;z-index:1;width:10px;height:10px;border:1px solid #e7d293;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;box-shadow:0 0 4px #293b30}.combat-cover-status{position:absolute;bottom:13px;left:14px;z-index:1;font-size:11px;letter-spacing:.04em;padding:6px 10px;background:#152f31bd;border:1px solid #a8c0a74d;border-radius:6px;color:#e1e9d2}.combat-controls button[data-combat=shoot]{display:flex;flex-direction:column;justify-content:center;gap:2px}.combat-ammo-count{font-size:11px;letter-spacing:.12em;font-weight:600}.combat-asset-note{font-size:10px;opacity:.8}.combat-stage{box-shadow:0 12px 35px #07161930}
@media(max-width:600px){body.combat-playing .combat-hud{grid-template-columns:minmax(0,135px) minmax(0,135px);justify-content:space-between;gap:20px;top:58px}body.combat-playing .combat-hud>div{padding:7px 9px}body.combat-playing .combat-hud span{font-size:9px}body.combat-playing .combat-hud strong{font-size:16px}.combat-enemy-status{top:81px;font-size:10px;padding:5px 9px}.combat-cover-status{font-size:10px;bottom:24px;left:8px;padding:4px 7px}.combat-asset-note{font-size:8px;bottom:5px}.combat-ammo-count{font-size:10px}}