/* ═══════════════════════════════════════════════════
   OJPC — main.css
   ═══════════════════════════════════════════════════ */

/* ── Base ────────────────────────────────────────── */
:root {
    --ojpc-content-max-width: 1200px;

    /* Surface token — usato per sfondo card/pannelli al posto di --bs-body-bg.
       In light mode = bianco (identico a prima).
       In dark mode viene ridefinito a --ojpc-bg-card per creare contrasto. */
    --ojpc-surface: #ffffff;
}

body {
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.container-ojpc {
    max-width: var(--ojpc-content-max-width);
    margin: 0 auto;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

/* ── Bandiere ────────────────────────────────────── */
.flag-icon {
    width: 20px;
    height: 14px;
    object-fit: contain;
    vertical-align: text-bottom;
    display: inline-block;
    margin-right: 0.35rem;
    border-radius: 2px;
}
.flag-icon.flag-icon-lg {
    width: 28px;
    height: 20px;
}

/* ── Topbar (prima riga) ─────────────────────────── */
.ojpc-topbar {
    background: var(--bs-tertiary-bg);
    border-bottom: 1px solid var(--bs-border-color-translucent);
    padding: .5rem 0;
    font-size: .8rem;
}
.ojpc-topbar-link {
    color: var(--bs-secondary-color);
    text-decoration: none;
    transition: color .15s;
}
.ojpc-topbar-link:hover { color: var(--bs-primary); }

/* ── Campanella topbar ───────────────────────────── */
.ojpc-topbar-bell {
    position: relative;
    display: flex;
    align-items: center;
    color: var(--bs-secondary-color);
    text-decoration: none;
    transition: color .15s;
    transform-origin: top center;
}
.ojpc-topbar-bell:hover { color: var(--bs-primary); }

.ojpc-topbar-bell--active {
    color: #e53935;
    animation: ojpc-bell-swing 1.2s ease-in-out infinite;
}
.ojpc-topbar-bell--active:hover { color: #ff1744; }

.ojpc-topbar-bell-dot {
    position: absolute;
    top: -2px;
    right: -3px;
    width: 6px;
    height: 6px;
    background: #e53935;
    border-radius: 50%;
    border: 1px solid var(--bs-body-bg);
}

@keyframes ojpc-bell-swing {
    0%, 100% { transform: rotate(0deg); }
    15%       { transform: rotate(18deg); }
    30%       { transform: rotate(-14deg); }
    45%       { transform: rotate(10deg); }
    60%       { transform: rotate(-6deg); }
    75%       { transform: rotate(3deg); }
}

/* ── Selettore lingua ────────────────────────────── */
.ojpc-lang-switch {
    display: flex;
    align-items: center;
    gap: .2rem;
    font-size: .82rem;
    font-weight: 600;
}
.ojpc-lang-btn {
    color: var(--bs-nav-link-color);
    text-decoration: none;
    padding: .15rem .3rem;
    border-radius: .3rem;
    letter-spacing: .04em;
    transition: background .15s;
}
.ojpc-lang-btn:hover {
    background: rgba(127, 127, 127, .12);
    color: var(--bs-nav-link-hover-color);
}
.ojpc-lang-btn.active {
    color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), .1);
}
.ojpc-lang-sep {
    color: var(--bs-border-color);
    font-weight: 300;
}

/* ── Toggle dark mode ────────────────────────────── */
.ojpc-theme-toggle {
    background: none;
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    padding: .25rem .45rem;
    cursor: pointer;
    line-height: 1;
    transition: border-color .15s, background .15s;
}
.ojpc-theme-toggle:hover {
    background: rgba(127, 127, 127, .1);
    border-color: var(--bs-secondary-color);
}
.ojpc-theme-icon {
    font-size: .95rem;
    display: block;
}

/* ── Header pubblico sticky ──────────────────────── */
.ojpc-public-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    box-shadow: 0 1px 6px rgba(0,0,0,.08);
}

/* ── Navbar (seconda riga) ───────────────────────── */
.ojpc-navbar { background: var(--ojpc-surface); }

/* Logo: default light, swap su dark */
.ojpc-logo-dark  { display: none; }
.ojpc-logo-light { display: inline-block; }
[data-bs-theme="dark"] .ojpc-logo-dark  { display: inline-block; }
[data-bs-theme="dark"] .ojpc-logo-light { display: none; }

/* Voci navbar su due righe */
.ojpc-nav-twoline {
    line-height: 1.2;
    text-align: center;
}

/* Dropdown aperto su hover (solo desktop) */
@media (min-width: 992px) {
    .ojpc-navbar .dropdown:hover > .dropdown-menu { display: block; }
    .ojpc-navbar .dropdown > .dropdown-toggle:active { pointer-events: none; }
}

.ojpc-navbar .dropdown-toggle::after {
    display: none;
}

/* Hover voci nav principale */
.ojpc-navbar .nav-link {
    border-radius: .375rem;
    transition: background .15s ease;
}
.ojpc-navbar .nav-link:hover,
.ojpc-navbar .nav-link:focus-visible {
    background: rgba(var(--bs-emphasis-color-rgb), .07);
}

/* Hover voci dropdown */
.ojpc-navbar .dropdown-menu .dropdown-item {
    border-radius: .25rem;
    transition: background .12s ease;
}
.ojpc-navbar .dropdown-menu .dropdown-item:hover,
.ojpc-navbar .dropdown-menu .dropdown-item:focus {
    background: rgba(var(--bs-emphasis-color-rgb), .07);
    color: var(--bs-emphasis-color);
}

/* Logout navbar (desktop e mobile) — rosso tenue */
.ojpc-navbar-logout,
.ojpc-navbar-logout:visited { color: #c05252; }
.ojpc-navbar-logout:hover,
.ojpc-navbar-logout:focus-visible { color: #d06464; }

/* Link Dashboard — solo mobile, colorato in blu */
.ojpc-navbar-dashboard-mobile { color: var(--bs-primary) !important; }
.ojpc-navbar-dashboard-mobile:hover,
.ojpc-navbar-dashboard-mobile:focus-visible { color: var(--bs-primary) !important; opacity: .8; }

/* Navbar desktop: link centrati geometricamente con absolute center */
@media (min-width: 992px) {
    .ojpc-navbar .container { position: relative; }
    .ojpc-navbar .navbar-collapse {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: auto;
    }
    .ojpc-navbar .navbar-nav.me-auto { margin-right: 0 !important; gap: .5rem; }
}

/* ── Submenu utente ──────────────────────────────── */
.user-nav-item { position: relative; }
.user-nav-label { cursor: default; }

.user-submenu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 220px;
    background: var(--ojpc-surface);
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .12);
    padding: .5rem 0;
    z-index: 1000;
}
.user-submenu-link {
    display: block;
    padding: .5rem 1rem;
    color: inherit;
    text-decoration: none;
}
.user-submenu-link:hover { background: rgba(127, 127, 127, .08); }

@media (min-width: 992px) {
    .user-nav-item:hover .user-submenu { display: block; }
}
@media (max-width: 991.98px) {
    .user-submenu {
        display: block;
        position: static;
        min-width: auto;
        background: transparent;
        border: 0;
        box-shadow: none;
        padding: .25rem 0 0 1rem;
    }
    .user-submenu-link { padding: .4rem 0; }
}

/* ── Footer ──────────────────────────────────────── */
.ojpc-footer {
    background: var(--bs-tertiary-bg);
    border-top: 1px solid var(--bs-border-color);
}
.ojpc-footer-link {
    color: var(--bs-secondary-color);
    text-decoration: none;
    transition: color .15s;
}
.ojpc-footer-link:hover { color: var(--bs-primary); }

.ojpc-social-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--bs-secondary-color);
    text-decoration: none;
    font-size: .85rem;
    padding: .35rem .7rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    transition: color .15s, border-color .15s, background .15s;
}
.ojpc-social-btn:hover {
    color: var(--bs-primary);
    border-color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), .05);
}
.ojpc-social-btn--youtube:hover {
    color: #ff0000;
    border-color: #ff0000;
    background: rgba(255, 0, 0, .05);
}
.ojpc-social-btn--instagram:hover {
    color: #e8570a;
    border-color: #e8570a;
    background: rgba(232, 87, 10, .05);
}
.ojpc-social-btn--telegram:hover {
    color: #2aabee;
    border-color: #2aabee;
    background: rgba(42, 171, 238, .05);
}

.ojpc-footer-bottom {
    border-top: 1px solid var(--bs-border-color-translucent);
}
.ojpc-footer-legal {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
}
.ojpc-footer-legal-link {
    font-size: .8rem;
    color: var(--bs-secondary-color);
    text-decoration: none;
    white-space: nowrap;
    transition: color .15s;
}
.ojpc-footer-legal-link:hover {
    color: var(--bs-primary);
    text-decoration: underline;
}
.ojpc-footer-legal-sep {
    font-size: .75rem;
    color: var(--bs-border-color);
}
.ojpc-footer-legal-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

/* ── Cards campionati (stagionali e velocità) ────── */
.ojpc-season-card {
    position: relative;
    border-radius: 1rem !important;
    background: var(--ojpc-surface);
    border: 1px solid var(--bs-border-color) !important;
    transition: transform .2s, box-shadow .2s, border-color .2s;
    cursor: pointer;
    overflow: hidden;
}
.ojpc-season-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 1rem 2rem rgba(0,0,0,.15) !important;
    border-color: var(--bs-primary) !important;
}
.ojpc-season-card--active {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb), .25) !important;
}
.ojpc-season-year {
    font-size: 3rem;
    font-weight: 900;
    color: var(--bs-primary);
    line-height: 1;
}
.ojpc-season-name {
    font-size: .95rem;
    color: var(--bs-secondary-color);
    line-height: 1.4;
}
.ojpc-season-card-arrow {
    position: absolute;
    bottom: 1.2rem;
    right: 1.2rem;
    font-size: 1.5rem;
    color: var(--bs-secondary-color);
    transition: color .15s, transform .15s;
}
.ojpc-season-card:hover .ojpc-season-card-arrow {
    color: var(--bs-primary);
    transform: translateX(4px);
}

/* ── Badge "In corso" con pulse ──────────────────── */
.ojpc-badge-active {
    background: rgba(var(--bs-success-rgb), .15);
    color: var(--bs-success);
    border: 1px solid rgba(var(--bs-success-rgb), .3);
    border-radius: 2rem;
    padding: .25rem .75rem;
    font-size: .75rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}
.ojpc-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bs-success);
    display: inline-block;
    animation: ojpc-pulse 1.5s infinite;
}
@keyframes ojpc-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(var(--bs-success-rgb), .6); }
    70%  { box-shadow: 0 0 0 6px rgba(var(--bs-success-rgb), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--bs-success-rgb), 0); }
}

/* ── Tabella classifiche ─────────────────────────── */
.ojpc-ranking-table thead th {
    background: var(--bs-tertiary-bg);
    border-bottom: 2px solid var(--bs-border-color);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--bs-secondary-color);
    font-weight: 700;
    white-space: nowrap;
    padding: .75rem .6rem;
}
.ojpc-ranking-table tbody tr {
    border-bottom: 1px solid var(--bs-border-color-translucent);
    transition: background .1s;
}
.ojpc-ranking-table tbody tr:hover { background: rgba(127,127,127,.05); }
.ojpc-ranking-table tbody td { padding: .6rem .6rem; vertical-align: middle; }

/* Righe podio */
.ojpc-row-gold   { background: rgba(255, 215,   0, .08) !important; }
.ojpc-row-silver { background: rgba(192, 192, 192, .08) !important; }
.ojpc-row-bronze { background: rgba(205, 127,  50, .08) !important; }
.ojpc-row-gold:hover   { background: rgba(255, 215,   0, .14) !important; }
.ojpc-row-silver:hover { background: rgba(192, 192, 192, .14) !important; }
.ojpc-row-bronze:hover { background: rgba(205, 127,  50, .14) !important; }

/* Colonne fisse */
.ojpc-col-rank { width: 52px; }
.ojpc-col-pts  { width: 70px; }
.ojpc-col-tor  { width: 48px; font-size: .8rem; }

/* ── Classifica overall — anni espandibili ───────────────────────── */

/* Colonne dettaglio torneo: nascoste di default, mostrate via JS con display:table-cell */
.ojpc-year-expanded { display: none; }

/* Placeholder per anno collassato: visibile di default, nascosto quando espanso via JS */
.ojpc-year-placeholder {
    width: 6px !important;
    min-width: 6px;
    max-width: 6px;
    padding: 0 !important;
    background: var(--bs-border-color) !important;
    border: none !important;
    overflow: hidden;
}

/* Header anno cliccabile */
.ojpc-year-toggle {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: background .15s, color .15s;
    font-size: .72rem !important;
    padding: .35rem .55rem !important;
    letter-spacing: .03em;
}
.ojpc-year-toggle:hover {
    background: var(--bs-primary-bg-subtle) !important;
    color: var(--bs-primary) !important;
}
.ojpc-year-toggle[data-expanded="1"] {
    background: var(--bs-primary-bg-subtle) !important;
    color: var(--bs-primary) !important;
    border-bottom: 2px solid var(--bs-primary) !important;
}
.ojpc-year-arrow {
    font-size: .6rem;
    margin-right: .25rem;
    opacity: .75;
}

/* Colonne sticky (rank + flag + nome) */
.ojpc-overall-table .ojpc-sticky-1,
.ojpc-overall-table .ojpc-sticky-2,
.ojpc-overall-table .ojpc-sticky-3 {
    position: sticky;
    z-index: 2;
    background: var(--bs-body-bg);
}
.ojpc-overall-table .ojpc-sticky-1 { left: 0; }
.ojpc-overall-table .ojpc-sticky-2 { left: 52px; }
.ojpc-overall-table .ojpc-sticky-3 {
    left: 80px;
    border-right: 2px solid var(--bs-border-color);
}
.ojpc-row-gold   .ojpc-sticky-1,
.ojpc-row-gold   .ojpc-sticky-2,
.ojpc-row-gold   .ojpc-sticky-3 { background: rgb(255 215 0 / 10%); }
.ojpc-row-silver .ojpc-sticky-1,
.ojpc-row-silver .ojpc-sticky-2,
.ojpc-row-silver .ojpc-sticky-3 { background: rgb(192 192 192 / 10%); }
.ojpc-row-bronze .ojpc-sticky-1,
.ojpc-row-bronze .ojpc-sticky-2,
.ojpc-row-bronze .ojpc-sticky-3 { background: rgb(205 127 50 / 10%); }

/* Badge punti */
.ojpc-points {
    font-weight: 800;
    font-size: 1rem;
    color: var(--bs-primary);
}

/* ── Header pagina classifica ────────────────────── */
.ojpc-ranking-header {
    border-left: 4px solid var(--bs-primary);
    padding-left: 1.25rem;
}
.ojpc-ranking-year {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--bs-secondary-color);
    margin-bottom: .25rem;
}
.ojpc-ranking-count {
    text-align: center;
    background: var(--bs-tertiary-bg);
    border-radius: .75rem;
    padding: .75rem 1.25rem;
    min-width: 90px;
}
.ojpc-count-number {
    display: block;
    font-size: 2rem;
    font-weight: 900;
    color: var(--bs-primary);
    line-height: 1;
}
.ojpc-count-label {
    display: block;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--bs-secondary-color);
    margin-top: .2rem;
}

/* ── Cards mobile classifica ─────────────────────── */
.ojpc-mobile-list { display: flex; flex-direction: column; gap: .4rem; }

.ojpc-mob-card {
    position: relative;
    background: var(--ojpc-surface);
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    overflow: hidden;
    cursor: pointer;
    transition: border-color .15s;
}
.ojpc-mob-card:hover { border-color: var(--bs-primary); }
.ojpc-mob-gold   { border-left: 3px solid gold !important; }
.ojpc-mob-silver { border-left: 3px solid silver !important; }
.ojpc-mob-bronze { border-left: 3px solid #cd7f32 !important; }

.ojpc-mob-main {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .75rem 1rem;
}
.ojpc-mob-rank {
    font-size: 1.1rem;
    font-weight: 900;
    min-width: 2rem;
    text-align: center;
    color: var(--bs-primary);
}
.ojpc-mob-flag  { flex-shrink: 0; }
.ojpc-mob-name  { flex: 1; font-weight: 600; font-size: .9rem; }
.ojpc-mob-pts   { display: flex; flex-direction: column; align-items: flex-end; gap: .1rem; }

/* Participant name links in rankings */
a.ojpc-participant-link { color: inherit; text-decoration: none; }
a.ojpc-participant-link:hover { color: #00e676; }
.ojpc-mob-chevron {
    color: var(--bs-secondary-color);
    font-size: 1.2rem;
    transition: transform .15s;
    margin-left: .25rem;
}
.ojpc-mob-card[aria-expanded="true"] .ojpc-mob-chevron { transform: rotate(90deg); }

.ojpc-mob-detail {
    padding: .75rem 1rem 1rem;
    border-top: 1px solid var(--bs-border-color-translucent);
    background: var(--bs-tertiary-bg);
}
.ojpc-detail-label {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--bs-secondary-color);
    margin-bottom: .15rem;
}
.ojpc-detail-value {
    font-weight: 700;
    font-size: .95rem;
}

/* ── Wrapper pagine lista campionati ─────────────── */
.ojpc-speed-list    { max-width: 1200px; margin: 0 auto; }
.ojpc-seasonal-list { max-width: 1100px; margin: 0 auto; }

/* ── Wrapper pagina classifica stagionale ─────────── */
.ojpc-ranking-page  { max-width: 1000px; margin: 0 auto; }

/* ── Colonne tabella stagionale ──────────────────── */
.ojpc-col-puz  { width: 80px; }
.ojpc-col-date { width: 120px; white-space: nowrap; }

/* ── Elementi riga classifica ────────────────────── */
.ojpc-medal    { font-size: 1.4rem; line-height: 1; }
.ojpc-rank-num { font-size: .95rem; font-weight: 700; color: var(--bs-secondary-color); }
.ojpc-nat-code { font-size: .75rem; color: var(--bs-secondary-color); margin-left: .15rem; }

/* ── Entry stagionale ────────────────────────────── */
.ojpc-entry-name { font-weight: 600; font-size: .95rem; line-height: 1.3; }
.ojpc-pair-sep   { color: var(--bs-secondary-color); font-weight: 400; }
.ojpc-entry-type-badge {
    display: inline-block;
    font-size: .7rem;
    margin-top: .2rem;
    background: var(--bs-info-bg-subtle);
    color: var(--bs-info-text-emphasis);
    padding: .1em .5em;
    border-radius: .3em;
}

/* ── Label punti mobile ──────────────────────────── */
.ojpc-pts-label { font-size: .65rem; color: var(--bs-secondary-color); }

/* ── Pagina anno velocità ────────────────────────── */
.ojpc-speed-year  { max-width: 1200px; margin: 0 auto; }

.ojpc-tour-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: .5rem .9rem;
    min-width: 90px;
}
.ojpc-tour-num {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--bs-primary);
    line-height: 1;
}
.ojpc-tour-name {
    font-size: .7rem;
    color: var(--bs-secondary-color);
    line-height: 1.2;
    text-align: center;
    max-width: 100px;
    white-space: normal;
}

/* ── Pagina singolo torneo ───────────────────────── */
.ojpc-tournament { max-width: 900px; margin: 0 auto; }

.ojpc-puzzle-card { border-left: 4px solid var(--bs-primary) !important; }
.ojpc-puzzle-thumb {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: .5rem;
    border: 1px solid var(--bs-border-color);
    transition: transform .2s;
}
.ojpc-puzzle-thumb-link:hover .ojpc-puzzle-thumb { transform: scale(1.05); }

/* ── Landscape mobile (classifica annuale) ───────── */
@media (max-width: 767.98px) and (orientation: landscape) {
    .ojpc-mobile-list         { display: none !important; }
    .ojpc-landscape-table     { display: block !important; }
}

/* ── Colonne speciali classifica ─────────────────── */
.ojpc-ranking-table .ojpc-col-gold   { background: rgba(255, 215,   0, .06); }
.ojpc-ranking-table .ojpc-col-silver { background: rgba(192, 192, 192, .06); }
.ojpc-ranking-table .ojpc-col-bronze { background: rgba(205, 127,  50, .06); }
.ojpc-ranking-table .ojpc-col-pres   { background: rgba(var(--bs-primary-rgb), .05); }
.ojpc-col-flag { width: 28px; padding-right: 0 !important; }

/* ── Lightbox puzzle ─────────────────────────────── */
.ojpc-puzzle-zoom {
    cursor: zoom-in;
}
.ojpc-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ojpc-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.85);
    cursor: zoom-out;
}
.ojpc-lightbox-img {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    border-radius: .75rem;
    box-shadow: 0 2rem 4rem rgba(0,0,0,.5);
    cursor: zoom-out;
    z-index: 1;
}

/* ── Sala dei Record ─────────────────────────────── */
.ojpc-records { max-width: 1200px; margin: 0 auto; }

.ojpc-records-icon {
    font-size: 3rem;
    line-height: 1;
    margin-bottom: .5rem;
}

.ojpc-records-section {
    background: var(--ojpc-surface);
    border: 1px solid var(--bs-border-color);
    border-radius: 1rem;
    padding: 1.75rem;
}

.ojpc-records-section-title {
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -.01em;
    margin-bottom: 1.25rem;
}

/* Sub-label sezioni record (singola edizione / carriera) */
.ojpc-records-sub-label {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

/* Albo d'oro card */
.ojpc-hof-card { border-radius: 1rem !important; }

.ojpc-hof-year {
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--bs-primary);
    line-height: 1;
}

.ojpc-hof-puzzle-thumb {
    width: 64px !important;
    height: 64px !important;
    object-fit: cover;
    border-radius: .5rem;
    border: 1px solid var(--bs-border-color);
    cursor: zoom-in;
    transition: transform .2s;
}
.ojpc-hof-puzzle-thumb:hover { transform: scale(1.08); }

.ojpc-hof-puzzle-info {
    font-size: .85rem;
    padding: .4rem .75rem;
    background: var(--bs-tertiary-bg);
    border-radius: .5rem;
}

.ojpc-hof-podium { display: flex; flex-direction: column; gap: .4rem; }

.ojpc-hof-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    border-radius: .5rem;
    font-size: .9rem;
}
.ojpc-hof-gold   { background: rgba(255, 215,   0, .1); }
.ojpc-hof-silver { background: rgba(192, 192, 192, .1); }
.ojpc-hof-bronze { background: rgba(205, 127,  50, .1); }

.ojpc-hof-medal { font-size: 1.1rem; min-width: 1.5rem; }
.ojpc-hof-flag  { flex-shrink: 0; }
.ojpc-hof-name  { flex: 1; }
.ojpc-hof-pts   { white-space: nowrap; }

/* Valori record evidenziati */
.ojpc-record-value {
    font-weight: 900;
    color: var(--bs-warning);
    font-size: 1rem;
}

/* ── Classifica overall ──────────────────────────── */
.ojpc-thead-years th {
    background: var(--bs-tertiary-bg);
    font-size: .75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--bs-primary);
    padding: .4rem .6rem;
    border-bottom: 0;
}
.ojpc-col-year-group {
    border-left: 2px solid var(--bs-border-color) !important;
    border-right: 2px solid var(--bs-border-color) !important;
}

/* ══════════════════════════════════════════════════
   ADMIN LAYOUT — sidebar + topbar
   ══════════════════════════════════════════════════ */

:root {
    --ojpc-sidebar-w:           240px;
    --ojpc-sidebar-bg:          #1a2035;
    --ojpc-sidebar-border:      rgba(255,255,255,.07);
    --ojpc-sidebar-text:        #8892a4;
    --ojpc-sidebar-text-hover:  #e2e8f0;
    --ojpc-sidebar-active-bg:   rgba(99,179,237,.12);
    --ojpc-sidebar-active-text: #63b3ed;
    --ojpc-admin-topbar-h:      56px;
}

/* ── Body ──────────────────────────────────────── */
.ojpc-admin-body {
    display: flex;
    min-height: 100vh;
    background: var(--ojpc-surface);
}

/* ── Sidebar ───────────────────────────────────── */
.ojpc-admin-sidebar {
    width: var(--ojpc-sidebar-w);
    background: var(--ojpc-sidebar-bg);
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 1040;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    transition: transform .25s ease;
    border-right: 1px solid var(--ojpc-sidebar-border);
}

/* ── Brand ─────────────────────────────────────── */
.ojpc-admin-brand-wrap {
    padding: 1.25rem 1.1rem .9rem;
    border-bottom: 1px solid var(--ojpc-sidebar-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    flex-shrink: 0;
}
.ojpc-admin-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
.ojpc-admin-brand-label {
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ojpc-sidebar-active-text);
    opacity: .75;
}
.ojpc-admin-theme-btn {
    background: rgba(255,255,255,.06);
    border: 1px solid var(--ojpc-sidebar-border);
    color: var(--ojpc-sidebar-text);
    border-radius: .5rem;
    padding: .3rem .75rem;
    font-size: .8rem;
    cursor: pointer;
    transition: background .15s, color .15s;
    width: 100%;
    text-align: center;
}
.ojpc-admin-theme-btn:hover {
    background: rgba(255,255,255,.1);
    color: var(--ojpc-sidebar-text-hover);
}

/* ── Nav ───────────────────────────────────────── */
.ojpc-admin-nav {
    padding: 1rem .6rem;
    display: flex;
    flex-direction: column;
    gap: .1rem;
    flex: 1;
}
.ojpc-admin-nav-label {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ojpc-sidebar-text);
    padding: .5rem .65rem .25rem;
    opacity: .55;
}
.ojpc-admin-nav-link {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: var(--ojpc-sidebar-text);
    text-decoration: none;
    border-radius: .5rem;
    font-size: .875rem;
    font-weight: 500;
    transition: background .15s, color .15s;
    white-space: nowrap;
}
.ojpc-admin-nav-link:hover {
    background: rgba(255,255,255,.06);
    color: var(--ojpc-sidebar-text-hover);
}
.ojpc-admin-nav-link--active {
    background: var(--ojpc-sidebar-active-bg);
    color: var(--ojpc-sidebar-active-text);
    font-weight: 600;
}
.ojpc-admin-nav-icon {
    width: 20px;
    text-align: center;
    flex-shrink: 0;
    font-size: .95rem;
    opacity: .85;
}
/* ── Sidebar nav — gruppo link + pulsante + ──────── */
.ojpc-admin-nav-link-group {
    display: flex;
    align-items: stretch;
    border-radius: .4rem;
    overflow: hidden;
}
.ojpc-admin-nav-link-group .ojpc-admin-nav-link--flex {
    flex: 1;
    border-radius: 0;
}
.ojpc-admin-nav-link-group.ojpc-admin-nav-link--active .ojpc-admin-nav-link--flex {
    background: var(--ojpc-sidebar-active-bg);
    color: var(--ojpc-sidebar-active-text);
    font-weight: 600;
}
.ojpc-admin-nav-create-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    flex-shrink: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ojpc-sidebar-text);
    text-decoration: none;
    opacity: .5;
    transition: opacity .15s, background .15s;
}
.ojpc-admin-nav-create-btn:hover {
    opacity: 1;
    background: rgba(255,255,255,.1);
    color: #fff;
}


/* ── Sidebar footer ────────────────────────────── */
.ojpc-admin-sidebar-footer {
    padding: .6rem;
    border-top: 1px solid var(--ojpc-sidebar-border);
    display: flex;
    flex-direction: column;
    gap: .1rem;
    flex-shrink: 0;
}
.ojpc-admin-footer-link {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .45rem .75rem;
    color: var(--ojpc-sidebar-text);
    text-decoration: none;
    border-radius: .5rem;
    font-size: .82rem;
    transition: background .15s, color .15s;
}
.ojpc-admin-footer-link:hover {
    background: rgba(255,255,255,.06);
    color: var(--ojpc-sidebar-text-hover);
}
.ojpc-admin-footer-link--logout:hover { color: #d06464; }
.ojpc-admin-footer-user {
    padding: .45rem .75rem .2rem;
    color: var(--ojpc-sidebar-text);
    font-size: .78rem;
    opacity: .6;
    display: flex;
    align-items: center;
    gap: .45rem;
}

/* ── Main area ─────────────────────────────────── */
.ojpc-admin-main {
    margin-left: var(--ojpc-sidebar-w);
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-width: 0;
}

/* ── Hamburger mobile (fuori dalla topbar) ─────── */
.ojpc-admin-hamburger {
    position: fixed;
    top: .85rem;
    left: .85rem;
    z-index: 1050;
    background: var(--ojpc-surface);
    border: 1px solid var(--bs-border-color);
    border-radius: .4rem;
    padding: .3rem .4rem;
    color: var(--bs-body-color);
    cursor: pointer;
    line-height: 1;
    display: flex;
    align-items: center;
    box-shadow: 0 1px 4px rgba(0,0,0,.12);
    transition: background .15s;
}
.ojpc-admin-hamburger:hover { background: var(--bs-tertiary-bg); }

/* ── Content ───────────────────────────────────── */
.ojpc-admin-content {
    padding: 1.75rem;
    flex: 1;
}

/* ── Overlay mobile ────────────────────────────── */
.ojpc-admin-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 1039;
    cursor: pointer;
}

/* ── Dashboard stats cards ─────────────────────── */
#statsTabs {
    background-color: #181b1e;
}

.ojpc-stat-card {
    background: var(--ojpc-surface);
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.ojpc-stat-card--gold {
    background: rgba(212, 175, 55, .08);
    border-color: rgba(212, 175, 55, .35);
}
[data-bs-theme="dark"] .ojpc-stat-card--gold {
    background: rgba(212, 175, 55, .12);
    border-color: rgba(212, 175, 55, .4);
}
@media (min-width: 992px) {
    .ojpc-stat-row > .col { flex: 1 0 0%; max-width: none; }
}
.ojpc-stat-icon {
    width: 48px; height: 48px;
    border-radius: .65rem;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}
.ojpc-stat-value {
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--bs-body-color);
    line-height: 1;
}
.ojpc-stat-label {
    font-size: .78rem;
    color: var(--bs-secondary-color);
    margin-top: .2rem;
}

/* ── Stat icon color variants ──────────────────── */
.ojpc-stat-icon--blue  { background: rgba(99,179,237,.12); }
.ojpc-stat-icon--green { background: rgba(154,230,180,.12); }
.ojpc-stat-icon--gold  { background: rgba(251,211,141,.12); }
.ojpc-stat-icon--gray  { background: rgba(160,174,192,.12); }

/* ── Dashboard section cards ───────────────────── */
.ojpc-admin-section-card {
    background: var(--ojpc-surface);
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    padding: 1.25rem;
    text-decoration: none;
    color: inherit;
    display: block;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.ojpc-admin-section-card:hover {
    border-color: var(--bs-primary);
    box-shadow: 0 4px 16px rgba(0,0,0,.08);
    transform: translateY(-2px);
    color: inherit;
}
.ojpc-admin-section-icon {
    font-size: 1.75rem;
    margin-bottom: .5rem;
    line-height: 1;
}
.ojpc-admin-section-title {
    font-size: .95rem;
    font-weight: 700;
    margin-bottom: .2rem;
}
.ojpc-admin-section-desc {
    font-size: .78rem;
    color: var(--bs-secondary-color);
    line-height: 1.4;
}

/* ── Mobile ────────────────────────────────────── */
@media (max-width: 991.98px) {
    .ojpc-admin-sidebar {
        transform: translateX(calc(-1 * var(--ojpc-sidebar-w)));
    }
    .ojpc-admin-sidebar.is-open {
        transform: translateX(0);
    }
    .ojpc-admin-main {
        margin-left: 0;
    }
    .ojpc-admin-content {
        padding: 3.5rem 1rem 1rem; /* spazio per l'hamburger fisso */
    }
}

/* ── Card iscrizioni utente ─────────────────────── */
.ojpc-reg-card {
    background-color: var(--bs-secondary-bg) !important;
    border: 1px solid var(--bs-border-color) !important;
    border-top: 3px solid rgba(var(--bs-primary-rgb), .35) !important;
}

/* ── Box turno iscrizione utente ────────────────── */
.ojpc-round-box {
    background: var(--bs-tertiary-bg);
    border-radius: .5rem;
    padding: .75rem 1rem;
    border-left: 3px solid var(--bs-primary);
}

/* ── Timeline iscrizione utente ─────────────────── */
.ojpc-reg-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.ojpc-reg-step {
    display: flex;
    gap: .75rem;
    padding-bottom: 1rem;
    position: relative;
}
.ojpc-reg-step:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 9px;
    top: 20px;
    bottom: 0;
    width: 2px;
    background: var(--bs-border-color);
}
.ojpc-reg-step--done:not(:last-child)::before {
    background: var(--bs-success);
}
.ojpc-reg-step-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--bs-border-color);
    background: var(--ojpc-surface);
    flex-shrink: 0;
    margin-top: 2px;
}
.ojpc-reg-step--done .ojpc-reg-step-dot {
    border-color: var(--bs-success);
    background: var(--bs-success);
}
.ojpc-reg-step-body { flex: 1; }
.ojpc-reg-step-label { font-weight: 600; font-size: .9rem; }
.ojpc-reg-step-date  { font-size: .8rem; color: var(--bs-secondary-color); }

/* ── Purchase groups — mappa mondo ── */
.ojpc-pg-map-card { background: #fff !important; }
.jvm-container { background: #fff !important; }
.jvm-tooltip {
    background: var(--bs-dark) !important;
    color: #fff !important;
    font-size: .75rem !important;
    border-radius: .35rem !important;
    padding: .25rem .55rem !important;
}

/* ── Griglia nazioni (pagina impostazioni preset) ── */
.ojpc-country-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: .15rem .5rem;
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid var(--bs-border-color);
    border-radius: .375rem;
    padding: .6rem .8rem;
    background: var(--ojpc-surface);
    scrollbar-width: thin;
}
.ojpc-country-check {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .8rem;
    cursor: pointer;
    padding: .15rem .2rem;
    border-radius: .25rem;
    transition: background .1s;
}
.ojpc-country-check:hover { background: var(--bs-tertiary-bg); }
.ojpc-country-check input[type="checkbox"] { flex-shrink: 0; cursor: pointer; }
.ojpc-country-check span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ojpc-country-check:has(input:checked) {
    background: rgba(var(--bs-primary-rgb), .08);
    font-weight: 500;
}

/* ── btn-xs (bottoni molto piccoli nelle tabelle) ── */
.btn-xs {
    padding: .15rem .4rem;
    font-size: .75rem;
    line-height: 1.4;
    border-radius: .25rem;
}

/* ── Card header neutro (si adatta a light/dark) ── */
.ojpc-card-header-subtle {
    background: var(--bs-tertiary-bg);
    border-bottom: 1px solid var(--bs-border-color);
    padding: .75rem 1.25rem;
}

/* ── Tabella risultati scrollabile — 5 righe visibili ── */
.ojpc-results-scroll {
    /* header ~37px + 5 righe × 33px = 202px */
    max-height: 202px;
    overflow-y: auto;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--bs-border-color) transparent;
}
.ojpc-results-scroll::-webkit-scrollbar { width: 4px; height: 4px; }
.ojpc-results-scroll::-webkit-scrollbar-thumb { background: var(--bs-border-color); border-radius: 2px; }

/* ── thead sticky dentro il contenitore scrollabile ── */
.ojpc-thead-sticky th {
    position: sticky;
    top: 0;
    background: var(--bs-tertiary-bg);
    border-bottom: 2px solid var(--bs-border-color);
    z-index: 1;
}

/* ── Card eventi aperti (dashboard utente) ── */
/* ── Profile strip (dashboard nationality + residence card) ── */
.ojpc-profile-strip {
    border-left: 3px solid var(--bs-primary) !important;
}
.ojpc-profile-strip-body {
    padding: .85rem 1.25rem;
}
.ojpc-profile-strip-row {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}
.ojpc-profile-strip-sep {
    width: 1px;
    height: 2rem;
    background: var(--bs-border-color);
    flex-shrink: 0;
}
.ojpc-profile-strip-nat,
.ojpc-profile-strip-res {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    min-width: 0;
}
.ojpc-profile-strip-label {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--bs-secondary-color);
}
.ojpc-profile-strip-value {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-weight: 600;
    font-size: .95rem;
    min-width: 0;
}
.ojpc-profile-strip-value span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ojpc-profile-strip-flag {
    width: 1.25rem;
    height: auto;
    border-radius: 2px;
    flex-shrink: 0;
}
.ojpc-profile-strip-form {
    flex: 1;
    min-width: 0;
}
.ojpc-profile-strip-select {
    flex: 1;
    min-width: 0;
    max-width: 240px;
    font-size: .875rem;
}
.ojpc-profile-strip-btn {
    white-space: nowrap;
    flex-shrink: 0;
}
.ojpc-profile-strip-hint {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    margin-top: .65rem;
    padding-top: .65rem;
    border-top: 1px solid var(--bs-border-color);
    font-size: .8rem;
    color: var(--bs-secondary-color);
    line-height: 1.45;
}
.ojpc-profile-strip-hint svg {
    width: .95rem;
    height: .95rem;
    flex-shrink: 0;
    margin-top: .1rem;
    color: var(--bs-primary);
    opacity: .8;
}

/* Mobile: nazionalità e residenza su righe separate */
@media (max-width: 575.98px) {
    .ojpc-profile-strip-body {
        padding: .75rem 1rem;
    }
    .ojpc-profile-strip-row {
        flex-direction: column;
        align-items: stretch;
        gap: .75rem;
    }
    .ojpc-profile-strip-sep {
        display: none;
    }
    .ojpc-profile-strip-nat,
    .ojpc-profile-strip-res,
    .ojpc-profile-strip-form {
        width: 100%;
        min-width: 0;
    }
    /* [bandiera] [select——————] [Salva] su una riga, select si restringe */
    .ojpc-profile-strip-res .ojpc-profile-strip-value {
        flex-wrap: nowrap;
    }
    .ojpc-profile-strip-select {
        flex: 1;
        min-width: 0;
        max-width: none;
    }
}
.ojpc-open-events-card {
    border: 1px solid rgba(var(--bs-success-rgb), .25) !important;
}
.ojpc-open-events-card-header {
    background: linear-gradient(90deg, rgba(var(--bs-success-rgb),.15), rgba(var(--bs-success-rgb),.04));
    border-bottom: 1px solid rgba(var(--bs-success-rgb), .18);
    color: var(--bs-success);
    letter-spacing: .04em;
}
.ojpc-live-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bs-success);
    box-shadow: 0 0 0 0 rgba(var(--bs-success-rgb), .5);
    animation: ojpc-pulse 1.8s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes ojpc-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(var(--bs-success-rgb), .5); }
    70%  { box-shadow: 0 0 0 8px rgba(var(--bs-success-rgb), 0); }
    100% { box-shadow: 0 0 0 0   rgba(var(--bs-success-rgb), 0); }
}
.ojpc-open-events-icon-wrap {
    font-size: 2.5rem;
    line-height: 1;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--bs-success-rgb), .1);
    border-radius: .75rem;
}
.ojpc-open-events-btn {
    background: rgba(var(--bs-success-rgb), .1);
    border: 1px solid rgba(var(--bs-success-rgb), .3);
    color: var(--bs-success);
    font-weight: 600;
    font-size: .875rem;
    padding: .4rem .9rem;
    border-radius: .5rem;
    transition: background .15s, border-color .15s, color .15s, transform .1s;
}
.ojpc-open-events-btn:hover {
    background: var(--bs-success);
    border-color: var(--bs-success);
    color: #fff;
    transform: translateY(-1px);
}
.ojpc-event-badge {
    display: inline-block;
    background: var(--bs-success);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    padding: .1em .45em;
    border-radius: .3rem;
    vertical-align: middle;
    margin-right: .15rem;
}

/* ── Card evento iscrizioni ──────────────────── */
.ojpc-event-card {
    border-radius: .75rem !important;
    transition: box-shadow .2s;
}
.ojpc-event-card:hover {
    box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.12) !important;
}
.ojpc-event-card-head {
    padding: 1.25rem 1.5rem .9rem;
}
.ojpc-event-title {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.3;
    margin: 0;
}
.ojpc-event-champ {
    font-size: .78rem;
    color: var(--bs-secondary-color);
    font-weight: 500;
}
.ojpc-event-bar {
    padding: 0 1.5rem .9rem;
    flex-shrink: 0;
}
.ojpc-event-bar-track {
    height: 22px;
    background: var(--bs-border-color);
    border-radius: 999px;
    overflow: hidden;
}
.ojpc-event-bar-fill {
    height: 100%;
    transition: width .6s ease;
    border-radius: 999px;
    background-color: var(--bar-color, hsl(120,72%,45%));
    background-image: linear-gradient(
        to bottom,
        rgba(255,255,255,.45) 0%,
        rgba(255,255,255,0)   55%,
        rgba(0,0,0,.06)       100%
    );
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.ojpc-bar-label {
    font-size: .68rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0,0,0,.35);
    letter-spacing: .02em;
    line-height: 1;
}
.ojpc-event-body {
    padding: 1rem 1.5rem 1.25rem;
}
.ojpc-event-meta {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
}
.ojpc-event-meta-icon {
    font-size: 1rem;
    line-height: 1.4;
    flex-shrink: 0;
    width: 1.25rem;
    text-align: center;
}
.ojpc-event-meta-label {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--bs-secondary-color);
    line-height: 1;
    margin-bottom: .15rem;
}
.ojpc-event-meta-value {
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--bs-body-color);
}
.ojpc-event-occupancy-label {
    font-size: .72rem;
    color: var(--bs-secondary-color);
}
.ojpc-event-action {
    padding: .85rem 1.5rem 1.25rem;
    border-top: 1px solid var(--bs-border-color-translucent);
}

/* Regole brevi visibili nella card iscrizione */
.ojpc-event-rules {
    margin-top: .85rem;
    padding: .65rem .85rem;
    background: var(--ojpc-bg-subtle, rgba(13,110,253,.05));
    border-left: 3px solid var(--bs-primary);
    border-radius: 0 .375rem .375rem 0;
    font-size: .82rem;
    color: var(--bs-secondary-color);
    line-height: 1.55;
    text-align: left;
}
[data-bs-theme="dark"] .ojpc-event-rules {
    background: rgba(99,160,255,.07);
}

/* Descrizione torneo + link regolamento — open events e my registrations */
.ojpc-event-desc,
.ojpc-reg-desc {
    padding: .65rem 1.5rem .9rem;
    border-top: 1px solid var(--bs-border-color-translucent);
    font-size: .85rem;
    color: var(--bs-secondary-color);
}
.ojpc-event-desc p,
.ojpc-reg-desc p {
    line-height: 1.5;
    margin-bottom: .35rem;
}
/* Descrizione nella pagina pubblica torneo */
.ojpc-tournament-desc {
    font-size: .95rem;
    color: var(--bs-secondary-color);
    line-height: 1.6;
}
.ojpc-tournament-desc p {
    margin-bottom: .4rem;
}
/* Link regolamento condiviso */
.ojpc-reg-link {
    font-size: .82rem;
    font-weight: 600;
    color: var(--bs-primary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}
.ojpc-reg-link::after {
    content: '→';
}
.ojpc-reg-link:hover {
    text-decoration: underline;
}

/* ── Dashboard — mini card evento aperto ── */
.ojpc-dash-event-card {
    display: block;
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--bs-border-color);
    border-radius: .6rem;
    padding: .75rem 1rem .65rem;
    transition: box-shadow .15s, border-color .15s;
    min-width: 170px;
    flex: 1 1 170px;
    max-width: 280px;
}
.ojpc-dash-event-card:hover {
    box-shadow: 0 .25rem .75rem rgba(0,0,0,.1);
    border-color: var(--bs-primary);
    color: inherit;
}
.ojpc-dash-event-name {
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: .5rem;
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
}
.ojpc-dash-event-bar-wrap {
    height: 12px;
    border-radius: 999px;
    background: var(--bs-border-color);
    overflow: hidden;
    margin-bottom: .3rem;
}
.ojpc-dash-event-spots {
    font-size: .68rem;
    color: var(--bs-secondary-color);
    line-height: 1;
}

/* ── Pagina eventi — box notifiche ── */
.ojpc-no-events-icon {
    font-size: 3rem;
    line-height: 1;
}
.ojpc-notify-box {
    max-width: 420px;
    background: var(--ojpc-surface);
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    padding: 1.5rem;
    text-align: left;
}
.ojpc-notify-banner {
    border-top: 2px solid rgba(var(--bs-primary-rgb),.15) !important;
}
.ojpc-wa-input { width: 180px; }
@media (max-width: 575px) { .ojpc-wa-input { width: 100%; } }

/* ── Email template editor ───────────────────── */
.ojpc-email-body {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: .85rem;
    line-height: 1.6;
    resize: vertical;
}

/* ── Regulation HTML editor ──────────────────── */
.ojpc-regulation-textarea {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: .82rem;
    line-height: 1.65;
    resize: vertical;
    min-height: 260px;
}

/* ── Pagina LIVE torneo ───────────────────────── */
.ojpc-live-card { overflow: hidden; }
.ojpc-live-header {
    background: var(--bs-secondary-bg);
    border-bottom: 2px solid rgba(var(--bs-primary-rgb), .2);
    padding: .9rem 1rem;
}

/* Tab nav */
.ojpc-live-tabs {
    border-bottom: none;
}
.ojpc-live-tabs .nav-link {
    position: relative;
    padding-right: 1.5rem;
    font-weight: 600;
    border-bottom: 3px solid transparent;
    transition: background .15s, border-color .15s;
}

/* Colori per indice turno (non-active) */
.ojpc-live-tabs .nav-link[data-tab-index="0"]:not(.active) { background: hsl(213,70%,92%); border-color: hsl(213,60%,72%); color: hsl(213,60%,30%); }
.ojpc-live-tabs .nav-link[data-tab-index="1"]:not(.active) { background: hsl(167,55%,88%); border-color: hsl(167,50%,58%); color: hsl(167,60%,22%); }
.ojpc-live-tabs .nav-link[data-tab-index="2"]:not(.active) { background: hsl(35,90%,89%);  border-color: hsl(35,80%,62%);  color: hsl(35,80%,25%);  }
.ojpc-live-tabs .nav-link[data-tab-index="3"]:not(.active) { background: hsl(267,45%,91%); border-color: hsl(267,40%,65%); color: hsl(267,50%,28%); }
.ojpc-live-tabs .nav-link[data-tab-index="4"]:not(.active) { background: hsl(340,60%,91%); border-color: hsl(340,55%,65%); color: hsl(340,60%,28%); }
.ojpc-live-tabs .nav-link[data-tab-index="5"]:not(.active) { background: hsl(190,65%,88%); border-color: hsl(190,55%,58%); color: hsl(190,65%,22%); }

/* Tab running — verde prominente */
.ojpc-live-tabs .nav-link.ojpc-live-tab--running:not(.active) {
    background: hsl(140,60%,86%);
    border-color: hsl(140,55%,42%);
    color: hsl(140,65%,18%);
}

/* Tab attivo: sfondo bianco/body con bordo top colorato */
.ojpc-live-tabs .nav-link.active {
    background: var(--bs-body-bg);
    border-bottom-color: transparent;
    color: var(--bs-body-color);
}

.ojpc-live-tab-running-dot {
    position: absolute;
    top: .45rem;
    right: .45rem;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--bs-success);
    animation: ojpc-tv-pulse 1.4s ease-in-out infinite;
}
.ojpc-live-tab-content {
    border: 1px solid var(--bs-border-color);
    border-top: none;
    border-radius: 0 0 .375rem .375rem;
}

/* Dark mode: schiarisci leggermente i colori non-active */
[data-bs-theme="dark"] .ojpc-live-tabs .nav-link[data-tab-index="0"]:not(.active) { background: hsl(213,35%,22%); border-color: hsl(213,45%,45%); color: hsl(213,60%,80%); }
[data-bs-theme="dark"] .ojpc-live-tabs .nav-link[data-tab-index="1"]:not(.active) { background: hsl(167,30%,18%); border-color: hsl(167,40%,40%); color: hsl(167,50%,72%); }
[data-bs-theme="dark"] .ojpc-live-tabs .nav-link[data-tab-index="2"]:not(.active) { background: hsl(35,40%,20%);  border-color: hsl(35,55%,45%);  color: hsl(35,70%,75%);  }
[data-bs-theme="dark"] .ojpc-live-tabs .nav-link[data-tab-index="3"]:not(.active) { background: hsl(267,25%,22%); border-color: hsl(267,35%,48%); color: hsl(267,50%,78%); }
[data-bs-theme="dark"] .ojpc-live-tabs .nav-link[data-tab-index="4"]:not(.active) { background: hsl(340,28%,20%); border-color: hsl(340,40%,48%); color: hsl(340,55%,75%); }
[data-bs-theme="dark"] .ojpc-live-tabs .nav-link[data-tab-index="5"]:not(.active) { background: hsl(190,30%,18%); border-color: hsl(190,42%,42%); color: hsl(190,55%,70%); }
[data-bs-theme="dark"] .ojpc-live-tabs .nav-link.ojpc-live-tab--running:not(.active) {
    background: hsl(140,35%,18%);
    border-color: hsl(140,50%,40%);
    color: hsl(140,55%,70%);
}
.ojpc-live-timer-bar {
    background: var(--bs-secondary-bg);
}
.ojpc-live-round-form select {
    min-width: 72px;
}
.ojpc-live-clock {
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--bs-body-color);
    min-width: 120px;
    display: inline-block;
    text-align: center;
}
.ojpc-live-clock--running {
    color: var(--bs-success);
}
.ojpc-live-btn {
    min-width: 90px;
}
.ojpc-live-table td, .ojpc-live-table th {
    vertical-align: middle;
    padding: .5rem .75rem;
}
.ojpc-live-dt {
    min-width: 180px;
    max-width: 210px;
    font-size: .85rem;
}
.ojpc-live-preview {
    font-size: .8rem;
    white-space: nowrap;
}

/* ── Timer widget nella competition view ──────── */
.ojpc-timer-clock {
    font-size: 1.1rem !important;
    letter-spacing: .03em;
    min-width: 90px;
    text-align: center;
}

/* ── Voce navbar "Iscriviti al prossimo evento" ── */
.ojpc-nav-register-item {
    font-weight: 600;
    color: var(--bs-primary) !important;
}

/* ═══════════════════════════════════════════════
   PAGINA PROFILO PARTECIPANTE
   ═══════════════════════════════════════════════ */

/* ── Card profilo (wrapper unico) ─────────────── */
.ojpc-profile-card {
    position: relative;
    border-radius: .5rem;
    overflow: visible;
    margin-top: 80px;
}

/* Topband: banner bandiera */
.ojpc-profile-topband {
    height: 130px;
    background-color: var(--bs-secondary-bg);
    background-size: 120%;
    background-position: left center;
    border-radius: .5rem;
    overflow: hidden;
    animation: ojpc-ken-burns 9s linear infinite alternate;
}

@keyframes ojpc-ken-burns {
    0%   { background-size: 120%; background-position: left center; }
    33%  { background-size: 150%; background-position: center center; }
    66%  { background-size: 120%; background-position: right center; }
    100% { background-size: 100%; background-position: center center; }
}

/* Bottomband: area sotto banner con social icons */
.ojpc-profile-bottomband {
    min-height: 90px;
    padding: .75rem 1.5rem .75rem 330px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    background: transparent;
}

/* Avatar: assoluto rispetto alla card
   avatar 270px, banner 130px → overlap 70px sopra e sotto il banner
   top = -(270/2 - 130/2) = -(135 - 65) = -70px  */
.ojpc-profile-avatar-col {
    position: absolute;
    left: 28px;
    top: -70px;
    z-index: 10;
}

.ojpc-profile-avatar-img,
.ojpc-avatar-img {
    width: 270px;
    height: 270px;
    object-fit: cover;
    border-radius: 50%;
    border: 5px solid var(--bs-body-bg);
    box-shadow: 0 2px 12px rgba(0,0,0,.25);
    background: var(--bs-secondary-bg);
    display: block;
}

.ojpc-profile-name-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .15rem;
}

.ojpc-profile-name {
    position: absolute;
    top: -60px;
    left: 310px;
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0,0,0,.5);
}

.ojpc-profile-flag-inline {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    line-height: 1;
}
.ojpc-profile-flag-inline img {
    height: 18px;
    width: auto;
    border-radius: .15rem;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.4));
}

.ojpc-social-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    text-decoration: none;
    font-size: 1rem;
    color: #fff;
    transition: opacity .15s, transform .15s;
    flex-shrink: 0;
}
.ojpc-social-circle:hover {
    opacity: .85;
    transform: scale(1.08);
    color: #fff;
}
.ojpc-social-circle--ig  { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.ojpc-social-circle--fb  { background: #1877f2; }
.ojpc-social-circle--msp { background: #fff; }
.ojpc-social-circle--msp img { display: block; }

/* ── Bio ─────────────────────────────────────────── */
.ojpc-profile-bio {
    font-size: .95rem;
    line-height: 1.7;
    color: var(--bs-secondary-color);
    border-left: 3px solid rgba(var(--bs-primary-rgb), .3);
    padding-left: 1rem;
}

/* ── Sezioni statistiche ─────────────────────────── */
.ojpc-profile-section-title {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    margin-bottom: .75rem;
}

.ojpc-stat-card {
    background: var(--ojpc-surface);
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    padding: .9rem 1rem;
    text-align: center;
    flex: 1;
    min-width: 90px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ojpc-stat-value {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--bs-body-color);
}

.ojpc-stat-label {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--bs-secondary-color);
    margin-top: .2rem;
}

.ojpc-stat-badge {
    display: inline-block;
    font-size: .65rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: .15rem .45rem;
    border-radius: 999px;
    background: rgba(var(--bs-primary-rgb), .1);
    color: var(--bs-primary);
    margin-bottom: .4rem;
}

/* ── Teams coming soon ────────────────────────────── */
.ojpc-teams-coming-soon {
    padding: 2.5rem 1rem;
    text-align: center;
}

/* ── Avatar wrapper (admin + user profile) ────────── */
.ojpc-admin-avatar-wrap {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
}

.ojpc-admin-avatar {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid var(--bs-border-color);
    display: block;
}

.ojpc-avatar-edit-btn {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid var(--bs-body-bg);
    background: var(--ojpc-surface);
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
    font-size: .7rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: background .15s;
}
.ojpc-avatar-edit-btn:hover { background: var(--bs-secondary-bg); }

/* ── Cropper container ────────────────────────────── */
.ojpc-cropper-container {
    width: 100%;
    max-height: 400px;
    overflow: hidden;
    border-radius: .4rem;
    background: var(--bs-dark-bg-subtle);
}
@media (max-width: 576px) {
    .ojpc-cropper-container {
        max-height: 60vh;
    }
}
.ojpc-cropper-container img {
    max-width: 100%;
    display: block;
}

/* ── Media < 991px ───────────────────────────────── */
@media (max-width: 991px) {
    .ojpc-profile-avatar-col {
        top: -40px;
    }
    .ojpc-profile-avatar-img,
    .ojpc-avatar-img {
        width: 200px;
        height: 200px;
    }
    .ojpc-profile-name {
        font-size: 1.5rem;
        top: -32px;
        left: 226px;
    }
}

/* ── Mobile responsive profilo ───────────────────── */
@media (max-width: 575px) {
    .ojpc-profile-card {
        margin-top: 50px;
    }
    .ojpc-profile-topband {
        padding-left: 180px;
        height: 110px;
    }
    .ojpc-profile-bottomband {
        padding-left: 180px;
        min-height: 70px;
    }
    .ojpc-profile-avatar-col {
        left: 16px;
        top: -28px;
    }
    .ojpc-profile-avatar-img,
    .ojpc-avatar-img {
        width: 160px;
        height: 160px;
    }
    .ojpc-profile-name {
        top: -23px;
        left: 177px;
        font-size: 1.1rem;
    }
    .ojpc-stat-card {
        min-width: 70px;
        padding: .65rem .5rem;
    }
    .ojpc-stat-value {
        font-size: 1.1rem;
    }
}

/* ── Pagina Contatti ─────────────────────────────── */
.ojpc-contact-hero {
    text-align: center;
    padding: 2.5rem 1rem 1.5rem;
}
.ojpc-contact-hero__title {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: .5rem;
}
.ojpc-contact-hero__subtitle {
    color: var(--bs-secondary-color);
    max-width: 560px;
    margin: 0 auto;
    font-size: .95rem;
}

.ojpc-contact-info-card {
    background: var(--bs-tertiary-bg);
}
.ojpc-contact-info-item {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}
.ojpc-contact-info-icon {
    font-size: 1.25rem;
    line-height: 1;
    flex-shrink: 0;
    margin-top: .1rem;
}
.ojpc-contact-info-link {
    color: var(--bs-primary);
    text-decoration: none;
    font-size: .9rem;
}
.ojpc-contact-info-link:hover {
    text-decoration: underline;
}

/* ── Pagina Puzzlers ─────────────────────────────── */

/* Card ricerca/filtri */
.ojpc-puzzlers-search-card {
    background-color: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color-translucent);
}

/* Barra bandiere: scroll orizzontale su mobile */
.ojpc-puzzlers-flags-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: .25rem;
}
.ojpc-puzzlers-flags {
    display: flex;
    flex-wrap: nowrap;
    gap: .35rem;
    white-space: nowrap;
    padding-bottom: .25rem;
}
@media (min-width: 768px) {
    .ojpc-puzzlers-flags {
        flex-wrap: wrap;
        white-space: normal;
    }
}

.ojpc-flag-btn {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .25rem .55rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 999px;
    background: var(--ojpc-surface);
    color: var(--bs-body-color);
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
    white-space: nowrap;
    flex-shrink: 0;
}
.ojpc-flag-btn:hover {
    background: var(--bs-tertiary-bg);
    border-color: var(--bs-primary);
}
.ojpc-flag-btn.active {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}
.ojpc-flag-btn .flag-icon {
    margin-right: 0;
    width: 18px;
    height: 13px;
}

/* Riga singolo partecipante */
.ojpc-puzzler-row {
    border: 1px solid var(--bs-border-color-translucent);
    border-radius: .6rem;
    margin-bottom: .75rem;
    background: var(--ojpc-surface);
    overflow: hidden;
    transition: box-shadow .15s;
}
.ojpc-puzzler-row:hover {
    box-shadow: 0 4px 18px rgba(0,0,0,.09);
}

/* Header della riga: bandiera + nome */
.ojpc-puzzler-row__head {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1rem .35rem;
    background: var(--bs-tertiary-bg);
    border-bottom: 1px solid var(--bs-border-color-translucent);
    font-size: .85rem;
}
.ojpc-puzzler-row__head .flag-icon {
    width: 22px;
    height: 16px;
    flex-shrink: 0;
}
.ojpc-puzzler-name-link {
    color: var(--bs-body-color);
    text-decoration: none;
    font-size: .9rem;
}
.ojpc-puzzler-name-link:hover {
    color: #00e676;
}
.ojpc-puzzler-name-link strong {
    font-weight: 700;
}
.ojpc-puzzler-nick {
    color: var(--bs-secondary-color);
    font-size: .85em;
    font-weight: 400;
}

/* Corpo: avatar + stats */
.ojpc-puzzler-row__body {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .75rem 1rem;
}

/* Avatar */
.ojpc-puzzler-avatar-link {
    flex-shrink: 0;
}
.ojpc-puzzler-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--bs-border-color-translucent);
    display: block;
}

/* Griglia stat cards */
.ojpc-puzzler-stats {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: .4rem;
    flex: 1;
    min-width: 0;
}

/* Singola stat card */
.ojpc-pstat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: .4rem .3rem;
    border-radius: .45rem;
    background: var(--bs-tertiary-bg);
    min-width: 0;
}
.ojpc-pstat-icon {
    font-size: .9rem;
    line-height: 1;
    margin-bottom: .15rem;
}
.ojpc-pstat-value {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.1;
}
.ojpc-pstat-gold {
    color: #d4a017;
}
.ojpc-pstat-card--gold {
    background: linear-gradient(135deg, rgba(212,160,23,.18) 0%, rgba(255,210,80,.10) 100%);
    border: 1px solid rgba(212,160,23,.35);
}
.ojpc-pstat-card--gold .ojpc-pstat-value {
    color: #b8860b;
}
[data-bs-theme="dark"] .ojpc-pstat-card--gold {
    background: linear-gradient(135deg, rgba(212,160,23,.22) 0%, rgba(255,210,80,.12) 100%);
    border-color: rgba(212,160,23,.45);
}
[data-bs-theme="dark"] .ojpc-pstat-card--gold .ojpc-pstat-value {
    color: #f0c040;
}
.ojpc-pstat-label {
    font-size: .6rem;
    color: var(--bs-secondary-color);
    line-height: 1.2;
    margin-top: .15rem;
    text-transform: uppercase;
    letter-spacing: .02em;
}

/* Mobile: avatar piccolo + stats su 3 colonne */
@media (max-width: 575px) {
    .ojpc-puzzler-row__body {
        flex-wrap: wrap;
        gap: .6rem;
        padding: .6rem .75rem;
    }
    .ojpc-puzzler-avatar {
        width: 56px;
        height: 56px;
    }
    .ojpc-puzzler-stats {
        grid-template-columns: repeat(3, 1fr);
        flex: 1 1 calc(100% - 72px);
    }
}

/* Tablet: 6 colonne ma più compatte */
@media (min-width: 576px) and (max-width: 991px) {
    .ojpc-puzzler-avatar {
        width: 64px;
        height: 64px;
    }
}

/* Link "← Tutti i Puzzlers" nella scheda partecipante */
.ojpc-back-link {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
    text-decoration: none;
    transition: color .15s;
}
.ojpc-back-link:hover {
    color: var(--bs-primary);
}

/* ══ Admin — Log Attività ═══════════════════════════════════════════ */
.ojpc-logs-table-wrap {
    max-height: 70vh;
    overflow-y: auto;
}
.ojpc-logs-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}
.ojpc-log-col-time    { width: 7rem; }
.ojpc-log-col-user    { width: 14rem; }
.ojpc-log-col-method  { width: 5rem; }
.ojpc-log-col-action  { width: 11rem; }
.ojpc-log-col-ip      { width: 8rem; }
.ojpc-log-uri,
.ojpc-log-details {
    max-width: 20rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ojpc-log-time {
    font-size: .78rem;
    color: var(--bs-secondary-color);
}

/* ══ Admin — Statistiche ════════════════════════════════════════════ */
.ojpc-stats-pagelist {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}
.ojpc-stats-pagerow {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: .5rem;
}
.ojpc-stats-pageuri {
    max-width: 260px;
}
.ojpc-stats-pagebar {
    height: 6px;
    background: var(--bs-border-color);
    border-radius: 3px;
    width: 80px;
    flex-shrink: 0;
}
.ojpc-stats-pagebar-fill {
    height: 100%;
    background: var(--bs-primary);
    border-radius: 3px;
    transition: width .4s;
}
.ojpc-stats-pagehits {
    min-width: 2rem;
    text-align: right;
}
.ojpc-stats-natrow {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .3rem .5rem;
    border-radius: .4rem;
    background: var(--ojpc-surface);
}
.ojpc-stats-natrank {
    min-width: 1.4rem;
    text-align: right;
}
.ojpc-stats-loginlist {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    max-height: 320px;
    overflow-y: auto;
}
.ojpc-stats-loginrow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    padding: .4rem .5rem;
    border-radius: .4rem;
    background: var(--ojpc-surface);
}

/* ══ Top pagine — stile elegante ════════════════════════════════════ */
.ojpc-toppages-date {
    font-size: .78rem;
    padding: .25rem .5rem;
    border-radius: .5rem;
}
.ojpc-toppages-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .3rem;
}
.ojpc-toppages-item {
    display: grid;
    grid-template-columns: 2rem 1fr auto;
    align-items: center;
    gap: .75rem;
    padding: .55rem .65rem;
    border-radius: .55rem;
    background: var(--ojpc-surface);
    border: 1px solid transparent;
    transition: border-color .15s, box-shadow .15s;
}
.ojpc-toppages-item:hover {
    border-color: var(--bs-border-color);
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.ojpc-toppages-item--top {
    background: linear-gradient(135deg, rgba(212,160,23,.07) 0%, rgba(255,210,80,.04) 100%);
    border-color: rgba(212,160,23,.2);
}
.ojpc-toppages-rank {
    font-size: .8rem;
    font-weight: 700;
    color: var(--bs-secondary-color);
    text-align: center;
    line-height: 1;
}
.ojpc-toppages-rank--medal {
    font-size: .95rem;
}
.ojpc-toppages-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .3rem;
}
.ojpc-toppages-uri {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: .75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--bs-body-color);
    line-height: 1.2;
}
.ojpc-toppages-bar-wrap {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.ojpc-toppages-bar {
    flex: 1;
    height: 4px;
    background: var(--bs-border-color);
    border-radius: 2px;
    overflow: hidden;
}
.ojpc-toppages-bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width .5s cubic-bezier(.4,0,.2,1);
    opacity: .85;
}
.ojpc-toppages-share {
    font-size: .68rem;
    min-width: 2.8rem;
    text-align: right;
}
.ojpc-toppages-hits {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .05rem;
}
.ojpc-toppages-hits-value {
    font-size: .9rem;
    font-weight: 700;
    line-height: 1;
    color: var(--bs-body-color);
}
.ojpc-toppages-hits-label {
    font-size: .65rem;
    color: var(--bs-secondary-color);
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* ── Action breakdown ─────────────────────────────────────────────── */
.ojpc-action-breakdown {
    display: flex;
    flex-direction: column;
    gap: .45rem;
}
.ojpc-action-row {
    display: grid;
    grid-template-columns: 1.4rem 1fr 120px 3rem;
    align-items: center;
    gap: .5rem;
}
.ojpc-action-icon {
    font-size: .85rem;
    text-align: center;
}
.ojpc-action-name {
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: .72rem;
    color: var(--bs-body-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ojpc-action-count {
    font-size: .82rem;
    text-align: right;
    color: var(--bs-body-color);
}

/* ══════════════════════════════════════════════════════════════════════
   PAGINA GRAZIE — Codice sconto tester
   ══════════════════════════════════════════════════════════════════════ */

.ojpc-grazie-page {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background: var(--ojpc-surface);
}

.ojpc-grazie-wrap {
    max-width: 540px;
    width: 100%;
    text-align: center;
}

.ojpc-grazie-logo {
    margin-bottom: 2rem;
    opacity: .85;
}

.ojpc-grazie-heart {
    font-size: 2.8rem;
    color: #e06c6c;
    animation: ojpc-grazie-pulse 1.6s ease-in-out infinite;
    display: block;
    margin-bottom: 1rem;
    line-height: 1;
}

@keyframes ojpc-grazie-pulse {
    0%, 100% { transform: scale(1);   opacity: 1; }
    50%       { transform: scale(1.2); opacity: .8; }
}

.ojpc-grazie-title {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -.02em;
    margin-bottom: .5rem;
    color: var(--bs-body-color);
}

.ojpc-grazie-sub {
    color: var(--bs-secondary-color);
    font-size: .95rem;
    line-height: 1.6;
    margin-bottom: 2rem;
}

/* Card principale */
.ojpc-grazie-card {
    background: var(--ojpc-surface);
    border: 1px solid var(--bs-border-color);
    border-radius: 1.25rem;
    padding: 2rem 2rem 1.75rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 4px 32px rgba(0,0,0,.08);
    position: relative;
    overflow: hidden;
}

.ojpc-grazie-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(212,160,23,.06) 0%, transparent 60%);
    pointer-events: none;
}

.ojpc-grazie-card-label {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    margin-bottom: 1rem;
}

/* Codice + pulsante copia */
.ojpc-grazie-code-wrap {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    background: var(--bs-tertiary-bg);
    border: 2px dashed var(--bs-border-color);
    border-radius: .75rem;
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
}

.ojpc-grazie-code {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.9rem;
    font-weight: 700;
    letter-spacing: .18em;
    color: #d4a017;
}

.ojpc-grazie-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: var(--ojpc-surface);
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    padding: .35rem .75rem;
    font-size: .8rem;
    font-weight: 500;
    color: var(--bs-body-color);
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
    white-space: nowrap;
}

.ojpc-grazie-copy-btn:hover {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}

.ojpc-grazie-copy-btn--ok {
    background: #198754 !important;
    border-color: #198754 !important;
    color: #fff !important;
}

/* Badge sconto */
.ojpc-grazie-discount-badge {
    display: inline-block;
    background: linear-gradient(135deg, #d4a017, #b8860b);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 2rem;
    margin-left: 1rem;
    padding: .25rem 1rem;
    margin-bottom: 1rem;
    letter-spacing: .03em;
}

.ojpc-grazie-card-desc {
    color: var(--bs-secondary-color);
    font-size: .9rem;
    line-height: 1.55;
    margin-bottom: 1.25rem;
}

.ojpc-grazie-store-link {
    color: var(--bs-primary);
    font-weight: 600;
    text-decoration: none;
}

.ojpc-grazie-store-link:hover {
    text-decoration: underline;
}

/* CTA button */
.ojpc-grazie-cta {
    display: inline-block;
    background: var(--bs-primary);
    color: #fff;
    font-weight: 600;
    font-size: .9rem;
    padding: .65rem 1.75rem;
    border-radius: .6rem;
    text-decoration: none;
    transition: opacity .15s;
}

.ojpc-grazie-cta:hover {
    opacity: .88;
    color: #fff;
}

/* Note e footer */
.ojpc-grazie-note {
    font-size: .75rem;
    color: var(--bs-tertiary-color);
    margin-bottom: 1.75rem;
}

.ojpc-grazie-footer {
    font-size: .88rem;
    color: var(--bs-secondary-color);
    line-height: 1.7;
}

.ojpc-grazie-ojpc-link {
    color: var(--bs-secondary-color);
    text-decoration: none;
    font-size: .8rem;
}

.ojpc-grazie-ojpc-link:hover {
    color: var(--bs-primary);
}

/* ══════════════════════════════════════════════════════════════════════
   PIAZZAMENTI LIVE — scheda pubblica partecipante
   ══════════════════════════════════════════════════════════════════════ */

.ojpc-live-events {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.ojpc-live-event-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 2rem;
    padding: .3rem .75rem .3rem .5rem;
    cursor: default;
    transition: border-color .15s, background .15s;
}

.ojpc-live-event-chip:hover {
    background: var(--bs-secondary-bg);
    border-color: var(--bs-secondary-color);
}

.ojpc-live-flag {
    width: 18px !important;
    height: 13px !important;
    border-radius: 2px;
    flex-shrink: 0;
}

.ojpc-live-pos {
    font-size: .8rem;
    font-weight: 700;
    color: var(--bs-body-color);
    line-height: 1;
}

.ojpc-live-year {
    font-size: .72rem;
    color: var(--bs-secondary-color);
    line-height: 1;
}

.ojpc-live-cat {
    font-size: .72rem;
    line-height: 1;
}

/* ── user/profile — tabella piazzamenti ────────────────────────────── */

.ojpc-live-events-table {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.ojpc-live-events-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .5rem .75rem;
    background: var(--bs-tertiary-bg);
    border-radius: .5rem;
    border: 1px solid var(--bs-border-color);
}

/* posizione 1/2/3 — chip (pagina pubblica) */
.ojpc-live-event-chip--gold {
    background: rgba(212, 175, 55, .18);
    border-color: rgba(212, 175, 55, .55);
}
.ojpc-live-event-chip--gold:hover {
    background: rgba(212, 175, 55, .28);
}
.ojpc-live-event-chip--silver {
    background: rgba(160, 160, 175, .18);
    border-color: rgba(160, 160, 175, .55);
}
.ojpc-live-event-chip--silver:hover {
    background: rgba(160, 160, 175, .28);
}
.ojpc-live-event-chip--bronze {
    background: rgba(176, 110, 56, .18);
    border-color: rgba(176, 110, 56, .55);
}
.ojpc-live-event-chip--bronze:hover {
    background: rgba(176, 110, 56, .28);
}

/* posizione 1/2/3 — riga (profilo utente + admin edit) */
.ojpc-live-events-row--gold {
    background: rgba(212, 175, 55, .15);
    border-color: rgba(212, 175, 55, .5);
}
.ojpc-live-events-row--silver {
    background: rgba(160, 160, 175, .15);
    border-color: rgba(160, 160, 175, .5);
}
.ojpc-live-events-row--bronze {
    background: rgba(176, 110, 56, .15);
    border-color: rgba(176, 110, 56, .5);
}

[data-bs-theme="dark"] .ojpc-live-event-chip--gold    { background: rgba(212, 175, 55, .12); border-color: rgba(212, 175, 55, .4); }
[data-bs-theme="dark"] .ojpc-live-event-chip--silver  { background: rgba(180, 180, 195, .1);  border-color: rgba(180, 180, 195, .4); }
[data-bs-theme="dark"] .ojpc-live-event-chip--bronze  { background: rgba(176, 110, 56, .12); border-color: rgba(176, 110, 56, .4); }
[data-bs-theme="dark"] .ojpc-live-events-row--gold    { background: rgba(212, 175, 55, .1);  border-color: rgba(212, 175, 55, .35); }
[data-bs-theme="dark"] .ojpc-live-events-row--silver  { background: rgba(180, 180, 195, .08); border-color: rgba(180, 180, 195, .35); }
[data-bs-theme="dark"] .ojpc-live-events-row--bronze  { background: rgba(176, 110, 56, .1);  border-color: rgba(176, 110, 56, .35); }

.ojpc-live-add-form {
    padding-top: .75rem;
    border-top: 1px solid var(--bs-border-color);
}

/* ── Pagina modifica profilo utente ──────────────── */
.ojpc-profile-edit .card {
    background-color: #f1f1f1;
}
[data-bs-theme="dark"] .ojpc-profile-edit .card {
    background-color: #1d2125;
}

/* ══════════════════════════════════════════════════════
   DARK MODE — palette superfici e contrasto
   ══════════════════════════════════════════════════════

   Sistema a 3 livelli di elevazione:
     surface-0 (--ojpc-bg-page)  → sfondo pagina       #0f1216
     surface-1 (--ojpc-bg-card)  → card/pannelli        #1c2028
     surface-2 (--ojpc-bg-sub)   → pannelli annidati    #252c37
     surface-3 (--ojpc-bg-hover) → hover / selezionato  #2d3648

   Regola: NON usare mai var(--bs-body-bg) come sfondo di una card —
   usare sempre var(--ojpc-surface) in modo che il token venga
   automaticamente adattato al tema corrente.
*/

[data-bs-theme="dark"] {
    --ojpc-bg-page:  #0f1216;
    --ojpc-bg-card:  #1c2028;
    --ojpc-bg-sub:   #252c37;
    --ojpc-bg-hover: #2d3648;
    --ojpc-surface:  var(--ojpc-bg-card);

    /* Ridefinisce le variabili Bootstrap così tutti i componenti nativi
       (card, modal, dropdown, ecc.) rispettano la stessa palette */
    --bs-body-bg:         var(--ojpc-bg-page);
    --bs-body-bg-rgb:     15, 18, 22;
    --bs-card-bg:         var(--ojpc-bg-card);
    --bs-secondary-bg:    var(--ojpc-bg-sub);
    --bs-tertiary-bg:     var(--ojpc-bg-sub);
    --bs-secondary-bg-rgb: 37, 44, 55;
    --bs-tertiary-bg-rgb:  37, 44, 55;
}

/* Ombre Bootstrap quasi invisibili su sfondo scuro: le sostituiamo
   con ombre più profonde + sottile bordo luminoso */
[data-bs-theme="dark"] .shadow-sm {
    box-shadow: 0 1px 4px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.055) !important;
}
[data-bs-theme="dark"] .shadow {
    box-shadow: 0 4px 16px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.055) !important;
}
[data-bs-theme="dark"] .shadow-lg {
    box-shadow: 0 8px 32px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.055) !important;
}

/* Card Bootstrap senza shadow esplicita: assicura bordo visibile */
[data-bs-theme="dark"] .card:not([class*="shadow"]) {
    border-color: rgba(255,255,255,.09) !important;
}

/* ══════════════════════════════════════════════════════
   LIGHT MODE — contrasto, card e tabelle
   ══════════════════════════════════════════════════════ */

/*
 * Struttura a 4 livelli light mode:
 *   page  (#e3e9f2) → sub (#edf1f8) → card (#ffffff) → hover (#dce4ef)
 * I token --ojpc-bg-* vengono sovrascrivibili da palette.css (Admin > Portale).
 * Bootstrap viene allineato tramite --bs-card-bg, --bs-tertiary-bg, ecc.
 */

:root:not([data-bs-theme="dark"]) {
    --ojpc-bg-page:  #e3e9f2;
    --ojpc-bg-card:  #ffffff;
    --ojpc-bg-sub:   #edf1f8;
    --ojpc-bg-hover: #dce4ef;
    --ojpc-surface:  var(--ojpc-bg-card);

    --bs-card-bg:          var(--ojpc-bg-card);
    --bs-tertiary-bg:      var(--ojpc-bg-sub);
    --bs-secondary-bg:     var(--ojpc-bg-sub);
    --bs-tertiary-bg-rgb:  237, 241, 248;
    --bs-secondary-bg-rgb: 237, 241, 248;
}

:root:not([data-bs-theme="dark"]) body {
    background-color: var(--ojpc-bg-page);
}

/* ── Card Bootstrap: shadow + bordo in light mode ── */
:root:not([data-bs-theme="dark"]) .card {
    box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
    border-color: #ccd4e0;
}

/* ── Tabella classifiche pubblica: zebra + hover ── */
:root:not([data-bs-theme="dark"]) .ojpc-ranking-table tbody
    tr:nth-child(even):not(.ojpc-row-gold):not(.ojpc-row-silver):not(.ojpc-row-bronze) {
    background-color: #f3f6fb;
}
:root:not([data-bs-theme="dark"]) .ojpc-ranking-table tbody
    tr:hover:not(.ojpc-row-gold):not(.ojpc-row-silver):not(.ojpc-row-bronze) {
    background-color: #dce4ef !important;
}

/* ── Tabelle Bootstrap (admin, area utente, ecc.) ─ */
:root:not([data-bs-theme="dark"]) .table > thead > tr > th,
:root:not([data-bs-theme="dark"]) .table > thead > tr > td {
    background-color: #edf1f8;
    border-bottom-color: #b8c4d4;
}
:root:not([data-bs-theme="dark"]) .table > tbody > tr:nth-child(even) > td,
:root:not([data-bs-theme="dark"]) .table > tbody > tr:nth-child(even) > th {
    background-color: #f3f6fb;
}
:root:not([data-bs-theme="dark"]) .table > tbody > tr:hover > td,
:root:not([data-bs-theme="dark"]) .table > tbody > tr:hover > th {
    background-color: #dce4ef;
}

/* ═══════════════════════════════════════════════════
   ABOUT PAGE
   ═══════════════════════════════════════════════════ */

.ojpc-about-hero {
    background: linear-gradient(135deg, #1a2540 0%, #0d6efd 100%);
    border-radius: 1rem;
    padding: 3.5rem 2rem;
    text-align: center;
    color: #fff;
    margin-bottom: 3rem;
}
.ojpc-about-hero h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800; margin-bottom: .75rem; }
.ojpc-about-hero p  { font-size: 1.1rem; opacity: .85; max-width: 560px; margin: 0 auto; }

.ojpc-about-section {
    border-top: 1px solid var(--bs-border-color);
    padding-top: 2.5rem;
    margin-bottom: 2.5rem;
}
.ojpc-about-section:first-of-type { border-top: none; padding-top: 0; }

.ojpc-about-icon {
    width: 56px; height: 56px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem;
    flex-shrink: 0;
    background: rgba(13,110,253,.12);
}
[data-bs-theme="dark"] .ojpc-about-icon { background: rgba(13,110,253,.2); }

.ojpc-about-stat {
    text-align: center;
    padding: 1.5rem 1rem;
}
.ojpc-about-stat-num {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--bs-primary);
    line-height: 1;
    margin-bottom: .25rem;
}
.ojpc-about-stat-label {
    font-size: .85rem;
    color: var(--bs-secondary-color);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════
   HISTORY PAGE — timeline
   Label a sinistra (allineata a destra) + dot sulla
   linea verticale: i dot sono sempre in asse.
   ═══════════════════════════════════════════════════ */

.ojpc-history-timeline {
    position: relative;
    padding-left: 7rem;
}
.ojpc-history-timeline::before {
    content: '';
    position: absolute;
    left: 6.15rem;
    top: .5rem;
    bottom: 2rem;
    width: 2px;
    background: linear-gradient(to bottom, var(--bs-primary), rgba(13,110,253,.15));
    border-radius: 2px;
}

.ojpc-history-item {
    position: relative;
    padding-bottom: 2.5rem;
}
.ojpc-history-item--last {
    padding-bottom: 0;
}

/* Marker: row-reverse → DOM [dot, label] → visivo [label | dot]
   La label (flex:1, text-right) riempie a sinistra, il dot sta
   sul bordo destro del marker, esattamente sulla linea verticale. */
.ojpc-history-marker {
    position: absolute;
    left: -7rem;
    top: .3rem;
    width: 7rem;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    padding-right: .45rem;
}

.ojpc-history-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--bs-primary);
    border: 2px solid var(--bs-primary);
    flex-shrink: 0;
}
.ojpc-history-dot--milestone {
    width: 16px;
    height: 16px;
}
.ojpc-history-dot--current {
    width: 18px;
    height: 18px;
}

.ojpc-history-label {
    flex: 1;
    text-align: right;
    padding-right: .55rem;
    font-size: .68rem;
    font-weight: 700;
    color: var(--bs-secondary-color);
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
    line-height: 1.2;
}
.ojpc-history-label--milestone {
    color: var(--bs-primary);
}
.ojpc-history-label--current {
    color: var(--bs-primary);
    font-size: .75rem;
}

.ojpc-history-content {
    background: var(--ojpc-surface, var(--bs-body-bg));
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 1px 4px rgba(0,0,0,.05);
    transition: box-shadow .2s;
}
.ojpc-history-content:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,.09);
}

.ojpc-history-icon {
    font-size: 1.75rem;
    margin-bottom: .5rem;
    line-height: 1;
}

@media (max-width: 576px) {
    .ojpc-history-timeline { padding-left: 5rem; }
    .ojpc-history-timeline::before { left: 4.15rem; }
    .ojpc-history-marker { left: -5rem; width: 5rem; }
    .ojpc-history-label { font-size: .6rem; padding-right: .4rem; }
}

[data-bs-theme="dark"] .ojpc-history-timeline::before {
    background: linear-gradient(to bottom, rgba(99,160,255,.7), rgba(99,160,255,.08));
}
[data-bs-theme="dark"] .ojpc-history-dot {
    background: rgba(99,160,255,.9);
    border-color: rgba(99,160,255,.9);
}
[data-bs-theme="dark"] .ojpc-history-content {
    box-shadow: 0 1px 4px rgba(0,0,0,.25);
}

/* ═══════════════════════════════════════════════════
   HOME PAGE
   ═══════════════════════════════════════════════════ */

/* ── Hero ────────────────────────────────────────── */
.ojpc-hero {
    background: linear-gradient(135deg, #0d1b2a 0%, #1a2f4a 60%, #0e2340 100%);
    color: #fff;
    padding: 3.5rem 1.5rem;
    text-align: center;
    border: 1px solid rgba(255,255,255,.06);
}
[data-bs-theme="dark"] .ojpc-hero {
    border-color: rgba(255,255,255,.1);
    box-shadow: 0 0 0 1px rgba(99,160,255,.08) inset;
}
.ojpc-hero-logo {
    height: 60px;
    width: auto;
    object-fit: contain;
    filter: brightness(1.05);
}
.ojpc-hero-title {
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    font-weight: 700;
    margin-bottom: .5rem;
    letter-spacing: -.02em;
}
.ojpc-hero-sub {
    font-size: .95rem;
    opacity: .82;
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.6;
}
.ojpc-hero-sub-secondary {
    opacity: .65;
    font-size: .88rem;
}



/* ── Stat cards ──────────────────────────────────── */
.ojpc-stat-card { transition: transform .2s; }
.ojpc-stat-card:hover { transform: translateY(-3px); }
[data-bs-theme="dark"] .ojpc-stat-card {
    border: 1px solid var(--bs-border-color) !important;
    background: var(--bs-tertiary-bg) !important;
}
.ojpc-home-stat-icon { font-size: 1.8rem; margin-bottom: .4rem; }
.ojpc-stat-value {
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1;
    color: var(--bs-primary);
    letter-spacing: -.03em;
}
[data-bs-theme="dark"] .ojpc-stat-value { color: #63a0ff; }
.ojpc-stat-label {
    font-size: .78rem;
    color: var(--bs-secondary-color);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-top: .3rem;
}

/* ── Open event card ─────────────────────────────── */
.ojpc-open-event-card {
    border-left: 4px solid #22c55e !important;
}
[data-bs-theme="dark"] .ojpc-open-event-card {
    background: rgba(34,197,94,.07) !important;
    border-color: rgba(34,197,94,.4) !important;
    border-left-color: #22c55e !important;
}

/* ── Podium cards ────────────────────────────────── */
.ojpc-podium-medal { font-size: 2.5rem; line-height: 1; }
.ojpc-podium-name  { font-size: .95rem; }
.ojpc-podium-time  { font-size: .85rem; }

.ojpc-podium-gold {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%) !important;
    border-top: 3px solid #f59e0b !important;
}
.ojpc-podium-silver {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
    border-top: 3px solid #94a3b8 !important;
}
.ojpc-podium-bronze {
    background: linear-gradient(135deg, #fff7f0 0%, #fdebd6 100%) !important;
    border-top: 3px solid #cd7f32 !important;
}
[data-bs-theme="dark"] .ojpc-podium-gold {
    background: linear-gradient(135deg, rgba(245,158,11,.22) 0%, rgba(245,158,11,.12) 100%) !important;
    border-top-color: #f59e0b !important;
}
[data-bs-theme="dark"] .ojpc-podium-silver {
    background: linear-gradient(135deg, rgba(148,163,184,.2) 0%, rgba(148,163,184,.1) 100%) !important;
    border-top-color: #94a3b8 !important;
}
[data-bs-theme="dark"] .ojpc-podium-bronze {
    background: linear-gradient(135deg, rgba(205,127,50,.22) 0%, rgba(205,127,50,.12) 100%) !important;
    border-top-color: #cd7f32 !important;
}

/* ── Rankings two-column ─────────────────────────── */
@media (min-width: 992px) {
    .ojpc-home-rankings-row > .col-lg-6:first-child {
        border-right: 1px solid var(--bs-border-color);
        padding-right: 1.75rem;
    }
    .ojpc-home-rankings-row > .col-lg-6:last-child {
        padding-left: 1.75rem;
    }
}

/* ── Albo d'oro ──────────────────────────────────── */
.ojpc-home-hof-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-radius: .6rem;
    overflow: hidden;
    border: 1px solid var(--bs-border-color);
}

.ojpc-home-hof-entry {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .7rem 1.1rem;
    border-bottom: 1px solid var(--bs-border-color);
    border-left: 4px solid transparent;
    background: var(--ojpc-surface);
    transition: background .15s;
}
.ojpc-home-hof-entry:last-child { border-bottom: none; }
.ojpc-home-hof-entry:hover { background: var(--bs-tertiary-bg); }

[data-bs-theme="dark"] .ojpc-home-hof-entry {
    background: var(--bs-tertiary-bg);
}
[data-bs-theme="dark"] .ojpc-home-hof-entry:hover {
    background: rgba(255,255,255,.06);
}

.ojpc-home-hof-entry--top {
    border-left-color: #f59e0b;
    background: linear-gradient(90deg, rgba(245,158,11,.07) 0%, transparent 60%);
}
[data-bs-theme="dark"] .ojpc-home-hof-entry--top {
    background: linear-gradient(90deg, rgba(245,158,11,.18) 0%, transparent 55%);
}
[data-bs-theme="dark"] .ojpc-home-hof-entry--top:hover {
    background: linear-gradient(90deg, rgba(245,158,11,.24) 0%, rgba(255,255,255,.04) 100%);
}

.ojpc-home-hof-entry--silver {
    border-left-color: #9ca3af;
    background: linear-gradient(90deg, rgba(156,163,175,.07) 0%, transparent 60%);
}
[data-bs-theme="dark"] .ojpc-home-hof-entry--silver {
    background: linear-gradient(90deg, rgba(156,163,175,.16) 0%, transparent 55%);
}
[data-bs-theme="dark"] .ojpc-home-hof-entry--silver:hover {
    background: linear-gradient(90deg, rgba(156,163,175,.22) 0%, rgba(255,255,255,.04) 100%);
}

.ojpc-home-hof-entry--bronze {
    border-left-color: #b06e38;
    background: linear-gradient(90deg, rgba(176,110,56,.07) 0%, transparent 60%);
}
[data-bs-theme="dark"] .ojpc-home-hof-entry--bronze {
    background: linear-gradient(90deg, rgba(176,110,56,.16) 0%, transparent 55%);
}
[data-bs-theme="dark"] .ojpc-home-hof-entry--bronze:hover {
    background: linear-gradient(90deg, rgba(176,110,56,.22) 0%, rgba(255,255,255,.04) 100%);
}

.ojpc-home-hof-yr {
    font-size: 1rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--bs-primary);
    min-width: 3.2rem;
    letter-spacing: -.02em;
}
.ojpc-home-hof-entry--top .ojpc-home-hof-yr { color: #d97706; }
[data-bs-theme="dark"] .ojpc-home-hof-yr { color: #63a0ff; }
[data-bs-theme="dark"] .ojpc-home-hof-entry--top .ojpc-home-hof-yr { color: #fbbf24; }

.ojpc-home-hof-who {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex: 1;
    min-width: 0;
}
.ojpc-home-hof-trophy { font-size: 1rem; flex-shrink: 0; }

.ojpc-home-hof-name {
    font-weight: 600;
    font-size: .95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ojpc-home-hof-entry--top .ojpc-home-hof-name { font-size: 1rem; }

.ojpc-home-hof-pts {
    font-size: .85rem;
    font-weight: 700;
    color: var(--bs-secondary-color);
    white-space: nowrap;
    text-align: right;
    min-width: 4rem;
}
.ojpc-home-hof-pts-label { font-weight: 400; }

/* ── How it works — timeline ─────────────────────── */
.ojpc-how-section { border-top: 1px solid var(--bs-border-color); padding-top: 2.5rem; }
.ojpc-how-section--no-border { border-top: none; }

.ojpc-how-timeline {
    max-width: 680px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.ojpc-how-step {
    display: flex;
    gap: 1.25rem;
    align-items: stretch;
}

.ojpc-how-step-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 2.6rem;
}

.ojpc-how-step-bubble {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: var(--bs-primary);
    color: #fff;
    font-weight: 800;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    box-shadow: 0 0 0 4px var(--bs-body-bg);
}
[data-bs-theme="dark"] .ojpc-how-step-bubble {
    background: #63a0ff;
    box-shadow: 0 0 0 4px var(--bs-body-bg);
}

.ojpc-how-step-line {
    flex: 1;
    width: 2px;
    background: var(--bs-border-color);
    margin: .3rem 0;
    min-height: 1.5rem;
}

.ojpc-how-step-body {
    padding-bottom: 2rem;
    flex: 1;
    min-width: 0;
}
.ojpc-how-step--last .ojpc-how-step-body { padding-bottom: .5rem; }

/* ════════════════════════════════════════════════════
   PAGINA EVENTO / TORNEO
   ════════════════════════════════════════════════════ */

/* Hero */
.ojpc-event-hero {
    background: linear-gradient(135deg, #0d1b3e 0%, #1a2f6e 60%, #0f2a5c 100%);
    border-radius: .75rem;
    padding: 2.5rem 2rem;
    margin-bottom: 1.75rem;
    color: #fff;
}
[data-bs-theme="light"] .ojpc-event-hero {
    background: linear-gradient(135deg, #111731 0%, #1e3a8a 60%, #1e3478 100%);
}
.ojpc-event-hero-inner { max-width: 700px; }
.ojpc-event-hero-meta {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .75rem;
    flex-wrap: wrap;
}
.ojpc-event-hero-champ {
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(255,255,255,.65);
}
.ojpc-event-hero-num {
    font-size: .78rem;
    font-weight: 700;
    background: rgba(255,255,255,.12);
    color: rgba(255,255,255,.85);
    border-radius: 20px;
    padding: .15rem .65rem;
}
.ojpc-event-hero-title {
    font-size: clamp(1.5rem, 4vw, 2.4rem);
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 1rem;
    color: #fff;
}

/* Status badge */
.ojpc-event-status-badge {
    display: inline-block;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    padding: .35rem 1rem;
    border-radius: 20px;
}
.ojpc-status-open      { background: #22c55e; color: #fff; }
.ojpc-status-closed    { background: #f59e0b; color: #fff; }
.ojpc-status-completed { background: #6366f1; color: #fff; }
.ojpc-status-draft     { background: rgba(255,255,255,.2); color: rgba(255,255,255,.8); }
.ojpc-status-archived  { background: rgba(255,255,255,.15); color: rgba(255,255,255,.6); }

/* Info cards */
.ojpc-event-card {
    background: var(--ojpc-bg-card);
    border: 1px solid var(--bs-border-color);
    border-radius: .65rem;
    padding: 1rem 1.1rem;
    height: 100%;
    text-align: center;
}
.ojpc-event-card-icon  { font-size: 1.4rem; margin-bottom: .25rem; }
.ojpc-event-card-label { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--bs-secondary-color); margin-bottom: .2rem; }
.ojpc-event-card-value { font-size: 1.1rem; font-weight: 700; color: var(--bs-body-color); line-height: 1.2; }
.ojpc-event-card-sub   { font-size: .8rem; font-weight: 400; color: var(--bs-secondary-color); display: block; }

/* Occupazione */
.ojpc-event-occ { max-width: 480px; }

/* Iscrizione utente corrente */
.ojpc-event-my-reg { margin-bottom: 1rem; }
.ojpc-event-my-reg--confirmed,
.ojpc-event-my-reg--pending,
.ojpc-event-my-reg--wait {
    display: inline-block;
    font-size: .88rem;
    font-weight: 600;
    padding: .55rem 1.1rem;
    border-radius: .5rem;
}
.ojpc-event-my-reg--confirmed { background: rgba(34,197,94,.12); color: #16a34a; border: 1px solid rgba(34,197,94,.3); }
.ojpc-event-my-reg--pending   { background: rgba(245,158,11,.1);  color: #b45309; border: 1px solid rgba(245,158,11,.3); }
.ojpc-event-my-reg--wait      { background: rgba(99,102,241,.1);  color: #4338ca; border: 1px solid rgba(99,102,241,.25); }
[data-bs-theme="dark"] .ojpc-event-my-reg--confirmed { color: #4ade80; }
[data-bs-theme="dark"] .ojpc-event-my-reg--pending   { color: #fbbf24; }
[data-bs-theme="dark"] .ojpc-event-my-reg--wait      { color: #818cf8; }

/* Section header */
.ojpc-event-section-title {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--bs-secondary-color);
    margin-bottom: 1rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--bs-border-color);
}

/* Round cards */
.ojpc-event-round-card {
    background: var(--ojpc-bg-card);
    border: 1px solid var(--bs-border-color);
    border-radius: .65rem;
    padding: 1.25rem 1.25rem 1rem;
    height: 100%;
}
.ojpc-event-round-num {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--bs-secondary-color);
    margin-bottom: .35rem;
}
.ojpc-event-round-time {
    font-size: .95rem;
    font-weight: 700;
    color: var(--bs-body-color);
    margin-bottom: .35rem;
}
.ojpc-event-round-count {
    font-size: .8rem;
    color: var(--bs-secondary-color);
}

/* Podio */
.ojpc-event-podium {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: .5rem;
    padding: 1rem 0 0;
}
.ojpc-event-podium-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    max-width: 180px;
}
.ojpc-event-podium-medal { font-size: 2rem; margin-bottom: .35rem; }
.ojpc-event-podium-name  { font-size: .78rem; font-weight: 600; text-align: center; margin-bottom: .3rem; word-break: break-word; }
.ojpc-event-podium-time  { font-size: .82rem; font-weight: 700; margin-bottom: .5rem; }
.ojpc-event-podium-bar {
    width: 100%;
    border-radius: .35rem .35rem 0 0;
}
.ojpc-event-podium-bar--1 { height: 80px; background: linear-gradient(180deg, #f9d44a, #d4a017); }
.ojpc-event-podium-bar--2 { height: 55px; background: linear-gradient(180deg, #d0d8e8, #9aaabf); }
.ojpc-event-podium-bar--3 { height: 40px; background: linear-gradient(180deg, #d08c60, #a0623a); }

.ojpc-how-step-tag {
    display: inline-block;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), .1);
    padding: .15rem .55rem;
    border-radius: 999px;
    margin-bottom: .45rem;
}
[data-bs-theme="dark"] .ojpc-how-step-tag {
    color: #63a0ff;
    background: rgba(99,160,255,.15);
}

.ojpc-how-step-title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: .35rem;
    line-height: 1.3;
    color: var(--bs-body-color);
}

.ojpc-how-step-text {
    font-size: .88rem;
    color: var(--bs-secondary-color);
    line-height: 1.65;
    margin-bottom: .75rem;
}
.ojpc-how-step-list {
    font-size: .88rem;
    color: var(--bs-secondary-color);
    line-height: 1.65;
    margin-bottom: .75rem;
    padding-left: 1.4rem;
}
.ojpc-how-note {
    font-size: .84rem;
    line-height: 1.6;
    background: var(--ojpc-bg-sub);
    border-left: 3px solid var(--bs-warning);
    border-radius: .4rem;
    padding: .75rem 1rem;
    margin-top: .5rem;
    color: var(--bs-body-color);
}
.ojpc-how-ranking-box {
    background: var(--ojpc-bg-sub);
    border-radius: .75rem;
    padding: 1.75rem 2rem;
    border: 1px solid var(--bs-border-color);
}

/* ════════════════════════════════════════════════════
   FUSO ORARIO — .ojpc-etime
   ════════════════════════════════════════════════════ */
.ojpc-etime {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .25rem .4rem;
    line-height: 1.4;
}
.ojpc-etime-official {
    font-weight: 600;
    white-space: nowrap;
}
.ojpc-etime-sep {
    color: var(--bs-secondary-color);
    font-weight: 400;
    opacity: .6;
}
.ojpc-etime-ltime {
    white-space: nowrap;
    color: var(--bs-secondary-color);
}
.ojpc-etime-label {
    font-size: .8em;
    opacity: .75;
}

/* ══════════════════════════════════════════════════════════════════════
   TV MODE — layout comune
   ══════════════════════════════════════════════════════════════════════ */
.ojpc-tv-body {
    background: #0a0a0a;
    color: #f0f0f0;
    min-height: 100vh;
    overflow: hidden;
    font-family: Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    user-select: none;
}

@keyframes ojpc-tv-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: .25; }
}

.ojpc-tv-dot {
    display: inline-block;
    width: .65rem;
    height: .65rem;
    border-radius: 50%;
    background: #444;
}
.ojpc-tv-dot--running {
    background: #4ade80;
    animation: ojpc-tv-pulse 1.4s ease-in-out infinite;
}

/* ══════════════════════════════════════════════════════════════════════
   TV MODE 2 — timer fullscreen
   ══════════════════════════════════════════════════════════════════════ */
.ojpc-tv2-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    position: relative;
    gap: 1.5rem;
}

.ojpc-tv2-label {
    position: absolute;
    top: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: clamp(.9rem, 1.8vw, 1.4rem);
    color: #555;
    white-space: nowrap;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-align: center;
}

.ojpc-tv2-clock {
    font-family: 'Arial Black', Arial, sans-serif;
    font-size: clamp(5rem, 26vw, 30rem);
    font-weight: 900;
    line-height: 1;
    color: #d0d0d0;
    letter-spacing: -.03em;
}
.ojpc-tv2-clock--running { color: #4ade80; }

.ojpc-tv2-status {
    position: absolute;
    bottom: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .95rem;
    color: #555;
    letter-spacing: .14em;
    text-transform: uppercase;
}

/* ══════════════════════════════════════════════════════════════════════
   TV MODE 1 — timer + classifica combinata
   ══════════════════════════════════════════════════════════════════════ */
.ojpc-tv1-wrap {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    background: #080808;
}

/* Sezione timer — 58.5 vh */
.ojpc-tv1-top {
    height: 58.5vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
    background: radial-gradient(ellipse at 50% 45%, #141414 0%, #080808 75%);
}

/* Separatore dorato tra timer e classifica */
.ojpc-tv1-top::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 8%;
    width: 84%;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #d4af37 30%, #d4af37 70%, transparent 100%);
    opacity: .45;
}

.ojpc-tv1-meta {
    position: absolute;
    top: 2vh;
    left: 50%;
    transform: translateX(-50%);
    font-size: clamp(.65rem, 1.1vw, .95rem);
    color: #888;
    white-space: nowrap;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-family: Arial, sans-serif;
    font-weight: 400;
}

.ojpc-tv1-meta-sep { margin: 0 .7em; color: #d4af37; opacity: .5; }

.ojpc-tv1-clock {
    font-family: 'Arial Black', Arial, sans-serif;
    font-size: clamp(5rem, 18vw, 20rem);
    font-weight: 900;
    line-height: 1;
    color: #d8d8d8;
    letter-spacing: -.03em;
    transition: color .6s ease, text-shadow .6s ease;
}
.ojpc-tv1-clock--running {
    color: #4ade80;
    text-shadow: 0 0 100px rgba(74, 222, 128, .18);
}

.ojpc-tv1-status {
    position: absolute;
    bottom: 2.5vh;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: clamp(.6rem, .85vw, .78rem);
    color: #555;
    letter-spacing: .22em;
    text-transform: uppercase;
    font-family: Arial, sans-serif;
}

/* Sezione classifica */
.ojpc-tv1-bottom {
    flex: 1;
    overflow: hidden;
    position: relative;
    background: #060606;
    display: flex;
    flex-direction: column;
}

/* Header colonne classifica */
.ojpc-tv1-col-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    flex-shrink: 0;
    border-bottom: 1px solid #181818;
}
.ojpc-tv1-col-header-inner {
    display: grid;
    grid-template-columns: 1.8em 1.6em 1fr 2.8em 7em;
    gap: .4em;
    padding: .35vh .75vw;
    font-size: clamp(.45rem, .8vh, .6rem);
    color: #444;
    letter-spacing: .15em;
    text-transform: uppercase;
    font-family: Arial, sans-serif;
}
.ojpc-tv1-col-header-inner:first-child { border-right: 1px solid #181818; }
.ojpc-tv1-th-time   { text-align: right; }
.ojpc-tv1-th-turno  { text-align: center; }

.ojpc-tv1-page {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ojpc-tv1-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    flex: 1;
    overflow: hidden;
}

.ojpc-tv1-col {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    overflow: hidden;
}

.ojpc-tv1-col:first-child {
    border-right: 1px solid #181818;
}

.ojpc-tv1-row {
    display: grid;
    grid-template-columns: 1.8em 1.6em 1fr 2.8em 7em;
    gap: .4em;
    align-items: center;
    padding: .45vh .75vw;
    border-bottom: 1px solid #131313;
    font-size: clamp(1.3rem, 2.7vh, 2rem);
    color: #efefef;
    border-left: 3px solid transparent;
}

/* Accent laterale top 3 */
.ojpc-tv1-row--rank-1 { border-left-color: #d4af37; background: rgba(212,175,55,.04); }
.ojpc-tv1-row--rank-2 { border-left-color: #9ca3af; background: rgba(156,163,175,.03); }
.ojpc-tv1-row--rank-3 { border-left-color: #b06e38; background: rgba(176,110,56,.03); }

/* Righe alternate */
.ojpc-tv1-col > .ojpc-tv1-row:nth-child(even) { background: rgba(255,255,255,.018); }
.ojpc-tv1-row--rank-1:nth-child(even) { background: rgba(212,175,55,.06); }
.ojpc-tv1-row--rank-2:nth-child(even) { background: rgba(156,163,175,.045); }
.ojpc-tv1-row--rank-3:nth-child(even) { background: rgba(176,110,56,.045); }

.ojpc-tv1-row--pending { color: #888; }
.ojpc-tv1-row--dnf     { color: #555; }

.ojpc-tv1-rn {
    font-weight: 700;
    color: #e0e0e0;
    text-align: right;
    font-size: .85em;
}
.ojpc-tv1-rn.ojpc-tv1-rank--1 { color: #d4af37; }
.ojpc-tv1-rn.ojpc-tv1-rank--2 { color: #b8bfc8; }
.ojpc-tv1-rn.ojpc-tv1-rank--3 { color: #c4885a; }

.ojpc-tv1-flag  { display: flex; align-items: center; }
.ojpc-tv1-name  { font-weight: 600; color: #f2f2f2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ojpc-tv1-turno { font-size: .72em; color: #777; text-align: center; white-space: nowrap; letter-spacing: .04em; }

.ojpc-tv1-time {
    font-family: 'Arial Black', Arial, sans-serif;
    font-weight: 900;
    font-size: .85em;
    text-align: right;
    color: #4ade80;
    white-space: nowrap;
}
.ojpc-tv1-time--pending { color: #555; font-family: Arial, sans-serif; font-weight: 400; }
.ojpc-tv1-time--dnf     { color: #3a3a3a; font-family: Arial, sans-serif; font-weight: 400; }

.ojpc-tv1-page-counter {
    text-align: right;
    padding: .2vh .8vw;
    font-size: clamp(.45rem, .75vh, .6rem);
    color: #333;
    flex-shrink: 0;
    letter-spacing: .12em;
}


/* ── Back link navigation ───────────────────────────────────── */
.ojpc-back-link {
    display: inline-flex;
    align-items: center;
    font-size: .875rem;
    color: var(--bs-secondary-color);
    text-decoration: none;
    margin-bottom: 1.25rem;
}
.ojpc-back-link:hover {
    color: var(--bs-body-color);
    text-decoration: underline;
}

/* ── Auth pages (login / register / forgot / reset) ──────────── */

.ojpc-auth-wrap {
    min-height: calc(100vh - 130px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1rem;
}

.ojpc-auth-card-outer {
    width: 100%;
    max-width: 440px;
}

.ojpc-auth-logo {
    max-height: 52px;
    width: auto;
}

.ojpc-auth-card {
    border-radius: 1rem !important;
    border-top: 3px solid var(--bs-primary) !important;
    background-color: var(--ojpc-surface);
    box-shadow: 0 4px 24px rgba(0, 0, 0, .10) !important;
}

/* Light: card bianca su sfondo grigio chiaro — contrasto netto */
@media (prefers-color-scheme: light) {
    .ojpc-auth-wrap { background-color: transparent; }
}
[data-bs-theme="light"] .ojpc-auth-card {
    background-color: #ffffff;
    box-shadow: 0 6px 28px rgba(0, 0, 0, .13) !important;
}
[data-bs-theme="light"] .ojpc-auth-wrap {
    background-color: transparent;
}
[data-bs-theme="light"] .ojpc-auth-input {
    background-color: #f5f6f8;
    border-color: #d0d5dd;
}
[data-bs-theme="light"] .ojpc-auth-input:focus {
    background-color: #ffffff;
}

.ojpc-auth-title {
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: 1.75rem;
    color: var(--bs-body-color);
}

.ojpc-auth-input {
    border-radius: .6rem;
    background-color: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color);
    transition: border-color .2s, box-shadow .2s;
}
.ojpc-auth-input:focus {
    background-color: var(--ojpc-surface);
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .15);
}

.ojpc-auth-btn {
    border-radius: .6rem;
    font-weight: 600;
    letter-spacing: .02em;
    padding-top: .75rem;
    padding-bottom: .75rem;
}

.ojpc-auth-forgot {
    color: var(--bs-secondary-color);
    text-decoration: none;
    font-size: .8rem;
}
.ojpc-auth-forgot:hover {
    color: var(--bs-primary);
    text-decoration: underline;
}

.ojpc-auth-divider {
    border-color: var(--bs-border-color-translucent);
    margin: 1.5rem 0 1.25rem;
}

/* Dark: card con sfondo elevato rispetto al body scuro */
[data-bs-theme="dark"] .ojpc-auth-card {
    background-color: #1e2228;
    box-shadow: 0 8px 36px rgba(0, 0, 0, .55) !important;
}
[data-bs-theme="dark"] .ojpc-auth-input {
    background-color: #14171c;
    border-color: #2e333b;
    color: var(--bs-body-color);
}
[data-bs-theme="dark"] .ojpc-auth-input:focus {
    background-color: #14171c;
    border-color: var(--bs-primary);
}

/* ══════════════════════════════════════════════════
   USER LAYOUT — sidebar + navbar avatar/bell
   ══════════════════════════════════════════════════ */

/* ── Navbar: avatar + bell ─────────────────────── */
.ojpc-nav-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--bs-border-color);
    transition: border-color .15s;
    display: block;
}
.ojpc-nav-avatar:hover { border-color: var(--bs-primary); }
.ojpc-nav-avatar-toggle.dropdown-toggle::after { display: none; }
.ojpc-nav-avatar-link { display: flex; align-items: center; }
.ojpc-nav-avatar-link .ojpc-nav-avatar:hover { border-color: var(--bs-primary); }

/* Avatar sempre ultimo a destra su desktop */
@media (min-width: 992px) {
    .ojpc-nav-user-controls {
        order: 99;
    }
    .navbar-collapse {
        order: 2;
    }
}

.ojpc-sidebar-avatar-toggle {
    background: none;
    border: none;
    padding: 0 .5rem 0 0;
    cursor: pointer;
    flex-shrink: 0;
    align-self: stretch;
    display: flex;
    align-items: center;
}
.ojpc-sidebar-avatar-toggle-img {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--bs-border-color);
    display: block;
    transition: border-color .15s;
}
.ojpc-sidebar-avatar-toggle:focus { outline: none; }
.ojpc-sidebar-avatar-toggle:focus-visible .ojpc-sidebar-avatar-toggle-img {
    border-color: var(--bs-primary);
}

.ojpc-nav-bell {
    background: none;
    border: none;
    color: var(--bs-secondary-color);
    padding: 0 .45rem;
    height: 40px;
    border-radius: .4rem;
    display: flex;
    align-items: center;
    opacity: .6;
    cursor: default;
}

/* ── User body ─────────────────────────────────── */
.ojpc-user-body {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background: var(--ojpc-bg-page);
}
.ojpc-user-layout {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* ── User sidebar ──────────────────────────────── */
.ojpc-user-sidebar {
    width: 280px;
    flex-shrink: 0;
    background: #2b3035;
    border-right: 1px solid var(--ojpc-sidebar-border);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 100;
    transition: transform .25s ease;
}

/* ── Sidebar header ────────────────────────────── */
.ojpc-user-sidebar-head {
    padding: 1.1rem 1rem .9rem;
    display: flex;
    align-items: center;
    gap: .8rem;
    flex-shrink: 0;
}
.ojpc-user-sidebar-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,.12);
    flex-shrink: 0;
}
.ojpc-user-sidebar-info {
    min-width: 0;
    flex: 1;
}
.ojpc-user-sidebar-name {
    font-size: .85rem;
    font-weight: 600;
    color: var(--ojpc-sidebar-text-hover);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ojpc-user-sidebar-email {
    font-size: .7rem;
    color: var(--ojpc-sidebar-text);
    opacity: .65;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ojpc-user-nav-link--logout,
.ojpc-user-nav-link--logout:visited {
    color: #c05252;
    border-bottom: 1px solid var(--ojpc-sidebar-border);
}
.ojpc-user-nav-link--logout:hover {
    color: #d06464;
    background-color: rgba(192, 82, 82, .1);
}

/* ── Sidebar nav ───────────────────────────────── */
.ojpc-user-nav {
    padding: .75rem .6rem;
    display: flex;
    flex-direction: column;
    gap: .1rem;
    flex: 1;
}
.ojpc-user-nav-label {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ojpc-sidebar-text);
    padding: .5rem .65rem .25rem;
    opacity: .55;
}
.ojpc-user-nav-link {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .7rem;
    color: #fff;
    text-decoration: none;
    border-radius: .5rem;
    font-size: .875rem;
    font-weight: 500;
    transition: background .15s, color .15s;
    white-space: nowrap;
    position: relative;
}
.ojpc-user-nav-link:hover {
    background: rgba(255,255,255,.08);
    color: #fff;
}
.ojpc-user-nav-link--active {
    background: var(--ojpc-sidebar-active-bg);
    color: var(--ojpc-sidebar-active-text);
    font-weight: 600;
}
.ojpc-user-nav-link--soon {
    opacity: .5;
    cursor: default;
}
.ojpc-user-nav-link--soon:hover {
    background: none;
    color: var(--ojpc-sidebar-text);
}
.ojpc-user-nav-icon {
    width: 20px;
    text-align: center;
    flex-shrink: 0;
    font-size: .95rem;
    opacity: .85;
}

/* ── Red dot ───────────────────────────────────── */
.ojpc-user-nav-dot {
    width: 8px;
    height: 8px;
    background: #e53e3e;
    border-radius: 50%;
    margin-left: auto;
    flex-shrink: 0;
    box-shadow: 0 0 6px rgba(229,62,62,.6);
    animation: ojpc-dot-pulse 2s ease-in-out infinite;
}
@keyframes ojpc-dot-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .4; }
}

/* ── Sidebar footer ────────────────────────────── */
.ojpc-user-sidebar-footer {
    padding: .6rem;
    border-top: 1px solid var(--ojpc-sidebar-border);
    display: flex;
    flex-direction: column;
    gap: .1rem;
    flex-shrink: 0;
}
.ojpc-user-footer-link {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .45rem .75rem;
    color: var(--ojpc-sidebar-text);
    text-decoration: none;
    border-radius: .5rem;
    font-size: .82rem;
    transition: background .15s, color .15s;
}
.ojpc-user-footer-link:hover {
    background: rgba(255,255,255,.06);
    color: var(--ojpc-sidebar-text-hover);
}
.ojpc-user-footer-link--logout:hover { color: #d06464; }

/* ── Main content ──────────────────────────────── */
.ojpc-user-main {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    background: var(--ojpc-bg-page);
}
.ojpc-user-content {
    padding: 1.75rem;
    flex: 1;
    max-width: 1320px;
}

/* ── User content: tipografia uniforme ─────────── */
.ojpc-user-content h1 {
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--bs-emphasis-color);
    margin-bottom: .25rem;
}
.ojpc-user-content h2 {
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--bs-emphasis-color);
}
.ojpc-user-content h3 {
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--bs-emphasis-color);
}
.ojpc-page-sub {
    font-size: .875rem;
    color: var(--bs-secondary-color);
    margin-bottom: 1.5rem;
    margin-top: .2rem;
}
.ojpc-section-label {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    margin-bottom: .75rem;
}

/* ── User content: card uniformi ───────────────── */
.ojpc-user-content .card {
    border-radius: .75rem;
    border: 1px solid var(--bs-border-color-translucent);
}
.ojpc-user-content .card.shadow-sm {
    box-shadow: 0 1px 4px rgba(0,0,0,.06) !important;
}
[data-bs-theme="dark"] .ojpc-user-content .card {
    border-color: var(--bs-border-color);
    box-shadow: none !important;
}

/* ── User Seasonal: card partecipazione ────────────── */
.ojpc-seasonal-card {
    border-left: 3px solid var(--bs-border-color-translucent) !important;
    transition: transform .15s, box-shadow .15s;
}
.ojpc-seasonal-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,.08) !important;
}
.ojpc-seasonal-card--gold   { border-left-color: gold !important; }
.ojpc-seasonal-card--silver { border-left-color: silver !important; }
.ojpc-seasonal-card--bronze { border-left-color: #cd7f32 !important; }

[data-bs-theme="dark"] .ojpc-seasonal-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,.3) !important;
}

.ojpc-seasonal-year {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--bs-secondary-color);
    line-height: 1;
}
.ojpc-seasonal-rank-num {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--bs-emphasis-color);
}
.ojpc-seasonal-pts {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--bs-emphasis-color);
    line-height: 1.1;
}
.ojpc-seasonal-list-year {
    font-size: 1rem;
    font-weight: 700;
    color: var(--bs-secondary-color);
    min-width: 3rem;
}

/* sidebar toggle: usa classe Bootstrap navbar-toggler, nessuno stile custom necessario */

/* ── Navbar desktop: spaziatura link ───────────── */
@media (min-width: 992px) {
    .ojpc-navbar .navbar-nav.me-auto {
        gap: .5rem;
    }
}

/* ── Logo centrato su mobile nell'area utente ──────── */
@media (max-width: 991.98px) {
    .ojpc-navbar-brand-user {
        flex: 1;
        text-align: center;
        margin: 0 !important;
    }
}

/* ── Overlay mobile ────────────────────────────── */
.ojpc-user-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 1039;
    cursor: pointer;
}

/* ── Coming soon section ───────────────────────── */
.ojpc-user-soon-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
}
.ojpc-user-soon-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: .5;
}

/* ── Mobile breakpoint ─────────────────────────── */
@media (max-width: 991.98px) {
    .ojpc-user-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 1040;
        transform: translateX(-280px);
    }
    .ojpc-user-sidebar.is-open {
        transform: translateX(0);
    }
    .ojpc-user-content {
        padding: 1rem 1rem calc(3rem + env(safe-area-inset-bottom, 0px));
        max-width: 100%;
    }
}

/* ── User sidebar: light mode override ─────────── */
[data-bs-theme="light"] .ojpc-user-sidebar {
    background: var(--ojpc-bg-sub);
    border-right-color: rgba(0,0,0,.09);
}
[data-bs-theme="light"] .ojpc-user-sidebar-head {
    border-bottom-color: rgba(0,0,0,.09);
}
[data-bs-theme="light"] .ojpc-user-sidebar-name {
    color: #1e293b;
}
[data-bs-theme="light"] .ojpc-user-sidebar-email {
    color: #64748b;
}
[data-bs-theme="light"] .ojpc-user-nav-label {
    color: #94a3b8;
}
[data-bs-theme="light"] .ojpc-user-nav-link {
    color: #334155;
}
[data-bs-theme="light"] .ojpc-user-nav-link:hover {
    background: rgba(0,0,0,.05);
    color: #1e293b;
}
[data-bs-theme="light"] .ojpc-user-nav-link--active {
    background: rgba(37,99,235,.1);
    color: #1d4ed8;
}
[data-bs-theme="light"] .ojpc-user-nav-link--soon {
    color: #334155;
}

/* ── YouTube Live section ───────────────────────── */
.ojpc-yt-card {
    border: 1px solid rgba(255, 0, 0, .18) !important;
    background-color: rgba(255, 0, 0, .04) !important;
}
[data-bs-theme="dark"] .ojpc-yt-card {
    background-color: rgba(255, 0, 0, .07) !important;
}
.ojpc-yt-event-title {
    font-size: .95rem;
    font-weight: 700;
    margin-bottom: .75rem;
    letter-spacing: .01em;
}
.ojpc-yt-round-card {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    height: 100%;
}
.ojpc-yt-thumb-wrap {
    position: relative;
    display: block;
    width: 100%;
    border-radius: .5rem;
    overflow: hidden;
    height: 169px;
    background: #000;
    text-decoration: none;
}
.ojpc-yt-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity .2s;
}
.ojpc-yt-thumb-wrap:hover .ojpc-yt-thumb {
    opacity: .75;
}
.ojpc-yt-play-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.ojpc-yt-play-icon svg {
    width: 52px;
    height: 37px;
    filter: drop-shadow(0 1px 4px rgba(0,0,0,.45));
    transition: transform .2s;
}
.ojpc-yt-thumb-wrap:hover .ojpc-yt-play-icon svg {
    transform: scale(1.1);
}
.ojpc-yt-play-bg  { fill: #ff0000; }
.ojpc-yt-play-arrow { fill: #fff; }
.ojpc-yt-round-info {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    flex: 1;
}
.ojpc-yt-video-title {
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.35;
    min-height: 2.1em;
    color: var(--bs-body-color);
}
.ojpc-yt-round-date {
    display: flex;
    flex-direction: column;
    gap: .1rem;
}
.ojpc-yt-round-label {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--bs-secondary-color, #6c757d);
}
.ojpc-yt-round-datetime {
    font-size: .82rem;
    color: var(--bs-body-color);
    font-weight: 500;
}
.ojpc-yt-watch-btn {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    font-weight: 600;
}
.ojpc-yt-btn-icon {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
}

/* ── Cookie Banner & Modal (GDPR Garante) ───────── */
.ojpc-cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1080;
    background: var(--ojpc-cb-bg, var(--bs-body-bg));
    color: var(--ojpc-cb-text, var(--bs-body-color));
    border-top: 1px solid var(--bs-border-color);
    box-shadow: 0 -4px 24px rgba(0,0,0,.12);
    padding: 1rem 1.25rem;
    animation: ojpc-cookie-slide-up .3s ease;
}
@keyframes ojpc-cookie-slide-up {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
.ojpc-cookie-banner-inner {
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}
.ojpc-cookie-banner-text {
    flex: 1 1 320px;
}
.ojpc-cookie-policy-link {
    color: var(--bs-primary);
    text-decoration: underline;
    white-space: nowrap;
}
.ojpc-cookie-banner-actions {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    align-items: center;
    flex-shrink: 0;
}
.ojpc-cookie-btn-reject {
    background: var(--ojpc-cb-rej-bg, transparent);
    border: 1px solid var(--ojpc-cb-rej-border, var(--bs-border-color));
    color: var(--ojpc-cb-rej-text, var(--bs-body-color));
}
.ojpc-cookie-btn-reject:hover {
    filter: brightness(.92);
    color: var(--ojpc-cb-rej-text, var(--bs-body-color));
}
.ojpc-cookie-btn-customize {
    background: var(--ojpc-cb-cust-bg, transparent);
    border: 1px solid var(--ojpc-cb-cust-border, var(--bs-primary));
    color: var(--ojpc-cb-cust-text, var(--bs-primary));
}
.ojpc-cookie-btn-customize:hover {
    filter: brightness(.92);
    color: var(--ojpc-cb-cust-text, var(--bs-primary));
}
.ojpc-cookie-btn-accept {
    background: var(--ojpc-cb-acc-bg, var(--bs-primary));
    border: 1px solid var(--ojpc-cb-acc-bg, var(--bs-primary));
    color: var(--ojpc-cb-acc-text, #fff);
    font-weight: 600;
}
.ojpc-cookie-btn-accept:hover {
    filter: brightness(1.1);
    color: var(--ojpc-cb-acc-text, #fff);
}
/* Overlay */
.ojpc-cookie-overlay {
    position: fixed;
    inset: 0;
    z-index: 1090;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(2px);
}
/* Modale preferenze */
.ojpc-cookie-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1095;
    width: min(520px, calc(100vw - 2rem));
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
    background: var(--ojpc-surface);
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    box-shadow: 0 8px 40px rgba(0,0,0,.22);
    display: flex;
    flex-direction: column;
}
.ojpc-cookie-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem .75rem;
    border-bottom: 1px solid var(--bs-border-color);
    position: sticky;
    top: 0;
    background: var(--ojpc-surface);
    z-index: 1;
}
.ojpc-cookie-modal-title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
}
.ojpc-cookie-modal-body {
    padding: 1rem 1.25rem;
    flex: 1;
}
.ojpc-cookie-category {
    padding: .75rem 0;
    border-bottom: 1px solid var(--bs-border-color);
}
.ojpc-cookie-category:last-child {
    border-bottom: none;
}
.ojpc-cookie-category-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .35rem;
}
.ojpc-cookie-category-name {
    font-weight: 600;
    font-size: .9rem;
}
.ojpc-cookie-always-on {
    font-size: .65rem;
    vertical-align: middle;
}
.ojpc-cookie-category-desc {
    font-size: .8rem;
    color: var(--bs-secondary-color, #6c757d);
    margin: 0;
    line-height: 1.5;
}
.ojpc-cookie-modal-footer {
    display: flex;
    gap: .5rem;
    justify-content: flex-end;
    padding: .75rem 1.25rem 1rem;
    border-top: 1px solid var(--bs-border-color);
    position: sticky;
    bottom: 0;
    background: var(--ojpc-surface);
}
/* Nascondi elementi con hidden senza interferire con display:flex */
[hidden] { display: none !important; }

/* ── Admin GDPR page ────────────────────────────── */
.ojpc-color-field {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.ojpc-color-pick {
    width: 38px;
    height: 34px;
    padding: 2px;
    border: 1px solid var(--bs-border-color);
    border-radius: .375rem;
    background: none;
    cursor: pointer;
    flex-shrink: 0;
}
.ojpc-gdpr-editor {
    font-family: 'Courier New', monospace;
    font-size: .82rem;
    resize: vertical;
}
.ojpc-gdpr-preview-wrap {
    border: 1px dashed var(--bs-border-color);
    border-radius: .5rem;
    overflow: hidden;
    background: var(--bs-secondary-bg);
    padding: .5rem;
}
.ojpc-gdpr-mode-block {
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    overflow: hidden;
}
.ojpc-gdpr-mode-header {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .35rem .75rem;
    background: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
    border-bottom: 1px solid var(--bs-border-color);
}
.ojpc-gdpr-preview-inner {
    position: relative !important;
    bottom: auto !important;
    animation: none !important;
    box-shadow: none;
    border: 1px solid var(--bs-border-color);
    border-radius: .375rem;
}

/* ── Pagine statiche pubbliche (Privacy / Cookie / Terms) ── */
.ojpc-static-content {
    font-size: .97rem;
    line-height: 1.75;
    color: var(--bs-body-color);
}
.ojpc-static-content h1,
.ojpc-static-content h2,
.ojpc-static-content h3 {
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: .75rem;
}
.ojpc-static-content h2 { font-size: 1.25rem; }
.ojpc-static-content h3 { font-size: 1.05rem; }
.ojpc-static-content p  { margin-bottom: 1rem; }
.ojpc-static-content ul,
.ojpc-static-content ol {
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}
.ojpc-static-content a {
    color: var(--bs-primary);
    text-decoration: underline;
}
.ojpc-static-content table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
    font-size: .88rem;
}
.ojpc-static-content th,
.ojpc-static-content td {
    border: 1px solid var(--bs-border-color);
    padding: .5rem .75rem;
    text-align: left;
    vertical-align: top;
}
.ojpc-static-content th {
    background: var(--bs-secondary-bg);
    font-weight: 600;
}

/* ── Notifiche utente ────────────────────────────── */
.ojpc-notif-prefs-card {
    background: var(--ojpc-bg-card);
}
.ojpc-notif-pref-icon {
    font-size: 1.5rem;
    line-height: 1;
}
.ojpc-notif-prefs-hint {
    border-top: 1px solid var(--bs-border-color-translucent);
    padding-top: .75rem;
}

.ojpc-notif-card {
    background: var(--ojpc-bg-card);
    transition: box-shadow .15s, background .15s;
}

/* Card notifica non letta — sfondo verde brillante, si adatta ai temi */
.ojpc-notif-card--new {
    border-left: 4px solid #1db954 !important;
    background: #e6f9ee !important;
}
[data-bs-theme="dark"] .ojpc-notif-card--new {
    background: #0d3320 !important;
    border-left-color: #23d160 !important;
}
.ojpc-notif-card--new .card-body {
    border-radius: .375rem;
}

.ojpc-notif-img-wrap {
    width: 64px;
    height: 64px;
    border-radius: .5rem;
    overflow: hidden;
    background: var(--ojpc-bg-sub);
    flex-shrink: 0;
}
.ojpc-notif-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ojpc-notif-badge-new {
    background-color: #1db954;
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    padding: .25em .5em;
    border-radius: .25rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}
[data-bs-theme="dark"] .ojpc-notif-badge-new {
    background-color: #23d160;
    color: #0a1f0f;
}

/* ── Admin — Palette editor ──────────────────────── */
.ojpc-palette-swatch {
    width: 2rem;
    height: 2rem;
    border-radius: .375rem;
    border: 1px solid var(--bs-border-color);
    display: inline-block;
    flex-shrink: 0;
    vertical-align: middle;
}
.ojpc-palette-hex {
    font-family: var(--bs-font-monospace);
    font-size: .8rem;
    color: var(--bs-secondary-color);
}
.ojpc-palette-preview-wrap {
    border-radius: .5rem;
    overflow: hidden;
    border: 1px solid var(--bs-border-color);
}
.ojpc-palette-preview-page {
    padding: 1rem;
}
.ojpc-palette-preview-card {
    border-radius: .375rem;
    padding: .75rem;
    margin-bottom: .5rem;
}
.ojpc-palette-preview-sub {
    border-radius: .25rem;
    padding: .5rem .75rem;
    margin-bottom: .375rem;
}
.ojpc-palette-preview-hover {
    border-radius: .25rem;
    padding: .375rem .75rem;
}
.ojpc-palette-preview-label {
    font-size: .75rem;
    font-weight: 600;
    opacity: .6;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* ── WIP puzzle piece ────────────────────────────── */
.ojpc-wip-puzzle {
    display: inline-block;
}
.ojpc-wip-puzzle-svg {
    width: 90px;
    height: 90px;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,.25));
}

/* ── Badge & Obiettivi ───────────────────────────── */
.ojpc-badge-card {
    background: var(--ojpc-surface);
    transition: box-shadow .15s;
}
.ojpc-badge-card--unlocked {
    border-left: 3px solid var(--bs-primary) !important;
}
.ojpc-badge-card--locked {
    opacity: .7;
}
.ojpc-badge-img-wrap img {
    border-radius: 50%;
    object-fit: contain;
}
.ojpc-badge-img-wrap--locked img {
    filter: grayscale(1) opacity(.55);
}
.ojpc-badge-progress-wrap {
    height: 6px;
    background: var(--ojpc-bg-hover);
    border-radius: 4px;
    overflow: hidden;
}
.ojpc-badge-progress-bar {
    height: 100%;
    border-radius: 4px;
    transition: width .4s ease;
    min-width: 2px;
}
.ojpc-badge-progress-bar--green {
    background: hsl(120, 55%, 40%);
}
.ojpc-badge-progress-label {
    color: hsl(120, 50%, 35%);
    font-size: .7rem;
}
.ojpc-badge-level {
    background: var(--bs-primary);
    font-size: .65rem;
    padding: .15em .45em;
}
.ojpc-badge-reward {
    background: var(--ojpc-bg-sub);
    border-radius: .5rem;
    padding: .5rem .65rem;
}
.ojpc-badge-reward-label {
    display: block;
    font-size: .7rem;
    color: var(--bs-secondary-color);
    margin-bottom: .2rem;
}
.ojpc-badge-reward-code {
    font-size: .85rem;
    font-weight: 700;
    color: var(--bs-success);
    letter-spacing: .04em;
    user-select: all;
}

/* ── Grafico tempi velocità ────────────────────────────────────────────── */
.ojpc-speed-chart-wrap {
    position: relative;
    height: 220px;
    margin-bottom: 1rem;
}
.ojpc-best-time-card {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    background: var(--ojpc-bg-sub);
    border-radius: .75rem;
    padding: .65rem 1.1rem;
    margin-bottom: 1.25rem;
}
.ojpc-best-time-icon {
    font-size: 1.4rem;
    line-height: 1;
}
.ojpc-best-time-value {
    font-size: 1.25rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: hsl(120, 50%, 38%);
}
[data-bs-theme="dark"] .ojpc-best-time-value {
    color: hsl(120, 55%, 55%);
}
.ojpc-best-time-label {
    font-size: .78rem;
    color: var(--bs-secondary-color);
    line-height: 1.3;
}
.ojpc-stat-sub {
    font-size: .65em;
    font-weight: 400;
    color: var(--bs-secondary-color);
}

/* ── Newsletter / Comunicazioni ────────────────────── */
.ojpc-newsletter-target-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .78rem;
    font-weight: 600;
    padding: .2rem .55rem;
    border-radius: 1rem;
    background: var(--ojpc-bg-sub);
    color: var(--bs-secondary-color);
}
.ojpc-newsletter-status-draft {
    display: inline-block;
    font-size: .75rem;
    font-weight: 700;
    padding: .2rem .5rem;
    border-radius: .35rem;
    background: hsl(40,90%,88%);
    color: hsl(40,80%,30%);
}
[data-bs-theme="dark"] .ojpc-newsletter-status-draft {
    background: hsl(40,50%,25%);
    color: hsl(40,80%,75%);
}
.ojpc-newsletter-status-sent {
    display: inline-block;
    font-size: .75rem;
    font-weight: 700;
    padding: .2rem .5rem;
    border-radius: .35rem;
    background: hsl(140,60%,88%);
    color: hsl(140,60%,25%);
}
[data-bs-theme="dark"] .ojpc-newsletter-status-sent {
    background: hsl(140,40%,20%);
    color: hsl(140,60%,65%);
}
.ojpc-newsletter-body {
    font-family: 'Courier New', Courier, monospace;
    font-size: .88rem;
}
.ojpc-newsletter-template-editor {
    font-family: 'Courier New', Courier, monospace;
    font-size: .82rem;
    line-height: 1.5;
    resize: vertical;
    min-height: 420px;
}
.ojpc-newsletter-ph-code {
    background: var(--bs-secondary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: .25rem;
    padding: .15rem .4rem;
    font-size: .8rem;
    color: var(--bs-danger);
    user-select: all;
}


/* ── Newsletter test card ───────────────────────────── */
.ojpc-newsletter-test-card {
    border: 1.5px dashed var(--bs-border-color) !important;
    background: var(--ojpc-bg-sub);
}

/* ── Newsletter card (account page) ────────────────── */
.ojpc-newsletter-card {
    background: hsl(48, 100%, 94%);
    border-left: 4px solid hsl(45, 95%, 55%) !important;
}
[data-bs-theme="dark"] .ojpc-newsletter-card {
    background: hsl(48, 40%, 16%);
    border-left-color: hsl(45, 80%, 45%) !important;
}

.ojpc-newsletter-card--blue {
    background: hsl(205, 90%, 94%);
    border-left-color: hsl(205, 80%, 55%) !important;
}
[data-bs-theme="dark"] .ojpc-newsletter-card--blue {
    background: hsl(205, 40%, 16%);
    border-left-color: hsl(205, 70%, 45%) !important;
}

/* ══════════════════════════════════════════════════════════════
   PAGINA STATISTICHE — /stats
   ══════════════════════════════════════════════════════════════ */

/* Hero block */
.ojpc-stats-hero-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding: 1.5rem 1rem;
    border-radius: var(--bs-border-radius-lg);
    background: var(--ojpc-surface, var(--bs-body-bg));
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    text-align: center;
    transition: transform .18s;
}
.ojpc-stats-hero-card:hover { transform: translateY(-3px); }

.ojpc-stats-hero-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.ojpc-stats-hero-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    color: var(--bs-emphasis-color);
}

.ojpc-stats-hero-label {
    font-size: .8rem;
    color: var(--bs-secondary-color);
    font-weight: 500;
}

/* Did you know? */
.ojpc-dyk-list {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.ojpc-dyk-item {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
}

.ojpc-dyk-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--ojpc-bg-soft, rgba(99,179,237,.12));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    margin-top: .1rem;
}

.ojpc-dyk-title {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--bs-secondary-color);
    margin-bottom: .15rem;
}

.ojpc-dyk-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--bs-emphasis-color);
    line-height: 1.2;
}

.ojpc-dyk-sub {
    font-size: .8rem;
    color: var(--bs-secondary-color);
    margin-top: .15rem;
}

/* World map legend bar */
.ojpc-map-legend-bar {
    flex: 1;
    height: 10px;
    border-radius: 5px;
    background: linear-gradient(to right, #c6e2f5, #1a6fa8);
    min-width: 80px;
    max-width: 220px;
}
[data-bs-theme="dark"] .ojpc-map-legend-bar {
    background: linear-gradient(to right, #2a4a6b, #63b3ed);
}

/* Participant link in stats */
.ojpc-participant-link {
    color: var(--bs-primary);
    text-decoration: none;
    font-weight: 600;
}
.ojpc-participant-link:hover { text-decoration: underline; }

/* ══════════════════════════════════════════════════════════════
   USER RESULTS — radar + percentile
   ══════════════════════════════════════════════════════════════ */

.ojpc-percentile-card {
    border-radius: var(--bs-border-radius-lg);
    background: var(--ojpc-surface, var(--bs-body-bg));
    border: 1px solid var(--bs-border-color);
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.ojpc-percentile-icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(99,179,237,.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.ojpc-percentile-body { flex: 1; }

.ojpc-percentile-label {
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--bs-secondary-color);
    margin-bottom: .25rem;
}

.ojpc-percentile-value {
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1;
    color: var(--bs-emphasis-color);
}

.ojpc-percentile-value-sub {
    font-size: 1rem;
    font-weight: 500;
    color: var(--bs-secondary-color);
}

.ojpc-percentile-sub {
    font-size: .78rem;
    color: var(--bs-secondary-color);
    margin-top: .2rem;
}

.ojpc-percentile-card--grow { flex: 1; }

.ojpc-percentile-icon--flag {
    background: transparent;
    border-radius: var(--bs-border-radius);
    overflow: visible;
}
.ojpc-percentile-flag {
    width: 52px;
    height: 36px;
    object-fit: cover;
    border-radius: 5px;
    display: block;
    box-shadow: 0 1px 5px rgba(0,0,0,.18);
    margin: 0;
}

.ojpc-radar-card {
    border-radius: var(--bs-border-radius-lg);
    background: var(--ojpc-surface, var(--bs-body-bg));
    border: 1px solid var(--bs-border-color);
    padding: 1.25rem 1.5rem;
    height: 100%;
}

.ojpc-radar-wrap {
    position: relative;
    height: 220px;
}

/* ══════════════════════════════════════════════════════════════
   TOURNAMENT — "Chi sarà il favorito?"
   ══════════════════════════════════════════════════════════════ */

.ojpc-favorites-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: .65rem;
}
@media (min-width: 576px) {
    .ojpc-favorites-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
    .ojpc-favorites-grid { grid-template-columns: repeat(3, 1fr); }
}

.ojpc-fav-card {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    text-decoration: none;
    color: inherit;
    background: var(--ojpc-bg-card);
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease;
}
.ojpc-fav-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,.12);
    text-decoration: none;
    color: inherit;
}
.ojpc-fav-card--1st { border-color: rgba(249,212,74,.55); }
.ojpc-fav-card--2nd { border-color: rgba(176,186,206,.65); }
.ojpc-fav-card--3rd { border-color: rgba(192,112,64,.45); }

.ojpc-fav-avatar-area {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .9rem .85rem .9rem .9rem;
    background: #212529;
}
[data-bs-theme="light"] .ojpc-fav-avatar-area {
    background: #f1f3f5;
}

.ojpc-fav-avatar-wrap {
    position: relative;
    width: 72px;
    height: 72px;
}

.ojpc-fav-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    border: 2.5px solid var(--bs-border-color);
    background: var(--ojpc-bg-soft, rgba(0,0,0,.06));
}
.ojpc-fav-card--1st .ojpc-fav-avatar { border-color: #f9d44a; border-width: 3px; }
.ojpc-fav-card--2nd .ojpc-fav-avatar { border-color: #b0bace; }
.ojpc-fav-card--3rd .ojpc-fav-avatar { border-color: #c07040; }
.ojpc-fav-avatar img { width: 100%; height: 100%; object-fit: cover; }

.ojpc-fav-rank-badge {
    position: absolute;
    bottom: -4px;
    right: -7px;
    font-size: 1rem;
    line-height: 1;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
}

/* Pannello dati — sfondo scuro in dark, chiaro in light */
.ojpc-fav-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .25rem;
    padding: .75rem .9rem .75rem 20px;
    background: #212529;
}
[data-bs-theme="light"] .ojpc-fav-body {
    background: #f1f3f5;
}

.ojpc-fav-nameline {
    display: flex;
    align-items: center;
    gap: .3rem;
    flex-wrap: wrap;
}

.ojpc-fav-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--bs-body-color);
    line-height: 1.35;
    word-break: break-word;
}

.ojpc-fav-nick {
    font-size: 1rem;
    font-weight: 400;
    font-style: italic;
    color: var(--bs-secondary-color);
    line-height: 1.35;
}

.ojpc-fav-time {
    font-family: var(--bs-font-monospace);
    font-size: 1rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
}

/* ── Checkbox "Collegamento verificato" admin/users ──────────── */
.ojpc-link-verified-cb { cursor: pointer; }

/* ── Admin LP Stats — grafico visite giornaliere ─────────────── */
.ojpc-lp-chart {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 120px;
    padding-top: 1.5rem;
    overflow-x: auto;
}
.ojpc-lp-chart-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
    min-width: 20px;
    max-width: 48px;
    height: 100%;
}
.ojpc-lp-chart-bar {
    width: 100%;
    background: var(--bs-primary);
    border-radius: 3px 3px 0 0;
    min-height: 2px;
    transition: opacity .15s;
}
.ojpc-lp-chart-col:hover .ojpc-lp-chart-bar { opacity: .75; }
.ojpc-lp-chart-label {
    font-size: .65rem;
    color: var(--bs-secondary-color);
    margin-bottom: 2px;
    min-height: 14px;
}
.ojpc-lp-chart-day {
    font-size: .6rem;
    color: var(--bs-secondary-color);
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
}
.ojpc-lp-progress {
    height: 6px;
    border-radius: 3px;
}
.ojpc-lp-link-row {
    background: var(--ojpc-bg-sub);
    transition: background .15s;
}
.ojpc-lp-link-row:hover {
    background: var(--ojpc-bg-hover);
}