/* =========================================================================
   Self-hosted fonts (variable). Previously loaded from Google Fonts on
   every visit; self-hosting avoids leaking visitor requests to Google and
   removes a render-blocking third-party round trip.
   ========================================================================= */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/inter-variable.woff2') format('woff2');
}
@font-face {
    font-family: 'Sora';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/sora-variable.woff2') format('woff2');
}

/* =========================================================================
   TMTY — Design tokens
   ========================================================================= */
:root {
    color-scheme: dark;

    --font-display: 'Sora', 'Inter', sans-serif;
    --font-body: 'Inter', sans-serif;

    /* Bold gradient brand identity */
    --brand-a: #6366f1;   /* indigo */
    --brand-b: #a855f7;   /* violet */
    --brand-c: #ec4899;   /* fuchsia/pink */
    --brand-grad: linear-gradient(135deg, var(--brand-a) 0%, var(--brand-b) 55%, var(--brand-c) 100%);
    --brand-grad-soft: linear-gradient(135deg, rgba(99, 102, 241, 0.16) 0%, rgba(236, 72, 153, 0.16) 100%);
    /* Darker variant used wherever white text/icons sit directly on the
       gradient (buttons, active nav) — verified >=4.5:1 contrast at every
       stop; the brighter --brand-grad above is for gradient text-fill and
       thin decorative accents only, where the contrast math is different. */
    --brand-grad-solid: linear-gradient(135deg, #4f46e5 0%, #9333ea 55%, #c026d3 100%);
    --brand-400: #c084fc;
    --brand-500: #a855f7;
    --brand-600: #9333ea;
    --brand-glow: rgba(168, 85, 247, 0.4);

    /* GOAT tier — amber/gold gradient (swapped with Recommended below: gold
       reads as "the best" — a gold medal/star — so it belongs on the
       higher tier; cyan was winning the eye's attention over it before). */
    --goat-400: #fbbf24;
    --goat-500: #f59e0b;
    --goat-grad: linear-gradient(135deg, #fde68a 0%, #fbbf24 45%, #ea580c 100%);
    --goat-ink: #241300; /* darkened from #341c02 for verified 4.5:1+ contrast at every gradient stop */

    /* Recommended tier — cyan/teal gradient */
    --rec-400: #22d3ee;
    --rec-500: #06b6d4;
    --rec-grad: linear-gradient(135deg, #67e8f9 0%, #22d3ee 45%, #0891b2 100%);
    --rec-ink: #021b1f; /* darkened from #032a30 for verified 4.5:1+ contrast at every gradient stop */

    --bg: #080c1a;
    --bg-elevated: #0d1226;
    --surface: #12172c;
    --surface-hover: #181f3a;
    --surface-2: #1a2138;
    --border: #26304e;
    --border-strong: #333f63;

    --text-primary: #f8fafc;
    --text-secondary: #c7cee0;
    --text-muted: #8a92b2;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --radius-full: 999px;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 8px 24px -4px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 24px 48px -12px rgba(0, 0, 0, 0.55);

    --header-h: 4rem;
    --header-h-mobile: 3.5rem;
    --sidebar-w: 272px;

    --z-header: 40;
    --z-topbar: 40;
    --z-topbar-dropdown: 41;
    --z-sidebar: 45;
    --z-sidebar-backdrop: 44;
    --z-palette: 48;
    /* Must stay below --z-header: the search results panel lives inside
       .app-header's DOM (and thus its stacking context), so a backdrop
       above the header's own z-index would paint over the results and
       swallow clicks meant for them. */
    --z-palette-backdrop: 39;
    --z-modal: 60;
}

[data-theme="light"] {
    color-scheme: light;
    --bg: #f5f4fb;
    --bg-elevated: #ffffff;
    --surface: #ffffff;
    --surface-hover: #f8fafc;
    --surface-2: #f1eefc;
    --border: #e1def4;
    --border-strong: #cec7ea;
    --text-primary: #170f2e;
    --text-secondary: #423a5c;
    --text-muted: #756e93;
    --brand-grad-soft: linear-gradient(135deg, rgba(99, 102, 241, 0.10) 0%, rgba(236, 72, 153, 0.10) 100%);
    --shadow-sm: 0 1px 2px rgba(76, 29, 149, 0.08);
    --shadow-md: 0 8px 24px -4px rgba(76, 29, 149, 0.14);
    --shadow-lg: 0 24px 48px -12px rgba(76, 29, 149, 0.2);
}

/* =========================================================================
   Base
   ========================================================================= */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

body {
    font-family: var(--font-body);
    background-color: var(--bg);
    background-image:
        radial-gradient(ellipse 900px 500px at 15% -10%, rgba(99, 102, 241, 0.22), transparent 60%),
        radial-gradient(ellipse 800px 500px at 100% 0%, rgba(236, 72, 153, 0.16), transparent 55%),
        radial-gradient(ellipse 900px 600px at 50% 100%, rgba(6, 182, 212, 0.08), transparent 60%);
    background-attachment: fixed;
    color: var(--text-primary);
    transition: background-color 0.2s ease, color 0.2s ease;
}

[data-theme="light"] body {
    background-image:
        radial-gradient(ellipse 900px 500px at 15% -10%, rgba(99, 102, 241, 0.14), transparent 60%),
        radial-gradient(ellipse 800px 500px at 100% 0%, rgba(236, 72, 153, 0.12), transparent 55%),
        radial-gradient(ellipse 900px 600px at 50% 100%, rgba(6, 182, 212, 0.06), transparent 60%);
}

h1, h2, h3, h4,
.app-header-logo-text .brand-title,
.stats-number {
    font-family: var(--font-display);
    letter-spacing: -0.01em;
}

img {
    max-width: 100%;
    height: auto;
}

.hidden {
    display: none !important;
}

.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--brand-400);
    color: white;
    padding: 8px 14px;
    border-radius: 0 0 8px 0;
    text-decoration: none;
    z-index: 100;
}
.skip-link:focus {
    top: 0;
}

.focus-visible:focus,
*:focus-visible {
    outline: 2px solid var(--brand-400);
    outline-offset: 2px;
}

/* =========================================================================
   App shell — header, sidebar, main
   ========================================================================= */
.app-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    height: var(--header-h);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0 1rem;
    background: rgba(8, 12, 26, 0.85);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
}
.app-header::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 1px;
    background: var(--brand-grad);
    opacity: 0.5;
}
[data-theme="light"] .app-header {
    background: rgba(255, 255, 255, 0.85);
}

.app-header-logo-text .brand-title {
    background: var(--brand-grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
}
.app-header-logo svg {
    filter: drop-shadow(0 2px 8px rgba(168, 85, 247, 0.5));
}
.app-header-logo svg path {
    fill: url(#tmty-logo-gradient);
}

.app-header-logo {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-shrink: 0;
    color: var(--brand-400);
    text-decoration: none;
}
.app-header-logo:hover { color: var(--brand-400); }
.app-header-logo svg { transition: color 0.15s ease; }
.app-header-logo:hover svg { color: #c4b5fd; }
.app-header-logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}
.app-header-logo-text .brand-title {
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--text-primary);
}
.sidebar-toggle-btn {
    display: none;
    flex-shrink: 0;
    padding: 0.5rem;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid transparent;
}
.sidebar-toggle-btn:hover { background: var(--surface-2); color: var(--text-primary); }
@media (max-width: 1023px) {
    .sidebar-toggle-btn { display: inline-flex; align-items: center; justify-content: center; }
}

.app-header-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.app-shell {
    min-height: calc(100vh - var(--header-h));
}

.app-sidebar {
    display: flex;
    flex-direction: column;
    background: var(--bg-elevated);
    border-right: 1px solid var(--border);
    padding: 1rem 0.75rem 2rem;
    scrollbar-width: thin;
    overscroll-behavior: contain;
}

.app-main {
    min-width: 0;
}

.sidebar-backdrop {
    display: none;
}

@media (max-width: 1023px) {
    .app-shell { display: block; }
    .app-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        height: 100vh;
        width: min(300px, 85vw);
        z-index: var(--z-sidebar);
        box-shadow: var(--shadow-lg);
        padding-top: calc(var(--header-h-mobile) + 0.75rem);
        transform: translateX(-105%);
        transition: transform 0.25s ease;
    }
    .app-sidebar.open {
        transform: translateX(0);
    }
    .sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(2, 6, 23, 0.6);
        backdrop-filter: blur(2px);
        z-index: var(--z-sidebar-backdrop);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
    }
    .sidebar-backdrop.open {
        opacity: 1;
        pointer-events: auto;
    }
}

/* =========================================================================
   Sidebar navigation
   ========================================================================= */
.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    /* Vertically centers the whole nav list (including Home) within the
       sidebar's height, with the pin/collapse button — which has no auto
       margin — staying anchored to the bottom edge. */
    margin: auto 0;
}

.sidebar-collapse-btn {
    display: none;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    margin-top: 0.75rem;
    padding: 0.5rem 0.7rem;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.sidebar-collapse-btn:hover {
    background: var(--surface-2);
    color: var(--text-primary);
}
.sidebar-collapse-btn svg {
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

/* Desktop: the sidebar is a fixed-position icon rail by default. Hovering
   (or focusing into it with the keyboard) temporarily grows it into an
   overlay showing full labels — it floats on top of the content rather
   than pushing it, so nothing reflows while you're just passing the mouse
   over it. "Pin" makes that expanded state permanent and reserves the
   extra width in the layout instead of overlaying. */
@media (min-width: 1024px) {
    .sidebar-collapse-btn { display: flex; }

    .app-sidebar {
        position: fixed;
        top: var(--header-h);
        left: 0;
        height: calc(100vh - var(--header-h));
        width: 76px;
        z-index: var(--z-sidebar);
        overflow: hidden;
        transition: width 0.18s ease, box-shadow 0.18s ease;
    }
    .app-main {
        margin-left: 76px;
    }

    .app-sidebar:hover,
    .app-sidebar:focus-within,
    .app-sidebar.pinned {
        width: var(--sidebar-w);
        overflow-y: auto;
        box-shadow: var(--shadow-lg);
    }
    .app-sidebar.pinned ~ .app-main {
        margin-left: var(--sidebar-w);
    }

    .app-sidebar .sidebar-nav {
        align-items: center;
    }
    .app-sidebar .sidebar-link,
    .app-sidebar .sidebar-group-toggle {
        justify-content: center;
        width: auto;
        padding: 0.65rem;
        gap: 0;
    }
    /* .toggle-label defaults to flex:1 (to push the chevron to the far
       right when expanded), which fills the whole button and left-aligns
       the icon inside it — completely overriding the button's own
       justify-content:center. Collapsing it to its own content width in
       rail mode is what actually lets the icon center. */
    .app-sidebar .toggle-label {
        flex: 0 0 auto !important;
        gap: 0 !important;
    }

    /* Labels/chevrons fade and grow in alongside the sidebar's own width
       transition instead of "display" popping instantly into place —
       display can't be transitioned, which is what made this feel like a
       jump cut rather than a smooth reveal. */
    .app-sidebar .sidebar-link span,
    .app-sidebar .toggle-label span,
    .app-sidebar .sidebar-collapse-btn span {
        display: inline-block;
        max-width: 0 !important;
        opacity: 0 !important;
        overflow: hidden;
        white-space: nowrap;
        transition: max-width 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.15s ease;
    }
    .app-sidebar .chevron {
        width: 0 !important;
        opacity: 0 !important;
        overflow: hidden;
        transition: width 0.2s ease, opacity 0.15s ease, transform 0.2s ease;
    }
    .app-sidebar .sidebar-sublist {
        display: none;
    }
    .app-sidebar .sidebar-collapse-btn {
        justify-content: center;
    }

    .app-sidebar:hover .sidebar-nav,
    .app-sidebar:focus-within .sidebar-nav,
    .app-sidebar.pinned .sidebar-nav {
        align-items: stretch;
    }
    .app-sidebar:hover .sidebar-link,
    .app-sidebar:hover .sidebar-group-toggle,
    .app-sidebar:focus-within .sidebar-link,
    .app-sidebar:focus-within .sidebar-group-toggle,
    .app-sidebar.pinned .sidebar-link,
    .app-sidebar.pinned .sidebar-group-toggle {
        justify-content: flex-start;
        width: 100%;
        padding: 0.6rem 0.7rem;
        gap: 0.7rem;
    }
    .app-sidebar:hover .toggle-label,
    .app-sidebar:focus-within .toggle-label,
    .app-sidebar.pinned .toggle-label {
        flex: 1 !important;
        gap: 0.7rem !important;
    }
    .app-sidebar:hover .sidebar-link span,
    .app-sidebar:hover .toggle-label span,
    .app-sidebar:hover .sidebar-collapse-btn span,
    .app-sidebar:focus-within .sidebar-link span,
    .app-sidebar:focus-within .toggle-label span,
    .app-sidebar:focus-within .sidebar-collapse-btn span,
    .app-sidebar.pinned .sidebar-link span,
    .app-sidebar.pinned .toggle-label span,
    .app-sidebar.pinned .sidebar-collapse-btn span {
        max-width: 220px !important;
        opacity: 1 !important;
    }
    .app-sidebar:hover .chevron,
    .app-sidebar:focus-within .chevron,
    .app-sidebar.pinned .chevron {
        width: 1rem !important;
        opacity: 0.7 !important;
    }
    .app-sidebar:hover .sidebar-group.expanded .sidebar-sublist,
    .app-sidebar:focus-within .sidebar-group.expanded .sidebar-sublist,
    .app-sidebar.pinned .sidebar-group.expanded .sidebar-sublist {
        display: grid;
    }
    .app-sidebar:hover .sidebar-collapse-btn,
    .app-sidebar:focus-within .sidebar-collapse-btn,
    .app-sidebar.pinned .sidebar-collapse-btn {
        justify-content: flex-start;
    }
    .app-sidebar.pinned .sidebar-collapse-btn svg {
        transform: rotate(180deg);
    }
}

.sidebar-divider {
    height: 1px;
    background: var(--border);
    margin: 0.6rem 0.25rem;
}

.sidebar-link,
.sidebar-group-toggle {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    text-align: left;
    padding: 0.6rem 0.7rem;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 600;
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.sidebar-link svg,
.sidebar-group-toggle svg.sidebar-icon {
    width: 1.15rem;
    height: 1.15rem;
    flex-shrink: 0;
}
.sidebar-link:hover,
.sidebar-group-toggle:hover {
    background: var(--surface-2);
    color: var(--text-primary);
}
.sidebar-link.active,
.sidebar-group-toggle.active {
    background: var(--brand-grad-solid);
    color: #fff;
    box-shadow: 0 6px 18px -4px var(--brand-glow);
}
.sidebar-link.sidebar-home.active {
    background: var(--brand-grad-soft);
    color: var(--brand-400);
    box-shadow: none;
}

.sidebar-group-toggle {
    justify-content: space-between;
}
.sidebar-group-toggle .toggle-label {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex: 1;
    min-width: 0;
}
.sidebar-group-toggle .chevron {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    transition: transform 0.2s ease;
    opacity: 0.7;
}
.sidebar-group.expanded .sidebar-group-toggle .chevron {
    transform: rotate(90deg);
}

.sidebar-sublist {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows 0.2s ease;
}
.sidebar-sublist > div {
    min-height: 0;
    overflow: hidden;
}
.sidebar-group.expanded .sidebar-sublist {
    grid-template-rows: 1fr;
}

.sidebar-sublink-list {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.2rem 0 0.4rem 1.65rem;
    border-left: 1px solid var(--border);
    margin-left: 1.15rem;
}
.sidebar-sublink {
    text-align: left;
    padding: 0.4rem 0.6rem;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    color: var(--text-muted);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.sidebar-sublink:hover {
    background: var(--surface-2);
    color: var(--text-primary);
}
.sidebar-sublink.active {
    background: var(--brand-grad-soft);
    color: var(--brand-400);
    font-weight: 700;
    box-shadow: inset 2px 0 0 var(--brand-400);
}

/* =========================================================================
   Topbar navigation — alternative to the sidebar, toggled via
   #nav-layout-toggle and persisted in localStorage (see script.js). Only
   available at desktop widths; narrower viewports always fall back to the
   sidebar drawer regardless of the saved preference, since a hover/click
   dropdown bar doesn't translate well to touch-sized screens.
   ========================================================================= */
.app-topbar {
    display: none;
}
@media (min-width: 1024px) {
    html.nav-topbar .app-sidebar {
        display: none;
    }
    html.nav-topbar .app-main,
    html.nav-topbar .app-sidebar.pinned ~ .app-main {
        margin-left: 0;
    }
    html.nav-topbar .app-topbar {
        display: flex;
        align-items: center;
        justify-content: center;
        /* No wrap: overflow is handled by JS moving the trailing
           categories into the "More" dropdown instead (see
           updateTopbarOverflow in script.js), so the bar always stays a
           single centered row rather than growing to two lines. Deliberately
           no `overflow: hidden` here — that would also clip the dropdown
           panels (position: absolute, anchored to a .topbar-group inside
           this bar) whenever they extend below it, since a container's
           overflow clips positioned descendants too, not just normal flow
           ones. The JS keeps the row itself from ever overflowing anyway. */
        flex-wrap: nowrap;
        gap: 0.25rem;
        position: sticky;
        top: var(--header-h);
        z-index: var(--z-topbar);
        padding: 0.5rem 1rem;
        background: var(--bg-elevated);
        border-bottom: 1px solid var(--border);
    }
}

.topbar-group {
    position: relative;
}
.topbar-group-toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.85rem;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 600;
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.topbar-group-toggle:hover {
    background: var(--surface-2);
    color: var(--text-primary);
}
.topbar-group-toggle.active {
    background: var(--brand-grad-solid);
    color: #fff;
    box-shadow: 0 6px 18px -4px var(--brand-glow);
}
.topbar-group-toggle .chevron {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    transition: transform 0.2s ease;
    opacity: 0.7;
}
.topbar-group.expanded .topbar-group-toggle .chevron {
    transform: rotate(180deg);
}

.topbar-dropdown {
    display: none;
    flex-direction: column;
    gap: 0.1rem;
    position: absolute;
    top: calc(100% + 0.4rem);
    left: 0;
    min-width: 14rem;
    max-height: 70vh;
    overflow-y: auto;
    padding: 0.4rem;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-topbar-dropdown);
}
.topbar-group.expanded .topbar-dropdown {
    display: flex;
}
/* The "More" bucket sits last in the bar, so a left-aligned dropdown would
   frequently run past the right edge of the viewport — anchor it to its
   own right edge instead. */
.topbar-more .topbar-dropdown {
    left: auto;
    right: 0;
    min-width: 16rem;
}
.topbar-more-group-label {
    padding: 0.5rem 0.7rem 0.2rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    opacity: 0.7;
}
.topbar-sublink {
    text-align: left;
    padding: 0.5rem 0.7rem;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    color: var(--text-muted);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.topbar-sublink:hover {
    background: var(--surface-2);
    color: var(--text-primary);
}
.topbar-sublink.active {
    background: var(--brand-grad-soft);
    color: var(--brand-400);
    font-weight: 700;
    box-shadow: inset 2px 0 0 var(--brand-400);
}

/* =========================================================================
   Header search / command palette
   ========================================================================= */
#search-bar-container {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
    justify-content: flex-end;
}
#search-bar-container .relative.max-w-lg {
    max-width: 22rem;
    width: 100%;
}

#global-filter {
    border-radius: var(--radius-full) !important;
}

#search-results-container {
    position: fixed;
    top: 12vh;
    left: 50%;
    transform: translateX(-50%);
    width: min(640px, 92vw);
    max-height: 70vh;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    box-shadow: 0 30px 60px -12px rgba(99, 102, 241, 0.35), var(--shadow-lg);
    z-index: var(--z-palette);
    padding: 0.5rem;
    position: fixed;
}
#search-results-container::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--brand-grad);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

#random-btn.bg-violet-600 {
    background: var(--brand-grad-solid) !important;
    box-shadow: 0 6px 18px -6px var(--brand-glow);
}
#random-btn.bg-violet-600:hover {
    filter: brightness(1.1);
}

body:has(#search-results-container:not(.hidden))::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 23, 0.55);
    backdrop-filter: blur(4px);
    z-index: var(--z-palette-backdrop);
}

.search-result-item {
    border-radius: var(--radius-md);
    transition: background-color 0.2s ease-in-out;
}
.search-result-item:hover,
.search-result-item.active-result {
    background-color: var(--surface-2);
}
.search-result-item.active-result {
    box-shadow: inset 0 0 0 2px var(--brand-400);
}

#search-results-container .card {
    transform: scale(0.95);
    transform-origin: top left;
    margin-bottom: -1rem;
    transition: none;
    box-shadow: none;
    pointer-events: all;
}
#search-results-container .card:hover {
    transform: scale(0.95);
    border-color: var(--border-strong);
}
#search-results-container .card.tag-goat,
#search-results-container .card.tag-goat:hover {
    animation: none !important;
    border-color: var(--goat-500);
}
#search-results-container .card.tag-goat::before,
#search-results-container .card.tag-goat::after {
    display: none;
}

/* Force select dropdowns (e.g. Internet Archive console picker) to match
   the exact box size of the "Visit Site" button links on other cards.
   Those buttons get a "copy link" icon injected by script.js at runtime
   (see addCopyLinkButtons), which pushes their rendered height to 54px -
   taller than plain padding/border math would suggest. Selects never get
   that icon, so we pin their height/line-height to match here instead of
   relying on padding to auto-match. */
#console-selector,
#source-selector,
#format-selector {
    box-sizing: border-box;
    height: 54px;
    line-height: 34px;
    margin: 0;
}

/* These carry a raw border-cyan-400 (+ focus:border-cyan-400) Tailwind
   class in the HTML rather than being an <a>/<button>, so the GOAT/
   Recommended button reskin further down never catches them — they'd be
   left showing the old literal cyan even though this card is GOAT tier
   and GOAT isn't cyan anymore. */
#console-selector,
#source-selector,
#format-selector,
#console-selector:focus,
#source-selector:focus,
#format-selector:focus {
    border-color: var(--goat-500) !important;
}

/* =========================================================================
   Cards
   ========================================================================= */
.card {
    background: linear-gradient(160deg, var(--surface) 0%, var(--surface) 65%, var(--surface-2) 130%);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.15s ease;
    opacity: 0;
    transform: translateY(6px);
    position: relative;
    overflow: hidden;
}
.card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--brand-grad);
    opacity: 0.55;
    transition: opacity 0.25s ease;
}
.card:hover::before {
    opacity: 1;
}
.card.is-visible {
    opacity: 1;
    transform: translateY(0px);
}
.card:hover {
    transform: translateY(-6px) scale(1.015);
    border-color: rgba(168, 85, 247, 0.55);
    box-shadow: 0 20px 40px -12px rgba(99, 102, 241, 0.35), var(--shadow-md);
}
.card h3 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.01em;
}
.card[style*="display: none"] {
    opacity: 0;
    transform: scale(0.95);
    pointer-events: none;
}
.card:not([style*="display: none"]) {
    opacity: 1;
}

.card-highlight {
    box-shadow: 0 0 30px 8px rgba(167, 139, 250, 0.8), 0 0 60px 15px rgba(139, 92, 246, 0.4) !important;
    border-color: #a78bfa !important;
    animation: pulse-highlight 1.5s ease-in-out infinite !important;
}
@keyframes pulse-highlight {
    0%, 100% { box-shadow: 0 0 30px 8px rgba(167, 139, 250, 0.8), 0 0 60px 15px rgba(139, 92, 246, 0.4); }
    50% { box-shadow: 0 0 40px 12px rgba(167, 139, 250, 1), 0 0 80px 20px rgba(139, 92, 246, 0.6); }
}

.tag-recommended {
    border-color: transparent;
    position: relative;
    z-index: 1;
}
.tag-recommended::before {
    background: var(--rec-grad);
    opacity: 0.9;
}
.tag-recommended::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: linear-gradient(160deg, rgba(34, 211, 238, 0.55), rgba(8, 145, 178, 0.15) 45%, transparent 70%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
}
.tag-recommended > * {
    position: relative;
    z-index: 2;
}

.card.tag-goat {
    position: relative;
    overflow: hidden;
    border-color: transparent;
    z-index: 1;
}
.card.tag-goat::before {
    background: var(--goat-grad);
    opacity: 0.9;
}
.card.tag-goat::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: conic-gradient(from var(--goat-angle, 0deg), #fbbf24, #f59e0b, #ea580c, #fbbf24);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
    animation: goat-spin 8s linear infinite;
}
.card.tag-goat:hover::after {
    animation-duration: 3.5s;
}
.card.tag-goat > * {
    position: relative;
    z-index: 2;
}
@property --goat-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}
@keyframes goat-spin {
    to { --goat-angle: 360deg; }
}
@supports not (background: conic-gradient(from 0deg, red, blue)) {
    .card.tag-goat::after { background: var(--goat-grad); animation: none; }
}

/* .card-favicon is now a locally-generated colored initial-letter badge
   (see addFavicons() in script.js) — sizing/color/radius are set inline by
   JS per-card, no CSS needed here. This replaced a per-card request to
   Google's favicon service, which pinged every outbound domain on every
   visit — an odd thing for a privacy-resource site to do. */
.card-favicon {
    font-family: var(--font-display);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}



.retroachievements-badge {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-left: 0.5rem;
    vertical-align: middle;
    cursor: help;
    transition: all 0.3s ease;
    flex-shrink: 0;
}
.retroachievements-badge img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.retroachievements-badge:hover {
    transform: scale(1.2);
}

.copy-link-btn {
    backdrop-filter: blur(10px);
    flex-shrink: 0;
    z-index: 10;
}
.copy-link-btn:hover {
    transform: scale(1.1);
    background-color: rgba(71, 85, 105, 0.8) !important;
}

a[href] span:first-child {
    flex: 1;
    text-align: center;
}
.card a[target="_blank"]:not(.bios-download-btn) {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.card a[target="_blank"]:not(.bios-download-btn) span:first-child {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.hidden-system {
    display: none;
}
.systems-list.expanded .hidden-system {
    display: inline-block;
}

#emulators-grid {
    transition: all 0.3s ease;
}

/* =========================================================================
   Bold-gradient reskin of the card buttons & badges.
   These target the exact Tailwind utility-class combinations already
   authored on the 159 resource cards (border-cyan-400 = GOAT tier,
   border-amber-400 = Recommended tier, border-violet-500 = baseline) so the
   whole button/badge system can be redesigned without touching any card
   markup.
   ========================================================================= */
.card a.border-cyan-400,
.card button.border-cyan-400 {
    border: none !important;
    background: var(--goat-grad) !important;
    color: var(--goat-ink) !important;
    font-weight: 700;
    box-shadow: 0 6px 18px -6px rgba(245, 158, 11, 0.55);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.card a.border-cyan-400:hover,
.card button.border-cyan-400:hover {
    background: var(--goat-grad) !important;
    color: var(--goat-ink) !important;
    filter: brightness(1.08) saturate(1.1);
    transform: translateY(-2px);
    box-shadow: 0 12px 26px -6px rgba(245, 158, 11, 0.7);
}

.card a.border-amber-400,
.card button.border-amber-400 {
    border: none !important;
    background: var(--rec-grad) !important;
    color: var(--rec-ink) !important;
    font-weight: 700;
    box-shadow: 0 6px 18px -6px rgba(6, 182, 212, 0.5);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.card a.border-amber-400:hover,
.card button.border-amber-400:hover {
    background: var(--rec-grad) !important;
    color: var(--rec-ink) !important;
    filter: brightness(1.08) saturate(1.1);
    transform: translateY(-2px);
    box-shadow: 0 12px 26px -6px rgba(6, 182, 212, 0.65);
}

.card a.border-violet-500,
.card button.border-violet-500,
.stremio-button {
    border: none !important;
    background: var(--brand-grad-solid) !important;
    color: #ffffff !important;
    font-weight: 700;
    box-shadow: 0 6px 18px -6px rgba(168, 85, 247, 0.5);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
    animation: none !important;
}
.card a.border-violet-500:hover,
.card button.border-violet-500:hover,
.stremio-button:hover {
    background: var(--brand-grad-solid) !important;
    color: #ffffff !important;
    filter: brightness(1.15);
    transform: translateY(-2px);
    box-shadow: 0 12px 26px -6px rgba(168, 85, 247, 0.7);
}

/* Secondary/ghost buttons (Video Guide, Torrent Client, Bios, etc.) */
.card a.border-slate-600,
.card button.border-slate-600 {
    border-color: var(--border-strong) !important;
    background: var(--surface-2);
    color: var(--text-secondary) !important;
    transition: all 0.2s ease;
}
.card a.border-slate-600:hover,
.card button.border-slate-600:hover {
    border-color: var(--goat-500) !important;
    color: var(--goat-400) !important;
    background: rgba(245, 158, 11, 0.08);
}

/* Tier badge pills (GOAT / RECOMMENDED labels) */
.card .uppercase.tracking-wider.text-cyan-400,
.card .uppercase.tracking-wider.text-amber-400 {
    padding: 0.2rem 0.55rem;
    border-radius: var(--radius-full);
    font-size: 0.65rem;
    letter-spacing: 0.06em;
    box-shadow: var(--shadow-sm);
}
.card .uppercase.tracking-wider.text-cyan-400 {
    background: var(--goat-grad);
    color: var(--goat-ink) !important;
}
.card .uppercase.tracking-wider.text-amber-400 {
    background: var(--rec-grad);
    color: var(--rec-ink) !important;
}

/* Card body copy */
.card p.text-slate-400 {
    color: var(--text-secondary) !important;
    line-height: 1.55;
}

/* Inline highlighted words within a description (e.g. "Torrent downloads
   only.", "Sign in required.") — raw Tailwind color classes matching the
   card's tier, same swap-blind-spot as the select dropdowns above: they
   don't go through the goat/rec custom properties at all, so they still
   showed the old colors after the swap. font-semibold (not font-bold)
   keeps this from also matching the uppercase tier-badge pills just above. */
.card span.text-cyan-400.font-semibold {
    color: var(--goat-400) !important;
}
.card span.text-amber-400.font-semibold {
    color: var(--rec-400) !important;
}

/* =========================================================================
   Subtab chooser — landing grid shown when arriving at a category without
   a specific subtab picked (homepage card, bare ?tab= link), instead of
   jumping straight into whichever subtab the HTML happens to mark active.
   ========================================================================= */
.subtab-chooser-header {
    text-align: center;
    margin-bottom: 2rem;
}
.subtab-chooser-header h2 {
    font-size: 1.875rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 0.4rem;
}
.subtab-chooser-header p {
    color: var(--text-muted);
}

.subtab-chooser-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1rem;
}
@media (min-width: 640px) {
    .subtab-chooser-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .subtab-chooser-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.subtab-choice {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    background: linear-gradient(160deg, var(--surface) 0%, var(--surface) 60%, var(--surface-2) 140%);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    text-align: left;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.subtab-choice::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--brand-grad-soft);
    opacity: 0;
    transition: opacity 0.25s ease;
}
.subtab-choice:hover {
    transform: translateY(-4px);
    border-color: rgba(168, 85, 247, 0.5);
    box-shadow: 0 16px 32px -12px rgba(99, 102, 241, 0.35), var(--shadow-md);
}
.subtab-choice:hover::before {
    opacity: 1;
}
.subtab-choice-icon {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-md);
    background: var(--brand-grad-solid);
    color: #fff;
    box-shadow: 0 6px 16px -4px var(--brand-glow);
}
.subtab-choice-icon svg {
    width: 1.2rem;
    height: 1.2rem;
}
.subtab-choice-text {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}
.subtab-choice-label {
    font-weight: 700;
    color: var(--text-primary);
}
.subtab-choice-count {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* Back-link + page title share one row (see .subtab-page-header below) so
   the title doesn't get pushed below it, wasting vertical space. A plain
   flex row would let the back-link's own width push the title off-center;
   the 1fr/auto/1fr grid keeps column 2 (the title) mathematically centered
   in the row no matter how wide column 1's content is, because column 3
   mirrors it with equal empty space. */
.subtab-page-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.subtab-back-link {
    grid-column: 1;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0;
    color: var(--text-muted);
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 600;
    transition: color 0.15s ease;
}
.subtab-back-link:hover {
    color: var(--brand-400);
}
.subtab-page-header .subtab-page-title {
    grid-column: 2;
}

/* Page title shown above a subtab's resource grid (e.g. "ROM Sites" under
   Emulation) and above flat categories with no subtabs of their own (e.g.
   "Cloud Storage") — so it's always clear which page you're looking at. */
.subtab-page-title,
.tab-page-title {
    /* Shrink-to-fit + auto margins (not text-align) so the box is exactly
       as wide as the text itself, same as the homepage hero title — a
       full-width block would let the gradient's color stops fall mostly
       outside the centered text, leaving only a narrow (basically
       single-color) sliver visible through the letters. */
    display: block;
    width: fit-content;
    justify-self: center;
    margin: 0 auto;
    font-size: 1.875rem;
    font-weight: 800;
    background: var(--brand-grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.tab-page-title {
    margin-bottom: 1.5rem;
}

/* =========================================================================
   Category cards / stats (homepage)
   ========================================================================= */
.category-card {
    background: linear-gradient(160deg, var(--surface) 0%, var(--surface) 60%, var(--surface-2) 140%);
    border-radius: var(--radius-xl);
    padding: 2rem;
    border: 1px solid var(--border-strong);
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease-in-out, border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    display: block;
    height: 100%;
}
.category-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--brand-grad-soft);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.category-card:hover {
    transform: translateY(-8px);
    border-color: rgba(168, 85, 247, 0.5);
    box-shadow: 0 24px 48px -16px rgba(99, 102, 241, 0.4), var(--shadow-lg);
}
.category-card:hover::before {
    opacity: 1;
}
.category-card-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    height: 100%;
    position: relative;
    z-index: 1;
}
.category-card .bg-slate-800 {
    background: var(--brand-grad-solid) !important;
    box-shadow: 0 8px 20px -6px rgba(99, 102, 241, 0.5);
}
.category-card .bg-slate-800 svg {
    color: #fff !important;
}
.category-card h3 {
    background: var(--brand-grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stats-card,
main [class*="bg-slate-800/50"] {
    background: linear-gradient(160deg, rgba(99, 102, 241, 0.12) 0%, rgba(236, 72, 153, 0.08) 100%) !important;
    border: 1px solid rgba(168, 85, 247, 0.25) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.stats-card:hover,
main [class*="bg-slate-800/50"]:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px -10px rgba(99, 102, 241, 0.35);
}
.stats-number,
main [class*="bg-slate-800/50"] > div:first-child {
    font-size: 2.5rem;
    font-weight: 800;
    background: var(--brand-grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Hero */
#homepage-content > div:first-child {
    position: relative;
}
#homepage-content > div:first-child h2 {
    display: inline-block;
    background: var(--brand-grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 800;
}

.resource-counter {
    animation: slideInRight 0.5s ease-out;
}
@keyframes slideInRight {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

/* =========================================================================
   Legacy tab / sub-tab bars — kept in the DOM (as event-listener anchors
   required by script.js's activateSubTab/handleSubTabSwitching) but no
   longer part of the visible UI; the sidebar replaced them.
   ========================================================================= */
#tabs-nav-container,
.sub-tabs-nav {
    display: none !important;
}

.tab-content, .sub-tab-content {
    display: none;
}
.tab-content.active, .sub-tab-content.active {
    display: block;
}

/* =========================================================================
   Tools dropdown card overlay (unchanged behaviour, refreshed visuals)
   ========================================================================= */
.card .tools-dropdown-content {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(22, 30, 49, 0.98) 0%, rgba(30, 41, 59, 0.98) 100%);
    backdrop-filter: blur(10px);
    padding: 1.5rem;
    opacity: 0;
    pointer-events: none;
    transform: scale(0.8) translateY(20px);
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    justify-content: center;
    align-items: center;
    z-index: 10;
    border-radius: var(--radius-lg);
    box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.1), 0 20px 40px rgba(0, 0, 0, 0.3);
}
[data-theme="light"] .card .tools-dropdown-content {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.98) 100%);
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.1);
}
.card .card-main-content {
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.card.tools-active .card-main-content {
    opacity: 0;
    transform: scale(0.9) translateY(-10px);
    pointer-events: none;
}
.card.tools-active .tools-dropdown-content {
    opacity: 1;
    transform: scale(1.02) translateY(0);
    pointer-events: auto;
}
.card.tools-active {
    transform: scale(1.02);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3), 0 0 0 3px rgba(139, 92, 246, 0.3);
    z-index: 20;
    border-color: var(--brand-500);
    animation: pulse-border 2s ease-in-out infinite;
}
@keyframes pulse-border {
    0%, 100% { box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3), 0 0 0 3px rgba(139, 92, 246, 0.3); }
    50% { box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3), 0 0 0 3px rgba(139, 92, 246, 0.6); }
}
.card.tools-active .tools-dropdown-content > * {
    animation: slideInUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
.card.tools-active .tools-dropdown-content > *:nth-child(1) { animation-delay: 0.08s; }
.card.tools-active .tools-dropdown-content > *:nth-child(2) { animation-delay: 0.12s; }
.card.tools-active .tools-dropdown-content > *:nth-child(3) { animation-delay: 0.16s; }
.card.tools-active .tools-dropdown-content > *:nth-child(4) { animation-delay: 0.2s; }
.card.tools-active .tools-dropdown-content > *:nth-child(5) { animation-delay: 0.24s; }
@keyframes slideInUp {
    from { opacity: 0; transform: translateY(20px) scale(0.9); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.close-tools-button {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.close-tools-button:hover {
    transform: rotate(90deg) scale(1.1);
}

.tools-dropdown-button {
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.tools-dropdown-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.tools-dropdown-button:active {
    transform: translateY(0);
}
.tools-dropdown-button svg {
    position: absolute;
    right: 1rem;
    pointer-events: none;
}
.tools-dropdown-button::before {
    content: "Click to Expand";
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    background: rgba(15, 23, 42, 0.95);
    color: white;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.75rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease-out, transform 0.15s ease-out;
    transition-delay: 0.1s;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.tools-dropdown-button::after {
    content: "";
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    border: 6px solid transparent;
    border-top-color: rgba(15, 23, 42, 0.95);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease-out, transform 0.15s ease-out;
    transition-delay: 0.1s;
    z-index: 100;
}
.tools-dropdown-button:hover::before,
.tools-dropdown-button:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.ripple-effect {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: scale(0);
    animation: ripple-animation 0.6s ease-out;
    pointer-events: none;
}
@keyframes ripple-animation {
    to { transform: scale(2.5); opacity: 0; }
}

.tools-dropdown-content a,
.tools-dropdown-content button {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.tools-dropdown-content a:hover,
.tools-dropdown-content button:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.tools-dropdown-content h4 {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

@keyframes pulse-glow-weak {
    from { box-shadow: 0 0 8px rgba(245, 158, 11, 0.2); }
    to { box-shadow: 0 0 16px rgba(245, 158, 11, 0.5); }
}
@keyframes pulse-glow-strong {
    from { box-shadow: 0 0 12px rgba(245, 158, 11, 0.5); }
    to { box-shadow: 0 0 24px rgba(245, 158, 11, 0.8); }
}

.stremio-button {
    border-color: var(--goat-500);
    color: var(--goat-500);
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.3);
    animation: pulse-glow-weak 4s infinite alternate;
}
.stremio-button:hover {
    background-color: var(--goat-500);
    color: var(--bg);
    animation: pulse-glow-strong 2s infinite alternate;
}

/* =========================================================================
   Modals
   ========================================================================= */
.modal-overlay {
    background-color: rgba(11, 17, 32, 0.8);
    backdrop-filter: blur(8px);
    transition: opacity 0.3s ease-in-out;
}
[data-theme="light"] .modal-overlay {
    background-color: rgba(241, 245, 249, 0.9);
}
.modal-content, #image-guide-content {
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    opacity: 0;
    transform: scale(0.95) translateY(10px);
    position: relative;
    overflow: hidden;
}
.modal-content::before, #image-guide-content::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--brand-grad);
}
.modal-overlay:not(.hidden) .modal-content,
.modal-overlay:not(.hidden) #image-guide-content {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.prose {
    --tw-prose-body: #d1d5db;
    --tw-prose-headings: #ffffff;
    --tw-prose-bold: #ffffff;
}

/* =========================================================================
   Light theme overrides for Tailwind utility classes used throughout the
   159 resource cards (kept from the original implementation — Tailwind's
   CDN build generates static slate-palette utilities that don't respond to
   custom properties, so light mode has to override them directly).
   ========================================================================= */
[data-theme="light"] .card { background-color: var(--surface); border-color: var(--border-strong); color: var(--text-primary); }
[data-theme="light"] .card:hover { border-color: var(--brand-500); box-shadow: 0 10px 25px -5px rgba(139, 92, 246, 0.2), 0 8px 10px -6px rgba(139, 92, 246, 0.1); }
[data-theme="light"] .card.tag-goat::after { background: var(--surface); }
[data-theme="light"] h1, [data-theme="light"] h2, [data-theme="light"] h3, [data-theme="light"] h4 { color: var(--text-primary) !important; }
[data-theme="light"] p { color: var(--text-secondary) !important; }
[data-theme="light"] .text-slate-300 { color: var(--text-secondary) !important; }
[data-theme="light"] .text-slate-400,
[data-theme="light"] .text-slate-500 { color: var(--text-muted) !important; }
[data-theme="light"] .text-white { color: var(--text-primary) !important; }
[data-theme="light"] .bg-slate-800,
[data-theme="light"] .bg-slate-900,
[data-theme="light"] .bg-slate-700 { background-color: var(--surface-2) !important; border-color: var(--border) !important; }
[data-theme="light"] .border-slate-700,
[data-theme="light"] .border-slate-800,
[data-theme="light"] .border-slate-600 { border-color: var(--border-strong) !important; }
[data-theme="light"] input,
[data-theme="light"] select { background-color: var(--surface-2) !important; color: var(--text-primary) !important; border-color: var(--border-strong) !important; }
[data-theme="light"] input::placeholder { color: var(--text-muted) !important; }
[data-theme="light"] input:focus { background-color: var(--surface) !important; color: var(--text-primary) !important; }
[data-theme="light"] #search-results-container { background-color: var(--surface) !important; border-color: var(--border-strong) !important; }
[data-theme="light"] .search-result-item:hover { background-color: var(--surface-2) !important; }
[data-theme="light"] footer { border-top-color: var(--border) !important; }
[data-theme="light"] #theme-toggle,
[data-theme="light"] .sidebar-toggle-btn { background-color: var(--surface-2) !important; }
[data-theme="light"] #theme-toggle:hover { background-color: var(--surface) !important; }
[data-theme="light"] .copy-link-btn { background-color: rgba(248, 250, 252, 0.9); }
[data-theme="light"] .copy-link-btn:hover { background-color: rgba(226, 232, 240, 1); }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 640px) {
    .grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3.xl\:grid-cols-4,
    .grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }
    .grid-cols-2.md\:grid-cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .grid { gap: 1rem !important; }
}

@media (min-width: 641px) and (max-width: 1023px) {
    .grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3.xl\:grid-cols-4,
    .grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Resource card grids: cap at 3 columns instead of Tailwind's xl:grid-cols-4.
   With the sidebar now taking ~272px, 4-up felt cramped on typical laptop
   widths — 3 gives each card more breathing room. Homepage category cards
   and stat tiles are untouched (different grid signature, not selected here). */
@media (min-width: 1280px) {
    .grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3.xl\:grid-cols-4 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 768px) {
    :root { --header-h: var(--header-h-mobile); }

    .app-header { padding: 0 0.75rem; gap: 0.5rem; }
    .app-header-logo svg { width: 1.75rem; height: 1.75rem; }
    .app-header-logo-text .brand-title { font-size: 1rem; }

    #search-bar-container .relative.max-w-lg { max-width: 100%; }
    #global-filter { font-size: 16px; padding-top: 0.5rem; padding-bottom: 0.5rem; }
    #random-btn { display: none; }

    #search-results-container {
        top: auto;
        bottom: 1rem;
        left: 0.5rem;
        right: 0.5rem;
        transform: none;
        width: auto;
        max-height: 70vh;
    }

    .card { padding: 1rem !important; }
    .category-card { padding: 1.5rem; }
    .stats-card { padding: 1rem !important; }
    .stats-number { font-size: 2rem !important; }

    h1 { font-size: 1.875rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }
    p { line-height: 1.6; }

    .modal-content { margin: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; }

    input[type="text"], input[type="search"], select, textarea {
        font-size: 16px !important;
    }

    .copy-link-btn { min-width: 44px; min-height: 44px; padding: 0.75rem; }
    .tools-dropdown-button { min-height: 44px; padding: 0.75rem 1rem; }
    .card a, .card button { min-height: 44px; }
}

@media (max-width: 480px) {
    body { font-size: 14px; }
    .card { padding: 0.75rem !important; }
    .category-card { padding: 1rem; }
    .stats-number { font-size: 1.5rem !important; }
}

@media (hover: none) and (pointer: coarse) {
    * { -webkit-tap-highlight-color: rgba(167, 139, 250, 0.3); }
    button, a, .card { -webkit-tap-highlight-color: rgba(167, 139, 250, 0.2); }
    button, .sidebar-link, .sidebar-sublink { -webkit-user-select: none; user-select: none; }
    .card:active { transform: scale(0.98); }
    button:active { opacity: 0.85; }
}

@supports (padding: max(0px)) {
    .app-header {
        padding-left: max(0.75rem, env(safe-area-inset-left));
        padding-right: max(0.75rem, env(safe-area-inset-right));
    }
    .app-sidebar {
        padding-left: max(0.75rem, env(safe-area-inset-left));
    }
}

/* =========================================================================
   Lazy loading
   ========================================================================= */
img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.3s ease;
}
img[loading="lazy"].loaded {
    opacity: 1;
}
img[loading="lazy"]:not(.loaded) {
    background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}
@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* =========================================================================
   Reduced motion
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .card {
        opacity: 1 !important;
        transform: none !important;
    }
    .card:hover,
    .category-card:hover,
    .stats-card:hover,
    main [class*="bg-slate-800/50"]:hover,
    .card a.border-cyan-400:hover,
    .card button.border-cyan-400:hover,
    .card a.border-amber-400:hover,
    .card button.border-amber-400:hover,
    .card a.border-violet-500:hover,
    .card button.border-violet-500:hover,
    #random-btn:hover,
    .close-tools-button:hover,
    .copy-link-btn:hover,
    .retroachievements-badge:hover {
        transform: none !important;
    }
    .card.tag-goat::after {
        animation: none !important;
    }
    img[loading="lazy"]:not(.loaded) {
        animation: none !important;
    }
}