/* Game Modal Styling */
.game-back {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  z-index: 375;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.game-back.open {
  opacity: 1;
  pointer-events: auto;
}

.game-modal {
  position: fixed;
  inset: 0;
  z-index: 376;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.95);
  transition: all 0.35s cubic-bezier(0.32, 0.72, 0, 1);
  pointer-events: none;
}

.game-modal.open {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.game-close {
  position: absolute;
  /* Op een telefoon met een inkeping of dynamic island valt 24px deels onder
     de statusbalk en is de knop nauwelijks te raken. De veilige zone erbij
     optellen zet hem er netjes onder. */
  top: max(24px, calc(env(safe-area-inset-top, 0px) + 12px));
  right: max(24px, calc(env(safe-area-inset-right, 0px) + 16px));
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  background: rgba(18, 14, 12, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
  color: #fff;
  cursor: pointer;
  z-index: 378;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-family: inherit;
  line-height: 1;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background 0.2s;
}

.game-close:hover {
  background: rgba(255, 255, 255, 0.24);
}

.game-container {
  width: 100%;
  height: 100%;
  max-width: 100vw;
  max-height: 100vh;
}

.game-hud {
  position: absolute;
  inset: 0;
  color: rgba(255, 255, 255, 0.9);
  z-index: 377;
  pointer-events: none;
  overflow: hidden;
}

.game-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: rgba(255, 255, 255, 0.95);
  font-size: 14px;
}

.game-loading::after {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 8px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 40%, transparent 60%);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* =====================================================================
   THE CREATIVE JOURNEY — in-game overlay UI
   ===================================================================== */

.gj-hud, .gj-hud * { box-sizing: border-box; }
.gj-hud {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---------- top chapter block ---------- */
.gj-top {
  position: absolute;
  top: 28px;
  left: 36px;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.gj-top.on { opacity: 1; transform: translateY(0); }
.gj-eyebrow {
  font-size: 10px;
  letter-spacing: 0.32em;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 6px;
}
.gj-leveltitle {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.24em;
  color: rgba(255, 255, 255, 0.92);
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  margin-bottom: 10px;
}
.gj-objective {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.62);
}
.gj-objective.flip { animation: gjObjFlip 0.5s ease; }
@keyframes gjObjFlip {
  0% { opacity: 0; transform: translateY(5px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ---------- crosshair + prompt ---------- */
.gj-crosshair {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
  opacity: 0;
  transition: opacity 0.3s;
}
.gj-crosshair.on { opacity: 1; }

.gj-prompt {
  position: absolute;
  left: 50%;
  top: 58%;
  transform: translateX(-50%) translateY(6px);
  font-size: 12px;
  letter-spacing: 0.26em;
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.22s ease, transform 0.22s ease;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.8);
}
.gj-prompt.on { opacity: 1; transform: translateX(-50%) translateY(0); }
.gj-prompt-key {
  color: #ffd27a;
  animation: gjPromptPulse 1.6s ease-in-out infinite;
}
@keyframes gjPromptPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

/* ---------- letterbox + frame guides + REC ---------- */
.gj-lb {
  position: absolute;
  left: 0;
  right: 0;
  height: 11.5vh;
  background: #000;
  transition: transform 0.55s cubic-bezier(0.32, 0.72, 0, 1);
  z-index: 3;
}
.gj-lb-top { top: 0; transform: translateY(-100%); }
.gj-lb-bot { bottom: 0; transform: translateY(100%); }
.gj-lb.on { transform: translateY(0); }

.gj-guides {
  position: absolute;
  inset: 11.5vh 6vw;
  opacity: 0;
  transition: opacity 0.5s 0.25s;
  z-index: 2;
}
.gj-guides.on { opacity: 1; }
.gj-guides i {
  position: absolute;
  background: rgba(255, 255, 255, 0.14);
}
.gj-guides i.v1 { left: 33.33%; top: 0; bottom: 0; width: 1px; }
.gj-guides i.v2 { left: 66.66%; top: 0; bottom: 0; width: 1px; }
.gj-guides i.h1 { top: 33.33%; left: 0; right: 0; height: 1px; }
.gj-guides i.h2 { top: 66.66%; left: 0; right: 0; height: 1px; }

.gj-rec {
  position: absolute;
  top: calc(11.5vh + 18px);
  right: calc(6vw + 8px);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  transition: opacity 0.4s 0.3s;
  z-index: 4;
}
.gj-rec.on { opacity: 1; }
.gj-rec-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff3b3b;
  animation: gjPromptPulse 1.1s ease-in-out infinite;
}

/* Standby versus daadwerkelijk draaien moet in een oogopslag verschillen. */
.gj-rec:not(.rolling) .gj-rec-dot { background: rgba(255, 255, 255, 0.4); animation: none; }
.gj-rec.rolling {
  color: #fff;
  background: rgba(255, 59, 59, 0.16);
  border: 1px solid rgba(255, 59, 59, 0.55);
  border-radius: 4px;
  padding: 5px 10px;
  box-shadow: 0 0 22px rgba(255, 59, 59, 0.35);
}
.gj-rec.rolling .gj-rec-dot { background: #ff3b3b; animation: gjRecBlink 0.7s steps(2) infinite; }
@keyframes gjRecBlink { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0.15 } }
.gj-rec-timer { font-variant-numeric: tabular-nums; letter-spacing: 0.1em; }
.gj-rec-track {
  display: none;
  width: 74px; height: 3px;
  background: rgba(255, 255, 255, 0.22);
  border-radius: 2px; overflow: hidden;
}
.gj-rec.rolling .gj-rec-track { display: block; }
.gj-rec-bar { display: block; height: 100%; width: 0%; background: #ff3b3b; transition: width 0.1s linear; }

/* Rode rand rond het beeld zolang de take loopt. */
.gj-recframe {
  position: absolute; inset: 0; pointer-events: none; z-index: 5;
  box-shadow: inset 0 0 0 3px rgba(255, 59, 59, 0.75), inset 0 0 60px rgba(255, 59, 59, 0.18);
  opacity: 0; transition: opacity 0.18s ease;
}
.gj-recframe.on { opacity: 1; }

/* ---------- capture flash ---------- */
.gj-flash {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  z-index: 6;
}
.gj-flash.on { animation: gjFlash 0.45s ease-out forwards; }
@keyframes gjFlash {
  0% { opacity: 0.9; }
  100% { opacity: 0; }
}

/* ---------- toasts ---------- */
.gj-toasts {
  position: absolute;
  right: 36px;
  bottom: 42px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  z-index: 5;
  max-width: 46vw;
}
/* Meldingen in dezelfde taal als het gespreksvenster met de regisseurs: een
   crèmekleurige kaart met bruine tekst, in plaats van de donkere balk uit de
   eerste opzet. */
.gj-toast {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #3B2F2A;
  background: #FAF6F0;
  border: 1px solid rgba(59, 47, 42, 0.12);
  border-left: 3px solid #3B2F2A;
  border-radius: 10px;
  padding: 11px 16px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: translateX(14px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.gj-toast.on { opacity: 1; transform: translateX(0); }

/* =====================================================================
   Gespreksvenster, schermen en aanraakbediening. Deze regels waren bij een
   eerdere opschoning per ongeluk verdwenen; hersteld uit de sessiegeschiedenis.
   ===================================================================== */
/* Het gespreksvenster in de stijl van de site: crème kaart, bruine tekst,
   naam in de schreefletter zoals de titels, keuzes als labels in de sans. */
.gj-dialogue {
  position: absolute;
  left: 50%;
  bottom: 6vh;
  transform: translateX(-50%) translateY(24px);
  width: min(680px, 86vw);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
  z-index: 8;
  display: flex;
  background: #FAF6F0;
  border: 1px solid rgba(59, 47, 42, 0.12);
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  cursor: pointer;
}
.gj-dialogue.on { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
/* smalle kleurbalk links, in de kleur van de regisseur */
.gj-d-bar { width: 4px; flex: none; background: #3B2F2A; }

.gj-d-inner { padding: 22px 26px 24px; flex: 1; min-width: 0; }

.gj-d-speaker {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #7a6e67;
  margin-bottom: 10px;
}

.gj-d-text {
  font-family: 'Instrument Serif', serif;
  font-size: 22px;
  line-height: 1.32;
  color: #3B2F2A;
  min-height: 2.6em;
  font-weight: 400;
}

.gj-d-choices {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gj-choice {
  appearance: none;
  background: transparent;
  border: 1px solid rgba(59, 47, 42, 0.18);
  border-radius: 8px;
  color: #3B2F2A;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-align: left;
  padding: 11px 14px;
  cursor: pointer;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.18s, border-color 0.18s;
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.gj-choice.on { opacity: 1; transform: translateY(0); }

.gj-choice:hover {
  background: rgba(59, 47, 42, 0.06);
  border-color: rgba(59, 47, 42, 0.45);
}

.gj-choice-n {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: #a2968d;
  flex: none;
}

.gj-chapter {
  text-align: center;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}

.gj-chapter.on { opacity: 1; transform: translateY(0); }

.gj-screen {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 12;
  pointer-events: auto;
  cursor: pointer;
}

.gj-screen.on { display: flex; }

.gj-credits {
  width: min(460px, 86vw);
  margin: 0 auto 36px;
}

.gj-end-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  opacity: 0;
  transition: opacity 1s 2.8s ease;
}

.gj-ending.reveal .gj-end-actions { opacity: 1; }

.gj-touch { position: absolute; inset: 0; z-index: 7; pointer-events: none; display: none; }

.gj-touch.on { display: block; }

.gj-look {
  position: absolute; inset: 0;
  pointer-events: auto;
  touch-action: none;
  -webkit-user-select: none; user-select: none;
}

.gj-joy {
  position: absolute; left: 26px; bottom: 30px;
  width: 122px; height: 122px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  pointer-events: auto; touch-action: none;
}

.gj-joy-knob {
  position: absolute; left: 50%; top: 50%;
  width: 56px; height: 56px; margin: -28px 0 0 -28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.30);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}


/* ---------- hoofdstukovergang ---------- */
.gj-fade {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s ease;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gj-fade.on { opacity: 1; pointer-events: auto; }
.gj-ch-eyebrow {
  font-size: 11px;
  letter-spacing: 0.5em;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 18px;
}
.gj-ch-title {
  font-size: clamp(28px, 4.6vw, 52px);
  font-weight: 200;
  letter-spacing: 0.3em;
  color: #fff;
  margin-bottom: 26px;
}
.gj-ch-rule {
  width: 60px;
  height: 1px;
  background: rgba(255, 255, 255, 0.4);
  margin: 0 auto;
}

/* ---------- introscherm ---------- */
.gj-intro {
  background:
    radial-gradient(ellipse at 50% 120%, rgba(90, 50, 160, 0.35), transparent 60%),
    radial-gradient(ellipse at 50% -20%, rgba(30, 40, 90, 0.4), transparent 55%),
    rgba(2, 2, 8, 0.94);
}
/* Zelfde letter, dikte en grootte als de vision-tekst op de pagina zelf, en
   op een regel. De highlight loopt er automatisch doorheen in een lus, met een
   groter opacityverschil dan de scrollversie. */
.gj-intro-title {
  font-family: 'Instrument Serif', serif;
  font-style: normal;
  font-size: clamp(3.5rem, 10vw, 6.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  max-width: 92vw;
  white-space: nowrap;
  color: var(--text, #3B2F2A);
  animation: gjRise 1s 0.15s ease both;
}
.gj-intro-title .gj-tw {
  display: inline-block;
  opacity: 0.18;
  animation: gjTitleSweep 2.6s ease-in-out infinite;
}
@keyframes gjTitleSweep {
  0%, 100% { opacity: 0.18; }
  22% { opacity: 1; }
  44% { opacity: 0.18; }
}
.gj-intro-rule {
  width: 70px;
  height: 1px;
  background: rgba(255, 255, 255, 0.35);
  margin: 30px auto;
  animation: gjRise 1s 0.3s ease both;
}
.gj-intro-sub {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.8;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.6);
  animation: gjRise 1s 0.45s ease both;
}
/* dezelfde pil als op de site */
.gj-begin {
  background: #0D0D0D !important; color: #FAF6F0 !important;
  border: none !important; border-radius: 9999px !important;
  box-shadow: none;
  font-family: 'Instrument Sans', sans-serif !important;
  font-size: 11px !important; font-weight: 500 !important;
  letter-spacing: 0.2em !important; text-transform: uppercase !important;
  padding: 14px 40px !important;
  animation: gjRise 1s 0.75s ease both !important;
  transition: transform 0.3s, background 0.2s;
}
.gj-intro:hover .gj-begin { background: #241C18 !important; }
.gj-begin:hover { transform: scale(1.05); }
.gj-begin:active { transform: scale(0.98); }

/* de besturingsregel op de schermen, bruine inkt op het crème */
.gj-controls {
  display: flex;
  gap: 28px;
  margin-top: 40px;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: #8a7d73;
  animation: gjRise 1s 0.6s ease both;
  flex-wrap: wrap;
  justify-content: center;
}
.gj-controls b {
  color: #3B2F2A;
  font-weight: 600;
  margin-right: 6px;
}
@media (max-width: 640px) {
  .gj-controls { flex-wrap: wrap; gap: 10px 18px; justify-content: center; }
}

/* ---------- taalkeuze: de eerste vraag van de game ---------- */
/* De startknoppen blijven verborgen tot er een taal gekozen is. */
.gj-intro:not(.langdone) .gj-begin { display: none !important; }
.gj-langpick { animation: gjRise 1s 0.6s ease both; margin: 34px 0 18px; }
.gj-langpick-q {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: #7a6e67;
  margin-bottom: 14px;
}
.gj-langrow { display: flex; align-items: center; justify-content: center; gap: 12px; }
/* zelfde pilvorm als de startknop, maar als omlijnde variant */
.gj-lang-pill {
  appearance: none; cursor: pointer;
  background: transparent; color: #3B2F2A;
  border: 1px solid rgba(59, 47, 42, 0.35);
  border-radius: 9999px;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  padding: 13px 30px;
  transition: transform 0.3s, background 0.2s, color 0.2s, border-color 0.2s;
}
.gj-lang-pill:hover { border-color: #3B2F2A; transform: scale(1.05); }
.gj-lang-pill:active { transform: scale(0.98); }
.gj-lang-pill.on { background: #0D0D0D; color: #FAF6F0; border-color: #0D0D0D; }
@media (max-width: 640px) {
  .gj-lang-pill { padding: 12px 22px; }
  .gj-langrow { gap: 9px; }
}
@keyframes gjRise {
  0% { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ---------- pauzescherm ---------- */
.gj-pause-title {
  font-size: 26px;
  font-weight: 200;
  letter-spacing: 0.5em;
  color: #fff;
  margin-bottom: 18px;
}
.gj-pause-sub {
  font-size: 11px;
  letter-spacing: 0.24em;
  color: rgba(255, 255, 255, 0.5);
}

/* ---------- eindscherm ---------- */
.gj-ending {
  background:
    radial-gradient(ellipse at 50% 110%, rgba(120, 60, 200, 0.25), transparent 55%),
    rgba(1, 1, 5, 0.96);
  cursor: default;
  overflow-y: auto;
  padding: 6vh 24px;
}
.gj-end-eyebrow {
  font-size: 11px;
  letter-spacing: 0.5em;
  margin-bottom: 20px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.9s 0.2s ease, transform 0.9s 0.2s ease;
}
.gj-end-title {
  font-size: clamp(34px, 5.4vw, 62px);
  font-weight: 200;
  letter-spacing: 0.3em;
  color: #fff;
  margin-bottom: 24px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.9s 0.35s ease, transform 0.9s 0.35s ease;
}
.gj-end-rule {
  width: 70px;
  height: 1px;
  margin: 0 auto 26px;
  opacity: 0;
  transition: opacity 0.9s 0.5s ease;
}
.gj-end-body {
  max-width: 540px;
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.8;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.72);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.9s 0.5s ease, transform 0.9s 0.5s ease;
}
.gj-ending.reveal .gj-end-eyebrow,
.gj-ending.reveal .gj-end-title,
.gj-ending.reveal .gj-end-rule,
.gj-ending.reveal .gj-end-body { opacity: 1; transform: translateY(0); }

/* ---------- karakterkeuze (draaitafel) ---------- */
.gj-cs { position: absolute; inset: 0; z-index: 9; pointer-events: none; opacity: 0; transition: opacity 0.4s ease; }
.gj-cs.on { opacity: 1; pointer-events: auto; }
.gj-cs-title { position: absolute; top: 9%; left: 0; right: 0; text-align: center; font-size: 11px; letter-spacing: 0.34em; color: rgba(255,255,255,0.55); }
.gj-cs .gj-cs-name { position: absolute; left: 0; right: 0; bottom: 168px; text-align: center; font-size: clamp(30px,6vw,54px); font-weight: 300; letter-spacing: 0.14em; color: #fff; text-shadow: 0 2px 22px rgba(0,0,0,0.6); }
.gj-cs-nav { position: absolute; left: 50%; bottom: 74px; transform: translateX(-50%); display: flex; align-items: center; gap: 26px; }
.gj-cs-arrow { width: 62px; height: 62px; border-radius: 50%; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.28); color: #fff; font-size: 30px; cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; -webkit-tap-highlight-color: transparent; }
.gj-cs-arrow:hover { background: rgba(255,255,255,0.16); }
/* dezelfde pil als op de site */
.gj-cs-start {
  background: #0D0D0D !important; color: #FAF6F0 !important;
  border: none !important; border-radius: 9999px !important;
  box-shadow: none;
  font-family: 'Instrument Sans', sans-serif !important;
  font-size: 11px !important; font-weight: 500 !important;
  letter-spacing: 0.2em !important; text-transform: uppercase;
  padding: 14px 40px !important;
  transition: transform 0.3s, background 0.2s;
}
.gj-cs-start:hover { background: #241C18 !important; transform: scale(1.05); }
.gj-cs-start:active { transform: scale(0.98); }

/* ---------- actieknop op aanraakschermen ---------- */
.gj-act {
  position: absolute; right: 30px; bottom: 40px;
  width: 84px; height: 84px; border-radius: 50%;
  background: rgba(255, 210, 122, 0.15);
  border: 1.5px solid rgba(255, 210, 122, 0.7);
  color: #ffd27a; font-size: 30px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  pointer-events: auto; touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
.gj-act.down { background: rgba(255, 210, 122, 0.35); transform: scale(0.94); }
.gj-act { color: #d8b56a !important; border-color: rgba(216,181,106,0.7) !important; }

/* =====================================================================
   Overzetting naar het sitethema: crème schermen, bruine inkt, seriftitels.
   Deze regels horen ná de basisregels hierboven te staan.
   ===================================================================== */
.gj-intro, .gj-ending { background: #FAF6F0 !important; }
.gj-fade { background: #FAF6F0 !important; }
.gj-pause { background: rgba(250,246,240,0.92) !important; }
.gj-intro-eyebrow, .gj-end-eyebrow, .gj-ch-eyebrow { color: #7a6e67 !important; }
.gj-intro-title, .gj-ch-title, .gj-end-title, .gj-pause-title { color: #3B2F2A !important; }
.gj-intro-sub, .gj-end-body, .gj-pause-sub { color: #6b5f57 !important; }
.gj-intro-rule, .gj-ch-rule, .gj-end-rule { background: rgba(59,47,42,0.22) !important; }
.gj-ch-title, .gj-end-title, .gj-pause-title, .gj-cs .gj-cs-name {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
}
.gj-intro-title, .gj-end-title { font-style: italic; }

/* Op een telefoon paste THE CREATIVE JOURNEY niet: de titel begon door de clamp
   op 56 px, mocht niet afbreken (nowrap) en was begrensd op 92vw, dus werd hij
   afgekapt. Hier mag hij over twee regels en begint hij kleiner. */
@media (max-width: 768px) {
  .gj-intro-title {
    font-size: clamp(2.1rem, 11vw, 3.4rem);
    white-space: normal;
    line-height: 1.05;
    text-align: center;
    max-width: 94vw;
  }
}
/* de introkop is een gewone zin, geen kapitalen-blok */
.gj-intro-eyebrow {
  font-family: 'Instrument Sans', sans-serif;
  font-size: clamp(.6rem, 2.5vw, .88rem) !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  color: rgba(59, 47, 42, 0.7) !important;
}
/* karakterkeuze speelt zich ook op crème af */
.gj-cs-title { color: #6b5c53 !important; }
.gj-cs .gj-cs-name { color: #3B2F2A !important; text-shadow: 0 1px 18px rgba(250,246,240,0.9) !important; }
.gj-cs-arrow { background: rgba(59,47,42,0.06) !important; border-color: rgba(59,47,42,0.32) !important; color: #3B2F2A !important; }
.gj-cs-arrow:hover { background: rgba(59,47,42,0.14) !important; }

/* ---------- direction confirm popup ---------- */
.gj-confirm {
  position: absolute; inset: 0; z-index: 14;
  display: none; align-items: center; justify-content: center;
  background: rgba(20, 15, 12, 0.5);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  pointer-events: none;
}
.gj-confirm.on { display: flex; pointer-events: auto; }
.gj-confirm-box {
  background: #FAF6F0; color: #3B2F2A;
  border-radius: 18px; padding: 34px 34px 28px;
  max-width: min(440px, 88vw); text-align: center;
  box-shadow: 0 30px 70px rgba(0,0,0,0.4);
}
.gj-confirm-text {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(20px, 3vw, 28px); line-height: 1.3; color: #3B2F2A;
  margin-bottom: 24px;
}
.gj-confirm-btns { display: flex; flex-direction: column; gap: 10px; }
.gj-confirm-yes, .gj-confirm-no {
  font-family: 'Instrument Sans', sans-serif; font-size: 13px; letter-spacing: 0.14em;
  padding: 13px 20px; border-radius: 9999px; cursor: pointer; border: 1px solid transparent;
}
.gj-confirm-yes { background: #3B2F2A; color: #FAF6F0; border: none; font-weight: 600; }
.gj-confirm-yes:hover { background: #0D0D0D; }
.gj-confirm-no { background: transparent; color: #7a6e67; border-color: rgba(59,47,42,0.25); }
.gj-confirm-no:hover { background: rgba(59,47,42,0.06); color: #3B2F2A; }

/* ---------- ending credits readable on the cream ending screen ---------- */
.gj-credit span { color: #8a7d73 !important; }
.gj-credit b { color: #3B2F2A !important; }
.gj-credit { border-bottom-color: rgba(59,47,42,0.14) !important; }
.gj-end-footer, .gj-end-hint { color: #7a6e67 !important; }

/* ---------- no plate behind HUD titles; ink flips per world ---------- */
.gj-top {
  background: none !important;
  padding: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* dark worlds (default): light ink with a soft dark halo */
.gj-leveltitle { text-shadow: 0 1px 12px rgba(0,0,0,.75); }
.gj-eyebrow, .gj-objective { text-shadow: 0 1px 10px rgba(0,0,0,.7); }

/* light worlds: brown ink, no halo */
.gj-lightworld .gj-leveltitle { color: #2B211C !important; border-bottom-color: rgba(43,33,28,.28) !important; text-shadow: none; }
.gj-lightworld .gj-eyebrow,
.gj-lightworld .gj-objective { color: rgba(43,33,28,.72) !important; text-shadow: none; }
.gj-lightworld .gj-prompt { color: #2B211C !important; text-shadow: 0 1px 8px rgba(255,255,255,.85) !important; }
.gj-lightworld .gj-prompt-key { color: #9a6b1f !important; }
.gj-lightworld .gj-crosshair { background: rgba(43,33,28,.8); box-shadow: 0 0 8px rgba(255,255,255,.7); }

/* ---------- lens picker (shooting day) ---------- */
.gj-lenses {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 2.4vh; z-index: 12;
  display: none; gap: 10px; pointer-events: none;
}
.gj-lenses.on { display: flex; pointer-events: auto; }
.gj-lens {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 10px 16px; cursor: pointer;
  background: rgba(8, 6, 4, 0.6); color: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(216, 181, 106, 0.35); border-radius: 10px;
  font-family: 'Instrument Sans', sans-serif;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.18s;
}
.gj-lens b { font-size: 15px; font-weight: 600; letter-spacing: 0.04em; }
.gj-lens span { font-size: 9px; letter-spacing: 0.18em; opacity: 0.75; }
.gj-lens:hover { background: rgba(216, 181, 106, 0.2); color: #fff; }
/* pijltjes naast de lensrij, in dezelfde toon als de knoppen */
.gj-lens-pijl {
  align-self: center;
  color: rgba(216, 181, 106, 0.75);
  font-size: 17px; line-height: 1;
  padding: 0 2px;
  pointer-events: none;
  user-select: none;
}
/* Kort zetje onderin links: waar de lenzen en hoogteknoppen niet komen. */
.gj-movehint {
  position: absolute; left: 2vw; bottom: 2.4vh;
  z-index: 11; pointer-events: none;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 10px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.9);
  opacity: 0; transition: opacity 0.3s ease;
}
.gj-movehint.on { opacity: 1; }
@media (max-width: 768px) { .gj-movehint { display: none; } }

.gj-lens.on {
  background: rgba(216, 181, 106, 0.9); color: #1a1208;
  border-color: #d8b56a; transform: translateY(-3px);
}
@media (max-width: 640px) {
  .gj-lenses { gap: 6px; bottom: calc(11.5vh + 16px); }
  .gj-lens { padding: 8px 11px; }
  .gj-lens b { font-size: 13px; }
  .gj-lens span { font-size: 8px; letter-spacing: 0.12em; }
}

/* controls repeated on the pause screen */
.gj-pause-controls { margin: 22px 0 26px; }
.gj-pause .gj-controls { color: rgba(43,33,28,.6); }
.gj-pause .gj-controls b { color: #2B211C; }

/* ---------- montage van de opgenomen takes ---------- */
.gj-montage {
  position: absolute; inset: 0; z-index: 6;
  background: #000;
  display: flex; align-items: center; justify-content: center;
  container-type: size;
  /* Geen fade op de laag zelf: hij verschijnt en verdwijnt onder het zwart en
     onder het eindscherm. Met een fade zag je in de eerste beeldjes nog even
     de montagesuite doorschemeren. */
  opacity: 0; pointer-events: none;
}
.gj-montage.on { opacity: 1; }

/* ---------- kaderhulp op de draaidag ---------- */
.gj-framehint {
  position: absolute; left: 50%; top: 62%;
  transform: translate(-50%, 0);
  font-size: 12px; letter-spacing: 0.26em; text-transform: uppercase;
  color: #ffb08a; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85);
  opacity: 0; transition: opacity 0.2s ease; z-index: 5; white-space: nowrap;
}
.gj-framehint.on { opacity: 1; }

/* De zone waarbinnen de acteurs moeten staan, met lucht boven hun hoofd. */
.gj-safe {
  position: absolute; left: 8%; right: 8%; top: 20%; bottom: 12%;
  border: 1px dashed rgba(255, 255, 255, 0.22);
  border-radius: 3px;
  opacity: 0; transition: opacity 0.3s ease, border-color 0.3s ease;
  pointer-events: none; z-index: 3;
}
.gj-safe.on { opacity: 1; }
.gj-safe.ok { border-color: rgba(120, 255, 170, 0.5); }
.gj-rec.ready .gj-rec-dot { background: #7dffaa; }

/* ---------- ondertiteling over de montage ---------- */

/* ---------- hoogteverstelling van de camera ---------- */
.gj-height.on { display: flex; }
.gj-height-val {
  font-size: 11px; letter-spacing: 0.16em; color: rgba(255,255,255,0.8);
  font-variant-numeric: tabular-nums; text-shadow: 0 1px 8px rgba(0,0,0,0.9);
}
.gj-height-btn {
  width: 44px; height: 44px; border-radius: 9999px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.28);
  color: #fff; font-size: 13px; cursor: pointer; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.gj-height-btn:hover { background: rgba(255,255,255,0.18); }

/* =====================================================================
   ARRI-achtige camera-display.
   Opbouw van binnen naar buiten: het beeld is 3:2, daar sluit de infobalk
   strak omheen, en pas daarbuiten vult zwart de rest van het scherm op,
   hoe iemand zijn venster ook heeft staan.
   ===================================================================== */
.gj-arri {
  position: absolute; inset: 0; z-index: 4;
  opacity: 0; pointer-events: none;
  transition: opacity 0.35s ease;
  display: flex; align-items: center; justify-content: center;
  /* Geen condensed meer: ARRI's display is een gewone grotesk. Roboto komt er
     qua letterbreedte en cijfervorm het dichtst bij van wat vrij beschikbaar is. */
  font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
.gj-arri.on { opacity: 1; }

/* schaalt het geheel zo groot mogelijk binnen het scherm, met de juiste ratio */
.gj-arri-fit {
  position: relative;
  container-type: size;
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  /* iets omhoog, zodat de strook eronder vrij blijft voor de lensknoppen */
  padding-bottom: 9vh;
}
.gj-arri-panel {
  /* iets kleiner gehouden zodat de lensknoppen eronder passen zonder
     over het beeld te vallen */
  --img-w: min(78cqw, calc(62cqh * 3 / 2));
  width: var(--img-w);
  display: flex; flex-direction: column;
}

.gj-arri-mid { display: flex; align-items: stretch; }
/* het zichtbare beeld: altijd 3:2 */
/* Het beeld zelf blijft doorzichtig zodat je de 3D-wereld ziet; de schaduw
   eromheen maakt de rest van het scherm zwart. Een dekkende achtergrond op de
   hele overlay dekte het canvas af en gaf een zwart beeld. */
.gj-arri-crop {
  position: relative; flex: 1 1 auto; aspect-ratio: 3 / 2;
  box-shadow: 0 0 0 100vmax #000;
}

/* infokolommen direct tegen het beeld aan */
.gj-arri-left, .gj-arri-right {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; padding: 4px 5px;
  flex: 0 0 auto;
}
.gj-arri-spacer { flex: 1 1 auto; }

.gj-arri-top, .gj-arri-bot {
  position: relative; z-index: 2;
  display: flex; align-items: center;
  color: #fff;
  padding: 7px 4px;
  gap: clamp(10px, 2.4cqw, 34px);
}
.gj-arri-top { justify-content: flex-start; }
.gj-arri-bot { justify-content: space-between; }

.gj-arri i { display: flex; align-items: baseline; gap: 0.45em; font-style: normal; white-space: nowrap; }
.gj-arri b {
  font-weight: 400; letter-spacing: 0.02em;
  font-size: clamp(8px, 1.15cqw, 15px);
  color: #b9b9b9;
}
.gj-arri s, .gj-arri u {
  text-decoration: none; font-weight: 500;
  font-size: clamp(9px, 1.45cqw, 19px);
  color: #fff;
}
.gj-arri em {
  font-style: normal; font-weight: 500;
  font-size: clamp(7px, 1.0cqw, 13px);
  color: #e8e8e8; background: #2b2b2b;
  padding: 2px 5px; border-radius: 2px;
}
.gj-arri-left > b, .gj-arri-right > b {
  font-weight: 400; font-size: clamp(7px, 0.95cqw, 12px); color: #b9b9b9;
}

/* Framelines binnen het 3:2 beeld. 16:9 is 84,4% van de hoogte, 9:16 is
   37,5% van de breedte. De 9:16 lijnen tekenen we alleen in de stroken boven
   en onder het 16:9 kader, zodat het beeld zelf schoon blijft. */
.gj-fl-169 {
  position: absolute; left: 0; right: 0; top: 7.81%; bottom: 7.81%;
  border: 1px solid rgba(255, 255, 255, 0.9);
}
.gj-fl-916 {
  position: absolute; left: 31.25%; right: 31.25%; height: 7.81%;
  border-left: 1px solid rgba(255, 255, 255, 0.9);
  border-right: 1px solid rgba(255, 255, 255, 0.9);
}
.gj-fl-916.top { top: 0; border-top: 1px solid rgba(255, 255, 255, 0.9); }
.gj-fl-916.bot { bottom: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.9); }

/* status: groen in standby, rood zodra er gedraaid wordt */
.gj-arri-stat { gap: 0.42em; }
.gj-arri-dot {
  width: 0.62em; height: 0.62em; border-radius: 50%;
  background: #22c55e; flex: 0 0 auto; align-self: center;
}
.gj-arri.rolling .gj-arri-dot { background: #ff2d2d; animation: gjRecBlink 0.7s steps(2) infinite; }
.gj-arri.rolling #ar-stat { color: #ff6b6b; }

/* ---------- hoogteverstelling van de camera ---------- */
/* De hoogteknoppen zaten op z-index 6 terwijl het tikvlak voor het rondkijken
   op 7 staat: op mobiel ving dat vlak elke tik op en deed de knop niets. Ze
   staan nu ook onder het camerabeeld in plaats van tegen de zijkant. */
.gj-height {
  /* Precies boven de lensrij, met een vaste tussenruimte in pixels. Met een
     hoogte in vh liepen ze op een lager scherm over elkaar heen. */
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(2.4vh + 66px);
  display: none; flex-direction: row; align-items: center; gap: 10px;
  z-index: 12; pointer-events: auto;
}
.gj-height.on { display: flex; }
.gj-height-val {
  font-size: 11px; letter-spacing: 0.16em; color: rgba(255,255,255,0.8);
  font-variant-numeric: tabular-nums; text-shadow: 0 1px 8px rgba(0,0,0,0.9);
}
.gj-height-btn {
  width: 44px; height: 44px; border-radius: 9999px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.28);
  color: #fff; font-size: 13px; cursor: pointer; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.gj-height-btn:hover { background: rgba(255,255,255,0.18); }

/* =====================================================================
   ARRI-achtige camera-display, nagebouwd naar de referentiefoto.
   Zwarte rand rondom het beeld, labels grijs en klein, waarden vet wit.
   ARRI's eigen huisletter is niet vrij beschikbaar; een smalle grotesk met
   tabulaire cijfers komt er het dichtst bij.
   ===================================================================== */
/* hint dat een tussenscherm over te slaan is */
.gj-ch-skip {
  margin-top: 22px;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(59, 47, 42, 0.45);
  animation: gjPromptPulse 2.2s ease-in-out infinite;
}

/* ---------- premiere: filmischer dan een reeks losse clips ---------- */
/* --r is het gekozen afleverformaat, gezet vanuit de montage. Met container
   query units past het kader altijd binnen beeld, of het nu een story van 9x16
   is of breedbeeld. */
.gj-mon-stage {
  position: relative;
  --r: 1.7778;
  width: min(100cqw, calc(100cqh * var(--r)));
  height: min(100cqh, calc(100cqw / var(--r)));
  overflow: hidden; background: #000;
  /* zelf ook een container, zodat de copy meeschaalt met het kader en niet
     met het scherm; in een 9x16 wordt hij dus vanzelf kleiner */
  container-type: size;
}
.gj-mon-vid {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 0.42s ease;
}
.gj-mon-vid.on { opacity: 1; }
@keyframes gjMonDriftIn {
  from { transform: scale(1.0); }
  to   { transform: scale(1.075); }
}
@keyframes gjMonDriftOut {
  from { transform: scale(1.075); }
  to   { transform: scale(1.0); }
}
/* zachte vignettering, geeft diepte zonder grain */
.gj-mon-vig {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 52%, rgba(0,0,0,0.55) 100%);
}
/* titel- en aftitelkaart */
.gj-mon-card {
  position: absolute; inset: 0; display: flex;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center;
  background: #000;
  opacity: 0; transition: opacity 0.6s ease; pointer-events: none;
}
.gj-mon-card.on { opacity: 1; }
.gj-mon-t1 {
  font-family: 'Instrument Serif', serif; font-style: italic;
  font-size: clamp(22px, 3.4vw, 54px); color: #FAF6F0; line-height: 1.1;
}
.gj-mon-t2 {
  font-size: clamp(9px, 1vw, 12px); letter-spacing: 0.42em;
  color: rgba(250,246,240,0.55); text-transform: uppercase;
}
.gj-mon-meta {
  margin-top: 14px; font-size: clamp(9px, 1vw, 12px);
  letter-spacing: 0.26em; color: rgba(250,246,240,0.45); text-transform: uppercase;
}
/* in en uit zwart */
.gj-mon-black {
  position: absolute; inset: 0; background: #000;
  opacity: 0; transition: opacity 0.7s ease; pointer-events: none;
}
.gj-mon-black.on { opacity: 1; }

/* Het eindscherm is donker, dus daar staat dezelfde pil omgekeerd: crème
   vulling met donkere letters. Zelfde vorm, zelfde maat, zelfde letter. */
.gj-end-btn {
  background: #FAF6F0 !important; color: #0D0D0D !important;
  border: none !important; border-radius: 9999px !important;
  box-shadow: none;
  font-family: 'Instrument Sans', sans-serif !important;
  font-size: 11px !important; font-weight: 500 !important;
  letter-spacing: 0.2em !important; text-transform: uppercase !important;
  padding: 14px 34px !important;
  cursor: pointer; transition: transform 0.3s, background 0.2s;
}
.gj-end-btn:hover { background: #fff !important; transform: scale(1.05); }
.gj-end-btn:active { transform: scale(0.98); }
/* aftellend filmlood voor de montage */
.gj-mon-leader {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; background: #0d0d0d;
  opacity: 0; transition: opacity 0.35s ease; pointer-events: none;
}
.gj-mon-leader.on { opacity: 1; }

/* Camera verlaten zonder op te nemen. In cameramodus zit de muis vast, dus je
   kunt er niet naartoe klikken: de toets is de echte bediening en de knop laat
   vooral zien welke toets dat is. Op een telefoon vervalt de toetscap en is het
   gewoon een tikdoel. */
.gj-cam-exit {
  position: absolute; left: 2vw; top: 2.4vh;
  z-index: 12;
  display: none; align-items: center; gap: 10px;
  padding: 8px 16px 8px 10px;
  background: rgba(12, 10, 9, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.9);
  font-family: inherit; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background 0.2s, border-color 0.2s;
}
.gj-cam-exit.on { display: inline-flex; }
.gj-cam-exit:hover { background: rgba(30, 24, 20, 0.9); border-color: rgba(255, 255, 255, 0.55); }
.gj-cam-exit:active { transform: scale(0.96); }
.gj-key {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 5px;
  border-radius: 5px;
  background: linear-gradient(#f6f2ec, #ddd5ca);
  border: 1px solid rgba(0, 0, 0, 0.35);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  color: #241c18;
  font-family: inherit; font-size: 11px; font-weight: 700; letter-spacing: 0;
  line-height: 1;
}
.gj-cam-exit:active .gj-key { box-shadow: 0 0 0 rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.9); transform: translateY(2px); }

/* Tweede knop op het introscherm, alleen zichtbaar als er iets te hervatten is */
.gj-resume { display: none; margin-bottom: 14px; }
.gj-resume.on { display: inline-block; }

/* Uitleg onder de knoppen: waar de film heen gaat als je hem deelt */
.gj-end-note {
  margin-top: 14px;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  opacity: 0;
  transition: opacity 1s 3s ease;
}
.gj-ending.reveal .gj-end-note { opacity: 1; }

/* ---------- cameramodus op smalle schermen ----------
   Op een telefoon is het beeld al klein; de zwarte randen links en rechts zijn
   dan zonde. De hoogteknoppen staan onder het beeld en de lenzen daar weer
   onder, ruim boven de joystick. */
@media (max-width: 768px) {
  .gj-arri-panel { --img-w: min(96cqw, calc(52cqh * 3 / 2)); }
  /* De joystick staat 30px van onderen en is 122px hoog, dus alles moet boven
     152px blijven. Eerst de hoogteknoppen, daaronder de lenzen. */
  .gj-height { bottom: 234px; gap: 14px; }
  .gj-height-btn { width: 46px; height: 46px; font-size: 15px; }
  .gj-lenses { bottom: 168px; }
  .gj-lens { padding: 8px 12px; }
}
/* Het dialoogvenster (take bewaren of opnieuw) moet op mobiel boven alles
   uitkomen en in het midden staan, niet onderaan achter de bediening. */
@media (max-width: 768px) {
  .gj-dialogue {
    left: 50% !important; right: auto !important;
    top: 50% !important; bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    width: min(88vw, 420px) !important; max-width: 88vw !important;
    z-index: 60 !important;
  }
}