/* Paws & Clues deel 2 – basisstijl. Alle kleuren en maten als tokens op :root. */

@font-face { font-family: "Poiret One"; src: url("../assets/fonts/poiret-one-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Josefin Sans"; src: url("../assets/fonts/josefin-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Josefin Sans"; src: url("../assets/fonts/josefin-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("../assets/fonts/caveat-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; } /* v0.9.32: handschrift in het boek */

:root {
  --night: #12161f;
  --night-2: #1b2130;
  --wine: #2c1519;
  --gold: #d4a849;
  --gold-light: #f0d38a;
  --gold-dark: #9a6f26;
  --cream: #efe3c8;
  --cream-quiet: #bba98a;
  --hit: #7fc29b;
  --miss: #e07a6b;

  --font-display: "Poiret One", "Futura", "Century Gothic", sans-serif;
  --font-body: "Josefin Sans", "Futura", "Century Gothic", system-ui, sans-serif;

  --bar-h: 52px;
  --gap: 10px;
  --radius: 4px;

  --app-w: 100vw;
  --app-h: 100vh;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--night);
  color: var(--cream);
  font-family: var(--font-body);
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
}

body {
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

#app {
  position: fixed;
  inset: 0;
  height: var(--app-h);
  overflow: hidden;
}

.scene {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}

/* ---------- knoppen ---------- */
.btn {
  font: 600 15px/1 var(--font-body);
  color: var(--cream);
  background: transparent;
  border: 1.5px solid var(--gold);
  border-radius: var(--radius);
  min-height: 40px;
  padding: 10px 14px 8px;
  cursor: var(--cur-hand); cursor: var(--cur-hand-hd);
  touch-action: manipulation;
}
.btn:hover { background: rgba(212, 168, 73, .12); }
.btn:active { background: rgba(212, 168, 73, .24); }
.btn:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }
.btn-primary { background: var(--gold); color: var(--night); border-color: var(--gold-light); font-size: 17px; padding: 14px 22px 12px; }
.btn-primary:hover { background: var(--gold-light); }
.btn-quiet { border-color: rgba(212, 168, 73, .55); }
.btn-icon { width: 44px; padding: 0; font-size: 24px; line-height: 40px; }

/* ---------- startscherm ---------- */
.start {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: radial-gradient(ellipse at 50% 40%, var(--wine), var(--night) 72%);
}
.start-card { max-width: 30em; text-align: center; }
.ornament {
  width: 120px; height: 60px; margin: 0 auto 14px;
  background:
    repeating-conic-gradient(from -90deg at 50% 100%, var(--gold) 0 9deg, transparent 9deg 22.5deg) top / 100% 100% no-repeat;
  -webkit-mask: radial-gradient(circle at 50% 100%, #000 0 58px, transparent 59px);
          mask: radial-gradient(circle at 50% 100%, #000 0 58px, transparent 59px);
}
.title { font: 400 clamp(32px, 8vw, 56px)/1.1 var(--font-display); letter-spacing: .04em; margin: 0; color: var(--gold-light); }
.subtitle { margin: 8px 0 22px; color: var(--cream-quiet); font-size: 16px; }
.intro { margin: 0 0 28px; line-height: 1.55; font-size: 16px; }
.start-foot { margin-top: 28px; }

/* ---------- zoekplaat ---------- */
.plate-viewport {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: #07090d;
  touch-action: none;
  cursor: default;
}
.plate-layer {
  position: absolute;
  left: 0; top: 0;
  transform-origin: 0 0;
  will-change: transform;
  --inv-scale: 1;
}
.plate-img { display: block; width: 100%; height: 100%; pointer-events: none; }
.plate-marks { position: absolute; inset: 0; pointer-events: none; }

/* ---------- hulpmiddelen ---------- */
.version { position: fixed; right: calc(6px + env(safe-area-inset-right, 0px)); bottom: calc(2px + env(safe-area-inset-bottom, 0px)); font-size: 10px; color: rgba(239, 227, 200, .35); pointer-events: none; }
.debug { position: fixed; left: 6px; top: calc(60px + env(safe-area-inset-top, 0px)); max-width: min(360px, 70vw); max-height: 45vh; overflow: auto; margin: 0; padding: 8px; font: 11px/1.3 ui-monospace, Menlo, monospace; color: #cfe; background: rgba(0, 0, 0, .72); border: 1px solid var(--gold-dark); pointer-events: none; z-index: 20; white-space: pre-wrap; }
.errors { position: fixed; left: 8px; right: 8px; bottom: calc(60px + env(safe-area-inset-bottom, 0px)); padding: 10px; background: #5a1a14; color: #fff; font-size: 13px; border: 1px solid var(--miss); z-index: 30; }
.noscript { padding: 24px; }



/* ---------- draai-melding ---------- */
.rotate { position: absolute; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--night); }
.rotate[hidden] { display: none; }
.rotate-card { max-width: 22em; text-align: center; line-height: 1.5; }
.rotate-card strong { display: block; font: 400 28px/1.2 var(--font-display); color: var(--gold-light); margin-bottom: 8px; }
.rotate-card p { margin: 0 0 22px; }
.rotate-phone { width: 46px; height: 78px; margin: 0 auto 20px; border: 2px solid var(--gold); border-radius: 8px; animation: rotate-hint 2.4s ease-in-out infinite; }
@keyframes rotate-hint { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
@media (prefers-reduced-motion: reduce) { .rotate-phone { animation: none; transform: rotate(-90deg); } }

/* ---------- zoekscherm ---------- */
.plate-viewport.is-dragging { cursor: grabbing; }
.plate-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.search { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.plate-area { position: relative; flex: 1; min-height: 0; display: flex; background: radial-gradient(ellipse at 50% 50%, var(--night-2), #06080c 80%); }
.plate-area .plate-viewport { background: transparent; }

.found-outline {
  fill: rgba(240, 211, 138, .22);
  stroke: var(--gold-light);
  stroke-width: calc(4px * var(--inv-scale));
  stroke-linejoin: round;
  animation: outline 1100ms ease-out forwards;
}
@keyframes outline { 0% { opacity: 0; } 15% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }

.ring {
  position: absolute;
  width: calc(46px * var(--inv-scale));
  height: calc(46px * var(--inv-scale));
  margin: calc(-23px * var(--inv-scale)) 0 0 calc(-23px * var(--inv-scale));
  border-radius: 50%;
  pointer-events: none;
}
.ring-miss { border: calc(2.5px * var(--inv-scale)) solid rgba(224, 122, 107, .9); animation: ring-miss 500ms ease-out forwards; }
@keyframes ring-miss { from { transform: scale(.5); opacity: 1; } to { transform: scale(1.15); opacity: 0; } }
.ring-hint {
  width: calc(90px * var(--inv-scale)); height: calc(90px * var(--inv-scale));
  margin: calc(-45px * var(--inv-scale)) 0 0 calc(-45px * var(--inv-scale));
  border: calc(4px * var(--inv-scale)) solid var(--gold-light);
  box-shadow: 0 0 calc(18px * var(--inv-scale)) var(--gold);
  animation: ring-hint 2600ms ease-in-out forwards;
}
@keyframes ring-hint { 0% { transform: scale(2.2); opacity: 0; } 20% { transform: scale(1); opacity: 1; } 40% { transform: scale(.85); } 60% { transform: scale(1); } 80% { opacity: 1; } 100% { transform: scale(1); opacity: 0; } }

/* knoppen in het zoekscherm */
.btn-small { min-height: 34px; padding: 8px 12px 6px; font-size: 13px; }
.btn-hint { background: var(--gold); color: var(--night); border-color: var(--gold-light); font-size: 16px; padding: 11px 18px 9px; }
.btn-hint:hover { background: var(--gold-light); }
.btn-hint:disabled { background: transparent; color: var(--cream-quiet); border-color: rgba(212, 168, 73, .4); cursor: default; }

/* zoeklijst */
.items { list-style: none; margin: 0; padding: 0; }
.items li { position: relative; padding-left: 16px; font-size: 15px; line-height: 1.3; transition: color .3s, opacity .3s; }
.items li::before { content: ""; position: absolute; left: 0; top: .42em; width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg); }
.items li.is-found { color: var(--cream-quiet); opacity: .55; text-decoration: line-through; text-decoration-color: var(--gold); }
.items li.just-found { animation: just-found 900ms ease-out; }
@keyframes just-found { 0% { color: var(--gold-light); transform: scale(1.06); } 100% { transform: scale(1); } }

/* desktop: paneel onderin, zoals in deel 1 */
.panel {
  flex: none;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 22px;
  align-items: center;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
  background: var(--night);
  border-top: 2px solid var(--gold);
  box-shadow: inset 0 4px 0 var(--night), inset 0 5px 0 var(--gold-dark);
}
.counter-box { min-width: 120px; padding: 10px 16px; text-align: center; border: 1.5px solid var(--gold-dark); outline: 1px solid rgba(212, 168, 73, .35); outline-offset: 3px; }
.counter-box span { display: block; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.counter-box strong { display: block; margin-top: 4px; font: 400 30px/1 var(--font-display); color: var(--cream); }
.items-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 18px; max-height: 120px; overflow: auto; min-width: 0; }
.actions { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.zoom-tools { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 8px; }
.zoom-tools .btn { background: rgba(18, 22, 31, .85); }

/* telefoon en tablet: zwevende knoppen en een lade, zoals in deel 1 */
.hud { position: absolute; top: 10px; display: flex; flex-direction: column; gap: 8px; z-index: 3; pointer-events: none; }
.hud > *, .hud-row > * { pointer-events: auto; }
.hud-row { pointer-events: none; }
.hud-left { left: 10px; align-items: flex-start; }
.hud-right { right: 10px; align-items: flex-end; }
.hud-bottom-left { top: auto; left: 10px; bottom: 10px; }
.start-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hud .btn-quiet { background: rgba(18, 22, 31, .82); }
.pill { padding: 9px 14px 7px; font-weight: 600; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; background: rgba(18, 22, 31, .88); border: 1.5px solid var(--gold); border-radius: 999px; }
.drawer-tab {
  position: absolute; right: 0; top: 50%; z-index: 3;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  padding: 16px 9px; min-width: 40px;
  font: 600 14px/1 var(--font-body); letter-spacing: .18em; text-transform: uppercase;
  color: var(--cream); background: rgba(18, 22, 31, .9);
  border: 1.5px solid var(--gold); border-right: 0; border-radius: 6px 0 0 6px;
  cursor: var(--cur-hand); cursor: var(--cur-hand-hd);
}
.drawer {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 4;
  width: max-content;
  min-width: min(220px, 70vw);
  max-width: max(40vw, 220px);
  padding: 14px 16px;
  background: rgba(18, 22, 31, .97);
  border-left: 2px solid var(--gold);
  transform: translateX(105%);
  transition: transform 260ms ease;
  overflow: auto;
}
.drawer.is-open { transform: none; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.drawer-head h2 { margin: 0; font: 400 22px/1 var(--font-display); color: var(--gold-light); letter-spacing: .06em; }
.drawer .items li { padding-top: 7px; padding-bottom: 7px; border-bottom: 1px solid rgba(212, 168, 73, .18); }
.drawer .items li::before { top: 1em; }

@media (prefers-reduced-motion: reduce) {
  .found-outline, .ring, .items li.just-found, .toast { animation-duration: 1ms; transition: none; }
  .search.is-blurred .plate-viewport { filter: none; opacity: .6; }
  .drawer { transition: none; }
}

/* ---------- bot, muziek, meldingen ---------- */
.bone-icon { width: 64px; height: auto; display: block; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); }
.hud-row, .actions-row { display: flex; align-items: center; gap: 8px; }
.actions-row { justify-content: space-between; }
.btn-music { width: 44px; height: 44px; min-height: 44px; position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 0; border-radius: 50%; border: 2px solid var(--gold); background: radial-gradient(#1f1910, #0e0b07); box-shadow: inset 0 0 0 3px #0e0b07, inset 0 0 0 4px rgba(217, 169, 63, .55); }
.btn-music:hover { background: radial-gradient(#2a2216, #120e08); }
.music-icon { width: 76%; height: 76%; display: block; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.music-icon .mi-rays { stroke: var(--gold-light); stroke-width: 1.3; opacity: .75; }
.music-icon .mi-note { stroke: var(--gold-light); stroke-width: 1.7; }
.music-icon .mi-note ellipse { fill: var(--gold-light); }
.music-icon .mi-slash { stroke: var(--gold-light); stroke-width: 1.6; display: none; }
.btn-music.is-off { border-color: rgba(217, 169, 63, .45); box-shadow: inset 0 0 0 3px #0e0b07, inset 0 0 0 4px rgba(217, 169, 63, .25); }
.btn-music.is-off .mi-rays { display: none; }
.btn-music.is-off .mi-note { stroke: rgba(217, 169, 63, .5); }
.btn-music.is-off .mi-note ellipse { fill: none; }
.btn-music.is-off .mi-slash { display: block; opacity: .8; }

.toast {
  position: absolute; left: 50%; top: 14px; z-index: 30;
  transform: translate(-50%, -12px);
  max-width: min(80%, 460px);
  padding: 10px 18px 8px;
  font: 600 16px/1.3 var(--font-body); text-align: center;
  color: var(--cream); background: rgba(18, 22, 31, .92);
  border: 1.5px solid var(--gold); border-radius: 4px;
  opacity: 0; pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.toast-gold { color: var(--night); background: var(--gold-light); border-color: var(--gold); }
.toast-streak { font: 400 26px/1.1 var(--font-display); letter-spacing: .08em; color: var(--gold-light); padding: 12px 24px 10px; }
.toast-warn { border-color: var(--miss); }

.search .plate-viewport { transition: filter 250ms ease; }
.search.is-blurred .plate-viewport { filter: blur(5px); }

/* ---------- gedeelde overlay ---------- */
.overlay { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(7, 9, 13, .72); opacity: 0; transition: opacity 220ms ease; }
.overlay.is-open { opacity: 1; }
.overlay-card { width: min(380px, 100%); max-height: 100%; overflow: auto; padding: 24px 26px; text-align: center; background: var(--night); border: 2px solid var(--gold); outline: 1px solid var(--gold-dark); outline-offset: 5px; }
.overlay-card h2 { margin: 0 0 10px; font: 400 32px/1.1 var(--font-display); color: var(--gold-light); }
.overlay-note { margin: 0 0 16px; color: var(--cream-quiet); font-size: 14px; }
.overlay-buttons { display: flex; flex-direction: column; gap: 9px; }
.overlay-buttons-row { flex-direction: row; flex-wrap: wrap; justify-content: center; margin-top: 18px; }
.stats { margin: 6px 0 0; text-align: left; }
.stats div { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; border-bottom: 1px solid rgba(212, 168, 73, .2); }
.stats dt { color: var(--cream-quiet); }
.stats dd { margin: 0; font-weight: 600; }
@media (max-height: 420px) {
  .overlay-card { padding: 16px 20px; }
  .overlay-card h2 { font-size: 26px; margin-bottom: 6px; }
  .overlay-buttons { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .stats div { padding: 4px 0; }
}

/* ---------- portret met art-deco-kader ---------- */
.framed { position: relative; width: 100%; aspect-ratio: 1000 / 1128; }
.framed-img { position: absolute; left: 9%; top: 13.65%; width: 82%; height: 72.7%; object-fit: cover; object-position: center top; background: #e9e1cf; }
.framed-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.plate-viewport.is-talk { cursor: var(--cur-hand); cursor: var(--cur-hand-hd); }

/* ---------- dialoog ---------- */
.overlay-dialog .overlay-card { width: min(780px, 100%); padding: 18px 22px; text-align: left; cursor: var(--cur-hand); cursor: var(--cur-hand-hd); }
.dialog { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center; }
.dialog-portrait { width: min(260px, calc((var(--app-h) - 90px) * .886)); }
.dialog-name { font: 400 30px/1.1 var(--font-display); color: var(--gold-light); letter-spacing: .03em; margin-bottom: 10px; }
.dialog-text { margin: 0; min-height: 4.4em; font-size: 19px; line-height: 1.45; }
.dialog-text.is-new { animation: line-in 320ms ease; }
@keyframes line-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.dialog-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.dialog-count { font-size: 13px; color: var(--cream-quiet); }
@media (max-width: 560px) {
  .dialog { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .dialog-portrait { width: min(220px, 60vw); }
  .dialog-actions { justify-content: center; }
}
@media (max-height: 420px) {
  .dialog-name { font-size: 24px; margin-bottom: 6px; }
  .dialog-text { font-size: 17px; min-height: 3.6em; }
}

/* ---------- notitieblok ---------- */
.overlay-notebook .overlay-card { width: min(1020px, 100%); max-height: calc(var(--app-h) - 24px); padding: 16px 18px; text-align: left; }
.nb-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.nb-head h2 { margin: 0; }
.nb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 10px; }
.nb-card {
  position: relative; display: grid; grid-template-columns: 84px 1fr; gap: 12px; align-items: start;
  padding: 10px; text-align: left; color: var(--cream); overflow: hidden;
  background: var(--night-2); border: 1px solid rgba(212, 168, 73, .4); border-radius: 3px;
  transition: opacity .2s, border-color .2s;
}
.nb-portrait { display: block; padding: 0; margin: 0; border: 0; background: none; cursor: zoom-in; border-radius: 2px; }
.nb-portrait:hover .framed, .nb-portrait:focus-visible .framed { filter: brightness(1.12); }
.nb-portrait:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }
.nb-name { display: block; font: 400 19px/1.15 var(--font-display); color: var(--gold-light); }
.nb-coupe { display: block; margin-top: 2px; font-size: 12px; color: var(--cream-quiet); }
.nb-traits { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 0; padding: 0; }
.nb-traits li { padding: 2px 7px 1px; font-size: 11.5px; border: 1px solid rgba(212, 168, 73, .45); border-radius: 999px; }
.nb-said { margin: 7px 0 0; font-size: 13.5px; line-height: 1.35; font-style: italic; }
.nb-empty { color: var(--cream-quiet); font-style: normal; }
.nb-mark { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 8px; min-height: 34px; margin-top: 8px; padding: 4px 12px 4px 8px; font: inherit; font-size: 13px; color: var(--cream); background: rgba(0, 0, 0, .25); border: 1px solid rgba(212, 168, 73, .55); border-radius: 3px; cursor: var(--cur-hand); cursor: var(--cur-hand-hd); }
.nb-mark:hover { border-color: var(--gold); }
.nb-mark:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }
.nb-box { position: relative; width: 16px; height: 16px; border: 1.5px solid var(--gold); border-radius: 2px; }
.nb-mark[aria-pressed="true"] { border-color: #c0473a; background: rgba(150, 40, 30, .25); }
.nb-mark[aria-pressed="true"] .nb-box { border-color: #e06a5a; background: #a8352a; }
.nb-mark[aria-pressed="true"] .nb-box::after { content: ""; position: absolute; left: 4px; top: 0; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.nb-stamp {
  position: absolute; left: 50%; top: 42%; z-index: 1; pointer-events: none; display: none;
  transform: translate(-50%, -50%) rotate(-12deg); padding: 4px 14px 2px; white-space: nowrap;
  font: 700 22px/1.1 var(--font-display); letter-spacing: .12em; text-transform: uppercase;
  color: #d84a3a; border: 3px double #d84a3a; border-radius: 4px; background: rgba(20, 8, 6, .35); opacity: .92;
}
.nb-card.is-struck { border-color: rgba(192, 71, 58, .6); }
.nb-card.is-struck .nb-portrait, .nb-card.is-struck .nb-name, .nb-card.is-struck .nb-coupe, .nb-card.is-struck .nb-traits, .nb-card.is-struck .nb-said { opacity: .45; }
.nb-card.is-struck .nb-stamp { display: block; }
/* portret groot: volledige figuur op een art-deco-kaart */
.nb-viewer { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; padding: 12px; background: rgba(5, 7, 11, .82); animation: nbFade .18s ease-out; }
.nb-view-card { --corner: 64px; position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; height: calc(var(--app-h) - 40px); max-height: 900px; padding: 46px 34px 20px; margin-top: 18px; }
.nb-view-card > *:not(.deco) { position: relative; z-index: 2; }
.nb-view-card .crest { position: absolute; left: 50%; top: -34px; transform: translateX(-50%); --crest: 150px; z-index: 3; }
.nb-view-pic { flex: 1 1 auto; min-height: 0; aspect-ratio: 2 / 3; max-width: 100%; overflow: hidden; cursor: inherit; background: #efe8d8; border: 2px solid var(--gold); outline: 1px solid rgba(212, 168, 73, .5); outline-offset: 4px; touch-action: manipulation; }
.nb-view-pic img { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.nb-view-pic.is-zoomed { overflow: auto; cursor: grab; touch-action: pan-x pan-y; overscroll-behavior: contain; }
.nb-view-pic.is-zoomed img { width: 200%; height: 200%; }
.nb-view-side { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.nb-view-cap { text-align: center; }
.nb-view-cap::before { content: ""; display: block; width: 120px; height: 1px; margin: 0 auto 6px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.nb-view-cap strong { display: block; font: 400 24px/1.1 var(--font-display); color: var(--gold-light); }
.nb-view-cap span { font-size: 13px; color: var(--cream-quiet); }
.nb-view-tip { margin: 0; text-align: center; font-size: 12px; color: var(--cream-quiet); }
@media (max-height: 460px) {
  /* liggende telefoon: figuur links, naam en knop rechts */
  .nb-view-card { --corner: 44px; flex-direction: row; align-items: center; height: calc(var(--app-h) - 24px); margin-top: 0; padding: 18px 26px; gap: 18px; }
  .nb-view-card .crest { display: none; }
  .nb-view-pic { height: 100%; }
  .nb-view-side { width: 170px; }
  .nb-view-cap strong { font-size: 21px; }
}
@keyframes nbFade { from { opacity: 0; } to { opacity: 1; } }
/* v0.9.29: portret met naam, leeftijd en bio: figuur links, tekst rechts */
.nb-view-card { flex-direction: row; align-items: center; gap: 28px; }
.nb-view-pic { height: 100%; flex: none; }
.nb-view-side { width: 300px; }
@media (max-height: 460px) {
  .nb-view-side { width: 250px; }
  .nb-view-bio { font-size: 13px; line-height: 1.38; margin-top: 6px; }
}
.nb-evidence { margin-top: 14px; }
.nb-evidence h3 { margin: 0 0 6px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.nb-evidence p { margin: 0; font-size: 14px; }
@media (max-height: 420px) {
  .nb-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
  .nb-card { grid-template-columns: 64px 1fr; padding: 8px; }
  .nb-stamp { font-size: 17px; }
  .nb-view-fig figcaption strong { font-size: 19px; }
}

/* ---------- inzet ---------- */
.overlay-insert .overlay-card { width: min(980px, 100%); max-height: calc(var(--app-h) - 16px); padding: 12px 14px 14px; text-align: left; }
.ins-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.ins-head h2 { margin: 0; font-size: 26px; }
.ins-stage {
  position: relative; margin: 0 auto;
  width: min(100%, calc((var(--app-h) - 170px) * var(--ins-ratio))); /* v0.9.29: ruimte voor kop én onderschrift */
  aspect-ratio: var(--ins-ratio);
  border: 1.5px solid var(--gold-dark); cursor: default; touch-action: manipulation;
}
@media (max-height: 500px) { .ins-stage { width: min(100%, calc((var(--app-h) - 104px) * var(--ins-ratio))); } } /* telefoon liggend: beeld zo groot mogelijk */
@media (max-height: 500px) { .overlay-codelock .ins-stage, .ins-stage.is-flippable { width: min(100%, calc((var(--app-h) - 150px) * var(--ins-ratio))); } .overlay-codelock .ins-caption, .ins-stage.is-flippable + .ins-caption { margin-top: 6px; padding: 5px 10px; font-size: 14px; } } /* v0.9.31: slot en lijstje: onderschrift (met de stand van de knop) moet zichtbaar blijven */
/* v0.9.31: transparante close-ups (fotolijstje) staan op een vaste donkere achtergrond */
.ins-stage { background: #1d1914 url('../assets/inserts/achtergrond.webp') center / cover no-repeat; }
.ins-stage.is-flippable { perspective: 1400px; }
.ins-flip { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 650ms cubic-bezier(.4, .1, .2, 1); }
.ins-stage.is-flipped .ins-flip { transform: rotateY(180deg); }
.ins-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; filter: drop-shadow(0 14px 18px rgba(0,0,0,.6)); }
.ins-back { transform: rotateY(180deg); }
/* v0.9.32: geheim met beeld: eerst opgevouwen (kleiner), een tik vouwt het open */
.sp-stage { cursor: default; overflow: hidden; }
.sp-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none; filter: drop-shadow(0 14px 18px rgba(0,0,0,.6)); transition: transform 600ms cubic-bezier(.3, .1, .2, 1), opacity 450ms; }
.sp-stage .sp-folded { opacity: 0; transform: scale(var(--fold-scale)); }
.sp-stage .sp-open { opacity: 1; transform: none; }
.sp-stage.is-folded { cursor: var(--cur-open); cursor: var(--cur-open-hd); }
.sp-stage.is-folded .sp-folded { opacity: 1; }
.sp-stage.is-folded .sp-open { opacity: 0; transform: scale(var(--fold-scale)); }
/* Tom, 25 okt: opgevouwen foto met een achterkant (Archibald): de omdraaibare foto verschijnt bij het openvouwen */
.sp-stage.is-flippable .ins-flip { transition: transform 650ms cubic-bezier(.4, .1, .2, 1), opacity 450ms; }
.sp-stage.is-flippable.is-folded .ins-flip { opacity: 0; transform: scale(var(--fold-scale)); }
.ins-stage.is-shake .cl-svg { animation: ins-shake 420ms ease-out; }
.dk-num { font-family: Georgia, 'Times New Roman', serif; font-weight: 700; fill: #2a1a08; }
.dk-mark { fill: #f0d38a; stroke: #3a250d; stroke-width: 1.5; filter: drop-shadow(0 1px 1px rgba(0,0,0,.8)); }
.dk-svg { touch-action: none; }
.dk-caption { padding-top: 6px; padding-bottom: 6px; }
.dk-svg.is-open .dk-rot { filter: drop-shadow(0 0 4px rgba(255, 220, 140, .95)); transition: filter 300ms; }
.dk-read { display: inline-flex; vertical-align: middle; align-items: center; gap: 12px; margin-left: 14px; }
.dk-now { font: 700 22px/1 Georgia, serif; color: var(--gold-light, #f0d38a); min-width: 2.2ch; }
.dk-slots { display: flex; gap: 6px; }
.dk-slot { font: 700 15px/1 Georgia, serif; padding: 3px 6px; border: 1px solid var(--gold-dark); color: rgba(240,211,138,.45); }
.dk-slot.is-set { color: var(--gold-light, #f0d38a); background: rgba(240,211,138,.12); }
.ins-img { display: block; width: 100%; height: 100%; object-fit: fill; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.ins-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.found-outline-flat { stroke-width: 4px; --inv-scale: 1; }
.ring-flat { --inv-scale: 1; }
.ring-locked { border: 3px solid var(--miss); animation: ring-locked 600ms ease-out forwards; }
@keyframes ring-locked { 0% { transform: translateX(0) scale(.8); opacity: 1; } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); opacity: 1; } 100% { transform: none; opacity: 0; } }
.cl-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: manipulation; user-select: none; }
.cl-svg.dk-svg { touch-action: none; }   /* v0.9.38 (Tom, 26 okt): de draaiknop van de kluis: slepen draait, het venster scrolt niet mee */
.cl-digit { font-family: Georgia, 'Times New Roman', serif; font-weight: 700; fill: #2a1a0a; }
.cl-dials.is-bare .cl-digit { font-family: 'Helvetica Neue', Arial, sans-serif; fill: #15100a; }   /* v0.9.41: cijfers op de rollen van Toms slotbeeld */
.cl-sym { font-family: 'Segoe UI Symbol', 'DejaVu Sans', 'Noto Sans Symbols 2', sans-serif; fill: #3a2410; opacity: .9; }
.cl-sym.is-red { fill: #6e1f12; }
.cl-sym-shadow { font-family: 'Segoe UI Symbol', 'DejaVu Sans', 'Noto Sans Symbols 2', sans-serif; fill: rgba(255, 228, 170, .55); }
.cl-hit { fill: transparent; cursor: var(--cur-hand, pointer); }
.cl-arrow { fill: none; stroke: var(--gold-light, #f0d38a); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: .85; pointer-events: none; filter: drop-shadow(0 1px 1px rgba(0,0,0,.7)); }
.cl-svg.is-open .cl-roll { filter: drop-shadow(0 0 3px rgba(255, 220, 140, .95)); transition: filter 300ms; }
.cl-svg.is-open .cl-arrow { opacity: 0; transition: opacity 300ms; }
.rub-box { position: absolute; touch-action: none; cursor: var(--cur-pencil); cursor: var(--cur-pencil-hd); }
.rub-box canvas { display: block; width: 100%; height: 100%; mix-blend-mode: multiply; }
.ins-stage.is-shake .ins-img { animation: ins-shake 420ms ease-out; }
@keyframes ins-shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
.nb-section { margin: 14px 0 8px; font: 400 20px/1.2 var(--font-display); letter-spacing: .06em; color: #f7e3a1; }
.nb-section-others { margin-top: 22px; padding-top: 14px; border-top: 1px solid rgba(217, 169, 63, .45); }
.nb-other .nb-bio { font-style: normal; color: #d8c8a6; }
.nb-view-cap .nb-view-age { display: block; margin-top: 2px; font-size: 14px; color: #d8c8a6; }
.nb-view-bio { margin: 10px 0 4px; max-width: 34ch; font-size: 15px; line-height: 1.45; color: var(--cream); text-align: left; }
.items li.is-key::after { content: " ⚿"; color: var(--gold); }

/* ---------- volgende wagon, detail ---------- */
.hud-bottom-right { top: auto; right: 10px; bottom: 10px; }
.btn-next { box-shadow: 0 0 0 3px rgba(240, 211, 138, .25); }
.btn-next[hidden] { display: none; }
.complete-warn { color: var(--gold-light); margin-top: 12px; }
.overlay-detail .overlay-card { width: min(520px, 100%); }
.detail-text { font-size: 19px; line-height: 1.5; margin: 6px 0 4px; }
.ins-caption { margin: 10px auto 0; max-width: 760px; padding: 10px 14px; font-size: 16px; line-height: 1.45; text-align: center; border: 1px solid var(--gold-dark); background: var(--night-2); }
.ins-caption[hidden] { display: none; }
/* opnieuw gebouwd 22 okt (Tom koos C): uitlegzin boven de bladzijde met potloodtekst */
.ins-intro { margin: 0 auto 8px; max-width: 760px; font-size: 16px; line-height: 1.45; text-align: center; font-style: italic; color: var(--cream); }
@media (max-height: 460px) { .ins-intro { font-size: 13px; margin-bottom: 4px; } }
.nb-clues { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.nb-clues li { font-size: 14px; line-height: 1.4; padding: 6px 10px; border-left: 3px solid var(--gold); background: var(--night-2); }
.nb-clue-where { display: block; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }

/* ---------- verhaalscherm ---------- */
.story { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 20px; overflow: auto; background: radial-gradient(ellipse at 50% 40%, var(--wine), var(--night) 72%); cursor: var(--cur-hand); cursor: var(--cur-hand-hd); }
.story-card { width: min(640px, 100%); text-align: center; }
.story-title { margin: 0 0 14px; font: 400 clamp(28px, 6vw, 44px)/1.1 var(--font-display); color: var(--gold-light); letter-spacing: .04em; }
.story-portrait { width: min(200px, 40vw, calc((var(--app-h) - 220px) * .886)); margin: 0 auto 10px; }
.story-text { margin: 0 auto; min-height: 3.2em; font-size: clamp(17px, 2.6vw, 21px); line-height: 1.55; }
.story-text.is-new { animation: line-in 380ms ease; }
/* v0.9.29 (Tom): de knop precies in het midden; de teller (1 / 3) staat er links naast */
.story-foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; margin-top: 22px; }
.story-foot .story-count { justify-self: end; }
.story-count { font-size: 13px; color: var(--cream-quiet); }
.result-card { cursor: default; }
.res-join { max-width: 420px; margin: 12px auto 0; font-size: 13px; line-height: 1.4; color: var(--cream-quiet); text-align: center; }   /* Tom, 25 okt */
.result-card .stats { max-width: 420px; margin: 0 auto; }
.ok { color: var(--hit); }
.bad { color: var(--miss); }

/* ---------- salonscène ---------- */
.salon { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 12px; padding: 14px 16px 0; background: radial-gradient(ellipse at 50% 30%, #3a2a16, var(--night) 75%); }
.salon-head { text-align: center; }
.salon-head h1 { margin: 0; font: 400 clamp(26px, 5vw, 40px)/1.1 var(--font-display); color: var(--gold-light); }
.salon-head p { margin: 6px 0 0; color: var(--cream-quiet); }
.salon-table { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; max-width: 980px; width: 100%; margin: 0 auto; }
@media (max-width: 560px) { .salon-table { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.salon-seat { padding: 6px 4px 8px; font: inherit; color: var(--cream); background: transparent; border: 1.5px solid transparent; border-radius: 4px; cursor: var(--cur-hand); cursor: var(--cur-hand-hd); transition: transform .15s, border-color .15s, opacity .15s; }
.salon-seat:hover { transform: translateY(-2px); }
.salon-seat.is-struck { opacity: .45; }
.salon-seat.is-selected { opacity: 1; border-color: var(--gold-light); background: rgba(212, 168, 73, .14); }
.salon-name { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.2; }
.salon-proof { max-width: 980px; width: 100%; margin: 0 auto; }
.salon-proof[hidden] { display: none; }
.salon-proof h2 { margin: 0 0 4px; font: 400 24px/1.1 var(--font-display); color: var(--gold-light); }
.salon-clues { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.salon-clue { text-align: left; font: inherit; font-size: 14.5px; line-height: 1.35; padding: 8px 10px; color: var(--cream); background: var(--night-2); border: 1px solid rgba(212, 168, 73, .4); border-radius: 3px; cursor: var(--cur-hand); cursor: var(--cur-hand-hd); }
.salon-clue.is-selected { border-color: var(--gold-light); background: rgba(212, 168, 73, .2); box-shadow: inset 0 0 0 1px var(--gold-light); }
.salon-clue-where { display: block; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.salon-foot { position: sticky; bottom: 0; display: flex; justify-content: center; gap: 10px; padding: 10px 0 calc(12px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(transparent, var(--night) 35%); }
.start-extra { margin: 18px 0 0; }
/* Verhaalscherm op lage schermen: veilig centreren (niets valt boven of onder weg) en compacter. */
.story { align-items: flex-start; }
.story-card { margin: auto 0; }
.story-card:has(.story-portrait) .ornament { display: none; }
@media (max-height: 460px) {
  .story { padding: 12px 20px; }
  .story-title { font-size: 28px; margin-bottom: 8px; }
  .story-portrait { width: min(150px, calc((var(--app-h) - 230px) * .886)); margin-bottom: 4px; }
  .story-foot { margin-top: 12px; }
  .story .ornament { width: 80px; height: 40px; margin-bottom: 8px; }
}
/* Leugenaar in notitieblok en salon */
.nb-lie s { opacity: .7; }
.nb-lie-tag { display: inline-block; margin: 0 6px 3px 0; padding: 1px 8px; font-size: 11px; font-style: normal; letter-spacing: .04em; color: var(--night); background: var(--miss); border-radius: 999px; }
.salon-clue s { opacity: .65; }

/* ---------- art-deco-paneel: notenhout, gouden randen, hoekornamenten en kroon ---------- */
:root {
  --gold-rich: linear-gradient(180deg, #f7e3a1 0%, #d9a93f 35%, #a8751f 60%, #f1cf73 85%, #b8862a 100%);
  --deco-wood: url("../assets/ui/notenhout-tegel.webp");
  --deco-corner: url("../assets/ui/hoek-ornament.webp");
  --deco-crest: url("../assets/ui/kroon-ornament.webp");
}
.deco-panel {
  position: relative;
  isolation: isolate;
  background-color: #2a1610;
  background-image: linear-gradient(rgba(12, 7, 5, .38), rgba(12, 7, 5, .38)), var(--deco-wood);
  background-size: auto, 314px auto;
  background-repeat: repeat;
}
/* dubbele gouden rand binnen het paneel */
.deco-panel::before {
  content: ""; position: absolute; inset: 7px; z-index: -1; pointer-events: none;
  border: 1.5px solid #d9a93f;
  box-shadow: 0 0 0 4px rgba(12, 7, 5, .55), 0 0 0 5px rgba(217, 169, 63, .55);
}
.deco { position: absolute; z-index: 1; width: var(--corner, 92px); aspect-ratio: 360 / 346; background: var(--deco-corner) no-repeat center / contain; pointer-events: none; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .55)); }
.deco-tl { left: 0; top: 0; }
.deco-tr { right: 0; top: 0; transform: scaleX(-1); }
.deco-bl { left: 0; bottom: 0; transform: scaleY(-1); }
.deco-br { right: 0; bottom: 0; transform: scale(-1, -1); }
.crest { display: block; width: var(--crest, 150px); aspect-ratio: 520 / 249; margin: 0 auto; background: var(--deco-crest) no-repeat center / contain; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .6)); pointer-events: none; }

/* desktop: itembalk */
.panel.deco-panel {
  --corner: 104px;
  border-top: 0; box-shadow: none;
  padding: 26px 104px calc(18px + env(safe-area-inset-bottom, 0px));
  overflow: visible;
}
.panel.deco-panel .counter-box { position: relative; background: rgba(12, 7, 5, .72); border-color: #d9a93f; padding-top: 14px; }
.panel.deco-panel .counter-box .crest { position: absolute; left: 50%; top: -34px; transform: translateX(-50%); --crest: 132px; }
.panel.deco-panel .counter-box strong { color: #f7e3a1; }
.panel.deco-panel .items-grid { padding: 10px 14px; background: rgba(12, 7, 5, .62); border: 1px solid rgba(217, 169, 63, .45); }
.panel.deco-panel .items li::before { background: #d9a93f; }
.panel.deco-panel .actions { position: relative; z-index: 2; }
@media (max-width: 1100px) { .panel.deco-panel { --corner: 78px; padding-left: 70px; padding-right: 70px; } }

/* telefoon en tablet: zoeklijst-lade */
.drawer.deco-panel { --corner: 64px; padding: 54px 26px 40px; border-left: 0; box-shadow: -6px 0 20px rgba(0, 0, 0, .5); }
.drawer.deco-panel .crest { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); --crest: 118px; z-index: 1; }
.drawer.deco-panel .drawer-head { position: relative; z-index: 2; }
.drawer.deco-panel .drawer-head h2 { color: #f7e3a1; text-shadow: 0 2px 4px rgba(0, 0, 0, .7); }
.drawer.deco-panel .items { position: relative; z-index: 2; padding: 4px 12px; background: rgba(12, 7, 5, .55); border: 1px solid rgba(217, 169, 63, .4); }
.drawer.deco-panel .items li { text-shadow: 0 1px 2px rgba(0, 0, 0, .8); }
.drawer.deco-panel .items li::before { background: #d9a93f; }
@media (max-height: 420px) {
  .drawer.deco-panel { --corner: 52px; padding: 44px 22px 30px; }
  .drawer.deco-panel .crest { --crest: 96px; top: 6px; }
}
/* bijstellingen art-deco-paneel */
.panel.deco-panel { padding-top: 34px; }
.panel.deco-panel .counter-box { padding-top: 16px; margin-top: 6px; }
.panel.deco-panel .counter-box .crest { top: -52px; --crest: 120px; }
.panel.deco-panel .items-grid { max-height: 152px; gap: 4px 18px; }
.drawer.deco-panel { overflow: hidden; display: flex; flex-direction: column; }
.drawer.deco-panel .items { flex: 1; min-height: 0; overflow: auto; }

/* ---------- art-deco voor alle kaarten: overlays, startscherm, verhaal en resultaat ---------- */
.overlay-card.deco-panel { --corner: 62px; background-color: #2a1610; border: 0; outline: 0; padding: 30px 34px 28px; }
.deco-content { position: relative; z-index: 2; }
.overlay-card.deco-panel h2 { color: #f7e3a1; text-shadow: 0 2px 4px rgba(0, 0, 0, .7); }
.overlay-card.deco-panel .overlay-note { color: #d8c8a6; }
.overlay-card.deco-panel .stats div { border-bottom-color: rgba(217, 169, 63, .28); }
.overlay-card.deco-panel .stats dt { color: #d8c8a6; }
/* kaarten met veel inhoud: binnenste vlakken iets donkerder, zodat tekst leesbaar blijft */
.overlay-notebook .overlay-card.deco-panel { --corner: 72px; padding: 30px 30px 24px; }
.overlay-notebook .nb-card, .overlay-notebook .nb-clues li { background: rgba(12, 7, 5, .7); }
.overlay-dialog .overlay-card.deco-panel { --corner: 70px; padding: 26px 34px; }
.overlay-insert .overlay-card.deco-panel { --corner: 54px; padding: 22px 26px 22px; }
.overlay-detail .detail-text { text-shadow: 0 1px 2px rgba(0, 0, 0, .7); }
@media (max-height: 420px) {
  .overlay-card.deco-panel { --corner: 46px; padding: 20px 26px 18px; }
  .overlay-notebook .overlay-card.deco-panel, .overlay-dialog .overlay-card.deco-panel { --corner: 50px; }
  .overlay-insert .overlay-card.deco-panel { --corner: 40px; padding: 14px 18px; }
}

/* startscherm en verhaalkaarten */
.start-card.deco-panel, .story-card.deco-panel { --corner: 84px; padding: 64px 52px 40px; }
.start-card.deco-panel > *:not(.deco), .story-card.deco-panel > *:not(.deco) { position: relative; z-index: 2; }
.start-card.deco-panel .crest, .story-card.deco-panel .crest { position: absolute; left: 50%; top: -38px; transform: translateX(-50%); --crest: 170px; z-index: 3; }
.story-card.deco-panel:has(.story-portrait) .crest { display: none; }
.start-card.deco-panel .title { color: #f7e3a1; text-shadow: 0 2px 6px rgba(0, 0, 0, .7); }
.start, .story { padding-top: 46px; }
@media (max-height: 460px) {
  .start-card.deco-panel, .story-card.deco-panel { --corner: 58px; padding: 34px 40px 22px; }
  .start-card.deco-panel .crest, .story-card.deco-panel .crest { --crest: 120px; top: -26px; }
  .start, .story { padding-top: 30px; }
  .start .intro { margin-bottom: 16px; }
  .start-extra { margin-top: 10px; }
}
/* lange kaarten: alleen de inhoud scrolt, het kader blijft staan */
.overlay-card.deco-panel { overflow: hidden; display: flex; flex-direction: column; max-height: calc(var(--app-h) - 24px); }
.deco-content { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; }
/* v0.9.29: ruimte voor de gouden focusrand van knoppen, anders snijdt de scrollrand de onderkant eraf */
.deco-content { padding: 6px 8px 8px; margin: -6px -8px -8px; }
/* startscherm mag scrollen op lage schermen */
.start { overflow: auto; justify-content: flex-start; }
.start-card.deco-panel { margin: auto 0; }
@media (max-height: 460px) {
  .start .title { font-size: 34px; }
  .start .subtitle { margin: 4px 0 10px; }
  .start .intro { font-size: 15px; }
}

/* ---------- testmodus ---------- */
.test-panel { width: min(640px, 100%); margin: 18px auto 0; padding: 12px 16px; text-align: left; font-size: 14px; background: rgba(10, 30, 24, .92); border: 1.5px dashed #7fc29b; }
.test-panel h2 { margin: 0 0 6px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: #7fc29b; }
.test-panel p { margin: 4px 0; }
.test-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 8px 0; }
.test-row label { display: flex; gap: 6px; align-items: center; }
.test-row select { min-height: 32px; padding: 4px 6px; font: inherit; color: var(--cream); background: #0b0e14; border: 1px solid #7fc29b; }
.test-msg { color: var(--miss); }
.test-hint { color: var(--cream-quiet); font-size: 12px; }
.test-bar { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 6; display: flex; gap: 8px; align-items: center; padding: 6px 10px; background: rgba(10, 30, 24, .9); border: 1.5px dashed #7fc29b; font-size: 12px; }
.test-bar .btn { background: rgba(18, 22, 31, .9); }
@media (max-height: 460px) {
  .test-bar { bottom: 6px; padding: 4px 6px; gap: 6px; font-size: 10px; max-width: 60vw; }
  .test-bar .btn { min-height: 28px; padding: 2px 8px; font-size: 11px; }
}

/* ---------- beelden achter titel- en verhaalschermen ---------- */
.start.has-bg, .story.has-bg {
  background:
    linear-gradient(90deg, rgba(6, 8, 14, .78) 0%, rgba(6, 8, 14, .45) 45%, rgba(6, 8, 14, .05) 75%),
    var(--story-bg) 70% center / cover no-repeat,
    var(--night);
}
.story.has-bg.is-dim {
  background:
    linear-gradient(rgba(6, 8, 14, .58), rgba(6, 8, 14, .58)),
    var(--story-bg) 70% center / cover no-repeat,
    var(--night);
}
/* kaart links, zodat het beeld rechts zichtbaar blijft */
.story.has-bg:not(.is-dim) { justify-content: flex-start; }
.story.has-bg:not(.is-dim) .story-card { width: min(560px, 56%); margin-left: max(0px, 4vw); }
.start.has-bg { align-items: flex-start; }
.start.has-bg .start-card { width: min(520px, 56%); margin-left: max(0px, 4vw); }
.start.has-bg .test-panel { margin-left: max(0px, 4vw); }
.start.has-bg .start-foot { margin-left: max(0px, 4vw); }
.title-logo { margin: 0; line-height: 0; }
.title-logo img { display: block; width: 100%; height: auto; max-width: 420px; margin: -6px auto -4px; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .6)); }
.story-title:empty { display: none; }
@media (max-height: 460px) {
  .title-logo img { max-width: 300px; margin: -10px auto -8px; }
  .story.has-bg:not(.is-dim) .story-card, .start.has-bg .start-card { width: min(460px, 60%); }
}
@media (max-width: 640px) and (orientation: portrait) {
  .story.has-bg:not(.is-dim) .story-card, .start.has-bg .start-card { width: 100%; margin-left: 0; }
}
@media (max-height: 460px) {
  /* ontknoping met portret op een liggende telefoon: compacter, zodat de hele kaart past */
  .story:has(.story-portrait) { padding-top: 12px; padding-bottom: 12px; }
  .story-card.deco-panel:has(.story-portrait) { padding-top: 22px; padding-bottom: 16px; }
  .story-card:has(.story-portrait) .story-portrait { width: min(120px, calc((var(--app-h) - 270px) * .886)); }
  .story-card:has(.story-portrait) .story-title { font-size: 24px; margin-bottom: 4px; }
  .story-card:has(.story-portrait) .story-text { font-size: 16px; min-height: 0; }
}

/* ---------- desktop: lagere itembalk (v0.9.6) ---------- */
.panel.deco-panel { --corner: 72px; gap: 18px; padding: 28px 84px calc(18px + env(safe-area-inset-bottom, 0px)); } /* v0.9.29 (Tom): balk wat hoger */
.panel.deco-panel .counter-box { min-width: 104px; padding: 12px 12px 6px; margin-top: 4px; }
.panel.deco-panel .counter-box .crest { top: -34px; --crest: 92px; }
.panel.deco-panel .counter-box span { font-size: 10px; }
.panel.deco-panel .counter-box strong { margin-top: 2px; font-size: 24px; }
.panel.deco-panel .items-grid { min-height: 112px; max-height: 132px; align-content: center; padding: 8px 12px; gap: 3px 18px; grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); }
.panel.deco-panel .items-grid li { font-size: 19px; line-height: 1.35; } /* v0.9.16: groter op desktop */
.panel.deco-panel .actions { display: grid; grid-template-columns: auto auto; gap: 6px 8px; align-items: center; }
.panel.deco-panel .actions:has(.btn-next:not([hidden])) .btn-hint { display: none; } /* na voltooien staat Volgende wagon op de plek van Hint */
.panel.deco-panel .actions .btn { min-height: 34px; padding: 4px 14px; }
.panel.deco-panel .actions-row { gap: 6px; justify-content: flex-start; }
.panel.deco-panel .actions-row .bone-icon { height: 26px; width: auto; }
.panel.deco-panel .actions-row .btn-icon { width: 34px; height: 34px; min-height: 34px; padding: 0; }
@media (max-width: 1100px) { .panel.deco-panel { --corner: 60px; padding-left: 60px; padding-right: 60px; } }

/* ---------- verhaalkaart midden in de lege ruimte links van het beeld (v0.9.6) ---------- */
.story.has-bg:not(.is-dim) .story-card,
.start.has-bg .start-card {
  --card-w: min(640px, 56vw);
  width: var(--card-w);
  margin-left: max(16px, calc((68vw - var(--card-w)) / 2));
}
@media (min-height: 600px) and (min-width: 1000px) {
  .story.has-bg .story-text { font-size: 24px; line-height: 1.5; }
  .story.has-bg .story-title { font-size: 50px; }
  .story.has-bg .story-foot .btn { min-height: 46px; padding: 8px 28px; font-size: 18px; }
  .story.has-bg .story-card.deco-panel { padding: 70px 60px 44px; }
}
@media (max-height: 460px) {
  .story.has-bg:not(.is-dim) .story-card, .start.has-bg .start-card { --card-w: min(460px, 60vw); margin-left: max(12px, 4vw); }
}
@media (max-width: 640px) and (orientation: portrait) {
  .story.has-bg:not(.is-dim) .story-card, .start.has-bg .start-card { --card-w: 100%; margin-left: 0; }
}

/* ---------- hoofdmenu (v0.9.6) ---------- */
.start.menu { position: relative; display: block; overflow: auto; padding: 22px 16px 24px; }
.menu-col { width: min(560px, 56vw); margin-left: max(16px, calc((68vw - min(560px, 56vw)) / 2)); display: flex; flex-direction: column; align-items: center; }
.menu-logos { margin: 0 0 18px; display: flex; flex-direction: column; align-items: center; line-height: 0; }
.menu-logos img { display: block; height: auto; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .7)); }
.logo-series { width: min(460px, 100%); }
.logo-part { width: min(400px, 88%); margin-top: -10px; }
.start.menu .menu-card.deco-panel { --corner: 64px; width: min(400px, 100%); margin: 0; padding: 30px 40px 26px; }
.menu-buttons { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 9px; }
.menu-buttons .btn { width: 100%; min-height: 42px; }
.menu-main { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 52px !important; font-size: 18px; }
.menu-main small { font-size: 12px; font-weight: 400; opacity: .8; }
.menu-test { border-style: dashed !important; }
.menu-lang { position: absolute; right: 16px; top: 16px; z-index: 3; }
.start.menu .test-panel { width: 100%; margin: 18px 0 0; }
/* menukaarten */
.overlay-menu .overlay-card { width: min(520px, 100%); text-align: left; }
.overlay-menu h2 { text-align: center; }
.howto-step { min-height: 7.5em; }
.howto-step h3 { margin: 4px 0 8px; font: 400 24px/1.2 var(--font-display); color: var(--gold-light); text-align: center; }
.howto-step p { margin: 0; font-size: 16px; line-height: 1.55; text-align: center; }
.howto-dots { display: flex; justify-content: center; gap: 8px; margin: 12px 0 4px; }
.howto-dots span { width: 8px; height: 8px; background: rgba(217, 169, 63, .35); transform: rotate(45deg); }
.howto-dots span.is-on { background: #f0d38a; }
.set-list { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 22px; }   /* v0.9.24: meer ruimte boven Sluiten */
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid rgba(217, 169, 63, .2); }
.set-choice { display: flex; gap: 6px; }
.set-row .btn { min-width: 64px; }
.set-row .btn.is-on, .set-choice .btn.is-on { color: var(--night); background: var(--gold); border-color: var(--gold); }
.rec-list { list-style: none; margin: 4px 0 8px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rec { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 10px; padding: 7px 10px; background: rgba(12, 7, 5, .55); border: 1px solid rgba(217, 169, 63, .3); }
.rec-mark { width: 12px; height: 12px; margin: 0 auto; border: 1.5px solid rgba(217, 169, 63, .6); transform: rotate(45deg); }
.rec.is-done .rec-mark { background: #f0d38a; border-color: #f0d38a; box-shadow: 0 0 8px rgba(240, 211, 138, .6); }
.rec:not(.is-done) .rec-title { opacity: .75; }
.rec-value { font-size: 14px; color: var(--cream-quiet); }
.rec.is-done .rec-value { color: #f0d38a; }
/* ranglijst (v0.9.22) */
.board h2 { text-align: center; }
.board-demo { margin: 0 0 10px; padding: 6px 10px; font-size: 13px; color: #f0d38a; border: 1px dashed rgba(217, 169, 63, .5); text-align: center; }
.board-me { margin: 0 0 10px; text-align: center; color: var(--cream); font-size: 15px; }
.board-me strong { color: #f0d38a; font-weight: 600; }
.board-cols, .board-list li { display: grid; grid-template-columns: 34px 1fr 64px 54px; gap: 8px; align-items: center; }
.board-cols { padding: 0 10px 4px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--cream-quiet); }
.board-list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.board-list li { padding: 5px 10px; background: rgba(12, 7, 5, .55); border: 1px solid rgba(217, 169, 63, .18); font-size: 15px; }
.board-list li.is-me { border-color: #f0d38a; background: rgba(217, 169, 63, .18); }
.board-list li.board-gap { display: block; text-align: center; background: none; border: 0; padding: 0; color: var(--cream-quiet); }
.b-rank { color: #f0d38a; font-weight: 600; }
.b-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b-score, .b-time { text-align: right; font-variant-numeric: tabular-nums; }
.b-time { color: var(--cream-quiet); font-size: 14px; }
.board-sub { margin: 6px 0 6px; font: 400 20px/1.1 var(--font-display); color: var(--gold-light); text-align: center; }
.board-feats .rec { padding: 5px 10px; }
.board-small { margin: 8px 0 12px; font-size: 13px; color: var(--cream-quiet); text-align: center; }
.board-pair { margin: 4px 0 2px; }   /* Tom, 25 okt: knop Inloggen en meedoen */
.board-pair-status:empty { display: none; }
.link-btn { background: none; border: 0; padding: 0; color: #f0d38a; font: inherit; text-decoration: underline; cursor: var(--cur-hand); cursor: var(--cur-hand-hd); }
.board-name input { width: 100%; box-sizing: border-box; padding: 10px 12px; font: 16px var(--font-body); color: var(--cream); background: rgba(12, 7, 5, .7); border: 1px solid var(--gold); border-radius: 0; }
.board-name input:focus { outline: 2px solid #f0d38a; outline-offset: 1px; }
.board-error { min-height: 18px; margin: 6px 0 0; font-size: 13px; color: #ff9b8a; }
.board-name .overlay-buttons-row { margin-top: 8px; }
.stats dd.score { color: #f0d38a; font-size: 1.15em; }
@media (max-height: 460px) {
  .board-list li { padding: 3px 10px; font-size: 14px; }
  .board-feats { gap: 4px; }
  .board-feats .rec { padding: 3px 10px; }
}
.credits { text-align: center; margin-bottom: 22px; }   /* v0.9.24: meer ruimte boven Sluiten */
.credits-logo { width: min(280px, 80%); height: auto; margin: 0 auto 10px; display: block; }
.credits p { margin: 6px 0; }
/* Tom, 22 okt: logo van Suthep Studio onder de naam (wit afgerond kader, want de letters zijn donker) en de partnerregel */
.credits-studio { display: block; width: min(130px, 36%); margin: 14px auto 12px; padding: 10px; background: #fff; border-radius: 14px; box-shadow: 0 4px 14px rgba(0, 0, 0, .4); transition: transform .2s ease; }
.credits-studio:hover { transform: scale(1.04); }
.credits-studio img { display: block; width: 100%; height: auto; }
.credits .credits-with { font-size: 14px; color: var(--cream-quiet); }
.credits-with a { color: var(--gold-light); text-decoration: underline; text-underline-offset: 2px; }
@media (max-height: 460px) { .credits-studio { width: 84px; margin: 8px auto; padding: 6px; } }
/* liggende telefoon: logo's links, knoppen in twee kolommen rechts ervan */
@media (max-height: 460px) {
  .start.menu { display: flex; align-items: center; padding: 10px 12px; }
  .menu-col { width: auto; margin-left: max(10px, 3vw); flex-direction: row; align-items: center; gap: 14px; }
  .menu-logos { width: 230px; margin: 0; }
  .logo-part { margin-top: -6px; }
  .start.menu .menu-card.deco-panel { --corner: 44px; width: 360px; padding: 18px 22px; }
  .menu-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .menu-buttons .btn { min-height: 34px; padding: 4px 8px; font-size: 13px; }
  .menu-main { grid-column: 1 / -1; min-height: 42px !important; font-size: 16px !important; }
  .menu-buttons .btn:last-child:nth-child(even) { grid-column: 1 / -1; } /* v0.9.32: losse laatste knop over de hele breedte */
  .menu-buttons .menu-back { grid-column: 1 / -1; margin-top: 8px; }
  .menu-col { flex-wrap: wrap; }
  .start.menu .test-panel { flex-basis: 100%; margin-top: 10px; }
  .start.menu:has(.test-panel) { align-items: flex-start; }
  .menu-lang { top: 8px; right: 8px; }
  .howto-step { min-height: 6em; }
}
@media (max-width: 640px) and (orientation: portrait) {
  .menu-col { width: 100%; margin-left: 0; }
}
.logo-part { margin-top: 4px; }
@media (max-height: 820px) and (min-height: 461px) {
  .start.menu { padding-top: 14px; }
  .logo-series { width: min(380px, 100%); }
  .logo-part { width: min(320px, 80%); }
  .menu-logos { margin-bottom: 12px; }
  .start.menu .menu-card.deco-panel { padding: 22px 34px 20px; }
  .menu-buttons { gap: 7px; }
  .menu-buttons .btn { min-height: 38px; }
  .menu-main { min-height: 46px !important; }
}

/* groot portret: vierkant (v0.9.8) */
.nb-view-pic { aspect-ratio: 1 / 1; }
/* v0.9.38 (Tom, 26 okt): Safari rekende met height: 100% + aspect-ratio geen breedte uit: een hoog kader met lege vlakken
   boven en onder de foto. Daarom een vaste zijde, uitgerekend uit de beschikbare hoogte en breedte. */
.nb-view-pic { --pic: min(calc(min(var(--app-h) - 40px, 900px) - 66px), calc(var(--app-w) - 24px - 68px - 28px - 300px)); width: var(--pic); height: var(--pic); flex: none; }
@media (max-height: 460px) { .nb-view-pic { --pic: min(calc(var(--app-h) - 24px - 36px), calc(var(--app-w) - 24px - 52px - 18px - 250px)); } }

/* verhaalkaart onderaan in het midden, voor symmetrische beelden zoals de restauratiewagen */
.story.has-bg.is-bottom {
  justify-content: center; align-items: flex-end; padding-bottom: 22px;
  background:
    linear-gradient(transparent 45%, rgba(6, 8, 14, .7) 100%),
    var(--story-bg) center / cover no-repeat,
    var(--night);
}
.story.has-bg.is-bottom .story-card { --card-w: min(760px, 86vw); width: var(--card-w); margin: 0 auto; }
.story.has-bg.is-bottom .story-card.deco-panel { padding-top: 46px; padding-bottom: 26px; }
.story.has-bg.is-bottom .story-title { font-size: clamp(26px, 4vw, 40px); margin-bottom: 8px; }
.story.has-bg.is-bottom .story-text { min-height: 0; }
@media (max-height: 460px) {
  .story.has-bg.is-bottom { padding-bottom: 10px; }
  .story.has-bg.is-bottom .story-card { --card-w: min(620px, 80vw); }
  .story.has-bg.is-bottom .story-card.deco-panel { padding: 26px 34px 14px; }
  .story.has-bg.is-bottom .crest { --crest: 100px; top: -22px; }
}
@media (max-height: 460px) {
  .story.has-bg.is-bottom .story-card { --card-w: min(520px, 66vw); }
  .story.has-bg.is-bottom .story-card.deco-panel { --corner: 40px; padding: 20px 26px 10px; }
  .story.has-bg.is-bottom .story-title { font-size: 22px; margin-bottom: 4px; }
  .story.has-bg.is-bottom .story-text { font-size: 15px; line-height: 1.45; }
  .story.has-bg.is-bottom .story-foot { margin-top: 8px; }
  .story.has-bg.is-bottom .story-foot .btn { min-height: 34px; padding: 4px 18px; font-size: 14px; }
  .story.has-bg.is-bottom .crest { --crest: 84px; top: -18px; }
}

/* ---------- v0.9.10 ---------- */
/* lade weer over de plaat (deco-panel maakte hem per ongeluk 'relative', waardoor hij ruimte innam) */
.drawer.deco-panel { position: absolute; }
/* zoekscherm: plaat loopt door tot in de randen (camera/afgeronde hoeken), knoppen houden afstand */
.scene-search { padding: 0; }
.search .hud-left, .search .hud-bottom-left, .search .zoom-tools { left: calc(10px + env(safe-area-inset-left, 0px)); }
.search .hud-right, .search .hud-bottom-right { right: calc(10px + env(safe-area-inset-right, 0px)); }
.search .hud-left, .search .hud-right { top: calc(10px + env(safe-area-inset-top, 0px)); }
.search .drawer-tab { right: env(safe-area-inset-right, 0px); }
.search .drawer { padding-right: calc(16px + env(safe-area-inset-right, 0px)); }
.search .panel { padding-left: max(84px, env(safe-area-inset-left, 0px)); }
/* versienummer niet over de open lade */
body:has(.drawer.is-open) .version, body:has(.overlay) .version { opacity: 0; }
.version { user-select: none; }   /* v0.9.41: niet meer aanklikbaar (tikken naar de testmodus is weg) */

/* wagonkaartje: naam en tijd bij binnenkomst */
.wagon-card {
  position: absolute; left: 50%; top: 50%; z-index: 8; --corner: 46px;
  transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 22px 46px 18px; cursor: var(--cur-hand); cursor: var(--cur-hand-hd); animation: wcIn .45s ease-out;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .6);
}
.wagon-card > span:not(.deco) { position: relative; z-index: 2; }
.wagon-card-name { font: 400 clamp(22px, 3.4vw, 34px)/1.1 var(--font-display); color: #f7e3a1; letter-spacing: .04em; white-space: nowrap; }
.wagon-card-time { font: 600 clamp(20px, 2.8vw, 28px)/1 var(--font-body); letter-spacing: .14em; color: var(--cream); }
/* Tom, 22 okt: de tijd als art-deco-flipklok; de minuut klapt na ±1 s om (search.js) */
.wagon-card-time.is-flipclock { display: flex; align-items: center; gap: 4px; margin-top: 8px; letter-spacing: 0; perspective: 300px; }
.wc-digit {
  display: inline-block; min-width: 1.05em; padding: 6px 4px 5px; text-align: center;
  font: 600 clamp(24px, 3.4vw, 36px)/1 var(--font-body); color: #f7e3a1;
  background: linear-gradient(#1b1712 0 49%, #000 49% 51%, #14110d 51%);
  border: 1px solid var(--gold, #c9a14a); border-radius: 4px; box-shadow: inset 0 0 6px rgba(0, 0, 0, .8), 0 2px 4px rgba(0, 0, 0, .5);
  transform-origin: 50% 50%;
}
.wc-colon { font: 600 clamp(24px, 3.4vw, 36px)/1 var(--font-body); color: #f7e3a1; padding: 0 1px; }
.wc-digit.is-flip { animation: wcFlip .3s ease-in-out; }
@keyframes wcFlip { 0% { transform: rotateX(0); } 50% { transform: rotateX(90deg); filter: brightness(.6); } 100% { transform: rotateX(0); } }
.wagon-card.is-gone, .announce.is-gone { opacity: 0; transition: opacity .45s; pointer-events: none; }
@keyframes wcIn { from { opacity: 0; transform: translate(-50%, -46%); } to { opacity: 1; transform: translate(-50%, -50%); } }

/* omroep van de conducteur */
.announce {
  position: absolute; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 7;
  transform: translateX(-50%); width: min(560px, calc(100% - 140px));
  display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 10px; cursor: var(--cur-hand); cursor: var(--cur-hand-hd);
  color: var(--cream); background: rgba(30, 16, 10, .94); border: 1.5px solid #d9a93f;
  outline: 1px solid rgba(217, 169, 63, .45); outline-offset: 3px; box-shadow: 0 8px 26px rgba(0, 0, 0, .55);
  animation: anIn .4s ease-out;
}
.announce-portrait { flex: none; width: 64px; }
.announce-text { display: flex; flex-direction: column; gap: 3px; font-size: 14.5px; line-height: 1.35; }
.announce-text strong { font: 600 11px/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: #f0d38a; }
@keyframes anIn { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (max-height: 460px) { .announce { width: min(520px, calc(100% - 180px)); padding: 6px 12px 6px 6px; } .announce-portrait { width: 48px; } .announce-text { font-size: 13px; } }

/* hoofdmenu: kaart verticaal in het midden, taalknop zonder overlap */
.start.menu { display: flex; align-items: center; }
.start.menu .menu-col { margin-top: auto; margin-bottom: auto; }
.menu-lang { top: auto; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); left: calc(16px + env(safe-area-inset-left, 0px)); right: auto; }
@media (max-height: 460px) { .menu-lang { bottom: 10px; left: calc(10px + env(safe-area-inset-left, 0px)); top: auto; right: auto; } }

/* ---------- v0.9.12: zijkanten naast de plaat (sfeerkleur + art-deco-lijnen in SVG) ---------- */
.search .plate-area {
  --tint: #1a1f2c;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='%23e2b44f' stroke-opacity='.16' stroke-width='1.2'%3E%3Cpath d='M0 140 A140 140 0 0 1 140 0'/%3E%3Cpath d='M0 140 A105 105 0 0 1 105 35'/%3E%3Cpath d='M0 140 A70 70 0 0 1 70 70'/%3E%3Cpath d='M0 140 L70 0 M0 140 L140 70 M0 140 L120 20'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 140px 140px,
    linear-gradient(90deg, #05070b 0%, color-mix(in srgb, var(--tint) 70%, #05070b) 6%, var(--tint) 14%, var(--tint) 86%, color-mix(in srgb, var(--tint) 70%, #05070b) 94%, #05070b 100%);
}
.search .plate-area::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(5, 6, 10, .55) 100%);
}
.search .plate-area .plate-viewport { position: relative; z-index: 1; }
/* dubbele gouden rand langs de plaat, blijft even dik bij zoomen */
.plate-img {
  box-shadow:
    0 0 0 calc(2px * var(--inv-scale)) #d9a93f,
    0 0 0 calc(5px * var(--inv-scale)) rgba(8, 6, 4, .85),
    0 0 0 calc(6px * var(--inv-scale)) rgba(217, 169, 63, .55),
    0 0 calc(40px * var(--inv-scale)) calc(8px * var(--inv-scale)) rgba(0, 0, 0, .7);
}

/* ---------- taalkeuze onderaan het hoofdmenu (v0.9.16: woorden in de titelletter met een waaier ertussen) ---------- */
.menu-flags { position: absolute; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 3; display: flex; align-items: center; gap: 14px; }
.lang-word { padding: 4px 2px; font: 400 22px/1 var(--font-display); letter-spacing: .12em; color: rgba(217, 169, 63, .55); background: none; border: 0; cursor: var(--cur-hand); cursor: var(--cur-hand-hd); text-shadow: 0 1px 6px rgba(0, 0, 0, .8); transition: color .2s; }
.lang-word:hover { color: rgba(240, 211, 138, .85); }
.lang-word.is-on { color: var(--gold-light); }
.lang-word:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }
.lang-fan { width: 26px; height: 14px; display: block; fill: none; stroke: var(--gold); stroke-width: 1.2; }
@media (max-height: 460px) { .menu-flags { bottom: 6px; } .lang-word { font-size: 18px; } .start.menu { padding-bottom: 36px; } }

/* ---------- notitieblok op mobiel: iets grotere tekst ---------- */
@media (max-height: 460px), (max-width: 700px) {
  .nb-name { font-size: 21px; }
  .nb-coupe { font-size: 13.5px; }
  .nb-said { font-size: 15.5px; line-height: 1.4; }
  .nb-mark { font-size: 15px; min-height: 38px; }
  .overlay-notebook .overlay-note { font-size: 14.5px; }
  .nb-evidence p, .nb-clues li { font-size: 15px; }
}
.start.menu:has(.test-panel) { padding-bottom: 70px; }

/* laadscherm zolang de plaat nog niet binnen is */
.plate-loading { position: absolute; inset: 0; z-index: 9; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: radial-gradient(ellipse at 50% 50%, #1a1410, #05070b 75%); transition: opacity .35s; }
.plate-loading .crest { --crest: 150px; animation: loadPulse 1.4s ease-in-out infinite; }
.plate-loading-text { font: 400 20px/1 var(--font-display); letter-spacing: .08em; color: #f0d38a; }
.plate-loading.is-gone { opacity: 0; pointer-events: none; }
@keyframes loadPulse { 0%, 100% { opacity: .55; transform: scale(.96); } 50% { opacity: 1; transform: scale(1); } }

/* ---------- salonscène in art-deco-stijl ---------- */
.salon {
  gap: 16px; padding: 46px 16px 0;
  background:
    linear-gradient(rgba(6, 8, 14, .72), rgba(6, 8, 14, .82)),
    var(--story-bg) center / cover no-repeat,
    var(--night);
}
.salon-board { --corner: 70px; position: relative; max-width: 1020px; width: 100%; margin: 0 auto; padding: 46px 40px 26px; }
.salon-board > *:not(.deco) { position: relative; z-index: 2; }
.salon-board .crest { position: absolute; left: 50%; top: -36px; transform: translateX(-50%); --crest: 160px; z-index: 3; }
.salon-head h1 { color: #f7e3a1; text-shadow: 0 2px 6px rgba(0, 0, 0, .7); }
.salon-head p { color: var(--cream); }
.salon-table { margin-top: 14px; }
.salon-seat { background: rgba(12, 7, 5, .55); border-color: rgba(217, 169, 63, .25); }
.salon-seat:hover { border-color: rgba(240, 211, 138, .7); }
.salon-name { font-size: 13.5px; color: var(--cream); }
.salon-proof { padding: 14px 18px; background: rgba(20, 11, 7, .88); border: 1.5px solid #d9a93f; outline: 1px solid rgba(217, 169, 63, .45); outline-offset: 3px; }
.salon-clue { background: rgba(12, 7, 5, .7); }
.salon-foot { background: none; }
@media (max-height: 460px) {
  .salon { padding-top: 26px; gap: 10px; }
  .salon-board { --corner: 46px; padding: 26px 22px 14px; }
  .salon-board .crest { --crest: 110px; top: -24px; }
  .salon-head h1 { font-size: 26px; }
  .salon-head p { font-size: 14px; margin-top: 2px; }
  .salon-table { margin-top: 8px; gap: 6px; }
}

/* v0.9.15: omroep bovenin het midden, twee keer zo groot */
.announce {
  top: calc(12px + env(safe-area-inset-top, 0px)); bottom: auto;
  width: min(1000px, calc(100% - 160px)); gap: 20px; padding: 16px 28px 16px 16px;
  border-width: 2px; animation: anInTop .45s ease-out;
}
.announce-portrait { width: 120px; }
.announce-text { gap: 8px; font-size: clamp(18px, 2.2vw, 28px); line-height: 1.32; }
.announce-text strong { font-size: clamp(12px, 1.2vw, 16px); }
@keyframes anInTop { from { opacity: 0; transform: translate(-50%, -14px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (max-height: 460px) {
  .announce { width: min(700px, calc(100% - 270px)); gap: 10px; padding: 6px 12px 6px 6px; }
  .announce-text { font-size: 15.5px; }
  .announce-portrait { width: 64px; }
  .announce-text { gap: 3px; }
  .announce-text strong { font-size: 11px; }
}
/* zoomknop op het maximum (of minimum): grijs */
.zoom-tools .btn-icon:disabled, .zoom-tools .btn-icon.is-max { opacity: .38; filter: grayscale(1); cursor: default; }

/* v0.9.15: muziekknop op verhaal-, score- en teaserschermen */
.story { position: relative; }
.screen-music { position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); right: calc(12px + env(safe-area-inset-right, 0px)); z-index: 6; }
.screen-settings { position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); right: calc(64px + env(safe-area-inset-right, 0px)); z-index: 6; } /* v0.9.32: tandwiel links van de muziekknop */
.gear-icon path, .gear-icon circle { stroke: var(--gold-light); stroke-width: 1.5; }
.menu-buttons.is-extras .is-locked { opacity: .6; }
/* Tom, 22 okt: Terug in het Extra's-submenu even breed als de andere knoppen, met meer ruimte erboven */
.menu-buttons .menu-back { margin-top: 12px; }
.lock-icon { width: 15px; height: 15px; margin: -2px 7px 0 0; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.overlay-jukebox .overlay-card { width: min(520px, 100%); }
.jb-list { list-style: none; margin: 4px 0 0; padding: 0; max-height: calc(var(--app-h) - 170px); overflow-y: auto; text-align: left; }
.jb-row { display: flex; align-items: center; gap: 12px; padding: 7px 4px; border-bottom: 1px solid rgba(217, 169, 63, .2); }
.jb-row:last-child { border-bottom: 0; }
.jb-play { flex: none; width: 38px; height: 38px; min-height: 38px; }
.jb-icon .jb-tri { fill: var(--gold-light); stroke: none; }
.jb-icon .jb-bars { stroke: var(--gold-light); stroke-width: 3; display: none; }
.jb-row.is-playing .jb-tri { display: none; }
.jb-row.is-playing .jb-bars { display: block; }
.jb-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.jb-text b { font-weight: 600; color: var(--cream); }
.jb-row.is-current .jb-text b { color: var(--gold-light); }
.jb-text small { font-size: 13px; opacity: .75; }
/* opnieuw gebouwd 22 okt: ruim spoelvlak (20 px hoog) met een dunne balk in het midden; slepen kan */
.jb-bar { position: relative; display: block; height: 20px; margin-top: 0; visibility: hidden; cursor: pointer; touch-action: none; }
.jb-bar::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 6px; margin-top: -3px; background: rgba(217, 169, 63, .18); border-radius: 3px; }
.jb-row.is-current .jb-bar { visibility: visible; }
.jb-fill { position: absolute; left: 0; top: 50%; display: block; height: 6px; margin-top: -3px; width: 0; background: var(--gold-light); border-radius: 3px; transition: width 250ms linear; }

/* scorescherm: perron niet gedimd, kaart links */
.result-screen, .teaser { cursor: default; }
.result-card .stats { max-width: none; }
/* Tom, 22 okt: de uitslag licht regel voor regel op (salon.js mountResult); de knoppen komen aan het eind */
.result-card.is-revealing .story-title { opacity: 0; transform: translateY(-6px); transition: opacity .6s, transform .6s; }
.result-card.is-revealing.is-title .story-title { opacity: 1; transform: none; }
.result-card.is-revealing .stats > div { opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .35s; }
.result-card .stats > div.is-shown { opacity: 1; transform: none; }
.result-card.is-revealing .overlay-buttons-row { opacity: 0; pointer-events: none; transition: opacity .5s; }
.result-card.is-revealing.is-done .overlay-buttons-row { opacity: 1; pointer-events: auto; }
.result-card.is-revealing .res-join { opacity: 0; transition: opacity .5s; }   /* Tom, 25 okt: tegelijk met de knoppen */
.result-card.is-revealing.is-done .res-join { opacity: 1; }
.result-card.is-revealing:not(.is-done) { cursor: pointer; }
.result-card .stats dd.is-pop { animation: resPop .35s ease-out; }
@keyframes resPop { 40% { transform: scale(1.25); color: #fff6d0; } }
.result-card .stats dd { display: inline-block; font-variant-numeric: tabular-nums; }
.res-stamp { flex: 0 0 auto; align-self: center; margin-left: auto; margin-right: 12px; padding: 1px 8px; border: 2px double var(--gold); color: var(--gold-light); font: 600 12px/1.4 var(--font-body); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; opacity: 0; transform: rotate(-6deg) scale(1.6); pointer-events: none; }
.result-card.is-record .res-stamp { opacity: 1; transform: rotate(-6deg) scale(1); transition: opacity .25s, transform .25s cubic-bezier(.2, 1.6, .4, 1); }
@media (prefers-reduced-motion: reduce) { .result-card .stats dd.is-pop { animation: none; } }
.result-card .stats dd.ok { color: #9fd48a; }
.result-card .stats dd.bad { color: #f0a08a; }
.result-card .overlay-buttons-row { margin-top: 16px; }
@media (max-height: 460px) {
  .result-card.deco-panel { padding-top: 26px; padding-bottom: 16px; }
  .result-card .crest { display: none; }
  .result-card .story-title { font-size: 26px; margin-bottom: 4px; }
  .result-card .stats div { padding: 2px 0; font-size: 14px; }
  .result-card .overlay-buttons-row { margin-top: 10px; }
}

/* teaserscherm */
.teaser-card.deco-panel { padding-top: 40px; }
/* v0.9.21: teasertekst van Tom boven "Milo keert terug in…" */
.teaser-tagline { margin: 0 0 14px; font-style: italic; font-size: 15px; line-height: 1.45; color: var(--cream); }
.teaser-returns { margin: 0 0 6px; font: 600 13px/1 var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: #f0d38a; }
.teaser-logo { display: block; width: 100%; max-width: 440px; height: auto; margin: 0 auto 10px; filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .6)); }
.teaser-note { margin: 0 0 12px; color: var(--cream-quiet); font-size: 15px; }
.teaser-form { margin: 0 auto 12px; max-width: 400px; text-align: left; }
.teaser-form .teaser-note { text-align: center; }
.teaser-form iframe { max-width: 100%; }
.teaser-actions { display: flex; flex-direction: column; align-items: stretch; gap: 9px; max-width: 400px; margin: 0 auto; }
.teaser-actions a.btn { text-decoration: none; display: flex; align-items: center; justify-content: center; }
.teaser-row { display: flex; gap: 9px; }
.teaser-row .btn { flex: 1; }
.teaser-credits { margin: 14px 0 0; font-size: 13px; color: var(--cream-quiet); letter-spacing: .04em; }
@media (max-height: 460px) {
  .teaser-card.deco-panel { padding-top: 22px; padding-bottom: 14px; }
  .teaser-logo { max-width: 300px; margin-bottom: 4px; }
  .teaser-note { font-size: 13px; margin-bottom: 8px; }
  .teaser-tagline { font-size: 13px; line-height: 1.35; margin-bottom: 8px; }
  .teaser-actions { gap: 6px; }
  .teaser-actions .btn { min-height: 34px; padding-top: 4px; padding-bottom: 4px; font-size: 14px; }
  .teaser-credits { margin-top: 8px; font-size: 12px; }
}

/* deelvenster */
.overlay-share .overlay-card { width: min(400px, 100%); }
.share-name { width: 100%; margin: 0 0 12px; padding: 10px 12px; font: inherit; font-size: 16px; color: var(--cream); background: rgba(255, 255, 255, .06); border: 1px solid rgba(217, 169, 63, .55); border-radius: 4px; }
.share-name::placeholder { color: var(--cream-quiet); }
.share-options { flex-direction: column; }
.share-status { min-height: 1.3em; margin: 10px 0 0; font-size: 14px; color: #f0d38a; }
@media (max-height: 460px) {
  .share-options { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .share-name { margin-bottom: 8px; padding: 6px 10px; }
}
/* zoomknoppen boven de plaat (sinds de zijpanelen lag de plaat erover) */
.search .zoom-tools { z-index: 5; }

/* ---------- collage-intro (v0.9.16) ---------- */
.collage { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 16px; background: radial-gradient(ellipse at 50% 40%, #1a1410, #0b0907 75%); cursor: var(--cur-hand); cursor: var(--cur-hand-hd); user-select: none; -webkit-tap-highlight-color: transparent; }
.collage-box { position: relative; }
.collage-box > .collage-stage { position: absolute; inset: 0; }
.collage-frame { padding: 8px; border: 2px solid var(--gold); outline: 1px solid var(--gold-dark); outline-offset: 4px; background: #0b0907; box-shadow: 0 10px 40px rgba(0, 0, 0, .6); }
.collage-stage { position: relative; overflow: hidden; background: #0b0907; transition: filter .08s; }
.collage-stage.is-in { animation: collage-in .7s ease; }
@keyframes collage-in { from { opacity: 0; } to { opacity: 1; } }
.cstrip { position: absolute; left: 0; width: 100%; overflow: hidden; background: #000; }
.cwrap { position: absolute; left: 0; top: 0; width: 100%; transform-origin: 50% 0; filter: brightness(.1) saturate(.5); transition: filter 1.1s ease; will-change: transform; }
.cimg { position: relative; display: block; width: 100%; height: 100%; max-width: none; }   /* relative: effecten met "under" liggen erachter */
.cstrip.is-on .cwrap { filter: none; }
/* v0.9.29 (Tom): eerder getoonde stroken donkerder (was .55) */
.cstrip.is-past .cwrap { filter: brightness(.16) saturate(.5); }   /* Tom, 23 okt: donkerder (was .32), de aandacht naar de actieve strook en de tekst */
/* effecten in een strook (v0.9.18) */
.cfx { position: absolute; pointer-events: none; overflow: hidden; }
.cfx-scroll { background-repeat: repeat-x; background-size: auto 100%; }
.cfx-blink { border-radius: 50%; background: radial-gradient(circle, rgba(255, 236, 170, .95) 0%, rgba(255, 210, 120, .55) 22%, rgba(255, 200, 110, 0) 70%); opacity: 0; animation: cfx-blink 5s linear infinite; mix-blend-mode: screen; }
@keyframes cfx-blink { 0%, 100% { opacity: 0; } 4% { opacity: .9; } 8% { opacity: 0; } 12% { opacity: .9; } 16% { opacity: 0; } 20% { opacity: .9; } 24% { opacity: 0; } }
.cfx-ghost { opacity: 0; overflow: visible; }
/* v0.9.24: glinstering (medaille) */
.cfx-glint { overflow: visible; opacity: 0; mix-blend-mode: screen; animation: cfx-glint 3.2s ease-in-out infinite;
  background: radial-gradient(circle, rgba(255, 246, 210, 1) 0%, rgba(255, 220, 140, .6) 12%, rgba(255, 200, 100, 0) 38%),
    linear-gradient(90deg, transparent 47%, rgba(255, 248, 220, .95) 50%, transparent 53%),
    linear-gradient(0deg, transparent 47%, rgba(255, 248, 220, .95) 50%, transparent 53%);
  -webkit-mask: radial-gradient(circle, #000 0%, #000 25%, transparent 60%); mask: radial-gradient(circle, #000 0%, #000 25%, transparent 60%); }
@keyframes cfx-glint { 0%, 70%, 100% { opacity: 0; transform: scale(.4) rotate(0deg); } 80% { opacity: 1; transform: scale(1) rotate(25deg); } 90% { opacity: .2; transform: scale(.7) rotate(45deg); } }
@media (prefers-reduced-motion: reduce) { .cfx-glint { animation: none; } }
/* v0.9.24: inzet in een gouden kadertje, vast in de strook */
.cinset { box-sizing: border-box; position: absolute; z-index: 3; opacity: 0; transform: scale(.85); pointer-events: none; border: 2px solid var(--gold); outline: 1px solid var(--gold-dark); outline-offset: 3px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .65), 0 0 0 4px rgba(10, 6, 4, .85); transition: opacity .45s ease, transform .45s cubic-bezier(.3, 1.4, .5, 1); background: #0b0907; }
.cinset img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cinset.is-in { opacity: 1; transform: scale(1); }
.cstrip.is-past .cinset { filter: brightness(.16) saturate(.5); }   /* donker mee met de strook */
.cinset { transition: opacity .45s ease, transform .45s cubic-bezier(.3, 1.4, .5, 1), filter 1.1s ease; }
.cinset.is-beat { animation: inset-beat .42s ease-out; }
@keyframes inset-beat { 0% { transform: scale(1); } 30% { transform: scale(1.09); box-shadow: 0 6px 18px rgba(0,0,0,.65), 0 0 0 4px rgba(10,6,4,.85), 0 0 22px rgba(240,211,138,.7); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .cinset.is-beat { animation: none; } }
.cfx-ghost img { display: block; width: 100%; height: 100%; object-fit: contain; }
.cfx-ghost.is-appear { animation: cfx-appear 520ms cubic-bezier(.2, 1.4, .4, 1) both; transform-origin: 20% 80%; } /* v0.9.32: tevoorschijn getoverd */
@keyframes cfx-appear { 0% { opacity: 0; transform: scale(.2) rotate(-25deg); filter: brightness(2.2); } 60% { opacity: 1; filter: brightness(1.5); } 100% { opacity: 1; transform: none; filter: none; } }
.cfx-ghost.is-bob { animation: cfx-bob 3.4s ease-in-out infinite; transform-origin: 50% 80%; }
@keyframes cfx-bob { 0%, 100% { transform: translateY(0) rotate(-1.2deg); } 50% { transform: translateY(-4px) rotate(1.4deg); } }
.cfx-shadow { opacity: 0; transform: translateX(60%); background: radial-gradient(ellipse at 50% 50%, rgba(10, 6, 4, .92) 0%, rgba(10, 6, 4, .7) 40%, rgba(10, 6, 4, 0) 72%); transition: opacity 1.4s ease, transform 2.2s cubic-bezier(.3, .1, .3, 1); }
.cfx-shadow.is-in { opacity: 1; transform: none; }
.cgutter { position: absolute; left: 0; width: 100%; background: #0b0907; }
.cgutter::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -.75px; background: linear-gradient(90deg, transparent, var(--gold) 15%, var(--gold-light) 50%, var(--gold) 85%, transparent); opacity: .4; }
.cgutter::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px; background: var(--gold-light); transform: rotate(45deg); opacity: .5; }
.creact { display: flex; justify-content: space-between; background: #0b0907; }
.creact img { height: 100%; width: 15.55%; object-fit: cover; outline: 1px solid rgba(217, 169, 63, .55); opacity: 0; transform: scale(.94); filter: brightness(.1); transition: opacity .35s ease, transform .35s ease, filter .6s ease; }
.creact img.is-in { opacity: 1; transform: none; filter: none; }
.creact.is-past img.is-in { filter: brightness(.16) saturate(.5); }
.creact.is-square { justify-content: center; gap: 1.45%; }
.creact.is-square img { width: auto; aspect-ratio: 1; }
.csnow { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .cfx-blink { animation: none; } }
.collage-stage.is-flicker { filter: brightness(.25); transition: filter .03s; }
.collage-stage::after { content: ""; position: absolute; inset: 0; background: rgba(8, 16, 46, 0); pointer-events: none; transition: background .7s ease; }
.collage-stage.is-dark { filter: brightness(.13) saturate(.35); transition: filter .7s ease; }
.collage-stage.is-dark::after { background: rgba(8, 16, 46, .45); }
.collage-text {
  /* art-deco-kader met doorzichtige achtergrond, óp de collage (v0.9.17) */
  position: absolute; left: 0; right: 0; z-index: 2; width: fit-content; max-width: 74%; margin: 0 auto;
  padding: .45em 1.5em .5em; text-align: center; font-size: var(--collage-fs, 17px); line-height: 1.42; color: var(--cream);
  background: rgba(11, 9, 7, .66); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  border: 1px solid rgba(217, 169, 63, .85);
  box-shadow: inset 0 0 0 3px rgba(11, 9, 7, .55), inset 0 0 0 4px rgba(217, 169, 63, .35), 0 4px 18px rgba(0, 0, 0, .45);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .8); pointer-events: none;
}
.collage-text::before, .collage-text::after { content: ""; position: absolute; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; background: var(--gold-light); transform: rotate(45deg); box-shadow: 0 0 0 2px rgba(11, 9, 7, .8); }
.collage-text::before { left: -4px; }
.collage-text::after { right: -4px; }
.collage-text.is-center { top: 50%; transform: translateY(-50%); background: rgba(11, 9, 7, .4); font-size: calc(var(--collage-fs, 17px) * 1.25); }
.collage-text.is-empty { display: none; }
.collage-text b { color: var(--gold-light); font-weight: 600; }
.collage-text.is-new { animation: collage-text-in 380ms ease; }
.collage-text.is-center.is-new { animation: collage-text-fade 380ms ease; }
@keyframes collage-text-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes collage-text-fade { from { opacity: 0; } to { opacity: 1; } }
.collage.is-small .collage-text { max-width: 88%; padding: .35em 1.1em .4em; line-height: 1.35; }
.collage-hint { position: absolute; right: calc(18px + env(safe-area-inset-right, 0px)); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); font: 400 32px/1 var(--font-display); color: var(--gold-light); opacity: .7; animation: collage-hint 2.2s ease-in-out infinite; pointer-events: none; }
@keyframes collage-hint { 50% { opacity: .25; transform: translateX(4px); } }
@media (max-height: 500px) {
  .collage { padding: 8px; }
  .collage-frame { padding: 5px; outline-offset: 3px; }
}
@media (prefers-reduced-motion: reduce) { .collage-hint { animation: none; } .collage-stage.is-in { animation: none; } .collage-text.is-new { animation: none; } }

/* ---------- hoofdmenu v0.9.17: nieuw menubeeld ---------- */
/* desktop en tablet: menu iets naar links, over de lege sneeuwhelling, zodat Milo rechts vrij staat */
.start.menu.has-bg {
  background:
    linear-gradient(90deg, rgba(6, 8, 14, .7) 0%, rgba(6, 8, 14, .4) 40%, rgba(6, 8, 14, 0) 62%),
    var(--story-bg) 72% 60% / cover no-repeat,
    var(--night);
}
.start.menu { align-items: flex-start; }
.start.menu .menu-col { margin-left: max(16px, calc(38vw - min(560px, 56vw) / 2)); }
/* taalkeuze: zachte donkere gloed, zodat hij leesbaar blijft op het verlichte perron */
.menu-flags { padding: 10px 34px; background: radial-gradient(ellipse at 50% 50%, rgba(6, 8, 14, .85) 0%, rgba(6, 8, 14, .7) 50%, rgba(6, 8, 14, 0) 75%); }
.menu-flags .lang-word { color: rgba(226, 180, 90, .8); text-shadow: 0 1px 3px #000, 0 0 10px rgba(0, 0, 0, .9); }
.menu-flags .lang-word.is-on { color: var(--gold-light); }
/* mobiel liggend: logo boven het menu, menu in het midden */
@media (max-height: 460px) {
  .start.menu { align-items: center; justify-content: center; padding: 8px 12px 38px; }
  .start.menu .menu-col { width: auto; margin: auto; flex-direction: column; flex-wrap: nowrap; gap: 6px; }
  .menu-logos { width: auto; margin: 0; flex-direction: column; }
  .menu-logos .logo-series { width: 190px; }
  .menu-logos .logo-part { width: 170px; margin-top: -4px; }
  .start.menu .menu-card.deco-panel { width: min(400px, 70vw); padding: 14px 20px; }
  .menu-buttons .btn { min-height: 32px; }
  .menu-main { min-height: 38px !important; }
  .start.menu.has-bg { background: linear-gradient(rgba(6, 8, 14, .35), rgba(6, 8, 14, .35)), var(--story-bg) 70% 60% / cover no-repeat, var(--night); }
}
/* mobiel staand: alles in het midden, Milo blijft rechts in beeld */
@media (max-width: 640px) and (orientation: portrait) {
  .start.menu { align-items: center; }
  .start.menu .menu-col { width: 100%; margin: auto; }
  .start.menu.has-bg { background: linear-gradient(rgba(6, 8, 14, .4), rgba(6, 8, 14, .4)), var(--story-bg) 76% 60% / cover no-repeat, var(--night); }
}
/* opnieuw gebouwd 22 okt (Tom): tandwiel en muziekknop staan normaal rechtsboven; op een staande telefoon onder het menu, niet over het logo */
.menu-corner { display: contents; }
@media (max-width: 640px) and (orientation: portrait) {
  .menu-corner { display: flex; justify-content: center; gap: 14px; margin-top: 14px; }
  .menu-corner .screen-music, .menu-corner .screen-settings { position: static; }
}

/* ---------- v0.9.18: teaser op mobiel liggend: kaart gecentreerd in het linkerdeel, naast Milo ---------- */
@media (max-height: 460px) {
  .story.has-bg.teaser { justify-content: center; padding-right: 44vw; }
  .story.has-bg.teaser .story-card { margin-left: 0; margin-right: 0; }
}

/* v0.9.19: tekstkader links of rechts in de strook (text.align) */
.collage-text.is-left { margin-left: 3%; margin-right: auto; max-width: 46%; }
.collage-text.is-right { margin-left: auto; margin-right: 3%; max-width: 46%; }
.collage.is-small .collage-text.is-left, .collage.is-small .collage-text.is-right { max-width: 52%; }

/* v0.9.19: lichteffect (flikkerende lamp) als overlay óver de zoekplaat; interne resolutie half, weergave op plaatgrootte */
.plate-fx { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity 55ms linear; }
.is-blackout .plate-fx { display: none; }
/* v0.9.23: flikkerende kaarsvlam (plate-fx.js, type candle) */
.plate-candle { position: absolute; pointer-events: none; transform: translate(-50%, -50%); opacity: .7; mix-blend-mode: screen; transition: opacity 90ms linear, transform 90ms linear;
  background: radial-gradient(ellipse 30% 42% at 50% 46%, rgba(255, 244, 205, .85) 0%, rgba(255, 196, 110, .45) 35%, rgba(255, 150, 60, 0) 100%), radial-gradient(circle at 50% 50%, rgba(255, 170, 80, .28) 0%, rgba(255, 140, 50, .12) 45%, rgba(255, 120, 40, 0) 70%); }
.is-blackout .plate-candle { display: none; }
/* v0.9.24: damp uit een kopje en een boek dat uit de kast schuift (plate-fx.js) */
.plate-steam { position: absolute; pointer-events: none; }
.plate-slide, .plate-slide-gap { position: absolute; pointer-events: none; }
.plate-slide { background-repeat: no-repeat; transition: transform .9s cubic-bezier(.3, .1, .3, 1); box-shadow: -3px 2px 6px rgba(0, 0, 0, .55); }
.plate-slide-gap { background: linear-gradient(90deg, #0b0705, #1a0f0a); opacity: 0; transition: opacity .9s ease; }
.plate-slide.is-clipped { box-shadow: none; filter: drop-shadow(-3px 2px 4px rgba(0, 0, 0, .6)); }   /* v0.9.41: schaduw langs de vorm van het boek */
.plate-slide-face { position: absolute; inset: 0; background-repeat: no-repeat; }
@media (prefers-reduced-motion: reduce) { .plate-steam, .plate-slide, .plate-slide-gap { display: none; } }   /* v0.9.23: geen lampknipperen tijdens de stroomuitval */
@media (prefers-reduced-motion: reduce) { .plate-fx, .plate-candle { display: none; } }

/* ---------- v0.9.20: stroomuitval met zaklamp ---------- */
.plate-dark {
  position: absolute; inset: 0; z-index: 6; touch-action: none; cursor: none;
  --bx: 50%; --by: 50%; --br: 160px;
  background: rgba(3, 4, 8, 0); transition: background .6s ease;
}
.plate-dark.is-flick { background: rgba(3, 4, 8, .7); transition: background .03s; }
.plate-dark.is-dark { background: rgba(3, 4, 8, .95); }
.plate-dark.has-beam {
  background: radial-gradient(circle at var(--bx) var(--by), rgba(255, 238, 200, .08) 0, rgba(255, 230, 180, 0) calc(var(--br) * .55), rgba(3, 4, 8, .95) var(--br));
}
.plate-dark.is-light { background: rgba(3, 4, 8, 0); transition: background .8s ease; pointer-events: none; }
.announce.is-arthur { z-index: 8; top: auto !important; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); animation: anInBottom .4s ease-out; }
@keyframes anInBottom { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translateX(-50%); } }
/* lichtknopje op de testplaat: koperen plaatje met draaischakelaar */
/* v0.9.23: glinstering op het lichtknopje als de lichtbundel erop valt */
.plate-glint { position: absolute; width: var(--gs, 50px); height: var(--gs, 50px); transform: translate(-50%, -50%) scale(.6); opacity: 0; pointer-events: none; transition: opacity .35s ease, transform .35s ease;
  background: radial-gradient(circle, rgba(255, 236, 170, .95) 0%, rgba(255, 210, 110, .55) 14%, rgba(255, 190, 80, 0) 42%),
    linear-gradient(90deg, transparent 46%, rgba(255, 240, 200, .9) 50%, transparent 54%),
    linear-gradient(0deg, transparent 46%, rgba(255, 240, 200, .9) 50%, transparent 54%);
  -webkit-mask: radial-gradient(circle, #000 0%, #000 30%, transparent 62%); mask: radial-gradient(circle, #000 0%, #000 30%, transparent 62%); mix-blend-mode: screen; }
.plate-glint.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); animation: glint-pulse 1.2s ease-in-out infinite; }
@keyframes glint-pulse { 0%, 100% { filter: brightness(1); rotate: 0deg; } 50% { filter: brightness(1.5); rotate: 20deg; } }
.plate-dark.is-light .plate-glint { display: none; }
@media (prefers-reduced-motion: reduce) { .plate-glint.is-on { animation: none; } }
.plate-switch {
  position: absolute; width: 30px; height: 44px; margin: -22px 0 0 -15px; pointer-events: none;
  border-radius: 5px; background: linear-gradient(160deg, #e8c271, #9c6b22 60%, #6e4a17);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .6), inset 0 0 0 2px rgba(255, 230, 160, .35);
}
.plate-switch::before { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fbe6a8, #7a5418); box-shadow: 0 1px 2px rgba(0,0,0,.5); }
.plate-switch::after { content: ""; position: absolute; left: 50%; top: 50%; width: 4px; height: 12px; margin: -6px -2px; background: #3a2508; border-radius: 2px; transform: rotate(35deg); }

/* v0.9.24: uitleg-meldingen (js/ui/tips.js) */
.tip-layer { position: fixed; inset: 0; z-index: 80; background: rgba(5, 3, 2, .35); opacity: 0; transition: opacity .25s ease; cursor: var(--cur-hand); cursor: var(--cur-hand-hd); }
.tip-layer.is-in { opacity: 1; }
.tip-ring { position: absolute; border: 2px solid #f0d38a; border-radius: 10px; box-shadow: 0 0 0 9999px rgba(5, 3, 2, .3), 0 0 18px rgba(240, 211, 138, .8); animation: tip-pulse 1.4s ease-in-out infinite; pointer-events: none; }
@keyframes tip-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.tip-card { position: absolute; max-width: min(340px, calc(100vw - 20px)); padding: 14px 16px 12px; background: var(--night); border: 2px solid var(--gold); outline: 1px solid var(--gold-dark); outline-offset: 3px; color: var(--cream); font-size: 16px; line-height: 1.4; box-shadow: 0 8px 26px rgba(0, 0, 0, .6); }
.tip-card p { margin: 0 0 8px; }
.tip-ok { display: block; text-align: right; font-size: 13px; letter-spacing: .12em; color: #f0d38a; }
.tip-card::after { content: ""; position: absolute; left: var(--ax, 50%); top: -9px; width: 14px; height: 14px; margin-left: -7px; background: var(--night); border-left: 2px solid var(--gold); border-top: 2px solid var(--gold); transform: rotate(45deg); }
.tip-card.is-above::after { top: auto; bottom: -9px; border: 0; border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold); }
@media (max-height: 460px) { .tip-card { font-size: 15px; padding: 10px 12px 8px; } }
@media (prefers-reduced-motion: reduce) { .tip-ring { animation: none; } }

/* v0.9.27: laadteken als een plaat nog beelden laadt (trage verbinding) */
.collage.is-loading::after { content: '• • •'; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #d4af37; font-size: 28px; letter-spacing: 6px; animation: collage-load 1.2s ease-in-out infinite; pointer-events: none; }
@keyframes collage-load { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }


/* v0.9.28: eigen cursors (Toms beelden, assets/ui/cursors), alleen zichtbaar met een muis */
:root {
  --cur-std: url('../assets/ui/cursors/cursor-standaard.png') 1 1, auto;
  --cur-std-hd: -webkit-image-set(url('../assets/ui/cursors/cursor-standaard.png') 1x, url('../assets/ui/cursors/cursor-standaard@2x.png') 2x) 1 1, auto;
  /* v0.9.29 (Tom): vergrootglas boven een container (bekijk van dichtbij); klikpunt = midden van de lens */
  --cur-open: url('../assets/ui/cursors/cursor-vergrootglas.png') 10 9, zoom-in;
  --cur-open-hd: -webkit-image-set(url('../assets/ui/cursors/cursor-vergrootglas.png') 1x, url('../assets/ui/cursors/cursor-vergrootglas@2x.png') 2x) 10 9, zoom-in;
  --cur-hand: url('../assets/ui/cursors/cursor-hand.png') 3 1, pointer;
  --cur-hand-hd: -webkit-image-set(url('../assets/ui/cursors/cursor-hand.png') 1x, url('../assets/ui/cursors/cursor-hand@2x.png') 2x) 3 1, pointer;
  --cur-talk: url('../assets/ui/cursors/cursor-praten.png') 16 16, pointer;
  --cur-talk-hd: -webkit-image-set(url('../assets/ui/cursors/cursor-praten.png') 1x, url('../assets/ui/cursors/cursor-praten@2x.png') 2x) 16 16, pointer;
  /* v0.9.29: zaklamp tijdens de stroomuitval (Toms beeld); klikpunt = de lens */
  --cur-lamp: url('../assets/ui/cursors/cursor-zaklamp.png') 5 5, crosshair;
  --cur-lamp-hd: -webkit-image-set(url('../assets/ui/cursors/cursor-zaklamp.png') 1x, url('../assets/ui/cursors/cursor-zaklamp@2x.png') 2x) 5 5, crosshair;
}
.plate-dark.has-beam { cursor: var(--cur-lamp); cursor: var(--cur-lamp-hd); }
:root {
  /* v0.9.29: potlood boven de bladzijde van het boek (Toms beeld); klikpunt = de punt, linksonder */
  --cur-pencil: url('../assets/ui/cursors/cursor-potlood.png') 1 30, crosshair;
  --cur-pencil-hd: -webkit-image-set(url('../assets/ui/cursors/cursor-potlood.png') 1x, url('../assets/ui/cursors/cursor-potlood@2x.png') 2x) 1 30, crosshair;
}
body, .plate-viewport, .story, .collage, .result-screen, .teaser, .result-card { cursor: var(--cur-std); cursor: var(--cur-std-hd); }
.plate-viewport.is-talk { cursor: var(--cur-talk); cursor: var(--cur-talk-hd); }
.plate-viewport.is-open { cursor: var(--cur-open); cursor: var(--cur-open-hd); }
.ins-stage.is-loupe, .ins-stage.is-flippable { cursor: var(--cur-open); cursor: var(--cur-open-hd); } /* v0.9.32: vergrootglas in de close-up */
.plate-viewport.is-dragging { cursor: grabbing; }

/* v0.9.28: testmodus, verhaal overslaan */
.test-story-skip { position: absolute; left: 12px; top: 12px; z-index: 40; background: rgba(10, 30, 24, .9); border: 1.5px dashed #7fc29b; font-size: 12px; }

/* v0.9.28: het klikhandje ook op alle knoppen en links */
button:not(:disabled), a[href], [role="button"], .btn:not(:disabled), label { cursor: var(--cur-hand); cursor: var(--cur-hand-hd); }

/* v0.9.28: lange zoeklijst (15 tot 25 voorwerpen) past in de balk */
.panel.deco-panel .items-grid.is-dense { max-height: none; gap: 1px 14px; }
.panel.deco-panel .items-grid.is-dense li { font-size: 16px; line-height: 1.22; }
.panel.deco-panel .items-grid.is-denser { max-height: none; gap: 0 12px; }
.panel.deco-panel .items-grid.is-denser li { font-size: 14px; line-height: 1.18; }

/* ---------- fotoscène (Tom, 22 okt; js/scenes/photo.js) ---------- */
.photo { flex: 1; position: relative; overflow: hidden; background: #0b0907; cursor: default; }
.ph-station, .ph-view { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.ph-station { padding: 16px; background: radial-gradient(ellipse at 50% 40%, #1a1410, #0b0907 75%); }
@media (max-height: 499px), (max-width: 699px) { .ph-station { padding: 8px; } }
.ph-station[hidden], .ph-view[hidden], .ph-print[hidden] { display: none; }
.ph-station { transition: opacity .5s ease, transform .6s ease; transform-origin: 17% 68%; }
.ph-station.is-leaving { opacity: 0; transform: scale(1.12); }
.ph-plate { position: relative; aspect-ratio: 1672 / 941; }   /* breedte uit sizePlate() in photo.js */
.ph-station-img { display: block; width: 100%; height: 100%; }
.ph-camera { position: absolute; padding: 0; background: none; border: 0; border-radius: 14px; cursor: var(--cur-hand); cursor: var(--cur-hand-hd); }
/* aanwijzing midden op het beeld, in de stijl van de tekstkaders in de verhalen (.collage-text) */
.ph-hint {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; width: max-content; max-width: 74%; margin: 0;
  padding: .45em 1.5em .5em; text-align: center; font: 600 clamp(15px, 1.6vw, 21px)/1.42 var(--font-body); color: var(--cream);
  background: rgba(11, 9, 7, .66); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  border: 1px solid rgba(217, 169, 63, .85);
  box-shadow: inset 0 0 0 3px rgba(11, 9, 7, .55), inset 0 0 0 4px rgba(217, 169, 63, .35), 0 4px 18px rgba(0, 0, 0, .45);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .8); opacity: 0; transition: opacity .6s ease; pointer-events: none;
}
.ph-hint::before, .ph-hint::after { content: ""; position: absolute; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; background: var(--gold-light); transform: rotate(45deg); box-shadow: 0 0 0 2px rgba(11, 9, 7, .8); }
.ph-hint::before { left: -4px; }
.ph-hint::after { right: -4px; }
.ph-station.is-hinted .ph-hint { opacity: 1; }

.ph-view { opacity: 0; transition: opacity .45s ease; }
.ph-view.is-on { opacity: 1; }
.photo.is-ending .ph-view { opacity: 0; transition: opacity .7s ease; }
/* camera: vierkante zoeker met de meter eronder; op een lage scherm (liggende telefoon) staat de meter ernaast */
.ph-rig { --sq: min(86vw, calc((var(--app-h) - 40px) / 1.26)); display: flex; flex-direction: column; align-items: center; }
.ph-finder { position: relative; width: var(--sq); height: var(--sq); }
.ph-lens { position: absolute; left: 5%; top: 5%; width: 90%; height: 90%; object-fit: cover; border-radius: 6%; }
.ph-flash { position: absolute; left: 5%; top: 5%; width: 90%; height: 90%; border-radius: 6%; background: #fff; opacity: 0; pointer-events: none; }
.ph-flash.is-flash { animation: phFlash .22s ease-out; }
@keyframes phFlash { from { opacity: .9; } to { opacity: 0; } }
.ph-zoeker { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ph-meter { position: relative; width: var(--sq); margin-top: calc(var(--sq) * -.1); }
.ph-meter-img, .ph-needle { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ph-meter-img { position: static; display: block; height: auto; }
.ph-needle { overflow: visible; }
.ph-knob { position: absolute; height: auto; pointer-events: none; }
.ph-shutter { position: absolute; padding: 0; background: none; border: 0; border-radius: 50%; cursor: var(--cur-hand); cursor: var(--cur-hand-hd); }
.ph-shutter:active { transform: scale(.96); }
.ph-shutter:focus-visible, .ph-camera:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }
@media (max-height: 600px) and (min-aspect-ratio: 4 / 3) {
  .ph-rig { --sq: min(calc(var(--app-h) - 24px), calc((100vw - 48px) / 2.3)); flex-direction: row; gap: 2vw; }
  .ph-meter { width: calc(var(--sq) * 1.25); margin-top: 0; }
}

/* de gemaakte foto: verschijnt rustig als herinnering, niet uit de camera */
.ph-print { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: rgba(6, 8, 14, .74); opacity: 0; transition: opacity .35s ease; }
.ph-print.is-in { opacity: 1; }
/* 22 okt: de afdrukken zijn uitgeknipt (transparante hoeken), dus de schaduw volgt het papier (drop-shadow) */
.ph-print-img { width: min(76vw, calc(var(--app-h) - 130px)); aspect-ratio: 1; object-fit: contain; opacity: 0; transform: scale(.95); filter: brightness(1.5) saturate(.6) drop-shadow(0 12px 28px rgba(0, 0, 0, .7)); transition: opacity 1.2s ease, transform 1.6s ease, filter 1.8s ease; }
.ph-print.is-in .ph-print-img { opacity: 1; transform: scale(1); filter: drop-shadow(0 12px 28px rgba(0, 0, 0, .7)); }
.ph-print-actions { display: flex; gap: 12px; opacity: 0; transition: opacity .4s ease; pointer-events: none; }
.ph-print.is-ready .ph-print-actions { opacity: 1; pointer-events: auto; }
.ph-print.is-kept .ph-print-actions { opacity: 0; pointer-events: none; }
.ph-print.is-kept .ph-print-img { transform: scale(1.03); transition: transform 2.4s ease; }
@media (max-height: 460px) {
  .ph-print { gap: 8px; }
  .ph-print-img { width: calc(var(--app-h) - 86px); }
  .ph-print-actions .btn { min-height: 34px; padding: 6px 16px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .ph-station, .ph-print-img { transition: opacity .3s ease; transform: none; }
}

/* Tom, 22 okt: Extra's > Herinneringen, de bewaarde foto uit de fotoscène */
.overlay-memories .memory-photo { display: block; width: min(420px, 100%, calc(var(--app-h) - 230px)); aspect-ratio: 1; object-fit: contain; margin: 4px auto 0; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .6)); }

/* Tom, 22 okt: streak — banier midden op de plaat (A) en teller "Reeks ×N" met leeglopend balkje (C) */
.streak-banner {
  position: absolute; left: 50%; top: 42%; z-index: 25; transform: translate(-50%, -50%) scale(.6);
  font: 400 clamp(30px, 6vw, 64px)/1 var(--font-display); letter-spacing: .1em; color: var(--gold-light); white-space: nowrap;
  text-shadow: 0 0 18px rgba(255, 213, 106, .9), 0 0 42px rgba(255, 213, 106, .55), 0 3px 4px rgba(0, 0, 0, .9);
  opacity: 0; pointer-events: none;
}
.streak-banner.is-on { animation: streakIn 2.2s ease-out forwards; }
.streak-banner.lvl-2 { font-size: clamp(34px, 7vw, 76px); }
.streak-banner.lvl-3 { font-size: clamp(38px, 8vw, 88px); color: #fff3c4; text-shadow: 0 0 22px rgba(255, 233, 160, 1), 0 0 60px rgba(255, 200, 80, .8), 0 3px 4px rgba(0, 0, 0, .9); }
@keyframes streakIn {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.6); }
  14% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
  24% { transform: translate(-50%, -50%) scale(1); }
  78% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -58%) scale(1); }
}
.streak-meter {
  position: absolute; left: 12px; top: 12px; z-index: 4; display: flex; flex-direction: column; gap: 4px; min-width: 104px;
  padding: 6px 12px 7px; color: var(--gold-light); background: rgba(18, 22, 31, .85); border: 1.5px solid var(--gold); border-radius: 4px;
  font: 600 15px/1 var(--font-body); letter-spacing: .06em; pointer-events: none; box-shadow: 0 0 12px rgba(212, 168, 73, .35);
}
.hud-left .streak-meter { position: static; min-width: 0; padding: 4px 9px 5px; font-size: 13px; }
.streak-meter[hidden] { display: none; }
.streak-meter.is-pop { animation: smPop .3s ease-out; }
@keyframes smPop { 40% { transform: scale(1.12); } }
.sm-bar { display: block; height: 3px; background: rgba(212, 168, 73, .25); border-radius: 2px; overflow: hidden; }
.sm-bar i { display: block; height: 100%; width: 100%; background: var(--gold-light); transform-origin: left; }
@keyframes smDrain { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) {
  .streak-banner.is-on { animation: streakFade 2.2s linear forwards; }
  .streak-meter.is-pop { animation: none; }
}
@keyframes streakFade { 0%, 80% { opacity: 1; transform: translate(-50%, -50%); } 100% { opacity: 0; transform: translate(-50%, -50%); } }

/* Tom, 22 okt: knop rechtsonder op een verhaalscherm (story.json "nextButton"), bijv. "Bekijk je score" op het slotbeeld */
.collage-next { position: absolute; right: 18px; bottom: 18px;   /* Tom, 23 okt: rechtsonder binnen het gouden kader */ z-index: 5; box-shadow: 0 4px 16px rgba(0, 0, 0, .55); animation: collageNextIn .6s ease 1.2s both; }
@keyframes collageNextIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-height: 460px) { .collage-next { right: 10px; bottom: 10px; min-height: 34px; padding: 6px 16px; font-size: 14px; } }
@media (prefers-reduced-motion: reduce) { .collage-next { animation: none; } }

/* Tom, 22 okt: Hoe speel je? — Sluiten niet over de hele breedte en los van Vorige/Volgende */
.overlay-howto .howto-close { align-self: center; width: auto; min-width: 140px; margin-top: 14px; }

/* Tom, 22 okt: teller (links) en knoppen (rechts) midden in hun vrije stuk van de itembalk.
   Dezelfde totale ruimte als voorheen (rand --side + 18px tussenruimte), maar gelijk verdeeld aan beide kanten. */
.panel.deco-panel { --side: 84px; gap: 30px; padding-left: 30px; padding-right: 30px; }
.panel.deco-panel .counter-box,
.panel.deco-panel .actions { margin-inline: calc((var(--side) + 18px - 60px) / 2); }
@media (max-width: 1100px) { .panel.deco-panel { --side: 60px; } }

/* Tom, 23 okt: punten onder de streak-banier */
.streak-banner small { display: block; margin-top: 6px; font: 600 .38em/1 var(--font-body); letter-spacing: .12em; text-align: center; }

/* Tom, 23 okt: beschuldiging — de balk onderaan trilt tijdens de spanning (shake uit "Geluidsdemo Zaakboek"), daarna de uitkomst op de knop */
.salon-foot.is-rolling { animation: accuseShake .12s infinite; }
@keyframes accuseShake { 25% { transform: translate(1px, 0); } 75% { transform: translate(-1px, 1px); } }
.salon.is-accusing .salon-seat, .salon.is-accusing .salon-clue, .salon.is-accusing [data-salon] { pointer-events: none; }
.salon-foot .btn.is-good:disabled { opacity: 1; color: #10240d; background: #a6dba0; border-color: #a6dba0; }
.salon-foot .btn.is-bad:disabled { opacity: 1; color: #2a0f0a; background: #f0a090; border-color: #f0a090; }
@media (prefers-reduced-motion: reduce) { .salon-foot.is-rolling { animation: none; } }

/* Tom, 23 okt: de zin bij een verkeerde beschuldiging, boven de knoppen in de salon */
.salon-foot { flex-wrap: wrap; }
.salon-verdict { flex: 1 0 100%; margin: 0 0 4px; text-align: center; font-size: 18px; color: var(--cream); text-shadow: 0 1px 3px rgba(0, 0, 0, .9); animation: line-in 380ms ease; }
@media (max-height: 460px) { .salon-verdict { font-size: 15px; } }

/* ---------- Speurprestaties als trofeeën (Tom, 23 okt; uit "speurprestaties-trofeeen.html") ---------- */
.overlay-trophies .overlay-card { width: min(600px, 100%); }
.tr-summary { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 4px 0 18px; font-size: 13px; color: var(--cream-quiet); letter-spacing: .08em; text-transform: uppercase; }
.tr-bar { width: 120px; height: 4px; background: rgba(226, 184, 90, .15); overflow: hidden; }
.tr-bar i { display: block; height: 100%; background: #e2b85a; }
.tr-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 520px), (max-height: 460px) and (max-width: 700px) { .tr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-height: 460px) and (min-width: 701px) { .tr-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; } }
.tr-tile { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 10px 14px; text-align: center; border: 1px solid rgba(226, 184, 90, .18); background: rgba(0, 0, 0, .22); transition: border-color .4s, background .4s; }
.tr-cup { width: 72px; height: 80px; position: relative; }
.tr-cup svg, .tr-big svg { width: 100%; height: 100%; overflow: visible; }
.tr-cup img, .tr-big img { width: 100%; height: 100%; object-fit: contain; display: block; }
.tr-tile:not(.is-on) .tr-cup img { filter: grayscale(1) sepia(.5) brightness(.38); opacity: .75; }
.tr-name { font-size: 14px; font-weight: 600; line-height: 1.25; min-height: 2.5em; display: flex; align-items: center; color: #b59a6a; }
.tr-progress { width: 100%; display: flex; flex-direction: column; gap: 5px; align-items: center; }
.tr-mini { width: 80%; height: 3px; background: rgba(226, 184, 90, .14); overflow: hidden; }
.tr-mini i { display: block; height: 100%; background: #8a6526; }
.tr-num { font-size: 12px; color: #b59a6a; letter-spacing: .05em; }
.tr-ribbon { display: none; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #2a1c12; background: linear-gradient(180deg, #ffe7a3, #e2b85a); padding: 3px 10px 2px; }
.tr-tile.is-on { border-color: rgba(226, 184, 90, .6); background: linear-gradient(180deg, rgba(226, 184, 90, .14), rgba(0, 0, 0, .2)); }
.tr-tile.is-on .tr-name { color: #ffe7a3; }
.tr-tile.is-on .tr-mini i { background: #e2b85a; }
.tr-tile.is-on .tr-ribbon { display: inline-block; }
.tr-tile.is-on .tr-cup { filter: drop-shadow(0 0 10px rgba(255, 214, 120, .45)); }
.tr-tile.is-on::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(255, 240, 200, .18) 50%, transparent 65%); transform: translateX(-120%); animation: trGlans 5s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes trGlans { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@media (max-height: 460px) { .tr-tile { padding: 8px 6px; gap: 4px; } .tr-cup { width: 48px; height: 54px; } .tr-name { font-size: 12px; } }

/* viering */
.tr-celebrate { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(6, 8, 12, .9); cursor: pointer; opacity: 0; transition: opacity .3s; overflow: hidden; }
.tr-celebrate.is-open { opacity: 1; }
.tr-card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 20px; }
.tr-rays { position: absolute; left: 50%; top: 110px; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; background: repeating-conic-gradient(rgba(255, 220, 140, .16) 0 7deg, transparent 7deg 20deg); -webkit-mask: radial-gradient(circle, #000 12%, transparent 62%); mask: radial-gradient(circle, #000 12%, transparent 62%); animation: trDraai 14s linear infinite; }
@keyframes trDraai { to { transform: rotate(360deg); } }
.tr-big { position: relative; width: 170px; height: 190px; filter: drop-shadow(0 0 28px rgba(255, 214, 120, .55)); }
.tr-celebrate.is-open .tr-big { animation: trBinnen .9s cubic-bezier(.2, 1.5, .35, 1) both; }
@keyframes trBinnen { 0% { transform: translateY(40px) scale(.2) rotate(-12deg); opacity: 0; } 60% { opacity: 1; } 100% { transform: none; } }
.tr-head { position: relative; margin-top: 18px; font-size: 13px; letter-spacing: .4em; text-transform: uppercase; color: #e2b85a; }
.tr-title { position: relative; margin-top: 6px; font: 400 34px/1.15 var(--font-display); color: #ffe7a3; }
.tr-hint { position: relative; margin-top: 18px; font-size: 12px; color: #b59a6a; letter-spacing: .1em; }
.tr-celebrate.is-open .tr-head { animation: trOp .5s .45s both; }
.tr-celebrate.is-open .tr-title { animation: trOp .5s .6s both; }
.tr-celebrate.is-open .tr-hint { animation: trOp .5s 1.2s both; }
@keyframes trOp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.tr-spark { position: fixed; width: 7px; height: 7px; margin: -3.5px; background: #ffe7a3; transform: rotate(45deg); pointer-events: none; box-shadow: 0 0 10px #ffd56a; }
@media (max-height: 460px) { .tr-big { width: 110px; height: 124px; } .tr-rays { top: 70px; } .tr-title { font-size: 26px; } .tr-head { margin-top: 10px; } .tr-hint { margin-top: 10px; } }
@media (prefers-reduced-motion: reduce) { .tr-rays, .tr-tile.is-on::after, .tr-celebrate.is-open .tr-big { animation: none; } }

/* Tom, 23 okt: teller op een trofee-afbeelding (Ultra Streaks) */
.tr-badge { position: absolute; right: -8px; top: -4px; min-width: 22px; padding: 2px 5px; border-radius: 11px; background: #2a1c12; border: 1.5px solid #e2b85a; font: 600 11px/1.3 var(--font-body); color: #ffe7a3; text-align: center; }
/* Tom, 23 okt: meer trofeeën → het venster scrolt; Sluiten blijft onderin in beeld */
.overlay-trophies .overlay-card { overscroll-behavior: contain; }
.overlay-trophies .overlay-buttons { position: sticky; bottom: -8px; z-index: 3; margin: 0 -8px -8px; padding: 12px 8px 8px; background: none; pointer-events: none; }
.overlay-trophies .overlay-buttons > * { pointer-events: auto; }   /* Tom, 23 okt: geen verloop achter de knop; alleen de knop zelf blijft onderin staan */

/* Tom, 23 okt: nieuw behaalde trofee licht op als je Speurprestaties opent (stempel + gouden gloed, uit het ontwerp) */
.tr-tile.is-new { animation: trNieuw 1.6s ease-in-out .3s 3; }
@keyframes trStempel { 0% { transform: scale(1.18); opacity: .4; } 40% { transform: scale(.94); opacity: 1; } 100% { transform: scale(1); } }
@keyframes trNieuw { 50% { box-shadow: 0 0 0 2px #ffe7a3, 0 0 26px rgba(255, 214, 120, .65); } }
@media (prefers-reduced-motion: reduce) { .tr-tile.is-new { animation: none; box-shadow: 0 0 0 2px #ffe7a3; } }

/* Tom, 23 okt: meer ruimte tussen de kop van het notitieblok (titel + Sluiten) en de uitleg eronder */
.nb-head { margin-bottom: 10px; }
.nb-head + .overlay-note { margin-top: 0; }
@media (max-height: 460px) { .nb-head { margin-bottom: 6px; } }

/* Tom, 23 okt: Sluiten-knop in de menukaarten niet meer over de hele breedte, en ruimte boven de uitleg onder de trofeeën */
.overlay-buttons > [data-card="close"], .overlay-buttons > [data-board="close"]:only-child, .overlay-buttons > [data-det="close"]:only-child { align-self: center; width: auto; min-width: 180px; padding-left: 36px; padding-right: 36px; }
.overlay-trophies .tr-grid + .overlay-note { margin-top: 16px; }

/* ---------- Herinneringen als plakboek (Tom, 23 okt; js/ui/scrapbook.js) ---------- */
.overlay-scrapbook .overlay-card { width: min(640px, 100%); }
.sb-tabs { display: flex; justify-content: center; gap: 6px; margin: 0 0 -1px; position: relative; z-index: 2; }
.sb-tab { padding: 7px 16px 6px; font: 600 14px/1 var(--font-body); color: #6b5434; background: #d9c9a3; border: 1px solid #b59a6a; border-bottom: 0; border-radius: 6px 6px 0 0; cursor: pointer; }
.sb-tab.is-on { color: #3a2a18; background: #efe3c4; }
.sb-page { position: relative; min-height: 220px; padding: 18px 16px 20px; border: 1px solid #b59a6a; border-radius: 4px;
  background: radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, .35), transparent 60%), radial-gradient(ellipse at 80% 90%, rgba(120, 80, 30, .12), transparent 55%), #efe3c4;
  box-shadow: inset 0 0 28px rgba(120, 80, 30, .25), 0 6px 18px rgba(0, 0, 0, .45); color: #3a2a18; }
.sb-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 14px; }
.sb-grid.is-photos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 520px) { .sb-grid, .sb-grid.is-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-height: 460px) and (min-width: 701px) { .sb-grid, .sb-grid.is-photos { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; } .sb-page { min-height: 0; padding: 12px; } }
.sb-item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; aspect-ratio: 1; padding: 6px; border: 0; background: none; transform: rotate(var(--tilt)); cursor: pointer; font: inherit; color: inherit; }
.sb-item.is-empty { cursor: default; border: 1.5px dashed rgba(90, 64, 34, .45); border-radius: 3px; }
.sb-slot { font: 400 26px/1 'Caveat', cursive; color: rgba(90, 64, 34, .55); }
.sb-photo img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .35)); }
.sb-corners::before, .sb-corners::after { content: ""; position: absolute; width: 18px; height: 18px; background: #2a1c12; z-index: 1; }
.sb-corners::before { left: 2px; top: 2px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.sb-corners::after { right: 2px; bottom: 2px; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.sb-tape { position: absolute; left: 50%; top: -6px; width: 46%; height: 16px; transform: translateX(-50%) rotate(-3deg); background: rgba(240, 225, 180, .75); box-shadow: 0 1px 2px rgba(0, 0, 0, .15); z-index: 1; }
.sb-note { background: #fbf5e4; box-shadow: 0 4px 8px rgba(0, 0, 0, .25); padding: 14px 10px 10px; }
.sb-pic img { width: 88%; height: 72%; object-fit: contain; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .3)); }
/* Tom, 25 okt: beeld met de tekst van het spel erop (image.note); img en svg vullen hetzelfde vak */
.sb-art { position: relative; display: block; width: 88%; height: 72%; }
.sb-pic .sb-art img { width: 100%; height: 100%; }
.sb-art.is-big { display: inline-block; width: auto; height: auto; max-width: 100%; }
.sb-big-card .sb-art.is-big img { margin: 0; }
.sb-hand { font: 600 clamp(15px, 2vw, 19px)/1.15 'Caveat', cursive; color: #2b2112; text-align: center; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
.sb-label { margin-top: 6px; font: 600 12px/1.2 var(--font-body); color: #5a4022; text-align: center; }
.sb-empty { margin: 50px 10px; text-align: center; font: 600 22px/1.3 'Caveat', cursive; color: rgba(90, 64, 34, .7); }
.sb-big { position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; padding: 20px; background: rgba(6, 8, 12, .82); opacity: 0; transition: opacity .25s; cursor: pointer; }
.sb-big.is-in { opacity: 1; }
.sb-big-card { max-width: min(460px, 100%); max-height: 100%; padding: 22px 22px 18px; background: #fbf5e4; color: #2b2112; text-align: center; box-shadow: 0 14px 40px rgba(0, 0, 0, .6); transform: rotate(-1deg); }
.sb-big-card.is-photo { padding: 0; background: none; box-shadow: none; transform: none; }
.sb-big-card img { display: block; max-width: 100%; max-height: calc(var(--app-h) - 160px); margin: 0 auto; object-fit: contain; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .6)); }
.sb-big-name { margin: 10px 0 4px; font: 400 22px/1.2 var(--font-display); color: #5a4022; }
.sb-big-text { margin: 0; font: 600 24px/1.25 'Caveat', cursive; }
/* Tom, 27 okt: op een lage (liggende telefoon) schermhoogte past het grote kaartje met naam en tekst helemaal in beeld */
@media (max-height: 460px) { .sb-big { padding: 8px; } .sb-big-card { padding: 12px 16px 10px; } .sb-big-card img { max-height: calc(var(--app-h) - 150px); } .sb-big-name { margin: 6px 0 2px; font-size: 18px; } .sb-big-text { font-size: 19px; line-height: 1.2; } }
.overlay-scrapbook .overlay-buttons { margin-top: 16px; }
/* Tom, 23 okt: verhalende melding over een open container (zaakdetail) */
.find-notice { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(7, 9, 13, .6); opacity: 0; transition: opacity 220ms ease; }
.find-notice.is-open { opacity: 1; }
.find-notice .overlay-card { width: min(520px, 100%); }
.find-notice .detail-text { font-size: 18px; line-height: 1.5; text-shadow: 0 1px 2px rgba(0, 0, 0, .7); }
/* Tom, 23 okt: knop binnen het kader; het tekstvak blijft gecentreerd maar laat rechts ruimte voor de knop */
.collage-box:has(.collage-next) .collage-text { max-width: min(74%, calc(100% - 2 * (var(--next-w, 190px) + 12px))); }
@media (max-height: 460px) { .collage-box:has(.collage-next) { --next-w: 135px; } }
/* Tom, 23 okt: achterkant met handgeschreven tekst (js/ui/handnote.js) */
.ins-note { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* Tom, 23 okt: draairichting per vastgelegd getal */
.dk-dir { font-style: normal; margin-left: 3px; font-size: 14px; opacity: .85; }
/* Tom, 23 okt: knop Opnieuw naast Sluiten bij de kluis */
.ins-head-btns { display: flex; gap: 8px; }

/* Tom, 24 okt: sprekersnaam in de aanwijzing van de fotoscène, zoals in de verhalen */
.ph-hint b { color: var(--gold-light); font-weight: 600; }

/* Tom, 24 okt: haperend licht (vuurtoren op het slotbeeld) */
.cfx-sputter { border-radius: 50%; background: radial-gradient(ellipse closest-side, rgba(78, 84, 104, 1) 0%, rgba(92, 100, 124, .92) 50%, rgba(120, 132, 160, 0) 100%); mix-blend-mode: multiply; opacity: 0; pointer-events: none; }

/* Tom, 24 okt: verzamelvoorwerp gevonden, en een nummer op slot in de muziekspeler */
.overlay-collect .collect-kicker { margin: 0 0 6px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.overlay-collect .collect-img { display: block; width: min(260px, 60%); margin: 4px auto 10px; filter: drop-shadow(0 10px 16px rgba(0,0,0,.55)); animation: collect-in .7s cubic-bezier(.2,.8,.2,1.2) both; }
@keyframes collect-in { from { transform: scale(.6) rotate(-8deg); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .overlay-collect .collect-img { animation: none; } }
.jb-row.is-locked { opacity: .55; }
.jb-lock { display: inline-flex; align-items: center; justify-content: center; pointer-events: none; }
.jb-lock svg { width: 16px; height: 16px; }

/* Tom, 25 okt: sterren op het scorescherm (0–3), lichten op zodra de uitslag klaar is */
.res-stars { display: flex; justify-content: center; gap: 10px; margin: -2px 0 12px; font-size: 34px; line-height: 1; }
.res-star { color: rgba(226, 184, 90, .22); text-shadow: 0 1px 0 rgba(0,0,0,.5); }
.is-starred .res-star.is-on { color: #ffd56a; text-shadow: 0 0 14px rgba(255, 213, 106, .6), 0 1px 0 rgba(0,0,0,.5); animation: resStar .6s cubic-bezier(.2, 1.6, .4, 1) both; animation-delay: calc(var(--i) * .25s + .2s); }
@keyframes resStar { from { transform: scale(.2) rotate(-30deg); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-height: 460px) { .res-stars { font-size: 24px; margin-bottom: 6px; } }
@media (prefers-reduced-motion: reduce) { .is-starred .res-star.is-on { animation: none; } }

/* Tom, 25 okt: ranglijst met twee tabbladen (Eerste zaak / Beste score) */
.board-tabs { display: flex; justify-content: center; gap: 6px; margin: 2px 0 6px; }
.board-tab { flex: 1; max-width: 200px; padding: 8px 10px; font: 600 14px/1.2 var(--font-body); color: #b59a6a; background: rgba(0,0,0,.22); border: 1px solid rgba(226,184,90,.25); cursor: pointer; }
.board-tab.is-on { color: #2a1c12; background: linear-gradient(180deg, #ffe7a3, #e2b85a); border-color: #e2b85a; }
.board-tabnote { margin: 0 0 10px; text-align: center; font-size: 12px; color: var(--cream-quiet); }

/* Tom, 25 okt: prestaties synchroniseren met het account (onder de trofeeën) */
.sync-box { margin: 18px 0 4px; padding: 14px 14px 12px; text-align: center; border: 1px solid rgba(226, 184, 90, .22); background: rgba(0, 0, 0, .2); }
.sync-title { margin: 0 0 6px; font: 400 20px/1.2 var(--font-display); color: var(--gold-light); }
.sync-intro { margin: 0 0 12px; font-size: 13px; color: var(--cream-quiet); }
.sync-btn[disabled] { opacity: .55; cursor: default; }
.sync-status { margin: 10px 0 0; font-size: 13px; color: #e8d6a8; min-height: 1.4em; }

/* Tom, 25 okt: account koppelen (protocol 2) in het blok "Je account" */
.sync-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.sync-linked { margin: 0 0 4px; font-size: 14px; color: #e8d6a8; }
.sync-linked b { color: var(--gold-light); }
.sync-once { margin: 14px 0 0; font-size: 12px; color: var(--cream-quiet); }
.sync-once .link-btn[disabled] { opacity: .5; cursor: default; }
.sync-once-status { margin: 4px 0 0; font-size: 12px; color: var(--cream-quiet); min-height: 1.2em; }

/* v0.9.41 (Tom, 30 okt): stroomuitval: linksboven teller, bot en muziekknop weg (het lichtknopje zit daar in de plaat) */
.is-dark-hud .hud-left { opacity: 0; pointer-events: none; transition: opacity .5s; }

/* v0.9.41 (Tom, 30 okt, voorstel A): close-ups op een liggende telefoon. Naam en knoppen links en rechts naast het beeld,
   het onderschrift rechtsonder; het beeld krijgt (bijna) de volle hoogte. */
@media (max-height: 500px) and (min-aspect-ratio: 3 / 2) {
  .overlay-insert { --ins-v: 62px; }
  .overlay-insert > .overlay-card > .deco-content { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; column-gap: 16px; align-items: start; }
  .overlay-insert .ins-head { display: contents; }
  .overlay-insert .ins-head h2 { grid-column: 1; grid-row: 1; font-size: 21px; line-height: 1.15; overflow-wrap: anywhere; }
  .overlay-insert .ins-head > :not(h2) { grid-column: 3; grid-row: 1; justify-self: end; }
  .overlay-insert .ins-head-btns { flex-direction: column; align-items: flex-end; }
  .overlay-insert .ins-intro { grid-column: 1; grid-row: 2 / 4; align-self: center; margin: 0; text-align: left; font-size: 14px; }
  .overlay-insert .ins-stage, .overlay-codelock .ins-stage, .overlay-insert .ins-stage.is-flippable { grid-column: 2; grid-row: 1 / 4; margin: 0; width: min(calc((var(--app-h) - var(--ins-v)) * var(--ins-ratio)), calc(100vw - 400px)); }
  .overlay-insert .ins-caption, .overlay-codelock .ins-caption, .overlay-insert .ins-stage.is-flippable + .ins-caption { grid-column: 3; grid-row: 2 / 4; align-self: end; margin: 0; max-width: none; padding: 8px 10px; font-size: 14px; }
  .overlay-insert .dk-read { display: flex; flex-wrap: wrap; justify-content: center; margin: 8px 0 0; }
}
@media (max-height: 420px) and (min-aspect-ratio: 3 / 2) { .overlay-insert { --ins-v: 50px; } }

/* v0.9.41 (Tom, 30 okt): scorescherm op een liggende telefoon compacter (zelfde lettergrootte), en een pijltje als er nog iets onder staat */
@media (max-height: 460px) {
  .story.result-screen { padding-top: 10px; padding-bottom: 10px; }
  .result-card.deco-panel { padding-top: 16px; padding-bottom: 12px; }
  .result-card .story-title { margin-bottom: 0; }
  .result-card .res-stars { margin: 0 0 4px; }
  .result-card .overlay-buttons-row { margin-top: 8px; }
  .result-card .overlay-buttons-row .btn { padding-top: 6px; padding-bottom: 6px; min-height: 0; }
  .result-card .res-join { margin-top: 6px; }
}
.res-more { position: fixed; left: 50%; bottom: 8px; z-index: 6; width: 34px; height: 34px; margin-left: -17px; border-radius: 50%; background: rgba(11, 9, 7, .78); border: 1px solid var(--gold-dark); pointer-events: none; animation: res-more 1.6s ease-in-out infinite; }
.res-more::after { content: ""; position: absolute; left: 50%; top: 42%; width: 10px; height: 10px; margin: -6px 0 0 -5px; border: solid var(--gold-light); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.res-more[hidden] { display: none; }
@keyframes res-more { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .res-more { animation: none; } }
.cl-svg.cl-drag { touch-action: none; }   /* v0.9.41: rollen van het cijferslot slepen; het venster scrolt niet mee */

/* v0.9.41 (Tom, 1 nov): staande meter naast de zoeker op een liggende telefoon; de brede meter blijft voor staand, tablet en pc */
.ph-meter-tall { display: none; }
@media (max-height: 600px) and (min-aspect-ratio: 4 / 3) {
  .ph-meter-wide { display: none; }
  .ph-meter-tall { display: block; width: auto; height: var(--sq); margin-top: 0; }
}

/* v0.9.41 (Tom, 1 nov): de muziekknop blijft op zijn plek als het scherm scrolt (teaser, score, verhaal) */
.story .screen-music { position: fixed; }
.find-notice .find-note { margin-top: 10px; font-style: italic; color: var(--gold-light); }   /* v0.9.41 (Tom, 1 nov): "Milo’s neus twijfelt niet…" */
.tip-layer.is-free .tip-card::after { display: none; }   /* v0.9.41: tip zonder doel: geen pijltje */
.tip-ring[hidden] { display: none; }
.version { font-size: 13px; color: rgba(239, 227, 200, .6); }   /* v0.9.41 (Tom, 2 nov): iets groter; alleen gevuld met ?test=1 of ?versie=1 */
.rotate-card .rotate-lock { margin: -8px 0 20px; font-size: 14px; color: var(--cream-quiet); }   /* v0.9.41: alleen iPhone */

/* v0.9.41 (Tom, 2 nov): op een iPhone (veilige zone ~59 punten per kant) stonden de knoppen en de zoeklijst-tab ver van de rand.
   Hoeken (Hint, Notitieblok, Menu, teller, zoom): 34 punten dichter bij de rand, ver van de camera. De tab staat op de hoogte van
   de camera (Dynamic Island, ~48 punten diep) en schuift daarom maar 14 punten op. Zonder veilige zone (pc, de meeste Android) verandert niets. */
.search .hud-left, .search .hud-bottom-left, .search .zoom-tools { left: calc(10px + max(0px, env(safe-area-inset-left, 0px) - 34px)); }
.search .hud-right, .search .hud-bottom-right { right: calc(10px + max(0px, env(safe-area-inset-right, 0px) - 34px)); }
.search .drawer-tab { right: max(0px, calc(env(safe-area-inset-right, 0px) - 14px)); }
.tip-card { max-width: min(340px, calc(100vw - 20px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px))); }   /* v0.9.41: binnen de veilige zone (iPhone) */

/* v0.9.41 (Tom, 2 nov, iPhone): vensters (close-ups, notitieblok, meldingen, ranglijst) beginnen buiten de veilige zone: een deel viel achter de
   camera en de afgeronde hoeken. Links en rechts nu minimaal de veilige zone; zonder veilige zone (pc, de meeste Android) blijft het 20 en 12 punten. */
.overlay { padding-left: max(20px, calc(env(safe-area-inset-left, 0px) + 8px)); padding-right: max(20px, calc(env(safe-area-inset-right, 0px) + 8px)); }
.nb-viewer { padding-left: max(12px, calc(env(safe-area-inset-left, 0px) + 8px)); padding-right: max(12px, calc(env(safe-area-inset-right, 0px) + 8px)); }
.install-steps { margin: 8px auto 6px; padding-left: 1.4em; max-width: 30em; text-align: left; line-height: 1.5; }   /* v0.9.41: installeren op iPhone */
.install-steps li { margin: 4px 0; }
.install-after { margin-top: 8px; }

/* v0.9.41 (Tom, 2 nov, iPhone): kaart met een portret (onthulling van de dader, de leugenaar) op een telefoon in liggende stand: de foto links, de tekst ernaast.
   Zo wordt de foto groot in plaats van een klein plaatje boven de tekst. Op een pc, tablet en staand blijft de foto boven de tekst. */
@media (max-height: 460px) and (min-aspect-ratio: 3 / 2) {
  .story-card.deco-panel:has(.story-portrait) { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr auto; column-gap: 24px; align-items: center; width: min(760px, 100%); padding: 16px 30px 14px 24px; text-align: left; }
  .story-card:has(.story-portrait) .story-portrait { grid-column: 1; grid-row: 1 / 4; width: min(240px, calc((var(--app-h) - 92px) * .886), 32vw); margin: 0; }
  .story-card:has(.story-portrait) .story-title { grid-column: 2; grid-row: 1; margin: 0 0 6px; text-align: left; }
  .story-card:has(.story-portrait) .story-text { grid-column: 2; grid-row: 2; margin: 0; text-align: left; align-self: center; }
  .story-card:has(.story-portrait) .story-foot { grid-column: 2; grid-row: 3; margin-top: 8px; }
}