/* BabbelTijd: pixelart op de canvas, gewone moderne bediening eroverheen. */

:root {
    --bg: #0d0912;
    --panel: rgba(22, 15, 32, 0.82);
    --panel-solid: #1a1226;
    --line: rgba(255, 255, 255, 0.10);
    --text: #f4f0f8;
    --muted: #a99bb8;
    --accent: #ff4fa3;
    --accent-2: #ff7cc4;
    --guest: #6fb3ff;
    --npc: #ffd479;
    --radius: 14px;
    --font: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

html, body {
    margin: 0;
    height: 100%;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    overflow: hidden;
}

#app {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Om de stage heen: midden in het venster, op de homepage bovenaan met de screenshots eronder. */
.page {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

    .page.home { justify-content: flex-start; }
    .page > .stage { flex-shrink: 0; }

/* De stage krijgt zijn maat van babbeltijd.js (640:400, passend in het venster).
   Panelen schalen mee via container-eenheden (cqh = 1% van de stagehoogte). */
.stage {
    position: relative;
    container-type: size;
    font-size: clamp(11px, 2.05cqh, 17px);
}

.game-canvas {
    display: block;
    width: 100%;
    height: 100%;
    /* De laatste schaalstap mag zacht: het canvas is al met harde pixels vergroot (zie babbeltijd.js). */
    image-rendering: auto;
    cursor: default; /* de engine zet zelf de juiste cursor */
}

.overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

    .overlay > * {
        pointer-events: auto;
    }

/* ---- Bouwstenen ---------------------------------------------------------------------------- */

.panel {
    background: var(--panel);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
    box-sizing: border-box;
}

h2 {
    margin: 0 0 0.7em;
    font-size: 1.3em;
    font-weight: 650;
}

p {
    margin: 0.6em 0 0;
}

.muted { color: var(--muted); }
.small { font-size: 0.85em; }
.error { color: #ff8a9a; }
.notice { color: #9be8b8; }

.fineprint {
    margin-top: 0.9em;
    font-size: 0.75em;
    color: var(--muted);
}

.row {
    display: flex;
    gap: 0.5em;
    margin-top: 0.7em;
}

    .row > .btn { flex: 1; }

label {
    display: block;
    margin-bottom: 0.7em;
    font-size: 0.85em;
    color: var(--muted);
}

input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-top: 0.35em;
    padding: 0.6em 0.8em;
    font: inherit;
    font-size: 1.05em;
    color: var(--text);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--line);
    border-radius: 10px;
    outline: none;
    transition: border-color 0.15s, background 0.15s;
}

    input:focus {
        border-color: var(--accent);
        background: rgba(255, 255, 255, 0.09);
    }

    input::placeholder { color: #776a86; }

.btn {
    font: inherit;
    font-size: 0.95em;
    font-weight: 600;
    color: var(--text);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 0.6em 1em;
    cursor: pointer;
    transition: background 0.15s, transform 0.05s, opacity 0.15s;
}

    .btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.14); }
    .btn:active:not(:disabled) { transform: translateY(1px); }
    .btn:disabled { opacity: 0.45; cursor: default; }
    .btn.wide { width: 100%; margin-top: 0.4em; }
    .btn.ghost { background: transparent; }
    .btn.on { border-color: var(--accent); color: var(--accent-2); }

    .btn.primary {
        background: linear-gradient(135deg, var(--accent), #c43cff);
        border-color: transparent;
        color: #fff;
    }

        .btn.primary:hover:not(:disabled) { background: linear-gradient(135deg, #ff6bb3, #d05cff); }

    .btn.round {
        border-radius: 999px;
        padding: 0;
        width: 2.2em;
        height: 2.2em;
        line-height: 1;
        font-size: 1.05em;
    }

        .btn.round.small { width: 1.8em; height: 1.8em; font-size: 1em; }

.tabs {
    display: flex;
    gap: 0.25em;
    padding: 0.25em;
    margin-bottom: 1em;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
}

.tab {
    flex: 1;
    font: inherit;
    font-size: 0.85em;
    font-weight: 600;
    padding: 0.55em 0.3em;
    color: var(--muted);
    background: transparent;
    border: 0;
    border-radius: 9px;
    cursor: pointer;
}

    .tab.on { color: var(--text); background: rgba(255, 255, 255, 0.12); }

.segmented {
    display: flex;
    gap: 0.25em;
    padding: 0.2em;
    margin-bottom: 0.7em;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}

    .segmented button {
        flex: 1;
        font: inherit;
        font-size: 0.9em;
        padding: 0.45em;
        color: var(--muted);
        background: transparent;
        border: 0;
        border-radius: 8px;
        cursor: pointer;
    }

        .segmented button.on { color: #fff; background: var(--accent); }

.swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35em;
    margin-bottom: 0.8em;
}

.swatch {
    width: 1.9em;
    height: 1.9em;
    padding: 0;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.15);
    cursor: pointer;
    position: relative;
}

    .swatch.small { width: 1.35em; height: 1.35em; }
    .swatch.on { border-color: #fff; box-shadow: 0 0 0 2px var(--accent); }

    /* Alleen met abonnement: een klein plusje erbij */
    .swatch.plus::after {
        content: "+";
        position: absolute;
        right: -0.35em;
        top: -0.45em;
        font-size: 0.75em;
        font-weight: 800;
        color: var(--accent-2);
    }

.badge {
    display: inline-block;
    margin-left: 0.3em;
    padding: 0 0.4em;
    font-size: 0.75em;
    font-weight: 800;
    color: #fff;
    background: var(--accent);
    border-radius: 999px;
}

/* ---- Ingang ---------------------------------------------------------------------------------- */

.entrance-card {
    position: absolute;
    left: 2.5%;
    top: 27%;
    width: 36%;
    max-height: 70%;
    overflow: auto;
    padding: 1.2em 1.3em;
}

    .entrance-card .close { display: block; margin: -0.6em -0.6em 0.3em auto; }

/* De deur van het hotel is de knop naar binnen: zacht pulserend licht, feller bij hover. */
.door {
    position: absolute;
    padding: 0;
    border: 0;
    border-radius: 0.4em;
    background: transparent;
    cursor: pointer;
    animation: door-glow 2.4s ease-in-out infinite;
}

    .door:hover { animation: none; box-shadow: 0 0 2.4em 0.7em rgba(255, 214, 120, 0.55); background: rgba(255, 236, 170, 0.14); }

@keyframes door-glow {
    0%, 100% { box-shadow: 0 0 1em 0.1em rgba(255, 214, 120, 0.15); }
    50% { box-shadow: 0 0 2em 0.5em rgba(255, 214, 120, 0.4); }
}

.door-label {
    position: absolute;
    left: 50%;
    bottom: 1%;
    transform: translateX(-50%);
    font-size: 0.9em;
}

.peek {
    position: absolute;
    right: 1.5%;
    bottom: 2%;
    font-size: 0.85em;
}

/* ---- Homepage: het praatje, ballonnetjes uit de ramen en polaroids naast de gevel ---------------- */

/* Liggend links in de lucht naast het hotel (HomePitch "beside"), staand onder de gevel ("below"). */
.home-pitch {
    box-sizing: border-box;
    padding: 1em 1.1em;
    border-radius: var(--radius);
    background: rgba(12, 10, 30, 0.62);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 120, 200, 0.22);
    box-shadow: 0 0 2.5em rgba(255, 60, 170, 0.12);
    line-height: 1.45;
}

    .home-pitch h1 {
        margin: 0 0 0.4em;
        font-size: 1.55em;
        line-height: 1.15;
        font-weight: 700;
        color: #ffe3f3;
        text-shadow: 0 0 0.5em rgba(255, 70, 180, 0.65);
    }

    .home-pitch p { margin: 0.45em 0 0; font-size: 0.95em; }
    .home-pitch .home-tonight { font-size: 0.88em; }

    .home-pitch.beside { position: absolute; left: 2%; top: 5%; width: 23%; }
    .home-pitch.below { display: none; }

.home-online { display: flex; align-items: center; gap: 0.5em; font-weight: 600; color: #c9ffd9; }

.live-dot {
    width: 0.6em;
    height: 0.6em;
    flex-shrink: 0;
    border-radius: 50%;
    background: #3ee07a;
    animation: live-dot 1.8s ease-in-out infinite;
}

@keyframes live-dot {
    0%, 100% { box-shadow: 0 0 0 0 rgba(62, 224, 122, 0.6); }
    50% { box-shadow: 0 0 0 0.35em rgba(62, 224, 122, 0); }
}

/* Een ballonnetje zoals in het hotel, met het puntje op de bovenkant van het raam (left/top = dat punt). */
.facade-bubble {
    position: absolute;
    transform: translate(-50%, calc(-100% - 0.55em));
    padding: 0.3em 0.65em;
    border-radius: 0.7em;
    background: #fff;
    color: #1d1b2c;
    font-size: 0.95em;
    white-space: nowrap;
    pointer-events: none !important;
    box-shadow: 0 0.2em 0.8em rgba(0, 0, 0, 0.45);
    animation: facade-bubble 4.5s ease-out both;
}

    .facade-bubble::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -0.45em;
        transform: translateX(-50%);
        border: 0.5em solid transparent;
        border-top-color: #fff;
        border-bottom: 0;
    }

@keyframes facade-bubble {
    0% { opacity: 0; margin-top: 0.6em; scale: 0.7; }
    8% { opacity: 1; margin-top: 0; scale: 1; }
    80% { opacity: 1; }
    100% { opacity: 0; margin-top: -0.4em; }
}

/* Stapeltje polaroids rechts naast het hotel, onder de maan. De bovenste (p0) schuift om de 5 s opzij en achteraan. */
.polaroids {
    position: absolute;
    right: 3%;
    top: 31%;
    width: 19%;
    aspect-ratio: 0.95;
    cursor: pointer;
}

.polaroid {
    --x: 0%;
    --y: 0%;
    --r: 0deg;
    position: absolute;
    inset: 0 0 auto 0;
    margin: 0;
    padding: 5% 5% 0;
    background: #f6f1e7;
    border-radius: 0.2em;
    box-shadow: 0 0.6em 1.6em rgba(0, 0, 0, 0.55);
    transform: translate(var(--x), var(--y)) rotate(var(--r));
    transition: transform 0.6s ease, opacity 0.6s ease, box-shadow 0.3s;
}

    .polaroid img {
        display: block;
        width: 100%;
        aspect-ratio: 4 / 3;
        object-fit: cover;
        background: #111;
    }

    .polaroid figcaption {
        padding: 0.5em 0 0.65em;
        text-align: center;
        color: #2b2433;
        font-size: 0.9em;
        font-weight: 600;
        font-style: italic;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Plakbandje bovenop de voorste */
    .polaroid.p0::before {
        content: "";
        position: absolute;
        left: 50%;
        top: -0.55em;
        width: 34%;
        height: 1.2em;
        transform: translateX(-50%) rotate(-3deg);
        background: rgba(255, 236, 190, 0.55);
        box-shadow: 0 0 0.2em rgba(0, 0, 0, 0.15);
    }

    .polaroid.p0 { z-index: 4; --r: -4deg; }
    .polaroid.p1 { z-index: 3; --x: 9%; --y: 6%; --r: 5deg; }
    .polaroid.p2 { z-index: 2; --x: -8%; --y: 9%; --r: -10deg; }
    .polaroid.p3 { z-index: 1; --x: -8%; --y: 9%; --r: -10deg; opacity: 0; }
    .polaroids:hover .polaroid.p0 { box-shadow: 0 0 1.6em 0.3em rgba(255, 214, 120, 0.55); }

    /* Net van voren weg: eerst opzij (boven de rest), dan achter het stapeltje. */
    .polaroid.leaving { animation: polaroid-leave 0.9s ease-in-out both; transition: none; }

@keyframes polaroid-leave {
    0% { z-index: 5; opacity: 1; transform: rotate(-4deg); }
    45% { z-index: 5; opacity: 1; transform: translate(-70%, -4%) rotate(-16deg); }
    55% { z-index: 0; opacity: 1; }
    100% { z-index: 0; transform: translate(var(--x), var(--y)) rotate(var(--r)); }
}

/* ---- Homepage: screenshots onder de gevel ----------------------------------------------------- */

.home-shots {
    width: min(1100px, 92%);
    padding: 3em 0 4em;
    text-align: center;
}

    .home-shots h2 { font-size: 1.8em; }
    .home-shots > p.muted { max-width: 40em; margin: 0 auto; line-height: 1.5; }

.shots {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
    gap: 1.4em;
    margin: 2em 0;
    text-align: left;
}

    .shots figure {
        margin: 0;
        overflow: hidden;
        background: var(--panel-solid);
        border: 1px solid var(--line);
        border-radius: var(--radius);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
    }

    .shots img { display: block; width: 100%; aspect-ratio: 640 / 300; }
    .shots figcaption { padding: 0.8em 1em 1em; color: var(--muted); font-size: 0.95em; line-height: 1.45; }
    .shots figcaption strong { display: block; margin-bottom: 0.2em; color: var(--text); }

/* ---- Kledingkast ----------------------------------------------------------------------------- */

.turn {
    position: absolute;
    left: 15%;
    bottom: 3%;
    display: flex;
    gap: 0.6em;
}

.wardrobe-card {
    position: absolute;
    right: 2.5%;
    top: 4%;
    bottom: 4%;
    width: 55%;
    padding: 1.1em 1.3em;
    display: flex;
    flex-direction: column;
}

    .wardrobe-card .rows {
        flex: 1;
        overflow: auto;
        padding-right: 0.3em;
    }

.wrow {
    display: grid;
    grid-template-columns: 7.5em 1fr;
    align-items: center;
    gap: 0.6em;
    padding: 0.28em 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

    .wrow .swatches, .wrow .segmented { margin: 0; }
    .wrow.disabled .wlabel { color: #6d6079; }

.wlabel {
    font-size: 0.85em;
    color: var(--muted);
}

.stepper {
    display: flex;
    align-items: center;
    gap: 0.5em;
}

    .stepper .value {
        flex: 1;
        text-align: center;
        font-weight: 600;
    }

        .stepper .value.locked { color: var(--accent-2); }

/* ---- Passen: de kast en de spiegel (DresserPanel) -------------------------------------------- */

.dresser {
    padding: 1em 1.2em;
    display: flex;
    flex-direction: column;
}

    .dresser h2 { margin-bottom: 0.5em; }
    .dresser > p { margin: 0.5em 0 0; font-size: 0.85em; }
    .dresser > .row { margin-top: 0.7em; justify-content: flex-end; }

    /* In je kamer: rechts over de kamer, je avatar blijft links in beeld. */
    .dresser.in-room {
        position: absolute;
        right: 1.5%;
        top: 3%;
        width: 52%;
        max-height: 71%;
    }

.dresser-body {
    display: flex;
    gap: 0.9em;
    flex: 1;
    min-height: 0;
}

.dresser-tabs {
    display: flex;
    flex-direction: column;
    gap: 0.3em;
    min-width: 6.5em;
}

    .dresser-tabs button {
        font: inherit;
        font-size: 0.9em;
        text-align: left;
        padding: 0.5em 0.8em;
        color: var(--muted);
        background: rgba(255, 255, 255, 0.04);
        border: 0;
        border-radius: 8px;
        cursor: pointer;
    }

        .dresser-tabs button:hover { color: #fff; }
        .dresser-tabs button.on { color: #fff; background: var(--accent); }
        /* Hier zit iets voor stamgasten in wat je aan hebt */
        .dresser-tabs button.plus::after { content: " +"; font-weight: 800; color: var(--accent-2); }
        .dresser-tabs button.on.plus::after { color: #fff; }

.dresser-main {
    flex: 1;
    min-width: 0;
    overflow: auto;
    padding-right: 0.3em;
}

    .dresser-main .wlabel { margin: 0.2em 0 0.4em; }

.tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(5em, 1fr));
    gap: 0.45em;
    margin-bottom: 0.7em;
}

.tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2em;
    padding: 0.35em 0.3em 0.3em;
    font: inherit;
    font-size: 0.75em;
    color: var(--text);
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid transparent;
    border-radius: 10px;
    cursor: pointer;
}

    .tile:hover { background: rgba(255, 255, 255, 0.1); }
    .tile.on { border-color: var(--accent); background: rgba(255, 255, 255, 0.1); }

    .tile canvas {
        width: 100%;
        aspect-ratio: 1;
        border-radius: 7px;
        background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.02) 70%);
    }

    .tile span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

    .tile .badge {
        position: absolute;
        top: 0.3em;
        right: 0.3em;
        margin: 0;
        font-size: 0.8em;
        background: linear-gradient(135deg, #f2c24e, #c98a1a);
        color: #2a1a04;
    }

    .tile.locked canvas { opacity: 0.8; }

/* ---- In het hotel ---------------------------------------------------------------------------- */


.table-buttons {
    position: absolute;
    left: 1.2%;
    top: 2%;
    display: flex;
    gap: 0.4em;
}

    .table-buttons .btn { background: rgba(22, 15, 32, 0.75); }

/* Affiliate-link bij een speeltje in je hand ("Ook in het echt?"), bovenaan in het midden. */
.shop-link { position: absolute; top: 2%; left: 50%; transform: translateX(-50%); background: rgba(22, 15, 32, 0.8); text-decoration: none; font-size: 0.85em; }

/* Live webcam in een geboekte kamer: kleine beeldjes linksboven, de knop eronder. */
.live-cams {
    position: absolute;
    left: 1.2%;
    top: 2%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.4em;
    max-width: 62%;
}

    .live-cams .cam {
        position: relative;
        width: 13.5cqh;
        aspect-ratio: 4 / 3;
        background: #0c0812;
        border: 1px solid rgba(255, 90, 168, 0.55);
        border-radius: 0.5em;
        overflow: hidden;
    }

    .live-cams .cam.me video { transform: scaleX(-1); }   /* jezelf zie je gespiegeld */
    .live-cams .cam.dark video { opacity: 0.25; }

    .live-cams video { width: 100%; height: 100%; object-fit: cover; display: block; }

    .live-cams .cam span {
        position: absolute;
        left: 0.3em;
        bottom: 0.2em;
        font-size: 0.75em;
        color: #fff;
        text-shadow: 0 0 3px #000;
    }

    .live-cams .cam-toggle { align-self: flex-end; background: rgba(22, 15, 32, 0.75); }
    .live-cams .cam-error { flex-basis: 100%; font-size: 0.8em; color: var(--text); background: rgba(22, 15, 32, 0.8); padding: 0.3em 0.6em; border-radius: 0.5em; }

.say .invite { white-space: nowrap; }

.waiting {
    position: absolute;
    left: 50%;
    top: 4%;
    transform: translateX(-50%);
    padding: 0.4em 1em;
    font-size: 0.9em;
    color: var(--text);
    background: rgba(22, 15, 32, 0.75);
    border-radius: 999px;
}

/* Lades (menu, security-tools): schuiven van rechts over de ruimte in, met tabjes aan de rand die meeschuiven.
   Dicht = buiten beeld en onzichtbaar (pas na het wegschuiven). Klik in de ruimte (.drawer-scrim) = dicht. */
.drawer {
    --drawer-w: 32%;
    position: absolute;
    top: 0;
    right: 0;
    width: var(--drawer-w);
    height: 75%;
    padding: 0.9em;
    overflow-x: hidden;
    overflow-y: auto;
    border-right: 0;
    border-radius: var(--radius) 0 0 var(--radius);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
    z-index: 25;
}

    .drawer.open { transform: none; visibility: visible; transition: transform 0.25s ease; }
    .drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5em; margin-bottom: 0.3em; }

.drawer-scrim {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 75%;
    z-index: 24;
}

.drawer-tabs {
    position: absolute;
    right: 0;
    top: 3%;
    display: flex;
    flex-direction: column;
    gap: 0.35em;
    transition: right 0.25s ease;
    z-index: 26;
}

    .drawer-tabs.open { right: 32%; }
    .showcase .drawer-tabs { display: none; }

.drawer-tab {
    writing-mode: vertical-rl;
    display: flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.8em 0.4em;
    font: inherit;
    font-size: 0.85em;
    color: var(--text);
    background: rgba(22, 15, 32, 0.8);
    border: 1px solid var(--line);
    border-right: 0;
    border-radius: 0.6em 0 0 0.6em;
    cursor: pointer;
}

    .drawer-tab:hover { background: rgba(40, 28, 56, 0.9); }
    .drawer-tab.on { background: var(--accent); border-color: var(--accent); }
    .drawer-tab-icon { writing-mode: horizontal-tb; line-height: 1; }
        .drawer-tab-icon .icon { width: 1em; height: 1em; }

/* In de chatbalk (zie HotelBar), maar liggend net erboven over de ruimte: 100% = de balk (25% van de stage). */
.choices {
    position: absolute;
    left: 1.2%;
    right: 1.2%;
    bottom: calc(100% + 1.5cqh);
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em;
}

.chip {
    font: inherit;
    font-size: 0.85em;
    padding: 0.45em 0.9em;
    color: var(--text);
    background: rgba(22, 15, 32, 0.85);
    border: 1px solid rgba(255, 79, 163, 0.6);
    border-radius: 999px;
    cursor: pointer;
    backdrop-filter: blur(6px);
}

    .chip:hover { background: var(--accent); border-color: var(--accent); }

/* De chatbalk vult de onderste 25% (y 300–400 van de 400). */
.hotel-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 25%;
    display: grid;
    grid-template-columns: 1fr 24%;
    gap: 0.6em;
    padding: 0.5em 0.7em 0.6em;
    box-sizing: border-box;
    background: linear-gradient(#1a1226, #120c1a);
    border-top: 1px solid var(--line);
}

.chat {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.log {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column-reverse;
    font-size: 0.85em;
    line-height: 1.35;
    padding-right: 0.4em;
}

    .log .line b { margin-right: 0.4em; }
    .log .me b { color: var(--accent-2); }
    .log .guest b { color: var(--guest); }
    .log .npc b { color: var(--npc); }
    .log .system { color: var(--muted); font-style: italic; }

.say {
    display: flex;
    gap: 0.5em;
    margin-top: 0.35em;
}

    .say input { margin: 0; padding: 0.45em 0.8em; font-size: 0.95em; }
    .say .btn { padding: 0.45em 1em; }

    /* Privé met iemand die je aanklikte: een pilletje vóór de invoer, klik = weer tegen iedereen. */
    .say .whisper {
        display: flex;
        align-items: center;
        gap: 0.35em;
        flex: none;
        max-width: 40%;
        padding: 0 0.4em 0 0.75em;
        border-radius: 999px;
        background: var(--accent);
        color: #fff;
        font-size: 0.85em;
        white-space: nowrap;
    }

        .say .whisper span { overflow: hidden; text-overflow: ellipsis; }
        .say .whisper button { border: 0; background: rgba(0, 0, 0, 0.25); color: #fff; border-radius: 999px; width: 1.5em; height: 1.5em; cursor: pointer; line-height: 1; }

    .log .line .tag {
        display: inline-block;
        margin-right: 0.4em;
        padding: 0 0.45em;
        border-radius: 999px;
        background: var(--accent);
        color: #fff;
        font-size: 0.75em;
        font-style: normal;
        vertical-align: 0.1em;
    }

.people {
    min-height: 0;
    overflow-y: auto;
    padding-left: 0.6em;
    border-left: 1px solid var(--line);
    font-size: 0.85em;
}

    .people .logo { display: block; width: 100%; max-width: 11em; margin: 0.1em 0 0.4em -0.3em; }
    .people .room { font-weight: 700; margin-bottom: 0.3em; }

    .people .balance {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.4em;
        margin-bottom: 0.4em;
        color: #ffd479;
        font-weight: 600;
    }

.btn.tiny { padding: 0.15em 0.6em; font-size: 0.8em; border-radius: 999px; }
    .people .status { color: #ffcf7a; font-size: 0.85em; margin-bottom: 0.3em; }
    .people ul { list-style: none; margin: 0; padding: 0; }
    .people li { padding: 0.1em 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

        .people li::before {
            content: "";
            display: inline-block;
            width: 0.5em;
            height: 0.5em;
            margin-right: 0.45em;
            border-radius: 999px;
            background: var(--guest);
        }

        .people li.me::before { background: var(--accent); }
        .people li.npc::before { background: var(--npc); }

    /* De conciërge: belletje voor de naam (vervangt het bolletje), opent het paneel hieronder. */
    .people li:has(.mod-open)::before { display: none; }
    .people .mod-open {
        display: inline-block;
        vertical-align: -0.15em;
        width: 1.05em;
        height: 1.05em;
        margin: 0 0.3em 0 -0.1em;
        padding: 0;
        background: none;
        border: 0;
        cursor: pointer;
        color: #ffd479;
        opacity: 0.7;
    }
        .people .mod-open:hover, .people .mod-open.on { opacity: 1; }
        .people .mod-open svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }

    /* BT weggeven: cadeautje achter de naam. */
    .people .gift-open {
        margin-left: 0.3em;
        padding: 0;
        background: none;
        border: 0;
        cursor: pointer;
        color: var(--accent);
        opacity: 0.55;
    }
        .people .gift-open:hover, .people .gift-open.on { opacity: 1; }
    /* Meer (⋯): vriend worden, briefje, negeren. Hartje = vriend; doorgestreept = genegeerd. */
    .people .person-open {
        margin-left: 0.25em;
        padding: 0 0.15em;
        background: none;
        border: 0;
        cursor: pointer;
        color: inherit;
        font: inherit;
        opacity: 0.45;
    }
        .people .person-open:hover, .people .person-open.on { opacity: 1; }
    .people .friend { margin-left: 0.25em; color: var(--accent); }
    .people .badge-icon { margin-left: 0.25em; font-size: 0.9em; }
    .people li.ignored { opacity: 0.5; }
        .people li.ignored > button.link, .people li.ignored { text-decoration: line-through; }
        .people li.ignored .person-open { text-decoration: none; }
    .people .social-bar { display: flex; gap: 0.3em; margin-bottom: 0.4em; }
.badge-count {
    display: inline-block;
    min-width: 1.3em;
    margin-left: 0.35em;
    padding: 0 0.35em;
    border-radius: 999px;
    background: #ffd479;
    color: #1a1020;
    font-size: 0.8em;
    font-weight: 700;
    text-align: center;
    line-height: 1.3em;
}
    .gift .row { display: flex; gap: 0.4em; }
        .gift .row input { flex: 1; min-width: 0; margin: 0; }

/* Zich verhuren: de prijslijst van wie je aanklikte, en de prijzen in je kamer. */
.euro { color: #f2c230; font-weight: 700; }
.hire-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3em; }
    .hire-list li { display: flex; align-items: center; gap: 0.5em; }
        .hire-list li > span:first-child { flex: 1; }
    .hire-list .price { color: #f2c230; font-weight: 600; white-space: nowrap; }
    .hire-list .paid { color: #8fe3a8; white-space: nowrap; }
.hire-prices { display: flex; flex-direction: column; gap: 0.35em; margin: 0.4em 0 0.6em; }
    .hire-prices label { display: flex; align-items: center; gap: 0.5em; }
        .hire-prices label > span:first-child { flex: 1; }
        .hire-prices input { width: 5em; margin: 0; padding: 0.25em 0.5em; }
/* Hotel-security: schildje bij wie in dienst is, balkje om te roepen, en de portofoon. */
.icon { display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -0.17em; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
    .icon.shield { color: #ffd479; fill: rgba(255, 212, 121, 0.25); }

    .people li.security::before { display: none; }
    .people li.security .shield { margin: 0 0.3em 0 -0.1em; }
    .people li.security { color: #ffe3a3; }

    /* Stamgast: gouden naam met een ster (vervangt het bolletje) */
    .people li.stamgast:not(.security)::before { display: none; }
    .people li.stamgast .star { color: #f2c14e; margin: 0 0.3em 0 -0.05em; }
    .people li.stamgast, .people li.stamgast button.link { color: #f2c14e; }

    .people .event-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.4em;
        margin-bottom: 0.4em;
        color: #ffc6e8;
    }

    .people .security-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.4em;
        margin-bottom: 0.4em;
        color: #ffe3a3;
    }

.security-call {
    position: absolute;
    right: 1.2%;
    bottom: 26%;
    width: 30%;
    padding: 0.8em 0.9em;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

    .security-call input { margin: 0; }

.radio {
    position: absolute;
    left: 1.2%;
    top: 2%;
    width: 28%;
    max-height: 70%;
    overflow-y: auto;
    padding: 0.7em 0.9em;
    border-color: #ffd479;
    box-shadow: 0 0 0 1px rgba(255, 212, 121, 0.35), 0 0.6em 2em rgba(0, 0, 0, 0.5);
}

    .radio-head { display: flex; align-items: center; gap: 0.4em; color: #ffd479; margin-bottom: 0.3em; }
    .radio-call { padding: 0.45em 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 0.3em; }
        .radio-call .btn { padding: 0.3em 0.6em; font-size: 0.85em; }

.concierge {
    position: absolute;
    right: 1.2%;
    bottom: 26%;
    width: 30%;
    padding: 0.8em 0.9em;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

    .concierge-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5em; }
    .concierge input { margin: 0; }
    .concierge-buttons { display: flex; flex-wrap: wrap; gap: 0.35em; }
        .concierge-buttons .btn { flex: 1 1 40%; padding: 0.35em 0.5em; font-size: 0.85em; }
    .btn.danger { border-color: #ff8a9a; color: #ffb3bf; }
    .security-tools { display: flex; flex-direction: column; gap: 0.5em; }
        .security-tools input { margin: 0; min-width: 0; }
        .security-tools .row .btn { flex: none; }

/* Wat kost wat (in "BT kopen") */
.price-list { font-size: 0.85em; }
    .price-list summary { cursor: pointer; }
    .price-list table { width: 100%; border-collapse: collapse; margin: 0.4em 0; }
    .price-list td { padding: 0.12em 0; }
    .price-list td.price { text-align: right; white-space: nowrap; padding-left: 0.6em; color: #ffd479; }
    .price-list p { margin: 0; }
.concierge.phone { max-height: 72%; overflow-y: auto; }
    .buy-reason { display: flex; flex-direction: column; gap: 0.2em; padding: 0.5em 0.6em; border-radius: 0.5em;
                  background: rgba(255, 180, 60, 0.15); border: 1px solid rgba(255, 196, 90, 0.55); }
        .buy-reason b { color: #ffd479; }
        .buy-reason span { font-size: 0.85em; }

/* Betalen door te bellen (BT kopen, stamgast) */
.phone-pay { display: flex; flex-direction: column; gap: 0.5em; align-items: flex-start; }
    .phone-pay p { margin: 0; }
    .phone-pay .row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4em; }
    .phone-pay .segmented button { font-size: 0.85em; }
    .phone-call { align-self: stretch; text-align: center; padding: 0.6em; border: 1px solid var(--line); border-radius: 0.6em; }
    .phone-number { font-size: 1.35em; font-weight: 700; letter-spacing: 0.04em; margin: 0.1em 0 0.3em; }
    .phone-code { font-size: 1.6em; font-weight: 700; letter-spacing: 0.15em; color: #ffd479; margin: 0.1em 0 0.3em; }
    .phone-pay .ideal { align-self: stretch; display: flex; flex-direction: column; gap: 0.35em; border-top: 1px solid var(--line); padding-top: 0.5em; }
    .phone-pay .ideal-products { display: flex; flex-wrap: wrap; gap: 0.4em; }
    .phone-pay .ideal-products a.btn { text-decoration: none; font-size: 0.9em; }
        .security-tools .row { align-items: center; }
        .security-tools select { flex: 1; min-width: 0; font: inherit; padding: 0.3em; border-radius: 0.4em; background: rgba(0, 0, 0, 0.35); color: inherit; border: 1px solid rgba(255, 255, 255, 0.2); }
        .security-tools a.btn { text-align: center; text-decoration: none; }

/* ---- Moderator (/moderator): gewone scrollende pagina, geen canvas ------------------------- */

#app:has(.mod-page) { display: block; overflow-y: auto; }

.mod-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.2rem 1.2rem 3rem;
    font-size: 15px;
}

.mod-head {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 1rem;
}

    .mod-head img { height: 2.2rem; }
    .mod-head h1 { flex: 1; margin: 0; font-size: 1.4rem; font-weight: 650; }
    .mod-head a { text-decoration: none; }

.mod-tabs { max-width: 32rem; }
.mod-box { padding: 1rem 1.2rem; margin-bottom: 1rem; }
.mod-block { max-width: 32rem; }

label.check { display: flex; align-items: center; gap: 0.5em; color: var(--text); font-size: 0.95em; }
    label.check input { width: auto; margin: 0; }

/* Aan/uit = een schakelaar (vinkjes in label.check, en input.switch los, bv. in een tabel). */
label.check input[type="checkbox"], input[type="checkbox"].switch {
    appearance: none;
    -webkit-appearance: none;
    flex: none;
    position: relative;
    width: 2.3em;
    height: 1.3em;
    padding: 0;
    margin: 0;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    cursor: pointer;
    transition: background 0.15s;
}
    label.check input[type="checkbox"]::after, input[type="checkbox"].switch::after {
        content: "";
        position: absolute;
        top: 0.13em;
        left: 0.13em;
        width: 0.98em;
        height: 0.98em;
        border-radius: 50%;
        background: var(--text);
        transition: transform 0.15s;
    }
    label.check input[type="checkbox"]:checked, input[type="checkbox"].switch:checked { background: var(--accent); border-color: var(--accent); }
    label.check input[type="checkbox"]:checked::after, input[type="checkbox"].switch:checked::after { transform: translateX(1em); }
    label.check input[type="checkbox"]:focus-visible, input[type="checkbox"].switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
    label.check input[type="checkbox"]:disabled, input[type="checkbox"].switch:disabled { opacity: 0.5; cursor: default; }
label.check { cursor: pointer; }

.mod-tap { margin-top: 0.6em; }
    .mod-tap td.wide { width: 100%; white-space: pre-wrap; word-break: break-word; }
.mod-page > label.check { margin: 0.6em 0; }
.mod-tap tr.private td { background: rgba(255, 79, 163, 0.06); }
.mod-search label.check { white-space: nowrap; }

.mod-search {
    display: flex;
    gap: 0.5em;
    max-width: 32rem;
    margin-bottom: 0.8rem;
}

    .mod-search input { margin: 0; }

.mod-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92em;
}

    .mod-table th { text-align: left; font-weight: 600; color: var(--muted); padding: 0.4em 0.6em; border-bottom: 1px solid var(--line); }
    .mod-table td { padding: 0.35em 0.6em; border-bottom: 1px solid var(--line); vertical-align: middle; }
    .mod-table tr:hover td { background: rgba(255, 255, 255, 0.03); }
    .mod-table .nowrap { white-space: nowrap; }
    .mod-table .badge { background: var(--guest); }
    .mod-table .badge.acc { background: #c9a227; }

.link {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    text-decoration: underline dotted rgba(255, 255, 255, 0.35);
}

    .link:hover { color: var(--accent-2); }

.g-f, .g-m { font-size: 1.25em; font-weight: 700; line-height: 1; }
.g-f { color: #ff7cc4; }
.g-m { color: #6fb3ff; }
.mod-link { display: block; box-sizing: border-box; text-align: center; text-decoration: none; }

/* ---- Laden en fouten ------------------------------------------------------------------------- */

/* Opstarten (index.html): de gevel op de plek en maat van de stage (640:400 passend in het venster, zoals babbeltijd.js),
   met de laadtekst waar straks "Naar binnen" staat. */
.boot {
    position: relative;
    flex-shrink: 0;
    width: min(100vw, 160vh);
    aspect-ratio: 640 / 400;
    container-type: size;
    font-size: clamp(11px, 2.05cqh, 17px);
}

    .boot img { display: block; width: 100%; height: 100%; }

/* Blazor staat er, maar de canvas tekent nog niet (en babbeltijd.js gaf de stage nog geen maat): dezelfde gevel. */
.page.home .stage {
    width: min(100vw, 160vh);
    height: min(62.5vw, 100vh);
    background: url("../data/gfx/title/title.png") center / 100% 100%;
}

.loading {
    position: absolute;
    left: 50%;
    bottom: 1%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 0.85em;
    font-weight: 600;
    color: #fff;
    background: rgba(20, 16, 30, 0.75);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 0.6em 1em;
    animation: boot-pulse 1.6s ease-in-out infinite;
}

@keyframes boot-pulse { 50% { opacity: 0.6; } }

/* Introtekst in index.html (voor zoekmachines), onder de gevel tot de app geladen is. */
.seo-intro {
    max-width: 40rem;
    margin: 1.5rem auto 0;
    padding: 0 1rem;
    font-size: 0.9rem;
    color: var(--muted);
}

.seo-intro h1 {
    font-size: 1.1rem;
}

#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0.6rem 1.25rem;
    box-sizing: border-box;
    background: #aa0033;
    color: #fff;
    z-index: 1000;
}

    #blazor-error-ui .reload { color: #ffe08a; }

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.load-error {
    position: fixed;
    top: 1rem;
    left: 1rem;
    right: 1rem;
    z-index: 10;
    color: #ff7cc4;
    white-space: pre-wrap;
    font-size: 12px;
}

/* ---- Eigen kamer (RoomPanel) ------------------------------------------------------------------ */

/* Het kamerpaneel staat waar de kast staat (.dresser.in-room), met de vakjes links. */
/* Uitleg (HelpPanel): midden over de ruimte, onderwerpen om open te klikken */
.help-panel {
    position: absolute;
    left: 50%;
    top: 4%;
    transform: translateX(-50%);
    width: 58%;
    max-height: 66%;
    display: flex;
    flex-direction: column;
    z-index: 30;
    background: rgba(21, 16, 28, 0.95);   /* iets dichter dan andere panelen: veel tekst */
}
    .help-panel .help-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5em; }
    .help-panel .help-head h2 { margin: 0; }
    .help-panel > p { margin: 0.3em 0 0.6em; }
    .help-panel .help-body { overflow-y: auto; min-height: 0; padding-right: 0.3em; }
    .help-panel details { border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 0.35em 0; }
    .help-panel summary { cursor: pointer; font-weight: 600; }
    .help-panel .prose { white-space: pre-wrap; line-height: 1.45; margin: 0.35em 0 0.2em; }
/* Op de homepage (buiten de stage): als vaste laag over de pagina */
.help-page { position: fixed; inset: 0; background: rgba(8, 6, 14, 0.6); z-index: 50; }
    .help-page .help-panel { top: 6%; width: min(46em, 92vw); max-height: 86vh; font-size: 16px; }

/* Snapfoto (SnapViewer): de foto zo groot als past, met een balkje dat in 10 seconden leegloopt */
.snap-viewer { width: auto; max-width: 70%; max-height: 72%; }
    .snap-viewer .snap-frame { position: relative; display: flex; justify-content: center; min-height: 0; margin: 0.4em 0; }
    .snap-viewer .snap-frame img { max-width: 100%; max-height: 58cqh; object-fit: contain; border-radius: 6px; user-select: none; -webkit-user-drag: none; }
    .snap-viewer .snap-time { position: absolute; left: 0; right: 0; bottom: -0.35em; height: 4px; background: rgba(255, 255, 255, 0.12); border-radius: 2px; overflow: hidden; }
    .snap-viewer .snap-time span { display: block; height: 100%; background: #ff5aa8; animation: snap-time linear forwards; }
    .snap-viewer .row input { flex: 1; min-width: 0; }
@keyframes snap-time { from { width: 100%; } to { width: 0; } }
.log .snap-open { margin-left: 0.4em; padding: 0 0.6em; }
label.btn.busy { opacity: 0.6; pointer-events: none; }

.room-panel { min-height: 40%; }
    .room-panel .room-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5em; }
    .room-panel .room-head h2 { margin: 0 0 0.5em; }
    .room-panel .room-body { overflow: auto; min-height: 0; }
    .room-panel .prose { white-space: pre-wrap; line-height: 1.45; }

/* Meekijken op de tv */
.watch-tag { align-self: center; padding: 0.2em 0.7em; border-radius: 999px; background: rgba(208, 16, 42, 0.85); color: #fff; font-size: 0.85em; }

/* Vrienden en hotelpost: zelfde plek als het kamerpaneel */
.social-panel h3 { margin: 0.6em 0 0.3em; font-size: 0.95em; }
    .social-panel h3:first-child { margin-top: 0; }
.social-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35em; }
    .social-list li { display: flex; align-items: center; justify-content: space-between; gap: 0.5em; padding: 0.3em 0; border-top: 1px solid var(--line); }
    .social-list .who { display: flex; flex-direction: column; min-width: 0; }
    .social-list .actions { display: flex; gap: 0.3em; flex: none; }
    .social-list li.online .who b::before { content: ""; display: inline-block; width: 0.5em; height: 0.5em; margin-right: 0.4em; border-radius: 999px; background: #8fe3a8; }
    .social-list li.offline { opacity: 0.7; }
.mail-panel { height: 71%; }
    .mail-threads { max-width: 11em; overflow-y: auto; }
        .mail-threads button { display: flex; align-items: center; gap: 0.3em; }
        .mail-threads .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
        .mail-threads button.unread .name { font-weight: 700; color: #fff; }
        .mail-threads .count { background: #ffd479; color: #1a1020; border-radius: 999px; padding: 0 0.4em; font-size: 0.8em; font-weight: 700; }
    .mail-main { display: flex; flex-direction: column; gap: 0.4em; }
        .mail-main input { margin: 0; }
    .mail-thread { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 0.45em; min-height: 3em; }
    .mail-item { align-self: flex-start; max-width: 85%; padding: 0.35em 0.6em; border-radius: 0.6em; background: rgba(255, 255, 255, 0.06); }
        .mail-item.mine { align-self: flex-end; background: rgba(255, 124, 196, 0.16); }
        .mail-item .prose { white-space: pre-wrap; }
    .mail-write { display: flex; flex-direction: column; gap: 0.35em; }
        .mail-write textarea { font: inherit; resize: none; padding: 0.4em 0.5em; border-radius: 0.5em; background: rgba(0, 0, 0, 0.35); color: inherit; border: 1px solid rgba(255, 255, 255, 0.2); }
        .mail-write .row { display: flex; justify-content: flex-end; gap: 0.4em; }

/* Webcam: gespiegeld zoals in een spiegel (de foto wordt ook zo bewaard) */
.webcam {
    position: relative;
    aspect-ratio: 16 / 9;
    margin-bottom: 0.6em;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid var(--line);
}

    .webcam video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); display: block; }
    .webcam:not(.on) video { visibility: hidden; }

    .webcam-off {
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        padding: 1em;
        text-align: center;
        font-size: 0.85em;
        color: var(--muted);
    }

    .webcam .rec {
        position: absolute;
        left: 0.6em;
        top: 0.5em;
        padding: 0.15em 0.55em;
        font-size: 0.8em;
        font-weight: 700;
        color: #fff;
        background: rgba(200, 20, 50, 0.85);
        border-radius: 999px;
        animation: rec-blink 1s steps(2) infinite;
    }

@keyframes rec-blink { 50% { opacity: 0.55; } }

    .webcam .face {
        position: absolute;
        left: 50%;
        bottom: 0.5em;
        transform: translateX(-50%);
        padding: 0.2em 0.7em;
        font-size: 0.8em;
        white-space: nowrap;
        color: #fff;
        background: rgba(20, 12, 30, 0.75);
        border-radius: 999px;
    }

        .webcam .face.ok { background: rgba(30, 120, 70, 0.8); }

.badge.vip { background: linear-gradient(135deg, #f2c24e, #c98a1a); color: #2a1a04; vertical-align: middle; }

textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0.6em 0.8em;
    font: inherit;
    color: var(--text);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--line);
    border-radius: 10px;
    outline: none;
    resize: vertical;
}

    textarea:focus { border-color: var(--accent); }

.upload { display: flex; align-items: center; gap: 0.7em; flex-wrap: wrap; margin-bottom: 0.6em; }
    .upload label.btn { margin: 0; color: #fff; }
    .upload input[type=file] { display: none; }

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7.5em, 1fr));
    gap: 0.6em;
    margin-top: 0.6em;
}

    .gallery figure { margin: 0; }
    .gallery figure.dim { opacity: 0.55; }
    .gallery figcaption { margin-top: 0.25em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .gallery .btn.tiny { margin-top: 0.25em; }

    .gallery .thumb {
        position: relative;
        display: block;
        width: 100%;
        aspect-ratio: 1;
        padding: 0;
        border: 1px solid var(--line);
        border-radius: 10px;
        overflow: hidden;
        background: rgba(0, 0, 0, 0.3);
        cursor: pointer;
    }

        .gallery .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

        .gallery .thumb .play {
            position: absolute;
            inset: 0;
            display: grid;
            place-items: center;
            font-size: 1.8em;
            color: #fff;
            text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
        }

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6em;
    background: rgba(6, 4, 12, 0.88);
    cursor: zoom-out;
}

    .lightbox img, .lightbox video { max-width: 92vw; max-height: 82vh; border-radius: 10px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6); }
    .lightbox video { cursor: default; }
    .lightbox-caption { color: var(--text); max-width: 80vw; text-align: center; }

.diary { border-bottom: 1px solid var(--line); padding: 0.45em 0; }
    .diary-title { font: inherit; font-weight: 600; color: var(--text); background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
    .diary-title .muted { font-weight: 400; margin-right: 0.4em; }
.diary-form { display: grid; gap: 0.5em; margin-bottom: 0.8em; }
    .diary-form input { margin: 0; }

.vip-packages { display: grid; gap: 0.45em; margin-top: 0.7em; }

/* Namen in de lijst met een eigen kamer: klikbaar */
button.link { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 0.2em; }

/* Conciërge: foto's, films en dagboek beoordelen */
.mod-media { display: grid; grid-template-columns: repeat(auto-fill, minmax(13em, 1fr)); gap: 0.8em; margin-top: 0.6em; }
    .mod-media figure { margin: 0; }
    .mod-media figure.dim { opacity: 0.55; }
    .mod-media a { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.3); }
    .mod-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .mod-media .play { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2em; color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8); }
    .mod-media figcaption { margin-top: 0.35em; }
    .mod-media .row { flex-wrap: wrap; margin-top: 0.35em; }
.mod-choices-head { margin: 1em 0 0.2em; font-size: 1.05em; }
.mod-choices td.wide { width: 100%; }
    .mod-choices input { width: 100%; box-sizing: border-box; }
.mod-prices input { width: 5.5em; margin: 0; }
.mod-prices th { text-align: left; }
.mod-events th { text-align: left; }
.mod-events input[type=number] { display: inline-block; width: 4.5em; margin: 0; }
.mod-events input[type=time] { display: inline-block; width: 7.5em; margin: 0; padding: 0.25em 0.4em; }
.mod-events input[type=checkbox]:not(.switch) { width: auto; margin: 0 0.15em 0 0; }
.mod-day { display: inline-flex; align-items: center; margin-right: 0.45em; font-size: 0.9em; }
.mod-diary { margin-top: 0.7em; padding: 0.8em 1em; }
    .mod-diary h3 { margin: 0.35em 0 0; font-size: 1.05em; }
    .mod-diary .prose { white-space: pre-wrap; }

/* Stellen: wie is er (chatbalk), wie kleedt zich aan (kast), en het teken in de lijst */
.couple-switch, .couple-dress { margin: 0.3em 0; }
.couple-switch button { font-size: 0.85em; padding: 0.25em 0.3em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.people li .couple { margin-left: 0.35em; color: var(--accent); }
.couple-person { display: grid; gap: 0.35em; padding: 0.5em 0; border-top: 1px solid rgba(255,255,255,0.08); }

.home-tonight {
    color: #ffc6e8;
    margin: 0.6em 0;
}

/* ---- Mobiel ---------------------------------------------------------------------------------- */

/* Alleen staand (mobiel) nodig: de lijst met aanwezigen zit dan achter een knopje. */
.people-toggle, .people-close { display: none; }

/* Touchscreen: geen dubbeltik-zoom op knoppen, en het spel krijgt tikken zelf (babbeltijd.js). */
button, .btn, .chip, a { touch-action: manipulation; }
.game-canvas { touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }

@media (hover: none) and (pointer: coarse) {
    /* Kleiner dan 16px laat iOS bij het typen inzoomen. */
    input, textarea, select { font-size: 16px !important; }
    .btn.tiny { padding: 0.3em 0.7em; }
    .chip { padding: 0.55em 1em; }
    /* Liggend op een telefoon: de knopjes in één rij die je opzij veegt, niet drie rijen over de ruimte. */
    html:not(.portrait) .choices {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        mask-image: linear-gradient(to right, #000 calc(100% - 2em), transparent);
    }
        html:not(.portrait) .choices::-webkit-scrollbar { display: none; }
        html:not(.portrait) .choices .chip { flex: none; white-space: nowrap; }
}

/* Telefoon rechtop in het hotel: vragen om hem te draaien (babbeltijd.js zet .upright op <html>). */
.rotate-hint { display: none; }
.upright .rotate-hint {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 1000;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    padding: 2em;
    text-align: center;
    color: #f3e6c8;
    background: #120a14;
}
    .upright .rotate-hint h2 { margin: 0; font-size: 1.4em; }
    .upright .rotate-hint p { margin: 0; opacity: 0.8; max-width: 20em; }
.rotate-phone { font-size: 3.5em; animation: rotate-phone 2.4s ease-in-out infinite; }
@keyframes rotate-phone {
    0%, 25% { transform: rotate(0deg); }
    55%, 100% { transform: rotate(-90deg); }
}

/* Staand: babbeltijd.js zet .portrait op <html> als het venster veel hoger is dan de stage (640:400 op de volle breedte).
   De ruimte (bovenste 75% van de stage) staat bovenaan, de chatbalk vult de rest van het scherm (--vh = de zichtbare
   hoogte, dus ook boven het toetsenbord) en grote panelen komen als "sheet" onder de ruimte, over de balk. */
.portrait #app {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--vv-top, 0px);
    height: var(--vh, 100%);
}

.portrait .page { justify-content: flex-start; }
/* Homepage staand: het praatje onder de gevel, geen polaroids (die staan hieronder als screenshots), kleinere ballonnetjes. */
.portrait .home-pitch.beside, .portrait .polaroids { display: none; }
.portrait .home-pitch.below { display: block; width: min(1100px, 92%); margin-top: 1em; text-align: center; }
.portrait .home-online { justify-content: center; }
.portrait .facade-bubble { font-size: 0.72em; }
.portrait .page:not(.home) { overflow: hidden; }
.portrait .stage { font-size: 14px; }

.portrait .hotel-bar {
    top: 75%;
    bottom: auto;
    height: calc(var(--vh) - var(--stage-h) * 0.75);
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0.4em 0.6em calc(0.5em + env(safe-area-inset-bottom, 0px));
}

.portrait .log { order: 0; font-size: 0.95em; }

.portrait .choices {
    position: static;
    order: 1;
    margin-top: 0.4em;
    max-height: 45%;
    overflow-y: auto;
}

    .portrait .chip { font-size: 0.95em; }

.portrait .say { order: 2; flex-wrap: wrap; gap: 0.4em; }
    .portrait .say input { flex: 1 1 8em; width: auto; min-width: 0; }
    .portrait .say > .btn.primary:last-child { flex: none; }
    .portrait .say .whisper { min-height: 2em; }

.portrait .people-toggle { display: inline-block; }

/* De lijst met aanwezigen (met tegoed, post, vrienden): over de geschiedenis, met een kruisje. */
.portrait .people {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 5;
    padding: 0.6em 0.9em calc(0.6em + env(safe-area-inset-bottom, 0px));
    border-left: 0;
    background: var(--panel-solid);
    font-size: 1em;
}

    .portrait .people.open { display: block; }
    .portrait .people .logo { max-width: 9em; }
    .portrait .people li { padding: 0.3em 0; }
    .portrait .people-close { display: block; float: right; font-size: 1.2em; padding: 0.1em 0.3em; text-decoration: none; }

/* Panelen: onder de ruimte, over de chatbalk (je ziet jezelf bovenin). */
.portrait .stage .help-panel,
.portrait .stage .dresser.in-room,
.portrait .stage .concierge,
.portrait .stage .security-call,
.portrait .stage .radio,
.portrait .stage .mail-panel {
    position: absolute;
    left: 1.5%;
    right: 1.5%;
    top: calc(75% + 0.3em);
    bottom: auto;
    width: auto;
    height: auto;
    min-height: 0;
    max-height: calc(var(--vh) - var(--stage-h) * 0.75 - 0.6em);
    transform: none;
    overflow-y: auto;
    z-index: 20;
    background: rgba(21, 16, 28, 0.97);
}

/* Lades staand: over het hele zichtbare scherm (ook de chatbalk), de ruimte erachter iets donkerder. */
.portrait .stage .drawer { --drawer-w: 82%; height: var(--vh); z-index: 45; }
.portrait .stage .drawer-tabs { z-index: 46; }
    .portrait .stage .drawer-tabs.open { right: 82%; }
.portrait .stage .drawer-scrim { height: var(--vh); background: rgba(0, 0, 0, 0.35); z-index: 44; }

    .portrait .stage .mail-panel { height: calc(var(--vh) - var(--stage-h) * 0.75 - 0.6em); }
    .portrait .dresser-tabs { min-width: 5.5em; }

.portrait .live-cams .cam { width: 24vw; }

/* De ingang: het formulier over de gevel heen, op de volle breedte. */
.portrait .entrance-card {
    left: 3%;
    right: 3%;
    top: 3%;
    width: auto;
    max-height: calc(var(--vh) - 1.5em);
    z-index: 40;
    font-size: 15px;
}