@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Inter:wght@400;600&display=swap');

body { background: linear-gradient(135deg, #1a0f1f, #2a1a2f); }

/* ─── Player themes ───────────────────────────────────────────────────────── */
/* Player A = pink */
body.theme-a {
    --clr-primary:   236, 72,  153;  /* pink-500  */
    --clr-secondary: 168, 85,  247;  /* purple-500 */
    --clr-text:      249, 168, 212;  /* pink-300  */
}
/* Player B = blue */
body.theme-b {
    --clr-primary:   59,  130, 246;  /* blue-500  */
    --clr-secondary: 99,  102, 241;  /* indigo-500 */
    --clr-text:      147, 197, 253;  /* blue-300  */
}

/* Card border glow driven by theme */
#questionCard {
    border-color: rgba(var(--clr-primary, 236,72,153), .25);
    box-shadow: 0 0 40px rgba(var(--clr-primary, 236,72,153), .08);
    transition: border-color .5s ease, box-shadow .5s ease;
}

/* qNum badge colour */
#qNum { color: rgb(var(--clr-text, 249,168,212)); }

/* Heat bar driven by theme */
#heatBar {
    background: linear-gradient(to right,
        rgb(var(--clr-primary,   236,72,153)),
        rgb(var(--clr-secondary, 168,85,247)),
        #ef4444);
    transition: width .8s cubic-bezier(.4,0,.2,1), background .5s ease;
}

/* Option buttons driven by theme */
#optA {
    background: linear-gradient(to bottom right,
        rgb(var(--clr-primary,   236,72,153)),
        rgb(var(--clr-secondary, 168,85,247)));
    transition: opacity .3s ease, transform .3s ease, box-shadow .3s ease, background .5s ease;
}
#optB {
    background: linear-gradient(to bottom right,
        rgb(var(--clr-secondary, 168,85,247)),
        rgb(var(--clr-primary,   236,72,153)));
    transition: opacity .3s ease, transform .3s ease, box-shadow .3s ease, background .5s ease;
}

.option-btn { transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease; }
.option-btn:hover:not(:disabled) {
    transform: scale(1.05);
    box-shadow: 0 0 30px rgba(var(--clr-primary, 236,72,153), .55);
}
.option-btn:disabled { cursor: default; }
.option-btn.selected {
    box-shadow: 0 0 50px rgba(var(--clr-primary, 236,72,153), .9);
    transform: scale(1.06);
}
.option-btn.dimmed  { opacity: 0.42; }

#questionCard.entering { animation: cardIn 0.4s cubic-bezier(.4,0,.2,1); }
@keyframes cardIn {
    from { opacity: 0; transform: translateY(14px) scale(.97); }
    to   { opacity: 1; transform: none; }
}

#toast {
    position: fixed; top: 1.5rem; left: 50%;
    transform: translateX(-50%);
    transition: opacity .25s ease;
    opacity: 0; pointer-events: none;
    white-space: nowrap; z-index: 100;
}
#toast.show { opacity: 1; }

.fade-in { animation: fadeIn .35s ease; }
@keyframes fadeIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

/* Next button adopts the active theme when a choice has been made */
#nextBtn[data-has-choice] {
    background: rgba(var(--clr-primary, 236,72,153), .25);
    border: 1px solid rgba(var(--clr-primary, 236,72,153), .35);
    color: rgb(var(--clr-text, 249,168,212));
    box-shadow: 0 0 20px rgba(var(--clr-primary, 236,72,153), .15);
    transition: background .4s ease, border-color .4s ease, color .4s ease, box-shadow .4s ease;
}
#nextBtn[data-has-choice]:hover {
    background: rgba(var(--clr-primary, 236,72,153), .4);
}

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: rgba(255,255,255,.05); border-radius: 2px; }
::-webkit-scrollbar-thumb { background: rgba(236,72,153,.4);   border-radius: 2px; }