/*
 * Night mode for the lobby and room pages.
 *
 * Switched on by data-night on <html> (see modules/nightMode.js and the inline
 * snippet at the top of lobby.html / test.html). Every rule is scoped to
 * :not([data-theme]) so a disguise theme (Excel, Slack, …) always wins — those
 * have their own fixed look.
 *
 * Same palette as the Android app's night theme: the gradient hues dimmed,
 * dark cards instead of white ones. Loaded last so it only has to override.
 */

:root[data-night]:not([data-theme]) {
    --n-bg-start: #262b5e;   /* #667eea at night */
    --n-bg-end: #2b1840;     /* #764ba2 at night */
    --n-surface: #1f1d36;    /* cards, panels, dialogs */
    --n-surface-2: #292645;  /* rows inside cards, inputs */
    --n-sunken: #17152c;
    --n-line: #38345c;
    --n-ink: #eceaf7;
    --n-muted: #ada8c8;
    --n-accent: #5a67d8;
    --n-accent-text: #a9b4ff;
    --n-link: #7fb2ff;
    --n-question: #3a2d1e;
    --n-gold: #3b3418;
    --n-warn-bg: #3a2c14;
    --n-warn: #ffc145;
    --n-danger-bg: #3f1c26;
    --n-danger: #ff9a9a;
    --n-success-bg: #173a26;
    --shadow-tint: 0, 0, 0;
    color-scheme: dark;
}

/* ── Page ────────────────────────────────────────────────────────────── */

:root[data-night]:not([data-theme]) body {
    color: var(--n-ink);
    background:
        radial-gradient(ellipse 900px 600px at 10% -10%, rgba(255, 255, 255, 0.06), transparent 60%),
        radial-gradient(ellipse 700px 500px at 100% 100%, rgba(0, 0, 0, 0.25), transparent 55%),
        linear-gradient(135deg, var(--n-bg-start) 0%, var(--n-bg-end) 100%);
    background-attachment: fixed;
}

:root[data-night]:not([data-theme]) .app-banner {
    background:
        radial-gradient(ellipse at top left, rgba(255, 255, 255, 0.08), transparent 55%),
        linear-gradient(135deg, #2c3478 0%, #3d1a63 100%);
}

:root[data-night]:not([data-theme]) .room-transition-overlay {
    background:
        radial-gradient(ellipse 900px 600px at 10% -10%, rgba(255, 255, 255, 0.06), transparent 60%),
        linear-gradient(135deg, var(--n-bg-start) 0%, var(--n-bg-end) 100%);
}

/* ── Profile dropdown ────────────────────────────────────────────────── */

:root[data-night]:not([data-theme]) .profile-dropdown-menu { background: var(--n-surface); }
:root[data-night]:not([data-theme]) .profile-dropdown-menu::before { border-bottom-color: var(--n-surface); }
:root[data-night]:not([data-theme]) .dropdown-item { color: var(--n-ink); }
:root[data-night]:not([data-theme]) .dropdown-item:hover { background: var(--n-surface-2); }
:root[data-night]:not([data-theme]) .dropdown-item:active { background: var(--n-sunken); }
:root[data-night]:not([data-theme]) .dropdown-divider { background: var(--n-line); }

/* ── Room: panels, chat, input ───────────────────────────────────────── */

:root[data-night]:not([data-theme]) #chat,
:root[data-night]:not([data-theme]) #leaderboardContainer { background-color: var(--n-surface); }

:root[data-night]:not([data-theme]) .quiz-header,
:root[data-night]:not([data-theme]) .leaderboard-header { border-bottom-color: var(--n-line); }

:root[data-night]:not([data-theme]) #messages,
:root[data-night]:not([data-theme]) #leaderboard { border-color: var(--n-line) !important; }

:root[data-night]:not([data-theme]) #inputBox {
    background: var(--n-surface-2);
    color: var(--n-ink);
    border-color: var(--n-line);
}
:root[data-night]:not([data-theme]) #inputBox::placeholder { color: var(--n-muted); }
:root[data-night]:not([data-theme]) #inputBox:focus { border-color: var(--n-accent-text); }

/* Mobile floating input bar (responsive.css) */
:root[data-night]:not([data-theme]) #inputForm { background: rgba(31, 29, 54, 0.94); }

/* ── Chat messages ───────────────────────────────────────────────────── */

:root[data-night]:not([data-theme]) #messages p {
    background-color: var(--n-surface-2);
    color: var(--n-ink);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
:root[data-night]:not([data-theme]) #messages p.Question,
:root[data-night]:not([data-theme]) #messages p.CloseAnswer,
:root[data-night]:not([data-theme]) #messages p.Hint,
:root[data-night]:not([data-theme]) #messages p.Notice {
    background-color: var(--n-surface-2);
    color: var(--n-ink);
}
:root[data-night]:not([data-theme]) #messages p.Question { background-color: var(--n-question); }
:root[data-night]:not([data-theme]) #messages p.correct_answer {
    background-color: var(--n-surface-2);
    animation-name: goldFlashNight;
}
:root[data-night]:not([data-theme]) #messages p.Answered,
:root[data-night]:not([data-theme]) #messages p.alka-sridu {
    background-color: var(--n-gold);
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.25);
}
:root[data-night]:not([data-theme]) #messages p.alka-sridu { animation-name: goldFlashNight; }
:root[data-night]:not([data-theme]) #messages p.alka-ring { background-color: #332b18; }
:root[data-night]:not([data-theme]) #messages p.warning { background-color: var(--n-warn-bg); }
:root[data-night]:not([data-theme]) #messages p.error { background-color: var(--n-danger-bg); }

/* The day flash fades through white; this one stays dark */
@keyframes goldFlashNight {
    0% { background-color: var(--n-surface-2); }
    50% { background-color: var(--n-gold); box-shadow: 0 0 12px rgba(255, 215, 0, 0.35); }
    100% { background-color: var(--n-surface-2); }
}

:root[data-night]:not([data-theme]) .message-username { color: var(--n-link); }
:root[data-night]:not([data-theme]) .message-avatar-container > img { border-color: var(--n-surface); }

/* Per-user name colours are inline hex values (messageRenderer.js). The darker
   ones disappear on a night card, so each gets a lighter shade of itself.
   !important is needed to beat the inline style. */
:root[data-night]:not([data-theme]) .message-username[data-user-color="0"] { color: #ff6fa3 !important; }
:root[data-night]:not([data-theme]) .message-username[data-user-color="1"] { color: #d48cf0 !important; }
:root[data-night]:not([data-theme]) .message-username[data-user-color="2"] { color: #7cd67f !important; }
:root[data-night]:not([data-theme]) .message-username[data-user-color="3"] { color: #4dd8ea !important; }
:root[data-night]:not([data-theme]) .message-username[data-user-color="4"] { color: #8f9bff !important; }
:root[data-night]:not([data-theme]) .message-username[data-user-color="5"] { color: #ff8a65 !important; }
:root[data-night]:not([data-theme]) .message-username[data-user-color="6"] { color: #c9a28f !important; }
:root[data-night]:not([data-theme]) .message-username[data-user-color="7"] { color: #9fb4c0 !important; }

/* ── Leaderboards (room + lobby) ─────────────────────────────────────── */

:root[data-night]:not([data-theme]) .leaderboard-list { background: var(--n-sunken); }
:root[data-night]:not([data-theme]) .leaderboard-entry { background: var(--n-surface-2); box-shadow: none; }
:root[data-night]:not([data-theme]) .leaderboard-entry .rank,
:root[data-night]:not([data-theme]) .leaderboard-entry .username,
:root[data-night]:not([data-theme]) .leaderboard-entry .player-name { color: var(--n-ink); }
:root[data-night]:not([data-theme]) .leaderboard-entry .score,
:root[data-night]:not([data-theme]) .leaderboard-entry .player-score { color: var(--n-accent-text); }
:root[data-night]:not([data-theme]) .leaderboard-entry.current-user { background: var(--n-warn-bg); }
:root[data-night]:not([data-theme]) .leaderboard-entry.current-user .username,
:root[data-night]:not([data-theme]) .leaderboard-entry.current-user .player-name { color: var(--n-warn); }
:root[data-night]:not([data-theme]) .leaderboard-entry.correct { background: var(--n-success-bg); }
:root[data-night]:not([data-theme]) .leaderboard-entry.top-player { background: #3a2a16; }
:root[data-night]:not([data-theme]) .no-scores { color: var(--n-muted); }
:root[data-night]:not([data-theme]) .error-message { color: var(--n-danger); }

:root[data-night]:not([data-theme]) .leaderboard-container.room-leaderboard { background: var(--n-surface) !important; }
:root[data-night]:not([data-theme]) .leaderboard-container.room-leaderboard .leaderboard-header,
:root[data-night]:not([data-theme]) .leaderboard-container.room-leaderboard .username { color: var(--n-ink); }
:root[data-night]:not([data-theme]) .leaderboard-container.room-leaderboard .leaderboard-entry {
    background: var(--n-surface-2);
    border-color: var(--n-line);
}

/* Lobby daily-leaderboard carousel */
:root[data-night]:not([data-theme]) .daily-leaderboard { background: var(--n-surface); }
:root[data-night]:not([data-theme]) .daily-leaderboard .leaderboard-header { color: var(--n-ink); border-bottom-color: var(--n-line); }
:root[data-night]:not([data-theme]) .daily-leaderboard .leaderboard-list { background-color: rgba(102, 126, 234, 0.10); border-color: var(--n-line); }
:root[data-night]:not([data-theme]) .daily-leaderboard .leaderboard-entry { background: rgba(255, 255, 255, 0.06); }
:root[data-night]:not([data-theme]) .daily-leaderboard .leaderboard-entry .rank,
:root[data-night]:not([data-theme]) .daily-leaderboard .leaderboard-entry .username { color: var(--n-ink); }
:root[data-night]:not([data-theme]) .daily-leaderboard .leaderboard-entry .score { color: var(--n-accent-text); }
:root[data-night]:not([data-theme]) .daily-leaderboard .no-scores { color: var(--n-muted); }
:root[data-night]:not([data-theme]) .leaderboard-nav { color: var(--n-accent-text); background: rgba(169, 180, 255, 0.10); border-color: rgba(169, 180, 255, 0.25); }
:root[data-night]:not([data-theme]) .leaderboard-dots .dot { background: rgba(169, 180, 255, 0.25); }
:root[data-night]:not([data-theme]) .leaderboard-dots .dot.active { background: var(--n-accent-text); }

/* ── Lobby rooms ─────────────────────────────────────────────────────── */

:root[data-night]:not([data-theme]) .mode-section { background: var(--n-surface); }
:root[data-night]:not([data-theme]) .mode-header,
:root[data-night]:not([data-theme]) .room-name { color: var(--n-ink); }
:root[data-night]:not([data-theme]) .room-card { background: var(--n-surface-2); }
:root[data-night]:not([data-theme]) .room-card.banned { background: var(--n-danger-bg); }
:root[data-night]:not([data-theme]) .room-users,
:root[data-night]:not([data-theme]) .room-description,
:root[data-night]:not([data-theme]) .empty-state { color: var(--n-muted); }

/* ── Dialogs, cards, menus ───────────────────────────────────────────── */

:root[data-night]:not([data-theme]) .guest-prompt-dialog,
:root[data-night]:not([data-theme]) .notif-float-card,
:root[data-night]:not([data-theme]) .profile-card,
:root[data-night]:not([data-theme]) .report-dialog,
:root[data-night]:not([data-theme]) .message-context-menu,
:root[data-night]:not([data-theme]) .premium-dropdown,
:root[data-night]:not([data-theme]) .flag-context-menu,
:root[data-night]:not([data-theme]) .question-submit-menu,
:root[data-night]:not([data-theme]) .auth-modal,
:root[data-night]:not([data-theme]) .dq-card {
    background: var(--n-surface);
    color: var(--n-ink);
    border-color: var(--n-line);
}

/* Headings and strong text in those surfaces */
:root[data-night]:not([data-theme]) .guest-prompt-dialog h3,
:root[data-night]:not([data-theme]) .notif-float-title,
:root[data-night]:not([data-theme]) .profile-card-username,
:root[data-night]:not([data-theme]) .report-dialog h3,
:root[data-night]:not([data-theme]) .dropdown-header h3,
:root[data-night]:not([data-theme]) .mode-name,
:root[data-night]:not([data-theme]) .submit-duplicate-q { color: var(--n-ink); }

/* Secondary text */
:root[data-night]:not([data-theme]) .guest-prompt-dialog p,
:root[data-night]:not([data-theme]) .btn-guest-dismiss,
:root[data-night]:not([data-theme]) .notif-float-text,
:root[data-night]:not([data-theme]) .profile-card-rank,
:root[data-night]:not([data-theme]) .profile-card-stats,
:root[data-night]:not([data-theme]) .profile-card-tally,
:root[data-night]:not([data-theme]) .report-form label,
:root[data-night]:not([data-theme]) .mode-description,
:root[data-night]:not([data-theme]) .loading,
:root[data-night]:not([data-theme]) .no-modes,
:root[data-night]:not([data-theme]) .flag-menu-content label,
:root[data-night]:not([data-theme]) .submit-menu-content label,
:root[data-night]:not([data-theme]) .submit-duplicate-a,
:root[data-night]:not([data-theme]) .auth-modal-close,
:root[data-night]:not([data-theme]) .auth-tab,
:root[data-night]:not([data-theme]) .auth-divider,
:root[data-night]:not([data-theme]) .auth-field label,
:root[data-night]:not([data-theme]) .auth-switch,
:root[data-night]:not([data-theme]) .auth-encourage { color: var(--n-muted); }
:root[data-night]:not([data-theme]) .btn-guest-dismiss:hover,
:root[data-night]:not([data-theme]) .auth-modal-close:hover { color: var(--n-ink); }

/* Dividers inside surfaces */
:root[data-night]:not([data-theme]) .profile-card-stat,
:root[data-night]:not([data-theme]) .profile-actions,
:root[data-night]:not([data-theme]) .dropdown-header,
:root[data-night]:not([data-theme]) .flag-menu-header,
:root[data-night]:not([data-theme]) .auth-modal-tabs,
:root[data-night]:not([data-theme]) .auth-divider::before,
:root[data-night]:not([data-theme]) .auth-divider::after,
:root[data-night]:not([data-theme]) .context-menu-item { border-color: var(--n-line); }

/* Links / highlighted values */
:root[data-night]:not([data-theme]) .profile-card-value,
:root[data-night]:not([data-theme]) .auth-tab.active,
:root[data-night]:not([data-theme]) .auth-switch a { color: var(--n-link); }
:root[data-night]:not([data-theme]) .auth-encourage strong { color: #c9a8f5; }
:root[data-night]:not([data-theme]) .submit-menu-info { color: var(--n-accent-text); background: rgba(169, 180, 255, 0.10); }

/* Quiet buttons and rows */
:root[data-night]:not([data-theme]) .btn-mute,
:root[data-night]:not([data-theme]) .btn-cancel,
:root[data-night]:not([data-theme]) .notif-float-close,
:root[data-night]:not([data-theme]) .dropdown-balance-row,
:root[data-night]:not([data-theme]) .premium-mode-card,
:root[data-night]:not([data-theme]) .flag-menu-header,
:root[data-night]:not([data-theme]) .context-menu-item,
:root[data-night]:not([data-theme]) .auth-social-btn.google,
:root[data-night]:not([data-theme]) .submit-duplicate-item {
    background: var(--n-surface-2);
    color: var(--n-ink);
}
:root[data-night]:not([data-theme]) .btn-mute:hover,
:root[data-night]:not([data-theme]) .btn-cancel:hover,
:root[data-night]:not([data-theme]) .premium-mode-card:not(.disabled):hover,
:root[data-night]:not([data-theme]) .context-menu-item:hover,
:root[data-night]:not([data-theme]) .auth-social-btn.google:hover { background: var(--n-sunken); }
:root[data-night]:not([data-theme]) .btn-attach-image {
    background: var(--n-surface-2);
    color: var(--n-muted);
    border-color: var(--n-line);
}
:root[data-night]:not([data-theme]) .btn-report { background: var(--n-warn-bg); color: var(--n-warn); }

/* Form fields inside dialogs */
:root[data-night]:not([data-theme]) .report-select,
:root[data-night]:not([data-theme]) .report-notes,
:root[data-night]:not([data-theme]) .flag-menu-content select,
:root[data-night]:not([data-theme]) .flag-menu-content textarea,
:root[data-night]:not([data-theme]) .submit-menu-content textarea,
:root[data-night]:not([data-theme]) .submit-menu-content input[type="text"],
:root[data-night]:not([data-theme]) .submit-menu-content select,
:root[data-night]:not([data-theme]) .auth-field input {
    background: var(--n-surface-2);
    color: var(--n-ink);
    border-color: var(--n-line);
}

:root[data-night]:not([data-theme]) .report-status.success { background: var(--n-success-bg); color: #9be7b4; }
:root[data-night]:not([data-theme]) .report-status.error { background: var(--n-danger-bg); color: var(--n-danger); }
:root[data-night]:not([data-theme]) .submit-duplicate-warning { background: var(--n-warn-bg); border-color: #7a4a14; }
:root[data-night]:not([data-theme]) .submit-duplicate-title { color: var(--n-warn); }

/* ── Dnevno card ─────────────────────────────────────────────────────── */

:root[data-night]:not([data-theme]) .dq-par,
:root[data-night]:not([data-theme]) .dq-score .k,
:root[data-night]:not([data-theme]) .dq-row,
:root[data-night]:not([data-theme]) .dq-foot { color: var(--n-muted); }
:root[data-night]:not([data-theme]) .dq-par b { background: var(--n-surface-2); color: var(--n-accent-text); }
:root[data-night]:not([data-theme]) .dq-tile { background: var(--n-surface-2); border-color: var(--n-line); color: var(--n-ink); }
:root[data-night]:not([data-theme]) .dq-tile.on,
:root[data-night]:not([data-theme]) .dq-tile.typed { background: var(--n-surface); }
:root[data-night]:not([data-theme]) .dq-tile.on,
:root[data-night]:not([data-theme]) .dq-tile.cursor { border-color: var(--n-accent-text); }
:root[data-night]:not([data-theme]) .dq-tile.typed { border-color: #5a5688; }
:root[data-night]:not([data-theme]) .dq-tile.locked { background: #2c2d5c; border-color: #4a4f9a; }
:root[data-night]:not([data-theme]) .dq-card input { background: var(--n-surface-2); border-color: var(--n-line); color: var(--n-ink); }
:root[data-night]:not([data-theme]) .dq-ghost { background: var(--n-surface); border-color: var(--n-line) !important; color: var(--n-ink); }
:root[data-night]:not([data-theme]) .dq-score,
:root[data-night]:not([data-theme]) .dq-foot { border-color: var(--n-line); }
:root[data-night]:not([data-theme]) .dq-row .track,
:root[data-night]:not([data-theme]) .dq-reward,
:root[data-night]:not([data-theme]) img.dq-media { background: var(--n-surface-2); }
:root[data-night]:not([data-theme]) .dq-row .fill { background: #4a4680; }
:root[data-night]:not([data-theme]) .dq-claim { background: var(--n-warn-bg); }
:root[data-night]:not([data-theme]) .dq-claim b { color: var(--n-warn); }