/* ==========================================================================
   FORTNITE SPRITES — Runners Season Info Hub
   Fortnite-inspired dark palette + electric gradient accents.
   ========================================================================== */

:root {
    /* Surface */
    --fn-bg:         #0B0B14;
    --fn-panel:      #12122A;
    --fn-panel-2:    #191934;
    --fn-stroke:     #2A2A55;
    --fn-stroke-2:   #3B3B70;
    --fn-text:       #FFFFFF;
    --fn-text-dim:   #B8B8D0;
    --fn-text-mute:  #7B7B99;

    /* Brand */
    --fn-cyan:       #00E0FF;
    --fn-blue:       #1FA9FF;
    --fn-purple:     #7A2BFF;
    --fn-magenta:    #FF3D9A;
    --fn-yellow:     #FFD200;
    --fn-gradient:   linear-gradient(135deg, #00E0FF 0%, #7A2BFF 55%, #FF3D9A 100%);
    --fn-gradient-soft: linear-gradient(135deg, rgba(0,224,255,0.15) 0%, rgba(122,43,255,0.15) 55%, rgba(255,61,154,0.15) 100%);

    /* Rarity — bright accent (used for tabs, hover, tags) */
    --rarity-Rare:      #00A8FF;
    --rarity-Epic:      #C359FF;
    --rarity-Legendary: #FF8C1A;
    --rarity-Mythic:    #FADE55;
    --rarity-Special:   linear-gradient(135deg, #00E0FF 0%, #FF3D9A 100%);

    /* Rarity — card BODY gradients (deep, saturated — for Rare/Epic/Legendary/Mythic card fills) */
    --bg-Rare:      linear-gradient(180deg, #104273 0%, #081a35 100%);
    --bg-Epic:      linear-gradient(180deg, #4d1566 0%, #1e052c 100%);
    --bg-Legendary: linear-gradient(180deg, #743e0a 0%, #301702 100%);
    --bg-Mythic:    linear-gradient(180deg, #70531c 0%, #2e2107 100%);

    /* Rarity — CHIP colors (dark bg + bright text pair) */
    --chip-bg-Rare:      #004A8E;  --chip-text-Rare:      #00FFFB;
    --chip-bg-Epic:      #511D7F;  --chip-text-Epic:      #ED2BFF;
    --chip-bg-Legendary: #8E4122;  --chip-text-Legendary: #FBC568;
    --chip-bg-Mythic:    #80622A;  --chip-text-Mythic:    #FFF1A9;

    /* Theme — card BODY gradients (used ONLY for Special-rarity cards, tinted by theme) */
    --theme-bg-Basic:    linear-gradient(180deg, #1c2436 0%, #0c0f17 100%);
    --theme-bg-Gold:     linear-gradient(180deg, #61460b 0%, #241a02 100%);
    --theme-bg-Gummy:    linear-gradient(180deg, #6b183f 0%, #260514 100%);
    --theme-bg-Galaxy:   linear-gradient(180deg, #1f1145 0%, #080314 100%);
    --theme-bg-Gem:      linear-gradient(180deg, #114c47 0%, #041a18 100%);
    --theme-bg-Holofoil: linear-gradient(180deg, #204454 0%, #09171f 100%);
    --theme-bg-Rift:     linear-gradient(180deg, #154b5e 0%, #04161c 100%);
    --theme-bg-Cube:     linear-gradient(180deg, #3d0f5a 0%, #10041a 100%);
    --theme-bg-Quack:    linear-gradient(180deg, #6a5010 0%, #1e1502 100%);

    /* Fonts */
    --font-display: 'Anton', 'Oswald', 'Bebas Neue', system-ui, sans-serif;
    --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
    background: var(--fn-bg);
    color: var(--fn-text);
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 1.5;
    min-height: 100vh;
    overflow-x: hidden;
    background-image:
        radial-gradient(1200px 600px at 15% -10%, rgba(0,224,255,0.10), transparent 60%),
        radial-gradient(1000px 500px at 85% -5%, rgba(122,43,255,0.12), transparent 60%),
        radial-gradient(800px 400px at 50% 110%, rgba(255,61,154,0.08), transparent 60%);
    background-attachment: fixed;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ==========================================================================
   HERO
   ========================================================================== */

.fn-hero {
    position: relative;
    min-height: 44vh;
    padding: 0 6vw 48px;
    overflow: hidden;
    isolation: isolate;
}

.fn-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(11,11,20,0) 0%, rgba(11,11,20,0.8) 90%, var(--fn-bg) 100%),
        repeating-linear-gradient(90deg, rgba(0,224,255,0.04) 0 1px, transparent 1px 80px),
        repeating-linear-gradient(0deg, rgba(122,43,255,0.04) 0 1px, transparent 1px 80px);
    z-index: -2;
}

.fn-hero-glow {
    position: absolute;
    top: -30%;
    right: -10%;
    width: 800px;
    max-width: 100vw;
    height: 800px;
    background: radial-gradient(circle, rgba(122,43,255,0.35) 0%, rgba(122,43,255,0) 60%);
    filter: blur(20px);
    z-index: -1;
    pointer-events: none;
}

.fn-hero::after {
    content: '';
    position: absolute;
    bottom: -20%;
    left: -10%;
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(0,224,255,0.30) 0%, rgba(0,224,255,0) 60%);
    filter: blur(20px);
    z-index: -1;
    pointer-events: none;
}

/* Nav (sticky) */
.fn-nav {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 16px 0;
    margin: 0 -6vw 40px;
    padding-left: 6vw;
    padding-right: 6vw;
    max-width: 100vw;
    background: rgba(11, 11, 20, 0.75);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--fn-stroke);
    z-index: 50;
}

.fn-nav::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    background: var(--fn-gradient);
    opacity: 0.6;
}

.fn-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-display);
    font-size: 22px;
    letter-spacing: 0.06em;
    color: var(--fn-text);
}

.fn-logo img {
    width: 36px;
    height: 36px;
    filter: drop-shadow(0 0 8px rgba(0, 224, 255, 0.6));
}

.fn-menu {
    display: flex;
    list-style: none;
    gap: 8px;
    margin: 0 auto;
}

.fn-menu a {
    display: block;
    padding: 10px 18px;
    font-family: var(--font-display);
    font-size: 16px;
    letter-spacing: 0.1em;
    color: var(--fn-text-dim);
    position: relative;
    transition: color 0.2s;
}

.fn-menu a:hover { color: var(--fn-text); }

.fn-menu li.active a { color: var(--fn-text); }

.fn-menu li.active a::after {
    content: '';
    position: absolute;
    left: 18px; right: 18px; bottom: 4px;
    height: 3px;
    background: var(--fn-gradient);
    border-radius: 2px;
}

/* Language switcher */
.lang-switcher {
    position: relative;
    z-index: 100;
}

/* Nav explore dropdown */
.nav-dropdown-wrap {
    position: relative;
}
.nav-dropdown-trigger { cursor: pointer; }
.nav-dropdown {
    display: none;
    min-width: 380px;
    background: rgba(11, 11, 20, 0.98);
    border: 1px solid var(--fn-stroke);
    border-radius: 10px;
    padding: 16px;
    z-index: 9999;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
    gap: 24px;
}
.nav-dropdown-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.nav-dropdown-heading {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fn-cyan);
    margin-bottom: 6px;
}
.nav-dropdown a {
    display: block;
    padding: 4px 0;
    font-size: 13px;
    color: var(--fn-text-dim);
    transition: color 0.15s;
    white-space: nowrap;
}
.nav-dropdown a:hover { color: var(--fn-text); }
.lang-switcher-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    font-family: var(--font-display);
    font-size: 14px;
    letter-spacing: 0.08em;
    color: var(--fn-text-dim);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--fn-stroke);
    border-radius: 6px;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
}
.lang-switcher-btn:hover {
    color: var(--fn-text);
    border-color: var(--fn-cyan);
}
.lang-switcher-btn svg { width: 16px; height: 16px; opacity: 0.7; }
.lang-switcher-dropdown {
    display: none;
    position: fixed;
    min-width: 140px;
    background: rgba(11, 11, 20, 0.98);
    border: 1px solid var(--fn-stroke);
    border-radius: 8px;
    padding: 6px 0;
    z-index: 9999;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.lang-switcher.open .lang-switcher-dropdown { display: block; }
.lang-switcher-dropdown a {
    display: block;
    padding: 8px 16px;
    font-size: 14px;
    color: var(--fn-text-dim);
    transition: color 0.15s, background 0.15s;
}
.lang-switcher-dropdown a:hover {
    color: var(--fn-text);
    background: rgba(0, 224, 255, 0.08);
}
.lang-switcher-dropdown a.active {
    color: var(--fn-cyan);
}

/* Hero content — H1/subtitle/CTA centered; eyebrow stays left-aligned per design. */
.fn-hero-content {
    max-width: 900px;
    margin: 0 auto;
    padding-top: 24px;
    position: relative;
    text-align: center;
}

.fn-hero-eyebrow {
    /* Eyebrow stays anchored to the left edge; wrapper below flips text-align back to center for H1/subtitle/CTA. */
    display: inline-block;
    padding: 6px 14px;
    background: rgba(0, 224, 255, 0.1);
    border: 1px solid rgba(0, 224, 255, 0.4);
    color: var(--fn-cyan);
    font-family: var(--font-display);
    font-size: 13px;
    letter-spacing: 0.2em;
    margin-bottom: 16px;
    clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}

/* Wrapper for the eyebrow so it can sit left-aligned inside a centered content block. */
.fn-hero-eyebrow-row {
    text-align: left;
}

.fn-hero-title {
    font-family: var(--font-display);
    font-size: clamp(40px, 6.5vw, 88px);
    line-height: 0.95;
    letter-spacing: 0.02em;
    margin-bottom: 16px;
    text-transform: uppercase;
    text-shadow: 0 0 40px rgba(0, 224, 255, 0.3);
    white-space: nowrap;
}

.fn-hero-title-accent {
    background: var(--fn-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 24px rgba(122, 43, 255, 0.4));
}

.fn-hero-subtitle {
    font-size: 17px;
    color: var(--fn-text-dim);
    max-width: 560px;
    margin: 0 auto 24px;
    line-height: 1.55;
}

.fn-hero-cta {
    display: inline-block;
    padding: 16px 40px;
    background: var(--fn-gradient);
    color: var(--fn-text);
    font-family: var(--font-display);
    font-size: 18px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
    transition: transform 0.15s, filter 0.15s;
    box-shadow: 0 8px 30px rgba(122, 43, 255, 0.5);
}

.fn-hero-cta:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
}

/* ==========================================================================
   MAIN CONTENT
   ========================================================================== */

.fn-main {
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 6vw 80px;
}

.fn-section-head {
    margin-bottom: 32px;
}

.fn-section-eyebrow {
    display: inline-block;
    color: var(--fn-cyan);
    font-family: var(--font-display);
    font-size: 14px;
    letter-spacing: 0.3em;
    margin-bottom: 8px;
}

.fn-section-title {
    font-family: var(--font-display);
    font-size: clamp(36px, 5vw, 56px);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
}

/* Filter bar */
.fn-filter-bar {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 14px;
    padding: 18px 20px 18px 24px;
    background: var(--fn-panel);
    border: 1px solid var(--fn-stroke);
    border-radius: 4px;
    margin-bottom: 32px;
    position: relative;
    overflow: hidden;
}

.fn-filter-bar::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--fn-gradient);
}

/* Search input */
.fn-search {
    flex: 2 1 260px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    background: var(--fn-panel-2);
    border: 1px solid var(--fn-stroke);
    border-radius: 3px;
    color: var(--fn-text-mute);
    transition: all 0.15s;
    min-height: 44px;
}

.fn-search:hover {
    border-color: var(--fn-stroke-2);
    color: var(--fn-text-dim);
}

.fn-search:focus-within {
    border-color: var(--fn-cyan);
    color: var(--fn-cyan);
    box-shadow: 0 0 12px rgba(0, 224, 255, 0.4);
}

.fn-search-icon {
    flex-shrink: 0;
    display: block;
}

.fn-search input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    outline: 0;
    color: var(--fn-text);
    font-family: var(--font-display);
    font-size: 14px;
    letter-spacing: 0.15em;
    padding: 10px 0;
}

.fn-search input::placeholder {
    color: var(--fn-text-mute);
    letter-spacing: 0.15em;
}

/* Clear the ugly WebKit search UI */
.fn-search input::-webkit-search-decoration,
.fn-search input::-webkit-search-cancel-button,
.fn-search input::-webkit-search-results-button,
.fn-search input::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
}

/* Select dropdown wrapper (label chip + select) */
.fn-select-wrap {
    flex: 1 1 200px;
    display: flex;
    align-items: stretch;
    background: var(--fn-panel-2);
    border: 1px solid var(--fn-stroke);
    border-radius: 3px;
    transition: all 0.15s;
    min-height: 44px;
    position: relative;
}

.fn-select-wrap:hover {
    border-color: var(--fn-stroke-2);
}

.fn-select-wrap:focus-within {
    border-color: var(--fn-cyan);
    box-shadow: 0 0 12px rgba(0, 224, 255, 0.4);
}

.fn-select-label {
    display: flex;
    align-items: center;
    padding: 0 14px;
    font-family: var(--font-display);
    font-size: 12px;
    letter-spacing: 0.25em;
    color: var(--fn-text-mute);
    background: rgba(0, 0, 0, 0.25);
    border-right: 1px solid var(--fn-stroke);
    flex-shrink: 0;
    pointer-events: none;
}

.fn-select {
    flex: 1;
    min-width: 0;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: transparent;
    border: 0;
    outline: 0;
    padding: 10px 40px 10px 14px;
    color: var(--fn-text);
    font-family: var(--font-display);
    font-size: 14px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    cursor: pointer;
    /* Custom cyan chevron */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path fill='none' stroke='%2300E0FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 8px;
}

/* Native option list (browser paints these — dark background where supported) */
.fn-select option {
    background: var(--fn-panel);
    color: var(--fn-text);
    font-family: var(--font-display);
}

/* Stack the filter controls on narrow screens */
@media (max-width: 640px) {
    .fn-search { flex: 1 1 100%; }
    .fn-select-wrap { flex: 0 1 48%; min-width: 0; }
    .fn-checkbox { flex: 1 1 100%; }
}

/* SHOW UNRELEASED — pill checkbox that matches fn-select-wrap look */
.fn-checkbox {
    flex: 0 1 auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    background: var(--fn-panel-2);
    border: 1px solid var(--fn-stroke);
    border-radius: 3px;
    min-height: 44px;
    cursor: pointer;
    user-select: none;
    transition: all 0.15s;
}

.fn-checkbox:hover {
    border-color: var(--fn-stroke-2);
}

.fn-checkbox:focus-within {
    border-color: var(--fn-cyan);
    box-shadow: 0 0 12px rgba(0, 224, 255, 0.4);
}

/* Hide native input but keep it accessible */
.fn-checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

/* Custom check box */
.fn-checkbox-box {
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--fn-stroke-2);
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.35);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s;
}

.fn-checkbox input[type="checkbox"]:checked + .fn-checkbox-box {
    border-color: var(--fn-cyan);
    background: var(--fn-cyan);
    box-shadow: 0 0 8px rgba(0, 224, 255, 0.5);
}

/* Checkmark drawn via inline SVG mask so it inherits color */
.fn-checkbox input[type="checkbox"]:checked + .fn-checkbox-box::after {
    content: '';
    width: 12px;
    height: 12px;
    background: #061014;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/></svg>") center/contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/></svg>") center/contain no-repeat;
}

.fn-checkbox-label {
    font-family: var(--font-display);
    font-size: 13px;
    letter-spacing: 0.22em;
    color: var(--fn-text-mute);
    transition: color 0.15s;
}

.fn-checkbox input[type="checkbox"]:checked ~ .fn-checkbox-label {
    color: var(--fn-text);
}

/* ==========================================================================
   SPRITE GRID
   ========================================================================== */

.sprite-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 18px;
}

/* Sprite card — ORIGINAL multi-theme gradient design.
   Layered fill logic:
   - Rare/Epic/Legendary/Mythic → rarity-driven gradient (--bg-{rarity})
   - Special → theme-driven gradient (--theme-bg-{theme}) since the theme IS the visual identity */
.sprite-card {
    position: relative;
    display: block;
    background: var(--bg-Rare);      /* fallback; overridden below */
    border: 2px solid var(--fn-stroke);
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    isolation: isolate;
}

/* Rarity-driven backgrounds (non-Special) */
.sprite-card.rarity-Rare      { background: var(--bg-Rare); }
.sprite-card.rarity-Epic      { background: var(--bg-Epic); }
.sprite-card.rarity-Legendary { background: var(--bg-Legendary); }
.sprite-card.rarity-Mythic    { background: var(--bg-Mythic); }

/* Special rarity — theme-driven backgrounds */
.sprite-card.rarity-Special[data-theme="Basic"]    { background: var(--theme-bg-Basic); }
.sprite-card.rarity-Special[data-theme="Gold"]     { background: var(--theme-bg-Gold); }
.sprite-card.rarity-Special[data-theme="Gummy"]    { background: var(--theme-bg-Gummy); }
.sprite-card.rarity-Special[data-theme="Galaxy"]   { background: var(--theme-bg-Galaxy); }
.sprite-card.rarity-Special[data-theme="Gem"]      { background: var(--theme-bg-Gem); }
.sprite-card.rarity-Special[data-theme="Holofoil"] { background: var(--theme-bg-Holofoil); }
.sprite-card.rarity-Special[data-theme="Rift"]     { background: var(--theme-bg-Rift); }
.sprite-card.rarity-Special[data-theme="Cube"]     { background: var(--theme-bg-Cube); }
.sprite-card.rarity-Special[data-theme="Quack"]    { background: var(--theme-bg-Quack); }

/* Bottom 4px rarity stripe */
.sprite-card::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 4px;
    z-index: 3;
}
.sprite-card.rarity-Rare::after      { background: var(--rarity-Rare); }
.sprite-card.rarity-Epic::after      { background: var(--rarity-Epic); }
.sprite-card.rarity-Legendary::after { background: var(--rarity-Legendary); }
.sprite-card.rarity-Mythic::after    { background: var(--rarity-Mythic); }
.sprite-card.rarity-Special::after   { background: var(--rarity-Special); }

/* Special rainbow stripe overlay across the image area — removed for cleaner look. */

/* Hover — retained Fortnite-style cyan lift */
.sprite-card:hover {
    transform: translateY(-4px);
    border-color: var(--fn-cyan);
    box-shadow: 0 12px 32px rgba(0, 224, 255, 0.28);
}

.sprite-card .card-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    z-index: 2;
}

.sprite-card .card-image {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    position: relative;
}

.sprite-card .card-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.25s ease;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.55));
}

.sprite-card:hover .card-image img { transform: scale(1.06); }

.sprite-card .card-name {
    padding: 10px 12px 14px;
    font-family: var(--font-display);
    font-size: 16px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fn-text);
    text-align: center;
    background: rgba(0, 0, 0, 0.35);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Rarity chip — top-right corner */
.sprite-card .card-rarity-chip {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 4px 10px;
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    z-index: 4;
    border-radius: 2px;
}
.sprite-card.rarity-Rare      .card-rarity-chip { background: var(--chip-bg-Rare);      color: var(--chip-text-Rare); }
.sprite-card.rarity-Epic      .card-rarity-chip { background: var(--chip-bg-Epic);      color: var(--chip-text-Epic); }
.sprite-card.rarity-Legendary .card-rarity-chip { background: var(--chip-bg-Legendary); color: var(--chip-text-Legendary); }
.sprite-card.rarity-Mythic    .card-rarity-chip { background: var(--chip-bg-Mythic);    color: var(--chip-text-Mythic); }
.sprite-card.rarity-Special   .card-rarity-chip {
    background: linear-gradient(135deg, #51f7cc, #e374ee, #b5f69e);
    color: #000000;
    font-weight: 900;
}

/* Unreleased state — image renders normally; only the top-right badge signals status. */
.sprite-card .card-unreleased-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 4px 10px;
    background: rgba(255, 61, 154, 0.92);
    color: var(--fn-text);
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 0.12em;
    z-index: 4;
    clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.fn-footer {
    padding: 32px 6vw;
    border-top: 1px solid var(--fn-stroke);
    text-align: center;
    color: var(--fn-text-mute);
    font-size: 13px;
    background: rgba(11, 11, 20, 0.6);
}
.fn-footer-links {
    margin-top: 12px;
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}
.fn-footer-links a {
    color: var(--fn-text-dim);
    font-size: 12px;
    transition: color 0.15s;
}
.fn-footer-links a:hover { color: var(--fn-cyan); }

/* ==========================================================================
   TAGS (rarity / theme / status chips — used on detail page)
   ========================================================================== */

.tag {
    display: inline-block;
    padding: 6px 14px;
    font-family: var(--font-display);
    font-size: 13px;
    letter-spacing: 0.15em;
    background: var(--fn-panel-2);
    border: 1px solid var(--fn-stroke);
    color: var(--fn-text-dim);
    border-radius: 3px;
}

.tag-rarity.rarity-Rare      { background: var(--rarity-Rare); border-color: var(--rarity-Rare); color: #ffffff; }
.tag-rarity.rarity-Epic      { background: var(--rarity-Epic); border-color: var(--rarity-Epic); color: #ffffff; }
.tag-rarity.rarity-Legendary { background: var(--rarity-Legendary); border-color: var(--rarity-Legendary); color: #1a0f00; }
.tag-rarity.rarity-Mythic    { background: var(--rarity-Mythic); border-color: var(--rarity-Mythic); color: #1a1500; }
.tag-rarity.rarity-Special   { background: var(--rarity-Special); border-color: transparent; color: #ffffff; }

.tag-status[data-status="UNRELEASED"] { background: rgba(255, 61, 154, 0.15); border-color: rgba(255, 61, 154, 0.5); color: var(--fn-magenta); }
.tag-status[data-status="RELEASED"]   { background: rgba(0, 224, 255, 0.10); border-color: rgba(0, 224, 255, 0.4); color: var(--fn-cyan); }

.tag-theme { background: var(--fn-panel-2); border-color: var(--fn-stroke-2); color: var(--fn-text); }

/* ==========================================================================
   DETAIL PAGE
   ========================================================================== */

.fn-breadcrumb {
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px 6vw 0;
    font-size: 13px;
    color: var(--fn-text-mute);
    letter-spacing: 0.05em;
}
.fn-breadcrumb a {
    color: var(--fn-text-dim);
    transition: color 0.15s;
}
.fn-breadcrumb a:hover { color: var(--fn-cyan); }
.fn-breadcrumb .sep { margin: 0 8px; opacity: 0.5; }
.fn-breadcrumb .current { color: var(--fn-text); }

/* Detail page container — shared 1400px column, padding aligns showcase + functionality */
.detail-page {
    max-width: 1400px;
    margin: 0 auto;
    padding: 32px 6vw 40px;
}

/* Showcase: image on the left, name + tags + desc + stat tiles + location on the right */
.detail-showcase {
    display: grid;
    grid-template-columns: minmax(340px, 460px) 1fr;
    gap: 48px;
    align-items: start;
}

.detail-hero-image {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background: var(--fn-panel);
    border: 2px solid var(--fn-stroke);
    border-radius: 6px;
    position: relative;
    overflow: hidden;
}
.detail-hero-image::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 6px;
}
.detail-hero-image.rarity-Rare      { background: var(--bg-Rare); }
.detail-hero-image.rarity-Epic      { background: var(--bg-Epic); }
.detail-hero-image.rarity-Legendary { background: var(--bg-Legendary); }
.detail-hero-image.rarity-Mythic    { background: var(--bg-Mythic); }
.detail-hero-image.rarity-Special[data-theme="Basic"]    { background: var(--theme-bg-Basic); }
.detail-hero-image.rarity-Special[data-theme="Gold"]     { background: var(--theme-bg-Gold); }
.detail-hero-image.rarity-Special[data-theme="Gummy"]    { background: var(--theme-bg-Gummy); }
.detail-hero-image.rarity-Special[data-theme="Galaxy"]   { background: var(--theme-bg-Galaxy); }
.detail-hero-image.rarity-Special[data-theme="Gem"]      { background: var(--theme-bg-Gem); }
.detail-hero-image.rarity-Special[data-theme="Holofoil"] { background: var(--theme-bg-Holofoil); }
.detail-hero-image.rarity-Special[data-theme="Rift"]     { background: var(--theme-bg-Rift); }
.detail-hero-image.rarity-Special[data-theme="Cube"]     { background: var(--theme-bg-Cube); }
.detail-hero-image.rarity-Special[data-theme="Quack"]    { background: var(--theme-bg-Quack); }

.detail-hero-image.rarity-Rare::after      { background: var(--rarity-Rare); }
.detail-hero-image.rarity-Epic::after      { background: var(--rarity-Epic); }
.detail-hero-image.rarity-Legendary::after { background: var(--rarity-Legendary); }
.detail-hero-image.rarity-Mythic::after    { background: var(--rarity-Mythic); }
.detail-hero-image.rarity-Special::after   { background: var(--rarity-Special); }

.detail-hero-image img {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
    filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.7));
    position: relative;
    z-index: 1;
}

/* Right-side info column: vertical flow with tight rhythm */
.detail-hero-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.detail-hero-title {
    font-family: var(--font-display);
    font-size: clamp(40px, 6vw, 72px);
    line-height: 0.95;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-shadow: 0 0 40px rgba(0, 224, 255, 0.15);
    margin: 0;
}

.detail-hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
}

.detail-hero-desc {
    font-size: 16px;
    color: var(--fn-text-dim);
    max-width: 620px;
    line-height: 1.65;
    margin: 0;
}

/* CTA buttons (used in hero sections) */
.fn-cta-btn {
    display: inline-block;
    padding: 12px 24px;
    background: var(--fn-cyan);
    color: #000;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 700;
    border-radius: 8px;
    text-decoration: none;
    transition: transform 0.12s, box-shadow 0.15s;
}
.fn-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 224, 255, 0.3);
}
.fn-cta-btn-secondary {
    background: var(--fn-panel);
    color: var(--fn-text);
    border: 1px solid var(--fn-stroke);
}
.fn-cta-btn-secondary:hover {
    border-color: var(--fn-cyan);
    box-shadow: 0 6px 20px rgba(0, 224, 255, 0.15);
}

/* Hero tools row */
.fn-hero-tools {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 24px;
}

/* Stat tiles — 4-up readout of key decision data (rarity / best-for / drop / cost) */
.stat-tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 4px;
}

.stat-tile {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px 14px;
    background: var(--fn-panel-2);
    border: 1px solid var(--fn-stroke);
    border-radius: 3px;
    position: relative;
    overflow: hidden;
    min-height: 68px;
}
.stat-tile::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--fn-cyan);
}
/* Rarity tile takes its accent from the sprite's rarity — visual anchor */
.stat-tile-rarity.rarity-Rare::before      { background: var(--rarity-Rare); }
.stat-tile-rarity.rarity-Epic::before      { background: var(--rarity-Epic); }
.stat-tile-rarity.rarity-Legendary::before { background: var(--rarity-Legendary); }
.stat-tile-rarity.rarity-Mythic::before    { background: var(--rarity-Mythic); }
.stat-tile-rarity.rarity-Special::before   { background: var(--rarity-Special); }

.stat-tile-label {
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--fn-text-mute);
    line-height: 1;
}

.stat-tile-value {
    font-family: var(--font-display);
    font-size: 20px;
    line-height: 1.1;
    color: var(--fn-text);
    letter-spacing: 0.02em;
}
.stat-tile-value.drop-rate {
    font-variant-numeric: tabular-nums;
    color: var(--fn-cyan);
}
.stat-tile-value.pending {
    color: var(--fn-text-mute);
    font-size: 13px;
    font-family: var(--font-body);
    font-style: italic;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}
.stat-tile-value.drop-rate.pending {
    font-variant-numeric: normal;
}

/* Location: single icon+text line, secondary info priority */
.detail-location {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding-top: 4px;
    color: var(--fn-text-dim);
}
.detail-location-icon {
    color: var(--fn-cyan);
    flex-shrink: 0;
    margin-top: 2px;
}
.detail-location-text {
    font-size: 15px;
    line-height: 1.5;
}
.detail-location-text.pending {
    color: var(--fn-text-mute);
    font-style: italic;
}

/* Functionality — full-width card, same vertical accent as former Info card */
.detail-functionality {
    background: var(--fn-panel);
    border: 1px solid var(--fn-stroke);
    border-radius: 4px;
    padding: 24px 28px;
    position: relative;
    overflow: hidden;
    margin-top: 32px;
}
.detail-functionality::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--fn-gradient);
}

.detail-functionality-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-size: 22px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fn-cyan);
    margin: 0 0 14px;
}
.detail-functionality-icon {
    font-size: 20px;
    line-height: 1;
}

.functionality-text {
    font-size: 15px;
    color: var(--fn-text-dim);
    line-height: 1.7;
}
.functionality-text p { margin-bottom: 12px; }
.functionality-text p:last-child { margin-bottom: 0; }
/* On Special-rarity pages the first paragraph is the variant-specific buff — highlight it. */
.functionality-text[data-rarity="Special"] > p:first-child {
    color: var(--fn-yellow);
    font-weight: 600;
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--fn-stroke);
}
.functionality-text.pending { color: var(--fn-text-mute); font-style: italic; }

/* Related section (variants + related sprites) */
.detail-related {
    max-width: 1400px;
    margin: 0 auto;
    padding: 48px 6vw 0;
}
.detail-related h2 {
    font-family: var(--font-display);
    font-size: clamp(24px, 3vw, 32px);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 20px;
}
.detail-related h2 .accent {
    background: var(--fn-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.detail-related .sprite-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
}

/* ==========================================================================
   SLIM HERO (for About/Location/Tier pages — no Hero body, just sticky nav)
   ========================================================================== */

.fn-hero-slim {
    min-height: 0;
    padding: 0 6vw 0;
}
.fn-hero-slim .fn-nav {
    margin-bottom: 0;
}
.fn-hero-slim::before,
.fn-hero-slim::after,
.fn-hero-slim .fn-hero-glow { display: none; }

/* Compact sprite list (used on New Sprites page for "previously released") */
.compact-sprite-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}
.compact-sprite-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 13px;
    color: var(--fn-text-dim);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--fn-stroke);
    border-radius: 6px;
    transition: color 0.15s, border-color 0.15s;
}
.compact-sprite-link:hover {
    color: var(--fn-text);
    border-color: var(--fn-cyan);
}
.compact-sprite-rarity {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.6;
}

/* Guide steps (used in Holofoil Guide) */
.guide-steps {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 20px;
}
.guide-step {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    background: var(--fn-panel);
    border: 1px solid var(--fn-stroke);
    border-radius: 8px;
}
.guide-step-img img {
    width: 100%;
    max-width: 600px;
    border-radius: 6px;
    border: 1px solid var(--fn-stroke);
}
.guide-step-text h3 {
    font-family: var(--font-display);
    font-size: 18px;
    margin-bottom: 8px;
    color: var(--fn-cyan);
}
.guide-step-text p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--fn-text-dim);
}
@media (max-width: 700px) {
    .guide-step-img img { max-width: 100%; }
}

/* Holofoil tip box (inline on detail pages) */
.detail-holofoil-tip {
    margin-top: 16px;
    padding: 14px 16px;
    background: rgba(32, 68, 84, 0.3);
    border: 1px solid rgba(0, 224, 255, 0.2);
    border-radius: 8px;
}
.detail-holofoil-tip-text {
    font-size: 13px;
    line-height: 1.5;
    color: var(--fn-text-dim);
    margin-bottom: 10px;
}
.detail-holofoil-tip-btn {
    display: inline-block;
    padding: 8px 16px;
    font-family: var(--font-display);
    font-size: 12px;
    letter-spacing: 0.1em;
    color: var(--fn-cyan);
    border: 1px solid var(--fn-cyan);
    border-radius: 4px;
    transition: background 0.15s, color 0.15s;
}
.detail-holofoil-tip-btn:hover {
    background: var(--fn-cyan);
    color: var(--fn-bg);
}

/* ==========================================================================
   PLACEHOLDER (for pages awaiting real content)
   ========================================================================== */

.page-placeholder-wrap {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px 6vw 80px;
    display: flex;
    justify-content: center;
}

.page-placeholder {
    max-width: 640px;
    width: 100%;
    background: var(--fn-panel);
    border: 1px solid var(--fn-stroke);
    border-radius: 6px;
    padding: 48px 32px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.page-placeholder::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 4px;
    background: var(--fn-gradient);
}

.page-placeholder-icon {
    font-size: 56px;
    margin-bottom: 16px;
    filter: drop-shadow(0 0 24px rgba(0, 224, 255, 0.4));
}

.page-placeholder-title {
    font-family: var(--font-display);
    font-size: 28px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fn-text);
    margin-bottom: 12px;
}

.page-placeholder-hint {
    color: var(--fn-text-dim);
    font-size: 15px;
    line-height: 1.6;
    max-width: 460px;
    margin: 0 auto 28px;
}

.page-placeholder-cta {
    display: inline-block;
    padding: 12px 28px;
    background: var(--fn-gradient);
    color: var(--fn-text);
    font-family: var(--font-display);
    font-size: 14px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
    transition: transform 0.15s, filter 0.15s;
    box-shadow: 0 6px 20px rgba(122, 43, 255, 0.4);
}
.page-placeholder-cta:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
}

/* ==========================================================================
   CONTENT SECTIONS (used on About page + homepage About preview)
   Media + prose two-column layout, stacks on mobile.
   ========================================================================== */

.content-sections {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px 6vw 80px;
    display: flex;
    flex-direction: column;
    gap: 64px;
}

.home-about-preview {
    /* When embedded in homepage <main>, inherit its horizontal padding but keep top gap */
    padding: 40px 0 0;
    max-width: none;
    border-top: 1px solid var(--fn-stroke);
    margin-top: 40px;
}

.content-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}
.content-section-reverse { direction: rtl; }
.content-section-reverse > * { direction: ltr; }
.content-section-block { grid-template-columns: 1fr; }

.content-media {
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--fn-stroke);
    aspect-ratio: 16 / 9;
}
.content-media::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 4px;
    background: var(--fn-gradient);
}
.content-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.content-prose h2 {
    font-family: var(--font-display);
    font-size: clamp(28px, 3.5vw, 40px);
    line-height: 1.05;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin-bottom: 20px;
    color: var(--fn-text);
}

.content-prose .fn-section-eyebrow { margin-bottom: 10px; }

.content-prose p {
    font-size: 16px;
    line-height: 1.7;
    color: var(--fn-text-dim);
    margin-bottom: 16px;
}
.content-prose p:last-child { margin-bottom: 0; }
.content-prose strong { color: var(--fn-text); font-weight: 600; }

.content-lead {
    font-size: 17px !important;
    color: var(--fn-text) !important;
    margin-bottom: 32px !important;
}

.content-outro {
    margin-top: 32px !important;
    padding-top: 24px;
    border-top: 1px dashed var(--fn-stroke);
    font-size: 15px !important;
}

.content-inline-link {
    color: var(--fn-cyan);
    border-bottom: 1px solid rgba(0, 224, 255, 0.4);
    transition: color 0.15s, border-color 0.15s;
}
.content-inline-link:hover { color: var(--fn-magenta); border-color: var(--fn-magenta); }

.content-cta {
    display: inline-block;
    margin-top: 28px;
    padding: 14px 32px;
    background: var(--fn-gradient);
    color: var(--fn-text);
    font-family: var(--font-display);
    font-size: 15px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
    transition: transform 0.15s, filter 0.15s;
    box-shadow: 0 6px 20px rgba(122, 43, 255, 0.4);
}
.content-cta:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
}

/* Rarity-grouped sprite list */
.rarity-groups {
    display: flex;
    flex-direction: column;
    gap: 28px;
    margin-bottom: 8px;
}
.rarity-group-header {
    font-family: var(--font-display);
    font-size: 22px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 12px;
    padding: 6px 14px;
    display: inline-block;
    border-radius: 3px;
}
.rarity-group-header.rarity-Rare      { background: var(--chip-bg-Rare);      color: var(--chip-text-Rare); }
.rarity-group-header.rarity-Epic      { background: var(--chip-bg-Epic);      color: var(--chip-text-Epic); }
.rarity-group-header.rarity-Legendary { background: var(--chip-bg-Legendary); color: var(--chip-text-Legendary); }
.rarity-group-header.rarity-Mythic    { background: var(--chip-bg-Mythic);    color: var(--chip-text-Mythic); }

.rarity-group ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.rarity-group li a {
    display: block;
    padding: 12px 16px;
    background: var(--fn-panel);
    border: 1px solid var(--fn-stroke);
    border-radius: 4px;
    color: var(--fn-text-dim);
    font-size: 15px;
    line-height: 1.5;
    transition: transform 0.15s, border-color 0.15s, background 0.15s;
}
.rarity-group li a strong {
    color: var(--fn-text);
    font-family: var(--font-display);
    font-size: 16px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-right: 6px;
}
.rarity-group li a:hover {
    transform: translateX(4px);
    border-color: var(--fn-cyan);
    background: var(--fn-panel-2);
    color: var(--fn-text);
}

/* Mobile — stack columns, remove reverse direction, shrink gaps */
@media (max-width: 900px) {
    .content-section { grid-template-columns: 1fr; gap: 24px; }
    .content-section-reverse { direction: ltr; }
    .content-sections { gap: 48px; padding: 20px 6vw 60px; }
    .home-about-preview { padding: 30px 0 0; }
}

/* FAQ items */
.faq-item {
    padding: 18px 0;
    border-bottom: 1px dashed var(--fn-stroke);
}
.faq-item:last-child { border-bottom: none; }
.faq-item h3 {
    font-family: var(--font-display);
    font-size: 18px;
    letter-spacing: 0.05em;
    color: var(--fn-cyan);
    margin-bottom: 10px;
    text-transform: none;
}
.faq-item p {
    margin-bottom: 0 !important;
    font-size: 15px !important;
}

/* ==========================================================================
   RANK BUILDER — drag-and-drop personal ranking (/rate-sprites/)
   ========================================================================== */

.rank-builder {
    max-width: 1100px;
    margin: 0 auto 48px;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.rank-col-header {
    font-family: var(--font-display);
    font-size: 18px;
    color: var(--fn-text);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.rank-col-header span {
    font-size: 12px;
    color: var(--fn-text-dim);
    font-family: var(--font-body);
    font-weight: 400;
}

/* Pool (left) */
.rank-pool {
    min-height: 200px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-content: flex-start;
    padding: 16px;
    background: var(--fn-panel);
    border: 2px dashed var(--fn-stroke);
    border-radius: 12px;
}
.rank-pool-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px 6px 6px;
    background: var(--fn-panel-2);
    border: 1px solid var(--fn-stroke);
    border-radius: 999px;
    cursor: grab;
    transition: transform 0.1s, box-shadow 0.1s;
    user-select: none;
}
.rank-pool-item:active { cursor: grabbing; }
.rank-pool-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 224, 255, 0.15);
    border-color: var(--fn-cyan);
}
.rank-pool-item img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: contain;
    background: rgba(0,0,0,0.3);
    padding: 2px;
}
.rank-pool-item span {
    font-size: 13px;
    font-weight: 600;
    color: var(--fn-text);
}

/* Ranking list (right) */
.rank-list-wrap {
    display: flex;
    flex-direction: column;
}
.rank-list {
    min-height: 200px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px;
    background: var(--fn-panel);
    border: 2px solid var(--fn-stroke);
    border-radius: 12px;
    flex: 1;
}
.rank-list.rank-list-empty {
    border-style: dashed;
    align-items: center;
    justify-content: center;
}
.rank-list-placeholder {
    color: var(--fn-text-dim);
    font-size: 14px;
    text-align: center;
    padding: 40px 20px;
}

.rank-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--fn-panel-2);
    border: 1px solid var(--fn-stroke);
    border-radius: 8px;
    cursor: grab;
    transition: transform 0.1s, border-color 0.1s;
    user-select: none;
}
.rank-item:active { cursor: grabbing; }
.rank-item:hover { border-color: var(--fn-cyan); }
.rank-item .sortable-ghost {
    opacity: 0.4;
}
.rank-item-num {
    font-family: var(--font-display);
    font-size: 16px;
    color: var(--fn-text-dim);
    min-width: 24px;
    text-align: center;
}
.rank-item:nth-child(1) .rank-item-num { color: #ffc107; }
.rank-item:nth-child(2) .rank-item-num { color: #b0b0b0; }
.rank-item:nth-child(3) .rank-item-num { color: #cd7f32; }
.rank-item img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: contain;
    background: rgba(0,0,0,0.3);
    padding: 2px;
    flex-shrink: 0;
}
.rank-item-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--fn-text);
    min-width: 90px;
    white-space: nowrap;
}
.rank-item-desc {
    flex: 1;
    font-size: 12px;
    color: var(--fn-text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rank-item-remove {
    background: none;
    border: none;
    color: var(--fn-text-dim);
    cursor: pointer;
    font-size: 16px;
    padding: 4px 8px;
    border-radius: 4px;
    transition: color 0.1s, background 0.1s;
}
.rank-item-remove:hover {
    color: #ff6b6b;
    background: rgba(255, 60, 60, 0.1);
}

/* Export area */
.rank-export {
    margin-top: 16px;
    display: flex;
    gap: 12px;
    align-items: center;
}
.rank-export-btn {
    padding: 12px 24px;
    background: var(--fn-cyan);
    color: #000;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 700;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.12s, box-shadow 0.15s;
}
.rank-export-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 224, 255, 0.3);
}
.rank-export-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
.rank-reset-all {
    padding: 10px 18px;
    background: rgba(255, 60, 60, 0.1);
    border: 1px solid rgba(255, 60, 60, 0.3);
    color: #ff6b6b;
    font-size: 12px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
}
.rank-reset-all:hover { background: rgba(255, 60, 60, 0.2); }

/* SortableJS ghost/drag styles */
.sortable-ghost { opacity: 0.4; }
.sortable-drag { box-shadow: 0 8px 24px rgba(0,0,0,0.4); }

/* Mobile */
@media (max-width: 768px) {
    .rank-builder {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .rank-pool { min-height: 120px; padding: 12px; }
    .rank-list { min-height: 150px; padding: 12px; }
    .rank-pool-item img { width: 24px; height: 24px; }
    .rank-pool-item span { font-size: 12px; }
    .rank-item img { width: 30px; height: 30px; }
    .rank-item-name { font-size: 12px; }
}

/* ==========================================================================
   BEST SPRITES — community voting page (/best-sprites/)
   ========================================================================== */

.best-section {
    max-width: 1100px;
    margin: 0 auto 48px;
    padding: 0 20px;
}

.best-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}

.best-card {
    border: 1px solid var(--fn-stroke);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: transform 0.12s, border-color 0.15s;
}
.best-card:hover {
    transform: translateY(-2px);
    border-color: var(--fn-cyan);
}

.best-card-rank {
    position: absolute;
    top: 8px;
    left: 10px;
    font-family: var(--font-display);
    font-size: 16px;
    color: var(--fn-text-dim);
}
.best-card:nth-child(1) .best-card-rank { color: #ffc107; }
.best-card:nth-child(2) .best-card-rank { color: #b0b0b0; }
.best-card:nth-child(3) .best-card-rank { color: #cd7f32; }

.best-card-img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: contain;
    background: rgba(0,0,0,0.3);
    padding: 4px;
    margin: 0 auto 8px;
    display: block;
}
.best-card-name {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 700;
    color: var(--fn-text);
    margin-bottom: 6px;
}
.best-card-desc {
    font-size: 11px;
    line-height: 1.4;
    color: var(--fn-text-dim);
    margin-bottom: 10px;
    min-height: 32px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.best-card-pct {
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--fn-text);
    margin-bottom: 10px;
}

.best-votes {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.best-vote-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.best-vote-btn {
    width: 36px;
    height: 36px;
    border: 2px solid var(--fn-stroke);
    border-radius: 8px;
    background: var(--fn-panel);
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s, border-color 0.15s, background 0.15s;
}
.best-vote-btn:hover {
    transform: scale(1.15);
    border-color: var(--fn-cyan);
}
.best-vote-btn.active-up {
    border-color: #4caf50;
    background: rgba(76, 175, 80, 0.15);
    transform: scale(1.1);
}
.best-vote-btn.active-neutral {
    border-color: #ff9800;
    background: rgba(255, 152, 0, 0.15);
    transform: scale(1.1);
}
.best-vote-btn.active-down {
    border-color: #f44336;
    background: rgba(244, 67, 54, 0.15);
    transform: scale(1.1);
}
.best-vote-count {
    font-size: 11px;
    color: var(--fn-text-dim);
    font-weight: 600;
    min-width: 20px;
    text-align: center;
}

.best-loading {
    text-align: center;
    padding: 40px;
    color: var(--fn-text-dim);
    font-size: 14px;
    grid-column: 1 / -1;
}

/* Mobile */
@media (max-width: 700px) {
    .best-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .best-card { padding: 12px 10px; }
    .best-card-img { width: 48px; height: 48px; }
    .best-card-name { font-size: 13px; }
    .best-card-desc { font-size: 10px; min-height: 28px; }
    .best-card-pct { font-size: 18px; }
    .best-vote-btn { width: 30px; height: 30px; font-size: 14px; }
    .best-vote-count { font-size: 10px; }
}
@media (max-width: 400px) {
    .best-grid { grid-template-columns: repeat(2, 1fr); }
    .best-vote-btn { width: 26px; height: 26px; font-size: 12px; }
    .best-votes { gap: 4px; }
}

/* ==========================================================================
   SPRITE RATING (interactive rating on /tier-list/)
   ========================================================================== */

.rate-section {
    max-width: 1100px;
    margin: 0 auto 48px;
    padding: 0 20px;
}
.rate-section-header {
    text-align: center;
    margin-bottom: 28px;
}
.rate-section-header .fn-section-eyebrow {
    margin-bottom: 8px;
}
.rate-section-header h2 {
    font-family: var(--font-display);
    font-size: 28px;
    color: var(--fn-text);
    margin: 0;
}
.rate-section-header p {
    color: var(--fn-text-dim);
    font-size: 14px;
    margin-top: 8px;
}

/* Rating grid */
.rate-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 14px;
    margin-bottom: 32px;
}
.rate-card {
    background: var(--fn-panel);
    border: 1px solid var(--fn-stroke);
    border-radius: 10px;
    padding: 14px 10px 12px;
    text-align: center;
    transition: transform 0.12s, border-color 0.15s, box-shadow 0.15s;
    cursor: default;
}
.rate-card:hover {
    transform: translateY(-3px);
    border-color: var(--fn-cyan);
    box-shadow: 0 6px 18px rgba(0, 224, 255, 0.12);
}
.rate-card.rated {
    border-color: #ffc107;
    box-shadow: 0 4px 14px rgba(255, 193, 7, 0.15);
}
.rate-card-img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    margin: 0 auto 8px;
    display: block;
    border-radius: 50%;
    background: rgba(0,0,0,0.3);
    padding: 4px;
}
.rate-card-name {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--fn-text);
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rate-stars {
    display: flex;
    justify-content: center;
    gap: 2px;
}
.rate-star {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    padding: 2px;
    color: #555;
    transition: color 0.1s, transform 0.1s;
}
.rate-star:hover,
.rate-star.hovered {
    color: #ffd54f;
    transform: scale(1.2);
}
.rate-star.filled {
    color: #ffc107;
}

/* Results panel */
.rate-results {
    background: var(--fn-panel);
    border: 1px solid var(--fn-stroke);
    border-radius: 10px;
    padding: 24px;
    margin-bottom: 32px;
}
.rate-results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.rate-results-header h3 {
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--fn-text);
    margin: 0;
}
.rate-reset-btn {
    background: rgba(255, 60, 60, 0.1);
    border: 1px solid rgba(255, 60, 60, 0.3);
    color: #ff6b6b;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
}
.rate-reset-btn:hover {
    background: rgba(255, 60, 60, 0.2);
}
.rate-rank-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.rate-rank-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: var(--fn-panel-2);
    border-radius: 8px;
    border: 1px solid var(--fn-stroke);
}
.rate-rank-num {
    font-family: var(--font-display);
    font-size: 18px;
    color: var(--fn-text-dim);
    min-width: 28px;
    text-align: center;
}
.rate-rank-row:nth-child(1) .rate-rank-num { color: #ffc107; }
.rate-rank-row:nth-child(2) .rate-rank-num { color: #b0b0b0; }
.rate-rank-row:nth-child(3) .rate-rank-num { color: #cd7f32; }
.rate-rank-img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: contain;
    background: rgba(0,0,0,0.3);
    padding: 2px;
    flex-shrink: 0;
}
.rate-rank-name {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: var(--fn-text);
}
.rate-rank-score {
    font-size: 13px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
}
.rate-rank-score[data-tier="5"] { background: #7fe9f5; color: #063641; }
.rate-rank-score[data-tier="4"] { background: #9be89b; color: #093309; }
.rate-rank-score[data-tier="3"] { background: #c9f0a3; color: #1c3308; }
.rate-rank-score[data-tier="2"] { background: #f7e58c; color: #3a2e00; }
.rate-rank-score[data-tier="1"] { background: #f89e9e; color: #3d0808; }
.rate-rank-stars {
    color: #ffc107;
    font-size: 14px;
    letter-spacing: 1px;
}
.rate-rank-row.unrated {
    opacity: 0.4;
}
.rate-rank-row.unrated .rate-rank-score {
    background: var(--fn-panel);
    color: var(--fn-text-dim);
}

/* Mobile rating */
@media (max-width: 700px) {
    .rate-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }
    .rate-card { padding: 10px 6px 10px; }
    .rate-card-img { width: 48px; height: 48px; }
    .rate-card-name { font-size: 11px; }
    .rate-star { font-size: 16px; }
    .rate-results { padding: 16px; }
    .rate-rank-row { padding: 6px 8px; gap: 8px; }
    .rate-rank-img { width: 28px; height: 28px; }
    .rate-rank-name { font-size: 12px; }
}
@media (max-width: 400px) {
    .rate-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Rating tabs (personal vs community) */
.rate-tabs {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-bottom: 20px;
    background: var(--fn-panel);
    border: 1px solid var(--fn-stroke);
    border-radius: 8px;
    padding: 4px;
    display: inline-flex;
}
.rate-tabs-wrap {
    text-align: center;
    margin-bottom: 20px;
}
.rate-tab {
    padding: 8px 20px;
    border: none;
    border-radius: 6px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    background: transparent;
    color: var(--fn-text-dim);
    transition: background 0.15s, color 0.15s;
}
.rate-tab:hover {
    color: var(--fn-text);
}
.rate-tab.active {
    background: var(--fn-cyan);
    color: #000;
}

/* Community stat below stars on cards */
.rate-community-stat {
    font-size: 11px;
    color: var(--fn-text-dim);
    margin-top: 6px;
    white-space: nowrap;
}
.rate-community-stat .comm-star {
    color: #ffa726;
}

/* Vote count badge in results */
.rate-vote-count {
    font-size: 11px;
    color: var(--fn-text-dim);
    background: var(--fn-panel);
    border: 1px solid var(--fn-stroke);
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
}

/* Loading state */
.rate-loading {
    text-align: center;
    padding: 24px;
    color: var(--fn-text-dim);
    font-size: 14px;
}
.rate-loading::after {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid var(--fn-stroke);
    border-top-color: var(--fn-cyan);
    border-radius: 50%;
    animation: rate-spin 0.8s linear infinite;
    margin-left: 8px;
    vertical-align: middle;
}
@keyframes rate-spin {
    to { transform: rotate(360deg); }
}

/* Community avg bar on rank rows */
.rate-rank-avg {
    font-size: 13px;
    font-weight: 700;
    color: var(--fn-text);
    min-width: 32px;
    text-align: right;
}

@media (max-width: 700px) {
    .rate-tab { padding: 6px 14px; font-size: 12px; }
    .rate-community-stat { font-size: 10px; }
}

/* ==========================================================================
   TIER LIST (used on /tier-list/)
   ========================================================================== */

.tier-row {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 16px;
    margin-bottom: 20px;
    background: var(--fn-panel);
    border: 1px solid var(--fn-stroke);
    border-radius: 6px;
    overflow: hidden;
    align-items: stretch;
}

.tier-label {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 22px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 20px 12px;
    text-align: center;
    line-height: 1.05;
}

.tier-goated   .tier-label { background: #7fe9f5; color: #063641; }
.tier-great    .tier-label { background: #9be89b; color: #093309; }
.tier-good     .tier-label { background: #c9f0a3; color: #1c3308; text-transform: none; font-size: 20px; }
.tier-mid      .tier-label { background: #f7e58c; color: #3a2e00; text-transform: none; font-size: 20px; }
.tier-bad      .tier-label { background: #fbcf88; color: #3b1f00; text-transform: none; font-size: 20px; }
.tier-terrible .tier-label { background: #fbb08a; color: #3b1301; text-transform: none; font-size: 20px; }
.tier-trash    .tier-label { background: #f89e9e; color: #3d0808; }

.tier-body {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tier-sprites {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tier-sprite-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 6px;
    background: var(--fn-panel-2);
    border: 1px solid var(--fn-stroke);
    border-radius: 999px;
    color: var(--fn-text);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.tier-sprite-chip img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    border-radius: 50%;
    background: rgba(0,0,0,0.35);
    padding: 2px;
    flex-shrink: 0;
}
.tier-sprite-chip:hover {
    transform: translateY(-2px);
    border-color: var(--fn-cyan);
    box-shadow: 0 4px 12px rgba(0, 224, 255, 0.2);
    color: var(--fn-cyan);
}

.tier-note {
    font-size: 14px !important;
    line-height: 1.65 !important;
    color: var(--fn-text-dim) !important;
    margin-bottom: 0 !important;
}
.tier-note strong { color: var(--fn-text); }
.tier-note em { color: var(--fn-text); font-style: italic; }

/* Mobile — stack tier label above sprites */
@media (max-width: 700px) {
    .tier-row { grid-template-columns: 1fr; gap: 0; }
    .tier-label { padding: 10px; font-size: 18px; }
    .tier-body { padding: 12px 14px; }
    .tier-sprite-chip { font-size: 13px; padding: 5px 10px 5px 5px; }
    .tier-sprite-chip img { width: 26px; height: 26px; }
}

/* ==========================================================================
   LOCATION MAP (used on /location-map/)
   ========================================================================== */

.map-legend {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 20px 0 8px;
}
.map-legend-item {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 16px;
    align-items: start;
    padding: 16px 18px;
    background: var(--fn-panel-2);
    border: 1px solid var(--fn-stroke);
    border-radius: 6px;
}
.map-legend-item strong { display: block; color: var(--fn-text); font-size: 15px; margin-bottom: 4px; }
.map-legend-item p { margin: 0; font-size: 14px; color: var(--fn-text-dim); line-height: 1.55; }

.map-legend-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-top: 4px;
    border: 2px solid rgba(255,255,255,0.6);
    box-shadow: 0 0 8px rgba(0,0,0,0.4);
}
.map-legend-green  { background: #43c651; }
.map-legend-yellow { background: #f5d033; }
.map-legend-red    { background: #e2413e; }

/* Biome group cards */
.biome-groups {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
    margin-top: 16px;
}
.biome-group {
    padding: 20px;
    background: var(--fn-panel);
    border: 1px solid var(--fn-stroke);
    border-radius: 6px;
    position: relative;
    overflow: hidden;
}
.biome-group::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--fn-gradient);
}
.biome-group h3 {
    font-family: var(--font-display);
    font-size: 18px;
    letter-spacing: 0.04em;
    color: var(--fn-text);
    margin-bottom: 8px;
    text-transform: none;
}
.biome-desc {
    font-size: 14px !important;
    color: var(--fn-text-dim) !important;
    margin-bottom: 12px !important;
    line-height: 1.55 !important;
}
.biome-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.biome-list li a {
    display: block;
    padding: 10px 12px;
    background: var(--fn-panel-2);
    border: 1px solid var(--fn-stroke);
    border-radius: 4px;
    color: var(--fn-text-dim);
    font-size: 13.5px;
    line-height: 1.5;
    transition: transform 0.12s, border-color 0.12s, color 0.12s;
}
.biome-list li a strong {
    display: block;
    color: var(--fn-text);
    font-family: var(--font-display);
    font-size: 15px;
    letter-spacing: 0.05em;
    margin-bottom: 2px;
    text-transform: uppercase;
    font-weight: 700;
}
.biome-list li a:hover {
    transform: translateX(3px);
    border-color: var(--fn-cyan);
    color: var(--fn-text);
}

/* ==========================================================================
   TRACKER (used on /tracker/)
   ========================================================================== */

.tracker-view-banner[hidden] { display: none; }
.tracker-view-banner {
    max-width: 1400px;
    margin: 0 auto 20px;
    padding: 14px 20px;
    background: rgba(0, 224, 255, 0.08);
    border: 1px solid rgba(0, 224, 255, 0.35);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 14px;
    color: var(--fn-text-dim);
}
.tracker-view-banner a {
    color: var(--fn-cyan);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 224, 255, 0.4);
}
.tracker-view-banner a:hover { color: var(--fn-magenta); border-color: var(--fn-magenta); }

/* Progress panel */
.tracker-progress-panel {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 6vw 20px;
}

.tracker-progress-total {
    background: var(--fn-panel);
    border: 1px solid var(--fn-stroke);
    border-radius: 6px;
    padding: 24px 28px;
    position: relative;
    overflow: hidden;
    margin-bottom: 16px;
}
.tracker-progress-total::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 4px;
    background: var(--fn-gradient);
}

.tracker-progress-numbers {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.tracker-count {
    font-family: var(--font-display);
    font-size: clamp(32px, 5vw, 48px);
    line-height: 1;
    letter-spacing: 0.02em;
    background: var(--fn-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.tracker-percent {
    font-family: var(--font-display);
    font-size: 18px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fn-text-dim);
}

.tracker-progress-bar-bg {
    width: 100%;
    height: 12px;
    background: var(--fn-panel-2);
    border: 1px solid var(--fn-stroke);
    border-radius: 6px;
    overflow: hidden;
}
.tracker-progress-bar-fill {
    height: 100%;
    background: var(--fn-gradient);
    transition: width 0.35s ease;
    box-shadow: 0 0 12px rgba(0, 224, 255, 0.35);
}

/* Rarity progress grid */
.tracker-rarity-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}
.tracker-rarity-cell {
    padding: 14px 16px;
    background: var(--fn-panel);
    border: 1px solid var(--fn-stroke);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}
.tracker-rarity-cell::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
}
.tracker-rarity-cell.rarity-Rare::before      { background: var(--rarity-Rare); }
.tracker-rarity-cell.rarity-Epic::before      { background: var(--rarity-Epic); }
.tracker-rarity-cell.rarity-Legendary::before { background: var(--rarity-Legendary); }
.tracker-rarity-cell.rarity-Mythic::before    { background: var(--rarity-Mythic); }
.tracker-rarity-cell.rarity-Special::before   { background: var(--rarity-Special); }

.tracker-rarity-label {
    font-family: var(--font-display);
    font-size: 13px;
    letter-spacing: 0.18em;
    color: var(--fn-text-dim);
    margin-bottom: 4px;
}
.tracker-rarity-count {
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--fn-text);
    margin-bottom: 8px;
    line-height: 1;
}
.tracker-rarity-bar-bg {
    width: 100%;
    height: 6px;
    background: var(--fn-panel-2);
    border-radius: 3px;
    overflow: hidden;
}
.tracker-rarity-bar-fill { height: 100%; transition: width 0.3s ease; }
.tracker-rarity-cell.rarity-Rare      .tracker-rarity-bar-fill { background: var(--rarity-Rare); }
.tracker-rarity-cell.rarity-Epic      .tracker-rarity-bar-fill { background: var(--rarity-Epic); }
.tracker-rarity-cell.rarity-Legendary .tracker-rarity-bar-fill { background: var(--rarity-Legendary); }
.tracker-rarity-cell.rarity-Mythic    .tracker-rarity-bar-fill { background: var(--rarity-Mythic); }
.tracker-rarity-cell.rarity-Special   .tracker-rarity-bar-fill { background: var(--rarity-Special); }

/* Action bar */
.tracker-actions {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 6vw 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.tracker-filter-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.tracker-filter-tabs button {
    padding: 10px 20px;
    background: var(--fn-panel-2);
    border: 1px solid var(--fn-stroke);
    color: var(--fn-text-dim);
    font-family: var(--font-display);
    font-size: 14px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.15s;
}
.tracker-filter-tabs button:hover {
    border-color: var(--fn-cyan);
    color: var(--fn-text);
    box-shadow: 0 0 12px rgba(0, 224, 255, 0.3);
}
.tracker-filter-tabs button.active {
    background: var(--fn-gradient);
    border-color: transparent;
    color: var(--fn-text);
    box-shadow: 0 6px 18px rgba(122, 43, 255, 0.4);
}

/* Filter group — wraps status tabs + rarity dropdown */
.tracker-filter-group {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* Rarity dropdown */
.tracker-rarity-select-wrap {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 4px 4px 4px 14px;
    background: var(--fn-panel-2);
    border: 1px solid var(--fn-stroke);
    border-radius: 3px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.tracker-rarity-select-wrap:focus-within {
    border-color: var(--fn-cyan);
    box-shadow: 0 0 12px rgba(0, 224, 255, 0.3);
}
.tracker-rarity-select-label {
    font-family: var(--font-display);
    font-size: 13px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--fn-text-dim);
    pointer-events: none;
}
.tracker-rarity-select {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: none;
    color: var(--fn-text);
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 8px 32px 8px 4px;
    cursor: pointer;
    outline: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--fn-cyan) 50%),
                      linear-gradient(135deg, var(--fn-cyan) 50%, transparent 50%);
    background-position: right 14px top 55%, right 8px top 55%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}
.tracker-rarity-select option {
    background: var(--fn-panel-2);
    color: var(--fn-text);
}

.tracker-action-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    flex: 1;               /* fill the remaining row so we can align inside */
    justify-content: flex-end; /* right-align — works whether on 1st row leftover space or a new wrapped row */
}
.tracker-btn {
    padding: 11px 22px;
    font-family: var(--font-display);
    font-size: 14px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.15s;
    border: 1px solid transparent;
    color: var(--fn-text);
    clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.tracker-btn-primary {
    background: var(--fn-gradient);
    box-shadow: 0 6px 20px rgba(122, 43, 255, 0.4);
}
.tracker-btn-primary:hover { transform: translateY(-1px); filter: brightness(1.08); }
.tracker-btn-secondary {
    background: var(--fn-panel-2);
    border-color: var(--fn-stroke-2);
}
.tracker-btn-secondary:hover { border-color: var(--fn-cyan); box-shadow: 0 0 12px rgba(0,224,255,0.3); }
.tracker-btn-danger {
    background: transparent;
    border-color: rgba(255, 61, 154, 0.5);
    color: var(--fn-magenta);
}
.tracker-btn-danger:hover { background: rgba(255, 61, 154, 0.12); border-color: var(--fn-magenta); }
.tracker-btn.is-flashing {
    background: rgba(34, 197, 94, 0.9) !important;
    color: #fff !important;
    box-shadow: 0 0 18px rgba(34, 197, 94, 0.5) !important;
}

/* Tracker main + grid overrides */
.tracker-main {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 6vw 60px;
}
.tracker-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 16px;
}

/* Sprite card as a <button> — reset default styles */
.tracker-card {
    all: unset;
    display: block;
    cursor: pointer;
}
/* Re-apply .sprite-card baseline (all: unset stripped it) */
.tracker-card {
    position: relative;
    border: 2px solid var(--fn-stroke);
    border-radius: 4px;
    overflow: hidden;
    isolation: isolate;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}
.tracker-card:focus-visible { outline: 2px solid var(--fn-cyan); outline-offset: 2px; }

/* Unowned state — grayscale + dim */
.tracker-card.is-unowned .card-image img {
    opacity: 0.35;
    filter: grayscale(0.85) drop-shadow(0 6px 12px rgba(0, 0, 0, 0.5));
}
.tracker-card.is-unowned .card-name { color: var(--fn-text-mute); }
.tracker-card.is-unowned .card-rarity-chip { opacity: 0.5; }
.tracker-card.is-unowned::after { opacity: 0.35; }

.tracker-lock {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: var(--fn-text-mute);
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.7));
    pointer-events: none;
    z-index: 5;
}

/* Owned checkmark badge */
.tracker-owned-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    background: #22c55e;
    color: #fff;
    font-size: 16px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.55);
    z-index: 5;
    clip-path: none;
}

/* View-mode: no pointer cursor, no interaction hint */
body.tracker-view-mode .tracker-card { cursor: default; }
body.tracker-view-mode .tracker-btn-danger,
body.tracker-view-mode #btnShare { display: none; }

.tracker-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--fn-text-mute);
    font-size: 16px;
    font-style: italic;
}

/* Mobile */
@media (max-width: 700px) {
    .tracker-actions { flex-direction: column; align-items: stretch; }
    .tracker-action-buttons { justify-content: stretch; }
    .tracker-btn { flex: 1; padding: 12px 12px; font-size: 12px; letter-spacing: 0.1em; }
    .tracker-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .tracker-rarity-grid { grid-template-columns: repeat(2, 1fr); }
    .tracker-progress-numbers { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 900px) {
    .fn-hero { min-height: 40vh; padding-bottom: 40px; }
    .fn-hero-slim { min-height: 0; padding-bottom: 0; }
    .fn-hero-content { padding-top: 20px; }
    .fn-hero-title { white-space: normal; }
    .fn-hero-subtitle { font-size: 16px; }
    .fn-nav { flex-wrap: wrap; gap: 8px; justify-content: space-between; }
    .fn-logo { order: 1; flex: 0 0 auto; }
    .lang-switcher {
        order: 2;
        flex: 0 0 auto;
    }
    .lang-switcher-btn { padding: 6px 10px; font-size: 12px; }
    .lang-switcher-dropdown { left: auto; right: 0; }
    .fn-menu {
        order: 3;
        width: 100%;
        flex-wrap: wrap;
        gap: 4px;
        margin: 0;
    }
    .fn-menu a { padding: 6px 10px; font-size: 13px; white-space: nowrap; }
    .fn-filter-bar { flex-wrap: wrap; gap: 8px; padding: 12px 14px; margin-bottom: 16px; }
    .fn-filter-bar .fn-search { flex: 1 1 100%; }
    .fn-filter-bar .fn-search input { padding: 8px 12px 8px 36px; font-size: 13px; }
    .fn-filter-bar .fn-select-wrap { flex: 0 1 48%; min-width: 0; }
    .fn-filter-bar .fn-select { padding: 8px 32px 8px 10px; font-size: 13px; }
    .fn-filter-bar .fn-select-label { font-size: 10px; }
    .fn-filter-bar .fn-checkbox { flex: 1 1 100%; padding: 6px 12px; }
    .fn-filter-bar .fn-checkbox-label { font-size: 12px; }
    .sprite-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; }
    .sprite-card .card-name { font-size: 11px; padding: 6px; }
    .sprite-card .card-rarity-chip { font-size: 9px; padding: 2px 5px; }
    .detail-page { padding: 20px 6vw 32px; }
    .detail-showcase { grid-template-columns: 1fr; gap: 24px; }
    .detail-hero-image { max-width: 380px; margin: 0 auto; }
    .stat-tiles { grid-template-columns: repeat(2, 1fr); }
    .detail-functionality { padding: 20px 22px; }
    /* Tracker — compact progress */
    .tracker-progress { padding: 16px 20px; }
    .tracker-progress-count { font-size: 28px; }
    .tracker-progress-pct { font-size: 14px; }
    .tracker-rarity-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .tracker-rarity-card { padding: 10px 12px; }
    .tracker-rarity-count { font-size: 18px; }
    .tracker-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; }
}

@media (max-width: 480px) {
    .fn-hero { padding: 0 5vw 32px; min-height: 34vh; }
    .fn-hero-slim { min-height: 0; padding-bottom: 0; }
    .fn-main { padding: 30px 5vw 60px; }
    .fn-hero-cta { padding: 14px 28px; font-size: 16px; }
    .fn-rarity-tabs { gap: 6px; }
    .fn-rarity-tabs button { padding: 8px 12px; font-size: 12px; letter-spacing: 0.1em; }
    .sprite-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; }
    .sprite-card .card-name { font-size: 10px; padding: 5px; }
    .detail-hero-image { padding: 24px; }
    .detail-functionality { padding: 18px 20px; }
    .stat-tile { padding: 10px 12px 12px; min-height: 60px; }
    .stat-tile-value { font-size: 18px; }
}

/* Strategy tip (detail pages) */
.detail-strategy-tip {
    margin-top: 16px;
    padding: 14px 18px;
    background: rgba(122, 43, 255, 0.06);
    border-left: 3px solid var(--fn-purple);
    border-radius: 0 6px 6px 0;
}
.detail-strategy-tip p {
    font-size: 13px;
    line-height: 1.6;
    color: var(--fn-text-dim);
}