/* ============================================================
   De Amulet van de Herfst — navy + goud thema, mobile-first
   ============================================================ */

:root {
  --bg-deep:    #1a1410;
  --panel:      #221a2e;
  --panel-2:    #2c2238;
  --gold:       #c9a24b;
  --gold-light: #e7cf86;
  --parchment:  #efe3c8;
  --sand:       #d8b98a;
  --rust:       #a8432a;

  --font-title: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --font-body:  'Crimson Pro', Georgia, serif;
  --font-pixel: 'Pixelify Sans', 'Courier New', monospace;

  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg-deep);
  color: var(--parchment);
  font-family: var(--font-body);
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  overscroll-behavior: none;
}

#game {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* ---------- Panelen met dubbele goudrand ---------- */

.panel {
  background: var(--panel);
  border: 2px solid var(--gold);
  border-radius: 0;
  box-shadow:
    0 0 0 2px #1f1410,
    inset 0 2px 0 rgba(231,207,134,.3),
    inset 0 -2px 0 rgba(0,0,0,.5);
}

.panel-mini {
  background: rgba(34, 26, 46, .94);
  border: 2px solid var(--gold);
  border-radius: 0;
  box-shadow: 0 0 0 2px #1f1410;
}

/* ---------- UI lagen ---------- */

#ui {
  position: fixed;
  inset: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#topbar {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: calc(var(--safe-top) + 10px) 12px 0;
  position: relative;
}

#topcenter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  max-width: calc(100vw - 130px);
}

/* Tip (doel): verstopt onder de (i)-knop linksboven; verschijnt als popover. */
#quest {
  position: fixed;
  left: 12px;
  top: calc(var(--safe-top) + 58px);
  z-index: 29;
  max-width: min(78vw, 330px);
  font-family: var(--font-pixel);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.3;
  color: #2a1c10;
  background: var(--gold);
  border: none;
  border-radius: 0;
  box-shadow:
    0 0 0 2px #1f1410,
    0 0 0 4px var(--gold),
    0 0 0 6px #1f1410,
    inset 0 2px 0 var(--gold-light),
    inset 0 -2px 0 #8a6a26;
  padding: 6px 12px;
  text-align: left;
  transition: opacity .3s;
}

/* (i)-tip-knop, naast EN linksboven */
.round-btn.info {
  position: fixed;
  right: auto;
  left: 112px;
  top: calc(var(--safe-top) + 8px);
  z-index: 30;
  font-family: var(--font-pixel);
  font-size: 18px;
  font-weight: 700;
  font-style: italic;
}
.round-btn.info.on { background: var(--gold); color: #2a1c10; }

/* Geluidsknop links, hintknop rechts — banner vrij in het midden */
.round-btn.sound {
  right: auto;
  left: 12px;
}

/* Taalknop: ook bruikbaar op het titelscherm (boven de overlays) */
.round-btn.lang {
  position: fixed;
  right: auto;
  left: 62px;
  top: calc(var(--safe-top) + 8px);
  z-index: 30;
  font-family: var(--font-pixel);
  font-size: 15px;
  font-weight: 600;
}

/* Tekstballon boven een personage */
.speech {
  position: fixed;
  z-index: 12;
  max-width: min(60vw, 360px);
  min-width: 150px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: var(--parchment);
  color: #2e2014;
  border: 2px solid #8a6a3a;
  border-radius: 4px;
  padding: 7px 11px;
  box-shadow: 0 0 0 2px #1f1410, inset 0 0 0 1px rgba(255,255,255,.6);
  font-family: var(--font-pixel);
  font-size: 13.5px;
  font-weight: 600;          /* dikkere pixels = beter leesbaar; kleinere ballon */
  line-height: 1.38;
  pointer-events: auto;
  cursor: pointer;
  transform: translate(-50%, -100%);
  animation: bubbleIn .18s ease-out;
}
#bubbleFace {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  image-rendering: pixelated;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #8a6a3a, 0 0 0 4px #1f1410;
  align-self: center;
}

.speech .tail {
  position: absolute;
  left: 50%;
  bottom: -9px;
  width: 14px;
  height: 14px;
  background: var(--parchment);
  border-right: 2px solid #8a6a3a;
  border-bottom: 2px solid #8a6a3a;
  transform: translateX(-50%) rotate(45deg);
}
@keyframes bubbleIn {
  from { opacity: 0; transform: translate(-50%, -100%) scale(.85); }
  to   { opacity: 1; transform: translate(-50%, -100%) scale(1); }
}

/* Oppak-toast boven de inventaris */
#toast {
  position: fixed;
  left: 50%;
  bottom: 110px;
  transform: translateX(-50%);
  z-index: 12;
  font-family: var(--font-pixel);
  font-size: 15px;
  color: var(--gold-light);
  background: rgba(34,26,46,.94);
  border: 2px solid var(--gold);
  border-radius: 0;
  box-shadow: 0 0 0 2px #1f1410;
  padding: 6px 14px;
  pointer-events: none;
  animation: toastUp 1.6s ease-out forwards;
}
@keyframes toastUp {
  0%   { opacity: 0; transform: translateX(-50%) translateY(14px); }
  15%  { opacity: 1; transform: translateX(-50%) translateY(0); }
  75%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) translateY(-22px); }
}

#hotspot-label {
  font-family: var(--font-pixel);
  font-size: 15px;
  color: var(--gold-light);
  padding: 5px 14px;
  max-width: 70vw;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  animation: labelIn .18s ease-out;
  border-radius: 0;
  box-shadow: 0 0 0 2px #1f1410, inset 0 0 0 1px rgba(231,207,134,.45);
}

@keyframes labelIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

.round-btn {
  pointer-events: auto;
  position: absolute;
  right: 12px;
  top: calc(var(--safe-top) + 8px);
  width: 42px;
  height: 42px;
  border-radius: 0;
  font-size: 20px;
  line-height: 1;
  color: var(--gold-light);
  background: var(--panel);
  border: 2px solid var(--gold);
  box-shadow: 0 0 0 2px #1f1410, inset 0 2px 0 rgba(231,207,134,.35), inset 0 -2px 0 rgba(0,0,0,.5);
  cursor: pointer;
  image-rendering: pixelated;
}
.round-btn:active { transform: scale(.92); }
.round-btn.dev { right: 60px; font-size: 18px; }   /* dev-knop links naast het oogje (oogje blijft op right:12px) */
.round-btn.home {
  top: auto; right: auto;
  left: 10px; bottom: max(10px, var(--safe-bottom));
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; font-size: 19px; font-weight: bold;
  padding-bottom: 2px; z-index: 16; opacity: .9;
}

/* ---------- Onderkant: tekstvenster + inventaris ---------- */

#bottomui {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 10px calc(var(--safe-bottom) + 10px);
}

#msg {
  pointer-events: auto;
  /* tekstwolk BOVENIN (weg van de scène + inventory onderaan), horizontaal gecentreerd
     via auto-marges i.p.v. transform (transform botst met de msgIn-animatie) */
  position: fixed;
  top: calc(var(--safe-top, 0px) + 10px);
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 40;
  padding: 7px 12px 5px;
  max-width: 480px;          /* compactere tekstwolk (overlapt de scène/knoppen niet) */
  width: fit-content;
  cursor: pointer;
  animation: msgIn .22s ease-out;
  display: flex;
  align-items: center;
  gap: 9px;
}
#msgFace {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  image-rendering: pixelated;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #8a6a3a, 0 0 0 4px #1f1410;
}
.msg-body { flex: 1 1 auto; }

@keyframes msgIn {
  /* alleen faden, niet verschuiven — de tekstwolk staat meteen strak bovenin (geen hapering) */
  from { opacity: 0; }
  to   { opacity: 1; }
}

#msgText {
  font-family: var(--font-pixel);
  font-size: 13.5px;
  font-weight: 600;          /* dikkere pixels = beter leesbaar */
  line-height: 1.42;
  color: var(--parchment);
}

.choice-opts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.choice-btn {
  font-family: var(--font-pixel); font-size: 11px; line-height: 1.1;
  padding: 7px 12px; cursor: pointer; color: #2a1c10;
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
  border: 2px solid #8a6a28; border-radius: 0;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.35), 0 2px 0 #1f1410;
}
.choice-btn:active { transform: translateY(1px); }
#msgMore {
  display: block;
  margin-top: 3px;
  text-align: right;
  font-family: var(--font-pixel);
  font-size: 10.5px;
  color: var(--sand);
  opacity: .85;
  animation: pulse 1.6s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: .45; }
  50%      { opacity: .95; }
}

#invbar {
  /* De balk zelf laat tikken DOORgaan naar het canvas (lopen op mobiel);
     alleen de itemvakjes vangen tikken om te selecteren. */
  pointer-events: none;
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  padding: 8px 18px;
  width: fit-content;
  margin: 0 auto;
  position: relative;
}

/* Ornamentele eindkapjes op de toolbar */
#invbar::before,
#invbar::after {
  content: '◆';
  color: var(--gold);
  font-size: 11px;
  text-shadow: 0 1px 0 #1f1410;
  flex: 0 0 auto;
}

#invbar {
  background: rgba(26, 20, 16, .72);
}

/* Rij met de spreuk-knop naast de inventaris */
#invrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: fit-content;
  margin: 0 auto;
}
.round-btn.spell {
  position: static;          /* in de inventaris-rij, niet absoluut in de hoek */
  right: auto; top: auto;
  pointer-events: auto;
  flex: 0 0 auto;
  width: 50px; height: 50px;
  padding: 7px;
  background: radial-gradient(circle at 50% 36%, #243a63 0%, #131b30 72%);
  border: 2px solid #3f63a6;
  box-shadow: 0 0 0 2px #0e1526, inset 0 2px 0 rgba(150,190,255,.18);
}
.round-btn.spell svg { width: 100%; height: 100%; display: block; overflow: visible; }
.round-btn.spell .rune-ring { fill: none; stroke: #6f9fe0; stroke-width: 1.3; opacity: .8; }
.round-btn.spell .rune-star { fill: #bcd8ff; }
.round-btn.spell .rune-core { fill: #f2f8ff; }
.round-btn.spell:hover .rune-star { fill: #ddeeff; }
/* gloeit alleen even bij een klik */
.round-btn.spell.cast { animation: spellFlash .6s ease-out; }
.round-btn.spell.cast svg { animation: spellFlashSvg .6s ease-out; }
@keyframes spellFlash {
  0%   { box-shadow: 0 0 0 2px #0e1526, 0 0 26px 9px rgba(150,195,255,.95); border-color: #bcd8ff; }
  100% { box-shadow: 0 0 0 2px #0e1526, inset 0 2px 0 rgba(150,190,255,.18); border-color: #3f63a6; }
}
@keyframes spellFlashSvg {
  0%   { filter: drop-shadow(0 0 6px rgba(170,205,255,1)); transform: scale(1.12) rotate(0deg); }
  100% { filter: none; transform: scale(1) rotate(0deg); }
}

.inv-slot {
  pointer-events: auto;
  position: relative;
  width: 50px;
  height: 50px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  border-radius: 0;
  background: linear-gradient(180deg, #241a12, #140f0a);
  border: 2px solid #5e4a22;
  box-shadow:
    0 0 0 1px #1f1410,
    inset 0 2px 4px rgba(0,0,0,.8),
    inset 0 -1px 0 rgba(231,207,134,.10);
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .1s;
}

.inv-slot.filled {
  border-color: var(--gold);
  background:
    radial-gradient(circle at 50% 42%, rgba(231,207,134,.16), transparent 68%),
    linear-gradient(180deg, #241a12, #140f0a);
}

.inv-slot img {
  width: 84%;
  height: 84%;
  object-fit: contain;
  image-rendering: pixelated;
  pointer-events: none;
}

.inv-slot:active { transform: scale(.93); }

.inv-slot.selected {
  border-color: var(--gold-light);
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,.7),
    0 0 12px 2px rgba(231,207,134,.65),
    0 0 4px 1px var(--gold-light);
  animation: glow 1.2s ease-in-out infinite;
}

@keyframes glow {
  0%, 100% { box-shadow: inset 0 2px 6px rgba(0,0,0,.7), 0 0 12px 2px rgba(231,207,134,.65); }
  50%      { box-shadow: inset 0 2px 6px rgba(0,0,0,.7), 0 0 18px 4px rgba(231,207,134,.85); }
}

.inv-slot.pop { animation: itemPop .35s ease-out; }

/* Magisch fonkelend item (bv. bessenbrouwsel/slaapdrank): glinstertjes over het flesje */
.inv-slot.sparkle::before,
.inv-slot.sparkle::after {
  content: '✦'; position: absolute; z-index: 3; pointer-events: none;
  color: #fff6d8; font-size: 9px; text-shadow: 0 0 5px rgba(255,240,180,.95), 0 0 9px rgba(255,210,120,.7);
}
.inv-slot.sparkle::before { top: 4px; right: 5px; animation: sparkleTwinkle 1.5s ease-in-out infinite; }
.inv-slot.sparkle::after  { bottom: 7px; left: 6px; font-size: 7px; animation: sparkleTwinkle 1.5s ease-in-out .75s infinite; }
@keyframes sparkleTwinkle {
  0%, 100% { opacity: 0; transform: scale(.5) rotate(0deg); }
  50%      { opacity: 1; transform: scale(1) rotate(45deg); }
}

@keyframes itemPop {
  0%   { transform: scale(.3); }
  60%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* ---------- Overlays (titel + winst) ---------- */

/* Bladeren in het toverboek: vorige/volgende pijlen naast de ingezoomde pagina */
.book-nav {
  position: fixed; top: 50%; transform: translateY(-50%); z-index: 70;
  width: 54px; height: 72px; border: 2px solid var(--gold, #c9a24b);
  background: rgba(20,14,10,.72); color: var(--gold, #c9a24b);
  font-size: 40px; line-height: 1; border-radius: 10px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(0,0,0,.5);
}
.book-nav:active { transform: translateY(-50%) scale(.94); }
.book-nav[hidden] { display: none; }
.book-nav.dim { opacity: .4; }
.book-prev { left: max(10px, env(safe-area-inset-left)); }
.book-next { right: max(10px, env(safe-area-inset-right)); }
.book-page {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 70; color: var(--sand, #d8cdb4); background: rgba(20,14,10,.72);
  border: 1px solid var(--gold, #c9a24b); border-radius: 12px; padding: 5px 14px; font-size: 13px;
}
.book-page[hidden] { display: none; }

/* Laadscherm: ligt bovenop alles tot de achtergronden geladen zijn (mobiel) */
.overlay.loading {
  z-index: 80;
  background: radial-gradient(900px 600px at 50% 30%, #241a12 0%, #120d09 70%, #0b0805 100%);
  flex-direction: column;
}
.loading-box { text-align: center; padding: 0 24px; max-width: 460px; width: 86vw; }
.loading-title {
  font-family: var(--font-pixel, 'Press Start 2P'), serif;
  color: var(--gold, #c9a24b); font-size: clamp(16px, 4.4vw, 26px);
  letter-spacing: .5px; margin-bottom: 20px; text-shadow: 0 2px 0 #1f1410;
}
.loading-bar {
  height: 16px; border: 2px solid var(--gold, #c9a24b); background: rgba(0,0,0,.45);
  box-shadow: inset 0 0 0 2px #1f1410; overflow: hidden;
}
#loading-fill {
  height: 100%; width: 0%; transition: width .25s ease;
  background: linear-gradient(180deg, #f0d68a, #c9a24b);
}
.loading-pct { margin-top: 10px; color: var(--sand, #d8cdb4); font-size: 13px; opacity: .85; }

.overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(10px, var(--safe-top)) max(12px, var(--safe-right, 0px)) max(10px, var(--safe-bottom)) max(12px, var(--safe-left, 0px));
  background:
    radial-gradient(ellipse at 50% 30%, rgba(201,162,75,.10), transparent 60%),
    rgba(15, 11, 8, .88);
  z-index: 20;
  animation: overlayIn .4s ease-out;
  overflow: auto;
}

@keyframes overlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.overlay-card {
  max-width: 420px;
  width: 100%;
  padding: 28px 24px;
  text-align: center;
  max-height: calc(100dvh - 20px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.overlay-card h1 {
  font-family: var(--font-pixel);
  font-weight: 600;
  font-size: clamp(24px, 6vw, 36px);
  line-height: 1.15;
  color: var(--gold-light);
  text-shadow:
    2px 0 0 #1f1410, -2px 0 0 #1f1410, 0 2px 0 #1f1410, 0 -2px 0 #1f1410,
    0 0 22px rgba(201,162,75,.45);
  margin: 10px 0 6px;
}

.overlay-card.death h1 { color: #e88a7a; text-shadow:
  2px 0 0 #1f1410, -2px 0 0 #1f1410, 0 2px 0 #1f1410, 0 -2px 0 #1f1410,
  0 0 22px rgba(168,67,42,.5); }

.overlay-card .subtitle {
  font-family: var(--font-pixel);
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sand);
  margin-bottom: 16px;
}

/* ---------- Titelscherm met key-art ---------- */
.overlay.title {
  padding: 0;
  background: var(--bg-deep);
  flex-direction: column;
  justify-content: flex-end;
}

.title-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  image-rendering: auto;
}

.title-content {
  position: relative;
  z-index: 2;
  width: 100%;
  text-align: center;
  padding: 30px 24px calc(var(--safe-bottom) + 26px);
  background: linear-gradient(180deg, rgba(20,13,9,0) 0%, rgba(20,13,9,.72) 45%, rgba(20,13,9,.92) 100%);
}

#title-h1 {
  font-family: var(--font-pixel);
  font-weight: 600;
  font-size: clamp(30px, 7.5vh, 48px);
  line-height: 1.08;
  color: var(--gold-light);
  text-shadow:
    3px 0 0 #1f1410, -3px 0 0 #1f1410, 0 3px 0 #1f1410, 0 -3px 0 #1f1410,
    2px 2px 0 #1f1410, -2px -2px 0 #1f1410, 2px -2px 0 #1f1410, -2px 2px 0 #1f1410,
    0 4px 18px rgba(0,0,0,.8), 0 0 30px rgba(201,162,75,.4);
  margin-bottom: 4px;
}

#title-sub {
  font-family: var(--font-pixel);
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sand);
  text-shadow: 1px 1px 0 #1f1410;
  margin-bottom: 10px;
}

#title-intro {
  font-family: var(--font-pixel);
  font-size: 14px;
  line-height: 1.5;
  color: var(--parchment);
  max-width: 540px;
  margin: 0 auto 16px;
  text-shadow: 1px 1px 0 #1f1410, 0 2px 4px rgba(0,0,0,.7);
}

.title-credit {
  font-family: var(--font-pixel);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--sand);
  margin-top: 12px;
  opacity: .9;
  text-shadow: 1px 1px 0 #1f1410;
}

.overlay-card .intro {
  font-size: 17px;
  line-height: 1.55;
  color: var(--parchment);
  margin-bottom: 22px;
}

.ornament {
  color: var(--gold);
  font-size: 22px;
  opacity: .85;
}
.ornament.flip { transform: scaleX(-1); margin-top: 14px; }

.gold-btn {
  font-family: var(--font-pixel);
  font-weight: 600;
  font-size: 18px;
  color: #2a1c10;
  background: var(--gold);
  border: none;
  border-radius: 0;
  padding: 12px 28px;
  cursor: pointer;
  box-shadow:
    0 0 0 2px #1f1410,
    0 0 0 4px var(--gold),
    0 0 0 6px #1f1410,
    inset 0 3px 0 var(--gold-light),
    inset 0 -3px 0 #8a6a26;
  transition: transform .1s, box-shadow .15s;
}
.gold-btn:active {
  transform: scale(.96);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 2px 8px rgba(0,0,0,.5);
}

/* Eind-afbeelding op het win-scherm + 'speel ander spel' knop */
.win-banner {
  display: block; width: 100%; max-width: 720px; aspect-ratio: 16 / 9;
  object-fit: cover; image-rendering: auto;
  border: 2px solid var(--gold); border-radius: 3px;
  box-shadow: 0 0 0 2px #1f1410, 0 6px 16px rgba(0,0,0,.5);
  margin: 0 auto 14px;
}
/* Eind-scherm: het kasteelpoort-eindshot groot tonen */
#win-screen .overlay-card { max-width: 760px; }
.win-next { display: inline-block; margin-top: 10px; text-decoration: none; font-size: 15px; }

/* Uitvergrote kaart/afbeelding (bv. het receptenblaadje) */
.zoom-img { max-width: 92vw; max-height: 84vh; width: auto; height: auto;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.7)); }
#zoom-screen { cursor: zoom-out; }
#zoom-screen .puz-x { position: absolute; top: 14px; right: 14px; z-index: 2; }

/* Pixel-iconen in de knoppen */
.round-btn img {
  width: 28px;
  height: auto;
  image-rendering: pixelated;
  display: block;
  margin: 0 auto;
  pointer-events: none;
}

/* ---------- Schuifpuzzel-popup ---------- */
.puzzle-card {
  position: relative;
  max-width: 384px;
  padding: 20px 24px 24px;
}

.puzzle-card h2 {
  font-family: var(--font-pixel);
  font-weight: 600;
  font-size: 17px;
  color: var(--gold-light);
  text-shadow: 1px 1px 0 #1f1410;
  margin-bottom: 10px;
  padding-right: 46px; /* ruimte voor kruisje */
}

/* Kruisje altijd zichtbaar: binnen de kaart */
.round-btn.puz-x {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  font-size: 18px;
  font-family: var(--font-pixel);
  z-index: 2;
}

.puz-hint-btn {
  display: block;
  width: 100%;
  font-size: 14px;
  padding: 9px 10px;
  margin-bottom: 10px;
}

/* Tegel die uitgelicht wordt als schuiftip */
.puz-tile.suggest {
  z-index: 3;
  box-shadow: inset 0 0 0 3px rgba(231,207,134,.95), 0 0 14px 4px rgba(231,207,134,.55);
  animation: suggestPulse .55s ease-in-out infinite;
}
@keyframes suggestPulse {
  0%,100% { filter: brightness(1.3); }
  50%      { filter: brightness(1.8); }
}

/* Doelvak waar de oplichtende tegel heen moet (schuiftip-niveau 2) */
.puz-target {
  position: absolute;
  z-index: 2;
  box-sizing: border-box;
  border: 2px dashed rgba(231,207,134,.95);
  box-shadow: 0 0 10px 2px rgba(231,207,134,.4);
  pointer-events: none;
  animation: suggestPulse .7s ease-in-out infinite;
}

/* Strategie-uitleg onder het rooster */
.puz-tip {
  font-family: var(--font-pixel);
  font-size: 11px;
  line-height: 1.5;
  color: var(--parchment);
  max-width: 240px;
  margin: 10px auto 0;
  text-align: left;
}

/* ---------- Doolhof-puzzel ---------- */
.maze-hint {
  font-family: var(--font-pixel);
  font-size: 11px;
  line-height: 1.4;
  color: var(--sand);
  text-align: center;
  max-width: 320px;
  margin: 4px auto 8px;
}
/* Liggend mobiel: doolhof links, D-pad rechts, schaalt mee met schermhoogte. */
.maze-body {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
#maze-canvas {
  display: block;
  width: min(264px, 60vh);
  height: min(264px, 60vh);
  image-rendering: pixelated;
  background: #14100b;
  box-shadow: 0 0 0 2px var(--gold), 0 0 0 4px #1f1410, inset 0 0 18px rgba(0,0,0,.8);
  touch-action: none;
}
/* Radwerk-kaart breder dan een gewone puzzel-kaart, zodat het hele canvas past. */
#gear-card { max-width: 492px; }
#gear-canvas {
  display: block;
  width: min(440px, 88vw, 74vh);   /* past in de kaart én op een laag mobiel scherm */
  height: auto;
  margin: 4px auto 2px;
  background: #221830;
  box-shadow: 0 0 0 2px var(--gold), 0 0 0 4px #1f1410, inset 0 0 18px rgba(0,0,0,.8);
  touch-action: none;
}
.gear-lever-btn {
  display: block;
  margin: 8px auto 2px;
  font-size: 13px;
  padding: 7px 18px;
}
@media (max-height: 540px) {
  #gear-canvas { width: min(440px, 88vw, 88vh); }
  .gear-lever-btn { margin: 6px auto 2px; padding: 6px 16px; }
}
#maze-dpad {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.maze-mid { display: flex; gap: 50px; }
.maze-btn {
  width: 50px;
  height: 42px;
  font-size: 18px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#puzzle-grid {
  position: relative;
  width: 240px;
  height: 240px;
  margin: 0 auto;
  background: #14100b;
  box-shadow: 0 0 0 2px var(--gold), 0 0 0 4px #1f1410, inset 0 0 18px rgba(0,0,0,.8);
  touch-action: none;           /* voorkomt scroll-interferentie op Safari */
  -webkit-user-select: none;
}

.puz-tile {
  position: absolute;
  image-rendering: pixelated;
  box-shadow: inset 0 0 0 1px rgba(31,20,16,.85);
  cursor: pointer;
  transition: left .12s ease-out, top .12s ease-out;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.puz-tile:active { filter: brightness(1.3); }

/* ---------- Legpuzzel: sleep de stukken naar het kader ---------- */
#puzzle-grid.jig-stage {
  width: 100%;
  height: auto;
  background: none;
  box-shadow: none;
  position: relative;
  overflow: visible;
}
.jig-inner { position: absolute; left: 0; top: 0; }
/* Op desktop mag de legpuzzel-kaart breder zijn zodat de puzzel groter is */
@media (min-width: 720px) { .puzzle-card.jig-wide { max-width: 680px; } }
.jig-frame {
  position: absolute;
  left: 0; top: 0;
  background: #14100b;
  border-radius: 3px;
  box-shadow: 0 0 0 2px var(--gold), 0 0 0 4px #1f1410, inset 0 0 18px rgba(0,0,0,.85);
  transition: box-shadow .5s ease;
}
.jig-ghost {                        /* voorbeeld-beeld: standaard verborgen, alleen bij Hint */
  position: absolute; inset: 0;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  border-radius: 3px;
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.jig-frame.jig-hint .jig-ghost { opacity: .6; }
.jig-frame.jig-done {
  box-shadow: 0 0 0 2px var(--gold-light,#e7cf86), 0 0 16px rgba(231,207,134,.85), 0 0 0 4px #1f1410;
}
.jig-shard {
  position: absolute; left: 0; top: 0;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  cursor: grab;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none; -webkit-user-select: none;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.55));   /* schaduw volgt de scherf-vorm */
  transition: left .25s cubic-bezier(.2,1.3,.4,1), top .25s cubic-bezier(.2,1.3,.4,1), transform .2s ease;
}
.jig-shard.jig-drag {
  cursor: grabbing;
  transition: transform .1s ease;
  filter: drop-shadow(0 7px 11px rgba(0,0,0,.6)) brightness(1.07);
  z-index: 60;
}
.jig-shard.jig-locked {
  cursor: default;
  filter: none;
  transition: none;
}

/* Raadsel-popup */
.riddle-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 12px;
}
.riddle-head h2 { margin-bottom: 0; }
#riddle-face {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  image-rendering: pixelated;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--gold), 0 0 0 4px #1f1410;
}

.riddle-q {
  font-family: var(--font-pixel);
  font-size: 15px;
  line-height: 1.45;
  color: var(--parchment);
  margin-bottom: 16px;
  min-height: 66px;
}

#riddle-answers {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gold-btn.riddle-ans {
  font-size: 15px;
  padding: 9px 18px;
}

/* Runenstenen-popup (mobiel volgorde-puzzel) */
.rune-btn-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 4px 0 10px;
}
.rune-stone-btn {
  flex: 1;
  background: linear-gradient(180deg, #241a12, #140f0a);
  border: 2px solid var(--gold);
  color: var(--gold-light);
  font-family: var(--font-pixel);
  font-size: 14px;
  line-height: 1.45;
  padding: 12px 4px;
  cursor: pointer;
  text-align: center;
  box-shadow: 0 0 0 2px #1f1410, inset 0 2px 0 rgba(231,207,134,.15);
  transition: background .12s, transform .1s;
}
.rune-stone-btn.lit {
  background: rgba(231,207,134,.18);
  border-color: var(--gold-light);
  box-shadow: 0 0 0 2px #1f1410, 0 0 10px 2px rgba(231,207,134,.35);
  pointer-events: none;
}
.rune-stone-btn:active { transform: scale(.92); }
.rune-btn-row.tile-grid {
  display: grid;
  grid-template-columns: repeat(2, auto);   /* altijd 2 rijen × 2 kolommen */
  justify-content: center;
  gap: 12px;
}
.tile-btn {
  position: relative;
  flex: 0 0 auto; width: clamp(104px, 29vw, 142px); aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #241a12, #140f0a);
  border: 2px solid var(--gold); border-radius: 4px; cursor: pointer; padding: 6px;
  box-shadow: 0 0 0 2px #1f1410, inset 0 2px 0 rgba(231,207,134,.15), 0 0 14px 2px rgba(255,196,96,.28);
  transition: transform .1s, box-shadow .12s;
  animation: tileGlow 2.6s ease-in-out infinite;
}
@keyframes tileGlow {
  0%, 100% { box-shadow: 0 0 0 2px #1f1410, inset 0 2px 0 rgba(231,207,134,.15), 0 0 10px 1px rgba(255,196,96,.20); }
  50%      { box-shadow: 0 0 0 2px #1f1410, inset 0 2px 0 rgba(231,207,134,.15), 0 0 18px 4px rgba(255,200,104,.40); }
}
.tile-btn img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.tile-btn:active { transform: scale(.92); }
.tile-btn.lit { border-color: var(--gold-light); box-shadow: 0 0 0 2px #1f1410, 0 0 12px 3px rgba(231,207,134,.5); pointer-events: none; }
/* juiste keuze: korte heldere sparkel-flits + fonkelende sterretjes */
.tile-btn.spark { animation: tileSparkFlash .7s ease-out; }
@keyframes tileSparkFlash {
  0%   { box-shadow: 0 0 0 2px #1f1410, 0 0 30px 12px rgba(255,236,170,.95); border-color: #fff3c8; }
  100% { box-shadow: 0 0 0 2px #1f1410, 0 0 12px 3px rgba(231,207,134,.5); }
}
.tile-sparkle {
  position: absolute; width: 7px; height: 7px; pointer-events: none; z-index: 3;
  background: radial-gradient(circle, #fff 0%, #ffe08a 45%, rgba(255,200,90,0) 72%);
  transform: scale(0); opacity: 0;
  animation: tileSparkPop .55s ease-out forwards;
}
@keyframes tileSparkPop {
  0%   { transform: scale(0) rotate(0deg);   opacity: 0; }
  35%  { transform: scale(1.5) rotate(45deg); opacity: 1; }
  100% { transform: scale(.3) rotate(90deg);  opacity: 0; }
}
.rune-status {
  font-family: var(--font-pixel);
  font-size: 12px;
  color: var(--sand);
  min-height: 18px;
  text-align: center;
}
.rune-imgwrap {
  position: relative;
  width: 100%;
  max-width: 360px;
  margin: 4px auto 10px;
  border: 2px solid #1f1410;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0,0,0,.45);
  overflow: hidden;
  line-height: 0;
}
.rune-img {
  display: block;
  width: 100%;
}
.rune-hotspots { position: absolute; inset: 0; }
.book-hot {
  position: absolute;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
  transition: box-shadow .12s ease, background .12s ease, transform .08s ease;
  -webkit-tap-highlight-color: transparent;
}
.book-hot:hover,
.book-hot:focus-visible {
  background: rgba(255,238,176,.14);
  box-shadow: inset 0 0 0 2px rgba(255,240,180,.75), 0 0 14px 2px rgba(255,205,110,.45);
  outline: none;
}
.book-hot:active { transform: scale(.95); }
.book-hot.pulled {
  pointer-events: none;
  background: rgba(14,9,6,.5);
  box-shadow: inset 0 0 0 2px rgba(231,207,134,.9);
}
.book-hot.pulled::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffe08a;
  font-family: var(--font-pixel);
  font-size: 20px;
  text-shadow: 0 1px 3px #000;
}

/* Cinematic-cutscene (de eerste-spreuk-video) */
.overlay.cutscene {
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 60;
}
.cutscene-vid {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}
.cutscene-skip {
  position: absolute;
  right: calc(env(safe-area-inset-right, 0px) + 16px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
  font-family: var(--font-pixel);
  font-size: 13px;
  letter-spacing: .05em;
  color: var(--parchment);
  background: rgba(20, 14, 10, .7);
  border: 2px solid var(--gold);
  border-radius: 8px;
  padding: 8px 14px;
  cursor: pointer;
  box-shadow: 0 0 0 2px #1f1410;
}
.cutscene-skip:hover { color: var(--gold-light); }

[hidden] { display: none !important; }

/* Draai-hint: het spel speelt liggend */
#rotate-hint { display: none; z-index: 40; }
@media (orientation: portrait) {
  #rotate-hint { display: flex; }
}

/* ---------- Mobiel: inventory verticaal rechts, tekst compact onderaan ----------
   Zo blijft het midden van de scene vrij i.p.v. door UI bedekt te worden. */
@media (pointer: coarse) {
  #bottomui { display: contents; }

  /* alle knoppen links ONDER ELKAAR (geluid, taal, tip); inventory staat rechts */
  .round-btn.sound { left: 12px; right: auto; top: calc(var(--safe-top) + 8px); }
  .round-btn.lang  { left: 12px; right: auto; top: calc(var(--safe-top) + 56px); }
  .round-btn.info  { left: 12px; right: auto; top: calc(var(--safe-top) + 104px); }
  /* tip-popover onder de icoon-kolom, links */
  #quest { left: 12px; right: auto; top: calc(var(--safe-top) + 156px); max-width: min(66vw, 280px); }

  #invbar {
    position: fixed;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    flex-direction: column;
    width: auto;
    margin: 0;
    gap: 5px;
    padding: 6px;
    background: rgba(26, 20, 16, .55);
  }
  #invbar::before, #invbar::after { display: none; }
  .inv-slot { width: 40px; height: 40px; font-size: 20px; }

  /* tekstwolkje BOVENIN op mobiel (weg van de inventory + scène onderaan); iets compacter,
     grotere/scherpere tekst. Verschijnt maar kort; dekt zo nodig even de bovenknoppen af. */
  #msg {
    position: fixed;
    left: 64px;                 /* rechts van de icoon-kolom — niet over de volle breedte */
    right: 8px;
    top: calc(var(--safe-top) + 6px);
    bottom: auto;
    transform: none;
    max-width: 460px;
    width: auto;
    margin: 0;
    padding: 9px 30px 7px 12px;
  }
  #homeBtn { left: 10px; right: auto; }
  #msgText { font-size: 15px; line-height: 1.3; }
  #msgFace { width: 32px; height: 32px; }
  #msgMore { font-size: 10px; }
  .choice-btn { font-size: 12px; padding: 8px 13px; }

  #toast { bottom: auto; top: 54px; }
}

/* Korte schermen (landscape-telefoon): houd popups compact zodat er niets afvalt */
@media (max-height: 540px) {
  .overlay-card { padding: 14px 18px; }
  .overlay-card h1 { font-size: clamp(18px, 5vw, 26px); margin: 4px 0 4px; }
  .overlay-card .subtitle { margin-bottom: 6px; }
  .overlay-card .intro { font-size: 13px; line-height: 1.4; margin-bottom: 10px; }
  .puzzle-card { padding: 12px 16px 14px; }
  .puzzle-card h2, #riddle-title, #rune-title, #maze-title { font-size: 14px; margin-bottom: 6px; }
  .riddle-q { font-size: 13px; min-height: 0; margin-bottom: 10px; }
  #riddle-answers { gap: 7px; }
  .gold-btn.riddle-ans { font-size: 13px; padding: 7px 14px; }
  #riddle-face { width: 36px; height: 36px; }
  .ornament { font-size: 30px; }
  .win-banner { max-height: 32vh; width: auto; max-width: min(100%, 56vh); margin: 0 auto 8px; }
}

/* ---- Schaak-uitdaging (mat-in-drie) ---- */
.chess-card { max-width: 396px; }
.chess-card #chess-title { margin-bottom: 2px; }
.chess-card #chess-hint { min-height: 2.5em; }
.chess-board {
  display: grid; grid-template-columns: repeat(8, 1fr);
  width: min(84vw, 336px); aspect-ratio: 1; margin: 12px auto 4px;
  border: 4px solid #5a431f; border-radius: 7px; overflow: hidden;
  box-shadow: 0 12px 30px rgba(0,0,0,.6), inset 0 0 0 2px #2a1d0c, 0 0 0 1px #c9a24b;
}
.chess-board.shake { animation: chessShake .42s; }
@keyframes chessShake {
  0%,100% { transform: translateX(0); } 20% { transform: translateX(-6px); }
  40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); }
}
.chess-sq {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  line-height: 1; cursor: pointer; aspect-ratio: 1;
  user-select: none; -webkit-user-select: none;
}
.chess-sq.lt { background: linear-gradient(145deg, #efe0bb, #e5d09f); }
.chess-sq.dk { background: linear-gradient(145deg, #bb864f, #a06d3c); }
.chess-sq.last { box-shadow: inset 0 0 0 3px rgba(232,200,90,.9); }
.chess-sq.sel  { box-shadow: inset 0 0 0 3px #5bbd63, inset 0 0 12px rgba(91,189,99,.5); }
.chess-sq.dot::after {
  content: ''; position: absolute; width: 26%; height: 26%; border-radius: 50%;
  background: rgba(40,80,40,.4); pointer-events: none;
}
.chess-sq.check { animation: chessCheck 1s infinite; }
@keyframes chessCheck {
  0%,100% { box-shadow: inset 0 0 0 3px rgba(224,70,55,.95), inset 0 0 14px rgba(255,90,70,.7); }
  50%     { box-shadow: inset 0 0 0 3px rgba(255,120,90,1), inset 0 0 22px rgba(255,120,90,.95); }
}
.chess-sq.mate { animation: chessMate .5s 3; }
@keyframes chessMate { 0%,100% { background: #d8463a; } 50% { background: #ffd24a; } }
.chess-pc {
  font-size: clamp(18px, 6.8vw, 32px); line-height: 1;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.5));
}
.chess-pc.wp { color: #fffef6; text-shadow: 0 0 2px #000, 0 1px 1px #000, 1px 0 1px #000, -1px 0 1px #000; }
.chess-pc.bp { color: #15100a; text-shadow: 0 0 2px rgba(255,255,255,.5), 0 1px 0 rgba(255,255,255,.3); }

/* ---- Tekstwolkje sluit-kruisje ---- */
#msg { padding-right: 26px; }   /* #msg is al position:fixed (bovenin) → blijft een anker voor het ✕ */
.speech { padding-right: 22px; }
.bubble-x {
  position: absolute; top: 3px; right: 5px;
  width: 18px; height: 18px; line-height: 15px; padding: 0;
  font-size: 12px; font-weight: 700; text-align: center;
  background: rgba(0,0,0,.12); color: #5a4326;
  border: 1px solid #9a7a4a; border-radius: 50%;
  cursor: pointer; z-index: 3;
}
.bubble-x:hover { background: rgba(0,0,0,.24); color: #2a1c0c; }

/* ---- Spreuk in de tas: dunne blauwe rand + cast-flits ---- */
.inv-slot.border-blue {
  border-width: 1px;                 /* dunnere lijn rond de spreuken */
  border-color: #5aa0ff;
  box-shadow: 0 0 4px rgba(90,160,255,.4);
}
.inv-slot.border-blue.filled { color: #cfe4ff; }
/* Spreuk licht op zodra hij hier werkt (juiste locatie/object) */
.inv-slot.spell-active {
  border-color: #aee0ff;
  animation: spellPulse 1.05s ease-in-out infinite;
}
@keyframes spellPulse {
  0%, 100% { box-shadow: 0 0 6px 1px rgba(120,200,255,.55); }
  50%      { box-shadow: 0 0 14px 3px rgba(150,215,255,.95); }
}
.inv-slot.border-red {
  border-color: #ff6a5a;
  box-shadow: inset 0 0 0 1px #ff6a5a, 0 0 5px rgba(255,106,90,.5);
}
.inv-slot.border-red.filled { color: #ffd2cb; }
.inv-slot.cast { animation: invCast .6s ease-out; }
@keyframes invCast {
  0%   { box-shadow: inset 0 0 0 1px #5aa0ff, 0 0 4px rgba(90,160,255,.5); }
  40%  { box-shadow: inset 0 0 0 2px #c2e2ff, 0 0 16px rgba(150,200,255,.95); }
  100% { box-shadow: inset 0 0 0 1px #5aa0ff, 0 0 5px rgba(90,160,255,.5); }
}

/* ---- Opening / proloog ---- */
.overlay.prologue {
  background: #07060a;
  z-index: 60;
  cursor: pointer;
  overflow: hidden;
}
.prologue-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1s ease, transform 7s linear;
}
.prologue-img.show { opacity: 1; transform: scale(1.0); }
.prologue-shade {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(7,6,10,.35) 0%, rgba(7,6,10,0) 28%, rgba(7,6,10,0) 45%, rgba(7,6,10,.82) 100%);
  pointer-events: none;
}
.prologue-text {
  position: absolute; left: 50%; bottom: 16%;
  transform: translateX(-50%);
  width: min(86vw, 720px);
  margin: 0;
  font-family: "Crimson Pro", Georgia, serif;
  font-size: clamp(15px, 2.5vw, 22px);
  line-height: 1.55;
  color: #f2ead9;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0,0,0,.9);
  opacity: 0;
  transition: opacity .6s ease;
}
.prologue-text.show { opacity: 1; }
.prologue-tap {
  position: absolute; left: 50%; bottom: 7%;
  transform: translateX(-50%);
  font-family: var(--font-pixel);
  font-size: 11px;
  color: var(--gold);
  opacity: .85;
  animation: tapPulse 1.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes tapPulse { 0%,100% { opacity: .4; } 50% { opacity: .95; } }
.prologue-skip {
  position: absolute; right: 14px; top: calc(var(--safe-top) + 12px);
  font-family: var(--font-pixel); font-size: 12px;
  color: var(--gold-light);
  background: rgba(20,16,24,.6);
  border: 2px solid var(--gold);
  padding: 6px 12px;
  cursor: pointer;
  z-index: 3;
}
.prologue-skip:hover { background: rgba(40,30,20,.8); }