/* ===================== 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 */
.btn::before { left: 7px; right: 7px; }
.btn.big::before { top: -9px; height: 21px; left: 10px; right: 10px; }
.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)); }
/* 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; }
}