/* ==========================================================================
   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-Candy:    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%);

    /* 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; }

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;
    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;
    justify-content: space-between;
    gap: 24px;
    padding: 16px 0;
    margin: 0 -6vw 40px;
    padding-left: 6vw;
    padding-right: 6vw;
    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;
}

.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;
}

/* 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: center;
    gap: 20px;
    padding: 20px 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);
}

.fn-filter-label {
    font-family: var(--font-display);
    font-size: 15px;
    letter-spacing: 0.25em;
    color: var(--fn-text-dim);
    flex-shrink: 0;
}

.fn-rarity-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.fn-rarity-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;
    transition: all 0.15s;
    border-radius: 3px;
}

.fn-rarity-tabs button:hover {
    border-color: var(--fn-cyan);
    color: var(--fn-text);
    box-shadow: 0 0 12px rgba(0, 224, 255, 0.4);
}

.fn-rarity-tabs button.active {
    background: var(--fn-gradient);
    border-color: transparent;
    color: var(--fn-text);
    box-shadow: 0 6px 20px rgba(122, 43, 255, 0.5);
}

/* Per-rarity tab active tint (overrides gradient for specific rarities) */
.fn-rarity-tabs button.active[data-rarity="Rare"]      { background: var(--rarity-Rare); box-shadow: 0 6px 20px rgba(0,168,255,0.5); }
.fn-rarity-tabs button.active[data-rarity="Epic"]      { background: var(--rarity-Epic); box-shadow: 0 6px 20px rgba(195,89,255,0.5); }
.fn-rarity-tabs button.active[data-rarity="Legendary"] { background: var(--rarity-Legendary); box-shadow: 0 6px 20px rgba(255,140,26,0.5); color: #1a0f00; }
.fn-rarity-tabs button.active[data-rarity="Mythic"]    { background: var(--rarity-Mythic); box-shadow: 0 6px 20px rgba(250,222,85,0.5); color: #1a1500; }
.fn-rarity-tabs button.active[data-rarity="Special"]   { background: var(--rarity-Special); }

/* ==========================================================================
   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="Candy"]    { background: var(--theme-bg-Candy); }
.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); }

/* 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);
}

/* ==========================================================================
   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-hero {
    max-width: 1400px;
    margin: 0 auto;
    padding: 32px 6vw 20px;
    display: grid;
    grid-template-columns: minmax(260px, 420px) 1fr;
    gap: 48px;
    align-items: center;
}

.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="Candy"]    { background: var(--theme-bg-Candy); }
.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-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;
}

.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;
    margin-bottom: 20px;
    text-shadow: 0 0 40px rgba(0, 224, 255, 0.15);
}

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

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

/* Info cards (Stats / Functionality) */
.detail-info-grid {
    max-width: 1400px;
    margin: 0 auto;
    padding: 32px 6vw 0;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 20px;
}

.detail-card {
    background: var(--fn-panel);
    border: 1px solid var(--fn-stroke);
    border-radius: 4px;
    padding: 24px;
    position: relative;
    overflow: hidden;
}
.detail-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--fn-gradient);
}

.detail-card h3 {
    font-family: var(--font-display);
    font-size: 22px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 16px;
    color: var(--fn-cyan);
}

.stats-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px dashed var(--fn-stroke);
}
.stats-row:last-child { border-bottom: none; }
.stats-row .k { color: var(--fn-text-dim); font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; flex-shrink: 0; }
.stats-row .v { font-family: var(--font-display); font-size: 20px; color: var(--fn-text); text-align: right; }
.stats-row .v.pending { color: var(--fn-text-mute); font-size: 14px; font-family: var(--font-body); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: 0; }

/* Block-layout variant for long free-text values (e.g. Location descriptions) — label above, value below. */
.stats-row.stats-row-block {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}
.stats-row.stats-row-block .v {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 500;
    color: var(--fn-text-dim);
    text-align: left;
    line-height: 1.5;
    letter-spacing: 0;
    text-transform: none;
}
.stats-row.stats-row-block .v.pending { font-size: 14px; }

.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::before,
.fn-hero-slim::after,
.fn-hero-slim .fn-hero-glow { display: none; }

/* ==========================================================================
   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;
}

/* ==========================================================================
   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;
}
.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-content { padding-top: 20px; }
    .fn-hero-title { white-space: normal; }
    .fn-hero-subtitle { font-size: 16px; }
    .fn-nav { flex-wrap: wrap; gap: 12px; }
    .fn-menu a { padding: 8px 12px; font-size: 14px; }
    .fn-filter-bar { flex-direction: column; align-items: stretch; gap: 12px; }
    .sprite-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
    .sprite-card .card-name { font-size: 14px; padding: 10px; }
    .detail-hero { grid-template-columns: 1fr; gap: 24px; padding: 20px 6vw; }
    .detail-hero-image { max-width: 380px; margin: 0 auto; }
    .detail-info-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .fn-hero { padding: 0 5vw 32px; min-height: 34vh; }
    .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(2, 1fr); gap: 10px; }
    .detail-hero-image { padding: 24px; }
    .detail-card { padding: 18px; }
}