/* ============================================================
   Face-Off Time Attack Mode Styles
   ============================================================
   Own visual theme with cyan/teal colors
   Light and dark mode support
   ============================================================ */

/* ─────────────────────────────────────────────────────────────
   Teal Button Style
   ───────────────────────────────────────────────────────────── */

.btnunified-teal {
    background: linear-gradient(180deg, #26a69a 0%, #00897b 100%);
    border-color: #00796b;
    color: #fff;
}

.btnunified-teal:hover {
    background: linear-gradient(180deg, #2bbbad 0%, #009688 100%);
}

.btnunified-teal:active {
    background: linear-gradient(180deg, #00897b 0%, #00695c 100%);
}

/* ─────────────────────────────────────────────────────────────
   Face-Off Mode Select Page
   ───────────────────────────────────────────────────────────── */

#faceoff-mode-select-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    padding-top: calc(-14px + var(--header-h, 52px));
    padding-bottom: 40px;
    background: linear-gradient(180deg, #f1968f 0%, #ffffff 60%);
    color: var(--text-primary);
    box-sizing: border-box;
    min-height: calc(100vh - var(--header-h, 52px));
    overflow-y: auto;
}

body.dark-mode #faceoff-mode-select-page {
    background: linear-gradient(180deg, #5c1a1a 0%, #1e293b 60%);
}

#faceoff-mode-select-page .hub-title {
    font-size: 2rem;
    margin: 0;
}

#faceoff-mode-select-page .hub-subtitle-lg {
    color: var(--text-secondary, #666);
}

/* Mode Cards */
.faceoff-mode-card,
.timeattack-mode-card {
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.faceoff-mode-card:hover,
.timeattack-mode-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.faceoff-mode-card {
    border: 2px solid rgba(239, 83, 80, 0.3);
}

.timeattack-mode-card {
    border: 2px solid rgba(0, 150, 136, 0.3);
}

.faceoff-mode-card:hover {
    border-color: rgba(239, 83, 80, 0.6);
}

.timeattack-mode-card:hover {
    border-color: rgba(0, 150, 136, 0.6);
}

body.dark-mode .faceoff-mode-card {
    border-color: rgba(239, 83, 80, 0.4);
}

body.dark-mode .timeattack-mode-card {
    border-color: rgba(0, 150, 136, 0.4);
}

/* Card Features List */
#faceoff-mode-select-page .card-features {
    list-style: none;
    padding: 0;
    margin: 12px 0;
    text-align: left;
}

#faceoff-mode-select-page .card-features li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 6px;
    font-size: 0.85rem;
    color: var(--text-secondary, #666);
}

#faceoff-mode-select-page .card-features li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #4caf50;
    font-weight: bold;
}

/* ─────────────────────────────────────────────────────────────
   Time Attack Hub Page
   ───────────────────────────────────────────────────────────── */

#timeattack-hub-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    padding-top: calc(-14px + var(--header-h, 52px));
    padding-bottom: 40px;
    /* Cyan/teal gradient - distinct from Face-Off's red/salmon */
    background: linear-gradient(180deg, #68c9d0 0%, #ffffff 60%);
    color: var(--text-primary);
    box-sizing: border-box;
    min-height: calc(100vh - var(--header-h, 52px));
}

/* Mobile scrolling fix */
@media (pointer: coarse), (max-width: 768px) {
    #timeattack-hub-page {
        padding-bottom: 100px;
        min-height: auto;
        height: auto;
    }
}

body.dark-mode #timeattack-hub-page {
    background: linear-gradient(180deg, #1a4f5c 0%, #1e293b 60%);
}

/* ─────────────────────────────────────────────────────────────
   Hub Container
   ───────────────────────────────────────────────────────────── */

.timeattack-hub {
    width: 100%;
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Main layout with sidebar */
.timeattack-hub-layout {
    display: flex;
    gap: 24px;
    width: 100%;
    align-items: stretch;
}

.timeattack-hub-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ─────────────────────────────────────────────────────────────
   Header Bar
   ───────────────────────────────────────────────────────────── */

.timeattack-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: linear-gradient(135deg, rgb(1 12 11 / 11%), rgb(0 121 107 / 23%)) !important;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgb(0 0 0 / 41%);
    border: 2px solid rgb(8 153 118);
}

body.dark-mode .timeattack-header-bar {
    background: linear-gradient(135deg, rgb(17 60 68), rgb(17 60 68)) !important;
    border-color: rgb(0 150 136);
}

.timeattack-header-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.timeattack-title-icon {
    font-size: 1.8rem;
}

.timeattack-title-text {
    font-size: 1.6rem;
    font-weight: 700;
    color: #00897b;
    text-transform: uppercase;
    letter-spacing: 1px;
}

body.dark-mode .timeattack-title-text {
    color: #4dd0c0;
}

.timeattack-coin-balance-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 8px 16px;
}

body.dark-mode .timeattack-coin-balance-display {
    /* No background needed */
}

.timeattack-coin-icon-large {
    width: 48px;
    height: 48px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

.timeattack-coin-balance-display .timeattack-coin-amount {
    font-size: 2.2rem;
    font-weight: 700;
    background: linear-gradient(135deg, #f9a825, #e65100);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

body.dark-mode .timeattack-coin-balance-display .timeattack-coin-amount {
    background: linear-gradient(135deg, #ffd54f, #ffab40);
    -webkit-background-clip: text;
    background-clip: text;
}

/* Mobile responsive header bar - match FaceOff */
@media (max-width: 480px) {
    .timeattack-header-bar {
        padding: 10px 14px;
        gap: 10px;
    }

    .timeattack-title-icon {
        font-size: 1.4rem;
    }

    .timeattack-title-text {
        font-size: 1.2rem;
    }

    .timeattack-coin-balance-display {
        padding: 6px 10px;
        gap: 8px;
    }

    .timeattack-coin-balance-display .timeattack-coin-amount {
        font-size: 1.4rem;
    }

    .timeattack-coin-icon-large {
        width: 32px;
        height: 32px;
    }
}

/* ─────────────────────────────────────────────────────────────
   Cards Grid (2x2)
   ───────────────────────────────────────────────────────────── */

.timeattack-cards-grid-2x2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

@media (max-width: 768px) {
    .timeattack-cards-grid-2x2 {
        grid-template-columns: 1fr;
    }
}

/* ─────────────────────────────────────────────────────────────
   Section Cards
   ───────────────────────────────────────────────────────────── */

.timeattack-section {
    background: linear-gradient(135deg, rgba(0, 150, 136, 0.08), rgba(0, 121, 107, 0.06)) !important;
    border: 2px solid rgba(0, 150, 136, 0.25);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 230px;
}

body.dark-mode .timeattack-section {
    background: linear-gradient(135deg, rgba(0, 150, 136, 0.15), rgba(0, 121, 107, 0.1)) !important;
    border-color: rgba(0, 150, 136, 0.4);
}

.timeattack-section-header {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    position: relative;
}

.timeattack-section-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: #00897b;
    text-align: center;
}

body.dark-mode .timeattack-section-header h3 {
    color: #4dd0c0;
}

.timeattack-help-icon {
    position: absolute;
    right: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(0, 150, 136, 0.15);
    color: #00897b;
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.timeattack-help-icon:hover {
    background: rgba(0, 150, 136, 0.3);
}

body.dark-mode .timeattack-help-icon {
    background: rgba(77, 208, 192, 0.2);
    color: #4dd0c0;
}

/* ─────────────────────────────────────────────────────────────
   Public Section
   ───────────────────────────────────────────────────────────── */

.timeattack-public-section {
    border-color: rgba(0, 150, 136, 0.4);
}

.timeattack-public-subtitle {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-secondary, #666);
    text-align: center;
}

/* ─────────────────────────────────────────────────────────────
   Time Mode Selector (separate pill buttons)
   ───────────────────────────────────────────────────────────── */

.timeattack-time-selector {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 8px;
}

.timeattack-time-btn {
    padding: 6px 16px;
    border: 1px solid rgba(0, 150, 136, 0.4);
    border-radius: 16px;
    background: linear-gradient(180deg, #f0f9f8 0%, #e8f5f3 100%);
    cursor: pointer;
    transition: all 0.15s;
    font-size: 0.8rem;
    font-weight: 600;
    color: #555;
}

.timeattack-time-btn:hover {
    border-color: rgba(0, 150, 136, 0.6);
    background: linear-gradient(180deg, #e0f2f0 0%, #d0ebe8 100%);
}

.timeattack-time-btn.active {
    background: linear-gradient(180deg, #00897b 0%, #00796b 100%);
    border-color: #00897b;
    color: #fff;
}

body.dark-mode .timeattack-time-btn {
    background: rgba(0, 150, 136, 0.15);
    border-color: rgba(77, 208, 192, 0.4);
    color: #b0b0b0;
}

body.dark-mode .timeattack-time-btn:hover {
    background: rgba(0, 150, 136, 0.25);
    border-color: rgba(77, 208, 192, 0.6);
    color: #e0e0e0;
}

body.dark-mode .timeattack-time-btn.active {
    background: linear-gradient(180deg, #00897b 0%, #00796b 100%);
    border-color: #4dd0c0;
    color: #fff;
}

/* ─────────────────────────────────────────────────────────────
   Player Count Selector
   ───────────────────────────────────────────────────────────── */

.timeattack-mode-selector {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.timeattack-mode-btn {
    flex: 1;
    max-width: 120px;
    padding: 10px 12px;
    border: 2px solid rgba(0, 150, 136, 0.3);
    border-radius: 8px;
    background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.timeattack-mode-btn:hover {
    border-color: rgba(0, 150, 136, 0.5);
    transform: translateY(-1px);
}

.timeattack-mode-btn.active {
    border-color: #00897b;
    background: linear-gradient(180deg, #e0f7f5 0%, #b2dfdb 100%);
    box-shadow: 0 2px 6px rgba(0, 150, 136, 0.25);
}

body.dark-mode .timeattack-mode-btn {
    background: linear-gradient(180deg, #2d3748 0%, #1e2a3a 100%);
    border-color: rgba(77, 208, 192, 0.3);
}

body.dark-mode .timeattack-mode-btn.active {
    background: linear-gradient(180deg, #1e4a4a 0%, #163d3d 100%);
    border-color: #4dd0c0;
}

.timeattack-mode-btn .mode-icon {
    font-size: 1.1rem;
}

.timeattack-mode-btn .mode-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #333;
}

body.dark-mode .timeattack-mode-btn .mode-label {
    color: #e0e0e0;
}

/* ─────────────────────────────────────────────────────────────
   Play Button
   ───────────────────────────────────────────────────────────── */

.timeattack-play-btn {
    width: 100%;
    padding: 14px 24px;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 10px;
    margin-top: 4px;
}

/* ─────────────────────────────────────────────────────────────
   Rewards Info
   ───────────────────────────────────────────────────────────── */

.timeattack-rewards-info {
    display: flex;
    justify-content: center;
    gap: 24px;
    padding: 12px 16px;
    margin-top: 12px;
    background: rgba(255, 215, 0, 0.1);
    border-radius: 10px;
    border: 1px dashed rgba(212, 168, 0, 0.4);
}

body.dark-mode .timeattack-rewards-info {
    background: rgba(255, 215, 0, 0.08);
    border-color: rgba(255, 193, 7, 0.3);
}

.timeattack-rewards-info .reward-item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #8d6e00;
    font-size: 0.9rem;
    font-weight: 600;
}

body.dark-mode .timeattack-rewards-info .reward-item {
    color: #ffd54f;
}

.timeattack-rewards-info .reward-icon {
    font-size: 1rem;
}

.timeattack-rewards-info .reward-text {
    white-space: nowrap;
}

/* ─────────────────────────────────────────────────────────────
   Private Section
   ───────────────────────────────────────────────────────────── */

.timeattack-private-section {
    border-color: rgba(156, 39, 176, 0.3);
}

.timeattack-private-section.disabled {
    opacity: 0.6;
    pointer-events: none;
}

.timeattack-private-subtitle {
    margin: 10px;
    font-size: 0.9rem;
    color: var(--text-secondary, #666);
    text-align: center;
}

.timeattack-private-actions {
    display: flex;
    justify-content: center;
    margin-top: 6px;
}

.timeattack-private-btn {
    width: 100%;
    max-width: 220px;
}

.timeattack-join-code-section {
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

body.dark-mode .timeattack-join-code-section {
    border-top-color: rgba(255, 255, 255, 0.1);
}

.timeattack-join-label {
    margin: 0 0 8px 0;
    font-size: 0.8rem;
    color: var(--text-secondary, #666);
    text-align: center;
}

.timeattack-join-input-row {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.timeattack-code-input {
    width: 140px;
    padding: 10px 12px;
    font-size: 0.9rem;
    font-family: monospace;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 1px;
    border: 2px solid rgba(0, 150, 136, 0.3);
    border-radius: 8px;
    background: #fff;
    color: #333;
}

body.dark-mode .timeattack-code-input {
    background: #1e2a3a;
    border-color: rgba(77, 208, 192, 0.3);
    color: #e0e0e0;
}

.timeattack-code-input:focus {
    outline: none;
    border-color: #00897b;
    box-shadow: 0 0 0 3px rgba(0, 150, 136, 0.15);
}

.timeattack-disabled-message {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-secondary, #666);
    text-align: center;
    font-style: italic;
}

/* ─────────────────────────────────────────────────────────────
   Pending Challenges Section
   ───────────────────────────────────────────────────────────── */

.timeattack-pending-section-compact {
    background: linear-gradient(135deg, rgba(0, 150, 136, 0.08), rgba(0, 121, 107, 0.06)) !important;
    border-radius: 12px;
    padding: 14px;
    border: 1px solid rgba(0, 150, 136, 0.2) !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 180px;
}

body.dark-mode .timeattack-pending-section-compact {
    background: linear-gradient(135deg, rgba(0, 150, 136, 0.15), rgba(0, 121, 107, 0.1)) !important;
    border-color: rgba(0, 150, 136, 0.3) !important;
}

.timeattack-pending-section-compact h3 {
    margin: 0 0 6px 0;
    font-size: 1rem;
    color: #00897b;
    text-align: center;
}

body.dark-mode .timeattack-pending-section-compact h3 {
    color: #4dd0c0;
}

.timeattack-pending-list-compact {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    overflow-y: auto;
}

.timeattack-empty-small {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-secondary, #666);
    text-align: center;
    padding: 16px;
}

.timeattack-challenge-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(0, 150, 136, 0.2);
    border-radius: 8px;
}

body.dark-mode .timeattack-challenge-item {
    background: rgba(30, 42, 58, 0.6);
    border-color: rgba(77, 208, 192, 0.2);
}

.timeattack-challenge-item.ready {
    border-color: #4caf50;
    background: rgba(76, 175, 80, 0.1);
}

.timeattack-challenge-item .challenge-info {
    display: flex;
    gap: 12px;
    font-size: 0.8rem;
}

.timeattack-challenge-item .challenge-mode {
    font-weight: 600;
    color: #00897b;
}

body.dark-mode .timeattack-challenge-item .challenge-mode {
    color: #4dd0c0;
}

.timeattack-challenge-item .challenge-status {
    text-transform: capitalize;
    font-style: italic;
}

.timeattack-challenge-item .challenge-status.waiting {
    color: #ff9800;
}

.timeattack-challenge-item .challenge-status.ready {
    color: #4caf50;
    font-weight: 600;
}

/* Open challenge items - Face-Off Classic style */
.timeattack-open-challenge-item {
    display: grid;
    grid-template-columns: 58px 65px 70px 1fr;
    align-items: center;
    gap: 6px;
    background: linear-gradient(180deg, #fafafa 0%, #e9edf3 100%);
    border: 1px solid #d0d5dd;
    border-radius: 6px;
    padding: 6px 10px;
    margin-bottom: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.75rem;
}

.timeattack-open-challenge-item:hover {
    border-color: #00897b;
    box-shadow: 0 2px 6px rgba(0, 137, 123, 0.15);
}

body.dark-mode .timeattack-open-challenge-item {
    background: linear-gradient(180deg, #3a4556 0%, #2d3748 100%);
    border-color: #4a5568;
}

body.dark-mode .timeattack-open-challenge-item:hover {
    border-color: #4dd0c0;
    box-shadow: 0 2px 6px rgba(77, 208, 192, 0.2);
}

.timeattack-open-challenge-item .challenge-pot {
    display: flex;
    align-items: center;
    gap: 2px;
    font-weight: 600;
    color: #d97706;
}

.timeattack-open-challenge-item .pot-amount {
    font-size: 0.85rem;
}

.timeattack-open-challenge-item .challenge-progress {
    color: #64748b;
}

body.dark-mode .timeattack-open-challenge-item .challenge-progress {
    color: #94a3b8;
}

.timeattack-open-challenge-item .challenge-time {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #64748b;
    justify-self: end;
}

body.dark-mode .timeattack-open-challenge-item .challenge-time {
    color: #94a3b8;
}

.timeattack-open-challenge-item .time-icon {
    font-size: 0.7rem;
}

/* ─────────────────────────────────────────────────────────────
   Stats Section
   ───────────────────────────────────────────────────────────── */

.timeattack-stats-section-compact h3 {
    margin: 0 0 4px 0;
    font-size: 1rem;
    color: #00897b;
    text-align: center;
}

body.dark-mode .timeattack-stats-section-compact h3 {
    color: #4dd0c0;
}

.timeattack-stats-grid-compact {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

@media (max-width: 480px) {
    .timeattack-stats-grid-compact {
        grid-template-columns: repeat(2, 1fr);
    }
}

.timeattack-stats-section-compact .stat-box-compact {
    background: linear-gradient(180deg, #fafafa 0%, #e9edf3 100%);
    border-radius: 8px;
    padding: 10px 6px;
    text-align: center;
    border: 1px solid #d0d5dd;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

body.dark-mode .timeattack-stats-section-compact .stat-box-compact {
    background: linear-gradient(180deg, #3a4556 0%, #2d3748 100%);
    border-color: #4a5568;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.timeattack-stats-section-compact .stat-box-compact .stat-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

body.dark-mode .timeattack-stats-section-compact .stat-box-compact .stat-value {
    color: var(--text-primary-dark, #e0e0e0);
}

.timeattack-stats-section-compact .stat-box-compact .stat-label {
    font-size: 0.6rem;
    color: var(--text-secondary, #666);
    text-transform: uppercase;
    margin-top: 2px;
}

/* ─────────────────────────────────────────────────────────────
   Invites Sidebar
   ───────────────────────────────────────────────────────────── */

.timeattack-invites-sidebar {
    width: 220px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, rgba(0, 150, 136, 0.1), rgba(0, 121, 107, 0.1));
    border: 2px solid rgba(0, 150, 136, 0.3);
    border-radius: 12px;
    padding: 10px;
    align-self: stretch;
}

body.dark-mode .timeattack-invites-sidebar {
    background: var(--surface-secondary, #2a2a2a);
    border-color: rgba(77, 208, 192, 0.4);
}

.timeattack-invites-sidebar-header {
    text-align: center;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(0, 150, 136, 0.2);
    flex-shrink: 0;
}

.timeattack-invites-sidebar-header h3 {
    margin: 0;
    font-size: 0.9rem;
    color: #00897b;
}

body.dark-mode .timeattack-invites-sidebar-header h3 {
    color: #4dd0c0;
}

.timeattack-invites-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow-y: auto;
    flex: 1;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.timeattack-invites-list::-webkit-scrollbar {
    display: none;
}

.timeattack-no-invites {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-secondary, #666);
    text-align: center;
    padding: 16px 8px;
}

.timeattack-invite-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 10px;
    background: linear-gradient(180deg, #fafafa 0%, #e9edf3 100%);
    border: 1px solid rgba(0, 150, 136, 0.2);
    border-radius: 8px;
}

body.dark-mode .timeattack-invite-item {
    background: linear-gradient(180deg, #3a4556 0%, #2d3748 100%);
    border-color: rgba(77, 208, 192, 0.3);
}

.timeattack-invite-item .invite-info {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
}

.timeattack-invite-item .invite-from {
    font-weight: 600;
    color: var(--text-primary, #333);
}

body.dark-mode .timeattack-invite-item .invite-from {
    color: var(--text-primary-dark, #fff);
}

.timeattack-invite-item .invite-mode {
    color: #00897b;
    font-weight: 500;
}

body.dark-mode .timeattack-invite-item .invite-mode {
    color: #4dd0c0;
}

.timeattack-invite-item .invite-actions {
    display: flex;
    gap: 6px;
}

.timeattack-invite-item .invite-actions button {
    flex: 1;
    padding: 5px 8px;
    font-size: 0.7rem;
}

/* ─────────────────────────────────────────────────────────────
   Invite Cards (matching Face-Off style)
   ───────────────────────────────────────────────────────────── */

.timeattack-invite-card {
    background: linear-gradient(180deg, #fafafa 0%, #e9edf3 100%);
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

body.dark-mode .timeattack-invite-card {
    background: linear-gradient(180deg, #3a4556 0%, #2d3748 100%);
    border-color: #4a5568;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.timeattack-invite-card .invite-card-from {
    font-size: 0.8rem;
    color: var(--text-primary, #333);
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 6px;
}

body.dark-mode .timeattack-invite-card .invite-card-from {
    color: var(--text-primary-dark, #fff);
}

.timeattack-invite-card .invite-mode-icon {
    font-size: 0.7rem;
}

.timeattack-invite-card .invite-card-time {
    font-size: 0.65rem;
    color: var(--text-secondary, #666);
}

.timeattack-invite-card .invite-card-details {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: var(--text-secondary, #666);
    align-items: center;
}

.timeattack-invite-card .invite-card-fee {
    display: flex;
    align-items: center;
    gap: 3px;
}

.timeattack-invite-card .invite-card-fee .fee-amount {
    font-weight: 600;
}

.timeattack-invite-card .invite-card-buttons {
    display: flex;
    gap: 6px;
    margin-top: 4px;
}

.timeattack-invite-card .invite-card-btn-accept {
    flex: 1;
    padding: 5px 6px !important;
    font-size: 0.7rem !important;
}

.timeattack-invite-card .invite-card-btn-decline {
    flex: 0 0 auto;
    padding: 5px 8px !important;
    font-size: 0.7rem !important;
    background: linear-gradient(180deg, #f5f5f5 0%, #e0e0e0 100%) !important;
    border: 1px solid #ccc !important;
    color: #666 !important;
}

.timeattack-invite-card .invite-card-btn-decline:hover {
    background: linear-gradient(180deg, #eee 0%, #d5d5d5 100%) !important;
    color: #444 !important;
}

body.dark-mode .timeattack-invite-card .invite-card-btn-decline {
    background: linear-gradient(180deg, #444 0%, #333 100%) !important;
    border-color: #555 !important;
    color: #aaa !important;
}

body.dark-mode .timeattack-invite-card .invite-card-btn-decline:hover {
    background: linear-gradient(180deg, #555 0%, #444 100%) !important;
    color: #ccc !important;
}

/* Invites pagination */
.timeattack-invites-sidebar .invites-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid rgba(0, 150, 136, 0.2);
}

.timeattack-invites-sidebar .invites-page-btn {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid rgba(0, 150, 136, 0.3);
    border-radius: 4px;
    background: transparent;
    color: #00897b;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}

body.dark-mode .timeattack-invites-sidebar .invites-page-btn {
    border-color: rgba(77, 208, 192, 0.3);
    color: #4dd0c0;
}

.timeattack-invites-sidebar .invites-page-btn:hover:not(:disabled) {
    background: rgba(0, 150, 136, 0.1);
}

.timeattack-invites-sidebar .invites-page-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.timeattack-invites-sidebar .invites-page-info {
    font-size: 0.75rem;
    color: var(--text-secondary, #666);
}

/* Invites count badge */
.timeattack-invites-sidebar .invites-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 6px;
    background: #00897b;
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 9px;
}

body.dark-mode .timeattack-invites-sidebar .invites-count-badge {
    background: #4dd0c0;
    color: #1e293b;
}

/* ─────────────────────────────────────────────────────────────
   Action Buttons
   ───────────────────────────────────────────────────────────── */

.timeattack-action-buttons {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 8px;
}

.timeattack-action-buttons button {
    min-width: 140px;
}

/* ─────────────────────────────────────────────────────────────
   Loading / Error States
   ───────────────────────────────────────────────────────────── */

.timeattack-loading,
.timeattack-disabled,
.timeattack-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 40px;
    text-align: center;
}

.timeattack-loading .spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(0, 150, 136, 0.2);
    border-top-color: #00897b;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ─────────────────────────────────────────────────────────────
   Confirmation Modal
   ───────────────────────────────────────────────────────────── */

.timeattack-confirm-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.timeattack-confirm-mode {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.timeattack-confirm-mode .mode-badge,
.timeattack-confirm-mode .time-badge {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
}

.timeattack-confirm-mode .mode-badge {
    background: linear-gradient(180deg, #e0f7f5 0%, #b2dfdb 100%);
    color: #00695c;
}

.timeattack-confirm-mode .time-badge {
    background: linear-gradient(180deg, #fff3e0 0%, #ffe0b2 100%);
    color: #e65100;
}

body.dark-mode .timeattack-confirm-mode .mode-badge {
    background: linear-gradient(180deg, #00695c 0%, #004d40 100%);
    color: #b2dfdb;
}

body.dark-mode .timeattack-confirm-mode .time-badge {
    background: linear-gradient(180deg, #bf360c 0%, #8d1c00 100%);
    color: #ffccbc;
}

.timeattack-confirm-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    background: rgba(0, 150, 136, 0.05);
    border-radius: 8px;
}

body.dark-mode .timeattack-confirm-info {
    background: rgba(77, 208, 192, 0.1);
}

.timeattack-confirm-info .confirm-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
}

.timeattack-confirm-info .confirm-row.highlight {
    padding: 8px 0;
    border-top: 1px dashed rgba(0, 150, 136, 0.3);
    border-bottom: 1px dashed rgba(0, 150, 136, 0.3);
    margin: 4px 0;
}

.timeattack-confirm-info .confirm-label {
    color: var(--text-secondary, #666);
}

.timeattack-confirm-info .confirm-value {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}

.timeattack-confirm-info .confirm-value.cost {
    color: #d32f2f;
}

.timeattack-confirm-info .confirm-value.reward {
    color: #388e3c;
}

.timeattack-confirm-balance {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background: rgba(76, 175, 80, 0.1);
    border-radius: 8px;
    font-size: 0.9rem;
}

.timeattack-confirm-balance.insufficient {
    background: rgba(211, 47, 47, 0.1);
}

.timeattack-confirm-balance .balance-value {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}

.timeattack-confirm-balance .balance-warning {
    color: #d32f2f;
    font-size: 0.8rem;
    font-weight: 600;
}

.timeattack-confirm-note {
    font-size: 0.85rem;
    color: var(--text-secondary, #666);
    text-align: center;
    padding: 8px;
    background: rgba(0, 150, 136, 0.05);
    border-radius: 6px;
    line-height: 1.4;
}

body.dark-mode .timeattack-confirm-note {
    background: rgba(77, 208, 192, 0.1);
}

/* ─────────────────────────────────────────────────────────────
   Results Modal
   ───────────────────────────────────────────────────────────── */

.timeattack-results-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.timeattack-results-content .results-title {
    text-align: center;
    font-size: 1.3rem;
    margin: 0;
    color: #00897b;
}

body.dark-mode .timeattack-results-content .results-title {
    color: #4dd0c0;
}

.timeattack-results-table {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.timeattack-result-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: rgba(0, 150, 136, 0.05);
    border-radius: 8px;
    font-size: 0.9rem;
}

body.dark-mode .timeattack-result-row {
    background: rgba(77, 208, 192, 0.1);
}

.timeattack-result-row.is-self {
    background: rgba(0, 150, 136, 0.15);
    border: 2px solid rgba(0, 150, 136, 0.4);
}

body.dark-mode .timeattack-result-row.is-self {
    background: rgba(77, 208, 192, 0.2);
    border-color: rgba(77, 208, 192, 0.5);
}

.timeattack-result-row.gold {
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.2), rgba(255, 215, 0, 0.05));
}

.timeattack-result-row.silver {
    background: linear-gradient(90deg, rgba(192, 192, 192, 0.2), rgba(192, 192, 192, 0.05));
}

.timeattack-result-row.bronze {
    background: linear-gradient(90deg, rgba(205, 127, 50, 0.2), rgba(205, 127, 50, 0.05));
}

.timeattack-result-row .result-rank {
    font-weight: 700;
    min-width: 30px;
    color: #00897b;
}

body.dark-mode .timeattack-result-row .result-rank {
    color: #4dd0c0;
}

.timeattack-result-row .result-name {
    flex: 1;
}

.timeattack-result-row .result-score {
    font-weight: 600;
}

.timeattack-result-row .result-payout {
    color: #388e3c;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}

.timeattack-result-stats {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 12px;
    background: rgba(0, 150, 136, 0.05);
    border-radius: 8px;
}

body.dark-mode .timeattack-result-stats {
    background: rgba(77, 208, 192, 0.1);
}

.timeattack-result-stats .stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    border: 2px solid rgb(153, 211, 193);
}

.timeattack-result-stats .stat-label {
    font-size: 0.75rem;
    color: var(--text-secondary, #666);
}

.timeattack-result-stats .stat-value {
    font-size: 1rem;
    font-weight: 600;
    color: #00897b;
}

body.dark-mode .timeattack-result-stats .stat-value {
    color: #4dd0c0;
}

/* Reward display (like FaceOff) */
.timeattack-modal-reward {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 1.1rem;
}

.timeattack-modal-reward.winner {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.2), rgba(76, 175, 80, 0.1));
    color: #2e7d32;
    border: 2px solid rgba(76, 175, 80, 0.4);
}

body.dark-mode .timeattack-modal-reward.winner {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.3), rgba(76, 175, 80, 0.15));
    color: #81c784;
    border-color: rgba(76, 175, 80, 0.5);
}

.timeattack-modal-reward.loser {
    background: linear-gradient(135deg, rgba(244, 67, 54, 0.15), rgba(244, 67, 54, 0.08));
    color: #c62828;
    border: 2px solid rgba(244, 67, 54, 0.3);
}

body.dark-mode .timeattack-modal-reward.loser {
    background: linear-gradient(135deg, rgba(244, 67, 54, 0.25), rgba(244, 67, 54, 0.12));
    color: #ef9a9a;
    border-color: rgba(244, 67, 54, 0.4);
}

.timeattack-modal-reward .reward-icon {
    font-size: 1.2rem;
}

.timeattack-modal-reward .coin-icon-reward {
    width: 24px;
    height: 24px;
}

.timeattack-modal-reward .reward-label {
    font-weight: 600;
}

/* ─────────────────────────────────────────────────────────────
   History Modal
   ───────────────────────────────────────────────────────────── */

.timeattack-history-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 300px;
    overflow-y: auto;
}

.timeattack-history-list .history-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: rgba(0, 150, 136, 0.05);
    border-radius: 8px;
    font-size: 0.85rem;
}

body.dark-mode .timeattack-history-list .history-item {
    background: rgba(77, 208, 192, 0.1);
}

.timeattack-history-list .history-item.win {
    background: linear-gradient(90deg, rgba(76, 175, 80, 0.15), rgba(76, 175, 80, 0.05));
}

.timeattack-history-list .history-item.top3 {
    background: linear-gradient(90deg, rgba(255, 193, 7, 0.15), rgba(255, 193, 7, 0.05));
}

.timeattack-history-list .history-date {
    color: var(--text-secondary, #666);
    min-width: 80px;
}

.timeattack-history-list .history-score {
    flex: 1;
    font-weight: 600;
}

.timeattack-history-list .history-result {
    font-weight: 600;
    color: #00897b;
}

body.dark-mode .timeattack-history-list .history-result {
    color: #4dd0c0;
}

.timeattack-history-list .history-payout {
    color: #388e3c;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}

.timeattack-history-list .history-item.refunded {
    background: linear-gradient(90deg, rgba(158, 158, 158, 0.15), rgba(158, 158, 158, 0.05));
}

.timeattack-history-list .history-item.refunded .history-result {
    color: #9e9e9e;
}

.timeattack-history-list .history-payout.refund {
    color: #757575;
}

body.dark-mode .timeattack-history-list .history-item.refunded {
    background: linear-gradient(90deg, rgba(158, 158, 158, 0.2), rgba(158, 158, 158, 0.05));
}

/* ─────────────────────────────────────────────────────────────
   In-Game Timer Display
   ───────────────────────────────────────────────────────────── */

#timeattack-timer-display {
    font-size: 2rem;
    font-weight: 700;
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    color: #00897b;
    text-align: center;
    padding: 8px 16px;
    background: rgba(0, 150, 136, 0.1);
    border-radius: 8px;
    min-width: 100px;
}

body.dark-mode #timeattack-timer-display {
    color: #4dd0c0;
    background: rgba(77, 208, 192, 0.15);
}

#timeattack-timer-display.timer-warning {
    color: #ff9800;
    background: rgba(255, 152, 0, 0.15);
    animation: pulse 1s ease-in-out infinite;
}

#timeattack-timer-display.timer-critical {
    color: #f44336;
    background: rgba(244, 67, 54, 0.15);
    animation: pulse 0.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

/* ─────────────────────────────────────────────────────────────
   Private Modal
   ───────────────────────────────────────────────────────────── */

.timeattack-private-modal {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.timeattack-private-modal h4 {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-secondary, #666);
}

.timeattack-private-modal .modal-selector {
    justify-content: flex-start;
}

.timeattack-private-modal .private-entry-display {
    text-align: center;
    padding: 10px;
    background: rgba(0, 150, 136, 0.1);
    border-radius: 8px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

body.dark-mode .timeattack-private-modal .private-entry-display {
    background: rgba(77, 208, 192, 0.15);
}

.timeattack-private-step {
    margin-bottom: 8px;
}

.timeattack-friends-list {
    max-height: 150px;
    overflow-y: auto;
    border: 1px solid rgba(0, 150, 136, 0.2);
    border-radius: 8px;
    padding: 8px;
    background: rgba(0, 150, 136, 0.05);
}

.timeattack-friend-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.2s;
}

.timeattack-friend-item:hover {
    background: rgba(0, 150, 136, 0.1);
}

.timeattack-friend-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #00897b;
}

.friend-avatar-mini {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00897b, #4dd0c0);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
}

.timeattack-no-friends {
    text-align: center;
    color: var(--text-secondary, #666);
    padding: 20px;
    font-style: italic;
}

.timeattack-friends-hint {
    font-size: 0.8rem;
    color: var(--text-secondary, #666);
    margin-top: 6px;
}

.timeattack-sharing-options {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.timeattack-sharing-option {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    border: 2px solid rgba(0, 150, 136, 0.3);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.timeattack-sharing-option:hover {
    background: rgba(0, 150, 136, 0.1);
}

.timeattack-sharing-option.selected {
    border-color: #00897b;
    background: rgba(0, 150, 136, 0.15);
}

.timeattack-sharing-option input[type="radio"] {
    margin-top: 2px;
    accent-color: #00897b;
}

.timeattack-sharing-option .sharing-option-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.timeattack-sharing-option .sharing-option-icon {
    font-size: 1rem;
    display: inline-block;
    margin-right: 4px;
}

.timeattack-sharing-option .sharing-option-label {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.timeattack-sharing-option .sharing-option-desc {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.3;
}

.timeattack-fee-options {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.timeattack-fee-option {
    padding: 8px 16px;
    border: 1px solid rgba(0, 150, 136, 0.3);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.timeattack-fee-option:hover {
    background: rgba(0, 150, 136, 0.1);
}

.timeattack-fee-option.selected {
    border-color: #00897b;
    background: rgba(0, 150, 136, 0.15);
}

.timeattack-fee-option input[type="radio"] {
    display: none;
}

.timeattack-custom-fee {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.timeattack-custom-fee label {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border: 2px solid rgba(0, 150, 136, 0.3);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.9rem;
}

.timeattack-custom-fee label:hover,
.timeattack-custom-fee label.selected {
    border-color: #00897b;
    background: rgba(0, 150, 136, 0.1);
}

.timeattack-custom-fee input[type="radio"] {
    display: none;
}

.timeattack-custom-fee input[type="number"] {
    width: 100px;
    padding: 8px;
    border: 2px solid rgba(0, 150, 136, 0.3);
    border-radius: 6px;
    background: var(--input-bg, #fff);
    color: var(--text-primary);
}

.timeattack-custom-fee input[type="number"]:focus {
    border-color: #00897b;
    outline: none;
}

.timeattack-custom-fee input[type="number"].input-error {
    border-color: #d32f2f;
}

body.dark-mode .timeattack-custom-fee input[type="number"] {
    background: rgba(30, 41, 59, 0.8);
}

body.dark-mode .timeattack-custom-fee label {
    border-color: rgba(77, 208, 192, 0.3);
}

body.dark-mode .timeattack-custom-fee label:hover,
body.dark-mode .timeattack-custom-fee label.selected {
    border-color: #4dd0c0;
    background: rgba(77, 208, 192, 0.2);
}

.timeattack-fee-error {
    color: #d32f2f;
    font-size: 0.85rem;
    margin-top: 8px;
    padding: 6px 10px;
    background: rgba(211, 47, 47, 0.1);
    border-radius: 4px;
}

.timeattack-private-summary {
    padding: 12px;
    background: rgba(0, 150, 136, 0.1);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.timeattack-private-summary .summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
}

body.dark-mode .timeattack-friends-list {
    background: rgba(77, 208, 192, 0.1);
    border-color: rgba(77, 208, 192, 0.3);
}

body.dark-mode .timeattack-sharing-option {
    border-color: rgba(77, 208, 192, 0.3);
}

body.dark-mode .timeattack-sharing-option.selected {
    background: rgba(77, 208, 192, 0.2);
    border-color: #4dd0c0;
}

body.dark-mode .timeattack-fee-option {
    border-color: rgba(77, 208, 192, 0.3);
}

body.dark-mode .timeattack-fee-option.selected {
    background: rgba(77, 208, 192, 0.2);
    border-color: #4dd0c0;
}

body.dark-mode .timeattack-private-summary {
    background: rgba(77, 208, 192, 0.15);
}

/* ─────────────────────────────────────────────────────────────
   Leaderboard Styles
   ───────────────────────────────────────────────────────────── */

.timeattack-lb-entry {
    display: grid;
    grid-template-columns: 28px 1fr auto auto auto;
    gap: 8px;
    align-items: center;
    padding: 8px;
    border-radius: 6px;
    transition: background 0.2s;
}

.timeattack-lb-entry:hover {
    background: rgba(0, 150, 136, 0.1);
}

.timeattack-lb-entry.is-self {
    background: rgba(0, 150, 136, 0.15);
}

.timeattack-lb-avatar-wrap {
    width: 28px;
    height: 28px;
}

.timeattack-lb-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.timeattack-lb-name {
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.timeattack-lb-name.player-name-clickable {
    cursor: pointer;
    color: #00897b;
}

body.dark-mode .timeattack-lb-name.player-name-clickable {
    color: #4dd0c0;
}

.timeattack-lb-name.player-name-clickable:hover {
    text-decoration: underline;
}

.timeattack-lb-rating {
    font-weight: 600;
    font-size: 0.85rem;
    color: #00897b;
    text-align: right;
    min-width: 40px;
}

body.dark-mode .timeattack-lb-rating {
    color: #4dd0c0;
}

.timeattack-lb-tier-icon {
    width: 20px;
    text-align: center;
}

.timeattack-lb-tier-icon svg {
    width: 16px;
    height: 16px;
}

.timeattack-lb-tier-text {
    font-size: 0.75rem;
    text-transform: capitalize;
    min-width: 60px;
}

/* ─────────────────────────────────────────────────────────────
   Mobile Responsive
   ───────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
    .timeattack-hub-layout {
        flex-direction: column;
    }

    /* Show invites sidebar on top (before main content) */
    .timeattack-invites-sidebar {
        order: -1;
        width: 100%;
        max-width: 100%;
        max-height: 180px;
        box-sizing: border-box;
    }

    .timeattack-hub-main {
        order: 1;
        width: 100%;
    }
}

@media (max-width: 600px) {
    .timeattack-header-bar {
        /* Keep flex-direction: row to prevent double-row on mobile */
        gap: 8px;
        text-align: center;
    }

    /* Invites sidebar compact on mobile */
    .timeattack-invites-sidebar {
        max-height: 150px;
        padding: 8px;
        overflow-y: auto;
    }

    .timeattack-invites-sidebar-header h3 {
        font-size: 0.9rem;
        margin: 0 0 4px 0;
    }

    .timeattack-invites-list {
        gap: 4px;
    }

    .timeattack-mode-selector {
        flex-wrap: wrap;
    }

    .timeattack-mode-btn {
        flex: 1 1 calc(33% - 6px);
        min-width: 80px;
    }

    .timeattack-time-selector {
        flex-wrap: wrap;
        gap: 6px;
    }

    .timeattack-time-btn {
        padding: 5px 10px;
        font-size: 0.75rem;
    }

    .timeattack-action-buttons {
        flex-direction: column;
    }

    .timeattack-action-buttons button {
        width: 100%;
    }
}

/* ─────────────────────────────────────────────────────────────
   Filter Buttons (shared with Face-Off)
   ───────────────────────────────────────────────────────────── */

.timeattack-section .open-challenges-filters {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}

.timeattack-section .open-challenges-filters .filter-btn {
    flex: 1;
    padding: 6px 10px;
    font-size: 0.75rem;
    border: 1px solid rgba(0, 150, 136, 0.3);
    border-radius: 6px;
    background: transparent;
    color: var(--text-primary, #333);
    cursor: pointer;
    transition: all 0.2s;
}

body.dark-mode .timeattack-section .open-challenges-filters .filter-btn {
    border-color: rgba(77, 208, 192, 0.3);
    color: var(--text-primary-dark, #e0e0e0);
}

.timeattack-section .open-challenges-filters .filter-btn:hover {
    background: rgba(0, 150, 136, 0.1);
}

.timeattack-section .open-challenges-filters .filter-btn.active {
    background: #00897b;
    border-color: #00897b;
    color: white;
}

body.dark-mode .timeattack-section .open-challenges-filters .filter-btn.active {
    background: #00695c;
    border-color: #4dd0c0;
}

/* ─────────────────────────────────────────────────────────────
   Pagination
   ───────────────────────────────────────────────────────────── */

.challenges-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(0, 150, 136, 0.15);
}

.challenges-pagination button {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid rgba(0, 150, 136, 0.3);
    border-radius: 4px;
    background: transparent;
    color: #00897b;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}

body.dark-mode .challenges-pagination button {
    border-color: rgba(77, 208, 192, 0.3);
    color: #4dd0c0;
}

.challenges-pagination button:hover:not(:disabled) {
    background: rgba(0, 150, 136, 0.1);
}

.challenges-pagination button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.challenges-pagination span {
    font-size: 0.8rem;
    color: var(--text-secondary, #666);
}