/* Holy Moly — vormgeving: warme speeltafel die de kaarten laat spreken */
:root {
  --schaal: 1;
  --perkament: #e9dcc0;
  --perkament-donker: #dccaa5;
  --inkt: #4a3826;
  --lint: #a58a67;
  --goud: #b98f3e;
  --schaduw: rgba(74, 56, 38, .35);
  --paars: #6b4b9e; --oranje: #b0742a; --groen: #2e6b3e;
  --grijs: #5a5f6b; --blauw: #2a6577; --rood: #8e2f2a;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Alegreya', Georgia, serif;
  color: var(--inkt);
  background:
    radial-gradient(ellipse at 50% -10%, #f3e9d2 0%, var(--perkament) 45%, var(--perkament-donker) 100%);
  min-height: 100vh;
}
.verborgen { display: none !important; }
.logo {
  font-family: 'Baloo 2', cursive; font-weight: 800; letter-spacing: .06em;
  color: #fdf6e6; -webkit-text-stroke: 2.5px #5d4527;
  text-shadow: 0 4px 0 #5d452766, 0 8px 18px var(--schaduw);
}
.logo.klein { font-size: 1.35rem; -webkit-text-stroke: 1.4px #5d4527; text-shadow: 0 2px 0 #5d452766; }

/* ---------- startscherm ---------- */
#start-scherm { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; }
.start-kader { max-width: 640px; text-align: center; }
.start-kader .logo { font-size: clamp(3rem, 9vw, 5.2rem); margin: 0 0 .3em; }
.tagline { font-style: italic; font-size: 1.2rem; margin: 0 0 .6em; }
.intro { font-size: 1.02rem; line-height: 1.5; margin: 0 auto 1.6em; max-width: 52ch; }
#stad-keuze { margin-bottom: 1.6em; }
#stad-keuze .stad-onthulling { display: flex; gap: 22px; justify-content: center; align-items: flex-start; flex-wrap: wrap; }
#stad-keuze figure { margin: 0; width: 168px; }
#stad-keuze img { width: 100%; border-radius: 10px; box-shadow: 0 6px 16px var(--schaduw); cursor: zoom-in; }
#stad-keuze figcaption { font-size: .85rem; line-height: 1.3; margin-top: 6px; }
#stad-keuze .van-wie { font-family: 'Baloo 2', cursive; font-weight: 600; display: block; margin-bottom: 2px; }

/* ---------- knoppen ---------- */
.knop {
  font-family: 'Baloo 2', cursive; font-weight: 600; font-size: 1rem;
  color: #fdf6e6; background: linear-gradient(#8a6a41, #6d5233);
  border: 2px solid #5d4527; border-radius: 12px; padding: 9px 20px;
  cursor: pointer; box-shadow: 0 3px 0 #5d4527, 0 6px 12px var(--schaduw);
  transition: transform .08s ease;
}
.knop:hover { transform: translateY(-1px); }
.knop:active { transform: translateY(1px); box-shadow: 0 1px 0 #5d4527; }
.knop:focus-visible { outline: 3px solid var(--goud); outline-offset: 2px; }
.knop.groot { font-size: 1.25rem; padding: 13px 30px; }
.knop.stil { background: none; border: none; box-shadow: none; color: var(--inkt); text-decoration: underline; }
.knop.klein { font-size: .9rem; padding: 5px 12px; }
.knop[disabled] { opacity: .45; cursor: not-allowed; }

/* ---------- spelscherm ---------- */
#spel-scherm { display: grid; grid-template-rows: auto auto 1fr auto auto auto; min-height: 100vh; min-height: 100dvh; padding: 8px 18px 16px; gap: calc(18px * var(--schaal)); width: 100%; }
#topbar { display: flex; align-items: center; gap: 16px; }
#dag-indicator { font-family: 'Baloo 2', cursive; font-weight: 600; font-size: 1.05rem; }
#dag-indicator .zon { opacity: .25; } #dag-indicator .zon.actief { opacity: 1; }
#stapel-info { font-size: .9rem; margin-left: auto; opacity: .85; }

.speler-zone {
  display: flex; align-items: center; gap: 14px;
  background: #00000010; border: 1.5px solid #a58a6788; border-radius: 14px; padding: 8px 12px;
}
.speler-zone.actief { border-color: var(--goud); box-shadow: 0 0 0 2px #b98f3e55, inset 0 0 30px #b98f3e18; }
.zone-links { display: flex; gap: 10px; align-items: center; min-width: 220px; }
.zone-naam { font-family: 'Baloo 2', cursive; font-weight: 600; font-size: 1.05rem; }
.stad-effect { font-size: .8rem; line-height: 1.25; max-width: 230px; opacity: .9; }
.stad-mini { width: calc(74px * var(--schaal)); border-radius: 6px; box-shadow: 0 2px 6px var(--schaduw); cursor: zoom-in; }
.badge { background: var(--lint); color: #fdf6e6; border-radius: 10px; padding: 1px 8px; font-size: .8rem; }
.gelegd-rij { display: flex; gap: 6px; flex: 1; flex-wrap: wrap; }
.gelegd-rij img { width: calc(58px * var(--schaal)); border-radius: 5px; box-shadow: 0 2px 5px var(--schaduw); cursor: zoom-in; }
.gelegd-rij img.kiesbaar { outline: 3px solid var(--goud); cursor: pointer; }
.stapel-blok { display: flex; align-items: center; gap: 10px; }
.punten-stapel { position: relative; width: calc(92px * var(--schaal)); height: calc(136px * var(--schaal)); cursor: pointer; }
.punten-stapel img { position: absolute; width: calc(88px * var(--schaal)); border-radius: 6px; box-shadow: 0 2px 6px var(--schaduw); }
.punten-stapel .leeg { position: absolute; inset: 0; border: 2px dashed #a58a67; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: .72rem; text-align: center; padding: 6px; opacity: .7; }
.stapel-label { font-size: .82rem; max-width: 90px; }

/* ---------- rij ---------- */
#midden { display: flex; align-items: center; gap: calc(28px * var(--schaal)); min-height: calc(260px * var(--schaal)); }
#poort { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; position: relative; z-index: 2; }
#poort svg { width: calc(128px * var(--schaal)); height: calc(238px * var(--schaal)); filter: drop-shadow(4px 4px 6px var(--schaduw)); }
#poort span { font-family: 'Baloo 2', cursive; font-weight: 800; font-size: .82rem; letter-spacing: .12em; color: #6d5233; }
#rij { display: flex; flex-wrap: wrap; gap: 12px 10px; padding: 10px 6px; flex: 1; position: relative; z-index: 1; align-items: center; }
#stapels { margin-left: 6px; }
#rij .rijkaart { position: relative; flex: 0 0 auto; width: calc(158px * var(--schaal)); transition: transform .15s ease; }
#rij .rijkaart img { width: 100%; border-radius: 8px; box-shadow: 0 3px 8px var(--schaduw); display: block; cursor: zoom-in; }
#rij .rijkaart.kiesbaar img { outline: 3px solid var(--goud); cursor: pointer; }
#rij .rijkaart.kiesbaar:hover { transform: translateY(-6px); }
#rij .rijkaart.geselecteerd img { outline: 4px solid var(--rood); }
#rij .positie { position: absolute; top: -7px; left: -7px; background: #6d5233; color: #fdf6e6; font-family: 'Baloo 2', cursive; font-weight: 600; font-size: .82rem; border-radius: 50%; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 4px var(--schaduw); border: 2px solid #fdf6e6aa; }
#stapels { display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.stapel-mini { width: calc(84px * var(--schaal)); height: calc(116px * var(--schaal)); border-radius: 7px; background: #6d523322; border: 2px solid #a58a67; display: flex; align-items: center; justify-content: center; text-align: center; font-size: .72rem; padding: 4px; position: relative; }
.stapel-mini img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 5px; }
.stapel-mini .teller { position: absolute; bottom: -8px; right: -8px; background: var(--goud); color: #fdf6e6; font-family: 'Baloo 2', cursive; border-radius: 50%; min-width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; font-size: .8rem; box-shadow: 0 2px 4px var(--schaduw); z-index: 1; }

/* ---------- instructiebalk & hand ---------- */
#instructie-balk {
  margin: 4px 0;
  background: #6d5233; color: #fdf6e6; border-radius: 10px; padding: 7px 16px;
  font-family: 'Baloo 2', cursive; font-weight: 600; text-align: center; font-size: 1rem;
  box-shadow: 0 3px 8px var(--schaduw);
  display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
  min-height: 46px;
}
#instructie-balk .knop { background: linear-gradient(#b98f3e, #96712c); border-color: #7a5c22; box-shadow: 0 2px 0 #7a5c22; padding: 6px 16px; }
#instructie-balk .knop.stil { background: none; border: none; box-shadow: none; color: #f0e2c4; }
#hand-zone { display: flex; flex-direction: column; gap: calc(16px * var(--schaal)); }
#hand { display: flex; gap: 12px 26px; justify-content: center; flex-wrap: wrap; }
#hand .handkaart { width: calc(60px + 118px * var(--schaal)); transition: transform .12s ease; position: relative; }
#hand .handkaart img { width: 100%; border-radius: 9px; box-shadow: 0 4px 10px var(--schaduw); display: block; }
#hand .handkaart.speelbaar { cursor: pointer; }
#hand .handkaart.speelbaar:hover { transform: translateY(-10px); }
#hand .handkaart.speelbaar img { outline: 3px solid var(--goud); }
#hand .handkaart.dim { opacity: .55; }
#hand .handkaart .reden { position: absolute; bottom: 4px; left: 4px; right: 4px; background: #00000099; color: #fff; font-size: .66rem; border-radius: 5px; padding: 2px 5px; text-align: center; }
#actie-knoppen { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ---------- log: inklapbaar zijpaneel ---------- */
#log-toggle { position: fixed; right: 14px; bottom: 14px; z-index: 45; }
#log-toggle .badge { background: var(--rood); margin-left: 4px; }
#log-zone {
  position: fixed; top: 0; right: 0; height: 100vh; width: min(340px, 85vw);
  background: var(--perkament); border-left: 3px solid #6d5233;
  box-shadow: -8px 0 24px #00000044; z-index: 46;
  display: flex; flex-direction: column;
  transition: transform .25s ease;
}
#log-zone.dicht { transform: translateX(105%); }
#log-zone .log-kop {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; font-family: 'Baloo 2', cursive; font-weight: 800; font-size: 1.1rem;
  border-bottom: 2px solid #a58a6788;
}
#log { flex: 1; overflow-y: auto; padding: 8px 14px; font-size: .92rem; }
#log p { margin: 3px 0; }
#log p.dag-scheiding { font-family: 'Baloo 2', cursive; font-weight: 600; margin-top: 10px; }
#log p:last-child { font-weight: 700; }

/* kaarten hebben altijd de juiste verhouding, ook vóór het laden */
#rij .rijkaart img, #hand .handkaart img, .gelegd-rij img,
.punten-stapel img, .stad-mini, #modal .kaart-grid img, .vlieg-kloon {
  aspect-ratio: 483 / 725; object-fit: cover;
}

/* ---------- poortdeuren ---------- */
#poort .deur { transition: transform .55s cubic-bezier(.5,0,.4,1); transform-box: fill-box; }
#poort .deur-l { transform-origin: left center; }
#poort .deur-r { transform-origin: right center; }
#poort .poort-licht { opacity: 0; transition: opacity .45s ease; }
#poort.open .deur-l { transform: scaleX(.12) skewY(-4deg); }
#poort.open .deur-r { transform: scaleX(.12) skewY(4deg); }
#poort.open .poort-licht { opacity: .9; }

/* ---------- animaties ---------- */
#spel-scherm [data-key] { transform-origin: top left; }
.vlieg-kloon {
  position: fixed; z-index: 38; pointer-events: none;
  border-radius: 8px; box-shadow: 0 6px 18px var(--schaduw);
}
.kaart-rug {
  background: linear-gradient(150deg, #8a6a41, #5d4527) !important;
  border-color: #4a3826 !important;
  display: flex; align-items: center; justify-content: center;
}
.kaart-rug .rug-logo {
  font-family: 'Baloo 2', cursive; font-weight: 800; font-size: 1.5rem;
  color: #fdf6e6; -webkit-text-stroke: 1px #4a3826; opacity: .9;
}

/* ---------- tooltip ---------- */
#tooltip {
  position: fixed; z-index: 60; pointer-events: none;
  max-width: 300px; background: #3a2c1c; color: #f6ecd6;
  border: 1.5px solid var(--goud); border-radius: 9px; padding: 8px 12px;
  font-size: .88rem; line-height: 1.35; box-shadow: 0 6px 18px #00000066;
}
#tooltip b { font-family: 'Baloo 2', cursive; display: block; margin-bottom: 2px; }
#tooltip .tt-sub { opacity: .8; font-size: .8rem; display: block; margin-bottom: 3px; }

/* ---------- modals & zoom ---------- */
#modal-laag, #zoom-laag {
  position: fixed; inset: 0; background: #2a2015cc; z-index: 40;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
#modal {
  background: var(--perkament); border: 3px solid #6d5233; border-radius: 16px;
  padding: 22px 26px; max-width: 860px; max-height: 88vh; overflow-y: auto;
  box-shadow: 0 12px 40px #00000088; text-align: center;
}
#modal h2 { font-family: 'Baloo 2', cursive; margin: 0 0 .5em; }
#modal .kaart-grid { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin: 14px 0; }
#modal .kaart-grid img { width: 168px; border-radius: 8px; box-shadow: 0 3px 8px var(--schaduw); cursor: pointer; transition: transform .1s; }
#modal .kaart-grid img:hover { transform: scale(1.05); outline: 3px solid var(--goud); }
#modal .knoppenrij { display: flex; gap: 12px; justify-content: center; margin-top: 10px; flex-wrap: wrap; }
#modal .score-tabel { text-align: left; margin: 0 auto; border-collapse: collapse; }
#modal .score-tabel td, #modal .score-tabel th { padding: 3px 12px; }
#modal .score-tabel .totaalrij td { border-top: 2px solid var(--inkt); font-weight: 700; font-size: 1.15rem; }
#modal .kleurstip { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 6px; vertical-align: baseline; }
#modal .regels { text-align: left; max-width: 60ch; }
#modal .regels h3 { font-family: 'Baloo 2', cursive; margin: 1em 0 .3em; }

#zoom-laag { cursor: zoom-out; flex-direction: column; gap: 10px; }
#zoom-img { max-height: 78vh; max-width: 80vw; border-radius: 14px; box-shadow: 0 16px 50px #000000aa; }
#zoom-info { color: #fdf6e6; font-size: 1rem; text-align: center; max-width: 60ch; }
.zoom-pijl {
  position: fixed; top: 50%; transform: translateY(-50%);
  font-size: 2.4rem; line-height: 1; padding: 14px 20px; border-radius: 50%;
  cursor: pointer; z-index: 61;
}
.zoom-pijl[disabled] { opacity: .25; cursor: default; }
#zoom-links { left: 22px; }
#zoom-rechts { right: 22px; }
#zoom-teller { color: #fdf6e6cc; font-size: .9rem; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}
@media (max-width: 720px) {
  .zone-links { min-width: 0; }
  .stad-effect { display: none; }
}

.versie { font-size: .75rem; opacity: .55; margin: 8px 0 0; }
.versie.onderin { position: fixed; left: 14px; bottom: 10px; margin: 0; text-align: left; }
#regels-knop-start { margin-bottom: 14px; }
#topbar .versie { margin: 0; }

/* ---------- tutorial ---------- */
#modal .tutorial-label {
  display: inline-block; background: var(--goud); color: #fdf6e6;
  font-family: 'Baloo 2', cursive; font-weight: 600; font-size: .8rem;
  border-radius: 8px; padding: 2px 10px; margin-bottom: 8px; letter-spacing: .05em;
}
#modal .tutorial-tekst { max-width: 46ch; margin: 0 auto; font-size: 1.05rem; line-height: 1.5; text-align: left; }
#start-scherm .knop { margin: 4px 6px; }

/* ---------- niveaukeuze ---------- */
#niveau-keuze { margin: 0 0 18px; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
#niveau-keuze .niveau-label { font-family: 'Baloo 2', cursive; font-weight: 600; margin-right: 4px; }
#niveau-keuze .knop.niveau { opacity: .55; }
#niveau-keuze .knop.niveau.actief { opacity: 1; outline: 3px solid var(--goud); }

/* ---------- stadsonthulling ---------- */
.onthulling { display: flex; gap: 36px; justify-content: center; margin: 16px 0 8px; flex-wrap: wrap; }
.onthul-slot { width: 190px; }
.flip-kaart { width: 100%; aspect-ratio: 483 / 725; perspective: 1100px; }
.flip-binnen {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d; transition: transform .9s cubic-bezier(.3,.7,.25,1);
}
.onthul-slot.gedraaid .flip-binnen { transform: rotateY(180deg); }
.flip-voor, .flip-achter {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 11px; box-shadow: 0 6px 18px var(--schaduw); overflow: hidden;
}
.flip-voor { display: flex; align-items: center; justify-content: center; }
.flip-voor .rug-logo { font-size: 2.6rem; }
.flip-achter { transform: rotateY(180deg); width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.onthul-tekst { opacity: 0; transition: opacity .5s ease .45s; font-size: .92rem; line-height: 1.35; margin-top: 10px; }
.onthul-slot.gedraaid .onthul-tekst { opacity: 1; }
.onthul-slot .van-wie { font-family: 'Baloo 2', cursive; font-weight: 600; display: block; margin-bottom: 2px; }
@keyframes stapel-schudden {
  12% { transform: rotate(-5deg) translateX(-8px); }
  30% { transform: rotate(5deg) translateX(8px); }
  48% { transform: rotate(-4deg) translateX(-5px); }
  66% { transform: rotate(3deg) translateX(4px); }
  84% { transform: rotate(-1.5deg); }
}
.onthul-slot.schudt .flip-kaart { animation: stapel-schudden 1s ease; }
@media (prefers-reduced-motion: reduce) {
  .flip-binnen { transition: none; }
  .onthul-slot.schudt .flip-kaart { animation: none; }
}