@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--ink:#eaf4ec;--green:#bded86}*{box-sizing:border-box}body{margin:0;background:#111b19;color:var(--ink);font-family:'DM Sans',sans-serif}header{height:96px;border-bottom:1px solid #ffffff15;display:flex;align-items:center;gap:30px;padding:0 5vw}.brand{font:700 25px 'Space Grotesk',sans-serif;letter-spacing:2px;color:var(--green);text-decoration:none}.brand{display:flex;align-items:center;gap:12px;flex-shrink:0}.brand-logo{width:56px;height:45px;display:block}.brand-name{display:block}.brand small{display:block;font:9px 'DM Sans',sans-serif;letter-spacing:1.5px;color:#a1bba7;margin-top:5px}.tag{margin-left:auto;font-size:11px;letter-spacing:2px;color:#9bb0a5}button{font:600 14px 'DM Sans';border:1px solid #ffffff25;border-radius:9px;padding:12px 20px;background:#1d2b26;color:var(--ink);cursor:pointer}button:hover{filter:brightness(1.2)}button:focus-visible{outline:3px solid #bded86;outline-offset:3px}main{max-width:1260px;margin:40px auto;display:grid;grid-template-columns:300px minmax(0,730px);gap:70px;padding:0 30px;justify-content:center}.intro{padding-top:30px}.eyebrow{font-size:10px;letter-spacing:2px;color:#a1bba7;font-weight:700}h1{font:600 clamp(48px,5vw,72px)/1.05 'Space Grotesk',sans-serif;letter-spacing:-4px;margin:23px 0}h1 em{color:var(--green);font-style:normal}p{color:#a3b6ac;font-size:15px;line-height:1.75}.stat{margin-top:35px;padding-top:25px;border-top:1px solid #ffffff18}.stat span{display:block;font-size:10px;letter-spacing:2px;color:#93a89b}.stat strong{display:block;font:500 46px 'Space Grotesk';margin:12px 0}.meter{height:5px;background:#263c30;border-radius:4px;overflow:hidden}.meter i{display:block;width:4.2%;height:100%;background:var(--green);transition:width .3s}.record{display:flex;justify-content:space-between;font-size:12px;margin-top:15px;color:#94a699}.record b{color:#dbe6dc}ol{padding:20px 0;list-style:none;border-bottom:1px solid #ffffff18}li{display:flex;gap:10px;align-items:center;font-size:13px;margin:14px 0}li b{margin-left:auto}li i{width:9px;height:9px;border-radius:50%}.hint{font-size:12px}.arena-top,.below{display:flex;justify-content:space-between;font-size:11px;gap:15px;color:#a0b2a7;padding:14px 0}.arena-top{letter-spacing:1px}.dot{display:inline-block;width:6px;height:6px;background:var(--green);border-radius:50%;margin-right:7px}.board-wrap{position:relative;border:1px solid #546e513f;border-radius:14px;overflow:hidden;box-shadow:0 20px 60px #0004}canvas{display:block;width:100%;aspect-ratio:1;background:#1a2923;touch-action:none}#overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;background:#112019d9;text-align:center;padding:20px;backdrop-filter:blur(5px)}#overlay h2{font:500 clamp(28px,4vw,46px)/1.1 'Space Grotesk';letter-spacing:-1.5px;margin:25px 0 10px}#overlay button{background:var(--green);color:#172b20;padding:17px 30px;border:0;margin:16px}#overlay small{color:#83978c;font-size:11px}#overlay[hidden]{display:none}.dpad{display:none;text-align:center}.dpad button{min-width:55px;margin:3px}footer{max-width:1200px;margin:25px auto;padding:20px 30px;border-top:1px solid #ffffff12;font-size:9px;letter-spacing:2px;color:#7b9385;display:flex;justify-content:space-between}footer span{letter-spacing:0}@media(max-width:850px){header{height:75px;padding:0 20px}.tag{display:none}header button{margin-left:auto}main{display:flex;flex-direction:column;gap:12px;margin:20px auto;padding:0 16px;max-width:650px}.intro{padding:0}.intro h1{font-size:35px;letter-spacing:-1px;margin:10px 0}.intro h1 br{display:none}.intro>p,.intro>.eyebrow,.hint,#ranking,.record{display:none}.stat{margin:0;padding:0;border:0;display:flex;align-items:center;gap:15px}.stat strong{font-size:30px}.meter{flex:1}.dpad{display:block}footer{display:none}.below{font-size:10px}}

#settings{width:min(340px,100%);border:1px solid #ffffff20;border-radius:10px;text-align:left;padding:12px 16px;margin:8px 0}#settings legend{font-size:11px;color:#bded86;padding:0 6px}#settings label{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11px;margin:8px 0}select{max-width:190px;min-width:155px;background:#213a2b;color:#eaf4ec;border:1px solid #ffffff30;border-radius:5px;padding:7px;font:12px 'DM Sans',sans-serif}#difficulty-help{font-size:11px;line-height:1.4;margin:10px 0 0}#overlay{overflow:auto}#overlay h2{font-size:34px;margin:12px 0 5px}#overlay p{font-size:12px;margin:6px 0}#overlay button{margin:8px;padding:12px 25px}#settings[hidden]{display:none}@media(max-width:850px){.board-wrap:has(#overlay:not([hidden])){min-height:570px}#overlay h2{font-size:27px}#overlay>.eyebrow{font-size:9px}#settings label{font-size:10px}#overlay{padding:12px}}

button[hidden],#death-note[hidden]{display:none}#death-note{padding:12px 15px;margin-top:12px;border:1px solid #ee947e55;border-radius:8px;color:#f5bba9;font-size:13px;line-height:1.5}#overlay #spectate{background:#213a2b;color:#bded86;border:1px solid #bded8666}

.ammo-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;color:#ffd991;font-size:12px}.ammo-bar button{border-color:#ffd99155;color:#ffd991}button:disabled{opacity:.4;cursor:default}
#announcements{position:absolute;top:12px;left:12px;right:12px;z-index:3;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:6px}.announcement{background:#101b19ef;border:1px solid #ffffff20;border-left:4px solid #bded86;border-radius:8px;padding:10px 16px;max-width:100%;font-size:14px;font-weight:600;box-shadow:0 4px 16px #0005;animation:announce-in .2s ease-out}@keyframes announce-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.announcement{animation:none}}

#settings input{min-width:0;width:155px;background:#213a2b;color:#eaf4ec;border:1px solid #ffffff30;border-radius:5px;padding:7px;font:12px 'DM Sans',sans-serif}#settings label[hidden],#second-ammo[hidden]{display:none}#controls-help{font-size:11px;line-height:1.4}#overlay{justify-content:flex-start}#overlay h2{flex-shrink:0}#ranking li{overflow-wrap:anywhere}#second-ammo{color:#ee947e}.announcement{overflow-wrap:anywhere}@media(max-width:850px){.board-wrap:has(#overlay:not([hidden])){min-height:740px}}
#controls-help{white-space:pre-line}


.intro h1{font-size:clamp(48px,4.7vw,62px);letter-spacing:-3px}@media(max-width:850px){header{height:auto;min-height:75px;flex-wrap:wrap;gap:10px;padding:12px 16px}.brand{font-size:20px;gap:8px}.brand-logo{width:40px;height:36px}.brand small{font-size:7px;letter-spacing:1px}header button{padding:10px 12px}.intro h1{font-size:35px;letter-spacing:-1px}.intro h1 br::after{content:' '}}


/* Mode selection and online rooms */
[hidden]{display:none!important}
body[data-view="home"] main>.intro,body[data-view="home"] main>.play,body[data-view="online"] main>.intro,body[data-view="online"] main>.play{display:none}
#launcher,#online-panel{grid-column:1/-1;min-width:0;width:100%}.welcome-panel{text-align:center;padding:28px 0}.welcome-panel h1{font-size:clamp(38px,5vw,66px);letter-spacing:-2px}.welcome-panel>p{max-width:600px;margin:20px auto}.mode-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:38px 0}.mode-cards button{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:18px;padding:28px;background:linear-gradient(140deg,#253a2d,#17261f);min-height:280px;border-color:#bded8630}.mode-cards button:last-child{background:linear-gradient(140deg,#34324b,#1b2630);border-color:#b2a1eb70}.mode-cards strong{font:600 22px 'Space Grotesk',sans-serif;letter-spacing:-.5px}.mode-cards span:not(.mode-icon){font-size:13px;color:#adbdaf;line-height:1.7}.mode-cards b{color:#bded86;font-size:12px;margin-top:auto}.mode-icon{font-size:32px}.muted{font-size:12px;color:#8fa69a;line-height:1.7}.online-heading{display:flex;align-items:center;justify-content:space-between;gap:15px}.online-heading h1{font-size:48px;letter-spacing:-2px;margin:12px 0 24px}.lobby-columns{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:24px 0}.panel-card{padding:25px;border:1px solid #ffffff20;border-radius:15px;background:#192923;min-width:0}.panel-card h2{font:500 24px 'Space Grotesk';margin:0 0 12px}.panel-card>p{font-size:13px}.panel-card label,.name-field{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:14px 0;font-size:13px}.panel-card input:not([type="checkbox"]),.name-field input{width:220px;max-width:65%;min-width:0;background:#213a2b;color:#eaf4ec;border:1px solid #ffffff30;border-radius:6px;padding:12px;font:14px 'DM Sans',sans-serif}.name-field{justify-content:flex-start;background:#192923;padding:16px 20px;border:1px solid #ffffff20;border-radius:12px}.name-field input{max-width:100%;width:280px}.panel-card select{max-width:60%;min-width:140px}.panel-card input[type="checkbox"],#settings input[type="checkbox"]{width:20px;min-width:20px;height:20px;accent-color:#bded86}.primary{background:#bded86;color:#172b20;border-color:transparent}.panel-card>.primary{margin-top:12px}.map-preview{height:150px;aspect-ratio:auto;width:100%;border:1px solid #ffffff15;border-radius:9px;margin-top:22px;touch-action:auto}.map-caption{margin-bottom:0}.room-banner{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px;background:#bded8610;border:1px solid #bded8640;border-radius:12px}.room-banner strong{display:block;font:600 clamp(21px,3vw,32px) 'Space Grotesk';color:#bded86;margin-top:8px;overflow-wrap:anywhere}#room-members{list-style:none;padding:0;margin:25px 0}#room-members li{padding:12px 0;border-bottom:1px solid #ffffff12;flex-wrap:wrap}#room-members li span{overflow-wrap:anywhere}#room-members li b{font-size:11px;font-weight:500;color:#bded86}.lobby-actions{display:flex;gap:10px;flex-wrap:wrap}#online-error{padding:14px 18px;border:1px solid #ee947e80;background:#392924;border-radius:9px;color:#ffc5ae}#countdown{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;background:#08130f44;pointer-events:none;text-align:center;padding:25px;z-index:4}#countdown strong{font:700 110px 'Space Grotesk';text-shadow:0 4px 25px #000}#countdown small,#countdown span{background:#112019e8;padding:10px 15px;border-radius:8px;max-width:90%;font-size:13px}#countdown small{letter-spacing:3px}#online-result{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;background:#102019ed;padding:25px;text-align:center;overflow:auto}#online-result h2{font:600 clamp(25px,4vw,42px) 'Space Grotesk';margin:8px 0;overflow-wrap:anywhere}#online-result p{font-size:13px;margin:5px}#round-scores{max-height:160px;overflow:auto;width:100%;padding:5px}#network-notice{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:20;background:#42341a;border:1px solid #ffd99180;border-radius:10px;padding:14px 20px;max-width:calc(100% - 24px);width:600px;font-size:13px;box-shadow:0 8px 40px #0008}body[data-view="home"] header .tag{display:none}
@media(max-width:850px){.welcome-panel{padding:12px 0}.welcome-panel h1{font-size:40px;letter-spacing:-1.5px}.mode-cards{grid-template-columns:1fr;margin:25px 0;gap:12px}.mode-cards button{min-height:0;padding:22px;gap:12px;position:relative}.mode-icon{position:absolute;right:20px;top:18px;font-size:26px}.mode-cards strong{padding-right:55px;font-size:20px}.mode-cards span:not(.mode-icon){font-size:12px}.mode-cards b{margin-top:0}.lobby-columns{grid-template-columns:1fr;gap:16px}.panel-card{padding:20px}.online-heading{align-items:flex-start}.online-heading h1{font-size:35px}.online-heading .eyebrow{font-size:8px}.online-heading button{padding:10px;font-size:11px}.room-banner{flex-direction:column;align-items:flex-start}.name-field{flex-direction:column;align-items:stretch}.name-field input{width:100%}.panel-card label{font-size:12px}.panel-card select{min-width:125px}.board-wrap:has(#overlay:not([hidden])){min-height:900px}#online-result{padding:15px}.board-wrap:has(#online-result:not([hidden])){min-height:430px}}

/* A match occupies the visible viewport; menus keep normal page scrolling. */
.match-toolbar,.touch-bar,#view-note,#mini-map{display:none}
body.game-active{overflow:hidden;overscroll-behavior:none}
body.game-active>header,body.game-active>footer,body.game-active main>.intro{display:none}
body.game-active .play{position:fixed;inset:0;z-index:10;width:100%;height:var(--game-height,100dvh);background:#101b17;display:flex;flex-direction:column;align-items:center;gap:8px;padding:max(8px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));overflow:hidden}
body.game-active .play>.arena-top,body.game-active .play>.ammo-bar,body.game-active .play>.below,body.game-active .play>#death-note{display:none}
body.game-active .board-wrap{flex:none;min-height:0!important;max-width:100%;margin:auto;border-radius:10px;touch-action:none;overscroll-behavior:none}
body.game-active #board{width:100%;height:100%;aspect-ratio:auto;touch-action:none;user-select:none;-webkit-user-select:none;outline:none}
body.game-active .match-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;width:100%;flex-shrink:0}
#view-hud{font-size:13px;color:#bded86;overflow-wrap:anywhere;min-width:0;flex:1 1 180px;line-height:1.5}
.view-actions{display:flex;flex-wrap:wrap;gap:6px}.view-actions button{padding:9px 12px;font-size:12px;min-height:40px}
body.game-active .touch-bar{display:flex;justify-content:center;align-items:center;gap:20px;width:100%;flex-shrink:0;touch-action:none;user-select:none}
.touch-bar .dpad{margin:0}.touch-bar .dpad button{touch-action:none}
.touch-bar #fire{min-width:100px;min-height:44px;color:#ffd991;border-color:#ffd99180;touch-action:none}
.view-hint{font-size:11px;color:#9ab1a4}
body.game-active #mini-map{display:block;position:absolute;right:8px;bottom:8px;width:90px;height:90px;aspect-ratio:1;border:1px solid #ffffff70;border-radius:5px;background:#14241d;opacity:.86;pointer-events:none;z-index:2}
body.game-active #view-note{display:block;position:absolute;bottom:70px;left:15px;right:15px;z-index:12;padding:12px;background:#263c30;border:1px solid #bded86;border-radius:9px;font-size:13px;text-align:center}
body.game-active #overlay,body.game-active #online-result{min-height:0;touch-action:pan-y;overscroll-behavior:contain;overflow-y:auto}
body.game-active #online-result{justify-content:flex-start;padding-top:35px}
body.game-active #announcements{top:8px;left:8px;right:8px;max-height:35%;overflow:hidden}
body.game-active .announcement{font-size:12px;padding:7px 10px}
@media(hover:none) and (pointer:coarse){body.game-active .dpad{display:block}}
@media(max-width:600px){#view-hud{flex-basis:100%;font-size:12px}.view-actions{width:100%;justify-content:space-between}.view-actions button{padding:8px;font-size:11px;flex:1}.view-hint{display:none}.touch-bar{gap:12px}.touch-bar .dpad button{min-width:48px;padding:8px 14px;margin:2px;min-height:42px}body.game-active .play{padding-left:6px;padding-right:6px}body.game-active #countdown strong{font-size:80px}body.game-active #mini-map{width:74px;height:74px}}
@media(max-height:500px){.view-hint{display:none}#view-hud{flex:1 1 100px}.view-actions{width:auto}.touch-bar .dpad{display:flex!important;align-items:center}.touch-bar .dpad>div{display:flex}.touch-bar .dpad button{min-height:34px;min-width:40px;padding:5px 10px;margin:0 2px}.touch-bar #fire{min-height:34px}body.game-active .play{gap:4px;padding-top:4px;padding-bottom:4px}.view-actions button{min-height:34px;padding:6px 8px}}

.view-status{flex:1 1 180px;min-width:0}#view-detail{font-size:10px;color:#9ab1a4;line-height:1.5}.game-active .board-wrap{touch-action:auto!important}@media(max-width:600px){.view-status{flex-basis:100%}.view-actions{gap:4px}.view-actions button{padding:7px 5px;font-size:10px}}@media(max-height:500px){.view-status{flex:1 1 120px}}


/* Scores stay outside the board; scroll horizontally when the room has many players. */
#match-scores{display:none}body.game-active #match-scores{display:flex;gap:6px;flex:0 0 auto;width:100%;max-width:100%;overflow-x:auto;overflow-y:hidden;white-space:nowrap;touch-action:pan-x;overscroll-behavior:contain;padding:2px 0 4px;font-size:12px}.match-score{border-left:3px solid;padding:3px 8px;background:#ffffff08;border-radius:4px;flex:none}
#score-feedback{position:absolute;inset:0;transform:none;width:100%;height:100%;max-width:none;overflow:hidden;pointer-events:none;z-index:3;text-align:center}.score-pop{position:absolute;transform:translateX(-50%);margin:0;padding:2px 5px;border:0;border-radius:5px;background:#0a171bc9;box-shadow:none;font-size:11px;line-height:15px;font-weight:700;white-space:nowrap;animation:score-fade 2.2s ease-out both;text-shadow:0 1px 2px #000}@keyframes score-fade{0%{opacity:0}12%,75%{opacity:1}100%{opacity:0}}@media(prefers-reduced-motion:reduce){.score-pop{animation:none}}

#match-finish{flex:1 0 100%;display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;border:1px solid #bbed88;border-radius:10px;background:#274431;color:#ecffda;padding:8px 12px}#match-finish[hidden]{display:none}#match-finish strong{font-size:18px}#match-finish span{font-size:12px}#match-finish button{margin-left:auto}@media(max-height:500px){#match-finish{padding:4px 8px}#match-finish strong{font-size:14px}}