/* UNIVERSAL FIX - AUTO-SCROLLING RANKINGS */

/* 1. Layout Structure */
body .lobby-container .lobby-content {
    flex-direction: row !important;
    gap: 8px !important;
    overflow: hidden !important;
}

body .lobby-container .lobby-left {
    flex: 1.3 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* 2. Return Button Positioning */
body .lobby-container .desktop-return-container,
#btn-return-game-desktop {
    display: none !important;
}

body .lobby-container .mobile-return-container {
    display: block !important;
    margin-top: 4px !important;
}

.return-game-btn {
    width: 100% !important;
    padding: 10px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
}

/* 3. RANKINGS LIST - MARQUEE CONTAINER */
#rankings-list {
    display: block !important;
    height: 140px !important;
    max-height: 140px !important;
    min-height: 140px !important;
    overflow: hidden !important;
    /* No scrollbar, auto-scroll */
    position: relative !important;
    background: rgba(255, 255, 255, 0.5) !important;
    border-radius: 4px !important;
    padding: 0 !important;
}

/* The wrapper that moves */
.ranking-scroll-wrapper {
    width: 100%;
    animation: scrollRankings 15s linear infinite;
}

/* Pause on interaction */
#rankings-list:hover .ranking-scroll-wrapper,
#rankings-list:active .ranking-scroll-wrapper {
    animation-play-state: paused;
}

@keyframes scrollRankings {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-50%);
    }

    /* Move up by 50% (half content) */
}

/* Items */
.ranking-item {
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    margin-bottom: 2px !important;
    padding: 0 8px !important;
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    font-size: 11px !important;
}

/* 4. Fine-tuning */
.lobby-header {
    margin-bottom: 4px !important;
}

.lobby-footer {
    padding: 4px 10px !important;
    font-size: 10px !important;
}

/* 5. FORCED LANDSCAPE ORIENTATION */
@media screen and (max-width: 1024px) and (orientation: portrait) {

    html,
    body {
        width: 100vw !important;
        height: 100vh !important;
        width: 100dvw !important;
        height: 100dvh !important;
        overflow: hidden !important;
        position: fixed !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .app-container {
        width: 100dvh !important;
        height: 100dvw !important;
        position: fixed !important;
        top: 0 !important;
        left: 100dvw !important;
        transform: rotate(90deg) !important;
        -webkit-transform: rotate(90deg) !important;
        transform-origin: top left !important;
        -webkit-transform-origin: top left !important;
        z-index: 9999 !important;
        overflow: hidden !important;
        border-radius: 0 !important;
        background: white !important;
        display: flex !important;
        flex-direction: column !important;
        /* [Fix v9] Force Edge-to-Edge */
        padding: 0 !important;
        margin: 0 !important;
        max-width: none !important;
        box-shadow: none !important;
        border: none !important;
    }

    /* 强制垂直流程：确保三段内容互不干扰 */
    .lobby-header,
    .lobby-footer {
        flex-shrink: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        /* [Fix] 绝对重置边距 */
    }

    .lobby-content {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        /* 强制上下排布 */
        gap: 0 !important;
        padding: 4px !important;
        overflow: hidden !important;
    }

    /* 上半部分：按钮区 */
    .lobby-left {
        width: 100% !important;
        height: 180px !important;
        /* Increased from 140px for better button proportions */
        flex: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .action-panel {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        /* 强制 2x2 */
        grid-template-rows: 1fr 1fr !important;
        gap: 6px !important;
        height: 100% !important;
        margin: 0 !important;
    }

    .btn-action {
        height: auto !important;
        margin: 0 !important;
        padding: 12px 8px !important;
        font-size: 16px !important;
        border-radius: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* 下半部分：排行榜区 */
    .rankings-preview {
        width: 100% !important;
        flex: 1 !important;
        margin: 0 !important;
        padding: 2px 4px !important;
        /* 极致压缩，防止撑破高度 */
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        background: rgba(0, 0, 0, 0.03) !important;
        box-sizing: border-box !important;
    }

    /* 内部滚动，而非外层叠加 */
    #rankings-list {
        flex: 1 !important;
        height: auto !important;
        overflow-y: auto !important;
        margin-top: 5px !important;
    }

    /* 适应 iOS 刘海 */
    .user-header-bar {
        height: 66px !important;
        /* [Fix] 同步增加高度 */
        padding: 0 12px !important;
        padding-left: calc(12px + env(safe-area-inset-top)) !important;
        padding-right: 12px !important;
        display: flex !important;
        /* Changed from grid to flex for better control */
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        margin: 0 !important;
    }

    .user-info-group {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
        align-items: flex-start !important;
        gap: 2px !important;
        flex: 1 !important;
        min-width: 0 !important;
        padding-bottom: 3px !important;
    }

    .header-right-group {
        flex-shrink: 0 !important;
        margin-left: auto !important;
    }

    .lobby-footer {
        height: 32px !important;
        padding-bottom: env(safe-area-inset-right) !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
        font-size: 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    /* 屏蔽所有原本可能干扰宽度的旧规则 */
    .rankings-preview,
    .lobby-left {
        max-width: none !important;
    }

    /* Force all modals and overlays to rotate too */
    .modal,
    .toast-container,
    #ready-overlay,
    #modal-result {
        width: 100dvh !important;
        height: 100dvw !important;
        position: fixed !important;
        top: 0 !important;
        left: 100dvw !important;
        transform: rotate(90deg) !important;
        -webkit-transform: rotate(90deg) !important;
        transform-origin: top left !important;
        -webkit-transform-origin: top left !important;
        z-index: 10000 !important;
    }
}
/* [Fix] Beta terms modal in portrait mode: override rotation to display naturally */
@media screen and (max-width: 1024px) and (orientation: portrait) {
    #modal-beta-terms {
        width: 100dvw !important;
        height: 100dvh !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        -webkit-transform: none !important;
        transform-origin: initial !important;
        z-index: 20000 !important;
    }

    #modal-beta-terms .modal-content {
        height: 88dvh !important;
        max-height: 88dvh !important;
        width: 92dvw !important;
        max-width: 92dvw !important;
    }

    #modal-beta-terms .modal-body {
        max-height: calc(88dvh - 130px) !important;
        overflow-y: scroll !important;
    }
}