@charset "UTF-8";
:root{color-scheme:dark;--ink:#102431;--deep:#0b1b26;--paper:#efe7d4;--muted:#91a6ad;--mint:#bce6c7;--blue:#6dc6ef;--coral:#ef8b78;--line:#ffffff18;--sans:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--mono:ui-monospace,SFMono-Regular,Consolas,monospace}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--ink);color:var(--paper);font-family:var(--sans);-webkit-tap-highlight-color:transparent}body{overscroll-behavior:none}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default;opacity:.48}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--blue);outline-offset:4px}button{color:inherit}a{color:inherit}svg{width:24px;height:24px;flex:none}.svg-library{position:absolute;width:0;height:0;overflow:hidden}[hidden]{display:none!important}.view{min-height:100dvh}.blue{color:var(--blue)}.coral{color:var(--coral)}.muted{color:var(--muted);line-height:1.6}.small-text{font-size:12px;line-height:1.6}.eyebrow{font:600 10px/1.5 var(--mono);letter-spacing:1.8px;color:var(--mint);display:flex;align-items:center;gap:9px}.status-dot{width:6px;height:6px;background:var(--mint);border-radius:50%;box-shadow:0 0 0 4px #bce6c710}.text-button{border:0;padding:10px 0;background:none;font-size:13px;font-weight:600;line-height:1.3}.icon-button{width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--paper);padding:0;flex:none}.icon-button svg{width:19px;height:19px}.sound-toggle.is-muted{color:#71878e;position:relative}.sound-toggle.is-muted:after{content:"";position:absolute;inset:auto;width:24px;height:1px;background:currentColor;transform:rotate(-45deg)}.button{min-height:52px;display:flex;align-items:center;justify-content:center;gap:12px;border:1px solid transparent;border-radius:11px;padding:13px 20px;font-size:14px;font-weight:700;text-decoration:none;transition:transform .16s,background .16s;width:100%;touch-action:manipulation}.button:active:not(:disabled){transform:translateY(2px)}.button.primary{color:var(--ink);background:var(--mint)}.button.primary:hover:not(:disabled){background:#d0efd7}.button.secondary{background:#ffffff05;border-color:#ffffff29}.button.secondary:hover:not(:disabled){background:#ffffff0d}.button svg{width:22px;height:22px}.button .end-icon{margin-left:auto;width:18px}.button.small{min-height:42px;padding:10px 15px;font-size:12px}
.home-view{max-width:1440px;margin:auto;padding:0 7%}.home-nav{display:flex;justify-content:space-between;align-items:center;height:106px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-size:21px;font-weight:850;letter-spacing:-.6px}.brand svg{width:27px;height:27px;color:var(--mint);transform:rotate(18deg)}.brand-dot{color:var(--mint)}.nav-actions{display:flex;align-items:center;gap:30px}.nav-actions .text-button{font-size:12px;color:#bdcbd0}.home-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:7%;padding:64px 0 58px;align-items:center}.home-copy .eyebrow{margin:0 0 22px}h1{font-size:clamp(68px,7.5vw,108px);letter-spacing:-6px;line-height:.86;margin:0;font-weight:950}h1>span{color:var(--mint)}.title-dot{color:var(--coral)}.home-tagline{font-size:29px;font-weight:650;letter-spacing:-.9px;line-height:1.13;margin:27px 0 12px}.home-description{font-size:13px;line-height:1.65;color:var(--muted);margin:0 0 24px}.name-field{max-width:350px;margin-bottom:12px}.name-field label,form>label{display:block;font:600 9px var(--mono);letter-spacing:1.5px;color:#a9bdc1;margin-bottom:9px}.name-field input{width:100%;background:#ffffff05;border:1px solid #ffffff20;padding:13px 14px;border-radius:8px;font-size:16px;color:var(--paper);height:46px}.name-field input::placeholder{color:#6f8892}.home-actions{max-width:350px;display:flex;flex-direction:column;gap:9px}.solo-link{color:#a7bcc2;font-size:12px;padding:13px}.solo-link span{margin-left:10px}.home-error{font-size:13px;color:var(--coral);margin:8px 0;max-width:350px}.hero-column{padding-top:24px;position:relative}.board-heading{display:flex;justify-content:space-between;align-items:center;padding:0 6px 19px;font:600 9px var(--mono);letter-spacing:2px;color:#8ba1a9}.tiny-cross{font-size:27px;line-height:12px;color:var(--coral)}.hero-board{position:relative;aspect-ratio:840/665;border-radius:10px;background:var(--paper);box-shadow:0 26px 70px #0004;transform:rotate(-4deg);isolation:isolate;padding:8px}.hero-board canvas{width:100%;height:100%;display:block;border-radius:7px}.hero-sticker{position:absolute;bottom:-24px;right:14px;background:var(--coral);color:var(--ink);transform:rotate(8deg);padding:15px 20px;border-radius:2px;box-shadow:0 8px 18px #0003}.hero-sticker span{display:block;font:500 8px var(--mono);letter-spacing:2px}.hero-sticker strong{display:block;font-size:16px;letter-spacing:-.5px;margin-top:4px}.hero-caption{display:flex;align-items:center;gap:11px;margin:47px 0 0;padding-left:7px}.caption-line{width:27px;height:1px;background:#6a8189}.hero-caption p{font-size:11px;color:#8ba1a9;line-height:1.65;margin:0 auto 0 0}.hero-caption svg{color:var(--blue);width:25px;height:25px;transform:rotate(20deg)}.hero-caption svg.coral{color:var(--coral);transform:rotate(-20deg);margin-right:22px}.home-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding:21px 0 25px;color:#738f99;font:500 8px var(--mono);letter-spacing:1px}.home-footer .text-button{font:inherit}
.simple-header{height:88px;padding:0 6%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.simple-header .eyebrow{font-size:9px}.lobby-content{max-width:540px;margin:auto;text-align:center;padding:52px 24px 40px}.lobby-content>.eyebrow{justify-content:center}.lobby-content h2{font-size:46px;line-height:1.06;letter-spacing:-2px;margin:17px 0}.lobby-content h2 span{color:var(--mint)}.lobby-content>.muted{font-size:13px;margin:17px 0 25px}.room-code-box{border:1px dashed #a3b6aa55;border-radius:15px;background:#ffffff04;padding:18px}.room-code-box>span{display:block;font:500 8px var(--mono);letter-spacing:2px;color:var(--muted)}.room-code-box strong{display:block;font:600 32px var(--mono);letter-spacing:6px;margin:13px 0 15px;color:var(--mint)}.room-code-box .button{width:auto;margin:auto}.players-row{display:grid;grid-template-columns:1fr 30px 1fr;align-items:center;margin:28px 0}.player-card{display:flex;flex-direction:column;align-items:center;gap:7px}.player-card svg{width:48px;height:48px;margin-bottom:5px}.player-card strong{color:var(--paper);font-size:14px;max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player-card>span{font:600 8px var(--mono);letter-spacing:1px}.player-card.waiting svg{opacity:.28}.player-card.waiting strong,.player-card.waiting>span{color:var(--muted)}.team-plus{font-size:22px;color:#526f7c}.lobby-note{font-size:11px;line-height:1.7;color:#718d98;margin:23px 0 0}.connection-text{font-size:11px;line-height:1.5;color:var(--muted);min-height:17px}
.game-view{height:100dvh;min-height:0;display:flex;flex-direction:column;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none;background:var(--deep)}.game-topbar{height:65px;flex:none;display:flex;align-items:center;gap:18px;padding:10px 22px;border-bottom:1px solid var(--line)}.game-topbar .icon-button{width:34px;height:34px}.mission-heading{display:flex;flex-direction:column;gap:3px}.mission-heading>span{font:500 7px var(--mono);letter-spacing:1.6px;color:var(--muted)}.mission-heading>strong{font-size:13px;letter-spacing:.4px;white-space:nowrap}.mission-heading b{color:var(--mint);font-weight:800}.mission-heading em{font:500 10px var(--mono);color:#688590;font-style:normal;margin-left:4px}.scores{display:flex;align-items:center;gap:20px;margin-left:auto}.scores>span{display:flex;align-items:center;gap:6px}.scores svg{width:23px;height:23px}.scores b{font:600 14px var(--mono)}#lives-label{font:600 11px var(--mono);color:var(--coral)}.connection-pill{display:flex;align-items:center;gap:5px;border:1px solid #ffffff16;border-radius:50px;padding:6px 8px;white-space:nowrap}.connection-pill i{width:4px;height:4px;border-radius:50%;background:var(--mint)}.connection-pill span{font:500 7px var(--mono);letter-spacing:.5px}.connection-pill.unstable{color:#f1c981}.connection-pill.unstable i{background:#f1c981}.game-body{display:grid;grid-template-columns:140px minmax(0,1fr) 164px;gap:12px;min-height:0;flex:1;padding:14px 20px 0;max-width:1200px;width:100%;margin:auto;align-items:center}.arena-column{height:100%;min-height:0;display:flex;flex-direction:column;gap:6px}.arena-wrap{position:relative;min-height:0;flex:1;overflow:hidden;border-radius:8px}.arena-wrap canvas{display:block;width:100%;height:100%;touch-action:none}.arena-bottom{height:16px;flex:none;display:flex;align-items:center;justify-content:space-between;font:500 8px var(--mono);letter-spacing:.4px;color:#829aa4}.control-column{display:flex;flex-direction:column;align-items:center;gap:15px}.control-label{font:600 8px var(--mono);letter-spacing:1.1px;text-align:center;color:#8da4ad;line-height:1.6}.control-hint{font:500 7px var(--mono);letter-spacing:1px;color:#4f6e7a}.joystick{width:112px;height:112px;border-radius:50%;position:relative;background:radial-gradient(circle,#1d3543,#122b3a);border:1px solid #ffffff14;touch-action:none;box-shadow:inset 0 2px 7px #0003;flex:none}.joystick:before,.joystick:after{content:"";position:absolute;background:#ffffff0b}.joystick:before{width:1px;height:100%;left:50%}.joystick:after{height:1px;width:100%;top:50%}.joystick-knob{position:absolute;width:54px;height:54px;left:calc(50% - 27px);top:calc(50% - 27px);display:grid;place-items:center;border-radius:50%;background:#294758;border:1px solid #476b7d;box-shadow:0 5px 12px #0005,inset 0 1px 0 #ffffff1b;z-index:1;color:var(--blue);will-change:transform}.joystick-knob>span{font-size:27px;line-height:1}.aim-joystick .joystick-knob{color:var(--coral);background:#473f41;border-color:#79574d}.action-buttons{display:flex;gap:7px;width:100%}.action-buttons button{border:1px solid #ffffff1e;background:#ffffff05;border-radius:12px;height:60px;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;touch-action:none;padding:7px}.action-buttons button:active{background:#ffffff15}.action-buttons svg{width:19px;height:19px}.action-buttons span{font:600 7px var(--mono);letter-spacing:.7px}.fire-button{color:var(--coral)}.mine-button{color:#eac780}.mine-button b{color:var(--paper);font-weight:400}.game-tip{height:25px;flex:none;text-align:center;font-size:9px;color:#587783;line-height:1.5;margin:0;padding:4px 14px 7px}.spectator-note{position:absolute;bottom:9%;left:50%;transform:translateX(-50%);padding:8px 12px;background:#102431e8;border:1px solid #ffffff22;border-radius:8px;font-size:11px;white-space:nowrap}.game-overlay{position:absolute;inset:0;display:grid;place-items:center;padding:20px;background:#0818247d;backdrop-filter:blur(3px);border-radius:8px;z-index:5}.overlay-card{text-align:center;background:var(--ink);border:1px solid #ffffff22;border-radius:18px;padding:25px 26px 20px;max-width:350px;width:100%;box-shadow:0 15px 50px #0004}.overlay-card .eyebrow{justify-content:center;font-size:8px}.overlay-card h2{font-size:33px;line-height:1.05;letter-spacing:-1.2px;margin:12px 0}.overlay-card>p:not(.eyebrow){font-size:12px;line-height:1.6;color:var(--muted);margin:12px 0 18px}.overlay-card .button{min-height:43px;font-size:12px}.overlay-card>.text-button{margin-top:6px;font-size:11px;color:#8ba5ae}
.modal{position:fixed;background:var(--ink);color:var(--paper);border:1px solid #ffffff25;border-radius:20px;box-shadow:0 20px 100px #0008;padding:35px;max-width:min(440px,calc(100vw - 28px));max-height:calc(100dvh - 30px);width:100%;overflow:auto;overscroll-behavior:contain}.modal::backdrop{background:#04121ce0;backdrop-filter:blur(6px)}.modal-close{position:absolute;right:15px;top:15px;width:30px;height:30px}.modal-close svg{width:16px;height:16px}.modal h2{font-size:38px;letter-spacing:-1.8px;line-height:1.05;margin:20px 0}.modal p{font-size:13px;line-height:1.7}.modal>.eyebrow,.modal form>.eyebrow{font-size:8px;max-width:calc(100% - 18px)}.modal .button{margin-top:12px}.modal>.text-button{display:block;margin:14px auto 0;color:var(--muted)}.wide-modal{max-width:min(620px,calc(100vw - 28px))}.code-input{width:100%;height:64px;border:1px solid #bce6c755;background:#bce6c709;border-radius:9px;color:var(--mint);font:600 27px var(--mono);text-align:center;letter-spacing:3px;text-transform:uppercase;margin:2px 0}.code-input::placeholder{color:#4c7368;font-size:25px}.form-error{color:var(--coral);min-height:20px;font-size:12px!important}.mission-picker{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:25px 0}.mission-picker button{background:#ffffff05;border:1px solid var(--line);border-radius:9px;min-height:55px;font:600 19px var(--mono);color:var(--mint)}.mission-picker button:hover{background:#bce6c719;border-color:#bce6c770}.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 25px;margin-top:27px}.help-number{font:500 11px var(--mono);color:var(--coral)}.help-grid h3{font-size:15px;margin:8px 0}.help-grid p{font-size:12px;color:var(--muted);margin:0;line-height:1.65}.help-note{padding:17px;background:#bce6c70a;border:1px solid #bce6c720;border-radius:10px;margin:25px 0 14px;font-size:12px;line-height:1.7;color:#a9bcbf}.help-note strong{color:var(--mint)}.toast{position:fixed;z-index:100;left:50%;bottom:max(25px,env(safe-area-inset-bottom));transform:translateX(-50%);padding:13px 20px;background:var(--paper);color:var(--ink);box-shadow:0 5px 30px #0005;border-radius:12px;font-size:13px;max-width:90vw;text-align:center}
@media(min-width:1400px){.home-grid{padding-top:80px;padding-bottom:80px}.hero-column{padding-top:35px}.hero-board{max-height:520px}}
@media(max-width:750px){.home-view{padding:0 7%}.home-nav{height:76px}.brand{font-size:19px}.nav-actions{gap:15px}.nav-actions .text-button{font-size:11px}.nav-actions .icon-button{width:35px;height:35px}.home-grid{grid-template-columns:1fr;gap:27px;padding-top:35px;padding-bottom:35px}.home-copy .eyebrow{font-size:8px;letter-spacing:1.4px;margin-bottom:21px}h1{font-size:83px;letter-spacing:-4.5px}.home-tagline{font-size:25px;margin:22px 0 10px}.home-tagline br{display:none}.home-description{font-size:12px;margin-bottom:22px}.home-actions,.name-field{max-width:none}.hero-column{padding:0 15px 8px;max-width:480px;width:100%;margin:auto}.board-heading{padding-bottom:15px;font-size:8px}.hero-sticker{padding:12px 16px}.hero-sticker strong{font-size:14px}.hero-caption{margin-top:38px}.home-footer{flex-wrap:wrap;gap:12px;font-size:7px;padding-top:18px}.home-footer>span:nth-child(2){order:3;width:100%;font-size:8px}.home-footer .text-button{margin-left:auto}.lobby-content{padding-top:27px;max-width:440px}.lobby-content h2{font-size:39px}.simple-header{height:67px}.simple-header .eyebrow{font-size:7px;letter-spacing:1px}.simple-header .icon-button{width:33px;height:33px}.room-code-box strong{font-size:28px;letter-spacing:4px}.lobby-content>.muted{font-size:12px}.players-row{margin:22px 0}.lobby-note{font-size:10px}.modal{padding:29px 25px}.modal h2{font-size:33px}.help-grid{gap:20px 16px}.help-grid h3{font-size:13px}.help-grid p{font-size:11px}.mission-picker{gap:6px}.mission-picker button{min-height:47px;font-size:16px}}
@media(orientation:portrait){.game-topbar{height:65px;padding:8px 12px;gap:10px}.game-topbar>.sound-toggle{display:none}.scores{gap:10px}.scores svg{width:18px;height:18px}.scores b{font-size:12px}.connection-pill{padding:5px 6px;max-width:65px}.connection-pill span{font-size:6px;overflow:hidden;text-overflow:ellipsis}.game-body{grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr) 170px;padding:15px 12px 0;gap:15px 25px;align-items:center;max-width:530px}.arena-column{grid-column:1/3;grid-row:1;height:100%}.move-control{grid-column:1;grid-row:2;align-self:center}.aim-control{grid-column:2;grid-row:2;gap:8px;align-self:start}.joystick{width:100px;height:100px}.aim-control .joystick{width:90px;height:90px}.aim-control .control-label{font-size:6px;letter-spacing:.8px;white-space:nowrap}.control-label{font-size:8px}.action-buttons{width:145px}.action-buttons button{height:43px;flex-direction:row;gap:5px;border-radius:10px;padding:5px}.action-buttons svg{width:15px;height:15px}.action-buttons span{font-size:6px}.move-control .control-hint{display:none}.game-tip{font-size:8px;height:30px;padding:6px 12px}.arena-bottom{font-size:7px}.overlay-card{padding:21px 20px 15px;max-width:290px}.overlay-card h2{font-size:28px}.overlay-card>p:not(.eyebrow){font-size:11px;margin:9px 0 14px}.game-overlay{padding:12px}.overlay-card .eyebrow{font-size:7px}.overlay-card .button{min-height:40px}.mission-heading>strong{font-size:11px}.mission-heading>span{font-size:6px}.game-topbar .icon-button{width:30px;height:30px}#lives-label{font-size:9px}}
@media(orientation:landscape) and (max-height:550px){.game-topbar{height:46px;padding:4px 15px;gap:14px}.game-topbar .icon-button{width:29px;height:29px}.game-topbar .icon-button svg{width:15px;height:15px}.mission-heading{gap:1px}.mission-heading>span{font-size:6px}.mission-heading>strong{font-size:11px}.scores{gap:16px}.scores svg{width:19px;height:19px}.scores b{font-size:12px}.game-body{grid-template-columns:112px minmax(0,1fr) 133px;gap:10px;padding:7px 14px 0}.joystick{width:91px;height:91px}.joystick-knob{width:45px;height:45px;left:calc(50% - 22.5px);top:calc(50% - 22.5px)}.joystick-knob>span{font-size:24px}.control-column{gap:10px}.control-label{font-size:6px;letter-spacing:.6px}.control-hint{font-size:6px}.aim-control .control-label{max-width:123px}.action-buttons button{height:43px;gap:3px}.action-buttons svg{width:16px;height:16px}.action-buttons span{font-size:6px}.arena-bottom{height:12px;font-size:6px}.arena-column{gap:3px}.game-tip{height:18px;padding:3px 10px 4px;font-size:7px}.overlay-card{max-width:300px;padding:13px 19px 10px;border-radius:12px}.overlay-card h2{font-size:25px;margin:7px 0}.overlay-card>.eyebrow{font-size:7px;margin:3px 0}.overlay-card>p:not(.eyebrow){font-size:10px;line-height:1.4;margin:8px 0 11px}.overlay-card .button{min-height:35px;padding:8px 13px;font-size:10px}.overlay-card>.text-button{font-size:9px;padding:7px;margin:2px 0 0}.game-overlay{padding:10px}.spectator-note{font-size:9px;padding:5px 9px}.home-grid{padding-top:30px}.lobby-content{padding-top:22px}.lobby-content h2{font-size:34px}.modal{padding:24px 30px}.modal h2{font-size:29px;margin:12px 0}.modal p{font-size:12px}.modal .button{min-height:43px}.help-grid{margin-top:17px}.home-nav{height:68px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media(orientation:portrait){.game-body{grid-template-rows:auto 170px;align-content:center;gap:26px 25px}.arena-column{height:auto}.arena-wrap{flex:none;aspect-ratio:840/665;width:100%;height:auto}.arena-wrap canvas{position:absolute;inset:0;width:100%;height:100%}.game-overlay{padding:10px}.overlay-card{padding:15px 18px 11px}.overlay-card h2{font-size:26px;margin:8px 0}.overlay-card>p:not(.eyebrow){margin:8px 0 12px;font-size:11px}.overlay-card .eyebrow{margin:4px 0}}

/* The playing surface owns all multitouch gestures; menus retain their scroll area. */
html.is-playing,body.is-playing{position:fixed;inset:0;width:100%;height:100%;min-height:0;overflow:hidden;overscroll-behavior:none;touch-action:none;-webkit-text-size-adjust:100%}
body.is-playing .game-view{position:absolute;inset:0;width:100%;height:100%;min-height:0;-webkit-touch-callout:none}
body.is-playing .modal{touch-action:pan-y}

/* The primary action has its own generous, stationary touch area. */
.action-buttons{display:grid;grid-template-columns:minmax(96px,1fr) 52px;gap:10px;align-items:center;max-width:180px}
.action-buttons button{position:relative;min-width:0;flex:none;padding:8px;flex-direction:column}
.action-buttons button>*{pointer-events:none}
.action-buttons .fire-button{height:76px;border:2px solid #ef8b7899;background:#ef8b7814;color:#ffb59e;border-radius:18px;box-shadow:inset 0 -4px 0 #ef8b7814;gap:5px}
.action-buttons .fire-button svg{width:24px;height:24px}
.action-buttons .fire-button span{font:800 12px var(--sans);letter-spacing:1px;line-height:1.2}
.action-buttons .fire-button small{display:block;font:500 6px var(--mono);letter-spacing:.15px;margin-top:4px;white-space:nowrap;color:#d59887}
.action-buttons .mine-button{height:52px;border-radius:13px;gap:5px;background:#eac78008}
.action-buttons .mine-button svg{width:19px;height:19px}
.action-buttons .mine-button span{font-size:7px;white-space:nowrap}
.action-buttons .fire-button.is-active,.action-buttons .fire-button.press-feedback{background:#ef8b7842;border-color:#ffc9b7;box-shadow:0 0 0 4px #ef8b781a,inset 0 0 14px #ffc4a522}
.action-buttons .mine-button.is-active,.action-buttons .mine-button.press-feedback{background:#eac78032;border-color:#ffe0a0;box-shadow:0 0 0 3px #eac78015}
.audio-settings{border:1px solid #ffffff20;border-radius:13px;margin:22px 0 18px;padding:12px 14px 4px;min-width:0}
.audio-settings legend{font:600 8px var(--mono);letter-spacing:1.5px;color:var(--mint);padding:0 7px}
.audio-options{display:flex;align-items:center;justify-content:space-between;gap:12px}
.audio-button{border:0;border-radius:9px;background:#bce6c70d;display:flex;align-items:center;gap:8px;padding:10px 8px;min-height:44px;font-size:12px;white-space:nowrap}
.audio-button svg{width:18px;height:18px}
.audio-button.sound-toggle.is-muted:after{content:none}
.music-option{display:flex;align-items:center;gap:7px;min-height:44px;font-size:11px;cursor:pointer}
.music-option input{width:19px;height:19px;accent-color:var(--mint);margin:0;flex:none}
.volume-label{display:flex;align-items:center;justify-content:space-between;margin-top:10px;font-size:11px;color:var(--muted)}
.volume-label output{font:500 10px var(--mono);color:var(--mint)}
#sound-volume{display:block;width:100%;height:38px;margin:0;accent-color:var(--mint);touch-action:pan-x}
@media(orientation:portrait){
  .game-body{grid-template-columns:minmax(100px,1fr) minmax(168px,1fr);grid-template-rows:minmax(0,1fr) 204px;gap:18px 16px;align-content:stretch;padding-top:12px}
  .arena-column{height:100%;min-height:0}
  .arena-wrap{height:auto;aspect-ratio:auto;flex:1;min-height:0}
  .aim-control{width:100%;gap:10px;align-self:center}
  .aim-control .control-label{font-size:8px;letter-spacing:1.2px}
  .aim-control .joystick{width:90px;height:90px}
  .action-buttons{width:100%;max-width:180px}
  .action-buttons .fire-button{height:76px}
  .move-control{gap:12px}
  .game-tip{height:28px}
}
@media(orientation:portrait) and (max-height:700px){
  .game-body{grid-template-rows:minmax(0,1fr) 184px;gap:10px 12px;padding-top:5px}
  .aim-control{gap:7px}
  .aim-control .joystick{width:80px;height:80px}
  .action-buttons .fire-button{height:68px;padding-top:4px;padding-bottom:4px}
  .game-topbar{height:56px}
  .game-tip{height:24px;font-size:7px}
}
@media(orientation:landscape) and (max-height:550px){
  .game-body{grid-template-columns:106px minmax(0,1fr) 168px;gap:10px;padding-left:12px;padding-right:12px}
  .action-buttons{width:100%}
  .action-buttons .fire-button{height:66px;border-radius:15px;padding-top:5px;padding-bottom:5px}
  .action-buttons .fire-button svg{width:21px;height:21px}
  .action-buttons .fire-button span{font-size:11px}
  .aim-control{gap:9px}
  .aim-control .joystick{width:87px;height:87px}
}

/* A miniature battlefield on a warm wooden board, with a tactile console. */
body{background:radial-gradient(ellipse at 77% 31%,#29463e66,transparent 55%),var(--ink)}
.home-nav{border-bottom-color:#ddedd91a}
.brand svg{filter:drop-shadow(0 2px 0 #020c1080)}
h1{text-shadow:0 3px 0 #07171e}
h1>span{color:#c9edca;text-shadow:0 4px 0 #72948644}
.home-copy .eyebrow{color:#c9e3ae}
.home-tagline{color:#faf0dc}
.home-description{color:#a1b6b8}
.name-field input{background:#07191f77;border-color:#c6ddda24;box-shadow:inset 0 2px 4px #020c112b}
.name-field input:focus{border-color:#bce6c780}
.button.primary{background:linear-gradient(180deg,#d5efc7,#b7dba9);border-color:#e2f1d5;box-shadow:0 4px 0 #719878,0 7px 16px #0002,inset 0 1px 0 #fff8}
.button.primary:hover:not(:disabled){background:linear-gradient(180deg,#e4f7d5,#c9e9ba)}
.button.primary:active:not(:disabled){box-shadow:0 2px 0 #719878,0 3px 8px #0002,inset 0 1px 0 #fff8}
.button.secondary{background:linear-gradient(180deg,#ffffff09,#ffffff03);border-color:#c3d2cb33;box-shadow:inset 0 1px 0 #ffffff0b}
.home-actions{gap:13px}
.home-actions .solo-link{margin-top:2px}
.hero-column:before{content:"";position:absolute;inset:5% -10% 4%;border-radius:50%;background:radial-gradient(ellipse,#bdd4a813,transparent 66%);pointer-events:none}
.board-heading{color:#a9bdb5}
.hero-board{padding:10px;border-radius:13px;background:linear-gradient(135deg,#f1d0a0,#b48051 56%,#e3b881);border:1px solid #f4d4a4;box-shadow:0 7px 0 #715034,0 9px 0 #2f3226,0 28px 48px #0006,0 3px 0 #ffebca inset;transform:rotate(-3deg)}
.hero-board:after{content:"";position:absolute;inset:0;border-radius:12px;pointer-events:none;background:radial-gradient(circle at 5px 5px,#614b3a 0 1px,#e4c697 1.4px 2px,transparent 2.4px),radial-gradient(circle at calc(100% - 5px) 5px,#614b3a 0 1px,#e4c697 1.4px 2px,transparent 2.4px),radial-gradient(circle at 5px calc(100% - 5px),#614b3a 0 1px,#e4c697 1.4px 2px,transparent 2.4px),radial-gradient(circle at calc(100% - 5px) calc(100% - 5px),#614b3a 0 1px,#e4c697 1.4px 2px,transparent 2.4px)}
.hero-board canvas{border-radius:5px;box-shadow:0 0 0 1px #71503466}
.hero-sticker{background:#f29a79;color:#332d29;border:1px solid #ffbe98;box-shadow:0 3px 0 #b0674a,0 10px 18px #0004;transform:rotate(6deg);border-radius:4px}
.hero-caption p{color:#a3b8b5}
.home-footer{border-top-color:#e1efce1a}
.lobby-view{background:radial-gradient(ellipse at 50% 40%,#2a44354a,transparent 70%)}
.room-code-box{border-style:solid;border-color:#bddbad38;background:linear-gradient(145deg,#cbe2b510,#14252b77);box-shadow:inset 0 1px 0 #ddedca16,0 12px 30px #0002}
.room-code-box strong{text-shadow:0 3px 0 #061920;letter-spacing:5px}
.player-card{padding:19px 6px 16px;border:1px solid #83d1f32b;border-radius:16px;background:radial-gradient(ellipse at 50% 20%,#61b4dc1f,transparent 75%),#0b1c232b;box-shadow:inset 0 1px 0 #d4f2ff13}
.player-card.coral{border-color:#ef9a762b;background:radial-gradient(ellipse at 50% 20%,#ef8b781c,transparent 75%),#0b1c232b}
.player-card svg{filter:drop-shadow(0 5px 0 #020c143b);transform:rotate(-12deg)}
.player-card.coral svg{transform:rotate(12deg)}
.player-card.waiting{border-style:dashed;box-shadow:none}
.players-row{grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr)}
.player-card{min-width:0}
.player-card strong{max-width:100%}
.team-plus{color:#b2c7bb}
.game-view{background:radial-gradient(ellipse at 50% 12%,#25403f66,transparent 62%),var(--deep)}
.game-topbar{background:linear-gradient(180deg,#233740b0,#11262c85);border-bottom-color:#c5d5c728;box-shadow:0 3px 12px #0002}
.game-topbar .icon-button{background:linear-gradient(145deg,#304751,#142a35);box-shadow:inset 0 1px 0 #fff2,0 2px 4px #0004;border-color:#a2bac534}
.mission-heading b{color:#e2edb9}
.scores>span{filter:drop-shadow(0 1px 1px #0008)}
.connection-pill{background:#071b22a8;border-color:#a7c3b929;box-shadow:inset 0 1px 3px #0003}
.connection-pill i{box-shadow:0 0 5px #bce6c733}
.arena-wrap{border-radius:10px;box-shadow:0 0 0 1px #9eb4a62b,0 6px 18px #0003;background:#0c1b24}
.arena-bottom{color:#a9bdb4}
.arena-bottom>span:last-child{color:#e1c9a0}
.control-label{color:#b7c9c7;text-shadow:0 1px 1px #0006}
.move-control>.control-label{color:#91ccec}
.aim-control>.control-label{color:#efa68d}
.joystick{background:radial-gradient(circle at 50% 65%,#12202b 40%,#081820 68%,#263d45 70%,#132c35 78%);border:1px solid #b4caca2b;box-shadow:0 2px 0 #05131a,inset 0 2px 4px #ffffff0d,inset 0 -2px 3px #0008}
.joystick:before,.joystick:after{background:#b4d3df10;pointer-events:none}
.joystick:before{height:76%;top:12%}
.joystick:after{width:76%;left:12%}
.joystick-ticks{position:absolute;inset:8px;border-radius:50%;border:1px dashed #bcddeb26;pointer-events:none}
.joystick-knob{background:radial-gradient(circle at 35% 20%,#597b8c,#2e5266 48%,#1a384a 100%);border-color:#86aec678;box-shadow:0 5px 0 #0b202c,0 8px 11px #0007,inset 0 2px 1px #e1f5ff37,inset 0 -3px 0 #0d233a70;color:#d1efff}
.joystick-knob:after{content:"";position:absolute;inset:5px;border:1px solid #c2e3f126;border-radius:50%;pointer-events:none}
.aim-joystick .joystick-knob{background:radial-gradient(circle at 35% 20%,#ae7e6d,#815342 48%,#51392f 100%);border-color:#dba28b78;box-shadow:0 5px 0 #251f1b,0 8px 11px #0007,inset 0 2px 1px #ffead137,inset 0 -3px 0 #381f2070;color:#ffe2c8}
.control-hint{color:#718e98}
.action-buttons .fire-button{background:linear-gradient(170deg,#f6ac85,#e27c61 65%,#ce6650);color:#402b29;border-color:#ffc6a0;box-shadow:0 4px 0 #743e34,0 7px 12px #0005,inset 0 2px 0 #ffdfbc80,inset 0 -3px 0 #a4543b66}
.action-buttons .fire-button small{color:#633e33;font-weight:650}
.action-buttons .fire-button.is-active,.action-buttons .fire-button.press-feedback{background:linear-gradient(170deg,#ffdeaa,#ffb385 65%,#ed9b70);border-color:#ffe9bf;color:#482e25;box-shadow:0 4px 0 #743e34,0 0 0 3px #ffc69133,inset 0 2px 0 #fff0d480,inset 0 -3px 0 #c77a5566}
.action-buttons .mine-button{background:linear-gradient(155deg,#42483b,#293b36);border-color:#b6b18466;box-shadow:0 3px 0 #142221,0 5px 8px #0004,inset 0 1px 0 #eee4b82b;color:#f6dfa1}
.action-buttons .mine-button.is-active,.action-buttons .mine-button.press-feedback{background:linear-gradient(155deg,#72674a,#4d5039);border-color:#ffe6a9;box-shadow:0 3px 0 #142221,0 0 0 3px #f8d78722,inset 0 1px 0 #fff6d680}
.game-tip{color:#8aa29f}
.game-overlay{background:#101e296e;backdrop-filter:blur(2px)}
.overlay-card{background:radial-gradient(ellipse at 50% 0,#3d534255,transparent 65%),#152b32;border-color:#dcebc238;box-shadow:0 5px 0 #08192188,0 18px 35px #0006,inset 0 1px 0 #e7eedc18}
.game-overlay[data-kind="intro"]{background:#0c1b2438;backdrop-filter:none}
.game-overlay[data-kind="intro"] .overlay-card{max-width:216px;padding:17px 20px 15px;border-radius:22px;background:#102630e8;border-color:#ebdfba99;box-shadow:0 6px 0 #142c3380,0 18px 35px #0005,inset 0 0 0 4px #e9deb00d}
.game-overlay[data-kind="intro"] .overlay-card h2{font:900 76px/.95 var(--sans);letter-spacing:-4px;margin:10px 0;color:#f9e7bc;text-shadow:0 4px 0 #81664980}
.game-overlay[data-kind="intro"] .overlay-card>p:not(.eyebrow){color:#c4d5c8;margin:10px 0 1px;font-size:11px}
.game-overlay[data-kind="won"] .overlay-card{border-color:#c5e7a970;background:radial-gradient(ellipse at 50% 0,#78996155,transparent 70%),#162e31}
.game-overlay[data-kind="won"] .overlay-card h2{color:#e0f2ba}
.game-overlay[data-kind="lost"] .overlay-card h2{color:#f7b191}
.modal{background:radial-gradient(ellipse at 0 0,#344c3b66,transparent 70%),#142b32;border-color:#c9dec532;box-shadow:0 7px 0 #07191f77,0 20px 80px #0009,inset 0 1px 0 #dfecce16}
.modal-close{background:#ffffff07}
.mission-picker button{background:linear-gradient(145deg,#2b4241,#172e35);border-color:#b2c7aa2b;box-shadow:0 3px 0 #06191f,inset 0 1px 0 #e2efd416;color:#e0eabd}
.mission-picker button:hover{background:linear-gradient(145deg,#42604d,#244238);border-color:#cde7ad80}
.audio-settings{background:#081d242f;border-color:#c6d9b930}
@media(orientation:landscape) and (max-height:550px){
  .game-overlay[data-kind="intro"] .overlay-card{padding:12px 18px;max-width:210px}
  .game-overlay[data-kind="intro"] .overlay-card h2{font-size:58px;margin:5px 0}
  .game-overlay[data-kind="intro"] .overlay-card>p:not(.eyebrow){margin-top:6px;font-size:10px}
}
@media(max-width:750px){
  .home-grid{padding-top:30px}
  .hero-board{padding:8px}
  .home-actions{gap:13px}
  .player-card{padding:15px 5px 13px}
}

/* In landscape the arena owns the viewport; the controls float over its edges.
   The level keeps its original proportions and every wall remains visible. */
@media(orientation:landscape) and (max-height:550px){
  body.is-playing .game-view{
    height:100dvh;padding:0;isolation:isolate;
    /* Approximate half-width of the fitted 840 × 665 board, for thumb placement only. */
    --landscape-board-half:min(49vw,61.64dvh);
    --landscape-bottom:max(22px,calc(env(safe-area-inset-bottom) + 14px));
  }
  .game-body{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;margin:0;padding:0}
  .arena-column{position:absolute;inset:0;display:block;width:100%;height:100%}
  .arena-wrap{position:absolute;inset:0;width:100%;height:100%;border-radius:0;box-shadow:none}
  .arena-wrap canvas{position:absolute;inset:0;width:100%;height:100%}
  .arena-bottom,.game-tip{display:none}

  .game-topbar{
    position:absolute;z-index:4;top:max(8px,env(safe-area-inset-top));
    left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));
    height:44px;padding:0;gap:8px;border:0;background:none;box-shadow:none;
    pointer-events:none;text-shadow:0 1px 3px #07151ccc;
  }
  .game-topbar .icon-button{
    width:44px;height:44px;pointer-events:auto;background:#0c202965;
    border-color:#e1eee054;box-shadow:inset 0 1px 0 #ffffff12;
  }
  .game-topbar .icon-button svg{width:18px;height:18px}
  .mission-heading{padding:7px 10px;border:1px solid #e1eee026;border-radius:11px;background:#0c20295c;gap:2px}
  .mission-heading>span{font-size:6px;color:#c4d2cb;letter-spacing:1px}
  .mission-heading>strong{font-size:11px}
  .scores{gap:10px;padding:7px 9px;border-radius:11px;background:#0c20295c;filter:none}
  #lives-label{font-size:10px;padding:8px 9px;border-radius:11px;background:#0c20295c}
  .connection-pill{background:#0c20295c;border-color:#e1eee030;box-shadow:none;max-width:100px}
  .connection-pill span{overflow:hidden;text-overflow:ellipsis}

  .control-column{position:absolute;z-index:3;gap:0;pointer-events:none}
  .control-column>.control-label,.control-hint{display:none}
  .move-control{
    left:max(calc(env(safe-area-inset-left) + 16px),calc(50% - var(--landscape-board-half) - 48px));
    bottom:calc(var(--landscape-bottom) + 18px);width:112px;
  }
  .aim-control{
    right:max(calc(env(safe-area-inset-right) + 16px),calc(50% - var(--landscape-board-half) - 100px));
    bottom:var(--landscape-bottom);width:190px;gap:12px;
  }
  .joystick,.aim-control .joystick{
    width:112px;height:112px;pointer-events:auto;background:#132b3430;
    border:1.5px solid #e5f4eb70;box-shadow:0 2px 10px #07151c26,inset 0 0 0 5px #ffffff08;
  }
  .joystick:before,.joystick:after{background:#e0f4ee24}
  .joystick-ticks{inset:10px;border-color:#e5f4eb45}
  .joystick-knob{
    width:52px;height:52px;left:calc(50% - 26px);top:calc(50% - 26px);
    background:#38738b52;color:#e2f7ff;border:1.5px solid #c3eeffaa;
    box-shadow:0 2px 5px #07151c3b,inset 0 1px 0 #ffffff24;pointer-events:none;
  }
  .joystick-knob:after{border-color:#dff7ff30}
  .joystick-knob>span{font-size:25px;text-shadow:0 1px 3px #07151c99}
  .aim-joystick .joystick-knob{
    background:#ac765452;color:#fff0db;border-color:#ffe1c4aa;
    box-shadow:0 2px 5px #07151c3b,inset 0 1px 0 #ffffff24;
  }
  .joystick.is-active{background:#18374445;border-color:#e5f4ebb0}
  .joystick.is-active .joystick-knob{background:#397c967d;border-color:#ddf6ff}
  .aim-joystick.is-active .joystick-knob{background:#ac76547d;border-color:#fff0d5}
  .action-buttons{width:190px;max-width:none;grid-template-columns:minmax(0,1fr) 56px;gap:10px;pointer-events:none}
  .action-buttons button{pointer-events:auto}
  .action-buttons .fire-button{
    height:74px;border-radius:21px;padding:8px;gap:3px;background:#8b523d38;
    color:#fff1dd;border:2px solid #ffe4c3b8;box-shadow:0 2px 8px #07151c26,inset 0 1px 0 #ffffff20;
    text-shadow:0 1px 3px #34231b99;
  }
  .action-buttons .fire-button svg{width:24px;height:24px}
  .action-buttons .fire-button span{font-size:11px;letter-spacing:1.3px}
  .action-buttons .fire-button small{display:none}
  .action-buttons .fire-button.is-active,.action-buttons .fire-button.press-feedback{
    background:#db95655c;color:#fff5e6;border-color:#fff1d2;
    box-shadow:0 0 0 3px #ffe4c326,inset 0 1px 0 #fff3d638;
  }
  .action-buttons .mine-button{
    width:56px;height:56px;border-radius:17px;background:#665d3638;
    border:1.5px solid #ffe4ad99;box-shadow:0 2px 6px #07151c26;
    color:#fff1c8;text-shadow:0 1px 3px #342c1599;
  }
  .action-buttons .mine-button.is-active,.action-buttons .mine-button.press-feedback{
    background:#c4aa505c;border-color:#fff1c8;box-shadow:0 0 0 3px #ffe4ad26;
  }
  .action-buttons .mine-button svg{width:18px;height:18px}
  .action-buttons .mine-button span{font-size:7px}
  .game-overlay{
    z-index:8;border-radius:0;
    padding:max(10px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
  }
  .spectator-note{z-index:2;bottom:max(14px,env(safe-area-inset-bottom));background:#10243199}
}
@media(orientation:landscape) and (max-height:350px){
  .aim-control{gap:8px}
  .joystick,.aim-control .joystick{width:100px;height:100px}
  .action-buttons .fire-button{height:68px}
}

.tank-guide{margin:22px 0;border:1px solid #c8dfbd33;border-radius:13px;background:#081d242f}
.tank-guide summary{cursor:pointer;min-height:48px;padding:15px 17px;font-size:13px;font-weight:700;color:var(--mint);touch-action:manipulation}
.tank-guide[open] summary{border-bottom:1px solid #c8dfbd22}
.tank-guide .tank-guide-intro,.tank-guide .tank-guide-note{margin:14px 16px;font-size:11px;color:#a8c0bb;line-height:1.6}
.tank-guide-list{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 12px}
.tank-guide-card{min-width:0;padding:13px 12px;border:1px solid #e1ebc71c;border-radius:10px;background:#07182059}
.tank-guide-card header{display:flex;align-items:center;gap:8px}
.tank-guide-card header svg{width:24px;height:24px;color:var(--tank-color)}
.tank-guide-card h3{font-size:12px;color:var(--tank-color);margin:0;line-height:1.3}
.tank-guide-mission{display:block;font:500 7px/1.5 var(--mono);letter-spacing:.8px;color:#839d99;margin-top:7px}
.tank-guide-card p{font-size:11px;line-height:1.55;margin:9px 0 0;color:#d0dad0}
.tank-guide-card .tank-guide-limits{font:500 9px/1.7 var(--mono);color:#a7c5bd;margin-top:10px}
@media(max-width:500px){.tank-guide-list{grid-template-columns:1fr}}
.gamepad-status{font-size:12px;line-height:1.65;color:var(--muted);max-width:350px;margin:14px 0 0}
.gamepad-status.is-connected{color:#a9d5bf}
.controller-guide{margin:22px 0;border:1px solid rgba(198,221,218,.2);border-radius:12px;padding:0 16px;background:rgba(18,47,61,.45)}
.controller-guide summary{cursor:pointer;padding:15px 0;min-height:48px;font-size:15px;font-weight:750;color:#b8dfc9;line-height:1.45}
.controller-guide .gamepad-status{max-width:none;margin:0 0 12px}
.controller-pairing{padding-left:20px;color:var(--muted);font-size:13px;line-height:1.65;margin:10px 0 18px}
.controller-pairing li{padding:3px 0 5px 3px}
.controller-pairing strong{color:#efe8d7}
.controller-mapping{margin:16px 0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.controller-mapping>div{border-radius:8px;padding:10px 12px;background:rgba(0,0,0,.16)}
.controller-mapping dt{font-size:11px;color:var(--muted);margin-bottom:3px}
.controller-mapping dd{margin:0;font-size:13px;font-weight:700;color:#efe8d7}
@media(max-width:500px){.controller-mapping{grid-template-columns:1fr}.controller-mapping>div{display:flex;justify-content:space-between;gap:12px}.controller-mapping dt{margin:0}}