:root {
  color-scheme: dark;
  --ink: #090706;
  --blood-black: #160b09;
  --blood: #561713;
  --blood-bright: #8e2d20;
  --umber: #2b1912;
  --wood: #3c2518;
  --iron: #403b36;
  --iron-dark: #1d1a18;
  --iron-light: #7d7162;
  --brass: #b28a42;
  --brass-pale: #e0c47a;
  --bone: #d9c8a0;
  --parchment: #bda873;
  --ash: #8d8577;
  --danger: #cf4b35;
  --panel-height: clamp(136px, 18vh, 172px);
  --safe-bottom: max(10px, env(safe-area-inset-bottom));
  --ui-space-1: 4px;
  --ui-space-2: 8px;
  --ui-space-3: 12px;
  --ui-label-size: clamp(9px, 0.72vw, 11px);
  --ui-copy-size: clamp(10px, 0.82vw, 12px);
  font-family: Georgia, "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-synthesis: none;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--ink);
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--bone);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

button {
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  border: 0;
  color: inherit;
  font: inherit;
  touch-action: manipulation;
  cursor: pointer;
}

button:focus-visible {
  outline: 2px solid var(--brass-pale);
  outline-offset: 2px;
}

.is-hidden,
[hidden] {
  display: none !important;
}

.game-shell {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 55% 35%, rgba(91, 35, 26, 0.25), transparent 42%),
    #0b0908;
}

#game-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  outline: none;
  touch-action: none;
  image-rendering: auto;
}

.battle-heading {
  position: absolute;
  z-index: 4;
  top: max(12px, env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right));
  left: max(14px, env(safe-area-inset-left));
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  pointer-events: none;
  filter: drop-shadow(0 3px 3px #000);
}

.title-mark {
  justify-self: start;
  padding: 5px 18px 6px 14px;
  border-left: 3px solid var(--blood-bright);
  background: linear-gradient(90deg, rgba(12, 8, 7, 0.88), rgba(12, 8, 7, 0));
  letter-spacing: 0.16em;
  text-shadow: 0 2px 0 #000;
}

.title-mark__main,
.title-mark__sub {
  display: block;
}

.title-mark__main {
  color: var(--bone);
  font-size: clamp(16px, 2vw, 25px);
  font-weight: 700;
}

.title-mark__sub {
  margin-top: 1px;
  color: var(--brass);
  font-size: 9px;
  letter-spacing: 0.35em;
}

.phase-banner {
  grid-column: 2;
  display: flex;
  min-width: 184px;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border: 1px solid #80683c;
  border-top-color: #c29d51;
  background:
    linear-gradient(180deg, rgba(82, 57, 31, 0.96), rgba(29, 20, 14, 0.96) 54%, rgba(11, 8, 7, 0.96));
  box-shadow: inset 0 0 0 2px #1a110c, 0 3px 10px #000;
  color: #ead9ab;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
}

.phase-banner__ornament {
  width: 18px;
  height: 1px;
  margin: 0 9px;
  background: var(--brass);
  box-shadow: 4px 3px 0 -1px var(--brass);
}

.camera-controls {
  position: absolute;
  z-index: 6;
  top: 50%;
  right: max(12px, env(safe-area-inset-right));
  display: grid;
  gap: 5px;
  transform: translateY(calc(-50% - var(--panel-height) / 4));
}

.camera-button {
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  place-items: center;
  border: 1px solid #746757;
  border-bottom-color: #171310;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.06), transparent 36%),
    linear-gradient(180deg, rgba(73, 66, 58, 0.96), rgba(25, 21, 18, 0.96));
  box-shadow: inset 0 0 0 2px #100d0b, inset 0 1px 0 #9a8d7d, 0 2px 7px rgba(0, 0, 0, 0.8);
  color: #ded0b3;
  font: 700 23px/1 Georgia, serif;
  text-shadow: 0 1px 1px #000;
}

.camera-button:hover,
.camera-button:active {
  border-color: #b39358;
  color: #f2d695;
  filter: brightness(1.12);
}

.camera-button:active {
  transform: translateY(1px);
}

.camera-button--reset {
  color: #c8b995;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: 11px;
  letter-spacing: 0.04em;
}

.camera-zoom-value {
  display: grid;
  width: 44px;
  min-height: 20px;
  place-items: center;
  border-right: 1px solid #594d3f;
  border-left: 1px solid #594d3f;
  background: rgba(12, 9, 7, 0.88);
  color: #b9a77e;
  font: 700 9px/1 "Courier New", monospace;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 #000;
}

.command-panel {
  position: absolute;
  z-index: 5;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: minmax(170px, 20%) minmax(390px, 1fr) minmax(270px, 27%);
  gap: clamp(10px, 1vw, 16px);
  height: calc(var(--panel-height) + env(safe-area-inset-bottom));
  padding: 15px max(16px, env(safe-area-inset-right)) var(--safe-bottom) max(16px, env(safe-area-inset-left));
  border-top: 3px solid #706354;
  background:
    linear-gradient(90deg, transparent 0 19px, rgba(255,255,255,0.025) 20px, transparent 21px) 0 0 / 42px 100%,
    linear-gradient(180deg, #39332e 0, #1d1916 12px, #120d0b 54%, #090706 100%);
  box-shadow: inset 0 2px 0 #181411, inset 0 5px 0 #514a42, 0 -8px 22px rgba(0, 0, 0, 0.82);
}

.command-panel::before {
  position: absolute;
  top: 7px;
  right: 0;
  left: 0;
  height: 1px;
  background: #7b2b20;
  box-shadow: 0 1px 0 #180a08;
  content: "";
}

.command-panel__rivets::before,
.command-panel__rivets::after {
  position: absolute;
  top: 4px;
  width: 8px;
  height: 8px;
  border: 1px solid #171310;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #8b8175, #35302a 46%, #151210 70%);
  content: "";
}

.command-panel__rivets {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.command-panel__rivets::before { left: 8px; }
.command-panel__rivets::after { right: 8px; }

.resource-bank,
.unit-command,
.battle-controls {
  min-width: 0;
  border-right: 1px solid #4a4035;
  border-left: 1px solid #080706;
}

.resource-bank {
  display: grid;
  grid-template-columns: 1fr;
  align-content: center;
  gap: var(--ui-space-2);
  padding: 0 var(--ui-space-3) 0 0;
}

.resource-readout {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: var(--ui-space-2);
  padding: var(--ui-space-2) var(--ui-space-3);
  border: 1px solid #55493a;
  background: linear-gradient(180deg, #2d241d, #17110e);
  box-shadow: inset 0 0 0 2px #0d0a08, inset 0 1px 0 #6a5944;
}

.resource-readout__sigil {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border: 2px solid #17100a;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #eed17b, #9b702b 43%, #3d270f 76%);
  box-shadow: 0 1px 0 #786b59, 0 2px 4px #000;
  color: #261508;
  font-weight: 900;
}

.resource-readout--lives .resource-readout__sigil {
  border-radius: 2px 2px 11px 11px;
  background: linear-gradient(135deg, #9b382a, #4b100f 55%, #230b09);
  color: #e1b58e;
}

.resource-readout__copy {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: var(--ui-space-2);
}

.resource-readout__label,
.tally__label {
  color: #a89b87;
  font-size: var(--ui-label-size);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.resource-readout__value {
  color: #f1d28a;
  font-size: clamp(20px, 2.2vw, 31px);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 0 #000;
}

.resource-readout--lives .resource-readout__value {
  color: #dda393;
}

.unit-command {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0 var(--ui-space-2);
}

.unit-tray {
  display: grid;
  grid-template-columns: repeat(4, minmax(76px, 1fr));
  gap: var(--ui-space-2);
  min-height: 0;
  flex: 1;
}

.unit-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(38px, 0.7fr) minmax(48px, 1fr);
  grid-template-rows: 1fr auto;
  gap: var(--ui-space-1) var(--ui-space-2);
  overflow: hidden;
  padding: var(--ui-space-2);
  border: 1px solid #645544;
  border-bottom-color: #211711;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.04), transparent 31%),
    linear-gradient(180deg, #382a20, #1e1511 60%, #120d0b);
  box-shadow: inset 0 0 0 2px #0e0b09, inset 0 1px 0 #796a57, 0 2px 3px #000;
  text-align: left;
}

.unit-card::after {
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(177, 139, 71, 0.13);
  content: "";
  pointer-events: none;
}

.unit-card:hover:not(:disabled),
.unit-card.is-selected {
  border-color: #c7a45c;
  background: linear-gradient(180deg, #503527, #281711 62%, #180d0a);
  box-shadow: inset 0 0 0 2px #160c08, inset 0 1px 0 #c5a15b, 0 0 9px rgba(174, 110, 40, 0.32);
}

.unit-card.is-selected {
  transform: translateY(-2px);
}

.unit-card:disabled,
.unit-card.is-unavailable {
  filter: grayscale(0.9) brightness(0.62);
  cursor: not-allowed;
}

.unit-card__key {
  position: absolute;
  z-index: 1;
  top: 4px;
  left: 4px;
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border: 1px solid #665a49;
  background: #13100d;
  color: #a99d88;
  font: 700 9px/1 Arial, sans-serif;
}

.unit-card__portrait {
  display: grid;
  grid-row: 1 / 3;
  min-width: 38px;
  place-items: center;
  border: 1px solid #18120f;
  background: radial-gradient(circle at 50% 35%, #824a2d, #23120e 62%, #080706);
  box-shadow: inset 0 0 9px #000;
  color: #e4c28a;
  font-size: clamp(16px, 1.6vw, 24px);
  font-weight: 900;
  text-shadow: 0 2px 1px #000;
}

.unit-card__portrait--fire { color: #ffae5c; background: radial-gradient(circle at 50% 40%, #9f371a, #32100b 60%, #090706); }
.unit-card__portrait--frost { color: #b7d6dc; background: radial-gradient(circle at 50% 40%, #3f6871, #17262a 60%, #090706); }
.unit-card__portrait--bolt { color: #d7bf84; background: radial-gradient(circle at 50% 40%, #685237, #211a12 60%, #090706); }
.unit-card__portrait--iron { color: #c1bcb1; background: radial-gradient(circle at 50% 40%, #615c54, #24211f 60%, #090706); }

.unit-card__name {
  align-self: end;
  overflow: hidden;
  color: #e1d2b0;
  font-size: clamp(10px, 1.1vw, 14px);
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-shadow: 0 1px 0 #000;
}

.unit-card__copy {
  min-width: 0;
  align-self: center;
  overflow: hidden;
}

.unit-card__copy strong,
.unit-card__copy small {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.unit-card__copy strong {
  color: #e1d2b0;
  font-size: clamp(10px, 1.1vw, 14px);
}

.unit-card__copy small {
  margin-top: 3px;
  color: #8f8576;
  font: 9px/1.2 Arial, sans-serif;
}

.unit-card__cost {
  align-self: start;
  color: #d2b56c;
  font: 700 12px/1 Arial, sans-serif;
}

.unit-card__cost i {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 3px;
  border-radius: 50%;
  background: #b88b36;
  box-shadow: inset 0 0 0 1px #4c3211;
}

.unit-detail {
  display: flex;
  min-height: 23px;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  gap: var(--ui-space-2);
  padding: var(--ui-space-1) var(--ui-space-2) 0;
  color: #a99d87;
  font-size: var(--ui-copy-size);
  line-height: 1.3;
  letter-spacing: 0.04em;
  white-space: nowrap;
  text-align: center;
  text-overflow: ellipsis;
}

.unit-detail > * {
  display: inline;
  margin: 0;
  font: inherit;
}

.unit-detail strong {
  color: #d0b778;
}

.unit-detail p::before {
  margin-right: var(--ui-space-1);
  content: "—";
  color: #665b4d;
}

.unit-detail .detail-kicker {
  color: #8d7352;
  font-size: 0.82em;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.unit-detail strong {
  color: #e1d2b0;
}

.unit-detail__stats {
  overflow: hidden;
  text-overflow: ellipsis;
}

.xp-track {
  width: 48px;
  height: 4px;
  overflow: hidden;
  flex: 0 0 48px;
  border: 1px solid #4d402f;
  background: #0b0908;
}

.xp-track > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #6d2119, #c08a3e);
}

.battle-controls {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: var(--ui-space-2);
  padding: 0 0 0 var(--ui-space-3);
  border-right: 0;
}

.battle-tallies {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  border: 1px solid #4c4135;
  background: #100d0b;
  box-shadow: inset 0 0 8px #000, 0 1px 0 #5e5142;
}

.tally {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ui-space-2);
  min-width: 0;
  padding: var(--ui-space-2) var(--ui-space-3);
}

.tally + .tally {
  border-left: 1px solid #4b3e32;
}

.tally__value {
  color: #ddd0af;
  font: 700 clamp(15px, 1.8vw, 24px)/1 "Courier New", monospace;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 6px rgba(207, 181, 107, 0.26);
}

.tally__value small {
  margin: 0 2px;
  color: #796f62;
  font-size: 0.58em;
}

.control-buttons {
  display: grid;
  grid-template-columns: 1.45fr 1fr 0.62fr 0.72fr;
  gap: var(--ui-space-2);
  min-height: 44px;
}

.iron-button,
.seal-button {
  position: relative;
  padding: var(--ui-space-2) var(--ui-space-3);
  border: 1px solid #6e6459;
  border-bottom-color: #171311;
  background: linear-gradient(180deg, #4f4a43, #2b2723 47%, #171411 52%, #24201c);
  box-shadow: inset 0 0 0 2px #12100e, inset 0 1px 0 #998e80, 0 2px 2px #000;
  color: #d1c7b5;
  font: 700 var(--ui-copy-size)/1.2 Arial, sans-serif;
  letter-spacing: 0.03em;
  text-shadow: 0 1px 1px #000;
}

.iron-button::before,
.seal-button::before {
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  content: "";
  pointer-events: none;
}

.iron-button:hover:not(:disabled),
.iron-button:active,
.seal-button:hover:not(:disabled),
.seal-button:active {
  filter: brightness(1.16);
}

.iron-button:disabled,
.seal-button:disabled {
  filter: grayscale(0.82) brightness(0.56);
  cursor: not-allowed;
}

.iron-button:active,
.seal-button:active {
  transform: translateY(1px);
}

.iron-button--primary,
.seal-button {
  border-color: #8d4434;
  background: linear-gradient(180deg, #873629, #551c17 48%, #310e0c 52%, #4b1612);
  box-shadow: inset 0 0 0 2px #1b0b09, inset 0 1px 0 #ba6b50, 0 2px 2px #000, 0 0 8px rgba(113, 22, 14, 0.3);
  color: #f0d4b0;
}

.iron-button[aria-pressed="true"] {
  border-color: #b17d45;
  color: #f3d595;
}

.toast {
  position: absolute;
  z-index: 20;
  bottom: calc(var(--panel-height) + env(safe-area-inset-bottom) + 17px);
  left: 50%;
  max-width: min(88vw, 520px);
  min-height: 0;
  padding: 0;
  transform: translate(-50%, 8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease;
}

.toast.is-visible {
  padding: 8px 18px;
  transform: translate(-50%, 0);
  border: 1px solid #796142;
  background: rgba(24, 14, 10, 0.94);
  box-shadow: inset 0 0 0 2px #0b0806, 0 3px 12px #000;
  opacity: 1;
  color: #e5d0a4;
  font-size: 12px;
  text-align: center;
}

.loading-screen,
.modal-layer {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
}

.loading-screen {
  z-index: 100;
  background:
    repeating-linear-gradient(0deg, transparent 0 2px, rgba(0, 0, 0, 0.12) 3px 4px),
    radial-gradient(circle at center, #3b1813, #160b09 44%, #070606 80%);
  text-align: center;
}

.loading-screen::after {
  position: absolute;
  right: 7vw;
  bottom: 6vh;
  left: 7vw;
  height: 1px;
  background: linear-gradient(90deg, transparent, #67472b, transparent);
  content: "";
}

.loading-crest {
  position: absolute;
  top: calc(50% - 105px);
  width: 64px;
  height: 76px;
  border: 2px solid #8d6b3c;
  border-radius: 3px 3px 30px 30px;
  background: linear-gradient(135deg, #4d1b17 50%, #25100d 50%);
  box-shadow: inset 0 0 0 4px #160b09, 0 5px 15px #000;
}

.loading-crest span::before,
.loading-crest span::after {
  position: absolute;
  background: #b28a42;
  content: "";
}

.loading-crest span::before { top: 13px; left: 29px; width: 3px; height: 46px; }
.loading-crest span::after { top: 29px; left: 15px; width: 32px; height: 3px; }

.loading-kicker,
.loading-title,
.loading-copy {
  position: absolute;
  right: 20px;
  left: 20px;
  margin: 0;
}

.loading-kicker { top: calc(50% - 7px); color: #a78955; font-size: 9px; letter-spacing: 0.45em; }
.loading-title { top: calc(50% + 10px); color: #e0cfaa; font-size: clamp(27px, 6vw, 48px); font-weight: 700; letter-spacing: 0.14em; text-shadow: 0 3px 0 #000; }
.loading-copy { top: calc(50% + 78px); color: #806f5c; font-size: 11px; letter-spacing: 0.1em; }

.modal-layer {
  z-index: 30;
  padding: max(18px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(0, 0, 0, 0.12) 4px),
    radial-gradient(circle at center, rgba(71, 27, 20, 0.46), rgba(3, 3, 3, 0.91) 68%);
  backdrop-filter: blur(2px);
}

.parchment-dialog {
  position: relative;
  width: min(92vw, 600px);
  max-height: calc(100dvh - 36px);
  overflow: auto;
  padding: clamp(28px, 5vw, 48px) clamp(24px, 6vw, 66px);
  border: 2px solid #7e6943;
  background:
    linear-gradient(90deg, rgba(49, 23, 12, 0.17), transparent 15% 85%, rgba(49, 23, 12, 0.17)),
    repeating-linear-gradient(0deg, rgba(72, 43, 20, 0.04) 0 1px, transparent 1px 4px),
    #bda873;
  box-shadow: inset 0 0 0 4px #2d1a11, inset 0 0 0 6px #77633e, inset 0 0 35px rgba(53, 25, 10, 0.64), 0 12px 44px #000;
  color: #2a1710;
  text-align: center;
}

.parchment-dialog::before,
.parchment-dialog::after {
  position: absolute;
  top: 12px;
  bottom: 12px;
  width: 4px;
  background: linear-gradient(#48271b, transparent 15% 85%, #48271b);
  content: "";
  opacity: 0.55;
}

.parchment-dialog::before { left: 14px; }
.parchment-dialog::after { right: 14px; }

.dialog-seal {
  display: grid;
  width: 54px;
  height: 62px;
  margin: -8px auto 13px;
  place-items: center;
  border: 2px solid #482017;
  border-radius: 2px 2px 25px 25px;
  background: #6d211a;
  box-shadow: inset 0 0 0 3px #9c4c35;
  color: #d0a65d;
  font-size: 27px;
  font-weight: 700;
}

.dialog-kicker {
  margin: 0 0 6px;
  color: #67442a;
  font: 700 var(--ui-label-size)/1.2 Arial, sans-serif;
  letter-spacing: 0.28em;
}

.parchment-dialog h1,
.parchment-dialog h2 {
  margin: 0;
  color: #32130f;
  font-size: clamp(29px, 7vw, 52px);
  line-height: 1;
  letter-spacing: 0.1em;
  text-shadow: 0 1px 0 #e1c88d;
}

.parchment-dialog h2 {
  font-size: clamp(25px, 5vw, 42px);
  letter-spacing: 0.06em;
}

.dialog-subtitle {
  margin: 8px 0 14px;
  color: #593021;
  font-size: clamp(10px, 2vw, 13px);
  font-weight: 700;
  letter-spacing: 0.15em;
}

.dialog-subtitle span { color: #8b6840; }

.dialog-rule {
  width: 78%;
  height: 5px;
  margin: 0 auto 16px;
  border-top: 1px solid #654526;
  border-bottom: 1px solid #654526;
}

.dialog-copy {
  margin: 0 auto 18px;
  font-size: clamp(12px, 2.2vw, 15px);
  line-height: 1.75;
}

.briefing-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 0 0 20px;
  padding: 1px;
  border: 1px solid #6b4d2d;
  background: #6b4d2d;
  list-style: none;
}

.briefing-list li {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-1);
  padding: var(--ui-space-3) var(--ui-space-2);
  background: rgba(195, 174, 121, 0.94);
}

.briefing-list b { color: #5b1c17; font-size: 13px; line-height: 1.25; }
.briefing-list span { font-size: var(--ui-copy-size); line-height: 1.35; }

.seal-button {
  min-width: min(100%, 230px);
  min-height: 50px;
  padding: 12px 22px;
  font-family: Georgia, "Yu Mincho", serif;
  font-size: 14px;
  letter-spacing: 0.14em;
}

.result-score-block {
  display: grid;
  margin: 18px 0;
  padding: 12px;
  border-top: 1px solid #70502f;
  border-bottom: 1px solid #70502f;
}

.result-score-block span {
  font: 700 9px/1 Arial, sans-serif;
  letter-spacing: 0.28em;
}

.result-score-block strong {
  margin-top: 5px;
  font: 700 clamp(25px, 6vw, 42px)/1 "Courier New", monospace;
}

@media (max-width: 840px) {
  :root { --panel-height: 250px; }

  .battle-heading {
    top: max(8px, env(safe-area-inset-top));
    right: max(8px, env(safe-area-inset-right));
    left: max(8px, env(safe-area-inset-left));
  }

  .title-mark { padding-left: 9px; }
  .title-mark__sub { display: none; }
  .phase-banner { min-width: 144px; padding: 7px 8px; font-size: 11px; }
  .phase-banner__ornament { width: 9px; margin: 0 6px; }
  .camera-controls {
    right: max(8px, env(safe-area-inset-right));
    transform: translateY(calc(-50% - var(--panel-height) / 4));
  }

  .command-panel {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    grid-template-rows: 82px minmax(0, 1fr);
    gap: 7px 9px;
    padding-top: 14px;
  }

  .resource-bank {
    grid-column: 1;
    grid-row: 1;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    padding: 0 5px 0 0;
  }

  .resource-readout { min-height: 50px; gap: 5px; padding: 5px 6px; }
  .resource-readout__sigil { width: 27px; height: 27px; flex-basis: 27px; font-size: 11px; }
  .resource-readout__copy { display: block; }
  .resource-readout__label { display: block; margin-bottom: 2px; font-size: 9px; }
  .resource-readout__value { font-size: 19px; }

  .battle-controls {
    grid-column: 2;
    grid-row: 1;
    grid-template-columns: 1fr;
    grid-template-rows: 30px 44px;
    gap: 4px;
    padding-left: 5px;
  }

  .battle-tallies { grid-template-columns: 1fr 0.8fr; }
  .tally { display: block; padding: 5px 6px; }
  .tally__label { display: block; margin-bottom: 2px; font-size: 9px; }
  .tally__value { font-size: 14px; }
  .control-buttons { grid-template-columns: 1.2fr repeat(3, minmax(44px, 0.7fr)); gap: 4px; }
  .iron-button { padding: 5px 3px; font-size: 10px; }

  .unit-command {
    grid-column: 1 / 3;
    grid-row: 2;
    border-top: 1px solid #4a4035;
    border-right: 0;
    padding: 7px 0 0;
  }

  .unit-tray { grid-template-columns: repeat(4, minmax(92px, 1fr)); overflow-x: auto; padding: 0 1px 3px; scrollbar-width: thin; }
  .unit-card { grid-template-columns: 42px minmax(43px, 1fr); min-height: 92px; }
  .unit-detail { min-height: 21px; padding-top: 3px; }
}

@media (max-width: 480px) {
  :root { --panel-height: 260px; }

  .title-mark__main { font-size: 14px; letter-spacing: 0.1em; }
  .phase-banner { min-width: 128px; font-size: 10px; letter-spacing: 0.12em; }
  .command-panel { grid-template-columns: 0.72fr 1.28fr; padding-right: max(8px, env(safe-area-inset-right)); padding-left: max(8px, env(safe-area-inset-left)); }
  .resource-readout { gap: 3px; padding-right: 3px; padding-left: 3px; }
  .resource-readout__sigil { display: none; }
  .control-buttons { grid-template-columns: 1fr repeat(3, 44px); }
  .iron-button--primary { font-size: 10px; }
  .unit-tray { grid-template-columns: repeat(4, 88px); }
  .unit-card { grid-template-columns: 38px 1fr; }
  .unit-card__name { font-size: 10px; }
  .unit-detail { font-size: 10px; }
  .briefing-list { grid-template-columns: 1fr; }
  .briefing-list li { display: grid; grid-template-columns: 60px 1fr; align-items: center; padding: 8px 12px; text-align: left; }
}

@media (max-height: 520px) and (orientation: landscape) {
  :root { --panel-height: 118px; }

  .battle-heading { top: max(5px, env(safe-area-inset-top)); }
  .title-mark { display: none; }
  .phase-banner { padding-block: 5px; }
  .camera-controls {
    top: calc((100dvh - var(--panel-height)) / 2);
    right: max(7px, env(safe-area-inset-right));
    gap: 3px;
    transform: translateY(-50%);
  }

  .command-panel {
    grid-template-columns: minmax(60px, 0.7fr) minmax(190px, 1.9fr) minmax(188px, 1.5fr);
    grid-template-rows: 1fr;
    gap: 6px;
    padding-top: 13px;
  }

  .resource-bank { grid-column: auto; grid-row: auto; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; gap: 3px; padding-right: 5px; }
  .resource-readout { min-height: 0; gap: 3px; padding: 3px 5px; }
  .resource-readout__sigil { display: none; }
  .resource-readout__copy { display: block; }
  .resource-readout__label { display: block; font-size: 9px; }
  .resource-readout__value { font-size: 18px; }

  .unit-command { grid-column: auto; grid-row: auto; padding: 0 4px; border-top: 0; border-right: 1px solid #4a4035; }
  .unit-tray { grid-template-columns: repeat(4, minmax(44px, 1fr)); gap: 3px; overflow: visible; padding: 0; }
  .unit-card { grid-template-columns: 1fr; grid-template-rows: 1fr auto; min-height: 70px; padding: 4px; text-align: center; }
  .unit-card__portrait { grid-row: 1; min-width: 0; font-size: 15px; }
  .unit-card__name { display: none; }
  .unit-card__cost { justify-self: center; font-size: 10px; }
  .unit-detail { min-height: 17px; padding: 2px; font-size: 9px; }

  .battle-controls { grid-column: auto; grid-row: auto; grid-template-columns: 1fr; grid-template-rows: 31px 1fr; gap: 4px; padding-left: 4px; }
  .battle-tallies { grid-template-columns: 1fr 0.8fr; }
  .tally { display: flex; padding: 4px 5px; }
  .tally__label { display: inline; margin: 0; }
  .tally__value { font-size: 13px; }
  .control-buttons { grid-template-columns: 1.25fr 1fr 44px 48px; }
  .iron-button { min-height: 44px; font-size: 9px; }

  .parchment-dialog { max-height: calc(100dvh - 16px); padding-top: 18px; padding-bottom: 16px; }
  .dialog-seal { display: none; }
  .dialog-copy { margin-bottom: 10px; line-height: 1.5; }
  .briefing-list { margin-bottom: 10px; }
  .briefing-list li { padding-block: 5px; }
  .seal-button { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}