/* Rad van Fortuin — vrolijke, kindvriendelijke fullscreen styling */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

:root {
    --pink: #ff4fa3;
    --purple: #7b2ff7;
    --yellow: #ffd23f;
    --cyan: #21d4fd;
    --card: #2a1a5e;
}

html, body {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;   /* geen rubber-band/scroll op mobiel */
    font-family: 'Fredoka', system-ui, sans-serif;
    color: #fff;
    background: radial-gradient(circle at 20% 10%, #3a1c71 0%, #1b1040 45%, #0d0826 100%);
    user-select: none;
    touch-action: manipulation;
}

/* Geen grijze balken in fullscreen: backdrop + fullscreen-element donker maken */
::backdrop { background: #0d0826; }
html:fullscreen, body:fullscreen {
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 20% 10%, #3a1c71 0%, #1b1040 45%, #0d0826 100%);
}

#app {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;   /* titel + rad als groep verticaal centreren */
    gap: clamp(28px, 4.5vh, 48px);
    /* Ruimte onderaan voor de kiezer/knoppen-balk (incl. iOS safe-area), zodat het
       blok daarboven gecentreerd staat. Bovenaan onder de notch vandaan. */
    padding-top: calc(6px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(clamp(80px, 12vh, 104px) + env(safe-area-inset-bottom, 0px));
}

/* ---- Titel net boven het rad ---- */
#topbar {
    width: 100%;
    text-align: center;
    padding: 0 16px;
    flex: 0 0 auto;
}
#theme {
    font-family: 'Baloo 2', cursive;
    font-weight: 800;
    font-size: clamp(20px, 4.6vw, 52px);
    line-height: 1.05;
    text-shadow: 0 3px 0 rgba(0,0,0,.25), 0 0 24px rgba(123,47,247,.5);
    background: linear-gradient(90deg, var(--yellow), var(--pink), var(--cyan));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
#config-name {
    margin-top: 4px;
    font-size: clamp(13px, 2vw, 18px);
    color: rgba(255,255,255,.55);
    letter-spacing: .5px;
}

/* ---- Speelveld ---- */
#stage {
    flex: 0 0 auto;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    position: relative;
}

/* ---- Draaiend rad ---- */
#wheel-wrap {
    position: relative;
    aspect-ratio: 1;
    height: min(68vh, 88vw);
    max-height: 68vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
#wheel {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #0d0826;
    box-shadow: 0 0 0 12px #fff, 0 0 0 20px var(--purple),
                0 18px 50px rgba(0,0,0,.55), inset 0 0 60px rgba(0,0,0,.35);
    cursor: grab;
    transition: none;
    touch-action: none;   /* swipe stuurt het rad i.p.v. de pagina */
}
#wheel:active { cursor: grabbing; }

#pointer {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: clamp(40px, 8vw, 70px);
    color: var(--yellow);
    z-index: 5;
    filter: drop-shadow(0 4px 4px rgba(0,0,0,.5));
    pointer-events: none;
}

/* Draai-knop in het midden van het wiel */
#spin-btn, #slot-btn {
    position: absolute;
    border: none;
    cursor: pointer;
    font-family: 'Baloo 2', cursive;
    font-weight: 800;
    color: #5a1d00;
    background: radial-gradient(circle at 35% 30%, #fff6cf, var(--yellow));
    box-shadow: 0 6px 0 #c79a00, 0 10px 22px rgba(0,0,0,.4);
    transition: transform .08s, box-shadow .08s;
}
#spin-btn {
    width: 22%;
    height: 22%;
    border-radius: 50%;
    font-size: clamp(15px, 2.4vw, 26px);
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
}
#spin-btn:active { transform: translate(-50%, -47%); box-shadow: 0 3px 0 #c79a00, 0 5px 12px rgba(0,0,0,.4); }
#slot-btn {
    position: static;
    margin-top: 38px;
    padding: 13px 44px;
    border-radius: 999px;
    font-size: clamp(18px, 2.6vw, 28px);
}
#slot-btn:active { transform: translateY(3px); box-shadow: 0 3px 0 #c79a00; }
button:disabled { filter: grayscale(.6) brightness(.8); cursor: default; }

/* ---- Slot machine (rollende ring met venster) ---- */
#slot-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
}
#slot-window {
    position: relative;
    width: min(56vh, 82vw);
    max-width: 460px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, #160d38 60%, #2a1a5e 100%);
    box-shadow: 0 0 0 12px #fff, 0 0 0 20px var(--purple),
                0 18px 50px rgba(0,0,0,.55), inset 0 0 70px rgba(0,0,0,.5);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: none;   /* swipe start de slot i.p.v. de pagina */
}
#slot-reel {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    will-change: transform;
}
.slot-item {
    height: var(--slot-h, 110px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Baloo 2', cursive;
    font-weight: 800;
    font-size: clamp(26px, 6vw, 56px);
    text-align: center;
    padding: 0 14px;
    color: #fff;
    text-shadow: 0 2px 6px rgba(0,0,0,.5);
    border-bottom: 3px solid rgba(255,255,255,.85);  /* scheidingslijn zoals op het rad */
}
/* Venster-band over het midden */
#slot-frame {
    position: absolute;
    left: 0; right: 0; top: 50%;
    height: var(--slot-h, 110px);
    transform: translateY(-50%);
    pointer-events: none;
    border-top: 4px solid rgba(255,255,255,.9);
    border-bottom: 4px solid rgba(255,255,255,.9);
    background: transparent;
}
#slot-frame::before, #slot-frame::after {
    content: '▶';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: clamp(22px, 4vw, 36px);
    color: var(--yellow);
    filter: drop-shadow(0 2px 3px rgba(0,0,0,.5));
}
#slot-frame::before { left: 8px; }
#slot-frame::after { right: 8px; content: '◀'; }

/* ---- Onderbalk: kiezer links, knoppen rechts (uitgelijnd, geen overlap) ---- */
#bottombar {
    --bar-h: clamp(48px, 7.5vw, 58px);   /* gedeelde hoogte van kiezer en knoppen */
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    /* Onderaan de iOS home-indicator (safe-area) respecteren zodat de knoppen
       niet tegen de rand plakken in fullscreen/standalone. */
    padding: 10px clamp(10px, 2vw, 16px);
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}

#chooser {
    flex: 0 1 auto;
    min-width: 0;            /* mag krimpen zodat de select ellipsis krijgt */
    height: var(--bar-h);
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,.12);
    border: 3px solid rgba(255,255,255,.7);
    border-radius: 999px;
    padding: 0 10px 0 14px;
    backdrop-filter: blur(6px);
}
.chooser-ico { font-size: clamp(18px, 3vw, 24px); flex: 0 0 auto; }
#wheel-picker {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 220px;
    border: none;
    background: transparent;
    color: #fff;
    font-family: 'Baloo 2', cursive;
    font-weight: 700;
    font-size: clamp(15px, 2.4vw, 20px);
    padding: 4px 6px;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#wheel-picker option { color: #1d1147; }
#next-wheel {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,.18);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .1s, background .1s;
}
#next-wheel:hover { background: rgba(255,255,255,.32); }
#next-wheel:active { transform: scale(.9); }

/* ---- Knoppen rechts in de onderbalk ---- */
#controls {
    flex: 0 0 auto;
    display: flex;
    gap: clamp(8px, 1.5vw, 12px);
}
.round-btn {
    width: var(--bar-h, 52px);
    height: var(--bar-h, 52px);
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,.85);
    background: rgba(255,255,255,.12);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: clamp(20px, 3.5vw, 28px);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .1s, background .1s;
}
.round-btn:hover { background: rgba(255,255,255,.25); }
.round-btn:active { transform: scale(.92); }
.round-btn svg { display: block; }

/* ---- Overlays ---- */
.overlay[hidden] { display: none; }
.overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(8, 4, 26, .72);
    backdrop-filter: blur(8px);
    padding: 12px;
}

/* ---- Winnaar-popup ---- */
#winner-card {
    text-align: center;
    background: linear-gradient(160deg, #3a1c71, #2a1a5e);
    border: 4px solid var(--yellow);
    border-radius: 28px;
    padding: clamp(24px, 6vw, 56px) clamp(28px, 8vw, 80px);
    box-shadow: 0 20px 70px rgba(0,0,0,.6);
    animation: pop .4s cubic-bezier(.2,1.4,.4,1);
    max-width: 92vw;
}
@keyframes pop { from { transform: scale(.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
#winner-label {
    font-size: clamp(18px, 3.5vw, 28px);
    color: var(--cyan);
    margin-bottom: 8px;
}
#winner-name {
    font-family: 'Baloo 2', cursive;
    font-weight: 800;
    font-size: clamp(40px, 9vw, 90px);
    line-height: 1.1;
    background: linear-gradient(90deg, var(--yellow), var(--pink));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    word-break: break-word;
}
/* Emoji tonen we effen, anders maakt de gradient-clip ze onzichtbaar */
#winner-name.plain {
    background: none;
    -webkit-text-fill-color: #fff;
    color: #fff;
    font-size: clamp(64px, 16vw, 140px);
}
#winner-again {
    margin-top: 24px;
    border: none;
    border-radius: 999px;
    padding: 16px 44px;
    font-family: 'Baloo 2', cursive;
    font-weight: 800;
    font-size: clamp(20px, 3vw, 28px);
    color: #fff;
    background: linear-gradient(90deg, var(--pink), var(--purple));
    box-shadow: 0 6px 0 #54129e, 0 10px 22px rgba(0,0,0,.4);
    cursor: pointer;
}
#winner-again:active { transform: translateY(3px); box-shadow: 0 3px 0 #54129e; }

/* ---- Liefdes-popup (beschermt het Frozen-wiel) ---- */
#love-card {
    text-align: center;
    background: linear-gradient(160deg, #ff4fa3, #7b2ff7);
    border: 4px solid #fff;
    border-radius: 28px;
    padding: clamp(26px, 6vw, 56px) clamp(28px, 8vw, 80px);
    box-shadow: 0 20px 70px rgba(0,0,0,.6);
    animation: pop .4s cubic-bezier(.2,1.4,.4,1);
    max-width: 92vw;
}
.love-heart {
    font-size: clamp(64px, 16vw, 130px);
    line-height: 1;
    animation: heartbeat 1s ease-in-out infinite;
}
@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    25% { transform: scale(1.18); }
    40% { transform: scale(1); }
}
#love-text {
    margin-top: 10px;
    font-family: 'Baloo 2', cursive;
    font-weight: 800;
    font-size: clamp(34px, 8vw, 72px);
    color: #fff;
    text-shadow: 0 3px 0 rgba(0,0,0,.2);
}
#love-close {
    margin-top: 22px;
    border: none;
    border-radius: 999px;
    padding: 14px 40px;
    font-family: 'Baloo 2', cursive;
    font-weight: 800;
    font-size: clamp(18px, 3vw, 26px);
    color: #b5305a;
    background: #fff;
    box-shadow: 0 6px 0 rgba(0,0,0,.2);
    cursor: pointer;
}
#love-close:active { transform: translateY(3px); box-shadow: 0 3px 0 rgba(0,0,0,.2); }

/* Confetti */
#confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.confetti-piece.heart { background: transparent !important; width: auto; height: auto; line-height: 1; }
.confetti-piece {
    position: absolute;
    top: -20px;
    width: 12px; height: 18px;
    opacity: .9;
    animation: fall linear forwards;
}
@keyframes fall {
    to { transform: translateY(110vh) rotate(720deg); opacity: 1; }
}

/* ---- Beheerderspaneel ---- */
#admin-panel {
    width: 100%;
    max-width: 620px;
    min-width: 0;        /* voorkomt dat inhoud het paneel breder dan het scherm duwt */
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    background: #1d1147;
    border: 3px solid var(--purple);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 20px 70px rgba(0,0,0,.6);
}
.admin-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(90deg, var(--purple), var(--pink));
}
.admin-head h2 { font-family: 'Baloo 2', cursive; font-size: 26px; }
.admin-body { padding: 18px 20px; overflow-y: auto; }
.admin-foot { padding: 14px 20px; background: rgba(0,0,0,.25); display: flex; gap: 8px; flex-wrap: wrap; }
/* In de voet passen drie knoppen naast elkaar; spelen groeit en mag krimpen */
.admin-foot .big-btn { width: auto; font-size: clamp(16px, 4.2vw, 22px); padding: 14px 12px; }
.admin-foot #cfg-play { flex: 1 1 7rem; min-width: 0; }

.field { display: block; margin-bottom: 18px; }
.field > span { display: block; font-size: 15px; margin-bottom: 7px; color: #cdbff7; font-weight: 600; }
.field > span small { color: #8b7bc4; font-weight: 400; }

.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.row.toggle { gap: 16px; }
.row.toggle label {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 16px; cursor: pointer; color: #fff;
}

select, input[type=text] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 11px 13px;
    border-radius: 11px;
    border: 2px solid #4a3a8a;
    background: #120b33;
    color: #fff;
    font-size: 16px;
    font-family: inherit;
}
input[type=text]:focus, select:focus { outline: none; border-color: var(--cyan); }
.field > input[type=text] { width: 100%; }
#result-fixed { margin-top: 10px; width: 100%; }

.mini-btn {
    border: none;
    border-radius: 11px;
    padding: 11px 14px;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    background: #4a3a8a;
    cursor: pointer;
    white-space: nowrap;
}
.mini-btn:hover { background: #5a48a8; }
.mini-btn.danger { background: #b5305a; }
.mini-btn.danger:hover { background: #d23a6c; }

#items-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}
.item-input {
    display: flex;
    align-items: center;
    gap: 7px;
    background: #120b33;
    border: 2px solid #4a3a8a;
    border-radius: 11px;
    padding: 4px 6px 4px 10px;
}
.item-input .num {
    font-size: 13px; color: #8b7bc4; min-width: 20px; font-weight: 700;
}
.item-input .swatch {
    width: 16px; height: 16px; border-radius: 4px; flex: 0 0 auto;
}
.item-input input {
    border: none; background: transparent; padding: 8px 4px; flex: 1;
}
.item-input input:focus { outline: none; }

.big-btn {
    width: 100%;
    border: none;
    border-radius: 14px;
    padding: 16px;
    font-family: 'Baloo 2', cursive;
    font-weight: 800;
    font-size: 22px;
    color: #5a1d00;
    background: radial-gradient(circle at 40% 30%, #fff6cf, var(--yellow));
    box-shadow: 0 6px 0 #c79a00;
    cursor: pointer;
}
.big-btn:active { transform: translateY(3px); box-shadow: 0 3px 0 #c79a00; }
.big-btn.save {
    flex: 0 0 auto;
    color: #fff;
    background: linear-gradient(90deg, var(--pink), var(--purple));
    box-shadow: 0 6px 0 #54129e;
}
.big-btn.save:active { box-shadow: 0 3px 0 #54129e; }
.big-btn.del {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(90deg, #c2185b, #e23a6c);
    box-shadow: 0 6px 0 #7e1d3c;
    padding-left: 18px;
    padding-right: 18px;
}
.big-btn.del svg { display: block; }
.big-btn.del:active { box-shadow: 0 3px 0 #7e1d3c; }

#admin-msg { font-size: 15px; min-height: 20px; text-align: center; }
#admin-msg.ok { color: #6ee7a8; }
#admin-msg.err { color: #ff8aa8; }

@media (max-width: 640px) {
    #next-wheel { width: 30px; height: 30px; font-size: 15px; }
    /* Fullscreen is op telefoon niet nodig (en werkt op iOS Safari niet) */
    #fullscreen-btn { display: none; }
    /* Woorden onder elkaar i.p.v. naast elkaar — fijner op mobiel */
    #items-grid { grid-template-columns: 1fr; }
}