/* ========== CONNECT4 COLUMN SHAKE ========== */

@keyframes lg-c4-column-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-3px); }
    40% { transform: translateX(3px); }
    60% { transform: translateX(-2px); }
    80% { transform: translateX(2px); }
}

.lg-c4-column-error {
    animation: lg-c4-column-shake 300ms ease;
}

.lg-c4-column-error::after {
    content: "";
    position: absolute;
    inset: -0.35rem;
    border-radius: 12px;
    background: rgba(185, 52, 52, 0.15);
    box-shadow: inset 0 0 0 2px rgba(185, 52, 52, 0.3);
    pointer-events: none;
}

/* ========== LIGHT MODE SUPPORT ========== */

.light-mode.mud-layout {
    background: #f7f1e6;
}

.light-mode .mud-main-content {
    background: radial-gradient(circle at top, #fff5e2 0%, #f6efe3 45%, #e9efe8 100%);
}

.light-mode .mud-appbar {
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(10px);
}

.light-mode .mud-drawer {
    background: #ffffff !important;
}

/* ========== DARK MODE SUPPORT ========== */

/* The .dark-mode custom-property block that stood here restated all eight legacy names for dark.
   The :root aliases now resolve through MudBlazor's palette, which already varies by mode, so
   forking them by hand is redundant. */
.dark-mode.mud-layout {
    background: var(--bg);
}

.dark-mode .mud-main-content {
    background: radial-gradient(circle at top, #1f1f30 0%, #1a1a27 45%, #151521 100%);
}

.dark-mode .mud-appbar {
    background: rgba(26, 26, 39, 0.95) !important;
    backdrop-filter: blur(10px);
}

.dark-mode .mud-drawer {
    background: var(--surface) !important;
}

.dark-mode .mud-navmenu .mud-nav-link {
    color: var(--muted);
}

.dark-mode .mud-navmenu .mud-nav-link:hover {
    background: rgb(from var(--mud-palette-primary) r g b / 0.1);
    color: var(--accent);
}

.dark-mode .mud-navmenu .mud-nav-link.active {
    color: var(--accent);
    background: rgb(from var(--mud-palette-primary) r g b / 0.15);
}

.dark-mode .home-hero,
.dark-mode .signin-card,
.dark-mode .lobby-section,
.dark-mode .leaderboards-content,
.dark-mode .lb-sticky-me,
.dark-mode .profile-content,
.dark-mode .profile-progress,
.dark-mode .games-coming-soon {
    background: var(--surface);
    border-color: var(--line);
}

.dark-mode .lobby-header h1,
.dark-mode .leaderboards-header h1,
.dark-mode .games-header h1,
.dark-mode .profile-info h1,
.dark-mode h1, .dark-mode h2, .dark-mode h3 {
    color: var(--ink);
}

.dark-mode p,
.dark-mode .lobby-header p,
.dark-mode .section-header p {
    color: var(--muted);
}

.dark-mode .game-card-lg p {
    color: rgba(255, 255, 255, 0.7);
}.dark-mode .form-group input {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--line);
    color: var(--ink);
}

.dark-mode .form-group input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgb(from var(--mud-palette-primary) r g b / 0.2);
}.dark-mode .signin-tabs {
    background: rgb(from var(--mud-palette-primary) r g b / 0.08);
}.dark-mode .signin-tab.active {
    background: var(--surface);
    color: var(--accent);
}

.dark-mode .quickmatch-btn {
    background: var(--surface);
    border-color: var(--line);
}

.dark-mode .quickmatch-btn:hover {
    border-color: var(--accent);
    box-shadow: 0 8px 20px rgb(from var(--mud-palette-primary) r g b / 0.2);
}

.dark-mode .quickmatch-icon {
    background: rgb(from var(--mud-palette-primary) r g b / 0.12);
    color: var(--accent);
}

/* 0.12 of a near-white amber lifted the tile to #372e2f, which left .quickmatch-hint at 4.29:1.
   0.08 (what the light theme already uses) keeps the wash readable and the hint at 4.62:1. */
.dark-mode .quickmatch-word {
    background: rgba(242, 165, 65, 0.08);
    border-color: rgba(242, 165, 65, 0.4);
}

.dark-mode .quickmatch-word .quickmatch-icon {
    background: rgba(242, 165, 65, 0.2);
    color: #f0b93b;
}

.dark-mode .quickmatch-math {
    background: rgba(84, 122, 227, 0.12);
    border-color: rgba(84, 122, 227, 0.4);
}

.dark-mode .quickmatch-math .quickmatch-icon {
    background: rgba(84, 122, 227, 0.22);
    color: #8ca7ff;
}

/* .dark-mode .quickmatch-icon paints every tile with --accent, which is fine behind an SVG glyph
   but not behind the RPS chip's text: the accent on its own 12%-accent tile is only 4.45:1.
   Lighten just this one, since it is the only tile whose icon is a word. */
.dark-mode .quickmatch-rps .quickmatch-icon {
    color: var(--mud-palette-primary-lighten);
}.dark-mode .match-item {
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--line);
}.dark-mode .lb-tab {
    background: var(--surface);
    border-color: var(--line);
    color: var(--muted);
}

.dark-mode .lb-tab:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.dark-mode .lb-tab.active {
    background: var(--accent);
    color: var(--on-accent);
}.dark-mode .search-box input {
    color: var(--ink);
}

.dark-mode .lb-table-header {
    background: rgb(from var(--mud-palette-primary) r g b / 0.08);
    color: var(--muted);
}.dark-mode .lb-row:hover {
    background: rgb(from var(--mud-palette-primary) r g b / 0.05);
}

/* Matches the light rule's 0.08. At 0.12 the highlight lifted the row to #2b2a46 and pinned
   .rank-num at 4.49:1 -- failing on the one row every user is guaranteed to look at, their own. */
.dark-mode .lb-row-me {
    background: rgb(from var(--mud-palette-primary) r g b / 0.08);
}

/* The tier fills are translucent, so on a dark row they composite DOWN to a dark chip -- and the
   light theme's dark inks (#5b5b6b on #333247 was 2.4:1) have nothing to grab onto. Each rank
   keeps its hue and flips lightness instead, so Novice still reads grey and Grandmaster amber,
   while every one of them clears 4.5:1 against its own fill over the .lb-row-me highlight. */
.dark-mode .tier-novice {
    color: #a4a4b2;
}

.dark-mode .tier-freshman {
    color: #7ba9f4;
}

.dark-mode .tier-casual {
    color: #2fc66e;
}

/* --accent-strong is primary-darken, which on a dark theme moves the ink the wrong way. */
.dark-mode .tier-pro {
    color: var(--mud-palette-primary-lighten);
}

.dark-mode .tier-master {
    color: #e37eed;
}

.dark-mode .tier-grandmaster {
    color: #f0ac4c;
}

.dark-mode .tier-ultimate-warrior {
    color: #f39595;
}

.dark-mode .stat-card {
    background: rgb(from var(--mud-palette-primary) r g b / 0.06);
}.dark-mode .profile-tabs {
    background: rgb(from var(--mud-palette-primary) r g b / 0.08);
}

.dark-mode .wordduel-stage {
    background: linear-gradient(160deg, rgba(24, 20, 16, 0.92), rgba(18, 18, 22, 0.96));
    border-color: rgba(242, 165, 65, 0.18);
}

.dark-mode .wordduel-letter {
    background: linear-gradient(180deg, rgba(242, 165, 65, 0.3) 0%, rgba(166, 88, 33, 0.6) 100%);
    color: #ffe4b5;
    border-color: rgba(255, 255, 255, 0.15);
}

.dark-mode .wordduel-score-card {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(242, 165, 65, 0.2);
}

.dark-mode .wordduel-feed-row {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

.dark-mode .wordduel-feed-row.me {
    background: rgba(242, 165, 65, 0.2);
    border-color: rgba(242, 165, 65, 0.3);
}

.dark-mode .wordduel-input input {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--line);
    color: var(--ink);
}

.dark-mode .speedmath-stage {
    background: linear-gradient(180deg, rgba(18, 22, 36, 0.94), rgba(15, 19, 32, 0.98));
    border-color: rgba(84, 122, 227, 0.2);
}

.dark-mode .speedmath-score-card {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(84, 122, 227, 0.2);
}

.dark-mode .speedmath-lane {
    background: linear-gradient(180deg, rgba(84, 122, 227, 0.2), rgba(84, 122, 227, 0.08));
    border-color: rgba(84, 122, 227, 0.18);
}

.dark-mode .speedmath-task {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.15);
    color: #e3ecff;
}

.dark-mode .speedmath-input input {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--line);
    color: var(--ink);
}

.dark-mode .speedmath-stats span {
    background: rgba(84, 122, 227, 0.18);
}.dark-mode .profile-tab.active {
    background: var(--surface);
    color: var(--accent);
}.dark-mode .modal-card h2,
.dark-mode .modal-card h3 {
    color: var(--ink);
}.dark-mode .chip-empty {
    background: rgba(255, 255, 255, 0.1);
}.dark-mode .btn.primary {
    background: var(--accent);
    box-shadow: 0 10px 20px rgb(from var(--mud-palette-primary) r g b / 0.3);
}

.dark-mode .guest-btn {
    background: rgb(from var(--mud-palette-primary) r g b / 0.1);
    border-color: rgb(from var(--mud-palette-primary) r g b / 0.25);
    color: var(--accent);
}

.dark-mode .guest-btn:hover:not(:disabled) {
    background: rgb(from var(--mud-palette-primary) r g b / 0.15);
}

.dark-mode .home-game-card {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.dark-mode .home-game-card:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}

.dark-mode .home-stats-bar {
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--line);
}.dark-mode .home-feature:hover {
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.3);
}

.dark-mode .home-feature-icon {
    background: rgb(from var(--mud-palette-primary) r g b / 0.12);
    color: var(--accent);
}

.dark-mode .feature-grid article {
    background: var(--surface);
    border-color: var(--line);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2);
}

.dark-mode .hero {
    background: var(--surface);
    border-color: var(--line);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.2);
}

.dark-mode .hero-card {
    background: linear-gradient(135deg, rgb(from var(--mud-palette-primary) r g b / 0.1), rgba(240, 185, 59, 0.15));
    border-color: rgb(from var(--mud-palette-primary) r g b / 0.25);
}.dark-mode .progress-bar {
    background: rgb(from var(--mud-palette-primary) r g b / 0.15);
}

.dark-mode .activity-placeholder,
.dark-mode .stats-placeholder {
    background: rgb(from var(--mud-palette-primary) r g b / 0.06);
}

.dark-mode .chat-panel-wrapper {
    color: var(--ink);
}

.dark-mode .chat-message {
    background: rgb(from var(--mud-palette-primary) r g b / 0.08);
}.dark-mode .chat-input {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--line);
    color: var(--ink);
}.dark-mode .chat-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgb(from var(--mud-palette-primary) r g b / 0.15);
}.dark-mode .chat-send-btn:hover:not(:disabled) {
    background: var(--accent-strong);
}.dark-mode .chat-tab.active {
    color: var(--accent);
    box-shadow: inset 0 -2px 0 var(--accent);
}

/* --accent-strong is --mud-palette-primary-darken: a step DARKER than the accent, which is the
   right way on a light surface and exactly backwards on a dark one. On the 14%-accent chip it
   left the delta at 3.25:1. Lighten instead -- same hue, mirrored direction. */
.dark-mode .lg-typing-delta {
    color: var(--mud-palette-primary-lighten);
}

.dark-mode .lobby-connection.conn-ok {
    background: rgb(from var(--mud-palette-primary) r g b / 0.15);
    color: var(--accent);
}.dark-mode .btn-icon {
    background: rgb(from var(--mud-palette-primary) r g b / 0.12);
    color: var(--accent);
}

.dark-mode .btn-icon:hover {
    background: rgb(from var(--mud-palette-primary) r g b / 0.2);
}.dark-mode .empty-matches p {
    color: var(--ink);
}.dark-mode .progress-header,
.dark-mode .progress-footer {
    color: var(--muted);
}.dark-mode .signin-divider::before,
.dark-mode .signin-divider::after {
    background: var(--line);
}/* ========== REDUCED MOTION ========== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}