/* Fonts: Marcellus, Alegreya Sans and JetBrains Mono (SIL Open Font License), latin subset, self-hosted. */
@font-face { font-family: 'Alegreya Sans'; font-style: italic; font-weight: 400; font-display: swap; src: url('../art/launcher/fonts/alegreya-sans-400i.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Alegreya Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../art/launcher/fonts/alegreya-sans-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Alegreya Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('../art/launcher/fonts/alegreya-sans-500.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Alegreya Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('../art/launcher/fonts/alegreya-sans-700.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Alegreya Sans'; font-style: normal; font-weight: 800; font-display: swap; src: url('../art/launcher/fonts/alegreya-sans-800.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500 700; font-display: swap; src: url('../art/launcher/fonts/jetbrains-mono.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Marcellus'; font-style: normal; font-weight: 400; font-display: swap; src: url('../art/launcher/fonts/marcellus-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Layout: a game launcher. Class rail on the left, the chosen class's living
   Forever zone filling the window, reading column on the scene's dark side,
   the "Before you play" tracker on the right, launcher status bar along the bottom. */
:root {
  color-scheme: dark;
  --ink: #0d0a07;
  --leather: #1b140e;
  --leather-2: #241a12;
  --leather-3: #30231a;
  --rim: #5e4730;
  --rim-hi: #9c7a4a;
  --gold: #ffd100;
  --gold-2: #d9b25e;
  --text: #f1e8d6;
  --text-2: #cdbd9c;
  --text-3: #b3a182;
  --ok: #5ccd5c;
  --warn: #f0a742;
  --bad: #ff5b47;
  --health: #20b820;
  --mana: #3a68f0;
  --rage: #d23a2c;
  --energy: #e6cf30;
  --tip: rgba(7, 8, 22, .96);
  --tip-rim: #6f728c;
  --class: #d9b25e;
  --font-display: "Marcellus", "Trajan Pro", "Palatino Linotype", Georgia, serif;
  --font-ui: "Alegreya Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --top: 56px;
  --status: 56px;
  /* the game's outlined numbers: a 1px black edge, so white text reads on any bar or icon */
  --outline: -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, 0 0 2px #000;
}

html { height: 100%; box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
body {
  height: 100%; margin: 0; background: var(--ink); color: var(--text);
  font: 400 15px/1.5 var(--font-ui); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow: hidden;
}
img { max-width: 100%; }
button { font: inherit; color: inherit; }
a { color: var(--gold-2); }
:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
h1, h2, h3 { text-wrap: balance; margin: 0; font-weight: 400; }
p { margin: 0; }

/* ---------- shell ---------- */
.app {
  height: 100%;
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  grid-template-rows: var(--top) minmax(0, 1fr) auto;
  grid-template-areas: "top top" "rail stage" "status status";
}

.topbar {
  grid-area: top; position: relative; z-index: 20;
  display: flex; align-items: center; gap: 28px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  background: linear-gradient(#1f170f, #130e0a);
  border-bottom: 1px solid var(--rim);
  box-shadow: inset 0 -1px 0 rgba(255, 209, 0, .07), 0 6px 18px rgba(0, 0, 0, .45);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); flex: none; }
.brand svg { width: 26px; height: 30px; }
.brand span { font: 400 21px/1 var(--font-display); letter-spacing: .02em; }
.nav { display: flex; gap: 4px; height: 100%; }
.nav button {
  background: none; border: 0; cursor: pointer; padding: 0 12px; height: 100%;
  font: 500 15px var(--font-ui); color: var(--text-2); position: relative;
  transition: color .15s;
}
.nav button:hover { color: var(--text); }
.nav button[aria-current="page"] { color: var(--gold); }
.nav button[aria-current="page"]::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; background: var(--gold);
}
.nav .count {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px;
  border-radius: 9px; background: #a42715; color: var(--gold); font: 700 11px var(--font-ui); vertical-align: 1px;
}
/* Six items: closer together between the phone layout and wide screens so they stay on one line. */
@media (max-width: 1180px) {
  .nav { gap: 0; }
  .nav button { padding: 0 8px; }
  .nav button[aria-current="page"]::after { left: 8px; right: 8px; }
}
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: none; }
.icon-btn {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--rim-hi); background: linear-gradient(#33261a, #1d150e); color: var(--gold-2);
  font: 700 15px var(--font-ui); transition: filter .15s;
}
.icon-btn:hover { filter: brightness(1.2); }
.menu-btn { display: none; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 700 15px/1 var(--font-ui); letter-spacing: .01em; padding: 10px 18px; min-height: 40px;
  border-radius: 6px; border: 1px solid var(--rim-hi); cursor: pointer; text-decoration: none;
  background: linear-gradient(#34271b, #1d150e); color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255, 220, 160, .12), 0 2px 0 rgba(0, 0, 0, .5);
  transition: filter .15s, transform .1s;
}
.btn:hover { filter: brightness(1.18); }
.btn:active { transform: translateY(1px); filter: brightness(.95); }
.btn-red {
  background: linear-gradient(180deg, #ad2a16 0%, #7d1a0c 55%, #5c1107 100%);
  border-color: #cfa24f; color: var(--gold); text-shadow: 0 1px 0 #000;
  box-shadow: inset 0 1px 0 rgba(255, 196, 120, .3), inset 0 -2px 6px rgba(0, 0, 0, .35), 0 2px 0 rgba(0, 0, 0, .55);
}
.btn-quiet { background: none; border-color: transparent; box-shadow: none; color: var(--text-2); padding-inline: 10px; }
.btn-quiet:hover { color: var(--text); filter: none; }
.btn[disabled], .btn[aria-disabled="true"] { filter: grayscale(.85) brightness(.72); cursor: not-allowed; transform: none; }
.btn-sm { min-height: 32px; padding: 7px 12px; font-size: 14px; }

/* ---------- class rail ---------- */
.rail {
  grid-area: rail; z-index: 10; overflow-y: auto; scrollbar-width: none;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding-block: 16px; padding-left: env(safe-area-inset-left, 0px);
  background: linear-gradient(90deg, #110c08, #18120c);
  border-right: 1px solid var(--rim);
  box-shadow: inset -1px 0 0 rgba(255, 209, 0, .05);
}
.rail-btn {
  width: 52px; height: 52px; flex: none; position: relative; padding: 0; cursor: pointer;
  border: 1px solid #000; border-radius: 9px; background: #000;
  box-shadow: 0 0 0 1px #3d2e1f; transition: box-shadow .25s var(--ease), transform .25s var(--ease);
}
.rail-btn img { width: 100%; height: 100%; border-radius: 8px; display: block; filter: saturate(.8) brightness(.78); transition: filter .2s; }
.rail-btn:hover img, .rail-btn[aria-current="true"] img { filter: none; }
.rail-btn[aria-current="true"] { box-shadow: 0 0 0 2px var(--c); transform: scale(1.06); }
.rail-home { border-radius: 50%; background: radial-gradient(#2a1f15, #120d09); display: grid; place-items: center; }
.rail-home svg { width: 24px; height: 28px; }
.rail-home[aria-current="true"] { box-shadow: 0 0 0 2px var(--gold-2); }
.rail-sep { width: 28px; height: 1px; background: var(--rim); flex: none; margin: 2px 0; }
.pip {
  position: absolute; right: -4px; bottom: -4px; width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid #120d09; background: #6d604c;
}
.pip[data-s="testing"] { background: var(--warn); }
.pip[data-s="live"] { background: var(--ok); }

/* ---------- stage + living scene ---------- */
.stage { grid-area: stage; position: relative; overflow: hidden; isolation: isolate; }
.scene { position: absolute; inset: 0; z-index: -1; background: #050403; overflow: hidden; }
.scene video, .scene .poster {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 62% 50%);
  opacity: 0; transition: opacity 1.2s var(--ease);
}
.scene .on { opacity: 1; }
.scene-shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(11, 8, 5, .95) 0%, rgba(11, 8, 5, .86) 28%, rgba(11, 8, 5, .5) 50%, rgba(11, 8, 5, .14) 66%, rgba(11, 8, 5, .2) 78%, rgba(11, 8, 5, .7) 100%),
    linear-gradient(0deg, rgba(11, 8, 5, .85) 0%, rgba(11, 8, 5, 0) 26%),
    linear-gradient(180deg, rgba(11, 8, 5, .5) 0%, rgba(11, 8, 5, 0) 16%);
}
.scene-credit { margin-top: 22px; font: 500 12px/1.4 var(--font-ui); color: var(--text-3); text-shadow: 0 1px 2px #000; }
.scene-credit a { color: var(--text-2); }
/* Credits: who made it, how to support it, and the Blizzard notice. Plain text, no footer grid. */
.colophon { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(94, 71, 48, .6); display: grid; gap: 6px; font: 500 13px/1.45 var(--font-ui); color: var(--text-3); text-shadow: 0 1px 2px #000; }
.colophon a { color: var(--gold-2); }
.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--gold-2); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.linkish:hover, .colophon a:hover { color: var(--gold); }
.sheet-note { color: var(--text-2); font-size: 14px; margin: 0 0 16px; max-width: 40em; }
.stage-grid { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) 316px; }
.content { overflow-y: auto; overflow-x: hidden; padding: 44px 40px 56px max(36px, 3.2vw); scrollbar-width: thin; scrollbar-color: var(--rim) transparent; }
.content-inner { max-width: 780px; }
.side {
  overflow-y: auto; scrollbar-width: none; padding: 30px max(16px, env(safe-area-inset-right, 0px)) 24px 22px;
  background: linear-gradient(90deg, rgba(11, 8, 5, 0) 0, rgba(11, 8, 5, .86) 20px, rgba(11, 8, 5, .9) 100%);
}

.view { display: none; }
.view.on { display: block; }

/* ---------- home ---------- */
.home-title {
  font: 400 clamp(54px, 7.2vw, 104px)/.92 var(--font-display); letter-spacing: -.005em; margin: 10px 0 18px;
  color: var(--text); text-shadow: 0 2px 0 rgba(0, 0, 0, .55), 0 0 40px rgba(0, 0, 0, .7);
}
.lede { font-size: 19px; line-height: 1.5; color: var(--text); max-width: 34em; text-shadow: 0 1px 3px #000; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.board { margin-top: 44px; }
.board h2, .section-title { font: 400 24px var(--font-display); color: var(--text); text-shadow: 0 1px 2px #000; }
.board p.sub { color: var(--text-2); margin-top: 4px; }
.roster { margin-top: 16px; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 10px; max-width: 760px; }
.roster button {
  display: grid; justify-items: center; gap: 6px; padding: 10px 2px 8px; cursor: pointer;
  background: rgba(20, 14, 9, .72); border: 1px solid rgba(94, 71, 48, .8); border-radius: 8px;
  transition: border-color .2s, background-color .2s;
}
.roster button:hover { border-color: var(--c); background: rgba(36, 26, 18, .88); }
.roster img { width: 42px; height: 42px; border-radius: 6px; }
.roster .nm { font: 600 13px var(--font-ui); color: var(--c); }
.roster .st { font: 500 12px var(--font-ui); color: var(--text-3); }
.roster .st[data-s="testing"] { color: var(--warn); }
.legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px; font-size: 13px; color: var(--text-2); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; background: #6d604c; }
.legend i[data-s="testing"] { background: var(--warn); }
.legend i[data-s="live"] { background: var(--ok); }

/* ---------- class view ---------- */
.class-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px; align-items: center; }
.crest { width: 84px; height: 84px; border-radius: 12px; overflow: hidden; border: 1px solid #000; box-shadow: 0 0 0 2px var(--class), 0 10px 30px rgba(0, 0, 0, .6); }
.crest img { width: 100%; height: 100%; display: block; }
.class-name {
  font: 400 clamp(52px, 6.4vw, 92px)/.95 var(--font-display); color: var(--class);
  text-shadow: 0 2px 0 rgba(0, 0, 0, .6), 0 0 30px rgba(0, 0, 0, .65);
}
.class-tag { font-size: 18px; line-height: 1.5; margin-top: 18px; max-width: 36em; text-shadow: 0 1px 3px #000; }

.tabs { display: flex; gap: 4px; margin-top: 28px; border-bottom: 1px solid var(--rim-hi); padding-left: 10px; }
.tab {
  position: relative; top: 1px; cursor: pointer; text-align: left;
  padding: 9px 18px 8px; border: 1px solid var(--rim); border-bottom-color: var(--rim-hi); border-radius: 9px 9px 0 0;
  background: linear-gradient(#251b12, #170f0a); color: var(--text-2);
  font: 600 15px/1.25 var(--font-ui); transition: color .15s, background-color .15s;
}
.tab small { display: block; font: 500 12px var(--font-ui); color: var(--text-3); }
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] { color: var(--gold); background: linear-gradient(#3b2b1c, #261b12); border-color: var(--rim-hi); border-bottom-color: #261b12; }
.tab[aria-selected="true"] small[data-s="testing"] { color: var(--warn); }

.panel {
  position: relative; padding: 22px 24px 24px;
  background: linear-gradient(180deg, rgba(38, 27, 18, .95), rgba(24, 17, 11, .95));
  border: 1px solid var(--rim-hi); border-top: 0; border-radius: 0 0 10px 10px;
  box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 220, 160, .05);
}
.rot-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: start; }
.rot-name { font: 400 26px/1.15 var(--font-display); color: var(--text); }
.facts { margin-top: 8px; color: var(--text-2); display: grid; gap: 3px; font-size: 15px; }
.facts code, .mono { font: 500 13px var(--font-mono); color: var(--text); background: rgba(0, 0, 0, .35); padding: 1px 6px; border-radius: 4px; }
.state-line { margin-top: 12px; display: flex; align-items: center; gap: 8px; font-weight: 600; }
.state-dot { width: 10px; height: 10px; border-radius: 50%; background: #6d604c; flex: none; }
.state-dot[data-s="testing"] { background: var(--warn); }
.state-dot[data-s="live"] { background: var(--ok); }
.state-dot[data-s="update"] { background: var(--gold); }
.state-dot[data-s="error"] { background: var(--bad); }
.install { display: grid; justify-items: end; gap: 8px; min-width: 190px; }
.install .why { font-size: 13px; color: var(--text-3); text-align: right; max-width: 15em; }
.rot-links { display: flex; flex-wrap: wrap; gap: 6px 4px; margin-top: 14px; margin-left: -10px; }
.notice {
  margin-top: 16px; padding: 12px 14px; border-radius: 6px; font-size: 14px;
  background: rgba(240, 167, 66, .1); border: 1px solid rgba(240, 167, 66, .45); color: var(--text);
}
.notice b { color: var(--warn); }
.empty { padding: 6px 0 2px; }
.empty h3 { font: 400 22px var(--font-display); }
.empty p { color: var(--text-2); margin-top: 6px; max-width: 34em; }

/* ---------- how it plays ---------- */
.play { margin-top: 30px; }
.play-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 20px; }
.play-head p { color: var(--text-2); font-size: 14px; margin-top: 2px; max-width: 36em; text-shadow: 0 1px 2px #000; }
.spec-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.spec-tabs button {
  cursor: pointer; padding: 6px 12px; border-radius: 6px; border: 1px solid var(--rim);
  background: rgba(20, 14, 9, .8); color: var(--text-2); font: 600 14px var(--font-ui);
}
.spec-tabs button[aria-pressed="true"] { color: var(--gold); border-color: var(--rim-hi); background: rgba(48, 35, 24, .95); }
.spec-tabs .rec { font: 500 11px var(--font-ui); color: var(--ok); margin-left: 6px; }
.arena {
  margin-top: 14px; padding: 18px; border-radius: 10px;
  background: linear-gradient(180deg, rgba(14, 10, 7, .9), rgba(10, 7, 5, .94));
  border: 1px solid var(--rim); box-shadow: inset 0 0 0 1px rgba(255, 209, 0, .03);
}
.frames { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 22px; }
.unit { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 10px; align-items: center; }
.portrait { width: 46px; height: 46px; border-radius: 50%; overflow: hidden; border: 2px solid var(--rim-hi); background: #000; position: relative; }
.portrait img { width: 100%; height: 100%; display: block; }
.unit-name { display: flex; justify-content: space-between; gap: 8px; font: 600 14px var(--font-ui); }
.unit-name small { color: var(--text-3); font-weight: 500; }
.bar { height: 15px; margin-top: 4px; position: relative; border: 1px solid #000; background: rgba(0, 0, 0, .65); border-radius: 2px; overflow: hidden; box-shadow: 0 0 0 1px rgba(94, 71, 48, .7); }
.bar.thin { height: 10px; }
.bar > i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--v, 100) * 1%); background: var(--fill, var(--health)); transition: width .18s linear; }
.bar > i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 55%); }
.bar > b { position: absolute; inset: 0; display: grid; place-items: center; font: 700 11px var(--font-ui); color: #fff; text-shadow: var(--outline); }
.bar .line { position: absolute; top: -2px; bottom: -2px; width: 2px; left: calc(var(--at) * 1%); background: var(--gold); }
.auras { display: flex; gap: 4px; min-height: 26px; margin-top: 6px; flex-wrap: wrap; }
.aura { width: 24px; height: 24px; position: relative; border: 1px solid #000; border-radius: 3px; overflow: hidden; }
.aura img { width: 100%; height: 100%; display: block; }
.aura b { position: absolute; left: 0; right: 0; bottom: -1px; text-align: center; font: 700 9px var(--font-ui); color: #fff; text-shadow: var(--outline); }
.aura.debuff { box-shadow: 0 0 0 1px #b81c1c; }
.cps { display: flex; gap: 4px; margin-top: 5px; }
.cps i { width: 12px; height: 12px; border-radius: 50%; background: #2a1f15; border: 1px solid #000; }
.cps i.on { background: radial-gradient(circle at 40% 35%, #ffef9a, #e3a400); }
.regen { display: flex; align-items: center; gap: 8px; margin-top: 6px; font: 600 12px var(--font-ui); color: var(--text-3); min-height: 20px; }
.regen svg { width: 18px; height: 18px; flex: none; }
.regen.on { color: #8fb4ff; }

.bar-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 16px; }
.actionbar {
  display: flex; gap: 6px; padding: 7px; max-width: 100%; overflow-x: auto;
  background: linear-gradient(#1a130c, #0e0a06); border: 1px solid var(--rim); border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(255, 220, 160, .06), 0 6px 16px rgba(0, 0, 0, .4);
}
.ab {
  width: 50px; height: 50px; flex: none; position: relative; border: 1px solid #000; border-radius: 4px; background: #000; padding: 0;
  box-shadow: 0 0 0 1px #3d2e1f; cursor: help; transition: box-shadow .2s;
}
.ab img { width: 100%; height: 100%; display: block; border-radius: 3px; }
.ab .kb { position: absolute; top: 1px; right: 4px; font: 700 12px var(--font-ui); color: #fff; text-shadow: var(--outline); z-index: 3; }
.ab .cd { position: absolute; inset: 0; z-index: 1; border-radius: 3px; background: conic-gradient(transparent calc(var(--e, 1) * 360deg), rgba(0, 0, 0, .74) 0); }
.ab .cdn { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; font: 700 17px var(--font-ui); color: #fff; text-shadow: var(--outline); }
.ab.next { box-shadow: 0 0 0 2px var(--gold), 0 0 16px rgba(255, 209, 0, .55); }
.ab.press::after { content: ""; position: absolute; inset: 0; z-index: 4; border-radius: 3px; background: radial-gradient(circle, rgba(255, 244, 196, .75), rgba(255, 210, 90, 0) 70%); animation: press .38s ease-out forwards; }
.ab.lit::before {
  content: ""; position: absolute; inset: -4px; z-index: 0; border-radius: 6px; pointer-events: none;
  background: conic-gradient(from var(--ang, 0deg), #ffe066, rgba(255, 224, 102, 0) 25%, #ffe066 50%, rgba(255, 224, 102, 0) 75%, #ffe066);
  animation: ants 1.1s linear infinite;
}
.ab.dim img { filter: grayscale(1) brightness(.45); }
.ab.oom img { filter: brightness(.55) sepia(.3) hue-rotate(185deg) saturate(2.2); }
.ab.wand { box-shadow: 0 0 0 1px #3d2e1f; }
.ab.wand.firing { box-shadow: 0 0 0 2px #b9f0ff; }
@keyframes press { from { opacity: 1; } to { opacity: 0; } }
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes ants { to { --ang: 360deg; } }

.controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.now { margin-top: 16px; display: grid; gap: 8px; }
.now-line { display: flex; align-items: baseline; gap: 12px; min-height: 30px; flex-wrap: wrap; }
.now-spell { font: 400 22px var(--font-display); color: var(--gold); text-shadow: 0 1px 2px #000; }
.now-why { font-size: 16px; color: var(--text); }
.castbar { height: 20px; position: relative; border: 1px solid #000; border-radius: 3px; background: rgba(0, 0, 0, .7); box-shadow: 0 0 0 1px #6b5232; overflow: hidden; max-width: 420px; }
.castbar > i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--v, 0) * 1%); background: linear-gradient(#ffd54a, #c98800); }
.castbar.chan > i { background: linear-gradient(#6fe86a, #1d8f1a); }
.castbar.done > i { background: linear-gradient(#6fe86a, #1d8f1a); width: 100%; }
.castbar.fail > i { background: linear-gradient(#ff6a55, #a3150c); width: 100%; }
.castbar > em { position: absolute; top: -6px; bottom: -6px; width: 14px; left: calc(var(--v, 0) * 1% - 7px); background: radial-gradient(closest-side, rgba(255, 255, 235, .95), rgba(255, 255, 235, 0)); }
.castbar > b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; font: 600 12px var(--font-ui); color: #fff; text-shadow: 0 1px 1px #000; }
.castbar.idle { opacity: .45; }

.lines { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px 26px; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(94, 71, 48, .6); }
.slider { display: grid; gap: 6px; }
.slider label { font: 600 14px var(--font-ui); display: flex; justify-content: space-between; gap: 10px; }
.slider label output { color: var(--gold); font-variant-numeric: tabular-nums; }
.slider small { color: var(--text-3); font-size: 12px; }
input[type="range"] { width: 100%; accent-color: var(--gold-2); }
/* Touch: a finger-sized hit area for sliders and folds */
@media (pointer: coarse), (max-width: 900px) {
  input[type="range"] { height: 32px; }
  details > summary { padding-block: 8px; }
}
.toggle { display: flex; align-items: center; gap: 10px; font: 600 14px var(--font-ui); cursor: pointer; }
.toggle input { width: 18px; height: 18px; accent-color: var(--gold-2); }

.log { margin-top: 16px; display: flex; gap: 3px; overflow-x: auto; padding: 6px 2px 10px; min-height: 60px; scrollbar-width: thin; scrollbar-color: var(--rim) transparent; }
.log-item { flex: none; width: 32px; display: grid; justify-items: center; gap: 2px; animation: drop .3s var(--ease) both; }
.log-item img { width: 30px; height: 30px; border-radius: 3px; border: 1px solid #000; }
.log-item span { font: 600 10px var(--font-ui); color: var(--text-3); font-variant-numeric: tabular-nums; }
.log-item.wand img { box-shadow: 0 0 0 1px #8fd8ff; }
.log-mark { flex: none; align-self: stretch; width: 2px; margin: 0 6px; background: var(--gold); position: relative; }
.log-mark span { position: absolute; top: -2px; left: 6px; white-space: nowrap; font: 600 11px var(--font-ui); color: var(--gold); }
@keyframes drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.result { margin-top: 14px; padding: 14px 16px; border-radius: 8px; background: rgba(92, 205, 92, .08); border: 1px solid rgba(92, 205, 92, .4); display: grid; gap: 6px; }
.result h4 { margin: 0; font: 400 20px var(--font-display); color: var(--ok); }
.result p { color: var(--text); }
.result .vs { color: var(--text-2); }
.prio { margin-top: 16px; display: grid; gap: 8px; }
.prio li { display: grid; grid-template-columns: 22px 34px minmax(0, 1fr); gap: 10px; align-items: center; }
.prio ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.prio .n { font: 700 14px var(--font-ui); color: var(--gold-2); text-align: right; font-variant-numeric: tabular-nums; }
.prio img { width: 34px; height: 34px; border-radius: 4px; border: 1px solid #000; }
.prio b { font-weight: 700; color: var(--text); }
.prio span { color: var(--text-2); }

.columns {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px 34px; margin-top: 34px;
  padding: 18px 20px 20px; border-radius: 10px; border: 1px solid var(--rim); background: linear-gradient(180deg, rgba(22, 16, 10, .9), rgba(12, 9, 6, .92));
}
.columns h3 { font: 400 21px var(--font-display); text-shadow: 0 1px 2px #000; }
.columns ul { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.columns li { padding-left: 18px; position: relative; color: var(--text); text-shadow: 0 1px 2px #000; }
.columns li::before { content: ""; position: absolute; left: 2px; top: .6em; width: 5px; height: 5px; border-radius: 50%; background: var(--gold-2); }
.wandnote { margin-top: 26px; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; padding: 14px 16px; border-radius: 8px; background: rgba(13, 10, 7, .78); border: 1px solid var(--rim); }
.wandnote img { width: 40px; height: 40px; border-radius: 5px; border: 1px solid #000; }
.changes { margin-top: 34px; }
.change { margin-top: 12px; padding: 14px 16px; border-radius: 8px; background: rgba(13, 10, 7, .8); border: 1px solid var(--rim); }
.change header { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; }
.change header b { font: 400 19px var(--font-display); color: var(--text); }
.change header span { color: var(--text-3); font-size: 13px; }
.change ul { margin: 10px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.change .notice { margin-top: 12px; }

/* ---------- objective tracker ---------- */
.tracker { text-shadow: 0 1px 2px #000, 0 0 10px rgba(0, 0, 0, .85); }
.tracker-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 6px; border-bottom: 1px solid rgba(217, 178, 94, .5); }
.tracker-head h2 { font: 700 13px var(--font-ui); letter-spacing: .06em; color: var(--gold-2); }
.tracker-head span { font: 600 13px var(--font-ui); color: var(--text-2); font-variant-numeric: tabular-nums; }
.quest-title { margin-top: 12px; font: 700 16px var(--font-ui); color: var(--gold); }
.objectives { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.objectives li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 6px; align-items: start; }
.objectives .mark { width: 14px; height: 14px; margin-top: 4px; border: 1px solid var(--text-3); border-radius: 3px; display: grid; place-items: center; }
.objectives li.done .mark { border-color: var(--ok); background: rgba(92, 205, 92, .2); }
.objectives li.done .mark::after { content: ""; width: 7px; height: 4px; border-left: 2px solid var(--ok); border-bottom: 2px solid var(--ok); transform: rotate(-45deg) translate(1px, -1px); }
.objectives li.wait .mark { border-style: dashed; }
.objectives button {
  all: unset; cursor: pointer; display: block; color: var(--text); line-height: 1.4; padding: 2px 0;
  font: 500 15px/1.4 var(--font-ui);
}
.objectives button:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--gold-2); }
.objectives button:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 2px; }
.objectives li.done button { color: var(--text-3); }
.objectives small { display: block; font: 500 12.5px/1.35 var(--font-ui); color: var(--text-3); }
.objectives li.wait small { color: var(--warn); }
.tracker-foot { margin-top: 14px; font-size: 13px; color: var(--text-2); }
.tracker-foot b { color: var(--text); }
.news { margin-top: 30px; padding-top: 12px; border-top: 1px solid rgba(217, 178, 94, .35); }
.news h3 { font: 700 13px var(--font-ui); letter-spacing: .06em; color: var(--gold-2); }
.news .t { margin-top: 8px; font: 700 15px var(--font-ui); color: var(--text); }
.news .d { font-size: 12.5px; color: var(--warn); margin-top: 2px; }
.news ul { margin: 8px 0 0; padding-left: 16px; display: grid; gap: 5px; font-size: 14px; color: var(--text); }
.news p { font-size: 13px; color: var(--text-3); margin-top: 8px; }

/* ---------- status bar ---------- */
.statusbar {
  grid-area: status; z-index: 15; display: flex; align-items: center; gap: 18px; min-height: var(--status);
  padding-block: 8px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  background: linear-gradient(#18120c, #0e0a07); border-top: 1px solid var(--rim);
  box-shadow: inset 0 1px 0 rgba(255, 209, 0, .06), 0 -8px 20px rgba(0, 0, 0, .4);
}
.folder { display: flex; align-items: center; gap: 10px; min-width: 0; }
.folder svg { width: 22px; height: 22px; flex: none; color: var(--gold-2); }
.folder .lbl { font: 600 12px var(--font-ui); color: var(--text-3); display: block; }
.folder .path { font: 500 13px var(--font-mono); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; max-width: 34vw; }
.folder .path.none { font-family: var(--font-ui); font-size: 14px; color: var(--warn); }
.status-cast { flex: 1 1 260px; max-width: 460px; min-width: 160px; }
.feed { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--text-2); }
.feed .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none; }
.feed .dot.off { background: var(--bad); }
.feed .dot.upd { background: var(--gold); }

/* ---------- sheets ---------- */
.sheet {
  position: fixed; z-index: 40; top: var(--top); bottom: var(--status); right: 0; width: min(580px, 100%);
  display: flex; flex-direction: column; background: linear-gradient(180deg, #221810, #150f0a);
  border-left: 1px solid var(--rim-hi); box-shadow: -40px 0 80px rgba(0, 0, 0, .65);
  transform: translateX(104%); visibility: hidden;
  transition: transform .34s var(--ease), visibility 0s linear .34s;
}
.sheet.open { transform: none; visibility: visible; transition: transform .34s var(--ease), visibility 0s; }
.sheet-hero { position: relative; height: 170px; flex: none; overflow: hidden; border-bottom: 1px solid var(--rim); }
.sheet-hero video, .sheet-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sheet-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, #1c140d 4%, rgba(28, 20, 13, 0) 70%); }
.sheet-head { position: relative; padding: 20px 26px 14px; display: flex; gap: 14px; align-items: start; justify-content: space-between; border-bottom: 1px solid rgba(94, 71, 48, .7); }
.sheet-hero + .sheet-head { margin-top: -64px; border-bottom: 0; z-index: 2; }
.sheet-head h2 { font: 400 30px var(--font-display); }
.sheet-head p { color: var(--text-2); margin-top: 4px; max-width: 30em; }
.close { flex: none; }
.sheet-body { overflow-y: auto; padding: 18px 26px 30px; scrollbar-width: thin; scrollbar-color: var(--rim) transparent; }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; display: grid; gap: 18px; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; }
.steps li::before {
  content: counter(s); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  font: 400 18px var(--font-display); color: var(--gold); border: 1px solid var(--rim-hi); background: radial-gradient(#3a2a1b, #1a120c);
}
.steps h3 { font: 700 16px var(--font-ui); color: var(--text); }
.steps p { color: var(--text-2); margin-top: 3px; }
.guide-aside { margin-top: 26px; display: grid; gap: 14px; }
.guide-aside section { padding: 14px 16px; border-radius: 8px; background: rgba(0, 0, 0, .25); border: 1px solid rgba(94, 71, 48, .7); }
.guide-aside h3 { font: 700 15px var(--font-ui); color: var(--gold-2); }
.guide-aside p { color: var(--text-2); margin-top: 4px; }
.addons-loc { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 8px; background: rgba(0, 0, 0, .3); border: 1px solid rgba(94, 71, 48, .7); }
.addons-loc .mono { white-space: nowrap; }
.addon-list { margin-top: 16px; display: grid; gap: 10px; }
.addon { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 8px; border: 1px solid rgba(94, 71, 48, .7); background: rgba(36, 26, 18, .6); }
.addon b { display: block; }
.addon span { color: var(--text-2); font-size: 14px; }
.empty-card { margin-top: 18px; padding: 22px; border-radius: 10px; text-align: left; border: 1px dashed rgba(156, 122, 74, .7); background: rgba(0, 0, 0, .22); }
.empty-card h3 { font: 400 22px var(--font-display); }
.empty-card p { color: var(--text-2); margin-top: 6px; }

/* report form (GM ticket) */
.rp { display: grid; gap: 18px; }
.rp fieldset { border: 1px solid rgba(94, 71, 48, .8); border-radius: 8px; padding: 12px 14px 14px; margin: 0; display: grid; gap: 12px; background: rgba(0, 0, 0, .18); }
.rp legend { font: 700 14px var(--font-ui); color: var(--gold-2); padding: 0 6px; }
.rp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.rp label { display: grid; gap: 5px; font: 600 13px var(--font-ui); color: var(--text-2); }
.rp label small { font-weight: 500; color: var(--text-3); }
.rp select, .rp input, .rp textarea {
  font: 500 15px var(--font-ui); color: var(--text); background: #0f0b07; border: 1px solid var(--rim); border-radius: 5px; padding: 8px 10px; width: 100%;
}
.rp textarea { resize: vertical; }
.rp .mono-in { font: 500 13px var(--font-mono); }
.rp select:focus, .rp input:focus, .rp textarea:focus { outline: 2px solid var(--gold-2); outline-offset: 0; border-color: var(--gold-2); }
.rp-err { color: var(--bad); font-weight: 600; }
.rp-out { display: grid; gap: 12px; }
.rp-out textarea { min-height: 280px; font: 500 12.5px/1.5 var(--font-mono); color: var(--text); background: #0b0805; border: 1px solid var(--rim); border-radius: 6px; padding: 12px; width: 100%; }
.hp { position: absolute; left: -9999px; }

/* ---------- tooltip ---------- */
.tip {
  position: fixed; z-index: 120; max-width: 300px; padding: 9px 11px 10px; pointer-events: none;
  background: var(--tip); border: 1px solid var(--tip-rim); border-radius: 5px;
  box-shadow: 0 0 0 1px #000, 0 12px 30px rgba(0, 0, 0, .65); color: #fff;
  font: 500 14px/1.4 var(--font-ui); opacity: 0; transition: opacity .12s;
}
.tip.on { opacity: 1; }
.tip .t { font: 600 16px var(--font-ui); color: #fff; }
.tip .r { display: flex; justify-content: space-between; gap: 18px; color: #fff; }
.tip .y { color: var(--gold); margin-top: 4px; }
.tip .g { color: #1eff00; }
.tip .s { color: var(--text-3); }

/* ---------- tour: the lantern ---------- */
/* The layer itself lets clicks through, so a click inside the circle reaches the thing it lights;
   the dimmed veil (clipped around the circle) and the cards still catch clicks. */
.tour { position: fixed; inset: 0; z-index: 100; pointer-events: none; }
.tour-veil, .tour-card, .tour-welcome { pointer-events: auto; }
.tour[hidden] { display: none; }
.tour-veil {
  position: absolute; inset: 0; background: rgba(9, 6, 4, .58);
  -webkit-backdrop-filter: blur(8px) saturate(.6); backdrop-filter: blur(8px) saturate(.6);
}
.tour-ring {
  position: absolute; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 2px rgba(255, 209, 0, .9), 0 0 0 9px rgba(255, 209, 0, .1), 0 0 46px 10px rgba(255, 186, 74, .35), inset 0 0 24px rgba(255, 209, 0, .22);
}
.tour-ring::after { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 1px solid rgba(255, 209, 0, .5); animation: breathe 2.4s var(--ease-io) infinite; }
@keyframes breathe { 0%, 100% { transform: scale(.97); opacity: .9; } 50% { transform: scale(1.06); opacity: .25; } }
.tour-card {
  position: absolute; width: min(360px, calc(100vw - 32px)); padding: 15px 16px 14px;
  background: var(--tip); border: 1px solid var(--tip-rim); border-radius: 6px; color: #fff;
  box-shadow: 0 0 0 1px #000, 0 18px 50px rgba(0, 0, 0, .7);
}
.tour-card .stepn { font: 600 12px var(--font-ui); color: var(--text-3); font-variant-numeric: tabular-nums; }
.tour-card h3 { font: 600 18px var(--font-ui); color: var(--gold); margin-top: 2px; }
.tour-card p { margin-top: 6px; color: #fff; font-size: 15px; }
.tour-card .hint { margin-top: 8px; color: #8fdcff; font-size: 13px; }
.tour-actions { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.tour-actions .grow { flex: 1; }
.tour-dots { display: flex; gap: 5px; margin-top: 12px; }
.tour-dots i { width: 18px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .2); }
.tour-dots i.on { background: var(--gold); }
.tour-welcome {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(560px, calc(100vw - 32px));
  border-radius: 12px; overflow: hidden; border: 1px solid var(--rim-hi); background: #140e09;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .8);
}
.tour-welcome video, .tour-welcome img { display: block; width: 100%; aspect-ratio: 16 / 8; object-fit: cover; }
.tour-welcome .in { padding: 18px 22px 20px; margin-top: -54px; position: relative; background: linear-gradient(180deg, rgba(20, 14, 9, 0), #140e09 52px); }
.tour-welcome h2 { font: 400 32px var(--font-display); }
.tour-welcome p { color: var(--text-2); margin-top: 6px; }

/* ---------- toasts + achievement ---------- */
/* Messages appear the way the game shows them: yellow text near the top of the
   screen, red for errors, a black outline instead of a box. */
.toasts {
  position: fixed; z-index: 90; left: 50%; top: calc(var(--top) + 120px); transform: translateX(-50%);
  width: min(640px, calc(100vw - 32px)); display: grid; gap: 4px; justify-items: center; text-align: center; pointer-events: none;
}
.toast {
  padding: 6px 56px; background: radial-gradient(closest-side, rgba(8, 6, 4, .86), rgba(8, 6, 4, .62) 62%, rgba(8, 6, 4, 0));
  font: 700 17px/1.35 var(--font-ui); color: var(--gold);
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 0 0 6px #000, 0 0 12px rgba(0, 0, 0, .8);
  animation: toast 4s linear forwards;
}
.toast.err { color: #ff4c3b; }
@keyframes toast { 0% { opacity: 0; } 3%, 78% { opacity: 1; } 100% { opacity: 0; } }
.achv {
  position: fixed; z-index: 95; top: calc(var(--top) + 18px); left: 50%; width: min(440px, calc(100vw - 32px));
  transform: translate(-50%, calc(-100% - var(--top) - 60px)); transition: transform .6s var(--ease);
  display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 14px; align-items: center;
  padding: 12px 16px; border-radius: 10px; border: 2px solid #c9a24a;
  background: linear-gradient(180deg, #2c2116, #120d08); box-shadow: 0 0 0 1px #000, 0 18px 50px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 220, 160, .15);
}
.achv.show { transform: translate(-50%, 0); }
.achv .ico { width: 58px; height: 58px; border-radius: 8px; border: 1px solid #000; display: grid; place-items: center; background: radial-gradient(#3e2d1c, #120d09); box-shadow: 0 0 0 2px #c9a24a; }
.achv .ico svg { width: 30px; height: 34px; }
.achv small { display: block; font: 700 12px var(--font-ui); color: var(--text-2); letter-spacing: .04em; }
.achv b { display: block; font: 400 24px/1.1 var(--font-display); color: var(--gold); }
.achv span { display: block; font-size: 14px; color: var(--text-2); }

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  .scene video { display: none; }
  .scene .poster, .scene video { transition: opacity .3s linear; transform: none !important; }
  .ab.lit::before, .tour-ring::after { animation: none; }
  .log-item { animation: none; }
  .sheet, .achv { transition-duration: .01s; }
  .toast { animation-duration: 4s; }
}
.reduce .scene video { display: none; }
.reduce .scene .poster, .reduce .scene video { transform: none !important; }

/* ---------- narrow screens ---------- */
@media (max-width: 900px) {
  :root { --top: 54px; --status: auto; }
  body { overflow: auto; height: auto; min-height: 100%; }
  .app { height: auto; min-height: 100%; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto; grid-template-areas: "top" "rail" "stage" "status"; }
  .topbar { position: sticky; top: 0; height: 54px; gap: 12px; }
  .nav { display: none; }
  .menu-btn { display: grid; }
  .top-actions .btn { display: none; }
  .rail {
    position: sticky; top: 54px; flex-direction: row; overflow-x: auto; overflow-y: hidden; gap: 10px;
    padding: 10px 16px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
    border-right: 0; border-bottom: 1px solid var(--rim);
  }
  .rail-sep { width: 1px; height: 28px; margin: 0 2px; }
  .rail-btn { width: 46px; height: 46px; }
  .stage { overflow: visible; isolation: auto; }
  .scene { position: fixed; z-index: 0; }
  .scene-shade { background: linear-gradient(180deg, rgba(11, 8, 5, .55), rgba(11, 8, 5, .82) 40%, rgba(11, 8, 5, .94)); }
  .scene-credit { display: none; }
  .stage-grid { position: relative; z-index: 1; display: block; }
  .content { overflow: visible; padding: 26px 16px 22px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .side { overflow: visible; padding: 4px 16px 30px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .roster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .class-head { grid-template-columns: 64px minmax(0, 1fr); gap: 14px; }
  .crest { width: 64px; height: 64px; }
  .tabs { overflow-x: auto; padding-left: 0; }
  .tab { flex: none; }
  .rot-top { grid-template-columns: minmax(0, 1fr); }
  .install { justify-items: start; }
  .install .why { text-align: left; }
  .frames { grid-template-columns: minmax(0, 1fr); }
  .statusbar { position: sticky; bottom: 0; flex-wrap: wrap; gap: 8px 14px; padding-block: 10px; }
  .folder .path { max-width: 60vw; }
  .status-cast { order: 3; flex-basis: 100%; max-width: none; }
  .status-cast:has(.castbar.idle) { display: none; }
  .feed { font-size: 13px; }
  .feed { margin-left: 0; }
  .sheet { top: 0; bottom: 0; width: 100%; }
}

/* class name: fades in whole, the way the game shows a zone name */
.class-name.zonetext { animation: zonetext 1s var(--ease) both; }
@keyframes zonetext { from { opacity: 0; } to { opacity: 1; } }

/* ---------- your level: the unlock track ---------- */
.leveler { margin-top: 16px; padding: 16px 18px 10px; border-radius: 10px; background: linear-gradient(180deg, rgba(22, 16, 10, .93), rgba(12, 9, 6, .93)); border: 1px solid var(--rim); }
.lv-head { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; }
.lv-head label { font: 600 15px var(--font-ui); color: var(--text-2); }
.lv-num { font: 400 44px/1 var(--font-display); color: var(--gold); min-width: 2ch; font-variant-numeric: tabular-nums; }
.lv-phase { flex: 1 1 260px; color: var(--text); font-size: 15px; }
.lv-track { position: relative; margin-top: 6px; padding-top: 88px; }
.lv-unlocks { position: absolute; left: 12px; right: 12px; top: 0; height: 88px; }
.lv-ico {
  position: absolute; left: calc((var(--at) - 1) / 59 * 100%); bottom: calc(var(--row) * 28px + 6px);
  width: 26px; height: 26px; transform: translateX(-50%); border: 1px solid #000; border-radius: 4px;
  box-shadow: 0 0 0 1px var(--rim-hi); transition: filter .25s, box-shadow .25s, opacity .25s; cursor: help;
}
.lv-ico img { width: 100%; height: 100%; border-radius: 3px; display: block; }
.lv-ico::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: calc(var(--row) * 28px + 6px); background: rgba(217, 178, 94, .4); }
.lv-ico.locked { filter: grayscale(1) brightness(.42); box-shadow: 0 0 0 1px #3d2e1f; }
.lv-ico.gone { opacity: .32; filter: grayscale(1); }
.lv-ico.new { animation: unlock .75s var(--ease); z-index: 2; }
@keyframes unlock {
  0% { transform: translateX(-50%) scale(1.45); box-shadow: 0 0 0 2px var(--gold), 0 0 0 0 rgba(255, 209, 0, .85); }
  100% { transform: translateX(-50%) scale(1); box-shadow: 0 0 0 1px var(--rim-hi), 0 0 0 16px rgba(255, 209, 0, 0); }
}
.lv-rail { position: relative; height: 8px; margin: 0 12px; border-radius: 4px; background: #0a0705; border: 1px solid #000; box-shadow: 0 0 0 1px var(--rim); }
.lv-rail i { position: absolute; left: 0; top: 0; bottom: 0; width: calc((var(--lv) - 1) / 59 * 100%); border-radius: 4px; background: linear-gradient(90deg, #6b4e1d, var(--gold)); transition: width .12s linear; }
.lv-rail::after {
  content: ""; position: absolute; top: 50%; left: calc((var(--lv) - 1) / 59 * 100%); width: 18px; height: 18px;
  transform: translate(-50%, -50%) rotate(45deg); background: radial-gradient(circle at 35% 35%, #fff6c4, #e0a800 60%, #8a5d00);
  border: 1px solid #000; box-shadow: 0 0 0 2px #6b4e1d; transition: left .12s linear;
}
.lv-track:focus-within .lv-rail::after { box-shadow: 0 0 0 2px var(--gold-2), 0 0 0 6px rgba(217, 178, 94, .35); }
.lv-track input[type="range"] { position: absolute; left: 0; right: 0; top: 74px; width: 100%; height: 30px; margin: 0; opacity: 0; cursor: grab; }
.lv-track input[type="range"]:active { cursor: grabbing; }
.lv-scale { position: relative; height: 20px; margin: 8px 12px 0; }
.lv-scale span { position: absolute; left: calc((var(--at) - 1) / 59 * 100%); transform: translateX(-50%); font: 600 12px var(--font-ui); color: var(--text-3); font-variant-numeric: tabular-nums; }

.prio-wrap { margin-top: 14px; padding: 14px 16px 16px; border-radius: 10px; background: rgba(12, 9, 6, .88); border: 1px solid var(--rim); }
.prio-title { font: 400 21px var(--font-display); color: var(--text); text-shadow: 0 1px 2px #000; }
.prio-wrap .prio { margin-top: 10px; }
.soon { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; color: var(--text-2); font-size: 14px; }
.soon span { display: inline-flex; align-items: center; gap: 6px; }
.soon img { width: 22px; height: 22px; border-radius: 3px; border: 1px solid #000; filter: grayscale(1) brightness(.6); }
.pend { font: 700 11px var(--font-ui); font-style: normal; color: var(--warn); border: 1px solid rgba(240, 167, 66, .55); border-radius: 3px; padding: 0 5px; margin-left: 6px; white-space: nowrap; cursor: help; }
.spec-note { margin-top: 12px; color: var(--text-2); }
.arena-sub { color: var(--text-2); font-size: 14px; margin-top: 2px; max-width: 36em; text-shadow: 0 1px 2px #000; }
.arena-note { margin-top: 16px; padding: 12px 14px; border-radius: 8px; border: 1px dashed var(--rim-hi); color: var(--text-2); background: rgba(0, 0, 0, .35); }
@media (max-width: 900px) {
  .lv-num { font-size: 36px; }
  .lv-ico { width: 22px; height: 22px; }
}


/* ---------- field journal: the quest-log page ---------- */
:root { --parch-1: #f0e2bd; --parch-2: #dcc597; --parch-3: #c9ab73; --parch-ink: #2a1c0f; --parch-ink-2: #57401f; --sepia: #5e380d; }
.journal {
  position: relative; margin-top: 34px; padding: 26px 28px 22px; border-radius: 6px; color: var(--parch-ink);
  /* Quest-log paper: sparse brown flecks over the parchment, worn darker at the edges. */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .2 0 0 0 0 .06 0 0 0 2 -1.36'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 15% 0%, rgba(255, 248, 224, .75), rgba(255, 248, 224, 0) 55%),
    radial-gradient(ellipse at 100% 100%, rgba(150, 105, 45, .35), rgba(150, 105, 45, 0) 60%),
    linear-gradient(180deg, var(--parch-1), var(--parch-2));
  border: 1px solid #8a6a3a;
  box-shadow: inset 0 0 0 1px rgba(255, 240, 200, .5), inset 0 0 60px rgba(120, 80, 25, .35), 0 24px 50px -24px rgba(0, 0, 0, .9);
}
.journal h2, .journal h3, .journal h4 { color: var(--sepia); }
.jr-title { font: 400 30px/1.15 var(--font-display); color: var(--parch-ink) !important; }
.jr-lede { margin-top: 6px; color: var(--parch-ink-2); max-width: 46em; }
.journal h3 { font: 400 20px var(--font-display); margin-bottom: 8px; }
.jr-short { margin-top: 18px; padding: 14px 16px; border-radius: 4px; background: rgba(255, 250, 232, .45); border: 1px solid rgba(122, 75, 20, .3); }
.jr-short ul, .jr-list, .jr-everyone ul, .jr-band-body ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.jr-short li, .jr-list li, .jr-everyone li, .jr-band-body li { position: relative; padding-left: 18px; line-height: 1.45; }
.jr-short li::before, .jr-list li::before, .jr-everyone li::before, .jr-band-body li::before { content: ""; position: absolute; left: 3px; top: .6em; width: 5px; height: 5px; border-radius: 50%; background: var(--sepia); }
.jr-bands { margin-top: 22px; }
.jr-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 2px solid rgba(122, 75, 20, .45); }
.jr-tab { position: relative; top: 2px; cursor: pointer; padding: 7px 14px 6px; border: 1px solid rgba(122, 75, 20, .45); border-bottom: 0; border-radius: 6px 6px 0 0; background: rgba(122, 75, 20, .12); color: var(--parch-ink-2); font: 700 14px var(--font-ui); font-variant-numeric: tabular-nums; }
.jr-tab:hover { background: rgba(122, 75, 20, .2); }
.jr-tab[aria-selected="true"] { background: var(--parch-1); color: var(--parch-ink); border-color: rgba(122, 75, 20, .7); }
.jr-tab.here::after { content: ""; position: absolute; left: 50%; top: -5px; width: 8px; height: 8px; transform: translateX(-50%) rotate(45deg); background: #b8860b; box-shadow: 0 0 0 2px var(--parch-1); }
.jr-band-body { padding: 16px 4px 4px; }
.jr-band-body h4 { font: 400 22px var(--font-display); margin: 0 0 10px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.jr-here { font: 700 12px var(--font-ui); color: #fff; background: var(--sepia); border-radius: 3px; padding: 2px 7px; }
.jr-grid { margin-top: 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px 32px; }
.jr-prof { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.jr-prof li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; align-items: start; }
.jr-prof img { width: 36px; height: 36px; border-radius: 4px; border: 1px solid #3b2a14; box-shadow: 0 1px 0 rgba(255, 240, 200, .6); }
.jr-prof b { display: block; color: var(--parch-ink); }
.jr-prof span { color: var(--parch-ink-2); font-size: 14px; }
.jr-prof li.core b::after { content: " recommended"; font: 700 11px var(--font-ui); color: #2f6b1f; margin-left: 4px; }
.jr-note { margin-top: 10px; color: var(--parch-ink-2); font-size: 14px; font-style: italic; }
.jr-train { margin-top: 24px; padding-top: 16px; border-top: 1px solid rgba(122, 75, 20, .35); }
.jr-train > p { color: var(--parch-ink-2); }
.jr-pips { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.jr-pip { min-width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(122, 75, 20, .55); font: 700 14px var(--font-ui); color: var(--parch-ink-2); background: rgba(255, 250, 232, .4); font-variant-numeric: tabular-nums; }
.jr-pip.done { background: rgba(122, 75, 20, .18); color: rgba(42, 28, 15, .55); text-decoration: line-through; }
.jr-pip.next { background: var(--sepia); color: #fff; border-color: var(--sepia); box-shadow: 0 0 0 3px rgba(122, 75, 20, .25); }
.jr-everyone { margin-top: 24px; padding: 14px 16px; border-radius: 4px; background: rgba(60, 40, 15, .08); border: 1px dashed rgba(122, 75, 20, .5); }
.jr-everyone li { font-size: 14.5px; }
.jr-fine { margin-top: 20px; }
.jr-fine summary { cursor: pointer; font: 700 14px var(--font-ui); color: var(--sepia); }
.jr-table { margin-top: 10px; border-collapse: collapse; width: 100%; font-size: 14px; }
.jr-table th, .jr-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid rgba(122, 75, 20, .25); vertical-align: top; }
.jr-table th { width: 34%; color: var(--parch-ink); }
.jr-table td { color: var(--parch-ink-2); }
.jr-src { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 14px; }
.jr-src span { color: var(--parch-ink-2); font-variant-numeric: tabular-nums; }
.journal :focus-visible { outline: 2px solid var(--sepia); outline-offset: 2px; }
.journal-soon .jr-lede { max-width: 40em; }
@media (max-width: 900px) { .journal { padding: 20px 16px 18px; } .jr-title { font-size: 25px; } }

/* action-bar switches */
.ab.toggle { cursor: pointer; }
.ab.toggle:hover { box-shadow: 0 0 0 1px var(--gold-2); }
.ab.off img { filter: grayscale(1) brightness(.35); }
.ab.off::after {
  content: ""; position: absolute; inset: 0; z-index: 4; border-radius: 3px; pointer-events: none;
  background: linear-gradient(45deg, transparent calc(50% - 2px), rgba(255, 70, 50, .95) calc(50% - 2px), rgba(255, 70, 50, .95) calc(50% + 2px), transparent calc(50% + 2px));
}
.ab.off .kb { color: #ff8a7a; }
.bar-hint { width: 100%; font-size: 13px; color: var(--text-3); margin-top: -6px; }

/* ---------- group healing: party and raid frames ---------- */
.hl-switch { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.hl-switch button, .seg button {
  cursor: pointer; padding: 7px 14px; border-radius: 6px; border: 1px solid var(--rim); background: rgba(20, 14, 9, .85);
  color: var(--text-2); font: 700 14px var(--font-ui);
}
.hl-switch button[aria-pressed="true"], .seg button[aria-pressed="true"] { color: var(--gold); border-color: var(--rim-hi); background: rgba(48, 35, 24, .95); }
.hl-plan { font-size: 13px; color: var(--text-3); flex: 1 1 260px; }
.seg { display: inline-flex; gap: 4px; margin-left: 6px; }
.seg button { padding: 6px 10px; font-size: 13px; }
.hl-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 22px; align-items: center; }
.hl-focus { display: grid; gap: 2px; padding: 10px 14px; border-radius: 8px; border: 1px solid rgba(255, 209, 0, .45); background: rgba(255, 209, 0, .06); }
.hl-focus span { font: 700 12px var(--font-ui); color: var(--gold-2); letter-spacing: .04em; }
.hl-focus b { font: 400 21px var(--font-display); color: var(--gold); }
.hl-focus small { color: var(--text-3); font-size: 12.5px; }
.raid { margin-top: 16px; display: grid; gap: 6px; }
.raid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.raid-10 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.uf {
  position: relative; padding: 6px 7px 7px; border-radius: 4px; background: linear-gradient(#141010, #0b0808);
  border: 1px solid #000; box-shadow: 0 0 0 1px #3d2e1f; transition: box-shadow .2s, transform .2s var(--ease);
}
.uf-top { display: flex; justify-content: space-between; gap: 6px; align-items: baseline; }
.uf-name { font: 700 13px var(--font-ui); color: var(--c); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uf-role { font: 600 11px var(--font-ui); color: var(--text-3); }
.uf-bar { position: relative; height: 22px; margin-top: 4px; border: 1px solid #000; border-radius: 2px; background: #2a0d0b; overflow: hidden; }
.uf-hp { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--v) * 1%); background: linear-gradient(#2fd02f, #138a13); transition: width .15s linear, background-color .2s; }
.uf.low .uf-hp { background: linear-gradient(#ffcc33, #d07a00); }
.uf-abs { position: absolute; top: 0; bottom: 0; left: calc(var(--v, 100) * 1%); width: calc(var(--a) * 1%); background: repeating-linear-gradient(45deg, rgba(220, 235, 255, .75) 0 4px, rgba(160, 190, 255, .45) 4px 8px); }
.uf-bar .uf-abs { left: auto; right: 0; }
.uf-pct { position: absolute; inset: 0; display: grid; place-items: center; font: 700 12px var(--font-ui); color: #fff; text-shadow: var(--outline); }
.uf-hots { display: flex; gap: 3px; min-height: 16px; margin-top: 4px; }
.uf-hots img { width: 15px; height: 15px; border-radius: 2px; border: 1px solid #000; }
.uf-focus { position: absolute; top: -9px; right: 6px; padding: 1px 6px; border-radius: 3px; background: var(--gold); color: #1a1205; font: 800 10px var(--font-ui); letter-spacing: .04em; opacity: 0; transform: translateY(3px); transition: opacity .2s, transform .2s var(--ease); }
.uf.focus { box-shadow: 0 0 0 2px var(--gold); }
.uf.focus .uf-focus { opacity: 1; transform: none; }
.uf.scan { box-shadow: 0 0 0 1px rgba(255, 209, 0, .8); }
.uf.dead { filter: grayscale(1) brightness(.55); }
.uf-fct { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.uf-fct span { position: absolute; top: 34%; font: 800 14px var(--font-ui); text-shadow: 0 1px 2px #000, 0 0 3px #000; animation: fct 1.05s var(--ease) forwards; }
.uf-fct .h { color: #49ff6a; font-size: 12px; }
.uf-fct .h.big { font-size: 16px; }
.uf-fct .d { color: #ff5b47; font-size: 13px; }
.uf-fct .a { color: #bcd7ff; font-size: 11px; }
@keyframes fct { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-26px); } }
.result.bad { background: rgba(255, 91, 71, .08); border-color: rgba(255, 91, 71, .45); }
.result.bad h4 { color: var(--bad); }
@media (max-width: 900px) {
  .hl-head { grid-template-columns: minmax(0, 1fr); }
  .raid-5, .raid-10 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .uf-fct span { animation: none; display: none; } }

/* defensives */
/* the shield overlay is also a `.bar > i`, so it needs the same weight to keep its own width and stripes */
.bar > i.p-abs { left: auto; right: 0; width: calc(var(--a, 0) * 1%); background: repeating-linear-gradient(45deg, rgba(220, 235, 255, .75) 0 4px, rgba(160, 190, 255, .45) 4px 8px); }
#p-unit { position: relative; }
#p-unit .uf-fct span { top: 10%; }
.def-toggle small { display: block; font: 500 12px var(--font-ui); color: var(--text-3); margin-left: 28px; }
.def-toggle { align-items: flex-start; flex-wrap: wrap; }

/* ---------- class page tabs ---------- */
.ptabs { display: flex; gap: 6px; margin-top: 24px; flex-wrap: wrap; }
.ptab {
  cursor: pointer; padding: 10px 18px; border-radius: 8px; border: 1px solid var(--rim); background: rgba(16, 11, 7, .85);
  color: var(--text-2); font: 400 19px var(--font-display); transition: color .15s, border-color .15s, background-color .15s;
}
.ptab:hover { color: var(--text); border-color: var(--rim-hi); }
.ptab[aria-selected="true"] { color: var(--class); border-color: var(--class); background: rgba(36, 26, 18, .95); box-shadow: inset 0 -2px 0 var(--class); }
.ptabs + .tabs { margin-top: 18px; }
.linkish { all: unset; cursor: pointer; color: var(--gold-2); text-decoration: underline; text-underline-offset: 2px; }
.linkish:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 2px; }

/* ---------- leveling guide tab ---------- */
.gt { margin-top: 22px; }
.gt-level { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 14px 18px; border-radius: 10px; background: rgba(14, 10, 7, .9); border: 1px solid var(--rim); }
.gt-level label { font: 600 15px var(--font-ui); color: var(--text-2); }
.gt-level input[type="range"] { flex: 1 1 240px; }
.gt-hint { flex-basis: 100%; font-size: 13px; color: var(--text-3); }
.next-up { margin-top: 18px; }
.nu-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.nu-head span { color: var(--text); font-size: 14px; padding: 3px 10px; border-radius: 12px; background: rgba(14, 10, 7, .85); border: 1px solid var(--rim); }
.nu-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.nu { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; align-items: start; padding: 14px 16px; border-radius: 10px; background: rgba(14, 10, 7, .9); border: 1px solid var(--rim); }
.nu.now { border-color: var(--class); background: rgba(30, 22, 15, .94); }
.nu b { display: block; font: 400 20px var(--font-display); color: var(--text); }
.nu p { margin-top: 4px; color: var(--text-2); }
.nu-lv, .pt-lv {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  font: 400 19px var(--font-display); color: var(--gold); border: 1px solid var(--rim-hi); background: radial-gradient(#3a2a1b, #1a120c); padding: 0;
}
.nu.now .nu-lv { color: #1a1205; background: var(--class); border-color: var(--class); }
.nu-kind { display: inline-block; font: 700 11px var(--font-ui); letter-spacing: .04em; color: var(--text-3); border: 1px solid rgba(168, 150, 119, .45); border-radius: 3px; padding: 0 5px; }
.nu[data-kind="gear"] .nu-kind, .pt[data-kind="gear"] .nu-kind { color: #a8d8ff; border-color: rgba(168, 216, 255, .5); }
.nu[data-kind="dungeon"] .nu-kind, .pt[data-kind="dungeon"] .nu-kind { color: #ffb36b; border-color: rgba(255, 179, 107, .5); }
.nu[data-kind="sys"] .nu-kind, .pt[data-kind="sys"] .nu-kind { color: var(--ok); border-color: rgba(92, 205, 92, .5); }
.nu[data-kind="quest"] .nu-kind, .pt[data-kind="quest"] .nu-kind { color: var(--gold); border-color: rgba(255, 209, 0, .5); }
.path-all { margin-top: 24px; }
.path-all > summary { cursor: pointer; font: 400 21px var(--font-display); color: var(--text); text-shadow: 0 1px 2px #000; }
.path { list-style: none; margin: 14px 0 0; padding: 0 0 0 4px; display: grid; gap: 0; position: relative; }
.path::before { content: ""; position: absolute; left: 26px; top: 10px; bottom: 10px; width: 2px; background: linear-gradient(var(--rim-hi), rgba(156, 122, 74, .2)); }
.pt { position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 14px; padding: 8px 0; }
.pt .pt-lv { position: relative; z-index: 1; width: 44px; height: 44px; font-size: 17px; }
.pt.done .pt-lv { color: rgba(255, 209, 0, .55); background: #1a120c; }
.pt.done b { color: var(--text-3); }
.pt b { font: 700 16px var(--font-ui); color: var(--text); }
.pt p { color: var(--text-2); margin-top: 2px; }
.gt-more { margin-top: 22px; color: var(--text-2); text-shadow: 0 1px 2px #000; }

/* ---------- leveling tips page ---------- */
.tips-title { font-size: clamp(46px, 5.6vw, 80px); }
.journal.tips { margin-top: 28px; }
.journal.tips .path::before { background: linear-gradient(rgba(122, 75, 20, .6), rgba(122, 75, 20, .15)); }
.journal.tips .pt-lv { cursor: default; color: #fff; background: var(--sepia); border-color: var(--sepia); }
.journal.tips .pt b { color: var(--parch-ink); }
.journal.tips .pt p { color: var(--parch-ink-2); }
.tips-grid { margin-top: 22px; display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 22px 32px; }
@media (max-width: 900px) { .ptab { font-size: 16px; padding: 8px 12px; } }

/* dummy level: the game's difficulty colours */
.con-gray { color: #9d9d9d !important; }
.con-green { color: #40c040 !important; }
.con-yellow { color: #ffff00 !important; }
.con-orange { color: #ff8040 !important; }
.con-red { color: #ff2020 !important; }
#t-unit { position: relative; }
#t-unit .uf-fct span { top: 10%; }
.uf-fct .m { color: #f1e8d6; font-size: 12px; }
.xp-strip { margin-top: 12px; }
.xp-strip h4 { margin: 0 0 8px; font: 600 14px var(--font-ui); color: var(--text-2); }
.xp-cells { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 6px; }
.xp-cell { all: unset; box-sizing: border-box; cursor: pointer; display: grid; justify-items: center; gap: 1px; padding: 7px 2px; border-radius: 6px; border: 1px solid var(--rim); background: rgba(14, 10, 7, .9); text-align: center; transition: border-color .15s, background-color .15s; }
.xp-cell:hover { border-color: var(--rim-hi); }
.xp-cell b { font: 400 18px var(--font-display); }
.xp-cell span { font: 700 12px var(--font-ui); color: var(--text); font-variant-numeric: tabular-nums; }
.xp-cell small { font-size: 11px; color: var(--text-3); }
.xp-cell.here { background: rgba(48, 35, 26, .95); border-color: var(--rim-hi); }
.xp-cell.best { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.xp-cell:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 2px; }
.xp-note { margin-top: 6px; font-size: 12px; color: var(--text-3); }
@media (max-width: 900px) { .xp-cells { grid-template-columns: repeat(6, minmax(0, 1fr)); } }