/**
 * SKYJO Maus Edition - Lobby Screen
 * v25.0 - 100dvh Flex Layout (No Scroll, All Visible)
 */

/* ========== LOBBY CONTAINER (100dvh Flex) ========== */
.lobby {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    /* CRITICAL: Fallback first, then override with dvh for modern browsers */
    height: 100vh;
    height: 100dvh; /* Dynamic Viewport Height - accounts for mobile browser bars */
    /* Safe area padding - CRITICAL for mobile status bar & home indicator */
    /* Extra 20px buffer to ensure home bar doesn't overlap */
    padding-top: max(env(safe-area-inset-top, 0px), 12px);
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
    padding-left: 16px;
    padding-right: 16px;
    /* Flex column layout */
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    /* NO SCROLLING - everything must fit */
    overflow: hidden;
    /* Ensure content fits within safe area */
    box-sizing: border-box;
    /* CRITICAL: Ensure content is above ::before overlay */
    position: relative;
    z-index: 10;
}

/* ========== TOP SECTION (Profile Bar) - Fixed Size ========== */
.lobby__top-bar {
    width: 100%;
    flex-shrink: 0; /* Never shrink */
    display: flex;
    align-items: stretch;
    gap: 0;
    /* Theme Engine: Use CSS Variables */
    background: var(--container-bg);
    backdrop-filter: var(--container-blur);
    -webkit-backdrop-filter: var(--container-blur);
    border: 1px solid var(--container-border);
    border-radius: 16px;
    box-shadow: var(--container-shadow);
    overflow: hidden;
}

.lobby__player-card {
    flex: 1;
}

/* Player card inside unified bar - no extra background */
.lobby__top-bar .player-card {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 12px 14px;
}

.lobby__top-bar .player-card:hover {
    background: rgba(255, 255, 255, 0.08);
    box-shadow: none;
    transform: none;
}

/* Action buttons container */
.lobby__action-btns {
    display: flex;
    flex-shrink: 0;
}

/* Action buttons (Friends, Settings) */
.lobby__action-btn {
    width: 52px;
    min-width: 52px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    /* Theme Engine: Use CSS Variables for contrast */
    background: var(--close-btn-bg);
    border: none;
    border-left: 1px solid var(--close-btn-border);
    border-radius: 0;
    color: var(--icon-on-container);
    cursor: pointer;
    transition: all 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.lobby__action-btn:hover {
    filter: brightness(1.2);
}

.lobby__action-btn:active {
    filter: brightness(0.9);
}

.lobby__action-btn svg {
    width: 22px;
    height: 22px;
    transition: transform 0.3s ease;
}

/* Settings button rotation on hover */
.lobby__action-btn[title="Einstellungen"]:hover svg {
    transform: rotate(45deg);
}

/* Action badge (for friend requests etc) */
.lobby__action-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: #dc3545;
    border-radius: 8px;
    font-size: 0.65rem;
    font-weight: 700;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Legacy settings button class (for backwards compatibility) */
.lobby__settings-btn {
    width: 52px;
    min-width: 52px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Theme Engine: Use CSS Variables for contrast */
    background: var(--close-btn-bg);
    border: none;
    border-left: 1px solid var(--close-btn-border);
    border-radius: 0;
    color: var(--icon-on-container);
    cursor: pointer;
    transition: all 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.lobby__settings-btn:hover {
    filter: brightness(1.2);
}

.lobby__settings-btn:active {
    filter: brightness(0.9);
}

.lobby__settings-btn:hover svg {
    transform: rotate(45deg);
}

.lobby__settings-btn svg {
    width: 22px;
    height: 22px;
    transition: transform 0.3s ease;
}

/* ========== MIDDLE SECTION (Hero) - Flexible, Takes Remaining Space ========== */
.lobby__hero {
    /* Takes all remaining vertical space */
    flex: 1;
    min-height: 0; /* Important for flex shrinking */
    /* Align image to bottom, extending to just above bot button */
    display: flex;
    align-items: flex-end; /* Align to bottom */
    justify-content: center;
    padding-bottom: 8px; /* Small gap above bot button */
    /* Button styling */
    cursor: pointer;
    transition: all 0.15s ease;
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.4));
    /* PWA FIX: Ensure hero is clickable and above other elements */
    position: relative;
    z-index: 5;
    /* Prevent touch-action issues in standalone mode */
    touch-action: manipulation;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

.lobby__hero:hover {
    transform: scale(1.03);
    filter: drop-shadow(0 12px 32px rgba(0, 0, 0, 0.5));
}

.lobby__hero:active {
    transform: scale(0.97);
    filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.4));
}

.lobby__hero-img {
    /* CRITICAL: Image fills available space but never overflows */
    /* Uses 100% of parent container which is flex: 1 */
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* ========== DIVIDER ========== */
.lobby__divider {
    width: 100%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    /* Theme Engine: Use CSS Variables for contrast */
    color: var(--text-muted-on-container);
    font-size: 12px;
    font-weight: 600;
}

.lobby__divider::before,
.lobby__divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--close-btn-border), transparent);
}

/* ========== JOIN ROW ========== */
.lobby__join-row {
    width: 100%;
    flex-shrink: 0;
    display: flex;
    gap: 10px;
}

.lobby__join-row .input {
    flex: 1;
    padding: 12px 16px;
    font-size: 15px;
}

.lobby__join-row .btn {
    flex-shrink: 0;
    padding: 12px 20px;
    font-size: 14px;
}

/* ========== BOTTOM SECTION (Footer/Dailies) - Fixed Size ========== */
.lobby__footer {
    width: 100%;
    flex-shrink: 0; /* Never shrink */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* ========== RULES ACCORDION ========== */
.rules-accordion,
details.rules-accordion {
    flex: 1;
    min-width: 140px;
    /* Theme Engine: Use CSS Variables */
    background: var(--container-bg);
    backdrop-filter: var(--container-blur);
    -webkit-backdrop-filter: var(--container-blur);
    border: 1px solid var(--container-border);
    border-radius: 12px;
    overflow: hidden;
}

.rules-accordion summary,
.rules-accordion__header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-on-container);
    cursor: pointer;
    list-style: none;
}

.rules-accordion summary::-webkit-details-marker {
    display: none;
}

.rules-accordion__content {
    padding: 0 14px 12px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-muted-on-container);
}

.rules-accordion__content p {
    margin-bottom: 5px;
}

.rules-accordion__content strong {
    color: var(--cheese);
}

/* ========== WHEEL ROW ========== */
.lobby__wheel-row {
    width: 100%;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
}

.btn--wheel {
    width: 100%;
    /* Full width - no max-width constraint */
}

/* ========== v4.0: BOT MODE ROW ========== */
.lobby__bot-row {
    width: 100%;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    /* Same spacing as wheel row - no negative margin */
}

.btn--bot {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.btn--purple {
    background: linear-gradient(135deg, #9c27b0, #673ab7);
    color: white;
    border: none;
}

.btn--purple:hover {
    background: linear-gradient(135deg, #ab47bc, #7e57c2);
    transform: translateY(-2px);
}

.btn--purple:active {
    transform: translateY(0);
}

.btn--bot i {
    font-size: 1.2rem;
}

/* ========== BOTTOM NAVIGATION ========== */
.lobby__bottom-nav {
    width: 100%;
    flex-shrink: 0;
    display: flex;
    gap: 8px;
    justify-content: center;
    padding-top: 4px;
}

.lobby__nav-btn {
    flex: 1;
    max-width: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 8px;
    background: var(--container-bg);
    backdrop-filter: var(--container-blur);
    -webkit-backdrop-filter: var(--container-blur);
    border: 1px solid var(--container-border);
    border-radius: 14px;
    color: var(--text-on-container);
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    -webkit-tap-highlight-color: transparent;
}

.lobby__nav-btn svg {
    width: 24px;
    height: 24px;
    color: var(--icon-on-container);
    transition: all 0.2s;
}

.lobby__nav-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

.lobby__nav-btn:hover svg {
    color: var(--cheese-main, #F5A623);
}

.lobby__nav-btn:active {
    transform: scale(0.95);
}

.lobby__nav-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #dc3545;
    border-radius: 9px;
    font-size: 0.65rem;
    font-weight: 700;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lobby__nav-badge--dot {
    min-width: 10px;
    width: 10px;
    height: 10px;
    padding: 0;
    border-radius: 50%;
}

/* ========== DAILIES ========== */
.lobby__dailies {
    width: 100%;
    flex-shrink: 0; /* Never shrink */
}

/* ========== RESPONSIVE: Very Small Screens ========== */
@media (max-height: 600px) {
    .lobby {
        gap: 5px;
        padding-left: 12px;
        padding-right: 12px;
    }

    .lobby__top-bar .player-card {
        padding: 8px 10px;
    }

    .lobby__divider {
        font-size: 11px;
        gap: 8px;
    }

    .lobby__join-row .input {
        padding: 10px 12px;
        font-size: 14px;
    }

    .lobby__join-row .btn {
        padding: 10px 14px;
        font-size: 13px;
    }

    .rules-accordion summary {
        padding: 6px 10px;
        font-size: 11px;
    }

    .lobby__footer {
        gap: 6px;
    }
}

/* ========== RESPONSIVE: Larger Screens ========== */
@media (min-height: 800px) {
    .lobby {
        gap: 12px;
    }
}

/* ========== VERSION BADGE ========== */
.lobby__version {
    text-align: center;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.4);
    padding: 4px 0;
    font-weight: 500;
    letter-spacing: 0.5px;
}