:root{color-scheme:light;--sea:#b4cbd0;--ink:#243e49;--muted:#637d83;--paper:#f5f3ea;--line:#26485424;--accent:#b65949;--green:#3d6e63}
body{font-family:"Segoe UI","Malgun Gothic",sans-serif;background:var(--sea);color:var(--ink)}
@font-face{font-family:'Nafo Symbols';font-style:normal;font-weight:400;font-display:block;src:url('../assets/icons/material-symbols.woff2?v=30') format('woff2')}
.material-symbol,[data-icon]::before{font-family:'Nafo Symbols';font-weight:400;font-style:normal;font-size:20px;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:'liga';-webkit-font-smoothing:antialiased}
[data-icon]::before{content:attr(data-icon) / '';display:inline-block;vertical-align:middle;margin-right:7px}
button,a,input,select{touch-action:manipulation}button:focus-visible,a:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
/* The harbor is a vessel selector and departure form, not a separate landing page. */
#menu{inset:0;display:block;overflow:auto;scroll-padding-top:88px;padding:106px max(28px,calc((100vw - 1280px)/2)) 0;background:var(--paper);backdrop-filter:none;scrollbar-color:#8ca6aa var(--paper);isolation:isolate}
.nafo-header{position:fixed;top:0;left:0;right:0;height:76px;padding:0 max(28px,calc((100vw - 1280px)/2));display:flex;align-items:center;z-index:20;background:var(--paper);border-bottom:1px solid var(--line);pointer-events:none}
.nafo-wordmark{font-size:42px;font-weight:800;letter-spacing:-3px;color:var(--ink);line-height:1;text-decoration:none;pointer-events:auto}.nafo-wordmark span{color:var(--accent)}
#language-control{position:fixed!important;top:26px!important;right:max(28px,calc((100vw - 1280px)/2))!important;left:auto!important;transform:none!important;background:transparent!important;color:var(--muted)!important;border:0!important;padding:0!important;z-index:25;font-size:10px}#language-control select{background:transparent;border:0;color:var(--ink);font:12px inherit;max-width:100px;cursor:pointer}
#tree-open{position:fixed;top:23px;right:max(184px,calc((100vw - 1280px)/2 + 156px));left:auto;bottom:auto;z-index:25;border:0;border-right:1px solid var(--line);border-radius:0;padding:5px 18px 5px 0;background:transparent;color:var(--ink);font-size:12px;cursor:pointer}
.harbor-hero{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:38px;align-items:start}.fleet-dock{min-width:0}.harbor-showcase{position:relative;height:340px;background:#b4cbd0;overflow:hidden;border:1px solid #91adb2}.eyebrow{font-size:9px;letter-spacing:1px;font-weight:600;color:var(--muted);text-transform:uppercase}
.showcase-caption{position:absolute;left:26px;right:26px;top:24px;display:flex;align-items:baseline;gap:14px;z-index:1;pointer-events:none}#showcase-number{font-size:12px;font-variant-numeric:tabular-nums;color:#4c727b;padding-top:3px}#menu #showcase-name{font-size:28px;line-height:1.3;font-weight:650;letter-spacing:-1px;margin:0;color:var(--ink);text-shadow:none}#showcase-note{font-size:11px;line-height:1.6;color:#4b6c74;margin:8px 0 0}#fleet-showcase{position:absolute;inset:70px 0 0;width:100%;height:calc(100% - 70px);pointer-events:none}
#fleet-choices{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-bottom:1px solid #a7b9b4;background:transparent;gap:0}.fleet-choice{position:relative;min-width:0;border:0;border-right:1px solid #becac3;border-radius:0;background:transparent;color:var(--ink);padding:11px 5px 13px;text-align:center;box-shadow:none;transition:background .15s}.fleet-choice:last-child{border-right:0}.fleet-choice:hover{background:#e4e9df}.fleet-choice[aria-pressed=true]{background:#e0e8df;box-shadow:inset 0 -3px #416d62}.fleet-number{position:absolute;top:8px;left:9px;font-size:8px;color:#778e87;letter-spacing:.5px}.fleet-select{position:absolute;top:7px;right:7px;font-size:13px;color:#416d62;visibility:hidden}.fleet-choice[aria-pressed=true] .fleet-select{visibility:visible}.fleet-choice canvas{display:block;width:100%;height:62px;margin:0 0 4px}.fleet-choice strong{display:block;font-size:10px;font-weight:600;line-height:1.5;overflow-wrap:anywhere}.fleet-choice small{display:none}.fleet-brief{padding:18px 0 0;display:grid;gap:7px}.fleet-brief p{font-size:11px;line-height:1.7;color:var(--muted);margin:0}.fleet-brief p:first-child{color:var(--ink)}
#menu .menu-card{width:auto;max-width:none;text-align:left;position:relative;margin:0;transform:none;background:none;padding:4px 0 0;border:0;border-radius:0;box-shadow:none;color:var(--ink)}#menu .departure-card>h2{color:var(--ink);font-size:23px;line-height:1.4;letter-spacing:-.7px;text-shadow:none;font-weight:650;margin:0 0 10px}#menu .subtitle{font-size:12px;line-height:1.7;color:var(--muted);margin:0 0 27px;word-break:keep-all}.field-label{display:block;font-size:11px;font-weight:600;color:#58716e;margin:0 0 9px;text-shadow:none}
#joinform{display:block;margin:0!important}#nickname{width:100%!important;min-width:0;height:44px;padding:11px 12px;background:#fffef9;border:1px solid #aebfb7;border-radius:0;color:var(--ink);font:13px inherit;text-align:left;box-shadow:none}#nickname::placeholder{color:#91a09e}#nickname:focus{outline:2px solid #728e83;outline-offset:1px}#sea-start{margin:18px 0!important}#sea-start select{width:100%;height:44px;padding:9px 12px;background:#fffef9;border:1px solid #aebfb7;border-radius:0;font-size:12px;color:var(--ink)}
#mode-panel{width:100%;margin:0 0 16px;border:0;background:none;padding:0}#mode-panel h2{font-size:11px;margin:0 0 9px;color:#58716e;font-weight:600;text-shadow:none}#mode-buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;border:0;overflow:visible;border-radius:0}#mode-buttons .mode-choice{display:block;min-height:35px;padding:7px 3px!important;background:transparent!important;border:1px solid #bfcdca;border-radius:0;box-shadow:none;color:#667e7e;font-size:10px;font-weight:500;text-shadow:none;text-align:center}#mode-buttons .mode-choice:hover{background:#e4e9df!important}#mode-buttons .mode-choice[aria-pressed=true]{background:#e0e8df!important;border-color:#76978b;color:#2e594c;font-weight:650}#mode-buttons .mode-choice[aria-pressed=true]::after{display:none}#mode-description{font-size:10px;line-height:1.6;color:#718780;margin:9px 0 0;min-height:32px}.growth-badge{display:none}
#play{position:static;flex:none;width:100%;height:48px;margin-top:12px;background:var(--ink);color:#fffef6;border:0;border-radius:0;font-size:14px;box-shadow:none;cursor:pointer;text-align:left;padding:13px 16px;transition:background .15s}#play:before{float:right;margin-top:1px;margin-right:0}#play:hover{background:#395b64}#play:disabled{background:#c2ceca;color:#647c7b;cursor:wait}#menu-status{position:static;min-height:0;line-height:1.6;font-size:11px;color:#4d7366!important;margin:0;overflow-wrap:anywhere}#menu-status:empty{display:none}#retry-connection{position:static;border:0;background:transparent;color:var(--accent);font-size:11px;padding:6px 0;margin-top:5px}#retry-connection[hidden]{display:none}.departure-foot{position:static;text-align:center;color:#7b8f85;font-size:10px;line-height:1.7;margin:12px 0 0}
.harbor-guide{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;padding:24px 0;margin-top:28px;border-top:1px solid var(--line)}.harbor-guide>.eyebrow{color:#49665f}.harbor-guide>div{display:flex;align-items:center;gap:7px;font-size:10px;color:var(--muted)}.harbor-guide kbd{flex:none;background:#edeee4;border:1px solid #b7c6bf;border-bottom:2px solid #b7c6bf;border-radius:3px;padding:4px 6px;font:9px inherit;color:#506d65}#menu footer{position:static;display:flex;align-items:center;justify-content:space-between;transform:none;width:auto;border-top:1px solid var(--line);padding:15px 0 20px;margin:0;color:#879b94;font-size:9px}#menu footer span{float:none;display:block}
body:has(#menu[hidden]) .nafo-header{display:none}body:has(#menu[hidden]) #tree-open{left:50%;right:auto;top:12px;transform:translateX(-50%);background:#edf0e4e8;border:1px solid #78918d;border-radius:4px;padding:7px 12px;color:#355450}body:has(#menu[hidden]) #language-control{top:auto!important;bottom:211px!important;right:20px!important;background:#edf0e4d9!important;border:1px solid #78918d!important;border-radius:3px;padding:4px!important}#game{touch-action:none}#ability:empty,#toggles:empty,#points:empty::before{display:none}#naval-status{color:#284b52;background:#e3ece2c9;border:1px solid #6b969542;border-radius:4px;padding:8px 12px;font-size:10px;max-width:75vw;line-height:1.6;white-space:normal}#naval-status:empty{display:none}.stat .plus.material-symbol{font-size:18px}#death .menu-card{background:#f1f0e7;color:var(--ink);text-shadow:none;border:1px solid #a7bab3;border-radius:4px;padding:36px}#death h1{color:var(--ink)}#death .eyebrow,#death .instructions{color:var(--muted)}#death #respawn{background:var(--ink);border:0;border-radius:2px}#change-mode,#reset-build{border-radius:4px}
#tank-tree{background:#e8ede5;color:var(--ink);border:1px solid #9bb0a7;border-radius:5px}#tank-tree>header{border-bottom:1px solid var(--line)}#tank-tree h2{color:var(--ink);text-shadow:none}#tank-tree #tree-close{background:#d6e0d8;color:var(--ink);border:0;border-radius:3px}.fleet-tree-content{overflow:auto;padding:18px!important}.fleet-tree-hint{font-size:11px;color:var(--muted);margin:0 0 18px}.fleet-tree-row{display:grid;grid-template-columns:125px repeat(4,minmax(124px,1fr));align-items:stretch;border-top:1px solid #aebfb544;gap:8px;padding:10px 0}.fleet-tree-label{font-size:12px;font-weight:650;align-self:center}.fleet-tree-label small{display:block;font-size:9px;color:var(--muted);font-weight:400;margin-top:7px}.fleet-tree-node{position:relative;border:1px solid #acbeb3;border-radius:3px;background:#f2f2e8;color:var(--ink);font-size:10px;padding:6px;min-height:103px}.fleet-tree-node:hover{background:#fffdf1}.fleet-tree-node.current{border-color:#608d78;background:#dbe7da}.fleet-tree-node.selected{outline:2px solid var(--accent);outline-offset:-2px}.fleet-tree-node canvas{display:block;width:110px;height:66px;margin:0 auto}.fleet-tree-node small{display:block;color:var(--muted);font-size:8px;margin-top:5px}.fleet-tree-node.available::after{content:'arrow_forward' / '';font-family:'Nafo Symbols';position:absolute;right:5px;top:4px;color:var(--accent);font-size:15px}.fleet-tree-action{padding:10px 14px;border:0;background:var(--ink);color:#fff;border-radius:3px;font-size:12px;margin:10px 0}.fleet-tree-special{display:flex;align-items:center;gap:20px;border-top:1px solid var(--line);padding-top:16px}.fleet-tree-special .fleet-tree-node{width:165px}.fleet-tree-special p{font-size:11px;line-height:1.7;color:var(--muted);max-width:330px}
@media(min-width:1600px){#menu{padding-top:130px}.harbor-hero{grid-template-columns:minmax(0,1fr) 330px;gap:50px}.harbor-showcase{height:400px}.fleet-choice canvas{height:70px}}
@media(max-width:1100px){#menu{padding:100px 24px 0}.harbor-hero{grid-template-columns:minmax(0,1fr) 290px;gap:24px}#fleet-choices{grid-template-columns:repeat(3,minmax(0,1fr))}.fleet-choice{padding-bottom:10px}.fleet-choice:nth-child(3){border-right:0}.fleet-choice:nth-child(-n+3){border-bottom:1px solid #becac3}.fleet-choice canvas{height:47px}.harbor-showcase{height:300px}.nafo-header{padding:0 24px}#language-control{right:24px!important}#tree-open{right:178px}.showcase-caption{left:21px;right:21px}#menu #showcase-name{font-size:25px}.harbor-guide>.eyebrow{flex-basis:100%}}
@media(max-width:700px){#menu{padding:88px 18px 0}.harbor-hero{grid-template-columns:1fr;gap:27px}.harbor-showcase{height:290px}#fleet-choices{grid-template-columns:repeat(3,minmax(0,1fr))}.fleet-choice canvas{height:55px}.fleet-choice strong{font-size:11px}.fleet-brief{padding-top:14px}#menu .departure-card{border-top:1px solid var(--line);padding-top:24px}#menu .subtitle{margin-bottom:20px}.harbor-guide{gap:12px 18px;margin-top:24px;padding:22px 0}.harbor-guide>div{font-size:9px}.nafo-header{height:68px;padding:0 18px}.nafo-wordmark{font-size:35px}#language-control{top:22px!important;right:14px!important}#language-control>span{display:none}#tree-open{top:19px;right:109px;padding-right:12px;font-size:10px}#tree-open::before{font-size:16px}}
@media(max-width:800px){.fleet-tree-row{grid-template-columns:repeat(4,minmax(124px,1fr));min-width:520px}.fleet-tree-label{grid-column:1/-1;display:flex;gap:12px;align-items:baseline}.fleet-tree-label small{display:inline}.fleet-tree-content{padding:12px!important}#tank-tree{inset:12px!important;width:auto!important;transform:none!important;height:calc(100vh - 24px)!important}}
@media(max-width:480px){#naval-status{font-size:9px;padding:5px 8px;max-width:90vw}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}
#sea-start select{margin-left:0}#naval-status{text-shadow:none;font-weight:500}.fleet-tree-content{gap:0!important;max-height:none!important}
@media(max-width:480px){.fleet-tree-row{min-width:0;grid-template-columns:repeat(2,minmax(0,1fr))}.fleet-tree-special{gap:12px}.fleet-tree-special .fleet-tree-node{width:140px;flex-shrink:0}}

/* Combat information follows urgency: resources and actions first, environment second. */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#naval-status.naval-hud{bottom:135px;max-width:none;width:max-content;max-width:calc(100vw - 420px);padding:0;background:transparent;border:0;border-radius:0;color:#29444d;text-shadow:none;font-weight:400;pointer-events:none;line-height:1.35}
.naval-hud-grid{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(115px,1fr);gap:5px}
.naval-hud-card{min-width:0;position:relative;padding:9px 11px 8px;background:#f1f2e9ef;border:1px solid #77978e8c;border-top:3px solid #8aa69d;border-radius:4px;box-shadow:0 2px 6px #193f4820}
.naval-hud-top{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:9px;white-space:nowrap;color:#627b75}
.naval-hud-top kbd{font:9px "Segoe UI","Malgun Gothic",sans-serif;color:#34534c;background:#dbe7de;border:1px solid #9eb6a9;border-bottom-width:2px;border-radius:3px;padding:2px 5px;line-height:1}
.naval-hud-value{display:block;font-size:14px;line-height:1.3;font-weight:700;margin:5px 0 4px;white-space:nowrap;font-variant-numeric:tabular-nums;color:#26464c}
.naval-hud-hint{display:block;font-size:9px;line-height:1.4;color:#627b75;min-height:13px;white-space:nowrap;font-variant-numeric:tabular-nums}
.naval-hud-card.ready{border-top-color:#4e8b70}.naval-hud-card.ready .naval-hud-hint{color:#3e725c}
.naval-hud-card.waiting{border-top-color:#7d9297}.naval-hud-card.waiting .naval-hud-top kbd{background:#e2e7e1;color:#7c8b84;border-color:#bdc9bf}
.naval-hud-card.warning{border-top-color:#bd5b44;background:#fbebd8f2;border-color:#bb7054}.naval-hud-card.warning .naval-hud-value,.naval-hud-card.warning .naval-hud-hint{color:#993e2e}
.naval-hud-bar{height:4px;border-radius:2px;background:#b7cac1;overflow:hidden;margin:4px 0 5px}.naval-hud-bar>span{display:block;height:100%;background:#568775;transition:width .2s linear}.naval-hud-card.warning .naval-hud-bar>span{background:#b95b42}
.naval-hud-detail{display:flex;justify-content:center;align-items:center;gap:10px;padding:5px 8px;font-size:9px;line-height:1.5;color:#395d64;background:#dae7dfd9;border-radius:0 0 4px 4px;min-height:23px;font-variant-numeric:tabular-nums}
.naval-hud-exposure{color:#9b4c35;font-weight:650}.naval-hud-exposure:not([hidden]){border-right:1px solid #b99d80;padding-right:10px}
body:has(#menu:not([hidden])) #ability,body:has(#naval-status.naval-hud) #ability{display:none}body:has(#naval-status.naval-hud) #toggles{bottom:113px;color:#294e56;font-size:10px;background:#e2ece1dc;padding:3px 8px;border-radius:3px}
@media(max-width:1200px){#naval-status.naval-hud{max-width:calc(100vw - 365px)}.naval-hud-grid{grid-auto-columns:minmax(104px,1fr)}.naval-hud-card{padding:7px 9px}.naval-hud-top{gap:6px;font-size:8px}.naval-hud-top kbd{font-size:8px}.naval-hud-value{font-size:13px}.naval-hud-hint{font-size:8px}}
@media(max-width:900px){#naval-status.naval-hud{top:125px;bottom:auto;left:50%;transform:translateX(-50%);width:min(440px,calc(100vw - 24px));max-width:none}.naval-hud-grid{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}.naval-hud-card{padding:7px 9px}.naval-hud-value{font-size:13px}.naval-hud-top,.naval-hud-hint{font-size:9px}.naval-hud-hint{white-space:normal}.naval-hud-detail{font-size:8px;flex-wrap:wrap;gap:3px 8px;padding:4px 6px}body:has(#naval-status.naval-hud) #leaderboard{top:340px}body:has(#naval-status.naval-hud) #leaderboard .leader:nth-child(n+6){display:none}body:has(#naval-status.naval-hud) #evolutions{max-width:180px}body:has(#naval-status.naval-hud) #toggles{bottom:103px}}
@media(max-width:900px) and (max-height:600px){#naval-status.naval-hud{top:120px;left:auto;right:12px;transform:none;width:285px}.naval-hud-value{font-size:12px}.naval-hud-card{padding:5px 7px}.naval-hud-top,.naval-hud-hint{font-size:8px}body:has(#naval-status.naval-hud) #leaderboard{display:none}}
@media(prefers-reduced-motion:reduce){.naval-hud-bar>span{transition:none}}
@media(min-width:701px) and (max-width:900px){.naval-hud-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.naval-hud-grid:has(> :nth-child(2)):not(:has(> :nth-child(3))),.naval-hud-grid:has(> :nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px) and (min-height:601px){body:has(#naval-status.naval-hud) #evolutions{top:320px;left:10px;max-width:180px}}
/* The voyage report keeps the battle visible while giving the next action one clear home. */
#death{z-index:30;background:#35545e8c;padding:24px;overflow:auto;align-items:center}
#death .voyage-card{width:510px;max-width:100%;padding:29px 32px 24px;margin:auto;text-align:left;background:var(--paper);border:1px solid #b4c3bb;border-radius:4px;box-shadow:0 20px 90px #173d4438;color:var(--ink);text-shadow:none}
.voyage-heading{display:flex;align-items:center;justify-content:space-between}.voyage-heading .material-symbol{color:var(--accent);font-size:25px}
#death .eyebrow{font-size:9px;letter-spacing:2px;color:var(--muted)}#death h1{font-size:29px;line-height:1.3;font-weight:650;letter-spacing:-1px;margin:17px 0 23px;color:var(--ink)}
#deathscore{font-size:14px;line-height:1.7;color:var(--muted);margin:22px 0 28px}
.voyage-vessel{display:flex;align-items:center;gap:14px;background:#e3ebe5;border:1px solid #bdcfc3;min-height:93px;padding:10px 15px;margin-bottom:22px}.voyage-portrait{display:block;width:160px;height:64px;flex:0 0 160px}.voyage-label{display:block;color:var(--muted);font-size:9px;line-height:1.5;letter-spacing:.4px}.voyage-vessel-name{min-width:0}.voyage-vessel-name strong{display:block;font-size:15px;line-height:1.5;font-weight:650;margin-top:5px;overflow-wrap:anywhere}
.voyage-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0 0 22px;gap:8px}.voyage-metric{border-left:1px solid #b9c9c0;padding-left:13px;min-width:0}.voyage-metric:first-child{border-left:0;padding-left:0}.voyage-metric dt{font-size:9px;color:var(--muted);margin-bottom:9px}.voyage-metric dd{font-size:23px;font-weight:650;letter-spacing:-.8px;margin:0;color:var(--ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.voyage-metric.score-metric dd{color:var(--green)}
.voyage-cause{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 0;margin-bottom:24px}.voyage-cause strong{font-size:11px;font-weight:600;color:#805646}.voyage-attacker{font-size:10px;color:var(--muted);margin-left:auto;max-width:100%;overflow-wrap:anywhere}
.voyage-return{margin:-8px 0 20px;display:grid;gap:6px}.voyage-return strong{font-size:15px;color:var(--ink)}.voyage-return p{font-size:11px;line-height:1.5;margin:0}.voyage-return-note{color:var(--muted)}
#fleet-progression{font-size:10px;letter-spacing:.3px;color:var(--muted);margin:0;padding:10px 0;border-bottom:1px solid var(--line)}
#showcase-start{font-size:10px;padding:8px 0;background:transparent;border:0;color:var(--ink);box-shadow:none}
.fleet-tree-start{display:flex;align-items:center;gap:20px;margin-bottom:16px}.fleet-tree-start p{font-size:11px;color:var(--muted);line-height:1.6}.fleet-tree-start .fleet-tree-node{flex:0 0 165px}
.voyage-actions{display:grid;gap:8px}#death #respawn{width:100%;height:45px;padding:12px 16px;border:0;border-radius:2px;background:var(--ink);color:var(--paper);font-size:12px;font-weight:600;text-align:left}#death #respawn::before{float:right;margin-right:0}#death #respawn:hover{background:#3a5b64}#death-port{height:39px;padding:8px 14px;border:1px solid #aabeb4;border-radius:2px;background:transparent;color:#506f64;font-size:11px;text-align:left}#death-port:hover{background:#e4ebe1}#death-port::before{font-size:18px}
.voyage-keyhint{display:flex;justify-content:center;align-items:center;gap:6px;font-size:9px;color:var(--muted);margin:17px 0 0}.voyage-keyhint kbd{font:9px inherit;padding:2px 5px;background:#eeeee4;color:#72877c;border:1px solid #bdc8ba;border-bottom-width:2px;border-radius:3px}
@media(max-width:540px){#death{padding:16px}#death .voyage-card{padding:23px 21px 20px}#death h1{font-size:25px;margin-bottom:19px}.voyage-vessel{padding:8px;gap:8px}.voyage-portrait{width:124px;height:50px;flex-basis:124px}.voyage-vessel-name strong{font-size:13px}.voyage-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}.voyage-metric:nth-child(3){border-left:0;padding-left:0}.voyage-metric dd{font-size:24px}.voyage-attacker{flex-basis:100%;margin-left:0}.voyage-cause{margin-bottom:19px}}
@media(max-height:620px) and (min-width:541px){#death{align-items:flex-start;padding:16px}#death .voyage-card{padding:20px 28px}#death h1{margin:10px 0 14px;font-size:25px}.voyage-vessel{min-height:72px;margin-bottom:16px}.voyage-portrait{height:48px;width:120px;flex-basis:120px}.voyage-metrics{margin-bottom:16px}.voyage-cause{margin-bottom:16px}.voyage-keyhint{margin-top:11px}}
/* Steel, paper and restrained accents leave the fleet as the primary visual subject. */
#stats{width:230px;left:18px;bottom:50px;transform:none;transform-origin:bottom left}#points{font-size:10px;font-weight:600;line-height:1.5;margin:0 0 8px 2px;color:#365851;text-shadow:none;max-width:100%;overflow-wrap:anywhere}#points::before{font-size:15px;color:#8a7652;margin-right:5px}
.stat{height:27px;margin:3px 0;padding:0 8px 0 10px;border:1px solid #78968f7d;border-radius:3px;background:#eef1e7ed;color:#35534e;font-weight:500;font-size:10px;text-shadow:none;box-shadow:none}.stat:hover:not(:disabled){background:#fbfcf2;border-color:#66867b}.stat:disabled{opacity:1;color:#71857b;background:#e5ece2d9}.stat .tint{inset:0 auto 0 0;width:3px;opacity:.85}.stat .label{font-size:10px;line-height:1.2}.stat .segments{gap:2px;margin-left:5px}.stat i{width:5px;height:9px;background:#b6c9be7d;border:1px solid #8faa9c2e;border-radius:1px}.stat i.on{background:#638f7c;border-color:#527e6c}.stat .plus.material-symbol{font-size:16px;width:16px;margin-left:6px;color:#517763}.stat:disabled .plus{color:#8b9d90}
#evolutions small{color:#45666a;font-size:9px;font-weight:600;letter-spacing:.7px;text-shadow:none}#choices{gap:6px;margin-top:7px;padding:2px 2px 4px;max-height:35vh}.choice{width:94px;min-height:88px;height:auto;padding:4px 5px 7px;border:1px solid #78968f;border-radius:3px;background:#edf0e4ed;color:#35514f;font-size:10px;font-weight:600;line-height:1.4;text-shadow:none;box-shadow:0 2px 5px #305b6012;transition:background .15s,border-color .15s}.choice canvas{width:63px;height:49px}.choice:hover{transform:none;filter:none;background:#fcf9ec;border-color:#a37056}
#progress{width:340px;bottom:17px;color:#34534e;text-shadow:none}.xp{height:34px;border:1px solid #86a196;border-radius:3px;background:#eef1e7e8;overflow:hidden}.xp>div{position:absolute;bottom:0;left:0;height:3px;background:#638f7c}.xp span{inset:0;line-height:28px;padding:0 8px;font-size:11px;font-weight:600;color:#34534e;text-shadow:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.score{height:18px;width:auto;margin:5px auto 0;background:transparent;border:0;border-radius:0;overflow:visible}.score>div{display:none}.score span{position:static;display:block;line-height:18px;color:#3d6061;font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;text-shadow:none}#tankname{margin:4px 0 0;font-size:12px;line-height:1.3;font-weight:500;letter-spacing:.2px;color:#567578;text-shadow:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#leaderboard{width:210px;top:22px;right:20px}#leaderboard h2,#team-population h2{font-size:11px;font-weight:600;letter-spacing:.4px;color:#36595f;text-shadow:none;margin:0 0 10px;text-align:right}.leader{height:23px;margin-bottom:4px;background:#e9eee4df;border:1px solid #78968f4d;border-radius:3px;overflow:hidden!important}.leader .fill{inset:auto auto 0 0;height:2px;opacity:.6;border-radius:0!important}.leader span{color:#41615c;font-size:10px;line-height:20px;font-weight:500;text-shadow:none;padding:0 8px;text-align:left}.leader.self,.leader.own-team{border-color:#608b79;background:#f3f4e9ed}.leader.self span,.leader.own-team span{font-weight:650;padding-left:20px}#leaderboard .leader.self::before,#leaderboard .leader.own-team::before{right:auto;left:4px;z-index:1;font-size:11px;color:#4d7d65;text-shadow:none}#team-population{margin-top:13px}#team-status .leader{height:21px}#team-status .leader span{line-height:18px}
#minimap{border:1px solid #658a8f;background:#82abb366}#coords{color:#456e75;font-size:9px;text-shadow:none}#top{color:#426970;font-weight:500}.mode{border:1px solid #738f8b;background:#e4ece2db;color:#3b605a;padding:5px 9px;font-weight:600}#population{color:#587b7d}#hints{color:#54777c;text-shadow:none}
@media(max-width:1200px){#stats{width:214px}.stat .label{font-size:9px}.stat i{width:4px}.stat .plus.material-symbol{margin-left:4px}#leaderboard{width:190px}}
@media(max-width:900px){#stats{left:10px;bottom:36px;width:196px;transform:none}.stat{padding-left:9px;padding-right:6px;height:26px}.stat .label{font-size:9px}.stat .segments{gap:1px;margin-left:4px}.stat i{width:4px;height:8px}.stat .plus.material-symbol{font-size:15px;width:15px;margin-left:4px}#points{font-size:9px}#progress{width:280px}#leaderboard{width:180px;right:12px}#minimap{width:120px}.xp span{font-size:10px}.choice{width:87px;min-height:82px;font-size:9px}.choice canvas{width:60px;height:46px}}
@media(max-width:700px){#stats{left:10px;bottom:111px;width:180px}.stat{height:25px;margin:3px 0;padding-right:5px}.stat .label{font-size:8px}.stat .segments{gap:1px;margin-left:2px}.stat i{width:4px;height:7px}.stat .plus.material-symbol{font-size:14px;width:14px;margin-left:3px}#points{font-size:9px;line-height:1.4;margin-bottom:6px}#progress{width:calc(100vw - 24px);max-width:340px;bottom:13px}#tankname{font-size:11px}.xp{height:31px}.xp span{line-height:25px}#leaderboard{width:155px;right:12px}#leaderboard h2,#team-population h2{font-size:10px;margin-bottom:8px}.leader span{font-size:9px}#mapbox{bottom:115px}#minimap{width:88px}.choice{width:82px;min-height:79px}.choice canvas{width:57px;height:44px}#choices{gap:5px}#evolutions small{font-size:8px}}
@media(max-width:900px) and (max-height:600px){#stats{bottom:35px}.stat{height:23px;margin:2px 0}#progress{width:270px}#mapbox{bottom:22px}body:has(#naval-status.naval-hud) #evolutions{max-width:180px}}
#top,#population{text-shadow:none}#change-mode,#reset-build{border:1px solid #8ca49a;background:#edf0e5ed;color:#4b6960;text-shadow:none}#change-mode:hover,#reset-build:hover{background:#fbfaf0}#reset-build{color:#687268}
@media(max-width:700px){.stat .label{font-size:9px}}
/* Reclaiming an existing vessel is progress, not a failed connection. */
#menu-status[data-connection="resuming"]:not(:empty){color:#496c73!important;border-left:2px solid #90aaa2;padding-left:9px;font-size:11px;line-height:1.65;text-shadow:none;overflow-wrap:anywhere}
#connection{pointer-events:auto;display:inline-flex;align-items:center;gap:4px;max-width:100%;min-height:27px;padding:4px 5px;border:1px solid transparent;border-radius:3px;background:transparent;color:#426970;font:inherit;font-weight:500;line-height:1.3;text-align:left;text-shadow:none;cursor:pointer}#connection::before{font-size:14px;margin:0;flex:none}#connection:hover:not(:disabled){background:#edf1e7e8;border-color:#91a99f;color:#315d52}#connection:focus-visible{outline:2px solid #527e6c;outline-offset:2px;background:#f2f3e8}#connection:disabled{cursor:wait;color:#637f80}
@media(max-width:700px){#connection{gap:3px;padding:3px 4px;min-height:25px;font-size:9px}#connection::before{font-size:13px}}