:root{color-scheme:dark;--bg:#08121e;--panel:#112337;--edge:#30475b;--text:#e7f1fa;--accent:#8ee1f5}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at top,#183950,var(--bg) 65%);color:var(--text);font:16px/1.5 system-ui,sans-serif}header,main,footer{max-width:1440px;margin:auto;padding:24px}header{border-bottom:1px solid var(--edge);background:linear-gradient(90deg,#08121eeb,#08121eaa),url('../assets/banner.jpg') center/cover}h1{font-size:clamp(32px,5vw,60px);letter-spacing:.09em;margin:16px 0 0}h1 em{font-style:normal;color:var(--accent);font-weight:300}h2,h3{line-height:1.25}a{color:var(--accent)}#identity{float:right;font-size:14px}section,details{background:#0f2030e8;border:1px solid var(--edge);border-radius:12px;padding:20px;margin-bottom:20px}.columns{display:grid;grid-template-columns:1fr 1fr;gap:20px}.columns section{margin:0}.toolbar,.metrics,.room-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.room-row{padding:14px 0;border-bottom:1px solid var(--edge)}label{display:block;margin:10px 0;font-size:14px;color:#c0d5e5}input,select,button{font:inherit;border:1px solid #547189;border-radius:6px;padding:10px 14px;color:var(--text);background:#182f43}input,select{display:block;width:100%;margin-top:5px}button{cursor:pointer;margin:5px 5px 5px 0;font-weight:650}button:hover:enabled{border-color:#a8edff;background:#244963}button:disabled{opacity:.45;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #efc96b;outline-offset:3px}#ready,#start{background:#a5e6ed;color:#102132}#status{padding:12px 16px;background:#18384b;border-radius:6px}.error{background:#5b2936!important}.muted,small{color:#a9c1d1}.galaxy{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:20px;margin-top:20px}canvas{width:100%;background:#070f1a;border:1px solid var(--edge);border-radius:8px;cursor:crosshair}aside{background:#13283c;padding:16px;border-radius:8px}.metrics{justify-content:flex-start;background:#172d40;padding:10px;border-radius:8px}.roster{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}.commander{border:1px solid var(--edge);padding:12px;border-radius:8px;min-width:160px}.me{border-color:var(--accent)}.scroll{max-height:240px;overflow:auto;font-size:14px}.scroll p{border-bottom:1px solid #253f53;padding-bottom:7px}summary{cursor:pointer;font-weight:bold}footer{font-size:13px;color:#a9c1d1}[hidden]{display:none!important}@media(max-width:850px){.galaxy,.columns{grid-template-columns:1fr}header,main,footer{padding:14px}#identity{float:none;display:block}aside{display:grid;grid-template-columns:1fr 1fr;gap:8px}aside h3,aside #details,aside #fleets{grid-column:1/-1}.metrics span{font-size:14px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

/* v1.0.3: information left, map center, controls right. */
header,main,footer{max-width:1800px}
.command-layout{display:grid;grid-template-columns:minmax(210px,250px) minmax(0,1fr) minmax(240px,280px);gap:18px;align-items:start;margin-top:18px}
.command-layout>*{min-width:0}
#informationSidebar,#controlsSidebar{display:block;padding:16px}
#informationSidebar h3:first-child,#controlsSidebar h3:first-child{margin-top:0}
#informationSidebar .metrics{display:grid;gap:8px;padding:12px}
#informationSidebar .roster{display:grid;gap:8px}
#informationSidebar .commander{min-width:0;padding:9px;overflow-wrap:anywhere}
#informationSidebar .expedition-log{padding:0;border:0;background:none;margin:18px 0 0}
#informationSidebar #fleets{font-size:14px}
#controlsSidebar button{width:100%}
#controlsSidebar .turn-controls{padding-bottom:12px;margin-bottom:16px;border-bottom:1px solid var(--edge)}
.command-layout canvas{display:block;height:auto}
.room-channel{margin:20px 0 0}
@media(max-width:1150px){.command-layout{grid-template-columns:190px minmax(0,1fr) 230px;gap:12px}#informationSidebar,#controlsSidebar{padding:12px}}
@media(max-width:900px){.command-layout{grid-template-columns:minmax(0,1fr)}#informationSidebar{order:2}#controlsSidebar{order:3}.command-layout>div{order:1}#informationSidebar .roster{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}}

.combat-help{padding:12px;margin:16px 0 0;font-size:14px}.combat-help p{margin:10px 0}#dispatchSummary{font-size:13px;overflow-wrap:anywhere}

#map{touch-action:none;cursor:grab}#map:active{cursor:grabbing}.map-controls{display:flex;flex-wrap:wrap;gap:4px}#map:focus-visible{outline:3px solid #efc96b;outline-offset:3px}