/* Dragonwilds serverstatus
   Materialen: steen met messing voor wat nu leeft (server, spelers, draken),
   perkament met inkt voor wat is opgetekend (kaartnotities, logboek). */

@font-face {
  font-family: "Cinzel";
  src: url("assets/fonts/cinzel-latin-var.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Alegreya";
  src: url("assets/fonts/alegreya-latin-var.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Alegreya";
  src: url("assets/fonts/alegreya-latin-var-italic.woff2") format("woff2");
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --storm-950: #050f0f;
  --storm-900: #081717;
  --storm-800: #0d2222;
  --storm-700: #14302f;
  --storm-600: #1c4441;
  --storm-500: #2a625d;
  --mist: #9fb8b0;
  --bone: #ece3cd;
  --anima: #63f5c9;
  --anima-soft: #bdf7e3;
  --anima-deep: #1fa987;
  --brass-200: #f7e2a2;
  --brass-300: #ecd08a;
  --brass-500: #c9a14e;
  --brass-700: #7d5f26;
  --parch-100: #efe2c0;
  --parch-300: #dcc999;
  --parch-500: #b89f6b;
  --ink: #2a1f12;
  --ink-soft: #5c4a30;
  --ember: #f08a3c;
  --ember-soft: #ffc98f;
  --blood: #c9563c;

  --font-display: "Cinzel", "Trajan Pro", "Cormorant SC", Georgia, "Times New Roman", serif;
  --font-body: "Alegreya", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;

  --wrap: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  font: 400 18px/1.5 var(--font-body);
  color: var(--bone);
  background-color: var(--storm-900);
  background-image:
    radial-gradient(60% 34% at 88% 62%, rgba(240, 138, 60, .055), transparent 70%),
    radial-gradient(70% 30% at 8% 38%, rgba(42, 150, 130, .09), transparent 70%),
    linear-gradient(180deg, #0a1c1d 0, #0b2020 34%, #081717 70%, #050f0f 100%);
  background-attachment: scroll;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("assets/grain-light.svg");
  opacity: .16;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0, 0, 0, .55) 100%);
}
body > * { position: relative; z-index: 1; }

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.num { font-variant-numeric: lining-nums tabular-nums; }
.icon { width: 1.15em; height: 1.15em; flex: none; display: inline-block; vertical-align: -.18em; }

:focus-visible { outline: 2px solid var(--anima); outline-offset: 2px; }

p { margin: 0 0 .75em; }

/* ---------- Kaders ---------- */

.framed {
  --chamfer: 10px;
  position: relative;
  border: 1px solid transparent;
  border-image: url("assets/frame-brass.svg") 24 / 24px stretch;
  clip-path: polygon(
    var(--chamfer) 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer),
    100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%,
    var(--chamfer) 100%, 0 calc(100% - var(--chamfer)), 0 var(--chamfer));
}
.stone {
  background-color: var(--storm-800);
  background-image:
    url("assets/grain-light.svg"),
    radial-gradient(120% 70% at 50% 0%, rgba(64, 140, 126, .2), transparent 62%),
    linear-gradient(180deg, #153331 0%, #0c2121 100%);
  box-shadow: inset 0 0 46px rgba(0, 0, 0, .5);
}
.parchment {
  color: var(--ink);
  border-image-source: url("assets/frame-ink.svg");
  background-color: var(--parch-300);
  background-image:
    url("assets/grain-dark.svg"),
    radial-gradient(80% 60% at 18% 8%, rgba(255, 249, 226, .7), transparent 62%),
    radial-gradient(70% 60% at 92% 100%, rgba(122, 84, 36, .38), transparent 66%),
    linear-gradient(180deg, #e9dab2, #d3be8c);
  box-shadow: inset 0 0 70px rgba(98, 62, 18, .42);
}

/* ---------- Knoppen ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 14px 7px;
  font: 600 14px/1 var(--font-display);
  letter-spacing: .06em;
  color: var(--brass-300);
  background: linear-gradient(180deg, #1e3f3c, #102726);
  border: 1px solid var(--brass-700);
  border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(247, 226, 162, .14), inset 0 0 0 1px rgba(0, 0, 0, .5), 0 2px 0 rgba(0, 0, 0, .45);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .15s, color .15s, background-color .15s;
}
.btn:hover:not(:disabled) { border-color: var(--brass-300); color: var(--brass-200); }
.btn:active:not(:disabled) { transform: translateY(1px); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .6); }
.btn:disabled { opacity: .45; cursor: default; }
.btn-icon { width: 40px; padding: 0; }
.btn-icon .icon { width: 20px; height: 20px; }
.btn-brass {
  min-height: 48px;
  padding: 10px 22px 9px;
  font-size: 16px;
  color: #1d1406;
  background: linear-gradient(180deg, #f6e1a0 0%, #d6ad53 48%, #b0863a 100%);
  border-color: #fbe9ae #8a6322 #6b4c18 #8a6322;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 0 0 1px #1a1206, 0 3px 0 #1a1206;
}
.btn-brass:hover:not(:disabled) { color: #1d1406; border-color: #fff4cf #a67a2c #6b4c18 #a67a2c; filter: brightness(1.06); }
.btn-brass.is-done { background: linear-gradient(180deg, #c9f7e6, #63d9b5 55%, #2f9c80); border-color: #e4fff5 #1f7f66 #175e4c #1f7f66; }

.reltime {
  appearance: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  border-bottom: 1px dotted currentColor;
  cursor: pointer;
  text-align: inherit;
}
.reltime:hover { border-bottom-style: solid; }

/* ---------- Melding bij verouderde gegevens ---------- */

/* De meldingen onder de balk plakken samen (#banners): staan ze er allebei, dan onder elkaar. */
.banners {
  position: sticky;
  top: 0;
  z-index: 20;
}
.banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px var(--gutter) 9px;
  font-size: 17px;
  line-height: 1.3;
  color: var(--ember-soft);
  background: linear-gradient(180deg, #33200f, #261709);
  border-bottom: 1px solid rgba(240, 138, 60, .55);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .5);
  text-align: center;
}
.banner .icon { color: var(--ember); flex: none; }
/* een serverupdate: geen storing, wel iets om te weten */
.banner-notice {
  color: var(--brass-200);
  background: linear-gradient(180deg, #1d3a36, #12292a);
  border-bottom-color: rgba(236, 208, 138, .5);
}
.banner-notice .icon { color: var(--brass-300); }
.banner-notice[data-kind="update_failed"] { color: var(--ember-soft); background: linear-gradient(180deg, #33200f, #261709); }
.banner-notice[data-kind="update_failed"] .icon { color: var(--ember); }
/* de daglimiet van een speler die aan dit apparaat gekoppeld is (js/limitpanel.js): nog 10 minuten in messing, de
   laatste minuut en erover in de kleur van een storing */
.banner-limit {
  color: var(--brass-200);
  background: linear-gradient(180deg, #1d3a36, #12292a);
  border-bottom-color: rgba(236, 208, 138, .5);
}
.banner-limit .icon { color: var(--brass-300); }
.banner-limit[data-stage="one"], .banner-limit[data-stage="over"] { color: var(--ember-soft); background: linear-gradient(180deg, #33200f, #261709); border-bottom-color: rgba(240, 138, 60, .55); }
.banner-limit[data-stage="one"] .icon, .banner-limit[data-stage="over"] .icon { color: var(--ember); }

/* ---------- Menubalk ---------- */

/* Een smalle balk die boven in het venster blijft staan. Wat eronder schuift krijgt ruimte: de
   pagina begint onder de balk, de melding plakt eronder en een sprong binnen de pagina
   (scrollIntoView, #kaart) stopt eronder. --banner-h zet js/layout.js zolang de melding er staat. */
:root { --bar-h: 48px; }
/* 6px extra: de focusrand van wat net onder de balk in beeld schuift blijft dan helemaal zichtbaar */
html { scroll-padding-top: calc(var(--bar-h) + var(--banner-h, 0px) + 6px); }
body { padding-top: var(--bar-h); }
.banners { top: var(--bar-h); }
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 25;    /* boven de melding (20), onder de venstervullende kaart (main krijgt dan 30) */
  height: var(--bar-h);
  background-color: #0a1e1e;
  background-image: url("assets/grain-light.svg"), linear-gradient(180deg, #123130, #081a1a);
  border-bottom: 1px solid var(--brass-700);
  box-shadow: inset 0 1px 0 rgba(247, 226, 162, .08), 0 0 0 1px rgba(0, 0, 0, .55), 0 5px 18px rgba(0, 0, 0, .5);
}
/* de venstervullende kaart bedekt de balk al; zo is hij dan ook met Tab niet te bereiken */
.has-full-map .topbar { visibility: hidden; }
.topbar-inner { display: flex; align-items: center; gap: 16px; height: 100%; }
.topbar-name {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  font: 700 17px/var(--bar-h) var(--font-display);
  letter-spacing: .09em;
  color: var(--brass-300);
  text-decoration: none;
  text-overflow: ellipsis;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .7);
  white-space: nowrap;
}
.topbar-name:hover { color: var(--brass-200); }
.topbar-name:focus-visible { outline-offset: -3px; }
.topbar-state {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 9px;
  margin: 0 auto 0 0;    /* duwt de menuknop naar rechts */
  padding: 5px 0 4px 16px;
  font: 600 14px/1.1 var(--font-display);
  letter-spacing: .07em;
  color: var(--bone);
  border-left: 1px solid rgba(201, 161, 78, .35);
  white-space: nowrap;
}
.topbar-state .state-dot { width: 9px; height: 9px; }
.topbar-state.is-up .state-dot { background: var(--anima); box-shadow: 0 0 0 2px rgba(0, 0, 0, .5), 0 0 10px 1px rgba(99, 245, 201, .8); animation: pulse 2.8s ease-in-out infinite; }
.topbar-state.is-starting .state-dot { background: var(--ember); }
.topbar-state.is-down .state-dot { background: var(--blood); }
.topbar-count b { font-weight: 700; font-size: 15px; color: var(--brass-200); letter-spacing: .04em; }
.topbar-nav { display: flex; flex: none; }
.menu-btn[aria-expanded="true"] { color: var(--brass-200); border-color: var(--brass-300); }
.menu {
  position: absolute;
  top: 100%;
  right: var(--gutter);
  right: max(var(--gutter), calc((100% - var(--wrap)) / 2));    /* de rechterkant van .wrap */
  width: 300px;
  max-height: calc(100vh - var(--bar-h) - 12px);
  max-height: calc(100dvh - var(--bar-h) - 12px);
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
  background: #0b1f1f;
  border: 1px solid var(--brass-500);
  border-top-color: var(--brass-700);
  border-radius: 0 0 2px 2px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .7);
  animation: menu-in .16s ease-out;
}
.menu li + li { border-top: 1px solid rgba(201, 161, 78, .12); }
.menu a {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 44px;
  padding: 7px 14px 5px;
  font: 600 15px/1.2 var(--font-display);
  letter-spacing: .07em;
  color: var(--bone);
  text-decoration: none;
  border-radius: 2px;
  -webkit-tap-highlight-color: transparent;
}
.menu a::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin-bottom: 2px;
  border: 1px solid var(--brass-500);
  background: rgba(99, 245, 201, .5);
  transform: rotate(45deg);
}
.menu a:hover, .menu a:focus {
  color: var(--brass-200);
  background: linear-gradient(180deg, #1e3f3c, #153331);
  box-shadow: inset 0 0 0 1px rgba(201, 161, 78, .45);
}
.menu a:focus-visible { outline-offset: -2px; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } }
@media (max-width: 640px) {
  .topbar-inner { gap: 12px; }
  .topbar-name { font-size: 15px; }
  .topbar-state { padding-left: 12px; font-size: 13px; }
  .topbar-word { display: none; }
  .menu-btn { width: 44px; min-height: 44px; }
  /* op een telefoon over de hele breedte, met regels die groot genoeg zijn voor een duim */
  .menu { left: 0; right: 0; width: auto; padding: 4px calc(var(--gutter) - 10px) 8px; border-width: 0 0 1px; border-radius: 0; }
  .menu a { min-height: 48px; padding-inline: 10px; font-size: 16px; }
}

/* De serverpagina: rechts in de balk de snelle links (Zoeken, Spelers, Kaart) en, ontgrendeld, de
   uitnodigingscode als chip met een pop-up (js/lock.js). Het menu is er dan alleen op een telefoon. */
.topbar-links { display: flex; flex: none; gap: 2px; }
.topbar-links a {
  padding: 8px 10px;
  font: 600 13px/1 var(--font-display);
  letter-spacing: .07em;
  color: var(--bone);
  text-decoration: none;
  border-radius: 2px;
  -webkit-tap-highlight-color: transparent;
}
.topbar-links a:hover { color: var(--brass-200); }
.codechip-box { position: relative; flex: none; }
.codechip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 10px 0 9px;
  font: 700 13px/1 var(--font-display);
  letter-spacing: .12em;
  color: var(--anima-soft);
  background: rgba(4, 14, 14, .55);
  border: 1px solid rgba(201, 161, 78, .45);
  border-radius: 2px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .15s;
}
.codechip:hover, .codechip[aria-expanded="true"] { border-color: var(--brass-300); }
.codechip-lock { width: 15px; height: 15px; color: var(--brass-500); }
.codechip-chevron { width: 13px; height: 13px; color: var(--brass-500); transition: transform .15s; }
.codechip[aria-expanded="true"] .codechip-chevron { transform: rotate(180deg); }
.code-pop {
  position: absolute;
  right: 0;
  top: calc(100% + 9px);
  width: min(360px, calc(100vw - 32px));
  padding: 16px 18px 14px;
  text-align: center;
  background: #0b1f1f;
  border: 1px solid var(--brass-500);
  border-top-color: var(--brass-700);
  border-radius: 0 0 2px 2px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .7);
  animation: menu-in .16s ease-out;
}
.code-pop-label { margin: 0 0 10px; font: italic 400 17px/1.2 var(--font-body); color: var(--mist); }
.code-pop-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.code-pop-acts .btn-brass { min-height: 40px; padding: 8px 16px 7px; font-size: 14px; }
.code-pop-note { margin: 12px 0 0; font-size: 15px; line-height: 1.4; color: var(--mist); }
@media (min-width: 761px) {
  .topbar-links ~ .topbar-nav { display: none; }
}
@media (max-width: 760px) {
  .topbar-links { display: none; }
  /* op een telefoon alleen het slot; de code staat in de pop-up, die dan over de hele breedte ligt */
  .codechip { width: 40px; height: 40px; justify-content: center; padding: 0; }
  .codechip-code, .codechip-chevron { display: none; }
  .codechip-lock { width: 18px; height: 18px; }
  .code-pop { position: fixed; left: 16px; right: 16px; top: calc(var(--bar-h) + 4px); width: auto; }
}

/* Rechts in de balk van de gids en van het dashboard (js/topbar.js): een eigen server hosten (een .btn),
   het live dashboard (een plaatje met een stip, als de plaatjes in de kop) en de wissel tussen Nederlands
   en Engels. De serverpagina heeft ze niet. Smal blijft van de twee knoppen alleen het teken of de stip;
   hun naam staat dan in title en aria-label. */
.topbar-link { flex: none; min-height: 34px; padding: 6px 14px 5px; font-size: 13.5px; letter-spacing: .07em; text-decoration: none; white-space: nowrap; }
.topbar-link .icon { width: 16px; height: 16px; }
.topbar-dash {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font: 600 13.5px/1 var(--font-display);
  letter-spacing: .07em;
  color: var(--anima-soft);
  background: linear-gradient(180deg, rgba(22, 54, 51, .9), rgba(8, 24, 24, .92));
  border: 1px solid rgba(99, 245, 201, .5);
  border-radius: 2px;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .15s, color .15s;
}
.topbar-dash:hover { color: var(--bone); border-color: var(--anima); }
.topbar-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--anima); box-shadow: 0 0 0 2px rgba(0, 0, 0, .5), 0 0 10px 1px rgba(99, 245, 201, .8); }
.lang-switch { display: flex; flex: none; border: 1px solid var(--brass-700); border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5); }
.lang-btn {
  min-width: 38px;
  min-height: 32px;
  padding: 6px 9px 5px;
  font: 600 12.5px/1 var(--font-display);
  letter-spacing: .08em;
  color: var(--brass-300);
  background: linear-gradient(180deg, #1e3f3c, #102726);
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.lang-btn:hover { color: var(--brass-200); }
.lang-btn[aria-pressed="true"] { color: #1d1406; background: linear-gradient(180deg, #f6e1a0 0%, #d6ad53 48%, #b0863a 100%); cursor: default; }
.lang-btn:focus-visible { outline-offset: -3px; }
@media (max-width: 760px) {
  .topbar-label { display: none; }
  .topbar-link { padding-inline: 9px; }
}

/* ---------- Kop ---------- */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(62px, 8vw, 96px) 0 clamp(92px, 13vw, 168px);
  text-align: center;
}
.hero-sky { position: absolute; inset: 0; z-index: -1; }
.hero-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(46% 42% at 10% 2%, rgba(3, 12, 13, .92), transparent 72%),
    radial-gradient(26% 30% at 62% -6%, rgba(3, 12, 13, .8), transparent 72%),
    radial-gradient(22% 24% at 99% 44%, rgba(3, 12, 13, .7), transparent 72%),
    radial-gradient(24% 30% at 88% 9%, rgba(120, 232, 200, .34), transparent 72%),
    radial-gradient(64% 56% at 50% 26%, rgba(64, 196, 164, .42), rgba(30, 110, 100, .2) 46%, transparent 74%),
    linear-gradient(180deg, #0b2326 0%, #133e3c 46%, #0d2a2a 78%, #0a1e1f 100%);
  transition: filter 1.2s ease;
}
.is-offline .hero-glow, .is-stale .hero-glow { filter: saturate(.35) brightness(.72); }
.is-offline .ridge-far, .is-stale .ridge-far { fill: #1a3433; }
.hero-dragon {
  position: absolute;
  top: clamp(10px, 1.6vw, 26px);
  right: clamp(8px, 6vw, 120px);
  width: clamp(96px, 13vw, 200px);
  height: auto;
  aspect-ratio: 2 / 1;
  fill: #05191a;
  opacity: .9;
  transform: rotate(-6deg);
}
.hero-ridges { position: absolute; left: 0; bottom: -1px; width: 100%; height: clamp(120px, 20vw, 260px); }
.ridge-far { fill: #154340; opacity: .75; transition: fill 1.2s ease; }
.ridge-mid { fill: #0e2d2d; }
.ridge-near { fill: #0a1e1f; }

.server-name {
  margin: 0;
  font: 700 clamp(34px, 7vw, 84px)/1.04 var(--font-display);
  letter-spacing: .045em;
  color: var(--brass-300);
  background: linear-gradient(180deg, #fff0bf 0%, #ecc978 38%, #b98a37 70%, #7a5a22 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 0 rgba(4, 12, 12, .85)) drop-shadow(0 0 34px rgba(99, 245, 201, .28));
  overflow-wrap: anywhere;
}
.flourish { display: block; width: min(320px, 70%); height: 16px; margin: 14px auto 0; color: var(--brass-500); }

.state-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #6c7f7a;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .5);
}
.code {
  display: flex;
  align-items: center;
  gap: clamp(3px, .8vw, 8px);
  margin: 0;
  -webkit-user-select: none;
  user-select: none;
}
.rune {
  display: grid;
  place-items: center;
  width: clamp(30px, 8vw, 62px);
  aspect-ratio: 5 / 6;
  padding-top: .08em;
  font: 700 clamp(21px, 5.5vw, 42px)/1 var(--font-display);
  color: #d6fff1;
  background: linear-gradient(160deg, #27504b 0%, #173231 55%, #0f2424 100%);
  border: 1px solid #3f6f68;
  border-bottom-color: #081414;
  border-right-color: #0d1e1e;
  border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 -4px 8px rgba(0, 0, 0, .5), 0 3px 0 #050e0e;
  text-shadow: 0 0 14px rgba(99, 245, 201, .85), 0 0 3px rgba(99, 245, 201, .9);
  animation: breathe 4.6s ease-in-out infinite;
}
.rune:nth-child(3n) { animation-delay: -1.5s; }
.rune:nth-child(3n + 1) { animation-delay: -3s; }
.rune-sep { width: clamp(8px, 2vw, 18px); height: 2px; background: var(--brass-500); box-shadow: 0 1px 0 #000; }
.code-empty { font-style: italic; color: var(--mist); -webkit-user-select: none; user-select: none; }
.code-pop .code { justify-content: center; gap: 5px; }
.code-pop .rune { width: 36px; height: 43px; aspect-ratio: auto; font-size: 24px; }
.code-pop .rune-sep { width: 10px; }
.is-offline .rune, .is-stale .rune {
  color: #a9bab5;
  text-shadow: 0 1px 0 #000;
  background: linear-gradient(160deg, #263937 0%, #1a2827 55%, #121d1d 100%);
  border-color: #3c4f4c #101a1a #0a1313 #3c4f4c;
  animation: none;
}
/* De kop van de serverpagina: compacter, met het zoekvak erin. De lucht houdt haar eigen randen, zodat
   de lijst met treffers over de rand van de kop mag vallen. */
.hero-compact { z-index: 3; overflow: visible; padding: clamp(34px, 5vw, 56px) 0 clamp(56px, 7vw, 88px); }
.hero-compact .hero-sky { overflow: hidden; }
.hero-compact .hero-dragon { width: clamp(80px, 10vw, 160px); }
.hero-compact .hero-ridges { height: clamp(100px, 16vw, 200px); }
.hero-compact .server-name { font-size: clamp(30px, 5vw, 56px); }
.hero-compact .flourish { width: min(260px, 60%); height: 14px; margin-top: 10px; }

/* De rij met het zoekvak: links de beste trophy, rechts de tweede. Is de rij smaller dan 720px, dan
   staat het zoekvak bovenaan en de trophies samen eronder (container query op .hero-rowbox). */
.hero-rowbox { container-type: inline-size; margin-top: 18px; }
.hero-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 12px clamp(16px, 3vw, 36px); }
.trophy-slot { order: 1; flex: 0 0 auto; }
.trophy-slot.is-second { order: 3; }
.hero-search {
  order: 2;
  position: relative;
  z-index: 5;
  flex: 1 1 360px;
  align-self: center;
  min-width: 0;
  max-width: 880px;
  padding: clamp(12px, 2vw, 18px);
  text-align: left;
  border: 1px solid transparent;
  border-image: url("assets/frame-brass.svg") 24 / 24px stretch;
  background-color: rgba(8, 26, 26, .7);
  background-image:
    url("assets/grain-light.svg"),
    radial-gradient(90% 80% at 50% 0%, rgba(99, 245, 201, .1), transparent 70%),
    linear-gradient(180deg, rgba(16, 44, 42, .82), rgba(7, 22, 22, .9));
  box-shadow: inset 0 0 50px rgba(0, 0, 0, .45), 0 20px 50px rgba(0, 0, 0, .35);
  scroll-margin-top: 12px;
}
.hero-search .search-glass { left: 16px; width: 24px; height: 24px; }
.hero-search .search-input { height: 58px; padding-left: 52px; font-size: 21px; }
.hero-search .search-clear { height: 58px; width: 52px; }
.hero-search .search-status { margin-top: 6px; }
.hero-search .search-status:empty { min-height: 0; margin: 0; }
/* de vastgezette voorwerpen: compact in één rij onder het zoekvak, zoals "Snel naar" */
.hero-search .pins { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 10px; }
.hero-search .pins[hidden] { display: none; }
.hero-search .pins-title { margin: 0; font: italic 400 15px/1.2 var(--font-body); letter-spacing: 0; color: var(--mist); }
.hero-search .pins-title .pin-icon { width: 15px; height: 15px; color: var(--brass-500); }
.hero-search .pin-list { display: contents; }
.hero-search .pin { min-height: 32px; background: rgba(4, 14, 14, .5); border-color: rgba(201, 161, 78, .3); }
.hero-search .pin-open { gap: 6px; padding: 2px 9px 1px 5px; font-size: 15px; }
.hero-search .pin-face, .hero-search .pin-face .it-icon { width: 22px; height: 22px; }
.hero-search .pin-remove { width: 30px; }
.hero-search .pins-note { flex: 1 1 100%; margin: 0 2px; }
@container (max-width: 719px) {
  .hero-search { flex-basis: 100%; order: 1; }
  .trophy-slot.is-best { order: 3; }
  .trophy-slot.is-second { order: 4; }
}

/* Een bosshunt-trophy (js/trophies.js): de beker met het embleem van de boss, en eronder wat het is.
   De kleur van de boss komt uit --d, zoals bij .dragon. */
.trophy {
  --d: #c9a14e;
  --d-hi: #f1dfae;
  --d-mid: #6f5a2c;
  --d-lo: #1f1a0e;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 96px;
  max-width: 150px;
  padding: 0;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .36s cubic-bezier(.34, 1.56, .64, 1);
}
.trophy:hover { transform: translateY(-4px); }
.trophy:focus-visible { outline-offset: 6px; }
.trophy-art { width: clamp(84px, 10vw, 124px); height: auto; aspect-ratio: 120 / 140; overflow: visible; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .65)); }
.tr-glow { fill: var(--d); opacity: .5; }
.tr-ring { stroke: var(--d); }
.tr-plate { font: 700 6.6px var(--font-display); letter-spacing: .14em; fill: #2a1f12; }
.trophy-rank { margin-top: 6px; font: 600 10.5px/1 var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--brass-500); }
.trophy-name { margin-top: 5px; font: 700 17px/1.1 var(--font-display); letter-spacing: .06em; color: var(--d-hi); text-shadow: 0 2px 0 rgba(0, 0, 0, .7); overflow-wrap: anywhere; }
.trophy-who { margin-top: 2px; font-size: 14px; line-height: 1.3; color: var(--mist); text-align: center; text-wrap: balance; overflow-wrap: anywhere; }
.trophy-points { margin-top: 3px; font: 700 13px/1 var(--font-display); letter-spacing: .05em; color: var(--brass-200); }

/* Zonder het serverwachtwoord: één smalle balk onder het zoekvak met de code en het formulier (js/lock.js). */
.codebar {
  max-width: 880px;
  margin: 16px auto 0;
  padding: 12px 16px;
  text-align: left;
  background: linear-gradient(180deg, rgba(22, 54, 51, .85), rgba(8, 24, 24, .9));
  border: 1px solid rgba(201, 161, 78, .4);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .55);
}
.codebar-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 18px; }
.codebar-code { display: flex; align-items: center; gap: 10px; margin: 0; }
.codebar-label { font: italic 400 16px/1.2 var(--font-body); color: var(--mist); }
.codebar-value { font: 700 19px/1 var(--font-display); letter-spacing: .14em; color: #d6fff1; text-shadow: 0 0 12px rgba(99, 245, 201, .7); }
.codebar-copy { width: 34px; min-height: 34px; }
.codebar-copy .icon { width: 17px; height: 17px; }
.codebar-copy.is-done { color: var(--anima-soft); border-color: var(--anima); }
.codebar-rule { align-self: stretch; width: 1px; background: rgba(201, 161, 78, .3); }
.codebar-unlock { flex: 1 1 260px; min-width: 0; }
.codebar .unlock { display: flex; align-items: center; gap: 8px; }
.codebar-lock { width: 18px; height: 18px; color: var(--brass-500); }
.codebar-pass {
  flex: 1 1 auto;
  min-width: 0;
  height: 38px;
  padding: 0 10px;
  font: 500 16px/1.2 var(--font-body);
  color: var(--bone);
  background: rgba(4, 14, 14, .62);
  border: 1px solid var(--brass-700);
  border-radius: 2px;
}
.codebar-pass::placeholder { color: #7f958f; font-style: italic; }
.codebar-pass:focus-visible { outline-offset: 1px; border-color: var(--brass-300); }
.codebar .btn-brass { min-height: 38px; padding: 7px 14px 6px; font-size: 13px; }
.codebar-msg { margin: 8px 0 0; font-size: 15.5px; color: var(--ember-soft); text-align: center; }
.codebar-msg:empty { display: none; }
.codebar-note { margin: 8px 0 0; font-size: 14.5px; font-style: italic; line-height: 1.35; color: var(--mist); text-align: center; }
.copy-status:not(.sr-only) { margin: 8px 0 0; font-size: 15.5px; color: var(--ember-soft); text-align: center; }
.updated { margin: 0 auto 14px; font-size: 15.5px; color: var(--mist); }
.updated time { color: var(--bone); }

/* ---------- Secties ---------- */

main { padding-bottom: 40px; }
/* de kop van een los onderdeel (moveout.html) */
.section-title {
  margin: -10px 0 0;
  font: 600 clamp(22px, 3.1vw, 31px)/1.15 var(--font-display);
  letter-spacing: .055em;
  color: var(--brass-300);
  text-shadow: 0 2px 0 rgba(0, 0, 0, .6);
}
.placeholder { margin: 0; padding: 18px 0; font-style: italic; color: var(--mist); }

/* De hoofdrij: het kaartje van de keuze uit het zoekvak, rechts (op een smal scherm eronder) de spelers. */
.mainrow { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px; margin-top: 4px; }
.pick { flex: 999 1 560px; min-width: 0; scroll-margin-top: 12px; }
.pick-card { padding: 22px clamp(16px, 2.6vw, 28px) 24px; }
.pick .recipe-card { margin-top: 0; padding-top: 0; border-top: 0; }
.pick-empty { display: flex; align-items: center; gap: 14px; color: var(--mist); }
.pick-empty .icon { flex: none; width: 28px; height: 28px; color: var(--brass-500); }
.pick-empty p { margin: 0; font-style: italic; }
.recipe-card:not([hidden]) + .pick-empty { display: none; }
/* het kruisje rechtsboven sluit het kaartje (app.js); zoals dat van het kaartje op de kaart van de gids (guide.css) */
.pick-close { position: absolute; z-index: 2; top: 10px; right: 10px; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; color: var(--brass-500); background: none; border: 0; border-radius: 2px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pick-close:hover { color: var(--brass-200); }
.pick-close[hidden] { display: none; }
.pick-close .icon { width: 18px; height: 18px; }
/* de kop van het kaartje laat ruimte voor het kruisje */
.pick .rc-head { padding-right: 34px; }
@media (pointer: coarse) {
  .pick-close { top: 6px; right: 6px; width: 44px; height: 44px; }
  .pick .rc-head { padding-right: 40px; }
}
/* op een telefoon is de kop te smal voor naam, soort, punaise en kruisje op één regel: de naam staat naast
   het plaatje (met ruimte voor het kruisje), de soort en de punaise op een regel eronder */
@media (max-width: 640px) {
  .pick .rc-head { flex-wrap: wrap; row-gap: 8px; padding-right: 0; }
  .pick .rc-names { flex-basis: calc(100% - 64px - 12px - 40px); }
  .pick .rc-kind { align-self: center; margin-left: calc(64px + 12px); }
}

/* Spelers: één compacte lijst (js/sections.js), een warme gloed links boven zoals een paneel met spelers online. */
.players {
  flex: 1 1 300px;
  min-width: 0;
  padding: 18px clamp(14px, 2vw, 20px) 10px;
  background-image:
    url("assets/grain-light.svg"),
    radial-gradient(46% 60% at 0% 0%, rgba(240, 138, 60, .14), transparent 70%),
    linear-gradient(180deg, #153331 0%, #0c2121 100%);
  scroll-margin-top: 12px;
}
.players-title { display: flex; align-items: baseline; gap: 12px; margin: 0 0 6px; font: 600 22px/1.15 var(--font-display); letter-spacing: .055em; color: var(--brass-300); text-shadow: 0 2px 0 rgba(0, 0, 0, .6); }
.players-rule { flex: 1 1 auto; align-self: center; height: 1px; background: linear-gradient(90deg, rgba(201, 161, 78, .75), rgba(201, 161, 78, 0)); }
.players-meta { font: italic 400 16px/1.2 var(--font-body); letter-spacing: 0; color: var(--mist); text-shadow: none; white-space: nowrap; }
.players-col { display: flex; justify-content: flex-end; margin: 0; padding: 0 0 4px; font: 600 11px/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--mist); }
.players-list { margin: 0; padding: 0; list-style: none; }
.players-offline { padding: 12px 0 2px; font: 600 11.5px/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: #7f958f; }
.player-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 0;
  font: inherit;
  color: var(--bone);
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(201, 161, 78, .12);
  -webkit-tap-highlight-color: transparent;
}
button.player-row { cursor: pointer; }
button.player-row:hover .player-name { color: var(--brass-200); }
.player-row:focus-visible { outline-offset: -2px; }
.player:not(.is-online) .player-row { opacity: .72; }
.player-face { position: relative; display: block; width: 38px; height: 38px; }
.player-face .token { width: 38px; height: 38px; font-size: 18px; }
.player-face .token.is-online { box-shadow: 0 0 0 1.5px var(--token), inset 0 0 8px rgba(0, 0, 0, .7), 0 0 14px 1px var(--token); }
.player-dot { position: absolute; right: -3px; bottom: -2px; width: 11px; height: 11px; border-radius: 50%; background: var(--anima); border: 2px solid #0c2121; box-shadow: 0 0 8px 1px rgba(99, 245, 201, .8); animation: pulse 2.8s ease-in-out infinite; }
.player-who { min-width: 0; }
.player-name { display: block; font-weight: 700; font-size: 18px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* aan dit apparaat gekoppeld (Account koppelen): het steentje in de kleur van de lodestones uit de legenda */
.player-linked { display: inline-block; margin-left: 6px; color: #6fe3dc; vertical-align: -2px; }
.player-linked .icon { display: block; width: 16px; height: 16px; }
.player-line { display: block; font-size: 14.5px; line-height: 1.3; color: var(--mist); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* de daglimiet (js/limitmodel.js): wat er vandaag nog over is; de laatste tien minuten en erover vallen op */
.player-limit { color: var(--parch-300); }
.player-limit[data-stage="ten"] { color: var(--brass-300); font-weight: 600; }
.player-limit[data-stage="one"], .player-limit[data-stage="over"] { color: var(--ember-soft); font-weight: 600; }
.player-points { font: 700 18px/1 var(--font-display); letter-spacing: .03em; color: var(--brass-200); }
.players-empty { display: flex; align-items: center; gap: 14px; padding: 12px 0; }
.players-empty .icon { width: 30px; height: 30px; color: var(--mist); }
.players-empty strong { display: block; font: 600 19px/1.2 var(--font-display); letter-spacing: .05em; color: var(--bone); }
.players-empty span { color: var(--mist); font-size: 16px; }

/* Waar de hoofdrij niet meer naast elkaar past (de inhoud van .wrap smaller dan 560 + 24 + 300 px: een
   venster tot 960px breed), staan de spelers onderaan, na het werkblad, in plaats van onder het kaartje.
   De rij doet dan niet mee (display: contents): het kaartje, het werkblad en de spelers staan in main van de
   serverpagina (.server-main; de gids en het dashboard hebben hun eigen main) onder elkaar, in die
   volgorde. De volgorde in de pagina zelf blijft die van een breed scherm (Tab: kaartje, spelers, werkblad). */
@media (max-width: 960px) {
  .server-main { display: flex; flex-direction: column; }
  .mainrow { display: contents; }
  .pick { flex: none; order: 1; margin-top: 4px; }
  .sheet { order: 2; }
  .players { flex: none; order: 3; margin-top: clamp(40px, 5vw, 64px); }
}

/* Het werkblad met tabs (js/layout.js): Kaart van Ashenfall, Bosshunt, Logboek. Een tab die dicht is,
   blijft opgemaakt (de kaart meet zichzelf ook dan), maar is onzichtbaar en niet te bereiken. */
.sheet { margin-top: clamp(40px, 5vw, 64px); scroll-margin-top: 12px; }
.sheet-tabs { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px 26px; border-bottom: 1px solid rgba(201, 161, 78, .35); }
.sheet-tab {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 -1px;
  padding: 10px 0 9px;
  font: 600 clamp(19px, 2.4vw, 24px)/1.15 var(--font-display);
  letter-spacing: .055em;
  color: #8aa29b;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 2px 2px 0 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color .15s, border-color .15s;
}
.sheet-tab:hover { color: var(--brass-300); }
.sheet-tab[aria-selected="true"] { color: var(--brass-200); text-shadow: 0 2px 0 rgba(0, 0, 0, .6); border-bottom-color: var(--brass-300); cursor: default; }
.sheet-meta { font: italic 400 16px/1 var(--font-body); letter-spacing: 0; color: #7f958f; text-shadow: none; }
.sheet-meta:empty { display: none; }
.sheet-tab[aria-selected="true"] .sheet-meta { color: var(--mist); }
.sheet-panel { padding-top: 18px; }
.sheet-panel.is-inactive { height: 0; padding: 0; overflow: hidden; visibility: hidden; }
/* op een telefoon passen de tabs alleen zonder hun stand op twee regels; de stand staat ook in de tab zelf */
@media (max-width: 480px) {
  .sheet-tabs { column-gap: 22px; }
  .sheet-meta { display: none; }
}

/* ---------- Spelers: fiche, sessie en stand (ook in het venster van een speler) ---------- */

.token {
  --token: var(--brass-300);
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  padding-top: .06em;
  font: 700 22px/1 var(--font-display);
  color: var(--token);
  background: radial-gradient(circle at 36% 26%, #33574f 0%, #152f2d 48%, #091a1a 100%);
  border: 2px solid #050d0d;
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px var(--token), inset 0 0 8px rgba(0, 0, 0, .7), 0 3px 8px rgba(0, 0, 0, .55);
  text-shadow: 0 1px 0 #000;
  opacity: .82;
}
.token.is-online {
  opacity: 1;
  box-shadow: 0 0 0 1.5px var(--token), inset 0 0 8px rgba(0, 0, 0, .7), 0 0 16px 1px var(--token);
  text-shadow: 0 0 10px var(--token), 0 1px 0 #000;
}

.pill-online {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 3px 12px 2px 10px;
  font: 600 13.5px/1.4 var(--font-display);
  letter-spacing: .08em;
  color: var(--anima-soft);
  background: rgba(99, 245, 201, .1);
  border: 1px solid rgba(99, 245, 201, .5);
  border-radius: 20px;
}
.pill-online::before {
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--anima);
  box-shadow: 0 0 10px 2px rgba(99, 245, 201, .8);
  animation: pulse 2.8s ease-in-out infinite;
}
.stats {
  display: grid;
  grid-template-columns: 1.5fr .8fr 1.1fr;
  gap: 10px 14px;
  margin: 18px 0 0;
  padding: 14px 0;
  border-block: 1px solid rgba(201, 161, 78, .2);
}
.stats div { min-width: 0; }
.stats dt { font-size: 14.5px; font-style: italic; line-height: 1.2; color: var(--mist); }
.stats dd { margin: 2px 0 0; font-size: 18px; font-weight: 600; line-height: 1.25; color: var(--bone); }
.card-summary { margin: 16px 0 0; font-size: 18px; line-height: 1.5; color: var(--bone); }
.card-empty { margin: 16px 0 0; font-style: italic; color: var(--mist); }
.acts { margin: 18px 0 0; }
.acts-title { margin: 0 0 8px; font-size: 14.5px; font-style: italic; color: var(--mist); }
.acts-list { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.act { display: grid; grid-template-columns: minmax(84px, 34%) minmax(0, 1fr) 3.2em; align-items: center; gap: 10px; font-size: 16px; line-height: 1.2; }
.act-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act-track { display: block; height: 8px; background: rgba(0, 0, 0, .42); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .7), 0 1px 0 rgba(255, 255, 255, .05); border-radius: 1px 4px 4px 1px; }
.act-fill { display: block; height: 100%; min-width: 3px; background: linear-gradient(180deg, #f3dc9a, #c39a48); border-radius: 1px 4px 4px 1px; }
.act-value { text-align: right; color: var(--bone); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.chip {
  padding: 3px 11px 2px;
  font-size: 15.5px;
  line-height: 1.35;
  color: var(--anima-soft);
  background: rgba(99, 245, 201, .07);
  border: 1px solid rgba(99, 245, 201, .28);
  border-radius: 2px;
}

/* Slayer op de kaart: één regel boven de knop van de achievements, met een balkje voor de opdracht */
.card-slayer {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 5px 10px;
  margin: auto 0 0;
  padding: 16px 3px 0;
  font-size: 15.5px;
  line-height: 1.3;
  color: var(--mist);
}
.card-slayer + .card-foot { margin-top: 0; padding-top: 12px; }
.cs-icon { width: 20px; height: 20px; color: #e0715a; }
.cs-title { font: 600 13.5px/1.4 var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--brass-300); }
.cs-text { min-width: 0; color: var(--bone); overflow-wrap: anywhere; }
.cs-meter { grid-column: 1 / -1; height: 5px; }
/* de titel van Slayer naast de naam, en de trofeeën onder de naam: meteen te zien, niet pas in het venster */
.card-title { display: inline-block; margin-left: 10px; padding: 1px 8px; border: 1px solid rgba(255, 210, 122, .55); border-radius: 2px; font: 600 12.5px/1.5 var(--font-display); letter-spacing: .1em; text-transform: uppercase; vertical-align: 3px; color: #ffd27a; background: rgba(184, 67, 45, .25); }
.card-trophies { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 6px 0 0; padding: 0; list-style: none; }
.ct-trophy { display: inline-flex; align-items: center; gap: 5px; min-width: 0; padding: 1px 8px 1px 5px; border: 1px solid rgba(201, 161, 78, .45); border-radius: 2px; font-size: 14px; line-height: 1.4; color: var(--bone); background: rgba(201, 161, 78, .08); }
.ct-trophy.is-main { border-color: rgba(255, 210, 122, .7); }
.ct-icon { flex: none; width: 16px; height: 16px; color: var(--brass-300); }
.ct-trophy.is-main .ct-icon { color: #ffd27a; }
.ct-name { min-width: 0; overflow-wrap: anywhere; }

/* De ranglijst van Slayer, in de tab Bosshunt onder de bosses */
.slayer-rank { margin-top: 20px; padding: 16px clamp(16px, 2.4vw, 24px) 14px; }
.rk-head { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 2px 14px; }
.rk-head .feat-crest { grid-row: span 2; --d: #c8553d; --d-hi: #f4c9a8; --d-mid: #6d2a20; --d-lo: #1c0d0b; filter: drop-shadow(0 0 8px rgba(125, 95, 38, .6)); }
.rk-title { margin: 0; font: 700 21px/1.15 var(--font-display); letter-spacing: .08em; color: var(--brass-200); text-shadow: 0 2px 0 rgba(0, 0, 0, .7); }
.rk-what { margin: 0; font-size: 15.5px; line-height: 1.35; color: var(--mist); }
.rk-empty { margin: 12px 0 2px; font-style: italic; color: var(--mist); }
.rk-list { display: grid; margin: 12px 0 0; padding: 0; list-style: none; }
.rk-row {
  display: grid;
  grid-template-columns: 2.2em auto minmax(0, 1.2fr) 5.6em 7.4em 8.4em minmax(0, 1.4fr);
  align-items: center;
  gap: 2px 12px;
  padding: 8px 0;
  font-size: 16.5px;
  line-height: 1.3;
  border-top: 1px solid rgba(201, 161, 78, .16);
}
.rk-row .token { width: 30px; height: 30px; font-size: 15px; }
.rk-rank { font: 700 17px/1 var(--font-display); color: var(--brass-500); text-align: right; }
.rk-row:first-child .rk-rank { color: var(--brass-200); }
.rk-name { font-weight: 700; font-size: 18px; color: var(--bone); overflow-wrap: anywhere; }
.rk-level { color: var(--mist); white-space: nowrap; }
.rk-level b { font: 700 19px/1 var(--font-display); color: var(--brass-200); }
.rk-xp { color: var(--bone); text-align: right; white-space: nowrap; }
.rk-tasks { color: var(--mist); text-align: right; white-space: nowrap; }
.rk-task { color: var(--mist); font-style: italic; overflow-wrap: anywhere; }
@media (max-width: 860px) {
  .rk-row { grid-template-columns: 2em auto minmax(0, 1fr) auto; }
  .rk-xp { grid-column: 3; text-align: left; }
  .rk-tasks { grid-column: 4; }
  .rk-task { grid-column: 3 / -1; }
}

/* ---------- Het venster van een speler: zijn achievements ---------- */

/* zolang het venster open is, schuift de pagina eronder niet mee */
html.is-modal, html.is-modal body { overflow: hidden; }
.pd {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  font: inherit;
  color: var(--bone);
  border: 0;
  background-color: var(--storm-900);
  background-image:
    url("assets/grain-light.svg"),
    radial-gradient(70% 36% at 50% 0%, rgba(42, 150, 130, .16), transparent 70%),
    linear-gradient(180deg, #0a1c1d 0, #0b2020 40%, #071414 100%);
}
.pd[open] { display: flex; flex-direction: column; animation: pd-in .24s ease-out; }
.pd::backdrop { background: #050f0f; }
.pd-bar {
  position: relative;
  z-index: 1;
  flex: none;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 68px;
  padding: 10px var(--gutter);
  background: linear-gradient(180deg, #123130, #0b2020);
  border-bottom: 1px solid var(--brass-700);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .5);
}
.pd-who { flex: 1 1 auto; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 2px 14px; min-width: 0; }
.pd-name { margin: 0; font: 700 clamp(21px, 2.6vw, 27px)/1.15 var(--font-body); color: var(--bone); overflow-wrap: anywhere; }
.pd-char { margin: 1px 0 0; font-size: 16px; line-height: 1.25; color: var(--mist); overflow-wrap: anywhere; }
.pd-status { margin: 0; font-size: 16.5px; color: var(--mist); text-align: right; }
.pd-close { flex: none; width: 44px; min-height: 44px; }
.pd-close .icon { width: 22px; height: 22px; }
.pd-scroll { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.pd-scroll:focus-visible { outline-offset: -3px; }
.pd-wrap { display: grid; gap: 20px; width: min(100% - 2 * var(--gutter), 1320px); margin-inline: auto; padding: 24px 0 44px; }
/* de delen die bij een verversing worden vervangen; het Slayer-blok ertussen blijft staan */
.pd-part { display: contents; }

.pd-summary { display: grid; grid-template-columns: minmax(200px, .8fr) minmax(300px, 1.25fr) minmax(220px, .9fr); gap: 0; padding: 20px clamp(16px, 2.4vw, 28px); }
.pd-summary > * { min-width: 0; margin: 0; padding: 2px clamp(14px, 2.2vw, 28px); }
.pd-summary > :first-child { padding-left: 0; }
.pd-summary > :last-child { padding-right: 0; }
.pd-summary > * + * { border-left: 1px solid rgba(201, 161, 78, .2); }
/* van een ander (js/playerdialog.js): in plaats van punten en speeltijd waarom die er niet staan */
.pd-summary > .pd-private { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 14px 0 0; border-left: 0; border-top: 1px solid rgba(201, 161, 78, .2); font-size: 15px; line-height: 1.45; color: var(--mist); }
.pd-private .icon { flex: none; width: 20px; height: 20px; color: var(--brass-500); }
/* de laatste sessie: wat vroeger op de kaart van de speler stond (samenvatting, activiteiten, hoogtepunten) */
.pd-session { padding: 16px clamp(16px, 2.4vw, 28px) 18px; }
.pd-session .acts-title { margin: 0 0 6px; }
.pd-session .card-summary { margin: 0 0 12px; max-width: 78ch; }
.pd-session .acts-list { max-width: 760px; }
.pd-session .chips { margin-top: 14px; }
.pd-points { display: flex; align-items: baseline; gap: 10px; margin: 0; line-height: 1; }
.pd-points b { font: 700 clamp(46px, 6vw, 60px)/.95 var(--font-display); color: var(--brass-200); text-shadow: 0 2px 0 rgba(0, 0, 0, .7), 0 0 22px rgba(236, 208, 138, .22); }
.pd-points span { font-size: 19px; line-height: 1.2; color: var(--bone); }
.pd-points small { font-size: 16px; color: var(--mist); }
.pd-count { margin: 10px 0 8px; font-size: 16.5px; line-height: 1.3; color: var(--mist); }
.pd-meter { display: block; height: 8px; background: rgba(0, 0, 0, .42); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .7), 0 1px 0 rgba(255, 255, 255, .05); border-radius: 1px 4px 4px 1px; }
.pd-meter-fill { display: block; height: 100%; background: linear-gradient(180deg, #f3dc9a, #c39a48); border-radius: 1px 4px 4px 1px; }
.pd-styles { display: grid; align-content: center; gap: 8px; list-style: none; }
.pd-style-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto minmax(56px, 34%); align-items: center; gap: 12px; }
.pd-style-name { font: 600 16px/1.2 var(--font-display); letter-spacing: .08em; color: var(--brass-200); }
.pd-style-count { font-size: 15.5px; color: var(--mist); white-space: nowrap; }
.pd-style-meter { height: 6px; }
.pd-stats.stats { display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; gap: 6px; border-block: 0; }
.pd-stats div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 12px; }
.pd-stats dd { margin: 0; font-size: 17px; }
.pd-note { display: flex; gap: 10px; max-width: 96ch; margin: 0; font-size: 16px; line-height: 1.45; color: var(--mist); }
.pd-note .icon { margin-top: .16em; color: var(--brass-500); }

/* Een blok per groep (Dedication, Exploration, Combat); daarin per reeks een kop met de stand en
   een rij emblemen: een ladder van treden, of een verzameling (vaults, draken) */
.feat-crest { --d: #c9a14e; --d-hi: #f7e2a2; --d-mid: #7d5f26; --d-lo: #1f1a0e; display: block; width: 100%; height: auto; }
.pd-ladder {
  padding: 18px clamp(12px, 2vw, 26px) 22px;
  background-color: var(--storm-800);
  background-image:
    url("assets/grain-light.svg"),
    radial-gradient(90% 60% at 50% 0%, rgba(64, 140, 126, .2), transparent 66%),
    linear-gradient(180deg, #132d2c 0%, #0b1e1e 100%);
  box-shadow: inset 0 0 46px rgba(0, 0, 0, .5);
}
.pd-ladder-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding-bottom: 12px; border-bottom: 1px solid rgba(201, 161, 78, .2); }
.pd-ladder-head .feat-crest { flex: none; width: 50px; filter: drop-shadow(0 0 8px rgba(125, 95, 38, .7)); }
.pd-ladder-name { margin: 0; font: 700 clamp(22px, 2.8vw, 28px)/1.1 var(--font-display); letter-spacing: .08em; color: var(--brass-200); text-shadow: 0 2px 0 rgba(0, 0, 0, .7); }
.pd-ladder-count { margin: 0 0 0 auto; padding-top: .3em; font-size: 16.5px; color: var(--mist); }
.pd-ladder-count b { font-weight: 600; color: var(--bone); }

/* Slayer: links het embleem met het level, daarnaast de ervaring en de opdracht; daaronder de knoppen
   (met het formulier voor het serverwachtwoord), wat een hoger level opent en wat er voltooid is */
.sl { --d: #c8553d; --d-hi: #f4c9a8; --d-mid: #6d2a20; --d-lo: #1c0d0b; }
.sl[hidden] { display: none; }
.sl .pd-ladder-head .feat-crest { width: 50px; }
.sl-label { margin: 0; font: 600 13px/1.4 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--brass-500); }
.sl-main { display: grid; grid-template-columns: minmax(130px, 176px) minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; gap: 8px clamp(16px, 2.6vw, 34px); padding-top: 14px; }
.sl-emblem { position: relative; width: 100%; max-width: 176px; aspect-ratio: 1; justify-self: center; }
.sl-emblem .feat-aura { opacity: .34; }
.sl-emblem .ft-shape { filter: drop-shadow(0 0 1.6px var(--d)); }
.sl-emblem .ft-eye { fill: #fff3c4; filter: drop-shadow(0 0 1.4px #ffb37a); }
.sl-level { display: grid; gap: 5px; min-width: 0; }
.sl-level-now { margin: 0; display: flex; align-items: baseline; gap: 10px; line-height: 1; }
.sl-level-now span { font-size: 19px; color: var(--bone); }
.sl-level-now b { font: 700 clamp(46px, 6vw, 60px)/.95 var(--font-display); color: var(--brass-200); text-shadow: 0 2px 0 rgba(0, 0, 0, .7), 0 0 22px rgba(236, 208, 138, .22); }
.sl-xp { margin: 4px 0 2px; font-size: 16.5px; line-height: 1.3; color: var(--mist); }
.sl-totals { display: flex; flex-wrap: wrap; gap: 4px 26px; margin: 8px 0 0; }
.sl-totals div { min-width: 0; }
.sl-totals dt { font-size: 14.5px; font-style: italic; line-height: 1.2; color: var(--mist); }
.sl-totals dd { margin: 1px 0 0; font-size: 18px; font-weight: 600; color: var(--bone); }
.sl-task { display: grid; gap: 4px; min-width: 0; padding: 14px 16px 14px; background: rgba(4, 14, 14, .45); border: 1px solid rgba(201, 161, 78, .3); border-radius: 2px; box-shadow: inset 0 0 26px rgba(0, 0, 0, .35); }
.sl-task-name { margin: 0; font: 700 clamp(21px, 2.5vw, 26px)/1.15 var(--font-display); letter-spacing: .05em; color: var(--brass-200); overflow-wrap: anywhere; }
.sl-task.is-idle .sl-task-name { color: var(--mist); }
.sl-task-area { margin: 0; font-size: 16px; color: var(--mist); }
.sl-task-count { margin: 6px 0 2px; font-size: 19px; font-weight: 600; color: var(--bone); }
.sl-task-meter { height: 10px; }
.sl-task-meter .pd-meter-fill { background: linear-gradient(180deg, #f0a58c, #b8432d); }
.sl-task-what { margin: 4px 0 0; font-size: 15.5px; line-height: 1.4; color: var(--mist); }
.sl-story { margin: 6px 0 4px; padding: 8px 12px; border-left: 3px solid rgba(201, 161, 78, .55); background: rgba(201, 161, 78, .07); font: italic 16.5px/1.45 var(--font-body, inherit); color: var(--bone); overflow-wrap: anywhere; }
.sl-weak { margin-top: 10px; display: grid; gap: 4px; }
.sl-weak-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sl-weak-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 15px; color: var(--mist); }
.sl-weak-name { font-weight: 600; color: var(--bone); }
.sl-weak-set { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px; }
.sl-weak-label { font-size: 13.5px; }
.sl-chip { padding: 1px 7px; border: 1px solid currentColor; border-radius: 2px; font-size: 13.5px; font-weight: 600; letter-spacing: .03em; }
.sl-weak-set.is-weak .sl-chip { color: #9fe08a; }
.sl-weak-set.is-resist .sl-chip { color: #f0a58c; }
.sl-weak-set.is-immune .sl-chip { color: #b9c4c4; }
.sl-map { justify-self: start; margin-top: 12px; display: inline-flex; align-items: center; gap: 8px; }
.sl-actions { margin-top: 16px; }
.sl-buttons, .lk-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.sl-buttons .btn, .lk-buttons .btn { min-height: 46px; padding-inline: 20px; }
.sl-buttons [hidden], .lk-buttons [hidden] { display: none; }
.sl-closed { margin: 0; font-size: 15.5px; font-style: italic; color: var(--mist); }
/* na een bossgevecht: hoeveel zwermopdrachten er nog komen voordat er weer een boss kan komen */
.sl-boss-in { flex-basis: 100%; margin: 0; font-size: 15.5px; color: #f0a58c; }
/* Account koppelen (js/accountlink.js): een eigen blok boven Slayer, met de koppel-lodestone, wat koppelen is en de knoppen */
.lk[hidden] { display: none; }
.lk-crest { flex: none; width: 34px; height: 34px; color: #6fe3dc; filter: drop-shadow(0 0 6px rgba(111, 227, 220, .45)); }
.lk-lines { margin: 12px 0 0; padding: 0; list-style: none; font-size: 16.5px; line-height: 1.45; color: var(--bone); }
.lk-note { max-width: 760px; margin: 6px 0 12px; font-size: 15px; line-height: 1.45; color: var(--mist); }
.lk-wait { margin: 10px 0 0; font-size: 17px; font-weight: 600; color: var(--brass-300); }
.lk-wait[hidden] { display: none; }
.lk-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 12px 0 0; }
.lk-chosen { flex: 1 1 200px; margin: 0; font-size: 16.5px; color: var(--bone); overflow-wrap: anywhere; }
.lk-chosen b { color: #6fe3dc; }
.lk-none { font-style: italic; color: var(--mist); }
.lk-map { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.sl-form, .lk-form { max-width: 460px; margin: 12px 0 0; padding: 14px; }
/* De daglimiet (js/limitpanel.js): een eigen blok onder Account koppelen, in dezelfde opbouw */
.dl-crest { flex: none; width: 34px; height: 34px; color: var(--brass-300); filter: drop-shadow(0 0 6px rgba(236, 208, 138, .4)); }
.dl-count[data-stage="ten"] { color: var(--brass-300); }
.dl-count[data-stage="one"], .dl-count[data-stage="over"] { color: var(--ember-soft); }
.dl-warn { max-width: 760px; margin: 10px 0 0; padding: 8px 12px; font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--brass-200); border: 1px solid rgba(236, 208, 138, .45); border-radius: 2px; background: rgba(201, 161, 78, .1); }
.dl-warn[data-stage="one"], .dl-warn[data-stage="over"] { color: var(--ember-soft); border-color: rgba(240, 138, 60, .55); background: rgba(240, 138, 60, .1); }
.dl-warn[hidden], .dl-form[hidden] { display: none; }
.dl-select { width: 100%; min-width: 0; height: 44px; padding: 0 10px; font: 500 17px/1.2 var(--font-body); color: var(--bone); background: rgba(4, 14, 14, .62); border: 1px solid var(--brass-700); border-radius: 2px; }
.dl-select:focus-visible { outline: 2px solid var(--anima); outline-offset: 1px; border-color: var(--brass-300); }
.dl-effect { margin: 8px 0; font-size: 15px; line-height: 1.4; color: var(--mist); }
.dl-effect:empty { display: none; }
.sl-form-what, .lk-form-what { margin: 0; font-size: 16px; line-height: 1.4; color: var(--bone); }
.sl-foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px clamp(16px, 2.6vw, 34px); margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(201, 161, 78, .14); }
.sl-foot > .sl-note { grid-column: 1 / -1; max-width: none; font-size: 15.5px; }
.sl-next-list, .sl-history-list { display: grid; gap: 5px; margin: 8px 0 0; padding: 0; list-style: none; font-size: 16.5px; line-height: 1.4; color: var(--bone); }
.sl-history-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 2px 14px; align-items: baseline; }
.sl-history-xp { color: var(--brass-300); white-space: nowrap; }
.sl-history-at { min-width: 6.4em; font-size: 15px; color: var(--mist); text-align: right; white-space: nowrap; }
.sl-empty { margin: 8px 0 0; font-style: italic; color: var(--mist); }
/* de bosses met hun vrijspeel-level en vaste ervaring: over de hele breedte, dicht tot je hem opent */
.sl-foot > .sl-bosses { grid-column: 1 / -1; }
.sl-bosses > summary { cursor: pointer; }
.sl-bosses-note { max-width: 760px; margin: 8px 0 0; font-size: 15px; line-height: 1.4; color: var(--mist); }
.sl-boss-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 4px 24px; margin: 10px 0 0; padding: 0; list-style: none; }
.sl-boss-list li { display: grid; grid-template-columns: 5.6em minmax(0, 1fr) auto; gap: 2px 10px; align-items: baseline; padding: 3px 0; border-bottom: 1px solid rgba(201, 161, 78, .1); font-size: 15.5px; line-height: 1.35; color: var(--bone); }
.sl-boss-list li.is-locked { color: var(--mist); }
.sl-boss-level { white-space: nowrap; color: var(--brass-500); }
.sl-boss-name { min-width: 0; overflow-wrap: anywhere; }
/* of een boss leeft: een schatting van de server */
.sl-life { margin: 4px 0 0; font-size: 14.5px; color: var(--mist); }
.sl-free { max-width: 640px; margin: 8px 0 0; font-size: 15px; line-height: 1.4; color: var(--mist); }
.sl-boss-name b { font-weight: 600; }
.sl-boss-name small { display: block; font-size: 13.5px; color: var(--mist); }
.sl-boss-name .sl-life { margin: 0; }
.sl-boss-xp { white-space: nowrap; color: var(--brass-300); }
.sl-boss-list li.is-locked .sl-boss-xp { color: var(--mist); }
/* bossgevechten: een eigen kleur, het label naast "Opdracht" */
.sl-label .sl-badge { margin-left: 10px; padding: 1px 8px; border: 1px solid currentColor; border-radius: 2px; font-size: 12px; letter-spacing: .1em; vertical-align: 1px; color: #f0a58c; }
.sl-task.is-boss { border-color: rgba(240, 165, 140, .55); box-shadow: inset 0 0 30px rgba(184, 67, 45, .22), 0 0 0 1px rgba(184, 67, 45, .18); }
.sl-task.is-main .sl-badge { color: #ffd27a; background: rgba(184, 67, 45, .35); }
.sl-task.is-boss .sl-task-name { color: #ffd9b8; }
.sl-helps { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.sl-helps li { padding: 6px 10px; border-left: 3px solid rgba(159, 224, 138, .5); background: rgba(159, 224, 138, .06); font-size: 15px; line-height: 1.4; color: var(--bone); overflow-wrap: anywhere; }
.sl-helps li b { font-weight: 600; color: #9fe08a; }
.sl-helps li.is-goal { border-left-color: var(--brass-300); background: rgba(201, 161, 78, .1); }
.sl-helps li.is-goal b { color: var(--brass-200); }
.sl-assign-boss { border-color: rgba(240, 165, 140, .7); }
.sl-goal-holder:empty { display: none; }
.sl-goal { display: grid; gap: 4px; max-width: 760px; margin: 0 0 14px; padding: 12px 14px; border: 1px dashed rgba(201, 161, 78, .35); border-radius: 2px; background: rgba(201, 161, 78, .04); }
.sl-goal p { margin: 0; }
.sl-goal-what, .sl-goal-note, .sl-goal-station, .sl-goal-others { font-size: 15px; line-height: 1.4; color: var(--mist); }
.sl-goal-name { font: 700 20px/1.2 var(--font-display); letter-spacing: .04em; color: var(--brass-200); overflow-wrap: anywhere; }
.sl-goal-recipe { font-size: 15.5px; line-height: 1.4; color: var(--bone); overflow-wrap: anywhere; }
.sl-goal-list { margin: 2px 0 0; padding-left: 18px; font-size: 15px; line-height: 1.4; color: var(--bone); overflow-wrap: anywhere; }
.sl-goal-sub { margin-top: 6px !important; font-size: 13.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--brass-500); }
.sl-goal-chips { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sl-goal-chips li { display: inline-flex; align-items: baseline; gap: 6px; padding: 2px 8px; border: 1px solid rgba(159, 224, 138, .5); border-radius: 2px; font-size: 14.5px; color: var(--bone); }
.sl-goal-chips li.is-later { border-color: rgba(185, 196, 196, .35); color: var(--mist); }
.sl-goal-kind { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #f0a58c; }
.sl-goal-note a { color: var(--brass-300); }
.sl-kind, .lk-stones { display: grid; gap: 6px; margin: 10px 0 0; padding: 0; border: 0; }
.sl-kind legend, .lk-stones legend { margin-bottom: 4px; padding: 0; font-size: 15px; font-weight: 600; color: var(--bone); }
.sl-kind label, .lk-stones label { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0 10px; min-height: 44px; padding: 4px 10px; border: 1px solid rgba(201, 161, 78, .3); border-radius: 2px; cursor: pointer; }
.sl-kind label:has(input:checked), .lk-stones label:has(input:checked) { border-color: var(--brass-300); background: rgba(201, 161, 78, .1); }
.sl-kind input, .lk-stones input { grid-row: span 2; width: 18px; height: 18px; margin: 0; accent-color: var(--brass-300); }
.sl-kind span, .lk-stones span { font-weight: 600; color: var(--bone); }
.sl-kind small { font-size: 14px; color: var(--mist); }
.sl-kind label.is-locked { cursor: not-allowed; opacity: .7; }
/* de bonussen: reeksen, de lopende opdracht, de opbouw van de laatste; wat het level nog niet heeft, grijs */
.sl-foot > .sl-bonus { grid-column: 1 / -1; }
.sl-bonus { display: grid; gap: 8px; }
.sl-bonus p { margin: 0; }
.sl-bonus-sub { font-size: 13.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--brass-500); }
.sl-bonus-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 16px; line-height: 1.4; color: var(--bone); }
.sl-bonus-list li.is-locked { color: var(--mist); }
.sl-bonus-list small { font-size: 14px; color: var(--mist); }
.sl-streaks { font-size: 16.5px; }
.sl-streaks li.is-open span { color: var(--brass-200); }
.sl-bonus-live { font-size: 16px; color: #9fe08a; }
.sl-build { display: grid; gap: 4px; }
.sl-build-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sl-build-list li { display: inline-flex; align-items: baseline; gap: 6px; padding: 2px 8px; border: 1px solid rgba(201, 161, 78, .35); border-radius: 2px; font-size: 15px; color: var(--bone); }
.sl-build-list li b { font-weight: 600; color: var(--brass-300); }
.sl-build-list li small { font-size: 13.5px; color: var(--mist); }
.sl-build-list li.is-daily { border-color: rgba(159, 224, 138, .5); }
.sl-build-list li.is-total { border-color: var(--brass-300); background: rgba(201, 161, 78, .1); }
.sl-bonus-note { max-width: 760px; font-size: 15px; line-height: 1.4; color: var(--mist); }
.sl-bonus-rules > summary { cursor: pointer; }
.sl-bonus-rules > .sl-bonus-list { margin-top: 6px; font-size: 15.5px; }
.sl-kind label.is-locked small { color: #f0a58c; }
.sl-form select { width: 100%; min-width: 0; height: 44px; padding: 0 10px; font: 500 17px/1.2 var(--font-body); color: var(--bone); background: rgba(4, 14, 14, .62); border: 1px solid var(--brass-700); border-radius: 2px; }
.sl-form select:focus-visible { outline: 2px solid var(--anima); outline-offset: 1px; border-color: var(--brass-300); }
/* de boss van de week, bovenaan het blok */
.sl-week { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2px 12px; margin: 14px 0 0; padding: 10px 14px; border: 1px solid rgba(240, 165, 140, .45); border-radius: 2px; background: rgba(184, 67, 45, .12); }
.sl-week p { margin: 0; }
.sl-week-icon { grid-row: span 2; width: 26px; height: 26px; color: #f0a58c; }
.sl-week-head { font: 700 18px/1.25 var(--font-display); letter-spacing: .05em; color: #ffd9b8; overflow-wrap: anywhere; }
.sl-week-first { font-size: 15px; line-height: 1.4; color: var(--mist); }
.rk-week { margin: 10px 0 0; font-size: 15.5px; color: var(--mist); }
.rk-week b { font-weight: 600; color: #ffd9b8; }
/* een Elite-opdracht: de twee delen, wat nu telt helder */
.sl-task.is-elite .sl-badge { color: #ffd27a; border-color: #ffd27a; }
.sl-parts { display: grid; gap: 2px; margin: 6px 0 0; padding-left: 22px; font-size: 16px; line-height: 1.4; color: var(--mist); }
.sl-parts li.is-now { color: var(--bone); font-weight: 600; }
.sl-parts li.is-done { text-decoration: line-through; }
.sl-parts small { font-weight: 400; color: var(--mist); }
.sl-assign-elite { border-color: rgba(255, 210, 122, .75); }
.sl-title { margin: 2px 0 0; font: 600 14px/1.4 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: #ffd27a; }
/* de trofeeënkast en de mijlpalen: over de hele breedte, dicht tot je ze opent; wat nog niet kan, grijs */
.sl-foot > .sl-cabinet, .sl-foot > .sl-milestones { grid-column: 1 / -1; }
.sl-cabinet > summary, .sl-milestones > summary { cursor: pointer; }
.sl-trophy-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 4px 24px; margin: 10px 0 0; padding: 0; list-style: none; }
.sl-trophy-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 10px; align-items: center; padding: 4px 0; border-bottom: 1px solid rgba(201, 161, 78, .1); font-size: 15.5px; line-height: 1.35; color: var(--bone); }
.sl-trophy-icon { grid-row: span 2; width: 22px; height: 22px; color: var(--brass-300); }
.sl-trophy-list li.is-earned .sl-trophy-icon { color: #ffd27a; filter: drop-shadow(0 0 4px rgba(255, 210, 122, .45)); }
.sl-trophy-list li.is-open, .sl-trophy-list li.is-locked { color: var(--mist); }
.sl-trophy-list li.is-locked .sl-trophy-icon, .sl-trophy-list li.is-open .sl-trophy-icon { color: #5f7173; }
.sl-trophy-name { min-width: 0; overflow-wrap: anywhere; }
.sl-trophy-name b { font-weight: 600; }
.sl-trophy-name small { margin-left: 8px; font-size: 13.5px; color: var(--mist); }
.sl-trophy-state { font-size: 14px; color: var(--mist); }
.sl-trophy-list li.is-earned .sl-trophy-state { color: var(--brass-300); }
.sl-milestone-list { display: grid; gap: 4px; margin: 10px 0 0; padding: 0; list-style: none; }
.sl-milestone-list li { display: grid; grid-template-columns: 5.6em minmax(0, 1fr); gap: 2px 10px; align-items: baseline; padding: 3px 0; border-bottom: 1px solid rgba(201, 161, 78, .1); font-size: 15.5px; line-height: 1.4; color: var(--bone); }
.sl-milestone-list li.is-locked { color: var(--mist); }
.sl-milestone-level { white-space: nowrap; color: var(--brass-500); }
.sl-milestone-list li.is-open .sl-milestone-level { color: var(--brass-300); }
.sl-trophy-pick label { grid-template-columns: auto minmax(0, 1fr) auto; }
.sl-trophy-pick input { grid-row: auto; }
.sl-trophy-pick label:has(input:disabled:not(:checked)) { opacity: .6; cursor: not-allowed; }

.pd-series { padding-top: 16px; }
.pd-series + .pd-series { margin-top: 18px; border-top: 1px solid rgba(201, 161, 78, .14); }
.pd-series-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.pd-series-head .feat-crest { flex: none; width: 34px; opacity: .9; }
.pd-series-title { flex: 1 1 220px; min-width: 0; }
.pd-series-name { margin: 0; font: 600 18.5px/1.2 var(--font-display); letter-spacing: .07em; color: var(--bone); }
.pd-series-what { margin: 1px 0 0; font-size: 15.5px; line-height: 1.3; color: var(--mist); }
.pd-progress { flex: 0 1 300px; display: grid; gap: 5px; min-width: 0; }
.pd-progress-text { margin: 0; font-size: 16.5px; line-height: 1.2; color: var(--bone); text-align: right; }
.pd-progress-text small { font-size: 15px; color: var(--mist); }
.pd-progress.is-done .pd-progress-text { color: var(--brass-200); }
.pd-progress .pd-meter { height: 7px; }
.pd-progress .pip-group { justify-content: flex-end; flex-wrap: wrap; gap: 7px; padding: 2px 4px; }
.pd-progress .pip { width: 10px; height: 10px; }
.pd-progress .pip.is-on { box-shadow: 0 0 7px 0 var(--d); }

.feats { --cols: 7; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.feats[data-n="4"] { --cols: 4; }
.feats[data-n="5"] { --cols: 5; }
.feats[data-n="12"] { --cols: 6; row-gap: 14px; }
.feat {
  --m: #5f7173;
  --d: #5f7173;
  --d-hi: #93a6a3;
  --d-mid: #3b4a48;
  --d-lo: #141d1c;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  text-align: center;
}
.feat.is-earned { --d: var(--m); --d-hi: #f1dfae; --d-mid: #6f5a2c; --d-lo: #1f1a0e; }
@supports (color: color-mix(in oklab, red 50%, blue)) {
  .feat.is-earned {
    --d-hi: color-mix(in oklab, var(--d) 45%, #fffbe6);
    --d-mid: color-mix(in oklab, var(--d) 60%, #05100f);
    --d-lo: color-mix(in oklab, var(--d) 24%, #05100f);
  }
  /* op slot: nog een zweem van de kleur, zodat de ladder ook dan te lezen is */
  .feat.is-locked {
    --d: color-mix(in oklab, var(--m) 40%, #3c4a4c);
    --d-hi: color-mix(in oklab, var(--m) 26%, #8b9e9b);
    --d-mid: color-mix(in oklab, var(--m) 20%, #2c3839);
  }
}
/* Dragon, de hoogste trede van de speeltijd: drakenrood met goud */
.feat.is-jewel.is-earned { --d-hi: #ffd98a; --d-mid: #7c1d14; --d-lo: #2b0c08; }
.feat-art { position: relative; width: min(100%, 172px); aspect-ratio: 1; }
.feats[data-n="12"] .feat-art { width: min(100%, 138px); }
.feat-svg { position: relative; display: block; width: 100%; height: 100%; overflow: visible; }
.feat-aura {
  position: absolute;
  inset: 16%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--d) 0%, var(--d) 30%, transparent 68%);
  opacity: .5;
  animation: aura 5.2s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -1.3s);
}
.feat.is-jewel .feat-aura { inset: 4%; background: radial-gradient(circle, #ff7a3c 0%, var(--d) 34%, transparent 70%); }
.feat.is-locked .feat-art { opacity: .78; }
.feat.is-earned .ft-shape { filter: drop-shadow(0 0 1.6px var(--d)); }
.ft-tint { fill: var(--d-lo); }
.ft-main { fill: var(--d); }
.ft-shade { fill: var(--d-mid); }
.ft-hi { fill: var(--d-hi); }
.ft-ink { fill: #071011; }
.ft-glow { fill: var(--d); }
.ft-eye { fill: var(--d-hi); }
.feat.is-earned .ft-eye { fill: #fff3c4; filter: drop-shadow(0 0 1.2px var(--d-hi)); }
.ft-hi-line { stroke: var(--d-hi); }
.ft-lo-line { stroke: var(--d-lo); }
.ft-main-line { stroke: var(--d); }
.ft-ink-line { stroke: #071011; }
.ft-gem { fill: #fff6d2; stroke: #071011; stroke-width: .5; }
.ft-rivet { fill: var(--d-hi); stroke: #071011; stroke-width: .4; }
.ft-rim { fill: none; stroke: var(--d); stroke-width: 1.9; stroke-linejoin: round; opacity: .85; }
.ft-wing { fill: var(--d); }
.ft-wing-shade { fill: var(--d-mid); }
.ft-check { stroke: var(--brass-200); }
.ft-level { font: 700 14.5px/1 var(--font-display); font-variant-numeric: lining-nums; fill: var(--brass-200); }
.ft-level.is-long { font-size: 10.5px; letter-spacing: -.02em; }
.feat.is-locked .ft-gem { fill: var(--d-hi); }
.feat-text { min-width: 0; max-width: 100%; margin-top: -2px; }
.feat-name { margin: 0; font: 600 15.5px/1.25 var(--font-display); letter-spacing: .05em; color: var(--brass-200); overflow-wrap: anywhere; }
.feat.is-locked .feat-name { color: var(--mist); }
.feat.is-jewel.is-earned .feat-name { color: #ffb37a; text-shadow: 0 0 12px rgba(216, 52, 43, .6); }
.feat-goal { margin: 3px 0 0; font-size: 15px; line-height: 1.25; color: var(--bone); }
.feat.is-locked .feat-goal { color: #8fa39d; }
.feat-points { margin: 4px 0 0; font-size: 14.5px; line-height: 1.25; color: var(--brass-500); }
.feat.is-locked .feat-points { color: #7f958f; }
.feat-state { margin: 2px 0 0; font-size: 15px; line-height: 1.3; color: var(--bone); }
.feat.is-locked .feat-state { font-style: italic; color: #7f958f; }
/* twaalf vaults in twee rijen: namen van één en van twee regels op één lijn houden */
@media (min-width: 641px) {
  .feats[data-n="12"] .feat-name { display: flex; align-items: flex-end; justify-content: center; min-height: 2.5em; }
}
@media (max-width: 1079px) {
  .feats { --cols: 4; gap: 18px 6px; }
  .feats[data-n="5"] { --cols: 5; }
  .feats[data-n="12"] { --cols: 4; }
  .pd-summary { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); row-gap: 16px; }
  .pd-summary > .pd-stats { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 14px 0 0; border-left: 0; border-top: 1px solid rgba(201, 161, 78, .2); }
  .pd-summary > .pd-styles { padding-right: 0; }
  .pd-summary > .pd-private { margin-top: 0; }
  .pd-stats div { display: block; }
  .sl-main { grid-template-columns: minmax(110px, 150px) minmax(0, 1fr); }
  .sl-task { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .pd-bar { gap: 10px; min-height: 60px; padding-block: 8px; }
  .pd-who { grid-template-columns: auto minmax(0, 1fr); gap: 0 12px; }
  .pd-status { grid-column: 2; font-size: 15px; text-align: left; }
  .pd-who .token { grid-row: span 2; }
  .pd-wrap { gap: 16px; padding: 16px 0 32px; }
  .pd-summary { grid-template-columns: minmax(0, 1fr); padding: 16px 14px; }
  .pd-summary > * { padding: 0; }
  .pd-summary > * + * { margin-top: 14px; padding-top: 14px; border-left: 0; border-top: 1px solid rgba(201, 161, 78, .2); }
  .pd-summary > .pd-stats { grid-template-columns: 1fr 1fr; margin-top: 0; }
  .pd-summary > .pd-private { grid-column: auto; font-size: 14.5px; }
  .pd-stats div:first-child { grid-column: 1 / -1; }
  .pd-style-row { grid-template-columns: 30px minmax(0, 1fr) auto minmax(40px, 22%); gap: 8px; }
  .pd-style-name { font-size: 14.5px; letter-spacing: .05em; }
  .pd-note { font-size: 15.5px; }
  .sl-main { grid-template-columns: 104px minmax(0, 1fr); gap: 10px 14px; padding-top: 10px; }
  .sl-level-now b { font-size: 42px; }
  .sl-xp { font-size: 15.5px; }
  .sl-totals { gap: 4px 18px; }
  .sl-task { padding: 12px; }
  .sl-buttons .btn, .lk-buttons .btn { flex: 1 1 100%; }
  .sl-form, .lk-form { max-width: none; }
  .lk-map { flex: 1 1 100%; justify-content: center; }
  .sl-foot { grid-template-columns: minmax(0, 1fr); margin-top: 14px; padding-top: 14px; }
  .sl-history-list li { grid-template-columns: minmax(0, 1fr) auto; }
  .sl-history-at { grid-column: 1 / -1; min-width: 0; text-align: left; }
  .sl.pd-ladder { padding-bottom: 14px; }
  .pd-ladder { padding: 14px 12px 10px; }
  .pd-ladder-head .feat-crest { width: 42px; }
  .pd-series { padding-top: 14px; }
  .pd-series + .pd-series { margin-top: 10px; }
  .pd-series-title { flex-basis: 60%; }
  .pd-progress { flex: 1 1 100%; }
  .pd-progress-text { text-align: left; }
  .pd-progress .pip-group { justify-content: flex-start; padding-left: 4px; }
  /* een ladder wordt een lijst: embleem links, tekst rechts */
  .is-ladder .feats { --cols: 1; gap: 0; margin-top: 6px; }
  .is-ladder .feat { flex-direction: row; align-items: center; gap: 12px; padding: 6px 0; text-align: left; }
  .is-ladder .feat + .feat { border-top: 1px solid rgba(201, 161, 78, .16); }
  .is-ladder .feat-art { width: 104px; flex: none; }
  .is-ladder .feat-text { margin-top: 0; }
  /* een verzameling blijft een rooster: drie vaults of twee draken naast elkaar */
  .is-collection .feats { --cols: 3; gap: 12px 4px; margin-top: 10px; }
  .is-collection .feats[data-n="4"] { --cols: 2; }
  .is-collection .feats[data-n="4"] .feat-art { width: min(100%, 132px); }
  .is-collection .feat-name { font-size: 12.5px; letter-spacing: 0; overflow-wrap: break-word; }
  .is-collection .feats[data-n="4"] .feat-name { font-size: 15px; letter-spacing: .04em; }
  .is-collection .feat-points, .is-collection .feat-state { font-size: 14px; }
}
@keyframes pd-in { from { opacity: 0; transform: translateY(12px) scale(.985); } }

/* ---------- Kaart ---------- */

.map-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
/* de serverpagina: de kaart en het zijpaneel naast elkaar; onder ongeveer 900px komt het paneel eronder */
.sheet .map-layout { display: flex; flex-wrap: wrap; }
.sheet .map-frame { flex: 999 1 620px; min-width: 0; padding: 10px; }

.is-loading .map-layout, .is-loading .hunt-intro { display: none; }
body:not(.is-loading) .map-placeholder { display: none; }
.map-frame { padding: 14px; }
.map-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.map-toolbar-gap { flex: 1 1 0; }
.map-stage { position: relative; }
.map-viewport {
  position: relative;
  height: clamp(340px, 66vh, 740px);
  overflow: hidden;
  background: #667674;
  border: 1px solid #060d0d;
  box-shadow: 0 0 0 1px rgba(201, 161, 78, .45);
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  contain: layout paint;
}
.map-viewport.is-dragging { cursor: grabbing; }

/* Kaart op volledig scherm: echt (Fullscreen API) of venstervullend waar dat niet kan. */
.has-full-map, .has-full-map body { overflow: hidden; }
.has-full-map main { z-index: 30; }
.map-frame.is-full {
  --chamfer: 0px;
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 10px max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  overflow: hidden;
}
.map-frame.is-full .map-stage { flex: 1 1 auto; min-height: 0; }
.map-frame.is-full .map-viewport { height: 100%; }
.map-frame.is-full .map-layers { flex: none; max-height: 34vh; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.map-frame.is-full .legend { display: none; }
.map-frame.is-full .base-panel { position: absolute; left: 12px; bottom: 12px; width: min(270px, calc(100% - 24px)); max-height: calc(100% - 24px); margin-top: 0; }

/* Volledig scherm op een telefoon: de kaart vult alles, de knoppen zweven erboven, de lagen zitten achter het menu. */
.map-menu { display: none; }
@media (max-width: 760px), (max-height: 560px) {
  .map-frame.is-full { padding: 0; border: 0; }
  .map-frame.is-full .map-viewport { border: 0; box-shadow: none; }
  .map-frame.is-full .map-toolbar {
    position: absolute;
    z-index: 5;
    top: max(8px, env(safe-area-inset-top));
    left: max(8px, env(safe-area-inset-left));
    right: max(8px, env(safe-area-inset-right));
    flex-wrap: nowrap;
    margin: 0;
    pointer-events: none;
  }
  .map-frame.is-full .map-toolbar .btn {
    width: 44px;
    min-height: 44px;
    padding: 0;
    box-shadow: inset 0 1px 0 rgba(247, 226, 162, .14), inset 0 0 0 1px rgba(0, 0, 0, .5), 0 3px 10px rgba(0, 0, 0, .6);
    pointer-events: auto;
  }
  .map-frame.is-full .map-toolbar .btn span { display: none; }
  .map-frame.is-full .map-toolbar .btn .icon { width: 20px; height: 20px; }
  .map-frame.is-full .map-menu { display: inline-flex; }
  .map-frame.is-full .map-layers {
    display: none;
    position: absolute;
    z-index: 6;
    top: calc(max(8px, env(safe-area-inset-top)) + 52px);
    left: max(8px, env(safe-area-inset-left));
    right: max(8px, env(safe-area-inset-right));
    max-height: calc(100% - 68px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    margin: 0;
    padding: 12px 12px 10px;
    background: rgba(9, 24, 24, .97);
    border: 1px solid var(--brass-700);
    border-radius: 2px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .65);
  }
  .map-frame.is-full.layers-open .map-layers { display: block; }
  .map-frame.is-full .base-panel { bottom: max(12px, env(safe-area-inset-bottom)); }
}
.map-viewport::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 90px rgba(6, 16, 16, .6);
}
.map-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.map-world img {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  display: block; pointer-events: none; -webkit-user-drag: none; -webkit-user-select: none; user-select: none;
}
.map-world img.is-hi { opacity: 0; visibility: hidden; }
.map-world img.is-hi.is-ready { opacity: 1; visibility: visible; transition: opacity .6s ease; }
/* Van onder naar boven: het kaartblad met de gebieden, het canvas (vindplaatsen, todo-lagen, bouwdelen),
   de markeringen, en dan het zoekresultaat met een eigen canvas en eigen markeringen (.is-over, js/map.js).
   Allemaal zonder z-index, zodat de DOM-volgorde telt; de kaartjes, de naam van het gebied en de panelen
   (z-index 3 en hoger) liggen daar weer boven. */
.map-canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.map-markers { position: absolute; inset: 0; pointer-events: none; }
.map-hint {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 3;
  margin: 0;
  padding: 3px 10px 2px;
  font-size: 15px;
  font-style: italic;
  color: var(--bone);
  background: rgba(8, 22, 22, .82);
  border: 1px solid rgba(201, 161, 78, .4);
  pointer-events: none;
}

.map-tip {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  margin: 0;
  padding: 2px 8px 1px;
  font: 600 14.5px/1.3 var(--font-body);
  color: var(--bone);
  white-space: nowrap;
  background: rgba(8, 22, 22, .93);
  border: 1px solid rgba(201, 161, 78, .6);
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .5);
  pointer-events: none;
}
/* met de aantallen van een todo-lijst erbij: een kaartje van een paar regels, dat op een smal scherm afbreekt */
.map-tip.has-needs { width: max-content; max-width: min(330px, calc(100% - 8px)); padding: 5px 9px 4px; white-space: normal; overflow-wrap: anywhere; }
.tip-head { display: block; margin-bottom: 2px; color: var(--brass-200); }
.tip-need { display: flex; align-items: flex-start; gap: 6px; font-weight: 500; }
.tip-need + .tip-need { margin-top: 2px; }
.tip-need .swatch { margin-top: 2px; }
.tip-need b { font-weight: 700; }
.mk { position: absolute; left: 0; top: 0; pointer-events: auto; white-space: nowrap; }
.mk.is-off { visibility: hidden; }

.mk-plate {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px 2px 6px;
  font: 700 13px/1.25 var(--font-display);
  letter-spacing: .03em;
  color: #1c1306;
  background: linear-gradient(180deg, #f6e1a0, #c9a14e);
  border: 1px solid #1a1206;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(247, 226, 162, .55), 0 3px 9px rgba(0, 0, 0, .55);
  cursor: pointer;
}
.mk-plate .icon { width: 14px; height: 14px; }
.mk-plate::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 8px; height: 8px;
  margin-left: -4px;
  background: #c9a14e;
  border-right: 1px solid #1a1206;
  border-bottom: 1px solid #1a1206;
  transform: rotate(45deg);
}
.mk-plate.is-selected { background: linear-gradient(180deg, #d9fff2, #63d9b5); box-shadow: 0 0 0 1px #e4fff5, 0 0 16px 2px rgba(99, 245, 201, .7); }
.mk-plate.is-selected::after { background: #63d9b5; }
/* Losse lodestone van een speler: hetzelfde aanklikbare plaatje als een basis, maar donker met het steentje
   in de kleur van de lodestones uit de legenda. De vaste lodestones van de wereld zijn kleine ruitjes (.mk-dot). */
.mk-plate.is-lodestone {
  padding: 3px 4px;
  color: #6fe3dc;
  background: linear-gradient(180deg, #1d403e, #0a1c1c);
  border-color: #6fe3dc;
  box-shadow: 0 0 0 1px #050f0f, 0 3px 9px rgba(0, 0, 0, .6);
}
.mk-plate.is-lodestone .icon { display: block; width: 16px; height: 16px; }
.mk-plate.is-lodestone::after { background: #0a1c1c; border-color: #6fe3dc; }
.mk-plate.is-lodestone.is-selected {
  color: #06211b;
  background: linear-gradient(180deg, #d9fff2, #63d9b5);
  border-color: #1a1206;
  box-shadow: 0 0 0 1px #e4fff5, 0 0 16px 2px rgba(99, 245, 201, .7);
}
.mk-plate.is-lodestone.is-selected::after { background: #63d9b5; border-color: #1a1206; }
@media (pointer: coarse) {
  /* het plaatje is klein: een ruimer raakvlak voor een vinger */
  .mk-plate.is-lodestone::before { content: ""; position: absolute; inset: -8px; }
}

.mk-label {
  padding: 1px 6px 0;
  font: 600 14px/1.3 var(--font-body);
  color: #fff8e4;
  text-shadow: 0 0 3px #071212, 0 0 3px #071212, 0 0 6px #071212, 0 1px 1px #000;
  pointer-events: none;
}
.mk-label.is-base {
  appearance: none;
  color: var(--bone);
  background: rgba(8, 22, 22, .86);
  border: 1px solid rgba(201, 161, 78, .55);
  border-radius: 2px;
  text-shadow: none;
  cursor: pointer;
  pointer-events: auto;
}
.mk-label.is-base.is-selected { border-color: var(--anima); color: var(--anima-soft); }
.mk-label.is-landmark { font-style: italic; font-weight: 500; font-size: 14px; color: #f6efdb; }
.mk-label.is-dragon { font-style: italic; font-weight: 600; }
.mk-label.is-player { font-weight: 700; }
.mk-label.is-player.is-offline { font-weight: 500; color: #d8d3c4; opacity: .8; }

.mk-dot { width: 11px; height: 11px; pointer-events: none; }
.mk-dot::before { content: ""; position: absolute; inset: 1.5px; background: #f6efdb; border: 1.5px solid #1b140a; transform: rotate(45deg); }
.mk-dot.is-lodestone::before { background: #7fe9df; }

.mk-gate {
  --g: var(--brass-300);
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: var(--g);
  background: radial-gradient(circle, #16211f 50%, #060d0d 100%);
  border: 1.5px solid var(--g);
  border-radius: 7px 7px 2px 2px;
  box-shadow: 0 0 0 1.5px #060d0d, 0 2px 6px rgba(0, 0, 0, .6);
}
.mk-gate .icon { display: block; width: 16px; height: 16px; }
/* een todo-lijst vraagt iets dat in deze dungeon ligt: een rand in de kleur van die grondstof */
.mk-gate.is-wanted { box-shadow: 0 0 0 1.5px #060d0d, 0 0 0 4.5px var(--want, #fff), 0 0 0 6px #060d0d, 0 2px 6px rgba(0, 0, 0, .6); }
.mk-label.is-gate { font-size: 13.5px; color: #f3e6c0; }

/* Kist van de kistenzoeker: een aanklikbaar plaatje in de kleur van de opslag uit de legenda. */
.mk-chest {
  display: grid;
  place-items: center;
  width: 26px;
  height: 24px;
  padding: 0;
  color: #eaf2ff;
  background: linear-gradient(180deg, #3f82ea, #1f4fa6);
  border: 1.5px solid #071a3d;
  border-radius: 6px 6px 2px 2px;
  box-shadow: 0 0 0 1.5px rgba(214, 230, 255, .9), 0 0 12px 2px rgba(63, 130, 234, .7), 0 2px 6px rgba(0, 0, 0, .6);
  cursor: pointer;
}
.mk-chest .icon { display: block; width: 16px; height: 16px; }
.mk-chest.is-locked { color: #c9d2de; background: linear-gradient(180deg, #5b6675, #333c49); box-shadow: 0 0 0 1.5px rgba(214, 230, 255, .6), 0 2px 6px rgba(0, 0, 0, .6); }
.mk-chest.is-selected { color: #06211b; background: linear-gradient(180deg, #d9fff2, #63d9b5); border-color: #1a1206; box-shadow: 0 0 0 1.5px #e4fff5, 0 0 16px 3px rgba(99, 245, 201, .75); }
.mk-chest:focus-visible { outline: 2px solid var(--anima); outline-offset: 3px; }
@media (pointer: coarse) {
  /* het plaatje is klein: een ruimer raakvlak voor een vinger */
  .mk-chest::before { content: ""; position: absolute; inset: -9px; }
}
.mk-label.is-chest { font-size: 13.5px; color: #e6f0ff; }
.mk-label.is-chest.is-selected { color: var(--anima-soft); }

/* Lodestone van de kiesstand (Account koppelen): een aanklikbaar steentje in de kleur van de lodestones uit de
   legenda, groter dan het plaatje van een losse lodestone; de gekozen licht op zoals een gekozen basis. */
.mk-pick {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  color: #6fe3dc;
  background: radial-gradient(circle at 50% 35%, #1d403e, #0a1c1c);
  border: 1.5px solid #6fe3dc;
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px #050f0f, 0 0 14px 3px rgba(111, 227, 220, .55), 0 2px 6px rgba(0, 0, 0, .6);
  cursor: pointer;
}
.mk-pick .icon { display: block; width: 20px; height: 20px; }
.mk-pick:hover { border-color: var(--anima-soft); }
.mk-pick.is-selected { color: #06211b; background: linear-gradient(180deg, #d9fff2, #63d9b5); border-color: #1a1206; box-shadow: 0 0 0 1.5px #e4fff5, 0 0 18px 4px rgba(99, 245, 201, .8); }
.mk-pick:focus-visible { outline: 2px solid var(--anima); outline-offset: 3px; }
@media (pointer: coarse) {
  /* een ruimer raakvlak voor een vinger */
  .mk-pick::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; }
}
.mk-label.is-pick { font-size: 14px; color: #c9fbf6; pointer-events: auto; cursor: pointer; }
/* Tijdens het kiezen doet de rest van de kaart niet mee (js/map.js zet ze ook op inert): wat geen lodestone van de
   kiesstand is, staat iets terug en vangt geen klik of tik. */
.map-viewport.is-picking .mk:not(.mk-pick):not(.is-pick) { pointer-events: none; opacity: .55; }
.mk-label.is-pick.is-selected { color: var(--anima-soft); }

.mk-dragon {
  --d: #c9a14e;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: var(--d);
  background: radial-gradient(circle, #14201f 55%, #060d0d 100%);
  border: 2px solid var(--d);
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px #060d0d, 0 0 14px 2px var(--d);
}
.mk-dragon svg { width: 21px; height: 21px; display: block; }
.mk-dragon.is-slain { color: #8d9a96; border-color: var(--brass-300); box-shadow: 0 0 0 1.5px #060d0d, 0 2px 6px rgba(0, 0, 0, .6); }
.mk-dragon .mk-slain { position: absolute; right: -7px; bottom: -6px; width: 17px; height: 17px; padding: 2px; color: #1c1306; background: var(--brass-300); border: 1px solid #1a1206; border-radius: 50%; }

.mk-player {
  width: 16px;
  height: 16px;
  background: var(--anima);
  border: 2px solid #06211b;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(214, 255, 241, .9), 0 0 14px 3px rgba(99, 245, 201, .85);
}
.mk-player.is-online::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 2px solid var(--anima);
  border-radius: 50%;
  animation: ping 2.6s ease-out infinite;
}
.mk-player.is-offline { background: #a9ada6; border-color: #20231f; box-shadow: 0 0 0 1.5px rgba(236, 227, 205, .55); opacity: .72; }

.base-panel {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 4;
  width: min(270px, calc(100% - 24px));
  max-height: calc(100% - 24px);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--ink-soft) transparent;
  padding: 16px 18px 16px;
  --chamfer: 8px;
}
/* overflow-wrap: een eigen naam kan één lang woord zijn en mag niet onder de sluitknop door lopen */
.base-panel h3 { margin: 0 32px 2px 0; font: 700 17px/1.25 var(--font-display); letter-spacing: .03em; color: var(--ink); overflow-wrap: anywhere; }
.base-panel .bp-count { margin: 0 0 10px; font-style: italic; color: var(--ink-soft); }
.bp-close {
  position: absolute; top: 8px; right: 8px;
  display: grid; place-items: center;
  width: 32px; height: 32px; padding: 0;
  color: var(--ink); background: none; border: 1px solid transparent; border-radius: 2px; cursor: pointer;
}
.bp-close:hover { border-color: var(--ink-soft); }
.bp-close:focus-visible { outline-color: var(--ink); }
.bp-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; margin: 0; padding: 0; list-style: none; font-size: 16px; line-height: 1.3; }
.bp-list li { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 6px; align-items: center; border-bottom: 1px dotted rgba(42, 31, 18, .3); padding: 2px 0; }
.bp-list span { overflow-wrap: anywhere; hyphens: auto; }
.bp-list b { font-weight: 700; }
/* Paneel van een kist: wat erin zit, met het plaatje van elk voorwerp dat het receptenboek kent. */
.base-panel.is-chest { width: min(300px, calc(100% - 24px)); }
.cp-state { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-style: italic; line-height: 1.35; color: var(--ink-soft); }
.cp-state .icon { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--ink); }
.cp-list li { grid-template-columns: 22px minmax(0, 1fr) auto; min-height: 28px; }
.cp-list .it-icon { width: 22px; height: 22px; }
.cp-list .it-none { color: var(--parch-500); }
.cp-gap { width: 22px; }
.cp-item {
  min-width: 0; padding: 3px 0; font: inherit; color: var(--ink); text-align: left; overflow-wrap: anywhere;
  background: none; border: 0; cursor: pointer; text-decoration: underline dotted rgba(42, 31, 18, .55); text-underline-offset: 3px;
  -webkit-tap-highlight-color: transparent;
}
.cp-item:hover { text-decoration-style: solid; }
.cp-list li.is-hit { background: rgba(31, 169, 135, .2); box-shadow: -6px 0 0 rgba(31, 169, 135, .2), 6px 0 0 rgba(31, 169, 135, .2); }
.cp-list li.is-hit > :nth-child(2) { font-weight: 700; }

/* ---------- Gebieden op de kaart ---------- */

/* De omtrek ligt in het kaartblad en schuift en schaalt mee. --k is 1 / de zoom van de kaart (js/map.js):
   daarmee houdt de lijn op het scherm haar dikte, hoe ver er ook is ingezoomd. */
.map-areas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.area-shape { opacity: 0; transition: opacity .34s ease; }
.area-shape.is-on { opacity: 1; }
.area-shape path { stroke-linejoin: round; }
.area-dim { fill: rgba(5, 15, 15, .3); fill-rule: evenodd; stroke: none; }
.area-fill { fill: rgba(255, 249, 226, .1); fill-rule: evenodd; stroke: none; }
.area-glow { fill: none; stroke: rgba(6, 16, 16, .6); stroke-width: calc(6px * var(--k, 1)); }
.area-line { fill: none; stroke: var(--anima-soft); stroke-width: calc(2px * var(--k, 1)); }
/* ligt er een paneel open, dan dimt alleen het gekozen gebied de rest van de kaart */
.map-areas.has-chosen .area-shape:not(.is-chosen) .area-dim { display: none; }
/* oplichten: de gloed trekt van breed naar smal, de vulling zakt terug naar zacht */
.area-shape.is-on .area-glow { animation: area-glow .7s ease-out; }
.area-shape.is-on .area-fill { animation: area-fill .7s ease-out; }
.area-shape.is-chosen .area-dim { fill: rgba(5, 15, 15, .38); }
.area-shape.is-chosen .area-line { stroke: var(--brass-200); stroke-width: calc(2.4px * var(--k, 1)); }
@keyframes area-glow { from { stroke: rgba(99, 245, 201, .6); stroke-width: calc(18px * var(--k, 1)); } }
@keyframes area-fill { from { fill: rgba(189, 247, 227, .34); } }

/* rechtsboven: links ligt het paneel van een gebied of een basis */
.map-area-name {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 3;
  margin: 0;
  padding: 5px 13px 4px;
  font: 600 15px/1.2 var(--font-display);
  letter-spacing: .09em;
  color: var(--brass-200);
  background: rgba(8, 22, 22, .88);
  border: 1px solid rgba(201, 161, 78, .6);
  border-radius: 2px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-5px);
  transition: opacity .26s ease, transform .26s ease;
}
.map-area-name.is-on { opacity: 1; transform: none; }

/* Het paneel van een gebied deelt zijn plek met dat van een basis: er ligt er altijd maar één. */
.area-panel {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 4;
  width: min(348px, calc(100% - 24px));
  max-height: calc(100% - 24px);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--ink-soft) transparent;
  padding: 15px 14px 11px 16px;
  --chamfer: 8px;
  transform-origin: 0 100%;
  animation: area-pop .32s cubic-bezier(.2, .85, .3, 1);
}
.area-panel.is-switch { animation: none; }
.area-panel :focus-visible { outline-color: var(--ink); }
@keyframes area-pop { from { opacity: 0; transform: translateY(16px) scale(.96); } }
@keyframes area-row { from { opacity: 0; transform: translateX(-9px); } }
.ap-over { margin: 0; font: 600 12px/1.2 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.ap-title { margin: 1px 34px 5px 0; font: 700 20px/1.2 var(--font-display); letter-spacing: .04em; color: var(--ink); overflow-wrap: anywhere; }
.ap-title:focus { outline: none; }
.ap-part {
  margin: 14px 0 3px; padding-top: 9px;
  font: 700 15px/1.2 var(--font-display); letter-spacing: .05em; color: var(--ink);
  border-top: 1px solid rgba(42, 31, 18, .45);
}
.ap-title + .ap-part { margin-top: 6px; padding-top: 0; border-top: 0; }
.ap-lead { margin: 0 0 6px; font-size: 15.5px; line-height: 1.35; font-style: italic; color: var(--ink-soft); }
.ap-kind {
  margin: 11px 0 3px; padding-bottom: 3px;
  font: 700 12.5px/1.2 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: #6b4c18;
  border-bottom: 1px solid rgba(42, 31, 18, .3);
}
.ap-gear, .ap-areas { margin: 0; padding: 0; list-style: none; }
.ap-gear li, .ap-areas li { animation: area-row .36s ease-out backwards; animation-delay: calc(var(--i, 0) * 30ms + 70ms); }
.ap-item {
  display: grid; grid-template-columns: 46px minmax(0, 1fr); align-items: center; gap: 10px;
  width: 100%; padding: 5px 6px 4px 4px;
  font: inherit; text-align: left; color: var(--ink);
  background: none; border: 1px solid transparent; border-radius: 2px;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .15s, border-color .15s;
}
button.ap-item { cursor: pointer; }
button.ap-item:hover { background: rgba(255, 249, 226, .55); border-color: rgba(42, 31, 18, .4); }
.ap-icon {
  width: 46px; height: 46px; padding: 4px;
  background: radial-gradient(circle at 50% 38%, #24544f, #0c2121 78%);
  border: 1px solid #1b140a; border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(201, 161, 78, .45), 0 1px 2px rgba(42, 31, 18, .5);
}
.it-none.ap-icon { color: var(--brass-500); }
.ap-text { display: block; min-width: 0; }
.ap-name { display: block; font-size: 16.5px; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.ap-new {
  display: inline-block; margin-left: 7px; padding: 1px 6px 0; vertical-align: .12em;
  font: 700 10.5px/1.5 var(--font-display); letter-spacing: .1em; text-transform: uppercase;
  color: #f7ecc8; background: #2a625d; border: 1px solid #0d2222; border-radius: 2px;
}
.ap-tier {
  display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 9px;
  font: 700 13px/1 var(--font-display); color: #f7ecc8; background: #2a625d; border: 1px solid #0d2222; border-radius: 50%;
}
.ap-sets { margin: 0 0 4px; padding: 0; list-style: none; }
.ap-set {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 10px;
  padding: 4px 2px; border-bottom: 1px dotted rgba(42, 31, 18, .3);
}
.ap-set-name { font-size: 16px; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.ap-set-style { font-weight: 500; font-style: italic; color: var(--ink-soft); }
.ap-set-from { grid-column: 1; font-size: 14px; line-height: 1.25; color: #6b4c18; font-weight: 600; overflow-wrap: anywhere; }
.ap-set-pieces { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.ap-set.is-unknown .ap-set-from { color: var(--blood); font-style: italic; }
.ap-piece {
  min-height: 30px; padding: 4px 8px 3px;
  font: 600 13.5px/1.1 var(--font-body); color: var(--ink);
  background: rgba(255, 249, 226, .45); border: 1px solid rgba(42, 31, 18, .5); border-radius: 2px;
  -webkit-tap-highlight-color: transparent;
}
button.ap-piece { cursor: pointer; }
button.ap-piece:hover { background: rgba(255, 249, 226, .85); border-color: var(--ink); }
.ap-piece.is-set { min-height: 26px; padding: 2px 7px 1px; font-weight: 700; }
.ap-best { margin: 8px 0 0; font-size: 14.5px; line-height: 1.9; color: var(--ink-soft); }
/* een Agility-parcours: naam en level boven, de xp per medaille eronder (ook op een telefoon) */
.ap-course { grid-template-columns: minmax(0, 1fr); }
.ap-laps { display: flex; flex-wrap: wrap; gap: 3px 6px; margin-top: 2px; }
.ap-lap {
  padding: 1px 7px 0; font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--ink);
  background: rgba(255, 249, 226, .45); border: 1px solid rgba(42, 31, 18, .4); border-radius: 2px;
}
.ap-lap small { font-size: 12.5px; font-weight: 500; color: var(--ink-soft); }
.ap-lap.is-gold { border-color: #a07a1c; }
.ap-lap.is-silver { border-color: #7d8486; }
.ap-lap.is-bronze { border-color: #8a5a2b; }
.ap-best b { color: var(--ink); }
.ap-facts { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.3; color: #6b4c18; }
.ap-mats { display: block; font-size: 14px; line-height: 1.25; color: var(--ink-soft); overflow-wrap: anywhere; }
.ap-has { margin: 10px 0 0; font-size: 14.5px; line-height: 1.35; color: var(--ink-soft); overflow-wrap: anywhere; }
.ap-has b { color: var(--ink); }
.ap-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px;
  margin: 10px 0 0; padding-top: 8px; border-top: 1px dotted rgba(42, 31, 18, .4);
  font-size: 13.5px; font-style: italic; color: var(--ink-soft);
}
.ap-back {
  min-height: 32px; padding: 5px 11px 4px;
  font: 600 12.5px/1 var(--font-display); letter-spacing: .06em; font-style: normal; color: var(--ink);
  background: rgba(255, 249, 226, .45); border: 1px solid rgba(42, 31, 18, .55); border-radius: 2px; cursor: pointer;
}
.ap-back:hover { background: rgba(255, 249, 226, .8); }
.ap-pick {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  width: 100%; min-height: 38px; padding: 7px 8px 5px;
  font: inherit; text-align: left; color: var(--ink);
  background: none; border: 0; border-bottom: 1px dotted rgba(42, 31, 18, .32); border-radius: 2px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ap-pick:hover, .ap-pick:focus-visible { background: rgba(255, 249, 226, .55); }
.ap-pick-name { font: 700 15px/1.2 var(--font-display); letter-spacing: .04em; }
.ap-pick-count { font-size: 14px; font-style: italic; color: var(--ink-soft); white-space: nowrap; }
@media (max-width: 640px) {
  /* op een telefoon schuift het paneel als een blad over de onderkant van de kaart */
  .area-panel { left: 6px; right: 6px; bottom: 6px; width: auto; max-height: min(66%, 440px); transform-origin: 50% 100%; }
  /* alles wat je aantikt is minstens 44 bij 44 */
  .ap-pick, .ap-back { min-height: 44px; }
  .ap-piece, .ap-piece.is-set { min-width: 44px; min-height: 44px; padding-inline: 10px; }
  .ap-best { line-height: 1.5; }
  .ap-best .ap-piece { margin-block: 2px; }
  .area-panel .bp-close { width: 44px; height: 44px; top: 2px; right: 2px; }
  /* de lijst met gebieden laat de helft van de kaart vrij: daar licht op wat je aanwijst */
  .area-panel.is-list { max-height: min(50%, 300px); }
  .area-panel.is-list .ap-lead { display: none; }
}
@media (max-width: 760px), (max-height: 560px) {
  .map-frame.is-full .area-panel { bottom: max(8px, env(safe-area-inset-bottom)); }
}
.swatch { width: 16px; height: 16px; display: block; flex: none; }

.map-layers { margin: 14px 2px 0; padding-top: 12px; border-top: 1px solid rgba(201, 161, 78, .18); }
.layers-title { margin: 0 0 8px; font: 600 16px/1.2 var(--font-display); letter-spacing: .06em; color: var(--brass-300); }
.layer-group { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 6px 12px; align-items: start; }
.layer-group + .layer-group { margin-top: 8px; }
.layer-name { padding-top: 8px; font-size: 15.5px; line-height: 1.25; color: var(--mist); }
.layer-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.layer-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 4px 10px 3px 8px;
  font: 500 15.5px/1 var(--font-body);
  color: var(--mist);
  background: rgba(8, 22, 22, .45);
  border: 1px solid rgba(201, 161, 78, .28);
  border-radius: 2px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .15s, color .15s, background-color .15s;
}
.layer-chip .swatch { opacity: .5; filter: saturate(.55); transition: opacity .15s, filter .15s; }
.layer-chip:hover { border-color: var(--brass-500); color: var(--bone); }
.layer-chip[aria-pressed="true"] {
  color: var(--bone);
  background: linear-gradient(180deg, #1e3f3c, #102726);
  border-color: var(--brass-300);
  box-shadow: inset 0 1px 0 rgba(247, 226, 162, .14), inset 0 0 0 1px rgba(0, 0, 0, .5);
}
.layer-chip[aria-pressed="true"] .swatch { opacity: 1; filter: none; }
.layer-chip.is-all { padding-inline: 10px; font: 600 13px/1 var(--font-display); letter-spacing: .06em; }
/* een grondstof van een todo-lijst: naam, hoeveel je er nog van nodig hebt, en een kruisje dat hem van de kaart haalt */
.layer-chip.is-todo { padding-right: 7px; }
.layer-tag { font-weight: 700; color: var(--brass-200); white-space: nowrap; }
.layer-off { width: 12px; height: 12px; margin-left: 2px; color: var(--mist); }
.layer-chip.is-todo:hover .layer-off { color: var(--ember-soft); }
.layers-note { margin: 10px 0 0; font-size: 14.5px; font-style: italic; color: var(--mist); }

.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 2px 0; padding: 0; list-style: none; font-size: 15.5px; line-height: 1.3; color: var(--mist); }
.legend li { display: inline-flex; align-items: center; gap: 7px; }
.legend .lg-break { flex-basis: 100%; height: 0; }
.legend .mk-player, .legend .mk-dragon { position: relative; flex: none; }
.legend .mk-player { width: 12px; height: 12px; }
.legend .mk-player::after { display: none; }
.legend .mk-dragon { width: 20px; height: 20px; border-width: 1.5px; box-shadow: none; }
.legend .mk-dragon svg { width: 13px; height: 13px; }

.side-title { margin: 0 4px 8px; font: 600 19px/1.2 var(--font-display); letter-spacing: .06em; color: var(--brass-300); }
.base-list { margin: 0; padding: 0; list-style: none; }
/* Naast de kaart (js/chestsearch.js en js/map.js): de bases met de uitleg over de kisten, of in
   kistenmodus de kisten die op de kaart staan; daaronder de todo-lijsten. */
.map-side { display: flex; flex: 1 1 260px; flex-direction: column; gap: 20px; min-width: 0; }
.side-box { padding: 16px 16px 14px; }
.side-box .side-title { margin: 0 0 8px; font-size: 17px; }
.side-meta { margin: -4px 0 8px; font-size: 14.5px; font-style: italic; color: var(--mist); }
.side-meta:empty { display: none; }
.side-box .base-list { max-height: 360px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.side-chest-list { max-height: 420px; margin: 0; padding: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; list-style: none; }
.side-chest {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 6px;
  font: inherit;
  color: var(--bone);
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(201, 161, 78, .12);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.side-chest:hover { color: var(--brass-200); }
.side-chest[aria-pressed="true"] { background: rgba(99, 245, 201, .1); box-shadow: inset 3px 0 0 var(--anima); }
.side-chest:focus-visible { outline-offset: -2px; }
.side-chest > .icon { width: 18px; height: 18px; color: #7fb0f5; }
.side-chest-text { flex: 1 1 auto; min-width: 0; line-height: 1.25; }
.side-chest-name { display: block; overflow-wrap: anywhere; }
.side-chest-where { display: block; font-size: 14.5px; font-style: italic; color: var(--mist); overflow-wrap: anywhere; }
.side-chest b { font: 700 16px/1 var(--font-display); color: var(--brass-200); }
.chest-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 12px 4px 0; font-size: 15px; font-style: italic; line-height: 1.4; color: var(--mist); }
.chest-foot .layer-chip { font-style: normal; }
.chest-foot .layer-chip .icon { width: 18px; height: 18px; }

/* ---------- Todo-lijsten naast de kaart ---------- */

.todo-side { min-width: 0; padding: 18px 14px 14px; }
.map-side .todo-side { padding: 16px 14px 14px; }
.todo-title { display: flex; align-items: center; gap: 8px; }
.todo-title .icon { flex: none; width: 20px; height: 20px; }
.todo-count { margin-left: auto; font: italic 400 14.5px/1.2 var(--font-body); letter-spacing: 0; color: var(--mist); }
.todo-empty { font-size: 16px; line-height: 1.45; }
.todo-empty:focus { outline: none; }
.todo-lists { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 981px) {
  .todo-side { display: flex; flex-direction: column; max-height: max(var(--map-h, 0px), 420px); }
  .map-side .todo-side { max-height: max(calc(var(--map-h, 0px) * .6), 320px); }
  .todo-lists { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; align-content: start; }
}
.todo { min-width: 0; background: rgba(4, 14, 14, .45); border: 1px solid rgba(201, 161, 78, .3); border-radius: 2px; scroll-margin-top: 12px; }
/* de eerste lijst staat direct onder de kop "Todo": die blijft in beeld als de pagina naar de lijst schuift */
.todo:first-child { scroll-margin-top: 62px; }
/* De kop van een lijst (naam, teller, voortgang) blijft bij het schuiven boven aan de lijst staan: naast de
   kaart binnen het paneel, op een smal scherm onder de menubalk van de pagina. */
.todo-top { position: sticky; top: var(--todo-top, 0px); z-index: 2; background: #0b2020; box-shadow: 0 4px 8px -4px rgba(0, 0, 0, .7); }
.todo-head { display: flex; align-items: stretch; }
.todo-fold, .todo-remove, .todo-hide { margin: 0; color: inherit; background: none; border: 0; border-radius: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.todo-fold {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 48px;
  padding: 7px 8px 6px 9px;
  font: inherit;
  text-align: left;
  color: var(--bone);
}
.todo-fold:hover .todo-name { color: var(--brass-200); }
.todo-chevron { width: 16px; height: 16px; color: var(--brass-500); transition: transform .2s; }
.todo-fold[aria-expanded="false"] .todo-chevron { transform: rotate(-90deg); }
.todo-names { display: block; min-width: 0; }
.todo-kind { display: block; font: 600 11.5px/1.2 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--brass-500); }
.todo.is-quest .todo-kind { color: var(--anima-soft); }
.todo-name { display: block; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.todo-progress { font-size: 15px; font-weight: 600; white-space: nowrap; color: var(--brass-200); }
.todo.is-complete .todo-progress { color: var(--anima); }
.todo-remove { display: grid; flex: none; place-items: center; width: 44px; color: var(--mist); border-left: 1px solid rgba(201, 161, 78, .2); }
.todo-remove .icon { width: 16px; height: 16px; }
.todo-remove:hover { color: var(--ember-soft); background: rgba(240, 138, 60, .14); }
/* afgevinkte regels verbergen: een oog dat aan of uit staat */
.todo-hide { display: grid; flex: none; place-items: center; width: 44px; color: var(--mist); border-left: 1px solid rgba(201, 161, 78, .2); }
.todo-hide .icon { width: 18px; height: 18px; }
.todo-hide:hover { color: var(--brass-200); }
.todo-hide[aria-pressed="true"] { color: var(--anima); background: rgba(99, 245, 201, .12); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .5); }
.todo-fold:focus-visible, .todo-remove:focus-visible, .todo-hide:focus-visible { outline-offset: -2px; }
.todo-hidden { margin: 0; padding: 7px 10px 6px; font-size: 14.5px; font-style: italic; color: var(--mist); border-bottom: 1px solid rgba(201, 161, 78, .12); }
.todo-meter { height: 3px; background: rgba(201, 161, 78, .16); }
.todo-meter span { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: var(--brass-500); transition: width .25s ease; }
.todo.is-complete .todo-meter span { background: var(--anima-deep); }
.todo-rows { margin: 0; padding: 0; list-style: none; }
/* een regel: het vinkje en de tekst over de hele breedte, de knoppen eronder */
.todo-row { padding: 0 8px 0 0; border-top: 1px solid rgba(201, 161, 78, .12); }
.todo-row:first-child { border-top: 0; }
/* een tussenkop van de quest: niet af te vinken */
.todo-part { padding: 10px 10px 5px; font: 600 12.5px/1.3 var(--font-display); letter-spacing: .08em; color: var(--brass-300); overflow-wrap: anywhere; background: rgba(201, 161, 78, .07); border-top: 1px solid rgba(201, 161, 78, .25); }
.todo-part:first-child { border-top: 0; }
.todo-check { display: flex; align-items: flex-start; gap: 10px; min-width: 0; min-height: 44px; padding: 9px 4px 8px 10px; cursor: pointer; }
.todo-acts { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 0 9px 42px; }
.todo-more { min-height: 32px; }
.todo-more[aria-expanded="true"] { color: var(--brass-200); border-color: var(--brass-300); }
.todo-check input {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  background: rgba(4, 14, 14, .62);
  border: 1px solid var(--brass-500);
  border-radius: 2px;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .5);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.todo-check input::after { content: ""; width: 11px; height: 6px; margin-top: -3px; border: solid transparent; border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg); }
.todo-check input:checked { background: linear-gradient(180deg, #2a625d, #173432); border-color: var(--anima-soft); }
.todo-check input:checked::after { border-color: var(--anima); }
.todo-check input:focus-visible { outline: 2px solid var(--anima); outline-offset: 2px; }
.todo-text { display: block; min-width: 0; font-size: 16.5px; line-height: 1.3; overflow-wrap: anywhere; }
.todo-words { display: block; }
.todo-words .rt-tag { margin-left: 6px; }
.todo-note { display: block; margin-top: 1px; font-size: 14px; line-height: 1.3; font-style: italic; color: var(--mist); }
/* een losse opmerking bij de stap (wat je nodig hebt): gewone letter, met een streep ervoor */
.todo-extra { display: block; }
.todo-note.is-extra { margin-top: 4px; padding-left: 8px; font-style: normal; color: #d8d3c4; border-left: 2px solid rgba(201, 161, 78, .4); }
/* afgevinkt: één gedimde, doorgestreepte regel zonder de kleine regels en de knoppen */
.todo-row.is-done .todo-check { min-height: 38px; padding-block: 7px 6px; }
.todo-row.is-done .todo-text { flex: 1 1 auto; }
.todo-row.is-done .todo-words { overflow: hidden; color: var(--mist); text-decoration: line-through; text-decoration-color: rgba(159, 184, 176, .6); text-overflow: ellipsis; white-space: nowrap; }
.todo-row.is-done .todo-note, .todo-row.is-done .todo-extra, .todo-row.is-done .todo-acts { display: none; }
.todo.hide-done .todo-row.is-done { display: none; }
/* de regel waar de kaart naar terugverwees licht even op */
.todo-row.is-shown { animation: todo-shown 1.8s ease-out; }
@keyframes todo-shown { from { background: rgba(247, 226, 162, .38); } }
/* de eerstvolgende stap van een quest: dezelfde kleur als op de kaart */
.todo-row.is-next { box-shadow: inset 3px 0 0 var(--anima); background: rgba(99, 245, 201, .06); }
.todo-map { flex: none; align-self: center; min-height: 32px; }
.todo-map .icon { width: 15px; height: 15px; }
.todo-foot { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 8px 8px 9px; border-top: 1px solid rgba(201, 161, 78, .18); }
.todo-foot .icon { width: 15px; height: 15px; }
/* De schakelaar "kaart" van een grondstof en "Alles op de kaart" van een lijst: aan staat er een vinkje bij
   (en bij een grondstof het teken waarmee zij op de kaart staat), niet alleen een andere kleur. */
.todo-face { display: grid; place-items: center; flex: none; width: 16px; height: 16px; }
.todo-on { display: none; color: var(--anima); }
.todo-switch[aria-pressed="true"] .todo-on, .todo-all[aria-pressed="true"] .todo-on { display: block; }
.todo-switch[aria-pressed="true"], .todo-all[aria-pressed="true"] { border-color: var(--anima-soft); }
/* boven de lijsten: hoeveel grondstoffen er op de kaart aan staan, de weg erheen en alles weer weg */
.todo-onmap { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 10px; padding: 7px 8px 7px 10px; font-size: 15px; line-height: 1.3; color: var(--brass-200); background: rgba(99, 245, 201, .07); border: 1px solid rgba(99, 245, 201, .28); border-radius: 2px; }
.todo-onmap[hidden] { display: none; }
.todo-onmap-text { flex: 1 1 auto; min-width: 0; font-weight: 600; }
.todo-onmap-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.todo-onmap .layer-chip { min-height: 32px; }
.todo-onmap .icon { width: 15px; height: 15px; }
/* naast de kaart ligt de kaart al in beeld: de weg erheen is er voor het smalle scherm, waar de lijsten eronder staan */
@media (min-width: 1081px) { .todo-tomap { display: none; } }
.todo-status { margin: 10px 4px 0; font-size: 15px; line-height: 1.35; font-style: italic; color: var(--mist); overflow-wrap: anywhere; }
.todo-status:empty { display: none; }
.todo-undo { padding: 0; font: inherit; color: var(--brass-200); text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; cursor: pointer; }
.todo-undo:hover { color: var(--brass-300); }
/* zelf regels toevoegen en weghalen (js/todopanel.js): rechts van elke regel een kruisje, onder de regels een
   veld voor een eigen regel, onder de lijsten een veld voor een eigen lijst */
.todo-row { position: relative; }
.todo-row .todo-check { padding-right: 38px; }
.todo-drop {
  position: absolute; top: 4px; right: 2px; display: grid; place-items: center; width: 36px; height: 36px;
  margin: 0; padding: 0; color: rgba(159, 184, 176, .7); background: none; border: 0; border-radius: 2px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.todo-drop .icon { width: 13px; height: 13px; }
.todo-drop:hover { color: var(--ember-soft); background: rgba(240, 138, 60, .14); }
.todo-row.is-done .todo-drop { top: 1px; }
.todo.is-own .todo-kind { color: var(--parch-300); }
.todo-part.is-own { font-style: normal; }
.todo-none { margin: 0; padding: 10px 10px 4px; font-size: 15px; line-height: 1.35; font-style: italic; color: var(--mist); }
.todo-add { display: flex; gap: 6px; margin: 0; padding: 8px 8px 9px; border-top: 1px solid rgba(201, 161, 78, .12); }
.todo-new { margin-top: 12px; padding: 0; border-top: 0; }
.todo-field {
  flex: 1 1 auto; width: 100%; min-width: 0; height: 34px; padding: 0 9px;
  font: 500 15.5px/1.2 var(--font-body); color: var(--bone);
  background: rgba(4, 14, 14, .62); border: 1px solid rgba(201, 161, 78, .32); border-radius: 2px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .5); -webkit-appearance: none; appearance: none;
}
.todo-field::placeholder { color: rgba(159, 184, 176, .75); font-style: italic; }
.todo-field:focus-visible { outline: 2px solid var(--anima); outline-offset: 1px; border-color: var(--brass-300); }
.todo-go { flex: none; }
.todo-go .icon { width: 14px; height: 14px; }

/* ---------- Route van een quest op de kaart ---------- */

/* Een plek van de route: een rondje met het nummer van de stap (of de stappen) erin. */
.mk-route {
  display: grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  font: 700 14px/1 var(--font-display);
  color: #1c1306;
  background: linear-gradient(180deg, #f6e1a0, #c9a14e);
  border: 2px solid #120c04;
  border-radius: 14px;
  box-shadow: 0 0 0 1.5px rgba(247, 226, 162, .75), 0 3px 9px rgba(0, 0, 0, .6);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mk-route span { position: relative; }
/* hier moet je nu heen: groter, in de kleur van de lijn ernaartoe, met een ring die klopt */
.mk-route.is-next {
  min-width: 34px;
  height: 34px;
  font-size: 16px;
  border-radius: 17px;
  background: linear-gradient(180deg, #d9fff2, #63d9b5);
  box-shadow: 0 0 0 2px #e4fff5, 0 0 18px 4px rgba(99, 245, 201, .75);
  z-index: 1;
}
.mk-route.is-next::before { content: ""; position: absolute; inset: -8px; border: 2px solid rgba(99, 245, 201, .8); border-radius: 50%; animation: route-pulse 1.8s ease-out infinite; pointer-events: none; }
.mk-route.is-next { z-index: 2; }
@keyframes route-pulse { from { transform: scale(.75); opacity: .9; } to { transform: scale(1.35); opacity: 0; } }
.mk-route.is-done { color: #d5ddd9; background: #33423f; border-color: #0c1414; box-shadow: 0 0 0 1px rgba(159, 184, 176, .5); opacity: .72; }

/* een plek bij benadering: geen rondje maar een hoekig vakje met een stippelrand, ook zonder kleur te onderscheiden */
.mk-route.is-approx { border-style: dashed; border-radius: 3px; box-shadow: 0 0 0 1.5px rgba(247, 226, 162, .75), 0 0 0 5px rgba(247, 226, 162, .22), 0 3px 9px rgba(0, 0, 0, .6); }
.mk-route.is-approx.is-next { border-radius: 4px; box-shadow: 0 0 0 2px #e4fff5, 0 0 0 7px rgba(99, 245, 201, .28), 0 0 18px 4px rgba(99, 245, 201, .75); }
.mk-route.is-approx.is-next::before { border-radius: 6px; }
@media (pointer: coarse) {
  .mk-route::after { content: ""; position: absolute; inset: -9px; }
}
/* De stap die de bezoeker koos ("kaart" bij één stap): een witte dubbele ring en een pijl die ernaar wijst.
   Anders dan de eerstvolgende stap, die groen gloeit: zo zijn de twee uit elkaar te houden. */
.mk-route.is-picked { z-index: 3; box-shadow: 0 0 0 3px #fff, 0 0 0 6px #120c04, 0 0 0 9px var(--brass-200), 0 4px 14px rgba(0, 0, 0, .7); }
.mk-route.is-picked::after {
  content: "";
  position: absolute;
  inset: auto auto calc(100% + 12px) 50%;
  width: 0;
  height: 0;
  margin-left: -10px;
  border: 10px solid transparent;
  border-top: 13px solid #fff;
  border-bottom: 0;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .85));
  animation: route-picked 1s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes route-picked { to { transform: translateY(-6px); } }
/* Een groep plekken die op het scherm over elkaar zouden liggen: een hoekig plaatje met een schaduwrand als
   een stapeltje, met het bereik van de stappen erin. Zit de eerstvolgende stap erbij, dan staat zijn nummer voorop. */
.mk-group {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 7px;
  border-radius: 5px;
  box-shadow: 4px 4px 0 -1px #a5813a, 4px 4px 0 1px #120c04, 0 0 0 1.5px rgba(247, 226, 162, .75), 0 3px 9px rgba(0, 0, 0, .6);
}
.mk-group.is-next { padding: 0 8px 0 5px; border-radius: 6px; box-shadow: 4px 4px 0 -1px #3f9c83, 4px 4px 0 1px #06211b, 0 0 0 2px #e4fff5, 0 0 18px 4px rgba(99, 245, 201, .75); }
.mk-group.is-next::before { border-radius: 10px; }
.mk-group-next { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 5px; font-size: 14.5px; color: #06211b; background: #fff; border: 1.5px solid #06211b; border-radius: 12px; }
/* Een bijmarkering: een plek die een stap noemt zonder dat de route erheen gaat. Klein, gestippeld en in
   een andere kleur dan de route, met het nummer van de stap erin. */
.mk-also {
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  font: 700 10.5px/1 var(--font-display);
  color: #eaf1ff;
  background: rgba(28, 46, 74, .9);
  border: 1px dashed #b9cdf0;
  border-radius: 9px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mk-also:hover { background: #2a4672; }
@media (pointer: coarse) {
  .mk-also::after { content: ""; position: absolute; inset: -9px; }
}
.mk-label.is-also { font-size: 12.5px; font-style: italic; font-weight: 500; color: #d6e2f7; }
.mk-label.is-route { font-weight: 700; color: var(--brass-200); }
.mk-label.is-route.is-next { color: var(--anima-soft); }
.mk-label.is-route.is-done { opacity: .6; }
.mk-label.is-route.is-picked { color: #fff; opacity: 1; }
/* Het kaartje bij een plek van de route. Bij aanwijzen een korte samenvatting; vastgezet (klik of tik) een
   lijst van de stappen die binnen het kader van de kaart blijft en zelf schuift. */
.map-route-tip {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  width: max-content;
  max-width: min(300px, calc(100% - 8px));
  max-height: calc(100% - 8px);
  padding: 7px 10px 6px;
  font: 500 15px/1.3 var(--font-body);
  color: var(--bone);
  white-space: normal;
  background: rgba(8, 22, 22, .97);
  border: 1px solid rgba(201, 161, 78, .7);
  border-radius: 2px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .6);
  pointer-events: none;
}
.map-route-tip.is-pinned {
  z-index: 5;
  width: min(350px, calc(100% - 8px));
  max-width: none;
  max-height: min(430px, calc(100% - 8px));
  padding: 0;
  border-color: var(--brass-300);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .75);
  cursor: auto;
  pointer-events: auto;
  -webkit-user-select: text;
  user-select: text;
}
.rtip-name { display: block; margin-bottom: 2px; font: 700 13px/1.25 var(--font-display); letter-spacing: .06em; color: var(--brass-300); overflow-wrap: anywhere; }
.rtip-sum { margin: 0; font-weight: 600; color: var(--brass-200); }
.rtip-lead { margin: 3px 0 0; overflow-wrap: anywhere; }
.rtip-lead b { color: var(--anima-soft); }
.rtip-hint { margin: 3px 0 0; font-size: 13px; font-style: italic; color: var(--mist); }
.rtip-head { display: flex; flex: none; align-items: flex-start; gap: 8px; padding: 8px 6px 7px 12px; border-bottom: 1px solid rgba(201, 161, 78, .4); }
.rtip-title { flex: 1 1 auto; min-width: 0; }
.rtip-steps { display: block; font-size: 14px; line-height: 1.3; color: var(--mist); overflow-wrap: anywhere; }
.rtip-close { display: grid; flex: none; place-items: center; width: 40px; height: 40px; margin: -3px 0 -2px; color: var(--bone); background: none; border: 1px solid rgba(201, 161, 78, .4); border-radius: 2px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.rtip-close .icon { width: 16px; height: 16px; }
.rtip-close:hover { color: var(--brass-200); border-color: var(--brass-300); }
.rtip-list { flex: 1 1 auto; min-height: 0; margin: 0; padding: 0; list-style: none; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
.rtip-list:focus-visible { outline: 2px solid var(--anima); outline-offset: -2px; }
.rtip-step { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 9px; padding: 8px 12px 8px 10px; border-top: 1px solid rgba(201, 161, 78, .14); }
.rtip-step:first-child { border-top: 0; }
.rtip-num { display: grid; place-items: center; width: 26px; height: 26px; font: 700 12.5px/1 var(--font-display); color: #1c1306; background: linear-gradient(180deg, #f6e1a0, #c9a14e); border: 1px solid #120c04; border-radius: 50%; }
.rtip-body { min-width: 0; overflow-wrap: anywhere; }
.rtip-flag { display: block; font: 700 11px/1.5 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--mist); }
/* de eerstvolgende stap staat bovenaan en valt op, in de kleur van de route */
.rtip-step.is-next { background: rgba(99, 245, 201, .1); box-shadow: inset 3px 0 0 var(--anima); }
.rtip-step.is-next .rtip-num { background: linear-gradient(180deg, #d9fff2, #63d9b5); }
.rtip-step.is-next .rtip-flag { color: var(--anima-soft); }
.rtip-step.is-picked { background: rgba(255, 255, 255, .1); box-shadow: inset 3px 0 0 #fff; }
.rtip-step.is-picked .rtip-flag { color: #fff; }
.rtip-step.is-done .rtip-text { color: var(--mist); text-decoration: line-through; text-decoration-color: rgba(159, 184, 176, .6); }
.rtip-step.is-done .rtip-num { color: #d5ddd9; background: #33423f; }
.rtip-more { min-height: 26px; padding: 0 2px; font: inherit; font-size: 14.5px; color: var(--brass-200); text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; cursor: pointer; }
.rtip-more:hover { color: var(--brass-300); }
.rtip-note { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.3; font-style: italic; color: var(--mist); }
.rtip-note.is-extra { margin-top: 4px; padding-left: 8px; font-style: normal; color: #d8d3c4; border-left: 2px solid rgba(201, 161, 78, .4); }

/* ---------- De balk boven de kaart zolang er een route op staat ---------- */

.route-bar { display: grid; gap: 6px; margin: 0 0 12px; padding: 8px 10px 9px; background: rgba(4, 14, 14, .5); border: 1px solid rgba(99, 245, 201, .38); border-radius: 2px; }
.route-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.route-title { display: flex; flex: 1 1 auto; align-items: center; gap: 8px; min-width: 0; margin: 0; font-size: 16.5px; line-height: 1.25; overflow-wrap: anywhere; }
.route-title .icon { flex: none; width: 18px; height: 18px; color: var(--anima-soft); }
.route-title b { color: var(--brass-200); }
.route-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.route-acts .icon, .route-zoom .icon { width: 15px; height: 15px; }
.route-line { display: flex; align-items: flex-start; gap: 10px; }
.route-words { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 16px; line-height: 1.35; overflow-wrap: anywhere; }
.route-line.is-next .route-words b { color: var(--anima-soft); }
.route-line.is-picked .route-words b { color: #fff; }
.route-where { font-style: italic; color: var(--mist); }
.route-done { display: inline-flex; flex: none; align-items: center; gap: 7px; min-height: 34px; padding: 2px 9px 2px 6px; font: 600 13.5px/1 var(--font-display); letter-spacing: .06em; color: var(--bone); background: rgba(4, 14, 14, .5); border: 1px solid rgba(99, 245, 201, .55); border-radius: 2px; cursor: pointer; }
.route-done input { width: 20px; height: 20px; margin: 0; accent-color: #2a625d; cursor: pointer; }
.route-zoom { flex: none; }
.route-note { margin: 0; font-size: 15px; line-height: 1.35; font-style: italic; color: var(--mist); }
.map-frame.is-full .route-bar { flex: none; }
@media (max-width: 760px), (max-height: 560px) {
  /* venstervullend op een telefoon is alles voor de kaart: de balk zou er een kwart van bedekken, en de
     panelen liggen daar al. De markeringen en hun kaartjes zeggen dan wat de route is. */
  .map-frame.is-full .route-bar { display: none; }
}
.base-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 2px 12px;
  width: 100%;
  padding: 11px 8px 10px;
  font: inherit;
  line-height: 1.3;
  color: var(--bone);
  text-align: left;
  background: none;
  border: 0;
  border-top: 1px solid rgba(201, 161, 78, .18);
  cursor: pointer;
}
.base-item:hover:not(:disabled) { background: rgba(247, 226, 162, .06); }
.base-item[aria-pressed="true"] { background: rgba(99, 245, 201, .09); box-shadow: inset 3px 0 0 var(--anima); }
.base-item:disabled { cursor: default; color: var(--mist); }
.base-item-count { font-weight: 700; color: var(--brass-200); }
.base-item small { grid-column: 1 / -1; font-size: 14.5px; font-style: italic; color: var(--mist); }
/* Een regel van de lijst: de knop die de basis kiest, met ernaast (niet erin) het potlood om haar te hernoemen. */
.base-row { display: flex; align-items: stretch; border-top: 1px solid rgba(201, 161, 78, .18); }
.base-row .base-item { flex: 1 1 auto; width: auto; min-width: 0; border-top: 0; }
.base-item > span:first-child { overflow-wrap: anywhere; }
.base-item-kind { align-self: center; display: inline-flex; color: #6fe3dc; }
.base-item-kind .icon { width: 19px; height: 19px; }
.base-edit {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  min-height: 44px;
  padding: 0;
  color: var(--mist);
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.base-edit .icon { width: 18px; height: 18px; }
.base-edit:hover, .base-edit[aria-expanded="true"] { color: var(--brass-200); background: rgba(247, 226, 162, .06); }
.base-rename {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin: 0 0 12px;
  padding: 12px 10px;
  background: rgba(4, 14, 14, .45);
  border: 1px solid rgba(201, 161, 78, .3);
  border-radius: 2px;
}
.br-field { display: grid; gap: 3px; font-size: 15px; line-height: 1.3; color: var(--mist); }
.br-field input {
  width: 100%;
  min-width: 0;
  height: 44px;
  padding: 0 10px;
  font: 500 17px/1.2 var(--font-body);
  color: var(--bone);
  background: rgba(4, 14, 14, .62);
  border: 1px solid var(--brass-700);
  border-radius: 2px;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .55);
  -webkit-appearance: none;
  appearance: none;
}
.br-field input:focus-visible { outline: 2px solid var(--anima); outline-offset: 1px; border-color: var(--brass-300); }
/* tijdens het opslaan: velden alleen te lezen, knoppen uit, het formulier zelf houdt de focus vast */
.br-field input:read-only { color: var(--mist); }
.base-rename:focus { outline: none; }
.br-hint { font-size: 14px; font-style: italic; opacity: .85; }
.br-msg { margin: 0; font-size: 15.5px; line-height: 1.3; color: var(--ember-soft); }
.br-msg:empty { display: none; }
.br-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.br-actions .btn { flex: 1 1 0; min-width: 0; padding-inline: 10px; }
.br-reset:disabled { opacity: .45; cursor: default; }
.br-reset {
  justify-self: start;
  min-height: 40px;
  padding: 0;
  font: inherit;
  font-size: 15.5px;
  font-style: italic;
  line-height: 1.25;
  color: var(--mist);
  text-align: left;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  background: none;
  border: 0;
  cursor: pointer;
}
.br-reset:hover:not(:disabled) { color: var(--bone); text-decoration-style: solid; }
.side-note { margin: 12px 4px 0; padding-top: 12px; font-size: 15px; font-style: italic; color: var(--mist); border-top: 1px solid rgba(201, 161, 78, .18); }
.side-empty { margin: 0 4px; font-style: italic; color: var(--mist); }

/* ---------- Zoeken en recepten ---------- */

.search { min-width: 0; padding: clamp(14px, 2.4vw, 22px); clip-path: none; }
.search-box { position: relative; display: flex; align-items: center; gap: 8px; }
.search-glass { position: absolute; left: 14px; width: 22px; height: 22px; color: var(--brass-500); pointer-events: none; }
.search-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 52px;
  padding: 0 14px 0 46px;
  font: 500 20px/1.2 var(--font-body);
  color: var(--bone);
  background: rgba(4, 14, 14, .62);
  border: 1px solid var(--brass-700);
  border-radius: 2px;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .55);
  -webkit-appearance: none;
  appearance: none;
}
.search-input::placeholder { color: #7f958f; font-style: italic; }
.search-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search-input:focus-visible { outline: 2px solid var(--anima); outline-offset: 1px; border-color: var(--brass-300); }
.search-clear { flex: none; height: 52px; width: 48px; }
.search-results {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 6;
  max-height: min(60vh, 440px);
  margin: 0;
  padding: 4px;
  list-style: none;
  overflow-y: auto;
  background: #0b1f1f;
  border: 1px solid var(--brass-500);
  border-radius: 2px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .7);
}
.sr-row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 6px 10px;
  border-radius: 2px;
  cursor: pointer;
}
.sr-row[aria-selected="true"] { background: linear-gradient(180deg, #1e3f3c, #153331); box-shadow: inset 0 0 0 1px rgba(201, 161, 78, .45); }
.sr-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-kind { font-size: 15px; font-style: italic; color: var(--mist); white-space: nowrap; }
.search-status { min-height: 1.5em; margin: 8px 2px 0; font-size: 15.5px; font-style: italic; color: var(--mist); overflow-wrap: anywhere; }

.it-icon { display: block; flex: none; object-fit: contain; image-rendering: auto; }
.it-none { display: grid; place-items: center; width: 32px; height: 32px; color: var(--brass-700); }
.it-none .icon { width: 60%; height: 60%; }

/* Vastgezette voorwerpen: een rij onder het zoekvak die blijft staan, wat er ook open ligt.
   Een regel is twee knoppen naast elkaar: het voorwerp zelf en het kruisje dat het losmaakt. */
.pin-icon { fill: none; }
.pins { margin-top: 4px; }
.pins-title { display: flex; align-items: center; gap: 7px; margin: 0 0 7px; font: 600 14px/1.2 var(--font-display); letter-spacing: .08em; color: var(--brass-300); }
.pins-title .pin-icon { width: 17px; height: 17px; fill: currentColor; }
.pins-count { font: italic 400 14.5px/1.2 var(--font-body); letter-spacing: 0; color: var(--mist); }
.pins.is-full .pins-count { color: var(--ember-soft); }
.pin-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pin {
  display: flex;
  min-width: 0;
  max-width: min(100%, 300px);
  min-height: 40px;
  background: rgba(8, 22, 22, .45);
  border: 1px solid rgba(201, 161, 78, .28);
  border-radius: 2px;
  transition: border-color .15s, background-color .15s;
}
.pin:hover { border-color: var(--brass-500); }
.pin-open, .pin-remove { margin: 0; color: inherit; background: none; border: 0; border-radius: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pin-open {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 3px 9px 3px 5px;
  font: 500 15.5px/1.15 var(--font-body);
  color: var(--bone);
  text-align: left;
}
.pin-open:hover { color: var(--brass-200); }
.pin-face { display: grid; flex: none; place-items: center; width: 28px; height: 28px; }
.pin-face .it-icon { width: 28px; height: 28px; }
.pin-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pin-remove { display: grid; flex: none; place-items: center; width: 34px; color: var(--mist); border-left: 1px solid rgba(201, 161, 78, .2); transition: color .15s, background-color .15s; }
.pin-remove .icon { width: 15px; height: 15px; }
.pin-remove:hover { color: var(--ember-soft); background: rgba(240, 138, 60, .14); }
.pin-open:focus-visible, .pin-remove:focus-visible { outline-offset: -2px; }
.pin.is-current {
  background: linear-gradient(180deg, #1e3f3c, #102726);
  border-color: var(--brass-300);
  box-shadow: inset 0 1px 0 rgba(247, 226, 162, .14), inset 0 0 0 1px rgba(0, 0, 0, .5);
}
.pin.is-current .pin-open { color: var(--brass-200); }
.pin.is-current .pin-remove { border-left-color: rgba(236, 208, 138, .4); }
.pin.is-gone { border-style: dashed; }
.pin.is-gone .pin-open { color: var(--mist); cursor: default; }
.pin.is-gone .pin-name { text-decoration: line-through; }
.pins-note { margin: 8px 2px 0; font-size: 15.5px; color: var(--ember-soft); overflow-wrap: anywhere; }
.pins-note:empty { display: none; }

.recipe-card { margin-top: 8px; padding-top: 16px; border-top: 1px solid rgba(201, 161, 78, .22); }
.pins:not([hidden]) + .recipe-card { margin-top: 14px; }
.rc-head { display: flex; align-items: center; gap: 16px; }
.rc-names { flex: 1 1 auto; min-width: 0; }
.rc-pin { flex: none; align-self: flex-start; }
.rc-pin .pin-icon { width: 18px; height: 18px; }
.rc-pin[aria-pressed="true"] {
  color: var(--brass-200);
  background: linear-gradient(180deg, rgba(201, 161, 78, .3), rgba(201, 161, 78, .12)), linear-gradient(180deg, #0c1f1f, #173432);
  border-color: var(--brass-300);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .6);
}
.rc-pin[aria-pressed="true"] .pin-icon { fill: currentColor; }
.rc-icon { width: 64px; height: 64px; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .6)); }
.rc-title { margin: 0; font: 700 clamp(22px, 3vw, 28px)/1.15 var(--font-display); letter-spacing: .04em; color: var(--brass-200); overflow-wrap: anywhere; }
.rc-sub { margin: 4px 0 0; font-size: 17px; color: var(--mist); }
/* wat de wiki over het voorwerp vertelt: de tekst zoals hij daar staat, met zijn bron */
.rc-about { margin-top: 14px; max-width: 780px; padding-left: 14px; border-left: 3px solid rgba(201, 161, 78, .45); }
.rc-about-clip { overflow: hidden; transition: max-height .28s cubic-bezier(.3, 0, .2, 1); }
/* de laatste regel van een ingekorte tekst vervaagt: er komt nog meer */
.rc-about-clip.is-clamped {
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 1.5em), rgba(0, 0, 0, .25));
  mask-image: linear-gradient(180deg, #000 calc(100% - 1.5em), rgba(0, 0, 0, .25));
}
.rc-about-text { font-size: 17.5px; line-height: 1.5; overflow-wrap: anywhere; }
.rc-about-text p { margin: 0; }
.rc-about-text p + p { margin-top: .6em; }
.rc-about-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 18px; margin-top: 4px; }
.rc-about-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 4px 10px 3px 0;
  font: 600 13.5px/1 var(--font-display);
  letter-spacing: .06em;
  color: var(--brass-300);
  background: none;
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.rc-about-more:hover { color: var(--brass-200); }
.rc-about-more .icon { width: 15px; height: 15px; transition: transform .28s cubic-bezier(.3, 0, .2, 1); }
.rc-about-more[aria-expanded="true"] .icon { transform: rotate(180deg); }
.rc-source { margin: 0; padding: 6px 0; font-size: 15px; color: var(--mist); }
.rc-source a { color: var(--brass-200); text-underline-offset: 3px; }
.rc-source a:hover { color: var(--brass-300); }
.rc-licence { white-space: nowrap; }
.rc-variants { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
/* op het kaartje van een vestige: de kop boven de boom van wat hij je leert */
.rc-lesson-h { margin: 22px 0 0; overflow-wrap: anywhere; }

/* Kweken (js/search.js farmBlock): de keten zaad → akker → oogst met de feiten eronder, en het knopje
   "uit zaad" bij een gewas in de tekening en in de lijst met grondstoffen. */
.rc-farm { margin-top: 18px; max-width: 980px; }
.farm-entry + .farm-entry { margin-top: 16px; padding-top: 12px; border-top: 1px solid rgba(201, 161, 78, .12); }
.farm-chain { display: flex; align-items: flex-start; gap: 4px; margin-top: 8px; }
.farm-way { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 112px; flex: 0 1 auto; min-width: 0; padding-top: 18px; color: var(--brass-500); text-align: center; }
.farm-way .rt-arrow-line { width: 34px; height: 14px; }
.farm-way-text { font-size: 13.5px; font-style: italic; line-height: 1.25; color: var(--mist); overflow-wrap: anywhere; }
.farm-item.is-here .rt-face { border-color: var(--brass-300); }
.farm-item.is-here .rt-name { color: var(--brass-200); font-weight: 600; }
.farm-facts { margin-top: 10px; }
.farm-link .use-chip { margin: 0; }
/* Uitrusting uit de spelbestanden (js/search.js gearBlock, waysBlock): de getallen, wat er in een pack zit
   en hoe je eraan komt, met daaronder hoe je aan een pack komt. */
.rc-gear { margin-top: 18px; max-width: 980px; }
.rc-gear .rc-h + .rc-note { margin-bottom: 4px; }
.gear-facts { margin-top: 8px; }
.gear-pack { margin-bottom: 4px; }
.rc-gear .gear-pack ~ .rc-h, .rc-gear .gear-facts + .rc-h { margin-top: 16px; }
.gear-ways { display: grid; gap: 6px; max-width: 780px; margin: 0 0 12px; padding-left: 20px; font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }
.gear-ways.is-sub { gap: 4px; margin: 4px 0 0; font-size: 15px; }
.gear-ways li::marker { color: var(--brass-500); }
.gear-ways .use-chip { min-height: 0; padding: 0 6px; vertical-align: baseline; }
.gear-note { max-width: 780px; margin-bottom: 12px; }
.rt-seed {
  padding: 0 5px;
  font: 600 11.5px/1.5 var(--font-display);
  letter-spacing: .05em;
  color: var(--anima-soft);
  background: none;
  border: 1px solid rgba(99, 245, 201, .45);
  border-radius: 2px;
  cursor: pointer;
}
.rt-seed:hover, .rt-seed:focus-visible { color: var(--bone); border-color: var(--brass-300); }
.rt-seed.is-raw { display: inline-block; margin-top: 4px; font: 500 14px/1.4 var(--font-body); letter-spacing: 0; text-align: left; overflow-wrap: anywhere; }

/* Wat je volgens de wiki nodig hebt om iets te maken of te verzamelen: het blok op het kaartje, het
   regeltje bij een stap van de tekening, bij een grondstof en in de todo-lijst. */
.rc-needs { display: grid; gap: 8px; margin-top: 14px; max-width: 980px; }
.rc-need { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; font-size: 17px; }
.rc-need-h { font: 600 16px/1.3 var(--font-display); letter-spacing: .05em; color: var(--brass-300); }
.need-list { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 0; padding: 0; list-style: none; }
.need {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 8px;
  padding: 3px 10px;
  line-height: 1.3;
  background: rgba(8, 22, 22, .7);
  border: 1px solid rgba(201, 161, 78, .4);
  border-radius: 2px;
  overflow-wrap: anywhere;
}
.need b { font-weight: 600; color: var(--brass-200); }
.need-why { font-size: 14px; font-style: italic; color: var(--mist); }
.rt-need { font-size: 12.5px; font-weight: 600; line-height: 1.2; color: var(--brass-300); overflow-wrap: anywhere; }
.rt-pop-need { font-size: 14px; font-weight: 600; color: var(--brass-300); }
.raw-need { display: block; font-size: 14.5px; line-height: 1.3; color: var(--brass-300); overflow-wrap: anywhere; }
/* ervaring: bij een stap van de tekening, bij een grondstof en in het blok op het kaartje */
.rt-xp { font-size: 12.5px; font-weight: 600; line-height: 1.2; color: var(--anima-soft); overflow-wrap: anywhere; }
.raw-xp { display: block; font-size: 14.5px; line-height: 1.3; color: var(--anima-soft); overflow-wrap: anywhere; }
.rc-xp .rc-need-h { color: var(--anima-soft); }
.rc-xp .need b { color: var(--anima-soft); }
.todo-note.is-need { font-style: normal; color: var(--brass-300); }
.rc-h { margin: 0 0 8px; font: 600 16px/1.2 var(--font-display); letter-spacing: .06em; color: var(--brass-300); }
.rc-note { margin: 0; font-size: 15px; font-style: italic; color: var(--mist); }
.rc-unknown { margin-top: 16px; }
.layer-search { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 10px; font-size: 15.5px; color: var(--brass-200); }

/* Het recept: grondstoffen links, eindproduct rechts. Elk onderdeel is een rij:
   wat erin gaat, een pijl, wat eruit komt. */
.rc-flow {
  margin: 16px -4px 0;
  padding: 22px 12px 16px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  background: rgba(4, 14, 14, .5);
  box-shadow: inset 0 0 0 1px rgba(201, 161, 78, .16), inset 0 2px 12px rgba(0, 0, 0, .5);
  border-radius: 2px;
  scrollbar-color: var(--brass-700) transparent;
}
.rc-flow > .rt-node { width: max-content; margin-inline: auto; }
/* Alles lijnt boven uit: het eindproduct staat rechtsboven en elke pijl wijst naar een vakje.
   De maat 33px is het midden van het vakje van een ingrediënt, gerekend vanaf de bovenkant
   van zijn rij (3px ruimte, 3px marge, half vakje van 54px). */
.rt-node { display: flex; align-items: flex-start; }
.rt-inputs { display: flex; flex-direction: column; align-items: flex-end; }
.rt-row { position: relative; display: flex; justify-content: flex-end; padding: 3px 16px 3px 0; }
/* het haakje dat de ingrediënten bij elkaar brengt */
.rt-row::after { content: ""; position: absolute; right: 0; top: 33px; width: 12px; border-top: 2px solid var(--brass-700); }
.rt-row::before { content: ""; position: absolute; right: 0; top: 0; bottom: 0; border-right: 2px solid var(--brass-700); }
.rt-row:first-child::before { top: 33px; }
.rt-row:last-child::before { bottom: calc(100% - 33px); }
.rt-row:only-child::before { display: none; }
.rt-row.is-fuel::after { border-top-style: dashed; border-color: var(--ember); }
.rt-arrow {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 40px;
  margin: 10px 2px 0 -2px;
  padding: 0;
  color: var(--brass-500);
  background: none;
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.rt-arrow:hover, .rt-arrow[aria-describedby] { color: var(--anima); }
.rt-arrow-line { width: 34px; height: 14px; display: block; }
.rt-item { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 92px; margin-top: 3px; flex: none; text-align: center; }
.rt-face {
  position: relative;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  padding: 0;
  color: inherit;
  background: rgba(8, 22, 22, .7);
  border: 1px solid rgba(201, 161, 78, .32);
  border-radius: 2px;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, .55);
}
button.rt-face { cursor: pointer; -webkit-tap-highlight-color: transparent; transition: border-color .15s; }
button.rt-face:hover { border-color: var(--brass-300); }
.rt-face .it-icon { width: 40px; height: 40px; }
.rt-qty {
  position: absolute;
  right: -7px;
  bottom: -6px;
  min-width: 24px;
  padding: 1px 4px 0;
  font: 700 13.5px/1.3 var(--font-body);
  color: #1d1406;
  background: linear-gradient(180deg, #f6e1a0, #c9a14e);
  border-radius: 2px;
  box-shadow: 0 1px 0 #1a1206;
}
.rt-name { font-size: 14px; line-height: 1.2; color: var(--bone); overflow-wrap: anywhere; }
.rt-item.is-raw .rt-face { border-color: rgba(99, 245, 201, .45); background: rgba(12, 44, 40, .7); }
.rt-item.is-raw .rt-name { color: var(--anima-soft); }
.rt-item.is-root { width: 116px; margin-top: -8px; }
.rt-item.is-root .rt-face { width: 76px; height: 76px; border-color: var(--brass-300); box-shadow: inset 0 0 14px rgba(0, 0, 0, .55), 0 0 18px rgba(236, 208, 138, .18); }
.rt-item.is-root .rt-face .it-icon { width: 56px; height: 56px; }
.rt-item.is-root .rt-name { font: 700 16px/1.2 var(--font-body); color: var(--brass-200); }
.rt-item.is-fuel .rt-face { border-style: dashed; border-color: var(--ember); }
.rt-tag {
  display: inline-block;
  padding: 0 5px;
  font: 600 11.5px/1.5 var(--font-display);
  letter-spacing: .05em;
  color: var(--ember-soft);
  border: 1px solid rgba(240, 138, 60, .55);
  border-radius: 2px;
}
.rt-alt { font-size: 12.5px; font-style: italic; line-height: 1.2; color: var(--mist); }
.rt-variant {
  padding: 1px 6px 0;
  font: 500 12.5px/1.4 var(--font-body);
  color: var(--mist);
  background: none;
  border: 1px solid rgba(159, 184, 176, .4);
  border-radius: 2px;
  cursor: pointer;
}
.rt-variant:hover { color: var(--bone); border-color: var(--brass-300); }
.rt-pop {
  position: fixed;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 108px;
  max-width: 220px;
  padding: 10px 12px 8px;
  text-align: center;
  background: #0b1f1f;
  border: 1px solid var(--brass-500);
  border-radius: 2px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .7);
  pointer-events: none;
}
.rt-pop.is-pinned { pointer-events: auto; }
.rt-pop-icon { width: 44px; height: 44px; }
.rt-pop-name { font-size: 16px; line-height: 1.2; color: var(--brass-200); }
.rt-pop-skill { font-size: 14px; font-style: italic; color: var(--mist); }
.rt-pop-open {
  margin-top: 5px;
  padding: 4px 9px 3px;
  font: 600 12.5px/1.2 var(--font-display);
  letter-spacing: .05em;
  color: var(--brass-300);
  background: linear-gradient(180deg, #1e3f3c, #102726);
  border: 1px solid var(--brass-700);
  border-radius: 2px;
  cursor: pointer;
}

.rc-options { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; margin-top: 10px; }
.rc-hint { font-size: 14.5px; font-style: italic; color: var(--mist); }
.rc-switch { display: inline-flex; align-items: center; gap: 9px; min-height: 36px; font-size: 16.5px; cursor: pointer; }
.rc-switch input { width: 20px; height: 20px; margin: 0; accent-color: var(--ember); }
.rc-raw { margin-top: 18px; }
.raw-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 4px 22px; margin: 0 0 14px; padding: 0; list-style: none; }
.raw-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 5px 0; border-bottom: 1px solid rgba(201, 161, 78, .12); }
.raw-face { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; background: rgba(8, 22, 22, .7); border: 1px solid rgba(99, 245, 201, .35); border-radius: 2px; cursor: pointer; }
.raw-face:hover { border-color: var(--brass-300); }
.raw-face .it-icon { width: 32px; height: 32px; }
.raw-text { min-width: 0; }
.raw-name { display: block; font-size: 17px; line-height: 1.25; overflow-wrap: anywhere; }
.raw-name b { color: var(--brass-200); }
.raw-name .rt-tag { margin-left: 8px; vertical-align: .1em; }
.raw-source { display: block; font-size: 14.5px; line-height: 1.3; color: var(--mist); overflow-wrap: anywhere; }
.raw-map { flex: none; }
/* Het kaartje van één ding: de ene regel mag de hele breedte nemen. */
.raw-list.is-single { grid-template-columns: minmax(0, 1fr); max-width: 780px; }
.raw-list.is-single .raw-source { font-size: 16px; line-height: 1.4; }
.rc-wiki { margin-top: 18px; max-width: 780px; }
.rc-wiki .rc-note { margin-bottom: 8px; }
.rc-quote { margin: 0 0 8px; padding: 6px 0 6px 14px; border-left: 3px solid rgba(201, 161, 78, .45); font-size: 16.5px; line-height: 1.45; overflow-wrap: anywhere; }
.rc-wiki-link { display: inline-block; padding: 6px 0; font-size: 15px; color: var(--brass-200); text-underline-offset: 3px; }
.rc-wiki-link:hover { color: var(--brass-300); }
.rc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
/* een rij knoppen met de regel voor hun meldingen eronder: wat een knop te zeggen heeft, staat bij die knop */
.rc-msg.is-pin { text-align: right; }
.rc-head + .rc-msg + .rc-acts { margin-top: 16px; }
.rc-msg { margin: 8px 2px 0; font-size: 15.5px; line-height: 1.35; color: var(--ember-soft); overflow-wrap: anywhere; }
.rc-msg:empty { display: none; }
/* ---------- Monsters in het zoekvak ---------- */

/* in de lijst met treffers staan onder de naam van een monster zijn zwakheden in woorden: ook op een telefoon */
.it-none.is-monster { color: var(--ember-soft); }
.sr-row.is-monster { min-height: 54px; }
.sr-main { display: grid; gap: 2px; min-width: 0; }
.sr-weak { font-size: 14.5px; line-height: 1.3; color: var(--mist); overflow-wrap: anywhere; }
/* onder de naam van een voorwerp wat het aan ervaring oplevert: ook op een telefoon */
.sr-xp { font-size: 14px; line-height: 1.3; color: var(--anima-soft); overflow-wrap: anywhere; }
.sr-kind.is-monster {
  padding: 2px 8px 1px;
  font: 700 11.5px/1.5 var(--font-display);
  font-style: normal;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #2a1606;
  background: var(--ember-soft);
  border-radius: 2px;
}
.pin.is-monster { border-color: rgba(255, 201, 143, .35); }
.mc-actions .mc-wiki { text-decoration: none; }
.mc-block { margin-top: 20px; }
.mc-block > .rc-h { margin-bottom: 10px; }
.mc-version { margin: 12px 0 6px; font: 600 15px/1.3 var(--font-body); color: var(--bone); }
.mc-weak { display: grid; gap: 8px; margin: 0; }
.mc-weak-row { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); align-items: baseline; gap: 4px 12px; }
.mc-weak-row dt { font: 600 13.5px/1.7 var(--font-display); letter-spacing: .08em; color: var(--brass-300); }
.mc-weak-row dd { margin: 0; min-width: 0; }
.mc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.mc-chip { padding: 2px 8px 1px; border: 1px solid currentColor; border-radius: 2px; font-size: 15px; font-weight: 600; letter-spacing: .02em; }
.mc-weak-row.is-weak .mc-chip { color: #9fe08a; }
.mc-weak-row.is-resist .mc-chip { color: #f0a58c; }
.mc-weak-row.is-immune .mc-chip { color: #b9c4c4; }
.mc-versions, .mc-attacks, .mc-drop-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.mc-version-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; font-size: 16.5px; }
.mc-version-name { color: var(--bone); }
.mc-areas { color: var(--mist); }
.mc-facts { margin-top: 16px; }
.mc-attack { font-size: 16.5px; line-height: 1.45; max-width: 820px; }
.mc-attack-name { color: var(--bone); }
.mc-attacks.is-more { margin: 6px 0 0 18px; gap: 4px; }
.mc-attacks.is-more .mc-attack { font-size: 15.5px; color: var(--mist); }
.mc-drops { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 32px; }
.mc-drop-group { min-width: 0; }
.mc-drop-list { max-width: 520px; }
.mc-drop-h { margin: 0 0 8px; font: 700 12.5px/1.4 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--brass-200); }
.mc-drop { display: grid; grid-template-columns: 3.6em minmax(0, 1fr) auto; align-items: baseline; gap: 2px 10px; font-size: 16px; }
.mc-qty { text-align: right; color: var(--mist); white-space: nowrap; }
.mc-drop-name { justify-self: start; min-width: 0; overflow-wrap: anywhere; }
.mc-drop-name.is-plain { padding: 3px 0 2px; }
.mc-chance { font-weight: 600; color: var(--brass-200); white-space: nowrap; text-align: right; }
.mc-chance.is-unknown { font-weight: 400; font-style: italic; color: var(--mist); white-space: normal; }
.mc-drop-note { grid-column: 2 / -1; font-size: 14.5px; color: var(--mist); }
.mc-source { margin-top: 18px; }
.mc-dropped .mc-from-chance { color: var(--mist); }


/* ---------- Quests in het zoekvak ---------- */

.it-none.is-quest { color: var(--anima-soft); }
.sr-quest { width: 32px; height: 32px; }
.sr-kind.is-quest {
  padding: 2px 8px 1px;
  font: 700 11.5px/1.5 var(--font-display);
  font-style: normal;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #06211b;
  background: var(--anima-soft);
  border-radius: 2px;
}
.pin-quest { width: 28px; height: 28px; }
.pin.is-quest { border-color: rgba(189, 247, 227, .35); }
.rc-head .it-none.rc-icon { background: radial-gradient(circle at 50% 38%, #24544f, #0c2121 78%); border: 1px solid rgba(201, 161, 78, .45); border-radius: 2px; filter: none; }
.rc-gates { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 12px 0 0; font-size: 17px; }
.rc-gates-icon { width: 22px; height: 22px; }
/* Welk recept je nodig hebt en hoe het vrijkomt: de kop, dan het recept-item en de uitleg, die op een
   smal scherm onder elkaar vallen. */
.rc-unlock { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; max-width: 980px; margin-top: 12px; font-size: 17px; }
.rc-unlock-body { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-width: 0; flex: 1 1 260px; overflow-wrap: anywhere; }
.rc-unlock-how { color: var(--bone); }
.rc-unlock-told { flex-basis: 100%; font-size: 15.5px; color: var(--mist); }
.rc-unlock-quote { font-style: italic; }
.rc-unlock-src { font-size: 13.5px; color: var(--mist); white-space: nowrap; }
.rc-unlock-unknown { color: var(--mist); font-style: italic; }
/* Wie van de spelers van deze server het recept heeft (js/holders.js); online met het groene stipje. */
.rc-holders { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; max-width: 980px; margin: 10px 0 0; font-size: 17px; }
.rc-holder-list { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; flex: 1 1 220px; min-width: 0; margin: 0; padding: 0; list-style: none; overflow-wrap: anywhere; }
.rc-holder { color: var(--bone); }
.rc-holder.is-online::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  margin-right: 6px;
  vertical-align: .08em;
  border-radius: 50%;
  background: var(--anima);
  box-shadow: 0 0 8px 1px rgba(99, 245, 201, .7);
}
.rc-holders.is-none { color: var(--brass-200); font-style: italic; }
.rc-holders.is-untracked { font-size: 15.5px; color: var(--mist); }
.use-chip.is-plain { cursor: default; border-style: dashed; }
.use-chip.is-plain:hover { color: inherit; border-color: inherit; }
.q-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; max-width: 780px; margin: 16px 0 0; font-size: 17px; }
.q-facts dt { font: 600 13.5px/1.7 var(--font-display); letter-spacing: .08em; color: var(--brass-300); }
.q-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.q-rewards { margin: 0; padding: 0 0 0 1.1em; }
.q-steps { display: grid; gap: 2px; max-width: 860px; margin: 0 0 14px; padding: 0; list-style: none; }
/* een tussenkop waar een nieuw deel van de quest begint */
.q-part { margin-top: 12px; padding: 6px 0 4px; border-bottom: 1px solid rgba(201, 161, 78, .32); }
.q-part:first-child { margin-top: 0; }
.q-part-name { margin: 0; font: 600 14.5px/1.3 var(--font-display); letter-spacing: .08em; color: var(--brass-300); overflow-wrap: anywhere; }
/* een losse opmerking bij een stap (wat je nodig hebt) */
.q-note { display: block; margin-top: 4px; padding-left: 10px; font-size: 15.5px; line-height: 1.35; color: #d8d3c4; border-left: 2px solid rgba(201, 161, 78, .4); overflow-wrap: anywhere; }
.q-cut { margin-bottom: 14px; color: var(--ember-soft); }
.q-step { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: start; gap: 12px; padding: 8px 0 7px; border-bottom: 1px solid rgba(201, 161, 78, .12); }
.q-num {
  display: grid; place-items: center; width: 28px; height: 28px; margin-top: 1px;
  font: 700 14px/1 var(--font-display); color: #1c1306;
  background: linear-gradient(180deg, #f6e1a0, #c9a14e); border: 1px solid #120c04; border-radius: 50%;
}
.q-body { display: block; min-width: 0; }
.q-text { display: block; font-size: 17.5px; line-height: 1.4; overflow-wrap: anywhere; }
.q-place { display: block; margin-top: 1px; font-size: 15px; font-style: italic; color: var(--mist); overflow-wrap: anywhere; }
.q-place.is-unknown { color: var(--ember-soft); }
.q-items { margin-top: 6px; }
.q-map { align-self: center; }
.q-map .icon { width: 15px; height: 15px; }
.q-step.is-done .q-text { color: var(--mist); text-decoration: line-through; text-decoration-color: rgba(159, 184, 176, .6); }
.q-step.is-done .q-num { color: #d5ddd9; background: #33423f; }
.q-step.is-next .q-num { background: linear-gradient(180deg, #d9fff2, #63d9b5); box-shadow: 0 0 0 2px rgba(99, 245, 201, .45); }
.q-source { margin-top: 10px; }
.rc-todo .icon { width: 19px; height: 19px; }

/* De walkthrough van een quest (js/video.js), op het kaartje en in de todo-lijst. Vóór de klik
   alleen tekst en een knop; de speler is 16:9 en schaalt mee met de breedte. */
.vid { max-width: 780px; margin-top: 18px; padding: 12px 14px 14px; background: rgba(4, 14, 14, .45); border: 1px solid rgba(201, 161, 78, .3); border-radius: 2px; }
.vid-h { margin: 0; font: 600 16px/1.2 var(--font-display); letter-spacing: .06em; color: var(--brass-300); }
.vid-what { margin: 4px 0 0; font-size: 17px; line-height: 1.35; overflow-wrap: anywhere; }
.vid-by { color: var(--mist); }
.vid-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 10px; }
.vid-face { display: grid; place-items: center; flex: none; width: 16px; height: 16px; }
.vid-face .icon { width: 16px; height: 16px; }
.vid-load[aria-expanded="true"] { border-color: var(--brass-300); }
.vid-out { font-size: 15.5px; color: var(--brass-200); text-underline-offset: 3px; overflow-wrap: anywhere; }
.vid-out:hover { color: var(--brass-300); }
.vid-note { margin: 8px 0 0; font-size: 14.5px; line-height: 1.35; font-style: italic; color: var(--mist); }
.vid-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; margin-top: 12px; overflow: hidden; background: #000; border: 1px solid rgba(201, 161, 78, .3); }
.vid-player { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; }
/* in de todo-lijst: een strook boven de regels, met de kleine knoppen van de lijst */
.vid.is-small { max-width: none; margin: 0; padding: 9px 10px 10px; background: rgba(201, 161, 78, .05); border: 0; border-bottom: 1px solid rgba(201, 161, 78, .18); border-radius: 0; }
.vid.is-small .vid-h { font-size: 12.5px; letter-spacing: .08em; }
.vid.is-small .vid-what { margin-top: 2px; font-size: 15.5px; line-height: 1.3; }
.vid.is-small .vid-acts { gap: 6px 14px; margin-top: 7px; }
.vid.is-small .vid-load { min-height: 32px; }
.vid.is-small .vid-note { margin-top: 6px; font-size: 13.5px; }
.vid.is-small .vid-frame { margin-top: 9px; }
@media (max-width: 640px) {
  .vid { padding: 10px 10px 12px; }
  .vid-load { min-height: 44px; }
  .vid.is-small .vid-load { min-height: 40px; }
  .vid-out { display: inline-flex; align-items: center; min-height: 44px; }
}

.rc-uses { margin-top: 20px; padding-top: 14px; border-top: 1px solid rgba(201, 161, 78, .16); }
.use-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.use-chip {
  min-height: 32px;
  padding: 3px 10px 2px;
  font: 500 15px/1.2 var(--font-body);
  color: var(--mist);
  background: rgba(8, 22, 22, .45);
  border: 1px solid rgba(201, 161, 78, .28);
  border-radius: 2px;
  cursor: pointer;
}
.use-chip:hover { color: var(--bone); border-color: var(--brass-500); }
.use-chip.is-more { font-style: italic; }

/* ---------- De kisten bij het zoekvak ---------- */

/* De blauwe kistenbadge in een treffer en de kistknop bij een ingrediënt; het blauw is dat van .mk-chest. */
.chest-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px 2px;
  font: 600 12.5px/1.4 var(--font-display);
  letter-spacing: .06em;
  color: #dbe8ff;
  background: rgba(63, 130, 234, .14);
  border: 1px solid rgba(110, 160, 240, .5);
  border-radius: 20px;
  white-space: nowrap;
}
.chest-badge .icon, .chest-btn .icon { width: 14px; height: 14px; }
.sr-row.has-chests { grid-template-columns: 32px minmax(0, 1fr) auto auto; }
.chest-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 4px 10px 3px;
  font: 600 12.5px/1 var(--font-display);
  letter-spacing: .05em;
  color: #dbe8ff;
  background: rgba(63, 130, 234, .14);
  border: 1px solid rgba(110, 160, 240, .5);
  border-radius: 2px;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.chest-btn:hover { border-color: #cfe0ff; background: rgba(63, 130, 234, .26); }

/* Het kaartje op de serverpagina: rechts in de kop de soort, onder de kop het recept en de kisten naast elkaar. */
.rc-kind { flex: none; align-self: flex-start; padding: 3px 10px 2px; font: 600 12.5px/1.4 var(--font-display); letter-spacing: .08em; color: var(--brass-300); border: 1px solid rgba(201, 161, 78, .45); border-radius: 2px; }
.rc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 22px 32px; margin: 20px 0 6px; padding-top: 18px; border-top: 1px solid rgba(201, 161, 78, .22); }
.rc-grid:not(:has(> :not([hidden]))) { display: none; }
.rc-ing-list { margin: 0; padding: 0; list-style: none; }
.rc-ing { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid rgba(201, 161, 78, .12); }
.rc-ing-name { min-width: 0; padding: 0; font: inherit; color: var(--bone); text-align: left; background: none; border: 0; cursor: pointer; overflow-wrap: anywhere; }
.rc-ing-name:hover { color: var(--brass-200); }
.rc-ing-name b { font-weight: 700; color: var(--brass-200); }
.rc-store-h { display: flex; align-items: center; gap: 8px; }
.rc-store-h .icon { width: 18px; height: 18px; color: #7fb0f5; }
.rc-store-lock { display: flex; gap: 10px; margin: 0; font-size: 16px; line-height: 1.4; color: var(--mist); }
.rc-store-lock .icon { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--brass-500); }
.rc-store-none { margin: 0; font-size: 16px; font-style: italic; color: var(--mist); }
.rc-store-count { margin: 0 0 10px; font-size: 17px; }
.rc-store-count b { font: 700 20px/1 var(--font-display); color: var(--brass-200); }
.rc-store-list { margin: 0 0 14px; padding: 0; list-style: none; }
.rc-store-list li { display: flex; align-items: baseline; gap: 10px; padding: 5px 0; border-bottom: 1px solid rgba(201, 161, 78, .12); }
.rc-store-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.rc-store-where { font-size: 15px; font-style: italic; color: var(--mist); }
.rc-store-list b { font: 700 16px/1 var(--font-display); color: var(--brass-200); }
.rc-store-map { min-height: 46px; font-size: 15px; }

/* De kistenbalk boven de kaart zolang de kisten van een voorwerp erop staan: dezelfde plek als de balk van een route. */
.chest-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 0 0 10px;
  padding: 9px 12px;
  background: linear-gradient(180deg, #14304f, #0d213a);
  border: 1px solid rgba(110, 160, 240, .55);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5);
}
.chest-bar:focus { outline: none; }
.chest-bar:focus-visible { outline: 2px solid var(--anima); outline-offset: 2px; }
.chest-bar-icon { width: 32px; height: 32px; }
.chest-bar .it-none { color: #7fb0f5; }
.chest-bar-text { flex: 1 1 200px; min-width: 0; margin: 0; font-size: 17px; line-height: 1.3; color: #e6f0ff; overflow-wrap: anywhere; }
.chest-bar-text b { font: 700 16px/1.2 var(--font-display); letter-spacing: .04em; }
.chest-bar-clear {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 6px 12px 5px;
  font: 600 13px/1 var(--font-display);
  letter-spacing: .06em;
  color: #dbe8ff;
  background: rgba(4, 14, 30, .5);
  border: 1px solid rgba(110, 160, 240, .5);
  border-radius: 2px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.chest-bar-clear:hover { border-color: #cfe0ff; }
.chest-bar-clear .icon { width: 14px; height: 14px; }
.map-frame.is-full .chest-bar { flex: none; }

/* De balk van de kiesstand (Account koppelen): dezelfde plek als de kistenbalk, in de kleur van de lodestones. */
.pick-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 0 0 10px;
  padding: 9px 12px;
  background: linear-gradient(180deg, #123433, #0a2120);
  border: 1px solid rgba(111, 227, 220, .55);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5);
}
.pick-bar:focus { outline: none; }
.pick-bar:focus-visible { outline: 2px solid var(--anima); outline-offset: 2px; }
.pick-bar-text { display: flex; align-items: center; gap: 10px; flex: 1 1 240px; min-width: 0; margin: 0; font-size: 17px; line-height: 1.3; color: #e2fbf8; overflow-wrap: anywhere; }
.pick-bar-text b { font: 700 16px/1.2 var(--font-display); letter-spacing: .04em; }
.pick-bar-icon { flex: none; width: 26px; height: 26px; color: #6fe3dc; }
.pick-bar-close {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  color: #dff8f5;
  background: rgba(4, 20, 20, .5);
  border: 1px solid rgba(111, 227, 220, .5);
  border-radius: 2px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pick-bar-close:hover { border-color: #c9fbf6; }
.pick-bar-close .icon { width: 16px; height: 16px; }
.pick-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; flex: 1 1 100%; min-width: 0; font-size: 16.5px; color: var(--bone); }
.pick-chosen { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.pick-chosen b { color: #6fe3dc; }
.pick-none { font-style: italic; color: var(--mist); }
.pick-ok { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.pick-cancel { min-height: 44px; }
.pick-list { flex: 1 1 100%; }
.pick-list > summary { cursor: pointer; font-size: 15.5px; color: #c9fbf6; }
.pick-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 6px; margin: 8px 0 2px; padding: 0; list-style: none; }
.pick-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 6px 10px;
  font: 600 15.5px/1.25 var(--font-body);
  color: var(--bone);
  text-align: left;
  background: rgba(4, 20, 20, .5);
  border: 1px solid rgba(111, 227, 220, .35);
  border-radius: 2px;
  cursor: pointer;
}
.pick-item .icon { flex: none; width: 16px; height: 16px; color: #6fe3dc; }
.pick-item small { font-weight: 400; color: var(--mist); }
.pick-item.is-selected { border-color: var(--anima); background: rgba(99, 245, 201, .14); }
.pick-item:focus-visible, .pick-list > summary:focus-visible { outline: 2px solid var(--anima); outline-offset: 2px; }
.map-frame.is-full .pick-bar { flex: none; }
@media (max-width: 760px), (max-height: 560px) {
  /* op een telefoon zweven de knoppen van de kaart bovenaan (en de kiesstand zet de kaart daar op volledig scherm):
     de balk begint eronder, anders liggen ze over de tekst en het kruisje */
  .map-frame.is-full .pick-bar { margin: 0; padding-top: calc(max(8px, env(safe-area-inset-top)) + 54px); }
}
@media (max-width: 560px) {
  .pick-ok, .pick-cancel { flex: 1 1 40%; justify-content: center; }
}

/* ---------- Drakenjacht ---------- */

.hunt-intro { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; margin: -6px 0 22px; }
/* met veel bazen passen de ruitjes niet op één regel van een telefoon: dan lopen ze door op de volgende,
   anders maken ze de hele pagina breder dan het venster (en schuift de menubalk half uit beeld) */
.pips { display: flex; flex-wrap: wrap; gap: 10px 14px; min-width: 0; }
.pip-group { display: flex; gap: 6px; }
.pip { --d: #6c7f7a; width: 13px; height: 13px; border: 1.5px solid #51625f; background: #0c1b1b; transform: rotate(45deg); }
.pip.is-on { border-color: var(--d); background: var(--d); box-shadow: 0 0 10px 1px var(--d); }
.hunt-score { margin: 0; font-size: 16.5px; line-height: 1.3; color: var(--mist); white-space: nowrap; }
.hunt-score b { font-size: 21px; font-weight: 700; color: var(--brass-200); }
.hunt-rules { flex: 1 1 320px; margin: 0; font-size: 16.5px; line-height: 1.4; color: var(--mist); max-width: 78ch; }

.dragons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.dragon {
  --d: #c9a14e;
  --d-hi: #f1dfae;
  --d-mid: #6f5a2c;
  --d-lo: #1f1a0e;
  padding: 22px clamp(14px, 2.2vw, 26px) 24px;
  background-image:
    url("assets/grain-light.svg"),
    radial-gradient(90% 60% at 50% 0%, var(--d-wash, rgba(64, 140, 126, .2)), transparent 66%),
    linear-gradient(180deg, #132d2c 0%, #0b1e1e 100%);
}
.dragon[data-dragon="velgar"],.trophy[data-dragon="velgar"] { --d: #6fae3d; --d-hi: #c9f08b; --d-mid: #3c6524; --d-lo: #13220f; }
.dragon[data-dragon="imaru"], .trophy[data-dragon="imaru"]  { --d: #4fc3d9; --d-hi: #c2f4fb; --d-mid: #246f80; --d-lo: #0b2329; }
.dragon[data-dragon="titan"], .trophy[data-dragon="titan"]  { --d: #c9ced6; --d-hi: #ffffff; --d-mid: #5e6570; --d-lo: #16191e; }
.dragon[data-dragon="fuzan"], .trophy[data-dragon="fuzan"]  { --d: #e2572b; --d-hi: #ffc46b; --d-mid: #7f2b14; --d-lo: #2a0f09; }
.dragon[data-dragon="kuldra"],.trophy[data-dragon="kuldra"] { --d: #9a5bd6; --d-hi: #e2c4ff; --d-mid: #55307c; --d-lo: #1c112b; }
@supports (color: color-mix(in oklab, red 50%, blue)) {
  .dragon, .trophy {
    --d-hi: color-mix(in oklab, var(--d) 42%, #fffbe6);
    --d-mid: color-mix(in oklab, var(--d) 58%, #05100f);
    --d-lo: color-mix(in oklab, var(--d) 22%, #05100f);
    --d-wash: color-mix(in srgb, var(--d) 22%, transparent);
  }
  .dragon[data-dragon="fuzan"], .trophy[data-dragon="fuzan"] { --d-hi: #ffc46b; }
}

.dragon-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 18px; align-items: center; }
.crest { width: 84px; height: 84px; display: block; filter: drop-shadow(0 0 10px var(--d-mid)); }
.dragon-name { margin: 0; font: 700 clamp(24px, 3vw, 31px)/1.1 var(--font-display); letter-spacing: .07em; color: var(--d-hi); text-shadow: 0 2px 0 rgba(0, 0, 0, .7); }
.dragon-title { margin: 2px 0 0; font-size: 18px; font-style: italic; line-height: 1.25; color: var(--bone); }
.dragon-facts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 12px 0 0; padding: 10px 0 0; list-style: none; font-size: 16.5px; line-height: 1.35; color: var(--mist); border-top: 1px solid rgba(201, 161, 78, .2); }
.dragon-facts b { font-weight: 600; color: var(--bone); }
.dragon-facts .is-kills b { color: var(--d-hi); }
.dragon-sighting { display: flex; gap: 9px; margin: 10px 0 0; font-size: 16.5px; line-height: 1.35; color: var(--bone); }
.dragon-sighting .icon { margin-top: .1em; color: var(--d-hi); }
.dragon-sighting small { font-size: inherit; color: var(--mist); }

/* zes medaillons per boss: twee rijen van drie, en zes naast elkaar waar een blok de volle breedte heeft */
.badges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 8px; margin: 20px 0 0; padding: 0; list-style: none; }
@media (min-width: 761px) and (max-width: 980px) {
  .badges { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.badge { display: flex; flex-direction: column; align-items: center; min-width: 0; text-align: center; }
.badge-art { position: relative; width: min(100%, 190px); aspect-ratio: 1; }
.badge-art svg { position: relative; display: block; width: 100%; height: 100%; overflow: visible; }
.badge-aura {
  position: absolute;
  inset: 2%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--d) 0%, var(--d) 30%, transparent 68%);
  opacity: .5;
  animation: aura 5.2s ease-in-out infinite;
}
.badge:nth-child(2) .badge-aura { animation-delay: -1.7s; }
.badge:nth-child(3) .badge-aura { animation-delay: -3.4s; }
.badge:nth-child(4) .badge-aura { animation-delay: -4.4s; }
.badge:nth-child(5) .badge-aura { animation-delay: -.9s; }
.badge:nth-child(6) .badge-aura { animation-delay: -2.6s; }
.badge.is-locked { --d: #66787a; --d-hi: #9aaeaa; --d-mid: #3b4a48; --d-lo: #141d1c; }
.badge.is-locked .badge-art { opacity: .92; }
.badge.is-unlocked .bd-emblem { filter: drop-shadow(0 0 5px var(--d)); }
.badge-text { margin-top: 2px; min-width: 0; max-width: 100%; }
.badge-tier { margin: 0; font: 600 15.5px/1.25 var(--font-display); letter-spacing: .05em; color: var(--brass-200); }
.badge.is-locked .badge-tier { color: var(--mist); }
.badge-points { margin: 1px 0 0; font-size: 14.5px; line-height: 1.25; color: var(--brass-500); }
.badge.is-locked .badge-points { color: #7f958f; }
/* naast elkaar: korte en lange namen ("Solo", "Met z'n tweeën") op één lijn houden */
@media (min-width: 641px) {
  .badge-tier { display: flex; align-items: flex-end; justify-content: center; min-height: 2.5em; }
}
.badge-state { margin: 3px 0 0; font-size: 16px; line-height: 1.3; color: var(--bone); }
.badge.is-locked .badge-state { font-style: italic; color: #7f958f; }
.badge-players { margin: 5px 0 0; padding: 0; list-style: none; font-size: 15.5px; line-height: 1.3; color: var(--d-hi); overflow-wrap: anywhere; }
.badge-desc { margin: 2px 0 0; font-size: 15px; line-height: 1.3; color: #7f958f; }

.bd-tint { fill: var(--d-lo); }
.bd-gem { fill: var(--d-hi); stroke: #0a1112; stroke-width: 1; }
.em-main { fill: var(--d); }
.em-shade { fill: var(--d-mid); }
.em-hi { fill: var(--d-hi); opacity: .5; }
.em-glow, .em-crown { fill: var(--d-hi); }
.em-ink { fill: #071011; }
.em-crack { fill: none; stroke: #071011; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.em-line { fill: none; stroke: var(--d-lo); stroke-width: 1.1; opacity: .75; }
.em-rim { fill: none; stroke: var(--d-hi); stroke-width: 1.4; stroke-linejoin: round; opacity: .9; }
.em-head-solid { fill: var(--d); stroke: var(--d-lo); stroke-width: 1.1; stroke-linejoin: round; }
.em-neck-out path { fill: none; stroke: var(--d); stroke-width: 8.5; stroke-linecap: round; }
.em-neck-in path { fill: none; stroke: #0d0a15; stroke-width: 5.6; stroke-linecap: round; }
.em-body { fill: #0d0a15; stroke: var(--d); stroke-width: 1.5; }
.em-head path { fill: #0d0a15; stroke: var(--d); stroke-width: 1.6; stroke-linejoin: round; }
.em-crown { stroke: #0d0a15; stroke-width: .8; stroke-linejoin: round; }

/* ---------- Logboek ---------- */

.log { padding: 10px clamp(16px, 3vw, 30px) 14px; }
.log-list { margin: 0; padding: 0; list-style: none; }
.log-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 14px;
  padding: 11px 0 10px;
  border-bottom: 1px solid rgba(42, 31, 18, .22);
}
.log-row:last-child { border-bottom: 0; }
.log-icon { display: grid; place-items: center; width: 34px; height: 34px; color: var(--ink); border: 1.5px solid var(--ink-soft); border-radius: 50%; background: rgba(255, 250, 232, .4); }
.log-icon .icon { width: 19px; height: 19px; }
.log-row[data-kind="achievement"] .log-icon { color: #f7e2a2; background: #5a3d12; border-color: #2a1b0a; }
.log-row[data-kind="dragon_sighting"] .log-icon, .log-row[data-kind="kill"] .log-icon { color: #7c2413; border-color: #7c2413; }
.log-row[data-kind="join"] .log-icon { color: #1c5e46; border-color: #1c5e46; }
.log-row[data-kind="update"] .log-icon { color: #1c4441; border-color: #1c4441; }
.log-row[data-kind="slayer"] .log-icon { color: #f4c9a8; background: #5c1f17; border-color: #2a0f0b; }
.log-text { font-size: 18.5px; line-height: 1.35; overflow-wrap: anywhere; }
.log-row[data-kind="achievement"] .log-text { font-weight: 700; }
.log-time { font-size: 16px; font-style: italic; color: var(--ink-soft); text-align: right; white-space: nowrap; }
.log .reltime:focus-visible, .parchment :focus-visible { outline-color: var(--ink); }
.log-more { margin: 10px 0 4px; text-align: center; }
.log-more .btn { color: var(--ink); background: rgba(255, 250, 232, .35); border-color: var(--ink-soft); box-shadow: none; }
.log-more .btn:hover { color: var(--ink); border-color: var(--ink); background: rgba(255, 250, 232, .6); }
.log-empty { margin: 0; padding: 14px 0; font-style: italic; color: var(--ink-soft); }

/* ---------- Voet ---------- */

.footer { padding: 36px 0 56px; text-align: center; font-size: 15.5px; line-height: 1.45; color: #86a098; }
.footer .flourish { margin: 0 auto 22px; color: var(--brass-700); }
.footer p { max-width: 76ch; margin: 0 auto 6px; }
.footer-meta { margin-top: 12px !important; font-style: italic; color: #6f8a82; }
.noscript { margin: 0; padding: 24px; text-align: center; color: var(--ember-soft); }

/* ---------- Beweging ---------- */

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes breathe {
  0%, 100% { text-shadow: 0 0 14px rgba(99, 245, 201, .85), 0 0 3px rgba(99, 245, 201, .9); }
  50% { text-shadow: 0 0 7px rgba(99, 245, 201, .45), 0 0 2px rgba(99, 245, 201, .7); }
}
@keyframes aura { 0%, 100% { opacity: .34; transform: scale(.93); } 50% { opacity: .62; transform: scale(1.04); } }
@keyframes ping { 0% { transform: scale(.7); opacity: .9; } 80%, 100% { transform: scale(2.1); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .mk-player.is-online::after { display: none; }
}

/* ---------- Breed scherm (tv) en smal scherm ---------- */

@media (min-width: 1700px) {
  :root { --wrap: 1440px; }
  body { font-size: 19px; }
}

@media (max-width: 980px) {
  .map-layout { grid-template-columns: minmax(0, 1fr); }
  /* de lijsten staan onder de kaart en schuiven met de pagina mee: de kop van een lijst blijft onder de menubalk staan */
  .todo-side { --todo-top: calc(var(--bar-h) + var(--banner-h, 0px)); }
  .dragons { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  body { font-size: 17px; }
  .framed { --chamfer: 8px; }
  .map-frame { padding: 12px 10px; }
  .map-viewport { height: clamp(320px, 60vh, 520px); }
  .base-panel { position: relative; left: auto; bottom: auto; width: auto; max-height: none; margin-top: 12px; }
  .bp-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px 18px; }
  .bp-list.cp-list { grid-template-columns: minmax(0, 1fr); }
  .cp-list li { min-height: 36px; }
  .cp-item { min-height: 36px; }
  .base-panel.is-chest { width: auto; }
  .base-panel.is-chest .bp-close { width: 44px; height: 44px; top: 2px; right: 2px; }
  .chest-foot .layer-chip, .chest-btn, .chest-bar-clear, .side-chest { min-height: 40px; }
  .rc-store-map { width: 100%; }
  .sr-row.has-chests { grid-template-columns: 32px minmax(0, 1fr) auto; }
  .map-toolbar .btn { padding-inline: 10px; }
  .sr-kind.is-quest { display: inline-block; }
  .sr-row.is-quest { grid-template-columns: 32px minmax(0, 1fr) auto; }
  .sr-kind.is-monster { display: inline-block; }
  /* het kaartje van een monster: zwakheden onder hun kop, de drops onder elkaar, de kans onder de naam */
  .mc-weak-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .mc-drops { grid-template-columns: minmax(0, 1fr); }
  .mc-drop { grid-template-columns: 3.2em minmax(0, 1fr); }
  .mc-chance { grid-column: 2; justify-self: start; text-align: left; }
  .mc-actions .btn { flex: 1 1 auto; justify-content: center; }
  .todo-map, .todo-more, .todo-foot .layer-chip, .route-bar .layer-chip, .todo-onmap .layer-chip { min-height: 40px; }
  /* een telefoon zoomt in op een veld met kleinere letters dan 16px */
  .todo-field { height: 40px; font-size: 16px; }
  .todo-go { min-height: 40px; }
  .todo-drop { top: 2px; width: 40px; height: 40px; }
  .todo-row.is-done .todo-drop { top: 0; height: 38px; }
  .todo-row .todo-check { padding-right: 42px; }
  .route-done { min-height: 40px; }
  /* op een telefoon blijft de balk laag, zodat de kaart eronder in beeld past: hooguit drie regels van de stap
     (de hele tekst staat in de lijst en in het kaartje van de markering) en geen uitleg over de todo-lijst */
  .route-bar { margin-bottom: 10px; padding: 7px 8px 8px; }
  .route-line { flex-wrap: wrap; gap: 6px 8px; }
  .route-words { display: -webkit-box; flex: 1 1 100%; order: -1; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
  .route-hint { display: none; }
  .q-facts { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .q-facts dd { margin-bottom: 8px; }
  .q-step { grid-template-columns: 28px minmax(0, 1fr); gap: 10px; }
  .q-map { grid-column: 2; justify-self: start; }
  .q-actions .btn { flex: 1 1 auto; justify-content: center; }
  .layer-group { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .layer-name { padding-top: 0; }
  .layer-chip { min-height: 40px; }
  .search-input { height: 48px; font-size: 18px; }
  .search-clear { height: 48px; }
  .hero-search .search-input { height: 52px; padding-left: 44px; font-size: 18px; }
  .hero-search .search-glass { left: 13px; width: 22px; height: 22px; }
  .hero-search .search-clear { height: 52px; width: 48px; }
  .sr-kind { display: none; }
  .rt-item { width: 80px; }
  .rt-arrow { width: 38px; }
  .rt-variant { min-height: 30px; padding: 4px 9px 3px; font-size: 13.5px; }
  .use-chip { min-height: 38px; }
  .rc-head { gap: 12px; }
  .rc-about { padding-left: 11px; }
  .rc-about-text { font-size: 17px; }
  .rc-about-more { min-height: 44px; }
  /* op een telefoon twee vastgezette voorwerpen naast elkaar, de naam zo nodig over twee regels */
  .pin-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pin { max-width: none; min-height: 46px; }
  .pin-open { gap: 6px; padding-right: 5px; font-size: 14.5px; line-height: 1.12; }
  .pin-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; overflow-wrap: anywhere; }
  .pin-remove { width: 40px; }
  .rc-pin { width: 44px; min-height: 44px; padding: 0; }
  .rc-pin .pin-icon { width: 21px; height: 21px; }
  .rc-pin-text { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stats div:first-child { grid-column: 1 / -1; }
  .badges { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .badge { flex-direction: row; align-items: center; gap: 14px; padding: 8px 0; text-align: left; }
  .badge + .badge { border-top: 1px solid rgba(201, 161, 78, .16); }
  .badge-art { width: 104px; flex: none; }
  .badge-text { margin-top: 0; }
  .log-row { grid-template-columns: 34px minmax(0, 1fr); }
  .log-time { grid-column: 2; text-align: left; }
  .rc-ing { grid-template-columns: 32px minmax(0, 1fr); }
  .rc-ing .it-icon { width: 32px; height: 32px; }
  .rc-ing-chest { grid-column: 2; justify-self: start; }
  .rc-ing-chest:empty { display: none; }
  .codebar { padding: 12px; }
  .codebar-rule { display: none; }
  .codebar-row { justify-content: flex-start; }
  .codebar-unlock { flex-basis: 100%; }
}

/* ---------- Het slot op de pagina ---------- */

/* Zonder het serverwachtwoord werkt het zoekvak, met de code en het formulier in een balk eronder
   (js/lock.js). De spelers, het werkblad en de trophies zijn er dan niet, en op het kaartje staan
   geen knoppen naar de kaart of de todo-lijsten: die liggen achter het slot. */
.is-locked #spelers,
.is-locked #werkblad,
.is-locked .trophy-slot,
.is-locked .topbar-state,
.is-locked .needs-unlock { display: none; }
.is-locked .recipe-card :is(.rc-route, .rc-clear-map, .rc-todo, .raw-map, .rc-raw > .rc-acts, .rc-raw > .rc-note) { display: none; }

/* ---------- Verhuisd (moveout.html) ---------- */

.moved { padding: 18vh 16px 0; text-align: center; font-size: 18px; color: var(--bone); }
.moved a { color: var(--brass-300); }