/*
 * Het spel als één scherm: de stad als speelveld, een HUD erover en elke pagina in een venster.
 * Eigen UI-kit: gelakt hout met een gouden rand, knoppen met reliëf, gerenderde iconen; binnen het venster perkament.
 *
 * @author Ferhat Remory
 * @link   https://steirk.be
 */

:root {
  --lak-1: #2c2119;
  --lak-2: #17110c;
  --lak-diep: #0d0906;
  --goud-licht: #f7e3ad;
  --goud: #dcae5c;
  --goud-donker: #84581f;
  --rand-goud: linear-gradient(180deg, #f6dc9c 0%, #c99a48 45%, #7c5420 100%);
  --tekst: #f4e8cf;
  --tekst-zacht: rgb(244 232 207 / 0.7);
  --perkament-1: #f6edd8;
  --perkament-2: #ead9b6;
  --inkt: #2b1d12;
  --inkt-zacht: #6b5641;
  --lijn-perkament: #d8c39c;
  --groen: #8fe3a8;

  --r: 10px;
  --r-groot: 14px;
  --display: "Cormorant Garamond", Georgia, serif;
  --sans: "Inter", system-ui, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --gap: 14px;
  --safe-t: max(var(--gap), env(safe-area-inset-top));
  --safe-r: max(var(--gap), env(safe-area-inset-right));
  --safe-b: max(var(--gap), env(safe-area-inset-bottom));
  --safe-l: max(var(--gap), env(safe-area-inset-left));
  --dock-h: 84px;
  --top-h: 84px;
}

html:has(body.stad:not(.buiten)) { height: 100%; overflow: hidden; font-size: 14px; }
body.stad:not(.buiten) { position: fixed; inset: 0; min-height: 0; margin: 0; overflow: hidden; overscroll-behavior: none; padding: 0; background: #2a2a22; color: var(--tekst); font: 500 14px/1.4 var(--sans); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
:where(body.stad) button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
body.stad img { -webkit-user-drag: none; }
.stad .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.stad :focus-visible { outline: 2px solid var(--goud-licht); outline-offset: 3px; }
.stad a { color: inherit; }

/* ---------- Bouwstenen ---------- */

/* Paneel: gelakt hout, gouden afgeschuinde rand, binnenlicht. */
.paneel { position: relative; background: linear-gradient(180deg, var(--lak-1), var(--lak-2)); border-radius: var(--r-groot); box-shadow: 0 0 0 1px var(--lak-diep), inset 0 1px 0 rgb(255 225 160 / 0.12), inset 0 0 18px rgb(0 0 0 / 0.35), 0 12px 28px rgb(0 0 0 / 0.5); }
.paneel::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: var(--rand-goud); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.stad .kop { font: 700 19px/1.1 var(--display); color: var(--goud-licht); letter-spacing: 0.01em; text-shadow: 0 1px 0 #000, 0 0 12px rgb(240 190 90 / 0.25); }

/* Knoppen: reliëf, glans op de bovenste helft, omlijnde tekst; bij indrukken zakken ze in. */
.knop { --k1: #54422f; --k2: #2a2018; --kr: #0f0b08; --ks: #0a0705; --kt: var(--tekst); position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 18px; border-radius: var(--r); border: 2px solid var(--kr); background: linear-gradient(180deg, var(--k1), var(--k2)); color: var(--kt) !important; font: 800 14.5px/1 var(--sans); letter-spacing: 0.01em; text-decoration: none; text-shadow: 0 1px 0 var(--ks), 0 -1px 0 var(--ks), 1px 0 0 var(--ks), -1px 0 0 var(--ks), 0 2px 2px rgb(0 0 0 / 0.35); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.45), inset 0 -3px 0 rgb(0 0 0 / 0.2), 0 3px 0 var(--ks), 0 6px 12px rgb(0 0 0 / 0.32); transition: transform 90ms, box-shadow 90ms, filter 160ms; white-space: nowrap; max-width: 100%; }
.knop::after { content: ""; position: absolute; z-index: -1; left: 3px; right: 3px; top: 2px; height: 46%; border-radius: 7px 7px 12px 12px / 7px 7px 5px 5px; background: linear-gradient(180deg, rgb(255 255 255 / 0.42), rgb(255 255 255 / 0.06)); pointer-events: none; }
.knop:hover { filter: brightness(1.08) saturate(1.05); }
.knop:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3), inset 0 -2px 0 rgb(0 0 0 / 0.2), 0 1px 0 var(--ks), 0 2px 4px rgb(0 0 0 / 0.3); }
.knop:disabled, .knop[aria-disabled="true"] { --k1: #6d655c; --k2: #4a443e; --kr: #2a2622; --ks: #1d1a17; --kt: #d6cfc4; cursor: not-allowed; transform: none; filter: none; }
.knop-goud { --k1: #ffe9a8; --k2: #d79e36; --kr: #7e5419; --ks: #5d3b0c; --kt: #3a2306; text-shadow: 0 1px 0 rgb(255 245 215 / 0.65); }
.knop-groen { --k1: #85e292; --k2: #2b8a44; --kr: #17532a; --ks: #0f3d1d; --kt: #fff; }
/* Betalen met sultani: gelakt hout met een gouden rand en gouden letters, een gunst van het hof. */
.knop-blauw { --k1: #6a4a24; --k2: #2b1a0b; --kr: #c99a48; --ks: #1a0f05; --kt: #ffe7a8; box-shadow: inset 0 1px 0 rgb(255 225 160 / 0.35), inset 0 0 0 1px rgb(0 0 0 / 0.4), 0 3px 0 #5d3b0c, 0 6px 12px rgb(0 0 0 / 0.32); }
.knop-blauw .prijs { background: rgb(255 214 120 / 0.16); color: #ffe7a8; }
.knop-rood { --k1: #ff8b74; --k2: #b8291b; --kr: #6e140b; --ks: #4c0d07; --kt: #fff; }
.knop-klein { min-height: 34px; padding: 0 12px; font-size: 13px; }
.knop svg { width: 16px; height: 16px; flex-shrink: 0; filter: drop-shadow(0 1px 0 var(--ks)); }
.knop > img { width: 28px; height: 28px; margin-left: -8px; filter: drop-shadow(0 2px 2px rgb(0 0 0 / 0.35)); }
.knop .prijs { display: inline-flex; align-items: center; gap: 3px; margin-left: 4px; padding: 3px 7px 3px 4px; border-radius: 7px; background: rgb(0 0 0 / 0.22); font-size: 12px; text-shadow: none; }
.knop .prijs img { width: 18px; height: 18px; margin: 0; }

/* Balk in een omlijste goot met de waarde erin. */
.balk { position: relative; display: block; height: 14px; border-radius: 7px; background: var(--lak-diep); box-shadow: inset 0 1px 3px rgb(0 0 0 / 0.9), 0 0 0 1px rgb(205 160 80 / 0.55); overflow: hidden; }
.balk i { position: absolute; inset: 0 auto 0 0; border-radius: 7px; background: linear-gradient(180deg, #ffe7a0, #d9a23c); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.55); transition: width 600ms var(--ease); }
.balk.leven i { background: linear-gradient(180deg, #ff9b84, #c4372a); }
.balk.leven.goed i { background: linear-gradient(180deg, #9be8a8, #2f8b48); }
.balk span { position: absolute; inset: 0; display: grid; place-items: center; font: 800 10px/1 var(--sans); color: #fff; text-shadow: 0 1px 1px #000, 0 0 3px #000; letter-spacing: 0.02em; white-space: nowrap; }
/* Elke balk in de spelerskaart met zijn icoon op het begin van de balk: rang en leven. */
.balk-rij { position: relative; display: block; }
.balk-rij > img { position: absolute; left: -12px; top: 50%; z-index: 1; width: 30px; height: 30px; margin-top: -15px; filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.8)); pointer-events: none; }
.balk-rij { margin-left: 8px; }
.balk-rij .balk { height: 18px; border-radius: 9px; }
.balk-rij .balk i { border-radius: 9px; }
.balk-rij .balk span { font-size: 11px; }
.balk-rij .balk span { left: 16px; }

.tel { position: absolute; top: -6px; right: -6px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: linear-gradient(180deg, #ff6a57, #c62b1d); border: 2px solid #fff3dc; color: #fff; font: 800 11.5px/18px var(--sans); text-align: center; box-shadow: 0 2px 4px rgb(0 0 0 / 0.5); pointer-events: none; }
.tel.groen { background: linear-gradient(180deg, #5fcf7a, #23733a); color: #fff; }
.tel.goud { background: linear-gradient(180deg, #ffe39b, #d6a03d); color: #3a2306; }
.tel.stip { min-width: 12px; width: 12px; height: 12px; padding: 0; top: -2px; right: -2px; }

/* ---------- Speelveld ---------- */
.world { position: fixed; inset: 0; overflow: hidden; touch-action: none; cursor: grab; background: #6f6247; }
.world.is-slepen { cursor: grabbing; }
/* Rond de kaart loopt het landschap gespiegeld en vervaagd door, zodat slepen voorbij de rand (onder de HUD) geen lege strook toont. */
.kaart-rand { position: absolute; pointer-events: none; background: url('../img/stad/kaart-grond.webp') no-repeat; filter: blur(3px) brightness(0.72) saturate(0.8); }
.kaart-rand.boven { left: 0; right: 0; bottom: 100%; height: 45%; background-size: 100% 222.3%; background-position: 0 0; transform: scaleY(-1); -webkit-mask-image: linear-gradient(to bottom, #000 35%, transparent); mask-image: linear-gradient(to bottom, #000 35%, transparent); }
.kaart-rand.onder { left: 0; right: 0; top: 100%; height: 45%; background-size: 100% 222.3%; background-position: 0 100%; transform: scaleY(-1); -webkit-mask-image: linear-gradient(to top, #000 35%, transparent); mask-image: linear-gradient(to top, #000 35%, transparent); }
.kaart-rand.links { top: 0; bottom: 0; right: 100%; width: 30%; background-size: 333.4% 100%; background-position: 0 0; transform: scaleX(-1); -webkit-mask-image: linear-gradient(to right, #000 35%, transparent); mask-image: linear-gradient(to right, #000 35%, transparent); }
.kaart-rand.rechts { top: 0; bottom: 0; left: 100%; width: 30%; background-size: 333.4% 100%; background-position: 100% 0; transform: scaleX(-1); -webkit-mask-image: linear-gradient(to left, #000 35%, transparent); mask-image: linear-gradient(to left, #000 35%, transparent); }
.map { position: absolute; left: 0; top: 0; will-change: transform; background: url('../img/stad/kaart-grond.webp') 0 0 / 100% 100% no-repeat; }
.world::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 120% 90% at 50% 45%, transparent 55%, rgb(20 12 5 / 0.45)), linear-gradient(180deg, rgb(10 7 4 / 0.45), transparent calc(var(--top-h) + 30px), transparent calc(100% - var(--dock-h) - 70px), rgb(10 7 4 / 0.55)); }

.water, .water-golf { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; -webkit-mask: url('../img/stad/water-masker.webp') 0 0 / 100% 100% no-repeat; mask: url('../img/stad/water-masker.webp') 0 0 / 100% 100% no-repeat; }
.water { background: url('../img/stad/water-rimpel.webp') 0 0 / 512px 512px, url('../img/stad/water-rimpel.webp') 200px 120px / 380px 380px; mix-blend-mode: screen; }
.water-golf { background: url('../img/stad/water-golf.webp') 0 0 / 900px 900px; mix-blend-mode: soft-light; }
.wolk, .vogels { position: absolute; pointer-events: none; display: none; }
@media (prefers-reduced-motion: no-preference) {
  /* Glinsteringen drijven traag in twee richtingen en flakkeren; daaronder deinen zachte golven. Het water leeft, de stad blijft stil. */
  .water { opacity: 0.55; animation: glans 22s linear infinite, flakker 2.6s ease-in-out infinite alternate; }
  .water-golf { opacity: 0.5; animation: golf 18s linear infinite; }
  @keyframes glans { from { background-position: 0 0, 200px 120px; } to { background-position: 512px 0, -180px 120px; } }
  @keyframes flakker { from { opacity: 0.22; } to { opacity: 0.5; } }
  @keyframes golf { from { background-position: 0 0; } to { background-position: 900px 900px; } }
  .wolk { display: block; width: 70vmax; height: 40vmax; border-radius: 50%; background: radial-gradient(closest-side, rgb(25 18 8 / 0.22), transparent); filter: blur(10px); animation: drijf 110s linear infinite; }
  .wolk.w1 { top: -10%; left: -80vmax; }
  .wolk.w2 { top: 35%; left: -80vmax; animation-duration: 150s; animation-delay: -70s; }
  @keyframes drijf { to { transform: translateX(calc(100vw + 90vmax)); } }
  .vogels { display: block; top: 22%; left: -140px; width: 120px; animation: vlieg 26s linear infinite; animation-delay: 4s; }
  .vogels .v { animation: fladder 0.5s ease-in-out infinite alternate; transform-origin: center; transform-box: fill-box; }
  .vogels .v:nth-child(2) { animation-delay: 0.15s; } .vogels .v:nth-child(3) { animation-delay: 0.3s; } .vogels .v:nth-child(4) { animation-delay: 0.08s; }
  @keyframes vlieg { 0% { transform: translate(0, 0); } 60%, 100% { transform: translate(calc(100vw + 280px), -60px); } }
  @keyframes fladder { from { transform: scaleY(1); } to { transform: scaleY(0.35); } }
}

/* Gebouwen zitten in de grond; de losse uitsnede ligt er precies boven en gloeit bij aanwijzen. */
.gebouw { position: absolute; z-index: 2; display: block; touch-action: none; text-decoration: none; }
.gebouw > img { display: block; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity 200ms var(--ease), filter 200ms var(--ease); }
.gebouw.is-hover > img, .gebouw:focus-visible > img, .gebouw.is-gekozen > img { opacity: 1; filter: brightness(1.16) saturate(1.08); }
/* Borden en zegels liggen in een laag boven alle gebouwen. */
.borden { position: absolute; inset: 0; z-index: 400; pointer-events: none; }
.bord-plek { position: absolute; width: 0; }
.bord-plek .zegel { left: 0; top: var(--bord-y, 84%); transform: translate(-50%, calc(-100% - 8px)); }
@media (prefers-reduced-motion: no-preference) {
  .bord-plek .zegel.klaar { animation: wip-bord 2.8s var(--ease) infinite; }
  @keyframes wip-bord { 0%, 80%, 100% { transform: translate(-50%, calc(-100% - 8px)); } 88% { transform: translate(-50%, calc(-100% - 13px)); } }
}
.bord-plek .bord { left: 0; transition: box-shadow 180ms, transform 180ms var(--ease); }
.bord-plek.is-hover .bord, .bord-plek.is-gekozen .bord { box-shadow: 0 0 0 1px var(--lak-diep), 0 0 0 3px rgb(255 220 150 / 0.9), 0 0 18px rgb(255 200 90 / 0.7), 0 12px 28px rgb(0 0 0 / 0.5); transform: translateX(-50%) translateY(-2px); }
.gebouw:focus-visible { outline: none; }

/* Naambord: Turkse naam met de betekenis eronder, het icoon steekt eruit. */
.bord { position: absolute; left: 50%; top: var(--bord-y, 84%); transform: translateX(-50%); display: flex; flex-direction: column; justify-content: center; min-height: 32px; padding: 4px 12px 5px 36px; white-space: nowrap; border-radius: var(--r); pointer-events: none; }
.bord b { font: 700 16px/1 var(--display); color: var(--goud-licht); text-shadow: 0 1px 0 #000; }
.bord small { margin-top: 2px; font: 600 10.5px/1 var(--sans); color: var(--tekst-zacht); letter-spacing: 0.01em; }
.bord small:empty { display: none; }
.bord img { position: absolute; left: -10px; top: 50%; width: 40px; height: 40px; transform: translateY(-50%); filter: drop-shadow(0 2px 3px rgb(0 0 0 / 0.55)); }

/* Zegel met de status: groen als er iets klaarstaat, donker met een waarde of wachttijd. */
.zegel { width: max-content; white-space: nowrap; position: absolute; left: 50%; top: 4%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 3px; height: 30px; padding: 0 11px 0 4px; border-radius: 15px; background: linear-gradient(180deg, #3a2c20, #1a130d); border: 1.5px solid #e8c47a; color: var(--tekst); font: 800 12.5px/1 var(--sans); font-variant-numeric: tabular-nums; box-shadow: 0 3px 8px rgb(0 0 0 / 0.5), inset 0 1px 0 rgb(255 230 170 / 0.25); pointer-events: none; }
.zegel img { width: 28px; height: 28px; margin: -6px 0 -6px -4px; filter: drop-shadow(0 2px 2px rgb(0 0 0 / 0.5)); }
.zegel.klaar { background: linear-gradient(180deg, #5fc077, #23733a); border-color: #c9f2d3; color: #fff; text-shadow: 0 1px 0 rgb(0 0 0 / 0.3); }
.zegel.let-op { background: linear-gradient(180deg, #e06a55, #9c2318); border-color: #ffd7c9; color: #fff; }
@media (prefers-reduced-motion: no-preference) {
  .zegel.klaar { animation: wip 2.8s var(--ease) infinite; }
  @keyframes wip { 0%, 80%, 100% { transform: translate(-50%, -50%); } 88% { transform: translate(-50%, calc(-50% - 5px)); } }
}

/* Plekken zonder gebouw: een zachte ring bij aanwijzen. */
.plek { position: absolute; z-index: 2; transform: translate(-50%, -50%); touch-action: none; text-decoration: none; }
.plek .ring { display: block; width: var(--r-px, 120px); height: calc(var(--r-px, 120px) * 0.56); border-radius: 50%; border: 2px solid transparent; transition: border-color 200ms, background-color 200ms, box-shadow 200ms; }
.plek.is-hover .ring, .plek:focus-visible .ring, .plek.is-gekozen .ring { border-color: rgb(255 226 160 / 0.95); background: rgb(255 214 130 / 0.16); box-shadow: 0 0 18px rgb(255 200 100 / 0.5); }
.plek-bord .bord { top: auto; bottom: calc(var(--r-px, 120px) * 0.28 - 2px); }
.bord-plek.plek-bord .zegel { top: auto; bottom: calc(var(--r-px, 120px) * 0.28 + 38px); transform: translateX(-50%); }
.plek:focus-visible { outline: none; }

/* ---------- HUD ---------- */
.hud { position: fixed; z-index: 10; }
.top { top: var(--safe-t); left: var(--safe-l); right: var(--safe-r); display: flex; align-items: flex-start; gap: 12px; pointer-events: none; }
.top > * { pointer-events: auto; }

.speler { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.profiel { display: flex; align-items: center; gap: 14px; padding: 9px 16px 10px 9px; text-align: left; min-width: 0; text-decoration: none; }
.portret { position: relative; flex-shrink: 0; width: 70px; height: 70px; border-radius: 12px; padding: 2px; background: var(--rand-goud); box-shadow: 0 3px 8px rgb(0 0 0 / 0.5); }
.portret > img { display: block; width: 100%; height: 100%; border-radius: 10px; object-fit: cover; }
.portret { display: block; transition: transform 150ms var(--ease), box-shadow 150ms; }
a.portret:hover { transform: translateY(-1px); box-shadow: 0 0 0 2px rgb(255 220 150 / 0.6), 0 3px 8px rgb(0 0 0 / 0.5); }
.balken { display: grid; gap: 9px; margin-top: 2px; }
a.balk-rij { text-decoration: none; }
a.balk-rij:hover .balk { box-shadow: inset 0 1px 3px rgb(0 0 0 / 0.9), 0 0 0 1px rgb(255 220 150 / 0.9); }
.info { display: grid; gap: 5px; width: 210px; }
.regel { display: flex; align-items: center; gap: 8px; min-width: 0; }
.profiel .naam { min-width: 0; font: 700 23px/1 var(--display); color: var(--goud-licht); text-shadow: 0 1px 0 #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.profiel a.naam:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.bh { flex-shrink: 0; padding: 3px 6px; border-radius: 6px; background: linear-gradient(180deg, #6d5a45, #3d3125); border: 1px solid #9c8364; font: 800 10px/1 var(--sans); color: #e8dccb; letter-spacing: 0.04em; }
.bh.hoog { background: linear-gradient(180deg, #ffe39b, #c58d2c); border-color: #fff0c4; color: #3a2306; }
.regel.klein { gap: 5px; font-size: 12px; color: var(--tekst-zacht); white-space: nowrap; min-width: 0; }
.rang-uitleg { display: inline-grid; place-items: center; flex-shrink: 0; width: 22px; height: 22px; margin: -4px 0 -4px 2px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #4a3826, #1a130d); box-shadow: 0 0 0 1px #c99a48; transition: transform 120ms; }
.rang-uitleg img { width: 17px; height: 17px; }
.rang-uitleg:hover { transform: scale(1.1); }
.regel.klein b { color: var(--tekst); font-weight: 700; }
.regel.klein small { font-size: 11px; overflow: hidden; text-overflow: ellipsis; }
.aanzien { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; font: 800 13px/1 var(--sans); color: var(--goud-licht); font-variant-numeric: tabular-nums; }
.aanzien img { width: 20px; height: 20px; margin: -4px 0; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px 0 7px; border-radius: 13px; background: rgb(20 14 9 / 0.86); border: 1px solid rgb(220 174 92 / 0.55); color: var(--tekst); font: 700 11.5px/1 var(--sans); box-shadow: 0 2px 6px rgb(0 0 0 / 0.4); font-variant-numeric: tabular-nums; text-decoration: none; white-space: nowrap; }
.chip svg { width: 14px; height: 14px; color: var(--goud); }
.chip .stip { width: 8px; height: 8px; border-radius: 50%; background: #6fdc8c; box-shadow: 0 0 0 3px rgb(111 220 140 / 0.25); }
.chip.vast .stip { background: #ff7a63; box-shadow: 0 0 0 3px rgb(255 122 99 / 0.25); }
.chip.onderweg .stip { background: #f1c75a; box-shadow: 0 0 0 3px rgb(241 199 90 / 0.25); }

.goud-uur { margin: 0 auto; display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 16px 0 6px; text-decoration: none; }
.goud-uur img { width: 44px; height: 44px; margin: -6px 0; filter: drop-shadow(0 2px 3px rgb(0 0 0 / 0.5)); }
.goud-uur b { font: 700 18px/1 var(--display); color: var(--goud-licht); text-shadow: 0 1px 0 #000; }
.goud-uur .uitleg { font-size: 12.5px; color: var(--tekst-zacht); }
.goud-uur time { font: 800 14px/1 var(--sans); color: var(--goud); font-variant-numeric: tabular-nums; }

.beurs { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.munt { position: relative; display: flex; align-items: center; gap: 6px; height: 46px; padding: 0 10px 0 4px; text-decoration: none; }
.munt img:not(.knop img) { width: 52px; height: 52px; margin: -10px -4px -10px -12px; filter: drop-shadow(0 3px 3px rgb(0 0 0 / 0.55)); }
.munt small { display: block; font-size: 10.5px; line-height: 1; color: var(--tekst-zacht); }
.munt b { display: block; min-width: 46px; font: 800 17px/1.15 var(--sans); color: var(--tekst); font-variant-numeric: tabular-nums; text-shadow: 0 1px 0 #000; white-space: nowrap; }
.munt.sultani b { color: var(--goud-licht); }
.munt .knop { min-height: 30px; width: 30px; padding: 0; margin-left: 4px; }
.ronde { position: relative; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; text-decoration: none; }
.ronde img { width: 40px; height: 40px; filter: drop-shadow(0 2px 3px rgb(0 0 0 / 0.5)); transition: transform 160ms var(--ease); }
.ronde:hover img { transform: scale(1.08); }

/* Taken links: icoon, taak, tijd en een knop om te gaan. */
.taken { top: calc(var(--safe-t) + var(--top-h) + 12px); left: var(--safe-l); width: 312px; padding: 12px 12px 8px; }
.taken-kop { display: flex; align-items: center; gap: 8px; width: 100%; padding: 0 2px 8px; text-align: left; }
.taken-kop .kop { flex: 1; }
.taken-kop .aantal { display: none; }
.taken-kop svg { display: none; width: 16px; height: 16px; color: var(--goud); transition: transform 200ms; }
.taak { display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-top: 1px solid rgb(220 174 92 / 0.18); }
.taak > img { width: 38px; height: 38px; margin: -4px 0; filter: drop-shadow(0 2px 2px rgb(0 0 0 / 0.5)); }
.taak .wat { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.taak time { font: 700 12.5px/1 var(--sans); color: var(--tekst-zacht); font-variant-numeric: tabular-nums; }
.taak .knop { min-width: 52px; }
.taken .leeg { padding: 8px 4px 4px; color: var(--tekst-zacht); font-size: 12.5px; border-top: 1px solid rgb(220 174 92 / 0.18); }

.zij { top: calc(var(--safe-t) + var(--top-h) + 12px); right: var(--safe-r); display: flex; flex-direction: column; gap: 12px; }
.zij a { display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; }
.zij .naam { font: 700 11.5px/1 var(--sans); color: var(--tekst); text-shadow: 0 1px 2px #000, 0 0 6px #000; }

/* Gidsbalk: de Sultan als adviseur met één volgende stap. */
.gids { left: 50%; bottom: calc(var(--safe-b) + var(--dock-h) + 16px); transform: translateX(-50%); display: flex; align-items: center; gap: 12px; max-width: min(560px, calc(100vw - 2 * var(--gap))); padding: 8px 8px 8px 74px; transition: opacity 180ms; }
body.ctx-open .gids, body.venster-open .gids { opacity: 0; pointer-events: none; }
.adviseur { position: absolute; left: 6px; bottom: 4px; width: 62px; height: 62px; border-radius: 50%; padding: 2px; background: var(--rand-goud); box-shadow: 0 4px 10px rgb(0 0 0 / 0.55); }
.adviseur img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 20%; }
.raad { display: grid; gap: 2px; min-width: 0; }
.raad b { font: 700 15px/1 var(--display); color: var(--goud-licht); text-shadow: 0 1px 0 #000; }
.raad span { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.kist { right: var(--safe-r); bottom: calc(var(--safe-b) + 6px); display: flex; flex-direction: column; align-items: center; text-decoration: none; }
.kist img { width: 74px; height: 74px; filter: drop-shadow(0 4px 6px rgb(0 0 0 / 0.6)) drop-shadow(0 0 14px rgb(255 200 90 / 0.65)); }
.kist .naam { margin-top: -6px; padding: 3px 9px; border-radius: 9px; background: linear-gradient(180deg, #79d88a, #2f8b48); border: 1.5px solid #c9f2d3; color: #fff; font: 800 11px/1 var(--sans); text-shadow: 0 1px 0 #0f3d1d; box-shadow: 0 2px 5px rgb(0 0 0 / 0.5); }

/* Onderbalk: vijf ingangen; de middelste is een verhoogd medaillon. */
.menubalk { left: 50%; bottom: var(--safe-b); transform: translateX(-50%); display: flex; align-items: flex-end; gap: 2px; padding: 6px 10px 8px; }
.menubalk > a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 82px; padding: 4px 0 2px; border-radius: var(--r); color: var(--tekst); font: 700 12px/1 var(--sans); text-shadow: 0 1px 0 #000; text-decoration: none; transition: background-color 160ms; }
.menubalk > a:hover, .menubalk > a[aria-current="page"] { background: rgb(255 220 150 / 0.08); }
.menubalk > a > img { width: 50px; height: 50px; margin-top: -18px; filter: drop-shadow(0 3px 3px rgb(0 0 0 / 0.55)); transition: transform 180ms var(--ease); }
.menubalk > a:hover > img { transform: translateY(-3px) scale(1.06); }
.menubalk > a.hoofd { width: 98px; margin: 0 6px; }
.menubalk > a.hoofd .medaillon { display: grid; place-items: center; width: 78px; height: 78px; margin-top: -40px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #3c2c1f, #160f0a 70%); box-shadow: 0 0 0 3px #1a120c, 0 0 0 5px #e2b765, 0 0 0 6px #6b4512, 0 8px 18px rgb(0 0 0 / 0.6), 0 0 26px rgb(240 190 90 / 0.35); }
.menubalk > a.hoofd .medaillon img { width: 62px; height: 62px; margin: 0; }
.menubalk > a.hoofd .tel { top: -38px; right: 6px; }
.menubalk > a.hoofd span:last-of-type { color: var(--goud-licht); }
.menubalk .tel { top: -14px; right: 12px; }

/* ---------- Keuzemenu bij een gebouw ---------- */
.ctx { position: fixed; z-index: 20; right: var(--safe-r); top: calc(var(--safe-t) + var(--top-h) + 12px); width: 320px; max-height: calc(100dvh - var(--safe-t) - var(--top-h) - var(--dock-h) - var(--safe-b) - 36px); overflow-y: auto; padding: 14px; opacity: 0; visibility: hidden; transform: translateX(24px); pointer-events: none; transition: opacity 180ms var(--ease), transform 240ms var(--ease), visibility 0s 240ms; }
.ctx.open { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity 180ms var(--ease), transform 240ms var(--ease); }
.ctx .pijl { display: none !important; }
body.ctx-open .zij { opacity: 0; pointer-events: none; }
.zij { transition: opacity 180ms; }
.ctx .pijl { position: absolute; left: var(--pijl, 50%); bottom: -9px; width: 18px; height: 18px; margin-left: -9px; background: var(--lak-2); transform: rotate(45deg); border-right: 1.5px solid #b98a3e; border-bottom: 1.5px solid #b98a3e; }
.ctx.naast .pijl { display: none; }
.ctx.onder .pijl { bottom: auto; top: -9px; background: var(--lak-1); border: 0; border-left: 1.5px solid #f2d694; border-top: 1.5px solid #f2d694; }
.ctx .kop { font-size: 26px; }
.ctx .betekenis { margin-top: 1px; font: 600 12px/1.2 var(--sans); color: var(--goud); }
.ctx .betekenis:empty { display: none; }
.ctx p { margin: 3px 0 12px; color: var(--tekst-zacht); font-size: 12.5px; }
.ctx .acties { display: grid; gap: 9px; }
.ctx .acties .knop { justify-content: flex-start; width: 100%; min-width: 0; min-height: 44px; }
.ctx .acties .knop span { overflow: hidden; text-overflow: ellipsis; }
.ctx .acties .knop em { margin-left: auto; padding-left: 6px; font-style: normal; font-size: 11.5px; opacity: 0.9; font-variant-numeric: tabular-nums; }

/* ---------- Venster: gouden lijst, perkament binnenin ---------- */
.veil { position: fixed; inset: 0; z-index: 30; background: rgb(8 5 3 / 0.6); backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity 260ms var(--ease); }
body.venster-open .veil { opacity: 1; pointer-events: auto; }
.modal { position: fixed; z-index: 31; left: 50%; top: 50%; width: min(980px, calc(100vw - 48px)); height: min(820px, calc(100dvh - 40px)); display: flex; flex-direction: column; padding: 6px; opacity: 0; visibility: hidden; transform: translate(-50%, -46%) scale(0.98); transition: opacity 260ms var(--ease), transform 320ms var(--ease), visibility 0s 320ms; }
body.venster-open .modal { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); transition: opacity 260ms var(--ease), transform 320ms var(--ease); }
.greep { display: none; }
.hoeken { position: absolute; z-index: 5; inset: -2px; pointer-events: none; }
.hoeken i { position: absolute; width: 46px; height: 46px; background: url("../img/stad/hoek.svg") 0 0 / 100% 100% no-repeat; }
.hoeken i:nth-child(1) { left: 0; top: 0; }
.hoeken i:nth-child(2) { right: 0; top: 0; transform: scaleX(-1); }
.hoeken i:nth-child(3) { left: 0; bottom: 0; transform: scaleY(-1); }
.hoeken i:nth-child(4) { right: 0; bottom: 0; transform: scale(-1, -1); }

/* Kop: foto van de plek, links een medaillon met het icoon, daarnaast de titel; de betekenis als klein label. */
.m-head { position: relative; flex-shrink: 0; display: flex; align-items: flex-end; gap: 16px; height: 150px; padding: 0 76px 16px 22px; border-radius: 10px 10px 0 0; background: #2a2016 center / cover; overflow: hidden; }
.m-head::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(15 10 6 / 0.1) 0%, rgb(15 10 6 / 0.25) 40%, rgb(15 10 6 / 0.88) 100%); }
.m-embleem { position: relative; z-index: 1; flex-shrink: 0; display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #3c2c1f, #140e09 75%); box-shadow: 0 0 0 2px #1a120c, 0 0 0 4px #e2b765, 0 0 0 5px #6b4512, 0 6px 14px rgb(0 0 0 / 0.6); }
.m-embleem img { width: 60px; height: 60px; filter: drop-shadow(0 2px 2px rgb(0 0 0 / 0.5)); }
.m-titel { position: relative; z-index: 1; min-width: 0; padding-bottom: 2px; }
.m-titel small { display: block; margin-bottom: 4px; font: 700 11.5px/1.2 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--goud); white-space: normal; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.m-titel h2 { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 0; font: 700 38px/1 var(--display); color: var(--goud-licht); text-shadow: 0 2px 10px #000; }
.m-titel h2 span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-titel .betekenis { display: inline-block; padding: 3px 9px; border-radius: 8px; background: rgb(20 14 9 / 0.7); border: 1px solid rgb(220 174 92 / 0.5); font: 700 12px/1.2 var(--sans); letter-spacing: 0.02em; color: var(--tekst); text-shadow: none; white-space: nowrap; }
.m-titel .betekenis:empty { display: none; }
.sluit { position: absolute; z-index: 6; top: 12px; right: 12px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(180deg, #ff7a63, #b8291b); border: 2px solid #ffe9cf; color: #fff; box-shadow: 0 3px 0 #6e140b, 0 5px 10px rgb(0 0 0 / 0.5); }
.sluit:active { transform: translateY(2px); box-shadow: 0 1px 0 #6e140b; }
.sluit svg { width: 18px; height: 18px; }
/* De zandloper naast het kruisje: het verhaal na een handeling aan of uit; doorstreept als het uit staat, met een slot voor wie geen grote weldoener is. */
.verhaal-knop { position: absolute; z-index: 6; top: 12px; right: 62px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 2px solid #e8c47a; background: radial-gradient(circle at 50% 35%, #4a3826, #1a130d); box-shadow: 0 3px 0 #0a0705, 0 5px 10px rgb(0 0 0 / 0.5); cursor: pointer; }
.verhaal-knop img { width: 32px; height: 32px; filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.6)); transition: transform 300ms var(--ease); }
.verhaal-knop:hover img { transform: rotate(180deg); }
.verhaal-knop:active { transform: translateY(2px); box-shadow: 0 1px 0 #0a0705; }
.verhaal-knop:focus-visible { outline: 3px solid #ffe39b; outline-offset: 2px; }
.verhaal-knop.is-uit::after { content: ""; position: absolute; width: 38px; height: 3.5px; border-radius: 2px; background: #e14b3a; transform: rotate(-40deg); box-shadow: 0 0 0 1.5px #1a130d; }
.verhaal-knop.is-slot img { filter: grayscale(0.5) brightness(0.8); }
.verhaal-knop.is-slot::after { content: ""; position: absolute; right: -4px; bottom: -4px; width: 20px; height: 20px; border-radius: 50%; background: #1a130d url(../img/stad/ico-ketting.webp) center / 16px no-repeat; box-shadow: 0 0 0 1.5px #c99a48; }
.m-head:has(.verhaal-knop) { padding-right: 118px; }
.terug { position: absolute; z-index: 6; top: 12px; left: 12px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgb(20 14 9 / 0.75); border: 1.5px solid rgb(220 174 92 / 0.7); color: var(--goud-licht); }
.terug svg { width: 18px; height: 18px; }

/* Tabs als gewelfde nissen met een medaillon op de kruin. */
.m-tabs { display: flex; justify-content: center; align-items: flex-end; gap: 6px; padding: 12px 14px 0; border-top: 1.5px solid #c99a48; background: radial-gradient(ellipse 60% 90% at 50% 130%, rgb(220 174 92 / 0.22), transparent 70%), linear-gradient(180deg, #24190f, #1a120b); box-shadow: inset 0 -1.5px 0 #c99a48; flex-shrink: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.m-tabs:empty { display: none; }
.m-tabs a { position: relative; isolation: isolate; flex: 0 1 172px; min-width: 96px; display: grid; justify-items: center; gap: 6px; padding: 0 12px 11px; color: var(--tekst-zacht); font: 800 13px/1.1 var(--sans); white-space: nowrap; text-decoration: none; transition: color 160ms; }
.m-tabs a::before { content: ""; position: absolute; z-index: -1; inset: 20px 0 0; border-radius: 50% 50% 0 0 / 24px 24px 0 0; background: linear-gradient(180deg, #4b3927, #2a1e14 70%); border: 1.5px solid rgb(201 154 72 / 0.5); border-bottom: 0; box-shadow: inset 0 1px 0 rgb(255 225 160 / 0.14); }
.m-tabs .medaille { position: relative; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #5b4630, #20160e); box-shadow: 0 0 0 2px #7d5f33, 0 3px 6px rgb(0 0 0 / 0.5); transition: transform 220ms var(--ease); }
.m-tabs .medaille img { width: 34px; height: 34px; filter: grayscale(0.6) brightness(0.75); transition: filter 160ms; }
.m-tabs .teller { position: absolute; top: -3px; right: -9px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: linear-gradient(180deg, #ff6a52, #b8291b); border: 1.5px solid #ffe9cf; color: #fff; font: 800 11px/16px var(--sans); text-align: center; box-shadow: 0 2px 0 #6e140b; }
.m-tabs .naam { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.m-tabs a:hover { color: var(--goud-licht); }
.m-tabs a:hover .medaille img { filter: none; }
.m-tabs a:focus-visible { outline: none; }
.m-tabs a:focus-visible .medaille { box-shadow: 0 0 0 2px #7d5f33, 0 0 0 5px #fff; }
.m-tabs a[aria-current="page"] { z-index: 1; color: var(--inkt); }
.m-tabs a[aria-current="page"]::before { inset: 16px 0 -2px; background: linear-gradient(180deg, #fffaf0, var(--perkament-1) 60%); border: 2px solid var(--goud); border-bottom: 0; box-shadow: 0 -4px 16px rgb(240 190 90 / 0.35), inset 0 2px 0 #fff; }
.m-tabs a[aria-current="page"] .medaille { transform: translateY(-3px) scale(1.12); background: radial-gradient(circle at 50% 30%, #fff3cf, #e0b35e 58%, #8a5f22); box-shadow: 0 0 0 2px #fff0c4, 0 0 0 4px #b8862f, 0 4px 10px rgb(0 0 0 / 0.45), 0 0 20px rgb(255 205 110 / 0.55); }
.m-tabs a[aria-current="page"] .medaille img { filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.35)); }

.m-body { flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: 18px 22px 24px; border-radius: 0 0 10px 10px; background: linear-gradient(180deg, var(--perkament-1), var(--perkament-2)); color: var(--inkt); -webkit-overflow-scrolling: touch; }
.m-body:focus { outline: none; }

/* ---------- Perkament: de bestaande pagina's in de stijl van het venster ---------- */
.m-body {
  color-scheme: light;
  --color-page: #f6edd8;
  --color-card: #fffaf0;
  --color-card-hover: #f5ead2;
  --color-card-deep: #efe3c6;
  --color-line: #ddc8a0;
  --color-line-strong: #c9ad78;
  --color-accent: #8a5a1c;
  --color-accent-hover: #a36d24;
  --color-accent-soft: #edd9ae;
  --color-brass: #9c6d1f;
  --color-money: #23733a;
  --color-ink: #2b1d12;
  --color-muted: #6b5641;
  --color-faint: #8a7458;
  --color-success: #23733a;
  --color-danger: #b4291b;
  --color-warning: #a8661a;
  --color-news: #22609e;
  font-size: 14px;
  line-height: 1.45;
}
.m-body main { display: grid; gap: 14px; }
.m-body main > * { min-width: 0; }
.m-body a:not(.knop):not(.btn) { color: #7a4a12; }
.m-body a:not(.knop):not(.btn):hover { color: #a3600f; }
.m-body h1:not(.sr-only) { font: 700 26px/1.1 var(--display); color: var(--inkt); }
.m-body h2, .m-body h3 { color: var(--inkt); }
.m-body .card { border-radius: var(--r-groot); border: 0; background: linear-gradient(180deg, rgb(255 255 255 / 0.78), rgb(255 255 255 / 0.5)); box-shadow: 0 0 0 1px var(--lijn-perkament), 0 3px 0 rgb(120 85 35 / 0.16); }
.m-body .card-head { font: 700 20px/1.1 var(--display); color: var(--inkt); border-bottom-color: var(--lijn-perkament); }
.m-body .card-head::after { background: linear-gradient(90deg, #c99a48, transparent); width: 56px; height: 2px; }
.m-body .card-tab { display: inline-flex; align-items: center; gap: 8px; }
.m-body .table th { background: rgb(120 85 35 / 0.08); color: var(--inkt-zacht); }
.m-body .table tbody tr:hover { background: rgb(255 255 255 / 0.5); }
.m-body .field { background: #fffdf7; border-color: var(--lijn-perkament); color: var(--inkt); border-radius: var(--r); box-shadow: inset 0 1px 2px rgb(80 50 20 / 0.12); }
.m-body .field:focus { border-color: #b8862f; box-shadow: 0 0 0 3px rgb(201 154 72 / 0.3); }
.m-body .bar { background: #d9c59f; box-shadow: inset 0 1px 2px rgb(80 50 20 / 0.25); }
.stad .alert { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 10px; max-width: 100%; padding: 9px 12px 9px 9px; border: 0; border-radius: var(--r); font-weight: 600; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; background: linear-gradient(180deg, #fff9ec, #f3e6c9); color: var(--inkt); box-shadow: 0 0 0 1px var(--lijn-perkament), inset 4px 0 0 var(--alert-rand, #c99a48), 0 2px 0 rgb(120 85 35 / 0.14); }
.stad .alert > img { width: 34px; height: 34px; object-fit: contain; }
.stad .alert p, .stad .alert ul { margin: 0; min-width: 0; }
.stad .alert-error { --alert-rand: #9c2b1c; color: #5e1a10; }
.stad .alert-success { --alert-rand: #2f7a45; color: #1d4a2b; }
.m-body .glass { background: rgb(255 250 240 / 0.92); border-color: var(--lijn-perkament); color: var(--inkt); }
.m-body .text-white { color: var(--inkt); }
.m-body .bg-danger .text-white, .m-body .bg-danger.text-white, .m-body .bg-success.text-white, .m-body .bg-accent.text-white { color: #fff; }
.m-body img { max-width: 100%; }
.m-body table { max-width: 100%; }
.m-body .overflow-x-auto { overscroll-behavior-x: contain; }

/* Sultan of een andere stem met een zin bovenaan een venster. */
/* Een citaat als een stukje perkament van het hof: gouden aanhalingsteken, de woorden in de koppenletter. */
.m-say { position: relative; margin: 0; padding: 14px 18px 14px 58px; border-radius: var(--r-groot); background: radial-gradient(ellipse at 0% 0%, rgb(255 236 190 / 0.6), transparent 55%), linear-gradient(180deg, #fffaf0, #f4e6c6); box-shadow: 0 0 0 1px #d9bd83, inset 0 0 0 4px rgb(255 255 255 / 0.45), inset 0 0 0 5px rgb(201 154 72 / 0.25), 0 3px 0 rgb(120 85 35 / 0.14); color: var(--inkt); font: 600 18px/1.35 var(--display); letter-spacing: 0.005em; }
.m-say::before { content: "\201C"; position: absolute; left: 14px; top: 2px; font: 700 64px/1 var(--display); color: transparent; background: linear-gradient(180deg, #f2d27f, #b07c26); -webkit-background-clip: text; background-clip: text; text-shadow: none; pointer-events: none; }
.m-say b { display: block; margin-bottom: 2px; font: 800 11.5px/1.3 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: #8a5a1c; }
.m-say.met-portret { padding-left: 74px; padding-top: 12px; padding-bottom: 12px; min-height: 68px; display: block; border-left: 0; }
.m-say.met-portret::before { left: 54px; top: 0; font-size: 40px; }
.m-say.met-portret > img { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; }
.m-say.met-portret > span { display: block; padding-left: 16px; }
@media (max-width: 400px) { .m-say { font-size: 16.5px; padding-left: 48px; } .m-say::before { left: 10px; font-size: 54px; } }

/* Alles: elke plek als kaart met zijn handelingen. */
.plaatsen { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 12px; }
.plaats { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--r-groot); background: linear-gradient(180deg, rgb(255 255 255 / 0.78), rgb(255 255 255 / 0.5)); box-shadow: 0 0 0 1px var(--lijn-perkament), 0 3px 0 rgb(120 85 35 / 0.16); }
.plaats.is-klaar { box-shadow: 0 0 0 2px #5fb377, 0 3px 0 rgb(35 115 58 / 0.25); }
.plaats header { display: flex; align-items: center; gap: 10px; }
.plaats header > img { width: 48px; height: 48px; flex-shrink: 0; filter: drop-shadow(0 2px 2px rgb(0 0 0 / 0.25)); }
.plaats header div { flex: 1; min-width: 0; }
.plaats h2 { margin: 0; font: 700 22px/1 var(--display); }
.plaats header small { display: block; margin-top: 2px; color: var(--inkt-zacht); font-size: 12px; font-weight: 600; }
.plaats > p { margin: 0; color: var(--inkt-zacht); font-size: 12.5px; }
.plaats ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.plaats li a, .plaats li button { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 4px 10px 4px 4px; border-radius: var(--r); color: var(--inkt) !important; font-weight: 700; text-align: left; text-decoration: none; transition: background-color 140ms; }
.plaats li a:hover, .plaats li button:hover { background: rgb(120 85 35 / 0.1); }
.plaats li img { width: 32px; height: 32px; flex-shrink: 0; }
.plaats li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plaats li em { flex-shrink: 0; padding: 2px 8px; border-radius: 8px; background: rgb(43 29 18 / 0.08); font: 800 11.5px/1.4 var(--sans); font-style: normal; color: var(--inkt-zacht); font-variant-numeric: tabular-nums; }
.plaats li em.klaar { background: #2f8b48; color: #fff; }
.plaats li form { margin: 0; }

/* Knoppen van de pagina's krijgen het reliëf van de stad. */
.m-body .btn { position: relative; isolation: isolate; min-height: 40px; border-radius: var(--r); border: 2px solid #4a3a2a; font-weight: 800; text-decoration: none; transition: transform 90ms, box-shadow 90ms, filter 160ms; }
.m-body .btn::after { content: ""; position: absolute; z-index: -1; left: 3px; right: 3px; top: 2px; height: 46%; border-radius: 7px 7px 12px 12px / 7px 7px 5px 5px; background: linear-gradient(180deg, rgb(255 255 255 / 0.4), rgb(255 255 255 / 0.05)); pointer-events: none; }
.m-body .btn:hover { filter: brightness(1.06); }
.m-body .btn:active { transform: translateY(2px); }
.m-body .btn-primary { background: linear-gradient(180deg, #85e292, #2b8a44); border-color: #17532a; color: #fff; text-shadow: 0 1px 0 #0f3d1d, 0 -1px 0 #0f3d1d, 1px 0 0 #0f3d1d, -1px 0 0 #0f3d1d; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.45), inset 0 -3px 0 rgb(0 0 0 / 0.18), 0 3px 0 #0f3d1d, 0 6px 12px rgb(0 0 0 / 0.2); }
.m-body .btn-secondary { background: linear-gradient(180deg, #fff6df, #e7d1a2); border-color: #9c7a43; color: #3a2306; box-shadow: inset 0 1px 0 #fff, inset 0 -3px 0 rgb(120 85 35 / 0.15), 0 3px 0 #7a5a27, 0 6px 12px rgb(0 0 0 / 0.15); }
.m-body .btn-ghost { border-color: transparent; color: var(--inkt-zacht); }
.m-body .btn-ghost::after { display: none; }
.m-body .btn-ghost:hover { background: rgb(120 85 35 / 0.1); color: var(--inkt); }
.m-body .btn:disabled:not(.is-busy) { background: linear-gradient(180deg, #e7ddcb, #cfc2aa); border-color: #a99a80; color: #6f6250; text-shadow: none; box-shadow: 0 2px 0 #a99a80; opacity: 1; }

/* Het verhaal-paneel en de spanningslaag in de stijl van de stad. */
.stad .suspense { z-index: 60; background: rgb(10 7 4 / 0.82); color: var(--tekst); }
.stad .cc-modal { z-index: 70; }

/* ---------- Meldingen ---------- */
.stad [data-region="toasts"] { left: 50% !important; right: auto !important; top: var(--safe-t) !important; transform: translateX(-50%); width: min(30rem, calc(100vw - 24px)) !important; z-index: 80 !important; align-items: center; }
.stad .toast { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 14px 11px 10px; border: 0; border-radius: var(--r-groot); background: linear-gradient(180deg, var(--lak-1), var(--lak-2)); color: var(--tekst); box-shadow: 0 0 0 1px var(--lak-diep), inset 0 1px 0 rgb(255 225 160 / 0.12), 0 12px 28px rgb(0 0 0 / 0.5); }
.stad .toast::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: var(--rand-goud); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.stad .toast-error::before { background: linear-gradient(180deg, #ffb3a3, #b8291b); }
.stad .toast > .toast-ico { width: 38px; height: 38px; margin: -6px 0; flex-shrink: 0; filter: drop-shadow(0 2px 2px rgb(0 0 0 / 0.5)); }
.stad .toast p { color: var(--tekst); font-weight: 600; font-size: 13.5px; }
.stad .toast a { color: var(--goud-licht); }
.stad .toast [data-toast-close] { color: var(--tekst-zacht); }

/* ---------- Tablet ---------- */
@media (max-width: 1180px) {
  .goud-uur .uitleg, .goud-uur b { display: none; }
  .munt.sarraf { display: none; }
  .taken { width: 268px; }
}
@media (max-width: 960px) {
  .goud-uur { display: none; }
  .speler { flex-shrink: 0; }
}

/* ---------- Gsm (staand of liggend) en lage vensters ---------- */
@media (max-width: 760px), (max-height: 560px) {
  :root { --gap: 10px; --dock-h: 70px; }
  .goud-uur, .zij, .munt.sarraf, .beurs .instel { display: none; }
  .profiel { gap: 12px; padding: 6px 12px 7px 6px; }
  .portret { width: 52px; height: 52px; }
  .info { width: auto; flex: 1; min-width: 0; gap: 4px; }
  .profiel .naam { font-size: 18px; }
  .regel.klein { font-size: 11px; }
  .chips { gap: 5px; }
  .chip { height: 24px; font-size: 11px; }
  .balk { height: 11px; }
  .balk-rij { margin-left: 6px; }
  .balk-rij .balk { height: 14px; }
  .balk-rij .balk span { font-size: 9.5px; }
  .balken { gap: 7px; }
  .balk-rij > img { left: -10px; width: 24px; height: 24px; margin-top: -12px; }
  .balk-rij .balk span { left: 12px; }
  .balk span { font-size: 8.5px; }
  .munt { height: 40px; }
  .munt img:not(.knop img) { width: 44px; height: 44px; margin: -8px -4px -8px -10px; }
  .munt small { display: none; }
  .munt b { min-width: 0; font-size: 15px; }
  .ronde { width: 44px; height: 44px; }
  .ronde img { width: 34px; height: 34px; }
  .taken { width: auto; padding: 6px 10px; }
  .taken-kop { padding: 2px 0; }
  .taken-kop .kop { font-size: 16px; }
  .taken-kop .aantal { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px; background: linear-gradient(180deg, #79d88a, #2f8b48); color: #fff; font: 800 12px/1 var(--sans); }
  .taken-kop svg { display: block; }
  .taken .lijst { display: none; padding-top: 6px; }
  .taken.open .lijst { display: block; }
  .taken.open .taken-kop svg { transform: rotate(180deg); }
  .bord { min-height: 28px; padding: 3px 10px 4px 30px; }
  .bord b { font-size: 14px; }
  .bord small { font-size: 9.5px; }
  .bord img { width: 34px; height: 34px; left: -8px; }
  .zegel { height: 26px; font-size: 11.5px; }
  .zegel img { width: 24px; height: 24px; }
  .menubalk { left: var(--safe-l); right: var(--safe-r); transform: none; justify-content: space-between; padding: 4px 6px 6px; }
  .menubalk > a { width: auto; flex: 1; min-width: 0; font-size: 11px; }
  .menubalk > a > img { width: 42px; height: 42px; margin-top: -14px; }
  .menubalk > a.hoofd { flex: 0 0 82px; margin: 0 2px; }
  .menubalk > a.hoofd .medaillon { width: 66px; height: 66px; margin-top: -32px; }
  .menubalk > a.hoofd .medaillon img { width: 52px; height: 52px; }
  .menubalk > a.hoofd .tel { top: -30px; right: 2px; }
  .gids { bottom: calc(var(--safe-b) + var(--dock-h) + 30px); gap: 8px; padding: 6px 6px 6px 58px; }
  .adviseur { width: 50px; height: 50px; left: 4px; }
  .raad b { font-size: 13px; }
  .raad span { font-size: 12px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; }
  .gids .knop { min-height: 34px; padding: 0 12px; }
  .kist { top: calc(var(--safe-t) + var(--top-h) + 10px); bottom: auto; }
  .kist img { width: 54px; height: 54px; }
  .kist .naam { font-size: 10px; }
  /* Boven het verhoogde medaillon van de onderbalk blijven. */
  .ctx { left: var(--safe-l); right: var(--safe-r); top: auto; bottom: calc(var(--safe-b) + var(--dock-h) + 38px); width: auto; max-height: 52dvh; transform: translateY(16px); }
  .ctx .pijl { display: none; }
  .ctx .acties { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ctx .acties .knop:first-child { grid-column: 1 / -1; }
  .modal { left: 0; right: 0; top: auto; bottom: 0; width: 100%; height: calc(100dvh - env(safe-area-inset-top) - 10px); max-height: none; padding: 5px 5px 0; border-radius: 18px 18px 0 0; transform: translateY(102%); }
  body.venster-open .modal { transform: translateY(0); }
  .modal.is-slepen { transition: none; }
  .greep { display: block; position: absolute; z-index: 4; left: 0; right: 0; top: 0; height: 30px; touch-action: none; }
  .greep::before { content: ""; position: absolute; left: 50%; top: 11px; width: 46px; height: 5px; margin-left: -23px; border-radius: 3px; background: rgb(255 235 200 / 0.8); }
  .m-head { height: 112px; gap: 12px; padding: 0 64px 12px 14px; border-radius: 14px 14px 0 0; }
  .m-head:has(.verhaal-knop) { padding-right: 112px; }
  .m-embleem { width: 56px; height: 56px; }
  .m-embleem img { width: 46px; height: 46px; }
  .m-titel h2 { font-size: 28px; }
  .m-titel small { font-size: 10.5px; }
  .m-tabs { gap: 4px; padding: 13px 8px 0; justify-content: flex-start; }
  .m-tabs a { flex: 1 1 0; min-width: 84px; max-width: 190px; padding: 0 6px 9px; font-size: 12px; gap: 5px; }
  .m-tabs a::before { top: 17px; }
  .m-tabs a[aria-current="page"]::before { top: 13px; }
  .m-tabs .medaille { width: 36px; height: 36px; }
  .m-tabs .medaille img { width: 29px; height: 29px; }
  .m-body { padding: 14px 12px calc(20px + env(safe-area-inset-bottom)); border-radius: 0; }
}
@media (max-width: 480px) {
  .top { flex-wrap: wrap; gap: 8px; }
  .speler { flex: 1 1 100%; }
  .beurs { flex: 1 1 100%; margin-left: 0; }
  .beurs .munt { flex: 1; justify-content: center; }
}
@media (max-width: 400px) {
  .raad b { display: none; }
  .ctx .acties { grid-template-columns: minmax(0, 1fr); gap: 7px; }
  .ctx .acties .knop { min-height: 42px; }
  .m-titel h2 { font-size: 25px; }
}
@media (max-height: 560px) and (orientation: landscape) {
  .modal { height: 100dvh; padding: 4px; border-radius: 0; }
  .m-head { height: 64px; padding-bottom: 8px; }
  .m-embleem { width: 44px; height: 44px; }
  .m-embleem img { width: 36px; height: 36px; }
  .m-titel h2 { font-size: 23px; }
  .m-titel small, .greep { display: none; }
  .m-tabs { padding-top: 10px; }
  .m-tabs .medaille { width: 30px; height: 30px; }
  .m-tabs .medaille img { width: 24px; height: 24px; }
  .menubalk { left: 50%; right: auto; transform: translateX(-50%); width: min(540px, calc(100vw - 2 * var(--gap))); }
  .ctx { left: auto; right: var(--safe-r); top: var(--safe-t); bottom: calc(var(--safe-b) + var(--dock-h) + 8px); width: min(340px, 44vw); max-height: none; transform: translateX(24px); }
  .ctx .acties { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Chat: een rond knopje met de laatste stem, het paneel als gelakte plank ---------- */
.stad .dock .dock-bar, .stad .dock .dock-ticker { display: none !important; }
.stad .dock .dock-fab { position: fixed; z-index: 12; left: var(--safe-l); right: auto; bottom: var(--safe-b); display: grid !important; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(180deg, var(--lak-1), var(--lak-2)); color: var(--goud-licht); box-shadow: 0 0 0 1.5px #c99a48, 0 0 0 3px var(--lak-diep), 0 8px 18px rgb(0 0 0 / 0.5); }
.stad .dock .dock-fab svg { width: 24px; height: 24px; }
.stad .dock .dock-fab .dock-badge { position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; border: 2px solid #fff3dc; background: linear-gradient(180deg, #ff6a57, #c62b1d); font-size: 11px; }
.stad .dock .dock-panel { position: fixed; z-index: 45; left: var(--safe-l); right: auto; top: auto; bottom: calc(var(--safe-b) + 66px); width: min(380px, calc(100vw - 2 * var(--gap))); height: min(520px, calc(100dvh - var(--top-h) - 140px)); border: 0; border-radius: var(--r-groot); background: linear-gradient(180deg, var(--lak-1), var(--lak-2)); color: var(--tekst); box-shadow: 0 0 0 1.5px #c99a48, 0 0 0 3px var(--lak-diep), 0 16px 36px rgb(0 0 0 / 0.6); }
.stad .dock .dock-head { background: transparent; border-bottom: 1px solid rgb(220 174 92 / 0.3); color: var(--goud-licht); font: 700 18px/1 var(--display); }
.stad .dock .dock-head .dock-online, .stad .dock .dock-icon { color: var(--tekst-zacht); font-family: var(--sans); }
.stad .dock .dock-tabs { border-bottom-color: rgb(220 174 92 / 0.3); }
.stad .dock .dock-tabs button { color: var(--tekst-zacht); }
.stad .dock .dock-tabs button[aria-selected="true"] { color: var(--goud-licht); box-shadow: inset 0 -2px var(--goud); }
.stad .dock .dock-msg.is-mine { background: rgb(220 174 92 / 0.08); }
.stad .dock .dock-text { color: var(--tekst); }
.stad .dock .dock-meta time { color: var(--tekst-zacht); }
.stad .dock .dock-form { background: rgb(0 0 0 / 0.25); border-top-color: rgb(220 174 92 / 0.3); }
.stad .dock .dock-form textarea { background: #fffaf0; color: var(--inkt); border-color: #c99a48; border-radius: var(--r); }
.stad .dock .dock-send { border-radius: var(--r); background: linear-gradient(180deg, #85e292, #2b8a44); box-shadow: 0 2px 0 #0f3d1d; }
.stad .dock .dock-older, .stad .dock .dock-tools button { background: transparent; color: var(--tekst-zacht); border-color: rgb(220 174 92 / 0.4); }
@media (max-width: 760px), (max-height: 560px) {
  .stad .dock .dock-fab { width: 48px; height: 48px; left: auto; right: var(--safe-r); bottom: calc(var(--safe-b) + var(--dock-h) + 12px); }
  .stad .dock .dock-panel { inset: auto var(--safe-r) calc(var(--safe-b) + var(--dock-h) + 70px) var(--safe-l); width: auto; height: min(460px, calc(100dvh - var(--top-h) - 170px)); }
  body.venster-open .dock .dock-fab, body.ctx-open .dock .dock-fab { display: none !important; }
}
@media (min-width: 761px) and (min-height: 561px) {
  body.venster-open .dock .dock-fab { opacity: 0; pointer-events: none; }
}

/* ---------- Rondleiding: de Sultan wijst de weg ---------- */
.stad .tour-shade { z-index: 84; background: rgb(8 5 3 / 0.62); }
.stad .tour-ring { z-index: 85; border: 2.5px solid var(--goud-licht); border-radius: 16px; box-shadow: 0 0 0 4px rgb(220 174 92 / 0.3), 0 0 30px rgb(255 200 90 / 0.55); }
.stad .tour { z-index: 86; width: min(380px, calc(100vw - 24px)); border: 0; border-radius: var(--r-groot); background: linear-gradient(180deg, var(--lak-1), var(--lak-2)); color: var(--tekst); box-shadow: 0 0 0 1.5px #c99a48, 0 0 0 3px var(--lak-diep), 0 20px 50px rgb(0 0 0 / 0.6); }
.stad .tour-inner { gap: 14px; padding: 14px 14px 14px 12px; }
.stad .tour-don { display: block; width: 64px; height: 64px; flex-shrink: 0; margin: 0; padding: 2px; border-radius: 50%; background: var(--rand-goud); box-shadow: 0 4px 10px rgb(0 0 0 / 0.5); align-self: flex-start; }
.stad .tour-don img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 20%; }
.stad .tour-label { font: 700 16px/1.1 var(--display); letter-spacing: 0; text-transform: none; color: var(--goud-licht); }
.stad .tour-label .text-faint { font: 700 11px/1 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--tekst-zacht); }
.stad .tour-text { margin-top: 6px; font-size: 14.5px; line-height: 1.45; color: var(--tekst); }
.stad .tour-progress i { height: 4px; background: rgb(220 174 92 / 0.25); }
.stad .tour-progress i.on { background: linear-gradient(90deg, #ffe7a0, #d9a23c); }
.stad .tour-actions { gap: 8px; margin-top: 12px; }
.stad .tour-actions form { margin: 0; }
.stad .tour-skip { padding: 8px 4px; color: var(--tekst-zacht); font-size: 12.5px; font-weight: 600; }
@media (max-width: 400px) {
  .stad .tour-don { width: 48px; height: 48px; }
  .stad .tour-text { font-size: 13.5px; }
}

/* ======================================================================
   UI-kit voor de inhoud van een venster (zie docs/UI-KIT.md).
   Perkament met rijen, meters en knoppen met reliëf; geen lijniconen.
   ====================================================================== */

/* Een stem met portret bovenaan een venster. */
.m-say.met-portret > img { flex-shrink: 0; border-radius: 50%; object-fit: cover; object-position: 50% 20%; padding: 2px; background: var(--rand-goud); }

/* Sectie: een kop met een gouden streep en rechts een kleine meter of waarde. */
.sectie { display: grid; gap: 10px; }
.sectie-kop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 0; }
.sectie-kop h2 { display: flex; align-items: center; gap: 8px; margin: 0; font: 700 23px/1.1 var(--display); color: var(--inkt); }
.sectie-kop h2 img { width: 34px; height: 34px; margin: -4px 0; }
.sectie-kop::after { content: ""; flex: 1 1 40px; order: 1; height: 2px; min-width: 40px; background: linear-gradient(90deg, #c99a48, transparent); }
.sectie-kop .meta { order: 2; display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--inkt-zacht); }
.sectie-kop .meta b { color: var(--inkt); }
.sectie-kop .meta .pbar { width: 90px; margin: 0; }

/* Rijen: beeld, tekst, kans, buit en een knop; op gsm schuift de knop onder de rij. */
.rijen { display: grid; gap: 10px; }
.rij { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto auto auto; align-items: center; gap: 14px; padding: 10px 14px 10px 10px; border-radius: var(--r-groot); background: linear-gradient(180deg, rgb(255 255 255 / 0.78), rgb(255 255 255 / 0.48)); box-shadow: 0 0 0 1px var(--lijn-perkament), 0 3px 0 rgb(120 85 35 / 0.16); }
.rij-beeld { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; background: radial-gradient(circle at 50% 40%, #fff7e6, #e6d2aa); box-shadow: inset 0 0 0 1px var(--lijn-perkament), 0 2px 4px rgb(80 50 20 / 0.2); }
img.rij-beeld.icoon { padding: 4px; object-fit: contain; }
.rij-tekst { min-width: 0; }
.rij-tekst b { display: block; font-weight: 800; font-size: 15px; line-height: 1.25; color: var(--inkt); }
.rij-tekst small { display: block; margin-top: 2px; color: var(--inkt-zacht); font-weight: 500; font-size: 12.5px; line-height: 1.35; }
.rij-tekst .labels { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.rij .knop { min-width: 96px; }
.rij.dicht { filter: grayscale(0.6); opacity: 0.72; }
.rij.gekozen { box-shadow: 0 0 0 2px #c99a48, 0 3px 0 rgb(120 85 35 / 0.2); }
.rij > form { margin: 0; }

/* Kans als ronde meter: groen boven de helft, goud ertussen, rood eronder. */
.kans { --p: 50; --kleur: #2f8b48; position: relative; display: grid; place-items: center; width: 54px; height: 54px; flex-shrink: 0; border-radius: 50%; background: conic-gradient(var(--kleur) calc(var(--p) * 1%), #e2d2b0 0); }
.kans.middel { --kleur: #c8901f; }
.kans.laag { --kleur: #c0392b; }
.kans::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: #fbf4e4; }
.kans b { position: relative; font: 800 13px/1 var(--sans); color: var(--inkt); font-variant-numeric: tabular-nums; }
.kans small { position: absolute; bottom: -15px; font-size: 10px; color: var(--inkt-zacht); white-space: nowrap; }

/* Buit of prijs: object en bedrag. */
.buit { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px 5px 4px; border-radius: 10px; background: rgb(120 85 35 / 0.1); font: 800 13px/1 var(--sans); color: var(--inkt); white-space: nowrap; font-variant-numeric: tabular-nums; }
.buit img { width: 26px; height: 26px; }
.buit { vertical-align: middle; }
.buit + .buit { margin-left: 6px; }
/* Tekst met beloningen erachter: alles op één middellijn, met lucht tussen de badges. */
.buit-rij { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.buit-rij .buit + .buit { margin-left: 0; }
.buit.goed { background: rgb(35 115 58 / 0.12); color: #18542a; }
.buit.slecht { background: rgb(180 41 27 / 0.1); color: #8e2216; }

/* Label: klein, rond, in een kleur. */
.label-s { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 8px; background: rgb(43 29 18 / 0.08); font: 800 11px/1.5 var(--sans); color: var(--inkt-zacht); max-width: 100%; overflow-wrap: anywhere; }
.label-s.goud { background: linear-gradient(180deg, #ffe39b, #d6a03d); color: #3a2306; }
.label-s.groen { background: rgb(35 115 58 / 0.14); color: #18542a; }
.label-s.rood { background: rgb(180 41 27 / 0.12); color: #8e2216; }

/* Wachten: een grote tijd, wat je straks kan, en eventueel overslaan voor sultani. */
.wacht { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 16px; border-radius: var(--r-groot); background: linear-gradient(180deg, #fff6df, #f1e2bd); box-shadow: 0 0 0 1px #d9bd83, 0 3px 0 rgb(120 85 35 / 0.16); }
.wacht > img { width: 54px; height: 54px; flex-shrink: 0; }
.wacht > div { flex: 1 1 180px; min-width: 0; }
.wacht time, .wacht .tijd { display: block; font: 800 28px/1 var(--sans); color: #8a5a1c; font-variant-numeric: tabular-nums; }
.wacht p { margin: 4px 0 0; color: var(--inkt-zacht); font-size: 13px; }
.wacht form { margin: 0; }

/* Op slot: waarom, en vanaf wanneer. */
.slot { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--r-groot); background: rgb(43 29 18 / 0.06); box-shadow: inset 0 0 0 1px var(--lijn-perkament); }
.slot > img { width: 48px; height: 48px; flex-shrink: 0; filter: grayscale(0.7); opacity: 0.8; }
.slot b { display: block; font: 700 19px/1.1 var(--display); color: var(--inkt); }
.slot p { margin: 2px 0 0; color: var(--inkt-zacht); font-size: 13px; }

/* Uitslag van een poging: zegel, beeld, titel, buit. */
.uitslag { position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px; border-radius: var(--r-groot); background: linear-gradient(180deg, #fffaf0, #f3e5c4); box-shadow: 0 0 0 2px var(--rand, #c99a48), 0 6px 18px rgb(80 50 20 / 0.18); overflow: hidden; }
.uitslag.gelukt { --rand: #3a9a55; }
.uitslag.ontsnapt { --rand: #c8901f; }
.uitslag.gepakt { --rand: #c0392b; }
.uitslag > img { width: 112px; height: 112px; border-radius: 12px; object-fit: cover; box-shadow: 0 3px 8px rgb(0 0 0 / 0.25); }
.uitslag.gepakt > img { filter: grayscale(0.85) contrast(1.05); }
.uitslag .zegel-s { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font: 800 12px/1.2 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: #fff; background: var(--rand, #c99a48); box-shadow: 0 2px 0 rgb(0 0 0 / 0.25); transform: rotate(-3deg); }
.uitslag h2 { margin: 8px 0 4px; font: 700 24px/1.1 var(--display); color: var(--inkt); }
.uitslag p { margin: 0; color: var(--inkt-zacht); font-size: 13.5px; }
.uitslag .bedrag { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0; font: 800 28px/1 var(--sans); color: #18542a; font-variant-numeric: tabular-nums; }
.uitslag .bedrag img { width: 38px; height: 38px; }
.uitslag .labels { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0; }
@media (prefers-reduced-motion: no-preference) {
  .uitslag { animation: uitslag-in 420ms var(--ease) both; }
  .uitslag .zegel-s { animation: stempel 520ms 120ms var(--ease) both; }
  @keyframes uitslag-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } }
  @keyframes stempel { 0% { opacity: 0; transform: scale(1.8) rotate(-12deg); } 60% { opacity: 1; transform: scale(0.94) rotate(-3deg); } 100% { transform: scale(1) rotate(-3deg); } }
}

/* Voetstrook onderaan een venster of sectie. */
.m-voet { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; padding: 10px 14px; border-radius: var(--r-groot); background: rgb(43 29 18 / 0.07); box-shadow: inset 0 0 0 1px var(--lijn-perkament); font-size: 12.5px; color: var(--inkt-zacht); }
.m-voet b { color: var(--inkt); }
.m-voet img { width: 26px; height: 26px; margin: -4px 0; }
.m-voet .pbar { flex: 1; min-width: 100px; max-width: 220px; margin: 0; }
.m-voet form { margin: 0 0 0 auto; }
.m-actie { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.m-actie .knop { min-width: 200px; min-height: 50px; font-size: 16px; }

/* Voortgang. */
.pbar { position: relative; height: 9px; border-radius: 5px; background: #d9c59f; box-shadow: inset 0 1px 2px rgb(80 50 20 / 0.3); overflow: hidden; }
.pbar > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(180deg, #e8b85a, #b07c26); }
.pbar.groen > span { background: linear-gradient(180deg, #7fd38f, #2f8b48); }
.pbar.rood > span { background: linear-gradient(180deg, #ff8b74, #b8291b); }

/* Tegels met een getal, en vakken met sleutel en waarde. */
.tegels { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 10px; }
.tegel { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--r-groot); background: rgb(255 255 255 / 0.55); box-shadow: 0 0 0 1px var(--lijn-perkament); min-width: 0; }
.tegel > img { width: 40px; height: 40px; flex-shrink: 0; }
.tegel small { display: block; color: var(--inkt-zacht); font-size: 12px; }
.tegel b { display: block; font: 700 23px/1.15 var(--display); color: var(--inkt); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tegel .pbar { margin-top: 6px; }
.vakken { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.vak { padding: 14px 16px; border-radius: var(--r-groot); background: linear-gradient(180deg, rgb(255 255 255 / 0.72), rgb(255 255 255 / 0.45)); box-shadow: 0 0 0 1px var(--lijn-perkament), 0 3px 0 rgb(120 85 35 / 0.14); min-width: 0; }
.vak > h3, .vak > h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font: 700 21px/1.1 var(--display); color: var(--inkt); }
.vak > h3 img, .vak > h2 img { width: 30px; height: 30px; margin: -4px 0; }
.vak p { margin: 0 0 8px; color: var(--inkt-zacht); }
.sw { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px 12px; margin: 0; font-size: 13.5px; }
.sw dt { color: var(--inkt-zacht); min-width: 0; }
.sw dd { margin: 0; font-weight: 700; text-align: right; color: var(--inkt); font-variant-numeric: tabular-nums; }

/* Formulieren: velden in perkament, knoppen met reliëf. */
.veld { display: grid; gap: 5px; min-width: 0; }
.veld > span, .veld > label { font-size: 12.5px; font-weight: 700; color: var(--inkt-zacht); }
.veld input:not([type="checkbox"]):not([type="radio"]), .veld select, .veld textarea, .invoer { width: 100%; min-height: 44px; padding: 9px 12px; border-radius: var(--r); border: 1.5px solid #cdb27e; background: #fffdf7; color: var(--inkt); font: 600 15px/1.3 var(--sans); box-shadow: inset 0 1px 2px rgb(80 50 20 / 0.12); }
.veld input:focus, .veld select:focus, .veld textarea:focus, .invoer:focus { outline: none; border-color: #b8862f; box-shadow: 0 0 0 3px rgb(201 154 72 / 0.3); }
.knoprij { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.knoprij .knop { flex: 0 1 auto; }
.keuzes { display: flex; flex-wrap: wrap; gap: 6px; }
.keuze { position: relative; }
.keuze input { position: absolute; opacity: 0; pointer-events: none; }
.keuze span { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 12px; border-radius: var(--r); background: rgb(255 255 255 / 0.6); box-shadow: 0 0 0 1.5px var(--lijn-perkament); font-weight: 700; color: var(--inkt); cursor: pointer; }
.keuze span img { width: 26px; height: 26px; }
.keuze input:checked + span { background: linear-gradient(180deg, #fff3cf, #f2d68c); box-shadow: 0 0 0 2px #c99a48, 0 2px 0 #9c7a43; }
.keuze input:focus-visible + span { outline: 2px solid #8a5a1c; outline-offset: 2px; }

/* Tabel op perkament; op gsm worden de rijen kaartjes (zie .tabel-stapel). */
.tabel { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; border-radius: var(--r-groot); overflow: hidden; box-shadow: 0 0 0 1px var(--lijn-perkament); background: rgb(255 255 255 / 0.5); }
.tabel th { padding: 9px 12px; text-align: left; font: 800 11px/1.2 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--inkt-zacht); background: rgb(120 85 35 / 0.1); }
.tabel td { padding: 9px 12px; border-top: 1px solid rgb(216 195 156 / 0.6); color: var(--inkt); vertical-align: middle; }
.tabel tr.ik td { background: rgb(255 230 160 / 0.35); }
.tabel .getal { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Leeg: een rustig vak met een beeld en een zin. */
.leeg-vak { display: grid; justify-items: center; gap: 6px; padding: 26px 16px; text-align: center; border-radius: var(--r-groot); background: rgb(255 255 255 / 0.4); box-shadow: inset 0 0 0 1px var(--lijn-perkament); color: var(--inkt-zacht); }
.leeg-vak img { width: 64px; height: 64px; opacity: 0.85; }
.leeg-vak b { font: 700 20px/1.1 var(--display); color: var(--inkt); }

/* Beloningen per dag. */
.dagen { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.dag { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px 12px; border-radius: var(--r-groot); background: rgb(255 255 255 / 0.55); box-shadow: 0 0 0 1px var(--lijn-perkament); text-align: center; min-width: 0; }
.dag img { width: 52px; height: 52px; }
.dag small { font: 800 11px/1 var(--sans); color: var(--inkt-zacht); text-transform: uppercase; letter-spacing: 0.06em; }
.dag b { font-size: 12.5px; line-height: 1.15; }
.dag.gehaald { opacity: 0.55; }
.dag.vandaag { background: linear-gradient(180deg, #fff3cf, #f2d68c); box-shadow: 0 0 0 2px #c99a48, 0 0 18px rgb(220 170 70 / 0.55); }

/* Kaartjes in een raster, bv. paarden in de stal of spellen in de kumarhane. */
.kaartjes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 12px; }
.kaartje { position: relative; display: flex; flex-direction: column; border-radius: var(--r-groot); overflow: hidden; background: linear-gradient(180deg, rgb(255 255 255 / 0.8), rgb(255 255 255 / 0.5)); box-shadow: 0 0 0 1px var(--lijn-perkament), 0 3px 0 rgb(120 85 35 / 0.16); color: var(--inkt); text-decoration: none; min-width: 0; }
a.kaartje:hover { box-shadow: 0 0 0 2px #c99a48, 0 3px 0 rgb(120 85 35 / 0.2); }
.kaartje > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #e6d2aa; }
.kaartje > img.icoon { object-fit: contain; padding: 14px; background: radial-gradient(circle at 50% 40%, #fff7e6, #e6d2aa); }
.kaartje .inhoud { display: grid; gap: 4px; padding: 10px 12px 12px; }
.kaartje .inhoud b { font-weight: 800; font-size: 14.5px; }
.kaartje .inhoud small { color: var(--inkt-zacht); font-size: 12px; }
.kaartje .knop { margin-top: 6px; }

@media (max-width: 760px), (max-height: 560px) {
  .rij { grid-template-columns: 52px minmax(0, 1fr) auto; gap: 10px 12px; }
  .rij-beeld { width: 52px; height: 52px; }
  .rij .buit { grid-column: 2; justify-self: start; }
  .rij .kans { grid-row: 1 / 3; grid-column: 3; }
  .rij > .knop, .rij > form { grid-column: 1 / -1; width: 100%; }
  .rij > form .knop { width: 100%; }
  .uitslag { grid-template-columns: 76px minmax(0, 1fr); gap: 12px; }
  .uitslag > img { width: 76px; height: 76px; }
  .uitslag h2 { font-size: 20px; }
  .uitslag .bedrag { font-size: 23px; }
  .dagen { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sectie-kop h2 { font-size: 21px; }
}
@media (max-height: 560px) and (orientation: landscape) {
  .rij { grid-template-columns: 52px minmax(0, 1fr) auto auto auto; }
  .rij .buit, .rij .kans { grid-column: auto; grid-row: auto; }
  .rij > .knop, .rij > form { grid-column: auto; width: auto; }
  .dagen { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}

/* ---------- Verhaal: het spanningsmoment na een handeling ---------- */
.stad .suspense { z-index: 88; background: radial-gradient(ellipse at 50% 55%, rgb(40 24 10 / 0.55), rgb(6 4 2 / 0.88) 70%); backdrop-filter: blur(4px); }
.stad .suspense::before { background: radial-gradient(circle at 18% 22%, rgb(255 170 70 / 0.22), transparent 40%), radial-gradient(circle at 82% 78%, rgb(255 150 60 / 0.18), transparent 40%); animation: fakkel 1.6s ease-in-out infinite alternate; }
@keyframes fakkel { from { opacity: 0.55; } to { opacity: 1; } }
.verhaal { position: relative; display: grid; justify-items: center; gap: 14px; width: min(420px, calc(100vw - 32px)); padding: 26px 24px 22px; text-align: center; border-radius: var(--r-groot); background: linear-gradient(180deg, var(--lak-1), var(--lak-2)); box-shadow: 0 0 0 1.5px #c99a48, 0 0 0 3px var(--lak-diep), 0 24px 60px rgb(0 0 0 / 0.7); }
.verhaal-zandloper { width: 64px; height: 64px; filter: drop-shadow(0 4px 6px rgb(0 0 0 / 0.6)); }
.verhaal p { min-height: 2.4em; margin: 0; font: 700 26px/1.2 var(--display); color: var(--goud-licht); text-shadow: 0 2px 8px #000; }
.verhaal-balk { position: relative; display: block; width: 100%; height: 10px; border-radius: 5px; background: var(--lak-diep); box-shadow: inset 0 1px 3px #000, 0 0 0 1px rgb(205 160 80 / 0.55); overflow: hidden; }
.verhaal-balk i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: linear-gradient(180deg, #ffe7a0, #d9a23c); animation: suspense-fill var(--suspense-ms, 2200ms) linear both; }
@media (prefers-reduced-motion: no-preference) {
  .verhaal-zandloper { animation: zandloper 2.2s var(--ease) infinite; }
  @keyframes zandloper { 0%, 40% { transform: rotate(0); } 50%, 90% { transform: rotate(180deg); } 100% { transform: rotate(180deg); } }
}
.verhaal .persona-strip, .verhaal .m-say { text-align: left; }
.verhaal-voet { display: grid; justify-items: center; gap: 10px; width: 100%; }
.verhaal-voet .knop { width: 100%; }
.verhaal-altijd { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--tekst-zacht); cursor: pointer; }
.verhaal-altijd input { width: 18px; height: 18px; margin: 0; accent-color: #c99a48; }
.verhaal-slot { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 42px; padding: 0 14px; border-radius: var(--r); background: rgb(255 255 255 / 0.05); box-shadow: inset 0 0 0 1px rgb(220 174 92 / 0.35); color: var(--tekst-zacht); font-size: 13px; font-weight: 700; }
.verhaal-slot img { width: 28px; height: 28px; }

/* ---------- Vensters van het hof: bevestigen, naam kiezen, account vastleggen ---------- */
.stad .cc-modal { z-index: 95; background: radial-gradient(ellipse at 50% 50%, rgb(30 18 8 / 0.55), rgb(6 4 2 / 0.82) 70%); }
.stad .cc-modal-card { width: min(420px, 100%); padding: 20px; border: 0; border-radius: var(--r-groot); background: linear-gradient(180deg, var(--lak-1), var(--lak-2)); color: var(--tekst); box-shadow: 0 0 0 1.5px #c99a48, 0 0 0 3px var(--lak-diep), 0 24px 60px rgb(0 0 0 / 0.7); }
.stad .cc-modal-label { font: 700 18px/1.1 var(--display); letter-spacing: 0; text-transform: none; color: var(--goud-licht); }
.stad .cc-modal-text { font-size: 15px; color: var(--tekst); }
.stad .cc-modal-vinkje { display: flex; align-items: center; gap: 8px; margin: 2px 0 4px; font-size: 13.5px; font-weight: 600; color: var(--tekst-zacht); cursor: pointer; }
.stad .cc-modal-vinkje input { width: 18px; height: 18px; margin: 0; accent-color: #c99a48; }
.stad .cc-modal-card .text-muted, .stad .cc-modal-card .text-faint { color: var(--tekst-zacht); }
.stad .cc-modal-card a:not(.knop):not(.btn) { color: var(--goud-licht); text-decoration: underline; }
.stad .cc-modal .btn { position: relative; isolation: isolate; min-height: 42px; padding: 0 16px; border-radius: var(--r); border: 2px solid #0f0b08; font-weight: 800; color: var(--tekst); background: linear-gradient(180deg, #54422f, #2a2018); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.35), 0 3px 0 #0a0705; }
.stad .cc-modal .btn-primary { border-color: #17532a; color: #fff; background: linear-gradient(180deg, #85e292, #2b8a44); text-shadow: 0 1px 0 #0f3d1d; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.45), 0 3px 0 #0f3d1d; }
.stad .cc-modal .choice { background: rgb(0 0 0 / 0.2); border-color: rgb(220 174 92 / 0.4); color: var(--tekst); }
.stad .guest-wrap { display: grid; justify-items: center; width: min(420px, 100%); }
.stad .guest-don { position: relative; z-index: 1; display: block; width: 92px; height: 92px; margin-bottom: -46px; padding: 3px; border-radius: 50%; background: var(--rand-goud); box-shadow: 0 8px 20px rgb(0 0 0 / 0.6); }
.stad .guest-don img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 20%; }
.stad .guest-card { padding-top: 54px; text-align: center; }
.stad .guest-card form { text-align: left; }
.stad .invoer { width: 100%; min-height: 46px; padding: 10px 12px; border-radius: var(--r); border: 1.5px solid #c99a48; background: #fffaf0; color: var(--inkt); font: 700 16px/1.3 var(--sans); }
.stad .invoer:focus { outline: none; box-shadow: 0 0 0 3px rgb(220 174 92 / 0.45); }
.stad .guest-dobbel { position: absolute; top: 0; right: 0; bottom: 0; display: grid; place-items: center; width: 46px; }
.stad .guest-dobbel img { width: 34px; height: 34px; }
.stad .guest-card .knop { margin-top: 4px; }

/* De tabs staan in de kop van het venster: de eerste kaart onder een tabblad krijgt zijn ronde hoek terug. */
.m-body .dossier-body > .card:first-child,
.m-body .dossier-body > .bank-card:first-child,
.m-body .dossier-body > :first-child > .card:first-child,
.m-body .dossier-body > :first-child > :first-child > .card:first-child { border-top-left-radius: var(--r-groot); }
.m-body .tabbed, .m-body .dossier-body { display: grid; gap: 14px; }
.m-body .font-logo { font-family: var(--display); font-weight: 700; letter-spacing: 0.01em; text-transform: none; font-size: 1.35em; }
.m-body .card-head .card-tab { font: 700 20px/1.1 var(--display); letter-spacing: 0; text-transform: none; }
.bord-plek.plek-bord .zegel.klaar { animation: none; }

/* Gerenderde iconen die de oude icon()-helper nu geeft: iets groter dan een lijnicoon, mooi op de lijn. */
img.icon-beeld { display: inline-block; object-fit: contain; vertical-align: -0.28em; transform: scale(1.35); filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.25)); }
body:has(.tour) .gids { display: none; }

/* ======================================================================
   Buiten het spel: de stad op de achtergrond, één venster ervoor.
   ====================================================================== */
body.stad.buiten { min-height: 100dvh; margin: 0; color: var(--tekst); font: 500 14px/1.45 var(--sans); background: #2a2116; -webkit-font-smoothing: antialiased; }
body.stad.buiten::before { content: ""; position: fixed; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(12 8 4 / 0.55), rgb(12 8 4 / 0.8)), var(--grond) 42% 40% / cover no-repeat; filter: saturate(0.9); }
.buiten-wrap { width: min(1000px, 100%); margin: 0 auto; padding: 28px 16px 24px; }
.buiten-venster { padding: 6px; }
.buiten-kop { height: 190px; }
.buiten-sultan { width: 96px; height: 96px; padding: 3px; background: var(--rand-goud); }
.buiten-sultan img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 20%; }
.buiten-logo { margin: 0; font: inherit; }
.buiten-logo a { text-decoration: none; }
.m-tabs a[aria-current="page"] + a, .buiten .m-tabs { }
.buiten-raster { display: grid; grid-template-columns: minmax(0, 1fr) 270px; border-radius: 0 0 10px 10px; overflow: hidden; }
.buiten-inhoud { overflow: visible; min-height: 420px; padding: 26px 28px 30px; border-radius: 0; }
.buiten-inhoud > * + * { margin-top: 14px; }
.buiten-stand { padding: 22px 18px; background: linear-gradient(180deg, var(--lak-1), var(--lak-2)); border-left: 1.5px solid rgb(201 154 72 / 0.6); }
.buiten-stand .kop { margin: 0 0 14px; font-size: 22px; }
.buiten-stand dl { display: grid; gap: 12px; margin: 0; font-size: 13px; }
.buiten-stand dl > div { display: flex; align-items: center; gap: 8px; min-width: 0; }
.buiten-stand dl > div.los { flex-direction: column; align-items: flex-start; gap: 4px; }
.buiten-stand dt { display: flex; align-items: center; gap: 7px; color: var(--tekst-zacht); white-space: nowrap; }
.buiten-stand dt img { width: 28px; height: 28px; margin: -4px 0; }
.buiten-stand dd { margin: 0 0 0 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tekst); text-align: right; }
.buiten-stand .los dd { margin: 0 0 0 35px; white-space: normal; text-align: left; font-weight: 600; }
.buiten-stand dd b { color: var(--goud-licht); font-variant-numeric: tabular-nums; }
.buiten-stand dd b.groen { color: #8fe3a8; }
.buiten-stand small { color: var(--tekst-zacht); }
.buiten-stand a { color: var(--goud-licht); }
.buiten-voet { margin-top: 18px; color: var(--tekst-zacht); text-shadow: 0 1px 2px #000; }
.buiten-voet a { color: var(--tekst); }
.buiten-voet .text-brass, .buiten-voet a.text-brass { color: var(--goud); }

/* Het logo: de naam in de koppenletter, goud, met een halve maan als ster op de i. */
.cc-logo { display: inline-flex; align-items: baseline; gap: 0; font: 700 1em/1 var(--display); letter-spacing: 0.02em; color: var(--goud-licht); text-shadow: 0 2px 10px rgb(0 0 0 / 0.7); }
.stad .cc-logo-c, .stad .cc-logo-text { font: inherit; letter-spacing: inherit; text-transform: none; margin: 0; background: linear-gradient(180deg, #fff1c6, #e3b25a 55%, #b07c26); -webkit-background-clip: text; background-clip: text; color: transparent; padding: 0.06em 0.02em 0.12em; }
.stad .cc-logo-c { font-size: 1.15em; }
.buiten-logo .cc-logo { font-size: 52px; }

@media (max-width: 760px) {
  .buiten-wrap { padding: 10px 8px 18px; }
  .buiten-kop { height: 132px; }
  .buiten-sultan { width: 68px; height: 68px; }
  .buiten-logo .cc-logo { font-size: 38px; }
  .buiten-raster { grid-template-columns: minmax(0, 1fr); }
  .buiten-inhoud { min-height: 0; padding: 18px 14px 22px; }
  .buiten-stand { border-left: 0; border-top: 1.5px solid rgb(201 154 72 / 0.6); }
}

/* Kaal: verbannen of geschrapt, het spel is dicht; de stad blijft vaag zichtbaar. */
body.stad.kaal::before { filter: grayscale(0.55) blur(2px); }
.kaal-wrap { display: grid; place-items: center; min-height: 100dvh; padding: 24px 14px; }
.kaal-inhoud { width: min(460px, 100%); min-height: 0; padding: 0; overflow: visible; background: none; text-align: center; }
.kaal-inhoud > * + * { margin-top: 12px; }

/* Doel van een link (#anker): een zachte gouden gloed rond het blok, geen harde rand die het blok afsnijdt. */
.m-body .is-flash, .m-body .mission-row:target { position: relative; z-index: 1; animation: anker-gloed 2.4s var(--ease) both; border-radius: var(--r-groot); }
@keyframes anker-gloed {
  0% { box-shadow: 0 0 0 0 rgb(220 174 92 / 0), 0 0 0 0 rgb(255 205 110 / 0); background-color: transparent; }
  18% { box-shadow: 0 0 0 3px rgb(220 174 92 / 0.9), 0 0 26px 6px rgb(255 205 110 / 0.45); background-color: rgb(255 240 200 / 0.35); }
  100% { box-shadow: 0 0 0 3px rgb(220 174 92 / 0), 0 0 26px 6px rgb(255 205 110 / 0); background-color: transparent; }
}
@media (prefers-reduced-motion: reduce) { .m-body .is-flash, .m-body .mission-row:target { animation: none; box-shadow: 0 0 0 2px #c99a48; } }

/* Knoppen: altijd ademruimte aan beide kanten, en een icoon in een knop blijft binnen de knop. */
.m-body .btn, .stad .knop { padding-left: max(16px, 1.1em); padding-right: max(16px, 1.1em); }
.stad .knop.knop-klein { padding-left: 12px; padding-right: 12px; }
/* In een tabel krimpt een knop niet mee met de cel; de laatste kolom neemt de breedte van haar knop. */
.stad .table .knop { width: auto; min-width: max-content; max-width: none; }
.stad .table .knop > img:first-child { margin-left: -2px; }
.stad .table td:last-child:has(.knop) { width: 1%; }
.stad .knop img.icon-beeld, .m-body .btn img.icon-beeld { width: 24px; height: 24px; margin: -4px 0 -4px -4px; transform: none; vertical-align: middle; }
.stad .knop > img:first-child { margin-left: -4px; }
/* Knoppen met alleen een teken, zonder tekst. */
.stad .munt .knop, .stad .knop.alleen-teken { padding-left: 0; padding-right: 0; }

/* Kaartrasters met een vast aantal kolommen, zodat rijen vol zijn: k2 (2, 4, 8 items), k3 (3, 6, 9), k4 (4, 8). */
.kaartjes.k2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kaartjes.k3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kaartjes.k4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .kaartjes.k4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) and (min-height: 561px) { .kaartjes.k3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) and (min-height: 561px) { .kaartjes.k2, .kaartjes.k3, .kaartjes.k4 { grid-template-columns: minmax(0, 1fr); } }

/* Voorwaarden: per regel een teken (vinkje of slot), wat er nodig is, de stand rechts en een dun balkje eronder. */
.eisen { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.eis { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 4px 8px; font-size: 13px; color: var(--inkt); min-width: 0; }
.eis-teken { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #e6d6b4; color: #8a7458; font: 900 12px/1 var(--sans); box-shadow: inset 0 0 0 1px #cdb27e; }
.eis.voldaan .eis-teken { background: linear-gradient(180deg, #7fd38f, #2f8b48); color: #fff; box-shadow: 0 1px 0 #17532a; }
.eis-naam { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.eis-stand { white-space: nowrap; font: 800 12.5px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--inkt-zacht); }
.eis.voldaan .eis-stand { color: #23733a; }
.eis .pbar { grid-column: 2 / -1; height: 6px; }
.eis.voldaan .pbar > span { background: linear-gradient(180deg, #7fd38f, #2f8b48); }
.eis.voldaan .eis-naam { color: var(--inkt-zacht); }
/* k6 voor 6 of 12 items: 6 kolommen, dan 4, 3 en 2, zodat rijen vol blijven. */
.kaartjes.k6, .k6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1250px) { .kaartjes.k6, .k6 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px) { .kaartjes.k6, .k6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .kaartjes.k6, .k6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* In één rij knoppen zijn alle knoppen even hoog en even groot van letter, ook als er een kleine tussen zit. */
.knoprij { align-items: stretch; }
.knoprij > .knop, .knoprij > form > .knop, .knoprij > a.knop { min-height: 46px; font-size: 14.5px; }
.knoprij > form { display: flex; margin: 0; }
.knoprij .knop > img:first-child { width: 30px; height: 30px; margin: -6px 2px -6px -6px; }
/* Voorwaarden op een donker paneel (gelakt hout of steen): lichte tekst, tekens met een gouden rand. */
.op-donker .eis, .paneel:not(.modal) .eis { color: var(--tekst); }
.op-donker .eis-naam, .paneel:not(.modal) .eis-naam { color: var(--tekst); }
.op-donker .eis.voldaan .eis-naam, .paneel:not(.modal) .eis.voldaan .eis-naam { color: var(--tekst-zacht); }
.op-donker .eis-stand, .paneel:not(.modal) .eis-stand { color: var(--goud-licht); }
.op-donker .eis-teken, .paneel:not(.modal) .eis-teken { background: rgb(255 255 255 / 0.08); color: var(--goud-licht); box-shadow: inset 0 0 0 1.5px rgb(220 174 92 / 0.6); }
.op-donker .eis .pbar, .paneel:not(.modal) .eis .pbar { background: var(--lak-diep); box-shadow: inset 0 1px 2px #000, 0 0 0 1px rgb(205 160 80 / 0.45); }
.op-donker .rangbalk .namen span, .paneel:not(.modal) .rangbalk .namen span { color: var(--tekst-zacht); }
.op-donker .rangbalk .namen .is-nu, .paneel:not(.modal) .rangbalk .namen .is-nu { color: var(--tekst); }
.op-donker .rangbalk .doelnaam, .paneel:not(.modal) .rangbalk .doelnaam, .op-donker .rang-eis .eis-stand, .paneel:not(.modal) .rang-eis .eis-stand { color: var(--goud-licht); }
.op-donker .rang-eis .eis-naam small, .paneel:not(.modal) .rang-eis .eis-naam small { color: var(--tekst-zacht); }

/* Beeldcontrole: tik het gouden wapen aan. */
.wapenkeuze { display: grid; gap: 10px; padding: 12px; border-radius: var(--r-groot); background: linear-gradient(180deg, #fff6df, #f1e2bd); box-shadow: 0 0 0 1px #d9bd83, 0 3px 0 rgb(120 85 35 / 0.16); color: var(--inkt); }
.wapenkeuze[hidden] { display: none; }
.wapenkeuze-kop { display: flex; align-items: center; gap: 10px; }
.wapenkeuze-kop > img { width: 36px; height: 36px; flex-shrink: 0; }
.wapenkeuze-kop > span { flex: 1; min-width: 0; }
.wapenkeuze-kop b { display: block; font: 700 19px/1.1 var(--display); }
.wapenkeuze-kop small { display: block; font-size: 12px; color: var(--inkt-zacht); }
.wapenkeuze-nieuw { display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; background: rgb(255 255 255 / 0.6); box-shadow: 0 0 0 1px #cdb27e; }
.wapenkeuze-nieuw img { width: 28px; height: 28px; }
.wapenkeuze-strook { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(100%, 400px); aspect-ratio: 4 / 1; }
.wapenkeuze-vakken { position: absolute; inset: 0; z-index: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wapenkeuze-vakken i { margin: 4px; border-radius: 12px; background: radial-gradient(circle at 50% 38%, #fffaf0, #eadbb8 70%, #dcc69a); box-shadow: inset 0 0 0 1.5px #c99a48, inset 0 0 0 4px rgb(255 255 255 / 0.5), 0 3px 0 rgb(120 85 35 / 0.25), 0 4px 10px rgb(80 50 20 / 0.15); }
.wapenkeuze-strook > img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; filter: drop-shadow(0 3px 3px rgb(60 35 10 / 0.35)); }
.wapenkeuze-vak { position: relative; z-index: 2; margin: 4px; cursor: pointer; border-radius: 12px; transition: box-shadow 140ms, background-color 140ms, transform 140ms; }
.wapenkeuze-vak:hover { background: rgb(255 230 160 / 0.22); }
.wapenkeuze-vak:active { transform: translateY(1px); }
.wapenkeuze-vak input { position: absolute; opacity: 0; pointer-events: none; }
.wapenkeuze-vak:has(input:checked) { box-shadow: 0 0 0 3px #2f8b48, 0 0 14px rgb(47 139 72 / 0.45); }
.wapenkeuze-vak:has(input:focus-visible) { box-shadow: 0 0 0 3px #8a5a1c; }

/* Velden en knoppen naast elkaar staan op dezelfde hoogte. */
.m-body :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="hidden"], [type="file"]), select, .invoer, .field) { min-height: 46px; box-sizing: border-box; }
.m-body form .knop:not(.knop-klein), .m-body .knoprij .knop { min-height: 46px; }
.m-body form :is(.flex, .knoprij, .grid):has(> .knop, > button) { align-items: stretch; }

/* Geen stempelbadges (schuin, omlijnd, hoofdletters): een stempel wordt een gewoon label. */
.stad .stamp, .stad .stamp-slam { display: inline-flex; align-items: center; transform: none; rotate: none; mask-image: none; border: 0; padding: 2px 9px; border-radius: 8px; background: rgb(43 29 18 / 0.08); font: 800 12px/1.5 var(--sans); letter-spacing: 0; text-transform: none; animation: none; }
.stad .stamp.text-success, .stad .stamp.border-success { background: rgb(35 115 58 / 0.14); color: #18542a; }
.stad .stamp.text-danger, .stad .stamp.border-danger { background: rgb(180 41 27 / 0.12); color: #8e2216; }
.stad .stamp.text-warning, .stad .stamp.border-warning { background: rgb(200 144 31 / 0.16); color: #7a4a12; }
.uitslag .zegel-s { transform: none; letter-spacing: 0.04em; }
@media (prefers-reduced-motion: no-preference) { .uitslag .zegel-s { animation: stempel-recht 420ms 120ms var(--ease) both; } @keyframes stempel-recht { from { opacity: 0; transform: scale(1.3); } } }
/* Smalle gsm: alle tabs passen naast elkaar, de naam mag op twee regels. */
@media (max-width: 400px) {
  .m-tabs { gap: 2px; padding-left: 4px; padding-right: 4px; }
  .m-tabs a { min-width: 0; padding: 0 3px 8px; font-size: 11px; white-space: normal; text-align: center; line-height: 1.1; }
  .m-tabs .naam { overflow: visible; text-overflow: clip; overflow-wrap: normal; word-break: normal; hyphens: auto; }
  /* Veel tabs (meer dan vijf): niet persen maar zijdelings schuiven, met vaste breedte per tab. */
  .m-tabs:has(> a:nth-child(6)) { justify-content: flex-start; }
  .m-tabs:has(> a:nth-child(6)) > a { flex: 0 0 76px; white-space: nowrap; }
  .m-tabs .medaille { width: 32px; height: 32px; }
  .m-tabs .medaille img { width: 26px; height: 26px; }
}
/* Lange titels lopen door op een tweede regel in plaats van af te breken met puntjes. */
.m-titel h2 span:first-child { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.05; }
@media (max-width: 400px) { .m-titel h2 { font-size: 23px; } }
.knop .prijs { flex-shrink: 0; white-space: nowrap; min-width: max-content; }
/* Cijfers in de koppenletter altijd als gewone cijfers op de lijn, niet de ouderwetse (1o.ooo). */
.stad, .stad * { font-variant-numeric: lining-nums; }
.stad .tabular, .stad [class*="tabular"], .munt b, .kans b, .buit, .eis-stand, .tegel b, .taak time, .zegel { font-variant-numeric: lining-nums tabular-nums; }

/* Buiten het spel: de tabs staan boven de perkamenten kolom en verdelen die breedte, de stand van het rijk krijgt geen tab. */
@media (min-width: 761px) {
  .buiten .m-tabs { justify-content: stretch; gap: 8px; padding: 14px calc(270px + 18px) 0 18px; }
  .buiten .m-tabs a { flex: 1 1 0; max-width: none; min-width: 0; }
}

/* Opmaak-editor: je schrijft op perkament en ziet meteen het resultaat. */
.post-editor-blad { display: block; width: 100%; padding: 12px 14px; outline: none; background: #fffdf7; color: var(--inkt); font: 500 15px/1.6 var(--sans); overflow-wrap: anywhere; cursor: text; }
.post-editor-blad.is-leeg::before { content: attr(data-placeholder); color: #a8977d; pointer-events: none; }
.post-editor-blad b, .post-editor-blad strong { font-weight: 800; }
.post-editor-blad blockquote { margin: 8px 0; padding: 8px 12px; border-left: 3px solid #c99a48; border-radius: 0 var(--r) var(--r) 0; background: rgb(201 154 72 / 0.1); color: var(--inkt-zacht); font-style: italic; }
.post-editor-blad blockquote[data-naam]::before { content: attr(data-naam) " schreef:"; display: block; font: 800 12px/1.4 var(--sans); font-style: normal; color: #8a5a1c; }
.post-editor-blad img { display: block; max-width: 100%; max-height: 240px; margin: 6px 0; border-radius: var(--r); }
.post-editor:focus-within { box-shadow: 0 0 0 3px rgb(201 154 72 / 0.3); }
.post-editor.fout { box-shadow: 0 0 0 3px rgb(180 41 27 / 0.45); }
.post-editor.te-lang [data-char-count] { color: #b4291b; }
.post-editor-knop[aria-pressed="true"] { background: linear-gradient(180deg, #fff3cf, #f2d68c); box-shadow: inset 0 0 0 1.5px #c99a48; }
.post-editor-plaats { display: flex; gap: 8px; align-items: stretch; padding: 8px 10px; border-bottom: 1px solid var(--lijn-perkament); background: #f6ecd4; }
.post-editor-plaats[hidden] { display: none; }
.post-editor-plaats .invoer { flex: 1; min-width: 0; min-height: 38px; }
/* Buiten het spel: de kop beweegt (video in een lus), achter het verloop en de titel. */
.buiten-video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.buiten-kop::after { z-index: 0; }
.buiten-kop > :not(.buiten-video) { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .buiten-video { display: none; } }

/* Strook om het verhaal over te slaan (grote weldoener). */
.verhaal-strook { grid-template-columns: 48px minmax(0, 1fr) auto; margin-bottom: 12px; padding: 8px 10px; }
.verhaal-strook .rij-beeld { width: 48px; height: 48px; }
.verhaal-strook .knop { min-width: 0; }

/* Smalle gsm: een lange knoptekst breekt liever af dan dat de knop uit het venster steekt. */
@media (max-width: 420px) { .knop { white-space: normal; text-align: center; line-height: 1.2; padding-block: 6px; } }
@media (max-width: 360px) { .tegel { padding: 10px; gap: 8px; } .tegel > img { width: 32px; height: 32px; } }

/* Lange woorden (Duits, Turks) in smalle vakken: afbreken met een koppelteken in plaats van uitsteken. */
.m-body :is(b, small, h2, h3, .label-s, .knop) { overflow-wrap: break-word; }
.m-body :is(b, h2, h3, .label-s) { hyphens: auto; }
/* Heel kleine gsm: een knop met prijs laat zijn icoon vooraan vallen, zodat het woord heel blijft. */
@media (max-width: 360px) { .knop:has(.prijs) > img:first-child { display: none; } }

/* Verschil dat even boven een HUD-paneel opstijgt als een bedrag verandert. */
.munt-verschil { position: absolute; right: 8px; top: -4px; z-index: 3; padding: 2px 7px; border-radius: 8px; font: 800 13px/1.2 var(--sans); font-variant-numeric: tabular-nums; pointer-events: none; text-shadow: 0 1px 0 rgb(0 0 0 / 0.6); box-shadow: 0 2px 6px rgb(0 0 0 / 0.45); animation: munt-stijg 1.5s cubic-bezier(0.2, 0.7, 0.3, 1) forwards; }
.munt-verschil.erbij { background: linear-gradient(180deg, #3c9c55, #23733a); color: #f2fff4; }
.munt-verschil.eraf { background: linear-gradient(180deg, #b8402e, #8e2216); color: #fff1ee; }
@keyframes munt-stijg { 0% { opacity: 0; transform: translateY(6px) scale(0.85); } 15% { opacity: 1; transform: translateY(-6px) scale(1.05); } 70% { opacity: 1; transform: translateY(-14px) scale(1); } 100% { opacity: 0; transform: translateY(-22px); } }
.munt:has(.munt-verschil) { z-index: 6; }

/* Lakzegel naast de naam van het team: een echt bericht van het hof. */
.echt-zegel { display: inline-block; width: 1.15em; height: 1.15em; margin: -0.2em 0 -0.15em 0.3em; vertical-align: middle; filter: drop-shadow(0 1px 1px rgb(60 10 5 / 0.45)); }
.post-gesprek-wie b .echt-zegel { margin-left: 0; }

/* Alles: masonry (zie startMasonry in app.js) met het vrijstaande gebouw als kop. */
.plaatsen[data-masonry] { grid-auto-rows: 4px; row-gap: 0; align-items: start; }
.plaatsen[data-masonry] > .plaats { align-self: start; }
.plaats-gebouw { display: block; margin: -12px -12px 0; padding: 10px 18px 0; border-radius: var(--r-groot) var(--r-groot) 0 0; background: radial-gradient(ellipse 70% 80% at 50% 62%, #fff8e8, #ecd9b2 80%); }
.plaats-gebouw img { display: block; width: 100%; max-width: 300px; height: 150px; margin: 0 auto; object-fit: contain; filter: drop-shadow(0 6px 8px rgb(60 35 10 / 0.25)); transition: transform 180ms; }
.plaats-gebouw:hover img { transform: translateY(-3px); }
.plaats:has(.plaats-gebouw) header > img { display: none; }
@media (max-width: 560px) { .plaats-gebouw img { height: 120px; } }

/* Rangvereiste met ladder: per rang onderweg een trede met balk, de doelrang met een slot aan het einde. */
.rang-eis .eis-naam small { display: block; margin-top: 1px; font-size: 11.5px; font-weight: 600; color: var(--inkt-zacht); }
.rang-eis .eis-stand { font: 800 15px/1 var(--sans); color: #8a5a1c; }
.rangbalk { grid-column: 1 / -1; flex: 1 0 100%; display: grid; grid-template-columns: minmax(0, 1fr) 30px; align-items: center; column-gap: 8px; row-gap: 3px; margin: 8px 0 2px; }
.rangbalk .spoor { position: relative; height: 18px; border-radius: 9px; background: #d9c59f; box-shadow: inset 0 1px 2px rgb(80 50 20 / 0.32); overflow: hidden; }
.rangbalk .spoor i { position: absolute; inset: 0 auto 0 0; min-width: 6px; border-radius: inherit; background: linear-gradient(180deg, #ffe39b, #c99a48); box-shadow: inset 0 -1px 0 rgb(120 80 20 / 0.4); }
.rangbalk .streep { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: rgb(250 240 215 / 0.95); box-shadow: 0 0 0 0.5px rgb(120 85 35 / 0.25); }
.rangbalk .spoor em { position: absolute; top: 0; z-index: 1; padding: 0 6px; font: 800 11px/18px var(--sans); font-style: normal; color: #6b4310; white-space: nowrap; }
.rangbalk .spoor em.binnen { transform: translateX(-100%); color: #3a2306; }
.rangbalk .doel { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #fff7e6, #e6d2aa); box-shadow: 0 0 0 1.5px #c99a48, 0 2px 4px rgb(80 50 20 / 0.25); }
.rangbalk .doel img { width: 21px; height: 21px; }
.rangbalk .namen { display: flex; min-width: 0; }
.rangbalk .namen span { flex: 1 1 0; min-width: 0; padding-left: 2px; font: 700 11px/1.2 var(--sans); color: var(--inkt-zacht); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rangbalk .namen .is-nu { color: var(--inkt); }
.rangbalk .doelnaam { justify-self: center; font: 800 11px/1.2 var(--sans); color: #8a5a1c; white-space: nowrap; }
.rangbalk.is-lang .namen span:not(.is-nu) { visibility: hidden; }
.rangbalk.is-lang .namen .is-nu { overflow: visible; }

/* Naamsuggesties onder een zoekveld: perkament met gouden rand in plaats van de donkere lijst. */
.stad .player-suggest { padding: 4px; border: 0; border-radius: var(--r); background: #fffaf0; box-shadow: 0 0 0 1.5px #c99a48, 0 10px 24px rgb(60 35 10 / 0.3); }
.stad .player-suggest [role="option"] { min-height: 40px; color: var(--inkt); font-weight: 700; border-radius: 8px; }
.stad .player-suggest [role="option"]:hover, .stad .player-suggest [aria-selected="true"] { background: linear-gradient(180deg, #fff3cf, #f2d68c); }
.stad .player-suggest-name { color: var(--inkt); }
.stad .player-suggest-role { color: var(--inkt-zacht); }
.stad .player-suggest-empty { color: var(--inkt-zacht); }

/* Het woordmerk in CSS: Uncial Antiqua, gegoten goud met een lichte bovenrand en een donkere onderrand voor diepte.
   Ruime regelhoogte en binnenmarge, anders snijdt background-clip de staarten en uitlopers af. */
.stad .cc-logo { color: transparent; text-shadow: none; }
.stad .cc-logo-text { font: 400 1em/1.2 'Uncial Antiqua', var(--display); letter-spacing: 0.02em; padding: 0.04em 0.06em 0.14em; background: linear-gradient(180deg, #fff6d8 0%, #ffe39b 22%, #e0a948 46%, #b37a26 58%, #f0c66a 76%, #9a6420 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 -1px 0 rgb(255 245 215 / 0.55)) drop-shadow(0 2px 0 #5c3a10) drop-shadow(0 4px 8px rgb(0 0 0 / 0.55)); }
.buiten-logo .cc-logo { font-size: clamp(30px, 7.4vw, 64px); }
/* Het woord krimpt mee met de breedte naast het portret, zodat het nooit uit de kop loopt. */
.buiten-kop .m-titel { min-width: 0; }
.buiten-logo, .buiten-logo a { display: block; min-width: 0; }
@media (max-width: 420px) { .buiten-logo .cc-logo { font-size: clamp(26px, 9.2vw, 40px); } .buiten-kop .m-titel small { font-size: 9.5px; letter-spacing: 0.08em; } }

/* Smalle gsm: het portret klein linksboven naast de naam, de zin over de volle breedte eronder. */
@media (max-width: 480px) {
  .m-say.met-portret { padding: 12px 14px 12px; min-height: 0; }
  .m-say.met-portret::before { display: none; }
  .m-say.met-portret > img { position: static; transform: none; float: left; width: 40px; height: 40px; margin: 0 10px 4px 0; }
  .m-say.met-portret > span { padding-left: 0; }
  .m-say.met-portret > span > b { line-height: 40px; margin-bottom: 0; }
  .m-say.met-portret .m-say-zin { display: block; clear: both; padding-top: 4px; }
}

/* Een chatbericht melden: perkament met gouden rand, keuzelijst en knoppen uit de kit. */
.stad .dock .dock-report { display: grid; gap: 8px; margin: 8px 0 2px; padding: 10px 12px; border: 0; border-radius: var(--r); background: linear-gradient(180deg, #fffaf0, #f3e3c2); box-shadow: 0 0 0 1.5px #c99a48; color: var(--inkt); }
.stad .dock .dock-report label, .stad .dock .dock-report span { color: var(--inkt-zacht); font-weight: 700; font-size: 12.5px; }
.stad .dock .dock-report-keuze { width: 100%; min-height: 40px; padding: 0 34px 0 12px; border: 0; border-radius: 10px; background: #fffdf7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a5a1c' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 16px; box-shadow: inset 0 0 0 1px var(--lijn-perkament), inset 0 1px 2px rgb(80 50 20 / 0.12); color: var(--inkt); font: 600 14px/1 var(--sans); appearance: none; }
.stad .dock .dock-report-keuze:focus { outline: 0; box-shadow: inset 0 0 0 1.5px #c99a48, 0 0 0 3px rgb(201 154 72 / 0.3); }
.stad .dock .dock-report > div, .stad .dock .dock-report .knoprij { display: flex; gap: 8px; }
.stad .dock .dock-report .knop { min-height: 34px; }

/* Te doen: elk tabblad als kolom met lucht tussen de blokken. */
.todo-paneel { display: grid; gap: 16px; }
.todo-paneel[hidden] { display: none; }

/* Beheer: kerncijfers als tegels met het gerenderde icoon groot als achtergrond rechts. */
.beheer-tegel { position: relative; overflow: hidden; display: grid; gap: 2px; min-height: 108px; padding: 14px 16px; }
.beheer-tegel::after { content: ""; position: absolute; right: -14px; bottom: -18px; width: 110px; height: 110px; background: var(--tegel-beeld) center / contain no-repeat; opacity: 0.22; transform: rotate(-8deg); pointer-events: none; }
.beheer-tegel > * { position: relative; z-index: 1; margin: 0; min-width: 0; }
.beheer-tegel-label { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--inkt-zacht); }
.beheer-tegel-label img { width: 24px; height: 24px; }
.beheer-tegel-waarde { font: 800 22px/1.15 var(--sans); color: var(--inkt); overflow-wrap: anywhere; }
.beheer-tegel-sub { font-size: 12px; color: var(--inkt-zacht); line-height: 1.35; }
/* Smalle gsm: vier knoppen in de bovenrij (akçe, sultani, postduif, informatie) passen naast elkaar. */
@media (max-width: 360px) { .beurs .ronde { width: 40px; height: 40px; } .beurs .ronde img { width: 30px; height: 30px; } .beurs { gap: 4px; } }

/* Tooltip in de stijl van het spel (zie stad.js): donkere lak, gouden rand, een puntje naar de knop. */
.spel-tip { position: fixed; z-index: 200; max-width: min(260px, calc(100vw - 16px)); padding: 7px 12px; border-radius: 10px; background: linear-gradient(180deg, var(--lak-1), var(--lak-2)); color: var(--tekst); font: 700 13px/1.35 var(--sans); box-shadow: 0 0 0 1.5px #c99a48, 0 8px 18px rgb(0 0 0 / 0.45); pointer-events: none; }
.spel-tip[hidden] { display: none; }
.spel-tip::before { content: ""; position: absolute; top: -6px; left: calc(var(--pijl, 50%) - 6px); width: 12px; height: 12px; background: var(--lak-1); transform: rotate(45deg); box-shadow: -1.5px -1.5px 0 #c99a48; }
.spel-tip.boven::before { top: auto; bottom: -6px; background: var(--lak-2); box-shadow: 1.5px 1.5px 0 #c99a48; }

/* Kerncijfers met het icoon groot als achtergrond: zes naast elkaar, drie op tablet, twee op gsm. */
.beeld-tegels { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 1100px) { .beeld-tegels { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .beeld-tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.beeld-tegel { position: relative; overflow: hidden; display: grid; align-content: start; gap: 2px; min-height: 112px; padding: 12px 14px; border-radius: var(--r-groot); background: rgb(255 255 255 / 0.6); box-shadow: 0 0 0 1px var(--lijn-perkament), 0 3px 0 rgb(120 85 35 / 0.14); }
.beeld-tegel::after { content: ""; position: absolute; right: -16px; bottom: -16px; width: 96px; height: 96px; background: var(--tegel-beeld) center / contain no-repeat; opacity: 0.3; transform: rotate(-8deg); pointer-events: none; }
.beeld-tegel > * { position: relative; z-index: 1; min-width: 0; }
.beeld-tegel small { font-size: 12px; font-weight: 600; color: var(--inkt-zacht); line-height: 1.3; }
.beeld-tegel b { font: 700 24px/1.15 var(--display); color: var(--inkt); font-variant-numeric: lining-nums; overflow-wrap: anywhere; }

/* Informatie: beeldkaarten in een raster van drie, de foto vult de kaart, titel en uitleg onderaan op een donker verloop. */
.info-kaarten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 900px) { .info-kaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); } .info-kaarten > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (max-width: 480px) { .info-kaarten { grid-template-columns: minmax(0, 1fr); } }
.info-kaarten .kaartje { position: relative; display: block; min-width: 0; height: clamp(190px, 17vw, 240px); border-radius: var(--r-groot); overflow: hidden; text-decoration: none; background: #1c140d; box-shadow: 0 0 0 1.5px #c99a48, 0 0 0 4px var(--lak-diep), 0 10px 24px rgb(40 22 8 / 0.3); transition: transform 200ms var(--ease), box-shadow 200ms; }
.info-kaarten .kaartje:hover { transform: translateY(-3px); box-shadow: 0 0 0 2px #f2d68c, 0 0 0 4.5px var(--lak-diep), 0 14px 30px rgb(40 22 8 / 0.4); }
.info-kaarten .kaartje > img:first-child { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; transition: transform 600ms var(--ease); }
.info-kaarten .kaartje:hover > img:first-child { transform: scale(1.05); }
.info-kaarten .kaartje > img.icoon { object-fit: contain; padding: 30px; background: radial-gradient(circle at 50% 40%, #5a3d22, #1c140d); }
.info-kaarten .kaartje::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(10 6 3 / 0) 30%, rgb(10 6 3 / 0.55) 55%, rgb(10 6 3 / 0.92) 100%); pointer-events: none; }
.info-kaarten .post-archief-ico { position: absolute; z-index: 2; left: 14px; top: 14px; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #fff3cf, #e0b864); box-shadow: 0 0 0 2px #8a5a1c, 0 4px 10px rgb(0 0 0 / 0.45); }
.info-kaarten .post-archief-ico img { width: 38px; height: 38px; }
.info-kaarten .post-archief-label { position: absolute; z-index: 2; right: 12px; top: 14px; }
.info-kaarten .inhoud { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: grid; gap: 3px; padding: 14px 16px 16px; }
.info-kaarten .inhoud b { font: 700 24px/1.1 var(--display); color: #ffe39b; text-shadow: 0 2px 4px #000; }
.info-kaarten .inhoud small { font-size: 13px; line-height: 1.4; color: rgb(255 244 220 / 0.85); }

/* Op slot: de rij wordt één compacte donkere kaart: beeld onder een slot, naam met Op slot, rechts de vereiste met een smalle balk. */
.rij:has(> .slot-laag) { display: block; padding: 0; overflow: hidden; filter: none; opacity: 1; background: none; box-shadow: none; }
.rij:has(> .slot-laag) > :not(.slot-laag) { display: none !important; }
.slot-laag { display: grid; grid-template-columns: 52px minmax(0, 1fr) minmax(0, 340px); align-items: center; gap: 14px; padding: 8px 16px 8px 8px; border-radius: var(--r-groot); background: linear-gradient(180deg, #34271c, #1f1710); box-shadow: inset 0 0 0 1px rgb(201 154 72 / 0.35), 0 3px 0 rgb(40 25 10 / 0.2); color: var(--tekst); }
.slot-laag-beeld { position: relative; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 10px; background: radial-gradient(circle at 50% 40%, #4a3826, #1a130d); }
.slot-laag-foto { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; filter: grayscale(1) brightness(0.5); }
.slot-laag-slot { position: absolute; width: 32px; height: 32px; filter: drop-shadow(0 2px 4px rgb(0 0 0 / 0.8)); }
.slot-laag-tekst { display: grid; gap: 3px; min-width: 0; }
.slot-laag-tekst > b { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-weight: 800; font-size: 14.5px; line-height: 1.25; color: var(--tekst); }
.slot-laag-label { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 5px; background: rgb(255 227 155 / 0.12); box-shadow: inset 0 0 0 1px rgb(220 174 92 / 0.45); color: var(--goud-licht); font-size: 11px; font-weight: 800; letter-spacing: 0.02em; }
.slot-laag-tekst p { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--tekst-zacht); }
/* De vereiste zonder kruisje, naam en stand op één regel, de balk dunner. */
.slot-laag-eisen { margin: 0; gap: 0; }
.slot-laag-eisen .eis { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 0; background: none; box-shadow: none; }
.slot-laag-eisen .eis-teken { display: none; }
.slot-laag-eisen .eis-naam { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--tekst); white-space: nowrap; }
.slot-laag-eisen .eis-naam small { display: inline; margin: 0; font-size: 11.5px; color: var(--goud); }
.slot-laag-eisen .rangbalk { margin: 4px 0 0; grid-template-columns: minmax(0, 1fr) 22px; column-gap: 6px; row-gap: 2px; }
.slot-laag-eisen .rangbalk .spoor { height: 12px; border-radius: 6px; background: rgb(0 0 0 / 0.45); box-shadow: inset 0 1px 2px #000, 0 0 0 1px rgb(205 160 80 / 0.4); }
.slot-laag-eisen .rangbalk .spoor em { font-size: 9.5px; line-height: 12px; color: #2b1a08; }
.slot-laag-eisen .rangbalk .spoor em:not(.binnen) { color: var(--goud-licht); }
.slot-laag-eisen .rangbalk .streep { background: rgb(255 227 155 / 0.35); box-shadow: none; }
.slot-laag-eisen .rangbalk .doel { width: 22px; height: 22px; }
.slot-laag-eisen .rangbalk .doel img { width: 15px; height: 15px; }
.slot-laag-eisen .rangbalk .namen span { font-size: 10px; }
.slot-laag-eisen .rangbalk .doelnaam { font-size: 10px; }
@media (max-width: 640px) {
  .slot-laag { grid-template-columns: 44px minmax(0, 1fr); gap: 4px 10px; padding: 8px 12px 10px 8px; }
  .slot-laag-beeld { width: 44px; height: 44px; }
  .slot-laag-slot { width: 28px; height: 28px; }
  .slot-laag-eisen { grid-column: 2; }
}

/* Weldoeners: de naam in de kleur van hun edelsteen (smaragd, saffier, robijn), een geslepen steentje ervoor dat fonkelt, en af en toe een glans over de letters. */
.steen, .steen-icoon { --steen: #178a52; --licht: #d2ffe7; --diep: #0b4a2b; }
.steen-saffier { --steen: #2a5fd0; --licht: #dde8ff; --diep: #132f73; }
.steen-robijn { --steen: #c21f3b; --licht: #ffd6dd; --diep: #6a0d1d; }
:where(.op-donker, .paneel:not(.modal), .hud, .ctx, .verhaal, .hof-legenda) .steen-smaragd { --steen: #4fd18e; --diep: #1d7a4a; }
:where(.op-donker, .paneel:not(.modal), .hud, .ctx, .verhaal, .hof-legenda) .steen-saffier { --steen: #8fb3ff; --diep: #2a5fd0; }
:where(.op-donker, .paneel:not(.modal), .hud, .ctx, .verhaal, .hof-legenda) .steen-robijn { --steen: #ff7d93; --diep: #c21f3b; }
.steen { position: relative; padding: 0 0.08em; color: var(--steen) !important; background-image: linear-gradient(105deg, var(--steen) 0%, var(--steen) 40%, var(--licht) 50%, var(--steen) 60%, var(--steen) 100%); background-size: 300% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: none; }
.steen::before, .steen-icoon { content: ""; display: inline-block; flex-shrink: 0; width: 0.58em; height: 0.58em; margin: 0 0.38em 0 0.12em; vertical-align: 0.06em; transform: rotate(45deg); border-radius: 1.5px; background: linear-gradient(135deg, var(--licht) 0%, var(--steen) 42%, var(--diep) 100%); box-shadow: inset -1px -1px 0 rgb(0 0 0 / 0.25), inset 1px 1px 0 rgb(255 255 255 / 0.5); }
.steen-icoon { margin-left: 0; }
/* Een fonkeling op het steentje: een klein sterretje dat even oplicht. */
.steen::after { content: ""; position: absolute; left: 0.05em; top: 50%; width: 0.5em; height: 0.5em; margin-top: -0.42em; background: radial-gradient(circle, #fff 0 12%, transparent 13%), linear-gradient(0deg, transparent 44%, #fff 46% 54%, transparent 56%), linear-gradient(90deg, transparent 44%, #fff 46% 54%, transparent 56%); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .steen { animation: steen-glans 5s ease-in-out infinite; }
  .steen::after { animation: steen-fonkel 5s ease-in-out infinite; }
  .steen-saffier { animation-delay: -1.6s; }
  .steen-saffier::after { animation-delay: -1.6s; }
  .steen-robijn { animation-duration: 3.6s; }
  .steen-robijn::after { animation-duration: 3.6s; }
  @keyframes steen-glans { 0%, 55% { background-position: 100% 0; } 90%, 100% { background-position: 0 0; } }
  @keyframes steen-fonkel { 0%, 50% { opacity: 0; transform: scale(0.3) rotate(0); } 58% { opacity: 1; transform: scale(1) rotate(45deg); } 68%, 100% { opacity: 0; transform: scale(0.4) rotate(90deg); } }
}