:root {
  color-scheme: light;
  --bg: #e7dfc9;
  --surface: #f4eedf;
  --surface-raised: #fff9eb;
  --surface-deep: #e9e0cb;
  --line: #c6b994;
  --line-soft: #d7cdb2;
  --text: #263b2e;
  --muted: #526a52;
  --faint: #6d7d65;
  --bone: #76552b;
  --gold: #a9681f;
  --gold-bright: #c98722;
  --red: #a84231;
  --red-bright: #ce553b;
  --teal: #28714f;
  --teal-bright: #3f9361;
  --mono: 'Cascadia Code', 'Segoe UI Mono', Consolas, monospace;
  --sans: 'Segoe UI', Tahoma, sans-serif;
  --serif: Georgia, 'Times New Roman', serif;
}

* { box-sizing: border-box; }

html { min-width: 320px; background: var(--bg); }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: var(--sans);
  background:
    radial-gradient(ellipse at 51% -32%, rgba(126, 148, 130, .12), transparent 47%),
    radial-gradient(ellipse at 97% 46%, rgba(118, 48, 39, .09), transparent 32%),
    linear-gradient(180deg, #101312 0%, #0c0e0e 47%, #101211 100%);
}

button { font: inherit; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }

.app-shell { width: min(1660px, 100%); margin: 0 auto; padding: 0 28px 18px; }
.topbar { min-height: 78px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line-soft); gap: 20px; }
.brand { display: flex; align-items: center; gap: 13px; color: inherit; text-decoration: none; }
.brand-sigil { position: relative; display: grid; place-items: center; width: 34px; height: 38px; border: 1px solid #695c47; clip-path: polygon(50% 0, 93% 19%, 84% 77%, 50% 100%, 16% 77%, 7% 19%); background: linear-gradient(150deg, #aa8c5b, #554b37 48%, #272d28); }
.brand-sigil::before { content: ''; width: 13px; height: 19px; border: 1px solid rgba(232, 216, 180, .78); border-radius: 7px 7px 2px 2px; transform: rotate(45deg); }
.brand-sigil i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--red-bright); box-shadow: 0 0 8px var(--red-bright); }
.brand-sigil b { position: absolute; width: 1px; height: 13px; background: #e7dbbf; transform: rotate(45deg); }
.brand-copy { display: grid; gap: 3px; }
.eyebrow { color: var(--muted); font: 500 9px/1.35 var(--mono); letter-spacing: .15em; text-transform: uppercase; }
.brand-name { font: 600 15px/1.2 var(--serif); letter-spacing: .11em; }
.topbar-meta { display: flex; align-items: center; gap: 23px; }
.top-metric { display: grid; gap: 2px; min-width: 48px; }
.top-metric strong { display: flex; align-items: center; gap: 7px; font: 500 17px/1 var(--mono); color: var(--text); }
.ember-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 9px rgba(194, 164, 116, .7); }
.button { border: 1px solid transparent; cursor: pointer; transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease; }
.button:active:not(:disabled) { transform: translateY(1px); }
.button:disabled { cursor: not-allowed; opacity: .42; }
.button-primary { padding: 11px 16px; color: #171713; background: var(--gold); border-color: #d3bb8d; font: 500 10px/1 var(--mono); letter-spacing: .13em; text-transform: uppercase; box-shadow: inset 0 1px rgba(255,255,255,.16); }
.button-primary:hover:not(:disabled) { background: var(--gold-bright); }
.top-action { min-width: 164px; }

.mission-banner { display: flex; justify-content: space-between; align-items: end; gap: 24px; padding: 25px 0 21px; border-bottom: 1px solid var(--line-soft); }
.mission-title-group .eyebrow { color: #a5906b; }
.slash { color: #705f45; margin: 0 4px; }
.mission-banner h1 { margin: 6px 0 4px; font: 500 clamp(25px, 3vw, 34px)/1.05 var(--serif); letter-spacing: .005em; }
.mission-banner p { margin: 0; color: #a7a79d; font: 400 12px/1.55 var(--sans); }
.mission-facts { display: flex; gap: clamp(16px, 3vw, 40px); padding-bottom: 2px; }
.mission-facts > div { display: grid; gap: 6px; }
.mission-facts strong { white-space: nowrap; font: 500 10px/1.2 var(--mono); letter-spacing: .035em; color: #d1c9b9; text-transform: uppercase; }

.workspace { display: grid; grid-template-columns: minmax(190px, 228px) minmax(430px, 1fr) minmax(220px, 264px); gap: 17px; align-items: start; padding-top: 18px; }
.left-rail, .right-rail, .battle-column { display: grid; gap: 12px; min-width: 0; }
.panel { border: 1px solid var(--line-soft); background: linear-gradient(145deg, rgba(25, 29, 27, .97), rgba(18, 21, 20, .97)); box-shadow: 0 6px 19px rgba(0,0,0,.12); }
.contract-panel, .party-panel, .growth-panel, .unit-panel, .equipment-panel, .enemy-panel, .combat-log { padding: 13px; }
.panel-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
.panel-heading .eyebrow { font-size: 8px; }
.muted { color: var(--faint); }
.state-pill { border: 1px solid #474638; padding: 4px 6px 3px; color: var(--gold); background: rgba(143, 119, 72, .08); font: 500 8px/1 var(--mono); letter-spacing: .12em; }
.contract-panel h2 { margin: 0 0 5px; font: 500 18px/1.18 var(--serif); }
.panel-copy { margin: 0; color: #a0a197; font-size: 11px; line-height: 1.5; }
.objective-line { display: flex; justify-content: space-between; margin-top: 15px; color: #b8b6ab; font: 400 9px/1.2 var(--mono); }
.objective-line strong { color: var(--bone); font-weight: 500; }
.progress-track, .vital-track { height: 3px; margin-top: 7px; background: #313633; overflow: hidden; }
.progress-track span, .vital-track span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #79734d, var(--gold-bright)); transition: width .3s ease; }
.turn-readout { display: flex; justify-content: space-between; align-items: end; padding-top: 11px; margin-top: 11px; border-top: 1px solid var(--line-soft); }
.turn-readout strong { color: #c9c1af; font: 500 10px/1 var(--mono); letter-spacing: .06em; }

.squad-list { display: grid; gap: 7px; }
.squad-card { display: grid; grid-template-columns: 34px minmax(0, 1fr) 10px; align-items: center; gap: 9px; width: 100%; padding: 8px; color: inherit; text-align: left; background: #121514; border: 1px solid #2a302c; cursor: pointer; transition: border-color .16s ease, background .16s ease; }
.squad-card:hover { border-color: #697362; background: #171b19; }
.squad-card.selected { border-color: #9f8b64; background: linear-gradient(100deg, rgba(117, 95, 57, .19), rgba(18, 21, 20, .88)); box-shadow: inset 2px 0 #b49a69; }
.squad-card.down { opacity: .48; filter: grayscale(.7); }
.squad-glyph { display: grid; place-items: center; width: 31px; height: 34px; color: #e3d3b1; border: 1px solid #726144; background: linear-gradient(145deg, #514539, #262a27); clip-path: polygon(50% 0, 94% 22%, 82% 82%, 50% 100%, 18% 82%, 6% 22%); font: 500 9px/1 var(--mono); }
.squad-card:nth-child(2) .squad-glyph { color: #c7d4c7; border-color: #62796c; background: linear-gradient(145deg, #3f5147, #202823); }
.squad-main { min-width: 0; display: grid; gap: 5px; }
.squad-name-row { display: flex; justify-content: space-between; gap: 6px; align-items: baseline; }
.squad-name { overflow: hidden; color: #e2ddd1; font: 500 11px/1.1 var(--serif); white-space: nowrap; text-overflow: ellipsis; }
.squad-level { color: var(--gold); font: 400 8px/1 var(--mono); }
.mini-vital { height: 2px; background: #343936; }
.mini-vital i { display: block; height: 100%; background: #819986; }
.squad-status { width: 7px; height: 7px; border: 1px solid #819986; border-radius: 50%; background: #657e6a; box-shadow: 0 0 7px rgba(129, 153, 134, .5); }
.squad-card.down .squad-status { background: #382a27; border-color: #8e5147; box-shadow: none; }
.action-pips { display: flex; gap: 5px; color: #777b70; font: 400 7px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.action-pips .spent { color: #b99e69; }

.ember-label { color: var(--gold) !important; }
.growth-panel .panel-copy { margin-bottom: 10px; }
.growth-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.growth-button { min-height: 51px; display: grid; align-content: center; gap: 5px; padding: 7px; text-align: left; color: #cfc9bb; border: 1px solid #3a3c34; background: #151816; cursor: pointer; }
.growth-button:hover:not(:disabled) { border-color: #9e885e; background: #1c1d18; }
.growth-button:disabled { opacity: .4; cursor: not-allowed; }
.growth-button strong { font: 500 8px/1 var(--mono); letter-spacing: .08em; }
.growth-button small { color: #a59a84; font: 400 8px/1 var(--mono); }
.passive-list { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.passive-chip { padding: 4px 6px; color: #b5c6b8; background: rgba(83, 112, 91, .12); border: 1px solid rgba(110, 145, 117, .3); font: 400 8px/1 var(--mono); }
.passive-empty { color: #797e74; font: 400 8px/1.45 var(--mono); }
.stash-strip { display: flex; align-items: center; gap: 9px; padding: 10px; border: 1px solid #34362f; background: linear-gradient(105deg, rgba(115, 91, 54, .13), rgba(18, 21, 20, .8)); }
.stash-mark { display: grid; place-items: center; width: 26px; height: 28px; color: var(--gold-bright); border: 1px solid #806f4b; font: 500 12px/1 var(--serif); transform: rotate(45deg) scale(.82); }
.stash-mark::first-letter { transform: rotate(-45deg); }
.stash-strip > span:nth-child(2) { display: grid; gap: 3px; min-width: 0; }
.stash-strip strong { color: #d4c9b4; font: 500 9px/1 var(--mono); text-transform: uppercase; }
.stash-strip small { color: #8e9087; font-size: 9px; }
.stash-saved { margin-left: auto; color: #73776f; font: 400 7px/1 var(--mono); letter-spacing: .06em; text-align: right; }

.battle-heading { display: flex; justify-content: space-between; align-items: end; gap: 14px; padding: 0 2px 10px; }
.battle-heading h2 { margin: 4px 0 0; font: 500 17px/1.15 var(--serif); color: #ddd7c9; }
.turn-state { display: flex; align-items: center; gap: 8px; max-width: 230px; padding: 7px 9px; border: 1px solid #343a35; background: rgba(26, 32, 29, .65); }
.turn-state-mark { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: var(--gold); box-shadow: 0 0 7px rgba(194, 164, 116, .7); }
.turn-state.is-hostile .turn-state-mark { background: var(--red-bright); box-shadow: 0 0 7px rgba(207, 121, 108, .7); }
.turn-state > span:last-child { display: grid; gap: 3px; min-width: 0; }
.turn-state strong { color: #dad4c7; font: 500 8px/1 var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.turn-state small { color: #999b90; font-size: 9px; white-space: nowrap; }

.arena-frame { position: relative; padding: 13px 14px 10px; border: 1px solid #3a3d36; background: linear-gradient(145deg, #1d211d, #151816 72%); box-shadow: 0 8px 20px rgba(0,0,0,.25), inset 0 0 0 3px rgba(255,255,255,.012); }
.arena-frame::before { content: ''; position: absolute; inset: 7px; pointer-events: none; border: 1px solid rgba(164, 147, 111, .09); }
.arena-rivet { position: absolute; z-index: 1; width: 5px; height: 5px; border: 1px solid #776c55; background: #292c26; transform: rotate(45deg); }
.rivet-tl { top: 5px; left: 5px; } .rivet-tr { top: 5px; right: 5px; }
.board-legend { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 11px; padding: 1px 0 10px; color: #999a90; font: 400 7px/1 var(--mono); letter-spacing: .1em; }
.board-legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend-dot { width: 6px; height: 6px; border-radius: 50%; }
.legend-dot.ally { background: #96ad99; box-shadow: 0 0 6px #6c8a70; }
.legend-dot.hostile { background: #bc6457; box-shadow: 0 0 6px #8b4940; }
.legend-square { width: 7px; height: 7px; border: 1px solid #9e8155; background: repeating-linear-gradient(45deg, #494237 0 2px, #282a25 2px 4px); }
.board { position: relative; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 5px; width: min(100%, 820px); margin: 0 auto; }
.tile { position: relative; display: grid; place-items: center; min-width: 0; aspect-ratio: 1; overflow: hidden; padding: 0; border: 1px solid rgba(161, 161, 138, .12); border-radius: 2px; color: var(--text); background: linear-gradient(145deg, #353a32, #2c312c 53%, #282d29); cursor: default; transition: filter .12s ease, border-color .12s ease, transform .12s ease; }
.tile::before { content: ''; position: absolute; inset: 1px; pointer-events: none; border: 1px solid rgba(223, 220, 193, .035); background: repeating-linear-gradient(36deg, transparent 0 11px, rgba(11, 14, 12, .11) 11px 12px); }
.tile:nth-child(4n + 2) { background: linear-gradient(155deg, #31362f, #292e29 60%, #242a27); }
.tile:nth-child(7n + 3) { background: linear-gradient(130deg, #35392f, #2b302a 64%, #252b27); }
.tile.shallow { background: linear-gradient(145deg, #2c3a36, #29332f 58%, #252c29); }
.tile.altar { border-color: rgba(163, 132, 83, .56); background: radial-gradient(circle at 50% 50%, #494438 0 18%, #34352f 19% 45%, #292e29 46%); }
.tile.altar::after { content: '✣'; position: absolute; color: rgba(203, 171, 116, .45); font: 20px/1 Georgia, serif; }
.tile.wall { border-color: rgba(135, 123, 93, .18); background: linear-gradient(140deg, #202321, #171b19); }
.tile.wall::before { inset: 3px; border: 1px solid rgba(189, 172, 134, .1); background: linear-gradient(0deg, transparent 47%, rgba(4,5,4,.3) 48% 53%, transparent 54%), linear-gradient(90deg, transparent 47%, rgba(4,5,4,.25) 48% 53%, transparent 54%); }
.tile.reachable { cursor: pointer; border-color: rgba(160, 192, 164, .59); box-shadow: inset 0 0 0 1px rgba(128, 163, 148, .16); }
.tile.reachable::after { content: ''; width: 7px; height: 7px; border: 1px solid rgba(160, 192, 164, .75); border-radius: 50%; background: rgba(128, 163, 148, .45); box-shadow: 0 0 12px rgba(128, 163, 148, .36); }
.tile.reachable:hover { filter: brightness(1.25); transform: scale(.98); }
.tile.targetable { cursor: crosshair; border-color: rgba(212, 128, 111, .74); box-shadow: inset 0 0 0 1px rgba(207, 121, 108, .24), 0 0 9px rgba(165, 74, 62, .17); }
.tile.targetable:hover { filter: brightness(1.22); }
.tile.selected-tile { z-index: 1; border-color: var(--gold-bright); box-shadow: inset 0 0 0 2px rgba(210, 180, 122, .35), 0 0 12px rgba(210, 180, 122, .25); }
.tile:focus-visible { z-index: 3; outline-offset: -3px; }
.actor { position: relative; z-index: 2; display: grid; place-items: center; width: 67%; height: 72%; min-width: 20px; min-height: 20px; color: #e9e1ce; border: 1px solid rgba(230, 216, 185, .6); clip-path: polygon(50% 0, 86% 15%, 100% 47%, 83% 81%, 50% 100%, 17% 81%, 0 47%, 14% 15%); background: radial-gradient(circle at 35% 25%, #82917e, #4b5d50 48%, #28352e); box-shadow: 0 2px 12px rgba(0,0,0,.45); font: 500 clamp(7px, .8vw, 10px)/1 var(--mono); letter-spacing: -.04em; text-shadow: 0 1px 2px #111; }
.actor.hero-orin { background: radial-gradient(circle at 35% 25%, #788d83, #40564b 50%, #24342d); }
.actor.enemy { width: 64%; height: 69%; color: #ecd7c9; border-color: rgba(213, 145, 120, .64); background: radial-gradient(circle at 34% 28%, #a35b4e, #6d3835 51%, #3a2525); }
.actor.enemy.ranged { color: #d9d0af; border-color: rgba(201, 181, 123, .6); background: radial-gradient(circle at 34% 28%, #8d835b, #5a593d 51%, #2f3428); }
.actor.shielded::after { content: ''; position: absolute; inset: -3px; border: 1px solid rgba(143, 182, 166, .83); clip-path: polygon(50% 0, 96% 16%, 85% 78%, 50% 100%, 15% 78%, 4% 16%); }
.actor-mark { position: absolute; z-index: 3; top: 7%; right: 8%; display: grid; place-items: center; width: 11px; height: 11px; color: #ffe1cb; border: 1px solid #d18a69; border-radius: 50%; background: #72352f; font: 500 7px/1 var(--mono); box-shadow: 0 0 7px rgba(195, 104, 77, .45); }
.actor-label { position: absolute; z-index: 2; bottom: 2px; left: 0; right: 0; color: rgba(237, 229, 209, .75); font: 400 6px/1 var(--mono); letter-spacing: .04em; text-align: center; text-transform: uppercase; }
.arena-footnote { display: flex; justify-content: space-between; gap: 12px; padding: 10px 2px 0; color: #858980; font: 400 7px/1 var(--mono); letter-spacing: .09em; }
.divider-dot { padding: 0 4px; color: #837454; font-style: normal; }

.action-panel { padding: 13px; border: 1px solid var(--line-soft); background: linear-gradient(150deg, rgba(23, 27, 25, .9), rgba(16, 19, 18, .9)); }
.action-panel-head { display: flex; justify-content: space-between; align-items: end; gap: 14px; margin-bottom: 10px; }
.action-panel-head h2 { margin: 4px 0 0; color: #ddd6c7; font: 500 14px/1.15 var(--serif); }
.action-hint { max-width: 245px; margin: 0; color: #92968b; font-size: 9px; line-height: 1.4; text-align: right; }
.skill-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.skill-card { position: relative; display: grid; grid-template-columns: 31px 1fr; align-items: center; gap: 8px; min-height: 59px; padding: 8px; color: #ddd7c8; border: 1px solid #343a35; background: linear-gradient(125deg, #1b211e, #151917); cursor: pointer; text-align: left; transition: border-color .15s ease, background .15s ease; }
.skill-card:hover:not(:disabled) { border-color: #98865e; background: #20231d; }
.skill-card:disabled { opacity: .48; cursor: not-allowed; }
.skill-card.selected { border-color: #ca9a72; background: linear-gradient(130deg, rgba(118, 65, 53, .27), #181c19); box-shadow: inset 2px 0 var(--red-bright); }
.skill-glyph { display: grid; place-items: center; width: 29px; height: 31px; color: #d2bd90; border: 1px solid #62563e; font: 500 10px/1 var(--mono); background: repeating-linear-gradient(135deg, rgba(151,126,79,.13) 0 3px, transparent 3px 7px), #22251f; }
.skill-copy { display: grid; gap: 4px; min-width: 0; }
.skill-copy strong { overflow: hidden; font: 500 9px/1.1 var(--serif); white-space: nowrap; text-overflow: ellipsis; }
.skill-copy small { color: #9a9b90; font: 400 7px/1.15 var(--mono); letter-spacing: .04em; }
.skill-cost { position: absolute; top: 6px; right: 6px; color: #7f8175; font: 400 7px/1 var(--mono); }
.spent-stamp { position: absolute; right: 5px; bottom: 5px; color: var(--gold); font: 500 6px/1 var(--mono); letter-spacing: .09em; }
.empty-skills { grid-column: 1/-1; padding: 14px; color: #858980; border: 1px dashed #343a35; font: 400 9px/1.4 var(--mono); }

.combat-log { padding-bottom: 8px; }
.combat-log .panel-heading { margin-bottom: 5px; }
.combat-feed { display: grid; gap: 4px; max-height: 104px; overflow: auto; margin: 0; padding: 0; list-style: none; scrollbar-color: #515347 transparent; scrollbar-width: thin; }
.combat-feed li { display: grid; grid-template-columns: 37px 1fr; gap: 8px; color: #b5b4a9; font-size: 9px; line-height: 1.35; }
.combat-feed time { color: #777d72; font: 400 8px/1.5 var(--mono); }
.combat-feed .event-highlight { color: #dfc690; }
.combat-feed .event-hostile { color: #d28a7d; }

.unit-panel { padding-bottom: 12px; }
.level-stamp { padding: 4px 6px; color: #dec897; border: 1px solid #66593f; background: rgba(128, 101, 55, .12); font: 500 8px/1 var(--mono); letter-spacing: .07em; }
.unit-identity { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); }
.unit-portrait { position: relative; display: grid; flex: 0 0 auto; place-items: center; width: 47px; height: 50px; color: #e6d6b7; border: 1px solid #88714c; clip-path: polygon(50% 0, 92% 18%, 82% 78%, 50% 100%, 18% 78%, 8% 18%); background: radial-gradient(circle at 30% 30%, #64705d, #394239 60%, #222824); font: 500 10px/1 var(--mono); }
.unit-portrait.orin { color: #d3e0d4; border-color: #708679; background: radial-gradient(circle at 30% 30%, #61786a, #34473d 60%, #202a24); }
.unit-identity h2 { margin: 0 0 4px; color: #e0d9c9; font: 500 17px/1.1 var(--serif); }
.unit-identity p { margin: 0; color: #95968c; font: 400 8px/1.2 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.vital-row { display: flex; justify-content: space-between; margin-top: 12px; color: #9b9d91; font: 400 8px/1 var(--mono); letter-spacing: .09em; }
.vital-row strong { color: #d0d0bf; font-weight: 400; }
.vital-track { height: 4px; margin-top: 7px; }
.vital-track span { background: linear-gradient(90deg, #66836d, #a5b99e); }
.unit-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 12px; }
.unit-stats > div { display: grid; gap: 4px; padding: 7px; border: 1px solid #2e3530; background: #121614; }
.unit-stats .eyebrow { font-size: 7px; }
.unit-stats strong { color: #d6d1c4; font: 500 10px/1 var(--mono); }
.unit-perks { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.unit-perks:empty { display: none; }

.gear-slots { display: grid; gap: 6px; }
.gear-slot { display: grid; grid-template-columns: 24px minmax(0,1fr) 13px; align-items: center; gap: 7px; width: 100%; padding: 7px; color: inherit; border: 1px solid #313832; background: #121614; text-align: left; cursor: default; }
.gear-slot.interactive { cursor: pointer; }
.gear-slot.interactive:hover { border-color: #98865e; background: #1a1e1a; }
.gear-slot-glyph { display: grid; place-items: center; width: 22px; height: 25px; color: #c9b886; border: 1px solid #4c493a; background: #252720; font: 500 8px/1 var(--mono); }
.gear-slot-copy { display: grid; gap: 3px; min-width: 0; }
.gear-slot-copy small { color: #81867d; font: 400 7px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.gear-slot-copy strong { overflow: hidden; color: #d3ccbd; font: 500 9px/1.1 var(--serif); white-space: nowrap; text-overflow: ellipsis; }
.gear-slot-copy em { overflow: hidden; color: #a29b87; font: normal 7px/1.1 var(--mono); white-space: nowrap; text-overflow: ellipsis; }
.gear-slot-arrow { color: #858578; font: 400 11px/1 var(--mono); }
.gear-lock-note { margin: 8px 0 0; color: #86897e; font: 400 8px/1.45 var(--mono); }
.gear-lock-note.unlocked { color: #a4bb9f; }

.synergy-panel { padding: 11px 12px; border: 1px solid rgba(174, 131, 81, .4); background: linear-gradient(130deg, rgba(116, 83, 46, .2), rgba(27, 29, 23, .62)); }
.synergy-panel.inactive { border-color: #2b312d; background: rgba(20, 24, 22, .75); }
.synergy-title { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--gold-bright); font: 500 8px/1.2 var(--mono); letter-spacing: .11em; text-transform: uppercase; }
.synergy-title span:last-child { color: #908365; font-size: 7px; }
.synergy-panel p { margin: 6px 0 0; color: #c0b9a9; font-size: 9px; line-height: 1.45; }
.synergy-panel.inactive .synergy-title { color: #90958a; }
.synergy-panel.inactive p { color: #82877e; }

.enemy-list { display: grid; gap: 7px; }
.enemy-entry { display: grid; grid-template-columns: 20px minmax(0,1fr) auto; align-items: center; gap: 7px; padding: 6px 0; border-top: 1px solid #262d29; }
.enemy-entry:first-child { padding-top: 1px; border-top: 0; }
.enemy-glyph { display: grid; place-items: center; width: 18px; height: 19px; color: #d8b39c; border: 1px solid #795349; background: #342725; font: 500 7px/1 var(--mono); }
.enemy-entry.ranged .enemy-glyph { color: #d1c99d; border-color: #6b6343; background: #2b2c22; }
.enemy-entry-copy { display: grid; gap: 4px; min-width: 0; }
.enemy-entry-copy strong { overflow: hidden; color: #cfc9bb; font: 500 9px/1 var(--serif); white-space: nowrap; text-overflow: ellipsis; }
.enemy-entry-copy small { color: #858a7f; font: 400 7px/1 var(--mono); }
.enemy-hp { color: #9f9f91; font: 400 8px/1 var(--mono); text-align: right; }
.enemy-entry.dead { opacity: .38; }
.enemy-entry.dead .enemy-entry-copy strong { text-decoration: line-through; }

.app-footer { display: flex; justify-content: space-between; gap: 14px; padding: 15px 2px 3px; color: #696f67; font: 400 7px/1.3 var(--mono); letter-spacing: .1em; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.modal-root:empty { display: none; }
.modal-root { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(6, 8, 7, .77); backdrop-filter: blur(5px); }
.modal-card { position: relative; width: min(660px, 100%); max-height: min(88vh, 760px); overflow: auto; padding: clamp(18px, 4vw, 30px); border: 1px solid #665b43; background: radial-gradient(ellipse at 50% 0, rgba(114, 94, 59, .16), transparent 65%), linear-gradient(145deg, #1d211e, #111413 73%); box-shadow: 0 24px 90px rgba(0,0,0,.7), inset 0 0 0 4px rgba(255,255,255,.012); }
.modal-card::before { content: ''; position: absolute; pointer-events: none; inset: 8px; border: 1px solid rgba(191, 171, 128, .11); }
.modal-card > * { position: relative; }
.modal-eyebrow { color: var(--gold); font: 500 9px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; }
.modal-card h2 { margin: 8px 0 7px; color: #e4ddce; font: 500 clamp(23px, 4vw, 32px)/1.08 var(--serif); }
.modal-intro { max-width: 510px; margin: 0; color: #aaa99e; font-size: 11px; line-height: 1.55; }
.choice-list { display: grid; gap: 7px; margin: 19px 0 15px; }
.choice-card { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 10px; width: 100%; padding: 10px; color: inherit; border: 1px solid #343b35; background: rgba(15, 18, 17, .75); text-align: left; cursor: pointer; }
.choice-card:hover { border-color: #887950; background: rgba(39, 39, 30, .78); }
.choice-card.selected { border-color: #b69a65; background: linear-gradient(105deg, rgba(121, 90, 48, .2), rgba(15, 18, 17, .8)); box-shadow: inset 2px 0 var(--gold); }
.choice-glyph { display: grid; place-items: center; width: 25px; height: 27px; color: #ddc892; border: 1px solid #685a3d; background: #28271f; font: 500 9px/1 var(--mono); }
.choice-copy { display: grid; gap: 4px; }
.choice-copy strong { color: #e1d8c6; font: 500 12px/1.1 var(--serif); }
.choice-copy small { color: #a19b8a; font: 400 8px/1.35 var(--mono); }
.choice-tag { color: #a79570; font: 400 7px/1.2 var(--mono); letter-spacing: .08em; text-align: right; text-transform: uppercase; }
.modal-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding-top: 11px; border-top: 1px solid #303630; }
.button-quiet { padding: 10px 12px; color: #aaa99e; border-color: #41453d; background: transparent; font: 500 9px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.button-quiet:hover:not(:disabled) { color: var(--text); border-color: #7c755d; }
.modal-note { margin-right: auto; color: #777e73; font: 400 8px/1.4 var(--mono); }
.gear-picker-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; margin: 18px 0; }
.gear-pick-card { display: grid; gap: 5px; padding: 10px; text-align: left; color: #d4cdbd; border: 1px solid #353b35; background: #141816; cursor: pointer; }
.gear-pick-card:hover { border-color: #92805a; }
.gear-pick-card strong { font: 500 12px/1.1 var(--serif); }
.gear-pick-card small { color: #a19a87; font: 400 8px/1.35 var(--mono); }
.gear-pick-card .eyebrow { font-size: 7px; }
.gear-pick-empty { grid-column: 1/-1; padding: 15px; color: #92958a; border: 1px dashed #41453d; font-size: 10px; line-height: 1.5; }
.modal-passives { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 7px; margin: 17px 0; }
.passive-choice { display: grid; align-content: start; gap: 7px; min-height: 112px; padding: 10px; color: #d6d1c3; border: 1px solid #364039; background: #141916; text-align: left; cursor: pointer; }
.passive-choice:hover { border-color: #82a18b; background: #19211b; }
.passive-choice strong { color: #b4ceb7; font: 500 11px/1.15 var(--serif); }
.passive-choice small { color: #9ba096; font-size: 9px; line-height: 1.4; }
.passive-choice em { color: #8c987e; font: normal 7px/1 var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.modal-footer-text { margin-top: 11px; color: #7d8176; font: 400 8px/1.4 var(--mono); }

@media (max-width: 1180px) {
  .app-shell { padding-right: 18px; padding-left: 18px; }
  .workspace { grid-template-columns: minmax(176px, 206px) minmax(380px, 1fr) minmax(205px, 232px); gap: 11px; }
  .contract-panel, .party-panel, .growth-panel, .unit-panel, .equipment-panel, .enemy-panel, .combat-log { padding: 11px; }
  .board { gap: 4px; }
  .arena-frame { padding-right: 11px; padding-left: 11px; }
}

@media (max-width: 980px) {
  .workspace { grid-template-columns: minmax(0, 1fr) minmax(245px, .68fr); }
  .battle-column { grid-column: 1 / -1; grid-row: 1; }
  .left-rail { grid-column: 1; grid-row: 2; }
  .right-rail { grid-column: 2; grid-row: 2; }
  .left-rail { grid-template-columns: repeat(2, minmax(0,1fr)); align-items: start; }
  .stash-strip { grid-column: 1 / -1; }
  .board { width: min(100%, 760px); }
}

@media (max-width: 640px) {
  .app-shell { padding: 0 11px 14px; }
  .topbar { min-height: 68px; gap: 9px; }
  .brand { gap: 8px; }
  .brand-sigil { width: 27px; height: 31px; }
  .brand-name { font-size: 11px; letter-spacing: .07em; }
  .brand-copy .eyebrow { font-size: 7px; }
  .topbar-meta { gap: 9px; }
  .top-metric { min-width: auto; }
  .top-metric .eyebrow { font-size: 7px; }
  .top-metric strong { font-size: 12px; }
  .top-action { min-width: 0; max-width: 114px; padding: 10px 8px; font-size: 8px; letter-spacing: .06em; }
  .mission-banner { align-items: start; padding: 20px 0 15px; }
  .mission-banner h1 { font-size: 26px; }
  .mission-banner p { max-width: 310px; font-size: 10px; }
  .mission-facts { display: none; }
  .workspace { grid-template-columns: minmax(0,1fr); gap: 10px; padding-top: 11px; }
  .battle-column, .left-rail, .right-rail { grid-column: 1; grid-row: auto; }
  .battle-column { grid-row: 1; }
  .left-rail { grid-row: 2; }
  .right-rail { grid-row: 3; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; }
  .unit-panel, .equipment-panel { grid-column: 1 / -1; }
  .synergy-panel, .enemy-panel { grid-column: span 1; }
  .left-rail { grid-template-columns: 1fr 1fr; }
  .contract-panel { grid-column: 1/-1; }
  .growth-panel { grid-column: 1/-1; }
  .party-panel { grid-column: 1/-1; }
  .squad-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .stash-strip { grid-column: 1/-1; }
  .battle-heading { align-items: start; }
  .battle-heading h2 { font-size: 15px; }
  .turn-state { max-width: 164px; padding: 6px; }
  .turn-state small { max-width: 132px; overflow: hidden; text-overflow: ellipsis; }
  .arena-frame { padding: 10px 8px 9px; }
  .board-legend { gap: 8px; font-size: 6px; }
  .board { gap: 3px; }
  .tile.altar::after { font-size: 14px; }
  .actor-label { display: none; }
  .arena-footnote { font-size: 6px; letter-spacing: .05em; }
  .action-panel { padding: 10px; }
  .action-panel-head { align-items: start; }
  .action-hint { max-width: 125px; }
  .skill-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .app-footer { flex-direction: column; gap: 5px; font-size: 6px; }
  .modal-passives { grid-template-columns: 1fr; }
  .passive-choice { min-height: 0; }
  .gear-picker-grid { grid-template-columns: 1fr; }
  .choice-card { grid-template-columns: 25px 1fr; }
  .choice-tag { grid-column: 2; text-align: left; }
}

@media (max-width: 390px) {
  .app-shell { padding: 0 8px 12px; }
  .topbar-meta { gap: 7px; }
  .topbar .brand-name { font-size: 10px; }
  .top-action { max-width: 86px; padding: 9px 5px; font-size: 7px; letter-spacing: 0; }
  .board-legend { gap: 6px; }
  .board-legend span { gap: 3px; }
  .arena-footnote span:last-child { display: none; }
  .right-rail { grid-template-columns: 1fr; }
  .synergy-panel, .enemy-panel { grid-column: 1; }
}

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

/* Vivid low-fantasy art direction: sun-warmed paper, meadow greens, river blues. */
body {
  background:
    radial-gradient(ellipse at 13% 0%, rgba(247, 204, 102, .23), transparent 30%),
    radial-gradient(ellipse at 93% 28%, rgba(98, 160, 118, .18), transparent 33%),
    linear-gradient(180deg, #f1ead7 0%, #e7dfc9 54%, #eee6d2 100%);
}

button:focus-visible, a:focus-visible { outline-color: #b36b20; }
.topbar, .mission-banner { border-color: #cabe9c; }
.brand-sigil { border-color: #5d7340; background: linear-gradient(145deg, #f1cb61, #72a94d 53%, #34724c); }
.brand-sigil::before { border-color: rgba(255, 248, 213, .9); }
.brand-sigil i { background: #d95836; box-shadow: 0 0 8px rgba(217, 88, 54, .55); }
.brand-sigil b { background: #fff4c9; }
.brand-name { color: #29432d; }
.eyebrow { color: #5e7354; }
.mission-title-group .eyebrow { color: #8a622b; }
.slash { color: #a87531; }
.mission-banner h1 { color: #29432d; }
.mission-banner p { color: #546b50; }
.mission-facts strong { color: #44583e; }
.button-primary { color: #fff9e9; background: #39784b; border-color: #2c693f; box-shadow: inset 0 1px rgba(255,255,255,.22), 0 2px 0 #245b37; }
.button-primary:hover:not(:disabled) { background: #2f6840; }
.top-metric strong { color: #314a32; }
.ember-dot { background: #dc9c24; box-shadow: 0 0 8px rgba(220, 156, 36, .44); }

.panel, .action-panel, .arena-frame {
  border-color: #c8bc9b;
  background: linear-gradient(145deg, rgba(250, 246, 232, .98), rgba(239, 232, 212, .98));
  box-shadow: 0 6px 18px rgba(70, 76, 46, .09);
}
.panel-heading .eyebrow { color: #607252; }
.muted, .panel-heading .muted { color: #788168; }
.state-pill { color: #87571d; border-color: #cfb77b; background: #f5e9c9; }
.contract-panel h2, .battle-heading h2, .action-panel-head h2, .unit-identity h2 { color: #314632; }
.panel-copy { color: #5b6d52; }
.objective-line { color: #58674f; }
.objective-line strong, .turn-readout strong { color: #795a2c; }
.progress-track, .vital-track { background: #d4ceb7; }
.progress-track span { background: linear-gradient(90deg, #5e984e, #d0a72c); }
.turn-readout, .unit-identity { border-color: #d3c9ae; }

.squad-card, .growth-button, .gear-slot, .unit-stats > div {
  color: #344934;
  border-color: #d0c5a8;
  background: #f8f3e5;
}
.squad-card:hover, .growth-button:hover:not(:disabled), .gear-slot.interactive:hover { border-color: #82a16c; background: #fff9e9; }
.squad-card.selected { border-color: #bc8a38; background: linear-gradient(100deg, #f6e7ba, #f8f3e5); box-shadow: inset 3px 0 #bd812b; }
.squad-glyph { color: #fff5d8; border-color: #607f4e; background: linear-gradient(145deg, #7ab14d, #397349); text-shadow: 0 1px 2px rgba(27, 62, 38, .5); }
.squad-card:nth-child(2) .squad-glyph { color: #eef7e6; border-color: #4e8290; background: linear-gradient(145deg, #53a9a4, #39727c); }
.squad-name { color: #304632; }
.squad-level { color: #9a651f; }
.mini-vital { background: #d7d5bf; }
.mini-vital i { background: #4d9a5a; }
.squad-status { border-color: #397c4b; background: #65ad58; box-shadow: 0 0 6px rgba(74, 148, 74, .32); }
.squad-card.down .squad-status { background: #f5ead6; border-color: #a94e38; }
.action-pips { color: #78816b; }
.action-pips .spent { color: #a5651f; }
.ember-label { color: #a9681f !important; }
.growth-button { color: #354a35; }
.growth-button small { color: #6e714f; }
.passive-chip { color: #285a3d; background: #e4efd9; border-color: #afc99b; }
.passive-empty { color: #75816b; }
.stash-strip { border-color: #cab989; background: linear-gradient(105deg, #f5e8c2, #f5efdf); }
.stash-mark { color: #a96d21; border-color: #ba8b43; }
.stash-strip strong { color: #594b30; }
.stash-strip small, .stash-saved { color: #73765f; }

.turn-state { border-color: #c9bd9f; background: #f6f0e1; }
.turn-state strong { color: #3d573b; }
.turn-state small { color: #62715a; }
.turn-state-mark { background: #d49a25; box-shadow: 0 0 7px rgba(212, 154, 37, .45); }
.turn-state.is-hostile .turn-state-mark { background: #ce553b; box-shadow: 0 0 7px rgba(206, 85, 59, .42); }
.arena-frame { background: linear-gradient(145deg, #e5d8b7, #d9cba7 72%); box-shadow: 0 8px 20px rgba(65, 74, 47, .14), inset 0 0 0 3px rgba(255,255,255,.18); }
.arena-frame::before { border-color: rgba(116, 98, 57, .24); }
.arena-rivet { border-color: #9c7e43; background: #f5e1a8; }
.board-legend { color: #5e6f52; }
.legend-dot.ally { background: #388651; box-shadow: 0 0 5px #6ea35d; }
.legend-dot.hostile { background: #ca4e37; box-shadow: 0 0 5px #a64733; }
.legend-square { border-color: #a37b32; background: repeating-linear-gradient(45deg, #e1bd61 0 2px, #f0d990 2px 4px); }

/* Painted terrain keeps the battle map bright without sacrificing tile contrast. */
.tile { border-color: rgba(46, 91, 52, .3); color: #263b2e; background: linear-gradient(145deg, #a9ce75, #82b467 55%, #75a65e); }
.tile::before { border-color: rgba(245, 239, 197, .35); background: repeating-linear-gradient(36deg, transparent 0 11px, rgba(45, 91, 46, .12) 11px 12px); }
.tile:nth-child(4n + 2) { background: linear-gradient(155deg, #b3d47e, #90bb68 60%, #7cac60); }
.tile:nth-child(7n + 3) { background: linear-gradient(130deg, #a2ca70, #7cad5d 64%, #709e58); }
.tile:nth-child(11n + 4):not(.shallow):not(.wall):not(.altar)::before,
.tile:nth-child(17n + 8):not(.shallow):not(.wall):not(.altar)::before {
  background:
    radial-gradient(circle at 23% 29%, #f5d968 0 1px, transparent 1.8px),
    radial-gradient(circle at 69% 64%, #f5f0cf 0 1.2px, transparent 2px),
    radial-gradient(circle at 79% 24%, #d9744d 0 1px, transparent 1.8px),
    repeating-linear-gradient(36deg, transparent 0 11px, rgba(45, 91, 46, .1) 11px 12px);
}
.tile.shallow { border-color: rgba(47, 115, 142, .42); background: linear-gradient(145deg, #74c4d0, #55a9c0 58%, #438cae); }
.tile.shallow::before { background: repeating-linear-gradient(0deg, transparent 0 9px, rgba(236, 251, 226, .24) 9px 10px); }
.tile.altar { border-color: rgba(155, 114, 40, .72); background: radial-gradient(circle at 50% 50%, #f5d970 0 18%, #d2a94d 19% 45%, #9fb968 46%); }
.tile.altar::after { color: rgba(110, 82, 31, .68); }
.tile.wall { border-color: rgba(103, 94, 70, .42); background: linear-gradient(140deg, #c9b995, #a89875); }
.tile.wall::before { border-color: rgba(248, 236, 196, .32); background: linear-gradient(0deg, transparent 47%, rgba(87,74,52,.22) 48% 53%, transparent 54%), linear-gradient(90deg, transparent 47%, rgba(87,74,52,.18) 48% 53%, transparent 54%); }
.tile.reachable { border-color: #2d824b; box-shadow: inset 0 0 0 2px rgba(51, 135, 70, .34); }
.tile.reachable::after { border-color: #fff8cc; background: rgba(255, 238, 136, .9); box-shadow: 0 0 10px rgba(255, 239, 133, .85); }
.tile.targetable { border-color: #b43f31; box-shadow: inset 0 0 0 2px rgba(194, 63, 43, .28), 0 0 8px rgba(174, 56, 42, .22); }
.tile.selected-tile { border-color: #e0a729; box-shadow: inset 0 0 0 2px rgba(255, 239, 140, .82), 0 0 10px rgba(213, 159, 39, .52); }
.actor { color: #fff8dd; border-color: rgba(255, 250, 216, .92); background: radial-gradient(circle at 35% 25%, #82c86d, #42864f 48%, #28623f); box-shadow: 0 2px 9px rgba(36, 70, 39, .4); text-shadow: 0 1px 2px #234128; }
.actor.hero-orin { background: radial-gradient(circle at 35% 25%, #76c9c4, #39889a 50%, #286779); }
.actor.enemy { color: #fff1dc; border-color: rgba(255, 230, 186, .92); background: radial-gradient(circle at 34% 28%, #e8734c, #b74635 51%, #81372f); }
.actor.enemy.ranged { color: #fff7d7; border-color: rgba(255, 235, 170, .96); background: radial-gradient(circle at 34% 28%, #edb33d, #bd7926 51%, #81532b); }
.actor.shielded::after { border-color: rgba(255, 248, 195, .95); }
.actor-mark { color: #fff8dd; border-color: #ae382d; background: #ce4a34; }
.actor-label { color: rgba(42, 58, 34, .88); text-shadow: 0 1px rgba(247, 242, 207, .7); }
.arena-footnote { color: #657354; }
.divider-dot { color: #a67931; }

.skill-card { color: #354b37; border-color: #d2c6a8; background: linear-gradient(125deg, #fff9e9, #eee7d5); }
.skill-card:disabled { opacity: .84; }
.skill-card:hover:not(:disabled) { border-color: #9e7932; background: #fff5da; }
.skill-card.selected { border-color: #bd7143; background: linear-gradient(130deg, #f5dfbd, #f7efdf); box-shadow: inset 3px 0 #c65239; }
.skill-glyph { color: #8b5d20; border-color: #c5a35a; background: repeating-linear-gradient(135deg, rgba(195,155,60,.16) 0 3px, transparent 3px 7px), #f4e8c8; }
.skill-copy small, .skill-cost { color: #68755c; }
.spent-stamp { color: #9b651f; }
.empty-skills { color: #68765f; border-color: #c9c0a9; }
.combat-feed li { color: #4c6148; }
.combat-feed time { color: #77806b; }
.combat-feed .event-highlight { color: #95611d; }
.combat-feed .event-hostile { color: #a44231; }
.level-stamp { color: #81591c; border-color: #c6a55d; background: #f5e8c4; }
.unit-portrait { color: #fff3cf; border-color: #66824f; background: radial-gradient(circle at 30% 30%, #91c765, #4d824b 60%, #2e603e); }
.unit-portrait.orin { color: #e8ffeb; border-color: #4b8990; background: radial-gradient(circle at 30% 30%, #69bbb0, #397a7d 60%, #2c5c68); }
.unit-identity p, .vital-row { color: #617057; }
.vital-row strong { color: #3b593e; }
.vital-track span { background: linear-gradient(90deg, #429352, #8ac65e); }
.unit-stats strong { color: #364b37; }
.gear-slot-glyph { color: #835a20; border-color: #c5ad75; background: #f2e7c9; }
.gear-slot-copy small, .gear-slot-arrow { color: #728066; }
.gear-slot-copy strong { color: #3e533b; }
.gear-slot-copy em { color: #6e7156; }
.gear-lock-note { color: #68775e; }
.gear-lock-note.unlocked { color: #367347; }
.synergy-panel { border-color: #c7a252; background: linear-gradient(130deg, #f7e9be, #f2ecd8); }
.synergy-panel.inactive { border-color: #d5cbb2; background: #eee9dc; }
.synergy-title { color: #875c1c; }
.synergy-title span:last-child { color: #83724e; }
.synergy-panel p { color: #536348; }
.synergy-panel.inactive .synergy-title, .synergy-panel.inactive p { color: #74806b; }
.enemy-entry { border-color: #ddd2b8; }
.enemy-glyph { color: #9d422f; border-color: #d09b7c; background: #f5e1ce; }
.enemy-entry.ranged .enemy-glyph { color: #8e641c; border-color: #d1b45f; background: #f4e8c6; }
.enemy-entry-copy strong { color: #45583f; }
.enemy-entry-copy small, .enemy-hp { color: #738064; }
.app-footer { color: #718067; }

.modal-root { background: rgba(39, 54, 35, .48); }
.modal-card { border-color: #b9a46e; background: radial-gradient(ellipse at 50% 0, rgba(238, 204, 115, .28), transparent 65%), linear-gradient(145deg, #fff9e9, #eee6d2 73%); box-shadow: 0 24px 90px rgba(39, 48, 29, .28), inset 0 0 0 4px rgba(255,255,255,.3); }
.modal-card::before { border-color: rgba(162, 129, 57, .22); }
.modal-card h2 { color: #2f4933; }
.modal-intro { color: #5d6e53; }
.modal-actions { border-color: #d4c9ac; }
.choice-card, .gear-pick-card, .passive-choice { color: #3b5039; border-color: #d2c5a6; background: rgba(250, 246, 232, .94); }
.choice-card:hover, .gear-pick-card:hover { border-color: #ad823c; background: #fff4d9; }
.choice-card.selected { border-color: #bd9143; background: linear-gradient(105deg, #f6e9c5, #fcf8eb); box-shadow: inset 3px 0 #b87927; }
.choice-glyph { color: #8b601e; border-color: #c8ac67; background: #f3e8c9; }
.choice-copy strong { color: #354b36; }
.choice-copy small, .gear-pick-card small { color: #667257; }
.choice-tag { color: #896329; }
.button-quiet { color: #56674f; border-color: #c9bea4; }
.button-quiet:hover:not(:disabled) { color: #2d4832; border-color: #8e9b70; }
.modal-note, .modal-footer-text { color: #778067; }
.gear-pick-card .eyebrow { color: #637451; }
.gear-pick-empty { color: #66755e; border-color: #d0c6af; }
.passive-choice:hover { border-color: #75a06b; background: #f0f5df; }
.passive-choice strong { color: #346343; }
.passive-choice small { color: #5f7058; }
.passive-choice em { color: #71814f; }