/* ===== Reset & Base ===== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --bg-primary: #0a0a0f;
    --bg-secondary: #12121a;
    --bg-card: #16161f;
    --bg-card-hover: #1c1c28;
    --border: #2a2a3a;
    --text-primary: #e8e8f0;
    --text-secondary: #8888a0;
    --accent: #7c3aed;
    --accent-secondary: #06b6d4;
    --accent-glow: rgba(124, 58, 237, 0.4);
    --accent-secondary-glow: rgba(6, 182, 212, 0.3);
    --accent-subtle: rgba(124, 58, 237, 0.15);
    --accent-grid: rgba(124, 58, 237, 0.03);
    --accent-header: rgba(124, 58, 237, 0.08);
    --chat-self-bg: rgba(124, 58, 237, 0.15);
    --chat-self-border: rgba(124, 58, 237, 0.2);
    /* Keep legacy aliases */
    --accent-purple: var(--accent);
    --accent-cyan: var(--accent-secondary);
    --accent-purple-glow: var(--accent-glow);
    --accent-cyan-glow: var(--accent-secondary-glow);
    --radius: 12px;
    --radius-sm: 8px;
    /* User-customizable border width. Individual elements that care about width
       can opt in via var(--border-width) or keep their hard-coded 1px. */
    --border-width: 1px;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    line-height: 1.6;
}

/* ===== Background Grid Pattern ===== */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
        linear-gradient(var(--accent-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--accent-grid) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
    z-index: 0;
}

/* ===== Header ===== */
.header {
    position: relative;
    z-index: 10;
    padding: 1.5rem 2rem 1rem;
    text-align: center;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, var(--accent-header) 0%, transparent 100%);
}

.header-logo {
    height: 120px;
    width: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

.logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.logo-icon {
    font-size: 2.2rem;
}

.logo h1 {
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: 6px;
    background: linear-gradient(135deg, var(--accent-purple), var(--accent-cyan));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.tagline {
    color: var(--text-secondary);
    margin-top: 0.3rem;
    font-size: 0.95rem;
}

.part-nav {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.part-link {
    padding: 6px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 50px;
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
}

.part-link:hover {
    color: var(--text-primary);
    border-color: var(--accent-cyan);
}

.part-link.active {
    background: var(--accent-cyan);
    border-color: var(--accent-cyan);
    color: #fff;
}

/* ===== Auth Area ===== */
.auth-area {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    z-index: 200;
}

.theme-picker-wrapper {
    position: absolute;
    top: 1rem;
    right: calc(1.5rem + 140px);
    z-index: 200;
}

.player-actions .theme-picker-wrapper {
    position: relative;
    top: auto;
    right: auto;
}

.auth-btn {
    padding: 6px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 50px;
    color: var(--text-secondary);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}

.auth-btn:hover {
    color: var(--text-primary);
    border-color: var(--accent-purple);
}

.auth-user-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.auth-username {
    color: var(--accent-cyan);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline transparent;
    text-underline-offset: 3px;
    transition: text-decoration-color 0.15s;
}

.auth-username[data-open-profile-uid]:hover {
    text-decoration-color: currentColor;
}

.auth-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.5rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    min-width: 260px;
    z-index: 100;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    display: none;
}

.auth-dropdown.open {
    display: block;
}

.auth-input {
    width: 100%;
    padding: 8px 12px;
    margin-bottom: 0.5rem;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.85rem;
    outline: none;
    box-sizing: border-box;
}

.auth-input:focus {
    border-color: var(--accent-purple);
}

.auth-actions {
    display: flex;
    gap: 0.5rem;
}

.auth-submit {
    flex: 1;
    padding: 8px;
    background: var(--accent-purple);
    border: none;
    border-radius: var(--radius-sm);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
}

.auth-submit:hover {
    opacity: 0.85;
}

.auth-submit.auth-secondary {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
}

.auth-error {
    color: #ef4444;
    font-size: 0.75rem;
    margin-top: 0.5rem;
    min-height: 0;
}

/* ===== Admin Badge ===== */
.auth-admin-badge {
    padding: 2px 8px;
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 50px;
    letter-spacing: 1px;
}

/* ===== Login Gate (blocks site until logged in) ===== */
.login-gate {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-gate-box {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2.5rem 2rem;
    width: 100%;
    max-width: 360px;
    text-align: center;
}

.login-gate-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.login-gate-logo .logo-icon {
    font-size: 2rem;
}

.login-gate-logo h1 {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: 6px;
    background: linear-gradient(135deg, var(--accent-purple), var(--accent-cyan));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.login-gate-tagline {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.login-gate .auth-input {
    margin-bottom: 0.75rem;
}

.login-gate .auth-actions {
    margin-top: 0.25rem;
}

.login-gate .auth-submit {
    padding: 10px;
    font-size: 0.9rem;
}

body.auth-gated .header,
body.auth-gated .main,
body.auth-gated .footer,
body.auth-gated .player-header,
body.auth-gated .player-container {
    filter: blur(8px);
    pointer-events: none;
    user-select: none;
}

/* ===== Active Users Bar ===== */
.active-users-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 10px 20px;
    margin-bottom: 1.25rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.active-users-dot {
    width: 8px;
    height: 8px;
    background: #22c55e;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.6);
    animation: pulse-dot 2s ease-in-out infinite;
}

.active-users-dot-small {
    width: 6px;
    height: 6px;
    box-shadow: 0 0 4px rgba(34, 197, 94, 0.6);
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.active-users-bar-interactive {
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}

.active-users-bar-interactive:hover {
    background: var(--bg-card);
}

.active-users-caret {
    margin-left: 4px;
    color: var(--text-secondary);
    font-size: 0.8rem;
    transition: transform 0.2s ease;
}

.active-users-caret.expanded {
    transform: rotate(180deg);
    display: inline-block;
}

.active-users-panel {
    margin-top: -0.75rem;
    margin-bottom: 1.25rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
    max-height: 300px;
    overflow-y: auto;
}

.active-users-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 4px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.active-users-row:last-child { border-bottom: none; }

.active-users-row.is-self {
    background: var(--accent-subtle);
    border-radius: 4px;
    padding-left: 8px;
    padding-right: 8px;
    margin: 2px 0;
}

.active-users-name {
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    text-decoration: underline transparent;
    text-underline-offset: 3px;
    transition: text-decoration-color 0.15s;
}

.active-users-name:hover {
    text-decoration-color: currentColor;
}

.active-users-you {
    color: var(--text-secondary);
    font-weight: 400;
    font-size: 0.8rem;
}

.active-users-playing {
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.active-users-game {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
}

.active-users-game:hover {
    text-decoration: underline;
}

.active-users-idle {
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-style: italic;
    opacity: 0.7;
}

.active-users-empty {
    padding: 10px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-style: italic;
}

/* ===== Main Content ===== */
.main {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

/* ===== Controls (Search + Categories) ===== */
.controls {
    margin-bottom: 2rem;
}

.search-wrapper {
    position: relative;
    margin-bottom: 1rem;
}

.search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
}

.search-input {
    width: 100%;
    /* Space on the right for two stacked buttons (recommender + random) */
    padding: 14px 104px 14px 48px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-size: 1rem;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.random-btn,
.recommender-trigger-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.15s;
    padding: 0;
    line-height: 1;
}

.recommender-trigger-btn {
    right: 54px;
    color: #fbbf24;
    font-size: 1.25rem;
}

.random-btn {
    right: 8px;
}

.recommender-trigger-btn:hover {
    border-color: #fbbf24;
    background: rgba(251, 191, 36, 0.12);
    transform: translateY(-50%) scale(1.08);
}

.random-btn:hover {
    border-color: var(--accent);
    background: var(--accent-subtle);
    transform: translateY(-50%) rotate(180deg);
}

.random-btn:active,
.recommender-trigger-btn:active {
    transform: translateY(-50%) scale(0.9);
}

/* ===== Kirky — chat assistant ===== */

.kirky-trigger {
    position: fixed;
    bottom: 18px;
    right: 18px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid var(--accent);
    background: var(--bg-secondary);
    padding: 0;
    cursor: pointer;
    z-index: 900;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
}

.kirky-trigger:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 12px 32px var(--accent-subtle);
}

.kirky-trigger:active {
    transform: scale(0.96);
}

.kirky-trigger-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.kirky-trigger-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #4ade80;
    border: 2px solid var(--bg-secondary);
    box-shadow: 0 0 8px rgba(74, 222, 128, 0.5);
    animation: kirky-pulse 2s ease-in-out infinite;
}

@keyframes kirky-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.kirky-panel {
    position: fixed;
    right: 18px;
    bottom: 90px;
    width: min(380px, calc(100vw - 24px));
    height: min(600px, calc(100vh - 120px));
    height: min(600px, calc(100dvh - 120px));
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
    z-index: 950;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(16px) scale(0.97);
    opacity: 0;
    /* Block clicks while invisible — fixes the phantom-panel bug where
       tapping where the search bar appears to be actually clicks a
       lingering kirky-card link (especially on mobile where the panel
       covers the whole screen when open). */
    pointer-events: none;
    transition: transform 0.18s ease, opacity 0.18s ease;
}

/* When the panel is fully hidden (post-animation), display:none it so
   it can't steal taps at all. Override is needed because .kirky-panel
   has display:flex which wins over the HTML `hidden` attribute. */
.kirky-panel[hidden] {
    display: none !important;
}

.kirky-panel.is-open {
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto;
}

.kirky-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
}

.kirky-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--accent);
    flex-shrink: 0;
}

.kirky-title-group {
    flex: 1;
    min-width: 0;
}

.kirky-title {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.kirky-name {
    font-weight: 700;
    font-size: 0.98rem;
    color: var(--text-primary);
}

.kirky-provider {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    font-size: 0.65rem;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-weight: 600;
    line-height: 1;
}

.kirky-provider-groq {
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.12);
    border-color: rgba(251, 191, 36, 0.4);
}
.kirky-provider-groq::before {
    content: '\26A1';
    font-size: 0.7rem;
}

.kirky-provider-cloudflare {
    color: #f38020;   /* Cloudflare orange */
    background: rgba(243, 128, 32, 0.12);
    border-color: rgba(243, 128, 32, 0.4);
}
.kirky-provider-cloudflare::before {
    content: '\2601';   /* cloud */
    font-size: 0.75rem;
}

.kirky-provider-pollinations {
    color: #ec4899;
    background: rgba(236, 72, 153, 0.12);
    border-color: rgba(236, 72, 153, 0.4);
}
.kirky-provider-pollinations::before {
    content: '\273F';
}

.kirky-provider-unknown {
    color: var(--text-secondary);
}

/* Shown when Groq has returned 429 and we're skipping it for N seconds */
.kirky-provider-ratelimited {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.4);
}
.kirky-provider-ratelimited::before {
    content: '\23F3';   /* hourglass */
    font-size: 0.75rem;
}

.kirky-subtitle {
    font-size: 0.7rem;
    color: var(--text-secondary);
    margin-top: 1px;
}

.kirky-clear,
.kirky-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.15rem;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.12s;
    line-height: 1;
}

.kirky-clear { font-size: 0.95rem; }
.kirky-close { font-size: 1.4rem; }

.kirky-clear:hover,
.kirky-close:hover {
    color: var(--text-primary);
    background: var(--bg-card-hover);
}

.kirky-messages {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    scroll-behavior: smooth;
}

.kirky-bubble {
    max-width: 85%;
    padding: 8px 12px;
    border-radius: 14px;
    font-size: 0.88rem;
    line-height: 1.4;
    word-wrap: break-word;
    animation: kirky-bubble-in 0.2s ease-out;
}

@keyframes kirky-bubble-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.kirky-bubble-user {
    align-self: flex-end;
    background: var(--accent);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.kirky-bubble-kirky {
    align-self: flex-start;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-primary);
    border-bottom-left-radius: 4px;
}

.kirky-bubble-text {
    white-space: pre-wrap;
}

.kirky-welcome {
    background: linear-gradient(135deg, var(--accent-subtle), transparent);
    border-color: var(--accent);
}

.kirky-cards {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}

.kirky-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.12s;
}

.kirky-card:hover {
    border-color: var(--accent);
    background: var(--bg-card-hover);
    transform: translateX(3px);
}

.kirky-card-thumb {
    width: 48px;
    height: 36px;
    object-fit: cover;
    border-radius: 6px;
    background: var(--bg-card);
    flex-shrink: 0;
}

.kirky-card-thumb-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--accent), var(--accent-secondary));
}

.kirky-card-title {
    font-size: 0.82rem;
    color: var(--text-primary);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===== Kirky: quick-action chips under game cards ===== */
.kirky-quick-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}
.kirky-chip {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 0.75rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
    line-height: 1.2;
}
.kirky-chip:hover {
    background: var(--bg-card-hover);
    border-color: var(--accent);
    color: var(--text-primary);
    transform: translateY(-1px);
}
.kirky-chip:active {
    transform: translateY(0);
}

/* ===== Kirky: streaming cursor ===== */
.kirky-bubble-streaming .kirky-bubble-text::after {
    content: '▋';
    display: inline-block;
    margin-left: 2px;
    color: var(--accent);
    animation: kirky-caret 0.9s step-end infinite;
    vertical-align: baseline;
}
@keyframes kirky-caret {
    50% { opacity: 0; }
}

.kirky-typing-dots {
    display: inline-flex;
    gap: 4px;
    padding: 2px 4px;
}
.kirky-typing-dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--text-secondary);
    animation: kirky-typing 1.1s ease-in-out infinite;
}
.kirky-typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.kirky-typing-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes kirky-typing {
    0%, 100% { opacity: 0.3; transform: translateY(0); }
    50%      { opacity: 1;   transform: translateY(-2px); }
}

.kirky-form {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    padding: 10px;
    border-top: 1px solid var(--border);
    background: var(--bg-card);
}

.kirky-input {
    flex: 1;
    padding: 9px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 18px;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-family: inherit;
    resize: none;
    outline: none;
    max-height: 120px;
    line-height: 1.35;
    transition: border-color 0.15s;
}

.kirky-input:focus {
    border-color: var(--accent);
}

.kirky-send {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: var(--accent);
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    transition: filter 0.15s, transform 0.1s;
    flex-shrink: 0;
}

.kirky-send:hover { filter: brightness(1.15); }
.kirky-send:active { transform: scale(0.92); }

/* Mobile: fullscreen chat */
@media (max-width: 500px) {
    .kirky-trigger {
        width: 52px;
        height: 52px;
        bottom: 14px;
        right: 14px;
    }
    .kirky-panel {
        right: 0;
        bottom: 0;
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        border-radius: 0;
        border-left: none;
        border-right: none;
        border-bottom: none;
        max-width: none;
    }
    .kirky-input { font-size: 16px; }
    body.kirky-open {
        overflow: hidden;  /* lock page scroll when chat is open */
    }
}

/* ===== Recommender modal ===== */
.recommender-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 2.5rem 1rem;
    overflow-y: auto;
    animation: fadeIn 0.15s ease-out;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.recommender-modal {
    position: relative;
    width: 100%;
    max-width: 680px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
}

.recommender-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--text-secondary);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}

.recommender-close:hover {
    color: var(--text-primary);
    border-color: var(--text-secondary);
}

.recommender-header h2 {
    margin: 0 0 0.3rem;
    font-size: 1.3rem;
    color: var(--text-primary);
}

.recommender-header p {
    margin: 0 0 1rem;
    color: var(--text-secondary);
    font-size: 0.88rem;
    line-height: 1.45;
}

.recommender-form {
    display: flex;
    gap: 8px;
    margin-bottom: 0.8rem;
}

.recommender-input {
    flex: 1;
    padding: 12px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 1rem;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.recommender-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-subtle);
}

.recommender-submit {
    padding: 12px 22px;
    background: var(--accent);
    border: none;
    border-radius: var(--radius-sm);
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: filter 0.15s;
}

.recommender-submit:hover { filter: brightness(1.15); }

.recommender-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 4px 0 8px;
    padding: 6px 10px;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.recommender-ai-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
}

.recommender-ai-toggle input[type="checkbox"] {
    accent-color: var(--accent);
    width: 16px;
    height: 16px;
    margin: 0;
}

.recommender-source {
    display: inline-block;
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--bg-card-hover);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    margin-right: 8px;
    vertical-align: middle;
}

.recommender-source-ai {
    background: rgba(251, 191, 36, 0.15);
    border-color: rgba(251, 191, 36, 0.5);
    color: #fbbf24;
    font-weight: 700;
}

.recommender-source-fallback {
    background: rgba(234, 88, 12, 0.12);
    border-color: rgba(234, 88, 12, 0.4);
    color: #fb923c;
}

.recommender-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 1rem;
}

.recommender-chip {
    padding: 5px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-secondary);
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.12s;
}

.recommender-chip:hover {
    color: var(--text-primary);
    border-color: var(--accent);
    background: var(--accent-subtle);
}

.recommender-results {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.recommender-inferred {
    font-size: 0.78rem;
    color: var(--text-secondary);
    padding: 6px 10px;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    margin-bottom: 4px;
}

.recommender-inferred code {
    color: var(--accent);
    background: transparent;
    font-family: inherit;
    margin-right: 2px;
}

.recommender-loading,
.recommender-empty {
    padding: 1.2rem;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
}

.recommender-card {
    display: flex;
    gap: 12px;
    padding: 10px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: all 0.15s;
}

.recommender-card:hover {
    border-color: var(--accent);
    background: var(--bg-card-hover);
    transform: translateX(4px);
}

.recommender-thumb {
    width: 88px;
    height: 66px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    flex-shrink: 0;
}

.recommender-thumb-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--accent), var(--accent-secondary));
}

.recommender-card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
}

.recommender-card-title {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.recommender-card-tags {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.recommender-tag {
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    font-size: 0.68rem;
    color: var(--accent);
    padding: 1px 7px;
    background: var(--accent-subtle);
    border-radius: 999px;
}

.recommender-card-reason {
    font-size: 0.72rem;
    color: var(--text-secondary);
    font-style: italic;
}

@media (max-width: 600px) {
    .recommender-overlay { padding: 1rem 0.5rem; }
    .recommender-modal { padding: 1rem; }
    .recommender-header h2 { font-size: 1.1rem; }
    .recommender-form { flex-direction: column; }
    .recommender-input { font-size: 16px; }
    .recommender-submit { width: 100%; padding: 12px; }
    .recommender-thumb { width: 70px; height: 54px; }
    .recommender-card-title { font-size: 0.88rem; }
}

/* ===== PWA install button ===== */
.pwa-install-btn {
    background: var(--accent);
    border: none;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 7px 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: filter 0.15s;
}

.pwa-install-btn:hover { filter: brightness(1.15); }

@media (max-width: 480px) {
    .pwa-install-btn {
        font-size: 0.72rem;
        padding: 6px 9px;
    }
}

/* ===== Mobile category dropdown =====
   On phones the horizontal category strip gets unwieldy (20+ items of
   mixed lengths). Replace with a dropdown button that expands to a list
   of all categories. Hidden on desktop. */
.cat-dropdown-btn,
.cat-dropdown-panel {
    display: none;
}

.cat-dropdown-btn {
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.cat-dropdown-btn:hover,
.cat-dropdown-btn.is-open {
    border-color: var(--accent);
    background: var(--bg-card);
}

.cat-dropdown-label {
    flex: 1;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cat-dropdown-chevron {
    flex-shrink: 0;
    color: var(--text-secondary);
    transition: transform 0.2s;
}

.cat-dropdown-btn.is-open .cat-dropdown-chevron {
    transform: rotate(180deg);
}

.cat-dropdown-panel {
    /* display handled by the two rules below — base `display:none` wins on
       desktop, mobile media query flips to `display:grid` */
    position: absolute;
    left: 0;
    right: 0;
    margin-top: 6px;
    max-height: 60vh;
    max-height: 60dvh;
    overflow-y: auto;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
    z-index: 80;
    padding: 6px;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}

/* Respect the [hidden] HTML attribute even on mobile */
.cat-dropdown-panel[hidden] {
    display: none !important;
}

.cat-dropdown-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 8px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.12s;
}

.cat-dropdown-item:hover {
    border-color: var(--accent);
    background: var(--bg-card-hover);
}

.cat-dropdown-item.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* Color variants match the main-bar buttons */
.cat-dropdown-item-fav {
    color: #facc15;
    border-color: rgba(250, 204, 21, 0.35);
}
.cat-dropdown-item-fav.active {
    background: #facc15;
    border-color: #facc15;
    color: #000;
}
.cat-dropdown-item-popular {
    color: #fb923c;
}
.cat-dropdown-item-popular.active {
    background: linear-gradient(135deg, #f97316, #ef4444);
    border-color: #f97316;
}
.cat-dropdown-item-roms {
    color: #8b5cf6;
}
.cat-dropdown-item-roms.active {
    background: linear-gradient(135deg, #7c3aed, #2563eb);
    border-color: #7c3aed;
}

/* Activate the dropdown on mobile; hide the horizontal strip */
@media (max-width: 768px) {
    .categories {
        display: none !important;
    }
    .cat-dropdown-btn {
        display: flex;
    }
    .cat-dropdown-panel:not([hidden]) {
        display: grid;
    }
    .controls-row {
        position: relative; /* anchor for the dropdown panel */
    }
}

@media (max-width: 360px) {
    /* Super narrow: single column in the dropdown so long names fit */
    .cat-dropdown-panel {
        grid-template-columns: 1fr;
    }
}

/* ===== Continue Playing strip ===== */
.continue-playing {
    margin: 0 0 1.25rem;
}

.continue-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0.6rem;
    padding: 0 2px;
}

.section-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--accent);
}

.continue-clear {
    background: none;
    border: 1px solid transparent;
    color: var(--text-secondary);
    font-size: 0.72rem;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.15s;
}

.continue-clear:hover {
    color: var(--text-primary);
    border-color: var(--border);
}

.continue-strip {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(140px, 160px);
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 8px;
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}

.continue-strip::-webkit-scrollbar { height: 6px; }
.continue-strip::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}

.continue-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    text-decoration: none;
    transition: all 0.15s;
    scroll-snap-align: start;
}

.continue-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
    box-shadow: 0 4px 14px var(--accent-subtle);
}

.continue-thumb {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--bg-card-hover);
    display: block;
}

.continue-thumb-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-secondary);
    background: linear-gradient(135deg, var(--accent), var(--accent-secondary));
    color: #fff;
}

.continue-title {
    padding: 6px 8px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 768px) {
    .continue-strip {
        grid-auto-columns: minmax(120px, 140px);
    }
    .section-title {
        font-size: 0.9rem;
    }
}

.search-input:focus {
    border-color: var(--accent-purple);
    box-shadow: 0 0 0 3px var(--accent-purple-glow);
}

.search-input::placeholder {
    color: var(--text-secondary);
}

.controls-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.categories {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    flex: 1;
}

.game-count {
    color: var(--text-secondary);
    font-size: 0.85rem;
    white-space: nowrap;
}

.cat-btn {
    padding: 8px 18px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 50px;
    color: var(--text-secondary);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}

.cat-btn:hover {
    color: var(--text-primary);
    border-color: var(--accent-purple);
}

.cat-btn.active {
    background: var(--accent-purple);
    border-color: var(--accent-purple);
    color: #fff;
}

/* ===== Game Grid ===== */
.game-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

/* ===== Game Card ===== */
.game-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    display: block;
    position: relative;
}

.game-card:hover {
    transform: translateY(-3px);
    border-color: var(--accent-purple);
    box-shadow: 0 6px 20px var(--accent-purple-glow), 0 0 0 1px var(--accent-purple);
}

.card-thumbnail {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: var(--bg-secondary);
    display: block;
}

.card-thumbnail-placeholder {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, var(--bg-secondary) 0%, #1a1a2e 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-thumbnail-placeholder span {
    font-size: 2rem;
    font-weight: 800;
    color: var(--accent-purple);
    opacity: 0.5;
}

.card-body {
    padding: 0.8rem 1rem;
}

/* "NEW" badge on recently-added game cards. Sits on top of the thumbnail
   in the top-left corner. Auto-hides after 30 days via app.js check. */
.card-new-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    padding: 3px 8px;
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.8px;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.5);
    pointer-events: none;
    text-transform: uppercase;
}

.card-category {
    display: inline-block;
    padding: 2px 8px;
    background: var(--accent-subtle);
    color: var(--accent-purple);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.4rem;
}

.card-title {
    font-size: 0.95rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===== Favorite Button on Cards ===== */
.fav-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 32px;
    height: 32px;
    background: rgba(0, 0, 0, 0.6);
    border: none;
    border-radius: 50%;
    color: var(--text-secondary);
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    z-index: 2;
    backdrop-filter: blur(4px);
    line-height: 1;
}

.fav-btn:hover {
    background: rgba(0, 0, 0, 0.8);
    color: #facc15;
    transform: scale(1.15);
}

.fav-btn.fav-active {
    color: #facc15;
}

/* ===== Favorites Category Button ===== */
.cat-btn-fav {
    color: #facc15;
    border-color: rgba(250, 204, 21, 0.3);
}

.cat-btn-fav:hover {
    border-color: #facc15;
}

.cat-btn-fav.active {
    background: #facc15;
    border-color: #facc15;
    color: #000;
}

/* ===== Popular Category Button ===== */
.cat-btn-popular {
    color: #fb923c;
    border-color: rgba(251, 146, 60, 0.4);
}

.cat-btn-popular:hover {
    border-color: #fb923c;
}

.cat-btn-popular.active {
    background: linear-gradient(135deg, #f97316, #ef4444);
    border-color: #f97316;
    color: #fff;
}

/* ===== ROMs Category Button ===== */
.cat-btn-roms {
    color: #8b5cf6;
    border-color: rgba(139, 92, 246, 0.4);
}

.cat-btn-roms:hover {
    border-color: #8b5cf6;
}

.cat-btn-roms.active {
    background: linear-gradient(135deg, #7c3aed, #2563eb);
    border-color: #7c3aed;
    color: #fff;
}

/* ===== ROM Sub-tab Bar =====
   Appears below the main category row only when the ROMs tab is active.
   Scrollable horizontally on mobile. */
.rom-subbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 12px;
    margin-bottom: 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.rom-sub-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.rom-sub-btn:hover {
    color: var(--text-primary);
    border-color: var(--accent);
}

.rom-sub-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.rom-sub-count {
    font-size: 0.72rem;
    font-weight: 500;
    opacity: 0.7;
    padding: 2px 6px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    min-width: 24px;
    text-align: center;
}

.rom-sub-btn.active .rom-sub-count {
    background: rgba(255, 255, 255, 0.2);
}

/* ===== Favorite on Player Page ===== */
.fav-btn-player {
    font-size: 1.2rem;
    color: var(--text-secondary);
}

.fav-btn-player.fav-active {
    color: #facc15;
    border-color: rgba(250, 204, 21, 0.4);
}

/* ===== Info Button on Cards ===== */
.info-btn {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 32px;
    height: 32px;
    background: rgba(0, 0, 0, 0.6);
    border: none;
    border-radius: 50%;
    color: var(--text-secondary);
    font-size: 1.3rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    z-index: 2;
    backdrop-filter: blur(4px);
    line-height: 1;
}

.info-btn:hover {
    background: rgba(0, 0, 0, 0.8);
    color: var(--accent-secondary);
    transform: scale(1.15);
}

/* ===== Game Info Modal ===== */
.game-info-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(6px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: fadeIn 0.2s;
}

.game-info-modal {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    max-width: 480px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    padding: 0 1.5rem 1.5rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.game-info-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 1.4rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: background 0.2s;
}

.game-info-close:hover {
    background: rgba(255, 0, 0, 0.6);
}

.game-info-thumb {
    width: 100%;
    border-radius: 12px;
    margin-top: 1.5rem;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.game-info-title {
    font-size: 1.4rem;
    color: var(--text-primary);
    margin: 1rem 0 0.4rem;
}

.game-info-category {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent-secondary);
    background: rgba(6, 182, 212, 0.1);
    padding: 0.2em 0.7em;
    border-radius: 999px;
    margin-bottom: 0.8rem;
}

.game-info-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 0.6rem 0 0.2rem;
}

.game-info-tag {
    padding: 4px 10px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.12s;
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
}

.game-info-tag:hover {
    color: var(--text-primary);
    background: var(--accent-subtle);
    border-color: var(--accent);
}

.game-info-desc {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0.8rem 0 1.2rem;
}

.game-info-play {
    display: inline-block;
    padding: 0.7em 2em;
    background: var(--accent);
    color: #fff;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    transition: opacity 0.2s;
}

.game-info-play:hover {
    opacity: 0.85;
}

/* ===== Empty State ===== */
.empty-state {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--text-secondary);
    font-size: 1.1rem;
}

/* ===== Footer ===== */
.footer {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 2rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
    border-top: 1px solid var(--border);
    margin-top: 3rem;
}

.footer code {
    background: var(--bg-secondary);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    color: var(--accent-cyan);
}

/* ===== Player Page ===== */
.player-body {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

.player-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    transition: color 0.2s, background 0.2s;
    white-space: nowrap;
}

.back-btn:hover {
    color: var(--text-primary);
    background: rgba(255,255,255,0.05);
}

.player-info {
    flex: 1;
    min-width: 0;
}

.player-info h1 {
    font-size: 1.1rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.player-category {
    display: inline-block;
    padding: 2px 8px;
    background: var(--accent-subtle);
    color: var(--accent-purple);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.player-actions {
    display: flex;
    gap: 0.5rem;
}

.fullscreen-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.fullscreen-btn:hover {
    color: var(--text-primary);
    border-color: var(--accent-cyan);
    box-shadow: 0 0 12px var(--accent-cyan-glow);
}

.player-container {
    flex: 1;
    position: relative;
    background: #000;
}

.game-frame {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

.game-loading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    background: var(--bg-primary);
    color: var(--text-secondary);
    z-index: 10;
    transition: opacity 0.3s;
}

.game-loading.hidden {
    opacity: 0;
    pointer-events: none;
}

.loader {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border);
    border-top-color: var(--accent-purple);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ===== Game Error State ===== */
.game-error {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background: var(--bg-primary);
    color: var(--text-secondary);
    z-index: 11;
    text-align: center;
    padding: 2rem;
}

.game-error p:first-child {
    font-size: 1.1rem;
    color: var(--text-primary);
}

.error-detail {
    font-size: 0.85rem;
    max-width: 400px;
}

.error-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.retry-btn {
    padding: 8px 20px;
    background: var(--accent-purple);
    border: none;
    border-radius: var(--radius-sm);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}

.retry-btn.secondary {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    color: var(--text-secondary);
}

.retry-btn:hover {
    opacity: 0.85;
}

/* ===== Tab Bar ===== */
.tab-bar {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.tab-btn {
    padding: 10px 24px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 50px;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.tab-btn:hover {
    color: var(--text-primary);
    border-color: var(--accent-purple);
}

.tab-btn.active {
    background: var(--accent-purple);
    border-color: var(--accent-purple);
    color: #fff;
}

.tab-btn-ban {
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.3);
}

.tab-btn-ban:hover {
    border-color: #ef4444;
}

.tab-btn-ban.active {
    background: #ef4444;
    border-color: #ef4444;
    color: #fff;
}

.ban-view-title {
    font-size: 1.1rem;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

/* ===== Users View ===== */
.users-panel {
    max-width: 700px;
    margin: 0 auto;
}

.users-loading {
    text-align: center;
    color: var(--text-secondary);
    padding: 3rem;
}

.users-admin-bar {
    margin-bottom: 1rem;
    text-align: right;
}

.manage-roles-btn {
    padding: 8px 18px;
    background: var(--accent-purple);
    border: none;
    border-radius: var(--radius-sm);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
}

.manage-roles-btn:hover {
    opacity: 0.85;
}

.users-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.user-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.user-row-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.user-row-name {
    color: var(--accent-cyan);
    font-weight: 600;
    font-size: 0.9rem;
}

.role-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 50px;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.role-badge-admin {
    background: linear-gradient(135deg, #f59e0b, #ef4444);
}

.role-badge-banned {
    background: #ef4444;
}

.user-row-banned {
    opacity: 0.5;
}

.ban-user-btn {
    padding: 4px 12px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
}

.ban-user-btn:hover {
    border-color: #ef4444;
    color: #ef4444;
}

.ban-user-btn.banned {
    border-color: #22c55e;
    color: #22c55e;
}

.ban-user-btn.banned:hover {
    background: rgba(34, 197, 94, 0.1);
}

.assign-role-btn {
    width: 22px;
    height: 22px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.assign-role-btn:hover {
    border-color: var(--accent-purple);
    color: var(--text-primary);
    background: var(--accent-subtle);
}

/* ===== Modal ===== */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 5000;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.modal-box {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2rem;
    max-width: 500px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.modal-header h2 {
    font-size: 1.1rem;
    font-weight: 700;
}

.modal-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
}

.modal-close:hover {
    color: var(--text-primary);
}

/* ===== Role Management ===== */
.role-form {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.role-form-row {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.role-color-input {
    width: 48px;
    height: 38px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    cursor: pointer;
    padding: 2px;
}

.role-list-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.role-priority {
    color: var(--text-secondary);
    font-size: 0.75rem;
    flex: 1;
}

.role-edit-btn,
.role-delete-btn {
    padding: 4px 10px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.2s;
}

.role-edit-btn:hover {
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
}

.role-delete-btn:hover {
    border-color: #ef4444;
    color: #ef4444;
}

.role-checks {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.role-check-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    padding: 6px 0;
}

.role-check-label input[type="checkbox"] {
    accent-color: var(--accent-purple);
    width: 16px;
    height: 16px;
}

.text-muted {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

/* ===== Gallery View ===== */
.gallery-panel {
    max-width: 100%;
}

.gallery-toolbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.gallery-note {
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-style: italic;
}

.gallery-upload-btn {
    padding: 10px 22px;
    background: var(--accent-purple);
    border: none;
    border-radius: var(--radius-sm);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
}

.gallery-upload-btn:hover {
    opacity: 0.85;
}

.upload-progress {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 6px 12px;
    max-width: 300px;
}

.upload-progress-bar {
    height: 6px;
    background: var(--accent-cyan);
    border-radius: 3px;
    width: 0%;
    transition: width 0.2s;
    flex: 1;
}

#uploadText {
    color: var(--text-secondary);
    font-size: 0.8rem;
    white-space: nowrap;
}

.gallery-empty {
    text-align: center;
    color: var(--text-secondary);
    padding: 3rem;
    font-size: 1rem;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

.gallery-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform 0.2s, border-color 0.2s;
}

.gallery-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent-cyan);
}

.gallery-card-pending {
    opacity: 0.7;
    border-color: #f59e0b;
}

.gallery-card-img-wrap {
    position: relative;
}

.gallery-card-img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
    cursor: pointer;
}

.gallery-pending-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-pending-overlay span {
    padding: 6px 16px;
    background: #f59e0b;
    color: #000;
    font-size: 0.8rem;
    font-weight: 700;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.gallery-pin-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: var(--text-secondary);
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    z-index: 2;
    opacity: 0;
}

.gallery-card:hover .gallery-pin-btn {
    opacity: 1;
}

.gallery-pin-btn.pinned {
    opacity: 1;
    background: var(--accent-purple);
    color: #fff;
}

.gallery-pin-btn:hover {
    opacity: 1;
    background: var(--accent-purple);
    color: #fff;
}

.gallery-expiry-pinned {
    color: var(--accent-purple);
    background: var(--accent-subtle);
}

.gallery-card-info {
    padding: 0.6rem 0.8rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.gallery-expiry {
    font-size: 0.65rem;
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
    padding: 1px 6px;
    border-radius: 4px;
}

.gallery-card-user {
    color: var(--accent-cyan);
    font-size: 0.8rem;
    font-weight: 600;
}

.gallery-card-actions {
    display: flex;
    gap: 0.35rem;
}

.gallery-approve-btn,
.gallery-reject-btn,
.gallery-delete-btn {
    padding: 3px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.7rem;
    cursor: pointer;
    background: transparent;
    transition: all 0.2s;
}

.gallery-approve-btn {
    color: #22c55e;
    border-color: rgba(34, 197, 94, 0.3);
}

.gallery-approve-btn:hover {
    background: #22c55e;
    color: #fff;
}

.gallery-reject-btn {
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.3);
}

.gallery-reject-btn:hover {
    background: #ef4444;
    color: #fff;
}

.gallery-delete-btn {
    color: var(--text-secondary);
}

.gallery-delete-btn:hover {
    border-color: #ef4444;
    color: #ef4444;
}

/* ===== Lightbox ===== */
.lightbox-overlay {
    position: fixed;
    inset: 0;
    z-index: 6000;
    background: rgba(0, 0, 0, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 2rem;
}

.lightbox-overlay img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: var(--radius);
}

/* ===== Chat ===== */
.chat-panel {
    max-width: 700px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 220px);
    min-height: 300px;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-secondary);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.chat-empty {
    color: var(--text-secondary);
    text-align: center;
    margin: auto;
    font-size: 0.9rem;
}

.chat-msg {
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    max-width: 85%;
}

.chat-msg-self {
    align-self: flex-end;
    background: var(--chat-self-bg);
    border: 1px solid var(--chat-self-border);
}

.chat-msg-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.2rem;
}

.chat-msg-user {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--accent-cyan);
}

.chat-msg-user-admin {
    color: #f59e0b;
}

.chat-admin-badge,
.chat-role-badge {
    font-size: 0.55rem;
    padding: 1px 4px;
    border-radius: 3px;
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    margin-left: 3px;
}

.chat-admin-badge {
    background: linear-gradient(135deg, #f59e0b, #ef4444);
}

.chat-msg-time {
    font-size: 0.65rem;
    color: var(--text-secondary);
    margin-left: auto;
}

.chat-delete-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0 4px;
    opacity: 0;
    transition: opacity 0.2s;
}

.chat-msg:hover .chat-delete-btn {
    opacity: 1;
}

.chat-delete-btn:hover {
    color: #ef4444;
}

.chat-msg-text {
    font-size: 0.85rem;
    color: var(--text-primary);
    word-break: break-word;
    line-height: 1.4;
}

.chat-input-bar {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    position: relative;
}

.chat-input {
    flex: 1;
    padding: 0.6rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.85rem;
    outline: none;
    transition: border-color 0.2s;
}

.chat-input:focus {
    border-color: var(--accent-purple);
}

.chat-send-btn {
    padding: 0.6rem 1.2rem;
    background: var(--accent-purple);
    border: none;
    border-radius: var(--radius-sm);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.chat-send-btn:hover {
    background: #6d28d9;
}

.chat-header-bar {
    display: flex;
    justify-content: flex-end;
    padding: 0.5rem 0.75rem 0;
    min-height: 0;
}

.chat-header-bar:empty {
    display: none;
}

.emoji-manage-btn {
    padding: 0.3rem 0.8rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.75rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.emoji-manage-btn:hover {
    background: var(--accent-purple);
    color: #fff;
}

/* ===== Emoji Inline ===== */
.emoji-inline {
    height: 1.5em;
    width: 1.5em;
    vertical-align: middle;
    object-fit: contain;
    margin: 0 1px;
}

.emoji-inline.emoji-jumbo {
    height: 7.5em;
    width: 7.5em;
}

/* ===== Emoji Picker ===== */
.emoji-picker-btn {
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0.4rem 0.5rem;
    line-height: 1;
    transition: background 0.2s;
}

.emoji-picker-btn:hover {
    background: var(--bg-card);
}

.emoji-picker-popup {
    position: absolute;
    bottom: 100%;
    right: 0;
    margin-bottom: 0.5rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.5rem;
    z-index: 1000;
    max-width: 280px;
    max-height: 200px;
    overflow-y: auto;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

/* Portal variant: body-appended, fixed position (set inline by JS). Used
   when the picker opens inside a modal or other overflow-clipped container
   where the absolute-positioned default would get hidden. */
.emoji-picker-popup.emoji-picker-popup-portal {
    position: fixed;
    bottom: auto;
    right: auto;
    margin: 0;
    z-index: 6000;    /* above modal-overlay (5000) */
    width: 280px;
}

.emoji-picker-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
}

.emoji-picker-item {
    background: none;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s;
}

.emoji-picker-item img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.emoji-picker-item:hover {
    background: var(--bg-card);
    border-color: var(--border);
}

/* ===== Emoji Management Modal ===== */
.emoji-upload-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.emoji-upload-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.emoji-file-label {
    color: var(--text-secondary);
    font-size: 0.8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.emoji-preview-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.emoji-preview-img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
}

.emoji-manage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.5rem;
}

.emoji-manage-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    position: relative;
}

.emoji-manage-item img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    flex-shrink: 0;
}

.emoji-manage-name {
    font-size: 0.7rem;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.emoji-delete-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
    transition: color 0.2s;
}

.emoji-delete-btn:hover {
    color: #ef4444;
}

/* ===== Admin custom tags =====
   Reuses the emoji modal aesthetic (file picker + grid) but with chip-style
   previews so admins can see how tags will look once applied. Image tags
   render as a 1.1em <img> inline; text tags fall back to `#name`. */

.manage-tags-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.7rem;
    margin-right: 0.6rem;
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.manage-tags-btn:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.custom-tag-img {
    height: 1.1em;
    width: auto;
    max-height: 18px;
    vertical-align: middle;
    margin-right: 0.25em;
    border-radius: 3px;
    object-fit: contain;
}

/* In active filter pills, give the image a hair more breathing room. */
.active-tag-pill .custom-tag-img {
    margin-right: 0.3em;
}

/* In game-info modal tag pills, support inline image+text. */
.game-info-tag .custom-tag-img {
    height: 16px;
    margin-right: 0.3em;
}

.game-info-edit-tags {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.5rem;
    padding: 0.4rem 0.8rem;
    background: var(--bg-card);
    color: var(--text-secondary);
    border: 1px dashed var(--border);
    border-radius: 6px;
    font-size: 0.8rem;
    cursor: pointer;
    align-self: flex-start;
    transition: color 0.15s, border-color 0.15s;
}
.game-info-edit-tags:hover {
    color: var(--accent);
    border-color: var(--accent);
}

.custom-tag-create-form {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 0.6rem 0 1rem;
    padding: 0.8rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.custom-tag-upload-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.custom-tag-file-label {
    color: var(--text-secondary);
    font-size: 0.82rem;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.custom-tag-file-clear {
    background: none;
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-secondary);
    font-size: 1rem;
    padding: 0 0.4rem;
    line-height: 1;
    cursor: pointer;
}
.custom-tag-file-clear:hover { color: #ef4444; border-color: #ef4444; }

.custom-tag-preview-row {
    display: flex;
    justify-content: center;
    padding: 0.4rem 0;
}
.custom-tag-preview-img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    border-radius: 6px;
    background: var(--bg-secondary);
    padding: 4px;
}

.custom-tag-manage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.5rem;
    max-height: 50vh;
    overflow-y: auto;
}

.custom-tag-manage-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.6rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
}

.custom-tag-manage-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.15rem 0.45rem;
    background: var(--bg-secondary);
    border-radius: 999px;
    font-size: 0.78rem;
    flex-shrink: 0;
}
.custom-tag-manage-chip .custom-tag-img { height: 16px; margin-right: 2px; }
.custom-tag-text { color: var(--text-primary); }

.custom-tag-manage-name {
    flex: 1;
    color: var(--text-primary);
    font-size: 0.78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.custom-tag-delete-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.05rem;
    cursor: pointer;
    padding: 0 0.25rem;
    line-height: 1;
    transition: color 0.15s;
}
.custom-tag-delete-btn:hover { color: #ef4444; }

/* Per-game apply modal — toggle chips for every available custom tag. */
.apply-tags-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    max-height: 60vh;
    overflow-y: auto;
}

.apply-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0.75rem;
    background: var(--bg-card);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 0.82rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.05s;
}
.apply-tag-chip:hover {
    color: var(--text-primary);
    border-color: var(--accent);
}
.apply-tag-chip:active { transform: scale(0.97); }
.apply-tag-chip.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.apply-tag-chip .custom-tag-img { height: 18px; }

@media (max-width: 600px) {
    .custom-tag-manage-grid {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    }
    .apply-tag-chip { font-size: 0.75rem; padding: 0.3rem 0.6rem; }
}

/* ===== Theme Picker ===== */
.theme-picker-wrapper {
    position: relative;
}

.theme-picker-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.theme-picker-btn:hover {
    color: var(--accent);
    border-color: var(--accent);
}

.theme-picker-popup {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.5rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.5rem;
    z-index: 300;
    width: 320px;
    max-height: 80vh;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
}

/* ----- Tabs ----- */
.theme-tabs {
    display: flex;
    gap: 2px;
    padding: 2px;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    margin-bottom: 0.5rem;
    flex-shrink: 0;
}

.theme-tab {
    flex: 1;
    padding: 6px 2px;
    background: none;
    border: none;
    border-radius: calc(var(--radius-sm) - 2px);
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.theme-tab:hover {
    color: var(--text-primary);
}

.theme-tab.active {
    background: var(--accent);
    color: #fff;
}

/* ----- Panels ----- */
.theme-panel {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.theme-hint {
    font-size: 0.7rem;
    color: var(--text-secondary);
    line-height: 1.4;
    padding: 2px 4px 6px;
}

/* ----- Colors grid ----- */
.theme-color-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}

.theme-color-item {
    padding: 6px 8px !important;
}

.theme-color-item .theme-swatch {
    width: 16px;
    height: 16px;
}

.theme-color-item .theme-label {
    font-size: 0.78rem;
}

/* ----- Fit mode selector ----- */
.theme-fit-group {
    padding: 8px;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.theme-fit-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    width: 40px;
    flex-shrink: 0;
}

.theme-fit-buttons {
    display: flex;
    gap: 3px;
    flex: 1;
}

.theme-fit-btn {
    flex: 1;
    padding: 4px 6px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.7rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.theme-fit-btn:hover {
    color: var(--text-primary);
    border-color: var(--accent);
}

.theme-fit-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* ----- Sliders ----- */
.theme-sliders {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    margin-top: 4px;
}

.theme-slider-row {
    display: grid;
    grid-template-columns: 50px 1fr 36px;
    align-items: center;
    gap: 8px;
}

.theme-slider-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 600;
}

.theme-slider-row input[type="range"] {
    width: 100%;
    accent-color: var(--accent);
    margin: 0;
}

.theme-slider-value {
    font-size: 0.7rem;
    color: var(--text-secondary);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ----- Border presets ----- */
.theme-border-presets {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}

.theme-border-preset {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    text-align: left;
    transition: all 0.15s;
}

.theme-border-preset:hover {
    color: var(--text-primary);
    background: var(--bg-card);
}

.theme-border-preset.active {
    border-color: var(--accent);
    color: var(--text-primary);
}

.theme-border-swatch {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.theme-border-swatch-default {
    background: repeating-linear-gradient(
        45deg,
        #888, #888 2px,
        #444 2px, #444 4px
    );
}

.theme-border-preset-label {
    font-size: 0.72rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.theme-border-custom-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    margin-top: 4px;
}

.theme-border-custom-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.theme-border-color-input {
    flex: 1;
    height: 32px;
    padding: 0;
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.theme-border-color-input::-webkit-color-swatch-wrapper {
    padding: 3px;
}

.theme-border-color-input::-webkit-color-swatch {
    border: none;
    border-radius: 4px;
}

/* ----- Search box ----- */
.theme-search-wrap {
    margin-bottom: 4px;
}

.theme-search-input {
    width: 100%;
    padding: 6px 10px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.8rem;
    outline: none;
    transition: border-color 0.15s;
}

.theme-search-input:focus {
    border-color: var(--accent);
}

.theme-picker-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 8px 12px;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s;
}

.theme-picker-item:hover {
    background: var(--bg-card);
    color: var(--text-primary);
}

.theme-picker-item.active {
    border-color: var(--accent);
    color: var(--text-primary);
}

.theme-swatch {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 2px solid var(--border);
}

.theme-picker-item.active .theme-swatch {
    border-color: var(--accent);
}

.theme-label {
    font-weight: 600;
}

/* ===== Custom Wallpaper =====
   Fixed-position layer behind all UI chrome. The image uses cover/contain/fill
   modes set via a data attribute on <body>. Fallback dark color fills any
   uncovered area for 'contain' mode. */
#custom-wallpaper {
    position: fixed;
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
    /* Dynamic viewport so mobile URL-bar collapse/expand doesn't cause jumps */
    height: 100dvh;
    z-index: -2;
    /* Two layers: the image is sized `contain` (first listed = topmost) and
       the generated gradient fills the viewport as the base color. Both are
       set together by applyWallpaper() in themes.js. */
    background-repeat: no-repeat, no-repeat;
    background-position: center center, center center;
    background-size: contain, 100% 100%;
    background-color: #000;
    display: none;
    pointer-events: none;
}

/* Fit modes toggled via [data-wallpaper-fit] on <body>. 'cover' now keeps
   the same contained layout as 'contain' by default since the whole point
   of the new design is that the image shows whole + gradient fills gaps.
   Fill and tile still behave traditionally. */
body[data-wallpaper-fit="cover"] #custom-wallpaper {
    /* Cover crops the image to fill the screen — the edge gradient becomes
       irrelevant but we leave it as a fallback color in case the image fails
       to load. */
    background-size: cover, 100% 100%;
}
body[data-wallpaper-fit="fill"] #custom-wallpaper {
    background-size: 100% 100%, 100% 100%;
}
body[data-wallpaper-fit="tile"] #custom-wallpaper {
    background-size: auto, 100% 100%;
    background-repeat: repeat, no-repeat;
}

#custom-wallpaper-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    z-index: -1;
    display: none;
    pointer-events: none;
    transition: background 0.25s ease-out;
}

body.has-wallpaper::before {
    background-image: none;
}

/* Content legibility without backdrop-filter — previously every has-wallpaper
   element had a blur() backdrop applied, which forced the browser to
   re-composite a blur pass over huge areas (header, .main, .login-gate) on
   every scroll and repaint. That's what was making the site crawl with a
   wallpaper set. Replaced with opaque-enough semi-transparent backgrounds
   that don't require GPU compositing. */
body.has-wallpaper .header {
    background: linear-gradient(180deg, rgba(10, 10, 15, 0.85) 0%, rgba(10, 10, 15, 0.55) 100%);
}

body.has-wallpaper .login-gate {
    background: rgba(10, 10, 15, 0.9);
}

/* Inputs need legible text background over wallpaper */
body.has-wallpaper input,
body.has-wallpaper textarea,
body.has-wallpaper select {
    background-color: rgba(10, 10, 15, 0.75);
}

/* ===== User-customizable border width =====
   Overrides the hard-coded 1px borders on the most prominent elements so the
   Width slider in the Borders tab takes effect. */
.game-card,
.cat-btn,
.tab-btn,
.chat-container,
.theme-picker-btn,
.theme-picker-popup,
.theme-picker-item,
.theme-fit-btn,
.theme-border-preset,
.auth-btn,
.retry-btn,
.user-card,
.gallery-card,
.game-info-panel,
.search-input,
.chat-input,
.login-gate-box,
.login-form input {
    border-width: var(--border-width);
}

/* ===== Smooth theme transitions =====
   Class applied for ~400ms whenever the theme switches. Keeps normal
   interactions snappy but gives a satisfying fade between themes. */
body.theme-transitioning,
body.theme-transitioning * {
    transition: background-color 0.3s ease,
                color 0.3s ease,
                border-color 0.3s ease,
                box-shadow 0.3s ease !important;
}

.theme-picker-divider {
    height: 1px;
    background: var(--border);
    margin: 4px 0;
}

.theme-swatch-custom {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #374151, #6b7280) !important;
    color: #e5e7eb;
}

.theme-custom-actions {
    display: flex;
    gap: 4px;
    margin-top: 4px;
}

.theme-picker-action-btn {
    flex: 1;
    padding: 5px 8px;
    background: none;
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.15s;
}

.theme-picker-action-btn:hover {
    border-color: var(--accent);
    color: var(--text-primary);
}

.theme-picker-publish-btn {
    border-style: solid;
    border-color: var(--accent);
    color: var(--accent);
}

.theme-picker-publish-btn:hover {
    background: var(--accent);
    color: #fff;
}

.theme-community-header {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 12px 2px;
}

.theme-community-list {
    max-height: 200px;
    overflow-y: auto;
}

.theme-community-loading,
.theme-community-empty {
    padding: 12px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.theme-community-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.15s;
    border: 1px solid transparent;
}

.theme-community-item:hover {
    background: var(--bg-card);
}

.theme-community-item.active {
    border-color: var(--accent);
}

.theme-community-thumb {
    width: 36px;
    height: 24px;
    border-radius: 4px;
    background-size: cover;
    background-position: center;
    background-color: var(--bg-card);
    flex-shrink: 0;
    border: 1px solid var(--border);
}

.theme-community-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.theme-community-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.theme-community-author {
    font-size: 0.65rem;
    color: var(--text-secondary);
}

.theme-community-delete {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    flex-shrink: 0;
    transition: color 0.15s;
}

.theme-community-delete:hover {
    color: #ef4444;
}

/* Light theme overrides */
[data-theme="light"] .fav-btn {
    background: rgba(255, 255, 255, 0.8);
}

[data-theme="light"] .fav-btn:hover {
    background: rgba(255, 255, 255, 0.95);
}

[data-theme="light"] .chat-send-btn:hover {
    background: #6d28d9;
}

/* ===== Light theme contrast fixes ===== */
[data-theme="light"] body {
    background-color: var(--bg-primary);
}

[data-theme="light"] .card-thumbnail-placeholder {
    background: linear-gradient(135deg, #e0e0ea, #d0d0dc);
    color: #7c3aed;
}

[data-theme="light"] .game-card {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .game-card:hover {
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.15);
}

[data-theme="light"] .header {
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .theme-picker-popup {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .chat-msg-self {
    color: #1a1a2e;
}

[data-theme="light"] .chat-msg-other {
    background: #f0f0f5;
}

/* ===== OLED-specific ===== */
[data-theme="oled"] .game-card {
    border: 1px solid var(--border);
}

[data-theme="oled"] .header {
    border-bottom: 1px solid var(--border);
}

/* ===== Synthwave-specific glow ===== */
[data-theme="synthwave"] .logo h1 {
    text-shadow: 0 0 20px var(--accent-glow);
}

[data-theme="synthwave"] .cat-btn.active {
    box-shadow: 0 0 12px var(--accent-glow);
}

/* ===== Responsive ===== */
/* Auth area in player header */
.player-actions .auth-area {
    position: relative;
    top: auto;
    right: auto;
}

/* ===== Mobile (tablet + phone, <= 768px) ===== */
@media (max-width: 768px) {
    .header {
        padding: 1rem 0.75rem 0.9rem;
        padding-top: max(1rem, env(safe-area-inset-top));
        /* Kill desktop centering so absolute children don't get
           visually centered while flex children sit left-aligned */
        text-align: left;
    }

    /* Proper flex layout on mobile: logo at top, controls below.
       Prevents the overlap of absolute-positioned theme picker +
       auth area that was happening on the previous layout. */
    .header-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.65rem;
    }

    .header-logo {
        height: 32px;
    }

    /* Controls row: theme picker button + auth area side-by-side
       in document flow (no more absolute positioning collisions) */
    .header-content .theme-picker-wrapper {
        position: relative;
        top: auto;
        right: auto;
        z-index: 200;
    }

    .logo h1 {
        font-size: 1.8rem;
        letter-spacing: 4px;
    }

    .main {
        padding: 0.9rem 0.75rem;
    }

    /* Category bar: horizontal scroll instead of wrapping to 3+ lines */
    .categories {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 6px;
        padding-bottom: 4px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
    }
    .categories::-webkit-scrollbar { display: none; }
    .cat-btn {
        flex: 0 0 auto;
        padding: 7px 13px;
        font-size: 0.82rem;
        scroll-snap-align: start;
    }

    /* ROM sub-bar: also horizontal-scroll on phones */
    .rom-subbar {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        padding: 8px 10px;
    }
    .rom-subbar::-webkit-scrollbar { display: none; }
    .rom-sub-btn {
        flex: 0 0 auto;
    }

    .controls-row {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .game-count {
        text-align: right;
    }

    /* Tab bar: sticky + horizontal scroll for many tabs. The partial
       visibility of a tab at the edge is itself the cue that it scrolls;
       we had a fade-mask here but it clipped the visible tabs and looked
       worse than just showing them clean. */
    .tab-bar {
        position: sticky;
        top: 0;
        z-index: 50;
        background: var(--bg-primary);
        padding: 0.5rem 0.75rem;
        margin: 0 -0.75rem;
        display: flex;
        /* IMPORTANT: override base .tab-bar { justify-content: center }.
           Centering an overflowing flex row hides the edge tabs (Games on
           the left, Cheats on the right) because the content is pushed
           past both edges equally. flex-start anchors Games visible first
           and users scroll right to see the rest. */
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 6px;
        scrollbar-width: none;
        border-bottom: 1px solid var(--border);
        /* Momentum scrolling on iOS + snap-start so tabs "click" into place */
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        scroll-padding-left: 0.75rem;
    }
    .tab-bar::-webkit-scrollbar { display: none; }
    .tab-btn {
        flex: 0 0 auto;
        padding: 10px 18px;
        font-size: 0.9rem;
        min-height: 44px;
        scroll-snap-align: start;
    }

    /* Touch-friendly game grid: 2 columns on small tablets */
    .game-grid {
        grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
        gap: 0.6rem;
    }

    .card-body {
        padding: 8px 10px;
    }

    .card-title {
        font-size: 0.85rem;
    }

    .fav-btn, .info-btn {
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }

    /* Player page */
    .player-header {
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0.5rem 0.75rem;
        padding-top: max(0.5rem, env(safe-area-inset-top));
    }
    .player-info h1 {
        font-size: 0.95rem;
    }
    .player-actions {
        gap: 6px;
    }

    /* Auth area: normal flow (no longer absolute). Sits centered in
       the header column, its inner row wraps onto 2 lines if needed. */
    .auth-area {
        position: relative;
        top: auto;
        right: auto;
        display: flex;
        justify-content: center;
        width: 100%;
        max-width: 100%;
        text-align: center;
    }
    /* Inner row rendered by auth.js. Let it wrap when too wide instead
       of being clipped by a nowrap overflow. */
    .auth-user-info {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 8px;
        max-width: 100%;
    }
    .auth-user-info > * {
        flex: 0 0 auto;
        /* Just in case a child stretches on some setup */
        max-width: 100%;
    }

    /* Theme picker popup: constrained to viewport, properly bounded so
       it can't span the whole left side of the screen like it was. */
    .theme-picker-popup {
        position: absolute;
        /* Anchor to the button, not to the wrapper's right edge */
        top: calc(100% + 4px);
        right: 0;
        left: auto;
        width: calc(100vw - 24px);
        max-width: 320px;
        /* Hard-cap height so it can't overrun the screen */
        max-height: 70dvh;
        overflow-y: auto;
    }

    /* Chat stays usable on mobile */
    .chat-container {
        height: calc(100vh - 180px);
        height: calc(100dvh - 180px);
    }
    .chat-input-bar {
        gap: 6px;
        /* Safe-area bottom so iPhone home indicator doesn't overlap */
        padding-bottom: env(safe-area-inset-bottom);
    }
    .chat-input {
        padding: 10px 12px;
        font-size: 16px; /* prevent iOS zoom */
    }
    .chat-send-btn {
        padding: 10px 16px;
        font-size: 0.9rem;
    }
    .chat-msg-text {
        font-size: 0.9rem;
    }
    .chat-msg-user {
        font-size: 0.85rem;
    }

    /* Active users panel more compact */
    .active-users-bar {
        padding: 10px 14px;
        font-size: 0.88rem;
    }
    .active-users-panel {
        padding: 0.4rem 0.6rem;
        max-height: 260px;
    }
    .active-users-row {
        padding: 10px 6px;
        gap: 6px;
        font-size: 0.88rem;
    }
    .active-users-playing, .active-users-idle {
        flex: 1 1 100%;
        padding-left: 14px;
    }

    /* Profile modal shrinks */
    .profile-modal-overlay {
        padding: 0.5rem;
    }

    /* Game info modal takes most of the screen */
    .game-info-overlay {
        padding: 0.5rem;
    }
    .game-info-modal {
        max-width: calc(100vw - 1rem);
        padding: 1rem;
    }
    .game-info-title {
        font-size: 1.2rem;
    }

    /* Users view: more breathable rows + larger badges */
    .user-row {
        padding: 10px 12px;
        gap: 8px;
    }
    .user-row-name {
        font-size: 0.95rem;
    }
    .assign-role-btn,
    .ban-user-btn {
        min-height: 36px;
        padding: 6px 10px;
    }

    /* Theme picker sliders get bigger thumbs on touch */
    .theme-slider-row input[type="range"] {
        height: 28px;
    }
    /* Color/border preset buttons get a bit more padding */
    .theme-color-item,
    .theme-border-preset {
        padding: 10px 10px !important;
    }

    /* Auth dropdown fills width to avoid overflow */
    .auth-dropdown {
        left: auto;
        right: 0;
        min-width: 260px;
    }

    /* Gallery images don't overflow */
    .gallery-grid {
        gap: 6px;
    }
}

/* ===== Small phones (<=480px) ===== */
@media (max-width: 480px) {
    .header {
        padding: 0.75rem 0.6rem;
        padding-top: max(0.75rem, env(safe-area-inset-top));
    }

    .header-logo {
        height: 28px;
    }

    .main {
        padding: 0.75rem 0.6rem;
    }

    .tab-bar {
        margin: 0 -0.6rem;
        padding-left: 0.6rem;
        padding-right: 0.6rem;
    }

    /* 2-column grid for phones — 1 column is too wasteful */
    .game-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }

    .card-body {
        padding: 6px 8px;
    }

    .card-title {
        font-size: 0.78rem;
    }

    .card-category {
        font-size: 0.62rem;
    }

    .fav-btn, .info-btn {
        width: 28px;
        height: 28px;
        font-size: 0.9rem;
    }

    .gallery-grid {
        grid-template-columns: 1fr 1fr;
    }

    .tab-btn {
        padding: 9px 14px;
        font-size: 0.85rem;
    }

    .cat-btn {
        padding: 6px 11px;
        font-size: 0.78rem;
    }

    .search-input {
        font-size: 16px; /* prevents iOS zoom on focus */
    }

    /* Profile modal nearly full-width */
    .profile-modal {
        border-radius: var(--radius-sm);
    }
    .profile-body {
        padding: 1rem 0.9rem 1rem;
    }
    .profile-avatar {
        width: 72px;
        height: 72px;
        border-width: 3px;
    }
    .profile-identity {
        margin-top: -40px;
        gap: 0.7rem;
    }
    .profile-name {
        font-size: 1.1rem;
    }
    .profile-header {
        height: 110px;
    }

    /* Theme picker: edge-to-edge */
    .theme-picker-popup {
        width: calc(100vw - 12px);
        max-height: 75vh;
        max-height: 75dvh;
    }

    /* Game info modal: tighter */
    .game-info-modal {
        margin: 1rem;
        max-width: calc(100vw - 2rem);
    }
}

/* ===== Minimum touch target enforcement =====
   Apple HIG recommends 44px minimum for touch targets. Apply to all buttons
   used on mobile to prevent mis-taps. Override only where it'd break layout. */
@media (hover: none) and (pointer: coarse) {
    button,
    .tab-btn,
    .cat-btn,
    .rom-sub-btn,
    a.game-card,
    .fav-btn,
    .info-btn {
        min-height: 36px;
    }
    /* Fav/info stay small since they overlay the card */
    .fav-btn, .info-btn {
        min-height: auto;
    }
    /* Larger hit area for chat input send */
    .chat-send-btn {
        min-width: 44px;
        min-height: 44px;
    }
    /* Pull-to-refresh / overscroll disabled on the main scroll body
       so users don't accidentally reload while scrolling the grid */
    html, body {
        overscroll-behavior-y: contain;
    }
}

/* ===== iOS auto-zoom prevention =====
   Safari iOS auto-zooms any input where font-size < 16px. Apply globally to
   every input/textarea/select on viewports where we actually care (mobile). */
@media (max-width: 768px) {
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="search"],
    input[type="number"],
    input[type="url"],
    input[type="tel"],
    textarea,
    select {
        font-size: 16px !important;
    }
}

/* ===== Horizontal-scroll hint =====
   Adds a faint fade on the right edge of scrollable rows so users know more
   content exists offscreen. Uses mask-image to fade into transparent. */
@media (max-width: 768px) {
    .categories,
    .tab-bar,
    .rom-subbar,
    .cheats-games-list {
        -webkit-mask-image: linear-gradient(to right, black 0, black calc(100% - 24px), transparent 100%);
                mask-image: linear-gradient(to right, black 0, black calc(100% - 24px), transparent 100%);
    }
}

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


/* ===== Profile Modal ===== */
.profile-modal-overlay {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 2rem 1rem;
    overflow-y: auto;
}

.profile-modal {
    --profile-accent: var(--accent);
    position: relative;
    width: 100%;
    max-width: 700px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
    margin: 0 auto;
}

.profile-modal-loading {
    padding: 3rem;
    text-align: center;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border-radius: var(--radius);
    border: 1px solid var(--border);
}

.profile-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 5;
    width: 32px;
    height: 32px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: background 0.15s;
}

.profile-close:hover {
    background: rgba(0, 0, 0, 0.8);
}

/* Wallpaper banner. Shorter than before so text below has clean space.
   A strong dark gradient at the bottom ensures legibility regardless of
   the wallpaper image's own colors. */
.profile-header {
    position: relative;
    height: 140px;
    background: linear-gradient(135deg, var(--profile-accent), var(--accent-secondary));
    background-size: cover;
    background-position: center;
}

.profile-header-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg,
            rgba(0, 0, 0, 0.08) 0%,
            rgba(0, 0, 0, 0.15) 55%,
            rgba(0, 0, 0, 0.55) 100%);
}

/* Identity bar: distinct solid area below the wallpaper with avatar
   overlapping the seam. Username/badges/meta sit on solid background
   (never over the wallpaper image), which is how Steam does it. */
.profile-identity {
    position: relative;
    display: grid;
    grid-template-columns: 108px 1fr auto;
    grid-template-rows: auto auto;
    grid-template-areas:
        "avatar name    edit"
        "avatar meta    edit";
    gap: 2px 16px;
    align-items: center;
    padding: 14px 1.5rem 14px;
    background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-card) 100%);
    border-bottom: 1px solid var(--border);
    min-height: 88px;
}

.profile-avatar {
    grid-area: avatar;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--bg-card);
    border: 3px solid var(--bg-secondary);
    box-shadow:
        0 0 0 2px var(--profile-accent),
        0 6px 20px rgba(0, 0, 0, 0.5);
    /* Float the avatar up into the wallpaper — the image itself overlaps,
       but no text does. */
    margin-top: -64px;
    align-self: start;
}

.profile-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profile-avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.6rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--profile-accent), var(--accent-secondary));
}

.profile-name {
    grid-area: name;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.15;
    word-break: break-word;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Badges now live on the same row as the name so the layout stays tight */
.profile-badges {
    display: inline-flex;
    gap: 4px;
    flex-wrap: wrap;
    vertical-align: middle;
}

.profile-meta {
    grid-area: meta;
    font-size: 0.82rem;
    color: var(--text-secondary);
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    line-height: 1.2;
}

.profile-edit-btn {
    grid-area: edit;
    align-self: center;
    background: var(--profile-accent);
    color: #fff;
    border: none;
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.15s, transform 0.1s;
    white-space: nowrap;
}

.profile-edit-btn:hover {
    filter: brightness(1.15);
}

.profile-edit-btn:active {
    transform: scale(0.97);
}

.profile-body {
    padding: 1rem 1.5rem 1.5rem;
}

.profile-playing-now {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.12), rgba(34, 197, 94, 0.03));
    border: 1px solid rgba(34, 197, 94, 0.35);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.88rem;
    font-weight: 500;
}

.profile-playing-dot {
    width: 8px;
    height: 8px;
    background: #22c55e;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.7);
    animation: pulse-dot 2s ease-in-out infinite;
}

.profile-playing-link {
    color: #4ade80;
    text-decoration: none;
    font-weight: 700;
}

.profile-playing-link:hover {
    text-decoration: underline;
}

.profile-section {
    margin-top: 1.3rem;
}

.profile-section-title {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--profile-accent);
    margin: 0 0 0.6rem;
}

.profile-bio {
    color: var(--text-primary);
    line-height: 1.5;
    white-space: pre-wrap;
    margin: 0;
    font-size: 0.92rem;
}

.profile-bio-empty {
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-style: italic;
    padding: 10px;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    border: 1px dashed var(--border);
}

.profile-game-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
}

.profile-game-grid-lg {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

.profile-game-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.15s, border-color 0.15s;
}

.profile-game-card:hover {
    transform: translateY(-2px);
    border-color: var(--profile-accent);
}

.profile-game-thumb {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--bg-card-hover);
    display: block;
}

.profile-game-thumb-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-secondary);
}

.profile-game-title {
    padding: 6px 8px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ----- Edit profile ----- */
.profile-modal-edit {
    max-width: 600px;
}

.profile-edit-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border);
}

.profile-edit-header h2 {
    margin: 0;
    font-size: 1.2rem;
    color: var(--text-primary);
}

.profile-edit-body {
    padding: 1rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.profile-edit-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.profile-edit-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.profile-edit-hint {
    font-size: 0.72rem;
    color: var(--text-secondary);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}

.profile-edit-avatar-area {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.profile-edit-avatar-area .profile-avatar {
    width: 80px;
    height: 80px;
    border-width: 2px;
}

.profile-edit-wallpaper-area {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.profile-edit-wallpaper-preview {
    height: 120px;
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    background-size: cover;
    background-position: center;
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.profile-edit-wallpaper-preview.empty {
    background: repeating-linear-gradient(
        45deg,
        var(--bg-card),
        var(--bg-card) 10px,
        var(--bg-secondary) 10px,
        var(--bg-secondary) 20px
    );
}

.profile-edit-buttons {
    display: flex;
    gap: 6px;
}

.profile-edit-action {
    padding: 6px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.profile-edit-action:hover {
    border-color: var(--accent);
    background: var(--bg-card-hover);
}

.profile-edit-bio {
    width: 100%;
    min-height: 90px;
    padding: 10px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.9rem;
    font-family: inherit;
    resize: vertical;
}

.profile-edit-bio:focus {
    outline: none;
    border-color: var(--accent);
}

.profile-edit-accent-area {
    display: flex;
    align-items: center;
    gap: 8px;
}

.profile-edit-accent-input {
    width: 60px;
    height: 36px;
    padding: 0;
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.profile-edit-showcase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 6px;
    max-height: 240px;
    overflow-y: auto;
    padding: 4px;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}

.profile-edit-showcase-item {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--bg-secondary);
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: pointer;
    transition: all 0.15s;
    text-align: left;
    padding: 0;
}

.profile-edit-showcase-item:hover {
    border-color: var(--text-secondary);
}

.profile-edit-showcase-item.picked {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-subtle);
}

.profile-edit-showcase-item.picked::after {
    content: '\2713';
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    background: var(--accent);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
}

.profile-edit-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    margin-top: 0.5rem;
}

.profile-edit-cancel,
.profile-edit-save {
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    border: 1px solid var(--border);
}

.profile-edit-cancel {
    background: none;
    color: var(--text-secondary);
}

.profile-edit-cancel:hover {
    color: var(--text-primary);
}

.profile-edit-save {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.profile-edit-save:hover:not(:disabled) {
    filter: brightness(1.15);
}

.profile-edit-save:disabled {
    opacity: 0.6;
    cursor: wait;
}

/* Clickable usernames */
.chat-msg-user[data-open-profile-uid],
.user-row-name[data-open-profile-uid] {
    cursor: pointer;
    transition: text-decoration-color 0.15s;
    text-decoration: underline transparent;
    text-underline-offset: 3px;
}

.chat-msg-user[data-open-profile-uid]:hover,
.user-row-name[data-open-profile-uid]:hover {
    text-decoration-color: currentColor;
}

@media (max-width: 600px) {
    .profile-header {
        height: 110px;
    }
    .profile-identity {
        grid-template-columns: 78px 1fr;
        grid-template-rows: auto auto auto;
        grid-template-areas:
            "avatar name"
            "avatar meta"
            "edit   edit";
        padding: 12px 1rem 12px;
        gap: 4px 12px;
    }
    .profile-avatar {
        width: 76px;
        height: 76px;
        border-width: 3px;
        margin-top: -52px;
    }
    .profile-name {
        font-size: 1.15rem;
        gap: 6px;
    }
    .profile-meta {
        font-size: 0.75rem;
        gap: 0.35rem;
    }
    .profile-edit-btn {
        width: 100%;
        padding: 9px 14px;
        margin-top: 4px;
    }
    .profile-body {
        padding: 0.9rem 1rem 1.2rem;
    }
}


/* ===== Cheat Code Manager ===== */
.tab-btn-cheats {
    color: #fbbf24;
}

.tab-btn-cheats:hover {
    border-color: #fbbf24;
}

.tab-btn-cheats.active {
    background: #fbbf24 !important;
    color: #000 !important;
    border-color: #fbbf24 !important;
}

.cheats-panel {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.cheats-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border);
}

.cheats-header h2 {
    margin: 0 0 0.4rem;
    font-size: 1.15rem;
    color: var(--text-primary);
}

.cheats-hint {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.45;
}

.cheats-hint code {
    background: var(--bg-card);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.78rem;
    color: var(--accent);
}

.cheats-body {
    display: grid;
    grid-template-columns: 260px 1fr;
    min-height: 500px;
}

.cheats-games-col {
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.cheats-search {
    margin: 0.75rem 0.75rem 0.5rem;
    padding: 8px 10px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.85rem;
    outline: none;
}

.cheats-search:focus { border-color: var(--accent); }

.cheats-games-list {
    flex: 1;
    overflow-y: auto;
    max-height: 600px;
    padding: 0 0.5rem 0.5rem;
}

.cheats-game-item {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
    transition: all 0.12s;
    margin-bottom: 2px;
}

.cheats-game-item:hover {
    background: var(--bg-card);
}

.cheats-game-item.is-active {
    background: var(--accent-subtle);
    border-color: var(--accent);
}

.cheats-game-title {
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cheats-game-category {
    font-size: 0.65rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.cheats-codes-col {
    padding: 1rem 1.5rem;
    min-height: 0;
}

.cheats-codes-empty {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.cheats-codes-head {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin-bottom: 0.8rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--border);
}

.cheats-codes-head h3 {
    margin: 0;
    font-size: 1.05rem;
    color: var(--text-primary);
}

.cheats-codes-game-id {
    font-family: monospace;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.cheats-import-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 0.8rem;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.12), rgba(251, 191, 36, 0.03));
    border: 1px solid rgba(251, 191, 36, 0.35);
    border-radius: var(--radius-sm);
    flex-wrap: wrap;
}

.cheats-import-text {
    font-size: 0.82rem;
    color: var(--text-primary);
}

.cheats-import-text strong { color: #fbbf24; }

.cheats-import-btn {
    padding: 7px 12px;
    background: #fbbf24;
    border: none;
    border-radius: var(--radius-sm);
    color: #000;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.15s;
}

.cheats-import-btn:hover:not(:disabled) { filter: brightness(1.1); }
.cheats-import-btn:disabled { opacity: 0.6; cursor: wait; }

.cheats-add-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 1.2rem;
    padding: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.cheats-input {
    width: 100%;
    padding: 8px 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.85rem;
    outline: none;
    font-family: inherit;
}

.cheats-input:focus { border-color: var(--accent); }

.cheats-codes-input {
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    font-size: 0.82rem;
    resize: vertical;
    min-height: 60px;
}

.cheats-add-row {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.cheats-input-type {
    flex: 0 0 160px;
}

.cheats-enabled-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.82rem;
    color: var(--text-secondary);
    cursor: pointer;
}

.cheats-add-btn {
    margin-left: auto;
    padding: 8px 14px;
    background: var(--accent);
    border: none;
    border-radius: var(--radius-sm);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.15s;
}

.cheats-add-btn:hover:not(:disabled) { filter: brightness(1.15); }
.cheats-add-btn:disabled { opacity: 0.6; cursor: wait; }

.cheats-existing {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cheats-item {
    padding: 10px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cheats-item-head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cheats-item-name {
    flex: 1;
    padding: 6px 8px;
    background: var(--bg-secondary);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 600;
    outline: none;
}

.cheats-item-name:focus { border-color: var(--accent); }

.cheats-item-enable {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    color: var(--text-secondary);
    cursor: pointer;
}

.cheats-item-delete {
    width: 28px;
    height: 28px;
    background: none;
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--text-secondary);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    transition: all 0.15s;
}

.cheats-item-delete:hover {
    background: #ef4444;
    border-color: #ef4444;
    color: #fff;
}

.cheats-item-codes {
    width: 100%;
    padding: 6px 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    font-size: 0.8rem;
    resize: vertical;
    outline: none;
}

.cheats-item-codes:focus { border-color: var(--accent); }

.cheats-item-foot {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cheats-item-type {
    padding: 4px 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.78rem;
}

.cheats-item-status {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-style: italic;
}

.cheats-loading {
    padding: 1.5rem;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Mobile layout for Cheats */
@media (max-width: 768px) {
    .cheats-panel {
        /* Edge-to-edge on phones */
        margin: 0 -0.75rem;
        border-left: 0;
        border-right: 0;
        border-radius: 0;
    }

    .cheats-header {
        padding: 0.9rem 1rem;
    }
    .cheats-header h2 {
        font-size: 1.05rem;
    }
    .cheats-hint {
        font-size: 0.75rem;
    }

    .cheats-body {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    .cheats-games-col {
        border-right: none;
        border-bottom: 1px solid var(--border);
    }

    /* Horizontal scroll game picker — way nicer than a 220px vertical list */
    .cheats-games-list {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        max-height: none;
        padding: 0 0.6rem 0.6rem;
        gap: 6px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
    }
    .cheats-games-list::-webkit-scrollbar { display: none; }

    .cheats-game-item {
        flex: 0 0 180px;
        margin-bottom: 0;
        scroll-snap-align: start;
        min-height: 52px; /* touch target */
        justify-content: center;
    }
    .cheats-game-title {
        font-size: 0.82rem;
    }

    .cheats-codes-col {
        padding: 0.9rem 1rem 1.2rem;
    }
    .cheats-codes-head {
        flex-wrap: wrap;
        gap: 0.3rem;
    }

    /* Prevent iOS auto-zoom on focus */
    .cheats-input,
    .cheats-item-name,
    .cheats-item-codes,
    .cheats-item-type,
    .cheats-search {
        font-size: 16px;
    }

    .cheats-add-form {
        padding: 10px;
    }
    .cheats-add-row {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .cheats-input-type {
        flex: 1 1 auto;
        padding: 10px;
    }
    .cheats-enabled-label {
        padding: 4px 0;
        font-size: 0.9rem;
    }
    .cheats-add-btn {
        margin-left: 0;
        width: 100%;
        min-height: 44px;
        padding: 10px 14px;
        font-size: 0.95rem;
    }

    /* Item rows: bigger touch target for delete, stacked layout */
    .cheats-item {
        padding: 10px;
    }
    .cheats-item-head {
        flex-wrap: wrap;
        gap: 6px;
    }
    .cheats-item-name {
        flex: 1 1 100%;
        order: 1;
        padding: 10px;
    }
    .cheats-item-enable {
        order: 2;
        flex: 1 1 auto;
        padding: 8px 0;
    }
    .cheats-item-delete {
        order: 3;
        width: 40px;
        height: 40px;
        font-size: 1.3rem;
        flex-shrink: 0;
    }
    .cheats-item-codes {
        padding: 10px;
    }
    .cheats-item-type {
        padding: 8px 10px;
    }
}

/* Extra tightening for tiny phones */
@media (max-width: 480px) {
    .cheats-header {
        padding: 0.75rem 0.8rem;
    }
    .cheats-codes-col {
        padding: 0.75rem 0.8rem 1rem;
    }
    .cheats-game-item {
        flex: 0 0 160px;
    }
}


/* ===== Direct Messages ===== */

/* Toast stack — top-right on desktop, top-center on phones */
.dm-toast-stack {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
    max-width: calc(100vw - 32px);
    width: 360px;
}

.dm-toast {
    display: grid;
    grid-template-columns: 40px 1fr 24px;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
    pointer-events: auto;
    transform: translateY(-12px);
    opacity: 0;
    transition: transform 0.25s ease, opacity 0.25s ease;
    font: inherit;
}

.dm-toast.is-shown {
    transform: translateY(0);
    opacity: 1;
}

.dm-toast.is-leaving {
    transform: translateY(-8px);
    opacity: 0;
}

.dm-toast:hover {
    background: var(--bg-card);
    border-color: var(--accent);
}

.dm-toast-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--accent-subtle);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dm-toast-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dm-toast-name {
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dm-toast-text {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dm-toast-close {
    color: var(--text-secondary);
    font-size: 1.1rem;
    line-height: 1;
    padding: 0 4px;
    cursor: pointer;
}

.dm-toast-close:hover { color: var(--text-primary); }

/* Messages tab layout */
.dm-empty,
.dm-empty-main {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.dm-panel {
    display: grid;
    grid-template-columns: 260px 1fr;
    min-height: 520px;
    max-height: 75vh;
    max-height: 75dvh;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.dm-sidebar {
    border-right: 1px solid var(--border);
    background: var(--bg-card);
    overflow-y: auto;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dm-sidebar-empty {
    padding: 14px;
    color: var(--text-secondary);
    font-size: 0.82rem;
    line-height: 1.5;
}

.dm-convo-item {
    display: block;
    width: 100%;
    padding: 10px 12px;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
    transition: all 0.12s;
}

.dm-convo-item:hover {
    background: var(--bg-card-hover);
}

.dm-convo-item.is-active {
    background: var(--accent-subtle);
    border-color: var(--accent);
}

.dm-convo-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 3px;
}

.dm-convo-name {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dm-convo-time {
    font-size: 0.7rem;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.dm-convo-preview {
    font-size: 0.78rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dm-convo-preview.from-me {
    opacity: 0.8;
    font-style: italic;
}

/* Active conversation view */
.dm-main {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.dm-convo-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-card);
}

.dm-convo-back {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    display: none;
}
.dm-convo-back:hover { color: var(--text-primary); background: var(--bg-card-hover); }

.dm-convo-title-name {
    font-weight: 700;
    font-size: 0.98rem;
    color: var(--text-primary);
    cursor: pointer;
    text-decoration: underline transparent;
    text-underline-offset: 3px;
    transition: text-decoration-color 0.15s;
}

.dm-convo-title-name:hover {
    text-decoration-color: currentColor;
}

.dm-convo-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    scroll-behavior: smooth;
}

.dm-convo-empty,
.dm-convo-loading {
    margin: auto;
    color: var(--text-secondary);
    font-size: 0.9rem;
    padding: 1rem;
}

.dm-msg {
    max-width: 75%;
    padding: 8px 12px;
    border-radius: 14px;
    font-size: 0.9rem;
    line-height: 1.4;
    word-wrap: break-word;
    animation: dm-bubble-in 0.18s ease-out;
    position: relative;
}

@keyframes dm-bubble-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

.dm-msg-mine {
    align-self: flex-end;
    background: var(--accent);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.dm-msg-theirs {
    align-self: flex-start;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-primary);
    border-bottom-left-radius: 4px;
}

.dm-msg-text {
    white-space: pre-wrap;
}

.dm-msg-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 4px;
    font-size: 0.68rem;
    opacity: 0.7;
}

.dm-msg-theirs .dm-msg-meta { color: var(--text-secondary); }

.dm-msg-delete {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0 3px;
    font-size: 0.9rem;
    line-height: 1;
    opacity: 0.6;
}
.dm-msg-delete:hover { opacity: 1; }

.dm-convo-form {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    padding: 10px;
    border-top: 1px solid var(--border);
    background: var(--bg-card);
    /* Don't let a long message body squish the input bar out of view. */
    flex-shrink: 0;
    /* Anchor for the absolutely-positioned emoji picker popup — without
       this the popup escapes to <body> and lands off-screen. */
    position: relative;
}

.dm-convo-input {
    flex: 1;
    padding: 9px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 18px;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-family: inherit;
    resize: none;
    outline: none;
    /* Floor + ceiling so the auto-height JS can't collapse the textarea to 0
       after send, and long drafts still cap at a reasonable height. */
    min-height: 38px;
    max-height: 140px;
    line-height: 1.4;
    transition: border-color 0.15s;
}

.dm-convo-input:focus { border-color: var(--accent); }

.dm-convo-send {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: var(--accent);
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    transition: filter 0.15s, transform 0.1s;
    flex-shrink: 0;
}

.dm-convo-send:hover { filter: brightness(1.15); }
.dm-convo-send:active { transform: scale(0.92); }

/* Profile message button shares the edit-button look but a different tint */
.profile-message-btn {
    background: var(--accent-secondary) !important;
}

/* Mobile: stack sidebar above main, toast goes to top-center */
@media (max-width: 640px) {
    .dm-toast-stack {
        left: 8px;
        right: 8px;
        top: calc(8px + env(safe-area-inset-top, 0px));
        width: auto;
    }
    .dm-panel {
        grid-template-columns: 1fr;
        /* Bound the panel so the convo body has its own scroll container
           instead of the whole page growing past the viewport. */
        max-height: calc(100dvh - 160px);
        min-height: 60dvh;
    }
    .dm-sidebar {
        border-right: none;
        border-bottom: 1px solid var(--border);
        /* Percentage-based so short phones don't waste space */
        max-height: 35dvh;
    }
    .dm-convo-back { display: inline-flex; }
    .dm-convo-input { font-size: 16px; }
    .dm-msg {
        /* 75% leaves too much dead space on narrow phones */
        max-width: 88%;
    }
}

/* ===== Consolidated mobile polish (<=480px) ===== */
@media (max-width: 480px) {
    /* --- Emoji picker popup: cap to viewport so it can't clip off-screen --- */
    .emoji-picker-popup {
        max-width: calc(100vw - 24px);
        right: 0;
        left: auto;
    }
    .emoji-picker-grid {
        /* Auto-fit instead of rigid 6 cols — keeps touch targets ~44px */
        grid-template-columns: repeat(auto-fit, minmax(44px, 1fr));
    }

    /* --- Emoji manage modal: fit more emojis per row on small phones --- */
    .emoji-manage-grid {
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
        gap: 0.4rem;
    }
    .emoji-manage-name { font-size: 0.68rem; }

    /* --- Player header: tighter spacing so title + auth fit --- */
    .player-header {
        padding: 0.55rem 0.7rem;
        gap: 0.45rem;
    }
    .player-info h1 {
        font-size: 0.9rem;
        /* Ellipsize instead of wrapping awkwardly */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
    .player-category {
        font-size: 0.65rem;
        padding: 1px 6px;
    }
    .player-actions {
        gap: 4px;
    }
}

/* ===== Ultra-narrow phones (<=360px) ===== */
@media (max-width: 360px) {
    /* Tab bar — shrink padding so 5 tabs fit without scroll */
    .tab-btn {
        padding: 7px 10px !important;
        font-size: 0.75rem;
    }
    /* Emoji picker: fewer columns so items aren't cramped */
    .emoji-picker-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    /* Kirky trigger: nudge up from safe area */
    .kirky-trigger {
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        right: 12px;
    }
    /* Player header: hide the auth area, rely on "Back to Arcade" */
    .player-header .auth-area {
        display: none;
    }
}

/* ===== Kirky input: always 16px on any mobile size to prevent iOS zoom ===== */
@media (max-width: 768px) {
    .kirky-input {
        font-size: 16px;
    }
    /* Kirky cards row: cap card width to prevent overflow on tiny screens */
    .kirky-card-title {
        font-size: 0.8rem;
    }
    .kirky-quick-chips {
        margin-top: 8px;
        gap: 5px;
    }
    .kirky-chip {
        padding: 5px 10px;
        font-size: 0.72rem;
    }
}

/* =========================================================================
   Patchnotes block (announcements at top of Games view)
   ========================================================================= */
.patchnotes-block {
    margin: 0 0 1rem;
    padding: 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
}
.patchnotes-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.8rem;
}
.patchnotes-title {
    margin: 0;
    font-size: 1.05rem;
    color: var(--text-primary);
}
.patchnotes-new-btn {
    padding: 6px 12px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8rem;
}
.patchnotes-new-btn:hover { filter: brightness(1.1); }
.patchnotes-toggle {
    display: block;
    margin: 0.6rem auto 0;
    padding: 6px 16px;
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.78rem;
}
.patchnotes-toggle:hover { background: var(--bg-card); }
.patchnotes-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}
.patchnotes-empty {
    padding: 1rem;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.85rem;
}
.patchnote-card {
    padding: 0.8rem 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    transition: border-color 0.15s;
}
.patchnote-card.is-pinned {
    border-color: var(--accent);
    background: color-mix(in oklab, var(--accent) 7%, var(--bg-card));
}
.patchnote-card .patchnote-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.3rem;
}
.patchnote-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
}
.patchnote-pin-badge {
    display: inline-block;
    padding: 1px 6px;
    margin-right: 4px;
    background: var(--accent);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    border-radius: 3px;
    vertical-align: middle;
}
.patchnote-actions {
    display: inline-flex;
    gap: 0.3rem;
    flex-shrink: 0;
}
.patchnote-actions button {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-secondary);
    padding: 2px 6px;
    cursor: pointer;
    font-size: 0.8rem;
    line-height: 1;
}
.patchnote-actions button:hover { background: var(--bg-secondary); color: var(--text-primary); }
.patchnote-meta {
    display: flex;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
    font-size: 0.72rem;
    color: var(--text-secondary);
}
.patchnote-body {
    color: var(--text-primary);
    font-size: 0.88rem;
    line-height: 1.45;
}
.patchnote-body p { margin: 0 0 0.5rem; }
.patchnote-body p:last-child { margin-bottom: 0; }
.patchnote-editor textarea.patchnote-body-input {
    resize: vertical;
    min-height: 140px;
    font-family: inherit;
}
/* Anchor the absolutely-positioned emoji picker popup to the editor box
   instead of letting it escape up to <body>. */
.patchnote-editor { position: relative; }
.patchnote-pin-toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.5rem;
    font-size: 0.82rem;
    color: var(--text-secondary);
}
.patchnote-editor-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.6rem;
}

/* =========================================================================
   Requests tab
   ========================================================================= */
.requests-panel {
    padding: 1rem;
    background: var(--bg-secondary);
    border-radius: 12px;
}
.requests-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.requests-header h2 { margin: 0; color: var(--text-primary); }
.requests-new-btn {
    padding: 8px 14px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
}
.requests-new-btn:hover { filter: brightness(1.1); }
.requests-filters {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.requests-filter {
    padding: 5px 12px;
    background: var(--bg-card);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: 18px;
    cursor: pointer;
    font-size: 0.78rem;
}
.requests-filter.is-active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.requests-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.requests-empty {
    padding: 1.5rem;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.88rem;
}
.request-card {
    display: flex;
    gap: 0.6rem;
    padding: 0.8rem 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.request-card-done { opacity: 0.7; border-left: 3px solid #10b981; }
.request-card-rejected { opacity: 0.55; border-left: 3px solid #ef4444; }
.request-vote-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    min-width: 42px;
    padding-top: 0.2rem;
}
.request-upvote {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.15s;
}
.request-upvote:hover { border-color: var(--accent); color: var(--accent); }
.request-upvote.is-voted {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.request-vote-count {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
}
.request-main { flex: 1; min-width: 0; }
.request-title-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.3rem;
}
.request-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}
.request-kind, .request-status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.request-kind-game      { background: #3b82f6; color: #fff; }
.request-kind-feature   { background: #8b5cf6; color: #fff; }
.request-kind-fix       { background: #f59e0b; color: #fff; }
.request-kind-other     { background: #64748b; color: #fff; }
.request-status-done    { background: #10b981; color: #fff; }
.request-status-rejected{ background: #ef4444; color: #fff; }
.request-details {
    margin: 0.2rem 0 0.4rem;
    font-size: 0.85rem;
    color: var(--text-primary);
    line-height: 1.4;
}
.request-status-note {
    margin: 0.4rem 0;
    padding: 0.4rem 0.7rem;
    background: var(--bg-secondary);
    border-left: 3px solid var(--accent);
    border-radius: 4px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-style: italic;
}
.request-footer {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-top: 0.4rem;
    font-size: 0.72rem;
    color: var(--text-secondary);
}
.request-author { font-weight: 600; }
.request-actions {
    display: inline-flex;
    gap: 0.3rem;
    margin-left: auto;
    flex-wrap: wrap;
}
.request-action {
    padding: 3px 8px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.72rem;
}
.request-action:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.request-mark-done:hover { background: #10b981; border-color: #10b981; }
.request-mark-rejected:hover, .request-delete:hover { background: #ef4444; border-color: #ef4444; }
.request-modal .request-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 0.7rem;
    font-size: 0.82rem;
    color: var(--text-secondary);
}
.request-modal-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.5rem;
}

/* =========================================================================
   Save states tab
   ========================================================================= */
.saves-panel {
    padding: 1rem;
    background: var(--bg-secondary);
    border-radius: 12px;
}
.saves-header h2 { margin: 0 0 0.3rem; color: var(--text-primary); }
.saves-hint {
    margin: 0 0 1rem;
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.4;
}
.saves-loading, .saves-empty {
    padding: 1.5rem;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.88rem;
}
.saves-upload {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    padding: 0.8rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    align-items: start;
}

/* Searchable game picker — combo-box replacement for the prior 2800-option
   <select>. The wrapper is position:relative so the dropdown can anchor
   under the input. */
.saves-game-picker {
    position: relative;
}
.saves-game-search {
    width: 100%;
    padding-right: 30px;  /* room for the × clear button */
}
.saves-game-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 0.9rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}
.saves-game-clear:hover {
    background: #ef4444;
    color: #fff;
}
.saves-game-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    max-height: 280px;
    overflow-y: auto;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    z-index: 50;
}
.saves-game-dropdown[hidden] { display: none; }
.saves-game-dropdown-empty {
    padding: 0.6rem 0.8rem;
    color: var(--text-secondary);
    font-size: 0.82rem;
}
.saves-game-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.8rem;
    background: transparent;
    border: none;
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
    font-size: 0.85rem;
}
.saves-game-option:hover,
.saves-game-option:focus {
    background: var(--bg-card);
}
.saves-game-option-title {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.saves-game-option-cat {
    font-size: 0.7rem;
    color: var(--text-secondary);
    padding: 1px 8px;
    background: var(--bg-card);
    border-radius: 10px;
    flex-shrink: 0;
}
.saves-upload input[type="file"] {
    padding: 6px 8px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.82rem;
}
.saves-upload-btn {
    padding: 8px 16px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
}
.saves-upload-btn:hover { filter: brightness(1.1); }
.saves-upload-progress {
    padding: 0.5rem 0.8rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}
.saves-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.save-row {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.7rem 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.save-info { flex: 1; min-width: 0; }
.save-label {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.2rem;
}
.save-meta {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    font-size: 0.72rem;
    color: var(--text-secondary);
}
.save-game {
    padding: 1px 6px;
    background: var(--accent);
    color: #fff;
    border-radius: 3px;
    font-weight: 600;
    font-size: 0.68rem;
}
.save-actions {
    display: inline-flex;
    gap: 0.3rem;
}
.save-actions button {
    width: 32px;
    height: 32px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
}
.save-actions button:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.save-delete:hover { background: #ef4444 !important; border-color: #ef4444 !important; }

@media (max-width: 640px) {
    .saves-upload {
        grid-template-columns: 1fr;
    }
}

/* =========================================================================
   Group chat additions (extends the existing .dm-* system)
   ========================================================================= */
.dm-sidebar-section { padding: 0.5rem 0; }
.dm-sidebar-section + .dm-sidebar-section {
    border-top: 1px solid var(--border);
}
.dm-sidebar-heading {
    margin: 0 0 0.3rem;
    padding: 0 0.8rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.dm-sidebar-heading-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.8rem 0 0;
}
.dm-new-group-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    border: none;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    line-height: 1;
}
.dm-new-group-btn:hover { filter: brightness(1.1); }
.dm-group-item .dm-convo-name { font-weight: 600; }
.dm-group-title {
    font-weight: 700;
    display: block;
    color: var(--text-primary);
}
.dm-group-members {
    display: block;
    font-size: 0.7rem;
    color: var(--text-secondary);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 360px;
}
.dm-group-leave {
    padding: 4px 10px;
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.7rem;
    cursor: pointer;
}
.dm-group-leave:hover { background: #ef4444; color: #fff; border-color: #ef4444; }
.dm-msg-author {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 0.15rem;
}
.new-group-members {
    max-height: 280px;
    overflow-y: auto;
    padding: 0.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-top: 0.5rem;
}
.new-group-member {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.4rem;
    cursor: pointer;
    color: var(--text-primary);
    font-size: 0.88rem;
}
.new-group-member:hover { background: var(--bg-secondary); border-radius: 4px; }

.new-group-search {
    margin-top: 0.5rem;
}

.new-group-selected-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.5rem;
    padding: 0.5rem 0.6rem;
    background: color-mix(in oklab, var(--accent) 8%, var(--bg-card));
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.78rem;
}
.new-group-selected-count {
    font-weight: 600;
    color: var(--text-secondary);
    margin-right: 0.2rem;
}
.new-group-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 3px 4px 3px 8px;
    background: var(--accent);
    color: #fff;
    border-radius: 12px;
    font-size: 0.75rem;
    line-height: 1;
}
.new-group-chip-x {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.new-group-chip-x:hover { background: rgba(0, 0, 0, 0.3); }

/* =========================================================================
   Admin promote/demote button (users tab)
   ========================================================================= */
.user-row-actions {
    display: inline-flex;
    gap: 0.3rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.promote-admin-btn {
    padding: 4px 10px;
    background: color-mix(in oklab, var(--accent) 20%, var(--bg-card));
    color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 600;
}
.promote-admin-btn:hover { background: var(--accent); color: #fff; }
.promote-admin-btn.demote {
    background: var(--bg-card);
    color: var(--text-secondary);
    border-color: var(--border);
}
.promote-admin-btn.demote:hover {
    background: #ef4444;
    color: #fff;
    border-color: #ef4444;
}

/* =========================================================================
   Active tag-filter pills — shows below the search bar when the user
   has #tag queries, lets them remove each tag individually so combining
   tags is discoverable. Toggled visibility via [hidden] from app.js.
   ========================================================================= */
.active-tag-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    padding: 0 4px;
}
.active-tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 12px;
    background: color-mix(in oklab, var(--accent) 18%, var(--bg-card));
    color: var(--text-primary);
    border: 1px solid color-mix(in oklab, var(--accent) 40%, var(--border));
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.05s;
}
.active-tag-pill:hover {
    background: color-mix(in oklab, var(--accent) 30%, var(--bg-card));
    border-color: var(--accent);
}
.active-tag-pill:active { transform: scale(0.97); }
.active-tag-pill-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    font-size: 0.85rem;
    line-height: 1;
}
.active-tag-pill:hover .active-tag-pill-x {
    background: rgba(255, 255, 255, 0.25);
}
.active-tag-pill-clear {
    background: transparent;
    color: var(--text-secondary);
    border-color: var(--border);
    font-weight: 500;
}
.active-tag-pill-clear:hover {
    background: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--text-secondary);
}

/* =========================================================================
   PS2 "Get ROM" modal — auto vs manual download options
   ========================================================================= */
.ps2-get-modal { max-width: 540px; }
.ps2-get-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-top: 0.5rem;
}
.ps2-get-option {
    padding: 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.ps2-get-option h3 {
    margin: 0 0 0.4rem;
    font-size: 0.95rem;
    color: var(--text-primary);
}
.ps2-get-option p {
    margin: 0 0 0.7rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.4;
}
.ps2-get-divider {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.ps2-get-divider::before,
.ps2-get-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}
.ps2-get-steps {
    margin: 0;
    padding-left: 1.2rem;
    color: var(--text-primary);
    font-size: 0.88rem;
    line-height: 1.5;
}
.ps2-get-steps li {
    margin-bottom: 0.7rem;
}
.ps2-get-steps li:last-child {
    margin-bottom: 0;
}
.ps2-get-direct {
    display: inline-block;
    padding: 6px 14px;
    background: linear-gradient(135deg, #7c3aed, #dc2626);
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.85rem;
    transition: filter 0.15s;
}
.ps2-get-direct:hover { filter: brightness(1.1); }
.ps2-get-substep {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}
.ps2-get-dropzone {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.5rem;
    padding: 1.2rem;
    background: var(--bg-secondary);
    border: 2px dashed var(--border);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    color: var(--text-secondary);
    font-size: 0.85rem;
}
.ps2-get-dropzone:hover,
.ps2-get-dropzone.drag-over {
    border-color: var(--accent);
    background: color-mix(in oklab, var(--accent) 8%, var(--bg-secondary));
    color: var(--text-primary);
}
.ps2-get-status {
    margin-top: 0.7rem;
    padding: 0.6rem 0.8rem;
    background: var(--bg-secondary);
    border-radius: 6px;
    font-size: 0.83rem;
    color: var(--text-primary);
}

/* =========================================================================
   PS2 pre-download button (game cards)
   Sits on the game card alongside the favorite + info buttons. States:
     - idle       → "📥 Pre-download"
     - downloading→ "47% • 8.3 MB/s" + filling bar
     - saving     → "Saving…" + full bar
     - cached     → "✓ Ready" + full bar (green tint)
     - error      → "Retry" (red tint)
   ========================================================================= */
.ps2-preload-btn {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 5;
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px 9px;
    background: rgba(10, 10, 15, 0.85);
    color: #e5e5e5;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.ps2-preload-btn:hover {
    background: rgba(124, 58, 237, 0.85);
    border-color: rgba(255, 255, 255, 0.4);
}
.ps2-preload-label {
    line-height: 1;
    white-space: nowrap;
}
.ps2-preload-bar {
    display: block;
    height: 3px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 2px;
    overflow: hidden;
}
.ps2-preload-bar-fill {
    display: block;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #7c3aed, #dc2626);
    transition: width 0.2s ease-out;
}
.ps2-preload-btn[data-state="downloading"],
.ps2-preload-btn[data-state="saving"] {
    background: rgba(20, 20, 30, 0.95);
    border-color: rgba(124, 58, 237, 0.6);
    cursor: default;
}
.ps2-preload-btn[data-state="cached"] {
    background: rgba(16, 185, 129, 0.9);
    border-color: #10b981;
    color: #fff;
    cursor: default;
}
.ps2-preload-btn[data-state="cached"] .ps2-preload-bar { display: none; }
.ps2-preload-btn[data-state="error"] {
    background: rgba(239, 68, 68, 0.9);
    border-color: #ef4444;
    color: #fff;
}
.ps2-preload-btn[data-state="error"] .ps2-preload-bar-fill {
    background: #fff;
}

/* =========================================================================
   DM / group message image + emoji support
   ========================================================================= */

/* Attach + emoji buttons in the conversation input bar */
.dm-convo-attach-btn,
.dm-convo-emoji-btn {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 1rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.dm-convo-attach-btn:hover,
.dm-convo-emoji-btn:hover {
    background: var(--bg-secondary);
    color: var(--accent);
}

/* Pending image preview — shown between the body and the form */
.dm-image-preview {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 6px 10px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}
.dm-image-preview img {
    max-height: 60px;
    max-width: 120px;
    border-radius: 6px;
    object-fit: cover;
}
.dm-image-preview-clear {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.dm-image-preview-clear:hover { background: #ef4444; color: #fff; border-color: #ef4444; }

/* Sent image inside a message bubble */
.dm-msg-image {
    max-width: 100%;
    max-height: 280px;
    border-radius: 8px;
    margin-top: 4px;
    margin-bottom: 4px;
    cursor: zoom-in;
    display: block;
}

/* Lightbox for enlarged DM images */
.dm-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    cursor: zoom-out;
}
.dm-lightbox img {
    max-width: 95vw;
    max-height: 95vh;
    object-fit: contain;
    border-radius: 8px;
}

/* =========================================================================
   Patchnote image + emoji editor bits
   ========================================================================= */

.patchnote-editor-toolbar {
    display: flex;
    gap: 0.4rem;
    margin: 0.3rem 0 0.5rem;
    flex-wrap: wrap;
}
.patchnote-toolbar-btn {
    padding: 5px 12px;
    background: var(--bg-card);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.78rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.patchnote-toolbar-btn:hover {
    background: var(--bg-secondary);
    color: var(--accent);
    border-color: var(--accent);
}

.patchnote-image-preview {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
    padding: 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 6px;
}
.patchnote-image-preview img {
    max-width: 140px;
    max-height: 100px;
    border-radius: 6px;
    object-fit: cover;
}
.patchnote-image-preview-clear {
    padding: 5px 12px;
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.78rem;
}
.patchnote-image-preview-clear:hover { background: #ef4444; color: #fff; border-color: #ef4444; }

/* Placeholder shown when the emoji picker opens but there are no emojis
   configured yet — replaces the prior silent no-op. */
.emoji-picker-empty {
    padding: 0.6rem 0.8rem;
    font-size: 0.78rem;
    color: var(--text-secondary);
    white-space: normal;
    max-width: 240px;
    line-height: 1.4;
}

/* Rendered image inside a posted patchnote */
.patchnote-image {
    display: block;
    max-width: 100%;
    max-height: 320px;
    border-radius: 8px;
    margin: 0.4rem 0;
    object-fit: cover;
    cursor: zoom-in;
}
.patchnote-image:hover { opacity: 0.95; }