/* ================================================================
   Activity lobby — modern & playful skin (Oct 2026)
   Every lobby built by LobbyHelper.createLobby gets it. Loaded after
   the themes; scoped to .lobby-overlay so nothing else changes.
   ================================================================ */

/* :is(#lf-any, …) lends ID-level weight so the light-theme lobby rule (which names #mm-lobby,
   #ssv2-lobby, …) cannot paint over this background */
html body .lobby-overlay:is(#lf-any, .lobby-overlay) {
    --la: var(--lobby-accent, #6366f1);
    --la-rgb: var(--lobby-accent-rgb, 99, 102, 241);
    background:
        radial-gradient(1200px 600px at 10% -10%, rgba(var(--la-rgb), .22), transparent 60%),
        radial-gradient(900px 500px at 110% 110%, rgba(236, 72, 153, .14), transparent 60%),
        linear-gradient(160deg, #f8fafc 0%, #eef2ff 55%, #fdf4ff 100%) !important;
    color: #0f172a !important;
    font-family: 'Outfit', 'Inter', 'Cairo', sans-serif !important;
}
/* drifting bubbles */
html body .lobby-overlay::before,
html body .lobby-overlay::after {
    content: ''; position: absolute; border-radius: 50%; pointer-events: none; filter: blur(2px); z-index: 0;
}
html body .lobby-overlay::before {
    width: 340px; height: 340px; left: -90px; bottom: -110px;
    background: radial-gradient(circle at 30% 30%, rgba(var(--la-rgb), .35), rgba(var(--la-rgb), .05) 70%);
    animation: lfDrift 16s ease-in-out infinite alternate;
}
html body .lobby-overlay::after {
    width: 220px; height: 220px; right: 6%; top: 12%;
    background: radial-gradient(circle at 30% 30%, rgba(245, 158, 11, .30), rgba(245, 158, 11, .04) 70%);
    animation: lfDrift 12s ease-in-out infinite alternate-reverse;
}
@keyframes lfDrift { to { transform: translate(60px, -40px) scale(1.12); } }
html body .lobby-overlay .lobby-inner { position: relative; z-index: 1; }

/* header */
/* lobby.css fades these for the old dark lobby (opacity .35–.8) and only resets them under
   [data-theme="light"]; this skin is light in every theme, so reset them everywhere (Oct 17 2026 audit). */
html body .lobby-overlay :is(.lobby-subtitle, .lobby-instruction-label, .lobby-join-hint, .lobby-code-label, .lobby-url-display, .lobby-settings-label-desc, .lobby-count, .lobby-badge) { opacity: 1 !important; }
/* inline accent spans ("Code: …", "or use the code") darken to read on the pale cards */
html body .lobby-overlay :is(.lobby-subtitle span, .lobby-join-hint span) { color: color-mix(in srgb, var(--la) 60%, #0f172a) !important; -webkit-text-fill-color: color-mix(in srgb, var(--la) 60%, #0f172a) !important; }
html body .lobby-overlay .lobby-title { color: #0f172a !important; -webkit-text-fill-color: #0f172a !important; font-weight: 800 !important; letter-spacing: -.01em; }
html body .lobby-overlay .lobby-subtitle { color: #3F4A5C !important; -webkit-text-fill-color: #3F4A5C !important; }
html body .lobby-overlay .lobby-icon-box { border-radius: 18px !important; animation: lfWiggle 3.2s ease-in-out infinite; }
@keyframes lfWiggle { 0%, 82%, 100% { transform: rotate(0); } 86% { transform: rotate(-9deg) scale(1.05); } 92% { transform: rotate(7deg) scale(1.05); } }
html body .lobby-overlay .lobby-header-btn {
    background: rgba(255, 255, 255, .85) !important; color: #334155 !important;
    border: 1px solid rgba(15, 23, 42, .08) !important; border-radius: 14px !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .06) !important;
}
html body .lobby-overlay .lobby-header-btn.danger { color: #dc2626 !important; }
html body .lobby-overlay .lobby-header-btn.music-active { color: var(--la) !important; }

/* cards */
html body .lobby-overlay .lobby-card {
    background: rgba(255, 255, 255, .82) !important;
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, .9) !important;
    border-radius: 26px !important;
    box-shadow: 0 18px 40px -18px rgba(15, 23, 42, .25) !important;
    color: #0f172a !important;
}
html body .lobby-overlay .lobby-instruction-label { color: color-mix(in srgb, var(--la) 60%, #0f172a) !important; -webkit-text-fill-color: color-mix(in srgb, var(--la) 60%, #0f172a) !important; letter-spacing: .16em; }
html body .lobby-overlay .lobby-join-heading { color: #0f172a !important; -webkit-text-fill-color: #0f172a !important; font-weight: 800 !important; }
html body .lobby-overlay .lobby-join-hint { color: #3F4A5C !important; }
html body .lobby-overlay .lobby-qr-box {
    position: relative;
    border-radius: 24px !important; background: #fff !important;
    box-shadow: 0 0 0 6px rgba(var(--la-rgb), .12), 0 16px 34px -12px rgba(var(--la-rgb), .45) !important;
    animation: lfFloat 4s ease-in-out infinite;
}
html body .lobby-overlay .lobby-qr-box::after {
    content: 'Scan me!'; position: absolute; top: -14px; right: -18px;
    padding: 6px 12px; border-radius: 12px; transform: rotate(8deg);
    background: linear-gradient(135deg, #f59e0b, #f97316); color: #fff;
    font: 800 12px 'Outfit', sans-serif; letter-spacing: .02em;
    box-shadow: 0 8px 18px -6px rgba(249, 115, 22, .6);
}
@keyframes lfFloat { 50% { transform: translateY(-6px); } }
html body .lobby-overlay .lobby-code-label { color: #3F4A5C !important; letter-spacing: .18em; }
html body .lobby-overlay .lobby-code-value {
    background: linear-gradient(135deg, var(--la), #ec4899 60%, #f59e0b) !important;
    -webkit-background-clip: text !important; background-clip: text !important;
    -webkit-text-fill-color: transparent !important; color: transparent !important;
    font-weight: 900 !important; letter-spacing: .14em !important;
    filter: drop-shadow(0 6px 12px rgba(var(--la-rgb), .25));
}
html body .lobby-overlay .lobby-copy-btn { background: rgba(var(--la-rgb), .1) !important; color: var(--la) !important; border-radius: 12px !important; border: none !important; }
html body .lobby-overlay .lobby-url-display { color: #4B5563 !important; }

/* right side */
html body .lobby-overlay .lobby-count { color: #1E293B !important; -webkit-text-fill-color: #1E293B !important; font-weight: 700 !important; }
html body .lobby-overlay .lobby-count-num {
    display: inline-grid; place-items: center; min-width: 46px; height: 40px; padding: 0 12px; margin-inline-start: 6px;
    border-radius: 14px; background: linear-gradient(135deg, var(--la), #8b5cf6) !important;
    color: #fff !important; -webkit-text-fill-color: #fff !important; font-weight: 900 !important;
    box-shadow: 0 10px 20px -8px rgba(var(--la-rgb), .7);
}
html body .lobby-overlay .lobby-count-num.lf-bump { animation: lfBump .45s cubic-bezier(.34, 1.8, .64, 1); }
@keyframes lfBump { 40% { transform: scale(1.35) rotate(-6deg); } }
html body .lobby-overlay .lobby-btn { border-radius: 14px !important; font-weight: 800 !important; }
html body .lobby-overlay .lobby-btn-start {
    position: relative; overflow: hidden;
    background: linear-gradient(135deg, #22c55e, #16a34a) !important; color: #fff !important; border: none !important;
    box-shadow: 0 12px 26px -10px rgba(22, 163, 74, .75) !important;
    animation: lfGlow 2.4s ease-in-out infinite;
}
html body .lobby-overlay .lobby-btn-start::after {
    content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
    animation: lfShine 3s ease-in-out infinite;
}
@keyframes lfGlow { 50% { box-shadow: 0 14px 34px -8px rgba(22, 163, 74, .9); } }
@keyframes lfShine { 0%, 60% { left: -60%; } 100% { left: 130%; } }
html body .lobby-overlay .lobby-btn-stop { background: #fff !important; color: #dc2626 !important; border: 1px solid #fecaca !important; }

/* students */
html body .lobby-overlay .lobby-students-grid {
    position: relative; gap: 12px !important; padding: 14px !important;
    background: rgba(255, 255, 255, .55) !important; border: 2px dashed rgba(var(--la-rgb), .22) !important;
    border-radius: 24px !important; align-content: flex-start;
}
html body .lobby-overlay .lobby-students-grid:empty::before {
    content: '🎈'; position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
    font-size: 54px; animation: lfBalloon 2.6s ease-in-out infinite;
}
html body .lobby-overlay .lobby-students-grid:empty::after {
    content: 'Waiting for students to hop in…'; position: absolute; left: 0; right: 0; top: calc(42% + 46px); text-align: center;
    color: #64748b; font: 700 15px 'Outfit', sans-serif;
}
@keyframes lfBalloon { 50% { transform: translate(-50%, calc(-50% - 12px)) rotate(4deg); } }
html body .lobby-overlay .lobby-students-grid > * {
    --tilt: 0deg; --hue: 245;
    animation: lfPop .5s cubic-bezier(.34, 1.7, .64, 1) both !important;
}
html body .lobby-overlay .lobby-students-grid > *:nth-child(6n+1) { --hue: 245; --tilt: -1.5deg; }
html body .lobby-overlay .lobby-students-grid > *:nth-child(6n+2) { --hue: 330; --tilt: 1.2deg; }
html body .lobby-overlay .lobby-students-grid > *:nth-child(6n+3) { --hue: 160; --tilt: -.8deg; }
html body .lobby-overlay .lobby-students-grid > *:nth-child(6n+4) { --hue: 35; --tilt: 1.6deg; }
html body .lobby-overlay .lobby-students-grid > *:nth-child(6n+5) { --hue: 195; --tilt: -1.2deg; }
html body .lobby-overlay .lobby-students-grid > *:nth-child(6n+6) { --hue: 275; --tilt: .9deg; }
@keyframes lfPop { 0% { opacity: 0; transform: scale(.3) rotate(-20deg); } 100% { opacity: 1; transform: rotate(var(--tilt)); } }
html body .lobby-overlay .lobby-student-tag,
html body .lobby-overlay .lobby-students-grid > div[data-student-name] {
    background: #fff !important; border: 2px solid hsl(var(--hue) 85% 88%) !important;
    border-radius: 18px !important; padding: 8px 14px 8px 8px !important;
    box-shadow: 0 8px 18px -10px hsl(var(--hue) 70% 45% / .55) !important;
    color: #0f172a !important; transform: rotate(var(--tilt));
    transition: transform .18s, box-shadow .18s !important;
}
html body .lobby-overlay .lobby-student-tag:hover { transform: rotate(0) translateY(-3px) scale(1.04) !important; box-shadow: 0 14px 24px -10px hsl(var(--hue) 70% 45% / .6) !important; }
html body .lobby-overlay .lobby-avatar {
    width: 38px !important; height: 38px !important; border-radius: 13px !important; font-size: .95rem !important;
    background: linear-gradient(135deg, hsl(var(--hue) 85% 62%), hsl(calc(var(--hue) + 30) 80% 55%)) !important;
    color: #fff !important; -webkit-text-fill-color: #fff !important;
}
html body .lobby-overlay .lobby-name { color: #0f172a !important; -webkit-text-fill-color: #0f172a !important; font-size: .9rem !important; max-width: 140px !important; }
html body .lobby-overlay .lobby-badge { background: hsl(var(--hue) 85% 95%) !important; opacity: 1 !important; }
html body .lobby-overlay .lobby-kick-btn, html body .lobby-overlay .lobby-alert-btn { border-radius: 50% !important; }

/* "Not yet joined" list: retired */
html body .lobby-overlay .lobby-absent-box,
html body #absent-class-filter { display: none !important; }

/* settings strip */
html body .lobby-overlay .lobby-settings-inner {
    background: rgba(255, 255, 255, .85) !important; border: 1px solid rgba(255, 255, 255, .9) !important;
    border-radius: 20px !important; box-shadow: 0 10px 26px -14px rgba(15, 23, 42, .25) !important; color: #0f172a !important;
}
html body .lobby-overlay .lobby-settings-label-text { color: #0f172a !important; }
html body .lobby-overlay .lobby-settings-label-desc { color: #3F4A5C !important; }
html body .lobby-overlay .lobby-settings-controls label { color: #334155 !important; }

@media (prefers-reduced-motion: reduce) {
    html body .lobby-overlay::before, html body .lobby-overlay::after,
    html body .lobby-overlay .lobby-icon-box, html body .lobby-overlay .lobby-qr-box,
    html body .lobby-overlay .lobby-btn-start, html body .lobby-overlay .lobby-btn-start::after,
    html body .lobby-overlay .lobby-students-grid:empty::before { animation: none !important; }
}