/* ============================================================
   style.css — L'Archivio del Collezionista
   Fraunces (display/prezzi) · Sora (body/UI) · JetBrains Mono (dati/label)

   Direzione: archivio editoriale scuro/carta. La carta è il
   protagonista; la UI è il palco. Regole cromatiche:
   · rosso lacca  = brand / azione / navigazione
   · oro          = SOLO valore (prezzi, rarità, completamento)
   · hairline 1px = profondità (mai glow gratuito)
   Firma visiva: "registration dot" rosso prima di ogni label
   d'archivio + linguaggio foil per la rarità.
   ============================================================ */

:root {
    --font-display: "Fraunces", Georgia, serif;
    --font-mono:    "JetBrains Mono", "Courier New", monospace;
    --body:         "Sora", system-ui, sans-serif;

    --accent:       #e13d45;
    --accent-deep:  #c5333b;
    --accent-glow:  rgba(225,61,69,0.20);
    --up:           #3dd68c;
    --down:         #f2555a;

    /* radius scale */
    --r-xs:   6px;
    --r-sm:   10px;
    --r-md:   14px;
    --r-lg:   20px;
    --r-pill: 999px;
    --radius: 14px;

    /* motion */
    --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --dur-fast:    .16s;
    --dur-med:     .28s;

    /* aurora holographic — glass surfaces & iris accent */
    --glass-panel:   color-mix(in srgb, var(--panel) 76%, transparent);
    --glass-surface: color-mix(in srgb, var(--surface) 86%, transparent);
    --glass-blur:    blur(16px) saturate(1.25);
    --iris:          #7c6fff;
    --iris-glow:     rgba(124,111,255,0.22);
}

[data-theme="dark"] {
    --bg:              #0a0b10;
    --bg-2:            #0d0f15;
    --panel:           #11131b;
    --surface:         #151823;
    --surface-high:    #1c2030;
    --text:            #edeff6;
    --muted:           #8f97ac;
    --border:          rgba(255,255,255,0.07);
    --border-bright:   rgba(255,255,255,0.14);
    --shadow:          0 12px 36px rgba(0,0,0,0.55);
    --card-shadow:     0 8px 28px rgba(0,0,0,0.55);
    --shadow-gold:     0 8px 28px rgba(201,162,39,0.10);

    --gold:        #cfa72e;
    --gold-bright: #e8c45c;
    --gold-glow:   rgba(207,167,46,0.18);
}
[data-theme="light"] {
    --bg:              #f2efe7;
    --bg-2:            #f8f6f0;
    --panel:           #fcfbf7;
    --surface:         #fffefb;
    --surface-high:    #efebe0;
    --text:            #191b22;
    --muted:           #5d6373;
    --border:          rgba(22,24,32,0.09);
    --border-bright:   rgba(22,24,32,0.17);
    --shadow:          0 12px 32px rgba(25,27,40,0.13);
    --card-shadow:     0 8px 24px rgba(25,27,40,0.16);
    --shadow-gold:     0 8px 24px rgba(143,116,20,0.10);

    --gold:        #9a7c16;
    --gold-bright: #b6931f;
    --gold-glow:   rgba(154,124,22,0.14);
}

/* ---- Tinte per tipo (bordo carta, sottolineatura) ---- */
[data-type="fire"]       { --type-tint: rgba(232,87,45,0.42);  --type-tint-bright: rgba(232,87,45,0.75); }
[data-type="water"]      { --type-tint: rgba(74,144,217,0.42); --type-tint-bright: rgba(74,144,217,0.75); }
[data-type="grass"]      { --type-tint: rgba(93,190,98,0.42);  --type-tint-bright: rgba(93,190,98,0.75); }
[data-type="lightning"]  { --type-tint: rgba(240,192,48,0.42); --type-tint-bright: rgba(240,192,48,0.75); }
[data-type="lampo"]      { --type-tint: rgba(240,192,48,0.42); --type-tint-bright: rgba(240,192,48,0.75); }
[data-type="fulmine"]    { --type-tint: rgba(240,192,48,0.42); --type-tint-bright: rgba(240,192,48,0.75); }
[data-type="psychic"]    { --type-tint: rgba(224,84,122,0.42); --type-tint-bright: rgba(224,84,122,0.75); }
[data-type="fighting"]   { --type-tint: rgba(192,72,40,0.42);  --type-tint-bright: rgba(192,72,40,0.75); }
[data-type="darkness"]   { --type-tint: rgba(120,110,170,0.40); --type-tint-bright: rgba(120,110,170,0.70); }
[data-type="metal"]      { --type-tint: rgba(138,155,174,0.40); --type-tint-bright: rgba(138,155,174,0.70); }
[data-type="dragon"]     { --type-tint: rgba(26,95,180,0.42);  --type-tint-bright: rgba(26,95,180,0.75); }
[data-type="fairy"]      { --type-tint: rgba(230,133,163,0.42); --type-tint-bright: rgba(230,133,163,0.75); }
[data-type="colorless"]  { --type-tint: rgba(154,160,180,0.30); --type-tint-bright: rgba(154,160,180,0.55); }
/* Nomi tipo in italiano */
[data-type="fuoco"]      { --type-tint: rgba(232,87,45,0.42);  --type-tint-bright: rgba(232,87,45,0.75); }
[data-type="acqua"]      { --type-tint: rgba(74,144,217,0.42); --type-tint-bright: rgba(74,144,217,0.75); }
[data-type="erba"]       { --type-tint: rgba(93,190,98,0.42);  --type-tint-bright: rgba(93,190,98,0.75); }
[data-type="elettro"]    { --type-tint: rgba(240,192,48,0.42); --type-tint-bright: rgba(240,192,48,0.75); }
[data-type="psico"]      { --type-tint: rgba(224,84,122,0.42); --type-tint-bright: rgba(224,84,122,0.75); }
[data-type="lotta"]      { --type-tint: rgba(192,72,40,0.42);  --type-tint-bright: rgba(192,72,40,0.75); }
[data-type="oscurità"]   { --type-tint: rgba(120,110,170,0.40); --type-tint-bright: rgba(120,110,170,0.70); }
[data-type="metallo"]    { --type-tint: rgba(138,155,174,0.40); --type-tint-bright: rgba(138,155,174,0.70); }
[data-type="drago"]      { --type-tint: rgba(26,95,180,0.42);  --type-tint-bright: rgba(26,95,180,0.75); }
[data-type="folletto"]   { --type-tint: rgba(230,133,163,0.42); --type-tint-bright: rgba(230,133,163,0.75); }
[data-type="incolore"]   { --type-tint: rgba(154,160,180,0.30); --type-tint-bright: rgba(154,160,180,0.55); }

/* Fallback tinta */
.card-tile { --type-tint: var(--border-bright); --type-tint-bright: rgba(225,61,69,0.45); }

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

/* Focus visibile e coerente ovunque */
:focus-visible {
    outline: 2px solid var(--iris);
    outline-offset: 2px;
    border-radius: 4px;
}

::selection { background: var(--iris-glow); }

/* Scrollbar globale con tinta iris */
html {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--iris) 35%, var(--surface-high)) transparent;
}
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--iris) 35%, var(--surface-high));
    border-radius: 4px;
}

/* ---------- BODY & SFONDO ---------- */
body {
    font-family: var(--body);
    background-color: var(--bg);
    color: var(--text);
    min-height: 100vh;
    transition: background-color .3s, color .3s;
    overscroll-behavior-y: contain;
    position: relative;
}

/* ── SFONDO A 3 LIVELLI ──────────────────────────────────────────────────
   1. #bg-fixed   — artwork fisso sfocato + overlay scuro (leggibilità)
   2. .atmo       — aurora: 3 radial-gradient animati lentamente
   3. body::after — grana SVG (feTurbulence)
   Tutti fixed, pointer-events:none, z-index sotto il contenuto (3).
   ─────────────────────────────────────────────────────────────────────── */
#bg-fixed {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
#bg-fixed-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.bg-fixed-overlay {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--bg) 22%, transparent);
}
[data-theme="light"] .bg-fixed-overlay {
    background: color-mix(in srgb, var(--bg) 88%, transparent);
}

/* Aurora: tre macchie di luce che respirano (accent, oro, slate freddo) */
.atmo {
    position: fixed;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}
.atmo::before {
    content: "";
    position: absolute;
    inset: -20%; /* margine per il translate dell'animazione */
    background:
        radial-gradient(42% 38% at 18% 12%, rgba(143,151,172,0.10), transparent 70%),
        radial-gradient(38% 34% at 84% 8%,  var(--accent-glow),     transparent 70%),
        radial-gradient(50% 44% at 60% 96%, var(--gold-glow),       transparent 70%);
    opacity: 0.55;
    animation: aurora 26s ease-in-out infinite alternate;
}
[data-theme="light"] .atmo::before { opacity: 0.35; }
@keyframes aurora {
    0%   { transform: translate3d(0,0,0) scale(1); }
    50%  { transform: translate3d(-3%,2%,0) scale(1.06); }
    100% { transform: translate3d(2%,-2%,0) scale(1.02); }
}

/* Grana SVG: materia della carta */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0.05;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23g)'/%3E%3C/svg%3E");
    background-size: 256px 256px;
}

header, main, footer,
.cookie-banner, .lightbox-overlay, .onboarding-overlay { position: relative; z-index: 3; }

/* ============================================================
   FIRMA VISIVA — "targhetta d'archivio"
   Label mono maiuscolo + punto di registro rosso.
   ============================================================ */
.price-label, .attacks-label, .portfolio-section-title,
.related-section-title, .recently-viewed-title,
.meta-form-title, .shop-group-title, .card-of-day-label,
.subbar-label {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 8px;
}
.price-label::before, .attacks-label::before, .portfolio-section-title::before,
.related-section-title::before, .recently-viewed-title::before,
.meta-form-title::before, .card-of-day-label::before {
    content: "";
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
}

/* ---------- HEADER ---------- */
header {
    position: sticky; top: 0; z-index: 50;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    border-bottom: 1px solid var(--border);
    padding-top: env(safe-area-inset-top);
}
.header-inner {
    max-width: 1200px; margin: 0 auto;
    display: flex; align-items: center; gap: 18px;
    padding: 13px 24px;
}

/* ---- LOGO — la carta del collezionista ---- */
.logo {
    display: flex; align-items: center; gap: 11px;
    text-decoration: none; color: var(--text);
    flex-shrink: 0;
}
.logo-mark {
    display: flex; align-items: center; flex-shrink: 0;
}
.logo-mark-svg {
    display: block;
    width: 26px; height: 36px;
    transition: transform .4s var(--ease-spring);
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}
.logo-wordmark {
    display: flex; flex-direction: column; gap: 2px;
    line-height: 1; font-style: normal; font-weight: normal;
    margin: 0; padding: 0;
}
.logo-poke {
    font-family: var(--font-mono);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.42em;
    text-indent: 0.05em;
    color: var(--accent);
    display: block;
    text-transform: uppercase;
}
.logo-cards {
    font-family: var(--font-display);
    font-size: 21px;
    font-weight: 700;
    font-variation-settings: "opsz" 40;
    letter-spacing: 0.06em;
    display: block;
    color: var(--text);
    line-height: 1;
}

.search-wrap { flex: 1; display: flex; align-items: center; gap: 8px; }
#searchInput {
    flex: 1; min-width: 0; max-width: 420px;
    padding: 10px 18px; border-radius: var(--r-pill);
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface) 75%, transparent);
    color: var(--text);
    font-family: var(--body); font-size: 14px; font-weight: 500; outline: none;
    transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease,
                background var(--dur-fast) ease;
    letter-spacing: 0.2px;
}
#searchInput::placeholder { color: var(--muted); }
#searchInput:focus {
    border-color: var(--accent);
    background: var(--surface);
    box-shadow: 0 0 0 3px var(--accent-glow);
}
.scan-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 14px; border-radius: var(--r-pill);
    border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
    background: color-mix(in srgb, var(--accent) 7%, var(--surface));
    color: var(--accent);
    font-family: var(--body); font-size: 13px; font-weight: 600;
    white-space: nowrap; text-decoration: none; flex-shrink: 0;
    letter-spacing: 0.01em; line-height: 1.2;
    transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.scan-pill:hover {
    background: color-mix(in srgb, var(--accent) 14%, var(--surface));
    border-color: var(--accent);
}
.scan-pill.active { background: var(--accent); color: #fff; border-color: var(--accent); }

.header-right { display: flex; align-items: center; gap: 10px; }
.lang-switch {
    display: flex;
    border: 1px solid var(--border);
    border-radius: var(--r-pill); overflow: hidden;
    background: color-mix(in srgb, var(--surface) 70%, transparent);
}
.lang-switch button {
    border: 0; background: transparent; color: var(--muted);
    font-family: var(--font-mono); font-size: 11px; font-weight: 700;
    padding: 8px 12px; cursor: pointer;
    transition: background var(--dur-fast), color var(--dur-fast);
    letter-spacing: 0.06em;
}
.lang-switch button.active {
    background: var(--accent);
    color: #fff;
}
.icon-btn {
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface) 70%, transparent);
    color: var(--text);
    width: 38px; height: 38px; border-radius: 50%; cursor: pointer; font-size: 15px;
    transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast);
    display: flex; align-items: center; justify-content: center;
}

/* ---- Mode toggle TCG / Pocket ---- */
.mode-toggle {
    display: flex;
    border: 1px solid var(--border);
    border-radius: var(--r-pill); overflow: hidden;
    background: color-mix(in srgb, var(--surface) 70%, transparent);
}
.mode-toggle button {
    border: 0; background: transparent; color: var(--muted);
    font-family: var(--font-mono); font-size: 11px; font-weight: 700;
    padding: 8px 12px; cursor: pointer;
    transition: background var(--dur-fast), color var(--dur-fast);
    letter-spacing: 0.06em;
}
.mode-toggle button.active {
    background: var(--iris);
    color: #fff;
}
/* Quando mode=pocket: accent dei nav-tab attivi diventa iris */
[data-mode="pocket"] .nav-tab.active {
    background: var(--iris);
}
[data-mode="pocket"] .nav-tab.active .portfolio-badge {
    background: #fff; color: var(--iris);
}

/* ---------- NAV TABS ---------- */
.main-nav {
    display: flex; gap: 2px;
    background: color-mix(in srgb, var(--surface) 60%, transparent);
    border: 1px solid var(--border);
    border-radius: var(--r-pill); padding: 3px;
    flex-shrink: 0;
}
.nav-tab {
    border: 0; background: transparent; color: var(--muted);
    font-family: var(--body); font-size: 12.5px; font-weight: 600;
    padding: 7px 14px;
    border-radius: var(--r-pill); cursor: pointer; text-decoration: none;
    white-space: nowrap; letter-spacing: 0.01em;
    display: inline-flex; align-items: center; gap: 5px;
    line-height: 1.2;
    transition: color var(--dur-fast) ease, background var(--dur-fast) ease;
}
.nav-tab.active {
    background: var(--accent);
    color: #fff;
}

.subbar {
    max-width: 1200px; margin: 0 auto; padding: 0 24px;
    min-height: 0;
}
.subbar:not(:empty) { padding: 9px 24px; }
.crumb {
    color: var(--text); text-decoration: none; font-weight: 600; font-size: 13px;
    letter-spacing: 0.2px;
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
    padding-bottom: 1px;
    transition: color var(--dur-fast), border-color var(--dur-fast);
}
.crumb-sep { color: var(--muted); margin: 0 8px; opacity: 0.5; }
.crumb-current { color: var(--muted); font-weight: 500; font-size: 13px; }

/* ---------- MAIN ---------- */
#app { max-width: 1200px; margin: 0 auto; padding: 28px 24px 64px; }

/* ---------- GEN BAR ---------- */
.gen-bar {
    display: flex; gap: 7px; flex-wrap: wrap;
    margin-bottom: 26px;
}
.gen-btn {
    position: relative;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--panel) 88%, transparent);
    color: var(--muted);
    font-family: var(--font-mono); font-size: 11px; font-weight: 500;
    padding: 8px 14px; border-radius: var(--r-pill);
    cursor: pointer; white-space: nowrap;
    letter-spacing: 0.04em;
    transition:
        border-color var(--dur-fast) ease,
        color        var(--dur-fast) ease,
        background   var(--dur-med) var(--ease-out);
    flex-shrink: 0;
}
.gen-btn.active {
    color: #fff;
    background: var(--accent);
    border-color: var(--accent);
}
.gen-btn > * { position: relative; z-index: 1; }
.gen-btn .gen-btn-label { position: relative; z-index: 1; }

.gen-bar--hidden { display: none; }
.scroll-sentinel { height: 1px; grid-column: 1 / -1; }

/* ---------- GRIGLIA POKÉMON ---------- */
.poke-grid {
    display: grid; gap: 13px;
    grid-template-columns: repeat(auto-fill, minmax(144px, 1fr));
}
.poke-tile {
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: 18px 10px 14px; text-align: center; text-decoration: none; color: var(--text);
    position: relative;
    transition:
        transform    var(--dur-med) var(--ease-out),
        box-shadow   var(--dur-med) var(--ease-out),
        border-color var(--dur-fast) ease,
        background   var(--dur-fast) ease;
    animation: reveal .4s var(--ease-out) both;
    animation-delay: var(--reveal-delay, 0s);
    will-change: opacity, transform;
}
.poke-tile img { width: 112px; height: 112px; object-fit: contain; }
.poke-num {
    position: absolute; top: 10px; left: 12px;
    font-family: var(--font-mono); font-size: 10px; color: var(--muted);
    letter-spacing: 0.02em;
}
.poke-name { display: block; font-weight: 600; margin-top: 6px; font-size: 12.5px; letter-spacing: 0.2px; }

/* ---------- VISTA 2: griglia carte ---------- */
.cards-head { display: flex; align-items: baseline; gap: 6px 14px; margin-bottom: 12px; flex-wrap: wrap; }

.cards-tabs {
    display: flex; gap: 2px;
    background: color-mix(in srgb, var(--surface) 70%, transparent);
    border: 1px solid var(--border);
    border-radius: var(--r-pill); padding: 3px;
    width: fit-content; margin-bottom: 14px;
}
.cards-tab {
    border: 0; background: transparent; color: var(--muted);
    font-family: var(--body); font-size: 12.5px; font-weight: 600;
    padding: 6px 16px;
    border-radius: var(--r-pill); cursor: pointer;
    transition: background var(--dur-fast), color var(--dur-fast);
    letter-spacing: 0.01em;
}
.cards-tab.active {
    background: var(--accent);
    color: #fff;
}

.cards-toolbar {
    display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
    margin-bottom: 18px;
}
.toolbar-field {
    display: flex; align-items: center; gap: 6px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface) 80%, var(--bg));
    border-radius: var(--r-pill); padding: 0 14px 0 12px;
    transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
    min-width: 0; flex: 0 1 auto;
}
.toolbar-field:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}
.toolbar-icon { font-size: 12px; color: var(--muted); pointer-events: none; line-height: 1; }
.toolbar-select {
    border: 0; background: transparent; color: var(--text);
    font-family: var(--body); font-size: 13px; font-weight: 600;
    padding: 8px 0; cursor: pointer; outline: none;
    letter-spacing: 0.1px;
}
.toolbar-select:focus { outline: none; }
[data-theme="dark"]  .toolbar-select { color-scheme: dark; }
[data-theme="light"] .toolbar-select { color-scheme: light; }
.toolbar-select option { background-color: var(--bg-2); color: var(--text); }
.toolbar-select option:checked { background-color: var(--accent); color: #fff; }

.cards-head h2 {
    font-family: var(--font-display);
    font-size: 26px; font-weight: 600;
    font-variation-settings: "opsz" 60;
    letter-spacing: 0.01em;
}
.cards-head .count {
    color: var(--muted); font-weight: 500; font-size: 13px;
    font-family: var(--font-mono);
}
.egg-title {
    background: linear-gradient(100deg,
        var(--gold-bright), var(--accent) 45%, var(--gold-bright) 90%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: egg-rainbow 4s linear infinite;
}
@keyframes egg-rainbow { to { background-position: 200% center; } }

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

/* ============================================================
   CARD TILE — il protagonista
   Palco piatto, hairline per rarità, foil sweep all'hover.
   Il tilt 3D arriva da visual.js (inline transform).
   ============================================================ */
.card-tile {
    text-decoration: none; color: var(--text);
    display: flex; flex-direction: column; gap: 7px;
    animation: reveal .55s var(--ease-out) both;
    animation-delay: var(--reveal-delay, 0s);
    will-change: opacity, transform;
}
.card-img-wrap {
    position: relative; aspect-ratio: 245/342; border-radius: 12px; overflow: hidden;
    background: var(--glass-surface);
    border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.30);
    transform: perspective(700px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg));
    transition:
        transform    .45s var(--ease-out),
        box-shadow   var(--dur-med) var(--ease-out),
        border-color var(--dur-fast) ease;
    transform-style: preserve-3d;
    transform-origin: center center;
}
[data-theme="light"] .card-img-wrap { box-shadow: 0 2px 10px rgba(25,27,40,0.10); background: color-mix(in srgb, var(--surface) 92%, transparent); }
.card-img-wrap img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ============================================================
   FOIL ENGINE — layer olografici + tilt (guidati da js/foil.js)
   --mx/--my: puntatore 0-100 · --rx/--ry: tilt · --foil-o: opacità
   ============================================================ */
.detail-img-wrap {
    transform: perspective(700px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg));
    transform-style: preserve-3d;
    transition: transform .45s var(--ease-out);
}
/* Durante il tracking il transform segue il puntatore quasi in real-time */
.card-img-wrap.is-tilting   { transition-duration: .06s, var(--dur-med), var(--dur-fast); }
.detail-img-wrap.is-tilting { transition-duration: .06s; }
.is-tilting { will-change: transform; }

.foil, .glare {
    position: absolute; inset: 0;
    pointer-events: none;
    border-radius: inherit;
    opacity: var(--foil-o, 0);
    transition: opacity .45s ease;
}
/* livello 1: sheen rainbow (color-dodge), segue il puntatore */
.foil {
    z-index: 2;
    background: linear-gradient(115deg,
        transparent 18%,
        rgba(255, 60, 100, .40) 32%,
        rgba(255, 210, 70, .40) 42%,
        rgba( 90, 255, 170, .36) 52%,
        rgba( 80, 180, 255, .40) 62%,
        rgba(190, 110, 255, .40) 72%,
        transparent 86%);
    background-size: 260% 260%;
    background-position: calc(var(--mx, 50) * 1%) calc(var(--my, 50) * 1%);
    mix-blend-mode: color-dodge;
}
/* livello 2: glare radiale (luce speculare) */
.glare {
    z-index: 3;
    background: radial-gradient(circle at calc(var(--mx, 50) * 1%) calc(var(--my, 50) * 1%),
        rgba(255,255,255,.34) 0%, rgba(255,255,255,.07) 26%, transparent 56%);
    mix-blend-mode: overlay;
}
/* niente foil sugli stati senza immagine reale */
.no-img .foil, .no-img .glare,
.img-missing .foil, .img-missing .glare,
.img-loading .foil, .img-loading .glare,
.card-img-jp-missing .foil, .card-img-jp-missing .glare { display: none; }

/* sheen automatico (solo hero e dettaglio su touch): lento, elegante */
.auto-sheen .foil {
    opacity: .5;
    animation: sheen-drift 7s ease-in-out infinite;
}
.auto-sheen .glare { opacity: 0; }
@keyframes sheen-drift {
    0%, 100% { background-position: 12% 30%; }
    50%      { background-position: 88% 70%; }
}

.card-img-fallback { display: none; }
.card-img-wrap.no-img img,
.card-img-wrap.img-missing img { display: none; }
.card-img-wrap.no-img,
.card-img-wrap.img-missing {
    background:
        radial-gradient(ellipse 80% 60% at 50% 35%,
            color-mix(in srgb, var(--surface-high) 70%, transparent), transparent),
        var(--panel);
    border-color: var(--border);
}
.card-img-wrap.no-img .card-img-fallback,
.card-img-wrap.img-missing .card-img-fallback {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; height: 100%; padding: 12px;
    font-size: 11px; font-weight: 600; color: var(--muted);
    letter-spacing: 0.2px;
    opacity: 0.7;
}
.card-img-wrap.no-img .card-img-fallback::before,
.card-img-wrap.img-missing .card-img-fallback::before {
    content: "";
    display: block; width: 44px; height: 44px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='15' fill='%23e13d45' stroke='%23111' stroke-width='2'/%3E%3Cpath d='M1 16h30' stroke='%23111' stroke-width='2'/%3E%3Ccircle cx='16' cy='16' r='5' fill='%23fff' stroke='%23111' stroke-width='2'/%3E%3Ccircle cx='16' cy='16' r='2' fill='%23111'/%3E%3Cpath d='M1 16h10M21 16h10' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat;
    opacity: 0.35;
}
.card-img-wrap.img-loading {
    background: linear-gradient(100deg,
        var(--surface) 30%,
        color-mix(in srgb, var(--iris) 8%, var(--surface)) 44%,
        color-mix(in srgb, var(--iris) 14%, var(--surface)) 50%,
        color-mix(in srgb, var(--iris) 8%, var(--surface)) 56%,
        var(--surface) 70%);
    background-size: 800px 100%;
    animation: shimmer 1.6s ease-in-out infinite;
}
.card-img-wrap.img-loading img { opacity: 0; }
.card-img-unavailable { display: none; }
.card-img-wrap.no-img .card-img-unavailable,
.card-img-wrap.img-missing .card-img-unavailable {
    display: block;
    position: absolute;
    bottom: 8px; left: 0; right: 0;
    font-size: 9.5px; font-weight: 500;
    color: var(--muted);
    opacity: 0.55;
    text-align: center;
    letter-spacing: 0.3px;
    padding: 0 6px;
}
.card-img-wrap.card-img-jp-missing {
    background:
        radial-gradient(ellipse 80% 60% at 50% 35%,
            color-mix(in srgb, var(--surface-high) 70%, transparent), transparent),
        var(--panel);
    border-color: var(--border-bright);
    flex-direction: column; gap: 6px;
}
.card-img-wrap.card-img-jp-missing .jp-card-name {
    font-size: 11px; font-weight: 600; color: var(--muted);
    text-align: center; padding: 0 8px; line-height: 1.4;
    word-break: break-all;
}
.card-img-wrap.card-img-jp-missing .jp-card-badge { font-size: 24px; opacity: 0.6; }
.card-img-wrap.card-img-jp-missing img { display: none; }

.card-tile-name {
    font-weight: 600; font-size: 13.5px; line-height: 1.3;
    letter-spacing: 0.1px;
}
.card-tile-id {
    font-family: var(--font-mono); font-size: 10px; color: var(--muted);
    letter-spacing: 0.04em;
}
.set-name-en { font-size: 0.85em; opacity: 0.65; font-weight: 400; }
.set-name-zh {
    display: block;
    font-size: 0.78em;
    color: var(--muted);
    font-weight: 400;
    margin-top: 2px;
    line-height: 1.3;
    /* tronca se troppo lungo — le tile hanno spazio limitato */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- Chip rarità — linguaggio foil ---- */
.rarity-chip {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 9px; font-weight: 700;
    padding: 3px 9px; border-radius: var(--r-pill);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    width: fit-content;
    border: 1px solid var(--border);
}
.rarity-chip--uncommon {
    color: color-mix(in srgb, var(--text) 70%, var(--muted));
    background: color-mix(in srgb, var(--muted) 12%, transparent);
}
.rarity-chip--rare {
    color: var(--gold);
    background: color-mix(in srgb, var(--gold) 9%, transparent);
}
.rarity-chip--holo {
    color: var(--gold-bright);
    background: color-mix(in srgb, var(--gold) 12%, transparent);
    border-color: color-mix(in srgb, var(--gold) 30%, transparent);
}
.rarity-chip--ultra {
    color: transparent;
    background:
        linear-gradient(100deg, #c8b3ff, var(--gold-bright) 50%, #8fd0ff) text,
        color-mix(in srgb, var(--gold) 8%, transparent);
    -webkit-background-clip: text, border-box;
    background-clip: text, border-box;
    border-color: color-mix(in srgb, var(--gold) 30%, transparent);
}

/* ---- Bordo per tipo: tinta visibile a riposo, discreta ---- */
.card-tile[data-type] .card-img-wrap {
    border-color: var(--type-tint);
}

/* ---- Hairline per rarità (a riposo) — dopo il tipo, stessa
        specificità → override intenzionale ---- */
.card-tile[data-rarity="uncommon"] .card-img-wrap {
    border-color: color-mix(in srgb, var(--muted) 40%, var(--border));
}
.card-tile[data-rarity="rare"] .card-img-wrap {
    border-color: color-mix(in srgb, var(--gold) 45%, var(--border));
}
.card-tile[data-rarity="holo"] .card-img-wrap {
    border-color: color-mix(in srgb, var(--gold-bright) 60%, var(--border));
    box-shadow: 0 2px 10px rgba(0,0,0,0.30), 0 0 0 1px color-mix(in srgb, var(--gold) 18%, transparent);
}
.card-tile[data-rarity="ultra"] .card-img-wrap {
    animation: ultra-border 9s linear infinite;
}

/* Prisma lento e a bassa saturazione: la rarità massima respira,
   non lampeggia */
@keyframes ultra-border {
    0%   { border-color: rgba(200,179,255,0.55); }
    33%  { border-color: rgba(232,196,92,0.55); }
    66%  { border-color: rgba(143,208,255,0.55); }
    100% { border-color: rgba(200,179,255,0.55); }
}

/* ---- Shimmer dettaglio in caricamento ---- */
.detail-img-wrap.img-loading {
    background: linear-gradient(100deg,
        var(--surface) 30%,
        color-mix(in srgb, var(--iris) 8%, var(--surface)) 44%,
        color-mix(in srgb, var(--iris) 14%, var(--surface)) 50%,
        color-mix(in srgb, var(--iris) 8%, var(--surface)) 56%,
        var(--surface) 70%);
    background-size: 800px 100%;
    animation: shimmer 1.6s ease-in-out infinite;
}
.detail-img-wrap.img-loading img { opacity: 0; }

/* ---------- VISTA 3: dettaglio carta — la vetrina ---------- */
.detail {
    display: grid; grid-template-columns: minmax(220px, 360px) 1fr; gap: 44px; align-items: start;
}
.detail-img-wrap {
    border-radius: 18px; overflow: hidden;
    box-shadow: var(--card-shadow);
    position: relative;
}
.detail-img-wrap img { width: 100%; display: block; }
.detail-noimg {
    aspect-ratio: 245/342; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 16px;
    background: var(--panel); color: var(--muted); font-weight: 600;
    border-radius: 18px;
    border: 1px solid var(--border);
}
.detail-noimg .noimg-ball {
    font-size: 64px; line-height: 1; opacity: .16;
    color: var(--muted);
}
.detail-noimg .noimg-label { font-size: 14px; letter-spacing: 0.3px; }
.detail-info h2 {
    font-family: var(--font-display);
    font-size: 34px; font-weight: 600;
    font-variation-settings: "opsz" 80;
    letter-spacing: 0.005em; margin-bottom: 18px;
    line-height: 1.15;
}
.detail-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 22px; }
.detail-meta div {
    background: color-mix(in srgb, var(--surface) 90%, transparent);
    border: 1px solid var(--border);
    border-radius: var(--r-sm); padding: 11px 13px;
}
.detail-meta span {
    display: block; color: var(--muted); font-size: 9.5px; font-weight: 500;
    text-transform: uppercase; letter-spacing: .12em;
    font-family: var(--font-mono); margin-bottom: 4px;
}
.detail-meta b { font-size: 15px; font-weight: 600; }

/* La price card: l'oro vive qui */
.price-card {
    background: linear-gradient(150deg,
        color-mix(in srgb, var(--gold) 6%, var(--panel)),
        var(--panel) 55%);
    border: 1px solid color-mix(in srgb, var(--gold) 26%, var(--border));
    border-radius: var(--radius); padding: 22px;
}
.price-label { margin-bottom: 14px; }
.price-main {
    font-family: var(--font-display);
    font-size: 46px; font-weight: 700;
    font-variation-settings: "opsz" 100;
    color: var(--gold-bright);
    line-height: 1;
    font-feature-settings: "tnum";
}
[data-theme="light"] .price-main { color: var(--gold); }
.price-row { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 12px; color: var(--muted); font-weight: 500; font-size: 13px; }
.price-row b { color: var(--text); font-weight: 600; }
.price-updated { margin-top: 10px; font-size: 10.5px; color: var(--muted); font-family: var(--font-mono); letter-spacing: 0.02em; }
.price-secondary { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); color: var(--muted); font-weight: 500; font-size: 13px; }
.price-secondary b { color: var(--text); font-weight: 600; }
.not-listed { color: var(--muted); font-weight: 500; }
.spark-label { margin-top: 16px; font-size: 12px; color: var(--muted); font-weight: 500; letter-spacing: 0.2px; }
.spark { width: 100%; max-width: 240px; height: 48px; margin-top: 5px; }

.buy-links { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.affiliate-notice {
    font-size: 10px;
    color: var(--muted);
    opacity: 0.65;
    margin-top: 4px;
    text-align: center;
}
.buy-links a {
    text-decoration: none; font-weight: 600; padding: 11px 18px; border-radius: var(--r-sm);
    border: 1px solid var(--border-bright);
    background: var(--surface-high);
    color: var(--text);
    flex: 1 1 auto; text-align: center; font-size: 13.5px; letter-spacing: 0.2px;
    transition: border-color var(--dur-fast), color var(--dur-fast),
                background var(--dur-fast), transform var(--dur-fast) ease;
}
.buy-links a:active { transform: scale(0.985); }

/* ---------- SKELETON ---------- */
@keyframes shimmer {
    from { background-position: -400px 0; }
    to   { background-position:  400px 0; }
}
[data-theme="light"] .card-img-wrap.img-loading,
[data-theme="light"] .detail-img-wrap.img-loading,
[data-theme="light"] .skeleton {
    background: linear-gradient(100deg,
        var(--surface) 30%,
        color-mix(in srgb, var(--iris) 4%, var(--surface)) 44%,
        color-mix(in srgb, var(--iris) 7%, var(--surface)) 50%,
        color-mix(in srgb, var(--iris) 4%, var(--surface)) 56%,
        var(--surface) 70%);
    background-size: 800px 100%;
}

/* Sparkline draw animation */
.spark-line {
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    animation: spark-draw 0.9s ease-out forwards;
}
@keyframes spark-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
    .spark-line { animation: none; stroke-dashoffset: 0; }
}
.skeleton {
    background: linear-gradient(100deg,
        var(--surface) 30%,
        color-mix(in srgb, var(--iris) 8%, var(--surface)) 44%,
        color-mix(in srgb, var(--iris) 14%, var(--surface)) 50%,
        color-mix(in srgb, var(--iris) 8%, var(--surface)) 56%,
        var(--surface) 70%);
    background-size: 800px 100%;
    animation: shimmer 1.6s ease-in-out infinite;
    border-radius: 8px;
}
.poke-grid--skeleton .poke-tile { pointer-events: none; }
.poke-tile .sk-img  { width: 96px; height: 96px; border-radius: 50%; margin: 0 auto 6px; }
.poke-tile .sk-num  { width: 40px; height: 9px; margin: 0 auto 8px; }
.poke-tile .sk-name { width: 70%; height: 12px; margin: 0 auto; }

.card-grid--skeleton .card-tile { pointer-events: none; }
.card-tile .sk-card { aspect-ratio: 245/342; border-radius: 12px; width: 100%; }
.card-tile .sk-cname { width: 80%; height: 11px; margin: 6px 0 3px; }
.card-tile .sk-cid   { width: 50%; height: 9px; }

/* badge trend prezzo */
.price-badge {
    display: inline-block; padding: 3px 10px; border-radius: var(--r-pill);
    font-size: 11.5px; font-weight: 700; margin-left: 10px; vertical-align: middle;
    font-family: var(--font-mono);
}
.price-badge.up   { background: color-mix(in srgb, var(--up)   16%, transparent); color: var(--up); }
.price-badge.down { background: color-mix(in srgb, var(--down) 16%, transparent); color: var(--down); }
.price-badge.flat { background: color-mix(in srgb, var(--muted) 14%, transparent); color: var(--muted); }
[data-theme="light"] .price-badge.up   { color: #1d8a56; }
[data-theme="light"] .price-badge.down { color: #c0353c; }

/* storico prezzi */
.price-history-row {
    display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px;
    padding-top: 10px; border-top: 1px solid var(--border);
}
.price-history-row .ph-item { text-align: center; }
.price-history-row .ph-label {
    font-size: 9.5px; color: var(--muted); font-weight: 500;
    font-family: var(--font-mono); display: block; letter-spacing: 0.08em;
    text-transform: uppercase;
}
.price-history-row .ph-val { font-size: 15px; font-weight: 600; font-feature-settings: "tnum"; }

/* ---------- STATO VUOTO ---------- */
.empty-state { text-align: center; padding: 72px 20px; }
.empty-state .empty-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 88px; height: 88px; border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--border);
    font-size: 38px; line-height: 1;
    margin-bottom: 22px;
}
.empty-state h3 {
    font-family: var(--font-display);
    font-size: 22px; font-weight: 600;
    font-variation-settings: "opsz" 50;
    margin-bottom: 10px; color: var(--text); letter-spacing: 0.01em;
}
.empty-state p { color: var(--muted); font-weight: 400; max-width: 380px; margin: 0 auto; font-size: 14px; line-height: 1.6; }
.empty-state .empty-action-btn {
    display: inline-flex; align-items: center; justify-content: center;
    margin-top: 22px; padding: 10px 22px; min-height: 42px;
    border: 1px solid var(--border-bright); border-radius: var(--r-sm);
    background: var(--surface-high);
    color: var(--text); font-family: var(--body);
    font-size: 13px; font-weight: 600; letter-spacing: 0.2px;
    text-decoration: none; cursor: pointer;
    transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast);
}
.empty-state .empty-action-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) {
    .empty-state .empty-action-btn:hover { border-color: var(--accent); color: var(--accent); }
}
.ja-limitless-link { display: inline-block; margin-top: 16px; color: var(--accent); font-weight: 600; font-size: 14px; text-decoration: none; }
.ja-limitless-link:hover { text-decoration: underline; color: var(--iris); }

/* ---------- LOADING ---------- */
.loading {
    display: flex; flex-direction: column; align-items: center; gap: 18px;
    padding: 80px 0; color: var(--muted); font-weight: 500;
}
.ball-spin {
    width: 44px; height: 44px; border-radius: 50%;
    background: conic-gradient(from 90deg, var(--accent) 0 50%, #f4f2ec 50% 100%);
    border: 3px solid rgba(0,0,0,0.4); position: relative; animation: spin 1s linear infinite;
}
[data-theme="light"] .ball-spin { border-color: rgba(25,27,40,0.55); }
.ball-spin::after {
    content: ""; position: absolute; inset: 0; margin: auto;
    width: 12px; height: 12px; background: #fff;
    border: 3px solid rgba(0,0,0,0.4); border-radius: 50%;
}
.empty { text-align: center; color: var(--muted); font-weight: 500; padding: 60px 0; }

/* ---------- FOOTER ---------- */
footer {
    max-width: 1200px; margin: 0 auto; padding: 26px 24px 44px;
    border-top: 1px solid var(--border);
}
footer p { color: var(--muted); font-size: 12.5px; line-height: 1.6; }
.footer-legal { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 14px; }
.footer-legal a {
    color: var(--muted); font-size: 12.5px; font-weight: 500; text-decoration: none;
    letter-spacing: 0.2px;
    transition: color var(--dur-fast);
}
.footer-ip { font-size: 11px; color: var(--muted); margin-top: 10px; line-height: 1.65; opacity: .55; }

/* ---------- COOKIE BANNER ---------- */
.cookie-banner {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 999;
    background: color-mix(in srgb, var(--panel) 96%, transparent);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--border-bright);
    box-shadow: 0 -4px 24px rgba(0,0,0,.25);
}
.cookie-banner-inner {
    max-width: 1200px; margin: 0 auto; padding: 14px 24px;
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.cookie-banner-inner p { font-size: 13px; color: var(--muted); flex: 1 1 300px; line-height: 1.5; }
.cookie-actions { display: flex; gap: 10px; }
.cookie-btn {
    padding: 9px 20px; border-radius: var(--r-sm); font-family: var(--body);
    font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid var(--border-bright);
    background: var(--surface-high); color: var(--text);
    transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast);
}
.cookie-btn--accept {
    background: var(--accent);
    border-color: var(--accent); color: #fff;
}
.cookie-btn--accept:hover { background: var(--accent-deep); }

/* ---------- AD SLOT ---------- */
.ad-slot { min-height: 90px; margin-top: 24px; border-radius: var(--radius); border: 1px dashed var(--border); }

/* ---------- PAGINE LEGALI ---------- */
.legal-page { max-width: 720px; margin: 0 auto; }
.legal-page h2 {
    font-family: var(--font-display);
    font-size: 26px; font-weight: 600; margin-bottom: 20px;
    font-variation-settings: "opsz" 50;
    letter-spacing: 0.01em;
}
.legal-page h3 { font-size: 14px; font-weight: 700; margin: 24px 0 8px; letter-spacing: 0.3px; }
.legal-page p  { color: var(--muted); line-height: 1.75; margin-bottom: 12px; font-size: 14px; }
.legal-page ul { color: var(--muted); line-height: 1.75; margin-bottom: 12px; padding-left: 22px; }
.legal-page li { margin-bottom: 4px; }
.legal-page a  { color: var(--accent); }
.legal-updated { font-size: 11px !important; opacity: .65; margin-bottom: 20px !important; font-family: var(--font-mono); }
.legal-lang-toggle { display: flex; gap: 10px; margin-bottom: 24px; }
.legal-lang-toggle button {
    padding: 6px 14px; border-radius: var(--r-pill); border: 1px solid var(--border);
    background: var(--surface); color: var(--muted); font-size: 11.5px; font-weight: 600;
    cursor: pointer; transition: background var(--dur-fast), color var(--dur-fast);
    letter-spacing: 0.3px; font-family: var(--font-mono);
}
.legal-lang-toggle button.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ---------- 404 ---------- */
.not-found { text-align: center; padding: 80px 20px; }
.not-found .empty-icon { font-size: 56px; margin-bottom: 20px; }
.not-found h3 {
    font-family: var(--font-display); font-size: 24px;
    font-weight: 600; margin-bottom: 12px;
    font-variation-settings: "opsz" 50;
}
.not-found p { color: var(--muted); font-weight: 500; margin-bottom: 24px; }
.not-found a { color: var(--accent); font-weight: 600; text-decoration: none; }

/* ---------- SHARE BTN ---------- */
.share-btn {
    display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px;
    border-radius: var(--r-sm); border: 1px solid var(--border-bright); background: var(--surface-high);
    color: var(--text); font-family: var(--body); font-size: 14px; font-weight: 600;
    cursor: pointer; transition: border-color var(--dur-fast), color var(--dur-fast);
    letter-spacing: 0.2px;
}

/* ---------- ANIMAZIONI CORE ---------- */
@keyframes spin { to { transform: rotate(360deg); } }

@keyframes reveal {
    from { opacity: 0; transform: translateY(16px) scale(0.97); }
    to   { opacity: 1; transform: none; }
}
@keyframes pop {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}
@keyframes floatIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: none; }
}

/* ---------- ATTACCHI ---------- */
.attacks-card {
    background: color-mix(in srgb, var(--surface) 90%, transparent);
    border: 1px solid var(--border);
    border-radius: var(--radius); padding: 16px 17px; margin-bottom: 14px;
}
.attacks-label { margin-bottom: 12px; }
.attack-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    align-items: center; gap: 4px 10px;
    padding: 10px 0;
    border-top: 1px solid var(--border);
}
.attack-row:first-of-type { border-top: 0; padding-top: 0; }
.attack-cost { display: flex; gap: 4px; flex-wrap: wrap; }
.energy-dot {
    display: inline-block; width: 14px; height: 14px; border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.25), 0 1px 3px rgba(0,0,0,.35);
    flex-shrink: 0;
}
.attack-name { font-weight: 600; font-size: 14px; letter-spacing: 0.1px; }
.attack-dmg  {
    font-weight: 700; font-size: 16px; color: var(--accent); text-align: right;
    font-family: var(--font-mono); font-feature-settings: "tnum";
}
.attack-desc {
    grid-column: 1 / -1; font-size: 12.5px; color: var(--muted);
    margin-top: 2px; line-height: 1.6;
}

/* ---------- DEBOLEZZE / RESISTENZE ---------- */
.wr-row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.wr-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wr-label {
    font-size: 9.5px; font-weight: 500; color: var(--muted);
    text-transform: uppercase; letter-spacing: .12em;
    font-family: var(--font-mono);
}
.wr-badge {
    display: inline-block; padding: 3px 10px; border-radius: var(--r-pill);
    font-size: 12px; font-weight: 700; color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.wr-badge.wr-res {
    background: transparent !important;
    border: 2px solid;
    text-shadow: none;
}

.not-listed-hint { font-size: 12px; color: var(--muted); margin-top: 6px; }

/* ---------- TYPE BADGES ---------- */
.type-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.type-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 12px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: 700;
    color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.35);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
    letter-spacing: 0.2px;
}

/* HP chip */
.detail-hp {
    display: inline-block; font-family: var(--font-mono); font-size: 11px;
    font-weight: 700;
    padding: 4px 10px; border-radius: var(--r-pill);
    background: color-mix(in srgb, var(--accent) 10%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
    color: var(--accent); margin-left: 12px; vertical-align: middle;
    letter-spacing: 0.04em;
}

/* ---------- TRAINER HUB ---------- */
.trainer-hub-grid {
    display: grid; gap: 14px; margin-top: 8px;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
}
.trainer-cat-tile {
    --cat-color: var(--accent);
    background: color-mix(in srgb, var(--cat-color) 5%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--cat-color) 20%, var(--border));
    border-radius: var(--radius); padding: 28px 16px 22px;
    text-align: center; text-decoration: none; color: var(--text);
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    transition: transform var(--dur-med) var(--ease-out),
                box-shadow var(--dur-med) var(--ease-out),
                border-color var(--dur-fast);
    animation: reveal .42s var(--ease-out) both;
}
.cat-emoji { font-size: 38px; line-height: 1; color: var(--cat-color); }
.cat-name {
    font-family: var(--font-mono); font-size: 11px; font-weight: 700;
    text-transform: uppercase;
    color: var(--cat-color); letter-spacing: 0.08em; line-height: 1.5;
}
.cat-count {
    font-size: 11.5px; color: var(--muted); font-weight: 500;
    min-width: 64px; height: 18px; border-radius: 4px; display: block;
    font-family: var(--font-mono);
}

/* ============================================================
   COLLECTION TRACKER
   ============================================================ */
.card-tile.card-owned .card-img-wrap {
    border-color: var(--up);
    box-shadow: 0 2px 10px rgba(0,0,0,0.30), 0 0 0 1px color-mix(in srgb, var(--up) 35%, transparent);
}
/* Badge ✓/×N: spostato in alto a sinistra (a destra vivono cuore e anteprima) */
.card-owned-badge {
    position: absolute; top: 6px; left: 6px; z-index: 4;
    background: var(--up); color: #06281a;
    width: 22px; height: 22px; border-radius: 50%;
    font-size: 11px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.4);
    pointer-events: none;
}
/* display:flex sopra vincerebbe sull'attributo hidden (UA stylesheet):
   senza questa regola il badge resta visibile anche su carte non possedute */
.card-owned-badge[hidden] { display: none; }
/* Cuore collezione — circolare, sull'immagine (stessa logica toggleOwned) */
.btn-collect {
    position: absolute; top: 6px; right: 6px; z-index: 5;
    width: 32px; height: 32px; padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.16);
    background: rgba(8,9,14,0.62);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    color: rgba(255,255,255,0.78);
    font-family: var(--body); font-size: 15px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: transform var(--dur-med) var(--ease-spring),
                color var(--dur-fast), background var(--dur-fast), border-color var(--dur-fast);
}
.btn-collect:focus-visible { border-color: var(--up); color: var(--up); outline: 2px solid var(--up); }
.btn-collect--owned {
    color: var(--up);
    background: color-mix(in srgb, var(--up) 20%, rgba(8,9,14,0.62));
    border-color: color-mix(in srgb, var(--up) 55%, transparent);
}
@keyframes fav-pop { 40% { transform: scale(1.45); } }
.btn-collect--pop { animation: fav-pop .45s var(--ease-spring); }

/* Anteprima rapida (quick-view) — sotto il cuore */
.btn-quickview {
    position: absolute; top: 44px; right: 6px; z-index: 5;
    width: 32px; height: 32px; padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.16);
    background: rgba(8,9,14,0.62);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    color: rgba(255,255,255,0.78);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: transform var(--dur-med) var(--ease-spring),
                color var(--dur-fast), border-color var(--dur-fast);
}
.btn-quickview:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-quickview svg { display: block; }
.btn-collect-detail {
    display: block; width: 100%; margin: 14px 0;
    padding: 13px 20px; border-radius: var(--r-sm);
    border: 1px solid var(--border-bright); background: var(--surface-high); color: var(--text);
    font-family: var(--body); font-size: 14.5px; font-weight: 600;
    cursor: pointer; text-align: center; letter-spacing: 0.2px;
    transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast);
}
.btn-collect-detail:focus-visible { border-color: var(--up); color: var(--up); outline: 2px solid var(--up); }
.btn-collect-detail--owned {
    background: color-mix(in srgb, var(--up) 9%, transparent);
    border-color: color-mix(in srgb, var(--up) 55%, transparent); color: var(--up);
}
[data-theme="light"] .btn-collect-detail--owned { color: #1d8a56; }

/* ============================================================
   SETS HUB + SET DETAIL
   ============================================================ */
/* Riga chip illustratori: appare digitando un nome nella ricerca set */
.illus-row {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    margin-bottom: 16px;
    animation: floatIn .3s var(--ease-out) both;
}
.illus-row-label {
    font-family: var(--font-mono);
    font-size: 10px; font-weight: 500;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--muted);
    margin-right: 4px;
}
.illus-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 13px;
    border-radius: var(--r-pill);
    border: 1px solid var(--border-bright);
    background: color-mix(in srgb, var(--surface) 90%, transparent);
    color: var(--text); text-decoration: none;
    font-size: 12.5px; font-weight: 600;
    transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease,
                background var(--dur-fast) ease;
}
.illus-chip:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}
.illus-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.sets-grid {
    display: grid; gap: 13px;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.set-tile {
    position: relative;
    background: color-mix(in srgb, var(--surface) 90%, transparent);
    border: 1px solid var(--border); border-radius: var(--radius);
    text-decoration: none; color: var(--text);
    display: flex; flex-direction: column;
    overflow: hidden;
    animation: reveal .4s var(--ease-out) both;
    transition: box-shadow var(--dur-med) var(--ease-out),
                border-color var(--dur-fast),
                transform var(--dur-med) var(--ease-out);
    cursor: pointer;
}
.set-tile-logo {
    position: relative;
    background:
        radial-gradient(ellipse 90% 80% at 50% 40%,
            color-mix(in srgb, var(--surface-high) 80%, transparent), transparent),
        var(--panel);
    display: flex; align-items: center; justify-content: center;
    padding: 20px 18px;
    min-height: 108px;
    border-bottom: 1px solid var(--border);
    overflow: hidden;
}
.set-tile-logo img { max-width: 88%; max-height: 72px; object-fit: contain; transition: transform .3s var(--ease-out), filter .3s; }
.set-tile:hover .set-tile-logo img { transform: scale(1.04); }
.set-tile-logo.no-logo:not(:has(.set-tile-jp-badge)):not(:has(.set-tile-zh-ph))::before {
    content: "🃏"; font-size: 34px; opacity: .18;
}
.set-tile-jp-badge { font-size: 34px; opacity: 0.7; }
.set-tile-info {
    padding: 11px 13px 13px;
    display: flex; flex-direction: column; gap: 2px; flex: 1;
}
.set-tile-name { font-weight: 600; font-size: 12.5px; line-height: 1.4; }
.set-tile-meta { font-size: 10.5px; color: var(--muted); font-weight: 500; margin-bottom: 2px; font-family: var(--font-mono); }
.set-tile-count { font-size: 10.5px; color: var(--muted); font-weight: 600; margin-top: 4px; font-family: var(--font-mono); }
.set-tile-count--full { color: var(--up); }

/* zh-cn SC logo — mix-blend-mode elimina sfondo bianco PNG Bulbagarden */
.set-tile-logo img.zh-sc-logo {
    max-height: 80px;
    max-width: 90%;
    mix-blend-mode: lighten;
    filter: drop-shadow(0 3px 12px rgba(0,0,0,.6));
}
.set-tile-logo:has(.zh-sc-logo) {
    background:
        radial-gradient(120% 120% at 50% 0%,
            rgba(123,140,240,.08), transparent 65%),
        var(--surface, #11152a);
    padding: 12px;
}

/* Placeholder tipografico zh-cn */
.set-tile-zh-ph {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background:
        repeating-linear-gradient(
            135deg,
            transparent 0 10px,
            color-mix(in srgb, var(--ph-acc, var(--iris)) 7%, transparent) 10px 11px
        ),
        radial-gradient(
            ellipse 100% 90% at 50% 0%,
            color-mix(in srgb, var(--ph-acc, var(--iris)) 12%, transparent),
            transparent 70%
        );
}
.set-tile-zh-ph-code {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(14px, 3vw, 20px);
    color: var(--ph-acc, var(--iris));
    letter-spacing: .02em;
    text-shadow: 0 2px 14px rgba(0,0,0,.8);
    line-height: 1;
}
.set-tile-zh-ph-cn {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(255,255,255,.3);
}

.completion-bar {
    height: 4px; background: color-mix(in srgb, var(--border-bright) 80%, transparent);
    border-radius: var(--r-pill); overflow: hidden; margin-top: 6px; width: 100%;
}
.completion-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--gold), var(--gold-bright));
    border-radius: var(--r-pill); transition: width .5s var(--ease-out);
}
.completion-bar-fill--full { background: linear-gradient(90deg, var(--up), #7ce8b5); }
.completion-label { font-size: 10.5px; color: var(--muted); font-weight: 600; margin-top: 3px; display: block; font-family: var(--font-mono); }
.completion-label--full { color: var(--up); }

.set-completion-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 0 4px; width: 100%;
}
.set-completion-row .completion-bar { flex: 1; margin-top: 0; }
.set-completion-row .completion-label { margin-top: 0; white-space: nowrap; flex-shrink: 0; }

.set-detail-date { font-size: 13px; color: var(--muted); font-weight: 500; }

.sets-ja-note {
    font-size: 12px; color: var(--muted); font-weight: 500;
    margin: 4px 0 8px; padding: 7px 12px;
    background: color-mix(in srgb, var(--surface) 90%, transparent);
    border: 1px solid var(--border); border-radius: var(--r-xs);
    line-height: 1.5;
}

/* ============================================================
   PORTFOLIO
   ============================================================ */
.portfolio-empty { text-align: center; padding: 80px 20px; }
.portfolio-empty .empty-icon { font-size: 56px; margin-bottom: 20px; }
.portfolio-empty h3 {
    font-family: var(--font-display); font-size: 24px;
    font-weight: 600; margin-bottom: 12px; color: var(--text);
    font-variation-settings: "opsz" 50;
    letter-spacing: 0.01em;
}
.portfolio-empty p  { color: var(--muted); font-weight: 400; max-width: 380px; margin: 0 auto 24px; line-height: 1.6; }
.portfolio-empty a  {
    display: inline-block; padding: 12px 26px; border-radius: var(--r-sm);
    background: var(--accent);
    color: #fff; font-weight: 600; text-decoration: none; font-size: 14px; letter-spacing: 0.3px;
    transition: background var(--dur-fast), transform var(--dur-fast) ease;
}
.portfolio-empty a:hover { background: var(--accent-deep); }
.portfolio-empty a:active { transform: scale(0.985); }

.portfolio-section { margin-bottom: 36px; }
.portfolio-section-title { margin-bottom: 14px; }
.portfolio-value-card {
    background: linear-gradient(150deg,
        color-mix(in srgb, var(--gold) 6%, var(--panel)),
        var(--panel) 55%);
    border: 1px solid color-mix(in srgb, var(--gold) 22%, var(--border));
    border-radius: var(--radius); padding: 26px;
    display: flex; flex-direction: column; gap: 8px;
}
.portfolio-value-main {
    font-family: var(--font-display);
    font-size: 46px; font-weight: 700; color: var(--gold-bright);
    font-variation-settings: "opsz" 100;
    line-height: 1;
    font-feature-settings: "tnum";
}
[data-theme="light"] .portfolio-value-main { color: var(--gold); }
.portfolio-calc { color: var(--muted); font-weight: 400; font-size: 13px; }
.portfolio-stats-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 11px;
}
.portfolio-stat-card {
    background: color-mix(in srgb, var(--surface) 90%, transparent);
    border: 1px solid var(--border);
    border-radius: var(--r-sm); padding: 16px;
    text-align: center; font-weight: 600; font-size: 17px;
    font-family: var(--font-display);
    font-variation-settings: "opsz" 30;
}
.portfolio-stat-card span {
    display: block; font-size: 9.5px; color: var(--muted); font-weight: 500; margin-top: 6px;
    font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em;
}
.portfolio-top5 { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); }
.portfolio-sparkline { width: 100%; max-width: 300px; height: 60px; }
.portfolio-history-hint { color: var(--muted); font-weight: 500; font-size: 13px; margin-top: 8px; }
.portfolio-backup { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.portfolio-backup-btn {
    padding: 10px 20px; border-radius: var(--r-sm); border: 1px solid var(--border-bright);
    background: var(--surface-high); color: var(--text); font-family: var(--body);
    font-size: 13px; font-weight: 600; cursor: pointer;
    transition: border-color var(--dur-fast), color var(--dur-fast);
    letter-spacing: 0.2px;
}
.portfolio-backup-note { font-size: 12px; color: var(--muted); font-weight: 500; }
.portfolio-import-done { color: var(--up); font-weight: 600; font-size: 13px; }

/* Badge nav */
.portfolio-badge {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--accent); color: #fff;
    font-family: var(--font-mono); font-size: 9px; font-weight: 700;
    min-width: 16px; height: 16px; border-radius: var(--r-pill);
    padding: 0 4px; margin-left: 5px; vertical-align: middle;
}
/* inline-flex sopra vincerebbe sull'attributo hidden (stesso caso del
   card-owned-badge): senza questa regola il badge "0" resta visibile */
.portfolio-badge[hidden] { display: none; }
.nav-tab.active .portfolio-badge { background: #fff; color: var(--accent); }

/* ============================================================
   SORT PRICE / DISCOVERY — price-fetch-indicator
   ============================================================ */
.price-fetch-indicator {
    font-size: 11px; color: var(--muted); font-weight: 500;
    padding: 4px 10px; border-radius: var(--r-pill);
    background: color-mix(in srgb, var(--muted) 9%, var(--surface));
    font-family: var(--font-mono);
}

/* ============================================================
   CARD OF THE DAY — strip compatta, chiudibile per il giorno.
   Lo slot è montato in modo sincrono dalla home con altezza
   riservata: il fill asincrono non sposta la griglia.
   ============================================================ */
.cod-slot { margin-bottom: 16px; border-radius: var(--r-md); }
.cod-slot--pending { min-height: 80px; }

.cod-strip {
    position: relative;
    display: flex; align-items: center; gap: 14px;
    padding: 10px 14px;
    border-radius: var(--r-md);
    border: 1px solid transparent;
    background: linear-gradient(120deg,
        color-mix(in srgb, var(--gold) 6%, var(--panel)),
        var(--panel) 65%);
    animation: floatIn .4s var(--ease-out) both;
    transition: border-color var(--dur-fast) ease;
}
.cod-strip::before {
    content: '';
    position: absolute; inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(from 0deg, var(--gold) 0%, var(--iris) 35%, var(--gold) 70%, var(--gold-bright) 85%, var(--gold) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}
.cod-strip:hover { border-color: transparent; }

/* Link stretched: copre l'intera strip, sotto il bottone di chiusura */
.cod-strip-link { position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
.cod-strip-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.cod-strip-thumb {
    flex: 0 0 auto; width: 42px; height: 58px;
    border-radius: 4px; overflow: hidden;
    background: color-mix(in srgb, var(--muted) 12%, var(--surface));
}
.cod-strip-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cod-strip-info { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.cod-strip .card-of-day-label { margin: 0; }
.card-of-day-label { color: var(--gold); }
.card-of-day-label::before { background: var(--gold); }

.cod-strip-name {
    font-family: var(--font-display);
    font-size: clamp(16px, 2.6vw, 20px);
    font-weight: 600;
    font-variation-settings: "opsz" 40;
    line-height: 1.15;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cod-strip-set { font-family: var(--body); font-size: 12px; color: var(--muted); font-weight: 500; }

.cod-strip-price {
    flex: 0 0 auto;
    font-family: var(--font-display);
    font-size: 18px; font-weight: 700;
    font-variation-settings: "opsz" 60;
    font-feature-settings: "tnum";
    color: var(--gold-bright);
}
[data-theme="light"] .cod-strip-price { color: var(--gold); }

.cod-strip-arrow {
    flex: 0 0 auto; color: var(--muted); font-size: 15px;
    transition: transform var(--dur-fast) ease, color var(--dur-fast) ease;
}
.cod-strip:hover .cod-strip-arrow { transform: translateX(3px); color: var(--gold-bright); }

.cod-strip-close {
    position: relative; z-index: 2;
    flex: 0 0 auto;
    width: 28px; height: 28px;
    display: grid; place-items: center;
    border-radius: 50%;
    border: 1px solid transparent;
    background: none; color: var(--muted);
    font-size: 12px; line-height: 1; cursor: pointer;
    transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.cod-strip-close:hover { color: var(--text); border-color: var(--border-bright); }
.cod-strip-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 560px) {
    .cod-strip { gap: 10px; padding: 9px 10px; }
    .cod-strip-set, .cod-strip-arrow { display: none; }
    .cod-strip-price { font-size: 15px; }
}

/* ============================================================
   BACK TO TOP — appare dopo lo scroll, sopra la bottom-nav mobile
   ============================================================ */
#backToTop {
    position: fixed; right: 18px; bottom: 22px; z-index: 90;
    width: 42px; height: 42px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--bg) 90%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--border-bright);
    color: var(--muted); font-size: 17px; line-height: 1; cursor: pointer;
    opacity: 0; transform: translateY(10px); pointer-events: none;
    transition: opacity var(--dur-med) var(--ease-out),
                transform var(--dur-med) var(--ease-out),
                color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
#backToTop.visible { opacity: 1; transform: none; pointer-events: auto; }
#backToTop:hover { color: var(--accent); border-color: var(--accent); }
#backToTop:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 720px) {
    #backToTop { right: 14px; bottom: calc(68px + env(safe-area-inset-bottom)); }
}

/* CTA condivise hero/quick-view — oro = commercio/valore, ghost = resto */
.cta-gold {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 11px 20px; border-radius: var(--r-sm);
    background: linear-gradient(135deg, var(--gold-bright), var(--gold));
    color: #1a1404; border: 0;
    font-family: var(--body); font-size: 13px; font-weight: 700; letter-spacing: 0.2px;
    text-decoration: none; cursor: pointer;
    box-shadow: 0 8px 28px color-mix(in srgb, var(--gold) 32%, transparent);
    transition: transform var(--dur-fast) ease, box-shadow var(--dur-med) var(--ease-out);
}
.cta-gold:active { transform: scale(0.97); }
.cta-ghost {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 11px 18px; border-radius: var(--r-sm);
    background: var(--surface-high); color: var(--text);
    border: 1px solid var(--border-bright);
    font-family: var(--body); font-size: 13px; font-weight: 600; letter-spacing: 0.2px;
    text-decoration: none; cursor: pointer;
    transition: border-color var(--dur-fast), color var(--dur-fast),
                background var(--dur-fast), transform var(--dur-fast) ease;
}
.cta-ghost:active { transform: scale(0.97); }

.related-section { margin-top: 36px; }
.related-section-title { margin-bottom: 12px; }
.related-cards-scroll {
    display: flex; gap: 12px; overflow-x: auto;
    padding-bottom: 8px; scrollbar-width: thin;
}
.related-cards-scroll .card-tile { min-width: 130px; max-width: 150px; flex-shrink: 0; }

/* ============================================================
   ONBOARDING
   ============================================================ */
.onboarding-overlay {
    position: fixed; inset: 0; z-index: 9000;
    background: rgba(4,5,9,.6); backdrop-filter: blur(3px);
}
.onboarding-spotlight {
    position: absolute; border-radius: 10px;
    box-shadow: 0 0 0 9999px rgba(4,5,9,.6);
    pointer-events: none; transition: all .3s;
}
.onboarding-tooltip {
    position: absolute; z-index: 9001;
    background: var(--glass-panel); border: 1px solid var(--border-bright);
    backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    border-radius: var(--radius); padding: 18px 20px;
    max-width: 280px; box-shadow: var(--shadow);
    animation: reveal .25s both;
}
[data-theme="light"] .onboarding-tooltip { background: color-mix(in srgb, var(--panel) 88%, transparent); }
.onboarding-tooltip p { font-weight: 500; font-size: 14px; margin-bottom: 14px; line-height: 1.6; }
.onboarding-tooltip-actions { display: flex; gap: 8px; justify-content: space-between; }
.onboarding-btn-next {
    padding: 9px 18px; border-radius: var(--r-sm);
    background: var(--accent);
    color: #fff; border: 0; font-family: var(--body); font-size: 13px; font-weight: 600;
    cursor: pointer; letter-spacing: 0.2px;
    transition: background var(--dur-fast);
}
.onboarding-btn-next:hover { background: var(--accent-deep); }
.onboarding-btn-skip {
    padding: 9px 12px; border-radius: var(--r-sm);
    background: transparent; color: var(--muted);
    border: 1px solid var(--border); font-family: var(--body); font-size: 13px; font-weight: 600;
    cursor: pointer; transition: color var(--dur-fast), border-color var(--dur-fast);
}

/* ============================================================
   QUICK-VIEW SHEET — bottom-sheet mobile / dialog ≥760px
   Overlay singleton su <body> (fuori da #app: niente router,
   niente view-cache). z-index sotto il lightbox (9500).
   ============================================================ */
.sheet-backdrop {
    position: fixed; inset: 0; z-index: 9400;
    background: rgba(4,5,9,.6);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    opacity: 0; pointer-events: none;
    transition: opacity .3s ease;
}
.sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 9401;
    background: var(--glass-panel);
    backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-bright); border-bottom: 0;
    border-radius: 20px 20px 0 0;
    padding: 14px 20px max(22px, env(safe-area-inset-bottom));
    transform: translateY(104%);
    transition: transform .45s var(--ease-out);
    max-height: 88vh;
    max-height: 88dvh;
    overflow-y: auto;
}
body.sheet-open { overflow: hidden; }
body.sheet-open .sheet { transform: translateY(0); }
body.sheet-open .sheet-backdrop { opacity: 1; pointer-events: auto; }
.sheet-grab {
    width: 42px; height: 4px; border-radius: var(--r-pill);
    background: var(--border-bright); margin: 0 auto 16px;
}
.sheet-close {
    position: absolute; top: 14px; right: 14px; z-index: 2;
    width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid var(--border-bright); background: var(--surface);
    color: var(--muted); cursor: pointer; font-size: 15px;
    display: flex; align-items: center; justify-content: center;
    transition: color var(--dur-fast), border-color var(--dur-fast);
}
.sheet-body { display: grid; gap: 22px; max-width: 720px; margin: 0 auto; }
.sheet-card-stage {
    perspective: 900px;
    width: min(56vw, 220px); margin: 0 auto;
    filter: drop-shadow(0 18px 36px rgba(0,0,0,0.45));
}
[data-theme="light"] .sheet-card-stage { filter: drop-shadow(0 14px 28px rgba(25,27,40,0.20)); }
[data-theme="light"] .sheet { background: color-mix(in srgb, var(--panel) 88%, transparent); }
.sheet-card { border-radius: 12px; }

.sheet-info h3.sheet-name,
.sheet-name {
    font-family: var(--font-display);
    font-size: 28px; font-weight: 600;
    font-variation-settings: "opsz" 60;
    line-height: 1.1; margin-bottom: 4px;
    letter-spacing: 0.005em;
}
.sheet-set {
    color: var(--muted); font-size: 13px; font-weight: 500;
    margin-bottom: 18px; font-family: var(--font-mono);
}
.price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 18px; }
.price-cell {
    background: color-mix(in srgb, var(--surface) 90%, transparent);
    border: 1px solid var(--border);
    border-radius: var(--r-sm); padding: 11px 13px;
}
.price-cell span {
    display: block; font-family: var(--font-mono);
    font-size: 9px; font-weight: 500;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--muted); margin-bottom: 4px;
}
.price-cell b {
    font-family: var(--font-display); font-size: 20px; font-weight: 700;
    font-variation-settings: "opsz" 50;
    font-feature-settings: "tnum";
}
.price-cell--main {
    grid-column: 1 / -1;
    border-color: color-mix(in srgb, var(--gold) 38%, var(--border));
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--gold) 8%, var(--surface)),
        color-mix(in srgb, var(--surface) 90%, transparent));
}
.price-cell--main b { font-size: 28px; color: var(--gold-bright); }
[data-theme="light"] .price-cell--main b { color: var(--gold); }
.sheet-actions { display: flex; gap: 10px; flex-wrap: wrap; }

@media (min-width: 760px) {
    .sheet {
        left: 50%; right: auto; bottom: auto; top: 50%;
        width: min(760px, 94vw);
        transform: translate(-50%, -46%) scale(0.97);
        opacity: 0; pointer-events: none;
        border-radius: var(--r-lg);
        border-bottom: 1px solid var(--border-bright);
        transition: transform .4s var(--ease-out), opacity .25s ease;
        max-height: 86vh;
        padding: 26px 28px;
    }
    body.sheet-open .sheet {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1; pointer-events: auto;
    }
    .sheet-grab { display: none; }
    .sheet-body { grid-template-columns: 230px 1fr; align-items: start; gap: 30px; }
    .sheet-card-stage { width: 100%; }
}

/* Lightbox */
.lightbox-overlay {
    position: fixed; inset: 0; z-index: 9500;
    background: rgba(3,4,8,.93);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center;
    cursor: zoom-out; animation: reveal .2s both;
}
.lightbox-img {
    max-width: min(90vw, 440px); max-height: 90vh;
    object-fit: contain; border-radius: 18px;
    box-shadow: 0 24px 80px rgba(0,0,0,.8);
    cursor: default; animation: reveal .22s .05s both;
    pointer-events: none;
}
.lightbox-close {
    position: absolute; top: 20px; right: 20px;
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,0.15); color: #fff;
    width: 44px; height: 44px; border-radius: 50%;
    font-size: 18px; font-weight: 700; cursor: pointer;
    transition: background var(--dur-fast); display: flex; align-items: center; justify-content: center;
}
.lightbox-close:hover { background: rgba(255,255,255,.22); }

/* Viste recenti */
.recently-viewed { margin-bottom: 22px; }
.recently-viewed-title { margin-bottom: 10px; }
.recently-viewed-scroll {
    display: flex; gap: 10px; overflow-x: auto;
    padding-bottom: 6px; scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}
.recently-viewed-scroll::-webkit-scrollbar { height: 3px; }
.recently-viewed-scroll::-webkit-scrollbar-thumb { background: var(--border-bright); border-radius: 4px; }
.recently-viewed-scroll .card-tile { min-width: 120px; max-width: 140px; flex-shrink: 0; }

/* ============================================================
   PORTFOLIO PROFONDO
   ============================================================ */
.card-meta-form {
    background: color-mix(in srgb, var(--surface) 90%, transparent);
    border: 1px solid var(--border);
    border-radius: var(--radius); padding: 16px 17px; margin: 10px 0;
}
.meta-form-title { margin-bottom: 12px; }
.meta-fields { display: flex; flex-direction: column; gap: 10px; }
.meta-field { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.meta-field span { font-size: 12px; color: var(--muted); font-weight: 500; flex-shrink: 0; }
.meta-select {
    border: 1px solid var(--border); background: var(--surface-high); color: var(--text);
    font-family: var(--body); font-size: 12px; font-weight: 600;
    padding: 6px 8px; border-radius: var(--r-xs); outline: none; cursor: pointer;
    flex: 1; min-width: 0; transition: border-color var(--dur-fast);
}
.meta-select:focus { border-color: var(--accent); }
[data-theme="dark"]  .meta-select { color-scheme: dark; }
[data-theme="light"] .meta-select { color-scheme: light; }

.qty-control {
    display: flex; align-items: center; gap: 8px;
    background: var(--surface-high); border: 1px solid var(--border);
    border-radius: var(--r-xs); padding: 3px 4px;
}
.qty-btn {
    width: 26px; height: 26px; border: 0; background: transparent; color: var(--text);
    font-size: 16px; font-weight: 700; cursor: pointer; border-radius: 5px;
    display: flex; align-items: center; justify-content: center;
    transition: background var(--dur-fast);
}
.qty-btn:hover { background: var(--border-bright); }
.qty-val { font-size: 14px; font-weight: 700; min-width: 24px; text-align: center; font-family: var(--font-mono); }

.meta-cost-input {
    border: 1px solid var(--border); background: var(--surface-high); color: var(--text);
    font-family: var(--body); font-size: 13px; font-weight: 600;
    padding: 6px 8px; border-radius: var(--r-xs); outline: none; width: 90px;
    transition: border-color var(--dur-fast);
}
.meta-cost-input:focus { border-color: var(--accent); }

.meta-pnl {
    font-size: 13px; font-weight: 700; margin: 8px 0 6px;
    padding: 6px 10px; border-radius: var(--r-xs);
    font-family: var(--font-mono); font-feature-settings: "tnum";
}
.meta-pnl--gain { background: color-mix(in srgb, var(--up)   10%, transparent); color: var(--up); }
.meta-pnl--loss { background: color-mix(in srgb, var(--down) 10%, transparent); color: var(--down); }
[data-theme="light"] .meta-pnl--gain { color: #1d8a56; }
[data-theme="light"] .meta-pnl--loss { color: #c0353c; }

.meta-save-btn {
    width: 100%; margin-top: 6px; padding: 9px; border-radius: var(--r-xs);
    border: 1px solid var(--border-bright); background: var(--surface-high); color: var(--text);
    font-family: var(--body); font-size: 13px; font-weight: 600; cursor: pointer; letter-spacing: 0.2px;
    transition: border-color var(--dur-fast), color var(--dur-fast);
}
.meta-save-btn:hover { border-color: var(--gold); color: var(--gold); }

.btn-wishlist {
    display: block; width: 100%; margin: 8px 0;
    padding: 11px 20px; border-radius: var(--r-sm);
    border: 1px dashed var(--border-bright); background: transparent; color: var(--muted);
    font-family: var(--body); font-size: 14px; font-weight: 600; letter-spacing: 0.2px;
    cursor: pointer; text-align: center;
    transition: border-color var(--dur-fast), color var(--dur-fast);
}
.btn-wishlist:hover { border-color: var(--gold); color: var(--gold); }
.btn-wishlist--active {
    border-style: solid; border-color: color-mix(in srgb, var(--gold) 60%, transparent);
    color: var(--gold);
    background: color-mix(in srgb, var(--gold) 6%, transparent);
}

.portfolio-pnl {
    font-size: 15px; font-weight: 700;
    padding: 6px 12px; border-radius: var(--r-xs); margin-top: 4px; width: fit-content;
    font-family: var(--font-mono); font-feature-settings: "tnum";
}
.portfolio-pnl--gain { color: var(--up);   background: color-mix(in srgb, var(--up)   10%, transparent); }
.portfolio-pnl--loss { color: var(--down); background: color-mix(in srgb, var(--down) 10%, transparent); }
[data-theme="light"] .portfolio-pnl--gain { color: #1d8a56; }
[data-theme="light"] .portfolio-pnl--loss { color: #c0353c; }

.wishlist-count {
    display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--gold) 14%, var(--surface));
    color: var(--gold); font-family: var(--font-mono); font-size: 10px; font-weight: 700;
    padding: 2px 8px; border-radius: var(--r-pill); margin-left: 6px;
}
.portfolio-wishlist-grid {
    display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
}
.portfolio-wishlist-empty {
    text-align: center; padding: 26px 16px;
    background: color-mix(in srgb, var(--surface) 80%, transparent);
    border: 1px dashed var(--border-bright); border-radius: var(--radius);
}
.wl-empty-icon { font-size: 34px; display: block; margin-bottom: 10px; opacity: .45; }
.portfolio-wishlist-empty p { color: var(--muted); font-weight: 500; font-size: 13px; margin-bottom: 4px; }
.wl-empty-hint { font-size: 12px !important; opacity: .7; }

.portfolio-sets-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    margin-top: 4px;
}
.set-progress-card {
    display: flex; align-items: center; gap: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 14px;
    text-decoration: none; color: inherit;
    transition: border-color var(--dur-fast), background var(--dur-fast);
}
.set-progress-card:hover {
    border-color: var(--iris);
    background: color-mix(in srgb, var(--iris) 6%, var(--surface));
}
.set-progress-logo {
    width: 56px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    min-height: 32px;
}
.set-progress-logo img   { max-width: 56px; max-height: 32px; object-fit: contain; }
.set-progress-logo.no-logo:not(:has(.set-tile-jp-badge))::before { content: "🃏"; font-size: 28px; opacity: .28; }
.set-progress-info {
    flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
.set-progress-name  { font-size: 12px; font-weight: 600; line-height: 1.35;
                      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.set-progress-count { font-size: 11px; color: var(--muted); font-weight: 600;
                      font-family: var(--font-mono); }
.set-progress-count--full { color: var(--up); }
.portfolio-sets-loading { font-size: 12px; color: var(--muted); padding: 8px 0; }

/* ── Portfolio mode switcher ─────────────────────────── */
.portfolio-mode-switcher {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 20px;
}
.portfolio-mode-stat-card {
    position: relative;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    transition: border-color var(--dur-fast), background var(--dur-fast);
    user-select: none;
}
.portfolio-mode-stat-card--tcg.portfolio-mode-stat-card--active {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 6%, var(--surface));
}
.portfolio-mode-stat-card--pocket.portfolio-mode-stat-card--active {
    border-color: var(--iris);
    background: color-mix(in srgb, var(--iris) 6%, var(--surface));
}
.portfolio-mode-stat-card:hover:not(.portfolio-mode-stat-card--active) {
    border-color: var(--muted);
    background: color-mix(in srgb, var(--muted) 4%, var(--surface));
}
.portfolio-mode-stat-label {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}
.portfolio-mode-stat-card--tcg.portfolio-mode-stat-card--active
    .portfolio-mode-stat-label { color: var(--accent); }
.portfolio-mode-stat-card--pocket.portfolio-mode-stat-card--active
    .portfolio-mode-stat-label { color: var(--iris); }
.portfolio-mode-stat-row {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    font-family: var(--font-mono);
}
.portfolio-mode-stat-value {
    font-size: 13px;
    font-weight: 700;
    color: var(--gold);
    font-family: var(--font-mono);
}
.portfolio-mode-stat-value--pocket {
    color: var(--iris);
}
/* ── Mini pokéball default button ────────────────────── */
.portfolio-mode-pokeball {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid var(--border);
    background: linear-gradient(
        to bottom,
        #555 0%, #555 46%,
        #333 46%, #333 54%,
        #555 54%, #555 100%
    );
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: border-color var(--dur-fast), opacity var(--dur-fast);
    opacity: 0.35;
}
.portfolio-mode-pokeball::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0; right: 0;
    height: 1.5px;
    background: var(--border);
    transform: translateY(-50%);
}
.portfolio-mode-pokeball::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--bg);
    border: 1.5px solid var(--border);
}
.portfolio-mode-pokeball:hover {
    opacity: 0.7;
}
/* Pokéball attiva (default impostato) — TCG: rossa */
.portfolio-mode-stat-card--tcg .portfolio-mode-pokeball--active {
    border-color: var(--accent);
    background: linear-gradient(
        to bottom,
        var(--accent) 0%, var(--accent) 46%,
        #1a1a2e     46%, #1a1a2e     54%,
        #eee        54%, #eee        100%
    );
    opacity: 1;
}
/* Pokéball attiva — Pocket: iris */
.portfolio-mode-stat-card--pocket .portfolio-mode-pokeball--active {
    border-color: var(--iris);
    background: linear-gradient(
        to bottom,
        var(--iris) 0%, var(--iris) 46%,
        #1a1a2e    46%, #1a1a2e    54%,
        #eee       54%, #eee       100%
    );
    opacity: 1;
}
.portfolio-mode-pokeball--active::before {
    background: #1a1a2e;
}
.portfolio-mode-pokeball--active::after {
    border-color: #1a1a2e;
    background: #fff;
}
/* Nasconde i title ridondanti quando il switcher è presente */
.portfolio-mode-switcher ~ .portfolio-section .portfolio-section-title {
    display: none;
}

.btn-wishlist-remove {
    border: 1px solid color-mix(in srgb, var(--gold) 40%, var(--border));
    background: transparent; color: var(--gold);
    border-radius: var(--r-xs); font-family: var(--body); font-size: 11.5px; font-weight: 600;
    padding: 6px 10px; cursor: pointer; width: 100%; text-align: center;
    letter-spacing: 0.2px;
    transition: border-color var(--dur-fast), background var(--dur-fast);
}
.btn-wishlist-remove:hover { background: color-mix(in srgb, var(--gold) 8%, transparent); }

/* ---------- RICERCA CARTE (/search) ---------- */
.card-search-cta { margin-bottom: 14px; }
.card-search-cta-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 18px; border-radius: var(--r-pill);
    border: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 90%, transparent);
    color: var(--muted);
    font-family: var(--body); font-size: 13px; font-weight: 600; letter-spacing: 0.2px;
    text-decoration: none; transition: border-color var(--dur-fast), color var(--dur-fast);
}
.card-search-hint {
    font-size: 12px; color: var(--muted); font-weight: 400;
    margin-top: 4px; line-height: 1.55;
}

.toolbar-input {
    border: 0; background: transparent; color: var(--text);
    font-family: var(--body); font-size: 13px; font-weight: 600;
    padding: 8px 0; outline: none; width: 130px;
}
.toolbar-input::placeholder { color: var(--muted); }

/* ============================================================
   HOVER — solo su dispositivi con puntatore reale
   ============================================================ */
@media (hover: hover) {
    .logo:hover .logo-mark-svg {
        transform: rotate(-5deg) translateY(-2px);
    }

    .nav-tab:not(.active):hover {
        color: var(--text);
        background: color-mix(in srgb, var(--text) 7%, transparent);
    }
    .icon-btn:hover { border-color: var(--border-bright); background: var(--surface-high); }
    .lang-switch button:not(.active):hover { color: var(--text); }
    .gen-btn:not(.active):hover {
        border-color: var(--border-bright);
        color: var(--text);
    }
    .crumb:hover { color: var(--accent); border-color: var(--accent); }
    .poke-tile:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow);
        border-color: var(--border-bright);
        background: var(--surface);
    }
    .cards-tab:not(.active):hover { color: var(--text); }
    .toolbar-field:hover { border-color: var(--border-bright); }

    /* Card tile hover: lift + hairline accesa. Niente alone. */
    .card-tile:hover .card-img-wrap {
        border-color: var(--border-bright);
        box-shadow:
            0 16px 40px rgba(0,0,0,0.45),
            0 4px 12px rgba(0,0,0,0.30);
    }
    [data-theme="light"] .card-tile:hover .card-img-wrap {
        box-shadow:
            0 16px 36px rgba(25,27,40,0.18),
            0 4px 12px rgba(25,27,40,0.10);
    }
    /* Tinta tipo: hairline più decisa + alone colorato (prototipo) */
    .card-tile[data-type]:hover .card-img-wrap {
        border-color: var(--type-tint-bright);
        box-shadow:
            0 16px 40px rgba(0,0,0,0.45),
            0 4px 12px rgba(0,0,0,0.30),
            0 0 32px var(--type-tint);
    }
    /* Rarità: hairline foil + nessun glow. Lo sweep parte qui sotto. */
    .card-tile[data-rarity="rare"]:hover .card-img-wrap {
        border-color: color-mix(in srgb, var(--gold) 80%, transparent);
    }
    .card-tile[data-rarity="holo"]:hover .card-img-wrap {
        border-color: var(--gold-bright);
        box-shadow:
            0 16px 40px rgba(0,0,0,0.45),
            0 0 0 1px color-mix(in srgb, var(--gold) 30%, transparent);
    }
    .card-tile[data-rarity="ultra"]:hover .card-img-wrap {
        box-shadow:
            0 16px 40px rgba(0,0,0,0.45),
            0 0 0 1px rgba(255,255,255,0.12);
    }

    .buy-links a:hover { border-color: var(--gold); color: var(--gold); }
    .footer-legal a:hover { color: var(--text); }
    .share-btn:hover { border-color: var(--accent); color: var(--accent); }
    .trainer-cat-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--cat-color); }
    .btn-collect:hover { border-color: var(--up); color: var(--up); transform: scale(1.12); }
    .btn-quickview:hover { border-color: var(--border-bright); color: #fff; transform: scale(1.12); }
    .btn-collect-detail:hover { border-color: var(--up); color: var(--up); }
    .portfolio-backup-btn:hover { border-color: var(--gold); color: var(--gold); }
    .cta-gold:hover { transform: translateY(-2px); box-shadow: 0 14px 38px color-mix(in srgb, var(--gold) 45%, transparent); }
    .cta-ghost:hover { border-color: var(--gold); color: var(--gold); }
    .sheet-close:hover { color: var(--text); border-color: var(--border-bright); }
    .onboarding-btn-skip:hover { color: var(--text); border-color: var(--text); }
    .card-search-cta-btn:hover { border-color: var(--accent); color: var(--accent); }
    .set-tile:hover {
        box-shadow: 0 12px 32px -8px rgba(0,0,0,.55),
                    0 0 0 1px var(--border-bright);
        border-color: var(--border-bright);
        transform: translateY(-3px);
    }
}

/* feedback tattile :active su touch */
.poke-tile:active          { transform: scale(0.97); }
.card-tile:active .card-img-wrap { transform: scale(0.97); }
.trainer-cat-tile:active   { transform: scale(0.97); }
.buy-links a:active        { border-color: var(--gold); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 720px) {
    /* backdrop-filter creerebbe un containing block per i discendenti
       fixed: la bottom-nav (figlia di header) si ancorerebbe all'header
       invece che al viewport. Su mobile: sfondo opaco, niente blur. */
    header {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: color-mix(in srgb, var(--bg) 97%, transparent);
    }
    .header-inner { flex-wrap: wrap; gap: 10px; padding: 10px 16px; }
    .logo-poke     { font-size: 7.5px; letter-spacing: 0.36em; }
    .logo-cards    { font-size: 18px; letter-spacing: 0.05em; }
    .logo-mark-svg { width: 20px; height: 28px; }

    .main-nav {
        position: fixed;
        bottom: 0; left: 0; right: 0;
        display: flex;
        background: color-mix(in srgb, var(--bg) 94%, transparent);
        backdrop-filter: blur(18px) saturate(1.2);
        -webkit-backdrop-filter: blur(18px) saturate(1.2);
        border-top: 1px solid var(--border);
        border-left: 0; border-right: 0; border-bottom: 0;
        border-radius: 0;
        padding: 0;
        padding-bottom: env(safe-area-inset-bottom);
        z-index: 100;
        order: unset;
        flex-basis: auto;
        margin-top: 0;
    }
    .nav-tab {
        flex: 1;
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        padding: 10px 4px 8px;
        border-radius: 0;
        font-size: 11.5px;
        min-height: 56px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* In bottom-bar la tab attiva è inchiostro+filo rosso, non un blocco pieno */
    .nav-tab.active {
        background: transparent;
        color: var(--accent);
        box-shadow: inset 0 2px 0 var(--accent);
    }
    .nav-tab.active .portfolio-badge { background: var(--accent); color: #fff; }
    .nav-tab[data-nav="trainers"] { font-size: 0; }
    .nav-tab[data-nav="trainers"]::before { content: "Trainers"; font-size: 11.5px; }

    #app   {
        padding-left: 16px; padding-right: 16px; padding-top: 20px;
        padding-bottom: calc(56px + env(safe-area-inset-bottom) + 24px);
    }
    footer { padding-bottom: calc(56px + env(safe-area-inset-bottom) + 20px); }

    /* Densità catalogo: con padding 16px anche un viewport da 320px
       tiene 2 colonne di carte (2×138 + 11 = 287 ≤ 288) e 3 di Pokémon. */
    .card-grid {
        grid-template-columns: repeat(auto-fill, minmax(138px, 1fr));
        gap: 11px;
    }
    .poke-grid {
        grid-template-columns: repeat(auto-fill, minmax(102px, 1fr));
        gap: 10px;
    }

    .cards-head h2 { font-size: 21px; }
    .detail-info h2 { font-size: 27px; }
    /* Touch target: cuore + anteprima leggermente più grandi */
    .btn-collect   { width: 38px; height: 38px; font-size: 17px; }
    .btn-quickview { width: 38px; height: 38px; top: 50px; }
    .empty-state   { padding: 56px 16px; }

    .search-wrap { order: 3; flex-basis: 100%; }
    #searchInput     { max-width: none; font-size: 16px; }
    .meta-select     { font-size: 16px; }
    .meta-cost-input { font-size: 16px; }
    .toolbar-input   { font-size: 16px; }
    .toolbar-select  { font-size: 16px; }

    .icon-btn { width: 44px; height: 44px; font-size: 18px; }
    .buy-links a {
        min-height: 48px;
        display: inline-flex; align-items: center; justify-content: center;
        flex: 1; text-align: center;
    }
    .buy-links { gap: 10px; }
    .btn-collect-detail { min-height: 48px; }
    .btn-wishlist       { min-height: 48px; }
    .meta-save-btn      { min-height: 44px; }
    .qty-btn            { width: 36px; height: 36px; }

    .detail { grid-template-columns: 1fr; gap: 28px; }
    .detail-img-wrap { max-width: 320px; margin: 0 auto; }

    .cards-toolbar { flex-wrap: nowrap; }
    .toolbar-field  { flex: 1 1 0; min-width: 0; }
    .toolbar-select { width: 100%; min-width: 0; }

    .gen-bar {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
        margin-right: -16px;
        padding-right: 16px;
    }
    .gen-bar::-webkit-scrollbar { display: none; }

    .meta-fields { gap: 14px; }
    .meta-field { flex-direction: column; align-items: flex-start; gap: 6px; }
    .meta-field span { font-size: 11px; }
    .meta-select, .meta-cost-input { width: 100%; box-sizing: border-box; }
    .qty-control { align-self: flex-start; }

    .cookie-banner {
        bottom: calc(56px + env(safe-area-inset-bottom));
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
    }

}

/* ── Shop sezione prodotti sigillati ──────────────────────────────────────── */

.set-detail-tabs { margin: 4px 0 20px; }

.owned-filter {
    display: flex; gap: 2px;
    background: color-mix(in srgb, var(--surface) 70%, transparent);
    border: 1px solid var(--border);
    border-radius: var(--r-pill); padding: 3px;
    width: fit-content; margin: 4px 0 16px;
}
.owned-chip {
    border: 0; background: transparent; color: var(--muted);
    font-family: var(--body); font-size: 12.5px; font-weight: 600;
    padding: 6px 16px;
    border-radius: var(--r-pill); cursor: pointer;
    transition: background var(--dur-fast), color var(--dur-fast);
    letter-spacing: 0.01em;
}
.owned-chip.active {
    background: var(--accent);
    color: #fff;
}

.set-panel { width: 100%; }

/* Grid prodotti */
.shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 16px;
}

.shop-group { margin-bottom: 36px; }

.shop-group-title {
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}

/* Product card */
.shop-product-card {
    display: flex;
    flex-direction: column;
    background: color-mix(in srgb, var(--surface) 90%, transparent);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform var(--dur-med) var(--ease-out),
                box-shadow var(--dur-med) var(--ease-out),
                border-color var(--dur-fast);
    cursor: default;
}
.shop-product-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
    border-color: var(--border-bright);
}

/* Visuale prodotto */
.shop-product-visual {
    position: relative;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(135deg, var(--bg-2), var(--panel));
}

/* Sfondo per tipo — tinte distinte ma sobrie */
.shop-type-pack    { background: linear-gradient(135deg, #101d38 0%, #0a1222 100%); }
.shop-type-bundle  { background: linear-gradient(135deg, #1c1338 0%, #110b22 100%); }
.shop-type-etb     { background: linear-gradient(135deg, #321019 0%, #1c0a0f 100%); }
.shop-type-box     { background: linear-gradient(135deg, #103219 0%, #0a1c0f 100%); }
.shop-type-blister { background: linear-gradient(135deg, #32240e 0%, #1c1408 100%); }
.shop-type-special {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--gold) 24%, #181000) 0%,
        color-mix(in srgb, var(--gold) 9%, #0c0800) 100%);
}
.shop-type-tin     { background: linear-gradient(135deg, #181826 0%, #0e0e16 100%); }
.shop-type-starter { background: linear-gradient(135deg, #0e2632 0%, #08141c 100%); }
[data-theme="light"] .shop-type-pack,
[data-theme="light"] .shop-type-bundle,
[data-theme="light"] .shop-type-etb,
[data-theme="light"] .shop-type-box,
[data-theme="light"] .shop-type-blister,
[data-theme="light"] .shop-type-tin,
[data-theme="light"] .shop-type-starter {
    background: linear-gradient(135deg, var(--surface-high), var(--panel));
}

/* Logo set come sfondo visivo */
.shop-set-logo {
    max-width: 78%;
    max-height: 90px;
    object-fit: contain;
    filter: drop-shadow(0 4px 14px rgba(0,0,0,0.5));
    transition: opacity var(--dur-fast);
}
.shop-product-card:hover .shop-set-logo { opacity: 0.9; }

/* Immagine prodotto esplicita */
.shop-product-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Icona placeholder quando mancano sia immagine che logo */
.shop-product-icon {
    font-size: 46px;
    opacity: 0.5;
    user-select: none;
}

/* Corpo card */
.shop-product-body {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.shop-type-badge {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 4px;
    width: fit-content;
    background: var(--surface-high);
    color: var(--muted);
    border: 1px solid var(--border);
}

.shop-product-name {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--text);
    margin: 0;
    flex: 1;
}

/* CTA button */
.shop-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 10px 14px;
    border-radius: var(--r-xs);
    background: var(--accent);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    text-decoration: none;
    transition: background var(--dur-fast), transform var(--dur-fast) ease;
    white-space: nowrap;
    margin-top: auto;
    border: 0;
    cursor: pointer;
}
.shop-cta:hover { background: var(--accent-deep); transform: translateY(-1px); }
.shop-cta--secondary {
    background: var(--surface-high);
    color: var(--text);
    border: 1px solid var(--border-bright);
}
.shop-cta--secondary:hover { background: var(--surface); border-color: var(--border-bright); }

/* Nota affiliazione */
.shop-affiliate-note {
    font-size: 10px;
    color: var(--muted);
    margin: 0 0 24px;
    opacity: 0.7;
}

/* Empty state */
.shop-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 48px 24px;
    text-align: center;
}
.shop-empty-icon   { font-size: 48px; opacity: 0.5; }
.shop-empty-title  { font-size: 16px; font-weight: 600; color: var(--text); margin: 0; font-family: var(--font-display); font-variation-settings: "opsz" 30; }
.shop-empty-hint   { font-size: 13px; color: var(--muted); margin: 0; }
.shop-empty-links  { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }

.shop-empty-logo-wrap {
    background: linear-gradient(135deg, var(--surface-high), var(--panel));
    border: 1px solid var(--border-bright);
    border-radius: var(--r-lg);
    padding: 28px 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--card-shadow);
    transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.shop-empty-logo-wrap:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}
.shop-empty-logo {
    max-width: 320px;
    max-height: 160px;
    width: 100%;
    object-fit: contain;
    filter: drop-shadow(0 4px 16px rgba(0,0,0,0.4));
}
@media (max-width: 600px) {
    .shop-empty-logo-wrap { padding: 20px 24px; }
    .shop-empty-logo { max-width: 240px; max-height: 120px; }
}

/* Responsive mobile */
@media (max-width: 600px) {
    .shop-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
    .shop-product-visual { height: 120px; }
    .shop-set-logo { max-height: 70px; }
}

/* ══ SUPPORT / ASSISTENZA ═══════════════════════════════════════════════════ */
.support-wrap {
    max-width: 560px;
    margin: 2rem auto;
    padding: 0 1rem 5rem;
}
.support-header { text-align: center; margin-bottom: 2rem; }
.support-title {
    font-family: var(--font-display);
    font-size: 2.1rem;
    font-weight: 600;
    font-variation-settings: "opsz" 70;
    margin-bottom: .4rem;
    letter-spacing: .005em;
    color: var(--text);
}
.support-subtitle { color: var(--muted); font-size: .9rem; line-height: 1.6; }

/* ── Telegram hero box ── */
.support-tg-box {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.4rem;
    background: color-mix(in srgb, var(--accent) 4%, var(--panel));
    border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--text);
    transition: border-color var(--dur-fast), transform var(--dur-med) var(--ease-out),
                box-shadow var(--dur-med) var(--ease-out);
    margin-bottom: 1.5rem;
}
.support-tg-box:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}
.support-tg-icon {
    flex-shrink: 0;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--accent);
    display: flex; align-items: center; justify-content: center;
    color: #fff;
}
.support-tg-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}
.support-tg-label { font-weight: 600; font-size: .95rem; color: var(--text); }
.support-tg-hint  { font-size: .78rem; color: var(--muted); font-family: var(--font-mono); }
.support-tg-arrow { color: var(--accent); font-size: 1.1rem; flex-shrink: 0; }

/* ── Divider ── */
.support-divider {
    display: flex;
    align-items: center;
    gap: .75rem;
    color: var(--muted);
    font-size: .72rem;
    font-family: var(--font-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}
.support-divider::before,
.support-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* ── Form card ── */
.support-form {
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.support-fieldset { border: none; padding: 0; margin: 0; }
.support-legend {
    font-size: .72rem;
    font-weight: 500;
    font-family: var(--font-mono);
    color: var(--muted);
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: .6rem;
    display: block;
}

/* ── Type pills ── */
.type-pills { display: flex; gap: .5rem; flex-wrap: wrap; }
.type-pill {
    padding: .45rem .95rem;
    border-radius: var(--r-pill);
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--panel) 88%, transparent);
    color: var(--muted);
    font-size: .85rem;
    font-weight: 500;
    cursor: pointer;
    font-family: var(--body);
    line-height: 1.4;
    transition:
        border-color var(--dur-fast) ease,
        color        var(--dur-fast) ease,
        background   var(--dur-med) var(--ease-out);
}
.type-pill > span { position: relative; z-index: 1; }
.type-pill:hover  { border-color: var(--border-bright); color: var(--text); }
.type-pill--active {
    color: #fff;
    background: var(--accent);
    border-color: var(--accent);
}

/* ── Fields ── */
.support-field { display: flex; flex-direction: column; gap: .4rem; }
.support-label  { font-size: .85rem; font-weight: 600; color: var(--text); }
.support-opt    { font-weight: 400; color: var(--muted); font-size: .8rem; margin-left: .25rem; }
.support-req    { color: var(--accent); font-weight: 700; margin-left: .2rem; }

/* ── Contact cards ── */
.contact-cards { display: flex; gap: .75rem; margin-bottom: .25rem; }
.contact-card {
    flex: 1;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .75rem 1rem;
    border-radius: var(--r-sm);
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--panel) 85%, transparent);
    color: var(--muted);
    cursor: pointer;
    transition: border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast);
    user-select: none;
}
.contact-card input[type="radio"]  { display: none; }
.contact-card-icon  { font-size: 1.2rem; flex-shrink: 0; }
.contact-card-label { font-size: .88rem; font-weight: 600; }
.contact-card:hover { border-color: var(--border-bright); color: var(--text); }
.contact-card--active {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 7%, var(--surface));
    color: var(--text);
}

/* ── Inputs / Textarea ── */
.support-input,
.support-textarea {
    background: color-mix(in srgb, var(--surface) 80%, transparent);
    border: 1px solid var(--border-bright);
    border-radius: var(--r-sm);
    color: var(--text);
    font-family: var(--body);
    font-size: .9rem;
    padding: .7rem .9rem;
    transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
    outline: none;
    width: 100%;
}
.support-input::placeholder,
.support-textarea::placeholder { color: var(--muted); }
.support-input:focus,
.support-textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}
.support-textarea { resize: vertical; min-height: 120px; }

.support-char-count { font-size: .75rem; color: var(--muted); text-align: right; font-family: var(--font-mono); }

/* ── Submit ── */
.support-submit {
    padding: .85rem 1.5rem;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--r-sm);
    font-family: var(--body);
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: background var(--dur-fast), transform var(--dur-fast) ease;
    margin-top: .25rem;
    width: 100%;
}
.support-submit:hover:not(:disabled) { background: var(--accent-deep); }
.support-submit:active:not(:disabled) { transform: scale(0.99); }
.support-submit:disabled { opacity: .5; cursor: not-allowed; }

/* ── Feedback ── */
.support-feedback {
    padding: .85rem 1rem;
    border-radius: var(--r-sm);
    font-size: .88rem;
    font-weight: 500;
    line-height: 1.5;
}
.support-feedback--ok {
    background: color-mix(in srgb, var(--up) 9%, transparent);
    border: 1px solid color-mix(in srgb, var(--up) 30%, transparent);
    color: var(--up);
}
[data-theme="light"] .support-feedback--ok { color: #1d8a56; }
.support-feedback--err {
    background: color-mix(in srgb, var(--down) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--down) 26%, transparent);
    color: var(--down);
}
[data-theme="light"] .support-feedback--err { color: #c0353c; }

@media (max-width: 480px) {
    .support-wrap  { padding: 0 .75rem 4rem; }
    .support-form  { padding: 1.25rem; }
    .support-title { font-size: 1.7rem; }
    .type-pills    { gap: .4rem; }
    .type-pill     { font-size: .8rem; padding: .4rem .75rem; }
    .contact-cards { flex-direction: column; gap: .5rem; }
    .contact-card  { padding: .65rem .9rem; }
}
/* ══ fine SUPPORT ════════════════════════════════════════════════════════ */

/* ── zh-cn: badge codice set esclusivo ── */
.set-tile-cn-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: 8px;
    font-weight: 700;
    color: #fff;
    background: #dc2626;
    padding: 2px 5px;
    border-radius: 4px;
    z-index: 2;
    pointer-events: none;
}

/* ── zh-cn: intestazioni di serie (SM / SWSH / SV) ── */
.zh-series-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: rgba(255,255,255,.28);
    margin: 20px 0 8px;
    padding-left: 2px;
}
.zh-series-label:first-child { margin-top: 4px; }

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    /* Il motore foil non si attiva da JS; qui la cintura di sicurezza CSS */
    .foil, .glare { display: none; }
    .auto-sheen .foil { animation: none; }
    .card-img-wrap, .detail-img-wrap { transform: none !important; transition: none; }
    .atmo::before { animation: none; }
    #backToTop { transition: none; }
    .sheet, .sheet-backdrop { transition-duration: 0.01s; }
    .btn-collect--pop { animation: none; }
    .card-tile[data-rarity="ultra"] .card-img-wrap { animation: none; }
    .egg-title { animation: none; }
    .logo-mark-svg { transition: none; }
    .poke-tile, .card-tile, .set-tile, .trainer-cat-tile, .cod-strip {
        animation-duration: 0.01s;
    }
}

/* ── Trainer Hub: etichette gruppo ─────────────────────── */
.trainer-hub-group-label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 4px;
    margin: 22px 0 12px;
    font-family: var(--font-display, "Cinzel Decorative", serif);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--muted);
}
.trainer-hub-group-label::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--border), transparent);
}

/* ── Era sections ────────────────────────────────────────── */
.trainer-era { margin-bottom: 2px; }
.trainer-era-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 6px 11px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    user-select: none;
    border-radius: 6px 6px 0 0;
    transition: background .15s;
}
.trainer-era-head:hover { background: var(--glass-surface); }
.trainer-era-chev {
    flex-shrink: 0;
    width: 12px;
    color: var(--muted);
    font-size: 11px;
    transition: transform .25s;
}
.trainer-era--collapsed .trainer-era-chev { transform: rotate(-90deg); }
.trainer-era-name {
    flex: 1;
    font-family: var(--font-display, "Cinzel Decorative", serif);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .5px;
}
.trainer-era-count {
    font-family: var(--font-mono, "JetBrains Mono", monospace);
    font-size: 11px;
    color: var(--muted);
    background: var(--glass-surface);
    border: 1px solid var(--border);
    padding: 2px 8px;
    border-radius: 99px;
}
.trainer-era--collapsed .trainer-era-body { display: none; }

/* ── Reprint badge ───────────────────────────────────────── */
.reprint-badge {
    position: absolute;
    bottom: 6px;
    right: 6px;
    z-index: 3;
    font-family: var(--font-mono, "JetBrains Mono", monospace);
    font-size: 9px;
    font-weight: 700;
    color: var(--gold);
    background: rgba(5, 6, 12, .82);
    border: 1px solid rgba(207, 167, 46, .4);
    padding: 3px 6px;
    border-radius: 7px;
    backdrop-filter: blur(4px);
    pointer-events: none;
}

/* ── Energy type chips ───────────────────────────────────── */
.energy-type-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 0 6px;
}
.energy-type-chip {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 13px 8px 10px;
    border: 1px solid var(--border);
    border-radius: 99px;
    background: var(--glass-surface);
    color: var(--text);
    font-family: var(--font-ui, "Sora", sans-serif);
    font-size: 13px;
    cursor: pointer;
    transition: border-color .2s, transform .2s;
}
.energy-type-chip:hover { transform: translateY(-2px); }
.energy-type-chip--on {
    border-color: var(--iris);
    background: color-mix(in srgb, var(--iris) 12%, var(--surface));
    color: var(--text);
}
.energy-type-chip__dot {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ── Toolbar toggle ──────────────────────────────────────── */
.toolbar-toggle {
    padding: 9px 13px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    color: var(--muted);
    font-family: var(--font-ui, "Sora", sans-serif);
    font-size: 12.5px;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .2s, color .2s;
}
.toolbar-toggle--on {
    color: var(--text);
    border-color: color-mix(in srgb, var(--iris) 50%, var(--border));
}

/* ── Reprint sheet ───────────────────────────────────────── */
.reprint-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(2, 3, 8, .6);
    backdrop-filter: blur(3px);
    z-index: 50;
    opacity: 0;
    transition: opacity .3s;
}
.reprint-sheet-backdrop--show { opacity: 1; }
.reprint-sheet {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 51;
    max-height: 82vh;
    overflow-y: auto;
    background: linear-gradient(180deg, var(--surface-2, #11152a), var(--bg));
    border: 1px solid var(--border);
    border-bottom: 0;
    border-radius: 22px 22px 0 0;
    padding: 8px 16px env(safe-area-inset-bottom, 24px);
    transform: translateY(105%);
    transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.reprint-sheet--show { transform: translateY(0); }
@media (min-width: 620px) {
    .reprint-sheet {
        left: 50%; right: auto; bottom: auto; top: 50%;
        transform: translate(-50%, -44%) scale(.96);
        opacity: 0;
        width: 580px; max-height: 78vh;
        border-radius: 20px;
        border-bottom: 1px solid var(--border);
        transition: transform .3s cubic-bezier(.2, .8, .2, 1), opacity .3s;
    }
    .reprint-sheet--show { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
.reprint-sheet__grab {
    width: 42px; height: 4px;
    background: var(--border);
    border-radius: 99px;
    margin: 8px auto 14px;
}
.reprint-sheet__close {
    position: absolute; top: 14px; right: 14px;
    width: 30px; height: 30px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--muted);
    border-radius: 50%; font-size: 13px; cursor: pointer;
}
.reprint-sheet__title {
    font-family: var(--font-serif, "Cormorant Garamond", serif);
    font-size: 24px; font-weight: 600;
    margin: 0 36px 2px 0;
}
.reprint-sheet__sub {
    font-size: 12px; color: var(--muted); margin: 0 0 16px;
}
.reprint-sheet__era-label {
    font-family: var(--font-mono, "JetBrains Mono", monospace);
    font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
    color: var(--faint, #5c6485);
    margin: 18px 0 8px;
}
.reprint-sheet__grid { grid-template-columns: repeat(3, 1fr); }
@media (min-width: 420px) { .reprint-sheet__grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 560px) { .reprint-sheet__grid { grid-template-columns: repeat(5, 1fr); } }

/* ════════════════════════════════════════════
   CARTE IN ASCESA
   ════════════════════════════════════════════ */
@keyframes ca-shimmer {
    from { background-position: -700px 0 }
    to   { background-position:  700px 0 }
}
@keyframes ca-fadeup {
    from { opacity:0; transform:translateY(14px) }
    to   { opacity:1; transform:translateY(0) }
}
@keyframes ca-pulse {
    0%,100% { opacity:1;  transform:scale(1)    }
    50%     { opacity:.3; transform:scale(1.35) }
}

.carte-ascesa { margin-bottom: 24px; }

/* ── CTA compatta home ───────────────────────── */
.ca-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  cursor: pointer;
  margin-bottom: 24px;
  transition: background .2s ease, border-color .2s ease, transform .15s ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.ca-cta:hover {
  background: rgba(124,111,255,.08);
  border-color: rgba(124,111,255,.3);
}
.ca-cta:active { transform: scale(.99); }
.ca-cta:focus-visible {
  outline: 2px solid #7c6fff;
  outline-offset: 2px;
}

/* Thumbnails sovrapposti */
.ca-cta-thumbs {
  position: relative;
  width: 76px;
  height: 56px;
  flex-shrink: 0;
}
.ca-cta-thumb {
  position: absolute;
  width: 40px;
  height: 56px;
  object-fit: cover;
  border-radius: 6px;
  border: 1.5px solid rgba(255,255,255,.12);
  box-shadow: 0 2px 8px rgba(0,0,0,.5);
  background: rgba(255,255,255,.05);
}
.ca-cta-thumb.t1 { left: 0;    z-index:3; }
.ca-cta-thumb.t2 { left: 18px; z-index:2; filter:brightness(.88); }
.ca-cta-thumb.t3 { left: 36px; z-index:1; filter:brightness(.72); }

/* Corpo testo */
.ca-cta-body { flex:1; min-width:0; }

.ca-cta-eyebrow {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  font-weight: 600;
  color: #4ade80;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 3px;
}
.ca-cta-title {
  font-family: 'Cinzel Decorative', serif;
  font-size: 15px;
  font-weight: 700;
  color: #f0f0f0;
  line-height: 1.2;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ca-cta-sub {
  font-size: 11px;
  font-family: 'Sora', sans-serif;
  color: rgba(240,240,240,.45);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .3s ease;
}

/* Freccia */
.ca-cta-arrow {
  color: rgba(124,111,255,.75);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  transition: transform .2s ease;
}
.ca-cta:hover .ca-cta-arrow { transform: translateX(3px); }

/* ── Top Value — pagina dedicata ─────────────── */
.top-value-nav {
  padding: 8px 0 4px;
  margin-bottom: 4px;
}
.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(240,240,240,.5);
  font-family: 'Sora', sans-serif;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 0;
  transition: color .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.back-btn:hover { color: rgba(240,240,240,.9); }
.back-btn svg { flex-shrink:0; }

.ca-header {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
}
.ca-header-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 4px;
}
.ca-cta-link {
  font-family: 'Sora', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  letter-spacing: -.01em;
  transition: opacity .2s ease;
  white-space: nowrap;
}
.ca-cta-link:hover { opacity: .7; }

/* Header */
.ca-live  { display:flex; align-items:center; gap:7px; font-size:10px; font-weight:600;
             color:#4ade80; letter-spacing:.12em; text-transform:uppercase; margin-bottom:8px; }
.ca-dot   { display:inline-block; width:7px; height:7px; border-radius:50%;
             background:#4ade80; flex-shrink:0; animation:ca-pulse 2.2s ease-in-out infinite; }
.ca-title { font-family:var(--font-display); font-size:26px; font-weight:600;
             font-variation-settings:"opsz" 60; color:var(--text); line-height:1.2;
             margin-bottom:4px; letter-spacing:.01em; }
.ca-sub   { font-family:var(--body); font-size:13px; color:var(--muted);
             min-height:20px; margin-bottom:20px; }

/* Tabs */
.ca-tabs { display:flex; gap:4px; background:rgba(255,255,255,.05); border-radius:13px;
            padding:4px; margin-bottom:20px; box-shadow:inset 0 1px 0 rgba(255,255,255,.04); }
.ca-tab  { flex:1; padding:9px 0; border:none; cursor:pointer; border-radius:10px;
            font-family:'Sora',sans-serif; font-size:12px; font-weight:500;
            background:transparent; color:rgba(240,240,240,.42);
            transition:all .22s cubic-bezier(.16,1,.3,1); }
.ca-tab:hover:not(.ca-tab--active) { color:rgba(240,240,240,.7); }
.ca-tab--active { background:var(--accent); color:#fff; font-weight:700; }

/* Grid */
.ca-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 16px;
}

.ca-tile {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  animation: ca-fadeup .32s cubic-bezier(.16,1,.3,1) both;
}
.ca-tile:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 12px;
}

.ca-tile-img {
  position: relative;
  aspect-ratio: 245/342;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  transition: box-shadow .2s ease, transform .2s ease;
}
.ca-tile:hover .ca-tile-img {
  transform: translateY(-3px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), 0 10px 24px rgba(0,0,0,.4);
}
.ca-tile-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ca-tile-fallback {
  position:absolute; inset:0; display:none; align-items:center; justify-content:center;
  font-size:32px; color:rgba(255,255,255,.25);
}
.ca-tile-rank {
  position:absolute; top:8px; left:8px; width:25px; height:25px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:11px; font-weight:700; color:var(--muted);
  background:rgba(5,6,12,.55);
}
.ca-tile-pct {
  position:absolute; top:8px; right:8px;
  font-family:var(--font-mono); font-size:10.5px; font-weight:700;
  padding:4px 8px; border-radius:999px; background:rgba(5,6,12,.55);
}

.ca-tile-body { padding:10px 1px 0; display:flex; flex-direction:column; gap:2px; }
.ca-tile-name {
  font-family: var(--body); font-weight:600; font-size:13.5px; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ca-tile-meta {
  font-family: var(--font-mono); font-size:9.5px; color:var(--muted);
  text-transform:uppercase; letter-spacing:.03em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ca-tile-price {
  font-family: var(--font-mono); font-weight:700; font-size:14px;
  color: var(--gold-bright); margin-top:2px;
}

.ca-tile-skel {
  aspect-ratio: 245/342; border-radius:12px; overflow:hidden;
  background: linear-gradient(90deg,rgba(255,255,255,.03) 0%,rgba(255,255,255,.09) 45%,rgba(255,255,255,.03) 90%);
  background-size: 700px 100%; animation: ca-shimmer 1.6s ease-in-out infinite;
}

/* Footer */
.ca-footer      { margin-top:20px; padding:12px 14px; background:rgba(255,255,255,.03);
                   border:1px solid rgba(255,255,255,.06); border-radius:11px;
                   display:flex; align-items:center; gap:10px;
                   font-size:11px; color:rgba(240,240,240,.4); line-height:1.5; }
.ca-footer-icon { font-size:14px; flex-shrink:0; width:30px; height:30px; border-radius:8px;
                   display:flex; align-items:center; justify-content:center;
                   background:rgba(207,167,46,.1); border:1px solid rgba(207,167,46,.18); }
.ca-footer strong { color:#cfa72e; font-weight:600; }
.ca-footer code   { color:rgba(124,111,255,.8); font-size:10px; }

/* ── Load More ───────────────────────────────── */
.ca-load-more-wrap {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.ca-counter {
  font-family: 'Sora', sans-serif;
  font-size: 11px;
  color: rgba(240,240,240,.38);
  text-align: center;
}
.ca-load-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 28px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-radius: 12px;
  color: var(--accent);
  font-family: 'Sora', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.ca-load-more-btn:hover {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
}
.ca-load-more-btn:active { transform: scale(.98); }
.ca-end-msg {
  display: none;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  letter-spacing: .06em;
}

/* ============================================================
   POKÉSCAN — scanner fotocamera
   Montato su document.body (fuori dall'header) per evitare
   il containing-block del backdrop-filter su mobile ≤720px.
   ============================================================ */
.scanner-overlay {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: #000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: env(safe-area-inset-bottom);
}

/* ---- Header barra superiore ---- */
.scanner-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    padding-top: calc(12px + env(safe-area-inset-top));
    background: rgba(0,0,0,.55);
    flex-shrink: 0;
    z-index: 1;
}
.scanner-title {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    letter-spacing: .04em;
}
.scanner-header .icon-btn {
    color: #fff;
    background: rgba(255,255,255,.12);
    border: none;
    border-radius: var(--r-pill);
    width: 38px; height: 38px;
    font-size: 16px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background var(--dur-fast) var(--ease-out);
}
.scanner-header .icon-btn:hover { background: rgba(255,255,255,.22); }
.scanner-flash--on  { color: #f0c030 !important; }
.scanner-ja-btn--on { color: var(--accent) !important; border-color: var(--accent) !important; }

/* ---- Stage video ---- */
.scanner-stage {
    flex: 1;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
}
.scanner-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.scanner-stage--nocam .scanner-video { display: none; }
.scanner-stage--nocam {
    background: var(--surface);
}

/* ---- Frame guida carta (aspect-ratio 63/88) ---- */
.scanner-frame {
    position: absolute;
    /* 75vw max 320px, altezza proporzionale a 63:88 */
    width: min(75vw, 320px);
    aspect-ratio: 63/88;
    border-radius: var(--r-sm);
    pointer-events: none;
}

/* Corner brackets */
.scanner-corners {
    position: absolute;
    inset: 0;
}
.scanner-corners span {
    position: absolute;
    width: 22px; height: 22px;
    border-color: #fff;
    border-style: solid;
    border-width: 0;
}
.sc-tl { top: 0; left: 0;  border-top-width: 3px; border-left-width:  3px; border-top-left-radius:     var(--r-xs); }
.sc-tr { top: 0; right: 0; border-top-width: 3px; border-right-width: 3px; border-top-right-radius:    var(--r-xs); }
.sc-bl { bottom: 0; left: 0;  border-bottom-width: 3px; border-left-width:  3px; border-bottom-left-radius:  var(--r-xs); }
.sc-br { bottom: 0; right: 0; border-bottom-width: 3px; border-right-width: 3px; border-bottom-right-radius: var(--r-xs); }

/* Riquadro guida numero (bottom-left della carta) — colore iris */
.scanner-num-guide {
    position: absolute;
    left:   1%;
    bottom: 1%;
    width:  20%;
    height: 8%;
    border: 2px solid var(--iris);
    border-radius: var(--r-xs);
    box-shadow: 0 0 0 2px var(--iris-glow), inset 0 0 8px var(--iris-glow);
}

/* Fascio di scansione animato */
.scanner-beam {
    position: absolute;
    left: 0; right: 0;
    top: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--iris), transparent);
    animation: scanner-sweep 2s ease-in-out infinite;
    opacity: .85;
}
@keyframes scanner-sweep {
    0%   { top: 5%;   opacity: .85; }
    50%  { top: 90%;  opacity: .85; }
    100% { top: 5%;   opacity: .85; }
}
@media (prefers-reduced-motion: reduce) {
    .scanner-beam { animation: none; opacity: 0; }
}

/* ---- Hint testuale ---- */
.scanner-hint {
    text-align: center;
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: rgba(255,255,255,.65);
    letter-spacing: .08em;
    padding: 8px 20px 0;
    flex-shrink: 0;
}
.scanner-hint--error { color: var(--down); }

/* ---- Barra azioni (upload | shutter | spacer) ---- */
.scanner-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 32px 14px;
    flex-shrink: 0;
}
.scanner-actions-spacer { width: 44px; }

/* Bottone upload */
.scanner-upload-btn {
    width: 44px; height: 44px;
    border-radius: var(--r-pill);
    border: none;
    background: rgba(255,255,255,.12);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background var(--dur-fast) var(--ease-out);
}
.scanner-upload-btn:hover { background: rgba(255,255,255,.22); }

/* Pulsante shutter */
.scanner-shutter {
    width: 68px; height: 68px;
    border-radius: 50%;
    border: 4px solid #fff;
    background: rgba(255,255,255,.18);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: transform var(--dur-fast) var(--ease-spring), background var(--dur-fast);
    flex-shrink: 0;
}
.scanner-shutter:active,
.scanner-shutter--scanning { transform: scale(.88); background: rgba(255,255,255,.35); }
.scanner-shutter:disabled  { opacity: .4; cursor: not-allowed; }
.scanner-shutter-dot {
    width: 50px; height: 50px;
    border-radius: 50%;
    background: #fff;
    transition: transform var(--dur-fast) var(--ease-spring);
}
.scanner-shutter--scanning .scanner-shutter-dot {
    background: var(--iris);
}

/* ---- Status line ---- */
.scanner-status {
    text-align: center;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--iris);
    letter-spacing: .10em;
    text-transform: uppercase;
    padding: 0 20px 6px;
    min-height: 20px;
    flex-shrink: 0;
}

/* ---- Bottom sheet candidati ---- */
.scanner-sheet {
    background: var(--panel);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    border-top: 1px solid var(--border-bright);
    flex-shrink: 0;
    max-height: 60vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.scanner-sheet.hidden { display: none; }
.scanner-sheet-inner { padding: 16px; }
.scanner-sheet-label {
    font-family: var(--font-mono);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.scanner-sheet-label::before {
    content: "";
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
}
.scanner-candidates { display: flex; flex-direction: column; gap: 10px; }

/* Singolo candidato */
.scanner-candidate {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 10px;
    transition: border-color var(--dur-fast);
}
.scanner-candidate--owned { border-color: var(--gold); }
.scanner-cand-img {
    width: 44px;
    aspect-ratio: 63/88;
    border-radius: 4px;
    overflow: hidden;
    background: var(--surface-high);
    flex-shrink: 0;
}
.scanner-cand-img img { width: 100%; height: 100%; object-fit: cover; }
.scanner-cand-placeholder { width: 100%; height: 100%; background: var(--surface-high); }
.scanner-cand-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.scanner-cand-name {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.scanner-cand-set {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.scanner-add-btn {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1px solid var(--border-bright);
    background: transparent;
    color: var(--gold);
    font-size: 17px;
    cursor: pointer;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    transition: background var(--dur-fast), border-color var(--dur-fast);
}
.scanner-add-btn:hover { background: var(--gold-glow); border-color: var(--gold); }
.scanner-candidate--owned .scanner-add-btn { color: var(--gold); background: var(--gold-glow); }

.scanner-no-match {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--muted);
    text-align: center;
    padding: 8px 0;
}
.scanner-sheet-actions {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}
.scanner-sheet-actions .btn-ghost {
    flex: 1;
    padding: 9px 12px;
    border: 1px solid var(--border-bright);
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--text);
    font-family: var(--body);
    font-size: 13px;
    cursor: pointer;
    text-align: center;
    transition: background var(--dur-fast), border-color var(--dur-fast);
}
.scanner-sheet-actions .btn-ghost:hover { background: var(--surface-high); border-color: var(--border-bright); }

/* ---- Toast conferma ---- */
.scanner-toast {
    position: absolute;
    bottom: calc(160px + env(safe-area-inset-bottom));
    left: 50%; transform: translateX(-50%);
    background: color-mix(in srgb, var(--panel) 92%, transparent);
    border: 1px solid var(--border-bright);
    border-radius: var(--r-pill);
    padding: 10px 20px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--gold);
    white-space: nowrap;
    pointer-events: none;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.scanner-toast.hidden { display: none; }