/* --- General UI Components --- */

html, body {
    overscroll-behavior: contain;
}

/* Scrollable containers should contain their own scroll */
.overflow-y-auto, 
.overflow-auto,
#theme-browser-list,
.manual-page,
#detail-modal > div {
    overscroll-behavior: contain;
}

/* Custom Checkbox */
.custom-checkbox {
    appearance: none;
    background-color: var(--bg-primary);
    width: 1.5em; height: 1.5em;
    border: 2px solid var(--border);
    border-radius: 0.25em;
    display: grid; place-content: center;
    cursor: pointer;
}
.custom-checkbox::before {
    content: ""; width: 0.65em; height: 0.65em;
    transform: scale(0); transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em white;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
.custom-checkbox:checked { background-color: #10b981; border-color: #10b981; }
.custom-checkbox:checked::before { transform: scale(1); }

[data-theme='legacy'] .custom-checkbox:checked { background-color: #ffffff !important; border-color: #ffffff !important; }
[data-theme='legacy'] .custom-checkbox:checked::before { box-shadow: inset 1em 1em #000000 !important; }

[data-theme='brick'] .custom-checkbox:checked { background-color: var(--accent) !important; border-color: var(--accent) !important; }
[data-theme='brick'] .custom-checkbox:checked::before { box-shadow: inset 1em 1em var(--bg-primary) !important; }

[data-theme='os'] .custom-checkbox:checked { background-color: #000080 !important; border-color: #000080 !important; }

[data-theme='blueprint'] .custom-checkbox { border-radius: 0; border-color: #fff; }
[data-theme='blueprint'] .custom-checkbox:checked { background-color: var(--accent) !important; border-color: var(--accent) !important; }
[data-theme='blueprint'] .custom-checkbox:checked::before { box-shadow: inset 1em 1em #002b5c !important; }

[data-theme='woodgrain'] .custom-checkbox { border-radius: 2px; border-color: #1a0f00; background: #5c4033; }
[data-theme='woodgrain'] .custom-checkbox:checked { background-color: #ffbf00 !important; border-color: #1a0f00 !important; }
[data-theme='woodgrain'] .custom-checkbox:checked::before { box-shadow: inset 1em 1em #1a0f00 !important; }

[data-theme='papercraft'] .custom-checkbox { border-radius: 0; border: 2px solid #333; background: #fff; }
[data-theme='papercraft'] .custom-checkbox:checked { background-color: #333 !important; border-color: #333 !important; }
[data-theme='papercraft'] .custom-checkbox:checked::before { box-shadow: inset 1em 1em #fff !important; }

[data-theme='candy'] .custom-checkbox { border-radius: 50%; border-color: #ffffff; background: rgba(255,255,255,0.2); }
[data-theme='candy'] .custom-checkbox:checked { background-color: #ff00ff !important; border-color: #ffffff !important; }
[data-theme='candy'] .custom-checkbox:checked::before { box-shadow: inset 1em 1em #ffffff !important; }

[data-theme='arcade'] .custom-checkbox { border-radius: 0; border-color: #00f2ff; background: #000; }
[data-theme='arcade'] .custom-checkbox:checked { background-color: #ff00ff !important; border-color: #ff00ff !important; box-shadow: 0 0 10px #ff00ff; }
[data-theme='arcade'] .custom-checkbox:checked::before { box-shadow: inset 1em 1em #fff !important; }
[data-theme='arcade'] #progress-bar { background-color: #ff00ff !important; box-shadow: 0 0 15px #ff00ff !important; }
[data-theme='arcade'] #xp-bar { background-color: #00f2ff !important; box-shadow: 0 0 10px #00f2ff !important; }

[data-theme='obsidian'] .custom-checkbox { border-radius: 0; border-color: #333; background: #000; }
[data-theme='obsidian'] .custom-checkbox:checked { background-color: #ff6600 !important; border-color: #ff6600 !important; }
[data-theme='obsidian'] .custom-checkbox:checked::before { box-shadow: inset 1em 1em #000 !important; }
[data-theme='obsidian'] #progress-bar { background-color: #ff6600 !important; }
[data-theme='obsidian'] #xp-bar { background-color: #333 !important; }

.membership-card-container {
    perspective: 1000px;
}

.membership-card {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Blueprint Card */
.membership-card[data-card-theme='blueprint'] {
    background-color: #002b5c !important;
    border: 2px double #ffffff !important;
    background-image: 
        linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px) !important;
    background-size: 15px 15px !important;
}

/* Arcade Card */
.membership-card[data-card-theme='arcade'] {
    background-color: #000000 !important;
    border: 2px solid #ff00ff !important;
    box-shadow: 0 0 20px #ff00ff, inset 0 0 10px #ff00ff !important;
}
.membership-card[data-card-theme='arcade'] #membership-card-inner {
    color: #ff00ff !important;
}

/* Woodgrain Card */
.membership-card[data-card-theme='woodgrain'] {
    background-color: #fdf5e6 !important;
    border: 4px solid #1a0f00 !important;
}
.membership-card[data-card-theme='woodgrain'] #membership-card-inner h5,
.membership-card[data-card-theme='woodgrain'] #membership-card-inner span,
.membership-card[data-card-theme='woodgrain'] #membership-card-inner div {
    color: #1a0f00 !important;
}

/* Papercraft Card */
.membership-card[data-card-theme='papercraft'] {
    background-color: #f4eee1 !important;
    background-image: url('https://www.transparenttextures.com/patterns/paper-fibers.png') !important;
    border: 2px solid #333 !important;
    border-radius: 2px !important;
}
.membership-card[data-card-theme='papercraft'] #membership-card-inner h5,
.membership-card[data-card-theme='papercraft'] #membership-card-inner span,
.membership-card[data-card-theme='papercraft'] #membership-card-inner div {
    color: #333 !important;
}

/* Candy Card */
.membership-card[data-card-theme='candy'] {
    background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(255,255,255,0.7)) !important;
    backdrop-filter: blur(10px) !important;
    border: 2px solid #ffffff !important;
    border-radius: 2rem !important;
    box-shadow: 0 10px 30px rgba(0, 210, 255, 0.3) !important;
}
.membership-card[data-card-theme='candy'] #membership-card-inner h5,
.membership-card[data-card-theme='candy'] #membership-card-inner span,
.membership-card[data-card-theme='candy'] #membership-card-inner div {
    color: #1a1a1a !important;
}

/* OS Card */
.membership-card[data-card-theme='os'] {
    background-color: #c0c0c0 !important;
    border: 2px solid !important;
    border-color: #ffffff #808080 #808080 #ffffff !important;
    border-radius: 0 !important;
}
.membership-card[data-card-theme='os'] #membership-card-inner h5,
.membership-card[data-card-theme='os'] #membership-card-inner span,
.membership-card[data-card-theme='os'] #membership-card-inner div {
    color: #000000 !important;
}

/* Brick Card */
.membership-card[data-card-theme='brick'] {
    background-color: #8bac0f !important;
    border: 4px solid #0f380f !important;
    image-rendering: pixelated;
}
.membership-card[data-card-theme='brick'] #membership-card-inner h5,
.membership-card[data-card-theme='brick'] #membership-card-inner span,
.membership-card[data-card-theme='brick'] #membership-card-inner div {
    color: #0f380f !important;
}

/* Legacy Card */
.membership-card[data-card-theme='legacy'] {
    background-color: #000000 !important;
    border: 1px solid #ffffff !important;
    border-radius: 0.5rem !important;
}

/* Glacier Card */
.membership-card[data-card-theme='glacier'] {
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    color: #0369a1 !important;
}
.membership-card[data-card-theme='glacier'] #membership-card-inner h5,
.membership-card[data-card-theme='glacier'] #membership-card-inner span,
.membership-card[data-card-theme='glacier'] #membership-card-inner div {
    color: #0369a1 !important;
}

/* Nomad Card */
.membership-card[data-card-theme='nomad'] {
    background-color: #78350f !important;
    background-image: url('https://www.transparenttextures.com/patterns/asfalt-dark.png') !important;
    border: 4px solid #451a03 !important;
}
.membership-card[data-card-theme='nomad'] #membership-card-inner h5,
.membership-card[data-card-theme='nomad'] #membership-card-inner span,
.membership-card[data-card-theme='nomad'] #membership-card-inner div {
    color: #fef3c7 !important;
}

/* Prism Card */
.membership-card[data-card-theme='prism'] {
    background: #ffffff !important;
    border: none !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05) !important;
}
.membership-card[data-card-theme='prism']::after {
    content: "";
    position: absolute; inset: 0;
    border: 2px solid transparent;
    border-image: linear-gradient(45deg, #ff0000, #00ff00, #0000ff) 1;
    pointer-events: none;
}

/* Invader Card */
.membership-card[data-card-theme='invader'] {
    background-color: #000 !important;
    border: 1px solid #22c55e !important;
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.2) !important;
}
.membership-card[data-card-theme='invader'] #membership-card-inner {
    color: #22c55e !important;
}

/* Virtual Card */
.membership-card[data-card-theme='virtual'] {
    background-color: #000 !important;
    border: 1px solid #ff0000 !important;
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.2) !important;
}
.membership-card[data-card-theme='virtual'] #membership-card-inner {
    color: #ff0000 !important;
}

/* Quest Card */
.membership-card[data-card-theme='quest'] {
    background: linear-gradient(to bottom, #0000ff, #000040) !important;
    border: 2px double #ffffff !important;
}
.membership-card[data-card-theme='quest'] #membership-card-inner h5,
.membership-card[data-card-theme='quest'] #membership-card-inner span,
.membership-card[data-card-theme='quest'] #membership-card-inner div {
    color: #ffffff !important;
}

/* Genesis Card */
.membership-card[data-card-theme='genesis'] {
    background-color: #1a1a1a !important;
    border: 2px solid #00f2ff !important;
    box-shadow: 5px 5px 0px #000 !important;
}
.membership-card[data-card-theme='genesis'] #membership-card-inner {
    color: #ffde00 !important;
}

/* Spectrum Card */
.membership-card[data-card-theme='spectrum'] {
    background-color: #000 !important;
    border: 2px solid #fff !important;
    box-shadow: 8px 8px 0px #ff00ff !important;
}
.membership-card[data-card-theme='spectrum'] #membership-card-inner {
    color: #00ffff !important;
}

/* Famicom Card */
.membership-card[data-card-theme='famicom'] {
    background-color: #f2f0e9 !important;
    border: 2px solid #991b1b !important;
    box-shadow: inset 0 0 0 4px #ffde00 !important;
}
.membership-card[data-card-theme='famicom'] #membership-card-inner h5,
.membership-card[data-card-theme='famicom'] #membership-card-inner span,
.membership-card[data-card-theme='famicom'] #membership-card-inner div {
    color: #991b1b !important;
}

/* Web-1.0 Card */
.membership-card[data-card-theme='web1'] {
    background-color: #c0c0c0 !important;
    border: 2px solid !important;
    border-color: #fff #808080 #808080 #fff !important;
}
.membership-card[data-card-theme='web1'] #membership-card-inner h5,
.membership-card[data-card-theme='web1'] #membership-card-inner span,
.membership-card[data-card-theme='web1'] #membership-card-inner div {
    color: #0000ff !important;
    text-decoration: underline;
}

/* Game Gear Card */
.membership-card[data-card-theme='gamegear'] {
    background-color: #111827 !important;
    border: 2px solid #3b82f6 !important;
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.3) !important;
}
.membership-card[data-card-theme='gamegear'] #membership-card-inner {
    color: #a855f7 !important;
}

/* Manga Card */
.membership-card[data-card-theme='manga'] {
    background-color: #ffffff !important;
    border: 4px solid #000 !important;
    box-shadow: 10px 10px 0px #000 !important;
}
.membership-card[data-card-theme='manga'] #membership-card-inner {
    color: #000000 !important;
}

/* Museum Card */
.membership-card[data-card-theme='museum'] {
    background-color: #ffffff !important;
    border: 1px solid #d4af37 !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05) !important;
}
.membership-card[data-card-theme='museum'] #membership-card-inner {
    color: #1a1a1a !important;
}

/* Craft Card */
.membership-card[data-card-theme='craft'] {
    background-color: #3b82f6 !important;
    background-image: url('https://www.transparenttextures.com/patterns/denim.png') !important;
    border: 4px dashed #fff !important;
    border-radius: 1.5rem !important;
}
.membership-card[data-card-theme='craft'] #membership-card-inner {
    color: #ffffff !important;
}

/* Street Card */
.membership-card[data-card-theme='street'] {
    background-color: #4b5563 !important;
    border: 2px solid #22c55e !important;
    box-shadow: 10px 10px 0px #111827 !important;
}
.membership-card[data-card-theme='street'] #membership-card-inner {
    color: #ffffff !important;
}

/* Noir Card */
.membership-card[data-card-theme='noir'] {
    background-color: #111 !important;
    border: 1px solid #404040 !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5) !important;
}
.membership-card[data-card-theme='noir'] #membership-card-inner {
    color: #e5e5e5 !important;
}

/* Tokyo Card */
.membership-card[data-card-theme='tokyo'] {
    background-color: #2e1065 !important;
    border: 2px solid #d946ef !important;
    box-shadow: 0 0 20px rgba(217, 70, 239, 0.3) !important;
}
.membership-card[data-card-theme='tokyo'] #membership-card-inner {
    color: #f0abfc !important;
}

/* Progress & XP Bar Overrides */
[data-theme='glacier'] #progress-bar, [data-theme='glacier'] #xp-bar { background-color: #0ea5e9 !important; }
[data-theme='nomad'] #progress-bar, [data-theme='nomad'] #xp-bar { background-color: #f59e0b !important; }
[data-theme='prism'] #progress-bar, [data-theme='prism'] #xp-bar { background: linear-gradient(to right, #ec4899, #8b5cf6) !important; }
[data-theme='invader'] #progress-bar, [data-theme='invader'] #xp-bar { background-color: #22c55e !important; box-shadow: 0 0 10px #22c55e; }
[data-theme='virtual'] #progress-bar, [data-theme='virtual'] #xp-bar { background-color: #ff0000 !important; box-shadow: 0 0 10px #ff0000; }
[data-theme='quest'] #progress-bar, [data-theme='quest'] #xp-bar { background-color: #ffde00 !important; border: 1px solid #ffffff; }
[data-theme='genesis'] #progress-bar, [data-theme='genesis'] #xp-bar { background-color: #00f2ff !important; box-shadow: 0 0 10px #00f2ff; }
[data-theme='spectrum'] #progress-bar, [data-theme='spectrum'] #xp-bar { background-color: #ffff00 !important; }
[data-theme='famicom'] #progress-bar, [data-theme='famicom'] #xp-bar { background-color: #991b1b !important; }
[data-theme='web1'] #progress-bar, [data-theme='web1'] #xp-bar { background-color: #000080 !important; }
[data-theme='gamegear'] #progress-bar, [data-theme='gamegear'] #xp-bar { background-color: #3b82f6 !important; box-shadow: 0 0 10px rgba(59, 130, 246, 0.5); }
[data-theme='manga'] #progress-bar, [data-theme='manga'] #xp-bar { background-color: #000 !important; }
[data-theme='museum'] #progress-bar, [data-theme='museum'] #xp-bar { background-color: #d4af37 !important; }
[data-theme='craft'] #progress-bar, [data-theme='craft'] #xp-bar { background-color: #fcd34d !important; border: 2px dashed #fff; }
[data-theme='street'] #progress-bar, [data-theme='street'] #xp-bar { background-color: #22c55e !important; box-shadow: 4px 4px 0px #000; }
[data-theme='noir'] #progress-bar, [data-theme='noir'] #xp-bar { background-color: #e5e5e5 !important; opacity: 0.8; }
[data-theme='tokyo'] #progress-bar, [data-theme='tokyo'] #xp-bar { background-color: #d946ef !important; box-shadow: 0 0 10px #d946ef; }

/* Hover Shimmer Refinement */
.membership-card:hover #card-shimmer {
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.1), transparent) !important;
    transform: translateX(100%);
}
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: var(--bg-header); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* Progress & XP Bars */
#progress-bar, #xp-bar { transition: all 0.7s ease-out; }
[data-theme='legacy'] #progress-bar, [data-theme='legacy'] #xp-bar { background-color: #ffffff !important; background-image: none !important; }
[data-theme='legacy'] .bg-gaming-dark, [data-theme='legacy'] .bg-gray-700 { background-color: #000000 !important; }
[data-theme='legacy'] .bg-gray-700 { border: 1px solid #ffffff !important; }
[data-theme='legacy'] .bg-gray-700:hover { background-color: #000000 !important; }
[data-theme='legacy'] .bg-gradient-to-r { background-image: none !important; }

/* OS Progress Overrides */
[data-theme='os'] #progress-bar, [data-theme='os'] #xp-bar { 
    background-color: #000080 !important; 
    background-image: none !important; 
    border-radius: 0 !important;
}
[data-theme='os'] .bg-gray-700, [data-theme='os'] .bg-gray-800 { 
    background-color: #ffffff !important; 
    border: 2px solid !important;
    border-color: #808080 #ffffff #ffffff #808080 !important;
    border-radius: 0 !important; 
}
[data-theme='os'] .bg-gray-700:hover { background-color: #ffffff !important; }

/* Brick Progress Overrides */
[data-theme='brick'] #progress-bar, [data-theme='brick'] #xp-bar { background-color: var(--accent) !important; background-image: none !important; }
[data-theme='brick'] .bg-gray-700, [data-theme='brick'] .bg-gray-800 { background-color: var(--bg-primary) !important; border: 1px solid var(--accent); }

/* --- List Headers --- */
[data-theme='brick'] .list-accent-bar { background-color: var(--accent) !important; width: 4px; border-radius: 0; }
[data-theme='brick'] .list-count-badge { background-color: var(--accent) !important; color: var(--bg-primary) !important; border-radius: 0; }

[data-theme='cube'] .list-accent-bar { background: linear-gradient(to bottom, #ff4500, #4b0082) !important; width: 6px; }
[data-theme='cube'] .list-count-badge { background-color: #4b0082 !important; color: #ffffff !important; border: 2px solid #ffffff !important; border-radius: 1rem; }

[data-theme='os'] .list-accent-bar { background-color: #808080 !important; width: 2px; border-radius: 0; }
[data-theme='os'] .list-count-badge { background-color: #c0c0c0 !important; color: #000000 !important; border: 1px solid #808080 !important; border-radius: 0; }

[data-theme='legacy'] .list-accent-bar { background-color: #ffffff !important; width: 1px; border-radius: 0; }
[data-theme='legacy'] .list-count-badge { background-color: #000000 !important; color: #ffffff !important; border: 1px solid #ffffff !important; border-radius: 0; }

/* --- Trophies --- */
.trophy { transition: all 0.5s ease; filter: grayscale(1) opacity(0.3); }
.trophy.unlocked { filter: grayscale(0) opacity(1); }

/* Hide lock on unlock */
.trophy-slot.unlocked .trophy-lock {
    opacity: 0;
    pointer-events: none;
}

[data-theme='legacy'] .bg-yellow-500 { background-color: #ffffff !important; }
[data-theme='brick'] .bg-yellow-500 { background-color: var(--accent) !important; }
[data-theme='os'] .bg-yellow-500 { background-color: #808080 !important; }

/* Default Unlocked Pulse */
.trophy-slot.unlocked .trophy-icon-container {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

/* Future: Neon Cyan Glow */
[data-theme='future'] .trophy-slot.unlocked .trophy-icon-container {
    border-color: #22d3ee !important;
    box-shadow: 0 0 25px rgba(34, 211, 238, 0.4);
    background: rgba(8, 145, 178, 0.2) !important;
}

/* Brick: Pixel "Jump" and Thick Border */
[data-theme='brick'] .trophy-slot.unlocked .trophy-icon-container {
    background-color: #8bac0f !important;
    border: 4px solid #0f380f !important;
    transform: translateY(-8px);
}
[data-theme='brick'] .trophy-slot.unlocked svg {
    color: #0f380f !important;
    filter: none !important;
}

/* Cube: Rainbow Shadow */
[data-theme='cube'] .trophy-slot.unlocked .trophy-icon-container {
    background-color: #ffffff !important;
    border-color: #ff4500 !important;
    box-shadow: 8px 8px 0px #ff4500, -8px -8px 0px #4b0082 !important;
}

/* OS: 3D Raised Bevel */
[data-theme='os'] .trophy-slot.unlocked .trophy-icon-container {
    background-color: #c0c0c0 !important;
    border: 2px solid !important;
    border-color: #ffffff #808080 #808080 #ffffff !important;
    box-shadow: 4px 4px 10px rgba(0,0,0,0.3) !important;
}

/* Legacy: Inverted High-Contrast */
[data-theme='legacy'] .trophy-slot.unlocked .trophy-icon-container {
    background-color: #ffffff !important;
    border: 2px solid #000000 !important;
}
[data-theme='legacy'] .trophy-slot.unlocked svg {
    color: #000000 !important;
}

.trophy-slot.unlocked .trophy-icon-container::after {
    content: ''; position: absolute; inset: -15px;
    background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
    opacity: 0.15; animation: pulse 3s infinite;
}

/* --- Alignment Chart / Skill Tree --- */
.skill-node {
    position: absolute; width: 3rem; height: 3rem;
    background: var(--bg-secondary); border: 2px solid var(--border); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.5s ease; filter: grayscale(1) brightness(0.5);
}
.skill-node.active { filter: grayscale(0) brightness(1.2); transform: scale(1.1); box-shadow: 0 0 15px currentColor; }