:root{color-scheme:dark;--bg:#071822;--panel:#0e2836;--mint:#a8e5cd;--gold:#f0bf86;--text:#e7f1ef;--muted:#93aeb9;--line:#294654}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 10%,#204252,var(--bg) 70%);color:var(--text);font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:14px}button,input,select{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer;color:inherit;background:none;border:0}button:disabled{cursor:not-allowed;opacity:.4}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--gold);outline-offset:4px}input,select{background:#091e2b;border:1px solid #3c5865;border-radius:8px;color:var(--text);padding:12px;max-width:100%}label{display:block;font-size:12px;color:var(--muted)}a{color:var(--mint);text-decoration:none}h1,h2,h3,p{margin-top:0}h1,h2{font-weight:550;letter-spacing:-1px}p{line-height:1.65}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:650;color:var(--mint)}.muted{color:var(--muted)}.primary{background:var(--mint);color:#123a32;border-radius:9px;padding:15px 18px;font-weight:650;text-align:left;display:flex;justify-content:space-between;align-items:center;gap:12px}.primary:hover{background:#c0f2df}.outline{border:1px solid #446773;border-radius:8px;padding:11px;font-size:12px}.full{width:100%}.text-button{color:var(--mint);font-size:12px;padding:12px 0}.fine{font-size:11px;color:var(--muted)}[hidden]{display:none!important}.welcome{width:min(1000px,calc(100% - 64px));margin:7vh auto;display:grid;grid-template-columns:1.1fr 1fr;min-height:660px;background:#0d2634;border:1px solid #345260;border-radius:22px;overflow:hidden;box-shadow:0 30px 100px #0005}.welcome-art{position:relative;padding:48px;background:radial-gradient(ellipse at 0 0,#4a777a,#194f5c 45%,#0a2a3b);overflow:hidden}.compass{font-size:90px;color:var(--mint);display:block;line-height:1.3;font-weight:100}.welcome-art h1{font-size:72px;line-height:1.06;margin:26px 0 24px;letter-spacing:-4px;position:relative;z-index:1}.welcome-art h1 span{color:var(--gold)}.intro{font-size:16px;color:#c6deda;position:relative;z-index:1}.welcome-note{position:absolute;bottom:25px;font-size:9px;letter-spacing:1.6px;color:#a5c6c6}.waterlines{position:absolute;width:700px;height:300px;border:1px solid #77aeb036;border-radius:50%;transform:rotate(-28deg);left:-120px;bottom:-60px;box-shadow:0 0 0 20px #77aeb010,0 0 0 40px #77aeb010,0 0 0 70px #77aeb010,0 0 0 100px #77aeb010}.signin{padding:100px 50px}.signin h2{font-size:36px;margin:18px 0 12px}.signin>p{color:var(--muted)}.signin form{margin-top:35px}.signin label{margin-bottom:10px}.signin input{width:100%;margin-bottom:18px}.signin .primary{width:100%}#code{letter-spacing:5px;text-transform:uppercase;font-size:22px}#login-status{font-size:12px;margin:20px 0 45px}#game{max-width:1600px;margin:auto}header{display:flex;align-items:center;justify-content:space-between;padding:22px 36px;border-bottom:1px solid var(--line);height:98px}.brand{display:flex;gap:12px;color:#c6dddc;font-size:10px;letter-spacing:2px;line-height:1.65}.brand b{font-size:15px;letter-spacing:3px;color:var(--text)}.brand-mark{font-size:42px;color:var(--mint);line-height:1}.header-world{font-size:10px;letter-spacing:1.6px}.live-dot{display:inline-block;width:6px;height:6px;background:var(--mint);border-radius:50%;margin-right:7px}.account{display:flex;gap:22px;align-items:center}.coin-balance{font-size:13px;color:var(--gold)}.avatar{width:36px;height:36px;border-radius:50%;border:1px solid #476c78;background:#1a4150;color:var(--mint)}.workspace{display:grid;grid-template-columns:220px minmax(380px,1fr) 290px;min-height:820px}.sidebar{padding:32px 22px;border-right:1px solid var(--line);display:flex;flex-direction:column}.sidebar h2{font-size:18px;letter-spacing:-.5px;overflow-wrap:anywhere;margin:10px 0 28px}.fleet-list{display:grid;gap:8px;margin-bottom:18px}.fleet-item{padding:14px 12px;border:1px solid var(--line);border-radius:9px;text-align:left;background:#102e3c}.fleet-item strong{display:block;font-weight:600;font-size:13px;overflow-wrap:anywhere}.fleet-item small{font-size:10px;color:var(--muted);display:block;margin-top:5px}.fleet-item.active{border-color:#81bba9;background:#24473f}.sidebar-bottom{margin-top:auto;padding-top:40px;display:grid;gap:16px;font-size:12px}.sidebar-bottom button{text-align:left;color:var(--muted)}.sidebar-bottom p{font-family:Georgia,serif;font-style:italic;color:#7197a3;margin-top:30px}.battle-panel{min-width:0;background:radial-gradient(ellipse at 50% 45%,#255c70,#0b2637 70%)}.phase-banner{display:flex;justify-content:space-between;align-items:center;padding:28px 32px 22px}.phase-banner h1{font-size:33px;margin:9px 0 6px;letter-spacing:-1px}.phase-banner p{font-size:11px;color:var(--muted);margin:0}.countdown{text-align:right;min-width:95px;margin-left:14px}.countdown b{display:block;font-size:38px;font-weight:300;font-variant-numeric:tabular-nums;letter-spacing:-1px}.countdown span{font-size:8px;letter-spacing:2px;color:var(--muted)}.timer-track{height:2px;background:#315464;margin:0 32px}.timer-track i{display:block;background:var(--mint);height:100%;width:100%;transition:width .4s}.board-top{display:flex;justify-content:space-between;align-items:center;margin:24px 30px 14px}.tabs{display:flex;background:#081f2dd9;padding:4px;border:1px solid #35515f;border-radius:9px}.tabs button{padding:8px 14px;border-radius:5px;font-size:11px;color:var(--muted)}.tabs .active{background:#2c525e;color:var(--text)}.tabs b{color:var(--mint);margin-left:6px;font-size:10px}.icon-button{font-size:25px;color:var(--mint)}.board-caption{margin:0 32px;display:flex;justify-content:space-between;gap:15px;font-size:9px;letter-spacing:1.5px;color:#bed3dc}#board-kind{color:var(--muted);text-align:right}#scene{height:415px;position:relative;overflow:hidden}#scene canvas{display:block;width:100%;height:100%;touch-action:pan-y}#scene[data-error]:after{content:attr(data-error);position:absolute;bottom:5px;left:10px;color:var(--gold)}.board-bottom{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:0 30px 12px;font-size:10px;color:var(--muted)}.board-bottom .text-button{font-size:10px;white-space:nowrap}.command-panel{background:#102d3c;padding:20px 28px 16px;border-top:1px solid #335361}.selection-row{display:flex;align-items:center;gap:10px;margin-bottom:15px}.selection-row label{font-size:9px;letter-spacing:.7px}.selection-row input{padding:7px;width:48px;margin-left:5px;font-size:12px;text-transform:uppercase}.selection-row select{padding:8px;font-size:11px;flex:1;min-width:0}.rotation{display:flex;align-items:center;letter-spacing:0!important}.rotation input{width:13px;margin:0 5px 0 0}.actions{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-bottom:15px}.actions button{border:1px solid #355160;background:#143342;border-radius:8px;padding:9px 2px 8px;font-size:10px;color:#bfd0d8}.actions span{display:block;font-size:25px;line-height:29px;margin-bottom:3px}.actions .active{background:#294d44;border-color:var(--mint);color:var(--mint)}#status{color:var(--muted);font-size:11px;margin:11px 0 0;min-height:19px;text-align:center}.intel-panel{padding:32px 23px;border-left:1px solid var(--line);background:#0c2330}.intel-heading{display:flex;align-items:center;justify-content:space-between}.intel-heading h2{font-size:18px;margin:9px 0 22px;letter-spacing:-.5px}.badge{border:1px solid #416171;border-radius:6px;padding:5px;font-size:9px;color:var(--muted)}.neighbors{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.neighbor{min-height:77px;border:1px solid #345363;border-radius:8px;padding:10px 3px;background:#163645;text-align:center;overflow:hidden}.neighbor strong{display:block;font-size:10px;margin:6px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.neighbor small{font-size:8px;color:var(--muted)}.neighbor.available{border-color:#5e9589}.neighbor.available small{color:var(--mint)}.neighbor.me{background:#2c4f45;border-color:var(--mint)}.neighbor.selected{box-shadow:inset 0 0 0 1px var(--gold)}.neighbor.empty{opacity:.4;background:transparent}.neighbors.wide{grid-template-columns:repeat(5,1fr);gap:3px}.neighbors.wide .neighbor{min-height:60px;padding:6px 1px}.neighbors.wide strong{font-size:8px}.neighbors.wide small{font-size:7px}.intel-note{font-size:10px;color:var(--muted);margin:15px 0 35px}.activity-heading{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:22px}.activity{margin-top:17px;display:grid;gap:16px}.event{padding-left:12px;border-left:2px solid #3a656e}.event p{font-size:11px;margin:0 0 5px;color:#c2d5dc}.event time{font-size:9px;color:#7d9aa7}.game-footer{padding:19px 30px;border-top:1px solid var(--line);display:flex;justify-content:space-between;font-size:9px;letter-spacing:1px;color:#8cabb6}#connection{color:var(--mint)}.empty-state{text-align:center;padding:110px 35px}.empty-state h2{font-size:32px;margin:28px 0 10px}.empty-state p{color:var(--muted)}.empty-state button{margin:30px auto}.compass.small{font-size:70px}dialog{background:#102d3c;color:var(--text);border:1px solid #4d6c79;border-radius:18px;padding:28px;width:min(700px,calc(100% - 24px));max-height:90vh;box-shadow:0 30px 100px #0009}dialog::backdrop{background:#03111fcc;backdrop-filter:blur(7px)}.dialog-head{display:flex;justify-content:space-between;align-items:center}.dialog-head button{font-size:25px}dialog h2{font-size:30px;margin:12px 0 23px}dialog p{color:var(--muted);font-size:12px}.stack{display:grid;gap:12px}.choices{display:grid;gap:9px}.choices button{border:1px solid #456573;border-radius:9px;background:#204453;padding:15px;text-align:left}.choices small{display:block;margin-top:5px;color:var(--muted);font-size:11px}.map-search{display:flex;gap:8px}.map-search input{flex:1;min-width:0}.map-tools{display:flex;justify-content:space-between;align-items:center;margin:15px 0;font-size:11px}.map-canvas{width:min(100%,480px);aspect-ratio:1;margin:0 auto;position:relative;background:#203f4a;border:1px solid #537780;overflow:hidden}.map-canvas img{width:100%;height:100%;object-fit:fill;position:absolute}.map-slots{position:absolute;inset:0;display:grid;grid-template-columns:repeat(15,1fr);grid-template-rows:repeat(15,1fr)}.map-slots button{border:1px solid #ffffff18;min-width:0;min-height:0;padding:0;font-size:9px;color:#173d36}.map-slots button:hover,.map-slots .picked{background:#f5bc7899;box-shadow:inset 0 0 0 1px var(--gold)}.map-slots .occupied{background:#e99d6266}.map-slots .mine{background:#8ce1bea0}.map-credit{position:absolute;bottom:0;right:0;z-index:2;font-size:9px;padding:3px 5px;color:#e7f1ef;background:#0e2836df;pointer-events:none;text-align:right;max-width:100%}.map-pan{display:flex;gap:7px}.map-pan button{background:#254b59;border:1px solid #557583;padding:5px 9px;border-radius:5px}.placement-list{display:grid;gap:8px;margin:15px 0}.placement-row{display:flex;align-items:center;gap:10px;font-size:12px}.placement-row strong{width:95px}.placement-row input[type=text]{width:60px;text-transform:uppercase;padding:7px}.placement-row label{display:flex;align-items:center;gap:6px}.record-table{width:100%;border-collapse:collapse;font-size:11px}.record-table th,.record-table td{text-align:left;padding:11px 7px;border-bottom:1px solid var(--line)}.record-table th{color:var(--muted);font-weight:500}.ai-tag{color:var(--gold);font-size:8px;padding:2px 3px;border:1px solid #80654c;border-radius:3px;margin-left:5px}.error{color:var(--gold)!important}.dialog-status{min-height:20px}.profile-row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line)}.mobile-only{display:none}@media(min-width:1350px){.workspace{grid-template-columns:250px minmax(400px,1fr) 320px}.battle-panel{padding:0 22px}#scene{height:460px}.phase-banner{padding-top:33px}}@media(max-width:1050px){.workspace{grid-template-columns:180px minmax(340px,1fr) 240px}.sidebar,.intel-panel{padding-left:15px;padding-right:15px}.phase-banner{padding:25px 20px 18px}.phase-banner h1{font-size:27px}.command-panel{padding:17px}.selection-row{flex-wrap:wrap}.board-bottom{padding:0 20px 10px}}@media(max-width:820px){.workspace{grid-template-columns:155px minmax(320px,1fr)}.intel-panel{grid-column:2;border-top:1px solid var(--line);border-left:0}.neighbors{max-width:430px}.sidebar{grid-row:1/3}.header-world{display:none}.welcome{width:calc(100% - 30px)}.welcome-art{padding:35px}.welcome-art h1{font-size:58px}.signin{padding:85px 28px}}@media(max-width:580px){.welcome{margin:0;width:100%;display:block;border:0;border-radius:0}.welcome-art{min-height:280px;padding:30px}.welcome-art .compass{font-size:45px;float:right}.welcome-art h1{font-size:50px;margin:20px 0 12px}.welcome-note{display:none}.intro{font-size:13px;margin:0}.signin{padding:35px 28px 45px}.signin form{margin-top:22px}#login-status{margin-bottom:22px}header{height:78px;padding:15px 20px}.brand-mark{font-size:35px}.brand b{font-size:12px}.brand{font-size:8px}.workspace{display:flex;flex-direction:column}.sidebar{padding:14px 16px;border-right:0;border-bottom:1px solid var(--line);display:block}.sidebar>.eyebrow,.sidebar>h2{display:none}.fleet-list{display:flex;overflow:auto;gap:7px;margin:0 0 10px}.fleet-item{min-width:135px;padding:9px 11px}.fleet-item strong{font-size:11px}.fleet-item small{font-size:8px}.sidebar .outline{width:auto;font-size:10px;padding:7px 10px}.sidebar-bottom{display:inline-flex;gap:17px;padding:0;float:right;font-size:10px}.sidebar-bottom p{display:none}.phase-banner{padding:22px 20px 17px}.phase-banner h1{font-size:29px}.countdown b{font-size:35px}.phase-banner .eyebrow{font-size:9px;letter-spacing:1px}.timer-track{margin:0 20px}.board-top{margin:19px 20px 13px}.board-caption{margin:0 20px;font-size:8px}#scene{height:355px}.board-bottom{font-size:9px}.command-panel{padding:17px 18px}.selection-row label{font-size:8px}.selection-row{gap:7px}.rotation{font-size:8px!important}.actions button{font-size:9px}.actions span{font-size:23px}.intel-panel{padding:25px 20px}.neighbors{max-width:none}.neighbor{min-height:85px}.neighbor strong{font-size:12px}.neighbor small{font-size:9px}.game-footer{padding:16px;font-size:8px;gap:10px;flex-wrap:wrap}.game-footer>span:last-child{display:none}dialog{padding:22px 17px}.record-table{font-size:10px}.record-table th,.record-table td{padding:10px 3px}.board-bottom .text-button{font-size:9px}.welcome-art .eyebrow{font-size:8px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Fleet preparation uses a flat chart so touch and pointer drops land on exact cells. */
dialog.placement-dialog{width:min(790px,calc(100% - 24px))}
.placement-dialog h2{margin-bottom:14px}
.placement-form{display:grid;gap:12px}
.placement-name{display:flex;align-items:center;gap:15px;font-size:10px;letter-spacing:1px}
.placement-name input{flex:1;min-width:0;letter-spacing:0;font-size:14px;padding:10px 12px}
.placement-hint{margin:0 0 13px}
.placement-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.placement-toolbar .outline{padding:9px 13px;color:var(--mint);background:#193b48}
.placement-workspace{display:grid;grid-template-columns:minmax(0,1fr) 160px;gap:22px;align-items:start}
.placement-chart{display:grid;grid-template-columns:22px minmax(0,1fr);grid-template-rows:22px auto;min-width:0}
.placement-columns{grid-column:2;display:grid;grid-template-columns:repeat(10,1fr);align-items:start;text-align:center;color:#91b7c1;font-size:10px}
.placement-rows{grid-row:2;display:grid;grid-template-rows:repeat(10,1fr);align-items:center;text-align:left;color:#91b7c1;font-size:10px}
.placement-grid{grid-column:2;grid-row:2;position:relative;aspect-ratio:1;overflow:hidden;border:1px solid #5c919d;border-radius:4px;background-color:#205967;background-image:linear-gradient(90deg,#a4d4d324 1px,transparent 1px),linear-gradient(#a4d4d324 1px,transparent 1px),radial-gradient(ellipse at 30% 25%,#3a899480,#0c354550);background-size:10% 10%,10% 10%,100% 100%;box-shadow:inset 0 0 50px #001d3155,0 12px 28px #06182450;isolation:isolate}
.placement-ship{position:absolute;border:1px solid #b4ded238;border-radius:3px;padding:0;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab;background:#aed5cb0c;z-index:1}
.placement-ship:before{content:'';position:absolute;inset:6% 18%;background:linear-gradient(90deg,#7a969e,#d0e2e0 45%,#6d8892);clip-path:polygon(50% 0,85% 12%,100% 32%,100% 95%,85% 100%,15% 100%,0 95%,0 32%,15% 12%)}
.placement-ship.horizontal:before{inset:18% 6%;clip-path:polygon(0 50%,12% 15%,32% 0,95% 0,100% 15%,100% 85%,95% 100%,32% 100%,12% 85%)}
.placement-ship.has-art:before{display:none}
.placement-ship img{position:absolute;width:100%;height:100%;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none;filter:drop-shadow(2px 4px 2px #001b3599)}
.placement-ship.horizontal img{width:calc(100% / var(--length));height:calc(100% * var(--length));transform:translate(-50%,-50%) rotate(90deg)}
.placement-ship.selected{border:1.5px solid var(--mint);background:#b8f2d626;box-shadow:inset 0 0 12px #a8e5cd15;z-index:2}
.placement-ship:focus-visible{outline-offset:-3px;z-index:3}
.placement-ship.dragging{opacity:.35;cursor:grabbing}
.placement-grid.dragging{cursor:grabbing}
.placement-preview{position:absolute;z-index:4;pointer-events:none;border:2px solid #b7ffdf;background:#98ffd05c;box-shadow:inset 0 0 16px #a8e5cd55;border-radius:3px}
.placement-preview.invalid{border-color:#ffab99;background:repeating-linear-gradient(135deg,#fa817d60 0 6px,#fa817d20 6px 12px)}
.placement-dock{padding-top:3px}
.placement-dock>.eyebrow{display:block;margin:1px 0 15px}
.placement-manifest{display:grid;gap:8px}
.placement-manifest-ship{text-align:left;border:1px solid #355665;border-radius:8px;padding:11px 12px;background:#153645;display:grid;grid-template-columns:1fr auto;gap:5px}
.placement-manifest-ship strong{font-size:12px;font-weight:550;grid-column:1/-1}
.placement-manifest-ship span{font-size:10px;color:var(--mint);font-variant-numeric:tabular-nums}
.placement-manifest-ship small{font-size:9px;color:var(--muted)}
.placement-manifest-ship.selected{background:#284d46;border-color:#91c9b5}
.placement-controls{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:17px;padding-top:14px;border-top:1px solid var(--line)}
.placement-selection{font-size:12px;color:var(--mint)}
.placement-adjust{display:flex;gap:5px}
.placement-adjust button{min-height:40px;min-width:38px;padding:8px;font-size:13px}
.placement-adjust button:last-child{padding:8px 12px}
.placement-alternative{font-size:10px;margin:11px 0 0;color:var(--muted)}
.placement-status{margin:9px 0 0!important;min-height:20px;color:var(--mint)!important;font-size:11px!important}
.placement-status.error{color:#ffb9a9!important}
.placement-submit-error:empty{display:none}
.placement-submit-error{margin:0}
@media(max-width:580px){
 dialog.placement-dialog{padding:22px 16px;max-height:94dvh}
 .placement-workspace{grid-template-columns:1fr;gap:14px}
 .placement-chart{grid-template-columns:18px minmax(0,1fr);grid-template-rows:18px auto}
 .placement-columns,.placement-rows{font-size:9px}
 .placement-dock{padding:0}
 .placement-dock>.eyebrow{display:none}
 .placement-manifest{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
 .placement-manifest-ship{padding:8px;gap:4px}
 .placement-manifest-ship strong{font-size:10px}
 .placement-manifest-ship span{font-size:9px}
 .placement-manifest-ship small{font-size:8px}
 .placement-controls{margin-top:13px;flex-wrap:wrap}
 .placement-adjust{width:100%;justify-content:space-between}
 .placement-adjust button{min-height:44px;min-width:44px}
 .placement-name{font-size:9px}
 .placement-toolbar .eyebrow{font-size:9px;letter-spacing:1px}
}
@media(min-width:581px){
 dialog.placement-dialog{width:min(700px,calc(100% - 24px))}
 .placement-workspace{grid-template-columns:minmax(0,420px) 150px;gap:18px}
}

.shot-caption{position:absolute;top:9px;left:50%;transform:translateX(-50%);z-index:4;display:grid;gap:5px;min-width:220px;max-width:calc(100% - 28px);text-align:center;padding:12px 24px;border:1px solid #789f9e;background:#092735ec;border-radius:12px;box-shadow:0 8px 30px #00131e66;pointer-events:none}
.shot-kicker{font-size:8px;letter-spacing:2px;color:var(--mint)}
.shot-caption strong{font-size:15px;letter-spacing:.8px;color:#eff7ef}
.shot-detail{font-size:10px;color:#a8c8d1}
.shot-caption[data-impact=hit]{border-color:#e5aa66;background:#392c22ed}
.shot-caption[data-impact=hit] strong{color:#ffe0a5}
.shot-caption[data-impact=water]{border-color:#8cd3e2}
.shot-caption[data-impact=water] strong{color:#c0f3ff}
.shot-skip{position:absolute;z-index:5;bottom:9px;right:17px;padding:9px 13px;font-size:10px;color:#c0d9dd;border:1px solid #668d9a;border-radius:20px;background:#092735e8;min-height:36px}
#scene[data-animation] canvas{cursor:default}
@media(max-width:580px){.shot-caption{padding:9px 15px;gap:4px}.shot-caption strong{font-size:13px}.shot-skip{min-height:44px;bottom:3px}}

/* One renderer carries all nine waters; DOM beacons provide accessible fleet selection. */
.board-view-controls{display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.board-top{gap:12px;align-items:flex-start}
.board-top .icon-button{min-width:32px;min-height:36px}
.view-modes button{min-height:36px;font-weight:600}
#scene.neighborhood-view{height:590px;background:radial-gradient(ellipse at 50% 45%,#35616c22,transparent 70%)}
.fleet-beacons{position:absolute;inset:0;pointer-events:none}
.fleet-beacon{position:absolute;transform:translate(-50%,0);pointer-events:auto;display:grid;gap:3px;padding:5px 7px;text-align:center;border:1px solid #6489976b;border-radius:6px;background:#0b2936ed;min-height:38px;line-height:1.2;box-shadow:0 3px 12px #061a2655}
.fleet-beacon strong{font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;min-width:0}
.fleet-beacon small{font-size:7px;letter-spacing:.7px;color:#9dbbc3;white-space:nowrap}
.fleet-beacon.mine{background:#1f493eeb;border-color:#a2d7c3}
.fleet-beacon.mine small{color:#bfe6d4}
.fleet-beacon.selected{border-color:var(--gold);box-shadow:0 0 0 1px #edc08055,0 3px 12px #061a2655}
.fleet-beacon.empty{background:transparent;border-color:transparent;box-shadow:none;opacity:.55}
.fleet-beacon.empty strong{font-weight:400;color:#adc4c9;font-size:10px}
.fleet-beacon:focus-visible{outline:2px solid var(--mint);outline-offset:3px}
.fleet-hud{margin:0 30px 18px;border:1px solid #466573;border-radius:10px;background:#0a2432b8;padding:12px 14px}
.fleet-hud-title{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:11px;font-size:8px;letter-spacing:1px;line-height:1.4}
.fleet-hud-title strong{font-weight:500;color:#a5c3cd;min-width:0;overflow-wrap:anywhere}
.fleet-hud-title>span{color:#dda675;white-space:nowrap;font-size:8px}
.fleet-hud-ships{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}
.fleet-hud-ships li{display:grid;gap:5px;align-content:start;min-width:0;border-left:1px solid #355462;padding-left:9px}
.fleet-hud-ships li:first-child{border:0;padding-left:0}
.fleet-hud-ships strong{font-size:10px;font-weight:500;color:#bfd6dc;overflow-wrap:anywhere}
.fleet-hud-ships small{font-size:8px;color:#87a8b4}
.hud-ship{height:13px;display:flex;align-items:center;gap:2px}
.hud-ship i{display:block;width:8px;height:5px;border-radius:1px;background:#91c9b6}
.hud-ship i:first-child{height:7px;clip-path:polygon(0 50%,100% 0,100% 100%)}
.unconfirmed .hud-ship i{background:#618493;opacity:.55}
.fleet-hud-ships .destroyed .hud-ship i{background:#c1916e;transform:translateY(1px) rotate(-13deg)}
.fleet-hud-ships .destroyed .hud-ship i:nth-child(even){transform:translateY(-1px) rotate(18deg)}
.fleet-hud-ships .destroyed strong{color:#c6a793;text-decoration:line-through;text-decoration-color:#9a6959}
.fleet-hud-ships .destroyed small{color:#efb58b}
@media(max-width:1050px){#scene.neighborhood-view{height:525px}.fleet-hud{margin-left:20px;margin-right:20px;padding:11px}.fleet-hud-ships li{padding-left:6px}.hud-ship i{width:6px}}
@media(max-width:580px){
 #scene.neighborhood-view{height:425px}
 .board-top{margin-top:17px;gap:6px}
 .board-view-controls{gap:7px}
 .view-modes button{min-height:40px;padding:8px 12px}
 .fleet-beacon{padding:4px 3px;min-height:36px;gap:3px}
 .fleet-beacon strong{font-size:9px}
 .fleet-beacon small{font-size:6px;letter-spacing:.2px}
 .fleet-beacon.empty strong{font-size:9px}
 .fleet-hud{margin:0 18px 15px;padding:10px}
 .fleet-hud-title{font-size:7px;letter-spacing:.5px;margin-bottom:10px}
 .fleet-hud-title>span{font-size:7px}
 .fleet-hud-ships{gap:4px}
 .fleet-hud-ships li{padding-left:4px}
 .fleet-hud-ships strong{font-size:8px}
 .fleet-hud-ships small{font-size:7px}
 .hud-ship{gap:1px}
 .hud-ship i{width:6px}
}
.test-notice{margin:0;padding:10px 20px;text-align:center;background:#17372f;color:#b8f1d5;font-size:12px;font-weight:700;letter-spacing:.06em;border-bottom:1px solid #315e4d}

.map-slots button.blocked{background:repeating-linear-gradient(135deg,#b5726644 0 3px,#482b3333 3px 7px);cursor:not-allowed}
#turn-alert{color:var(--mint);max-width:250px;font-size:12px}

/* The coordinate and action stay with the battlefield at every viewport size. */
.board-action-row{display:grid;grid-template-columns:auto minmax(0,1fr) 44px;gap:12px;align-items:center;padding:12px 28px;background:#102d3cf5;border-top:1px solid #436672;border-bottom:1px solid #335361;position:sticky;bottom:0;z-index:6;box-shadow:0 -8px 22px #061a2633;margin-bottom:14px}
.board-action-row>label{display:flex;align-items:center;gap:8px;font-size:9px;letter-spacing:1px;color:#a8c8d1}
.board-action-row input{width:52px;min-height:44px;padding:8px;text-transform:uppercase;text-align:center;font-size:15px}
.board-action-row #commit{min-height:46px;padding:10px 16px;justify-content:center;font-size:13px;line-height:1.25;text-align:center}
.sound-toggle{width:44px;height:44px;border:1px solid #547481;border-radius:9px;color:var(--mint);font-size:23px;background:#1c3d48}
.sound-toggle[aria-pressed=false]{color:var(--muted)}
.supply-ready{display:block;margin:0 28px 14px;padding:10px 15px;border:1px solid #bcad71;border-radius:9px;background:#3f422f;color:#f5dfa1;font-size:12px;min-height:44px}
.supply-caption{border-color:#b5d9a4;background:linear-gradient(145deg,#203e38f5,#102c3af5)}
.supply-caption strong{color:#ffe5b0}
#scene,#scene.neighborhood-view{height:clamp(230px,calc(100svh - 340px),590px)}
@media(max-width:1050px){.board-action-row{padding:10px 20px;gap:8px}.board-action-row>label{font-size:0;gap:0}.board-action-row input{font-size:14px}}
@media(max-width:580px){
 header{height:60px;padding:9px 16px}.test-notice{padding:6px 14px;font-size:10px}
 .sidebar{padding:9px 16px}.fleet-list{margin-bottom:7px}.fleet-item{min-width:126px;padding:6px 10px}
 .phase-banner{padding:13px 18px 10px}.phase-banner h1{font-size:23px;margin:6px 0}.phase-banner p{font-size:10px;margin:4px 0}.countdown b{font-size:29px}
 .board-top{margin:10px 18px 8px}.view-modes button{min-height:36px;padding:7px 10px}.board-view-controls{gap:5px}.tabs button{padding:6px 10px}
 #scene,#scene.neighborhood-view{height:clamp(220px,calc(100svh - 390px),440px)}
 .board-action-row{padding:9px 16px;gap:8px;margin-bottom:12px}.board-action-row #commit{font-size:12px}.supply-ready{margin:0 18px 12px}
}
@media(max-height:550px){
 #scene,#scene.neighborhood-view{height:clamp(190px,calc(100svh - 115px),350px)}
 .board-action-row{padding-top:7px;padding-bottom:7px}
}
@media(max-height:550px){
 header{height:44px;padding:4px 18px}.brand-mark{font-size:26px}.brand{font-size:7px;gap:8px}.brand b{font-size:10px}.avatar{width:30px;height:30px}.test-notice{font-size:9px;padding:3px 12px}.header-world{font-size:9px}
 .phase-banner{padding:7px 20px 5px;align-items:center}.phase-banner h1{font-size:18px;margin:2px 0}.phase-banner p{display:none}.phase-banner .eyebrow{font-size:8px;letter-spacing:1px}.countdown b{font-size:24px}.countdown span{font-size:7px}
 .board-top{margin:5px 20px 3px}.board-top .icon-button{min-height:30px;height:30px}.view-modes button,.tabs button{min-height:30px;padding:5px 9px;font-size:9px}.board-view-controls{gap:5px}.board-caption{font-size:7px}
 .board-action-row #commit{min-height:44px}.board-action-row{margin-bottom:8px}
}
@media(max-height:420px){.phase-banner h1{display:none}}