#network-dialog{width:820px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);overflow:auto}
.server-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.server-heading h3{margin:8px 0}
.server-table{overflow-x:auto;max-height:270px}#server-browser table{width:100%;border-collapse:collapse;font-size:13px}#server-browser th{text-align:left;color:#bfb99e;font-weight:normal;padding:6px 8px;white-space:nowrap}#server-browser td{padding:10px 8px;border-top:1px solid #68785866;vertical-align:top}#server-browser td:first-child{min-width:190px;overflow-wrap:anywhere}#server-browser small{display:block;margin-top:5px;color:#c0c8b3}#server-browser td:last-child{white-space:nowrap}#network-dialog a{color:#e2c88e;display:inline-block;margin:5px}.server-offline strong{color:#aaa}.network-hint{font-size:12px;color:#bfc6b1;line-height:1.5}.server-address{display:flex;gap:8px;align-items:center}.server-address input{min-width:0;flex:1}.server-address button{white-space:nowrap}#network-connected{color:#e2c88e;overflow-wrap:anywhere}#network-join{border-top:1px solid #68785866;margin-top:14px}#network-target-page[hidden]{display:none}
#network-dialog label{display:block;margin:12px 0}#network-dialog input,#network-dialog select{display:block;width:100%;margin:6px 0;padding:8px;background:#172017;color:#e9e8db;border:1px solid #687858;border-radius:4px}
#network-seats .network-seat{padding:8px 12px;background:#172017;margin:8px 0;border-left:3px solid #b59a60}
#network-seats label{margin:0 0 6px}#network-seats span{color:#c9cfba}#network-seats select{margin:5px 0}
#network-status{white-space:pre-wrap;color:#e2c88e}#network-dialog button{margin:4px 4px 4px 0}
#network-toast{position:absolute;top:10px;left:10px;max-width:320px;padding:7px 10px;pointer-events:none;background:#172017dd;color:#e2c88e;font:12px ui-monospace,monospace;white-space:pre-line;border:1px solid #68785866}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#101710;color:#e9e8db;font:14px system-ui,sans-serif}
#app{display:grid;grid-template-columns:minmax(0,1fr);width:100%;height:100%;height:100dvh}
#stage{position:relative;min-width:0;min-height:0;overflow:hidden;background:#101710}
#game{display:block;width:100%;height:100%;outline:none;touch-action:none}
#toolbar{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;gap:6px;padding:5px;background:#172017dd;border:1px solid #68785866;border-radius:8px;opacity:.65;transition:opacity .15s;white-space:nowrap}
#toolbar:hover,#toolbar:focus-within{opacity:1}
button,select{font:inherit;background:#354530;color:inherit;border:1px solid #687858;border-radius:5px;padding:7px 10px;cursor:pointer}
button:hover{background:#455a3c}button:focus-visible,select:focus-visible{outline:2px solid #cfb66a;outline-offset:2px}button:disabled{opacity:.45;cursor:default}
#loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#101710;z-index:3;text-align:center}
h1{font-size:20px;margin:0 0 16px}#phase{color:#bdc9b3}
#error{position:absolute;left:16px;right:16px;top:70px;margin:0;padding:12px;color:#ffd1bc;background:#401d15ed;border:1px solid #b46d4f;border-radius:6px;z-index:5}
body.debug #app{grid-template-columns:minmax(0,1fr) 300px}
#debug-panel{padding:16px;overflow:auto;min-height:0;background:#1b241c;border-left:1px solid #485140;line-height:1.5}
#debug-panel select{display:block;width:100%;margin:6px 0 10px}
#details{white-space:pre-wrap;overflow-wrap:anywhere;font:12px ui-monospace,monospace;color:#c8d1bc}
.tools{display:grid;gap:8px;margin:12px 0}#rates{font-variant-numeric:tabular-nums}
dialog{max-width:min(440px,calc(100vw - 32px));padding:24px;color:#e9e8db;background:#202c21;border:1px solid #829273;border-radius:10px;line-height:1.7}
dialog::backdrop{background:#0009}dialog h2{margin-top:0}.hint{color:#bdc9b3;font-size:12px}
@media(max-width:800px){body.debug #app{grid-template-columns:minmax(0,1fr) 240px}#debug-panel{padding:10px}#toolbar{bottom:6px}#toolbar button{font-size:12px;padding:6px 8px}}

#audio-settings label{display:block}#audio-settings input[type=range]{width:100%;accent-color:#e1be6e}#audio-settings output{float:right;margin-left:24px}#audio-close{margin-top:12px}

#server-browser .server-version-ok{color:#a7cc78;white-space:nowrap}#server-browser .server-version-bad{color:#e87163;white-space:nowrap}
body.campaign #toolbar{bottom:auto;top:8px;left:auto;right:8px;transform:none}

/* The lobby shares the same slot table and fixed faction markers as the native client. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#network-dialog.lobby-mode{width:1200px;max-width:calc(100vw - 40px);padding:24px;background:#151c17;border:1px solid #47513f;border-radius:0;line-height:1.45}
.lobby-mode>#network-title,.lobby-mode>#network-close{display:none}
.lobby-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px}
.lobby-header strong{font-size:23px;color:#c8b575}.lobby-header h2{font-size:17px;margin:5px 0 0}
.lobby-layout{display:grid;grid-template-columns:minmax(540px,1.8fr) minmax(300px,1fr);gap:20px;min-height:390px}
.lobby-roster,.lobby-map-panel{padding:16px;border:1px solid #47513f;background:#202a22;min-width:0}
.lobby-roster{display:flex;flex-direction:column;justify-content:space-between}.lobby-table-scroll{overflow:auto}
.lobby-table{width:100%;border-collapse:collapse;font-size:15px;white-space:nowrap}
.lobby-table th{text-transform:uppercase;font-size:11px;color:#a6ad99;text-align:left;padding:10px 6px;background:#2c3527}
.lobby-table td{padding:10px 6px;border-bottom:1px solid #47513f;height:54px}.lobby-table tr:nth-child(odd){background:#252f24}.lobby-table tr:nth-child(even){background:#19211b}
.lobby-table td:first-child{color:#a6ad99;width:28px}.lobby-table td:nth-child(2){width:32%}
.lobby-faction{min-width:130px}.lobby-side-marker{display:inline-block;width:17px;height:17px;margin-right:10px;vertical-align:-3px}
.side-0{background:#9ebc6f}.side-1{background:#da8472}
#network-dialog.lobby-mode select{margin:0;padding:6px 8px;border-radius:0;min-width:120px;background:#19211b;border-color:#47513f;font-size:15px;height:36px}
#network-dialog.lobby-mode input[type=checkbox]{appearance:none;display:inline-grid;place-content:center;width:20px;height:20px;margin:0;padding:0;border:1px solid #c8b575;border-radius:0;background:#19211b;cursor:pointer}
#network-dialog.lobby-mode input[type=checkbox]:checked::after{content:'✓';color:#c8b575;font-size:18px;line-height:1}
#network-dialog.lobby-mode input[type=checkbox]:disabled{cursor:default;opacity:.65}
#network-dialog.lobby-mode button{border-radius:0;border:1px solid #c8b575;background:#384531;color:#eeece0;font-weight:600;min-height:38px;padding:8px 12px;margin:0;font-size:15px}
#network-dialog.lobby-mode button:hover{background:#45533b}
#network-dialog.lobby-mode button:disabled{background:#19211b;border-color:#47513f;color:#a6ad99;opacity:.65}
#network-dialog.lobby-mode .lobby-table button:not(:disabled){background:#c8b575;color:#19211b;padding:6px 10px;min-height:34px}
#network-unassigned{color:#a6ad99;margin:24px 0 4px;font-size:14px}
.lobby-map-panel{display:flex;flex-direction:column;gap:18px}.lobby-map-nav{display:flex;align-items:center;gap:10px}
.lobby-map-nav h3{flex:1;min-width:0;margin:0;text-align:center;text-transform:uppercase;font-size:17px}
#network-dialog.lobby-mode .lobby-map-nav button{width:38px;padding:0;font-size:23px}
#network-map-preview{display:block;width:100%;height:auto;aspect-ratio:35/16;background:#4e583d;border:1px solid #68714d;image-rendering:pixelated}
.lobby-mode-line{display:flex;justify-content:space-between;gap:12px;color:#a6ad99;font-size:14px}.lobby-mode-line strong{color:#eeece0;font-weight:600}
.lobby-footer{display:flex;align-items:center;gap:12px;padding-top:22px}.lobby-footer #network-phase{flex:1;color:#a6ad99}
#network-dialog.lobby-mode #network-ready:not(:disabled){background:#c8b575;color:#19211b;min-width:180px}
#network-status:empty{display:none}#network-dialog.lobby-mode #network-status{margin-bottom:0;font-size:14px}
@media(max-width:980px){#network-dialog.lobby-mode{max-width:calc(100vw - 20px);padding:16px}.lobby-layout{grid-template-columns:minmax(0,1fr)}.lobby-roster{min-height:190px}.lobby-map-panel{display:grid;grid-template-columns:minmax(180px,1fr) minmax(160px,1fr);align-items:start}.lobby-map-nav{grid-column:1/-1}#network-map-preview{grid-row:2}.lobby-mode-line{font-size:13px}.lobby-header strong{font-size:19px}}
@media(max-width:560px){.lobby-header{align-items:flex-start}.lobby-header strong{font-size:15px}.lobby-header h2{font-size:14px}.lobby-header button{max-width:145px}.lobby-map-panel{display:flex}.lobby-footer{flex-wrap:wrap}.lobby-footer #network-phase{display:none}.lobby-footer #network-ready{margin-left:auto}.lobby-table{font-size:13px}}

.lobby-profile{display:flex;align-items:center;gap:10px;margin:16px 0}.lobby-profile button{min-width:36px}#network-dialog .lobby-profile input{width:280px;max-width:60vw;margin:0}#network-dialog .lobby-profile label{margin:0}#network-dialog.lobby-mode .lobby-faction select{display:inline-block;width:calc(100% - 28px);min-width:110px;vertical-align:middle}.lobby-faction .lobby-side-marker{vertical-align:middle}.lobby-table td:nth-child(2){max-width:250px}

/* The campaign owns its HUD; F toggles browser fullscreen. */
body.campaign #toolbar{display:none}
body.campaign #debug-panel{display:none}
body.debug.campaign #app{grid-template-columns:minmax(0,1fr)}