/* =====================================================================
   QuizParty — components & layout.
   Tokens come from variables.css; keep raw values out of this file.
   ===================================================================== */

/* ---- Reset ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: 1.6;
    color: var(--color-text);
    background: var(--page-bg);
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}

h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.1; font-weight: var(--fw-bold); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; font-size: var(--fs-base); color: inherit; }

/* ---- Layout helpers ------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--space-5); }
.container-narrow { max-width: var(--container-narrow); }
.section { padding-block: var(--space-9); }
.text-center { text-align: center; }
.muted { color: var(--color-text-muted); }
.stack > * + * { margin-top: var(--space-4); }
.hidden { display: none !important; }

.gradient-text {
    background: var(--grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* =====================================================================
   Buttons
   ===================================================================== */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    padding: 14px 30px;
    border: 2px solid transparent;
    border-radius: var(--radius-pill);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-base);
    color: var(--color-text);
    background: transparent;
    transition: transform var(--transition), box-shadow var(--transition), background var(--transition), border-color var(--transition);
    white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-primary {
    background: var(--grad-brand);
    color: var(--color-text-on-accent);
    box-shadow: var(--shadow-glow);
    border-color: transparent;
}
.btn-ghost { border-color: var(--color-border); background: var(--color-surface); }
.btn-ghost:hover { background: var(--color-surface-2); }
.btn-solid { background: var(--color-surface-solid); border-color: var(--color-border); }
.btn-block { display: flex; width: 100%; }
.btn-lg { padding: 17px 38px; font-size: var(--fs-lg); }
.btn-sm { padding: 9px 18px; font-size: var(--fs-sm); }
.btn-danger { background: rgba(255, 77, 109, 0.15); border-color: rgba(255, 77, 109, 0.5); color: #ff8da3; }
.btn-danger:hover { background: rgba(255, 77, 109, 0.25); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* =====================================================================
   Site header / nav
   ===================================================================== */
.site-header {
    position: sticky; top: 0; z-index: 50;
    height: var(--header-height);
    display: flex; align-items: center;
    backdrop-filter: blur(14px);
    background: rgba(7, 7, 12, 0.6);
    border-bottom: 1px solid var(--color-border-soft);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; }
.nav-links { display: flex; align-items: center; gap: var(--space-6); }
.nav-links a { color: var(--color-text-muted); font-weight: var(--fw-medium); font-size: var(--fs-sm); transition: color var(--transition); }
.nav-links a:hover { color: var(--color-text); }
.nav-actions { display: flex; align-items: center; gap: var(--space-3); }

/* Logo */
.logo { font-family: var(--font-display); font-weight: var(--fw-black); font-size: 2rem; display: inline-flex; align-items: center; gap: 2px; letter-spacing: -0.5px; text-shadow: 0 2px 8px rgba(0,0,0,.35); }
.logo .logo-mark { width: 36px; height: 36px; margin-right: 9px; filter: drop-shadow(0 2px 5px rgba(0,0,0,.4)); }
.logo .logo-mark path { stroke: #fff; }
.logo .l1 { color: #fff; }
.logo .l2 { background: linear-gradient(180deg, #cfe4ff 0%, #6aa6ff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* =====================================================================
   Hero
   ===================================================================== */
.hero { position: relative; overflow: hidden; padding-block: var(--space-9) var(--space-8); }
.hero::before {
    content: ""; position: absolute; inset: -10% -10% auto -10%; height: 120%;
    background: var(--glow-1), var(--glow-2), var(--glow-3);
    filter: blur(20px); opacity: 0.9; z-index: 0; pointer-events: none;
}
.hero .container { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--space-7); align-items: center; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: var(--radius-pill); background: var(--color-surface); border: 1px solid var(--color-border); font-size: var(--fs-sm); color: var(--color-text-muted); margin-bottom: var(--space-5); }
.hero h1 { font-size: var(--fs-hero); font-weight: var(--fw-black); letter-spacing: -1.5px; }
.hero h1 .rotating { display: inline-block; min-width: 4ch; }
.hero-sub { margin-top: var(--space-5); font-size: var(--fs-lg); color: var(--color-text-muted); max-width: 30ch; }
.hero-cta { display: flex; gap: var(--space-3); margin-top: var(--space-6); flex-wrap: wrap; }
.hero-bullets { margin-top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); }
.hero-bullets li { list-style: none; display: flex; align-items: center; gap: 10px; color: var(--color-text-muted); font-size: var(--fs-sm); }

/* Floating mock trivia card (right side of hero) */
.hero-visual { position: relative; min-height: 360px; }
.mock-card {
    position: relative; border-radius: var(--radius-xl); padding: var(--space-6);
    background: var(--grad-teal);
    box-shadow: var(--shadow-lg);
    transform: rotate(-2deg);
}
.mock-card h3 { color: #fff; font-size: var(--fs-xl); margin-bottom: var(--space-5); }
.mock-options { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.mock-opt { border-radius: var(--radius-md); padding: 16px; font-weight: var(--fw-semibold); color: #fff; text-align: center; box-shadow: var(--shadow-sm); }
.mock-opt:nth-child(1){ background: var(--opt-a); }
.mock-opt:nth-child(2){ background: var(--opt-b); }
.mock-opt:nth-child(3){ background: var(--opt-c); }
.mock-opt:nth-child(4){ background: var(--opt-d); }
.mock-pill { position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%); background: #fff; color: #111; padding: 10px 22px; border-radius: var(--radius-pill); font-weight: var(--fw-semibold); font-size: var(--fs-sm); box-shadow: var(--shadow-md); white-space: nowrap; }
.mock-avatar { position: absolute; width: 54px; height: 54px; border-radius: 50%; border: 3px solid rgba(255,255,255,.5); background-size: cover; box-shadow: var(--shadow-md); }
.mock-avatar.a1 { top: -22px; left: -18px; background: var(--grad-pink); }
.mock-avatar.a2 { top: 10px; right: -26px; background: var(--grad-violet); }
.mock-avatar.a3 { bottom: -10px; left: -28px; background: var(--grad-sunset); }

@keyframes floaty { 0%,100% { transform: rotate(-2deg) translateY(0); } 50% { transform: rotate(-2deg) translateY(-12px); } }
.mock-card { animation: floaty 6s ease-in-out infinite; }

/* =====================================================================
   Logo strip / social proof
   ===================================================================== */
.proof { text-align: center; padding-block: var(--space-7); }
.proof-title { color: var(--brand-violet); font-weight: var(--fw-semibold); letter-spacing: 0.3px; margin-bottom: var(--space-5); }
.proof-logos { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-6); color: var(--color-text-muted); font-weight: var(--fw-bold); font-size: var(--fs-lg); opacity: 0.75; }

/* =====================================================================
   Section heading
   ===================================================================== */
.section-head { text-align: center; margin-bottom: var(--space-7); }
.section-head h2 { font-size: var(--fs-3xl); font-weight: var(--fw-black); letter-spacing: -1px; }
.section-head p { color: var(--color-text-muted); margin-top: var(--space-3); font-size: var(--fs-lg); }

/* ---- Value cards (“Because joy matters”) --------------------------- */
.value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.value-card { background: var(--color-surface); border: 1px solid var(--color-border-soft); border-radius: var(--radius-lg); padding: var(--space-6); transition: transform var(--transition), border-color var(--transition); }
.value-card:hover { transform: translateY(-4px); border-color: var(--color-border); }
.value-card .emoji { font-size: 2rem; }
.value-card h3 { margin: var(--space-4) 0 var(--space-2); font-size: var(--fs-lg); }
.value-card h3.c1 { color: var(--brand-orange); }
.value-card h3.c2 { color: var(--brand-teal); }
.value-card h3.c3 { color: var(--brand-yellow); }
.value-card p { color: var(--color-text-muted); font-size: var(--fs-sm); }

/* ---- Testimonials --------------------------------------------------- */
.testimonials { display: flex; gap: var(--space-4); overflow-x: auto; padding-bottom: var(--space-4); scroll-snap-type: x mandatory; }
.testi-card { scroll-snap-align: start; flex: 0 0 300px; border-radius: var(--radius-lg); padding: var(--space-5); color: #fff; box-shadow: var(--shadow-md); }
.testi-card:nth-child(4n+1){ background: var(--grad-pink); }
.testi-card:nth-child(4n+2){ background: var(--grad-teal); }
.testi-card:nth-child(4n+3){ background: var(--grad-violet); }
.testi-card:nth-child(4n+4){ background: var(--grad-lime); }
.testi-card p { font-size: var(--fs-base); font-weight: var(--fw-medium); }
.testi-author { margin-top: var(--space-4); font-size: var(--fs-sm); opacity: 0.9; }

/* ---- Steps (“Oh. So. Simple.”) ------------------------------------- */
.steps { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.step-card { background: var(--color-surface); border: 1px solid var(--color-border-soft); border-radius: var(--radius-lg); overflow: hidden; }
.step-art { height: 170px; background: var(--grad-sunset); display: flex; align-items: center; justify-content: center; font-size: 3.5rem; }
.step-card:nth-child(2) .step-art { background: var(--grad-violet); }
.step-body { padding: var(--space-5); }
.step-label { font-family: var(--font-display); font-weight: var(--fw-bold); margin-bottom: var(--space-2); }
.step-label .num { color: var(--brand-orange); }
.step-body p { color: var(--color-text-muted); font-size: var(--fs-sm); }
.platforms { display: flex; gap: var(--space-5); align-items: center; justify-content: center; margin-top: var(--space-5); font-weight: var(--fw-bold); color: var(--color-text-muted); }

/* =====================================================================
   Footer
   ===================================================================== */
.site-footer { border-top: 1px solid var(--color-border-soft); padding-block: var(--space-8) var(--space-6); margin-top: var(--space-8); background: var(--color-bg-2); }
.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: var(--space-6); }
.footer-col h4 { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.6px; color: var(--color-text-dim); margin-bottom: var(--space-4); }
.footer-col a { display: block; color: var(--color-text-muted); font-size: var(--fs-sm); padding: 4px 0; transition: color var(--transition); }
.footer-col a:hover { color: var(--color-text); }
.footer-bottom { margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--color-border-soft); color: var(--color-text-dim); font-size: var(--fs-sm); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); }

/* =====================================================================
   Centered pages (auth, join, install)
   ===================================================================== */
.page-centered { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--space-5); position: relative; overflow: hidden; }
.auth-card { position: relative; z-index: 1; width: 100%; max-width: 420px; background: var(--color-surface-solid); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-7); box-shadow: var(--shadow-lg); }
.auth-title { font-size: var(--fs-2xl); text-align: center; }
.auth-sub { color: var(--color-text-muted); text-align: center; margin-top: var(--space-2); font-size: var(--fs-sm); }
.auth-card form { margin-top: var(--space-6); }

/* ---- Form fields ---------------------------------------------------- */
.field { margin-bottom: var(--space-4); }
.field label { display: block; font-size: 1.08rem; font-weight: var(--fw-bold); margin-bottom: var(--space-2); color: #fff; }
.input, .textarea, select.input {
    width: 100%; padding: 13px 16px;
    background: var(--color-bg-2); border: 1px solid var(--color-border);
    border-radius: var(--radius-md); color: var(--color-text);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.input:focus, .textarea:focus, select.input:focus { outline: none; border-color: var(--brand-orange); box-shadow: 0 0 0 3px rgba(255, 122, 69, 0.18); }
.textarea { resize: vertical; min-height: 90px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }

/* ---- Flash messages ------------------------------------------------- */
.flash { padding: 12px 16px; border-radius: var(--radius-md); font-size: var(--fs-sm); margin-bottom: var(--space-4); }
.flash-error { background: rgba(255, 77, 109, 0.12); border: 1px solid rgba(255, 77, 109, 0.4); color: #ff9db0; }
.flash-ok { background: rgba(52, 211, 153, 0.12); border: 1px solid rgba(52, 211, 153, 0.4); color: #6ee7b7; }
.flash-info { background: rgba(56, 189, 248, 0.12); border: 1px solid rgba(56, 189, 248, 0.4); color: #7dd3fc; }

/* =====================================================================
   Join: code input boxes
   ===================================================================== */
.join-wrap { text-align: center; }
.code-boxes { display: flex; gap: var(--space-3); justify-content: center; margin-block: var(--space-6); flex-wrap: nowrap; }
.code-boxes input {
    width: 58px; height: 70px; text-align: center;
    font-size: 1.9rem; font-weight: var(--fw-bold); text-transform: uppercase;
    background: var(--color-bg-2); border: 2px solid var(--color-border);
    border-radius: var(--radius-md); color: var(--color-text);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.code-boxes input:focus { outline: none; border-color: var(--brand-orange); box-shadow: 0 0 0 4px rgba(255, 122, 69, 0.2); }
@media (max-width: 480px){ .code-boxes { gap: var(--space-2); } .code-boxes input { width: clamp(34px, 14vw, 46px); height: 58px; font-size: 1.5rem; } }

/* =====================================================================
   Admin shell
   ===================================================================== */
.admin-body { background: var(--color-bg); min-height: 100vh; }
.admin-header { height: var(--header-height); display: flex; align-items: center; border-bottom: 1px solid rgba(255,255,255,.14); position: sticky; top: 0; z-index: 40;
    background-color: #103f9e;
    background-image: radial-gradient(120% 140% at 0% 0%, rgba(90,160,255,.35), transparent 55%), linear-gradient(180deg, #1a5ed0 0%, #0e3a93 100%), url(/assets/img/pat/party.svg);
    background-size: auto, auto, 110px 110px; background-repeat: no-repeat, no-repeat, repeat;
    box-shadow: 0 4px 18px rgba(0,0,0,.28); }
.admin-header .container { display: flex; align-items: center; justify-content: space-between; }
.admin-nav { display: flex; gap: var(--space-3); align-items: center; }
.admin-nav .nav-btn { display: inline-flex; align-items: center; padding: 10px 20px; border-radius: var(--radius-pill);
    font-size: var(--fs-base); font-weight: var(--fw-bold); color: #fff; text-decoration: none;
    background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28);
    transition: background .12s, transform .12s; }
.admin-nav .nav-btn:hover { background: rgba(255,255,255,.28); transform: translateY(-1px); }
.admin-nav .nav-btn.active { background: #fff; color: var(--tp-blue); border-color: #fff; }
.admin-main { padding-block: var(--space-7); }
.page-title-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-6); gap: var(--space-4); flex-wrap: wrap; }
.page-title-row h1 { font-size: var(--fs-2xl); }
.breadcrumb { color: var(--color-text-dim); font-size: var(--fs-sm); margin-bottom: var(--space-2); }
.breadcrumb a:hover { color: var(--color-text); }

/* ---- Quiz cards grid ------------------------------------------------ */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-5); }
.quiz-card { position: relative; border-radius: var(--radius-lg); overflow: hidden; color: #fff; min-height: 190px; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--space-5); box-shadow: var(--shadow-md); transition: transform var(--transition); }
.quiz-card:hover { transform: translateY(-4px); }
.quiz-card.sunset { background: var(--grad-sunset); }
.quiz-card.violet { background: var(--grad-violet); }
.quiz-card.ocean  { background: var(--grad-ocean); }
/* Card-colour picker: highlight the selected swatch live */
.accent-swatch { position: relative; transition: outline-color .12s, transform .12s; outline: 3px solid transparent; outline-offset: 2px; }
.accent-swatch:hover { transform: translateY(-2px); }
.accent-swatch:has(input:checked),
.accent-swatch.is-selected { outline-color: #fff; box-shadow: 0 0 0 4px rgba(0,0,0,.25); }
.quiz-card.teal   { background: var(--grad-teal); }
.quiz-card.pink   { background: var(--grad-pink); }
.quiz-card.lime   { background: var(--grad-lime); }
.quiz-card .badge { position: absolute; top: var(--space-4); left: var(--space-4); }
.quiz-card h3 { font-size: var(--fs-xl); }
.quiz-card .quiz-meta { font-size: var(--fs-sm); opacity: 0.9; margin-top: var(--space-1); }
.quiz-card .card-actions { display: flex; gap: var(--space-2); margin-top: var(--space-4); flex-wrap: wrap; }
.card-actions .btn { padding: 9px 16px; font-size: var(--fs-sm); background: rgba(0,0,0,0.25); border-color: rgba(255,255,255,0.35); color: #fff; }
.card-actions .btn:hover { background: rgba(0,0,0,0.4); }
.card-actions .btn.host-btn { background: #fff; color: #111; border-color: #fff; }

.badge { display: inline-block; padding: 5px 12px; border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: var(--fw-semibold); background: rgba(0,0,0,0.3); }
.badge-new { background: var(--brand-pink); color: #fff; }

/* ---- Empty state ---------------------------------------------------- */
.empty-state { text-align: center; padding: var(--space-9) var(--space-5); border: 1px dashed var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.empty-state .emoji { font-size: 3rem; }
.empty-state h3 { margin: var(--space-4) 0 var(--space-2); }
.empty-state p { color: var(--color-text-muted); margin-bottom: var(--space-5); }

/* ---- Panels & tables ------------------------------------------------ */
.panel { background: var(--color-surface); border: 1px solid var(--color-border-soft); border-radius: var(--radius-lg); padding: var(--space-6); }
.panel + .panel { margin-top: var(--space-5); }

/* ---- Question list (sortable) -------------------------------------- */
.q-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
.q-item { display: flex; align-items: center; gap: var(--space-4); background: var(--color-surface-solid); border: 1px solid var(--color-border-soft); border-radius: var(--radius-md); padding: var(--space-4); }
.q-item.dragging { opacity: 0.5; }
.q-item.drag-over { border-color: var(--brand-orange); }
.q-handle { cursor: grab; color: var(--color-text-dim); font-size: 1.3rem; user-select: none; }
.q-num { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%; background: var(--grad-brand); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: var(--fw-bold); font-size: var(--fs-sm); }
.q-text { flex: 1; min-width: 0; }
.q-text strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-text .q-correct { font-size: var(--fs-xs); color: var(--brand-green); }
.q-actions { display: flex; gap: var(--space-2); }
.icon-btn { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-muted); }
.icon-btn:hover { color: var(--color-text); border-color: var(--color-border); background: var(--color-surface-2); }

/* ---- Option editor (correct answer picker) -------------------------- */
.option-edit { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.option-edit .opt-letter { width: 40px; height: 40px; flex: 0 0 auto; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-weight: var(--fw-bold); color: #fff; }
.option-edit[data-opt=A] .opt-letter { background: var(--opt-a); color: var(--opt-a-text); }
.option-edit[data-opt=B] .opt-letter { background: var(--opt-b); }
.option-edit[data-opt=C] .opt-letter { background: var(--opt-c); }
.option-edit[data-opt=D] .opt-letter { background: var(--opt-d); }
.option-edit .input { flex: 1; }
.option-edit .correct-radio { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--color-text-muted); white-space: nowrap; }
.option-edit input[type=radio] { width: 18px; height: 18px; accent-color: var(--brand-green); }

/* =====================================================================
   Host live screen
   ===================================================================== */
.host-stage { min-height: 100vh; display: flex; flex-direction: column; }
.host-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid rgba(255,255,255,.18); background: var(--tp-blue); }
.host-game-title { font-weight: 700; flex: 1 1 auto; min-width: 0; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 560px) {
    .host-top { padding: var(--space-3) var(--space-4); }
    .host-game-title { display: none; }
    .host-top-actions .btn { padding-left: var(--space-3); padding-right: var(--space-3); }
}
.host-content { flex: 1; display: flex; align-items: center; justify-content: center; padding: var(--space-6); }
.host-inner { width: 100%; max-width: 960px; }

/* Lobby */
.lobby { display: grid; grid-template-columns: 430px 1fr; gap: var(--space-6); align-items: start; }
.join-panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-6); text-align: center; }
.join-panel .qr { background: #fff; padding: 12px; border-radius: var(--radius-md); display: inline-block; }
.join-panel .qr { width: 340px; height: 340px; display: flex; align-items: center; justify-content: center; margin-inline: auto; }
.join-panel .qr img { width: 312px; height: 312px; image-rendering: pixelated; }
@media (max-width: 600px) { .join-panel .qr { width: 240px; height: 240px; } .join-panel .qr img { width: 216px; height: 216px; } }
.room-code { font-family: var(--font-display); font-weight: var(--fw-black); font-size: clamp(2.5rem, 6vw, 3.75rem); letter-spacing: 0.4em; padding-left: 0.4em; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.join-hint { color: var(--color-text-muted); font-size: var(--fs-sm); }
.join-hint code { color: var(--color-text); }

.players-panel h2 { margin-bottom: var(--space-4); }
.players-grid { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.player-chip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; background: var(--color-surface-solid); border: 1px solid var(--color-border); border-radius: var(--radius-pill); font-weight: var(--fw-semibold); animation: chip-in .7s cubic-bezier(.2,.8,.25,1) both; }
.player-chip.more-chip { background: rgba(255,255,255,.14); color: #dcecff; font-weight: var(--fw-bold); }
/* Highlight the viewer's own row in the standings */
/* The viewer's own row — glossy yellow so it pops (beats the game-stage td bg). */
.lb-tr.lb-you td { background: linear-gradient(180deg, rgba(255,238,140,.92) 0%, rgba(252,210,40,.82) 55%, rgba(235,185,15,.86) 100%) !important; }
.lb-tr.lb-you td:first-child { box-shadow: inset 9px 0 0 #ffcf1a; }
.lb-tr.lb-you .lb-name-cell span { font-weight: var(--fw-black); color: #2a2200; }
.lb-tr.lb-you .lb-score-cell { color: #4a3a00; }
.lb-you-tag { background: #4a3a00; color: #ffe680; }
.lb-you-tag { display: inline-block; margin-left: 8px; padding: 1px 9px; border-radius: var(--radius-pill); background: #22b24e; color: #fff; font-size: .68rem; font-weight: 800; vertical-align: middle; }
.player-chip .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--brand-green); }
@keyframes pop { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes chip-in { from { transform: translateY(10px) scale(.92); opacity: 0; } to { transform: none; opacity: 1; } }

/* Question display (host + projector) */
.q-stage { text-align: center; }
.q-progress { color: var(--color-text-muted); font-weight: var(--fw-semibold); margin-bottom: var(--space-4); }
.q-headline { font-size: clamp(1.6rem, 4vw, 2.6rem); font-weight: var(--fw-black); margin-bottom: var(--space-6); }
.options-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.opt-tile { position: relative; display: flex; align-items: center; gap: var(--space-4); padding: var(--space-5); border-radius: var(--radius-xl); color: #fff; font-size: clamp(1.25rem, 2.2vw, 1.85rem); font-weight: var(--fw-bold); text-align: left; text-shadow: 0 2px 3px rgba(0,0,0,0.32); box-shadow: inset 0 3px 0 rgba(255,255,255,0.4), inset 0 -10px 18px rgba(0,0,0,0.16), 0 8px 0 rgba(0,0,0,0.22), var(--shadow-md); border: none; transition: transform var(--transition), box-shadow var(--transition), opacity var(--transition); overflow: hidden; }
.opt-tile .opt-key { width: 46px; height: 46px; flex: 0 0 auto; border-radius: var(--radius-md); background: rgba(0,0,0,0.3); display: flex; align-items: center; justify-content: center; font-weight: var(--fw-black); box-shadow: inset 0 -2px 0 rgba(0,0,0,.25), inset 0 2px 0 rgba(255,255,255,.18); }
.opt-tile[data-opt=A] { background: var(--btn-sheen), linear-gradient(180deg, #9d86ff 0%, #7c5cff 50%, #5e3ce0 100%); }
.opt-tile[data-opt=B] { background: var(--btn-sheen), linear-gradient(180deg, #6fb0ff 0%, #3d8bef 50%, #1f6cd0 100%); }
.opt-tile[data-opt=C] { background: var(--btn-sheen), linear-gradient(180deg, #ffb061 0%, #f5862e 50%, #d96a12 100%); }
.opt-tile[data-opt=D] { background: var(--btn-sheen), linear-gradient(180deg, #45d6c4 0%, #14b8a6 50%, #0a9286 100%); }
/* Once an answer is locked in, fade the options that weren't picked. */
.opt-tile.unpicked { opacity: .38; transition: opacity .25s ease; }

/* Logo-style dashboard wordmark — big, vibrant, pops off the bg */
.dash-title { font-family: var(--font-display); font-weight: var(--fw-black); font-size: clamp(2.9rem, 6.2vw, 4.5rem); letter-spacing: -1.5px; line-height: 1; color: #fff; margin: 0;
    text-shadow:
        0 1px 0 #3a6cce, 0 2px 0 #3061c4, 0 3px 0 #2756b6,
        0 4px 0 #1f4ba6, 0 5px 0 #184093, 0 6px 0 #12357e,
        0 7px 0 #0e2c69, 0 10px 14px rgba(0,0,0,.5), 0 18px 28px rgba(0,0,0,.4); }
.dash-title-accent { background: none; color: #74c4ff; -webkit-text-fill-color: #74c4ff; filter: none; }
.opt-tile.dimmed { opacity: 0.32; box-shadow: 0 4px 0 rgba(0,0,0,0.2); }
.opt-tile.correct { border-color: #fff; box-shadow: 0 0 0 5px rgba(52,211,153,0.7), 0 8px 0 rgba(0,0,0,0.24), var(--shadow-md); animation: opt-pop .45s cubic-bezier(.2,.8,.25,1); }
.opt-tile .opt-count { margin-left: auto; font-variant-numeric: tabular-nums; opacity: 0.9; }
/* Who picked each answer (shown at reveal) */
.opt-cell { display: flex; flex-direction: column; gap: var(--space-2); }
.vote-strip { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 var(--space-2); min-height: 26px; animation: chip-in .4s ease both; }
.vote-av { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--color-surface-2); border: 1px solid var(--color-border); font-size: 1.05rem; box-shadow: var(--shadow-sm); }

.answer-meter { margin-top: var(--space-6); }
.answer-meter .count { font-size: var(--fs-2xl); font-weight: var(--fw-black); }
.host-controls { display: flex; gap: var(--space-3); justify-content: center; margin-top: var(--space-6); flex-wrap: wrap; }
.timer-pill { padding: 8px 18px; border-radius: var(--radius-pill); background: var(--color-surface); border: 1px solid var(--color-border); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }

/* Leaderboard */
.leaderboard { max-width: 640px; margin-inline: auto; }
.lb-row { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); background: var(--color-surface-solid); border: 1px solid var(--color-border-soft); margin-bottom: var(--space-3); animation: pop var(--transition-slow); }
.lb-rank { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: var(--fw-black); background: var(--color-surface-2); }
.lb-row:nth-child(1) .lb-rank { background: linear-gradient(135deg,#ffd700,#ffae00); color:#3a2a00; }
.lb-row:nth-child(2) .lb-rank { background: linear-gradient(135deg,#e8e8e8,#a9b0bd); color:#222; }
.lb-row:nth-child(3) .lb-rank { background: linear-gradient(135deg,#e6a972,#b9743b); color:#2a1500; }
.lb-name { flex: 1; font-weight: var(--fw-semibold); }
.lb-score { font-weight: var(--fw-black); font-variant-numeric: tabular-nums; color: var(--brand-yellow); }
/* Scrollable leaderboard (auto-scrolls to "you") */
.leaderboard.scrollable { max-height: 58vh; overflow-y: auto; padding: 2px var(--space-2); scroll-behavior: smooth; -webkit-overflow-scrolling: touch; }
.leaderboard.scrollable::-webkit-scrollbar { width: 8px; }
.leaderboard.scrollable::-webkit-scrollbar-thumb { background: rgba(255,255,255,.25); border-radius: var(--radius-pill); }
.lb-rank.lb-medal { background: transparent !important; font-size: 1.5rem; box-shadow: none; }
.lb-row.top1 { border-left: 5px solid #ffd700; }
.lb-row.top2 { border-left: 5px solid #cfd3da; }
.lb-row.top3 { border-left: 5px solid #e6a972; }
.lb-table .lb-rank-cell.lb-medal { font-size: 1.45rem; }

/* =====================================================================
   Guest play screen (mobile-first)
   ===================================================================== */
.play-body { min-height: 100vh; display: flex; flex-direction: column; }
.play-top { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border-soft); }
.play-you { display: flex; align-items: center; gap: 8px; font-weight: var(--fw-semibold); }
.play-score { font-weight: var(--fw-black); color: var(--brand-yellow); }
.play-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: var(--space-5); }
.play-inner { width: 100%; max-width: 560px; text-align: center; }
.play-question { font-size: var(--fs-xl); font-weight: var(--fw-bold); margin-bottom: var(--space-6); }
.play-options { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.play-opt { position: relative; padding: var(--space-6) var(--space-4); border-radius: var(--radius-xl); color: #fff; font-weight: var(--fw-bold); font-size: clamp(1.2rem, 5vw, 1.6rem); text-shadow: 0 2px 3px rgba(0,0,0,0.34); border: none; box-shadow: inset 0 3px 0 rgba(255,255,255,0.42), inset 0 -12px 20px rgba(0,0,0,0.16), 0 7px 0 rgba(0,0,0,0.22), var(--shadow-md); transition: transform .08s ease, box-shadow .12s ease; min-height: 108px; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; }
.play-opt:active { transform: translateY(5px); box-shadow: inset 0 3px 0 rgba(255,255,255,0.42), 0 2px 0 rgba(0,0,0,0.24), var(--shadow-sm); }
.play-opt[data-opt=A] { background: var(--btn-sheen), linear-gradient(180deg, #9d86ff 0%, #7c5cff 50%, #5e3ce0 100%); }
.play-opt[data-opt=B] { background: var(--btn-sheen), linear-gradient(180deg, #6fb0ff 0%, #3d8bef 50%, #1f6cd0 100%); }
.play-opt[data-opt=C] { background: var(--btn-sheen), linear-gradient(180deg, #ffb061 0%, #f5862e 50%, #d96a12 100%); }
.play-opt[data-opt=D] { background: var(--btn-sheen), linear-gradient(180deg, #45d6c4 0%, #14b8a6 50%, #0a9286 100%); }
.play-opt.chosen { outline: 4px solid #fff; outline-offset: -2px; transform: translateY(5px); box-shadow: 0 2px 0 rgba(0,0,0,0.24), var(--shadow-sm); }
.play-opt.faded { opacity: 0.38; box-shadow: 0 3px 0 rgba(0,0,0,0.2); }
.play-opt.correct { box-shadow: 0 0 0 5px rgba(52,211,153,0.7), 0 7px 0 rgba(0,0,0,0.24), var(--shadow-md); }

/* Reveal badges: ✓ correct answer / ✗ the answer you picked */
.opt-mark { position: absolute; top: 8px; right: 10px; width: 32px; height: 32px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center; font-weight: 900; font-size: 1.15rem;
    color: #fff; background: rgba(0,0,0,.3); box-shadow: inset 0 0 0 2px rgba(255,255,255,.55); }
.opt-mark.ok { background: #1f9d57; }
.opt-mark.no { background: #d11332; }

/* Pre-game 5-4-3-2-1 countdown */
.pregame-cd { display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: var(--space-4); min-height: 55vh; text-align: center; }
.pregame-label { font-family: var(--font-display); font-weight: var(--fw-bold); color: #fff; opacity: .92;
    font-size: clamp(1.4rem, 4vw, 2.6rem); }
.pregame-num { font-family: var(--font-display); font-weight: 900; line-height: 1; color: #fff;
    font-size: clamp(7rem, 24vw, 18rem); text-shadow: 0 10px 36px rgba(0,0,0,.45);
    animation: pregame-pop .85s cubic-bezier(.2,.9,.3,1); }
@keyframes pregame-pop { 0% { transform: scale(.3); opacity: 0; } 45% { transform: scale(1.18); opacity: 1; } 100% { transform: scale(1); } }
.opt-tile .opt-mark { top: 50%; transform: translateY(-50%); right: 14px; }
.play-opt.wrong { box-shadow: 0 0 0 5px rgba(244,8,30,0.6), 0 7px 0 rgba(0,0,0,0.24), var(--shadow-md); }
.play-state { text-align: center; }
.play-state .big-emoji { font-size: 4rem; margin-bottom: var(--space-4); }
.play-state h2 { font-size: var(--fs-2xl); }
.play-state p { color: var(--color-text-muted); margin-top: var(--space-2); }
.points-pop { font-size: var(--fs-2xl); font-weight: var(--fw-black); color: var(--brand-green); }
.spinner { width: 44px; height: 44px; border-radius: 50%; border: 4px solid var(--color-border); border-top-color: var(--brand-orange); margin: 0 auto var(--space-4); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.rank-badge { display: inline-block; padding: 6px 16px; border-radius: var(--radius-pill); background: var(--color-surface-2); font-weight: var(--fw-bold); margin-top: var(--space-3); }

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 900px) {
    .hero .container { grid-template-columns: 1fr; }
    .hero-visual { order: -1; min-height: 280px; }
    .hero-sub { max-width: none; }
    .value-grid { grid-template-columns: 1fr; }
    .steps { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .lobby { grid-template-columns: 1fr; }
    .nav-links { display: none; }
}
@media (max-width: 600px) {
    .options-grid, .play-options, .mock-options { grid-template-columns: 1fr; }
    .field-row { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; }
    .section { padding-block: var(--space-7); }
}

/* =====================================================================
   Accent-themed game stage (host + configure screens)
   ===================================================================== */
.game-stage { min-height: 100vh; color: #fff; background-color: var(--tp-blue-light); }
.game-stage.accent-sunset,
.game-stage.accent-violet,
.game-stage.accent-teal,
.game-stage.accent-blue,
.game-stage.accent-pink,
.game-stage.accent-lime { background-color: var(--tp-blue-light); }
.game-stage .host-stage { position: relative; }

.game-wrap { max-width: 1080px; margin-inline: auto; padding: var(--space-8) var(--space-5); text-align: center; }
.game-title { font-size: clamp(2rem, 5vw, 3.25rem); font-weight: var(--fw-black); margin-bottom: var(--space-7); text-shadow: 0 2px 16px rgba(0,0,0,.18); }

/* Buttons that read well on a coloured background */
.btn-light { background: #fff; color: #1a1a1a; border-color: #fff; }
.btn-light:hover { background: #f1f1f1; }
.btn-glass { background: rgba(0,0,0,.22); border-color: rgba(255,255,255,.55); color: #fff; }
.btn-glass:hover { background: rgba(0,0,0,.35); }

.btn-start { display: block; width: min(330px, 86%); margin: var(--space-7) auto 0; padding: 17px 28px; border-radius: var(--radius-pill); background: var(--pal-green); border: 3px solid #fff; color: #fff; font-size: 1.6rem; font-weight: var(--fw-bold); font-family: var(--font-display); box-shadow: var(--shadow-md); transition: transform var(--transition); }
.btn-start:hover { transform: translateY(-2px); }
.btn-start:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.game-back { display: inline-block; margin: var(--space-4) auto 0; padding: 8px 22px; border-radius: var(--radius-pill); background: rgba(0,0,0,.25); color: #fff; font-weight: var(--fw-semibold); }
.game-back:hover { background: rgba(0,0,0,.4); }

/* ---- Configure Room ------------------------------------------------- */
.config-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.config-card { background: rgba(0,0,0,.16); border: 1px solid rgba(255,255,255,.28); border-radius: var(--radius-xl); padding: var(--space-6); color: #fff; text-align: left; }
.config-card h2 { text-align: center; margin-bottom: var(--space-5); }
.config-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); }
.config-label { font-weight: var(--fw-semibold); }
.config-hint { margin-top: var(--space-4); color: rgba(255,255,255,.85); font-size: var(--fs-sm); text-align: center; }

/* Segmented toggle */
.seg { display: inline-flex; background: rgba(0,0,0,.28); border: 2px solid rgba(255,255,255,.6); border-radius: var(--radius-pill); padding: 4px; }
.seg input { display: none; }
.seg label { padding: 8px 22px; border-radius: var(--radius-pill); font-weight: var(--fw-semibold); cursor: pointer; color: #fff; transition: background var(--transition); }
.seg input:checked + label { background: var(--brand-orange); box-shadow: var(--shadow-sm); }

/* Show-on-devices toggle */
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin: var(--space-5) 0; font-weight: var(--fw-semibold); }
.switch { position: relative; display: inline-block; width: 54px; height: 30px; flex: 0 0 auto; }
.switch input { display: none; }
.switch .slider { position: absolute; inset: 0; background: rgba(0,0,0,.3); border: 2px solid rgba(255,255,255,.6); border-radius: 999px; transition: background var(--transition); }
.switch .slider::before { content: ""; position: absolute; width: 22px; height: 22px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform var(--transition); }
.switch input:checked + .slider { background: var(--brand-orange); }
.switch input:checked + .slider::before { transform: translateX(24px); }

/* Number stepper */
.stepper { display: inline-flex; align-items: center; gap: 10px; }
.step-btn { width: 40px; height: 40px; border-radius: 50%; border: 2px solid rgba(255,255,255,.6); background: rgba(0,0,0,.2); color: #fff; font-size: 1.3rem; line-height: 1; }
.step-btn:hover { background: rgba(0,0,0,.35); }
.stepper input { width: 84px; height: 44px; text-align: center; border-radius: var(--radius-md); border: none; background: #fff; color: #111; font-weight: var(--fw-bold); font-size: 1.2rem; }

/* =====================================================================
   Picture trivia layout
   ===================================================================== */
.picture-layout { display: grid; grid-template-columns: minmax(280px, 440px) 1fr; gap: var(--space-7); align-items: center; max-width: 1080px; margin-inline: auto; }
.pic-wrap { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.pic-wrap img { width: 100%; height: auto; display: block; transition: filter .6s ease, transform .6s ease; }
.pic-wrap.blurred img { filter: blur(20px); transform: scale(1.06); }
/* Gradually sharpen the picture over the question time. */
@keyframes unblur {
    0%   { filter: blur(26px); transform: scale(1.06); }
    100% { filter: blur(0);    transform: none; }
}
.pic-caption { position: absolute; left: 0; bottom: 0; width: 100%; background: rgba(0,0,0,.55); color: #fff; padding: 6px 12px; font-size: var(--fs-sm); }
.pic-wrap.small { max-width: 300px; margin: var(--space-4) auto; }
.pic-options { grid-template-columns: 1fr 1fr; }

/* (Gradient answer tiles are defined above; no flat-colour overrides so the
   candy-gradient style shows. Reveal recolouring is at the end of this file.) */
.opt-label { flex: 1; }
.opt-key-big { font-size: 2.2rem; font-weight: var(--fw-black); }

/* Timer bar */
.timer-bar { position: relative; max-width: 520px; margin: var(--space-6) auto 0; height: 6px; background: rgba(255,255,255,.3); border-radius: 999px; }
.timer-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: #fff; border-radius: 999px; transition: width 1s linear; }
.timer-num { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); min-width: 40px; height: 40px; padding: 0 8px; background: #fff; color: #111; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-weight: var(--fw-black); box-shadow: var(--shadow-sm); }

/* =====================================================================
   Teams
   ===================================================================== */
.team-board { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.team-box { border-radius: var(--radius-lg); padding: var(--space-4); border: 2px solid rgba(255,255,255,.3); background: rgba(0,0,0,.18); }
.team-box h3 { margin-bottom: var(--space-3); font-size: var(--fs-lg); }
.team-chooser { margin-bottom: var(--space-4); }
.team-options { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.team-pill { padding: 10px 18px; border-radius: var(--radius-pill); color: #fff; font-weight: var(--fw-semibold); border: 3px solid transparent; }
.team-pill.selected { border-color: #fff; box-shadow: var(--shadow-sm); }
.team-pill .team-count { display:inline-block; min-width:1.4em; padding:0 6px; margin-left:6px; border-radius:var(--radius-pill); background:rgba(0,0,0,.28); font-size:var(--fs-sm); }
.team-create-pill { background: rgba(255,255,255,.14); border:3px dashed rgba(255,255,255,.5); }
.team-random-note { color: rgba(255,255,255,.92); font-weight: var(--fw-semibold); margin: var(--space-2) 0; }
.create-team .input { text-align:center; }
.team-pill.accent-sunset { background: var(--grad-sunset); }
.team-pill.accent-violet { background: var(--grad-violet); }
.team-pill.accent-teal   { background: var(--grad-teal); }
.team-pill.accent-pink   { background: var(--grad-pink); }
.team-pill.accent-lime   { background: var(--grad-lime); }
.team-pill.accent-yellow { background: var(--pal-yellow); color: #14233f; }
.team-pill.accent-green  { background: var(--pal-green); }
.team-pill.accent-red    { background: var(--pal-red); }
.team-pill.accent-blue   { background: var(--pal-blue); }

/* Accent left-border for leaderboard rows / team boxes */
.accent-chip-sunset { border-color: var(--brand-orange) !important; }
.accent-chip-violet { border-color: var(--brand-purple) !important; }
.accent-chip-teal   { border-color: var(--brand-teal) !important; }
.accent-chip-pink   { border-color: var(--brand-pink) !important; }
.accent-chip-lime   { border-color: var(--brand-green) !important; }
.accent-chip-yellow { border-color: var(--pal-yellow) !important; }
.accent-chip-green  { border-color: var(--pal-green) !important; }
.accent-chip-red    { border-color: var(--pal-red) !important; }
.accent-chip-blue   { border-color: var(--pal-blue) !important; }
.lb-row.accent-chip-sunset { border-left: 6px solid var(--brand-orange); }
.lb-row.accent-chip-violet { border-left: 6px solid var(--brand-purple); }
.lb-row.accent-chip-teal   { border-left: 6px solid var(--brand-teal); }
.lb-row.accent-chip-pink   { border-left: 6px solid var(--brand-pink); }
.lb-row.accent-chip-lime   { border-left: 6px solid var(--brand-green); }
.lb-row.accent-chip-yellow { border-left: 6px solid var(--pal-yellow); }
.lb-row.accent-chip-green  { border-left: 6px solid var(--pal-green); }
.lb-row.accent-chip-red    { border-left: 6px solid var(--pal-red); }
.lb-row.accent-chip-blue   { border-left: 6px solid var(--pal-blue); }

/* Join page room info */
.room-info { margin: var(--space-4) 0; padding: 10px 14px; border-radius: var(--radius-md); background: var(--color-surface); border: 1px solid var(--color-border-soft); font-size: var(--fs-sm); }
.room-info.bad, .room-info .bad { color: #ff9db0; display: block; margin-top: 4px; }

/* =====================================================================
   "Before we begin..." instructions
   ===================================================================== */
.instructions { max-width: 700px; margin: var(--space-5) auto; text-align: center; background: rgba(8,18,42,.55); border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius-xl); padding: var(--space-7) var(--space-7) var(--space-6); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); box-shadow: var(--shadow-lg); }
.instructions .game-title { font-size: clamp(2.2rem, 5vw, 3.2rem); background: linear-gradient(180deg, #ffffff 0%, #d6e6ff 60%, #8fc0ff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 3px 6px rgba(0,0,0,.4)); }
.instruction-list { list-style: none; text-align: left; max-width: 660px; margin: var(--space-6) auto; }
.instruction-list li { display: flex; align-items: flex-start; gap: var(--space-4); font-size: var(--fs-xl); font-weight: var(--fw-semibold); margin-bottom: var(--space-5); line-height: 1.35; }
.how-step { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center;
    justify-content: center; background: var(--pal-green); color: #fff; font-family: var(--font-display);
    font-weight: var(--fw-black); font-size: 1.2rem; box-shadow: inset 0 -2px 0 rgba(0,0,0,.2); }

/* =====================================================================
   Game-stage overrides for reused dark-theme components
   ===================================================================== */
.game-stage .room-code { background: none; -webkit-text-fill-color: #fff; color: #fff; }
.game-stage .join-panel { background: rgba(0,0,0,.2); border-color: rgba(255,255,255,.3); }
.game-stage .join-hint, .game-stage .join-hint code { color: rgba(255,255,255,.88); }
.game-stage .q-progress { color: rgba(255,255,255,.9); }
.game-stage .answer-meter, .game-stage .answer-meter .muted { color: #fff; }
.game-stage .lb-row { background: rgba(0,0,0,.22); border-color: rgba(255,255,255,.18); }
.game-stage .player-chip { background: rgba(0,0,0,.25); border-color: rgba(255,255,255,.3); color: #fff; }
.game-stage .host-top { border-bottom-color: rgba(255,255,255,.2); }

/* =====================================================================
   Admin image thumbnails
   ===================================================================== */
.q-thumb { width: 44px; height: 44px; object-fit: cover; border-radius: var(--radius-sm); flex: 0 0 auto; }
.img-thumb-row { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-3); }
.img-thumb { width: 90px; height: 90px; object-fit: cover; border-radius: var(--radius-md); }

@media (max-width: 820px) {
    .config-grid { grid-template-columns: 1fr; }
    .picture-layout { grid-template-columns: 1fr; }
    .pic-wrap { max-width: 420px; margin-inline: auto; }
    .team-board { grid-template-columns: 1fr; }
}

/* =====================================================================
   Emoji avatars
   ===================================================================== */
.avatar-picker { display: flex; justify-content: center; margin-bottom: var(--space-5); }
.avatar-circle { position: relative; width: 96px; height: 96px; border-radius: 50%; border: 3px solid var(--color-border); background: var(--color-bg-2); font-size: 3rem; display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: pointer; padding: 0; line-height: 1; transition: border-color var(--transition), transform var(--transition); }
.avatar-circle:hover { border-color: var(--brand-orange); transform: scale(1.04); }
.avatar-circle:active { transform: scale(0.96); }
.avatar-circle .avatar-tap { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,.6); color: #fff; font-size: .62rem; font-weight: var(--fw-bold); padding: 4px 0 5px; line-height: 1.05; }
/* Compact avatar chooser (host setup on the configure screen) */
.avatar-circle.compact { width: 52px; height: 52px; font-size: 1.7rem; border-width: 2px; flex: 0 0 auto; }
.host-as-fields { display: flex; align-items: center; gap: var(--space-3); }
.host-as-fields .input { max-width: 200px; }
.you-avatar { font-size: 1.2rem; }
.chip-av { font-size: 1.15rem; }
.lb-avatar { font-size: 1.4rem; width: 32px; text-align: center; flex: 0 0 auto; }

/* =====================================================================
   Guest round-score screen ("You have X points")
   ===================================================================== */
.score-screen { text-align: center; }
.score-result { font-weight: var(--fw-black); font-size: var(--fs-xl); margin-bottom: var(--space-4); }
.score-result.good { color: var(--brand-green); }
.score-result.bad  { color: #ff8da3; }
.score-head { font-size: var(--fs-2xl); font-weight: var(--fw-black); font-family: var(--font-display); line-height: 1.1; }
.score-num { font-size: 4rem; font-weight: var(--fw-black); color: var(--brand-yellow); font-family: var(--font-display); line-height: 1; margin: var(--space-2) 0; }
.score-row { display: flex; align-items: center; gap: var(--space-3); justify-content: center; background: var(--color-surface-2); border-radius: var(--radius-pill); padding: 12px 22px; margin: var(--space-5) auto 0; width: max-content; max-width: 100%; }
.score-medal { font-size: 1.6rem; }
.score-avatar { font-size: 1.9rem; }
.score-name { font-weight: var(--fw-bold); }
.score-pts { font-weight: var(--fw-black); color: var(--brand-yellow); }
.fun-fact { margin-top: var(--space-5); color: var(--color-text-muted); font-style: italic; }

/* =====================================================================
   Fun-fact "i" button + panel (host reveal)
   ===================================================================== */
.info-btn { width: 46px; height: 46px; border-radius: 50%; border: 3px solid #fff; background: rgba(0,0,0,.25); color: #fff; font-weight: var(--fw-black); font-style: italic; font-size: 1.25rem; box-shadow: 0 0 18px rgba(255,255,255,.5); }
.info-btn:hover { background: rgba(0,0,0,.4); }
.fun-fact-panel { max-width: 640px; margin: var(--space-5) auto 0; background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.3); border-radius: var(--radius-md); padding: var(--space-4); font-weight: var(--fw-semibold); }

/* =====================================================================
   Confetti
   ===================================================================== */
#confetti-layer { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 9999; }
.confetti-piece { position: absolute; top: -20px; border-radius: 2px; opacity: .9; animation-name: confetti-fall; animation-timing-function: linear; animation-fill-mode: forwards; }
@keyframes confetti-fall {
    0%   { transform: translateY(-20px) rotateZ(0deg); opacity: 1; }
    100% { transform: translateY(106vh) rotateZ(720deg); opacity: .9; }
}
/* Confetti is core party feedback — it plays even with "reduce motion" on. */

/* =====================================================================
   Audio (song-clip) questions
   ===================================================================== */
.host-audio { display: block; margin: var(--space-4) auto var(--space-5); width: min(560px, 92%); }

/* Animated music-bar (replaces the audio player on music questions) */
.music-viz { display: flex; align-items: flex-end; justify-content: center; gap: 9px; height: 170px; margin: var(--space-5) auto var(--space-6); max-width: 460px; }
.music-viz span { width: 18px; border-radius: 9px; height: 30%;
    background: linear-gradient(180deg, var(--pal-yellow), var(--pal-red));
    animation: eq 0.85s ease-in-out infinite; }
.music-viz span:nth-child(1) { animation-delay: -0.05s; }
.music-viz span:nth-child(2) { animation-delay: -0.55s; background: linear-gradient(180deg, #fff, var(--pal-blue)); }
.music-viz span:nth-child(3) { animation-delay: -0.30s; }
.music-viz span:nth-child(4) { animation-delay: -0.70s; background: linear-gradient(180deg, #fff, var(--pal-green)); }
.music-viz span:nth-child(5) { animation-delay: -0.15s; }
.music-viz span:nth-child(6) { animation-delay: -0.60s; background: linear-gradient(180deg, #fff, var(--pal-blue)); }
.music-viz span:nth-child(7) { animation-delay: -0.40s; }
.music-viz span:nth-child(8) { animation-delay: -0.25s; background: linear-gradient(180deg, var(--pal-yellow), var(--pal-green)); }
.music-viz span:nth-child(9) { animation-delay: -0.50s; }
.music-viz.paused span { animation-play-state: paused; height: 45%; }
@keyframes eq { 0%, 100% { height: 22%; } 50% { height: 100%; } }
.audio-hint { background: var(--color-surface-2); border-radius: var(--radius-md); padding: var(--space-5); font-weight: var(--fw-bold); margin-bottom: var(--space-5); }
.q-thumb-audio { display: flex; align-items: center; justify-content: center; background: var(--color-surface-2); font-size: 1.3rem; }

/* =====================================================================
   Finish / winner screen
   ===================================================================== */
.finish-screen { text-align: center; }
.winner-row { display: inline-flex; align-items: center; gap: var(--space-4); background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.25); border-radius: var(--radius-pill); padding: 14px 32px; margin: var(--space-5) auto; font-size: var(--fs-xl); }
.winner-medal { font-size: 2rem; }
.winner-av { font-size: 2.2rem; }
.winner-name { font-weight: var(--fw-black); }
.winner-score { font-weight: var(--fw-black); color: var(--brand-yellow); margin-left: var(--space-4); font-variant-numeric: tabular-nums; }
.finish-standings { max-width: 520px; margin: var(--space-5) auto; }

/* =====================================================================
   Highlights recap
   ===================================================================== */
.highlights { text-align: center; width: 100%; max-width: 1040px; margin-inline: auto; }
.highlights-head { font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--fs-2xl); margin-bottom: var(--space-5); }
.highlight-card { background: rgba(0,0,0,.18); border: 1px solid rgba(255,255,255,.25); border-radius: var(--radius-xl); padding: var(--space-6); }
.highlight-card .q-headline { font-size: var(--fs-2xl); margin-bottom: var(--space-5); }
.highlight-meta { margin-top: var(--space-5); color: rgba(255,255,255,.92); font-weight: var(--fw-semibold); }
.highlights-flavor { margin: var(--space-5) 0; font-weight: var(--fw-bold); font-size: var(--fs-lg); }

/* =====================================================================
   Lobby PIN display (per-digit boxes) + labels
   ===================================================================== */
.join-label { color: rgba(255, 255, 255, 0.9); font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.pin-display { display: flex; gap: 8px; justify-content: center; margin: var(--space-3) auto var(--space-2); flex-wrap: nowrap; }
.pin-cell {
    width: 52px; height: 68px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-md);
    background: rgba(0, 0, 0, 0.28);
    border: 2px solid rgba(255, 255, 255, 0.6);
    font-family: var(--font-display); font-weight: var(--fw-black);
    font-size: 2.4rem; color: #fff;
}
.config-grid-single { grid-template-columns: minmax(0, 540px); justify-content: center; }
.duration-chip { background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(255, 255, 255, 0.4); border-radius: var(--radius-pill); padding: 8px 16px; font-weight: var(--fw-semibold); color: #fff; }

/* =====================================================================
   Confirm modal (delete quiz, etc.)
   ===================================================================== */
.modal-overlay {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(0, 0, 0, 0.62);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    padding: var(--space-5);
    animation: fadeIn 0.15s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal-box {
    background: var(--color-surface-solid); border: 1px solid var(--color-border);
    border-radius: var(--radius-lg); padding: var(--space-6);
    max-width: 420px; width: 100%; box-shadow: var(--shadow-lg); text-align: center;
}
.modal-box .modal-icon { font-size: 2.4rem; }
.modal-box h3 { margin: var(--space-3) 0 var(--space-2); }
.modal-box p { color: var(--color-text-muted); margin-bottom: var(--space-5); }
.modal-actions { display: flex; gap: var(--space-3); justify-content: center; }
.icon-btn svg { width: 18px; height: 18px; }

@media (max-width: 480px) {
    .pin-cell { width: 46px; height: 60px; font-size: 2rem; }
}

/* =====================================================================
   Dashboard: search, category rows, sliders, animated icons
   ===================================================================== */
.dash-tools { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.search-wrap { display: flex; gap: var(--space-2); }
.search-wrap .input { height: 44px; }
#quizSearch { min-width: 190px; }
#quizCatFilter { min-width: 150px; }

.cat-section { margin-bottom: var(--space-6); background: var(--color-surface); border: 1px solid var(--color-border-soft); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-5) var(--space-4); }
.cat-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border-soft); }
.cat-head h2 { font-size: var(--fs-xl); }
.cat-count { background: var(--color-surface-2); border-radius: var(--radius-pill); padding: 2px 12px; font-size: var(--fs-sm); color: var(--color-text-muted); }
.slider-arrows { margin-left: auto; display: flex; gap: var(--space-2); }
.slider-arrow { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); font-size: 1.4rem; line-height: 1; }
.slider-arrow:hover { background: var(--color-surface-2); }

.cat-icons { display: inline-flex; gap: 4px; }
.cat-emoji { font-size: 1.7rem; display: inline-block; line-height: 1; }
@keyframes anim-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes anim-wiggle { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(9deg); } }
@keyframes anim-spin { to { transform: rotate(360deg); } }
.anim-bounce { animation: anim-bounce 1.8s ease-in-out infinite; }
.anim-wiggle { animation: anim-wiggle 2.2s ease-in-out infinite; }
.anim-spin { animation: anim-spin 3.5s linear infinite; }
.anim-spin-slow { animation: anim-spin 8s linear infinite; }

.cat-slider {
    display: flex; gap: var(--space-4); overflow-x: auto;
    padding: 4px 2px var(--space-4);
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
}
.cat-slider::-webkit-scrollbar { height: 8px; }
.cat-slider::-webkit-scrollbar-thumb { background: var(--color-surface-2); border-radius: 999px; }
.cat-slider .quiz-card { flex: 0 0 300px; scroll-snap-align: start; }

/* Quiz card cover image + content layering */
.quiz-card-body { position: relative; z-index: 1; width: 100%; }
.quiz-card .badge { z-index: 2; }
.quiz-card.has-cover { background-size: cover; background-position: center; }
.quiz-card.has-cover::before {
    content: ""; position: absolute; inset: 0; z-index: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.8));
}

/* Category management list */
.cat-manage-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
.cat-manage-item { display: flex; align-items: center; gap: var(--space-3); background: var(--color-surface-solid); border: 1px solid var(--color-border-soft); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
.cat-manage-item .cat-rename { flex: 1; }
.cat-manage-item .cat-rename input { width: 100%; }
.cat-manage-item .q-actions { display: flex; gap: var(--space-2); }
.cat-manage-item .q-actions form { display: inline; }

@media (max-width: 600px) {
    .cat-slider .quiz-card { flex: 0 0 84%; }
    .dash-tools { width: 100%; }
    .search-wrap { flex: 1; }
    #quizSearch { flex: 1; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .anim-bounce, .anim-wiggle, .anim-spin, .anim-spin-slow { animation: none; }
}

/* Admin header fits on phones */
@media (max-width: 620px) {
    .admin-header { height: auto; padding-block: var(--space-3); }
    .admin-header .container { flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
    .admin-nav { gap: var(--space-3); font-size: var(--fs-xs); }
    .admin-nav .muted { display: none; }
    .page-title-row { gap: var(--space-3); }
}

/* =====================================================================
   Question builder: template picker + visual editor
   ===================================================================== */
.q-thumb-icon { display: flex; align-items: center; justify-content: center; background: var(--color-surface-2); font-size: 1.3rem; }
.q-type-tag { display: inline-block; background: var(--color-surface-2); border-radius: var(--radius-pill); padding: 1px 8px; font-size: var(--fs-xs); color: var(--color-text-muted); margin-right: 6px; }

.picker-overlay .picker-box { max-width: 720px; text-align: left; position: relative; }
.picker-box h3 { text-align: center; }
.picker-box > .muted { text-align: center; margin-bottom: var(--space-5); }
.picker-close { position: absolute; top: 12px; right: 16px; background: none; border: none; color: var(--color-text-muted); font-size: 1.8rem; line-height: 1; cursor: pointer; }
.picker-close:hover { color: var(--color-text); }
.template-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-3); }
.template-card { display: flex; flex-direction: column; gap: 4px; padding: var(--space-5); border-radius: var(--radius-md); background: var(--color-surface); border: 1px solid var(--color-border); transition: transform var(--transition), border-color var(--transition); text-align: center; align-items: center; }
.template-card:hover { transform: translateY(-3px); border-color: var(--brand-orange); }
.template-icon { font-size: 2rem; }
.template-label { font-weight: var(--fw-bold); }
.template-desc { font-size: var(--fs-xs); color: var(--color-text-muted); }

.builder-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); align-items: start; }
.builder-form { margin: 0; }
.builder-preview { position: sticky; top: calc(var(--header-height) + var(--space-4)); }
.preview-label { font-size: var(--fs-sm); color: var(--color-text-muted); margin-bottom: var(--space-2); }
.preview-stage { border-radius: var(--radius-lg); padding: var(--space-6); color: #fff; min-height: 320px; text-align: center; box-shadow: var(--shadow-md); }
.preview-stage.accent-sunset { background: var(--grad-sunset); }
.preview-stage.accent-violet { background: var(--grad-violet); }
.preview-stage.accent-teal   { background: var(--grad-teal); }
.preview-stage.accent-pink   { background: var(--grad-pink); }
.preview-stage.accent-lime   { background: var(--grad-lime); }
.preview-stage .q-headline { font-size: var(--fs-xl); margin-bottom: var(--space-4); }
.preview-stage .options-grid { gap: var(--space-3); }
.preview-stage .opt-tile { padding: var(--space-4); font-size: var(--fs-base); }
.prev-pic { max-width: 280px; margin: 0 auto var(--space-4); }
.prev-video { width: 100%; max-width: 320px; border-radius: var(--radius-md); margin: 0 auto var(--space-4); display: block; }
.prev-answerbox { background: rgba(255,255,255,.18); border: 2px dashed rgba(255,255,255,.5); border-radius: var(--radius-md); padding: var(--space-4); font-weight: var(--fw-semibold); }
.prev-accepts { margin-top: var(--space-3); color: rgba(255,255,255,.9); font-size: var(--fs-sm); }

/* Guest fill-in-the-blank input */
.play-text-form { display: flex; flex-direction: column; gap: var(--space-4); }
.play-text-input { width: 100%; padding: 16px; font-size: var(--fs-lg); text-align: center; border-radius: var(--radius-lg); border: 2px solid var(--color-border); background: var(--color-bg-2); color: var(--color-text); }
.play-text-input:focus { outline: none; border-color: var(--brand-orange); }

@media (max-width: 860px) {
    .builder-grid { grid-template-columns: 1fr; }
    .builder-preview { position: static; }
}

/* =====================================================================
   Home category showcase + how-to guide
   ===================================================================== */
.cat-showcase { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-4); }
.cat-tile { border-radius: var(--radius-lg); padding: var(--space-6) var(--space-4); text-align: center; color: #fff; box-shadow: var(--shadow-md); display: flex; flex-direction: column; align-items: center; gap: var(--space-3); transition: transform var(--transition); }
.cat-tile:hover { transform: translateY(-5px); }
.cat-tile.sunset { background: var(--grad-sunset); }
.cat-tile.violet { background: var(--grad-violet); }
.cat-tile.teal   { background: var(--grad-teal); }
.cat-tile.pink   { background: var(--grad-pink); }
.cat-tile.lime   { background: var(--grad-lime); }
.cat-tile .cat-emoji { font-size: 2.8rem; }
.cat-tile-name { font-weight: var(--fw-bold); font-size: var(--fs-lg); }

.guide-heading { font-size: var(--fs-xl); margin-bottom: var(--space-5); }
.guide-steps { list-style: none; display: flex; flex-direction: column; gap: var(--space-4); }
.guide-step { display: flex; gap: var(--space-4); align-items: flex-start; background: var(--color-surface); border: 1px solid var(--color-border-soft); border-radius: var(--radius-lg); padding: var(--space-5); }
.guide-num { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; background: var(--grad-brand); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: var(--fw-black); font-size: var(--fs-lg); }
.guide-step strong { font-size: var(--fs-lg); }
.guide-step p { color: var(--color-text-muted); margin-top: 4px; }
.guide-step em { color: var(--color-text); font-style: normal; font-weight: var(--fw-semibold); }
.guide-callout { margin-top: var(--space-6); background: rgba(56, 189, 248, 0.1); border: 1px solid rgba(56, 189, 248, 0.4); border-radius: var(--radius-md); padding: var(--space-5); }

/* Cast modal (light text on dark, used on the coloured host stage) */
.cast-modal .modal-box { text-align: left; }
.cast-modal .modal-box h3 { text-align: center; }
.cast-steps { margin: var(--space-4) 0; padding-left: var(--space-5); color: var(--color-text-muted); }
.cast-steps li { margin-bottom: var(--space-2); }

/* Text / video host displays */
.host-video { display: block; margin: var(--space-4) auto var(--space-5); max-width: 520px; width: 100%; border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.text-stage { margin: var(--space-6) auto; max-width: 620px; }
.text-typing { font-size: var(--fs-xl); font-weight: var(--fw-semibold); opacity: .9; }
.text-answer-reveal { font-size: clamp(1.4rem, 4vw, 2.4rem); font-weight: var(--fw-black); background: rgba(52,211,153,.22); border: 2px solid var(--brand-green); border-radius: var(--radius-lg); padding: var(--space-5); }

/* Ranked leaderboard table (1..N) */
.lb-table { border-collapse: separate; border-spacing: 0 10px; width: 100%; max-width: 760px; margin: var(--space-4) auto; }
.lb-table td { padding: 17px 22px; background: var(--color-surface-solid); font-size: 1.45rem; }
.game-stage .lb-table td { background: rgba(0, 0, 0, 0.24); }
.lb-rank-cell { width: 64px; text-align: center; font-weight: var(--fw-black); font-size: 1.7rem; border-radius: var(--radius-md) 0 0 var(--radius-md); font-variant-numeric: tabular-nums; }
.lb-name-cell { font-weight: var(--fw-semibold); }
.lb-name-cell .lb-avatar { font-size: 1.7rem; width: 40px; margin-right: 12px; vertical-align: middle; }
.lb-score-cell { text-align: right; font-weight: var(--fw-black); font-size: 1.6rem; color: var(--brand-yellow); border-radius: 0 var(--radius-md) var(--radius-md) 0; font-variant-numeric: tabular-nums; }
.lb-table tbody tr:nth-child(1) .lb-rank-cell { color: #ffd700; }
.lb-table tbody tr:nth-child(2) .lb-rank-cell { color: #cfd3da; }
.lb-table tbody tr:nth-child(3) .lb-rank-cell { color: #e6a972; }
.lb-scroll { max-height: 62vh; overflow-y: auto; max-width: 800px; margin: var(--space-4) auto; }
.lb-table thead th { font-size: var(--fs-sm); color: rgba(255,255,255,.7); padding: 6px 14px; font-weight: var(--fw-semibold); background: transparent; }
.lb-table thead .lb-name-cell { text-align: left; }
.lb-table thead .lb-rank-cell { text-align: center; }
.lb-table thead .lb-score-cell { text-align: right; }
.lb-empty { text-align: center; padding: var(--space-5); color: rgba(255,255,255,.75); }

/* Finish buttons aligned + uniform */
.finish-actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }

/* Highlights carousel (auto-cycles one question at a time) */
.hl-carousel { max-width: 760px; margin-inline: auto; }
.hl-dots { display: flex; gap: 8px; align-items: center; justify-content: center; margin-top: var(--space-4); }
.hl-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.35); transition: background var(--transition); }
.hl-dot.on { background: #fff; }
.hl-counter { margin-left: var(--space-3); font-size: var(--fs-sm); color: rgba(255,255,255,.8); }

/* =====================================================================
   Reveal banners + pop / screen-transition animations
   ===================================================================== */
@keyframes pop-in {
    0%   { transform: scale(.6); opacity: 0; }
    60%  { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1); }
}
.pop { animation: pop-in .45s cubic-bezier(.2, .9, .3, 1.25) both; }

.reveal-banner {
    font-family: var(--font-display); font-weight: var(--fw-black);
    font-size: clamp(1.5rem, 4vw, 2.4rem);
    margin: var(--space-3) auto var(--space-5); padding: 10px 30px;
    border-radius: var(--radius-pill); display: inline-block;
}
.reveal-banner.ok  { background: rgba(52, 211, 153, .25); box-shadow: 0 0 0 2px rgba(52, 211, 153, .65); }
.reveal-banner.bad { background: rgba(255, 77, 109, .22); box-shadow: 0 0 0 2px rgba(255, 109, 134, .6); }

@keyframes stage-fade {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}
.q-stage, .finish-screen, .lobby, .instructions, .highlights,
.play-reveal, .play-state { animation: stage-fade .32s ease both; }

/* Finish podium */
/* Real winners' pedestal — figures standing on tiered numbered blocks */
.podium { position: relative; display: flex; justify-content: center; align-items: flex-end; gap: 12px; margin: var(--space-7) auto 0; max-width: 540px; padding-bottom: 14px; }
.podium::after { content: ""; position: absolute; left: -5%; right: -5%; bottom: 0; height: 16px; border-radius: 10px; background: linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.45)); box-shadow: 0 10px 30px rgba(0,0,0,.35); z-index: -1; }
.podium-spot { position: relative; display: flex; flex-direction: column; align-items: center; flex: 1 1 0; max-width: 168px; }
.podium .spot-1::before { content: ""; position: absolute; top: -8%; left: 50%; transform: translateX(-50%); width: 150px; height: 150px; background: radial-gradient(circle, rgba(255,224,120,.45), transparent 68%); filter: blur(10px); z-index: -1; pointer-events: none; }
.podium-figure { display: flex; flex-direction: column; align-items: center; gap: 3px; margin-bottom: 10px; }
.podium-medal { font-size: 1.7rem; line-height: 1; }
.podium-av { display: flex; }
.podium-name { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-base); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium-score { font-weight: var(--fw-black); color: #ffd24a; font-variant-numeric: tabular-nums; }
.podium-block { position: relative; width: 100%; border-radius: 9px 9px 2px 2px; display: flex; align-items: flex-start; justify-content: center; padding-top: 14px;
    box-shadow: inset 0 6px 0 rgba(255,255,255,.3), inset 8px 0 14px rgba(255,255,255,.12), inset -12px 0 18px rgba(0,0,0,.22), inset 0 -16px 24px rgba(0,0,0,.24), 0 10px 22px rgba(0,0,0,.28); }
.podium-block::before { content: ""; position: absolute; left: 3px; right: 3px; top: -7px; height: 13px; border-radius: 8px 8px 0 0; background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.12)); }
.podium-rank { font-family: var(--font-display); font-weight: var(--fw-black); font-size: 2.4rem; color: rgba(255,255,255,.98); text-shadow: 0 2px 0 rgba(0,0,0,.25), 0 0 14px rgba(0,0,0,.25); }
.podium .spot-1 .podium-block { height: 128px; background: linear-gradient(180deg, #ffe07a 0%, #f5b21e 55%, #d98e08 100%); }
.podium .spot-2 .podium-block { height: 94px; background: linear-gradient(180deg, #f1f3f8 0%, #c4cad6 55%, #9aa2b3 100%); }
.podium .spot-3 .podium-block { height: 70px; background: linear-gradient(180deg, #f0c69a 0%, #d8915a 55%, #b9743b 100%); }
.podium .spot-2 .podium-rank, .podium .spot-3 .podium-rank { color: rgba(255,255,255,.98); }
.podium-spot.you .podium-figure { filter: drop-shadow(0 0 10px rgba(250,217,32,.8)); }

/* Animated winners screen (5s) shown before the final standings */
.winners-screen { text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60vh; gap: var(--space-5); }
.win-title { font-family: var(--font-display); font-weight: var(--fw-black); color: #fff; font-size: clamp(2rem, 6vw, 4rem); letter-spacing: .5px; text-shadow: 0 4px 0 rgba(0,0,0,.25), 0 0 34px rgba(250,217,32,.45); animation: win-pop .7s cubic-bezier(.2,1.3,.4,1) both; }
.winners-screen .podium-block { animation: pedestal-grow .6s cubic-bezier(.2,.9,.3,1) both; transform-origin: bottom; }
.winners-screen .podium-figure { animation: rise-in .55s cubic-bezier(.2,.9,.3,1) both; }
.winners-screen .spot-2 .podium-block, .winners-screen .spot-2 .podium-figure { animation-delay: .12s; }
.winners-screen .spot-3 .podium-block, .winners-screen .spot-3 .podium-figure { animation-delay: .05s; }
.winners-screen .spot-1 .podium-block { animation-delay: .3s; }
.winners-screen .spot-1 .podium-figure { animation-delay: .45s; }
.winners-screen .podium-medal { display: inline-block; animation: medal-bounce 1.2s ease-in-out infinite; }
@keyframes pedestal-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes win-pop { 0% { transform: scale(.55); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes podium-rise { 0% { transform: translateY(64px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes podium-rise-gold { 0% { transform: translateY(64px); opacity: 0; } 100% { transform: translateY(-18px); opacity: 1; } }
@keyframes medal-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.finish-sub { text-align: center; margin: var(--space-6) 0 var(--space-2); font-size: var(--fs-lg); }
/* Final-results recap: kept compact so the leaderboard is the star. */
.finish-highlights { margin-top: var(--space-6); max-width: 480px; margin-inline: auto; text-align: left; opacity: .9; }
.finish-highlights .finish-sub { font-size: var(--fs-base); }
.finish-highlights .highlight-card { background: rgba(0, 0, 0, 0.22); margin-bottom: var(--space-3); padding: var(--space-3) var(--space-4); font-size: var(--fs-sm); }
.finish-highlights .hl-q { margin-bottom: var(--space-2); font-size: var(--fs-sm); }
.finish-highlights .pic-wrap { max-width: 130px; margin: 0 auto var(--space-2); }

/* (Guest reveal colours are handled by the reveal recolour block at end of file.) */

/* Contrast: keep white answer text legible on every tile colour */
.play-opt, .opt-tile, .mock-opt { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); }

.play-end-actions { display: flex; gap: var(--space-3); justify-content: center; margin-top: var(--space-5); flex-wrap: wrap; }

/* ---- Bigger, richer question-editor preview ---- */
.builder-preview { position: sticky; top: calc(var(--header-height) + var(--space-4)); }
.preview-stage { min-height: 560px; }
.preview-stage .q-headline { font-size: var(--fs-2xl); }
.preview-stage .prev-pic, .preview-stage .pic-wrap { max-width: 360px; margin: 0 auto var(--space-4); }
.preview-stage .prev-video { max-width: 400px; }
.pic-wrap.demo-blur img { animation: blurDemo 4.5s ease-in-out infinite; }
@keyframes blurDemo {
    0%, 35%  { filter: blur(16px); transform: scale(1.05); }
    65%, 100%{ filter: blur(0);    transform: scale(1); }
}
.media-placeholder {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    border: 2px dashed rgba(255, 255, 255, 0.55); border-radius: var(--radius-lg);
    padding: var(--space-8) var(--space-5); margin: 0 auto var(--space-4); max-width: 380px;
    color: rgba(255, 255, 255, 0.9); font-size: 3.2rem;
}
.media-placeholder span { font-size: var(--fs-sm); text-align: center; line-height: 1.4; }
.sound-marker { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: var(--space-5) auto; }
.sound-marker .sound-icon { font-size: 3.6rem; animation: anim-bounce 1.1s ease-in-out infinite; }
.sound-marker span { font-size: var(--fs-base); font-weight: var(--fw-semibold); }

/* Host plays on the host screen */
.opt-tile.clickable { cursor: pointer; }
.opt-tile.clickable:hover { transform: translateY(-3px); box-shadow: 0 11px 0 rgba(0,0,0,0.24), var(--shadow-lg); }
.opt-tile.clickable:active { transform: translateY(3px); box-shadow: 0 3px 0 rgba(0,0,0,0.24), var(--shadow-sm); }
@keyframes opt-pop { 0% { transform: scale(1); } 40% { transform: scale(1.05); } 100% { transform: scale(1); } }
.opt-tile.host-chosen { box-shadow: 0 0 0 4px #fff, var(--shadow-md); }
.opt-tile.wrong { border-color: #ff4d6d; box-shadow: 0 0 0 4px rgba(255, 77, 109, 0.85), var(--shadow-md); }
.host-tap-hint { margin-top: var(--space-4); color: rgba(255, 255, 255, 0.92); font-weight: var(--fw-semibold); }
.lb-countdown { margin-top: var(--space-5); font-weight: var(--fw-bold); font-size: var(--fs-lg); color: rgba(255, 255, 255, 0.95); }

/* ============================================================= *
 * User (restaurant) host area — "Start a game"
 * ============================================================= */
.user-top {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-3); padding: var(--space-4) var(--space-5);
    background: var(--tp-blue);
}
.user-top-actions { display: flex; align-items: center; gap: var(--space-3); }
.user-top-actions .muted { color: rgba(255, 255, 255, 0.85); }
.user-wrap { max-width: 760px; }
.user-sub {
    text-align: center; color: rgba(255, 255, 255, 0.9);
    margin: calc(var(--space-2) * -1) auto var(--space-6); max-width: 46ch; line-height: 1.5;
}
.user-step-h {
    font-family: var(--font-display); font-size: var(--fs-lg); font-weight: var(--fw-bold);
    color: #fff; margin: var(--space-6) 0 var(--space-4); text-align: left;
}
.cat-pick-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--space-4);
}
.cat-pick {
    display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
    padding: var(--space-5) var(--space-3); border-radius: var(--radius-lg);
    background: var(--color-surface-2); border: 2px solid var(--color-border);
    color: #fff; cursor: pointer; text-align: center; transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.cat-pick:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, 0.45); }
.cat-pick.selected { border-color: var(--pal-yellow); background: rgba(250, 217, 32, 0.16); box-shadow: 0 0 0 3px rgba(250, 217, 32, 0.35); }
.cat-pick .cat-icons { font-size: 2.2rem; }
.cat-pick-name { font-weight: var(--fw-bold); font-size: var(--fs-base); }
.cat-pick-count { font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.75); }
.user-config { animation: chip-in .4s ease both; }
@media (max-width: 540px) {
    .hide-sm { display: none; }
    .cat-pick-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================= *
 * Public TV / big-screen view (screen.php)
 * ============================================================= */
.screen-top .host-game-title { color: rgba(255,255,255,.92); }
.screen-wait {
    font-family: var(--font-display); font-weight: var(--fw-bold);
    font-size: var(--fs-xl); color: #fff; text-align: center; margin: var(--space-5) 0 0;
}
/* In full screen the TV is a pure display — drop the top chrome entirely. */
body.screen-mode.is-fullscreen .screen-top { display: none; }
/* The big screen should read from across the room: scale the game up a touch. */
.screen-mode .q-headline { font-size: clamp(1.6rem, 3.2vw, 3rem); }
.screen-mode .opt-label { font-size: clamp(1rem, 1.8vw, 1.6rem); }
.screen-mode .lobby .join-label { font-size: var(--fs-lg); }

/* Enter-a-PIN landing for the TV when no room is supplied. */
.screen-code-wrap {
    max-width: 460px; margin: 0 auto; padding: var(--space-8) var(--space-5);
    min-height: 100vh; display: flex; flex-direction: column; align-items: center;
    justify-content: center; text-align: center; gap: var(--space-3);
}
.screen-code-form { display: flex; flex-direction: column; gap: var(--space-4); width: 100%; margin-top: var(--space-4); }
.cast-qr { text-align: center; margin: var(--space-4) 0 0; }
.cast-qr img { background: #fff; padding: 8px; border-radius: var(--radius-md); }
.cast-url { font-weight: var(--fw-semibold); word-break: break-all; margin-top: var(--space-2); }
.tv-open { display: inline-flex; margin-top: var(--space-3); }

/* Guest lobby roster + "this is you" leaderboard highlight */
.lobby-roster {
    display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center;
    margin-top: var(--space-5);
}
.lobby-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: var(--radius-pill);
    background: var(--color-surface-2); border: 1px solid var(--color-border);
    font-weight: var(--fw-semibold); font-size: var(--fs-sm); color: #fff;
    animation: chip-in .5s cubic-bezier(.2,.8,.25,1) both;
}
.lobby-chip .chip-av { font-size: 1.1em; }
.lobby-chip.you { background: rgba(250,217,32,.18); border-color: var(--pal-yellow); }
.lb-row.you {
    outline: 3px solid #ffd21f;
    background: linear-gradient(180deg, rgba(255,238,140,.55) 0%, rgba(252,210,40,.42) 55%, rgba(228,178,10,.46) 100%);
    box-shadow: 0 0 0 3px rgba(250, 217, 32, .3);
    color: #2a2200;
}
.lb-row.you .lb-name, .lb-row.you .lb-score, .lb-row.you .lb-rank { color: #2a2200; }
.you-tag {
    display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: var(--radius-pill);
    background: var(--pal-yellow); color: #14233f; font-size: .72em; font-weight: var(--fw-bold);
    vertical-align: middle;
}
.lb-sep { text-align: center; color: rgba(255,255,255,.6); font-size: var(--fs-lg); line-height: 1; margin: 2px 0; }

/* ============================================================= *
 * Design system — material depth, grain, living backdrop, motion
 * Palette + layout unchanged; this only adds texture & depth.
 * ============================================================= */

/* Filmic micro-grain over the whole UI (barely-there, adds tooth) */
body::after {
    content: ""; position: fixed; inset: 0; z-index: 9000; pointer-events: none;
    opacity: .045; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 200px 200px;
}

/* Party backdrop: a blue gradient base with a soft corner glow, and the
   scattered-shape PATTERN drawn on two always-drifting layers (::before/::after)
   that cross-fade between category themes on the dashboard. */
body.game-stage, body.admin-body, body.page-centered, body.home-stage {
    --bg-pattern: url(/assets/img/pat/party.svg);  /* layer A image */
    --pat-b: none;                                 /* layer B image */
    --op-a: 1;                                     /* layer A opacity */
    --op-b: 0;                                     /* layer B opacity */
    background-color: #2f6bdf;
    background-image:
        radial-gradient(42% 52% at 16% 14%, rgba(190,230,255,.22), transparent 60%),
        radial-gradient(44% 54% at 84% 90%, rgba(20,70,200,.24), transparent 60%),
        linear-gradient(140deg, #3aa6f0 0%, #2f74ea 46%, #1b46be 100%);
    background-repeat: no-repeat;
    background-attachment: fixed;
}
/* Two always-drifting pattern layers (pure CSS) that cross-fade between category
   themes. ::before = layer A, ::after = layer B; the dashboard fades the new
   theme in on one while the old fades out on the other (overlap, no blank gap).
   Even with no JS, layer A still renders the pattern and drifts. */
body.game-stage::before, body.admin-body::before, body.page-centered::before, body.home-stage::before,
body.game-stage::after,  body.admin-body::after {
    content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
    background-size: 150px 150px; background-repeat: repeat;
    transition: opacity 2s ease-in-out;
    /* The party backdrop is core to the design, so the gentle drift + dissolve
       run even when the OS asks to reduce motion (it's slow and non-vestibular). */
    animation: bg-pan 48s linear infinite;
}
body.game-stage::before, body.admin-body::before, body.page-centered::before, body.home-stage::before { background-image: var(--bg-pattern); opacity: var(--op-a); }
body.game-stage::after,  body.admin-body::after  { background-image: var(--pat-b);      opacity: var(--op-b); }
/* Both offsets are exact multiples of the 150px tile so the loop is seamless
   (no jump/glitch when the animation restarts). */
@keyframes bg-pan { to { background-position: 300px 450px; } }

/* Glass tiers — frosted translucency over the moving backdrop */
.config-card, .join-panel, .panel, .auth-card, .cat-pick, .value-card, .step-card,
.lb-row, .team-box, .player-chip, .podium-spot {
    backdrop-filter: blur(11px) saturate(118%);
    -webkit-backdrop-filter: blur(11px) saturate(118%);
}

/* Staggered spring entrances (high-impact first paint) */
@media (prefers-reduced-motion: no-preference) {
    .opt-cell { animation: rise-in .42s cubic-bezier(.2,.9,.3,1) both; }
    .opt-cell:nth-child(2) { animation-delay: .06s; }
    .opt-cell:nth-child(3) { animation-delay: .12s; }
    .opt-cell:nth-child(4) { animation-delay: .18s; }
    .play-opt { animation: fade-in .4s ease both; }
    .play-opt:nth-child(2) { animation-delay: .06s; }
    .play-opt:nth-child(3) { animation-delay: .12s; }
    .play-opt:nth-child(4) { animation-delay: .18s; }
    .cat-pick { animation: rise-in .45s cubic-bezier(.2,.9,.3,1) both; }
    .q-headline, .game-title { animation: rise-in .5s cubic-bezier(.2,.9,.3,1) both; }
}
@keyframes rise-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* Toggle switch (read-aloud, etc.) */
.switch { position: relative; display: inline-block; width: 54px; height: 30px; flex: 0 0 auto; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch .switch-knob { position: absolute; inset: 0; border-radius: var(--radius-pill); background: rgba(255,255,255,.16); border: 1px solid var(--color-border); transition: background .15s ease; pointer-events: none; }
.switch .switch-knob::before { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform .15s cubic-bezier(.2,.9,.3,1); }
.switch input:checked + .switch-knob { background: var(--pal-green); border-color: transparent; }
.switch input:checked + .switch-knob::before { transform: translateX(24px); }

/* Avatar selection grid (player join) */
.avatar-picker { text-align: center; margin-bottom: var(--space-5); }
.avatar-selected { width: 88px; height: 88px; margin: 0 auto var(--space-2); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 3rem; line-height: 1; background: var(--color-surface-2); border: 2px solid var(--color-border); box-shadow: var(--shadow-md); animation: opt-pop .4s cubic-bezier(.2,.9,.3,1); }
.avatar-hint { font-size: var(--fs-sm); color: var(--color-text-muted); margin-bottom: var(--space-3); }
.avatar-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; max-height: 216px; overflow-y: auto; padding: 4px; }
.avatar-grid::-webkit-scrollbar { width: 8px; }
.avatar-grid::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); border-radius: var(--radius-pill); }
.avatar-cell { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 1.55rem; border-radius: var(--radius-md); background: var(--color-surface-2); border: 2px solid transparent; }
.avatar-cell:hover { transform: translateY(-2px); }
.avatar-cell.selected { border-color: var(--pal-yellow); background: rgba(250,217,32,.18); transform: scale(1.06); box-shadow: 0 0 0 3px rgba(250,217,32,.3); }
@media (max-width: 420px) { .avatar-grid { grid-template-columns: repeat(5, 1fr); } }

/* 3D-toon avatars — crisp, centred in every container */
.tp-av { display: block; }
/* Full-body figure: the whole character (used in the picker grid + podium) */
.tp-figure { position: relative; display: inline-block; vertical-align: bottom; }
.tp-figure-body { position: absolute; left: 0; top: 0; width: 100%; height: 100%;
    object-fit: contain; object-position: center bottom; filter: drop-shadow(0 8px 12px rgba(0,0,0,.34)); }
.tp-figure-head { position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 62%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; box-shadow: 0 3px 9px rgba(0,0,0,.4); z-index: 2; }
.tp-figure-head img { width: 100%; height: 100%; display: block; }
.tp-figure-trophy { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }
.chip-av, .lb-avatar, .vote-av, .you-avatar { display: inline-flex; align-items: center; justify-content: center; }
.chip-av .tp-av, .lb-avatar .tp-av, .vote-av .tp-av, .you-avatar .tp-av,
.avatar-cell .tp-av, .avatar-selected .tp-av, .podium-av .tp-av, .result-av .tp-av { display: block; }
.avatar-picker { display: flex; flex-direction: column; align-items: center; }
.avatar-head { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-lg); color: #fff; text-align: center; margin-bottom: var(--space-3); }
.avatar-selected { background: transparent !important; border: none !important; box-shadow: none !important; width: 96px !important; height: 96px !important; display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-4); }
.avatar-selected .tp-av { width: 96px; height: 96px; filter: drop-shadow(0 6px 14px rgba(0,0,0,.4));
    animation: av-selected-pop .5s cubic-bezier(.2,.9,.3,1), av-bob 3.4s ease-in-out .5s infinite; }
.avatar-grid { width: 100%; }
.avatar-cell { background: var(--color-surface-2); padding: 5px; }
.avatar-cell .tp-av { width: 100%; height: auto; }
.podium-av .tp-av, .result-av .tp-av { margin: 0 auto; filter: drop-shadow(0 6px 16px rgba(0,0,0,.35)); }
.av-emoji { display: inline-block; }

/* -------- Avatar animations (kept ALIVE under reduced-motion on purpose) ---- */
/* Idle bob so the picker grid feels alive; hover = a lively hop; select = pop */
@keyframes av-bob      { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6%); } }
@keyframes av-hop      { 0% { transform: translateY(0) scale(1); } 30% { transform: translateY(-16%) scale(1.05,.96); } 60% { transform: translateY(0) scale(.98,1.03); } 100% { transform: translateY(0) scale(1); } }
@keyframes av-selected-pop { 0% { transform: scale(.4) rotate(-8deg); opacity: 0; } 60% { transform: scale(1.12) rotate(3deg); } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes av-cheer    { 0%,100% { transform: translateY(0) rotate(-3deg); } 25% { transform: translateY(-14%) rotate(4deg); } 50% { transform: translateY(0) rotate(-3deg); } 75% { transform: translateY(-7%) rotate(2deg); } }
@keyframes av-sulk     { 0%,100% { transform: rotate(-4deg) translateY(0); } 50% { transform: rotate(4deg) translateY(3%); } }

.avatar-cell .tp-figure { width: 100% !important; height: 100% !important; }
.avatar-cell .tp-figure-body { animation: av-bob 3.2s ease-in-out infinite; transform-origin: 50% 100%; will-change: transform; }
/* Scatter the idle timing so they don't bob in lockstep */
.avatar-cell:nth-child(4n)   .tp-figure-body { animation-duration: 3.8s; animation-delay: -.4s; }
.avatar-cell:nth-child(4n+1) .tp-figure-body { animation-duration: 3.1s; animation-delay: -1.1s; }
.avatar-cell:nth-child(4n+2) .tp-figure-body { animation-duration: 4.2s; animation-delay: -2.0s; }
.avatar-cell:nth-child(4n+3) .tp-figure-body { animation-duration: 2.9s; animation-delay: -.7s; }
.avatar-screen .avatar-cell:hover .tp-figure-body,
.avatar-cell:hover .tp-figure-body { animation: av-hop .5s cubic-bezier(.2,.9,.3,1); }
.avatar-cell.selected .tp-figure-body { animation: av-cheer 1s cubic-bezier(.2,.9,.3,1) infinite; }

/* Single avatar on the join screen — tap to open the full picker */
.avatar-picker { text-align: center; margin-bottom: var(--space-5); }
.avatar-trigger { background: none; border: none; cursor: pointer; display: inline-flex; flex-direction: column; align-items: center; gap: 8px; padding: 0; }
.avatar-trigger-img { width: 104px; height: 104px; display: flex; align-items: center; justify-content: center; transition: transform .14s cubic-bezier(.2,.9,.3,1); }
.avatar-trigger-img .tp-av { width: 104px; height: 104px; filter: drop-shadow(0 8px 18px rgba(0,0,0,.42)); }
.avatar-trigger:hover .avatar-trigger-img, .avatar-trigger:active .avatar-trigger-img { transform: scale(1.06) rotate(-2deg); }
.avatar-trigger-hint { font-size: var(--fs-base); font-weight: var(--fw-semibold); color: rgba(255,255,255,.82); }

/* Full-screen avatar selection (like a console picker) */
.avatar-screen[hidden] { display: none; }
.avatar-screen { position: fixed; inset: 0; z-index: 1200; display: flex; flex-direction: column; animation: fade-in .18s ease both;
    background-color: #2f6bdf;
    background-image:
        radial-gradient(42% 52% at 16% 14%, rgba(190,230,255,.22), transparent 60%),
        radial-gradient(44% 54% at 84% 90%, rgba(20,70,200,.24), transparent 60%),
        linear-gradient(140deg, #3aa6f0 0%, #2f74ea 46%, #1b46be 100%);
    background-repeat: no-repeat; }
/* The picker is a fixed overlay, so it covers the body's drifting backdrop —
   give it its own party pattern layer. Same tile, same 48s seamless drift, and
   like the body it runs under reduced-motion (slow, non-vestibular). */
.avatar-screen::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image: url(/assets/img/pat/party.svg);
    background-size: 150px 150px; background-repeat: repeat;
    animation: bg-pan 48s linear infinite;
}
.avatar-screen > * { position: relative; z-index: 1; }
/* 3 columns so the title is dead-centre regardless of what's beside it — the
   host picker has no right-hand spacer, and space-between shoved it to the edge. */
.avatar-screen-bar { display: grid; grid-template-columns: 46px 1fr 46px; align-items: center; gap: var(--space-3); padding: var(--space-4); border-bottom: 1px solid rgba(255,255,255,.15); }
/* Same wordmark treatment as the Quiz Categories heading — chunky 3D extrusion,
   solid cyan accent. NOT a gradient: the fading gradient was rejected for
   blending into the blue. Scaled down to suit a bar rather than a page title. */
.avatar-screen-title { grid-column: 2; justify-self: center; text-align: center; margin: 0;
    font-family: var(--font-display); font-weight: var(--fw-black);
    font-size: clamp(1.6rem, 3.2vw, 2.4rem); letter-spacing: -1px; line-height: 1; color: #fff;
    text-shadow:
        0 1px 0 #3a6cce, 0 2px 0 #3061c4, 0 3px 0 #2756b6,
        0 4px 0 #1f4ba6, 0 5px 0 #184093,
        0 6px 10px rgba(0,0,0,.5), 0 12px 20px rgba(0,0,0,.4); }
.avatar-screen-title .accent { color: #74c4ff; }
.avatar-screen-back { width: 46px; height: 46px; flex: 0 0 auto; border: none; border-radius: 50%; background: rgba(255,255,255,.16); color: #fff; font-size: 1.5rem; cursor: pointer; transition: background .12s; }
.avatar-screen-back:hover { background: rgba(255,255,255,.28); }
.avatar-screen .avatar-grid { flex: 1; min-height: 0; max-height: none; overflow-y: auto; width: 100%; max-width: 940px; margin: 0 auto; padding: var(--space-6) var(--space-6) var(--space-8); display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-5); align-content: safe center; justify-content: center; }
.avatar-screen .avatar-cell { background: rgba(255,255,255,.08); border: none; border-radius: var(--radius-lg); padding: 10px 8px 6px; aspect-ratio: 3 / 4; display: flex; align-items: flex-end; justify-content: center; cursor: pointer; transition: transform .12s cubic-bezier(.2,.9,.3,1), background .12s, box-shadow .12s; animation: rise-in .35s cubic-bezier(.2,.9,.3,1) both; }
.avatar-screen .avatar-cell .tp-av { width: 100%; height: auto; }
.avatar-screen .avatar-cell:hover { transform: translateY(-3px) scale(1.03); background: rgba(255,255,255,.16); }
.avatar-screen .avatar-cell.selected { background: rgba(255,255,255,.22); box-shadow: 0 0 0 3px #fff, 0 8px 20px rgba(0,0,0,.32); transform: scale(1.04); }
body.avatar-screen-open { overflow: hidden; }
@media (max-width: 900px) { .avatar-screen .avatar-grid { grid-template-columns: repeat(5, 1fr); max-width: 660px; } }
@media (max-width: 560px) { .avatar-screen .avatar-grid { grid-template-columns: repeat(4, 1fr); } }

/* Avatar showcase page (/avatars.php) — layout only; the motion comes from the
   shared avatar animations above, which stay live under reduced-motion. */
.av-page { max-width: 1100px; margin: 0 auto; padding: var(--space-6) var(--space-5) var(--space-8); position: relative; z-index: 1; }
.av-page-title { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-2xl); margin: var(--space-5) 0 var(--space-2); }
.av-page-sub { color: rgba(255,255,255,.78); margin: 0; max-width: 70ch; }
.av-page-h { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-xl); margin: var(--space-7) 0 var(--space-4); }
.av-head-row { display: flex; flex-wrap: wrap; gap: var(--space-3); background: rgba(255,255,255,.06); border-radius: var(--radius-lg); padding: var(--space-4); }
.av-head-row .cell { width: 68px; text-align: center; }
.av-head-row .cell .tp-av { width: 56px; height: 56px; }
.av-head-row .cell small { display: block; font-size: var(--fs-xs); opacity: .6; margin-top: 2px; }
/* The picker is position:fixed in the game — inline it so this page can show it */
.avatar-screen.inline { position: static; inset: auto; min-height: 520px; border-radius: var(--radius-lg); overflow: hidden; animation: none; }
.av-podium-wrap { min-height: auto; }
.av-podium { display: flex; align-items: flex-end; justify-content: center; }
.av-result-row { display: flex; gap: var(--space-9); justify-content: center; align-items: flex-end; padding: var(--space-5); background: rgba(0,0,0,.18); border-radius: var(--radius-lg); }
.av-result-col { text-align: center; }
.av-result-col h3 { margin: var(--space-2) 0 0; }
@media (max-width: 560px) { .av-result-row { gap: var(--space-5); } }

/* Win / lose result animations — full-body character reacts to the result */
.result-av { line-height: 1; margin-bottom: var(--space-2); display: inline-flex; justify-content: center; }
.result-av .tp-figure { transform-origin: 50% 100%; }
.av-win .tp-figure-body  { animation: av-cheer .9s cubic-bezier(.2,.9,.3,1) infinite; }
.av-lose .tp-figure-body { animation: av-sulk 2.4s ease-in-out infinite; }
@keyframes av-celebrate { 0%,100% { transform: translateY(0) rotate(-5deg); } 25% { transform: translateY(-16px) rotate(5deg); } 50% { transform: translateY(0) rotate(-5deg); } 75% { transform: translateY(-9px) rotate(3deg); } }
.winners-screen .podium-av .tp-figure-body { animation: av-cheer 1.1s cubic-bezier(.2,.9,.3,1) infinite; transform-origin: 50% 100%; }
.winners-screen .spot-1 .podium-av .tp-figure-body { animation-duration: .8s; }
.winners-screen .spot-3 .podium-av .tp-figure-body { animation-duration: 1.3s; }
/* Non-confetti commiseration drift for players who didn't place */
.lose-fx { position: fixed; inset: 0; pointer-events: none; z-index: 8000; overflow: hidden; }
.lose-fx span { position: absolute; top: -8%; font-size: 1.6rem; opacity: 0; animation-name: lose-drop; animation-timing-function: ease-in; animation-fill-mode: forwards; }
@keyframes lose-drop { 0% { transform: translateY(0) rotate(0); opacity: 0; } 12% { opacity: .85; } 100% { transform: translateY(110vh) rotate(40deg); opacity: 0; } }
/* NOTE: avatar animations are intentionally NOT disabled under reduced-motion —
   the host runs with reduce-motion ON and still wants the characters to move. */

/* Merged manage-quiz page: stacked — details on top, questions below. */
.manage-wrap { max-width: 880px; margin-inline: auto; }
.manage-grid { display: block; }
.manage-form { margin-bottom: var(--space-6); }
.manage-h { font-size: var(--fs-lg); margin-bottom: var(--space-4); }
.manage-questions .q-list { margin-top: 0; }
.manage-q-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); flex-wrap: wrap; }
.manage-q-head .manage-h { margin-bottom: 0; }
.q-item.q-static { cursor: default; }
.q-expand { display: block; text-align: center; margin-top: var(--space-4); }

/* Configure-room card headings (balanced two-column layout) */
.config-card-h { font-family: var(--font-display); font-size: var(--fs-base); font-weight: var(--fw-bold); color: #fff; margin-bottom: var(--space-4); }

/* Join screen — larger, more legible text for accessibility */
.join-wrap .auth-title { font-size: clamp(1.7rem, 6vw, 2.3rem); }
.join-wrap .auth-sub { font-size: var(--fs-lg); line-height: 1.55; }
.join-wrap .field label,
.join-wrap .avatar-hint,
.join-wrap .team-chooser-label { font-size: var(--fs-base) !important; color: rgba(255,255,255,.92); }
.join-wrap .input { font-size: var(--fs-lg); padding: 14px 16px; min-height: 54px; }
.join-wrap .room-info { font-size: var(--fs-base); }
.join-wrap .team-random-note { font-size: var(--fs-base); }
.join-wrap .avatar-selected { width: 96px; height: 96px; font-size: 3.4rem; }
.join-wrap .avatar-grid { grid-template-columns: repeat(5, 1fr); }
.join-wrap .avatar-cell { font-size: 1.75rem; }
.join-wrap #joinSubmit { font-size: var(--fs-lg); min-height: 56px; }

/* Snappy, "expensive" micro-interactions (spring, < 150ms) */
.btn, .btn-start, .cat-pick, .seg label, .avatar-cell { transition: transform .12s cubic-bezier(.2,.9,.3,1), box-shadow .12s ease, background .12s ease; }
.btn:hover, .btn-start:hover { transform: translateY(-2px); }
.btn:active, .btn-start:active { transform: translateY(1px); }

/* Reduced motion: calm the AMBIENT motion only — celebrations (confetti) stay,
   per the host's explicit preference. */
@media (prefers-reduced-motion: reduce) {
    .opt-cell, .play-opt, .cat-pick, .q-headline, .game-title { animation: none; }
}

/* ============================================================= *
 * Gloss + sharpness pass — sheen on buttons, gradient-glow titles
 * ============================================================= */
/* Glossy "candy" casual-game buttons (sheen + bubble highlights + 3D body) */
.btn-primary, .btn-start {
    position: relative; overflow: hidden; color: #fff; border: none;
    -webkit-text-stroke: 1.2px rgba(8,18,50,.42); paint-order: stroke; text-shadow: 0 2px 2px rgba(0,0,0,.3);
    transition: transform var(--transition), filter var(--transition), box-shadow var(--transition);
}
.btn-primary { background: linear-gradient(180deg, #5b95f7 0%, #2f5fd8 48%, #1c40b8 100%);
    box-shadow: inset 0 3px 0 rgba(255,255,255,.5), inset 0 -8px 14px rgba(0,0,0,.18), 0 6px 0 #16308f, 0 12px 20px rgba(0,0,0,.3); }
.btn-start { background: linear-gradient(180deg, #5fe089 0%, #22b24e 48%, #128a3a 100%);
    box-shadow: inset 0 3px 0 rgba(255,255,255,.5), inset 0 -10px 16px rgba(0,0,0,.16), 0 7px 0 #0c6c2c, 0 14px 22px rgba(0,0,0,.3); }
.btn-primary::after, .btn-start::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: radial-gradient(135% 62% at 50% -16%, rgba(255,255,255,.45), rgba(255,255,255,0) 56%);
}
.btn-primary:hover, .btn-start:hover { transform: translateY(-2px); filter: brightness(1.05); }
.btn-primary:active { transform: translateY(3px); box-shadow: inset 0 3px 0 rgba(255,255,255,.5), 0 2px 0 #16308f, 0 6px 12px rgba(0,0,0,.3); }
.btn-start:active { transform: translateY(4px); box-shadow: inset 0 3px 0 rgba(255,255,255,.5), 0 3px 0 #0c6c2c, 0 6px 12px rgba(0,0,0,.3); }

/* Answer buttons: outlined white text (sheen is baked into the background) */
.opt-tile, .play-opt { -webkit-text-stroke: 1.3px rgba(8,18,50,.4); paint-order: stroke; }
.opt-tile::before, .play-opt::before { content: none; }
.opt-tile .opt-key, .opt-tile .opt-count { -webkit-text-stroke: 0; }

/* Big titles: crisp white→ice-blue gradient with a soft glow */
.game-stage .game-title, .game-stage .q-headline, .win-title {
    background: linear-gradient(180deg, #ffffff 0%, #cfe0ff 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 2px 0 rgba(0,0,0,.18)) drop-shadow(0 6px 20px rgba(10,40,120,.35));
}
.win-title { filter: drop-shadow(0 3px 0 rgba(0,0,0,.22)) drop-shadow(0 0 30px rgba(250,217,32,.5)); }

/* Stronger glow on the player's own highlights */
.lb-row.you { box-shadow: 0 0 0 3px var(--pal-yellow), 0 0 22px rgba(250,217,32,.5); }
.lobby-chip.you { box-shadow: 0 0 16px rgba(250,217,32,.5); }
.avatar-cell.selected { box-shadow: 0 0 0 3px var(--pal-yellow), 0 0 20px rgba(250,217,32,.45); }

/* Premium spring transition each time a new game screen renders */
#playRoot > *, #hostRoot > * { animation: screen-in .55s cubic-bezier(.18,1.1,.32,1) both; }
@keyframes screen-in {
    0%   { opacity: 0; transform: translateY(26px) scale(.94); filter: blur(4px); }
    55%  { opacity: 1; filter: blur(0); }
    100% { opacity: 1; transform: none; filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) { #playRoot > *, #hostRoot > * { animation: none; } }

/* ============================================================= *
 * Unified glossy candy buttons — applied to EVERY .btn variant
 * (admin, quiz builder, host bar, finish actions, etc.)
 * ============================================================= */
.btn {
    position: relative; overflow: hidden; border: none; border-radius: var(--radius-pill);
    color: #fff; font-weight: var(--fw-bold); text-shadow: 0 1px 2px rgba(0,0,0,.35);
    background: linear-gradient(180deg, #41557f 0%, #28396094 50%, #1b2c4f 100%), linear-gradient(180deg, #3a4d77, #1b2c4f);
    box-shadow: inset 0 2px 0 rgba(255,255,255,.28), inset 0 -7px 12px rgba(0,0,0,.22), 0 4px 0 #0f1c38, 0 8px 14px rgba(0,0,0,.26);
    transition: transform .12s cubic-bezier(.2,.9,.3,1), filter .12s ease, box-shadow .12s ease;
}
.btn::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,.32) 0%, rgba(255,255,255,.08) 44%, rgba(255,255,255,0) 64%); }
.btn > * { position: relative; z-index: 1; }
.btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.btn:active { transform: translateY(2px); box-shadow: inset 0 2px 0 rgba(255,255,255,.28), 0 1px 0 #0f1c38, 0 4px 8px rgba(0,0,0,.25); }
.btn:disabled, .btn[disabled] { filter: grayscale(.35) brightness(.92); opacity: .7; transform: none; }

/* Primary CTA = the "wow" green that pops on the blue background */
.btn-primary { background: linear-gradient(180deg, #6ee79a 0%, #2bbd56 48%, #14953f 100%); color: #fff;
    box-shadow: inset 0 2px 0 rgba(255,255,255,.5), inset 0 -8px 14px rgba(0,0,0,.18), 0 5px 0 #0c6c2c, 0 10px 18px rgba(0,0,0,.28); }
.btn-ghost { background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.07)); color: #fff;
    box-shadow: inset 0 2px 0 rgba(255,255,255,.4), inset 0 0 0 1.5px rgba(255,255,255,.26), 0 3px 0 rgba(0,0,0,.2), 0 6px 12px rgba(0,0,0,.2); }
.btn-ghost:hover { background: linear-gradient(180deg, rgba(255,255,255,.3), rgba(255,255,255,.12)); }
.btn-glass { background: linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,.06)); color: #fff;
    box-shadow: inset 0 2px 0 rgba(255,255,255,.45), inset 0 0 0 1.5px rgba(255,255,255,.3), 0 4px 10px rgba(0,0,0,.25); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.btn-light { background: linear-gradient(180deg, #ffffff, #e7edf7); color: #173b8f; text-shadow: none;
    box-shadow: inset 0 2px 0 #fff, inset 0 -6px 10px rgba(20,40,90,.08), 0 4px 0 #b9c4da, 0 8px 14px rgba(0,0,0,.22); }
.btn-light:hover { background: linear-gradient(180deg, #ffffff, #dde6f4); }
.btn-danger { background: linear-gradient(180deg, #ff8090, #d11332); color: #fff;
    box-shadow: inset 0 2px 0 rgba(255,255,255,.4), inset 0 -7px 12px rgba(0,0,0,.18), 0 4px 0 #9c0f26, 0 8px 14px rgba(0,0,0,.24); }
.btn-solid { background: linear-gradient(180deg, #33446b, #1a2a4b); color: #fff;
    box-shadow: inset 0 2px 0 rgba(255,255,255,.22), 0 4px 0 #0f1830, 0 8px 14px rgba(0,0,0,.3); }
.card-actions .btn.host-btn { background: linear-gradient(180deg, #5fe089, #22b24e); color: #fff; border: none;
    box-shadow: inset 0 2px 0 rgba(255,255,255,.5), inset 0 -7px 12px rgba(0,0,0,.16), 0 4px 0 #0c6c2c, 0 8px 14px rgba(0,0,0,.24); }

/* Small icon buttons (edit / delete on question rows) get the glossy treatment too */
.icon-btn { border: none; color: #fff; background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,.05));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 0 0 1px rgba(255,255,255,.18), 0 2px 6px rgba(0,0,0,.22); }
.icon-btn:hover { background: linear-gradient(180deg, rgba(255,255,255,.3), rgba(255,255,255,.1)); color: #fff; transform: translateY(-1px); }

/* Quiz-card action buttons — uniform height, aligned, suited to any card colour */
.card-actions { display: flex; align-items: center; gap: 8px; margin-top: var(--space-3); }
.card-bin-form { display: inline-flex; margin: 0; }
.card-actions .card-btn { height: 42px; min-height: 42px; padding: 0 16px; font-size: var(--fs-sm); border-radius: var(--radius-md); display: inline-flex; align-items: center; gap: 6px; }
.card-actions .card-btn.host-btn { background: linear-gradient(180deg, #6ee79a 0%, #2bbd56 48%, #14953f 100%);
    box-shadow: inset 0 2px 0 rgba(255,255,255,.5), inset 0 -6px 10px rgba(0,0,0,.15), 0 4px 0 #0c6c2c, 0 7px 12px rgba(0,0,0,.26); }
.card-actions .card-btn.manage-btn { background: linear-gradient(180deg, rgba(16,26,52,.82), rgba(8,15,35,.88));
    box-shadow: inset 0 2px 0 rgba(255,255,255,.22), inset 0 0 0 1px rgba(255,255,255,.16), 0 4px 0 rgba(0,0,0,.34), 0 7px 12px rgba(0,0,0,.26); }
.card-actions .card-btn.bin-btn { width: 42px; padding: 0; justify-content: center; background: linear-gradient(180deg, #ff8090 0%, #e0233f 50%, #b3122c 100%);
    box-shadow: inset 0 2px 0 rgba(255,255,255,.4), inset 0 -6px 10px rgba(0,0,0,.16), 0 4px 0 #8c0f23, 0 7px 12px rgba(0,0,0,.26); }

/* Carousel arrows — uniform frosted glossy circles */
.slider-arrow { width: 40px; height: 40px; border-radius: 50%; border: none; color: #fff; cursor: pointer;
    background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.06));
    box-shadow: inset 0 2px 0 rgba(255,255,255,.4), inset 0 0 0 1.5px rgba(255,255,255,.26), 0 3px 8px rgba(0,0,0,.26);
    font-size: 1.4rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
    transition: transform .12s, filter .12s; }
.slider-arrow:hover { transform: translateY(-2px); filter: brightness(1.12); }
.slider-arrow:active { transform: translateY(1px); }

/* ---- Accounts (master-admin user management) ---------------------- */
/* ============ Accounts page (dark-glass / neon edge) ============ */
.acct-page { max-width: 1040px; }

/* Header box */
.acct-headerbar { position: relative; overflow: hidden; display: flex; align-items: center; gap: 18px;
    margin-top: var(--space-3); padding: 20px 26px;
    background: linear-gradient(168deg, rgba(16,26,58,.8), rgba(9,16,40,.84));
    border: 1px solid rgba(255,255,255,.16); border-radius: 22px;
    box-shadow: 0 22px 54px rgba(5,12,40,.42), inset 0 1px 0 rgba(255,255,255,.08);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.acct-headerbar::before { content:""; position:absolute; left:0; top:0; bottom:0; width:5px;
    background: linear-gradient(180deg,#46e6ff,#0bb6d6); box-shadow: 0 0 26px rgba(70,230,255,.55); }
.acct-headerbar-icon { flex: 0 0 auto; width: 60px; height: 60px; border-radius: 17px; display: flex; align-items: center; justify-content: center;
    color: #c4f3ff; border: 1px solid rgba(255,255,255,.16);
    background: radial-gradient(120% 120% at 30% 20%, rgba(70,230,255,.4), rgba(11,182,214,.16)), linear-gradient(180deg, rgba(10,24,52,.7), rgba(6,16,40,.7));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 10px 22px rgba(5,12,40,.4); }
.acct-headerbar-text h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.8rem, 4vw, 2.3rem); color: #fff; line-height: 1.05; margin: 0; letter-spacing: -.01em; }
.acct-headerbar-text p { color: rgba(228,238,255,.72); font-size: 1rem; margin: 5px 0 0; line-height: 1.4; }

/* Toolbar */
.acct-toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: var(--space-5) 0 var(--space-4); }
.acct-search { position: relative; flex: 1 1 280px; display: flex; align-items: center; }
.acct-search svg { position: absolute; left: 17px; width: 18px; height: 18px; color: rgba(205,220,255,.45); pointer-events: none; }
.acct-search-input { width: 100%; height: 52px; padding: 0 18px 0 46px; color: var(--color-text); font-size: 1rem; font-family: inherit;
    background: linear-gradient(180deg, rgba(8,16,40,.55), rgba(8,16,40,.72));
    border: 1px solid rgba(255,255,255,.16); border-radius: 15px; outline: none;
    box-shadow: inset 0 2px 8px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06); }
.acct-search-input::placeholder { color: rgba(205,220,255,.45); }
.acct-chips { display: flex; gap: 9px; }
.acct-chip { display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0 16px; border-radius: 14px;
    font-size: .88rem; font-weight: var(--fw-semibold); white-space: nowrap; color: rgba(235,243,255,.9);
    background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.03)); border: 1px solid rgba(255,255,255,.1);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
.acct-chip .pip { width: 8px; height: 8px; border-radius: 2px; transform: rotate(45deg); }
.acct-chip.gold .pip { background: #ffd76a; box-shadow: 0 0 8px rgba(240,165,0,.8); }
.acct-chip.cy .pip { background: #46e6ff; box-shadow: 0 0 8px rgba(70,230,255,.8); }
.acct-new-btn { display: inline-flex; align-items: center; gap: 9px; height: 52px; padding: 0 24px; border: none; cursor: pointer; border-radius: 15px;
    font-family: var(--font-display); font-weight: var(--fw-bold); font-size: .98rem; color: #06301a;
    background: linear-gradient(180deg,#5fe089 0%,#22b24e 52%,#14903d 100%);
    box-shadow: 0 12px 26px rgba(20,144,61,.45), inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 0 rgba(7,60,28,.4); transition: transform .12s, filter .12s; }
.acct-new-btn:hover { transform: translateY(-1px); filter: brightness(1.04); }
.acct-new-btn svg { width: 18px; height: 18px; }
.acct-flash { margin-bottom: var(--space-4); }

/* Create panel */
.acct-create-panel { background: linear-gradient(168deg, rgba(16,26,58,.8), rgba(9,16,40,.84)); border: 1px solid rgba(255,255,255,.16);
    border-radius: 22px; padding: var(--space-6); margin-bottom: var(--space-5); box-shadow: 0 22px 54px rgba(5,12,40,.42);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.acct-create-panel.hidden { display: none; }
.acct-create-panel h3 { margin: 0 0 var(--space-4); font-size: 1.3rem; }
.acct-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-bottom: var(--space-4); }

/* Cards */
.acct-list { display: flex; flex-direction: column; gap: 20px; }
.acct-card { position: relative; overflow: hidden; padding: 26px 28px 24px 32px;
    background: linear-gradient(168deg, rgba(16,26,58,.78) 0%, rgba(9,16,40,.82) 100%);
    border: 1px solid rgba(255,255,255,.16); border-radius: 24px;
    box-shadow: 0 26px 60px rgba(5,12,40,.5), inset 0 1px 0 rgba(255,255,255,.08);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.acct-card.hidden { display: none; }
.acct-card::before { content:""; position:absolute; left:0; top:0; bottom:0; width:5px; }
.acct-master::before { background: linear-gradient(180deg,#ffd76a,#f0a500); box-shadow: 0 0 26px rgba(240,165,0,.65); }
.acct-client::before { background: linear-gradient(180deg,#46e6ff,#3d6fd0); box-shadow: 0 0 26px rgba(70,230,255,.55); }
.acct-card::after { content:""; position:absolute; top:-40%; right:-10%; width:340px; height:340px; border-radius:50%; pointer-events:none; opacity:.5; }
.acct-master::after { background: radial-gradient(circle, rgba(240,165,0,.16), transparent 65%); }
.acct-client::after { background: radial-gradient(circle, rgba(70,230,255,.16), transparent 65%); }

.acct-card-top { display: flex; align-items: flex-start; gap: 18px; position: relative; z-index: 1; }
.acct-crest { flex-shrink: 0; width: 62px; height: 62px; border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 27px;
    border: 1px solid rgba(255,255,255,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 10px 22px rgba(5,12,40,.4); }
.acct-crest.gold { background: radial-gradient(120% 120% at 30% 20%, rgba(255,215,106,.4), rgba(240,165,0,.16)), linear-gradient(180deg, rgba(40,32,8,.7), rgba(24,18,4,.7)); }
.acct-crest.cy { background: radial-gradient(120% 120% at 30% 20%, rgba(127,192,255,.4), rgba(61,111,208,.18)), linear-gradient(180deg, rgba(10,24,52,.7), rgba(6,16,40,.7)); }
.acct-id { flex: 1; min-width: 0; }
.acct-id-row { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.acct-name { font-family: var(--font-display); font-weight: 700; font-size: 1.55rem; letter-spacing: -.01em; color: #fff; }
.acct-you { font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 4px 11px; border-radius: 999px;
    color: #0b1226; background: linear-gradient(180deg,#46e6ff,#0bb6d6); box-shadow: 0 4px 12px rgba(11,182,214,.5), inset 0 1px 0 rgba(255,255,255,.5); }
.acct-role { display: inline-flex; align-items: center; gap: 7px; margin-top: 8px; font-size: .8rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    padding: 5px 13px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); }
.acct-role.gold { color: #ffd76a; background: rgba(240,165,0,.1); }
.acct-role.cy { color: #7fc0ff; background: rgba(70,230,255,.1); }
.acct-role .gem { width: 7px; height: 7px; border-radius: 50%; }
.acct-role.gold .gem { background: #ffd76a; box-shadow: 0 0 8px #f0a500; }
.acct-role.cy .gem { background: #46e6ff; box-shadow: 0 0 8px #46e6ff; }

/* Credentials */
.acct-creds { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin: 22px 0 20px; position: relative; z-index: 1; }
.acct-field { background: linear-gradient(180deg, rgba(6,12,34,.5), rgba(6,12,34,.66)); border: 1px solid rgba(255,255,255,.1); border-radius: 15px; padding: 13px 16px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.acct-field-lbl { display: flex; align-items: center; gap: 7px; font-size: .72rem; font-weight: var(--fw-semibold); letter-spacing: .16em; text-transform: uppercase;
    color: rgba(205,220,255,.45); margin-bottom: 8px; }
.acct-field-lbl svg { width: 13px; height: 13px; }
.acct-field-val { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 30px; }
.acct-mono { font-family: ui-monospace,'SF Mono',Menlo,monospace; font-size: 1.05rem; font-weight: 600; color: #eef4ff; letter-spacing: .06em; }
.acct-mono-muted { color: rgba(205,220,255,.5); font-style: italic; letter-spacing: normal; font-size: .95rem; }
.acct-show { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: .76rem; font-weight: 700; letter-spacing: .04em;
    color: #46e6ff; background: rgba(70,230,255,.1); border: 1px solid rgba(70,230,255,.28); padding: 5px 11px; border-radius: 9px; flex-shrink: 0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08); transition: background .12s; }
.acct-show:hover { background: rgba(70,230,255,.2); }
.acct-show svg { width: 13px; height: 13px; }

/* Actions */
.acct-actions { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; position: relative; z-index: 1; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.1); }
.acct-act { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; height: 42px; padding: 0 18px; border-radius: 12px;
    font-family: var(--font-body); font-size: .92rem; font-weight: var(--fw-semibold); border: 1px solid rgba(255,255,255,.16);
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); color: #eaf2ff; text-decoration: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 6px 14px rgba(5,12,40,.28); transition: transform .12s, filter .12s, background .12s; }
.acct-act:hover { transform: translateY(-1px); }
.acct-act svg { width: 16px; height: 16px; }
.acct-act.assign { color: #06222e; background: linear-gradient(180deg,#7fc0ff 0%,#3d6fd0 100%); border: none; font-weight: 700;
    box-shadow: 0 10px 22px rgba(61,111,208,.4), inset 0 1px 0 rgba(255,255,255,.5); }
.acct-act.del { color: #ffd2d2; border-color: rgba(255,120,120,.32); background: linear-gradient(180deg, rgba(255,90,90,.16), rgba(255,90,90,.07)); }
.acct-act.del:hover { background: linear-gradient(180deg, rgba(255,90,90,.26), rgba(255,90,90,.12)); }
.acct-del-form { display: inline-flex; margin: 0; }
.acct-spacer { flex: 1; }
.acct-lock-note { display: inline-flex; align-items: center; gap: 7px; font-size: .8rem; font-weight: var(--fw-semibold); color: rgba(205,220,255,.5); }
.acct-lock-note svg { width: 14px; height: 14px; }

/* Inline edit form */
.acct-edit { margin-top: 20px; padding-top: var(--space-5); border-top: 1px solid rgba(255,255,255,.1); position: relative; z-index: 1; }
.acct-edit.hidden { display: none; }
.acct-edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-bottom: var(--space-4); }
.pw-row { display: flex; gap: 8px; align-items: stretch; }
.pw-row .input { flex: 1; }
.link-btn { background: none; border: none; color: #bcd4ff; cursor: pointer; font-weight: var(--fw-bold); padding: 0 4px; text-decoration: underline; font-size: .9rem; }
.form-actions { display: flex; gap: 10px; margin-top: var(--space-4); flex-wrap: wrap; }

@media (max-width: 620px) {
    .acct-creds { grid-template-columns: 1fr; }
    .acct-form-grid, .acct-edit-grid { grid-template-columns: 1fr; }
    .acct-card { padding: 22px 20px 20px 26px; }
}

/* ---- Assign quizzes to a client ---------------------------------- */
.assign-form { max-width: 820px; }
.assign-tools { display: flex; gap: 8px; margin-bottom: var(--space-4); }
.assign-cat { margin-bottom: var(--space-5); }
.assign-cat-h { font-family: var(--font-display); color: #fff; margin-bottom: var(--space-3); }
.assign-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-3); }
.assign-item { display: flex; align-items: center; gap: 12px; cursor: pointer;
    background: var(--tp-blue); border: 1px solid rgba(255,255,255,.28);
    border-radius: var(--radius-md); padding: 12px 14px; transition: border-color .12s, background .12s, transform .1s; }
.assign-item:hover { background: var(--tp-blue-light); transform: translateY(-1px); }
.assign-item input { position: absolute; opacity: 0; pointer-events: none; }
.assign-check { flex: none; width: 24px; height: 24px; border-radius: 7px; border: 2px solid rgba(255,255,255,.4);
    display: inline-flex; align-items: center; justify-content: center; transition: background .12s, border-color .12s; }
.assign-check::after { content: "✓"; color: #fff; font-weight: 800; font-size: .95rem; opacity: 0; transform: scale(.6); transition: opacity .12s, transform .12s; }
.assign-item input:checked ~ .assign-check { background: linear-gradient(180deg,#6ee79a,#22b24e); border-color: #22b24e; }
.assign-item input:checked ~ .assign-check::after { opacity: 1; transform: scale(1); }
.assign-item input:checked ~ .assign-body .assign-title { color: #fff; }
.assign-item:has(input:checked) { border-color: rgba(110,231,154,.6); background: rgba(110,231,154,.12); }
.assign-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.assign-title { font-weight: var(--fw-bold); color: #fff; font-size: 1.02rem; }
.assign-meta { font-size: .9rem; color: rgba(255,255,255,.88); }

/* ---- Queue a game ------------------------------------------------- */
/* Visible page intro text (instead of small grey .muted) */
.page-lead { color: rgba(255,255,255,.92); font-size: var(--fs-base); line-height: 1.5; }
.page-lead strong { color: #fff; }
.queue-form { max-width: 820px; }
.queue-preview { margin-bottom: var(--space-5); background: var(--tp-blue);
    border: 1px solid rgba(255,255,255,.28); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); }
.queue-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.queue-list li { color: #fff; display: flex; align-items: center; gap: 10px; }
.queue-num { display: inline-flex; width: 24px; height: 24px; flex: none; align-items: center; justify-content: center;
    border-radius: 50%; background: linear-gradient(180deg,#6ee79a,#22b24e); color: #053; font-weight: 800; font-size: .8rem; }
.queue-pill { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: var(--radius-pill);
    background: rgba(0,0,0,.28); font-size: .74rem; vertical-align: middle; }
.btn-start:disabled { opacity: .5; filter: grayscale(.3); cursor: not-allowed; transform: none; }

/* "Everything" master-quiz card */
.cat-pick-all { background: linear-gradient(150deg, rgba(110,231,154,.22), rgba(43,189,86,.12)); border-color: rgba(110,231,154,.5); }
.cat-pick-emoji { font-size: 2rem; line-height: 1; }

/* ---- Lobby team switcher (choose mode) --------------------------- */
.lobby-teams { margin: var(--space-4) auto; max-width: 360px; width: 100%; }
.lt-title { font-weight: var(--fw-bold); color: #fff; margin-bottom: 8px; }
.lt-list { display: grid; gap: 8px; }
.lt-team { display: flex; align-items: center; gap: 10px; width: 100%; cursor: pointer;
    background: rgba(255,255,255,.1); border: 2px solid rgba(255,255,255,.18); border-radius: var(--radius-md);
    padding: 10px 14px; color: #fff; font-weight: var(--fw-semibold);
    transition: border-color .12s, background .12s, transform .1s; }
.lt-team:hover { background: rgba(255,255,255,.16); }
.lt-team:active { transform: scale(.98); }
.lt-team.current { border-color: #6ee79a; background: rgba(110,231,154,.18); }
.lt-dot { width: 16px; height: 16px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 2px rgba(255,255,255,.35); }
.lt-name { flex: 1; text-align: left; }
.lt-count { background: rgba(0,0,0,.28); border-radius: var(--radius-pill); padding: 1px 9px; font-size: .8rem; }
.lt-create { display: flex; gap: 8px; margin-top: 10px; }
.lt-create .input { flex: 1; }
.lt-err { color: #ffd0d0; font-size: .85rem; margin-top: 6px; min-height: 1em; }

/* =====================================================================
   Reveal recolour (last word — overrides the base option gradients).
   Correct answer = the whole button turns GREEN.
   Every wrong answer = the whole button turns RED:
     • the one the player chose stays full + gets a highlight ring
     • the wrong ones nobody-here chose fade back (still red)
   ===================================================================== */
.opt-tile.correct, .play-opt.correct {
    background: linear-gradient(180deg, #63e596 0%, #26ba54 55%, #159a40 100%) !important;
    box-shadow: 0 0 0 5px rgba(110,231,154,.6), 0 8px 0 rgba(0,0,0,.22), var(--shadow-md) !important;
    opacity: 1 !important;
}
.opt-tile.incorrect, .play-opt.incorrect {
    background: linear-gradient(180deg, #ff9a90 0%, #ef4444 55%, #cf2c2c 100%) !important;
}
.opt-tile.incorrect.dimmed, .play-opt.incorrect.faded {
    opacity: .4 !important;
    box-shadow: 0 4px 0 rgba(0,0,0,.2) !important;
}
.opt-tile.incorrect.wrong, .play-opt.incorrect.wrong {
    opacity: 1 !important;
    box-shadow: 0 0 0 5px rgba(255,160,145,.78), 0 8px 0 rgba(0,0,0,.22), var(--shadow-md) !important;
}

/* =====================================================================
   Dashboard: multi-select quizzes + Start-game bar + Master Quiz cards
   ===================================================================== */
.dash-lead { color: #fff; font-size: var(--fs-lg); font-weight: var(--fw-medium); line-height: 1.4;
    margin: 0 0 var(--space-5); max-width: 80ch; background: rgba(8,18,40,.42); border: 1px solid rgba(255,255,255,.16);
    border-radius: var(--radius-lg); padding: 13px 20px; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.dash-lead strong { color: #fff; }
.quiz-card { position: relative; }
.quiz-card.selectable { cursor: pointer; }
.card-check { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 50%;
    background: rgba(0,0,0,.28); border: 2px solid rgba(255,255,255,.65); color: #fff; display: flex;
    align-items: center; justify-content: center; font-weight: 900; font-size: .95rem; line-height: 1;
    opacity: 0; transform: scale(.5); transition: opacity .15s, transform .15s; z-index: 4; pointer-events: none; }
.quiz-card.selectable:hover .card-check { opacity: .55; transform: scale(.85); }
.quiz-card.is-selected .card-check { opacity: 1; transform: scale(1); background: #22b24e; border-color: #fff; }
.quiz-card.is-selected { box-shadow: 0 0 0 4px #6ee79a, var(--shadow-lg) !important; transform: translateY(-3px); }

/* Master Quiz cards (no accent class → give them their own look) */
.master-card { background: linear-gradient(145deg, #5b46e0 0%, #8b3bd6 55%, #c23bc0 100%); color: #fff; min-height: 150px; }
.master-card h3, .master-card .quiz-meta { color: #fff; }
.master-section .cat-count.muted { background: rgba(255,255,255,.16); color: #fff; }

/* Floating Start-game bar */
/* Floating action bar — appears once a quiz is selected (dark-glass / neon) */
.start-bar { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 1400;
    width: min(720px, calc(100vw - 28px));
    background: linear-gradient(168deg, rgba(13,22,52,.94) 0%, rgba(8,14,38,.96) 100%);
    border: 1px solid rgba(255,255,255,.16); border-radius: 22px;
    box-shadow: 0 30px 70px rgba(4,10,36,.62), inset 0 1px 0 rgba(255,255,255,.1), 0 0 0 1px rgba(70,230,255,.1);
    backdrop-filter: blur(20px) saturate(130%); -webkit-backdrop-filter: blur(20px) saturate(130%);
    animation: slide-up-bar .34s cubic-bezier(.2,.9,.3,1) both; }
.start-bar[hidden] { display: none; }
.start-bar-inner { display: flex; align-items: center; gap: 18px; padding: 16px 16px 16px 22px; }
.start-bar-left { display: flex; align-items: center; gap: 16px; min-width: 0; flex: 1 1 auto; }
.sel-badge { display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; flex: 0 0 auto;
    border-radius: 17px; background: linear-gradient(180deg,#5fe089,#22b24e); color: #06301a;
    font-family: var(--font-display); font-weight: 800; font-size: 1.7rem;
    box-shadow: 0 12px 26px rgba(20,144,61,.5), inset 0 1px 0 rgba(255,255,255,.6), inset 0 -3px 0 rgba(7,60,28,.45); }
.start-bar-meta { display: flex; flex-direction: column; min-width: 0; gap: 3px; }
.start-bar-title { color: #fff; font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 1.18rem; line-height: 1.1; letter-spacing: -.005em; }
.start-bar-sub { color: rgba(225,235,255,.62); font-size: .85rem; line-height: 1.3; }
.start-bar-right { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.start-bar-clear { cursor: pointer; font-size: .85rem; font-weight: var(--fw-semibold); color: rgba(225,235,255,.62);
    padding: 11px 16px; border-radius: 11px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04);
    transition: background .12s, color .12s; }
.start-bar-clear:hover { background: rgba(255,255,255,.1); color: #fff; }
.start-bar-btn { position: relative; overflow: hidden; height: 58px; padding: 0 28px; border-radius: 17px; border: none; cursor: pointer;
    background: linear-gradient(180deg,#5fe089 0%,#22b24e 50%,#14903d 100%); color: #06301a;
    font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 1.18rem; display: inline-flex; align-items: center;
    box-shadow: 0 16px 34px rgba(20,144,61,.5), inset 0 1px 0 rgba(255,255,255,.6), inset 0 -3px 0 rgba(7,60,28,.45);
    transition: transform .12s, filter .12s; }
.start-bar-btn::before { content:""; position:absolute; top:0; left:0; right:0; height:46%;
    background: linear-gradient(180deg, rgba(255,255,255,.4), transparent); border-radius: 17px 17px 40px 40px; pointer-events:none; }
.start-bar-btn:hover { transform: translateY(-2px); filter: brightness(1.04); }
.start-bar-btn:active { transform: translateY(1px); }
@keyframes slide-up-bar { from { transform: translateX(-50%) translateY(150%); opacity: 0; } to { transform: translateX(-50%) translateY(0); opacity: 1; } }
body.has-startbar #quizSections { padding-bottom: 130px; }
@media (max-width: 680px) {
    .start-bar { bottom: 14px; }
    .start-bar-sub { display: none; }
    .start-bar-inner { padding: 12px 12px 12px 16px; gap: 12px; }
    .start-bar-btn { font-size: 1.05rem; padding: 0 20px; height: 52px; }
    .start-bar-clear { padding: 9px 13px; }
    .sel-badge { width: 50px; height: 50px; font-size: 1.4rem; border-radius: 14px; }
}

/* Configure: the game being set up */
.config-game-name { text-align: center; color: rgba(255,255,255,.94); font-weight: var(--fw-semibold);
    font-size: var(--fs-lg); margin: calc(var(--space-4) * -1) 0 var(--space-5); }

/* Reusable styled Back button */
.btn-back { display: inline-flex; align-items: center; gap: 6px; padding: 11px 22px; border-radius: var(--radius-pill);
    background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.26); color: #fff; font-weight: var(--fw-bold);
    font-size: var(--fs-base); text-decoration: none; cursor: pointer; transition: background .12s, transform .12s; }
.btn-back:hover { background: rgba(255,255,255,.3); transform: translateX(-2px); }
.config-actions { display: flex; align-items: center; justify-content: center; gap: var(--space-4); margin-top: var(--space-7); flex-wrap: wrap; }

/* Help / tutorial page */
.help-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: var(--space-5); margin-top: var(--space-5); }
.help-card { background: rgba(8,18,42,.5); border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius-xl);
    padding: var(--space-5) var(--space-5) var(--space-6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.help-emoji { font-size: 2.6rem; line-height: 1; margin-bottom: var(--space-3); }
.help-card h3 { font-size: var(--fs-xl); margin-bottom: var(--space-2); color: #fff; }
.help-card p { color: rgba(255,255,255,.92); line-height: 1.55; font-size: var(--fs-base); }
.help-card strong { color: #ffd9a0; }

/* ===== Category logos (the inbuilt "logo generator") ===== */
.cat-logo { display: inline-flex; align-items: center; gap: var(--space-3); }
.cat-logo-text { font-family: var(--font-display); font-weight: var(--fw-black); font-size: clamp(1.5rem, 2.6vw, 2.2rem); letter-spacing: -0.5px; line-height: 1; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
.style-gold   .cat-logo-text { background-image: linear-gradient(180deg,#fff3b0,#ffd23f,#ff9e2e); }
.style-sunset .cat-logo-text { background-image: linear-gradient(180deg,#ffd1a8,#ff7e5f,#fe3a6e); }
.style-ocean  .cat-logo-text { background-image: linear-gradient(180deg,#aef0ff,#43b6ff,#2f6bdf); }
.style-violet .cat-logo-text { background-image: linear-gradient(180deg,#e6ccff,#a674ff,#7c3bd6); }
.style-lime   .cat-logo-text { background-image: linear-gradient(180deg,#dcffb0,#7be04a,#23b24e); }
.style-candy  .cat-logo-text { background-image: linear-gradient(180deg,#ffd9f0,#ff6ec7,#b15bff); }
.style-fire   .cat-logo-text { background-image: linear-gradient(180deg,#ffd29a,#ff7a3d,#e23838); }
.style-ice    .cat-logo-text { background-image: linear-gradient(180deg,#ffffff,#cfeaff,#86bdff); }
/* Added for Maths / Foods / Animals — 10 categories need more than 8 hues. */
.style-teal   .cat-logo-text { background-image: linear-gradient(180deg,#c6fff0,#2fd6b4,#0e8f8f); }
.style-berry  .cat-logo-text { background-image: linear-gradient(180deg,#ffd7d0,#ff5a5f,#b0184a); }
.style-forest .cat-logo-text { background-image: linear-gradient(180deg,#cdf5c4,#4fae4a,#1c6b3a); }

/* Logo generator (category create / edit) */
.logo-gen { background: rgba(8,18,42,.5); border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius-xl); padding: var(--space-5) var(--space-6); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); max-width: 760px; }
.logo-gen h3 { color: #fff; margin-bottom: var(--space-3); }
.logo-gen-preview { display: flex; align-items: center; justify-content: center; min-height: 92px; margin: var(--space-4) 0; padding: var(--space-4); border-radius: var(--radius-lg); background: linear-gradient(140deg,#3aa6f0 0%,#2f74ea 46%,#1b46be 100%); }
.logo-gen-preview .cat-logo-text { font-size: clamp(1.9rem,4.5vw,2.8rem); }
.logo-swatches { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: var(--space-4); }
.logo-swatch { width: 42px; height: 42px; border-radius: 50%; cursor: pointer; border: 3px solid transparent; transition: transform .12s, border-color .12s; padding: 0; }
.logo-swatch:hover { transform: scale(1.1); }
.logo-swatch.sel { border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.3); }
.sw-gold { background: linear-gradient(180deg,#ffd23f,#ff9e2e); }
.sw-sunset { background: linear-gradient(180deg,#ff7e5f,#fe3a6e); }
.sw-ocean { background: linear-gradient(180deg,#43b6ff,#2f6bdf); }
.sw-violet { background: linear-gradient(180deg,#a674ff,#7c3bd6); }
.sw-lime { background: linear-gradient(180deg,#7be04a,#23b24e); }
.sw-candy { background: linear-gradient(180deg,#ff6ec7,#b15bff); }
.sw-fire { background: linear-gradient(180deg,#ff7a3d,#e23838); }
.sw-ice { background: linear-gradient(180deg,#cfeaff,#86bdff); }
.cat-row-logo { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }

/* ===== Public marketing homepage (index.php, body.home-stage) ===== */
body.home-stage { min-height: 100vh; overflow-x: hidden; }
.home-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
    max-width: 1140px; margin: 0 auto; padding: var(--space-5) var(--space-6); }
.home-nav-links { display: flex; align-items: center; gap: var(--space-3); }
.home-nav-link { color: #dbe8ff; font-weight: var(--fw-semibold); text-decoration: none; padding: 0 var(--space-2); }
.home-nav-link:hover { color: #fff; }
.home-nav-btn { padding: 10px 20px; font-size: var(--fs-sm); }
.home-wrap { max-width: 1140px; margin: 0 auto; padding: 0 var(--space-6) var(--space-8); }

.home-hero { text-align: center; padding: clamp(28px, 6vw, 70px) 0 clamp(24px, 4vw, 48px); }
.home-eyebrow { display: inline-block; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
    color: #eaf2ff; font-weight: var(--fw-semibold); font-size: var(--fs-sm); padding: 6px 16px; border-radius: 999px;
    backdrop-filter: blur(8px); }
.home-title { font-family: var(--font-display); font-weight: var(--fw-black); color: #fff; line-height: 1.02;
    font-size: clamp(2.4rem, 6.5vw, 4.6rem); letter-spacing: -1.5px; margin: var(--space-4) 0 var(--space-4);
    text-shadow: 0 2px 1px rgba(4,12,40,.35), 0 6px 22px rgba(4,12,40,.5); }
.home-title-accent { color: #74c4ff; }
.home-lead { max-width: 640px; margin: 0 auto var(--space-6); color: #d7e6ff; font-size: clamp(1.05rem, 2.2vw, 1.3rem);
    line-height: 1.55; }
.home-lead strong { color: #fff; }
.home-cta { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }
.home-cta-note { margin-top: var(--space-4); color: #b9d0f5; font-size: var(--fs-sm); }

.home-features { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4);
    margin: clamp(24px, 4vw, 48px) 0; }
.home-feature { background: rgba(8,18,42,.5); border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius-lg);
    padding: var(--space-5); backdrop-filter: blur(11px); text-align: center; }
.home-feature-icon { font-size: 2.2rem; }
.home-feature h3 { color: #fff; font-family: var(--font-display); margin: var(--space-3) 0 var(--space-2); font-size: 1.15rem; }
.home-feature p { color: #c8dbf7; font-size: var(--fs-sm); line-height: 1.5; margin: 0; }

.home-how { text-align: center; padding: clamp(24px, 4vw, 48px) 0; }
.home-h2 { font-family: var(--font-display); font-weight: var(--fw-black); color: #fff; font-size: clamp(1.7rem, 4vw, 2.8rem);
    letter-spacing: -1px; margin: 0 0 var(--space-6); text-shadow: 0 2px 12px rgba(4,12,40,.5); }
.home-steps { list-style: none; margin: 0 auto; padding: 0; max-width: 820px; display: grid;
    grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.home-steps li { background: rgba(8,18,42,.5); border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius-lg);
    padding: var(--space-5); backdrop-filter: blur(11px); text-align: left; }
.home-step-n { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
    border-radius: 50%; background: var(--pal-green); color: #fff; font-family: var(--font-display); font-weight: 800;
    font-size: 1.2rem; margin-bottom: var(--space-3); box-shadow: inset 0 2px 0 rgba(255,255,255,.4); }
.home-steps strong { color: #fff; display: block; margin-bottom: 4px; }
.home-steps p { color: #c8dbf7; font-size: var(--fs-sm); margin: 0; }
.home-help-line { margin-top: var(--space-6); color: #d7e6ff; }
.home-help-line a, .home-lead a, .home-footer a, .auth-sub a { color: #74c4ff; font-weight: var(--fw-semibold); }

.home-final { text-align: center; padding: clamp(28px, 5vw, 60px) var(--space-4);
    background: rgba(8,18,42,.42); border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius-xl);
    backdrop-filter: blur(11px); margin: var(--space-6) 0; }
.home-footer { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: space-between;
    padding: var(--space-6) 0 var(--space-4); color: #a9c4ee; font-size: var(--fs-sm);
    border-top: 1px solid rgba(255,255,255,.12); }
.home-footer-links a { margin: 0 2px; }

@media (max-width: 860px) {
    .home-features { grid-template-columns: repeat(2, 1fr); }
    .home-steps { grid-template-columns: 1fr; }
    .home-nav-link { display: none; }
}

/* ===== Homepage pricing plans ===== */
.home-plans { text-align: center; padding: clamp(24px, 4vw, 52px) 0; }
.home-plans-sub { color: #d7e6ff; margin: calc(-1 * var(--space-4)) 0 var(--space-6); font-size: 1.05rem; }
.home-plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 320px)); gap: var(--space-4); max-width: 940px; margin: 0 auto; align-items: stretch; justify-content: center; }
.home-plan { position: relative; display: flex; flex-direction: column; text-align: left;
    background: rgba(8,18,42,.5); border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius-xl);
    padding: var(--space-6); backdrop-filter: blur(11px); }
.home-plan.is-featured { border-color: rgba(116,196,255,.7); box-shadow: 0 0 0 1px rgba(116,196,255,.4), 0 18px 44px rgba(4,12,40,.5); transform: translateY(-6px); }
.home-plan-tag { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); white-space: nowrap;
    background: var(--pal-green); color: #fff; font-weight: 800; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase;
    padding: 5px 14px; border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255,255,255,.4); }
.home-plan-name { color: #fff; font-family: var(--font-display); font-size: 1.35rem; margin: 0 0 var(--space-2); }
.home-plan-price { display: flex; align-items: baseline; gap: 4px; margin-bottom: var(--space-3); }
.home-plan-amount { color: #fff; font-family: var(--font-display); font-weight: var(--fw-black); font-size: 2.4rem; line-height: 1; }
.home-plan-period { color: #a9c4ee; font-size: 1rem; }
.home-plan-blurb { color: #c8dbf7; font-size: var(--fs-sm); margin: 0 0 var(--space-4); }
.home-plan-features { list-style: none; margin: 0 0 var(--space-5); padding: 0; flex: 1; }
.home-plan-features li { color: #dbe8ff; font-size: var(--fs-sm); padding: 6px 0 6px 26px; position: relative; }
.home-plan-features li::before { content: "✓"; position: absolute; left: 0; color: #5fe089; font-weight: 800; }
.home-plan-cta { margin-top: auto; }
.home-plans-note { color: #a9c4ee; font-size: var(--fs-sm); margin-top: var(--space-5); }

/* Signup plan picker (radio cards) */
.plan-picker { display: grid; gap: var(--space-3); margin: var(--space-4) 0 var(--space-5); }
.plan-opt { display: block; cursor: pointer; }
.plan-opt input { position: absolute; opacity: 0; pointer-events: none; }
.plan-opt-card { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    border: 1.5px solid rgba(255,255,255,.18); border-radius: var(--radius-lg); padding: 14px 16px;
    background: rgba(8,18,42,.4); transition: border-color .12s, background .12s; }
.plan-opt input:checked + .plan-opt-card { border-color: #74c4ff; background: rgba(116,196,255,.14); }
.plan-opt-name { color: #fff; font-weight: var(--fw-bold); }
.plan-opt-desc { color: #b9d0f5; font-size: var(--fs-sm); }
.plan-opt-price { color: #fff; font-family: var(--font-display); font-weight: 800; white-space: nowrap; }
.plan-opt-price small { color: #a9c4ee; font-weight: 400; }
.signup-billing-note { background: rgba(116,196,255,.12); border: 1px solid rgba(116,196,255,.3);
    border-radius: var(--radius-md); padding: 12px 14px; color: #dbe8ff; font-size: var(--fs-sm); margin: var(--space-4) 0; }

@media (max-width: 860px) { .home-plan-grid { grid-template-columns: 1fr; } .home-plan.is-featured { transform: none; } }