:root{color-scheme:dark;font-family:Arial,Helvetica,sans-serif;background:#101010;color:#f2ede5}*{box-sizing:border-box}body{margin:0}header,main,footer{max-width:1020px;margin:auto;padding:20px 28px}header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #34302b}.brand{font-weight:900;letter-spacing:.1em;color:inherit;text-decoration:none;font-size:15px}.brand span{display:block;font-size:11px;font-weight:400;color:#a9a297;margin-top:8px;letter-spacing:0}.tag,.eyebrow,footer{font-size:10px;letter-spacing:.15em;color:#b6aea4}.eyebrow{color:#ff955a}.heading{display:flex;align-items:center;justify-content:space-between;gap:16px}h1{font-size:clamp(25px,4vw,40px);letter-spacing:-.04em;margin:8px 0 18px}em{font-style:normal;color:#ff873f}button{border:1px solid #655347;background:#211c18;color:#fff0df;border-radius:5px;padding:11px 15px;cursor:pointer;font:inherit;font-size:13px}button:hover{background:#39281e}button:disabled{opacity:.4;cursor:wait}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #ff873f;outline-offset:4px}#stage{position:relative;background:#0c111d;max-width:900px;margin:auto;aspect-ratio:900/840;border:1px solid #44362b;overflow:hidden}canvas{display:block;width:100%;height:100%;padding:0;border:0;outline:none}#cover{position:absolute;inset:0;display:grid;place-items:center;text-align:center;background:radial-gradient(ellipse at center,#2c251e,#0c111df5 72%);padding:20px}#cover[hidden]{display:none}#cover h2{font-size:clamp(30px,5vw,56px);letter-spacing:-.05em;margin:15px 0}#cover p{line-height:1.7;color:#beb8af}#start{background:#ff873f;color:#19120d;border:0;font-size:18px;font-weight:700;margin:18px 0;min-width:180px}#agkstatus{font-size:12px}.toolbar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:14px 0;font-size:12px}.toolbar p{margin-right:auto;line-height:1.8}.toolbar span{margin:0 10px;color:#746557}details{border-top:1px solid #34302b;padding-top:15px;color:#bbb3a9;font-size:13px;line-height:1.7}summary{cursor:pointer;color:#e9ded0}footer{padding-bottom:30px}#stage:fullscreen{height:100vh;width:100vw;max-width:none;display:grid;place-items:center;background:#080c13;border:0}#stage:fullscreen canvas{width:auto;height:min(100vh,93.333vw);max-width:100vw;aspect-ratio:900/840}@media(max-width:600px){header,main,footer{padding:16px}.tag{display:none}.heading>button{font-size:11px;padding:9px}h1{font-size:27px}.toolbar p{width:100%}}
/* Shared-screen touch controls: portrait below the board, landscape beside it. */
.touch-pad,.touch-hint{display:none}#play-shell:fullscreen{background:#101010;overflow:auto;padding:10px;width:100vw;height:100dvh}#play-shell:fullscreen #stage{height:calc(100dvh - 90px);width:auto;aspect-ratio:900/840}#play-shell:fullscreen .toolbar{max-width:900px;margin:auto}.touch-device #play-shell{display:grid;grid-template-columns:1fr 1fr;gap:12px}.touch-device #stage{grid-column:1/-1;width:100%}.touch-device .toolbar{grid-column:1/-1;margin:0}.touch-device .touch-pad{display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 4px;background:#1c1815;border:1px solid #44362b;border-radius:10px;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.touch-device .touch-hint{display:block;color:#bdb1a4;font-size:12px;line-height:1.6}.touch-pad strong{font-size:13px;color:#ffb16a}.touch-pad.bacon strong{color:#ffa3b0}.dpad{display:grid;grid-template-columns:repeat(3,44px);grid-template-rows:repeat(2,44px);gap:5px}.dpad button{padding:0;font-size:20px;border-radius:8px;touch-action:none}.dpad .up{grid-column:2;grid-row:1}.dpad .left{grid-column:1;grid-row:2}.dpad .down{grid-column:2;grid-row:2}.dpad .right{grid-column:3;grid-row:2}.touch-pad .weapon{min-height:44px;width:142px;font-weight:700;background:#743915;touch-action:none}.touch-pad.bacon .weapon{background:#713441}.touch-pad button.held{background:#ff9851;color:#16100a;transform:scale(.95)}.touch-pad.bacon button.held{background:#ffadbe}.touch-device .toolbar p{display:none}.touch-device .toolbar{justify-content:center}.touch-device .toolbar button{min-height:44px}.expanded-game header,.expanded-game footer,.expanded-game details,.expanded-game .touch-hint,.expanded-game .eyebrow{display:none}.expanded-game main{padding:8px}.expanded-game .heading h1{font-size:20px}.touch-device #play-shell:fullscreen #stage{width:100%;height:auto}.touch-device #play-shell:fullscreen{align-content:start}.touch-device .heading button{min-height:44px}
@media (orientation:landscape) and (max-height:600px){.touch-device header,.touch-device footer,.touch-device details,.touch-device .touch-hint,.touch-device .eyebrow{display:none}.touch-device main{padding:5px 10px}.touch-device .heading{height:38px}.touch-device h1{font-size:20px;margin:0}.touch-device .heading>button{min-height:32px;padding:6px}.touch-device #play-shell{grid-template-columns:152px minmax(0,1fr) 152px;gap:5px;align-items:center}.touch-device #stage,.touch-device #play-shell:fullscreen #stage{grid-column:2;grid-row:1;height:calc(100dvh - 101px);width:auto;max-width:100%;justify-self:center}.touch-device .monkey{grid-column:1;grid-row:1}.touch-device .bacon{grid-column:3;grid-row:1}.touch-device .toolbar{grid-column:1/-1;padding:0;gap:5px}.touch-device #play-shell:fullscreen #stage{height:calc(100dvh - 67px)}}
@media(max-width:360px){.touch-device main{padding:10px 6px}.touch-device #play-shell{gap:6px}.touch-device .heading h1{font-size:23px}.dpad{grid-template-columns:repeat(3,44px);gap:3px}.touch-pad .weapon{width:138px}}