/* ===== 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 ===== */

/* On the player page (play.html has body.player-body) the chatbot
   bubble would overlap the EmulatorJS toolbar at the bottom-right
   of the game iframe — hiding the netplay button + settings cog
   behind it. Kill it on the player page; users have plenty of
   chatbot access on the main arcade. */
.player-body .kirky-trigger,
.player-body .kirky-panel {
    display: none !important;
}

.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; }

/* Co-op host modal — shown when user clicks "Co-op" in game info.
   Stacks on top of the game info modal (z-index 11000), shows the
   room code prominently + invite link + status messages. */

#coopHostOverlay { z-index: 11000; }

.coop-host-modal {
    max-width: 520px;
    width: 92vw;
}

.coop-room-code {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 1.2rem 1rem;
    margin: 0.8rem 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.coop-room-code-label {
    font-size: 0.72rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.coop-room-code-value {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 2.4rem;
    font-weight: bold;
    letter-spacing: 6px;
    color: var(--accent);
    background: transparent;
    padding: 0;
}

.coop-invite-row {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}
.coop-invite-input {
    flex: 1;
    padding: 0.5rem 0.7rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 5px;
    color: var(--text-secondary);
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 0.78rem;
    overflow: hidden;
    text-overflow: ellipsis;
}
.coop-invite-input:focus {
    color: var(--text-primary);
    outline: 1px solid var(--accent);
}

.coop-hint {
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0.6rem 0 0.4rem;
}
.coop-status {
    padding: 0.6rem 0.75rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.82rem;
    color: var(--text-primary);
    margin: 0;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    text-align: center;
}

/* Co-op button in game info modal */
.game-info-coop-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.6rem;
    padding: 0.4rem 0.85rem;
    background: var(--bg-card);
    color: var(--text-secondary);
    border: 1px dashed var(--border);
    border-radius: 6px;
    font-size: 0.82rem;
    cursor: pointer;
    align-self: flex-start;
    transition: color 0.15s, border-color 0.15s;
    font-family: inherit;
}
.game-info-coop-btn:hover {
    color: var(--accent);
    border-color: var(--accent);
}

/* Save-offline button in game info modal. Looks like the Edit Tags
   pill — secondary action, dashed border, sits between Play Now and
   the recommendations strip. Saved state is solid + green. */

.game-info-offline-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.6rem;
    padding: 0.4rem 0.85rem;
    background: var(--bg-card);
    color: var(--text-secondary);
    border: 1px dashed var(--border);
    border-radius: 6px;
    font-size: 0.82rem;
    cursor: pointer;
    align-self: flex-start;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    font-family: inherit;
}
.game-info-offline-btn:hover {
    color: var(--accent);
    border-color: var(--accent);
}
.game-info-offline-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.game-info-offline-btn[data-state="saved"] {
    background: rgba(34, 197, 94, 0.12);
    color: #22c55e;
    border: 1px solid #22c55e;
    border-style: solid;
}
.game-info-offline-btn[data-state="saved"]:hover {
    background: rgba(34, 197, 94, 0.2);
}

/* Offline saved-games list (when there's an Offline view in tabs) */
.offline-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-secondary);
}
.offline-summary {
    padding: 0.8rem 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-bottom: 0.8rem;
}
.offline-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.offline-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.offline-item-thumb {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 6px;
    background: var(--bg-secondary);
    flex-shrink: 0;
}
.offline-item-info {
    flex: 1;
    min-width: 0;
}
.offline-item-title {
    color: var(--text-primary);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.offline-item-meta {
    font-size: 0.75rem;
    color: var(--text-secondary);
}
.offline-item-play {
    padding: 0.4rem 0.85rem;
    background: var(--accent);
    color: #fff;
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.82rem;
}
.offline-item-remove {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    border-radius: 4px;
    padding: 0 0.5rem;
    cursor: pointer;
}
.offline-item-remove:hover { color: #ef4444; border-color: #ef4444; }

/* Catalog admin modal — edit/delete existing entries. Wider than
   default to accommodate the row table (thumbnail + title + meta +
   action buttons). Edit form modal is smaller, stacks on top. */

#catalogAdminModal .modal-box.catalog-admin-modal {
    max-width: 850px;
    width: 92vw;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
}

.catalog-admin-toolbar {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.6rem;
}
.catalog-admin-toolbar .auth-input { flex: 1; }
.catalog-admin-toolbar .auth-submit { white-space: nowrap; }

.catalog-admin-status {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-bottom: 0.4rem;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

.catalog-admin-table {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.catalog-admin-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.6rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
}

.catalog-admin-thumb {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 4px;
    background: var(--bg-secondary);
    flex-shrink: 0;
}

.catalog-admin-info {
    flex: 1;
    min-width: 0;
}
.catalog-admin-title {
    color: var(--text-primary);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.catalog-admin-meta {
    font-size: 0.72rem;
    color: var(--text-secondary);
}
.catalog-admin-meta code {
    background: var(--bg-secondary);
    padding: 0.05rem 0.3rem;
    border-radius: 3px;
    font-size: 0.95em;
}

.catalog-admin-edit, .catalog-admin-delete {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-primary);
    border-radius: 4px;
    padding: 0.3rem 0.7rem;
    cursor: pointer;
    font-size: 0.78rem;
    transition: border-color 0.15s, color 0.15s;
}
.catalog-admin-edit:hover { border-color: var(--accent); color: var(--accent); }
.catalog-admin-delete {
    padding: 0.2rem 0.55rem;
    font-size: 1.05rem;
    line-height: 1;
}
.catalog-admin-delete:hover { color: #ef4444; border-color: #ef4444; }

.catalog-admin-more {
    text-align: center;
    color: var(--text-secondary);
    padding: 0.8rem;
    font-size: 0.82rem;
}

/* Edit form modal stacks on top of catalog admin modal. */
#catalogEditOverlay { z-index: 11000; }
.catalog-edit-modal { max-width: 560px; width: 90vw; }
.catalog-edit-form {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    max-height: 60vh;
    overflow-y: auto;
}
.catalog-edit-form label {
    display: flex;
    flex-direction: column;
    font-size: 0.78rem;
    color: var(--text-secondary);
    gap: 0.25rem;
}
.catalog-edit-form input,
.catalog-edit-form textarea {
    padding: 0.45rem 0.6rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 5px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.85rem;
}
.catalog-edit-form textarea {
    resize: vertical;
    font-family: inherit;
}
.catalog-edit-checkbox {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-primary);
    font-size: 0.85rem;
}
.catalog-edit-checkbox input { width: auto; }

.catalog-edit-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.8rem;
    justify-content: flex-end;
}

/* Bulk-add games modal (admin LLM-research tool). Wider than usual
   modals because it shows a list of researched entries with thumbnails
   and tag chips that need horizontal room. */

#bulkAddModal .modal-box.bulk-add-modal {
    max-width: 800px;
    width: 90vw;
}

.bulk-add-urls {
    width: 100%;
    min-height: 120px;
    padding: 0.75rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-primary);
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 0.82rem;
    resize: vertical;
}

.bulk-add-actions {
    display: flex;
    gap: 0.6rem;
    margin: 0.8rem 0;
}

.bulk-add-progress {
    padding: 0.5rem 0.75rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin-bottom: 0.6rem;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

.bulk-add-results {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 50vh;
    overflow-y: auto;
}

.bulk-add-result {
    display: flex;
    gap: 0.75rem;
    padding: 0.6rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
}

.bulk-add-result-error {
    border-color: rgba(239, 68, 68, 0.4);
}

.bulk-add-thumb {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 4px;
    background: var(--bg-secondary);
    flex-shrink: 0;
}

.bulk-add-fields {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.bulk-add-row1 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.bulk-add-cat {
    font-size: 0.7rem;
    padding: 0.1rem 0.45rem;
    background: var(--accent);
    color: #fff;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bulk-add-remove {
    margin-left: auto;
    background: none;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    border-radius: 4px;
    padding: 0 0.5rem;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
}
.bulk-add-remove:hover { color: #ef4444; border-color: #ef4444; }

.bulk-add-desc {
    color: var(--text-secondary);
    font-size: 0.78rem;
    line-height: 1.35;
}

.bulk-add-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    font-size: 0.7rem;
}
.bulk-add-tags span {
    padding: 0.05rem 0.4rem;
    background: var(--bg-secondary);
    border-radius: 999px;
    color: var(--text-secondary);
}

.bulk-add-id {
    font-size: 0.7rem;
    color: var(--text-secondary);
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bulk-add-id code {
    background: var(--bg-secondary);
    padding: 0.05rem 0.3rem;
    border-radius: 3px;
}

.auth-submit.secondary {
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border);
}
.auth-submit.secondary:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Smart recommendations strip in the game info modal. Horizontal scroll
   below the Play Now button. Each rec is a small card (thumbnail + title)
   that opens that game's info modal on click — letting users browse a
   chain of recommendations without bouncing back to the grid. */

.game-info-recs-wrap {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
}
.game-info-recs-label {
    color: var(--text-secondary);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.6rem;
}
.game-info-recs {
    display: flex;
    gap: 0.6rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    /* Custom scrollbar so it isn't an ugly default block */
    scrollbar-width: thin;
    scrollbar-color: var(--accent) transparent;
}
.game-info-recs::-webkit-scrollbar { height: 6px; }
.game-info-recs::-webkit-scrollbar-track { background: transparent; }
.game-info-recs::-webkit-scrollbar-thumb {
    background: var(--accent);
    border-radius: 3px;
    opacity: 0.5;
}

.game-info-rec {
    flex: 0 0 110px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-align: left;
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
    color: inherit;
    font-family: inherit;
}
.game-info-rec:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}

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

.game-info-rec-title {
    padding: 0.4rem 0.5rem;
    font-size: 0.75rem;
    color: var(--text-primary);
    line-height: 1.2;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    min-height: 2.4em;
}

@media (max-width: 600px) {
    .game-info-rec { flex: 0 0 90px; }
    .game-info-rec-title { font-size: 0.7rem; }
}

/* The apply-tags modal stacks on top of an open game-info modal, so its
   overlay needs a z-index above .game-info-overlay (z:9999). Same trick
   for the manage-tags modal in case it ever opens over a game info. */
#applyTagsModal,
#customTagModal {
    z-index: 11000;
}

/* Custom-tag filter pills in the categories strip — visually distinct
   from regular category buttons (slightly tinted background + accent
   border) so users can tell at a glance these are admin tags, not
   built-in categories. Image-tags render the icon inside the pill. */
.cat-btn.cat-btn-customtag {
    border-color: var(--accent);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.cat-btn.cat-btn-customtag:hover {
    background: var(--accent);
    color: #fff;
}
.cat-btn.cat-btn-customtag .custom-tag-img {
    height: 16px;
    margin-right: 0;
}

/* 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%;
    /* IMPORTANT: overflow visible so frame::before rings can extend
       outside the avatar — clipping is handled by .profile-avatar-frame
       which owns the circular img mask. */
    overflow: visible;
    flex-shrink: 0;
    /* Float the avatar up into the wallpaper — the image itself overlaps,
       but no text does. */
    margin-top: -64px;
    align-self: start;
    position: relative;
}

.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-sort-label {
    align-self: center;
    margin-left: auto;
    color: var(--text-secondary);
    font-size: 0.78rem;
    opacity: 0.85;
}
.requests-sort {
    padding: 5px 10px;
    background: var(--bg-card);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: 18px;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 600;
}
.requests-sort.is-active {
    background: rgba(124, 58, 237, 0.18);
    color: var(--text-primary);
    border-color: rgba(124, 58, 237, 0.6);
}
@media (max-width: 480px) {
    .requests-sort-label { margin-left: 0; }
}
.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; }

/* =========================================================================
   PERFORMANCE — render hints for the GPU + offscreen-skipping
   =========================================================================
   - content-visibility: auto on game cards lets the browser SKIP layout
     and paint for cards that aren't in the viewport. With ~3000 cards
     in the catalog, this is a massive win on initial render and scroll
     performance — Chrome and Firefox both honor it. The contain-intrinsic-
     size hint stops the scrollbar from jumping when offscreen cards
     "appear" (without it the browser doesn't know how tall offscreen
     cards are until they render).
   - will-change tells the GPU to promote elements that animate on hover
     to their own composite layer ahead of time, avoiding paint jank on
     the first hover. Cheap to apply, low memory cost on a few elements.
   ========================================================================= */

.game-card {
    content-visibility: auto;
    contain-intrinsic-size: 240px 200px;
}
.game-info-rec {
    content-visibility: auto;
    contain-intrinsic-size: 110px 130px;
}
/* DESKTOP ONLY: promote cards to GPU layers on hover for smooth
   transform animations. On mobile there's no hover and weak GPUs
   can't afford the layer-promotion overhead, so we skip will-change
   entirely on mobile (gated below). */
@media (hover: hover) and (pointer: fine) {
    .game-card:hover { will-change: transform; }
    .game-info-rec:hover { will-change: transform; }
}

/* MOBILE-ONLY perf shortcuts:
   1. Disable backdrop-filter — GPU-blur is expensive on weak Android
      GPUs and many browsers fall back to software rendering. Replace
      with darker semi-transparent backgrounds so modal text stays
      legible.
   2. Disable will-change implicitly (no @media (hover:hover) match
      means the hover-only rules above never fire on mobile).
   3. Reduce-motion check provides an extra opt-out for users who
      explicitly want it disabled regardless of device. */
@media (max-width: 768px), (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
    .modal-overlay { background: rgba(0, 0, 0, 0.85); }
    .ios-install-banner-inner { background: rgba(20, 20, 30, 0.98); }
}
/* Belt + suspenders: extra OS-level reduced-motion handling */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* =========================================================================
   MOBILE PASS — installable-PWA polish + touch UX improvements
   =========================================================================
   Goals:
   - Look and behave like a real app once installed (Add to Home Screen)
   - Honor iPhone safe areas (notch, home indicator) via env(safe-area-*)
   - Touch targets >= 44x44 (Apple HIG / Material guidelines)
   - Thumb-friendly nav placement on small screens
   - Faster perceived performance: smaller cards, less padding
   - Sensible scroll behavior: no rubber-band stutter, momentum on iOS
   ========================================================================= */

/* Standalone-mode (installed) bookkeeping. When the arcade is launched
   from the home screen the browser chrome is gone — full edge-to-edge.
   Safe-area insets keep content out from under the notch / dynamic
   island / home indicator. */
@media (display-mode: standalone) {
    body {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
    .pwa-install-btn { display: none !important; }
}

/* PWA mobile-only filter toggle. Only renders in standalone mode.
   "On" state (default in PWA) = mobile-only games shown, accent-colored.
   "Off" state = full catalog shown, muted/dashed border. */
.pwa-mobile-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0.85rem;
    margin-right: 0.5rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    font-family: inherit;
}
.pwa-mobile-toggle[data-state="on"] {
    background: var(--accent);
    color: #fff;
    border: 1px solid var(--accent);
}
.pwa-mobile-toggle[data-state="off"] {
    background: var(--bg-card);
    color: var(--text-secondary);
    border: 1px dashed var(--border);
}
.pwa-mobile-toggle:hover { transform: translateY(-1px); }

/* Install button (Android Chrome path) */
.pwa-install-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0.85rem;
    margin-right: 0.5rem;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.35);
    transition: transform 0.1s, box-shadow 0.15s;
}
.pwa-install-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.5);
}
.pwa-install-btn:active { transform: translateY(0); }
.pwa-install-btn:disabled { opacity: 0.6; cursor: wait; }

/* iOS Safari install hint banner */
.ios-install-banner {
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: calc(8px + env(safe-area-inset-bottom));
    z-index: 9000;
    animation: ios-banner-in 0.35s ease-out;
}
@keyframes ios-banner-in {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.ios-install-banner-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(20, 20, 30, 0.95);
    border: 1px solid var(--accent);
    border-radius: 14px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.ios-install-banner-icon {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    flex-shrink: 0;
}
.ios-install-banner-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.3;
}
.ios-install-banner-text strong { font-weight: 600; }
.ios-install-banner-text span { color: var(--text-secondary); font-size: 13px; }
.ios-install-banner-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
    flex-shrink: 0;
}
.ios-install-banner-close:hover { color: var(--text-primary); }

/* Touch-target minimums + tighter mobile layout */
@media (max-width: 768px) {
    .tab-btn, .cat-btn, .auth-submit, .auth-btn, .modal-close,
    .game-info-tag, .active-tag-pill, .manage-tags-btn,
    .pwa-install-btn, .game-info-play, .game-info-offline-btn,
    .game-info-coop-btn, .game-info-edit-tags {
        min-height: 40px;
        padding-top: 0.55rem;
        padding-bottom: 0.55rem;
    }

    /* Tab + category bars: scroll horizontally instead of wrapping.
       Better thumb reach + signals "more here" via partial cutoff. */
    .tab-bar, .categories {
        overflow-x: auto;
        flex-wrap: nowrap;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }
    .tab-bar::-webkit-scrollbar,
    .categories::-webkit-scrollbar { display: none; }
    .tab-bar .tab-btn,
    .categories .cat-btn {
        flex-shrink: 0;
        scroll-snap-align: start;
    }

    .header { padding: 8px 12px; }
    .header-logo { height: 28px; }

    /* Phone game grid: 3 cols typical, 2 on small phones */
    .game-grid {
        gap: 8px;
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
    .continue-strip { gap: 8px; }

    /* Game info modal: bottom-sheet style on phones */
    .game-info-modal {
        max-width: 100vw !important;
        width: 100vw !important;
        margin: 0 !important;
        border-radius: 16px 16px 0 0 !important;
        max-height: 90vh;
        overflow-y: auto;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        animation: bottom-sheet-up 0.25s ease-out;
        padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    }
    @keyframes bottom-sheet-up {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }

    .modal-box {
        max-height: calc(90vh - env(safe-area-inset-top));
        margin-top: env(safe-area-inset-top);
    }

    /* Search bar: bigger tap target + 16px font prevents iOS zoom-on-focus */
    .search-input {
        min-height: 44px;
        font-size: 16px;
    }

    /* Player page: hide noise + give game maximum real estate */
    .player-body .player-header { padding: 6px 8px; min-height: 0; }
    .player-body #gameTitle { font-size: 0.95rem; }

    .game-info-tag, .active-tag-pill {
        padding: 0.5rem 0.85rem !important;
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .game-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 6px;
    }
    .header-content { gap: 8px; }
    .pwa-install-btn { padding: 0.4rem 0.6rem; font-size: 0.78rem; }
    .auth-username { max-width: 90px; overflow: hidden; text-overflow: ellipsis; }
}

@media (max-width: 360px) {
    .game-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 4px;
    }
    .header-logo { height: 24px; }
    .tab-btn { font-size: 0.78rem; padding: 0.4rem 0.6rem; }
}

/* Crisp tap response — no 300ms double-tap zoom delay anywhere */
button, a, input[type="button"], input[type="submit"], .tab-btn, .cat-btn {
    touch-action: manipulation;
}

/* iOS momentum scrolling on every scroll container */
.game-grid, .tab-bar, .categories, .modal-box, .game-info-modal,
.continue-strip, .catalog-admin-table, .bulk-add-results,
.custom-tag-manage-grid, .apply-tags-grid, .game-info-recs {
    -webkit-overflow-scrolling: touch;
}

/* Prevent accidental text selection on UI chrome */
.tab-bar, .categories, .header, .modal-header {
    -webkit-user-select: none;
    user-select: none;
}

/* Lift Kirky avatar above iOS install banner so they don't overlap */
@media (max-width: 480px) {
    .ios-install-banner ~ .kirky-trigger {
        bottom: 110px;
    }
}

/* Watch party — viewer list on host side */
.coop-viewer-list {
    margin: 12px 0 4px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.4;
    max-height: 100px;
    overflow-y: auto;
}
.coop-viewer-list strong { color: var(--text-primary); }
.coop-no-viewers { opacity: 0.65; }

/* Save state thumbnails */
.save-row { display: flex; align-items: center; gap: 12px; }
.save-thumb {
    width: 64px; height: 36px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
    background: rgba(255,255,255,0.05);
}
.save-thumb-placeholder {
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; opacity: 0.4;
}
.saves-thumb-row {
    display: flex; align-items: center; gap: 8px;
    color: var(--text-secondary);
    font-size: 0.85rem;
}
.saves-thumb-row input[type=file] { font-size: 0.78rem; flex: 1; }

/* Catalog health admin tab */
.ch-panel { padding: 12px 16px 24px; }
.ch-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.ch-header h2 { margin: 0; }
.ch-export {
    background: rgba(124,58,237,0.15);
    color: var(--text-primary);
    border: 1px solid rgba(124,58,237,0.4);
    border-radius: 6px;
    padding: 6px 12px; font-weight: 600; cursor: pointer;
    font-size: 0.85rem;
}
.ch-summary {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 14px;
    font-size: 0.88rem;
    display: flex; flex-wrap: wrap; gap: 6px 14px;
    color: var(--text-secondary);
}
.ch-summary strong { color: var(--text-primary); }
.ch-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,0.08); padding-bottom: 8px; }
.ch-tab {
    background: transparent; color: var(--text-secondary);
    border: 1px solid transparent; border-radius: 6px;
    padding: 6px 12px; font-size: 0.82rem; font-weight: 600; cursor: pointer;
}
.ch-tab.is-active { background: rgba(124,58,237,0.18); color: var(--text-primary); border-color: rgba(124,58,237,0.45); }
.ch-empty { color: var(--text-secondary); padding: 1rem 0; text-align: center; opacity: 0.8; }
.ch-hint { color: var(--text-secondary); font-size: 0.85rem; margin: 0 0 10px; opacity: 0.85; }
.ch-list { display: flex; flex-direction: column; gap: 4px; }
.ch-row {
    display: grid;
    grid-template-columns: 200px 1fr 130px 80px;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.04);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 0.85rem;
}
.ch-row-id { color: var(--text-secondary); font-family: ui-monospace, monospace; font-size: 0.78rem; }
.ch-row-title { color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-row-cat { color: var(--text-secondary); font-size: 0.78rem; }
.ch-row-open { color: var(--accent); text-decoration: none; text-align: center; }
.ch-row-open:hover { text-decoration: underline; }
@media (max-width: 720px) {
    .ch-row { grid-template-columns: 1fr 80px; gap: 4px 10px; }
    .ch-row-id { grid-column: 1 / -1; }
    .ch-row-cat { grid-column: 1 / 2; }
}

/* Errors admin dashboard (reuses .ch-panel base) */
.ea-header-actions { display: flex; gap: 8px; }
.ea-danger { background: rgba(239, 68, 68, 0.15); color: #fca5a5; }
.ea-danger:hover { background: rgba(239, 68, 68, 0.25); }
.ea-cap { color: var(--text-secondary); font-size: 0.8rem; }
.ea-filter-row { margin: 12px 0; }
.ea-filter-row .auth-input { width: 100%; }
.ea-list { display: flex; flex-direction: column; gap: 6px; }
.ea-row {
    background: rgba(255,255,255,0.04);
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.06);
}
.ea-row[open] { background: rgba(255,255,255,0.06); }
.ea-row-summary {
    display: grid;
    grid-template-columns: 50px 1fr 200px 90px;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    cursor: pointer;
    font-size: 0.85rem;
    list-style: none;
}
.ea-row-summary::-webkit-details-marker { display: none; }
.ea-count {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
    font-weight: 700;
    text-align: center;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 0.78rem;
}
.ea-msg { color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, monospace; }
.ea-source { color: var(--text-secondary); font-size: 0.78rem; font-family: ui-monospace, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ea-time { color: var(--text-secondary); font-size: 0.78rem; text-align: right; }
.ea-row-body { padding: 0 12px 12px; border-top: 1px solid rgba(255,255,255,0.06); }
.ea-stack {
    background: rgba(0,0,0,0.4);
    color: #fca5a5;
    padding: 10px 12px;
    border-radius: 4px;
    font-size: 0.78rem;
    overflow-x: auto;
    margin: 12px 0;
    white-space: pre;
    max-height: 200px;
}
.ea-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 6px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 10px;
}
.ea-occ-list { display: flex; flex-direction: column; gap: 4px; }
.ea-occ {
    display: grid;
    grid-template-columns: 1fr 180px 140px 32px;
    align-items: center;
    gap: 8px;
    background: rgba(0,0,0,0.2);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
}
.ea-occ code { color: var(--accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ea-occ-del {
    background: transparent;
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #fca5a5;
    border-radius: 4px;
    cursor: pointer;
    line-height: 1;
    width: 24px; height: 24px;
}
.ea-occ-del:hover { background: rgba(239, 68, 68, 0.2); }
.ea-occ-more { color: var(--text-secondary); font-size: 0.78rem; padding: 4px 8px; }
@media (max-width: 720px) {
    .ea-row-summary { grid-template-columns: 50px 1fr 80px; }
    .ea-source { display: none; }
    .ea-occ { grid-template-columns: 1fr 32px; }
    .ea-occ > span { display: none; }
}

/* Pull-to-refresh indicator (mobile home grid) */
#arcade-ptr-indicator {
    position: fixed;
    top: 0; left: 50%;
    transform: translate(-50%, -60px);
    z-index: 99999;
    background: var(--accent, #7c3aed);
    color: #fff;
    padding: 8px 14px;
    border-radius: 999px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.4);
    display: flex; align-items: center; gap: 8px;
    font-size: 0.85rem; font-weight: 700;
    pointer-events: none;
    opacity: 0;
}
#arcade-ptr-indicator .arcade-ptr-spinner {
    width: 16px; height: 16px;
    border: 2px solid rgba(255,255,255,0.35);
    border-top-color: #fff;
    border-radius: 50%;
}
#arcade-ptr-indicator.is-armed .arcade-ptr-spinner { background: #fff; }
#arcade-ptr-indicator.is-loading .arcade-ptr-spinner {
    animation: ptr-spin 0.7s linear infinite;
    background: transparent;
}
@keyframes ptr-spin { to { transform: rotate(360deg); } }

/* Profile BGM mute toggle — pinned to top-right of the profile modal */
.profile-bgm-toggle {
    position: absolute;
    top: 12px; right: 56px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    width: 32px; height: 32px;
    cursor: pointer;
    z-index: 100;
    font-size: 14px;
    line-height: 1;
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.profile-bgm-toggle:hover { background: rgba(0, 0, 0, 0.7); }

/* First-visit "Install as app" nag banner (mobile-only) */
.arcade-install-nag {
    position: fixed;
    left: 12px; right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 9001;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.95), rgba(168, 85, 247, 0.95));
    color: white;
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    animation: install-nag-in 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}
@keyframes install-nag-in {
    from { transform: translateY(120%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.arcade-install-nag-icon {
    width: 44px; height: 44px;
    border-radius: 10px;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.arcade-install-nag-text {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 2px;
    line-height: 1.25;
}
.arcade-install-nag-text strong { font-weight: 700; font-size: 0.95rem; }
.arcade-install-nag-text span { font-size: 0.8rem; opacity: 0.9; }
.arcade-install-nag-cta {
    background: #fff; color: #7c3aed;
    border: none;
    border-radius: 999px;
    padding: 8px 16px;
    font-weight: 700; font-size: 0.85rem;
    cursor: pointer;
    flex-shrink: 0;
}
.arcade-install-nag-close {
    background: rgba(255,255,255,0.18);
    color: white; border: none;
    width: 28px; height: 28px;
    border-radius: 50%;
    font-size: 18px; line-height: 1;
    cursor: pointer; flex-shrink: 0;
    padding: 0;
}
.arcade-install-nag-close:hover { background: rgba(255,255,255,0.28); }

/* Per-theme wallpaper override controls in Settings → Appearance */
.arcade-settings-wp-row {
    display: flex; gap: 8px; flex-wrap: wrap;
}
.arcade-settings-wp-row button { flex: 0 0 auto; }
.arcade-settings-wp-status {
    margin-top: 8px;
    padding: 8px 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 0.85rem;
    word-break: break-all;
}
.arcade-settings-wp-dropzone {
    margin: 8px 0 12px;
    padding: 22px 16px;
    border: 2px dashed rgba(255,255,255,0.18);
    border-radius: 10px;
    background: rgba(255,255,255,0.02);
    color: var(--text-secondary);
    text-align: center;
    cursor: pointer;
    transition: border-color 120ms, background 120ms, transform 120ms;
    outline: none;
}
.arcade-settings-wp-dropzone:hover,
.arcade-settings-wp-dropzone:focus-visible {
    border-color: var(--accent, #7c3aed);
    background: rgba(124, 58, 237, 0.08);
}
.arcade-settings-wp-dropzone.is-dragover {
    border-color: var(--accent, #7c3aed);
    background: rgba(124, 58, 237, 0.18);
    transform: scale(1.01);
}
.arcade-settings-wp-dropzone-hint {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    pointer-events: none;
}
.arcade-settings-wp-dropzone-icon { font-size: 1.6rem; }

/* ===========================================================
   New components: share button, comments, top games, achievements,
   friends, coop control toggle, achievement-unlock animation.
   =========================================================== */

.game-info-share-btn {
    display: inline-block;
    padding: 0.5rem 0.95rem;
    margin: 0.25rem 0.25rem;
    background: rgba(124, 58, 237, 0.15);
    color: var(--text-primary);
    border: 1px solid rgba(124, 58, 237, 0.4);
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}
.game-info-share-btn:hover { background: rgba(124, 58, 237, 0.28); }
.game-info-share-btn:active { transform: translateY(1px); }

/* ─── Game comments ─── */
.game-comments {
    margin: 1.25rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.game-comments-title {
    margin: 0 0 0.6rem;
    font-size: 1.05rem;
    color: var(--text-primary);
}
.game-comments-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    max-height: 340px;
    overflow-y: auto;
    padding-right: 4px;
}
.game-comment {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 0.55rem 0.75rem;
}
.game-comment-head {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.78rem; color: var(--text-secondary);
    margin-bottom: 4px;
}
.game-comment-author {
    color: var(--accent); font-weight: 700; cursor: pointer;
}
.game-comment-author:hover { text-decoration: underline; }
.game-comment-time { opacity: 0.7; }
.game-comment-del {
    margin-left: auto; background: transparent; border: none;
    color: rgba(255,255,255,0.45); cursor: pointer; font-size: 1rem;
    padding: 0 4px;
}
.game-comment-del:hover { color: #ef4444; }
.game-comment-text { color: var(--text-primary); font-size: 0.92rem; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.game-comments-loading,
.game-comments-empty,
.game-comments-loggedout {
    color: var(--text-secondary); font-size: 0.88rem;
    padding: 0.6rem 0; opacity: 0.75;
}
.game-comments-compose {
    margin-top: 0.85rem;
    display: flex; flex-direction: column; gap: 6px;
}
.game-comments-input {
    width: 100%; box-sizing: border-box; resize: vertical;
    min-height: 64px; padding: 0.55rem 0.7rem;
    background: rgba(255, 255, 255, 0.05); color: var(--text-primary);
    border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px;
    font: inherit; font-size: 0.92rem;
}
.game-comments-input:focus { outline: none; border-color: var(--accent); }
.game-comments-compose-row {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 0.8rem; color: var(--text-secondary);
}
.game-comments-post {
    background: var(--accent); color: white; border: none;
    border-radius: 6px; padding: 0.45rem 0.95rem;
    font-weight: 700; cursor: pointer;
}
.game-comments-post:disabled { opacity: 0.6; cursor: wait; }

/* ─── Profile: top games + achievements ─── */
.profile-top-games {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
}
.profile-top-card {
    position: relative;
    display: flex; flex-direction: column; align-items: stretch;
    text-decoration: none; color: inherit;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 8px; overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: transform 0.15s, box-shadow 0.15s;
}
.profile-top-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.35); }
.profile-top-rank {
    position: absolute; top: 4px; left: 4px;
    background: rgba(0,0,0,0.7); color: white;
    padding: 2px 6px; border-radius: 4px;
    font-size: 0.72rem; font-weight: 800;
}
.profile-top-thumb {
    width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
    background: rgba(255,255,255,0.08);
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; font-weight: 800; color: rgba(255,255,255,0.6);
}
.profile-top-thumb-placeholder { background: linear-gradient(135deg, #1f1f33, #2a2a44); }
.profile-top-title {
    padding: 6px 8px 1px;
    font-size: 0.82rem; font-weight: 600; color: var(--text-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.profile-top-count {
    padding: 0 8px 6px; font-size: 0.72rem; color: var(--text-secondary);
}

.profile-achievements {
    display: flex; flex-wrap: wrap; gap: 8px;
}
.profile-ach {
    display: flex; align-items: center; gap: 6px;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.18), rgba(168, 85, 247, 0.12));
    border: 1px solid rgba(124, 58, 237, 0.4);
    color: var(--text-primary);
    padding: 6px 10px; border-radius: 999px;
    font-size: 0.85rem; font-weight: 600;
    cursor: help;
}
.profile-ach-icon { font-size: 1.05rem; }

/* Friend button on profile */
.profile-friend-btn {
    background: var(--accent); color: white; border: none;
    border-radius: 8px; padding: 0.55rem 1.1rem;
    font-weight: 700; font-size: 0.92rem; cursor: pointer;
    margin-right: 8px;
}
.profile-friend-btn.is-friend { background: rgba(34,197,94,0.18); border: 1px solid rgba(34,197,94,0.5); color: #86efac; }
.profile-friend-btn.is-pending { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.18); color: var(--text-secondary); }
.profile-friend-btn.is-accept { background: rgba(34,197,94,0.45); }
.profile-friend-btn.is-decline { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.18); color: var(--text-secondary); }
.profile-friend-btn:hover { filter: brightness(1.1); }
.profile-friend-btn:disabled { opacity: 0.6; cursor: wait; }

/* ─── Friends tab ─── */
.friends-panel { padding: 12px 16px 24px; }
.friends-header h2 { margin: 0 0 12px; }
.friends-tabs {
    display: flex; gap: 6px; flex-wrap: wrap;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding-bottom: 8px;
}
.friends-tab {
    background: transparent; color: var(--text-secondary);
    border: 1px solid transparent; border-radius: 6px;
    padding: 0.4rem 0.85rem; font-weight: 600; cursor: pointer;
}
.friends-tab.is-active {
    background: rgba(124,58,237,0.18); color: white;
    border-color: rgba(124,58,237,0.45);
}
.friends-empty {
    color: var(--text-secondary); padding: 1rem 0;
    text-align: center; opacity: 0.8;
}
.friends-feed {
    display: flex; flex-direction: column; gap: 8px;
}
.friends-feed-item {
    display: flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px; padding: 8px 12px;
    font-size: 0.92rem;
    flex-wrap: wrap;
}
.friends-feed-name {
    color: var(--accent); font-weight: 700; cursor: pointer;
}
.friends-feed-name:hover { text-decoration: underline; }
.friends-feed-time { color: var(--text-secondary); font-size: 0.8rem; }
.friends-feed-live {
    color: #ef4444; font-weight: 700; font-size: 0.78rem;
    animation: ach-live-pulse 1.5s ease-in-out infinite;
}
@keyframes ach-live-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
.friends-feed-action { color: var(--text-secondary); }
.friends-feed-game {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--text-primary); text-decoration: none;
    background: rgba(124,58,237,0.12);
    padding: 4px 10px; border-radius: 999px;
    font-weight: 600;
}
.friends-feed-game:hover { background: rgba(124,58,237,0.22); }
.friends-feed-thumb {
    width: 26px; height: 26px; border-radius: 4px; object-fit: cover;
}
.friends-feed-thumb-placeholder {
    background: rgba(255,255,255,0.08);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 800; color: rgba(255,255,255,0.7);
}
.friends-list, .friends-requests {
    display: flex; flex-direction: column; gap: 6px;
}
.friends-list-row, .friends-request-row {
    display: flex; align-items: center; gap: 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px; padding: 10px 14px;
}
.friends-list-name, .friends-request-name {
    color: var(--accent); font-weight: 700; cursor: pointer; flex: 1;
}
.friends-list-name:hover, .friends-request-name:hover { text-decoration: underline; }
.friends-list-msg, .friends-list-remove,
.friends-request-accept, .friends-request-decline {
    background: rgba(255,255,255,0.06);
    color: var(--text-primary);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px;
    padding: 0.4rem 0.85rem;
    font-weight: 600; font-size: 0.85rem; cursor: pointer;
}
.friends-list-remove:hover { background: rgba(239,68,68,0.18); border-color: rgba(239,68,68,0.45); color: #fecaca; }
.friends-request-accept { background: rgba(34,197,94,0.2); border-color: rgba(34,197,94,0.45); color: #86efac; }
.friends-request-decline:hover { background: rgba(239,68,68,0.18); }

/* ─── Coop: allow-control toggle ─── */
.coop-control-toggle-row {
    margin: 12px 0 4px;
    display: flex; justify-content: center;
}
.coop-allow-control-btn {
    background: rgba(124,58,237,0.18);
    color: var(--text-primary);
    border: 1px solid rgba(124,58,237,0.45);
    border-radius: 8px; padding: 0.5rem 0.9rem;
    font-weight: 600; cursor: pointer;
}
.coop-allow-control-btn.is-on {
    background: rgba(34,197,94,0.22);
    border-color: rgba(34,197,94,0.55);
    color: #86efac;
}

/* Achievement unlock toast (entry animation) */
@keyframes ach-toast-in {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* =============================================================
   USER CUSTOMIZATION (settings.js)
   - Density classes
   - View modes (grid / list / detailed)
   - Card styles (standard / minimal / detailed / trading)
   - Font families + scale
   - Reduced motion / transparency overrides
   - Theme presets (OLED / Light / CRT / Pastel / High-contrast / Synthwave)
   - Settings modal
   - Right-click card menu
   ============================================================= */

/* Font scale — applied via --font-scale CSS var on <html> */
html { font-size: calc(16px * var(--font-scale, 1)); }

/* Font families. !important is required — several effect themes
   (matrix, glitch, vaporwave, cyberpunk, amber, crt) set their own
   font-family via `html[data-theme="X"] body` rules with higher
   specificity than `body.font-X`. Without !important the user's
   font choice silently lost when those themes were active. */
body.font-system { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; }
body.font-mono { font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', Consolas, ui-monospace, monospace !important; }
body.font-pixel { font-family: 'Press Start 2P', 'Courier New', ui-monospace, monospace !important; letter-spacing: 0.02em; }
body.font-serif { font-family: Georgia, 'Iowan Old Style', 'Times New Roman', serif !important; }
body.font-rounded { font-family: 'Comic Neue', 'Comic Sans MS', 'Chalkboard SE', sans-serif !important; }
body.font-handwritten { font-family: 'Caveat', 'Brush Script MT', 'Lucida Handwriting', cursive !important; letter-spacing: 0.02em; font-size: 1.05em; }
body.font-futuristic { font-family: 'Orbitron', 'Eurostile', 'Bank Gothic', 'Bahnschrift', sans-serif !important; letter-spacing: 0.06em; }
body.font-elegant { font-family: 'Cinzel', 'Didot', 'Bodoni 72', 'Iowan Old Style', serif !important; letter-spacing: 0.04em; }

/* Dyslexia-friendly mode is now a separate TOGGLE (not a font option),
   so it layers on top of whatever font the user picked. Switches to a
   wider sans-serif and bumps letter / word / line spacing. !important
   wins over font-family rules above so the toggle "captures" any
   selected family. */
body.dyslexic-mode {
    font-family: 'Atkinson Hyperlegible', 'OpenDyslexic', Verdana, Tahoma, sans-serif !important;
    letter-spacing: 0.05em !important;
    word-spacing: 0.1em !important;
    line-height: 1.6;
}

/* ─── Density ─── */
body.density-compact .game-card { aspect-ratio: 1 / 1.15; }
body.density-compact .game-grid { gap: 4px; }
body.density-compact .game-info-modal { padding: 1rem; }
body.density-compact .game-card-title { font-size: 0.75rem; padding: 0.35rem 0.5rem; }

body.density-spacious .game-card { aspect-ratio: 1 / 1.4; }
body.density-spacious .game-grid { gap: 16px; }
body.density-spacious .game-card-title { font-size: 0.95rem; padding: 0.7rem 0.8rem; }

/* ─── View modes ─── */
body.view-list .game-grid {
    grid-template-columns: 1fr !important;
    gap: 4px;
}
body.view-list .game-card {
    aspect-ratio: auto !important;
    height: 56px;
    flex-direction: row !important;
    display: flex !important;
    align-items: center;
    padding: 6px 12px;
}
body.view-list .game-card-thumb,
body.view-list .game-card img {
    width: 44px !important; height: 44px !important;
    aspect-ratio: 1/1; object-fit: cover; border-radius: 6px;
    flex-shrink: 0;
}
body.view-list .game-card-title {
    position: static !important;
    background: transparent !important;
    padding: 0 0 0 12px !important;
    font-size: 0.95rem;
}
body.view-list .fav-btn { margin-left: auto; }

body.view-detailed .game-grid {
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)) !important;
    gap: 12px;
}
body.view-detailed .game-card {
    aspect-ratio: auto !important;
    height: 120px;
    flex-direction: row !important;
    display: flex !important;
    padding: 10px;
}
body.view-detailed .game-card-thumb,
body.view-detailed .game-card img {
    width: 100px !important; height: 100px !important;
    aspect-ratio: 1/1; object-fit: cover; border-radius: 8px;
    flex-shrink: 0;
}
body.view-detailed .game-card::after {
    content: attr(data-card-desc);
    position: absolute; left: 122px; top: 36px; right: 50px;
    font-size: 0.8rem; line-height: 1.35; color: var(--text-secondary);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden;
}
body.view-detailed .game-card-title {
    position: static !important; background: transparent !important;
    padding: 0 0 0 12px !important;
    font-size: 1rem; font-weight: 700; align-self: flex-start;
}

/* ─── Card styles ─── */
body.cards-minimal .game-card-title { display: none; }
body.cards-minimal .game-card { aspect-ratio: 1 / 1; }

body.cards-detailed .game-card::after {
    content: attr(data-card-desc);
    position: absolute; left: 8px; right: 8px; bottom: 36px;
    font-size: 0.72rem; line-height: 1.3; color: rgba(255,255,255,0.85);
    background: linear-gradient(transparent, rgba(0,0,0,0.85) 30%);
    padding: 24px 8px 8px;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden;
    pointer-events: none;
}

body.cards-trading .game-card {
    border: 2px solid var(--accent);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.35), inset 0 0 0 1px rgba(255,255,255,0.1);
    border-radius: 14px;
    transform: perspective(800px) rotateX(2deg);
    transition: transform 0.25s, box-shadow 0.25s;
}
body.cards-trading .game-card:hover {
    transform: perspective(800px) rotateX(0deg) translateY(-3px);
    box-shadow: 0 10px 28px rgba(124, 58, 237, 0.55);
}

/* ─── Pinned card indicator ─── */
.game-card.is-pinned::before {
    content: "📌";
    position: absolute;
    top: 4px; left: 4px;
    font-size: 16px;
    z-index: 2;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6));
}

/* ─── Reduced motion ─── */
body.theme-no-motion *, body.theme-no-motion *::before, body.theme-no-motion *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
}

/* ─── Reduced transparency ─── */
body.no-transparency *, body.no-transparency *::before, body.no-transparency *::after {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
body.no-transparency .modal-overlay { background: rgba(0, 0, 0, 0.92) !important; }

/* =====================================================
   THEME-SPECIFIC VISUAL EXTRAS
   themes.js sets the CSS variables (bg, text, accent) for every
   theme via inline style.setProperty(). The rules below add the
   theme-specific extras that can't be expressed as variables —
   the CRT scanline overlay, the high-contrast no-shadow rule, etc.
   ===================================================== */

/* Retro CRT — pixel font + green text-glow + scanline overlay */
html[data-theme="crt"] body {
    font-family: 'Press Start 2P', 'Courier New', monospace;
    text-shadow: 0 0 4px rgba(0, 255, 102, 0.4);
}
html[data-theme="crt"] body::before {
    content: "";
    position: fixed; inset: 0;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.18),
        rgba(0, 0, 0, 0.18) 1px,
        transparent 1px,
        transparent 3px
    );
    pointer-events: none; z-index: 99999;
}

/* High Contrast — flatten visuals for accessibility */
html[data-theme="highcontrast"] *,
html[data-theme="highcontrast"] *::before,
html[data-theme="highcontrast"] *::after {
    text-shadow: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}
html[data-theme="highcontrast"] button,
html[data-theme="highcontrast"] .tab-btn,
html[data-theme="highcontrast"] .cat-btn {
    border: 2px solid #fff !important;
}

/* =====================================================
   EFFECT-DRIVEN THEMES
   Pure-CSS visual effects layered on top of the base
   theme colors set by themes.js.
   ===================================================== */

/* ─── Glitch: chromatic aberration + occasional jitter ─── */
html[data-theme="glitch"] body { font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace; }
html[data-theme="glitch"] h1,
html[data-theme="glitch"] h2,
html[data-theme="glitch"] .header-logo,
html[data-theme="glitch"] .card-title,
html[data-theme="glitch"] .game-info-title {
    text-shadow:
        2px 0 0 #ff006e,
        -2px 0 0 #00f0ff,
        0 0 4px rgba(255, 0, 110, 0.5);
    animation: glitch-jitter 6s steps(8) infinite;
}
html[data-theme="glitch"] body::before {
    content: "";
    position: fixed; inset: 0;
    pointer-events: none; z-index: 99998;
    background: repeating-linear-gradient(
        0deg, rgba(0,240,255,0.03) 0 1px, transparent 1px 4px
    );
    mix-blend-mode: screen;
}
@keyframes glitch-jitter {
    0%, 88%, 100% { transform: translate(0, 0); }
    90% { transform: translate(-1px, 0); }
    91% { transform: translate(2px, 1px); }
    92% { transform: translate(-2px, 0); }
    93% { transform: translate(1px, -1px); }
}

/* ─── Matrix: real falling green characters via SVG (NEW) ─── */
html[data-theme="matrix"] body { font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace; }
/* Layer 1 — denser, smaller chars, faster fall (5s loop). 8 columns × 24 rows */
html[data-theme="matrix"] body::before {
    content: "";
    position: fixed; inset: 0;
    pointer-events: none; z-index: 0;
    background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20480%20432%22%20preserveAspectRatio%3D%22none%22%3E%3Cstyle%3Etext%7Bfont%3Abold%2014px%20monospace%3Bfill%3A%2300ff41%7D.b%7Bfill%3A%23dfffdf%7D.d%7Bfill%3A%23006611%7D%3C%2Fstyle%3E%3Ctext%20x%3D%2230%22%20y%3D%2218%22%20class%3D%22b%22%3E1%3C%2Ftext%3E%3Ctext%20x%3D%2230%22%20y%3D%2236%22%3EA%3C%2Ftext%3E%3Ctext%20x%3D%2230%22%20y%3D%2254%22%3E*%3C%2Ftext%3E%3Ctext%20x%3D%2230%22%20y%3D%2272%22%3EA%3C%2Ftext%3E%3Ctext%20x%3D%2230%22%20y%3D%2290%22%3E%23%3C%2Ftext%3E%3Ctext%20x%3D%2230%22%20y%3D%22108%22%3E3%3C%2Ftext%3E%3Ctext%20x%3D%2230%22%20y%3D%22126%22%3EX%3C%2Ftext%3E%3Ctext%20x%3D%2230%22%20y%3D%22144%22%3EK%3C%2Ftext%3E%3Ctext%20x%3D%2230%22%20y%3D%22162%22%3EA%3C%2Ftext%3E%3Ctext%20x%3D%2230%22%20y%3D%22180%22%20class%3D%22d%22%3EK%3C%2Ftext%3E%3Ctext%20x%3D%2230%22%20y%3D%22198%22%20class%3D%22d%22%3E1%3C%2Ftext%3E%3Ctext%20x%3D%2230%22%20y%3D%22216%22%3E9%3C%2Ftext%3E%3Ctext%20x%3D%2230%22%20y%3D%22234%22%20class%3D%22d%22%3E0%3C%2Ftext%3E%3Ctext%20x%3D%2230%22%20y%3D%22252%22%3E1%3C%2Ftext%3E%3Ctext%20x%3D%2230%22%20y%3D%22270%22%3E%25%3C%2Ftext%3E%3Ctext%20x%3D%2230%22%20y%3D%22288%22%3EK%3C%2Ftext%3E%3Ctext%20x%3D%2230%22%20y%3D%22306%22%20class%3D%22d%22%3E1%3C%2Ftext%3E%3Ctext%20x%3D%2230%22%20y%3D%22324%22%3EA%3C%2Ftext%3E%3Ctext%20x%3D%2230%22%20y%3D%22342%22%3EA%3C%2Ftext%3E%3Ctext%20x%3D%2230%22%20y%3D%22360%22%20class%3D%22d%22%3E%23%3C%2Ftext%3E%3Ctext%20x%3D%2230%22%20y%3D%22378%22%3E*%3C%2Ftext%3E%3Ctext%20x%3D%2230%22%20y%3D%22396%22%3EK%3C%2Ftext%3E%3Ctext%20x%3D%2230%22%20y%3D%22414%22%3E*%3C%2Ftext%3E%3Ctext%20x%3D%2230%22%20y%3D%22432%22%3E0%3C%2Ftext%3E%3Ctext%20x%3D%2290%22%20y%3D%2218%22%20class%3D%22b%22%3EA%3C%2Ftext%3E%3Ctext%20x%3D%2290%22%20y%3D%2236%22%3E%25%3C%2Ftext%3E%3Ctext%20x%3D%2290%22%20y%3D%2254%22%3EX%3C%2Ftext%3E%3Ctext%20x%3D%2290%22%20y%3D%2272%22%20class%3D%22d%22%3E%25%3C%2Ftext%3E%3Ctext%20x%3D%2290%22%20y%3D%2290%22%3EA%3C%2Ftext%3E%3Ctext%20x%3D%2290%22%20y%3D%22108%22%20class%3D%22d%22%3EZ%3C%2Ftext%3E%3Ctext%20x%3D%2290%22%20y%3D%22126%22%20class%3D%22d%22%3E7%3C%2Ftext%3E%3Ctext%20x%3D%2290%22%20y%3D%22144%22%3E3%3C%2Ftext%3E%3Ctext%20x%3D%2290%22%20y%3D%22162%22%3E7%3C%2Ftext%3E%3Ctext%20x%3D%2290%22%20y%3D%22180%22%3EA%3C%2Ftext%3E%3Ctext%20x%3D%2290%22%20y%3D%22198%22%20class%3D%22d%22%3EX%3C%2Ftext%3E%3Ctext%20x%3D%2290%22%20y%3D%22216%22%20class%3D%22d%22%3E*%3C%2Ftext%3E%3Ctext%20x%3D%2290%22%20y%3D%22234%22%3E0%3C%2Ftext%3E%3Ctext%20x%3D%2290%22%20y%3D%22252%22%3E3%3C%2Ftext%3E%3Ctext%20x%3D%2290%22%20y%3D%22270%22%3EA%3C%2Ftext%3E%3Ctext%20x%3D%2290%22%20y%3D%22288%22%20class%3D%22d%22%3EX%3C%2Ftext%3E%3Ctext%20x%3D%2290%22%20y%3D%22306%22%3E3%3C%2Ftext%3E%3Ctext%20x%3D%2290%22%20y%3D%22324%22%3EK%3C%2Ftext%3E%3Ctext%20x%3D%2290%22%20y%3D%22342%22%3EX%3C%2Ftext%3E%3Ctext%20x%3D%2290%22%20y%3D%22360%22%20class%3D%22d%22%3EZ%3C%2Ftext%3E%3Ctext%20x%3D%2290%22%20y%3D%22378%22%3EA%3C%2Ftext%3E%3Ctext%20x%3D%2290%22%20y%3D%22396%22%20class%3D%22d%22%3EK%3C%2Ftext%3E%3Ctext%20x%3D%2290%22%20y%3D%22414%22%20class%3D%22d%22%3EZ%3C%2Ftext%3E%3Ctext%20x%3D%2290%22%20y%3D%22432%22%20class%3D%22d%22%3E7%3C%2Ftext%3E%3Ctext%20x%3D%22150%22%20y%3D%2218%22%20class%3D%22b%22%3E7%3C%2Ftext%3E%3Ctext%20x%3D%22150%22%20y%3D%2236%22%20class%3D%22d%22%3EA%3C%2Ftext%3E%3Ctext%20x%3D%22150%22%20y%3D%2254%22%20class%3D%22d%22%3E7%3C%2Ftext%3E%3Ctext%20x%3D%22150%22%20y%3D%2272%22%3EX%3C%2Ftext%3E%3Ctext%20x%3D%22150%22%20y%3D%2290%22%20class%3D%22d%22%3E7%3C%2Ftext%3E%3Ctext%20x%3D%22150%22%20y%3D%22108%22%3E3%3C%2Ftext%3E%3Ctext%20x%3D%22150%22%20y%3D%22126%22%3E7%3C%2Ftext%3E%3Ctext%20x%3D%22150%22%20y%3D%22144%22%3E1%3C%2Ftext%3E%3Ctext%20x%3D%22150%22%20y%3D%22162%22%3E1%3C%2Ftext%3E%3Ctext%20x%3D%22150%22%20y%3D%22180%22%20class%3D%22d%22%3E0%3C%2Ftext%3E%3Ctext%20x%3D%22150%22%20y%3D%22198%22%3E%25%3C%2Ftext%3E%3Ctext%20x%3D%22150%22%20y%3D%22216%22%3E%25%3C%2Ftext%3E%3Ctext%20x%3D%22150%22%20y%3D%22234%22%20class%3D%22d%22%3EK%3C%2Ftext%3E%3Ctext%20x%3D%22150%22%20y%3D%22252%22%20class%3D%22d%22%3EZ%3C%2Ftext%3E%3Ctext%20x%3D%22150%22%20y%3D%22270%22%20class%3D%22d%22%3E%25%3C%2Ftext%3E%3Ctext%20x%3D%22150%22%20y%3D%22288%22%3EA%3C%2Ftext%3E%3Ctext%20x%3D%22150%22%20y%3D%22306%22%20class%3D%22d%22%3E0%3C%2Ftext%3E%3Ctext%20x%3D%22150%22%20y%3D%22324%22%3E*%3C%2Ftext%3E%3Ctext%20x%3D%22150%22%20y%3D%22342%22%3EX%3C%2Ftext%3E%3Ctext%20x%3D%22150%22%20y%3D%22360%22%3E1%3C%2Ftext%3E%3Ctext%20x%3D%22150%22%20y%3D%22378%22%20class%3D%22d%22%3EZ%3C%2Ftext%3E%3Ctext%20x%3D%22150%22%20y%3D%22396%22%3E7%3C%2Ftext%3E%3Ctext%20x%3D%22150%22%20y%3D%22414%22%3E%25%3C%2Ftext%3E%3Ctext%20x%3D%22150%22%20y%3D%22432%22%3E0%3C%2Ftext%3E%3Ctext%20x%3D%22210%22%20y%3D%2218%22%20class%3D%22b%22%3E0%3C%2Ftext%3E%3Ctext%20x%3D%22210%22%20y%3D%2236%22%3E%23%3C%2Ftext%3E%3Ctext%20x%3D%22210%22%20y%3D%2254%22%20class%3D%22d%22%3E%23%3C%2Ftext%3E%3Ctext%20x%3D%22210%22%20y%3D%2272%22%20class%3D%22d%22%3E%23%3C%2Ftext%3E%3Ctext%20x%3D%22210%22%20y%3D%2290%22%3EX%3C%2Ftext%3E%3Ctext%20x%3D%22210%22%20y%3D%22108%22%3E%25%3C%2Ftext%3E%3Ctext%20x%3D%22210%22%20y%3D%22126%22%3EZ%3C%2Ftext%3E%3Ctext%20x%3D%22210%22%20y%3D%22144%22%20class%3D%22d%22%3EA%3C%2Ftext%3E%3Ctext%20x%3D%22210%22%20y%3D%22162%22%3E1%3C%2Ftext%3E%3Ctext%20x%3D%22210%22%20y%3D%22180%22%3E7%3C%2Ftext%3E%3Ctext%20x%3D%22210%22%20y%3D%22198%22%3E%23%3C%2Ftext%3E%3Ctext%20x%3D%22210%22%20y%3D%22216%22%3EX%3C%2Ftext%3E%3Ctext%20x%3D%22210%22%20y%3D%22234%22%3E7%3C%2Ftext%3E%3Ctext%20x%3D%22210%22%20y%3D%22252%22%3E%25%3C%2Ftext%3E%3Ctext%20x%3D%22210%22%20y%3D%22270%22%3E3%3C%2Ftext%3E%3Ctext%20x%3D%22210%22%20y%3D%22288%22%20class%3D%22d%22%3EX%3C%2Ftext%3E%3Ctext%20x%3D%22210%22%20y%3D%22306%22%3E%23%3C%2Ftext%3E%3Ctext%20x%3D%22210%22%20y%3D%22324%22%20class%3D%22d%22%3E*%3C%2Ftext%3E%3Ctext%20x%3D%22210%22%20y%3D%22342%22%3E*%3C%2Ftext%3E%3Ctext%20x%3D%22210%22%20y%3D%22360%22%20class%3D%22d%22%3EX%3C%2Ftext%3E%3Ctext%20x%3D%22210%22%20y%3D%22378%22%3E%23%3C%2Ftext%3E%3Ctext%20x%3D%22210%22%20y%3D%22396%22%20class%3D%22d%22%3E*%3C%2Ftext%3E%3Ctext%20x%3D%22210%22%20y%3D%22414%22%20class%3D%22d%22%3E3%3C%2Ftext%3E%3Ctext%20x%3D%22210%22%20y%3D%22432%22%3EX%3C%2Ftext%3E%3Ctext%20x%3D%22270%22%20y%3D%2218%22%20class%3D%22b%22%3E%23%3C%2Ftext%3E%3Ctext%20x%3D%22270%22%20y%3D%2236%22%3E%25%3C%2Ftext%3E%3Ctext%20x%3D%22270%22%20y%3D%2254%22%3E3%3C%2Ftext%3E%3Ctext%20x%3D%22270%22%20y%3D%2272%22%20class%3D%22d%22%3E7%3C%2Ftext%3E%3Ctext%20x%3D%22270%22%20y%3D%2290%22%3E3%3C%2Ftext%3E%3Ctext%20x%3D%22270%22%20y%3D%22108%22%20class%3D%22d%22%3EK%3C%2Ftext%3E%3Ctext%20x%3D%22270%22%20y%3D%22126%22%3E%23%3C%2Ftext%3E%3Ctext%20x%3D%22270%22%20y%3D%22144%22%3E9%3C%2Ftext%3E%3Ctext%20x%3D%22270%22%20y%3D%22162%22%3E*%3C%2Ftext%3E%3Ctext%20x%3D%22270%22%20y%3D%22180%22%3E1%3C%2Ftext%3E%3Ctext%20x%3D%22270%22%20y%3D%22198%22%3E0%3C%2Ftext%3E%3Ctext%20x%3D%22270%22%20y%3D%22216%22%20class%3D%22d%22%3E0%3C%2Ftext%3E%3Ctext%20x%3D%22270%22%20y%3D%22234%22%3E1%3C%2Ftext%3E%3Ctext%20x%3D%22270%22%20y%3D%22252%22%3EX%3C%2Ftext%3E%3Ctext%20x%3D%22270%22%20y%3D%22270%22%3E1%3C%2Ftext%3E%3Ctext%20x%3D%22270%22%20y%3D%22288%22%3EA%3C%2Ftext%3E%3Ctext%20x%3D%22270%22%20y%3D%22306%22%20class%3D%22d%22%3E1%3C%2Ftext%3E%3Ctext%20x%3D%22270%22%20y%3D%22324%22%20class%3D%22d%22%3E0%3C%2Ftext%3E%3Ctext%20x%3D%22270%22%20y%3D%22342%22%20class%3D%22d%22%3E1%3C%2Ftext%3E%3Ctext%20x%3D%22270%22%20y%3D%22360%22%20class%3D%22d%22%3EZ%3C%2Ftext%3E%3Ctext%20x%3D%22270%22%20y%3D%22378%22%20class%3D%22d%22%3E%25%3C%2Ftext%3E%3Ctext%20x%3D%22270%22%20y%3D%22396%22%20class%3D%22d%22%3EX%3C%2Ftext%3E%3Ctext%20x%3D%22270%22%20y%3D%22414%22%20class%3D%22d%22%3EZ%3C%2Ftext%3E%3Ctext%20x%3D%22270%22%20y%3D%22432%22%3EZ%3C%2Ftext%3E%3Ctext%20x%3D%22330%22%20y%3D%2218%22%20class%3D%22b%22%3E9%3C%2Ftext%3E%3Ctext%20x%3D%22330%22%20y%3D%2236%22%20class%3D%22d%22%3E9%3C%2Ftext%3E%3Ctext%20x%3D%22330%22%20y%3D%2254%22%3E*%3C%2Ftext%3E%3Ctext%20x%3D%22330%22%20y%3D%2272%22%20class%3D%22d%22%3EZ%3C%2Ftext%3E%3Ctext%20x%3D%22330%22%20y%3D%2290%22%20class%3D%22d%22%3E3%3C%2Ftext%3E%3Ctext%20x%3D%22330%22%20y%3D%22108%22%3E1%3C%2Ftext%3E%3Ctext%20x%3D%22330%22%20y%3D%22126%22%20class%3D%22d%22%3E%25%3C%2Ftext%3E%3Ctext%20x%3D%22330%22%20y%3D%22144%22%3E7%3C%2Ftext%3E%3Ctext%20x%3D%22330%22%20y%3D%22162%22%3EA%3C%2Ftext%3E%3Ctext%20x%3D%22330%22%20y%3D%22180%22%20class%3D%22d%22%3EX%3C%2Ftext%3E%3Ctext%20x%3D%22330%22%20y%3D%22198%22%3E*%3C%2Ftext%3E%3Ctext%20x%3D%22330%22%20y%3D%22216%22%20class%3D%22d%22%3E%25%3C%2Ftext%3E%3Ctext%20x%3D%22330%22%20y%3D%22234%22%20class%3D%22d%22%3E0%3C%2Ftext%3E%3Ctext%20x%3D%22330%22%20y%3D%22252%22%3EA%3C%2Ftext%3E%3Ctext%20x%3D%22330%22%20y%3D%22270%22%3E0%3C%2Ftext%3E%3Ctext%20x%3D%22330%22%20y%3D%22288%22%3EX%3C%2Ftext%3E%3Ctext%20x%3D%22330%22%20y%3D%22306%22%20class%3D%22d%22%3EA%3C%2Ftext%3E%3Ctext%20x%3D%22330%22%20y%3D%22324%22%20class%3D%22d%22%3EA%3C%2Ftext%3E%3Ctext%20x%3D%22330%22%20y%3D%22342%22%20class%3D%22d%22%3E1%3C%2Ftext%3E%3Ctext%20x%3D%22330%22%20y%3D%22360%22%3EA%3C%2Ftext%3E%3Ctext%20x%3D%22330%22%20y%3D%22378%22%20class%3D%22d%22%3EK%3C%2Ftext%3E%3Ctext%20x%3D%22330%22%20y%3D%22396%22%3EZ%3C%2Ftext%3E%3Ctext%20x%3D%22330%22%20y%3D%22414%22%20class%3D%22d%22%3E%23%3C%2Ftext%3E%3Ctext%20x%3D%22330%22%20y%3D%22432%22%3EK%3C%2Ftext%3E%3Ctext%20x%3D%22390%22%20y%3D%2218%22%20class%3D%22b%22%3EK%3C%2Ftext%3E%3Ctext%20x%3D%22390%22%20y%3D%2236%22%3E9%3C%2Ftext%3E%3Ctext%20x%3D%22390%22%20y%3D%2254%22%20class%3D%22d%22%3E9%3C%2Ftext%3E%3Ctext%20x%3D%22390%22%20y%3D%2272%22%3EA%3C%2Ftext%3E%3Ctext%20x%3D%22390%22%20y%3D%2290%22%3E1%3C%2Ftext%3E%3Ctext%20x%3D%22390%22%20y%3D%22108%22%20class%3D%22d%22%3E3%3C%2Ftext%3E%3Ctext%20x%3D%22390%22%20y%3D%22126%22%3E%25%3C%2Ftext%3E%3Ctext%20x%3D%22390%22%20y%3D%22144%22%3E7%3C%2Ftext%3E%3Ctext%20x%3D%22390%22%20y%3D%22162%22%20class%3D%22d%22%3E*%3C%2Ftext%3E%3Ctext%20x%3D%22390%22%20y%3D%22180%22%20class%3D%22d%22%3E9%3C%2Ftext%3E%3Ctext%20x%3D%22390%22%20y%3D%22198%22%3EA%3C%2Ftext%3E%3Ctext%20x%3D%22390%22%20y%3D%22216%22%3E9%3C%2Ftext%3E%3Ctext%20x%3D%22390%22%20y%3D%22234%22%3EZ%3C%2Ftext%3E%3Ctext%20x%3D%22390%22%20y%3D%22252%22%3EZ%3C%2Ftext%3E%3Ctext%20x%3D%22390%22%20y%3D%22270%22%3EZ%3C%2Ftext%3E%3Ctext%20x%3D%22390%22%20y%3D%22288%22%20class%3D%22d%22%3E*%3C%2Ftext%3E%3Ctext%20x%3D%22390%22%20y%3D%22306%22%3E7%3C%2Ftext%3E%3Ctext%20x%3D%22390%22%20y%3D%22324%22%20class%3D%22d%22%3E1%3C%2Ftext%3E%3Ctext%20x%3D%22390%22%20y%3D%22342%22%3E7%3C%2Ftext%3E%3Ctext%20x%3D%22390%22%20y%3D%22360%22%20class%3D%22d%22%3E7%3C%2Ftext%3E%3Ctext%20x%3D%22390%22%20y%3D%22378%22%3E3%3C%2Ftext%3E%3Ctext%20x%3D%22390%22%20y%3D%22396%22%3E%23%3C%2Ftext%3E%3Ctext%20x%3D%22390%22%20y%3D%22414%22%20class%3D%22d%22%3E%25%3C%2Ftext%3E%3Ctext%20x%3D%22390%22%20y%3D%22432%22%3EK%3C%2Ftext%3E%3Ctext%20x%3D%22450%22%20y%3D%2218%22%20class%3D%22b%22%3E%23%3C%2Ftext%3E%3Ctext%20x%3D%22450%22%20y%3D%2236%22%3E9%3C%2Ftext%3E%3Ctext%20x%3D%22450%22%20y%3D%2254%22%3E1%3C%2Ftext%3E%3Ctext%20x%3D%22450%22%20y%3D%2272%22%3E7%3C%2Ftext%3E%3Ctext%20x%3D%22450%22%20y%3D%2290%22%3E%23%3C%2Ftext%3E%3Ctext%20x%3D%22450%22%20y%3D%22108%22%3EX%3C%2Ftext%3E%3Ctext%20x%3D%22450%22%20y%3D%22126%22%3E%25%3C%2Ftext%3E%3Ctext%20x%3D%22450%22%20y%3D%22144%22%3E%25%3C%2Ftext%3E%3Ctext%20x%3D%22450%22%20y%3D%22162%22%20class%3D%22d%22%3E7%3C%2Ftext%3E%3Ctext%20x%3D%22450%22%20y%3D%22180%22%20class%3D%22d%22%3E3%3C%2Ftext%3E%3Ctext%20x%3D%22450%22%20y%3D%22198%22%3E*%3C%2Ftext%3E%3Ctext%20x%3D%22450%22%20y%3D%22216%22%3E*%3C%2Ftext%3E%3Ctext%20x%3D%22450%22%20y%3D%22234%22%20class%3D%22d%22%3E%23%3C%2Ftext%3E%3Ctext%20x%3D%22450%22%20y%3D%22252%22%20class%3D%22d%22%3E9%3C%2Ftext%3E%3Ctext%20x%3D%22450%22%20y%3D%22270%22%3E3%3C%2Ftext%3E%3Ctext%20x%3D%22450%22%20y%3D%22288%22%20class%3D%22d%22%3E1%3C%2Ftext%3E%3Ctext%20x%3D%22450%22%20y%3D%22306%22%3E3%3C%2Ftext%3E%3Ctext%20x%3D%22450%22%20y%3D%22324%22%3E%23%3C%2Ftext%3E%3Ctext%20x%3D%22450%22%20y%3D%22342%22%3EZ%3C%2Ftext%3E%3Ctext%20x%3D%22450%22%20y%3D%22360%22%20class%3D%22d%22%3EA%3C%2Ftext%3E%3Ctext%20x%3D%22450%22%20y%3D%22378%22%20class%3D%22d%22%3E%25%3C%2Ftext%3E%3Ctext%20x%3D%22450%22%20y%3D%22396%22%20class%3D%22d%22%3E7%3C%2Ftext%3E%3Ctext%20x%3D%22450%22%20y%3D%22414%22%3E1%3C%2Ftext%3E%3Ctext%20x%3D%22450%22%20y%3D%22432%22%20class%3D%22d%22%3E1%3C%2Ftext%3E%3C%2Fsvg%3E");
    background-size: 480px 432px;
    background-repeat: repeat;
    animation: matrix-fall-1 5s linear infinite;
    opacity: 0.85;
}
/* Layer 2 — sparser, bigger chars, slower fall (9s loop) — stacked
   on top of a soft green glow ambience. 5 columns × 18 rows */
html[data-theme="matrix"] body::after {
    content: "";
    position: fixed; inset: 0;
    pointer-events: none; z-index: 0;
    background-image:
        url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%20396%22%20preserveAspectRatio%3D%22none%22%3E%3Cstyle%3Etext%7Bfont%3Abold%2018px%20monospace%3Bfill%3A%2300ff41%7D.b%7Bfill%3A%23dfffdf%7D.d%7Bfill%3A%23006611%7D%3C%2Fstyle%3E%3Ctext%20x%3D%2240%22%20y%3D%2222%22%20class%3D%22b%22%3E7%3C%2Ftext%3E%3Ctext%20x%3D%2240%22%20y%3D%2244%22%20class%3D%22d%22%3EK%3C%2Ftext%3E%3Ctext%20x%3D%2240%22%20y%3D%2266%22%20class%3D%22d%22%3E%25%3C%2Ftext%3E%3Ctext%20x%3D%2240%22%20y%3D%2288%22%3E9%3C%2Ftext%3E%3Ctext%20x%3D%2240%22%20y%3D%22110%22%20class%3D%22d%22%3EK%3C%2Ftext%3E%3Ctext%20x%3D%2240%22%20y%3D%22132%22%20class%3D%22d%22%3E9%3C%2Ftext%3E%3Ctext%20x%3D%2240%22%20y%3D%22154%22%20class%3D%22d%22%3E9%3C%2Ftext%3E%3Ctext%20x%3D%2240%22%20y%3D%22176%22%3EK%3C%2Ftext%3E%3Ctext%20x%3D%2240%22%20y%3D%22198%22%3E3%3C%2Ftext%3E%3Ctext%20x%3D%2240%22%20y%3D%22220%22%3E%23%3C%2Ftext%3E%3Ctext%20x%3D%2240%22%20y%3D%22242%22%20class%3D%22d%22%3EZ%3C%2Ftext%3E%3Ctext%20x%3D%2240%22%20y%3D%22264%22%3E9%3C%2Ftext%3E%3Ctext%20x%3D%2240%22%20y%3D%22286%22%3E1%3C%2Ftext%3E%3Ctext%20x%3D%2240%22%20y%3D%22308%22%3E%23%3C%2Ftext%3E%3Ctext%20x%3D%2240%22%20y%3D%22330%22%3EK%3C%2Ftext%3E%3Ctext%20x%3D%2240%22%20y%3D%22352%22%3E7%3C%2Ftext%3E%3Ctext%20x%3D%2240%22%20y%3D%22374%22%20class%3D%22d%22%3E%25%3C%2Ftext%3E%3Ctext%20x%3D%2240%22%20y%3D%22396%22%20class%3D%22d%22%3EZ%3C%2Ftext%3E%3Ctext%20x%3D%22120%22%20y%3D%2222%22%20class%3D%22b%22%3E*%3C%2Ftext%3E%3Ctext%20x%3D%22120%22%20y%3D%2244%22%3E0%3C%2Ftext%3E%3Ctext%20x%3D%22120%22%20y%3D%2266%22%3E3%3C%2Ftext%3E%3Ctext%20x%3D%22120%22%20y%3D%2288%22%3E3%3C%2Ftext%3E%3Ctext%20x%3D%22120%22%20y%3D%22110%22%20class%3D%22d%22%3E9%3C%2Ftext%3E%3Ctext%20x%3D%22120%22%20y%3D%22132%22%3E%25%3C%2Ftext%3E%3Ctext%20x%3D%22120%22%20y%3D%22154%22%3E*%3C%2Ftext%3E%3Ctext%20x%3D%22120%22%20y%3D%22176%22%3EZ%3C%2Ftext%3E%3Ctext%20x%3D%22120%22%20y%3D%22198%22%3EZ%3C%2Ftext%3E%3Ctext%20x%3D%22120%22%20y%3D%22220%22%20class%3D%22d%22%3E3%3C%2Ftext%3E%3Ctext%20x%3D%22120%22%20y%3D%22242%22%3EK%3C%2Ftext%3E%3Ctext%20x%3D%22120%22%20y%3D%22264%22%20class%3D%22d%22%3E%23%3C%2Ftext%3E%3Ctext%20x%3D%22120%22%20y%3D%22286%22%3EK%3C%2Ftext%3E%3Ctext%20x%3D%22120%22%20y%3D%22308%22%20class%3D%22d%22%3EZ%3C%2Ftext%3E%3Ctext%20x%3D%22120%22%20y%3D%22330%22%3EZ%3C%2Ftext%3E%3Ctext%20x%3D%22120%22%20y%3D%22352%22%3E%23%3C%2Ftext%3E%3Ctext%20x%3D%22120%22%20y%3D%22374%22%3E1%3C%2Ftext%3E%3Ctext%20x%3D%22120%22%20y%3D%22396%22%3E7%3C%2Ftext%3E%3Ctext%20x%3D%22200%22%20y%3D%2222%22%20class%3D%22b%22%3E%25%3C%2Ftext%3E%3Ctext%20x%3D%22200%22%20y%3D%2244%22%20class%3D%22d%22%3EZ%3C%2Ftext%3E%3Ctext%20x%3D%22200%22%20y%3D%2266%22%20class%3D%22d%22%3EA%3C%2Ftext%3E%3Ctext%20x%3D%22200%22%20y%3D%2288%22%3EX%3C%2Ftext%3E%3Ctext%20x%3D%22200%22%20y%3D%22110%22%3E%25%3C%2Ftext%3E%3Ctext%20x%3D%22200%22%20y%3D%22132%22%20class%3D%22d%22%3E%23%3C%2Ftext%3E%3Ctext%20x%3D%22200%22%20y%3D%22154%22%20class%3D%22d%22%3E7%3C%2Ftext%3E%3Ctext%20x%3D%22200%22%20y%3D%22176%22%20class%3D%22d%22%3E0%3C%2Ftext%3E%3Ctext%20x%3D%22200%22%20y%3D%22198%22%20class%3D%22d%22%3E*%3C%2Ftext%3E%3Ctext%20x%3D%22200%22%20y%3D%22220%22%20class%3D%22d%22%3E7%3C%2Ftext%3E%3Ctext%20x%3D%22200%22%20y%3D%22242%22%3E0%3C%2Ftext%3E%3Ctext%20x%3D%22200%22%20y%3D%22264%22%20class%3D%22d%22%3E0%3C%2Ftext%3E%3Ctext%20x%3D%22200%22%20y%3D%22286%22%20class%3D%22d%22%3E3%3C%2Ftext%3E%3Ctext%20x%3D%22200%22%20y%3D%22308%22%3EA%3C%2Ftext%3E%3Ctext%20x%3D%22200%22%20y%3D%22330%22%3E3%3C%2Ftext%3E%3Ctext%20x%3D%22200%22%20y%3D%22352%22%20class%3D%22d%22%3E3%3C%2Ftext%3E%3Ctext%20x%3D%22200%22%20y%3D%22374%22%20class%3D%22d%22%3E%23%3C%2Ftext%3E%3Ctext%20x%3D%22200%22%20y%3D%22396%22%3E0%3C%2Ftext%3E%3Ctext%20x%3D%22280%22%20y%3D%2222%22%20class%3D%22b%22%3EK%3C%2Ftext%3E%3Ctext%20x%3D%22280%22%20y%3D%2244%22%3E9%3C%2Ftext%3E%3Ctext%20x%3D%22280%22%20y%3D%2266%22%3EX%3C%2Ftext%3E%3Ctext%20x%3D%22280%22%20y%3D%2288%22%20class%3D%22d%22%3E3%3C%2Ftext%3E%3Ctext%20x%3D%22280%22%20y%3D%22110%22%3EA%3C%2Ftext%3E%3Ctext%20x%3D%22280%22%20y%3D%22132%22%3EK%3C%2Ftext%3E%3Ctext%20x%3D%22280%22%20y%3D%22154%22%3EA%3C%2Ftext%3E%3Ctext%20x%3D%22280%22%20y%3D%22176%22%3EA%3C%2Ftext%3E%3Ctext%20x%3D%22280%22%20y%3D%22198%22%3E%23%3C%2Ftext%3E%3Ctext%20x%3D%22280%22%20y%3D%22220%22%3EK%3C%2Ftext%3E%3Ctext%20x%3D%22280%22%20y%3D%22242%22%3E1%3C%2Ftext%3E%3Ctext%20x%3D%22280%22%20y%3D%22264%22%3E9%3C%2Ftext%3E%3Ctext%20x%3D%22280%22%20y%3D%22286%22%20class%3D%22d%22%3EA%3C%2Ftext%3E%3Ctext%20x%3D%22280%22%20y%3D%22308%22%20class%3D%22d%22%3EA%3C%2Ftext%3E%3Ctext%20x%3D%22280%22%20y%3D%22330%22%20class%3D%22d%22%3EA%3C%2Ftext%3E%3Ctext%20x%3D%22280%22%20y%3D%22352%22%20class%3D%22d%22%3E0%3C%2Ftext%3E%3Ctext%20x%3D%22280%22%20y%3D%22374%22%20class%3D%22d%22%3E7%3C%2Ftext%3E%3Ctext%20x%3D%22280%22%20y%3D%22396%22%3E%23%3C%2Ftext%3E%3Ctext%20x%3D%22360%22%20y%3D%2222%22%20class%3D%22b%22%3E3%3C%2Ftext%3E%3Ctext%20x%3D%22360%22%20y%3D%2244%22%3E0%3C%2Ftext%3E%3Ctext%20x%3D%22360%22%20y%3D%2266%22%3E%23%3C%2Ftext%3E%3Ctext%20x%3D%22360%22%20y%3D%2288%22%20class%3D%22d%22%3EZ%3C%2Ftext%3E%3Ctext%20x%3D%22360%22%20y%3D%22110%22%3EZ%3C%2Ftext%3E%3Ctext%20x%3D%22360%22%20y%3D%22132%22%3E*%3C%2Ftext%3E%3Ctext%20x%3D%22360%22%20y%3D%22154%22%3EA%3C%2Ftext%3E%3Ctext%20x%3D%22360%22%20y%3D%22176%22%20class%3D%22d%22%3E7%3C%2Ftext%3E%3Ctext%20x%3D%22360%22%20y%3D%22198%22%20class%3D%22d%22%3E*%3C%2Ftext%3E%3Ctext%20x%3D%22360%22%20y%3D%22220%22%20class%3D%22d%22%3E%23%3C%2Ftext%3E%3Ctext%20x%3D%22360%22%20y%3D%22242%22%3E9%3C%2Ftext%3E%3Ctext%20x%3D%22360%22%20y%3D%22264%22%20class%3D%22d%22%3E*%3C%2Ftext%3E%3Ctext%20x%3D%22360%22%20y%3D%22286%22%20class%3D%22d%22%3E3%3C%2Ftext%3E%3Ctext%20x%3D%22360%22%20y%3D%22308%22%3E%23%3C%2Ftext%3E%3Ctext%20x%3D%22360%22%20y%3D%22330%22%3EA%3C%2Ftext%3E%3Ctext%20x%3D%22360%22%20y%3D%22352%22%20class%3D%22d%22%3EZ%3C%2Ftext%3E%3Ctext%20x%3D%22360%22%20y%3D%22374%22%3EA%3C%2Ftext%3E%3Ctext%20x%3D%22360%22%20y%3D%22396%22%20class%3D%22d%22%3EK%3C%2Ftext%3E%3C%2Fsvg%3E"),
        radial-gradient(ellipse at top, rgba(0, 255, 65, 0.18), transparent 60%),
        radial-gradient(ellipse at bottom, rgba(0, 100, 30, 0.12), transparent 70%);
    background-size: 400px 396px, 100% 100%, 100% 100%;
    background-repeat: repeat, no-repeat, no-repeat;
    animation: matrix-fall-2 9s linear infinite;
    opacity: 0.75;
}
html[data-theme="matrix"] body { text-shadow: 0 0 6px rgba(0, 255, 65, 0.5); }
html[data-theme="matrix"] .header,
html[data-theme="matrix"] .main { position: relative; z-index: 1; }
@keyframes matrix-fall-1 {
    0%   { background-position: 0 0; }
    100% { background-position: 0 432px; }
}
@keyframes matrix-fall-2 {
    0%   { background-position: 0 0, 0 0, 0 0; }
    100% { background-position: 0 396px, 0 0, 0 0; }
}
}

/* ─── Vaporwave: perspective grid floor + neon sunset ─── */
html[data-theme="vaporwave"] body { font-family: 'Press Start 2P', 'JetBrains Mono', monospace; letter-spacing: 0.05em; }
html[data-theme="vaporwave"] body::before {
    content: "";
    position: fixed; left: 0; right: 0; bottom: 0;
    height: 50vh;
    pointer-events: none; z-index: 0;
    background-image:
        linear-gradient(transparent 0%, rgba(255, 119, 233, 0.15) 80%, transparent 100%),
        repeating-linear-gradient(
            90deg, transparent 0 calc(10% - 1px), #ff77e9 calc(10% - 1px) 10%
        ),
        repeating-linear-gradient(
            0deg, transparent 0 calc(10% - 1px), #ff77e9 calc(10% - 1px) 10%
        );
    transform: perspective(400px) rotateX(60deg);
    transform-origin: center top;
    opacity: 0.7;
    animation: vapor-grid 6s linear infinite;
}
html[data-theme="vaporwave"] body::after {
    content: "";
    position: fixed; top: 0; left: 0; right: 0;
    height: 50vh;
    pointer-events: none; z-index: 0;
    background:
        radial-gradient(circle at 50% 90%, #ff77e9 0%, #ff77e988 30%, transparent 60%),
        linear-gradient(180deg, #ff77e9 0%, #ffd166 60%, transparent 100%);
    opacity: 0.18;
}
html[data-theme="vaporwave"] .header,
html[data-theme="vaporwave"] .main { position: relative; z-index: 1; }
@keyframes vapor-grid {
    from { background-position: 0 0, 0 0, 0 0; }
    to   { background-position: 0 0, 0 0, 0 -40px; }
}

/* ─── Cyberpunk: yellow/cyan/magenta + neon glow ─── */
html[data-theme="cyberpunk"] body { font-family: 'Rajdhani', 'Bebas Neue', 'JetBrains Mono', monospace; letter-spacing: 0.04em; }
html[data-theme="cyberpunk"] .header-logo,
html[data-theme="cyberpunk"] h1,
html[data-theme="cyberpunk"] h2 {
    text-shadow:
        0 0 6px var(--accent),
        0 0 12px var(--accent),
        0 0 20px rgba(255, 42, 109, 0.5);
}
html[data-theme="cyberpunk"] .game-card,
html[data-theme="cyberpunk"] .tab-btn.active,
html[data-theme="cyberpunk"] .cat-btn.active {
    box-shadow:
        0 0 8px rgba(5, 217, 232, 0.5),
        inset 0 0 4px rgba(5, 217, 232, 0.2);
    border: 1px solid var(--accent-secondary);
}
html[data-theme="cyberpunk"] .game-card:hover {
    box-shadow:
        0 0 16px rgba(255, 42, 109, 0.7),
        inset 0 0 8px rgba(255, 42, 109, 0.2);
}
html[data-theme="cyberpunk"] body::before {
    content: "";
    position: fixed; inset: 0;
    pointer-events: none; z-index: 99998;
    background: repeating-linear-gradient(
        0deg, rgba(252, 238, 10, 0.02) 0 2px, transparent 2px 6px
    );
}

/* ─── Aurora: shifting green/purple gradient bg ─── */
html[data-theme="aurora"] body::before {
    content: "";
    position: fixed; inset: 0;
    pointer-events: none; z-index: 0;
    background:
        radial-gradient(ellipse 80% 40% at 50% 0%, rgba(34, 211, 238, 0.18), transparent 70%),
        radial-gradient(ellipse 60% 30% at 30% 30%, rgba(168, 85, 247, 0.16), transparent 70%),
        radial-gradient(ellipse 70% 35% at 80% 60%, rgba(34, 197, 94, 0.14), transparent 70%);
    background-size: 200% 200%;
    animation: aurora-shift 18s ease-in-out infinite alternate;
    filter: blur(20px);
}
html[data-theme="aurora"] .header,
html[data-theme="aurora"] .main { position: relative; z-index: 1; }
@keyframes aurora-shift {
    0%   { background-position: 0% 0%; }
    33%  { background-position: 50% 50%; }
    66%  { background-position: 100% 25%; }
    100% { background-position: 25% 75%; }
}

/* ─── Amber Terminal: warm CRT + falling leaves ─── */
html[data-theme="amber"] body {
    font-family: 'IBM Plex Mono', 'Press Start 2P', 'Courier New', monospace;
    text-shadow: 0 0 4px rgba(255, 176, 0, 0.5);
}
html[data-theme="amber"] body::before {
    content: "";
    position: fixed; inset: 0;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.16),
        rgba(0, 0, 0, 0.16) 1px,
        transparent 1px,
        transparent 3px
    );
    pointer-events: none; z-index: 99999;
}
/* Falling leaves: each background-image is a HUGE transparent canvas
   with one small leaf glyph offset to a specific position inside it.
   Tiling that big canvas means a leaf appears every ~600-800 px,
   giving you ~3-5 leaves total on screen at once instead of a wall.
   Three layers with different sizes + leaf positions break up the
   tile pattern so the eye doesn't see a grid. */
html[data-theme="amber"] body::after {
    content: "";
    position: fixed; inset: 0;
    pointer-events: none; z-index: 99996;
    background-image:
        /* Layer 1 — yellow oval leaf, lone in a 700×900 canvas */
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 700 900'><g transform='translate(180 100) rotate(-25)'><path d='M0 0 C24 0 28 24 0 48 C-24 24 -24 0 0 0 Z M0 0 L0 48' stroke='%23ffb000' stroke-width='1' fill='%23ffd070' fill-opacity='0.85'/></g></svg>"),
        /* Layer 2 — orange ginkgo, lone in a 800×1000 canvas, opposite side */
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 1000'><g transform='translate(620 200) rotate(20)'><path d='M0 0 C-16 4 -22 16 -16 28 C-8 36 8 36 16 28 C22 16 16 4 0 0 Z' fill='%23ff8800' fill-opacity='0.8'/></g></svg>"),
        /* Layer 3 — small maple leaf, lone in a 900×1100 canvas, mid-screen */
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 1100'><g transform='translate(440 500) rotate(-10)'><path d='M0 0 L6 12 L18 8 L12 20 L22 26 L10 28 L14 40 L2 34 L0 46 L-2 34 L-14 40 L-10 28 L-22 26 L-12 20 L-18 8 L-6 12 Z' fill='%23ff6a00' fill-opacity='0.9'/></g></svg>");
    background-size:
        700px 900px,
        800px 1000px,
        900px 1100px;
    background-repeat: repeat, repeat, repeat;
    background-position: 0 0, 0 0, 0 0;
    animation: amber-leaves-fall 24s linear infinite;
}
@keyframes amber-leaves-fall {
    /* Each layer falls exactly its own background-size-y per cycle so
       the loop is seamless. Slight horizontal offset makes the wind
       feel uneven across layers. */
    0%   {
        background-position: 0 0, 0 0, 0 0;
    }
    100% {
        background-position: 25px 900px, -35px 1000px, 50px 1100px;
    }
}

/* ─── Galaxy: real Milky-Way band + nebulae + dense star field ─── */
html[data-theme="galaxy"] body {
    background:
        /* Soft galactic-core glow toward the upper-right of the viewport */
        radial-gradient(ellipse 60% 35% at 65% 35%, rgba(120, 60, 180, 0.35), transparent 60%),
        /* Overall deep-space gradient */
        radial-gradient(ellipse at top, #110050 0%, #04001f 50%, #000010 100%) !important;
}
/* Two layers of stars + the milky way band stacked via two pseudo-
   elements. ::before is the dense star field (twinkles); ::after is
   the actual diagonal Milky-Way arm + colored nebulae (static). */
html[data-theme="galaxy"] body::before {
    content: "";
    position: fixed; inset: 0;
    pointer-events: none; z-index: 0;
    /* SMIL-animated stars — each <circle> has its own <animate> with
       a random begin time + duration so the twinkling looks organic.
       Generated by a Node script and embedded as an inline data URI. */
    background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%20100%27%20preserveAspectRatio%3D%27none%27%3E%3Ccircle%20cx%3D%277%27%20cy%3D%2711%27%20r%3D%270.09%27%20fill%3D%27%23ffffff%27%3E%3Canimate%20attributeName%3D%27opacity%27%20values%3D%270.31%3B1%3B0.31%27%20dur%3D%273.96s%27%20begin%3D%273.01s%27%20repeatCount%3D%27indefinite%27%2F%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%2711%27%20cy%3D%278%27%20r%3D%270.06%27%20fill%3D%27%23ffffff%27%3E%3Canimate%20attributeName%3D%27opacity%27%20values%3D%270.30%3B1%3B0.30%27%20dur%3D%276.82s%27%20begin%3D%270.07s%27%20repeatCount%3D%27indefinite%27%2F%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%2714%27%20cy%3D%2716%27%20r%3D%270.06%27%20fill%3D%27%23cce0ff%27%3E%3Canimate%20attributeName%3D%27opacity%27%20values%3D%270.40%3B1%3B0.40%27%20dur%3D%276.56s%27%20begin%3D%270.92s%27%20repeatCount%3D%27indefinite%27%2F%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%2786%27%20cy%3D%2719%27%20r%3D%270.15%27%20fill%3D%27%23ffffff%27%3E%3Canimate%20attributeName%3D%27opacity%27%20values%3D%270.48%3B1%3B0.48%27%20dur%3D%274.16s%27%20begin%3D%271.62s%27%20repeatCount%3D%27indefinite%27%2F%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%2791%27%20cy%3D%2713%27%20r%3D%270.06%27%20fill%3D%27%23ffffff%27%3E%3Canimate%20attributeName%3D%27opacity%27%20values%3D%270.36%3B1%3B0.36%27%20dur%3D%273.67s%27%20begin%3D%274.07s%27%20repeatCount%3D%27indefinite%27%2F%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%2738%27%20cy%3D%2744%27%20r%3D%270.09%27%20fill%3D%27%23ffe0a0%27%3E%3Canimate%20attributeName%3D%27opacity%27%20values%3D%270.49%3B1%3B0.49%27%20dur%3D%273.55s%27%20begin%3D%273.14s%27%20repeatCount%3D%27indefinite%27%2F%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%2743%27%20cy%3D%2747%27%20r%3D%270.06%27%20fill%3D%27%23ffffff%27%3E%3Canimate%20attributeName%3D%27opacity%27%20values%3D%270.30%3B1%3B0.30%27%20dur%3D%275.67s%27%20begin%3D%270.03s%27%20repeatCount%3D%27indefinite%27%2F%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%2750%27%20cy%3D%2752%27%20r%3D%270.06%27%20fill%3D%27%23ffffff%27%3E%3Canimate%20attributeName%3D%27opacity%27%20values%3D%270.48%3B1%3B0.48%27%20dur%3D%273.26s%27%20begin%3D%272.06s%27%20repeatCount%3D%27indefinite%27%2F%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%2722%27%20cy%3D%2773%27%20r%3D%270.06%27%20fill%3D%27%23ffffff%27%3E%3Canimate%20attributeName%3D%27opacity%27%20values%3D%270.47%3B1%3B0.47%27%20dur%3D%274.54s%27%20begin%3D%270.03s%27%20repeatCount%3D%27indefinite%27%2F%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%2718%27%20cy%3D%2779%27%20r%3D%270.09%27%20fill%3D%27%23cce0ff%27%3E%3Canimate%20attributeName%3D%27opacity%27%20values%3D%270.45%3B1%3B0.45%27%20dur%3D%274.33s%27%20begin%3D%271.82s%27%20repeatCount%3D%27indefinite%27%2F%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%2776%27%20cy%3D%2782%27%20r%3D%270.15%27%20fill%3D%27%23ffe0a0%27%3E%3Canimate%20attributeName%3D%27opacity%27%20values%3D%270.44%3B1%3B0.44%27%20dur%3D%273.15s%27%20begin%3D%270.12s%27%20repeatCount%3D%27indefinite%27%2F%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%2781%27%20cy%3D%2778%27%20r%3D%270.06%27%20fill%3D%27%23ffffff%27%3E%3Canimate%20attributeName%3D%27opacity%27%20values%3D%270.46%3B1%3B0.46%27%20dur%3D%276.28s%27%20begin%3D%270.40s%27%20repeatCount%3D%27indefinite%27%2F%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%2788%27%20cy%3D%2786%27%20r%3D%270.06%27%20fill%3D%27%23ffffff%27%3E%3Canimate%20attributeName%3D%27opacity%27%20values%3D%270.27%3B1%3B0.27%27%20dur%3D%274.92s%27%20begin%3D%270.36s%27%20repeatCount%3D%27indefinite%27%2F%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%2760%27%20cy%3D%279%27%20r%3D%270.12%27%20fill%3D%27%23ffffff%27%3E%3Canimate%20attributeName%3D%27opacity%27%20values%3D%270.42%3B1%3B0.42%27%20dur%3D%275.73s%27%20begin%3D%275.60s%27%20repeatCount%3D%27indefinite%27%2F%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%274%27%20cy%3D%2741%27%20r%3D%270.09%27%20fill%3D%27%23ffffff%27%3E%3Canimate%20attributeName%3D%27opacity%27%20values%3D%270.29%3B1%3B0.29%27%20dur%3D%274.26s%27%20begin%3D%274.37s%27%20repeatCount%3D%27indefinite%27%2F%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%2795%27%20cy%3D%2753%27%20r%3D%270.06%27%20fill%3D%27%23ffffff%27%3E%3Canimate%20attributeName%3D%27opacity%27%20values%3D%270.47%3B1%3B0.47%27%20dur%3D%274.35s%27%20begin%3D%272.01s%27%20repeatCount%3D%27indefinite%27%2F%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%2732%27%20cy%3D%2792%27%20r%3D%270.06%27%20fill%3D%27%23ffffff%27%3E%3Canimate%20attributeName%3D%27opacity%27%20values%3D%270.41%3B1%3B0.41%27%20dur%3D%276.11s%27%20begin%3D%275.82s%27%20repeatCount%3D%27indefinite%27%2F%3E%3C%2Fcircle%3E%3C%2Fsvg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
/* The Milky Way band: a tilted strip across the viewport with bright
   dust + colored nebulae. Oversized and rotated so the strip extends
   off-screen on both ends, like the actual band wraps the sky. */
html[data-theme="galaxy"] body::after {
    content: "";
    position: fixed;
    /* Oversize so rotation doesn't expose the corners */
    left: -25%; top: -25%; width: 150%; height: 150%;
    pointer-events: none; z-index: 0;
    transform: rotate(-22deg);
    background:
        /* The dust band itself: a soft horizontal strip with a brighter
           "galactic core" hotspot in the middle. Layered linear-gradient
           gives the band fuzzy edges; the radial-gradient adds the core. */
        radial-gradient(ellipse 14% 5% at 52% 50%, rgba(255, 230, 200, 0.55), rgba(255, 200, 230, 0.18) 60%, transparent 80%),
        /* Pink H-alpha emission nebula inside the band */
        radial-gradient(ellipse 11% 2.5% at 30% 50%, rgba(255, 100, 180, 0.4), transparent 70%),
        /* Cyan/blue reflection nebula */
        radial-gradient(ellipse 13% 2.8% at 70% 50%, rgba(80, 140, 255, 0.32), transparent 70%),
        /* Wider faint dust bands above + below the bright core for depth */
        radial-gradient(ellipse 38% 1.5% at 50% 47%, rgba(220, 200, 255, 0.12), transparent 80%),
        radial-gradient(ellipse 38% 1.5% at 50% 53%, rgba(220, 200, 255, 0.12), transparent 80%),
        /* The base milky-way streak as a soft horizontal gradient */
        linear-gradient(
            0deg,
            transparent 0%,
            transparent 42%,
            rgba(200, 180, 220, 0.06) 46%,
            rgba(220, 200, 240, 0.18) 49%,
            rgba(255, 240, 255, 0.28) 50%,
            rgba(220, 200, 240, 0.18) 51%,
            rgba(200, 180, 220, 0.06) 54%,
            transparent 58%,
            transparent 100%
        );
}
html[data-theme="galaxy"] .header,
html[data-theme="galaxy"] .main { position: relative; z-index: 1; }
@keyframes galaxy-twinkle {
    /* Subtle brightness pulse on the whole star layer — keeps the
       individual stars visually consistent without 70 separate
       animations. */
    0%   { opacity: 0.7; }
    50%  { opacity: 1; }
    100% { opacity: 0.85; }
}

/* ─── Holographic: hue-rotating iridescent background ─── */
html[data-theme="holographic"] body::before {
    content: "";
    position: fixed; inset: 0;
    pointer-events: none; z-index: 0;
    background: linear-gradient(
        135deg,
        #ff00ff 0%, #ff00aa 16%, #aa00ff 32%, #00aaff 48%,
        #00ffaa 64%, #aaff00 80%, #ffaa00 100%
    );
    background-size: 400% 400%;
    animation: holo-shift 12s ease-in-out infinite;
    opacity: 0.18;
    filter: blur(40px);
}
html[data-theme="holographic"] .header,
html[data-theme="holographic"] .main { position: relative; z-index: 1; }
html[data-theme="holographic"] .game-card,
html[data-theme="holographic"] .header-logo,
html[data-theme="holographic"] .auth-username {
    background-image: linear-gradient(135deg, #ff00ff, #00ffff, #ffff00, #ff00ff);
    background-size: 300% 300%;
    animation: holo-shift 8s ease-in-out infinite;
}
html[data-theme="holographic"] .card-title {
    background: linear-gradient(90deg, #ff00ff, #00ffff, #ff00ff);
    background-size: 200% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: holo-shift 4s linear infinite;
}
@keyframes holo-shift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ─── Black Hole: rotating accretion disk + photon ring + halo ─── */
html[data-theme="blackhole"] body {
    background:
        radial-gradient(ellipse 40% 30% at 50% 50%, rgba(80, 60, 200, 0.18), transparent 70%),
        #000 !important;
    /* Force body to be its own stacking context so the BH pseudo-
       elements with z-index: -1 paint ABOVE body's bg but BELOW
       body's content (header, main, modals, iframes). Without this,
       the rotating SVG was showing on top of game cards. */
    position: relative;
    z-index: 0;
}
/* Sparse star field outside the black hole */
html[data-theme="blackhole"] body::before {
    content: "";
    position: fixed; inset: 0;
    pointer-events: none; z-index: -1;
    background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%20100%27%20preserveAspectRatio%3D%27none%27%3E%3Ccircle%20cx%3D%278%27%20cy%3D%2712%27%20r%3D%270.09%27%20fill%3D%27%23ffffff%27%3E%3Canimate%20attributeName%3D%27opacity%27%20values%3D%270.37%3B1%3B0.37%27%20dur%3D%275.32s%27%20begin%3D%275.36s%27%20repeatCount%3D%27indefinite%27%2F%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%2788%27%20cy%3D%2718%27%20r%3D%270.09%27%20fill%3D%27%23ffffff%27%3E%3Canimate%20attributeName%3D%27opacity%27%20values%3D%270.36%3B1%3B0.36%27%20dur%3D%274.04s%27%20begin%3D%270.78s%27%20repeatCount%3D%27indefinite%27%2F%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%2722%27%20cy%3D%278%27%20r%3D%270.06%27%20fill%3D%27%23ffffff%27%3E%3Canimate%20attributeName%3D%27opacity%27%20values%3D%270.48%3B1%3B0.48%27%20dur%3D%275.58s%27%20begin%3D%274.96s%27%20repeatCount%3D%27indefinite%27%2F%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%2772%27%20cy%3D%276%27%20r%3D%270.06%27%20fill%3D%27%23ffffff%27%3E%3Canimate%20attributeName%3D%27opacity%27%20values%3D%270.45%3B1%3B0.45%27%20dur%3D%275.97s%27%20begin%3D%274.40s%27%20repeatCount%3D%27indefinite%27%2F%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%274%27%20cy%3D%2770%27%20r%3D%270.09%27%20fill%3D%27%23cce0ff%27%3E%3Canimate%20attributeName%3D%27opacity%27%20values%3D%270.27%3B1%3B0.27%27%20dur%3D%276.00s%27%20begin%3D%275.84s%27%20repeatCount%3D%27indefinite%27%2F%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%2795%27%20cy%3D%2780%27%20r%3D%270.06%27%20fill%3D%27%23ffffff%27%3E%3Canimate%20attributeName%3D%27opacity%27%20values%3D%270.46%3B1%3B0.46%27%20dur%3D%274.72s%27%20begin%3D%271.38s%27%20repeatCount%3D%27indefinite%27%2F%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%2716%27%20cy%3D%2792%27%20r%3D%270.09%27%20fill%3D%27%23ffffff%27%3E%3Canimate%20attributeName%3D%27opacity%27%20values%3D%270.42%3B1%3B0.42%27%20dur%3D%274.15s%27%20begin%3D%273.57s%27%20repeatCount%3D%27indefinite%27%2F%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%2780%27%20cy%3D%2795%27%20r%3D%270.06%27%20fill%3D%27%23ffffff%27%3E%3Canimate%20attributeName%3D%27opacity%27%20values%3D%270.35%3B1%3B0.35%27%20dur%3D%274.07s%27%20begin%3D%272.97s%27%20repeatCount%3D%27indefinite%27%2F%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%2738%27%20cy%3D%275%27%20r%3D%270.06%27%20fill%3D%27%23ffffff%27%3E%3Canimate%20attributeName%3D%27opacity%27%20values%3D%270.40%3B1%3B0.40%27%20dur%3D%275.04s%27%20begin%3D%275.35s%27%20repeatCount%3D%27indefinite%27%2F%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2750%27%20r%3D%270.06%27%20fill%3D%27%23ffffff%27%3E%3Canimate%20attributeName%3D%27opacity%27%20values%3D%270.38%3B1%3B0.38%27%20dur%3D%274.30s%27%20begin%3D%272.97s%27%20repeatCount%3D%27indefinite%27%2F%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%2792%27%20cy%3D%2748%27%20r%3D%270.06%27%20fill%3D%27%23ffffff%27%3E%3Canimate%20attributeName%3D%27opacity%27%20values%3D%270.37%3B1%3B0.37%27%20dur%3D%277.06s%27%20begin%3D%272.52s%27%20repeatCount%3D%27indefinite%27%2F%3E%3C%2Fcircle%3E%3C%2Fsvg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
/* The black hole itself — entire SVG is centered + sized to fit the
   smaller viewport dimension. Accretion disk rotation handled by
   SMIL animation inside the SVG (works in all evergreen browsers). */
html[data-theme="blackhole"] body::after {
    content: "";
    position: fixed;
    left: 50%; top: 50%;
    width: min(900px, 90vmin);
    height: min(900px, 90vmin);
    transform: translate(-50%, -50%);
    pointer-events: none; z-index: -1;
    background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%27-400%20-400%20800%20800%27%20preserveAspectRatio%3D%27xMidYMid%20meet%27%3E%0A%3Cdefs%3E%0A%3CradialGradient%20id%3D%27halo%27%20cx%3D%270.5%27%20cy%3D%270.5%27%20r%3D%270.5%27%3E%0A%3Cstop%20offset%3D%270%27%20stop-color%3D%27rgb%28100%2C160%2C255%29%27%20stop-opacity%3D%270%27%2F%3E%0A%3Cstop%20offset%3D%270.45%27%20stop-color%3D%27rgb%28120%2C80%2C200%29%27%20stop-opacity%3D%270.18%27%2F%3E%0A%3Cstop%20offset%3D%270.7%27%20stop-color%3D%27rgb%2860%2C30%2C130%29%27%20stop-opacity%3D%270.08%27%2F%3E%0A%3Cstop%20offset%3D%271%27%20stop-color%3D%27rgb%2820%2C10%2C60%29%27%20stop-opacity%3D%270%27%2F%3E%0A%3C%2FradialGradient%3E%0A%3Cmask%20id%3D%27ringMask%27%3E%0A%3Crect%20x%3D%27-400%27%20y%3D%27-400%27%20width%3D%27800%27%20height%3D%27800%27%20fill%3D%27black%27%2F%3E%0A%3Ccircle%20cx%3D%270%27%20cy%3D%270%27%20r%3D%27270%27%20fill%3D%27white%27%2F%3E%0A%3Ccircle%20cx%3D%270%27%20cy%3D%270%27%20r%3D%27130%27%20fill%3D%27black%27%2F%3E%0A%3C%2Fmask%3E%0A%3Cmask%20id%3D%27ringMaskOuter%27%3E%0A%3Crect%20x%3D%27-400%27%20y%3D%27-400%27%20width%3D%27800%27%20height%3D%27800%27%20fill%3D%27black%27%2F%3E%0A%3Ccircle%20cx%3D%270%27%20cy%3D%270%27%20r%3D%27320%27%20fill%3D%27white%27%20fill-opacity%3D%270.5%27%2F%3E%0A%3Ccircle%20cx%3D%270%27%20cy%3D%270%27%20r%3D%27265%27%20fill%3D%27black%27%2F%3E%0A%3C%2Fmask%3E%0A%3C%2Fdefs%3E%0A%0A%3C!--%20Outer%20purple%20halo%20--%3E%0A%3Ccircle%20cx%3D%270%27%20cy%3D%270%27%20r%3D%27380%27%20fill%3D%27url%28%23halo%29%27%2F%3E%0A%0A%3C!--%20Light%20streaks%20scattered%20in%20surrounding%20space%20%28like%20the%0A%20%20%20%20%20gravitationally-lensed%20meteor%20dashes%20in%20the%20reference%29%20--%3E%0A%3Cg%20stroke%3D%27white%27%20stroke-linecap%3D%27round%27%20opacity%3D%270.85%27%3E%0A%3Cline%20x1%3D%27-310%27%20y1%3D%27-180%27%20x2%3D%27-280%27%20y2%3D%27-170%27%20stroke-width%3D%271.2%27%2F%3E%0A%3Cline%20x1%3D%27280%27%20y1%3D%27-220%27%20x2%3D%27320%27%20y2%3D%27-210%27%20stroke-width%3D%271.5%27%20opacity%3D%270.9%27%2F%3E%0A%3Cline%20x1%3D%27350%27%20y1%3D%2740%27%20x2%3D%27320%27%20y2%3D%2748%27%20stroke-width%3D%271%27%20opacity%3D%270.7%27%20stroke%3D%27rgb%28180%2C200%2C255%29%27%2F%3E%0A%3Cline%20x1%3D%27-360%27%20y1%3D%2780%27%20x2%3D%27-330%27%20y2%3D%2775%27%20stroke-width%3D%271%27%20opacity%3D%270.6%27%2F%3E%0A%3Cline%20x1%3D%27-200%27%20y1%3D%27320%27%20x2%3D%27-180%27%20y2%3D%27340%27%20stroke-width%3D%271.2%27%20opacity%3D%270.8%27%2F%3E%0A%3Cline%20x1%3D%27240%27%20y1%3D%27280%27%20x2%3D%27220%27%20y2%3D%27305%27%20stroke-width%3D%271%27%20opacity%3D%270.6%27%2F%3E%0A%3Cline%20x1%3D%27180%27%20y1%3D%27-340%27%20x2%3D%27195%27%20y2%3D%27-310%27%20stroke-width%3D%271%27%20opacity%3D%270.7%27%2F%3E%0A%3C%2Fg%3E%0A%3Cg%20fill%3D%27rgb%28255%2C120%2C200%29%27%20opacity%3D%270.7%27%3E%0A%3Ccircle%20cx%3D%27-300%27%20cy%3D%2740%27%20r%3D%272.5%27%2F%3E%0A%3Ccircle%20cx%3D%27280%27%20cy%3D%27220%27%20r%3D%272%27%2F%3E%0A%3Ccircle%20cx%3D%27-160%27%20cy%3D%27280%27%20r%3D%272.5%27%2F%3E%0A%3Ccircle%20cx%3D%27340%27%20cy%3D%27-100%27%20r%3D%271.8%27%2F%3E%0A%3C%2Fg%3E%0A%0A%3C!--%20Soft%20outer%20glow%20ring%20%28just%20outside%20the%20disk%29%20--%3E%0A%3Cg%20mask%3D%27url%28%23ringMaskOuter%29%27%3E%0A%3Ccircle%20cx%3D%270%27%20cy%3D%270%27%20r%3D%27320%27%20fill%3D%27none%27%20stroke%3D%27rgb%28140%2C80%2C220%29%27%20stroke-width%3D%2740%27%20opacity%3D%270.4%27%2F%3E%0A%3C%2Fg%3E%0A%0A%3C!--%20Rotating%20accretion%20disk%3A%2012%20wedges%2C%20top%20half%20BRIGHT%20%28cyan%2Fwhite%29%2C%0A%20%20%20%20%20bottom%20half%20DIM%20%28deep%20violet%29%20%E2%80%94%20the%20iconic%20asymmetric%20look.%20--%3E%0A%3Cg%20mask%3D%27url%28%23ringMask%29%27%3E%0A%3Cg%3E%0A%3Cpath%20d%3D%27M0%200%20L270%200%20A270%20270%200%200%201%20234%20134%20Z%27%20fill%3D%27rgb%28120%2C200%2C255%29%27%20fill-opacity%3D%270.85%27%2F%3E%0A%3Cpath%20d%3D%27M0%200%20L234%20134%20A270%20270%200%200%201%20134%20234%20Z%27%20fill%3D%27rgb%28200%2C230%2C255%29%27%20fill-opacity%3D%270.95%27%2F%3E%0A%3Cpath%20d%3D%27M0%200%20L134%20234%20A270%20270%200%200%201%200%20270%20Z%27%20fill%3D%27rgb%28220%2C200%2C255%29%27%20fill-opacity%3D%270.9%27%2F%3E%0A%3Cpath%20d%3D%27M0%200%20L0%20270%20A270%20270%200%200%201%20-134%20234%20Z%27%20fill%3D%27rgb%28180%2C140%2C230%29%27%20fill-opacity%3D%270.7%27%2F%3E%0A%3Cpath%20d%3D%27M0%200%20L-134%20234%20A270%20270%200%200%201%20-234%20134%20Z%27%20fill%3D%27rgb%28120%2C80%2C180%29%27%20fill-opacity%3D%270.5%27%2F%3E%0A%3Cpath%20d%3D%27M0%200%20L-234%20134%20A270%20270%200%200%201%20-270%200%20Z%27%20fill%3D%27rgb%2880%2C40%2C140%29%27%20fill-opacity%3D%270.4%27%2F%3E%0A%3Cpath%20d%3D%27M0%200%20L-270%200%20A270%20270%200%200%201%20-234%20-134%20Z%27%20fill%3D%27rgb%2850%2C20%2C100%29%27%20fill-opacity%3D%270.3%27%2F%3E%0A%3Cpath%20d%3D%27M0%200%20L-234%20-134%20A270%20270%200%200%201%20-134%20-234%20Z%27%20fill%3D%27rgb%2860%2C30%2C110%29%27%20fill-opacity%3D%270.35%27%2F%3E%0A%3Cpath%20d%3D%27M0%200%20L-134%20-234%20A270%20270%200%200%201%200%20-270%20Z%27%20fill%3D%27rgb%28100%2C60%2C180%29%27%20fill-opacity%3D%270.5%27%2F%3E%0A%3Cpath%20d%3D%27M0%200%20L0%20-270%20A270%20270%200%200%201%20134%20-234%20Z%27%20fill%3D%27rgb%28160%2C100%2C220%29%27%20fill-opacity%3D%270.65%27%2F%3E%0A%3Cpath%20d%3D%27M0%200%20L134%20-234%20A270%20270%200%200%201%20234%20-134%20Z%27%20fill%3D%27rgb%28200%2C180%2C255%29%27%20fill-opacity%3D%270.8%27%2F%3E%0A%3Cpath%20d%3D%27M0%200%20L234%20-134%20A270%20270%200%200%201%20270%200%20Z%27%20fill%3D%27rgb%28180%2C220%2C255%29%27%20fill-opacity%3D%270.85%27%2F%3E%0A%3CanimateTransform%20attributeName%3D%27transform%27%20type%3D%27rotate%27%20from%3D%270%200%200%27%20to%3D%27360%200%200%27%20dur%3D%2732s%27%20repeatCount%3D%27indefinite%27%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fg%3E%0A%0A%3C!--%20Inner%20photon%20ring%3A%20bright%20cyan-white%20--%3E%0A%3Ccircle%20cx%3D%270%27%20cy%3D%270%27%20r%3D%27133%27%20fill%3D%27none%27%20stroke%3D%27rgb%28220%2C240%2C255%29%27%20stroke-width%3D%275%27%20opacity%3D%270.95%27%2F%3E%0A%3Ccircle%20cx%3D%270%27%20cy%3D%270%27%20r%3D%27139%27%20fill%3D%27none%27%20stroke%3D%27rgb%28150%2C200%2C255%29%27%20stroke-width%3D%273%27%20opacity%3D%270.6%27%2F%3E%0A%3Ccircle%20cx%3D%270%27%20cy%3D%270%27%20r%3D%27126%27%20fill%3D%27none%27%20stroke%3D%27rgb%28180%2C140%2C230%29%27%20stroke-width%3D%272%27%20opacity%3D%270.5%27%2F%3E%0A%0A%3C!--%20Event%20horizon%3A%20solid%20black%20--%3E%0A%3Ccircle%20cx%3D%270%27%20cy%3D%270%27%20r%3D%27128%27%20fill%3D%27black%27%2F%3E%0A%3C%2Fsvg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
html[data-theme="blackhole"] .header,
html[data-theme="blackhole"] .main { position: relative; z-index: 1; }


/* =====================================================
   SETTINGS MODAL
   ===================================================== */

.arcade-settings-overlay {
    z-index: 99998;
}
.arcade-settings-modal {
    position: relative;
    background: var(--bg-secondary, #1a1a2a);
    color: var(--text-primary, #fff);
    border-radius: 14px;
    padding: 24px 24px 16px;
    width: min(640px, 100%);
    max-height: 90vh;
    overflow-y: auto;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 20px 60px rgba(0,0,0,0.55);
}
.arcade-settings-close {
    position: absolute; top: 10px; right: 10px;
    background: transparent; border: none;
    color: var(--text-secondary); font-size: 26px; cursor: pointer;
    line-height: 1; padding: 4px 10px;
}
.arcade-settings-title {
    margin: 0 0 14px; font-size: 1.4rem; font-weight: 800;
}
.arcade-settings-tabs {
    display: flex; gap: 6px; flex-wrap: wrap;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 14px; padding-bottom: 8px;
}
.arcade-settings-tab {
    background: transparent; color: var(--text-secondary);
    border: 1px solid transparent; border-radius: 6px;
    padding: 0.4rem 0.85rem; font-weight: 600; cursor: pointer;
}
.arcade-settings-tab.is-active {
    background: rgba(124,58,237,0.18); color: var(--text-primary);
    border-color: rgba(124,58,237,0.45);
}
.arcade-settings-section {
    border: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.02);
    border-radius: 10px;
    padding: 14px 16px; margin-bottom: 14px;
}
.arcade-settings-section h3 {
    margin: 0 0 10px; font-size: 1.02rem; font-weight: 700;
}
.arcade-settings-row {
    display: flex; align-items: center; gap: 10px; padding: 6px 0;
}
.arcade-settings-row label {
    flex: 0 0 80px; color: var(--text-secondary); font-size: 0.9rem;
}
.arcade-settings-row select,
.arcade-settings-row input[type="text"] {
    flex: 1; padding: 7px 10px; border-radius: 6px;
    background: rgba(0,0,0,0.3); color: var(--text-primary);
    border: 1px solid rgba(255,255,255,0.1);
    font: inherit;
}
.arcade-settings-checkbox {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 0; font-size: 0.94rem; cursor: pointer;
}
.arcade-settings-radios {
    display: flex; flex-wrap: wrap; gap: 10px;
}
.arcade-settings-radio {
    display: flex; align-items: center; gap: 6px;
    cursor: pointer; padding: 6px 12px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px; font-size: 0.92rem;
}
.arcade-settings-radio:has(input:checked) {
    border-color: var(--accent);
    background: rgba(124,58,237,0.18);
    color: var(--text-primary);
}

/* Theme picker grid */
.arcade-settings-themes {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 8px;
}
.arcade-settings-theme {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px; cursor: pointer;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    color: var(--text-primary); font-size: 0.88rem; font-weight: 600;
    text-align: left;
}
.arcade-settings-theme.is-active {
    border-color: var(--accent);
    background: rgba(124,58,237,0.22);
}
.arcade-settings-theme-swatch {
    width: 28px; height: 28px; border-radius: 6px; flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15);
}

/* Tab order list */
.arcade-settings-taborder {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 4px;
}
.arcade-settings-tabitem {
    display: flex; align-items: center; gap: 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 6px; padding: 8px 10px;
    cursor: grab;
    user-select: none;
}
.arcade-settings-tabitem.is-dragging { opacity: 0.5; }
.arcade-settings-tabitem.drag-over { border-color: var(--accent); }
.arcade-settings-grip { color: var(--text-secondary); cursor: grab; font-weight: 800; }

/* Catalog list rows */
.arcade-settings-list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 4px;
    max-height: 280px; overflow-y: auto;
}
.arcade-settings-row-item {
    display: flex; align-items: center; gap: 10px;
    background: rgba(255,255,255,0.04);
    border-radius: 6px; padding: 6px 8px;
}
.arcade-settings-row-thumb {
    width: 32px; height: 32px; border-radius: 4px; object-fit: cover; flex-shrink: 0;
    background: rgba(255,255,255,0.08);
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; color: rgba(255,255,255,0.7); font-size: 14px;
}
.arcade-settings-row-title { flex: 1; font-size: 0.9rem; }
.arcade-settings-row-remove {
    background: transparent; border: none; color: var(--text-secondary);
    font-size: 18px; cursor: pointer; padding: 0 6px;
}
.arcade-settings-row-remove:hover { color: #ef4444; }
.arcade-settings-empty {
    margin: 0; padding: 12px 0; opacity: 0.6; font-size: 0.9rem;
}
.arcade-settings-help {
    margin: 0 0 8px; font-size: 0.82rem; color: var(--text-secondary); opacity: 0.85;
}
.arcade-settings-textarea {
    width: 100%; box-sizing: border-box;
    background: #0a0a0f; color: #d4d4d8;
    border: 1px solid rgba(255,255,255,0.1); border-radius: 6px;
    padding: 10px 12px; font: 13px ui-monospace, 'SF Mono', monospace;
    resize: vertical; min-height: 200px;
}
.auth-submit-secondary {
    background: rgba(255,255,255,0.06);
    color: var(--text-primary);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 6px; padding: 0.5rem 1rem;
    font-weight: 600; cursor: pointer;
}
.auth-submit-secondary:hover { background: rgba(255,255,255,0.1); }

/* Settings gear button in header */
.arcade-settings-gear {
    background: rgba(255,255,255,0.06);
    color: var(--text-primary);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 50%;
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    margin-right: 8px;
    transition: transform 0.4s, background 0.15s;
}
.arcade-settings-gear:hover {
    background: rgba(124,58,237,0.18);
    transform: rotate(45deg);
}

/* Personal header quote (between settings gear + install button) */
.header-quote {
    display: inline-flex;
    align-items: center;
    /* No max-width / no truncation — show the whole quote even if it
       takes extra room in the header. The 80-char limit on the field
       stops it from going truly absurd. */
    margin-right: 10px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-style: italic;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    cursor: text;
    line-height: 1.2;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.header-quote:hover,
.header-quote:focus-visible {
    background: rgba(124, 58, 237, 0.15);
    border-color: color-mix(in srgb, var(--accent, #7c3aed) 60%, transparent);
    color: var(--text-primary);
    outline: none;
}
.header-quote.is-empty {
    color: rgba(255, 255, 255, 0.35);
    font-style: normal;
    font-size: 0.78rem;
}
.header-quote .emoji-inline { height: 1.1em; width: auto; vertical-align: middle; }
.header-quote-input {
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-style: italic;
    font-size: 0.85rem;
    width: 240px;
    padding: 0;
    margin: 0;
}

@media (max-width: 768px) {
    .header-quote { font-size: 0.78rem; padding: 3px 9px; }
    .header-quote-input { width: 130px; font-size: 0.78rem; }
}
@media (max-width: 480px) {
    /* On very narrow screens drop the quote rather than crowd the bar */
    .header-quote { display: none; }
}

/* Right-click context menu on game cards */
.arcade-card-menu {
    position: absolute;
    background: #1a1a2a;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 4px;
    z-index: 99999;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    min-width: 130px;
}
.arcade-card-menu button {
    display: block; width: 100%; text-align: left;
    background: transparent; color: var(--text-primary);
    border: none; padding: 8px 12px; cursor: pointer;
    font-size: 0.9rem; border-radius: 4px;
}
.arcade-card-menu button:hover { background: rgba(124,58,237,0.18); }

/* Hide tabs that the user has unchecked */
.tab-btn[data-tab-hidden="1"] { display: none !important; }

/* =====================================================
   PROFILE WIDGETS — drag-to-place image board on profiles
   ===================================================== */

.profile-widgets-section { padding: 14px 16px; }
.profile-widgets-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin-bottom: 8px;
}
.profile-widgets-actions { display: flex; gap: 6px; }
.profile-widget-btn {
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 0.4rem 0.85rem;
    font-weight: 600; font-size: 0.85rem;
    cursor: pointer;
}
.profile-widget-btn:hover { filter: brightness(1.1); }
.profile-widget-btn-secondary {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.15);
    color: var(--text-primary);
}
.profile-widget-btn-secondary.is-on {
    background: rgba(34,197,94,0.18);
    border-color: rgba(34,197,94,0.5);
    color: #86efac;
}

.profile-widgets-canvas {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    background:
        radial-gradient(circle at 0 0, rgba(124,58,237,0.06), transparent 50%),
        radial-gradient(circle at 100% 100%, rgba(6,182,212,0.06), transparent 50%),
        rgba(255,255,255,0.02);
    border: 1px dashed rgba(255,255,255,0.08);
    border-radius: 10px;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}
.profile-widgets-canvas.is-editing {
    border-style: solid;
    border-color: rgba(124,58,237,0.4);
    cursor: crosshair;
}

.profile-widgets-empty {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-secondary);
    font-size: 0.88rem;
    text-align: center; padding: 1rem;
    opacity: 0.7;
}

.profile-widget {
    position: absolute;
    overflow: visible;
    border-radius: 6px;
    transform-origin: center;
    transition: filter 0.15s;
}
.profile-widget img {
    width: 100%; height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}
.profile-widgets-canvas.is-editing .profile-widget {
    cursor: grab;
    box-shadow: 0 0 0 2px rgba(124,58,237,0.5);
    background: rgba(0,0,0,0.18);
}
.profile-widgets-canvas.is-editing .profile-widget:hover {
    box-shadow: 0 0 0 2px var(--accent);
}
.profile-widgets-canvas.is-editing .profile-widget:active { cursor: grabbing; }

/* Edit-mode chrome: delete chip + resize corner + rotate handle */
.profile-widget-del {
    position: absolute; top: -8px; right: -8px;
    width: 22px; height: 22px;
    background: #ef4444; color: #fff; border: 2px solid #1a1a2a;
    border-radius: 50%; cursor: pointer;
    font-size: 14px; line-height: 1; font-weight: 800;
    padding: 0;
    display: flex; align-items: center; justify-content: center;
}
.profile-widget-resize {
    position: absolute; right: 0; bottom: 0;
    width: 14px; height: 14px;
    background: var(--accent);
    border: 2px solid #1a1a2a;
    border-radius: 3px;
    cursor: nwse-resize;
}
.profile-widget-rot {
    position: absolute; top: -8px; left: -8px;
    width: 22px; height: 22px;
    background: #06b6d4; color: #fff; border: 2px solid #1a1a2a;
    border-radius: 50%; cursor: pointer;
    font-size: 12px; line-height: 1;
    padding: 0;
    display: flex; align-items: center; justify-content: center;
}

/* Read mode: hide all the chrome */
.profile-widgets-canvas:not(.is-editing) .profile-widget-del,
.profile-widgets-canvas:not(.is-editing) .profile-widget-resize,
.profile-widgets-canvas:not(.is-editing) .profile-widget-rot { display: none; }

/* Text widgets — text-only contents inside the same drag/resize box */
.profile-widget-text {
    display: flex; align-items: center; justify-content: center;
    text-align: center;
    padding: 4px 8px;
    border-radius: 6px;
    overflow: hidden;
}
.profile-widget-text > span {
    /* container queries — auto-shrink the text to fit the box. cqh =
       1% of the widget's height, so the user resizing the widget
       changes the text size proportionally. Falls back to a flat
       size on browsers without container queries. */
    font-size: clamp(0.75rem, 90cqh, 6rem);
    font-weight: 700;
    line-height: 1.1;
    word-break: break-word;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.profile-widget-text { container-type: size; }
.profile-widget-text-bg-none { background: transparent; }
.profile-widget-text-bg-subtle { background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.profile-widget-text-bg-solid { background: rgba(124, 58, 237, 0.65); }

/* Text-widget editor modal */
.arcade-textwidget-overlay {
    z-index: 100000;
}
.arcade-textwidget-modal {
    position: relative;
    background: var(--bg-secondary, #1a1a2a);
    color: var(--text-primary, #fff);
    border-radius: 14px;
    padding: 22px 22px 16px;
    width: min(420px, 100%);
    max-height: 90vh;
    overflow-y: auto;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 20px 60px rgba(0,0,0,0.55);
}
.arcade-textwidget-modal h3 { margin: 0 0 12px; font-size: 1.15rem; }
.arcade-textwidget-close {
    position: absolute; top: 8px; right: 10px;
    background: transparent; border: none;
    color: var(--text-secondary); font-size: 24px; cursor: pointer;
    line-height: 1; padding: 4px 10px;
}
.arcade-textwidget-row {
    display: flex; align-items: center; gap: 12px; margin: 10px 0;
}
.arcade-textwidget-row > span {
    flex: 0 0 80px; color: var(--text-secondary); font-size: 0.88rem;
}
.arcade-textwidget-row textarea,
.arcade-textwidget-row select,
.arcade-textwidget-row input[type="color"] {
    flex: 1;
    padding: 8px 10px; border-radius: 6px;
    background: rgba(0,0,0,0.3); color: var(--text-primary);
    border: 1px solid rgba(255,255,255,0.1);
    font: inherit;
}
.arcade-textwidget-row input[type="color"] {
    height: 36px; padding: 2px; cursor: pointer;
}
.arcade-textwidget-row textarea { resize: vertical; min-height: 60px; }
.arcade-textwidget-actions {
    display: flex; justify-content: flex-end; gap: 8px;
    margin-top: 14px;
}

/* ===================================================================
   PROFILE CUSTOMIZATION V2
   Steam-inspired visual flair: avatar frames, layouts, bg effects,
   decorative borders, featured artwork, status/tagline chips, privacy.
   =================================================================== */

/* ── Tagline + status chip under the username ───────────────────── */
.profile-tagline {
    grid-column: 2 / -1;
    color: var(--text-secondary);
    font-style: italic;
    font-size: 0.95rem;
    margin-top: -2px;
    margin-bottom: 2px;
    line-height: 1.2;
}
.profile-status-chip {
    grid-column: 2 / -1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    margin-top: 4px;
    margin-bottom: 4px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--profile-accent, #7c3aed) 35%, transparent), color-mix(in srgb, var(--profile-accent, #7c3aed) 12%, transparent));
    color: var(--text-primary);
    border: 1px solid color-mix(in srgb, var(--profile-accent, #7c3aed) 50%, transparent);
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    width: fit-content;
    max-width: 100%;
}
.profile-status-chip .emoji-inline { height: 1.2em; width: auto; vertical-align: middle; }

/* ── Avatar frame system ─────────────────────────────────────────
   .profile-avatar is a positioning slot (overflow:visible so the rings
   can extend outside). .profile-avatar-frame is the circular clipping
   mask AROUND the img — frame-specific ::before/::after sit at z-index
   0 (behind the img which is at z-index 1) and extend with negative
   insets so their decorative ring is visible OUTSIDE the avatar. */
.profile-avatar-frame {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    /* No overflow: hidden — that's what was killing the decorations.
       The img has its own border-radius for the circle look. */
    overflow: visible;
}
.profile-avatar-frame > img,
.profile-avatar-frame > .profile-avatar-placeholder {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    position: relative;
    z-index: 2;
}

/* Default "none" frame keeps the original tasteful look (thin accent
   ring + drop shadow) so the profile doesn't look bare without a
   custom frame chosen. */
.profile-frame-none {
    box-shadow:
        0 0 0 3px var(--bg-secondary, #181820),
        0 0 0 5px var(--profile-accent, #7c3aed),
        0 6px 20px rgba(0, 0, 0, 0.5);
    border-radius: 50%;
}

/* ── Glow ── soft accent-colored bloom around the avatar */
.profile-frame-glow {
    box-shadow:
        0 0 0 4px var(--bg-secondary, #181820),
        0 0 0 6px color-mix(in srgb, var(--profile-accent, #7c3aed) 90%, white);
}
.profile-frame-glow::before {
    content: ''; position: absolute; inset: -22px;
    border-radius: 50%;
    background: radial-gradient(circle,
        color-mix(in srgb, var(--profile-accent, #7c3aed) 95%, white) 0%,
        color-mix(in srgb, var(--profile-accent, #7c3aed) 60%, transparent) 40%,
        transparent 75%);
    filter: blur(14px);
    z-index: 0;
    animation: profile-glow-pulse 2.6s ease-in-out infinite;
}
@keyframes profile-glow-pulse {
    0%, 100% { opacity: 0.85; transform: scale(1); }
    50%      { opacity: 1;    transform: scale(1.12); }
}

/* ── Rainbow ── animated conic gradient ring */
@keyframes profile-rainbow-spin { to { transform: rotate(360deg); } }
.profile-frame-rainbow::before {
    content: ''; position: absolute; inset: -10px;
    border-radius: 50%;
    background: conic-gradient(
        #ff0080, #ff8c00, #ffd000, #4ade80, #00d4ff,
        #7c3aed, #ff00aa, #ff0080);
    animation: profile-rainbow-spin 4s linear infinite;
    z-index: 0;
}
.profile-frame-rainbow::after {
    /* Inner cutout so the ring reads as a ring, not a disc */
    content: ''; position: absolute; inset: -2px;
    border-radius: 50%;
    background: var(--bg-secondary, #181820);
    z-index: 1;
}

/* ── Gold ── shimmering metallic ring */
@keyframes profile-gold-shimmer {
    0%, 100% { filter: brightness(1); }
    50%      { filter: brightness(1.25); }
}
.profile-frame-gold::before {
    content: ''; position: absolute; inset: -8px;
    border-radius: 50%;
    background:
        conic-gradient(from 0deg,
            #b88817, #fff5b8, #d4a017, #ffe98a,
            #b88817, #fff5b8, #d4a017, #ffe98a, #b88817);
    box-shadow: 0 0 22px rgba(255, 200, 50, 0.6);
    z-index: 0;
    animation: profile-gold-shimmer 2.5s ease-in-out infinite,
               profile-rainbow-spin 14s linear infinite;
}
.profile-frame-gold::after {
    content: ''; position: absolute; inset: 0;
    border-radius: 50%;
    background: var(--bg-secondary, #181820);
    z-index: 1;
}

/* ── Neon pulse ── hot pink + cyan trade-off shadow */
@keyframes profile-neon-pulse {
    0%, 100% { box-shadow:
        0 0 0 5px #ff2e9a,
        0 0 24px 4px #ff2e9a,
        0 0 60px 10px color-mix(in srgb, #ff2e9a 70%, transparent),
        inset 0 0 18px #01f9ff; }
    50%      { box-shadow:
        0 0 0 5px #01f9ff,
        0 0 32px 6px #01f9ff,
        0 0 80px 14px color-mix(in srgb, #01f9ff 70%, transparent),
        inset 0 0 24px #ff2e9a; }
}
.profile-frame-neon {
    border-radius: 50%;
    animation: profile-neon-pulse 2.4s ease-in-out infinite;
}

/* ── Glitch ── RGB-split ring with CRT scanline overlay */
@keyframes profile-glitch-jitter {
    0%, 100% { transform: translate(0, 0); opacity: 0.85; }
    20%  { transform: translate(-3px, 1px); opacity: 1; }
    40%  { transform: translate(2px, -2px); opacity: 0.6; }
    60%  { transform: translate(-1px, 3px); opacity: 0.95; }
    80%  { transform: translate(3px, -1px); opacity: 0.7; }
}
.profile-frame-glitch {
    box-shadow:
        -4px 0 0 #ff00aa,
         4px 0 0 #00d4ff,
         0 0 0 6px var(--bg-secondary, #181820),
         0 0 30px rgba(255, 0, 170, 0.4),
         0 0 30px rgba(0, 212, 255, 0.4);
    border-radius: 50%;
    animation: profile-glitch-jitter 0.4s steps(4) infinite;
}
.profile-frame-glitch::after {
    content: ''; position: absolute; inset: 0;
    border-radius: 50%;
    background: repeating-linear-gradient(0deg,
        transparent 0px, transparent 2px,
        rgba(0,0,0,0.45) 3px, rgba(0,0,0,0.45) 4px);
    pointer-events: none;
    z-index: 3;
    mix-blend-mode: multiply;
}

/* ── Snake ── marching dashed ring */
@keyframes profile-snake-march {
    to { background-position: 200px 0, -200px 100%, 0 -200px, 100% 200px; }
}
.profile-frame-snake::before {
    content: ''; position: absolute; inset: -7px;
    border-radius: 50%;
    background:
        linear-gradient(90deg, var(--profile-accent, #7c3aed) 60%, transparent 60%) top    / 14px 5px repeat-x,
        linear-gradient(90deg, var(--profile-accent, #7c3aed) 60%, transparent 60%) bottom / 14px 5px repeat-x,
        linear-gradient(0deg,  var(--profile-accent, #7c3aed) 60%, transparent 60%) left   / 5px 14px repeat-y,
        linear-gradient(0deg,  var(--profile-accent, #7c3aed) 60%, transparent 60%) right  / 5px 14px repeat-y;
    animation: profile-snake-march 1.6s linear infinite;
    z-index: 0;
    /* Use a circular ring effect via mask so it actually traces the
       avatar circle rather than forming a square dotted box. */
    -webkit-mask: radial-gradient(circle, transparent 50%, #000 52%, #000 60%, transparent 62%);
            mask: radial-gradient(circle, transparent 50%, #000 52%, #000 60%, transparent 62%);
}
.profile-frame-snake::after {
    /* Solid accent dot in the corners marching with the dashes */
    content: ''; position: absolute; inset: -4px;
    border-radius: 50%;
    border: 2px dashed var(--profile-accent, #7c3aed);
    animation: profile-rainbow-spin 8s linear infinite;
    z-index: 0;
}

/* ── Decorative profile-modal background effects ───────────────── */
.profile-bg-effect {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
    overflow: hidden;
}

/* Vignette: stronger fade + subtle inner glow so it actually reads as
   "this profile has a vignette" rather than blending in. */
.profile-bg-vignette {
    background:
        radial-gradient(ellipse at center,
            transparent 25%,
            rgba(0,0,0,0.4) 55%,
            rgba(0,0,0,0.75) 80%,
            rgba(0,0,0,0.95) 100%);
}
.profile-bg-vignette::before {
    /* Inner glow layer — subtle accent halo around the focal area */
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse at 50% 30%,
        color-mix(in srgb, var(--profile-accent, #7c3aed) 22%, transparent) 0%,
        transparent 45%);
    pointer-events: none;
}

/* Stars: dense 4-layer starfield with three twinkle rates so it looks
   alive rather than static. ~60+ stars total at varying brightnesses. */
@keyframes profile-stars-twinkle {
    0%, 100% { opacity: 1;   }
    50%      { opacity: 0.4; }
}
@keyframes profile-stars-drift {
    to { transform: translate(-160px, -90px); }
}
.profile-bg-stars {
    background:
        /* Bright big stars */
        radial-gradient(2.5px 2.5px at 20%  30%, #fff,  transparent 60%),
        radial-gradient(2.5px 2.5px at 70%  50%, #fff,  transparent 60%),
        radial-gradient(2px 2px     at 90%  20%, #fff,  transparent 60%),
        radial-gradient(3px 3px     at 35%  85%, #fff,  transparent 60%),
        radial-gradient(2px 2px     at 55%  15%, #fff,  transparent 60%),
        radial-gradient(2.5px 2.5px at 8%   65%, #fff,  transparent 60%),
        radial-gradient(2px 2px     at 80%  75%, #fff,  transparent 60%),
        /* Mid stars */
        radial-gradient(1.5px 1.5px at 15%  20%, #fffd, transparent 60%),
        radial-gradient(1.5px 1.5px at 25%  55%, #fffd, transparent 60%),
        radial-gradient(1.5px 1.5px at 45%  35%, #fffd, transparent 60%),
        radial-gradient(1.5px 1.5px at 60%  80%, #fffd, transparent 60%),
        radial-gradient(1.5px 1.5px at 75%  10%, #fffd, transparent 60%),
        radial-gradient(1.5px 1.5px at 82%  60%, #fffd, transparent 60%),
        radial-gradient(1.5px 1.5px at 95%  90%, #fffd, transparent 60%),
        radial-gradient(1.5px 1.5px at 5%   85%, #fffd, transparent 60%),
        radial-gradient(1.5px 1.5px at 50%  60%, #fffd, transparent 60%),
        /* Faint dust stars */
        radial-gradient(1px 1px at 12%  40%, #fffa, transparent 60%),
        radial-gradient(1px 1px at 22%  72%, #fffa, transparent 60%),
        radial-gradient(1px 1px at 38%  10%, #fffa, transparent 60%),
        radial-gradient(1px 1px at 48%  48%, #fffa, transparent 60%),
        radial-gradient(1px 1px at 62%  25%, #fffa, transparent 60%),
        radial-gradient(1px 1px at 68%  90%, #fffa, transparent 60%),
        radial-gradient(1px 1px at 78%  35%, #fffa, transparent 60%),
        radial-gradient(1px 1px at 88%  50%, #fffa, transparent 60%),
        radial-gradient(1px 1px at 98%  35%, #fffa, transparent 60%),
        radial-gradient(1px 1px at 3%   25%, #fffa, transparent 60%),
        radial-gradient(1px 1px at 32%  92%, #fffa, transparent 60%),
        radial-gradient(1px 1px at 42%  70%, #fffa, transparent 60%),
        radial-gradient(1px 1px at 52%  5%,  #fffa, transparent 60%),
        radial-gradient(1px 1px at 73%  45%, #fffa, transparent 60%),
        radial-gradient(1px 1px at 17%  55%, #fffa, transparent 60%),
        radial-gradient(1px 1px at 28%  18%, #fffa, transparent 60%),
        radial-gradient(1px 1px at 58%  68%, #fffa, transparent 60%),
        radial-gradient(1px 1px at 87%  82%, #fffa, transparent 60%);
    background-size: 800px 600px;
    animation: profile-stars-twinkle 4s ease-in-out infinite;
}
/* Second + third layers for parallax + extra count via ::before/::after */
.profile-bg-stars::before {
    content: ''; position: absolute; inset: -10%;
    background:
        radial-gradient(1.5px 1.5px at 14% 14%, #fff, transparent 60%),
        radial-gradient(1.5px 1.5px at 33% 47%, #fff, transparent 60%),
        radial-gradient(1.5px 1.5px at 67% 23%, #fff, transparent 60%),
        radial-gradient(1.5px 1.5px at 84% 67%, #fff, transparent 60%),
        radial-gradient(1.5px 1.5px at 25% 75%, #fff, transparent 60%),
        radial-gradient(1.5px 1.5px at 53% 92%, #fff, transparent 60%),
        radial-gradient(2px 2px     at 40% 23%, #fff, transparent 60%),
        radial-gradient(2px 2px     at 95% 8%,  #fff, transparent 60%),
        radial-gradient(2px 2px     at 7%  92%, #fff, transparent 60%),
        radial-gradient(1px 1px     at 12% 32%, #fff8, transparent 60%),
        radial-gradient(1px 1px     at 22% 88%, #fff8, transparent 60%),
        radial-gradient(1px 1px     at 39% 67%, #fff8, transparent 60%),
        radial-gradient(1px 1px     at 56% 43%, #fff8, transparent 60%),
        radial-gradient(1px 1px     at 76% 17%, #fff8, transparent 60%),
        radial-gradient(1px 1px     at 91% 55%, #fff8, transparent 60%);
    background-size: 600px 500px;
    animation: profile-stars-twinkle 6.5s ease-in-out infinite,
               profile-stars-drift 90s linear infinite;
    opacity: 0.85;
}
.profile-bg-stars::after {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(1px 1px at 8%  8%,  #fff, transparent 60%),
        radial-gradient(1px 1px at 18% 62%, #fff, transparent 60%),
        radial-gradient(1px 1px at 36% 28%, #fff, transparent 60%),
        radial-gradient(1px 1px at 47% 82%, #fff, transparent 60%),
        radial-gradient(1px 1px at 64% 46%, #fff, transparent 60%),
        radial-gradient(1px 1px at 77% 14%, #fff, transparent 60%),
        radial-gradient(1px 1px at 93% 71%, #fff, transparent 60%),
        radial-gradient(2px 2px at 43% 53%, #fffe, transparent 60%);
    background-size: 400px 350px;
    animation: profile-stars-twinkle 2.4s ease-in-out infinite;
}

/* Swirl: stronger contrast, multiple rotating layers so the spiral
   actually reads instead of being a faint smudge. */
@keyframes profile-swirl-rotate { to { transform: rotate(360deg) scale(1.15); } }
@keyframes profile-swirl-rotate-rev { to { transform: rotate(-360deg) scale(1.05); } }
.profile-bg-swirl::before {
    content: ''; position: absolute; inset: -30%;
    background: conic-gradient(from 0deg,
        transparent 0deg,
        color-mix(in srgb, var(--profile-accent, #7c3aed) 55%, transparent) 30deg,
        transparent 90deg,
        color-mix(in srgb, var(--profile-accent, #7c3aed) 45%, transparent) 150deg,
        transparent 210deg,
        color-mix(in srgb, var(--profile-accent, #7c3aed) 50%, transparent) 270deg,
        transparent 330deg);
    animation: profile-swirl-rotate 50s linear infinite;
    filter: blur(28px);
    opacity: 0.7;
}
.profile-bg-swirl::after {
    /* Counter-rotating accent layer for visible motion */
    content: ''; position: absolute; inset: -15%;
    background: conic-gradient(from 180deg,
        transparent 0deg,
        color-mix(in srgb, white 30%, var(--profile-accent, #7c3aed)) 60deg,
        transparent 120deg,
        color-mix(in srgb, white 20%, var(--profile-accent, #7c3aed)) 240deg,
        transparent 300deg);
    animation: profile-swirl-rotate-rev 35s linear infinite;
    filter: blur(35px);
    opacity: 0.5;
    mix-blend-mode: screen;
}

/* Scanlines: tighter line spacing + a subtle moving sweep band so it
   reads as live CRT, not a static texture. */
@keyframes profile-scanlines-sweep {
    0%   { background-position: 0 0, 0 -100vh; }
    100% { background-position: 0 0, 0 100vh; }
}
.profile-bg-scanlines {
    background-image:
        repeating-linear-gradient(0deg,
            rgba(0, 0, 0, 0.28) 0px,
            rgba(0, 0, 0, 0.28) 1px,
            transparent 1px,
            transparent 3px),
        linear-gradient(180deg,
            transparent 0%,
            rgba(255, 255, 255, 0.05) 49%,
            rgba(255, 255, 255, 0.12) 50%,
            rgba(255, 255, 255, 0.05) 51%,
            transparent 100%);
    background-size: 100% 100%, 100% 200vh;
    animation: profile-scanlines-sweep 5s linear infinite;
    mix-blend-mode: multiply;
}

/* Dust: way more particles + 3 layers at different speeds so the air
   feels alive. */
@keyframes profile-dust-drift {
    0%   { transform: translate(0, 0); }
    33%  { transform: translate(30px, -40px); }
    66%  { transform: translate(-20px, -70px); }
    100% { transform: translate(0, 0); }
}
@keyframes profile-dust-drift-2 {
    0%   { transform: translate(0, 0); }
    50%  { transform: translate(-40px, -50px); }
    100% { transform: translate(0, 0); }
}
.profile-bg-dust::before,
.profile-bg-dust::after {
    content: ''; position: absolute; inset: -25%;
    background:
        radial-gradient(2px 2px     at 10%  20%, rgba(255,255,255,0.5), transparent 60%),
        radial-gradient(2px 2px     at 30%  70%, rgba(255,255,255,0.45), transparent 60%),
        radial-gradient(3px 3px     at 80%  40%, rgba(255,255,255,0.4),  transparent 60%),
        radial-gradient(2px 2px     at 60%  90%, rgba(255,255,255,0.5),  transparent 60%),
        radial-gradient(2px 2px     at 50%  30%, rgba(255,255,255,0.42), transparent 60%),
        radial-gradient(2px 2px     at 17%  47%, rgba(255,255,255,0.4),  transparent 60%),
        radial-gradient(3px 3px     at 38%  82%, rgba(255,255,255,0.5),  transparent 60%),
        radial-gradient(2px 2px     at 65%  12%, rgba(255,255,255,0.45), transparent 60%),
        radial-gradient(2px 2px     at 88%  68%, rgba(255,255,255,0.5),  transparent 60%),
        radial-gradient(1.5px 1.5px at 22%  92%, rgba(255,255,255,0.35), transparent 60%),
        radial-gradient(1.5px 1.5px at 43%  53%, rgba(255,255,255,0.4),  transparent 60%),
        radial-gradient(1.5px 1.5px at 72%  73%, rgba(255,255,255,0.35), transparent 60%),
        radial-gradient(1.5px 1.5px at 92%  18%, rgba(255,255,255,0.4),  transparent 60%),
        radial-gradient(1.5px 1.5px at 5%   8%,  rgba(255,255,255,0.4),  transparent 60%),
        radial-gradient(2px 2px     at 33%  37%, rgba(255,220,200,0.45), transparent 60%),
        radial-gradient(2px 2px     at 67%  62%, rgba(220,240,255,0.5),  transparent 60%);
    background-size: 700px 700px;
    animation: profile-dust-drift 18s ease-in-out infinite;
    pointer-events: none;
}
.profile-bg-dust::after {
    animation: profile-dust-drift-2 28s ease-in-out infinite;
    background-size: 500px 500px;
    opacity: 0.8;
}
/* Third dust layer so density is REAL not implied — adds another ~16
   particles drifting at a third speed. */
.profile-bg-dust {
    background-image:
        radial-gradient(1.5px 1.5px at 14% 14%, rgba(255,255,255,0.4),  transparent 60%),
        radial-gradient(1.5px 1.5px at 28% 58%, rgba(255,255,255,0.35), transparent 60%),
        radial-gradient(2px 2px     at 47% 22%, rgba(255,255,255,0.45), transparent 60%),
        radial-gradient(1.5px 1.5px at 61% 78%, rgba(255,255,255,0.4),  transparent 60%),
        radial-gradient(1.5px 1.5px at 75% 35%, rgba(255,255,255,0.35), transparent 60%),
        radial-gradient(1.5px 1.5px at 89% 84%, rgba(255,255,255,0.4),  transparent 60%),
        radial-gradient(1.5px 1.5px at 9%  77%, rgba(255,255,255,0.35), transparent 60%),
        radial-gradient(1.5px 1.5px at 51% 51%, rgba(255,255,255,0.4),  transparent 60%);
    background-size: 600px 600px;
    animation: profile-dust-drift 38s linear infinite reverse;
}

/* ── Decorative outer borders ──────────────────────────────────── */
.profile-border-ornate {
    box-shadow:
        0 0 0 2px var(--profile-accent, #7c3aed),
        0 0 0 4px #181820,
        0 0 0 6px color-mix(in srgb, var(--profile-accent, #7c3aed) 70%, white),
        0 0 0 8px #181820,
        0 0 0 10px color-mix(in srgb, var(--profile-accent, #7c3aed) 40%, transparent),
        0 30px 60px rgba(0, 0, 0, 0.6);
}

.profile-border-tape::before {
    content: '';
    position: absolute; top: -16px; left: 50%; transform: translateX(-50%) rotate(-3deg);
    width: 120px; height: 32px;
    background: rgba(255, 240, 180, 0.85);
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    z-index: 5;
    pointer-events: none;
}
.profile-border-tape::after {
    content: '';
    position: absolute; bottom: -10px; right: 30px;
    width: 90px; height: 26px;
    background: rgba(180, 220, 255, 0.7);
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    transform: rotate(4deg);
    z-index: 5;
    pointer-events: none;
}

.profile-border-circuit {
    box-shadow:
        0 0 0 1px var(--profile-accent, #7c3aed),
        0 0 0 6px #0a0a12,
        0 0 0 7px var(--profile-accent, #7c3aed),
        0 0 30px color-mix(in srgb, var(--profile-accent, #7c3aed) 60%, transparent),
        0 30px 60px rgba(0,0,0,0.6);
    background-image:
        linear-gradient(90deg, color-mix(in srgb, var(--profile-accent, #7c3aed) 20%, transparent) 1px, transparent 1px),
        linear-gradient(0deg,  color-mix(in srgb, var(--profile-accent, #7c3aed) 20%, transparent) 1px, transparent 1px);
    background-size: 40px 40px;
    background-blend-mode: overlay;
}

.profile-border-ribbon::before {
    content: '★ FEATURED ★';
    position: absolute;
    top: 12px; left: -36px;
    background: linear-gradient(135deg, #ff2e9a, #7c3aed);
    color: #fff;
    padding: 4px 36px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 1px;
    transform: rotate(-30deg);
    box-shadow: 0 4px 10px rgba(0,0,0,0.4);
    z-index: 5;
}

/* ── Featured Artwork Showcase ─────────────────────────────────── */
.profile-artwork-section { margin-top: 12px; }
.profile-artwork-grid {
    display: grid;
    gap: 10px;
}
.profile-artwork-grid-1 { grid-template-columns: 1fr; }
.profile-artwork-grid-2 { grid-template-columns: 1fr 1fr; }
/* 3 + 4 use simple column layouts now that cards are natural-height
   (no row constraints — uneven heights are fine, masonry-ish look). */
.profile-artwork-grid-3 { grid-template-columns: 2fr 1fr; }
.profile-artwork-grid-3 .profile-artwork-card:nth-child(1) { grid-row: span 2; }
.profile-artwork-grid-4 { grid-template-columns: 1fr 1fr; }

.profile-artwork-card {
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: 10px;
    background: #000;
    /* No aspect-ratio — each card adapts to its image so nothing gets
       cropped. The grid layout keeps multi-card showcases tidy without
       forcing a fixed shape. */
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    cursor: zoom-in;
    transition: transform 200ms ease;
    display: flex;
    flex-direction: column;
}
.profile-artwork-card:hover { transform: scale(1.02); }
.profile-artwork-card img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    /* Cap on extremely tall images so they don't dominate the page */
    max-height: 80vh;
}
.profile-artwork-card figcaption {
    position: absolute;
    inset: auto 0 0 0;
    padding: 8px 12px;
    background: linear-gradient(transparent, rgba(0,0,0,0.85));
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
}

/* ── Layout variants ───────────────────────────────────────────── */
.profile-modal.profile-layout-compact .profile-header { height: 130px; }
.profile-modal.profile-layout-compact .profile-avatar { width: 96px; height: 96px; margin-top: -48px; }
.profile-modal.profile-layout-compact .profile-section { padding: 10px 16px; }
.profile-modal.profile-layout-compact .profile-bio { font-size: 0.92rem; }

/* Magazine layout: artwork floats wide before everything else,
   showcase becomes a side rail. Best with 2+ artwork pieces. */
.profile-modal.profile-layout-magazine .profile-header { height: 240px; }
.profile-modal.profile-layout-magazine .profile-artwork-section {
    margin-top: 0;
    margin-bottom: 20px;
}
/* Magazine layout: artwork cards stay natural height too — no
   aspect-ratio override here either. */
.profile-modal.profile-layout-magazine .profile-name {
    font-size: 1.7rem;
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}

/* ── Edit form: preset pickers + artwork grid + privacy toggles ── */
.profile-edit-pill-row {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-top: 4px;
}
.profile-edit-pill {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--text-secondary);
    padding: 6px 14px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 120ms;
}
.profile-edit-pill:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
}
.profile-edit-pill.picked {
    background: var(--profile-accent, #7c3aed);
    border-color: var(--profile-accent, #7c3aed);
    color: #fff;
}

.profile-edit-preset-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 10px;
    margin-top: 6px;
}
.profile-edit-preset {
    background: rgba(255, 255, 255, 0.04);
    border: 2px solid transparent;
    border-radius: 10px;
    padding: 12px 6px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 120ms;
}
.profile-edit-preset:hover { background: rgba(255, 255, 255, 0.08); }
.profile-edit-preset.picked {
    border-color: var(--profile-accent, #7c3aed);
    background: color-mix(in srgb, var(--profile-accent, #7c3aed) 18%, transparent);
}
.profile-edit-preset-swatch {
    width: 50px; height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, #444, #222);
    flex-shrink: 0;
    position: relative;
    overflow: visible;
}
.profile-edit-preset-mock {
    display: block;
    width: 100%; height: 100%;
    border-radius: 50%;
    background: linear-gradient(135deg, #555, #333);
    z-index: 1;
    position: relative;
}
.profile-edit-preset-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
}
.profile-edit-preset.picked .profile-edit-preset-label {
    color: var(--text-primary);
}

.profile-edit-artwork-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
    margin-top: 6px;
}
.profile-edit-artwork-tile {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background: #000;
    display: flex;
    flex-direction: column;
}
.profile-edit-artwork-tile img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    max-height: 240px;
}
.profile-edit-artwork-caption {
    position: absolute;
    left: 6px; right: 32px; bottom: 6px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 0.8rem;
}
.profile-edit-artwork-del {
    position: absolute;
    top: 6px; right: 6px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    border: none;
    width: 24px; height: 24px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
}
.profile-edit-artwork-del:hover { background: #ef4444; }
.profile-edit-artwork-add {
    aspect-ratio: 16 / 10;
    min-height: 120px;
    background: rgba(255, 255, 255, 0.04);
    border: 2px dashed rgba(255, 255, 255, 0.2);
    color: var(--text-secondary);
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: all 120ms;
}
.profile-edit-artwork-add:hover {
    border-color: var(--profile-accent, #7c3aed);
    color: var(--text-primary);
    background: color-mix(in srgb, var(--profile-accent, #7c3aed) 10%, transparent);
}

.profile-edit-privacy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 6px;
    margin-top: 6px;
}
.profile-edit-privacy-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 0.85rem;
}
.profile-edit-privacy-toggle:hover { color: var(--text-primary); }
.profile-edit-privacy-toggle input[type="checkbox"] {
    accent-color: var(--profile-accent, #7c3aed);
}

/* Mobile tweaks */
@media (max-width: 720px) {
    .profile-edit-preset-grid { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); }
    .profile-artwork-grid-3, .profile-artwork-grid-4 { grid-template-columns: 1fr; grid-template-rows: none; }
    .profile-artwork-grid-3 .profile-artwork-card:nth-child(1) { grid-row: auto; }
    .profile-modal.profile-layout-magazine .profile-header { height: 160px; }
}