/* ------------------------------------------------------------------------
   Interface styling. The HUD is real DOM rather than canvas: on a phone that
   buys crisp text at any pixel ratio, proper hit targets, and safe-area
   handling around the notch for free.
   ------------------------------------------------------------------------ */
:root {
  --ink: #11130f;
  --bg: #12160f;
  --bg2: #1b2015;
  --line: #3d4732;
  --text: #d7e0c2;
  --dim: #8c9877;
  --gold: #e3c26a;
  --good: #a8d36a;
  --bad: #e0704f;
  --warn: #e0b24f;
  --pad: 8px;
  --safeT: env(safe-area-inset-top, 0px);
  --safeB: env(safe-area-inset-bottom, 0px);
  --safeL: env(safe-area-inset-left, 0px);
  --safeR: env(safe-area-inset-right, 0px);
  --rail: 124px;
  font-synthesis-weight: none;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: #000;
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
  overscroll-behavior: none;
  touch-action: none;
}

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

#view {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

#hud {
  position: absolute;
  inset: 0;
  pointer-events: none;   /* only the controls themselves take input */
}
#hud[hidden] { display: none; }
#hud button, #hud .tappable { pointer-events: auto; }

/* --- top strip ---------------------------------------------------------- */
#topbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: calc(var(--safeT) + 5px) calc(var(--safeR) + 6px) 5px calc(var(--safeL) + 6px);
  background: linear-gradient(180deg, rgba(10,13,8,0.92), rgba(10,13,8,0.55) 70%, transparent);
}
.stat {
  display: flex; align-items: center; gap: 5px;
  padding: 3px 8px;
  background: rgba(18,22,15,0.82);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.stat b { font-weight: 700; letter-spacing: 0.2px; }
.stat .lbl { color: var(--dim); font-size: 10px; letter-spacing: 1px; }
.stat.wide { gap: 7px; }
.stat.low b { color: var(--bad); }
.meter { width: 54px; height: 6px; background: #26301c; border-radius: 3px; overflow: hidden; }
.meter i { display: block; height: 100%; width: 100%; background: var(--good); transition: width .3s, background .3s; }
.grow { flex: 1; }
.gi { width: 15px; height: 15px; fill: var(--gold); stroke: none; }
.gi .ln { fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; }
.iconbtn {
  width: 34px; height: 30px;
  display: grid; place-items: center;
  background: rgba(18,22,15,0.82);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  cursor: pointer;
}
.iconbtn:active { background: var(--bg2); }
.iconbtn.off .gi { fill: var(--dim); opacity: .45; }

/* --- objectives --------------------------------------------------------- */
.panel {
  background: rgba(13,17,10,0.94);
  border: 1px solid var(--line);
  border-radius: 8px;
}
#objectives {
  position: absolute;
  left: calc(var(--safeL) + 8px);
  top: calc(var(--safeT) + 42px);
  width: min(250px, 40vw);
  pointer-events: auto;
  overflow: hidden;
}
#objHeader {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 9px;
  cursor: pointer;
  border-bottom: 1px solid var(--line);
}
#objHeader .tag { font-size: 10px; letter-spacing: 1.4px; color: var(--gold); font-weight: 700; }
#objCount { font-size: 10px; color: var(--dim); flex: 1; }
#objHeader .chev { color: var(--dim); transition: transform .2s; }
#objectives.collapsed #objList { display: none; }
#objectives.collapsed #objHeader { border-bottom: none; }
#objectives.collapsed .chev { transform: rotate(-90deg); }
#objList {
  list-style: none; margin: 0; padding: 4px 8px 6px;
  max-height: 38vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
#objList li {
  display: flex; gap: 6px; align-items: flex-start;
  padding: 2px 0;
  font-size: 10.8px;
  line-height: 1.3;
  color: var(--text);
}
#objList li .mk { flex: 0 0 13px; text-align: center; font-weight: 700; }
#objList li.done { color: var(--dim); }
#objList li.done .mk { color: var(--good); }
#objList li.done .tx { text-decoration: line-through; opacity: .75; }
#objList li.active .mk { color: var(--gold); }
#objList li.failed { color: var(--bad); }
#objList li.failed .mk { color: var(--bad); }
#objList li .pg { color: var(--gold); font-variant-numeric: tabular-nums; }
#objList li.opt .tx::after { content: " (optional)"; color: var(--dim); font-size: 10px; }

/* --- right rail --------------------------------------------------------- */
#rail {
  position: absolute;
  right: calc(var(--safeR) + 6px);
  top: calc(var(--safeT) + 42px);
  bottom: calc(var(--safeB) + 6px);
  width: var(--rail);
  display: flex;
  flex-direction: column;
  gap: 5px;
  pointer-events: auto;
  padding: 5px;
  background: linear-gradient(180deg, #0e1209, #0b0e07);
  border: 1px solid var(--line);
  border-radius: 9px;
}
#minimapWrap {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  background: #0a0c08;
  flex: 0 0 auto;
}
#minimap { display: block; width: 100%; height: auto; touch-action: none; }
#tabs { display: flex; gap: 3px; }
#tabs button {
  flex: 1;
  min-width: 0;
  padding: 5px 1px;
  /* Four three-letter tabs have to share the rail's width; WRK is the widest
     and was clipping by a pixel at 8.5px. */
  font-size: 8.5px; letter-spacing: -0.3px; font-weight: 700;
  color: var(--dim);
  background: #1a1f14;
  border: 1px solid var(--line);
  border-radius: 5px;
  cursor: pointer;
}
#tabs button.on { color: var(--ink); background: var(--gold); border-color: var(--gold); }
#palette {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  align-content: start;
  padding-bottom: 4px;
}
.card {
  position: relative;
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #171c11;
  overflow: hidden;
  cursor: pointer;
  display: block;
  padding: 0;
}
.card canvas, .card img { width: 100%; height: 100%; display: block; }
.card .cost {
  position: absolute; left: 0; right: 0; bottom: 0;
  font-size: 9px; font-weight: 700;
  text-align: center;
  color: var(--gold);
  background: linear-gradient(180deg, transparent, rgba(8,10,6,0.92) 55%);
  padding: 6px 0 1px;
  font-variant-numeric: tabular-nums;
}
.card .qty {
  position: absolute; top: 2px; right: 3px;
  font-size: 9px; font-weight: 700; color: var(--ink);
  background: var(--gold); border-radius: 4px; padding: 0 3px;
}
.card .prog {
  position: absolute; left: 0; bottom: 0; height: 3px;
  background: var(--gold);
}
.card.disabled { opacity: .38; }
.card.selected { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.card.cooling .cost { color: var(--dim); }
.card .cd {
  position: absolute; inset: 0;
  background: rgba(8,10,6,0.66);
  display: grid; place-items: center;
  font-size: 13px; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* --- bottom bar --------------------------------------------------------- */
#bottom {
  position: absolute;
  left: calc(var(--safeL) + 8px);
  bottom: calc(var(--safeB) + 6px);
  right: calc(var(--safeR) + var(--rail) + 20px);
  display: flex;
  align-items: flex-end;
  gap: 8px;
  pointer-events: none;
}
#selection {
  pointer-events: auto;
  min-width: 0;
  max-width: 260px;
  background: rgba(13,17,10,0.94);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 9px;
}
#selection:empty { display: none; }
#selection .nm { font-weight: 700; font-size: 12.5px; }
#selection .nm .rank { color: var(--gold); font-size: 10px; margin-left: 5px; letter-spacing: .6px; }
#selection .sub { color: var(--dim); font-size: 10.5px; margin-top: 1px; line-height: 1.3; }
#selection .bars { display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
#selection .chip {
  font-size: 9.5px; padding: 1px 5px; border-radius: 4px;
  background: #222a19; border: 1px solid var(--line); color: var(--dim);
}
#selection .chip.hot { color: var(--gold); border-color: #5a5230; }

#cmdbar {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  pointer-events: none;
}
.cmd {
  pointer-events: auto;
  width: 46px; height: 46px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(14,18,11,0.95);
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}
.cmd canvas { width: 100%; height: 100%; display: block; }
.cmd.on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.cmd:active { transform: translateY(1px); }
.cmd .kb {
  position: absolute; right: 2px; bottom: 1px;
  font-size: 8px; color: var(--dim);
}

/* --- notices and hints --------------------------------------------------- */
#notices {
  position: absolute;
  left: 50%;
  top: calc(var(--safeT) + 44px);
  transform: translateX(-50%);
  width: min(430px, 52vw);
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  pointer-events: none;
}
.notice {
  background: rgba(12,16,10,0.92);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: 5px;
  padding: 5px 11px;
  font-size: 11px;
  line-height: 1.35;
  text-align: center;
  max-width: 100%;
  animation: noticeIn .22s ease-out;
  box-shadow: 0 4px 14px rgba(0,0,0,0.45);
}
.notice.good { border-left-color: var(--good); }
.notice.bad { border-left-color: var(--bad); }
.notice.fade { opacity: 0; transition: opacity .5s; }
@keyframes noticeIn { from { opacity: 0; transform: translateY(-6px); } }

#hint {
  position: absolute;
  left: 50%;
  bottom: calc(var(--safeB) + 62px);
  transform: translateX(-50%);
  background: rgba(12,16,10,0.9);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 14px;
  font-size: 11px;
  color: var(--gold);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s;
}
#hint.show { opacity: 1; }

/* --- full-screen overlays (briefing, pause, results) --------------------- */
#overlay {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  background: radial-gradient(120% 90% at 50% 30%, rgba(26,32,20,0.90), rgba(6,8,5,0.97));
  padding: calc(var(--safeT) + 14px) calc(var(--safeR) + 14px) calc(var(--safeB) + 14px) calc(var(--safeL) + 14px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 20;
}
#overlay.show { display: grid; }
.sheet {
  width: min(660px, 100%);
  max-height: 100%;
  overflow-y: auto;
  background: linear-gradient(180deg, rgba(24,29,18,0.97), rgba(16,20,13,0.97));
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 20px 16px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.6);
}
.sheet h1 {
  margin: 0;
  font-size: 21px;
  letter-spacing: 0.4px;
  line-height: 1.15;
}
.sheet h1 small {
  display: block;
  font-size: 10px;
  letter-spacing: 2.6px;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 5px;
}
.sheet .loc { color: var(--dim); font-size: 11px; margin: 3px 0 12px; letter-spacing: .4px; }
.sheet p { margin: 0 0 9px; line-height: 1.5; font-size: 12.5px; color: #c9d2b2; }
.sheet .rule { height: 1px; background: var(--line); margin: 12px 0; }
.sheet h2 {
  font-size: 10px; letter-spacing: 1.6px; color: var(--gold);
  margin: 0 0 6px; font-weight: 700;
}
.sheet ul { margin: 0 0 10px; padding-left: 17px; }
.sheet li { margin: 3px 0; font-size: 12px; line-height: 1.4; color: #c9d2b2; }
.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(116px, 1fr)); gap: 7px; margin: 10px 0; }
.kv div { background: rgba(10,13,8,0.6); border: 1px solid var(--line); border-radius: 7px; padding: 6px 9px; }
.kv span { display: block; font-size: 9px; letter-spacing: 1.1px; color: var(--dim); }
.kv b { font-size: 16px; font-variant-numeric: tabular-nums; }
.controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 5px 14px; margin-bottom: 4px; }
.controls div { font-size: 11.5px; color: #c9d2b2; display: flex; gap: 7px; }
.controls i { color: var(--gold); font-style: normal; font-weight: 700; flex: 0 0 auto; }
.btnrow {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin: 14px -20px -16px;
  padding: 12px 20px 14px;
  /* Sticky so the action is always reachable: a landscape phone is only
     390 px tall and a full briefing does not fit above the fold. */
  position: sticky;
  bottom: -16px;
  background: linear-gradient(180deg, rgba(18,22,14,0), rgba(18,22,14,0.96) 38%, rgba(18,22,14,0.99));
}
.btn {
  flex: 1 1 auto;
  min-width: 130px;
  padding: 11px 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.7px;
  color: var(--ink);
  background: var(--gold);
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
.btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--line); }
.btn:active { filter: brightness(.92); }
.verdict { font-size: 26px; font-weight: 800; letter-spacing: 3px; }
.verdict.win { color: var(--good); }
.verdict.lose { color: var(--bad); }

/* --- orientation nudge --------------------------------------------------- */
#rotate {
  position: absolute; inset: 0;
  display: none;
  place-content: center;
  justify-items: center;
  background: rgba(6,8,5,0.93);
  text-align: center;
  z-index: 40;
  padding: 24px;
}
#rotate .card {
  display: grid; justify-items: center; gap: 9px;
  background: linear-gradient(180deg, rgba(24,29,18,0.98), rgba(16,20,13,0.98));
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px 22px 18px;
  max-width: 330px;
}
#rotate svg { width: 58px; height: 58px; fill: none; stroke: var(--gold); stroke-width: 3; }
#rotate svg .ln { stroke-dasharray: 4 5; }
#rotate p { margin: 0; font-size: 15px; font-weight: 700; }
#rotate small { color: var(--dim); line-height: 1.4; }
#rotate .btn { margin-top: 4px; min-width: 0; width: 100%; }
/* Shown only in portrait, and only until the player dismisses it. Blocking
   the game outright behind an orientation check strands anyone whose browser
   or embedding frame will not rotate. */
@media (orientation: portrait) and (max-width: 820px) {
  body:not(.portrait-ok) #rotate { display: grid; }
}

/* --- portrait layout ------------------------------------------------------
   The rail turns into a horizontal strip along the bottom with a
   side-scrolling palette, and the minimap floats top-right. Tighter than
   landscape, but genuinely playable rather than a dead end. */
@media (orientation: portrait) and (max-width: 820px) {
  #rail {
    left: calc(var(--safeL) + 6px);
    right: calc(var(--safeR) + 6px);
    top: auto;
    bottom: calc(var(--safeB) + 6px);
    width: auto;
    height: 96px;
    flex-direction: row;
    gap: 5px;
  }
  #minimapWrap {
    position: fixed;
    top: calc(var(--safeT) + 42px);
    right: calc(var(--safeR) + 8px);
    width: 96px;
    z-index: 6;
  }
  #tabs {
    flex: 0 0 52px;
    flex-direction: column;
    gap: 3px;
  }
  #tabs button { padding: 0; font-size: 8px; }
  #palette {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 60px;
    grid-template-rows: 1fr;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 0;
  }
  #bottom {
    left: calc(var(--safeL) + 8px);
    right: calc(var(--safeR) + 8px);
    bottom: calc(var(--safeB) + 108px);
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  #selection { max-width: 100%; }
  #objectives {
    width: min(200px, calc(100% - 118px));
    top: calc(var(--safeT) + 42px);
  }
  #objList { max-height: 26vh; }
  #notices { width: min(300px, 80vw); top: calc(var(--safeT) + 42px); }
  #hint { bottom: calc(var(--safeB) + 210px); }
  /* The top bar has to fit ~375 px and it carries three economies, the
     commander badge and the turn counter. Trim in priority order: the elapsed
     clock goes first (it is repeated on the pause sheet), then the Local
     Support and TURN labels, then general padding. The sound and menu buttons
     must never be pushed off the edge. */
  #topbar { gap: 3px; padding-left: calc(var(--safeL) + 4px); padding-right: calc(var(--safeR) + 4px); }
  .stat { padding: 2px 3px; font-size: 11px; gap: 3px; }
  .gi { width: 12px; height: 12px; }
  .iconbtn { width: 30px; height: 28px; flex: 0 0 auto; }
  #statClock { display: none; }
  #statSupport .lbl { display: none; }
  #statSupport .meter { width: 30px; }
  #statTurn .lbl { display: none; }
  #statTurn b::before { content: 'T'; color: var(--dim); margin-right: 1px; }
  .stat.res { gap: 2px; }
  .stat.res .delta { font-size: 9px; min-width: 18px; }
  #btnCommander .pip { min-width: 13px; height: 13px; line-height: 13px; font-size: 9px; }
}

/* Short screens: a phone held in landscape is only ~390 px tall, so the
   briefing and results sheets have to give back every spare pixel. */
@media (max-height: 470px) {
  .sheet { padding: 13px 15px 12px; border-radius: 10px; }
  .sheet h1 { font-size: 17px; }
  .sheet h1 small { font-size: 9px; letter-spacing: 2px; margin-bottom: 3px; }
  .sheet .loc { margin: 2px 0 8px; }
  .sheet p { font-size: 11.5px; margin-bottom: 6px; line-height: 1.42; }
  .sheet li { font-size: 11px; margin: 2px 0; }
  .sheet .rule { margin: 9px 0; }
  .controls div { font-size: 10.5px; }
  .kv b { font-size: 14px; }
  .btnrow { margin: 10px -15px -12px; padding: 10px 15px 11px; }
  .btn { padding: 9px 14px; font-size: 12px; }
  .verdict { font-size: 21px; }
}

/* Tighter rail and controls on short screens (a phone in landscape). */
@media (max-height: 430px) {
  :root { --rail: 108px; }
  .cmd { width: 42px; height: 42px; }
  #objectives { width: min(240px, 42vw); }
  #selection { max-width: 210px; padding: 5px 8px; }
  .stat { padding: 2px 6px; }
}

/* ------------------------------------------------------------------------
   Blinking alerts.
   Lifted straight from the genre's interface language: the HUD should be able
   to shout without a line of text. Three speeds — a slow pulse for "ready",
   a steady blink for "attention", a fast blink for "right now".
   ------------------------------------------------------------------------ */
@keyframes blinkSoft { 0%,100% { opacity: 1; } 50% { opacity: .38; } }
@keyframes blinkHard { 0%,49% { opacity: 1; } 50%,100% { opacity: .2; } }
@keyframes pulseGlow {
  0%,100% { box-shadow: 0 0 0 0 rgba(227,194,106,0.0); }
  50%     { box-shadow: 0 0 0 2px rgba(227,194,106,0.75), 0 0 12px rgba(227,194,106,0.4); }
}
@keyframes pulseAlarm {
  0%,100% { box-shadow: 0 0 0 0 rgba(224,112,79,0.0); border-color: var(--line); }
  50%     { box-shadow: 0 0 0 2px rgba(224,112,79,0.85), 0 0 14px rgba(224,112,79,0.45);
            border-color: var(--bad); }
}
@keyframes flashBg {
  0%,100% { background: rgba(18,22,15,0.82); }
  50%     { background: rgba(120,38,22,0.85); }
}

.blink       { animation: blinkSoft 1.1s steps(1,end) infinite; }
.blink-hard  { animation: blinkHard 0.42s steps(1,end) infinite; }
.pulse       { animation: pulseGlow 1.5s ease-in-out infinite; }
.alarm       { animation: pulseAlarm 0.8s ease-in-out infinite; }

/* Low power: the classic brown-out warning on the power read-out. */
#statPower.low { animation: flashBg 0.9s ease-in-out infinite; }
#statPower.low .gi { fill: var(--bad); }
#statPower.low b { color: #ffd9cb; }

/* Not enough supply for what you just tried to buy. */
#statSupply.short { animation: flashBg 0.28s steps(1,end) 5; }

/* Local Support in the danger band. */
#statSupport.critical { animation: pulseAlarm 0.9s ease-in-out infinite; }
#statSupport.critical .lbl { color: var(--bad); }

/* A newly issued objective draws the eye to the panel until it is read. */
#objectives.fresh { animation: pulseGlow 1.2s ease-in-out infinite; }
#objectives.fresh #objHeader .tag { animation: blinkSoft 0.9s steps(1,end) infinite; }
#objList li.justdone .mk { animation: blinkHard 0.3s steps(1,end) 6; }
#objList li.active.urgent .mk { animation: blinkSoft 0.75s steps(1,end) infinite; color: var(--bad); }

/* A support power finishing its cooldown announces itself. */
.card.ready { animation: pulseGlow 1.6s ease-in-out infinite; }
.card.ready .cost { color: var(--good); }
/* A finished unit or structure flashes once so you notice it arrived. */
.card.justmade { animation: blinkHard 0.22s steps(1,end) 4; }

/* Base under attack: the minimap and its label both go red. */
#minimapWrap.attack { animation: pulseAlarm 0.62s ease-in-out infinite; }
#minimapWrap .ping {
  position: absolute;
  width: 16px; height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid var(--bad);
  border-radius: 50%;
  pointer-events: none;
  animation: pingOut 1.1s ease-out forwards;
}
@keyframes pingOut {
  0%   { transform: scale(0.35); opacity: 1; }
  100% { transform: scale(2.1); opacity: 0; }
}

/* An incoming counterattack turns the clock into a countdown warning. */
#statClock.warn { animation: pulseAlarm 0.75s ease-in-out infinite; }
#statClock.warn b { color: var(--bad); }

/* The order the player is waiting to place a target for. */
.cmd.on { animation: pulseGlow 1.0s ease-in-out infinite; }
.notice.bad { animation: noticeIn .22s ease-out, blinkSoft 0.55s steps(1,end) 4; }

/* Respect a system-level request for reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .blink, .blink-hard, .pulse, .alarm,
  #statPower.low, #statSupply.short, #statSupport.critical,
  #objectives.fresh, #objectives.fresh #objHeader .tag,
  #objList li.justdone .mk, #objList li.active.urgent .mk,
  .card.ready, .card.justmade, #minimapWrap.attack,
  #statClock.warn, .cmd.on, .notice.bad {
    animation: none;
  }
  #statPower.low { background: rgba(120,38,22,0.7); }
  #statSupport.critical, #minimapWrap.attack { border-color: var(--bad); }
  .card.ready { box-shadow: 0 0 0 1px var(--gold) inset; }
}

/* ------------------------------------------------------------------------
   Turn-based interface
   ------------------------------------------------------------------------ */
.stat.res { gap: 4px; }
.stat.res .delta {
  font-style: normal; font-size: 9.5px; font-variant-numeric: tabular-nums;
  color: var(--dim); min-width: 22px;
}
.stat.res .delta.up { color: var(--good); }
.stat.res .delta.down { color: var(--bad); }
.gi.f { fill: #e0a24f; } .gi.f .ln { stroke: #12160f; }
.gi.w { fill: #6ab4d4; }
.gi.o { fill: #b58ad4; stroke: #b58ad4; fill-opacity: .25; stroke-width: 2; }
.gi.o .ln { stroke: #b58ad4; }
#statFuel.short, #statWater.short, #statOil.short { animation: flashBg .9s ease-in-out infinite; }
#statFuel.short b, #statWater.short b, #statOil.short b { color: #ffd9cb; }

#btnCommander {
  cursor: pointer; color: var(--text);
  border: 1px solid var(--line); background: rgba(18,22,15,0.82);
}
#btnCommander .lbl { color: var(--gold); font-weight: 700; letter-spacing: .6px; }
/* The unspent-points pip sits beside the rank, not on top of it: overlaying a
   badge this small covered the letters it was meant to annotate. */
#btnCommander .pip {
  min-width: 15px; height: 15px; padding: 0 3px;
  border-radius: 8px; background: var(--good); color: var(--ink);
  font-size: 10px; font-weight: 700; line-height: 15px; text-align: center;
  animation: pulseGlow 1.4s ease-in-out infinite;
}

/* The end-turn button is the most-pressed control in the game, so it gets a
   corner to itself and a size a thumb cannot miss. */
#btnEndTurn {
  position: absolute;
  right: calc(var(--safeR) + var(--rail) + 18px);
  bottom: calc(var(--safeB) + 6px);
  display: grid; place-items: center; gap: 1px;
  min-width: 104px; padding: 9px 16px;
  border: 1px solid #5d6b44; border-radius: 9px;
  background: linear-gradient(180deg, #44532f, #2c3720);
  color: var(--text); cursor: pointer; pointer-events: auto;
  box-shadow: 0 3px 12px rgba(0,0,0,.45);
}
#btnEndTurn .lbl { font-size: 12px; font-weight: 800; letter-spacing: 1.4px; }
#btnEndTurn .sub { font-size: 9px; color: #a9bb8b; letter-spacing: .3px; }
#btnEndTurn:active { transform: translateY(1px); }
#btnEndTurn.ready { animation: pulseGlow 1.6s ease-in-out infinite; border-color: var(--gold); }
#btnEndTurn[disabled] { opacity: .5; pointer-events: none; }

/* Whose turn it is, announced across the middle and then got out of the way. */
#turnBanner {
  position: absolute; left: 50%; top: 38%;
  transform: translate(-50%, -50%);
  padding: 10px 28px;
  border: 1px solid var(--line); border-radius: 10px;
  background: rgba(12,16,10,0.92);
  font-size: 19px; font-weight: 800; letter-spacing: 3px;
  pointer-events: none; opacity: 0;
  transition: opacity .25s;
}
#turnBanner.show { opacity: 1; }
#turnBanner.enemy { color: var(--bad); border-color: #6b3a2c; }
#turnBanner.mine { color: var(--good); border-color: #4a6b32; }

#selection .ap { display: flex; gap: 2px; align-items: center; margin-top: 4px; }
#selection .ap i {
  width: 9px; height: 9px; border-radius: 2px; display: block;
  background: #7fd4ff; border: 1px solid rgba(0,0,0,.35);
}
#selection .ap i.spent { background: #2a3238; }
#selection .ap .txt { font-size: 10px; color: var(--dim); margin-left: 5px; }
#selection .cat {
  font-size: 9px; letter-spacing: 1px; color: var(--ink);
  background: var(--dim); border-radius: 3px; padding: 1px 5px; margin-left: 6px;
}
#selection .cat.infantry { background: #9fd06a; }
#selection .cat.vehicle { background: #e0a24f; }
#selection .cat.air { background: #7fd4ff; }
#selection .cat.structure { background: #b58ad4; }

/* Commander sheet */
.branch { margin-bottom: 12px; }
.branch h3 {
  margin: 0 0 6px; font-size: 10px; letter-spacing: 1.6px;
  color: var(--gold); font-weight: 700;
}
.perk {
  display: grid; grid-template-columns: 1fr auto auto; gap: 3px 10px;
  align-items: center; padding: 6px 9px; margin-bottom: 5px;
  border: 1px solid var(--line); border-radius: 7px;
  background: rgba(10,13,8,0.55);
}
.perk.taken { border-color: #4a6b32; background: rgba(30,46,20,0.5); }
.perk.locked { opacity: .45; }
.perk .nm { font-size: 12.5px; font-weight: 700; }
.perk .ds { grid-column: 1 / -1; font-size: 11px; color: var(--dim); line-height: 1.3; }
.perk .lv { font-size: 10px; color: var(--gold); font-variant-numeric: tabular-nums; }
.perk button {
  padding: 5px 11px; font-size: 11px; font-weight: 700;
  border: none; border-radius: 6px; background: var(--gold); color: var(--ink); cursor: pointer;
}
.perk button[disabled] { background: #3a4230; color: var(--dim); cursor: default; }
.xpbar { height: 7px; background: #26301c; border-radius: 4px; overflow: hidden; margin: 6px 0 3px; }
.xpbar i { display: block; height: 100%; background: var(--gold); }

@media (orientation: portrait) and (max-width: 820px) {
  #btnEndTurn {
    right: calc(var(--safeR) + 8px);
    bottom: calc(var(--safeB) + 108px);
    min-width: 86px; padding: 7px 12px;
  }
  #statSupport { display: none; }
  #btnCommander .lbl { font-size: 10px; }
}