:root {
  --ink: #f6f2e8;
  --muted: #9da8b7;
  --panel: #131b27;
  --panel-soft: #182333;
  --line: #344154;
  --blue: #4da3ff;
  --blue-deep: #1564b8;
  --red: #ff626d;
  --red-deep: #b72c39;
  --gold: #f0c56d;
  --neutral: #6f7b8b;
  --green: #54d39b;
  --danger: #ff8690;
  --shadow: 0 18px 60px rgba(0, 0, 0, .34);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  min-width: 1000px;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 12%, rgba(35, 93, 146, .22), transparent 30rem),
    radial-gradient(circle at 82% 82%, rgba(125, 39, 48, .18), transparent 34rem),
    #09101a;
  font-family: Georgia, "Times New Roman", serif;
}
button, input { font: inherit; }
button { color: inherit; }
.screen { min-height: 100vh; }
.start-screen, .setup-screen { display: grid; place-content: center; text-align: center; padding: 3rem; }
.start-screen::before {
  content: "";
  position: fixed;
  inset: 2rem;
  border: 1px solid rgba(240, 197, 109, .18);
  pointer-events: none;
}
.crest {
  width: 5rem;
  height: 5rem;
  display: grid;
  place-items: center;
  margin: 0 auto 1.75rem;
  color: var(--gold);
  border: 1px solid rgba(240, 197, 109, .45);
  border-radius: 50%;
  font-size: 2.2rem;
  box-shadow: 0 0 50px rgba(240, 197, 109, .12);
}
.eyebrow {
  margin: 0 0 .65rem;
  color: var(--gold);
  font: 700 .76rem/1.2 system-ui, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
}
h1, h2, h3, p { text-wrap: balance; }
.start-screen h1 {
  max-width: 850px;
  margin: 0 0 2.5rem;
  font-size: clamp(4rem, 8vw, 7.5rem);
  font-weight: 500;
  line-height: .88;
  letter-spacing: -.055em;
}
.button {
  min-height: 3rem;
  padding: .75rem 1.25rem;
  border: 1px solid transparent;
  border-radius: .45rem;
  cursor: pointer;
  font: 800 .84rem/1 system-ui, sans-serif;
  letter-spacing: .065em;
  text-transform: uppercase;
}
.button:focus-visible, .territory-node:focus-visible, input:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.button-primary { color: #111720; background: var(--gold); box-shadow: 0 10px 30px rgba(240, 197, 109, .15); }
.button-primary:hover:not(:disabled) { background: #ffe09c; transform: translateY(-1px); }
.button-primary:disabled { opacity: .35; cursor: not-allowed; }
.button-quiet { margin-top: .6rem; color: var(--muted); border-color: var(--line); background: transparent; }
.button-danger { color: var(--danger); border-color: rgba(255, 98, 109, .45); background: rgba(255, 98, 109, .08); }
.panel { background: linear-gradient(145deg, rgba(24, 35, 51, .98), rgba(13, 21, 32, .98)); border: 1px solid var(--line); border-radius: .75rem; box-shadow: var(--shadow); }
.setup-panel { width: min(720px, 90vw); padding: 3.25rem; }
.setup-panel h2 { margin: 0 0 2rem; font-size: 2.6rem; font-weight: 500; }
.setup-panel form { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: end; }
.setup-panel form > .button { grid-column: 1 / -1; margin: 1.1rem auto 0; }
.player-field { display: grid; gap: .65rem; text-align: left; color: var(--muted); font: 700 .78rem/1.2 system-ui, sans-serif; letter-spacing: .04em; }
.player-field input { width: 100%; padding: .9rem 1rem; color: var(--ink); background: #0b121d; border: 1px solid var(--line); border-radius: .4rem; font: 500 1rem/1.2 system-ui, sans-serif; }
.blue-field input { border-left: 3px solid var(--blue); }
.red-field input { border-left: 3px solid var(--red); }
.versus { padding-bottom: .95rem; color: var(--gold); font: 800 .8rem system-ui, sans-serif; }

.game-screen { height: 100vh; padding: 1rem 1.25rem; overflow: hidden; }
.game-header { height: 74px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(157, 168, 183, .18); }
.game-header h1 { margin: 0; font-size: 1.6rem; font-weight: 500; letter-spacing: -.02em; }
.round-label { color: var(--gold); font: 800 .82rem/1 system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.turn-indicator { display: flex; align-items: baseline; gap: .55rem; padding: .7rem 1rem; border: 1px solid var(--line); border-radius: .45rem; background: rgba(255,255,255,.03); }
.turn-indicator::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; }
.turn-indicator.blue::before { background: var(--blue); box-shadow: 0 0 16px var(--blue); }
.turn-indicator.red::before { background: var(--red); box-shadow: 0 0 16px var(--red); }
.turn-indicator span { color: var(--muted); font: 600 .85rem system-ui, sans-serif; }
.turn-indicator strong { font: 800 1rem system-ui, sans-serif; }
.game-layout { height: calc(100vh - 106px); min-height: 0; display: grid; grid-template-columns: 190px minmax(520px, 1fr) 230px; gap: .75rem; padding-top: .75rem; }
.hud { display: flex; flex-direction: column; gap: .75rem; }
.player-card { display: grid; grid-template-columns: 2.5rem 1fr; gap: .75rem; padding: 1rem; border: 1px solid var(--line); border-radius: .6rem; background: var(--panel); opacity: .7; transition: opacity .2s, border-color .2s; }
.player-card.is-current { opacity: 1; }
.player-blue.is-current { border-color: rgba(77, 163, 255, .7); }
.player-red.is-current { border-color: rgba(255, 98, 109, .7); }
.player-sigil { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: 50%; font: 800 1rem system-ui, sans-serif; }
.player-blue .player-sigil { color: #dceeff; background: var(--blue-deep); }
.player-red .player-sigil { color: #ffe6e8; background: var(--red-deep); }
.player-card div { min-width: 0; display: grid; gap: .2rem; }
.player-card small, .player-card span { color: var(--muted); font: 600 .72rem/1.25 system-ui, sans-serif; }
.player-card strong { overflow: hidden; text-overflow: ellipsis; font: 800 .9rem/1.25 system-ui, sans-serif; }
.player-card b { color: var(--ink); font-size: 1rem; }
.player-card .energy-label { margin-top: .25rem; color: #c9ad73; font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; }
.player-card .energy-runes { color: var(--gold); font: 700 .72rem/1 system-ui, sans-serif; letter-spacing: .08em; white-space: nowrap; }
.player-card .energy-count { color: var(--ink); font-size: .67rem; }
.player-card.insight-ready { box-shadow: inset 0 0 0 1px rgba(240,197,109,.35), 0 0 18px rgba(240,197,109,.1); }
.inventory-panel { padding: .75rem; border: 1px solid var(--line); border-radius: .6rem; background: var(--panel); }
.inventory-heading { display: flex; justify-content: space-between; gap: .5rem; align-items: end; margin-bottom: .55rem; }
.inventory-heading .eyebrow { margin: 0 0 .15rem; font-size: .58rem; }
.inventory-heading strong { display: block; max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 .72rem system-ui, sans-serif; }
.inventory-heading > span { color: var(--muted); font: 600 .6rem system-ui, sans-serif; }
.inventory-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; }
.artifact-slot { min-width: 0; min-height: 3.25rem; display: grid; place-items: center; gap: .15rem; padding: .35rem .15rem; color: var(--ink); border: 1px solid #566276; border-radius: .4rem; background: #111a26; cursor: pointer; }
.artifact-slot:hover:not(:disabled) { border-color: var(--gold); background: rgba(240,197,109,.08); }
.artifact-slot:disabled { opacity: .48; cursor: not-allowed; }
.artifact-slot > span { font-size: 1.1rem; }
.artifact-slot small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font: 600 .55rem system-ui, sans-serif; }
.artifact-slot.is-empty { color: #687487; }
.active-effect { margin: .5rem 0 0; color: var(--gold); font: 700 .63rem system-ui, sans-serif; }
.citadel-progress { padding: .7rem .75rem; border: 1px solid rgba(240,197,109,.28); border-radius: .6rem; background: linear-gradient(145deg, rgba(54,45,31,.62), rgba(19,27,39,.96)); font: 600 .65rem/1.25 system-ui, sans-serif; }
.citadel-progress-heading { display: flex; align-items: center; gap: .45rem; margin-bottom: .45rem; color: var(--gold); text-transform: uppercase; letter-spacing: .08em; }
.citadel-progress > div:not(.citadel-progress-heading) { display: flex; justify-content: space-between; gap: .45rem; padding: .2rem 0; color: var(--muted); }
.citadel-progress b { color: var(--ink); white-space: nowrap; }
.citadel-progress p { margin: .4rem 0 0; padding-top: .4rem; color: var(--muted); border-top: 1px solid rgba(240,197,109,.16); text-align: center; }
.citadel-progress p.is-ready { color: var(--gold); font-weight: 800; }
.map-legend { margin-top: auto; padding: 1rem; border-top: 1px solid var(--line); }
.map-legend h2 { margin: 0 0 .8rem; font-size: .8rem; font-family: system-ui, sans-serif; text-transform: uppercase; letter-spacing: .08em; }
.map-legend span { display: flex; align-items: center; gap: .5rem; margin: .55rem 0; color: var(--muted); font: 600 .74rem/1.3 system-ui, sans-serif; }
.legend-dot { width: .65rem; height: .65rem; border-radius: 50%; }
.target-dot { background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.isolated-dot { background: #4b5360; border: 1px dashed #929aa6; }

.map-panel { position: relative; min-width: 0; overflow: hidden; border: 1px solid rgba(157, 168, 183, .18); border-radius: .75rem; background: linear-gradient(rgba(17, 27, 40, .84), rgba(8, 15, 24, .92)), repeating-linear-gradient(0deg, transparent 0 39px, rgba(255,255,255,.025) 40px), repeating-linear-gradient(90deg, transparent 0 39px, rgba(255,255,255,.025) 40px); }
.map-help { position: absolute; top: .8rem; left: 50%; z-index: 5; transform: translateX(-50%); padding: .5rem .75rem; color: var(--muted); border: 1px solid var(--line); border-radius: 2rem; background: rgba(9, 16, 26, .92); font: 700 .72rem system-ui, sans-serif; white-space: nowrap; }
.pulse-dot { display: inline-block; width: .45rem; height: .45rem; margin-right: .45rem; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.map-canvas { position: absolute; inset: 2.2rem .9rem 2.4rem; }
.map-edges, .map-nodes { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-edges { overflow: visible; }
.map-edges line { vector-effect: non-scaling-stroke; stroke: rgba(150, 169, 194, .42); stroke-width: 1.5; stroke-dasharray: 3 2; }
.territory-node { position: absolute; z-index: 2; width: 5rem; min-height: 3.4rem; display: grid; place-items: center; transform: translate(-50%, -50%); padding: .28rem .3rem; border: 1px solid #586475; border-radius: .5rem; color: var(--ink); background: linear-gradient(145deg, #2b3543, #171f2b); box-shadow: 0 8px 18px rgba(0,0,0,.28); cursor: pointer; }
.territory-node:hover:not(:disabled) { z-index: 8; transform: translate(-50%, -50%) scale(1.06); }
.node-icon { position: absolute; top: -.7rem; width: 1.5rem; height: 1.5rem; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; background: #141d29; font: 800 .68rem system-ui, sans-serif; }
.node-id { font: 900 .78rem system-ui, sans-serif; letter-spacing: .07em; }
.node-name { max-width: 100%; min-height: 1.2rem; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: #d7dde5; font: 600 .61rem/1.02 system-ui, sans-serif; }
.node-type { color: var(--muted); font: 500 .53rem system-ui, sans-serif; }
.owner-blue { border-color: var(--blue); background: linear-gradient(145deg, #194e7f, #102841); }
.owner-red { border-color: var(--red); background: linear-gradient(145deg, #793039, #3f1a22); }
.type-academy { width: 6rem; min-height: 4.2rem; border-width: 2px; }
.type-academy .node-icon { width: 2rem; height: 2rem; top: -1rem; }
.type-citadel { width: 5.8rem; min-height: 4.1rem; color: var(--gold); border: 2px double var(--gold); background: linear-gradient(145deg, #3b3428, #1c1a19); cursor: pointer; }
.citadel-node-status { color: #c3b58f; font: 700 .5rem/1.05 system-ui, sans-serif; text-transform: uppercase; letter-spacing: .035em; }
.territory-node.citadel-available { z-index: 9; border-color: #ffe29c; box-shadow: 0 0 0 4px rgba(240,197,109,.16), 0 0 38px rgba(240,197,109,.5); background: linear-gradient(145deg, #66512d, #2b241b); }
.territory-node.citadel-available .citadel-node-status { color: #fff0c5; }
.territory-node.is-available { z-index: 6; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(240,197,109,.16), 0 0 26px rgba(240,197,109,.24); }
.territory-node.is-artifact-target { z-index: 7; border-color: #92e5cf; box-shadow: 0 0 0 3px rgba(84,211,155,.14), 0 0 26px rgba(84,211,155,.22); }
.territory-node.is-selected { transform: translate(-50%, -50%) scale(1.12); box-shadow: 0 0 0 4px rgba(240,197,109,.28), 0 0 35px rgba(240,197,109,.34); }
.territory-node.is-isolated { opacity: .62; filter: saturate(.68); border-style: dashed; }
.territory-node.owner-blue.is-isolated { border-color: #68aff4; background: linear-gradient(145deg, #17436b, #10273d); }
.territory-node.owner-red.is-isolated { border-color: #eb7079; background: linear-gradient(145deg, #693039, #3b1b21); }
.lost-link { position: absolute; left: 50%; top: calc(100% + .25rem); min-width: 7.5rem; transform: translateX(-50%); padding: .2rem; border-radius: .2rem; color: #f2d8a6; background: rgba(9,16,26,.9); font: 700 .52rem system-ui, sans-serif; }
.shield-marker { position: absolute; z-index: 9; right: -.48rem; top: -.62rem; display: grid; place-items: center; width: 1.55rem; height: 1.55rem; border: 1px solid #9ed6ff; border-radius: 50%; background: #10273d; font-size: .78rem; box-shadow: 0 0 14px rgba(77,163,255,.42); }
.citadel-note { position: absolute; bottom: .55rem; left: 50%; transform: translateX(-50%); margin: 0; color: #9f967f; font: 600 .68rem system-ui, sans-serif; white-space: nowrap; }
.citadel-note.is-ready { color: var(--gold); font-weight: 800; }

.territory-panel { align-self: start; min-height: 280px; padding: 1.25rem; }
.empty-selection { height: 255px; display: grid; place-content: center; text-align: center; }
.empty-selection > span { color: var(--gold); font-size: 2rem; }
.empty-selection h2 { margin: .7rem 0; font-size: 1.25rem; font-weight: 500; }
.empty-selection p { margin: 0; color: var(--muted); font: 500 .82rem/1.55 system-ui, sans-serif; }
.selection-heading { display: flex; gap: .8rem; align-items: center; }
.selection-heading h2 { margin: 0; font-size: 1.35rem; font-weight: 500; }
.selection-icon { flex: 0 0 auto; width: 2.4rem; height: 2.4rem; display: grid; place-items: center; color: var(--gold); border: 1px solid currentColor; border-radius: 50%; }
.territory-details { margin: 1.2rem 0; }
.territory-details div { display: flex; justify-content: space-between; gap: 1rem; padding: .65rem 0; border-bottom: 1px solid rgba(157,168,183,.14); }
.territory-details dt { color: var(--muted); font: 600 .74rem system-ui, sans-serif; }
.territory-details dd { margin: 0; text-align: right; font: 700 .78rem system-ui, sans-serif; }
.territory-details .stars { color: var(--gold); letter-spacing: .09em; }
.attack-difficulty { color: var(--gold); }
.territory-details .influence-value { margin: .15rem -.45rem; padding: .65rem .45rem; border: 1px solid rgba(240,197,109,.22); border-radius: .35rem; background: rgba(240,197,109,.06); }
.influence-value dd { color: var(--gold); font-size: .95rem; }
.pvp-note { margin: -.35rem 0 1rem; color: #e5c783; font: 600 .72rem/1.45 system-ui, sans-serif; }
.territory-panel .button { width: 100%; }
.artifact-target-prompt { min-height: 255px; display: grid; place-content: center; text-align: center; }
.artifact-target-prompt > span { margin-bottom: .6rem; font-size: 2.2rem; }
.artifact-target-prompt h2 { margin: 0 0 .7rem; font-size: 1.35rem; font-weight: 500; }
.artifact-target-prompt p:not(.eyebrow) { margin: 0 0 1rem; color: var(--muted); font: 500 .78rem/1.5 system-ui, sans-serif; }
.game-screen.is-locked .map-help { color: #d1ba84; border-color: rgba(240,197,109,.35); }

.debug-panel { position: fixed; z-index: 20; left: 1.5rem; bottom: 1rem; width: 300px; border: 1px solid var(--line); border-radius: .45rem; background: rgba(9, 16, 26, .97); box-shadow: var(--shadow); font: 600 .75rem system-ui, sans-serif; }
.debug-panel summary { padding: .65rem .8rem; cursor: pointer; color: var(--muted); }
.debug-panel pre { max-height: 260px; overflow: auto; margin: 0; padding: .8rem; color: #b8c5d5; border-top: 1px solid var(--line); font: 500 .68rem/1.45 ui-monospace, monospace; white-space: pre-wrap; }
.debug-panel .button { width: calc(100% - 1.6rem); margin: 0 .8rem .8rem; }
.modal-backdrop { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 2rem; background: rgba(3, 7, 12, .78); backdrop-filter: blur(7px); }
.question-modal { width: min(680px, 92vw); padding: 2rem; }
.citadel-question-progress { margin: -2rem -2rem 1.25rem; padding: .9rem 2rem; border-bottom: 1px solid rgba(240,197,109,.25); border-radius: .75rem .75rem 0 0; background: linear-gradient(90deg, rgba(92,68,31,.3), rgba(25,35,50,.2)); text-align: center; }
.citadel-question-progress .eyebrow { margin-bottom: .25rem; }
.citadel-question-progress strong { display: block; margin-bottom: .45rem; font: 800 .82rem system-ui, sans-serif; }
.citadel-question-progress div { display: flex; justify-content: center; gap: .65rem; color: var(--gold); font: 700 .78rem system-ui, sans-serif; }
.citadel-question-progress div span { color: #687487; }
.question-meta { display: flex; justify-content: space-between; color: var(--gold); font: 800 .78rem system-ui, sans-serif; text-transform: uppercase; letter-spacing: .1em; }
.question-modal h2 { margin: 1rem 0 1.4rem; font-size: 1.75rem; font-weight: 500; line-height: 1.25; }
.question-modal fieldset { display: grid; gap: .65rem; margin: 0 0 1.2rem; padding: 0; border: 0; }
.answer-option { display: grid; grid-template-columns: 2rem 1fr; gap: .75rem; align-items: center; padding: .8rem; border: 1px solid var(--line); border-radius: .45rem; color: #d9dfe7; background: rgba(255,255,255,.025); cursor: pointer; font: 600 .9rem/1.35 system-ui, sans-serif; }
.answer-option:hover, .answer-option.is-chosen { border-color: var(--gold); background: rgba(240,197,109,.08); }
.answer-option.is-eliminated { display: none; }
.answer-option input { position: absolute; opacity: 0; pointer-events: none; }
.answer-letter { width: 2rem; height: 2rem; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--gold); }
.question-modal .button { width: 100%; }
.question-modal .artifact-action { margin-bottom: .65rem; color: #ffe0a0; border-color: rgba(240,197,109,.45); background: rgba(240,197,109,.07); }
.question-result { text-align: center; }
.result-mark { width: 4rem; height: 4rem; display: grid; place-items: center; margin: .5rem auto 1rem; border: 2px solid currentColor; border-radius: 50%; font: 500 2.5rem system-ui, sans-serif; }
.question-result.correct { color: var(--green); }
.question-result.incorrect { color: var(--danger); }
.question-result h3 { margin: 0 0 1rem; font-size: 2rem; }
.question-result p { color: #d4dbe4; font: 500 .9rem/1.55 system-ui, sans-serif; }
.question-result .energy-gain { color: var(--gold); font-weight: 800; }
.question-result .button { margin-top: 1rem; }
.tiebreaker-modal { width: min(520px, 92vw); padding: 2.25rem; text-align: center; }
.tiebreaker-mark { width: 4rem; height: 4rem; display: grid; place-items: center; margin: 0 auto 1.1rem; color: var(--gold); border: 1px solid rgba(240,197,109,.65); border-radius: 50%; font-size: 1.65rem; }
.tiebreaker-modal h2 { margin: 0 0 .8rem; font-size: 2rem; font-weight: 500; }
.tiebreaker-modal p { margin: 0 0 1.4rem; color: var(--muted); font: 500 .9rem/1.55 system-ui, sans-serif; }
.tiebreaker-modal .button { width: 100%; }
.choice-modal { width: min(520px, 92vw); padding: 2.1rem; text-align: center; }
.choice-mark { width: 4rem; height: 4rem; display: grid; place-items: center; margin: 0 auto 1rem; color: var(--gold); border: 1px solid rgba(240,197,109,.55); border-radius: 50%; font-size: 1.65rem; }
.choice-modal h2 { margin: 0 0 .65rem; font-size: 1.85rem; font-weight: 500; }
.choice-modal > p:not(.eyebrow) { margin: 0 0 1.15rem; color: var(--muted); font: 500 .88rem/1.5 system-ui, sans-serif; }
.choice-modal .button { width: 100%; }
.citadel-dialog { border-color: rgba(240,197,109,.48); box-shadow: 0 18px 70px rgba(0,0,0,.5), inset 0 0 40px rgba(240,197,109,.035); }
.replace-options { display: grid; gap: .5rem; margin: 1rem 0; }
.artifact-replace { display: flex; align-items: center; gap: .75rem; padding: .7rem .85rem; color: var(--ink); border: 1px solid var(--line); border-radius: .4rem; background: rgba(255,255,255,.025); cursor: pointer; font: 700 .8rem system-ui, sans-serif; }
.artifact-replace:hover { border-color: var(--gold); }
.artifact-replace span:first-child { font-size: 1.15rem; }
.scout-details { margin: 1rem 0 1.25rem; text-align: left; }
.scout-details div { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-top: 1px solid rgba(157,168,183,.14); }
.scout-details dt { color: var(--muted); font: 600 .78rem system-ui, sans-serif; }
.scout-details dd { margin: 0; font: 800 .8rem system-ui, sans-serif; }
.scout-details .stars { color: var(--gold); }

.results-screen { display: block; padding: 2rem; }
.results-panel { width: min(1180px, 94vw); margin: 0 auto; padding: 2.25rem; text-align: center; }
.result-crest { width: 4rem; height: 4rem; display: grid; place-items: center; margin: 0 auto 1rem; color: var(--gold); border: 1px solid rgba(240,197,109,.55); border-radius: 50%; font-size: 1.8rem; }
#results-title { margin: 0; font-size: 1rem; color: var(--muted); font-family: system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.winner-kicker { margin: 1.1rem 0 .25rem; color: var(--muted); font: 700 .72rem system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.winner-name { margin: 0 0 .35rem; font-size: 2.35rem; line-height: 1.08; }
.victory-label { margin: 0 0 1.4rem; color: var(--gold); font: 800 .85rem/1.3 system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.citadel-result-score { width: fit-content; margin: -.65rem auto 1.25rem; padding: .55rem .85rem; color: #fff0c5; border: 1px solid rgba(240,197,109,.35); border-radius: 2rem; background: rgba(240,197,109,.07); font: 800 .78rem system-ui, sans-serif; }
.results-comparison { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 1rem; text-align: left; }
.result-player { padding: 1.25rem; border: 1px solid var(--line); border-radius: .65rem; background: rgba(255,255,255,.025); }
.result-player.player-blue { border-left: 3px solid var(--blue); }
.result-player.player-red { border-left: 3px solid var(--red); }
.result-player.is-winner { box-shadow: inset 0 0 0 1px rgba(240,197,109,.42); }
.result-player-header { display: flex; align-items: start; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; }
.result-player-header small { color: var(--muted); font: 700 .68rem system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.result-player h2 { margin: .18rem 0 0; color: var(--ink); font-size: 1.3rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.winner-badge { padding: .35rem .55rem; color: #fff0c5; border: 1px solid rgba(240,197,109,.38); border-radius: 2rem; background: rgba(240,197,109,.08); font: 800 .65rem system-ui, sans-serif; }
.result-highlights { display: grid; grid-template-columns: repeat(4, 1fr); gap: .45rem; margin-bottom: .9rem; }
.result-highlights div { padding: .65rem .45rem; border: 1px solid rgba(157,168,183,.13); border-radius: .4rem; background: rgba(255,255,255,.018); text-align: center; }
.result-highlights span { display: block; min-height: 1.8em; color: var(--muted); font: 600 .62rem/1.3 system-ui, sans-serif; }
.result-highlights strong { display: block; margin-top: .18rem; color: var(--ink); font: 800 .9rem system-ui, sans-serif; }
.result-player dl { margin: 0; }
.result-player dl div { display: flex; justify-content: space-between; gap: 1rem; padding: .42rem 0; border-top: 1px solid rgba(157,168,183,.12); }
.result-player dt { color: var(--muted); font: 600 .75rem system-ui, sans-serif; }
.result-player dd { margin: 0; font: 800 .78rem system-ui, sans-serif; }
.player-citadel-result { margin: .75rem 0 0; padding: .55rem .7rem; color: #fff0c5; border: 1px solid rgba(240,197,109,.2); border-radius: .4rem; background: rgba(240,197,109,.05); font: 800 .72rem system-ui, sans-serif; }
.learning-section, .achievement-section { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid rgba(157,168,183,.16); }
.learning-section h3, .achievement-section h3 { margin: 0 0 .65rem; color: var(--ink); font: 800 .74rem system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.stat-list > div, .type-results > div { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .33rem 0; font: 600 .72rem/1.35 system-ui, sans-serif; }
.stat-list span, .type-results span { color: #c6cfdb; }
.stat-list strong, .type-results strong { color: var(--ink); white-space: nowrap; }
.learning-insights { margin-top: .65rem; padding: .6rem .7rem; border-radius: .4rem; background: rgba(77,163,255,.045); }
.learning-insights p { margin: .22rem 0; color: #dce4ee; font: 500 .7rem/1.45 system-ui, sans-serif; text-wrap: pretty; }
.type-results { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1rem; }
.achievement-list { display: grid; gap: .45rem; }
.achievement { display: flex; gap: .7rem; padding: .65rem .7rem; border: 1px solid rgba(240,197,109,.16); border-radius: .4rem; background: rgba(240,197,109,.04); }
.achievement > span { font-size: 1.15rem; }
.achievement strong { font: 800 .74rem system-ui, sans-serif; }
.achievement p, .no-achievements { margin: .15rem 0 0; color: var(--muted); font: 500 .68rem/1.4 system-ui, sans-serif; text-wrap: pretty; }
.results-actions { display: flex; justify-content: center; gap: .75rem; margin-top: 1.35rem; }
.results-actions .button { min-width: 12rem; }
.toast { position: fixed; z-index: 200; left: 50%; bottom: 2rem; transform: translateX(-50%); padding: .8rem 1rem; color: var(--ink); border: 1px solid var(--gold); border-radius: .4rem; background: #18202c; box-shadow: var(--shadow); font: 700 .8rem system-ui, sans-serif; }
@media (max-height: 800px) {
  .game-screen { padding-top: .65rem; padding-bottom: .65rem; }
  .game-header { height: 62px; }
  .game-layout { height: calc(100vh - 84px); gap: .55rem; padding-top: .55rem; }
  .hud { gap: .45rem; }
  .player-card { grid-template-columns: 2rem 1fr; gap: .55rem; padding: .65rem .7rem; }
  .player-sigil { width: 2rem; height: 2rem; font-size: .82rem; }
  .player-card div { gap: .08rem; }
  .player-card small, .player-card span { font-size: .65rem; }
  .player-card strong { font-size: .8rem; }
  .player-card .energy-label { margin-top: .1rem; font-size: .57rem; }
  .player-card .energy-runes { font-size: .65rem; }
  .inventory-panel { padding: .55rem; }
  .inventory-heading { margin-bottom: .35rem; }
  .artifact-slot { min-height: 2.65rem; }
  .citadel-progress { padding: .5rem .6rem; font-size: .6rem; }
  .citadel-progress-heading { margin-bottom: .25rem; }
  .citadel-progress p { margin-top: .25rem; padding-top: .25rem; }
  .map-legend { padding: .55rem .8rem; }
  .map-legend h2 { margin-bottom: .35rem; font-size: .7rem; }
  .map-legend span { margin: .3rem 0; font-size: .65rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .territory-node.is-available { animation: target-pulse 1.8s ease-in-out infinite; }
  .territory-node.citadel-available { animation: citadel-pulse 1.8s ease-in-out infinite; }
  @keyframes target-pulse { 50% { box-shadow: 0 0 0 5px rgba(240,197,109,.08), 0 0 32px rgba(240,197,109,.32); } }
  @keyframes citadel-pulse { 50% { box-shadow: 0 0 0 7px rgba(240,197,109,.08), 0 0 48px rgba(240,197,109,.64); } }
}

/* Stage 4 — layered strategic map */
.map-panel {
  --road-color: #c4a36a;
  --road-active: #f2cf79;
  background: #25352c;
}

.map-panel::before { opacity: .18; }

.map-root,
.map-canvas {
  position: absolute;
  inset: auto auto auto 26px;
  top: 50%;
  width: calc(100% - 52px);
  height: auto;
  max-width: none;
  max-height: none;
  aspect-ratio: 16 / 9;
  margin: 0;
  transform: translateY(-50%);
  overflow: visible;
  isolation: isolate;
}

.map-background {
  z-index: 0;
  border: 1px solid rgba(212, 186, 126, .24);
  border-radius: 3px;
  box-shadow: inset 0 0 38px rgba(17, 27, 20, .64);
}

.map-roads line {
  vector-effect: non-scaling-stroke;
  stroke: var(--road-color);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: none;
  opacity: .72;
  filter: drop-shadow(0 1px 0 #49351f) drop-shadow(0 -1px 0 #49351f) drop-shadow(1px 0 0 #49351f) drop-shadow(-1px 0 0 #49351f);
  transition: stroke .18s ease, opacity .18s ease, filter .18s ease;
}

.map-roads line.is-active-road {
  stroke: var(--road-active);
  stroke-width: 7;
  opacity: .96;
  filter: drop-shadow(0 1px 0 #584020) drop-shadow(0 0 5px rgba(255, 220, 132, .85));
}

.territory-node,
.territory-node.type-academy,
.territory-node.type-citadel {
  --sprite-size: clamp(74px, 5.4vw, 100px);
  z-index: 3;
  width: clamp(54px, 4.2vw, 72px);
  height: clamp(54px, 4.2vw, 72px);
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #f6ecd4;
  background: transparent;
  box-shadow: none;
  cursor: default;
  isolation: isolate;
}

.territory-node.visual-gate,
.territory-node.visual-fort {
  --sprite-size: clamp(90px, 7vw, 120px);
  width: clamp(64px, 4.8vw, 82px);
  height: clamp(64px, 4.8vw, 82px);
}

.territory-node.visual-academy,
.territory-node.type-academy {
  --sprite-size: clamp(110px, 8.2vw, 140px);
  width: clamp(76px, 5.7vw, 98px);
  height: clamp(76px, 5.7vw, 98px);
}

.territory-node.visual-citadel,
.territory-node.type-citadel {
  --sprite-size: clamp(140px, 10.5vw, 180px);
  z-index: 7;
  width: clamp(96px, 7.4vw, 126px);
  height: clamp(88px, 6.7vw, 116px);
}

.territory-node::before,
.territory-node.type-academy::before,
.territory-node.type-citadel::before { display: none; }

.territory-node:hover:not(:disabled),
.territory-node:focus-visible,
.territory-node.is-selected {
  z-index: 12;
  transform: translate(-50%, -50%) scale(1.045);
}

.territory-node:focus-visible {
  outline: 2px solid #ffdda0;
  outline-offset: 4px;
}

.territory-node.is-available,
.territory-node.is-artifact-target,
.territory-node.citadel-available,
.territory-node.is-citadel-ready {
  cursor: pointer;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.node-sprite-shell {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: var(--sprite-size);
  height: var(--sprite-size);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.node-sprite-shell::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 8%;
  z-index: -1;
  width: 72%;
  height: 18%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(20, 29, 21, .42);
  filter: blur(4px);
}

.building-sprite {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 7px 5px rgba(16, 24, 18, .48));
  transition: filter .2s ease, opacity .2s ease, transform .2s ease;
}

.territory-node .node-icon {
  display: none;
  inset: 50% auto auto 50%;
  width: 58%;
  height: 58%;
  transform: translate(-50%, -50%);
  border: 1px solid #b9aa7c;
  border-radius: 14px;
  color: #f2d68f;
  background: linear-gradient(145deg, #676551, #303b32);
  font-size: clamp(22px, 2.2vw, 34px);
}

.territory-node.is-sprite-fallback .building-sprite { display: none; }
.territory-node.is-sprite-fallback .node-icon { display: grid; }

.node-caption {
  position: absolute;
  left: 50%;
  top: calc(100% - 4px);
  z-index: 6;
  width: clamp(82px, 7vw, 118px);
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 1px;
  pointer-events: none;
}

.visual-citadel .node-caption { top: calc(100% - 12px); width: clamp(118px, 9vw, 154px); }
.visual-academy .node-caption { top: calc(100% - 4px); }

.territory-node .node-name {
  width: auto;
  max-width: 100%;
  min-height: 0;
  display: block;
  overflow: visible;
  padding: 3px 6px 2px;
  color: #fff5d6;
  border: 1px solid rgba(216, 190, 125, .38);
  border-radius: 3px;
  background: rgba(32, 34, 25, .9);
  box-shadow: 0 2px 5px rgba(14, 19, 14, .5);
  font: 750 clamp(8px, .72vw, 11px)/1.1 system-ui, sans-serif;
  text-shadow: 0 1px 2px #111;
  white-space: nowrap;
}

.territory-node .node-type {
  display: none;
}

.territory-node .citadel-node-status {
  padding: 2px 5px;
  color: #d7c89e;
  border-radius: 2px;
  background: rgba(42, 39, 26, .86);
  font: 800 clamp(7px, .55vw, 9px)/1 system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.owner-banner {
  position: absolute;
  left: 74%;
  right: auto;
  top: -14%;
  z-index: 8;
  width: clamp(17px, 1.45vw, 25px);
  height: clamp(24px, 2vw, 34px);
  border-left: 3px solid #d8c28e;
  color: transparent;
  pointer-events: none;
}

.owner-banner i {
  position: absolute;
  left: 1px;
  top: 2px;
  width: 100%;
  height: 62%;
  clip-path: polygon(0 0, 100% 12%, 76% 52%, 100% 92%, 0 80%);
  background: #7c786c;
  box-shadow: 0 1px 3px rgba(0,0,0,.45);
}

.territory-node.is-owned-blue .owner-banner i { background: linear-gradient(135deg, #69aee4, #224f82); }
.territory-node.is-owned-red .owner-banner i { background: linear-gradient(135deg, #c35e4d, #6b241f); }

.territory-node.is-available .node-sprite-shell::after,
.territory-node.is-artifact-target .node-sprite-shell::after,
.territory-node.is-citadel-ready .node-sprite-shell::after {
  content: "";
  position: absolute;
  inset: 7%;
  z-index: -1;
  border: 2px solid rgba(255, 221, 139, .78);
  border-radius: 50%;
  box-shadow: 0 0 10px #eac66e, inset 0 0 10px rgba(250, 214, 123, .35);
}

.territory-node.is-available .building-sprite,
.territory-node.is-artifact-target .building-sprite { filter: brightness(1.12) drop-shadow(0 0 8px rgba(248, 208, 112, .76)) drop-shadow(0 7px 5px rgba(16, 24, 18, .48)); }

.territory-node.is-isolated {
  opacity: 1;
  filter: none;
  border: 0;
  background: transparent;
}

.territory-node.is-isolated .building-sprite { opacity: .66; filter: grayscale(.25) saturate(.58) drop-shadow(0 7px 5px rgba(16, 24, 18, .48)); }
.territory-node.is-isolated .owner-banner { opacity: .82; }

.lost-link {
  left: auto;
  right: -8px;
  top: -5px;
  z-index: 10;
  min-width: 0;
  width: 24px;
  height: 24px;
  transform: none;
  padding: 0;
  border: 1px solid #cec7b0;
  border-radius: 50%;
  color: #ece5cf;
  background: rgba(53, 58, 51, .94);
  font: 900 17px/22px system-ui, sans-serif;
  text-align: center;
  box-shadow: 0 0 0 3px rgba(107, 112, 103, .22);
}

.lost-link span { display: none; }
.lost-link b { text-decoration: line-through; }

.shield-marker {
  right: -7px;
  top: 19px;
  z-index: 11;
  width: 27px;
  height: 27px;
  border-color: #a9dfff;
  background: #173d5c;
  box-shadow: 0 0 13px rgba(91, 181, 241, .65);
}

.territory-node.is-citadel-ready .node-sprite-shell::after {
  inset: -2%;
  border-color: #ffe5a3;
  box-shadow: 0 0 18px #f5cc6c, 0 0 42px rgba(255, 214, 102, .72), inset 0 0 20px rgba(255, 229, 152, .42);
}

.territory-node.is-citadel-ready .building-sprite {
  filter: brightness(1.2) saturate(1.1) drop-shadow(0 0 12px rgba(255, 216, 111, .9)) drop-shadow(0 9px 7px rgba(16, 24, 18, .5));
}

.territory-node:disabled:not(.is-isolated):not(.type-academy):not(.type-citadel) .building-sprite { filter: saturate(.8) brightness(.88) drop-shadow(0 7px 5px rgba(16, 24, 18, .4)); }

@media (prefers-reduced-motion: no-preference) {
  .territory-node.is-available .node-sprite-shell::after,
  .territory-node.is-artifact-target .node-sprite-shell::after { animation: map-target-pulse 1.9s ease-in-out infinite; }
  .territory-node.is-citadel-ready .node-sprite-shell::after { animation: citadel-map-pulse 2.3s ease-in-out infinite; }
  @keyframes map-target-pulse { 0%, 100% { opacity: .55; transform: scale(.91); } 50% { opacity: 1; transform: scale(1.05); } }
  @keyframes citadel-map-pulse { 0%, 100% { opacity: .62; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.08); } }
}

/* Sprint 6 — battle screen: illuminated cartographer's table */
.game-screen {
  --frame: #b68a43;
  --frame-dark: #5f4023;
  --parchment: #b9ad7d;
  --forest: #334d34;
  --forest-dark: #1c3024;
  height: 100vh;
  padding: 8px 12px 10px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(20, 9, 4, .93), rgba(45, 26, 13, .86) 36%, rgba(17, 9, 5, .95)),
    repeating-linear-gradient(7deg, #2a160b 0 4px, #3a2212 5px 10px);
}

.battle-topbar {
  height: 102px;
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(330px, .9fr) minmax(280px, 1fr);
  align-items: stretch;
  gap: 10px;
  border: 0;
}

.top-academy-card {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: 50px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  opacity: .76;
  border: 1px solid rgba(196, 157, 89, .35);
  border-radius: 3px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.045), transparent 35%),
    linear-gradient(180deg, #202723, #111813);
  box-shadow: inset 0 0 0 3px rgba(0,0,0,.24), 0 5px 16px rgba(0,0,0,.35);
  transition: opacity .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.top-academy-card::after {
  content: "";
  position: absolute;
  inset: 5px;
  pointer-events: none;
  border: 1px solid rgba(255,255,255,.045);
}

.top-academy-card.is-current {
  opacity: 1;
  border-color: var(--frame);
  box-shadow: inset 0 0 0 3px rgba(0,0,0,.28), 0 0 22px rgba(207, 165, 81, .18);
}

.top-academy-card.player-blue { border-left: 4px solid #79a9d2; }
.top-academy-card.player-red { grid-template-columns: auto 1fr 50px; border-right: 4px solid #aa5d4e; }
.top-academy-card.player-blue .player-sigil { grid-column: 1; grid-row: 1; }
.top-academy-card.player-blue .academy-copy { grid-column: 2; grid-row: 1; }
.top-academy-card.player-blue .turn-standard { grid-column: 3; grid-row: 1; }
.top-academy-card.player-red .turn-standard { grid-column: 1; grid-row: 1; }
.top-academy-card.player-red .academy-copy { grid-column: 2; grid-row: 1; }
.top-academy-card.player-red .player-sigil { grid-column: 3; grid-row: 1; }
.top-academy-card.player-blue.is-current { box-shadow: inset 0 0 26px rgba(55, 118, 174, .2), 0 0 22px rgba(87, 150, 203, .22); }
.top-academy-card.player-red.is-current { box-shadow: inset 0 0 26px rgba(145, 58, 43, .22), 0 0 22px rgba(168, 82, 60, .22); }
.top-academy-card .player-sigil {
  width: 46px;
  height: 56px;
  border: 1px solid currentColor;
  border-radius: 3px 3px 14px 14px;
  background: linear-gradient(160deg, rgba(255,255,255,.18), transparent 45%), currentColor;
  color: #477eae;
  font-size: 22px;
  text-shadow: 0 1px #09111a;
  box-shadow: inset 0 -10px 18px rgba(0,0,0,.34);
}
.top-academy-card.player-red .player-sigil { color: #8b3c34; transform: scaleX(-1); }
.academy-copy { min-width: 0; display: grid; gap: 3px; }
.academy-copy small { color: #bfc5bf; font: 700 12px/1.2 system-ui, sans-serif; letter-spacing: .09em; text-transform: uppercase; }
.academy-copy strong { overflow: hidden; color: #fff8e9; font: 600 clamp(17px, 1.4vw, 22px)/1.1 Georgia, serif; text-overflow: ellipsis; white-space: nowrap; }
.academy-metrics { display: flex; align-items: center; gap: 6px; color: #b8b4a5; font: 600 13px/1.2 system-ui, sans-serif; }
.academy-metrics b { color: #f2d592; font-size: 15px; }
.academy-metrics i { width: 1px; height: 13px; margin: 0 4px; background: rgba(211,185,126,.3); }
.academy-energy-mini, .academy-energy-count { display: none; }
.turn-standard {
  display: none;
  align-items: center;
  padding: 5px 7px;
  color: #f8ddb0;
  border: 1px solid rgba(215,178,106,.45);
  background: rgba(136,99,43,.2);
  font: 800 11px/1 system-ui, sans-serif;
  letter-spacing: .08em;
  white-space: nowrap;
}
.top-academy-card.is-current .turn-standard { display: inline-flex; }

.battle-title {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  text-align: center;
  border: 1px solid rgba(193,151,76,.58);
  border-radius: 3px;
  background: linear-gradient(180deg, #34291d, #171511 76%);
  box-shadow: inset 0 0 0 4px rgba(104,71,33,.3), 0 5px 18px rgba(0,0,0,.38);
}
.title-ornament { color: #dbb868; font-size: 22px; filter: drop-shadow(0 0 7px rgba(222,181,93,.32)); }
.battle-title h1 { margin: 0; color: #f4dfad; font-size: clamp(20px, 1.75vw, 28px); font-weight: 500; letter-spacing: .055em; text-transform: uppercase; }
.battle-title p { margin: 3px 0 0; color: #aaa18c; font: 700 11px/1.2 system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.round-seal { min-width: 76px; padding: 7px 8px; color: #d7c59d; border-left: 1px solid rgba(201,163,91,.3); font: 700 12px/1.2 system-ui, sans-serif; text-transform: uppercase; }
.round-seal strong { color: #fff0c5; font-size: 20px; }

.game-layout {
  height: calc(100vh - 120px);
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(294px, 22.5vw, 380px);
  gap: 10px;
  padding-top: 8px;
}
.map-column { min-width: 0; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) 40px; gap: 7px; }
.map-panel {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border: 2px solid #70502b;
  border-radius: 4px;
  background:
    radial-gradient(circle at 17% 36%, rgba(78,104,52,.5), transparent 20%),
    radial-gradient(circle at 80% 28%, rgba(69,96,51,.44), transparent 22%),
    radial-gradient(circle at 58% 74%, rgba(119,105,55,.35), transparent 24%),
    linear-gradient(135deg, rgba(223,205,145,.16), transparent 42%),
    #526443;
  box-shadow: inset 0 0 0 4px #2a1b0e, inset 0 0 55px rgba(12,23,14,.65), 0 7px 20px rgba(0,0,0,.35);
}
.map-panel::before {
  content: "";
  position: absolute;
  inset: 5px;
  z-index: 0;
  pointer-events: none;
  opacity: .42;
  background:
    repeating-radial-gradient(ellipse at 28% 34%, transparent 0 12px, rgba(227,213,155,.07) 13px 14px, transparent 15px 27px),
    repeating-linear-gradient(112deg, transparent 0 43px, rgba(31,48,26,.12) 44px 45px);
  mix-blend-mode: soft-light;
}
.map-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  box-shadow: inset 0 0 70px rgba(17,20,10,.75);
}
.map-frame-corner { position: absolute; z-index: 12; width: 22px; height: 22px; border-color: #d0a355; pointer-events: none; }
.corner-nw { top: 7px; left: 7px; border-top: 2px solid; border-left: 2px solid; }
.corner-ne { top: 7px; right: 7px; border-top: 2px solid; border-right: 2px solid; }
.corner-sw { bottom: 7px; left: 7px; border-bottom: 2px solid; border-left: 2px solid; }
.corner-se { right: 7px; bottom: 7px; border-right: 2px solid; border-bottom: 2px solid; }
.map-terrain { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .72; }
.terrain-mark { position: absolute; display: block; }
.terrain-mark.mountains { width: 24%; height: 17%; background: repeating-linear-gradient(128deg, transparent 0 18px, rgba(35,45,28,.55) 19px 25px, transparent 26px 42px); clip-path: polygon(0 100%, 10% 38%, 21% 100%, 35% 20%, 49% 100%, 64% 44%, 77% 100%, 88% 28%, 100% 100%); }
.terrain-mark.north { top: 3%; left: 50%; }
.terrain-mark.forest { width: 16%; height: 24%; border-radius: 45%; background: radial-gradient(circle at 30% 30%, #263f27 0 7%, transparent 8%), radial-gradient(circle at 64% 45%, #233923 0 8%, transparent 9%), radial-gradient(circle at 44% 72%, #1d3522 0 9%, transparent 10%); background-size: 33px 38px; }
.terrain-mark.forest.west { left: 2%; top: 49%; }
.terrain-mark.forest.east { right: 0; top: 30%; }
.terrain-mark.river { left: 43%; top: -8%; width: 8%; height: 120%; opacity: .55; border-left: 8px double rgba(123,163,168,.45); transform: rotate(10deg); filter: blur(.25px); }
.terrain-mark.ruins { right: 19%; bottom: 2%; width: 14%; height: 10%; border: 5px double rgba(155,139,92,.24); border-top: 0; transform: rotate(-8deg); }
.map-help { top: 10px; z-index: 15; padding: 7px 13px; color: #ead9b4; border-color: rgba(206,167,96,.42); border-radius: 3px; background: rgba(29,27,18,.9); font-size: 12px; box-shadow: 0 4px 12px rgba(0,0,0,.28); }
.map-canvas { inset: auto; z-index: 3; }
.map-root {
  position: relative;
  width: calc(100% - 24px);
  max-height: calc(100% - 46px);
  aspect-ratio: 16 / 9;
  margin: 30px auto 16px;
  overflow: visible;
  isolation: isolate;
}
.map-layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-background { z-index: 0; display: block; object-fit: cover; border-radius: 2px; filter: saturate(.9) contrast(1.03); }
.map-road-art {
  z-index: 1;
  display: block;
  object-fit: fill;
  pointer-events: none;
  filter: saturate(.83) contrast(.94) brightness(.96);
}
.map-roads { z-index: 1; overflow: visible; pointer-events: none; }
.map-decor { z-index: 2; overflow: hidden; pointer-events: none; }
.map-decor, .map-decor * { pointer-events: none !important; }
.map-nodes { z-index: 3; pointer-events: none; }
.map-nodes > .territory-node { pointer-events: auto; }
.map-effects { z-index: 5; pointer-events: none; }
.decor-cluster { position: absolute; display: block; opacity: .5; filter: drop-shadow(0 5px 5px rgba(20,28,19,.35)); }
.decor-pines-west { left: 2%; top: 51%; width: 12%; height: 24%; background: repeating-linear-gradient(118deg, transparent 0 16px, rgba(24,53,34,.9) 17px 25px, transparent 26px 38px); clip-path: polygon(0 100%, 8% 44%, 17% 100%, 28% 25%, 39% 100%, 52% 37%, 65% 100%, 78% 20%, 91% 100%); }
.decor-pines-east { right: 1%; top: 22%; width: 12%; height: 22%; background: repeating-linear-gradient(118deg, transparent 0 16px, rgba(24,53,34,.9) 17px 25px, transparent 26px 38px); clip-path: polygon(0 100%, 8% 44%, 17% 100%, 28% 25%, 39% 100%, 52% 37%, 65% 100%, 78% 20%, 91% 100%); }
.decor-stones-north { left: 56%; top: 3%; width: 14%; height: 11%; border-radius: 65% 35% 55% 45%; background: radial-gradient(ellipse at 30% 65%, #485044 0 22%, transparent 23%), radial-gradient(ellipse at 66% 42%, #626855 0 18%, transparent 19%), radial-gradient(ellipse at 82% 75%, #39443a 0 20%, transparent 21%); }
.decor-ruins-south { right: 18%; bottom: 3%; width: 9%; height: 8%; border: 5px double rgba(91,79,53,.5); border-top: 0; transform: rotate(-8deg); }
.map-edges line { vector-effect: non-scaling-stroke; stroke: rgba(82,61,34,.92); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1 5; filter: drop-shadow(0 1px 0 rgba(226,203,139,.24)); }
.map-edges line.is-active-road { stroke: #d5b262; stroke-width: 5; filter: drop-shadow(0 0 3px rgba(255,213,116,.62)); }
.territory-node {
  width: 70px;
  min-height: 52px;
  padding: 17px 5px 5px;
  color: #f4ead0;
  border: 1px solid #7c6847;
  border-radius: 50% 50% 8px 8px;
  background: linear-gradient(155deg, #756b51, #3b3b2f 54%, #22271f);
  box-shadow: 0 7px 9px rgba(15,20,11,.45), inset 0 0 0 2px rgba(220,199,141,.08);
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}
.territory-node::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -12px;
  width: 36px;
  height: 27px;
  transform: translateX(-50%);
  border: 1px solid #80704e;
  border-radius: 13px 13px 3px 3px;
  background: linear-gradient(135deg, #867a5b, #3a3e31);
  box-shadow: inset 0 -7px 8px rgba(0,0,0,.35);
}
.node-icon { z-index: 2; top: -8px; width: 25px; height: 25px; color: #f2d68f; border: 0; background: transparent; font-size: 15px; }
.node-id { display: none; }
.node-name { z-index: 2; min-height: 0; color: #fff7e5; font: 700 10px/1.08 system-ui, sans-serif; text-shadow: 0 1px 2px #111; }
.node-type { z-index: 2; color: #c8c0aa; font: 600 8px/1 system-ui, sans-serif; }
.territory-node.owner-blue, .territory-node.is-owned-blue { border-color: #88b9df; background: linear-gradient(155deg, #536f83, #294f6d 56%, #18354c); }
.territory-node.owner-red, .territory-node.is-owned-red { border-color: #bd725f; background: linear-gradient(155deg, #815c4c, #6a302a 56%, #3d1d1a); }
.owner-banner {
  position: absolute;
  z-index: 5;
  right: -7px;
  top: -16px;
  width: 20px;
  height: 27px;
  color: #b9daf2;
  border-left: 2px solid #c7b178;
  font-size: 15px;
  text-shadow: 0 1px 2px #111;
}
.territory-node.owner-blue .owner-banner { color: #b9daf2; }
.territory-node.owner-red .owner-banner { color: #d88c78; }
.territory-node.type-academy { width: 88px; min-height: 66px; padding-top: 22px; border-width: 2px; }
.territory-node.type-academy::before { top: -17px; width: 55px; height: 38px; clip-path: polygon(0 100%, 0 38%, 15% 38%, 15% 0, 35% 0, 35% 38%, 65% 38%, 65% 0, 85% 0, 85% 38%, 100% 38%, 100% 100%); }
.territory-node.type-academy .node-icon { top: -7px; font-size: 17px; }
.territory-node.type-citadel { z-index: 5; width: 96px; min-height: 72px; padding-top: 23px; border: 2px solid #d2ad62; border-radius: 44% 44% 7px 7px; background: linear-gradient(155deg, #7d704e, #423d2d 58%, #26261e); }
.territory-node.type-citadel::before { top: -21px; width: 65px; height: 48px; clip-path: polygon(0 100%, 0 38%, 13% 38%, 13% 0, 29% 0, 29% 38%, 43% 38%, 50% 14%, 57% 38%, 71% 38%, 71% 0, 87% 0, 87% 38%, 100% 38%, 100% 100%); }
.territory-node.type-citadel .node-icon { top: -11px; font-size: 19px; }
.territory-node.type-knowledge::before { border-radius: 4px 4px 12px 12px; clip-path: polygon(0 100%, 0 22%, 16% 22%, 16% 0, 30% 0, 30% 22%, 70% 22%, 70% 0, 84% 0, 84% 22%, 100% 22%, 100% 100%); }
.territory-node.type-logic::before { width: 32px; border-radius: 3px; clip-path: polygon(12% 100%, 12% 23%, 0 23%, 0 9%, 22% 9%, 22% 0, 40% 0, 40% 9%, 60% 9%, 60% 0, 78% 0, 78% 9%, 100% 9%, 100% 23%, 88% 23%, 88% 100%); }
.territory-node.type-ideas::before { height: 25px; border-radius: 0; clip-path: polygon(0 100%, 10% 40%, 50% 0, 90% 40%, 100% 100%); }
.territory-node.type-sanctuary::before { width: 30px; height: 30px; top: -14px; border-radius: 4px; transform: translateX(-50%) rotate(45deg); background: linear-gradient(135deg, #8d805e, #384136); }
.territory-node.type-sanctuary .node-icon { top: -7px; }
.territory-node.type-research::before { width: 39px; height: 30px; border-radius: 20px 20px 2px 2px; background: radial-gradient(circle at 50% 25%, #a09b78, #59604a 42%, #31382e 72%); }
.citadel-node-status { z-index: 3; color: #d6c7a0; font-size: 8px; }
.territory-node.is-available { border-color: #f0ca70; filter: brightness(1.08); box-shadow: 0 0 0 3px rgba(240,201,109,.25), 0 0 23px rgba(240,201,109,.58), 0 8px 10px rgba(10,15,7,.5); }
.territory-node.is-selected { transform: translate(-50%, -50%) scale(1.1); }
.territory-node.is-isolated { opacity: .68; filter: grayscale(.28) saturate(.62); border-style: solid; }
.territory-node.is-isolated::before { box-shadow: inset 0 -7px 8px rgba(0,0,0,.38), 0 0 18px rgba(206,210,196,.3); }
.lost-link { top: calc(100% + 2px); min-width: 92px; padding: 3px 5px; color: #e0d7c3; border: 1px solid rgba(199,192,174,.28); background: rgba(39,43,37,.94); font-size: 8px; }
.shield-marker { right: -8px; top: 9px; width: 25px; height: 25px; font-size: 13px; }
.territory-node.citadel-available, .territory-node.is-citadel-ready { border-color: #ffe29b; background: linear-gradient(155deg, #aa8943, #5c4a29 58%, #2f2a1d); box-shadow: 0 0 0 5px rgba(247,204,102,.18), 0 0 38px rgba(255,209,93,.72); }
.context-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding: 0 15px;
  color: #d8cfb7;
  border: 1px solid #695032;
  border-radius: 3px;
  background: linear-gradient(180deg, #262018, #15130f);
  box-shadow: inset 0 0 0 2px rgba(150,111,58,.13);
  font: 600 14px/1.2 system-ui, sans-serif;
}
.context-compass { color: #d4aa5b; font-size: 18px; }
.context-bar #context-status { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.context-bar .debug-panel { position: relative; inset: auto; z-index: 30; flex: 0 0 auto; width: auto; margin-left: auto; border: 0; border-left: 1px solid rgba(130,102,61,.4); border-radius: 0; background: transparent; box-shadow: none; }
.context-bar .debug-panel summary { padding: 6px 4px 6px 13px; color: #898578; font-size: 10px; }
.context-bar .debug-panel[open] .debug-popover { position: absolute; right: -2px; bottom: calc(100% + 9px); width: 320px; border: 1px solid #725836; border-radius: 3px; background: rgba(15,20,16,.98); box-shadow: 0 15px 35px rgba(0,0,0,.5); }
.context-bar .debug-panel:not([open]) .debug-popover { display: none; }
.context-bar .debug-panel pre { max-height: 330px; }

.hud {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 8px;
  overflow: auto;
  border: 1px solid #73512c;
  border-radius: 4px;
  background:
    linear-gradient(90deg, rgba(0,0,0,.16), transparent 7%, transparent 93%, rgba(0,0,0,.2)),
    linear-gradient(180deg, #30261b, #171713);
  box-shadow: inset 0 0 0 4px #16100a, inset 0 0 0 5px rgba(190,143,65,.25), 0 7px 20px rgba(0,0,0,.35);
  scrollbar-color: #82643a #17130e;
}
.hud-section { flex: 0 0 auto; padding: 11px 12px; border: 1px solid rgba(170,134,73,.38); border-radius: 3px; background: linear-gradient(145deg, rgba(35,43,36,.96), rgba(17,24,19,.98)); box-shadow: inset 0 0 18px rgba(0,0,0,.25); }
.hud-kicker, .hud-section-heading, .inventory-heading .eyebrow { margin: 0; color: #c6a76b; font: 800 11px/1.2 system-ui, sans-serif; letter-spacing: .11em; text-transform: uppercase; }
.turn-indicator { min-height: 31px; padding: 5px 0 0; border: 0; background: transparent; }
.turn-indicator span { color: #b7b8ae; font-size: 12px; text-transform: uppercase; letter-spacing: .07em; }
.turn-indicator strong { color: #fff4dc; font-size: 19px; }
.energy-panel { position: relative; }
.hud-section-heading { display: flex; align-items: center; justify-content: space-between; }
.hud-section-heading b { color: #f4deb0; font-size: 13px; letter-spacing: 0; }
.energy-crystals { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 11px 0 8px; }
.energy-crystal { aspect-ratio: 1; min-width: 0; transform: rotate(45deg) scale(.64); border: 2px solid #6b6253; border-radius: 4px; background: #252a25; box-shadow: inset 0 0 8px rgba(0,0,0,.7); }
.energy-crystal.is-filled { border-color: #f0c96f; background: radial-gradient(circle at 35% 30%, #fff1ae, #cf8d29 48%, #654015 80%); box-shadow: 0 0 13px rgba(243,193,82,.5), inset 0 0 5px #fff0a3; }
.insight-status { margin: 0; color: #a9ada5; font: 600 12px/1.3 system-ui, sans-serif; }
.energy-panel.is-ready { border-color: #d4ad62; box-shadow: inset 0 0 18px rgba(217,170,75,.12), 0 0 16px rgba(211,166,76,.12); }
.energy-panel.is-ready .insight-status { color: #f0c86d; font-weight: 800; }
.insight-button { width: 100%; min-height: 33px; margin-top: 8px; padding: 7px 10px; color: #ecd69f; border-color: rgba(194,154,79,.38); background: rgba(145,103,42,.18); font-size: 11px; }
.insight-button:disabled { opacity: .42; cursor: not-allowed; }
.inventory-panel { padding: 10px 12px; background: linear-gradient(145deg, rgba(35,43,36,.96), rgba(17,24,19,.98)); }
.inventory-heading { margin-bottom: 8px; }
.inventory-heading strong { max-width: 150px; color: #eee3cb; font-size: 13px; }
.inventory-heading > span { color: #aaa697; font-size: 11px; }
.inventory-slots { gap: 7px; }
.artifact-slot { min-height: 54px; border-color: #6d5d43; border-radius: 3px; background: radial-gradient(circle at 50% 35%, #343d34, #151b16); }
.artifact-slot > span { font-size: 21px; }
.artifact-slot small { color: #d2c7ad; font-size: 10px; }
.active-effect { color: #f0c96f; font-size: 12px; }
.citadel-progress { padding: 11px 12px; border-color: rgba(202,159,76,.55); background: linear-gradient(145deg, rgba(60,49,31,.96), rgba(26,25,19,.98)); font-size: 12px; }
.citadel-progress-heading { margin-bottom: 7px; font-size: 11px; }
.citadel-progress > div:not(.citadel-progress-heading) { padding: 4px 0; color: #b7b2a3; }
.citadel-progress b { color: #f0e6cf; }
.citadel-progress p { margin: 7px 0 0; padding-top: 7px; font-size: 11px; }
.citadel-progress p.is-ready { color: #ffd77a; }
.territory-panel { align-self: auto; min-height: 0; padding: 10px 12px; }
.empty-selection { height: auto; min-height: 76px; display: grid; grid-template-columns: 30px 1fr; grid-template-rows: auto auto; align-items: center; align-content: center; text-align: left; }
.empty-selection > span { grid-row: 1 / 3; font-size: 24px; }
.empty-selection h2 { margin: 0 0 3px; font-size: 16px; }
.empty-selection p { font-size: 12px; line-height: 1.35; }
.selection-heading { gap: 9px; }
.selection-heading h2 { color: #f2e6cd; font-size: 17px; }
.selection-icon { width: 36px; height: 36px; color: #dfb866; border-color: #8b7045; }
.territory-details { margin: 9px 0; }
.territory-details div { padding: 5px 0; border-bottom-color: rgba(155,134,91,.2); }
.territory-details dt { color: #aaa99e; font-size: 11px; }
.territory-details dd { color: #e8deca; font-size: 12px; }
.territory-details .influence-value { margin: 3px -4px; padding: 6px 4px; }
.influence-value dd { color: #e6bd67; font-size: 15px; }
.pvp-note { margin: 0 0 8px; font-size: 11px; }
.territory-panel .button { min-height: 36px; padding-top: 8px; padding-bottom: 8px; font-size: 11px; }
.territory-panel .button-quiet { margin-top: 5px; }
.map-legend { display: flex; justify-content: center; gap: 14px; margin-top: auto; padding: 4px 3px 1px; border-top: 0; }
.map-legend span { margin: 0; color: #a9a292; font-size: 10px; white-space: nowrap; }

@media (max-width: 1180px) {
  .battle-topbar { grid-template-columns: minmax(245px, 1fr) 300px minmax(245px, 1fr); }
  .top-academy-card { grid-template-columns: 40px 1fr; padding: 9px 10px; }
  .top-academy-card.player-red { grid-template-columns: 1fr 40px; }
  .top-academy-card.player-red .academy-copy { grid-column: 1; }
  .top-academy-card.player-red .player-sigil { grid-column: 2; }
  .top-academy-card .player-sigil { width: 38px; height: 48px; }
  .top-academy-card .turn-standard { position: absolute; right: 7px; bottom: 6px; }
  .top-academy-card.player-red .turn-standard { right: auto; left: 7px; }
  .academy-copy strong { font-size: 17px; }
  .academy-metrics { font-size: 11px; }
  .game-layout { grid-template-columns: minmax(0, 1fr) 286px; }
}

@media (max-height: 800px) {
  .battle-topbar { height: 92px; }
  .game-layout { height: calc(100vh - 110px); }
  .hud { gap: 5px; padding: 6px; }
  .hud-section { padding: 8px 10px; }
  .energy-crystals { margin: 7px 0 5px; }
  .artifact-slot { min-height: 48px; }
  .citadel-progress { padding: 8px 10px; }
  .map-canvas { top: 36px; }
}

/* Sprint 6 — shared fantasy UI */
:root {
  --ink: #f4ead3;
  --muted: #b5b0a3;
  --panel: #182019;
  --panel-soft: #232b22;
  --line: #67543a;
  --blue: #76add8;
  --blue-deep: #315f83;
  --red: #c27865;
  --red-deep: #77352d;
  --gold: #e2bb67;
  --neutral: #898675;
  --green: #a7c58a;
  --danger: #d7897c;
  --shadow: 0 18px 60px rgba(0, 0, 0, .48);
  --ui-font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --display-font: Georgia, "Times New Roman", serif;
}

html { min-width: 0; background: #0c100d; }
body { min-width: 0; color: var(--ink); background: #0c100d; font-family: var(--display-font); }
button, input { font-family: var(--ui-font); }
.screen { position: relative; min-height: 100vh; }
.eyebrow { color: var(--gold); font-size: 12px; letter-spacing: .18em; }
.button {
  position: relative;
  min-height: 44px;
  padding: 11px 18px;
  border-radius: 3px;
  font-family: var(--ui-font);
  font-size: 13px;
  letter-spacing: .085em;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.button-primary {
  color: #23190d;
  border-color: #f0d28d;
  background: linear-gradient(180deg, #f0d288, #c99a4b 54%, #ad7733);
  box-shadow: inset 0 1px rgba(255,255,255,.54), inset 0 -3px rgba(76,43,12,.2), 0 7px 18px rgba(0,0,0,.3);
  text-shadow: 0 1px rgba(255,255,255,.28);
}
.button-primary:hover:not(:disabled) { background: linear-gradient(180deg, #ffe5a7, #d9aa5b 56%, #b9823d); box-shadow: inset 0 1px #fff0c7, 0 9px 22px rgba(0,0,0,.38), 0 0 13px rgba(227,184,97,.2); }
.button-quiet { color: #d8cdb6; border-color: #6d5a3d; background: rgba(20,24,19,.64); }
.button-quiet:hover:not(:disabled) { color: #fff0ce; border-color: #b18c50; background: rgba(69,55,33,.55); transform: translateY(-1px); }
.button:focus-visible, .territory-node:focus-visible, input:focus-visible { outline: 3px solid #f2d27e; outline-offset: 3px; }
.panel { border: 1px solid #755b35; border-radius: 4px; background: linear-gradient(145deg, rgba(38,45,36,.99), rgba(15,21,17,.99)); box-shadow: inset 0 0 0 4px rgba(23,14,8,.52), var(--shadow); }

/* Main menu */
.start-screen {
  isolation: isolate;
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 34px;
  background:
    radial-gradient(circle at 50% 45%, rgba(219,172,85,.2), transparent 24%),
    linear-gradient(180deg, #182d37 0%, #314d46 42%, #17271f 77%, #0b100d 100%);
}
.start-screen::before { inset: 20px; z-index: 4; border: 1px solid rgba(215,176,101,.42); box-shadow: inset 0 0 0 4px rgba(23,15,8,.5); }
.start-screen::after { content: ""; position: absolute; z-index: 2; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(4,8,7,.58), transparent 29%, transparent 71%, rgba(4,8,7,.6)), linear-gradient(0deg, rgba(2,5,4,.76), transparent 48%); }
.menu-landscape { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
.menu-mountains { position: absolute; left: -5%; width: 110%; clip-path: polygon(0 100%, 0 73%, 9% 46%, 17% 67%, 28% 30%, 39% 63%, 49% 18%, 60% 62%, 69% 35%, 78% 65%, 90% 39%, 100% 71%, 100% 100%); }
.menu-mountains.far { bottom: 24%; height: 48%; background: linear-gradient(180deg, rgba(85,111,107,.58), #20352f); filter: blur(1px); }
.menu-mountains.near { bottom: 0; height: 45%; background: linear-gradient(180deg, #253d31, #101b16 68%); clip-path: polygon(0 100%, 0 60%, 8% 42%, 15% 63%, 25% 48%, 33% 70%, 45% 43%, 52% 65%, 62% 45%, 71% 68%, 81% 36%, 90% 60%, 100% 47%, 100% 100%); }
.menu-citadel-silhouette { position: absolute; left: 50%; top: 15%; width: 240px; height: 300px; transform: translateX(-50%); opacity: .8; filter: drop-shadow(0 18px 18px rgba(0,0,0,.5)); }
.menu-citadel-silhouette::before, .menu-citadel-silhouette::after, .menu-citadel-silhouette i { content: ""; position: absolute; bottom: 0; background: linear-gradient(90deg, #151e1b, #26322a 46%, #101714); border-top: 2px solid rgba(227,183,95,.22); }
.menu-citadel-silhouette::before { left: 47px; width: 146px; height: 158px; clip-path: polygon(0 100%, 0 22%, 8% 22%, 8% 8%, 18% 8%, 18% 22%, 40% 22%, 50% 0, 60% 22%, 82% 22%, 82% 8%, 92% 8%, 92% 22%, 100% 22%, 100% 100%); }
.menu-citadel-silhouette::after { left: 0; width: 240px; height: 74px; clip-path: polygon(0 100%, 0 24%, 8% 24%, 8% 0, 17% 0, 17% 24%, 83% 24%, 83% 0, 92% 0, 92% 24%, 100% 24%, 100% 100%); }
.menu-citadel-silhouette i:nth-child(1) { left: 93px; width: 54px; height: 245px; clip-path: polygon(0 100%, 0 12%, 15% 12%, 15% 0, 35% 0, 35% 12%, 65% 12%, 65% 0, 85% 0, 85% 12%, 100% 12%, 100% 100%); }
.menu-citadel-silhouette i:nth-child(2), .menu-citadel-silhouette i:nth-child(3) { bottom: 86px; width: 38px; height: 120px; clip-path: polygon(0 100%, 0 16%, 17% 16%, 17% 0, 38% 0, 38% 16%, 62% 16%, 62% 0, 83% 0, 83% 16%, 100% 16%, 100% 100%); }
.menu-citadel-silhouette i:nth-child(2) { left: 34px; }
.menu-citadel-silhouette i:nth-child(3) { right: 34px; }
.menu-academy-silhouette { position: absolute; bottom: 5%; width: 180px; height: 135px; opacity: .7; background: #0e1714; clip-path: polygon(0 100%, 0 43%, 12% 43%, 12% 18%, 24% 18%, 24% 43%, 40% 43%, 50% 0, 60% 43%, 76% 43%, 76% 18%, 88% 18%, 88% 43%, 100% 43%, 100% 100%); }
.menu-academy-silhouette.blue { left: 6%; filter: drop-shadow(0 0 24px rgba(77,147,200,.28)); }
.menu-academy-silhouette.red { right: 6%; filter: drop-shadow(0 0 24px rgba(174,76,57,.25)); }
.menu-content { position: relative; z-index: 3; width: min(720px, 90vw); display: grid; justify-items: center; text-align: center; }
.game-crest { position: relative; width: 84px; height: 92px; margin: 0 auto 17px; color: #e3bb68; border: 2px solid #d2a857; border-radius: 5px 5px 36px 36px; background: linear-gradient(145deg, rgba(242,214,151,.17), rgba(34,30,22,.76)); box-shadow: inset 0 0 0 4px rgba(17,13,8,.45), 0 0 35px rgba(225,180,88,.18); }
.game-crest span { position: absolute; top: 13px; font-size: 32px; }
.game-crest i { position: absolute; bottom: 15px; font: normal 22px/1 var(--display-font); }
.start-screen h1 { max-width: none; margin: 0; color: #f4dfaa; font-size: clamp(58px, 7.2vw, 104px); font-weight: 500; line-height: .78; letter-spacing: .035em; text-transform: uppercase; text-shadow: 0 4px 14px #080a07, 0 0 34px rgba(219,175,85,.14); }
.start-screen h1 span { display: block; }
.start-screen h1 span:last-child { margin-top: 14px; color: #d9bd82; font-size: .63em; letter-spacing: .29em; text-indent: .29em; }
.menu-subtitle { margin: 25px 0 24px; color: #cfccbd; font: 500 16px/1.55 var(--ui-font); text-shadow: 0 2px 4px #10130e; }
.menu-actions { display: grid; justify-items: center; gap: 10px; }
.menu-actions > div { display: flex; gap: 8px; }
.menu-battle-button { min-width: 310px; min-height: 55px; font-size: 14px; }
.menu-actions .button-quiet { min-width: 151px; margin: 0; }

/* Setup */
.setup-screen {
  display: grid;
  place-items: center;
  padding: 38px;
  background: radial-gradient(circle at 50% 26%, rgba(170,130,66,.13), transparent 28%), linear-gradient(135deg, rgba(31,56,61,.74), rgba(15,22,18,.94)), repeating-linear-gradient(25deg, #18221d 0 3px, #202a23 4px 8px);
}
.setup-screen::before { content: ""; position: absolute; inset: 18px; border: 1px solid rgba(214,175,101,.3); pointer-events: none; }
.screen-back-button { position: absolute; z-index: 2; top: 28px; left: 32px; min-height: 38px; color: #cfc3aa; border: 1px solid rgba(160,126,70,.35); background: rgba(12,17,14,.52); }
.setup-shell { position: relative; z-index: 1; width: min(940px, 92vw); }
.setup-heading { margin-bottom: 16px; text-align: center; }
.setup-heading h2 { margin: 0; color: #f0ddad; font-size: clamp(30px, 3.2vw, 46px); font-weight: 500; }
.knowledge-set-card { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 15px; margin: 0 auto 16px; padding: 13px 17px; border: 1px solid rgba(181,145,76,.43); border-radius: 4px; background: linear-gradient(100deg, rgba(41,50,40,.97), rgba(21,27,22,.96)); box-shadow: inset 0 0 0 3px rgba(9,12,10,.3); }
.set-icon { width: 46px; height: 46px; display: grid; place-items: center; color: #e0ba68; border: 1px solid #8b7046; border-radius: 50%; font-size: 23px; }
.knowledge-set-card div { min-width: 0; display: grid; gap: 2px; }
.knowledge-set-card small { color: #aaa697; font: 700 11px/1.2 var(--ui-font); letter-spacing: .1em; text-transform: uppercase; }
.knowledge-set-card strong { color: #f0e5cb; font: 600 18px/1.2 var(--display-font); }
.knowledge-set-card p { margin: 0; color: #afaea4; font: 500 12px/1.3 var(--ui-font); }
.set-selected { padding: 7px 10px; color: #d5bc83; border: 1px solid rgba(190,150,75,.36); font: 800 11px/1 var(--ui-font); text-transform: uppercase; }
.duel-form { display: grid; grid-template-columns: 1fr 80px 1fr; gap: 0; align-items: stretch; }
.academy-choice { position: relative; min-width: 0; display: grid; justify-items: center; align-content: center; gap: 7px; min-height: 326px; padding: 30px; overflow: hidden; color: #cbc7bb; border: 1px solid #63543d; background: linear-gradient(145deg, rgba(34,43,36,.97), rgba(15,21,18,.98)); box-shadow: inset 0 0 0 4px rgba(8,11,9,.4), 0 12px 32px rgba(0,0,0,.25); text-align: center; }
.academy-choice.blue-field { border-top: 4px solid #719fc3; }
.academy-choice.red-field { border-top: 4px solid #a65b4e; }
.academy-choice::after { content: ""; position: absolute; bottom: -50px; width: 220px; height: 145px; opacity: .18; background: currentColor; clip-path: polygon(0 100%, 0 48%, 13% 48%, 13% 15%, 27% 15%, 27% 48%, 41% 48%, 50% 0, 59% 48%, 73% 48%, 73% 15%, 87% 15%, 87% 48%, 100% 48%, 100% 100%); }
.academy-choice.blue-field::after { color: #72a5cf; }
.academy-choice.red-field::after { color: #b45f52; }
.academy-banner { position: relative; z-index: 1; width: 67px; height: 78px; display: grid; place-items: center; border: 2px solid currentColor; border-radius: 4px 4px 28px 28px; font-size: 27px; }
.blue-field .academy-banner { color: #84b4d9; background: rgba(45,91,126,.35); }
.red-field .academy-banner { color: #c37a68; background: rgba(119,48,41,.35); }
.academy-choice small { position: relative; z-index: 1; color: #aaa79d; font: 700 11px/1.2 var(--ui-font); letter-spacing: .12em; text-transform: uppercase; }
.academy-choice strong { position: relative; z-index: 1; color: #f4e8d0; font: 500 27px/1.1 var(--display-font); }
.academy-choice .field-caption { position: relative; z-index: 1; margin-top: 12px; color: #beb7a8; font: 700 12px/1.2 var(--ui-font); }
.academy-choice input { position: relative; z-index: 1; width: min(290px, 100%); padding: 12px 14px; color: #f8f0df; border: 1px solid #77674d; border-left-width: 3px; border-radius: 3px; background: rgba(7,12,10,.7); font: 600 16px/1.2 var(--ui-font); text-align: center; }
.academy-choice.blue-field input { border-left-color: #78acd4; }
.academy-choice.red-field input { border-left-color: #b66355; }
.duel-form .versus { position: relative; z-index: 2; display: grid; place-items: center; padding: 0; color: #e0bd72; background: linear-gradient(180deg, transparent, rgba(16,20,16,.86) 25%, rgba(16,20,16,.86) 75%, transparent); font: 700 20px/1 var(--display-font); }
.duel-form .versus span { width: 58px; height: 58px; display: grid; place-items: center; border: 1px solid #977640; border-radius: 50%; background: #1b211a; box-shadow: 0 0 18px rgba(218,173,88,.15); }
.duel-form .versus i { position: absolute; z-index: -1; width: 1px; height: 90%; background: linear-gradient(transparent, #7f6742, transparent); }
.duel-submit { grid-column: 1 / -1; width: 260px; margin: 18px auto 0; }

/* Territory hover card */
.territory-node::selection { background: transparent; }
.territory-node[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  z-index: 30;
  left: 50%;
  bottom: calc(100% + 11px);
  width: max-content;
  max-width: 210px;
  padding: 9px 11px;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 5px);
  color: #eee2c8;
  border: 1px solid rgba(202,165,95,.55);
  border-radius: 3px;
  background: rgba(22,25,19,.97);
  box-shadow: 0 8px 20px rgba(0,0,0,.44);
  font: 600 11px/1.45 var(--ui-font);
  white-space: pre-line;
  text-align: left;
  pointer-events: none;
  transition: opacity .12s ease, transform .12s ease;
}
.territory-node[data-tooltip]:hover::after, .territory-node[data-tooltip]:focus-visible::after { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.territory-node.tooltip-right::after { left: 0; transform: translate(0, 5px); }
.territory-node.tooltip-right:hover::after, .territory-node.tooltip-right:focus-visible::after { transform: translate(0, 0); }
.territory-node.tooltip-left::after { right: 0; left: auto; transform: translate(0, 5px); }
.territory-node.tooltip-left:hover::after, .territory-node.tooltip-left:focus-visible::after { transform: translate(0, 0); }
.territory-node.tooltip-below::after { top: calc(100% + 11px); bottom: auto; }

/* Question and event windows */
.modal-backdrop { padding: 24px; background: rgba(7,11,9,.76); backdrop-filter: blur(4px) saturate(.7); }
.question-modal { width: min(790px, 62vw); max-height: calc(100vh - 48px); overflow: auto; padding: 28px 32px 30px; border-color: #9a7742; background: linear-gradient(145deg, rgba(42,49,39,.99), rgba(18,24,19,.99)); box-shadow: inset 0 0 0 5px rgba(24,14,8,.5), inset 0 0 0 6px rgba(205,162,85,.2), 0 25px 80px rgba(0,0,0,.62); }
.question-object { display: flex; align-items: center; gap: 12px; margin: -5px 0 16px; padding-bottom: 14px; border-bottom: 1px solid rgba(187,151,87,.28); }
.question-object > span { width: 42px; height: 42px; display: grid; place-items: center; color: #e4bd6b; border: 1px solid #896e45; border-radius: 50%; font-size: 20px; }
.question-object div { display: grid; gap: 2px; }
.question-object small { color: #9fa397; font: 700 10px/1.2 var(--ui-font); letter-spacing: .12em; text-transform: uppercase; }
.question-object strong { color: #f3e7cc; font: 600 19px/1.15 var(--display-font); }
.question-meta { color: #e0bd6f; font-size: 13px; }
.question-modal h2 { margin: 15px 0 20px; color: #fff4dc; font-size: clamp(21px, 2vw, 28px); line-height: 1.25; }
.question-modal fieldset { gap: 9px; margin-bottom: 16px; }
.answer-option { grid-template-columns: 38px 1fr; min-height: 55px; padding: 9px 13px; color: #e6e0d3; border-color: #5e604f; border-radius: 3px; background: linear-gradient(90deg, rgba(62,69,55,.6), rgba(31,39,31,.7)); font-size: 15px; }
.answer-option:hover { border-color: #b49155; background: rgba(127,101,57,.2); }
.answer-option.is-chosen { color: #fff1cd; border-color: #e0b55f; background: linear-gradient(90deg, rgba(155,115,48,.35), rgba(70,55,32,.48)); box-shadow: inset 3px 0 #e2bb67; }
.answer-letter { width: 32px; height: 32px; border-color: #806c49; border-radius: 3px; background: rgba(12,17,13,.42); }
.question-modal .artifact-action { color: #f2d68e; border-color: #8e7041; background: rgba(125,94,42,.2); }
.result-mark { color: inherit; border-radius: 4px; transform: rotate(45deg); }
.result-mark::first-letter { transform: rotate(-45deg); }
.question-result.correct { color: #b9d49b; }
.question-result.incorrect { color: #db9486; }
.question-result h3 { font-family: var(--display-font); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.question-result p { color: #ddd7c9; font-size: 15px; }
#question-modal.is-citadel-trial .question-modal { border-color: #ddb867; background: radial-gradient(circle at 50% 0, rgba(202,155,67,.19), transparent 33%), linear-gradient(145deg, #3c382a, #171a15 78%); box-shadow: inset 0 0 0 5px #1d140b, inset 0 0 0 6px rgba(237,198,113,.38), 0 0 55px rgba(214,164,70,.24), 0 25px 80px rgba(0,0,0,.68); }
.citadel-question-progress { margin: -28px -32px 20px; padding: 15px 32px; border-bottom-color: rgba(232,192,109,.38); border-radius: 0; background: linear-gradient(90deg, rgba(66,51,28,.7), rgba(135,101,43,.2), rgba(66,51,28,.7)); }
.citadel-question-progress strong { color: #f8e7bd; font-size: 15px; }
.citadel-question-progress div { font-size: 16px; }
.choice-modal, .tiebreaker-modal { border-color: #86693c; background: linear-gradient(145deg, #30382e, #151b16); }
.choice-modal h2, .tiebreaker-modal h2 { color: #f3e5c6; font-family: var(--display-font); }
.choice-modal > p:not(.eyebrow), .tiebreaker-modal p { color: #c2bfb3; font-size: 14px; }
.citadel-dialog { border-color: #d0a558; background: radial-gradient(circle at 50% 0, rgba(208,163,75,.16), transparent 40%), linear-gradient(145deg, #403a2c, #181b16); }
.toast { bottom: 48px; padding: 11px 15px; color: #fff1ce; border-color: #d2aa5d; border-radius: 3px; background: #22271f; font-size: 14px; }

/* Results */
.results-screen { min-height: 100vh; padding: 26px; background: radial-gradient(circle at 50% 0, rgba(190,145,65,.15), transparent 28%), linear-gradient(135deg, #17241e, #0c120f); }
.results-screen::before { content: ""; position: fixed; inset: 15px; border: 1px solid rgba(190,150,78,.24); pointer-events: none; }
.results-panel { width: min(1220px, 96vw); padding: 28px; border-color: #86683b; background: linear-gradient(145deg, rgba(37,45,36,.98), rgba(14,20,16,.99)); }
.result-crest { width: 62px; height: 70px; margin-bottom: 10px; border-radius: 4px 4px 24px 24px; background: rgba(118,89,40,.18); font-size: 27px; }
#results-title { color: #d8ba7a; font: 600 19px/1.2 var(--display-font); letter-spacing: .17em; }
.winner-kicker { margin-top: 13px; color: #aaa697; font-size: 11px; }
.winner-name { color: #fff0cf; font-size: clamp(28px, 3vw, 42px); }
.victory-label { color: #e6bd66; font-size: 13px; }
.results-comparison { gap: 14px; }
.result-player { position: relative; padding: 18px; border-color: #5f563f; border-radius: 3px; background: linear-gradient(145deg, rgba(50,59,47,.7), rgba(23,29,23,.84)); box-shadow: inset 0 0 24px rgba(0,0,0,.2); }
.result-player.player-blue { border-left: 4px solid #77a9d0; }
.result-player.player-red { border-left: 4px solid #b86857; }
.result-player.is-winner { border-color: #bd9855; box-shadow: inset 0 0 0 1px rgba(231,190,106,.3), 0 0 24px rgba(206,158,71,.12); }
.result-player-header small { color: #b4ad9d; font-size: 11px; }
.result-player h2 { color: #f4e7ce; font: 600 23px/1.1 var(--display-font); }
.winner-badge { color: #ffebba; border-color: #b78f49; border-radius: 3px; background: rgba(145,103,41,.24); }
.result-highlights { gap: 7px; }
.result-highlights div { min-height: 75px; padding: 11px 8px; border: 1px solid rgba(130,113,79,.35); border-radius: 3px; background: rgba(14,20,16,.42); text-align: center; }
.result-highlights span { display: block; color: #aaa697; font: 700 10px/1.2 var(--ui-font); text-transform: uppercase; letter-spacing: .05em; }
.result-highlights strong { display: block; margin-top: 6px; color: #f1d899; font: 600 25px/1 var(--display-font); }
.match-details dt, .match-details dd, .stat-list, .type-results { font-size: 12px; }
.learning-section, .achievement-section { border-top-color: rgba(154,128,77,.3); }
.learning-section h3, .achievement-section h3 { color: #d6b978; font-size: 11px; letter-spacing: .12em; }
.learning-insights p { background: rgba(102,82,46,.16); }
.achievement { border-color: rgba(153,126,72,.35); border-radius: 3px; background: rgba(24,31,25,.65); }
.results-actions .button { min-width: 190px; }

.citadel-victory-reveal {
  position: fixed;
  z-index: 400;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  color: #f9e6b6;
  background: radial-gradient(circle, rgba(133,97,39,.82), rgba(10,14,11,.96) 52%);
  text-align: center;
  animation: citadel-reveal 1.45s ease both;
}
.citadel-victory-reveal > span { font-size: 72px; filter: drop-shadow(0 0 22px rgba(255,207,101,.66)); }
.citadel-victory-reveal p { margin: 12px 0 8px; font: 500 clamp(32px, 5vw, 68px)/1 var(--display-font); letter-spacing: .08em; text-transform: uppercase; }
.citadel-victory-reveal strong { color: #e2c98f; font: 700 17px/1.3 var(--ui-font); }

/* Menu dialogs */
.menu-modal { width: min(900px, 92vw); padding: 30px; text-align: center; }
.menu-modal h2 { margin: 0 0 22px; color: #f2dfb3; font-size: 32px; font-weight: 500; }
.rules-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-bottom: 22px; }
.rules-steps article { position: relative; min-height: 185px; display: grid; justify-items: center; align-content: center; gap: 7px; padding: 18px 12px; border: 1px solid rgba(139,113,66,.38); background: rgba(19,27,21,.62); }
.rules-steps article > b { position: absolute; top: 8px; left: 10px; color: #9c875f; font: 800 11px/1 var(--ui-font); }
.rules-steps article > span { color: #e0b963; font-size: 31px; }
.rules-steps article > strong { color: #eee2c9; font: 600 16px/1.2 var(--display-font); }
.rules-steps p { margin: 0; color: #aaa99e; font: 500 12px/1.4 var(--ui-font); }
.menu-modal > .button { min-width: 210px; }
.settings-modal { width: min(610px, 92vw); }
.settings-list { display: grid; gap: 8px; margin-bottom: 20px; text-align: left; }
.settings-list > div { display: grid; grid-template-columns: 38px 1fr auto; grid-template-rows: auto auto; gap: 2px 10px; align-items: center; padding: 12px; border: 1px solid rgba(130,111,76,.36); background: rgba(16,23,18,.58); }
.settings-list > div > span { grid-row: 1 / 3; color: #ddb765; font-size: 23px; text-align: center; }
.settings-list strong { color: #ece0c8; font: 700 14px var(--ui-font); }
.settings-list small { color: #9fa096; font: 500 11px var(--ui-font); }
.settings-list button { grid-column: 3; grid-row: 1 / 3; padding: 6px 8px; color: #8f9188; border: 1px solid #51594e; background: transparent; }

.small-screen-notice { display: none; }

@media (max-width: 1080px) {
  .battle-title { grid-template-columns: 1fr auto; }
  .battle-title .title-ornament { display: none; }
  .battle-title p { display: none; }
  .node-name { font-size: 9px; }
  .territory-node { width: 65px; }
}

@media (max-width: 920px) {
  main { display: none; }
  .small-screen-notice { position: fixed; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 30px; color: #eee0c2; background: radial-gradient(circle, #28372d, #0e1511 70%); text-align: center; }
  .small-screen-notice > span { color: #deb765; font-size: 60px; }
  .small-screen-notice strong { font: 500 30px/1.2 var(--display-font); }
  .small-screen-notice p { max-width: 460px; margin: 0; color: #b8b7ac; font: 500 15px/1.5 var(--ui-font); }
}

@media (max-height: 760px) and (min-width: 921px) {
  .battle-topbar { height: 84px; }
  .game-layout { height: calc(100vh - 102px); }
  .battle-title h1 { font-size: 20px; }
  .top-academy-card { padding-top: 7px; padding-bottom: 7px; }
  .hud-section { padding-top: 7px; padding-bottom: 7px; }
  .territory-panel { max-height: 145px; overflow: auto; }
  .map-canvas { inset: 36px 10px 17px; }
  .question-modal { padding-top: 22px; padding-bottom: 22px; }
  .answer-option { min-height: 48px; }
  .territory-node { width: 66px; min-height: 49px; padding-top: 15px; }
  .territory-node.type-academy { width: 82px; min-height: 61px; }
  .territory-node.type-citadel { width: 90px; min-height: 66px; padding-top: 20px; }
  .territory-node.type-citadel::before { top: -18px; width: 60px; height: 43px; }
}

@media (prefers-reduced-motion: no-preference) {
  .energy-crystal.is-filled { animation: crystal-awake .35s ease both; }
  .artifact-slot:not(.is-empty) { animation: artifact-arrival .35s ease both; }
  .owner-banner:not([hidden]) { animation: flag-rise .35s ease both; }
  @keyframes crystal-awake { from { opacity: .2; transform: rotate(45deg) scale(.35); } to { opacity: 1; transform: rotate(45deg) scale(.64); } }
  @keyframes artifact-arrival { from { opacity: .2; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes flag-rise { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes citadel-reveal { 0% { opacity: 0; transform: scale(1.03); } 18%, 76% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.985); } }
}

/* Layered map final cascade: presentation only, gameplay remains in game.js. */
.map-root.map-canvas {
  position: absolute;
  inset: auto;
  left: 50%;
  top: 50%;
  width: auto;
  height: 88%;
  max-width: 96%;
  max-height: none;
  aspect-ratio: 16 / 9;
  margin: 0;
  transform: translate(-50%, -50%);
  overflow: visible;
  isolation: isolate;
}

.map-root .map-roads line {
  stroke: #c5a46a;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: none;
  opacity: .78;
  filter: drop-shadow(0 1px 0 #49351f) drop-shadow(0 -1px 0 #49351f) drop-shadow(1px 0 0 #49351f) drop-shadow(-1px 0 0 #49351f);
}

.map-root .map-roads line.is-active-road {
  stroke: #f2cf79;
  stroke-width: 7;
  opacity: 1;
  filter: drop-shadow(0 1px 0 #584020) drop-shadow(0 0 5px rgba(255,220,132,.85));
}

.map-root .territory-node,
.map-root .territory-node.type-academy,
.map-root .territory-node.type-citadel {
  --sprite-size: clamp(74px, 5.4vw, 100px);
  z-index: 3;
  width: clamp(54px, 4.2vw, 72px);
  height: clamp(54px, 4.2vw, 72px);
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #f6ecd4;
  background: transparent;
  box-shadow: none;
  cursor: default;
  isolation: isolate;
}

.map-root .territory-node.visual-gate,
.map-root .territory-node.visual-fort {
  --sprite-size: clamp(90px, 7vw, 120px);
  width: clamp(64px, 4.8vw, 82px);
  height: clamp(64px, 4.8vw, 82px);
}

.map-root .territory-node.visual-academy,
.map-root .territory-node.type-academy {
  --sprite-size: clamp(110px, 8.2vw, 140px);
  width: clamp(76px, 5.7vw, 98px);
  height: clamp(76px, 5.7vw, 98px);
}

.map-root .territory-node.visual-citadel,
.map-root .territory-node.type-citadel {
  --sprite-size: clamp(140px, 10.5vw, 180px);
  z-index: 7;
  width: clamp(96px, 7.4vw, 126px);
  height: clamp(88px, 6.7vw, 116px);
}

.map-root .territory-node::before,
.map-root .territory-node.type-academy::before,
.map-root .territory-node.type-citadel::before { display: none; }

.map-root .territory-node:hover:not(:disabled),
.map-root .territory-node:focus-visible,
.map-root .territory-node.is-selected {
  z-index: 12;
  transform: translate(-50%, -50%) scale(1.045);
}

.map-root .territory-node.is-available,
.map-root .territory-node.is-artifact-target,
.map-root .territory-node.citadel-available,
.map-root .territory-node.is-citadel-ready {
  cursor: pointer;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.map-root .node-caption {
  top: calc(100% - 4px);
  width: clamp(82px, 7vw, 118px);
}

.map-root .visual-citadel .node-caption {
  top: calc(100% - 12px);
  width: clamp(118px, 9vw, 154px);
}

.map-root .visual-academy .node-caption { top: calc(100% - 4px); }

.map-root .territory-node .node-name {
  width: auto;
  max-width: 100%;
  min-height: 0;
  display: block;
  overflow: visible;
  padding: 3px 6px 2px;
  color: #fff5d6;
  border: 1px solid rgba(216,190,125,.38);
  border-radius: 3px;
  background: rgba(32,34,25,.9);
  box-shadow: 0 2px 5px rgba(14,19,14,.5);
  font: 750 clamp(8px, .72vw, 11px)/1.1 system-ui, sans-serif;
  text-shadow: 0 1px 2px #111;
  white-space: nowrap;
}

.map-root .territory-node .node-type { display: none; }

.map-root .territory-node .citadel-node-status {
  padding: 2px 5px;
  color: #d7c89e;
  border-radius: 2px;
  background: rgba(42,39,26,.86);
  font-size: clamp(7px, .55vw, 9px);
}

.map-root .owner-banner {
  left: 74%;
  right: auto;
  top: -14%;
  z-index: 8;
  width: clamp(17px, 1.45vw, 25px);
  height: clamp(24px, 2vw, 34px);
  border-left: 3px solid #d8c28e;
  color: transparent;
}

.map-root .owner-banner i {
  position: absolute;
  left: 1px;
  top: 2px;
  width: 100%;
  height: 62%;
  clip-path: polygon(0 0,100% 12%,76% 52%,100% 92%,0 80%);
  background: #7c786c;
}

.map-root .territory-node.is-owned-blue .owner-banner i { background: linear-gradient(135deg,#69aee4,#224f82); }
.map-root .territory-node.is-owned-red .owner-banner i { background: linear-gradient(135deg,#c35e4d,#6b241f); }

.map-root .territory-node.is-isolated {
  opacity: 1;
  filter: none;
  border: 0;
  background: transparent;
}

.map-root .territory-node.is-isolated .building-sprite {
  opacity: .64;
  filter: grayscale(.25) saturate(.58) drop-shadow(0 7px 5px rgba(16,24,18,.48));
}

.map-root .territory-node.is-isolated .owner-banner { opacity: .82; }

.map-root .lost-link {
  left: auto;
  right: -8px;
  top: -5px;
  z-index: 10;
  min-width: 0;
  width: 24px;
  height: 24px;
  transform: none;
  padding: 0;
  border: 1px solid #cec7b0;
  border-radius: 50%;
  color: #ece5cf;
  background: rgba(53,58,51,.94);
  font: 900 17px/22px system-ui,sans-serif;
  text-align: center;
}

.map-root .lost-link span { display: none; }

.map-root .shield-marker {
  right: -7px;
  top: 19px;
  z-index: 11;
  width: 27px;
  height: 27px;
  border-color: #a9dfff;
  background: #173d5c;
  box-shadow: 0 0 13px rgba(91,181,241,.65);
}

.map-root .territory-node.is-available .building-sprite,
.map-root .territory-node.is-artifact-target .building-sprite {
  filter: brightness(1.12) drop-shadow(0 0 8px rgba(248,208,112,.76)) drop-shadow(0 7px 5px rgba(16,24,18,.48));
}

.map-root .territory-node.is-citadel-ready .building-sprite {
  filter: brightness(1.2) saturate(1.1) drop-shadow(0 0 12px rgba(255,216,111,.9)) drop-shadow(0 9px 7px rgba(16,24,18,.5));
}

.map-root .territory-node:disabled:not(.is-isolated):not(.type-academy):not(.type-citadel) .building-sprite {
  filter: saturate(.8) brightness(.88) drop-shadow(0 7px 5px rgba(16,24,18,.4));
}

/* Map composition polish: visual hierarchy, restrained roads and unobtrusive decor. */
.map-root .map-roads line {
  stroke: rgba(151, 128, 88, .72);
  stroke-width: 3.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 7 1.4 3 1.1;
  opacity: .72;
  filter:
    drop-shadow(0 1px 0 rgba(57, 43, 27, .9))
    drop-shadow(0 -1px 0 rgba(65, 49, 31, .72))
    drop-shadow(1px 0 0 rgba(55, 41, 26, .45));
}

.map-root .map-roads line.is-active-road {
  stroke: rgba(202, 171, 105, .9);
  stroke-width: 4.6;
  opacity: .9;
  filter:
    drop-shadow(0 1px 0 rgba(67, 49, 27, .88))
    drop-shadow(0 0 4px rgba(222, 184, 105, .48));
}

.map-root .territory-node,
.map-root .territory-node.type-knowledge,
.map-root .territory-node.type-sanctuary {
  --sprite-size: clamp(62px, 5.2vw, 90px);
  width: clamp(46px, 3.6vw, 62px);
  height: clamp(46px, 3.6vw, 62px);
}

.map-root .territory-node.type-logic,
.map-root .territory-node.type-ideas {
  --sprite-size: clamp(72px, 6vw, 104px);
  width: clamp(52px, 4vw, 68px);
  height: clamp(52px, 4vw, 68px);
}

.map-root .territory-node.type-research {
  --sprite-size: clamp(78px, 6.5vw, 116px);
  width: clamp(56px, 4.35vw, 74px);
  height: clamp(56px, 4.35vw, 74px);
}

.map-root .territory-node.visual-gate,
.map-root .territory-node.visual-fort {
  --sprite-size: clamp(92px, 7.5vw, 132px);
  width: clamp(66px, 5vw, 86px);
  height: clamp(66px, 5vw, 86px);
}

.map-root .territory-node.visual-academy,
.map-root .territory-node.type-academy {
  --sprite-size: clamp(108px, 8.6vw, 150px);
  width: clamp(76px, 5.8vw, 100px);
  height: clamp(76px, 5.8vw, 100px);
}

.map-root .territory-node.visual-citadel,
.map-root .territory-node.type-citadel {
  --sprite-size: clamp(136px, 10.4vw, 180px);
  width: clamp(96px, 7.4vw, 126px);
  height: clamp(90px, 6.8vw, 118px);
}

.map-root .territory-node.visual-territory .node-caption {
  display: none;
}

.map-root .territory-node.is-available .node-sprite-shell::after,
.map-root .territory-node.is-artifact-target .node-sprite-shell::after,
.map-root .territory-node.is-citadel-ready .node-sprite-shell::after {
  inset: -2%;
  border: 0;
  border-radius: 0;
  background: url("assets/icons/available.png") center / contain no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 0 5px rgba(231, 190, 94, .6));
  opacity: .72;
}

.map-root .territory-node.is-available .building-sprite,
.map-root .territory-node.is-artifact-target .building-sprite {
  filter:
    brightness(1.08)
    drop-shadow(0 0 6px rgba(237, 200, 111, .55))
    drop-shadow(0 7px 5px rgba(16,24,18,.48));
}

.map-root .territory-node.is-isolated .building-sprite {
  opacity: .58;
  filter: grayscale(.34) saturate(.52) brightness(.82) drop-shadow(0 7px 5px rgba(16,24,18,.48));
}

.map-root .lost-link {
  right: -6px;
  top: -7px;
  width: 27px;
  height: 27px;
  border: 0;
  border-radius: 0;
  background: url("assets/icons/isolated.png") center / contain no-repeat;
  box-shadow: none;
  font-size: 0;
}

.map-root .lost-link b,
.map-root .lost-link span { display: none; }

.map-root .shield-marker {
  right: -8px;
  top: 18px;
  width: 28px;
  height: 28px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  color: transparent;
  background: url("assets/icons/shield.png") center / contain no-repeat;
  box-shadow: 0 0 8px rgba(91,181,241,.38);
  font-size: 0;
}

.map-root .decor-object {
  position: absolute;
  display: block;
  transform: translate(-50%, -50%) rotate(var(--decor-rotation, 0deg));
  transform-origin: 50% 78%;
  pointer-events: none;
  will-change: transform;
}
.map-root .decor-object img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  object-fit: contain;
  filter: saturate(.72) brightness(.78) drop-shadow(0 3px 3px rgba(18, 25, 18, .34));
}
.map-root .decor-object[data-decor-kind="forest"] img { filter: saturate(.7) brightness(.71) drop-shadow(0 4px 4px rgba(12, 23, 17, .38)); }
.map-root .decor-object[data-decor-kind="rocks"] img { filter: saturate(.55) brightness(.72) drop-shadow(0 3px 3px rgba(20, 24, 20, .34)); }
.map-root .decor-object[data-decor-kind="ruins"] img { filter: saturate(.5) brightness(.72) drop-shadow(0 3px 3px rgba(22, 22, 17, .35)); }
.map-root .decor-object[data-decor-kind="lantern"] img { filter: saturate(.78) brightness(.78) drop-shadow(0 0 4px rgba(212, 159, 68, .3)); }
.map-root .decor-object[data-decor-kind^="theme-"] img {
  filter: saturate(.94) brightness(.96) contrast(1.02) drop-shadow(0 3px 3px rgba(19, 22, 16, .42));
}
.map-root .decor-object[data-decor-kind="theme-sanctuary"] img {
  filter: saturate(1.02) brightness(.98) drop-shadow(0 0 5px rgba(103, 151, 206, .34)) drop-shadow(0 3px 3px rgba(19, 22, 16, .4));
}
.map-root .decor-object[data-decor-kind="theme-gate"] img,
.map-root .decor-object[data-decor-kind="theme-citadel"] img {
  filter: saturate(.8) brightness(.93) contrast(1.04) drop-shadow(0 3px 3px rgba(17, 19, 15, .45));
}
.map-root .decor-debug-label { display: none; }
.map-root.is-showing-decor-bounds .decor-object {
  outline: 1px dashed rgba(255, 102, 193, .9);
  background: rgba(255, 77, 184, .08);
}
.map-root.is-showing-decor-bounds .decor-debug-label {
  position: absolute;
  left: 50%;
  bottom: 100%;
  display: block;
  padding: 1px 3px;
  color: #fff;
  background: rgba(58, 10, 43, .88);
  font: 600 7px/1.2 ui-monospace, monospace;
  white-space: nowrap;
  transform: translateX(-50%) rotate(calc(-1 * var(--decor-rotation, 0deg)));
}

@media (prefers-reduced-motion: no-preference) {
  .map-root .territory-node.is-available .node-sprite-shell::after,
  .map-root .territory-node.is-artifact-target .node-sprite-shell::after {
    animation: map-target-soft-pulse 2.25s ease-in-out infinite;
  }

  @keyframes map-target-soft-pulse {
    0%, 100% { opacity: .5; transform: scale(.94); }
    50% { opacity: .82; transform: scale(1.035); }
  }
}

/* Environment decor is independent; the unused bridge layer stays hidden. */
.map-root .map-bridges[hidden],
.map-root .map-decor[hidden] { display: none; }

/* Painterly raster roads carry the normal appearance. SVG remains as the exact
   route geometry for available-state glow and the developer graph overlay. */
.map-root .map-road-art { z-index: 1; }
.map-root .map-roads { z-index: 1; overflow: visible; pointer-events: none; }
.map-root .map-roads path {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.map-root .map-road-base,
.map-root .map-road-surface,
.map-root .map-road-texture {
  display: none;
}
.map-root .map-road-base {
  stroke: rgba(91, 70, 43, .7);
  stroke-width: 6.25;
  stroke-dasharray: 8.6 .22 5.4 .18 11.2 .26;
  opacity: .7;
  filter:
    drop-shadow(-.45px .3px .45px rgba(55, 43, 27, .32))
    drop-shadow(.55px -.25px .5px rgba(65, 48, 29, .26));
}
.map-root .map-road-surface {
  stroke: rgba(181, 151, 94, .72);
  stroke-width: 3.8;
  stroke-dasharray: 10.4 .14 6.8 .18;
  opacity: .78;
  filter:
    drop-shadow(0 .55px .35px rgba(61, 46, 28, .2))
    drop-shadow(.35px 0 .3px rgba(218, 187, 125, .12));
}
.map-root .map-road-texture {
  stroke: rgba(218, 195, 139, .38);
  stroke-width: 1;
  stroke-dasharray: .45 2.3 1.1 3.7 .35 2.8;
  opacity: .5;
}
.map-root .map-road--outer .map-road-texture {
  stroke: rgba(181, 181, 116, .36);
}
.map-root .map-road--ancient .map-road-base {
  stroke: rgba(91, 80, 59, .74);
  stroke-width: 7;
  stroke-dasharray: 5.8 .18 9.2 .2 4.4 .16;
}
.map-root .map-road--ancient .map-road-surface {
  stroke: rgba(184, 169, 130, .78);
  stroke-width: 4.45;
  stroke-dasharray: 3.4 .24 6.8 .2 2.5 .18;
}
.map-root .map-road--ancient .map-road-texture {
  stroke: rgba(226, 214, 178, .48);
  stroke-width: 1.2;
  stroke-dasharray: 1.8 .8 .55 1.35 2.7 .9;
  opacity: .6;
}
.map-root .map-road-glow {
  stroke: rgba(235, 193, 101, .72);
  stroke-width: 17;
  opacity: 0;
  filter: blur(1.35px) drop-shadow(0 0 6px rgba(235, 190, 92, .3));
  transition: opacity .25s ease;
}
.map-root .map-road--available .map-road-glow { opacity: .2; }
.map-root .map-road--available .map-road-texture {
  stroke: rgba(248, 218, 145, .42);
  opacity: .68;
}
.map-root .map-bridges {
  z-index: 2;
  overflow: visible;
  pointer-events: none;
}
.map-root .road-bridge {
  position: absolute;
  display: block;
  height: auto;
  transform-origin: center;
  filter: saturate(.72) brightness(.82) drop-shadow(0 3px 3px rgba(24, 29, 22, .58));
}
.map-root .map-graph-overlay {
  z-index: 4;
  overflow: visible;
  pointer-events: none;
}
.map-root .map-graph-overlay[hidden] { display: none; }
.map-root .map-graph-overlay .debug-graph-edge {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke: rgba(116, 210, 230, .74);
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-dasharray: 4 3;
  filter: drop-shadow(0 0 1.5px rgba(8, 24, 29, .74));
}
.context-bar .debug-toggle {
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  color: #d5c7a7;
  border-bottom: 1px solid rgba(126, 99, 57, .34);
  cursor: pointer;
  font: 700 12px/1.2 var(--ui-font);
}
.context-bar .debug-toggle input { accent-color: #d2a84f; }

/* Sprint 6: fantasy question and event windows. Presentation only. */
.question-modal-backdrop {
  z-index: 160;
  padding: clamp(14px, 2.2vh, 26px);
  background:
    radial-gradient(circle at 50% 44%, rgba(70, 54, 29, .16), transparent 35%),
    rgba(4, 8, 7, .72);
  backdrop-filter: blur(2px) brightness(.68) saturate(.82);
}

.question-frame {
  position: relative;
  width: min(82vw, 1200px);
  max-height: 85vh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  padding: 0;
  overflow: hidden;
  border: 1px solid #c69a4d;
  border-radius: 5px;
  background: #25241d;
  box-shadow:
    inset 0 0 0 4px #21170e,
    inset 0 0 0 5px rgba(240, 201, 116, .34),
    0 0 0 1px rgba(18, 11, 7, .9),
    0 28px 90px rgba(0, 0, 0, .72);
}

.question-frame::before,
.event-modal::before {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 7px;
  border: 1px solid rgba(231, 191, 105, .26);
  clip-path: polygon(0 0, 25px 0, 25px 1px, calc(100% - 25px) 1px, calc(100% - 25px) 0, 100% 0, 100% 25px, calc(100% - 1px) 25px, calc(100% - 1px) calc(100% - 25px), 100% calc(100% - 25px), 100% 100%, calc(100% - 25px) 100%, calc(100% - 25px) calc(100% - 1px), 25px calc(100% - 1px), 25px 100%, 0 100%, 0 calc(100% - 25px), 1px calc(100% - 25px), 1px 25px, 0 25px);
  pointer-events: none;
}

.question-header {
  position: relative;
  z-index: 1;
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 15px 24px 14px;
  border-bottom: 1px solid #9d733c;
  background:
    linear-gradient(90deg, rgba(182, 131, 55, .12), transparent 36%, rgba(182, 131, 55, .08)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, #333128, #1b211c);
}

.question-header::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 3px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232, 190, 103, .5), transparent);
}

.question-header .question-object {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 0;
  border: 0;
}

.question-header .question-object > span {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: #f1cc79;
  border: 1px solid #aa7f40;
  border-radius: 4px;
  background: radial-gradient(circle, rgba(209, 160, 76, .2), rgba(13, 17, 14, .72));
  box-shadow: inset 0 0 0 2px rgba(14,10,7,.65);
  font-size: 23px;
}

.question-header .question-object div { min-width: 0; display: grid; gap: 3px; }
.question-header .question-object small {
  overflow: hidden;
  color: #b9ad98;
  font: 700 11px/1.2 var(--ui-font);
  letter-spacing: .08em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.question-header .question-object strong {
  overflow: hidden;
  color: #f4d98f;
  font: 600 clamp(18px, 1.55vw, 23px)/1.05 var(--display-font);
  letter-spacing: .035em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.question-header .question-meta {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #d8c9ab;
  font: 700 12px/1 var(--ui-font);
}
.question-header .question-meta > span {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border: 1px solid rgba(179, 139, 73, .42);
  border-radius: 3px;
  background: rgba(12, 17, 14, .45);
}
.question-header .question-meta > #question-type { display: none !important; }
.question-header .question-stars { color: #e7b955; font-size: 17px; letter-spacing: 1px; }
.timer { color: #eee0bd; font-variant-numeric: tabular-nums; }
.timer b { color: #f5cc73; font-size: 14px; }
.timer.is-urgent { color: #e5a062; border-color: #af603e !important; }

.question-content {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(18px, 2.4vh, 26px) clamp(22px, 2.5vw, 34px) clamp(20px, 2.5vh, 28px);
  color: #29251d;
  background:
    linear-gradient(rgba(238, 220, 178, .97), rgba(221, 195, 143, .97)),
    repeating-linear-gradient(0deg, rgba(98,68,32,.04) 0 1px, transparent 1px 5px);
  box-shadow: inset 0 10px 22px rgba(83, 55, 24, .14), inset 0 0 34px rgba(90, 58, 24, .16);
  scrollbar-color: #9d763e #d7bc87;
}

.question-content > h2,
.question-modal .question-content > h2 {
  max-width: 94%;
  margin: 0 auto clamp(16px, 2.3vh, 24px);
  color: #272218;
  font: 600 clamp(18px, 1.65vw, 24px)/1.38 var(--display-font);
  text-align: center;
}

.question-code {
  margin: -5px 0 18px;
  padding: 14px 18px;
  overflow: auto;
  color: #d8f0ee;
  border: 1px solid #536563;
  border-left: 4px solid #bd954b;
  border-radius: 4px;
  background: linear-gradient(145deg, #17262a, #101b1f);
  box-shadow: inset 0 0 18px rgba(0,0,0,.3);
  font: 600 clamp(14px, 1.1vw, 17px)/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap;
}

.answer-grid,
.question-modal fieldset {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 18px;
  padding: 0;
  border: 0;
}

.answer-option {
  position: relative;
  min-width: 0;
  min-height: clamp(50px, 6.5vh, 62px);
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 24px;
  gap: 10px;
  align-items: center;
  padding: 8px 11px;
  color: #f0e7d5;
  border: 1px solid #5f5b4a;
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(65,63,52,.98), rgba(38,39,34,.99));
  box-shadow: inset 0 1px rgba(255,255,255,.04), 0 2px 4px rgba(76,49,20,.18);
  cursor: pointer;
  font: 600 clamp(14px, 1.02vw, 16px)/1.32 var(--ui-font);
  transition: border-color .14s ease, background .14s ease, box-shadow .14s ease, transform .14s ease, opacity .14s ease;
}
.answer-option:hover:not(.answer-option--disabled) {
  color: #fff4d6;
  border-color: #c89c4f;
  background: linear-gradient(180deg, #565040, #36352d);
  box-shadow: inset 0 0 0 1px rgba(243,199,109,.16), 0 3px 8px rgba(69,43,17,.22);
  transform: translateY(-1px);
}
.answer-option input { position: absolute; opacity: 0; pointer-events: none; }
.answer-letter {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  color: #d6c09a;
  border: 1px solid #817153;
  border-radius: 3px;
  background: rgba(15, 18, 15, .5);
  font: 700 14px/1 var(--display-font);
}
.answer-text { min-width: 0; }
.answer-state { width: 18px; color: #f0c66d; font: 900 18px/1 var(--ui-font); text-align: center; }

.answer-option.is-chosen,
.answer-option--selected {
  color: #fff4d5;
  border-color: #e0b354;
  background: linear-gradient(180deg, #5d5036, #3c3528);
  box-shadow: inset 3px 0 #e5ba5d, inset 0 0 0 1px rgba(255,218,135,.14), 0 0 10px rgba(197,145,57,.2);
}
.answer-option--selected .answer-state::before { content: "◆"; }
.answer-option--correct {
  color: #f4f2d9;
  border-color: #7caf65;
  background: linear-gradient(180deg, #3e6540, #29452f);
  box-shadow: inset 4px 0 #a5c76b, 0 0 11px rgba(93,146,70,.26);
}
.answer-option--correct .answer-state::before { content: "✓"; }
.answer-option--wrong {
  color: #f2ded8;
  border-color: #b35748;
  background: linear-gradient(180deg, #663a32, #462b28);
  box-shadow: inset 4px 0 #c26653;
}
.answer-option--wrong .answer-state::before { content: "×"; }
.answer-option.is-eliminated,
.answer-option--disabled {
  display: grid;
  opacity: .38;
  filter: grayscale(.55);
  cursor: not-allowed;
}
.answer-option.is-eliminated .answer-text { text-decoration: line-through; text-decoration-thickness: 1px; }
.answer-option--correct.answer-option--disabled,
.answer-option--wrong.answer-option--disabled { opacity: 1; filter: none; }

.answer-option:focus-within {
  outline: 3px solid #e4bb62;
  outline-offset: 2px;
}

.question-actions {
  position: sticky;
  z-index: 2;
  bottom: -1px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 -4px -3px;
  padding: 8px 4px 3px;
  background: linear-gradient(180deg, rgba(226,204,160,0), #dfc696 22%);
}
.question-actions .button,
.question-modal .question-actions .button { width: auto; min-width: 190px; min-height: 46px; }
.question-actions #answer-button { margin-left: auto; }
.question-actions .hint-button { min-width: 230px; color: #34281a; border-color: #a77c38; background: rgba(239, 218, 174, .65); }
.question-actions .hint-button:hover:not(:disabled) { border-color: #72501e; background: #ead19e; }
.question-actions .button-primary {
  color: #211708;
  border: 1px solid #76501f;
  background: linear-gradient(180deg, #f3d584, #c99237 58%, #a96924);
  box-shadow: inset 0 1px #fff0b4, 0 4px 10px rgba(81,48,12,.32);
}
.question-actions .button-primary:disabled { color: #746b5c; border-color: #8c806c; background: #c1b69f; box-shadow: none; opacity: .65; }
.has-result .question-actions { display: none; }

.feedback {
  margin-top: 17px;
  padding: 16px 18px 18px;
  color: #302a20;
  border: 1px solid #9e7e4b;
  border-radius: 4px;
  background: rgba(249, 235, 202, .62);
  text-align: left;
}
.feedback-heading { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; }
.feedback-heading .result-mark {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  transform: none;
  font: 900 23px/1 var(--ui-font);
}
.feedback-heading h3,
.question-result h3 { margin: 0; color: inherit; font: 700 25px/1 var(--display-font); letter-spacing: .05em; text-transform: uppercase; }
.feedback--correct .feedback-heading h3 { font-size: clamp(29px, 2.4vw, 36px); letter-spacing: .075em; }
.feedback--correct { color: #39652f !important; border-color: #7eaa64; box-shadow: inset 4px 0 #83a961; }
.feedback--wrong { color: #8b3e33 !important; border-color: #af6a5a; box-shadow: inset 4px 0 #a95445; }
.feedback .energy-gain { margin: 0 0 0 auto; color: #72511c; font: 700 12px/1.3 var(--ui-font); letter-spacing: .02em; }
.feedback-answers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-bottom: 12px; }
.feedback-answers p { margin: 0; padding: 10px 12px; border: 1px solid rgba(100,72,38,.25); background: rgba(106,75,38,.08); }
.feedback-answers small { display: block; margin-bottom: 4px; color: #756550; font: 700 10px/1 var(--ui-font); letter-spacing: .06em; text-transform: uppercase; }
.feedback-answers b { color: #30271c; font: 700 14px/1.35 var(--ui-font); }
.feedback-explanation,
.question-result .feedback-explanation { margin: 0; color: #40372a; font: 500 14px/1.5 var(--ui-font); }
.feedback-explanation b { color: #6b4b1e; }
.feedback .button,
.question-modal .feedback .button { width: auto; min-width: 190px; display: block; margin: 14px 0 0 auto; }

.question-visual {
  position: relative;
  height: clamp(220px, 28vh, 280px);
  min-height: 0;
  margin: -5px 0 16px;
  overflow: hidden;
  border: 2px solid #9d7135;
  border-radius: 4px;
  background:
    linear-gradient(rgba(18,24,21,.18), rgba(18,24,21,.5)),
    radial-gradient(circle at 50% 25%, #7d7c65, #27342e 64%, #111914);
  box-shadow: inset 0 0 0 4px rgba(23,15,9,.48), 0 5px 14px rgba(79,51,22,.24);
}
.question-visual > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: #111814;
}
.theatre-image-placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 9px;
  color: #ddc892;
  background:
    radial-gradient(circle at 50% 44%, rgba(191, 153, 83, .14), transparent 35%),
    linear-gradient(145deg, #222b26, #121915);
  text-align: center;
}
.theatre-image-placeholder span { font-size: 34px; opacity: .72; }
.theatre-image-placeholder strong { font: 600 17px/1.2 var(--display-font); letter-spacing: .04em; }
.theatre-modal { width: min(88vw, 1320px); }
.theatre-modal .question-content > h2 { margin-bottom: 14px; font-size: clamp(17px, 1.45vw, 22px); }
.theatre-modal .answer-option { min-height: 52px; }
.theatre-modal .question-actions {
  display: grid;
  grid-template-columns: minmax(230px, auto) 1fr minmax(190px, auto);
}
.theatre-modal .question-actions .hint-button { grid-column: 1; justify-self: start; }
.theatre-modal .question-actions #answer-button { grid-column: 3; justify-self: end; margin-left: 0; }

#question-modal.is-citadel-trial .question-frame {
  border-color: #e2b65d;
  background: #241c12;
  box-shadow: inset 0 0 0 4px #171008, inset 0 0 0 5px rgba(255,217,128,.42), 0 0 55px rgba(216,167,74,.28), 0 28px 90px rgba(0,0,0,.76);
}
#question-modal.is-citadel-trial .question-header { background: radial-gradient(circle at 50% 0, rgba(206,155,65,.21), transparent 54%), linear-gradient(180deg, #3e3322, #201a13); }
#question-modal.is-citadel-trial .question-content { background: linear-gradient(rgba(239,220,175,.98),rgba(219,190,134,.98)); }
.citadel-question-progress {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: 13px 25px 11px;
  border: 0;
  border-bottom: 1px solid rgba(235,194,105,.52);
  background: linear-gradient(90deg, #241a0f, #59401d 50%, #241a0f);
  text-align: center;
}
.citadel-question-progress .eyebrow { margin: 0 0 4px; color: #e9bd62; }
.citadel-question-progress strong { color: #fff0c1; font: 600 16px/1.2 var(--display-font); text-transform: uppercase; }
.citadel-question-progress div { margin-top: 7px; color: #efd38f; font: 800 17px/1 var(--ui-font); }
.citadel-question-progress div span { margin: 0 13px; color: rgba(242,211,142,.45); }

.event-modal {
  position: relative;
  width: min(520px, 92vw);
  max-height: calc(100vh - 40px);
  overflow: auto;
  padding: 28px 30px;
  border: 1px solid #bd8e43;
  border-radius: 5px;
  background:
    radial-gradient(circle at 50% 0, rgba(217,164,68,.18), transparent 38%),
    linear-gradient(150deg, #37342a, #181d18 78%);
  box-shadow: inset 0 0 0 5px rgba(19,12,7,.58), inset 0 0 0 6px rgba(226,181,94,.2), 0 24px 75px rgba(0,0,0,.68);
  text-align: center;
}
.event-modal .event-modal-content { position: relative; z-index: 1; }
.event-modal .eyebrow { color: #d9ad59; }
.event-modal h2 { color: #f5dfac; letter-spacing: .045em; text-transform: uppercase; }
.event-modal-actions { display: flex; justify-content: center; gap: 9px; margin-top: 16px; }
.event-modal-actions .button,
.event-modal .event-modal-actions .button { width: auto; min-width: 180px; margin: 0; }

.citadel-dialog.citadel-trial {
  width: min(800px, 92vw);
  min-height: 400px;
  display: grid;
  grid-template-columns: 42% 1fr;
  align-items: stretch;
  padding: 0;
  overflow: hidden;
  background: linear-gradient(145deg, #3a3020, #151a16);
}
.citadel-trial-art {
  position: relative;
  min-height: 400px;
  display: grid;
  place-items: end center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 44%, rgba(242,188,78,.52), transparent 28%),
    linear-gradient(180deg, #152321, #0b100d 72%);
}
.citadel-trial-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 62%, #181b15), linear-gradient(0deg, rgba(8,10,8,.75), transparent 38%); }
.citadel-trial-art img { position: relative; z-index: 1; width: 118%; max-width: none; margin-bottom: -1%; filter: brightness(.9) saturate(.85) drop-shadow(0 0 18px rgba(240,186,72,.55)); }
.citadel-dialog .event-modal-content { align-self: center; padding: 34px 32px 30px 20px; }
.citadel-dialog .choice-mark { color: #f1c568; }
.citadel-dialog > .event-modal-content > p:not(.eyebrow) { color: #d6cfbd; }
.citadel-trial-failed .citadel-trial-art { filter: grayscale(.25) brightness(.68); }
.citadel-trial-failed h2 { color: #e3c6ad; }

.artifact-found-modal { width: min(480px, 92vw); }
.artifact-event-icon {
  position: relative;
  width: 132px;
  height: 132px;
  display: grid;
  place-items: center;
  margin: 8px auto 10px;
  color: #ffe19a;
  border: 1px solid #c28e3e;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,203,94,.3), rgba(65,45,22,.24) 62%, transparent 63%);
  box-shadow: 0 0 34px rgba(231,173,62,.26), inset 0 0 18px rgba(255,211,116,.14);
  overflow: hidden;
  font-size: 0;
}
.artifact-event-icon > img,
.artifact-replace-icon > img {
  position: absolute;
  left: 0;
  top: 50%;
  width: 800%;
  max-width: none;
  height: auto;
  transform: translateY(-50%);
  pointer-events: none;
}
.artifact-event-name { margin: 0 0 8px !important; color: #f4d27f !important; font: 700 22px/1.1 var(--display-font) !important; text-transform: uppercase; }
.artifact-found-modal .choice-description { max-width: 370px; margin-right: auto !important; margin-left: auto !important; }
.inventory-replacement { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.inventory-replacement .artifact-replace {
  min-width: 0;
  min-height: 92px;
  display: grid;
  place-items: center;
  gap: 2px;
  padding: 9px 6px;
  color: #eee1c5;
  border: 1px solid #725f40;
  background: rgba(17,23,18,.72);
  cursor: pointer;
}
.inventory-replacement .artifact-replace:hover,
.inventory-replacement .artifact-replace:focus-visible { border-color: #d1a350; background: rgba(104,78,37,.34); }
.inventory-replacement .artifact-replace-icon {
  position: relative;
  width: 46px;
  height: 46px;
  display: block;
  overflow: hidden;
  font-size: 0;
}
.inventory-replacement .artifact-replace > span:nth-child(2) { overflow: hidden; max-width: 100%; font: 700 11px/1.2 var(--ui-font); text-overflow: ellipsis; white-space: nowrap; }
.inventory-replacement .artifact-replace small { color: #b99f6e; font: 600 9px/1 var(--ui-font); text-transform: uppercase; }

.citadel-victory-reveal { overflow: hidden; }
.citadel-victory-reveal > img {
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: -11%;
  width: min(660px, 65vw);
  transform: translateX(-50%);
  opacity: .48;
  filter: brightness(1.18) saturate(.9) drop-shadow(0 0 48px rgba(255,205,100,.72));
}
.citadel-victory-reveal > span,
.citadel-victory-reveal > p,
.citadel-victory-reveal > strong { position: relative; z-index: 1; }

.turn-transition {
  position: fixed;
  z-index: 145;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  color: #f5e6c2;
  background: radial-gradient(circle, rgba(38,48,38,.83), rgba(7,11,9,.2) 47%, transparent 66%);
  text-align: center;
  pointer-events: none;
}
.turn-transition::before { content: ""; position: absolute; left: 24%; right: 24%; top: 50%; height: 1px; background: linear-gradient(90deg, transparent, rgba(224,183,92,.76), transparent); }
.turn-transition-flags { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.turn-transition-flags i { width: 28px; height: 38px; clip-path: polygon(0 0,100% 0,100% 72%,50% 100%,0 72%); background: #487da7; box-shadow: 0 0 14px currentColor; }
.turn-transition-flags i:last-child { background: #9c4037; }
.turn-transition-flags b { color: #d9bd7e; font: 700 11px/1 var(--ui-font); }
.turn-transition p { position: relative; z-index: 1; margin: 0 0 7px; color: #efd18a; font: 600 clamp(25px, 3vw, 42px)/1 var(--display-font); letter-spacing: .08em; text-transform: uppercase; }
.turn-transition strong { position: relative; z-index: 1; color: #f7ead0; font: 700 16px/1.2 var(--ui-font); }
.turn-transition.is-red p { color: #e7b09d; }

@media (max-height: 800px) and (min-width: 921px) {
  .question-frame { max-height: calc(100vh - 28px); }
  .question-header { min-height: 66px; padding-top: 11px; padding-bottom: 10px; }
  .question-header .question-object > span { width: 38px; height: 38px; flex-basis: 38px; }
  .question-content { padding-top: 16px; padding-bottom: 16px; }
  .question-content > h2, .question-modal .question-content > h2 { margin-bottom: 14px; font-size: 19px; }
  .answer-option { min-height: 50px; padding-top: 7px; padding-bottom: 7px; }
  .question-visual { height: clamp(225px, 32vh, 250px); margin-bottom: 11px; }
  .theatre-modal .question-content { padding-top: 13px; padding-bottom: 12px; overflow-y: hidden; }
  .theatre-modal .question-content > h2 { margin-bottom: 10px; line-height: 1.24; }
  .theatre-modal .answer-grid { gap: 8px; margin-bottom: 10px; }
  .theatre-modal .answer-option { min-height: 46px; padding-top: 6px; padding-bottom: 6px; }
  .theatre-modal .question-actions { padding-top: 5px; }
  .feedback { margin-top: 11px; padding-top: 11px; padding-bottom: 12px; }
  .feedback-heading { margin-bottom: 7px; }
  .feedback-heading .result-mark { width: 32px; height: 32px; flex-basis: 32px; font-size: 19px; }
  .feedback-heading h3, .question-result h3 { font-size: 21px; }
}

@media (max-width: 1180px) and (min-width: 921px) {
  .question-frame { width: 84vw; }
  .theatre-modal { width: 88vw; }
}

/* Citadel stays the largest landmark; only its artwork is visually reduced. */
.map-root .territory-node.visual-citadel .building-sprite,
.map-root .territory-node.type-citadel .building-sprite {
  transform: scale(.93);
  transform-origin: 50% 68%;
}

@media (prefers-reduced-motion: no-preference) {
  .question-frame, .event-modal { animation: fantasy-modal-enter .2s ease-out both; }
  .timer.is-urgent { animation: timer-warning .8s ease-in-out infinite; }
  .turn-transition { animation: turn-transition 1s ease both; }
  .citadel-victory-reveal > img { animation: citadel-light 1.45s ease both; }
  @keyframes fantasy-modal-enter { from { opacity: 0; transform: translateY(9px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
  @keyframes timer-warning { 50% { color: #ffd08c; box-shadow: 0 0 12px rgba(203,94,51,.3); } }
  @keyframes turn-transition { 0% { opacity: 0; } 18%, 72% { opacity: 1; } 100% { opacity: 0; } }
  @keyframes citadel-light { from { opacity: .1; transform: translateX(-50%) scale(.94); } 45% { opacity: .66; } to { opacity: .48; transform: translateX(-50%) scale(1.04); } }
}

@media (prefers-reduced-motion: reduce) {
  .question-frame, .event-modal, .turn-transition, .citadel-victory-reveal > img { animation: none !important; }
}

/* Sprint 6 — start flow. Presentation state only; match state remains in game.js. */
.start-screen,
.setup-screen {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(7,12,10,.86) 0%, rgba(8,13,11,.68) 38%, rgba(8,12,10,.3) 70%, rgba(7,10,8,.46) 100%),
    linear-gradient(0deg, rgba(7,10,8,.72), transparent 42%),
    url("assets/map/map_base_v3.png") center / cover no-repeat;
}
.start-screen::after,
.setup-screen::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 58% 45%, rgba(238,190,89,.08), transparent 25%),
    linear-gradient(180deg, rgba(5,8,7,.2), transparent 23%, transparent 70%, rgba(5,8,7,.6));
  box-shadow: inset 0 0 110px rgba(3,6,4,.72);
}
.start-screen::before,
.setup-screen::before {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 12px;
  border: 1px solid rgba(222,178,89,.52);
  box-shadow: inset 0 0 0 4px rgba(15,12,7,.5), inset 0 0 26px rgba(232,182,79,.06);
  pointer-events: none;
}
.menu-landscape { display: none; }
.menu-content {
  position: relative;
  z-index: 2;
  container-type: inline-size;
  width: min(480px, 42vw);
  margin-right: min(46vw, 720px);
  padding: 30px 38px 26px;
  border: 1px solid rgba(203,157,76,.5);
  background: linear-gradient(145deg, rgba(23,27,21,.9), rgba(8,13,10,.8));
  box-shadow: inset 0 0 0 4px rgba(5,8,6,.48), 0 22px 70px rgba(0,0,0,.42);
  backdrop-filter: blur(5px);
}
.game-crest {
  width: 72px;
  height: 80px;
  margin-bottom: 12px;
  border-radius: 4px 4px 28px 28px;
  background: linear-gradient(145deg, rgba(42,92,126,.68), rgba(88,52,33,.56));
}
.game-crest span { font-size: 28px; }
.game-crest i { font-size: 13px; }
.start-screen h1 {
  display: grid;
  justify-items: center;
  width: 100%;
  margin: 0 0 9px;
  color: #f2d48e;
  font: 600 clamp(40px, 4.1vw, 58px)/.86 var(--display-font);
  font-size: clamp(40px, 13.8cqw, 58px);
  letter-spacing: .01em;
  text-transform: uppercase;
  text-shadow: 0 3px 0 #3b2813, 0 0 25px rgba(240,190,91,.23);
}
.start-screen h1 span { max-width: 100%; white-space: nowrap; }
.start-screen h1 span:last-child { font-size: .82em; letter-spacing: .08em; }
.menu-subtitle {
  margin: 0 0 24px;
  color: #e6c983;
  font: 600 16px/1.25 var(--display-font);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.menu-actions { width: min(310px, 100%); margin: 0 auto; gap: 8px; }
.menu-actions > .button { width: 100%; min-height: 45px; display: flex; align-items: center; justify-content: flex-start; gap: 12px; margin: 0; padding-right: 20px; padding-left: 20px; }
.menu-actions .menu-battle-button { min-width: 0; min-height: 56px; justify-content: center; color: #1d160b; font-size: 15px; }
.menu-actions .button-quiet { min-width: 0; color: #eee2ca; border: 1px solid rgba(166,139,89,.58); background: rgba(19,24,19,.78); }
.menu-actions .button-quiet:hover,
.menu-actions .button-quiet:focus-visible { border-color: #d2a955; background: rgba(105,78,37,.5); }
.menu-motto { margin: 18px 0 0; color: #bcb39f; font: 600 12px/1.3 var(--ui-font); letter-spacing: .08em; }

.setup-screen {
  display: grid;
  place-items: center;
  padding: 28px;
  text-align: center;
  background:
    linear-gradient(rgba(7,11,9,.76), rgba(7,11,9,.82)),
    url("assets/map/map_base_v3.png") center / cover no-repeat;
}
.setup-backdrop {
  position: absolute;
  z-index: -1;
  inset: -12px;
  background: inherit;
  filter: blur(4px) saturate(.72);
}
.setup-step {
  animation: setup-flow-enter .24s ease-out both;
}
.flow-shell {
  position: relative;
  z-index: 2;
  width: min(1060px, 92vw);
  min-height: min(650px, calc(100vh - 56px));
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-items: center;
  padding: 26px 30px 20px;
  border: 1px solid rgba(205,159,78,.65);
  background:
    radial-gradient(circle at 50% 0, rgba(183,137,59,.11), transparent 35%),
    linear-gradient(145deg, rgba(31,34,27,.97), rgba(11,16,12,.96));
  box-shadow: inset 0 0 0 4px rgba(6,9,7,.55), inset 0 0 0 5px rgba(224,177,86,.09), 0 25px 80px rgba(0,0,0,.58);
}
.flow-shell::before,
.flow-shell::after {
  content: "◆";
  position: absolute;
  top: 12px;
  color: #9f773d;
  font-size: 10px;
}
.flow-shell::before { left: 14px; }
.flow-shell::after { right: 14px; }
.flow-heading { align-self: start; margin-bottom: 18px; text-align: center; }
.flow-heading .eyebrow { margin-bottom: 6px; color: #b99557; font-size: 10px; }
.flow-heading h2 { margin: 0; color: #f0dfb8; font: 600 clamp(27px, 3vw, 39px)/1.05 var(--display-font); letter-spacing: .045em; text-transform: uppercase; }
.flow-heading > p:last-child { margin: 7px 0 0; color: #bdb7a8; font: 500 14px/1.35 var(--ui-font); }
.mode-grid { display: grid; place-items: center; }
.flow-choice-card,
.pack-card {
  color: inherit;
  font-family: var(--ui-font);
  text-align: center;
}
.flow-choice-card {
  cursor: pointer;
}
.mode-card {
  position: relative;
  width: min(560px, 72vw);
  min-height: 300px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  padding: 32px;
  border: 1px solid #816739;
  background:
    radial-gradient(circle at 50% 40%, rgba(188,138,54,.2), transparent 38%),
    linear-gradient(145deg, rgba(55,53,39,.94), rgba(20,25,19,.97));
  box-shadow: inset 0 0 0 4px rgba(9,12,9,.55);
}
.flow-choice-card.is-selected { border-color: #e0b85f; box-shadow: inset 0 0 0 4px rgba(9,12,9,.55), 0 0 24px rgba(230,181,77,.24); }
.choice-emblem { width: 78px; height: 78px; display: grid; place-items: center; color: #f2c66a; border: 1px solid #9f7d44; border-radius: 50%; background: rgba(13,18,14,.66); font-size: 37px; }
.mode-card strong { color: #f4e5c4; font: 600 27px/1.15 var(--display-font); }
.mode-card > span:not(.choice-emblem) { color: #cbc5b8; font: 500 14px/1.55 var(--ui-font); }
.mode-card > b,
.pack-card.is-selected > b { padding: 7px 12px; color: #f0d592; border: 1px solid rgba(216,172,83,.48); background: rgba(124,92,39,.25); font: 800 10px/1 var(--ui-font); letter-spacing: .1em; text-transform: uppercase; }

.pack-grid {
  display: grid;
  grid-template-columns: 1.55fr repeat(3, 1fr);
  gap: 10px;
  align-items: stretch;
}
.pack-card {
  min-width: 0;
  min-height: 300px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 10px;
  padding: 20px 16px;
  border: 1px solid #665c47;
  background: linear-gradient(145deg, rgba(43,48,38,.92), rgba(18,23,18,.96));
}
.pack-card .choice-emblem { width: 64px; height: 64px; font-size: 29px; }
.pack-card strong { color: #eee1c7; font: 600 19px/1.15 var(--display-font); }
.pack-card small { color: #b7aa90; font: 700 11px/1.2 var(--ui-font); text-transform: uppercase; }
.pack-card ul { margin: 2px 0; padding: 0; color: #c9c4b8; font: 500 12px/1.5 var(--ui-font); list-style: none; }
.pack-card ul li::before { content: "◆ "; color: #bf9950; font-size: 7px; }
.pack-card.is-disabled { opacity: .54; filter: grayscale(.48); }
.pack-card.is-disabled > span { color: #a7a394; font-size: 37px; }

.players-step .duel-form { align-self: stretch; }
.players-step .academy-choice { min-height: 315px; }
.duel-flow-nav { grid-column: 1 / -1; }
.flow-nav {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(150px, 1fr) auto minmax(150px, 1fr);
  align-items: center;
  gap: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(144,117,69,.28);
}
.flow-nav > .button:first-child { justify-self: start; }
.flow-nav > .button:last-child { justify-self: end; }
.flow-nav .button { min-width: 160px; margin: 0; }
.flow-progress { display: flex; align-items: center; gap: 10px; }
.flow-progress i { width: 8px; height: 8px; border: 1px solid #827252; border-radius: 50%; background: #232a21; }
.flow-progress i.is-current { border-color: #f0c868; background: #f0c868; box-shadow: 0 0 11px rgba(240,200,104,.75); }

.flow-rules-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.flow-rules-grid article {
  position: relative;
  min-height: 245px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 14px;
  padding: 22px 18px;
  border: 1px solid rgba(151,121,68,.56);
  background: linear-gradient(145deg, rgba(48,48,36,.8), rgba(18,24,18,.9));
}
.flow-rules-grid article > b { position: absolute; top: 12px; left: 14px; color: #a68c5e; font: 800 12px/1 var(--ui-font); }
.flow-rules-grid article > span { width: 66px; height: 66px; display: grid; place-items: center; color: #f0c36b; border: 1px solid #8d7248; border-radius: 50%; font-size: 31px; }
.flow-rules-grid article > strong { color: #eee1c7; font: 600 18px/1.3 var(--display-font); }
.flow-rules-grid article > p { margin: -5px 0 0; color: #b9b2a4; font: 500 12px/1.4 var(--ui-font); }

@keyframes setup-flow-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-height: 800px) and (min-width: 921px) {
  .menu-content { padding-top: 19px; padding-bottom: 18px; }
  .game-crest { width: 58px; height: 64px; margin-bottom: 8px; }
  .start-screen h1 { font-size: clamp(40px, 13.8cqw, 56px); }
  .menu-subtitle { margin-bottom: 16px; }
  .flow-shell { min-height: min(650px, calc(100vh - 56px)); padding-top: 18px; padding-bottom: 14px; }
  .flow-heading { margin-bottom: 11px; }
  .mode-card { min-height: 270px; }
  .pack-card { min-height: 276px; padding-top: 14px; padding-bottom: 14px; }
  .players-step .academy-choice { min-height: 292px; }
  .flow-rules-grid article { min-height: 215px; }
  .flow-nav { padding-top: 13px; }
}

@media (max-width: 1120px) and (min-width: 921px) {
  .menu-content { margin-right: 42vw; }
  .pack-grid { grid-template-columns: 1.35fr repeat(3, 1fr); }
  .pack-card { padding-right: 10px; padding-left: 10px; }
  .flow-rules-grid article { padding-right: 10px; padding-left: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .setup-step { animation: none; }
}

/* Sprint 6 — results screen. All values are rendered from getMatchSummary(). */
.results-screen {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 14px;
  background:
    linear-gradient(180deg, rgba(7,11,9,.7), rgba(6,10,8,.88)),
    url("assets/map/map_base_v3.png") center / cover no-repeat;
}
.results-screen::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 7%, rgba(206,159,67,.2), transparent 35%);
  box-shadow: inset 0 0 120px rgba(2,5,3,.86);
}
.results-screen.victory-citadel::after {
  background:
    radial-gradient(circle at 50% 6%, rgba(255,207,105,.34), transparent 36%),
    linear-gradient(180deg, rgba(129,91,34,.12), transparent 50%);
}
.results-screen::before { inset: 8px; border-color: rgba(220,173,81,.48); }
.results-panel {
  width: min(1320px, calc(100vw - 28px));
  max-height: calc(100vh - 28px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 10px;
  margin: 0;
  padding: 14px 16px 12px;
  overflow: auto;
  border-color: #9b753c;
  background:
    radial-gradient(circle at 50% 0, rgba(190,141,58,.13), transparent 30%),
    linear-gradient(145deg, rgba(31,37,29,.98), rgba(11,16,12,.99));
  box-shadow: inset 0 0 0 4px rgba(6,9,7,.64), inset 0 0 0 5px rgba(226,177,86,.1), 0 25px 85px rgba(0,0,0,.68);
  scrollbar-color: #8f6d38 #141a14;
}
.results-hero {
  min-height: 92px;
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) 245px;
  align-items: center;
  gap: 15px;
  padding: 6px 10px 10px;
  border-bottom: 1px solid rgba(173,137,72,.34);
  text-align: left;
}
.results-hero .result-crest {
  width: 58px;
  height: 64px;
  display: grid;
  place-items: center;
  margin: 0;
  color: #f1c765;
  border: 1px solid #a27b3f;
  border-radius: 4px 4px 22px 22px;
  background: rgba(113,82,37,.22);
  font-size: 27px;
  box-shadow: 0 0 20px rgba(229,177,75,.12);
}
.results-hero-copy { min-width: 0; }
.results-hero-copy .eyebrow { margin-bottom: 4px; font-size: 9px; }
#results-title {
  margin: 0;
  color: #f2d793;
  font: 600 clamp(21px, 2.15vw, 30px)/1.05 var(--display-font);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.winner-name { margin: 5px 0 0; color: #fff0ce; font: 600 18px/1.1 var(--display-font); }
.victory-label { margin: 3px 0 0; color: #bdb49f; font: 600 11px/1.2 var(--ui-font); letter-spacing: .04em; }
.victory-detail {
  min-height: 73px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  padding: 7px 12px;
  color: #efe1c2;
  border: 1px solid rgba(181,143,72,.5);
  background: rgba(16,22,17,.62);
  text-align: center;
}
.victory-detail > small { color: #b9a882; font: 800 9px/1 var(--ui-font); letter-spacing: .09em; text-transform: uppercase; }
.victory-detail > strong { color: #f3d58f; font: 700 12px/1.15 var(--ui-font); }
.citadel-result-marks { display: flex; gap: 7px; }
.citadel-result-marks span { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; font: 800 13px/1 var(--ui-font); }
.citadel-result-marks .is-correct { color: #bad58d; background: rgba(83,126,61,.22); }
.citadel-result-marks .is-wrong { color: #d89683; background: rgba(139,65,53,.2); }
.influence-final-score { display: flex; align-items: center; gap: 9px; color: #ddbd78; font: 600 22px/1 var(--display-font); }
.influence-final-score b:first-child { color: #91bfe0; }
.influence-final-score b:last-child { color: #d58b78; }
.victory-detail-icon { color: #e6bd65; font-size: 23px; }

.results-comparison {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 10px;
  text-align: left;
}
.result-player {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 11px 12px 10px;
  border: 1px solid #655942;
  border-radius: 2px;
  background: linear-gradient(145deg, rgba(47,55,43,.88), rgba(20,27,21,.94));
  box-shadow: inset 0 0 26px rgba(0,0,0,.21);
}
.result-player.player-blue { border-left: 4px solid #78aed6; }
.result-player.player-red { border-left: 4px solid #bd6958; }
.result-player.is-winner {
  border-color: #d0a653;
  box-shadow: inset 0 0 0 1px rgba(239,197,105,.3), inset 0 0 28px rgba(193,144,51,.08), 0 0 23px rgba(218,168,69,.16);
}
.result-player-header { min-height: 37px; margin-bottom: 7px; align-items: center; }
.result-player-header small { color: #b8af9d; font-size: 9px; }
.result-player h2 { margin-top: 2px; color: #f4e7ce; font: 600 20px/1 var(--display-font); }
.winner-badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 7px; color: #ffe7ad; border-color: #bd9450; border-radius: 2px; background: rgba(145,103,41,.28); font-size: 9px; text-transform: uppercase; }
.winner-badge i { color: #f1c464; font-style: normal; }
.result-highlights { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 7px; }
.result-highlights div { min-height: 61px; display: grid; place-items: center; align-content: center; gap: 3px; padding: 6px; border: 1px solid rgba(141,119,76,.38); border-radius: 2px; background: rgba(10,15,12,.45); }
.result-highlights strong { margin: 0; color: #f2d58f; font: 600 25px/1 var(--display-font); }
.result-highlights span { min-height: 0; color: #aaa595; font: 700 9px/1 var(--ui-font); letter-spacing: .06em; text-transform: uppercase; }
.match-details {
  display: grid;
  grid-template-columns: 1.35fr repeat(4, 1fr);
  margin: 0 0 7px !important;
  border: 1px solid rgba(131,112,77,.27);
  background: rgba(13,19,14,.36);
}
.result-player .match-details > div { min-width: 0; display: grid; justify-items: center; gap: 2px; padding: 5px 4px; border: 0; border-right: 1px solid rgba(131,112,77,.24); }
.result-player .match-details > div:last-child { border-right: 0; }
.match-details dt { color: #9f9e92; font: 700 8px/1.2 var(--ui-font); text-transform: uppercase; white-space: nowrap; }
.match-details dd { color: #eee0c3; font: 800 11px/1 var(--ui-font); }

.result-learning-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 9px; }
.result-player .learning-section,
.result-player .achievement-section { margin: 0; padding: 0; border: 0; }
.result-player .learning-section h3,
.result-player .achievement-section h3 { margin: 0 0 5px; color: #d8ba78; font: 800 9px/1 var(--ui-font); letter-spacing: .1em; text-transform: uppercase; }
.stat-list { padding: 4px 7px; border: 1px solid rgba(130,111,75,.28); background: rgba(13,19,14,.3); }
.stat-list > div { min-height: 20px; padding: 3px 0; border-bottom: 1px solid rgba(130,111,75,.14); font: 600 10px/1.2 var(--ui-font); }
.stat-list > div:last-child { border-bottom: 0; }
.stat-list span { overflow: hidden; color: #cbc4b5; text-overflow: ellipsis; white-space: nowrap; }
.stat-list strong { color: #f0dfbd; font-size: 10px; }
.learning-summary { display: grid; align-content: start; gap: 7px; }
.learning-insights { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0; padding: 0; background: none; }
.learning-callout { min-width: 0; display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 5px; min-height: 55px; padding: 6px; border: 1px solid rgba(158,127,70,.34); background: rgba(87,70,39,.14); }
.learning-callout > span { font-size: 18px; }
.learning-callout > div { min-width: 0; display: grid; gap: 2px; }
.learning-callout small { color: #aaa18d; font: 700 7px/1.15 var(--ui-font); text-transform: uppercase; }
.learning-callout strong { display: -webkit-box; overflow: hidden; color: #eee0c2; font: 700 9px/1.12 var(--ui-font); -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.learning-callout em { color: #c8b587; font: 600 8px/1 var(--ui-font); }
.type-section { min-width: 0; }
.type-results { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; padding: 4px 7px; border: 1px solid rgba(130,111,75,.28); background: rgba(13,19,14,.3); }
.type-results > div { min-height: 19px; padding: 3px 0; border-bottom: 1px solid rgba(130,111,75,.14); font: 600 9px/1.2 var(--ui-font); }
.type-results span { color: #c5bdae; }
.type-results strong { color: #f0d99f; }
.achievement-section { margin-top: 8px !important; padding-top: 7px !important; border-top: 1px solid rgba(151,124,74,.27) !important; }
.achievement-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.achievement { min-width: 0; display: grid; grid-template-columns: 27px minmax(0, 1fr); align-items: center; gap: 6px; min-height: 45px; padding: 5px 7px; border-color: rgba(176,141,71,.38); border-radius: 2px; background: rgba(83,64,33,.15); }
.achievement > span { font-size: 19px; }
.achievement > div { min-width: 0; }
.achievement strong { display: block; overflow: hidden; color: #f0d99e; font: 800 9px/1.2 var(--ui-font); text-overflow: ellipsis; white-space: nowrap; }
.achievement p { overflow: hidden; margin: 2px 0 0; color: #aaa497; font: 500 8px/1.2 var(--ui-font); text-overflow: ellipsis; white-space: nowrap; }
.results-actions { display: flex; justify-content: center; gap: 9px; margin: 0; padding-top: 1px; }
.results-actions .button { min-width: 190px; min-height: 40px; margin: 0; }

@media (max-height: 800px) and (min-width: 921px) {
  .results-panel { gap: 7px; padding-top: 9px; padding-bottom: 8px; }
  .results-hero { min-height: 78px; padding-top: 2px; padding-bottom: 7px; }
  .results-hero .result-crest { width: 50px; height: 55px; }
  .results-hero { grid-template-columns: 58px minmax(0, 1fr) 230px; }
  #results-title { font-size: clamp(19px, 2vw, 27px); }
  .winner-name { font-size: 16px; }
  .victory-detail { min-height: 64px; }
  .result-player { padding-top: 8px; padding-bottom: 7px; }
  .result-player-header { min-height: 31px; margin-bottom: 5px; }
  .result-highlights div { min-height: 54px; }
  .result-highlights strong { font-size: 22px; }
  .stat-list > div { min-height: 18px; padding-top: 2px; padding-bottom: 2px; }
  .learning-callout { min-height: 49px; }
  .achievement { min-height: 40px; }
  .results-actions .button { min-height: 36px; }
}

@media (max-width: 1120px) and (min-width: 921px) {
  .results-hero { grid-template-columns: 55px minmax(0, 1fr) 210px; }
  .result-player { padding-right: 8px; padding-left: 8px; }
  .result-learning-grid { grid-template-columns: 1fr; }
  .learning-summary { grid-template-columns: 1.1fr .9fr; }
  .type-results { grid-template-columns: 1fr; }
}

/* Sprint 6.9 — final UI Skin Kit integration. Text remains live HTML. */
.button {
  border: 0;
  border-radius: 0;
  background: url("assets/ui/button_secondary.svg") center / 100% 100% no-repeat;
  box-shadow: none;
  text-shadow: 0 1px 1px rgba(0,0,0,.72);
}
.button.button-primary {
  color: #241609;
  background: url("assets/ui/button_primary.svg") center / 100% 100% no-repeat;
  box-shadow: 0 6px 15px rgba(31,18,8,.3);
  text-shadow: 0 1px rgba(255,244,198,.42);
}
.button.button-quiet,
.question-actions .hint-button {
  color: #f0e2c3;
  border: 0;
  background: url("assets/ui/button_secondary.svg") center / 100% 100% no-repeat;
}
.button:disabled,
.button.button-primary:disabled,
.question-actions .button-primary:disabled {
  color: #b6b3a9;
  background: url("assets/ui/button_disabled.svg") center / 100% 100% no-repeat;
  box-shadow: none;
  opacity: .68;
}
.button:hover:not(:disabled) { filter: brightness(1.1) saturate(1.05); }
.button:focus-visible { outline-color: #ffe29a; }

.question-frame {
  border: 14px solid transparent;
  border-image: url("assets/ui/question_standard_frame.svg") 28 fill / 14px / 0 stretch;
  border-radius: 0;
  background: url("assets/ui/dark_panel.svg") center / cover;
  box-shadow: 0 0 0 1px rgba(11,7,4,.92), 0 30px 90px rgba(0,0,0,.76);
}
.question-frame::before { display: none; }
.question-header {
  min-height: 82px;
  padding-right: 26px;
  padding-left: 26px;
  border: 0;
  background-image:
    url("assets/ui/header_knowledge_accent.svg"),
    url("assets/ui/dark_panel.svg");
  background-position: left center, center;
  background-size: auto 100%, cover;
  background-repeat: no-repeat;
}
#question-modal.is-logic .question-header {
  background-image: url("assets/ui/header_logic_accent.svg"), url("assets/ui/dark_panel.svg");
}
#question-modal.is-research .question-header {
  background-image: url("assets/ui/header_research_accent.svg"), url("assets/ui/dark_panel.svg");
}
#question-modal.is-ideas .question-header {
  background-image: url("assets/ui/header_ideas_accent.svg"), url("assets/ui/dark_panel.svg");
}
.question-header::after {
  left: 22px;
  right: 22px;
  bottom: -7px;
  height: 14px;
  background: url("assets/ui/gold_divider.svg") center / 100% 100% no-repeat;
}
.question-header .question-object > span {
  border: 0;
  border-radius: 0;
  background: radial-gradient(circle, rgba(231,186,92,.22), transparent 67%);
  box-shadow: none;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.7));
}
.question-header .question-object strong { color: #f5dda1; text-shadow: 0 2px 2px #090b09; }
.question-header .question-meta > span {
  border: 0;
  border-radius: 0;
  background: url("assets/ui/button_secondary.svg") center / 100% 100% no-repeat;
}
.question-content {
  background: url("assets/ui/parchment_background.svg") center / cover;
  box-shadow: inset 0 12px 24px rgba(77,46,18,.14), inset 0 0 44px rgba(70,39,14,.18);
}
.question-code { border-color: #a98242; background: url("assets/ui/dark_panel.svg") center / cover; }

.answer-option {
  border: 0;
  border-radius: 0;
  background: url("assets/ui/answer_normal.svg") center / 100% 100% no-repeat;
  box-shadow: none;
}
.answer-option:hover:not(.answer-option--disabled) {
  border: 0;
  background: url("assets/ui/answer_selected.svg") center / 100% 100% no-repeat;
  box-shadow: none;
}
.answer-option.is-chosen,
.answer-option--selected {
  border: 0;
  background: url("assets/ui/answer_selected.svg") center / 100% 100% no-repeat;
  box-shadow: 0 0 12px rgba(226,174,72,.24);
}
.answer-option--correct {
  border: 0;
  background: url("assets/ui/answer_correct.svg") center / 100% 100% no-repeat;
  box-shadow: 0 0 12px rgba(81,183,91,.2);
}
.answer-option--wrong {
  border: 0;
  background: url("assets/ui/answer_wrong.svg") center / 100% 100% no-repeat;
  box-shadow: 0 0 12px rgba(196,63,51,.2);
}
.answer-option.is-eliminated,
.answer-option--disabled {
  background: url("assets/ui/answer_disabled.svg") center / 100% 100% no-repeat;
}
.answer-option--correct.answer-option--disabled { background-image: url("assets/ui/answer_correct.svg"); }
.answer-option--wrong.answer-option--disabled { background-image: url("assets/ui/answer_wrong.svg"); }
.answer-letter { border-color: #aa8951; border-radius: 50%; background: rgba(9,13,12,.48); }

#question-modal.is-theatre .question-frame {
  border-image-source: url("assets/ui/question_ideas_frame.svg");
}
#question-modal.is-theatre .question-visual {
  border: 10px solid transparent;
  border-image: url("assets/ui/question_ideas_frame.svg") 28 fill / 10px / 0 stretch;
  border-radius: 0;
}
#question-modal.is-citadel-trial .question-frame {
  border: 15px solid transparent;
  border-image: url("assets/ui/citadel_trial_frame.svg") 28 fill / 15px / 0 stretch;
  background: url("assets/ui/dark_panel.svg") center / cover;
  box-shadow: 0 0 56px rgba(230,174,67,.3), 0 32px 96px rgba(0,0,0,.78);
}
#question-modal.is-citadel-trial .question-header {
  background-image: radial-gradient(circle at 50% 0, rgba(230,175,70,.24), transparent 58%), url("assets/ui/dark_panel.svg");
}
#question-modal.is-citadel-trial .question-content { background: url("assets/ui/parchment_background.svg") center / cover; }
.citadel-question-progress::after {
  content: "";
  position: absolute;
  right: 20px;
  bottom: -7px;
  left: 20px;
  height: 14px;
  background: url("assets/ui/gold_divider.svg") center / 100% 100% no-repeat;
  pointer-events: none;
}

.feedback { background: url("assets/ui/parchment_background.svg") center / cover; }
.feedback--correct {
  border: 2px solid rgba(104, 151, 74, .78);
  border-image: none;
  color: #253a20 !important;
  background:
    linear-gradient(90deg, rgba(92, 142, 63, .2), transparent 24%),
    linear-gradient(rgba(245, 239, 205, .94), rgba(226, 221, 181, .94)),
    url("assets/ui/parchment_background.svg") center / cover;
  box-shadow: inset 5px 0 0 rgba(80, 133, 58, .78), inset 0 0 22px rgba(76, 104, 42, .12), 0 8px 24px rgba(0, 0, 0, .16);
}

.feedback--wrong {
  border: 2px solid rgba(151, 74, 62, .74);
  border-image: none;
  color: #4b2823 !important;
  background:
    linear-gradient(90deg, rgba(145, 58, 48, .16), transparent 24%),
    linear-gradient(rgba(246, 232, 200, .95), rgba(229, 210, 177, .95)),
    url("assets/ui/parchment_background.svg") center / cover;
  box-shadow: inset 5px 0 0 rgba(138, 55, 47, .76), inset 0 0 22px rgba(111, 55, 37, .1), 0 8px 24px rgba(0, 0, 0, .16);
}

.event-modal,
.citadel-dialog.citadel-trial {
  border: 14px solid transparent;
  border-image: url("assets/ui/event_frame.svg") 28 fill / 14px / 0 stretch;
  border-radius: 0;
  background: url("assets/ui/dark_panel.svg") center / cover;
  box-shadow: 0 26px 78px rgba(0,0,0,.72);
}
.event-modal::before { display: none; }
.citadel-dialog.citadel-trial { border-image-source: url("assets/ui/citadel_trial_frame.svg"); }
.artifact-found-modal { width: min(520px, 92vw); }
.artifact-event-icon {
  width: 178px;
  height: 160px;
  margin-top: 0;
  margin-bottom: 2px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: url("assets/ui/artifact_pedestal.svg") center / contain no-repeat;
  box-shadow: none;
}
.artifact-event-icon > img { top: 45%; filter: drop-shadow(0 0 12px rgba(255,197,81,.62)); }

.top-academy-card {
  background: url("assets/ui/dark_panel.svg") center / cover;
}
.top-academy-card .player-sigil {
  width: 54px;
  height: 70px;
  border: 0;
  border-radius: 0;
  background: url("assets/ui/academy_banner_blue.svg") center / contain no-repeat;
  box-shadow: none;
  color: transparent;
  font-size: 0;
}
.top-academy-card.player-red .player-sigil {
  background-image: url("assets/ui/academy_banner_red.svg");
  transform: none;
}
.hud {
  border: 14px solid transparent;
  border-image: url("assets/ui/event_frame.svg") 28 fill / 14px / 0 stretch;
  border-radius: 0;
  background: url("assets/ui/dark_panel.svg") center / cover;
}
.hud-section {
  position: relative;
  border: 0;
  border-radius: 0;
  background:
    url("assets/ui/gold_divider.svg") center bottom / calc(100% - 16px) 8px no-repeat,
    url("assets/ui/hud_panel.svg") center / 100% 100% no-repeat;
  box-shadow: none;
}
.artifact-slot { border-image: url("assets/ui/question_standard_frame.svg") 30 / 5px / 0 stretch; background: url("assets/ui/dark_panel.svg") center / cover; }
.battle-title { background: url("assets/ui/dark_panel.svg") center / cover; }

@media (max-height: 800px) and (min-width: 921px) {
  .question-frame { border-width: 11px; border-image-width: 11px; }
  .question-header { min-height: 64px; }
  .event-modal { border-width: 11px; border-image-width: 11px; }
  .artifact-event-icon { width: 148px; height: 128px; }
  .hud { border-width: 10px; border-image-width: 10px; padding: 4px; }
  .top-academy-card .player-sigil { width: 43px; height: 58px; }
}

/* Sprint 6.9.1 — reconstructed concept-sheet artwork. */
.question-frame {
  border-width: 16px;
  border-image: url("assets/ui/question_ornate_frame_v3.svg") 44 / 16px / 0 stretch;
}

.question-header {
  min-height: 104px;
  padding-left: clamp(250px, 29%, 330px);
  background-image:
    linear-gradient(90deg, rgba(7, 11, 13, .03) 0 24%, rgba(7, 11, 13, .72) 42%, rgba(7, 11, 13, .88) 100%),
    url("assets/ui/header_knowledge_scene_v2.png");
  background-position: center, center;
  background-size: 100% 100%, cover;
  background-repeat: no-repeat;
  box-shadow: inset 0 -20px 30px rgba(4, 7, 8, .16);
}

#question-modal.is-logic .question-header {
  background-image:
    linear-gradient(90deg, rgba(7, 11, 13, .03) 0 24%, rgba(7, 11, 13, .72) 42%, rgba(7, 11, 13, .88) 100%),
    url("assets/ui/header_logic_scene_v2.png");
}

#question-modal.is-research .question-header,
#question-modal.is-sanctuary .question-header {
  background-image:
    linear-gradient(90deg, rgba(7, 11, 13, .03) 0 24%, rgba(7, 11, 13, .72) 42%, rgba(7, 11, 13, .88) 100%),
    url("assets/ui/header_research_scene_v2.png");
}

#question-modal.is-ideas .question-header {
  background-image:
    linear-gradient(90deg, rgba(12, 5, 6, .02) 0 24%, rgba(12, 5, 6, .68) 42%, rgba(12, 5, 6, .88) 100%),
    url("assets/ui/header_ideas_scene_v2.png");
}

#question-modal.is-citadel-trial .question-header {
  background-image:
    linear-gradient(90deg, rgba(7, 9, 13, .02) 0 24%, rgba(7, 9, 13, .7) 42%, rgba(7, 9, 13, .9) 100%),
    url("assets/ui/header_citadel_scene_v2.png");
}

.question-header .question-object > span {
  display: none;
}

.question-header .question-object small {
  color: #d1bd91;
  text-shadow: 0 2px 3px #050707;
}

.question-header .question-object strong {
  color: #f8e4aa;
  font-size: clamp(20px, 1.7vw, 27px);
  text-shadow: 0 2px 4px #030505, 0 0 18px rgba(224, 174, 77, .18);
}

.artifact-event-icon {
  width: 220px;
  height: 190px;
  overflow: hidden;
  background-repeat: no-repeat, no-repeat;
  background-position: left 35%, center;
  background-size: 800% auto, contain;
}

.artifact-event-icon > img {
  visibility: hidden;
}

.artifact-event-icon[data-artifact-id="SHIELD"] {
  background-image: url("assets/citadel_shield_idle_8f.png"), url("assets/ui/artifact_pedestal_v3.png");
}

.artifact-event-icon[data-artifact-id="HINT"] {
  background-image: url("assets/citadel_hint_8f.png"), url("assets/ui/artifact_pedestal_v3.png");
}

.artifact-event-icon[data-artifact-id="SCOUT"] {
  background-image: url("assets/citadel_reconnaissance_8f.png"), url("assets/ui/artifact_pedestal_v3.png");
}

.artifact-event-icon[data-artifact-id="ONSLAUGHT"] {
  background-image: url("assets/citadel_onslaught_8f.png"), url("assets/ui/artifact_pedestal_v3.png");
}

@media (max-height: 800px) and (min-width: 921px) {
  .question-frame {
    border-width: 13px;
    border-image-width: 13px;
  }

  .question-header {
    min-height: 78px;
    padding-top: 9px;
    padding-bottom: 9px;
    padding-left: clamp(205px, 27%, 285px);
  }

  .question-header .question-object strong {
    font-size: clamp(18px, 1.55vw, 23px);
  }

  .artifact-event-icon {
    width: 174px;
    height: 148px;
  }
}

/* Sprint 6.10 — reference-aligned main menu and visible build identity. */
.start-screen {
  display: grid;
  place-content: stretch;
  place-items: stretch;
  padding: 0;
  background:
    linear-gradient(90deg, rgba(4, 8, 7, .4) 0%, rgba(5, 9, 8, .08) 34%, rgba(5, 9, 8, .03) 66%, rgba(4, 8, 7, .34) 100%),
    url("assets/ui/main_menu_background_v2.png") center / cover no-repeat;
}

.start-screen::after {
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(3, 7, 6, .56) 0%, rgba(3, 7, 6, .18) 28%, transparent 48%),
    linear-gradient(0deg, rgba(2, 5, 4, .72), transparent 34%, rgba(4, 7, 6, .13) 72%, rgba(2, 4, 4, .32));
  box-shadow: inset 0 0 120px rgba(2, 4, 3, .5);
}

.start-screen .menu-content {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100vh;
  min-height: 640px;
  display: grid;
  grid-template-columns: minmax(300px, 360px) 1fr minmax(280px, 360px);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  align-items: start;
  margin: 0;
  padding: clamp(26px, 4vh, 50px) clamp(48px, 5vw, 96px) clamp(24px, 3vh, 38px);
  border: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  container-type: normal;
}

.start-screen .game-crest { display: none; }

.start-screen h1 {
  grid-column: 1 / -1;
  grid-row: 1;
  justify-self: center;
  width: min(760px, 72vw);
  margin: 0;
  color: #f2cf7e;
  font: 600 clamp(48px, 5.25vw, 78px)/.82 var(--display-font);
  letter-spacing: .025em;
  text-align: center;
  text-shadow: 0 3px 0 #4c3015, 0 5px 18px rgba(0, 0, 0, .72), 0 0 28px rgba(230, 178, 74, .22);
}

.start-screen h1 span {
  max-width: 100%;
  white-space: nowrap;
}

.start-screen h1 span:last-child {
  margin-top: .16em;
  font-size: .94em;
  letter-spacing: .09em;
  text-indent: .09em;
}

.start-screen .menu-subtitle {
  grid-column: 1 / -1;
  grid-row: 2;
  justify-self: center;
  margin: 15px 0 0;
  color: #f0d18b;
  font: 600 clamp(16px, 1.45vw, 22px)/1.1 var(--display-font);
  letter-spacing: .12em;
  text-shadow: 0 2px 6px #191108;
}

.start-screen .menu-actions {
  grid-column: 1;
  grid-row: 3;
  align-self: center;
  justify-self: start;
  width: min(330px, 100%);
  margin: clamp(20px, 7vh, 66px) 0 0;
  gap: 8px;
}

.start-screen .menu-actions > .button {
  min-height: 52px;
  padding-right: 24px;
  padding-left: 24px;
  border-radius: 8px;
  font-size: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .26);
}

.start-screen .menu-actions .menu-battle-button {
  min-height: 62px;
  font-size: 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .32), 0 0 22px rgba(228, 175, 70, .12);
}

.start-screen .menu-actions .button-quiet {
  border-color: rgba(197, 172, 119, .72);
  background: linear-gradient(145deg, rgba(32, 38, 37, .94), rgba(13, 19, 20, .94));
}

.start-screen .menu-motto,
.menu-build-version {
  align-self: end;
  margin: 0;
  color: #ddd2bc;
  font: 600 13px/1.2 var(--ui-font);
  letter-spacing: .06em;
  text-shadow: 0 2px 5px #020403;
}

.start-screen .menu-motto {
  grid-column: 3;
  grid-row: 4;
  justify-self: end;
  text-align: right;
}

.menu-build-version {
  grid-column: 1;
  grid-row: 4;
  justify-self: start;
  color: rgba(231, 218, 191, .72);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

@media (max-height: 800px) and (min-width: 921px) {
  .start-screen .menu-content {
    min-height: 560px;
    padding-top: 24px;
    padding-bottom: 22px;
  }

  .start-screen h1 { font-size: clamp(44px, 5vw, 68px); }
  .start-screen .menu-subtitle { margin-top: 12px; }
  .start-screen .menu-actions { margin-top: clamp(12px, 4vh, 32px); }
  .start-screen .menu-actions > .button { min-height: 48px; }
  .start-screen .menu-actions .menu-battle-button { min-height: 58px; }
}