:root { color-scheme: dark; }
body { background: #162e2d; background-image: radial-gradient(ellipse at 50% 0, #4b6951, transparent 75%); color: #fff3d5; }
.game { --accent: #ffd780; width: min(100%, 450px); height: 100dvh; max-height: 100dvh; min-height: 0; overflow: hidden; background: #213e38; border-color: #aec89138; box-shadow: 0 24px 80px #071c2977; }
.hud { background: linear-gradient(120deg, #254b45, #193732); border-bottom-color: #d9dca52b; padding: 12px 16px; min-height: 66px; gap: 12px; }
.hud > div:first-child { min-width: 0; }
.eyebrow { color: #c9d9b6; font-size: 9px; letter-spacing: 1.3px; }
.hud strong { color: #fff3d3; font-size: 14px; line-height: 1.35; }
.hud .score { flex: 0 0 auto; }
.score strong { color: #ffdc8b; font-size: 22px; }
.field { flex: 1 1 0; width: 100%; min-height: 0; overflow: hidden; display: grid; place-items: center; background: radial-gradient(ellipse at top, #608c7d, #263f34); }
#canvas { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; object-position: center; }
.controls { padding: 12px; gap: 8px; background: linear-gradient(#2c4e41, #203c35); border-top: 1px solid #cbe09b44; }
.controls label { flex: 1 1 calc(50% - 8px); min-width: 0; gap: 5px; color: #f4e5be; font-size: 11px; flex-wrap: wrap; }
.controls input[type=range] { flex: 1 1 65%; width: 65%; height: 32px; min-width: 55px; accent-color: #ffd780; touch-action: pan-y; }
.controls output { min-width: 24px; font-size: 12px; color: #ffe49f; }
.controls button { min-width: 0; min-height: 46px; flex: 1 1 20%; padding: 9px 6px; font-size: 11px; line-height: 1.25; overflow-wrap: anywhere; color: #fff0cd; border: 1px solid #aac88b66; border-radius: 12px; background: linear-gradient(#527356, #354f3e); box-shadow: inset 0 1px #e5f2b31c, 0 3px #122a25; }
.controls button[aria-pressed=true] { color: #233b2b; background: #ffe096; border-color: #fff0bf; box-shadow: inset 0 0 0 2px #8b632d; }
.controls button.primary { flex-basis: 30%; color: #342d20; background: linear-gradient(#ffe6a3, #e9b862); border-color: #fff1bf; font-size: 13px; box-shadow: 0 3px #9a6a35; }
.controls button:disabled { opacity: .48; box-shadow: none; }
.controls button:not(:disabled):active { transform: translateY(1px); box-shadow: none; }
button:focus-visible, input:focus-visible, #canvas:focus-visible { outline: 3px solid #fff6cb; outline-offset: -3px; }
.tools { padding: 5px 14px 8px; gap: 8px; background: #203c35; }
.tools button { min-height: 44px; padding: 8px; color: #eee3c1; }
.tools small { color: #b9c7aa; text-align: center; }
.overlay { background: #173933ae; backdrop-filter: none; padding: 16px; overflow-y: auto; }
.panel { background: #fff1d4; color: #2e4939; border-radius: 20px; border-top: 5px solid #efbd6c; padding: 24px; box-shadow: 0 16px 45px #0a252966; }
.panel h1 { font: 800 32px/1.08 system-ui, sans-serif; letter-spacing: -1px; color: #2c4d3e; }
.panel .eyebrow { color: #686543; }
.panel p, .instructions { color: #4f5d43; font-size: 12px; }
.instructions { border-color: #b9bd95; }
.panel button { background: #305e4c; color: #fff0ca; border-radius: 10px; min-height: 46px; }
.panel button.secondary { color: #3b5b46; }
.message { background: #193e36ec; color: #fff0c7; border: 1px solid #d5dc9d55; border-radius: 12px; padding: 9px; font-size: 11px; line-height: 1.4; }
html[data-embed=true] .game { height: 100dvh; min-height: 0; max-height: 100dvh; }
@media (max-height: 560px) { .hud { min-height: 46px; padding: 6px 11px; } .hud strong { margin-top: 2px; font-size: 12px; } .controls { padding: 6px 8px; gap: 5px; } .controls label { font-size: 10px; } .controls input[type=range] { height: 24px; } .controls button { min-height: 44px; padding: 5px; } .tools { padding: 0 8px; } .tools button { min-height: 36px; } .panel { padding: 12px; margin: auto; } .panel h1 { font-size: 24px; margin: 6px 0; } .panel p { margin: 5px 0; line-height: 1.4; } .instructions { margin-top: 7px; padding-top: 7px; } .panel button { margin-top: 8px; } }
@media (max-width: 350px) { .hud { padding: 9px 11px; } .hud strong { font-size: 12px; } .controls { padding: 9px; gap: 6px; } .controls button { font-size: 10px; min-height: 46px; } .panel { padding: 17px; } .panel h1 { font-size: 27px; } }
@media (prefers-reduced-motion: reduce) { .game *, .game *::before, .game *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } .controls button:not(:disabled):active { transform: none; } }

/* Keep the canvas viewport independent of its backing bitmap dimensions. */
.game { width: min(100%, 640px); }
.field { display: block; position: relative; }
#canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
.hud { min-height: 52px; padding: 7px 12px; }
.hud strong { margin-top: 3px; }
.controls { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 5px 6px; padding: 6px 8px; }
.controls button { grid-column: span 3; min-height: 44px; min-width: 0; padding: 5px 3px; border-radius: 9px; font-size: 10px; }
.controls button[data-control=left], .controls button[data-control=right], .controls button[data-control=fire] { grid-column: span 4; }
.controls label { grid-column: span 6; display: grid; grid-template-columns: auto minmax(0, 1fr) 24px; align-items: center; gap: 4px; min-width: 0; height: 44px; font-size: 10px; white-space: nowrap; }
.controls input[type=range] { display: block; width: 100%; min-width: 0; height: 44px; margin: 0; padding: 0; }
.controls output { min-width: 0; width: 24px; text-align: right; font-size: 11px; }
.tools { padding: 0 8px; }
.tools button { min-height: 44px; }
.game > .message { position: static; flex: 0 0 28px; height: 28px; min-height: 28px; margin: 0; padding: 5px 10px; border: 0; border-top: 1px solid #d5dc9d33; border-radius: 0; text-align: left; font-size: 11px; line-height: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.game > .message[hidden] { display: block !important; visibility: hidden; }
html[data-embed=true] .game { width: min(100%, 640px); margin-inline: auto; }
@media (max-height: 560px) { .hud { min-height: 46px; padding: 5px 10px; } .hud .eyebrow { font-size: 8px; letter-spacing: .8px; } .hud strong { font-size: 12px; } }

body { background: #151c2b; background-image: radial-gradient(ellipse at top, #364460, transparent 80%); }
.game { --accent: #ffd34e; background: #202633; border: 2px solid #10141d; border-radius: 4px; box-shadow: 0 8px 0 #0c111c, 0 18px 60px #0007; }
.hud { background: #202633; border-bottom: 2px solid #10141d; }
.hud strong { color: #fff2cf; }
.eyebrow { color: #bbc6d8; }
.score strong { color: #ffd34e; font-family: Consolas, monospace; }
.field { background: #3064ae; }
.controls { background: #202633; border-top: 2px solid #10141d; }
.controls button { background: #343e50; border: 2px solid #111721; border-top-color: #65718a; border-radius: 3px; color: #fff2cf; box-shadow: 0 2px #10141d; font-weight: 800; }
.controls button[aria-pressed=true] { background: #ffd34e; border-color: #fff0ad #987027 #987027 #fff0ad; color: #212533; box-shadow: 0 2px #10141d; }
.controls button[aria-pressed=true]::before { content: '▸ '; }
.controls button.primary { background: #a92f36; color: #fff2cf; border-color: #ffd34e #491c2c #491c2c #da6766; font-size: 13px; }
.controls button:disabled { opacity: .55; }
.controls label { color: #d3dbea; }
.controls input[type=range] { accent-color: #ffd34e; }
.controls output { color: #ffd34e; }
.game > .message { background: #1b2230; color: #ffdf87; border-top-color: #65718a; }
.tools { background: #202633; }
.tools button { color: #e3dcbe; }
.tools small { color: #9aa7bf; }
.overlay { background: #131b2b99; }
.panel { border: 3px solid #10141d; border-top: 5px solid #ffd34e; border-radius: 5px; background: #293449; color: #fff2cf; box-shadow: 5px 6px #0c132ccc; }
.panel h1 { color: #ffd34e; text-shadow: 2px 3px #10141d; font-weight: 900; }
.panel .eyebrow { color: #bbc6d8; }
.panel p, .instructions { color: #edf0e6; }
.instructions { border-color: #586279; }
.panel button { background: #a92f36; color: #fff2cf; border-radius: 3px; border: 2px solid #10141d; border-top-color: #ffd34e; box-shadow: 0 2px #10141d; }
.panel button.secondary { color: #fff2cf; }
button:focus-visible, input:focus-visible { outline: 3px solid #fff6c7; outline-offset: 1px; }

.controls .ammo-button { position: relative; display: flex; justify-content: center; align-items: center; padding: 0 15px 0 3px; overflow: hidden; }
.ammo-icon { display: block; width: 48px; height: 40px; object-fit: contain; filter: drop-shadow(0 2px 1px #0007); pointer-events: none; }
.ammo-count { position: absolute; right: 4px; bottom: 3px; min-width: 15px; padding: 1px 3px; border-radius: 3px; background: #111721; color: #fff1be; font: 800 11px/15px system-ui, sans-serif; text-align: center; }
.controls .ammo-button[aria-pressed=true]::before { content: ''; position: absolute; left: 3px; top: 4px; width: 5px; height: 5px; border-radius: 50%; background: #34271a; }
.controls .ammo-button[aria-pressed=true] .ammo-count { background: #59411b; color: #fff8da; }