/* ============================================================
   Félag · Vejen til Valhalla
   Palette shifts with the journey: dawn on the shore, dusk at
   the Ting, night at the Alting. Everything animated here is
   transform/opacity only, so it stays on the compositor.
   ============================================================ */

/* Colour is lifted off Norse and Celtic type specimens rather than off a UI
   kit: aged paper, iron-gall ink over navy, the sage green of an old printed
   border, oxide rust, and the gold leaf used on the capitals. Nothing here is
   a hue picked for contrast alone. */
:root{
  --parchment:#efe3c8;
  /* Secondary text, not faint text. This started at #a1927a, which cleared AA
     on the navy at 5.6:1 and still read washed out. On a page most people are
     reading in a second language, the tone should come from being smaller and
     cooler than the heading, not from being hard to see. Now 10.4:1. */
  --parchment-dim:#d5c9b0;
  --gold:#d3a24c;          /* leaf on the capitals: the one accent */
  --rust:#b3552f;          /* oxide, for heat under the gold */
  --dannebrog:#c8102e;      /* the flag's own red: for fills and marks, never text */
  --danger:#ef8a9c;         /* the same red, lifted until it can be read at 10px */
  --green:#8fae8c;         /* the sage of a printed border */

  /* Each guide's colour is worn as an 11px uppercase label as well as a border
     and a glow, so it has to survive at 11px. At full saturation Thor sat at
     3.5:1 and Astrid at 4.2:1, both under AA, so every guide is lifted to the
     same footing rather than only the two that failed. */
  --thor:#e08a63;
  --freja:#9cc2b9;
  --gorm:#aab4c4;
  --ingrid:#e0b45a;
  --astrid:#b79ac2;
  --bjorn:#e0a355;

  --ease:cubic-bezier(.2,.8,.3,1);

  /* Type.
     Metamorphous for display: letterforms cut rather than written, with the
     flared stems and hard terminals of a carved inscription. It is the one
     costume the page wears, and it wears it only in headings and names.
     Atkinson Hyperlegible for everything read closely: it was designed for
     maximum character distinction, which is not a style preference here.
     Most people using this are reading Danish as a second language and must
     tell apart dates, proper nouns and near-identical answer options. */
  --display:'Metamorphous', Georgia, serif;
  --text:'Atkinson Hyperlegible', system-ui, sans-serif;
}

/* time of day: only these four change between scenes */
[data-palette="dawn"]{  --sky-hi:#2f3f52; --sky-lo:#0f1a2400; --bg:#111d28; --tint:#d9a668; }
[data-palette="day"]{   --sky-hi:#3a5064; --sky-lo:#101c2600; --bg:#0f1a24; --tint:#cfd3c2; }
[data-palette="dusk"]{  --sky-hi:#3d3345; --sky-lo:#12141c00; --bg:#12141c; --tint:#c26a3c; }
[data-palette="night"]{ --sky-hi:#1a2338; --sky-lo:#0a0e1600; --bg:#0a0e16; --tint:#7f93c4; }

*{ box-sizing:border-box; }
/* authored display:flex on views otherwise beats the UA's [hidden] rule */
[hidden]{ display:none !important; }
.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; }

html,body{
  margin:0; min-height:100%;
  background:var(--bg);
  color:var(--parchment);
  font-family:var(--text);
  overflow-x:hidden;
  transition:background .9s ease;
}
body{ display:flex; flex-direction:column; min-height:100vh; min-height:100dvh; }

a{ color:var(--parchment); text-underline-offset:3px; }

/* ---------- scene ---------- */
.scene{ position:fixed; inset:0; z-index:0; pointer-events:none; }
.credit{ position:fixed; top:8px; right:12px; z-index:30; margin:0; font-size:11px; letter-spacing:.04em; color:var(--parchment-dim); display:flex; align-items:center; gap:7px; }
.credit a{ color:var(--parchment-dim); text-decoration:none; display:inline-flex; align-items:center; }
.credit a:hover,.credit a:focus-visible{ color:var(--gold); }
.scene svg{ width:100%; height:100%; display:block; }
.scene .layer{ will-change:transform; transition:transform .5s var(--ease); }

/* ---------- hud ---------- */
.hud{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:14px;
  padding:12px 18px; padding-top:max(12px,env(safe-area-inset-top));
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(239,227,200,.1);
}
.hud-title{ font-family:var(--display); font-weight:600; font-size:15px; }
.hud-meta{ margin-left:auto; font-size:12px; color:var(--parchment-dim); font-variant-numeric:tabular-nums; }
.hud-back{
  display:grid; place-items:center; width:34px; height:34px; padding:0; border-radius:50%; cursor:pointer;
  color:var(--parchment-dim); background:rgba(239,227,200,.04); border:1px solid rgba(239,227,200,.14);
  transition:color .2s ease,border-color .2s ease,background .2s ease,transform .2s var(--ease);
}
.hud-back svg{ width:18px; height:18px; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.hud-back:hover,.hud-back:focus-visible{ color:var(--parchment); border-color:var(--gold); background:rgba(211,162,76,.1); outline:none; transform:translateX(-2px); }

/* ---------- stage ---------- */
/* Above .foot, which shares z-index 1 and comes later in the DOM. The pinned
   mobile start button lives in here, and its own z-index cannot climb out of
   this stacking context, so the stage itself has to sit higher or the footer
   swallows the taps. */
.stage{ position:relative; z-index:2; flex:1; width:100%; max-width:1120px; margin:0 auto; padding:44px 20px 32px; }
/* fill-mode is backwards, not both: 'both' leaves an identity transform on the
   element after the entrance finishes, and any transform makes it a containing
   block for position:fixed children. That silently trapped the mobile start
   button inside the view instead of pinning it to the viewport. */
.view{ display:flex; flex-direction:column; align-items:center; animation:rise .5s var(--ease) backwards; }
/* The mobile start button becomes fixed after choosing a guide. Keep the shore
   entrance free of transforms, which would otherwise trap that button briefly. */
#viewShore{ animation:fade .5s var(--ease) backwards; }

@keyframes rise{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
@keyframes fade{ from{ opacity:0 } to{ opacity:1 } }

.kicker{
  display:flex; align-items:center; gap:9px; margin:0 0 10px;
  font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:var(--parchment-dim);
}
.pennant{ display:inline-flex; }

.title{
  font-family:var(--display); font-weight:700;
  font-size:clamp(32px,5.2vw,54px); margin:0 0 8px; text-align:center;
  text-shadow:0 2px 30px rgba(0,0,0,.45);
}
.subtitle{ max-width:480px; text-align:center; font-size:15px; line-height:1.55; color:var(--parchment-dim); margin:0 0 40px; }

/* ---------- who is studying ---------- */
.profiles{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; width:100%; max-width:560px; }
.profile{
  position:relative; display:flex; align-items:center; gap:10px;
  padding:12px 16px 12px 13px; border-radius:12px; cursor:pointer; font:inherit; color:inherit;
  background:linear-gradient(180deg,rgba(34,52,72,.75),rgba(15,26,36,.75));
  border:1px solid rgba(239,227,200,.12);
  transition:transform .22s var(--ease), border-color .22s ease;
  animation:rise .4s var(--ease) both; animation-delay:var(--d,0s);
}
.profile:hover{ transform:translateY(-3px); border-color:var(--gold); }
.profile .mark{
  width:34px; height:34px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center;
  font-family:var(--display); font-weight:700; font-size:15px;
  background:rgba(239,227,200,.08); border:1px solid rgba(239,227,200,.2); color:var(--parchment);
}
.profile b{ font-family:var(--display); font-weight:600; font-size:16px; }
.profile small{ display:block; font-size:11px; color:var(--parchment-dim); letter-spacing:.04em; }
.profile .drop{
  margin-left:6px; width:24px; height:24px; border-radius:50%; border:none; cursor:pointer;
  background:none; color:var(--parchment-dim); font-size:16px; line-height:1;
}
.profile .drop:hover{ color:var(--danger); background:rgba(200,16,46,.12); }

.new-profile{ display:flex; gap:8px; margin-top:22px; width:100%; max-width:360px; }
.new-profile input{
  flex:1; font:inherit; font-size:15px; padding:12px 14px; border-radius:3px;
  background:rgba(239,227,200,.05); border:1px solid rgba(239,227,200,.18); color:var(--parchment);
}
.new-profile input::placeholder{ color:var(--parchment-dim); }
.new-profile input:focus{ outline:none; border-color:var(--gold); }
.new-profile .btn.primary{ margin-top:0; padding:12px 20px; }
.guest-entry{ display:flex; align-items:center; gap:10px; width:100%; max-width:360px; margin-top:14px; padding:8px 10px; color:var(--parchment-dim); text-align:left; font:inherit; cursor:pointer; border:1px solid transparent; border-radius:11px; background:transparent; transition:color .2s ease,border-color .2s ease,background .2s ease,transform .2s var(--ease); }.guest-sigil{ display:grid; place-items:center; width:34px; height:34px; flex:0 0 auto; color:var(--parchment-dim); border:1px dashed rgba(239,227,200,.25); border-radius:50%; background:rgba(239,227,200,.025); }.guest-sigil svg{ width:22px; height:22px; stroke:currentColor; stroke-width:1.55; stroke-linecap:round; stroke-linejoin:round; }.guest-entry b{ display:block; color:var(--parchment); font-family:var(--display); font-size:14px; font-weight:600; }.guest-entry small{ display:block; margin-top:1px; font-size:11px; }.guest-arrow{ width:17px; height:17px; margin-left:auto; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }.guest-entry:hover,.guest-entry:focus-visible{ color:var(--gold); border-color:rgba(211,162,76,.38); background:rgba(211,162,76,.05); outline:none; transform:translateY(-1px); }.guest-entry:hover .guest-sigil,.guest-entry:focus-visible .guest-sigil{ color:var(--gold); border-style:solid; border-color:rgba(211,162,76,.48); }

/* ---------- roster ---------- */
.roster{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; width:100%; }
@media (max-width:900px){ .roster{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:520px){ .roster{ grid-template-columns:repeat(2,1fr); } }

.char{
  --accent:var(--parchment);
  /* A button does not inherit colour or font: without this the guide names fell
     back to the UA default black and vanished against the dark card. */
  color:var(--parchment); font:inherit;
  position:relative; display:flex; flex-direction:column; align-items:center;
  padding:14px 8px 16px; border-radius:14px; cursor:pointer;
  background:linear-gradient(180deg,rgba(34,52,72,.72),rgba(15,26,36,.72));
  border:1px solid rgba(239,227,200,.09);
  transition:transform .3s var(--ease), border-color .3s ease, box-shadow .3s ease;
  animation:rise .5s var(--ease) both; animation-delay:var(--d,0s);
}
.char:hover{ transform:translateY(-5px); }
.char:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.char[aria-pressed="true"]{
  border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent), 0 20px 40px -18px var(--accent);
  transform:translateY(-7px);
}
/* The portrait is sized by the frame, not by the drawing. An in-flow SVG
   contributes its own intrinsic height, which silently beats aspect-ratio and
   left the cards 260px tall on a phone however the ratio was set. */
.char figure{ position:relative; margin:0; width:100%; aspect-ratio:1/1.08; }
.char svg{ position:absolute; inset:0; width:100%; height:100%; filter:drop-shadow(0 8px 12px rgba(0,0,0,.4)); }
.char b{ font-family:var(--display); font-weight:600; font-size:16px; margin-top:8px; }
.char span{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-top:2px; }

/* idle life: breathing + blink, desynchronised per character */
.rig-body{ transform-box:fill-box; transform-origin:50% 100%; animation:breathe 4.4s ease-in-out infinite; animation-delay:var(--bd,0s); }
.rig-eyes{ transform-box:fill-box; transform-origin:50% 50%; animation:blink 6.5s infinite; animation-delay:var(--ed,0s); }
.rig-sway{ transform-box:fill-box; transform-origin:50% 0; animation:sway 5.2s ease-in-out infinite; animation-delay:var(--bd,0s); }
@keyframes breathe{ 0%,100%{ transform:scaleY(1) } 50%{ transform:scaleY(1.022) } }
@keyframes blink{ 0%,96%,100%{ transform:scaleY(1) } 98%{ transform:scaleY(.1) } }
@keyframes sway{ 0%,100%{ transform:rotate(-1.1deg) } 50%{ transform:rotate(1.1deg) } }

/* ---------- banner ---------- */
.banner{
  margin-top:32px; width:100%; max-width:620px; min-height:92px;
  background:rgba(15,26,36,.75); border:1px solid rgba(239,227,200,.1);
  border-left:3px solid var(--accent,var(--parchment)); border-radius:5px;
  padding:20px 24px; display:flex; flex-direction:column; gap:5px;
  transition:border-color .3s ease;
}
.banner-name{ font-family:var(--display); font-weight:700; font-size:14px; letter-spacing:.05em; text-transform:uppercase; }
.banner-line{ font-family:var(--display); font-style:italic; font-size:19px; line-height:1.4; }
.banner-strength{ font-size:13px; color:var(--parchment-dim); }
.banner-empty{ margin:auto; font-style:italic; color:var(--parchment-dim); font-size:14px; }

/* ---------- buttons ---------- */
.btn{
  font:inherit; font-size:13px; touch-action:manipulation; letter-spacing:.1em; text-transform:uppercase;
  padding:13px 30px; border-radius:3px; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px;
  transition:background .25s ease, color .25s ease, opacity .25s ease, border-color .25s ease;
}
.btn.primary{
  margin-top:26px; padding:14px 24px; border:1px solid rgba(211,162,76,.62); border-radius:10px;
  color:var(--parchment); font-family:var(--display);
  font-weight:600; font-size:13.5px; letter-spacing:.1em;
  /* Rust, not gold: the label is parchment, and gold that light under cream
     text drops the contrast to about 1.7:1. The gold stays on the border. */
  background:radial-gradient(circle at 20% 15%,rgba(255,225,181,.18),transparent 34%),linear-gradient(135deg,#a94d2a,#68291d);
  box-shadow:inset 0 1px rgba(255,255,255,.14),0 10px 22px -15px rgba(0,0,0,.85);
  transition:transform .18s var(--ease),border-color .18s ease,box-shadow .18s ease,filter .18s ease;
}
.btn.primary svg{ width:17px; height:17px; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.new-profile .btn.primary{
  min-width:94px;
  padding-left:18px;
  padding-right:18px;
}
.btn.primary:hover:not(:disabled){ border-color:#eccb8a; box-shadow:0 13px 25px -15px rgba(211,162,76,.8); filter:brightness(1.08); transform:translateY(-2px); }
.btn.primary:active:not(:disabled){ transform:translateY(1px); }
.btn.primary:focus-visible{ outline:2px solid #eccb8a; outline-offset:3px; }
.btn.primary:disabled{ cursor:default; opacity:.48; }
.btn.ghost{ background:none; border:none; color:var(--parchment-dim); text-transform:none; letter-spacing:.02em; }
.btn.ghost:hover{ color:var(--parchment); }
.guide-switch{ display:inline-flex; align-items:center; gap:8px; margin-top:24px; padding:5px 10px 5px 5px; border:1px solid transparent; border-radius:22px; color:var(--parchment-dim); background:transparent; font:inherit; font-size:12px; cursor:pointer; transition:color .2s ease,border-color .2s ease,background .2s ease,transform .2s var(--ease); }.guide-helmet{ display:grid; place-items:center; width:27px; height:27px; color:var(--gold); border:1px solid rgba(211,162,76,.38); border-radius:50%; background:rgba(211,162,76,.06); }.guide-helmet svg{ width:18px; height:18px; stroke:currentColor; stroke-width:1.55; stroke-linecap:round; stroke-linejoin:round; }.guide-switch:hover,.guide-switch:focus-visible{ color:var(--parchment); border-color:rgba(211,162,76,.5); background:rgba(211,162,76,.07); outline:none; transform:translateY(-1px); }
.linklike{ background:none; border:none; color:var(--parchment-dim); font:inherit; font-size:12px; cursor:pointer; text-decoration:underline; text-underline-offset:3px; padding:0; }
.linklike:hover{ color:var(--parchment); }

@media (hover:hover){
  [data-tooltip]{ position:relative; }
  [data-tooltip]::after{
    content:attr(data-tooltip); position:absolute; z-index:30; left:50%; bottom:calc(100% + 11px);
    width:max-content; max-width:240px; padding:8px 10px; border:1px solid rgba(211,162,76,.55); border-radius:7px;
    background:linear-gradient(145deg,#243549,#101a26); box-shadow:0 9px 20px rgba(0,0,0,.42);
    color:var(--parchment); font-family:var(--text); font-size:11px; font-weight:400; letter-spacing:.02em;
    line-height:1.35; text-align:center; text-transform:none; white-space:normal; pointer-events:none;
    opacity:0; transform:translate(-50%,4px); transition:opacity .18s ease,transform .18s var(--ease);
  }
  [data-tooltip]::before{
    content:''; position:absolute; z-index:31; left:50%; bottom:calc(100% + 5px); width:8px; height:8px;
    background:#101a26; border-right:1px solid rgba(211,162,76,.55); border-bottom:1px solid rgba(211,162,76,.55);
    opacity:0; transform:translateX(-50%) rotate(45deg); transition:opacity .18s ease;
  }
  [data-tooltip]:is(:hover,:focus-visible)::after{ opacity:1; transform:translate(-50%,0); }
  [data-tooltip]:is(:hover,:focus-visible)::before{ opacity:1; }
  [data-tooltip][data-tooltip-side="down"]::after{ top:calc(100% + 11px); bottom:auto; transform:translate(-50%,-4px); }
  [data-tooltip][data-tooltip-side="down"]::before{ top:calc(100% + 5px); bottom:auto; border:0; border-left:1px solid rgba(211,162,76,.55); border-top:1px solid rgba(211,162,76,.55); }
  [data-tooltip][data-tooltip-side="down"]:is(:hover,:focus-visible)::after{ transform:translate(-50%,0); }
}

/* ---------- path / modes ---------- */
.path-head{ display:flex; align-items:center; gap:16px; }
.walker{ width:58px; height:58px; border-radius:50%; overflow:hidden; flex:0 0 auto; background:rgba(15,26,36,.8); border:1px solid rgba(239,227,200,.16); }
.walker svg{ width:100%; height:100%; transform:translateY(7px) scale(1.35); }
.path-kicker{ margin:0; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--parchment-dim); }
.path-kicker span{ color:var(--gold); }
.path-title{ font-family:var(--display); font-weight:700; font-size:clamp(23px,3.4vw,32px); margin:2px 0 0; }
.path-sub{ max-width:560px; text-align:center; font-size:14px; line-height:1.6; color:var(--parchment-dim); margin:16px 0 34px; }

/* ---------- the map ---------- */
.section-head{
  font-family:var(--display);
  font-weight:600; font-size:20px; margin:8px 0 4px; align-self:flex-start;
}
.section-note{ font-size:13px; color:var(--parchment-dim); margin:0 0 18px; align-self:flex-start; max-width:560px; line-height:1.55; }
.learning-path{
  display:grid; grid-template-columns:76px 1fr auto; align-items:center; gap:17px; width:100%; max-width:760px;
  padding:18px 20px; color:var(--parchment); text-align:left; cursor:pointer; font:inherit;
  border:1px solid rgba(211,162,76,.34); border-radius:15px;
  background:radial-gradient(circle at 12% 30%,rgba(211,162,76,.09),transparent 25%),linear-gradient(145deg,rgba(38,56,78,.86),rgba(13,23,33,.96));
  box-shadow:inset 0 1px rgba(255,255,255,.06),0 16px 30px -24px #000;
  transition:transform .25s var(--ease),border-color .25s ease,box-shadow .25s ease;
}
.learning-path:hover,.learning-path:focus-visible{ outline:none; transform:translateY(-3px); border-color:var(--gold); box-shadow:0 18px 35px -22px rgba(211,162,76,.8); }
.learning-sigil{ display:grid; place-items:center; width:62px; height:62px; color:var(--gold); border:1px solid rgba(211,162,76,.45); border-radius:50%; background:rgba(211,162,76,.07); }
.learning-sigil svg{ width:48px; height:43px; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }.learning-sigil circle{ fill:var(--bg); }
.learning-copy{ min-width:0; }.learning-kicker{ display:block; color:var(--gold); font-size:10px; letter-spacing:.14em; text-transform:uppercase; }.learning-copy > b{ display:block; margin-top:1px; font-family:var(--display); font-size:23px; font-weight:600; }.learning-copy > small{ display:block; margin-top:2px; color:var(--parchment-dim); font-size:12px; }
.learning-meter{ display:flex; align-items:center; gap:5px; margin-top:12px; }.learning-meter i{ display:block; width:21px; height:5px; border-radius:5px; background:rgba(239,227,200,.16); }.learning-meter i.done{ background:var(--green); }.learning-meter i.open{ background:var(--gold); box-shadow:0 0 9px -1px var(--gold); }.learning-meter em{ margin-left:5px; color:var(--parchment-dim); font-size:11px; font-style:normal; white-space:nowrap; }
.learning-open{ display:flex; align-items:center; gap:6px; color:var(--gold); font-family:var(--display); font-size:13px; font-weight:600; white-space:nowrap; }.learning-open svg{ width:19px; height:19px; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.learning-view-head{ display:flex; align-items:center; gap:16px; align-self:flex-start; }.learning-view-head .learning-sigil{ width:58px; height:58px; }.learning-view-head .learning-sigil svg{ width:43px; height:39px; }
.training-head{ display:flex; align-items:center; gap:16px; align-self:flex-start; }.training-sigil{ display:grid; place-items:center; width:58px; height:58px; color:var(--freja); border:1px solid rgba(143,174,140,.45); border-radius:50%; background:rgba(143,174,140,.08); }.training-sigil .topic-icon{ width:32px; height:32px; }

.halls{ width:100%; max-width:760px; display:flex; flex-direction:column; margin-bottom:34px; }
.hall{ position:relative; display:flex; gap:16px; padding:9px 0; align-items:flex-start; animation:rise .45s var(--ease) both; animation-delay:var(--d,0s); }
.hall .thread{
  position:absolute; left:25px; top:56px; bottom:-9px; width:2px;
  background:repeating-linear-gradient(to bottom, rgba(239,227,200,.22) 0 6px, transparent 6px 12px);
}
.hall:last-child .thread{ display:none; }
.hall .node{
  position:relative; z-index:1; flex:0 0 auto; width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center; font-family:var(--display); font-weight:700; font-size:17px;
  background:rgba(15,26,36,.9); border:2px solid var(--accent,var(--parchment-dim)); color:var(--accent,var(--parchment));
  transition:box-shadow .3s ease;
}
.hall.done .node{ box-shadow:0 0 0 1px var(--accent), 0 0 22px -4px var(--accent); }
.hall.shut .node{ border-color:rgba(239,227,200,.18); color:var(--parchment-dim); }

.hall .body{
  flex:1; text-align:left; padding:14px 18px; border-radius:12px; color:inherit; font:inherit;
  background:linear-gradient(180deg,rgba(34,52,72,.72),rgba(15,26,36,.72));
  border:1px solid rgba(239,227,200,.09); cursor:pointer;
  transition:transform .25s var(--ease), border-color .25s ease;
}
.hall:not(.shut) .body:hover{ transform:translateX(4px); border-color:var(--accent); }
.hall.shut .body{ cursor:not-allowed; opacity:.5; }
.hall .names{ display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; }
.hall .da{ font-family:var(--display); font-weight:600; font-size:17px; }
.hall .en{ font-size:12px; color:var(--parchment-dim); font-style:italic; }
.hall .state{
  margin-left:auto; display:inline-flex; align-items:center; gap:6px;
  font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--parchment-dim);
}
.hall .state svg{ width:14px; height:14px; flex:0 0 auto; }
.hall .node svg{ width:22px; height:22px; }
.hall.done .state{ color:var(--accent); }
.hall .chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.hall .chips span{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; padding:5px 10px 5px 7px; border-radius:20px; color:var(--parchment-dim);
  background:rgba(239,227,200,.05); border:1px solid rgba(239,227,200,.12);
}
.hall:not(.shut) .chips span{ color:var(--parchment); }
.hall-progress{ display:flex; flex-wrap:wrap; gap:6px; margin-top:11px; }.hall-progress span{ padding:4px 7px; border-radius:5px; background:rgba(239,227,200,.05); color:var(--parchment-dim); font-size:10px; letter-spacing:.04em; text-transform:uppercase; }.hall-progress span:last-child{ color:var(--gold); background:rgba(211,162,76,.08); }.hall-progress b{ color:var(--parchment); font-variant-numeric:tabular-nums; }
.topic-icon{ width:18px; height:18px; flex:0 0 auto; }
.hall .chips .topic-icon{ color:var(--accent); }

/* ---------- Sagaerne: the reading room ----------
   The same road the hall list draws, walked between settlements instead of
   halls. Nothing here is gated, so there is no `shut` state to style: the
   only thing a place can be short of is inhabited. */
.hall-main{ flex:1; display:flex; flex-direction:column; gap:6px; min-width:0; }
.hall-main .body{ width:100%; }
/* The same board as the hall above it, in the same width, so the way into the
   reading is not whispered next to a door that is shouted. Dashed, because it
   is the one thing here with no gate on it and it should not be mistaken for a
   second hall to sit. */
.hall-read{
  display:flex; align-items:center; gap:11px; width:100%;
  padding:11px 14px; border-radius:12px; cursor:pointer; font:inherit; text-align:left;
  color:var(--parchment-dim); background:rgba(239,227,200,.025);
  border:1px dashed rgba(239,227,200,.2);
  transition:color .2s ease, border-color .2s ease, background .2s ease, transform .25s var(--ease);
}
.read-mark{
  display:grid; place-items:center; width:32px; height:32px; flex:0 0 auto;
  color:var(--accent); border:1px solid rgba(239,227,200,.16); border-radius:50%;
  background:rgba(239,227,200,.04);
}
.read-mark svg{ width:18px; height:18px; }
.read-copy{ min-width:0; }
.hall-read b{ display:block; color:var(--parchment); font-family:var(--display); font-size:15px; font-weight:600; }
.hall-read small{ display:block; margin-top:1px; font-size:11px; letter-spacing:.03em; }
.read-go{ width:18px; height:18px; margin-left:auto; flex:0 0 auto; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.hall-read:hover,.hall-read:focus-visible{
  outline:none; color:var(--parchment); border-style:solid; border-color:var(--accent);
  background:rgba(239,227,200,.05); transform:translateX(4px);
}
.hall-read:hover .read-mark,.hall-read:focus-visible .read-mark{ border-color:var(--accent); }
/* The gate greys the hall out; it must not grey out the way into the reading,
   which is the one thing still on offer to somebody standing at a locked door. */
.hall.shut .hall-read{ opacity:1; }

.places{ width:100%; max-width:760px; display:flex; flex-direction:column; margin-bottom:30px; }
.place{ position:relative; display:flex; gap:16px; padding:9px 0; align-items:flex-start;
  animation:rise .45s var(--ease) both; animation-delay:var(--d,0s);
  /* clearance for the sticky HUD when a fold scrolls a settlement back into view */
  scroll-margin-top:76px; }
.place .thread{
  position:absolute; left:25px; top:56px; bottom:-9px; width:2px;
  background:repeating-linear-gradient(to bottom, rgba(239,227,200,.22) 0 6px, transparent 6px 12px);
}
.place:last-child .thread{ display:none; }
.place .node{
  position:relative; z-index:1; flex:0 0 auto; width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(15,26,36,.9); border:2px solid var(--accent,var(--parchment-dim));
  color:var(--accent,var(--parchment));
}
.place .node svg{ width:27px; height:27px; }
/* Size carries the meaning, so the ring grows with the settlement rather than
   leaving the count to do all the work by itself. */
.place.by .node{ width:58px; height:58px; box-shadow:0 0 0 1px var(--accent), 0 0 22px -4px var(--accent); }
.place.by .node svg{ width:32px; height:32px; }
.place.kobstad .node{ box-shadow:0 0 16px -6px var(--accent); }
.place.gaard .node svg{ width:23px; height:23px; }
.place.oede .node{ border-style:dashed; border-color:rgba(239,227,200,.2); color:var(--parchment-dim); }
.place.oede .node svg{ width:22px; height:22px; }

.place .body{
  flex:1; min-width:0; padding:14px 18px; border-radius:12px;
  background:linear-gradient(180deg,rgba(34,52,72,.72),rgba(15,26,36,.72));
  border:1px solid rgba(239,227,200,.09);
}
.place.oede .body{ background:rgba(15,26,36,.5); }
.place .body summary{ cursor:pointer; list-style:none; }
.place .body summary::-webkit-details-marker{ display:none; }
.place .body summary:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; border-radius:6px; }
.place .names{ display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; }
.place .da{ font-family:var(--display); font-weight:600; font-size:17px; }
.place.oede .da{ color:var(--parchment-dim); }
.place .state{
  margin-left:auto; display:inline-flex; align-items:center; gap:6px;
  font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--accent);
}
.place.oede .state{ color:var(--parchment-dim); }
.place .state svg{ width:15px; height:15px; transition:transform .25s var(--ease); }
.place .body[open] .state svg{ transform:rotate(180deg); }
.place-meta{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.place-meta span{
  padding:4px 8px; border-radius:5px; background:rgba(239,227,200,.05);
  color:var(--parchment-dim); font-size:10px; letter-spacing:.04em; text-transform:uppercase;
}
.place-meta .lost{ color:#f0a9a9; background:rgba(200,16,46,.14); }
.covers{ display:block; margin-top:9px; font-size:12px; line-height:1.5; color:var(--parchment-dim); font-style:italic; }

.told{ margin-top:16px; padding-top:14px; border-top:1px solid rgba(239,227,200,.1); }
.told-a{ margin:0; font-family:var(--display); font-size:16px; font-weight:600; color:var(--gold); }
.told-a em{
  display:inline-block; white-space:nowrap;
  margin-left:9px; padding:2px 7px; border-radius:4px; font-style:normal;
  font-family:var(--text); font-size:10px; letter-spacing:.07em; text-transform:uppercase;
  color:#f0a9a9; background:rgba(200,16,46,.16);
}
.told-why{ margin:7px 0 0; font-size:14.5px; line-height:1.68; }
.told-src{ margin:8px 0 0; font-size:11.5px; line-height:1.55; color:var(--parchment-dim); font-style:italic; }
.told-src a{ color:var(--parchment-dim); }
.told.missed{ border-left:2px solid rgba(200,16,46,.5); margin-left:-12px; padding-left:10px; }
.told-none{ margin:14px 0 0; font-size:13.5px; line-height:1.65; color:var(--parchment-dim); font-style:italic; }

.places-legend i.by{ background:var(--gold); box-shadow:0 0 9px -1px var(--gold); }
.places-legend i.landsby{ background:rgba(239,227,200,.45); }
.places-legend i.oede{ background:transparent; border:1px dashed rgba(239,227,200,.35); }

/* The way back into the reading, offered where it lands hardest: the screen
   that has just told somebody the hall turned them away. */
.read-back{
  display:flex; align-items:center; gap:11px; width:100%; margin-top:16px; padding:11px 13px;
  border-radius:12px; cursor:pointer; font:inherit; text-align:left; color:var(--parchment-dim);
  background:rgba(239,227,200,.03); border:1px solid rgba(239,227,200,.14);
  transition:color .2s ease, border-color .2s ease, transform .2s var(--ease);
}
.read-sigil{
  display:grid; place-items:center; width:34px; height:34px; flex:0 0 auto; color:var(--gold);
  border:1px solid rgba(211,162,76,.38); border-radius:50%; background:rgba(211,162,76,.06);
}
.read-sigil svg{ width:20px; height:20px; }
.read-back b{ display:block; color:var(--parchment); font-family:var(--display); font-size:14px; font-weight:600; }
.read-back small{ display:block; margin-top:1px; font-size:11px; }
.read-back:hover,.read-back:focus-visible{ outline:none; color:var(--parchment); border-color:var(--gold); transform:translateY(-1px); }

/* ---------- the saga map ----------
   The same eight stops as the list, laid out as ground. The list is the
   accessible route through and this is the picture, so everything here is
   allowed to be decorative except the nodes, which are real buttons. */
.view-swap{
  display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
  padding:8px 14px; border-radius:20px; cursor:pointer;
  font-family:var(--text); font-size:12px; letter-spacing:.04em; color:var(--parchment-dim);
  background:rgba(239,227,200,.04); border:1px solid rgba(239,227,200,.14);
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.view-swap:hover{ color:var(--parchment); border-color:var(--gold); }
.view-swap svg{ width:16px; height:16px; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }

.map{
  position:relative; width:100%; max-width:min(960px, 98vh); aspect-ratio:1200/780;
  overflow:hidden; touch-action:none; cursor:grab;
  border-radius:14px; border:1px solid rgba(239,227,200,.12);
  background:radial-gradient(ellipse at 48% 42%,#12304a 0,#0b2135 46%,#07111d 100%);
}
.map.grabbing{ cursor:grabbing; }
.map-pan{ position:absolute; inset:0; transform-origin:50% 50%; }
.map-svg{ width:100%; height:100%; overflow:visible; }

/* Everything below is scoped to .map on purpose. The first draft used a bare
   .node and .hall on the SVG groups, which collided with the hall list's
   .hall{animation:rise both} — a filled CSS transform silently beats an SVG
   transform attribute, so all six halls stacked in the corner. */
.map .land{ fill:url(#mapland); stroke:#6d7d58; stroke-width:3.5; }
.map .sea-ring{ fill:none; stroke:#0d2438; stroke-width:26; opacity:.7; }
.map .shore-line{ fill:none; stroke:#9c8f68; stroke-width:7; opacity:.3; }
.map .fjord,.map .river{ fill:none; stroke:#3f7996; stroke-linecap:round; opacity:.45; }
.map .fjord{ stroke-width:9; }
.map .river{ stroke-width:6; }
.map .peak{ fill:#404e47; stroke:#28322e; stroke-width:2; }
.map .snow{ fill:#b9c4b8; }
.map .wood{ fill:#1b3325; opacity:.8; }
.map .region{ fill:#cdd8cb; font-family:var(--display); font-size:15px; letter-spacing:.1em; opacity:.5; text-anchor:middle; }
.map .region-sub{ fill:#8fa39a; font-size:9px; letter-spacing:.14em; opacity:.45; text-anchor:middle; }
.map .grain{ fill:url(#mapgrain); stroke:none; }
.map .sea-name{ fill:#6d8ba3; font-family:var(--display); font-size:13px; letter-spacing:.22em; opacity:.4; text-anchor:middle; }

.map .road{ fill:none; stroke-width:4; stroke-linecap:round; }
.map .road.ahead{ stroke:#77899a; stroke-dasharray:6 9; opacity:.45; }
.map .road.walked{ stroke:var(--gold); stroke-dasharray:7 8; opacity:.6; }

.map .stop{ cursor:pointer; }
/* Fitted on a phone the visible ring is a twelve-pixel target, which no
   fingertip can hit. This is the target; the ring is only what it looks like.
   The radius is set by the closest pair of stops rather than by what a thumb
   deserves: Tinget and Altinget are 132 units apart, so 62 is the widest that
   still leaves daylight between them, and it buys 37 pixels at the tightest
   fit. Short of the 44 a fingertip wants, and the most the road can give.
   `transparent` and not `none`, because a shape with no fill is not there as
   far as hit-testing is concerned.

   A mouse does not want it. At desktop width the same circle is 97 pixels of
   dead ground that cannot be grabbed to drag the map, and it lights the hover
   halo from half a stop away. A cursor already hits the 47-pixel halo without
   help, so on a fine pointer this is not merely ignored, it is removed —
   `pointer-events:none` would still leave it eating the drag. */
.map .stop-hit{ fill:transparent; }
@media (pointer:fine){ .map .stop-hit{ display:none; } }
.map .stop-halo{ fill:rgba(7,17,29,.55); }
.map .stop-ring{ fill:#111d24; stroke:var(--accent); stroke-width:3; }
.map .stop-numeral{ fill:var(--parchment); font-family:var(--display); font-size:16px; text-anchor:middle; }
.map .stop-glyph{ fill:none; stroke:var(--accent); stroke-width:2.4; stroke-linecap:round; }
.map .stop-name,.map .stop-state{
  text-anchor:middle; paint-order:stroke; stroke:#07111d; stroke-linejoin:round;
}
.map .stop-name{ fill:var(--parchment); font-family:var(--display); font-size:14px; stroke-width:5px; }
.map .stop-state{ fill:var(--parchment-dim); font-size:10px; letter-spacing:.1em; stroke-width:4px; }
.map .stop.done .stop-ring{ fill:rgba(143,174,140,.14); }
.map .stop.done .stop-state{ fill:var(--green); }
.map .stop.shut{ opacity:.4; cursor:not-allowed; }
.map .stop.shut .stop-ring{ stroke:rgba(239,227,200,.3); }
.map .stop-pulse{
  fill:var(--accent); opacity:.28;
  transform-box:fill-box; transform-origin:center;
  animation:mapPulse 2.4s var(--ease) infinite;
}
.map .stop:hover .stop-halo,.map .stop:focus-visible .stop-halo{
  fill:color-mix(in srgb, var(--accent) 30%, transparent);
}
.map .stop:focus-visible{ outline:none; }
.map .stop:focus-visible .stop-ring{ stroke:var(--parchment); stroke-width:5; }
@keyframes mapPulse{ 0%,100%{ transform:scale(1); opacity:.28; } 50%{ transform:scale(1.45); opacity:0; } }

/* The island is inhabited. None of it is clickable: a figure standing on a
   stop must never eat the click meant for the stop. */
.map .folk{ pointer-events:none; }
.map .leash{ fill:none; stroke:none; }
/* Six figures of the same size in the same style, and one of them is you. The
   ring on the ground is the only thing saying which. */
.map .fig-mark{ fill:rgba(211,162,76,.2); stroke:var(--gold); stroke-width:2; }
.map .mine{ transition:transform .18s linear; }
.map .ship-hull{ fill:#2b3a44; }
.map .ship-mast{ stroke:#2b3a44; stroke-width:2; }
.map .ship-sail{ fill:#ded3ba; }
.map .ship-stripe{ stroke:#a8563f; stroke-width:2.6; }
/* A figure sliding along a road reads as a chess piece being pushed. One unit
   of bob turns it into someone walking. `translate` rather than `transform`
   because the group already carries a transform attribute placing and scaling
   the artwork, and these two compose instead of fighting. */
.map .fig-step{ animation:mapStep .8s ease-in-out infinite; }
@keyframes mapStep{ 50%{ translate:0 -1.6px; } }

.map-legend{ display:flex; gap:16px; flex-wrap:wrap; color:var(--parchment-dim); font-size:11px; letter-spacing:.06em; }
.map-legend span{ display:inline-flex; align-items:center; gap:6px; }
.map-legend i{ width:9px; height:9px; border-radius:50%; }
.map-legend i.done{ background:var(--green); }
.map-legend i.open{ background:var(--gold); }
.map-legend i.shut{ background:rgba(239,227,200,.28); }
.map-legend i.you{ background:var(--gold); box-shadow:0 0 0 3px rgba(211,162,76,.25); }

/* Eight labels in a 1200-unit box shrink to about four pixels of type on a
   phone, so the map used to be withheld below this width. It is offered now,
   fitted like everywhere else: the whole island first, and a pinch to read
   any part of it. Small type is the price of an overview, and an overview is
   what someone opening a map came for. */

/* ---------- Vikingheim ----------
   A WebGL canvas and nothing else. It is scenery, so it is allowed to be
   large, and it is focusable so the arrow keys can reach the camera. */
.heim{
  position:relative; width:100%; max-width:min(1000px, 150vh); aspect-ratio:16/10;
  overflow:hidden; touch-action:none; cursor:grab;
  border-radius:14px; border:1px solid rgba(239,227,200,.12);
  background:#1b2436;
  box-shadow:inset 0 0 120px 40px rgba(10,8,6,.45);
}
.heim:active{ cursor:grabbing; }
.heim:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.heim canvas{ display:block; width:100%; height:100%; }
.heim-absent{ display:grid; place-items:center; height:100%; margin:0; padding:0 24px; text-align:center; color:var(--parchment-dim); font-size:14px; }
.heim-controls{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:center; }
.heim-hint{ color:var(--parchment-dim); font-size:11px; letter-spacing:.04em; }
.heim-hint kbd{
  font:inherit; padding:1px 5px; border-radius:4px;
  background:rgba(239,227,200,.07); border:1px solid rgba(239,227,200,.16);
}
.era h4{ display:flex; align-items:center; gap:9px; }
.era h4 .topic-icon{ width:20px; height:20px; color:var(--gold); }

.modes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; width:100%; max-width:860px; }
.mode{
  --accent:var(--parchment);
  text-align:left; padding:20px 22px; border-radius:13px; cursor:pointer;
  background:linear-gradient(180deg,rgba(34,52,72,.72),rgba(15,26,36,.72));
  border:1px solid rgba(239,227,200,.1); color:inherit; font:inherit;
  transition:transform .25s var(--ease), border-color .25s ease;
  animation:rise .5s var(--ease) both; animation-delay:var(--d,0s);
}
.mode:hover{ transform:translateY(-4px); border-color:var(--accent); }
.mode:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.mode h3{ display:flex; align-items:center; gap:8px; font-family:var(--display); font-weight:600; font-size:19px; margin:0 0 2px; }
.mode h3 .topic-icon{ color:var(--accent); width:23px; height:23px; }
/* Optical sizing: the shield and parliament paths fill more of their viewBox
   than the Training book, so their SVG canvases are smaller to match its ink. */
.mode h3 .mode-icon.dyst{ width:20px; height:20px; }
.mode h3 .mode-icon.alting{ width:23.5px; height:23.5px; }
.mode .en{ font-size:12px; color:var(--parchment-dim); font-style:italic; }
.mode p{ font-size:13px; line-height:1.55; color:var(--parchment-dim); margin:10px 0 0; }
.mode .tag{ display:inline-block; margin-top:12px; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); }
.mode .best{ margin-left:auto; font-family:var(--text); font-size:11px; color:var(--parchment-dim); font-variant-numeric:tabular-nums; }

/* ---------- the date everything is actually for ----------
   Deliberately not a card. The page already has three of them above it, and a
   fourth would compete with the thing you came here to click. One line, the
   boat riding on it, sitting with the fineprint where quiet facts belong. */
.landing{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:5px 10px;
  margin:28px 0 0; color:var(--parchment-dim); font-size:13px; text-align:center;
}
.landing-boat{ display:inline-grid; place-items:center; width:34px; height:28px; color:var(--gold); }
.landing-boat svg{ width:34px; height:28px; }
.landing-boat .hull{ transform-box:fill-box; transform-origin:50% 100%; animation:bob 3.4s ease-in-out infinite; }
.landing b{ color:var(--gold); font-family:var(--display); font-size:19px; line-height:1; font-variant-numeric:tabular-nums; }
.landing em{ font-style:normal; }
.landing a{ color:var(--parchment-dim); }

.fineprint{ margin:22px 0 0; font-size:12px; line-height:1.6; color:var(--parchment-dim); text-align:center; max-width:520px; }

/* ---------- Tidslinjen ----------
   A course sailed from the vikings to now. The line runs down the left, the
   periods hang off it, and the width of each marker shows how much of the
   paper that period actually carries. */
.eras{ position:relative; width:100%; max-width:720px; display:flex; flex-direction:column; }
.era{
  position:relative; display:flex; gap:16px; padding:7px 0; align-items:stretch;
  animation:rise .45s var(--ease) both; animation-delay:var(--d,0s);
}
.era .axis{ position:relative; flex:0 0 74px; text-align:right; padding-top:14px; }
.era .axis b{
  display:block; font-family:var(--display);
  font-weight:600; font-size:15px; color:var(--parchment); font-variant-numeric:tabular-nums;
}
.era .axis span{ display:block; font-size:11px; color:var(--parchment-dim); font-variant-numeric:tabular-nums; }
.era::before{                                   /* the line itself */
  content:''; position:absolute; left:88px; top:0; bottom:0; width:2px;
  background:repeating-linear-gradient(to bottom, rgba(239,227,200,.2) 0 6px, transparent 6px 12px);
}
.era:first-child::before{ top:22px; }
.era:last-child::before{ bottom:auto; height:22px; }
.era .knot{
  position:absolute; left:82px; top:18px; width:14px; height:14px; border-radius:50%;
  background:var(--bg); border:2px solid var(--parchment-dim); z-index:1;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.era:hover .knot{ border-color:var(--gold); box-shadow:0 0 14px -2px var(--gold); }
.era .body{
  flex:1; margin-left:20px; text-align:left; color:inherit; font:inherit; cursor:pointer;
  padding:13px 17px; border-radius:12px;
  background:linear-gradient(180deg,rgba(34,52,72,.7),rgba(15,26,36,.7));
  border:1px solid rgba(239,227,200,.09);
  transition:transform .25s var(--ease), border-color .25s ease;
}
.era .body:hover:not(:disabled){ transform:translateX(4px); border-color:var(--gold); }
.era .body:disabled{ cursor:default; opacity:.45; }
.era h4{ font-family:var(--display); font-weight:600; font-size:16px; margin:0; }
.era .weight{ display:flex; align-items:center; gap:9px; margin-top:9px; }
.era .weight i{ height:4px; border-radius:2px; background:var(--gold); opacity:.55; }
.era .weight span{ font-size:11px; color:var(--parchment-dim); letter-spacing:.05em; text-transform:uppercase; }

@media (max-width:620px){
  .era .axis{ flex-basis:58px; }
  .era::before{ left:70px; }
  .era .knot{ left:64px; }
  .era .body{ margin-left:14px; padding:11px 13px; }
}

/* ---------- Arena ---------- */
.arena-head{ display:flex; align-items:center; gap:17px; margin-bottom:4px; }
.arena-sigil{
  width:78px; height:68px; color:var(--parchment-dim); flex:0 0 auto;
  filter:drop-shadow(0 7px 8px rgba(0,0,0,.45));
}
.arena-sigil svg{ width:100%; height:100%; }
.arena-choices{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; width:100%; max-width:780px; }
.arena-choice{
  --accent:var(--bjorn);
  min-height:180px; padding:18px; border:none; cursor:pointer; color:var(--parchment); text-align:left;
  display:flex; align-items:center; gap:16px; font:inherit;
  background:
    radial-gradient(circle at 16% 20%, rgba(211,162,76,.1), transparent 30%),
    linear-gradient(155deg,rgba(36,54,74,.9),rgba(13,23,33,.96));
  border:1px solid rgba(239,227,200,.12); border-radius:16px;
  box-shadow:inset 0 1px rgba(255,255,255,.04),0 18px 30px -22px rgba(0,0,0,.9);
  transition:transform .25s var(--ease),border-color .25s ease,box-shadow .25s ease;
}
.arena-choice:hover{ transform:translateY(-5px); border-color:var(--accent); box-shadow:0 18px 38px -20px var(--accent); }
.arena-figure{ width:116px; height:140px; flex:0 0 auto; position:relative; }
.arena-figure svg{ width:100%; height:100%; }
.arena-link-mark{
  width:104px; height:104px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center;
  color:var(--parchment); border:5px solid #6f5035;
  background:
    linear-gradient(45deg,transparent 46%,rgba(239,227,200,.35) 47% 51%,transparent 52%),
    linear-gradient(-45deg,transparent 46%,rgba(239,227,200,.35) 47% 51%,transparent 52%),
    radial-gradient(circle,#8f663f 0 16%,#553a27 17% 50%,#281a10 51%);
  box-shadow:inset 0 0 0 3px #2f2016,0 8px 15px rgba(0,0,0,.45);
}
.arena-link-mark svg{ width:48px; height:48px; }
.arena-copy{ display:flex; flex-direction:column; align-items:flex-start; }
.arena-copy b{ font-family:var(--display); font-size:20px; }
.arena-copy small{ color:var(--parchment-dim); line-height:1.45; margin-top:5px; }
.arena-copy em{ color:var(--accent); font-style:normal; text-transform:uppercase; letter-spacing:.12em; font-size:11px; margin-top:17px; }

.scoreboard{ width:100%; max-width:780px; margin-top:30px; padding:19px; border:1px solid rgba(239,227,200,.12); border-radius:16px; background:linear-gradient(145deg,rgba(33,50,70,.52),rgba(9,16,24,.76)); }
.scoreboard-head{ display:flex; align-items:end; justify-content:space-between; gap:16px; margin-bottom:13px; }.scoreboard-head p{ margin:0; color:var(--gold); font-size:10px; letter-spacing:.14em; text-transform:uppercase; }.scoreboard-head h3{ margin:2px 0 0; font-family:var(--display); font-size:22px; font-weight:600; }.scoreboard-head > span{ padding:6px 9px; border:1px solid rgba(143,174,140,.34); border-radius:20px; color:var(--green); background:rgba(143,174,140,.08); font-size:11px; white-space:nowrap; }
.scoreboard-summary{ display:grid; grid-template-columns:1.55fr repeat(3,.7fr); overflow:hidden; border:1px solid rgba(239,227,200,.12); border-radius:12px; background:rgba(7,13,20,.43); }
.record-hero{ display:flex; align-items:center; gap:11px; padding:14px; border-right:1px solid rgba(239,227,200,.12); background:radial-gradient(circle at 18% 30%,rgba(143,174,140,.17),transparent 43%); }.record-hero.empty{ background:radial-gradient(circle at 18% 30%,rgba(211,162,76,.16),transparent 43%); }.record-shield{ display:grid; place-items:center; width:42px; height:42px; color:var(--green); border:1px solid rgba(143,174,140,.5); border-radius:50%; background:rgba(143,174,140,.09); }.record-hero.empty .record-shield{ color:var(--gold); border-color:rgba(211,162,76,.5); background:rgba(211,162,76,.08); }.record-shield svg{ width:25px; height:25px; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }.record-hero small,.record-hero em{ display:block; color:var(--parchment-dim); font-size:10px; font-style:normal; }.record-hero b{ display:block; margin:1px 0; font-family:var(--display); font-size:27px; line-height:1; font-variant-numeric:tabular-nums; }
.record-total{ display:grid; grid-template-columns:18px 1fr; grid-template-rows:auto auto; column-gap:4px; align-items:center; padding:10px; border-left:1px solid rgba(239,227,200,.1); }.record-total svg{ grid-row:1 / 3; width:18px; height:18px; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }.record-total b{ font-family:var(--display); font-size:17px; line-height:1; font-variant-numeric:tabular-nums; }.record-total small{ color:var(--parchment-dim); font-size:9px; letter-spacing:.08em; text-transform:uppercase; }.record-total.won{ color:var(--green); }.record-total.lost{ color:var(--danger); }.record-total.draw{ color:var(--parchment-dim); }
.match-feed{ display:flex; flex-direction:column; gap:7px; margin-top:16px; }.match-feed-title{ margin:0 0 1px; color:var(--parchment-dim); font-size:10px; letter-spacing:.12em; text-transform:uppercase; }.match{ display:grid; grid-template-columns:36px 1fr auto auto; align-items:center; gap:10px; padding:9px 11px; border-radius:9px; background:rgba(239,227,200,.035); border:1px solid rgba(239,227,200,.08); }.match-mark{ display:grid; place-items:center; width:31px; height:31px; color:var(--parchment-dim); }.match-mark svg{ width:25px; height:25px; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }.match.won .match-mark,.match.won em{ color:var(--green); }.match.lost .match-mark,.match.lost em{ color:var(--danger); }.match.draw .match-mark,.match.draw em{ color:var(--parchment-dim); }.match b{ display:block; font-family:var(--display); font-size:15px; }.match small{ color:var(--parchment-dim); font-size:10px; }.match-score{ display:flex; align-items:baseline; gap:3px; font-variant-numeric:tabular-nums; }.match-score b{ font-size:18px; }.match-score i{ color:var(--parchment-dim); font-size:12px; font-style:normal; }.match em{ font-size:10px; font-style:normal; letter-spacing:.1em; text-transform:uppercase; }
.scoreboard-empty{ display:flex; align-items:center; gap:10px; margin-top:16px; padding:15px; border:1px dashed rgba(239,227,200,.18); border-radius:10px; color:var(--parchment-dim); font-size:12px; line-height:1.45; }.scoreboard-empty svg{ width:28px; height:28px; flex:0 0 auto; color:var(--gold); stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }.scoreboard-empty b{ display:block; color:var(--parchment); font-family:var(--display); font-size:15px; }
.match-more{ width:100%; margin-top:4px; padding:11px; border:1px dashed rgba(239,227,200,.2); border-radius:9px; background:transparent; color:var(--parchment-dim); font:inherit; font-size:11px; letter-spacing:.06em; cursor:pointer; transition:color .2s ease,border-color .2s ease,background .2s ease; }
.match-more:hover,.match-more:focus-visible{ color:var(--gold); border-color:rgba(211,162,76,.45); background:rgba(211,162,76,.05); outline:none; }

/* ---------- the verdict of a duel ----------
   Two people rowed the same water, so the card leads with the banner and the
   two numbers rather than with your score out of fifteen. You should be able
   to tell a win from a loss from across the room, before reading a word. */
.duel{ display:flex; flex-direction:column; align-items:center; margin:10px 0 4px; }
.duel-banner{ display:block; width:96px; height:96px; }
.duel-banner svg{ width:100%; height:100%; filter:drop-shadow(0 9px 14px rgba(0,0,0,.5)); }
.duel.won .duel-banner{ animation:raise .7s var(--ease) both; }
.duel.lost .duel-banner{ animation:strike .8s var(--ease) both; }
.duel .banner-cloth{ transform-box:fill-box; transform-origin:0 50%; }
.duel.won .banner-cloth{ animation:fly 3.2s ease-in-out .7s infinite; }
.duel.won .banner-gust{ animation:gust 3.2s ease-in-out .7s infinite; }
@keyframes raise{ from{ opacity:0; transform:translateY(22px) rotate(-9deg); } to{ opacity:1; transform:none; } }
@keyframes strike{ 0%{ opacity:0; transform:translateY(-16px) rotate(9deg); } 60%{ opacity:1; transform:translateY(3px) rotate(-2deg); } 100%{ opacity:1; transform:none; } }
@keyframes fly{ 0%,100%{ transform:skewY(0) scaleX(1); } 50%{ transform:skewY(-2.2deg) scaleX(.97); } }
@keyframes gust{ 0%,100%{ opacity:.15; transform:translateX(0); } 50%{ opacity:.5; transform:translateX(4px); } }

.duel-cry{ margin:12px 0 0; font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--parchment-dim); }
.duel.won .duel-cry{ color:var(--gold); }
.duel.lost .duel-cry{ color:var(--rust); }
.duel-shout{
  margin:5px 0 0; max-width:19ch; font-family:var(--display); font-size:clamp(25px,4.6vw,34px);
  line-height:1.12; text-wrap:balance; text-shadow:0 2px 24px rgba(0,0,0,.5);
}
.duel.won .duel-shout{ color:var(--parchment); }
.duel.lost .duel-shout{ color:#e5a892; }

.duel-tally{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:14px;
  width:100%; max-width:340px; margin:20px 0 0; padding:14px 10px; border-radius:13px;
  border:1px solid rgba(239,227,200,.12); background:rgba(7,13,20,.42);
}
.duel-tally .side{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.duel-tally small{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--parchment-dim); overflow:hidden; text-overflow:ellipsis; }
.duel-tally b{ font-family:var(--display); font-size:38px; line-height:1; font-variant-numeric:tabular-nums; }
.duel-tally i{ color:var(--parchment-dim); font-size:19px; font-style:normal; }
/* The winning number is the loud one; the other stays legible but stands down. */
.duel.won .side:first-child b{ color:var(--gold); }
.duel.lost .side:last-child b{ color:var(--rust); }
.duel.won .side:last-child b,.duel.lost .side:first-child b{ color:var(--parchment-dim); }
.duel.draw .duel-tally b{ color:var(--green); }
.duel-after{ margin:14px 0 0; max-width:44ch; font-size:13px; line-height:1.55; color:var(--parchment-dim); }
@media (max-width:620px){ .duel-banner{ width:78px; height:78px; } .duel-tally b{ font-size:32px; } }

@media(max-width:620px){
  .arena-choices{ grid-template-columns:1fr; }
  .arena-choice{ min-height:142px; padding:14px; }
  .arena-figure{ width:88px; height:112px; }
  .arena-link-mark{ width:78px; height:78px; }
  .arena-copy b{ font-size:18px; }
  .scoreboard{ padding:15px; }.scoreboard-head{ align-items:start; flex-direction:column; gap:7px; }.scoreboard-summary{ grid-template-columns:1fr repeat(3,.72fr); }.record-hero{ grid-column:1 / -1; border-right:0; border-bottom:1px solid rgba(239,227,200,.12); }.record-total:first-of-type{ border-left:0; }.match{ grid-template-columns:34px 1fr auto; gap:8px; }.match em{ grid-column:2; grid-row:2; }.match-score{ grid-column:3; grid-row:1 / 3; }
}

/* ---------- Tinget: principles ---------- */
.note-box{
  width:100%; max-width:640px; margin:0 0 28px; padding:16px 20px; border-radius:11px;
  background:rgba(211,162,76,.07); border:1px solid rgba(211,162,76,.3);
}
.note-box p{ margin:0; font-size:14px; line-height:1.65; }
.note-box p + p{ margin-top:9px; }
.note-box b{ color:var(--gold); }

.principles{ width:100%; max-width:760px; display:flex; flex-direction:column; gap:11px; }
.principle{
  border-radius:12px; overflow:hidden;
  background:linear-gradient(180deg,rgba(34,52,72,.72),rgba(15,26,36,.72));
  border:1px solid rgba(239,227,200,.1);
  animation:rise .45s var(--ease) both; animation-delay:var(--d,0s);
}
.principle > button{
  display:block; width:100%; text-align:left; padding:16px 20px;
  background:none; border:none; color:inherit; font:inherit; cursor:pointer;
}
.principle > button:hover{ background:rgba(239,227,200,.03); }
.principle h4{
  font-family:var(--display);
  font-weight:600; font-size:17px; margin:0 0 5px; display:flex; align-items:baseline; gap:9px;
}
.principle h4 .n{ font-size:12px; color:var(--gold); letter-spacing:.1em; }
.principle h4 .count{ margin-left:auto; font-size:11px; color:var(--parchment-dim); letter-spacing:.06em; text-transform:uppercase; }
.principle h4 .chev{ display:inline-flex; color:var(--parchment-dim); transition:transform .25s var(--ease), color .25s ease; }
.principle h4 .chev svg{ width:16px; height:16px; }
.principle.open h4 .chev{ transform:rotate(180deg); color:var(--gold); }
.principle .rule{ font-size:14px; line-height:1.6; color:var(--parchment); margin:0; }
.principle .more{ padding:0 20px 18px; border-top:1px solid rgba(239,227,200,.1); }
.principle .more p{ font-size:14px; line-height:1.7; color:var(--parchment-dim); margin:14px 0 0; }
.principle .more .btn{ margin-top:14px; padding:10px 22px; }
.principle.open h4 .count{ color:var(--gold); }

/* ---------- quiz ---------- */
.quiz{ max-width:660px; margin:0 auto; }
/* ---------- the crossing ----------
   You rowed ashore to get here, and the paper is the rest of that crossing.
   Three stacked bands: the boat sits on the water, the answered questions are
   ticks beneath it, and the far shore waits at the end. */
.row{
  position:relative; width:100%; max-width:600px; height:52px; margin:0 auto 20px;
  --p:0;
}
.row::after{                          /* the water */
  content:''; position:absolute; left:0; right:0; top:32px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,
    rgba(239,227,200,.04) 0%, rgba(239,227,200,.24) 10%,
    rgba(239,227,200,.24) 90%, rgba(239,227,200,.04) 100%);
}
.row-boat{
  position:absolute; top:0; width:46px; height:36px; color:var(--parchment);
  left:var(--p);
  transition:left .6s var(--ease);
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.45));
}
.row-boat svg{ width:100%; height:100%; display:block; }
.row-boat .hull{ transform-box:fill-box; transform-origin:50% 100%; animation:bob 3.4s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0) rotate(-1.4deg) } 50%{ transform:translateY(-2px) rotate(1.4deg) } }
.row-boat .oars{ transform-box:fill-box; transform-origin:50% 45%; }
.row.stroke .row-boat .oars{ animation:pull .6s var(--ease); }
@keyframes pull{ 0%{ transform:rotate(-18deg) } 45%{ transform:rotate(15deg) } 100%{ transform:rotate(0) } }
.row.stumble .row-boat{ animation:stumble .45s ease; }
@keyframes stumble{ 0%,100%{ transform:none } 35%{ transform:translateX(-5px) rotate(-5deg) } }
.row.sinking::before{
  content:''; position:absolute; left:var(--p); top:29px; width:54px; height:18px;
  border-radius:50%; opacity:0;
  background:radial-gradient(ellipse at 50% 50%, rgba(239,227,200,.38) 0 8%, transparent 10% 24%, rgba(239,227,200,.2) 27% 31%, transparent 33%);
  animation:wake 1.1s ease-out forwards;
}
.row.sinking .row-boat{
  animation:sinkboat 1.12s cubic-bezier(.2,.7,.3,1) forwards;
  transform-origin:50% 100%;
}
.row.sinking .row-boat .hull,
.row.sinking .row-boat .oars{ animation:none; }
@keyframes sinkboat{
  0%{ transform:translateY(0) rotate(0); opacity:1; }
  20%{ transform:translateY(-3px) rotate(-8deg); opacity:1; }
  100%{ transform:translateY(31px) rotate(23deg); opacity:.08; }
}
@keyframes wake{
  0%{ transform:scale(.25); opacity:0; }
  18%{ opacity:.85; }
  100%{ transform:scale(1.45); opacity:0; }
}

/* The challenger's boat, sailing the same water a little behind or ahead. */
.row-ghost{
  position:absolute; top:4px; width:38px; height:30px;
  left:var(--g, 4%);
  transition:left .6s var(--ease);
  color:var(--parchment-dim); opacity:.42;
}
.row-ghost[hidden]{ display:none !important; }
.row-ghost svg{ width:100%; height:100%; display:block; }
.row-ghost .oars{ display:none; }
.row.behind .row-boat{ color:var(--gold); }

.row-track{                            /* one tick per question, under the water */
  position:absolute; left:0; right:0; top:42px; height:6px;
  display:flex; align-items:center; gap:3px;
}
.row-track i{
  flex:1 1 0; height:3px; border-radius:2px;
  background:rgba(239,227,200,.14); transition:background .35s ease, height .3s var(--ease);
}
.row-track i.hit{ background:var(--green); height:6px; }
.row-track i.miss{ background:var(--dannebrog); height:6px; opacity:.75; }

.row-shore{                            /* the far shore you are pulling towards */
  position:absolute; right:0; top:22px; width:30px; height:12px; opacity:.4;
  background:
    radial-gradient(ellipse at 30% 100%, var(--parchment-dim) 0 55%, transparent 56%),
    radial-gradient(ellipse at 75% 100%, var(--parchment-dim) 0 45%, transparent 46%);
}

.card{
  width:100%; padding:26px 24px; border-radius:14px;
  background:linear-gradient(180deg,rgba(34,52,72,.8),rgba(15,26,36,.86));
  border:1px solid rgba(239,227,200,.11);
}
/* Deliberately not the display face. A carved d reads as ð and a carved u as v,
   and the person answering is reading Danish as a second language against a
   clock. The costume stops at the headings. */
.q{ font-weight:700; font-size:19px; line-height:1.42; margin:0 0 18px; }
.q-topic{
  display:inline-flex; align-items:center; gap:8px; margin:0 0 11px;
  color:var(--gold); font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
}
.q-topic .topic-icon{ width:22px; height:22px; }

.opt{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  background:rgba(239,227,200,.04); border:1px solid rgba(239,227,200,.14);
  border-radius:10px; padding:13px 15px; margin-bottom:9px;
  font:inherit; font-size:15px; color:var(--parchment); cursor:pointer;
  transition:border-color .2s ease, background .2s ease, transform .2s var(--ease);
  animation:rise .35s var(--ease) both; animation-delay:var(--d,0s);
}
.opt:hover:not(:disabled){ border-color:var(--parchment-dim); transform:translateX(2px); }
.opt:disabled{ cursor:default; }
.opt em{ flex:0 0 auto; width:24px; height:24px; border-radius:50%; border:1px solid var(--parchment-dim); display:grid; place-items:center; font-size:12px; font-weight:600; font-style:normal; }
.opt.hit{ border-color:var(--green); background:rgba(143,174,140,.15); }
.opt.hit em{ border-color:var(--green); background:var(--green); color:#0f1a24; }
.opt.miss{ border-color:var(--dannebrog); background:rgba(200,16,46,.1); animation:shake .32s ease; }
.opt.miss em{ border-color:var(--dannebrog); background:var(--dannebrog); color:#fff; }
@keyframes shake{ 0%,100%{transform:none} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }

/* ---------- the panel that opens once you have answered ----------
   The reward for answering is not a tick, it is a thing worth knowing.
   A relic marks it, the passage explains it, and the provenance line
   says when SIRI actually asked it. */
.why{ margin-top:18px; padding-top:18px; border-top:1px solid rgba(239,227,200,.12); animation:rise .4s var(--ease) both; }
.why .lbl{
  display:flex; align-items:center; gap:9px; margin:0 0 10px;
  font-family:var(--display);
  font-style:italic; font-weight:600; font-size:14px; letter-spacing:.03em; color:var(--gold);
}
.why .lbl svg{ width:19px; height:19px; flex:0 0 auto; color:var(--gold); }
.why .lbl svg{ animation:relic .5s var(--ease) both; }
@keyframes relic{ from{ opacity:0; transform:translateY(4px) rotate(-8deg); } to{ opacity:1; transform:none; } }
.why p{ font-size:14.5px; line-height:1.68; margin:0; }
.why p + p{ margin-top:9px; }

/* A quotation from the material, marked as borrowed rather than written here. */
.why blockquote{
  margin:0; padding:2px 0 2px 15px;
  border-left:2px solid rgba(211,162,76,.5);
  font-style:italic; font-size:15px; line-height:1.6;
}
.why .cite{ margin-top:8px; font-size:12px; color:var(--parchment-dim); }
.why .cite b{ color:var(--parchment); font-weight:700; }
.why .thin{ color:var(--parchment-dim); font-style:italic; }

.why .src{
  display:block; margin-top:12px; padding-top:10px;
  border-top:1px dashed rgba(239,227,200,.14);
  font-size:11.5px; line-height:1.6; color:var(--parchment-dim); font-style:italic;
}
.why .src b{ color:var(--parchment); font-weight:700; font-style:normal; }
.why .src a{ color:var(--parchment-dim); }

/* Shown when the world has moved since the question was set. */
.why .caution{
  display:flex; gap:9px; margin-top:12px; padding:11px 13px; border-radius:9px;
  background:rgba(211,162,76,.08); border:1px solid rgba(211,162,76,.32);
  font-size:12.5px; line-height:1.55; font-style:normal; color:var(--parchment);
}
.why .caution svg{ width:15px; height:15px; flex:0 0 auto; margin-top:2px; color:var(--gold); }

.quiz-nav{ display:flex; justify-content:space-between; align-items:center; width:100%; margin-top:20px; }
.quiz-nav-icon{
  display:grid; place-items:center; width:54px; height:54px; padding:0; border-radius:50%; cursor:pointer;
  color:var(--parchment-dim); background:rgba(239,227,200,.045); border:1px solid rgba(239,227,200,.16);
  box-shadow:inset 0 1px rgba(255,255,255,.06),0 8px 17px -13px #000; transition:transform .2s var(--ease),color .2s ease,border-color .2s ease,background .2s ease;
}
.quiz-nav-icon svg{ width:25px; height:25px; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.quiz-nav-icon.exit:hover{ color:var(--parchment); border-color:var(--parchment-dim); transform:translateX(-3px); }.quiz-nav-icon.next{ color:var(--gold); border-color:rgba(211,162,76,.5); background:radial-gradient(circle at 35% 30%,rgba(211,162,76,.2),rgba(211,162,76,.04)); }.quiz-nav-icon.next:hover:not(:disabled){ color:var(--parchment); border-color:var(--gold); transform:translateX(3px); }.quiz-nav-icon:active:not(:disabled){ transform:scale(.93); }.quiz-nav-icon:disabled{ cursor:default; opacity:.35; }

/* ---------- result ---------- */
.result{ text-align:center; max-width:560px; }
.result .lead{ text-transform:uppercase; letter-spacing:.16em; font-size:12px; color:var(--parchment-dim); margin:0; }
.result .score{ font-family:var(--display); font-weight:700; font-size:52px; margin:8px 0 2px; font-variant-numeric:tabular-nums; }
.result .score.pass{ color:var(--green); }
.result .score.fail{ color:var(--rust); }
.result .verdict{ font-family:var(--display); font-style:italic; font-size:18px; margin:6px 0 0; }
.result p.note{ font-size:14px; line-height:1.6; color:var(--parchment-dim); margin:14px 0 0; }
.result .gate{ margin-top:18px; padding:12px 14px; border-radius:9px; font-size:13px; line-height:1.5; border:1px solid rgba(239,227,200,.14); background:rgba(239,227,200,.04); }
.result .gate.ok{ border-color:rgba(143,174,140,.5); }
.result .gate.no{ border-color:rgba(200,16,46,.5); }
.result .actions{ display:grid; grid-template-columns:auto minmax(250px,1fr); gap:10px; align-items:center; width:100%; margin-top:24px; }
.result .actions .btn.primary{ margin:0; padding:14px 25px; white-space:nowrap; }
.challenge-btn{ display:flex; align-items:center; gap:10px; min-height:61px; padding:9px 13px; color:var(--parchment); text-align:left; cursor:pointer; border:1px solid rgba(211,162,76,.55); border-radius:12px; background:radial-gradient(circle at 20% 25%,rgba(211,162,76,.2),transparent 32%),linear-gradient(135deg,rgba(105,55,32,.85),rgba(20,32,44,.95)); box-shadow:inset 0 1px rgba(255,255,255,.08),0 13px 26px -18px rgba(0,0,0,.9); transition:transform .2s var(--ease),border-color .2s ease,box-shadow .2s ease; }
.challenge-btn:hover,.challenge-btn:focus-visible{ border-color:var(--gold); box-shadow:0 15px 29px -17px rgba(211,162,76,.75); outline:none; transform:translateY(-2px); }.challenge-btn:active{ transform:translateY(1px); }
.challenge-sigil{ display:grid; place-items:center; width:39px; height:39px; flex:0 0 auto; color:#eccb8a; border:1px solid rgba(236,203,138,.45); border-radius:50%; background:rgba(34,21,14,.48); }.challenge-sigil svg{ width:28px; height:28px; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }.challenge-btn b{ display:block; font-family:var(--display); font-size:16px; font-weight:600; }.challenge-btn small{ display:block; margin-top:2px; color:var(--parchment-dim); font-size:11px; }.challenge-arrow{ width:20px; height:20px; margin-left:auto; stroke:var(--gold); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.share-note{
  display:flex; align-items:center; justify-content:center; gap:8px; max-width:330px;
  margin:14px auto 0; padding:10px 13px; border:1px solid rgba(143,174,140,.48);
  border-radius:9px; background:rgba(143,174,140,.1); color:var(--parchment); font-size:13px;
}
.share-note svg{ width:18px; height:18px; flex:0 0 auto; stroke:var(--green); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }

/* ---------- footer / boot ---------- */
.foot{
  position:relative; z-index:1; padding:0 18px max(20px,env(safe-area-inset-bottom)); color:var(--parchment-dim);
  background:linear-gradient(180deg,transparent,rgba(6,12,19,.28)); border-top:1px solid rgba(239,227,200,.1);
}
.foot::before{ content:''; position:absolute; top:-1px; left:50%; width:min(360px,58vw); height:1px; transform:translateX(-50%); background:linear-gradient(90deg,transparent,var(--gold),transparent); }
.foot-inner{ display:grid; grid-template-columns:1fr auto 1fr; gap:18px; align-items:center; width:min(1120px,100%); margin:auto; padding-top:18px; font-size:12px; }
.foot-promise{ display:flex; align-items:center; gap:10px; line-height:1.35; }
.foot-promise b{ display:block; color:var(--parchment); font-family:var(--display); font-size:14px; font-weight:600; }
.foot-knot{ display:grid; place-items:center; width:31px; height:31px; flex:0 0 auto; color:var(--gold); border:1px solid rgba(211,162,76,.38); border-radius:50%; background:rgba(211,162,76,.06); }
.foot-knot svg{ width:20px; height:20px; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; }
.foot .who{ display:flex; align-items:baseline; justify-content:center; gap:5px; white-space:nowrap; font-size:11px; }
.foot .who > span{ color:var(--gold); font-family:var(--display); font-size:12px; font-style:italic; }
.foot .who b{ color:var(--parchment); font-weight:600; }
.foot-actions{ display:flex; justify-content:flex-end; gap:0; }
.foot-control{ display:flex; align-items:center; gap:5px; padding:2px 10px; border-left:1px solid rgba(239,227,200,.13); }
.foot-control:first-child{ border-left:0; }
.foot-control svg{ width:14px; height:14px; stroke:var(--parchment-dim); stroke-width:1.55; stroke-linecap:round; stroke-linejoin:round; }
.foot .linklike{ color:var(--parchment-dim); text-decoration:none; transition:color .2s ease; }
.foot-control:hover .linklike, .foot-control:hover svg, .foot .linklike:focus-visible{ color:var(--parchment); stroke:var(--parchment); }
.foot-control.reset:hover .linklike, .foot-control.reset:hover svg{ color:#df7783; stroke:#df7783; }

.boot{ position:fixed; inset:0; z-index:50; display:grid; place-content:center; justify-items:center; gap:14px; background:var(--bg); color:var(--parchment-dim); font-family:var(--display); font-size:14px; letter-spacing:.04em; }
.boot[hidden]{ display:none !important; }
.boot-spin{ width:26px; height:26px; border:2px solid rgba(239,227,200,.2); border-top-color:var(--gold); border-radius:50%; animation:spin .9s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg) } }

/* ---------- phones ----------
   Six full-height guide cards filled the whole screen and pushed the start
   button 1275px down, so nobody saw it. Shorter cards, and once a guide is
   chosen the action follows you down the page. */
@media (max-width:620px){
  .stage{ padding:28px 16px 24px; }
  .subtitle{ margin-bottom:26px; }
  .char{ padding:10px 6px 12px; border-radius:12px; }
  .char figure{ aspect-ratio:1/0.78; }
  .char b{ font-size:15px; margin-top:4px; }
  .char span{ font-size:10px; letter-spacing:.1em; }
  .roster{ gap:10px; }

  .banner{ margin-top:22px; padding:16px 18px; }
  .banner-line{ font-size:17px; }

  /* The action must be reachable the moment a guide is picked. Sticky cannot
     do it: the button starts below the fold, and sticky only pins something
     already on screen. Fixed, and only once it is actually usable. */
  #beginBtn{ width:100%; justify-content:center; margin-top:20px; }
  #beginBtn:not(:disabled){
    position:fixed; left:16px; right:16px; width:auto; z-index:20;
    /* clear of the home indicator, where iOS eats the first tap */
    bottom:calc(14px + env(safe-area-inset-bottom));
    margin:0; border-color:var(--gold);
    background:var(--bg);
    backdrop-filter:blur(10px);
    box-shadow:0 8px 26px -10px rgba(0,0,0,.8);
    animation:fade .35s var(--ease) both;
  }
  /* room for it, so it covers neither the last card nor the footer */
  body:has(#beginBtn:not(:disabled)) .foot{ padding-bottom:86px; }

  .card{ padding:20px 16px; }
  .q{ font-size:17px; }
  .opt{ font-size:14.5px; padding:12px 13px; }
  .quiz-nav .btn{ padding:12px 18px; }
  .principle > button{ padding:14px 16px; }
  .principle .more{ padding:0 16px 16px; }
  .hall{ gap:12px; }
  .hall .node{ width:42px; height:42px; font-size:15px; }
  .hall .thread{ left:20px; top:46px; }
  .hall .body{ padding:12px 14px; }
  .hall .en{ display:none; }
  .place{ gap:12px; }
  .place .node{ width:42px; height:42px; }
  .place.by .node{ width:46px; height:46px; }
  .place .node svg{ width:23px; height:23px; }
  .place .thread{ left:20px; top:46px; }
  .place .body{ padding:12px 14px; }
  .learning-path{ grid-template-columns:58px 1fr; gap:12px; padding:15px; }
  .learning-path .learning-sigil{ width:54px; height:54px; }
  .learning-path .learning-sigil svg{ width:42px; height:38px; }
  .learning-copy > b{ font-size:20px; }
  .learning-meter i{ width:15px; }
  .learning-open{ grid-column:2; justify-self:start; margin-top:-3px; }
  .training-sigil{ width:52px; height:52px; }

  .result .actions{ grid-template-columns:1fr; }
  .result .actions .btn.primary,.challenge-btn{ width:100%; justify-content:center; }
  .challenge-btn{ text-align:left; }

  .foot-inner{ grid-template-columns:1fr; gap:12px; justify-items:center; padding-top:18px; text-align:center; }
  .foot-promise{ text-align:left; }
  .foot-actions{ flex-wrap:wrap; justify-content:center; }
  .foot-control{ padding:2px 8px; }
}

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