/* Game District: the 90s finish (loaded after the other hub sheets, before hub-mobile.css).
   The colours are tokens in hub-base.css (--teal, --magenta, --sun, --grape, --btn-*, --title*, --sb-*, --confetti-opacity);
   this sheet adds the details: a faint Memphis confetti wallpaper, chunky bevelled buttons, hard offset shadows on hover,
   striped dialog tops, display titles with a two-colour drop, and themed scrollbars on every scrolling area.
   Hub only: games/index.php is the only page that loads it, so the games and game-retro.css are untouched.
   Contrast stays WCAG AA: text sits on the same surfaces as before, decoration never sits under text. */

/* ------------------------------------------------------------------ wallpaper */
body.hub-page::before {
    content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: var(--confetti-opacity);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg fill='none' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 40c10-12 20 12 30 0s20 12 30 0' stroke='%232ee6d6'/%3E%3Cpath d='M170 196c10-12 20 12 30 0s20 12 30 0' stroke='%23ff4fb8'/%3E%3Ccircle cx='206' cy='54' r='13' stroke='%23ffd23f'/%3E%3Ccircle cx='60' cy='176' r='9' stroke='%238a4dff'/%3E%3Cpath d='M118 104l16 26h-32z' stroke='%23ff4fb8'/%3E%3Cpath d='M30 238l14-10M236 128l12 12' stroke='%23ffd23f'/%3E%3C/g%3E%3Cg%3E%3Ccircle cx='150' cy='30' r='4' fill='%23ffd23f'/%3E%3Ccircle cx='96' cy='222' r='4' fill='%232ee6d6'/%3E%3Ccircle cx='240' cy='242' r='3' fill='%238a4dff'/%3E%3Crect x='14' y='112' width='9' height='9' rx='2' fill='%232ee6d6' transform='rotate(20 18 116)'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 260px 260px;
}
:root:not([data-theme="day"]):not([data-theme="contrast"]) body.hub-page {
    background-image:
        radial-gradient(1100px 520px at 12% -12%, rgba(255, 79, 184, .2), transparent 60%),
        radial-gradient(900px 480px at 96% -4%, rgba(46, 230, 214, .16), transparent 60%),
        radial-gradient(900px 600px at 50% 120%, rgba(138, 77, 255, .22), transparent 65%),
        linear-gradient(180deg, var(--bg-2), var(--bg) 460px);
}
:root[data-theme="day"] body.hub-page {
    background-image:
        radial-gradient(1000px 480px at 10% -10%, rgba(255, 194, 26, .28), transparent 60%),
        radial-gradient(900px 480px at 96% -6%, rgba(0, 162, 154, .16), transparent 60%),
        radial-gradient(900px 600px at 50% 120%, rgba(214, 36, 140, .1), transparent 65%),
        linear-gradient(180deg, var(--bg-2), var(--bg) 460px);
}
html[data-lite] body.hub-page::before { background-attachment: scroll; }

/* ------------------------------------------------------------------ top bar */
.hub-top { border-bottom: 0; box-shadow: 0 1px 0 var(--line); }
.hub-top::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; pointer-events: none;
    background: linear-gradient(90deg, var(--teal) 0 25%, var(--magenta) 25% 50%, var(--sun) 50% 75%, var(--grape) 75% 100%);
    opacity: .85;
}
:root[data-theme="contrast"] .hub-top::after { display: none; }
.hub-brand-mark {
    background: linear-gradient(145deg, var(--teal), var(--grape) 55%, var(--magenta));
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .2) inset, 3px 3px 0 var(--btn-edge);
    transform: rotate(-4deg);
}
.hub-brand:hover .hub-brand-mark { transform: rotate(3deg) scale(1.04); }
.hub-brand-mark { transition: transform .2s cubic-bezier(.3, 1.6, .5, 1); }
.hub-brand-text b { color: var(--title); text-shadow: 2px 2px 0 var(--title-shadow); }
.dashboard-tab:hover { color: var(--text); background: color-mix(in srgb, var(--teal) 14%, var(--surface-2)); }
.dashboard-tab.is-active {
    background: linear-gradient(180deg, var(--btn-hi), var(--gold) 50%, var(--gold-2));
    border: 2px solid var(--btn-edge); padding-top: 8px; padding-bottom: 8px;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), 0 3px 0 var(--btn-edge);
}
.dashboard-tab .hub-badge-dot { background: var(--magenta); box-shadow: 0 0 0 2px var(--bg); }
.hub-wallet, .hub-icon-btn, .hub-player-chip { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 2px 0 var(--btn-edge); }
.hub-wallet:hover, .hub-icon-btn:hover { border-color: var(--teal); }
.hub-player-chip:hover { border-color: var(--teal); }
.dashboard-rail-avatar, .retro-avatar { border-color: var(--teal); }

/* ------------------------------------------------------------------ titles */
.hub-panel-head h2, .dashboard-shop-toolbar h2, .hub-section-title, .dz-title, .hub-guide-head h2 {
    color: var(--title);
    text-shadow: 2px 2px 0 var(--title-shadow), 4px 4px 0 var(--title-shadow-2);
}
.retro-kicker { color: var(--magenta); }
:root[data-theme="day"] .retro-kicker { color: var(--pink); }
:root[data-theme="day"] .hub-hero .retro-kicker { color: #ff8fc1; }

/* ------------------------------------------------------------------ buttons: chunky and bevelled */
.retro-button, .retro-button-secondary, .retro-button-danger { border-width: 2px; }
.retro-button {
    background: linear-gradient(180deg, var(--btn-hi), var(--gold) 48%, var(--gold-2));
    border-color: var(--btn-edge);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -3px 0 rgba(0, 0, 0, .14), 0 4px 0 var(--btn-edge), 0 9px 18px rgba(255, 79, 184, .2);
}
.retro-button:hover { filter: brightness(1.06) saturate(1.1); transform: translateY(-1px); }
.retro-button:active { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), 0 1px 0 var(--btn-edge); }
.retro-button-secondary {
    border-color: var(--line-2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 3px 0 var(--btn-edge);
}
.retro-button-secondary:hover { border-color: var(--teal); background: color-mix(in srgb, var(--teal) 10%, var(--surface-3)); transform: translateY(-1px); }
.retro-button-secondary:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--btn-edge); }
.retro-button-secondary.is-active { border-color: var(--teal); box-shadow: inset 0 0 0 1px var(--teal), 0 3px 0 var(--btn-edge); }
.retro-button-danger { box-shadow: 0 3px 0 var(--btn-edge); }
.retro-button:disabled, .retro-button-secondary:disabled, .retro-button-danger:disabled,
.retro-button[aria-disabled="true"] { box-shadow: none; transform: none; }
/* game cards keep their own accent colour, but get the same chunky edge */
.dashboard-game-card .retro-button { border-color: var(--btn-edge); }

/* ------------------------------------------------------------------ chips and filters */
.hub-chip, .dashboard-shop-category, .dz-seg button { transition: background .15s, color .15s, border-color .15s, transform .15s, box-shadow .15s; }
.hub-chip:hover { border-color: var(--teal); transform: translateY(-1px); }
.hub-chip[aria-pressed="true"] {
    background: linear-gradient(180deg, var(--btn-hi), var(--gold) 55%, var(--gold-2)); color: var(--on-gold);
    border-color: var(--btn-edge); box-shadow: 0 2px 0 var(--btn-edge);
}
.dashboard-shop-category.is-active { border-color: var(--teal); background: color-mix(in srgb, var(--teal) 14%, var(--surface-2)); box-shadow: 3px 3px 0 color-mix(in srgb, var(--magenta) 55%, transparent); }
.dz-tab:hover { background: color-mix(in srgb, var(--teal) 12%, var(--surface-2)); }
.dz-tab.is-active { background: linear-gradient(180deg, var(--btn-hi), var(--gold) 55%, var(--gold-2)); border-color: var(--btn-edge); box-shadow: 0 2px 0 var(--btn-edge); }
.retro-input:hover, .retro-select:hover, body.hub-page select:hover { border-color: var(--teal); }
body.hub-page input:focus, body.hub-page select:focus, body.hub-page textarea:focus { border-color: var(--teal); }
input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: var(--magenta); }
:root[data-theme="contrast"] input[type="checkbox"], :root[data-theme="contrast"] input[type="radio"] { accent-color: var(--gold); }

/* ------------------------------------------------------------------ cards and panels */
.hub-card, .dashboard-player-panel, .dashboard-board, .dz-cats, .dz-body, .dashboard-shop-rail, .hub-inv-card {
    border-color: color-mix(in srgb, var(--violet) 26%, var(--line));
}
.dashboard-game-card { border-color: color-mix(in srgb, var(--violet) 24%, var(--line)); }
.dashboard-game-card::after { height: 4px; background: linear-gradient(90deg, var(--accent) 0 60%, var(--magenta) 60% 76%, var(--teal) 76% 90%, var(--sun) 90%); }
.dashboard-game-card:hover, .dashboard-game-card:focus-within {
    box-shadow: 6px 6px 0 color-mix(in srgb, var(--accent) 70%, transparent), 0 0 0 1px var(--accent), 0 16px 30px rgba(5, 0, 25, .35);
}
.hub-item:hover, .hub-item:focus-within {
    box-shadow: 5px 5px 0 color-mix(in srgb, var(--rar, var(--teal)) 60%, transparent), 0 12px 24px rgba(5, 0, 25, .3);
}
.hub-inv-card { transition: transform .18s, box-shadow .18s, border-color .18s; }
.hub-inv-card:hover, .hub-inv-card:focus-within { transform: translateY(-2px); box-shadow: 4px 4px 0 color-mix(in srgb, var(--rar, var(--teal)) 55%, transparent); }
.retro-empty { border-color: color-mix(in srgb, var(--teal) 45%, transparent); }
.hub-hero { border: 2px solid color-mix(in srgb, var(--violet) 40%, transparent); box-shadow: 8px 8px 0 color-mix(in srgb, var(--magenta) 35%, transparent), var(--shadow); }
:root[data-theme="contrast"] .hub-hero { box-shadow: var(--shadow); }
/* reduced motion and lite mode: no lifts */
body[data-motion="reduced"] .hub-chip:hover, body[data-motion="reduced"] .hub-inv-card:hover { transform: none; }

/* ------------------------------------------------------------------ dialogs, sheets, popovers */
.hub-dialog, .dashboard-wardrobe-dialog, .dashboard-slot-dialog, .dashboard-unsaved-dialog, .dashboard-shop-preview-dialog, .hub-drawer, .hub-pop, .hub-palette-dialog {
    background:
        linear-gradient(90deg, var(--teal) 0 25%, var(--magenta) 25% 50%, var(--sun) 50% 75%, var(--grape) 75% 100%) top left / 100% 5px no-repeat,
        var(--surface);
    border-color: color-mix(in srgb, var(--violet) 40%, var(--line-2));
}
.hub-pop { background-color: var(--surface-3); }
.hub-modal, .dashboard-wardrobe-modal, .dashboard-slot-modal, .dashboard-unsaved-modal, .dashboard-shop-preview-modal { background: rgba(16, 4, 40, .72); }
:root[data-theme="day"] .hub-modal, :root[data-theme="day"] .dashboard-unsaved-modal, :root[data-theme="day"] .dashboard-shop-preview-modal,
:root[data-theme="day"] .dashboard-slot-modal, :root[data-theme="day"] .dashboard-wardrobe-modal { background: rgba(60, 20, 90, .45); }
.dashboard-slot-close:hover, .dashboard-shop-preview-close:hover, .hub-close:hover { background: var(--magenta); }
.dashboard-unsaved-dialog .retro-kicker { padding: 2px 10px; border-radius: 999px; background: color-mix(in srgb, var(--magenta) 16%, transparent); border: 1px solid color-mix(in srgb, var(--magenta) 45%, transparent); }

/* tooltips and toasts */
.hub-tip { background: var(--tip-bg); color: var(--tip-text); border-color: color-mix(in srgb, var(--teal) 55%, transparent); box-shadow: 3px 3px 0 color-mix(in srgb, var(--magenta) 45%, transparent); }
.hub-toast { border-left: 6px solid var(--teal); box-shadow: 4px 4px 0 color-mix(in srgb, var(--grape) 45%, transparent), var(--shadow); }
.hub-toast.is-success { border-left-color: var(--green); }
.hub-toast.is-error { border-left-color: var(--red); }
.hub-toast.is-info { border-left-color: var(--teal); }

/* ------------------------------------------------------------------ scrollbars
   Every scroller in the hub (the page, shop rail and grid, item window, studio rail and lists, inventory, locker, dialogs
   and sheets). Chromium/Safari get ::-webkit-scrollbar (a chunky teal-to-magenta pill on the panel colour); Chromium 121+
   ignores those on any element with a standard scrollbar-width/-color, so the standard properties are set for Firefox
   only, and the hub's own `scrollbar-width: thin` lists go back to auto in WebKit/Blink to get the themed bar. */
@supports not selector(::-webkit-scrollbar) {
    html { scrollbar-color: var(--sb-thumb) var(--sb-track); }
    body.hub-page * { scrollbar-color: var(--sb-thumb) transparent; }
}
@supports selector(::-webkit-scrollbar) {
    .dz-looks-row, html:not(.hub-phone) .dz-tabs, .dashboard-journal-index, .hub-front-row, .dashboard-shop-rail,
    .dashboard-shop-category-list, .hub-preview-scroll, .hub-set-gallery { scrollbar-width: auto; }
}
html::-webkit-scrollbar { width: 14px; height: 14px; }
html::-webkit-scrollbar-track { background: var(--sb-track); }
html::-webkit-scrollbar-thumb {
    border-radius: 999px; border: 3px solid var(--sb-track); background-clip: padding-box;
    background-image: linear-gradient(180deg, var(--sb-thumb), var(--sb-thumb-2));
}
html::-webkit-scrollbar-thumb:hover { border-width: 2px; }
html::-webkit-scrollbar-corner { background: var(--sb-track); }
body.hub-page ::-webkit-scrollbar { width: 11px; height: 11px; }
body.hub-page ::-webkit-scrollbar-track { background: color-mix(in srgb, var(--sb-track) 70%, transparent); border-radius: 999px; }
body.hub-page ::-webkit-scrollbar-thumb {
    border-radius: 999px; border: 2px solid transparent; background-clip: padding-box;
    background-image: linear-gradient(180deg, var(--sb-thumb), var(--sb-thumb-2));
    min-height: 36px;
}
body.hub-page ::-webkit-scrollbar-thumb:horizontal { background-image: linear-gradient(90deg, var(--sb-thumb), var(--sb-thumb-2)); min-width: 36px; }
body.hub-page ::-webkit-scrollbar-thumb:hover { border-width: 1px; }
body.hub-page ::-webkit-scrollbar-thumb:active { background-image: linear-gradient(180deg, var(--sb-thumb-2), var(--sb-thumb)); }
body.hub-page ::-webkit-scrollbar-corner { background: transparent; }
body.hub-page ::-webkit-scrollbar-button { display: none; width: 0; height: 0; }