@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
:root{color-scheme:dark;--yellow:#e9cf58;--muted:#9caaa0}*{box-sizing:border-box}body{margin:0;background:#101713;color:#e8eddf;font:13px 'IBM Plex Mono',monospace}header{height:76px;padding:0 5vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #303c31}.brand{color:var(--yellow);font-size:28px;font-weight:600;text-decoration:none;display:flex;align-items:center;gap:20px}.brand span{color:var(--muted);font-size:10px;letter-spacing:2px}button{font:inherit;cursor:pointer;background:#263329;border:1px solid #47563e;color:#e8eddf;padding:10px 15px}button:hover{border-color:var(--yellow);color:var(--yellow)}main{max-width:1140px;margin:auto;padding:40px 32px}.eyebrow{color:var(--yellow);font-size:10px;letter-spacing:3px}.title{display:flex;justify-content:space-between;align-items:end;margin:16px 0 28px}h1{font:900 clamp(54px,7vw,90px)/.88 'Barlow Condensed',Impact,sans-serif;letter-spacing:-1px;margin:0}h1 span{display:block;font-size:.48em;color:var(--yellow);letter-spacing:3px;margin-top:10px}.title p{color:var(--muted);line-height:1.8}.cabinet{border:1px solid #546043;padding:7px;background:#222c23;box-shadow:0 22px 70px #0006}.cabinet-top{display:flex;justify-content:space-between;padding:10px 12px 16px;color:#abb6a3;font-size:10px;letter-spacing:2px}.screen{position:relative;aspect-ratio:16/9;background:#1b2924;overflow:hidden}canvas{width:100%;height:100%;display:block;image-rendering:pixelated}#overlay{position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:center;flex-direction:column;padding:6%;background:linear-gradient(90deg,#101713f5,#101713aa 50%,#10171320)}.badge{font-size:10px;letter-spacing:3px;color:var(--yellow)}h2{font:800 clamp(35px,6vw,74px)/.95 'Barlow Condensed',Impact,sans-serif;margin:20px 0 10px;text-transform:uppercase}h2 em{font-style:normal;color:var(--yellow)}#overlay p{font-size:12px;line-height:1.9;color:#c0cab9}#start{background:var(--yellow);color:#172015;border:none;font-weight:600;min-width:230px;display:flex;justify-content:space-between;margin:12px 0 18px}small{color:#96a38c;font-size:9px}.touch{display:flex;justify-content:space-between;gap:10px;padding:10px 5px 4px}.touch>div{display:flex;gap:6px}.touch button{touch-action:none;user-select:none;min-width:56px;font-weight:600}.touch .fire{background:#e9cf58;color:#152014;min-width:90px}.under{display:flex;justify-content:space-between;font-size:10px;gap:20px;color:var(--muted);line-height:2.8}kbd{font:inherit;border:1px solid #44513f;padding:4px 6px;color:#d7decd;margin-right:4px}.under button{font-size:9px;padding:4px 8px;margin-left:7px}.notes{border-top:1px solid #34412f;margin-top:18px;padding:25px 0;display:grid;grid-template-columns:repeat(3,1fr);gap:30px}.notes b{font-size:10px;letter-spacing:1px;color:var(--yellow)}.notes p{font-size:11px;line-height:1.8;color:var(--muted)}footer{font-size:9px;letter-spacing:2px;border-top:1px solid #34412f;padding:22px 0;color:#73836d;display:flex;justify-content:space-between}@media(max-width:650px){header{height:58px;padding:0 16px}.brand span{font-size:8px;letter-spacing:0}.brand{gap:12px}main{padding:25px 12px}.title p{display:none}.title{margin-bottom:22px}.cabinet-top{font-size:8px;letter-spacing:.5px}.under{flex-wrap:wrap;gap:0}.under p{margin:6px 0}.notes{gap:15px;grid-template-columns:1fr}.notes p{margin:6px 0}.touch button{padding:13px 10px;min-width:44px;font-size:11px}.touch .fire{min-width:62px}#overlay{padding:5%}h2{margin:8px 0;font-size:36px}#overlay p{font-size:9px;line-height:1.5;margin:5px 0}#start{margin:6px 0;min-width:170px;padding:10px;font-size:11px}#overlay small{display:none}.badge{font-size:8px}}

#workshop{position:absolute;inset:0;z-index:3;background:#101b1af7;padding:4%;display:none;flex-direction:column;justify-content:center;gap:10px;overflow-y:auto}#workshop[hidden]{display:none}.workshop-head{display:flex;justify-content:space-between;align-items:center;gap:15px}.workshop-head h2{font-size:40px;margin:10px 0 0}.workshop-head strong{color:var(--yellow);white-space:nowrap;font-size:18px}#upgrade-summary{color:#a6b5ab;font-size:10px;margin:0}.upgrade-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.upgrade-cards article{border:1px solid #45594c;background:#22332a;padding:15px}.upgrade-cards b{color:var(--yellow);font-size:13px}.upgrade-cards p{color:#d0d8c8;font-size:11px;margin:8px 0}.upgrade-cards small{display:block;margin-bottom:12px;color:#a9b7ae}.upgrade-cards button{width:100%;font-size:11px;padding:10px 5px;background:#364b37}button:disabled{cursor:default;opacity:.45;color:#a9b7ae;border-color:#435043}.workshop-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px}.workshop-bottom p{font-size:11px;color:#c5d3bb}.workshop-bottom button{background:var(--yellow);color:#172015;font-weight:bold;white-space:nowrap;font-size:11px}@media(max-width:650px){#workshop{padding:3%;gap:6px;justify-content:flex-start}.workshop-head h2{font-size:24px;margin:3px 0}.workshop-head strong{font-size:11px}.workshop-head .badge{font-size:7px;letter-spacing:1px}#upgrade-summary{font-size:7px}.upgrade-cards{gap:5px}.upgrade-cards article{padding:7px}.upgrade-cards b{font-size:9px}.upgrade-cards p{font-size:8px;margin:4px 0}.upgrade-cards small{font-size:7px;margin-bottom:5px;min-height:18px}.upgrade-cards button{font-size:8px;padding:8px 2px}.workshop-bottom{gap:5px}.workshop-bottom p{font-size:8px;margin:0}.workshop-bottom button{font-size:8px;padding:8px 5px}#workshop>small{font-size:7px}}

.touch .melee{background:#703e30;border-color:#ba8352;color:#f4dfb3}.touch .melee:hover{border-color:#efd282}@media(max-width:450px){.touch{gap:5px;padding-left:0;padding-right:0}.touch>div{gap:4px}.touch button{min-width:32px;padding:13px 7px;font-size:9px}.touch .fire{min-width:43px}.touch .melee{min-width:43px}}

/* Phone controls and fullscreen cabinet. Safe areas protect notches and home indicators. */
.game-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 5px 10px}.game-toolbar>div{display:flex;gap:6px}.game-toolbar button{min-height:44px;font-size:10px;padding:8px 12px}.games-back{color:var(--muted);font-size:10px;text-decoration:none}.games-back:hover{color:var(--yellow)}.mobile-hint{color:var(--muted);font-size:10px;line-height:1.7}.touch button{min-height:48px;-webkit-user-select:none;-webkit-touch-callout:none}.touch .pressed{box-shadow:inset 0 0 0 2px var(--yellow);filter:brightness(1.2)}.touch{touch-action:none}.screen canvas{object-fit:contain}.expanded-play{overflow:hidden;overscroll-behavior:none}.expanded-play .cabinet,.cabinet:fullscreen{position:fixed;inset:0;z-index:10000;width:100%;height:100vh;height:100dvh;border:0;margin:0;padding:max(5px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));display:flex;flex-direction:column;background:#080d0a;box-shadow:none}.expanded-play .cabinet-top,.cabinet:fullscreen .cabinet-top{display:none}.expanded-play .screen,.cabinet:fullscreen .screen{flex:1;min-height:0;aspect-ratio:auto;width:100%;background:#080d0a}.expanded-play .game-toolbar,.cabinet:fullscreen .game-toolbar{flex-shrink:0;padding-bottom:5px}.expanded-play .touch,.cabinet:fullscreen .touch{flex-shrink:0;margin-top:4px}.expanded-play .games-back,.cabinet:fullscreen .games-back{color:var(--yellow)}.expanded-play #overlay,.cabinet:fullscreen #overlay{justify-content:center}.expanded-play #workshop,.cabinet:fullscreen #workshop{justify-content:center}
@media(max-width:650px){.touch{display:grid;grid-template-columns:minmax(96px,.8fr) minmax(150px,1.2fr);gap:12px;align-items:end}.touch>div:first-child{display:grid;grid-template-columns:1fr 1fr;gap:6px}.touch>div:last-child{display:grid;grid-template-columns:1fr 1fr;gap:6px}.touch button{min-width:44px;min-height:48px;padding:10px 8px;font-size:11px}.touch .fire,.touch .melee{min-width:44px}.game-toolbar{align-items:center}.game-toolbar button{font-size:9px;padding:8px}.games-back{font-size:9px;max-width:105px}.brand span{max-width:170px}.screen{min-height:190px}#overlay h2{font-size:clamp(28px,8vw,40px)}#overlay p{font-size:10px}#start{min-height:44px}.upgrade-cards button{min-height:44px}.workshop-bottom button{min-height:44px}.expanded-play #workshop{justify-content:flex-start}.expanded-play .screen,.cabinet:fullscreen .screen{min-height:0}}
@media(orientation:landscape) and (max-height:600px){.expanded-play .touch,.cabinet:fullscreen .touch{display:flex;gap:8px;align-items:center}.expanded-play .touch>div,.cabinet:fullscreen .touch>div{display:flex;gap:8px}.expanded-play .touch button,.cabinet:fullscreen .touch button{min-width:58px;min-height:46px}.expanded-play .game-toolbar button,.cabinet:fullscreen .game-toolbar button{min-height:36px}.expanded-play #overlay h2,.cabinet:fullscreen #overlay h2{font-size:clamp(28px,7vh,52px);margin:5px 0}.expanded-play #overlay p,.cabinet:fullscreen #overlay p{margin:4px 0;font-size:10px}.expanded-play #start,.cabinet:fullscreen #start{margin:5px 0;min-height:40px}.expanded-play #overlay small,.cabinet:fullscreen #overlay small{display:none}.expanded-play #workshop,.cabinet:fullscreen #workshop{justify-content:flex-start;padding:2%;gap:5px}.workshop-head h2{font-size:24px}.upgrade-cards article{padding:7px}.upgrade-cards button{min-height:36px;padding:7px}.upgrade-cards small{margin-bottom:5px}.workshop-bottom button{min-height:36px}}

/* Drop lives under movement controls, away from the fire/slash cluster. */
.touch .drop{border-color:#778567;color:#e9cf58}.touch>div:first-child{flex-wrap:wrap}.touch .drop{min-width:58px}
@media(max-width:650px){.touch>div:first-child .drop{grid-column:1 / -1}.touch>div:last-child{align-self:stretch}.touch>div:last-child button{height:100%}}
@media(orientation:landscape) and (max-height:600px){.expanded-play .touch>div:first-child,.cabinet:fullscreen .touch>div:first-child{flex-wrap:nowrap}}