:root {
  --hw-ink: var(--ds-text, #22313d);
  --hw-navy: var(--ds-primary-dark, #163f57);
  --hw-blue: var(--ds-primary, #315d74);
  --hw-gold: #9a7541;
  --hw-paper: #fbf7ee;
  --hw-cream: var(--ds-bg, #f4efe6);
  --hw-line: rgba(67, 74, 72, .18);
  --hw-muted: var(--ds-muted, #66717c);
  --hw-correct: #52745b;
  --hw-wrong: #a34e45;
}

* { box-sizing: border-box; }

body.hussite-page {
  min-height: 100vh;
  margin: 0;
  color: var(--hw-ink);
  font-family: var(--ds-font-body, "Inter", "Segoe UI", sans-serif);
  background:
    radial-gradient(circle at 7% 0%, rgba(154, 117, 65, .15), transparent 27%),
    radial-gradient(circle at 94% 3%, rgba(49, 93, 116, .10), transparent 24%),
    linear-gradient(180deg, #f8f4ec 0%, var(--hw-cream) 54%, #eae1d3 100%);
}

button { font: inherit; }

.hussite-shell {
  width: min(1540px, calc(100% - 28px));
  margin: 0 auto;
  padding: 14px 0 36px;
}

.global-nav { margin-bottom: 8px; }
.pilot-badge {
  justify-self: end;
  padding: 8px 13px;
  border: 1px solid var(--hw-line);
  border-radius: 999px;
  color: var(--hw-muted);
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.hussite-hero,
.map-panel,
.story-panel {
  border: 1px solid var(--hw-line);
  background: rgba(251, 247, 238, .94);
  box-shadow: 0 15px 36px rgba(38, 48, 51, .09);
}

.hussite-hero {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(320px, 680px);
  gap: 22px;
  align-items: end;
  margin-bottom: 11px;
  padding: 11px clamp(18px, 2.2vw, 31px) 13px;
  border-radius: 22px;
}

.hero-kicker {
  margin: 0 0 3px;
  color: var(--hw-gold);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}

h1, h2, h3 {
  margin: 0;
  color: var(--hw-navy);
  font-family: var(--ds-font-heading, "EB Garamond", Georgia, serif);
}

h1 { font-size: clamp(1.75rem, 2.7vw, 2.85rem); line-height: 1; }
.hero-intro { margin: 0; color: var(--hw-muted); font-size: .91rem; line-height: 1.48; }

.game-layout {
  display: grid;
  grid-template-columns: minmax(0, 2.15fr) minmax(350px, 1fr);
  gap: clamp(15px, 1.6vw, 24px);
  align-items: start;
}

.map-panel { min-width: 0; padding: 5px; border-radius: 23px; }
.map-frame {
  position: relative;
  display: grid;
  width: 100%;
  aspect-ratio: 850 / 480;
  place-items: center;
  overflow: hidden;
  border: 1px solid #b9c2bd;
  border-radius: 18px;
  background: #d9e4e4;
  touch-action: manipulation;
  cursor: default;
}
.map-frame[hidden] { display: none; }

.map-frame:focus-within { outline: 3px solid rgba(154, 117, 65, .55); outline-offset: 2px; }
.map-frame svg { display: block; width: 100%; height: 100%; }
.map-loading { color: var(--hw-muted); font-weight: 800; }

.map-water { fill: #dce8e7; }
.base-land path { fill: #e3d4b1; stroke: #75684f; stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.bohemia-moravia-border {
  fill: none;
  stroke: #80735b;
  stroke-width: 2.2;
  stroke-dasharray: 5 4;
  vector-effect: non-scaling-stroke;
  opacity: .78;
}
.river {
  fill: none;
  stroke: #7da5b2;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  opacity: .84;
}
.river-danube { stroke-width: 3; }
.land-label,
.context-label {
  fill: #4f4a40;
  font-family: Georgia, serif;
  font-size: 16px;
  font-weight: 650;
  letter-spacing: .12em;
  text-anchor: middle;
  paint-order: stroke;
  stroke: rgba(248, 244, 234, .8);
  stroke-width: 4px;
  stroke-linejoin: round;
}
.land-label-small { font-size: 13px; letter-spacing: .08em; }
.context-land-label { font-size: 14px; opacity: .5; }
.context-label { fill: #7a756c; font-size: 11px; font-weight: 600; opacity: .56; }
#landLabels .land-label:first-child { font-size: 13px; opacity: .8; }

.map-choice,
.prague-marker { cursor: pointer; outline: none; }
.prague-marker { pointer-events: bounding-box; }
.choice-hit { fill: transparent; stroke: none; pointer-events: all; }
.choice-symbol { pointer-events: none; transition: fill .16s ease, stroke .16s ease, transform .16s ease; }
.choice-city { fill: #324d5a; stroke: #fffaf0; stroke-width: 3; vector-effect: non-scaling-stroke; filter: url(#softShadow); }
.choice-target circle:first-child { fill: #f8f2e6; stroke: #566773; stroke-width: 3; vector-effect: non-scaling-stroke; }
.choice-target circle:last-child { fill: #566773; }
.choice-area { fill: rgba(69, 84, 91, .09); stroke: #566773; stroke-width: 2; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.choice-leader { fill: none; stroke: #a69d8f; stroke-width: .75; vector-effect: non-scaling-stroke; pointer-events: none; }
.choice-label rect { fill: rgba(250, 246, 237, .9); stroke: rgba(86, 82, 74, .14); stroke-width: .55; pointer-events: all; }
.choice-label text,
.prague-marker-text { fill: #263e49; font-family: var(--ds-font-body, sans-serif); font-size: 10.5px; font-weight: 850; pointer-events: none; }
.choice-label text { stroke: none; }
.map-choice:hover .choice-symbol,
.map-choice:focus-visible .choice-symbol { filter: drop-shadow(0 0 5px rgba(27,66,87,.65)); transform: scale(1.18); }
.map-choice:focus-visible .choice-hit,
.prague-marker:focus-visible .choice-hit { stroke: #173f57; stroke-width: 3; stroke-dasharray: 5 4; }
.map-choice.is-wrong .choice-city,
.map-choice.is-wrong .choice-target circle:first-child,
.map-choice.is-wrong .choice-target circle:last-child,
.map-choice.is-wrong .choice-area { fill: #a55d55; stroke: #7f3f39; }
.map-choice.is-correct .choice-city,
.map-choice.is-correct .choice-target circle:first-child,
.map-choice.is-correct .choice-target circle:last-child,
.map-choice.is-correct .choice-area { fill: #5b8165; stroke: #315b3d; }
.map-choice.is-wrong .choice-label text { fill: #7f3f39; }
.map-choice.is-correct .choice-label text { fill: #315b3d; }

.prague-marker-ring { fill: #324d5a; stroke: #fffaf0; stroke-width: 3; vector-effect: non-scaling-stroke; }
.debug-cross { fill: none; stroke: #9b1b1b; stroke-width: 1.2; vector-effect: non-scaling-stroke; pointer-events: none; }
.debug-center { fill: #9b1b1b; pointer-events: none; }
.debug-label-box { fill: rgba(32, 122, 183, .08); stroke: #207ab7; stroke-width: 1.2; vector-effect: non-scaling-stroke; pointer-events: none; }
.debug-hit-box { fill: rgba(179, 55, 48, .06); stroke: #b33730; stroke-width: 1; stroke-dasharray: 3 2; vector-effect: non-scaling-stroke; pointer-events: none; }
.debug-label-box.has-collision,
.debug-hit-box.has-collision { fill: rgba(187, 47, 42, .18); stroke: #bb2f2a; stroke-width: 2; }
.debug-panel { margin-top: 16px; padding: 18px; overflow-x: auto; border: 1px solid var(--hw-line); border-radius: 18px; background: #fffaf0; box-shadow: 0 10px 28px rgba(38,48,51,.08); }
.debug-panel h2 { font-size: 1.4rem; }
.debug-panel p { max-width: 900px; color: var(--hw-muted); font-size: .86rem; line-height: 1.45; }
.debug-panel table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: .78rem; }
.debug-distance-table { margin: 10px 0 16px; background: rgba(255,255,255,.4); }
.debug-panel th,
.debug-panel td { padding: 8px 10px; border-top: 1px solid var(--hw-line); text-align: left; white-space: nowrap; }
.debug-panel th { color: var(--hw-navy); }
.debug-collision-summary { padding: 10px 12px; border-radius: 8px; font-weight: 850; }
.debug-collision-summary.is-clear { background: #e7f0e7; color: #315b3d; }
.debug-collision-summary.has-collisions { background: #f3dfdc; color: #843f39; }

.prague-overlay { padding: 12px; }
.prague-overlay[hidden] { display: none; }
.prague-overlay-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 10px; padding: 4px 3px; }
.prague-overlay-kicker { margin: 0 0 3px; color: var(--hw-gold); font-size: .67rem; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }
.prague-overlay-header h2 { font-size: clamp(1.4rem, 2vw, 2rem); }
.prague-back { min-height: 40px; padding: 8px 13px; border: 1px solid rgba(40,68,82,.25); border-radius: 10px; color: #fff; background: var(--hw-navy); font-weight: 850; cursor: pointer; }
.prague-back:focus-visible { outline: 3px solid rgba(154,117,65,.62); outline-offset: 2px; }
.prague-stage { position: relative; width: 100%; overflow: hidden; aspect-ratio: 1100 / 760; border: 1px solid #b9c2bd; border-radius: 15px; background: #f7f2e8; }
.prague-stage > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.prague-targets { position: absolute; inset: 0; }
.prague-target { position: absolute; width: 46px; height: 46px; padding: 0; border: 0; transform: translate(-50%, -50%); color: var(--hw-navy); background: transparent; cursor: pointer; }
.prague-target-symbol { position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; border: 4px solid #fff9ef; border-radius: 50%; transform: translate(-50%, -50%); background: #526672; box-shadow: 0 0 0 2px #526672, 0 3px 8px rgba(35,55,65,.28); }
.prague-target-label { position: absolute; left: 50%; top: 50%; width: max-content; max-width: 170px; padding: 5px 8px; border: 1px solid rgba(69,79,78,.2); border-radius: 7px; color: #263e49; background: rgba(250,246,237,.95); font-size: .76rem; font-weight: 900; white-space: nowrap; pointer-events: none; }
.prague-target:hover .prague-target-symbol,
.prague-target:focus-visible .prague-target-symbol { box-shadow: 0 0 0 4px rgba(35,78,101,.28), 0 3px 8px rgba(35,55,65,.3); }
.prague-target:focus-visible { outline: none; }
.prague-target.is-wrong .prague-target-symbol { background: var(--hw-wrong); box-shadow: 0 0 0 2px #7f3f39; }
.prague-target.is-correct .prague-target-symbol { background: var(--hw-correct); box-shadow: 0 0 0 2px #315b3d; }
.prague-raster-legend { position: absolute; left: 18px; bottom: 15px; display: flex; gap: 18px; padding: 6px 9px; border-radius: 7px; color: #685f55; background: rgba(250,246,237,.9); font-size: .68rem; font-weight: 800; }
.prague-raster-legend span::before { display: inline-block; width: 19px; height: 3px; margin-right: 6px; vertical-align: middle; content: ""; }
.prague-raster-legend .is-premyslid::before { background: #b7762e; }
.prague-raster-legend .is-charles::before { background: #4e7141; }
.prague-prototype-note { margin: 8px 3px 0; color: var(--hw-muted); font-size: .68rem; line-height: 1.35; }
.is-debug .prague-target { outline: 2px dashed rgba(179,55,48,.65); outline-offset: -3px; }
.is-debug .prague-target-label { box-shadow: 0 0 0 2px #207ab7; }

.battlefield-area { fill: rgba(154, 117, 65, .13); stroke: #8b6839; stroke-width: 2; stroke-dasharray: 7 5; vector-effect: non-scaling-stroke; }
.uncertainty-area { fill: rgba(106, 92, 124, .11); stroke: #756785; stroke-width: 2; stroke-dasharray: 3 6; vector-effect: non-scaling-stroke; }
.route-line { fill: none; stroke: #8b6038; stroke-width: 4; stroke-dasharray: 11 8; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.route-arrow { fill: #8b6038; }

.story-panel {
  display: grid;
  grid-template-rows: auto auto auto;
  min-width: 0;
  min-height: 0;
  padding: clamp(16px, 1.6vw, 23px);
  border-radius: 23px;
}
.status-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 10px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--hw-line);
  color: var(--hw-muted);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.status-row strong { color: var(--hw-navy); }
.panel-content { min-height: 0; padding-top: clamp(15px, 1.6vw, 22px); }
.question-kicker,
.result-status {
  margin: 0 0 9px;
  color: var(--hw-gold);
  font-size: .72rem;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.event-prompt { margin: 0; font-size: clamp(1rem, 1.03vw, 1.1rem); line-height: 1.55; }
.feedback,
.text-hint {
  margin: 15px 0 0;
  padding: 10px 12px;
  border-left: 3px solid var(--hw-gold);
  border-radius: 8px;
  background: #f1e9da;
  color: #574a3b;
  font-size: .88rem;
  line-height: 1.42;
}
.feedback.is-wrong { border-left-color: var(--hw-wrong); color: #80413c; }
.panel-footer { align-self: end; padding-top: 14px; }
.primary-button {
  width: 100%;
  min-height: 46px;
  border: 0;
  border-radius: 12px;
  color: #fff;
  background: var(--hw-navy);
  font-weight: 900;
  cursor: pointer;
}
.primary-button:hover { background: var(--hw-blue); }
.primary-button:focus-visible { outline: 3px solid rgba(154, 117, 65, .62); outline-offset: 3px; }

.result-status { color: var(--hw-correct); }
.result-card h2 { font-size: clamp(1.45rem, 1.8vw, 1.85rem); line-height: 1.04; }
.event-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.event-meta span { padding: 6px 9px; border-radius: 999px; background: #eee5d5; color: var(--hw-muted); font-size: .67rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.result-summary { margin: 12px 0 0; font-size: .91rem; line-height: 1.47; }
.result-map-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 8px; margin: 11px 0 0; color: var(--hw-muted); font-size: .72rem; font-weight: 800; }
.legend-dot { width: 11px; height: 11px; border: 2px solid #fff8ed; border-radius: 50%; box-shadow: 0 0 0 1px rgba(35, 59, 70, .16); }
.legend-wrong { background: var(--hw-wrong); }
.legend-target { margin-left: 7px; background: var(--hw-correct); }
.significance,
.uncertainty,
.route-note { margin-top: 11px; padding: 10px 12px; border-radius: 10px; }
.significance { border-left: 3px solid var(--hw-gold); background: #f2eadc; }
.uncertainty { border: 1px solid rgba(105, 90, 121, .2); background: rgba(117, 103, 133, .08); }
.route-note { border: 1px dashed rgba(139, 96, 56, .42); background: rgba(154, 117, 65, .08); }
.significance h3,
.uncertainty h3 { font-size: 1rem; }
.significance p,
.uncertainty p,
.route-note { margin-bottom: 0; font-size: .81rem; line-height: 1.4; }
.significance p,
.uncertainty p { margin-top: 5px; }
.route-note strong { color: #744d2d; }
.finished-card { display: grid; min-height: 280px; align-content: center; text-align: center; }
.finished-card h2 { font-size: 3rem; }
.finished-card p { line-height: 1.55; }
.dev-badge { color: #7d5b31; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (max-width: 980px) {
  .hussite-hero { grid-template-columns: 1fr; gap: 7px; }
  .game-layout { grid-template-columns: 1fr; }
  body[data-game-state="question"] .story-panel,
  body[data-game-state="hint"] .story-panel { grid-row: 1; min-height: 0; }
  body[data-game-state="question"] .map-panel,
  body[data-game-state="hint"] .map-panel { grid-row: 2; }
  body[data-game-state="result"] .map-panel,
  body[data-game-state="finished"] .map-panel { grid-row: 1; }
  body[data-game-state="result"] .story-panel,
  body[data-game-state="finished"] .story-panel { grid-row: 2; }
  .story-panel { min-height: 0; }
}

@media (max-width: 620px) {
  .hussite-shell { width: calc(100% - 12px); padding-top: 7px; }
  .global-nav { margin-bottom: 6px; padding: 10px 12px; border-radius: 15px; }
  .global-nav-brand { font-size: 1.22rem; }
  .pilot-badge { padding: 6px 8px; font-size: .61rem; }
  .hussite-hero { margin-bottom: 7px; padding: 10px 13px; border-radius: 15px; }
  .hero-kicker { font-size: .62rem; }
  h1 { font-size: 1.65rem; }
  .hero-intro { font-size: .8rem; line-height: 1.35; }
  .game-layout { gap: 8px; }
  .story-panel { padding: 14px; border-radius: 15px; }
  .status-row { justify-content: flex-start; }
  .panel-content { padding-top: 12px; }
  .event-prompt { font-size: .95rem; line-height: 1.45; }
  .map-panel { border-radius: 15px; }
  .map-frame { aspect-ratio: 500 / 380; border-radius: 12px; }
  .land-label { font-size: 15px; }
  .context-label { font-size: 10px; }
  .map-choice .choice-label,
  .prague-marker .choice-label { display: none; }
  .map-choice:focus .choice-label,
  .map-choice:hover .choice-label,
  .map-choice.is-label-open .choice-label,
  .prague-marker:focus .choice-label,
  .prague-marker:hover .choice-label { display: block; }
  .choice-label text { font-size: 11px; }
  .choice-hit { r: 18; }
  .prague-overlay { padding: 7px; }
  .prague-overlay-header { align-items: flex-start; flex-direction: column; gap: 8px; }
  .prague-back { width: 100%; }
  .prague-target-label { font-size: .66rem; }
  .prague-prototype-note { font-size: .63rem; }
  .result-card h2 { font-size: 1.45rem; }
}

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