/* ===========================================================
   De Grote SinterKerst-Quiz 2026 - basis voor alle schermen
   Huisstijl RCE zoals het Support Dashboard: bordeaux, goud en
   warm crème; IBM Plex Sans, met IBM Plex Mono voor cijfers.
   =========================================================== */

:root {
    /* zelfde tokens als het Support Dashboard (thema "rce", commandocentrum-stijl) */
    --wijn:        #76001D;
    --wijn-licht:  #8d0a26;
    --wijn-diep:   #45000f;
    --oker:        #c08129;     /* goud, actief */
    --oker-licht:  #eab54f;     /* goud, accent op bordeaux */
    --oker-diep:   #8a5a12;
    --zalm:        #dfa976;     /* gedempte tekst op bordeaux */

    --creme:   #f3ece2;         /* canvas */
    --papier:  #fffdf4;         /* paneel */
    --zand:    #f0e9d6;
    --rand:    #e6dcb2;
    --rand2:   #cfc292;
    --inkt:    #3a2b16;
    --gedempt: #6f6040;
    --vaag:    #9c8f6b;
    --donker:  #241a12;

    --groen:   #1a7f4e;
    --groen-licht: #e1f0e3;
    --rood:    #b3261e;
    --rood-licht:  #f7dfd9;

    /* de zes antwoordkleuren */
    --antw-a: #a8172a;
    --antw-b: #2a4d6e;
    --antw-c: #b3741f;
    --antw-d: #1e6b47;
    --antw-e: #5b3a63;
    --antw-f: #1c6b64;

    --rond: 14px;
    --rond-klein: 10px;
    --schaduw: 0 1px 2px rgba(58, 43, 22, .05);
    --schaduw-zweef: 0 8px 24px rgba(107, 45, 14, .1);
    --schaduw-diep: 0 20px 60px rgba(0, 0, 0, .28);

    --schrift: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --kop: var(--schrift);
    --mono: 'IBM Plex Mono', ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--schrift);
    font-size: 1rem;
    line-height: 1.45;
    color: var(--inkt);
    background: var(--creme);
    -webkit-tap-highlight-color: transparent;
    overflow-x: hidden;
}

/* Wat er direct op de ondergrond staat (labels, stille knoppen, de klok) kleurt
   mee met die ondergrond. Alle schermen staan op bordeaux, zoals de monitor;
   een crème kaart zet de waarden voor zijn eigen inhoud weer op licht. */
body, .kaart {
    --o-label: var(--vaag);
    --o-zacht: var(--gedempt);
    --o-knop-bg: var(--wijn);
    --o-knop-fg: #fff;
    --o-stil-bg: var(--zand);
    --o-stil-fg: var(--inkt);
    --o-stil-rand: var(--rand2);
    --o-pil-bg: var(--zand);
    --o-pil-fg: var(--inkt);
    --o-klok-baan: rgba(118, 0, 29, .13);
    --o-klok-lijn: var(--wijn);
    --o-klok-krap: var(--rood);
}
body.donker, .donker .kaart.wacht {
    --o-label: var(--oker-licht);
    --o-zacht: var(--zalm);
    --o-knop-bg: var(--oker-licht);
    --o-knop-fg: var(--donker);
    --o-stil-bg: rgba(255, 255, 255, .1);
    --o-stil-fg: #fff;
    --o-stil-rand: rgba(255, 255, 255, .24);
    --o-pil-bg: rgba(243, 236, 226, .14);
    --o-pil-fg: var(--creme);
    --o-klok-baan: rgba(243, 236, 226, .18);
    --o-klok-lijn: var(--oker-licht);
    --o-klok-krap: #ff6b7d;
}

body.donker {
    color: var(--creme);
    background: radial-gradient(130% 100% at 50% -10%, var(--wijn-licht) 0%, var(--wijn) 42%, var(--wijn-diep) 100%) fixed;
}

h1, h2, h3 { font-family: var(--kop); font-weight: 600; letter-spacing: -.015em; line-height: 1.15; margin: 0 0 .5em; text-wrap: balance; }
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.15rem; }
p { margin: 0 0 .8em; }
img { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

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

.logo { height: 2.4rem; width: auto; display: block; }

/* klein opschrift boven een kop of getal */
.label {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--o-label);
}
.zacht { color: var(--o-zacht); }

/* --- knoppen ------------------------------------------------- */
.knop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    min-height: 2.9rem;
    padding: .6rem 1.2rem;
    border: 1.5px solid transparent;
    border-radius: var(--rond-klein);
    background: var(--o-knop-bg);
    color: var(--o-knop-fg);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    transition: transform .08s, background .15s, border-color .15s;
}
.knop:active { transform: scale(.97); }
.knop:disabled { opacity: .45; cursor: default; transform: none; }
.knop--stil { background: var(--o-stil-bg); color: var(--o-stil-fg); border-color: var(--o-stil-rand); }
.knop--oker { background: var(--oker-licht); color: var(--donker); }
.knop--groen { background: var(--groen); color: #fff; }
.knop--rood { background: var(--rood); color: #fff; }
.donker .knop--rood { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .35); }
.donker .kaart .knop--rood { box-shadow: none; }
.knop--groot { min-height: 3.8rem; padding: .9rem 1.6rem; font-size: 1.15rem; }
.knop--blok { display: flex; width: 100%; }
.knop--klein { min-height: 2.2rem; padding: .3rem .8rem; font-size: .85rem; }
.knop--icoon { width: 2.9rem; padding: 0; }

/* --- kaart, veld, melding ------------------------------------ */
.kaart {
    background: var(--papier);
    color: var(--inkt);
    border: 1px solid var(--rand);
    border-radius: var(--rond);
    padding: 1.25rem;
    box-shadow: var(--schaduw);
}
.kaart > :last-child { margin-bottom: 0; }

.veld { display: block; margin-bottom: 1rem; }
.veld > span { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .3rem; }
input[type=text], input[type=password], input[type=number], select, textarea {
    width: 100%;
    padding: .7rem .85rem;
    border: 1px solid var(--rand2);
    border-radius: var(--rond-klein);
    background: var(--papier);
    font-size: 1rem;
}
input:focus, select:focus, textarea:focus, .knop:focus-visible {
    outline: 3px solid rgba(200, 132, 43, .45);
    outline-offset: 1px;
    border-color: var(--oker);
}

.melding {
    padding: .7rem 1rem;
    border-radius: var(--rond-klein);
    background: var(--zand);
    color: var(--inkt);
    font-size: .95rem;
}
.melding.fout { background: var(--rood-licht); color: #6d0d1a; }
.melding.goed { background: var(--groen-licht); color: #114229; }

.pil {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    padding: .2em .75em;
    border-radius: 999px;
    background: var(--o-pil-bg);
    color: var(--o-pil-fg);
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
}
.pil--oker { background: var(--oker-licht); color: var(--donker); }

/* --- teamfotootje --------------------------------------------- */
.avatar {
    --maat: 2.6rem;
    flex: none;
    display: inline-grid;
    place-items: center;
    width: var(--maat);
    height: var(--maat);
    border-radius: 50%;
    background: var(--kleur, var(--wijn)) center / cover;
    border: 2px solid var(--kleur, var(--wijn));
    color: #fff;
    font-family: var(--kop); font-weight: 600; letter-spacing: -.015em;
    font-size: calc(var(--maat) * .46);
    line-height: 1;
}

/* --- aftelklok ------------------------------------------------ */
.klok { --maat: 5rem; position: relative; width: var(--maat); height: var(--maat); flex: none; }
.klok svg { width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
.klok circle { fill: none; stroke-width: 9; }
.klok .baan { stroke: var(--o-klok-baan); }
.klok .lijn { stroke: var(--o-klok-lijn); stroke-linecap: round; transition: stroke-dashoffset .12s linear; }
.klok .cijfer {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    font-family: var(--mono); font-weight: 600;
    font-size: calc(var(--maat) * .38);
    font-variant-numeric: tabular-nums;
}
.klok.krap .lijn { stroke: var(--o-klok-krap); }
.klok.krap .cijfer { animation: klop .5s ease-in-out infinite alternate; }
@keyframes klop { to { transform: scale(1.18); } }

/* --- ranglijst ------------------------------------------------ */
.rang { display: grid; gap: .45rem; }
.rang-rij {
    display: grid;
    grid-template-columns: 2.2em auto minmax(0, 1.2fr) minmax(0, 1fr) auto;
    align-items: center;
    gap: .8em;
    padding: .5em .9em .5em .5em;
    border-radius: var(--rond);
    background: var(--papier);
    border: 1px solid var(--rand);
    color: var(--inkt);
}
.rang-rij .plaats { text-align: center; font-family: var(--mono); font-weight: 600; font-size: 1.25em; color: var(--gedempt); }
.rang-rij .naam { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rang-rij .balk { height: .55em; border-radius: 999px; background: var(--zand); overflow: hidden; }
.rang-rij .balk i { display: block; height: .55em; border-radius: inherit; background: var(--oker); transition: width .6s ease; }
.rang-rij .punten { font-family: var(--mono); font-weight: 600; font-size: 1.3em; font-variant-numeric: tabular-nums; min-width: 2.2em; text-align: right; }
.rang-rij.top .plaats { color: var(--oker-diep); }
.rang-rij.ik { border-color: var(--wijn); box-shadow: 0 0 0 2px var(--wijn); }
.vers .rang-rij { animation: schuif-in .45s both; animation-delay: calc(var(--i) * 70ms); }
@keyframes schuif-in { from { opacity: 0; transform: translateY(14px); } }

/* --- goede combinaties (verbinden) ----------------------------- */
.paren { display: grid; gap: .4rem; }
.paar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: .8em;
    padding: .55em 1em;
    border-radius: var(--rond-klein);
    background: var(--papier);
    border: 1px solid var(--rand);
    color: var(--inkt);
}
.paar span:first-child { font-weight: 600; text-align: right; }
.paar i { color: var(--oker-diep); font-style: normal; }

.fragment { margin-bottom: 1rem; text-align: center; }
.fragment audio { display: none; }

/* --- storing en verbinding ------------------------------------ */
.storing, .offline {
    position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 9999;
    padding: .7rem 1rem;
    border-radius: var(--rond-klein);
    background: var(--rood); color: #fff;
    font-size: .85rem; font-weight: 500;
    box-shadow: var(--schaduw-diep);
}
.offline { bottom: auto; top: 12px; background: var(--inkt); text-align: center; }

/* --- inlogkaart en startpagina --------------------------------- */
.midden {
    position: relative; z-index: 1;
    min-height: 100vh; min-height: 100dvh;
    display: grid; place-items: center;
    padding: 1.5rem;
}
.inlog { width: min(26rem, 100%); text-align: center; }
.inlog .logo { margin: 0 auto 1.2rem; }
.inlog form { text-align: left; margin-top: 1.2rem; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}