/* De Vergulde Meermin - gegenereerd, niet met de hand aanpassen */

    body { margin: 0; }
    a { color: #8c3b22; } a:hover { color: #6d2a15; }

    .bureau {
      position: relative; overflow: hidden; box-sizing: border-box;
      font-family: 'EB Garamond', Georgia, serif;
      background-color: #35200f;
      background-image:
        url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27400%27%20height%3D%27400%27%3E%0A%20%3Cfilter%20id%3D%27p%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%0A%20%20%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.85%200.02%27%20numOctaves%3D%273%27%20seed%3D%2731%27%20stitchTiles%3D%27stitch%27%20result%3D%27t%27%2F%3E%0A%20%20%3CfeColorMatrix%20in%3D%27t%27%20type%3D%27matrix%27%20values%3D%270%200%200%200%200%200%200%200%200%200%200%200%200%200%200%202.1%200%200%200%20-1.02%27%2F%3E%0A%20%3C%2Ffilter%3E%0A%20%3Crect%20width%3D%27400%27%20height%3D%27400%27%20filter%3D%27url%28%23p%29%27%2F%3E%0A%3C%2Fsvg%3E"),
        url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27900%27%20height%3D%27900%27%3E%0A%20%3Cfilter%20id%3D%27w%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%0A%20%20%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.33%200.0055%27%20numOctaves%3D%275%27%20seed%3D%2717%27%20stitchTiles%3D%27stitch%27%20result%3D%27t%27%2F%3E%0A%20%20%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.008%27%20numOctaves%3D%273%27%20seed%3D%274%27%20result%3D%27warp%27%2F%3E%0A%20%20%3CfeDisplacementMap%20in%3D%27t%27%20in2%3D%27warp%27%20scale%3D%2738%27%20xChannelSelector%3D%27R%27%20yChannelSelector%3D%27G%27%20result%3D%27d%27%2F%3E%0A%20%20%3CfeColorMatrix%20in%3D%27d%27%20type%3D%27matrix%27%20values%3D%270%200%200%200%200.04%200%200%200%200%200.022%200%200%200%200%200.008%201.7%200%200%200%20-0.52%27%2F%3E%0A%20%3C%2Ffilter%3E%0A%20%3Crect%20width%3D%27900%27%20height%3D%27900%27%20filter%3D%27url%28%23w%29%27%2F%3E%0A%3C%2Fsvg%3E"),
        repeating-linear-gradient(90deg,
          rgba(0,0,0,.72) 0 2px, rgba(120,86,44,.22) 2px 3.5px, rgba(0,0,0,0) 3.5px 132px),
        linear-gradient(172deg, #3a2512 0%, #271809 48%, #140b04 100%);
      background-size: 400px 400px, 900px 900px, auto, auto;
      background-blend-mode: normal, normal, normal, normal;
    }

    /* vernislaag: zachte glans naar het licht toe */
    .vernis {
      position: absolute; inset: 0; pointer-events: none; z-index: 1;
      background:
        radial-gradient(44% 28% at 74% 11%, rgba(255,214,150,.12) 0%, rgba(255,190,110,.04) 42%, rgba(0,0,0,0) 66%);
      mix-blend-mode: screen;
    }

    /* de lichtplas van de kaars */
    .lichtplas {
      position: absolute; z-index: 1; pointer-events: none;
      width: 760px; height: 760px; border-radius: 50%;
      background: radial-gradient(circle,
        rgba(255,198,120,.30) 0%,
        rgba(255,170,74,.155) 20%,
        rgba(238,140,44,.068) 38%,
        rgba(150,78,16,.022) 56%,
        rgba(0,0,0,0) 72%);
      mix-blend-mode: screen;
      animation: flakker 6.1s ease-in-out infinite;
    }
    .duister {
      position: absolute; inset: 0; z-index: 2; pointer-events: none;
      background: radial-gradient(78% 50% at var(--lx,76%) var(--ly,9%),
        rgba(0,0,0,0) 0%, rgba(0,0,0,.30) 34%, rgba(0,0,0,.66) 62%, rgba(0,0,0,.88) 84%, rgba(0,0,0,.95) 100%);
    }

    @keyframes flakker {
      0%   { opacity: .93; transform: scale(1)      translate(0, 0); }
      12%  { opacity: 1;   transform: scale(1.025)  translate(1px, -1px); }
      23%  { opacity: .87; transform: scale(.992)   translate(-1px, 1px); }
      37%  { opacity: .97; transform: scale(1.014)  translate(0, -2px); }
      48%  { opacity: .83; transform: scale(.984)   translate(1px, 1px); }
      61%  { opacity: .99; transform: scale(1.03)   translate(-1px, -1px); }
      74%  { opacity: .9;  transform: scale(1.002)  translate(0, 1px); }
      88%  { opacity: 1;   transform: scale(1.018)  translate(1px, 0); }
      100% { opacity: .93; transform: scale(1)      translate(0, 0); }
    }
    @keyframes vlamdans {
      0%,100% { opacity: .95; transform: scale(1); }
      17%  { opacity: 1;   transform: scale(1.12); }
      29%  { opacity: .82; transform: scale(.93); }
      53%  { opacity: 1;   transform: scale(1.08); }
      68%  { opacity: .88; transform: scale(.97); }
      84%  { opacity: 1;   transform: scale(1.05); }
    }

    /* ---------- papier ---------- */
    .vel { position: relative; z-index: 3; }
    .velpapier {
      position: absolute; inset: -7px; z-index: 0;
      background-image:
        url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27260%27%20height%3D%27260%27%3E%0A%20%3Cfilter%20id%3D%27v%27%3E%0A%20%20%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.72%27%20numOctaves%3D%274%27%20seed%3D%279%27%20stitchTiles%3D%27stitch%27%20result%3D%27t%27%2F%3E%0A%20%20%3CfeColorMatrix%20in%3D%27t%27%20type%3D%27matrix%27%20values%3D%270%200%200%200%200.36%200%200%200%200%200.26%200%200%200%200%200.13%200.9%200%200%200%20-0.38%27%2F%3E%0A%20%3C%2Ffilter%3E%0A%20%3Crect%20width%3D%27260%27%20height%3D%27260%27%20filter%3D%27url%28%23v%29%27%2F%3E%0A%3C%2Fsvg%3E"),
        url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27600%27%20height%3D%27600%27%3E%0A%20%3Cfilter%20id%3D%27s%27%3E%0A%20%20%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.009%27%20numOctaves%3D%274%27%20seed%3D%2723%27%20stitchTiles%3D%27stitch%27%20result%3D%27t%27%2F%3E%0A%20%20%3CfeColorMatrix%20in%3D%27t%27%20type%3D%27matrix%27%20values%3D%270%200%200%200%200.42%200%200%200%200%200.29%200%200%200%200%200.11%201.1%200%200%200%20-0.62%27%2F%3E%0A%20%3C%2Ffilter%3E%0A%20%3Crect%20width%3D%27600%27%20height%3D%27600%27%20filter%3D%27url%28%23s%29%27%2F%3E%0A%3C%2Fsvg%3E"),
        linear-gradient(208deg, rgba(255,232,184,.26) 0%, rgba(255,232,184,.05) 22%,
                        rgba(0,0,0,0) 40%, rgba(24,12,2,.20) 76%, rgba(24,12,2,.40) 100%),
        radial-gradient(70% 52% at 78% 8%, rgba(255,250,232,.5) 0%, rgba(255,250,232,0) 58%),
        linear-gradient(160deg, #e4d6b4 0%, #d8c79f 46%, #b9a175 100%);
      background-size: 260px 260px, 600px 600px, auto, auto, auto;
      filter: url(#scheur) drop-shadow(0 10px 9px rgba(0,0,0,.5)) drop-shadow(0 2px 1px rgba(0,0,0,.4));
    }
    .velpapier.journaal {
      background-image:
        url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27260%27%20height%3D%27260%27%3E%0A%20%3Cfilter%20id%3D%27v%27%3E%0A%20%20%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.72%27%20numOctaves%3D%274%27%20seed%3D%279%27%20stitchTiles%3D%27stitch%27%20result%3D%27t%27%2F%3E%0A%20%20%3CfeColorMatrix%20in%3D%27t%27%20type%3D%27matrix%27%20values%3D%270%200%200%200%200.36%200%200%200%200%200.26%200%200%200%200%200.13%200.9%200%200%200%20-0.38%27%2F%3E%0A%20%3C%2Ffilter%3E%0A%20%3Crect%20width%3D%27260%27%20height%3D%27260%27%20filter%3D%27url%28%23v%29%27%2F%3E%0A%3C%2Fsvg%3E"),
        repeating-linear-gradient(180deg, rgba(86,104,116,.16) 0 1px, rgba(0,0,0,0) 1px 28px),
        url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27600%27%20height%3D%27600%27%3E%0A%20%3Cfilter%20id%3D%27s%27%3E%0A%20%20%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.009%27%20numOctaves%3D%274%27%20seed%3D%2723%27%20stitchTiles%3D%27stitch%27%20result%3D%27t%27%2F%3E%0A%20%20%3CfeColorMatrix%20in%3D%27t%27%20type%3D%27matrix%27%20values%3D%270%200%200%200%200.42%200%200%200%200%200.29%200%200%200%200%200.11%201.1%200%200%200%20-0.62%27%2F%3E%0A%20%3C%2Ffilter%3E%0A%20%3Crect%20width%3D%27600%27%20height%3D%27600%27%20filter%3D%27url%28%23s%29%27%2F%3E%0A%3C%2Fsvg%3E"),
        linear-gradient(208deg, rgba(255,232,184,.22) 0%, rgba(0,0,0,0) 38%, rgba(20,14,4,.34) 100%),
        radial-gradient(66% 48% at 78% 8%, rgba(250,250,244,.44) 0%, rgba(250,250,244,0) 58%),
        linear-gradient(168deg, #dad6c4 0%, #c9c3ac 52%, #aaa48c 100%);
      background-size: 260px 260px, auto, 600px 600px, auto, auto, auto;
    }
    .velpapier.lijst {
      background-image:
        url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27260%27%20height%3D%27260%27%3E%0A%20%3Cfilter%20id%3D%27v%27%3E%0A%20%20%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.72%27%20numOctaves%3D%274%27%20seed%3D%279%27%20stitchTiles%3D%27stitch%27%20result%3D%27t%27%2F%3E%0A%20%20%3CfeColorMatrix%20in%3D%27t%27%20type%3D%27matrix%27%20values%3D%270%200%200%200%200.36%200%200%200%200%200.26%200%200%200%200%200.13%200.9%200%200%200%20-0.38%27%2F%3E%0A%20%3C%2Ffilter%3E%0A%20%3Crect%20width%3D%27260%27%20height%3D%27260%27%20filter%3D%27url%28%23v%29%27%2F%3E%0A%3C%2Fsvg%3E"),
        repeating-linear-gradient(90deg, rgba(122,90,42,.11) 0 1px, rgba(0,0,0,0) 1px 34px),
        repeating-linear-gradient(180deg, rgba(122,90,42,.12) 0 1px, rgba(0,0,0,0) 1px 34px),
        url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27600%27%20height%3D%27600%27%3E%0A%20%3Cfilter%20id%3D%27s%27%3E%0A%20%20%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.009%27%20numOctaves%3D%274%27%20seed%3D%2723%27%20stitchTiles%3D%27stitch%27%20result%3D%27t%27%2F%3E%0A%20%20%3CfeColorMatrix%20in%3D%27t%27%20type%3D%27matrix%27%20values%3D%270%200%200%200%200.42%200%200%200%200%200.29%200%200%200%200%200.11%201.1%200%200%200%20-0.62%27%2F%3E%0A%20%3C%2Ffilter%3E%0A%20%3Crect%20width%3D%27600%27%20height%3D%27600%27%20filter%3D%27url%28%23s%29%27%2F%3E%0A%3C%2Fsvg%3E"),
        linear-gradient(208deg, rgba(255,232,184,.22) 0%, rgba(0,0,0,0) 38%, rgba(22,13,3,.36) 100%),
        linear-gradient(164deg, #e3d3ac 0%, #d0bc92 52%, #b5a077 100%);
      background-size: 260px 260px, auto, auto, 600px 600px, auto, auto;
    }
    .velvouw {
      position: absolute; left: -7px; right: -7px; top: 38%; height: 26px; z-index: 1;
      pointer-events: none;
      background: linear-gradient(180deg,
        rgba(60,38,12,.10) 0%, rgba(60,38,12,.16) 44%,
        rgba(255,246,222,.32) 52%, rgba(60,38,12,.07) 70%, rgba(0,0,0,0) 100%);
    }
    .velinhoud { position: relative; z-index: 2; padding: 30px 28px 26px; color: #3a2411; }
    .velinhoud.journaal { color: #33302a; }

    h1 { margin: 0 0 3px; font-family: 'IM Fell English', Georgia, serif;
         font-size: 32px; font-weight: 400; line-height: 1.12; color: #2c1b0c; }
    h2 { margin: 0 0 13px; font-family: 'IM Fell English', Georgia, serif;
         font-size: 22px; font-weight: 400; color: #2c1b0c; }
    .onderschrift { margin: 0 0 19px; padding-bottom: 12px; font-style: italic;
         font-size: 14.5px; color: #79572f; border-bottom: 1px solid rgba(96,66,30,.28); }
    p { margin: 0 0 14px; font-size: 17.5px; line-height: 1.62; }
    p:last-child { margin-bottom: 0; }
    .klein { font-size: 14.5px; font-style: italic; color: #79572f; }
    .kantlijn { margin: 0 0 12px; padding: 3px 0 3px 15px;
         border-left: 2px solid rgba(122,42,26,.42); font-style: italic;
         font-size: 17px; line-height: 1.55; color: #4a3018; }

    /* ---------- voorwerpen op het bureau ---------- */
    .voorwerp { position: absolute; z-index: 6; }
    /* voorwerpen ver van de kaars liggen in de schaduw */
    .voorwerp--ver { filter: brightness(.6) saturate(.9) contrast(1.04); }
    .voorwerp--halfver { filter: brightness(.78) saturate(.95); }
    .etiket {
      position: absolute; font-family: 'IM Fell English', Georgia, serif;
      font-style: italic; font-size: 15px; color: rgba(232,206,160,.62);
      letter-spacing: .3px; white-space: nowrap; text-shadow: 0 1px 3px rgba(0,0,0,.8);
    }


    .blaker { position: relative; filter: drop-shadow(0 12px 16px rgba(0,0,0,.62)); }
    .blaker .vlamkern { animation: vlamdans 3.3s ease-in-out infinite; transform-origin: 100px 104px; }
    .blaker::after {
      content: ""; position: absolute; left: 58%; top: 50%; width: 300px; height: 300px;
      transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
      background: radial-gradient(circle, rgba(255,232,168,.5) 0%, rgba(255,190,96,.2) 22%, rgba(255,160,50,.06) 44%, rgba(255,160,50,0) 66%);
      mix-blend-mode: screen;
      animation: vlamdans 4.7s ease-in-out infinite;
    }

/* ---------------- app-specifiek ---------------- */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; padding: 0;
  display: flex; flex-direction: column;
}
main { flex: 1 0 auto; }
.tafelvoet { flex: 0 0 auto; }
/* .bureau zet overflow:hidden voor de artboards; op de body mag dat juist niet,
   anders kan de pagina niet scrollen. */
body.bureau { overflow: visible; }

/* de vaste laag is nu alleen nog het omgevingsduister aan de randen */
.dek { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.dek > * { pointer-events: none; }

/* zonder kaars erin wordt het vaste duister een rustige randschaduw */
.dek .duister {
  background: radial-gradient(92% 58% at 56% 34%,
    rgba(0,0,0,0) 0%, rgba(0,0,0,.20) 44%, rgba(0,0,0,.56) 74%, rgba(0,0,0,.8) 100%);
}

/* de kaars staat op tafel en schuift dus mee */
.tafelkop { position: relative; z-index: 4; height: 158px; }
.kaarslaag {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: 100vw; max-width: 100%; height: 500px; top: -22px;
  overflow: hidden; pointer-events: none;
}
.kaarslaag .voorwerp { pointer-events: auto; }

main {
  position: relative; z-index: 3;
  max-width: 620px; margin: 0 auto;
  padding: 4px 18px 8px;
}
main.midden { min-height: 76vh; display: flex; align-items: center; padding-top: 40px; }

.vel { margin: 0 0 26px; }
.velinhoud { padding: 28px 24px 24px; }

/* voorwerpen zijn aanraakbaar */
.dek .voorwerp { pointer-events: auto; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.dek .voorwerp:active { transform: scale(.985); }
.voorwerp[data-toon] { transition: filter .25s ease; }
.voorwerp[data-toon].actief { filter: brightness(1.15) saturate(1.02); }

.etiket { z-index: 6; }

.plek-kaars { top: 6px; right: -70px; }

/* de andere voorwerpen liggen echt onderaan de tafel en schuiven mee */
.tafelvoet {
  position: relative; z-index: 4;
  height: 172px; margin-top: 0;
  overflow: hidden;
}
.tafelvoet .voorwerp {
  position: absolute; pointer-events: auto; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tafelvoet .voorwerp:active { transform: scale(.985); }
.plek-kaart { left: -58px; bottom: -62px; }
.plek-boek  { right: -66px; bottom: -56px; }

/* ---------------- sporen van jaren gebruik, in het hout zelf ----------------
   De beelden zijn 'hard-light'-kaarten: middengrijs doet niets, donkerder brandt in,
   lichter slijt uit. Zo loopt de nerf er gewoon doorheen. Ze liggen onder het duister,
   dus het kaarslicht valt er vanzelf goed op. */
.slijtage {
  position: absolute; left: 0; top: 0; right: 0; bottom: 0; min-height: 100vh; min-height: 100svh;
  z-index: 0; overflow: hidden; pointer-events: none; user-select: none;
}

@media (max-width: 400px) {
  .plek-kaart { left: -78px; }
  .plek-boek  { right: -86px; }
}

/* ---------------- onderdelen op papier ---------------- */
h1 { margin: 0 0 3px; font-family: 'IM Fell English', Georgia, serif;
     font-size: 31px; font-weight: 400; line-height: 1.12; color: #2c1b0c; }
h2 { margin: 0 0 13px; font-family: 'IM Fell English', Georgia, serif;
     font-size: 22px; font-weight: 400; color: #2c1b0c; }

.register { display: flex; flex-direction: column; }
.naamknop {
  display: flex; align-items: baseline; gap: 11px; width: 100%;
  min-height: 52px; padding: 13px 4px 11px; text-align: left;
  background: none; border: 0; border-bottom: 1px solid rgba(96,66,30,.26);
  cursor: pointer; color: inherit; font-family: inherit;
}
.register .naamknop:first-child { border-top: 1px solid rgba(96,66,30,.26); }
.naamknop .teller { flex: 0 0 22px; font-size: 13.5px; font-style: italic; color: #9b7546; }
.naamknop .naam { flex: 1 1 auto; font-family: 'IM Fell English', Georgia, serif;
                  font-size: 21.5px; color: #33200f; }
.naamknop.gekozen { background: rgba(140,96,36,.1); }

.eigenhand { display: flex; align-items: center; gap: 10px; margin-top: 18px;
             background: none; border: 0; padding: 10px 4px; cursor: pointer;
             font-family: inherit; font-style: italic; font-size: 15.5px; color: #79572f; }

.wachtrij { display: flex; align-items: center; gap: 11px; padding: 11px 2px 9px;
            border-bottom: 1px solid rgba(96,66,30,.24); }
.wachtrij:first-of-type { border-top: 1px solid rgba(96,66,30,.24); }
.glas { flex: 0 0 26px; font-family: 'IM Fell English', serif; font-size: 16px; color: #9b7546; }
.wachtrij select {
  flex: 1 1 auto; min-width: 0; min-height: 44px;
  padding: 8px 6px; font-family: 'IM Fell English', Georgia, serif; font-size: 18px;
  color: #33200f; background: rgba(255,248,230,.28);
  border: 0; border-bottom: 1px solid rgba(96,66,30,.3); border-radius: 0;
  appearance: none; -webkit-appearance: none;
}

.zegelknop {
  display: flex; align-items: center; justify-content: center; gap: 11px;
  width: 100%; margin-top: 22px; min-height: 54px; padding: 13px 18px;
  font-family: 'IM Fell English', serif; font-size: 18px; letter-spacing: .3px;
  color: #f4e7c8; background: linear-gradient(#5b3a1a, #3c250e);
  border: 1px solid #7a5326; border-radius: 2px; cursor: pointer;
  box-shadow: 0 4px 0 rgba(0,0,0,.42), inset 0 1px 0 rgba(255,220,160,.18);
}
.zegelknop:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,.42); }
.zegelknop[disabled] { opacity: .5; }
.lak { width: 20px; height: 20px; border-radius: 50%; flex: 0 0 auto;
       background: radial-gradient(circle at 34% 30%, #b8442a, #7d2413);
       box-shadow: inset 0 -2px 3px rgba(0,0,0,.45); }

.melding { margin-top: 15px; padding: 12px 15px; font-size: 16px; line-height: 1.5;
           border: 1px solid rgba(122,42,26,.3); background: rgba(180,120,40,.12); color: #5a3a18; }
.melding b { font-family: 'IM Fell English', serif; font-size: 19px; }
.melding--goed { background: rgba(96,124,52,.16); border-color: rgba(80,110,40,.4); }

/* ---------------- de lade ---------------- */
.ladewaas {
  position: fixed; inset: 0; z-index: 8;
  background: rgba(8,4,1,.62);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
.lade {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9;
  max-height: 86vh; overflow-y: auto;
  padding: 18px 16px calc(30px + env(safe-area-inset-bottom));
  background:
    repeating-linear-gradient(87deg, rgba(0,0,0,.24) 0 3px, rgba(255,226,180,.02) 3px 7px, rgba(0,0,0,.12) 7px 12px),
    linear-gradient(#452c14 0%, #26170a 24%, #150c04 100%);
  border-top: 3px solid #6b4a22;
  box-shadow: 0 -24px 48px rgba(0,0,0,.78);
}
.greep { width: 56px; height: 5px; margin: 0 auto 16px; border-radius: 3px;
         background: linear-gradient(#8a6b3c, #462c12); }
.lade .vel { margin-bottom: 14px; }
.ladesluit {
  display: block; width: 100%; margin-top: 6px; min-height: 50px;
  background: none; border: 1px solid #5a3f1c; border-radius: 2px;
  color: #b99765; font-family: 'IM Fell English', serif; font-size: 16.5px; cursor: pointer;
}
.notitie { margin: 16px 0 0; padding: 4px 0 4px 15px;
           border-left: 2px solid rgba(122,42,26,.42);
           font-size: 16.5px; line-height: 1.55; color: #4a3018; }
.notitie b { font-family: 'IM Fell English', serif; font-weight: 400; font-size: 17.5px; }

.boekleeg { text-align: center; padding: 18px 6px 10px; }
.boekleeg p { margin: 0 0 8px; font-family: 'IM Fell English', Georgia, serif; font-size: 20px;
              color: #7a6038; font-style: italic; }
.boekleeg p.klein { font-size: 14.5px; font-style: normal; line-height: 1.55; color: #8a6e46; }

.bemanningslijst { list-style: none; margin: 0; padding: 0; }
.bemanningslijst li { display: flex; align-items: baseline; gap: 9px;
  padding: 10px 0; border-bottom: 1px solid rgba(96,66,30,.26); font-size: 16.5px; }
.bemanningslijst li:last-child { border-bottom: 0; }
.bemanningslijst .rolnaam { margin-left: auto; color: #79572f; font-size: 13.5px; }
.stip { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: #9a8258; }
.stip.aan { background: #6f8f3e; box-shadow: 0 0 7px rgba(150,200,90,.7); }

.wachtkamer { text-align: center; }

/* ---------------- invoer en tabellen op papier ---------------- */
.inktveld {
  flex: 1 1 auto; width: 100%; min-height: 46px;
  padding: 8px 8px; font-family: 'IM Fell English', Georgia, serif; font-size: 19px;
  color: #2c1b0c; background: rgba(255,248,230,.24);
  border: 0; border-bottom: 1px solid rgba(96,66,30,.4); border-radius: 0;
  -webkit-appearance: none; appearance: none;
}
.inktveld::placeholder { color: #a98c5f; font-family: 'EB Garamond', serif;
                         font-style: italic; font-size: 16px; }
.inktveld:focus { outline: 0; background: rgba(255,248,230,.42);
                  border-bottom-color: rgba(122,42,26,.6); }

.mijndeel { margin: 14px 0 4px; padding: 12px 14px;
            background: rgba(120,86,40,.09);
            border-top: 1px solid rgba(96,66,30,.22);
            border-bottom: 1px solid rgba(96,66,30,.22); }

.tabel { width: 100%; border-collapse: collapse; font-size: 16px; }
.tabel th { text-align: left; font-weight: 400; font-style: italic;
            color: #79572f; font-size: 13.5px; padding: 0 8px 6px 0; }
.tabel td { padding: 6px 8px 6px 0; border-bottom: 1px solid rgba(96,66,30,.18); }
.tabel tr:last-child td { border-bottom: 0; }
.tabel b { font-family: 'IM Fell English', serif; font-size: 19px; }

.raster { border-collapse: collapse; margin: 0 auto; }
.raster td {
  width: 56px; height: 50px; text-align: center; vertical-align: middle;
  font-family: 'IM Fell English', Georgia, serif; font-size: 21px; color: #33200f;
  border: 1px solid rgba(96,66,30,.32);
}

/* ---------------- wacht II: het spiegelglas ---------------- */
.spotnu { margin: 4px 0 16px; text-align: center; }
.spotnaam { font-family: 'IM Fell English', Georgia, serif; font-size: 27px; line-height: 1.25;
            color: #2b1a0c; margin: 2px 0 16px; }
.fotoknop { display: inline-flex; align-items: center; justify-content: center; gap: 9px;
            width: 100%; box-sizing: border-box; padding: 15px 18px; cursor: pointer;
            border: 1px solid rgba(72,46,18,.5); border-radius: 3px; color: #f3e6c8;
            background: linear-gradient(#6b4a22, #4e3416); font-family: 'IM Fell English', serif;
            font-size: 19px; box-shadow: 0 2px 5px rgba(40,24,8,.3), inset 0 1px 0 rgba(255,232,190,.18); }
.fotoknop:active { transform: translateY(1px); }
.laatvaren { display: block; width: 100%; margin-top: 12px; padding: 11px 14px; cursor: pointer;
             background: none; border: 1px solid rgba(96,66,30,.32); border-radius: 3px;
             color: #6b4a22; font-family: 'IM Fell English', serif; font-size: 17px; }
.laatvaren .klein { display: block; margin-top: 2px; }

.vangst { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
          gap: 12px; margin-top: 6px; }
.vangstuk { margin: 0; }
.vangstuk img, .geenfoto { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
            border: 1px solid rgba(96,66,30,.35); border-radius: 2px;
            box-shadow: 0 2px 5px rgba(40,24,8,.22); }
.geenfoto { display: flex; align-items: center; justify-content: center; background: rgba(96,66,30,.08);
            color: #8a6e46; font-size: 13px; font-style: italic; }
.vangstuk figcaption { margin-top: 6px; font-size: 14px; line-height: 1.3; color: #4a3218; }
.vangstuk figcaption span { display: block; color: #79572f; font-style: italic; font-size: 13px; }

/* het woord dat de kapitein naliet */
.notitie--woord { text-align: center; }
.gavewoord { display: block; margin: 8px 0 6px; font-family: 'IM Fell English', Georgia, serif;
             font-size: 31px; line-height: 1.1; letter-spacing: .04em; color: #2b1a0c; }
.notitie--woord .klein { display: block; }

.stippel { border-bottom: 1px dotted rgba(96,66,30,.45) !important; width: 55%; }

/* een kladregel om zelf in te schrijven */
.kladveld { width: 100%; min-width: 74px; box-sizing: border-box; padding: 2px 2px 3px;
            background: none; border: 0; border-bottom: 1px dotted rgba(96,66,30,.5);
            font-family: 'IM Fell English', Georgia, serif; font-size: 17px; color: #2f4372;
            -webkit-appearance: none; border-radius: 0; }
.kladveld::placeholder { color: rgba(96,66,30,.4); letter-spacing: .12em; }
.kladveld:focus { outline: none; border-bottom-color: #2f4372;
                  background: linear-gradient(rgba(47,67,114,0), rgba(47,67,114,.06)); }

/* het seinboek van den chirurgijn */
.seinboek { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
            gap: 4px 8px; margin: 6px 0 2px; }
.seinboek span { font-size: 15px; letter-spacing: .06em; color: #4a3218; white-space: nowrap; }
.seinboek b { font-family: 'IM Fell English', serif; font-size: 17px; margin-right: 4px; }

/* een streepje bovenin wanneer de wal buiten bereik is */
.bereik { position: fixed; top: 0; left: 0; right: 0; z-index: 60; display: none;
          align-items: center; justify-content: center; gap: 8px;
          padding: 7px 14px; padding-top: max(7px, env(safe-area-inset-top));
          background: rgba(58,28,18,.94); color: #f0d9b4; font-size: 14px;
          font-family: 'IM Fell English', Georgia, serif; letter-spacing: .02em;
          box-shadow: 0 2px 10px rgba(0,0,0,.45); }
.bereik--uit { display: flex; }
.bereikstip { width: 8px; height: 8px; border-radius: 50%; background: #c86a4a;
              box-shadow: 0 0 6px rgba(200,106,74,.9); animation: bereikklop 1.6s ease-in-out infinite; }
@keyframes bereikklop { 0%,100% { opacity: 1 } 50% { opacity: .25 } }

/* de kaars flakkert op zoodra de kapitein een woord bij het licht legt */
.kaars--nieuw { animation: kaarsroep 1.5s ease-in-out 6; }
@keyframes kaarsroep {
  0%, 100% { filter: none; }
  45%      { filter: brightness(1.28) drop-shadow(0 0 26px rgba(255,196,110,.85)); }
}

/* wat op papier ligt, ligt niet op het scherm */
.oppapier { display: flex; align-items: center; gap: 11px; margin: 14px 0 6px;
            padding: 13px 15px; border: 1px dashed rgba(96,66,30,.45); border-radius: 3px;
            background: rgba(120,90,48,.07);
            font-family: 'IM Fell English', Georgia, serif; font-size: 17px; color: #6b4a22; }
.oppapiermerk { flex: 0 0 auto; width: 20px; height: 25px; border-radius: 1px;
                background: linear-gradient(160deg, #efe6cd, #d9c9a4);
                border: 1px solid rgba(96,66,30,.4);
                box-shadow: 2px 2px 0 rgba(96,66,30,.18); transform: rotate(-5deg); }

/* het scheepsboek */
.boekpost { padding: 11px 0; border-bottom: 1px solid rgba(96,66,30,.18); }
.boekpost:last-child { border-bottom: 0; }
.boekpost h3 { margin: 0 0 5px; font-family: 'IM Fell English', Georgia, serif; font-weight: 400;
               font-size: 19px; color: #6b4a22; }
.boekpost p { margin: 0 0 4px; font-size: 15.5px; line-height: 1.5; color: #33200f; }
.boekpost p:last-child { margin-bottom: 0; }
.boekpost i { color: #79572f; font-size: 14.5px; }
.boekbij { color: #7a6038; font-size: 14px; font-style: italic; }

/* de kompasroos van den stuurman */
.roos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px 12px; margin: 8px 0 2px;
        counter-reset: streek -1; }
.roos span { position: relative; font-size: 13.5px; line-height: 1.7; color: #4a3218;
             padding-left: 26px; white-space: nowrap; }
.roos span::before { counter-increment: streek; content: 'b7';
                     position: absolute; left: 0; width: 20px; text-align: right;
                     color: #b4a07c; font-size: 11.5px; }
.roos span.hoofd { font-weight: 600; color: #2b1a0c; }
.roos span.hoofd::before { content: counter(streek); color: #6b4a22; }

/* de letterring van den konstabel */
.letterring { display: flex; flex-wrap: wrap; gap: 3px; margin: 8px 0 2px; }
.letterring span { flex: 0 0 auto; min-width: 25px; padding: 5px 0; text-align: center;
                   border: 1px solid rgba(96,66,30,.3); border-radius: 2px;
                   background: rgba(120,90,48,.07);
                   font-family: 'IM Fell English', Georgia, serif; font-size: 16px; color: #2b1a0c; }
.letterring span.om { opacity: .4; font-style: italic; border-style: dashed; }

/* het deuntje */
.deuntje { margin: 8px 0 4px; font-family: 'IM Fell English', Georgia, serif;
           font-size: 19px; line-height: 1.75; color: #33200f; }
.deuntje div { padding-left: 14px; text-indent: -14px; }

.journaalregels { margin-top: 4px; }
.journaalregel { display: flex; gap: 12px; padding: 9px 0;
                 border-bottom: 1px solid rgba(96,66,30,.18); font-size: 16.5px; line-height: 1.45; }
.journaalregel:last-child { border-bottom: 0; }
.journaalregel .datum { flex: 0 0 76px; font-family: 'IM Fell English', serif;
                        color: #79572f; font-size: 15px; }

/* ---------------- het bureaublad: de stukken als menu ---------------- */
.bureaublad { display: flex; flex-direction: column; align-items: center;
              gap: 15px; padding: 0 0 6px; }

.stapel {
  position: relative; width: 202px; flex: 0 0 auto;
  background: none; border: 0; padding: 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .16s ease;
}
.stapel:active { transform: scale(.975); }

/* alles op tafel past altijd in beeld: main krijgt dan de hoogte die er over is */
#tafel.opbureau { display: flex; flex-direction: column; justify-content: center;
                  width: 100%; box-sizing: border-box; overflow: hidden; }
/* naast elkaar: twee kolommen over de volle breedte, de stukken iets smaller */
.bureaublad--breed {
  display: grid; grid-template-columns: repeat(2, minmax(0, 202px));
  justify-content: center; align-items: start;
  column-gap: 14px; row-gap: 22px; padding-right: 20px;
}
.bureaublad--breed .stapel { margin-left: 0 !important; width: 100%; }
.bureaublad--breed .mini { width: 100%; }
.bureaublad--breed .minititel { padding: 10px 12px; }
.bureaublad--breed .stapel:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center;
                                                       width: calc((100% - 14px) / 2); }

.mini { position: absolute; width: 202px; height: 118px; display: block; }
.mini .velpapier { inset: 0; }
/* de patronen op tafelformaat, zodat een klein stukje er hetzelfde uitziet */
.mini .velpapier.journaal { background-size: 150px 150px, auto, 340px 340px, auto, auto, auto; }
.mini .velpapier.lijst    { background-size: 150px 150px, auto, auto, 340px 340px, auto, auto; }
.mini .velpapier          { background-size: 150px 150px, 340px 340px, auto, auto, auto; }
.minititel {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 10px 16px; text-align: center; text-wrap: balance;
  font-family: 'IM Fell English', Georgia, serif; font-size: 17.5px; line-height: 1.18;
  color: #2c1b0c;
}
.minizegel {
  position: absolute; right: 13px; bottom: 11px; z-index: 2;
  width: 17px; height: 17px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #b8442a, #7d2413);
  box-shadow: inset 0 -2px 3px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.5);
}
.stapel--klaar .minititel { color: #6b563a; }
/* ligt er nog een stuk overheen, dan staat de titel in het stuk dat zichtbaar blijft */
.mini--bedekt .minititel { bottom: 44px; padding-top: 6px; padding-bottom: 4px; }

/* het ongebroken lakzegel: lees mij eerst */
.lakzegel {
  position: absolute; left: 50%; bottom: -15px; z-index: 3;
  width: 42px; height: 42px; margin-left: -21px; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%,
    #cc5f40 0%, #a83b21 38%, #79210f 72%, #4a1206 100%);
  display: flex; align-items: center; justify-content: center;
  animation: zegelklopt 2.9s ease-in-out infinite;
}
.lakzegel::before {
  content: ""; width: 21px; height: 21px; border-radius: 50%;
  border: 1.5px solid rgba(255,198,168,.3);
}
.lakzegel::after {
  content: ""; position: absolute; width: 11px; height: 11px;
  background: rgba(58,12,3,.45); transform: rotate(45deg);
}
@keyframes zegelklopt {
  0%, 100% { box-shadow: 0 3px 8px rgba(0,0,0,.62), inset 0 -3px 6px rgba(0,0,0,.45),
                         0 0 0 0 rgba(255,178,98,.45); }
  55%      { box-shadow: 0 3px 8px rgba(0,0,0,.62), inset 0 -3px 6px rgba(0,0,0,.45),
                         0 0 0 12px rgba(255,178,98,0); }
}
/* verbroken: gelezen */
.lakzegel--open {
  animation: none; opacity: .55;
  background: radial-gradient(circle at 34% 28%, #8d4630 0%, #6e2816 44%, #3f1006 100%);
  box-shadow: 0 2px 5px rgba(0,0,0,.55), inset 0 -2px 5px rgba(0,0,0,.45);
}
.lakzegel--open::before { border-color: rgba(255,198,168,.14); }
.lakzegel--open::after {
  width: 2px; height: 40px; background: rgba(20,6,2,.6);
  transform: rotate(14deg);
}

.tafelwenk {
  margin: 2px 0 0; font-style: italic; font-size: 14.5px; letter-spacing: .3px;
  color: rgba(208,178,128,.5); text-shadow: 0 1px 4px rgba(0,0,0,.8);
}

.terugknop {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; min-height: 46px; margin: 0 0 20px; padding: 10px 16px;
  background: linear-gradient(rgba(255,220,160,.06), rgba(0,0,0,.16));
  border: 1px solid rgba(140,105,58,.42); border-radius: 3px;
  color: #c8a874; font-family: 'IM Fell English', serif; font-size: 16px;
  letter-spacing: .3px; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.terugknop--onder { margin: 4px 0 10px; }
.terugknop:active { background: rgba(255,220,160,.1); }

@media (max-width: 360px) {
  .stapel { width: 186px; }
  .mini { width: 186px; }
}

.kaarsknop {
  display: block; width: 100%; margin-top: 12px; min-height: 46px;
  background: none; border: 1px dashed rgba(122,90,42,.5); border-radius: 2px;
  color: #79572f; font-family: 'EB Garamond', serif; font-style: italic;
  font-size: 15.5px; cursor: pointer;
}

/* ================================================================ afwerking */
:root {
  --inkt: #2c1b0c; --inkt-zacht: #4a3018; --sepia: #79572f; --sepia-licht: #9b7a4d;
  --lak: #9c3620; --lak-donker: #6e2010; --rood-inkt: #7a2a18;
  --lijn: rgba(96,66,30,.24); --lijn-sterk: rgba(58,36,14,.45);
  --zacht: cubic-bezier(.2,.75,.25,1);
}

/* tekst die mooier zet: echte kleinkapitalen, ligaturen, en vet dat niet opgeblazen oogt */
body { font-kerning: normal; font-variant-ligatures: common-ligatures; text-rendering: optimizeLegibility;
       -webkit-font-smoothing: antialiased; }
b, strong { font-weight: 600; }
.velinhoud p b, .kantlijn b { font-weight: 600; color: #24160a; }
.getal, .tabel--getallen td, .telling b, .melding b { font-variant-numeric: lining-nums tabular-nums; }
::selection { background: rgba(156,54,32,.22); }

/* toetsenbordfocus goed zichtbaar, ook op het donkere hout */
button:focus-visible, .voorwerp:focus-visible, select:focus-visible, a:focus-visible {
  outline: 2px solid rgba(232,184,110,.85); outline-offset: 3px; border-radius: 3px;
}
.velinhoud button:focus-visible, .velinhoud select:focus-visible { outline-color: rgba(156,54,32,.7); }
button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

/* geen schuifbalk: die maakt de tafel smaller zodra een blad langer is dan het scherm,
   en dan schuift de kandelaar opzij. Scrollen gaat gewoon met vinger of muiswiel. */
html { scrollbar-width: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* iPhone: 100vh is het scherm zónder de werkbalk van Safari, en dus te hoog; dan valt de onderkant
   van de tafel (rolkaart en scheepsboek) net buiten beeld. dvh is wat er werkelijk te zien is. */
body { min-height: 100vh; min-height: 100dvh; }

/* ---------------------------------------------------------------- papier */
.velvouw { opacity: .42; height: 18px; }
.velinhoud { padding: 30px 26px 26px; }
.velinhoud > :first-child { margin-top: 0; }
h1 { letter-spacing: -.005em; text-wrap: balance; }
h2 { font-size: 23px; line-height: 1.2; text-wrap: balance; }
p { text-wrap: pretty; hyphens: manual; }

/* een regeltje kleinkapitalen boven een titel */
.bovenschrift {
  margin: 0 0 7px; font-size: 13.5px; line-height: 1.3; font-style: normal;
  font-variant: small-caps; letter-spacing: .14em; color: var(--sepia);
}
/* een sierlijn met een ruitje in het midden */
.sier { display: flex; align-items: center; gap: 10px; margin: 15px 0 19px; }
.sier::before, .sier::after { content: ""; flex: 1 1 auto; height: 1px;
  background: linear-gradient(90deg, rgba(96,66,30,0), rgba(96,66,30,.42)); }
.sier::after { background: linear-gradient(90deg, rgba(96,66,30,.42), rgba(96,66,30,0)); }
.sier span { flex: 0 0 auto; width: 6px; height: 6px; transform: rotate(45deg);
  border: 1px solid rgba(122,42,26,.6); background: rgba(156,54,32,.12); }

.kopje { margin: 18px 0 8px; font-size: 14px; font-style: normal; font-variant: small-caps;
         letter-spacing: .12em; color: #6b4a22; }
.mijndeel > .kopje:first-child { margin-top: 0; }
.opdracht { margin-bottom: 16px; }
.bijschrift { margin: 10px 0 8px; }
.vraag { margin: 20px 0 2px; font-family: 'IM Fell English', Georgia, serif; font-size: 19px; color: var(--inkt); }
.naschrift { text-align: center; }

/* de openingsbrief en het eerste scherm: geschept, ivoorkleurig papier met kettinglijnen */
.velpapier.brief {
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27260%27%20height%3D%27260%27%3E%0A%20%3Cfilter%20id%3D%27v%27%3E%0A%20%20%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.72%27%20numOctaves%3D%274%27%20seed%3D%279%27%20stitchTiles%3D%27stitch%27%20result%3D%27t%27%2F%3E%0A%20%20%3CfeColorMatrix%20in%3D%27t%27%20type%3D%27matrix%27%20values%3D%270%200%200%200%200.36%200%200%200%200%200.26%200%200%200%200%200.13%200.9%200%200%200%20-0.38%27%2F%3E%0A%20%3C%2Ffilter%3E%0A%20%3Crect%20width%3D%27260%27%20height%3D%27260%27%20filter%3D%27url%28%23v%29%27%2F%3E%0A%3C%2Fsvg%3E"),
    repeating-linear-gradient(90deg, rgba(120,90,50,.075) 0 1px, rgba(0,0,0,0) 1px 27px),
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27600%27%20height%3D%27600%27%3E%0A%20%3Cfilter%20id%3D%27s%27%3E%0A%20%20%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.009%27%20numOctaves%3D%274%27%20seed%3D%2723%27%20stitchTiles%3D%27stitch%27%20result%3D%27t%27%2F%3E%0A%20%20%3CfeColorMatrix%20in%3D%27t%27%20type%3D%27matrix%27%20values%3D%270%200%200%200%200.42%200%200%200%200%200.29%200%200%200%200%200.11%201.1%200%200%200%20-0.62%27%2F%3E%0A%20%3C%2Ffilter%3E%0A%20%3Crect%20width%3D%27600%27%20height%3D%27600%27%20filter%3D%27url%28%23s%29%27%2F%3E%0A%3C%2Fsvg%3E"),
    linear-gradient(208deg, rgba(255,238,200,.3) 0%, rgba(0,0,0,0) 40%, rgba(24,12,2,.30) 100%),
    radial-gradient(70% 52% at 78% 8%, rgba(255,252,238,.55) 0%, rgba(255,252,238,0) 58%),
    linear-gradient(160deg, #ece0c4 0%, #e0d0ab 48%, #c4ae84 100%);
  background-size: 260px 260px, auto, 600px 600px, auto, auto, auto;
}

/* een opengeslagen blad ligt rechter dan een blad op de stapel */
.leesstapel .vel, .lade .vel, .midblad .vel, .slotblad .vel {
  transform: rotate(calc(var(--d, 0) * .32deg)) !important;
}
.leesstapel .vel + .vel { margin-top: 30px; }

/* ---------------------------------------------------------------- de leesbalk */
body[data-staat="lezen"] #tafel { z-index: 5; }
.leesbalk {
  position: sticky; top: 0; z-index: 20;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px;
  margin: 0 -18px 18px; padding: 9px 12px 9px;
  padding-top: max(9px, env(safe-area-inset-top));
  background: linear-gradient(180deg, rgba(20,11,4,.95), rgba(20,11,4,.86));
  -webkit-backdrop-filter: blur(8px) saturate(1.1); backdrop-filter: blur(8px) saturate(1.1);
  border-bottom: 1px solid rgba(160,120,64,.26);
  box-shadow: 0 8px 18px -6px rgba(0,0,0,.55);
}
.leesterug {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 7px 14px 7px 10px;
  background: rgba(255,220,160,.05); border: 1px solid rgba(170,128,70,.42); border-radius: 21px;
  color: #e3c894; font-family: 'IM Fell English', Georgia, serif; font-size: 16.5px; line-height: 1;
  cursor: pointer; transition: background .15s ease, border-color .15s ease;
}
.leesterug:active { background: rgba(255,220,160,.14); }
.leestitel {
  min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: center;
  font-family: 'IM Fell English', Georgia, serif; font-size: 17px; color: #d6bb88; letter-spacing: .01em;
}
.leeskaars {
  width: 40px; height: 40px; display: grid; place-items: center; cursor: pointer;
  background: rgba(255,220,160,.05); border: 1px solid rgba(170,128,70,.42); border-radius: 50%;
}
.leeskaars .vlamrand { fill: rgba(255,200,120,.2); stroke: #e3c894; stroke-width: 1.2; }
.leeskaars .vlamhart { fill: #f3cf8a; }
.leeskaars .vlamvoet { stroke: #b99765; stroke-width: 1.4; stroke-linecap: round; }
body.nieuwehint .leeskaars { animation: vlamroep 1.5s ease-in-out 6; }
@keyframes vlamroep {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,190,100,0); }
  45% { box-shadow: 0 0 0 7px rgba(255,190,100,.18), 0 0 22px 4px rgba(255,190,100,.45); background: rgba(255,200,120,.2); }
}

.terugknop--onder {
  display: flex; gap: 8px; margin: 26px 0 14px; min-height: 48px;
  background: none; border: 1px solid rgba(140,105,58,.34); color: #c3a26f; font-size: 16px;
}
.terugknop--onder[hidden] { display: none; }

/* ---------------------------------------------------------------- beweging */
@keyframes velin   { from { opacity: 0; translate: 0 22px; } to { opacity: 1; translate: 0 0; } }
@keyframes stapelin { from { opacity: 0; translate: 0 -14px; scale: 1.03; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes vervagen { from { opacity: 0; } to { opacity: 1; } }
.intrede .leesstapel > .vel { animation: velin .5s var(--zacht) both; }
.intrede .leesstapel > .vel:nth-child(2) { animation-delay: .08s; }
.intrede .leesbalk { animation: vervagen .35s ease both; }
.intrede .stapel { animation: stapelin .5s var(--zacht) both; animation-delay: calc(var(--i, 0) * 70ms); }
.intrede .midblad > .vel, .intrede .slotblad > .vel { animation: velin .6s var(--zacht) both; }
.stapel { transition: transform .16s ease, filter .2s ease; }
@media (hover: hover) {
  .stapel:hover { filter: brightness(1.04); translate: 0 -2px; }
  .naamknop:hover, .vinkrij:hover { background: rgba(140,96,36,.06); }
}

/* ---------------------------------------------------------------- schermen */
.midblad { min-height: 54vh; min-height: 54svh; display: flex; flex-direction: column; justify-content: center;
           padding: 8px 0 18px; }
main.midden { min-height: calc(100vh - 170px); min-height: calc(100svh - 170px); padding-top: 0; }
main.midden .midblad { width: 100%; }
/* in de wachtkamer ligt de tafelvoet eronder: dan geen vaste hoogte, maar het blad midden in de ruimte die er is */
body[data-staat="wacht"] #tafel { display: flex; flex-direction: column; justify-content: center; }
body[data-staat="wacht"] .midblad { min-height: 0; padding: 0 0 6px; }
body[data-staat="wacht"] .midblad .vel { margin-bottom: 0; }
.scanwenk { display: flex; justify-content: center; margin: 22px 0 2px; color: var(--sepia-licht); opacity: .8; }

.wachtkamer { text-align: center; }
.wachtkamer .sier { margin-left: 18%; margin-right: 18%; }
.laden { display: flex; justify-content: center; gap: 7px; padding-top: 22vh; }
.laden .wachtstip { background: rgba(224,190,130,.55); }

/* drie stipjes die rustig ademen: hier gebeurt nog iets */
.wachtop { display: block; text-align: center; }
.wachtstip { display: inline-block; vertical-align: middle; margin: 0 2px; width: 5px; height: 5px; border-radius: 50%;
             background: rgba(122,87,47,.6); animation: adem 1.6s ease-in-out infinite; }
.wachtstip:nth-child(2) { animation-delay: .2s; }
.wachtstip:nth-child(3) { animation-delay: .4s; margin-right: 8px; }
@keyframes adem { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.1); } }

/* als een wacht volbracht is */
.slotblad { padding: 10px 0 20px; }
.slotblad .velinhoud { text-align: left; }
.slotblad .bovenschrift, .slotblad h1 { text-align: center; }
.slotblad h1 { font-size: 34px; }
.slotblad .wachtop { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--lijn);
                     font-size: 15px; color: var(--sepia); }
.einde { margin: 20px 0 0; text-align: center; font-size: 30px; color: var(--rood-inkt); opacity: .8; }

/* het wachtende, verzegelde blad */
.verzegeld { display: flex; justify-content: center; padding: 8px 0 14px; }
.verzegeld .lakzegel { position: relative; left: auto; bottom: auto; margin: 0; }
.lakzegel--groot { width: 58px; height: 58px; }
.lakzegel--groot::before { width: 30px; height: 30px; }
.lakzegel--groot::after { width: 15px; height: 15px; }

/* ---------------------------------------------------------------- naam kiezen */
.naamknop { transition: background .15s ease; position: relative; }
.naamknop .teller { font-family: 'IM Fell English', Georgia, serif; font-style: normal; font-size: 15px;
                    color: var(--sepia-licht); flex-basis: 30px; }
.naampijl { flex: 0 0 auto; width: 8px; height: 8px; margin-right: 6px; opacity: .45;
            border-top: 1.5px solid var(--sepia); border-right: 1.5px solid var(--sepia); transform: rotate(45deg); }
.naamknop.gekozen .naampijl { opacity: 0; }
.naamknop.gekozen { background: rgba(156,54,32,.08); }
.naamknop.gekozen .naam { color: var(--rood-inkt); }
.naamknop[disabled] { cursor: default; }
.eigenhand { color: #6b4a22; min-height: 44px; }
.eigenform { margin-top: 12px; }
.eigenform .invoer { margin-top: 6px; }

/* ---------------------------------------------------------------- invoer */
.invoer { margin: 20px 0 4px; }
.inktveld {
  display: block; width: 100%; box-sizing: border-box; min-height: 54px; padding: 13px 2px 8px;
  background: linear-gradient(rgba(255,250,236,0) 55%, rgba(255,250,236,.26));
  border: 0; border-bottom: 1.5px solid var(--lijn-sterk); border-radius: 0;
  font-family: 'IM Fell English', Georgia, serif; font-size: 24px; line-height: 1.2; color: var(--inkt);
  letter-spacing: .02em; transition: border-color .2s ease, background .2s ease;
}
.inktveld::placeholder { font-family: 'EB Garamond', Georgia, serif; font-style: italic; font-size: 17.5px;
                         color: rgba(110,78,40,.66); letter-spacing: 0; }
.inktveld:focus { outline: 0; border-bottom-color: var(--rood-inkt);
                  background: linear-gradient(rgba(255,250,236,0) 40%, rgba(255,246,226,.45)); }
.inktveld.leeg { animation: schud .45s ease; border-bottom-color: var(--rood-inkt); }

/* de keuzelijsten van de monsterrol */
.rijen { border-top: 1px solid var(--lijn); }
.wachtrij { padding: 8px 2px; gap: 12px; cursor: pointer; }
.wachtrij:first-of-type { border-top: 0; }
.glas { flex: 0 0 34px; font-size: 17px; color: var(--sepia-licht); }
.wachtrij select {
  min-height: 46px; padding: 8px 30px 8px 10px; font-size: 18.5px; cursor: pointer;
  background-color: rgba(255,250,236,.22); border: 1px solid rgba(96,66,30,.22); border-radius: 2px;
  color: rgba(110,78,40,.7); font-style: italic;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2379572f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center;
}
.wachtrij select.gevuld { color: var(--inkt); font-style: normal; background-color: rgba(255,250,236,.4);
                          border-color: rgba(96,66,30,.34); }
.wachtrij select:focus { outline: 0; border-color: var(--rood-inkt); }

/* ---------------------------------------------------------------- knoppen */
.zegelknop > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zegelknop { padding: 13px 12px; gap: 10px; font-size: 18px; letter-spacing: .15px; }
.zegelknop { margin-top: 20px; min-height: 56px; transition: transform .1s ease, box-shadow .1s ease, filter .2s ease;
             background: linear-gradient(#5e3c1b, #3d250e); }
.zegelknop .lak { transition: transform .2s ease; }
.zegelknop.bezig { filter: saturate(.8) brightness(.92); cursor: progress; }
.zegelknop.bezig .lak { animation: lakdruk .9s ease-in-out infinite; }
@keyframes lakdruk { 0%, 100% { transform: scale(1); } 50% { transform: scale(.78); } }
@media (hover: hover) { .zegelknop:hover { filter: brightness(1.08); } }

/* ---------------------------------------------------------------- meldingen */
.melding { border-radius: 2px; }
.melding--fout {
  margin-top: 16px; padding: 12px 14px 12px 16px; border: 0; border-left: 3px solid #8a2d19;
  background: rgba(138,45,25,.075); color: #5c1e10; font-style: italic; font-size: 16.5px;
}
.melding--fout b { font-style: normal; font-family: 'EB Garamond', Georgia, serif; font-weight: 600; font-size: 17.5px; }
@media (max-width: 400px) { .velinhoud { padding-left: 22px; padding-right: 22px; } }
.melding--fout.melding--vers { animation: schud .5s ease; }
@keyframes schud {
  0%, 100% { translate: 0 0; } 18% { translate: -6px 0; } 36% { translate: 5px 0; }
  54% { translate: -3px 0; } 72% { translate: 2px 0; }
}
.melding--goed {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin-top: 18px; padding: 12px 10px; border: 0; background: none;
  border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn);
  font-family: 'IM Fell English', Georgia, serif; font-size: 18.5px; color: var(--inkt);
}
.stempel {
  position: relative; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #cc5f40 0%, #a83b21 38%, #79210f 72%, #4a1206 100%);
  box-shadow: 0 2px 5px rgba(0,0,0,.45), inset 0 -2px 5px rgba(0,0,0,.4);
}
.stempel::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; border: 1.2px solid rgba(255,198,168,.32); }
.stempel::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
                  background: rgba(58,12,3,.5); transform: rotate(45deg); }
.melding--vers .stempel { animation: stempeldruk .6s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes stempeldruk { from { opacity: 0; scale: 2.2; rotate: -18deg; } 60% { opacity: 1; } to { opacity: 1; scale: 1; rotate: 0deg; } }
.poging { margin-top: 12px; text-align: center; }

/* ---------------------------------------------------------------- tellers */
.telling { display: flex; flex-direction: column; align-items: center; gap: 9px; margin-top: 20px;
          padding: 14px 10px 4px; border-top: 1px solid var(--lijn); font-size: 16px; color: var(--inkt-zacht);
          text-align: center; }
.telling b { font-family: 'EB Garamond', Georgia, serif; font-size: 18px; font-weight: 600; color: var(--inkt); }
.kralen { display: flex; gap: 8px; }
.kraal { width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid rgba(96,66,30,.45);
         background: rgba(255,250,236,.3); transition: background .3s ease, border-color .3s ease; }
.kraal--vol { border-color: #6e2010;
  background: radial-gradient(circle at 35% 30%, #cc5f40 0%, #a83b21 45%, #6e2010 100%);
  box-shadow: 0 1px 2px rgba(0,0,0,.35); }

/* ---------------------------------------------------------------- vinklijsten */
.vinklijst { border-top: 1px solid var(--lijn); }
.vinkrij {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 54px; padding: 11px 4px;
  background: none; border: 0; border-bottom: 1px solid var(--lijn); text-align: left; cursor: pointer;
  color: inherit; font: inherit; transition: background .15s ease;
}
.vinkvak { position: relative; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 2px;
           border: 1.5px solid rgba(58,36,14,.5); background: rgba(255,250,236,.35); }
.vinkvak::after {
  content: ""; position: absolute; left: -2px; top: -7px; width: 28px; height: 28px; opacity: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M5 15.5c2.2 1.4 4 3.4 5.4 6.2C13 14.4 17.6 8.2 24.5 3.2' fill='none' stroke='%237a2a18' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  clip-path: inset(0 100% 0 0); transition: clip-path .32s ease, opacity .1s ease;
}
.vinkrij--aan .vinkvak::after { opacity: 1; clip-path: inset(0 0 0 0); }
.vinknaam { display: flex; flex-direction: column; font-family: 'IM Fell English', Georgia, serif;
            font-size: 19.5px; line-height: 1.2; color: #33200f; }
.vinkbij { margin-top: 2px; font-family: 'EB Garamond', Georgia, serif; font-style: italic;
           font-size: 14.5px; color: var(--sepia); }
.vinkrij--aan .vinknaam { color: #5a3d20; }
.vinklijst--stukken .vinknaam { flex-direction: row; gap: 6px; align-items: baseline; }
.stukteeken { font-family: 'IM Fell English', Georgia, serif; font-style: normal; letter-spacing: .04em; }

/* ---------------------------------------------------------------- wie ziet wat */
.wieziet { list-style: none; margin: -4px 0 16px; padding: 0 0 12px; border-bottom: 1px solid var(--lijn); }
.wieziet li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 1px 0;
              font-size: 15px; line-height: 1.45; }
.wierol { font-variant: small-caps; letter-spacing: .06em; color: #6b4a22; }
.wiewat { font-style: italic; color: var(--sepia); }
.wieziet li.ik .wierol { color: var(--rood-inkt); }
.wieziet li.ik .wierol::before { content: "\25C6"; display: inline-block; margin-right: 6px; font-size: 8px;
                                 vertical-align: 2px; color: var(--lak); }

/* ---------------------------------------------------------------- het eigen stuk */
.mijndeel { margin: 16px 0 6px; padding: 16px 14px 14px; border: 1px solid rgba(96,66,30,.2); border-radius: 2px;
            background: linear-gradient(rgba(120,86,40,.06), rgba(120,86,40,.1));
            box-shadow: inset 0 1px 3px rgba(60,36,10,.08); }
.tabel { font-size: 16.5px; }
.tabel th { font-style: normal; font-variant: small-caps; letter-spacing: .08em; font-size: 13.5px; color: #6b4a22;
            padding-bottom: 8px; }
.tabel td { padding: 8px 8px 8px 0; vertical-align: baseline; }
.tabel .klein-rom { width: 38px; font-family: 'IM Fell English', Georgia, serif; color: var(--sepia-licht); font-size: 16px; }
.letterteeken { font-family: 'IM Fell English', Georgia, serif; font-size: 22px; line-height: 1; color: var(--inkt); }
.tabel--ruim td { padding-top: 9px; padding-bottom: 9px; }
.kolkop { font-family: 'IM Fell English', Georgia, serif; font-size: 17px; color: var(--inkt); }
.tabel--rekening { font-size: 16px; }
.tabel--rekening .dag, .tabel--getallen .dag { white-space: nowrap; font-size: 14.5px; color: var(--inkt-zacht); }
.tabel--rekening td:nth-child(2) { font-size: 17px; }
.kladveld { font-size: 18px; min-height: 30px; }
.raster td { width: 58px; height: 52px; background: rgba(255,250,236,.22); }
.raster td.begin { position: relative; background: rgba(150,42,29,.10); box-shadow: inset 0 0 0 2px rgba(150,42,29,.55); }
.raster .pijl { position: absolute; right: calc(100% + 6px); top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 1px; pointer-events: none; }
.raster .pijl svg { width: 34px; height: 16px; display: block; }
.raster .pijl i { font-family: 'IM Fell English', Georgia, serif; font-style: italic; font-size: 13px;
  line-height: 1; color: #962a1d; }

/* het seinboek: stippen en strepen die men ook bij kaarslicht leest */
.seinboek { grid-template-columns: repeat(3, 1fr); gap: 7px 10px; margin: 10px 0 4px; }
.seinletter { display: flex; align-items: center; gap: 8px; min-height: 24px; }
.seinletter b { flex: 0 0 16px; margin: 0; font-family: 'IM Fell English', Georgia, serif; font-weight: 400;
                font-size: 18px; color: var(--inkt); }
.seincode { display: inline-flex; align-items: center; gap: 3.5px; }
.seincode i { display: block; background: #3a2411; }
.seincode i.stip { width: 5px; height: 5px; border-radius: 50%; }
.seincode i.streep { width: 13px; height: 3.5px; border-radius: 2px; }

/* de roos: twee kolommen, van boven naar beneden te tellen */
.roos { grid-auto-flow: column; grid-template-rows: repeat(16, auto); gap: 1px 14px; margin-top: 10px; }
.roos span { font-size: 14px; line-height: 1.75; }
.roos span.hoofd { color: var(--inkt); font-weight: 600; }
.roos span::before { content: "\00b7"; color: rgba(122,87,47,.5); }
.roos span.hoofd::before { content: counter(streek); color: #6b4a22; }

/* de letterring als echte ring */
.letterring { display: block; margin: 12px auto 4px; width: min(100%, 290px); }
.letterring svg { display: block; width: 100%; height: auto; overflow: visible; }
.ringrand { fill: none; stroke: rgba(96,66,30,.42); stroke-width: 1.2; }
.ringbinnen { fill: rgba(120,86,40,.06); stroke: rgba(96,66,30,.18); stroke-width: 1; }
.ringspaak { stroke: rgba(96,66,30,.22); stroke-width: 1; }
.ringletter { font-family: 'IM Fell English', Georgia, serif; font-size: 18px; fill: var(--inkt);
              text-anchor: middle; dominant-baseline: central; }
.ringmidden { font-family: 'EB Garamond', Georgia, serif; font-style: italic; font-size: 12.5px; fill: var(--sepia);
              text-anchor: middle; dominant-baseline: central; }

.letterrij { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.letterrij span { font-family: 'IM Fell English', Georgia, serif; font-size: 20px; color: var(--inkt-zacht);
                  min-width: 24px; text-align: center; border-bottom: 1px solid var(--lijn); }

/* het deuntje */
.deuntje { font-size: clamp(16px, 4.4vw, 19.5px); line-height: 1.7; }
.deuntje div { padding-left: 16px; text-indent: -16px; }
.deuntje--blad { font-style: italic; }

/* het journaal */
.journaalregel { gap: 12px; padding: 10px 0; }
.journaalregel .datum { flex: 0 0 82px; white-space: nowrap; font-size: 14px; font-variant: small-caps;
                        letter-spacing: .05em; padding-top: 2px; }

/* het raadsel van de zesde wacht */
.raadsel { margin: 6px 0 14px; padding: 16px 8px; text-align: center;
           font-family: 'IM Fell English', Georgia, serif; font-style: italic; font-size: 21px; line-height: 1.45;
           color: var(--inkt); border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); }

/* het slot: waar de fles ligt */
.bergregel { font-family: 'IM Fell English', Georgia, serif; font-size: 21px; line-height: 1.45; color: var(--inkt); }
.ondertekening { margin-top: 16px; text-align: right; font-style: italic; color: var(--sepia); }

/* ---------------------------------------------------------------- hints bij de kaars */
.kantlijn--kaars {
  position: relative; border-left-color: rgba(176,112,40,.7);
  background: linear-gradient(90deg, rgba(255,200,120,.16), rgba(255,200,120,0) 85%);
  padding-top: 6px; padding-bottom: 6px;
}
.aanwijzingen { margin: 18px 0 4px; }
.aanwijzingen .kantlijn--kaars + .kantlijn--kaars { margin-top: 8px; }
.hintnr { display: inline-block; min-width: 24px; margin-right: 6px; font-family: 'IM Fell English', Georgia, serif;
          font-style: normal; font-size: 14px; color: #a06a2c; }
.hintblok + .hintblok { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--lijn); }
.hintblok .kopje { margin-top: 0; }
.achter { margin-top: 8px; }

/* ---------------------------------------------------------------- de lade */
.lade { transform: translateY(104%); transition: transform .34s var(--zacht);
        border-radius: 14px 14px 0 0; border-top: 0;
        box-shadow: 0 -2px 0 #6b4a22, 0 -24px 48px rgba(0,0,0,.78); overscroll-behavior: contain; }
.lade--open { transform: translateY(0); }
.ladewaas { opacity: 0; transition: opacity .3s ease; }
.ladewaas--open { opacity: 1; }
.greep { width: 46px; height: 5px; margin: 0 auto 18px; background: linear-gradient(#9a7a48, #5a3a18); opacity: .85; }
.ladesluit { margin-top: 10px; min-height: 52px; transition: background .15s ease; }
.ladesluit:active { background: rgba(255,220,160,.08); }

/* de rolkaart in de lade */
.notitie { margin: 18px 0 0; padding: 2px 0 2px 15px; }
.notitiekop { display: block; margin-bottom: 3px; font-size: 13.5px; font-variant: small-caps; letter-spacing: .12em;
              color: var(--rood-inkt); }
.notitie p { margin: 0; font-size: 16.5px; line-height: 1.55; }
.notitie--woord { margin-top: 22px; padding: 16px 14px 14px; text-align: center; border: 1px solid rgba(96,66,30,.3);
                  border-left: 1px solid rgba(96,66,30,.3); background: rgba(255,250,236,.22); border-radius: 2px; }
.gavewoord { margin: 6px 0 8px; font-size: 34px; letter-spacing: .06em; }

/* het scheepsboek */
.boekpost { padding: 13px 0; }
.boekpost h3 { font-size: 18px; margin-bottom: 6px; }
.boekpost p { font-size: 16px; }
.boekpost p > i { display: block; margin-top: 2px; text-align: right; font-size: 14px; }
.boekpost p > i + br { display: none; }
.boekbij { display: block; margin-top: 3px; }

/* ---------------------------------------------------------------- de spiegelglas-wacht */
.spotnu { padding: 6px 0 2px; }
.spotnaam { font-size: 29px; margin: 4px 0 18px; text-wrap: balance; }
.fotoknop { min-height: 56px; border-radius: 2px; transition: filter .2s ease; }
.fotoknop.bezig { filter: saturate(.7) brightness(.9); pointer-events: none; }
.fotostand { margin-top: 12px; font-style: italic; color: var(--sepia); }
.fotostand--bezig::after { content: ""; display: inline-block; width: 5px; height: 5px; margin-left: 8px; border-radius: 50%;
                           background: var(--sepia); vertical-align: middle; animation: adem 1s ease-in-out infinite; }
.laatvaren { min-height: 52px; }

/* ---------------------------------------------------------------- een bericht van den kapitein */
.toestroom {
  position: fixed; left: 50%; top: 0; z-index: 70; width: min(92vw, 420px);
  display: flex; align-items: center; gap: 13px; padding: 13px 16px 13px 14px; margin-top: max(10px, env(safe-area-inset-top));
  text-align: left; cursor: pointer; border: 0; border-radius: 3px; color: var(--inkt);
  font-family: 'EB Garamond', Georgia, serif;
  background:
    linear-gradient(208deg, rgba(255,238,200,.4), rgba(0,0,0,0) 45%, rgba(40,20,4,.18)),
    linear-gradient(160deg, #e9dcbc, #d6c49b);
  box-shadow: 0 14px 32px rgba(0,0,0,.55), 0 2px 4px rgba(0,0,0,.35);
  transform: translate(-50%, -140%); visibility: hidden;
  transition: transform .45s var(--zacht), visibility 0s linear .45s;
}
.toestroom--in { transform: translate(-50%, 0); visibility: visible; transition: transform .45s var(--zacht), visibility 0s; }
.toestroomzegel { position: relative; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #cc5f40 0%, #a83b21 38%, #79210f 72%, #4a1206 100%);
  box-shadow: 0 2px 4px rgba(0,0,0,.4), inset 0 -2px 4px rgba(0,0,0,.4); }
.toestroomtekst { display: flex; flex-direction: column; min-width: 0; }
.toestroomtekst b { font-family: 'IM Fell English', Georgia, serif; font-weight: 400; font-size: 17px; }
.toestroomtekst span { font-size: 15px; font-style: italic; color: var(--inkt-zacht);
                       overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------------------------------------------------------- de tafel */
.etiket { text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 0 12px rgba(0,0,0,.6); }
/* in de wachtkamer lokt de rolkaart zachtjes */
body[data-staat="wacht"] .tafelvoet > .etiket:nth-child(2) { animation: lok 2.8s ease-in-out infinite; }
@keyframes lok { 0%, 100% { color: rgba(222,196,150,.72); } 50% { color: #f3dcae;
  text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 0 14px rgba(255,200,120,.55); } }

/* ---------------------------------------------------------------- minder beweging */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
                           transition-duration: .01ms !important; }
}

/* Het hout hangt aan de wortel van de pagina, niet aan de body.
   Anders houdt het op zodra je scrollt. */
html {
  background-color: #35200f;
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27400%27%20height%3D%27400%27%3E%0A%20%3Cfilter%20id%3D%27p%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%0A%20%20%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.85%200.02%27%20numOctaves%3D%273%27%20seed%3D%2731%27%20stitchTiles%3D%27stitch%27%20result%3D%27t%27%2F%3E%0A%20%20%3CfeColorMatrix%20in%3D%27t%27%20type%3D%27matrix%27%20values%3D%270%200%200%200%200%200%200%200%200%200%200%200%200%200%200%202.1%200%200%200%20-1.02%27%2F%3E%0A%20%3C%2Ffilter%3E%0A%20%3Crect%20width%3D%27400%27%20height%3D%27400%27%20filter%3D%27url%28%23p%29%27%2F%3E%0A%3C%2Fsvg%3E"),
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27900%27%20height%3D%27900%27%3E%0A%20%3Cfilter%20id%3D%27w%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%0A%20%20%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.33%200.0055%27%20numOctaves%3D%275%27%20seed%3D%2717%27%20stitchTiles%3D%27stitch%27%20result%3D%27t%27%2F%3E%0A%20%20%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.008%27%20numOctaves%3D%273%27%20seed%3D%274%27%20result%3D%27warp%27%2F%3E%0A%20%20%3CfeDisplacementMap%20in%3D%27t%27%20in2%3D%27warp%27%20scale%3D%2738%27%20xChannelSelector%3D%27R%27%20yChannelSelector%3D%27G%27%20result%3D%27d%27%2F%3E%0A%20%20%3CfeColorMatrix%20in%3D%27d%27%20type%3D%27matrix%27%20values%3D%270%200%200%200%200.04%200%200%200%200%200.022%200%200%200%200%200.008%201.7%200%200%200%20-0.52%27%2F%3E%0A%20%3C%2Ffilter%3E%0A%20%3Crect%20width%3D%27900%27%20height%3D%27900%27%20filter%3D%27url%28%23w%29%27%2F%3E%0A%3C%2Fsvg%3E"),
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.72) 0 2px, rgba(120,86,44,.22) 2px 3.5px, rgba(0,0,0,0) 3.5px 132px),
    linear-gradient(172deg, #3a2512 0%, #271809 46%, #140b04 100%);
  background-size: 400px 400px, 900px 900px, auto, auto;
  background-repeat: repeat, repeat, repeat, no-repeat;
  overflow-x: clip;
}
body.bureau { background: none; }
/* De tafel zelf, met de sporen van jaren gebruik erin. De sporen zijn 'hard-light'-kaarten:
   middengrijs doet niets, donkerder brandt in, lichter slijt uit, en de nerf loopt erdoorheen.
   Ze liggen onder het duister, dus het kaarslicht valt er vanzelf goed op. */
.slijtage {
  background-color: #35200f;
  background-image:
    url(beeld/hout-rb.webp?v=df16e95d),
    url(beeld/hout-lb.webp?v=26fd183f),
    url(beeld/hout-m.webp?v=69e3bda7),
    url(beeld/hout-mo.webp?v=9e88db8f),
    url(beeld/hout-rm.webp?v=c71039c0),
    url(beeld/hout-lm.webp?v=c784cf8b),
    url(beeld/hout-o.webp?v=f19f4085),
    url(beeld/hout-patina.webp?v=41bfe65a),
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27400%27%20height%3D%27400%27%3E%0A%20%3Cfilter%20id%3D%27p%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%0A%20%20%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.85%200.02%27%20numOctaves%3D%273%27%20seed%3D%2731%27%20stitchTiles%3D%27stitch%27%20result%3D%27t%27%2F%3E%0A%20%20%3CfeColorMatrix%20in%3D%27t%27%20type%3D%27matrix%27%20values%3D%270%200%200%200%200%200%200%200%200%200%200%200%200%200%200%202.1%200%200%200%20-1.02%27%2F%3E%0A%20%3C%2Ffilter%3E%0A%20%3Crect%20width%3D%27400%27%20height%3D%27400%27%20filter%3D%27url%28%23p%29%27%2F%3E%0A%3C%2Fsvg%3E"),
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27900%27%20height%3D%27900%27%3E%0A%20%3Cfilter%20id%3D%27w%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%0A%20%20%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.33%200.0055%27%20numOctaves%3D%275%27%20seed%3D%2717%27%20stitchTiles%3D%27stitch%27%20result%3D%27t%27%2F%3E%0A%20%20%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.008%27%20numOctaves%3D%273%27%20seed%3D%274%27%20result%3D%27warp%27%2F%3E%0A%20%20%3CfeDisplacementMap%20in%3D%27t%27%20in2%3D%27warp%27%20scale%3D%2738%27%20xChannelSelector%3D%27R%27%20yChannelSelector%3D%27G%27%20result%3D%27d%27%2F%3E%0A%20%20%3CfeColorMatrix%20in%3D%27d%27%20type%3D%27matrix%27%20values%3D%270%200%200%200%200.04%200%200%200%200%200.022%200%200%200%200%200.008%201.7%200%200%200%20-0.52%27%2F%3E%0A%20%3C%2Ffilter%3E%0A%20%3Crect%20width%3D%27900%27%20height%3D%27900%27%20filter%3D%27url%28%23w%29%27%2F%3E%0A%3C%2Fsvg%3E"),
    repeating-linear-gradient(90deg, rgba(0,0,0,.72) 0 2px, rgba(120,86,44,.22) 2px 3.5px, rgba(0,0,0,0) 3.5px 132px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.2) 0, rgba(0,0,0,.07) 3px, rgba(0,0,0,0) 10px, rgba(0,0,0,0) 118px, rgba(0,0,0,.08) 128px, rgba(0,0,0,.2) 132px),
    repeating-linear-gradient(90deg, rgba(0,0,0,0) 0 132px, rgba(16,7,0,.13) 132px 264px, rgba(92,58,20,.07) 264px 396px, rgba(0,0,0,.07) 396px 528px, rgba(70,40,10,.03) 528px 660px, rgba(12,5,0,.16) 660px 792px, rgba(96,62,24,.05) 792px 924px),
    linear-gradient(172deg, #3a2512 0%, #271809 46%, #140b04 100%);
  background-position:
    right 0 top 0,
    left 0 top 0,
    left 50% top 150px,
    left 50% top 58vh,
    right 0 top 40vh,
    left 0 top 46vh,
    left 50% top calc(100vh - 240px),
    37px 51px,
    0 0,
    0 0,
    0 0,
    0 0,
    0 0,
    0 0;
  background-position:
    right 0 top 0,
    left 0 top 0,
    left 50% top 150px,
    left 50% top 58svh,
    right 0 top 40svh,
    left 0 top 46svh,
    left 50% top calc(100svh - 240px),
    37px 51px,
    0 0,
    0 0,
    0 0,
    0 0,
    0 0,
    0 0;
  background-size: 300px 270px, 250px 300px, 360px 420px, 360px 300px, 110px 240px, 130px 280px, 430px 240px, 300px 300px, 400px 400px, 900px 900px, auto, auto, auto, auto;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat, repeat, repeat, repeat, repeat, no-repeat;
  background-blend-mode: hard-light, hard-light, hard-light, hard-light, hard-light, hard-light, hard-light, hard-light, normal, normal, normal, normal, normal, normal;
}