.dark-mode { --lounge-surface: #1a1a26; --lounge-text: #f5f5fa; --lounge-muted: #b7b7ca; --lounge-border: #363646; --lounge-hover: #242433; }
.light-mode { --lounge-surface: #fff; --lounge-text: #20202c; --lounge-muted: #57576b; --lounge-border: #d5d5e3; --lounge-hover: #ededf7; }
.site-brand { color: inherit; font-size: 1.4rem; font-weight: 700; margin: 0 1.5rem 0 .5rem; text-decoration: none; }
.desktop-nav { display: flex; gap: 1.5rem; }
.desktop-nav a { color: inherit; padding: .7rem 0; }
.discovery-page { max-width: 1160px; margin: auto; color: var(--lounge-text); }
.discovery-intro { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 2rem 0; }
.discovery-intro h1 { font-size: clamp(2rem, 3.5vw, 3rem); font-weight: 700; line-height: 1.12; margin: .5rem 0 1rem; }
.discovery-intro p { max-width: 34rem; }
.eyebrow, .catalogue-meta { color: var(--lounge-muted); font-size: .875rem; }
.catalogue { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.catalogue-card { background: var(--lounge-surface); border: 1px solid var(--lounge-border); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
.catalogue-art { height: 112px; display: grid; place-items: center; font-size: 2rem; font-weight: 700; letter-spacing: .15em; background: var(--lounge-hover); color: var(--mud-palette-primary); }
.art-connect4 { color: #e15367; } .art-wordduel { color: #37987f; } .art-speedmath { color: #bc8145; }
.catalogue-copy { padding: 1.25rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.catalogue-copy h2 { font-size: 1.15rem; font-weight: 600; overflow-wrap: anywhere; }
.catalogue-copy p { line-height: 1.5; }
.catalogue-copy .btn { align-self: flex-start; margin-top: auto; min-height: 44px; }
.discovery-live { margin: 2rem 0; padding: 1.5rem; background: var(--lounge-surface); border: 1px solid var(--lounge-border); border-radius: 16px; }
.session-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding: 1rem; margin-bottom: 1rem; background: var(--lounge-surface); color: var(--lounge-text); border: 1px solid var(--lounge-border); border-radius: 12px; }
.signin-page .guest-btn { color: var(--lounge-text); background: var(--lounge-surface); border: 1px solid var(--lounge-border); }
.lg-rematch-modal { position: static !important; background: transparent !important; padding: 0 !important; display: block !important; }
.lg-rematch-card { position: static !important; width: 100% !important; max-width: none !important; margin: 1rem 0; color: var(--lounge-text); background: var(--lounge-surface); }
.lg-rematch-close { display: none !important; }
.quickmatch-btn { background: var(--lounge-surface) !important; color: var(--lounge-text) !important; border: 1px solid var(--lounge-border); }
.quickmatch-hint, .signin-page .guest-hint { color: var(--lounge-muted) !important; }
@media(max-width: 899px) { .catalogue { grid-template-columns: repeat(2, minmax(0,1fr)); } .desktop-nav { display: none; } .discovery-intro { align-items: flex-start; flex-direction: column; gap: 1rem; } }
@media(max-width: 479px) { .catalogue { grid-template-columns: minmax(0,1fr); } .catalogue-card { flex-direction: row; } .catalogue-art { width: 64px; height: auto; flex-shrink: 0; font-size: 1rem; letter-spacing: 0; } .catalogue-copy { padding: 1rem; } .catalogue-copy p:not(.catalogue-meta) { font-size: .875rem; } }
@media(prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
.rankings-table { width: 100%; border-collapse: collapse; color: var(--lounge-text); background: var(--lounge-surface); }
.rankings-table caption { padding: 1rem; text-align: left; color: var(--lounge-muted); }
.rankings-table th, .rankings-table td { padding: .9rem .5rem; text-align: left; border-bottom: 1px solid var(--lounge-border); overflow-wrap: anywhere; }
@media(max-width:479px) { .rankings-table { font-size: .875rem; } .rankings-table th, .rankings-table td { padding: .75rem .25rem; } }
.match-result { margin: 1rem 0; padding: 1.5rem; border: 1px solid var(--lounge-border); border-radius: 16px; background: var(--lounge-surface); color: var(--lounge-text); }
.match-result h2 { font-size: 1.5rem; font-weight: 700; }
.match-result .btn { margin: .5rem .5rem .5rem 0; min-height: 44px; }
.match-result p { margin: .75rem 0; }
.lg-c4-me, .ttt-you-badge, .lg-summary-value, .lg-rank-badge, .you-badge { color: var(--lounge-text) !important; background: var(--lounge-hover) !important; font-size: .875rem !important; }
.catalogue-art .game-card-visual { background: transparent; width: 100%; height: 112px; min-height: 0; padding: 12px; }
.catalogue-art .game-preview-c4 { transform: scale(.65); }
.catalogue-art .game-preview-typing { font-size: .875rem; letter-spacing: 0; }
@media(max-width:479px) { .catalogue-art { overflow:hidden; } .catalogue-art .game-card-visual { width: 160px; transform:scale(.4); transform-origin:center; } }
.shared-match-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.shared-match-header h1 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; color: var(--lounge-text); }
.match-preferences summary, .match-chat summary { padding: .75rem; cursor: pointer; color: var(--lounge-text); min-height: 44px; }
.match-shell { max-width: 1160px; margin: auto; }
@media(max-width:600px) { .lg-match-bar .lg-match-sub, .lg-match-bar .lg-match-actions { display:none; } .lg-match-status { flex-wrap:wrap; } }
h1[tabindex="-1"]:focus { outline: none; }
.catalogue-rules { display: none; }
.catalogue-art .t-done, .catalogue-art .t-pending, .catalogue-art .typing-stats-mini, .catalogue-art .math-task, .catalogue-art .game-preview-rps span { color: var(--lounge-text); opacity: 1; }
.catalogue-art .t-pending { color: var(--lounge-muted); }
@media(max-width:479px) {
    .catalogue-copy { gap: .35rem; }
    .catalogue-description { display: none; }
    .catalogue-rules { display: block; font-size: .875rem; }
    .catalogue-rules summary { cursor: pointer; padding: .25rem 0; }
    .catalogue-art { position: relative; }
    .catalogue-art .game-card-visual { position: absolute; width: 180px; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.4); }
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }