:root {
    --darkness: 0;
    --radius: 0.5rem;
}

html {
    color-scheme: light;
}

html.dark {
    color-scheme: dark;
}

body {
    margin: 0;
}

body,
header,
.gog-glass,
.gog-card,
.gog-field,
.gog-input,
.gog-topbar-filter-button,
.gog-live-activity,
.gog-map-overlay,
.gog-globe-glow,
.gog-globe-vignette {
    transition: background 200ms ease, color 200ms ease, border-color 200ms ease, box-shadow 200ms ease, opacity 200ms ease;
}

/* ── Header ── */

.gog-app-header.gog-app-header-transparent {
    background: transparent;
}

.dark .gog-app-header.gog-app-header-transparent {
    background: transparent;
}

.gog-app-header.gog-app-header-solid {
    background: #EEF8FF;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.dark .gog-app-header.gog-app-header-solid {
    background: #09090b;
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

/* ── Card (glass surface — shadcn card style) ── */

.gog-card {
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.78);
    color: #09090b;
    backdrop-filter: blur(16px) saturate(1.6);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.dark .gog-card {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(9, 9, 11, 0.72);
    color: #fafafa;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* ── Modal (shadcn dialog style) ── */

.gog-modal {
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #020617;
    padding: 1.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    animation: gog-modal-in 150ms ease;
}

.dark .gog-modal {
    border-color: #1e293b;
    background: #020617;
    color: #f8fafc;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
}

@keyframes gog-modal-in {
    from { opacity: 0; transform: scale(0.97) translateY(4px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

/* Legacy gog-glass kept for backward compat */
.gog-glass {
    border-color: rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.78);
    color: #09090b;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(16px) saturate(1.6);
}

.dark .gog-glass {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(9, 9, 11, 0.72);
    color: #fafafa;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* ── Input (shadcn-style) ── */

.gog-input {
    display: flex;
    align-items: center;
    border-radius: 0.375rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.9);
    padding: 0 0.625rem;
    color: #09090b;
    font-size: 13px;
    outline: none;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.dark .gog-input {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(9, 9, 11, 0.6);
    color: #fafafa;
}

.gog-input:focus {
    border-color: #22d3ee;
    box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.15);
}

.gog-input::placeholder {
    color: #a1a1aa;
}

.dark .gog-input::placeholder {
    color: #52525b;
}

/* Legacy gog-field kept for other pages */
.gog-field {
    width: 100%;
    border-radius: 0.375rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.9);
    padding: 0.5rem 0.75rem;
    color: #09090b;
    font-size: 14px;
    outline: none;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.dark .gog-field {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(9, 9, 11, 0.6);
    color: #fafafa;
}

.gog-field:focus {
    border-color: #22d3ee;
    box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.15);
}

/* ── Label ── */

.gog-label {
    display: block;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.025em;
    color: #71717a;
}

.dark .gog-label {
    color: #a1a1aa;
}

/* ── Checkbox ── */

.gog-checkbox {
    height: 0.875rem;
    width: 0.875rem;
    border-radius: 0.25rem;
    border: 1px solid rgba(0, 0, 0, 0.15);
    accent-color: #22d3ee;
}

.dark .gog-checkbox {
    border-color: rgba(255, 255, 255, 0.15);
}

/* ── Buttons ── */

.gog-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    background: #18181b;
    color: #fafafa;
    border: none;
    cursor: pointer;
    transition: background 150ms ease, opacity 150ms ease;
}

.gog-btn-primary:hover {
    background: #27272a;
}

.dark .gog-btn-primary {
    background: #fafafa;
    color: #18181b;
}

.dark .gog-btn-primary:hover {
    background: #e4e4e7;
}

.gog-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.85);
    color: #18181b;
    border: 1px solid rgba(0, 0, 0, 0.1);
    cursor: pointer;
    backdrop-filter: blur(8px);
    transition: background 150ms ease, border-color 150ms ease;
}

.gog-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 0, 0, 0.15);
}

.dark .gog-btn-secondary {
    background: rgba(9, 9, 11, 0.7);
    color: #fafafa;
    border-color: rgba(255, 255, 255, 0.1);
}

.dark .gog-btn-secondary:hover {
    background: rgba(39, 39, 42, 0.8);
    border-color: rgba(255, 255, 255, 0.15);
}

.gog-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: #71717a;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease;
}

.gog-btn-ghost:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #18181b;
}

.dark .gog-btn-ghost {
    color: #a1a1aa;
}

.dark .gog-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fafafa;
}

/* ── Filter dropdown (home page, below header) ── */

.gog-filter-dropdown {
    position: fixed;
    top: 44px;
    right: 0.75rem;
    z-index: 35;
    width: 17rem;
    max-width: calc(100vw - 1.5rem);
    animation: gog-dropdown-in 120ms ease;
}

@keyframes gog-dropdown-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Globe background ── */

#globe,
.maplibregl-map,
.maplibregl-canvas-container {
    overflow: hidden;
}

.gog-surface {
    background: rgba(255, 255, 255, calc(0.9 - (var(--darkness) * 0.25)));
}

.dark .gog-surface {
    background: rgba(9, 9, 11, calc(0.82 + (var(--darkness) * 0.12)));
}

.gog-topbar-search {
    max-width: 34rem;
    min-width: 18rem;
    background: rgba(255, 255, 255, 0.94);
    color: #09090b;
}

.dark .gog-topbar-search {
    background: rgba(9, 9, 11, 0.92);
    color: #fafafa;
}

.gog-filter-panel {
    width: min(58rem, calc(100vw - 2rem));
}

.gog-space {
    background: linear-gradient(180deg, #f0f9ff 0%, #e0f2fe 46%, #f0f9ff 100%);
}

.dark .gog-space {
    background:
        radial-gradient(circle at 20% 20%, rgba(56, 189, 248, 0.08), transparent 26rem),
        radial-gradient(circle at 80% 12%, rgba(20, 184, 166, 0.05), transparent 24rem),
        #09090b;
}

.gog-space::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: none;
    opacity: 0;
}

.dark .gog-space::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600' viewBox='0 0 600 600'%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='34' cy='512' r='1.3'/%3E%3Ccircle cx='128' cy='66' r='0.8'/%3E%3Ccircle cx='201' cy='344' r='1.1'/%3E%3Ccircle cx='289' cy='130' r='0.6'/%3E%3Ccircle cx='377' cy='498' r='1.4'/%3E%3Ccircle cx='446' cy='221' r='0.7'/%3E%3Ccircle cx='523' cy='389' r='1'/%3E%3Ccircle cx='567' cy='58' r='0.9'/%3E%3Ccircle cx='92' cy='275' r='0.6'/%3E%3Ccircle cx='159' cy='441' r='1.2'/%3E%3Ccircle cx='248' cy='572' r='0.7'/%3E%3Ccircle cx='312' cy='401' r='0.9'/%3E%3Ccircle cx='401' cy='29' r='1.1'/%3E%3Ccircle cx='478' cy='312' r='0.6'/%3E%3Ccircle cx='61' cy='148' r='1'/%3E%3Ccircle cx='544' cy='471' r='0.8'/%3E%3Ccircle cx='223' cy='98' r='0.7'/%3E%3Ccircle cx='355' cy='246' r='1.2'/%3E%3Ccircle cx='17' cy='358' r='0.6'/%3E%3Ccircle cx='433' cy='556' r='0.9'/%3E%3C/g%3E%3Cg fill='%23bcd4ff'%3E%3Ccircle cx='110' cy='384' r='0.7'/%3E%3Ccircle cx='276' cy='486' r='1'/%3E%3Ccircle cx='338' cy='178' r='0.6'/%3E%3Ccircle cx='498' cy='142' r='0.8'/%3E%3Ccircle cx='73' cy='588' r='0.7'/%3E%3Ccircle cx='185' cy='208' r='0.9'/%3E%3Ccircle cx='420' cy='428' r='0.6'/%3E%3Ccircle cx='588' cy='268' r='1'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 600px 600px;
    opacity: 1;
    animation: gog-star-drift 200s linear infinite;
}

.gog-space::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: none;
    opacity: 0;
}

.dark .gog-space::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800' viewBox='0 0 800 800'%3E%3Cg fill='%237dd3fc'%3E%3Ccircle cx='66' cy='118' r='1.6'/%3E%3Ccircle cx='312' cy='544' r='1.4'/%3E%3Ccircle cx='588' cy='276' r='1.7'/%3E%3Ccircle cx='742' cy='638' r='1.3'/%3E%3Ccircle cx='188' cy='712' r='1.5'/%3E%3Ccircle cx='456' cy='88' r='1.4'/%3E%3Ccircle cx='678' cy='452' r='1.6'/%3E%3Ccircle cx='28' cy='388' r='1.3'/%3E%3C/g%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='244' cy='266' r='1.8'/%3E%3Ccircle cx='522' cy='698' r='1.5'/%3E%3Ccircle cx='398' cy='344' r='1.6'/%3E%3Ccircle cx='634' cy='148' r='1.4'/%3E%3Ccircle cx='118' cy='502' r='1.7'/%3E%3Ccircle cx='766' cy='58' r='1.5'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 800px 800px;
    opacity: 0.9;
    animation: gog-star-twinkle 5s ease-in-out infinite, gog-star-drift 320s linear infinite reverse;
}

@keyframes gog-star-twinkle {
    0%, 100% { opacity: 0.9; }
    50% { opacity: 0.45; }
}

@keyframes gog-cloud-drift {
    from { background-position-x: 0, 38%, 76%; }
    to { background-position-x: 80rem, calc(38% + 80rem), calc(76% + 80rem); }
}

@keyframes gog-star-drift {
    from { background-position-x: 0, 28px; }
    to { background-position-x: -420px, -392px; }
}

/* Luminous atmospheric halo hugging the globe's limb and blooming outward
   into the surrounding space. The stops are anchored to --globe-limb (the
   sphere's on-screen radius in px, updated from JS on every zoom), so the
   glow tracks the limb at any zoom: when zoomed in the band is pushed
   off-screen, when zoomed out it wraps the smaller globe. The fallback
   matches the default zoom (3) so it renders correctly before JS runs. */
.gog-globe-glow {
    z-index: 3;
    background:
        radial-gradient(circle at 50% 50%,
            transparent 0,
            transparent calc(var(--globe-limb, 475px) - 35px),
            rgba(56, 189, 248, 0.225) calc(var(--globe-limb, 475px) + 5px),
            rgba(125, 211, 252, 0.11) calc(var(--globe-limb, 475px) + 70px),
            rgba(186, 230, 253, 0.035) calc(var(--globe-limb, 475px) + 150px),
            transparent calc(var(--globe-limb, 475px) + 230px));
}

.dark .gog-globe-glow {
    background:
        radial-gradient(circle at 50% 50%,
            transparent 0,
            transparent calc(var(--globe-limb, 475px) - 35px),
            rgba(56, 189, 248, 0.30) calc(var(--globe-limb, 475px) + 5px),
            rgba(34, 211, 238, 0.15) calc(var(--globe-limb, 475px) + 70px),
            rgba(34, 211, 238, 0.05) calc(var(--globe-limb, 475px) + 150px),
            transparent calc(var(--globe-limb, 475px) + 245px));
}

.gog-globe-vignette {
    background:
        radial-gradient(circle at 50% 50%, transparent 0, transparent 22rem, rgba(240, 249, 255, 0.3) 32rem, rgba(240, 249, 255, 0.6) 100%);
}

.dark .gog-globe-vignette {
    background:
        radial-gradient(circle at 50% 50%, rgba(125, 211, 252, 0.04) 0, transparent 22rem, rgba(9, 9, 11, 0.2) 32rem, rgba(9, 9, 11, 0.7) 100%);
}

.gog-map-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.02);
    transition: background 200ms ease;
    z-index: 2;
}

.dark .gog-map-overlay {
    background: rgba(9, 9, 11, calc(var(--darkness) * 0.1));
}

.maplibregl-canvas {
    outline: none;
}

#globe .maplibregl-ctrl-bottom-right {
    right: 1rem !important;
    bottom: 1rem !important;
}

#globe .maplibregl-ctrl-bottom-right .maplibregl-ctrl {
    margin: 0 0 0 10px;
}

#globe .maplibregl-ctrl-bottom-right .maplibregl-ctrl-attrib {
    max-width: 24rem;
    border-radius: 0.375rem;
    background: rgba(255, 255, 255, 0.68);
    color: #09090b;
    backdrop-filter: blur(12px);
    font-size: 10px;
}

.dark #globe .maplibregl-ctrl-bottom-right .maplibregl-ctrl-attrib {
    background: rgba(9, 9, 11, 0.68);
    color: #a1a1aa;
}

/* ── Markers ── */

.gog-marker {
    position: relative;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 2px solid #ffffff;
    border-radius: 999px;
    background: #18181b;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), 0 0 0 4px rgba(34, 211, 238, 0.08);
    color: #fafafa;
    font-size: 12px;
    font-weight: 600;
    transition: opacity 150ms ease, transform 150ms ease;
}

.gog-marker[data-online="false"] {
    background: #71717a;
    color: #fafafa;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Status border: green when online, red when live (live wins), white otherwise. */
.gog-marker[data-online="true"] {
    border-color: #22c55e;
}

.gog-marker[data-live="true"] {
    border-color: #ef4444;
}

.gog-marker.is-dimmed {
    opacity: 0.2;
    filter: saturate(0.4);
}

.gog-marker.is-hidden-backside {
    opacity: 0;
    pointer-events: none;
}

.gog-marker:hover {
    transform: translateY(-2px) scale(1.08);
}

/* ── Popup ── */

.gog-popup .maplibregl-popup-content {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.95);
    color: #09090b;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(16px);
    padding: 12px;
}

.dark .gog-popup .maplibregl-popup-content {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(9, 9, 11, 0.92);
    color: #fafafa;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.gog-popup .maplibregl-popup-tip {
    border-top-color: rgba(255, 255, 255, 0.95);
}

.dark .gog-popup .maplibregl-popup-tip {
    border-top-color: rgba(9, 9, 11, 0.92);
}

.gog-popup-muted {
    color: #71717a;
}

.dark .gog-popup-muted {
    color: #a1a1aa;
}

/* Hide the MapLibre attribution credit in the bottom-right corner. */
.maplibregl-ctrl-attrib,
.maplibregl-ctrl-attrib.maplibregl-compact {
    display: none !important;
}

/* ── Broadcast message stream (left rail) ── */

.gog-broadcast-stream {
    pointer-events: none;
    display: flex !important;
    flex-direction: column;
    overflow: hidden;
}

.gog-broadcast-stream-feed {
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    /* Force-hide the scrollbar while keeping the section scrollable. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.gog-broadcast-stream-feed::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

/* Bottom-anchor: the first (oldest) message takes up the leftover top space so
   the whole stack sits at the bottom; the section still scrolls once it
   overflows (unlike justify-content:flex-end, which blocks scrolling). */
.gog-broadcast-stream-feed > :first-child {
    margin-top: auto;
}

.gog-broadcast-msg {
    /* Cardless text item; fade the content out from left to right. */
    pointer-events: auto;
    flex: 0 0 auto;
    color: #18181b;
    font-size: 13px;
    line-height: 1.35;
    overflow: hidden;
    padding: 5px 0;
    -webkit-mask-image: linear-gradient(to right, #000 55%, transparent 95%);
    mask-image: linear-gradient(to right, #000 55%, transparent 95%);
}

.gog-broadcast-msg-new {
    animation: gog-broadcast-in 320ms ease-out;
}

/* Each line (header / message) stays on one line and clips for the fade. */
.gog-broadcast-msg > div {
    white-space: nowrap;
    overflow: hidden;
}

.gog-broadcast-msg .gog-broadcast-text {
    margin-top: 1px;
}

/* Subtle divider between messages. */
.gog-broadcast-msg + .gog-broadcast-msg {
    border-top: 1px solid rgba(24, 24, 27, 0.1);
}

.dark .gog-broadcast-msg {
    color: #f4f4f5;
}

.dark .gog-broadcast-msg + .gog-broadcast-msg {
    border-top-color: rgba(255, 255, 255, 0.1);
}

.gog-broadcast-msg .gog-broadcast-name {
    font-weight: 600;
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    font-size: inherit;
    vertical-align: middle;
}

.gog-broadcast-msg .gog-broadcast-name:hover {
    text-decoration: underline;
}

.gog-broadcast-msg .gog-broadcast-meta {
    opacity: 0.65;
}

.gog-broadcast-accept {
    display: inline-grid;
    place-items: center;
    vertical-align: middle;
    height: 18px;
    width: 18px;
    border-radius: 9999px;
    border: 1px solid rgba(16, 185, 129, 0.4);
    color: #059669;
    background: rgba(16, 185, 129, 0.08);
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;
}

.gog-broadcast-accept:hover {
    background: rgba(16, 185, 129, 0.18);
}

.dark .gog-broadcast-accept {
    color: #34d399;
    border-color: rgba(52, 211, 153, 0.35);
}

.gog-broadcast-newmsgs {
    pointer-events: auto;
    align-self: center;
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 9999px;
    border: 1px solid rgba(228, 228, 231, 0.9);
    background: rgba(255, 255, 255, 0.95);
    color: #18181b;
    font-size: 12px;
    font-weight: 500;
    padding: 5px 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    animation: gog-broadcast-in 200ms ease-out;
}

.dark .gog-broadcast-newmsgs {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(24, 24, 27, 0.95);
    color: #f4f4f5;
}

@keyframes gog-broadcast-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Tom Select (games multi-select) — match gog-input theming */
.ts-wrapper {
    font-size: 13px;
}

.ts-wrapper .ts-control {
    border-radius: 0.375rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.9);
    color: #09090b;
    padding: 0.25rem 0.5rem;
    min-height: 2.25rem;
    box-shadow: none;
}

.dark .ts-wrapper .ts-control {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(9, 9, 11, 0.6);
    color: #fafafa;
}

.ts-wrapper.focus .ts-control {
    border-color: #22d3ee;
    box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.15);
}

.ts-control input,
.dark .ts-control input {
    color: inherit !important;
}

.ts-wrapper .ts-control .item {
    border-radius: 0.375rem;
    background: #18181b;
    color: #fafafa;
    padding: 0.05rem 0.45rem;
}

.dark .ts-wrapper .ts-control .item {
    background: rgba(255, 255, 255, 0.12);
    color: #fafafa;
}

/* The CDN tom-select stylesheet loads after this file, so the dropdown rules
   below use the .ts-wrapper prefix (and .option.active) to outrank its
   defaults — otherwise the default near-white hover background collides with
   our white option text in dark mode and the row becomes unreadable. */
.ts-wrapper .ts-dropdown {
    border-radius: 0.5rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: #ffffff;
    color: #09090b;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    padding: 0.25rem;
    margin-top: 0.25rem;
}

.dark .ts-wrapper .ts-dropdown {
    border-color: rgba(255, 255, 255, 0.1);
    background: #18181b;
    color: #fafafa;
}

.ts-wrapper .ts-dropdown .option,
.ts-wrapper .ts-dropdown .create {
    border-radius: 0.375rem;
    background: transparent;
    color: #09090b;
    padding: 0.4rem 0.5rem;
}

.dark .ts-wrapper .ts-dropdown .option,
.dark .ts-wrapper .ts-dropdown .create {
    color: #fafafa;
}

/* Hover / keyboard-active option — cyan tint with readable text in both themes.
   Covers the "Add new game…" (.create) row on the edit-profile picker too. */
.ts-wrapper .ts-dropdown .option.active,
.ts-wrapper .ts-dropdown .option:hover,
.ts-wrapper .ts-dropdown .create.active,
.ts-wrapper .ts-dropdown .create:hover {
    background: rgba(34, 211, 238, 0.12);
    color: #0e7490;
}

.dark .ts-wrapper .ts-dropdown .option.active,
.dark .ts-wrapper .ts-dropdown .option:hover,
.dark .ts-wrapper .ts-dropdown .create.active,
.dark .ts-wrapper .ts-dropdown .create:hover {
    background: rgba(34, 211, 238, 0.18);
    color: #fafafa;
}

.ts-wrapper .ts-dropdown .no-results,
.ts-wrapper .ts-dropdown .optgroup-header {
    color: #71717a;
    padding: 0.4rem 0.5rem;
}