/* Web 0.10.1, UI revision 2. Existing server and Android protocol stay unchanged. */
.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; }

/* Compact, full-height building art; details and upgrade are separate buttons. */
.building-section { margin-bottom:28px; }
.building-section-title { color:var(--muted); font-size:12px; font-weight:500; letter-spacing:.06em; margin:0 0 13px; }
.building-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr)); gap:16px; }
.project-card.building-card { position:relative; display:grid; grid-template-columns:112px minmax(0,1fr); padding:0; min-height:222px; border-radius:13px; transition:border-color .15s; }
.building-card:hover { border-color:#65998d; }
.building-art { position:relative; min-width:0; overflow:hidden; background:#0a1520; }
.building-art>.game-art { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.building-art:after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent 65%,#10192366); }
.building-info { padding:17px 18px 15px; min-width:0; display:flex; flex-direction:column; }
.building-info h2 { font-size:15px; line-height:1.3; margin:0 0 4px; overflow-wrap:anywhere; }
.building-level { color:var(--muted); font-size:10px; }
.building-info .cost-list { border:0; padding:0; margin:6px 0 11px; gap:9px; font-size:10px; }
.building-effect { color:#99ebcb; font-size:14px; font-weight:650; line-height:1.4; margin:0 0 12px; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.building-bottom { display:flex; justify-content:space-between; gap:10px; align-items:center; margin-top:auto; margin-bottom:8px; }
.building-bottom .duration { margin:0; font-size:10px; }
.building-hint { color:#a8babf; font-size:10px; }
.building-card .project-action { margin:0; }
.building-card .building-upgrade { width:100%; min-height:35px; padding:7px 12px; position:relative; z-index:2; font-size:11px; }
.building-reason { color:var(--muted); font-size:10px; line-height:1.5; margin:7px 0 0; }
.building-open { position:absolute; z-index:1; inset:0; width:100%; height:100%; background:transparent; border:0; border-radius:inherit; cursor:pointer; }
.building-open:focus-visible { outline:2px solid var(--teal); outline-offset:-3px; background:#8cf0c908; }
.building-open:hover { background:transparent; }

/* Accessible native dialog; current and next values stay in adjacent columns. */
dialog.building-dialog { width:calc(100% - 36px); max-width:660px; max-height:calc(100dvh - 40px); padding:27px; overflow:auto; }
.building-detail-close { position:absolute; right:13px; top:12px; font-size:24px; z-index:2; background:#0b141ee6; }
.building-detail-header { display:flex; align-items:center; gap:19px; padding-right:20px; }
.building-detail-header>div:last-child { min-width:0; }
.building-detail-header h2 { font-size:23px; margin:0 0 8px; line-height:1.2; overflow-wrap:anywhere; }
.building-detail-header .eyebrow { font-size:8px; margin-bottom:8px; }
.building-detail-art { flex:0 0 110px; height:100px; overflow:hidden; border-radius:10px; }
.building-detail-art .game-art { width:100%; height:100%; }
.building-detail-description { color:#bdcbd5; font-size:12px; line-height:1.75; margin:19px 0; }
.effect-comparison { border:1px solid var(--line); border-radius:11px; overflow:hidden; }
.effect-comparison table { width:100%; border-collapse:collapse; table-layout:fixed; font-size:12px; }
.effect-comparison thead { background:#182635; }
.effect-comparison th,.effect-comparison td { padding:13px 12px; text-align:left; overflow-wrap:anywhere; }
.effect-comparison thead th:first-child { width:40%; }
.effect-comparison thead th { font-size:11px; font-weight:600; }
.effect-comparison thead th span { display:block; color:var(--muted); font-size:9px; font-weight:400; margin-top:3px; }
.effect-comparison tbody tr+tr { border-top:1px solid var(--line); }
.effect-comparison tbody th { color:#b9c9d5; font-size:11px; font-weight:400; }
.effect-comparison td { font-variant-numeric:tabular-nums; }
.effect-comparison .next-value { color:#9ee8c6; font-weight:650; background:#75dbb305; }
.building-detail-note { color:var(--muted); font-size:10px; line-height:1.7; margin:11px 0; }
.building-requirements { margin-top:17px; }
.building-requirements h3 { font-size:11px; margin:0 0 8px; }
.requirement { display:inline-block; font-size:10px; margin:0 12px 7px 0; }
.requirement.met { color:#9ed7bc; }
.requirement.missing { color:var(--danger); }
.detail-preference { display:flex; gap:8px; align-items:center; font-size:10px; margin:18px 0 12px; color:var(--muted); }
.detail-preference input { width:15px; height:15px; margin:0; accent-color:var(--teal); }
.building-detail-footer { display:flex; align-items:center; gap:16px; justify-content:space-between; border-top:1px solid var(--line); padding-top:14px; }
.building-detail-footer .cost-list { border:0; padding:0; margin:0 0 6px; font-size:11px; }
.building-detail-footer .duration { color:var(--muted); font-size:10px; }
.building-detail-footer .button { flex-shrink:0; min-width:115px; }
.building-detail-reason { margin:13px 0 0; color:var(--muted); font-size:11px; }

/* Interactive star map, not a grid of system cards. */
.galaxy-explorer { border:1px solid #2c3d4e; border-radius:var(--radius); overflow:hidden; background:#0c1520; margin-bottom:24px; }
.galaxy-navigation { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:15px 18px; background:#111d2a; border-bottom:1px solid var(--line); }
.galaxy-picker { display:flex; align-items:center; gap:7px; min-width:0; }
.galaxy-picker select { width:152px; padding:8px 12px; background:#0c1722; font-size:13px; font-weight:600; }
.galaxy-picker .icon-button { font-size:23px; }
.galaxy-count { color:var(--muted); font-size:10px; margin-left:12px; }
.map-controls { display:flex; align-items:center; gap:7px; flex-shrink:0; }
.map-controls [data-map-scale] { width:39px; text-align:center; color:#bccfda; font-size:10px; font-variant-numeric:tabular-nums; }
.map-controls .icon-button { font-size:18px; }
.galaxy-layout { display:grid; grid-template-columns:minmax(0,1fr) 305px; }
.galaxy-map-shell { min-width:0; background:#040b15; }
.galaxy-map { position:relative; height:530px; overflow:hidden; isolation:isolate; touch-action:none; user-select:none; cursor:grab; outline-offset:-3px; }
.galaxy-map.dragging { cursor:grabbing; }
.galaxy-plane { position:absolute; inset:0; transform-origin:center; --point-scale:1; }
.galaxy-map-art { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; opacity:.85; }
.galaxy-shade { position:absolute; inset:0; background:radial-gradient(ellipse at center,#07132111 12%,#050c191a 45%,#050e2188 100%),linear-gradient(0deg,#04101a55,transparent 25%,transparent 75%,#04101a55); pointer-events:none; }
.galaxy-orbit { position:absolute; inset:14% 9%; border:1px solid #9cbdd238; border-radius:50%; box-shadow:0 0 12px #789bcc12,inset 0 0 12px #789bcc12; pointer-events:none; }
.narrow-map .galaxy-orbit { inset:10% 11%; }
.galaxy-core { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; background:radial-gradient(ellipse,#07101ad9,transparent 72%); padding:35px 40px; pointer-events:none; white-space:nowrap; text-shadow:0 2px 15px #000; }
.galaxy-core>span { font-size:8px; letter-spacing:.3em; color:#c9d6df; }
.galaxy-core>strong { font-size:27px; font-weight:400; letter-spacing:.07em; margin:4px 0; }
.galaxy-core>small { font-size:10px; letter-spacing:.2em; color:#c9d6df; }
.system-node { position:absolute; display:flex; align-items:center; justify-content:center; flex-direction:column; width:38px; height:38px; padding:0; border:1px solid transparent; border-radius:50%; background:#020911c4; color:#acbacb; cursor:pointer; transform:translate(-50%,-50%) scale(var(--point-scale)); font-family:inherit; line-height:1; box-shadow:0 0 12px #03102099; z-index:1; }
.system-node .system-star { font-size:12px; line-height:14px; text-shadow:0 0 8px currentColor; }
.node-label { font-size:9px; font-weight:550; line-height:11px; color:#d9e5f0; }
.system-node.own,.galaxy-legend .own { color:#80f3c6; }
.system-node.known,.galaxy-legend .known { color:#a6d3fc; }
.system-node.inhabited,.galaxy-legend .inhabited { color:#e2b5f7; }
.system-node.swarm,.galaxy-legend .swarm { color:#f28f7f; }
.system-node.unknown .system-star { color:transparent; -webkit-text-stroke:1px #a0acba; text-shadow:none; font-size:10px; }
.galaxy-legend .unknown { color:#9aaabb; }
.system-node.selected { border-color:#ffd693; box-shadow:0 0 16px #e8c27b55; background:#1a1e29; z-index:3; }
.system-node:hover,.system-node:focus-visible { outline:none; border-color:#eef9ff; background:#172537; z-index:4; }
.node-name { position:absolute; top:calc(100% + 6px); left:50%; transform:translateX(-50%); display:none; max-width:165px; width:max-content; background:#0b1426f5; border:1px solid #4c677a; border-radius:6px; padding:6px 9px; color:#f4f8fc; font-size:10px; font-weight:400; line-height:1.3; pointer-events:none; overflow-wrap:anywhere; box-shadow:0 3px 12px #0009; }
.system-node.selected .node-name,.system-node:hover .node-name,.system-node:focus-visible .node-name { display:block; }
.galaxy-legend { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; padding:14px 15px 0; border-top:1px solid #1f2d3d; font-size:9px; }
.map-help { color:#8ba1b2; font-size:10px; text-align:center; line-height:1.6; padding:10px 20px 15px; margin:0; }
.system-detail { min-width:0; padding:22px 20px; border-left:1px solid var(--line); background:linear-gradient(145deg,#142131,#0d1722); max-height:650px; overflow:auto; }
.system-detail>.eyebrow { font-size:8px; }
.system-detail h2 { font-size:20px; line-height:1.3; margin:0 0 8px; overflow-wrap:anywhere; }
.system-detail .system-meta { font-size:10px; line-height:1.6; color:#a4b8c8; margin:0 0 15px; }
.system-detail .planet-row { gap:8px; padding:13px 0; align-items:center; }
.system-detail .planet-identity { gap:9px; }
.system-detail .planet-thumb { width:39px; height:39px; }
.system-detail .planet-identity strong { font-size:11px; }
.system-detail .planet-identity .muted { font-size:9px; line-height:1.6; }
.system-detail .planet-row>.button { font-size:9px; padding:7px 8px; }
.system-scout { padding-top:16px; }
.system-scout .muted { display:block; font-size:10px; line-height:1.7; }
.system-scout .button { width:100%; font-size:11px; margin-top:12px; }
.unknown-system-message { text-align:center; padding:35px 10px 20px; }
.unknown-system-message>span { display:block; font-size:44px; color:#809cac; margin-bottom:15px; }
.unknown-system-message h3 { font-size:14px; color:#ccdbe6; }
.unknown-system-message p,.system-intel-note { color:var(--muted); font-size:10px; line-height:1.8; }
.galaxy-travel-note { font-size:11px; }
#fleet-panel { scroll-margin-top:15px; }
#fleet-form>.fleet-dock { position:sticky; bottom:12px; margin-top:20px; background:#132230f5; padding:12px; border:1px solid var(--line); border-radius:9px; box-shadow:0 -8px 24px #0004; z-index:5; }
.fleet-dock>.form-actions { margin-top:0; }
.fleet-dock #fleet-preview:empty { display:none; }
.fleet-dock #fleet-preview { max-height:calc(100vh - 260px); max-height:calc(100dvh - 260px); overflow-y:auto; overscroll-behavior:contain; }
.fleet-dock .fleet-preview { margin:0 0 12px; padding:0; border:0; border-radius:0; background:transparent; }
.fleet-dock .data-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:0 0 8px; }
.fleet-dock .data-grid>div { min-width:0; }
.fleet-dock .data-grid dt,.fleet-dock .data-grid dd,.fleet-dock .fleet-preview p { overflow-wrap:anywhere; }
.fleet-dock .data-grid dd { font-size:17px; }
.fleet-dock .fleet-preview p { margin:0 0 10px; }
.fleet-dock .loading { margin:0 0 12px; padding:6px 0; }
.fleet-dock .form-error { margin:0 0 12px; }
@media(max-width:900px) { .fleet-dock .data-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 12px; } }
@media(max-height:500px) { .fleet-dock #fleet-preview { max-height:40vh; max-height:40dvh; } }
@media(min-width:1650px) { .building-card { grid-template-columns:125px minmax(0,1fr); } .galaxy-layout { grid-template-columns:minmax(0,1fr) 340px; } .galaxy-map { height:565px; } }
@media(max-width:1250px) { .galaxy-layout { grid-template-columns:minmax(0,1fr) 275px; } .galaxy-count { display:none; } .system-detail { padding:20px 16px; } }
@media(max-width:1050px) { .galaxy-layout { grid-template-columns:1fr; } .galaxy-map { height:490px; } .system-detail { border-left:0; border-top:1px solid var(--line); max-height:none; } .system-planets { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:25px; } .unknown-system-message { padding:12px 0; } .unknown-system-message>span { display:none; } .system-scout { max-width:350px; } }
@media(max-width:620px) {
  .building-grid { grid-template-columns:minmax(0,1fr); gap:13px; }
  .project-card.building-card { grid-template-columns:94px minmax(0,1fr); min-height:221px; }
  .building-info { padding:15px 13px; }
  .building-info h2 { font-size:15px; }
  .building-effect { font-size:13px; }
  .building-info .cost-list { gap:7px; font-size:9px; }
  .building-reason { font-size:9px; }
  .building-card .building-upgrade { min-height:39px; }
  dialog.building-dialog { width:calc(100% - 20px); padding:22px 17px; max-height:calc(100dvh - 20px); }
  .building-detail-header { gap:13px; padding-right:14px; }
  .building-detail-header h2 { font-size:19px; }
  .building-detail-art { flex-basis:74px; height:80px; }
  .building-detail-header .muted { font-size:10px; line-height:1.5; }
  .building-detail-header .eyebrow { font-size:7px; }
  .effect-comparison th,.effect-comparison td { padding:11px 8px; font-size:11px; }
  .effect-comparison thead th:first-child { width:36%; }
  .effect-comparison tbody th { font-size:10px; }
  .building-detail-footer { gap:10px; }
  .building-detail-footer .cost-list { font-size:10px; gap:8px; }
  .building-detail-footer .button { min-width:105px; font-size:11px; padding:10px; }
  .galaxy-explorer { margin-left:-5px; margin-right:-5px; }
  .galaxy-navigation { flex-wrap:wrap; gap:10px; padding:12px; }
  .galaxy-picker { flex:1; justify-content:center; }
  .galaxy-picker select { flex:1; width:130px; }
  .map-controls { width:100%; justify-content:center; }
  .galaxy-map { height:475px; }
  .galaxy-core { padding:20px; }
  .galaxy-core strong { font-size:25px; }
  .system-node { width:32px; height:32px; }
  .system-node .system-star { font-size:10px; line-height:12px; }
  .node-label { font-size:8px; line-height:9px; }
  .node-name { font-size:9px; max-width:115px; padding:5px 7px; top:calc(100% + 3px); }
  .galaxy-legend { gap:7px 11px; padding:12px 10px 0; }
  .map-help { padding:9px 14px 14px; font-size:9px; }
  .system-planets { grid-template-columns:1fr; }
  .system-detail { padding:20px 18px; }
  .system-detail h2 { font-size:20px; }
  .system-detail .planet-identity strong { font-size:12px; }
  .system-detail .planet-identity .muted { font-size:10px; }
  .system-detail .planet-row>.button { min-height:38px; font-size:10px; }
  .system-scout { max-width:none; }
  #fleet-form>.fleet-dock { bottom:72px; padding:10px; }
  .fleet-dock .button { font-size:11px; min-height:40px; padding:8px 12px; }
  .fleet-dock .data-grid dd { font-size:15px; }
  .fleet-dock>.form-actions>.muted { font-size:9px; }
}

.system-node[data-label-side="left"] .node-name { left:0; transform:none; }
.system-node[data-label-side="right"] .node-name { left:auto; right:0; transform:none; }