/* Rivalgrid v3 · The War Hall.
   Material language: an oak table and a stone hall, carved wood and hammered
   iron with rivets, parchment with fibre and deckled edges, leather, wax,
   gilt frames. Light always falls from the top left, so every bevel is light
   on its top and left edges and dark on its bottom and right edges.
   Textures are authored SVG tiles in assets/tex, frames are 9 slice SVGs in
   assets/frame. No web fonts, no raster images, no smooth gradients. */

:root {
  --ink: #1b130d;
  --oak-d: #1f140a;
  --oak: #3d2814;
  --oak-m: #573a1d;
  --oak-l: #8a6238;
  --iron: #2b2e30;
  --iron-l: #7d8488;
  --iron-d: #111314;
  --stone: #5e584f;
  --stone-l: #a29a8b;
  --stone-d: #2a2520;
  --parch: #e7d5a8;
  --parch-2: #d8c28e;
  --vellum: #f1e4c2;
  --parch-ink: #2b1d10;
  --parch-soft: #57422b;
  --rubric: #8e1f17;
  --rubric-d: #5e120c;
  --gold: #b8862c;
  --gold-hi: #ecc96a;
  --gold-d: #6e4b14;
  --gold-text: #e9c467;
  --text: #f1e6cb;
  --text-soft: #d2bf98;
  --forge: #b23a1e;
  --forge-d: #6e1d0f;
  --ghost: #4f6b55;
  --ghost-d: #2f4035;
  --tide: #156a73;
  --tide-d: #0b3f46;
  --you: var(--gold);
  --serif: "Palatino Linotype", Palatino, "Book Antiqua", "Iowan Old Style", "Goudy Old Style", Garamond, Georgia, serif;
  --top-h: 134px;

  --tex-oak: url(assets/tex/oak.svg);
  --tex-stone: url(assets/tex/stone.svg);
  --tex-fibre: url(assets/tex/fibre.svg);
  --tex-grain: url(assets/tex/grain.svg);
  --tex-iron: url(assets/tex/hammered.svg);
  --tex-leather: url(assets/tex/leather.svg);
  --tex-linen: url(assets/tex/linen.svg);

  --bevel-out: inset 2px 2px 0 rgba(255, 236, 190, .28), inset -2px -2px 0 rgba(0, 0, 0, .45);
  --bevel-in: inset 2px 2px 0 rgba(0, 0, 0, .55), inset -1px -1px 0 rgba(255, 236, 190, .18);
  --drop: 0 3px 0 #0a0603, 0 10px 22px rgba(0, 0, 0, .45);

  --cur-sword: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M1 1 L6 2.2 L20.5 16.7 L16.7 20.5 L2.2 6 Z' fill='%23dfe4e6' stroke='%231b130d' stroke-width='1.3' stroke-linejoin='round'/%3E%3Cpath d='M3 3 L18.6 18.6' stroke='%237d858a' stroke-width='1.1'/%3E%3Cpath d='M14.6 22.8 L22.8 14.6 L25.2 17 L17 25.2 Z' fill='%23c9962f' stroke='%231b130d' stroke-width='1.3' stroke-linejoin='round'/%3E%3Cpath d='M21 21 L27 27' stroke='%231b130d' stroke-width='4.6' stroke-linecap='round'/%3E%3Cpath d='M21 21 L27 27' stroke='%237a4a26' stroke-width='2.4' stroke-linecap='round'/%3E%3Ccircle cx='28.3' cy='28.3' r='2.6' fill='%23c9962f' stroke='%231b130d' stroke-width='1.2'/%3E%3C/svg%3E") 1 1;
  --cur-hand: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg transform='rotate(-20 12 12)'%3E%3Cpath d='M9 3 Q9 1 11 1 Q13 1 13 3 L13 13 L15 12.6 Q17 12.2 17.5 13.8 L19 13.3 Q21 12.9 21.5 14.7 L23 14.5 Q25 14.5 25 16.7 L25 23 Q25 27.6 20.4 28.6 L13.4 28.6 Q9.4 27.8 8.2 24 L5.6 18.2 Q4.9 16.2 6.7 15.7 Q8.1 15.4 9 17 Z' fill='%23bfc6ca' stroke='%231b130d' stroke-width='1.4' stroke-linejoin='round'/%3E%3Cpath d='M9.2 6.2 H12.8 M9.2 9.6 H12.8 M13 16.4 V20.6 M17.4 15.4 V20.6 M21.4 16.4 V20.6 M10 23.4 H24' stroke='%235d6468' stroke-width='1.1'/%3E%3Cpath d='M11.4 28.6 V31 H22.6 V28.6 Z' fill='%237a1d14' stroke='%231b130d' stroke-width='1.2'/%3E%3C/g%3E%3C/svg%3E") 7 2;
}
body.house-forge { --you: #c8432c; }
body.house-ghost { --you: #7fa58a; }
body.house-tide { --you: #2a9aa3; }

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--top-h) + 12px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--text); font: 18px/1.6 var(--serif); font-variant-numeric: lining-nums;
  background: var(--tex-oak) 0 0 / 640px 288px, var(--oak-d);
  overflow-x: hidden; cursor: var(--cur-sword), auto;
}
a, button, summary, label, select, [role="button"], [role="tab"], .minimap, .realm .node.target { cursor: var(--cur-hand), pointer; }
button[disabled], [aria-disabled="true"] { cursor: var(--cur-sword), not-allowed; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ol, ul, figure, dl { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--gold-hi); outline-offset: 3px; }
.sheet :focus-visible, .cmd :focus-visible, .vellum :focus-visible, .codex :focus-visible, .faq details[open] :focus-visible, .roster :focus-visible, .tabs :focus-visible { outline-color: var(--gold-d); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 100; padding: 10px 18px; background: var(--gold); color: var(--ink); font: 700 17px var(--serif); text-decoration: none; border: 2px solid var(--ink); box-shadow: var(--bevel-out); }
.skip:focus { top: 10px; }
.ico { width: 20px; height: 20px; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(16px, 3vw, 32px); }

/* small caps label type used across the hall */
.label, .panel-h, .cmd-step, .counsel-say b, .sum-col h3, .fight-sum h4, .plan h3, .ability b, .ucard .u-class, .house-facts dt, .workshop-form legend, .ts-eyebrow, .res-name, .tod-label {
  font-family: var(--serif); font-variant: small-caps; letter-spacing: .12em; font-weight: 700;
}

/* ---------- buttons ---------- */
.btn-seal {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 10px 24px;
  background: #c0902e; color: #1b130d;
  font: 700 18px/1.2 var(--serif); letter-spacing: .03em; text-decoration: none; text-shadow: 0 1px 0 rgba(255, 240, 200, .45);
  border: 2px solid var(--ink); border-radius: 3px; cursor: var(--cur-hand), pointer;
  box-shadow: inset 2px 2px 0 #f2d488, inset -2px -2px 0 #6e4b14, 0 4px 0 #0a0603, 0 8px 16px rgba(0, 0, 0, .35);
}
.btn-seal:hover { background-color: #c99632; }
.btn-seal:active { transform: translateY(3px); box-shadow: inset 2px 2px 0 #6e4b14, inset -2px -2px 0 #f2d488, 0 1px 0 #0a0603; }
.btn-seal[disabled] { background-color: #8f7a52; color: #2b1d10; box-shadow: inset 2px 2px 0 #b9a473, inset -2px -2px 0 #5a4a2c, 0 2px 0 #0a0603; cursor: var(--cur-sword), not-allowed; transform: none; }
.btn-plain {
  display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 8px 18px;
  background: var(--tex-grain) 0 0 / 400px 200px, var(--oak-m); color: var(--text);
  border: 2px solid var(--ink); border-radius: 3px; font: 700 17px var(--serif); text-decoration: none; cursor: var(--cur-hand), pointer;
  box-shadow: var(--bevel-out), 0 3px 0 #0a0603;
}
.btn-plain:hover { background-color: #6b4a2a; }
.btn-plain:active { transform: translateY(2px); box-shadow: var(--bevel-in), 0 1px 0 #0a0603; }
.btn-iron {
  display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 6px 14px;
  background: var(--tex-iron) 0 0 / 240px, #3a3e41; color: var(--text);
  border: 1px solid #0a0806; border-radius: 3px; font: 700 15px var(--serif); font-variant: small-caps; letter-spacing: .08em;
  box-shadow: inset 1px 1px 0 #9aa1a5, inset -1px -1px 0 #0d0e0f, 0 2px 0 #000;
}
.btn-iron svg { width: 18px; height: 18px; flex: none; }
.btn-iron:hover { color: #fff6dc; background-color: #474c50; }
.btn-iron:active { transform: translateY(1px); box-shadow: inset 1px 1px 0 #0d0e0f, inset -1px -1px 0 #9aa1a5; }
.btn-iron[aria-pressed="true"] { background-color: #6e4b14; color: #fff3c4; box-shadow: inset 1px 1px 0 #0d0e0f, inset -1px -1px 0 #c9a35a; }
.btn-stone {
  display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 10px 20px; text-align: center;
  background: linear-gradient(rgba(84, 79, 71, .5), rgba(84, 79, 71, .5)), var(--tex-iron) 0 0 / 240px, #57524a; color: #fbf1d9; text-decoration: none;
  font: 700 19px/1.2 var(--serif); font-variant: small-caps; letter-spacing: .1em; text-shadow: 0 -1px 0 #000, 0 1px 0 rgba(255, 255, 255, .12);
  border: 2px solid #0e0b08; border-radius: 2px;
  box-shadow: inset 3px 3px 0 #a29a8b, inset -3px -3px 0 #2a2520, 0 4px 0 #050403, 0 10px 18px rgba(0, 0, 0, .5);
}
.btn-stone:hover { background-color: #77705f; }
.btn-stone:active { transform: translateY(3px); box-shadow: inset 3px 3px 0 #2a2520, inset -3px -3px 0 #a29a8b, 0 1px 0 #050403; }
.btn-stone-main { background: #b8862c; color: #1b130d; text-shadow: 0 1px 0 rgba(255, 240, 200, .5); box-shadow: inset 3px 3px 0 #ecc96a, inset -3px -3px 0 #5a3b0d, 0 4px 0 #050403, 0 10px 18px rgba(0, 0, 0, .5); }
.btn-stone-main:hover { background: #c9962f; }
.btn-stone-main:active { box-shadow: inset 3px 3px 0 #5a3b0d, inset -3px -3px 0 #ecc96a, 0 1px 0 #050403; }

/* ---------- top bar: the carved resource bar ---------- */
.topbar { position: sticky; top: 0; z-index: 40; }
.topbar-row {
  position: relative; display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 8px clamp(12px, 2vw, 24px);
  background: var(--tex-grain) 0 0 / 400px 200px, #4a2f17;
  box-shadow: inset 0 2px 0 #8a6238, inset 0 -2px 0 #160d06;
}
.topbar-row::after { content: ""; position: absolute; left: 0; right: 0; bottom: -12px; height: 12px; background: url(assets/frame/band.svg) 0 0 / 64px 12px repeat-x; box-shadow: 0 6px 12px rgba(0, 0, 0, .45); }
.brand { display: inline-flex; align-items: center; flex: none; text-decoration: none; padding: 2px; }
.brand img { height: 40px; width: auto; }
.brand-mark { display: none !important; }
.res { display: flex; gap: 6px; margin: 0 auto; flex-wrap: nowrap; }
.res-item {
  display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 5px;
  background: var(--tex-grain) 0 0 / 400px 200px, #1a1008; border: 1px solid #0a0603; border-radius: 3px;
  box-shadow: var(--bevel-in), 0 1px 0 rgba(255, 220, 160, .14);
}
.res-ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #2a1a0e; border: 2px solid #8a6326; box-shadow: inset 1px 1px 0 #ecc96a, inset -1px -1px 0 #3a2508, 0 1px 0 #000; }
.res-ico svg { width: 21px; height: 21px; }
.res-name { font-size: 15px; color: var(--text-soft); }
.res-item b { font: 700 19px var(--serif); font-variant-numeric: tabular-nums lining-nums; color: #fff4d6; min-width: 2.4ch; text-align: right; text-shadow: 0 1px 0 #000; }
.res-item.bump b { animation: bump .6s ease; }
@keyframes bump { 30% { color: var(--gold-hi); transform: scale(1.22); } }
.res-item.spend b { animation: spend .6s ease; }
@keyframes spend { 30% { color: #ff9a7a; } }
.res-day b { min-width: auto; }
.top-actions { display: flex; gap: 8px; flex: none; }
#menu-toggle { display: none; }

/* the scroll banner nav: a parchment roll with dowel ends */
.codex { position: relative; display: flex; align-items: stretch; justify-content: center; margin: 12px auto 0; max-width: 1180px; padding: 0 18px; }
.codex-links {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0;
  padding: 4px 10px; background: var(--tex-fibre) 0 0 / 256px, var(--parch); color: var(--parch-ink);
  border-top: 2px solid #8f7444; border-bottom: 2px solid #8f7444;
  box-shadow: inset 0 2px 0 #f6ebcc, inset 0 -3px 0 #c9b07a, 0 6px 12px rgba(0, 0, 0, .45);
}
.codex a { position: relative; padding: 6px 13px; font: 700 16px/1.2 var(--serif); font-variant: small-caps; letter-spacing: .08em; text-decoration: none; color: #3a2814; }
.codex a + a::before { content: ""; position: absolute; left: -3px; top: 50%; width: 5px; height: 5px; margin-top: -2px; background: var(--rubric); transform: rotate(45deg); }
.codex a:hover, .codex a[aria-current="true"] { color: var(--rubric); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.scroll-rod { flex: none; width: 18px; border-radius: 0; border: 2px solid #120a04; background: linear-gradient(90deg, #2a190b 0 3px, #8a6238 3px 7px, #6b4524 7px 12px, #3d2814 12px); position: relative; margin: -6px 0; }
.scroll-rod::before, .scroll-rod::after { content: ""; position: absolute; left: 50%; width: 12px; height: 8px; margin-left: -6px; background: #c9962f; border: 2px solid #120a04; }
.scroll-rod::before { top: -8px; border-radius: 6px 6px 2px 2px; }
.scroll-rod::after { bottom: -8px; border-radius: 2px 2px 6px 6px; }

/* ---------- title screen ---------- */
.title-screen {
  position: relative; overflow: hidden; padding: 46px clamp(12px, 7vw, 110px) 50px;
  background: linear-gradient(rgba(12, 8, 4, .38), rgba(12, 8, 4, .38)), var(--tex-stone) 0 0 / 480px 288px, #3a352f;
  border-bottom: 3px solid #0a0603;
}
.ts-frame { position: relative; max-width: 1240px; margin: 0 auto; border: 40px solid transparent; border-image: url(assets/frame/gilt.svg) 40 round; background: #120b05; box-shadow: 0 18px 40px rgba(0, 0, 0, .65); }
.slot-hero { aspect-ratio: 16 / 9; min-height: 590px; max-height: 640px; width: 100%; overflow: hidden; }
.slot-hero .slot-art, .slot-hero .slot-art svg { width: 100%; height: 100%; }
.ts-menu {
  position: absolute; left: 4%; top: 50%; transform: translateY(-50%); width: min(400px, 44%);
  padding: 14px 20px 18px; text-align: center;
  border: 22px solid transparent; border-image-width: 22px; border-image: url(assets/frame/wood.svg) 32 stretch;
  background: var(--tex-grain) 0 0 / 400px 200px, #2a1a0c; background-clip: padding-box;
  box-shadow: 0 16px 34px rgba(0, 0, 0, .6);
}
.ts-eyebrow { font-size: 15px; color: var(--gold-text); line-height: 1.35; }
.ts-title { margin: 8px auto 6px; width: 150px; }
.ts-title img { width: 150px; height: auto; margin: 0 auto; }
.ts-lede { font-size: 16px; line-height: 1.5; color: var(--text); }
.ts-buttons { display: grid; gap: 8px; margin-top: 14px; }
.ts-buttons .btn-stone { min-height: 46px; font-size: 18px; }

.torch { position: absolute; top: 40%; width: 56px; z-index: 2; pointer-events: none; }
.torch svg { position: relative; width: 56px; height: auto; }
.torch-l { left: clamp(4px, 2.2vw, 36px); }
.torch-r { right: clamp(4px, 2.2vw, 36px); }
.torch-glow { position: absolute; left: 50%; top: 2px; width: 280px; height: 280px; margin: -120px 0 0 -140px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 170, 70, .34), rgba(255, 140, 50, .12) 55%, rgba(255, 120, 40, 0)); animation: glow 2.6s steps(6, end) infinite alternate; will-change: opacity; }
.torch .flame { transform-origin: 30px 52px; animation: flame .9s steps(3, end) infinite alternate; }
@keyframes flame { 0% { transform: scale(1, 1) skewX(0); } 50% { transform: scale(.94, 1.08) skewX(3deg); } 100% { transform: scale(1.04, .94) skewX(-3deg); } }
@keyframes glow { 0% { opacity: .75; } 40% { opacity: 1; } 70% { opacity: .82; } 100% { opacity: .95; } }

/* ---------- the stage: the game in a stone hall ---------- */
.stage {
  outline: none; padding: 26px clamp(8px, 1.6vw, 24px) 36px;
  background: linear-gradient(rgba(12, 8, 4, .5), rgba(12, 8, 4, .5)), var(--tex-stone) 0 0 / 480px 288px, #3a352f;
}
.stage-inner { max-width: 1640px; margin: 0 auto; }
.stage-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 18px; align-items: start; }
.map-col, .map-frame, .hud-bottom, .command, .panel { min-width: 0; }
.map-frame {
  position: relative; border: 32px solid transparent; border-image: url(assets/frame/wood.svg) 32 stretch;
  background: #0d0804; box-shadow: var(--drop);
}
.map-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px 20px; flex-wrap: wrap; padding: 10px 16px 12px;
  background: var(--tex-grain) 0 0 / 400px 200px, #3a2412; border-bottom: 3px solid #0d0804;
  box-shadow: inset 0 -2px 0 #6b4a2a;
}
.cartouche h2 { font: 700 26px/1.1 var(--serif); font-variant: small-caps; letter-spacing: .08em; color: var(--gold-text); text-shadow: 0 2px 0 #000; }
.tagline { font: italic 16px/1.4 var(--serif); color: var(--text-soft); margin-top: 3px; max-width: 60ch; }
.daybar { display: flex; align-items: center; gap: 10px; padding: 6px 12px; background: var(--tex-iron) 0 0 / 240px, #24272a; border: 1px solid #000; box-shadow: inset 1px 1px 0 #7d8488, inset -1px -1px 0 #0d0e0f; }
.sun-track { position: relative; width: 120px; height: 12px; border: 1px solid #000; background: linear-gradient(90deg, #e8b25c 0 20%, #f3d27a 20% 40%, #f6e3a4 40% 60%, #d98a44 60% 80%, #3a3556 80%); }
.sun { position: absolute; top: 50%; left: 0; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: #f6cf74; border: 2px solid #1b130d; box-shadow: inset -3px -3px 0 #c98a2e; transition: left 1.6s ease; }
.tod-label { font-size: 15px; color: #fff4d6; min-width: 8ch; }
.map-scroll { overflow: auto; scrollbar-width: thin; outline: none; position: relative; }
.map-scroll:focus-visible { box-shadow: inset 0 0 0 3px var(--gold-hi); }
.realm-wrap { position: relative; width: 100%; }
.realm-wrap::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--tex-fibre) 0 0 / 256px; opacity: .55; }
.realm { width: 100%; height: auto; }
.realm .plaque path { fill: #ecdcb0; }
.realm .plaque text { font: 700 20px var(--serif); fill: #2b1d10; letter-spacing: .03em; }
.realm .plaque-seat text, .realm .plaque-crown text { font-size: 21px; }
.realm .map-region { font: 700 22px var(--serif); fill: #f3e8c8; stroke: #2b1d10; stroke-width: 4px; paint-order: stroke; letter-spacing: .3em; }
.realm .sea-label { fill: #d8efe8; stroke: #0b3f46; }
.realm .map-tiny { font: 700 21px var(--serif); fill: #2b1d10; }
.realm .river-flow { animation: flow 6s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -72; } }
.realm .mist-a { animation: drift 18s ease-in-out infinite alternate; }
.realm .mist-b { animation: drift 24s ease-in-out infinite alternate-reverse; }
@keyframes drift { to { transform: translateX(46px); } }
.realm .map-flag { transform-box: fill-box; transform-origin: left center; animation: flap 2.6s ease-in-out infinite; }
@keyframes flap { 50% { transform: skewY(6deg) scaleX(.92); } }
.realm .ship { transform: translate(1092px, 560px); animation: bob 5s ease-in-out infinite; }
@keyframes bob { 50% { transform: translate(1092px, 566px) rotate(2deg); } }
.realm .terr { transition: fill-opacity .5s, stroke-width .5s; }
.realm .terr.mine { fill-opacity: .24; stroke-width: 5; }
.realm .tod { transition: opacity 1.4s ease; }
.realm .seat.mine .plaque path { fill: var(--gold-hi); }
.realm .node .node-ring { fill: none; stroke: transparent; stroke-width: 4; }
.realm .node .fog { transition: opacity 1.2s ease, transform 1.2s ease; transform-box: fill-box; transform-origin: center; }
.realm .node .fog circle { fill: #ece6d4; stroke: #a49a83; stroke-width: 1.4; }
.realm .node.seen .fog { opacity: 0; transform: scale(1.4); }
.realm .node .node-flag { opacity: 0; transition: opacity .6s; }
.realm .node.seen .node-flag { opacity: 1; }
.realm .node-flag-cloth { fill: #888; }
.realm .node[data-holder="forge"] .node-flag-cloth { fill: var(--forge); }
.realm .node[data-holder="ghost"] .node-flag-cloth { fill: var(--ghost); }
.realm .node[data-holder="tide"] .node-flag-cloth { fill: var(--tide); }
.realm .node.target .node-ring { stroke: #fff1b8; stroke-dasharray: 8 7; animation: spin 14s linear infinite; transform-box: fill-box; transform-origin: center; }
.realm .node.target:hover .node-ring, .realm .node.target:focus .node-ring { stroke: #fff; stroke-width: 6; }
.realm .node.picked .node-ring { stroke: var(--gold-hi); stroke-width: 7; stroke-dasharray: none; }
.realm .node:focus { outline: none; }
.realm .node:focus-visible .node-ring { stroke: #fff; stroke-width: 7; }
@keyframes spin { to { transform: rotate(360deg); } }
.realm .node .plaque path { transition: fill .3s; }
.realm .node.target .plaque path { fill: #fff6d8; }
.realm .node.picked .plaque path { fill: var(--gold-hi); }
.realm .float { font: 700 26px var(--serif); fill: #fff6d8; stroke: #1b130d; stroke-width: 4px; paint-order: stroke; }
.realm .new-bld { animation: rise .8s ease both; transform-box: fill-box; transform-origin: bottom center; }
@keyframes rise { from { transform: scaleY(0); opacity: 0; } to { transform: none; opacity: 1; } }
.slot-map.has-art .realm > rect:first-of-type { display: none; }

/* battle report: a parchment roll on two wooden rods */
.battle { position: absolute; inset: 0; z-index: 6; display: flex; align-items: center; justify-content: center; padding: 18px; background: rgba(12, 8, 4, .62); }
.battle[hidden] { display: none; }
.battle-roll { width: min(680px, 100%); max-height: 100%; display: flex; flex-direction: column; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .6)); }
.roll-cap { position: relative; z-index: 2; height: 24px; margin: 0 -16px; border: 2px solid var(--ink); border-radius: 12px; background: linear-gradient(#a8783e 0 30%, #7a5530 30% 62%, #4a2f17 62%); }
.roll-cap::before, .roll-cap::after { content: ""; position: absolute; top: -6px; width: 16px; height: 32px; border: 2px solid var(--ink); border-radius: 6px; background: linear-gradient(90deg, #6e4b14 0 30%, #c9962f 30% 70%, #6e4b14 70%); }
.roll-cap::before { left: -12px; } .roll-cap::after { right: -12px; }
.battle-body {
  overflow: auto; padding: 18px 28px 20px; color: var(--parch-ink);
  background: var(--tex-fibre) 0 0 / 256px, var(--parch);
  border-left: 3px solid #b99a60; border-right: 3px solid #b99a60;
  box-shadow: inset 6px 0 0 rgba(120, 90, 40, .18), inset -6px 0 0 rgba(120, 90, 40, .18);
  transform-origin: top center; animation: unroll .8s steps(8, end) both;
}
@keyframes unroll { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.battle-title { font: 700 25px/1.15 var(--serif); text-align: center; color: var(--rubric); }
.battle-scene { margin: 10px auto 0; height: 130px; border: 2px solid var(--ink); overflow: hidden; background: #c7d4cf; box-shadow: 0 0 0 3px #b8862c, 0 0 0 4px var(--ink); position: relative; }
.battle-scene svg.scene { width: 100%; height: 100%; }
.battle-caption { margin-top: 10px; text-align: center; font: italic 16px var(--serif); color: var(--parch-soft); }
.battle-sum { margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }
.sum-col h3 { font-size: 16px; color: var(--rubric); padding-bottom: 4px; border-bottom: 2px solid rgba(43, 29, 16, .45); }
.battle-sum li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 5px 0; border-bottom: 1px solid rgba(43, 29, 16, .2); font-size: 15px; line-height: 1.35; opacity: 0; animation: ink .4s ease forwards; }
.battle-sum li b { font: 700 17px var(--serif); font-variant-numeric: tabular-nums; white-space: nowrap; }
.battle-sum li.total { font-weight: 700; border-bottom: 0; }
.battle-sum li.total b { font-size: 20px; color: var(--rubric); }
@keyframes ink { to { opacity: 1; } }
.battle-verdict { margin-top: 10px; font: 700 18px/1.4 var(--serif); text-align: center; }
.battle-verdict.win { color: #2f5a1e; }
.battle-verdict.loss { color: var(--rubric); }
.battle-actions { margin-top: 14px; display: flex; justify-content: center; align-items: center; gap: 14px; }
.battle-seal svg { width: 56px; height: auto; }
.scene .side { transition: transform 1.1s cubic-bezier(.4, .1, .3, 1); }
.scene.clash .side-a { transform: translateX(150px); }
.scene.clash .side-b { transform: translateX(-150px); }
.scene .spark { opacity: 0; transform-box: fill-box; transform-origin: center; }
.scene.clash .spark { animation: spark .5s 1s ease both; }
@keyframes spark { 0% { opacity: 0; transform: scale(.4); } 50% { opacity: 1; transform: scale(1.1); } 100% { opacity: 0; transform: scale(1.4); } }
.scene.done .loser { transition: transform 1s ease, opacity 1s ease; opacity: 0; }
.scene.done .side-a.loser { transform: translateX(-60px); }
.scene.done .side-b.loser { transform: translateX(160px); }
.scene .victor-flag { opacity: 0; transition: opacity .6s .3s; }
.scene.done .victor-flag { opacity: 1; }

/* bottom HUD: iron framed oak panels */
.hud-bottom { display: grid; grid-template-columns: 236px minmax(0, 1fr) 300px; gap: 14px; margin-top: 16px; }
.panel {
  position: relative; padding: 10px 12px 12px;
  border: 24px solid transparent; border-image: url(assets/frame/iron.svg) 24 round;
  margin: -12px; background: var(--tex-grain) 0 0 / 400px 200px, #33200f; background-clip: padding-box;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .4);
}
.hud-bottom .panel { margin: 0; }
.panel-h { font-size: 17px; color: var(--gold-text); margin: 0 0 10px; text-shadow: 0 1px 0 #000; }
.panel-sub { font-weight: 400; font-variant: normal; letter-spacing: 0; font-style: italic; color: var(--text-soft); margin-left: 6px; font-size: 15px; }
.minimap { position: relative; border: 18px solid transparent; border-image: url(assets/frame/stone.svg) 40 round; background: #000; }
.minimap svg { width: 100%; height: auto; }
.minimap .mm-place.mine { fill: var(--you); }
.army { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: thin; }
.army li {
  flex: none; width: 116px; padding: 0 0 8px; text-align: center; color: var(--parch-ink);
  background: var(--tex-fibre) 0 0 / 256px, var(--vellum);
  border: 3px solid #a8781f; outline: 1px solid var(--ink);
  box-shadow: inset 0 0 0 1px #ecc96a, 0 3px 0 #0a0603;
}
.army li::before { content: ""; display: block; height: 8px; background: var(--you); border-bottom: 1px solid var(--ink); }
.army li.fresh { animation: pop .5s ease; }
@keyframes pop { from { transform: scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }
.army .art { height: 70px; display: flex; align-items: end; justify-content: center; margin-top: 4px; }
.army .art svg { height: 70px; width: auto; }
.army .nm { display: block; font: 700 15px/1.2 var(--serif); margin-top: 4px; padding: 0 4px; }
.army .ct { display: block; font: italic 14px/1.3 var(--serif); color: var(--parch-soft); padding: 0 4px; }
.queue { display: grid; gap: 8px; }
.queue li {
  display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: center; padding: 6px 10px; min-height: 60px;
  background: var(--tex-grain) 0 0 / 400px 200px, #1a1008; border: 1px solid #0a0603; box-shadow: var(--bevel-in);
}
.queue li.empty { grid-template-columns: 1fr; color: var(--text-soft); font-size: 15px; font-style: italic; }
.queue .q-art svg { width: 44px; height: auto; }
.queue .q-name { font: 700 16px var(--serif); display: flex; justify-content: space-between; gap: 6px; color: var(--text); }
.queue .q-name span { font: italic 14px var(--serif); color: var(--gold-text); }
.bar { height: 10px; background: #0a0603; border: 1px solid #000; overflow: hidden; margin-top: 6px; box-shadow: inset 1px 1px 0 #000; }
.bar i { display: block; height: 100%; width: 0; background: #c9962f; box-shadow: inset 0 2px 0 #ecc96a, inset 0 -2px 0 #6e4b14; transition: width 1.8s linear; }

/* command: a leather bound book with a parchment page */
.command {
  position: relative; display: flex; flex-direction: column; gap: 12px; padding: 14px;
  background: var(--tex-leather) 0 0 / 200px, #4a1a12;
  border: 3px solid var(--ink); box-shadow: inset 0 0 0 2px #7a2a1c, inset 0 0 0 5px #2a0c08, var(--drop);
}
.command::before, .command::after { content: ""; position: absolute; width: 34px; height: 34px; background: #a8781f; border: 2px solid var(--ink); box-shadow: inset 2px 2px 0 #ecc96a, inset -2px -2px 0 #5a3b0d; }
.command::before { top: -3px; left: -3px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.command::after { bottom: -3px; right: -3px; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.phases { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.phases li { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px 2px; font: 700 15px var(--serif); font-variant: small-caps; letter-spacing: .05em; color: #d9c49b; position: relative; }
.ph-ico { width: 42px; height: 42px; padding: 5px; border-radius: 50%; background: #2a1a0e; border: 3px solid #5a3b0d; box-shadow: inset 2px 2px 0 rgba(0, 0, 0, .6), 0 1px 0 #7a2a1c; filter: grayscale(.9) brightness(.7); }
.ph-ico svg { width: 100%; height: 100%; }
.phases li.now { color: #fff4d6; }
.phases li.now .ph-ico { filter: none; background: var(--parch); border-color: #c9962f; box-shadow: inset 2px 2px 0 #fff3c4, inset -2px -2px 0 #b99a60, 0 0 0 2px var(--ink), 0 0 0 5px rgba(236, 201, 106, .35); }
.phases li.done { color: var(--gold-text); }
.phases li.done .ph-ico { filter: none; background: var(--parch-2); border-color: #a8781f; }
.phases li.done::after { content: ""; position: absolute; top: 2px; right: 10px; width: 10px; height: 5px; border-left: 3px solid #8fd06a; border-bottom: 3px solid #8fd06a; transform: rotate(-45deg); }
.book { position: relative; padding: 0 6px 6px 0; }
.cmd {
  position: relative; padding: 16px 16px 18px; min-height: 300px; color: var(--parch-ink);
  background: var(--tex-fibre) 0 0 / 256px, var(--parch);
  border: 1px solid #8f7444;
  box-shadow: 2px 2px 0 #cdb684, 4px 4px 0 #b49a64, 6px 6px 0 #8f7444, inset 10px 0 0 rgba(120, 90, 40, .12);
}
.cmd-title { font: 700 26px/1.15 var(--serif); color: var(--parch-ink); outline: none; }
.cmd-title::first-letter { color: var(--rubric); font-size: 1.25em; }
.counsel { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: start; margin: -4px 0 12px; }
.counsel-face { border: 3px solid #a8781f; outline: 1px solid var(--ink); background: #2a1a0e; box-shadow: inset 0 0 0 1px #ecc96a; }
.counsel-face .portrait { width: 100%; height: auto; }
.counsel-say { position: relative; padding: 9px 12px; background: var(--vellum); border: 2px solid var(--ink); font: italic 16px/1.45 var(--serif); color: #3b2a19; box-shadow: 2px 2px 0 rgba(43, 29, 16, .25); }
.counsel-say::before { content: ""; position: absolute; left: -9px; top: 18px; width: 14px; height: 14px; background: var(--vellum); border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg); }
.counsel-say b { display: block; font-size: 15px; font-style: normal; color: var(--rubric); margin-bottom: 2px; }
.cmd-step { font-size: 15px; color: var(--rubric); margin-bottom: 4px; }
.cmd-lede { margin-top: 8px; font-size: 17px; line-height: 1.55; color: #3b2a19; }
.cmd .actions { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 10px; }
.cmd .actions .btn-seal { flex: 1 1 auto; }
.cmd .hint { margin-top: 12px; font-size: 16px; color: var(--parch-soft); }
.cmd .hint a { color: var(--rubric); font-weight: 700; }
.picks { display: grid; gap: 10px; margin-top: 14px; }
.pick {
  display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; width: 100%; text-align: left;
  padding: 10px 12px; color: #fff6e0; border: 2px solid var(--ink); border-radius: 2px;
  box-shadow: var(--bevel-out), inset 0 0 0 4px rgba(0, 0, 0, .18), 0 3px 0 #0a0603;
}
.pick:hover { filter: brightness(1.08); }
.pick:active { transform: translateY(2px); box-shadow: var(--bevel-in), 0 1px 0 #0a0603; }
.pick-forge { background: var(--tex-leather) 0 0 / 200px, #8a2a16; }
.pick-ghost { background: var(--tex-leather) 0 0 / 200px, #34503f; }
.pick-tide { background: var(--tex-leather) 0 0 / 200px, #0f5a62; }
.pick .crest { width: 54px; height: 56px; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .55)); }
.pick b { display: block; font: 700 21px/1.1 var(--serif); text-shadow: 0 1px 0 #000; }
.pick span { display: block; font-size: 15px; line-height: 1.4; margin-top: 3px; }
.workers { margin-top: 10px; display: grid; gap: 0; border-top: 2px solid rgba(43, 29, 16, .5); }
.worker { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: center; padding: 6px 4px; border-bottom: 1px solid rgba(43, 29, 16, .3); }
.worker .ico { width: 28px; height: 28px; }
.worker .w-name { font: 700 17px/1.2 var(--serif); }
.worker .w-yield { display: block; font: italic 14px/1.3 var(--serif); color: var(--parch-soft); }
.stepper { display: flex; align-items: center; gap: 6px; }
.stepper button { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--ink); background: var(--tex-iron) 0 0 / 240px, #4a4f53; color: #fff6dc; font: 700 21px/1 var(--serif); box-shadow: inset 2px 2px 0 #9aa1a5, inset -2px -2px 0 #15171a, 0 2px 0 #0a0603; }
.stepper button:hover:not([disabled]) { background-color: #6e4b14; }
.stepper button:active:not([disabled]) { transform: translateY(1px); box-shadow: inset 2px 2px 0 #15171a, inset -2px -2px 0 #9aa1a5; }
.stepper button[disabled] { opacity: .4; }
.stepper output { min-width: 1.6ch; text-align: center; font: 700 22px var(--serif); }
.idle { margin-top: 8px; font: italic 15px var(--serif); color: var(--parch-soft); }
.plan { margin-top: 12px; padding: 10px 12px; background: rgba(255, 248, 220, .45); border: 1px solid rgba(43, 29, 16, .35); box-shadow: inset 0 0 0 3px rgba(255, 248, 220, .5); }
.plan h3 { font-size: 15px; color: var(--parch-soft); }
.plan li { display: flex; gap: 8px; align-items: baseline; font-size: 15px; line-height: 1.45; margin-top: 5px; }
.plan li::before { content: ""; flex: none; width: 10px; height: 10px; border: 2px solid var(--parch-soft); transform: translateY(1px) rotate(45deg); }
.plan li.ok::before { background: #4f7a2a; border-color: #2f5a1e; }
.opts { display: grid; gap: 8px; margin-top: 10px; }
.opt {
  display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; width: 100%; text-align: left;
  padding: 8px 10px; background: var(--vellum); border: 2px solid var(--ink); border-radius: 2px; color: var(--parch-ink);
  box-shadow: inset 2px 2px 0 #fffaf0, inset -2px -2px 0 #c9b07a, 0 3px 0 rgba(43, 29, 16, .5);
}
.opt:hover:not([aria-disabled="true"]) { background: #fbf2d8; }
.opt:active:not([aria-disabled="true"]) { transform: translateY(2px); box-shadow: inset 2px 2px 0 #c9b07a, 0 1px 0 rgba(43, 29, 16, .5); }
.opt[aria-disabled="true"] { opacity: .66; box-shadow: none; background: rgba(255, 248, 230, .4); }
.opt[aria-pressed="true"] { background: #f6e3a4; box-shadow: inset 2px 2px 0 #fff3c4, inset -2px -2px 0 #b8862c, 0 0 0 3px #b8862c, 0 0 0 4px var(--ink); }
.opt .o-art svg { width: 64px; height: auto; max-height: 72px; }
.opt .o-art .unit-svg { height: 72px; width: auto; margin: 0 auto; }
.opt b { display: block; font: 700 18px/1.15 var(--serif); }
.opt .o-note { display: block; font-size: 15px; line-height: 1.4; color: var(--parch-soft); margin-top: 3px; }
.opt .o-why { display: block; font: italic 700 14px var(--serif); color: var(--rubric); margin-top: 4px; }
.cost { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.cost span { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px 1px 3px; background: rgba(43, 29, 16, .09); border: 1px solid rgba(43, 29, 16, .25); font: 700 15px var(--serif); font-variant-numeric: tabular-nums; }
.cost span.short { background: rgba(142, 31, 23, .14); color: var(--rubric); }
.cost .ico { width: 18px; height: 18px; }
.power { display: block; margin-top: 10px; }
.power-bar { display: flex; height: 16px; overflow: hidden; border: 2px solid var(--ink); background: #333; }
.power-bar i { display: block; height: 100%; transition: width .5s ease; }
.power-bar .pa { background: var(--you); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .25); }
.power-bar .pb { background: #6d6252; }
.power-legend { display: flex; justify-content: space-between; font: 700 15px var(--serif); margin-top: 4px; }
.chronicle { padding: 12px 14px; background: var(--tex-grain) 0 0 / 400px 200px, #1a1008; border: 1px solid #0a0603; box-shadow: var(--bevel-in); }
.log { display: grid; gap: 6px; max-height: 210px; overflow: auto; font-size: 15px; line-height: 1.5; color: var(--text); scrollbar-width: thin; }
.log li { padding-left: 16px; position: relative; }
.log li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; transform: rotate(45deg); background: var(--gold); }
.log li.empty { color: var(--text-soft); font-style: italic; padding-left: 0; }
.log li.empty::before { display: none; }
.log b { color: var(--gold-text); }

/* the rules sheet, nailed to the wall */
.rules { position: relative; margin-top: 26px; padding: 22px 26px 24px; }
.pin { position: absolute; top: 10px; width: 14px; height: 14px; border-radius: 50%; background: #2c2f31; border: 2px solid #0a0806; box-shadow: inset 2px 2px 0 #9aa1a5, 0 2px 0 rgba(0, 0, 0, .4); }
.pin-l { left: 12px; } .pin-r { right: 12px; }
.rules-title { font: 700 24px var(--serif); color: var(--parch-ink); }
.rules-title::first-letter { color: var(--rubric); }
.rules-list { margin-top: 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 26px; counter-reset: r; }
.rules-list li { position: relative; padding-left: 38px; font-size: 16px; line-height: 1.5; counter-increment: r; }
.rules-list li::before { content: counter(r, upper-roman); position: absolute; left: 0; top: -2px; width: 30px; text-align: center; font: 700 22px/1.2 var(--serif); color: var(--rubric); }

/* ---------- section grounds ---------- */
.section { position: relative; padding: clamp(56px, 7vw, 96px) 0; }
.on-oak { background: var(--tex-oak) 0 0 / 640px 288px, var(--oak-d); }
.on-oak-dark { background: linear-gradient(rgba(8, 5, 2, .35), rgba(8, 5, 2, .35)), var(--tex-oak) 0 0 / 640px 288px, var(--oak-d); }
.on-stone { background: linear-gradient(rgba(12, 8, 4, .5), rgba(12, 8, 4, .5)), var(--tex-stone) 0 0 / 480px 288px, #3a352f; }
.sheet {
  position: relative; color: var(--parch-ink);
  background: var(--tex-fibre) 0 0 / 256px, var(--parch);
  box-shadow: inset 0 0 0 1px rgba(143, 116, 68, .6), 0 3px 0 #6b5634, 0 16px 30px rgba(0, 0, 0, .5);
}
.sheet-deckle { padding: clamp(28px, 4vw, 52px) clamp(18px, 4vw, 56px); margin: 22px 0; }
.sheet-deckle::before, .sheet-deckle::after { content: ""; position: absolute; left: 0; right: 0; height: 28px; background: url(assets/frame/deckle.svg) 0 0 / 480px 28px repeat-x; pointer-events: none; }
.sheet-deckle::before { top: -27px; }
.sheet-deckle::after { bottom: -27px; transform: scaleY(-1); }
.vellum { background: var(--vellum); border: 2px solid var(--ink); box-shadow: inset 0 0 0 4px var(--vellum), inset 0 0 0 5px rgba(43, 29, 16, .5), 0 3px 0 rgba(43, 29, 16, .35); }

/* section heads: ribbon, rubricated title, illuminated lede */
.sec-head { position: relative; }
.ribbon { display: inline-block; margin-left: -6px; }
.ribbon span {
  display: inline-block; padding: 9px 6px 15px; min-width: 120px; text-align: center;
  border-style: solid; border-width: 0 48px; border-image: url(assets/frame/ribbon.svg) 0 48 fill / 0 48px stretch;
  color: #fbe9c4; font: 700 16px/1 var(--serif); font-variant: small-caps; letter-spacing: .16em; text-shadow: 0 1px 0 #3a0905;
  background: #8e1f17; background-clip: content-box;
}
.sec-title { font: 700 clamp(32px, 4.2vw, 54px)/1.08 var(--serif); margin-top: 16px; max-width: 24ch; letter-spacing: .005em; color: var(--parch-ink); }
.sec-title::first-letter { color: var(--rubric); }
.sec-head::after { content: ""; display: block; width: 220px; height: 12px; margin-top: 16px; background: linear-gradient(var(--gold-d), var(--gold-d)) 0 5px / 100% 2px no-repeat, linear-gradient(var(--gold-d), var(--gold-d)) 0 9px / 60% 1px no-repeat; }
.sec-lede { margin-top: 16px; max-width: 68ch; font-size: 19px; line-height: 1.65; color: #3e2c1a; }
.sec-lede::after { content: ""; display: table; clear: both; }
.initial { float: left; width: 86px; height: 86px; margin: 6px 14px 4px 0; filter: drop-shadow(2px 3px 0 rgba(0, 0, 0, .35)); }
.initial svg { width: 100%; height: 100%; }
.sec-head-dark .sec-title { color: #f3e6c4; text-shadow: 0 2px 0 #000, 0 0 1px #000; }
.sec-head-dark .sec-title::first-letter { color: var(--gold-text); }
.sec-head-dark .sec-lede { color: var(--text-soft); }
.sec-head-dark::after { background: linear-gradient(var(--gold), var(--gold)) 0 5px / 100% 2px no-repeat, linear-gradient(var(--gold), var(--gold)) 0 9px / 60% 1px no-repeat; }
.sub-title { font: 700 28px/1.2 var(--serif); margin-top: 48px; color: #f3e6c4; text-shadow: 0 2px 0 #000; }
.sub-title::first-letter { color: var(--gold-text); }

/* the Bayeux frieze divider */
.frieze { position: relative; height: 124px; overflow: hidden; background: #e6dabd; border-top: 4px solid #0a0603; border-bottom: 4px solid #0a0603; box-shadow: inset 0 3px 0 #8f7444, inset 0 -3px 0 #8f7444; }
.frieze-run { position: absolute; left: 0; top: 0; bottom: 0; width: calc(100% + 720px); background: url(assets/frieze.svg) 0 0 / 720px 124px repeat-x; animation: march 70s linear infinite; will-change: transform; }
@keyframes march { to { transform: translateX(-720px); } }

/* ---------- how a day works ---------- */
.moves { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin-top: 36px; border-top: 3px double rgba(43, 29, 16, .6); border-bottom: 3px double rgba(43, 29, 16, .6); }
.move { position: relative; padding: 20px 18px 22px; }
.move + .move { border-left: 1px solid rgba(43, 29, 16, .35); }
.move-n { display: block; font: 700 30px/1 var(--serif); color: var(--rubric); }
.move-ico { display: block; width: 64px; height: 64px; margin: 10px 0 8px; padding: 6px; background: var(--vellum); border: 2px solid var(--ink); box-shadow: 0 0 0 3px #b8862c, 0 0 0 4px var(--ink); }
.move h3 { font: 700 24px var(--serif); font-variant: small-caps; letter-spacing: .06em; margin-top: 14px; }
.move p { margin-top: 6px; font-size: 16px; line-height: 1.55; color: #3e2c1a; }
.day-strip { margin-top: 22px; display: grid; grid-template-columns: repeat(5, 1fr); border: 2px solid var(--ink); }
.day-strip span { text-align: center; font: 700 15px var(--serif); font-variant: small-caps; letter-spacing: .12em; padding: 7px 0; color: #2b1d10; }
.day-strip span:nth-child(1) { background: #efc77a; } .day-strip span:nth-child(2) { background: #f5dc93; } .day-strip span:nth-child(3) { background: #f8e8b2; } .day-strip span:nth-child(4) { background: #e2a160; }
.day-strip span:nth-child(5) { background: #3a3556; color: #fff6d8; }

/* ---------- houses: a stone hall hung with banners ---------- */
.houses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; margin-top: 70px; }
.house {
  position: relative; display: flex; flex-direction: column;
  border: 32px solid transparent; border-image: url(assets/frame/wood.svg) 32 stretch;
  background: var(--tex-grain) 0 0 / 400px 200px, #2e1d0e; background-clip: padding-box;
  box-shadow: var(--drop);
}
.house-banner { position: absolute; top: -78px; right: -10px; width: 86px; z-index: 3; filter: drop-shadow(3px 6px 0 rgba(0, 0, 0, .45)); }
.house-banner svg { width: 86px; height: auto; }
.hang-cloth { transform-origin: 80px 20px; animation: sway 5s ease-in-out infinite; }
@keyframes sway { 50% { transform: skewX(-1.5deg) rotate(.6deg); } }
.slot-seat { aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 3px solid #0d0804; box-shadow: inset 0 0 0 3px #b8862c; position: relative; }
.slot-seat .slot-art svg { width: 100%; height: 100%; }
.slot-seat::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 3px #b8862c, inset 0 0 0 4px var(--ink); pointer-events: none; }
.house-head { display: flex; align-items: center; gap: 14px; padding: 16px 16px 14px; border-bottom: 2px solid #0d0804; box-shadow: 0 1px 0 #6b4a2a; }
.house-forge .house-head { background: var(--tex-leather) 0 0 / 200px, #7a2414; }
.house-ghost .house-head { background: var(--tex-leather) 0 0 / 200px, #2f4035; }
.house-tide .house-head { background: var(--tex-leather) 0 0 / 200px, #0d4f57; }
.house-head .crest { width: 58px; height: 60px; flex: none; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .55)); }
.house-head h3 { font: 700 27px/1.1 var(--serif); font-variant: small-caps; letter-spacing: .05em; color: #fff3d6; text-shadow: 0 2px 0 #000; }
.house-head p { font: italic 16px/1.4 var(--serif); color: #f1e2c2; margin-top: 3px; }
.house-body { padding: 16px; display: grid; gap: 14px; flex: 1; }
.commander { display: grid; grid-template-columns: 120px 1fr; gap: 4px 16px; }
.commander > .slot-portrait { grid-row: 1 / 3; }
.commander > div { display: contents; }
.commander h4 { grid-column: 2; grid-row: 1; align-self: end; }
.commander .epithet { grid-column: 2; grid-row: 2; align-self: start; }
.commander .story { grid-column: 1 / -1; grid-row: 3; margin-top: 10px; }
.slot-portrait { aspect-ratio: 4 / 5; overflow: hidden; border: 4px solid #a8781f; outline: 1px solid var(--ink); box-shadow: inset 0 0 0 1px #ecc96a, 0 0 0 5px #2a1a0e, 0 0 0 6px #6e4b14, 0 8px 14px rgba(0, 0, 0, .5); background: #2a1a0e; }
.slot-portrait .slot-art { height: 100%; display: flex; align-items: center; justify-content: center; }
.slot-portrait .portrait { width: 116%; max-width: none; height: auto; margin-top: -4%; }
.commander h4 { font: 700 21px/1.15 var(--serif); color: #fff4d6; }
.commander .epithet { font: italic 16px var(--serif); color: var(--gold-text); margin-top: 2px; }
.commander .story { font-size: 16px; line-height: 1.55; color: var(--text-soft); margin-top: 8px; }
.ability { position: relative; padding: 12px 14px 12px 16px; color: var(--parch-ink); background: var(--tex-fibre) 0 0 / 256px, var(--parch); border: 1px solid #8f7444; box-shadow: 0 3px 0 #0d0804; }
.ability-seal { position: absolute; right: -10px; top: -14px; width: 50px; }
.ability-seal svg { width: 50px; height: auto; }
.ability b { display: block; font-size: 15px; color: var(--rubric); }
.ability strong { display: block; font: 700 20px var(--serif); margin-top: 2px; }
.ability p { font-size: 16px; line-height: 1.5; margin-top: 3px; padding-right: 20px; }
.house-facts { display: grid; grid-template-columns: auto 1fr; gap: 5px 12px; font-size: 16px; }
.house-facts dt { font-size: 15px; color: var(--gold-text); padding-top: 1px; }
.house-facts dd { margin: 0; color: var(--text); }
.lineup { display: flex; align-items: end; justify-content: center; padding: 10px 0 0; margin-top: auto; border-top: 1px solid #0d0804; box-shadow: inset 0 1px 0 #6b4a2a; background: linear-gradient(transparent 82%, rgba(0, 0, 0, .35) 82%); }
.lineup svg { height: 116px; width: auto; }
.lineup .unit-rider { height: 128px; }
.fair-note { margin-top: 30px; max-width: 70ch; font-size: 18px; color: var(--text-soft); }

/* ---------- units ---------- */
.units-layout { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 28px; margin-top: 38px; align-items: stretch; }
.roster-wrap { grid-column: 1 / -1; }
.fight { padding: 20px 22px; display: flex; flex-direction: column; }
.fight-title { font: 700 26px var(--serif); }
.fight-title::first-letter { color: var(--rubric); }
.fight-lede { margin-top: 6px; font-size: 17px; line-height: 1.55; color: #3e2c1a; }
.fight-scene { margin-top: 12px; border: 2px solid var(--ink); overflow: hidden; background: #d4ddd0; box-shadow: 0 0 0 3px #b8862c, 0 0 0 4px var(--ink); }
.fight-scene svg { width: 100%; height: auto; }
.fight-sum { display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; margin-top: 16px; }
.fight-sum h4 { font-size: 16px; color: var(--rubric); padding-bottom: 4px; border-bottom: 2px solid rgba(43, 29, 16, .45); }
.fight-sum li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px solid rgba(43, 29, 16, .22); font-size: 16px; }
.fight-sum li b { font: 700 17px var(--serif); }
.fight-sum li.total { border-bottom: 0; font-weight: 700; }
.fight-sum li.total b { font-size: 20px; color: var(--rubric); }
.fight-verdict { margin-top: auto; padding-top: 12px; font: 700 18px/1.45 var(--serif); color: #2f5a1e; }
.triangle { padding: 16px; display: flex; flex-direction: column; justify-content: center; }
.triangle svg { width: 100%; height: auto; }
.triangle figcaption { margin-top: 8px; text-align: center; font: italic 17px var(--serif); color: #3e2c1a; }
.tri-label { font: 700 26px var(--serif); fill: #2b1d10; }
.tri-beats { font: 700 23px var(--serif); fill: var(--rubric); letter-spacing: .14em; }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; padding-left: 10px; }
.tabs button {
  min-height: 46px; padding: 8px 18px; border: 2px solid var(--ink); border-bottom: 0;
  background: var(--tex-grain) 0 0 / 400px 200px, var(--oak-m); color: var(--text); font: 700 17px var(--serif); font-variant: small-caps; letter-spacing: .06em;
  box-shadow: inset 2px 2px 0 rgba(255, 236, 190, .25);
}
.tabs button[aria-selected="true"] { background: var(--tex-fibre) 0 0 / 256px, var(--vellum); color: var(--parch-ink); box-shadow: inset 0 5px 0 var(--tab-c, var(--gold)); position: relative; top: 2px; }
.tabs button[data-house="forge"] { --tab-c: var(--forge); }
.tabs button[data-house="ghost"] { --tab-c: var(--ghost); }
.tabs button[data-house="tide"] { --tab-c: var(--tide); }
.roster { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; padding: 18px; background: var(--tex-fibre) 0 0 / 256px, var(--vellum); border: 2px solid var(--ink); }
.ucard {
  display: flex; flex-direction: column; color: var(--parch-ink);
  border: 14px solid transparent; border-image: url(assets/frame/gilt.svg) 40 round;
  background: var(--tex-fibre) 0 0 / 256px, #efe0b8; background-clip: padding-box;
  box-shadow: 0 6px 12px rgba(43, 29, 16, .35);
}
.ucard .u-art { aspect-ratio: 10 / 9; display: flex; align-items: end; justify-content: center; overflow: hidden; border-bottom: 2px solid var(--ink); background: linear-gradient(#c9d2c2 0 58%, #a8b36a 58% 74%, #8a9450 74%); }
.ucard-forge .u-art { background: linear-gradient(#e2c3a0 0 58%, #b0a46a 58% 74%, #8a7f50 74%); }
.ucard-ghost .u-art { background: linear-gradient(#c9d4c8 0 58%, #8c9a6a 58% 74%, #6a7850 74%); }
.ucard-tide .u-art { background: linear-gradient(#c3dcd6 0 58%, #c4b47e 58% 74%, #a8955e 74%); }
.ucard .u-art .slot-art { display: flex; align-items: end; justify-content: center; height: 100%; padding-top: 6px; }
.ucard .u-art svg { height: 92%; width: auto; }
.ucard .u-art .unit-rider, .ucard .u-art .unit-siege { height: 86%; }
.ucard .u-body { padding: 10px 10px 12px; }
.ucard .u-class { font-size: 15px; color: var(--rubric); }
.ucard h3 { font: 700 19px/1.15 var(--serif); margin-top: 2px; }
.ucard .u-role { font-size: 15px; line-height: 1.45; color: #3e2c1a; margin-top: 4px; }
.ucard dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin-top: 8px; font-size: 15px; border-top: 1px solid rgba(43, 29, 16, .3); padding-top: 6px; }
.ucard dt { font-variant: small-caps; letter-spacing: .06em; font-weight: 700; color: var(--parch-soft); }
.ucard dd { margin: 0; font-weight: 700; }

/* ---------- economy: carved plaques on the dark table ---------- */
.resources { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 40px; }
.rescard { display: grid; grid-template-columns: 1fr 86px; gap: 6px; }
.resources .rescard { border: 24px solid transparent; border-image: url(assets/frame/iron.svg) 24 round; padding: 8px 10px; background: var(--tex-grain) 0 0 / 400px 200px, #3a2412; background-clip: padding-box; box-shadow: var(--drop); }
.rescard .ico { width: 44px; height: 44px; padding: 6px; border-radius: 50%; background: #2a1a0e; border: 2px solid #8a6326; box-shadow: inset 1px 1px 0 #ecc96a; }
.rescard h3 { font: 700 25px var(--serif); font-variant: small-caps; letter-spacing: .06em; margin-top: 6px; color: #fff4d6; }
.rescard p { font-size: 16px; line-height: 1.5; color: var(--text-soft); margin-top: 4px; }
.rescard .rate { display: inline-block; margin-top: 8px; font: italic 700 15px var(--serif); color: var(--gold-text); }
.rescard .vill svg { width: 86px; height: auto; }
.flow { display: flex; flex-wrap: wrap; gap: 12px 30px; margin-top: 34px; align-items: center; }
.flow li { position: relative; padding: 8px 18px; background: var(--tex-grain) 0 0 / 400px 200px, var(--oak-m); color: #fff4d6; border: 2px solid var(--ink); font: 700 17px var(--serif); font-variant: small-caps; letter-spacing: .06em; box-shadow: var(--bevel-out), 0 3px 0 #0a0603; }
.flow li:not(:last-child)::after { content: ""; position: absolute; right: -24px; top: 50%; margin-top: -8px; border-left: 13px solid var(--gold); border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.flow-note { margin-top: 16px; color: var(--text-soft); font-size: 18px; max-width: 70ch; }
.buildings { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; margin-top: 20px; }
.bcard { position: relative; display: grid; grid-template-columns: 84px 1fr; gap: 14px; align-items: center; padding: 14px 14px 14px 12px; color: var(--parch-ink); background: var(--tex-fibre) 0 0 / 256px, var(--parch); border: 1px solid #8f7444; box-shadow: 0 3px 0 #6b5634, 0 10px 18px rgba(0, 0, 0, .4); }
.bcard::before { content: ""; position: absolute; top: 6px; left: 6px; width: 10px; height: 10px; border-radius: 50%; background: #2c2f31; border: 2px solid #0a0806; box-shadow: inset 1px 1px 0 #9aa1a5; }
.bcard .bld { width: 84px; height: auto; }
.bcard h4 { font: 700 19px var(--serif); }
.bcard p { font-size: 15px; line-height: 1.45; color: #3e2c1a; margin-top: 3px; }
.bcard .time { font: italic 14px var(--serif); color: var(--parch-soft); margin-top: 4px; display: block; }

/* ---------- season ---------- */
.slot-siege { margin-top: 40px; border: 40px solid transparent; border-image: url(assets/frame/gilt.svg) 40 round; background: #120b05; box-shadow: var(--drop); }
.slot-siege .slot-art { aspect-ratio: 8 / 3; overflow: hidden; }
.slot-siege .slot-art svg { width: 100%; height: 100%; }
.slot-siege figcaption { padding: 10px 16px 2px; font: italic 17px var(--serif); color: var(--parch); text-align: center; background: #120b05; }
.track { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 6px; margin-top: 34px; }
.track li { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; aspect-ratio: 3 / 4; border: 2px solid #0e0b08; font: 700 20px var(--serif); color: var(--parch-ink); background: var(--tex-fibre) 0 0 / 256px, var(--parch); box-shadow: inset 0 5px 0 var(--ph, #8a8a6a), 0 3px 0 #000; }
.track li small { font: 700 14px var(--serif); font-variant: small-caps; letter-spacing: .06em; color: var(--parch-soft); }
.track li.siege small { color: #3a2508; }
.track li.settle { --ph: #7a8a4a; }
.track li.contest { --ph: #b5602e; }
.track li.muster { --ph: #4f6b72; }
.track li.siege { --ph: #6e4b14; background: #d4a23c; box-shadow: inset 2px 2px 0 #f2d488, inset -2px -2px 0 #6e4b14, 0 3px 0 #000; }
.track li svg { width: 24px; height: 24px; }
.track-legend { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 14px; font: 16px var(--serif); color: var(--text); }
.track-legend span { display: inline-flex; align-items: center; gap: 8px; }
.track-legend i { width: 18px; height: 18px; border: 2px solid #000; display: inline-block; }
.track-legend .lg-settle { background: #7a8a4a; } .track-legend .lg-contest { background: #b5602e; } .track-legend .lg-muster { background: #4f6b72; } .track-legend .lg-siege { background: #c9962f; }
.season-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 30px; }
.season-card { padding: 20px 22px; }
.season-card h3 { font: 700 21px var(--serif); }
.season-card h3::first-letter { color: var(--rubric); }
.season-card p, .season-card li { font-size: 16px; line-height: 1.55; color: #3e2c1a; margin-top: 6px; }
.plain li { position: relative; padding-left: 18px; }
.plain li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; transform: rotate(45deg); background: var(--rubric); }

.prizes { margin-top: 56px; }
.prize-head { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 22px; align-items: start; padding: 26px 28px; border: 32px solid transparent; border-image: url(assets/frame/wood.svg) 32 stretch; background: var(--tex-fibre) 0 0 / 256px, var(--parch); background-clip: padding-box; color: var(--parch-ink); box-shadow: var(--drop); }
.prize-seal svg { width: 110px; height: auto; }
.prize-title { font: 700 clamp(24px, 2.8vw, 34px)/1.15 var(--serif); }
.prize-title::first-letter { color: var(--rubric); }
.prize-head p { margin-top: 10px; font-size: 17px; line-height: 1.6; color: #3e2c1a; max-width: 70ch; }
.tiers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 22px; }
.tier { padding: 18px; border: 24px solid transparent; border-image: url(assets/frame/iron.svg) 24 round; background: var(--tex-grain) 0 0 / 400px 200px, #33200f; background-clip: padding-box; box-shadow: var(--drop); }
.tier-ico, .use-ico { display: block; width: 52px; height: 52px; }
.tier h4, .use h4 { font: 700 20px var(--serif); font-variant: small-caps; letter-spacing: .05em; color: var(--gold-text); margin-top: 8px; }
.tier p, .use p { font-size: 16px; line-height: 1.55; color: var(--text); margin-top: 4px; }
.prize-path { margin-top: 22px; padding: 22px 26px; }
.prize-sub { font: 700 22px var(--serif); }
.prize-sub::first-letter { color: var(--rubric); }
.path { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 14px; counter-reset: p; }
.path li { position: relative; padding-top: 40px; font-size: 16px; line-height: 1.55; color: #3e2c1a; counter-increment: p; }
.path li::before { content: counter(p, upper-roman); position: absolute; left: 0; top: 0; font: 700 26px/1 var(--serif); color: var(--rubric); }
.path li:not(:last-child)::after { content: ""; position: absolute; left: 44px; right: -10px; top: 12px; border-top: 2px dashed rgba(43, 29, 16, .45); }
.path b { color: var(--parch-ink); }
.fair { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
.fair li { padding: 16px 18px; background: var(--tex-grain) 0 0 / 400px 200px, #1a1008; border: 1px solid #0a0603; box-shadow: var(--bevel-in); }
.fair h4 { font: 700 18px var(--serif); color: var(--gold-text); }
.fair p { font-size: 16px; line-height: 1.55; color: var(--text-soft); margin-top: 4px; }

/* ---------- banners: tapestry hall ---------- */
.workshop { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 28px; margin-top: 40px; padding: 22px; border: 32px solid transparent; border-image: url(assets/frame/wood.svg) 32 stretch; background: var(--tex-grain) 0 0 / 400px 200px, #2e1d0e; background-clip: padding-box; box-shadow: var(--drop); }
.workshop-view { display: grid; grid-template-columns: 200px 1fr; gap: 18px; align-items: end; padding: 16px; background: linear-gradient(rgba(10, 7, 4, .3), rgba(10, 7, 4, .3)), var(--tex-stone) 0 0 / 480px 288px, #3a352f; border: 2px solid var(--ink); box-shadow: var(--bevel-in); }
.ws-banner svg { width: 200px; height: auto; filter: drop-shadow(4px 8px 0 rgba(0, 0, 0, .45)); }
.ws-banner .banner-cloth { transform-origin: 60px 27px; animation: sway 4s ease-in-out infinite; }
.ws-skins { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ws-skins figure { text-align: center; padding: 6px 4px; background: rgba(0, 0, 0, .35); border: 1px solid #000; }
.ws-skins svg { height: 150px; width: auto; margin: 0 auto; }
.ws-skins figcaption { font: italic 15px var(--serif); color: var(--text-soft); margin-top: 4px; }
.workshop-form fieldset { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
.workshop-form legend { font-size: 17px; color: var(--gold-text); margin-bottom: 8px; padding: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 44px; padding: 8px 14px; border: 2px solid var(--ink); border-radius: 2px; background: var(--tex-grain) 0 0 / 400px 200px, var(--oak-m); color: var(--text); font: 700 16px var(--serif); box-shadow: var(--bevel-out), 0 2px 0 #0a0603; }
.chip:hover { background-color: #6b4a2a; }
.chip:active { transform: translateY(2px); }
.chip[aria-pressed="true"] { background: #c9962f; color: #1b130d; box-shadow: inset 2px 2px 0 #6e4b14, inset -2px -2px 0 #f2d488; }
.ws-note { font-size: 17px; line-height: 1.55; color: var(--parch-ink); padding: 12px 14px; background: var(--tex-fibre) 0 0 / 256px, var(--parch); border: 1px solid #8f7444; }
.cosmetics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 26px; }
.cosmetics li { position: relative; padding: 26px 18px 30px; color: #fff4d6; background: var(--tex-linen) 0 0 / 8px, #5a1d14; border: 2px solid var(--ink); box-shadow: inset 0 0 0 4px #5a1d14, inset 0 0 0 6px #b8862c, var(--drop); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 16px), 0 100%); }
.cosmetics li:nth-child(2) { background-color: #2e3d5c; box-shadow: inset 0 0 0 4px #2e3d5c, inset 0 0 0 6px #b8862c, var(--drop); }
.cosmetics li:nth-child(3) { background-color: #33452a; box-shadow: inset 0 0 0 4px #33452a, inset 0 0 0 6px #b8862c, var(--drop); }
.cosmetics li:nth-child(4) { background-color: #4a2f17; box-shadow: inset 0 0 0 4px #4a2f17, inset 0 0 0 6px #b8862c, var(--drop); }
.cosmetics h3 { font: 700 21px var(--serif); font-variant: small-caps; letter-spacing: .06em; color: var(--gold-text); }
.cosmetics p { font-size: 16px; line-height: 1.55; margin-top: 4px; color: #f6ead0; }

/* ---------- coin: the treasury ---------- */
.treasury { background: var(--tex-leather) 0 0 / 200px, #2a1410; border-top: 12px solid transparent; border-bottom: 12px solid transparent; border-image: url(assets/frame/band.svg) 12 0 round; }
.coin-grid { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 46px; align-items: center; }
.coin-plaque { padding: 28px; border: 32px solid transparent; border-image: url(assets/frame/wood.svg) 32 stretch; background: var(--tex-grain) 0 0 / 400px 200px, #1a1008; background-clip: padding-box; box-shadow: var(--drop); }
.coin-mark img { width: 100%; height: auto; }
.uses { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
.use { padding: 18px 16px; background: var(--tex-grain) 0 0 / 400px 200px, #33200f; border: 2px solid var(--ink); box-shadow: inset 0 0 0 2px #6e4b14, var(--bevel-out), var(--drop); }
.never { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 28px; align-items: center; margin-top: 30px; }
.never-list { padding: 22px 26px; }
.never-list h3 { font: 700 22px var(--serif); }
.never-list h3::first-letter { color: var(--rubric); }
.never-list li { font-size: 16px; line-height: 1.5; margin-top: 6px; color: #3e2c1a; }
.crosses li::before { background: var(--rubric); }
.never-note { font: italic 20px/1.55 var(--serif); color: #f3e6c4; padding-left: 22px; border-left: 3px double var(--gold); }

/* ---------- what comes next ---------- */
.next-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 500px); gap: 40px; align-items: start; margin-top: 36px; }
.roadmap { display: grid; counter-reset: n; }
.roadmap li { position: relative; padding: 0 0 28px 74px; counter-increment: n; }
.roadmap li::before { content: counter(n, upper-roman); position: absolute; left: 0; top: 0; width: 52px; height: 52px; display: grid; place-items: center; background: #8e1f17; color: #fbe9c4; font: 700 19px var(--serif); border: 2px solid var(--ink); border-radius: 50%; box-shadow: inset 2px 2px 0 #c1463a, inset -2px -2px 0 #4a0d08, 0 3px 0 rgba(0, 0, 0, .3); }
.roadmap li::after { content: ""; position: absolute; left: 25px; top: 56px; bottom: 4px; border-left: 2px dashed rgba(43, 29, 16, .55); }
.roadmap li:last-child::after { display: none; }
.roadmap h3 { font: 700 24px var(--serif); padding-top: 9px; }
.roadmap p { font-size: 17px; line-height: 1.6; color: #3e2c1a; margin-top: 4px; max-width: 62ch; }
.warroom { position: sticky; top: calc(var(--top-h) + 24px); }
.wr-screen { border: 24px solid transparent; border-image: url(assets/frame/iron.svg) 24 round; background: var(--tex-grain) 0 0 / 400px 200px, #33200f; background-clip: padding-box; padding: 8px; color: var(--text); box-shadow: var(--drop); }
.wr-top { display: flex; gap: 6px; flex-wrap: wrap; }
.wr-top span { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px 3px 4px; background: #120c07; border: 1px solid #000; box-shadow: var(--bevel-in); font: 700 15px var(--serif); }
.wr-top .ico { width: 18px; height: 18px; }
.wr-top .wr-day { margin-left: auto; padding: 3px 10px; color: var(--gold-text); }
.wr-body { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 10px; margin-top: 10px; }
.wr-map { border: 2px solid var(--ink); overflow: hidden; }
.wr-map svg { width: 100%; height: auto; }
.wr-side { padding: 10px 12px; background: var(--tex-fibre) 0 0 / 256px, var(--parch); color: var(--parch-ink); font-size: 14px; line-height: 1.45; }
.wr-side p + p { margin-top: 6px; }
.wr-h { font: 700 15px var(--serif); font-variant: small-caps; letter-spacing: .08em; color: var(--rubric); }
.wr-scrub { display: flex; align-items: center; gap: 10px; margin-top: 10px; font: 700 15px var(--serif); font-variant: small-caps; letter-spacing: .08em; color: var(--gold-text); }
.wr-ticks { position: relative; flex: 1; display: grid; grid-template-columns: repeat(14, 1fr); gap: 3px; }
.wr-ticks i { height: 12px; background: #4a3520; box-shadow: var(--bevel-in); }
.wr-ticks i.past { background: var(--gold); }
.wr-ticks i.siege { box-shadow: inset 0 0 0 2px var(--gold-hi); }
.wr-ticks b { position: absolute; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: #f6cf74; border: 2px solid var(--ink); box-shadow: inset -3px -3px 0 #c98a2e; }
.warroom figcaption { margin-top: 14px; font-size: 17px; line-height: 1.55; color: #3e2c1a; }
.warroom figcaption b { color: var(--parch-ink); }

/* ---------- questions: oak drawers ---------- */
.faq-wrap { max-width: 920px; }
.faq { margin-top: 30px; display: grid; gap: 12px; }
.faq details { background: var(--tex-grain) 0 0 / 400px 200px, #4a2f17; border: 2px solid var(--ink); box-shadow: var(--bevel-out), 0 4px 0 #0a0603; }
.faq summary { position: relative; padding: 16px 64px 16px 22px; font: 700 20px var(--serif); color: #fff4d6; list-style: none; text-shadow: 0 1px 0 #000; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 18px; top: 50%; width: 30px; height: 14px; margin-top: -7px; background: #2c2f31; border: 2px solid #0a0806; border-radius: 0 0 8px 8px; box-shadow: inset 1px 1px 0 #9aa1a5; }
.faq details[open] summary { border-bottom: 2px solid var(--ink); }
.faq details[open] summary::after { background: #c9962f; box-shadow: inset 1px 1px 0 #f2d488; }
.faq details p { margin: 0; padding: 16px 22px 18px; font-size: 17px; line-height: 1.65; color: var(--parch-ink); background: var(--tex-fibre) 0 0 / 256px, var(--parch); }

/* ---------- footer ---------- */
.footer { padding: 34px 0 40px; background: linear-gradient(rgba(8, 5, 2, .6), rgba(8, 5, 2, .6)), var(--tex-stone) 0 0 / 480px 288px, #2a2520; }
.footer-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.footer-logo { height: 46px; width: auto; }
.footer-line { color: var(--text-soft); font-size: 17px; max-width: 54ch; }
.footer-top { margin-left: auto; font: 700 16px var(--serif); font-variant: small-caps; letter-spacing: .08em; color: var(--gold-text); }

/* ---------- image slots ---------- */
.slot { position: relative; margin: 0; }
.slot-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slot.has-art .slot-art > svg { visibility: hidden; }

/* ---------- reduced motion ---------- */
body.rm *, body.rm *::before, body.rm *::after { animation: none !important; transition: none !important; }
body.rm .battle-sum li { opacity: 1; }
html.rm-root { scroll-behavior: auto; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- responsive ---------- */
@media (max-width: 1380px) {
  .res-wide { display: none; }
  .stage-grid { grid-template-columns: minmax(0, 1fr) 370px; }
  .hud-bottom { grid-template-columns: minmax(0, 220px) minmax(0, 1fr); }
  .panel-army { grid-column: 1 / -1; order: 3; }
  .uses { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  :root { --top-h: 76px; }
  #menu-toggle { display: inline-flex; }
  .codex { position: absolute; right: clamp(12px, 2vw, 24px); top: calc(100% + 16px); width: 290px; margin: 0; padding: 0; display: none; }
  .codex.open { display: flex; }
  .codex .scroll-rod { display: none; }
  .codex-links { flex-direction: column; align-items: stretch; width: 100%; padding: 10px; border: 2px solid #8f7444; box-shadow: 0 0 0 3px var(--oak), 0 20px 40px rgba(0, 0, 0, .6); }
  .codex a { padding: 10px 12px; font-size: 18px; border-bottom: 1px solid rgba(43, 29, 16, .2); }
  .codex a + a::before { display: none; }
  .stage-grid { grid-template-columns: 1fr; }
  .map-col { display: contents; }
  .map-frame { order: 1; }
  .command { order: 2; }
  .hud-bottom { order: 3; margin-top: 0; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); }
  .panel-army { grid-column: 1 / -1; order: 3; }
  .moves { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .move:nth-child(4) { border-left: 0; }
  .houses { grid-template-columns: 1fr; max-width: 680px; margin-left: auto; margin-right: auto; gap: 90px; }
  .units-layout { grid-template-columns: 1fr; }
  .roster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .next-grid { grid-template-columns: 1fr; }
  .warroom { position: static; max-width: 560px; }
  .triangle { max-width: 460px; }
  .resources { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cosmetics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workshop { grid-template-columns: 1fr; }
  .rules-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .season-cols { grid-template-columns: 1fr; }
  .track { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .path { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .path li::after { display: none; }
  .fair { grid-template-columns: 1fr; }
  .never { grid-template-columns: 1fr; }
  .title-screen { padding-left: 12px; padding-right: 12px; }
  .torch { display: none; }
  .ts-frame { border-width: 24px; border-image-width: 24px; }
  .slot-hero { aspect-ratio: auto; height: 300px; min-height: 0; }
  .ts-menu { position: static; transform: none; width: auto; margin: 0; border-width: 24px; border-image-width: 24px; }
}
@media (max-width: 860px) {
  :root { --top-h: 120px; }
  .topbar-row { flex-wrap: wrap; gap: 8px 10px; }
  .res { order: 3; width: 100%; justify-content: space-between; gap: 4px; }
  .res-item { flex: 1 1 0; justify-content: center; padding: 3px 6px 3px 3px; gap: 5px; }
  .res-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .res-ico { width: 28px; height: 28px; }
  .res-ico svg { width: 18px; height: 18px; }
  .top-actions { margin-left: auto; }
  .codex { top: calc(100% + 16px); }
  .map-frame { border-width: 20px; border-image-width: 20px; }
  .map-head { padding: 8px 12px 10px; }
  .cartouche h2 { font-size: 22px; }
  .map-scroll { height: 340px; }
  .realm-wrap { width: 1000px; }
  .sun-track { width: 80px; }
  .hud-bottom { grid-template-columns: minmax(0, 170px) minmax(0, 1fr); }
  .battle { position: fixed; z-index: 60; padding: 14px; }
  .battle-body { padding: 14px 16px 16px; }
  .battle-sum { grid-template-columns: 1fr; gap: 10px; }
  .battle-scene { height: 110px; }
  .moves { grid-template-columns: 1fr; }
  .move { display: grid; grid-template-columns: 64px 1fr; column-gap: 16px; padding: 18px 4px; }
  .move + .move { border-left: 0; border-top: 1px solid rgba(43, 29, 16, .35); }
  .move-n { grid-column: 1; grid-row: 1; font-size: 24px; }
  .move-ico { grid-column: 1; grid-row: 2 / 4; width: 56px; height: 56px; margin: 6px 0 0; }
  .move h3 { grid-column: 2; grid-row: 1 / 3; margin-top: 0; align-self: end; }
  .move p { grid-column: 2; grid-row: 3; }
  .day-strip span { letter-spacing: .02em; font-size: 14px; }
  .fight-sum { grid-template-columns: 1fr; gap: 10px; }
  .fight { padding: 16px; }
  .resources { grid-template-columns: 1fr; }
  .cosmetics { grid-template-columns: 1fr; }
  .coin-grid { grid-template-columns: 1fr; gap: 22px; }
  .coin-plaque { max-width: 240px; padding: 16px; }
  .uses { grid-template-columns: 1fr; }
  .tiers { grid-template-columns: 1fr; }
  .path { grid-template-columns: 1fr; }
  .rules-list { grid-template-columns: 1fr; }
  .prize-head { grid-template-columns: 1fr; border-width: 20px; border-image-width: 20px; padding: 16px; }
  .prize-seal svg { width: 80px; }
  .workshop { padding: 12px; border-width: 20px; border-image-width: 20px; }
  .workshop-view { grid-template-columns: 130px 1fr; padding: 12px; }
  .ws-banner svg { width: 130px; }
  .ws-skins svg { height: 92px; }
  .commander { grid-template-columns: 100px 1fr; }
  .lineup svg { height: 96px; }
  .lineup .unit-rider { height: 104px; }
  .house { border-width: 20px; border-image-width: 20px; }
  .house-banner { top: -64px; width: 70px; } .house-banner svg { width: 70px; }
  .houses { margin-top: 70px; gap: 84px; }
  .initial { width: 70px; height: 70px; margin-right: 12px; }
}
@media (max-width: 480px) {
  .brand-full { display: none !important; }
  .brand-mark { display: block !important; }
  .btn-iron { padding: 6px 10px; font-size: 14px; letter-spacing: .04em; }
  .stage { padding-left: 4px; padding-right: 4px; }
  .map-frame { border-width: 14px; border-image-width: 14px; }
  .hud-bottom { grid-template-columns: 1fr; }
  .panel-mini .minimap { max-width: 240px; }
  .rules { padding: 18px 16px; }
  .command { padding: 10px; }
  .cmd { padding: 14px 12px 16px; }
  .phases li { font-size: 13px; letter-spacing: 0; }
  .ph-ico { width: 36px; height: 36px; padding: 4px; }
  .track { gap: 4px; }
  .track li { font-size: 17px; }
  .track li small { display: none; }
  .roster { grid-template-columns: 1fr 1fr; padding: 10px; gap: 8px; }
  .ucard { border-width: 10px; border-image-width: 10px; }
  .ucard .u-body { padding: 8px 6px; }
  .ucard h3 { font-size: 17px; }
  .ucard dl { grid-template-columns: 1fr; }
  .workshop-view { grid-template-columns: 1fr; justify-items: center; }
  .ws-skins { width: 100%; }
  .footer-top { margin-left: 0; }
  .bcard { grid-template-columns: 68px 1fr; }
  .bcard .bld { width: 68px; }
  .rescard { grid-template-columns: 1fr 68px; }
  .rescard .vill svg { width: 68px; }
  .sheet-deckle { padding: 26px 14px; }
  .slot-hero { height: 220px; }
  .ts-menu { padding: 14px 12px 16px; }
  .ts-frame { border-width: 16px; border-image-width: 16px; }
  .ribbon span { border-width: 0 34px; border-image-width: 0 34px; font-size: 15px; letter-spacing: .1em; }
  .sec-lede { font-size: 18px; }
  .prize-head, .tier, .resources .rescard, .wr-screen { border-width: 18px; border-image-width: 18px; }
  .tabs { padding-left: 0; }
  .tabs button { padding: 8px 10px; font-size: 15px; }
  .house-head h3 { font-size: 23px; }
}
@keyframes floatUp { 0% { opacity: 0; transform: translateY(10px); } 20% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-40px); } }
.slot-unit .slot-img { object-fit: contain; object-position: 50% 100%; padding-top: 6px; }