/* =========================================================
     MONARCH HOARD - CLEAN STYLE.CSS
     Dark fantasy / purple dashboard layout
     ========================================================= */
/* ---------------------------------------------------------
     02. BASE
     --------------------------------------------------------- */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    color: var(--text-color);
    font-family: "Orbitron", sans-serif;
    background: linear-gradient(
            rgba(var(--bg-rgb), 0.42),
            rgba(var(--bg-rgb), 0.92) 420px,
            rgba(var(--bg-rgb), 0.98) 100%
        ),
        var(--mh-header-bg-img, url("/static/img/ui/mh_header_bg.jpg"));
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    overflow-x: hidden;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
    background-size: 44px 44px;
    opacity: 0.35;
    z-index: -1;
}

h1,
h2,
h3 {
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 3px;
    text-shadow: 0 0 4px #ffffff,
        0 0 8px var(--accent-color);
}

/* ---------------------------------------------------------
     03. LAYOUT PRINCIPALE
     --------------------------------------------------------- */

.app-shell {
    display: grid;
    grid-template-columns: 270px minmax(910px, 1fr);
    min-height: 100vh;
    min-width: 1180px;
}

.main-area {
    padding: 30px;
    max-width: 2200px;   /* prima era 1560px: ora si adatta a schermi molto piu' larghi */
    width: 100%;
    min-width: 810px;
    margin: 0 auto;      /* rete di sicurezza: su monitor ultra-wide lo spazio residuo
                             si distribuisce ai lati invece di restare tutto a destra */
}

/* ---------------------------------------------------------
     04. SIDEBAR
     --------------------------------------------------------- */

.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    min-width: 270px;
    padding: 26px 18px;
    border-right: 1px solid rgba(var(--accent-rgb), 0.22);
    background: linear-gradient(to bottom, rgba(var(--bg-soft-rgb), 0.96), rgba(var(--bg-rgb), 0.94)),
        radial-gradient(circle at bottom, rgba(var(--accent-rgb), 0.32), transparent 42%);
    box-shadow: inset -1px 0 0 rgba(255,255,255,0.04),
        12px 0 40px rgba(0,0,0,0.45);
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.sidebar::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 135px;
    width: 100%;
    height: 360px;
    pointer-events: none;
    background: linear-gradient(to top, rgba(var(--bg-rgb), 0.95), transparent 45%, rgba(var(--bg-rgb), 0.75)),
        var(--mh-sidebar-bottom-img, url("/static/img/ui/mh_sidebar_bottom.jpg"));
    background-size: cover;
    background-position: bottom center;
    opacity: 0.55;
    z-index: 0;
}

.sidebar > * {
    position: relative;
    z-index: 2;
}

.sidebar-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.sidebar-logo img:first-child {
    width: 88px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 0 14px rgba(var(--accent-rgb), 0.55));
}

.sidebar-wordmark {
    width: 190px;
    height: auto;
    object-fit: contain;
    opacity: 0.95;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.side-nav-btn {
    width: 100%;
    height: 58px;
    border: 1px solid rgba(var(--accent-rgb), 0.16);
    border-radius: 8px;
    background: rgba(var(--bg-soft-rgb), 0.58);
    color: var(--text);
    font-family: inherit;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 18px;
    cursor: pointer;
    transition: 0.22s ease;
}

.side-nav-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    max-width: 40px;
    max-height: 40px;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
    filter: drop-shadow(0 0 8px rgba(var(--accent-rgb), 0.65));
    opacity: 0.9;
    transition: 0.22s ease;
}

.side-nav-btn:hover .side-nav-icon,
.side-nav-btn.active .side-nav-icon {
    opacity: 1;
    filter: drop-shadow(0 0 8px rgba(var(--accent-rgb), 0.85))
        drop-shadow(0 0 14px rgba(var(--accent-rgb), 0.45));
}

.side-nav-btn:hover,
.side-nav-btn.active {
    color: #ffffff;
    border-color: rgba(var(--accent-rgb), 0.8);
    background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.34), rgba(var(--accent-rgb), 0.08));
    box-shadow: inset 0 0 22px rgba(var(--accent-rgb), 0.12),
        0 0 18px rgba(var(--accent-rgb), 0.25);
}

.side-nav-btn.disabled {
    opacity: 0.6;
    cursor: default;
}

.side-nav-btn.disabled:hover {
    border-color: rgba(var(--accent-rgb), 0.16);
    background: rgba(var(--bg-soft-rgb), 0.58);
    box-shadow: none;
}

/* ---------------------------------------------------------
     05. PLAYER BOX SIDEBAR
     --------------------------------------------------------- */

.sidebar-player {
    margin-top: auto;
    padding: 16px;
    border: 1px solid rgba(var(--accent-rgb), 0.22);
    border-radius: 12px;
    background: rgba(var(--bg-soft-rgb), 0.78);
    box-shadow: inset 0 0 18px rgba(var(--accent-rgb), 0.08);
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 12px;
    align-items: center;
}

.player-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--accent-rgb), 0.95), rgba(var(--bg-elevated-rgb), 0.8));
    box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.55);
}

.player-name {
    color: #ffffff;
    font-size: 0.88rem;
}

.player-rank {
    color: var(--accent-soft);
    font-size: 0.78rem;
    margin-top: 4px;
}

.player-xp {
    grid-column: 1 / -1;
}

.xp-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.62rem;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.xp-bar {
    height: 7px;
    background: rgba(255,255,255,0.08);
    border-radius: 99px;
    overflow: hidden;
}

.xp-fill {
    width: 0%;
    transition: width 0.5s ease;
    height: 100%;
    background: linear-gradient(90deg, var(--accent-deep), var(--accent-soft));
    box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.8);
}

/* ---------------------------------------------------------
     06. HEADER / HERO
     --------------------------------------------------------- */

.hero-panel {
    position: relative;
    min-height: 0px;
    margin: 0;
    border-radius: 0;
    border: none;
    overflow: visible;
    background: transparent;
    box-shadow: none;
}
.hero-stats {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(4, auto);
    gap: 0;
    max-width: none;
    margin: 0;
    border-radius: 8px;
    background: rgba(var(--bg-rgb), 0.76);
    border: 1px solid rgba(var(--accent-rgb), 0.20);
    box-shadow: inset 0 0 14px rgba(var(--accent-rgb), 0.06),
        0 6px 16px rgba(0, 0, 0, 0.38);
    backdrop-filter: blur(8px);
    overflow: hidden;
}
.hero-stat-card {
    min-height: 0px;
    padding: 8px 14px;
    background: rgba(var(--bg-rgb), 0.42);
    border-right: 1px solid rgba(var(--accent-rgb), 0.18);
    display: flex;
    align-items: center;
    gap: 10px;
}
.hero-stat-card:last-child {
    border-right: none;
}
.hero-stat-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
}
.hero-stat-icon img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    filter: none;
}
.hero-stat-label {
    color: var(--text-muted);
    font-size: 0.56rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 2px;
    white-space: nowrap;
}
.hero-stat-value {
    color: #ffffff;
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

/* ---------------------------------------------------------
     08. FILTRI / SEARCH BAR
     --------------------------------------------------------- */

.search-bar {
    position: relative;
    z-index: 1000;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    min-height: 96px;
    margin: 12px 0 28px 0;
    padding: 22px 24px;
    border-radius: 0;
    border-top: 1px solid rgba(var(--accent-rgb), 0.20);
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.20);
    border-left: none;
    border-right: none;
    background: rgba(var(--bg-rgb), 0.72);
    box-shadow: inset 0 0 18px rgba(var(--accent-rgb), 0.06),
        0 10px 30px rgba(0,0,0,0.38);
}

.search-row {
    position: relative;
    width: 540px;
    min-width: 540px;
    margin: 0;
}

.search-row::before {
    content: "⌕";
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 1.35rem;
    z-index: 2;
    pointer-events: none;
}

.search-input {
    width: 100%;
    height: 48px;
    padding: 0 16px 0 46px;
    box-sizing: border-box;
    background: rgba(var(--bg-rgb), 0.82);
    border: 1px solid rgba(var(--accent-rgb), 0.24);
    color: #ffffff;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.86rem;
}

.search-input::placeholder {
    color: rgba(var(--text-rgb), 0.42);
}

.search-input:focus {
    outline: none;
    border-color: rgba(var(--accent-soft-rgb), 0.52);
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.35),
        0 0 16px rgba(var(--accent-rgb), 0.18);
}

.filters-row {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    flex-wrap: wrap;
}

#rarity-button {
    min-width: 110px;
}

#set-button {
    min-width: 105px;
}

#owned-button {
    min-width: 120px;
}

#sort-cards-button {
    min-width: 175px;
}

#sort-set-button {
    min-width: 195px;
}

.set-toggle-btn {
    min-width: 115px;
}

.action-filter-btn {
    margin-left: auto;
    min-width: 145px;
    padding: 0 18px;
    background: rgba(var(--accent-rgb), 0.10);
    border-color: rgba(var(--accent-rgb), 0.35);
    font-size: 0.82rem;
}

.action-filter-btn::before {
    content: "↻";
    margin-right: 9px;
    color: var(--accent);
    font-size: 1.25rem;
    transform: translateY(-1px);
    display: inline-block;
}

.set-toggle-btn:hover,
.action-filter-btn:hover {
    color: #ffffff;
    background: rgba(var(--bg-elevated-rgb), 0.82);
    border-color: rgba(var(--accent-soft-rgb), 0.50);
    box-shadow: inset 0 0 18px rgba(var(--accent-rgb), 0.05),
        0 0 14px rgba(var(--accent-rgb), 0.16);
}

/* ---------------------------------------------------------
     09. SET / GRIGLIA CARTE
     --------------------------------------------------------- */

.set-section {
    position: relative;
    margin-bottom: 24px;
    border-radius: 14px;
    border: 1px solid rgba(var(--accent-rgb), 0.20);
    background-color: rgba(var(--bg-soft-rgb), 0.72);
    background-blend-mode: overlay;
    box-shadow: inset 0 0 24px rgba(var(--accent-rgb), 0.06),
        0 16px 40px rgba(0,0,0,0.45);
    overflow: hidden;
}

.set-header {
    min-height: 64px;
    padding: 18px 22px;
    background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.18), rgba(var(--accent-rgb), 0.04));
    color: #ffffff;
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.20);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
}

.set-header:hover {
    background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.28), rgba(var(--accent-rgb), 0.08));
}

.set-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 22px;
    padding: 24px;
    max-height: none;
    overflow: visible;
    opacity: 1;
    transition: padding 0.4s ease-in-out,
        opacity 0.3s ease-in-out,
        gap 0.4s ease-in-out;
}

.set-section.collapsed .set-grid {
    max-height: 0;
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 0;
    gap: 0;
    opacity: 0;
}

.set-title-text {
    color: #060811;
    font-weight: bold;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
    background-color: #ffffff;
    padding: 2px 8px;
    border-radius: 4px;
    box-shadow: 0 0 5px rgba(255,255,255,0.2);
}

/* ---------------------------------------------------------
     10. CARD COLLEZIONE
     --------------------------------------------------------- */

.card {
    position: relative;
    padding: 38px 12px 14px 12px;
    min-height: 375px;
    text-align: center;
    cursor: pointer;
    border-radius: 12px;
    border: 1px solid rgba(var(--accent-rgb), 0.20);
    background: linear-gradient(180deg, rgba(var(--bg-elevated-rgb), 0.86), rgba(var(--bg-rgb), 0.96)),
        radial-gradient(circle at 50% 18%, rgba(var(--accent-rgb), 0.18), transparent 42%);
    box-shadow: inset 0 0 18px rgba(var(--accent-rgb), 0.045),
        0 10px 24px rgba(0, 0, 0, 0.38);
    overflow: hidden;
    transition: transform 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease,
        background 0.22s ease;
}

.card-wishlist-row {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 7px;
    min-height: 26px;
}

.card-wishlist-row .wishlist-btn {
    font-size: 1.25rem;
    line-height: 1;
}

.card:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--accent-soft-rgb), 0.78);
    box-shadow: inset 0 0 22px rgba(var(--accent-rgb), 0.08),
        0 0 22px rgba(var(--accent-rgb), 0.26),
        0 16px 34px rgba(0, 0, 0, 0.52);
}

.card.not-owned {
    opacity: 1;
    border-color: rgba(var(--text-dim-rgb), 0.14);
    background: linear-gradient(180deg, rgba(var(--bg-soft-rgb), 0.72), rgba(var(--bg-rgb), 0.94));
}

.card.not-owned .card-img {
    filter: grayscale(92%)
        brightness(0.62)
        drop-shadow(0 8px 14px rgba(0, 0, 0, 0.5));
    opacity: 0.58;
}

.card-image-container {
    position: relative;
    width: 100%;
    height: 225px;
    margin: 8px 0 12px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-radius: 9px;
    border: 1px solid rgba(var(--accent-rgb), 0.16);
    background: radial-gradient(circle at center, rgba(var(--accent-rgb), 0.16), transparent 48%),
        linear-gradient(180deg, rgba(255,255,255,0.025), rgba(0,0,0,0.22));
    box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.26);
}

.card-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.55))
        drop-shadow(0 0 8px rgba(var(--accent-rgb), 0.16));
    transition: transform 0.22s ease, filter 0.22s ease;
}

.card-code {
    color: rgba(var(--text-muted-rgb), 0.74);
    font-size: 0.68rem;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    margin-top: 2px;
}

.card-name {
    color: #ffffff;
    font-size: 0.78rem;
    line-height: 1.25;
    letter-spacing: 0.25px;
    margin: 7px 0 8px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 0 10px rgba(var(--accent-rgb), 0.20);
}

.card-rarity {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid rgba(var(--accent-rgb), 0.24);
    background: rgba(var(--accent-rgb), 0.13);
    color: rgba(var(--text-rgb), 0.92);
    font-size: 0.62rem;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.card-rarity-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 6px;
    min-height: 24px;
}

/* ---------------------------------------------------------
     11. QUANTITÀ / WISHLIST
     --------------------------------------------------------- */

.quantity-control {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
}

.btn-qty {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    border: 1px solid rgba(var(--accent-rgb), 0.22);
    background: rgba(var(--bg-rgb), 0.72);
    color: rgba(var(--text-rgb), 0.86);
    font-size: 0.92rem;
    font-weight: bold;
    font-family: inherit;
    cursor: pointer;
    box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.28);
    transition: 0.18s ease;
}

.btn-qty:hover {
    background: rgba(var(--accent-rgb), 0.24);
    color: #ffffff;
    border-color: rgba(var(--accent-soft-rgb), 0.62);
    box-shadow: 0 0 13px rgba(var(--accent-rgb), 0.24);
}

.btn-qty:disabled {
    opacity: 0.5;
    cursor: wait;
    background: rgba(255,255,255,0.02);
    border-color: rgba(255,255,255,0.05);
    transform: none !important;
    box-shadow: none !important;
}

.qty-input {
    width: 46px;
    height: 30px;
    text-align: center;
    border-radius: 7px;
    border: 1px solid rgba(var(--accent-rgb), 0.20);
    background: rgba(var(--bg-rgb), 0.74);
    color: #ffffff;
    font-family: inherit;
    font-size: 0.78rem;
    box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.28);
    -moz-appearance: textfield;
}

.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.qty-input:focus {
    outline: none;
    border-color: var(--accent-color);
}

.wishlist-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.4);
    font-size: 1.05rem;
    opacity: 0.85;
    transition: transform 0.2s ease, color 0.2s ease;
    z-index: 5;
}

.wishlist-btn.active {
    color: var(--danger);
    transform: scale(1.1);
    text-shadow: 0 0 12px rgba(var(--danger-rgb), 0.65);
}

.wishlist-btn:not(.active):hover {
    color: #ffffff;
    transform: scale(1.1);
}

/* ---------------------------------------------------------
     12. DASHBOARD CENTRALE
     --------------------------------------------------------- */

#dashboard-container {
    display: grid;
    gap: 22px;
}

.mh-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(360px, 0.85fr);
    grid-template-areas: "progress sets"
        "latest wishlist";
    gap: 22px;
}

.mh-panel {
    position: relative;
    border: 1px solid rgba(var(--accent-rgb), 0.22);
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(var(--bg-soft-rgb), 0.90), rgba(var(--bg-rgb), 0.88)),
        radial-gradient(circle at 70% 20%, rgba(var(--accent-rgb), 0.18), transparent 34%);
    box-shadow: inset 0 0 28px rgba(var(--accent-rgb), 0.06),
        0 18px 45px rgba(0,0,0,0.42),
        0 0 18px rgba(var(--accent-rgb), 0.08);
    overflow: hidden;
}

.mh-collection-progress {
    grid-area: progress;
    min-height: 390px;
    padding: 24px;
}

.mh-set-panel {
    grid-area: sets;
    min-height: 390px;
    padding: 22px;
}

.mh-latest-panel {
    grid-area: latest;
    padding: 22px;
}

.mh-wishlist-panel {
    grid-area: wishlist;
    padding: 22px;
}

.mh-panel-title {
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 6px;
    font-size: 0.9rem;
    margin-bottom: 22px;
    text-shadow: 0 0 14px rgba(var(--accent-rgb), 0.9);
}

.mh-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mh-link-btn {
    background: none;
    border: none;
    color: var(--accent-soft);
    font-family: inherit;
    cursor: pointer;
    font-size: 0.78rem;
    text-transform: uppercase;
}

.mh-link-btn:hover {
    color: #ffffff;
    text-shadow: 0 0 12px rgba(var(--accent-rgb), 0.9);
}

/* ---------------------------------------------------------
     13. DASHBOARD - PROGRESS CIRCLE
     --------------------------------------------------------- */

.mh-progress-content {
    display: grid;
    grid-template-columns: 280px 1fr;
    align-items: center;
    gap: 20px;
    min-height: 210px;
}

.mh-progress-ring {
    --size: 260px;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    margin: 0 auto;
    display: grid;
    place-items: center;
    position: relative;
    background: transparent;
    box-shadow: none;
}

/* Overlay che si illumina con la percentuale */

.mh-progress-ring::after {
    content: "";
    position: absolute;
    inset: -20px;
    background: var(--mh-progress-ring-img, url("/static/img/ui/progress_ring_deco.png")) center/contain no-repeat;
    -webkit-mask: conic-gradient(
        from 0deg,
        black 0deg,
        black calc(var(--progress) * 3.6deg),
        transparent calc(var(--progress) * 3.6deg),
        transparent 360deg
    );
    mask: conic-gradient(
        from 0deg,
        black 0deg,
        black calc(var(--progress) * 3.6deg),
        transparent calc(var(--progress) * 3.6deg),
        transparent 360deg
    );
    filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), 0.7))
            drop-shadow(0 0 12px rgba(var(--accent-rgb), 0.4));
    pointer-events: none;
    z-index: 3;
    display: block;
}

.mh-progress-inner {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--bg-elevated-rgb), 0.98), rgba(var(--bg-rgb), 0.98));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 5;
    border: 1px solid rgba(var(--accent-rgb), 0.26);
}

.mh-progress-number {
    font-size: 2.45rem;
    color: #ffffff;
    font-weight: 700;
    letter-spacing: 1px;
    text-shadow: 0 0 18px rgba(var(--accent-rgb), 0.9);
}

.mh-progress-sub {
    color: var(--text);
    font-size: 0.95rem;
    margin-top: 8px;
}

.mh-progress-label {
    color: var(--text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    margin-top: 6px;
}

.mh-progress-creature {
    height: 210px;
    border-radius: 14px;
    background: radial-gradient(circle at center, rgba(var(--accent-rgb), 0.42), transparent 28%),
        radial-gradient(circle at center, rgba(var(--bg-elevated-rgb), 0.95), transparent 58%);
    position: relative;
    overflow: hidden;
}

/* ---------------------------------------------------------
     14. DASHBOARD - MINI STATS
     --------------------------------------------------------- */

.mh-mini-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-top: 20px;
}

.mh-mini-stat {
    min-height: 108px;
    border: 1px solid rgba(var(--accent-rgb), 0.25);
    border-radius: 10px;
    background: rgba(var(--bg-rgb), 0.58);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: inset 0 0 18px rgba(var(--accent-rgb), 0.07);
}

.mh-mini-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mh-mini-icon img {
    width: 52px;
    height: 52px;
    object-fit: contain;
}

.mh-mini-value {
    color: #ffffff;
    font-size: 1.45rem;
    font-weight: 700;
}

.mh-mini-label {
    color: var(--text-muted);
    text-transform: uppercase;
    font-size: 0.68rem;
    letter-spacing: 1px;
}

/* ---------------------------------------------------------
     15. DASHBOARD - SET PROGRESS
     --------------------------------------------------------- */

.mh-set-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mh-set-progress-item {
    display: grid;
    grid-template-columns: 58px 1fr 78px;
    align-items: center;
    gap: 14px;
    min-height: 82px;
    padding: 12px;
    border: 1px solid rgba(var(--accent-rgb), 0.13);
    border-radius: 10px;
    background: rgba(var(--bg-rgb), 0.52);
}

.mh-set-thumb {
    width: 58px;
    height: 58px;
    border-radius: 8px;
    background: radial-gradient(circle, rgba(var(--accent-rgb), 0.32), rgba(0,0,0,0.35));
    border: 1px solid rgba(var(--accent-rgb), 0.18);
    overflow: hidden;
}

.mh-set-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mh-set-name {
    color: #ffffff;
    font-size: 0.82rem;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.mh-set-sub {
    color: var(--text-muted);
    font-size: 0.7rem;
    margin-bottom: 10px;
}

.mh-set-bar {
    height: 7px;
    background: rgba(255,255,255,0.08);
    border-radius: 100px;
    overflow: hidden;
}

.mh-set-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-deep), var(--accent-soft));
    box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.9);
}

.mh-set-numbers {
    text-align: right;
    color: #ffffff;
    font-size: 0.78rem;
}

.mh-set-numbers span {
    display: block;
    margin-top: 10px;
    color: var(--text-muted);
    font-size: 0.68rem;
}

/* ---------------------------------------------------------
     16. DASHBOARD - CARD PICCOLE
     --------------------------------------------------------- */

.mh-card-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(105px, 1fr));
    gap: 14px;
}

.mh-card-row.compact {
    grid-template-columns: repeat(4, minmax(90px, 1fr));
}

.mh-small-card {
    position: relative;
    min-height: 210px;
    border: 1px solid rgba(var(--accent-rgb), 0.25);
    border-radius: 10px;
    padding: 8px;
    background: linear-gradient(180deg, rgba(var(--bg-elevated-rgb), 0.9), rgba(var(--bg-rgb), 0.94));
    cursor: pointer;
    overflow: hidden;
    transition: 0.2s ease;
}

.mh-small-card:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--accent-soft-rgb), 0.9);
    box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.35);
}

.mh-small-card img {
    width: 100%;
    height: 150px;
    object-fit: contain;
    display: block;
    margin-top: 30px;
    filter: drop-shadow(0 0 10px rgba(var(--accent-rgb), 0.25));
}

.mh-small-rarity {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 6;
    min-width: 34px;
    height: 26px;
    padding: 0 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid rgba(var(--danger-rgb), 0.85);
    background: linear-gradient(135deg, rgba(70, 12, 35, 0.98), rgba(150, 28, 65, 0.95));
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    box-shadow: 0 0 12px rgba(var(--danger-rgb), 0.42),
        inset 0 0 8px rgba(255, 255, 255, 0.12);
}

.mh-small-card-name {
    color: #ffffff;
    font-size: 0.66rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 8px;
}

.mh-small-card-code {
    color: var(--text-muted);
    font-size: 0.58rem;
    margin-top: 4px;
}

.mh-wide-btn:hover {
    color: #ffffff;
    background: rgba(var(--accent-rgb), 0.18);
    box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.28);
}


/* ---------------------------------------------------------
     17. MODAL CARTA
     --------------------------------------------------------- */

.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.78);
    z-index: 99999;
}

.modal.open {
    display: flex;
}

.modal-content {
    display: flex;
    flex-direction: column;
    background: rgba(var(--bg-soft-rgb), 0.96);
    border: 1px solid rgba(var(--accent-soft-rgb), 0.75);
    padding: 10px;
    border-radius: 12px;
    max-width: 600px;
    width: 90%;
    text-align: center;
    box-shadow: 0 0 38px rgba(var(--accent-rgb), 0.36);
    max-height: 92vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--accent-rgb), 0.6) transparent;
}

/* Solo l'immagine può rimpicciolirsi: testi e controlli restano interi */

.modal-content > * {
    flex-shrink: 0;
}

/* Scrollbar in tema (Chrome / Edge) */

.modal-content::-webkit-scrollbar {
    width: 8px;
}

.modal-content::-webkit-scrollbar-track {
    background: transparent;
}

.modal-content::-webkit-scrollbar-thumb {
    background: rgba(var(--accent-rgb), 0.45);
    border-radius: 99px;
}

.modal-content::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--accent-soft-rgb), 0.75);
}

.modal-img-container {
    position: relative;
    width: 100%;
    height: 620px;
    min-height: 220px;
    flex: 0 1 auto;
    margin-bottom: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

#modal-card-name {
    color: var(--accent-soft);
    font-size: 2rem;
    margin: 15px 0;
    text-transform: uppercase;
}

.modal-content p {
    color: #ffffff;
    font-size: 1.2rem;
    font-family: "Orbitron", sans-serif;
    margin: 10px 0;
}

#modal-card-code {
    color: var(--text-muted);
    font-size: 1rem;
}

#modal-card-qty {
    color: var(--accent-soft);
    font-weight: bold;
    font-size: 1.3rem;
}

.close-btn:hover {
    background: var(--accent-color);
    color: #ffffff;
}

.modal-content .close-btn {
    position: static;
    margin-top: 0;
    width: auto;
    align-self: center;
    padding: 10px 40px;
    background: rgba(var(--bg-soft-rgb), 0.96);
    backdrop-filter: blur(4px);
    z-index: 20;
}

.modal-footer {
    position: sticky;
    bottom: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 12px;
    padding: 8px 10px;
    background: rgba(var(--bg-soft-rgb), 0.96);
    backdrop-filter: blur(4px);
}

/* ---------------------------------------------------------
     18. UTILITY
     --------------------------------------------------------- */

.search-highlight {
    background: var(--accent-color);
    color: #ffffff;
    padding: 0 2px;
    border-radius: 3px;
    font-weight: bold;
}

.hidden {
    display: none !important;
}

/* ---------------------------------------------------------
     19. RESPONSIVE CONTROLLATO
     Mantiene sempre la struttura sidebar + contenuto
     --------------------------------------------------------- */

/* L'app non deve diventare mobile sotto una certa larghezza */

html,
body {
    min-width: 1180px;
}

/* La dashboard può adattarsi un po', ma senza distruggere la struttura */

@media (max-width: 1350px) {
    .mh-dashboard-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "progress"
            "sets"
            "latest"
            "wishlist";
    }

    .mh-progress-content {
    grid-template-columns: 280px 1fr;
    }

    .mh-card-row,
    .mh-card-row.compact {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }
}

/* ---------------------------------------------------------
     20. EFFETTI PREMIUM CARD
     --------------------------------------------------------- */

/* Linea luminosa superiore */

.card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 18px;
    right: 18px;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(var(--accent-soft-rgb), 0.75),
        transparent
    );
    opacity: 0.55;
}

/* Piccolo glow interno */

.card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 50% 18%, rgba(var(--accent-rgb), 0.16), transparent 36%),
        linear-gradient(135deg, rgba(255,255,255,0.035), transparent 34%);
    opacity: 0;
    transition: opacity 0.22s ease;
}

.card:hover::after {
    opacity: 1;
}

/* Mini cornice dentro area immagine */

.card-image-container::before {
    content: "";
    position: absolute;
    inset: 7px;
    border-radius: 7px;
    border: 1px solid rgba(255, 255, 255, 0.035);
    pointer-events: none;
}

.card:hover .card-img {
    transform: scale(1.035);
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.65))
        drop-shadow(0 0 13px rgba(var(--accent-rgb), 0.26));
}

.card.not-owned .card-image-container {
    background: radial-gradient(circle at center, rgba(var(--text-dim-rgb), 0.10), transparent 48%),
        linear-gradient(180deg, rgba(255,255,255,0.018), rgba(0,0,0,0.28));
}

.card.not-owned .card-name,
.card.not-owned .card-code,
.card.not-owned .card-rarity {
    opacity: 0.58;
}

/* Hover anche sulle mancanti, ma più sobrio */

.card.not-owned:hover {
    border-color: rgba(var(--accent-rgb), 0.34);
}

.card.not-owned:hover .card-img {
    transform: scale(1.025);
    opacity: 0.68;
}

/* ---------------------------------------------------------
22. LOGIN
--------------------------------------------------------- */

.login-body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(rgba(var(--bg-rgb), 0.60), rgba(var(--bg-rgb), 0.96)),
        url("/static/img/ui/mh_background.jpg");
    background-size: cover;
    background-position: center;
}

.login-panel {
    width: 420px;
    height: auto;
    min-width: 420px;
    min-height: 420px;
    padding: 34px;
    border: 1px solid rgba(var(--accent-rgb), 0.35);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(var(--bg-soft-rgb), 0.94), rgba(var(--bg-rgb), 0.94));
    box-shadow: inset 0 0 28px rgba(var(--accent-rgb), 0.08),
        0 24px 60px rgba(0,0,0,0.58),
        0 0 28px rgba(var(--accent-rgb), 0.18);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.login-logo img {
    width: 150px;
    max-width: 150px;
    height: auto;
    display: block;
    margin: 0 auto;
}

.login-panel h1 {
    font-size: 1.45rem;
    margin: 18px 0 8px 0;
}

.login-subtitle {
    color: var(--text-muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 24px;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.login-form input {
    height: 46px;
    padding: 0 14px;
    border-radius: 8px;
    border: 1px solid rgba(var(--accent-rgb), 0.26);
    background: rgba(var(--bg-rgb), 0.82);
    color: #ffffff;
    font-family: inherit;
}

.login-form input:focus {
    outline: none;
    border-color: rgba(var(--accent-soft-rgb), 0.62);
    box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.20);
}

.login-form button {
    height: 42px;
    width: auto;
    margin: 8px auto 0 auto;
    border-radius: 8px;
    border: 1px solid rgba(var(--accent-rgb), 0.50);
    background: rgba(var(--accent-rgb), 0.18);
    color: #ffffff;
    font-family: inherit;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
}

.login-form button:hover {
    background: rgba(var(--accent-rgb), 0.32);
    box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.28);
}

.login-error {
    margin-bottom: 16px;
    padding: 10px;
    border-radius: 8px;
    background: rgba(var(--danger-rgb), 0.12);
    border: 1px solid rgba(var(--danger-rgb), 0.35);
    color: #ff8fa3;
    font-size: 0.78rem;
}

.login-hint {
    margin-top: 18px;
    color: var(--text-dim);
    font-size: 0.68rem;
}

.login-panel h1 img {
    max-width: 250px;
    height: auto;
}

/* ---------------------------------------------------------
     BARRA SUPERIORE (TOP BAR) & LOGOUT
     --------------------------------------------------------- */

.top-bar {
    display: flex;
    flex-wrap: wrap;
    row-gap: 12px;
    justify-content: space-between;
    align-items: center;
    padding: 15px 30px;
    background: var(--panel-bg);
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.15);
    margin-bottom: 0;
    width: 100%;
}

.top-bar-right {
    justify-content: flex-end;
}

.top-bar-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.top-bar-img {
    height: 45px;
    width: auto;
    object-fit: contain;
    display: block;
}

/* Il nome della collezione quando il logo non c'e' */
.top-bar-collezione {
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: .5px;
    color: var(--mh-testo, #e8ecf4);
}

/* Stile del Bottone Logout */

.logout-btn {
    display: inline-flex;
    align-items: center;
    background: rgba(var(--danger-rgb), 0.1);
    color: var(--danger-red);
    border: 1px solid rgba(var(--danger-rgb), 0.3);
    padding: 8px 16px;
    border-radius: 6px;
    text-decoration: none;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

/* Effetto al passaggio del mouse */

.logout-btn:hover {
    background: var(--danger-red);
    color: #ffffff;
    box-shadow: 0 0 12px rgba(var(--danger-rgb), 0.4);
    transform: translateY(-1px);
}

.login-link {
    color: var(--accent-soft);
    text-decoration: none;
    font-weight: bold;
    margin-left: 4px;
}

.login-link:hover {
    color: #ffffff;
    text-shadow: 0 0 10px rgba(var(--accent-rgb), 0.8);
}

/* ---------------------------------------------------------
     MODAL - overlay rarità / copie / wishlist sull'immagine
--------------------------------------------------------- */

.modal-img-container {
    position: relative;
}

/* Cuore wishlist inline sopra il quantity-control */

#modal-wishlist-btn.modal-wishlist-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    line-height: 1;
    background: rgba(var(--bg-rgb), 0.75);
    border: 1px solid rgba(var(--accent-rgb), 0.55);
    border-radius: 50%;
    color: #ffffff;
    opacity: 1;
    cursor: pointer;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.6);
    transition: transform 0.2s ease, border-color 0.2s ease;
}

#modal-wishlist-btn.modal-wishlist-btn.active {
    transform: translateY(-50%) scale(1.08);
    color: var(--danger);
    border-color: rgba(var(--danger-rgb), 0.75);
    text-shadow: 0 0 12px rgba(var(--danger-rgb), 0.75);
}

#modal-wishlist-btn.modal-wishlist-btn:hover {
    transform: translateY(-50%) scale(1.12);
    border-color: rgba(var(--accent-soft-rgb), 0.9);
}

/* Controlli quantità +/- nella modale */

.modal-quantity-control {
    justify-content: center;
    margin: 15px 0;
    gap: 12px;
}

.modal-quantity-control .btn-qty {
    width: 42px;
    height: 42px;
    font-size: 1.3rem;
}

.modal-quantity-control .qty-input {
    width: 64px;
    height: 42px;
    font-size: 1.1rem;
}

/* Badge doppioni nella modale - forza centraggio come nelle carte piccole */

#modal-duplicate-badge.duplicate-badge {
    top: 12px;
    right: 12px;
    min-width: 34px;
    height: 26px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    line-height: 26px;
    text-align: center;
    box-sizing: border-box;
}

/* Badge rarità nella modale - forza centraggio come nelle carte piccole */

#modal-card-rarity.collection-card-rarity {
    top: 4px;
    left: 4px;
    min-width: 34px;
    height: 26px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    line-height: 26px;
    text-align: center;
    box-sizing: border-box;
}

@keyframes badge-pop {
    0% {
    transform: scale(0);
    opacity: 0;
    }

    70% {
    transform: scale(1.2);
    opacity: 1;
    }

    100% {
    transform: scale(1);
    opacity: 1;
    }
}

.duplicate-badge {
    animation: badge-pop 0.35s ease-out;
}

@keyframes wishlist-pulse {
    0%, 100% {
    transform: scale(1);
    text-shadow: 0 0 12px rgba(var(--danger-rgb), 0.65);
    }

    50% {
    transform: scale(1.15);
    text-shadow: 0 0 20px rgba(var(--danger-rgb), 1),
                     0 0 30px rgba(var(--danger-rgb), 0.6);
    }
}

.wishlist-btn.active.pulse-once {
    animation: wishlist-pulse 1.4s ease-in-out 2;
}

/* Shine effect sul badge rarità (solo carte possedute rare) */

.collection-card-rarity.shine {
    position: absolute;
    overflow: hidden;
}

.collection-card-rarity.shine::after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 60%;
    height: 100%;
    background: linear-gradient(120deg,
        transparent,
        rgba(255, 255, 255, 0.55),
        transparent);
    animation: rarity-shine 2.8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes rarity-shine {
    0%, 55% {
    left: -60%;
    }

    100% {
    left: 130%;
    }
}


/* ---------------------------------------------------------
     24. LOADING SKELETON
--------------------------------------------------------- */

.skeleton-card {
    min-height: 375px;
    border-radius: 12px;
    border: 1px solid rgba(var(--accent-rgb), 0.15);
    background: linear-gradient(
        90deg,
        rgba(var(--bg-elevated-rgb), 0.6) 0%,
        rgba(var(--bg-elevated-rgb), 0.6) 50%,
        rgba(var(--bg-elevated-rgb), 0.6) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-pulse 1.4s ease-in-out infinite;
}

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

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

.skeleton-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 22px;
    padding: 24px;
}

/* ---------------------------------------------------------
     25. FLOATING FEEDBACK (+1 / -1)
--------------------------------------------------------- */

.float-feedback {
    position: fixed;
    font-family: "Orbitron", sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    pointer-events: none;
    z-index: 100001;
    animation: float-up 0.9s ease-out forwards;
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
}

.float-feedback.positive {
    color: var(--success);
    text-shadow: 0 0 10px rgba(var(--success-rgb), 0.9),
        0 0 4px rgba(0, 0, 0, 0.9);
}

.float-feedback.negative {
    color: var(--danger);
    text-shadow: 0 0 10px rgba(var(--danger-rgb), 0.9),
        0 0 4px rgba(0, 0, 0, 0.9);
}

@keyframes float-up {
    0% {
    transform: translate(-50%, 0) scale(0.8);
    opacity: 0;
    }

    20% {
    transform: translate(-50%, -8px) scale(1.2);
    opacity: 1;
    }

    100% {
    transform: translate(-50%, -45px) scale(1);
    opacity: 0;
    }
}

/* ---------------------------------------------------------
     26. MODAL NAVIGATION ARROWS (chunky style)
--------------------------------------------------------- */

.modal-nav-btn {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 30;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, var(--accent-soft), var(--accent-deep) 65%, var(--accent-deep) 100%);
    border: 2px solid rgba(255, 255, 255, 0.35);
    cursor: pointer;
    padding: 0;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.55),
        0 0 20px rgba(var(--accent-rgb), 0.55),
        inset 0 2px 6px rgba(255, 255, 255, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.modal-nav-btn:hover {
    transform: translateY(-50%) scale(1.10);
    filter: brightness(1.15);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6),
        0 0 28px rgba(var(--accent-soft-rgb), 0.85),
        inset 0 2px 6px rgba(255, 255, 255, 0.35);
}

.modal-nav-btn:active {
    transform: translateY(-50%) scale(0.96);
}

/* Freccia bianca disegnata con ::before (corpo) e ::after (punta triangolare) */

.modal-nav-btn::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 15px;
    height: 6px;
    background: #ffffff;
    transform: translate(-50%, -50%);
    border-radius: 1px;
}

.modal-nav-btn::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
}

/* Freccia SINISTRA */

.modal-nav-prev {
    left: calc(50% - 380px);
    right: auto;
}

.modal-nav-prev::before {
    transform: translate(-40%, -50%);
}

.modal-nav-prev::after {
    border-right: 14px solid #ffffff;
    transform: translate(-100%, -50%);
}

/* Freccia DESTRA */

.modal-nav-next {
    right: calc(50% - 380px);
    left: auto;
}

.modal-nav-next::before {
    transform: translate(-60%, -50%);
}

.modal-nav-next::after {
    border-left: 14px solid #ffffff;
    transform: translate(0%, -50%);
}

/* ---------------------------------------------------------
     27. RESULTS COUNTER
--------------------------------------------------------- */

.results-counter {
    padding: 8px 20px;
    margin: 0 0 16px 0;
    color: var(--accent-soft);
    font-family: "Orbitron", sans-serif;
    font-size: 0.78rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-shadow: 0 0 8px rgba(var(--accent-rgb), 0.4);
}

.results-counter .counter-highlight {
    color: #ffffff;
    font-weight: 700;
    text-shadow: 0 0 12px rgba(var(--accent-rgb), 0.8);
}

.results-counter.filtered {
    color: var(--gold);
    text-shadow: 0 0 8px rgba(var(--gold-rgb), 0.4);
}

.results-counter.filtered .counter-highlight {
    text-shadow: 0 0 12px rgba(var(--gold-rgb), 0.8);
}

/* ---------------------------------------------------------
     28. NUMERAZIONE CARTE SG
--------------------------------------------------------- */

.serial-block {
    margin: 14px 0 6px 0;
    padding: 14px;
    border: 1px solid rgba(var(--gold-rgb), 0.35);
    border-radius: 10px;
    background: rgba(var(--gold-rgb), 0.05);
}

.serial-title {
    color: var(--gold);
    font-size: 0.72rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 12px;
    text-shadow: 0 0 10px rgba(var(--gold-rgb), 0.45);
}

.serial-inputs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    max-height: 190px;
    overflow-y: auto;
}

.serial-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border: 1px solid rgba(var(--accent-rgb), 0.22);
    border-radius: 8px;
    background: rgba(var(--bg-rgb), 0.75);
}

.serial-index {
    color: var(--text-muted);
    font-size: 0.62rem;
    text-transform: uppercase;
    white-space: nowrap;
}

.serial-hash {
    color: var(--gold);
    font-weight: 700;
    margin-left: auto;
}

.serial-input {
    width: 54px;
    height: 30px;
    text-align: center;
    border-radius: 6px;
    border: 1px solid rgba(var(--accent-rgb), 0.30);
    background: rgba(var(--bg-soft-rgb), 0.9);
    color: #ffffff;
    font-family: inherit;
    font-size: 0.85rem;
}

.serial-input:focus {
    outline: none;
    border-color: rgba(var(--gold-rgb), 0.75);
    box-shadow: 0 0 12px rgba(var(--gold-rgb), 0.30);
}

.serial-empty {
    color: var(--text-muted);
    font-size: 0.72rem;
}

/* Feedback salvataggio automatico numerazione SG */

.serial-input.saved-ok {
    border-color: rgba(var(--success-rgb), 0.85);
    box-shadow: 0 0 14px rgba(var(--success-rgb), 0.55);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.serial-input.saved-error {
    border-color: rgba(var(--danger-rgb), 0.85);
    box-shadow: 0 0 14px rgba(var(--danger-rgb), 0.55);
    animation: serial-shake 0.35s ease;
}

@keyframes serial-shake {
    0%, 100% {
    transform: translateX(0);
    }

    25% {
    transform: translateX(-4px);
    }

    75% {
    transform: translateX(4px);
    }
}

/* Badge numerazione sulla carta in griglia */

.serial-tag {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 6;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(var(--bg-rgb), 0.88);
    border: 1px solid rgba(var(--gold-rgb), 0.55);
    color: var(--gold);
    font-family: "Orbitron", sans-serif;
    font-size: 0.62rem;
    letter-spacing: 0.5px;
    text-shadow: 0 0 8px rgba(var(--gold-rgb), 0.55);
    pointer-events: none;
    white-space: nowrap;
}

/* ---------------------------------------------------------
     29. MODALE ADATTIVA SU SCHERMI BASSI
--------------------------------------------------------- */

@media (max-height: 900px) {
    #modal-card-name {
    font-size: 1.5rem;
    margin: 0 0 6px 0;
    }

    .modal-quantity-control {
    margin: 10px 0;
    }

    .serial-block {
    margin: 10px 0 4px 0;
    padding: 10px;
    }

    .serial-inputs {
    max-height: 130px;
    }

    .modal-title-row {
    margin: 8px 0 4px 0;
    }
}

@media (max-height: 740px) {
    #modal-card-name {
    font-size: 1.2rem;
    margin: 0 0 4px 0;
    }

    .modal-content p {
    font-size: 1rem;
    margin: 6px 0;
    }

    .modal-quantity-control .btn-qty {
    width: 36px;
    height: 36px;
    font-size: 1.1rem;
    }

    .modal-quantity-control .qty-input {
    width: 56px;
    height: 36px;
    }

    .serial-inputs {
    max-height: 100px;
    grid-template-columns: repeat(auto-fill, minmax(125px, 1fr));
    }

    .serial-title {
    margin-bottom: 8px;
    }

    .modal-title-texts #modal-card-code {
    margin: 0;
    }
}

/* ---------------------------------------------------------
     30. RIGA TITOLO MODALE (nome + codice + cuore a destra)
--------------------------------------------------------- */

.modal-title-row {
    position: relative;
    width: 100%;
    padding: 0 66px;
    margin: 1px 0 6px 0;
    box-sizing: border-box;
}

.modal-title-texts {
    text-align: center;
}

#modal-card-name {
    margin: 0 0 6px 0;
}

#modal-card-code {
    margin: 0;
}

/* Pulsazione cuore nella modale: conserva il centraggio verticale */

@keyframes wishlist-pulse-modal {
    0%, 100% {
    transform: translateY(-50%) scale(1.08);
    text-shadow: 0 0 12px rgba(var(--danger-rgb), 0.65);
    }

    50% {
    transform: translateY(-50%) scale(1.25);
    text-shadow: 0 0 20px rgba(var(--danger-rgb), 1),
                     0 0 30px rgba(var(--danger-rgb), 0.6);
    }
}

#modal-wishlist-btn.modal-wishlist-btn.active.pulse-once {
    animation: wishlist-pulse-modal 1.4s ease-in-out 2;
}

/* ---------------------------------------------------------
     31. MEMORY GAME
--------------------------------------------------------- */

.memory-hud {
    margin-left: auto;
    display: flex;
    gap: 22px;
    align-items: center;
    padding: 0 18px;
    height: 48px;
    border-radius: 8px;
    background: rgba(var(--bg-rgb), 0.82);
    border: 1px solid rgba(var(--accent-rgb), 0.24);
}

.memory-hud-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.memory-hud-label {
    color: var(--text-muted);
    font-size: 0.58rem;
    text-transform: uppercase;
    letter-spacing: 1.2px;
}

.memory-hud-value {
    color: #ffffff;
    font-size: 0.86rem;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(var(--accent-rgb), 0.6);
}

.memory-board {
    display: grid;
    justify-content: center;
    align-content: center;
    gap: 14px;
    padding: 20px;
    border-radius: 14px;
    border: 1px solid rgba(var(--accent-rgb), 0.20);
    background: rgba(var(--bg-soft-rgb), 0.72);
    box-shadow: inset 0 0 24px rgba(var(--accent-rgb), 0.06), 0 16px 40px rgba(0, 0, 0, 0.45);
}

.memory-tile {
    position: relative;
    aspect-ratio: 3 / 4;
    perspective: 1000px;
    cursor: pointer;
}

.memory-tile-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.45s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.memory-tile.flipped .memory-tile-inner,
.memory-tile.matched .memory-tile-inner {
    transform: rotateY(180deg);
}

.memory-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    border-radius: 10px;
    border: 1px solid rgba(var(--accent-rgb), 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.memory-back {
    background: linear-gradient(160deg, rgba(var(--bg-elevated-rgb), 0.95), rgba(var(--bg-rgb), 0.98)),
        radial-gradient(circle at 50% 40%, rgba(var(--accent-rgb), 0.30), transparent 60%);
    box-shadow: inset 0 0 22px rgba(var(--accent-rgb), 0.15);
}

.memory-back img {
    width: 58%;
    height: auto;
    opacity: 0.85;
    filter: drop-shadow(0 0 12px rgba(var(--accent-rgb), 0.65));
}

.memory-front {
    transform: rotateY(180deg);
    background: linear-gradient(180deg, rgba(var(--bg-elevated-rgb), 0.92), rgba(var(--bg-rgb), 0.96));
    padding: 6px;
}

.memory-front img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.memory-tile:hover .memory-back {
    border-color: rgba(var(--accent-soft-rgb), 0.75);
    box-shadow: inset 0 0 22px rgba(var(--accent-rgb), 0.25),
        0 0 18px rgba(var(--accent-rgb), 0.35);
}

.memory-tile.matched {
    cursor: default;
    animation: memory-match 0.55s ease-out;
}

.memory-tile.matched .memory-front {
    border-color: rgba(var(--success-rgb), 0.75);
    box-shadow: 0 0 20px rgba(var(--success-rgb), 0.45),
        inset 0 0 18px rgba(var(--success-rgb), 0.12);
}

@keyframes memory-match {
    0% {
    transform: scale(1);
    }

    45% {
    transform: scale(1.08);
    }

    100% {
    transform: scale(1);
    }
}

.memory-tile.shake .memory-front {
    border-color: rgba(var(--danger-rgb), 0.75);
    box-shadow: 0 0 18px rgba(var(--danger-rgb), 0.45);
    animation: serial-shake 0.32s ease;
}

.memory-win-content {
    width: 420px;
    padding: 34px;
    border: 1px solid rgba(var(--accent-rgb), 0.45);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(var(--bg-soft-rgb), 0.97), rgba(var(--bg-rgb), 0.97));
    box-shadow: inset 0 0 28px rgba(var(--accent-rgb), 0.10),
        0 24px 60px rgba(0, 0, 0, 0.60),
        0 0 32px rgba(var(--accent-rgb), 0.25);
    text-align: center;
    align-items: center;
}

.memory-win-content h2 {
    font-size: 1.4rem;
    margin: 0 0 14px 0;
}

.memory-record-badge {
    margin: 14px auto 0 auto;
    padding: 8px 18px;
    display: inline-block;
    border-radius: 20px;
    border: 1px solid rgba(var(--gold-rgb), 0.65);
    background: rgba(var(--gold-rgb), 0.10);
    color: var(--gold);
    font-size: 0.72rem;
    letter-spacing: 2px;
    text-shadow: 0 0 12px rgba(var(--gold-rgb), 0.65);
}

.memory-win-content .modal-footer {
    gap: 12px;
    background: transparent;
    position: static;
}

body:has(#memory-board) {
    overflow: hidden;
}

body:has(#memory-board) .main-area {
    padding: 16px 24px;
}

body:has(#memory-board) .search-bar {
    min-height: 0;
    margin: 0 0 14px 0;
    padding: 12px 18px;
}

/* =========================================================
     SNIPPET DA AGGIUNGERE IN FONDO A style.css
     ========================================================= */

/* ---------------------------------------------------------
     32. QUIZ - INDOVINA LA CARTA
--------------------------------------------------------- */

.quiz-stage {
    display: grid;
    grid-template-columns: minmax(320px, 0.9fr) minmax(380px, 1.1fr);
    gap: 24px;
    align-items: stretch;
}

.quiz-image-panel {
    padding: 20px;
    border-radius: 14px;
    border: 1px solid rgba(var(--accent-rgb), 0.20);
    background: rgba(var(--bg-soft-rgb), 0.72);
    box-shadow: inset 0 0 24px rgba(var(--accent-rgb), 0.06),
        0 16px 40px rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.quiz-timer-bar {
    height: 6px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.quiz-timer-fill {
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, var(--accent-deep), var(--accent-soft));
    box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.8);
    transition: width 0.1s linear;
}

.quiz-timer-fill.low {
    background: linear-gradient(90deg, var(--danger), #ff8fa3);
    box-shadow: 0 0 14px rgba(var(--danger-rgb), 0.85);
}

.quiz-image-frame {
    flex: 1;
    min-height: 340px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: radial-gradient(circle at 50% 40%, rgba(var(--accent-rgb), 0.16), transparent 62%),
        linear-gradient(180deg, rgba(var(--bg-elevated-rgb), 0.55), rgba(var(--bg-rgb), 0.85));
    overflow: hidden;
}

.quiz-card-img {
    max-width: 82%;
    max-height: 400px;
    object-fit: contain;
}

.quiz-card-img.mask-1 {
    filter: blur(5px) saturate(0.85);
}

.quiz-card-img.mask-2 {
    filter: blur(17px) saturate(0.7);
}

.quiz-card-img.mask-3 {
    filter: saturate(0.55) contrast(1.15) blur(5px);
    transform: scale(4.6);
}

.quiz-card-img.revealed {
    filter: none;
    transform: scale(1.03);
    transform-origin: center center;
}

.quiz-hint {
    min-height: 20px;
    text-align: center;
    color: var(--accent-soft);
    font-size: 0.74rem;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(var(--accent-rgb), 0.45);
}

.quiz-answer-panel {
    padding: 24px;
    border-radius: 14px;
    border: 1px solid rgba(var(--accent-rgb), 0.20);
    background: rgba(var(--bg-soft-rgb), 0.72);
    box-shadow: inset 0 0 24px rgba(var(--accent-rgb), 0.06),
        0 16px 40px rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
}

.quiz-question {
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: 0.86rem;
    text-align: center;
    text-shadow: 0 0 14px rgba(var(--accent-rgb), 0.9);
}

.quiz-options {
    display: grid;
    gap: 12px;
}

.quiz-option {
    min-height: 58px;
    padding: 12px 20px;
    border-radius: 10px;
    border: 1px solid rgba(var(--accent-rgb), 0.24);
    background: rgba(var(--bg-rgb), 0.82);
    color: var(--text);
    font-family: inherit;
    font-size: 0.86rem;
    text-align: left;
    cursor: pointer;
    transition: 0.18s ease;
}

.quiz-option:hover:not(:disabled) {
    color: #ffffff;
    border-color: rgba(var(--accent-soft-rgb), 0.60);
    background: rgba(var(--bg-elevated-rgb), 0.88);
    transform: translateX(4px);
    box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.24);
}

.quiz-option:disabled {
    cursor: default;
    opacity: 0.75;
}

.quiz-option.correct {
    color: #ffffff;
    opacity: 1;
    border-color: rgba(var(--success-rgb), 0.85);
    background: rgba(var(--success-rgb), 0.12);
    box-shadow: 0 0 20px rgba(var(--success-rgb), 0.40);
}

.quiz-option.wrong {
    color: #ffffff;
    opacity: 1;
    border-color: rgba(var(--danger-rgb), 0.85);
    background: rgba(var(--danger-rgb), 0.12);
    box-shadow: 0 0 20px rgba(var(--danger-rgb), 0.40);
    animation: serial-shake 0.35s ease;
}

.quiz-feedback {
    min-height: 26px;
    text-align: center;
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.quiz-feedback.ok {
    color: var(--success);
    text-shadow: 0 0 12px rgba(var(--success-rgb), 0.75);
}

.quiz-feedback.ko {
    color: var(--danger);
    text-shadow: 0 0 12px rgba(var(--danger-rgb), 0.75);
}

.quiz-win-detail {
    margin-top: 6px;
    color: var(--text-muted);
    font-size: 0.78rem;
    letter-spacing: 1px;
}

@media (max-width: 1350px) {
    .quiz-stage {
    grid-template-columns: minmax(0, 1fr);
    }
}

/* =========================================================
     SNIPPET DA AGGIUNGERE IN FONDO A style.css
     Controlli partita: overlay iniziale, pausa, ferma
     ========================================================= */

/* ---------------------------------------------------------
     33. CONTROLLI PARTITA (Pausa / Ferma) + OVERLAY
--------------------------------------------------------- */

.game-ctrl-btn:hover:not(:disabled) {
    color: #ffffff;
    background: rgba(var(--bg-elevated-rgb), 0.88);
    border-color: rgba(var(--accent-soft-rgb), 0.50);
    box-shadow: inset 0 0 18px rgba(var(--accent-rgb), 0.05),
        0 0 14px rgba(var(--accent-rgb), 0.16);
}

.game-ctrl-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.game-ctrl-btn.active {
    color: var(--gold);
    border-color: rgba(var(--gold-rgb), 0.60);
    background: rgba(var(--gold-rgb), 0.10);
    box-shadow: 0 0 16px rgba(var(--gold-rgb), 0.25);
}

.game-ctrl-btn.danger {
    color: #ff8fa3;
    border-color: rgba(var(--danger-rgb), 0.30);
    background: rgba(var(--danger-rgb), 0.08);
}

.game-ctrl-btn.danger:hover:not(:disabled) {
    color: #ffffff;
    background: rgba(var(--danger-rgb), 0.22);
    border-color: rgba(var(--danger-rgb), 0.65);
    box-shadow: 0 0 16px rgba(var(--danger-rgb), 0.35);
}

/* --- Contenitore area di gioco (serve per l'overlay) --- */

.game-area {
    position: relative;
    min-height: calc(100vh - 260px);
    display: flex;
    flex-direction: column;
}

.game-area > #memory-board,
.game-area > #quiz-stage {
    flex: 1;
    min-height: 0;
}

/* --- Sfocatura anti-imbroglio durante la pausa --- */

.memory-board.blurred,
.quiz-stage.blurred {
    filter: blur(18px) brightness(0.45);
    pointer-events: none;
    user-select: none;
    transition: filter 0.3s ease;
}

/* --- Overlay schermata iniziale / pausa --- */

.game-overlay {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 500;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: radial-gradient(circle at center, rgba(var(--bg-elevated-rgb), 0.55), rgba(var(--bg-rgb), 0.88));
    backdrop-filter: blur(6px);
    animation: overlay-in 0.28s ease-out;
}

.game-overlay.visible {
    display: flex;
}

@keyframes overlay-in {
    from {
    opacity: 0;
    }

    to {
    opacity: 1;
    }
}

.game-overlay-inner {
    width: 460px;
    max-width: 88%;
    padding: 38px 34px;
    text-align: center;
    border-radius: 16px;
    border: 1px solid rgba(var(--accent-rgb), 0.42);
    background: linear-gradient(145deg, rgba(var(--bg-soft-rgb), 0.96), rgba(var(--bg-rgb), 0.96));
    box-shadow: inset 0 0 30px rgba(var(--accent-rgb), 0.10),
        0 24px 60px rgba(0, 0, 0, 0.60),
        0 0 34px rgba(var(--accent-rgb), 0.28);
}

.game-overlay-icon {
    font-size: 2.4rem;
    color: var(--accent-soft);
    margin-bottom: 14px;
    letter-spacing: 6px;
    text-shadow: 0 0 18px rgba(var(--accent-rgb), 0.95),
        0 0 34px rgba(var(--accent-rgb), 0.55);
    animation: overlay-icon-pulse 2.4s ease-in-out infinite;
}

@keyframes overlay-icon-pulse {
    0%, 100% {
    opacity: 0.75;
    transform: scale(1);
    }

    50% {
    opacity: 1;
    transform: scale(1.08);
    }
}

.game-overlay-inner h2 {
    font-size: 1.35rem;
    margin: 0 0 12px 0;
}

.game-overlay-inner p {
    color: var(--text-muted);
    font-family: "Orbitron", sans-serif;
    font-size: 0.78rem;
    line-height: 1.6;
    letter-spacing: 0.5px;
    margin: 0 0 26px 0;
}

.overlay-action-btn:hover {
    background: rgba(var(--accent-rgb), 0.34);
    border-color: rgba(var(--accent-soft-rgb), 0.85);
    box-shadow: 0 0 24px rgba(var(--accent-rgb), 0.45);
    transform: translateY(-2px);
}

/* =========================================================
     SNIPPET DA AGGIUNGERE IN FONDO A style.css
     34. CLASSIFICHE
     ========================================================= */

/* --- Tab Memory / Quiz --- */

.lb-tabs {
    display: flex;
    gap: 8px;
}

.lb-tab {
    height: 48px;
    padding: 0 22px;
    border-radius: 8px;
    border: 1px solid rgba(var(--accent-rgb), 0.24);
    background: rgba(var(--bg-rgb), 0.82);
    color: var(--text);
    font-family: inherit;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    white-space: nowrap;
    transition: 0.2s ease;
}

.lb-tab:hover {
    color: #ffffff;
    background: rgba(var(--bg-elevated-rgb), 0.88);
    border-color: rgba(var(--accent-soft-rgb), 0.50);
    box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.16);
}

.lb-tab.active {
    color: #ffffff;
    border-color: rgba(var(--accent-soft-rgb), 0.85);
    background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.34), rgba(var(--accent-rgb), 0.08));
    box-shadow: inset 0 0 22px rgba(var(--accent-rgb), 0.12),
        0 0 18px rgba(var(--accent-rgb), 0.25);
}

/* --- Podio --- */

.lb-podium {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    align-items: end;
    margin-bottom: 26px;
}

.lb-podium-slot {
    padding: 20px 16px;
    border-radius: 14px;
    border: 1px solid rgba(var(--accent-rgb), 0.28);
    background: linear-gradient(180deg, rgba(var(--bg-elevated-rgb), 0.92), rgba(var(--bg-rgb), 0.94));
    box-shadow: inset 0 0 24px rgba(var(--accent-rgb), 0.08),
        0 16px 40px rgba(0, 0, 0, 0.45);
    text-align: center;
}

.lb-podium-slot.place-1 {
    padding-top: 30px;
    padding-bottom: 30px;
    border-color: rgba(var(--gold-rgb), 0.65);
    box-shadow: inset 0 0 26px rgba(var(--gold-rgb), 0.10),
        0 18px 44px rgba(0, 0, 0, 0.50),
        0 0 26px rgba(var(--gold-rgb), 0.28);
}

.lb-podium-slot.place-2 {
    border-color: rgba(200, 200, 220, 0.45);
}

.lb-podium-slot.place-3 {
    border-color: rgba(214, 140, 82, 0.50);
}

.lb-podium-slot.is-me {
    outline: 1px solid rgba(var(--accent-rgb), 0.85);
}

.lb-podium-medal {
    width: 46px;
    height: 46px;
    margin: 0 auto 12px auto;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.15rem;
    font-weight: 700;
    color: #ffffff;
    background: radial-gradient(circle, rgba(var(--accent-rgb), 0.95), rgba(var(--bg-elevated-rgb), 0.85));
    box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.55);
}

.place-1 .lb-podium-medal {
    background: radial-gradient(circle, var(--gold), #b57e12);
    box-shadow: 0 0 22px rgba(var(--gold-rgb), 0.75);
    color: #1a1206;
}

.place-2 .lb-podium-medal {
    background: radial-gradient(circle, #e6e6f0, #8b8ba0);
    color: #14141c;
    box-shadow: 0 0 18px rgba(220, 220, 240, 0.45);
}

.place-3 .lb-podium-medal {
    background: radial-gradient(circle, #e0a06a, #8a5320);
    color: #1a0f05;
    box-shadow: 0 0 18px rgba(214, 140, 82, 0.45);
}

.lb-podium-name {
    color: #ffffff;
    font-size: 0.92rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lb-podium-score {
    margin-top: 10px;
    color: var(--accent-soft);
    font-size: 1.05rem;
    font-weight: 700;
    text-shadow: 0 0 12px rgba(var(--accent-rgb), 0.7);
}

.place-1 .lb-podium-score {
    color: var(--gold);
    text-shadow: 0 0 14px rgba(var(--gold-rgb), 0.8);
}

.lb-podium-detail {
    margin-top: 6px;
    color: var(--text-muted);
    font-size: 0.72rem;
    letter-spacing: 1px;
}

/* --- Tabella --- */

.lb-panel {
    border-radius: 14px;
    border: 1px solid rgba(var(--accent-rgb), 0.22);
    background: rgba(var(--bg-soft-rgb), 0.72);
    box-shadow: inset 0 0 24px rgba(var(--accent-rgb), 0.06),
        0 16px 40px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}

.lb-table-head,
.lb-row {
    display: grid;
    grid-template-columns: 70px minmax(0, 1.6fr) 150px 150px 130px;
    align-items: center;
    gap: 12px;
    padding: 14px 22px;
}

.lb-table-head {
    background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.18), rgba(var(--accent-rgb), 0.04));
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.20);
    color: var(--text-muted);
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.lb-rows {
    max-height: calc(100vh - 460px);
    overflow-y: auto;
}

.lb-row {
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.08);
    color: var(--text);
    font-size: 0.82rem;
    transition: 0.18s ease;
}

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

.lb-row:hover {
    background: rgba(var(--accent-rgb), 0.08);
}

.lb-row.is-me {
    background: rgba(var(--accent-rgb), 0.14);
    border-left: 3px solid var(--accent-color);
}

.lb-col-pos {
    color: var(--accent-soft);
    font-weight: 700;
    text-align: center;
}

.lb-row.top .lb-col-pos {
    color: var(--gold);
    text-shadow: 0 0 10px rgba(var(--gold-rgb), 0.6);
}

.lb-col-player {
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lb-col-score {
    color: var(--accent-soft);
    font-weight: 700;
}

.lb-col-detail,
.lb-col-date {
    color: var(--text-muted);
    font-size: 0.74rem;
}


/* Scrollbar in tema */

.lb-rows::-webkit-scrollbar {
    width: 8px;
}

.lb-rows::-webkit-scrollbar-track {
    background: transparent;
}

.lb-rows::-webkit-scrollbar-thumb {
    background: rgba(var(--accent-rgb), 0.45);
    border-radius: 99px;
}

.lb-rows::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--accent-soft-rgb), 0.75);
}

/* =========================================================
     SNIPPET DA AGGIUNGERE IN FONDO A style.css
     35. BACKUP CSV (export / import)
     ========================================================= */

.csv-open-btn {
    min-width: 130px;
}

.csv-modal-content {
    width: 560px;
    max-width: 92vw;
    max-height: 88vh;
    overflow-y: auto;
    padding: 32px;
    border: 1px solid rgba(var(--accent-rgb), 0.45);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(var(--bg-soft-rgb), 0.97), rgba(var(--bg-rgb), 0.97));
    box-shadow: inset 0 0 28px rgba(var(--accent-rgb), 0.10),
        0 24px 60px rgba(0, 0, 0, 0.60),
        0 0 32px rgba(var(--accent-rgb), 0.25);
    text-align: center;
}

.csv-modal-content h2 {
    font-size: 1.3rem;
    margin: 0 0 24px 0;
}

.csv-section {
    text-align: center;
}

.csv-section-title {
    color: var(--accent-soft);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 10px;
    text-shadow: 0 0 12px rgba(var(--accent-rgb), 0.6);
}

.csv-section-text {
    color: var(--text-muted) !important;
    font-size: 0.76rem !important;
    line-height: 1.6;
    letter-spacing: 0.4px;
    margin: 0 0 18px 0 !important;
}

.csv-section-text b {
    color: var(--text);
    font-weight: 700;
}

.csv-divider {
    height: 1px;
    margin: 26px 0;
    background: linear-gradient(90deg,
        transparent,
        rgba(var(--accent-rgb), 0.45),
        transparent);
}

.csv-export-btn,
.csv-import-btn {
    height: 44px;
    padding: 0 34px;
    font-size: 0.8rem;
}

.csv-import-btn {
    margin-top: 16px;
}

.csv-import-btn:disabled {
    opacity: 0.35;
    cursor: default;
    transform: none;
    box-shadow: none;
}

.csv-import-btn:disabled:hover {
    background: rgba(var(--accent-rgb), 0.18);
    border-color: rgba(var(--accent-rgb), 0.55);
    transform: none;
    box-shadow: none;
}

/* --- Dropzone --- */

.csv-dropzone {
    padding: 24px 18px;
    border-radius: 12px;
    border: 1px dashed rgba(var(--accent-rgb), 0.45);
    background: rgba(var(--bg-rgb), 0.62);
    cursor: pointer;
    transition: 0.2s ease;
}

.csv-dropzone:hover,
.csv-dropzone.dragging {
    border-color: rgba(var(--accent-soft-rgb), 0.9);
    background: rgba(var(--accent-rgb), 0.10);
    box-shadow: inset 0 0 24px rgba(var(--accent-rgb), 0.12);
}

.csv-dropzone-icon {
    font-size: 1.8rem;
    color: var(--accent-soft);
    margin-bottom: 10px;
    text-shadow: 0 0 16px rgba(var(--accent-rgb), 0.8);
}

.csv-dropzone-text {
    color: var(--text-muted);
    font-size: 0.74rem;
    letter-spacing: 0.5px;
}

.csv-file-name {
    margin-top: 12px;
    padding: 6px 12px;
    display: inline-block;
    border-radius: 6px;
    color: var(--text-dim);
    font-size: 0.7rem;
    letter-spacing: 0.5px;
    word-break: break-all;
}

.csv-file-name.has-file {
    color: var(--gold);
    background: rgba(var(--gold-rgb), 0.10);
    border: 1px solid rgba(var(--gold-rgb), 0.45);
    text-shadow: 0 0 10px rgba(var(--gold-rgb), 0.5);
}

/* --- Report esito --- */

.csv-report {
    margin-top: 18px;
    text-align: left;
}

.csv-report:empty {
    margin-top: 0;
}

.csv-report:not(:empty) {
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid rgba(var(--accent-rgb), 0.30);
    background: rgba(var(--bg-rgb), 0.75);
}

.csv-report.ok:not(:empty) {
    border-color: rgba(var(--success-rgb), 0.55);
    background: rgba(var(--success-rgb), 0.06);
}

.csv-report.error:not(:empty) {
    border-color: rgba(var(--danger-rgb), 0.55);
    background: rgba(var(--danger-rgb), 0.06);
}

.csv-report-line {
    color: var(--text);
    font-size: 0.76rem;
    line-height: 1.6;
    letter-spacing: 0.4px;
}

.csv-report-line.strong {
    color: var(--success);
    font-weight: 700;
    text-shadow: 0 0 10px rgba(var(--success-rgb), 0.5);
}

.csv-report.error .csv-report-line.strong {
    color: #ff8fa3;
}

.csv-report-line.warn {
    color: var(--gold);
    margin-top: 6px;
}

.csv-error-list {
    margin: 8px 0 0 0;
    padding-left: 18px;
    max-height: 130px;
    overflow-y: auto;
    color: var(--text-muted);
    font-size: 0.7rem;
    line-height: 1.7;
}

.csv-error-list::-webkit-scrollbar,
.csv-modal-content::-webkit-scrollbar {
    width: 8px;
}

.csv-error-list::-webkit-scrollbar-track,
.csv-modal-content::-webkit-scrollbar-track {
    background: transparent;
}

.csv-error-list::-webkit-scrollbar-thumb,
.csv-modal-content::-webkit-scrollbar-thumb {
    background: rgba(var(--accent-rgb), 0.45);
    border-radius: 99px;
}

.csv-modal-content .modal-footer {
    position: static;
    margin-top: 24px;
    background: transparent;
}

.csv-example-btn {
    display: inline-flex;
    align-items: center;
    height: 38px;
    margin: -6px 0 20px 0;
    padding: 0 20px;
    border-radius: 8px;
    border: 1px solid rgba(var(--gold-rgb), 0.45);
    background: rgba(var(--gold-rgb), 0.08);
    color: var(--gold);
    font-family: inherit;
    font-size: 0.72rem;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: 0.2s ease;
}

.csv-example-btn::before {
    content: "↓";
    margin-right: 9px;
    font-size: 0.95rem;
}

.csv-example-btn:hover {
    color: #ffffff;
    background: rgba(var(--gold-rgb), 0.20);
    border-color: rgba(var(--gold-rgb), 0.85);
    box-shadow: 0 0 14px rgba(var(--gold-rgb), 0.35);
    transform: translateY(-1px);
}

/* =========================================================
     36. RESPONSIVE MOBILE / TABLET  ·  Monarch Hoard
     ---------------------------------------------------------
     ISTRUZIONI:
     - Incolla TUTTO questo blocco in FONDO a style.css
     (dopo la sezione 35 - Backup CSV).
     - NON devi cancellare nulla: queste regole si attivano solo
     su schermi piccoli e sovrascrivono i "blocchi" desktop
     (min-width 1180px ecc.). Su PC il sito resta identico.
     ========================================================= */

/* =========================================================
     TABLET E SMARTPHONE  ·  fino a 1024px
     Da qui in giu' il layout si "impila" (sidebar in alto).
     ========================================================= */

@media (max-width: 1024px) {
    html, body {
    min-width: 0 !important;
    overflow-x: hidden;
    }

    .app-shell {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    }

    .main-area {
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 18px !important;
    }

    .sidebar {
    position: static !important;
    height: auto !important;
    min-width: 0 !important;
    width: 100% !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 12px 16px !important;
    border-right: none;
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.22);
    }

    .sidebar::after {
    display: none !important;
    }

    .sidebar-logo {
    flex-direction: row;
    gap: 10px;
    margin: 0;
    }

    .sidebar-logo img:first-child {
    width: 46px;
    }

    .sidebar-wordmark {
    width: 150px;
    }

    .sidebar-nav {
    flex-direction: row !important;
    flex-wrap: nowrap;
    width: 100%;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    }

    .side-nav-btn {
    width: auto !important;
    flex: 0 0 auto;
    height: auto;
    flex-direction: column;
    gap: 4px;
    min-width: 74px;
    padding: 8px 8px !important;
    font-size: 0.62rem;
    text-align: center;
    }

    .side-nav-icon {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px;
    }

    .sidebar-player {
    margin-top: 0;
    width: 100%;
    }

    .top-bar {
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 16px;
    }
    .top-bar-right {
    width: 100%;
    justify-content: center;
    }
    /* Le 4 statistiche diventano mini-schede indipendenti che vanno a capo
       da sole solo quando non c'e' piu' spazio per stare tutte in riga */
    .hero-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 8px;
    max-width: 100%;
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    backdrop-filter: none;
    overflow: visible;
    }
    .hero-stat-card {
    flex: 0 0 auto;
    border-right: none;
    border: 1px solid rgba(var(--accent-rgb), 0.20);
    border-radius: 8px;
    background: rgba(var(--bg-rgb), 0.76);
    box-shadow: inset 0 0 10px rgba(var(--accent-rgb), 0.06),
        0 4px 12px rgba(0, 0, 0, 0.30);
    padding: 6px 12px;
    gap: 8px;
    }
    .hero-stat-icon,
    .hero-stat-icon img {
    width: 26px;
    height: 26px;
    }
    .hero-stat-value {
    font-size: 0.82rem;
    }
    .hero-stat-label {
    font-size: 0.5rem;
    }

    .search-row {
    width: 100% !important;
    min-width: 0 !important;
    }

    .dropdown-content {
    width: min(280px, 92vw);
    max-width: 92vw;
    }

    .action-filter-btn {
    margin-left: 0;
    }
}

/* =========================================================
     SMARTPHONE  ·  fino a 600px
     ========================================================= */

@media (max-width: 600px) {
    .hero-stat-value {
    font-size: 0.78rem;
    }
    .hero-stat-icon,
    .hero-stat-icon img {
    width: 22px;
    height: 22px;
    }

    .filters-row {
    gap: 8px;
    }

    .dropdown-filter,
    .dropdown-button,
    .set-toggle-btn,
    .action-filter-btn,
    .lb-tab,
    .game-ctrl-btn {
    flex: 1 1 46%;
    min-width: 0;
    font-size: 0.74rem;
    }

    .memory-hud {
    margin-left: 0;
    flex-wrap: wrap;
    height: auto;
    gap: 14px;
    padding: 10px 14px;
    width: 100%;
    }

    input, select, textarea {
    font-size: 16px;
    }

    .lb-table-head,
    .lb-row {
    grid-template-columns: 44px minmax(0, 1fr) 90px !important;
    gap: 8px;
    padding: 12px 14px;
    }

    #lb-head-detail,
    .lb-col-detail,
    .lb-col-date {
    display: none !important;
    }

    .lb-podium {
    grid-template-columns: 1fr !important;
    }

    .modal-content,
    .csv-modal-content,
    .memory-win-content {
    width: 94vw !important;
    max-width: 94vw !important;
    }

    .modal-title-row {
    padding: 0 44px;
    }

    #modal-card-name {
    font-size: 1.4rem;
    }

    .login-panel {
    width: 92vw !important;
    min-width: 0 !important;
    }

    h1 {
    font-size: 1.4rem;
    }

    h2 {
    font-size: 1.2rem;
    }
}

/* =========================================================
     SMARTPHONE STRETTI  ·  fino a 430px
     ========================================================= */

@media (max-width: 430px) {
    .dropdown-filter,
    .dropdown-button,
    .set-toggle-btn,
    .action-filter-btn {
    flex: 1 1 100%;
    }
}

/* =========================================================
     37. FRECCE MODALE VISIBILI SU MOBILE + AREA SWIPE
     ---------------------------------------------------------
     (dopo il blocco 36 responsive che hai gia' aggiunto).
     Su PC non cambia nulla: agisce solo sotto i 600px.
     ========================================================= */

@media (max-width: 600px) {
    .modal-nav-btn {
    position: absolute !important;
    top: 50% !important;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(var(--bg-soft-rgb), 0.72);
    border: 1px solid rgba(var(--accent-rgb), 0.55);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5),
                    0 0 14px rgba(var(--accent-rgb), 0.35);
    backdrop-filter: blur(2px);
    cursor: pointer;
    }

    .modal-nav-prev {
    left: 10px !important;
    right: auto !important;
    }

    .modal-nav-next {
    right: 10px !important;
    left: auto !important;
    }

    .modal-img-container::after {
    position: absolute;
    bottom: 6px;
    left: 0;
    right: 0;
    text-align: center;
    color: rgba(var(--accent-soft-rgb), 0.75);
    font-size: 0.62rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    pointer-events: none;
    }
}

/* =========================================================
     38. BLOCCA LO SCROLL DELLO SFONDO QUANDO LA MODALE E' APERTA
     ---------------------------------------------------------
     Quando una modale ha la classe .open, la pagina sotto
     non scrolla piu'. Vale sia su PC che su mobile.
     ========================================================= */

body:has(.modal.open) {
    overflow: hidden;
    touch-action: none;
}

/* La modale invece resta fluida al suo interno */

.modal.open {
    touch-action: pan-y;
    overscroll-behavior: contain;
}

/* =========================================================
     39. GRIGLIA CARTE COMPATTA SU SMARTPHONE
     ---------------------------------------------------------
     ISTRUZIONI:
     - Incolla TUTTO questo blocco in FONDO a static/css/style.css
     (dopo la sezione 38, quella che blocca lo scroll con la modale).
     - Non cancellare nulla: queste regole si attivano SOLO su
     telefoni (max-width 600px). Su PC e tablet grandi non cambia niente.

     COSA FA:
     - Mostra 3 carte per riga sugli smartphone (invece di 1).
     - Rende le carte piu' piccole e compatte (immagine bassa,
     testi e pulsanti ridotti). Per i dettagli si apre la modale.
     ========================================================= */

@media (max-width: 600px) {
    .set-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    padding: 10px !important;
    }

    .card {
    min-height: 0 !important;
    padding: 22px 4px 8px 4px !important;
    border-radius: 8px;
    }

    .card-image-container {
    height: 118px !important;
    margin: 4px 0 6px 0 !important;
    }

    .collection-card-rarity,
    .duplicate-badge {
    top: 5px;
    min-width: 24px;
    height: 20px;
    padding: 0 5px;
    font-size: 0.56rem;
    }

    .collection-card-rarity {
    left: 5px;
    }

    .duplicate-badge {
    right: 5px;
    }

    .card-code {
    font-size: 0.55rem;
    }

    .card-name {
    font-size: 0.62rem;
    margin: 4px 0 5px 0;
    }

    .card-wishlist-row {
    min-height: 18px;
    margin-top: 4px;
    }

    .card-wishlist-row .wishlist-btn {
    font-size: 0.95rem;
    }

    .quantity-control {
    gap: 4px;
    margin-top: 6px;
    }

    .btn-qty {
    width: 22px;
    height: 22px;
    font-size: 0.75rem;
    }

    .qty-input {
    width: 30px;
    height: 22px;
    font-size: 0.65rem;
    }

    .serial-tag {
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    padding: 2px 5px;
    font-size: 0.52rem;
    }

    .skeleton-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    padding: 10px !important;
    }

    .skeleton-card {
    min-height: 190px !important;
    }
}

/* =========================================================
     40. VETRINA
     ========================================================= */

.showcase-title-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.showcase-title {
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: 1rem;
    text-shadow: 0 0 14px rgba(var(--accent-rgb), 0.9);
}

.showcase-subtitle {
    color: var(--text-muted);
    font-size: 0.76rem;
    letter-spacing: 0.5px;
}

.showcase-frame {
    padding: 28px;
    border-radius: 16px;
    border: 1px solid rgba(var(--accent-rgb), 0.22);
    background: linear-gradient(145deg, rgba(var(--bg-soft-rgb), 0.90), rgba(var(--bg-rgb), 0.94)),
        radial-gradient(circle at 50% 0%, rgba(var(--accent-rgb), 0.14), transparent 55%);
    box-shadow: inset 0 0 30px rgba(var(--accent-rgb), 0.07),
        0 18px 45px rgba(0, 0, 0, 0.45);
}

.showcase-grid {
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(3, minmax(150px, 265px));
    gap: 22px;
}

.showcase-slot {
    position: relative;
    border-radius: 14px;
    text-align: center;
    overflow: hidden;
    min-height: 420px;
    padding: 20px 16px 18px 16px;
}

.showcase-slot.empty {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed rgba(var(--accent-rgb), 0.30);
    background: rgba(var(--bg-rgb), 0.35);
}

.showcase-empty-text {
    color: var(--text-dim);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.showcase-slot.filled {
    border: 1px solid rgba(var(--accent-rgb), 0.28);
    background: linear-gradient(180deg, rgba(var(--bg-elevated-rgb), 0.88), rgba(var(--bg-rgb), 0.96)),
        radial-gradient(circle at 50% 15%, rgba(var(--accent-rgb), 0.20), transparent 45%);
    box-shadow: inset 0 0 20px rgba(var(--accent-rgb), 0.06),
        0 10px 26px rgba(0, 0, 0, 0.40);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.showcase-slot.filled:hover {
    transform: translateY(-3px);
    box-shadow: inset 0 0 24px rgba(var(--accent-rgb), 0.10),
        0 0 22px rgba(var(--accent-rgb), 0.28),
        0 16px 34px rgba(0, 0, 0, 0.5);
}

.showcase-image-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 294px;
    margin: 10px 0 12px 0;
}

.showcase-card-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.55))
        drop-shadow(0 0 8px rgba(var(--accent-rgb), 0.20));
}

.showcase-card-name {
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.9rem;
}

.showcase-card-code {
    color: rgba(var(--text-muted-rgb), 0.70);
    letter-spacing: 1px;
    font-size: 0.78rem;
    margin-top: 4px;
}

.showcase-hint {
    margin-top: 16px;
    text-align: center;
    color: var(--text-dim);
    font-size: 0.74rem;
    letter-spacing: 0.5px;
}

/* --- Bottone "+ Vetrina" nel modal carta della Collezione --- */

.showcase-toggle-btn {
    background: transparent;
    border: 1px solid rgba(var(--accent-rgb), 0.55);
    color: var(--accent-soft);
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.78rem;
    letter-spacing: 0.5px;
    transition: 0.18s ease;
}

.showcase-toggle-btn:hover:not(:disabled) {
    background: rgba(var(--accent-rgb), 0.18);
    color: #ffffff;
    box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.30);
}

.showcase-toggle-btn.active {
    background: rgba(var(--accent-rgb), 0.28);
    border-color: rgba(var(--accent-soft-rgb), 0.85);
    color: #ffffff;
    box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.40);
}

.showcase-toggle-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

/* =========================================================
     42. VETRINA MOBILE - OVERRIDE FINALE
     ---------------------------------------------------------
     Posizionato qui, alla fine assoluta del file, in modo che
     vinca sempre sulle regole desktop della sezione 40 quando
     lo schermo è stretto (nessun conflitto di ordine).
     ========================================================= */

@media (max-width: 600px) {
    .showcase-frame {
    padding: 10px;
    }

    .showcase-title-block {
    flex: 1 1 100%;
    }

    .showcase-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 7px !important;
    }

    .showcase-slot {
    min-height: 175px !important;
    padding: 6px 5px !important;
    border-radius: 8px !important;
    }

    .showcase-image-container {
    height: 88px !important;
    margin: 4px 0 5px 0 !important;
    }

    .showcase-card-name {
    font-size: 0.58rem !important;
    margin: 3px 0 1px 0 !important;
    }

    .showcase-card-code {
    font-size: 0.5rem !important;
    margin-top: 1px !important;
    }

    .showcase-empty-text {
    font-size: 0.56rem !important;
    }
}

/* =========================================================
     43. PICKER VETRINA (scelta carta) + bottoni slot
     ========================================================= */

/* Bottone "+ Inserisci" negli slot vuoti */

.showcase-insert-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 18px 24px;
    border-radius: 12px;
    border: 1px dashed rgba(var(--accent-rgb), 0.5);
    background: rgba(var(--accent-rgb), 0.08);
    color: var(--accent-soft);
    font-family: inherit;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: 0.2s ease;
}

.showcase-insert-btn:hover {
    color: #ffffff;
    background: rgba(var(--accent-rgb), 0.2);
    border-color: rgba(var(--accent-soft-rgb), 0.85);
    box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.35);
}

.showcase-insert-plus {
    font-size: 1.9rem;
    line-height: 1;
}

/* Bottone "Sostituisci" sugli slot pieni (compare all'hover, al centro) */

/* Su touch (niente hover) resta sempre visibile */

/* Finestra del picker */

.picker-modal-content {
    width: 1000px;
    max-width: 94vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.picker-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.picker-controls .search-input {
    width: 260px;
    height: 44px;
}

.picker-count-box {
    margin-left: auto;
    color: var(--accent-soft);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
}

.picker-count-box span {
    color: #ffffff;
    font-weight: 700;
}

.picker-grid {
    overflow-y: auto;
    max-height: 62vh;
    padding: 6px;
}

.picker-grid::-webkit-scrollbar {
    width: 8px;
}

.picker-grid::-webkit-scrollbar-track {
    background: transparent;
}

.picker-grid::-webkit-scrollbar-thumb {
    background: rgba(var(--accent-rgb), 0.45);
    border-radius: 99px;
}

.picker-grid::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--accent-soft-rgb), 0.75);
}

/* Adattamento smartphone: griglia picker piu' compatta */

@media (max-width: 600px) {
    .picker-controls .search-input {
    width: 100%;
    }

    .picker-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    }
}


/* =========================================================
     45. SFONDI VETRINA (bottone + finestra scelta)
     ========================================================= */

/* Quando c'e' uno sfondo custom, rende il riquadro un po' piu' scuro
     ai bordi per far risaltare le carte (il gradiente e' gia' nel JS) */

.showcase-frame.has-custom-bg {
    background-repeat: no-repeat;
    background-attachment: local;
}

/* Bottone "Cambia sfondo" nella barra */

.showcase-bg-btn {
    white-space: nowrap;
}

/* --- Finestra scelta sfondo --- */

.bg-modal-content {
    width: 640px;
    max-width: 94vw;
    max-height: 88vh;
    overflow-y: auto;
    text-align: center;
}

.bg-modal-text {
    color: var(--text-muted) !important;
    font-size: 0.8rem !important;
    margin: 0 0 22px 0 !important;
}

.bg-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.bg-option {
    border-radius: 12px;
    border: 1px solid rgba(var(--accent-rgb), 0.25);
    background: rgba(var(--bg-rgb), 0.6);
    padding: 8px;
    cursor: pointer;
    transition: 0.18s ease;
}

.bg-option:hover {
    border-color: rgba(var(--accent-soft-rgb), 0.85);
    box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.35);
    transform: translateY(-2px);
}

.bg-option.active {
    border-color: rgba(var(--accent-soft-rgb), 1);
    box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.5);
}

.bg-option-preview {
    width: 100%;
    height: 110px;
    border-radius: 8px;
    border: 1px solid rgba(var(--accent-rgb), 0.2);
}

.bg-option-name {
    margin-top: 10px;
    color: var(--text);
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.bg-option.active .bg-option-name {
    color: #ffffff;
    text-shadow: 0 0 10px rgba(var(--accent-rgb), 0.7);
}

/* --- TABLET --- */

@media (max-width: 1024px) {
    .bg-grid {
    grid-template-columns: repeat(3, 1fr);
    }
}

/* --- SMARTPHONE --- */

@media (max-width: 600px) {
    .showcase-bg-btn {
    flex: 1 1 100%;
    margin-top: 6px;
    }

    .bg-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    }

    .bg-option-preview {
    height: 80px;
    }

    .bg-option-name {
    font-size: 0.66rem;
    }
}

/* =========================================================
     46. VETRINA · dimensioni carte ridotte (~ -30%)
     ========================================================= */

/* --- Smartphone: leggero ritocco coerente (facoltativo) --- */

@media (max-width: 600px) {
    .showcase-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
    }
}

/* =========================================================
     52. VETRINA · popup azioni carta
     ========================================================= */

.slot-actions-content {
    max-width: 92vw;
    text-align: center;
    width: 230px;
    padding: 16px;
}

.slot-actions-code {
    color: var(--text-muted) !important;
    font-size: 0.68rem !important;
    margin: 2px 0 12px 0 !important;
}

.slot-actions-move {
    margin: 4px 0 12px 0;
}

.slot-actions-move-label {
    display: block;
    color: var(--accent-soft);
    text-transform: uppercase;
    font-size: 0.6rem;
    letter-spacing: 1.5px;
    margin-bottom: 6px;
}

.slot-actions-dpad {
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(3, 30px);
    grid-template-rows: repeat(3, 30px);
    gap: 3px;
}

.sa-dpad {
    border: 1px solid rgba(var(--accent-rgb), 0.4);
    background: rgba(var(--bg-soft-rgb), 0.85);
    color: var(--text);
    cursor: pointer;
    transition: 0.16s ease;
    width: 30px;
    height: 30px;
    font-size: 0.72rem;
    border-radius: 6px;
}

.sa-dpad:hover:not(:disabled) {
    background: rgba(var(--accent-rgb), 0.3);
    border-color: rgba(var(--accent-soft-rgb), 0.9);
    color: #ffffff;
}

.sa-dpad:disabled {
    opacity: 0.25;
    cursor: default;
}

.sa-up {
    grid-column: 2;
    grid-row: 1;
}

.sa-left {
    grid-column: 1;
    grid-row: 2;
}

.sa-right {
    grid-column: 3;
    grid-row: 2;
}

.sa-down {
    grid-column: 2;
    grid-row: 3;
}

.slot-actions-buttons {
    display: flex;
    flex-direction: column;
    margin-top: 6px;
    gap: 7px;
}

.slot-actions-delete {
    border-radius: 8px;
    border: 1px solid rgba(var(--danger-rgb), 0.6);
    background: rgba(var(--danger-rgb), 0.1);
    color: #ff8fa3;
    font-family: inherit;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: 0.18s ease;
    height: 34px;
    font-size: 0.7rem;
}

.slot-actions-delete:hover {
    color: #ffffff;
    background: rgba(var(--danger-rgb), 0.28);
    border-color: rgba(var(--danger-rgb), 0.9);
    box-shadow: 0 0 16px rgba(var(--danger-rgb), 0.4);
}

.slot-actions-content .modal-footer {
    position: static;
    margin-top: 18px;
    background: transparent;
}

/* =========================================================
     53. VETRINA · popup azioni compatto (~ -50%)
     ========================================================= */

.slot-actions-content h2 {
    font-size: 1rem;
    margin: 0 0 2px 0;
}

.slot-actions-buttons .overlay-action-btn {
    height: 34px;
    padding: 0 14px;
    font-size: 0.72rem;
}

.slot-actions-content .modal-footer {
    margin-top: 12px;
}

.slot-actions-content .close-btn {
    padding: 7px 24px;
    font-size: 0.75rem;
}

/* =========================================================
   54. IMPOSTAZIONI
   ========================================================= */
.settings-wrap {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 22px;
    max-width: 1100px;
}
.settings-card {
    padding: 26px;
    border-radius: 14px;
    border: 1px solid rgba(var(--accent-rgb), 0.22);
    background:
        linear-gradient(145deg, rgba(var(--bg-soft-rgb), 0.90), rgba(var(--bg-rgb), 0.88)),
        radial-gradient(circle at 70% 20%, rgba(var(--accent-rgb), 0.14), transparent 40%);
    box-shadow:
        inset 0 0 28px rgba(var(--accent-rgb), 0.06),
        0 18px 45px rgba(0, 0, 0, 0.42);
}
.settings-card-title {
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: 0.9rem;
    margin-bottom: 22px;
    text-shadow: 0 0 14px rgba(var(--accent-rgb), 0.9);
}
.settings-field {
    margin-bottom: 18px;
}
.settings-field label {
    display: block;
    color: var(--text-muted);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}
.settings-input {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    box-sizing: border-box;
    border-radius: 8px;
    border: 1px solid rgba(var(--accent-rgb), 0.26);
    background: rgba(var(--bg-rgb), 0.82);
    color: #ffffff;
    font-family: inherit;
    font-size: 0.86rem;
}
.settings-input:focus {
    outline: none;
    border-color: rgba(var(--accent-soft-rgb), 0.62);
    box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.20);
}
.settings-input:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}
.settings-inline {
    display: flex;
    gap: 10px;
}
.settings-inline .settings-input {
    flex: 1;
}
.settings-inline .overlay-action-btn {
    height: 46px;
    padding: 0 22px;
    white-space: nowrap;
}
.settings-hint {
    margin-top: 8px;
    color: var(--text-dim);
    font-size: 0.7rem;
    letter-spacing: 0.4px;
}
.settings-choices {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.settings-choice:hover {
    color: #ffffff;
    border-color: rgba(var(--accent-soft-rgb), 0.55);
    background: rgba(var(--bg-elevated-rgb), 0.88);
}
.settings-choice.active {
    color: #ffffff;
    border-color: rgba(var(--accent-soft-rgb), 0.85);
    background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.34), rgba(var(--accent-rgb), 0.08));
    box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.30);
}
.settings-card .overlay-action-btn {
    margin-top: 4px;
}

/* --- Smartphone --- */
@media (max-width: 600px) {
    .settings-wrap { grid-template-columns: 1fr; }
    .settings-inline { flex-direction: column; }
    .settings-inline .overlay-action-btn { width: 100%; }
}

/* =========================================================
   55. IMPOSTAZIONI · divisore + bottone modello nel Backup
   ========================================================= */
.settings-divider {
    height: 1px;
    margin: 22px 0;
    background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.35), transparent);
}
.settings-example-btn {
    display: inline-flex;
    align-items: center;
    height: 38px;
    padding: 0 20px;
    border-radius: 8px;
    border: 1px solid rgba(var(--gold-rgb), 0.45);
    background: rgba(var(--gold-rgb), 0.08);
    color: var(--gold);
    font-family: inherit;
    font-size: 0.72rem;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: 0.2s ease;
}
.settings-example-btn::before {
    content: "\2193";
    margin-right: 9px;
    font-size: 0.95rem;
}
.settings-example-btn:hover {
    color: #ffffff;
    background: rgba(var(--gold-rgb), 0.20);
    border-color: rgba(var(--gold-rgb), 0.85);
    box-shadow: 0 0 14px rgba(var(--gold-rgb), 0.35);
    transform: translateY(-1px);
}
/* =========================================================
   56. IMPOSTAZIONI · ZONA PERICOLO (elimina account)
   ========================================================= */

.settings-danger {
    border-color: rgba(var(--danger-rgb), 0.35);
}

.settings-danger .settings-card-title {
    color: #ff8fa3;
    text-shadow: 0 0 14px rgba(var(--danger-rgb), 0.6);
}

.settings-danger-btn {
    height: 44px;
    padding: 0 24px;
    border-radius: 8px;
    border: 1px solid rgba(var(--danger-rgb), 0.6);
    background: rgba(var(--danger-rgb), 0.12);
    color: #ff8fa3;
    font-family: inherit;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: 0.2s ease;
}

.settings-danger-btn:hover {
    color: #ffffff;
    background: rgba(var(--danger-rgb), 0.28);
    border-color: rgba(var(--danger-rgb), 0.9);
    box-shadow: 0 0 16px rgba(var(--danger-rgb), 0.4);
}

/* --- Modale eliminazione account --- */
.delete-modal-content {
    width: 460px;
    max-width: 92vw;
    text-align: center;
    border-color: rgba(var(--danger-rgb), 0.45) !important;
}

.delete-modal-content h2 {
    color: #ff8fa3;
    text-shadow: 0 0 14px rgba(var(--danger-rgb), 0.6);
}

.delete-warn-text {
    color: var(--text-muted) !important;
    font-size: 0.82rem !important;
    line-height: 1.6;
    margin: 0 0 20px 0 !important;
}

.delete-modal-content .settings-input {
    margin-bottom: 4px;
}

/* =========================================================
   57. FOOTER "COMPRIMI SET" (barra in fondo a ogni set)
   ---------------------------------------------------------
   ISTRUZIONI:
   - Incolla TUTTO questo blocco in FONDO a static/css/style.css
     (dopo la sezione 56 - Zona Pericolo).
   - Non cancellare nulla: aggiunge solo la barra in basso.

   COSA FA:
   - Mostra una piccola barra sotto le carte di ogni set, con
     una freccia, per richiudere il set senza risalire in alto.
   - La barra sparisce automaticamente quando il set e' gia' chiuso.
   ========================================================= */

.set-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 40px;
    padding: 11px 22px;
    cursor: pointer;
    user-select: none;
    color: var(--accent-soft);
    font-family: "Orbitron", sans-serif;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.10), rgba(var(--accent-rgb), 0.03));
    border-top: 1px solid rgba(var(--accent-rgb), 0.20);
    transition: background 0.2s ease, color 0.2s ease;
}

.set-footer:hover {
    color: #ffffff;
    background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.22), rgba(var(--accent-rgb), 0.06));
    text-shadow: 0 0 10px rgba(var(--accent-rgb), 0.6);
}

.set-footer-arrow {
    font-size: 0.85rem;
    transform: translateY(1px);
}

/* Quando il set e' compreso, il footer non serve: lo nascondiamo */
.set-section.collapsed .set-footer {
    display: none;
}

/* Smartphone: barra un po' piu' compatta */
@media (max-width: 600px) {
    .set-footer {
        min-height: 34px;
        padding: 8px 12px;
        font-size: 0.64rem;
        letter-spacing: 1.2px;
    }
}
/* =========================================================
   58. DASHBOARD - COMPLETAMENTO PER RARITA'
   ---------------------------------------------------------
   ISTRUZIONI:
   - Incolla TUTTO questo blocco in FONDO a static/css/style.css
     (dopo la sezione 57 - Footer Comprimi Set).
   - Non cancellare nulla.

   COSA FA:
   - Trasforma lo spazio vuoto accanto alla ruota della Dashboard
     in una lista di barre: per ogni rarita' mostra quante carte
     possiedi sul totale. Le rarita' piu' pregiate sono in oro.
   ========================================================= */

/* Riquadro contenitore (sostituisce lo sfondo decorativo vuoto) */
.mh-progress-creature.mh-rarity-breakdown {
    height: 210px;
    padding: 16px 18px;
    background: rgba(var(--bg-rgb), 0.55);
    border: 1px solid rgba(var(--accent-rgb), 0.18);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.mh-rarity-title {
    color: var(--accent-soft);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 12px;
    text-shadow: 0 0 10px rgba(var(--accent-rgb), 0.5);
    flex-shrink: 0;
}

.mh-rarity-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    padding-right: 6px;
}

.mh-rarity-row {
    display: grid;
    grid-template-columns: 52px 1fr 54px;
    align-items: center;
    gap: 10px;
}

.mh-rarity-name {
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mh-rarity-bar {
    height: 7px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 100px;
    overflow: hidden;
}

.mh-rarity-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--accent-deep), var(--accent-soft));
    box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.7);
    transition: width 0.6s ease;
}

.mh-rarity-count {
    color: var(--text-muted);
    font-size: 0.68rem;
    text-align: right;
    white-space: nowrap;
}

/* Rarita' pregiate (order >= 35): tocco dorato coerente con lo shine */
.mh-rarity-row.high .mh-rarity-name {
    color: var(--gold);
    text-shadow: 0 0 10px rgba(var(--gold-rgb), 0.5);
}

.mh-rarity-fill.gold {
    background: linear-gradient(90deg, #b57e12, var(--gold));
    box-shadow: 0 0 10px rgba(var(--gold-rgb), 0.7);
}

/* Scrollbar in tema */
.mh-rarity-list::-webkit-scrollbar {
    width: 6px;
}
.mh-rarity-list::-webkit-scrollbar-track {
    background: transparent;
}
.mh-rarity-list::-webkit-scrollbar-thumb {
    background: rgba(var(--accent-rgb), 0.45);
    border-radius: 99px;
}
.mh-rarity-list::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--accent-soft-rgb), 0.75);
}

/* Su schermi stretti la Dashboard impila: manteniamo la lista leggibile */
@media (max-width: 1350px) {
    .mh-progress-creature.mh-rarity-breakdown {
        height: auto;
        min-height: 180px;
    }
}
/* =========================================================
   59. DASHBOARD - MINI-CARTE NON POSSEDUTE (grigie)
   ---------------------------------------------------------
   ISTRUZIONI:
   - Incolla in FONDO a static/css/style.css (dopo la sezione 58).
   - Non cancellare nulla.

   COSA FA:
   - Le mini-carte della Dashboard che non possiedi (es. carte in
     Wishlist non ancora ottenute) vengono mostrate in grigio,
     come nella Collezione.
   ========================================================= */

.mh-small-card.not-owned {
    border-color: rgba(var(--text-dim-rgb), 0.14);
    background: linear-gradient(180deg, rgba(var(--bg-soft-rgb), 0.72), rgba(var(--bg-rgb), 0.94));
}

.mh-small-card.not-owned img {
    filter: grayscale(92%) brightness(0.62);
    opacity: 0.58;
}

.mh-small-card.not-owned .mh-small-card-name,
.mh-small-card.not-owned .mh-small-card-code {
    opacity: 0.58;
}

/* Hover piu' sobrio sulle mancanti (coerente con la Collezione) */
.mh-small-card.not-owned:hover {
    border-color: rgba(var(--accent-rgb), 0.34);
}

.mh-small-card.not-owned:hover img {
    opacity: 0.68;
}
/* =========================================================
   60. FIX REPAINT MINI-CARTE (immagini che appaiono solo
       al passaggio del mouse) - Dashboard
   ---------------------------------------------------------
   COSA FA:
   - Forza il browser a disegnare subito le immagini delle
     mini-carte, mettendole su un proprio "livello" grafico.
     Cosi' non aspettano piu' il passaggio del mouse per comparire.
   ========================================================= */

.mh-small-card img {
    transform: translateZ(0);
    backface-visibility: hidden;
}
/* =========================================================
   61. NOTE PERSONALI SULLE CARTE
   ---------------------------------------------------------
   ISTRUZIONI:
   - Incolla in FONDO a static/css/style.css (dopo la sezione 60).
   - Non cancellare nulla.
   ========================================================= */

/* --- Campo note nel modal --- */
.notes-block {
    margin: 14px 0 6px 0;
    padding: 14px;
    border: 1px solid rgba(var(--accent-rgb), 0.30);
    border-radius: 10px;
    background: rgba(var(--accent-rgb), 0.05);
    text-align: left;
}

.notes-title {
    color: var(--accent-soft);
    font-size: 0.72rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 10px;
    text-shadow: 0 0 10px rgba(var(--accent-rgb), 0.45);
}

.notes-input {
    width: 100%;
    min-height: 70px;
    max-height: 160px;
    resize: vertical;
    padding: 10px 12px;
    box-sizing: border-box;
    border-radius: 8px;
    border: 1px solid rgba(var(--accent-rgb), 0.30);
    background: rgba(var(--bg-rgb), 0.85);
    color: #ffffff;
    font-family: inherit;
    font-size: 0.85rem;
    line-height: 1.5;
}

.notes-input:focus {
    outline: none;
    border-color: rgba(var(--accent-soft-rgb), 0.65);
    box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.25);
}

.notes-input::placeholder {
    color: rgba(var(--text-rgb), 0.4);
}

.notes-hint {
    min-height: 16px;
    margin-top: 8px;
    font-size: 0.68rem;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    transition: color 0.2s ease;
}

.notes-hint.ok { color: var(--success); }
.notes-hint.error { color: #ff8fa3; }

/* --- Icona nota sulla carta in griglia --- */
.note-badge {
    position: absolute;
    top: 42px;      /* subito sotto il badge della rarita' */
    left: 10px;
    z-index: 6;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid rgba(var(--accent-rgb), 0.6);
    background: rgba(var(--bg-soft-rgb), 0.9);
    font-size: 0.8rem;
    cursor: help;
    box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.35);
}

/* --- Smartphone: carte compatte --- */
@media (max-width: 600px) {
    .note-badge {
        top: 30px;
        left: 5px;
        width: 20px;
        height: 20px;
        font-size: 0.62rem;
    }
}

/* --- Schermi bassi: campo note piu' compatto nel modal --- */
@media (max-height: 740px) {
    .notes-block {
        margin: 10px 0 4px 0;
        padding: 10px;
    }
    .notes-input {
        min-height: 54px;
    }
}
/* =========================================================
   62. SIDEBAR SCROLLABILE + BOX UTENTE NELLA TOP BAR
   ---------------------------------------------------------
   ISTRUZIONI:
   - Incolla in FONDO a static/css/style.css (dopo la sezione 61).
   - Non cancellare nulla.
   ========================================================= */

/* --- Menu della sidebar scrollabile (logo resta fisso in alto) --- */
.sidebar-nav {
    flex: 1 1 auto;
    min-height: 0;          /* indispensabile per far scrollare dentro un flex */
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 6px;
}

.sidebar-nav::-webkit-scrollbar {
    width: 6px;
}
.sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}
.sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(var(--accent-rgb), 0.45);
    border-radius: 99px;
}
.sidebar-nav::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--accent-soft-rgb), 0.75);
}

/* --- Box utente nella TOP BAR (a destra) --- */
.topbar-player {
    display: flex;
    align-items: center;
    gap: 14px;
}

.topbar-player-info {
    text-align: right;
    line-height: 1.2;
}

.topbar-player-info .player-name {
    color: #ffffff;
    font-size: 0.9rem;
}

.topbar-player-info .player-rank {
    color: var(--accent-soft);
    font-size: 0.72rem;
    margin-top: 3px;
}

.topbar-player-xp {
    width: 170px;
}

/* L'avatar eredita gradiente e glow globali di .player-avatar, qui solo la misura */
.topbar-player .player-avatar {
    width: 44px;
    height: 44px;
}

/* --- Tablet: la top bar puo' andare a capo (gia' previsto), niente da fare --- */

/* --- Smartphone: niente barra XP nella top bar, restano nome + rank + avatar --- */
@media (max-width: 600px) {
    .topbar-player-xp {
        display: none;
    }
    .topbar-player {
        gap: 10px;
    }
    .topbar-player-info .player-name {
        font-size: 0.8rem;
    }
}
/* =========================================================
   62-BIS. SPAZIO TRA BOX UTENTE E LOGOUT (top bar)
   ---------------------------------------------------------
   ISTRUZIONI:
   - Incolla in FONDO a static/css/style.css (dopo la sezione 62).
   - Non cancellare nulla.

   COSA FA:
   - Allinea box utente e bottone Logout sulla stessa riga, con un
     po' di spazio tra loro.
   ========================================================= */

.top-bar-right {
    display: flex;
    align-items: center;
    gap: 20px;
}
/* =========================================================
   63. GRADAZIONE CARTE
   ---------------------------------------------------------
   ISTRUZIONI:
   - Incolla in FONDO a static/css/style.css (dopo la sezione 62).
   - Non cancellare nulla.
   ========================================================= */

/* --- Blocco gradazione nel modal --- */
.grading-block {
    margin: 14px 0 6px 0;
    padding: 14px;
    border: 1px solid rgba(var(--gold-rgb), 0.30);
    border-radius: 10px;
    background: rgba(var(--gold-rgb), 0.05);
    text-align: left;
}

.grading-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.grading-label {
    color: var(--gold);
    font-size: 0.72rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(var(--gold-rgb), 0.4);
}

/* Toggle No / Si' */
.grading-toggle {
    display: inline-flex;
    border: 1px solid rgba(var(--gold-rgb), 0.35);
    border-radius: 8px;
    overflow: hidden;
}

.grading-toggle-btn {
    padding: 8px 18px;
    border: none;
    background: rgba(var(--bg-rgb), 0.6);
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.8rem;
    cursor: pointer;
    transition: 0.18s ease;
}

.grading-toggle-btn.active {
    color: #ffffff;
    background: rgba(var(--gold-rgb), 0.28);
    text-shadow: 0 0 10px rgba(var(--gold-rgb), 0.6);
}

.grading-toggle-btn:hover:not(.active) {
    color: var(--text);
    background: rgba(var(--gold-rgb), 0.12);
}

/* Dettagli (DA + Voto) */
.grading-details {
    display: flex;
    gap: 12px;
    margin-top: 14px;
    flex-wrap: wrap;
}

.grading-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 140px;
}

.grading-field label {
    color: var(--text-muted);
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.grading-select,
.grading-input {
    height: 42px;
    padding: 0 12px;
    box-sizing: border-box;
    border-radius: 8px;
    border: 1px solid rgba(var(--gold-rgb), 0.30);
    background: rgba(var(--bg-rgb), 0.85);
    color: #ffffff;
    font-family: inherit;
    font-size: 0.85rem;
}

.grading-select:focus,
.grading-input:focus {
    outline: none;
    border-color: rgba(var(--gold-rgb), 0.7);
    box-shadow: 0 0 14px rgba(var(--gold-rgb), 0.25);
}

.grading-company-other,
#grading-company-other {
    margin-top: 8px;
    width: 100%;
}

.grading-grade {
    max-width: 120px;
}


/* Distanza dal cuore, che gli sta a destra */
.card-wishlist-row .grading-badge {
    margin-right: 10px;
}

/* --- Smartphone --- */
@media (max-width: 600px) {
    .grading-badge {
        font-size: 0.54rem;
        padding: 2px 6px;
    }
    .card-wishlist-row .grading-badge {
        margin-right: 6px;
    }
    .grading-details {
        gap: 8px;
    }
}

/* --- Schermi bassi: blocco piu' compatto nel modal --- */
@media (max-height: 740px) {
    .grading-block {
        margin: 10px 0 4px 0;
        padding: 10px;
    }
    .grading-details {
        margin-top: 10px;
    }
}
/* =========================================================
   64. FIX MODALE (immagine grande + scroll) + BADGE A MEDAGLIA
   ---------------------------------------------------------
   ISTRUZIONI:
   - Incolla in FONDO a static/css/style.css (dopo la sezione 63).
   - Non cancellare nulla: essendo piu' in basso, queste regole
     vincono su quelle precedenti.
   ========================================================= */

/* ---------------------------------------------------------
   A) IMMAGINE CARTA: torna grande, il resto scorre
   --------------------------------------------------------- */
.modal-img-container {
    flex: 0 0 auto;          /* non si restringe piu' */
    height: 64vh;            /* grande, ma adattiva allo schermo */
    min-height: 340px;
    max-height: 620px;
    margin-bottom: 1px;
}

/* La modale scrolla gia' (max-height:92vh + overflow-y:auto):
   con l'immagine fissa, note e gradazione finiscono sotto e si
   raggiungono scrollando. Rendiamo lo scroll piu' evidente. */
.modal-content {
    scroll-padding-bottom: 20px;
}

/* Su schermi molto bassi riduciamo un po' l'immagine per non
   dover scrollare troppo (ma resta comunque grande) */
@media (max-height: 740px) {
    .modal-img-container {
        height: 48vh;
        min-height: 280px;
    }
}


/* ---------------------------------------------------------
   B) BADGE GRADAZIONE A MEDAGLIA (colore in base al voto)
   Le classi tier-* le assegna il JS (vedi grad_5).
   --------------------------------------------------------- */

/* Bronzo (voto < 7) */
.grading-badge.tier-bronze {
    border-color: rgba(205, 127, 50, 0.85);
    background: linear-gradient(135deg, rgba(120, 70, 25, 0.95), rgba(180, 110, 50, 0.92));
    box-shadow: 0 0 10px rgba(205, 127, 50, 0.45),
        inset 0 0 6px rgba(255, 255, 255, 0.15);
    color: #fff3e6;
}

/* Argento (voto 7 - 8.5) */
.grading-badge.tier-silver {
    border-color: rgba(220, 220, 235, 0.9);
    background: linear-gradient(135deg, rgba(120, 125, 140, 0.95), rgba(200, 205, 220, 0.9));
    box-shadow: 0 0 10px rgba(220, 220, 240, 0.45),
        inset 0 0 6px rgba(255, 255, 255, 0.25);
    color: #1a1a24;
    text-shadow: none;
}

/* Oro (voto 9 - 9.5) */
.grading-badge.tier-gold {
    border-color: rgba(var(--gold-rgb), 0.95);
    background: linear-gradient(135deg, rgba(150, 100, 15, 0.97), rgba(255, 200, 70, 0.92));
    box-shadow: 0 0 12px rgba(var(--gold-rgb), 0.55),
        inset 0 0 6px rgba(255, 255, 255, 0.25);
    color: #3a2600;
    text-shadow: none;
}

/* Platino (voto 10) */
.grading-badge.tier-platinum {
    border-color: rgba(210, 245, 255, 1);
    background: linear-gradient(135deg, rgba(150, 210, 235, 0.95), rgba(235, 250, 255, 0.95));
    box-shadow: 0 0 16px rgba(190, 235, 255, 0.7),
        inset 0 0 8px rgba(255, 255, 255, 0.5);
    color: #0a2733;
    text-shadow: none;
}

/* Gradata senza voto: resta il blu neutro di default (sezione 63) */
/* =========================================================
   65. RIFINITURE GRADAZIONE (filtro + mini-stat dashboard)
   ---------------------------------------------------------
   ISTRUZIONI:
   - Incolla in FONDO a static/css/style.css (dopo la sezione 64).
   - Non cancellare nulla.
   ========================================================= */

/* --- Bottone filtro "Gradate" attivo --- */
#graded-toggle-btn.active {
    color: #ffffff;
    border-color: rgba(var(--gold-rgb), 0.7);
    background: rgba(var(--gold-rgb), 0.20);
    box-shadow: inset 0 0 18px rgba(var(--gold-rgb), 0.10),
        0 0 14px rgba(var(--gold-rgb), 0.25);
}

/* --- Dashboard: mini-stat ora sono 5 --- */
.mh-mini-stats {
    grid-template-columns: repeat(5, 1fr);
}

/* Icona emoji dentro il mini-stat (per "Gradate") ben centrata */
.mh-mini-icon {
    line-height: 1;
}

/* Ripiego su schermi medio-stretti: torna a griglia flessibile */
@media (max-width: 1350px) {
    .mh-mini-stats {
        grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    }
}

@media (max-width: 600px) {
    .mh-mini-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* ---------------------------------------------------------
   66. FIX: sidebar-nav (icone in alto su mobile) non scorreva
   ---------------------------------------------------------
   La sezione 62 aveva messo overflow-x:hidden su .sidebar-nav
   in modo permanente, bloccando lo scroll orizzontale che
   serviva SOLO su mobile. Qui lo ripristiniamo per mobile.
   ========================================================= */
@media (max-width: 1024px) {
    .sidebar-nav {
        overflow-x: auto !important;
        overflow-y: visible !important;
    }
}

/* ---------------------------------------------------------
   67. FIX: Dashboard, riquadro "Completamento per Rarita'"
   invisibile su smartphone (le 2 colonne non si adattavano)
   ========================================================= */
@media (max-width: 768px) {
    .mh-progress-content {
        grid-template-columns: 1fr !important;
    }
    .mh-progress-ring {
        margin: 0 auto;
    }
    .mh-progress-creature.mh-rarity-breakdown {
        height: auto;
        min-height: 0;
        margin-top: 16px;
    }
}
@media (max-width: 1024px) {
    .game-area {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    .memory-board {
        max-height: calc(100vh - 200px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}
/* =========================================================
   68. FIX: "Indovina la Carta" su smartphone
   ---------------------------------------------------------
   COSA FA:
   1) VERTICALE (telefono dritto): riduce l'altezza dell'immagine
      e delle risposte cosi' tutte e 4 le opzioni si vedono senza
      dover scrollare.
   2) ORIZZONTALE (telefono ruotato, poca altezza): invece di
      impilare immagine sopra e risposte sotto (che non ci stanno),
      le affianca una accanto all'altra, come su PC.
   ========================================================= */

/* --- 1) VERTICALE: schermi stretti (telefoni) --- */
@media (max-width: 600px) {
    .quiz-image-panel {
        padding: 12px;
        gap: 8px;
    }
    .quiz-image-frame {
        min-height: 200px;
        max-height: 34vh;
    }
    .quiz-card-img {
        max-height: 32vh;
    }
    .quiz-hint {
        font-size: 0.68rem;
        min-height: 0;
    }
    .quiz-answer-panel {
        padding: 14px;
        gap: 10px;
    }
    .quiz-question {
        font-size: 0.76rem;
        letter-spacing: 2px;
    }
    .quiz-options {
        gap: 8px;
    }
    .quiz-option {
        min-height: 44px;
        padding: 8px 14px;
        font-size: 0.78rem;
    }
    .quiz-feedback {
        min-height: 18px;
        font-size: 0.76rem;
    }
}

/* --- 2) ORIZZONTALE: telefono ruotato, poca altezza disponibile ---
   Vince su tutte le regole precedenti perche' e' l'ultima del file. */
@media (max-width: 900px) and (max-height: 500px) {
    .quiz-stage {
        grid-template-columns: minmax(200px, 0.9fr) minmax(220px, 1.1fr) !important;
        gap: 14px;
    }
    .quiz-image-panel {
        padding: 10px;
        gap: 6px;
    }
    .quiz-image-frame {
        min-height: 0;
        max-height: none;
        height: 100%;
    }
    .quiz-card-img {
        max-height: 78vh;
    }
    .quiz-hint {
        font-size: 0.62rem;
    }
    .quiz-answer-panel {
        padding: 12px;
        gap: 8px;
        justify-content: flex-start;
        overflow-y: auto;
        max-height: 92vh;
    }
    .quiz-question {
        font-size: 0.7rem;
    }
    .quiz-options {
        gap: 6px;
    }
    .quiz-option {
        min-height: 38px;
        padding: 6px 12px;
        font-size: 0.72rem;
    }
    .quiz-feedback {
        min-height: 14px;
        font-size: 0.68rem;
    }
}

/* --- Rete di sicurezza: in ogni caso, l'area di gioco puo'
       sempre scorrere se qualcosa non dovesse bastare --- */
@media (max-width: 1024px) {
    #quiz-stage.quiz-stage {
        overflow-y: visible;
    }
}

/* =========================================================
   69. FIX: schermata iniziale/pausa del Quiz troppo "vuota"
   in orizzontale su smartphone (prima di premere Nuova Partita)
   ---------------------------------------------------------
   COSA FA:
   Il Memory aveva gia' una regola che compatta la barra dei
   controlli quando lo schermo e' basso (orizzontale su telefono).
   Al Quiz mancava la stessa regola: per questo la barra restava
   a grandezza piena e la schermata "Scegli la difficolta'..."
   restava enorme con tanto spazio vuoto sopra e sotto.
   Qui aggiungiamo lo stesso comportamento anche al Quiz, e in piu'
   rendiamo la schermata overlay stessa piu' compatta quando
   l'altezza dello schermo e' ridotta.
   ========================================================= */

/* --- Barra controlli compatta anche nel Quiz (come gia' nel Memory) --- */
body:has(#quiz-stage) {
    overflow: hidden;
}
body:has(#quiz-stage) .main-area {
    padding: 16px 24px;
}
body:has(#quiz-stage) .search-bar {
    min-height: 0;
    margin: 0 0 14px 0;
    padding: 12px 18px;
}

/* --- Overlay (schermata iniziale/pausa) compatta su schermi bassi --- */
@media (max-height: 500px) {
    .game-area {
        min-height: calc(100vh - 140px);
    }
    .game-overlay-inner {
        width: 380px;
        padding: 18px 26px;
    }
    .game-overlay-icon {
        font-size: 1.6rem;
        margin-bottom: 8px;
    }
    .game-overlay-inner h2 {
        font-size: 1.05rem;
        margin: 0 0 6px 0;
    }
    .game-overlay-inner p {
        font-size: 0.7rem;
        line-height: 1.4;
        margin: 0 0 14px 0;
    }
    .overlay-action-btn {
        height: 38px;
        padding: 0 28px;
        font-size: 0.76rem;
    }
}

/* --- Su schermi molto bassi e stretti, anche i controlli si stringono --- */
@media (max-width: 900px) and (max-height: 500px) {
    .memory-hud,
    .lb-tabs {
        height: auto;
        padding: 6px 12px;
    }
    .game-ctrl-btn,
    .set-toggle-btn,
    .dropdown-button {
        height: 38px;
        font-size: 0.72rem;
        padding: 0 12px;
    }
}
/* =========================================================
   70. MENU HAMBURGER MOBILE + TOP BAR SEMPRE IN CIMA
   ---------------------------------------------------------
   COSA FA:
   - Su schermi stretti (telefono/tablet), il vecchio menu
     laterale (che si spostava in alto sopra la topbar) viene
     nascosto del tutto.
   - Al suo posto compare un quadratino "3 righe" a sinistra
     della scritta "Solo Leveling": premendolo si apre un
     cassetto laterale con le stesse voci di menu.
   - Con il menu laterale nascosto, la topbar torna sempre
     ad essere il primo elemento in alto nella pagina.
   ========================================================= */

/* --- Nasconde il vecchio menu laterale su schermi stretti --- */
@media (max-width: 1024px) {
    .sidebar {
        display: none !important;
    }
}

/* --- Bottone hamburger (nascosto su desktop, mostrato su mobile) --- */
.mobile-menu-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid rgba(var(--accent-rgb), 0.35);
    border-radius: 8px;
    background: rgba(var(--accent-rgb), 0.12);
    cursor: pointer;
    flex-shrink: 0;
    transition: 0.2s ease;
}
.mobile-menu-btn span {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: var(--text);
}
.mobile-menu-btn:hover {
    border-color: rgba(var(--accent-soft-rgb), 0.75);
    background: rgba(var(--accent-rgb), 0.22);
    box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.3);
}
@media (max-width: 1024px) {
    .mobile-menu-btn {
        display: flex;
    }
}

/* --- Sfondo scuro dietro al cassetto --- */
.mobile-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 99990;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
.mobile-menu-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

/* --- Cassetto laterale (drawer) --- */
.mobile-menu-drawer {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 280px;
    max-width: 82vw;
    z-index: 99991;
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    background: linear-gradient(to bottom, rgba(var(--bg-soft-rgb), 0.98), rgba(var(--bg-rgb), 0.98));
    border-right: 1px solid rgba(var(--accent-rgb), 0.30);
    box-shadow: 12px 0 40px rgba(0, 0, 0, 0.55);
    transform: translateX(-105%);
    transition: transform 0.28s ease;
    overflow-y: auto;
}
.mobile-menu-drawer.open {
    transform: translateX(0);
}
.mobile-menu-close {
    align-self: flex-end;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid rgba(var(--accent-rgb), 0.35);
    background: rgba(var(--accent-rgb), 0.12);
    color: var(--text);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
}
.mobile-menu-close:hover {
    background: rgba(var(--accent-rgb), 0.24);
}

/* Blocca lo scroll della pagina sotto mentre il cassetto e' aperto */
body.mobile-menu-locked {
    overflow: hidden;
}

/* --- Dentro il cassetto, il menu torna verticale (come su PC),
       non piu' righe di sole icone --- */
#mobile-menu-drawer .sidebar-nav {
    flex: 0 0 auto !important;   /* la scatola si adatta al contenuto reale, non si restringe piu' */
    height: auto !important;
    flex-direction: column !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    width: 100%;
}
#mobile-menu-drawer .side-nav-btn {
    width: 100% !important;
    flex: none !important;
    flex-direction: row !important;
    height: 54px !important;
    min-width: 0 !important;
    font-size: 0.82rem !important;
    padding: 0 16px !important;
    gap: 14px !important;
}
#mobile-menu-drawer .side-nav-icon {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
}
#mobile-menu-drawer .sidebar-logo {
    flex-direction: row;
    gap: 10px;
}
#mobile-menu-drawer .sidebar-player {
    margin-top: auto;
    width: 100%;
}
/* =========================================================
   71. FIX: swipe nel menu hamburger scrollava la pagina sotto
   ---------------------------------------------------------
   COSA FA:
   Su molti telefoni "overflow: hidden" sul body non basta a
   bloccare lo swipe: il dito continua a far scorrere la pagina
   sotto al cassetto. Qui blocchiamo il tocco in modo esplicito
   sia sul body che sull'overlay scuro, mentre lasciamo libero
   lo scroll SOLO dentro il cassetto (in verticale), nel caso
   il menu sia piu' lungo dello schermo.
   ========================================================= */
body.mobile-menu-locked {
    overflow: hidden;
    touch-action: none;
    overscroll-behavior: none;
}

/* L'overlay scuro non deve far passare il tocco alla pagina sotto */
.mobile-menu-overlay {
    touch-action: none;
}

/* Il cassetto invece puo' scrollare in verticale al suo interno,
   ma non deve "rimbalzare" facendo scrollare la pagina dietro */
.mobile-menu-drawer {
    touch-action: pan-y;
    overscroll-behavior: contain;
}
html {
    overscroll-behavior-x: none;
}
.mobile-menu-drawer {
    overscroll-behavior-x: none;
}
/* =========================================================
   73. FIX: menu hamburger tagliato in basso quando lo
   smartphone e' orizzontale (schermo basso)
   ---------------------------------------------------------
   COSA FA:
   Il cassetto usava "height: 100vh". Su Safari, quando la barra
   degli indirizzi/tab e' ancora visibile (specie in orizzontale
   con piu' tab aperte), "100vh" viene calcolato come se quella
   barra sparisse subito, tagliando la parte finale del menu
   (Giochi, Impostazioni, box utente) fuori dallo schermo visibile.
   "100dvh" e' l'unita' pensata apposta per questo: si adatta
   sempre allo spazio DAVVERO visibile in quel momento.
   In piu', quando lo schermo e' basso, rendiamo le voci del menu
   piu' compatte cosi' ci stanno tutte senza quasi bisogno di
   scrollare.
   ========================================================= */

/* --- Altezza corretta del cassetto su tutti i browser --- */
.mobile-menu-drawer {
    height: 100vh;              /* valore di riserva per browser vecchi */
    height: 100dvh;             /* valore corretto: si adatta alla barra di Safari */
    max-height: 100dvh;
}

/* --- Menu compatto quando lo schermo e' basso (telefono ruotato) --- */
@media (max-height: 500px) {
    .mobile-menu-drawer {
        padding: 10px 14px;
        gap: 8px;
    }
    #mobile-menu-drawer .sidebar-logo img:first-child {
        width: 34px;
    }
    #mobile-menu-drawer .sidebar-wordmark {
        width: 130px;
    }
    #mobile-menu-drawer .side-nav-btn {
        height: 40px !important;
        font-size: 0.72rem !important;
        gap: 10px !important;
        padding: 0 12px !important;
    }
    #mobile-menu-drawer .side-nav-icon {
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
    }
    #mobile-menu-drawer .sidebar-nav {
        gap: 6px !important;
    }
    .mobile-menu-close {
        width: 28px;
        height: 28px;
        font-size: 1rem;
    }
    #mobile-menu-drawer .sidebar-player {
        padding: 10px;
    }
}
/* =========================================================
   74. PROFILO E LOGOUT DENTRO AL MENU HAMBURGER
   ---------------------------------------------------------
   COSA FA:
   Lo script mobile-menu.js sposta il VERO box profilo
   (nome, rank, XP, avatar) e il VERO bottone Logout dentro
   al cassetto, subito sotto al logo (profilo) e in fondo dopo
   i bottoni (logout). Qui li rivestiamo con uno stile adatto
   a una colonna stretta invece che alla barra orizzontale.
   ========================================================= */

/* --- Box profilo: da riga orizzontale a card verticale --- */
.mobile-menu-profile .topbar-player {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 18px 14px;
    margin: 4px 0 14px 0;
    border: 1px solid rgba(var(--accent-rgb), 0.25);
    border-radius: 12px;
    background: rgba(var(--accent-rgb), 0.07);
    box-shadow: inset 0 0 18px rgba(var(--accent-rgb), 0.06);
}
.mobile-menu-profile .player-avatar {
    order: 1;
    width: 60px;
    height: 60px;
    margin: 0;
}
.mobile-menu-profile .topbar-player-info {
    order: 2;
    text-align: center;
}
.mobile-menu-profile .topbar-player-info .player-name {
    font-size: 1rem;
}
.mobile-menu-profile .topbar-player-info .player-rank {
    font-size: 0.76rem;
    margin-top: 5px;
}
/* La barra XP, nascosta sugli smartphone nella topbar,
   qui nel cassetto la mostriamo sempre */
.mobile-menu-profile .topbar-player-xp {
    order: 3;
    width: 100%;
    display: block !important;
}

/* --- Logout: staccato dall'ultimo bottone di circa
       mezzo bottone di distanza, poi a tutta larghezza --- */
.mobile-menu-logout {
    margin-top: 27px;   /* ~ meta' altezza di un bottone (54px) */
    padding-top: 14px;
    border-top: 1px solid rgba(var(--accent-rgb), 0.18);
}
.mobile-menu-logout .logout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 46px;
}

/* --- Schermo basso (telefono ruotato): tutto un filo piu' compatto --- */
@media (max-height: 500px) {
    .mobile-menu-profile .topbar-player {
        padding: 10px;
        gap: 6px;
        margin: 2px 0 8px 0;
    }
    .mobile-menu-profile .player-avatar {
        width: 40px;
        height: 40px;
    }
    .mobile-menu-profile .topbar-player-info .player-name {
        font-size: 0.82rem;
    }
    .mobile-menu-profile .topbar-player-info .player-rank {
        font-size: 0.66rem;
        margin-top: 2px;
    }
    .mobile-menu-logout {
        margin-top: 20px;  /* ~ meta' altezza bottone compatto (40px) */
        padding-top: 8px;
    }
    .mobile-menu-logout .logout-btn {
        height: 36px;
        font-size: 0.78rem;
    }
}
/* =========================================================
   75. FIX: frecce della modale (precedente/successiva)
   ---------------------------------------------------------
   COSA FA QUESTO FIX:
   Ancora le frecce DENTRO al riquadro dell'immagine (che e' gia'
   sempre nella posizione corretta, dentro la modale), invece che
   al centro dello schermo. Riserva loro un piccolo spazio ai lati,
   cosi' l'immagine si restringe leggermente solo quel poco che
   serve per non essere mai coperta.
   ========================================================= */

/* --- Spazio riservato alle frecce ai lati dell'immagine --- */
.modal-img-container {
    padding: 0 46px !important;
    box-sizing: border-box !important;
}

/* --- Frecce: da "fisse sullo schermo" a "dentro alla modale" --- */
.modal-nav-btn {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 38px;
    height: 38px;
}
.modal-nav-prev {
    left: 2px !important;
    right: auto !important;
}
.modal-nav-next {
    right: 2px !important;
    left: auto !important;
}

/* --- Schermi piccoli: stesso principio, spazio leggermente ridotto --- */
@media (max-width: 600px) {
    .modal-img-container {
        padding: 0 38px !important;
    }
    .modal-nav-btn {
        width: 34px !important;
        height: 34px !important;
    }
    .modal-nav-prev {
        left: 2px !important;
        right: auto !important;
    }
    .modal-nav-next {
        right: 2px !important;
        left: auto !important;
    }
}

/* =========================================================
   76. SIDEBAR UNIFICATA: profilo + logout dentro al menu,
   sempre visibile su desktop, con puntina per comprimere
   ---------------------------------------------------------
   Richiede anche le modifiche HTML (6 pagine) e la sostituzione
   di mobile-menu.js, spiegate nei file che ti do insieme a questo.
   ========================================================= */

/* --- Riga in alto nella sidebar: logo + puntina --- */
.sidebar-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

/* --- Puntina per fissare/comprimere il menu (solo desktop) --- */
.sidebar-pin-btn {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(var(--accent-rgb), 0.30);
    border-radius: 8px;
    background: rgba(var(--accent-rgb), 0.10);
    color: var(--text);
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s ease;
}
.sidebar-pin-btn:hover {
    background: rgba(var(--accent-rgb), 0.22);
    border-color: rgba(var(--accent-soft-rgb), 0.65);
    box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.25);
}
.sidebar.collapsed .sidebar-pin-btn {
    opacity: 0.55;
}
/* Nel cassetto mobile la puntina non serve: il cassetto e' sempre "espanso" */
.mobile-menu-drawer .sidebar-pin-btn {
    display: none;
}

/* --- Box profilo dentro alla sidebar (funziona sia su desktop
       che dentro al cassetto mobile, perche' e' lo stesso markup) --- */
.sidebar-profile {
    margin: 2px 0 4px 0;
}
.sidebar-profile .topbar-player {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 16px 12px;
    border: 1px solid rgba(var(--accent-rgb), 0.22);
    border-radius: 12px;
    background: rgba(var(--accent-rgb), 0.06);
    box-shadow: inset 0 0 16px rgba(var(--accent-rgb), 0.05);
}
.sidebar-profile .player-avatar {
    order: 1;
    width: 52px;
    height: 52px;
    margin: 0;
    flex-shrink: 0;
}
.sidebar-profile .topbar-player-info {
    order: 2;
    text-align: center;
}
.sidebar-profile .topbar-player-info .player-name {
    font-size: 0.92rem;
}
.sidebar-profile .topbar-player-info .player-rank {
    font-size: 0.72rem;
    margin-top: 4px;
}
.sidebar-profile .topbar-player-xp {
    order: 3;
    width: 100%;
}

/* --- Bottone Logout dentro alla sidebar --- */
.sidebar-logout-link {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 46px;
    padding: 0 16px;
    border-radius: 8px;
    border: 1px solid rgba(var(--danger-rgb), 0.30);
    background: rgba(var(--danger-rgb), 0.08);
    color: var(--danger-red);
    text-decoration: none;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: bold;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: 0.2s ease;
    flex-shrink: 0;
}
.sidebar-logout-link:hover {
    background: var(--danger-red);
    color: #ffffff;
    box-shadow: 0 0 14px rgba(var(--danger-rgb), 0.35);
}
.sidebar-logout-icon {
    font-size: 1.15rem;
    line-height: 1;
    flex-shrink: 0;
}

/* --- top-bar-right ora e' vuoto: non deve occupare spazio inutile --- */
.top-bar-right:empty {
    display: none;
}

/* =========================================================
   SIDEBAR COMPRESSA (solo desktop, quando la puntina e' spenta)
   ========================================================= */
@media (min-width: 1025px) {
    /* La colonna della sidebar nella griglia si restringe */
    .app-shell:has(.sidebar.collapsed) {
        grid-template-columns: 84px minmax(910px, 1fr);
    }

    .sidebar.collapsed {
        min-width: 84px;
        width: 84px;
        padding: 26px 10px;
    }

    /* Logo: solo icona, la scritta sparisce */
    .sidebar.collapsed .sidebar-top {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    .sidebar.collapsed .sidebar-wordmark {
        display: none;
    }

    /* Profilo: solo il cerchio avatar, nome/rank/XP nascosti */
    .sidebar.collapsed .sidebar-profile .topbar-player {
        padding: 10px 4px;
    }
    .sidebar.collapsed .topbar-player-info,
    .sidebar.collapsed .topbar-player-xp {
        display: none;
    }

    /* Voci di menu: solo icona centrata, testo nascosto */
    .sidebar.collapsed .side-nav-btn {
        justify-content: center;
        padding: 0;
        gap: 0;
    }
    .sidebar.collapsed .side-nav-btn span {
        display: none;
    }

    /* Bottone "Vai al sito": stesso trattamento delle voci
       di menu, altrimenti il testo va a capo lettera per
       lettera nello spazio stretto del menu compresso */
    .sidebar.collapsed .sidebar-site-link {
        justify-content: center;
        gap: 0;
        padding: 0;
    }
    .sidebar.collapsed .sidebar-site-link span {
        display: none;
    }

    /* Logout: solo l'icona rossa, testo nascosto */
    .sidebar.collapsed .sidebar-logout-link {
        justify-content: center;
        padding: 0;
    }
    .sidebar.collapsed .sidebar-logout-text {
        display: none;
    }
}
/* =========================================================
   77. FIX: bottone Logout sovrapposto quando una voce di menu
   va a capo su due righe nel cassetto/menu compresso
   ========================================================= */
#mobile-menu-drawer .side-nav-btn,
.sidebar.collapsed .side-nav-btn {
    height: auto !important;
    min-height: 54px;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}
#mobile-menu-drawer .side-nav-btn span,
.sidebar .side-nav-btn span {
    white-space: normal;
    line-height: 1.25;
}
.sidebar-logout-link {
    flex-shrink: 0;      /* non si schiaccia mai, resta sempre leggibile */
    margin-top: 4px;
}
.sidebar-nav {
    margin-bottom: 4px;  /* piccolo respiro extra prima del logout */
}
FILE DA MODIFICARE: static/css/style.css
=========================================
Incolla questo blocco IN FONDO al file (dopo l'ultima sezione esistente,
la "77 - FIX bottone Logout sovrapposto..."). Non cancellare nulla.


/* =========================================================
   78. SELETTORE LINGUA
   \---------------------------------------------------------
   Riusa lo stile dei dropdown gia' esistenti (.dropdown-button,
   .dropdown-content): qui aggiungiamo solo le rifiniture specifiche
   del selettore lingua.
   ========================================================= */
.lang-switcher-btn {
    min-width: 92px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
/* Il menu si apre allineato a destra del bottone, non a sinistra:
   il bottone e' quasi sempre l'elemento piu' a destra della topbar,
   quindi aprendo verso sinistra il menu non esce mai dallo schermo */
.lang-switcher-dropdown {
    width: 190px;
    left: 0;
    right: auto;
}
.lang-option {
    display: block;
    padding: 10px 14px;
    border-radius: 8px;
    color: var(--text);
    text-decoration: none;
    font-size: 0.82rem;
    margin: 2px 0;
    transition: 0.18s ease;
}
.lang-option:hover {
    color: #ffffff;
    background: rgba(var(--accent-rgb), 0.18);
}
.lang-option.active {
    color: #ffffff;
    background: rgba(var(--accent-rgb), 0.28);
    box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.3);
}
/* --- Pagine Login / Registrazione: switcher fisso in alto a destra --- */
.login-lang-switcher {
    position: fixed;
    top: 22px;
    right: 22px;
    z-index: 500;
}
@media (max-width: 600px) {
    .login-lang-switcher {
        top: 14px;
        right: 14px;
    }
    .lang-switcher-btn {
        min-width: 0;
        padding: 0 12px;
        font-size: 0.72rem;
    }
}
/* =========================================================
   79. SETTINGS-CHOICE COME LINK (selettore lingua)
   ========================================================= */
a.settings-choice {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-sizing: border-box;
    gap: 6px;
}
/* =========================================================
   80. SELETTORE LINGUA VICINO AL LOGO - protezione mobile
   ========================================================= */
.top-bar-left .lang-switcher-wrap {
    flex: 0 0 auto;
}
@media (max-width: 600px) {
    .top-bar-left .lang-switcher-wrap .lang-switcher-btn {
        min-width: 0;
        padding: 0 10px;
        font-size: 0.68rem;
    }
}
/* =========================================================
   81. IMPOSTAZIONI · Bottone Privacy Policy (link centrato)
   ========================================================= */
.settings-link-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 34px;
    text-decoration: none;
}
/* Corregge lo spazio "fantasma" che il letter-spacing del bottone
   (.overlay-action-btn) aggiunge anche dopo l'ultima lettera:
   senza questo il testo sembra spostato a sinistra invece che
   centrato davvero. */
.settings-link-btn span {
    margin-right: -1.5px;
}
/* =========================================================
   82. UTILITY - CLASSI PER SOSTITUIRE GLI STILI INLINE
   ---------------------------------------------------------
   ISTRUZIONI:
   - Incolla questo blocco IN FONDO a static/css/style.css
     (dopo l'ultima sezione esistente, la 81).
   - Non cancellare nulla.
   Queste classi sostituiscono tutti gli style="..." trovati
   nelle pagine: login, registrazione, recupero password,
   404/500, privacy policy, impostazioni, collezione (main.js).
   ========================================================= */

/* --- Utility di spaziatura generiche --- */
.u-mt-0   { margin-top: 0; }
.u-mt-6   { margin-top: 6px; }
.u-mt-8   { margin-top: 8px; }
.u-mt-12  { margin-top: 12px; }
.u-mt-14  { margin-top: 14px; }
.u-mt-16  { margin-top: 16px; }
.u-mt-22  { margin-top: 22px; }
.u-mb-6   { margin-bottom: 6px; }
.u-mb-10  { margin-bottom: 10px; }
.u-mb-12  { margin-bottom: 12px; }
.u-mb-18  { margin-bottom: 18px; }
.u-gap-12 { gap: 12px; }
.u-break-all { word-break: break-all; }

/* --- Box messaggio di successo (login / registrazione / recupero password) --- */
.login-success {
    margin-bottom: 16px;
    padding: 10px;
    border-radius: 8px;
    background: rgba(var(--success-rgb), 0.12);
    border: 1px solid rgba(var(--success-rgb), 0.35);
    color: #9bffcb;
    font-size: 0.78rem;
}

/* --- Link "Privacy Policy" piccolo sotto al form di login --- */
.login-hint-small {
    margin-top: 16px;
    font-size: 0.62rem;
}

/* --- Testo legale piccolo sotto al form di registrazione --- */
.login-hint-legal {
    margin-top: 12px;
    font-size: 0.66rem;
    line-height: 1.6;
}

/* --- Barra robustezza password (register / reset_password / settings) --- */
.pwd-strength-bar {
    height: 6px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}
/* register.html e reset_password.html: la barra sta subito sotto al campo,
   con un margine negativo per "agganciarsi" al bordo dell'input */
.pwd-strength-bar.tight {
    margin-top: -6px;
}
/* settings.html: la barra sta sotto un campo con piu' respiro */
.pwd-strength-bar.spaced {
    margin-top: 8px;
}
.pwd-strength-fill {
    height: 100%;
    width: 0%;
    transition: width 0.3s ease, background 0.3s ease;
}
.pwd-strength-msg {
    font-size: 0.7rem;
    text-align: left;
    color: var(--text-muted);
    min-height: 14px;
    margin-top: 4px;
}

/* --- Pagine 404 / 500 --- */
.error-code {
    font-size: 2.6rem;
    letter-spacing: 4px;
    margin: 18px 0 6px 0;
}
.error-text {
    margin-top: 0;
    margin-bottom: 22px;
    font-size: 0.8rem;
    line-height: 1.6;
}
.error-back-btn {
    display: inline-block;
    margin: 0 auto;
    padding: 12px 34px;
    border-radius: 8px;
    border: 1px solid rgba(var(--accent-rgb), 0.5);
    background: rgba(var(--accent-rgb), 0.18);
    color: #ffffff;
    text-decoration: none;
    font-family: inherit;
    font-size: 0.86rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    /* Necessario perche' questo bottone e' usato sia su <a> (404/500)
       sia su <button> (privacy policy): i <button> non hanno il
       cursore a manina di default come gli <a>, va aggiunto a mano. */
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: 0.2s ease;
}
.error-back-btn:hover {
    background: rgba(var(--accent-rgb), 0.32);
    border-color: rgba(var(--accent-soft-rgb), 0.85);
    box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.28);
}

/* --- Pagina Privacy Policy (testo legale) --- */
.legal-page-body {
    align-items: flex-start;
    padding: 40px 16px;
}
.legal-panel {
    width: 820px;
    max-width: 94vw;
    min-width: 0;
    text-align: left;
    margin: 0 auto;
}
.legal-logo {
    margin-bottom: 8px;
}
.legal-logo img {
    width: 70px;
}
.legal-title {
    font-size: 1.6rem;
    text-align: center;
    margin: 6px 0 4px 0;
}
.legal-subtitle {
    text-align: center;
}
.legal-body {
    color: var(--text);
    font-size: 0.86rem;
    line-height: 1.75;
    margin-top: 20px;
}
.legal-body h2 {
    font-size: 1.05rem;
    margin-top: 28px;
}
.legal-body ul {
    padding-left: 20px;
}
.legal-updated {
    margin-top: 30px;
    color: var(--text-muted);
    font-size: 0.76rem;
}
.legal-back-wrap {
    text-align: center;
    margin-top: 34px;
}

/* --- Impostazioni: piccole rifiniture di spaziatura --- */
.settings-hint.no-top-margin {
    margin-top: 0;
}

/* --- Set header nella Collezione (generato da main.js) --- */
.set-header-row {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
}
.set-header-thumb {
    width: 60px;
    height: 60px;
    object-fit: contain;
    border-radius: 4px;
}
.set-header-body {
    flex: 1;
}
.set-header-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.set-percent {
    color: #ffffff;
    font-weight: bold;
}
.set-progress-track {
    height: 10px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    overflow: hidden;
}
.set-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-deep), var(--accent-soft));
}
.set-header-arrow {
    color: #ffffff;
    background: rgba(var(--bg-rgb), 0.85);
    padding: 6px 8px;
    border-radius: 4px;
    border: 1px solid var(--border);
    font-size: 0.8rem;
}

/* --- Anteprima carta non posseduta nella modale (sostituisce lo style inline JS) --- */
.modal-img.not-owned-preview {
    filter: grayscale(80%);
    opacity: 0.45;
}


/* =========================================================
   83. POSIZIONE DEI BADGE SULLE CARTE
   ---------------------------------------------------------
   COSA RISOLVE

   I badge della rarita' e dei doppioni erano finiti al centro,
   sopra la carta, invece che negli angoli.

   PERCHE' SUCCEDEVA

   Quando i badge sono stati unificati dentro components.css,
   quel file ha dato loro la FORMA (pillola, altezza, colore)
   ma non la POSIZIONE: il "position: absolute" con le
   coordinate non e' stato riportato.

   Le coordinate esistevano solo dentro @media (max-width: 600px),
   quindi funzionavano sul telefono e sparivano su schermo
   grande. Da li' il comportamento strano: badge centrati sulle
   carte, e nel modale l'x2 accanto alla freccia.

   COSA FA QUESTO BLOCCO

   Rimette le coordinate che mancavano:

       rarita'   -> angolo in alto a SINISTRA
       doppioni  -> angolo in alto a DESTRA

   Sulle carte della collezione, nelle mini-card della
   dashboard e dentro al modale.

   ⚠️ Le regole per telefono non vengono toccate: stanno piu'
   in basso in questo file, quindi continuano a vincere e
   restano quelle corrette.
   ========================================================= */

/* ---------------------------------------------------------
   A) CARTE DELLA COLLEZIONE
   ---------------------------------------------------------
   La carta ha gia' "position: relative" e 38px di spazio in
   alto (padding-top): i badge stanno in quella fascia, sopra
   all'immagine, senza coprirla.
   --------------------------------------------------------- */

.card .collection-card-rarity,
.card .duplicate-badge {
    position: absolute;
    top: 8px;
    z-index: 6;
}

.card .collection-card-rarity {
    left: 8px;
}

.card .duplicate-badge {
    right: 8px;
}

/* ---------------------------------------------------------
   B) DENTRO AL MODALE
   ---------------------------------------------------------
   Qui il riferimento e' il riquadro dell'immagine, che e' gia'
   "position: relative".

   Le coordinate precise (top 4/12, left/right) erano gia' nel
   file: mancava solo di dire che sono posizionati in modo
   assoluto. Senza quello, le coordinate venivano ignorate.
   --------------------------------------------------------- */

#modal-card-rarity.collection-card-rarity,
#modal-duplicate-badge.duplicate-badge {
    position: absolute;
    z-index: 10;
}

/* ---------------------------------------------------------
   C) LO SCINTILLIO SULLE RARITA' PREGIATE
   ---------------------------------------------------------
   .shine aggiungeva da solo "position: absolute", ed era
   l'unico motivo per cui alcune carte sembravano a posto e
   altre no: quelle rare erano posizionate per sbaglio, dal
   codice dell'animazione.

   Adesso che la posizione arriva dal punto A, qui resta solo
   quello che serve davvero: tenere lo scintillio dentro ai
   bordi arrotondati della pillola.
   --------------------------------------------------------- */

.collection-card-rarity.shine {
    overflow: hidden;
}


/* =========================================================
   84. IL BADGE DELLA RARITA'
   ---------------------------------------------------------
   COSA RISOLVE

   Il badge della rarita' era diventato nero neutro. Prima era
   rosso, e si distingueva a colpo d'occhio dal badge dei
   doppioni.

   PERCHE' SUCCEDEVA

   E' lo stesso motivo della posizione (sezione 83): quando i
   badge sono stati unificati dentro components.css, due badge
   che erano DIVERSI hanno ricevuto lo stesso trattamento.

       rarita'   era rosso  -> nero neutro
       doppioni  era viola  -> blu d'accento (corretto)

   Il rosso non e' sparito del tutto: e' rimasto su
   .mh-small-rarity, cioe' le mini-card della dashboard. Per
   questo li' il badge sembrava giusto e nella collezione no.

   COSA FA QUESTO BLOCCO

   Rimette il rosso sul badge grande, con gli stessi identici
   valori di quello piccolo. I due tornano uguali.

   ⚠️ Il rosso qui NON e' un residuo del vecchio tema viola:
   e' un colore-significato, come l'oro della gradazione. Sta
   bene sul blu e serve proprio a farsi notare.
   ========================================================= */

.collection-card-rarity {
    border-color: rgba(var(--danger-rgb), 0.85);
    background: linear-gradient(135deg,
        rgba(70, 12, 35, 0.98),
        rgba(150, 28, 65, 0.95));
    color: #ffffff;
    box-shadow: 0 0 12px rgba(var(--danger-rgb), 0.42),
        inset 0 0 8px rgba(255, 255, 255, 0.12);
}

/* ---------------------------------------------------------
   Lo scintillio sulle rarita' pregiate
   ---------------------------------------------------------
   Il badge ha un gradiente suo, quindi la striscia di luce
   deve passarci SOPRA, non sotto: senza questo si vedrebbe
   appena.
   --------------------------------------------------------- */

.collection-card-rarity.shine::after {
    z-index: 1;
}

/* =========================================================
   85. MENU A TENDINA CON SOTTOGRUPPI
   ---------------------------------------------------------
   I tre menu Filtri / Ordina / Viste contengono piu' sezioni.
   Qui c'e' solo quello che serve a separarle: il resto
   (sfondo, bordo, apertura) arriva gia' da components.css.
   ========================================================= */

.dropdown-content--grande {
    width: 320px;
    max-height: 70vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.dd-gruppo {
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.18);
}

/* L'ultimo gruppo non ha bisogno della riga divisoria:
   sotto c'e' gia' il bordo del menu */
.dd-gruppo--ultimo {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
}

.dd-gruppo-titolo {
    color: var(--accent-soft);
    font-family: "Orbitron", sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 8px;
    text-shadow: 0 0 10px rgba(var(--accent-rgb), 0.45);
}

.dd-gruppo-bottoni {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.dd-gruppo-bottoni .settings-choice {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
}

/* Le azioni "Seleziona tutte / Deseleziona" dentro a un gruppo:
   stessa riga del vecchio .dropdown-footer, ma senza il bordo
   in alto, che qui farebbe una doppia linea insieme a quella
   del gruppo */
.dd-gruppo-azioni {
    display: flex;
    margin-top: 6px;
}

/* Il bottone Filtri si accende quando c'e' almeno un filtro
   attivo: col menu chiuso e' l'unico modo per accorgersene */
#filters-button.active {
    color: #ffffff;
    border-color: rgba(var(--accent-soft-rgb), 0.75);
    background: rgba(var(--accent-rgb), 0.24);
    box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.28);
}

/* Smartphone: il menu non deve uscire dallo schermo */
@media (max-width: 600px) {
    .dropdown-content--grande {
        width: min(320px, 92vw);
        max-height: 60vh;
    }
}

/* =========================================================
   86. BOTTONE "VAI AL SITO" + PROFILO PIU' COMPATTO
   ---------------------------------------------------------
   Il bottone sta tra il logo e il riquadro profilo. Per
   fargli posto senza allungare la sidebar, il riquadro
   profilo viene un po' rimpicciolito: meno imbottitura,
   avatar piu' piccolo, meno spazio tra gli elementi.
   ========================================================= */

.sidebar-site-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 38px;
    margin: 2px 0 0 0;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid rgba(var(--accent-rgb), 0.30);
    background: rgba(var(--accent-rgb), 0.10);
    color: var(--text);
    text-decoration: none;
    font-family: "Orbitron", sans-serif;
    font-size: 0.72rem;
    font-weight: bold;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: 0.2s ease;
}

.sidebar-site-link:hover {
    color: #ffffff;
    background: rgba(var(--accent-rgb), 0.22);
    border-color: rgba(var(--accent-soft-rgb), 0.65);
    box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.25);
}

.sidebar-site-link__icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
}

/* --- Profilo ridotto, per fare spazio al bottone sopra --- */
.sidebar-profile .topbar-player {
    padding: 10px 10px;
    gap: 6px;
}

.sidebar-profile .player-avatar {
    width: 42px;
    height: 42px;
}

.sidebar-profile .topbar-player-info .player-name {
    font-size: 0.84rem;
}

.sidebar-profile .topbar-player-info .player-rank {
    font-size: 0.66rem;
    margin-top: 2px;
}

/* La barra XP occupa meno spazio verticale */
.sidebar-profile .xp-row {
    font-size: 0.58rem;
    margin-bottom: 5px;
}

.sidebar-profile .xp-bar {
    height: 5px;
}

.sidebar-profile {
    margin-bottom: 0;
}
.sidebar-profile {
    margin-top: -16px;
    margin-bottom: 0;
}

/* =========================================================
   87. FILTRI / ORDINA / VISTE SEMPRE SULLA STESSA RIGA
   ---------------------------------------------------------
   Il contenitore .cmd-tris ha una specificita' piu' alta
   delle regole generiche dei dropdown (".dropdown-filter"
   da solo), quindi vince automaticamente su di esse a
   qualsiasi larghezza di schermo: non serve !important e non
   serve toccare le regole gia' esistenti, che continuano a
   valere invariate per tutti gli altri dropdown del sito
   (Memory, Quiz, Classifiche).
   ========================================================= */

.cmd-tris {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    /* Su schermo grande il contenitore si adatta al contenuto:
       non deve piu' costringere i bottoni a riempire tutto lo
       spazio orizzontale disponibile */
    width: auto;
}

.cmd-tris .dropdown-button {
    white-space: nowrap;
}

/* Solo sotto i 1024px (la stessa soglia gia' usata dal resto
   del sito per passare al layout mobile) i tre bottoni
   riempiono la riga e si dividono lo spazio: e' li' che serve,
   perche' lo spazio in orizzontale e' poco. */
@media (max-width: 1024px) {
    .cmd-tris {
        width: 100%;
    }

    .cmd-tris .dropdown-filter {
        flex: 1 1 0;
        min-width: 0;
    }

    .cmd-tris .dropdown-button {
        width: 100%;
        padding: 0 10px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* Su schermi molto stretti si riduce ulteriormente il testo,
   cosi' "Filtri (2)" o "Ordina: ID Crescente" restano leggibili
   senza spingere gli altri due bottoni fuori riga */
@media (max-width: 480px) {
    .cmd-tris .dropdown-button {
        font-size: 0.66rem;
        padding: 0 6px;
        letter-spacing: 0;
    }
}

@media (max-width: 360px) {
    .cmd-tris .dropdown-button {
        font-size: 0.6rem;
        padding: 0 4px;
    }
}

/* =========================================================
   IL SELETTORE DI COLLEZIONE (top bar)
   ---------------------------------------------------------
   Stessa logica del selettore della lingua che gli sta
   accanto: un pulsante, e una tendina in posizione assoluta
   che compare solo quando ha la classe "aperta".
   ========================================================= */

.collezione-switcher {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.collezione-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: none;
    border: none;
    padding: .2rem .4rem;
    cursor: pointer;
    border-radius: 8px;
    transition: background .15s ease;
}

.collezione-btn:hover {
    background: rgba(255, 255, 255, .07);
}

/* Il nome scritto, quando il logo non c'e' */
.top-bar-collezione {
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: .5px;
    color: var(--mh-testo, #e8ecf4);
}

.collezione-freccia {
    font-size: .7rem;
    opacity: .6;
    line-height: 1;
}

/* --- La tendina --- */
.collezione-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + .5rem);
    left: 0;
    min-width: 260px;
    max-height: 70vh;
    overflow-y: auto;
    padding: .4rem;
    border-radius: 12px;
    background: var(--mh-superficie, #161d2e);
    border: 1px solid rgba(255, 255, 255, .10);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
    z-index: 200;
}

.collezione-dropdown.aperta {
    display: block;
}

/* --- Un editore e le sue collezioni --- */
.collezione-gruppo + .collezione-gruppo {
    margin-top: .5rem;
    padding-top: .5rem;
    border-top: 1px solid rgba(255, 255, 255, .07);
}

.collezione-editore {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .3rem .6rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .55;
}

.collezione-editore img {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

/* --- Una collezione --- */
.collezione-voce {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    width: 100%;
    padding: .55rem .6rem;
    background: none;
    border: none;
    border-radius: 8px;
    color: inherit;
    font-size: .92rem;
    text-align: left;
    cursor: pointer;
    transition: background .15s ease;
}

.collezione-voce:hover:not(:disabled) {
    background: rgba(255, 255, 255, .08);
}

.collezione-voce.attiva {
    font-weight: 600;
    background: rgba(90, 150, 255, .14);
}

.collezione-voce.in-corso {
    opacity: .5;
    cursor: wait;
}

.collezione-spunta {
    font-size: .85rem;
    opacity: .8;
}

.collezione-vuoto,
.collezione-nota {
    padding: .6rem;
    font-size: .8rem;
    opacity: .6;
    text-align: center;
    line-height: 1.4;
}

/* --- Su schermo stretto --- */
@media (max-width: 640px) {
    .collezione-dropdown {
        position: fixed;
        left: .75rem;
        right: .75rem;
        min-width: 0;
        top: 60px;
    }
    .top-bar-collezione {
        font-size: .95rem;
    }
}

/* =========================================================
   CORREZIONE M5 — LA TENDINA SOPRA A TUTTO
   ---------------------------------------------------------
   Il problema non era la tendina troppo in basso, ma la barra
   in alto troppo in basso: finche' e' la top-bar a stare
   sotto la barra dei comandi, nessun numero messo sulla
   tendina puo' farla salire, perche' resta confinata dentro
   al contesto della top-bar.

   Si alza quindi la top-bar, e la tendina viene su con lei.
   ========================================================= */

/* La barra in alto sale sopra la barra dei comandi e la
   ricerca. Il position: relative serve perche' senza di
   quello lo z-index non ha effetto. */
.top-bar {
    position: relative;
    z-index: 500;
}

/* Il contenitore del selettore sale a sua volta, cosi' resta
   sopra il selettore della lingua che gli sta accanto. */
.collezione-switcher {
    position: relative;
    z-index: 510;
}

.collezione-dropdown {
    z-index: 1000;

    /* Sfondo PIENO. Prima prendeva --mh-superficie, che in
       questo tema e' semitrasparente: per questo si
       intravedeva la pagina sotto e le scritte si
       confondevano. Qui il colore e' scritto per esteso. */
    background: #141b2b;

    /* Il velo sfocato serve se qualcosa dovesse comunque
       restare dietro: al posto di una sovrapposizione
       leggibile a meta' si ottiene uno sfondo pulito. */
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);

    border: 1px solid rgba(120, 160, 255, .22);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .6);
}

/* --- Leggibilita' delle voci --- */
.collezione-editore {
    color: #8fa4c8;
    opacity: 1;            /* prima era .55: troppo pallido */
}

.collezione-voce {
    color: #e6ecf7;
}

.collezione-voce.attiva {
    background: rgba(90, 150, 255, .20);
    color: #ffffff;
}

.collezione-spunta {
    color: #7fb0ff;
    opacity: 1;
}

/* --- Su telefono --- */
@media (max-width: 640px) {
    .collezione-dropdown {
        position: fixed;
        top: 64px;
        left: .75rem;
        right: .75rem;
        z-index: 1000;
    }
}

.top-bar             { position: relative; z-index: 1500; }
.collezione-switcher { position: relative; z-index: 1510; }
.collezione-dropdown { z-index: 1600; }

/* =========================================================
   88. IL BENVENUTO (prime due domande)
   ---------------------------------------------------------
   Riusa il pannello del login: stesso bordo, stesso sfondo,
   stessa aria di famiglia. Qui si aggiunge solo cio' che
   serve alle due domande.
   ========================================================= */

.benvenuto-panel {
    width: 560px;
    max-width: 94vw;
    min-height: 0;
    text-align: left;
    max-height: 92vh;
    overflow-y: auto;
}

.benvenuto-panel h1,
.benvenuto-panel .login-subtitle,
.benvenuto-panel .login-logo {
    text-align: center;
}

.benvenuto-form {
    margin-top: 8px;
}

.benvenuto-sezione {
    margin-bottom: 4px;
}

.benvenuto-domanda {
    color: #ffffff;
    font-size: 0.92rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 8px;
    text-shadow: 0 0 12px rgba(var(--accent-rgb), 0.6);
}

.benvenuto-aiuto {
    color: var(--text-muted);
    font-size: 0.74rem;
    line-height: 1.6;
    margin-bottom: 16px;
}

.benvenuto-editore {
    color: var(--accent-soft);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 14px 0 8px 0;
}

.benvenuto-scelte {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Una casella da spuntare travestita da pulsante: piu'
   facile da colpire col dito di un quadratino da 13px */
.benvenuto-scelta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 16px;
    border-radius: 8px;
    border: 1px solid rgba(var(--accent-rgb), 0.28);
    background: rgba(var(--bg-rgb), 0.72);
    color: var(--text);
    font-size: 0.82rem;
    cursor: pointer;
    transition: 0.18s ease;
}

.benvenuto-scelta:hover {
    color: #ffffff;
    border-color: rgba(var(--accent-soft-rgb), 0.6);
    background: rgba(var(--bg-elevated-rgb), 0.85);
}

.benvenuto-scelta input {
    accent-color: var(--accent-color);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Spuntata: si vede a colpo d'occhio quali hai scelto */
.benvenuto-scelta:has(input:checked) {
    color: #ffffff;
    border-color: rgba(var(--accent-soft-rgb), 0.85);
    background: rgba(var(--accent-rgb), 0.22);
    box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.25);
}

.benvenuto-avanti {
    width: 100%;
    height: 48px;
    margin-top: 22px;
}

@media (max-width: 600px) {
    .benvenuto-panel {
        width: 94vw;
        padding: 22px 18px;
    }
    .benvenuto-scelta {
        flex: 1 1 100%;
    }
}

/* =========================================================
   89. DASHBOARD - MINI STAT: icona a sinistra, numero/parola a destra
   ---------------------------------------------------------
   ISTRUZIONI:
   - Incolla in FONDO a static/css/style.css (dopo la sezione 88).
   - Non cancellare nulla, non serve toccare HTML/JS: l'ordine
     degli elementi (icona, valore, etichetta) resta lo stesso,
     qui cambiamo solo come vengono disposti dentro il riquadro.
   ========================================================= */

.mh-mini-stat {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    justify-content: flex-start;
    column-gap: 14px;
    padding: 0 16px;
    text-align: left;
}

.mh-mini-icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 60px;
    height: 60px;
}

.mh-mini-icon img {
    width: 60px;
    height: 60px;
    object-fit: contain;
}

.mh-mini-value {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    line-height: 1.1;
}

.mh-mini-label {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    line-height: 1.2;
}

/* --- Tablet / schermi medio-stretti (griglia auto-fit) --- */
@media (max-width: 1350px) {
    .mh-mini-stat {
        column-gap: 10px;
        padding: 0 10px;
    }
    .mh-mini-icon,
    .mh-mini-icon img {
        width: 44px;
        height: 44px;
    }
    .mh-mini-value {
        font-size: 1.15rem;
    }
    .mh-mini-label {
        font-size: 0.6rem;
    }
}

/* --- Smartphone (2 colonne, riquadri piu' larghi) --- */
@media (max-width: 600px) {
    .mh-mini-stat {
        column-gap: 12px;
        padding: 0 14px;
    }
    .mh-mini-icon,
    .mh-mini-icon img {
        width: 52px;
        height: 52px;
    }
    .mh-mini-value {
        font-size: 1.3rem;
    }
    .mh-mini-label {
        font-size: 0.64rem;
    }
}

/* =========================================================
   IMPOSTAZIONI - social e note sui diritti
   ========================================================= */
.settings-social-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.settings-disclaimer p {
    margin: 0 0 8px;
    line-height: 1.6;
}
.settings-disclaimer a {
    color: inherit;
    text-decoration: underline;
}
@media (max-width: 600px) {
    .settings-social-row .overlay-action-btn { width: 100%; }
}