/* ══════════════════════════════════════════════════════════════════
   DCG NEXUS DESIGN SYSTEM
   ══════════════════════════════════════════════════════════════════ */

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

/* The HTML `hidden` attribute relies on the browser's built-in `[hidden]{display:none}` rule,
   which lives in the UA (browser default) stylesheet — the lowest-priority origin in the cascade.
   Any author rule that sets `display` on the same element (e.g. .nav-links a's `display:flex`)
   wins over it regardless of selector specificity, silently making `hidden` a no-op. This
   unconditionally restores it everywhere in the app, so `hidden` always means hidden. */
[hidden] {
    display: none !important;
}

:root {
    /* ── Colors ── */
    --bg:        #1a1d26;
    --bg2:       #1f2330;
    --bg3:       #252936;
    --line:      rgba(255,255,255,0.10);
    --line2:     rgba(255,255,255,0.05);
    --accent:    #3DD0FF;
    --accent2:   #1AA7D8;
    --text:      #e8e4da;
    --muted:     #8a8985;
    --muted2:    #4d4c48;
    --up:        #4ade80;
    --down:      #f87171;
    --up-dark:   #166534;
    --down-dark: #991b1b;
    --on-accent: #0a0d12;
    --yellow:    #f5c542;
    
    /* ── Typography ── */
    --mono:      'IBM Plex Mono', monospace;
    --sans:      'IBM Plex Sans', sans-serif;
    --display:   'Bebas Neue', sans-serif;
}

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

body {
    font-family: var(--sans);
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    overflow-x: hidden;
    width: 100%; /* Add this */
    position: relative; /* Add this */
}

/* ── SCROLLBAR ── */

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--muted2) var(--bg2);
}

/* Chromium / Safari */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--bg2);
}

::-webkit-scrollbar-thumb {
    background: var(--muted2);
    border-radius: 3px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: var(--muted);
    }

::-webkit-scrollbar-corner {
    background: var(--bg2);
}

/* ── NOISE OVERLAY ── */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    opacity: 0.025;
    pointer-events: none;
    z-index: 9999;
}

/* ── Link Defaults ── */
a {
    color: inherit;
    text-decoration: none;
    transition: color .15s;
}

a:hover {
    color: var(--accent);
}

/* Remove default blue underline */
a:focus,
a:active,
a:visited {
    text-decoration: none;
}

/* ══════════════════════════════════════════════════════════════════
   NAVIGATION
   ══════════════════════════════════════════════════════════════════ */

.nav {
    display: flex;
    align-items: stretch;
    height: 52px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 100;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0 20px 0 24px;
    border-right: 1px solid var(--line);
    text-decoration: none;
}

.nav-logo-text {
    font-family: var(--display);
    font-size: 26px;
    letter-spacing: 1px;
    color: var(--text);
    line-height: 1;
}

.nav-logo-text em {
    font-style: normal;
    color: var(--accent);
}

.nav-logo-sub {
    font-family: var(--mono);
    font-size: 8px;
    color: var(--muted);
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-left: 10px;
    margin-top: 3px;
    line-height: 1.3;
    max-width: 80px;
}

.nav-search {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 10px;
    border-right: 1px solid var(--line);
    position: relative;
}

.nav-search-label {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--muted2);
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
}

.nav-search input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    font-family: var(--mono);
    font-size: 13px;
    color: var(--text);
    max-width: 300px;
}

.nav-search input::placeholder { 
    color: var(--muted2); 
}

.nav-links {
    display: flex;
    align-items: center;
}

.nav-links a {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    text-decoration: none;
    padding: 0 16px;
    height: 100%;
    display: flex;
    align-items: center;
    border-right: 1px solid var(--line);
    transition: color .15s, background .15s;
}

.nav-links a:hover { 
    color: var(--text); 
    background: rgba(255,255,255,0.03); 
}

.nav-submit {
    display: flex;
    align-items: center;
    padding: 0 18px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    background: var(--accent);
    color: var(--on-accent);
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background .15s;
    text-decoration: none;
}

.nav-submit:hover { 
    background: var(--accent2); 
}

/* ── SEARCH DROPDOWN ── */
.search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg2);
    border: 1px solid var(--line);
    border-top: 2px solid var(--accent);
    max-height: 450px;
    overflow-y: auto;
    display: none;
    z-index: 1000;
    box-shadow: 0 8px 16px rgba(0,0,0,0.4);
    margin-top: 1px;
}

.search-dropdown.active {
    display: block;
}

/* Custom Scrollbar */
.search-dropdown::-webkit-scrollbar {
    width: 6px;
}

.search-dropdown::-webkit-scrollbar-track {
    background: var(--bg);
}

.search-dropdown::-webkit-scrollbar-thumb {
    background: var(--muted2);
    border-radius: 3px;
}

.search-dropdown::-webkit-scrollbar-thumb:hover {
    background: var(--muted);
}

.search-section {
    border-bottom: 1px solid var(--line2);
}

.search-section:last-child {
    border-bottom: none;
}

.search-section-title {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--accent);
    padding: 10px 16px 6px;
    background: var(--bg);
    font-weight: 600;
    border-bottom: 1px solid var(--line2);
}

.search-result {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    cursor: pointer;
    transition: background .1s, border-left .1s;
    text-decoration: none;
    color: inherit;
    border-left: 2px solid transparent;
}

.search-result:hover {
    background: rgba(61,208,255,0.08);
    border-left-color: var(--accent);
}

.search-result-icon {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: .08em;
    color: var(--accent);
    background: rgba(61,208,255,0.1);
    padding: 3px 8px;
    border-radius: 2px;
    font-weight: 600;
}

.search-result-icon--Event {
    color: var(--yellow);
    background: rgba(245,197,66,0.12);
}

.search-result-icon--Organiser {
    color: #a78bfa;
    background: rgba(167,139,250,0.12);
}

.search-result-icon--Player {
    color: #34d399;
    background: rgba(52,211,153,0.12);
}

.search-result-icon--Decklist {
    color: #f472b6;
    background: rgba(244,114,182,0.12);
}

.search-result-icon--Team {
    color: #fb923c;
    background: rgba(251,146,60,0.12);
}

.search-result-name {
    font-family: var(--sans);
    font-size: 13px;
    color: var(--text);
    flex: 1;
    font-weight: 500;
}

.search-result:hover .search-result-name {
    color: var(--accent);
}

.search-result-meta {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--muted);
}

.search-no-results {
    padding: 20px 16px;
    text-align: center;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted);
}

.search-loading {
    padding: 20px 16px;
    text-align: center;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--accent);
    font-weight: 600;
}

.search-loading::after {
    content: '...';
    animation: dots 1.5s steps(4, end) infinite;
}

@keyframes dots {
    0%, 20% { content: '.'; }
    40% { content: '..'; }
    60%, 100% { content: '...'; }
}

/* ═════════════════════════════════════════
     OPTION C — GRADIENT ENERGY BAR
  ═════════════════════════════════════════ */
.strip-c {
    height: 2px;
    position: relative;
    overflow: hidden;
    background: var(--bg);
}

    .strip-c::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, transparent 0%, rgba(0,212,255,0.2) 20%, var(--accent) 40%, rgba(0,212,255,0.8) 50%, var(--accent) 60%, rgba(0,212,255,0.2) 80%, transparent 100% );
        background-size: 200% 100%;
        animation: energy 10s linear infinite;
    }

@keyframes energy {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

.tab-new {
    position: absolute;
    top: -6px;
    right: -4px;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #ffd54a;
    animation: New 1.5s ease-in-out infinite;
    text-shadow: 0 0 6px rgba(255, 213, 74, .9), 0 0 12px rgba(255, 213, 74, .7), 0 0 24px rgba(255, 213, 74, .5);
}

    .tab-new.hidden {
        display: none;
    }

@keyframes New {
    0%,100% {
        transform: scale(1) rotate(-8deg);
    }

    50% {
        transform: scale(1.18) rotate(-8deg);
    }
}

/* ══════════════════════════════════════════════════════════════════
   TICKER
   ══════════════════════════════════════════════════════════════════ */

.ticker-wrap {
    background: var(--accent);
    height: 28px;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
}

.ticker-label {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: .15em;
    text-transform: uppercase;
    background: var(--accent2);
    color: var(--on-accent);
    font-weight: 600;
    padding: 0 14px;
    height: 100%;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    white-space: nowrap;
    z-index: 2;
}

.ticker-track {
    display: flex;
    align-items: center;
    gap: 0;
    animation: ticker 40s linear infinite;
    white-space: nowrap;
}

.ticker-item {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--on-accent);
    padding: 0 28px;
    opacity: .9;
    border-right: 1px solid rgba(0,0,0,0.15);
}

.ticker-item strong { 
    opacity: 1; 
    font-weight: 600; 
}

.ticker-item .ticker-up {
    color: var(--up-dark);
    font-weight: 700;
}

.ticker-item .ticker-down {
    color: var(--down-dark);
    font-weight: 700;
}

@keyframes ticker {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ══════════════════════════════════════════════════════════════════
   STATS ROW
   ══════════════════════════════════════════════════════════════════ */

.stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-bottom: 1px solid var(--line);
}

.stat-block {
    padding: 22px 28px;
    border-right: 1px solid var(--line);
    position: relative;
    overflow: hidden;
}

.stat-block:last-child { 
    border-right: none; 
}

.stat-block::after {
    content: '';
    position: absolute;
    bottom: 0; 
    left: 28px; 
    right: 28px;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s ease;
}

.stat-block:hover::after { 
    transform: scaleX(1); 
}

.stat-label {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 6px;
}

.stat-value {
    font-family: var(--display);
    font-size: 48px;
    color: var(--text);
    line-height: 1;
    letter-spacing: 1px;
}

.stat-value span { 
    color: var(--accent); 
}

.stat-sub {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--muted);
    margin-top: 6px;
}

/* ══════════════════════════════════════════════════════════════════
   PANELS & SECTIONS
   ══════════════════════════════════════════════════════════════════ */

.main {
    display: grid;
    grid-template-columns: 360px 1fr;
    min-height: calc(100vh - 52px - 28px - 88px);
}

.meta-panel {
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
}

.panel-head {
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.panel-title {
    font-family: var(--display);
    font-size: 22px;
    letter-spacing: 1px;
    color: var(--text);
    line-height: 1;
}

.panel-meta {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--accent);
}

.filter-row {
    display: flex;
    padding: 10px 20px;
    gap: 4px;
    border-bottom: 1px solid var(--line2);
}

.fpill {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 4px 10px;
    border: 1px solid var(--muted2);
    border-radius: 2px;
    background: none;
    color: var(--muted);
    cursor: pointer;
    transition: all .12s;
}

.fpill.active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
    font-weight: 600;
}

.fpill:hover:not(.active) { 
    border-color: var(--muted); 
    color: var(--text); 
}

/* ══════════════════════════════════════════════════════════════════
   META ROWS
   ══════════════════════════════════════════════════════════════════ */

.meta-list { 
    flex: 1; 
}

.meta-row {
    display: grid;
    grid-template-columns: 28px 1fr 52px 48px;
    align-items: center;
    padding: 9px 20px;
    border-bottom: 1px solid var(--line2);
    cursor: pointer;
    transition: background .1s;
    gap: 8px;
    text-decoration: none;
    color: inherit;
}

.meta-row:hover { 
    background: rgba(255,255,255,0.025); 
}

.meta-rank {
    font-family: var(--display);
    font-size: 20px;
    color: var(--muted2);
    line-height: 1;
    text-align: right;
}

.meta-rank.top3 { 
    color: var(--accent); 
}

.meta-name-col { 
    display: flex; 
    flex-direction: column; 
    gap: 4px; 
    min-width: 0; 
}

.meta-name {
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.meta-bar-bg {
    height: 2px;
    background: var(--line);
    border-radius: 0;
    overflow: hidden;
}

.meta-bar-fill {
    height: 100%;
    background: var(--accent);
    opacity: 0.5;
}

.meta-pct {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--text);
    text-align: right;
}

.meta-delta {
    font-family: var(--mono);
    font-size: 10px;
    text-align: right;
    white-space: nowrap;
}

.up { color: var(--up); }
.down { color: var(--down); }

/* ══════════════════════════════════════════════════════════════════
   EVENTS
   ══════════════════════════════════════════════════════════════════ */

.right-col {
    display: flex;
    flex-direction: column;
}

.events-head {
    padding: 16px 24px 12px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ev-filters { 
    display: flex; 
    gap: 4px; 
}

.ev-format {
    background: var(--bg3);
    color: var(--accent);
    border: 1px solid var(--accent);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
}

.event-row {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 14px;
    padding: 10px 24px;
    border-bottom: 1px solid var(--line2);
    cursor: pointer;
    transition: background .1s;
    text-decoration: none;
    color: inherit;
}

.event-row:hover { 
    background: rgba(255,255,255,0.025); 
}

.ev-badge {
    font-family: var(--mono);
    font-size: 8px;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 3px 7px;
    border-radius: 2px;
    white-space: nowrap;
}

.ev-s1 { 
    background: rgba(107,106,101,0.15); 
    color: var(--muted);   
    border: 1px solid var(--muted2); 
}

.ev-s2 { 
    background: rgba(61,208,255,0.18);  
    color: var(--accent);  
    border: 1px solid rgba(61,208,255,0.4); 
}

.ev-s3 { 
    background: rgba(61,208,255,0.25);
    color: var(--accent);
    border: 1px solid var(--accent);
    font-weight: 600;
}

.ev-name {
    font-family: var(--sans);
    font-size: 13px;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ev-date {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted);
    white-space: nowrap;
}

.ev-arrow { 
    color: var(--muted2); 
    font-size: 16px; 
    line-height: 1; 
}

.event-row:hover .ev-arrow { 
    color: var(--accent); 
}

.view-all-row {
    padding: 10px 24px;
    border-top: 1px solid var(--line);
    text-align: right;
}

.view-all-row a {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--accent);
    text-decoration: none;
}

.view-all-row a:hover { 
    text-decoration: underline; 
}

/* ══════════════════════════════════════════════════════════════════
   CARDS TO WATCH
   ══════════════════════════════════════════════════════════════════ */

.cards-section {
    background: var(--bg2);
    padding: 20px 24px;
}

.cards-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 16px;
}

.cards-sub {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
}

.cards-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
}

.upcoming-section {
    background: var(--bg2);
    padding: 20px 24px;
}

.upcoming-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 10px;
}

.upcoming-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--bg3);
    border: 1px solid var(--line2);
    border-radius: 4px;
    text-decoration: none;
    color: inherit;
    transition: border-color .1s;
}

.upcoming-card:hover {
    border-color: var(--accent);
}

.upcoming-card-info {
    flex: 1;
    min-width: 0;
}

.upcoming-card-name {
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.upcoming-card-meta {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted);
    margin-top: 2px;
}

.upcoming-card-countdown {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--accent);
    background: rgba(61,208,255,0.1);
    padding: 3px 8px;
    border-radius: 2px;
    flex-shrink: 0;
}

/* Uses the shared .archetype-card visuals (same as decklist/archetype card images);
   this only resets the anchor styling since the whole card links to its archetype. */
.watch-card {
    display: block;
    text-decoration: none;
    color: inherit;
}

.card-spike {
    position: absolute;
    top: 6px;
    right: 6px;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
    color: var(--up);
    background: rgba(0,0,0,0.6);
    padding: 2px 5px;
    border-radius: 2px;
}

.card-id {
    font-family: var(--mono);
    font-size: 9px;
    color: var(--muted);
    margin-top: 2px;
}

/* ══════════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════════ */

.footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 48px 28px 32px;
    border-top: 1px solid var(--line);
    background: var(--bg2);
    gap: 24px;
}

/* Footer Socials */
.footer-socials {
    display: flex;
    gap: 16px;
    justify-content: center;
}

.footer-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    background: var(--bg3);
    border: 1px solid var(--line);
    color: var(--muted);
    transition: all .2s ease;
    text-decoration: none;
}

    .footer-social-link:hover {
        background: var(--accent);
        color: var(--on-accent);
        border-color: var(--accent);
        transform: translateY(-2px);
    }

    .footer-social-link i {
        font-size: 20px;
    }

    .footer-social-link .x-logo {
        width: 20px;
        height: 20px;
    }

.footer-links {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    margin: 8px 0 4px;
}

.footer-link {
    font-size: 0.78rem;
    color: var(--muted, rgba(255,255,255,.45));
    text-decoration: none;
    transition: color .15s;
}

.footer-link:hover { color: #fff; }

.footer-link-sep {
    color: var(--muted, rgba(255,255,255,.25));
    font-size: 0.78rem;
}

.footer-legal-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    max-width: 900px;
}

.footer-copy {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted);
    letter-spacing: .05em;
}

.footer-legal {
    font-family: var(--sans);
    font-size: 11px;
    color: var(--muted2);
    line-height: 1.6;
    max-width: 800px;
}

@media (max-width: 600px) {
    .footer {
        padding: 32px 20px 24px;
        margin-top: 40px;
        gap: 20px;
    }

    .footer-social-link {
        width: 36px;
        height: 36px;
    }

        .footer-social-link .x-logo {
            width: 18px;
            height: 18px;
        }

    .footer-copy {
        font-size: 10px;
    }

    .footer-legal {
        font-size: 10px;
    }
}

/* ══════════════════════════════════════════════════════════════════
   ANIMATIONS
   ══════════════════════════════════════════════════════════════════ */

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.meta-row, .event-row {
    animation: fadeUp .25s ease both;
}

/* ══════════════════════════════════════════════════════════════════
   FORM COMPONENTS (SHARED)
   ══════════════════════════════════════════════════════════════════ */

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-label {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

.form-label-icon {
    color: var(--accent);
    font-size: 12px;
    cursor: help;
    transition: color .15s;
}

.form-label-icon:hover {
    color: var(--text);
}

.form-control {
    display: block;
    width: 100%;
    font-family: var(--sans);
    font-size: 14px;
    padding: 10px 12px;
    background: var(--bg3);
    border: 1px solid var(--line);
    color: var(--text);
    border-radius: 2px;
    transition: border-color .15s, background .15s;
}

.form-control:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--bg);
}

.form-control::placeholder {
    color: var(--muted2);
}

select.form-control {
    cursor: pointer;
}

textarea.form-control {
    font-family: var(--mono);
    font-size: 12px;
    resize: vertical;
    min-height: 120px;
}

/* Overrides textarea.form-control above — needs the ID, not a class, to out-specificity that
   element+class selector. This is a short "what did you change" note, not a paste-a-decklist box,
   so it keeps the regular sans/14px input look and a much shorter default height (still
   user-resizable via the drag handle). */
#version-note-input {
    font-family: var(--sans);
    font-size: 14px;
    min-height: 44px;
}

.text-danger {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--down);
    margin-top: 4px;
}

/* ── DATE PICKER ── */
.flatpickr-calendar {
    background: var(--bg2) !important;
    border: 1px solid var(--line) !important;
    border-radius: 3px !important;
    box-shadow: 0 8px 16px rgba(0,0,0,0.4) !important;
    font-family: var(--sans) !important;
}

.flatpickr-calendar.open {
    z-index: 10000 !important;
}

.flatpickr-months {
    background: var(--bg3) !important;
    border-bottom: 1px solid var(--line) !important;
    padding: 10px !important;
}

.flatpickr-current-month {
    color: var(--text) !important;
    font-family: var(--sans) !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
    background: var(--bg3) !important;
    border: 1px solid var(--line) !important;
    color: var(--text) !important;
    font-family: var(--sans) !important;
    appearance: none;
}

.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
    background: var(--bg) !important;
}

.flatpickr-current-month input.cur-year {
    color: var(--text) !important;
    background: transparent !important;
    font-family: var(--sans) !important;
}

.flatpickr-weekdays {
    background: var(--bg3) !important;
    border-bottom: 1px solid var(--line2) !important;
}

.flatpickr-weekday {
    color: var(--accent) !important;
    font-family: var(--mono) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
}

.flatpickr-days {
    background: var(--bg2) !important;
}

.dayContainer {
    background: var(--bg2) !important;
}

.flatpickr-day {
    color: var(--text) !important;
    border-radius: 2px !important;
    font-family: var(--sans) !important;
    border: 1px solid transparent !important;
}

.flatpickr-day:hover:not(.flatpickr-disabled):not(.selected) {
    background: rgba(61,208,255,0.1) !important;
    border-color: var(--accent) !important;
}

.flatpickr-day.today {
    border-color: var(--accent) !important;
    background: transparent !important;
}

.flatpickr-day.today:hover {
    background: rgba(61,208,255,0.1) !important;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover {
    background: var(--accent) !important;
    color: var(--on-accent) !important;
    border-color: var(--accent) !important;
    font-weight: 600 !important;
}

.flatpickr-day.disabled,
.flatpickr-day.disabled:hover {
    color: var(--muted2) !important;
    cursor: not-allowed !important;
    background: transparent !important;
}

.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: var(--muted) !important;
}

.flatpickr-day.inRange {
    background: rgba(61,208,255,0.15) !important;
    border-color: transparent !important;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    fill: var(--text) !important;
    padding: 10px !important;
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
    fill: var(--accent) !important;
}

.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
    width: 14px !important;
    height: 14px !important;
}

.numInputWrapper {
    background: var(--bg3) !important;
    border-radius: 2px !important;
}

.numInputWrapper:hover {
    background: var(--bg) !important;
}

.numInputWrapper span {
    border: none !important;
    background: transparent !important;
}

.numInputWrapper span:hover {
    background: rgba(61,208,255,0.1) !important;
}

.numInputWrapper span.arrowUp:after,
.numInputWrapper span.arrowDown:after {
    border-bottom-color: var(--text) !important;
    border-top-color: var(--text) !important;
}

.numInput {
    color: var(--text) !important;
    background: transparent !important;
    font-family: var(--sans) !important;
}

.flatpickr-time {
    background: var(--bg3) !important;
    border-top: 1px solid var(--line) !important;
}

.flatpickr-time input {
    color: var(--text) !important;
    background: var(--bg3) !important;
    font-family: var(--mono) !important;
}

.flatpickr-time input:hover,
.flatpickr-time input:focus {
    background: var(--bg) !important;
}

.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm {
    color: var(--text) !important;
    font-family: var(--mono) !important;
}

.flatpickr-time .flatpickr-am-pm {
    background: var(--bg3) !important;
}

.flatpickr-time .flatpickr-am-pm:hover {
    background: var(--bg) !important;
}

/* Ensure proper positioning */
.flatpickr-input {
    position: relative;
}

.flatpickr-calendar.inline {
    top: auto !important;
    left: auto !important;
}

.flatpickr-calendar.static {
    position: absolute !important;
    top: 100% !important;
}

.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after {
    border-bottom-color: var(--bg2) !important;
}

.flatpickr-calendar.arrowBottom:before,
.flatpickr-calendar.arrowBottom:after {
    border-top-color: var(--bg2) !important;
}

/* ══════════════════════════════════════════════════════════════════
   FAQ PAGE
   ══════════════════════════════════════════════════════════════════ */

.faq-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 24px;
}

.faq-header {
    margin-bottom: 32px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--accent);
}

.faq-title {
    font-family: var(--display);
    font-size: 48px;
    letter-spacing: 2px;
    color: var(--text);
    line-height: 1;
    margin-bottom: 8px;
}

.faq-subtitle {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.faq-item {
    background: var(--bg2);
    border: 1px solid var(--line);
    transition: border-color .2s;
}

.faq-item:first-child {
    border-radius: 4px 4px 0 0;
}

.faq-item:last-child {
    border-radius: 0 0 4px 4px;
}

.faq-item.active {
    border-color: var(--accent);
}

.faq-question {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    cursor: pointer;
    transition: background .15s;
    user-select: none;
}

.faq-question:hover {
    background: rgba(61,208,255,0.05);
}

.faq-item.active .faq-question {
    background: rgba(61,208,255,0.08);
}

.faq-icon {
    font-family: var(--mono);
    font-size: 16px;
    color: var(--muted);
    transition: transform .2s, color .2s;
    min-width: 20px;
    text-align: center;
}

.faq-item.active .faq-icon {
    transform: rotate(90deg);
    color: var(--accent);
}

.faq-question-text {
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 500;
    color: var(--text);
    flex: 1;
    line-height: 1.5;
}

.faq-item.active .faq-question-text {
    color: var(--accent);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
}

.faq-item.active .faq-answer {
    max-height: 1000px;
}

.faq-answer-content {
    padding: 0 20px 20px 52px;
    font-family: var(--sans);
    font-size: 14px;
    line-height: 1.7;
    color: var(--text);
}

.faq-answer-content p {
    margin-bottom: 12px;
}

.faq-answer-content p:last-child {
    margin-bottom: 0;
}

.faq-answer-content a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color .15s;
}

.faq-answer-content a:hover {
    border-bottom-color: var(--accent);
}

.faq-answer-content ul,
.faq-answer-content ol {
    margin-left: 20px;
    margin-bottom: 12px;
}

.faq-answer-content li {
    margin-bottom: 6px;
}

.faq-answer-content code {
    font-family: var(--mono);
    font-size: 13px;
    background: var(--bg3);
    padding: 2px 6px;
    border-radius: 2px;
    color: var(--accent);
}

.faq-answer-content strong {
    color: var(--accent);
    font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════════
   SUBMIT FORM
   ══════════════════════════════════════════════════════════════════ */

.submit-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px;
}

.submit-alert {
    background: rgba(61,208,255,0.12);
    border: 1px solid rgba(61,208,255,0.3);
    border-left: 3px solid var(--accent);
    padding: 16px 20px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-radius: 3px;
}

.submit-alert-content {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.submit-alert-icon {
    color: var(--accent);
    font-size: 16px;
}

.submit-alert-text {
    font-family: var(--sans);
    font-size: 13px;
    color: var(--text);
    line-height: 1.5;
}

.submit-alert-btn {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 8px 16px;
    background: var(--accent);
    color: var(--on-accent);
    border: none;
    border-radius: 2px;
    cursor: pointer;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s;
}

.submit-alert-btn:hover {
    background: var(--accent2);
}

.submit-section {
    background: var(--bg2);
    border: 1px solid var(--line);
    border-radius: 4px;
    margin-bottom: 24px;
}

.submit-section-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--line);
}

.submit-section-title {
    font-family: var(--display);
    font-size: 28px;
    letter-spacing: 1px;
    color: var(--text);
    line-height: 1;
}

.submit-section-body {
    padding: 24px;
}

.submit-form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.submit-form-row:last-child {
    margin-bottom: 0;
}

.submit-info-banner {
    background: var(--bg3);
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    padding: 14px 16px;
    margin-bottom: 20px;
    border-radius: 3px;
}

.submit-info-text {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text);
    line-height: 1.6;
}

.submit-info-text strong {
    color: var(--accent);
    font-weight: 600;
}

.submit-info-text em {
    color: var(--muted);
}

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

.deck-card {
    background: var(--bg3);
    border: 1px solid var(--line);
    border-radius: 3px;
    display: flex;
    flex-direction: column;
    transition: border-color .2s;
}

.deck-card:hover {
    border-color: var(--accent);
}

.deck-card-header {
    padding: 16px;
    border-bottom: 1px solid var(--line);
    background: rgba(61,208,255,0.03);
}

.deck-card-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.deck-card-title {
    font-family: var(--display);
    font-size: 20px;
    letter-spacing: 1px;
    color: var(--accent);
    line-height: 1;
}

.deck-remove-btn {
    font-family: var(--mono);
    font-size: 10px;
    padding: 6px 10px;
    background: rgba(248,113,113,0.15);
    border: 1px solid rgba(248,113,113,0.3);
    color: var(--down);
    border-radius: 2px;
    cursor: pointer;
    transition: all .15s;
}

.deck-remove-btn:hover {
    background: var(--down);
    color: var(--on-accent);
    border-color: var(--down);
}

.deck-card-fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.deck-card-body {
    padding: 16px;
}

.add-deck-btn {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 12px 20px;
    background: var(--bg3);
    border: 1px dashed var(--line);
    color: var(--accent);
    border-radius: 3px;
    cursor: pointer;
    transition: all .15s;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
}

.add-deck-btn:hover {
    border-color: var(--accent);
    background: rgba(61,208,255,0.08);
}

.submit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 24px 0;
}

.submit-btn {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 14px 32px;
    background: var(--accent);
    color: var(--on-accent);
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-weight: 600;
    transition: background .15s, transform .15s;
}

.submit-btn:hover {
    background: var(--accent2);
    transform: translateY(-1px);
}

.submit-btn:active {
    transform: translateY(0);
}

/* ══════════════════════════════════════════════════════════════════
   SUCCESS PAGE
   ══════════════════════════════════════════════════════════════════ */

.success-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 52px - 28px - 88px);
    padding: 40px 24px;
}

.success-card {
    background: var(--bg2);
    border: 1px solid var(--line);
    border-top: 3px solid var(--accent);
    border-radius: 4px;
    max-width: 600px;
    width: 100%;
    padding: 48px 40px;
    text-align: center;
    animation: successSlideUp 0.4s ease;
}

@keyframes successSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.success-icon-wrapper {
    position: relative;
    display: inline-block;
    margin-bottom: 24px;
}

.success-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(61,208,255,0.15);
    border: 2px solid var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: var(--accent);
    animation: successPulse 2s ease-in-out infinite;
}

@keyframes successPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(61,208,255,0.4);
    }
    50% {
        box-shadow: 0 0 0 20px rgba(61,208,255,0);
    }
}

.success-title {
    font-family: var(--display);
    font-size: 42px;
    letter-spacing: 2px;
    color: var(--accent);
    line-height: 1;
    margin-bottom: 16px;
}

.success-message {
    font-family: var(--sans);
    font-size: 15px;
    color: var(--text);
    line-height: 1.6;
    margin-bottom: 32px;
}

.success-details {
    background: var(--bg3);
    border: 1px solid var(--line);
    border-radius: 3px;
    padding: 20px;
    margin-bottom: 32px;
}

.success-detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--line2);
}

.success-detail-item:last-child {
    border-bottom: none;
}

.success-detail-label {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}

.success-detail-value {
    font-family: var(--sans);
    font-size: 14px;
    color: var(--text);
    font-weight: 500;
}

.success-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.success-btn {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 14px 28px;
    border-radius: 3px;
    cursor: pointer;
    font-weight: 600;
    text-decoration: none;
    transition: all .15s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.success-btn-primary {
    background: var(--accent);
    color: var(--on-accent);
    border: 1px solid var(--accent);
}

.success-btn-primary:hover {
    background: var(--accent2);
    border-color: var(--accent2);
    transform: translateY(-1px);
}

.success-btn-secondary {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--line);
}

.success-btn-secondary:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.success-note {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--line2);
}

.success-note-text {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted);
    line-height: 1.6;
}

/* ══════════════════════════════════════════════════════════════════
   TOURNAMENT DECKLIST SUBMIT
   ══════════════════════════════════════════════════════════════════ */

.tournament-decklist-container {
    max-width: 500px;
    margin: 0 auto;
    padding: 40px 24px;
}

.tournament-selector-card {
    background: var(--bg2);
    border: 1px solid var(--line);
    border-radius: 4px;
    margin-bottom: 32px;
}

.tournament-selector-header {
    padding: 20px;
    border-bottom: 1px solid var(--line);
}

.tournament-selector-title {
    font-family: var(--display);
    font-size: 22px;
    letter-spacing: 1px;
    color: var(--text);
    line-height: 1.2;
}

.tournament-selector-body {
    padding: 20px;
}

.player-selector {
    font-family: var(--sans);
    font-size: 14px;
    padding: 12px 14px;
    background: var(--bg3);
    border: 1px solid var(--line);
    color: var(--text);
    border-radius: 2px;
    width: 100%;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.player-selector:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--bg);
}

.player-selector option {
    background: var(--bg2);
    color: var(--text);
    padding: 8px;
}

.tournament-decklist-card {
    background: var(--bg2);
    border: 1px solid var(--line);
    border-radius: 4px;
    animation: fadeSlideIn 0.3s ease;
}

@keyframes fadeSlideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tournament-decklist-header {
    padding: 20px;
    border-bottom: 1px solid var(--line);
    background: rgba(61,208,255,0.03);
}

.tournament-decklist-fields {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tournament-decklist-body {
    padding: 20px;
}

.tournament-submit-actions {
    display: flex;
    justify-content: flex-end;
    padding: 24px 0;
}

.tournament-submit-btn {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 14px 32px;
    background: var(--accent);
    color: var(--on-accent);
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-weight: 600;
    transition: background .15s, transform .15s;
}

.tournament-submit-btn:hover {
    background: var(--accent2);
    transform: translateY(-1px);
}

.tournament-submit-btn:active {
    transform: translateY(0);
}

/* ══════════════════════════════════════════════════════════════════
   TOURNAMENT START SUCCESS
   ══════════════════════════════════════════════════════════════════ */

.tournament-success-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 32px;
}

.tournament-success-top .success-card {
    margin-bottom: 0;
}

.tournament-qr-code {
    text-align: center;
    margin-bottom: 16px;
}

.tournament-qr-code qr-code {
    width: 100%;
    max-width: 200px;
    margin: 0 auto;
    display: block;
}

.tournament-url-container {
    display: flex;
    gap: 8px;
}

.tournament-url-input {
    flex: 1;
}

.tournament-url-help {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted);
    margin-top: 8px;
}

.form-label {
    margin-bottom: 8px;
    display: block;
}

.tournament-standings-grid {
    display: grid;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow: hidden;
}

.tournament-standing-item {
    display: grid;
    grid-template-columns: 80px 2fr 3fr auto;
    align-items: center;
    gap: 20px;
    padding: 12px 16px;
    background: var(--bg3);
    transition: background .1s;
}

.tournament-standing-item:hover {
    background: rgba(61,208,255,0.05);
}

.tournament-standing-rank {
    font-family: var(--display);
    font-size: 24px;
    color: var(--accent);
    letter-spacing: 1px;
    text-align: center;
}

.tournament-standing-player-name {
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 500;
    color: var(--text);
}

.tournament-standing-status {
    text-align: right;
}

.tournament-standing-pending {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 4px 10px;
    background: rgba(138,137,133,0.15);
    border: 1px solid var(--muted2);
    color: var(--muted);
    border-radius: 2px;
}

/* ══════════════════════════════════════════════════════════════════
   ARCHETYPE DETAILS PAGE
   ══════════════════════════════════════════════════════════════════ */

.archetype-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px;
}

/* Header */
.archetype-header {
    background: var(--bg2);
    border: 1px solid var(--line);
    border-top: 3px solid var(--accent);
    border-radius: 4px;
    padding: 32px;
    margin-bottom: 32px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 32px;
}

.archetype-title {
    font-family: var(--display);
    font-size: 48px;
    letter-spacing: 2px;
    color: var(--text);
    line-height: 1;
    margin-bottom: 16px;
}

.archetype-rules-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted, #888);
    text-decoration: none;
    margin-bottom: 16px;
}

.archetype-rules-link:hover {
    color: var(--accent);
}

.archetype-meta-share {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--sans);
    font-size: 15px;
}

.archetype-meta-label {
    color: var(--muted);
    font-weight: 600;
}

.archetype-meta-value {
    color: var(--text);
    font-size: 18px;
    font-weight: 600;
}

.archetype-meta-change {
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}

.archetype-meta-change.up {
    color: var(--up);
}

.archetype-meta-change.down {
    color: var(--down);
}

.archetype-meta-arrow {
    font-size: 16px;
}

.archetype-header-stats {
    display: flex;
    gap: 32px;
}

.archetype-stat-item {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.archetype-stat-label {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}

.archetype-stat-value {
    font-family: var(--display);
    font-size: 28px;
    letter-spacing: 1px;
    color: var(--accent);
    line-height: 1;
    display: flex;
    align-items: center;
    gap: 6px;
}

.archetype-stat-value i {
    font-size: 20px;
}

.archetype-momentum-hot { color: var(--up); }
.archetype-momentum-cold { color: var(--down); }
.archetype-momentum-neutral { color: var(--muted); }

/* Sections */
.archetype-section {
    background: var(--bg2);
    border: 1px solid var(--line);
    border-radius: 4px;
    margin-bottom: 24px;
}

.archetype-section-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.archetype-section-title {
    font-family: var(--display);
    font-size: 28px;
    letter-spacing: 1px;
    color: var(--text);
    line-height: 1;
}

.archetype-section-count {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--accent);
}

.archetype-section-subtitle {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted);
}

.archetype-section-body {
    padding: 24px;
}

/* Overview/History Tabs */
.archetype-tabs {
    display: flex;
    border-bottom: 1px solid var(--line);
    margin-bottom: 24px;
}

.archetype-tab {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 16px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--muted);
    cursor: pointer;
    transition: all .15s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.archetype-tab:hover {
    color: var(--text);
    background: rgba(255,255,255,0.03);
}

.archetype-tab.active {
    color: var(--accent);
    background: rgba(61,208,255,0.05);
    border-bottom-color: var(--accent);
}

/* History Timeline */
.archetype-history-meta {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted);
    margin-bottom: 20px;
}

.archetype-history-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    border-left: 2px solid var(--line);
}

.archetype-history-entry {
    position: relative;
    display: flex;
    gap: 16px;
    padding: 0 0 28px 24px;
    margin-left: -1px;
}

.archetype-history-entry-marker {
    position: absolute;
    left: -11px;
    top: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--bg2);
    border: 2px solid var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: var(--accent);
}

.archetype-history-entry-body {
    flex: 1;
    background: var(--bg2);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 16px 20px;
}

.archetype-history-entry-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.archetype-history-entry-badge {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--accent);
}

.archetype-history-entry-date {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted);
}

.archetype-history-entry-title {
    font-family: var(--display);
    font-size: 18px;
    color: var(--text);
    margin: 0 0 6px;
}

.archetype-history-entry-summary {
    font-size: 13px;
    color: var(--text);
    opacity: .85;
    margin: 0 0 8px;
    line-height: 1.5;
}

.archetype-history-entry-changes {
    margin: 0 0 8px;
    padding-left: 18px;
    font-size: 12px;
    color: var(--muted);
    line-height: 1.6;
}

.archetype-history-entry-deck {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--accent);
    text-decoration: none;
}

.archetype-history-entry-deck:hover {
    text-decoration: underline;
}

.archetype-history-empty,
.archetype-history-loading,
.archetype-history-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 48px 24px;
    color: var(--muted);
    font-size: 13px;
    text-align: center;
}

.archetype-history-empty-icon {
    font-size: 32px;
}

/* Cards Grid */
.archetype-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 20px;
}

.archetype-card {
    cursor: pointer;
    transition: transform .2s;
}

.archetype-card:hover {
    transform: translateY(-4px);
}

.archetype-card-image {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    transition: box-shadow .2s;
}

.archetype-card:hover .archetype-card-image {
    box-shadow: 0 8px 16px rgba(61,208,255,0.3);
}

.archetype-card-image img {
    width: 100%;
    height: auto;
    display: block;
}

.archetype-card-stat {
    position: absolute;
    background: rgba(0,0,0,0.85);
    padding: 6px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid var(--line);
}

.archetype-card-stat-avg {
    bottom: 0;
    right: 0;
    border-top-left-radius: 6px;
}

.archetype-card-stat-freq {
    bottom: 0;
    left: 0;
    border-top-right-radius: 6px;
}

.archetype-card-stat-value {
    font-family: var(--display);
    font-size: 16px;
    color: var(--accent);
    line-height: 1;
}

.archetype-card-stat-label {
    font-family: var(--mono);
    font-size: 8px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}

.archetype-card-name {
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 500;
    color: var(--text);
    text-align: center;
    margin-top: 8px;
    line-height: 1.3;
}

.archetype-card-trending-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--up);
    color: var(--on-accent);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    box-shadow: 0 2px 8px rgba(74,222,128,0.4);
}

/* Chart */
.archetype-chart-container {
    height: 400px;
    position: relative;
    background: var(--bg3);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 24px;
}

.archetype-chart-container canvas {
    background: transparent;
}

/* Chart loading state */
.archetype-chart-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 400px;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted);
    letter-spacing: .1em;
}

/* Chart empty state */
.archetype-chart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 400px;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted);
}

.archetype-chart-empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.3;
}

/* Fingerprint section */
.archetype-fingerprint-stats {
    display: flex;
    gap: 32px;
    margin-bottom: 24px;
}

.archetype-fingerprint-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.archetype-fingerprint-block-title {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 12px;
}

.archetype-chart-container--sm {
    height: 240px;
    padding: 16px;
}


.archetype-decklists {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow: hidden;
}

.archetype-decklist-item {
    display: grid;
    grid-template-columns: 80px 2fr 3fr 70px;
    align-items: center;
    gap: 20px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--line2);
    background: var(--bg3);
    text-decoration: none;
    color: inherit;
    transition: background .1s, border-left .2s;
}

.archetype-decklist-item:hover {
    background: rgba(61,208,255,0.05);
    border-left-color: var(--accent);
}

.archetype-placement-badge {
    font-family: var(--display);
    font-size: 28px;
    letter-spacing: 1px;
    color: var(--accent);
    line-height: 1;
    min-width: 60px;
    text-align: center;
}

/* Add special styling for top 3 placements */
.archetype-decklist-item:nth-child(1) .archetype-placement-badge,
.archetype-decklist-item:nth-child(2) .archetype-placement-badge,
.archetype-decklist-item:nth-child(3) .archetype-placement-badge {
    color: var(--accent);
    font-weight: 600;
}

/* DNF badge — placement exceeds tournament player count */
.archetype-placement-dnf {
    color: var(--muted) !important;
    font-size: 18px !important;
    letter-spacing: 0.05em;
    opacity: 0.6;
}

.archetype-decklist-player {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.archetype-decklist-name {
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 500;
    color: var(--text);
}

.archetype-decklist-event {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.archetype-decklist-event-name {
    font-family: var(--sans);
    font-size: 13px;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.archetype-decklist-event-date {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted);
}

.archetype-decklist-level {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* ══════════════════════════════════════════════════════════════════
   DECKLIST DETAILS PAGE
   ══════════════════════════════════════════════════════════════════ */

.decklist-container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 24px;
    overflow: visible;
}

/* Header */
.decklist-header {
    background: var(--bg2);
    border: 1px solid var(--line);
    border-top: 3px solid var(--accent);
    border-radius: 4px;
    padding: 32px;
    margin-bottom: 24px;
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: start;
    gap: 32px;
}

.decklist-title {
    font-family: var(--display);
    font-size: 42px;
    letter-spacing: 2px;
    color: var(--text);
    line-height: 1;
    margin-bottom: 16px;
}

.decklist-player {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.decklist-player-label {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}

.decklist-player-name {
    font-family: var(--sans);
    font-size: 16px;
    font-weight: 500;
    color: var(--text);
}

.decklist-archetype {
    display: flex;
    align-items: center;
    gap: 8px;
}

.decklist-archetype-label {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}

.decklist-archetype-link {
    font-family: var(--sans);
    font-size: 14px;
    color: var(--accent);
    text-decoration: none;
    transition: color .15s;
}

.decklist-archetype-link:hover {
    color: var(--accent2);
}

.decklist-header-stats {
    display: flex;
    gap: 24px;
}

.decklist-stat-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.decklist-stat-label {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}

.decklist-stat-value {
    font-family: var(--display);
    font-size: 32px;
    letter-spacing: 1px;
    color: var(--accent);
    line-height: 1;
}

.decklist-price {
    color: var(--up);
}

/* Currency picker - a cog beside the Deck Value label opening a small menu (reuses the
   Export dropdown's .decklist-export-menu/-item styles) instead of a raw <select>. */
.decklist-currency {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.decklist-currency-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    color: var(--muted);
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    transition: color .15s, transform .3s;
}

.decklist-currency-btn:hover,
.decklist-currency-btn[aria-expanded="true"] {
    color: var(--accent);
    transform: rotate(60deg);
}

.decklist-currency-btn:focus-visible {
    outline: 1px solid var(--accent);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Sits inside the stat label, so undo the label's tiny uppercase tracking. */
.decklist-currency-menu {
    left: 0;
    right: auto;
    min-width: 120px;
    text-transform: none;
    letter-spacing: normal;
}

.decklist-currency-menu .decklist-export-item {
    padding: 10px 14px;
}

.decklist-currency-menu .decklist-export-item i {
    margin-left: auto;
}

.decklist-currency-menu .decklist-export-item.is-current {
    color: var(--accent);
}

.decklist-currency-symbol {
    display: inline-block;
    width: 12px;
    color: var(--muted);
}

/* Export Dropdown */
.decklist-export-dropdown {
    position: relative;
}

.decklist-export-btn {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 12px 20px;
    background: var(--bg3);
    border: 1px solid var(--line);
    color: var(--accent);
    border-radius: 3px;
    cursor: pointer;  
    transition: all .15s;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.decklist-export-btn:hover {
    border-color: var(--accent);
    background: rgba(61,208,255,0.08);
}

.decklist-export-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: var(--bg2);
    border: 1px solid var(--line);
    border-radius: 4px;
    min-width: 200px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.4);
    display: none;
    z-index: 1000;
}

.decklist-export-menu.active {
    display: block;
}

.decklist-export-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text);
    text-decoration: none;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: background .1s;
    border-bottom: 1px solid var(--line2);
}

.decklist-export-item:last-child {
    border-bottom: none;
}

.decklist-export-item:hover {
    background: rgba(61,208,255,0.08);
    color: var(--accent);
}

.decklist-export-item i {
    color: var(--accent);
}

/* Layout */
.decklist-layout {
    display: grid;
    /* minmax(0, 1fr), not 1fr: a plain 1fr column can't shrink below its widest content, so a
       drawn chart on the Fingerprint tab pushed the whole page wider than a phone. */
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 24px;
    align-items: start; /* Crucial for sticky to work in grid */
}

/* Sidebar */
.decklist-sidebar {
    position: sticky;
    top: 80px; /* Nav (52px) + Ticker (28px) */
    height: fit-content;
    align-self: start; /* Explicitly set alignment */
}

.decklist-event-card {
    background: var(--bg2);
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow: hidden;
}

.decklist-event-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--line);
}

.decklist-event-title {
    font-family: var(--display);
    font-size: 22px;
    letter-spacing: 1px;
    color: var(--text);
    line-height: 1;
}

.decklist-event-info {
    padding: 20px;
    border-bottom: 1px solid var(--line);
}

.decklist-event-detail {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--line2);
}

.decklist-event-detail:last-child {
    border-bottom: none;
}

.decklist-event-detail-label {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}

.decklist-event-detail-value {
    font-family: var(--sans);
    font-size: 13px;
    color: var(--text);
    font-weight: 500;
    text-align: right;
    max-width: 60%;
    word-wrap: break-word;
}

.decklist-event-standings {
    max-height: 500px;
    overflow-y: auto;
}

.decklist-standing-item {
    display: grid;
    grid-template-columns: 50px 1fr;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--line2);
    text-decoration: none;
    color: inherit;
    transition: background .1s;
}

.decklist-standing-item:hover {
    background: rgba(61,208,255,0.05);
}

.decklist-standing-item.active {
    background: rgba(61,208,255,0.1);
    border-left: 3px solid var(--accent);
}

.decklist-standing-place {
    font-family: var(--display);
    font-size: 20px;
    color: var(--accent);
    letter-spacing: 1px;
    text-align: center;
}


.decklist-standing-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.decklist-standing-name {
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.decklist-standing-player {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Main Content */
.decklist-main {
    background: var(--bg2);
    border: 1px solid var(--line);
    border-radius: 4px;
    min-width: 0;
}

/* Tabs */
.decklist-tabs {
    display: flex;
    border-bottom: 1px solid var(--line);
}

.decklist-tab {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 16px;
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    transition: all .15s;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 3px solid transparent;
}

.decklist-tab:hover {
    color: var(--text);
    background: rgba(255,255,255,0.03);
}

.decklist-tab.active {
    color: var(--accent);
    background: rgba(61,208,255,0.05);
    border-bottom-color: var(--accent);
}

.decklist-tab i {
    font-size: 14px;
}

/* Text View */
.decklist-text-columns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    padding: 24px;
}

.decklist-text-column {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.decklist-text-section {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.decklist-card-type {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 600;
    margin-top: 16px;
    margin-bottom: 8px;
    padding: 8px 12px;
    background: rgba(61,208,255,0.05);
    border-bottom: 1px solid var(--line);
    border-left: 3px solid var(--accent);
}

.decklist-card-type:first-child {
    margin-top:  0;
}

.decklist-card-item {
    position: relative;
    display: grid;
    grid-template-columns: 30px 1fr;
    align-items: baseline;
    gap: 12px;
    padding: 8px 12px;
    cursor: pointer;
    transition: background .1s;
    border-radius: 2px;
}

.decklist-card-item:hover {
    background: rgba(61,208,255,0.05);
}

.decklist-card-quantity {
    font-family: var(--mono);
    font-size: 14px;
    font-weight: 600;
    color: var(--accent);
    text-align: right;
}

.decklist-card-name {
    font-family: var(--sans);
    font-size: 14px;
    color: var(--text);
    line-height: 1.4;
}

/* Indicates which marketplace has the visitor's best price for this card — icon only, no
   price/link (those live in the card-detail modal — see MarketplacePriceHelper). Absolutely
   positioned rather than a third grid column so it doesn't disturb .decklist-card-item's
   30px/1fr layout; pointer-events: none so it can never intercept the row's own click-to-open. */
.decklist-card-marketplace-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 4px;
    pointer-events: none;
}

    .decklist-card-marketplace-icon img {
        width: 14px;
        height: 14px;
        object-fit: contain;
        border-radius: 2px;
        flex-shrink: 0;
    }

    .decklist-card-marketplace-icon i {
        font-size: 11px;
        color: var(--accent);
        flex-shrink: 0;
    }

    .decklist-card-marketplace-icon span {
        font-family: var(--mono);
        font-size: 11px;
        color: var(--up);
        font-weight: 600;
        white-space: nowrap;
    }

.decklist-card-preview {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    margin-left: 16px;
    z-index: 100;
}

.decklist-card-item:hover .decklist-card-preview {
    display: block;
}

.decklist-card-preview img {
    width: 250px;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.6);
    border: 2px solid var(--accent);
    cursor: pointer;
}

/* Card View */
.decklist-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 20px;
    padding: 24px;
}

.decklist-grid-card {
    cursor: pointer;
    transition: transform .2s;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.decklist-grid-card:hover {
    transform: translateY(-4px);
}

.decklist-grid-card-inner {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    transition: box-shadow .2s;
}

.decklist-grid-card:hover .decklist-grid-card-inner {
    box-shadow: 0 8px 16px rgba(61,208,255,0.3);
}

/* Quantity badge — always visible, top-left */
.decklist-grid-card-quantity {
    position: absolute;
    top: 6px;
    left: 6px;
    background: rgba(0,0,0,0.85);
    font-family: var(--display);
    font-size: 18px;
    color: var(--accent);
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid var(--line);
    line-height: 1.4;
    z-index: 1;
    pointer-events: none;
}

/* Shows which marketplace has the visitor's best price for this card, and that price — icon +
   value only, no link (the link lives in the card-detail modal — see MarketplacePriceHelper).
   pointer-events: none is load-bearing: an interactive element here previously intercepted
   clicks meant to open the modal. */
.decklist-grid-card-marketplace-icon {
    position: absolute;
    bottom: 6px;
    right: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 6px;
    background: rgba(0,0,0,0.85);
    border-radius: 4px;
    border: 1px solid var(--line);
    z-index: 1;
    pointer-events: none;
}

    .decklist-grid-card-marketplace-icon img {
        width: 14px;
        height: 14px;
        object-fit: contain;
        flex-shrink: 0;
    }

    .decklist-grid-card-marketplace-icon i {
        font-size: 11px;
        color: var(--accent);
        flex-shrink: 0;
    }

    .decklist-grid-card-marketplace-icon span {
        font-family: var(--mono);
        font-size: 10px;
        color: var(--up);
        font-weight: 600;
        white-space: nowrap;
    }

.decklist-grid-card-name {
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 500;
    color: var(--text);
    text-align: center;
    margin-top: 8px;
    line-height: 1.3;
}

/* ══════════════════════════════════════════════════════════════════
   EVENTS ALL PAGE
   ══════════════════════════════════════════════════════════════════ */

.events-all-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 24px;
}

.events-all-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-bottom: 24px;
    border-bottom: 2px solid var(--accent);
    margin-bottom: 32px;
    gap: 24px;
}

.events-all-header-main {
    flex: 1;
}

.events-all-title {
    font-family: var(--display);
    font-size: 48px;
    letter-spacing: 2px;
    color: var(--text);
    line-height: 1;
    margin-bottom: 8px;
}

.events-all-subtitle {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}

.events-all-stats {
    display: flex;
    gap: 32px;
}

.events-all-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.events-all-stat-value {
    font-family: var(--display);
    font-size: 36px;
    letter-spacing: 1px;
    color: var(--accent);
    line-height: 1;
}

.events-all-stat-label {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 4px;
}

.events-all-filters {
    margin-bottom: 24px;
}

.events-all-list {
    background: var(--bg2);
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow: hidden;
}

.events-all-row {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 20px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--line2);
    cursor: pointer;
    transition: background .1s;
    text-decoration: none;
    color: inherit;
    animation: fadeUp .25s ease both;
}

    .events-all-row:last-child {
        border-bottom: none;
    }

    .events-all-row:hover {
        background: rgba(255,255,255,0.025);
    }

.events-all-badge {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 2px;
    white-space: nowrap;
    min-width: 50px;
    text-align: center;
}

.events-all-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.events-all-name {
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.events-all-meta {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--muted);
    letter-spacing: .08em;
}

.events-all-date {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--muted);
    white-space: nowrap;
}

.events-all-arrow {
    color: var(--muted2);
    font-size: 18px;
    line-height: 1;
}

.events-all-row:hover .events-all-arrow {
    color: var(--accent);
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE NAVIGATION
   ══════════════════════════════════════════════════════════════════ */

/* Hamburger Menu Button (hidden on desktop) */
.nav-hamburger {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    align-items: center; /* Add this for horizontal centering */
    width: 24px;
    height: 20px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin: 0 8px; /* Reduce from 16px */
    margin-left: auto;
    transition: transform .3s ease;
    align-self: center; /* Add this to vertically center in flex parent */
}

    .nav-hamburger span {
        width: 100%;
        height: 2px;
        background: var(--muted);
        transition: all .3s ease;
        transform-origin: center;
    }

    .nav-hamburger:hover span {
        background: var(--accent);
    }

    .nav-hamburger.active span:nth-child(1) {
        transform: translateY(5px) rotate(45deg);
    }

    .nav-hamburger.active span:nth-child(2) {
        opacity: 0;
    }

    .nav-hamburger.active span:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }

/* Mobile Menu Overlay */
.mobile-menu-overlay {
    position: fixed;
    top: 52px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
    z-index: 150;
    display: none;
    opacity: 0;
    transition: opacity .3s ease;
}

    .mobile-menu-overlay.active {
        display: block;
        opacity: 1;
    }

.mobile-menu {
    background: var(--bg2);
    border-bottom: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    transform: translateY(-100%);
    transition: transform .3s ease;
}

.mobile-menu-overlay.active .mobile-menu {
    transform: translateY(0);
}

.mobile-menu-link {
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text);
    text-decoration: none;
    padding: 20px 24px;
    border-bottom: 1px solid var(--line2);
    transition: background .15s, color .15s;
}

    .mobile-menu-link:hover {
        background: rgba(61,208,255,0.05);
        color: var(--accent);
    }

.mobile-menu-submit {
    background: rgba(61,208,255,0.1);
    color: var(--accent);
    font-weight: 600;
}

    .mobile-menu-submit:hover {
        background: rgba(61,208,255,0.15);
    }

/* Mobile Search Button (hidden on desktop) */
.nav-search-mobile {
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    background: none;
    border: none;
    border-right: 1px solid var(--line);
    color: var(--muted);
    cursor: pointer;
    transition: color .15s, background .15s;
    height: 100%;
}

    .nav-search-mobile:hover {
        color: var(--accent);
        background: rgba(255,255,255,0.03);
    }

    .nav-search-mobile i {
        font-size: 16px;
    }

/* Mobile Search Overlay */
.mobile-search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg);
    z-index: 200;
    display: none;
    flex-direction: column;
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity .3s ease, transform .3s ease;
}

    .mobile-search-overlay.active {
        display: flex;
        opacity: 1;
        transform: translateY(0);
    }

.mobile-search-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--line);
}

.mobile-search-label {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--accent);
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 600;
}

.mobile-search-close {
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    padding: 8px;
    transition: color .15s;
}

    .mobile-search-close:hover {
        color: var(--accent);
    }

    .mobile-search-close i {
        font-size: 20px;
    }

.mobile-search-input-wrap {
    padding: 20px;
    border-bottom: 1px solid var(--line);
}

.mobile-search-input {
    width: 100%;
    background: var(--bg2);
    border: 1px solid var(--line);
    border-radius: 3px;
    padding: 14px 16px;
    font-family: var(--mono);
    font-size: 15px;
    color: var(--text);
    outline: none;
    transition: border-color .15s;
}

.archetype-decklist-archetype {
    font-family: var(--mono);
    font-size: 15px;
}

.mobile-search-input:focus {
    border-color: var(--accent);
}

    .mobile-search-input::placeholder {
        color: var(--muted2);
    }

.mobile-search-overlay .search-dropdown {
    position: static;
    border: none;
    border-radius: 0;
    max-height: none;
    flex: 1;
    overflow-y: auto;
    margin-top: 0;
    box-shadow: none;
    display: block;
}

    .mobile-search-overlay .search-dropdown:not(.active) {
        display: none;
    }

/* Custom Scrollbar for Event Standings */
.decklist-event-standings::-webkit-scrollbar {
    width: 6px;
}

.decklist-event-standings::-webkit-scrollbar-track {
    background: var(--bg);
}

.decklist-event-standings::-webkit-scrollbar-thumb {
    background: var(--muted2);
    border-radius: 3px;
}

    .decklist-event-standings::-webkit-scrollbar-thumb:hover {
        background: var(--muted);
    }

/* Firefox scrollbar */
.decklist-event-standings {
    scrollbar-width: thin;
    scrollbar-color: var(--muted2) var(--bg);
}

.decklist-share-btn {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 12px 20px;
    background: var(--bg3);
    border: 1px solid var(--line);
    color: var(--accent);
    border-radius: 3px;
    cursor: pointer;
    transition: all .15s;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    margin-left: auto;
}

.decklist-share-btn:hover {
    border-color: var(--accent);
    background: rgba(61,208,255,0.08);
}

.decklist-share-btn.copied {
    background: var(--accent);
    color: var(--on-accent);
    border-color: var(--accent);
}

.decklist-share-btn i {
    font-size: 13px;
}

.decklist-header-actions {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    flex-direction: column;
}

/* ══════════════════════════════════════════════════════════════════
   TOURNAMENT DEDICATED PAGE
   ══════════════════════════════════════════════════════════════════ */

/* ── Pie chart ── */
.tournament-pie-canvas-wrap {
    position: relative;
    width: 100%;
}

#archetypePieChart {
    width: 100% !important;
    height: 420px !important;
}

@media (max-width: 640px) {
    #archetypePieChart {
        height: 320px !important;
    }
}

@media (max-width: 400px) {
    #archetypePieChart {
        height: 260px !important;
    }
}

/* ── Winner inline in header ── */
.champion-inline {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding: 8px 12px;
    background: rgba(61,208,255,0.06);
    border: 1px solid rgba(61,208,255,0.2);
    border-radius: 6px;
    text-decoration: none;
    transition: border-color 0.15s;
    max-width: 420px;
}

    .champion-inline:hover {
        border-color: rgba(61,208,255,0.45);
    }

.champion-inline-trophy {
    font-size: 0.95rem;
    color: var(--accent);
    flex-shrink: 0;
    width: 16px;
    text-align: center;
}

.champion-inline-info {
    flex: 1;
    min-width: 0;
}

.champion-inline-winner {
    display: inline-block;
    font-family: var(--mono);
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--on-accent);
    background: var(--accent);
    border-radius: 3px;
    padding: 1px 5px;
    margin-bottom: 3px;
}

.champion-inline-player {
    display: block;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--accent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.champion-inline-sub {
    display: block;
    font-size: 0.75rem;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.champion-inline-arrow {
    color: var(--muted2);
    font-size: 0.75rem;
    flex-shrink: 0;
}

/* ── Stat panel ── */
.stat-panel {
    background: var(--bg2);
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.stat-panel-header {
    padding: 8px 14px;
    border-bottom: 1px solid var(--line2);
    font-size: 0.7rem;
    font-family: var(--mono);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
}

/* ── Analysis grid: top cut | pie chart ── */
.tournament-analysis-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
    align-items: stretch;
}

    .tournament-analysis-grid.full-width {
        grid-template-columns: 1fr;
    }

/* ── Top cut list ── */
.top-cut-list {
    display: flex;
    flex-direction: column;
}

.top-cut-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 12px;
    border-bottom: 1px solid var(--line2);
}

    .top-cut-row:last-child {
        border-bottom: none;
    }

.top-cut-rank {
    font-family: var(--mono);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--muted);
    width: 20px;
    flex-shrink: 0;
    text-align: right;
}

.top-cut-name {
    flex: 1;
    font-size: 0.82rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.top-cut-bar-track {
    width: 80px;
    height: 4px;
    background: var(--bg3);
    border-radius: 2px;
    overflow: hidden;
    flex-shrink: 0;
    align-self: center;
}

.top-cut-bar-fill {
    height: 100%;
    border-radius: 2px;
    background: var(--accent);
    opacity: 0.6;
}

.top-cut-count {
    font-family: var(--mono);
    font-size: 0.78rem;
    color: var(--accent);
    width: 20px;
    text-align: right;
    flex-shrink: 0;
}

.top-cut-pct {
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--muted);
    width: 38px;
    text-align: right;
    flex-shrink: 0;
}

/* ── Diversity inside top cut panel ── */
.top-cut-diversity {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-top: 1px solid var(--line);
    margin-top: auto;
}

.diversity-bar-track {
    flex: 1;
    height: 4px;
    background: var(--bg3);
    border-radius: 2px;
    overflow: hidden;
}

.diversity-bar-fill {
    height: 100%;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--accent2), var(--accent));
}

.diversity-bar-label {
    font-size: 0.68rem;
    color: var(--muted);
    flex-shrink: 0;
}

.diversity-bar-value {
    font-family: var(--mono);
    font-size: 0.78rem;
    color: var(--accent);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Top cut divider in results list ── */
.top-cut-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 16px;
    background: rgba(61,208,255,0.04);
    border-top: 1px solid rgba(61,208,255,0.2);
    border-bottom: 1px solid rgba(61,208,255,0.2);
}

.top-cut-divider-label {
    font-family: var(--mono);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent);
    white-space: nowrap;
}

.top-cut-divider-line {
    flex: 1;
    height: 1px;
    background: rgba(61,208,255,0.15);
}

.top-cut-divider--dnf {
    background: rgba(248, 113, 113, 0.04);
    border-top-color: rgba(248, 113, 113, 0.2);
    border-bottom-color: rgba(248, 113, 113, 0.2);
}

    .top-cut-divider--dnf .top-cut-divider-label {
        color: var(--down);
    }

    .top-cut-divider--dnf .top-cut-divider-line {
        background: rgba(248, 113, 113, 0.15);
    }

/* ── Archetype top-cut run (dropdown-selected single line) ── */
.archetype-run-select {
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--text);
    background: var(--bg3);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 5px 10px;
    cursor: pointer;
}

    .archetype-run-select:focus {
        outline: none;
        border-color: var(--accent);
    }

.archetype-run-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.archetype-run-stat-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .archetype-run-stat-block .champion-inline {
        margin-top: 0;
        height: 100%;
    }

/* Non-link variant of .champion-inline (e.g. a count, not a navigable pilot) */
.champion-inline--static:hover {
    border-color: rgba(61,208,255,0.2);
}

.archetype-run-stat-label {
    font-family: var(--mono);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
}

.archetype-run-stat-value {
    font-family: var(--mono);
    font-size: 1.05rem;
    color: var(--accent);
}

@media (max-width: 640px) {
    .archetype-run-stats {
        grid-template-columns: 1fr;
    }
}

/* Floating picker when a run-chart point ties between more than one event */
.archetype-run-event-picker {
    position: fixed;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    min-width: 180px;
    max-width: 280px;
    background: var(--bg2);
    border: 1px solid var(--line);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    overflow: hidden;
}

    .archetype-run-event-picker a {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 8px 12px;
        text-decoration: none;
        border-bottom: 1px solid var(--line);
    }

        .archetype-run-event-picker a:last-child {
            border-bottom: none;
        }

        .archetype-run-event-picker a:hover {
            background: var(--bg3);
        }

    .archetype-run-event-picker-name {
        font-size: 0.82rem;
        color: var(--text);
        font-weight: 600;
    }

    .archetype-run-event-picker-date {
        font-family: var(--mono);
        font-size: 0.68rem;
        color: var(--muted);
    }

@media (max-width: 640px) {
    .tournament-analysis-grid {
        grid-template-columns: 1fr !important;
    }

    .champion-inline {
        max-width: 100%;
    }
}

@media (max-width: 900px) {
    .main {
        grid-template-columns: 1fr;
    }

    .decklist-text-section {
        display: flex;
        flex-direction: column;
    }

    .decklist-header-actions {
        flex-direction: row;
    }


    .meta-panel {
        border-right: none;
        border-bottom: 1px solid var(--line);
    }

    .cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .stats-row {
        grid-template-columns: 1fr;
    }

    .stat-block {
        border-right: none;
        border-bottom: 1px solid var(--line);
    }

    .submit-form-row {
        grid-template-columns: 1fr;
    }

    .deck-grid {
        grid-template-columns: 1fr;
    }

    .submit-alert {
        flex-direction: column;
        align-items: flex-start;
    }

    .tournament-success-top {
        grid-template-columns: 1fr;
    }

    .archetype-header {
        flex-direction: column;
    }

    .archetype-header-stats {
        width: 100%;
        justify-content: space-between;
    }

    .archetype-stat-item {
        align-items: flex-start;
    }

    .archetype-cards-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }

    .archetype-fingerprint-grid {
        grid-template-columns: 1fr;
    }

    .archetype-decklist-item {
        grid-template-columns: 60px 1fr;
        gap: 16px;
    }

    .archetype-placement-badge {
        font-size: 24px;
        min-width: 50px;
    }

    .archetype-decklist-event {
        grid-column: 2;
    }

    .archetype-decklist-level {
        grid-column: 2;
        justify-content: flex-start;
        margin-top: 8px;
    }

    .archetype-chart-container {
        height: 300px;
        padding: 16px;
    }

    /* FIXED: Decklist Header - was missing the dot */
    .decklist-header {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 20px;
    }

    .decklist-header-stats {
        width: 100%;
        justify-content: space-between;
    }

    .decklist-export-btn {
        width: 100%;
        justify-content: center;
    }

    /* Decklist Layout - Sidebar below content on mobile */
    .decklist-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .decklist-sidebar {
        position: static;
        order: 2;
    }

    .decklist-main {
        order: 1;
    }

    /* Text View - Single column */
    .decklist-text-columns {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* Card View - 2 columns on tablet/mobile */
    .decklist-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

/* Icon-only Share/Request a Change/Export on small screens, so the header
   actions fit on one line instead of wrapping. */
@media (max-width: 480px) {
    .decklist-header-actions .decklist-btn-label {
        display: none;
    }

    .decklist-header-actions > .decklist-share-btn,
    .decklist-header-actions > .decklist-export-dropdown {
        flex: 1 1 0;
        min-width: 0;
    }

    .decklist-header-actions .decklist-share-btn,
    .decklist-header-actions .decklist-export-btn {
        width: 100%;
        padding: 10px;
        justify-content: center;
    }

    .decklist-header-actions .decklist-share-btn i,
    .decklist-header-actions .decklist-export-btn i {
        font-size: 15px;
    }
}

@media (max-width: 600px) {
    /* Prevent horizontal overflow */
    html, body {
        max-width: 100vw;
        overflow-x: hidden;
    }
    
    .nav {
        display: flex;
        align-items: stretch;
        width: 100%; /* Ensure nav doesn't overflow */
        max-width: 100vw; /* Add this */
    }
    
    .nav-search, .nav-logo-sub {
        display: none;
    }
    
    .nav-links {
        display: none;
    }

    /* .nav-notif's and .notif-dropdown's actual mobile overrides live down in the "Notification
       bell" section, right after their base (desktop) rules — NOT here. A rule inside this media
       query would tie on specificity with those later, unconditional base rules, and CSS breaks
       specificity ties by source order, so putting the override here (earlier in the file) meant
       the base rule silently won anyway and the override never took effect. */

    /* Alone at the far right — margin-left:auto lives here (not on .nav-notif) so it's the only
       thing pushed away from the [Logo][Bell][Search] cluster; everything else just packs left. */
    .nav-hamburger {
        display: flex;
        order: 10;
        margin-left: auto;
        margin-right: 8px;
        flex-shrink: 0; /* Prevent shrinking */
    }

    /* order:3 — after the logo (1) and bell (2, see .nav-notif), so the icon cluster reads
       [Logo][Bell][Search], with only the hamburger pushed off to the far right. */
    .nav-search-mobile {
        display: flex;
        order: 3;
        padding: 0 12px;
        flex-shrink: 0; /* Prevent shrinking */
    }
    
    .nav-submit {
        display: none;
    }
    
    .nav-logo {
        order: 1;
        padding: 0 12px;
        border-right: none;
        flex-shrink: 0; /* Prevent shrinking */
        max-width: calc(100vw - 100px); /* Prevent overflow */
    }
    
    .nav-logo-text {
        font-size: 20px;
        white-space: nowrap; /* Keep logo text on one line */
    }
    
    /* Ensure all containers don't overflow */
    .archetype-container,
    .decklist-container,
    .submit-container,
    .faq-container,
    .success-container,
    .tournament-decklist-container,
    .events-all-container {
        max-width: 100vw;
        overflow-x: hidden;
    }
    
    /* Fix grid overflow issues */
    .stats-row,
    .archetype-header,
    .decklist-header,
    .events-all-header {
        max-width: 100%;
        overflow-x: hidden;
    }
}

/* Flip preview to left for rightmost column */
.decklist-text-column:last-child .decklist-card-preview {
    left: auto;
    right: 100%;
    margin-left: 0;
    margin-right: 16px;
}

/* ══════════════════════════════════════════════════════════════════
   PAGINATION
   ══════════════════════════════════════════════════════════════════ */

.pagination-section {
    background: var(--bg2);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 24px;
    margin-top: 24px;
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
}

.pagination-info {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}

.pagination-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.pagination-btn {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 10px 16px;
    background: var(--bg3);
    border: 1px solid var(--line);
    color: var(--text);
    border-radius: 3px;
    cursor: pointer;
    transition: all .15s;
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}

.pagination-btn:hover:not(:disabled) {
    border-color: var(--accent);
    background: rgba(61,208,255,0.08);
    color: var(--accent);
}

.pagination-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.pagination-btn i {
    font-size: 12px;
}

.pagination-pages {
    display: flex;
    align-items: center;
    gap: 4px;
}

.pagination-page-btn {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 600;
    padding: 8px 12px;
    background: var(--bg3);
    border: 1px solid var(--line);
    color: var(--text);
    border-radius: 3px;
    cursor: pointer;
    transition: all .15s;
    text-decoration: none;
    min-width: 40px;
    text-align: center;
}

.pagination-page-btn:hover:not(.active) {
    border-color: var(--accent);
    background: rgba(61,208,255,0.08);
    color: var(--accent);
}

.pagination-page-btn.active {
    background: var(--accent);
    color: var(--on-accent);
    border-color: var(--accent);
    cursor: default;
}

.pagination-ellipsis {
    font-family: var(--mono);
    color: var(--muted);
    padding: 0 8px;
}

@media (max-width: 600px) {
    .pagination-controls {
        flex-direction: column;
        width: 100%;
    }
    
    .pagination-btn,
    .pagination-pages {
        width: 100%;
        justify-content: center;
    }
}

/* Archetype View All section */
.archetype-view-all {
    padding: 24px 20px;
    border-top: 1px solid var(--line);
    text-align: center;
}

.archetype-view-all-btn {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 14px 28px;
    background: var(--accent);
    color: var(--on-accent);
    border: 1px solid var(--accent);
    border-radius: 3px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    transition: all .15s;
}

.archetype-view-all-btn:hover {
    background: var(--accent2);
    border-color: var(--accent2);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(61,208,255,0.3);
}

.archetype-view-all-btn i {
    font-size: 12px;
    transition: transform .15s;
}

.archetype-view-all-btn:hover i {
    transform: translateX(3px);
}

/* ══════════════════════════════════════════════════════════════════
   CARD MODAL
   ══════════════════════════════════════════════════════════════════ */

.card-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}

.card-modal-overlay--open {
    opacity: 1;
    pointer-events: all;
}

.card-modal {
    background: var(--bg2);
    border: 1px solid var(--line);
    border-top: 3px solid var(--accent);
    border-radius: 6px;
    width: 100%;
    max-width: 820px;
    max-height: 90vh;
    overflow-y: hidden;
    position: relative;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
    animation: modalSlideUp .22s ease both;
}

@keyframes modalSlideUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.card-modal__close {
    position: absolute;
    top: 14px;
    right: 16px;
    background: none;
    border: none;
    color: var(--muted);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 3px;
    transition: color .15s, background .15s;
    z-index: 1;
}

    .card-modal__close:hover {
        color: var(--text);
        background: rgba(255, 255, 255, 0.06);
    }

.card-modal__body {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 0;
    /* cap height so the details side scrolls while image stays fixed */
    height: 90vh;
    overflow: auto;
}

/* Image column — static, vertically centred, never scrolls */
.card-modal__image-wrap {
    position: sticky;
    top: 0;
    align-self: start;
    background: var(--bg3);
    border-right: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    height: 100%;
    max-height: calc(90vh - 3px);
    overflow: hidden;
}

/* Details column — scrolls independently */
.card-modal__details {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto; /* only this column scrolls */
    min-height: 0; /* required — without this grid children ignore height cap */
    height: 100%;
}

.card-modal__header {
    padding-right: 32px; /* room for close btn */
    border-bottom: 1px solid var(--line2);
    padding-bottom: 14px;
}

.card-modal__name {
    font-family: var(--display);
    font-size: 32px;
    letter-spacing: 1.5px;
    color: var(--text);
    line-height: 1;
}

.card-modal__type {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 600;
}

.card-modal__colors {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.card-modal__color-badge {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 2px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
    font-weight: 600;
}

    /* Digimon color coding */
    .card-modal__color-badge[data-color="Red"] {
        color: #f87171;
        border-color: rgba(248,113,113,0.4);
        background: rgba(248,113,113,0.08);
    }

    .card-modal__color-badge[data-color="Blue"] {
        color: #60a5fa;
        border-color: rgba(96,165,250,0.4);
        background: rgba(96,165,250,0.08);
    }

    .card-modal__color-badge[data-color="Yellow"] {
        color: #fbbf24;
        border-color: rgba(251,191,36,0.4);
        background: rgba(251,191,36,0.08);
    }

    .card-modal__color-badge[data-color="Green"] {
        color: #4ade80;
        border-color: rgba(74,222,128,0.4);
        background: rgba(74,222,128,0.08);
    }

    .card-modal__color-badge[data-color="Black"] {
        color: #94a3b8;
        border-color: rgba(148,163,184,0.4);
        background: rgba(148,163,184,0.08);
    }

    .card-modal__color-badge[data-color="Purple"] {
        color: #c084fc;
        border-color: rgba(192,132,252,0.4);
        background: rgba(192,132,252,0.08);
    }

    .card-modal__color-badge[data-color="White"] {
        color: #e8e4da;
        border-color: rgba(232,228,218,0.4);
        background: rgba(232,228,218,0.06);
    }

.card-modal__stats {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.card-modal__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--bg3);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 8px 16px;
    min-width: 60px;
}

.card-modal__stat-label {
    font-family: var(--mono);
    font-size: 8px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 4px;
}

.card-modal__stat-value {
    font-family: var(--display);
    font-size: 24px;
    color: var(--accent);
    line-height: 1;
    letter-spacing: 1px;
}

.card-modal__effect {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.card-modal__effect-label {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 600;
}

.card-modal__effect p {
    font-family: var(--sans);
    font-size: 13px;
    color: var(--text);
    line-height: 1.65;
    background: var(--bg3);
    border: 1px solid var(--line2);
    border-left: 3px solid var(--accent);
    padding: 12px 14px;
    border-radius: 3px;
}

/* Scrollbar inside modal */
.card-modal::-webkit-scrollbar,
.card-modal__details::-webkit-scrollbar {
    width: 5px;
}

.card-modal::-webkit-scrollbar-track,
.card-modal__details::-webkit-scrollbar-track {
    background: var(--bg);
}

.card-modal::-webkit-scrollbar-thumb,
.card-modal__details::-webkit-scrollbar-thumb {
    background: var(--muted2);
    border-radius: 3px;
}

.card-modal__img-link {
    display: block;
    transition: opacity .15s;
}

    .card-modal__img-link:hover {
        opacity: 0.85;
    }

        .card-modal__img-link:hover .card-modal__img {
            box-shadow: 0 8px 24px rgba(61, 208, 255, 0.25);
        }

.card-modal__tcg-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding: 12px 16px;
    background: rgba(61, 208, 255, 0.07);
    border: 1px solid rgba(61, 208, 255, 0.35);
    border-radius: 3px;
    text-decoration: none;
    color: var(--text);
    transition: border-color .15s, background .15s, box-shadow .15s;
    box-shadow: 0 0 0 0 rgba(61, 208, 255, 0);
}

    .card-modal__tcg-btn:hover {
        border-color: var(--accent);
        background: rgba(61, 208, 255, 0.13);
        color: var(--text);
        box-shadow: 0 0 12px rgba(61, 208, 255, 0.15);
    }

.card-modal__tcg-btn-label {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 600;
}

.card-modal__tcg-btn:hover .card-modal__tcg-btn-label {
    color: var(--accent);
}

.card-modal__tcg-btn-price {
    font-family: var(--mono);
    font-size: 14px;
    font-weight: 700;
    color: var(--up);
}

.card-modal__tcg-btn-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    border-radius: 3px;
    flex-shrink: 0;
}

.card-modal__tcg-btn-icon-fallback {
    font-size: 16px;
    color: var(--accent);
    flex-shrink: 0;
}

/* ── Secondary marketplace prices — other sites that also carry this card,
   shown smaller beneath the primary (highest-ranked for the visitor) button ── */
.card-modal__alt-prices {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.card-modal__alt-price {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: var(--bg2);
    border: 1px solid var(--line);
    border-radius: 3px;
    text-decoration: none;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted);
    transition: border-color .15s, color .15s;
}

    .card-modal__alt-price:hover {
        border-color: var(--accent);
        color: var(--text);
    }

    .card-modal__alt-price-value {
        color: var(--up);
        font-weight: 600;
    }

    .card-modal__alt-price-icon {
        width: 14px;
        height: 14px;
        object-fit: contain;
        border-radius: 2px;
        flex-shrink: 0;
    }

    .card-modal__alt-price-icon-fallback {
        font-size: 11px;
        flex-shrink: 0;
    }

.card-thumb__img {
    width: 100%;
    display: block;
}

/* ── CARD MODAL: PAIRS SECTION ── */

.card-modal__pairs {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 4px;
    border-top: 1px solid var(--line2);
}

.card-modal__pairs-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.card-modal__pair-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: transform .15s;
}

    .card-modal__pair-item:hover {
        transform: translateY(-3px);
    }

.card-modal__pair-img {
    width: 100%;
    height: auto;
    border-radius: 6px;
    border: 1px solid var(--line);
    box-shadow: 0 4px 10px rgba(0,0,0,0.35);
    transition: border-color .15s, box-shadow .15s;
    display: block;
}

.card-modal__pair-item:hover .card-modal__pair-img {
    border-color: var(--accent);
    box-shadow: 0 6px 16px rgba(61,208,255,0.25);
}

.card-modal__pair-name {
    font-family: var(--sans);
    font-size: 10px;
    color: var(--muted);
    text-align: center;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    transition: color .15s;
}

.card-modal__pair-item:hover .card-modal__pair-name {
    color: var(--text);
}

/* Widen the modal when the pairs section is shown */
.card-modal--has-pairs {
    max-width: 960px;
}

    .card-modal--has-pairs .card-modal__pairs-list {
        grid-template-columns: repeat(4, 1fr);
    }

@media (max-width: 760px) {
    .card-modal__pairs-list,
    .card-modal--has-pairs .card-modal__pairs-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .card-modal__img-link, .card-modal__img {
        width: unset;
        height: 100%;
    }
}

@media (max-width: 480px) {
    .card-modal__pairs-list,
    .card-modal--has-pairs .card-modal__pairs-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }

    .card-modal__pair-name {
        display: none;
    }
}

.card-modal__img {
    width: 100%;
}

@media (max-width: 640px) {
    .card-modal__body {
        grid-template-columns: 1fr;
    }

    .card-modal__image-wrap {
        border-right: none;
        border-bottom: 1px solid var(--line);
        padding: 16px;
    }

    .card-modal__img {
        margin: 0 auto;
    }

    .card-modal__name {
        font-size: 26px;
    }

    /* Move TCGPlayer button to top of details on mobile */
    .card-modal__tcg-btn {
        order: -1;
        margin-top: 0;
        margin-bottom: 4px;
        padding: 14px 16px;
        background: rgba(61, 208, 255, 0.10);
        border-color: rgba(61, 208, 255, 0.45);
        border-left-width: 3px;
        justify-content: center;
        gap: 16px;
    }

    .card-modal__tcg-btn-label {
        font-size: 11px;
    }

    .card-modal__tcg-btn-price {
        font-size: 16px;
    }
}
/* ══════════════════════════════════════════════════════════════════
   EFFECT TEXT TAGS (<Timing>  and  [Keyword])
══════════════════════════════════════════════════════════════════ */

.effect-tag {
    display: inline-block;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1;
    padding: 2px 8px;
    vertical-align: middle;
    white-space: nowrap;
    position: relative;
    top: -1px;
}

/* <Timing> — double-pointed arrow ribbon, muted red with visible border */
/* Outer: drop-shadow follows the child's clip-path shape */

/* Inner: clip-path here, shadow on wrapper follows this shape */
.effect-tag--angular {
    display: inline-block;
    background: rgba(248, 113, 113, 0.1);
    border: 1px solid rgba(248, 113, 113, 0.4);
    color: #f87171;
    padding: 2px 8px;
    border-radius: 3px;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: middle;
    position: relative;
    top: -1px;
    clip-path: none;
    filter: none;
}

/* [Keyword] — colour-coded pill via CSS vars, with rounded ends */
.effect-tag--keyword {
    background: var(--tag-bg, rgba(61,208,255,0.15));
    border: 1px solid var(--tag-border, var(--accent));
    color: var(--tag-text, var(--accent));
    border-radius: 3px;
    word-break: keep-all;
    white-space: nowrap;
    padding: 0 4px;
}

/* ══════════════════════════════════════════════════════════════════
   GAME RULE CHANGE PAGE
   ══════════════════════════════════════════════════════════════════ */

/* Type badge in the header */
.rule-change-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 2px;
    border: 1px solid rgba(61,208,255,0.35);
    background: rgba(61,208,255,0.08);
    color: var(--accent);
    font-weight: 600;
}

/* Markdown description body */
.rule-change-description {
    font-family: var(--sans);
    font-size: 14px;
    color: var(--text);
    line-height: 1.75;
}

    .rule-change-description h1,
    .rule-change-description h2,
    .rule-change-description h3,
    .rule-change-description h4 {
        font-family: var(--display);
        letter-spacing: 1px;
        color: var(--text);
        margin: 24px 0 10px;
        line-height: 1.1;
    }

    .rule-change-description h1 {
        font-size: 36px;
    }

    .rule-change-description h2 {
        font-size: 28px;
        border-bottom: 1px solid var(--line);
        padding-bottom: 8px;
    }

    .rule-change-description h3 {
        font-size: 22px;
        color: var(--accent);
    }

    .rule-change-description h4 {
        font-size: 16px;
        color: var(--muted);
        text-transform: uppercase;
        font-family: var(--mono);
        letter-spacing: .1em;
    }

    .rule-change-description p {
        margin-bottom: 14px;
    }

        .rule-change-description p:last-child {
            margin-bottom: 0;
        }

    .rule-change-description a {
        color: var(--accent);
        border-bottom: 1px solid rgba(61,208,255,0.35);
        transition: border-color .15s, color .15s;
    }

        .rule-change-description a:hover {
            color: var(--accent2);
            border-bottom-color: var(--accent2);
        }

    .rule-change-description strong {
        color: var(--accent);
        font-weight: 700;
    }

    .rule-change-description em {
        color: var(--muted);
        font-style: italic;
    }

    .rule-change-description ul,
    .rule-change-description ol {
        margin: 0 0 14px 20px;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .rule-change-description li::marker {
        color: var(--accent);
    }

    .rule-change-description blockquote {
        border-left: 3px solid var(--accent);
        background: var(--bg3);
        margin: 16px 0;
        padding: 12px 16px;
        border-radius: 0 3px 3px 0;
        color: var(--muted);
        font-style: italic;
    }

    .rule-change-description code {
        font-family: var(--mono);
        font-size: 12px;
        background: var(--bg3);
        border: 1px solid var(--line);
        padding: 2px 6px;
        border-radius: 3px;
        color: var(--accent);
    }

    .rule-change-description pre {
        background: var(--bg3);
        border: 1px solid var(--line);
        border-left: 3px solid var(--accent);
        border-radius: 3px;
        padding: 16px;
        overflow-x: auto;
        margin-bottom: 14px;
    }

        .rule-change-description pre code {
            background: none;
            border: none;
            padding: 0;
            font-size: 13px;
            color: var(--text);
        }

    .rule-change-description hr {
        border: none;
        border-top: 1px solid var(--line);
        margin: 24px 0;
    }

    .rule-change-description table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 14px;
        font-size: 13px;
    }

    .rule-change-description th {
        font-family: var(--mono);
        font-size: 10px;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--accent);
        background: var(--bg3);
        padding: 10px 14px;
        border: 1px solid var(--line);
        text-align: left;
    }

    .rule-change-description td {
        padding: 9px 14px;
        border: 1px solid var(--line);
        color: var(--text);
        vertical-align: top;
    }

    .rule-change-description tr:nth-child(even) td {
        background: rgba(255,255,255,0.02);
    }

/* ══════════════════════════════════════════════════════════════════
   INLINE CARD PLACEHOLDERS (used in markdown descriptions)
   ══════════════════════════════════════════════════════════════════ */

.card-inline {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    width: 120px;
    vertical-align: top;
    cursor: pointer;
    gap: 5px;
    margin: 4px;
    transition: transform .15s;
    text-decoration: none;
}

    .card-inline:hover {
        transform: translateY(-3px);
    }

.card-inline__img-wrap {
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 3px 8px rgba(0,0,0,0.4);
    border: 1px solid var(--line);
    transition: border-color .15s, box-shadow .15s;
}

.card-inline:hover .card-inline__img-wrap {
    border-color: var(--accent);
    box-shadow: 0 5px 14px rgba(61,208,255,0.25);
}

.card-inline__img {
    width: 100%;
    height: auto;
    display: block;
}

.card-inline__label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    width: 100%;
}

.card-inline__name {
    font-family: var(--mono);
    font-size: 9px;
    color: var(--muted);
    text-align: center;
    line-height: 1.3;
    word-break: break-word;
    transition: color .15s;
}

.card-inline:hover .card-inline__name {
    color: var(--text);
}

.card-inline__badge {
    font-family: var(--mono);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 2px;
    white-space: nowrap;
}

.card-inline__badge--banned {
    background: rgba(248,113,113,0.15);
    border: 1px solid rgba(248,113,113,0.4);
    color: #f87171;
}

.card-inline__badge--unbanned {
    background: rgba(74,222,128,0.15);
    border: 1px solid rgba(74,222,128,0.4);
    color: #4ade80;
}

.card-inline__badge--restricted {
    background: rgba(251,191,36,0.15);
    border: 1px solid rgba(251,191,36,0.4);
    color: #fbbf24;
}

.card-inline__badge--unrestricted {
    background: rgba(61,208,255,0.12);
    border: 1px solid rgba(61,208,255,0.35);
    color: var(--accent);
}

/* {{inline-card:X}} — reads as plain text in a sentence, not a badge */
.card-inline-text {
    color: var(--accent);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color .15s ease;
}

.card-inline-text:hover {
    color: var(--accent2);
}

/* ══════════════════════════════════════════════════════════════════
   FOOTER — HUB CTA
   ══════════════════════════════════════════════════════════════════ */

.footer-hub-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    padding: 14px 24px;
    border-top: 1px solid rgba(255,255,255,.07);
    border-bottom: 1px solid rgba(255,255,255,.07);
    background: rgba(61,208,255,.04);
    text-align: center;
    width: 100%;
    margin-top: 80px;
}

.footer-hub-cta-new {
    font-family: var(--mono);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--on-accent);
    background: var(--accent);
    padding: 2px 7px;
    border-radius: 2px;
    line-height: 1.6;
    flex-shrink: 0;
}

.footer-hub-cta-text {
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    text-align: center;
}

.footer-hub-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    font-family: var(--mono);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--accent);
    border: 1px solid rgba(61,208,255,.45);
    border-radius: 3px;
    background: rgba(61,208,255,.07);
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
    user-select: none;
}

.footer-hub-cta-btn:hover,
.footer-hub-cta-btn:focus-visible {
    background: rgba(61,208,255,.14);
    border-color: rgba(61,208,255,.8);
    color: #fff;
    outline: none;
}

@media (max-width: 600px) {
    .footer-hub-cta {
        flex-direction: column;
        gap: 10px;
        padding: 14px 20px;
    }
}

/* ══════════════════════════════════════════════════════════════════
   DECK DNA PREVIEW — TAB BUTTON ADDITIONS
   ══════════════════════════════════════════════════════════════════ */

.decklist-tab--dna {
    border-left: 1px solid var(--line);
    margin-left: auto;
}

.decklist-tab__preview-badge {
    font-family: var(--mono);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 1px 6px;
    border-radius: 2px;
    background: rgba(61,208,255,0.15);
    color: var(--accent);
    border: 1px solid rgba(61,208,255,0.35);
    margin-left: 6px;
}

/* Uniqueness stat item in deck header */
.decklist-stat-item--dna {
    border-left: 1px solid var(--line);
    padding-left: 16px;
}

.decklist-stat-sub {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 2px;
}

.decklist-stat-value--success {
    color: var(--up);
}

.decklist-stat-value--warning {
    color: var(--yellow);
}

.decklist-stat-value--danger {
    color: var(--down);
}

/* ══════════════════════════════════════════════════════════════════
   DECK DNA PREVIEW — TAB BUTTON ADDITIONS
   ══════════════════════════════════════════════════════════════════ */

.decklist-tab--dna {
    border-left: 1px solid var(--line);
    margin-left: auto;
}

.decklist-tab__preview-badge {
    font-family: var(--mono);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 1px 6px;
    border-radius: 2px;
    background: rgba(61,208,255,0.15);
    color: var(--accent);
    border: 1px solid rgba(61,208,255,0.35);
    margin-left: 6px;
}

/* Uniqueness stat item in deck header */
.decklist-stat-item--dna {
    border-left: 1px solid var(--line);
    padding-left: 16px;
}

.decklist-stat-sub {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 2px;
}

.decklist-stat-value--success {
    color: var(--up);
}

.decklist-stat-value--warning {
    color: var(--yellow);
}

.decklist-stat-value--danger {
    color: var(--down);
}

/* ══════════════════════════════════════════════════════════════════
   DECK DNA — PANEL & NOTICES
   ══════════════════════════════════════════════════════════════════ */

.dna-panel {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 0;
}

.dna-notice {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .75rem 1rem;
    border-radius: 6px;
    font-size: .875rem;
    line-height: 1.4;
}

.dna-notice--info {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    color: var(--text);
    border-radius: 4px;
}

.dna-notice--warn {
    background: color-mix(in srgb, var(--yellow) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--yellow) 40%, transparent);
    color: var(--text);
    border-radius: 4px;
}

/* ══════════════════════════════════════════════════════════════════
   DECK DNA — SECTIONS
   Restyled to match the personal Deck Builder's light Fingerprint tab
   (see .deck-fingerprint-* below) — same dcg-panel header/body split,
   just achieved with pure CSS rather than restructuring the Razor
   markup: .dna-section__title becomes the "header strip" (border-
   bottom, Bebas Neue title, like .dcg-panel-header/.dcg-panel-title),
   and whatever single content block follows it (the section's only
   direct-child sibling — .fp-charts-grid, .dna-diff-grid, etc.) gets
   the "body" padding instead of the section itself. Every section in
   both FingerprintReport.cshtml and _DeckDnaPreviewPanel.cshtml
   follows this exact "one title + one content wrapper" shape, so this
   holds without needing per-section overrides.
   ══════════════════════════════════════════════════════════════════ */

.dna-section {
    background: var(--bg2);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 0;
    margin-top: 0;
    margin-bottom: 20px;
}

.dna-section__title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 18px 22px;
    border-bottom: 1px solid var(--line);
    font-family: var(--display);
    font-size: 18px;
    font-weight: 400;
    letter-spacing: .5px;
    color: var(--text);
    text-transform: none;
}

    .dna-section__title i {
        color: var(--accent);
        font-size: 15px;
    }

.dna-section__count {
    margin-left: auto;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 400;
    color: var(--muted);
    letter-spacing: 0;
    text-transform: none;
}

.dna-section > .fp-charts-grid,
.dna-section > .dna-diff-grid,
.dna-section > .fp-insights,
.dna-section > .dna-bullets,
.dna-section > .dna-neighbours,
.dna-section > .dna-card-list {
    padding: 20px 22px;
}

/* ══════════════════════════════════════════════════════════════════
   DECK DNA — COMPOSITION PROFILES
   ══════════════════════════════════════════════════════════════════ */

.dna-profiles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

.dna-profile-block {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.dna-profile-block--wide {
    grid-column: 1 / -1;
}

.dna-profile-block__label {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
    margin: 0 0 .25rem;
}

/* ── Bar rows ───────────────────────────────────────────────── */
.dna-bar-row {
    display: grid;
    grid-template-columns: auto 1fr 1fr auto auto;
    align-items: center;
    gap: .4rem;
    min-height: 26px;
}

.dna-colour-pip {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dna-colour-pip--red {
    background: #e53935;
}

.dna-colour-pip--blue {
    background: #1e88e5;
}

.dna-colour-pip--yellow {
    background: #fdd835;
}

.dna-colour-pip--green {
    background: #43a047;
}

.dna-colour-pip--black {
    background: #757575;
}

.dna-colour-pip--purple {
    background: #8e24aa;
}

.dna-colour-pip--white {
    background: #c9c9c9;
    border: 1px solid var(--line);
}

.dna-bar-row__label {
    font-size: .8rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 90px;
}

.dna-bar-row__track {
    position: relative;
    height: 8px;
    background: var(--bg3);
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.dna-bar-row__fill {
    height: 4px;
    border-radius: 2px;
    transition: width .3s ease;
    min-width: 2px;
}

.dna-bar-row__fill--deck {
    background: var(--accent);
}

.dna-bar-row__fill--avg {
    background: color-mix(in srgb, var(--muted) 50%, transparent);
}

.dna-bar-fill--red {
    background: #e53935;
}

.dna-bar-fill--blue {
    background: #1e88e5;
}

.dna-bar-fill--yellow {
    background: #fdd835;
}

.dna-bar-fill--green {
    background: #43a047;
}

.dna-bar-fill--black {
    background: #757575;
}

.dna-bar-fill--purple {
    background: #8e24aa;
}

.dna-bar-fill--white {
    background: #c9c9c9;
}

.dna-bar-row__count {
    font-size: .78rem;
    color: var(--text);
    text-align: right;
    min-width: 1.5ch;
}

.dna-bar-row__delta {
    font-size: .72rem;
    font-weight: 600;
    min-width: 3ch;
    text-align: right;
}

.dna-bar-row__delta--up {
    color: var(--up);
}

.dna-bar-row__delta--down {
    color: var(--down);
}

.dna-bar-row__delta--neutral {
    color: var(--muted);
}

/* ── Profile legend ─────────────────────────────────────────── */
.dna-profile-legend {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin: .75rem 0 0;
    font-size: .75rem;
    color: var(--muted);
}

.dna-profile-legend__swatch {
    display: inline-block;
    width: 24px;
    height: 6px;
    border-radius: 3px;
}

.dna-profile-legend__swatch--deck {
    background: var(--accent);
}

.dna-profile-legend__swatch--avg {
    background: color-mix(in srgb, var(--muted) 50%, transparent);
}

/* ══════════════════════════════════════════════════════════════════
   DECK DNA — BULLETS
   ══════════════════════════════════════════════════════════════════ */

.dna-bullets {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

    .dna-bullets li {
        display: flex;
        align-items: flex-start;
        gap: .5rem;
        font-size: .875rem;
        color: var(--text);
        line-height: 1.5;
    }

        .dna-bullets li i {
            color: var(--accent);
            font-size: .7rem;
            margin-top: .3em;
            flex-shrink: 0;
        }

/* ══════════════════════════════════════════════════════════════════
   DECK DNA — NEIGHBOURS LIST
   ══════════════════════════════════════════════════════════════════ */

.dna-neighbours {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

/* Flat row + plain mono score, matching .deck-fingerprint-neighbour on the light
   Fingerprint tab exactly — this file used to give closest-decks rows a bigger circular
   score badge, which read as a different component family from the light tab's simpler
   treatment; dropped in favour of matching it, keeping the extra tournament-meta line and
   diff chips the light tab's simpler 5-row list doesn't have. */
.dna-neighbour {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 12px;
    background: var(--bg2);
    border-radius: 6px;
    text-decoration: none;
    transition: background .12s;
}

    .dna-neighbour:hover {
        background: var(--bg3);
    }

.dna-neighbour__score {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 50%;
    border: 2px solid;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
    padding: 4px;
    text-align: center;
    white-space: nowrap;
}

.dna-neighbour__score--success {
    color: var(--up);
    border-color: var(--up);
}

.dna-neighbour__score--warning {
    color: var(--yellow);
    border-color: var(--yellow);
}

.dna-neighbour__score--danger {
    color: var(--down);
    border-color: var(--down);
}

.dna-neighbour__info {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}

/* ── Enriched Content (community videos) ── */
.ec-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}

.ec-card {
    background: var(--bg2);
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow: hidden;
}

.ec-media {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--bg3);
}

.ec-thumb-btn {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    cursor: pointer;
    background: transparent;
}

.ec-thumb-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ec-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(0,0,0,0.65);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: background .15s ease, transform .15s ease;
}

.ec-thumb-btn:hover .ec-play-icon {
    background: var(--accent);
    color: #05131a;
    transform: translate(-50%, -50%) scale(1.08);
}

.ec-embed-wrap {
    position: absolute;
    inset: 0;
}

.ec-embed-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.ec-collapse-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    background: rgba(0,0,0,0.65);
    color: #fff;
    border: 0;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 0.68rem;
    font-family: var(--mono);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
}

.ec-collapse-btn:hover {
    background: var(--accent);
    color: #05131a;
}

.ec-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
}

.ec-title {
    font-weight: 600;
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.ec-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.ec-actions a {
    font-size: 0.72rem;
    color: var(--muted);
    text-decoration: none;
    white-space: nowrap;
}

.ec-actions a:hover {
    color: var(--accent);
}

.dna-neighbour__name {
    font-size: .875rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dna-neighbour__meta {
    font-family: var(--mono);
    font-size: .7rem;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dna-neighbour__chips {
    display: flex;
    gap: .3rem;
    flex-shrink: 0;
}

.dna-chip {
    font-size: .7rem;
    font-weight: 700;
    padding: .15em .45em;
    border-radius: 10px;
    line-height: 1.4;
}

.dna-chip--src {
    background: color-mix(in srgb, var(--down) 20%, transparent);
    color: var(--down);
}

.dna-chip--tgt {
    background: color-mix(in srgb, var(--up) 20%, transparent);
    color: var(--up);
}

.dna-chip--qty {
    background: color-mix(in srgb, var(--yellow) 20%, transparent);
    color: var(--yellow);
}

/* ══════════════════════════════════════════════════════════════════
   DECK DNA — DIFF GRID (3 columns, always fills full width)
   ══════════════════════════════════════════════════════════════════ */

.dna-diff-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .875rem;
}

.dna-diff-block {
    display: flex;
    flex-direction: column;
    background: var(--bg3);
    border: 1px solid var(--line);
    border-radius: 6px;
    overflow: hidden;
    min-width: 0;
}

.dna-diff-block__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .45rem .75rem;
    font-size: .78rem;
    font-weight: 600;
    gap: .5rem;
}

    .dna-diff-block__header i {
        font-size: .75rem;
    }

.dna-diff-block__count {
    background: rgba(0,0,0,.25);
    border-radius: 10px;
    padding: .1em .5em;
    font-family: var(--mono);
    font-size: .7rem;
}

.dna-diff-block__header--danger {
    background: color-mix(in srgb, var(--down) 20%, var(--bg3));
    color: var(--down);
}

.dna-diff-block__header--warn {
    background: color-mix(in srgb, var(--yellow) 20%, var(--bg3));
    color: var(--yellow);
}

.dna-diff-block__header--info {
    background: color-mix(in srgb, var(--accent) 20%, var(--bg3));
    color: var(--accent);
}

.dna-diff-block__empty {
    padding: .6rem .75rem;
    font-size: .8rem;
    color: var(--muted);
    margin: 0;
}

/* ══════════════════════════════════════════════════════════════════
   DECK DNA — CARD LIST & ITEMS
   ══════════════════════════════════════════════════════════════════ */

.dna-card-list {
    display: flex;
    flex-direction: column;
    padding: .4rem .5rem;
    gap: .4rem;
    overflow-y: auto;
    max-height: 320px;
}

.dna-card-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    border-radius: 4px;
    padding: .25rem .35rem;
    background: var(--bg2);
    border: 1px solid var(--line);
    min-height: 48px;
    transition: border-color .15s, background .15s;
}

.dna-card-item--clickable {
    cursor: pointer;
}

    .dna-card-item--clickable:hover {
        border-color: var(--accent);
        background: color-mix(in srgb, var(--accent) 6%, var(--bg2));
    }

.dna-card-item__thumb {
    position: relative;
    flex-shrink: 0;
    width: 34px;
    height: 48px;
    border-radius: 3px;
    overflow: hidden;
}

    .dna-card-item__thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.dna-card-item__thumb--missing {
    opacity: .4;
    filter: grayscale(1);
}

.dna-card-item__qty {
    position: absolute;
    bottom: 1px;
    right: 2px;
    font-size: .62rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.8);
    line-height: 1;
}

.dna-card-item__qty--avg {
    color: var(--muted);
    text-shadow: none;
}

.dna-card-item__qty--up {
    color: var(--up);
    text-shadow: none;
}

.dna-card-item__qty--down {
    color: var(--down);
    text-shadow: none;
}

.dna-card-item__info {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}

/* Primary name row */
.dna-card-item__name {
    font-size: .8rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Card ID — demoted to subtitle */
.dna-card-item__id {
    font-family: var(--mono);
    font-size: .68rem;
    font-weight: 400;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dna-card-item__badge {
    font-size: .65rem;
    font-weight: 700;
    padding: .1em .4em;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: .03em;
    align-self: flex-start;
}

.dna-card-item__badge--danger {
    background: color-mix(in srgb, var(--down) 20%, transparent);
    color: var(--down);
}

.dna-card-item__reason {
    font-size: .72rem;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dna-card-item__qty-detail {
    display: flex;
    align-items: center;
    gap: .3rem;
    font-size: .72rem;
}

/* ── Inline delta helpers ────────────────────────────────────── */
.dna-up {
    color: var(--up);
    font-weight: 600;
}

.dna-down {
    color: var(--down);
    font-weight: 600;
}

.dna-muted {
    color: var(--muted);
}

/* ══════════════════════════════════════════════════════════════════
   FINGERPRINT TAB — SCORE HEADER
   ══════════════════════════════════════════════════════════════════ */

/* padding-left matches the 22px inset every dna-section's body content uses (see
   ".dna-section > .fp-charts-grid, ..." further up) — .fp-header sits bare in the tab,
   with no dna-section/dcg-panel wrapper of its own to provide that inset, so without
   this the score card starts flush against the container edge while everything below
   it lines up 22px in. */
.fp-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem;
    padding: 12px 22px 0;
    margin-bottom: 20px;
}

/* Same colour-bordered box as .deck-fingerprint-score on the light Fingerprint tab —
   the colour class (fp-score-card--success/warning/danger/secondary) is applied
   directly on this element (see FingerprintReport.cshtml / _DeckDnaPreviewPanel.cshtml),
   same convention as .fp-score--@Model.UniquenessColourClass right below it. Row layout —
   the big score number on the left, its label/band/basis text stacked to the right of it. */
.fp-score-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 18px;
    min-width: 150px;
    background: var(--bg2);
    border: 2px solid var(--line);
    border-radius: 8px;
    padding: 22px 28px;
    flex-shrink: 0;
}

.fp-score-card--success {
    border-color: var(--up);
}

.fp-score-card--warning {
    border-color: var(--yellow);
}

.fp-score-card--danger {
    border-color: var(--down);
}

.fp-score-card--secondary {
    border-color: var(--line);
}

.fp-score {
    font-family: var(--display);
    font-size: 3.4rem;
    line-height: 1;
    letter-spacing: .02em;
    flex-shrink: 0;
}

    .fp-score small {
        font-size: 1.4rem;
        opacity: .65;
    }

.fp-score--success {
    color: var(--up);
}

.fp-score--warning {
    color: var(--yellow);
}

.fp-score--danger {
    color: var(--down);
}

.fp-score--secondary {
    color: var(--muted);
}

.fp-score-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    text-align: left;
}

.fp-score-band {
    font-family: var(--mono);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.fp-score-band--success {
    color: var(--up);
}

.fp-score-band--warning {
    color: var(--yellow);
}

.fp-score-band--danger {
    color: var(--down);
}

.fp-score-band--secondary {
    color: var(--muted);
}

.fp-score-label {
    font-family: var(--mono);
    font-size: .65rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.fp-score-basis {
    font-size: .72rem;
    color: var(--muted);
}

.fp-confidence-warn {
    flex: 1;
    min-width: 220px;
    align-self: center;
    margin: 0;
}

/* ══════════════════════════════════════════════════════════════════
   FINGERPRINT TAB — DECK SHAPE CHARTS
   ══════════════════════════════════════════════════════════════════ */

.fp-charts-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.fp-chart-card {
    background: var(--bg3);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0; /* let the card (and its chart) shrink with the column */
}

.fp-chart-card--wide {
    grid-column: 1 / -1;
}

/* Same "mini panel title" treatment as the light Fingerprint tab's per-chart
   .dcg-panel-title (font-size:16px) — Bebas Neue rather than a small-caps mono label. */
.fp-chart-card__label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-family: var(--display);
    font-size: 15px;
    font-weight: 400;
    letter-spacing: .3px;
    text-transform: none;
    color: var(--text);
}

    .fp-chart-card__label i {
        color: var(--accent);
        font-size: 13px;
    }

/* ══════════════════════════════════════════════════════════════════
   FINGERPRINT TAB — INSIGHTS
   (previously had no rules at all — FingerprintReport.cshtml's Insights
   section rendered as unstyled divs)
   ══════════════════════════════════════════════════════════════════ */

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

.fp-insight {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg3);
    border: 1px solid var(--line);
    border-radius: 4px;
}

.fp-insight__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    color: var(--accent);
    font-size: 14px;
}

.fp-insight__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.fp-insight__cat {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
}

.fp-insight__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

.fp-insight__desc {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.4;
}

.fp-chart-card canvas {
    max-height: 180px;
    width: 100% !important;
}

.fp-chart-card--wide canvas {
    max-height: none;
    width: 100% !important;
}

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 1450px) {
    .fp-charts-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .dna-diff-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}



@media (max-width: 600px) {
    .fp-header {
        flex-direction: column;
        padding: 12px 0 0;
    }

    .fp-score-card {
        flex-direction: column;
    }

    .fp-score-meta {
        align-items: center;
        text-align: center;
    }

    .fp-charts-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .fp-chart-card--wide {
        grid-column: 1;
    }

    /* Tighter insets on phones - 22px each side ate a lot of a narrow screen. */
    .dna-section__title {
        padding: 14px;
    }

    .dna-section > .fp-charts-grid,
    .dna-section > .dna-diff-grid,
    .dna-section > .fp-insights,
    .dna-section > .dna-bullets,
    .dna-section > .dna-neighbours,
    .dna-section > .dna-card-list {
        padding: 14px;
    }

    .fp-score-card {
        min-width: 0;
        padding: 18px 20px;
    }

    .fp-confidence-warn {
        min-width: 0;
    }

    .dna-neighbour {
        gap: 10px;
        padding: 8px;
    }

    .dna-profiles-grid {
        grid-template-columns: 1fr;
    }

    .dna-neighbour__chips {
        display: none;
    }

    .dna-bar-row {
        grid-template-columns: auto 1fr auto auto;
    }
}

/* ══════════════════════════════════════════════════════════════════
   FINGERPRINT CTA CARD  (_FingerprintCtaCard partial)
   ══════════════════════════════════════════════════════════════════ */

.fp-cta-card {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    background: var(--bg2);
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    border-radius: 4px;
    padding: 1.1rem 1.25rem;
    margin-bottom: 1.25rem;
}

.fp-cta-card__icon {
    font-size: 1.6rem;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
}

.fp-cta-card__title {
    font-family: var(--mono);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--accent);
    margin-bottom: 0.5rem;
}

.fp-cta-card__list {
    list-style: none;
    padding: 0;
    margin: 0 0 0.6rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 1rem;
}

    .fp-cta-card__list li {
        font-size: 0.8rem;
        color: var(--text);
        opacity: 0.85;
    }

        .fp-cta-card__list li::before {
            content: "— ";
            color: var(--muted);
        }

.fp-cta-card__note {
    font-size: 0.75rem;
    color: var(--muted);
    line-height: 1.5;
    margin: 0;
}

/* ══════════════════════════════════════════════════════════════════
   DECKLIST PAGE SIDEBAR CALLOUT  (fp-deck-callout)
   ══════════════════════════════════════════════════════════════════ */

.fp-deck-callout {
    background: var(--bg2);
    border: 1px solid var(--line);
    border-top: 2px solid var(--accent);
    border-radius: 6px;
    padding: 1rem 1.1rem;
    margin-top: 1rem;
    text-align: center;
}

.fp-deck-callout__icon {
    font-size: 1.5rem;
    margin-bottom: 0.4rem;
}

.fp-deck-callout__title {
    font-family: var(--mono);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent);
    margin-bottom: 0.5rem;
}

.fp-deck-callout__body {
    font-size: 0.78rem;
    color: var(--muted);
    line-height: 1.55;
    margin-bottom: 0.85rem;
}

.fp-deck-callout__btn {
    display: inline-block;
    font-family: var(--mono);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--on-accent);
    background: var(--accent);
    border-radius: 4px;
    padding: 6px 14px;
    text-decoration: none;
    transition: opacity 0.15s;
}

    .fp-deck-callout__btn:hover {
        opacity: 0.85;
    }

/* ══════════════════════════════════════════════════════════════════
   BLOG — INDEX (card grid)
   ══════════════════════════════════════════════════════════════════ */

.blog-container {
    margin: 0 auto;
    padding: 2.5rem 1.5rem 4rem;
}

.blog-header {
    margin-bottom: 2.5rem;
    border-bottom: 1px solid var(--line);
    padding-bottom: 1.25rem;
}

.blog-title {
    font-family: var(--display);
    font-size: 2.4rem;
    letter-spacing: .04em;
    color: var(--text);
    line-height: 1;
    margin-bottom: .4rem;
}

.blog-subtitle {
    font-family: var(--mono);
    font-size: .78rem;
    color: var(--muted);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.blog-empty {
    font-family: var(--mono);
    font-size: .85rem;
    color: var(--muted);
    text-align: center;
    padding: 3rem 0;
}

/* ── card grid ── */

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

/* ── individual card ── */

.blog-card {
    display: flex;
    flex-direction: column;
    background: var(--bg2);
    border: 1px solid var(--line);
    border-radius: 6px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s, transform .15s, box-shadow .15s;
}

    .blog-card:hover {
        border-color: var(--accent);
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
        color: inherit;
    }

.blog-card-image-wrap {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--bg3);
    flex-shrink: 0;
}

.blog-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s;
}

.blog-card:hover .blog-card-image {
    transform: scale(1.03);
}

.blog-card-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted2);
    font-size: 2rem;
}

.blog-card-body {
    padding: 1.1rem 1.2rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .45rem;
    flex: 1;
}

.blog-card-date {
    font-family: var(--mono);
    font-size: .7rem;
    color: var(--muted);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.blog-card-title {
    font-family: var(--sans);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.4;
    margin: 0;
}

.blog-card:hover .blog-card-title {
    color: var(--accent);
}

.blog-card-excerpt {
    font-size: .83rem;
    color: var(--muted);
    line-height: 1.6;
    margin: 0;
    /* clamp to 3 lines */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-card-read-more {
    font-family: var(--mono);
    font-size: .72rem;
    color: var(--accent);
    letter-spacing: .06em;
    margin-top: auto;
    padding-top: .5rem;
}

/* ── pagination ── */

.blog-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 2.5rem;
}

.blog-pagination-btn {
    font-family: var(--mono);
    font-size: .78rem;
    letter-spacing: .06em;
    color: var(--text);
    background: var(--bg2);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 6px 16px;
    text-decoration: none;
    transition: border-color .15s, color .15s;
}

    .blog-pagination-btn:hover {
        border-color: var(--accent);
        color: var(--accent);
    }

    .blog-pagination-btn.disabled {
        color: var(--muted2);
        cursor: default;
        pointer-events: none;
    }

.blog-pagination-info {
    font-family: var(--mono);
    font-size: .75rem;
    color: var(--muted);
}

/* ── responsive ── */

@media (max-width: 640px) {
    .blog-grid {
        grid-template-columns: 1fr;
    }

    .blog-title {
        font-size: 1.8rem;
    }
}

/* ══════════════════════════════════════════════════════════════════
   BLOG — POST DETAIL
   ══════════════════════════════════════════════════════════════════ */

.blog-post-container {
    margin: 0 auto;
    padding: 2rem 1.5rem 4rem;
}

/* ── header ── */

.blog-post-header {
    margin-bottom: 2rem;
}

.blog-post-back {
    display: inline-flex;
    align-items: center;
    font-family: var(--mono);
    font-size: .75rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
    text-decoration: none;
    margin-bottom: 1.25rem;
    transition: color .15s;
}

    .blog-post-back:hover {
        color: var(--accent);
    }

.blog-post-date {
    display: block;
    font-family: var(--mono);
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: .6rem;
}

.blog-post-title {
    font-family: var(--display);
    font-size: 2.2rem;
    letter-spacing: .02em;
    color: var(--text);
    line-height: 1.15;
    margin-bottom: .75rem;
}

.blog-post-excerpt {
    font-size: 1rem;
    color: var(--muted);
    line-height: 1.65;
    border-left: 3px solid var(--accent);
    padding-left: .9rem;
    margin: 0;
}

/* ── hero image ── */

.blog-post-hero {
    margin-bottom: 2rem;
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--line);
}

.blog-post-hero-img {
    width: 100%;
    display: block;
    object-fit: cover;
}

/* ── body (rich text) ── */

.blog-post-body {
    font-size: .95rem;
    line-height: 1.8;
    color: var(--text);
    border-top: 1px solid var(--line);
    padding-top: 1.75rem;
    margin-bottom: 2.5rem;
}

/* ── Block-builder posts: rows of 1 or 2 columns ── */
.blog-doc { display: flex; flex-direction: column; gap: 1.5rem; }
.blog-row { display: grid; gap: 1.5rem; align-items: start; }
.blog-row--full { grid-template-columns: minmax(0, 1fr); }
.blog-row--half { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.blog-row--wide-left { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.blog-row--wide-right { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.blog-col { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.blog-block--text > :first-child { margin-top: 0; }
.blog-block--text > :last-child { margin-bottom: 0; }

.blog-block--image { margin: 0; }
.blog-block--image img { display: block; width: 100%; height: auto; border-radius: 6px; }
.blog-block--image figcaption {
    margin-top: .4rem;
    font-size: .8rem;
    color: var(--muted);
    text-align: center;
}

.blog-block--quote {
    margin: 0;
    padding: .75rem 1.1rem;
    border-left: 3px solid var(--accent);
    background: var(--bg2);
    border-radius: 0 6px 6px 0;
    font-size: 1.05rem;
}
.blog-block--quote > :last-child { margin-bottom: 0; }
.blog-block--quote cite { display: block; margin-top: .4rem; font-size: .8rem; font-style: normal; color: var(--muted); }
.blog-block--quote cite::before { content: '- '; }

.blog-block--divider { border: 0; border-top: 1px solid var(--line); margin: .5rem 0; }

/* Video block: responsive 16:9 YouTube/Vimeo player */
.blog-block--video { margin: 0; }
.blog-video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 6px;
    overflow: hidden;
    background: #000;
}
.blog-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.blog-block--video figcaption {
    margin-top: .4rem;
    font-size: .8rem;
    color: var(--muted);
    text-align: center;
}

@media (max-width: 720px) {
    .blog-row--half, .blog-row--wide-left, .blog-row--wide-right { grid-template-columns: minmax(0, 1fr); }
}

/* ── Author footer ── */
.blog-author {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin: 0 0 2rem;
    padding: 1.1rem 1.25rem;
    background: var(--bg2);
    border: 1px solid var(--line);
    border-radius: 8px;
}
.blog-author-avatar {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--line);
}
.blog-author-avatar--blank { display: inline-flex; align-items: center; justify-content: center; background: var(--bg3); color: var(--muted); }
.blog-author-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.blog-author-label { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.blog-author-name { font-weight: 700; font-size: 1.05rem; color: var(--text); }
.blog-author-bio { margin: .3rem 0 0; font-size: .88rem; color: var(--muted); }
.blog-author-links { display: flex; gap: 12px; margin-top: .45rem; }
.blog-author-links a { color: var(--muted); font-size: 1rem; display: inline-flex; }
.blog-author-links a:hover { color: var(--accent); }
.blog-author-x { width: 15px; height: 15px; }

/* ── Hub "Live preview" banner ── */
.blog-preview-banner {
    margin: 0 0 1.25rem;
    padding: .7rem 1rem;
    border: 1px dashed var(--accent);
    border-radius: 6px;
    background: rgba(61, 208, 255, .08);
    font-size: .85rem;
    color: var(--text);
}
.blog-preview-banner .fa-eye { color: var(--accent); margin-right: 4px; }

/* ── Premium (Patreon early access) posts ── */
.blog-card-image-wrap { position: relative; }

.blog-premium-tag {
    position: absolute;
    top: 10px;
    left: 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(13, 17, 23, .82);
    border: 1px solid var(--accent);
    color: var(--accent);
    font-family: var(--mono);
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.blog-premium-tag--inline {
    position: static;
    margin-left: 8px;
    vertical-align: middle;
}

.blog-card--locked .blog-card-read-more { color: var(--muted); }

.blog-premium-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: -.5rem 0 1.25rem;
    font-family: var(--mono);
    font-size: .75rem;
    color: var(--muted);
}

.blog-premium-filter a { color: var(--accent); }

/* Teaser fades out into the unlock panel. */
.blog-post-body--teaser {
    position: relative;
    max-height: 22rem;
    overflow: hidden;
    margin-bottom: 0;
}

.blog-post-body--teaser::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 9rem;
    background: linear-gradient(to bottom, transparent, var(--bg));
    pointer-events: none;
}

.blog-premium-lock {
    margin: 0 0 2.5rem;
    padding: 1.75rem 1.5rem;
    text-align: center;
    background: var(--bg2);
    border: 1px solid var(--line);
    border-top: 3px solid var(--accent);
    border-radius: 6px;
}

.blog-premium-lock-icon { font-size: 1.4rem; color: var(--accent); }

.blog-premium-lock-title {
    margin: .6rem 0 .35rem;
    font-family: var(--display);
    font-size: 1.6rem;
    letter-spacing: .03em;
    color: var(--text);
}

.blog-premium-lock-text {
    max-width: 520px;
    margin: 0 auto 1.1rem;
    color: var(--muted);
    font-size: .92rem;
}

.blog-premium-lock-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

    .blog-post-body h1,
    .blog-post-body h2,
    .blog-post-body h3,
    .blog-post-body h4 {
        font-family: var(--display);
        letter-spacing: .03em;
        color: var(--text);
        margin: 1.75rem 0 .6rem;
        line-height: 1.2;
    }

    .blog-post-body h1 {
        font-size: 1.8rem;
    }

    .blog-post-body h2 {
        font-size: 1.45rem;
    }

    .blog-post-body h3 {
        font-size: 1.2rem;
    }

    .blog-post-body h4 {
        font-size: 1rem;
    }

    .blog-post-body p {
        margin: 0 0 1.1rem;
    }

    .blog-post-body a {
        color: var(--accent);
        text-decoration: underline;
        text-underline-offset: 3px;
    }

        .blog-post-body a:hover {
            color: var(--accent2);
        }

    .blog-post-body strong,
    .blog-post-body b {
        font-weight: 600;
        color: var(--text);
    }

    .blog-post-body em,
    .blog-post-body i {
        font-style: italic;
        color: var(--muted);
    }

    .blog-post-body ul,
    .blog-post-body ol {
        padding-left: 1.4rem;
        margin: 0 0 1.1rem;
    }

    .blog-post-body li {
        margin-bottom: .35rem;
    }

    .blog-post-body blockquote {
        border-left: 3px solid var(--accent);
        padding: .6rem 1rem;
        margin: 1.25rem 0;
        background: var(--bg2);
        border-radius: 0 4px 4px 0;
        color: var(--muted);
        font-style: italic;
    }

    .blog-post-body code {
        font-family: var(--mono);
        font-size: .82em;
        background: var(--bg3);
        border: 1px solid var(--line);
        border-radius: 3px;
        padding: .1em .4em;
        color: var(--accent);
    }

    .blog-post-body pre {
        background: var(--bg3);
        border: 1px solid var(--line);
        border-radius: 4px;
        padding: 1rem 1.1rem;
        overflow-x: auto;
        margin: 0 0 1.1rem;
    }

        .blog-post-body pre code {
            background: none;
            border: none;
            padding: 0;
            font-size: .83rem;
            color: var(--text);
        }

    .blog-post-body img {
        max-width: 100%;
        height: auto;
        border-radius: 4px;
        display: block;
        margin: 1rem auto;
        border: 1px solid var(--line);
    }

    .blog-post-body hr {
        border: none;
        border-top: 1px solid var(--line);
        margin: 1.75rem 0;
    }

/* ── {{archetype-snapshot: slug @ date}} card ── */

.blog-post-body a.arch-snap,
.arch-snap {
    display: block;
    margin: 1.5rem 0;
    padding: 1rem 1.1rem .85rem;
    background: var(--bg2);
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    border-radius: 6px;
    color: var(--text);
    text-decoration: none;
    line-height: 1.35;
    transition: border-color .15s ease, background .15s ease;
}

    .blog-post-body a.arch-snap:hover,
    .arch-snap:hover {
        color: var(--text);
        background: var(--bg3);
        border-color: var(--accent);
    }

.arch-snap__head {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .85rem;
}

.blog-post-body img.arch-snap__img,
.arch-snap__img {
    width: 44px;
    height: 44px;
    margin: 0;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--line);
    flex-shrink: 0;
}

.arch-snap__title {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.arch-snap__name {
    font-family: var(--display);
    font-size: 1.15rem;
    letter-spacing: .03em;
}

.arch-snap__week {
    font-family: var(--mono);
    font-size: .72rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.arch-snap__rank {
    font-family: var(--display);
    font-size: 1.4rem;
    color: var(--accent);
    flex-shrink: 0;
}

.arch-snap__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem 1rem;
}

.arch-snap__stat {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.arch-snap__label {
    font-family: var(--mono);
    font-size: .68rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.arch-snap__value {
    font-family: var(--mono);
    font-size: 1.05rem;
    font-weight: 600;
}

.arch-snap__stat--main .arch-snap__value {
    color: var(--accent);
}

.arch-snap__delta {
    font-family: var(--mono);
    font-size: .72rem;
    color: var(--muted);
}

    .arch-snap__delta.up { color: var(--up); }
    .arch-snap__delta.down { color: var(--down); }

.arch-snap__foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    margin-top: .85rem;
    padding-top: .6rem;
    border-top: 1px solid var(--line);
    font-family: var(--mono);
    font-size: .72rem;
    color: var(--muted);
}

.arch-snap__link {
    margin-left: auto;
    color: var(--accent);
}

@media (max-width: 640px) {
    .arch-snap__stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ── footer ── */

.blog-post-footer {
    border-top: 1px solid var(--line);
    padding-top: 1.25rem;
}

/* ── responsive ── */

@media (max-width: 640px) {
    .blog-post-title {
        font-size: 1.6rem;
    }

    .blog-post-container {
        padding: 1.5rem 1rem 3rem;
    }

    .blog-post-hero {
        max-width: 100%;
    }
}

/* ══════════════════════════════════════════════════════════════════
   LEGAL PAGES (Privacy Policy, Terms, etc.)
   ══════════════════════════════════════════════════════════════════ */

.legal-container {
    max-width: 820px;
    margin: 0 auto;
    padding: 40px 24px 80px;
}

.legal-header {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--accent);
}

.legal-title {
    font-family: var(--display);
    font-size: 48px;
    letter-spacing: 2px;
    color: var(--text);
    line-height: 1;
    margin-bottom: 8px;
}

.legal-subtitle {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}

.legal-toc {
    background: var(--bg2);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 20px 24px;
    margin-bottom: 2.5rem;
}

    .legal-toc ol {
        columns: 2;
        column-gap: 2rem;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .legal-toc li {
        break-inside: avoid;
        margin-bottom: .5rem;
    }

    .legal-toc a {
        font-family: var(--mono);
        font-size: .82rem;
        color: var(--muted);
        text-decoration: none;
        transition: color .15s;
    }

        .legal-toc a:hover {
            color: var(--accent);
        }

@media (max-width: 640px) {
    .legal-toc ol {
        columns: 1;
    }
}

.legal-body {
    font-size: .95rem;
    line-height: 1.8;
    color: var(--text);
}

    .legal-body section {
        border-top: 1px solid var(--line);
        padding-top: 1.75rem;
        margin-bottom: 1.75rem;
        scroll-margin-top: 90px;
    }

    .legal-body section:first-child {
        border-top: none;
        padding-top: 0;
    }

    .legal-body h2 {
        font-family: var(--display);
        font-size: 1.5rem;
        letter-spacing: .03em;
        color: var(--text);
        margin: 0 0 .9rem;
        line-height: 1.2;
    }

    .legal-body h3 {
        font-family: var(--display);
        font-size: 1.1rem;
        letter-spacing: .03em;
        color: var(--text);
        margin: 1.4rem 0 .5rem;
        line-height: 1.2;
    }

    .legal-body p {
        margin: 0 0 1.1rem;
    }

    .legal-body a {
        color: var(--accent);
        text-decoration: underline;
        text-underline-offset: 3px;
    }

        .legal-body a:hover {
            color: var(--accent2);
        }

    .legal-body strong {
        font-weight: 600;
        color: var(--text);
    }

    .legal-body ul,
    .legal-body ol {
        padding-left: 1.4rem;
        margin: 0 0 1.1rem;
    }

    .legal-body li {
        margin-bottom: .5rem;
    }

.legal-table-wrap {
    overflow-x: auto;
    margin: 0 0 1.1rem;
}

.legal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
}

    .legal-table th,
    .legal-table td {
        text-align: left;
        padding: .65rem .9rem;
        border: 1px solid var(--line);
        vertical-align: top;
    }

    .legal-table th {
        font-family: var(--mono);
        font-size: .72rem;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--muted);
        background: var(--bg2);
    }

@media (max-width: 640px) {
    .legal-title {
        font-size: 34px;
    }

    .legal-container {
        padding: 24px 16px 60px;
    }
}

/* ══════════════════════════════════════════════════════════════════
   SHARED COMPONENTS — Account / Deck Builder / My Decks
   Generalizes the *-section / *-section-header / *-section-body
   pattern (see .archetype-section, .submit-section) into reusable,
   unprefixed classes for pages that don't have their own section prefix.
   ══════════════════════════════════════════════════════════════════ */

.dcg-container {
    max-width: 640px;
    margin: 0 auto;
    padding: 24px;
}

.dcg-container--wide {
    max-width: 1400px;
}

.dcg-container--profile {
    max-width: 1040px;
}

.dcg-panel {
    background: var(--bg2);
    border: 1px solid var(--line);
    border-radius: 4px;
    margin-bottom: 24px;
}

.dcg-panel--accent {
    border-top: 3px solid var(--accent);
}

.dcg-panel-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

.dcg-panel-title {
    font-family: var(--display);
    font-size: 22px;
    letter-spacing: 1px;
    color: var(--text);
    line-height: 1;
}

.dcg-panel-subtitle {
    font-family: var(--sans);
    font-size: 13px;
    color: var(--muted);
    margin-top: 4px;
}

.dcg-panel-body {
    padding: 24px;
}

.dcg-panel-body + .dcg-panel-body {
    border-top: 1px solid var(--line2);
}

/* Ghost/outline button — generalized from .decklist-export-btn */
.dcg-btn-ghost {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 10px 20px;
    background: var(--bg3);
    border: 1px solid var(--line);
    color: var(--accent);
    border-radius: 3px;
    cursor: pointer;
    transition: all .15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.dcg-btn-ghost:hover {
    border-color: var(--accent);
    background: rgba(61,208,255,0.08);
}

.dcg-btn-ghost:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.dcg-btn-ghost--danger {
    color: var(--down);
}

.dcg-btn-ghost--danger:hover {
    border-color: var(--down);
    background: rgba(248,113,113,0.08);
}

/* Status pill — generalized from .archetype-section-count */
.dcg-badge {
    display: inline-block;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 2px;
    background: rgba(255,255,255,0.06);
    color: var(--muted);
    border: 1px solid var(--line);
}

.dcg-badge--success {
    background: rgba(74,222,128,0.12);
    color: var(--up);
    border-color: rgba(74,222,128,0.3);
}

.dcg-badge--danger {
    background: rgba(248,113,113,0.12);
    color: var(--down);
    border-color: rgba(248,113,113,0.3);
}

/* Transient feedback toast */
.dcg-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    max-width: 320px;
    background: var(--bg2);
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    color: var(--text);
    font-family: var(--sans);
    font-size: 13px;
    line-height: 1.5;
    padding: 14px 18px;
    border-radius: 3px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.4);
    z-index: 1050;
    display: none;
}

.dcg-toast--error {
    border-left-color: var(--down);
}

/* ── Deck builder card grid ── */
.deck-builder-layout {
    display: grid;
    /* minmax(0, Nfr), not bare Nfr — a plain `fr` track won't shrink below its content's
       intrinsic width (e.g. a long unbroken version-history note), so without the explicit
       0 floor a single long note could force this whole 3-column layout wider than the page. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.deck-builder-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 12px;
    padding: 16px;
    min-height: 90px;
}

/* ── Find Similar Decks ──
   The results list itself reuses the Deck DNA "Closest decks" row design as-is
   (.dna-neighbours/.dna-neighbour/.dna-chip, defined further down) — only the account-creation
   CTA underneath is specific to this panel. */
.deck-builder-account-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 14px 20px;
    border-top: 1px solid var(--bg2);
}

/* ── Auth tabs (Sign In / Create Account switcher) ──
   Same underline-tab treatment as .decklist-tab, generically named since it's shared by the
   Login and Signup pages, not the deck-builder area. */
.dcg-tabs {
    display: flex;
    border-bottom: 1px solid var(--line);
    margin-bottom: 20px;
}

.dcg-tab {
    flex: 1;
    text-align: center;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 16px;
    color: var(--muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: all .15s;
}

.dcg-tab:hover {
    color: var(--text);
    background: rgba(255,255,255,0.03);
}

.dcg-tab.active {
    color: var(--accent);
    background: rgba(61,208,255,0.05);
    border-bottom-color: var(--accent);
}

/* ── "Save your deck" banner (decklist page, reached from Find Similar Decks) ── */
.decklist-save-prompt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 14px 20px;
    margin-bottom: 20px;
    background: var(--bg2);
    border: 1px solid var(--line);
    border-radius: 6px;
}

/* ── Advanced search panel ── */
.deck-builder-advanced-panel {
    display: none;
    flex-direction: column;
    gap: 14px;
    margin-top: 12px;
    padding: 14px 16px;
    background: var(--bg3);
    border: 1px solid var(--line);
    border-radius: 3px;
}

/* Grid, not flex — a fixed-width flex row squeezes every field to an equal fraction
   regardless of viewport, which is what wrapped labels like "Opponent Game Wins" on a
   phone (this row is reused by both Record Match forms and the card-search advanced
   panel). auto-fit + minmax naturally drops to one field per row on narrow screens,
   same self-reflowing technique as .submit-form-row above. */
.deck-builder-advanced-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
}

.deck-builder-advanced-row .form-group {
    /* Without this, a <select>'s longest option can force its min-content width past a
       narrow grid track, overflowing the row instead of letting the track shrink. */
    min-width: 0;
}

.deck-builder-advanced-footer {
    display: flex;
    justify-content: flex-end;
}

.deck-builder-link-btn {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color .15s;
}

.deck-builder-link-btn:hover {
    color: var(--accent);
}

/* ── My Event History row (Match/Events.cshtml) ──
   The "N matches recorded" / "No matches recorded yet" badge is the widest thing in the
   row — squeezed flush against the title by a plain space-between flex row, it wrapped
   mid-phrase on a phone instead of dropping to its own line. */
.match-event-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 12px 16px;
    background: var(--bg2);
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
}

.match-event-row .dcg-badge {
    white-space: nowrap;
}

/* Colour filter chips — dot + label rather than a bare swatch, so the row reads at a glance
   instead of relying on recognising raw hues; the active state uses the app's own accent
   (not each chip's own colour) so multi-select doesn't turn into a wall of clashing rings. */
.deck-builder-color-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.deck-builder-color-swatch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 6px 10px 6px 8px;
    background: var(--bg2);
    border: 1px solid var(--line);
    border-radius: 3px;
    color: var(--muted);
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}

.deck-builder-color-swatch::before {
    content: '';
    width: 9px;
    height: 9px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--swatch-color);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.15);
}

.deck-builder-color-swatch:hover {
    border-color: var(--swatch-color);
    color: var(--text);
}

.deck-builder-color-swatch.active {
    background: rgba(61,208,255,0.08);
    border-color: var(--accent);
    color: var(--text);
}

.deck-builder-tile {
    cursor: grab;
    user-select: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.deck-builder-tile-art {
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--line);
}

.deck-builder-tile-art img {
    width: 100%;
    display: block;
}

.deck-builder-tile-quantity {
    position: absolute;
    top: 4px;
    left: 4px;
    background: rgba(0,0,0,0.85);
    font-family: var(--display);
    font-size: 14px;
    color: var(--accent);
    padding: 1px 6px;
    border-radius: 3px;
    border: 1px solid var(--line);
}

.deck-builder-tile-name {
    font-family: var(--sans);
    font-size: 10px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

/* Own line under the name in search results — on a single "Name - ID" line the ID was the
   part that got ellipsised away on any longer card name. */
.deck-builder-tile-id {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--text);
    text-align: center;
    margin-top: -2px;
}

.deck-builder-tile-qty-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.deck-builder-tile-qty-controls button {
    font-family: var(--mono);
    border: 1px solid var(--line);
    background: var(--bg3);
    color: var(--text);
    width: 20px;
    height: 20px;
    line-height: 1;
    border-radius: 2px;
    cursor: pointer;
}

.deck-builder-tile-qty-controls button:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.deck-builder-zone-count {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .06em;
    color: var(--muted);
}

.deck-builder-sort-select {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .04em;
    padding: 4px 8px;
    background: var(--bg3);
    border: 1px solid var(--line);
    color: var(--text);
    border-radius: 2px;
    cursor: pointer;
}

/* Touch is the primary input here — native HTML5 drag is disabled entirely on it (see
   deck-builder.js's isCoarsePointer), so the +/- steppers are the only way to adjust quantity;
   20px was a mouse-only target, well under the ~44px minimum recommended touch target size. */
@media (pointer: coarse) {
    .deck-builder-tile-qty-controls {
        gap: 10px;
    }

    .deck-builder-tile-qty-controls button {
        width: 36px;
        height: 36px;
        font-size: 18px;
    }
}

.deck-builder-zone-count--full {
    color: var(--up);
}

.deck-builder-zone-count--over {
    color: var(--down);
}

/* Illegal tile — outright banned, over its copy limit, or actively paired with a banned
   partner. A red ring rather than a filled background so the card art stays readable. */
.deck-builder-tile--illegal .deck-builder-tile-art {
    outline: 2px solid var(--down);
    outline-offset: -2px;
    border-radius: 4px;
}

.deck-builder-tile--illegal .deck-builder-tile-name {
    color: var(--down);
}

.deck-builder-issues-panel {
    margin-top: 12px;
    padding: 12px 14px;
    background: rgba(248,113,113,0.06);
    border: 1px solid rgba(248,113,113,0.3);
    border-radius: 3px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.deck-builder-issues-panel-title {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--down);
}

.deck-builder-issue-item {
    font-size: 12px;
    color: var(--text);
    padding-left: 14px;
    position: relative;
}

.deck-builder-issue-item::before {
    content: '—';
    position: absolute;
    left: 0;
    color: var(--down);
}

.sortable-ghost {
    opacity: .35;
}

.deck-builder-version-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.deck-builder-version-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line2);
}

.deck-builder-version-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.deck-builder-version-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.deck-builder-version-title {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Clamped to 3 lines rather than a single nowrap line — the note field is now a multiline
   textarea, so this needs to show actual line breaks (white-space: pre-wrap), not just truncate
   the first one. Still bounded on both axes: line-clamp caps the height for a long note with lots
   of breaks, and overflow-wrap/word-break stop a single very long unbroken "word" from forcing
   the row wider (the .deck-builder-layout minmax(0, …) fix above guards the grid track itself,
   this guards the element within its track either way). Full text is still available via the
   title tooltip (see deck-builder.js / Library/View.cshtml) once clamped. */
.deck-builder-version-note {
    font-family: var(--sans);
    font-size: 12px;
    color: var(--muted);
    max-width: 100%;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
}

.deck-builder-version-date {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--muted2);
}

/* Groups sit side by side (flex-wrap) instead of each claiming a full-width row —
   a group with 1-2 cards (e.g. a single LV.6) no longer wastes a whole line. */
.deck-view-groups {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 32px;
}

.deck-view-group {
    flex: 0 1 auto;
}

.deck-view-group-label {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 8px;
}

.deck-view-group-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.deck-view-group-grid .deck-builder-tile {
    flex: 0 0 90px;
    width: 90px;
}

.deck-view-diff {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-family: var(--mono);
    font-size: 12px;
    margin-bottom: 12px;
}

.deck-view-diff-added {
    color: var(--up);
}

.deck-view-diff-removed {
    color: var(--down);
}

.deck-view-diff-changed {
    color: var(--yellow);
}

/* ── My Decks grid ── */
.saved-deck-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
}

.saved-deck-card {
    background: var(--bg2);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.saved-deck-card-name {
    font-family: var(--display);
    font-size: 22px;
    letter-spacing: .5px;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.saved-deck-card-stats {
    display: flex;
    gap: 16px;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted);
    letter-spacing: .05em;
}

.saved-deck-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
}

/* ── Deck image export ── */
.deck-export-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    align-items: start;
}

.deck-export-canvas-wrap {
    background: #0d1117;
    border-radius: 4px;
    overflow: auto;
}

#exportCanvas {
    width: 100%;
    display: block;
    border-radius: 4px;
}

.deck-export-label {
    display: block;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 8px;
}

.deck-export-bg-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.deck-export-bg-preset {
    font-family: var(--mono);
    font-size: 11px;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.6);
    border: 1px solid var(--line);
    border-radius: 3px;
    padding: 10px 14px;
    cursor: pointer;
    opacity: .65;
    transition: opacity .15s, border-color .15s;
}

.deck-export-bg-preset:hover {
    opacity: 1;
}

.deck-export-bg-preset.active-preset {
    opacity: 1;
    border-color: var(--accent);
}

.deck-export-res {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text);
    background: var(--bg2);
    border: 1px solid var(--line);
    border-radius: 3px;
    padding: 10px 14px;
    cursor: pointer;
    opacity: .65;
    transition: opacity .15s, border-color .15s;
}

.deck-export-res:hover {
    opacity: 1;
}

.deck-export-res.active-preset {
    opacity: 1;
    border-color: var(--accent);
}

.deck-export-status {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted);
    margin-top: 8px;
    min-height: 14px;
}

.deck-export-toggles {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--line2);
}

.deck-export-toggle-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-family: var(--sans);
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
}

.deck-export-toggle-row input[type="checkbox"] {
    margin-top: 3px;
}

.deck-export-toggle-row small {
    display: block;
    color: var(--muted);
    font-size: 11px;
    margin-top: 2px;
}

/* ── Responsive: same 900px content-reflow / 600px page-padding
   breakpoints used sitewide (see .decklist-cards-grid, .submit-form-row) ── */
@media (max-width: 900px) {
    .deck-builder-layout {
        grid-template-columns: 1fr;
    }

    .deck-export-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .dcg-container {
        padding: 16px;
    }

    .dcg-panel-header,
    .dcg-panel-body {
        padding: 16px;
    }

    .saved-deck-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Notification bell (mirrors .nav-search / .search-dropdown) ── */
.nav-notif {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 16px;
    border-right: 1px solid var(--line);
}

/* Below 600px this sits right after the logo (order:2), ahead of the search icon (order:3) — the
   bell and search live together next to the logo; only the hamburger (order:10, with its own
   margin-left:auto — see .nav-hamburger) sits alone at the far right. Must stay after the base
   .nav-notif rule above for padding/border-right to actually take effect — same source-order
   reasoning as .notif-dropdown's mobile override further down. */
@media (max-width: 600px) {
    .nav-notif {
        order: 2;
        padding: 0 10px;
        border-right: none;
    }
}

.nav-notif-bell {
    position: relative;
    background: none;
    border: none;
    color: var(--muted);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 0;
    transition: color .15s;
}

.nav-notif-bell:hover {
    color: var(--text);
}

.notif-badge {
    position: absolute;
    top: -6px;
    right: -9px;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    border-radius: 8px;
    background: var(--down);
    color: #fff;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    line-height: 15px;
    text-align: center;
}

.notif-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    /* min() rather than a flat 320px — anchored right:0 against the bell, a fixed width would
       overflow past the left edge of the viewport on a narrow phone. */
    width: min(320px, calc(100vw - 24px));
    background: var(--bg2);
    border: 1px solid var(--line);
    border-top: 2px solid var(--accent);
    max-height: 400px;
    overflow-y: auto;
    display: none;
    z-index: 1000;
    box-shadow: 0 8px 16px rgba(0,0,0,0.4);
    margin-top: 1px;
}

.notif-dropdown.active {
    display: block;
}

/* Below 600px, the nav reorders .nav-notif into a right-aligned icon cluster ahead of the
   search/hamburger buttons (see .nav's own ≤600px block), so the bell no longer sits at the
   nav's true right edge — anchoring the dropdown to the bell's own box via `right:0` (the base
   rule above) put its left edge past the screen's left edge on narrow phones. Fixed-positioning
   it to the viewport instead sidesteps the bell's position entirely: a full-width-minus-margins
   sheet under the nav bar, guaranteed to fit regardless of where the bell icon lands. This has to
   stay physically AFTER the base .notif-dropdown rule above — same selector, same specificity, so
   CSS falls back to source order, and an earlier copy of this override (previously sitting up in
   the general ≤600px nav block) was silently losing to the base rule for exactly that reason. */
@media (max-width: 600px) {
    .notif-dropdown {
        position: fixed;
        top: 52px; /* .nav's own height */
        left: 12px;
        right: 12px;
        width: auto;
    }
}

.notif-header {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--accent);
    padding: 10px 16px 6px;
}

.notif-empty {
    padding: 16px;
    font-family: var(--sans);
    font-size: 12px;
    color: var(--muted);
}

.notif-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px 10px 16px;
    border-top: 1px solid var(--line2);
    transition: background .15s;
}

.notif-item:first-of-type {
    border-top: none;
}

.notif-item:hover {
    background: rgba(255,255,255,0.03);
}

.notif-item-link {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
    text-decoration: none;
}

.notif-item-title {
    font-family: var(--sans);
    font-size: 12px;
    color: var(--text);
}

.notif-item-meta {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--muted);
}

.notif-item-ignore {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--muted);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: color .15s, background .15s;
}

.notif-item-ignore:hover {
    color: var(--text);
    background: rgba(255,255,255,0.08);
}

.notif-footer-link {
    display: block;
    padding: 9px 16px;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-align: center;
    color: var(--accent);
    text-decoration: none;
    border-top: 1px solid var(--line2);
    transition: background .15s;
}

.notif-footer-link:hover {
    background: rgba(255,255,255,0.03);
}

/* The bell used to be hidden entirely below 900px (with a "Submit your decklist" link buried in
   the hamburger menu standing in for it) — now stays visible at every width; see the ≤600px block
   above for how it's repositioned into the right-aligned icon cluster once the hamburger takes over. */

/* ── Full notifications page (Account/Notifications) ─────────────────────── */

.notif-page-list {
    display: flex;
    flex-direction: column;
}

.notif-page-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 4px;
    border-top: 1px solid var(--line2);
}

.notif-page-item:first-child {
    border-top: none;
}

.notif-page-item--dismissed {
    opacity: 0.55;
}

.notif-page-item .notif-item-link {
    flex: 1 1 auto;
}

.notif-page-item .notif-item-title {
    font-size: 13px;
}

.notif-page-item .notif-item-meta {
    font-size: 11px;
}

.notif-page-item-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.notif-page-item-status {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
}

.notif-page-item-btn {
    padding: 5px 12px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--text);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 4px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

.notif-page-item-btn:hover {
    background: rgba(255,255,255,0.05);
    border-color: var(--accent);
}

/* ── Settings tabs ── */
/* A bordered chip strip, not bare text sitting on the page background — same "grouped control"
   language as .deck-builder-color-swatches, so a tab bar reads as one cohesive component instead
   of floating disconnected from the panels it switches between. */
.dcg-tab-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    background: var(--bg2);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 6px;
    margin-bottom: 20px;
}

.dcg-tab-btn {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    background: none;
    border: 1px solid transparent;
    border-radius: 3px;
    padding: 9px 14px;
    cursor: pointer;
    transition: color .15s, background .15s, border-color .15s;
}

.dcg-tab-btn:hover {
    color: var(--text);
    background: rgba(255,255,255,0.04);
}

/* Soft accent fill + border, not a hard accent-filled pill — same active-state treatment as
   .deck-builder-color-swatch.active, so "selected" reads the same way everywhere in the app. */
.dcg-tab-btn.active {
    color: var(--accent);
    background: rgba(61,208,255,0.08);
    border-color: var(--accent);
}

.dcg-tab-panel {
    display: none;
}

.dcg-tab-panel.active {
    display: block;
}

/* Standardises the gap between stacked cards within one tab panel — several tabs (Account
   Settings' Profile/Team/Bandai tabs in particular) previously hand-rolled this per-panel via an
   inline style="margin-top:20px" on the second/third .dcg-panel, and not everywhere consistently;
   this makes it automatic so every tab's internal rhythm matches without relying on each new panel
   remembering to add it. */
.dcg-tab-panel .dcg-panel + .dcg-panel {
    margin-top: 20px;
}

/* ── "Coming soon" tab (e.g. saved-deck Fingerprint tab) ── */
.dcg-tab-btn--soon {
    opacity: .5;
}

.dcg-tab-btn--soon:hover {
    opacity: .75;
}

.dcg-tab-btn--soon.active {
    color: var(--muted);
    background: rgba(255,255,255,0.06);
    border-color: var(--muted2);
}

.dcg-tab-soon-badge {
    font-size: 9px;
    letter-spacing: .06em;
    color: var(--muted);
    border: 1px solid var(--line);
    border-radius: 3px;
    padding: 1px 5px;
    margin-left: 6px;
    vertical-align: middle;
}

/* ── Region flag badge, small variant — decklist listing rows (events, archetype decks, etc.);
   see _RegionFlagBadge.cshtml. Deliberately smaller than .profile-region-flag below. ── */
.region-flag-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 13px;
    border-radius: 2px;
    box-shadow: 0 0 0 1px var(--line);
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
    vertical-align: middle;
}

.region-flag-badge--unset {
    background: var(--bg3);
    color: var(--muted);
    font-size: 8px;
}

/* ── Patreon supporter badge (see _SupporterBadge.cshtml) ── */
.supporter-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 7px;
    margin-left: 4px;
    border-radius: 999px;
    border: 1px solid currentColor;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1.6;
    vertical-align: middle;
    white-space: nowrap;
}

.supporter-badge .fas { font-size: 9px; }

.supporter-badge--supporter   { color: #3DD0FF; background: rgba(61, 208, 255, .1); }
.supporter-badge--contributor { color: #B388FF; background: rgba(179, 136, 255, .12); }
.supporter-badge--champion    { color: #FFD166; background: rgba(255, 209, 102, .12); }

/* Beside a name in a list: just the icon, so rows stay tidy. */
.supporter-badge-compact .supporter-badge { padding: 0; width: 18px; height: 18px; justify-content: center; }
.supporter-badge-compact .supporter-badge-label { display: none; }

.supporter-badge-profile .supporter-badge { font-size: 11px; padding: 2px 9px; }

/* ── Region flag badge (public profile — see RegionCatalog.ToFlagCssClass) ── */
.profile-region-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 21px;
    margin-left: 8px;
    vertical-align: middle;
    border-radius: 3px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    box-shadow: 0 0 0 1px var(--line);
}

.profile-region-flag--unset {
    background: var(--bg3);
    color: var(--muted);
    font-size: 12px;
}

/* ── Notice banners (staff-authored, event/deck-level) — see _NoticeBanners.cshtml.
   Same shape as .dna-notice above, extended with a --danger variant using the same
   --down token .fp-score-card--danger already borrows for red states. ── */
.notice-banner-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.notice-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--text);
}

.notice-banner--info {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}

.notice-banner--warning {
    background: color-mix(in srgb, var(--yellow) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--yellow) 40%, transparent);
}

.notice-banner--danger {
    background: color-mix(in srgb, var(--down) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--down) 40%, transparent);
}

.notice-banner__icon {
    flex-shrink: 0;
    margin-top: 0.1rem;
}

/* ── Submit form: player-tag search + "insert one of my decks" (see Submit/Index.cshtml) ── */
.player-search-dropdown,
.my-decks-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 20;
    max-height: 220px;
    overflow-y: auto;
    background: var(--bg2);
    border: 1px solid var(--line);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}

.my-decks-dropdown {
    min-width: 220px;
    right: auto;
}

.player-search-dropdown.active,
.my-decks-dropdown.active {
    display: block;
}

.player-search-option,
.my-decks-option {
    padding: 8px 12px;
    cursor: pointer;
    font-family: var(--sans);
    font-size: 13px;
    color: var(--text);
}

.player-search-option:hover,
.my-decks-option:hover {
    background: var(--bg3);
}

.my-decks-empty {
    padding: 10px 12px;
    font-size: 12px;
    color: var(--muted);
}

/* ── Region combobox (searchable — see Settings profile tab) ── */
.region-combo-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 20;
    max-height: 260px;
    overflow-y: auto;
    background: var(--bg2);
    border: 1px solid var(--line);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}

.region-combo-dropdown.active {
    display: block;
}

.region-combo-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    font-family: var(--sans);
    font-size: 13px;
    color: var(--text);
}

.region-combo-option:hover,
.region-combo-option.highlighted {
    background: var(--bg3);
}

.region-combo-option-flag {
    width: 22px;
    height: 16px;
    flex-shrink: 0;
    border-radius: 2px;
    box-shadow: 0 0 0 1px var(--line);
    background-size: cover;
    background-position: center;
}

.region-combo-option-code {
    margin-left: auto;
    font-family: var(--mono);
    font-size: 10px;
    color: var(--muted);
}

.region-combo-empty {
    padding: 10px 12px;
    font-size: 12px;
    color: var(--muted);
}

/* Flag icon shown inside the region search box for the currently-selected region — an
   <input>'s value is plain text, so this sits as a separate absolutely-positioned element. */
.region-input-flag {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 14px;
    border-radius: 2px;
    box-shadow: 0 0 0 1px var(--line);
    background-size: cover;
    background-position: center;
    pointer-events: none;
}

/* ── Avatar picker ── */
.avatar-picker-preview {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--line);
    background: var(--bg3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.avatar-picker-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-picker-results {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 10px;
    margin-top: 12px;
    max-height: 280px;
    overflow-y: auto;
}

.avatar-picker-result {
    cursor: pointer;
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow: hidden;
    background: var(--bg3);
    transition: border-color .15s;
}

.avatar-picker-result:hover {
    border-color: var(--accent);
}

.avatar-picker-result img {
    width: 100%;
    display: block;
}

.avatar-picker-result-name {
    font-family: var(--sans);
    font-size: 10px;
    color: var(--muted);
    text-align: center;
    padding: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Teams directory ── */
.team-directory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}

.team-directory-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    text-decoration: none;
    transition: border-color .15s ease;
}

.team-directory-card:hover {
    border-color: var(--accent);
}

/* ── Avatar ring / borders ── */
.avatar-ring {
    display: inline-block;
    position: relative;
    border-radius: 50%;
    padding: 3px;
    background: var(--line);
}

.avatar-border--slate  { background: linear-gradient(135deg, #64748b, #334155); }
.avatar-border--accent { background: var(--accent); }
.avatar-border--ember   { background: linear-gradient(135deg, #f97316, #dc2626); }
.avatar-border--glow    { background: #3DD0FF; box-shadow: 0 0 14px 2px rgba(61,208,255,.55); }
.avatar-border--gold    { background: linear-gradient(135deg, #fde047, #b45309); }
.avatar-border--prism   { background: linear-gradient(135deg, #f472b6, #a78bfa, #3DD0FF, #34d399, #fde047); }

/* ── Achievement-reward borders ── */
/* One shared jagged/faceted ring shape (a "gem-cut" glow ring, not a flat gradient fill) reused
   across all 8, same idea as most gacha-game rarity frames — the shape stays constant, color +
   motion escalate with tier: rung 1 = static single colour, rung 2 = same colour family +
   animated glow, top rung of each ladder = a genuinely distinct multi-colour treatment +
   strongest animation. The ring art lives on ::after (never on the class the wrapper itself
   uses) so it can safely use filter/transform without ever touching the avatar photo sitting
   in the ring's center — filter/transform on a real element reaches its children, but ::after
   has none. */
.avatar-border--achv-bronze-dash,
.avatar-border--achv-silver-stripe,
.avatar-border--achv-gold-weave,
.avatar-border--achv-sky-dash,
.avatar-border--achv-jet-stripe,
.avatar-border--achv-storm-weave,
.avatar-border--achv-contender-stripe,
.avatar-border--achv-champion-burst,
.avatar-border--achv-kindred-spirit,
.avatar-border--achv-signature-style,
.avatar-border--achv-one-track-mind,
.avatar-border--achv-prism-wanderer,
.avatar-border--achv-triple-crown,
.avatar-border--achv-flawless,
.avatar-border--achv-living-legend,
.avatar-border--achv-long-haul,
.avatar-border--achv-podium-finish,
.avatar-border--achv-forge-steel,
.avatar-border--achv-frost-sweep,
.avatar-border--achv-bastion,
.avatar-border--achv-overdrive,
.avatar-border--achv-millstone,
.avatar-border--achv-sunset-circuit,
.avatar-border--achv-hot-streak,
.avatar-border--achv-twin-bill,
.avatar-border--achv-fresh-start,
.avatar-border--achv-runner-up,
.avatar-border--achv-sunrise,
.avatar-border--achv-trifecta,
.avatar-border--achv-clockwork,
.avatar-border--achv-silk-touch,
.avatar-border--achv-steadfast,
.avatar-border--achv-full-circle,
.avatar-border--achv-timeworn,
.avatar-border--achv-quicksilver,
.avatar-border--achv-dual-wielder,
.avatar-border--achv-second-wind {
    background: var(--bg3);
}

.avatar-border--achv-bronze-dash::after,
.avatar-border--achv-silver-stripe::after,
.avatar-border--achv-gold-weave::after,
.avatar-border--achv-sky-dash::after,
.avatar-border--achv-jet-stripe::after,
.avatar-border--achv-storm-weave::after,
.avatar-border--achv-contender-stripe::after,
.avatar-border--achv-champion-burst::after,
.avatar-border--achv-kindred-spirit::after,
.avatar-border--achv-signature-style::after,
.avatar-border--achv-one-track-mind::after,
.avatar-border--achv-prism-wanderer::after,
.avatar-border--achv-triple-crown::after,
.avatar-border--achv-flawless::after,
.avatar-border--achv-living-legend::after,
.avatar-border--achv-long-haul::after,
.avatar-border--achv-podium-finish::after,
.avatar-border--achv-forge-steel::after,
.avatar-border--achv-frost-sweep::after,
.avatar-border--achv-bastion::after,
.avatar-border--achv-overdrive::after,
.avatar-border--achv-millstone::after,
.avatar-border--achv-sunset-circuit::after,
.avatar-border--achv-hot-streak::after,
.avatar-border--achv-twin-bill::after,
.avatar-border--achv-fresh-start::after,
.avatar-border--achv-runner-up::after,
.avatar-border--achv-sunrise::after,
.avatar-border--achv-trifecta::after,
.avatar-border--achv-clockwork::after,
.avatar-border--achv-silk-touch::after,
.avatar-border--achv-steadfast::after,
.avatar-border--achv-full-circle::after,
.avatar-border--achv-timeworn::after,
.avatar-border--achv-quicksilver::after,
.avatar-border--achv-dual-wielder::after,
.avatar-border--achv-second-wind::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: 50%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    pointer-events: none;
}

/* Submissions ladder — bronze -> silver -> gold, same jagged ring, richer per rung */
.avatar-border--achv-bronze-dash {
    --glow: rgba(181,101,29,.5);
    box-shadow: 0 0 8px 1px var(--glow);
}
.avatar-border--achv-bronze-dash::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M94,50 L84.2,61.1 L88,77.6 L73.5,82.4 L63.9,92.8 L50,84 L36.4,91.8 L31.2,75.9 L12.8,77 L12.9,62.1 L7,50 L16.7,39.2 L12,22.4 L27.7,19.3 L36.4,8.2 L50,17 L64.2,6.3 L73.5,17.6 L84.8,24.7 L84.2,38.9 Z M80,50 A30,30 0 1,0 20,50 A30,30 0 1,0 80,50 Z' fill='%23b5651d' fill-rule='evenodd'/%3E%3Cg fill='%23f0d9b5'%3E%3Crect x='-2.5' y='-2.5' width='5' height='5' transform='translate(88,77.6) rotate(45)'/%3E%3Crect x='-2.5' y='-2.5' width='5' height='5' transform='translate(12.8,77) rotate(45)'/%3E%3Crect x='-2.5' y='-2.5' width='5' height='5' transform='translate(12,22.4) rotate(45)'/%3E%3Crect x='-2.5' y='-2.5' width='5' height='5' transform='translate(64.2,6.3) rotate(45)'/%3E%3C/g%3E%3C/svg%3E");
}

.avatar-border--achv-silver-stripe {
    --glow: rgba(148,163,184,.55);
    box-shadow: 0 0 8px 1px var(--glow);
    animation: dcg-glow-pulse 2.4s ease-in-out infinite;
}
.avatar-border--achv-silver-stripe::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23f8fafc'/%3E%3Cstop offset='1' stop-color='%2394a3b8'/%3E%3C/linearGradient%3E%3Cfilter id='b'%3E%3CfeGaussianBlur stdDeviation='2.2'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M94,50 L84.2,61.1 L88,77.6 L73.5,82.4 L63.9,92.8 L50,84 L36.4,91.8 L31.2,75.9 L12.8,77 L12.9,62.1 L7,50 L16.7,39.2 L12,22.4 L27.7,19.3 L36.4,8.2 L50,17 L64.2,6.3 L73.5,17.6 L84.8,24.7 L84.2,38.9 Z M80,50 A30,30 0 1,0 20,50 A30,30 0 1,0 80,50 Z' fill='url(%23g)' filter='url(%23b)' opacity='.6' fill-rule='evenodd'/%3E%3Cpath d='M94,50 L84.2,61.1 L88,77.6 L73.5,82.4 L63.9,92.8 L50,84 L36.4,91.8 L31.2,75.9 L12.8,77 L12.9,62.1 L7,50 L16.7,39.2 L12,22.4 L27.7,19.3 L36.4,8.2 L50,17 L64.2,6.3 L73.5,17.6 L84.8,24.7 L84.2,38.9 Z M80,50 A30,30 0 1,0 20,50 A30,30 0 1,0 80,50 Z' fill='url(%23g)' fill-rule='evenodd'/%3E%3Cg fill='%23ffffff'%3E%3Crect x='-3' y='-3' width='6' height='6' transform='translate(88,77.6) rotate(45)'/%3E%3Crect x='-3' y='-3' width='6' height='6' transform='translate(12.8,77) rotate(45)'/%3E%3Crect x='-3' y='-3' width='6' height='6' transform='translate(12,22.4) rotate(45)'/%3E%3Crect x='-3' y='-3' width='6' height='6' transform='translate(64.2,6.3) rotate(45)'/%3E%3C/g%3E%3C/svg%3E");
    animation: dcg-ring-pulse 2.4s ease-in-out infinite;
}

.avatar-border--achv-gold-weave {
    --glow: rgba(253,224,71,.6);
    box-shadow: 0 0 12px 2px var(--glow);
    animation: dcg-glow-pulse 2.2s ease-in-out infinite;
}
.avatar-border--achv-gold-weave::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fef9c3'/%3E%3Cstop offset='.5' stop-color='%23fde047'/%3E%3Cstop offset='1' stop-color='%23b45309'/%3E%3C/linearGradient%3E%3Cfilter id='b'%3E%3CfeGaussianBlur stdDeviation='2.4'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M94,50 L84.2,61.1 L88,77.6 L73.5,82.4 L63.9,92.8 L50,84 L36.4,91.8 L31.2,75.9 L12.8,77 L12.9,62.1 L7,50 L16.7,39.2 L12,22.4 L27.7,19.3 L36.4,8.2 L50,17 L64.2,6.3 L73.5,17.6 L84.8,24.7 L84.2,38.9 Z M80,50 A30,30 0 1,0 20,50 A30,30 0 1,0 80,50 Z' fill='url(%23g)' filter='url(%23b)' opacity='.65' fill-rule='evenodd'/%3E%3Cpath d='M94,50 L84.2,61.1 L88,77.6 L73.5,82.4 L63.9,92.8 L50,84 L36.4,91.8 L31.2,75.9 L12.8,77 L12.9,62.1 L7,50 L16.7,39.2 L12,22.4 L27.7,19.3 L36.4,8.2 L50,17 L64.2,6.3 L73.5,17.6 L84.8,24.7 L84.2,38.9 Z M80,50 A30,30 0 1,0 20,50 A30,30 0 1,0 80,50 Z' fill='url(%23g)' fill-rule='evenodd'/%3E%3Cg fill='%23fffbeb'%3E%3Crect x='-3' y='-3' width='6' height='6' transform='translate(88,77.6) rotate(45)'/%3E%3Crect x='-3' y='-3' width='6' height='6' transform='translate(12.8,77) rotate(45)'/%3E%3Crect x='-3' y='-3' width='6' height='6' transform='translate(12,22.4) rotate(45)'/%3E%3Crect x='-3' y='-3' width='6' height='6' transform='translate(64.2,6.3) rotate(45)'/%3E%3C/g%3E%3C/svg%3E");
    animation: dcg-ring-radiant 2.6s ease-in-out infinite;
}

/* Attendance ladder — pale sky -> deeper current -> an actual live storm */
.avatar-border--achv-sky-dash {
    --glow: rgba(125,211,252,.5);
    box-shadow: 0 0 8px 1px var(--glow);
}
.avatar-border--achv-sky-dash::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M94,50 L84.2,61.1 L88,77.6 L73.5,82.4 L63.9,92.8 L50,84 L36.4,91.8 L31.2,75.9 L12.8,77 L12.9,62.1 L7,50 L16.7,39.2 L12,22.4 L27.7,19.3 L36.4,8.2 L50,17 L64.2,6.3 L73.5,17.6 L84.8,24.7 L84.2,38.9 Z M80,50 A30,30 0 1,0 20,50 A30,30 0 1,0 80,50 Z' fill='%237dd3fc' fill-rule='evenodd'/%3E%3Cg fill='%23e0f2fe'%3E%3Crect x='-2.5' y='-2.5' width='5' height='5' transform='translate(88,77.6) rotate(45)'/%3E%3Crect x='-2.5' y='-2.5' width='5' height='5' transform='translate(12.8,77) rotate(45)'/%3E%3Crect x='-2.5' y='-2.5' width='5' height='5' transform='translate(12,22.4) rotate(45)'/%3E%3Crect x='-2.5' y='-2.5' width='5' height='5' transform='translate(64.2,6.3) rotate(45)'/%3E%3C/g%3E%3C/svg%3E");
}

.avatar-border--achv-jet-stripe {
    --glow: rgba(37,99,235,.55);
    box-shadow: 0 0 8px 1px var(--glow);
    animation: dcg-glow-pulse 1.6s ease-in-out infinite;
}
.avatar-border--achv-jet-stripe::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23bfdbfe'/%3E%3Cstop offset='1' stop-color='%231d4ed8'/%3E%3C/linearGradient%3E%3Cfilter id='b'%3E%3CfeGaussianBlur stdDeviation='2.2'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M94,50 L84.2,61.1 L88,77.6 L73.5,82.4 L63.9,92.8 L50,84 L36.4,91.8 L31.2,75.9 L12.8,77 L12.9,62.1 L7,50 L16.7,39.2 L12,22.4 L27.7,19.3 L36.4,8.2 L50,17 L64.2,6.3 L73.5,17.6 L84.8,24.7 L84.2,38.9 Z M80,50 A30,30 0 1,0 20,50 A30,30 0 1,0 80,50 Z' fill='url(%23g)' filter='url(%23b)' opacity='.6' fill-rule='evenodd'/%3E%3Cpath d='M94,50 L84.2,61.1 L88,77.6 L73.5,82.4 L63.9,92.8 L50,84 L36.4,91.8 L31.2,75.9 L12.8,77 L12.9,62.1 L7,50 L16.7,39.2 L12,22.4 L27.7,19.3 L36.4,8.2 L50,17 L64.2,6.3 L73.5,17.6 L84.8,24.7 L84.2,38.9 Z M80,50 A30,30 0 1,0 20,50 A30,30 0 1,0 80,50 Z' fill='url(%23g)' fill-rule='evenodd'/%3E%3Cg fill='%23eff6ff'%3E%3Crect x='-3' y='-3' width='6' height='6' transform='translate(88,77.6) rotate(45)'/%3E%3Crect x='-3' y='-3' width='6' height='6' transform='translate(12.8,77) rotate(45)'/%3E%3Crect x='-3' y='-3' width='6' height='6' transform='translate(12,22.4) rotate(45)'/%3E%3Crect x='-3' y='-3' width='6' height='6' transform='translate(64.2,6.3) rotate(45)'/%3E%3C/g%3E%3C/svg%3E");
    animation: dcg-ring-pulse 1.4s ease-in-out infinite;
}

.avatar-border--achv-storm-weave {
    --glow: rgba(129,140,248,.65);
    box-shadow: 0 0 14px 3px var(--glow);
    animation: dcg-glow-pulse 1.3s ease-in-out infinite;
}
.avatar-border--achv-storm-weave::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%2338bdf8'/%3E%3Cstop offset='.5' stop-color='%23818cf8'/%3E%3Cstop offset='1' stop-color='%23f5d0fe'/%3E%3C/linearGradient%3E%3Cfilter id='b'%3E%3CfeGaussianBlur stdDeviation='2.6'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M94,50 L84.2,61.1 L88,77.6 L73.5,82.4 L63.9,92.8 L50,84 L36.4,91.8 L31.2,75.9 L12.8,77 L12.9,62.1 L7,50 L16.7,39.2 L12,22.4 L27.7,19.3 L36.4,8.2 L50,17 L64.2,6.3 L73.5,17.6 L84.8,24.7 L84.2,38.9 Z M80,50 A30,30 0 1,0 20,50 A30,30 0 1,0 80,50 Z' fill='url(%23g)' filter='url(%23b)' opacity='.7' fill-rule='evenodd'/%3E%3Cpath d='M94,50 L84.2,61.1 L88,77.6 L73.5,82.4 L63.9,92.8 L50,84 L36.4,91.8 L31.2,75.9 L12.8,77 L12.9,62.1 L7,50 L16.7,39.2 L12,22.4 L27.7,19.3 L36.4,8.2 L50,17 L64.2,6.3 L73.5,17.6 L84.8,24.7 L84.2,38.9 Z M80,50 A30,30 0 1,0 20,50 A30,30 0 1,0 80,50 Z' fill='url(%23g)' fill-rule='evenodd'/%3E%3Cg fill='%23faf5ff'%3E%3Crect x='-3.4' y='-3.4' width='6.8' height='6.8' transform='translate(88,77.6) rotate(45)'/%3E%3Crect x='-3.4' y='-3.4' width='6.8' height='6.8' transform='translate(12.8,77) rotate(45)'/%3E%3Crect x='-3.4' y='-3.4' width='6.8' height='6.8' transform='translate(12,22.4) rotate(45)'/%3E%3Crect x='-3.4' y='-3.4' width='6.8' height='6.8' transform='translate(64.2,6.3) rotate(45)'/%3E%3C/g%3E%3C/svg%3E");
    animation: dcg-ring-flicker 2.6s infinite;
}

/* Placement ladder — competitive green -> a radiant championship burst, the flagship of the site */
.avatar-border--achv-contender-stripe {
    --glow: rgba(52,211,153,.5);
    box-shadow: 0 0 8px 1px var(--glow);
}
.avatar-border--achv-contender-stripe::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M94,50 L84.2,61.1 L88,77.6 L73.5,82.4 L63.9,92.8 L50,84 L36.4,91.8 L31.2,75.9 L12.8,77 L12.9,62.1 L7,50 L16.7,39.2 L12,22.4 L27.7,19.3 L36.4,8.2 L50,17 L64.2,6.3 L73.5,17.6 L84.8,24.7 L84.2,38.9 Z M80,50 A30,30 0 1,0 20,50 A30,30 0 1,0 80,50 Z' fill='%2334d399' fill-rule='evenodd'/%3E%3Cg fill='%23d1fae5'%3E%3Crect x='-2.5' y='-2.5' width='5' height='5' transform='translate(88,77.6) rotate(45)'/%3E%3Crect x='-2.5' y='-2.5' width='5' height='5' transform='translate(12.8,77) rotate(45)'/%3E%3Crect x='-2.5' y='-2.5' width='5' height='5' transform='translate(12,22.4) rotate(45)'/%3E%3Crect x='-2.5' y='-2.5' width='5' height='5' transform='translate(64.2,6.3) rotate(45)'/%3E%3C/g%3E%3C/svg%3E");
}

.avatar-border--achv-champion-burst {
    --glow: rgba(249,115,22,.7);
    box-shadow: 0 0 16px 3px var(--glow);
    animation: dcg-glow-pulse 1.1s ease-in-out infinite;
}
.avatar-border--achv-champion-burst::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fef08a'/%3E%3Cstop offset='.5' stop-color='%23f97316'/%3E%3Cstop offset='1' stop-color='%23dc2626'/%3E%3C/linearGradient%3E%3Cfilter id='b'%3E%3CfeGaussianBlur stdDeviation='2.6'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M94,50 L84.2,61.1 L88,77.6 L73.5,82.4 L63.9,92.8 L50,84 L36.4,91.8 L31.2,75.9 L12.8,77 L12.9,62.1 L7,50 L16.7,39.2 L12,22.4 L27.7,19.3 L36.4,8.2 L50,17 L64.2,6.3 L73.5,17.6 L84.8,24.7 L84.2,38.9 Z M80,50 A30,30 0 1,0 20,50 A30,30 0 1,0 80,50 Z' fill='url(%23g)' filter='url(%23b)' opacity='.7' fill-rule='evenodd'/%3E%3Cpath d='M94,50 L84.2,61.1 L88,77.6 L73.5,82.4 L63.9,92.8 L50,84 L36.4,91.8 L31.2,75.9 L12.8,77 L12.9,62.1 L7,50 L16.7,39.2 L12,22.4 L27.7,19.3 L36.4,8.2 L50,17 L64.2,6.3 L73.5,17.6 L84.8,24.7 L84.2,38.9 Z M80,50 A30,30 0 1,0 20,50 A30,30 0 1,0 80,50 Z' fill='url(%23g)' fill-rule='evenodd'/%3E%3Cg fill='%23fff7ed'%3E%3Crect x='-3.4' y='-3.4' width='6.8' height='6.8' transform='translate(88,77.6) rotate(45)'/%3E%3Crect x='-3.4' y='-3.4' width='6.8' height='6.8' transform='translate(12.8,77) rotate(45)'/%3E%3Crect x='-3.4' y='-3.4' width='6.8' height='6.8' transform='translate(12,22.4) rotate(45)'/%3E%3Crect x='-3.4' y='-3.4' width='6.8' height='6.8' transform='translate(64.2,6.3) rotate(45)'/%3E%3C/g%3E%3C/svg%3E");
    animation: dcg-ring-radiant 1.2s ease-in-out infinite;
}

@keyframes dcg-glow-pulse {
    0%, 100% { box-shadow: 0 0 8px 1px var(--glow); }
    50%      { box-shadow: 0 0 20px 5px var(--glow); }
}
@keyframes dcg-ring-pulse {
    0%, 100% { filter: brightness(1); opacity: .92; }
    50%      { filter: brightness(1.35); opacity: 1; }
}
@keyframes dcg-ring-radiant {
    0%, 100% { filter: brightness(1) saturate(1); transform: scale(1); }
    50%      { filter: brightness(1.5) saturate(1.2); transform: scale(1.035); }
}
@keyframes dcg-ring-flicker {
    0%, 100% { opacity: .78; filter: brightness(1); }
    4%       { opacity: 1;   filter: brightness(2.1); }
    7%       { opacity: .78; filter: brightness(1); }
    10%      { opacity: 1;   filter: brightness(2.5); }
    13%      { opacity: .78; filter: brightness(1); }
    55%      { opacity: .82; filter: brightness(1); }
    58%      { opacity: 1;   filter: brightness(1.8); }
    61%      { opacity: .78; filter: brightness(1); }
}

/* Profile ladder — actually using the account features: soft violet -> full "make it yours" spread */
.avatar-border--achv-kindred-spirit {
    --glow: rgba(196,181,253,.5);
    box-shadow: 0 0 8px 1px var(--glow);
}
.avatar-border--achv-kindred-spirit::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M94,50 L84.2,61.1 L88,77.6 L73.5,82.4 L63.9,92.8 L50,84 L36.4,91.8 L31.2,75.9 L12.8,77 L12.9,62.1 L7,50 L16.7,39.2 L12,22.4 L27.7,19.3 L36.4,8.2 L50,17 L64.2,6.3 L73.5,17.6 L84.8,24.7 L84.2,38.9 Z M80,50 A30,30 0 1,0 20,50 A30,30 0 1,0 80,50 Z' fill='%23c4b5fd' fill-rule='evenodd'/%3E%3Cg fill='%23ede9fe'%3E%3Crect x='-2.5' y='-2.5' width='5' height='5' transform='translate(88,77.6) rotate(45)'/%3E%3Crect x='-2.5' y='-2.5' width='5' height='5' transform='translate(12.8,77) rotate(45)'/%3E%3Crect x='-2.5' y='-2.5' width='5' height='5' transform='translate(12,22.4) rotate(45)'/%3E%3Crect x='-2.5' y='-2.5' width='5' height='5' transform='translate(64.2,6.3) rotate(45)'/%3E%3C/g%3E%3C/svg%3E");
}

.avatar-border--achv-signature-style {
    --glow: rgba(167,139,250,.6);
    box-shadow: 0 0 14px 2px var(--glow);
    animation: dcg-glow-pulse 2s ease-in-out infinite;
}
.avatar-border--achv-signature-style::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23f472b6'/%3E%3Cstop offset='.5' stop-color='%23a78bfa'/%3E%3Cstop offset='1' stop-color='%2338bdf8'/%3E%3C/linearGradient%3E%3Cfilter id='b'%3E%3CfeGaussianBlur stdDeviation='2.4'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M94,50 L84.2,61.1 L88,77.6 L73.5,82.4 L63.9,92.8 L50,84 L36.4,91.8 L31.2,75.9 L12.8,77 L12.9,62.1 L7,50 L16.7,39.2 L12,22.4 L27.7,19.3 L36.4,8.2 L50,17 L64.2,6.3 L73.5,17.6 L84.8,24.7 L84.2,38.9 Z M80,50 A30,30 0 1,0 20,50 A30,30 0 1,0 80,50 Z' fill='url(%23g)' filter='url(%23b)' opacity='.65' fill-rule='evenodd'/%3E%3Cpath d='M94,50 L84.2,61.1 L88,77.6 L73.5,82.4 L63.9,92.8 L50,84 L36.4,91.8 L31.2,75.9 L12.8,77 L12.9,62.1 L7,50 L16.7,39.2 L12,22.4 L27.7,19.3 L36.4,8.2 L50,17 L64.2,6.3 L73.5,17.6 L84.8,24.7 L84.2,38.9 Z M80,50 A30,30 0 1,0 20,50 A30,30 0 1,0 80,50 Z' fill='url(%23g)' fill-rule='evenodd'/%3E%3Cg fill='%23fdf4ff'%3E%3Crect x='-3' y='-3' width='6' height='6' transform='translate(88,77.6) rotate(45)'/%3E%3Crect x='-3' y='-3' width='6' height='6' transform='translate(12.8,77) rotate(45)'/%3E%3Crect x='-3' y='-3' width='6' height='6' transform='translate(12,22.4) rotate(45)'/%3E%3Crect x='-3' y='-3' width='6' height='6' transform='translate(64.2,6.3) rotate(45)'/%3E%3C/g%3E%3C/svg%3E");
    animation: dcg-ring-radiant 2.4s ease-in-out infinite;
}

/* Standalone badges — each gets the "top rung" treatment since it IS the whole ladder */
.avatar-border--achv-one-track-mind {
    --glow: rgba(245,158,11,.6);
    box-shadow: 0 0 12px 2px var(--glow);
    animation: dcg-glow-pulse 2.2s ease-in-out infinite;
}
.avatar-border--achv-one-track-mind::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23f59e0b'/%3E%3Cstop offset='1' stop-color='%23451a03'/%3E%3C/linearGradient%3E%3Cfilter id='b'%3E%3CfeGaussianBlur stdDeviation='2.2'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M94,50 L84.2,61.1 L88,77.6 L73.5,82.4 L63.9,92.8 L50,84 L36.4,91.8 L31.2,75.9 L12.8,77 L12.9,62.1 L7,50 L16.7,39.2 L12,22.4 L27.7,19.3 L36.4,8.2 L50,17 L64.2,6.3 L73.5,17.6 L84.8,24.7 L84.2,38.9 Z M80,50 A30,30 0 1,0 20,50 A30,30 0 1,0 80,50 Z' fill='url(%23g)' filter='url(%23b)' opacity='.6' fill-rule='evenodd'/%3E%3Cpath d='M94,50 L84.2,61.1 L88,77.6 L73.5,82.4 L63.9,92.8 L50,84 L36.4,91.8 L31.2,75.9 L12.8,77 L12.9,62.1 L7,50 L16.7,39.2 L12,22.4 L27.7,19.3 L36.4,8.2 L50,17 L64.2,6.3 L73.5,17.6 L84.8,24.7 L84.2,38.9 Z M80,50 A30,30 0 1,0 20,50 A30,30 0 1,0 80,50 Z' fill='url(%23g)' fill-rule='evenodd'/%3E%3Cg fill='%23fde68a'%3E%3Crect x='-3' y='-3' width='6' height='6' transform='translate(88,77.6) rotate(45)'/%3E%3Crect x='-3' y='-3' width='6' height='6' transform='translate(12.8,77) rotate(45)'/%3E%3Crect x='-3' y='-3' width='6' height='6' transform='translate(12,22.4) rotate(45)'/%3E%3Crect x='-3' y='-3' width='6' height='6' transform='translate(64.2,6.3) rotate(45)'/%3E%3C/g%3E%3C/svg%3E");
    animation: dcg-ring-pulse 2.2s ease-in-out infinite;
}

.avatar-border--achv-prism-wanderer {
    --glow: rgba(244,114,182,.55);
    box-shadow: 0 0 14px 2px var(--glow);
    animation: dcg-glow-pulse 2s ease-in-out infinite;
}
.avatar-border--achv-prism-wanderer::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23f472b6'/%3E%3Cstop offset='.33' stop-color='%23fde047'/%3E%3Cstop offset='.66' stop-color='%2334d399'/%3E%3Cstop offset='1' stop-color='%2338bdf8'/%3E%3C/linearGradient%3E%3Cfilter id='b'%3E%3CfeGaussianBlur stdDeviation='2.4'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M94,50 L84.2,61.1 L88,77.6 L73.5,82.4 L63.9,92.8 L50,84 L36.4,91.8 L31.2,75.9 L12.8,77 L12.9,62.1 L7,50 L16.7,39.2 L12,22.4 L27.7,19.3 L36.4,8.2 L50,17 L64.2,6.3 L73.5,17.6 L84.8,24.7 L84.2,38.9 Z M80,50 A30,30 0 1,0 20,50 A30,30 0 1,0 80,50 Z' fill='url(%23g)' filter='url(%23b)' opacity='.65' fill-rule='evenodd'/%3E%3Cpath d='M94,50 L84.2,61.1 L88,77.6 L73.5,82.4 L63.9,92.8 L50,84 L36.4,91.8 L31.2,75.9 L12.8,77 L12.9,62.1 L7,50 L16.7,39.2 L12,22.4 L27.7,19.3 L36.4,8.2 L50,17 L64.2,6.3 L73.5,17.6 L84.8,24.7 L84.2,38.9 Z M80,50 A30,30 0 1,0 20,50 A30,30 0 1,0 80,50 Z' fill='url(%23g)' fill-rule='evenodd'/%3E%3Cg fill='%23ffffff'%3E%3Crect x='-3' y='-3' width='6' height='6' transform='translate(88,77.6) rotate(45)'/%3E%3Crect x='-3' y='-3' width='6' height='6' transform='translate(12.8,77) rotate(45)'/%3E%3Crect x='-3' y='-3' width='6' height='6' transform='translate(12,22.4) rotate(45)'/%3E%3Crect x='-3' y='-3' width='6' height='6' transform='translate(64.2,6.3) rotate(45)'/%3E%3C/g%3E%3C/svg%3E");
    animation: dcg-ring-radiant 2.4s ease-in-out infinite;
}

.avatar-border--achv-triple-crown {
    --glow: rgba(253,224,71,.6);
    box-shadow: 0 0 14px 2px var(--glow);
    animation: dcg-glow-pulse 1.8s ease-in-out infinite;
}
.avatar-border--achv-triple-crown::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%237c3aed'/%3E%3Cstop offset='1' stop-color='%23fde047'/%3E%3C/linearGradient%3E%3Cfilter id='b'%3E%3CfeGaussianBlur stdDeviation='2.4'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M94,50 L84.2,61.1 L88,77.6 L73.5,82.4 L63.9,92.8 L50,84 L36.4,91.8 L31.2,75.9 L12.8,77 L12.9,62.1 L7,50 L16.7,39.2 L12,22.4 L27.7,19.3 L36.4,8.2 L50,17 L64.2,6.3 L73.5,17.6 L84.8,24.7 L84.2,38.9 Z M80,50 A30,30 0 1,0 20,50 A30,30 0 1,0 80,50 Z' fill='url(%23g)' filter='url(%23b)' opacity='.65' fill-rule='evenodd'/%3E%3Cpath d='M94,50 L84.2,61.1 L88,77.6 L73.5,82.4 L63.9,92.8 L50,84 L36.4,91.8 L31.2,75.9 L12.8,77 L12.9,62.1 L7,50 L16.7,39.2 L12,22.4 L27.7,19.3 L36.4,8.2 L50,17 L64.2,6.3 L73.5,17.6 L84.8,24.7 L84.2,38.9 Z M80,50 A30,30 0 1,0 20,50 A30,30 0 1,0 80,50 Z' fill='url(%23g)' fill-rule='evenodd'/%3E%3Cg fill='%23fef9c3'%3E%3Crect x='-3' y='-3' width='6' height='6' transform='translate(88,77.6) rotate(45)'/%3E%3Crect x='-3' y='-3' width='6' height='6' transform='translate(12.8,77) rotate(45)'/%3E%3Crect x='-3' y='-3' width='6' height='6' transform='translate(12,22.4) rotate(45)'/%3E%3Crect x='-3' y='-3' width='6' height='6' transform='translate(64.2,6.3) rotate(45)'/%3E%3C/g%3E%3C/svg%3E");
    animation: dcg-ring-radiant 2.2s ease-in-out infinite;
}

/* Incredibly rare — legendary tier, the two most exclusive badges on the site */
.avatar-border--achv-flawless {
    --glow: rgba(255,255,255,.8);
    box-shadow: 0 0 18px 4px var(--glow);
    animation: dcg-glow-pulse 1s ease-in-out infinite;
}
.avatar-border--achv-flawless::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='1' stop-color='%23c7d2fe'/%3E%3C/linearGradient%3E%3Cfilter id='b'%3E%3CfeGaussianBlur stdDeviation='2.8'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M94,50 L84.2,61.1 L88,77.6 L73.5,82.4 L63.9,92.8 L50,84 L36.4,91.8 L31.2,75.9 L12.8,77 L12.9,62.1 L7,50 L16.7,39.2 L12,22.4 L27.7,19.3 L36.4,8.2 L50,17 L64.2,6.3 L73.5,17.6 L84.8,24.7 L84.2,38.9 Z M80,50 A30,30 0 1,0 20,50 A30,30 0 1,0 80,50 Z' fill='url(%23g)' filter='url(%23b)' opacity='.75' fill-rule='evenodd'/%3E%3Cpath d='M94,50 L84.2,61.1 L88,77.6 L73.5,82.4 L63.9,92.8 L50,84 L36.4,91.8 L31.2,75.9 L12.8,77 L12.9,62.1 L7,50 L16.7,39.2 L12,22.4 L27.7,19.3 L36.4,8.2 L50,17 L64.2,6.3 L73.5,17.6 L84.8,24.7 L84.2,38.9 Z M80,50 A30,30 0 1,0 20,50 A30,30 0 1,0 80,50 Z' fill='url(%23g)' fill-rule='evenodd'/%3E%3Cg fill='%23ffffff'%3E%3Crect x='-3.4' y='-3.4' width='6.8' height='6.8' transform='translate(88,77.6) rotate(45)'/%3E%3Crect x='-3.4' y='-3.4' width='6.8' height='6.8' transform='translate(12.8,77) rotate(45)'/%3E%3Crect x='-3.4' y='-3.4' width='6.8' height='6.8' transform='translate(12,22.4) rotate(45)'/%3E%3Crect x='-3.4' y='-3.4' width='6.8' height='6.8' transform='translate(64.2,6.3) rotate(45)'/%3E%3C/g%3E%3C/svg%3E");
    animation: dcg-ring-radiant 1s ease-in-out infinite;
}

.avatar-border--achv-living-legend {
    --glow: rgba(253,224,71,.8);
    box-shadow: 0 0 20px 5px var(--glow);
    animation: dcg-glow-pulse .9s ease-in-out infinite;
}
.avatar-border--achv-living-legend::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%230a0a0a'/%3E%3Cstop offset='.5' stop-color='%23fde047'/%3E%3Cstop offset='1' stop-color='%230a0a0a'/%3E%3C/linearGradient%3E%3Cfilter id='b'%3E%3CfeGaussianBlur stdDeviation='2.8'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M94,50 L84.2,61.1 L88,77.6 L73.5,82.4 L63.9,92.8 L50,84 L36.4,91.8 L31.2,75.9 L12.8,77 L12.9,62.1 L7,50 L16.7,39.2 L12,22.4 L27.7,19.3 L36.4,8.2 L50,17 L64.2,6.3 L73.5,17.6 L84.8,24.7 L84.2,38.9 Z M80,50 A30,30 0 1,0 20,50 A30,30 0 1,0 80,50 Z' fill='url(%23g)' filter='url(%23b)' opacity='.75' fill-rule='evenodd'/%3E%3Cpath d='M94,50 L84.2,61.1 L88,77.6 L73.5,82.4 L63.9,92.8 L50,84 L36.4,91.8 L31.2,75.9 L12.8,77 L12.9,62.1 L7,50 L16.7,39.2 L12,22.4 L27.7,19.3 L36.4,8.2 L50,17 L64.2,6.3 L73.5,17.6 L84.8,24.7 L84.2,38.9 Z M80,50 A30,30 0 1,0 20,50 A30,30 0 1,0 80,50 Z' fill='url(%23g)' fill-rule='evenodd'/%3E%3Cg fill='%23fde047'%3E%3Crect x='-3.6' y='-3.6' width='7.2' height='7.2' transform='translate(88,77.6) rotate(45)'/%3E%3Crect x='-3.6' y='-3.6' width='7.2' height='7.2' transform='translate(12.8,77) rotate(45)'/%3E%3Crect x='-3.6' y='-3.6' width='7.2' height='7.2' transform='translate(12,22.4) rotate(45)'/%3E%3Crect x='-3.6' y='-3.6' width='7.2' height='7.2' transform='translate(64.2,6.3) rotate(45)'/%3E%3C/g%3E%3C/svg%3E");
    animation: dcg-ring-radiant .9s ease-in-out infinite;
}

/* More standalone badges — longevity, consistency, and raw volume, half animated / half static */
.avatar-border--achv-long-haul {
    --glow: rgba(251,146,60,.55);
    box-shadow: 0 0 12px 2px var(--glow);
    animation: dcg-glow-pulse 2.4s ease-in-out infinite;
}
.avatar-border--achv-long-haul::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fb923c'/%3E%3Cstop offset='1' stop-color='%23b91c1c'/%3E%3C/linearGradient%3E%3Cfilter id='b'%3E%3CfeGaussianBlur stdDeviation='2.2'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M94,50 L84.2,61.1 L88,77.6 L73.5,82.4 L63.9,92.8 L50,84 L36.4,91.8 L31.2,75.9 L12.8,77 L12.9,62.1 L7,50 L16.7,39.2 L12,22.4 L27.7,19.3 L36.4,8.2 L50,17 L64.2,6.3 L73.5,17.6 L84.8,24.7 L84.2,38.9 Z M80,50 A30,30 0 1,0 20,50 A30,30 0 1,0 80,50 Z' fill='url(%23g)' filter='url(%23b)' opacity='.6' fill-rule='evenodd'/%3E%3Cpath d='M94,50 L84.2,61.1 L88,77.6 L73.5,82.4 L63.9,92.8 L50,84 L36.4,91.8 L31.2,75.9 L12.8,77 L12.9,62.1 L7,50 L16.7,39.2 L12,22.4 L27.7,19.3 L36.4,8.2 L50,17 L64.2,6.3 L73.5,17.6 L84.8,24.7 L84.2,38.9 Z M80,50 A30,30 0 1,0 20,50 A30,30 0 1,0 80,50 Z' fill='url(%23g)' fill-rule='evenodd'/%3E%3Cg fill='%23fff7ed'%3E%3Crect x='-3' y='-3' width='6' height='6' transform='translate(88,77.6) rotate(45)'/%3E%3Crect x='-3' y='-3' width='6' height='6' transform='translate(12.8,77) rotate(45)'/%3E%3Crect x='-3' y='-3' width='6' height='6' transform='translate(12,22.4) rotate(45)'/%3E%3Crect x='-3' y='-3' width='6' height='6' transform='translate(64.2,6.3) rotate(45)'/%3E%3C/g%3E%3C/svg%3E");
    animation: dcg-ring-pulse 2.4s ease-in-out infinite;
}

.avatar-border--achv-podium-finish {
    --glow: rgba(203,213,225,.55);
    box-shadow: 0 0 12px 2px var(--glow);
    animation: dcg-glow-pulse 2.2s ease-in-out infinite;
}
.avatar-border--achv-podium-finish::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23f1f5f9'/%3E%3Cstop offset='.5' stop-color='%23cbd5e1'/%3E%3Cstop offset='1' stop-color='%23cd7f32'/%3E%3C/linearGradient%3E%3Cfilter id='b'%3E%3CfeGaussianBlur stdDeviation='2.2'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M94,50 L84.2,61.1 L88,77.6 L73.5,82.4 L63.9,92.8 L50,84 L36.4,91.8 L31.2,75.9 L12.8,77 L12.9,62.1 L7,50 L16.7,39.2 L12,22.4 L27.7,19.3 L36.4,8.2 L50,17 L64.2,6.3 L73.5,17.6 L84.8,24.7 L84.2,38.9 Z M80,50 A30,30 0 1,0 20,50 A30,30 0 1,0 80,50 Z' fill='url(%23g)' filter='url(%23b)' opacity='.6' fill-rule='evenodd'/%3E%3Cpath d='M94,50 L84.2,61.1 L88,77.6 L73.5,82.4 L63.9,92.8 L50,84 L36.4,91.8 L31.2,75.9 L12.8,77 L12.9,62.1 L7,50 L16.7,39.2 L12,22.4 L27.7,19.3 L36.4,8.2 L50,17 L64.2,6.3 L73.5,17.6 L84.8,24.7 L84.2,38.9 Z M80,50 A30,30 0 1,0 20,50 A30,30 0 1,0 80,50 Z' fill='url(%23g)' fill-rule='evenodd'/%3E%3Cg fill='%23ffffff'%3E%3Crect x='-3' y='-3' width='6' height='6' transform='translate(88,77.6) rotate(45)'/%3E%3Crect x='-3' y='-3' width='6' height='6' transform='translate(12.8,77) rotate(45)'/%3E%3Crect x='-3' y='-3' width='6' height='6' transform='translate(12,22.4) rotate(45)'/%3E%3Crect x='-3' y='-3' width='6' height='6' transform='translate(64.2,6.3) rotate(45)'/%3E%3C/g%3E%3C/svg%3E");
    animation: dcg-ring-pulse 2.2s ease-in-out infinite;
}

.avatar-border--achv-forge-steel {
    --glow: rgba(100,116,139,.55);
    box-shadow: 0 0 12px 2px var(--glow);
    animation: dcg-glow-pulse 2.4s ease-in-out infinite;
}
.avatar-border--achv-forge-steel::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%2394a3b8'/%3E%3Cstop offset='1' stop-color='%231e293b'/%3E%3C/linearGradient%3E%3Cfilter id='b'%3E%3CfeGaussianBlur stdDeviation='2.2'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M94,50 L84.2,61.1 L88,77.6 L73.5,82.4 L63.9,92.8 L50,84 L36.4,91.8 L31.2,75.9 L12.8,77 L12.9,62.1 L7,50 L16.7,39.2 L12,22.4 L27.7,19.3 L36.4,8.2 L50,17 L64.2,6.3 L73.5,17.6 L84.8,24.7 L84.2,38.9 Z M80,50 A30,30 0 1,0 20,50 A30,30 0 1,0 80,50 Z' fill='url(%23g)' filter='url(%23b)' opacity='.6' fill-rule='evenodd'/%3E%3Cpath d='M94,50 L84.2,61.1 L88,77.6 L73.5,82.4 L63.9,92.8 L50,84 L36.4,91.8 L31.2,75.9 L12.8,77 L12.9,62.1 L7,50 L16.7,39.2 L12,22.4 L27.7,19.3 L36.4,8.2 L50,17 L64.2,6.3 L73.5,17.6 L84.8,24.7 L84.2,38.9 Z M80,50 A30,30 0 1,0 20,50 A30,30 0 1,0 80,50 Z' fill='url(%23g)' fill-rule='evenodd'/%3E%3Cg fill='%23e2e8f0'%3E%3Crect x='-3' y='-3' width='6' height='6' transform='translate(88,77.6) rotate(45)'/%3E%3Crect x='-3' y='-3' width='6' height='6' transform='translate(12.8,77) rotate(45)'/%3E%3Crect x='-3' y='-3' width='6' height='6' transform='translate(12,22.4) rotate(45)'/%3E%3Crect x='-3' y='-3' width='6' height='6' transform='translate(64.2,6.3) rotate(45)'/%3E%3C/g%3E%3C/svg%3E");
    animation: dcg-ring-pulse 2.4s ease-in-out infinite;
}

.avatar-border--achv-frost-sweep {
    --glow: rgba(103,232,249,.5);
    box-shadow: 0 0 8px 1px var(--glow);
}
.avatar-border--achv-frost-sweep::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M94,50 L84.2,61.1 L88,77.6 L73.5,82.4 L63.9,92.8 L50,84 L36.4,91.8 L31.2,75.9 L12.8,77 L12.9,62.1 L7,50 L16.7,39.2 L12,22.4 L27.7,19.3 L36.4,8.2 L50,17 L64.2,6.3 L73.5,17.6 L84.8,24.7 L84.2,38.9 Z M80,50 A30,30 0 1,0 20,50 A30,30 0 1,0 80,50 Z' fill='%2367e8f9' fill-rule='evenodd'/%3E%3Cg fill='%23ecfeff'%3E%3Crect x='-2.5' y='-2.5' width='5' height='5' transform='translate(88,77.6) rotate(45)'/%3E%3Crect x='-2.5' y='-2.5' width='5' height='5' transform='translate(12.8,77) rotate(45)'/%3E%3Crect x='-2.5' y='-2.5' width='5' height='5' transform='translate(12,22.4) rotate(45)'/%3E%3Crect x='-2.5' y='-2.5' width='5' height='5' transform='translate(64.2,6.3) rotate(45)'/%3E%3C/g%3E%3C/svg%3E");
}

.avatar-border--achv-bastion {
    --glow: rgba(87,83,78,.5);
    box-shadow: 0 0 8px 1px var(--glow);
}
.avatar-border--achv-bastion::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M94,50 L84.2,61.1 L88,77.6 L73.5,82.4 L63.9,92.8 L50,84 L36.4,91.8 L31.2,75.9 L12.8,77 L12.9,62.1 L7,50 L16.7,39.2 L12,22.4 L27.7,19.3 L36.4,8.2 L50,17 L64.2,6.3 L73.5,17.6 L84.8,24.7 L84.2,38.9 Z M80,50 A30,30 0 1,0 20,50 A30,30 0 1,0 80,50 Z' fill='%2357534e' fill-rule='evenodd'/%3E%3Cg fill='%23d6d3d1'%3E%3Crect x='-2.5' y='-2.5' width='5' height='5' transform='translate(88,77.6) rotate(45)'/%3E%3Crect x='-2.5' y='-2.5' width='5' height='5' transform='translate(12.8,77) rotate(45)'/%3E%3Crect x='-2.5' y='-2.5' width='5' height='5' transform='translate(12,22.4) rotate(45)'/%3E%3Crect x='-2.5' y='-2.5' width='5' height='5' transform='translate(64.2,6.3) rotate(45)'/%3E%3C/g%3E%3C/svg%3E");
}

.avatar-border--achv-overdrive {
    --glow: rgba(239,68,68,.6);
    box-shadow: 0 0 14px 2px var(--glow);
    animation: dcg-glow-pulse 1.6s ease-in-out infinite;
}
.avatar-border--achv-overdrive::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fca5a5'/%3E%3Cstop offset='1' stop-color='%23991b1b'/%3E%3C/linearGradient%3E%3Cfilter id='b'%3E%3CfeGaussianBlur stdDeviation='2.4'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M94,50 L84.2,61.1 L88,77.6 L73.5,82.4 L63.9,92.8 L50,84 L36.4,91.8 L31.2,75.9 L12.8,77 L12.9,62.1 L7,50 L16.7,39.2 L12,22.4 L27.7,19.3 L36.4,8.2 L50,17 L64.2,6.3 L73.5,17.6 L84.8,24.7 L84.2,38.9 Z M80,50 A30,30 0 1,0 20,50 A30,30 0 1,0 80,50 Z' fill='url(%23g)' filter='url(%23b)' opacity='.65' fill-rule='evenodd'/%3E%3Cpath d='M94,50 L84.2,61.1 L88,77.6 L73.5,82.4 L63.9,92.8 L50,84 L36.4,91.8 L31.2,75.9 L12.8,77 L12.9,62.1 L7,50 L16.7,39.2 L12,22.4 L27.7,19.3 L36.4,8.2 L50,17 L64.2,6.3 L73.5,17.6 L84.8,24.7 L84.2,38.9 Z M80,50 A30,30 0 1,0 20,50 A30,30 0 1,0 80,50 Z' fill='url(%23g)' fill-rule='evenodd'/%3E%3Cg fill='%23fef2f2'%3E%3Crect x='-3' y='-3' width='6' height='6' transform='translate(88,77.6) rotate(45)'/%3E%3Crect x='-3' y='-3' width='6' height='6' transform='translate(12.8,77) rotate(45)'/%3E%3Crect x='-3' y='-3' width='6' height='6' transform='translate(12,22.4) rotate(45)'/%3E%3Crect x='-3' y='-3' width='6' height='6' transform='translate(64.2,6.3) rotate(45)'/%3E%3C/g%3E%3C/svg%3E");
    animation: dcg-ring-radiant 1.6s ease-in-out infinite;
}

.avatar-border--achv-millstone {
    --glow: rgba(180,83,9,.55);
    box-shadow: 0 0 12px 2px var(--glow);
    animation: dcg-glow-pulse 2.6s ease-in-out infinite;
}
.avatar-border--achv-millstone::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23b45309'/%3E%3Cstop offset='1' stop-color='%23422006'/%3E%3C/linearGradient%3E%3Cfilter id='b'%3E%3CfeGaussianBlur stdDeviation='2.2'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M94,50 L84.2,61.1 L88,77.6 L73.5,82.4 L63.9,92.8 L50,84 L36.4,91.8 L31.2,75.9 L12.8,77 L12.9,62.1 L7,50 L16.7,39.2 L12,22.4 L27.7,19.3 L36.4,8.2 L50,17 L64.2,6.3 L73.5,17.6 L84.8,24.7 L84.2,38.9 Z M80,50 A30,30 0 1,0 20,50 A30,30 0 1,0 80,50 Z' fill='url(%23g)' filter='url(%23b)' opacity='.6' fill-rule='evenodd'/%3E%3Cpath d='M94,50 L84.2,61.1 L88,77.6 L73.5,82.4 L63.9,92.8 L50,84 L36.4,91.8 L31.2,75.9 L12.8,77 L12.9,62.1 L7,50 L16.7,39.2 L12,22.4 L27.7,19.3 L36.4,8.2 L50,17 L64.2,6.3 L73.5,17.6 L84.8,24.7 L84.2,38.9 Z M80,50 A30,30 0 1,0 20,50 A30,30 0 1,0 80,50 Z' fill='url(%23g)' fill-rule='evenodd'/%3E%3Cg fill='%23fef3c7'%3E%3Crect x='-3' y='-3' width='6' height='6' transform='translate(88,77.6) rotate(45)'/%3E%3Crect x='-3' y='-3' width='6' height='6' transform='translate(12.8,77) rotate(45)'/%3E%3Crect x='-3' y='-3' width='6' height='6' transform='translate(12,22.4) rotate(45)'/%3E%3Crect x='-3' y='-3' width='6' height='6' transform='translate(64.2,6.3) rotate(45)'/%3E%3C/g%3E%3C/svg%3E");
    animation: dcg-ring-pulse 2.6s ease-in-out infinite;
}

.avatar-border--achv-sunset-circuit {
    --glow: rgba(251,113,133,.5);
    box-shadow: 0 0 8px 1px var(--glow);
}
.avatar-border--achv-sunset-circuit::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M94,50 L84.2,61.1 L88,77.6 L73.5,82.4 L63.9,92.8 L50,84 L36.4,91.8 L31.2,75.9 L12.8,77 L12.9,62.1 L7,50 L16.7,39.2 L12,22.4 L27.7,19.3 L36.4,8.2 L50,17 L64.2,6.3 L73.5,17.6 L84.8,24.7 L84.2,38.9 Z M80,50 A30,30 0 1,0 20,50 A30,30 0 1,0 80,50 Z' fill='%23fb7185' fill-rule='evenodd'/%3E%3Cg fill='%23fff1f2'%3E%3Crect x='-2.5' y='-2.5' width='5' height='5' transform='translate(88,77.6) rotate(45)'/%3E%3Crect x='-2.5' y='-2.5' width='5' height='5' transform='translate(12.8,77) rotate(45)'/%3E%3Crect x='-2.5' y='-2.5' width='5' height='5' transform='translate(12,22.4) rotate(45)'/%3E%3Crect x='-2.5' y='-2.5' width='5' height='5' transform='translate(64.2,6.3) rotate(45)'/%3E%3C/g%3E%3C/svg%3E");
}

.avatar-border--achv-hot-streak {
    --glow: rgba(217,70,239,.6);
    box-shadow: 0 0 14px 2px var(--glow);
    animation: dcg-glow-pulse 1.4s ease-in-out infinite;
}
.avatar-border--achv-hot-streak::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23f0abfc'/%3E%3Cstop offset='1' stop-color='%236b21a8'/%3E%3C/linearGradient%3E%3Cfilter id='b'%3E%3CfeGaussianBlur stdDeviation='2.4'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M94,50 L84.2,61.1 L88,77.6 L73.5,82.4 L63.9,92.8 L50,84 L36.4,91.8 L31.2,75.9 L12.8,77 L12.9,62.1 L7,50 L16.7,39.2 L12,22.4 L27.7,19.3 L36.4,8.2 L50,17 L64.2,6.3 L73.5,17.6 L84.8,24.7 L84.2,38.9 Z M80,50 A30,30 0 1,0 20,50 A30,30 0 1,0 80,50 Z' fill='url(%23g)' filter='url(%23b)' opacity='.65' fill-rule='evenodd'/%3E%3Cpath d='M94,50 L84.2,61.1 L88,77.6 L73.5,82.4 L63.9,92.8 L50,84 L36.4,91.8 L31.2,75.9 L12.8,77 L12.9,62.1 L7,50 L16.7,39.2 L12,22.4 L27.7,19.3 L36.4,8.2 L50,17 L64.2,6.3 L73.5,17.6 L84.8,24.7 L84.2,38.9 Z M80,50 A30,30 0 1,0 20,50 A30,30 0 1,0 80,50 Z' fill='url(%23g)' fill-rule='evenodd'/%3E%3Cg fill='%23fdf4ff'%3E%3Crect x='-3' y='-3' width='6' height='6' transform='translate(88,77.6) rotate(45)'/%3E%3Crect x='-3' y='-3' width='6' height='6' transform='translate(12.8,77) rotate(45)'/%3E%3Crect x='-3' y='-3' width='6' height='6' transform='translate(12,22.4) rotate(45)'/%3E%3Crect x='-3' y='-3' width='6' height='6' transform='translate(64.2,6.3) rotate(45)'/%3E%3C/g%3E%3C/svg%3E");
    animation: dcg-ring-radiant 1.4s ease-in-out infinite;
}

.avatar-border--achv-twin-bill {
    --glow: rgba(45,212,191,.5);
    box-shadow: 0 0 8px 1px var(--glow);
}
.avatar-border--achv-twin-bill::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M94,50 L84.2,61.1 L88,77.6 L73.5,82.4 L63.9,92.8 L50,84 L36.4,91.8 L31.2,75.9 L12.8,77 L12.9,62.1 L7,50 L16.7,39.2 L12,22.4 L27.7,19.3 L36.4,8.2 L50,17 L64.2,6.3 L73.5,17.6 L84.8,24.7 L84.2,38.9 Z M80,50 A30,30 0 1,0 20,50 A30,30 0 1,0 80,50 Z' fill='%232dd4bf' fill-rule='evenodd'/%3E%3Cg fill='%23f0fdfa'%3E%3Crect x='-2.5' y='-2.5' width='5' height='5' transform='translate(88,77.6) rotate(45)'/%3E%3Crect x='-2.5' y='-2.5' width='5' height='5' transform='translate(12.8,77) rotate(45)'/%3E%3Crect x='-2.5' y='-2.5' width='5' height='5' transform='translate(12,22.4) rotate(45)'/%3E%3Crect x='-2.5' y='-2.5' width='5' height='5' transform='translate(64.2,6.3) rotate(45)'/%3E%3C/g%3E%3C/svg%3E");
}

.avatar-border--achv-fresh-start {
    --glow: rgba(52,211,153,.5);
    box-shadow: 0 0 8px 1px var(--glow);
}
.avatar-border--achv-fresh-start::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M94,50 L84.2,61.1 L88,77.6 L73.5,82.4 L63.9,92.8 L50,84 L36.4,91.8 L31.2,75.9 L12.8,77 L12.9,62.1 L7,50 L16.7,39.2 L12,22.4 L27.7,19.3 L36.4,8.2 L50,17 L64.2,6.3 L73.5,17.6 L84.8,24.7 L84.2,38.9 Z M80,50 A30,30 0 1,0 20,50 A30,30 0 1,0 80,50 Z' fill='%2310b981' fill-rule='evenodd'/%3E%3Cg fill='%23d1fae5'%3E%3Crect x='-2.5' y='-2.5' width='5' height='5' transform='translate(88,77.6) rotate(45)'/%3E%3Crect x='-2.5' y='-2.5' width='5' height='5' transform='translate(12.8,77) rotate(45)'/%3E%3Crect x='-2.5' y='-2.5' width='5' height='5' transform='translate(12,22.4) rotate(45)'/%3E%3Crect x='-2.5' y='-2.5' width='5' height='5' transform='translate(64.2,6.3) rotate(45)'/%3E%3C/g%3E%3C/svg%3E");
}

.avatar-border--achv-runner-up {
    --glow: rgba(148,163,184,.5);
    box-shadow: 0 0 8px 1px var(--glow);
}
.avatar-border--achv-runner-up::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M94,50 L84.2,61.1 L88,77.6 L73.5,82.4 L63.9,92.8 L50,84 L36.4,91.8 L31.2,75.9 L12.8,77 L12.9,62.1 L7,50 L16.7,39.2 L12,22.4 L27.7,19.3 L36.4,8.2 L50,17 L64.2,6.3 L73.5,17.6 L84.8,24.7 L84.2,38.9 Z M80,50 A30,30 0 1,0 20,50 A30,30 0 1,0 80,50 Z' fill='%2394a3b8' fill-rule='evenodd'/%3E%3Cg fill='%23e2e8f0'%3E%3Crect x='-2.5' y='-2.5' width='5' height='5' transform='translate(88,77.6) rotate(45)'/%3E%3Crect x='-2.5' y='-2.5' width='5' height='5' transform='translate(12.8,77) rotate(45)'/%3E%3Crect x='-2.5' y='-2.5' width='5' height='5' transform='translate(12,22.4) rotate(45)'/%3E%3Crect x='-2.5' y='-2.5' width='5' height='5' transform='translate(64.2,6.3) rotate(45)'/%3E%3C/g%3E%3C/svg%3E");
}

/* Ten unique one-off feats */
.avatar-border--achv-sunrise {
    --glow: rgba(168,85,247,.55);
    box-shadow: 0 0 14px 2px var(--glow);
    animation: dcg-glow-pulse 2s ease-in-out infinite;
}
.avatar-border--achv-sunrise::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23c084fc'/%3E%3Cstop offset='1' stop-color='%23fde047'/%3E%3C/linearGradient%3E%3Cfilter id='b'%3E%3CfeGaussianBlur stdDeviation='2.4'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M94,50 L84.2,61.1 L88,77.6 L73.5,82.4 L63.9,92.8 L50,84 L36.4,91.8 L31.2,75.9 L12.8,77 L12.9,62.1 L7,50 L16.7,39.2 L12,22.4 L27.7,19.3 L36.4,8.2 L50,17 L64.2,6.3 L73.5,17.6 L84.8,24.7 L84.2,38.9 Z M80,50 A30,30 0 1,0 20,50 A30,30 0 1,0 80,50 Z' fill='url(%23g)' filter='url(%23b)' opacity='.65' fill-rule='evenodd'/%3E%3Cpath d='M94,50 L84.2,61.1 L88,77.6 L73.5,82.4 L63.9,92.8 L50,84 L36.4,91.8 L31.2,75.9 L12.8,77 L12.9,62.1 L7,50 L16.7,39.2 L12,22.4 L27.7,19.3 L36.4,8.2 L50,17 L64.2,6.3 L73.5,17.6 L84.8,24.7 L84.2,38.9 Z M80,50 A30,30 0 1,0 20,50 A30,30 0 1,0 80,50 Z' fill='url(%23g)' fill-rule='evenodd'/%3E%3Cg fill='%23fefce8'%3E%3Crect x='-3' y='-3' width='6' height='6' transform='translate(88,77.6) rotate(45)'/%3E%3Crect x='-3' y='-3' width='6' height='6' transform='translate(12.8,77) rotate(45)'/%3E%3Crect x='-3' y='-3' width='6' height='6' transform='translate(12,22.4) rotate(45)'/%3E%3Crect x='-3' y='-3' width='6' height='6' transform='translate(64.2,6.3) rotate(45)'/%3E%3C/g%3E%3C/svg%3E");
    animation: dcg-ring-radiant 2s ease-in-out infinite;
}

.avatar-border--achv-trifecta {
    --glow: rgba(74,222,128,.55);
    box-shadow: 0 0 12px 2px var(--glow);
    animation: dcg-glow-pulse 2.2s ease-in-out infinite;
}
.avatar-border--achv-trifecta::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23bbf7d0'/%3E%3Cstop offset='1' stop-color='%2315803d'/%3E%3C/linearGradient%3E%3Cfilter id='b'%3E%3CfeGaussianBlur stdDeviation='2.2'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M94,50 L84.2,61.1 L88,77.6 L73.5,82.4 L63.9,92.8 L50,84 L36.4,91.8 L31.2,75.9 L12.8,77 L12.9,62.1 L7,50 L16.7,39.2 L12,22.4 L27.7,19.3 L36.4,8.2 L50,17 L64.2,6.3 L73.5,17.6 L84.8,24.7 L84.2,38.9 Z M80,50 A30,30 0 1,0 20,50 A30,30 0 1,0 80,50 Z' fill='url(%23g)' filter='url(%23b)' opacity='.6' fill-rule='evenodd'/%3E%3Cpath d='M94,50 L84.2,61.1 L88,77.6 L73.5,82.4 L63.9,92.8 L50,84 L36.4,91.8 L31.2,75.9 L12.8,77 L12.9,62.1 L7,50 L16.7,39.2 L12,22.4 L27.7,19.3 L36.4,8.2 L50,17 L64.2,6.3 L73.5,17.6 L84.8,24.7 L84.2,38.9 Z M80,50 A30,30 0 1,0 20,50 A30,30 0 1,0 80,50 Z' fill='url(%23g)' fill-rule='evenodd'/%3E%3Cg fill='%23f0fdf4'%3E%3Crect x='-3' y='-3' width='6' height='6' transform='translate(88,77.6) rotate(45)'/%3E%3Crect x='-3' y='-3' width='6' height='6' transform='translate(12.8,77) rotate(45)'/%3E%3Crect x='-3' y='-3' width='6' height='6' transform='translate(12,22.4) rotate(45)'/%3E%3Crect x='-3' y='-3' width='6' height='6' transform='translate(64.2,6.3) rotate(45)'/%3E%3C/g%3E%3C/svg%3E");
    animation: dcg-ring-pulse 2.2s ease-in-out infinite;
}

.avatar-border--achv-clockwork {
    --glow: rgba(167,139,250,.5);
    box-shadow: 0 0 8px 1px var(--glow);
}
.avatar-border--achv-clockwork::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M94,50 L84.2,61.1 L88,77.6 L73.5,82.4 L63.9,92.8 L50,84 L36.4,91.8 L31.2,75.9 L12.8,77 L12.9,62.1 L7,50 L16.7,39.2 L12,22.4 L27.7,19.3 L36.4,8.2 L50,17 L64.2,6.3 L73.5,17.6 L84.8,24.7 L84.2,38.9 Z M80,50 A30,30 0 1,0 20,50 A30,30 0 1,0 80,50 Z' fill='%23a78bfa' fill-rule='evenodd'/%3E%3Cg fill='%23ede9fe'%3E%3Crect x='-2.5' y='-2.5' width='5' height='5' transform='translate(88,77.6) rotate(45)'/%3E%3Crect x='-2.5' y='-2.5' width='5' height='5' transform='translate(12.8,77) rotate(45)'/%3E%3Crect x='-2.5' y='-2.5' width='5' height='5' transform='translate(12,22.4) rotate(45)'/%3E%3Crect x='-2.5' y='-2.5' width='5' height='5' transform='translate(64.2,6.3) rotate(45)'/%3E%3C/g%3E%3C/svg%3E");
}

.avatar-border--achv-silk-touch {
    --glow: rgba(240,171,252,.6);
    box-shadow: 0 0 16px 3px var(--glow);
    animation: dcg-glow-pulse 1.3s ease-in-out infinite;
}
.avatar-border--achv-silk-touch::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%231e1b4b'/%3E%3Cstop offset='1' stop-color='%23f0abfc'/%3E%3C/linearGradient%3E%3Cfilter id='b'%3E%3CfeGaussianBlur stdDeviation='2.6'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M94,50 L84.2,61.1 L88,77.6 L73.5,82.4 L63.9,92.8 L50,84 L36.4,91.8 L31.2,75.9 L12.8,77 L12.9,62.1 L7,50 L16.7,39.2 L12,22.4 L27.7,19.3 L36.4,8.2 L50,17 L64.2,6.3 L73.5,17.6 L84.8,24.7 L84.2,38.9 Z M80,50 A30,30 0 1,0 20,50 A30,30 0 1,0 80,50 Z' fill='url(%23g)' filter='url(%23b)' opacity='.7' fill-rule='evenodd'/%3E%3Cpath d='M94,50 L84.2,61.1 L88,77.6 L73.5,82.4 L63.9,92.8 L50,84 L36.4,91.8 L31.2,75.9 L12.8,77 L12.9,62.1 L7,50 L16.7,39.2 L12,22.4 L27.7,19.3 L36.4,8.2 L50,17 L64.2,6.3 L73.5,17.6 L84.8,24.7 L84.2,38.9 Z M80,50 A30,30 0 1,0 20,50 A30,30 0 1,0 80,50 Z' fill='url(%23g)' fill-rule='evenodd'/%3E%3Cg fill='%23fdf4ff'%3E%3Crect x='-3.2' y='-3.2' width='6.4' height='6.4' transform='translate(88,77.6) rotate(45)'/%3E%3Crect x='-3.2' y='-3.2' width='6.4' height='6.4' transform='translate(12.8,77) rotate(45)'/%3E%3Crect x='-3.2' y='-3.2' width='6.4' height='6.4' transform='translate(12,22.4) rotate(45)'/%3E%3Crect x='-3.2' y='-3.2' width='6.4' height='6.4' transform='translate(64.2,6.3) rotate(45)'/%3E%3C/g%3E%3C/svg%3E");
    animation: dcg-ring-radiant 1.3s ease-in-out infinite;
}

.avatar-border--achv-steadfast {
    --glow: rgba(250,204,21,.5);
    box-shadow: 0 0 8px 1px var(--glow);
}
.avatar-border--achv-steadfast::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M94,50 L84.2,61.1 L88,77.6 L73.5,82.4 L63.9,92.8 L50,84 L36.4,91.8 L31.2,75.9 L12.8,77 L12.9,62.1 L7,50 L16.7,39.2 L12,22.4 L27.7,19.3 L36.4,8.2 L50,17 L64.2,6.3 L73.5,17.6 L84.8,24.7 L84.2,38.9 Z M80,50 A30,30 0 1,0 20,50 A30,30 0 1,0 80,50 Z' fill='%23facc15' fill-rule='evenodd'/%3E%3Cg fill='%23fef9c3'%3E%3Crect x='-2.5' y='-2.5' width='5' height='5' transform='translate(88,77.6) rotate(45)'/%3E%3Crect x='-2.5' y='-2.5' width='5' height='5' transform='translate(12.8,77) rotate(45)'/%3E%3Crect x='-2.5' y='-2.5' width='5' height='5' transform='translate(12,22.4) rotate(45)'/%3E%3Crect x='-2.5' y='-2.5' width='5' height='5' transform='translate(64.2,6.3) rotate(45)'/%3E%3C/g%3E%3C/svg%3E");
}

.avatar-border--achv-full-circle {
    --glow: rgba(234,179,8,.5);
    box-shadow: 0 0 8px 1px var(--glow);
}
.avatar-border--achv-full-circle::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M94,50 L84.2,61.1 L88,77.6 L73.5,82.4 L63.9,92.8 L50,84 L36.4,91.8 L31.2,75.9 L12.8,77 L12.9,62.1 L7,50 L16.7,39.2 L12,22.4 L27.7,19.3 L36.4,8.2 L50,17 L64.2,6.3 L73.5,17.6 L84.8,24.7 L84.2,38.9 Z M80,50 A30,30 0 1,0 20,50 A30,30 0 1,0 80,50 Z' fill='%23eab308' fill-rule='evenodd'/%3E%3Cg fill='%23fef3c7'%3E%3Crect x='-2.5' y='-2.5' width='5' height='5' transform='translate(88,77.6) rotate(45)'/%3E%3Crect x='-2.5' y='-2.5' width='5' height='5' transform='translate(12.8,77) rotate(45)'/%3E%3Crect x='-2.5' y='-2.5' width='5' height='5' transform='translate(12,22.4) rotate(45)'/%3E%3Crect x='-2.5' y='-2.5' width='5' height='5' transform='translate(64.2,6.3) rotate(45)'/%3E%3C/g%3E%3C/svg%3E");
}

.avatar-border--achv-timeworn {
    --glow: rgba(100,116,139,.5);
    box-shadow: 0 0 8px 1px var(--glow);
}
.avatar-border--achv-timeworn::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M94,50 L84.2,61.1 L88,77.6 L73.5,82.4 L63.9,92.8 L50,84 L36.4,91.8 L31.2,75.9 L12.8,77 L12.9,62.1 L7,50 L16.7,39.2 L12,22.4 L27.7,19.3 L36.4,8.2 L50,17 L64.2,6.3 L73.5,17.6 L84.8,24.7 L84.2,38.9 Z M80,50 A30,30 0 1,0 20,50 A30,30 0 1,0 80,50 Z' fill='%2364748b' fill-rule='evenodd'/%3E%3Cg fill='%23cbd5e1'%3E%3Crect x='-2.5' y='-2.5' width='5' height='5' transform='translate(88,77.6) rotate(45)'/%3E%3Crect x='-2.5' y='-2.5' width='5' height='5' transform='translate(12.8,77) rotate(45)'/%3E%3Crect x='-2.5' y='-2.5' width='5' height='5' transform='translate(12,22.4) rotate(45)'/%3E%3Crect x='-2.5' y='-2.5' width='5' height='5' transform='translate(64.2,6.3) rotate(45)'/%3E%3C/g%3E%3C/svg%3E");
}

.avatar-border--achv-quicksilver {
    --glow: rgba(148,163,184,.55);
    box-shadow: 0 0 12px 2px var(--glow);
    animation: dcg-glow-pulse 1.7s ease-in-out infinite;
}
.avatar-border--achv-quicksilver::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23e2e8f0'/%3E%3Cstop offset='1' stop-color='%2322c55e'/%3E%3C/linearGradient%3E%3Cfilter id='b'%3E%3CfeGaussianBlur stdDeviation='2.2'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M94,50 L84.2,61.1 L88,77.6 L73.5,82.4 L63.9,92.8 L50,84 L36.4,91.8 L31.2,75.9 L12.8,77 L12.9,62.1 L7,50 L16.7,39.2 L12,22.4 L27.7,19.3 L36.4,8.2 L50,17 L64.2,6.3 L73.5,17.6 L84.8,24.7 L84.2,38.9 Z M80,50 A30,30 0 1,0 20,50 A30,30 0 1,0 80,50 Z' fill='url(%23g)' filter='url(%23b)' opacity='.6' fill-rule='evenodd'/%3E%3Cpath d='M94,50 L84.2,61.1 L88,77.6 L73.5,82.4 L63.9,92.8 L50,84 L36.4,91.8 L31.2,75.9 L12.8,77 L12.9,62.1 L7,50 L16.7,39.2 L12,22.4 L27.7,19.3 L36.4,8.2 L50,17 L64.2,6.3 L73.5,17.6 L84.8,24.7 L84.2,38.9 Z M80,50 A30,30 0 1,0 20,50 A30,30 0 1,0 80,50 Z' fill='url(%23g)' fill-rule='evenodd'/%3E%3Cg fill='%23f8fafc'%3E%3Crect x='-3' y='-3' width='6' height='6' transform='translate(88,77.6) rotate(45)'/%3E%3Crect x='-3' y='-3' width='6' height='6' transform='translate(12.8,77) rotate(45)'/%3E%3Crect x='-3' y='-3' width='6' height='6' transform='translate(12,22.4) rotate(45)'/%3E%3Crect x='-3' y='-3' width='6' height='6' transform='translate(64.2,6.3) rotate(45)'/%3E%3C/g%3E%3C/svg%3E");
    animation: dcg-ring-pulse 1.7s ease-in-out infinite;
}

.avatar-border--achv-dual-wielder {
    --glow: rgba(220,38,38,.6);
    box-shadow: 0 0 16px 3px var(--glow);
    animation: dcg-glow-pulse 1.4s ease-in-out infinite;
}
.avatar-border--achv-dual-wielder::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%2318181b'/%3E%3Cstop offset='1' stop-color='%23dc2626'/%3E%3C/linearGradient%3E%3Cfilter id='b'%3E%3CfeGaussianBlur stdDeviation='2.6'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M94,50 L84.2,61.1 L88,77.6 L73.5,82.4 L63.9,92.8 L50,84 L36.4,91.8 L31.2,75.9 L12.8,77 L12.9,62.1 L7,50 L16.7,39.2 L12,22.4 L27.7,19.3 L36.4,8.2 L50,17 L64.2,6.3 L73.5,17.6 L84.8,24.7 L84.2,38.9 Z M80,50 A30,30 0 1,0 20,50 A30,30 0 1,0 80,50 Z' fill='url(%23g)' filter='url(%23b)' opacity='.7' fill-rule='evenodd'/%3E%3Cpath d='M94,50 L84.2,61.1 L88,77.6 L73.5,82.4 L63.9,92.8 L50,84 L36.4,91.8 L31.2,75.9 L12.8,77 L12.9,62.1 L7,50 L16.7,39.2 L12,22.4 L27.7,19.3 L36.4,8.2 L50,17 L64.2,6.3 L73.5,17.6 L84.8,24.7 L84.2,38.9 Z M80,50 A30,30 0 1,0 20,50 A30,30 0 1,0 80,50 Z' fill='url(%23g)' fill-rule='evenodd'/%3E%3Cg fill='%23fef2f2'%3E%3Crect x='-3.2' y='-3.2' width='6.4' height='6.4' transform='translate(88,77.6) rotate(45)'/%3E%3Crect x='-3.2' y='-3.2' width='6.4' height='6.4' transform='translate(12.8,77) rotate(45)'/%3E%3Crect x='-3.2' y='-3.2' width='6.4' height='6.4' transform='translate(12,22.4) rotate(45)'/%3E%3Crect x='-3.2' y='-3.2' width='6.4' height='6.4' transform='translate(64.2,6.3) rotate(45)'/%3E%3C/g%3E%3C/svg%3E");
    animation: dcg-ring-radiant 1.4s ease-in-out infinite;
}

.avatar-border--achv-second-wind {
    --glow: rgba(192,132,252,.5);
    box-shadow: 0 0 8px 1px var(--glow);
}
.avatar-border--achv-second-wind::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M94,50 L84.2,61.1 L88,77.6 L73.5,82.4 L63.9,92.8 L50,84 L36.4,91.8 L31.2,75.9 L12.8,77 L12.9,62.1 L7,50 L16.7,39.2 L12,22.4 L27.7,19.3 L36.4,8.2 L50,17 L64.2,6.3 L73.5,17.6 L84.8,24.7 L84.2,38.9 Z M80,50 A30,30 0 1,0 20,50 A30,30 0 1,0 80,50 Z' fill='%23c084fc' fill-rule='evenodd'/%3E%3Cg fill='%23f3e8ff'%3E%3Crect x='-2.5' y='-2.5' width='5' height='5' transform='translate(88,77.6) rotate(45)'/%3E%3Crect x='-2.5' y='-2.5' width='5' height='5' transform='translate(12.8,77) rotate(45)'/%3E%3Crect x='-2.5' y='-2.5' width='5' height='5' transform='translate(12,22.4) rotate(45)'/%3E%3Crect x='-2.5' y='-2.5' width='5' height='5' transform='translate(64.2,6.3) rotate(45)'/%3E%3C/g%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
    .avatar-border--achv-silver-stripe,
    .avatar-border--achv-gold-weave,
    .avatar-border--achv-jet-stripe,
    .avatar-border--achv-storm-weave,
    .avatar-border--achv-champion-burst,
    .avatar-border--achv-signature-style,
    .avatar-border--achv-one-track-mind,
    .avatar-border--achv-prism-wanderer,
    .avatar-border--achv-triple-crown,
    .avatar-border--achv-flawless,
    .avatar-border--achv-living-legend,
    .avatar-border--achv-long-haul,
    .avatar-border--achv-podium-finish,
    .avatar-border--achv-forge-steel,
    .avatar-border--achv-overdrive,
    .avatar-border--achv-millstone,
    .avatar-border--achv-hot-streak,
    .avatar-border--achv-sunrise,
    .avatar-border--achv-trifecta,
    .avatar-border--achv-silk-touch,
    .avatar-border--achv-quicksilver,
    .avatar-border--achv-dual-wielder,
    .avatar-border--achv-silver-stripe::after,
    .avatar-border--achv-gold-weave::after,
    .avatar-border--achv-jet-stripe::after,
    .avatar-border--achv-storm-weave::after,
    .avatar-border--achv-champion-burst::after,
    .avatar-border--achv-signature-style::after,
    .avatar-border--achv-one-track-mind::after,
    .avatar-border--achv-prism-wanderer::after,
    .avatar-border--achv-triple-crown::after,
    .avatar-border--achv-flawless::after,
    .avatar-border--achv-living-legend::after,
    .avatar-border--achv-long-haul::after,
    .avatar-border--achv-podium-finish::after,
    .avatar-border--achv-forge-steel::after,
    .avatar-border--achv-overdrive::after,
    .avatar-border--achv-millstone::after,
    .avatar-border--achv-hot-streak::after,
    .avatar-border--achv-sunrise::after,
    .avatar-border--achv-trifecta::after,
    .avatar-border--achv-silk-touch::after,
    .avatar-border--achv-quicksilver::after,
    .avatar-border--achv-dual-wielder::after {
        animation: none;
    }
}

.avatar-border-swatch--locked,
.profile-achv-swatch--locked {
    opacity: .5;
    filter: saturate(.35) brightness(.8);
    box-shadow: none !important;
    animation: none !important;
}

.avatar-border-swatch--locked::after,
.profile-achv-swatch--locked::after {
    animation: none !important;
    opacity: .4;
}

/* ══════════════════════════════════════════════════════════════════
   MATCH ENTRY (My Events → Add a Round, Record a Match)
   Chip-style quick picks so a round is a few taps: round, opponent, result.
   ══════════════════════════════════════════════════════════════════ */
.match-form fieldset {
    border: 0;
    padding: 0;
    margin: 0 0 16px;
    min-width: 0;
}

.match-form legend.form-label {
    float: none;
    width: auto;
    padding: 0;
    margin-bottom: 8px;
    font-size: inherit;
}

.match-chip-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.match-chip {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .04em;
    padding: 8px 14px;
    min-height: 38px;
    background: var(--bg3);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 4px;
    cursor: pointer;
    transition: border-color .12s, background .12s;
}

.match-chip:hover { border-color: var(--muted); }
.match-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.match-chip.active {
    background: rgba(61,208,255,0.12);
    border-color: var(--accent);
    color: var(--accent);
}

.match-chip.is-win.active { background: rgba(74,222,128,0.14); border-color: var(--up); color: var(--up); }
.match-chip.is-loss.active { background: rgba(248,113,113,0.14); border-color: var(--down); color: var(--down); }
.match-chip.is-draw.active { background: rgba(255,255,255,0.08); border-color: var(--muted); color: var(--text); }

.match-round-input {
    width: 80px;
    min-height: 38px;
}

.match-result-picker { margin-bottom: 16px; }
.match-result-other { margin-top: 12px; }

.match-field-error {
    color: var(--down);
    font-size: 12px;
    margin: 6px 0 0;
}

.match-opponent-search { position: relative; }

.match-suggestions {
    position: absolute;
    z-index: 5;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    max-height: 320px;
    overflow-y: auto;
    background: var(--bg2);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 4px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.35);
}

.match-suggestion {
    padding: 8px 10px;
    border-radius: 4px;
    cursor: pointer;
}

.match-suggestion:hover { background: rgba(61,208,255,0.08); }
.match-suggestion.is-played { opacity: .5; cursor: not-allowed; }
.match-suggestion.is-played:hover { background: none; }

.match-suggestion-name { font-size: 13px; color: var(--text); }
.match-suggestion-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }

.match-played-tag {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--muted);
    border: 1px solid var(--line);
    border-radius: 3px;
    padding: 1px 5px;
    margin-left: 4px;
}

.match-opponent-chosen {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    background: var(--bg2);
    border: 1px solid var(--accent);
    border-radius: 6px;
}

.match-opponent-name { font-size: 14px; font-weight: 600; color: var(--text); }
.match-opponent-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }

.match-bandai-row { margin-top: 8px; }
.match-bandai-row .form-control { margin-top: 6px; }

.match-link {
    background: none;
    border: 0;
    padding: 0;
    color: var(--accent);
    font-size: 12px;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.match-deck-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.match-deck-row .form-control { flex: 1; min-width: 0; }
.match-deck-name { font-size: 13px; color: var(--text); }

.match-notes { margin-top: 4px; }
.match-notes summary { list-style: none; display: inline-block; }
.match-notes summary::-webkit-details-marker { display: none; }
.match-notes .form-control { margin-top: 8px; }

/* ══════════════════════════════════════════════════════════════════
   RESTORED 2026-10-03
   Rules for classes the markup still uses (avatar/team-logo frames,
   impersonation banner, achievements, profile stats & tops, deck
   history graph, collaboration conflicts, Playtest) that commit
   00c1abc ("once again, oops...") deleted along with ~1,475 other
   lines. Copied verbatim from its parent; nothing here duplicates a
   class that's still defined elsewhere in this file.
   ══════════════════════════════════════════════════════════════════ */
.avatar-border-option {
    background: none;
    border: 2px solid transparent;
    border-radius: 50%;
    padding: 2px;
    cursor: pointer;
    transition: border-color .15s;
}

.avatar-border-option:hover {
    border-color: var(--line);
}

.avatar-border-option.active {
    border-color: var(--accent);
}

.avatar-border-option.locked {
    cursor: help;
}

.avatar-border-option.locked:hover {
    border-color: var(--line2);
}

.profile-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.profile-stat-tile {
    background: var(--bg2);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 16px 18px;
}

.profile-stat-tile--wide {
    grid-column: span 2;
}

@media (max-width: 640px) {

    .profile-stat-tile--wide {
        grid-column: span 1;
    }
}

.profile-stat-tile-value {
    font-family: var(--display);
    font-size: 30px;
    color: var(--accent);
    line-height: 1.1;
}

.profile-stat-tile-label {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 4px;
}

.profile-stat-tile-sub {
    font-family: var(--sans);
    font-size: 11.5px;
    color: var(--muted2);
    margin-top: 6px;
}

.profile-stat-tile-empty {
    font-family: var(--sans);
    font-size: 13px;
    color: var(--muted);
    margin-top: 8px;
    line-height: 1.5;
}

.profile-stat-signature {
    display: flex;
    align-items: center;
    margin-top: 8px;
    text-decoration: none;
    color: var(--text);
    font-family: var(--sans);
    font-size: 14px;
}

.profile-stat-signature-meta {
    display: block;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted);
    margin-top: 3px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.profile-achv-ownlink {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
    font-family: var(--sans);
    font-size: 12.5px;
    color: var(--accent);
    text-decoration: none;
}

.profile-achv-ownlink:hover {
    text-decoration: underline;
}

.profile-tops-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 10px;
}

.profile-tops-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--line2);
    border-radius: 4px;
    background: var(--bg3);
    flex-wrap: wrap;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s;
}

.profile-tops-item:hover {
    border-color: var(--line);
}

.profile-tops-medal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 12px;
    margin-right: 10px;
    flex-shrink: 0;
}

.profile-tops-medal--1 { background: rgba(253,224,71,.18); color: #fde047; }

.profile-tops-medal--2 { background: rgba(203,213,225,.18); color: #cbd5e1; }

.profile-tops-medal--3 { background: rgba(205,127,50,.18); color: #cd7f32; }

/* Placement pill (Winner, Top 4...) - colour comes from the Hub's Event Tags via --tag.
   See PlacementTagHtmlHelpers. */
.placement-tag {
    --tag: var(--accent);
    display: inline-block;
    font-family: var(--mono);
    font-size: 10px;
    line-height: 1.4;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    /* A touch of the theme's text colour keeps pale tags (gold, silver) readable on light backgrounds. */
    color: color-mix(in srgb, var(--tag) 78%, var(--text));
    background: color-mix(in srgb, var(--tag) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--tag) 45%, transparent);
    padding: 1px 7px;
    border-radius: 3px;
    vertical-align: 1px;
}

.profile-tops-badge { margin-left: 8px; }
.archetype-decklist-tag { flex-shrink: 0; }
@media (max-width: 575px) {
    .archetype-decklist-tag { display: none; }
}

.achv-categories {
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.achv-category-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cat-color, var(--text));
    padding-bottom: 8px;
    margin-bottom: 12px;
    border-bottom: 2px solid var(--cat-color, var(--line));
}

.achv-category-header i {
    font-size: 13px;
}

/* Every box is the same fixed size regardless of name/description length — a real grid, not
   flex-wrap sized to content. */
.achv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    grid-auto-rows: 1fr;
    gap: 10px;
}

.achv-box {
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 146px;
    padding: 12px;
    border: 1px solid var(--line2);
    border-radius: 4px;
    background: var(--bg3);
    overflow: hidden;
}

.achv-box--locked {
    opacity: .55;
}

.achv-box-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.achv-box-cat-icon {
    font-size: 12px;
    opacity: .85;
}

.profile-achv-swatch {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: var(--bg3);
}

.profile-achv-swatch i {
    color: var(--muted);
    font-size: 13px;
    position: relative;
    z-index: 2;
    text-shadow: 0 0 4px rgba(0,0,0,.7);
}

.achv-box-name {
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.achv-box-desc {
    font-family: var(--sans);
    font-size: 11px;
    color: var(--muted);
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.profile-achv-progress {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.profile-achv-progress-bar {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: var(--line2);
    overflow: hidden;
}

.profile-achv-progress-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 2px;
}

.profile-achv-progress-label {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--muted);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.avatar-border-swatch {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--bg3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-size: 12px;
    position: relative;
}

/* ── Draggable/zoomable avatar editor ── */
.avatar-editor-frame {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg3);
    position: relative;
    z-index: 1;
    cursor: grab;
    user-select: none;
}

.avatar-editor-frame.dragging {
    cursor: grabbing;
}

/* ── Team banner - the editor frame (Team > Manage) and the team page header use the same
   4:1 shape, so the part the owner drags into view is the part visitors see. ── */
.team-banner,
.team-banner-frame {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 1;
    min-height: 110px;
    max-height: 300px;
}

.team-banner {
    object-fit: cover;
    border-bottom: 1px solid var(--line);
}

.team-banner-frame {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    background: var(--bg3);
    border: 1px dashed var(--line);
    cursor: grab;
    user-select: none;
}

.team-banner-frame.dragging {
    cursor: grabbing;
}

.team-banner-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

.team-banner-frame--removing img {
    opacity: .25;
    filter: grayscale(1);
}

.team-banner-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--muted);
    font-size: 13px;
}

.avatar-editor-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    display: block;
}

.avatar-editor-frame .avatar-editor-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    color: var(--muted);
}

/* ── Impersonation banner (staff only — see ImpersonateController) ── */
.impersonation-banner {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--yellow);
    color: var(--on-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 8px 24px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 600;
}

.impersonation-stop-btn {
    background: rgba(0,0,0,0.15);
    border: 1px solid rgba(0,0,0,0.25);
    color: var(--on-accent);
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 3px;
    cursor: pointer;
    transition: background .12s;
}

.impersonation-stop-btn:hover {
    background: rgba(0,0,0,0.25);
}

/* ── Collaborative decks (branches, contributors, merges) ── */
.deck-branch-banner {
    border-left: 3px solid var(--accent);
}

.deck-collab-conflict-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line2);
}

.deck-collab-conflict-row:last-child {
    border-bottom: none;
}

.deck-collab-conflict-card {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 160px;
}

.deck-collab-conflict-card img {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    object-fit: cover;
}

.deck-collab-conflict-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 13px;
}

.deck-collab-conflict-choices label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.deck-collab-conflict-custom-input {
    width: 60px;
    padding: 4px 8px;
}

.deck-collab-conflict-custom-input:disabled {
    opacity: 0.5;
}

/* ── History graph (branch/merge log — see DeckHistoryGraphBuilder) ── */
.deck-history-graph {
    overflow-x: auto;
}

.deck-history-canvas {
    position: relative;
}

.deck-history-svg {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    overflow: visible;
}

.deck-history-lane-line {
    stroke-width: 2;
    stroke-opacity: .55;
    stroke-linecap: round;
}

/* Dashed rather than solid — visually distinct from a real branch→shared merge connector (which
   this shares a lane colour and curve shape with), since it represents the opposite relationship:
   shared pulled INTO a branch commit (see DeckBranchVersion.SyncedFromSharedVersionNumber), not the
   branch merging into shared. */
.deck-history-connector--sync {
    stroke-dasharray: 4 4;
    stroke-opacity: .4;
}

.deck-history-sync-icon {
    font-size: 10px;
    flex-shrink: 0;
}

.deck-history-connector {
    fill: none;
    stroke-width: 2;
    stroke-opacity: .55;
    stroke-linecap: round;
}

.deck-history-dot {
    stroke-width: 2;
    pointer-events: auto;
    cursor: pointer;
    transition: filter .12s;
}

.deck-history-dot:hover,
.deck-history-dot.deck-history-row--active {
    filter: drop-shadow(0 0 4px currentColor);
}

.deck-history-list {
    position: relative;
}

.deck-history-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px 0 6px;
    border-radius: 6px;
    cursor: pointer;
    transition: background .12s;
}

.deck-history-row:hover,
.deck-history-row.deck-history-row--active {
    background: var(--bg3);
}

.deck-history-row-body {
    min-width: 0;
    flex: 1;
}

.deck-history-row-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text);
}

.deck-history-merge-icon {
    font-size: 10px;
    flex-shrink: 0;
}

.deck-history-row-title-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.deck-history-row-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--mono);
    font-size: 10px;
    color: var(--muted);
    margin-top: 4px;
    letter-spacing: .02em;
    min-width: 0;
}

.deck-history-row-meta > span:not(:first-child)::before {
    content: "\00b7";
    margin-right: 8px;
    color: var(--muted2);
}

.deck-history-branch-pill {
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 3px;
    background: color-mix(in srgb, currentColor 14%, transparent);
    border: 1px solid color-mix(in srgb, currentColor 40%, transparent);
    flex-shrink: 0;
}

.deck-history-row-note {
    color: var(--muted2);
    font-style: italic;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.deck-history-empty {
    text-align: center;
    padding: 32px 24px;
    color: var(--muted);
}

.deck-history-empty i {
    font-size: 20px;
    opacity: .35;
    margin-bottom: 10px;
    display: block;
}

/* ══════════════════════════════════════════════════════════════════
   DECK PLAYTEST — solo goldfishing tabletop (see PlaytestController,
   Playtest/Index.cshtml, playtest.js). Keeps the normal nav (no
   precedent anywhere in this repo for a page opting out of it) but
   fills the rest of the viewport below it — 52px is .nav's own height.
   ══════════════════════════════════════════════════════════════════ */

.playtest-board {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 52px);
    padding: 16px 20px 0;
    gap: 14px;
}

.playtest-toolbar {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.playtest-toolbar-title {
    font-family: var(--display);
    font-size: 22px;
    letter-spacing: .5px;
    color: var(--text);
}

.playtest-toolbar-subtitle {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--accent);
    margin-left: 8px;
}

.playtest-toolbar-actions {
    display: flex;
    gap: 10px;
    margin-left: auto;
}

/* Fullscreen mode — playtest.js puts #playtest-board itself into the real browser Fullscreen API
   (so the nav/footer, being siblings rather than descendants, are excluded automatically and the
   browser chrome gets a genuine "exit fullscreen" affordance) plus toggles this body class as a
   fallback for browsers/contexts where Fullscreen is unavailable or denied. */
body.playtest-fullscreen-active .nav,
body.playtest-fullscreen-active .footer-hub-cta,
body.playtest-fullscreen-active .footer {
    display: none !important;
}

body.playtest-fullscreen-active .playtest-board,
#playtest-board:fullscreen,
#playtest-board:-webkit-full-screen {
    min-height: 100vh;
}

/* Memory gauge + Opponent Security share this slim bar above the Battle Area — everything else
   used to live in a 3-column layout, but Security/Egg Deck/Breeding/Deck/Trash all moved into the
   Battle Area itself (see .playtest-battle-canvas below), so there's no more column structure to
   speak of. */
.playtest-status-bar {
    display: flex;
    align-items: stretch;
    gap: 14px;
}

.playtest-status-bar .playtest-memory-gauge {
    flex: 1;
}

.playtest-opponent-strip {
    flex: 0 0 220px;
    background: var(--bg2);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.playtest-opponent-strip .playtest-corner-label {
    flex: 0 0 auto;
}

.playtest-opponent-strip .playtest-opponent-name {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.playtest-opponent-strip .playtest-pile {
    flex-shrink: 0;
    width: 40px;
    height: 56px;
}

.playtest-opponent-strip .playtest-pile .playtest-card-back {
    width: 40px;
    height: 56px;
}

.playtest-zone {
    background: var(--bg2);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 10px;
    transition: box-shadow .15s;
}

.playtest-zone--field {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 140px;
}

.playtest-zone--flash {
    box-shadow: 0 0 0 2px var(--down);
}

/* Who the opponent is gets picked once at game start (see #opponent-setup-overlay) — this is just
   a static label, not a control. */
.playtest-opponent-name {
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 10px;
    text-align: center;
}

/* Shared by every corner box inside the Battle Area (Security/Egg Deck+Breeding/Deck/Trash) —
   same typography as .playtest-zone-label, just without needing the full zone padding/border. */
.playtest-corner-label {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.playtest-zone-label {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.playtest-zone-count {
    font-weight: 700;
    color: var(--accent);
}

/* Deck / egg deck / security / trash — a fixed-size clickable pile. */
.playtest-pile {
    position: relative;
    width: 100px;
    height: 140px;
    margin: 0 auto;
    cursor: pointer;
}

.playtest-pile--empty {
    border: 1px dashed var(--line2);
    border-radius: 6px;
}

/* No card-back art exists anywhere in this repo — a CSS-drawn placeholder stands in for a
   face-down card, layered a few times (see playtest.js) for a stacked-pile look. */
.playtest-card-back {
    position: absolute;
    width: 100px;
    height: 140px;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--bg3), var(--bg2));
    border: 1px solid var(--line);
    box-shadow: inset 0 0 0 3px var(--bg), inset 0 0 0 4px var(--accent2);
}

.playtest-card {
    width: 100px;
    border-radius: 6px;
    display: block;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,.4);
    transition: transform .1s;
}

.playtest-card:hover {
    transform: translateY(-4px);
}

.playtest-pile-face {
    position: absolute;
    top: 0;
    left: 0;
}

.playtest-field {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 14px;
    min-height: 100px;
}

/* Battle Area is a freeform canvas, not a flow layout — piles are absolutely positioned, either
   auto-placed into front/back "ranks" by card type or wherever the player last dragged them (see
   placeBattlePile in playtest.js). Capped in normal view so the whole board fits one screen; the
   cap lifts in Fullscreen, which has the extra room to spend on it. The light grid is purely
   cosmetic — a nod to a physical playmat, marking this out as the sandbox/testing area. */
.playtest-zone--battle {
    min-height: 380px;
    max-height: 500px;
}

body.playtest-fullscreen-active .playtest-zone--battle,
#playtest-board:fullscreen .playtest-zone--battle,
#playtest-board:-webkit-full-screen .playtest-zone--battle {
    max-height: none;
}

/* Wraps #field-battle and every corner box as siblings that just visually overlap it — NOT
   nested, since renderField('battle') wipes and rebuilds #field-battle's own innerHTML on every
   render, which would otherwise delete anything meant to persist along with it. */
.playtest-battle-canvas {
    position: relative;
    flex: 1;
    min-height: 0;
}

.playtest-field--battle {
    position: absolute;
    inset: 0;
    flex-wrap: nowrap;
    border-radius: 4px;
    background-image:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 24px 24px;
}

.playtest-field--battle .playtest-pile-stack {
    position: absolute;
}

/* Security sits sideways in the Battle Area's top-left rather than boxed off — it's part of the
   open field, not set apart the way Egg Deck + Breeding are. */
.playtest-security-corner {
    position: absolute;
    left: 8px;
    top: 8px;
    width: 170px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Each card is rotated on its own (not the pile as a whole) — that way the stack still grows
   straight up card-by-card (see renderPile's security branch in playtest.js) and only then reads
   as "sideways", instead of a vertical stack getting rotated as one rigid block afterward. 270deg
   (not 90) — sideways the other way round. Split into a face-down and a face-up variant since the
   face-up one is a real <img> that needs its own hover lift, independent of suspend rotation. */
.playtest-security-back {
    transform: rotate(270deg);
}

.playtest-security-face {
    position: absolute;
    left: 0;
    transform: rotate(270deg);
    transition: transform .1s;
}

.playtest-security-face:hover {
    transform: rotate(270deg) translateY(-4px);
}

/* Egg Deck + Breeding are the one pairing that gets an actual box — they're kept together on a
   real mat too, and a hatched egg goes straight from one into the other — pinned bottom-left,
   below Security. */
.playtest-egg-breeding-corner {
    position: absolute;
    left: 8px;
    bottom: 8px;
    width: 240px;
    height: 190px;
    border: 1px dashed var(--line2);
    border-radius: 6px;
    padding: 8px;
    display: flex;
    flex-direction: column;
}

.playtest-egg-breeding-row {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 0;
}

.playtest-field--breeding {
    flex: 1;
    min-height: 0;
    align-items: center;
    justify-content: center;
}

/* Deck top-right, Trash directly below it — both just part of the open field, same as Security. */
.playtest-deck-corner {
    position: absolute;
    top: 8px;
    right: 8px;
}

.playtest-trash-corner {
    position: absolute;
    top: 176px;
    right: 8px;
}

.playtest-pile-stack {
    position: relative;
    width: 100px;
}

/* Digivolve stacks grow upward — the base card anchors the bottom of the pile and each later
   digivolution is offset progressively higher (see playtest.js), covering less of the card below
   it as the stack grows, matching how a physical digivolve stack is built. */
.playtest-stacked-card {
    position: absolute;
    left: 0;
    bottom: 0;
}

/* Suspended (tapped) — only the top card of a stack rotates, standing in for the whole pile
   being suspended, same as resting a real digivolve stack sideways on the mat. Applies whether
   that card is showing its own face or is face down (see .playtest-card--face-down) — the two are
   independent (see buildCardElement in playtest.js). */
.playtest-card--rot-90 {
    transform: rotate(90deg);
}

.playtest-card--rot-90:hover {
    transform: rotate(90deg) translateY(-4px);
}

/* Face down — a plain <div> (see buildCardElement in playtest.js; there's no card-back art in
   this repo for an <img>), same CSS-drawn placeholder look as a face-down deck/security pile. */
.playtest-card--face-down {
    height: 140px;
    background: linear-gradient(135deg, var(--bg3), var(--bg2));
    border: 1px solid var(--line);
    box-shadow: inset 0 0 0 3px var(--bg), inset 0 0 0 4px var(--accent2);
}

/* Dragging — a fully custom pointer-driven system (see playtest.js), no SortableJS. The dragged
   element is the real card/pile itself (reparented to <body>, not a clone), so it just needs to
   render above everything else and ignore its own pointer events while it's being moved around. */
.playtest-dragging {
    position: fixed !important;
    z-index: 280;
    pointer-events: none;
    cursor: grabbing;
}

/* Draggable surfaces get a grab cursor as a hint — hand cards and battle/breeding piles only;
   everything else (trash's face-up card, mulligan-hand preview, reveal thumbnails) stays the
   default pointer cursor since none of those are actually draggable. -webkit-user-drag/user-select
   stop the browser's own native "drag this <img> to another tab/the desktop" gesture and text
   selection from competing with the custom pointer-driven drag in playtest.js. */
#hand-cards .playtest-card,
.playtest-pile-stack,
.playtest-stacked-card {
    cursor: grab;
    -webkit-user-drag: none;
    user-select: none;
}

/* Live feedback for whatever the drop would actually do if released right now — a plain glow for
   landing in an open zone, a stronger one for landing on an existing pile (a merge/digivolve). */
.playtest-drop-target--zone {
    box-shadow: 0 0 0 2px var(--accent), 0 0 18px 3px rgba(61, 208, 255, .35);
    transition: box-shadow .1s;
}

.playtest-drop-target--merge {
    box-shadow: 0 0 0 3px var(--accent2), 0 0 22px 5px rgba(26, 167, 216, .55);
    border-radius: 6px;
    transition: box-shadow .1s;
}

.playtest-memory-gauge {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg2);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 6px 16px;
}

.playtest-memory-btn {
    width: 28px;
    height: 22px;
    border-radius: 4px;
    border: 1px solid var(--line);
    background: var(--bg3);
    color: var(--accent);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
}

.playtest-memory-btn:hover {
    border-color: var(--accent);
}

/* Memory gauge — a row of hex pips running 10 (opponent) down to 0 (centre) up to 10 (you),
   matching the physical Digimon TCG gauge rather than a simple linear bar. Condensed vertically,
   widened horizontally — makes better use of the status bar's shape than a tall/narrow pip would. */
.playtest-memory-hexes {
    display: flex;
    flex: 1;
    justify-content: center;
    gap: 3px;
    overflow-x: auto;
}

.playtest-memory-hex {
    flex-shrink: 0;
    width: 30px;
    height: 20px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: var(--bg3);
    color: var(--muted);
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .12s, color .12s;
}

.playtest-memory-hex:hover {
    background: var(--line2);
    color: var(--text);
}

.playtest-memory-hex--zero {
    background: var(--line);
    color: var(--text);
}

/* Only the one hex matching the current memory value is highlighted (not a filled trail) — blue
   on the left (negative, opponent's side of 10-0-10), red on the right (positive, your side). */
.playtest-memory-hex--active.playtest-memory-hex--left {
    background: var(--accent2);
    color: var(--on-accent);
}

.playtest-memory-hex--active.playtest-memory-hex--right {
    background: var(--down);
    color: var(--on-accent);
}

.playtest-memory-hex--active.playtest-memory-hex--zero {
    box-shadow: 0 0 0 2px var(--accent);
}

.playtest-memory-value {
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    min-width: 3ch;
    text-align: right;
}

.playtest-hand {
    background: var(--bg2);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 10px 14px 16px;
    margin-top: auto;
}

.playtest-hand-label {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 8px;
}

.playtest-hand-cards {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    min-height: 104px;
}

/* ── Overlays (mulligan prompt / zoom preview / reveal panel) ── */
.playtest-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.65);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.playtest-modal {
    background: var(--bg2);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 24px;
    max-width: 420px;
    width: 100%;
}

.playtest-modal--wide {
    max-width: 720px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

.playtest-modal-title {
    font-family: var(--display);
    font-size: 20px;
    letter-spacing: .5px;
    color: var(--text);
    margin-bottom: 10px;
}

.playtest-modal-text {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 18px;
    line-height: 1.5;
}

.playtest-modal-text--center {
    text-align: center;
}

/* The Security Check modal's flipped card — centered, unlike the general zoom preview which
   sits inside its own dedicated centered overlay rather than a modal alongside other content. */
.playtest-check-image {
    display: block;
    margin: 0 auto 14px;
    max-width: min(220px, 70vw);
}

/* Opponent Security's "checked" card — no real card behind it (see #opponent-check-overlay), so
   this is just a static version of the same face-down look .playtest-card-back uses in a pile
   (that one relies on being absolutely positioned inside a pile, which doesn't fit here). */
.playtest-opponent-check-card {
    display: block;
    margin: 0 auto 14px;
    width: 100px;
    height: 140px;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--bg3), var(--bg2));
    border: 1px solid var(--line);
    box-shadow: inset 0 0 0 3px var(--bg), inset 0 0 0 4px var(--accent2);
}

/* Add to Security's 4-way choice (position x orientation) — plain buttons rather than a dropdown
   since there are only 4 combinations and every one benefits from being visible at a glance. */
.playtest-add-security-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 16px;
}

/* "Enter a number" modal's input — see #number-overlay. */
.playtest-number-input {
    width: 100%;
    padding: 10px 12px;
    font-family: var(--mono);
    font-size: 16px;
    background: var(--bg3);
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--text);
}

.playtest-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
}

/* The mulligan prompt's own copy of the drawn hand — the overlay sits over the real hand zone,
   so this is the only way to actually see what's being kept/mulliganed. */
.playtest-mulligan-hand {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 4px 0 18px;
}

.playtest-zoom-image {
    max-width: min(360px, 90vw);
    max-height: 85vh;
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(0,0,0,.6);
}

.playtest-reveal-list {
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.playtest-reveal-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    background: var(--bg3);
    border: 1px solid var(--line);
    border-radius: 6px;
}

.playtest-reveal-thumb {
    width: 44px;
    border-radius: 4px;
    flex-shrink: 0;
}

/* Face-down security card in the reveal list — same placeholder look as a face-down pile
   (.playtest-card-back), just sized/positioned inline instead of stacked+absolute. */
.playtest-reveal-thumb--back {
    height: 62px;
    background: linear-gradient(135deg, var(--bg3), var(--bg2));
    border: 1px solid var(--line);
    box-shadow: inset 0 0 0 2px var(--bg), inset 0 0 0 3px var(--accent2);
}

.playtest-reveal-flip-btn {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 5px 9px;
    border-radius: 3px;
    border: 1px solid var(--line);
    background: var(--bg2);
    color: var(--accent);
    cursor: pointer;
    flex-shrink: 0;
    transition: all .12s;
}

.playtest-reveal-flip-btn:hover {
    border-color: var(--accent);
    color: var(--text);
}

.playtest-reveal-name {
    font-size: 13px;
    color: var(--text);
    flex: 0 0 160px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* "Move" opens a submenu of destinations (the same context menu component used everywhere else in
   Playtest) rather than a dropdown that's always pre-loaded with a choice — a card left alone
   stays exactly where it is; nothing moves unless it's actually given a destination (see
   renderReveal/reveal-confirm-btn in playtest.js). --set marks a card that WILL move on Confirm. */
.playtest-reveal-dest {
    display: flex;
    justify-content: flex-end;
    flex: 1;
}

.playtest-reveal-move-btn {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 5px 9px;
    border-radius: 3px;
    border: 1px solid var(--line);
    background: var(--bg2);
    color: var(--muted);
    cursor: pointer;
    white-space: nowrap;
    transition: all .12s;
}

.playtest-reveal-move-btn:hover {
    border-color: var(--accent);
    color: var(--text);
}

.playtest-reveal-move-btn--set {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}

.playtest-reveal-empty {
    color: var(--muted);
    font-size: 13px;
    padding: 20px 0;
    text-align: center;
}

/* Inspect Stack's per-card actions (see renderInspectStack in playtest.js) — hidden until you
   hover (or keyboard-focus) that specific row, so the list itself stays readable at a glance. */
.playtest-inspect-stack-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity .12s;
}

.playtest-reveal-row:hover .playtest-inspect-stack-actions,
.playtest-inspect-stack-actions:focus-within {
    opacity: 1;
}

/* ── Opponent setup list — text-only rows (no per-archetype art), ranked by current meta share. ── */
.playtest-opponent-setup-list {
    overflow-y: auto;
    max-height: 50vh;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 4px;
}

.playtest-opponent-setup-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 9px 12px;
    background: var(--bg3);
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
    transition: all .12s;
}

.playtest-opponent-setup-item:hover {
    border-color: var(--accent);
    background: var(--bg2);
}

.playtest-opponent-setup-share {
    margin-left: auto;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted);
}

.playtest-opponent-setup-item:disabled {
    opacity: .5;
    cursor: default;
    pointer-events: none;
}

/* Shown only while fetchOpponentCards is in flight, right after a pick — the fetch is usually
   fast, but the throbber covers whatever a slow connection or cold DB adds. */
.playtest-opponent-setup-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 0 4px;
    font-size: 13px;
    color: var(--muted);
}

/* ── Context menu — no existing component in this repo to reuse, built from scratch ── */
.playtest-context-menu {
    position: absolute;
    z-index: 300;
    background: var(--bg2);
    border: 1px solid var(--line);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0,0,0,.5);
    padding: 4px;
    min-width: 180px;
    display: flex;
    flex-direction: column;
}

.playtest-context-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    background: none;
    border: none;
    border-radius: 4px;
    font-family: var(--sans);
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
}

.playtest-context-menu-item:hover {
    background: var(--bg3);
    color: var(--accent);
}

@media (max-width: 900px) {

    .playtest-status-bar {
        flex-direction: column;
        align-items: stretch;
    }


    .playtest-opponent-strip {
        flex: 0 0 auto;
    }


    /* The corner boxes are fixed-pixel-sized (see .playtest-security-corner etc.) and can crowd
       a narrow canvas — shrinking them is a better trade than the layout math needed to reflow
       them, and touch devices fall back to click/context-menu for everything anyway. */
    .playtest-egg-breeding-corner {
        width: 190px;
        height: 170px;
    }


    .playtest-security-corner {
        width: 130px;
    }
}