/* ==========================================================================
   Basis en losse onderdelen.
   ========================================================================== */

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

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: var(--font);
    font-size: var(--t-basis);
    background: var(--ondergrond);
    color: var(--inkt);
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
}

button, input, select {
    font: inherit;
    color: inherit;
}

.verborgen { display: none !important; }

/* --- Toetsenbordfocus ---------------------------------------------------
   Hier stond eerder geen enkele focusregel. Op de Raspberry Pi met muis en
   toetsenbord was de app daardoor niet te navigeren. */
:focus { outline: none; }

:focus-visible {
    outline: 4px solid var(--paars);
    outline-offset: 3px;
    border-radius: var(--rond-s);
}

.optie:focus-visible,
.stap-knop:focus-visible,
.speler-kaart:focus-visible,
.module-kaart:focus-visible {
    outline-offset: 5px;
}

/* --- Schermen ---------------------------------------------------------- */

.scherm {
    display: none;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: center;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
}

.scherm.actief {
    display: flex;
    animation: opkomen .22s ease both;
}

/* --- Koppen ------------------------------------------------------------ */

.kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--r-3);
    width: 100%;
    flex-shrink: 0;
    padding: var(--r-3) var(--r-4);
    background: var(--vlak);
    box-shadow: var(--schaduw-s);
    position: sticky;
    top: 0;
    z-index: 10;
}

.kop--menu { background: transparent; box-shadow: none; }

.kop-titel {
    flex: 1;
    text-align: center;
    font-size: clamp(1.1rem, 3.2vw, 1.6rem);
    color: var(--paars);
}

/* Een tweede regel onder een koptitel, voor context die geen eigen kop
   verdient — zoals de wereld waarin je speelt. */
.kop-titel__onder {
    display: block;
    font-size: var(--t-klein);
    font-weight: 600;
    color: var(--inkt-zacht);
}

.kop-titel__onder:empty { display: none; }

.kop-vulling { width: 56px; flex-shrink: 0; }

.kop-knop {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border: none;
    border-radius: var(--rond-vol);
    background: var(--paars-licht);
    color: var(--paars);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-appearance: none;
    transition: background .12s ease, transform .12s ease;
}

.kop-knop:active { background: var(--paars-rand); transform: scale(.94); }
.kop-knop--stil  { background: transparent; font-size: 1.3rem; opacity: .55; }

/* --- Knoppen ----------------------------------------------------------- */

.knop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--raak-min);
    padding: var(--r-3) var(--r-6);
    border: none;
    border-radius: var(--rond-m);
    font-size: 1.15rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    -webkit-appearance: none;
    transition: transform .12s ease, background .12s ease;
}

.knop:active { transform: scale(.96); }

.knop--primair { background: var(--paars); color: #fff; box-shadow: var(--schaduw-m); }
.knop--primair:active { background: var(--paars-diep); }

.knop--stil { background: var(--paars-licht); color: var(--paars); }
.knop--stil:active { background: var(--paars-rand); }

.knop--gevaar { background: var(--mis-vlak); color: #9b2d24; }

/* Alleen in gebruik op het moment dat er een wereld opengaat. Mag opvallen —
   dat gebeurt een keer of drie in de hele route. */
.knop--feest {
    background: var(--v-groen);
    color: #fff;
    box-shadow: var(--schaduw-m);
}

/* --- Sterrenbadge ------------------------------------------------------- */

.sterrenbalk {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--r-2);
    padding: 0 var(--r-4) var(--r-3);
    min-height: 1.5rem;
}

.sterren-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--r-1);
    padding: var(--r-1) var(--r-3);
    border-radius: var(--rond-vol);
    background: var(--vlak);
    box-shadow: var(--schaduw-s);
    font-size: var(--t-klein);
    font-weight: 700;
    color: var(--paars);
}

.sterrenbalk__gast,
.sterrenbalk__offline {
    font-size: var(--t-klein);
    color: var(--inkt-zacht);
}

.sterrenbalk__offline { color: var(--bijna); }

/* --- Mascotte ----------------------------------------------------------- */

.mascotte { display: block; }

.mascotte--blij  .mascotte__lijf { animation: wippen .5s ease 2; }
.mascotte--feest .mascotte__lijf { animation: wippen .45s ease infinite; }
.mascotte--aanmoedigend .mascotte__vleugel--rechts { animation: wuiven .5s ease 3; transform-origin: 104px 62px; }

/* --- Confetti ----------------------------------------------------------- */

.confetti-canvas {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 60;
    opacity: 0;
    transition: opacity .2s ease;
}

.confetti-canvas.zichtbaar { opacity: 1; }

/* --- Dialogen -----------------------------------------------------------
   Eigen overlays in plaats van window.prompt/confirm/alert: die blokkeren de
   pagina, zijn met een vinger slecht te raken en zien er in schermvullende
   modus op een iPad rommelig uit. */

.dialooglaag {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    padding: var(--r-4);
    background: rgba(30, 32, 60, .45);
    animation: opkomen .15s ease both;
}

.dialoog {
    width: 100%;
    max-width: 420px;
    padding: var(--r-5);
    border-radius: var(--rond-l);
    background: var(--vlak);
    box-shadow: var(--schaduw-l);
    user-select: text;
    -webkit-user-select: text;
}

.dialoog h3 { font-size: 1.25rem; color: var(--paars); margin-bottom: var(--r-2); }

.dialoog__uitleg { font-size: var(--t-basis); color: var(--inkt-zacht); line-height: 1.5; }

.dialoog__veld {
    width: 100%;
    margin-top: var(--r-4);
    padding: var(--r-3);
    border: 3px solid var(--lijn);
    border-radius: var(--rond-s);
    font-size: 1.4rem;
    text-align: center;
    background: var(--vlak);
}

.dialoog__veld--mis { border-color: var(--mis); animation: schudden .35s ease; }

.dialoog__knoppen {
    display: flex;
    flex-wrap: wrap;
    gap: var(--r-3);
    margin-top: var(--r-4);
}

.dialoog__knoppen .knop { flex: 1 1 130px; }