/* IRON TIDE interface.
   The look is deliberately period-correct for the genre: brushed gunmetal
   panels with hard bevels, amber and cyan readouts, and a fixed command column
   down the left. Everything is CSS - there are no interface images. */

:root {
  --panel:        #262c34;
  --panel-hi:     #3a424d;
  --panel-lo:     #12161b;
  --panel-deep:   #1a1f26;
  --bevel-light:  #4d5765;
  --bevel-dark:   #0c0f13;
  --ink:          #c6d0dc;
  --ink-dim:      #8794a4;
  --ink-bright:   #eaf2fb;
  --accent:       #6fd3ff;
  --accent-warm:  #ffb454;
  --metal:        #cfd8e3;
  --energy:       #ffd34a;
  --danger:       #ff6a54;
  --good:         #6ee87f;
  --sidebar-w:    206px;
  --topbar-h:     46px;
  --font: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "Consolas", "SF Mono", "Menlo", "DejaVu Sans Mono", monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%; overflow: hidden;
  background: #05070a; color: var(--ink);
  font-family: var(--font); font-size: 13px;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none; touch-action: none;
}

#app { position: fixed; inset: 0; }

#game {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; cursor: crosshair;
}
#game.placing { cursor: copy; }
#game.targeting { cursor: cell; }
#game.panning { cursor: grabbing; }

/* ---------- shared bevel ---------- */
.bevel {
  background: linear-gradient(180deg, var(--panel-hi) 0%, var(--panel) 42%, var(--panel-lo) 100%);
  border: 1px solid var(--bevel-dark);
  box-shadow: inset 1px 1px 0 var(--bevel-light), inset -1px -1px 0 var(--bevel-dark);
}

/* ---------- top resource bar ---------- */
#topbar {
  position: absolute; top: 0; left: 0; right: 0; height: var(--topbar-h);
  display: flex; align-items: stretch; gap: 8px; padding: 4px 8px;
  padding-top: max(4px, env(safe-area-inset-top));
  background: linear-gradient(180deg, #2b323b 0%, #1c222a 60%, #10141a 100%);
  border-bottom: 1px solid #0a0d11;
  box-shadow: 0 2px 8px rgba(0,0,0,0.6), inset 0 1px 0 #454f5c;
  z-index: 20;
}

.res { display: flex; align-items: center; gap: 7px; flex: 1 1 0; min-width: 0; }
#res-energy { flex-direction: row-reverse; }

.res-icon {
  width: 16px; height: 16px; flex: none; border-radius: 2px;
  border: 1px solid #0a0d11;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35);
}
.res-icon.metal  { background: linear-gradient(160deg, #eef3f8, #8593a5 60%, #4d5865); }
.res-icon.energy { background: linear-gradient(160deg, #fff2b8, #ffcf3f 55%, #a97d10); }

.res-body { flex: 1 1 auto; min-width: 0; }

.res-bar {
  position: relative; height: 11px; border-radius: 2px; overflow: hidden;
  background: #0b0e12;
  border: 1px solid #05070a;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.9);
}
/* i = fill, b = the "will be consumed" ghost that shows committed drain */
.res-bar i { position: absolute; inset: 0 auto 0 0; width: 0; display: block; }
.res-bar b { position: absolute; inset: 0 auto 0 0; width: 0; display: block;
             background: repeating-linear-gradient(135deg,
               rgba(255,255,255,0.16) 0 4px, rgba(255,255,255,0) 4px 8px); }
#res-metal  .res-bar i { background: linear-gradient(180deg, #f2f6fa, #9aa8b8 55%, #6b7787); }
#res-energy .res-bar i { background: linear-gradient(180deg, #fff3bb, #ffd34a 55%, #c99a14); }

.res-bar.stalled { animation: stallpulse 0.7s ease-in-out infinite; }
@keyframes stallpulse {
  0%,100% { box-shadow: inset 0 1px 2px rgba(0,0,0,0.9); }
  50%     { box-shadow: inset 0 0 0 1px var(--danger), 0 0 6px rgba(255,106,84,0.7); }
}

.res-nums {
  display: flex; gap: 5px; align-items: baseline;
  font-family: var(--mono); font-size: 10.5px; line-height: 14px;
  color: var(--ink-dim); white-space: nowrap;
}
#res-energy .res-nums { justify-content: flex-end; }
.res-store { color: var(--ink-bright); font-weight: 600; }
.res-rate { margin-left: auto; font-weight: 600; }
#res-energy .res-rate { margin-left: 0; margin-right: auto; }
.res-rate.pos { color: var(--good); }
.res-rate.neg { color: var(--danger); }

.res-label {
  font-size: 9px; letter-spacing: 1.4px; color: var(--ink-dim);
  writing-mode: vertical-rl; text-orientation: mixed; line-height: 1;
}

#topbar-center {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  flex: 0 0 118px; font-family: var(--mono);
}
#clock { font-size: 15px; color: var(--ink-bright); font-weight: 600; letter-spacing: 1px; }
#wind-readout { font-size: 9.5px; color: var(--ink-dim); letter-spacing: 0.6px; }

.chrome-btn {
  flex: none; align-self: center;
  background: linear-gradient(180deg, #3a424d, #232931);
  color: var(--ink); border: 1px solid #0a0d11;
  box-shadow: inset 1px 1px 0 #59636f, inset -1px -1px 0 #0d1116;
  padding: 5px 10px; font: 600 10px/1 var(--font); letter-spacing: 1px;
  border-radius: 2px; cursor: pointer;
}
.chrome-btn:hover { background: linear-gradient(180deg, #47515e, #2b323b); color: #fff; }
.chrome-btn:active { box-shadow: inset 1px 1px 0 #0d1116, inset -1px -1px 0 #59636f; }

/* ---------- left command column ---------- */
#sidebar {
  position: absolute; top: var(--topbar-h); bottom: 0; left: 0;
  width: var(--sidebar-w);
  display: flex; flex-direction: column; gap: 4px;
  padding: 5px 5px max(5px, env(safe-area-inset-bottom)) max(5px, env(safe-area-inset-left));
  background: linear-gradient(90deg, #232932 0%, #1b2129 70%, #141920 100%);
  border-right: 1px solid #0a0d11;
  box-shadow: 3px 0 10px rgba(0,0,0,0.55), inset -1px 0 0 #0a0d11;
  z-index: 18;
}

#minimap-panel {
  position: relative; flex: none;
  background: #05070a; border: 1px solid var(--bevel-dark);
  box-shadow: inset 1px 1px 0 var(--bevel-light), inset -1px -1px 0 #05070a;
  padding: 3px;
}
#minimap { display: block; width: 100%; height: auto; image-rendering: auto; cursor: pointer; }
#minimap-legend {
  position: absolute; bottom: 4px; right: 5px;
  font: 8px/1 var(--mono); letter-spacing: 1.5px; color: rgba(140,200,255,0.55);
  pointer-events: none; text-shadow: 0 0 4px #000;
}

.panel-title {
  display: flex; align-items: center; justify-content: space-between;
  font: 700 9px/1 var(--font); letter-spacing: 1.6px; color: var(--ink-dim);
  padding: 3px 2px 4px; border-bottom: 1px solid #0e1218;
  margin-bottom: 4px;
}
.mini-btn {
  background: #2f3742; color: var(--ink); border: 1px solid #0a0d11;
  font: 700 8px/1 var(--font); letter-spacing: 1px; padding: 3px 6px;
  border-radius: 2px; cursor: pointer;
}
.mini-btn:hover { background: #3d4653; color: #fff; }

#orders-panel { flex: none; }
#build-panel  { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }

.btn-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px;
  align-content: start;
}
#build-grid { overflow-y: auto; overscroll-behavior: contain; padding-right: 2px; }
#build-grid::-webkit-scrollbar { width: 6px; }
#build-grid::-webkit-scrollbar-thumb { background: #3a424d; border-radius: 3px; }

/* ---------- command buttons ---------- */
.cmd {
  position: relative; aspect-ratio: 1 / 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; padding: 2px;
  background: linear-gradient(180deg, #39414c 0%, #272e37 48%, #1a1f26 100%);
  border: 1px solid #0a0d11;
  box-shadow: inset 1px 1px 0 #4e5865, inset -1px -1px 0 #0d1116;
  border-radius: 2px; cursor: pointer; overflow: hidden;
  transition: filter 90ms linear;
}
.cmd:hover { filter: brightness(1.28); }
.cmd:active, .cmd.active {
  box-shadow: inset 1px 1px 0 #0d1116, inset -1px -1px 0 #4e5865;
  filter: brightness(0.92);
}
.cmd.armed {
  box-shadow: inset 0 0 0 1px var(--accent), inset 1px 1px 0 #4e5865;
  filter: brightness(1.35);
}
.cmd[disabled], .cmd.locked { opacity: 0.34; cursor: not-allowed; filter: none; }

.cmd canvas { width: 76%; height: 76%; object-fit: contain; pointer-events: none; }
.cmd .cmd-label {
  font: 700 8px/1 var(--font); letter-spacing: 0.6px;
  color: var(--ink); text-shadow: 0 1px 0 #000; pointer-events: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.cmd .cmd-key {
  position: absolute; top: 1px; right: 2px;
  font: 700 7.5px/1 var(--mono); color: var(--accent); opacity: 0.85;
  pointer-events: none; text-shadow: 0 1px 0 #000;
}
.cmd .cmd-count {
  position: absolute; bottom: 1px; right: 2px;
  font: 700 9px/1 var(--mono); color: var(--ink-bright);
  background: rgba(0,0,0,0.65); padding: 0 3px; border-radius: 2px;
  pointer-events: none;
}
/* Progress sweep on the item a factory is currently producing. */
.cmd .cmd-prog {
  position: absolute; left: 0; bottom: 0; height: 2px;
  background: var(--accent); pointer-events: none;
}
.cmd.unaffordable .cmd-label { color: var(--danger); }

/* Order buttons are text-only and slightly shorter than build buttons. */
#orders-grid .cmd { aspect-ratio: 1 / 0.72; }
#orders-grid .cmd .cmd-label { font-size: 8.5px; letter-spacing: 0.8px; }

/* ---------- selected-unit readout ---------- */
#info-panel {
  flex: none; min-height: 84px;
  background: #12161c; border: 1px solid var(--bevel-dark);
  box-shadow: inset 1px 1px 0 #333b45;
  padding: 5px 6px;
}
#info-name {
  font: 700 11px/1.2 var(--font); letter-spacing: 0.8px; color: var(--accent);
  margin-bottom: 3px;
}
#info-stats {
  display: grid; grid-template-columns: auto auto; gap: 1px 8px;
  font: 10px/1.35 var(--mono); color: var(--ink-dim); margin-bottom: 4px;
}
#info-stats b { color: var(--ink-bright); font-weight: 600; }
#info-desc { font-size: 10.5px; line-height: 1.4; color: var(--ink-dim); }

/* ---------- selection strip along the bottom ---------- */
#selection-strip {
  position: absolute; left: var(--sidebar-w); right: 0; bottom: 0;
  display: flex; flex-wrap: wrap-reverse; align-content: flex-end;
  gap: 2px; padding: 4px 6px max(4px, env(safe-area-inset-bottom));
  max-height: 25vh; overflow: hidden; pointer-events: auto; z-index: 15;
  background: linear-gradient(0deg, rgba(10,13,17,0.86), rgba(10,13,17,0));
}
#selection-strip:empty { display: none; }
.sel-chip {
  position: relative; width: 34px; height: 34px; flex: none;
  background: rgba(30,36,44,0.92); border: 1px solid #0a0d11;
  box-shadow: inset 1px 1px 0 #4a5460; border-radius: 2px; cursor: pointer;
}
.sel-chip canvas { width: 100%; height: 100%; pointer-events: none; }
.sel-chip .hp {
  position: absolute; left: 1px; right: 1px; bottom: 1px; height: 2px;
  background: #0a0d11;
}
.sel-chip .hp i { display: block; height: 100%; background: var(--good); }
.sel-chip.hurt .hp i { background: var(--accent-warm); }
.sel-chip.critical .hp i { background: var(--danger); }

/* ---------- alerts ---------- */
#alerts {
  position: absolute; top: calc(var(--topbar-h) + 8px); left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 4px; align-items: center;
  pointer-events: none; z-index: 30; max-width: 60vw;
}
.alert {
  padding: 5px 12px; border-radius: 2px;
  background: rgba(16,20,26,0.92); border: 1px solid #0a0d11;
  box-shadow: inset 1px 1px 0 #3a424d, 0 2px 8px rgba(0,0,0,0.6);
  font: 600 11px/1.3 var(--font); letter-spacing: 0.4px; color: var(--ink);
  animation: alertIn 160ms ease-out, alertOut 400ms ease-in 3.2s forwards;
}
.alert.warn   { color: var(--accent-warm); border-color: #5a3d12; }
.alert.danger { color: var(--danger); border-color: #5a1f18; }
.alert.good   { color: var(--good); border-color: #1e4a26; }
@keyframes alertIn  { from { opacity: 0; transform: translateY(-6px); } }
@keyframes alertOut { to   { opacity: 0; transform: translateY(-6px); } }

#hover-tip {
  position: absolute; z-index: 40; pointer-events: none;
  max-width: 240px; padding: 6px 8px;
  background: rgba(12,15,20,0.96); border: 1px solid #39414c;
  box-shadow: 0 4px 14px rgba(0,0,0,0.7);
  font-size: 10.5px; line-height: 1.4; color: var(--ink);
  border-radius: 2px;
}
#hover-tip h4 { margin: 0 0 3px; font-size: 11px; color: var(--accent); letter-spacing: 0.5px; }
#hover-tip .tip-cost { font-family: var(--mono); font-size: 10px; color: var(--ink-dim); margin-top: 4px; }
#hover-tip .tip-cost b { color: var(--metal); }
#hover-tip .tip-cost i { color: var(--energy); font-style: normal; }

/* ---------- loading screen ---------- */
#loading-screen {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 42%, #17202b 0%, #05070a 72%);
  transition: opacity 420ms ease; 
}
/* Visibility is driven explicitly from JS. A sibling selector on #app was
   fragile: the menu is an overlay that has to sit ABOVE the loading screen
   between matches, and #app carries .loading for the whole session otherwise. */
#loading-screen.gone { opacity: 0; pointer-events: none; }
#loading-screen.off  { display: none; }
.loading-inner { text-align: center; width: min(420px, 84vw); }

.game-title {
  margin: 0 0 6px; font: 800 clamp(30px, 8vw, 54px)/1 var(--font);
  letter-spacing: 0.16em; color: var(--ink-bright);
  text-shadow: 0 0 26px rgba(111,211,255,0.34), 0 3px 0 #0a0d11;
}
.game-title span { color: var(--accent); }
.loading-sub {
  font: 600 10.5px/1 var(--font); letter-spacing: 0.34em;
  color: var(--ink-dim); text-transform: uppercase; margin-bottom: 18px;
}
.loading-bar {
  height: 5px; background: #0b0e12; border: 1px solid #0a0d11;
  box-shadow: inset 0 1px 2px #000; overflow: hidden;
}
.loading-bar i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, #2b7fa8, var(--accent));
  transition: width 180ms ease-out;
}
.loading-step {
  margin-top: 7px; font: 10px/1 var(--mono); letter-spacing: 1.6px;
  color: var(--ink-dim); text-transform: uppercase;
}

/* ---------- modal overlays ---------- */
#overlay {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  background: rgba(4,6,9,0.82); backdrop-filter: blur(2px);
  padding: 16px;
}
#overlay[hidden] { display: none; }
#overlay-panel {
  width: min(760px, 96vw); max-height: 92vh; overflow-y: auto;
  background: linear-gradient(180deg, #262c34, #1a1f26);
  border: 1px solid #0a0d11;
  box-shadow: inset 1px 1px 0 #4d5765, 0 20px 60px rgba(0,0,0,0.8);
  padding: 22px 24px;
}
#overlay-panel h2 {
  margin: 0 0 4px; font-size: 19px; letter-spacing: 0.1em; color: var(--ink-bright);
}
#overlay-panel h3 {
  margin: 20px 0 8px; font-size: 11px; letter-spacing: 0.18em;
  color: var(--accent); text-transform: uppercase;
  border-bottom: 1px solid #333b45; padding-bottom: 5px;
}
#overlay-panel p { line-height: 1.6; color: var(--ink-dim); margin: 0 0 10px; }
#overlay-panel .sub { color: var(--ink-dim); font-size: 11.5px; margin-bottom: 16px; }

.ov-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px; }
.ov-btn {
  flex: 1 1 auto; min-width: 130px; padding: 11px 14px;
  background: linear-gradient(180deg, #39414c, #232931);
  border: 1px solid #0a0d11;
  box-shadow: inset 1px 1px 0 #59636f, inset -1px -1px 0 #0d1116;
  color: var(--ink-bright); font: 700 11px/1 var(--font); letter-spacing: 0.14em;
  border-radius: 2px; cursor: pointer; text-transform: uppercase;
}
.ov-btn:hover { background: linear-gradient(180deg, #47515e, #2b323b); }
.ov-btn.primary {
  background: linear-gradient(180deg, #2f7fa4, #1c5471);
  box-shadow: inset 1px 1px 0 #57b0d8, inset -1px -1px 0 #0d1116;
}
.ov-btn.primary:hover { background: linear-gradient(180deg, #3c93bb, #226180); }

/* faction picker on the setup screen */
.faction-row { display: flex; gap: 10px; flex-wrap: wrap; }
.faction-card {
  flex: 1 1 220px; padding: 12px 14px; cursor: pointer;
  background: #1c222a; border: 1px solid #0a0d11;
  box-shadow: inset 1px 1px 0 #333b45;
}
.faction-card.sel { box-shadow: inset 0 0 0 2px var(--accent), inset 1px 1px 0 #333b45; }
.faction-card h4 { margin: 0 0 4px; font-size: 13px; letter-spacing: 0.12em; }
.faction-card p { font-size: 11px; line-height: 1.5; margin: 0; }
.faction-card .swatch { display: inline-block; width: 10px; height: 10px; margin-right: 6px;
                        border: 1px solid #000; vertical-align: middle; }

/* keybinding table */
.keys-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.keys-table th {
  text-align: left; font: 700 9px/1 var(--font); letter-spacing: 0.16em;
  color: var(--ink-dim); text-transform: uppercase; padding: 8px 6px 5px;
  border-bottom: 1px solid #333b45;
}
.keys-table td { padding: 5px 6px; border-bottom: 1px solid #20262e; vertical-align: top; }
.keys-table td.k { width: 92px; }
.keys-table .hint { color: var(--ink-dim); font-size: 10.5px; }
.keycap {
  display: inline-block; min-width: 34px; text-align: center;
  padding: 3px 7px; font: 700 10px/1 var(--mono);
  background: linear-gradient(180deg, #39414c, #232931);
  border: 1px solid #0a0d11; border-radius: 3px;
  box-shadow: inset 1px 1px 0 #59636f, 0 2px 0 #0d1116;
  color: var(--ink-bright); cursor: pointer;
}
.keycap.listening { background: #2f7fa4; color: #fff; animation: stallpulse 0.8s infinite; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.stat-box { background: #1c222a; border: 1px solid #0a0d11; padding: 10px 12px; }
.stat-box .v { font: 700 20px/1 var(--mono); color: var(--ink-bright); }
.stat-box .l { font: 9px/1 var(--font); letter-spacing: 0.14em; color: var(--ink-dim);
               text-transform: uppercase; margin-top: 5px; }

/* ---------- tutorial ---------- */
#tutorial-card {
  position: absolute; z-index: 60; width: min(340px, 84vw);
  background: linear-gradient(180deg, #2a323c, #1a1f26);
  border: 1px solid #0a0d11;
  box-shadow: inset 1px 1px 0 #4d5765, 0 10px 34px rgba(0,0,0,0.75);
  padding: 13px 15px;
}
#tutorial-card .t-step {
  font: 700 8.5px/1 var(--font); letter-spacing: 0.2em; color: var(--accent);
  text-transform: uppercase; margin-bottom: 6px;
}
#tutorial-card h4 { margin: 0 0 6px; font-size: 13.5px; color: var(--ink-bright); letter-spacing: 0.04em; }
#tutorial-card p { margin: 0 0 9px; font-size: 11.5px; line-height: 1.55; color: var(--ink); }
#tutorial-card .t-keys { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 10px; }
#tutorial-card .t-actions { display: flex; gap: 6px; justify-content: flex-end; }
#tutorial-card .t-actions .mini-btn { padding: 6px 11px; font-size: 9px; }
#tutorial-card .t-progress {
  height: 2px; background: #0b0e12; margin: -3px -15px 10px; 
}
#tutorial-card .t-progress i { display: block; height: 100%; background: var(--accent); }

/* The spotlight ring that points at whatever the current step is about. */
#tutorial-spot {
  position: absolute; z-index: 55; pointer-events: none;
  border: 2px solid var(--accent); border-radius: 3px;
  box-shadow: 0 0 0 9999px rgba(4,6,9,0.55), 0 0 16px rgba(111,211,255,0.75);
  animation: spotpulse 1.5s ease-in-out infinite;
}
#tutorial-spot.soft { box-shadow: 0 0 16px rgba(111,211,255,0.75); }
@keyframes spotpulse {
  0%,100% { border-color: rgba(111,211,255,0.55); }
  50%     { border-color: rgba(111,211,255,1); }
}
/* World-space marker drawn over the battlefield for "go here" steps. */
#tutorial-marker {
  position: absolute; z-index: 54; pointer-events: none;
  width: 54px; height: 54px; margin: -27px 0 0 -27px;
  border: 2px dashed var(--accent); border-radius: 50%;
  animation: spin 6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- touch ---------- */
#touch-controls { position: absolute; inset: 0; pointer-events: none; z-index: 25; }
.touch-btn {
  position: absolute; pointer-events: auto;
  width: 44px; height: 44px; border-radius: 3px;
  background: rgba(30,36,44,0.9); color: var(--ink-bright);
  border: 1px solid #0a0d11; box-shadow: inset 1px 1px 0 #4a5460;
  font-size: 19px; line-height: 1; cursor: pointer;
}
#touch-sidebar { left: 8px; top: calc(var(--topbar-h) + 8px); }
#touch-hint {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  padding: 5px 12px; border-radius: 12px; background: rgba(12,15,20,0.86);
  font-size: 11px; color: var(--ink-dim); pointer-events: none;
}
#touch-hint:empty { display: none; }

/* Short viewports - a phone in landscape is under 400px tall, which is not
   enough for the minimap, both button grids and the readout at natural size.
   The column scrolls, with the minimap pinned so it never scrolls away. */
@media (max-height: 640px) {
  #sidebar { overflow-y: auto; overscroll-behavior: contain; }
  #minimap-panel {
    position: sticky; top: 0; z-index: 2;
    background: #05070a;
  }
  #minimap { max-height: 30vh; object-fit: contain; }
  #orders-panel, #build-panel, #info-panel { flex: 0 0 auto; }
  #build-grid { overflow: visible; }
  #info-panel { min-height: 0; }
  #info-desc { display: none; }   /* the stats stay; the prose is the luxury */
}

/* ---------- responsive / mobile ---------- */
@media (max-width: 820px), (pointer: coarse) {
  :root { --sidebar-w: 176px; --topbar-h: 42px; }
  body { font-size: 12px; }
  /* The command column slides away so the battlefield gets the whole screen. */
  #sidebar {
    transform: translateX(-100%); transition: transform 200ms ease;
    width: 186px;
  }
  #app.panel-open #sidebar { transform: translateX(0); }
  #selection-strip { left: 0; }
  #touch-controls { display: block; }
  .cmd .cmd-key { display: none; }        /* no keyboard to tell them about */
  #minimap { max-height: 34vh; }
}

@media (max-width: 820px) and (orientation: portrait) {
  #topbar-center { flex-basis: 74px; }
  #wind-readout { display: none; }
}

/* Fine pointer on a small screen still gets the key captions. */
@media (pointer: fine) { .cmd .cmd-key { display: block; } }

/* Respect a user who has asked for less motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}