:root {
  --void: #050407;
  --bone: #d8cdb4;
  --bone-dim: rgba(216, 205, 180, 0.62);
  --spirit: #3ddc84;
  --spirit-hot: #c8ffd9;
  --banner: #1f6b43;
  --banner-deep: #0c2a1b;
  --brass: #a08c55;
  --blackletter: "UnifrakturCook", "Old English Text MT", serif;
  --caps: "Cinzel", Georgia, serif;
  --ui: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--void);
  color: var(--bone);
  font-family: var(--ui);
  overflow-x: hidden;
}

.back {
  position: fixed;
  top: 14px;
  left: 16px;
  z-index: 20;
  padding: 6px 12px;
  border: 1px solid var(--bone-dim);
  color: var(--bone);
  background: rgba(8, 7, 10, 0.86);
  font-family: var(--caps);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
}

.back:hover,
.back:focus-visible {
  border-color: var(--spirit);
  background: var(--banner-deep);
  outline: none;
}

/* The walk: king.js maps scroll through this track to the camera's place down the hall. */
.track {
  position: relative;
  height: 650vh;
}

.stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

.hall {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ---------- The hall drawing ---------- */

.hall .ceiling {
  fill: #07080a;
}

.hall .wall {
  fill: #191c22;
  stroke: #000;
  stroke-width: 2;
}

.hall .floor {
  fill: #0e1012;
}

.hall .joints {
  fill: none;
  stroke: #000;
  stroke-width: 1.5;
}

.hall .carpet {
  fill: #0f3826;
}

.hall .brass {
  fill: none;
  stroke: #6e6038;
  stroke-width: 3;
}

.hall .banner {
  fill: var(--banner-deep);
  stroke: #000;
  stroke-width: 2;
}

.hall .banner.black {
  fill: #08090b;
}

.hall .banner-stripe {
  fill: none;
  stroke: rgba(216, 205, 180, 0.55);
  stroke-width: 2;
}

.hall .pillar {
  fill: #2c313a;
  stroke: #000;
  stroke-width: 2;
  stroke-linejoin: miter;
}

.hall .pillar-side {
  fill: #1f232a;
  stroke: #000;
  stroke-width: 2;
}

.hall .pillar-line {
  fill: none;
  stroke: #000;
  stroke-width: 2;
}

.hall .hatch {
  fill: url(#hatch);
  opacity: 0.6;
  pointer-events: none;
}

.hall .rib-ink {
  fill: none;
  stroke: #000;
}

.hall .rib {
  fill: none;
  stroke: #262a32;
}

.hall .bracket {
  stroke: #000;
}

.hall .flame {
  animation: flicker 0.7s ease-in-out infinite alternate;
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

@keyframes flicker {
  from {
    transform: scale(1, 1);
    opacity: 0.9;
  }
  to {
    transform: scale(0.85, 1.15);
    opacity: 1;
  }
}

.hall .plaque {
  fill: #15181d;
  stroke: var(--brass);
  stroke-width: 1.5;
}

.hall .numeral {
  fill: var(--spirit-hot);
  font-family: var(--caps);
  font-weight: 700;
  text-anchor: middle;
}

.hall .step {
  fill: #2c313a;
  stroke: #000;
  stroke-width: 2;
}

.hall .step-top {
  fill: #3a404a;
  stroke: #000;
  stroke-width: 2;
}

/* End wall and throne: drawn in units x100, so strokes don't scale with them. */
#endwall *,
#king * {
  vector-effect: non-scaling-stroke;
}

.hall .endwall {
  fill: #15181d;
  stroke: #000;
  stroke-width: 2;
}

.hall .window {
  fill: url(#windowGlow);
  stroke: #000;
  stroke-width: 3;
}

.hall .mullion {
  fill: none;
  stroke: #000;
  stroke-width: 3;
}

.hall .throne {
  fill: #1a1e25;
  stroke: #000;
  stroke-width: 2.5;
  stroke-linejoin: miter;
}

.hall .throne-inner {
  fill: var(--banner-deep);
  stroke: #000;
  stroke-width: 2;
}

.hall .cape {
  fill: #06140e;
  stroke: #000;
  stroke-width: 2;
}

.hall .robe {
  fill: #12382a;
  stroke: #000;
  stroke-width: 2;
}

.hall .robe-fold {
  fill: none;
  stroke: #000;
  stroke-width: 1.5;
  opacity: 0.7;
}

.hall .steel {
  fill: #4a4f5a;
  stroke: #000;
  stroke-width: 2;
  stroke-linejoin: miter;
}

.hall .steel.dark {
  fill: #2c313a;
}

.hall .tabard {
  fill: var(--banner);
  stroke: #000;
  stroke-width: 2;
}

.hall .fur {
  fill: var(--bone);
  stroke: #000;
  stroke-width: 2;
}

.hall .helm {
  fill: #23272e;
  stroke: #000;
  stroke-width: 2;
}

.hall .visor {
  fill: none;
  stroke: #000;
  stroke-width: 2;
}

.hall .eye {
  fill: var(--spirit-hot);
  filter: drop-shadow(0 0 3px var(--spirit)) drop-shadow(0 0 8px var(--spirit));
  animation: glare 4s ease-in-out infinite;
}

@keyframes glare {
  0%,
  100% {
    opacity: 1;
  }
  48% {
    opacity: 0.7;
  }
  50% {
    opacity: 0.1;
  }
  52% {
    opacity: 0.8;
  }
}

.hall .crown {
  fill: var(--brass);
  stroke: #000;
  stroke-width: 2;
  stroke-linejoin: miter;
}

.hall .gem {
  fill: var(--spirit);
  stroke: #000;
  stroke-width: 1.5;
  filter: drop-shadow(0 0 4px var(--spirit));
}

.hall .blade {
  fill: #b9bec8;
  stroke: #000;
  stroke-width: 1.5;
}

.hall .iron {
  fill: #2c313a;
  stroke: #000;
  stroke-width: 2;
}

.hall .grip {
  stroke: #000;
  stroke-width: 4;
}

/* ---------- The knight, from behind ---------- */

.knight {
  position: absolute;
  left: 50%;
  bottom: 3%;
  z-index: 4;
  width: clamp(70px, 9vw, 112px);
  transform: translateX(-50%);
  filter: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.8));
}

.knight svg {
  display: block;
  width: 100%;
  overflow: visible;
}

.knight .plume {
  fill: var(--banner);
  stroke: #000;
  stroke-width: 2;
}

.knight .cape {
  fill: #0a2016;
  stroke: #000;
  stroke-width: 2.5;
}

.knight .scabbard {
  stroke: #000;
  stroke-width: 6;
  stroke-linecap: round;
}

.knight .hilt {
  stroke: #6e6038;
  stroke-width: 3.5;
  stroke-linecap: round;
}

.knight .steel {
  fill: #4a4f5a;
  stroke: #000;
  stroke-width: 2.5;
  stroke-linejoin: miter;
}

.knight .steel.dark {
  fill: #2c313a;
}

.knight .ridge {
  stroke: #000;
  stroke-width: 2;
}

.knight .leg {
  fill: #2c313a;
  stroke: #000;
  stroke-width: 2.5;
  transform-box: fill-box;
  transform-origin: top center;
}

.knight .body {
  transform-origin: 40px 110px;
}

.knight.walking .body {
  animation: bob 0.34s ease-in-out infinite alternate;
}

.knight.walking .leg.l {
  animation: step 0.34s ease-in-out infinite alternate;
}

.knight.walking .leg.r {
  animation: step 0.34s ease-in-out infinite alternate-reverse;
}

@keyframes bob {
  to {
    transform: translateY(-3px) rotate(1deg);
  }
}

/* From behind, a step reads as the foot lifting, not swinging. */
@keyframes step {
  from {
    transform: scaleY(1);
  }
  to {
    transform: scaleY(0.72);
  }
}

/* ---------- Panels ---------- */

.panel {
  position: absolute;
  top: 50%;
  z-index: 5;
  width: min(360px, 36vw);
  padding: 18px 20px 20px;
  border: 1px solid rgba(216, 205, 180, 0.22);
  border-top: 2px solid var(--spirit);
  background: rgba(7, 8, 10, 0.9);
  box-shadow: 0 0 0 1px #000, 0 18px 40px -14px #000, 0 0 40px -18px var(--spirit);
  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(-50% + var(--rise, 14px)));
}

.panel.left {
  left: max(16px, 4vw);
}

.panel.right,
.panel.throne {
  right: max(16px, 4vw);
}

.panel .kicker {
  margin: 0 0 4px;
  color: var(--spirit);
  font-family: var(--caps);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.panel h2 {
  margin: 0 0 10px;
  font-family: var(--caps);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.panel h2.name {
  font-family: var(--blackletter);
  font-size: clamp(2rem, 4vw, 2.6rem);
  letter-spacing: 0;
  text-transform: none;
  text-shadow: 0 3px 0 #000, 0 0 24px rgba(61, 220, 132, 0.4);
}

.panel p {
  margin: 0 0 10px;
  font-size: 0.95rem;
  line-height: 1.55;
}

.panel p:last-child {
  margin-bottom: 0;
}

.panel a {
  color: var(--spirit-hot);
  text-underline-offset: 3px;
}

/* Placeholder copy still waiting for real words. */
.panel .todo {
  color: var(--bone-dim);
  font-style: italic;
}

.panel .links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.panel .return {
  display: inline-block;
  margin-top: 6px;
  padding: 8px 14px;
  border: 1px solid var(--bone-dim);
  color: var(--bone);
  background: var(--banner-deep);
  font-family: var(--caps);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
}

.panel .return:hover,
.panel .return:focus-visible {
  border-color: var(--spirit);
  background: var(--banner);
  outline: none;
}

.hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(3% + clamp(70px, 9vw, 112px) * 1.6);
  z-index: 5;
  display: grid;
  justify-items: center;
  gap: 8px;
  margin: 0;
  color: var(--bone-dim);
  font-family: var(--caps);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.hint-back {
  margin-top: 4px;
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  opacity: 0.7;
}

/* Backing out through the doorway goes dark before the Great Hall loads. */
.fade {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: var(--void);
  opacity: 0;
  pointer-events: none;
}

.hall .entrance {
  fill: #20242b;
  stroke: #000;
  stroke-width: 3;
  stroke-linejoin: miter;
}

.hall .door-ring {
  fill: none;
  stroke: #000;
  stroke-width: 4;
}

.chevron {
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--bone-dim);
  border-bottom: 2px solid var(--bone-dim);
  transform: rotate(45deg);
  animation: bounce 1.6s ease-in-out infinite;
}

@keyframes bounce {
  50% {
    transform: translateY(8px) rotate(45deg);
  }
}

/* Narrow screens: panels sit across the top, clear of the knight at the bottom. */
@media (max-width: 720px) {
  .panel,
  .panel.left,
  .panel.right,
  .panel.throne {
    top: 60px;
    left: 16px;
    right: 16px;
    width: auto;
    transform: translateY(var(--rise, 14px));
  }

  /* At the throne the king fills the top of the screen, so his panel sits over the carpet. */
  .panel.throne {
    top: auto;
    bottom: calc(3% + clamp(70px, 9vw, 112px) * 1.5 + 12px);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 1ms !important;
  }
}