:root{color-scheme:dark;--bg:#080d1b;--p:#152238;--line:#344d68;--txt:#edf7ff;--dim:#9eb3cb;--cyan:#65e8e4;--red:#ff788e}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 25% 0%,#192942 0%,#080d1b 70%);color:var(--txt);font-family:system-ui,Segoe UI,sans-serif}.shell{max-width:1320px;margin:auto;padding:18px 25px}header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);gap:20px}h1{font-size:25px;letter-spacing:.02em}h1 span{color:var(--cyan)}.sub{font-size:12px;font-weight:700;letter-spacing:.13em;color:var(--dim)}h2{margin:0}.connect{max-width:550px;margin:11vh auto 15vh;padding:30px;background:var(--p);border:1px solid var(--line);border-radius:16px;box-shadow:0 20px 60px #0007}.connect p{color:var(--dim);line-height:1.6}.actions{display:flex;flex-direction:column;gap:13px}.join{display:flex;gap:10px}.join input{flex:1;width:140px}input{border-radius:8px;border:1px solid #51708d;background:#071427;color:white;font-size:16px;padding:12px;text-transform:uppercase}button{border:0;border-radius:8px;background:var(--cyan);color:#071d2b;padding:11px 17px;font-weight:900;cursor:pointer}button:disabled{background:#41566c;color:#a6b3bd;cursor:default}.status{margin-top:18px;color:#bdd6e8;font-size:13px;line-height:1.5}.game{padding-top:12px}.roomline{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--p);padding:10px 16px;border-radius:10px;border:1px solid var(--line);flex-wrap:wrap}.roomline b{color:var(--cyan);letter-spacing:.16em}.roomline #connection{flex:1;text-align:center;color:#b7cce1;font-size:13px}.roomline button{font-size:12px}.score{display:grid;grid-template-columns:1fr 95px 1fr;align-items:center;gap:14px;margin:18px 0 14px}.score>div:first-child,.score>div:last-child{font-size:13px;font-weight:900}.score b{float:right}.hp{height:12px;background:#34475a;border-radius:20px;overflow:hidden;margin-top:9px}.fill{height:100%;width:100%;transition:width .2s}.blue{background:linear-gradient(90deg,#4094fa,#65e8e4)}.pink{background:linear-gradient(90deg,#ffb07b,#ff537c)}.timer{text-align:center;font-size:23px;font-weight:900;color:#c7e0ef}.boards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;align-items:stretch}.field{min-width:0;height:min(52vh,510px);min-height:290px;position:relative;border:2px solid #30506d;background:repeating-linear-gradient(0deg,transparent 0,transparent 49px,#ffffff08 50px),linear-gradient(120deg,#15263c,#0b172a);border-radius:13px;overflow:hidden}.field.enemy{border-color:#554056}.fieldtitle{font-size:12px;letter-spacing:.12em;font-weight:900;color:var(--cyan);padding:15px}.fieldtitle small{float:right;color:#a2b7c9}.words{position:absolute;inset:40px 0 26px}.word{position:absolute;top:0;will-change:transform;transform:translate3d(-50%,-40px,0);font:900 clamp(13px,1.5vw,21px)/1.1 monospace;letter-spacing:.04em;color:#edf7ff;white-space:nowrap;padding:6px 10px;border:1px solid #69879d;border-radius:7px;background:#213b4c}.word.red{color:#ff93a5;border-color:#f86c86;background:#4e2439}.word .done{color:#7df6c5}.danger{position:absolute;bottom:7px;left:10px;right:10px;padding-top:6px;border-top:2px dashed #a5465a;color:#d77987;font-size:10px;letter-spacing:.07em;font-weight:900}.inventory{display:flex;align-items:center;gap:15px;padding:15px;margin:14px 0 10px;border:1px solid var(--line);background:var(--p);border-radius:11px}.inventory>span{font-size:13px;font-weight:800;white-space:nowrap}.inventory>span b{color:var(--cyan)}.tokens{display:flex;gap:6px;flex:1;min-width:0}.token{flex:1;min-width:0;text-align:center;padding:9px 3px;border-radius:6px;background:#243d55;border:1px solid #41647c;font:900 clamp(9px,1.1vw,15px) monospace;overflow:hidden}.token.blank{color:#6a849d;border-style:dashed}.typing{font-size:14px;color:var(--dim);font-weight:800}.typing b{color:var(--cyan);font-size:19px;letter-spacing:.08em;margin-left:12px}.help{margin:10px 0;color:#a8bed2;font-size:13px}kbd{display:inline-block;border-radius:4px;background:#24384c;padding:3px 6px;color:white}footer{text-align:center;color:#6e89a4;margin:25px 0 0;font-size:12px}.touch{display:none}@media(max-width:650px){.shell{padding:9px}.sub{font-size:9px}h1{font-size:17px}.boards{gap:6px}.field{min-height:260px;height:43vh}.fieldtitle{font-size:9px;padding:8px}.word{font-size:11px;padding:5px 3px}.danger{font-size:7px}.score{gap:6px;grid-template-columns:1fr 55px 1fr}.score b{display:block;float:none}.inventory{gap:5px;padding:8px;flex-wrap:wrap}.inventory>span{font-size:10px}.token{font-size:9px;padding:8px 2px}.help{font-size:10px}.touch{display:block;margin-top:10px}.touch input{width:100%;text-transform:none}}

[hidden]{display:none!important}.connect{max-width:780px;margin:5vh auto}.host-form{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px}.host-form label{display:flex;flex-direction:column;gap:7px;font-size:13px;color:var(--dim)}.host-form input,.host-form select{width:100%;text-transform:none}.host-form .check,.check{display:flex;flex-direction:row;align-items:center;gap:8px}.check input{width:auto;accent-color:var(--cyan)}select{border-radius:8px;border:1px solid #51708d;background:#071427;color:white;padding:12px;font:inherit}.lobby-heading{display:flex;justify-content:space-between;align-items:center;margin-top:18px}.lobby-heading button{font-size:12px}.room-list{display:flex;flex-direction:column;gap:9px;max-height:340px;overflow:auto}.room-row{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#0b172a;padding:12px;border:1px solid var(--line);border-radius:9px}.room-row strong{display:block;overflow-wrap:anywhere}.room-row small{display:block;color:var(--dim);margin-top:5px}.room-actions{display:flex;gap:7px}.room-actions button{font-size:12px}.host-settings{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:12px;font-size:12px;color:var(--dim)}#roomBadge{color:var(--cyan);font-size:12px}#roomInput{min-width:0}.join{flex-wrap:wrap}@media(max-width:650px){.connect{padding:18px;margin:3vh auto}.host-form{grid-template-columns:1fr}.room-row{flex-wrap:wrap}.room-actions{margin-left:auto}}

.audio-controls{display:flex;justify-content:flex-end;align-items:center;flex-wrap:wrap;gap:16px;padding-top:12px;color:var(--dim);font-size:12px}.audio-controls button{background:#1b3045;color:var(--txt);border:1px solid var(--line);padding:7px 12px;min-width:90px}.audio-controls button[aria-pressed="true"]{color:var(--dim)}.audio-controls label{display:flex;align-items:center;gap:8px}.audio-controls input{width:90px;padding:0;accent-color:var(--cyan)}.audio-controls output{width:30px;text-align:right;font-variant-numeric:tabular-nums}.field::after{content:"";position:absolute;inset:0;border:2px solid #ff627d;border-radius:10px;box-shadow:inset 0 0 22px #ff4b6430;opacity:0;pointer-events:none;z-index:3}.field.damage-pulse::after{animation:damage-pulse 480ms ease-out both}@keyframes damage-pulse{0%{opacity:0}18%{opacity:.7}100%{opacity:0}}@media(prefers-reduced-motion:reduce){.field.damage-pulse::after{animation:none}}@media(max-width:650px){.audio-controls{justify-content:flex-start;gap:8px;font-size:10px}.audio-controls input{width:65px}.audio-controls label{gap:5px}}

/* Device-specific game controls: narrow desktop windows retain both boards. */
.touch{display:none!important}
body.mobile-game:not(.spectating) .boards{grid-template-columns:minmax(0,1fr)}
body.mobile-game:not(.spectating) #opponentField{display:none}
body.mobile-game:not(.spectating) #touch:not([hidden]){display:block!important;position:sticky;bottom:0;z-index:5;padding:8px 0 max(8px,env(safe-area-inset-bottom));background:#080d1bf5}
.game-keyboard{width:100%;max-width:700px;margin:auto;user-select:none;-webkit-user-select:none}
.keyboard-row{display:flex;justify-content:center;gap:4px;margin-top:5px}
.keyboard-row button{flex:0 0 calc((100% - 36px)/10);min-width:0;max-width:none;padding:0;height:42px;border-radius:6px;background:#29445f;color:var(--txt);font-size:17px;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.keyboard-row button:active{background:var(--cyan);color:#071d2b}
.keyboard-row button:disabled{opacity:.45}
.keyboard-actions button{flex:1;max-width:none;font-size:14px;background:#36536e}
.keyboard-actions button:last-child{background:var(--cyan);color:#071d2b;flex:2}
body.mobile-game .shell{padding:8px;max-width:900px}
body.mobile-game .field{height:clamp(220px,43dvh,510px);min-height:220px}
body.mobile-game .word{font-size:clamp(14px,3.8vw,21px);padding:5px 7px}
body.mobile-game .roomline{padding:8px;gap:6px}
body.mobile-game .roomline #connection{flex-basis:100%;order:5}
body.mobile-game .host-settings{gap:8px;margin-top:8px}
body.mobile-game .score{margin:10px 0;grid-template-columns:1fr 60px 1fr;gap:8px}
body.mobile-game .inventory{padding:8px;margin:8px 0;gap:6px;flex-wrap:wrap}
body.mobile-game .tokens{flex-basis:65%}
body.mobile-game .token{font-size:11px}
body.mobile-game .help{font-size:10px;margin:6px 0}
body.mobile-game .audio-controls{padding-top:6px;gap:8px;font-size:10px}
body.mobile-game .sub{display:none}
body.mobile-game h1{font-size:18px;margin:8px 0}
body.mobile-game.spectating .boards{grid-template-columns:1fr}
@media(max-height:500px){body.mobile-game .field{height:220px}.keyboard-row button{height:34px}}

body.mobile-game:not(.spectating) #touch:not([hidden]){position:static}body.mobile-game #copy,body.mobile-game #connection,body.mobile-game #help,body.mobile-game #send{display:none}body.mobile-game .field{height:clamp(180px,36dvh,400px);min-height:180px}body.mobile-game .roomline #roomBadge{flex-basis:100%;order:4;font-size:10px}body.mobile-game .host-settings{font-size:10px}body.mobile-game .inventory>span{font-size:10px}body.mobile-game .tokens{flex-basis:100%}

.keyboard-settings:not([hidden]){display:flex;align-items:center;gap:8px;margin:8px 0;font-size:12px;color:var(--dim)}.keyboard-settings select{min-width:0;flex:1;max-width:260px;padding:7px}.keyboard-row button{box-shadow:0 2px 0 #091424;font-weight:600}.keyboard-row button:active{transform:translateY(1px);box-shadow:none}
.solo-link{display:inline-block;color:var(--cyan);font-weight:800;padding:10px 14px;border:1px solid var(--line);border-radius:8px;text-decoration:none}.solo-link:hover{background:#243d55}
.creator-support{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;margin-top:20px;padding-top:14px;border-top:1px solid var(--line)}.creator-support a{display:inline-flex;align-items:center;min-height:44px;padding:8px 12px;border:1px solid var(--line);border-radius:8px;color:var(--cyan);font-size:13px;text-decoration:none}.creator-support a:hover{background:#243d55}.creator-support a:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}.creator-support span{font-size:12px;color:var(--dim)}

.match-result:not([hidden]){position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:rgba(8,17,32,.88);pointer-events:none;text-align:center;padding:16px}.match-result strong{font-size:clamp(24px,4vw,44px);letter-spacing:.08em}.match-result span{font-size:14px;color:var(--dim)}.match-result.victory strong{color:var(--cyan)}.match-result.defeat strong{color:#ff8197}

.player-name{display:flex;flex-direction:column;gap:6px;max-width:340px;margin:16px 0}.player-name small{color:var(--dim);font-size:12px}.score>div,.fieldtitle{min-width:0}#yourLabel,#foeLabel,#yourFieldLabel,#foeFieldLabel{overflow-wrap:anywhere}

.target-controls:not([hidden]){display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:12px 0}.target-controls small{color:var(--dim);margin-left:8px}#targetButtons{display:flex;gap:8px;flex-wrap:wrap}#targetButtons button{background:#1b3045;color:var(--txt);border:1px solid var(--line);font-size:12px;min-height:44px}#targetButtons button[aria-pressed="true"]{border-color:var(--cyan);color:var(--cyan)}.field.attack-target{border-color:var(--cyan);box-shadow:0 0 0 1px #65e8e444}.side-fields{display:grid;grid-auto-rows:minmax(0,1fr);gap:12px;min-width:0;min-height:0}.multi-match .boards{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(110px,.34fr)}.side-fields .extra-field{height:100%;min-height:0}.side-fields .fieldtitle{font-size:10px;letter-spacing:.03em;padding:9px;overflow-wrap:anywhere}.side-fields .words{inset:42px 0 10px}.side-fields .word{font-size:10px;padding:4px 3px}.side-fields .match-result{font-size:12px;padding:6px}body.mobile-game:not(.spectating) .side-fields{display:none}body.mobile-game .target-controls small{display:none}body.mobile-game .target-controls{gap:6px;font-size:11px}body.mobile-game #targetButtons{gap:5px}body.mobile-game #targetButtons button{padding:7px 9px;font-size:11px}.player-name input{text-transform:none}

body.mobile-game.spectating .side-fields .extra-field{height:220px}

/* Measure the space beneath the room controls; retain a usable board floor. */
body.playing:not(.mobile-game) .shell{max-width:1640px}
body:not(.mobile-game) .boards{height:var(--board-height,clamp(320px,56dvh,780px));grid-template-rows:minmax(0,1fr)}
body:not(.mobile-game) .boards>.field{height:100%;min-height:0}
body:not(.mobile-game) .word{font-size:clamp(13px,1.5vw,21px)}
body:not(.mobile-game) .side-fields .word{font-size:10px}
body:not(.mobile-game) .side-fields .extra-field{height:100%;min-height:0}
@media(max-height:850px){
 body.playing:not(.mobile-game) .shell{padding:8px 18px}
 body.playing:not(.mobile-game) header h1{margin:6px 0;font-size:21px}
 body.playing:not(.mobile-game) .audio-controls{padding-top:5px;gap:12px}
 body.playing:not(.mobile-game) .game{padding-top:6px}
 body.playing:not(.mobile-game) .roomline{padding:6px 10px}
 body.playing:not(.mobile-game) .score{margin:10px 0 8px}
 body.playing:not(.mobile-game) .target-controls{margin:6px 0;gap:8px}
 body.playing:not(.mobile-game) #targetButtons button{min-height:34px;padding:6px 12px}
 body.playing:not(.mobile-game) .inventory{margin:10px 0 7px;padding:9px 12px}
}

/* Compact stock feedback, with no flashing or extra word row on phones. */
body.mobile-game #ammo{display:none}body.mobile-game .inventory{background:transparent;border:0;padding:2px 0;margin:4px 0;min-height:18px}
.inventory.stock-full #slots,.field.stock-full .fieldtitle small{color:#ffd58a}.field.stock-full{box-shadow:inset 0 3px 0 #ffd58a66}.round-stats{margin:14px 0;padding:12px 16px;border:1px solid var(--line);border-radius:10px;background:var(--p);font-size:13px;color:var(--dim)}.round-stats p{margin:4px 0;line-height:1.6}

/* Full ammo: a slow edge pulse on the owner's field, below the red damage cue. */
.field.stock-full::before{content:"";position:absolute;inset:0;border:3px solid #ffd15c;border-radius:10px;box-shadow:inset 0 0 14px #ffd15c24;pointer-events:none;z-index:2;animation:stock-border-pulse 1.8s ease-in-out infinite}
@keyframes stock-border-pulse{0%,100%{opacity:.18}50%{opacity:.8}}
.field.stock-full.damage-pulse::before{animation:none;opacity:0}
.effects-reduced .field.stock-full::before{animation:none;opacity:.5}
@media(prefers-reduced-motion:reduce){.field.stock-full::before{animation:none;opacity:.5}}

/* Counterwave stays beside the ammo controls, including on mobile. */
.counterwave-control{background:#182a3d;color:#c8d5e4;border:1px solid #415b70;font-size:12px;min-width:105px;padding:7px 10px}
.counter-track{display:block;height:3px;background:#304356;border-radius:3px;margin-top:5px;overflow:hidden}
.counter-track>span{display:block;height:100%;background:#ffaf65;transition:width .2s}
.counterwave-control.counter-ready{color:#ffd3a3;border-color:#f7a75b;box-shadow:0 0 8px #f7a75b33}
.word.red.counterwave-word{color:#ffe0b5;background:#643819;border-color:#ffac57;border-style:dashed}
.word.counterwave-word .done{color:#fff}
@media(max-width:600px){.counterwave-control{min-width:100px;font-size:11px;padding:6px 8px}}

.game-version{color:var(--dim);white-space:nowrap;font-weight:700}

/* Quiet interaction feedback and readable instructions. */
button,a,input,select,summary{outline-offset:3px}
:where(button,a,input,select,summary):focus-visible{outline:2px solid var(--cyan)}
button:not(:disabled){transition:background-color .15s,box-shadow .15s}
@media(hover:hover){button:not(:disabled):hover{box-shadow:0 0 0 2px #65e8e440;filter:brightness(1.08)}}
.effects-setting{display:flex;justify-content:flex-end;align-items:center;gap:7px;color:var(--dim);font-size:12px;margin-top:8px}
.effects-setting input{accent-color:var(--cyan)}
.quick-guide{margin:14px 0;border:1px solid var(--line);border-radius:9px;background:#0b172a}
.quick-guide summary{cursor:pointer;color:var(--cyan);font-weight:700;padding:12px 14px}
.quick-guide ol{margin:0;padding:0 20px 0 36px;color:var(--dim);font-size:13px;line-height:1.7}
.quick-guide li{margin:8px 0}.quick-guide b{color:var(--txt)}
.quick-guide p{font-size:12px;padding:0 14px;margin:12px 0}
.effects-reduced .field.damage-pulse::after{animation:none;opacity:0}
.effects-reduced .fill,.effects-reduced .counter-track>span{transition:none}
body.mobile-game:not(.match-live) #connection{display:block;font-size:11px;text-align:left}
body.mobile-game .effects-setting{font-size:11px;margin-top:5px}
.target-controls button[aria-pressed="true"]{background:#234452!important}
.room-list{scrollbar-color:#41647c #0b172a;scrollbar-width:thin}
@media(prefers-reduced-motion:reduce){button:not(:disabled),.fill,.counter-track>span{transition:none}}
.audio-controls .effects-setting{margin:0;font-size:inherit}.audio-controls .effects-setting input{width:auto}.effects-reduced .keyboard-row button:active{transform:none}
body.mobile-game .target-controls>span{display:block;margin-bottom:4px}body.mobile-game #targetButtons{flex-wrap:nowrap;overflow-x:auto;max-width:100%;padding:3px 2px 6px;scrollbar-width:thin;scrollbar-color:#41647c transparent}body.mobile-game #targetButtons button{flex:0 0 auto;max-width:170px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:40px}