/* ==========================================================================
   KenWi UI — Liquid Glass
   Homepage skin (index.html). Load LAST in <head>, after every other stylesheet.

   Conventions
   - Pure CSS: no class name, id or data-attribute used by the JS is renamed.
   - Every component selector is prefixed with `html:root`. That adds (0,1,1)
     of specificity, which beats the base rules and ties (then wins, by load
     order) with the per-theme rules such as `html[data-theme="light"] .x`.
     !important is only used where the original CSS already uses it
     (settings switches).
   - Dark mode only: the theme variables are pinned to the KenWi palette for
     every data-theme value.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Tokens
   -------------------------------------------------------------------------- */
:root {
    --kw-bg: #0a0a0f;
    --kw-bg-elev: #111118;
    /* ACCENT — change these 6 lines to recolour the whole UI
       (keep kenwiui-map.css in sync) */
    --kw-accent: #7c5cff;            /* main: electric violet */
    --kw-accent-hi: #9d86ff;         /* lighter: gradients top, borders */
    --kw-accent-lo: #5a3cf0;         /* darker: gradients bottom */
    --kw-accent-rgb: 124, 92, 255;   /* = --kw-accent, for glows */
    --kw-accent-soft-rgb: 196, 181, 255; /* pale tint: rims, sheen */
    --kw-bg-tint: #140c2a;           /* background glow tint */

    --kw-text: #f5f5f7;
    --kw-text-2: rgba(235, 235, 245, 0.64);
    --kw-text-3: rgba(235, 235, 245, 0.38);

    --kw-glass: rgba(255, 255, 255, 0.06);
    --kw-glass-hover: rgba(255, 255, 255, 0.11);
    --kw-glass-dark: rgba(20, 20, 28, 0.62);
    --kw-glass-deep: rgba(16, 16, 22, 0.78);
    --kw-stroke: rgba(255, 255, 255, 0.15);
    --kw-stroke-soft: rgba(255, 255, 255, 0.08);
    --kw-stroke-hi: rgba(255, 255, 255, 0.26);
    --kw-blur: blur(20px) saturate(180%);
    --kw-blur-strong: blur(32px) saturate(180%);

    /* Specular: top-edge light + faint inner rim */
    --kw-specular: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.04) 38%, rgba(255, 255, 255, 0) 60%);
    --kw-rim: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.04);

    --kw-shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.32);
    --kw-shadow: 0 12px 32px rgba(0, 0, 0, 0.42), 0 2px 8px rgba(0, 0, 0, 0.28);
    --kw-shadow-lg: 0 28px 70px rgba(0, 0, 0, 0.55), 0 6px 18px rgba(0, 0, 0, 0.32);
    --kw-glow: 0 0 0 1px rgba(var(--kw-accent-rgb), 0.55), 0 18px 48px -8px rgba(var(--kw-accent-rgb), 0.45);

    --kw-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --kw-spring: cubic-bezier(0.34, 1.36, 0.64, 1);
    --kw-fast: 180ms;
    --kw-med: 320ms;
    --kw-slow: 560ms;

    --kw-font: -apple-system, "SF Pro Display", "Inter", system-ui, "Segoe UI", Roboto, sans-serif;
}

/* Pin every theme to the dark KenWi palette (existing CSS reads these vars). */
html,
html[data-theme] {
    color-scheme: dark;
    --bg-primary: #0a0a0f;
    --bg-secondary: #111118;
    --bg-tertiary: #17171f;
    --bg-hover: #20202b;
    --text-primary: #f5f5f7;
    --text-secondary: rgba(235, 235, 245, 0.64);
    --text-tertiary: rgba(235, 235, 245, 0.38);
    --border-color: rgba(255, 255, 255, 0.08);
    --border-color-hover: rgba(255, 255, 255, 0.16);
    --accent-primary: var(--kw-accent);
    --accent-secondary: var(--kw-accent-hi);
    --accent-tertiary: rgb(var(--kw-accent-soft-rgb));
    --accent-glow: rgba(var(--kw-accent-rgb), 0.34);
    --accent-gradient: linear-gradient(135deg, var(--kw-accent) 0%, var(--kw-accent-hi) 100%);
    --active-bg: var(--kw-accent);
    --active-text: #ffffff;
    --active-border: var(--kw-accent-hi);
    --active-ring: rgba(var(--kw-accent-rgb), 0.42);
    --switch-off-bg: rgba(120, 120, 128, 0.32);
    --switch-off-border: rgba(255, 255, 255, 0.08);
    --switch-off-thumb: #ffffff;
    --switch-on-bg: var(--kw-accent);
    --switch-on-border: var(--kw-accent-hi);
    --switch-on-thumb: #ffffff;
    --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.38);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.48);
    --shadow-xl: 0 28px 70px rgba(0, 0, 0, 0.55);
    --glass-bg: rgba(20, 20, 28, 0.62);
    --glass-border: rgba(255, 255, 255, 0.15);
    --glass-backdrop: 20px;
    --background-end-color: var(--kw-bg-tint);
}

/* Default site font ("KenWi" option) becomes SF Pro / Inter.
   The other choices of the font selector keep working. */
html:root:not([data-site-font]),
html:root[data-site-font="custom1"] {
    --site-font: var(--kw-font);
}

/* --------------------------------------------------------------------------
   1. Page background
   -------------------------------------------------------------------------- */
html:root body {
    background-color: var(--kw-bg);
    color: var(--kw-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "cv11", "ss01";
}

html:root body::before {
    background-image:
        radial-gradient(75% 55% at 50% -12%, rgba(var(--kw-accent-rgb), 0.17) 0%, rgba(var(--kw-accent-rgb), 0) 62%),
        radial-gradient(45% 40% at 100% 100%, rgba(var(--kw-accent-rgb), 0.10) 0%, rgba(var(--kw-accent-rgb), 0) 70%),
        radial-gradient(45% 45% at 0% 80%, rgba(var(--kw-accent-soft-rgb), 0.05) 0%, rgba(var(--kw-accent-soft-rgb), 0) 70%),
        linear-gradient(180deg, #0a0a0f 0%, #0c0c13 100%);
}

/* --------------------------------------------------------------------------
   2. Navbar — floating glass bar
   -------------------------------------------------------------------------- */
html:root .app-navbar {
    position: sticky;
    top: 12px;
    z-index: 60;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 12px;
    padding: 8px;
    border: 1px solid var(--kw-stroke);
    border-radius: 24px;
    background: var(--kw-glass-dark);
    backdrop-filter: var(--kw-blur);
    -webkit-backdrop-filter: var(--kw-blur);
    box-shadow: var(--kw-rim), var(--kw-shadow), 0 20px 50px -24px rgba(var(--kw-accent-rgb), 0.35);
    isolation: isolate;
}

/* Specular sheet on top of the bar */
html:root .app-navbar::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--kw-specular);
    pointer-events: none;
}

/* KenWi wordmark in the (aria-hidden) left spacer */
html:root .navbar-spacer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 10px;
}

html:root .navbar-spacer::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgb(var(--kw-accent-soft-rgb)), var(--kw-accent) 60%, var(--kw-accent-lo));
    box-shadow: 0 0 12px rgba(var(--kw-accent-rgb), 0.85), 0 0 0 3px rgba(var(--kw-accent-rgb), 0.16);
    flex: none;
}

html:root .navbar-spacer::after {
    content: "KenWi";
    color: var(--kw-text);
    font-family: var(--kw-font);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

/* Maps | Ranking — segmented control */
html:root .main-nav {
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--kw-stroke-soft);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
}

html:root .main-nav-link {
    padding: 9px 18px;
    border-radius: 999px;
    color: var(--kw-text-2);
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    text-shadow: none;
    transition:
        color var(--kw-fast) var(--kw-ease),
        background-color var(--kw-med) var(--kw-ease),
        box-shadow var(--kw-med) var(--kw-ease),
        transform var(--kw-med) var(--kw-spring);
}

html:root .main-nav-link::after {
    display: none;
}

html:root .main-nav-link:hover {
    color: var(--kw-text);
    background: rgba(255, 255, 255, 0.07);
    text-shadow: none;
    transform: none;
}

html:root .main-nav-link.active {
    color: #ffffff;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 70%),
        rgba(var(--kw-accent-rgb), 0.22);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        inset 0 0 0 1px rgba(var(--kw-accent-rgb), 0.5),
        0 6px 18px -4px rgba(var(--kw-accent-rgb), 0.5);
    text-shadow: none;
}

html:root .main-nav-link:active {
    transform: scale(0.96);
}

/* Action buttons: Thème / Discord / Profil / Éditeur / Config */
html:root .navbar-actions {
    gap: 6px;
}

html:root .theme-toggle-btn,
html:root .discord-btn,
html:root .profile-btn,
html:root #rankingProfileBtn.profile-btn,
html:root .coin-editor-entry,
html:root .settings-btn {
    min-width: 38px;
    height: 38px;
    padding: 0 14px 0 38px;
    border: 1px solid var(--kw-stroke-soft);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--kw-text-2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition:
        color var(--kw-fast) var(--kw-ease),
        background-color var(--kw-med) var(--kw-ease),
        border-color var(--kw-med) var(--kw-ease),
        box-shadow var(--kw-med) var(--kw-ease),
        transform var(--kw-med) var(--kw-spring);
}

html:root .theme-toggle-btn > svg,
html:root .discord-btn > svg,
html:root .profile-btn > svg,
html:root .coin-editor-entry > svg,
html:root .settings-btn > svg {
    left: 12px;
    width: 18px;
    height: 18px;
}

html:root .theme-toggle-btn .moon-icon,
html:root .theme-toggle-btn .sun-icon,
html:root .theme-toggle-btn .gray-icon,
html:root .theme-toggle-btn .green-icon,
html:root .theme-toggle-btn .sunset-icon,
html:root .theme-toggle-btn .yellow-icon,
html:root .theme-toggle-btn .purple-icon,
html:root .theme-toggle-btn .midnight-icon {
    left: 21px;
}

html:root .profile-btn .ranking-profile-avatar {
    left: 7px;
    width: 24px;
    height: 24px;
    border: 1px solid rgba(var(--kw-accent-rgb), 0.5);
    background: rgba(var(--kw-accent-rgb), 0.22);
    color: #ffffff;
}

html:root .profile-btn .ranking-profile-avatar svg {
    width: 14px;
    height: 14px;
}

html:root .top-action-label {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: -0.005em;
}

html:root .theme-toggle-btn:hover,
html:root .discord-btn:hover,
html:root .profile-btn:hover,
html:root #rankingProfileBtn.profile-btn:hover,
html:root .coin-editor-entry:hover,
html:root .settings-btn:hover {
    color: #ffffff;
    background: var(--kw-glass-hover);
    border-color: var(--kw-stroke-hi);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 6px 18px rgba(0, 0, 0, 0.35);
    transform: translateY(-1px);
}

html:root .theme-toggle-btn:active,
html:root .discord-btn:active,
html:root .profile-btn:active,
html:root #rankingProfileBtn.profile-btn:active,
html:root .coin-editor-entry:active,
html:root .settings-btn:active {
    transform: scale(0.95);
}

html:root .settings-btn.is-open {
    color: #ffffff;
    background: rgba(var(--kw-accent-rgb), 0.22);
    border-color: rgba(var(--kw-accent-rgb), 0.55);
}

html:root .discord-btn:hover {
    background: rgba(88, 101, 242, 0.22);
    border-color: rgba(120, 132, 255, 0.5);
}

/* Focus rings (keyboard) */
html:root .main-nav-link:focus-visible,
html:root .theme-toggle-btn:focus-visible,
html:root .discord-btn:focus-visible,
html:root .profile-btn:focus-visible,
html:root .coin-editor-entry:focus-visible,
html:root .settings-btn:focus-visible,
html:root .map-edition-btn:focus-visible,
html:root .map-selector-arrow:focus-visible,
html:root .favorite-btn:focus-visible,
html:root .play-button:focus-visible {
    outline: 2px solid rgba(var(--kw-accent-rgb), 0.9);
    outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   3. Watermark "Développé par KenWi" (typewriter is JS — untouched)
   -------------------------------------------------------------------------- */
html:root .developer-watermark-line {
    color: var(--kw-text);
    font-size: clamp(1.35rem, 3vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    text-shadow: none;
    opacity: 1;
    filter: drop-shadow(0 0 24px rgba(var(--kw-accent-rgb), 0.28));
}

html:root .developer-watermark-text {
    background: linear-gradient(180deg, #ffffff 0%, #ffffff 40%, rgba(255, 255, 255, 0.55) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

html:root .developer-watermark-cursor {
    color: var(--kw-accent);
    -webkit-text-fill-color: var(--kw-accent);
    text-shadow: 0 0 14px rgba(var(--kw-accent-rgb), 0.9);
}

/* --------------------------------------------------------------------------
   4. Search bar — glass input, red glow on focus
   -------------------------------------------------------------------------- */
html:root .map-search {
    width: min(500px, calc(100vw - 32px));
    color: var(--kw-text);
}

html:root .map-search-field,
html:root #mapSearch .map-search-field {
    position: relative;
    min-height: 50px;
    padding: 0 10px 0 18px;
    border: 1px solid var(--kw-stroke);
    border-radius: 999px;
    background: var(--kw-glass);
    backdrop-filter: var(--kw-blur);
    -webkit-backdrop-filter: var(--kw-blur);
    box-shadow: var(--kw-rim), var(--kw-shadow-sm);
    transition:
        border-color var(--kw-med) var(--kw-ease),
        box-shadow var(--kw-med) var(--kw-ease),
        background-color var(--kw-med) var(--kw-ease);
}

html:root .map-search-field::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--kw-specular);
    opacity: 0.7;
    pointer-events: none;
}

html:root .map-search-field:hover {
    border-color: var(--kw-stroke-hi);
}

html:root .map-search-field:focus-within,
html:root #mapSearch .map-search-field:focus-within {
    border-color: rgba(var(--kw-accent-rgb), 0.7);
    background: rgba(255, 255, 255, 0.08);
    box-shadow:
        var(--kw-rim),
        0 0 0 4px rgba(var(--kw-accent-rgb), 0.16),
        0 0 32px rgba(var(--kw-accent-rgb), 0.32),
        var(--kw-shadow-sm);
}

html:root .map-search-icon {
    position: relative;
    color: var(--kw-text-3);
    transition: color var(--kw-fast) var(--kw-ease);
}

html:root .map-search-field:focus-within .map-search-icon {
    color: var(--kw-accent);
}

html:root #mapSearchInput {
    position: relative;
    color: var(--kw-text);
    font-size: 0.94rem;
    font-weight: 500;
    caret-color: var(--kw-accent);
}

html:root #mapSearchInput::placeholder {
    color: var(--kw-text-3);
}

html:root .map-search-shortcut {
    position: relative;
    margin-right: 4px;
    padding: 1px 8px;
    border: 1px solid var(--kw-stroke);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--kw-text-2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

html:root .map-search-clear {
    position: relative;
    border-radius: 999px;
    color: var(--kw-text-2);
}

html:root .map-search-clear:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

html:root .map-search-panel {
    top: calc(100% + 10px);
    border: 1px solid var(--kw-stroke);
    border-radius: 22px;
    background: rgba(16, 16, 22, 0.9);
    backdrop-filter: var(--kw-blur-strong);
    -webkit-backdrop-filter: var(--kw-blur-strong);
    box-shadow: var(--kw-rim), var(--kw-shadow-lg);
    transform-origin: top center;
    animation: kwPopIn var(--kw-med) var(--kw-spring) both;
}

html:root .map-search-meta {
    color: var(--kw-text-3);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

html:root .map-search-results {
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

html:root .map-search-option {
    border-radius: 14px;
    transition: background-color var(--kw-fast) var(--kw-ease), border-color var(--kw-fast) var(--kw-ease);
}

html:root .map-search-option:hover,
html:root .map-search-option[aria-selected="true"] {
    border-color: var(--kw-stroke-soft);
    background: rgba(255, 255, 255, 0.08);
}

html:root .map-search-option[aria-selected="true"] {
    box-shadow: inset 2px 0 0 var(--kw-accent);
}

html:root .map-search-option img {
    border-radius: 8px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
}

html:root .map-search-option-go {
    color: var(--kw-text-3);
}

html:root .map-search-empty {
    color: var(--kw-text-2);
}

/* --------------------------------------------------------------------------
   5. Enhanced / Legacy — glass switch with sliding thumb
   -------------------------------------------------------------------------- */
html:root .map-edition-switch {
    margin-bottom: 6px;
    color: var(--kw-text-2);
}

html:root .map-edition-tabs {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: 4px;
    border: 1px solid var(--kw-stroke);
    border-radius: 999px;
    background: var(--kw-glass);
    backdrop-filter: var(--kw-blur);
    -webkit-backdrop-filter: var(--kw-blur);
    box-shadow: var(--kw-rim), var(--kw-shadow-sm);
    isolation: isolate;
}

/* The thumb */
html:root .map-edition-tabs::before {
    content: "";
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    z-index: 0;
    width: calc(50% - 4px);
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.04) 55%, rgba(255, 255, 255, 0) 100%),
        rgba(var(--kw-accent-rgb), 0.55);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 0 0 1px rgba(var(--kw-accent-soft-rgb), 0.45),
        0 6px 20px -4px rgba(var(--kw-accent-rgb), 0.65);
    transition: transform var(--kw-slow) var(--kw-spring);
    pointer-events: none;
}

html:root .map-edition-tabs:has(.map-edition-btn[data-map-edition="legacy"].active)::before {
    transform: translateX(100%);
}

html:root .map-edition-btn {
    position: relative;
    z-index: 1;
    min-width: 112px;
    min-height: 36px;
    padding: 8px 18px;
    border-radius: 999px;
    background: transparent;
    color: var(--kw-text-2);
    font-size: 0.84rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    transition: color var(--kw-med) var(--kw-ease), transform var(--kw-med) var(--kw-spring);
}

html:root .map-edition-btn:hover {
    color: #ffffff;
}

html:root .map-edition-btn.active {
    background: transparent;
    color: #ffffff;
}

html:root .map-edition-btn:active {
    transform: scale(0.95);
}

/* Browsers without :has() — highlight the active button itself */
@supports not selector(:has(*)) {
    html:root .map-edition-tabs::before {
        display: none;
    }

    html:root .map-edition-btn.active {
        background: rgba(var(--kw-accent-rgb), 0.55);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
    }
}

/* --------------------------------------------------------------------------
   6. Map cards — glass over artwork, lift + glow, refraction
   -------------------------------------------------------------------------- */
html:root .map-card {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 22px;
    background: var(--kw-bg-elev);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3);
    isolation: isolate;
}

/* Glass bevel: specular top light, rim light, soft vignette (above the image) */
html:root .map-card::before {
    border-radius: inherit;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.05) 16%, rgba(255, 255, 255, 0) 32%),
        linear-gradient(180deg, rgba(10, 10, 15, 0) 52%, rgba(10, 10, 15, 0.42) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.34),
        inset 0 -1px 0 rgba(255, 255, 255, 0.06),
        inset 1px 0 0 rgba(255, 255, 255, 0.07),
        inset -1px 0 0 rgba(255, 255, 255, 0.07),
        inset 0 0 22px rgba(255, 255, 255, 0.05);
}

/* Light sweep that crosses the glass on hover */
html:root .map-card::after {
    content: "";
    position: absolute;
    inset: -20%;
    z-index: 7;
    background: linear-gradient(105deg,
            rgba(255, 255, 255, 0) 38%,
            rgba(255, 255, 255, 0.16) 46%,
            rgba(var(--kw-accent-soft-rgb), 0.08) 50%,
            rgba(255, 255, 255, 0) 58%);
    transform: translateX(-70%);
    opacity: 0;
    pointer-events: none;
    transition: transform 900ms var(--kw-ease), opacity 400ms var(--kw-ease);
    mix-blend-mode: screen;
}

html:root .map-card:hover::after {
    transform: translateX(70%);
    opacity: 1;
}

/* Card overflow is visible while its version menu is open: hide the sweep */
html:root .map-card.mode-menu-open::after {
    display: none;
}

html:root .banner {
    background: #0d0d14;
}

html:root .banner::after {
    height: 58%;
    background: linear-gradient(to top, rgba(10, 10, 15, 0.82) 0%, rgba(10, 10, 15, 0.25) 55%, rgba(10, 10, 15, 0) 100%);
}

/* Refraction: the artwork sits slightly zoomed "behind" the glass and shifts
   under it on hover, like it is seen through a lens. */
html:root .banner img {
    color: transparent; /* hides alt text when an artwork file is missing */
    transform: scale(1.04);
    filter: saturate(1.05) contrast(1.02) brightness(0.92);
    transition: transform 700ms var(--kw-ease), filter var(--kw-med) var(--kw-ease);
}

html:root .map-card:hover .banner img,
html:root .map-selector-track .map-card.is-center:hover .banner img {
    transform: scale(1.1) translate3d(0, -2%, 0);
    filter: saturate(1.15) contrast(1.04) brightness(1);
}

html:root .map-selector-track .map-card.is-center .banner img {
    transform: scale(1.06);
    filter: saturate(1.12) contrast(1.03) brightness(0.98);
}

/* Frosted glass strip under the title (blurs the artwork behind it) */
html:root .card-content {
    padding: 14px 14px 14px 16px;
    isolation: isolate;
}

html:root .card-content::before {
    content: "";
    position: absolute;
    inset: -18px 0 0 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(14, 14, 20, 0) 0%, rgba(14, 14, 20, 0.35) 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 42%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 42%);
    pointer-events: none;
}

/* Only visible cards get the real backdrop blur (keeps scrolling at 60fps) */
html:root .map-card.is-center .card-content::before,
html:root .map-card.is-near .card-content::before,
html:root .map-card:hover .card-content::before {
    backdrop-filter: blur(14px) saturate(170%);
    -webkit-backdrop-filter: blur(14px) saturate(170%);
}

html:root .map-name {
    color: #ffffff;
    font-size: 0.98rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
}

/* Version dropdown trigger — glass chip */
html:root .map-mode-trigger,
html:root .map-mode-control[data-mode] .map-mode-trigger {
    grid-template-columns: 6px minmax(0, 1fr) 7px;
    gap: 7px;
    min-height: 24px;
    padding: 4px 10px 4px 9px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.86);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition:
        color var(--kw-fast) var(--kw-ease),
        background-color var(--kw-fast) var(--kw-ease),
        border-color var(--kw-fast) var(--kw-ease);
}

html:root .map-mode-mark {
    width: 6px;
    height: 6px;
    border: 0;
    background: var(--kw-accent);
    box-shadow: 0 0 6px rgba(var(--kw-accent-rgb), 0.9);
    opacity: 1;
}

html:root .map-mode-trigger:hover,
html:root .map-mode-trigger:focus-visible,
html:root .map-mode-control.is-open .map-mode-trigger {
    color: #ffffff;
    border-color: rgba(var(--kw-accent-rgb), 0.6);
    background: rgba(var(--kw-accent-rgb), 0.22);
}

/* Version dropdown menu (inline or floated to <body> by the JS) */
html:root .map-mode-menu {
    padding: 5px;
    border: 1px solid var(--kw-stroke);
    border-radius: 16px;
    background: var(--kw-glass-deep);
    backdrop-filter: var(--kw-blur-strong);
    -webkit-backdrop-filter: var(--kw-blur-strong);
    box-shadow: var(--kw-rim), var(--kw-shadow-lg);
    transition:
        opacity 160ms var(--kw-ease),
        visibility 160ms var(--kw-ease),
        transform 320ms var(--kw-spring);
}

html:root .map-mode-option {
    min-height: 36px;
    padding: 8px 10px;
    border-radius: 11px;
    color: var(--kw-text-2);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.03em;
}

html:root .map-mode-option:hover,
html:root .map-mode-option:focus-visible {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

html:root .map-mode-option.active {
    color: #ffffff;
    background: rgba(var(--kw-accent-rgb), 0.18);
    box-shadow: inset 0 0 0 1px rgba(var(--kw-accent-rgb), 0.35);
}

html:root .map-mode-option.active .map-mode-option-mark {
    border-color: var(--kw-accent);
    background: var(--kw-accent);
}

/* Favourite star — glass bubble */
html:root .favorite-btn {
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.82);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 4px 12px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    transition:
        color var(--kw-fast) var(--kw-ease),
        background-color var(--kw-fast) var(--kw-ease),
        border-color var(--kw-fast) var(--kw-ease),
        box-shadow var(--kw-med) var(--kw-ease),
        transform var(--kw-med) var(--kw-spring);
}

html:root .favorite-btn:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.3);
    transform: scale(1.08);
}

html:root .favorite-btn.active {
    color: #ffffff;
    background: linear-gradient(180deg, var(--kw-accent-hi), var(--kw-accent));
    border-color: rgba(var(--kw-accent-soft-rgb), 0.7);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 4px 16px rgba(var(--kw-accent-rgb), 0.55);
}

/* Carousel states (classes set by the JS: is-center / is-near / is-far) */
html:root .map-selector-track .map-card {
    transition:
        transform var(--kw-slow) var(--kw-spring),
        opacity var(--kw-med) var(--kw-ease),
        filter var(--kw-med) var(--kw-ease),
        box-shadow var(--kw-med) var(--kw-ease),
        border-color var(--kw-med) var(--kw-ease);
}

html:root .map-selector-track .map-card.is-center,
html:root .map-card.selected {
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.08),
        0 26px 60px -14px rgba(var(--kw-accent-rgb), 0.42),
        0 18px 40px rgba(0, 0, 0, 0.5);
}

html:root .map-card:hover,
html:root .map-selector-track .map-card.is-center:hover {
    border-color: rgba(var(--kw-accent-rgb), 0.7);
    box-shadow:
        0 0 0 1px rgba(var(--kw-accent-rgb), 0.45),
        0 30px 70px -12px rgba(var(--kw-accent-rgb), 0.55),
        0 20px 44px rgba(0, 0, 0, 0.5);
}

html:root .map-selector-track .map-card:hover,
html:root .map-selector-track .map-card.selected,
html:root .map-selector-track .map-card.selected:hover {
    transform: scale(0.98) translateY(-4px);
}

html:root .map-selector-track .map-card.is-center:hover,
html:root .map-selector-track .map-card.is-center.selected,
html:root .map-selector-track .map-card.is-center.selected:hover {
    transform: scale(1.1) translateY(-8px);
}

html:root .map-selector-track .map-card.is-center.selected:not(:hover) {
    transform: scale(1.08) translateY(-2px);
}

html:root .map-selector-track .map-card:not(.is-center):hover {
    border-color: rgba(255, 255, 255, 0.28);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}

html:root .map-selector-track .map-card.is-far {
    opacity: 0.3;
}

/* Carousel arrows — glass orbs */
html:root .map-selector-arrow {
    width: 46px;
    height: 46px;
    border: 1px solid var(--kw-stroke);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.02) 60%),
        rgba(20, 20, 28, 0.5);
    color: #ffffff;
    box-shadow: var(--kw-rim), var(--kw-shadow-sm);
    backdrop-filter: var(--kw-blur);
    -webkit-backdrop-filter: var(--kw-blur);
    transition:
        transform var(--kw-med) var(--kw-spring),
        background-color var(--kw-fast) var(--kw-ease),
        border-color var(--kw-fast) var(--kw-ease),
        box-shadow var(--kw-med) var(--kw-ease),
        opacity var(--kw-fast) var(--kw-ease);
}

html:root .map-selector-arrow svg {
    width: 20px;
    height: 20px;
    stroke-width: 2.2;
}

html:root .map-selector-arrow:hover {
    border-color: rgba(var(--kw-accent-rgb), 0.6);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.02) 60%),
        rgba(var(--kw-accent-rgb), 0.28);
    box-shadow: var(--kw-rim), 0 10px 30px -6px rgba(var(--kw-accent-rgb), 0.6);
    transform: translateY(-50%) scale(1.06);
}

html:root .map-selector-arrow:active {
    transform: translateY(-50%) scale(0.92);
}

/* --------------------------------------------------------------------------
   7. Play button — glass pill, turns red on hover
   -------------------------------------------------------------------------- */
html:root .mode-toggle,
html:root .map-selector-container .mode-toggle,
html:root .map-selector-container .mode-toggle.play-only {
    padding: 5px;
    gap: 4px;
    border: 1px solid var(--kw-stroke);
    border-radius: 999px;
    background: var(--kw-glass-dark);
    backdrop-filter: var(--kw-blur);
    -webkit-backdrop-filter: var(--kw-blur);
    box-shadow: var(--kw-rim), var(--kw-shadow), 0 18px 50px -20px rgba(var(--kw-accent-rgb), 0.5);
}

html:root .mode-toggle-item {
    border-radius: 999px;
    color: var(--kw-text-2);
    font-weight: 600;
}

html:root .mode-toggle-item:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

html:root .mode-toggle-item.active {
    color: #ffffff;
    background: rgba(var(--kw-accent-rgb), 0.55);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

html:root .play-button {
    position: relative;
    width: 112px;
    height: 50px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.06) 100%);
    color: #ffffff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        inset 0 -8px 16px rgba(0, 0, 0, 0.18),
        0 6px 18px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    isolation: isolate;
    animation: none;
    transition:
        transform var(--kw-med) var(--kw-spring),
        box-shadow var(--kw-med) var(--kw-ease),
        border-color var(--kw-med) var(--kw-ease),
        background-color var(--kw-med) var(--kw-ease);
}

/* Red layer, faded in on hover (opacity = GPU-cheap) */
html:root .play-button::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 52%),
        linear-gradient(180deg, var(--kw-accent-hi) 0%, var(--kw-accent) 55%, var(--kw-accent-lo) 100%);
    opacity: 0;
    transition: opacity var(--kw-med) var(--kw-ease);
}

/* Specular reflection: glossy upper half */
html:root .play-button::after {
    content: "";
    position: absolute;
    top: 1px;
    left: 10%;
    right: 10%;
    height: 46%;
    z-index: 0;
    border-radius: 999px 999px 40% 40%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0));
    pointer-events: none;
}

html:root .play-button svg {
    position: relative;
    z-index: 1;
    width: 22px;
    height: 22px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

html:root .play-button:hover {
    border-color: rgba(var(--kw-accent-soft-rgb), 0.7);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        0 0 0 4px rgba(var(--kw-accent-rgb), 0.16),
        0 12px 36px -4px rgba(var(--kw-accent-rgb), 0.75);
    transform: scale(1.05);
    animation: none;
}

html:root .play-button:hover::before {
    opacity: 1;
}

html:root .play-button:active {
    transform: scale(0.95);
}

/* Breathing halo around the dock (opacity/transform only) */
html:root .map-selector-container .mode-toggle.play-only {
    position: relative;
}

html:root .map-selector-container .mode-toggle.play-only::after {
    content: "";
    position: absolute;
    inset: -6px;
    z-index: -1;
    border-radius: 999px;
    box-shadow: 0 0 28px 2px rgba(var(--kw-accent-rgb), 0.45);
    opacity: 0.35;
    animation: kwBreath 3.2s ease-in-out infinite;
    pointer-events: none;
}

html:root .map-selector-container .bottom-controls {
    bottom: 30px;
}

/* --------------------------------------------------------------------------
   8. Footer
   -------------------------------------------------------------------------- */
html:root .footer {
    position: relative;
    color: var(--kw-text-3);
    font-size: 0.74rem;
    border-top: 0;
}

html:root .footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: min(520px, 80%);
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0));
}

html:root .footer a:hover {
    color: var(--kw-text);
}

/* --------------------------------------------------------------------------
   9. Scrollbar — thin glass
   -------------------------------------------------------------------------- */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.16);
    border: 0;
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--kw-accent-rgb), 0.7);
}

::-webkit-scrollbar-corner {
    background: transparent;
}

@supports not selector(::-webkit-scrollbar) {
    html {
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
    }
}

::selection {
    background: rgba(var(--kw-accent-rgb), 0.4);
    color: #ffffff;
}

/* --------------------------------------------------------------------------
   10. Modals (settings, Discord invite, device choice) — same glass family
   -------------------------------------------------------------------------- */
html:root .settings-popup-overlay,
html:root .discord-invite-overlay,
html:root .device-choice-overlay {
    background: rgba(6, 6, 10, 0.55);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
}

html:root .discord-invite-card,
html:root .device-choice-card {
    position: relative;
    border: 1px solid var(--kw-stroke);
    border-radius: 28px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 28%),
        rgba(18, 18, 26, 0.78);
    backdrop-filter: var(--kw-blur-strong);
    -webkit-backdrop-filter: var(--kw-blur-strong);
    box-shadow: var(--kw-rim), var(--kw-shadow-lg), 0 30px 80px -30px rgba(var(--kw-accent-rgb), 0.45);
}

/* Settings panel. settings-panel.browser-*.css styles it with #settingsPopup
   selectors (and a few !important on the switches): we keep its layout and
   re-skin it through its own --settings-* variables + a few overrides. */
html:root #settingsPopup.settings-popup-overlay {
    --settings-bg: #13131b;
    --settings-surface: rgba(255, 255, 255, 0.06);
    --settings-line: rgba(255, 255, 255, 0.08);
    --settings-line-strong: rgba(255, 255, 255, 0.15);
    --settings-text: #f5f5f7;
    --settings-muted: rgba(235, 235, 245, 0.64);
    --settings-faint: rgba(235, 235, 245, 0.38);
    background: rgba(6, 6, 10, 0.55);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
}

html:root #settingsPopup .settings-popup-container {
    border: 1px solid var(--kw-stroke);
    border-radius: 28px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 22%),
        rgba(19, 19, 27, 0.84);
    backdrop-filter: var(--kw-blur-strong);
    -webkit-backdrop-filter: var(--kw-blur-strong);
    box-shadow: var(--kw-rim), var(--kw-shadow-lg), 0 30px 80px -30px rgba(var(--kw-accent-rgb), 0.45);
    transition: transform 420ms var(--kw-spring), opacity 220ms var(--kw-ease);
}

/* Let the glass show through the inner layers */
html:root #settingsPopup .settings-sidebar,
html:root #settingsPopup .settings-main,
html:root #settingsPopup .settings-card h3 {
    background: transparent;
}

html:root #settingsPopup .settings-sidebar {
    border-bottom-color: var(--kw-stroke-soft);
}

html:root #settingsPopup .settings-gear-icon {
    color: var(--kw-accent-hi);
    opacity: 1;
    filter: drop-shadow(0 0 8px rgba(var(--kw-accent-rgb), 0.6));
}

html:root #settingsPopup .settings-tab-btn {
    font-weight: 600;
    transition: color var(--kw-fast) var(--kw-ease), background-color var(--kw-med) var(--kw-ease);
}

html:root #settingsPopup .settings-tab-btn:hover {
    background: rgba(255, 255, 255, 0.04);
}

html:root #settingsPopup .settings-tab-btn.active {
    color: #ffffff;
    background: linear-gradient(180deg, rgba(var(--kw-accent-rgb), 0) 0%, rgba(var(--kw-accent-rgb), 0.14) 100%);
}

html:root #settingsPopup .settings-tab-btn.active::before {
    height: 3px;
    border-radius: 999px;
    background: var(--kw-accent);
    box-shadow: 0 0 12px rgba(var(--kw-accent-rgb), 0.9);
}

html:root #settingsPopup .settings-tab-btn.active svg {
    color: var(--kw-accent-hi);
    opacity: 1;
}

html:root #settingsPopup .settings-top-close {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--kw-stroke);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

html:root #settingsPopup .settings-card h3 {
    font-weight: 700;
}

html:root #settingsPopup .settings-card h3::before {
    color: var(--kw-accent-hi);
}

html:root #settingsPopup .switch-label {
    font-weight: 600;
}

/* iOS-style switches in the accent colour (original uses !important) */
html:root #settingsPopup .switch-label input[type="checkbox"] {
    width: 46px;
    height: 26px;
    border-color: rgba(255, 255, 255, 0.1) !important;
    background: rgba(120, 120, 128, 0.32) !important;
    transition: background-color var(--kw-med) var(--kw-ease), border-color var(--kw-med) var(--kw-ease), box-shadow var(--kw-med) var(--kw-ease);
}

html:root #settingsPopup .switch-label input[type="checkbox"]::before {
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: #ffffff !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35) !important;
    transition: transform 380ms var(--kw-spring);
}

html:root #settingsPopup .switch-label input[type="checkbox"]:checked {
    border-color: var(--kw-accent-hi) !important;
    background: var(--kw-accent) !important;
    box-shadow: 0 0 16px -2px rgba(var(--kw-accent-rgb), 0.7) !important;
}

html:root #settingsPopup .switch-label input[type="checkbox"]:checked::before {
    transform: translateX(20px);
    background: #ffffff !important;
}

/* Sliders */
html:root #settingsPopup input[type="range"] {
    height: 4px;
    border-radius: 999px;
}

html:root #settingsPopup input[type="range"]::-webkit-slider-thumb {
    border: 0;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(var(--kw-accent-rgb), 0.35), 0 2px 6px rgba(0, 0, 0, 0.4);
}

html:root #settingsPopup #volumeSlider {
    background: linear-gradient(90deg, var(--kw-accent) var(--volume-fill, 100%), var(--settings-line-strong) var(--volume-fill, 100%));
}

html:root #settingsPopup #volumeSlider::-webkit-slider-thumb {
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(var(--kw-accent-rgb), 0.35), 0 2px 6px rgba(0, 0, 0, 0.4);
}

html:root #settingsPopup .volume-percent-badge {
    border-color: rgba(var(--kw-accent-rgb), 0.45);
    background: rgba(var(--kw-accent-rgb), 0.16);
}

/* Inputs, selects, keycaps */
html:root #settingsPopup .font-selector:focus,
html:root #settingsPopup .resolution-input-group input:focus,
html:root #settingsPopup .key-input:focus {
    border-color: var(--kw-accent);
    box-shadow: 0 1px 0 var(--kw-accent);
}

html:root #settingsPopup .font-selector option,
html:root #settingsPopup .font-selector optgroup {
    background: #16161e;
}

html:root #settingsPopup .key-input {
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

html:root #settingsPopup .key-input:focus {
    box-shadow: 0 0 0 3px rgba(var(--kw-accent-rgb), 0.25);
}

/* Background picker + small buttons */
html:root #settingsPopup .background-option {
    border-radius: 14px;
}

html:root #settingsPopup .background-option.active {
    border-color: var(--kw-accent);
    box-shadow: inset 0 0 0 1px var(--kw-accent), 0 6px 18px -6px rgba(var(--kw-accent-rgb), 0.6);
}

html:root #settingsPopup .background-upload-btn,
html:root #settingsPopup .background-remove-btn {
    border-radius: 12px;
}

html:root #settingsPopup .saturation-preset-btn.active:not(:disabled),
html:root #settingsPopup .lang-chip.active {
    color: #ffffff;
    border-color: var(--kw-accent-hi);
    background: var(--kw-accent);
}

/* Footer */
html:root #settingsPopup .settings-popup-footer {
    border-top-color: var(--kw-stroke-soft);
    background: rgba(19, 19, 27, 0.72);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

html:root #settingsPopup .settings-cancel-btn {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--kw-stroke);
}

html:root #settingsPopup .settings-save-btn,
html:root #settingsPopup .settings-save-btn:hover {
    color: #ffffff;
    border-color: rgba(var(--kw-accent-soft-rgb), 0.5);
    background: linear-gradient(180deg, var(--kw-accent-hi), var(--kw-accent));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 8px 22px -6px rgba(var(--kw-accent-rgb), 0.7);
}

html:root #settingsPopup .settings-save-btn:hover {
    transform: translateY(-1px);
}

/* Auto-click warning modal (same panel family) */
html:root .auto-click-warning-modal {
    border: 1px solid var(--kw-stroke);
    border-radius: 24px;
    background: rgba(19, 19, 27, 0.86);
    backdrop-filter: var(--kw-blur-strong);
    -webkit-backdrop-filter: var(--kw-blur-strong);
    box-shadow: var(--kw-rim), var(--kw-shadow-lg);
}

html:root .auto-click-warning-media {
    border-radius: 14px;
}

html:root .auto-click-warning-confirm,
html:root .auto-click-warning-confirm:not(:disabled):hover {
    color: #ffffff;
    background: linear-gradient(180deg, var(--kw-accent-hi), var(--kw-accent));
}

html:root .device-choice-option {
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition: border-color var(--kw-fast) var(--kw-ease), background-color var(--kw-fast) var(--kw-ease), transform var(--kw-med) var(--kw-spring), box-shadow var(--kw-med) var(--kw-ease);
}

html:root .device-choice-option:hover,
html:root .device-choice-option:focus-visible {
    border-color: rgba(var(--kw-accent-rgb), 0.7);
    background: rgba(var(--kw-accent-rgb), 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 12px 30px -10px rgba(var(--kw-accent-rgb), 0.6);
    transform: translateY(-2px);
}

html:root .device-choice-option:hover .device-choice-icon {
    color: var(--kw-accent-hi);
}

/* --------------------------------------------------------------------------
   10b. Ranking view — glass table (neutralises the "sunset" red table)
   -------------------------------------------------------------------------- */
html:root .ranking-table {
    border: 1px solid var(--kw-stroke);
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 30%),
        rgba(20, 20, 28, 0.62);
    backdrop-filter: var(--kw-blur);
    -webkit-backdrop-filter: var(--kw-blur);
    box-shadow: var(--kw-rim), var(--kw-shadow);
    overflow: hidden;
}

html:root .ranking-head {
    background: rgba(255, 255, 255, 0.05);
    color: var(--kw-text-2);
    border-bottom: 1px solid var(--kw-stroke-soft);
}

html:root .ranking-body .ranking-row:nth-child(odd) {
    background: rgba(255, 255, 255, 0.02);
}

html:root .ranking-body .ranking-row:nth-child(even) {
    background: transparent;
}

html:root .ranking-body .ranking-row:hover {
    background: rgba(var(--kw-accent-rgb), 0.12);
}

html:root .ranking-version-tabs {
    border-color: var(--kw-stroke);
    background: var(--kw-glass);
    backdrop-filter: var(--kw-blur);
    -webkit-backdrop-filter: var(--kw-blur);
    box-shadow: var(--kw-rim);
}

html:root .ranking-version-btn {
    border-radius: 999px;
}

html:root .ranking-version-btn.active {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0) 60%),
        var(--kw-accent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 6px 18px -4px rgba(var(--kw-accent-rgb), 0.6);
}

/* --------------------------------------------------------------------------
   11. Keyframes
   -------------------------------------------------------------------------- */
@keyframes kwPopIn {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes kwBreath {
    0%, 100% {
        opacity: 0.25;
        transform: scale(0.98);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.03);
    }
}

/* --------------------------------------------------------------------------
   12. Responsive
   -------------------------------------------------------------------------- */

/* Icon-only action buttons once labels no longer fit */
@media (max-width: 1100px) {
    html:root .top-action-label,
    html:root #rankingProfileBtn.profile-btn .top-action-label {
        display: none;
    }

    html:root .theme-toggle-btn,
    html:root .discord-btn,
    html:root .profile-btn,
    html:root #rankingProfileBtn.profile-btn,
    html:root .coin-editor-entry,
    html:root .settings-btn {
        width: 38px;
        min-width: 38px;
        padding: 0;
    }

    /* translateY-only transform kept so the gear spin keyframes stay aligned */
    html:root .discord-btn > svg,
    html:root .coin-editor-entry > svg,
    html:root .settings-btn > svg {
        left: calc(50% - 9px);
        transform: translateY(-50%);
    }

    html:root .theme-toggle-btn .moon-icon,
    html:root .theme-toggle-btn .sun-icon,
    html:root .theme-toggle-btn .gray-icon,
    html:root .theme-toggle-btn .green-icon,
    html:root .theme-toggle-btn .sunset-icon,
    html:root .theme-toggle-btn .yellow-icon,
    html:root .theme-toggle-btn .purple-icon,
    html:root .theme-toggle-btn .midnight-icon {
        left: 50%;
    }

    html:root .profile-btn .ranking-profile-avatar {
        left: calc(50% - 12px);
    }
}

@media (max-width: 860px) {
    html:root .app-navbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 6px;
        border-radius: 22px;
    }

    html:root .navbar-spacer {
        display: none;
    }
}

@media (max-width: 768px) {
    html:root .app-navbar {
        top: 8px;
    }

    html:root .main-nav {
        grid-row: auto;
    }

    html:root .main-nav-link {
        padding: 8px 14px;
        font-size: 0.84rem;
    }

    html:root .navbar-actions {
        grid-row: auto;
    }

    html:root .map-card {
        border-radius: 20px;
    }
}

/* Phones: nav on its own row, actions below — 375px safe */
@media (max-width: 520px) {
    html:root .app-navbar {
        flex-direction: column;
        gap: 6px;
        padding: 6px;
    }

    html:root .main-nav,
    html:root .navbar-actions {
        width: 100%;
        justify-content: center;
    }

    html:root .main-nav-link {
        flex: 1;
        text-align: center;
    }

    html:root .navbar-actions {
        gap: 4px;
    }

    html:root .theme-toggle-btn,
    html:root .discord-btn,
    html:root .profile-btn,
    html:root #rankingProfileBtn.profile-btn,
    html:root .coin-editor-entry,
    html:root .settings-btn {
        width: 40px;
        min-width: 40px;
        height: 40px;
    }

    html:root .map-search-field,
    html:root #mapSearch .map-search-field {
        min-height: 46px;
    }

    html:root .map-edition-btn {
        min-width: 104px;
        padding: 7px 14px;
    }

    html:root .map-name {
        font-size: 0.86rem;
    }

    html:root .map-selector-arrow {
        width: 40px;
        height: 40px;
    }

    html:root .play-button {
        width: 96px;
        height: 48px;
    }

    html:root .favorite-btn {
        width: 30px;
        height: 30px;
    }

    html:root .settings-popup-container,
    html:root .discord-invite-card,
    html:root .device-choice-card {
        border-radius: 22px;
    }
}

/* Touch screens: no hover sweep, no lift stuck after a tap */
@media (hover: none) {
    html:root .map-card::after {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    html:root .map-card,
    html:root .map-card::after,
    html:root .banner img,
    html:root .map-edition-tabs::before,
    html:root .play-button,
    html:root .play-button::before,
    html:root .map-selector-arrow,
    html:root .map-search-panel {
        transition: none;
        animation: none;
    }

    html:root .map-selector-container .mode-toggle.play-only::after {
        animation: none;
    }
}