/*
 * web/css/lobby.css
 *
 * Welcome screen shown before entering the room. Structure:
 *
 *   .lobby-top        brand + help (compact bar)
 *   .lobby-stage      preview surface — video or placeholder + frame
 *   .lobby-controls   name input, mic/cam/flip toggles, join button
 *
 * Mobile is the default. On wider viewports the stage is capped and
 * the whole layout centres as a card; on very wide viewports there's
 * extra side padding so the preview never stretches beyond ~520px.
 */

.lobby {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding:
        calc(var(--safe-top) + 12px)
        calc(var(--safe-right) + 20px)
        calc(var(--safe-bottom) + 18px)
        calc(var(--safe-left) + 20px);
    gap: 14px;
    position: relative;
    overflow: hidden;
}

/* ── Top bar ─────────────────────────────────────────────────── */

.lobby-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 44px;
    flex: none;
}

.lobby-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 17px;
    letter-spacing: -0.02em;
}

.lobby-brand img {
    border-radius: 9px;
    box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.2),
                0 6px 22px -6px rgba(139, 92, 246, 0.55);
}

.lobby-help {
    width: 38px; height: 38px;
    display: grid;
    place-items: center;
    border-radius: var(--r-pill);
    color: var(--text-tertiary);
    background: var(--glass-weak);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transition: color var(--dur-fast) var(--ease-out),
                background var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
}
.lobby-help:hover  { color: var(--text-primary); background: var(--glass-mid); }
.lobby-help:active { transform: scale(0.92); }

/* ── Preview stage ───────────────────────────────────────────── */

.lobby-stage {
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
    border-radius: var(--r-xl);
    overflow: hidden;
    isolation: isolate;

    /* Subtle inner frame + outer halo so the preview feels premium. */
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.08),
        0 28px 80px -30px rgba(0, 0, 0, 0.8),
        0 8px 40px -18px rgba(139, 92, 246, 0.45);

    background:
        radial-gradient(ellipse at 50% 40%,
            rgba(139, 92, 246, 0.28), transparent 60%),
        linear-gradient(165deg, #1A1330, #0A0712 70%);

    /* Fade in from a slight scale on page load. */
    animation: lobby-stage-in 700ms var(--ease-out) both;
}

@keyframes lobby-stage-in {
    from { transform: scale(0.985); opacity: 0; }
    to   { transform: scale(1);     opacity: 1; }
}

.lobby-preview,
.lobby-placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.lobby-preview {
    object-fit: cover;
    object-position: center;
    /* Mirror the front camera like every selfie view does. */
    transform: scaleX(-1);
    opacity: 0;
    transition: opacity 420ms var(--ease-out);
    background: transparent;
}
body[data-lobby-cam="on"] .lobby-preview { opacity: 1; }

.lobby-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    pointer-events: none;
    transition: opacity 420ms var(--ease-out);
}
body[data-lobby-cam="on"] .lobby-placeholder { opacity: 0; }

.lobby-avatar {
    width: min(140px, 28vmin);
    height: min(140px, 28vmin);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 30% 25%,
            rgba(255, 255, 255, 0.18), transparent 55%),
        linear-gradient(140deg, var(--accent-bright), var(--accent-deep));
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.18),
        0 20px 60px -20px rgba(124, 77, 255, 0.6);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: min(56px, 10vmin);
    letter-spacing: -0.03em;
    animation: lobby-avatar-breath 4.5s ease-in-out infinite;
}

.lobby-avatar-initial { line-height: 1; }

@keyframes lobby-avatar-breath {
    0%, 100% { transform: scale(1);    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18), 0 20px 60px -20px rgba(124, 77, 255, 0.55); }
    50%      { transform: scale(1.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25), 0 28px 80px -24px rgba(124, 77, 255, 0.85); }
}

.lobby-placeholder-hint {
    color: var(--text-tertiary);
    font-size: 14px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 500;
}

/* Shimmer frame that sweeps across the preview once after mount. */
.lobby-stage-frame {
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    overflow: hidden;
}
.lobby-stage-frame::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    left: -40%;
    width: 40%;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, 0.12) 50%,
        transparent);
    filter: blur(8px);
    transform: skewX(-18deg);
    animation: lobby-sheen 2600ms 600ms var(--ease-out) 1;
}
@keyframes lobby-sheen {
    from { transform: translateX(0) skewX(-18deg); }
    to   { transform: translateX(360%) skewX(-18deg); }
}

/* ── Controls ────────────────────────────────────────────────── */

.lobby-controls {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.lobby-name {
    position: relative;
    display: block;
    background: var(--glass-weak);
    backdrop-filter: blur(24px) saturate(1.3);
    -webkit-backdrop-filter: blur(24px) saturate(1.3);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-lg);
    padding: 14px 18px;
    transition: border-color var(--dur-fast) var(--ease-out),
                background var(--dur-fast) var(--ease-out);
}
.lobby-name:focus-within {
    border-color: rgba(167, 139, 250, 0.55);
    background: rgba(139, 92, 246, 0.08);
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.14);
}
.lobby-name input {
    display: block;
    width: 100%;
    font-size: 17px;
    font-weight: 500;
    color: var(--text-primary);
}
.lobby-name input::placeholder { color: var(--text-muted); }

.lobby-toggles {
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.lobby-toggle {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 54px;
    padding: 0 14px;
    border-radius: var(--r-lg);
    background: var(--glass-weak);
    backdrop-filter: blur(24px) saturate(1.3);
    -webkit-backdrop-filter: blur(24px) saturate(1.3);
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 14px;
    transition: background var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
}
.lobby-toggle:hover  { background: var(--glass-mid); color: var(--text-primary); }
.lobby-toggle:active { transform: scale(0.96); }

.lobby-toggle .icon { width: 22px; height: 22px; flex: none; }
.lobby-toggle .icon-on  { display: inline-block; }
.lobby-toggle .icon-off { display: none; }
.lobby-toggle[data-active="false"] .icon-on  { display: none; }
.lobby-toggle[data-active="false"] .icon-off { display: inline-block; }
.lobby-toggle[data-active="false"] { color: var(--text-tertiary); }

.lobby-toggle[data-active="true"] {
    background: linear-gradient(165deg, rgba(139, 92, 246, 0.35), rgba(99, 102, 241, 0.25));
    border-color: rgba(167, 139, 250, 0.5);
    color: var(--text-primary);
    box-shadow: 0 10px 30px -14px rgba(139, 92, 246, 0.8);
}

.lobby-toggle-flip[data-visible="false"] { display: none; }

/* Hide the text label on narrow phones so the row always fits. */
@media (max-width: 400px) {
    .lobby-toggle span { display: none; }
    .lobby-toggle { padding: 0; height: 54px; }
}

/* Join button — the only brand-coloured button on the lobby. */
.lobby-join {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 56px;
    border-radius: var(--r-lg);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 17px;
    letter-spacing: -0.01em;
    color: #fff;
    background: linear-gradient(135deg, #9D5BFF 0%, #6B3FEA 100%);
    box-shadow:
        0 18px 50px -18px rgba(139, 92, 246, 0.85),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -1px 0 rgba(0, 0, 0, 0.25);
    transition: transform var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out);
    isolation: isolate;
}
.lobby-join:hover {
    transform: translateY(-1px);
    box-shadow:
        0 22px 60px -18px rgba(139, 92, 246, 0.95),
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        inset 0 -1px 0 rgba(0, 0, 0, 0.28);
}
.lobby-join:active { transform: scale(0.985); }

.lobby-join-label { position: relative; z-index: 2; }

.lobby-join-sheen {
    position: absolute;
    top: -60%; bottom: -60%;
    left: -30%;
    width: 30%;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, 0.45) 50%,
        transparent);
    filter: blur(6px);
    transform: translateX(0) skewX(-20deg);
    opacity: 0.7;
    pointer-events: none;
    z-index: 1;
    animation: lobby-join-sheen 3.6s linear infinite;
}
@keyframes lobby-join-sheen {
    0%   { transform: translateX(0) skewX(-20deg); }
    60%  { transform: translateX(500%) skewX(-20deg); }
    100% { transform: translateX(500%) skewX(-20deg); }
}

.lobby-join[disabled] {
    filter: grayscale(0.5);
    opacity: 0.6;
    cursor: default;
    pointer-events: none;
}

.lobby-disclaimer {
    color: var(--text-tertiary);
    font-size: 11.5px;
    line-height: 1.5;
    text-align: center;
    max-width: 460px;
    margin: 4px auto 0;
    letter-spacing: 0.01em;
}

/* Desktop: centre the entire lobby on wide screens. */
@media (min-width: 720px) and (min-height: 640px) {
    .lobby {
        max-width: 560px;
        margin: 0 auto;
        padding-top: calc(var(--safe-top) + 32px);
        padding-bottom: calc(var(--safe-bottom) + 32px);
        gap: 20px;
    }
    .lobby-stage {
        aspect-ratio: 4 / 3;
        flex: 0 1 auto;
    }
    .lobby-top { height: 48px; }
}