/* Tidebreak HUD and menus. Layout: top bar, bottom-left chart, bottom-centre dock;
   panels open between them and only their body scrolls. */
:root{
 color-scheme:dark;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:16px;color:var(--text);background:#0c2028;
 --text:#e6ece4;--muted:#93a9ae;--cyan:#56d6da;--gold:#f2cb7a;--red:#ef8068;
 --glass:rgba(8,20,26,.86);--solid:#0b1a20;--raise:#14262e;--raise-2:#1b323b;--line:rgba(130,180,190,.18);--line-2:rgba(130,180,190,.32);
 --radius:12px;--gap:12px;--edge:16px;--helm-h:196px;
 --shadow:0 12px 40px rgba(0,8,12,.45);
}
*{box-sizing:border-box}
body{margin:0;overflow:hidden;background:#0c2028}
canvas#world,canvas#labels{position:fixed;inset:0;width:100%;height:100%;display:block}
#world{outline:none;touch-action:none}#labels{pointer-events:none}
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Thin themed scrollbars everywhere. */
*{scrollbar-width:thin;scrollbar-color:rgba(130,180,190,.35) transparent}
::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(130,180,190,.3);border-radius:8px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background-color:rgba(130,180,190,.5)}

h1,h2,h3{font-weight:600;margin:0;letter-spacing:.02em}
h2{color:var(--gold);font-size:20px}
h3{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.14em;margin:20px 0 10px}
p{margin:0}
.muted{color:var(--muted);font-size:14px;line-height:1.5}
.accent{color:var(--cyan);font-size:14px}
kbd{display:inline-block;min-width:22px;padding:2px 6px;border:1px solid var(--line-2);border-bottom-width:2px;border-radius:5px;background:var(--raise);color:var(--text);font:600 12px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;text-align:center}

/* Controls */
button{font:inherit;font-size:14px;font-weight:500;color:var(--text);border:1px solid var(--line-2);border-radius:8px;background:var(--raise-2);padding:9px 14px;cursor:pointer;line-height:1.3;min-height:40px;transition:background .12s,border-color .12s,transform .06s}
button:hover:not(:disabled){background:#24414b;border-color:rgba(130,200,205,.55)}
button:active:not(:disabled){transform:translateY(1px)}
button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
button:disabled{opacity:.4;cursor:not-allowed}
button strong,button small{display:block}button strong{font-weight:600}
button small{font-size:12px;color:var(--muted);margin-top:3px;line-height:1.4}
button.primary{background:linear-gradient(180deg,#f5d58e,#dfb35d);border-color:#f5d58e;color:#1d1608;font-weight:700;letter-spacing:.06em}
button.primary:hover:not(:disabled){background:linear-gradient(180deg,#fbe0a3,#e8bf6b);border-color:#fbe0a3}
button.link{background:none;border:0;min-height:0;padding:4px 0;color:var(--cyan);text-decoration:underline;text-underline-offset:3px}
button.link:hover:not(:disabled){background:none;color:#8ce9eb}
button.close{min-height:36px;min-width:36px;padding:0;border-radius:50%;background:transparent;border-color:transparent;color:var(--muted);font-size:16px}
button.close:hover:not(:disabled){background:var(--raise-2);color:var(--text)}
button.small{min-height:30px;padding:4px 10px;font-size:12px}
button[data-key]::before{content:attr(data-key);display:inline-block;margin-right:8px;padding:1px 5px;border:1px solid var(--line-2);border-radius:4px;font:600 10px/1.4 ui-monospace,Consolas,monospace;color:var(--muted);vertical-align:1px}
select,input{font:inherit;font-size:15px;color:var(--text);background:var(--raise);border:1px solid var(--line-2);border-radius:8px;padding:9px 11px;min-height:40px;width:100%}
select{cursor:pointer}
.field{display:block;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
.field>select,.field>input,.field>.pair{margin-top:6px;text-transform:none;letter-spacing:0}
input[type=range]{padding:0;border:0;background:none;accent-color:var(--gold);cursor:pointer}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.actions{display:flex;flex-wrap:wrap;gap:8px}

/* Panels */
.panel,.card{background:var(--glass);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.panel{display:flex;flex-direction:column;overflow:hidden}
.panel-head{display:flex;align-items:center;gap:14px;padding:14px 16px 12px 20px;border-bottom:1px solid var(--line);flex:none}
.panel-head h2{flex:none}.panel-head>p,.panel-head>.muted{flex:1;min-width:0;font-size:13px;color:var(--muted)}
.panel-head>button:last-child{margin-left:auto}
.panel-body{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:16px 20px}
.panel-body>p+p,.panel-body>p+div{margin-top:10px}
.panel-foot:not(:has(>:not([hidden]))){display:none}
.panel-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 16px;border-top:1px solid var(--line);flex:none}

/* Top bar */
.top{position:fixed;left:var(--edge);right:var(--edge);top:var(--edge);display:flex;align-items:flex-start;justify-content:space-between;gap:20px;pointer-events:none}
.brand-block{min-width:0}
h1{display:flex;align-items:center;gap:8px;font-size:15px;letter-spacing:.32em;color:var(--gold);white-space:nowrap;text-shadow:0 2px 6px rgba(0,0,0,.5)}
.mark{width:22px;height:22px;color:var(--cyan);flex:none}
#objective,#mp-status{margin-top:8px;display:inline-block;max-width:min(560px,50vw);padding:5px 12px;border-radius:14px;background:var(--glass);border:1px solid var(--line);font-size:13px;color:#cfdcdc}
#objective:empty,#mp-status:empty{display:none}
#mp-status{display:block;width:max-content}
.hud-stats{display:flex;align-items:center;gap:8px;padding:6px 8px 6px 14px;border-radius:999px;background:var(--glass);border:1px solid var(--line);box-shadow:var(--shadow);font-variant-numeric:tabular-nums}
.fort-bars{display:grid;gap:4px;margin-right:6px}
.fort{display:grid;grid-template-columns:44px 120px;align-items:center;gap:6px;font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.fort i{height:6px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden}
.fort b{display:block;height:100%;width:var(--hp,100%);border-radius:3px;transition:width .3s}
.home b{background:var(--cyan)}.enemy b{background:var(--red)}
.chip{padding:6px 12px;border-radius:999px;background:var(--raise);font-size:14px;font-weight:600}
.chip.gold{color:var(--gold)}.chip.gold::before{content:"";display:inline-block;width:9px;height:9px;margin-right:7px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ffe7a6,#c9952f);vertical-align:0}
.tools{position:fixed;right:var(--edge);top:76px;display:flex;flex-direction:column;align-items:flex-end;gap:6px;z-index:6}
button.tool{min-height:28px;padding:3px 10px;font-size:11px;letter-spacing:.06em;color:var(--muted);background:var(--glass);border-color:var(--line)}
#diagnostics{position:fixed;right:var(--edge);top:146px;z-index:6;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--glass);color:#d6e3ea;font:12px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;font-variant-numeric:tabular-nums;pointer-events:none;white-space:pre;max-width:calc(100vw - 32px);overflow:hidden}
#ai-plan{position:fixed;top:140px;left:50%;transform:translateX(-50%);max-width:min(640px,80vw);padding:5px 12px;border-radius:8px;background:rgba(6,22,32,.72);color:#cfe7f0;font-size:13px;line-height:1.35;text-align:center;pointer-events:none}#ai-plan b{color:var(--gold)}#ai-plan.docked{transform:none;max-width:none;box-sizing:border-box;text-align:left;padding:8px 10px;border:1px solid rgba(110,200,230,.18);border-radius:10px;background:rgba(6,22,32,.82);white-space:normal}#score-rows .ai-order{display:block;font-size:11px;color:#9fc3d1;font-weight:400}
#notice{position:fixed;top:104px;left:20%;right:20%;text-align:center;color:var(--gold);font-size:19px;font-weight:500;pointer-events:none;text-shadow:0 2px 8px #04121a,0 0 2px #04121a}

/* Bottom: chart card + centred dock */
.helm{position:fixed;left:var(--edge);right:var(--edge);bottom:var(--edge);display:flex;align-items:flex-end;gap:var(--gap);pointer-events:none}
.helm>*{pointer-events:auto}
.chart{flex:none;padding:10px;color:var(--text);font-size:10px;letter-spacing:.04em;background:linear-gradient(145deg,rgba(21,43,51,.97),rgba(7,22,30,.97));border-color:rgba(151,190,181,.35);box-shadow:0 8px 28px #0006,inset 0 1px #b1d4c113}
.chart>div{margin:0 0 7px;color:var(--muted)}
.chart-title{font-size:10px;font-weight:650;text-transform:uppercase;letter-spacing:.13em;color:#d5e5dc}
.chart-orientation{font-size:9px;letter-spacing:.06em;text-align:center}
.chart .chart-legend{display:flex;justify-content:space-between;gap:5px;margin:9px 0 0;font-size:9px;letter-spacing:0;color:#cedbd6}
.chart-legend span{display:flex;align-items:center;gap:4px}
.chart-legend span::before{content:"";width:5px;height:5px;display:block;border-radius:50%;background:#fff5d6}
.chart-legend .chart-you::before{border-radius:0;clip-path:polygon(50% 0,100% 100%,50% 75%,0 100%);width:7px;height:7px}
.chart-legend .chart-ally::before{background:#70ded5}.chart-legend .chart-enemy::before{background:#ff9388}
.chart-legend .chart-shop::before{background:#aaa7bd;border-radius:0;transform:rotate(45deg)}
.chart .chart-hint{margin:7px 0 0;text-align:center;font-size:8px;letter-spacing:0;color:#93a9ae}
.chart-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
button.map-size{min-height:20px;padding:0 6px;font-size:10px;letter-spacing:.04em;color:var(--muted);background:transparent;border-color:var(--line)}
.helm .chart.expanded{position:fixed;left:var(--edge);top:72px;z-index:6}
/* H hides the HUD for a clean view; menus, dialogs and the scoreboard stay usable. */
body.ui-hidden .chat:not(.open),body.ui-hidden .top,body.ui-hidden .tools,body.ui-hidden .helm,body.ui-hidden #notice,body.ui-hidden #mobile-status,body.ui-hidden .shop,body.ui-hidden .drawer{display:none!important}
#scoreboard{position:fixed;z-index:9;left:50%;top:72px;transform:translateX(-50%);width:min(860px,calc(100vw - 32px));max-height:calc(100vh - 150px)}
.score-body{overflow:auto;padding:6px 12px 12px}
#scoreboard table{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
#scoreboard th{position:sticky;top:0;background:var(--solid);color:var(--muted);font-size:11px;font-weight:500;letter-spacing:.04em;text-align:right;padding:8px 8px;border-bottom:1px solid var(--line)}
#scoreboard td{text-align:right;padding:6px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
#scoreboard th:nth-child(-n+2),#scoreboard td:nth-child(-n+2){text-align:left}
#scoreboard td:nth-child(2){color:var(--muted);max-width:180px;overflow:hidden;text-overflow:ellipsis}
#scoreboard tr.team-head td{color:var(--cyan);font-weight:600;letter-spacing:.06em;padding-top:12px;text-align:left}
#scoreboard tr.team-head.enemy td{color:#ef8068}
#scoreboard tr.me td{background:rgba(86,214,218,.10)}#scoreboard tr.offline td{opacity:.55}
#minimap{width:152px;height:208px;display:block;cursor:crosshair;border-radius:5px;box-shadow:0 0 0 1px #0006}
.dashboard{flex:0 1 980px;margin:0 auto;min-width:0;padding:12px}
.dash-head{display:flex;flex-wrap:wrap;gap:4px 16px;align-items:baseline;margin:0 2px 10px}
#status{color:var(--cyan);font-size:14px;font-variant-numeric:tabular-nums}
#trade-status{color:var(--gold);font-size:13px}#trade-status:empty{display:none}
.slots{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-bottom:10px}
.slots button{position:relative;overflow:hidden;text-align:left;font-size:13px;padding:8px 10px 12px;min-height:58px;background:var(--raise);border-color:var(--line)}
.slots button strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slots button small{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slots button.empty{border-style:dashed;color:#71878e;background:rgba(20,38,46,.5)}
.slots button.weapon small{color:#cbd8d4}
.slots button.weapon::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:var(--reload,0%);background:var(--cyan);transition:width .1s linear}
.slots .selected,.shop-tabs .selected{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
.actions #ability{flex:1}
.helm .actions #ability.selected,.skill-row button.selected{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold);color:var(--gold)}
.helm .actions button{font-size:13px;padding:8px 12px;text-transform:uppercase;letter-spacing:.04em}
.helm .actions #shop-toggle{color:var(--gold)}
.controls{display:none}

/* Shop */
.shop{position:fixed;z-index:7;left:50%;transform:translateX(-50%);top:72px;bottom:calc(var(--helm-h) + var(--edge) + 10px);width:min(960px,calc(100vw - 32px));min-height:280px}
.shop-tabs{display:flex;gap:4px;padding:10px 16px 0;flex:none;border-bottom:1px solid var(--line);overflow-x:auto}
.shop-tabs button{flex:none;min-height:38px;border:0;border-bottom:2px solid transparent;border-radius:0;background:none;color:var(--muted);padding:8px 14px}
.shop-tabs button:hover:not(:disabled){background:none;color:var(--text)}
.shop-tabs button.selected{color:var(--gold);border-bottom-color:var(--gold);box-shadow:none}
.search{display:block;padding:12px 20px 0;flex:none}
.item-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:8px}
.item-grid button{text-align:left;padding:10px 12px;background:var(--raise);border-color:var(--line)}
.item-grid button:hover:not(:disabled){background:var(--raise-2)}
.item-grid button strong{display:flex;justify-content:space-between;gap:10px}
.ships button:has(.ship-thumb:not([hidden])){display:grid;grid-template-columns:96px 1fr;column-gap:10px;align-items:center}.ships button>:not(.ship-thumb){grid-column:2}
.ship-thumb{grid-column:1;grid-row:1/span 4;width:96px;height:64px;object-fit:contain;border-radius:6px;background:radial-gradient(ellipse at 50% 60%,rgba(31,111,147,.55),rgba(31,111,147,.12) 70%)}
.price{color:var(--gold);font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.section-note{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--muted);font-size:13px;margin-bottom:12px}
#construction-status,#research-status{margin-bottom:12px}
.slot-actions span{flex:1;min-width:200px;font-size:13px;color:var(--muted)}
.slot-actions button{font-size:13px}

/* Side drawers: skills and accuracy notes */
.drawer{position:fixed;z-index:8;right:var(--edge);top:72px;bottom:calc(var(--helm-h) + var(--edge) + 10px);width:min(520px,calc(100vw - 32px));min-height:260px}
#accuracy-panel{z-index:12}
.skill-row{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;border-top:1px solid var(--line);padding:10px 0}
.skill-row p{font-size:14px;line-height:1.45}.skill-row button{font-size:12px;min-height:34px;padding:6px 10px}
#skills-list>p{margin-top:12px;font-size:12px;color:var(--muted)}
#accuracy-list p{border-top:1px solid var(--line);padding:10px 0;font-size:13px;line-height:1.5}
.draft{position:fixed;z-index:11;left:50%;transform:translateX(-50%);top:72px;width:min(780px,calc(100vw - 32px));max-height:calc(100dvh - var(--helm-h) - 100px)}
#draft-pool .draft-row{display:flex;flex-wrap:wrap;gap:6px;border-top:1px solid var(--line);padding:10px 0}
#draft-pool button{font-size:12px;min-height:32px;padding:5px 9px}
#draft-pool button.banned{text-decoration:line-through;opacity:.45}

/* Overlays: menu, ending, multiplayer */
.overlay{position:fixed;inset:0;display:grid;place-items:center;padding:20px;background:radial-gradient(ellipse at center,rgba(4,14,18,.35),rgba(4,14,18,.75));z-index:10}
.dialog{width:min(520px,100%);max-height:calc(100dvh - 40px)}
.dialog>h2{padding:28px 28px 0;font-size:26px}
.dialog>p{padding:12px 28px;color:#cfdcdc;line-height:1.6;white-space:pre-line}
.dialog>button{margin:8px 28px 28px}
#ending .dialog{text-align:center}#ending h2{font-size:34px;letter-spacing:.12em}

.menu{flex-direction:row;width:min(980px,100%);max-height:calc(100dvh - 40px)}
.menu-main{flex:0 0 380px;display:flex;flex-direction:column;gap:18px;padding:32px;background:linear-gradient(160deg,rgba(86,214,218,.08),transparent 60%);border-right:1px solid var(--line)}
.menu-brand{display:flex;gap:14px;align-items:center;margin-bottom:6px}
.menu-brand .mark{width:48px;height:48px}
.menu-brand h2{font-size:30px;letter-spacing:.28em}
.menu-brand p{font-size:13px;color:var(--muted);margin-top:4px;line-height:1.4}
.menu-actions{display:flex;flex-direction:column;gap:10px;margin-top:auto}
.menu-actions .primary{min-height:54px;font-size:17px}
.menu-actions .link{align-self:center}
.menu-info{flex:1;min-width:0;overflow:auto;padding:12px 32px 28px}
.tips{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.tips li{position:relative;padding-left:20px;font-size:14px;line-height:1.55;color:#cfdcdc}
.tips li::before{content:"";position:absolute;left:2px;top:.6em;width:7px;height:7px;border-radius:2px;background:var(--cyan);transform:rotate(45deg)}
#preview-briefing{font-size:14px;line-height:1.6;color:#cfdcdc}
.keys{display:grid;grid-template-columns:auto 1fr;gap:9px 16px;margin:0;align-items:center}
.keys dt{display:flex;gap:4px}.keys dd{margin:0;font-size:14px;color:#cfdcdc}
.touch-note{margin-top:16px}

#multiplayer{z-index:20}
.multiplayer-panel{width:min(720px,100%)}
.multiplayer-panel .panel-body{display:flex;flex-direction:column;gap:14px}
#mp-form,#mp-room{display:flex;flex-direction:column;gap:14px}
#mp-form[hidden],#mp-room[hidden]{display:none}
.battles-head{display:flex;align-items:center;justify-content:space-between}.battles-head h3{margin:0}
.room-list{border:1px solid var(--line);border-radius:10px;padding:4px 14px;min-height:140px;max-height:min(46vh,420px);overflow:auto;font-size:14px;color:var(--muted);display:flex;flex-direction:column;justify-content:center}
.room-list:has(.battle-row){justify-content:flex-start}
.menu-rooms{display:flex;flex-direction:column;gap:12px;margin:20px 0 6px}.menu-rooms .battles-head h3{margin:0}
.menu-rooms .room-list{min-height:72px;max-height:min(30vh,260px)}
.room-note{color:#ffad95;font-size:14px;margin:0}.room-note:empty{display:none}
.battle-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);color:var(--text)}
.battle-row:last-child{border-bottom:0}.battle-row>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.battle-row strong{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.battle-row small{color:var(--muted);font-size:13px}
.battle-row button{min-width:96px}.battle-row.closed{opacity:.55}
.create-row{display:flex;gap:8px;align-items:flex-end}.create-row .field{flex:1}
.menu-actions #start:not(.primary),.menu-actions #full-match{font-size:14px}
.multiplayer-panel details summary{cursor:pointer;color:var(--muted);font-size:14px}
.multiplayer-panel details[open]{display:flex;flex-direction:column;gap:12px}
#mp-roster{display:grid;grid-template-columns:1fr 1fr;gap:16px}#mp-roster p{font-size:14px;margin:6px 0}
#mp-roster .mp-ai{margin:6px 0 0}#mp-roster .mp-map{grid-column:1/-1;margin:2px 0 0}#mp-roster .mp-map-button{font-size:12px;padding:4px 10px}#mp-roster .mp-map-seed{width:8.5em;font-size:12px;padding:3px 6px}#mp-roster .mp-ai-toggle{font-size:12px;padding:4px 10px}
#mp-roster .mp-bot-lineup{font-size:12px;margin:4px 0;max-width:100%}#mp-roster .mp-bot-clan{font-size:11px;opacity:.8;margin:2px 0}#mp-roster .mp-bot-add{font-size:12px;padding:4px 10px;margin-top:4px}#mp-roster .mp-bot-remove{font-size:11px;padding:0 6px;min-height:0;line-height:18px;vertical-align:middle}
#mp-error{color:#ffad95;font-size:14px}#mp-error:empty{display:none}
.share{display:flex;gap:8px;align-items:flex-end}.share .field{flex:1}
.multiplayer-panel .panel-foot{justify-content:space-between}
.map-overview:has(#mp-room:not([hidden])) .multiplayer-panel{width:min(1240px,100%)}
.map-overview #mp-room:not([hidden]){display:grid;grid-template-columns:minmax(280px,1.15fr) minmax(320px,1fr);gap:24px;align-items:stretch;flex-shrink:0}
.mp-room-details{display:flex;flex-direction:column;gap:14px;min-width:0}
.mp-map-preview{min-width:0;display:flex;flex-direction:column;gap:12px}
.mp-map-preview,.mp-room-details{padding:14px;border:1px solid var(--line);border-radius:10px;background:rgba(4,18,24,.35)}
.mp-room-details #mp-roster>div{border:0;border-radius:0;padding:0}
.mp-map-preview[hidden]{display:none}
.mp-map-preview canvas{display:block;width:100%;max-height:max(240px,calc(100dvh - 300px));object-fit:contain;background:#081d2a;border:1px solid var(--line);border-radius:8px}
.mp-map-legend{display:flex;flex-wrap:wrap;gap:12px;margin:0;color:var(--muted);font-size:11px;line-height:1.5}
.mp-map-legend span:first-child{color:#70ded5}.mp-map-legend span:nth-child(2){color:#ff9388}
#mp-map-controls .mp-map{display:flex;flex-direction:column;gap:6px;margin:0;font-size:14px;line-height:1.5}
#mp-map-controls .mp-map small{font-size:12px;color:var(--muted)}
#mp-map-controls .mp-map small:empty{display:none}
.mp-map-actions{display:grid;grid-template-columns:auto minmax(130px,1fr) minmax(65px,.6fr) auto;gap:8px;margin-top:4px}
.mp-map-actions:empty{display:none}
.mp-map-actions:has(>:nth-child(3):last-child){grid-template-columns:1fr minmax(65px,.6fr) auto}
#mp-map-controls .mp-map-button{font-size:12px;padding:6px 10px}
#mp-map-controls .mp-map-seed{width:100%;font-size:12px;padding:6px 10px;min-width:0}
#mp-roster>div{min-width:0;border:1px solid var(--line);border-radius:8px;padding:12px}
#mp-roster h3{margin:0 0 12px}#mp-roster .mp-open-seats{font-size:12px;color:var(--muted);margin:8px 0 12px}
.mp-room-note{font-size:12px;line-height:1.6;margin:0}
.mp-room-controls{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:auto}
.mp-room-controls button{font-size:12px;white-space:nowrap;padding:10px 12px}
.mp-room-controls .mp-secondary-actions:has(>button:not([hidden])){display:flex}
.mp-room-controls .mp-secondary-actions:not(:has(>button:not([hidden]))){display:none}
@media(max-width:760px){.mp-room-controls{position:static}.mp-room-controls .mp-primary-actions,.mp-room-controls .mp-secondary-actions{width:auto}.mp-room-controls .mp-primary-actions{margin-left:auto;order:0}.mp-room-controls button{font-size:11px;padding:10px 8px}}
.mp-secondary-actions,.mp-primary-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.mp-primary-actions{margin-left:auto}.mp-primary-actions:not(:has(button:not([hidden]))){display:none}
.multiplayer-panel .panel-foot button{white-space:nowrap;flex:none;font-size:12px;padding:10px 12px}
.mp-secondary-actions button{background:transparent;color:var(--muted)}
@media(max-width:760px){.map-overview #mp-room:not([hidden]){grid-template-columns:1fr;gap:20px}.mp-map-preview canvas{max-height:none}.mp-map-actions,.mp-map-actions:has(>:nth-child(3):last-child){grid-template-columns:1fr 1fr}.mp-map-actions:has(>:nth-child(3):last-child)>:first-child{grid-column:1/-1}#mp-map-controls .mp-map-button{min-height:40px}.multiplayer-panel .panel-foot{gap:8px}.mp-primary-actions,.mp-secondary-actions{width:100%;margin:0;flex-wrap:nowrap}.mp-primary-actions{order:-1}.multiplayer-panel .panel-foot button{flex:1;min-width:0;min-height:40px;padding:8px;font-size:11px}}

/* Mid-size screens */
@media(max-width:1100px){
 .fort{grid-template-columns:40px 80px}
 #minimap{width:136px;height:186px}
 .helm .actions button{font-size:12px;padding:7px 9px}
 button[data-key]::before{display:none}
 .menu-main{flex-basis:330px;padding:26px}
}
@media(max-height:760px) and (min-width:761px){.menu-info{padding-top:4px}.tips{gap:6px}.keys{gap:6px 14px}.menu-main{gap:14px}}

/* Compact touch HUD. */
.mobile-only{display:none}
@media(max-width:760px),(pointer:coarse) and (max-height:600px){
 :root{--edge:8px}
 .mobile-only{display:block}
 .top,#objective,#mp-status,.helm #status,.helm .controls,.helm .chart{display:none}
 button[data-key]::before{display:none}
 #mobile-status{position:fixed;top:max(8px,env(safe-area-inset-top));left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));padding:9px 14px;border:1px solid var(--line);border-radius:999px;background:var(--glass);color:var(--cyan);font-size:14px;font-variant-numeric:tabular-nums;text-align:center;pointer-events:none}
 .helm{left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));bottom:max(8px,env(safe-area-inset-bottom))}
 .dashboard{padding:6px;flex:1}
 .helm .actions{flex-wrap:nowrap;gap:5px}.helm .actions button{flex:0 1 auto;min-width:0}.helm .actions #ability{flex:1 1 0}
 .helm .actions button{min-height:44px;padding:6px 9px;font-size:12px;letter-spacing:0}
 #notice{top:calc(max(8px,env(safe-area-inset-top)) + 48px);left:12px;right:12px;font-size:14px}#ai-plan{top:calc(max(8px,env(safe-area-inset-top)) + 76px);font-size:11px}
 .tools{top:calc(max(8px,env(safe-area-inset-top)) + 48px);right:max(8px,env(safe-area-inset-right))}
 .tools .tool{min-height:32px}#notice{top:calc(max(8px,env(safe-area-inset-top)) + 88px)}
 #diagnostics{top:calc(max(8px,env(safe-area-inset-top)) + 90px);right:8px;font-size:10px;max-height:40dvh;white-space:pre-wrap}
 #ship-panel{position:fixed;z-index:7;inset:calc(max(8px,env(safe-area-inset-top)) + 48px) max(8px,env(safe-area-inset-right)) calc(max(8px,env(safe-area-inset-bottom)) + 66px) max(8px,env(safe-area-inset-left))}
 #ship-panel.mobile-only{display:flex}#ship-panel[hidden]{display:none!important}
 #mobile-tools{margin:12px 0}#mobile-tools button{flex:1;min-height:44px;font-size:13px}
 #mobile-inventory #status{display:block;margin:12px 0 8px;font-size:13px}
 #mobile-chart button.map-size{display:none}#mobile-chart .chart{display:block;width:max-content;margin:12px auto}#mobile-chart #minimap{width:176px;height:240px}#mobile-chart .chart-hint{display:none}
 .shop,.drawer,.draft{inset:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));width:auto;max-height:none;min-height:0;transform:none;z-index:7}
 .drawer{z-index:8}#accuracy-panel{z-index:12}.draft{z-index:11}
 .panel-head{padding:10px 10px 10px 14px;flex-wrap:wrap;gap:8px}.panel-head h2{font-size:17px}
 .panel-head>p{order:3;flex-basis:100%}
 .panel-body{padding:12px 14px}.panel-foot{padding:10px 12px}
 .shop-tabs{padding:4px 10px 0}.shop-tabs button{min-height:44px;padding:8px 10px}
 .search{padding:10px 14px 0}
 .slot-actions span{min-width:0;flex-basis:100%}.slot-actions button{min-height:44px;flex:1}
 #shop-inventory .slots,#mobile-inventory .slots{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0 0 12px}
 .slots button{min-height:56px;font-size:12px;padding:6px 6px 10px}
 .slots button strong{white-space:normal;overflow-wrap:anywhere}
 .item-grid{grid-template-columns:1fr}.item-grid button{min-height:48px}
 .skill-row{grid-template-columns:1fr auto}.skill-row p{grid-column:1/-1}.skill-row button{min-height:44px}
 .overlay{padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}
 .menu{flex-direction:column;overflow:auto;max-height:100%}
 .menu-main{flex:none;padding:22px;border-right:0;border-bottom:1px solid var(--line)}
 .menu-brand h2{font-size:24px}.menu-brand .mark{width:40px;height:40px}
 .menu-info{flex:none;overflow:visible;padding:4px 22px 22px}
 /* Phones: open rooms lead the menu; the briefing stays below the play buttons. */
 .menu-info{display:contents}.menu-info>*{margin-left:22px;margin-right:22px}.menu-info>:last-child{margin-bottom:22px}
 .menu-rooms{order:-1;margin:0;padding:18px 22px;border-bottom:1px solid var(--line)}
 .keys{display:none}.menu-info h3:nth-of-type(2){display:none}
 .dialog{max-height:100%}
 .pair{grid-template-columns:1fr}.multiplayer-panel .pair{grid-template-columns:1fr}
 select,input{font-size:16px}
 .create-row{flex-wrap:wrap}.create-row button{min-height:44px;flex:1}#mp-roster{gap:10px}
 .multiplayer-panel .actions button,.panel-foot button{min-height:44px;flex:1}
}
@media(pointer:coarse) and (max-height:600px) and (min-width:600px){
 .item-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#shop-inventory .slots,#mobile-inventory .slots{grid-template-columns:repeat(6,minmax(0,1fr))}
 .menu{flex-direction:row}.menu-main{flex:0 0 300px;border-right:1px solid var(--line);border-bottom:0}.menu-info{overflow:auto}
 .menu-info{display:block}.menu-info>*{margin-left:0;margin-right:0}.menu-rooms{order:0;padding:0;border-bottom:0;margin:20px 0 6px}
}
@media(pointer:fine){.touch-note{display:none}}
.pair:has(>[hidden]){grid-template-columns:1fr}
/* Chat (multiplayer): kill feed, streaks, bot and player chat; bottom-left above the chart, also over the lobby. */
.chat{position:fixed;z-index:21;left:var(--edge);bottom:calc(var(--helm-h) + var(--edge) + 10px);width:min(440px,calc(100vw - 32px));display:flex;flex-direction:column;gap:6px;pointer-events:none;
 padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:rgba(6,22,32,.55);box-shadow:0 6px 20px rgba(0,8,12,.25)}
/* Closed: one light translucent backing behind the whole text feed; controls remain separate. */
.chat:not(.open){padding:0;border-color:transparent;background:none;box-shadow:none}
.chat:not(.open) .chat-log{width:fit-content;max-width:100%;padding:4px 6px;border-radius:5px;background:rgba(6,22,32,.55)}
.chat:not(.open) .chat-line{text-shadow:0 1px 2px #04121a,0 0 4px #04121a,0 0 1px #000}
@media(pointer:fine){.chat:not(.open):not(.lobby) .chat-bar{display:none}}
.chat[hidden]{display:none}
.chat-log{max-height:min(30vh,240px);overflow:hidden;display:flex;flex-direction:column;gap:2px;font-size:13px;line-height:1.35}
.chat-log:empty,.chat:not(.open) .chat-log:not(:has(.chat-line:not(.old))){display:none}
.chat.open .chat-log{overflow-y:auto;pointer-events:auto;scrollbar-width:thin}
.chat-line{color:var(--text);text-shadow:0 1px 2px #04121a;overflow-wrap:anywhere}
.chat:not(.open) .chat-line.old{display:none}
.chat-time{color:var(--muted);font-size:11px;margin-right:6px;font-variant-numeric:tabular-nums}
.chat-tag{color:var(--muted);margin-right:4px}.chat-line.all .chat-tag{color:var(--gold)}
.chat-name{font-weight:600;margin-right:5px}.chat-name.team-0{color:var(--cyan)}.chat-name.team-1{color:var(--red)}.chat-name.commander{color:var(--gold)}
.chat-line.system .chat-text{color:#d9c79a}
.kind-kill .chat-text{color:#f4c0b0!important}.kind-death .chat-text{color:var(--muted)!important}.kind-structure .chat-text{color:#f2a85a!important}
.kind-streak .chat-text,.kind-multi .chat-text,.kind-victory .chat-text{color:var(--gold)!important;font-weight:700}
.kind-join .chat-text,.kind-leave .chat-text,.kind-start .chat-text,.kind-info .chat-text{color:var(--muted)!important}
.chat-bar{display:flex;gap:6px;align-items:center;pointer-events:auto;width:100%}
.chat.lobby:not(.open) .chat-bar{width:fit-content}
.chat-form{display:flex;gap:6px;flex:1;min-width:0}.chat-form[hidden]{display:none}
.chat-form input{flex:1;min-width:0;padding:6px 10px;border-radius:8px;border:1px solid var(--line-2);background:rgba(6,22,32,.6);color:var(--text);font:inherit;font-size:14px}
.chat-bar button{padding:4px 10px;min-height:32px;font-size:12px}
.chat-channel.team{color:var(--cyan)}.chat-channel.all{color:var(--gold)}
.chat-toggle{opacity:.8}.chat.open .chat-toggle{opacity:1}
@media(max-width:760px),(pointer:coarse) and (max-height:600px){
 .chat{left:max(8px,env(safe-area-inset-left));width:min(360px,calc(100vw - 16px));bottom:calc(var(--helm-h) + 18px)}
 .chat-log{max-height:22vh;font-size:11px}.chat-time{display:none}
}

#world.camera-moving{cursor:grabbing;}

/* Overhead info controls remain readable within the phone menu. */
#entity-info-panel{position:fixed;z-index:30;right:var(--edge);top:72px;width:min(460px,calc(100vw - 24px));max-height:calc(100dvh - 96px)}
.entity-info{font-size:12px}
.entity-info p{color:var(--muted);line-height:1.5;margin:10px 0}
.entity-info-scroll{overflow-x:auto}
.entity-info table{width:100%;border-collapse:collapse;font-size:11px}
.entity-info th,.entity-info td{padding:6px 3px;text-align:center}
.entity-info th:first-child{text-align:left}
.entity-info input[type=checkbox]{width:22px;height:22px;min-height:22px;padding:0;margin:0;vertical-align:middle;accent-color:var(--cyan);cursor:pointer}
.entity-info-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.entity-info-actions button{font-size:11px;padding:7px}

.mp-map-land{display:grid;grid-template-columns:minmax(80px,auto) minmax(120px,1fr);gap:3px 12px;align-items:center}.mp-map-land input{width:100%;accent-color:var(--teal,#70ded5)}.mp-map-land small{grid-column:2;text-align:center}.mp-map-land input:disabled{opacity:.6}