:root {
  --sg-bg: #182118;
  --sg-text: #ede4ce;
  --sg-border: #706c58;
  --sg-btn-bg: #36382d;
  --sg-main-bg: #c9a227;
  --sg-main-text: #17170f;
  --sg-radius: 2px;
  --sg-font: 15px/1.45 Georgia, "Times New Roman", serif;
  color: #ede4ce;
  background: #172316;
  font-family: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 900px; min-height: 100vh; overflow: hidden; background: #789c4a; }
button { font: inherit; }
#app { display: grid; grid-template-columns: 320px minmax(700px, 1fr); width: 100vw; height: 100vh; min-height: 0; overflow: hidden; }
#battlefield { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; background: #789c4a; cursor: default; }
.deployment-intro { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 24px; color: #eee4c3; background: radial-gradient(circle at 50% 38%, #314636e8, #111a17f7 68%); backdrop-filter: blur(5px); }
.deployment-intro.dismissed { display: none; }
.victory-screen { position: fixed; inset: 0; z-index: 21; display: grid; place-items: center; padding: 24px; color: #f5e8bd; background: radial-gradient(circle at 50% 37%, #65733dde, #111a12f5 70%); backdrop-filter: blur(6px); }
.victory-screen.dismissed { display: none; }
.draw-screen { background: radial-gradient(circle at 50% 37%, #4a4a44de, #121212f5 70%); }
.draw-screen h1 { font-size: clamp(30px, 5.5vw, 46px); }
.defeat-screen { background: radial-gradient(circle at 50% 37%, #5e2c25de, #1a1111f5 70%); }
.victory-card { width: min(490px, 90vw); padding: 28px 46px 40px; text-align: center; background: #182118f2; border: 1px solid #e2c767a6; box-shadow: 0 25px 80px #000b, inset 0 0 48px #d7b85814; }
.victory-trumpet { width: 220px; max-width: 70%; filter: drop-shadow(0 8px 10px #0008); }
.victory-card h1 { margin: 4px 0 12px; color: #f4dfa0; font: 700 clamp(44px, 8vw, 70px)/1 Georgia, serif; letter-spacing: .1em; text-transform: uppercase; }
.victory-card p:not(.eyebrow) { color: #d0c9aa; font: 16px/1.5 Georgia, serif; }
.victory-card button { width: 100%; margin-top: 16px; padding: 13px; color: #17170f; background: #c9a227; border: 1px solid #e3c96a; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.intro-card { width: min(460px, 90vw); padding: 36px 42px; text-align: center; background: #172019ed; border: 1px solid #d1b85f88; box-shadow: 0 22px 70px #0009, inset 0 0 35px #77905b12; }
.intro-card h1 { margin: 3px 0 13px; color: #f1e2ad; font: 700 clamp(38px, 7vw, 62px)/1 Georgia, serif; letter-spacing: .09em; }
.intro-logo { display: block; width: 100%; max-width: 380px; height: auto; margin: 0 auto; }
.intro-card p:not(.eyebrow) { margin: 0 auto 25px; max-width: 370px; color: #c8c4aa; font: 15px/1.55 Georgia, serif; }
.intro-card button { width: 100%; padding: 13px; color: #17170f; background: #c9a227; border: 1px solid #e3c96a; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
#hud { grid-column: 1; grid-row: 1; min-height: 0; padding: 22px; overflow-y: auto; background: linear-gradient(155deg, #323825, #172018 72%); border-right: 1px solid #8b8054; box-shadow: 12px 0 32px #0007; z-index: 2; }
#battlefield { grid-column: 2; grid-row: 1; }
.stance { color: #e3cd78; font: 600 11px/1.4 system-ui; }
.eyebrow { margin: 0; color: #baad88; font: 11px/1.2 system-ui; letter-spacing: .24em; text-transform: uppercase; }
.hud-version.sg-version { margin: 3px 0 0; color: #baad88; font: 11px/1.2 system-ui; letter-spacing: .08em; opacity: .7; }
h1 { margin: 4px 0; font-size: 38px; letter-spacing: .08em; }
/* Brand wordmark (Art Director, 2026-09-18). Its transparent left margin is 32/1200 of the width,
   so the negative margin lines the visible lettering up with the eyebrow text. */
.hud-title { margin: 2px 0 0; line-height: 0; }
.hud-wordmark { display: block; width: 260px; max-width: 100%; height: auto; margin-left: -7px; }
h2 { margin: 0 0 8px; color: #d9cda9; font-size: 16px; }
p { color: #bcb69f; line-height: 1.45; }
section { margin: 24px 0; padding-top: 18px; border-top: 1px solid #ffffff18; }
#selection-panel { min-height: 118px; margin-top: 18px; padding: 10px; border: 1px solid #82764c66; background: linear-gradient(135deg, #111a14cc, #2c3325cc); box-shadow: inset 0 0 24px #0005; transition: min-height .2s ease, border-color .2s ease; }
#selection-panel.has-unit { min-height: 154px; border-color: #c5ad5d88; animation: dossier-in .2s ease-out; }
.unit-dossier { display: grid; grid-template-columns: 120px 1fr; gap: 13px; align-items: center; }
.unit-portrait { display: block; width: 120px; height: 128px; background: #263326; box-shadow: 0 5px 14px #0008; }
.unit-summary h2 { margin: 2px 0 8px; color: #f0dfad; font-size: 19px; }
.unit-summary p { margin: 5px 0; font: 11px/1.25 system-ui; }
.unit-kicker { color: #bca764 !important; font-size: 8px !important; font-weight: 700 !important; letter-spacing: .13em; }
.unit-faction { margin: 0 0 2px !important; font: 800 12px/1 system-ui !important; letter-spacing: .14em; text-transform: uppercase; }
.unit-faction.galea { color: #54a9e8 !important; }
.unit-faction.ardis { color: #e67c70 !important; } /* army red #e05b4c tinted 20% toward white: 4.65:1 on the dossier (small text) */
.strength-meter { width: 100%; height: 7px; overflow: hidden; border: 1px solid #a2946666; background: #080c09; }
.strength-meter span { display: block; height: 100%; background: linear-gradient(90deg, #8e342a, #d2b959); }
.unit-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 11px; padding-top: 10px; border-top: 1px solid #ffffff17; }
.unit-stats div { min-width: 0; padding: 6px 3px 5px; text-align: center; background: #0d150f99; border: 1px solid #776b454d; }
.unit-stats span { display: block; overflow: hidden; color: #a9a58f; font: 8px/1.1 system-ui; letter-spacing: .04em; text-overflow: ellipsis; text-transform: uppercase; }
.unit-stats strong { display: block; margin-top: 3px; color: #eadcae; font: 700 14px/1 Georgia, serif; }
.unit-passives { margin-top: 8px; }
.unit-passives p { position: relative; margin: 3px 0; padding-left: 11px; color: #c9bd91; font: 9px/1.35 system-ui; }
.unit-passives p::before { position: absolute; left: 1px; content: "◆"; color: #c3a94f; font-size: 6px; top: 3px; }
.empty-dossier { padding: 16px 8px; text-align: center; }
.empty-dossier span { color: #bda85f; font-size: 22px; }
.empty-dossier p { margin-bottom: 0; font-size: 13px; }
@keyframes dossier-in { from { opacity: .45; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.button-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
button { padding: 10px 6px; color: #e9e1c9; background: #36382d; border: 1px solid #706c58; border-radius: 2px; cursor: pointer; }
button:hover:not(:disabled) { background: #4b4e3d; }
button:disabled { opacity: .35; cursor: default; }
button.active { border-color: #e3c76c; color: #ffe899; box-shadow: inset 0 0 0 1px #e3c76c66; }
.execute { width: 100%; margin-top: 8px; padding: 14px; color: #17170f; background: #c9a227; border-color: #e3c96a; font-weight: bold; letter-spacing: .08em; text-transform: uppercase; }
.hud-actions-secondary { display: flex; gap: 7px; margin-top: 7px; }
.hud-actions-secondary .secondary { flex: 1; margin: 0; }
.sound-toggle { flex: 0 0 39px; margin: 0; padding: 7px 5px; color: #e9dfbd; background: #24291f; border: 1px solid #696b51; font-size: 17px; line-height: 1; }
.sound-toggle[aria-pressed="false"] { color: #b9b8a6; background: #191d17; border-color: #464a3b; }
.debug-toggle { flex: 0 0 auto; margin: 0; padding: 7px 9px; color: #c9c2a6; background: #24291f; border: 1px solid #696b51; font: 12px/1 system-ui; letter-spacing: .04em; }
.debug-toggle[aria-pressed="true"] { color: #ffe899; border-color: #e3c76c; box-shadow: inset 0 0 0 1px #e3c76c66; }
.secondary { width: 100%; margin-top: 8px; }
#event-log { min-height: 44px; font-style: italic; font-size: 13px; }
.debug-controls { margin-top: 14px; padding: 11px; color: #aaa88f; border: 1px solid #ffffff16; font: 12px/1.4 system-ui; }
.debug-controls summary { cursor: pointer; color: #d5c99f; }
.debug-controls label { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 10px; }
.debug-controls select { color: #eee4c7; background: #292d22; border: 1px solid #65674f; padding: 3px; }
.order-roster { max-height: 155px; overflow-y: auto; }
.order-row { display: flex; justify-content: space-between; gap: 8px; margin: 5px 0; color: #bbb79f; font: 11px/1.25 system-ui; }
.order-row strong { color: #e5dbba; font-weight: 600; }
.order-row span { color: #dac66f; text-transform: capitalize; }
.debug-controls input[type="range"] { width: 92px; accent-color: #d1b85f; }
.credits { margin-top: 10px; font-size: 11px; opacity: 0.75; }
.credits summary { cursor: pointer; }
.credits ul { margin: 6px 0 0; padding-left: 16px; }