/* ===== Foxy Kerstquiz (/kerstquiz): zelfde aankleding als het spel (kerst_decor.dart) =====
   Gemaakt met make_kerst_site_decor.py (scratchpad van de sessie van 16 okt 2026). */
.kq-page {
    --bg: #0b1f1b;
    --surface: #0e2a22;
    --bg-card: #143429;
    --bg-card-hover: #1a3f32;
    --border: #2a5242;
    --text-secondary: #abc4b9;
    --text-muted: #93ada2;
    --kq-red: #ff4d5e;
    --kq-gold: #ffc94a;
    --kq-green: #52e07f;
    --kq-ice: #6cc6ff;
    background: var(--bg);
}

/* nachtlucht met sterren, lichtslinger bovenaan, heuvels met dennen onderaan */
.kq-hero {
    position: relative;
    overflow: hidden;
    padding-bottom: clamp(150px, 17vw, 250px);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='320'%3E%3Ccircle cx='101' cy='174' r='0.9' fill='%23fff' fill-opacity='0.8'/%3E%3Ccircle cx='199.2' cy='185.5' r='0.6' fill='%23fff' fill-opacity='0.8'/%3E%3Ccircle cx='197.2' cy='176' r='0.7' fill='%23fff' fill-opacity='0.8'/%3E%3Ccircle cx='197.6' cy='266.3' r='1.2' fill='%23fff' fill-opacity='0.5'/%3E%3Ccircle cx='360.2' cy='75.3' r='0.7' fill='%23fff' fill-opacity='0.8'/%3E%3Ccircle cx='219.6' cy='236.2' r='0.6' fill='%23fff' fill-opacity='0.4'/%3E%3Ccircle cx='400.3' cy='15.5' r='0.6' fill='%23fff' fill-opacity='0.8'/%3E%3Ccircle cx='114.1' cy='189.9' r='1.2' fill='%23fff' fill-opacity='0.7'/%3E%3Ccircle cx='385.2' cy='126.8' r='1.2' fill='%23fff' fill-opacity='0.8'/%3E%3Ccircle cx='57.8' cy='117.5' r='0.6' fill='%23fff' fill-opacity='0.4'/%3E%3Ccircle cx='92.3' cy='307.1' r='1.2' fill='%23fff' fill-opacity='0.7'/%3E%3Ccircle cx='357.8' cy='135.1' r='1.2' fill='%23fff' fill-opacity='0.6'/%3E%3Ccircle cx='224.2' cy='130.8' r='0.7' fill='%23fff' fill-opacity='0.8'/%3E%3Ccircle cx='285.7' cy='295.5' r='0.9' fill='%23fff' fill-opacity='0.8'/%3E%3Ccircle cx='281.2' cy='53.5' r='0.9' fill='%23fff' fill-opacity='0.8'/%3E%3Ccircle cx='378.4' cy='181.8' r='0.7' fill='%23fff' fill-opacity='0.7'/%3E%3Ccircle cx='413' cy='86.4' r='0.6' fill='%23fff' fill-opacity='0.4'/%3E%3Ccircle cx='357.2' cy='314.8' r='0.6' fill='%23fff' fill-opacity='0.5'/%3E%3Ccircle cx='29.7' cy='285.5' r='0.6' fill='%23fff' fill-opacity='0.5'/%3E%3Ccircle cx='321.8' cy='277.8' r='0.6' fill='%23fff' fill-opacity='0.7'/%3E%3Ccircle cx='318.8' cy='121.4' r='0.9' fill='%23fff' fill-opacity='0.6'/%3E%3Ccircle cx='385.5' cy='90.2' r='0.7' fill='%23fff' fill-opacity='0.8'/%3E%3Ccircle cx='130.8' cy='26.3' r='0.6' fill='%23fff' fill-opacity='0.8'/%3E%3Ccircle cx='406.1' cy='94.1' r='0.9' fill='%23fff' fill-opacity='0.4'/%3E%3Ccircle cx='19.7' cy='276.2' r='0.9' fill='%23fff' fill-opacity='0.5'/%3E%3Ccircle cx='59.5' cy='274.3' r='1.2' fill='%23fff' fill-opacity='0.6'/%3E%3Ccircle cx='218.4' cy='205.5' r='0.6' fill='%23fff' fill-opacity='0.7'/%3E%3Ccircle cx='393.3' cy='162.2' r='1.2' fill='%23fff' fill-opacity='0.7'/%3E%3Ccircle cx='299.7' cy='297.9' r='1.2' fill='%23fff' fill-opacity='0.8'/%3E%3Ccircle cx='218.8' cy='175.3' r='0.6' fill='%23fff' fill-opacity='0.7'/%3E%3Ccircle cx='412.8' cy='101.5' r='1.2' fill='%23fff' fill-opacity='0.7'/%3E%3Ccircle cx='265' cy='21' r='0.9' fill='%23fff' fill-opacity='0.6'/%3E%3Ccircle cx='284.6' cy='113.4' r='0.9' fill='%23fff' fill-opacity='0.7'/%3E%3Ccircle cx='11.2' cy='21.1' r='0.6' fill='%23fff' fill-opacity='0.8'/%3E%3C/svg%3E") repeat 0 0 / 420px 320px,
                radial-gradient(ellipse at 50% 35%, rgba(255, 201, 74, 0.10) 0%, transparent 45%),
                linear-gradient(180deg, #0b2236 0%, #0c2a25 60%, #0a1f16 100%);
}
.kq-lights { position: absolute; left: 0; right: 0; top: var(--kq-header, 72px); height: 64px; pointer-events: none; z-index: 2; }
.kq-lights__svg { display: block; width: 100%; height: 100%; }
.kq-bulb { animation: kq-twinkle 2.6s ease-in-out infinite; }
@keyframes kq-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.42; } }
.kq-hills { position: absolute; left: 0; right: 0; bottom: -1px; height: clamp(120px, 15vw, 230px); pointer-events: none; }
.kq-hills__svg { display: block; width: 100%; height: 100%; }
.kq-hero .quiz-hero__inner { position: relative; z-index: 3; }

/* vallende sneeuw over de hele pagina (onder de kopbalk, vangt geen klikken) */
.kq-snow {
    position: fixed;
    left: 0;
    right: 0;
    top: -420px;
    height: calc(100vh + 420px);
    pointer-events: none;
    z-index: 900;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='530' height='420'%3E%3Ccircle cx='74.1' cy='353.1' r='1.4' fill='%23fff' fill-opacity='0.4'/%3E%3Ccircle cx='262.6' cy='189.2' r='1.3' fill='%23fff' fill-opacity='0.6'/%3E%3Ccircle cx='53' cy='15.7' r='1.5' fill='%23fff' fill-opacity='0.5'/%3E%3Ccircle cx='401.9' cy='4.9' r='1.2' fill='%23fff' fill-opacity='0.6'/%3E%3Ccircle cx='123.4' cy='393.5' r='1.5' fill='%23fff' fill-opacity='0.4'/%3E%3Ccircle cx='17.3' cy='227.1' r='1.6' fill='%23fff' fill-opacity='0.5'/%3E%3Ccircle cx='117.1' cy='177.9' r='0.8' fill='%23fff' fill-opacity='0.4'/%3E%3Ccircle cx='232.6' cy='208.3' r='1' fill='%23fff' fill-opacity='0.4'/%3E%3Ccircle cx='118.2' cy='193.4' r='1' fill='%23fff' fill-opacity='0.4'/%3E%3Ccircle cx='441.2' cy='233.3' r='1.3' fill='%23fff' fill-opacity='0.4'/%3E%3Ccircle cx='522.1' cy='358.3' r='0.9' fill='%23fff' fill-opacity='0.5'/%3E%3Ccircle cx='380.6' cy='297' r='1.5' fill='%23fff' fill-opacity='0.5'/%3E%3Ccircle cx='437.3' cy='280.2' r='1' fill='%23fff' fill-opacity='0.6'/%3E%3Ccircle cx='464.7' cy='352.6' r='1.2' fill='%23fff' fill-opacity='0.6'/%3E%3Ccircle cx='22' cy='104' r='1.4' fill='%23fff' fill-opacity='0.5'/%3E%3C/svg%3E") repeat 0 0 / 530px 420px;
    animation: kq-fall-far 34s linear infinite;
    opacity: 0.75;
    will-change: transform;
}
.kq-snow--near {
    top: -360px;
    height: calc(100vh + 360px);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='470' height='360'%3E%3Ccircle cx='445.7' cy='337.6' r='1.9' fill='%23fff' fill-opacity='0.6'/%3E%3Ccircle cx='390' cy='263.1' r='2.5' fill='%23fff' fill-opacity='0.6'/%3E%3Ccircle cx='283.9' cy='217.6' r='2.4' fill='%23fff' fill-opacity='0.6'/%3E%3Ccircle cx='203' cy='142.5' r='2.5' fill='%23fff' fill-opacity='0.8'/%3E%3C/svg%3E") repeat 0 0 / 470px 360px;
    animation: kq-fall-near 19s linear infinite;
    opacity: 0.8;
}
@keyframes kq-fall-far { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-40px, 420px, 0); } }
@keyframes kq-fall-near { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(30px, 360px, 0); } }

.kq-badge { background: rgba(82, 224, 127, 0.12); border-color: rgba(82, 224, 127, 0.35); color: #7beaa0; }

/* titel zoals in het spel: F O X Y met hulst, KERSTQUIZ in gloeiend goud */
.kq-page .quiz-hero h1.kq-title {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--kq-gold);
    letter-spacing: 0;
    margin-bottom: 4px;
}
.kq-title__top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    font-size: clamp(1.2rem, 3vw, 1.7rem);
    font-weight: 800;
    letter-spacing: 0.5em;
    text-transform: uppercase;
}
.kq-title__top span { padding-left: 0.5em; }
.kq-holly { width: 56px; height: 28px; flex: none; }
.kq-holly--flip { transform: scaleX(-1); }
.kq-title__main {
    display: block;
    font-size: clamp(2.9rem, 10.5vw, 6.4rem);
    line-height: 1.02;
    text-transform: uppercase;
    background: linear-gradient(180deg, #fff0c2 0%, #ffd062 52%, #f2a52e 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 24px rgba(255, 190, 80, 0.38));
}
/* lange titel (KERSTSPELLETJES, JUEGOS DE NAVIDAD): kleiner op smalle schermen; breekt enkel tussen woorden */
.kq-title__main--long { font-size: clamp(2rem, 7.4vw, 6rem); overflow-wrap: normal; word-break: keep-all; hyphens: none; }
.kq-page .quiz-hero h1 .h1-sub { color: #dff5e8; -webkit-text-fill-color: #dff5e8; margin-top: 14px; }

/* Foxy met kerstmuts in een gouden ring, met tekstballon */
.kq-foxy {
    width: 152px;
    height: 152px;
    margin: 26px auto 18px;
    border-radius: 50%;
    border: 4px solid #f5b335;
    background: radial-gradient(circle at 50% 38%, #3d4d39 0%, #253628 70%);
    box-shadow: 0 0 0 7px rgba(245, 179, 53, 0.12), 0 14px 34px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    display: grid;
    place-items: end center;
}
.kq-foxy img { width: 136px; height: 136px; display: block; }
.kq-bubble {
    position: relative;
    display: inline-block;
    max-width: 540px;
    margin: 0 auto 24px;
    padding: 14px 24px;
    border-radius: 20px;
    background: #1c4630;
    border: 2px solid rgba(245, 179, 53, 0.6);
    color: #f2f8f3;
    font-style: italic;
    font-size: 1.05rem;
}
.kq-bubble::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -11px;
    width: 18px;
    height: 18px;
    margin-left: -9px;
    background: #1c4630;
    border-left: 2px solid rgba(245, 179, 53, 0.6);
    border-top: 2px solid rgba(245, 179, 53, 0.6);
    transform: rotate(45deg);
}

/* sneeuwkapjes op knoppen en kaarten, zoals SnowCapBorder in het spel */
.kq-cap { position: relative; }
.kq-cap::before {
    content: '';
    position: absolute;
    left: 8px;
    right: 8px;
    top: -8px;
    height: 18px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='18'%3E%3Cpath d='M0,5.0 Q11,1.8 22,5.0 Q37,0.2 52,5.0 Q61,2.6 70,5.0 Q83,1 96,5.0 Q108,1.6 120,5.0 L120,10.0 Q107,12 94,10.0 Q84,16.8 74,10.0 Q57,11.2 40,10.0 Q31,15.6 22,10.0 Q11,11.6 0,10.0 Z' fill='%23f6faff'/%3E%3C/svg%3E") repeat-x 0 0 / 120px 18px;
    border-radius: 10px 10px 0 0;
    filter: drop-shadow(0 1.6px 0 rgba(138, 168, 190, 0.45));
    pointer-events: none;
    z-index: 1;
}
/* iconen liggen bovenop de sneeuw: vóór het kapje en de vallende vlokken (kopbalk = 1000) */
.kq-page .round-emoji, .kq-page .feature__icon, .kq-page .cta__emoji, .kq-page .step .ico, .kq-page .gm-card h4 .ico { position: relative; z-index: 901; }
.btn.kq-cap::before { left: 20px; right: 20px; top: -6px; height: 14px; background-size: 93px 14px; }
.kq-page .cta__box { overflow: visible; }

/* kerstkleuren in plaats van oranje */
.kq-page .section-tag { background: rgba(255, 201, 74, 0.12); color: var(--kq-gold); }
.kq-page .section-tag::before {
    content: '';
    display: inline-block;
    width: 22px;
    height: 11px;
    margin-right: 7px;
    vertical-align: -1px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 32' width='64' height='32'%3E%3Cpath d='M33.1,22.1 L31.3,18.3 L28.4,17.4 L26.8,13.1 L23.2,14.1 L21.6,10 L17.6,12.1 L15.5,9 L11.5,11.3 L8.7,10.1 L4.9,11.9 L4.9,11.9 L6.7,15.7 L9.6,16.6 L11.2,20.9 L14.8,19.9 L16.4,24 L20.4,21.9 L22.5,25 L26.5,22.7 L29.3,23.9 L33.1,22.1 Z' fill='%232e9e5b'/%3E%3Cpath d='M30.9,22.1 L34.7,23.9 L37.5,22.7 L41.5,25 L43.6,21.9 L47.6,24 L49.2,19.9 L52.8,20.9 L54.4,16.6 L57.3,15.7 L59.1,11.9 L59.1,11.9 L55.3,10.1 L52.5,11.3 L48.5,9 L46.4,12.1 L42.4,10 L40.8,14.1 L37.2,13.1 L35.6,17.4 L32.7,18.3 L30.9,22.1 Z' fill='%232e9e5b'/%3E%3Cpath d='M31,19 L7,13' stroke='%231d6b3d' stroke-width='1.2' fill='none' stroke-linecap='round'/%3E%3Cpath d='M33,19 L57,13' stroke='%231d6b3d' stroke-width='1.2' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='28' cy='20' r='4.2' fill='%23e2384a'/%3E%3Ccircle cx='36' cy='20' r='4.2' fill='%23e2384a'/%3E%3Ccircle cx='32' cy='14' r='4.2' fill='%23ef4a5c'/%3E%3Ccircle cx='26.6' cy='18.6' r='1.1' fill='%23fff' fill-opacity='.7'/%3E%3Ccircle cx='30.6' cy='12.6' r='1.1' fill='%23fff' fill-opacity='.7'/%3E%3C/svg%3E") no-repeat center / contain;
}
.kq-page .qs strong { color: var(--kq-gold); }
.kq-page .round-card:nth-child(4n+1) .round-emoji { --ic: 255, 77, 94; }
.kq-page .round-card:nth-child(4n+2) .round-emoji { --ic: 255, 201, 74; }
.kq-page .round-card:nth-child(4n+3) .round-emoji { --ic: 82, 224, 127; }
.kq-page .round-card:nth-child(4n+4) .round-emoji { --ic: 108, 198, 255; }
.kq-page .cross-links a, .kq-page .faq-item a { color: var(--kq-gold); }
.round-card__from {
    display: inline-block;
    margin-top: 10px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #ff9aa4;
    background: rgba(255, 77, 94, 0.14);
}
.btn--play-kerst { background: linear-gradient(135deg, #2fb36b, #17804a); }
.kq-cta {
    background: linear-gradient(135deg, rgba(47, 179, 107, 0.14) 0%, rgba(255, 77, 94, 0.09) 100%);
    border-color: rgba(47, 179, 107, 0.35);
}
.kq-page .nowrap { white-space: nowrap; }
@media (min-width: 900px) {
    .kq-rounds { grid-template-columns: repeat(3, 1fr); }
    .kq-features { grid-template-columns: repeat(3, 1fr); }
    .kq-games { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 520px) {
    .kq-holly { width: 40px; height: 20px; }
    .kq-title__top { gap: 8px; }
}
.kq-hero .quiz-hero__buttons .btn--ghost { color: var(--text); border-color: rgba(255, 255, 255, 0.28); }

/* kerstquiz vragen: dezelfde blokken als /quizvragen, drie naast elkaar */
.kq-qv { padding: 70px 0 80px; }
.kq-qv .qv-block { position: relative; }
.kq-qv .qv__grid { align-items: stretch; }
.kq-qv .qv-block { display: flex; flex-direction: column; }
.kq-qv .qv-answers { margin-top: auto; }
@media (min-width: 1000px) { .kq-qv .qv__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; } }

/* /kerstspelletjes: kaarten per spel */
.kq-gamelist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 960px) { .kq-gamelist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .kq-gamelist { grid-template-columns: 1fr; } }
.kq-game {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 24px 8px 24px 8px;
    padding: 30px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
}
.kq-game:nth-child(even) { border-radius: 8px 24px 8px 24px; }
.kq-game__head { display: flex; align-items: center; gap: 14px; }
.kq-game__icon {
    --ic: 255, 77, 94;
    position: relative;
    z-index: 901;
    flex: none;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 16px;
    font-size: 28px;
    color: rgb(var(--ic));
    background: rgba(var(--ic), 0.16);
    box-shadow: inset 0 0 0 2px rgba(var(--ic), 0.45);
}
.kq-game:nth-child(4n+2) .kq-game__icon { --ic: 255, 201, 74; }
.kq-game:nth-child(4n+3) .kq-game__icon { --ic: 82, 224, 127; }
.kq-game:nth-child(4n+4) .kq-game__icon { --ic: 108, 198, 255; }
.kq-game h3 { font-size: 1.15rem; margin: 0; }
.kq-game__meta { display: block; margin-top: 2px; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--kq-gold); }
.kq-game p { color: var(--text-secondary); margin: 0; flex: 1; }
.kq-game__links { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 8px; }
.kq-more { color: var(--text); font-weight: 600; font-size: 0.92rem; text-decoration: underline; text-underline-offset: 3px; }
.kq-more:hover { color: var(--kq-gold); }
.kq-offline .gm-card p { color: var(--text-secondary); }

@media (prefers-reduced-motion: reduce) {
    .kq-snow, .kq-bulb { animation: none; }
}