/* ===================== Kerstdobbel — maximale kerstsfeer ===================== */
:root {
  --velvet: #7a0f1c;
  --velvet-dark: #3d0710;
  --pine: #1b7f4b;
  --pine-dark: #0f5130;
  --red: #d7263d;
  --red-dark: #9b1428;
  --gold: #f2b705;
  --gold-light: #ffe27a;
  --cream: #fffaf0;
  --card: #fffdf7;
  --ink: #2b1b17;
  --muted: #7a6a60;
  --line: #eadfce;
  --shadow: 0 10px 30px rgba(0, 0, 0, .35);
  --radius: 22px;
  --head: 'Fredoka', system-ui, sans-serif;
  --xmas: 'Mountains of Christmas', 'Fredoka', cursive;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; font-family: 'Nunito', system-ui, sans-serif; color: var(--ink);
  background-color: var(--velvet-dark);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cpath d='M20 12 l2 5 5 .5-4 3.5 1.3 5-4.3-2.8-4.3 2.8 1.3-5-4-3.5 5-.5z' fill='%23f2b705' opacity='.13'/%3E%3Cpath d='M60 52 l1.4 3.4 3.4.3-2.7 2.4.9 3.4-3-1.9-3 1.9.9-3.4-2.7-2.4 3.4-.3z' fill='%23fff' opacity='.1'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at top, #a3172a 0%, var(--velvet) 35%, var(--velvet-dark) 100%);
  background-attachment: fixed;
  overflow-x: hidden;
}
h1, h2, h3 { font-family: var(--head); margin: 0 0 .5em; line-height: 1.15; }
h2 { font-size: 1.3rem; color: var(--red-dark); }
h2 small { font-weight: 500; font-size: .8rem; color: var(--muted); }
a { color: var(--red); }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.center { text-align: center; }
.loading { color: #fff; text-align: center; padding: 30vh 0; font-family: var(--head); font-size: 1.4rem; }
code { background: #f3ead9; padding: 2px 6px; border-radius: 6px; }

/* ---------- sneeuw, lampjes, slee, confetti ---------- */
#snow { position: fixed; inset: 0; pointer-events: none; z-index: 40; }
#lights { position: fixed; top: 0; left: 0; right: 0; height: 34px; z-index: 41; pointer-events: none; }
#lights .wire { position: absolute; inset: 0 0 auto; width: 100%; height: 22px; }
#lights .wire path { fill: none; stroke: #143d22; stroke-width: .6; vector-effect: non-scaling-stroke; stroke-width: 2px; }
#lights i { position: absolute; top: 15px; width: 11px; height: 17px; margin-left: -5px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: var(--c);
  box-shadow: 0 0 10px 3px var(--c); animation: twinkle 1.5s ease-in-out infinite alternate; }
#lights i::before { content: ''; position: absolute; top: -4px; left: 2px; width: 7px; height: 5px; background: #2e4a35; border-radius: 2px; }
@keyframes twinkle { 0% { opacity: 1; } 100% { opacity: .35; box-shadow: 0 0 2px 0 var(--c); } }
.sleigh { position: fixed; left: 100vw; z-index: 39; font-size: 30px; white-space: nowrap; pointer-events: none; animation: fly 9s linear forwards; filter: drop-shadow(0 0 6px rgba(255, 255, 255, .6)); }
.sleigh span { display: inline-block; animation: gallop .5s ease-in-out infinite alternate; }
.sleigh span:nth-child(2) { animation-delay: .15s; } .sleigh span:nth-child(3) { animation-delay: .3s; }
.sleigh .santa b { font-size: 22px; position: relative; left: -30px; top: -10px; }
.sleigh em { font: 700 14px var(--head); color: #fff; font-style: normal; margin-left: -10px; vertical-align: top; }
@keyframes fly { from { transform: translateX(0) translateY(0) rotate(-4deg); } 50% { transform: translateX(-60vw) translateY(-20px) rotate(2deg); } to { transform: translateX(calc(-100vw - 320px)) translateY(10px) rotate(-3deg); } }
@keyframes gallop { to { transform: translateY(-6px); } }
.confetti { position: fixed; top: -40px; z-index: 60; pointer-events: none; animation: drop linear forwards; }
@keyframes drop { to { transform: translateY(110vh) rotate(540deg); opacity: .6; } }
@media (prefers-reduced-motion: reduce) { #lights i, .logo, .guest, .orn, .flames, .topstar { animation: none !important; } }

/* ---------- knoppen ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .4em; border: 0; cursor: pointer; text-decoration: none;
  font: 600 1rem var(--head); color: #fff; background: linear-gradient(180deg, #ef3b52, var(--red)); padding: .8em 1.4em; border-radius: 999px;
  box-shadow: 0 4px 0 var(--red-dark), 0 6px 14px rgba(0, 0, 0, .25); transition: transform .08s, box-shadow .08s; -webkit-tap-highlight-color: transparent;
}
/* sneeuwlaagje op elke knop */
.btn::before { content: ''; position: absolute; top: -5px; left: 14px; right: 14px; height: 10px; border-radius: 10px 10px 6px 6px; pointer-events: none;
  background: radial-gradient(circle at 10% 100%, #fff 5px, transparent 6px), radial-gradient(circle at 35% 100%, #fff 6px, transparent 7px), radial-gradient(circle at 62% 100%, #fff 5px, transparent 6px), radial-gradient(circle at 88% 100%, #fff 6px, transparent 7px), linear-gradient(#fff, #fff) bottom / 100% 5px no-repeat; opacity: .95; }
.btn.small::before, .btn.ghost::before { display: none; }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--red-dark); }
.btn:disabled { opacity: .45; pointer-events: none; }
.btn.big { font-size: 1.2rem; padding: .95em 1.9em; }
.btn.small { font-size: .88rem; padding: .55em 1em; box-shadow: 0 3px 0 var(--red-dark); }
.btn.green { background: linear-gradient(180deg, #27a462, var(--pine)); box-shadow: 0 4px 0 var(--pine-dark); }
.btn.small.green { box-shadow: 0 3px 0 var(--pine-dark); }
.btn.gold { background: linear-gradient(180deg, var(--gold-light), var(--gold)); color: var(--ink); box-shadow: 0 4px 0 #b78a00; }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--line); }
.btn.ghost.light { color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .45); }
.btn.ghost:active { transform: none; }
.btn.danger { color: var(--red); }
.btn.magic { background: linear-gradient(135deg, #8e44ad, #e1a100); box-shadow: 0 4px 0 #5e2c73; }
.linkbtn { background: none; border: 0; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; padding: 0; }
.iconbtn { background: rgba(255, 255, 255, .14); border: 0; border-radius: 12px; font-size: 1.15rem; padding: .35em .5em; cursor: pointer; color: inherit; }
.iconbtn.x { background: #f3ead9; font-size: .9rem; color: var(--muted); }
.row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.center-row { justify-content: center; }

/* ---------- hero ---------- */
.hero { position: relative; color: #fff; text-align: center; padding: 64px 16px 30px; }
.hero.small { padding: 50px 16px 14px; }
.hero-in { position: relative; z-index: 1; }
.xmas-title { font-family: var(--xmas); font-weight: 700; font-size: clamp(3rem, 14vw, 5.2rem); line-height: 1; margin: 0;
  background: linear-gradient(180deg, #fff6c9 0%, var(--gold-light) 35%, var(--gold) 60%, #c98a00 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 var(--red-dark)) drop-shadow(0 0 18px rgba(255, 210, 63, .55)); }
.hero.small .xmas-title { font-size: clamp(2.4rem, 10vw, 3.4rem); }
.pre-title { font: 600 1.1rem var(--head); letter-spacing: .2em; text-transform: uppercase; margin: 0 0 4px; color: var(--gold-light); }
.logo { font-size: 3rem; animation: bob 2.4s ease-in-out infinite; }
.sub { opacity: .92; margin: .6em 0 0; font-weight: 600; }
@keyframes bob { 50% { transform: translateY(-6px) rotate(-4deg); } }

/* aftellen in adventskalender-doosjes */
.advent { display: flex; justify-content: center; gap: 10px; margin-top: 18px; }
.advent .box { position: relative; min-width: 66px; padding: 12px 6px 8px; border-radius: 10px; color: #fff; box-shadow: 0 5px 0 rgba(0, 0, 0, .25); }
.advent .box::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 8px; margin-left: -4px; background: rgba(255, 226, 122, .85); }
.advent .box::after { content: '🎀'; position: absolute; top: -14px; left: 50%; transform: translateX(-50%); font-size: 20px; }
.advent .b0 { background: var(--pine); } .advent .b1 { background: #2e86de; } .advent .b2 { background: #8e44ad; } .advent .b3 { background: var(--red); }
.advent b { position: relative; display: block; font: 700 1.8rem var(--head); line-height: 1; text-shadow: 0 2px 0 rgba(0, 0, 0, .3); }
.advent span { position: relative; font-size: .75rem; font-weight: 800; text-transform: uppercase; }
.advent.today { font: 700 1.4rem var(--head); color: var(--gold-light); }

/* ---------- kaarten ---------- */
.wrap { position: relative; z-index: 2; max-width: 660px; margin: 0 auto; padding: 0 16px 30px; }
.wrap.wide { max-width: 1120px; }
.cols { display: grid; gap: 0 18px; }
@media (min-width: 900px) { .cols { grid-template-columns: 1fr 1fr; align-items: start; } }
.card { position: relative; background: var(--card); border-radius: var(--radius); padding: 22px 20px 20px; margin: 0 0 18px; box-shadow: var(--shadow); }
/* zuurstokrand */
.card.candy { border-top: 0; padding-top: 30px; overflow: hidden; }
.card.candy::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 10px; background: repeating-linear-gradient(-45deg, var(--red) 0 12px, #fff 12px 24px); }
.card.candy::after { content: '🌿'; position: absolute; top: 4px; right: 10px; font-size: 26px; transform: rotate(20deg); filter: hue-rotate(-10deg); }
.card.center p { max-width: 440px; margin-left: auto; margin-right: auto; }
.budget-line { background: #fff4d6; border-radius: 12px; padding: 8px 12px; display: inline-block; }

.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.steps li { display: flex; gap: 12px; align-items: center; }
.steps li span { font-size: 1.8rem; width: 52px; height: 52px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #fdeee0; box-shadow: inset 0 0 0 3px var(--gold); }
.recent { display: flex; flex-wrap: wrap; gap: 8px; }

.cta-in { display: flex; gap: 16px; align-items: flex-start; }
.cta-emoji { font-size: 3rem; animation: bob 2s infinite; }

/* ---------- formulier ---------- */
.form label { display: block; font-weight: 700; margin: 12px 0 0; }
.form label small { font-weight: 500; color: var(--muted); }
.form input, .form textarea, .form select, #pinf input, .wallform textarea, #joinf input, #pinchg input, .share input {
  display: block; width: 100%; margin-top: 6px; font: inherit; font-size: 16px; padding: .7em .85em; border-radius: 14px;
  border: 2px solid var(--line); background: #fff; color: var(--ink);
}
#joinf input, #pinchg input { margin-top: 0; }
.form input:focus, .form textarea:focus, .wallform textarea:focus { outline: none; border-color: var(--pine); box-shadow: 0 0 0 4px rgba(27, 127, 75, .15); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stepn { display: inline-grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%; background: var(--pine); color: #fff; font-size: .85rem; margin-right: .5em; vertical-align: 2px; box-shadow: 0 0 0 3px var(--gold-light); }
.form-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }
.stepper { display: flex; align-items: center; margin-top: 6px; background: #fff; border: 2px solid var(--line); border-radius: 14px; overflow: hidden; }
.stepper button { border: 0; background: #fdeee0; font: 700 1.3rem var(--head); width: 44px; height: 46px; cursor: pointer; color: var(--red-dark); }
.stepper input { border: 0 !important; margin: 0 !important; text-align: center; font-weight: 800 !important; padding: .5em 0 !important; min-width: 0; -moz-appearance: textfield; box-shadow: none !important; }
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; }
.stepper .pre { font-weight: 800; padding-left: 8px; color: var(--muted); }
fieldset.radio { border: 0; padding: 0; margin: 14px 0 0; }
fieldset.radio legend { font-weight: 700; margin-bottom: 6px; }
label.opt { display: flex; gap: 10px; align-items: flex-start; border: 2px solid var(--line); border-radius: 14px; padding: 10px 12px; margin: 6px 0 0; cursor: pointer; font-weight: 400; }
label.opt input { width: auto; margin: 4px 0 0; accent-color: var(--red); }
label.opt span { display: grid; }
label.opt small { color: var(--muted); }
label.opt:has(input:checked) { border-color: var(--red); background: #fff3f3; }
.kid-edit { border: 3px dashed #cfe8d9; background: #f6fcf8; border-radius: 18px; padding: 12px; margin-bottom: 14px; }
.partnerbox { background: #fff8e6; border: 3px dashed #f2c94c; border-radius: 18px; padding: 12px; margin: 0 0 14px; }
.partnerbox .pk { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.partnerbox .mate { display: inline-flex; align-items: center; gap: 4px; background: #fff; border-radius: 999px; padding: 2px 10px 2px 2px; font-weight: 700; }
.kid-edit .addedby { margin: 0 0 6px; }
.kid-row { display: flex; gap: 8px; align-items: center; }
.kid-row input { margin: 0; flex: 1; font: inherit; font-size: 16px; padding: .6em .8em; border-radius: 12px; border: 2px solid var(--line); }
.kid-row input.age { flex: 0 0 96px; }
.roletoggle { display: flex; background: #fff; border: 2px solid var(--line); border-radius: 999px; padding: 3px; margin: 10px 0 0; }
.roletoggle button { flex: 1; border: 0; background: transparent; border-radius: 999px; padding: .55em .6em; font: 600 .95rem var(--head); cursor: pointer; color: var(--muted); }
.roletoggle button.on { background: var(--pine); color: #fff; }
.roletoggle button.on[data-krole="player"], .roletoggle button.on[data-setrole="player"] { background: var(--red); }
.roletoggle.small button { font-size: .8rem; padding: .45em .6em; }
.roletoggle button:disabled { opacity: .6; }

/* ---------- kleedkamer ---------- */
.builder { display: grid; gap: 14px; margin-top: 10px; }
.builder-preview { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.mirror { width: 170px; height: 170px; border-radius: 50%; padding: 8px; background: radial-gradient(circle at 35% 30%, #fff, #e8f4ff 60%, #cfe3f5); box-shadow: 0 0 0 7px var(--gold), 0 0 0 11px #c98a00, 0 10px 24px rgba(0, 0, 0, .25); }
.mirror .av { width: 100%; height: 100%; }
.builder.compact .mirror { width: 120px; height: 120px; box-shadow: 0 0 0 5px var(--gold), 0 6px 14px rgba(0, 0, 0, .2); }
.tabs { display: flex; gap: 4px; overflow-x: auto; margin-bottom: 10px; scrollbar-width: none; }
.tab { flex: 1 0 auto; border: 0; background: #f3ead9; border-radius: 12px 12px 0 0; padding: .6em .8em; font: 600 .9rem var(--head); cursor: pointer; color: var(--muted); border-bottom: 3px solid transparent; }
.tab.on { background: var(--red); color: #fff; border-bottom-color: var(--gold); }
.opt-row { margin-bottom: 12px; }
.opt-label { display: block; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 6px; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch { width: 36px; height: 36px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px var(--line); cursor: pointer; }
.swatch.on { box-shadow: 0 0 0 3px var(--ink); transform: scale(1.1); }
.looks { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 6px; }
.look { border: 2px solid var(--line); background: #fff; border-radius: 14px; padding: 4px 2px 6px; cursor: pointer; display: flex; flex-direction: column; align-items: center; font: 700 .72rem 'Nunito', sans-serif; color: var(--ink); line-height: 1.1; text-align: center; hyphens: manual; }
.look .av { width: 46px; height: 46px; }
.look.on { border-color: var(--red); background: #fff1f1; box-shadow: 0 0 0 2px var(--red); }
@media (min-width: 600px) { .builder { grid-template-columns: 190px 1fr; align-items: start; } .builder-preview { position: sticky; top: 40px; } }
.dressing { max-height: calc(100vh - 40px); overflow-y: auto; }

/* ---------- de Kerstlobby ---------- */
.lobby-hero { padding-bottom: 20px; }
.scene-wrap { margin-bottom: 18px; }
.scene { position: relative; border-radius: 26px; overflow: hidden; box-shadow: var(--shadow), 0 0 0 6px var(--gold), 0 0 0 10px #8a5a00; background: #0d3b26; }
.room { position: relative; height: 290px; display: flex; align-items: flex-end; justify-content: center; gap: 4%; padding: 0 3%;
  background:
    radial-gradient(circle at 50% 110%, rgba(255, 190, 90, .45), transparent 60%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .04) 0 22px, transparent 22px 44px),
    radial-gradient(circle at 22px 22px, rgba(242, 183, 5, .18) 3px, transparent 4px) 0 0 / 44px 44px,
    linear-gradient(180deg, #145236, #0d3b26); }
.garland { position: absolute; top: 0; left: 0; right: 0; height: 30px; background: radial-gradient(ellipse at 50% 0, #1b7f4b 60%, transparent 62%) 0 0 / 60px 30px repeat-x; }
.garland::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle, #ff3b3b 4px, transparent 5px) 30px 14px / 60px 30px repeat-x; }
.window { position: absolute; right: 5%; top: 46px; width: 90px; height: 110px; border-radius: 45px 45px 6px 6px; border: 7px solid #6b3e26;
  background: linear-gradient(#0b1a3b, #23407a); box-shadow: inset 0 -16px 0 #fff; overflow: hidden; }
.window::before, .window::after { content: ''; position: absolute; background: #6b3e26; }
.window::before { left: 50%; top: 0; bottom: 0; width: 5px; margin-left: -2.5px; }
.window::after { top: 50%; left: 0; right: 0; height: 5px; }
.window span { position: absolute; top: 10px; left: 10px; font-size: 22px; }
.fp { width: 34%; max-width: 260px; align-self: flex-end; }
.fp svg { width: 100%; display: block; }
.flames { transform-origin: 100px 180px; animation: flicker .25s infinite alternate; }
@keyframes flicker { to { transform: scaleY(1.08) scaleX(.97); opacity: .9; } }
.tr { position: relative; width: 38%; max-width: 280px; display: flex; flex-direction: column; align-items: center; }
.tree { width: 100%; display: block; overflow: visible; }
.orn { animation: orn 2s ease-in-out infinite alternate; }
@keyframes orn { to { opacity: .55; } }
.topstar { transform-origin: 100px 22px; animation: starglow 1.6s ease-in-out infinite alternate; }
@keyframes starglow { to { filter: drop-shadow(0 0 8px #ffe27a); transform: scale(1.12); } }
.presents { position: absolute; bottom: 0; left: -40%; right: -40%; display: flex; justify-content: center; align-items: flex-end; flex-wrap: wrap-reverse; gap: 2px; }
.present { position: relative; width: 32px; height: 26px; border-radius: 3px; display: grid; place-items: center; font: 700 .7rem var(--head); color: #fff;
  background: linear-gradient(90deg, transparent 42%, var(--gold-light) 42% 58%, transparent 58%), var(--pc); box-shadow: 0 2px 0 rgba(0, 0, 0, .3); }
.present::before { content: ''; position: absolute; top: -7px; left: 50%; width: 16px; height: 8px; margin-left: -8px; border: 3px solid var(--gold-light); border-bottom: 0; border-radius: 8px 8px 0 0; }
.present b { background: rgba(0, 0, 0, .35); border-radius: 4px; padding: 0 3px; }
.present.p0 { --pc: #d7263d; } .present.p1 { --pc: #2e86de; } .present.p2 { --pc: #8e44ad; height: 32px; } .present.p3 { --pc: #1b7f4b; width: 28px; } .present.p4 { --pc: #e84393; height: 22px; }
.sack { position: relative; font-size: 34px; margin-left: 4px; }
.sack b { position: absolute; right: -4px; top: -4px; background: var(--pine); color: #fff; font: 700 .75rem var(--head); border-radius: 999px; padding: 1px 6px; }
.floor { padding: 22px 8px 6px; background: repeating-linear-gradient(90deg, #8b5a2b 0 60px, #7b4e24 60px 62px, #966332 62px 120px, #7b4e24 120px 122px); box-shadow: inset 0 14px 18px rgba(0, 0, 0, .35); min-height: 140px; }
.crowdline { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 6px; }
.elves-line { margin-top: 6px; }
.guest { position: relative; border: 0; background: none; padding: 0; cursor: pointer; width: 82px; display: flex; flex-direction: column; align-items: center; animation: sway 3s ease-in-out infinite; animation-delay: var(--d, 0s); -webkit-tap-highlight-color: transparent; }
.guest .av { width: 74px; height: 74px; filter: drop-shadow(0 6px 4px rgba(0, 0, 0, .35)); transition: transform .15s; }
.guest:active .av { transform: scale(.92); }
.guest.small { width: 66px; }
.guest.small .av { width: 56px; height: 56px; }
.guest .tag { margin-top: -6px; background: var(--cream); color: var(--ink); font: 700 .72rem var(--head); border-radius: 999px; padding: 2px 8px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-shadow: 0 2px 0 rgba(0, 0, 0, .25); }
.guest.me .tag { background: var(--gold); }
.guest.me .av { filter: drop-shadow(0 0 8px var(--gold-light)) drop-shadow(0 6px 4px rgba(0, 0, 0, .35)); }
.guest .dot { position: absolute; top: 4px; right: 10px; width: 12px; height: 12px; border-radius: 50%; background: #39d353; box-shadow: 0 0 0 2px #fff, 0 0 8px #39d353; z-index: 1; }
.guest .elfmark { position: absolute; top: 0; left: 4px; font-size: 14px; }
.guest .busy { position: absolute; top: 0; left: 6px; font-size: 13px; }
.guest.ghost { cursor: default; animation: none; opacity: .55; }
.ghost-av { width: 66px; height: 66px; margin: 4px 0; border-radius: 50%; border: 3px dashed rgba(255, 255, 255, .7); display: grid; place-items: center; color: #fff; font: 700 1.6rem var(--head); }
.guest.small .ghost-av { width: 50px; height: 50px; font-size: 1.2rem; }
.guest.hit .av { animation: shake .5s; }
.guest.hit::after { content: ''; position: absolute; top: 10px; left: 50%; width: 60px; height: 40px; margin-left: -30px; background: radial-gradient(circle, #fff 30%, rgba(255, 255, 255, .7) 45%, transparent 70%); border-radius: 50%; animation: fadeout .9s forwards; }
@keyframes sway { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-3px) rotate(1.5deg); } }
@keyframes shake { 20% { transform: rotate(-12deg); } 40% { transform: rotate(10deg); } 60% { transform: rotate(-6deg); } 80% { transform: rotate(4deg); } }
@keyframes fadeout { to { opacity: 0; transform: scale(1.4); } }
.bubble { position: absolute; top: -12px; left: 50%; font-size: 28px; transform: translateX(-50%); animation: rise 1.2s forwards; pointer-events: none; }
@keyframes rise { to { transform: translate(-50%, -40px); opacity: 0; } }
.snowball { position: fixed; left: -12px; top: -12px; width: 24px; height: 24px; border-radius: 50%; z-index: 70; pointer-events: none; background: radial-gradient(circle at 35% 35%, #fff, #dbeefa); box-shadow: 0 2px 6px rgba(0, 0, 0, .3); }
.scene-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 10px 8px 0; background: #6b4420; }
.scene-stats span { background: rgba(0, 0, 0, .3); color: #fff; font: 600 .82rem var(--head); border-radius: 999px; padding: 3px 10px; }
.scene-tip { margin: 0; padding: 8px 10px 12px; text-align: center; color: #ffe8c2; font-size: .82rem; font-weight: 700; background: #6b4420; }
@media (max-width: 520px) {
  .room { height: 220px; }
  .window { width: 64px; height: 80px; top: 38px; right: 3%; }
  .present { width: 24px; height: 20px; font-size: .6rem; }
  .present.p2 { height: 24px; } .present.p3 { width: 22px; }
}

/* ---------- jouw kaart / elfjes / prikbord ---------- */
.me-top { display: flex; align-items: center; gap: 14px; }
.me-top h2 { margin: 0; }
.mirror-btn { border: 0; background: none; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; flex: none; }
.mirror-btn .av { width: 104px; height: 104px; border-radius: 50%; box-shadow: 0 0 0 5px var(--gold), 0 0 0 8px #c98a00; background: #fff; }
.mirror-btn span { margin-top: 8px; font: 600 .8rem var(--head); color: var(--red); }
.buylist { list-style: none; padding: 0; margin: 14px 0; display: grid; gap: 10px; }
.buylist li.buy { display: flex; gap: 12px; align-items: center; background: #fff7e6; border: 2px solid #f6dfae; border-radius: 16px; padding: 10px 12px; }
.buylist li.santa { background: #eefaf3; border-color: #bfe6cf; }
.buylist li > div { display: grid; gap: 4px; }
.buylist li small { color: var(--muted); }
.buylist .btn { justify-self: start; margin-top: 4px; }
.tagnum { flex: none; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 14px; background: var(--red); color: #fff; font: 700 1.5rem var(--head);
  background-image: linear-gradient(90deg, transparent 44%, var(--gold-light) 44% 56%, transparent 56%), linear-gradient(0deg, transparent 44%, var(--gold-light) 44% 56%, transparent 56%); text-shadow: 0 2px 3px rgba(0, 0, 0, .6); }
.tagav { flex: none; }
.todo { list-style: none; padding: 0; margin: 0 0 14px; }
.todo li { padding: 3px 0; color: var(--muted); }
.todo li.ok { color: var(--ink); }
.elflist { list-style: none; padding: 0; margin: 0 0 10px; display: grid; gap: 10px; }
.elflist li { display: flex; gap: 12px; align-items: center; background: #f2fbf6; border-radius: 16px; padding: 8px 10px; }
.elflist li > div { display: grid; gap: 3px; }
.elflist small { color: var(--muted); }
.elflist .btn { justify-self: start; }
.wallform { display: grid; gap: 8px; margin-bottom: 12px; }
.wallform .btn { justify-self: end; }
.wall { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-height: 420px; overflow-y: auto; }
.wall li { position: relative; display: flex; gap: 10px; align-items: flex-start; background: #fffbe8; border-radius: 4px 16px 16px 16px; padding: 10px 34px 10px 10px; box-shadow: 0 2px 0 #f1e3b4; transform: rotate(-.4deg); }
.wall li:nth-child(even) { background: #eefaf3; box-shadow: 0 2px 0 #cfe8d9; transform: rotate(.4deg); }
.wall li p { margin: 2px 0 0; white-space: pre-wrap; word-break: break-word; }
.wall li .av { flex: none; }
.wall li .x { position: absolute; top: 6px; right: 6px; padding: 2px 6px; }
.hostav { font-size: 28px; }
.share { display: grid; gap: 10px; }
.share input { margin: 0; font-size: 14px; text-align: center; }

/* ---------- regels ---------- */
.rules details { border-top: 1px solid var(--line); padding: 10px 0; }
.rules summary { font: 600 1.05rem var(--head); cursor: pointer; }
.facetable { border-collapse: collapse; margin-top: 8px; width: 100%; }
.facetable td { padding: 4px 6px; vertical-align: middle; }
.facetable td:nth-child(2) { font-size: 1.2rem; width: 2em; text-align: center; }
.facetable .die, .wide .facetable .die { width: 36px; height: 36px; border-width: 2px; padding: 4px; box-shadow: inset 0 -2px 3px rgba(160, 120, 60, .14), 0 2px 0 #d9b25a; }
.facetable .die::after { display: none; }
.facetable .die-emoji, .wide .facetable .die-emoji { font-size: 1.1rem; }

/* ---------- footer met sneeuwbank ---------- */
.foot { position: relative; z-index: 2; text-align: center; color: rgba(255, 255, 255, .85); font-size: .9rem; padding: 10px 16px 70px; }
.foot a { color: #fff; }
.snowbank { position: absolute; left: 0; right: 0; bottom: 0; height: calc(64px + env(safe-area-inset-bottom)); pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 90' preserveAspectRatio='none'%3E%3Cpath d='M0 58 C110 40 220 50 330 54 C450 58 540 38 660 48 C780 58 870 64 980 50 C1080 38 1150 44 1200 52 L1200 90 L0 90 Z' fill='white'/%3E%3C/svg%3E") 0 0 / 100% 64px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 90' preserveAspectRatio='none'%3E%3Cpath d='M0 42 C90 22 190 30 300 38 C410 46 480 16 600 26 C720 36 800 48 910 32 C1020 16 1110 22 1200 36 L1200 90 L0 90 Z' fill='%23dcebfa'/%3E%3C/svg%3E") 0 0 / 100% 64px no-repeat,
    linear-gradient(#fff, #fff) 0 63px / 100% 100% no-repeat; }
.snowbank::after { content: '✦  ✧    ✦      ✧   ✦'; position: absolute; left: 0; right: 0; bottom: calc(14px + env(safe-area-inset-bottom)); text-align: center; color: #b9d7f2; font-size: 11px; letter-spacing: 10px; white-space: pre; }
.foot-links { color: #fff; }
.foot-links a { color: #fff; }

/* ---------- spel ---------- */
.gamebar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 8px; padding: 34px 16px 10px; padding-top: max(34px, env(safe-area-inset-top));
  background: linear-gradient(180deg, rgba(61, 7, 16, .96), rgba(61, 7, 16, .85)); backdrop-filter: blur(6px); color: #fff; border-bottom: 4px solid transparent; border-image: repeating-linear-gradient(-45deg, var(--red) 0 10px, #fff 10px 20px) 4; }
.gamebar .phase { font: 700 1.6rem var(--xmas); flex: 1; color: var(--gold-light); }
.timer { font: 700 1.1rem var(--head); background: var(--gold); color: var(--ink); padding: .2em .7em; border-radius: 999px; }
.timer.urgent { background: var(--red); color: #fff; animation: pulse 1s infinite; }
.game { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: 16px 16px 120px; display: grid; gap: 16px; }
@media (min-width: 900px) { .game { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } .col-full { grid-column: 1 / -1; } }
.announce { background: var(--gold); border-radius: 14px; padding: 12px 14px; margin-bottom: 12px; }
.turn { position: relative; background: var(--card); border-radius: var(--radius); padding: 26px 18px 18px; box-shadow: var(--shadow); text-align: center; overflow: hidden; }
.turn::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 10px; background: repeating-linear-gradient(-45deg, var(--red) 0 12px, #fff 12px 24px); }
.turn.mine { box-shadow: 0 0 0 5px var(--gold), 0 0 30px rgba(255, 210, 63, .6), var(--shadow); }
.turn.elfturn { background: linear-gradient(180deg, #f0fff7, var(--card)); box-shadow: 0 0 0 5px var(--pine), var(--shadow); }
.turn.elfturn::before { background: repeating-linear-gradient(-45deg, var(--pine) 0 12px, #fff 12px 24px); }
.turn-who { display: flex; align-items: center; justify-content: center; gap: 12px; text-align: left; }
.turn-label { font-size: .85rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.turn.mine .turn-label { color: var(--red); animation: pulse 1.2s infinite; }
.turn-name { font: 700 1.7rem var(--head); }
.stage { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 18px 0 6px; }
.waiting { color: var(--muted); font-style: italic; }
@keyframes pulse { 50% { opacity: .55; } }
.die { width: 100px; height: 100px; border-radius: 24%; padding: 12px; display: grid; place-items: center; position: relative;
  background: radial-gradient(circle at 30% 22%, #fff 0%, #fffaf0 45%, #f3e7d1 100%); border: 3px solid var(--gold);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .9), inset 0 -7px 10px rgba(160, 120, 60, .14), 0 6px 0 #d9b25a, 0 9px 0 #b98d2e, 0 16px 28px rgba(0, 0, 0, .22); }
.die::after { content: ''; position: absolute; top: 7%; left: 12%; width: 38%; height: 16%; border-radius: 50%; background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0)); pointer-events: none; }
.die.elf { background: radial-gradient(circle at 30% 22%, #fff 0%, #f1fdf7 45%, #cdeedd 100%); border-color: var(--pine); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .9), inset 0 -7px 10px rgba(20, 110, 70, .14), 0 6px 0 #4aa77a, 0 9px 0 var(--pine-dark), 0 16px 28px rgba(0, 0, 0, .22); }
.die.rolling, .die.elf.rolling { will-change: transform; box-shadow: inset 0 3px 0 rgba(255, 255, 255, .9), 0 14px 30px rgba(0, 0, 0, .22); }
.die.rolling .pips, .die.rolling .die-emoji { filter: blur(.4px); }
/* landen: even indeuken en terugveren */
.die.land { animation: dieland .55s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes dieland { 0% { transform: scale(1.12, .86) translateY(6px); } 45% { transform: scale(.95, 1.07) translateY(-6px); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .die.land { animation: none; } }
.pips { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); width: 100%; height: 100%; place-items: center; }
.pips i { display: block; }
/* stippen schalen mee met de dobbelsteen (procent van een vakje), verzonken met een glimlichtje */
.pips i.on { width: 74%; height: 74%; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #ff7a7f 0%, #e3263a 38%, #a50f22 100%);
  box-shadow: inset 0 2px 3px rgba(60, 0, 10, .45), 0 1px 0 rgba(255, 255, 255, .9); }
.die-emoji { display: block; width: 100%; text-align: center; font-size: 3rem; line-height: 1; }
.die-q { font: 700 3rem var(--head); color: #d9cfc0; }
.btn.roll { font-size: 1.5rem; padding: .85em 2.3em; animation: wiggle 2s ease-in-out infinite; }
.btn.elfbtn { background: linear-gradient(180deg, #27a462, var(--pine)); box-shadow: 0 5px 0 var(--pine-dark); font-size: 1.9rem; padding: 1em 2.5em; }
@keyframes wiggle { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(-3deg); } 90% { transform: rotate(3deg); } 95% { transform: rotate(-2deg); } }
.result { margin-top: 10px; border-top: 2px dashed var(--line); padding-top: 14px; animation: pop .35s ease-out; }
@keyframes pop { from { transform: scale(.9); opacity: 0; } }
.result-icon { font-size: 2.6rem; }
.result h3 { font-size: 1.5rem; }
.result-text { font-weight: 700; font-size: 1.1rem; }
.fact, .challenge { margin: 12px 0; padding: 14px; background: #fff4d6; border-radius: 14px; font: 500 1.2rem var(--head); }
.challenge { background: #e3f7ec; }
.reveal-who { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 1.1rem; }
.hint { background: #fff4d6; border-radius: 12px; padding: 10px 12px; margin: 10px 0; }
.kidgift { background: var(--pine); color: #fff; font: 600 1.15rem var(--head); border-radius: 14px; padding: 14px; margin: 12px 0; animation: pop .4s; }
.prompt { font: 600 1.15rem var(--head); }
.choices { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); margin: 10px 0; }
.choice { background: #fff; border: 2px solid var(--line); border-radius: 14px; padding: 10px 6px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; font: 700 .95rem 'Nunito', sans-serif; color: var(--ink); }
.choice:active { border-color: var(--red); background: #fff1f1; }
.choice small { color: var(--muted); font-weight: 600; }
.choice small.h { font-style: italic; font-size: .75rem; }
.giftbox { font-size: 2rem; display: inline-flex; align-items: center; gap: 2px; }
.giftbox b { font: 700 1.3rem var(--head); }
.table, .log { background: rgba(0, 0, 0, .25); border: 2px solid rgba(242, 183, 5, .35); border-radius: var(--radius); padding: 16px; color: #fff; }
.table h2, .log h2, .elves-h { color: var(--gold-light); }
.table h2 small { color: rgba(255, 255, 255, .6); }
.pile { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; background: rgba(0, 0, 0, .25); padding: 10px; border-radius: 14px; margin-bottom: 12px; }
.pile-label { font: 600 .9rem var(--head); margin-right: 4px; }
.seats { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; }
.seat { background: rgba(255, 255, 255, .1); border-radius: 14px; padding: 10px 6px; text-align: center; transition: transform .2s; border: 2px solid transparent; }
.seat.active { background: rgba(242, 183, 5, .25); border-color: var(--gold); transform: scale(1.04); }
.seat.me .seat-name::after { content: ' (jij)'; opacity: .6; font-weight: 400; }
.seat.empty { opacity: .7; }
.seat-name { font-weight: 800; font-size: .9rem; margin: 2px 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seat-gifts { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; min-height: 28px; }
.none { opacity: .4; }
.gift { border: 0; background: var(--red); color: #fff; border-radius: 8px; padding: 2px 6px; font: 600 .85rem var(--head); cursor: pointer; display: inline-flex; gap: 2px; align-items: center; }
.gift.flash { animation: flash .9s ease-in-out 3; box-shadow: 0 0 0 3px var(--gold); }
@keyframes flash { 50% { transform: scale(1.25); } }
.elves-h { font-size: 1rem; margin: 16px 0 8px; }
.elves { display: flex; flex-wrap: wrap; gap: 8px; }
.elf:not(.die) { display: flex; align-items: center; gap: 8px; background: rgba(27, 127, 75, .45); border-radius: 14px; padding: 6px 12px 6px 6px; border: 2px solid transparent; }
.elf.active { border-color: var(--gold); }
.stars { font-size: .95rem; letter-spacing: 1px; }
.log ul { list-style: none; margin: 0; padding: 0; font-size: .9rem; }
.log li { padding: 5px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); opacity: .85; }
.log li:first-child { opacity: 1; font-weight: 700; }
.miracle .sparkle { font-size: 3.5rem; animation: bob 1.6s infinite; }
.m-event { animation: pop .5s; margin: 10px 0; }
.m-event p { font-size: 1.15rem; }
.m-move { display: flex; align-items: center; justify-content: center; gap: 10px; }
.m-gift { font: 700 1.4rem var(--head); }
.ok-msg { font: 600 1.3rem var(--head); color: var(--pine); }
.unwrap .counter { color: var(--muted); font-weight: 700; }
.big-gift { font-size: 5rem; animation: bob 2s infinite; }
.big-gift b { font: 700 2.5rem var(--head); vertical-align: middle; }
.from { animation: pop .5s; display: flex; flex-direction: column; align-items: center; }
.from p { font-size: 1.3rem; margin: 6px 0 14px; }
.finale { text-align: center; color: #fff; }
.final-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); margin-top: 20px; text-align: center; }
.final { color: var(--ink); margin: 0; }
.final-pair { display: flex; align-items: center; justify-content: center; gap: 6px; font: 600 1rem var(--head); }
.final p { margin: 8px 0 4px; }
.hostbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center;
  background: rgba(20, 3, 7, .88); backdrop-filter: blur(6px); padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); color: #fff; border-top: 3px solid var(--gold); }
.hb-label { font: 600 .8rem var(--head); text-transform: uppercase; opacity: .7; }
.drive { font-size: .85rem; display: flex; align-items: center; gap: 4px; }

/* ---------- beheer ---------- */
.seatlist, .kidadmin { list-style: none; padding: 0; margin: 10px 0 0; counter-reset: s; }
.seatlist li, .kidadmin li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.seatlist li { counter-increment: s; }
.seatlist li::before { content: counter(s); font: 700 1.1rem var(--head); width: 1.4em; color: var(--muted); }
.sl-main { flex: 1; min-width: 140px; }
.sl-btns { display: flex; gap: 2px; flex-wrap: wrap; justify-content: flex-end; }
.sl-btns .iconbtn { background: #f3ead9; font-size: 1rem; }
.kidadmin .roletoggle { margin: 0; }

/* ---------- TV ---------- */
.wide .game { max-width: none; padding: 24px 32px; }
@media (min-width: 900px) { .wide .game { grid-template-columns: 1.1fr 1fr; } }
.wide .turn { padding: 36px; }
.wide .die { width: 150px; height: 150px; }
.wide .die-emoji { font-size: 4.5rem; }
.wide .turn-name { font-size: 2.6rem; }
.wide .result h3 { font-size: 2.2rem; }
.wide .fact, .wide .challenge { font-size: 1.8rem; }
.wide .result-text { font-size: 1.5rem; }
.wide .seats { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.wide .gamebar .phase { font-size: 2.4rem; }
.wide .timer { font-size: 1.6rem; }
.tv-lobby { position: relative; z-index: 2; min-height: 100vh; display: grid; gap: 40px; padding: 60px 40px 40px; color: #fff; align-items: center; }
@media (min-width: 900px) { .tv-lobby { grid-template-columns: 430px 1fr; } }
.tv-left { text-align: center; }
.tv-left .xmas-title { font-size: 6rem; }
.mode-tv .room { height: 360px; }
.qr { display: inline-block; background: #fff; padding: 14px; border-radius: 18px; margin-top: 24px; box-shadow: 0 0 0 6px var(--gold); }
.url { font: 600 1.3rem var(--head); }

/* ---------- overlays ---------- */
#toast { position: fixed; left: 50%; bottom: 96px; transform: translate(-50%, 30px); opacity: 0; transition: .25s; background: var(--ink); color: #fff;
  padding: 12px 18px; border-radius: 16px; max-width: calc(100% - 32px); z-index: 80; pointer-events: none; box-shadow: 0 0 0 3px var(--gold), var(--shadow); text-align: center; font-weight: 700; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#offline { position: fixed; top: 34px; left: 0; right: 0; background: var(--gold); color: var(--ink); text-align: center; padding: 6px; font-weight: 700; z-index: 81; }
#modal { position: fixed; inset: 0; background: rgba(20, 3, 7, .75); z-index: 50; overflow-y: auto; padding: 40px 12px 16px; backdrop-filter: blur(3px); }
#modal .modal-in { max-width: 760px; margin: 0 auto; }
#modal .modal-in > .btn { display: flex; margin: 0 auto; }
#modal .rules { text-align: left; }
.two > label { min-width: 0; }
.form input[type=date], .form input[type=time], .form input[type=datetime-local] { min-width: 0; max-width: 100%; -webkit-appearance: none; appearance: none; min-height: 48px; }
.tabs { flex-wrap: wrap; overflow: visible; }
.tab { flex: 1 1 auto; border-radius: 12px; }
.kidadmin .roletoggle { flex: 0 0 auto; min-width: 210px; }

/* ---------- tempo ---------- */
fieldset.tempo em { font-style: normal; color: var(--red); margin-left: 4px; }
.duration { display: inline-block; margin-top: 6px; background: rgba(0, 0, 0, .25); border-radius: 999px; padding: 2px 12px; font-size: .9rem; }
.tempo-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.tempo-btn { flex: 1 1 auto; border: 2px solid var(--line); background: #fff; border-radius: 14px; padding: .6em .8em; font: 600 .95rem var(--head); cursor: pointer; color: var(--ink); }
.tempo-btn.on { border-color: var(--red); background: var(--red); color: #fff; }
.tempo-btn:disabled { opacity: .5; }
.estimate { font-size: 1.1rem; margin: 12px 0 4px; }
.finetune summary { cursor: pointer; font: 600 .95rem var(--head); color: var(--muted); margin-top: 8px; }
.elapsed { font: 600 .9rem var(--head); background: rgba(255, 255, 255, .15); border-radius: 999px; padding: .25em .7em; }
.elapsed.late { background: var(--red); }
.turbo { font: 700 .9rem var(--head); background: var(--gold); color: var(--ink); border-radius: 999px; padding: 2px 8px; vertical-align: middle; animation: pulse 1s infinite; }

/* ---------- super-admin ---------- */
.totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 18px; }
.tile { background: var(--card); border-radius: 18px; padding: 14px; text-align: center; box-shadow: var(--shadow); display: grid; }
.tile span { font-size: 1.6rem; }
.tile b { font: 700 2rem var(--head); color: var(--red-dark); line-height: 1.1; }
.tile small { color: var(--muted); font-weight: 700; }
@media (min-width: 900px) { .sa-cols { grid-template-columns: 1.6fr 1fr; } }
.fam { border: 2px solid var(--line); border-radius: 18px; padding: 14px; margin-bottom: 12px; }
.fam-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.fam-head b { font: 600 1.15rem var(--head); display: block; }
.fam-head small { color: var(--muted); }
.phase-badge { flex: none; font: 600 .8rem var(--head); border-radius: 999px; padding: 3px 10px; background: #e8e1d6; }
.phase-badge.p-lobby { background: #e3f7ec; color: var(--pine-dark); }
.phase-badge.p-pile, .phase-badge.p-steal, .phase-badge.p-miracle, .phase-badge.p-reveal { background: var(--gold); }
.phase-badge.p-done { background: #eee; color: var(--muted); }
.fam-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px 0 8px; }
.fam-stats small { font-weight: 700; color: var(--muted); font-size: .78rem; }
.bar { height: 8px; border-radius: 999px; background: #f0e6d6; overflow: hidden; margin-top: 3px; }
.bar i { display: block; height: 100%; background: repeating-linear-gradient(-45deg, var(--red) 0 6px, #ef5a6d 6px 12px); border-radius: 999px; }
.fam-meta { font-size: .82rem; color: var(--muted); margin: 6px 0 10px; }
.feed { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; max-height: 640px; overflow-y: auto; }
.feed li { display: flex; gap: 10px; align-items: center; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.feed li > div { display: grid; }
.feed small { color: var(--muted); }
.feed p { margin: 2px 0 0; }
.sa-detail { position: relative; }
.sa-detail .close { position: absolute; top: 16px; right: 50px; z-index: 2; }
.sa-detail h3 { margin-top: 18px; color: var(--red-dark); }
.tablewrap { overflow-x: auto; }
.satable { border-collapse: collapse; width: 100%; font-size: .88rem; }
.satable th { text-align: left; font-size: .75rem; color: var(--muted); text-transform: uppercase; padding: 4px; }
.satable td { padding: 4px; border-top: 1px solid var(--line); vertical-align: middle; }
.gamebar .phase { font-size: clamp(1.25rem, 5.5vw, 1.6rem); line-height: 1.05; }

/* ---------- inloggen ---------- */
.hero-btns { margin-top: 22px; }
.cta-btns { margin: 6px 0 4px; }
.login { position: relative; max-width: 560px !important; }
.login .close, .sa-detail .close { position: absolute; top: 18px; right: 50px; z-index: 2; }
.whoami { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; margin: 14px 0; }
.who { border: 2px solid var(--line); background: #fff; border-radius: 18px; padding: 8px 4px; cursor: pointer; display: flex; flex-direction: column; align-items: center; font: 700 .9rem var(--head); color: var(--ink); }
.who:active, .who:hover { border-color: var(--pine); background: #f2fbf6; }
.who.nologin { opacity: .5; }
.who small { font: 600 .7rem 'Nunito', sans-serif; color: var(--muted); }
.pinput { text-align: center; font: 700 2rem var(--head) !important; letter-spacing: .5em; max-width: 240px; margin: 8px auto 14px !important; display: block; }
.warnbox { background: #fff4d6; border: 2px solid #f6dfae; border-radius: 14px; padding: 10px 12px; margin: 0 0 14px; }
.notme { margin: 12px 0 0; }
.team { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0; }
.mate { display: inline-flex; align-items: center; gap: 4px; background: #fff; border-radius: 999px; padding: 2px 10px 2px 2px; font: 600 .82rem var(--head); box-shadow: 0 1px 0 #bfe6cf; }
label.opt em { font-style: normal; font-size: .72rem; background: var(--pine); color: #fff; border-radius: 999px; padding: 1px 8px; margin-left: 4px; vertical-align: 2px; }

/* ---------- tv-modus ---------- */
#tvbar { position: fixed; right: 16px; bottom: 16px; z-index: 90; display: flex; gap: 8px; transition: opacity .3s; }
#tvbar.hide { opacity: 0; pointer-events: none; }
body.idle, body.idle * { cursor: none !important; }
body.idle #tvbar { opacity: 0; pointer-events: none; }
#tvqr { position: fixed; left: 16px; bottom: 16px; z-index: 44; background: #fff; border-radius: 16px; padding: 10px; display: flex; gap: 10px; align-items: center; box-shadow: 0 0 0 4px var(--gold), var(--shadow); }
#tvqr p { margin: 0; font: 600 .95rem var(--head); color: var(--ink); }
#tvqr .q img, #tvqr .q canvas { display: block; }
.mode-tv .scene-tip { display: none; }
.mode-tv .game { padding-bottom: 180px; }

/* ---------- lobby-verrassingen ---------- */
.speech { position: absolute; bottom: calc(100% - 6px); left: 50%; transform: translateX(-50%); z-index: 5; background: #fff; color: var(--ink); font: 600 .95rem var(--head);
  padding: 8px 12px; border-radius: 16px; width: max-content; max-width: 220px; box-shadow: 0 4px 12px rgba(0, 0, 0, .3); animation: pop .3s; white-space: normal; }
.speech::after { content: ''; position: absolute; top: 100%; left: 50%; margin-left: -8px; border: 8px solid transparent; border-top-color: #fff; }
.mode-tv .speech { font-size: 1.2rem; max-width: 300px; }
.guest.dance { animation: dance .4s ease-in-out infinite alternate !important; }
@keyframes dance { from { transform: translateY(0) rotate(-12deg); } to { transform: translateY(-16px) rotate(12deg); } }
.rudolf { position: absolute; bottom: 70px; left: -80px; font-size: 64px; z-index: 6; animation: run 7s linear forwards; transform: scaleX(-1); }
.rudolf i { position: absolute; left: 4px; top: 30px; width: 12px; height: 12px; border-radius: 50%; background: #ff2a2a; box-shadow: 0 0 14px 6px rgba(255, 40, 40, .8); animation: twinkle .5s infinite alternate; }
@keyframes run { 0% { left: -80px; } 100% { left: calc(100% + 80px); } }
.rudolf { animation: run 7s linear forwards, hop .35s ease-in-out infinite alternate; }
@keyframes hop { to { margin-bottom: 16px; } }
.tvbanner { position: absolute; top: 40px; left: 50%; transform: translateX(-50%); z-index: 7; background: var(--gold); color: var(--ink); font: 600 1.3rem var(--head);
  padding: 12px 22px; border-radius: 18px; box-shadow: 0 6px 20px rgba(0, 0, 0, .4); text-align: center; max-width: 85%; animation: pop .4s; }
.tvbanner small { display: block; font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; opacity: .7; }
.spot { position: fixed; inset: 0; z-index: 85; display: grid; place-items: center; background: radial-gradient(circle, rgba(255, 226, 122, .35), rgba(20, 3, 7, .85) 60%); animation: pop .4s; pointer-events: none; }
.spot-in { text-align: center; color: #fff; }
.spot-in p { font: 700 2.4rem var(--xmas); color: var(--gold-light); margin: 0 0 10px; text-shadow: 0 3px 0 var(--red-dark); }
.spot-in .av { filter: drop-shadow(0 0 30px rgba(255, 226, 122, .8)); animation: bob 1.5s infinite; }
.spot-in h2 { color: #fff; font-size: 2.4rem; }
.present.shake { animation: wiggle-p .25s ease-in-out 8 alternate; }
@keyframes wiggle-p { from { transform: rotate(-10deg) translateY(0); } to { transform: rotate(10deg) translateY(-6px); } }

/* ---------- sneeuwlaag op knoppen (v3): één doorlopende laag die aan de randen afloopt ---------- */
.btn::before {
  top: -8px; left: 14px; right: 14px; height: 18px; border-radius: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 18' preserveAspectRatio='none'%3E%3Cpath d='M0 12 C2 7 8 5 13 7 C17 2 27 1 32 6 C37 2 46 2 50 7 C55 3 65 2 70 6 C75 2 85 2 89 7 C94 3 103 2 108 6 C113 3 122 3 127 7 C132 5 138 7 140 12 L140 13 C136 14 133 13 130 14 C129 18 125 18 124 14 C116 15 104 13 96 14 C94 17 91 17 90 14 C80 15 66 13 56 14 C54 18 50 18 49 14 C38 15 26 13 18 14 C16 16 13 16 12 14 C8 15 3 14 0 13 Z' fill='white'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  /* contour, zodat de sneeuw ook op een lichte kaart zichtbaar blijft */
  filter: drop-shadow(0 0 .6px rgba(70, 105, 145, .9)) drop-shadow(0 1.5px 0 rgba(120, 160, 205, .85));
  opacity: 1;
}
/* sneeuw hangt iets over de randen van de knop */
/* sneeuw alleen op het platte stuk van de pil: niet in de lucht naast de ronde hoeken */
.btn::before { left: .85em; right: .85em; }
.btn.big::before { top: -9px; height: 20px; left: .9em; right: .9em; }
.btn.roll::before { left: 12%; right: 12%; }
/* grote ronde toverknop: sneeuw verder naar binnen, zodat hij niet buiten de ronding uitsteekt */
.btn.elfbtn::before { left: 15%; right: 15%; }
.collapse-head { all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; }
.collapse-head h2 { margin: 0; }
.collapse-head .chev { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 50%; background: #fdeee0; color: var(--red-dark); font-size: 1.2rem; transition: transform .25s; }
.collapsible.open .chev { transform: rotate(180deg); }
.collapse-teaser { margin: 10px 0 0; }
.collapsible.open .collapse-teaser { display: none; }
.collapsible .form:not([hidden]) { animation: pop .35s ease-out; }
#create { scroll-margin-top: 40px; }

/* ---------- sneeuwbank altijd tegen de onderrand ---------- */
/* 2) korte pagina's: footer naar beneden duwen */
body.home #app, #lobby { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body.home #app > .wrap, #lobby > .wrap { width: 100%; }
.foot { margin-top: auto; padding-bottom: calc(70px + env(safe-area-inset-bottom) + var(--ckpad, 0px)); }
/* 3) geen rode "stuiter" onder de sneeuw bij doorscrollen */
html, body { overscroll-behavior-y: none; }

/* ---------- ruimte boven verzendknoppen (de sneeuwlaag steekt erboven uit) ---------- */
.form > .btn { margin-top: 18px; }
.form > .btn.big { display: flex; width: fit-content; margin: 28px auto 4px; }
.form-actions { margin-top: 24px; }
.form > .btn.big { width: 100%; max-width: 420px; white-space: nowrap; font-size: clamp(1rem, 4.6vw, 1.2rem); padding-left: 1em; padding-right: 1em; }
.btn.nosnow::before { display: none; }
.form > .btn.big.nosnow { margin-top: 22px; }
.remtext { display: block; width: 100%; font: 15px/1.45 'Nunito', sans-serif; padding: .8em; border-radius: 14px; border: 2px solid var(--line); background: #f4fbf6; margin: 6px 0 12px; resize: vertical; }
.form label.check { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-top: 14px; }
.form label.check input { width: auto; margin: 0; accent-color: var(--red); transform: scale(1.25); }

/* ---------- testweergave (host bekijkt als speler) ---------- */
#previewbar { position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: 95; background: var(--gold); color: var(--ink); font: 700 .9rem var(--body, inherit); padding: 6px 14px; border-radius: 0 0 14px 14px; box-shadow: var(--shadow); white-space: nowrap; }
#previewbar .linkbtn { margin-left: 8px; }

/* ---------- tv: schermvullend (alles wordt via zoom meegeschaald, --tvz) ---------- */
.mode-tv .tv-lobby { min-height: calc(100vh / var(--tvz, 1)); }
.mode-tv .game { padding-bottom: 24px !important; }
/* groot scherm (tv-modus of spel op een groot scherm): spel verticaal gecentreerd, beurtkaart even hoog als de tafel */
.wide .game { min-height: calc(100vh / var(--tvz, 1) - 104px); align-items: stretch; align-content: center; }
.wide.mode-play .game { min-height: calc(100vh / var(--tvz, 1) - 96px); padding-bottom: 84px; }
.wide .col-a { display: flex; flex-direction: column; }
.wide .col-a > .turn { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.mode-tv .gamebar { padding-top: 26px; padding-bottom: 6px; }
.barqr { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--ink); border-radius: 12px; padding: 4px 10px 4px 4px; font: 600 .8rem/1.15 var(--head); box-shadow: 0 0 0 3px var(--gold); }
.barqr img { width: 64px; height: 64px; display: block; border-radius: 6px; }
.wide .die { width: 160px; height: 160px; padding: 18px; border-width: 4px; }
.wide .die-emoji { font-size: 4.8rem; }
.wide .turn-name { font-size: 3rem; }
.wide .turn { padding: 36px 56px 30px; }
.wide .game { padding: 28px 56px; gap: 40px; }
.wide .stage { margin: 22px 0 8px; gap: 18px; }
.wide .result { margin-top: 12px; padding-top: 16px; }
.wide .log li { font-size: 1.05rem; }
.gamebar .fullbtn { display: none; }
@media (hover: hover) and (pointer: fine) { .gamebar .fullbtn { display: inline-flex; } }
.wide .col-b .log { display: none; }

/* ---------- tv koppelen ---------- */
.tvpair { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #fff; padding: 30px 16px; position: relative; z-index: 2; }
.tvpair .xmas-title { font-size: clamp(2.6rem, 7vw, 5rem); margin: 0 0 6px; }
.tvpair .sub { margin: 0 0 22px; }
.pinboxes { display: flex; gap: 12px; margin-bottom: 24px; }
.pinboxes span { width: clamp(48px, 7vw, 84px); height: clamp(62px, 9vw, 104px); border-radius: 16px; background: rgba(255, 255, 255, .12); border: 3px solid rgba(255, 255, 255, .3); display: grid; place-items: center; font: 700 clamp(2rem, 5vw, 3.4rem) var(--head); }
.pinboxes span.on { background: #fff; color: var(--red-dark); border-color: var(--gold); }
.pinboxes span:nth-child(3) { margin-right: 14px; }
.keypad { display: grid; grid-template-columns: repeat(3, clamp(70px, 9vw, 110px)); gap: 12px; }
.keypad button { height: clamp(58px, 7vw, 86px); border: 0; border-radius: 18px; background: rgba(255, 255, 255, .14); color: #fff; font: 700 clamp(1.5rem, 3vw, 2.2rem) var(--head); cursor: pointer; }
.keypad button:focus-visible, .keypad button:hover { outline: 4px solid var(--gold); background: rgba(255, 255, 255, .25); }
.keypad button[data-k="✓"] { background: var(--green, #1b7f4b); }
#tverr { min-height: 1.5em; margin-top: 18px; font-size: 1.2rem; }
.tvcode-box { display: grid; justify-items: center; gap: 2px; background: #fff8e6; border: 3px dashed var(--gold); border-radius: 18px; padding: 14px; margin: 6px 0 14px; text-align: center; }
.tvcode-box .tvurl { font: 700 1.3rem var(--head); color: var(--red-dark); }
.tvcode-box .tvcode { font: 700 2.4rem var(--head); letter-spacing: .08em; color: var(--ink); }
.tvways { padding-left: 1.2em; margin: 0 0 10px; }
.tvways li { margin-bottom: 10px; line-height: 1.45; }
.tag-best { display: inline-block; background: var(--green, #1b7f4b); color: #fff; border-radius: 999px; padding: 0 8px; font-size: .75rem; font-weight: 700; vertical-align: 2px; }
.seat-name .off { font-size: .8em; }
.tvcode-inline { font: 700 1.2em var(--head); letter-spacing: .06em; color: var(--red-dark); white-space: nowrap; }

/* ---------- sfeer per ronde ---------- */
/* ronde 2: Kerstchaos op de Noordpool — ijsblauw met noorderlicht */
body.phase-steal {
  background-color: #08182c;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cg stroke='%23ffffff' stroke-width='1.4' stroke-linecap='round' opacity='.13'%3E%3Cpath d='M22 12v16M15 16l14 8M15 24l14-8'/%3E%3Cpath d='M67 55v12M62 58l10 6M62 64l10-6'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(ellipse at top, #2f74a8 0%, #174069 38%, #08182c 100%);
}
body.phase-steal::before, body.phase-miracle::before, body.phase-reveal::before, body.phase-done::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -1; }
body.phase-steal::before {
  background: radial-gradient(ellipse 60% 30% at 25% 8%, rgba(80, 255, 190, .22), transparent 70%), radial-gradient(ellipse 50% 26% at 75% 4%, rgba(120, 160, 255, .22), transparent 70%);
  animation: aurora 9s ease-in-out infinite alternate;
}
@keyframes aurora { from { transform: translateX(-4%) skewX(-6deg); opacity: .7; } to { transform: translateX(4%) skewX(6deg); opacity: 1; } }
.phase-steal .gamebar { background: linear-gradient(180deg, rgba(8, 24, 44, .96), rgba(8, 24, 44, .85)); border-image: repeating-linear-gradient(-45deg, #5fb4ff 0 10px, #fff 10px 20px) 4; }
.phase-steal .gamebar .phase { color: #c9ecff; text-shadow: 0 0 18px rgba(120, 200, 255, .6); }
.phase-steal .turn:not(.elfturn)::before { background: repeating-linear-gradient(-45deg, #3a9be8 0 12px, #fff 12px 24px); }
.phase-steal .turn:not(.elfturn) { box-shadow: 0 0 0 3px rgba(150, 210, 255, .35), var(--shadow); }
.phase-steal .table { border-color: rgba(150, 210, 255, .45); }
.phase-steal #lights i:nth-child(odd) { --c: #8fd3ff !important; }
.phase-steal #lights i:nth-child(even) { --c: #e9f7ff !important; }
/* finale: sterrenhemel met goud */
body.phase-miracle, body.phase-reveal, body.phase-done {
  background-color: #0a0820;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='70'%3E%3Cpath d='M18 10l1.6 4 4 .4-3 2.8 1 4-3.6-2.2-3.6 2.2 1-4-3-2.8 4-.4z' fill='%23ffd65a' opacity='.22'/%3E%3Ccircle cx='52' cy='44' r='1.4' fill='%23fff' opacity='.5'/%3E%3Ccircle cx='38' cy='62' r='1' fill='%23fff' opacity='.4'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at top, #4a3486 0%, #23185a 40%, #0a0820 100%);
}
body.phase-miracle::before, body.phase-reveal::before, body.phase-done::before { background: radial-gradient(circle at 50% 35%, rgba(255, 210, 90, .18), transparent 55%); animation: glow 4s ease-in-out infinite alternate; }
@keyframes glow { from { opacity: .6; } to { opacity: 1; } }
.phase-miracle .gamebar, .phase-reveal .gamebar, .phase-done .gamebar { background: linear-gradient(180deg, rgba(14, 10, 40, .96), rgba(14, 10, 40, .85)); border-image: repeating-linear-gradient(-45deg, var(--gold) 0 10px, #fff6d5 10px 20px) 4; }
@media (prefers-reduced-motion: reduce) { body::before { animation: none !important; } }

/* ---------- melding midden in beeld (rondewissel / cadeau verhuist) ---------- */
#overlay { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: rgba(10, 5, 20, .55); backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity .35s; }
#overlay.show { opacity: 1; pointer-events: auto; }
#overlay .ov-card { zoom: var(--tvz, 1); background: var(--card); border-radius: 28px; padding: 30px 40px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); text-align: center; max-width: min(900px, 92vw); transform: scale(.85) translateY(20px); transition: transform .45s cubic-bezier(.3, 1.5, .5, 1); position: relative; overflow: hidden; }
#overlay.show .ov-card { transform: none; }
#overlay .ov-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 12px; background: repeating-linear-gradient(-45deg, var(--red) 0 14px, #fff 14px 28px); }
#overlay.ov-steal .ov-card::before { background: repeating-linear-gradient(-45deg, #3a9be8 0 14px, #fff 14px 28px); }
#overlay.ov-miracle .ov-card::before { background: repeating-linear-gradient(-45deg, var(--gold) 0 14px, #fff 14px 28px); }
.ov-banner .ov-icon { font-size: 4.5rem; line-height: 1; margin-top: 8px; animation: pop .6s ease-out; }
.ov-banner h1 { font-size: clamp(2.4rem, 6vw, 4rem); color: var(--red-dark); margin: 6px 0; }
.ov-steal h1 { color: #1d5f99; }
.ov-miracle h1 { color: #8a6400; }
.ov-banner p { font: 600 1.25rem var(--head); color: var(--muted); margin: 0; }
.ov-moves h2 { font-size: 2rem; margin: 6px 0 16px; }
.ov-moves .ov-hint { font: 600 1.1rem var(--head); color: var(--muted); margin: 14px 0 0; }
.mv-list { display: grid; gap: 10px; justify-items: center; margin: 12px 0 4px; }
.mv-list.many { grid-template-columns: repeat(2, auto); justify-content: center; }
.mv-list.lots { grid-template-columns: repeat(3, auto); }
.mv-row { display: flex; align-items: center; gap: 12px; background: #fff8e6; border-radius: 16px; padding: 8px 14px; animation: pop .4s ease-out backwards; }
.mv-row:nth-child(2) { animation-delay: .1s; } .mv-row:nth-child(3) { animation-delay: .2s; } .mv-row:nth-child(4) { animation-delay: .3s; }
.mv-gift { display: inline-flex; align-items: center; gap: 4px; background: var(--red); color: #fff; border-radius: 12px; padding: 4px 10px; font: 700 1.05rem var(--head); white-space: nowrap; }
.mv-who { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; min-width: 56px; }
.mv-who b { font: 600 .85rem var(--head); white-space: nowrap; max-width: 9em; overflow: hidden; text-overflow: ellipsis; }
.mv-pile { display: grid; place-items: center; width: 34px; height: 34px; font-size: 1.6rem; }
.mv-arrow { font-size: 1.4rem; color: var(--red); }
.ov-moves .mv-row { padding: 12px 22px; gap: 22px; }
.ov-moves .mv-gift { font-size: 1.8rem; padding: 8px 16px; border-radius: 16px; }
.ov-moves .mv-who b { font-size: 1.25rem; }
.ov-moves .mv-pile { width: 72px; height: 72px; font-size: 3.2rem; }
.ov-moves .mv-list.many .mv-pile { width: 44px; height: 44px; font-size: 2rem; }
.ov-moves .mv-arrow { font-size: 2.4rem; animation: nudge 1s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateX(8px); } }
.ov-moves .mv-list.many .mv-row { padding: 8px 14px; gap: 14px; }
.ov-moves .mv-list.many .mv-gift { font-size: 1.3rem; }
.ov-moves .mv-list.many .mv-who b { font-size: 1rem; }
.wide .mv-gift { font-size: 1.3rem; }
.wide .mv-who b { font-size: 1.05rem; }
.phase-miracle .turn::before, .phase-reveal .turn::before, .phase-done .turn::before { background: repeating-linear-gradient(-45deg, var(--gold) 0 12px, #fff 12px 24px); }

/* ---------- homepage: tweede regel ---------- */
.hero .sub2 { margin: -4px 0 18px; font: 600 clamp(1rem, 3.6vw, 1.25rem) var(--head); color: var(--gold-light); }

/* ---------- aftelling bij de start ---------- */
.ov-count .ov-card { min-width: min(640px, 90vw); }
.ov-pre { font: 700 1.2rem var(--head); color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin: 10px 0 4px; }
.ov-count h1 { font-size: clamp(2.4rem, 6vw, 3.8rem); color: var(--red-dark); margin: 6px 0 10px; }
.ov-num { font: 700 9rem/1 var(--head); color: var(--red); margin: 6px 0 14px; animation: countpop .8s ease-out; text-shadow: 0 6px 0 rgba(0, 0, 0, .08); }
@keyframes countpop { 0% { transform: scale(2.2); opacity: 0; } 35% { transform: scale(.92); opacity: 1; } 60% { transform: scale(1.05); } 100% { transform: scale(1); } }
.ov-count .ov-icon { font-size: 4rem; animation: pop .6s ease-out; margin-top: 10px; }

/* ---------- grote momenten: stempel boven de verhuismelding ---------- */
.ov-stamp { display: inline-block; font: 700 clamp(2.6rem, 6vw, 4.2rem)/1 var(--head); color: var(--red); border: 6px solid currentColor; border-radius: 18px; padding: 8px 22px; margin: 8px 0 4px; transform: rotate(-5deg); animation: stamp .55s cubic-bezier(.3, 1.6, .5, 1); letter-spacing: .03em; }
.ov-stamp.snow { color: #2a7fc4; transform: none; border-style: dashed; animation: stamp .55s cubic-bezier(.3, 1.6, .5, 1), shiver .18s linear .55s 6; }
.ov-stamp.swap { color: #8a4bd6; }
.ov-stamp.elf { color: var(--pine); }
@keyframes stamp { 0% { transform: scale(3) rotate(-14deg); opacity: 0; } 60% { opacity: 1; } 100% { transform: scale(1) rotate(-5deg); } }
@keyframes shiver { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.ov-moves .ov-stamp + h2 { font-size: 1.5rem; color: var(--muted); }

/* ---------- elfjesbeurt: gouden gloed ---------- */
.turn.elfturn { animation: elfglow 1.6s ease-in-out infinite alternate; }
@keyframes elfglow { from { box-shadow: 0 0 0 3px rgba(242, 183, 5, .5), 0 0 24px 4px rgba(255, 214, 90, .35), var(--shadow); } to { box-shadow: 0 0 0 5px rgba(242, 183, 5, .9), 0 0 60px 16px rgba(255, 214, 90, .6), var(--shadow); } }

/* ---------- geluid/muziek-knoppen ---------- */
.iconbtn.off { opacity: .55; }
#tvbar .btn.on { border-color: var(--gold); color: var(--gold-light); }

/* ---------- minder beweging gewenst ---------- */
@media (prefers-reduced-motion: reduce) {
  #overlay .ov-card, #overlay { transition: none; }
  .ov-stamp, .ov-stamp.snow, .ov-num, .ov-count .ov-icon, .ov-banner .ov-icon, .mv-row, .ov-moves .mv-arrow, .turn.elfturn, .die.land, .btn.roll, .turn.mine .turn-label { animation: none !important; }
}

/* contactformulier */
.form label.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
#modal .contact .logo { text-align: center; }
.badge-new { display: inline-block; background: var(--red); color: #fff; font: 700 .75rem/1 Nunito, sans-serif; padding: 5px 9px; border-radius: 999px; vertical-align: middle; }
.feed.contacts li { display: block; }
.feed.contacts li p { white-space: pre-wrap; margin: 6px 0 8px; }
.feed.contacts li.done { opacity: .6; }
.feed.contacts a { font-size: .85rem; }
.feed.contacts li > div { display: block; }
.feed.contacts small { display: block; }

/* startpagina: één ondertitel */
.hero .sub2.solo { margin: .7em auto 18px; max-width: 30ch; }
.demo-link { margin-top: 16px; }
/* demo-pagina */
.demo-step h2 { display: flex; align-items: center; gap: 10px; }
.demo-n { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--red); color: #fff; font-size: 1.05rem; }
.demo-shots { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; align-items: flex-start; margin-top: 14px; }
.shot { padding: 0; border: 0; background: #1d1012; cursor: zoom-in; overflow: hidden; box-shadow: 0 10px 28px rgba(0, 0, 0, .28); transition: transform .2s; }
.shot:hover { transform: translateY(-3px); }
.shot img { display: block; width: 100%; height: auto; }
.shot.phone { width: min(240px, 44%); border-radius: 26px; border: 6px solid #1d1012; }
.shot.phone img { border-radius: 20px; }
.shot.tv { width: min(100%, 640px); border-radius: 12px; border: 6px solid #1d1012; border-bottom-width: 14px; }
.demo-shots .shot.tv:only-child { width: 100%; max-width: 860px; }
#modal .shot-big { max-width: min(96vw, 1280px); background: none; box-shadow: none; padding: 0; position: relative; }
#modal .shot-big img { display: block; max-width: 100%; max-height: 90vh; margin: 0 auto; border-radius: 14px; }
#modal .shot-big .close { position: absolute; top: 8px; right: 8px; z-index: 1; }
@media (max-width: 520px) { .shot.phone { width: calc(50% - 8px); border-width: 4px; border-radius: 18px; } .shot.phone img { border-radius: 14px; } }

/* ---------- mobiel (v20): ruimte tussen gestapelde sneeuwknoppen, smalle spelbalk, nette footer ---------- */
/* knoppen met sneeuw die onder elkaar vallen: sneeuw (±9px) + schaduw (4px) mag de knop erboven niet raken */
.row:has(> .btn:not(.small):not(.ghost):not(.nosnow)) { row-gap: 24px; }
.foot { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: 14px; row-gap: 6px; }
.foot .sep { display: none; }
.foot > .snowbank { flex: none; }
@media (max-width: 480px) {
  .gamebar { gap: 5px; padding-left: 10px; padding-right: 10px; }
  .gamebar { flex-wrap: wrap; row-gap: 6px; }
  .gamebar .phase { min-width: 45%; flex: 1 1 auto; font-size: clamp(1.05rem, 5vw, 1.4rem); }
  .gamebar .elapsed { order: 10; }
  .gamebar .turbo { display: inline-block; font-size: .7rem; padding: 1px 6px; }
  .gamebar .iconbtn { font-size: 1rem; padding: .3em .38em; border-radius: 10px; flex: none; }
  .gamebar .elapsed, .gamebar .timer { flex: none; white-space: nowrap; font-size: .78rem; padding: .25em .55em; }
  .gamebar .timer { font-size: .95rem; }
}
/* ---------- SEO-kop op de startpagina: logo + ondertitel in één H1 ---------- */
.home-h1 { margin: 0; display: flex; flex-direction: column; align-items: center; }
.home-h1 .h1-sub { font: 700 clamp(.85rem, 3.6vw, 1.05rem) var(--head); color: #ffe9b0; letter-spacing: .14em; text-transform: uppercase; margin-top: 6px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.card.about h2 { font-size: 1.2rem; }
.card.about p { margin-bottom: 0; }
/* footerlinks zonder onderstreping; bij aanwijzen een subtiele lijn */
.foot a, .foot .linkbtn { text-decoration: none; }
.foot a:hover, .foot .linkbtn:hover, .foot a:focus-visible, .foot .linkbtn:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
/* ---------- uitnodigen per mail (host) ---------- */
#adm-invite .row { margin-top: 4px; }
.feed.invites { list-style: none; padding: 0; margin: 10px 0 0; }
.feed.invites li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.inv-who { display: flex; flex-direction: column; min-width: 0; }
.inv-who small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-st { font-size: .85rem; margin-top: 2px; }
.inv-st.ok { color: var(--pine); font-weight: 700; }
.inv-st.bad { color: var(--red); font-weight: 700; }
.inv-btns { display: flex; align-items: center; gap: 8px; flex: none; }
.feed.invites li { border-bottom: 0; padding-bottom: 10px; }
.feed.invites li > .inv-btns { display: flex; }
.feed.invites li > .inv-who { display: flex; }
.inv-btns .iconbtn.x { width: 34px; height: 34px; padding: 0; border-radius: 50%; }
/* ---------- koekjesbanner ---------- */
#cookiebar { position: fixed; z-index: 90; right: calc(16px + env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); width: min(400px, calc(100% - 24px));
  display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: center; padding: 12px 14px; border-radius: 18px;
  background: #fffdf7; color: var(--ink); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); border: 2px solid #f2dfb0;
  font-size: .88rem; line-height: 1.4; transform: translateY(140%); opacity: 0; transition: transform .45s cubic-bezier(.2, 1.4, .4, 1), opacity .3s; }
#cookiebar.show { transform: translateY(0); opacity: 1; }
@media (max-width: 480px) { #cookiebar { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); } }
#cookiebar .ck-cookie { font-size: 2rem; animation: ck-wobble 2.4s ease-in-out infinite; }
#cookiebar .ck-txt b { color: var(--red-dark); font-family: var(--head); }
#cookiebar .ck-btns { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
#cookiebar button { border: 0; cursor: pointer; font: 600 .85rem var(--head); border-radius: 999px; padding: .5em 1em; }
#cookiebar .ck-yes { background: var(--red); color: #fff; box-shadow: 0 3px 0 var(--red-dark); }
#cookiebar .ck-no { background: transparent; color: var(--muted); padding-left: .4em; padding-right: .4em; text-decoration: underline; text-underline-offset: 3px; }
@keyframes ck-wobble { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(10deg) scale(1.06); } }
@media (prefers-reduced-motion: reduce) { #cookiebar, #cookiebar .ck-cookie { animation: none; transition: none; } }
/* Kleedkamer: niet de kaart zelf laten scrollen (.card.candy heeft overflow: hidden en won daarvan,
   waardoor je op de telefoon niet bij de knoppen kon); het hele venster scrollt nu */
#modal .dressing { max-height: none; overflow: hidden; }
#modal { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
/* ---------- grote startknop voor de host (lobby) ---------- */
.card.hoststart { text-align: center; background: linear-gradient(180deg, #fff8dc, #fff1b8); border: 3px solid var(--gold); padding-top: 16px; }
.hs-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.hs-badge { font: 700 .9rem var(--head); background: var(--ink); color: var(--gold-light); padding: .3em .8em; border-radius: 999px; }
.hs-admin { font-weight: 700; color: var(--red-dark); text-decoration: none; }
.hs-count { margin: 12px 0 0; font-size: 1.05rem; }
.btn.hs-start { margin: 22px auto 6px; font-size: clamp(1.15rem, 5.5vw, 1.45rem); padding: 1em 2em; display: flex; width: fit-content; max-width: 100%; }
.hs-note { color: #6b5a3a; margin: 8px auto 0; max-width: 420px; }
/* koekjesbanner onder vensters (zoals de Kleedkamer), maar boven de pagina */
#cookiebar { z-index: 45; }
/* ---------- terug naar de startpagina ---------- */
.homechip { position: absolute; z-index: 3; top: 40px; left: 12px; display: inline-flex; align-items: center; gap: 4px; padding: .3em .75em; border-radius: 999px;
  background: rgba(0, 0, 0, .28); color: #fff; text-decoration: none; font: 600 .82rem var(--head); backdrop-filter: blur(4px); }
.homechip:hover, .homechip:focus-visible { background: rgba(0, 0, 0, .45); }
.hero.small:has(.homechip) { padding-top: 74px; }
.lobby-hero:has(.homechip) .hero-in { padding-top: 6px; }
/* ---------- kerstcode vergeten ---------- */
.login .forgot { margin: 14px 0 4px; }
.forgot-ok { background: #eefaf3; border: 2px solid #bfe6cf; border-radius: 14px; padding: 10px 12px; margin: 12px 0 4px; }
.form input.invalid, .form textarea.invalid { border-color: var(--red); box-shadow: 0 0 0 3px rgba(215, 38, 61, .2); }
/* ---------- soepeler scrollen op telefoons ---------- */
body { overflow-x: clip; }
@media (hover: none) { body { background-attachment: scroll; } }
@media (max-width: 700px) { .wall, .feed { max-height: none; overflow: visible; } }
/* ---------- volgend jaar weer ---------- */
.newround { background: linear-gradient(180deg, #fff8dc, #fffdf7); border: 3px solid var(--gold); }
.nr-list { list-style: none; padding: 0; margin: 10px 0 4px; display: grid; gap: 8px; font-size: .95rem; }
.finale .again { margin-top: 24px; }
.finale .again .btn { margin-top: 18px; }
/* ---------- meerdere cadeaus ---------- */
.giftcount { border: 0; padding: 0; margin: 10px 0 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.giftcount legend { font-weight: 700; margin-bottom: 8px; padding: 0; }
.giftcount label { margin: 0; cursor: pointer; }
.giftcount input { position: absolute; opacity: 0; pointer-events: none; }
.giftcount span { display: inline-flex; align-items: center; gap: 6px; padding: .5em .9em; border-radius: 14px; border: 2px solid var(--line); background: #fff; font-size: 1.05rem; }
.giftcount span b { font: 700 1.1rem var(--head); }
.giftcount input:checked + span { border-color: var(--red); background: #fff0f0; box-shadow: 0 0 0 3px rgba(215, 38, 61, .15); }
.giftcount input:focus-visible + span { outline: 3px solid var(--gold); }
.xhint[hidden] { display: none; }
.tagnum.multi { display: inline-flex; flex-direction: column; gap: 2px; padding: 4px 6px; height: auto; }
.tagnum.multi i { font-style: normal; font-size: .85em; line-height: 1.1; }
/* ---------- vensters (modals) verticaal in het midden; lange vensters scrollen gewoon ---------- */
#modal:not([hidden]) { display: flex; flex-direction: column; padding: 24px 12px; }
#modal > .modal-in { margin: auto; width: 100%; }
#modal > .shot-big { width: auto; }
/* ---------- kerstcode-invoer bij inloggen: groot en duidelijk ---------- */
.login .pinput { font: 700 2.2rem var(--head) !important; letter-spacing: .45em; text-indent: .45em; max-width: 260px; width: 100%; padding: .45em .3em !important;
  border: 3px solid var(--gold) !important; border-radius: 18px !important; background: #fffbea !important; box-shadow: 0 4px 0 #e2c35b, inset 0 2px 4px rgba(0, 0, 0, .06); margin: 10px auto 18px !important; }
.login .pinput:focus { outline: none; border-color: var(--red) !important; box-shadow: 0 4px 0 var(--red-dark), 0 0 0 5px rgba(215, 38, 61, .18); }
.login label.form { font-weight: 700; font-size: 1.05rem; }
/* ---------- spelverslag inklapbaar ---------- */
.log-more { margin-top: 4px; }
.log-more summary { cursor: pointer; color: var(--gold-light); font: 600 .9rem var(--head); padding: 6px 0; list-style: none; }
.log-more summary::-webkit-details-marker { display: none; }
.log-more summary::before { content: '▸ '; }
.log-more[open] summary::before { content: '▾ '; }
/* ---------- spelscherm op telefoons compacter: 3 spelers per rij ---------- */
@media (max-width: 480px) {
  .mode-play .seats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .mode-play .seat { padding: 6px 3px; border-radius: 12px; }
  .mode-play .seat > svg, .mode-play .seat > .av { width: 44px !important; height: 44px !important; }
  .mode-play .seat-name { font-size: .78rem; margin: 1px 0 3px; }
  .mode-play .seat-gifts { min-height: 22px; gap: 3px; }
  .mode-play .seat.active { transform: none; }
}
.numnote { background: #fff1b8; border: 2px solid var(--gold); border-radius: 14px; padding: 10px 12px; margin: 10px 0 12px; }
/* ---------- verlanglijstje (link en/of tekst) ---------- */
.wishtext { white-space: pre-wrap; background: #f4fbf6; border: 2px solid #bfe6cf; border-radius: 12px; padding: 8px 10px; margin: 6px 0; font-size: .92rem; color: var(--ink); }
.elflist .wishbtn { margin-top: 6px; }
.elflist li > div { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.wishmodal { max-width: 560px !important; position: relative; }
.wishmodal .close { position: absolute; top: 18px; right: 50px; }

/* =====================================================================
   SINTDOBBEL — nachtelijke daken, rood en goud, pepernoten
   ===================================================================== */
:root[data-theme="sint"] {
  --velvet: #22306a;
  --velvet-dark: #0d1433;
  --pine: #6a2c91;
  --pine-dark: #4a1d66;
  --xmas: 'Lobster', 'Fredoka', cursive;
}
:root[data-theme="sint"] body {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cpath d='M20 12 l2 5 5 .5-4 3.5 1.3 5-4.3-2.8-4.3 2.8 1.3-5-4-3.5 5-.5z' fill='%23ffd23f' opacity='.18'/%3E%3Ccircle cx='66' cy='58' r='1.6' fill='%23fff' opacity='.35'/%3E%3Ccircle cx='40' cy='76' r='1' fill='%23fff' opacity='.3'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at top, #34459a 0%, var(--velvet) 38%, var(--velvet-dark) 100%);
}
/* vlaggetjes in plaats van lampjes */
:root[data-theme="sint"] #lights .wire path { stroke: #e8d6a8; }
:root[data-theme="sint"] #lights i.flag { top: 8px; width: 18px; height: 20px; margin-left: -9px; border-radius: 0; background: var(--c); box-shadow: none;
  clip-path: polygon(0 0, 100% 0, 50% 100%); animation: flutter 1.6s ease-in-out infinite alternate; transform-origin: 50% 0; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .3)); }
:root[data-theme="sint"] #lights i.flag::before { display: none; }
@keyframes flutter { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
/* kaarten: pepernoot in de hoek i.p.v. hulst */
:root[data-theme="sint"] .card.candy::after { content: '🍪'; transform: rotate(-12deg); filter: none; font-size: 24px; }
/* knoppen: geen sneeuwlaag maar een gouden randje */
:root[data-theme="sint"] .btn::before { display: none; }
:root[data-theme="sint"] .btn:not(.ghost):not(.small) { box-shadow: 0 4px 0 var(--red-dark), 0 0 0 2px rgba(255, 210, 63, .55) inset, 0 6px 14px rgba(0, 0, 0, .25); }
:root[data-theme="sint"] .btn.green:not(.ghost):not(.small) { box-shadow: 0 4px 0 var(--pine-dark), 0 0 0 2px rgba(255, 210, 63, .55) inset, 0 6px 14px rgba(0, 0, 0, .25); }
:root[data-theme="sint"] .btn.gold:not(.ghost):not(.small) { box-shadow: 0 4px 0 #b78a00, 0 6px 14px rgba(0, 0, 0, .25); }
:root[data-theme="sint"] .row:has(> .btn:not(.small):not(.ghost):not(.nosnow)) { row-gap: 14px; }
/* footer: daken met schoorstenen en verlichte ramen i.p.v. sneeuwheuvels */
:root[data-theme="sint"] .snowbank {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 70' preserveAspectRatio='none'%3E%3Cpath d='M0 70 L0 40 L30 18 L60 40 L60 34 L72 34 L72 20 L84 20 L84 34 L110 34 L150 8 L190 34 L190 44 L215 26 L240 44 L240 30 L262 30 L262 16 L276 16 L276 30 L300 30 L340 12 L380 30 L380 40 L410 22 L440 40 L440 28 L470 28 L470 14 L484 14 L484 28 L500 28 L540 6 L580 28 L600 28 L600 70 Z' fill='%23080c22'/%3E%3Crect x='140' y='38' width='9' height='10' fill='%23ffd23f' opacity='.85'/%3E%3Crect x='155' y='38' width='9' height='10' fill='%23ffd23f' opacity='.55'/%3E%3Crect x='330' y='40' width='9' height='10' fill='%23ffd23f' opacity='.8'/%3E%3Crect x='530' y='36' width='9' height='10' fill='%23ffd23f' opacity='.7'/%3E%3Crect x='24' y='48' width='9' height='9' fill='%23ffd23f' opacity='.6'/%3E%3Crect x='420' y='50' width='9' height='9' fill='%23ffd23f' opacity='.75'/%3E%3C/svg%3E") 0 0 / 100% 64px no-repeat,
    linear-gradient(#080c22, #080c22) 0 63px / 100% 100% no-repeat;
}
:root[data-theme="sint"] .snowbank::after { content: ''; }
:root[data-theme="sint"] .foot { color: rgba(255, 255, 255, .9); }
/* titel in Lobster is wat breder: iets kleiner */
:root[data-theme="sint"] .xmas-title { letter-spacing: .01em; font-size: clamp(2.6rem, 12vw, 4.6rem); }
:root[data-theme="sint"] .hero.small .xmas-title { font-size: clamp(2.1rem, 9vw, 3rem); }
:root[data-theme="sint"] .sleigh { filter: drop-shadow(0 0 8px rgba(255, 210, 63, .6)); }
:root[data-theme="sint"] .btn.green { background: linear-gradient(180deg, #8a45b8, var(--pine)); }
/* ---------- voorbereiding: los invullen ---------- */
.todo li { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.todo .todo-btn { font-weight: 700; color: var(--red-dark); white-space: nowrap; }
.todo li.ok .todo-btn { font-weight: 600; color: var(--muted); }
.form .later { background: #eef6ff; border: 2px solid #c9def5; border-radius: 14px; padding: 10px 12px; margin: 8px 0 12px; }
.todo .todo-btn { margin-left: 1.65em; text-decoration: none; padding: 2px 0; }
.todo li:not(.ok) .todo-btn { background: #fff1b8; border-radius: 999px; padding: 3px 10px; }
/* lobbyscène: warm rood behang met gouden mijtertjes, schilderij van de stoomboot, paard op het dak */
:root[data-theme="sint"] .scene { background: #5a0b17; }
:root[data-theme="sint"] .room { background:
    radial-gradient(circle at 50% 110%, rgba(255, 190, 90, .45), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cpath d='M22 12 L22 6 Q24 3 26 1 Q28 3 30 6 L30 12 Z' fill='%23f2b705' opacity='.16' transform='translate(-4 14)'/%3E%3C/svg%3E") 0 0 / 44px 44px,
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 22px, transparent 22px 44px),
    linear-gradient(180deg, #8a1a2a, #5a0b17); }
:root[data-theme="sint"] .painting { position: absolute; left: 5%; top: 40px; width: 92px; height: 66px; padding: 5px; background: linear-gradient(135deg, #f2b705, #b78a00); border-radius: 4px; box-shadow: 0 4px 10px rgba(0, 0, 0, .35); }
:root[data-theme="sint"] .painting svg { display: block; width: 100%; height: 100%; }
:root[data-theme="sint"] .window.sintwin { box-shadow: none; }
:root[data-theme="sint"] .window.sintwin svg { position: absolute; inset: 0; width: 100%; height: 100%; }
:root[data-theme="sint"] .sinthorse { filter: drop-shadow(0 0 10px rgba(255, 255, 255, .5)); }
:root[data-theme="sint"] .sinthorse .horse { vertical-align: middle; transform: scaleX(-1); }
:root[data-theme="sint"] .sinthorse .legs { animation: gallop .35s ease-in-out infinite alternate; transform-origin: 60px 52px; }
:root[data-theme="sint"] .sinthorse em { margin-left: 4px; }
:root[data-theme="sint"] .tv-left { container-type: inline-size; }
:root[data-theme="sint"] .tv-lobby .xmas-title { font-size: clamp(2.4rem, 4.6vw, 5rem); font-size: min(16cqw, 5.6rem); white-space: nowrap; }

/* ---------- Sint: mijterband i.p.v. zuurstokstrepen ---------- */
:root[data-theme="sint"] {
  /* Sinterklaas-inpakpapier: rood lint met gouden randjes en mijters, pepernoten en chocoladeletters */
  --mitre-band:
    linear-gradient(#f2b705, #f2b705) 0 0 / 100% 2px no-repeat,
    linear-gradient(#f2b705, #f2b705) 0 100% / 100% 2px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54' height='16' viewBox='0 0 54 16'%3E%3Cpath d='M5 13 L5 7 Q7 4 9 3 Q11 4 13 7 L13 13 Z' fill='%23fff'/%3E%3Crect x='4.6' y='11' width='8.8' height='2.2' fill='%23f2b705'/%3E%3Cpath d='M9 5.5 L9 10.5 M7.2 7.4 L10.8 7.4' stroke='%23f2b705' stroke-width='1.1'/%3E%3Ccircle cx='24' cy='8.5' r='3' fill='%23b0703a'/%3E%3Ccircle cx='23.2' cy='7.6' r='1.2' fill='%23d9a066'/%3E%3Ctext x='41' y='13' text-anchor='middle' font-family='Arial Black,Arial' font-weight='900' font-size='11' fill='%235a3418' stroke='%23f2b705' stroke-width='.35'%3ES%3C/text%3E%3C/svg%3E") 0 50% / 54px 16px repeat-x,
    linear-gradient(#c8102e, #a10d25);
}
:root[data-theme="sint"] .card.candy::before, :root[data-theme="sint"] .turn::before, :root[data-theme="sint"] #overlay .ov-card::before,
:root[data-theme="sint"] .phase-steal .turn:not(.elfturn)::before, :root[data-theme="sint"] .phase-miracle .turn::before,
:root[data-theme="sint"] .phase-reveal .turn::before, :root[data-theme="sint"] .phase-done .turn::before,
:root[data-theme="sint"] #overlay.ov-steal .ov-card::before, :root[data-theme="sint"] #overlay.ov-miracle .ov-card::before { background: var(--mitre-band); height: 18px; }
:root[data-theme="sint"] .turn.elfturn::before { background: linear-gradient(#f2b705, #f2b705) 0 3px / 100% 2px no-repeat, radial-gradient(circle, #f2b705 1.6px, transparent 2px) 0 50% / 14px 10px repeat-x, linear-gradient(#7a3aa6, #5a237f); height: 12px; }
:root[data-theme="sint"] .gamebar, :root[data-theme="sint"] .phase-steal .gamebar, :root[data-theme="sint"] .phase-miracle .gamebar,
:root[data-theme="sint"] .phase-reveal .gamebar, :root[data-theme="sint"] .phase-done .gamebar { border-image: linear-gradient(90deg, #a10d25, #c8102e 30%, #f2b705 50%, #c8102e 70%, #a10d25) 4; }
:root[data-theme="sint"] .bar i { background: repeating-linear-gradient(-45deg, #c8102e 0 6px, #e0344c 6px 12px); }
/* mijtertje in de hoek van de kaarten */
:root[data-theme="sint"] .card.candy::after {
  content: ''; width: 26px; height: 32px; top: 2px; right: 12px; transform: rotate(10deg);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 40'%3E%3Cpath d='M2 38 L2 16 Q9 5 17 0 Q25 5 32 16 L32 38 Z' fill='%23c8102e'/%3E%3Cpath d='M2 38 L2 16 Q9 5 17 0 L17 38 Z' fill='%23a10d25'/%3E%3Crect x='1' y='31' width='32' height='7' rx='2' fill='%23f2b705'/%3E%3Cpath d='M17 8 L17 26 M10 15 L24 15' stroke='%23f2b705' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* logo: mijter + staf */
:root[data-theme="sint"] .logo .sintlogo { display: inline-flex; align-items: flex-end; gap: 6px; vertical-align: middle; }
:root[data-theme="sint"] .logo .sintlogo svg { height: 1.25em; width: auto; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .35)); }
:root[data-theme="sint"] .scene .staf { position: absolute; bottom: 0; height: 60%; width: auto; left: 11%; filter: drop-shadow(2px 3px 3px rgba(0, 0, 0, .35)); z-index: 1; }
@media (max-width: 600px) { :root[data-theme="sint"] .painting { width: 62px; height: 46px; padding: 4px; top: 30px; left: 4%; } :root[data-theme="sint"] .scene .staf { height: 52%; left: 6%; } }
/* pakjesboot die langsvaart */
:root[data-theme="sint"] .sintboat { filter: drop-shadow(0 0 10px rgba(255, 255, 255, .35)); }
:root[data-theme="sint"] .sintboat .boat { vertical-align: middle; animation: bob-boat 1.4s ease-in-out infinite alternate; }
:root[data-theme="sint"] .sintboat .smoke { animation: puff 1.8s ease-out infinite; transform-origin: 110px 20px; }
:root[data-theme="sint"] .sintboat em { margin-left: 2px; }
@keyframes bob-boat { from { transform: translateY(-2px) rotate(-1.5deg); } to { transform: translateY(3px) rotate(1.5deg); } }
@keyframes puff { 0% { opacity: .2; transform: translateY(4px) scale(.85); } 60% { opacity: 1; } 100% { opacity: .5; transform: translateY(-4px) scale(1.1); } }
/* Sinterklaasvlaggetjes: rood, wit en goud met mijter, kruis en chocoladeletter */
:root[data-theme="sint"] #lights i.flag { top: 7px; width: 24px; height: 28px; margin-left: -12px; clip-path: polygon(0 0, 100% 0, 50% 100%);
  background-repeat: no-repeat; background-position: 50% 4px; background-size: 11px 13px; }
:root[data-theme="sint"] #lights i.flag.f0 { background-color: #c8102e;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 26'%3E%3Cpath d='M11 1 L11 25 M3 9 L19 9' stroke='%23f2b705' stroke-width='4.5' stroke-linecap='round'/%3E%3C/svg%3E"); }
:root[data-theme="sint"] #lights i.flag.f1 { background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 40'%3E%3Cpath d='M2 38 L2 16 Q9 5 17 0 Q25 5 32 16 L32 38 Z' fill='%23c8102e'/%3E%3Crect x='1' y='31' width='32' height='7' rx='2' fill='%23f2b705'/%3E%3Cpath d='M17 8 L17 26 M10 15 L24 15' stroke='%23f2b705' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E"); background-size: 12px 14px; }
:root[data-theme="sint"] #lights i.flag.f2 { background-color: #f2b705;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 26'%3E%3Ctext x='11' y='22' text-anchor='middle' font-family='Arial Black,Arial' font-weight='900' font-size='25' fill='%235a3418'%3ES%3C/text%3E%3C/svg%3E"); }
/* inlogvenster op de startpagina: familiecode/link-veld net zo als de andere velden */
#hlf, #joinf { flex-wrap: nowrap; gap: 8px; margin-top: 6px; }
#hlf input { display: block; width: 100%; min-width: 0; font: 600 1rem 'Nunito', sans-serif; color: var(--ink); background: #fff;
  padding: .75em .95em; border-radius: 14px; border: 2px solid var(--line); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .04); }
#hlf input:focus, #joinf input:focus { outline: none; border-color: var(--pine); box-shadow: 0 0 0 4px rgba(27, 127, 75, .15); }
#hlf input::placeholder { color: #b3a594; font-weight: 400; }
#hlf .btn, #joinf .btn { flex: none; align-self: stretch; padding-left: 1.2em; padding-right: 1.2em; }
:root[data-theme="sint"] .card.candy { padding-top: 36px; }
:root[data-theme="sint"] .card.candy::after { top: 8px; }
/* ---------- altijd lucht boven een knop die onder iets anders staat ---------- */
:where(form:not(.row)) > .btn, :where(form:not(.row)) > .row, :where(form:not(.row)) > .form-actions,
:where(.modal-in) > .btn, :where(.modal-in) > .row, :where(.modal-in) > form > .row,
:where(.turn) > .btn, :where(.turn) > .row, :where(.finale) .btn, :where(.card) > .row:has(> .btn) { margin-top: 16px; }
#addKid { margin-top: 14px; }
.wallform .btn { margin-top: 10px; }
.elflist .btn { margin-top: 8px; }
.hostbar { row-gap: 12px; column-gap: 8px; }
/* link naar de andere site + seizoensblokje */
.foot .othersite { font-weight: 700; }
a.season.card { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ink); background: linear-gradient(135deg, #fff8dc, #fffdf7); border: 3px solid var(--gold); padding: 14px 18px; }
a.season .season-ic { font-size: 2.2rem; flex: none; }
a.season b { display: block; font: 700 1.1rem var(--head); color: var(--red-dark); }
a.season small { color: #5a4a3a; font-size: .92rem; line-height: 1.4; }
a.season:hover { transform: translateY(-1px); }
.theme-badge { display: inline-block; font: 700 .72rem var(--head); border-radius: 999px; padding: 2px 8px; margin-right: 4px; vertical-align: 2px; }
.theme-badge.t-kerst { background: #e5f5ec; color: #1b7f4b; }
.theme-badge.t-sint { background: #fde7ea; color: #a10d25; }