/* ======================================================================
   Viking Rise — tanned-hide surround, parchment centre.

   Deliberately shares nothing with assets/css/style.css. That sheet is the
   site's navy / forest-green chrome; this section is meant to read as a
   different place entirely, so it brings its own reset, its own type and
   its own colour family rather than overriding the other one.

   No image files anywhere in here. The hide and the parchment are layered
   CSS gradients plus one small SVG noise data-URI, and every piece of Norse
   imagery is stroked inline SVG (see vr_svg_defs() in app/viking_chrome.php)
   so it reads as drawn rather than photographed.
   ====================================================================== */

:root {
  /* One warm family throughout: dark surround, light centre. The central
     container is --vr-parch-200 against a --vr-hide-700 page, which is the
     "lighter colour, same family" the section is built around. */
  --vr-hide-900: #231708;
  --vr-hide-800: #35240f;
  --vr-hide-700: #4d3718;
  --vr-parch-400: #b5976a;
  --vr-parch-300: #d6c198;
  --vr-parch-200: #e8dabb;
  --vr-parch-100: #f4ebd6;
  --vr-ink: #2b1d10;
  --vr-ink-soft: #5c452c;
  --vr-blood: #8c2f20;
  --vr-gold: #a8801f;

  /* Uncial Antiqua covers Latin only. Every other script falls through to
     the serif stack on purpose — that is correct rendering, not a defect.
     Georgia carries Cyrillic; Japanese, Chinese, Korean, Thai and Arabic
     land on the system face for their script. */
  --vr-display: "Uncial Antiqua", "Palatino Linotype", Palatino, Georgia, serif;
  --vr-body: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
}

/* Georgia has no precomposed Vietnamese letters (ắ, ầ, ế …), so the browser
   builds them from a base letter and a loose accent, and they render broken.
   Palatino Linotype and Times New Roman carry the full set; Noto Serif is
   the Android face. The heading face renders Vietnamese correctly as is. */
[lang="vi"] {
  --vr-body: "Palatino Linotype", "Times New Roman", "Noto Serif", serif;
  font-family: var(--vr-body);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--vr-body);
  color: var(--vr-parch-200);
  min-height: 100vh;
  background-color: var(--vr-hide-700);
  background-image:
    /* light pooling across a stretched hide */
    radial-gradient(1100px 760px at 16% -14%, rgba(222,194,146,.22), transparent 62%),
    radial-gradient(960px 680px at 88% 112%, rgba(20,12,4,.55), transparent 62%),
    /* leather mottling */
    radial-gradient(460px 320px at 28% 38%, rgba(124,92,48,.34), transparent 72%),
    radial-gradient(400px 280px at 74% 64%, rgba(44,28,12,.40), transparent 72%),
    radial-gradient(300px 220px at 54% 14%, rgba(132,100,56,.22), transparent 74%),
    /* fine fibre grain, two directions */
    repeating-linear-gradient(94deg, rgba(0,0,0,.05) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(7deg, rgba(255,240,210,.035) 0 1px, transparent 1px 5px);
  background-attachment: fixed;
}

/* Paper grain: a small tiled fractal-noise SVG, multiplied over the hide. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .40;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

/* Darkened edges, like a hide curling away from the light. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(130% 100% at 50% 45%, transparent 48%, rgba(20,12,4,.55) 100%);
}

/* --- Scattered Norse marks ---------------------------------------------
   A fixed layer of stroked pictographs behind everything, faint enough to
   read as tooling in the leather rather than as illustration. Placement is
   fixed per page rather than re-randomised on each load: a layout that
   jumps on refresh reads as a bug, and fixed markup stays cacheable.
   vr_marks() varies which motif lands in which spot from page to page. */

.vr-marks {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.vr-marks svg {
  position: absolute;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Two tones: chalked-on light marks, and a few burned-in dark ones. */
.vr-marks .m-light { stroke: #e4cfa6; opacity: .085; stroke-width: 2.1; }
.vr-marks .m-dark  { stroke: #150c03; opacity: .115; stroke-width: 2.4; }

/* --- Chrome ------------------------------------------------------------ */

.vr-shell {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.vr-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem 1.5rem;
  background: linear-gradient(180deg, rgba(90,66,32,.92), rgba(48,33,14,.95));
  border-bottom: 1px solid rgba(181,151,106,.45);
  box-shadow: 0 2px 14px rgba(12,7,2,.45);
}
.vr-brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: var(--vr-parch-200);
  text-decoration: none;
  font-family: var(--vr-display);
  font-size: 1.05rem;
  letter-spacing: .07em;
}
.vr-brand:hover { color: var(--vr-parch-100); }
.vr-brand svg {
  width: 26px; height: 26px;
  fill: none; stroke: var(--vr-parch-300); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.vr-crumbs {
  display: flex;
  align-items: center;
  gap: .7rem;
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: rgba(232,218,187,.62);
}
.vr-crumbs a {
  color: rgba(232,218,187,.82);
  text-decoration: none;
  border-bottom: 1px solid rgba(181,151,106,.4);
}
.vr-crumbs a:hover { color: var(--vr-parch-100); border-bottom-color: var(--vr-parch-300); }

.vr-main {
  flex: 1;
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding: 3.2rem 1.5rem 4rem;
}

.vr-footer {
  padding: 1.3rem 1.5rem 1.8rem;
  text-align: center;
  font-size: .76rem;
  letter-spacing: .06em;
  color: rgba(232,218,187,.45);
  border-top: 1px solid rgba(181,151,106,.22);
}

/* --- Headings straight on the hide (pages with no container) ------------ */

.vr-hero { text-align: center; margin-bottom: 3rem; }
.vr-hero h1 {
  font-family: var(--vr-display);
  font-size: clamp(2.1rem, 5.6vw, 3.4rem);
  font-weight: 400;
  letter-spacing: .05em;
  line-height: 1.1;
  color: var(--vr-parch-100);
  text-shadow: 0 2px 0 rgba(20,12,4,.55), 0 0 26px rgba(214,193,152,.16);
}
.vr-hero p {
  margin-top: .9rem;
  font-size: 1.02rem;
  line-height: 1.6;
  color: rgba(232,218,187,.72);
}
.vr-hero .vr-prompt { margin-top: 1.6rem; }

/* Carved rule: a hairline opening around a small diamond. */
.vr-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  margin: 1.4rem auto 0;
  max-width: 24rem;
  color: rgba(181,151,106,.75);
}
.vr-rule::before,
.vr-rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, currentColor, transparent);
}
.vr-rule svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* --- Gate buttons (the main page) --------------------------------------
   Sized to sit alongside the navy site's .game-tile, which is a ~230px
   column with a tall icon block. These carry three lines instead. */

.vr-gates {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.6rem;
}

.vr-gate {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: min(20rem, 100%);
  min-height: 14.5rem;
  padding: 2rem 1.6rem;
  /* align-items centres the boxes; this centres the text inside them. Without
     it a season name long enough to wrap ("Expedition to England") left-aligns
     its second line. */
  text-align: center;
  text-decoration: none;
  color: var(--vr-ink);
  border: 1px solid var(--vr-parch-400);
  border-radius: 3px;
  background-color: var(--vr-parch-300);
  background-image:
    radial-gradient(70% 50% at 50% 0%, rgba(255,250,235,.6), transparent 72%),
    radial-gradient(180px 130px at 12% 86%, rgba(150,118,70,.26), transparent 74%),
    radial-gradient(160px 120px at 90% 22%, rgba(150,118,70,.22), transparent 74%);
  box-shadow:
    0 1px 0 rgba(255,250,235,.55) inset,
    0 0 40px rgba(86,60,30,.18) inset,
    0 14px 30px rgba(14,8,2,.45);
  transition: transform .16s, box-shadow .16s, border-color .16s;
}
.vr-gate:hover {
  transform: translateY(-3px);
  border-color: var(--vr-gold);
  box-shadow:
    0 1px 0 rgba(255,250,235,.6) inset,
    0 0 40px rgba(86,60,30,.14) inset,
    0 20px 40px rgba(14,8,2,.5),
    0 0 0 1px rgba(168,128,31,.6);
}
/* Scribed border, like a ruled edge on a cut of vellum. */
.vr-gate::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(123,96,56,.34);
  border-radius: 2px;
  pointer-events: none;
}
.vr-gate-mark {
  width: 54px;
  height: 54px;
  margin-bottom: .2rem;
  fill: none;
  stroke: var(--vr-ink-soft);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .78;
}
.vr-gate-season {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--vr-blood);
}
.vr-gate-name {
  font-family: var(--vr-display);
  font-size: 1.62rem;
  line-height: 1.15;
  letter-spacing: .02em;
  color: var(--vr-ink);
  /* Split a wrapping name into even lines rather than a long line and an
     orphan. Ignored by browsers that do not support it, which is harmless. */
  text-wrap: balance;
}
.vr-gate-sub {
  font-size: .92rem;
  font-style: italic;
  color: var(--vr-ink-soft);
}

/* --- Season container boxes --------------------------------------------- *

   The game does not number its named scenarios; it files them under two
   containers, "Conquest Season" and "Cycle Season" (Curtis's Kingdom
   Overview capture, 2026-11-01). The picker draws one box per container with
   its name set into the top edge.

   ⛔ fieldset/legend, not a div with an absolutely positioned heading. The
   browser opens the gap in the border for a legend itself. An overlaid label
   would need its own background to hide the border behind it, and a flat
   patch shows a seam against the body's radial gradients. */

.vr-group {
  width: min(46rem, 100%);
  margin: 2.8rem auto 0;
  /* The top padding is small because the legend already holds the edge open. */
  padding: .6rem 1.5rem 1.8rem;
  border: 1px solid rgba(181,151,106,.45);
  border-radius: 3px;
}
.vr-group-label {
  /* Centres the legend in the border; the global reset zeroes its margins. */
  margin-inline: auto;
  padding: 0 .85rem;
  font-family: var(--vr-display);
  font-size: 1rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--vr-parch-400);
}

/* A season the game groups here but whose guide is not written. The tile is
   drawn so the box shows the pair the game shows, and seasons.php renders it
   as an <a> with no href, so it is neither a link nor focusable. */
.vr-gate-empty {
  cursor: default;
  opacity: .58;
  box-shadow:
    0 1px 0 rgba(255,250,235,.4) inset,
    0 0 40px rgba(86,60,30,.14) inset,
    0 6px 16px rgba(14,8,2,.3);
}
.vr-gate-empty:hover {
  /* Overrides .vr-gate:hover — nothing here responds to a pointer. */
  transform: none;
  border-color: var(--vr-parch-400);
  box-shadow:
    0 1px 0 rgba(255,250,235,.4) inset,
    0 0 40px rgba(86,60,30,.14) inset,
    0 6px 16px rgba(14,8,2,.3);
}
.vr-gate-empty .vr-gate-sub {
  font-style: normal;
  text-transform: uppercase;
  font-size: .74rem;
  letter-spacing: .14em;
}

/* --- Language picker ---------------------------------------------------- */

.vr-langs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.75rem, 10rem));
  justify-content: center;
  align-items: stretch;
  gap: 1.1rem;
  max-width: 58rem;
  margin: 0 auto;
}
/* On a phone the column rule above leaves one tile per row, which is
   eighteen tiles of scrolling; two narrower columns halve it. */
@media (max-width: 420px) {
  .vr-langs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
}

.vr-lang {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .7rem;
  padding: 1.1rem .8rem 1rem;
  text-decoration: none;
  color: var(--vr-ink);
  border: 1px solid var(--vr-parch-400);
  border-radius: 3px;
  background-color: var(--vr-parch-200);
  background-image:
    radial-gradient(80% 55% at 50% 0%, rgba(255,251,240,.62), transparent 74%),
    radial-gradient(120px 90px at 88% 90%, rgba(150,118,70,.2), transparent 74%);
  box-shadow:
    0 1px 0 rgba(255,250,235,.55) inset,
    0 9px 20px rgba(14,8,2,.38);
  transition: transform .16s, box-shadow .16s, border-color .16s;
}
.vr-lang:hover {
  transform: translateY(-3px);
  border-color: var(--vr-gold);
  box-shadow:
    0 1px 0 rgba(255,250,235,.6) inset,
    0 14px 26px rgba(14,8,2,.46),
    0 0 0 1px rgba(168,128,31,.55);
}

/* One flag, or a pair side by side (English: UK + US, Spanish: Spain + Mexico). */
.vr-flags {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
}
.vr-flag {
  display: block;
  width: 46px;
  height: 31px;
  border: 1px solid rgba(70,50,24,.5);
  box-shadow: 0 2px 5px rgba(14,8,2,.35);
}
.vr-flags.pair .vr-flag { width: 38px; height: 26px; }

/* Fixed height so a name that wraps to two lines ("Bahasa Indonesia")
   doesn't push its tile out of line with the rest of the row. */
.vr-lang-name {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.6rem;
  font-size: .98rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  color: var(--vr-ink);
}

/* --- Detail pages: the central container -------------------------------- */

.vr-scroll {
  position: relative;
  max-width: 54rem;
  margin: 0 auto;
  padding: 3.2rem clamp(1.4rem, 5vw, 3.6rem) 3.6rem;
  color: var(--vr-ink);
  background-color: var(--vr-parch-200);
  background-image:
    radial-gradient(62% 44% at 50% 0%, rgba(255,251,240,.68), transparent 72%),
    radial-gradient(70% 50% at 50% 100%, rgba(150,118,70,.18), transparent 72%),
    radial-gradient(250px 180px at 5% 17%, rgba(158,124,76,.2), transparent 74%),
    radial-gradient(210px 160px at 97% 33%, rgba(158,124,76,.17), transparent 74%),
    radial-gradient(260px 190px at 48% 104%, rgba(146,112,66,.16), transparent 72%);
  border: 1px solid var(--vr-parch-400);
  border-radius: 3px;
  box-shadow:
    0 1px 0 rgba(255,251,240,.6) inset,
    0 0 80px rgba(86,60,30,.2) inset,
    0 22px 50px rgba(14,8,2,.45),
    0 2px 8px rgba(14,8,2,.3);
}
.vr-scroll::before {
  content: "";
  position: absolute;
  inset: 11px;
  border: 1px solid rgba(123,96,56,.26);
  border-radius: 2px;
  pointer-events: none;
}
.vr-scroll h1 {
  font-family: var(--vr-display);
  font-size: clamp(1.8rem, 4.4vw, 2.5rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: .02em;
  color: var(--vr-ink);
}
.vr-kicker {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--vr-blood);
  margin-bottom: .55rem;
}
.vr-scroll h2 {
  font-family: var(--vr-display);
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: .02em;
  margin: 2.2rem 0 .7rem;
  color: var(--vr-ink);
}
.vr-scroll p {
  font-size: 1.02rem;
  line-height: 1.72;
  color: var(--vr-ink);
  margin-bottom: 1rem;
}
.vr-scroll p.lede {
  font-size: 1.12rem;
  font-style: italic;
  color: var(--vr-ink-soft);
  margin: 1rem 0 1.6rem;
}
.vr-scroll ul { margin: 0 0 1.2rem; margin-inline-start: 1.3rem; }
.vr-scroll li { font-size: 1.01rem; line-height: 1.7; margin-bottom: .4rem; }
.vr-scroll hr {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(123,96,56,.45), transparent);
  margin: 2.2rem 0;
}
.vr-scroll a {
  color: #7a3a16;
  text-decoration: underline;
  text-decoration-color: rgba(122,58,22,.4);
}
.vr-scroll a:hover { color: var(--vr-blood); }

.vr-scroll h3 {
  font-size: 1.06rem;
  font-weight: 700;
  margin: 1.6rem 0 .5rem;
  color: var(--vr-ink);
}
.vr-scroll ol { margin: 0 0 1.2rem; margin-inline-start: 1.5rem; }
.vr-scroll code {
  font-size: .9em;
  padding: .05rem .3rem;
  background: rgba(123,96,56,.12);
  border-radius: 2px;
}

/* Schedules and comparisons. Wide tables scroll inside their own box on a
   phone rather than pushing the whole parchment sideways. */
.vr-scroll table {
  display: block;
  overflow-x: auto;
  width: 100%;
  margin: 0 0 1.4rem;
  border-collapse: collapse;
  font-size: .95rem;
  line-height: 1.5;
}
.vr-scroll th,
.vr-scroll td {
  padding: .5rem .7rem;
  text-align: start;
  vertical-align: top;
  border-bottom: 1px solid rgba(123,96,56,.3);
}
.vr-scroll th {
  font-weight: 700;
  white-space: nowrap;
  color: var(--vr-ink);
  background: rgba(123,96,56,.12);
  border-bottom: 1px solid rgba(123,96,56,.55);
}
.vr-scroll tbody tr:nth-child(even) td { background: rgba(255,251,240,.35); }

/* --- Guide navigation (hub.php) ------------------------------------------
   One button per page, grouped under the hub's section headings. Same
   vellum card as the language picker, wider so a label and a one-line
   description fit. */

.vr-nav {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: .9rem;
  margin: 0 0 1.6rem;
}
.vr-nav-btn {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: .9rem 1rem;
  text-decoration: none;
  color: var(--vr-ink);
  border: 1px solid var(--vr-parch-400);
  border-radius: 3px;
  background-color: var(--vr-parch-100);
  background-image: radial-gradient(80% 60% at 50% 0%, rgba(255,251,240,.7), transparent 74%);
  box-shadow:
    0 1px 0 rgba(255,250,235,.55) inset,
    0 6px 14px rgba(14,8,2,.22);
  transition: transform .16s, box-shadow .16s, border-color .16s;
}
.vr-scroll a.vr-nav-btn { color: var(--vr-ink); text-decoration: none; }
.vr-nav-btn:hover {
  transform: translateY(-2px);
  border-color: var(--vr-gold);
  box-shadow:
    0 1px 0 rgba(255,250,235,.6) inset,
    0 10px 20px rgba(14,8,2,.3),
    0 0 0 1px rgba(168,128,31,.55);
}
.vr-nav-days {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--vr-blood);
}
.vr-nav-label {
  font-size: 1.04rem;
  font-weight: 700;
  line-height: 1.3;
}
.vr-nav-desc {
  font-size: .88rem;
  line-height: 1.45;
  color: var(--vr-ink-soft);
}

/* Language strip inside the container, for moving between translations
   without going back out to the picker. */
.vr-langstrip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem;
  margin-top: 2.6rem;
  padding-top: 1.3rem;
  border-top: 1px solid rgba(123,96,56,.3);
  font-size: .78rem;
}
.vr-langstrip > span {
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--vr-ink-soft);
  margin-inline-end: .3rem;
}
.vr-langstrip a {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .22rem .5rem;
  text-decoration: none;
  color: var(--vr-ink);
  border: 1px solid rgba(123,96,56,.35);
  border-radius: 2px;
  background: rgba(255,251,240,.4);
}
.vr-langstrip a:hover { border-color: var(--vr-gold); background: rgba(255,251,240,.75); }
.vr-langstrip a[aria-current="true"] {
  border-color: var(--vr-blood);
  color: var(--vr-blood);
  font-weight: 700;
}
/* A language this particular page has not been written in yet. Dimmed, not
   removed — the link still works and lands on the English text. */
.vr-langstrip a.untranslated { opacity: .45; }
.vr-langstrip a.untranslated:hover { opacity: 1; }

/* Notice shown when the reader's language has not reached this page yet:
   English body, notice in their own language.
   ⛔ `.vr-note` belongs to that notice ALONE and a content page must never
   use it: `bin/viking/mobile_sweep.js` detects the fallback notice by looking
   for `.vr-note`, so a page that borrows the class makes a working check
   report a fallback on every language forever. A page that needs the same
   look uses `.vr-caveat`, which shares this rule and nothing else.
   Added 2026-10-31, when the Conquest Season pages had taken `.vr-note` for
   their "this is not established" callouts. */
.vr-note,
.vr-caveat {
  margin: 0 0 1.8rem;
  padding: .75rem 1rem;
  font-size: .9rem;
  line-height: 1.55;
  color: var(--vr-ink-soft);
  background: rgba(140, 47, 32, .07);
  border-inline-start: 3px solid var(--vr-blood);
  border-radius: 2px;
}
.vr-langstrip .vr-flag { width: 20px; height: 14px; box-shadow: none; }

/* Build footnotes, at the foot of a page. A season's footage can span two
   game builds that disagree on a real number; the body states the current
   one and a footnote records what the earlier build did. A statement of
   fact, not a hedge — the page itself never equivocates. Block-direction
   border only, so right-to-left is unaffected. */
.vr-fn {
  margin: 2.2rem 0 0;
  padding-top: .9rem;
  border-top: 1px solid var(--vr-parch-400);
  font-size: .85rem;
  line-height: 1.55;
  color: var(--vr-ink-soft);
}
.vr-fn > * { margin: 0 0 .5rem; }
.vr-fn > :last-child { margin-bottom: 0; }

/* Guide callouts: the orders a page opens with (.do) and the mistakes it
   warns off (.dont). Same left-rule shape as .vr-note, stronger fill. */
.vr-box {
  margin: 0 0 1.6rem;
  padding: .9rem 1.1rem .3rem;
  border-inline-start: 4px solid var(--vr-gold);
  border-radius: 2px;
  background: rgba(168, 128, 31, .12);
}
.vr-box.dont {
  border-inline-start-color: var(--vr-blood);
  background: rgba(140, 47, 32, .09);
}
.vr-box-title {
  display: block;
  margin-bottom: .45rem;
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--vr-ink-soft);
}
.vr-box.dont .vr-box-title { color: var(--vr-blood); }

/* --- Breadcrumb trail and back button ---------------------------------------
   vr_trail() in app/viking_chrome.php. Inside the parchment by default; the
   .on-hide variant is for the pages that sit straight on the leather. */

.vr-trail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem .5rem;
  margin: 0 0 1.2rem;
  font-size: .82rem;
  line-height: 1.4;
  color: var(--vr-ink-soft);
}
.vr-scroll .vr-trail a,
.vr-trail a {
  color: #7a3a16;
  text-decoration: none;
  border-bottom: 1px solid rgba(122,58,22,.35);
}
.vr-scroll .vr-trail a:hover,
.vr-trail a:hover { color: var(--vr-blood); border-bottom-color: var(--vr-blood); }
.vr-trail [aria-current] { font-weight: 700; color: var(--vr-ink); }
.vr-trail-sep { color: var(--vr-parch-400); }

.vr-trail.on-hide {
  justify-content: center;
  max-width: 54rem;
  margin: 0 auto 1.2rem;
  color: var(--vr-parch-300);
}
.vr-trail.on-hide a { color: var(--vr-parch-100); border-bottom-color: rgba(244,235,214,.45); }
.vr-trail.on-hide a:hover { color: #fff; border-bottom-color: #fff; }
.vr-trail.on-hide [aria-current] { color: var(--vr-parch-100); }
.vr-trail.on-hide .vr-trail-sep { color: var(--vr-parch-400); }

.vr-back { margin: 2.2rem 0 0; }
.vr-scroll a.vr-back-btn {
  display: inline-block;
  padding: .65rem 1.1rem;
  font-weight: 700;
  color: var(--vr-ink);
  text-decoration: none;
  border: 1px solid var(--vr-parch-400);
  border-radius: 3px;
  background-color: var(--vr-parch-100);
  box-shadow: 0 1px 0 rgba(255,250,235,.55) inset, 0 4px 10px rgba(14,8,2,.18);
}
.vr-scroll a.vr-back-btn:hover { border-color: var(--vr-gold); color: var(--vr-blood); }

/* --- Guide figures ---------------------------------------------------------
   Screenshots, drawn diagrams and proportional bars. Bars and meters are
   plain HTML so their labels stay readable at phone width; numbered map
   markers point at a legend written as ordinary text. */

.vr-fig { margin: 0 0 1.8rem; }
.vr-fig img,
.vr-fig svg {
  display: block;
  width: 100%;
  height: auto;
}
.vr-fig.framed img,
.vr-fig.framed svg {
  border: 1px solid var(--vr-parch-400);
  border-radius: 3px;
  box-shadow: 0 6px 14px rgba(14,8,2,.2);
}
.vr-fig.narrow { max-width: 24rem; margin-left: auto; margin-right: auto; }
.vr-fig figcaption {
  margin-top: .55rem;
  font-size: .88rem;
  line-height: 1.5;
  font-style: italic;
  color: var(--vr-ink-soft);
}

/* Proportional bar: each span's flex-grow is its share (days, points). */
.vr-bar {
  display: flex;
  height: 2.3rem;
  margin: .3rem 0 .5rem;
  overflow: hidden;
  border: 1px solid rgba(123,96,56,.55);
  border-radius: 3px;
}
.vr-bar > span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: .8rem;
  font-weight: 700;
  color: #fff8e8;
  border-inline-end: 1px solid rgba(255,251,240,.55);
}
.vr-bar > span:last-child { border-inline-end: 0; }
.vr-bar-label {
  margin: 1rem 0 0;
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--vr-ink-soft);
}
.vr-c1 { background: #8a7a5c; }
.vr-c2 { background: var(--vr-gold); }
.vr-c3 { background: var(--vr-blood); }
.vr-c4 { background: var(--vr-hide-700); }
.vr-c5 { background: #6b5a2a; }
.vr-c6 { background: #946c18; }

.vr-legend { list-style: none; margin: .4rem 0 1.4rem !important; }
.vr-legend li { display: flex; gap: .55rem; align-items: baseline; }
.vr-sw {
  flex: none;
  display: inline-block;
  width: .85rem;
  height: .85rem;
  border-radius: 2px;
  transform: translateY(.1rem);
}
/* Numbered marker in a legend, matching the markers drawn on a figure. */
.vr-num {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 50%;
  font-size: .8rem;
  font-weight: 700;
  color: #fff8e8;
  background: var(--vr-blood);
}

/* Horizontal meter inside a table cell; width set inline as a percentage. */
.vr-meter {
  display: block;
  height: .8rem;
  min-width: 2px;
  border-radius: 2px;
  background: var(--vr-gold);
}
/* The meter is the only thing in its cell, so the cell has no width of its
   own and the percentage resolves against almost nothing. Give the cell a
   share of the table, and a floor so a phone cannot squeeze it back to a
   tick; a table that then runs out of room scrolls inside .vr-scroll. */
.vr-scroll td:has(> .vr-meter) {
  width: 40%;
  min-width: 4rem;
}

/* --- Right to left (Arabic) ---------------------------------------------
   <html dir="rtl"> flips the flex rows, the tables and every logical
   margin and border above by itself. What is left: the trail's › arrow,
   which points the reading direction; letter-spacing, which pulls apart
   Arabic's joined letters; and the drawn figures, whose coordinates and
   text-anchor values were laid out left to right and must stay that way. */

[dir="rtl"] .vr-trail-sep { display: inline-block; transform: scaleX(-1); }
:lang(ar) { letter-spacing: normal !important; }
/* Arabic has no italic; the browser would slant the letters artificially. */
.vr-scroll p.lede:lang(ar),
.vr-gate-sub:lang(ar),
.vr-fig figcaption:lang(ar) { font-style: normal; }
[dir="rtl"] .vr-fig svg { direction: ltr; }

/* Building icons at the start of a table row (s1-map), cropped from the
   in-game Building Introductions screens. */
.vr-scroll td .vr-bld {
  display: block;
  width: 64px;
  height: 64px;
  margin-bottom: .35rem;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(14,8,2,.25);
}

/* Click-to-play video (assets/js/vr-video.js). The thumbnail link is a real
   YouTube link, so it still works with JavaScript off. */
.vr-video-play,
.vr-video-frame {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--vr-hide-900);
  border: 1px solid var(--vr-parch-400);
  border-radius: 3px;
  box-shadow: 0 6px 14px rgba(14,8,2,.2);
}
.vr-fig .vr-video-play img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vr-video-play::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 4.2rem;
  height: 4.2rem;
  margin: -2.1rem 0 0 -2.1rem;
  border-radius: 50%;
  background: rgba(140,47,32,.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.5v11l9-5.5z' fill='%23fff8e8'/%3E%3C/svg%3E") center / 2.2rem no-repeat;
  box-shadow: 0 2px 10px rgba(14,8,2,.45);
  transition: transform .16s;
}
.vr-video-play:hover::after,
.vr-video-play:focus-visible::after { transform: scale(1.08); }
.vr-video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
@media (prefers-reduced-motion: reduce) {
  .vr-video-play::after { transition: none; }
  .vr-video-play:hover::after { transform: none; }
}

/* --- Motion ------------------------------------------------------------- */
/* The dev machine runs prefers-reduced-motion: reduce (see TODO.md), so the
   hover lift is the only movement here and it degrades to a colour change. */
@media (prefers-reduced-motion: reduce) {
  .vr-gate, .vr-lang, .vr-nav-btn { transition: border-color .16s, box-shadow .16s; }
  .vr-gate:hover, .vr-lang:hover, .vr-nav-btn:hover { transform: none; }
}