/**
 * Leaderboard Page - Kiosk Adaptation (11.1cm x 6.6cm / ~800x480px)
 * Performance-optimized with horizontal mini-podium design
 */

/* ============================================
   PERFORMANCE OPTIMIZATIONS
   ============================================ */

/* Disable all heavy animations */
*,
*::before,
*::after {
    animation: none !important;
    transition-duration: 0.15s !important;
}

/* Remove backdrop-filter (GPU intensive) */
.header,
.room-selector-container,
.selector-container,
.task-filter-row,
.rankings-container,
.time-btn {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Simplify body background */
body {
    background: #1a1d29 !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Arial, sans-serif !important;
}

body::before,
body::after {
    display: none !important;
}

/* ============================================
   HEADER - Compact
   ============================================ */

.header {
    padding: 4px 0 !important;
    background: rgba(26, 29, 41, 0.95) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: none !important;
}

.header-content {
    padding: 0 8px !important;
}

.header h1 {
    font-size: 0.85rem !important;
    background: none !important;
    -webkit-text-fill-color: #ffd93d !important;
    color: #ffd93d !important;
}

.btn-icon {
    padding: 5px 7px !important;
    border-radius: 6px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: none !important;
}

.control-icon {
    width: 14px !important;
    height: 14px !important;
}

/* ============================================
   MAIN CONTENT - Compact
   ============================================ */

.leaderboard-content {
    padding: 6px 8px !important;
    max-width: 100% !important;
}

/* ============================================
   CONTROLS ROW - Compact & Stacked
   ============================================ */

.controls-row {
    flex-direction: column !important;
    gap: 4px !important;
    margin-bottom: 6px !important;
    padding: 0 !important;
}

/* Room Selector */
.room-selector-section {
    width: 100% !important;
}

.room-selector-container {
    padding: 4px 8px !important;
    gap: 4px !important;
    border-radius: 6px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
}

.room-selector-label {
    font-size: 0.55rem !important;
    gap: 2px !important;
}

.label-icon {
    font-size: 0.7rem !important;
}

.room-filter-dropdown {
    min-width: 0 !important;
    flex: 1 !important;
    padding: 4px 6px !important;
    font-size: 0.6rem !important;
    border-radius: 4px !important;
    background: rgba(30, 41, 59, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: none !important;
}

/* Time Selector */
.time-selector {
    width: 100% !important;
    justify-content: center !important;
}

.selector-container {
    padding: 2px !important;
    gap: 2px !important;
    border-radius: 6px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
    width: 100% !important;
    justify-content: center !important;
}

.time-btn {
    padding: 4px 8px !important;
    font-size: 0.55rem !important;
    border-radius: 4px !important;
    gap: 2px !important;
    min-height: 28px !important;
    flex: 1 !important;
    justify-content: center !important;
}

.time-btn .emoji {
    font-size: 0.7rem !important;
}

.time-btn.active {
    background: rgba(255, 193, 7, 0.2) !important;
    box-shadow: none !important;
}

/* ============================================
   TASK FILTER ROW - Hidden on Kiosk
   ============================================ */

.task-filter-row {
    display: none !important;
}

/* ============================================
   PODIUM SECTION - Horizontal Mini Cards
   ============================================ */

.podium-section {
    margin-bottom: 20px !important;
    /* Increased gap between podium and list */
}

.podium-container {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 3px !important;
    width: 100% !important;
}

/* Reorder: 2nd, 1st, 3rd → 1st, 2nd, 3rd for vertical layout */
.podium-item {
    order: 0 !important;
    flex-direction: row !important;
    align-items: center !important;
    padding: 6px 8px !important;
    border-radius: 6px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    gap: 8px !important;
}

.first-place {
    order: -1 !important;
    background: rgba(255, 211, 61, 0.08) !important;
    border-color: rgba(255, 211, 61, 0.25) !important;
    padding: 8px 10px !important;
}

.second-place {
    order: 0 !important;
}

.third-place {
    order: 1 !important;
}

/* Show the pillar to see the medals, but hide rank numbers */
.podium-pillar {
    display: flex !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
}

.rank-number {
    display: none !important;
}

/* Show medal and rank inline */
.medal {
    font-size: 1rem !important;
    margin: 0 !important;
    filter: none !important;
    flex-shrink: 0 !important;
}

.first-place .medal {
    font-size: 1.2rem !important;
}

/* Make podium-info horizontal */
.podium-info {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex: 1 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
}

.user-avatar {
    width: 24px !important;
    height: 24px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    border-width: 1px !important;
    box-shadow: none !important;
}

.first-place .user-avatar {
    width: 28px !important;
    height: 28px !important;
}

.user-name {
    font-size: 0.65rem !important;
    margin: 0 !important;
    flex: 1 !important;
    min-width: 0 !important;
    max-width: none !important;
    white-space: normal !important;
    /* Allow wrapping for full names */
    word-break: break-word !important;
    line-height: 1.1 !important;
}

.first-place .user-name {
    font-size: 0.75rem !important;
    color: #ffd93d !important;
}

.user-score {
    font-size: 0.7rem !important;
    flex-shrink: 0 !important;
    background: none !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.8) !important;
    color: rgba(255, 255, 255, 0.8) !important;
}

.first-place .user-score {
    font-size: 0.8rem !important;
    -webkit-text-fill-color: #ffd93d !important;
    color: #ffd93d !important;
}

/* ============================================
   RANKINGS CONTAINER - Compact
   ============================================ */

.rankings-container {
    padding: 6px !important;
    border-radius: 6px !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: none !important;
}

.rankings-header {
    margin-bottom: 4px !important;
}

.rankings-header h2 {
    font-size: 0.7rem !important;
    background: none !important;
    -webkit-text-fill-color: #ffd93d !important;
    color: #ffd93d !important;
}

.rankings-count {
    font-size: 0.55rem !important;
}

/* ============================================
   RANKINGS LIST - Compact Rows
   ============================================ */

.rankings-list {
    gap: 3px !important;
    max-height: 100px !important;
    overflow-y: auto !important;
}

.ranking-item {
    padding: 5px 8px !important;
    gap: 6px !important;
    border-radius: 4px !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.ranking-item::before {
    display: none !important;
}

.ranking-item:hover {
    transform: none !important;
    box-shadow: none !important;
}

.rank-position {
    width: 20px !important;
    height: 20px !important;
    font-size: 0.6rem !important;
}

.ranking-item .user-avatar {
    width: 22px !important;
    height: 22px !important;
}

.ranking-item .ranking-info {
    flex: 1 !important;
    min-width: 0 !important;
}

.ranking-item .user-name {
    font-size: 0.6rem !important;
}

.ranking-item .user-score {
    font-size: 0.55rem !important;
}

/* Hidden scrollbars */
::-webkit-scrollbar {
    display: none !important;
}

.rankings-list,
.leaderboard-content,
.main-container,
body {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

/* ============================================
   LOADING SCREEN - Minimal
   ============================================ */

.loading-screen {
    background: #1a1d29 !important;
}

.loading-spinner {
    width: 32px !important;
    height: 32px !important;
}