/* Torvane site. The menu half of this file follows the game's main menu stylesheet value for value (sizes in dp at a 1080p
   reference, MN-07): bone text (#c9bfae), Cinzel at the game's three weights (900 title, 700 buttons, 500 body),
   sigils in the arena's cyan-green rune energy (#8ff5c8, glow #1fb57a), the hover mark a dry-brush smear of dark
   desaturated blood (VL-09), never ember. Palette per Docs/art/visual-language.md. */

@font-face {
  font-family: "Cinzel";
  src: url("../fonts/Cinzel-Variable.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
}
/* Generated by the game's own font builder from the blood pit rune generator (seed 7). */
@font-face {
  font-family: "Torvane Khaedr";
  src: url("../fonts/TorvaneKhaedr.woff2") format("woff2");
  font-weight: normal;
  font-display: block;
}

:root {
  /* dp: the game sets 1dp = window height / 1080. The web clamps it by width too so the column fits phones. */
  --dp: max(0.42px, min(calc(100vh / 1080), calc(100vw / 1100)));
  /* section unit: the same idea, by width */
  --u: max(0.72px, min(1px, calc(100vw / 1600)));

  --bone: #c9bfae;
  --bone-hi: #e4dac6;
  --bone-dim: #7d756a;
  --ash: #8a8073;
  --ash-dim: #6f675d;
  --grey-off: #3f3a34;
  --note: #5a534a;
  --rune: #4fbf8e;
  --rune-hi: #8ff5c8;
  --rune-mid: #5f9e83;
  --rune-glow: #1fb57a90;
  --blood: #7a1c1a;
  --black: #050404;
  --panel: #08060599;
  --line: #c9bfae30;
  --charcoal: #17181a;
  --iron: #5d636b;
  --world-ash: #9a958d;
  --world-bone: #e6dfd0;
  --woad: #4d9de0;
  --ember: #e8731e;
  --hot: #fff4dc;
  --ease-out: cubic-bezier(0.33, 1, 0.68, 1); /* the menu's cubic-out */
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--black); overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: calc(80 * var(--u)); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: "Cinzel", "Trajan Pro", Georgia, serif;
  font-weight: 500;
  color: var(--bone);
  background: transparent;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.gated { overflow: hidden; }
a { color: inherit; }
img { max-width: 100%; }
::selection { background: var(--blood); color: var(--bone-hi); }
.skip { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--black); padding: 10px 16px; }
.skip:focus { left: 10px; }
:focus-visible { outline: 1px solid #c9bfae80; outline-offset: 4px; }

/* =========================================================================================
   MENU ITEMS AND THE CIPHER WAVE (main_menu.rcss: .item, .ch, .kh, .note)
   ========================================================================================= */
.item {
  display: block;
  position: relative;
  height: calc(76 * var(--dp));
  line-height: calc(76 * var(--dp));
  padding-left: calc(52 * var(--dp));
  font-family: "Cinzel", serif;
  font-size: calc(42 * var(--dp));
  font-weight: 700;
  color: var(--bone-dim);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.14s var(--ease-out), padding-left 0.14s var(--ease-out);
  cursor: pointer;
  background: none;
  border: 0;
  margin: 0;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}
button.item { font-family: "Cinzel", serif; font-size: calc(42 * var(--dp)); font-weight: 700; letter-spacing: normal; width: 100%; -webkit-appearance: none; appearance: none; }
.item:hover, .item:focus-visible {
  padding-left: calc(62 * var(--dp));
  color: var(--bone-hi);
  background: url("../img/smear.webp") 0 0 / 100% 100% no-repeat;  /* decorator: image(smear.tga fill) */
  text-shadow: 0 calc(3 * var(--dp)) 0 #000000e0;                    /* font-effect: shadow(0dp 3dp #000000e0) */
  outline: none;
}
.label { display: inline; white-space: nowrap; }
.w { display: inline-block; white-space: nowrap; }

/* Greyed out (MN-11): no hover mark, no wave, a small note. */
.item.disabled, .item.disabled:hover, .item.disabled:focus-visible {
  padding-left: calc(52 * var(--dp));
  color: var(--grey-off);
  background: none;
  text-shadow: none;
  cursor: default;
}
.note {
  margin-left: calc(26 * var(--dp));
  font-weight: 500;
  font-size: calc(16 * var(--dp));
  letter-spacing: calc(4 * var(--dp));
  color: var(--note);
  vertical-align: middle;
  transition: color .3s;
}
.note.flash { color: var(--rune-hi); }

.ch { display: inline-block; position: relative; margin-right: calc(5 * var(--dp)); transform-origin: 50% 50%; }
.ch.space { margin-right: calc(12 * var(--dp)); }
.ch .en { display: inline; }
.ch .kh {
  position: absolute; left: 0; right: 0; top: 0;
  text-align: center;
  font-family: "Torvane Khaedr";
  font-weight: normal;
  font-size: 1.04em;
  color: var(--rune-hi);
  text-shadow: 0 0 calc(5 * var(--dp)) var(--rune-glow);  /* font-effect: glow(0dp 5dp 0dp 0dp #1fb57a90) */
  visibility: hidden;
}
.ch.sigil .en { visibility: hidden; }
.ch.sigil .kh { visibility: visible; }

/* =========================================================================================
   HERO: the main menu over the blood pit
   ========================================================================================= */
.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: calc(1000 * var(--dp));
  overflow: hidden;
  background: var(--black);
}
.pit { position: absolute; inset: 0; --px: 0; --py: 0; }
.pit-wall {
  position: absolute; inset: -3%;
  width: 106%; height: 106%;
  transform: translate3d(calc(var(--px) * -18px), calc(var(--py) * -10px), 0);
  animation: pit-in 2.4s var(--ease-out) both;
}
@keyframes pit-in { from { opacity: 0; transform: scale(1.04); } }
.emblem-glyph {
  font-family: "Torvane Khaedr";
  font-size: 150px;
  fill: #6fe0ae;
  opacity: .78;
  filter: drop-shadow(0 0 10px #1fb57a) drop-shadow(0 0 30px #1a9a66);
  animation: emblem 6s ease-in-out infinite;
}
.emblem-glyph.big { font-size: 180px; }
.b2 .emblem-glyph { animation-delay: -2s; }
.b3 .emblem-glyph { animation-delay: -4s; }
@keyframes emblem { 0%, 100% { opacity: .62; } 50% { opacity: .9; } }
.lamp { animation: flicker 2.3s steps(1) infinite; transform-box: fill-box; }
.lamp.l2 { animation-duration: 2.9s; }
@keyframes flicker { 0% { opacity: .9 } 12% { opacity: .7 } 20% { opacity: 1 } 47% { opacity: .82 } 60% { opacity: .95 } 81% { opacity: .75 } }
.shafts { mix-blend-mode: screen; animation: shafts 14s ease-in-out infinite alternate; transform-origin: 1600px 0; }
@keyframes shafts { from { opacity: .75; transform: rotate(-.6deg); } to { opacity: 1; transform: rotate(.6deg); } }

/* rune slabs on the floor (sigils 0-15 are the four slab variants, MN-03) */
.floor {
  position: absolute;
  left: 34%; right: -8%; bottom: -4%;
  height: 34%;
  perspective: 700px;
  perspective-origin: 60% 0%;
  display: flex; justify-content: center; align-items: flex-end; gap: 2.2%;
  transform: translate3d(calc(var(--px) * -34px), 0, 0);
  pointer-events: none;
}
.slab {
  flex: 0 0 19%;
  aspect-ratio: 230 / 95;
  transform: rotateX(70deg);
  transform-origin: 50% 100%;
  background: linear-gradient(#1a1817, #0d0c0b);
  box-shadow: inset 0 0 0 2px #24211e, inset 0 0 30px #000;
  display: flex; align-items: center; justify-content: center;
}
.slab span {
  font-family: "Torvane Khaedr";
  font-size: clamp(18px, 3.2vw, 64px);
  letter-spacing: .32em;
  padding-left: .32em;
  color: #59d6a0;
  text-shadow: 0 0 8px #1fb57a, 0 0 24px #1a9a66;
  opacity: .55;
  animation: emblem 7s ease-in-out infinite;
}
.slab:nth-child(2) span { animation-delay: -1.7s; }
.slab:nth-child(3) span { animation-delay: -3.4s; }
.slab:nth-child(4) span { animation-delay: -5.1s; }

.fog {
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 30% at 70% 72%, #6f829614, transparent 70%),
    linear-gradient(180deg, transparent 55%, #05040499 85%, var(--black) 100%);
  animation: fog 18s ease-in-out infinite alternate;
}
@keyframes fog { from { transform: translateX(-1.5%); } to { transform: translateX(1.5%); } }
.ash { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ash-global { position: fixed; z-index: -1; opacity: .55; }
/* shade.tga, rebuilt in CSS: the menu column near black on the left opening to the arena by mid screen, a vignette
   heavier at the bottom, a breath of red in the black (build_textures.py shade()) */
.shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(3,1.5,1.5,.9) 0%, rgba(3,1.5,1.5,.88) 22%, rgba(3,1.5,1.5,.68) 34%, rgba(3,1.5,1.5,.28) 50%, rgba(3,1.5,1.5,0) 64%),
    radial-gradient(75% 70% at 55% 45%, transparent 55%, rgba(3,1.5,1.5,.75) 115%),
    linear-gradient(180deg, transparent 70%, rgba(3,1.5,1.5,.35) 100%);
}
.grain {
  position: absolute; inset: -50%;
  opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite;
  pointer-events: none;
}
@keyframes grain { 0% { transform: translate(0,0) } 33% { transform: translate(-3%,2%) } 66% { transform: translate(2%,-3%) } 100% { transform: translate(-1%,1%) } }

/* #menu */
.menu {
  position: absolute;
  left: calc(150 * var(--dp));
  top: calc(150 * var(--dp));
  width: calc(760 * var(--dp));
  z-index: 2;
}
.title {
  display: block;
  width: calc(720 * var(--dp));
  height: calc(134 * var(--dp));
  margin: 0 0 0 calc(-14 * var(--dp));
  animation: rise 1.4s .2s var(--ease-out) both;
}
.title img { display: block; width: 100%; height: 100%; }
.title-kh {
  display: block;
  margin: calc(10 * var(--dp)) 0 0 calc(10 * var(--dp));
  font-family: "Torvane Khaedr";
  font-size: calc(36 * var(--dp));
  letter-spacing: calc(30 * var(--dp));
  line-height: 1.25;
  color: var(--rune);
  opacity: 0.75;
  text-shadow: 0 0 calc(6 * var(--dp)) #1a9a6650;
  animation: smoulder 5s ease-in-out infinite, fade 1.6s .6s both;
}
@keyframes smoulder { 0%, 100% { text-shadow: 0 0 calc(6 * var(--dp)) #1a9a6650; } 50% { text-shadow: 0 0 calc(12 * var(--dp)) #1a9a66a0; } }
.rule {
  display: block;
  margin: calc(26 * var(--dp)) 0 0 calc(4 * var(--dp));
  width: calc(520 * var(--dp));
  height: calc(2 * var(--dp));
  min-height: 1px;
  background: var(--line);
  transform-origin: 0 50%;
  animation: draw 1.2s .7s var(--ease-out) both;
}
@keyframes draw { from { transform: scaleX(0); } }
.heading {
  display: block;
  height: calc(40 * var(--dp));
  margin: calc(30 * var(--dp)) 0 0;
  font-weight: 500;
  font-size: calc(22 * var(--dp));
  letter-spacing: calc(8 * var(--dp));
  color: var(--ash);
  text-transform: uppercase;
  animation: fade 1.2s .9s both;
}
/* body.long: a menu of six or more, a size down (MN-13) */
.menu .items { margin-top: calc(36 * var(--dp)); }
.menu .item { height: calc(60 * var(--dp)); line-height: calc(60 * var(--dp)); font-size: calc(36 * var(--dp)); }
.menu .item { animation: item-in .7s var(--ease-out) both; }
.menu .item:nth-child(1) { animation-delay: 1.0s } .menu .item:nth-child(2) { animation-delay: 1.07s }
.menu .item:nth-child(3) { animation-delay: 1.14s } .menu .item:nth-child(4) { animation-delay: 1.21s }
.menu .item:nth-child(5) { animation-delay: 1.28s } .menu .item:nth-child(6) { animation-delay: 1.35s }
.menu .item:nth-child(7) { animation-delay: 1.42s }
@keyframes item-in { from { opacity: 0; transform: translateX(calc(-14 * var(--dp))); } }
@keyframes rise { from { opacity: 0; transform: translateY(calc(10 * var(--dp))); filter: blur(4px); } }
@keyframes fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .menu *, .pit *, .pit-wall { animation: none !important; } }

/* #footer */
.hero-footer, .foot {
  font-weight: 500;
  font-size: calc(18 * var(--dp));
  letter-spacing: calc(4 * var(--dp));
  color: var(--ash-dim);
  text-transform: uppercase;
  display: flex; align-items: center; gap: calc(18 * var(--dp));
}
.hero-footer { position: absolute; left: calc(154 * var(--dp)); bottom: calc(60 * var(--dp)); z-index: 2; animation: fade 1.5s 1.6s both; }
.sep { width: calc(28 * var(--dp)); height: 1px; background: var(--line); display: inline-block; }
.rated { color: var(--ash); border: 1px solid #8a807380; padding: calc(4 * var(--dp)) calc(10 * var(--dp)); letter-spacing: calc(3 * var(--dp)); }
.scroll-cue { position: absolute; left: 50%; bottom: calc(36 * var(--dp)); width: 1px; height: calc(70 * var(--dp)); z-index: 2; overflow: hidden; background: #c9bfae18; }
.scroll-cue span { position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--bone); animation: cue 2.4s ease-in-out infinite; }
@keyframes cue { to { top: 100%; } }

/* =========================================================================================
   STICKY TABS (MN-14 full-page tabs: open tab underlined in blood red)
   ========================================================================================= */
.tabs {
  position: fixed; left: 0; right: 0; top: 0; z-index: 40;
  height: calc(64 * var(--u));
  display: flex; align-items: center; gap: calc(28 * var(--u));
  padding: 0 calc(150 * var(--u));
  background: linear-gradient(#050404f0, #050404d8);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  transform: translateY(-105%);
  transition: transform .35s var(--ease-out);
}
.tabs.shown { transform: none; }
.tabs-mark { display: block; width: calc(150 * var(--u)); flex: none; }
.tabs-mark img { display: block; width: 100%; height: auto; }
.tabs-row { display: flex; flex: 1; overflow-x: auto; scrollbar-width: none; }
.tabs-row::-webkit-scrollbar { display: none; }
.item.tab, .item.tab:hover, .item.tab:focus-visible {
  display: inline-block;
  height: calc(62 * var(--u)); line-height: calc(62 * var(--u));
  padding: 0 calc(18 * var(--u));
  margin-right: calc(4 * var(--u));
  font-size: max(13px, calc(19 * var(--u)));
  border-bottom: 3px solid transparent;
  --dp: calc(0.48 * var(--u));
}
.item.tab .ch { margin-right: calc(2.5 * var(--u)); }
.item.tab .ch.space { margin-right: calc(7 * var(--u)); }
.item.tab:hover, .item.tab:focus-visible { color: var(--bone-hi); }
.item.tab.active { color: var(--bone-hi); border-bottom-color: var(--blood); }
.tab-x { flex: none; }

/* =========================================================================================
   PAGES (Settings-style full pages: big title top left, grouped rows, values in rune green)
   ========================================================================================= */
main { position: relative; overflow: hidden; }
.page {
  position: relative;
  padding: calc(150 * var(--u)) calc(150 * var(--u)) calc(120 * var(--u));
  max-width: calc(1720 * var(--u));
  margin: 0 auto;
}
.page::before {
  content: ""; position: absolute; left: calc(150 * var(--u)); top: 0;
  width: calc(520 * var(--u)); height: 1px; background: var(--line);
}
.page-head { max-width: calc(980 * var(--u)); margin-bottom: calc(70 * var(--u)); }
.group {
  display: block;
  margin: 0 0 calc(14 * var(--u));
  font-weight: 500;
  font-size: max(11px, calc(16 * var(--u)));
  letter-spacing: calc(8 * var(--u));
  color: var(--ash);
  text-transform: uppercase;
}
.page-title, .cta h2 {
  margin: 0 0 calc(28 * var(--u));
  font-weight: 700;
  font-size: max(30px, calc(64 * var(--u)));
  line-height: 1.12;
  letter-spacing: calc(10 * var(--u));
  color: var(--bone);
  text-transform: uppercase;
  text-shadow: 0 3px 0 #000000e0;
  --dp: max(0.72px, calc(64 * var(--u) / 42));
}
.page-title .ch, .cta h2 .ch { margin-right: 0; }
.page-title .ch.space, .cta h2 .ch.space { margin-right: .12em; }
.lead { font-size: max(17px, calc(25 * var(--u))); line-height: 1.6; color: var(--bone-hi); margin: 0 0 calc(18 * var(--u)); font-weight: 500; }
.sub { font-size: max(15px, calc(19 * var(--u))); line-height: 1.65; color: var(--ash); margin: 0 0 calc(18 * var(--u)); }
.fine { font-size: max(13px, calc(15 * var(--u))); line-height: 1.6; color: var(--ash-dim); letter-spacing: .04em; margin: calc(22 * var(--u)) 0 0; }
.fine.wide { margin-top: calc(50 * var(--u)); }

.cols { display: grid; grid-template-columns: 1fr 1fr; gap: calc(110 * var(--u)); align-items: start; }
.col > .group:not(:first-child) { margin-top: calc(40 * var(--u)); }

/* rows: .binding */
.rows { list-style: none; margin: 0; padding: 0; }
.row {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr); gap: calc(24 * var(--u));
  align-items: baseline;
  padding: calc(12 * var(--u)) calc(16 * var(--u)) calc(12 * var(--u)) calc(24 * var(--u));
  border-bottom: 1px solid #c9bfae14;
  font-size: max(14px, calc(19 * var(--u)));
  letter-spacing: calc(2 * var(--u));
  text-transform: uppercase;
  transition: background-color .14s var(--ease-out), padding-left .14s var(--ease-out);
}
.row:hover { background-color: #c9bfae0c; padding-left: calc(34 * var(--u)); }
.row .k { font-weight: 700; color: #b5ab9a; }
.row .v { font-weight: 500; color: var(--rune-hi); text-transform: none; letter-spacing: .03em; font-size: .92em; line-height: 1.45; }
.rows.tight .row { padding-top: calc(9 * var(--u)); padding-bottom: calc(9 * var(--u)); }

/* roles */
.roles { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(18 * var(--u)); }
.role {
  background: var(--panel);
  border-top: 2px solid var(--line);
  padding: calc(26 * var(--u)) calc(22 * var(--u)) calc(24 * var(--u));
  transition: border-color .2s, transform .3s var(--ease-out), background-color .3s;
}
.role:hover { border-top-color: var(--blood); transform: translateY(-3px); background-color: #0d0a09cc; }
.crest { width: calc(64 * var(--u)); height: calc(96 * var(--u)); fill: var(--bone); opacity: .85; display: block; margin-bottom: calc(14 * var(--u)); }
.role h3 { margin: 0; font-size: max(18px, calc(28 * var(--u))); font-weight: 700; letter-spacing: calc(6 * var(--u)); text-transform: uppercase; color: var(--bone-hi); }
.role .sil { font-size: max(11px, calc(13 * var(--u))); letter-spacing: calc(3 * var(--u)); text-transform: uppercase; color: var(--ash); margin: calc(6 * var(--u)) 0 calc(14 * var(--u)); }
.role p { margin: 0 0 calc(10 * var(--u)); font-size: max(14px, calc(17 * var(--u))); line-height: 1.5; }
.role .kh-form { font-size: max(12.5px, calc(14.5 * var(--u))); color: var(--ash); border-top: 1px solid #c9bfae14; padding-top: calc(12 * var(--u)); margin-top: calc(14 * var(--u)); }
.role .kh-form b { display: block; color: var(--rune-mid); font-weight: 700; letter-spacing: calc(3 * var(--u)); text-transform: uppercase; font-size: .85em; margin-bottom: 4px; }

/* world */
.page-world::after {
  /* the copper sun through smoke (AD-20), held far below signal brightness (VL-07) */
  content: ""; position: absolute; right: -10%; top: -6%; width: 70%; height: 80%; pointer-events: none; z-index: -1;
  background: radial-gradient(closest-side, #8a5a3426, #4a2e1a10 55%, transparent);
}
.chapters { list-style: none; margin: 0; padding: 0; }
.chapters li { display: grid; grid-template-columns: calc(70 * var(--u)) 1fr; gap: calc(20 * var(--u)); padding: calc(22 * var(--u)) 0; border-bottom: 1px solid #c9bfae14; }
.chapters .num, .pillar .num { font-weight: 900; font-size: max(20px, calc(30 * var(--u))); color: transparent; -webkit-text-stroke: 1px #8a8073a0; letter-spacing: .05em; line-height: 1.2; }
.chapters h3, .pillar h3 {
  margin: 0 0 calc(8 * var(--u));
  font-weight: 700; font-size: max(18px, calc(28 * var(--u))); letter-spacing: calc(5 * var(--u)); text-transform: uppercase; color: var(--bone-hi);
  --dp: max(0.5px, calc(28 * var(--u) / 42));
}
.chapters h3 .ch, .pillar h3 .ch, .mrows h3 .ch { margin-right: 0; }
.chapters h3 .ch.space, .pillar h3 .ch.space, .mrows h3 .ch.space { margin-right: .25em; }
.chapters p, .pillar p { margin: 0; font-size: max(15px, calc(18 * var(--u))); line-height: 1.65; color: var(--bone); }

.dossier {
  background: var(--panel);
  border: 1px solid #c9bfae1c;
  padding: calc(34 * var(--u)) calc(34 * var(--u)) calc(30 * var(--u));
  position: relative;
  overflow: hidden;
}
.dossier::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 50% at 90% 0%, #1a9a6618, transparent 70%); pointer-events: none; }
.dossier-head { margin-bottom: calc(16 * var(--u)); }
.dossier-kh { font-family: "Torvane Khaedr"; font-size: max(20px, calc(34 * var(--u))); letter-spacing: .6em; color: var(--rune); opacity: .75; text-shadow: 0 0 8px #1a9a6680; margin: 0 0 calc(10 * var(--u)); }
.dossier h3 { margin: 0; font-weight: 900; font-size: max(24px, calc(40 * var(--u))); letter-spacing: calc(8 * var(--u)); text-transform: uppercase; }
.say { margin: 4px 0 0; color: var(--ash); letter-spacing: calc(6 * var(--u)); font-size: max(12px, calc(14 * var(--u))); }
.dossier > p { font-size: max(15px, calc(18 * var(--u))); line-height: 1.6; margin: 0 0 calc(16 * var(--u)); }
.dossier .row { padding-left: 0; padding-right: 0; }
.dossier .row:hover { padding-left: calc(10 * var(--u)); }

/* combat */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(22 * var(--u)); margin-bottom: calc(90 * var(--u)); }
.pillar {
  position: relative;
  background: var(--panel);
  border-top: 2px solid var(--line);
  padding: calc(30 * var(--u)) calc(30 * var(--u)) calc(34 * var(--u));
  overflow: hidden;
  transition: border-color .2s, background-color .3s;
}
.pillar::after { /* the dry-brush smear sits under the heading on hover */
  content: ""; position: absolute; left: 0; top: calc(60 * var(--u)); width: 100%; height: calc(70 * var(--u));
  background: url("../img/smear.webp") 0 0 / 100% 100% no-repeat; opacity: 0; transition: opacity .14s; z-index: 0; pointer-events: none;
}
.pillar > * { position: relative; z-index: 1; }
.pillar:hover { border-top-color: var(--blood); background-color: #0d0a09cc; }
.pillar:hover::after { opacity: 1; }
.pillar .num { display: block; margin-bottom: calc(14 * var(--u)); }
.moves { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.moves span { border: 1px solid #c9bfae26; padding: 6px 12px; font-size: max(12px, calc(14 * var(--u))); letter-spacing: calc(3 * var(--u)); text-transform: uppercase; color: var(--rune-hi); font-weight: 500; }
.vl-line { font-size: max(16px, calc(22 * var(--u))); line-height: 1.6; margin: 0 0 calc(24 * var(--u)); }
.vl-line em { font-style: normal; color: var(--bone-hi); font-weight: 700; }
.swatches { list-style: none; margin: 0 0 calc(34 * var(--u)); padding: 0; }
.swatches li { display: grid; grid-template-columns: calc(44 * var(--u)) calc(150 * var(--u)) 1fr; align-items: center; gap: calc(16 * var(--u)); padding: calc(12 * var(--u)) 0; border-bottom: 1px solid #c9bfae14; font-size: max(14px, calc(17 * var(--u))); }
.swatches .sw { width: calc(30 * var(--u)); height: calc(30 * var(--u)); min-width: 20px; min-height: 20px; background: var(--c); display: block; }
.swatches .sw.hot { box-shadow: 0 0 14px #fff4dc, 0 0 34px #fff4dc80; } /* bloom allowed on white-hot only (VL-23) */
.swatches b { text-transform: uppercase; letter-spacing: calc(4 * var(--u)); font-weight: 700; }
.swatches span:last-child { color: var(--ash); }
.drain-demo { background: var(--panel); border-left: 2px solid var(--blood); padding: calc(24 * var(--u)) calc(28 * var(--u)); }
.drain-demo p { margin: 0 0 calc(10 * var(--u)); font-size: max(14px, calc(17 * var(--u))); line-height: 1.6; color: var(--bone); }
.drain-demo b { color: var(--bone-hi); }
.item.strike { --dp: max(0.6px, calc(0.8 * var(--u))); width: auto; display: inline-block; padding-right: calc(40 * var(--dp)); }

/* the color drain: the frame to ~20% saturation for about a tenth of a second, the struck control stays lit (VL-32) */
.drain { position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: 0; }
body.draining .drain { opacity: 1; -webkit-backdrop-filter: saturate(.2) brightness(.92); backdrop-filter: saturate(.2) brightness(.92); }
.item.lit { position: relative; z-index: 60; color: var(--hot); text-shadow: 0 0 12px #fff4dc, 0 0 2px #fff; }

/* dev log */
.road .row .v { color: var(--ash); text-transform: uppercase; letter-spacing: calc(3 * var(--u)); font-size: .8em; }
.road .row.done .v { color: var(--rune-mid); }
.road .row.now .k { color: var(--bone-hi); }
.road .row.now .v { color: var(--rune-hi); }
.road .row.now { background: linear-gradient(90deg, #7a1c1a33, transparent 70%); }
.road .row.checkpoint { padding-left: calc(48 * var(--u)); }
.road .row.checkpoint .k { color: var(--ash); font-weight: 500; letter-spacing: calc(6 * var(--u)); font-size: .8em; }
.road .row.checkpoint .v { color: var(--bone-hi); text-transform: none; letter-spacing: .03em; font-size: .92em; }
.log { list-style: none; margin: 0 0 calc(34 * var(--u)); padding: 0; border-left: 1px solid var(--line); }
.log li { position: relative; display: grid; grid-template-columns: calc(84 * var(--u)) calc(64 * var(--u)) 1fr; gap: calc(14 * var(--u)); align-items: baseline; padding: calc(14 * var(--u)) 0 calc(14 * var(--u)) calc(26 * var(--u)); }
.log li::before { content: ""; position: absolute; left: -4px; top: calc(22 * var(--u)); width: 7px; height: 7px; background: var(--black); border: 1px solid var(--ash); transform: rotate(45deg); }
.log time { font-size: max(12px, calc(14 * var(--u))); letter-spacing: calc(3 * var(--u)); color: var(--ash); text-transform: uppercase; font-weight: 700; }
.tag { font-size: max(10px, calc(12 * var(--u))); letter-spacing: calc(3 * var(--u)); text-transform: uppercase; color: var(--ash-dim); border: 1px solid #6f675d80; padding: 2px 6px; text-align: center; }
.tag.win { color: var(--rune-hi); border-color: #5f9e8380; }
.tag.fail { color: #d9b9a8; border-color: #7a1c1a; background: #7a1c1a40; }
.log p { margin: 0; font-size: max(14.5px, calc(17 * var(--u))); line-height: 1.55; }
.item.inline { display: inline-block; width: auto; padding-right: calc(30 * var(--dp)); --dp: max(0.62px, calc(0.82 * var(--u))); }

/* =========================================================================================
   MATURE: sealed behind the gate. The veil is the section's copy-shape set in Khaedr sigils, blurred.
   ========================================================================================= */
.page-mature::after {
  content: ""; position: absolute; inset: 10% -10% 0; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 40% at 30% 60%, #3a0d0c30, transparent 70%);
}
.vault { position: relative; min-height: calc(380 * var(--u)); border: 1px solid #c9bfae1c; background: var(--panel); overflow: hidden; }
.vault-veil { padding: calc(40 * var(--u)) calc(50 * var(--u)); font-family: "Torvane Khaedr"; color: var(--rune); font-size: max(18px, calc(30 * var(--u))); line-height: 1.9; letter-spacing: .25em; filter: blur(5px); opacity: .32; user-select: none; }
.vault-veil p { margin: 0; white-space: nowrap; }
.vault-lock { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(closest-side, #050404d0, #05040470); }
.vault-note { font-size: max(12px, calc(15 * var(--u))); letter-spacing: calc(10 * var(--u)); text-transform: uppercase; color: var(--ash); margin: 0 0 calc(10 * var(--u)); }
.vault-lock .item { width: auto; --dp: max(0.62px, calc(0.9 * var(--u))); padding-right: calc(52 * var(--dp)); }
.vault.open { background: transparent; border-color: transparent; min-height: 0; overflow: visible; }
.vault.open .vault-veil, .vault.open .vault-lock { display: none; }
.vault-content { animation: fade .6s both; }
.mrows { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 calc(80 * var(--u)); }
.mrows li { padding: calc(24 * var(--u)) 0; border-bottom: 1px solid #c9bfae14; }
.mrows h3 { margin: 0 0 calc(8 * var(--u)); font-weight: 700; font-size: max(17px, calc(25 * var(--u))); letter-spacing: calc(4 * var(--u)); text-transform: uppercase; color: var(--bone-hi); --dp: max(0.5px, calc(25 * var(--u) / 42)); }
.mrows p { margin: 0; font-size: max(15px, calc(18 * var(--u))); line-height: 1.6; }
.mrows q { color: var(--bone-hi); font-style: italic; }
.mature-body > .item { width: auto; display: inline-block; margin-top: calc(24 * var(--u)); --dp: max(0.6px, calc(0.8 * var(--u))); padding-right: calc(40 * var(--dp)); }

/* =========================================================================================
   CTA
   ========================================================================================= */
.cta { position: relative; padding: calc(150 * var(--u)) calc(150 * var(--u)) calc(160 * var(--u)); text-align: center; overflow: hidden; }
.cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(40% 50% at 50% 100%, #1a9a6624, transparent 70%),
    radial-gradient(60% 40% at 50% 0%, #6f82961a, transparent 70%);
}
.cta-inner { max-width: calc(1100 * var(--u)); margin: 0 auto; }
.cta-kh { font-family: "Torvane Khaedr"; color: var(--rune); opacity: .7; letter-spacing: .5em; font-size: max(16px, calc(26 * var(--u))); text-shadow: 0 0 10px #1a9a6680; margin: 0 0 calc(18 * var(--u)); }
.cta h2 { margin-bottom: calc(46 * var(--u)); }
.cta-items { display: inline-flex; flex-direction: column; align-items: stretch; text-align: left; min-width: min(100%, calc(760 * var(--u))); }
.item.big { --dp: max(0.62px, calc(1 * var(--u))); }

.foot {
  display: block; text-align: center;
  padding: calc(56 * var(--u)) 22px calc(70 * var(--u));
  border-top: 1px solid #c9bfae14;
  --dp: max(0.68px, calc(0.9 * var(--u)));
}
.foot-links { display: flex; justify-content: center; flex-wrap: wrap; gap: calc(8 * var(--u)) calc(26 * var(--u)); margin-bottom: calc(26 * var(--u)); }
.item.foot-link, .item.foot-link:hover, .item.foot-link:focus-visible {
  display: inline-block; width: auto;
  --dp: max(0.5px, calc(0.56 * var(--u)));
  padding: 0 calc(26 * var(--dp));
}
.item.foot-link:hover, .item.foot-link:focus-visible { padding-left: calc(36 * var(--dp)); padding-right: calc(16 * var(--dp)); }
.foot-line { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: calc(18 * var(--dp)); margin: 0 0 calc(22 * var(--u)); }
.foot-legal { max-width: 860px; margin: 0 auto; }
.foot-legal p { margin: 0 0 10px; font-size: max(12px, calc(13.5 * var(--u))); line-height: 1.65; letter-spacing: .03em; color: var(--ash-dim); text-transform: none; }
.foot-legal b { color: var(--ash); font-weight: 700; }
.foot a:not(.item) { color: var(--ash); text-decoration: underline; text-decoration-color: #8a807360; text-underline-offset: 3px; }
.foot a:not(.item):hover { color: var(--bone); }

/* =========================================================================================
   THE GATE, as the game's menu
   ========================================================================================= */
.gate { position: fixed; inset: 0; z-index: 80; opacity: 0; transition: opacity .25s var(--ease-out); }
.gate.open { opacity: 1; }
.gate-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(3,1.5,1.5,.96) 0%, rgba(3,1.5,1.5,.94) 30%, rgba(3,1.5,1.5,.72) 62%, rgba(3,1.5,1.5,.6) 100%),
    radial-gradient(60% 60% at 75% 50%, #1a9a6618, transparent 70%);
  -webkit-backdrop-filter: blur(10px) saturate(.6); backdrop-filter: blur(10px) saturate(.6);
}
.gate-menu {
  position: absolute; left: calc(150 * var(--dp)); top: 50%;
  transform: translateY(-50%);
  width: min(calc(760 * var(--dp)), calc(100vw - 40px));
  --dp: max(0.62px, min(calc(100vh / 1080), calc(100vw / 1100)));
}
.title-kh.small { font-size: calc(30 * var(--dp)); letter-spacing: calc(26 * var(--dp)); margin-left: calc(4 * var(--dp)); }
.gate .heading { height: auto; margin-top: calc(26 * var(--dp)); font-size: calc(26 * var(--dp)); color: var(--bone); animation: none; }
.gate-text { margin: calc(10 * var(--dp)) 0 0; font-size: max(15px, calc(20 * var(--dp))); line-height: 1.6; color: var(--ash); max-width: calc(600 * var(--dp)); }
.gate .items { margin-top: calc(30 * var(--dp)); }
.gate .item { height: calc(62 * var(--dp)); line-height: calc(62 * var(--dp)); font-size: calc(34 * var(--dp)); } /* body.setup size */
.dob-fields { display: flex; gap: calc(18 * var(--dp)); margin: calc(30 * var(--dp)) 0 0 calc(52 * var(--dp)); }
.dob-fields label { display: flex; flex-direction: column; gap: 6px; }
.dob-fields span { font-size: max(11px, calc(14 * var(--dp))); letter-spacing: calc(5 * var(--dp)); text-transform: uppercase; color: var(--ash); }
.dob-fields input {
  width: calc(110 * var(--dp)); min-width: 64px;
  background: #2a2622; border: 0; border-bottom: 2px solid var(--rune-mid);
  color: var(--rune-hi); font-family: "Cinzel", serif; font-weight: 700; font-size: max(18px, calc(30 * var(--dp)));
  letter-spacing: calc(2 * var(--dp)); padding: 6px 10px; text-align: center;
}
.dob-fields label:last-child input { width: calc(150 * var(--dp)); min-width: 86px; }
.dob-fields input:focus { outline: none; border-bottom-color: var(--rune-hi); background: #322d28; }
.dob-fields input::placeholder { color: #5a534a; }
.dob-msg { min-height: 1.4em; margin: calc(14 * var(--dp)) 0 0 calc(52 * var(--dp)); color: #d9b9a8; font-size: max(13px, calc(16 * var(--dp))); letter-spacing: .04em; }
.gate-foot { margin: calc(30 * var(--dp)) 0 0 calc(4 * var(--dp)); font-size: max(11px, calc(14 * var(--dp))); letter-spacing: calc(4 * var(--dp)); text-transform: uppercase; color: var(--ash-dim); }

/* =========================================================================================
   reveal
   ========================================================================================= */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.js .reveal.in { opacity: 1; transform: none; }

/* =========================================================================================
   small screens
   ========================================================================================= */
@media (max-width: 1100px) {
  .cols { grid-template-columns: 1fr; gap: calc(70 * var(--u)); }
  .pillars { grid-template-columns: 1fr; }
  .mrows { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  :root { --dp: max(0.5px, calc(100vw / 860)); }
  .menu { left: 22px; top: 90px; width: calc(100vw - 44px); }
  .title { width: min(100%, calc(720 * var(--dp))); height: auto; aspect-ratio: 1633 / 304; }
  .hero-footer { left: 24px; bottom: 28px; }
  .hero { min-height: 640px; }
  .page, .cta { padding-left: 22px; padding-right: 22px; }
  .page::before { left: 22px; }
  .tabs { padding: 0 12px; gap: 10px; }
  .tabs-mark { width: 92px; }
  .tab-x { display: none !important; }
  .roles { grid-template-columns: 1fr; }
  .row { grid-template-columns: 1fr; gap: 2px; padding-left: 4px; }
  .row:hover { padding-left: 10px; }
  .log li { grid-template-columns: 64px 1fr; }
  .log li p { grid-column: 1 / -1; }
  .swatches li { grid-template-columns: 30px 90px 1fr; }
  .vault-veil { font-size: 16px; }
  .floor { left: 0; right: -30%; }
  .gate-menu { left: 20px; }
}

/* rune slab glyph rows in the pit floor */
.slab-glyph {
  font-family: "Torvane Khaedr";
  font-size: 34px;
  letter-spacing: 16px;
  fill: #59d6a0;
  opacity: .62;
  filter: drop-shadow(0 0 4px #1fb57a) drop-shadow(0 0 12px #1a9a66);
  animation: emblem 7s ease-in-out infinite;
}
.slabs g:nth-child(2) .slab-glyph { animation-delay: -1.7s; }
.slabs g:nth-child(3) .slab-glyph { animation-delay: -3.4s; }
.slabs g:nth-child(4) .slab-glyph { animation-delay: -5.1s; }
.emblem-glyph { font-size: 120px; }
.emblem-glyph.big { font-size: 150px; }

/* section sigil watermark: the section's initial in the Khaedr cipher */
.mark {
  position: absolute; right: calc(110 * var(--u)); top: calc(90 * var(--u));
  font-family: "Torvane Khaedr"; font-size: calc(560 * var(--u)); line-height: 1;
  color: #1a9a66; opacity: .055; pointer-events: none; user-select: none; z-index: -1;
  text-shadow: 0 0 60px #1fb57a;
  animation: mark 9s ease-in-out infinite;
}
.page-mature .mark { color: #7a1c1a; text-shadow: none; --mo: .1; }
@keyframes mark { 0%, 100% { opacity: calc(var(--mo, .05) * .7); } 50% { opacity: var(--mo, .05); } }
.cols-game { grid-template-columns: .85fr 1.15fr; }
.seal {
  font-family: "Torvane Khaedr"; font-size: max(70px, calc(120 * var(--u))); line-height: 1;
  color: var(--rune); text-shadow: 0 0 14px #1fb57a, 0 0 40px #1a9a66; opacity: .85; margin-bottom: calc(10 * var(--u));
  animation: emblem 5s ease-in-out infinite;
}
.vault-lock .item { --dp: max(0.7px, calc(1 * var(--u))); }
.item.strike { --dp: max(0.68px, calc(0.95 * var(--u))); }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14%; background: linear-gradient(transparent, var(--black)); pointer-events: none; z-index: 1; }
@media (max-width: 760px) { .mark { font-size: 260px; right: -20px; top: 40px; } }
@media (max-width: 1100px) { .cols-game { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .menu .item.disabled { height: auto; line-height: 1.25; padding-top: 6px; padding-bottom: 6px; }
  .menu .item.disabled .note { display: block; margin: 2px 0 0; }
}
@media (max-width: 760px) {
  .shade { background: linear-gradient(90deg, rgba(3,1.5,1.5,.85), rgba(3,1.5,1.5,.5) 80%), linear-gradient(180deg, transparent 60%, rgba(3,1.5,1.5,.6)); }
}

/* content warnings (gate and mature fragment) */
.gate-warn, .mature-warn {
  margin: calc(14 * var(--dp)) 0 0; padding: calc(10 * var(--dp)) calc(16 * var(--dp));
  border-left: 2px solid var(--blood); background: #7a1c1a26;
  font-size: max(14px, calc(19 * var(--dp))); line-height: 1.55; color: var(--bone-hi); max-width: calc(640 * var(--dp));
}
.mature-warn { --dp: max(0.75px, var(--u)); margin: 0 0 calc(10 * var(--u)); max-width: none; }

/* =========================================================================================
   LEGAL PAGE: a Settings-style full page (MN-14): title top left, one column, Back bottom left
   ========================================================================================= */
.legal-top { display: flex; align-items: center; gap: 24px; padding: calc(40 * var(--u)) calc(150 * var(--u)) 0; }
.legal-top a.mark-link { display: block; width: max(120px, calc(190 * var(--u))); }
.legal-top a.mark-link img { display: block; width: 100%; height: auto; }
.legal { position: relative; max-width: calc(1100 * var(--u)); padding: calc(80 * var(--u)) calc(150 * var(--u)) calc(60 * var(--u)); }
.legal .page-title { font-size: max(28px, calc(56 * var(--u))); }
.legal .eff { font-size: max(12px, calc(15 * var(--u))); letter-spacing: calc(5 * var(--u)); text-transform: uppercase; color: var(--ash); margin: 0 0 calc(40 * var(--u)); }
.legal h2 {
  margin: calc(46 * var(--u)) 0 calc(12 * var(--u)); font-weight: 700; font-size: max(17px, calc(24 * var(--u)));
  letter-spacing: calc(5 * var(--u)); text-transform: uppercase; color: var(--bone-hi);
  --dp: max(0.5px, calc(24 * var(--u) / 42));
}
.legal h2 .ch { margin-right: 0; } .legal h2 .ch.space { margin-right: .25em; }
.legal p, .legal li { font-size: max(15px, calc(18.5 * var(--u))); line-height: 1.7; color: var(--bone); }
.legal p { margin: 0 0 calc(14 * var(--u)); }
.legal ul { margin: 0 0 calc(14 * var(--u)); padding-left: 1.2em; }
.legal li { margin-bottom: 6px; }
.legal li::marker { color: var(--rune-mid); }
.legal a:not(.item) { color: var(--rune-hi); text-decoration: underline; text-decoration-color: #8ff5c860; text-underline-offset: 3px; }
.legal a:not(.item):hover { text-decoration-color: var(--rune-hi); }
.legal .rows { margin: calc(10 * var(--u)) 0 calc(18 * var(--u)); }
.legal .back { display: inline-block; width: auto; margin-top: calc(50 * var(--u)); --dp: max(0.68px, calc(0.85 * var(--u))); padding-left: calc(24 * var(--dp)); padding-right: calc(40 * var(--dp)); }
.legal .back:hover, .legal .back:focus-visible { padding-left: calc(34 * var(--dp)); }
.legal .mark { position: fixed; top: 16vh; right: 6vw; }
.legal-body { position: relative; overflow: hidden; min-height: 100vh; }
@media (max-width: 760px) { .legal, .legal-top { padding-left: 22px; padding-right: 22px; } .legal .mark { right: -40px; } }
.legal code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .85em; color: var(--rune-hi); background: #2a2622; padding: 1px 6px; }