/*
 * retrostation custom theme for RomM -- v2 "Neon Arcade"
 *
 * Loaded on every HTML response via Caddy's `replace` directive (Caddyfile).
 *
 * Design intent:
 *   - Deep purple/black canvas with a slow-drifting dot grid.
 *   - Magenta + cyan neon accents on hover / focus / active.
 *   - Glass-morphism on cards and top chrome.
 *   - Game cover art: hover-lift + magenta glow + animated CRT scanline.
 *   - Forces a dark color scheme regardless of which Vuetify theme RomM
 *     reports (the user's saved light/dark preference). A neon arcade
 *     look needs a dark canvas; light theme would defeat the point.
 *
 * Cascade notes (important):
 *   Vuetify 3 injects its theme CSS variables at runtime into a <style>
 *   tag appended LATE in document head, so equal-specificity rules in
 *   /_brand.css lose to Vuetify on `.v-theme--*`.
 *   To win we either bump specificity (html.v-theme--*) or use !important
 *   on the variable assignments. We do both, depending on the rule.
 *
 * Edit -> save -> hard-reload (Ctrl-Shift-R). Brand.css has Cache-Control
 * max-age=300, so within 5 min the browser will pick up changes anyway.
 */

/* ===== Theme constants ===================================================== */
:root {
    --rs-bg-0: #07020e;            /* deepest */
    --rs-bg-1: #0e0820;            /* base panel */
    --rs-bg-2: #150a30;            /* card */
    --rs-bg-3: #1d0f44;            /* elevated */
    --rs-accent: #ff35e6;          /* neon magenta */
    --rs-accent-soft: #b829ff;     /* RomM-purple */
    --rs-accent-2: #2bf0ff;        /* electric cyan */
    --rs-text: #f5f0ff;
    --rs-text-dim: #b6a8d6;
    --rs-line: rgba(255, 53, 230, 0.18);

    /* Tell the browser to use dark UA controls (scrollbars, form widgets) */
    color-scheme: dark;
}

/* ===== Force dark canvas regardless of Vuetify theme =======================
 * Override Vuetify's CSS variables at root level so BOTH .v-theme--light and
 * .v-theme--dark resolve to our dark palette. Vuetify computes background
 * colors as rgb(var(--v-theme-background)) so we redefine the RGB triplet.
 */
html,
html.v-theme--light,
html.v-theme--dark,
.v-application,
.v-application.v-theme--light,
.v-application.v-theme--dark {
    --v-theme-background:        7,  2, 14   !important;
    --v-theme-on-background:   245, 240, 255 !important;
    --v-theme-surface:          14,  8, 32   !important;
    --v-theme-surface-bright:   29, 15, 68   !important;
    --v-theme-surface-light:    21, 10, 48   !important;
    --v-theme-surface-variant:  21, 10, 48   !important;
    --v-theme-on-surface:      245, 240, 255 !important;
    --v-theme-on-surface-variant: 245, 240, 255 !important;
    --v-theme-primary:         184, 41, 255  !important;
    --v-theme-on-primary:      255, 255, 255 !important;
    --v-theme-secondary:        43, 240, 255 !important;
    --v-theme-on-secondary:      7,  2, 14   !important;
    --v-theme-accent:          255, 53, 230  !important;
    --v-theme-info:             43, 240, 255 !important;
    --v-theme-success:         110, 231, 183 !important;
    --v-theme-warning:         252, 211,  77 !important;
    --v-theme-error:           255,  77, 109 !important;
}

/* Base canvas paint. !important to beat Vuetify's runtime style tag. */
html,
body,
.v-application,
.v-application__wrap {
    background-color: var(--rs-bg-0) !important;
    color: var(--rs-text) !important;
}

/* Background gradient + dot grid, fixed to viewport so scrolling doesn't
 * drag the pattern. */
body {
    background-image:
        radial-gradient(ellipse 80% 60% at 50% -10%,
            rgba(146, 5, 242, 0.30) 0%,
            transparent 60%),
        radial-gradient(ellipse 60% 40% at 110% 110%,
            rgba(43, 240, 255, 0.10) 0%,
            transparent 60%),
        radial-gradient(circle at 1px 1px,
            rgba(255, 255, 255, 0.03) 1px,
            transparent 0) !important;
    background-size: 100% 100%, 100% 100%, 28px 28px !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat, no-repeat, repeat !important;
    background-color: var(--rs-bg-0) !important;
}

/* Slow drift on the dot grid -- adds life without distracting. */
body::before {
    content: "";
    position: fixed;
    inset: -10%;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(circle at 1px 1px,
            rgba(255, 255, 255, 0.025) 1px,
            transparent 0) 0 0 / 28px 28px;
    animation: rs-drift 90s linear infinite;
    opacity: 0.6;
}
@keyframes rs-drift {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-28px, -28px, 0); }
}

/* Keep app content above the drift layer */
.v-application__wrap,
#app > * { position: relative; z-index: 1; }

/* ===== Top app bar ========================================================= */
.v-app-bar,
header.v-app-bar,
.v-app-bar.v-toolbar {
    background: linear-gradient(
        180deg,
        rgba(21, 10, 48, 0.88) 0%,
        rgba(14, 8, 32, 0.65) 100%
    ) !important;
    backdrop-filter: blur(12px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
    border-bottom: 1px solid var(--rs-line) !important;
    box-shadow: 0 4px 24px -8px rgba(0, 0, 0, 0.6) !important;
}

.v-app-bar .v-toolbar-title {
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 700;
}

/* RomM brand text in the toolbar -- gradient fill */
.v-app-bar .v-toolbar-title,
.v-app-bar a[href="/"] {
    background: linear-gradient(90deg, var(--rs-accent) 0%, var(--rs-accent-2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    text-shadow: 0 0 18px rgba(255, 53, 230, 0.35);
}

/* ===== Side nav drawer ===================================================== */
.v-navigation-drawer {
    background: linear-gradient(
        180deg,
        rgba(14, 8, 32, 0.94) 0%,
        rgba(7, 2, 14, 0.97) 100%
    ) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-right: 1px solid var(--rs-line) !important;
}

.v-navigation-drawer .v-list-item--active {
    background: linear-gradient(
        90deg,
        rgba(255, 53, 230, 0.18) 0%,
        rgba(255, 53, 230, 0.0) 100%
    ) !important;
    box-shadow: inset 3px 0 0 0 var(--rs-accent) !important;
    color: #fff !important;
}
.v-navigation-drawer .v-list-item:hover {
    background: rgba(255, 53, 230, 0.08) !important;
}

/* ===== Shelves (platform rows on the home/library view) ===================
 * RomM emits divs with class .shelf for each platform row and .library-shelves
 * for the container. Add a subtle divider + slight inset glow per shelf.
 */
.shelf {
    padding: 8px 0;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(255, 53, 230, 0.08);
}

.library-shelves {
    /* Give the shelf list more breathing room and a soft top fade */
    padding-top: 8px;
}

/* Shelf heading (platform name) -- if RomM renders an h2/h3 inside .shelf */
.shelf > h1,
.shelf > h2,
.shelf > h3,
.shelf .v-list-item-title {
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: linear-gradient(90deg, var(--rs-text) 0%, var(--rs-accent-2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
}

/* ===== Cards (Vuetify v-card -- includes every game tile, every panel) ====
 * We can't isolate "only game tiles" without :has() (and even that's iffy
 * given RomM uses the bare v-card class). Treat every v-card the same and
 * accept that admin/dialog cards get the neon treatment too -- they need
 * dark backgrounds anyway.
 */
.v-card,
.v-sheet.v-card {
    background: linear-gradient(
        180deg,
        rgba(21, 10, 48, 0.78) 0%,
        rgba(14, 8, 32, 0.62) 100%
    ) !important;
    border: 1px solid rgba(255, 53, 230, 0.10) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--rs-text) !important;
    transition:
        transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
        box-shadow 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
        border-color 180ms ease !important;
}

/* Hover lift only on cards that contain a cover image (i.e. game tiles).
 * `:has()` is supported in all current Chromium/WebKit/Firefox so this is
 * safe on every retrostation user's browser. */
.v-card:has(.v-img),
.v-card:has(img) {
    overflow: hidden;
    border-radius: 10px !important;
    position: relative;
    isolation: isolate;
}

.v-card:has(.v-img):hover,
.v-card:has(img):hover {
    transform: translateY(-4px) scale(1.015);
    border-color: rgba(255, 53, 230, 0.55) !important;
    box-shadow:
        0 0 0 1px rgba(255, 53, 230, 0.45),
        0 14px 36px -8px rgba(255, 53, 230, 0.55),
        0 4px 16px -2px rgba(146, 5, 242, 0.5) !important;
    z-index: 2;
}

/* Animated CRT-scanline overlay on cover art -- only on hover.
 * Pure CSS, no JS, GPU-composited. */
.v-card:has(.v-img):hover .v-img::after,
.v-card:has(img):hover .v-responsive::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            transparent 0%,
            transparent 49.5%,
            rgba(0, 0, 0, 0.22) 50%,
            transparent 50.5%,
            transparent 100%
        ),
        linear-gradient(
            180deg,
            rgba(255, 53, 230, 0.0) 60%,
            rgba(255, 53, 230, 0.18) 100%
        );
    background-size: 100% 3px, 100% 100%;
    mix-blend-mode: overlay;
    animation: rs-scan 1.2s linear infinite;
}
@keyframes rs-scan {
    from { background-position: 0 0, 0 0; }
    to   { background-position: 0 3px, 0 0; }
}

/* Sharper image rendering for low-res box art (NES/SNES covers are
 * often only 200-400px wide source). */
.v-card .v-img img,
.v-card img {
    image-rendering: -webkit-optimize-contrast;
}

/* Card title and text colors */
.v-card-title,
.v-card-subtitle,
.v-card-text,
.game-card-text {
    color: var(--rs-text) !important;
}

/* Game-card focus border (keyboard / gamepad navigation) */
.game-card-focus-border,
.collection-card-focus-border,
.state-card-focus-border {
    border: 2px solid var(--rs-accent) !important;
    box-shadow:
        0 0 0 1px rgba(255, 53, 230, 0.4),
        0 0 24px -4px rgba(255, 53, 230, 0.7) !important;
}

/* ===== Platform badges (the little console-logo chip on each cover) ========
 * RomM defines --console-game-platform-badge-bg per platform (e.g. SNES =
 * SNES purple). Don't clobber it -- but ADD a subtle outer glow so it pops.
 */
[class*="platform-badge"],
.bg-\[var\(--console-game-platform-badge-bg\)\] {
    box-shadow: 0 0 12px -2px rgba(255, 255, 255, 0.25),
                0 0 0 1px rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

/* ===== Buttons ============================================================= */
.v-btn--variant-elevated.v-btn--color-primary,
.v-btn--variant-flat.v-btn--color-primary,
.v-btn.bg-primary,
.v-btn[class*="primary"] {
    background: linear-gradient(
        135deg,
        var(--rs-accent-soft) 0%,
        var(--rs-accent) 100%
    ) !important;
    color: #fff !important;
    box-shadow:
        0 4px 14px -4px rgba(255, 53, 230, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
    transition: transform 120ms ease, box-shadow 180ms ease, filter 120ms ease !important;
}
.v-btn--variant-elevated.v-btn--color-primary:hover,
.v-btn.bg-primary:hover {
    transform: translateY(-1px);
    box-shadow:
        0 6px 18px -4px rgba(255, 53, 230, 0.75),
        inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
    filter: brightness(1.08);
}
.v-btn--variant-elevated.v-btn--color-primary:active,
.v-btn.bg-primary:active {
    transform: translateY(0);
    filter: brightness(0.92);
}
.v-btn:focus-visible {
    outline: 2px solid var(--rs-accent) !important;
    outline-offset: 2px;
}

/* Secondary/text buttons get cyan accent */
.v-btn--variant-text:hover,
.v-btn--variant-tonal:hover {
    background: rgba(43, 240, 255, 0.10) !important;
    color: var(--rs-accent-2) !important;
}

/* ===== Chips ============================================================== */
.v-chip {
    border: 1px solid rgba(255, 53, 230, 0.18) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.v-chip.bg-primary,
.v-chip[class*="primary"] {
    background: linear-gradient(135deg, var(--rs-accent-soft), var(--rs-accent)) !important;
    color: #fff !important;
    border-color: rgba(255, 53, 230, 0.5) !important;
}

/* ===== Links ============================================================== */
a:not(.v-btn):not(.v-list-item):not(.v-tab):not(.v-card) {
    color: var(--rs-accent-2);
    text-decoration-color: rgba(43, 240, 255, 0.4);
    text-underline-offset: 2px;
    transition: color 120ms ease, text-decoration-color 120ms ease;
}
a:not(.v-btn):not(.v-list-item):not(.v-tab):not(.v-card):hover {
    color: var(--rs-accent);
    text-decoration-color: var(--rs-accent);
}

/* ===== Form inputs ======================================================== */
.v-field--variant-outlined.v-field--focused .v-field__outline,
.v-field--focused .v-field__outline {
    color: var(--rs-accent) !important;
    --v-field-border-width: 2px;
}
.v-field {
    border-radius: 8px;
}

/* ===== Scrollbars ========================================================= */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track {
    background: rgba(7, 2, 14, 0.6);
}
*::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--rs-accent-soft), var(--rs-accent));
    border-radius: 6px;
    border: 2px solid rgba(7, 2, 14, 0.6);
}
*::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--rs-accent), var(--rs-accent-2));
}
* { scrollbar-color: var(--rs-accent) rgba(7, 2, 14, 0.6); scrollbar-width: thin; }

/* ===== Progress / loaders ================================================= */
.v-progress-linear__indeterminate,
.v-progress-circular__overlay {
    color: var(--rs-accent) !important;
}

/* ===== Boot splash logo (rendered before Vuetify even mounts) ============= */
#app-loading-logo {
    background: radial-gradient(
        ellipse 60% 40% at 50% 50%,
        rgba(146, 5, 242, 0.30) 0%,
        rgba(7, 2, 14, 1.0) 70%
    ) !important;
}
#app-loading-logo img {
    opacity: 0.45 !important;
    filter:
        drop-shadow(0 0 24px rgba(255, 53, 230, 0.7))
        hue-rotate(15deg);
    animation: rs-pulse 2.4s ease-in-out infinite;
}
@keyframes rs-pulse {
    0%, 100% { opacity: 0.40; transform: scale(1); }
    50%      { opacity: 0.65; transform: scale(1.04); }
}

/* ===== EmulatorJS chrome (NOT the canvas) ================================
 * Style the EJS top-bar and settings menus. Leave the <canvas> alone so
 * the game frame is untouched.
 */
.ejs_menu_bar,
#ejs_menu_bar {
    background: linear-gradient(
        180deg,
        rgba(14, 8, 32, 0.92),
        rgba(14, 8, 32, 0.75)
    ) !important;
    border-bottom: 1px solid var(--rs-line);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.ejs_settings_panel,
.ejs_setting_menu {
    color: var(--rs-text) !important;
}
.ejs_menu_button:hover {
    background: rgba(255, 53, 230, 0.14) !important;
    color: var(--rs-accent) !important;
}

/* Neon bezel around the play viewport */
.ejs_parent,
#game {
    box-shadow:
        0 0 0 1px rgba(255, 53, 230, 0.35),
        0 0 40px -10px rgba(255, 53, 230, 0.4),
        0 0 80px -20px rgba(146, 5, 242, 0.3);
    border-radius: 6px;
}

/* Touch / virtual gamepad buttons -- neon outline, glass fill */
.ejs_virtualGamepad_button {
    background: rgba(14, 8, 32, 0.55) !important;
    border: 1.5px solid rgba(255, 53, 230, 0.65) !important;
    color: var(--rs-text) !important;
    box-shadow: 0 0 12px -2px rgba(255, 53, 230, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.ejs_virtualGamepad_button:active {
    background: rgba(255, 53, 230, 0.4) !important;
    transform: scale(0.94);
}

/* ===== Data tables ======================================================= */
.v-data-table {
    background: transparent !important;
}
.v-data-table-header__content {
    color: var(--rs-accent-2) !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.78rem !important;
}

/* ===== Text selection ==================================================== */
::selection {
    background: var(--rs-accent);
    color: #07020e;
}

/* ===== Reduced motion ==================================================== */
@media (prefers-reduced-motion: reduce) {
    body::before { animation: none; }
    #app-loading-logo img { animation: none; }
    .v-card:has(.v-img):hover .v-img::after { animation: none; }
    .v-card, .v-btn { transition: none !important; }
}