#hud-root { position: fixed; left: 0; right: 0; bottom: 0; z-index: 3; pointer-events: none; font: 12px/1.3 "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; color: #d5dde2; }
#hud-root > * { pointer-events: auto; }
#res { position: fixed; top: 52px; right: 12px; display: flex; gap: 14px; padding: 6px 10px; background: rgba(13,17,19,.8); border: 1px solid #26323a; border-radius: 3px; }
.stat { display: flex; flex-direction: column; align-items: flex-end; min-width: 54px; }
.stat b { font-size: 16px; font-variant-numeric: tabular-nums; font-weight: 600; }
.stat i { font-style: normal; font-size: 10px; color: #7f929c; letter-spacing: .08em; text-transform: uppercase; }
/* The dock is opaque and the canvas stops above it (see --dock-h). */
#dock { background: #0d1113; border-top: 1px solid #26323a; }
#prod, #tech { display: flex; gap: 6px; justify-content: center; padding: 6px 12px; flex-wrap: wrap; }
#tech { padding-bottom: 8px; }
canvas { height: calc(100vh - var(--top-h, 0px) - var(--dock-h, 0px)) !important; }
.card { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 0 8px; align-items: baseline; width: 122px; padding: 6px 7px; background: #161c20; border: 1px solid #2b3a44; border-radius: 3px; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.card:hover { border-color: #5c9eff; }
.card:focus-visible { outline: 2px solid #5c9eff; }
.card.small { width: 118px; }
.card .k { grid-row: 1 / span 2; font: 700 18px/1 "Barlow Condensed", "Arial Narrow", sans-serif; color: #5c9eff; }
.card .n { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .c { grid-column: 2; font-size: 11px; color: #a8b6be; }
.card .t { grid-column: 1 / span 2; font-size: 10px; color: #7f929c; text-transform: uppercase; letter-spacing: .06em; min-height: 12px; }
.card.off { opacity: .45; }
.card.off .t { color: #f2c14e; }
.card.owned { border-color: #3f7f52; }
.card.owned .k { color: #7fd48f; }
#banner { position: fixed; top: 38%; left: 50%; transform: translate(-50%, -50%); text-align: center; padding: 22px 40px; background: rgba(13,17,19,.92); border: 1px solid #26323a; border-radius: 4px; }
#banner > div:first-child { font: 700 44px/1 "Barlow Condensed", "Arial Narrow", sans-serif; letter-spacing: .06em; text-transform: uppercase; }
#banner.victory > div:first-child { color: #7fd48f; } #banner.defeat > div:first-child { color: #ff7359; } #banner.draw > div:first-child { color: #f2c14e; }
#banner small { display: block; margin: 8px 0 14px; color: #7f929c; }
#banner button { font: inherit; padding: 8px 18px; background: #5c9eff; color: #0d1113; border: 0; border-radius: 3px; cursor: pointer; font-weight: 600; }
@media (max-width: 900px) { #prod, #tech { padding-left: 12px; padding-right: 12px; } }
#sel { position: fixed; left: 230px; bottom: calc(var(--dock-h, 0px) + 8px); padding: 4px 8px; background: rgba(13,17,19,.75); border: 1px solid #26323a; border-radius: 3px; font-size: 11px; }
#sel:empty { display: none; }
#sel .hint { color: #7f929c; margin-left: 8px; }
/* Main menu: shown over the (idle) map until a match starts. */
#menu[hidden], #hud-root [hidden] { display: none !important; }
#menu { position: fixed; top: 44px; left: 0; right: 0; bottom: 0; display: flex; gap: 24px; padding: 44px 28px 22px; overflow: auto; background: rgba(13,17,19,.86); font-size: 12px; }
#menu .col { display: flex; flex-direction: column; gap: 10px; min-width: 300px; max-width: 380px; }
#menu .col.deck { flex: 1; max-width: none; }
#menu h2 { margin: 8px 0 0; font: 700 18px/1 "Barlow Condensed", "Arial Narrow", sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #a8b6be; display: flex; align-items: baseline; gap: 10px; }
#menu h2 span { color: #5c9eff; font-size: 14px; }
#menu .row { display: flex; gap: 8px; flex-wrap: wrap; }
#menu .big { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; background: #161c20; border: 1px solid #2b3a44; border-radius: 3px; color: inherit; font: inherit; text-align: left; cursor: pointer; }
#menu .big b { font: 700 20px/1 "Barlow Condensed", "Arial Narrow", sans-serif; letter-spacing: .04em; text-transform: uppercase; color: #5c9eff; }
#menu .big small { color: #7f929c; font-size: 11px; }
#menu .big:hover, #menu .card:hover { border-color: #5c9eff; }
#menu form { display: flex; flex-direction: column; gap: 6px; }
#menu label { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
#menu input { font: inherit; background: #0d1113; color: #d5dde2; border: 1px solid #26323a; padding: 4px 6px; }
#menu button[type=submit] { font: inherit; padding: 6px; background: #5c9eff; border: 0; border-radius: 3px; color: #0d1113; font-weight: 600; cursor: pointer; }
#menu button[type=submit]:disabled { background: #2b3a44; color: #7f929c; cursor: default; }
#menu .note { color: #7f929c; line-height: 1.45; }
#menu .keys { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 12px; }
#menu .keys b { color: #d5dde2; font-weight: 600; }
#menu .link { font: inherit; font-size: 11px; background: none; border: 0; color: #5c9eff; cursor: pointer; text-transform: none; letter-spacing: 0; padding: 0; }
#menu .slots { display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)); gap: 6px; }
#menu .slots .card { width: auto; }
#menu .slots .card.empty { opacity: .5; cursor: default; border-style: dashed; }
#menu .roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
#menu .roster .card { width: auto; }
#menu .roster .card.off { opacity: .35; }
#menu .roster .t, #menu .slots .t { text-transform: none; letter-spacing: 0; color: #a8b6be; }
#menu .tier-h { grid-column: 1 / -1; margin-top: 6px; font-size: 10px; color: #7f929c; letter-spacing: .08em; text-transform: uppercase; }
#banner button.quiet { background: transparent; color: #a8b6be; border: 1px solid #2b3a44; }
#spectate { position: fixed; top: 52px; right: 10px; padding: 6px 10px; background: rgba(13,17,19,.85); border: 1px solid #26323a; border-radius: 3px; font-size: 12px; color: #a8b6be; z-index: 2; display: flex; gap: 10px; align-items: center; }
#spectate b { color: #ff7359; text-transform: uppercase; letter-spacing: .06em; font-size: 11px; }
#spectate button { font: inherit; padding: 3px 10px; background: #5c9eff; color: #0d1113; border: 0; border-radius: 3px; cursor: pointer; font-weight: 600; }
#banner { max-height: 92vh; max-width: 92vw; overflow: auto; }
#banner table.stats { border-collapse: collapse; margin: 4px auto 12px; font-size: 12px; text-align: right; }
#banner table.stats th, #banner table.stats td { padding: 2px 10px; border-bottom: 1px solid #26323a; white-space: nowrap; }
#banner table.stats th { color: #a8b6be; font-weight: 600; }
#banner table.stats td:first-child, #banner table.stats th:first-child { text-align: left; color: #7f929c; }
#banner table.stats i { color: #7f929c; font-style: normal; font-size: 11px; }
#banner p.stats-h { margin: 10px 0 2px; color: #7f929c; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
#banner .tabs { display: flex; gap: 4px; justify-content: center; margin: 8px 0 10px; }
#banner .tabs button { background: transparent; color: #a8b6be; border: 1px solid #2b3a44; padding: 5px 14px; font-weight: 600; }
#banner .tabs button.on { background: #5c9eff; color: #0d1113; border-color: #5c9eff; }
#banner .tab-body { min-height: 120px; margin-bottom: 12px; }
#banner .legend { display: flex; gap: 14px; justify-content: center; font-size: 12px; color: #a8b6be; margin-bottom: 4px; }
#banner .legend i, #banner .tip i, #banner i.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
#banner .chart { position: relative; margin: 6px auto 2px; width: 560px; max-width: 100%; text-align: left; }
#banner .chart-t { font-size: 12px; color: #a8b6be; margin: 6px 0 0 44px; }
#banner .chart svg { display: block; max-width: 100%; height: auto; }
#banner .chart .grid { stroke: #26323a; stroke-width: 1; }
#banner .chart .ax { fill: #7f929c; font-size: 10px; }
#banner .chart .end { fill: #a8b6be; font-size: 11px; }
#banner .chart .cross { stroke: #a8b6be; stroke-width: 1; stroke-dasharray: 3 3; }
#banner .chart g.hover[hidden] { display: none; } /* the hidden attribute does not hide SVG on its own */
#banner .chart .tip { position: absolute; top: 24px; background: rgba(13,17,19,.95); border: 1px solid #2b3a44; border-radius: 3px; padding: 4px 8px; font-size: 12px; color: #d5dde2; pointer-events: none; white-space: nowrap; }
#banner .chart .tip span { margin-left: 8px; }
@media (max-width: 760px) { #menu { flex-direction: column; } #menu .col { max-width: none; min-width: 0; } #menu .slots { grid-template-columns: repeat(2, 1fr); } }
/* Unit silhouette glyphs, same shapes as on the map. */
svg.g { display: inline-block; vertical-align: -2px; fill: #a9c8ff; stroke: none; }
svg.g.hollow { fill: none; stroke: #a9c8ff; stroke-width: 3; }
.card .n { display: inline-flex; align-items: center; gap: 4px; }