/* Nachtelijk dennengroen met papieren kaartjes; één kerstrood accent, goud voor sterren. Eén vaste look, ook in donkere modus. */
:root {
  --night: #10291f;
  --night-2: #0a1d16;
  --paper: #fbf7ef;
  --paper-2: #f1eadb;
  --ink: #1d2a24;
  --muted: #5f6f66;
  --on-night: #eef4ef;
  --on-night-muted: #a9c0b3;
  --red: #c4312b;
  --red-dark: #9e2420;
  --gold: #e2b043;
  --green: #2f7d52;
  --line: #e2d9c6;
  --display: "Young Serif", Georgia, "Times New Roman", serif;
  --body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh;
  background: radial-gradient(120% 80% at 50% 0%, #17392b 0%, var(--night) 45%, var(--night-2) 100%) fixed, var(--night);
  color: var(--on-night); font-family: var(--body); font-size: 16px; line-height: 1.5;
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
}
[hidden] { display: none !important; }

#snow { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }

/* Lichtjesslinger */
.lights { position: relative; z-index: 1; height: 42px; overflow: hidden; }
.lights svg { display: block; overflow: visible; }
.lights .bulb { filter: drop-shadow(0 0 5px currentColor); animation: twinkle 2.8s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

.wrap {
  position: relative; z-index: 1;
  max-width: 720px; margin: 0 auto;
  padding-block: 20px 64px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  display: flex; flex-direction: column; gap: 22px;
}

.top { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.eyebrow { margin: 0; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
h1 { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(34px, 8vw, 54px); line-height: 1.05; text-wrap: balance; }
.lede { margin: 0; color: var(--on-night-muted); max-width: 58ch; }

/* Kaartjes */
.card {
  background: var(--paper); color: var(--ink); border-radius: 12px;
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 6px 18px rgba(0,0,0,.25);
}
.list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.item {
  display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 12px 14px 12px 12px; position: relative;
}
.item.star::before {
  content: ""; position: absolute; left: -1px; top: 14px; bottom: 14px; width: 4px; border-radius: 0 3px 3px 0; background: var(--gold);
}
.thumb {
  width: 76px; height: 76px; border-radius: 8px; background: var(--paper-2); overflow: hidden;
  display: grid; place-items: center; font-family: var(--display); font-size: 28px; color: var(--red);
}
.thumb img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.info { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.name { font-weight: 700; font-size: 17px; line-height: 1.3; overflow-wrap: anywhere; }
.name a { color: inherit; text-decoration: none; }
.name a:hover { text-decoration: underline; text-decoration-color: var(--red); }
.sub { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 14px; color: var(--muted); align-items: center; }
.price { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.note { font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }
.badge-star { color: #a87800; font-weight: 600; font-size: 13px; }

.side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }

.item.taken { background: var(--paper-2); box-shadow: none; }
.item.taken .name { text-decoration: line-through; text-decoration-color: var(--red); text-decoration-thickness: 2px; color: var(--muted); }
.item.taken .thumb { filter: grayscale(1); opacity: .6; }
.status { font-size: 13px; font-weight: 600; color: var(--green); display: inline-flex; gap: 6px; align-items: center; text-align: right; }
.status.other { color: var(--muted); }

.claim-form { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding-top: 4px; border-top: 1px dashed var(--line); }
.claim-form input { flex: 1 1 180px; }

/* Knoppen en velden */
.btn {
  appearance: none; border: 0; cursor: pointer; font: inherit; font-weight: 700; font-size: 15px;
  background: var(--red); color: #fff; border-radius: 999px; padding: 9px 16px; white-space: nowrap;
  transition: background .15s;
}
.btn:hover { background: var(--red-dark); }
.btn.ghost { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; }
.btn.ghost:hover { background: rgba(127,127,127,.12); }
.btn.small { font-size: 14px; padding: 6px 12px; }
.btn:disabled { opacity: .55; cursor: default; }
.linkish { appearance: none; background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
.iconbtn {
  appearance: none; border: 0; background: none; cursor: pointer; color: var(--muted); font: inherit;
  width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center;
}
.iconbtn:hover { background: var(--paper-2); color: var(--ink); }
.iconbtn.on { color: #c18d00; }
.iconbtn svg { width: 18px; height: 18px; }
.btn:focus-visible, .iconbtn:focus-visible, .linkish:focus-visible, input:focus-visible, summary:focus-visible, a:focus-visible {
  outline: 3px solid var(--gold); outline-offset: 2px;
}

input:not([type="checkbox"]) {
  font: inherit; font-size: 16px; width: 100%; min-width: 0;
  padding: 9px 12px; border-radius: 8px; border: 1.5px solid var(--line); background: #fff; color: var(--ink);
}

/* Link-drop voor de eigenaar */
.drop {
  border: 2px dashed rgba(238,244,239,.35); border-radius: 14px; padding: 16px;
  display: flex; flex-direction: column; gap: 10px; transition: border-color .15s, background .15s;
}
.drop.over { border-color: var(--gold); background: rgba(226,176,67,.08); }
.drop-label { font-family: var(--display); font-size: 20px; }
.drop-row { display: flex; gap: 8px; }
.drop-row input { flex: 1; }
.hint { margin: 0; font-size: 14px; color: var(--on-night-muted); }

.draft { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; padding: 16px; }
.draft .thumb { width: 96px; height: 96px; }
.draft-pic { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.small-link { font-size: 13px; color: var(--red-dark); font-weight: 600; }
.field-tip { margin: -4px 0 0; font-size: 12px; color: var(--muted); }
.draft-warn { margin: 0; font-size: 14px; font-weight: 600; color: var(--red-dark); background: #fbe7e4; border-radius: 8px; padding: 8px 10px; }
.draft-fields { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: var(--muted); min-width: 0; }
.field-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.field-row .field:first-child { flex: 1 1 140px; }
.field.check { flex-direction: row; align-items: center; gap: 8px; font-size: 15px; color: var(--ink); padding-bottom: 10px; }
.field.check input { width: 18px; height: 18px; accent-color: var(--red); }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }

.edit-form { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; border-top: 1px dashed var(--line); padding-top: 10px; }
.confirm { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; border-top: 1px dashed var(--line); padding-top: 10px; font-size: 14px; }

.bar { display: flex; justify-content: space-between; align-items: center; gap: 8px 16px; flex-wrap: wrap; font-size: 14px; color: var(--on-night-muted); }
.toggle { display: inline-flex; gap: 8px; align-items: center; cursor: pointer; }
.toggle input { width: 17px; height: 17px; accent-color: var(--gold); }

.empty { margin: 0; text-align: center; color: var(--on-night-muted); padding: 30px 0; }

.extras { border-top: 1px solid rgba(238,244,239,.15); padding-top: 14px; }
.extras summary { cursor: pointer; color: var(--on-night-muted); font-size: 15px; }
.extras-body { display: flex; flex-direction: column; gap: 14px; padding-top: 14px; }
.extras .field { color: var(--on-night-muted); }
.share { display: flex; flex-direction: column; gap: 6px; }
.share-label { font-size: 13px; font-weight: 600; color: var(--on-night-muted); }
.bookmarklet { display: inline-block; margin-left: 6px; padding: 3px 10px; border-radius: 999px; background: var(--gold); color: var(--night-2); font-weight: 700; text-decoration: none; }

/* Spoilerwaarschuwing */
.gate {
  position: fixed; inset: 0; z-index: 20; display: grid; place-items: center;
  background: rgba(6, 18, 13, .82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
}
.gate-card {
  background: var(--paper); color: var(--ink); border-radius: 16px; padding: 26px; max-width: 420px;
  display: flex; flex-direction: column; gap: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.gate-card h2 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 28px; }
.gate-card p { margin: 0; }
.gate-card .hint { color: var(--red-dark); font-weight: 600; }

.toast {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 30;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  background: var(--paper); color: var(--ink); padding: 10px 16px; border-radius: 999px;
  font-weight: 600; font-size: 15px; box-shadow: 0 8px 24px rgba(0,0,0,.35); max-width: calc(100% - 32px); text-align: center;
}
.toast.err { background: var(--red); color: #fff; }

/* ================================================================
   KERST OVER DE TOP
   ================================================================ */

:root { --xmas: "Mountains of Christmas", "Young Serif", Georgia, serif; }

/* Sterrenhemel */
.stars {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 8% 12%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 22% 32%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 37% 8%, #ffe9a8 50%, transparent 51%),
    radial-gradient(1px 1px at 51% 26%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 66% 14%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 79% 36%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 91% 9%, #ffe9a8 50%, transparent 51%),
    radial-gradient(1px 1px at 14% 58%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 85% 62%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 45% 70%, #fff 50%, transparent 51%);
  animation: twinkle 4s ease-in-out infinite;
}

/* 3D-winterdorp achter alles; vervangt sterren, heuvels, 2D-sneeuw en de emoji-slee */
#world { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; pointer-events: none; }
#world:not(.on) { visibility: hidden; }
.has-3d #world { visibility: visible; }
.has-3d .stars, .has-3d .hills, .has-3d #snow, .has-3d .sleigh { display: none; }
.has-3d .wrap { padding-bottom: 72px; }
.has-3d .lede, .has-3d .hint, .has-3d .empty, .has-3d .extras summary { text-shadow: 0 1px 3px rgba(0, 0, 0, .95), 0 0 12px rgba(0, 0, 0, .6); }
.has-3d .bar, .has-3d .extras {
  background: rgba(5, 13, 24, .62); border-radius: 12px; padding: 8px 14px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.has-3d .extras { border-top: 0; padding: 14px; }
.has-3d .drop { background: rgba(120, 20, 18, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* Finale: lege strook onderaan waar je de grote boom met cadeautjes ziet */
.finale { display: none; }
.has-3d .finale {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
  min-height: 78vh; padding-top: 10px;
}
.finale-title {
  margin: 0; font-family: var(--xmas); font-weight: 700; font-size: clamp(40px, 9vw, 64px); line-height: 1;
  color: #ffe08a; text-shadow: 0 3px 0 #9e2420, 0 0 24px rgba(255, 213, 74, .5);
}
.finale-sub { margin: 0; font-size: 17px; font-weight: 600; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.95), 0 0 12px rgba(0,0,0,.6); }

/* Sneeuwheuvels onderin */
.hills { position: fixed; left: 0; right: 0; bottom: 0; width: 100%; height: 90px; z-index: 0; pointer-events: none; }
.wrap { padding-bottom: 130px; }

/* Lichtjes groter, plus vlaggetjes */
.lights { height: 48px; }
.tinsel { position: relative; z-index: 1; height: 36px; margin-top: -14px; overflow: hidden; }
.tinsel svg { display: block; }

/* Kop met boom */
.top { flex-direction: row; align-items: flex-end; gap: 12px; }
.top-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.tree { width: 120px; flex: none; filter: drop-shadow(0 0 18px rgba(255, 213, 74, .25)); }
.tree .ornaments circle { animation: twinkle 1.4s ease-in-out infinite; }
.tree .ornaments circle:nth-child(2n) { animation-delay: -.5s; }
.tree .ornaments circle:nth-child(3n) { animation-delay: -.9s; }
.tree .topstar { transform-origin: 60px 16px; animation: starpulse 2s ease-in-out infinite; filter: drop-shadow(0 0 6px #ffd54a); }
@keyframes starpulse { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.18) rotate(8deg); } }

.tag {
  position: relative; margin: 0; display: inline-block;
  background: var(--gold); color: #3a2400; font-weight: 800; font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  padding: 6px 14px 6px 26px; border-radius: 4px 10px 10px 4px; transform: rotate(-3deg);
  box-shadow: 0 4px 10px rgba(0,0,0,.3);
}
.tag::before { content: ""; position: absolute; left: 10px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--night); box-shadow: 0 0 0 2px #b8862a; }

h1 {
  font-family: var(--xmas); font-weight: 700; font-size: clamp(46px, 11vw, 80px); line-height: .95;
  background: linear-gradient(180deg, #ffffff 30%, #ffe08a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 #9e2420) drop-shadow(0 0 18px rgba(255, 213, 74, .35));
  padding-bottom: 4px;
}
.lede { color: #d6e6dc; font-size: 17px; }

/* 3D-sneeuwbol */
.globe-wrap { flex: none; width: 230px; display: flex; flex-direction: column; align-items: center; margin-bottom: -6px; }
.globe {
  position: relative; width: 100%; aspect-ratio: 1; max-width: 100%; border-radius: 50%; overflow: hidden;
  cursor: grab; touch-action: pan-y; -webkit-tap-highlight-color: transparent;
  box-shadow: 0 0 0 2px rgba(255,255,255,.35), 0 0 36px rgba(255, 213, 74, .3), 0 18px 30px rgba(0,0,0,.45);
}
.globe:active { cursor: grabbing; }
.globe canvas { display: block; width: 100%; height: 100%; }
.glass {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,.45) 0, rgba(255,255,255,.12) 12%, transparent 26%),
    radial-gradient(circle at 70% 82%, rgba(255,255,255,.12) 0, transparent 18%),
    radial-gradient(circle at 50% 50%, transparent 62%, rgba(170, 215, 255, .18) 74%, rgba(255,255,255,.45) 100%);
}
.globe-base {
  position: relative; z-index: 1; margin-top: -12px; width: 82%; height: 46px;
  display: grid; place-items: center;
  background: linear-gradient(180deg, #c4312b 0%, #8e1f1b 70%, #6d1714 100%);
  clip-path: polygon(7% 0, 93% 0, 100% 100%, 0 100%);
  border-top: 4px solid var(--gold);
  box-shadow: inset 0 -6px 0 rgba(0,0,0,.25);
}
.globe-base span { font-family: var(--xmas); font-weight: 700; font-size: 20px; color: #ffe08a; text-shadow: 0 2px 0 #5a120f; padding-top: 4px; }

/* Zuurstok-kaartjes met sneeuwkapje */
.card {
  position: relative;
  border: 5px solid transparent; border-radius: 16px;
  background:
    linear-gradient(var(--paper), var(--paper)) padding-box,
    repeating-linear-gradient(45deg, #d42a2a 0 9px, #ffffff 9px 18px) border-box;
}
.card::before, .item.star::before {
  content: ""; position: absolute; z-index: 2; left: 14px; right: 14px; top: -13px; bottom: auto; width: auto; height: 17px;
  border-radius: 14px 14px 8px 8px; background: #fff;
  box-shadow: 0 2px 0 #dbe7ef, inset 0 -3px 0 #e8f1f6;
  -webkit-mask: radial-gradient(9px 7px at 12% 100%, #000 98%, transparent) , radial-gradient(10px 8px at 38% 100%, #000 98%, transparent), radial-gradient(8px 6px at 71% 100%, #000 98%, transparent), linear-gradient(#000, #000) top / 100% 11px no-repeat;
          mask: radial-gradient(9px 7px at 12% 100%, #000 98%, transparent) , radial-gradient(10px 8px at 38% 100%, #000 98%, transparent), radial-gradient(8px 6px at 71% 100%, #000 98%, transparent), linear-gradient(#000, #000) top / 100% 11px no-repeat;
}
.list { gap: 26px; padding-top: 10px; }
.item { transition: transform .2s; }
@media (hover: hover) { .item:not(.taken):hover { transform: rotate(-.6deg) scale(1.01); } }
.item.star::after {
  content: "🎀"; position: absolute; z-index: 3; right: -12px; top: -20px; font-size: 38px; transform: rotate(18deg);
  filter: drop-shadow(0 3px 3px rgba(0,0,0,.3));
}
.badge-star { color: #b0161b; }

.item.taken {
  background:
    linear-gradient(var(--paper-2), var(--paper-2)) padding-box,
    repeating-linear-gradient(45deg, #9aa69f 0 9px, #e9eee9 9px 18px) border-box;
}
.item.taken::after {
  content: "GEREGELD"; position: absolute; z-index: 3; left: 4px; right: auto; top: 50%; filter: none; transform: translateY(-50%) rotate(-14deg);
  font-family: var(--body); font-weight: 800; font-size: 12px; letter-spacing: .1em; color: rgba(196, 49, 43, .9); background: rgba(255,255,255,.8);
  border: 3px double rgba(196, 49, 43, .75); border-radius: 6px; padding: 2px 8px; pointer-events: none;
}

.thumb { border-radius: 10px; }

/* Knoppen als zuurstok */
.btn {
  background: repeating-linear-gradient(-45deg, #c4312b 0 10px, #d8463f 10px 20px);
  box-shadow: 0 3px 0 #7c1b18; text-shadow: 0 1px 0 rgba(0,0,0,.25);
}
.btn:hover { background: repeating-linear-gradient(-45deg, #b02a25 0 10px, #c73c35 10px 20px); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #7c1b18; }
.btn.ghost { box-shadow: inset 0 0 0 1.5px currentColor; text-shadow: none; background: transparent; }

/* Cadeauzak voor links */
.drop {
  border: 3px dashed var(--gold); background: rgba(196, 49, 43, .18);
  box-shadow: 0 0 0 6px rgba(226, 176, 67, .08);
}
.drop-label { font-family: var(--xmas); font-weight: 700; font-size: 28px; color: #ffe08a; }

/* Spoilerwaarschuwing */
.gate-card { border: 6px solid transparent; background: linear-gradient(var(--paper), var(--paper)) padding-box, repeating-linear-gradient(45deg, #d42a2a 0 10px, #fff 10px 20px) border-box; text-align: left; }
.gate-card h2 { font-family: var(--xmas); font-weight: 700; font-size: 36px; color: var(--red); }
.gate-santa { font-size: 64px; line-height: 1; animation: wobble 1.6s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes wobble { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }

/* Toast */
.toast { background: #1f7a3d; color: #fff; border: 2px solid var(--gold); }

/* Arrenslee */
.sleigh {
  position: fixed; z-index: 2; top: calc(64px + env(safe-area-inset-top, 0px)); left: 0;
  display: flex; align-items: center; gap: 2px; font-size: 34px; white-space: nowrap; pointer-events: none;
  transform: translateX(110vw); visibility: hidden;
}
.sleigh .trail { order: 2; font-size: 18px; opacity: .9; }
.sleigh.fly { visibility: visible; animation: fly 13s linear forwards; }
@keyframes fly {
  0% { transform: translate(110vw, 10px); }
  25% { transform: translate(70vw, -6px); }
  50% { transform: translate(35vw, 12px); }
  75% { transform: translate(5vw, -4px); }
  100% { transform: translate(-60vw, 8px); }
}

/* Muziekknop */
.music {
  position: fixed; z-index: 15;
  left: max(16px, env(safe-area-inset-left, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  appearance: none; border: 2px solid var(--gold); cursor: pointer; font: inherit; font-weight: 700; font-size: 14px;
  background: var(--night-2); color: #ffe08a; border-radius: 999px; padding: 8px 14px; box-shadow: 0 6px 16px rgba(0,0,0,.4);
}
.music[aria-pressed="true"] { background: var(--red); color: #fff; animation: wobble .5s ease-in-out infinite; }

/* Cadeauregen en glitter */
.burst { position: fixed; z-index: 40; pointer-events: none; font-size: 24px; left: 0; top: 0; will-change: transform, opacity; }
.spark { position: fixed; z-index: 40; pointer-events: none; color: #ffe08a; font-size: 12px; text-shadow: 0 0 6px #ffd54a; animation: spark .8s ease-out forwards; }
@keyframes spark { from { opacity: 1; transform: translate(-50%, -50%) scale(1); } to { opacity: 0; transform: translate(-50%, 10px) scale(.3); } }

/* Themakeuze op de beheerpagina */
.theme-pick { display: flex; gap: 8px; flex-wrap: wrap; }
.theme-pick .btn { color: var(--on-night); }
.theme-pick .btn[aria-pressed="true"] { background: var(--gold); color: #3a2400; box-shadow: none; text-shadow: none; }

/* ================================================================
   SINTERKLAAS
   Diepe nachtblauwe lucht boven de grachten, Sint-rood met goud, een handgeschreven letter
   ================================================================ */
.mijter { display: none; }
.theme-sint .mijter { display: block; width: 110px; flex: none; filter: drop-shadow(0 0 18px rgba(255, 213, 74, .3)); }
.theme-sint .tree { display: none; }
.theme-sint .hills { display: none; }

body.theme-sint {
  --red: #c4161c;
  --red-dark: #8f0f14;
  --gold: #f2c14e;
  --xmas: "Pacifico", "Young Serif", Georgia, serif;
  background: radial-gradient(120% 80% at 50% 0%, #2a2350 0%, #161233 45%, #0b0a1c 100%) fixed, #0b0a1c;
}
.theme-sint h1 {
  font-weight: 400; font-size: clamp(40px, 9.5vw, 70px); line-height: 1.15;
  background: linear-gradient(180deg, #fff6d6 20%, #f2c14e 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 #8f0f14) drop-shadow(0 0 18px rgba(242, 193, 78, .4));
}
.theme-sint .drop-label, .theme-sint .gate-card h2, .theme-sint .finale-title, .theme-sint .globe-base span { font-weight: 400; }
.theme-sint .drop-label { font-size: 24px; }
.theme-sint .gate-card h2 { font-size: 30px; }
.theme-sint .finale-title { color: #fff1c4; text-shadow: 0 3px 0 #8f0f14, 0 0 24px rgba(242, 193, 78, .55); }

/* Kaartjes in inpakpapier: rood met gouden streep */
.theme-sint .card {
  background:
    linear-gradient(var(--paper), var(--paper)) padding-box,
    repeating-linear-gradient(45deg, #c4161c 0 9px, #f2c14e 9px 12px, #c4161c 12px 21px, #fff4dc 21px 24px) border-box;
}
.theme-sint .card::before, .theme-sint .item.star::before { display: none; }
.theme-sint .item.star::after { content: "⭐"; font-size: 30px; top: -16px; }
.theme-sint .item.taken {
  background:
    linear-gradient(var(--paper-2), var(--paper-2)) padding-box,
    repeating-linear-gradient(45deg, #9aa1a8 0 9px, #e9ecef 9px 18px) border-box;
}
.theme-sint .item.taken::after, .theme-sint .item.taken.star::after { content: "IN DE ZAK"; font-size: 12px; top: 50%; right: auto; filter: none; }
.theme-sint .gate-card {
  background: linear-gradient(var(--paper), var(--paper)) padding-box,
              repeating-linear-gradient(45deg, #c4161c 0 10px, #f2c14e 10px 14px, #c4161c 14px 24px, #fff4dc 24px 28px) border-box;
}
.theme-sint .btn { background: repeating-linear-gradient(-45deg, #c4161c 0 10px, #d42a2f 10px 20px); box-shadow: 0 3px 0 #6e0b0f; }
.theme-sint .btn.ghost { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.theme-sint .drop { background: rgba(140, 16, 22, .3); }
.theme-sint .toast { background: #c4161c; border-color: var(--gold); }
.theme-sint .music { background: #161233; }
.theme-sint .globe { box-shadow: 0 0 0 2px rgba(255,255,255,.35), 0 0 36px rgba(242, 193, 78, .35), 0 18px 30px rgba(0,0,0,.45); }
.theme-sint .globe-base { background: linear-gradient(180deg, #2a2350 0%, #161233 75%, #0b0a1c 100%); }
.theme-sint .spark { color: #f2c14e; }

@media (max-width: 520px) {
  .tree { width: 76px; }
  .theme-sint .mijter { width: 72px; }
  .theme-sint .item.taken::after, .theme-sint .item.taken.star::after { top: 36px; font-size: 10px; }
  .top { flex-direction: column-reverse; align-items: stretch; }
  .globe-wrap { width: 200px; align-self: center; }
  .item.taken::after { left: 2px; right: auto; top: 36px; transform: rotate(-14deg); font-size: 10px; padding: 1px 4px; }
  .item.star::after { font-size: 30px; right: -8px; }
}

@media (prefers-reduced-motion: reduce) {
  .stars, .tree .ornaments circle, .tree .topstar, .gate-santa, .music[aria-pressed="true"] { animation: none; }
  .sleigh { display: none; }
  .item { transition: none; }
}

@media (max-width: 520px) {
  .item { grid-template-columns: 60px minmax(0, 1fr); }
  .thumb { width: 60px; height: 60px; font-size: 22px; }
  .side { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
  .item .side:has(.btn:only-child) { justify-content: flex-end; }
  .draft { grid-template-columns: 1fr; }
  .draft .thumb { width: 72px; height: 72px; }
  .draft-pic { flex-direction: row; justify-content: flex-start; gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .lights .bulb { animation: none; }
  #snow { display: none; }
}