/* War-table theme: self-hosted type, gilt-and-steel panels, the title screen, and the
   battle interface. Loaded after sovl.css and experience.css and only overrides them. */

@font-face { font-family: "Marcellus SC"; font-weight: 100 900; font-display: swap; src: url("../assets/fonts/marcellus-sc-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-002F, U+003A-FFFF; }
/* Marcellus SC draws digits as small caps (1000 reads as IOOO), so numerals fall through to Barlow Semi Condensed. */
@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap; src: url("../assets/fonts/barlow-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 400; font-style: italic; font-display: swap; src: url("../assets/fonts/barlow-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-display: swap; src: url("../assets/fonts/barlow-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap; src: url("../assets/fonts/barlow-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 700 900; font-display: swap; src: url("../assets/fonts/barlow-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 100 500; font-display: swap; src: url("../assets/fonts/barlow-semi-condensed-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 600 900; font-display: swap; src: url("../assets/fonts/barlow-semi-condensed-latin-600-normal.woff2") format("woff2"); }

:root {
  --font: "Barlow", "Segoe UI", Arial, sans-serif;
  --head: "Marcellus SC", "Barlow Semi Condensed", Georgia, serif;
  --label: "Barlow Semi Condensed", "Barlow", "Segoe UI", sans-serif;
  --gild: #98b8d4;
  --gild-hi: #c1d8ec;
  --gild-lo: #5984aa;
  --steel: #16202b;
  --steel-hi: #212d3b;
  --steel-lo: #0b1018;
  --ink: #060a0f;
  --parch: #efe3c6;
  --blue: #8fc3f0;
  --red: #f09a8e;
  --panel-edge: rgba(152, 184, 212, 0.28);
}
html, body { font-family: var(--font); font-size: 17px; }
button, select, input { font-family: var(--font); font-size: 15px; }
h1, h2, h3, .phase, .dp-title, .dp-banner { font-family: var(--head); }

/* ---------- controls ---------- */
button {
  border-radius: 4px;
  border: 1px solid #3d4f63;
  background: linear-gradient(180deg, #1f2b3a 0%, #151e29 55%, #101821 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 1px 2px rgba(0, 0, 0, 0.4);
  color: #dfe5ea;
}
button:hover:not(:disabled) {
  background: linear-gradient(180deg, #29384d 0%, #1d2939 60%, #17212d 100%);
  border-color: #7d91a3;
}
button:active:not(:disabled) { transform: translateY(1px); }
button.primary {
  color: #0a111a;
  border-color: #bad3e9;
  background: linear-gradient(180deg, #c4dbee 0%, #98b9d6 45%, #7b9dbb 100%);
  box-shadow: inset 0 1px 0 rgba(239, 246, 251, 0.7), inset 0 -2px 0 rgba(30, 51, 80, 0.35), 0 2px 10px rgba(0, 0, 0, 0.45);
  text-shadow: 0 1px 0 rgba(221, 234, 246, 0.5);
  font-weight: 700;
}
button.primary:hover:not(:disabled) {
  background: linear-gradient(180deg, #d1e3f3 0%, #a4c4e0 45%, #86a8c6 100%);
  border-color: #dae9f6;
}
button.danger { border-color: #9c4a42; background: linear-gradient(180deg, #5a2622, #3a1715); }
button:disabled { opacity: 0.45; }
kbd {
  font-family: var(--font);
  font-size: 12px;
  padding: 0 5px;
  border-radius: 3px;
  border: 1px solid #5d6e80;
  border-bottom-width: 2px;
  background: #161f2a;
  color: #d7e1ea;
}

/* ---------- title screen ---------- */
#screen-menu { padding: clamp(28px, 6vh, 70px) clamp(22px, 7vw, 130px); }
.menu-art { animation: title-drift 60s ease-in-out infinite alternate; transform-origin: 70% 40%; }
@keyframes title-drift { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.1) translate(-1.5%, -1%); } }
.menu-art:after {
  background:
    radial-gradient(120% 90% at 78% 40%, transparent 30%, rgba(4, 7, 11, 0.55) 75%),
    linear-gradient(90deg, rgba(4, 7, 13, 0.94), rgba(5, 9, 15, 0.72) 34%, rgba(5, 10, 16, 0.08) 70%),
    linear-gradient(0deg, #05070c 0%, transparent 38%);
}
#title-embers { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.menu-content { width: min(600px, 100%); }
#screen-menu .menu, #screen-menu .menu-intro, .title-rule { max-width: 500px; }
#screen-menu .eyebrow {
  font-family: var(--label);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.3em;
  color: #98b5ce;
}
#screen-menu h1 {
  font-family: var(--head);
  font-weight: 900;
  font-size: clamp(46px, 7vw, 108px);
  line-height: 0.98;
  letter-spacing: 0.04em;
  display: inline-block;
  padding: 0 0.12em 0.06em 0;
  margin: 14px 0 0 -3px;
  color: #b5cee4;
  background: linear-gradient(180deg, #e1edf8 0%, #b5d1e9 38%, #80a4c4 62%, #bcd4ea 78%, #6792b7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 0 rgba(13, 21, 33, 0.9)) drop-shadow(0 10px 28px rgba(0, 0, 0, 0.7));
}
#screen-menu h1 .t-line { display: block; white-space: nowrap; }
.title-rule {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0 10px;
  width: min(440px, 100%);
  color: var(--gild);
}
.title-rule:before, .title-rule:after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gild) 30%, var(--gild));
}
.title-rule:after { background: linear-gradient(90deg, var(--gild), var(--gild) 70%, transparent); }
.title-rule i { width: 9px; height: 9px; transform: rotate(45deg); border: 1px solid var(--gild); background: #152438; box-shadow: 0 0 10px rgba(157, 195, 228, 0.5); }
#screen-menu .sub { font-family: var(--head); font-size: 14px; letter-spacing: 0.42em; color: #b0cae0; margin: 0 0 20px; }
.menu-intro { font-family: var(--font); font-style: italic; font-size: 22px; color: #d3dae1; }
#screen-menu .menu { gap: 12px; margin-top: 24px; }
#screen-menu .menu > button {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 74px;
  padding: 14px 18px 14px 14px;
  background: linear-gradient(100deg, rgba(14, 22, 32, 0.92), rgba(9, 15, 22, 0.82));
  border: 1px solid rgba(141, 159, 174, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 8px 26px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(3px);
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s, background 0.2s;
}
#screen-menu .menu > button:hover {
  border-color: var(--gild);
  transform: translateX(4px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 30px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(152, 184, 212, 0.25);
}
#screen-menu .menu > button.primary {
  background: linear-gradient(100deg, #c3d9ed 0%, #96b7d3 55%, #7a9dbb 100%);
  border-color: #cbe0f2;
}
#screen-menu .menu button .mi {
  flex: none;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(152, 184, 212, 0.55);
  background: radial-gradient(circle at 35% 30%, #263242, #101720 70%);
  color: var(--gild-hi);
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.35);
}
#screen-menu .menu button.primary .mi { background: radial-gradient(circle at 35% 30%, #1f3451, #0e1724 70%); border-color: #1f3451; }
#screen-menu .menu button .mi svg { width: 26px; height: 26px; }
#screen-menu .menu button .mt { flex: 1; min-width: 0; }
#screen-menu .menu button span { font-size: 19px; letter-spacing: 0.03em; }
#screen-menu .menu button small { font-size: 15px; }
#screen-menu .menu button b { position: static; font-size: 24px; }
#screen-menu #btn-continue { border-color: rgba(143, 195, 240, 0.45); }
#screen-menu #btn-continue .mi { color: var(--blue); border-color: rgba(143, 195, 240, 0.55); }
.menu-utilities { gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.menu-utilities button {
  font-family: var(--head);
  font-size: 13px;
  letter-spacing: 0.08em;
  padding: 8px 12px;
  color: #c9d3dc;
  background: none;
  border: 1px solid transparent;
  box-shadow: none;
}
.menu-utilities button:hover:not(:disabled) { background: rgba(17, 26, 37, 0.7); border-color: rgba(152, 184, 212, 0.35); }
.menu-caption span { font-family: var(--head); }
.menu-caption p { font-family: var(--font); font-size: 21px; }
#screen-menu .credit { font-size: 13px; }

/* ---------- panels ---------- */
.gilt,
#battle-left .unitinfo,
#battle-left .actions,
#engagement-panel,
#dice-panel,
#battle-hint,
.modal {
  --edge: var(--panel-edge);
}
#battle-left {
  width: 290px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 120px),
    linear-gradient(180deg, #0f1821, #090f16);
  border-right: 1px solid #25303b;
  box-shadow: inset -1px 0 0 rgba(152, 184, 212, 0.12);
}
#battle-left .unitinfo { padding: 12px 14px 10px; }
#battle-left .actions {
  background: linear-gradient(180deg, #0b1119, #080e15);
  border-top: 1px solid var(--panel-edge);
  box-shadow: inset 0 8px 16px -10px rgba(0, 0, 0, 0.8);
}
#battle-left .actions > .muted, #battle-left .actions > div:not(.order-buttons) { color: #b9c1c8; }
#battle-left .actions button { text-align: left; }
#battle-left .actions button.primary { text-align: center; }
.order-buttons button { text-align: center !important; }

/* unit profile */
.unit-portrait {
  height: 132px;
  margin: -12px -14px 12px;
  border-bottom: 1px solid var(--panel-edge);
  box-shadow: inset 0 -30px 40px -20px #090f16;
}
.unit-portrait:after { background: linear-gradient(0deg, #0d151e 5%, transparent); }
.unit-portrait span {
  font-family: var(--head);
  font-size: 11px;
  letter-spacing: 0.18em;
  padding: 3px 8px;
  border: 1px solid rgba(152, 184, 212, 0.4);
  background: rgba(7, 12, 17, 0.75);
  color: var(--gild-hi);
}
.unitinfo b[style*="font-family"] { font-size: 17px !important; letter-spacing: 0.02em; }
.statline, .stats {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(38px, 1fr));
  gap: 4px;
}
.statline .stat, .stats .stat {
  position: relative;
  text-align: center;
  padding: 5px 0 6px;
  min-width: 0;
  border: 1px solid #313e4c;
  border-radius: 4px 4px 12px 12px;
  background: linear-gradient(180deg, #19232f, #0f161f);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.statline .stat span, .stats .stat span {
  display: block;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #93a3b3;
}
.statline .stat b, .stats .stat b { display: block; font-family: var(--head); font-size: 19px; color: #dbe6f0; line-height: 1.2; }
.statline .stat.up { border-color: #5d8a5f; background: linear-gradient(180deg, #1f3527, #121f18); }
.statline .stat.up b { color: #b9ecb9; }
.statline .stat.down { border-color: #8a4b45; background: linear-gradient(180deg, #3a1f1d, #1f1211); }
.statline .stat.down b { color: #ffb4a8; }
.unitinfo .props { color: #c9d0d7; }
.unitinfo .props .p { border-bottom: 1px dotted #6c7c8c; cursor: help; }
.unitinfo .effects .pill {
  display: inline-block;
  margin: 3px 4px 0 0;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
  border: 1px solid #6a5a8a;
  background: #231c33;
  color: #dccbff;
}

/* field notes (nothing selected) */
.selection-empty .eyebrow { font-family: var(--head); letter-spacing: 0.2em; }
.selection-empty h3 { font-size: 22px; color: var(--gild-hi); }
.guide-tip { border-left: 3px solid var(--gild); background: linear-gradient(90deg, rgba(152, 184, 212, 0.1), transparent); }
.terrain-key { gap: 6px; }
.terrain-key span {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 1px solid #27323f;
  border-radius: 4px;
  padding: 5px 8px;
  background: #0d151d;
  font-size: 13px;
}
.terrain-key span:before {
  content: "";
  width: 18px;
  height: 18px;
  flex: none;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5);
}
.terrain-key span:nth-child(1):before { background: radial-gradient(circle at 35% 35%, #6f9a48, #26421d 70%); }
.terrain-key span:nth-child(2):before { background: radial-gradient(circle at 40% 40%, #4f6f5a, #243a2c 60%), #34503a; }
.terrain-key span:nth-child(3):before { background: radial-gradient(circle at 35% 35%, #b3aa99, #595247 70%); }

/* ---------- top bar ---------- */
#battle-top {
  background: linear-gradient(180deg, #101924, #0a1018);
  border-bottom: 1px solid #25303d;
  box-shadow: inset 0 -1px 0 rgba(152, 184, 212, 0.15);
  flex-wrap: wrap;
  row-gap: 6px;
}
#battle-top .phase {
  font-size: 17px;
  letter-spacing: 0.1em;
  color: var(--gild-hi);
  text-shadow: 0 0 18px rgba(157, 195, 228, 0.25);
}
#battle-top .who {
  font-family: var(--head);
  font-size: 13px;
  letter-spacing: 0.05em;
  padding: 4px 14px;
  border-radius: 2px;
  background: linear-gradient(180deg, #223c51, #172a3b);
  border: 1px solid #4f7ea4;
  clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 50%, 100% 100%, 0 100%, 8px 50%);
  padding-left: 18px;
  padding-right: 18px;
}
#battle-top .who.enemy { background: linear-gradient(180deg, #5a2622, #3d1816); border-color: #a4564f; }
#battle-top .who:empty { display: none; }
.turn-pips { display: flex; gap: 4px; align-items: center; }
.turn-pips i {
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
  border: 1px solid #5a6a7a;
  background: #10171f;
}
.turn-pips i.past { background: #314353; border-color: #6889a6; }
.turn-pips i.now { background: var(--gild); border-color: var(--gild-hi); box-shadow: 0 0 8px rgba(157, 195, 228, 0.7); }
.score-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--head);
  font-size: 14px;
  color: #cfd7dd;
}
.score-bar .sb-track {
  position: relative;
  width: 120px;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  background: linear-gradient(90deg, #7a2d27, #b0473d);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5);
}
.score-bar .sb-track i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #2c5c8a, #5a9ad0); transition: width 0.6s ease; }
.score-bar .sb-track:after { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: rgba(255, 255, 255, 0.5); }
.score-bar .mine { color: var(--blue); }
.score-bar .theirs { color: var(--red); }
#battle-score { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
#battle-top > button.small { font-family: var(--head); font-size: 12px; letter-spacing: 0.08em; }

#phase-track { background: linear-gradient(180deg, #090f16, #070d15); border-bottom: 1px solid #1f2a33; }
.phase-step {
  font-family: var(--head);
  letter-spacing: 0.1em;
  position: relative;
  padding: 9px 28px 9px 30px;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50%);
  background: #0e151d;
  border-bottom: 0;
}
.phase-step.current {
  background: linear-gradient(180deg, #17263a, #0e1724);
  color: var(--gild-hi);
}
.phase-step b { font-family: var(--head); }

/* ---------- battlefield overlays ---------- */
#battle-canvas-wrap { background: radial-gradient(120% 100% at 50% 40%, #131c26, #070c11); }
#battle-hint {
  background: linear-gradient(180deg, rgba(12, 19, 26, 0.95), rgba(7, 12, 17, 0.95));
  border: 1px solid rgba(152, 184, 212, 0.35);
  border-left: 3px solid var(--gild);
  border-radius: 3px;
  font-size: 15px;
}
#battle-hint:empty { display: none; }
#battle-toggles button {
  font-family: var(--head);
  font-size: 12px;
  letter-spacing: 0.08em;
  background: rgba(9, 14, 21, 0.85);
  backdrop-filter: blur(3px);
}
#battle-toggles button.primary { background: linear-gradient(180deg, #c4dbee, #86a8c6); color: #0a111a; }
#phase-banner {
  background: radial-gradient(ellipse at center, rgba(7, 12, 17, 0.92) 30%, rgba(7, 12, 17, 0) 72%);
  border: 0;
  padding: 22px 70px;
}
#phase-banner b {
  font-family: var(--head);
  font-weight: 900;
  letter-spacing: 0.06em;
  font-size: 34px;
  background: linear-gradient(180deg, #dfecf7, #98b8d4 60%, #6792b7);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.8));
}
#phase-banner small { font-family: var(--head); letter-spacing: 0.4em; color: #becdda; }

/* the engagement card sits at the top of the field so the fight stays visible */
#battle-canvas-wrap:has(#engagement-panel:not([hidden])) #phase-banner { top: auto; bottom: 16%; }
#engagement-panel {
  top: 12px;
  bottom: auto;
  left: 14px;
  transform: none;
  width: min(600px, calc(100% - 280px));
  padding: 14px 18px;
  background: linear-gradient(180deg, rgba(17, 26, 36, 0.97), rgba(9, 14, 21, 0.97));
  border: 1px solid rgba(152, 184, 212, 0.55);
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 14px 50px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  max-height: 46%;
}
.engagement-kicker { font-family: var(--head); letter-spacing: 0.22em; }
.engagement-head h3 { font-size: 19px; color: var(--gild-hi); }

/* ---------- dice ---------- */
#dice-panel {
  background: linear-gradient(180deg, rgba(17, 24, 33, 0.97), rgba(9, 13, 19, 0.97));
  border: 1px solid rgba(152, 184, 212, 0.5);
  border-radius: 5px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7), 0 18px 50px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.dp-head { border-bottom-color: rgba(152, 184, 212, 0.2); }
.dp-title { font-size: 15px; letter-spacing: 0.08em; color: var(--gild-hi); }
.dp-row .dp-label { font-size: 13px; color: #d5dce1; }
.dp-badge { font-family: var(--head); font-size: 10px; }
.dp-target { font-family: var(--head); font-size: 15px; }
.dp-count { font-family: var(--head); font-size: 14px; }
.dp-pending { background: linear-gradient(180deg, rgba(152, 184, 212, 0.1), rgba(152, 184, 212, 0.03)); border-top-color: rgba(152, 184, 212, 0.3); }
.dp-pending .dp-label { font-size: 14px; }
.dp-banner {
  font-weight: 900;
  font-size: 22px;
  letter-spacing: 0.06em;
  text-shadow: 0 0 20px rgba(157, 195, 228, 0.35);
}
.dp-dice { gap: 5px; }
.die {
  --pip: #1f1a14;
  position: relative;
  width: 24px;
  height: 24px;
  border-radius: 5px;
  border: 0;
  font-size: 13px;
  color: #2a2218;
  background: linear-gradient(145deg, #fffaf0 0%, #efe5cf 55%, #cdbf9f 100%);
  box-shadow: inset -1px -2px 0 rgba(120, 95, 60, 0.45), inset 1px 1px 0 rgba(255, 255, 255, 0.9), 0 2px 3px rgba(0, 0, 0, 0.55);
}
.die.big { width: 30px; height: 30px; border-radius: 6px; }
.die[data-v] { color: transparent; font-size: 0; }
.die[data-v]:after {
  content: "";
  position: absolute;
  inset: 15%;
  background-repeat: no-repeat;
  --d: radial-gradient(circle, var(--pip) 0 42%, transparent 48%);
  --s: 30% 30%;
}
.die[data-v="1"]:after { background: var(--d) center / var(--s) no-repeat; }
.die[data-v="2"]:after { background: var(--d) 0 0 / var(--s) no-repeat, var(--d) 100% 100% / var(--s) no-repeat; }
.die[data-v="3"]:after { background: var(--d) 0 0 / var(--s) no-repeat, var(--d) center / var(--s) no-repeat, var(--d) 100% 100% / var(--s) no-repeat; }
.die[data-v="4"]:after { background: var(--d) 0 0 / var(--s) no-repeat, var(--d) 100% 0 / var(--s) no-repeat, var(--d) 0 100% / var(--s) no-repeat, var(--d) 100% 100% / var(--s) no-repeat; }
.die[data-v="5"]:after { background: var(--d) 0 0 / var(--s) no-repeat, var(--d) 100% 0 / var(--s) no-repeat, var(--d) center / var(--s) no-repeat, var(--d) 0 100% / var(--s) no-repeat, var(--d) 100% 100% / var(--s) no-repeat; }
.die[data-v="6"]:after { background: var(--d) 0 0 / var(--s) no-repeat, var(--d) 100% 0 / var(--s) no-repeat, var(--d) 0 50% / var(--s) no-repeat, var(--d) 100% 50% / var(--s) no-repeat, var(--d) 0 100% / var(--s) no-repeat, var(--d) 100% 100% / var(--s) no-repeat; }
.die.hit { background: linear-gradient(145deg, #fff3cc 0%, #f1cf73 55%, #c99a3a 100%); box-shadow: inset -1px -2px 0 rgba(130, 90, 20, 0.5), inset 1px 1px 0 rgba(255, 255, 240, 0.9), 0 0 0 1px #8a6620, 0 0 10px rgba(240, 200, 90, 0.55); }
.die.save { background: linear-gradient(145deg, #f0fff0 0%, #bfe6bf 55%, #86b886 100%); box-shadow: inset -1px -2px 0 rgba(40, 90, 40, 0.45), inset 1px 1px 0 rgba(255, 255, 255, 0.9), 0 0 0 1px #3d7a3d, 0 0 8px rgba(140, 220, 140, 0.4); }
.die.fail { --pip: #fff1ec; background: linear-gradient(145deg, #d86a5c 0%, #a43a31 60%, #6e2019 100%); box-shadow: inset -1px -2px 0 rgba(60, 10, 8, 0.5), inset 1px 1px 0 rgba(255, 200, 190, 0.5), 0 2px 3px rgba(0, 0, 0, 0.55); }
.die.miss { opacity: 0.55; filter: saturate(0.3); }
.die.p0, .die.p1 { outline: none; }
.die.blank {
  background: linear-gradient(145deg, #3a342a, #231f19);
  box-shadow: inset 0 0 0 1px rgba(217, 180, 106, 0.35), 0 2px 3px rgba(0, 0, 0, 0.5);
  animation: die-wait 1.6s ease-in-out infinite;
}
.die.blank:after { content: "?"; position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--head); font-size: 13px; color: rgba(217, 180, 106, 0.8); background: none; }
@keyframes die-wait { 50% { box-shadow: inset 0 0 0 1px rgba(177, 206, 232, 0.8), 0 0 10px rgba(152, 184, 212, 0.35); } }
.die.rolling { animation: dice-shake 0.12s infinite; }

/* ---------- army strip ---------- */
#army-strip {
  background: linear-gradient(180deg, #0d151d, #070c11);
  border-top: 1px solid #25303d;
  box-shadow: inset 0 1px 0 rgba(152, 184, 212, 0.15);
}
.army-strip-label { font-family: var(--label); font-weight: 600; letter-spacing: 0.16em; }
.regiment {
  position: relative;
  gap: 10px;
  border: 1px solid #283542;
  border-radius: 4px;
  background: linear-gradient(180deg, #141e29, #0d141b);
  overflow: hidden;
}
.regiment:before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--faction, #557fab); }
.regiment .thumb {
  flex: none;
  width: 50px;
  height: 58px;
  border-radius: 3px;
  background: radial-gradient(circle at 50% 45%, #363f46, #1a1f26 70%);
  box-shadow: inset 0 0 0 1px rgba(152, 184, 212, 0.3), inset 0 0 12px rgba(0, 0, 0, 0.6);
}
.regiment strong { font-family: var(--head); font-size: 14px; letter-spacing: 0.02em; }
.regiment small { font-size: 13px; }
.regiment.selected { border-color: var(--gild); box-shadow: 0 0 0 1px rgba(152, 184, 212, 0.5), 0 0 16px rgba(152, 184, 212, 0.2); background: linear-gradient(180deg, #1f242a, #0f1216); }
.regiment.engaged { box-shadow: inset 0 -2px 0 #b0473d; }
.regiment.ready:after { content: ""; position: absolute; right: 7px; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--gild); box-shadow: 0 0 6px var(--gild); }
.strength-bar { height: 4px; border-radius: 2px; background: #2a1414; }
.strength-bar i { background: linear-gradient(90deg, var(--sb, #6fae6f), var(--sb2, #a6d98a)); border-radius: 2px; }

/* ---------- reaction prompt and modal ---------- */
#reaction-prompt .rp-title { font-family: var(--head); font-size: 15px; color: var(--gild-hi); }
.modal {
  border: 1px solid rgba(152, 184, 212, 0.45);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7), 0 30px 80px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  background: linear-gradient(180deg, #121c27, #0a1017);
}
.modal h2 { color: var(--gild-hi); letter-spacing: 0.04em; }

/* ---------- smaller screens ---------- */
@media (max-width: 1100px) {
  #battle-left { width: 260px; }
  .turn-pips { display: none; }
}
@media (max-width: 760px) {
  #screen-menu { padding: 28px 20px 70px; }
  #screen-menu h1 { font-size: clamp(38px, 12.5vw, 64px); }
  #screen-menu .menu > button { min-height: 64px; }
  #screen-menu .menu button .mi { width: 40px; height: 40px; }
  #battle-top { padding: 8px 10px; gap: 8px; }
  #battle-top .phase { font-size: 14px; }
  #battle-top > button.small { padding: 6px 9px; min-height: 32px; }
  .score-bar .sb-track { width: 70px; }
  #phase-track { overflow-x: auto; justify-content: flex-start; }
  .phase-step { padding: 8px 18px 8px 22px; flex: none; }
  #battle-left { width: 100%; }
  #engagement-panel { width: calc(100% - 20px); left: 10px; top: 52px; }
  .dp-row { grid-template-columns: 66px 30px 1fr 58px; gap: 6px; }
  .dp-count { font-size: 12px; }
  .die { width: 20px; height: 20px; border-radius: 4px; }
  .die.big { width: 24px; height: 24px; }
  .dp-rows { max-height: 150px; }
}
body.reduce-motion .menu-art { animation: none; }
@media (prefers-reduced-motion: reduce) { .menu-art { animation: none; } .die.blank { animation: none; } }