/* Beach+ Arena: colori predefiniti dal logo (azzurro, verde, arancio); tavolozze e temi grafici sardi e beach in fondo al file. */
:root {
  --bg: #f3f8f6;
  --surface: #ffffff;
  --surface-2: #f6faf9;
  --text: #10233a;
  --muted: #586a7c;
  --border: #dde7e9;
  --primary: #0b78b8;
  --primary-ink: #ffffff;
  --primary-soft: #e2f1fa;
  --accent: #5e9a22;
  --accent-soft: #ebf5de;
  --danger: #c0392b;
  --danger-soft: #fcebea;
  --ok: #1e7b4f;
  --ok-soft: #e4f4eb;
  --warn-soft: #fff5d9;
  --men: #0b78b8;
  --women: #c2407e;
  --gold: #d4a017; --silver: #9aa6b2; --bronze: #b87333;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(16, 35, 58, .05), 0 6px 18px rgba(16, 35, 58, .05);
  --nav-h: 66px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #08151c;
    --surface: #0f212b;
    --surface-2: #132936;
    --text: #e6f1f5;
    --muted: #93a9b5;
    --border: #1f3a48;
    --primary: #4fb6ea;
    --primary-ink: #04131c;
    --primary-soft: #11344a;
    --accent: #9bd15a;
    --accent-soft: #23361a;
    --danger: #f07167;
    --danger-soft: #3a1714;
    --ok: #4cc38a;
    --ok-soft: #10301f;
    --warn-soft: #3a2f10;
    --men: #7fc4f0;
    --women: #f07aa8;
    --shadow: none;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 var(--font-body);
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 12px);
}
:root { --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif; --font-head: var(--font-body); }
button, input, select, textarea { font-family: inherit; }
a { color: var(--primary); }
h1, h2, h3, .brand-text strong { font-family: var(--font-head); }
h1 { font-size: 1.6rem; margin: 0 0 .25rem; line-height: 1.2; font-weight: 700; letter-spacing: -.02em; }
h2 { font-size: 1.1rem; margin: 0 0 .75rem; font-weight: 700; letter-spacing: -.01em; }
h3 { font-size: .95rem; margin: 0 0 .5rem; font-weight: 600; }
.ti { vertical-align: -.12em; }
[hidden] { display: none !important; }

/* ---------- barra superiore e navigazione ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px 14px;
  background: var(--surface); color: var(--primary);
}
/* Fascia decorativa sotto la testata: tessitura tradizionale sarda (rombi a gradini con il "pibione"),
   nei colori del logo. I temi grafici possono cambiarla o nasconderla. */
.topbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14' shape-rendering='crispEdges'%3E%3Crect x='0' y='13' width='28' height='1' fill='%238CC63F'/%3E%3Crect x='12' y='1' width='4' height='2' fill='%2329A9E0'/%3E%3Crect x='10' y='3' width='8' height='2' fill='%2329A9E0'/%3E%3Crect x='8' y='5' width='12' height='4' fill='%2329A9E0'/%3E%3Crect x='10' y='9' width='8' height='2' fill='%2329A9E0'/%3E%3Crect x='12' y='11' width='4' height='2' fill='%2329A9E0'/%3E%3Crect x='13' y='6' width='2' height='2' fill='%23F9B040'/%3E%3Crect x='0' y='11' width='4' height='2' fill='%23F9B040'/%3E%3Crect x='0' y='9' width='2' height='2' fill='%23F9B040'/%3E%3Crect x='24' y='11' width='4' height='2' fill='%23F9B040'/%3E%3Crect x='26' y='9' width='2' height='2' fill='%23F9B040'/%3E%3Crect x='3' y='4' width='2' height='2' fill='%238CC63F'/%3E%3Crect x='23' y='4' width='2' height='2' fill='%238CC63F'/%3E%3C/svg%3E") repeat-x left bottom / 28px 14px;
}
.login-link {
  display: inline-flex; align-items: center; gap: 4px; color: var(--primary); text-decoration: none; font-size: .8rem; font-weight: 700;
  padding: 5px 10px; border-radius: 999px; border: 1px solid var(--primary); white-space: nowrap;
}
.login-link .ti { font-size: 1.05rem; }
.login-link:hover { background: var(--primary-soft); }
@media (max-width: 560px) { .login-link .lbl { display: none; } .login-link { padding: 5px 7px; } }

.theme-link { color: var(--primary); font-size: 1.3rem; text-decoration: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 99px; }
.theme-link:hover { background: var(--primary-soft); }

.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.theme-opt {
  display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 12px; cursor: pointer; text-align: left;
  border: 2px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-weight: 600; font-size: .85rem;
}
.theme-opt[aria-pressed="true"] { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.theme-opt .sw { display: flex; height: 34px; border-radius: 8px; overflow: hidden; border: 1px solid rgba(0,0,0,.08); }
.theme-opt .sw span { flex: 1; }
.theme-opt .sw span:first-child { flex: 2; }
.brand { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; margin-right: auto; min-width: 0; }
.brand-logos { display: flex; gap: 6px; flex-shrink: 0; }
.brand-logos img { width: 44px; height: 44px; display: block; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .18)); }
.brand-text { min-width: 0; }
.brand-text strong, .brand-text small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
@media (max-width: 560px) {
  .topbar { gap: 8px; padding: 8px 10px 14px; }
  .brand-logos img { width: 36px; height: 36px; }
  .topbar .brand-text small { display: none; }
  .topbar .brand-text strong { font-size: .95rem; }
  .admin-badge .lbl { display: none; }
  .langs button { padding: 5px 7px; }
}
@media (max-width: 430px) {
  .topbar .brand-text { display: none; }
}
.brand-icon {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: var(--primary); color: var(--primary-ink); font-size: 1.4rem;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-text strong { font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; }
.brand-text small { color: var(--muted); font-size: .72rem; font-weight: 500; }
.admin-badge {
  color: var(--primary); text-decoration: none; font-size: .78rem; font-weight: 700; white-space: nowrap;
  padding: 5px 10px; border-radius: 999px; background: var(--primary-soft);
}
.table.narrow { max-width: 320px; }
code { font-size: .85em; overflow-wrap: anywhere; }
.langs { display: flex; border: 1px solid var(--primary); border-radius: 999px; overflow: hidden; }
.langs button {
  background: transparent; color: var(--primary); border: 0; padding: 6px 10px; font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer;
}
.langs button[aria-pressed="true"] { background: var(--primary); color: var(--primary-ink); }

/* Menu in basso (telefono) */
.mainnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  height: calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding: 6px 6px env(safe-area-inset-bottom);
  background: var(--surface); border-top: 1px solid var(--border);
}
.mainnav a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--muted); text-decoration: none; font-size: .68rem; font-weight: 600;
}
.mainnav .ni { font-size: 1.35rem; width: 52px; height: 30px; display: grid; place-items: center; border-radius: 999px; transition: background .15s; }
.mainnav a.active { color: var(--primary); }
.mainnav a.active .ni { background: var(--primary-soft); }

@media (min-width: 1200px) {
  body { padding-bottom: 32px; }
  .mainnav {
    position: static; display: flex; height: auto; padding: 0; background: transparent; border: 0; gap: 2px;
  }
  .mainnav a { flex-direction: row; color: var(--text); padding: 8px 14px; border-radius: 999px; font-size: .9rem; gap: 6px; }
  .mainnav .ni { font-size: 1.05rem; width: auto; height: auto; background: none !important; }
  .mainnav a:hover { background: var(--surface-2); }
  .mainnav a.active { background: var(--primary-soft); color: var(--primary); }
}
/* Telefono: con molte voci (anche "Campi" e "Profilo") i testi si accorciano invece di sovrapporsi */
@media (max-width: 1199px) {
  /* iPhone (soprattutto il browser interno di Facebook/Instagram): la barra resta su un suo livello
     (le icone non spariscono) e segue il fondo dello schermo visibile (--nav-dy, calcolato in boot.js) */
  .mainnav { transform: translate3d(0, var(--nav-dy, 0px), 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
  /* Safari iPhone: in una barra fissa che scorre di lato il contenuto a volte non viene ridisegnato: ogni voce su un suo livello */
  .mainnav a { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
  html { overscroll-behavior-y: none; }
  .mainnav { padding-left: 2px; padding-right: 2px; }
  .mainnav a { min-width: 0; }
  .mainnav a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 1px; }
  .mainnav .ni { width: min(52px, 100%); }
}
@media (max-width: 420px) { .mainnav a { font-size: .6rem; } }
/* Casetta della prima pagina: solo icona */
.mainnav a.nav-home .ni { font-size: 1.5rem; }
@media (min-width: 1200px) { .mainnav a.nav-home { padding-left: 11px; padding-right: 11px; } .mainnav a.nav-home .ni { font-size: 1.2rem; } }

/* Barra in alto con molte voci: testi su una riga, più compatti sugli schermi medi */
@media (min-width: 1200px) { .mainnav a { white-space: nowrap; } }
@media (min-width: 1200px) and (max-width: 1499px) {
  .topbar { gap: 8px; }
  .mainnav a { padding: 7px 9px; font-size: .84rem; gap: 5px; }
  .topbar .brand-text { display: none; }
}

/* ---------- layout ---------- */
.container { max-width: 1180px; margin: 0 auto; padding: 16px; }
.page-head { margin: 4px 0 16px; }
.page-head.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.page-head .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 2px; }
.back { display: inline-block; margin-bottom: 6px; text-decoration: none; font-size: .9rem; }
.muted { color: var(--muted); }
.small { font-size: .82rem; }
.nowrap { white-space: nowrap; }
.section-title { margin: 20px 0 8px; }

.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 16px; margin-bottom: 16px;
}
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.card-head h2 { margin: 0; }
.cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.tour-card { display: block; color: inherit; text-decoration: none; transition: transform .12s, border-color .12s; }
.tour-card:hover { transform: translateY(-2px); border-color: var(--primary); }
.tour-card h3 { font-size: 1.1rem; margin: 10px 0 4px; }
.tour-card p { margin: 2px 0; }
.tour-card-top { display: flex; gap: 6px; flex-wrap: wrap; }
.empty { text-align: center; padding: 40px 16px; color: var(--muted); }

.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.next-step { display: flex; justify-content: flex-end; margin: 8px 0 16px; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-row.center { justify-content: center; margin-top: 14px; }

/* ---------- badge ---------- */
.badge {
  display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .74rem; font-weight: 700;
  background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); white-space: nowrap;
}
.badge.g-M { color: var(--men); border-color: color-mix(in srgb, var(--men) 35%, transparent); }
.badge.g-F { color: var(--women); border-color: color-mix(in srgb, var(--women) 35%, transparent); }
.badge.g-X { color: color-mix(in srgb, var(--men) 50%, var(--women)); border-color: color-mix(in srgb, var(--women) 35%, var(--men) 35%); background: linear-gradient(90deg, color-mix(in srgb, var(--men) 10%, transparent), color-mix(in srgb, var(--women) 10%, transparent)); }
.badge.cat { color: var(--text); }
.badge.wc { background: var(--accent); color: #1c1300; border-color: transparent; font-size: .66rem; }
.badge.st-done { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.badge.st-knockout, .badge.st-poolPhase, .badge.st-qualification { background: var(--primary-soft); color: var(--primary); border-color: transparent; }

/* ---------- bottoni e form ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 42px; padding: 8px 16px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
}
.btn:hover { border-color: var(--primary); }
.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.btn.danger { color: var(--danger); }
.btn.danger:hover { border-color: var(--danger); background: var(--danger-soft); }
.btn.small { min-height: 34px; padding: 4px 12px; font-size: .85rem; }
.icon-btn {
  width: 36px; height: 36px; border-radius: 9px; border: 1px solid transparent; background: transparent;
  color: var(--muted); font-size: 1rem; cursor: pointer;
}
.icon-btn:hover { border-color: var(--border); color: var(--text); background: var(--surface-2); }

input, select, textarea {
  width: 100%; min-height: 42px; padding: 8px 10px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font: inherit;
}
input:focus, select:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
input:disabled, select:disabled { opacity: .6; }
label { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; font-weight: 600; }
label small { font-weight: 400; }
label.check { flex-direction: row; align-items: center; gap: 8px; font-weight: 500; font-size: .92rem; }
label.check input { width: 20px; min-height: 20px; height: 20px; accent-color: var(--primary); }

.grid-form { display: grid; gap: 12px; grid-template-columns: 1fr; }
.grid-form h2 { margin: 8px 0 0; }
.grid-form h2:first-child { margin-top: 0; }
.grid-form.tight { gap: 8px; grid-template-columns: 1fr 1fr; margin-top: 8px; }
@media (min-width: 640px) { .grid-form { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .card.grid-form { grid-template-columns: repeat(3, 1fr); } }
.span-all { grid-column: 1 / -1; }
.form-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; grid-column: 1 / -1; justify-content: flex-end; }

.form-card summary { cursor: pointer; font-weight: 700; color: var(--primary); list-style: none; }
.form-card summary::-webkit-details-marker { display: none; }
.form-card[open] summary { margin-bottom: 12px; }

.note { background: var(--primary-soft); border-radius: 10px; padding: 10px 12px; margin: 0 0 14px; font-size: .9rem; }
.note.warn { background: var(--warn-soft); }
.flash {
  position: sticky; top: 64px; z-index: 15; margin-bottom: 12px; padding: 10px 14px; border-radius: 10px;
  background: var(--ok-soft); color: var(--ok); font-weight: 600; animation: fade 3.5s forwards;
}
.flash.warn { background: var(--danger-soft); color: var(--danger); animation-duration: 6s; }
@keyframes fade { 0%, 80% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
.error { color: var(--danger); font-weight: 600; min-height: 1.2em; margin: 8px 0 0; }

.segmented { display: inline-flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--surface); }
.segmented button { border: 0; background: transparent; padding: 8px 16px; font: inherit; font-weight: 600; color: var(--muted); cursor: pointer; min-height: 40px; }
.segmented button[aria-pressed="true"] { background: var(--primary); color: var(--primary-ink); }
.toolbar select { width: auto; }
.search { max-width: 260px; }

/* ---------- tab ---------- */
.tabs {
  display: flex; gap: 4px; overflow-x: auto; margin: 0 -16px 16px; padding: 0 16px;
  border-bottom: 1px solid var(--border); scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs a {
  flex: 0 0 auto; padding: 10px 14px; text-decoration: none; color: var(--muted); font-weight: 600;
  border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.tabs a.active { color: var(--primary); border-bottom-color: var(--primary); }

/* ---------- tabelle ---------- */
.table-wrap { overflow-x: auto; margin: 0 -4px; }
.table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.table th, .table td { padding: 8px 6px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
.table th { font-size: .74rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table tr.qualified td:first-child { box-shadow: inset 3px 0 0 var(--ok); }
.table tr.podium td { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.seed-input { width: 64px; min-height: 36px; text-align: right; padding: 4px 8px; }
@media (max-width: 560px) { .hide-sm { display: none; } }

.player-list { list-style: none; margin: 0; padding: 0; }
.player-list li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.pl-name { flex: 1; min-width: 0; }
.plain-list { margin: 0 0 12px; padding-left: 20px; }

/* ---------- gironi ---------- */
.pools-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 820px) { .pools-grid { grid-template-columns: repeat(2, 1fr); } }
.progress { flex: 1; min-width: 120px; max-width: 240px; height: 8px; border-radius: 99px; background: var(--border); overflow: hidden; }
.progress span { display: block; height: 100%; background: var(--ok); }
.match-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.match-btn {
  width: 100%; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2);
  color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.match-btn:hover:not(:disabled) { border-color: var(--primary); }
.match-btn:disabled { cursor: default; }
.mr-round { font-size: .72rem; font-weight: 700; color: var(--muted); }
.mr-teams { display: flex; flex-direction: column; min-width: 0; }
.mr-teams span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mr-score { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.mr-score small { font-size: .74rem; color: var(--muted); }
.win { font-weight: 700; }

/* ---------- tabellone ---------- */
.bracket-scroll { overflow-x: auto; margin: 0 -16px 16px; padding: 0 16px 8px; }
.bracket { display: flex; gap: 16px; min-width: min-content; }
.br-col { display: flex; flex-direction: column; width: 240px; flex: 0 0 240px; }
.br-col h3 { text-align: center; color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
.br-matches { display: flex; flex-direction: column; justify-content: space-around; gap: 10px; flex: 1; }
.ko-card {
  display: block; width: 100%; padding: 0; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); color: inherit; font: inherit; text-align: left; cursor: pointer; overflow: hidden;
  box-shadow: var(--shadow);
}
.ko-card:hover:not(:disabled) { border-color: var(--primary); }
.ko-card:disabled { cursor: default; }
.ko-card.is-bye { opacity: .6; }
.ko-team { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; min-height: 36px; }
.ko-team + .ko-team { border-top: 1px solid var(--border); }
.ko-team.win { background: var(--ok-soft); }
.ko-name { min-width: 0; overflow-wrap: anywhere; font-size: .88rem; line-height: 1.25; }
.ko-sets { display: flex; gap: 6px; font-variant-numeric: tabular-nums; }
.ko-sets b { min-width: 18px; text-align: right; }
.ko-card small { display: block; padding: 2px 10px 6px; font-size: .72rem; }
.tag { color: var(--danger); font-weight: 700; }
.third { max-width: 260px; margin-bottom: 16px; }

/* Visibilità delle gare ai visitatori (solo admin) */
.cal-item.with-vis { display: flex; gap: 6px; align-items: stretch; }
.cal-item.with-vis .cal-btn { flex: 1; min-width: 0; }
.vis-toggle {
  flex: 0 0 38px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); color: var(--muted);
  font-size: 1.1rem; cursor: pointer; display: grid; place-items: center;
}
.vis-toggle.on { color: var(--ok); background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.cal-item.is-hidden .cal-btn { opacity: .75; border-style: dashed; }

/* Referto elettronico: punteggio in diretta, risultato da omologare, link del refertista */
.cal-item:has(.cal-actions):not(.with-vis) { display: flex; gap: 6px; }
.cal-item:has(.cal-actions) .cal-btn { flex: 1; min-width: 0; }
.cal-actions { display: flex; flex-direction: column; gap: 6px; justify-content: center; flex: 0 0 auto; }
.cal-actions .btn { white-space: nowrap; }
.escore-btn .ti { font-size: 1.05rem; }
.live-badge, .pending-badge { display: inline-flex; align-items: center; gap: 4px; font-size: .7rem; font-weight: 800; letter-spacing: .04em; padding: 1px 7px; border-radius: 99px; vertical-align: middle; }
.live-badge { color: #fff; background: var(--danger); }
.live-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: live-pulse 1.2s ease-in-out infinite; }
@keyframes live-pulse { 50% { opacity: .25; } }
.pending-badge { color: var(--text); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent); letter-spacing: 0; }
.cal-sets.live-sets { color: var(--text); font-weight: 700; opacity: 1; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cal-item.is-live .cal-btn { border-color: color-mix(in srgb, var(--danger) 55%, var(--border)); }
.cal-item.is-finished .cal-btn { border-color: color-mix(in srgb, var(--accent) 60%, var(--border)); }
.ko-live { display: block; margin-top: 4px; }
.escore-note { background: var(--accent-soft); border-radius: 8px; padding: 8px 10px; font-size: .88rem; }
.escore-row { margin: 4px 0 10px; }
.escore-dlg h2 .gno { margin-left: 4px; }
.escore-status { font-weight: 700; padding: 6px 10px; border-radius: 8px; background: var(--surface-2); }
.escore-status.st-live { color: var(--danger); }
.escore-status.st-finished { background: var(--accent-soft); }
.escore-status.st-approved { color: var(--ok); background: var(--ok-soft); }
.escore-link { display: flex; gap: 8px; margin: 10px 0; }
.escore-link input { flex: 1; min-width: 0; font-size: .85rem; }
.escore-qr { width: 200px; max-width: 70%; margin: 14px auto 4px; background: #fff; border-radius: 8px; }
.escore-qr svg { display: block; width: 100%; height: auto; }
.escore-dlg .center { text-align: center; }
.escore-dlg .form-actions { margin-top: 14px; }
@media (max-width: 600px) {
  .cal-item:has(.cal-actions) { flex-wrap: wrap; }
  .cal-item:has(.cal-actions) .cal-actions { flex: 1 0 100%; flex-direction: row; justify-content: flex-end; }
}
.badge.hidden-b, .hidden-b { color: var(--danger); background: var(--danger-soft); border-color: transparent; font-weight: 700; }
span.hidden-b { padding: 0 4px; border-radius: 4px; }
.vis-bar { border-left: 4px solid var(--primary); }
.vis-count { display: flex; align-items: center; gap: 8px; font-size: 1rem; }
.vis-count .ti { color: var(--primary); font-size: 1.3rem; }
.vis-check { margin-top: 6px; }

/* Scheda giocatore */
.big-num { font-size: 2rem; font-weight: 800; margin: 0; letter-spacing: -.02em; }
.big-num small { font-size: .9rem; font-weight: 500; }
.sum-card .kv:last-child { border-bottom: none; }
.sum-card .kv.total { font-size: 1.1rem; border-top: 2px solid var(--text); margin-top: 4px; }
.sum-card .kv.total strong { color: var(--primary); }
.show-sm { display: none; }
@media (max-width: 560px) { .show-sm { display: block; } }

/* Tornei passati */
.next-step.center { justify-content: center; margin-top: 18px; }
.past-head { margin-top: 26px; }
.past-head h2 { margin: 0; }
.cards.past .tour-card { opacity: .85; }
.cards.past .tour-card:hover { opacity: 1; }

/* Avvisi per i visitatori */
.notice-box {
  background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-left: 5px solid var(--accent);
  border-radius: 12px; padding: 12px 16px; margin: 0 0 16px; color: var(--text);
}
.notice-box.editing { border-left-width: 5px; }
.notice-box.expired { opacity: .6; border-style: dashed; }
.notice-box.tour-notice { background: var(--primary-soft); border-color: color-mix(in srgb, var(--primary) 35%, transparent); border-left-color: var(--primary); }
.notice-box.tour-notice h2 .ti { color: var(--primary); }
.notice-box.tour-notice h2 a { color: inherit; }
.notice-box .badge { margin-left: 6px; vertical-align: middle; }
.notice-box label.until { max-width: 260px; margin-top: 8px; }
.notice-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.notice-box h2 { font-size: 1rem; margin: 0 0 6px; }
.notice-box h2 .ti { color: var(--accent); }
.notice-text { line-height: 1.55; overflow-wrap: anywhere; }
.notice-text a { color: var(--primary); font-weight: 600; }
.notice-box textarea { width: 100%; min-height: 110px; padding: 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; resize: vertical; }
.notice-add {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin: 0 0 16px; padding: 10px;
  border: 2px dashed var(--border); border-radius: 12px; background: transparent; color: var(--muted); font: inherit; font-weight: 600; cursor: pointer;
}
.notice-add:hover { border-color: var(--accent); color: var(--text); }

/* Numero di gara e assegnazione squadre alla fase finale */
.gno { color: var(--primary); font-weight: 800; font-variant-numeric: tabular-nums; }
.ko-card .gno-tag { display: block; padding: 3px 10px 0; font-size: .68rem; font-weight: 800; color: var(--primary); }
.assign-list { display: grid; gap: 8px; margin: 10px 0; }
.assign-row { display: grid; grid-template-columns: 44px 1fr auto 1fr; gap: 8px; align-items: center; }
.assign-row .vs { color: var(--muted); font-size: .8rem; }
.assign-row select { min-height: 38px; font-size: .85rem; }
@media (max-width: 600px) {
  .assign-row { grid-template-columns: 1fr; gap: 4px; padding: 8px 0; border-bottom: 1px solid var(--border); }
  .assign-row .vs { text-align: center; }
}
.segmented.wrap { flex-wrap: wrap; }

/* Tabellone connesso: linee tra ogni coppia di partite e la partita del turno successivo */
.bracket.connected { gap: 28px; align-items: stretch; }
.bracket.connected .br-matches { gap: 0; justify-content: stretch; }
.bracket.connected .br-pair { flex: 1; display: flex; flex-direction: column; position: relative; }
.bracket.connected .br-slot { flex: 1; display: flex; align-items: center; position: relative; padding: 6px 0; }
.bracket.connected .br-slot .ko-card { width: 100%; }
.bracket.connected .br-col:not(:last-child) .br-slot::after {
  content: ""; position: absolute; right: -14px; top: 50%; width: 14px; border-top: 2px solid var(--border);
}
.bracket.connected .br-col:not(:last-child) .br-pair::after {
  content: ""; position: absolute; right: -14px; top: 25%; bottom: 25%; border-right: 2px solid var(--border);
}
.bracket.connected .br-col:not(:first-child) .br-slot::before {
  content: ""; position: absolute; left: -14px; top: 50%; width: 14px; border-top: 2px solid var(--border);
}
.bracket.connected .br-slot.done::after { border-color: var(--primary); }
.bracket.connected .br-slot.done .ko-card { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); }
.champion { font-weight: 800; font-size: 1.05rem; }

/* ---------- tabelle punti ---------- */
.table-card summary { cursor: pointer; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.table-card[open] summary { margin-bottom: 12px; }
.table-card form > label { margin-bottom: 12px; max-width: 360px; }
.pt-head, .pt-row { display: grid; grid-template-columns: 1fr 1fr 40px; gap: 8px; align-items: center; max-width: 360px; }
.pt-head { font-size: .74rem; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: 4px; }
.pt-rows { display: grid; gap: 6px; }
.cat-row { display: grid; grid-template-columns: 1fr 1fr auto auto; gap: 8px; align-items: center; margin-bottom: 8px; }
.cat-row.new { grid-template-columns: 1fr 1fr auto; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); }
@media (max-width: 560px) {
  .cat-row, .cat-row.new { grid-template-columns: 1fr 1fr; }
}

/* ---------- gestione torneo ---------- */
.stepper { display: flex; gap: 6px; list-style: none; padding: 0; margin: 0 0 16px; overflow-x: auto; counter-reset: step; }
.stepper li {
  flex: 1 0 auto; counter-increment: step; padding: 8px 10px; border-radius: 10px; font-size: .8rem; font-weight: 700;
  background: var(--surface); border: 1px solid var(--border); color: var(--muted); white-space: nowrap;
}
.stepper li::before { content: counter(step) ". "; }
.stepper li.done { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.stepper li.current { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.btn-row.end { justify-content: flex-end; margin-top: 14px; }
.card .btn-row { margin: 12px 0; }
.sub-form { margin-top: 14px; border-top: 1px dashed var(--border); padding-top: 12px; }
.sub-form summary { cursor: pointer; font-weight: 700; color: var(--primary); margin-bottom: 10px; }
.tabs a.tab-admin { color: var(--accent); }
.tabs a.tab-admin.active { color: var(--primary); }
.danger-zone { border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); }
.icon-btn.on { color: var(--accent); }
.icon-btn:disabled { opacity: .3; cursor: default; }
.badge.q { background: var(--primary); color: var(--primary-ink); border-color: transparent; font-size: .66rem; }
.draft { color: var(--accent); font-weight: 700; font-size: .74rem; }

.wc-block { padding: 10px 0; border-top: 1px dashed var(--border); }
.wc-block h3 { display: flex; align-items: center; gap: 8px; font-size: 1rem; }
.wc-select { width: auto; min-height: 32px; padding: 2px 6px; font-size: .8rem; }

/* ---------- lista d'ingresso ---------- */
.entries td { vertical-align: top; }
.entry-player { display: flex; align-items: center; gap: 8px; justify-content: space-between; padding: 2px 0; }
.entry-player a { color: inherit; text-decoration: none; }
.entry-player a:hover { text-decoration: underline; }
.pts-input { width: 90px; min-height: 32px; padding: 3px 6px; text-align: right; font-size: .85rem; }
.entries .badge { margin-left: 4px; }

/* ---------- info, calendario, giocatore ---------- */
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--border); }
.kv span { color: var(--muted); }
.kv strong { text-align: right; }
.cal-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
/* Scheda partita: orario e campo in evidenza, set vinti grandi, parziali sotto */
.cal-btn {
  width: 100%; display: flex; flex-direction: column; gap: 6px;
  padding: 10px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
  color: inherit; font: inherit; text-align: left; box-shadow: var(--shadow);
}
.cal-item.played .cal-btn { background: var(--surface-2); gap: 2px; padding-top: 8px; padding-bottom: 8px; }
.cal-item.played .cal-head { margin-bottom: 2px; }
button.cal-btn { cursor: pointer; }
button.cal-btn:hover { border-color: var(--primary); }
.cal-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.cal-when { font-size: 1.1rem; font-weight: 700; color: var(--primary); }
.cal-phase { font-size: 1rem; color: var(--muted); }
.cal-teams { display: flex; flex-direction: column; gap: 2px; }
.cal-team { display: flex; justify-content: space-between; align-items: center; gap: 10px; color: var(--muted); }
.cal-team .nm { overflow: hidden; text-overflow: ellipsis; font-size: 1.3rem; line-height: 1.2; overflow-wrap: anywhere; }
.cal-team .sc { font-size: 1.2rem; font-variant-numeric: tabular-nums; min-width: 1ch; text-align: right; line-height: 1; }
.cal-team.win { color: var(--text); font-weight: 700; }
.cal-team.win .sc { color: var(--primary); }
.cal-item:not(.played) .cal-team { color: var(--text); }
.cal-sets { line-height: 1.15; margin-top: 2px; font-size: 1.7rem; font-weight: 700; letter-spacing: .02em; color: var(--text); opacity: .8; font-variant-numeric: tabular-nums; word-spacing: .2em; }
.cal-sets.draft { color: var(--accent); font-weight: 700; font-size: .85rem; opacity: 1; }

/* Avanzamento torneo nelle schede */
.tc-progress { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.tc-progress .bar { flex: 1; height: 6px; border-radius: 99px; background: var(--primary-soft); overflow: hidden; }
.tc-progress .bar span { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.tc-progress small { color: var(--muted); font-size: .72rem; white-space: nowrap; }

/* Medaglie */
.medal {
  display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 99px;
  font-weight: 700; font-size: .8rem; background: var(--surface-2); color: var(--text);
}
.medal.m1 { background: var(--gold); color: #3a2a00; }
.medal.m2 { background: var(--silver); color: #1d242c; }
.medal.m3 { background: var(--bronze); color: #fff; }
.stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; text-align: center; }
.stat span { display: block; font-size: .75rem; color: var(--muted); text-transform: uppercase; }
.stat strong { font-size: 1.4rem; }
.table a { color: inherit; }

/* ---------- finestra risultato ---------- */
.dialog fieldset { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin: 0 0 10px; }
.dialog legend { font-weight: 700; font-size: .85rem; padding: 0 4px; }
.grid-form.three { grid-template-columns: 1fr 1fr 1fr; margin: 0 0 8px; }
@media (max-width: 420px) { .grid-form.three { grid-template-columns: 1fr 1fr; } }
.dialog {
  width: min(460px, calc(100vw - 24px)); border: 0; border-radius: 16px; padding: 18px;
  background: var(--surface); color: var(--text); box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}
.dialog::backdrop { background: rgba(10, 16, 22, .55); }
.dialog h2 { font-size: 1rem; color: var(--muted); }
.md-teams { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; font-weight: 700; margin-bottom: 12px; }
.md-teams span:last-child { text-align: right; }
.md-teams .vs { color: var(--muted); font-weight: 400; }
.outcome { margin-bottom: 6px; }
.set-row { display: grid; grid-template-columns: 1fr 72px 12px 72px; gap: 8px; align-items: center; margin-bottom: 8px; }
.set-row input { text-align: center; font-size: 1.1rem; font-weight: 700; }
.set-label { font-weight: 600; font-size: .9rem; }

/* Pagina "In evidenza": spazi editoriali a dimensione fissa e identica, tornei attivi, ranking */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.editorial { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0 0 26px; }
@media (max-width: 720px) { .editorial { grid-template-columns: 1fr; } }
.editorial-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; height: 470px; }
.editorial-card .ed-photo { flex: 0 0 210px; display: block; overflow: hidden; background: var(--primary-soft); }
.editorial-card .ed-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.editorial-card .ed-photo.no-photo { display: grid; place-items: center; color: var(--primary); font-size: 3rem;
  background: linear-gradient(135deg, var(--primary-soft), var(--accent-soft)); }
.editorial-card .ed-body { flex: 1; min-height: 0; padding: 14px 16px 14px; display: flex; flex-direction: column; gap: 8px; }
.editorial-card h2 { margin: 0; font-size: 1.2rem; line-height: 1.3; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.editorial-card h2 a { color: inherit; text-decoration: none; }
.editorial-card .ed-text { line-height: 1.55; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; }
.editorial-card .ed-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.editorial-card .ed-more { font-weight: 700; color: var(--primary); text-decoration: none; }
.editorial-card .ed-more:hover { text-decoration: underline; }
.editorial-add { display: flex; align-items: center; justify-content: center; gap: 8px; height: 470px; border: 2px dashed var(--border); border-radius: var(--radius);
  background: transparent; color: var(--muted); font: inherit; font-weight: 600; cursor: pointer; }
.editorial-add:hover { border-color: var(--primary); color: var(--primary); }
.editorial-form { display: flex; flex-direction: column; gap: 10px; }
.editorial-form label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: .88rem; }
.editorial-form label.check { flex-direction: row; align-items: center; font-weight: 500; }
.editorial-form .ed-preview { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; }
.article-page { max-width: 820px; margin: 0 auto; }
.article-photo { display: block; width: 100%; max-height: 520px; object-fit: cover; border-radius: var(--radius); margin-bottom: 16px; }
.article-body h1 { font-size: 1.8rem; margin-bottom: 12px; }
.article-text { font-size: 1.05rem; line-height: 1.7; overflow-wrap: anywhere; }
.feat-block { margin: 0 0 26px; }
.feat-block .page-head h2 { margin: 0; font-size: 1.25rem; }
.rank-top-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 720px) { .rank-top-grid { grid-template-columns: 1fr; } }
.rank-top h3 { margin: 0 0 8px; }
.rank-top .table td { padding-top: 6px; padding-bottom: 6px; }

/* Fumetto: pop art, retino a pois, contorni neri, schede inclinate (colori propri) */
[data-design="fumetto"] {
  --font-body: "Fira Sans Extra Condensed", "Inter", sans-serif;
  --bg: #fff4c9; --surface: #fff; --surface-2: #fffbe8; --text: #111; --muted: #444; --border: #111;
  --primary: #e6194b; --primary-ink: #fff; --primary-soft: #ffd6de; --accent: #1e6bff; --accent-soft: #d8e6ff;
  --ok: #1a9c3e; --ok-soft: #d9f5e1; --danger: #e6194b; --danger-soft: #ffd6de; --warn-soft: #fff1b0; --shadow: none; color-scheme: light;
}
[data-design="fumetto"] body { font-size: 16px; background: radial-gradient(rgba(230, 25, 75, .2) 1.6px, transparent 1.8px) 0 0 / 14px 14px, #fff4c9; }
[data-design="fumetto"] :is(h1, h2, h3) { font-weight: 900; text-transform: uppercase; letter-spacing: .01em; }
[data-design="fumetto"] h1 { font-size: 2.5rem; color: #ffd400; -webkit-text-stroke: 1.5px #111; text-shadow: 3px 3px 0 #111; }
[data-design="fumetto"] :is(.card, .cal-btn, .ko-card, .stat, .theme-opt, .design-opt) { border: 3px solid #111; border-radius: 14px; box-shadow: 6px 6px 0 var(--accent); }
[data-design="fumetto"] .tour-card:nth-child(odd) { transform: rotate(-1deg); }
[data-design="fumetto"] .tour-card:nth-child(even) { transform: rotate(1deg); }
[data-design="fumetto"] .tour-card:hover { transform: rotate(0) scale(1.02); }
[data-design="fumetto"] .btn { border: 3px solid #111; border-radius: 12px; font-weight: 800; box-shadow: 3px 3px 0 #111; text-transform: uppercase; }
[data-design="fumetto"] .btn.primary { background: #ffd400; color: #111; }
[data-design="fumetto"] .badge { border: 2px solid #111; border-radius: 999px; font-weight: 800; background: #fff; color: #111; }
[data-design="fumetto"] .cal-team .sc { font-size: 1.9rem; font-weight: 900; }
[data-design="fumetto"] .topbar { background: #ffd400; border-bottom: 3px solid #111; }
[data-design="fumetto"] .topbar::after { display: none; }
[data-design="fumetto"] .brand-text :is(strong, small) { color: #111; }
[data-design="fumetto"] .tabs a { font-weight: 800; text-transform: uppercase; }
[data-design="fumetto"] .tabs a.active { background: #111; color: #ffd400; border-radius: 10px 10px 0 0; }
[data-design="fumetto"] .mainnav { border-top: 3px solid #111; }
[data-design="fumetto"] .mainnav a.active .ni { background: #ffd400; }

/* Beach+ Sabbia: fondo sabbia, blu notte e verde del logo, titoli condensati sportivi */
[data-design="sabbia"] {
  --font-body: "Manrope", "Inter", sans-serif; --font-head: "Barlow Condensed", "Manrope", sans-serif;
  --bg: #F6F1E7; --surface: #ffffff; --surface-2: #FBF8F1; --text: #10233A; --muted: #4E5E70; --border: #E2D9C6;
  --primary: #0B6FA8; --primary-ink: #ffffff; --primary-soft: #E3EEF6; --accent: #3F7A10; --accent-soft: #EAF4DC;
  --ok: #2F7A1F; --ok-soft: #E5F2DC; --danger: #B83C1C; --danger-soft: #FBE6DC; --warn-soft: #FFF1D6;
  --radius: 18px; --shadow: 0 1px 2px rgba(16, 35, 58, .04), 0 8px 24px rgba(16, 35, 58, .06); color-scheme: light;
}
[data-design="sabbia"] body { background: #F6F1E7; }
[data-design="sabbia"] :is(h1, h2, h3) { font-weight: 700; letter-spacing: .01em; }
[data-design="sabbia"] h1 { font-size: 2.1rem; line-height: 1.05; }
[data-design="sabbia"] h2 { font-size: 1.35rem; }
[data-design="sabbia"] :is(.card, .cal-btn, .ko-card, .stat, .theme-opt, .design-opt) { border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); }
[data-design="sabbia"] .btn { border-radius: 12px; font-weight: 700; min-height: 40px; }
[data-design="sabbia"] .btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
[data-design="sabbia"] .btn.danger { color: var(--danger); }
[data-design="sabbia"] .badge { border-radius: 999px; font-weight: 700; }
[data-design="sabbia"] .topbar { background: #10233A; color: #fff; }
[data-design="sabbia"] .topbar::after { display: none; }
[data-design="sabbia"] .brand-text :is(strong, small) { color: #fff; }
[data-design="sabbia"] .tabs a { font-family: var(--font-head); font-weight: 700; letter-spacing: .02em; font-size: 1.05rem; }
[data-design="sabbia"] .tabs a.active { color: var(--primary); }
[data-design="sabbia"] .mainnav { background: #fff; border-top: 1px solid var(--border); }
[data-design="sabbia"] .mainnav a.active { color: var(--primary); }
[data-design="sabbia"] .mainnav a.active .ni { background: var(--primary-soft); }
[data-design="sabbia"] .cal-team .sc { font-family: var(--font-head); font-size: 1.7rem; font-weight: 800; }
[data-design="sabbia"] .profile-hero { background: #10233A; }
[data-design="sabbia"] .profile-hero .ph-avatar { background: #88C133; color: #10233A; }
[data-design="sabbia"] .profile-hero :is(h1, .ph-stats strong) { font-family: var(--font-head); }
[data-design="sabbia"] .profile-hero .badge { background: #fff; color: #10233A; }
[data-design="sabbia"] .ag-fp { background: #EAF4DC; color: #2F5E0C; }
[data-design="sabbia"] .ag-chip strong { font-family: var(--font-head); font-size: 1.1rem; }

/* Halloween (29 ottobre – 3 novembre per tutti, sceglibile sempre): notte viola, zucche, ragnatele e fantasmi.
   Le decorazioni sono immagini senza interazione (pointer-events: none) e non coprono testi né pulsanti. */
[data-design="halloween"] {
  --font-body: "Manrope", "Inter", sans-serif; --font-head: "Creepster", "Manrope", cursive;
  --bg: #1A1033; --surface: #221338; --surface-2: #2B1A47; --text: #F3EAFB; --muted: #CDBDE6; --border: #4A2D7A;
  --primary: #FF7A1A; --primary-ink: #1A0A00; --primary-soft: #3D2346; --accent: #9BE15D; --accent-soft: #233A1E;
  --ok: #9BE15D; --ok-soft: #233A1E; --danger: #FF6B6B; --danger-soft: #4A1F2E; --warn-soft: #3D2A14;
  --men: #8FC8FF; --women: #FF9ACB;
  --radius: 18px; --shadow: 0 6px 22px rgba(0, 0, 0, .35); color-scheme: dark;
}
[data-design="halloween"] body { background: radial-gradient(120% 60% at 80% 0%, #3A1E5C 0%, #1A1033 55%, #120A24 100%) fixed, #1A1033; }
/* fantasma che fluttua (semitrasparente) e, sopra il menu in basso, zucche e fantasma: decorazioni non cliccabili */
[data-design="halloween"] body::after { content: ""; position: fixed; z-index: 19; right: 10px; top: 42%; width: 46px; height: 55px; opacity: .28;
  background: url(../img/themes/hw-ghost.svg) center/contain no-repeat; pointer-events: none; animation: hw-float 6s ease-in-out infinite; }
[data-design="halloween"] body::before { content: ""; position: fixed; z-index: 21; right: 10px; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) - 6px);
  width: 84px; height: 42px; pointer-events: none;
  background: url(../img/themes/hw-ghost.svg) 0 100%/32px no-repeat, url(../img/themes/hw-pumpkin.svg) 100% 100%/42px no-repeat; }
@keyframes hw-float { 50% { transform: translateY(-14px); } }
@media (prefers-reduced-motion: reduce) { [data-design="halloween"] body::after { animation: none; } }
[data-design="halloween"] h1 { font-family: var(--font-head); font-weight: 400; color: var(--primary); letter-spacing: .02em; font-size: 2.3rem; line-height: 1.05; }
[data-design="halloween"] :is(h2, h3) { font-family: var(--font-body); font-weight: 800; }
[data-design="halloween"] :is(.card, .cal-btn, .ko-card, .stat, .theme-opt, .design-opt) { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); }
[data-design="halloween"] .tour-card { position: relative; }
[data-design="halloween"] .tour-card::after { content: ""; position: absolute; right: 10px; bottom: 10px; width: 38px; height: 38px; opacity: .9;
  background: url(../img/themes/hw-pumpkin.svg) center/contain no-repeat; pointer-events: none; }
[data-design="halloween"] .btn { border-radius: 12px; font-weight: 700; background: var(--surface-2); color: var(--text); border-color: var(--border); }
[data-design="halloween"] .btn.primary { background: var(--primary); border-color: var(--primary); color: #1A0A00; }
[data-design="halloween"] .btn.danger { color: var(--danger); }
[data-design="halloween"] .badge { border-radius: 999px; font-weight: 700; background: #3A2160; color: #E9DDF7; }
[data-design="halloween"] :is(input, select, textarea) { background: #160C2B; color: var(--text); border-color: var(--border); }
[data-design="halloween"] a { color: #FFB15C; }
[data-design="halloween"] .topbar { background: #0E0820; border-bottom: 2px solid var(--primary); position: relative; }
[data-design="halloween"] .topbar::after { display: block; content: ""; position: absolute; left: 0; top: 100%; width: 110px; height: 110px; z-index: 5;
  background: url(../img/themes/hw-web.svg) 0 0/contain no-repeat; pointer-events: none; }
[data-design="halloween"] .brand-text :is(strong, small) { color: #fff; }
[data-design="halloween"] .tabs a { font-weight: 700; color: var(--muted); }
[data-design="halloween"] .tabs a.active { color: var(--primary); }
[data-design="halloween"] .mainnav { background: #0E0820; border-top: 2px solid var(--primary); }
[data-design="halloween"] .mainnav a { color: var(--muted); }
[data-design="halloween"] .mainnav a.active { color: var(--primary); }
[data-design="halloween"] .mainnav a.active .ni { background: var(--primary-soft); }
[data-design="halloween"] .profile-hero { background: linear-gradient(160deg, #FF7A1A, #C94A0E); color: #1A0A00; }
[data-design="halloween"] .profile-hero h1 { color: #1A0A00; }
[data-design="halloween"] .profile-hero .ph-avatar { background: #1A1033; color: #FF7A1A; }
[data-design="halloween"] .profile-hero .badge { background: #1A1033; color: #FFB15C; }
[data-design="halloween"] .ag-tr { background: #3A2160; color: #E9DDF7; }
[data-design="halloween"] .ag-fp { background: #FF7A1A; color: #1A0A00; }
[data-design="halloween"] .ag-bk, [data-design="halloween"] .ag-to { background: #2B1A47; color: var(--text); }
[data-design="halloween"] .table th { color: var(--muted); }
[data-design="halloween"] .note { color: var(--text); }

/* Natale (8 – 26 dicembre per tutti, sceglibile sempre): abete scuro, rosso e oro, lucine, neve, albero, pupazzo e regali.
   Le decorazioni sono immagini senza interazione (pointer-events: none) e non coprono testi né pulsanti. */
[data-design="natale"] {
  --font-body: "Manrope", "Inter", sans-serif; --font-head: "Mountains of Christmas", "Manrope", cursive;
  --bg: #0D2A24; --surface: #10362D; --surface-2: #144034; --text: #F2F7F4; --muted: #BFD6CC; --border: #2E6B55;
  --primary: #D7263D; --primary-ink: #FFFFFF; --primary-soft: #4A1A22; --accent: #FFD24D; --accent-soft: #3D3416;
  --ok: #5BD17A; --ok-soft: #173A27; --danger: #FF6B6B; --danger-soft: #4A1F2E; --warn-soft: #3D3416;
  --men: #8FC8FF; --women: #FF9ACB;
  --radius: 18px; --shadow: 0 6px 22px rgba(0, 0, 0, .35); color-scheme: dark;
}
[data-design="natale"] body { background: radial-gradient(120% 60% at 80% 0%, #17463A 0%, #0D2A24 50%, #081B17 100%) fixed, #0D2A24; }
/* neve che scende piano, dietro le schede */
[data-design="natale"] body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: url(../img/themes/xm-snow.svg) 0 0/200px, url(../img/themes/xm-snow.svg) 70px 40px/130px; opacity: .8;
  animation: xm-snow 18s linear infinite; }
@keyframes xm-snow { to { background-position: 30px 200px, 100px 300px; } }
@media (prefers-reduced-motion: reduce) { [data-design="natale"] body::after { animation: none; } }
/* sopra il menu in basso: pupazzo di neve, regalo e albero (non cliccabili) */
[data-design="natale"] body::before { content: ""; position: fixed; z-index: 21; right: 8px; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) - 4px);
  width: 112px; height: 54px; pointer-events: none;
  background: url(../img/themes/xm-snowman.svg) 0 100%/auto 40px no-repeat, url(../img/themes/xm-gift-green.svg) 50px 100%/26px no-repeat, url(../img/themes/xm-tree.svg) 100% 100%/auto 54px no-repeat; }
[data-design="natale"] h1 { font-family: var(--font-head); font-weight: 700; color: #fff; letter-spacing: .01em; font-size: 2.3rem; line-height: 1.05; }
[data-design="natale"] :is(h2, h3) { font-family: var(--font-body); font-weight: 800; }
[data-design="natale"] :is(.card, .cal-btn, .ko-card, .stat, .theme-opt, .design-opt) { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); }
[data-design="natale"] .tour-card { position: relative; }
[data-design="natale"] .tour-card::after { content: ""; position: absolute; right: 10px; bottom: 10px; width: 36px; height: 36px; opacity: .95;
  background: url(../img/themes/xm-gift.svg) center/contain no-repeat; pointer-events: none; }
[data-design="natale"] .btn { border-radius: 12px; font-weight: 700; background: var(--surface-2); color: var(--text); border-color: var(--border); }
[data-design="natale"] .btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
[data-design="natale"] .btn.danger { color: var(--danger); }
[data-design="natale"] .badge { border-radius: 999px; font-weight: 700; background: #1C4A3E; color: #DDEFE6; }
[data-design="natale"] :is(input, select, textarea) { background: #0A221D; color: var(--text); border-color: var(--border); }
[data-design="natale"] a { color: #FFD24D; }
[data-design="natale"] .topbar { background: #B51E33; border-bottom: 3px solid #FFD24D; position: relative;
  --primary: #FFFFFF; --primary-ink: #B51E33; --primary-soft: rgba(255, 255, 255, .16); }   /* lingue e pulsanti leggibili sul rosso */
/* lucine colorate appese sotto la barra in alto */
[data-design="natale"] .topbar::after { display: block; content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 22px; z-index: 5;
  background: url(../img/themes/xm-lights.svg) 0 0/120px 22px repeat-x; pointer-events: none; }
[data-design="natale"] .brand-text :is(strong, small) { color: #fff; }
[data-design="natale"] .tabs a { font-weight: 700; color: var(--muted); }
[data-design="natale"] .tabs a.active { color: #FFD24D; }
[data-design="natale"] .mainnav { background: #0A221D; border-top: 3px solid #FFD24D; }
[data-design="natale"] .mainnav a { color: var(--muted); }
[data-design="natale"] .mainnav a.active { color: #FFD24D; }
[data-design="natale"] .mainnav a.active .ni { background: #3D3416; }
[data-design="natale"] .profile-hero { background: linear-gradient(160deg, #C4243B, #8E1527); color: #fff; }
[data-design="natale"] .profile-hero h1 { color: #fff; }
[data-design="natale"] .profile-hero .ph-avatar { background: #fff; color: #B51E33; position: relative; }
[data-design="natale"] .profile-hero .ph-avatar::after { content: ""; position: absolute; top: -14px; right: -10px; width: 38px; height: 29px; transform: rotate(18deg);
  background: url(../img/themes/xm-hat.svg) center/contain no-repeat; pointer-events: none; }
[data-design="natale"] .profile-hero .badge { background: rgba(255, 255, 255, .18); color: #fff; }
[data-design="natale"] .ag-tr { background: #1C4A3E; color: #DDEFE6; }
[data-design="natale"] .ag-fp { background: #FFD24D; color: #2A1E00; }
[data-design="natale"] .ag-bk, [data-design="natale"] .ag-to { background: #D7263D; color: #fff; }
[data-design="natale"] .table th { color: var(--muted); }
[data-design="natale"] .note { color: var(--text); }

/* Capodanno (27 dicembre – 2 gennaio per tutti, sceglibile sempre): notte, oro e argento, fuochi d'artificio, coriandoli e brindisi.
   Le decorazioni sono immagini senza interazione (pointer-events: none) e non coprono testi né pulsanti. */
[data-design="capodanno"] {
  --font-body: "Manrope", "Inter", sans-serif; --font-head: "Playfair Display", "Manrope", serif;
  --bg: #0B0D1A; --surface: #151828; --surface-2: #1D2136; --text: #F4F2EC; --muted: #C3C6D4; --border: #33385A;
  --primary: #E8C15A; --primary-ink: #1A1400; --primary-soft: #3A3218; --accent: #FF5FA2; --accent-soft: #3D1A2C;
  --ok: #6FDC8C; --ok-soft: #173A27; --danger: #FF6B6B; --danger-soft: #4A1F2E; --warn-soft: #3A3218;
  --men: #8FC8FF; --women: #FF9ACB;
  --radius: 18px; --shadow: 0 6px 22px rgba(0, 0, 0, .4); color-scheme: dark;
}
[data-design="capodanno"] body { background: radial-gradient(120% 60% at 80% 0%, #23284A 0%, #0B0D1A 55%, #06070F 100%) fixed, #0B0D1A; }
/* coriandoli che scendono piano, dietro le schede, e fuochi d'artificio nel cielo */
[data-design="capodanno"] body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: url(../img/themes/cp-firework.svg) right 18px top 90px/70px no-repeat, url(../img/themes/cp-firework-cyan.svg) left 14px top 46%/52px no-repeat,
    url(../img/themes/cp-confetti.svg) 0 0/200px, url(../img/themes/cp-confetti.svg) 60px 30px/140px; opacity: .85;
  animation: cp-fall 22s linear infinite; }
@keyframes cp-fall { to { background-position: right 18px top 90px, left 14px top 46%, 20px 200px, 90px 310px; } }
@media (prefers-reduced-motion: reduce) { [data-design="capodanno"] body::after { animation: none; } }
/* sopra il menu in basso: fuoco d'artificio e calici (non cliccabili) */
[data-design="capodanno"] body::before { content: ""; position: fixed; z-index: 21; right: 8px; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) - 4px);
  width: 92px; height: 50px; pointer-events: none;
  background: url(../img/themes/cp-firework.svg) 0 0/34px no-repeat, url(../img/themes/cp-glasses.svg) 100% 100%/48px no-repeat; }
[data-design="capodanno"] h1 { font-family: var(--font-head); font-weight: 700; color: #E8C15A; letter-spacing: .01em; font-size: 2.2rem; line-height: 1.1; }
[data-design="capodanno"] :is(h2, h3) { font-family: var(--font-body); font-weight: 800; }
[data-design="capodanno"] :is(.card, .cal-btn, .ko-card, .stat, .theme-opt, .design-opt) { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); }
[data-design="capodanno"] .tour-card { position: relative; }
[data-design="capodanno"] .btn { border-radius: 12px; font-weight: 700; background: var(--surface-2); color: var(--text); border-color: var(--border); }
[data-design="capodanno"] .btn.primary { background: var(--primary); border-color: var(--primary); color: #1A1400; }
[data-design="capodanno"] .btn.danger { color: var(--danger); }
[data-design="capodanno"] .badge { border-radius: 999px; font-weight: 700; background: #262B48; color: #E9E6F5; }
[data-design="capodanno"] :is(input, select, textarea) { background: #0E1020; color: var(--text); border-color: var(--border); }
[data-design="capodanno"] a { color: #E8C15A; }
[data-design="capodanno"] .topbar { background: #07080F; border-bottom: 3px solid #E8C15A; position: relative; }
[data-design="capodanno"] .brand-text :is(strong, small) { color: #fff; }
[data-design="capodanno"] .tabs a { font-weight: 700; color: var(--muted); }
[data-design="capodanno"] .tabs a.active { color: #E8C15A; }
[data-design="capodanno"] .mainnav { background: #07080F; border-top: 3px solid #E8C15A; }
[data-design="capodanno"] .mainnav a { color: var(--muted); }
[data-design="capodanno"] .mainnav a.active { color: #E8C15A; }
[data-design="capodanno"] .mainnav a.active .ni { background: #3A3218; }
[data-design="capodanno"] .table th { color: var(--muted); }
[data-design="capodanno"] .note { color: var(--text); }
/* festone dorato con le stelle sotto la barra in alto */
[data-design="capodanno"] .topbar::after { display: block; content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 26px; z-index: 5;
  background: url(../img/themes/cp-garland.svg) 0 0/120px 26px repeat-x; pointer-events: none; }
[data-design="capodanno"] .tour-card::after { content: ""; position: absolute; right: 10px; bottom: 10px; width: 36px; height: 36px;
  background: url(../img/themes/cp-glasses.svg) center/contain no-repeat; pointer-events: none; }
[data-design="capodanno"] .profile-hero { background: url(../img/themes/cp-confetti.svg) 0 0/160px, linear-gradient(160deg, #2A2F55, #12152A); color: #fff; border: 1px solid #E8C15A; }
[data-design="capodanno"] .profile-hero h1 { color: #E8C15A; }
[data-design="capodanno"] .profile-hero .ph-avatar { background: #E8C15A; color: #1A1400; position: relative; }
[data-design="capodanno"] .profile-hero .ph-avatar::after { content: ""; position: absolute; top: -22px; right: -6px; width: 26px; height: 30px; transform: rotate(20deg);
  background: url(../img/themes/cp-hat.svg) center/contain no-repeat; pointer-events: none; }
[data-design="capodanno"] .profile-hero .badge { background: rgba(232, 193, 90, .18); color: #F5E6B0; }
[data-design="capodanno"] .ag-tr { background: #262B48; color: #E9E6F5; }
[data-design="capodanno"] .ag-fp { background: #E8C15A; color: #1A1400; }
[data-design="capodanno"] .ag-bk, [data-design="capodanno"] .ag-to { background: #FF5FA2; color: #2A0716; }

/* Befana (5 – 7 gennaio per tutti, sceglibile sempre): cielo notturno, luna, la Befana in volo sulla scopa, calze e dolcetti.
   Le decorazioni sono immagini senza interazione (pointer-events: none) e non coprono testi né pulsanti. */
[data-design="befana"] {
  --font-body: "Manrope", "Inter", sans-serif; --font-head: "Henny Penny", "Manrope", cursive;
  --bg: #141B3D; --surface: #1C2550; --surface-2: #232E5E; --text: #F4EFE6; --muted: #C8CBE0; --border: #3A4683;
  --primary: #E8892B; --primary-ink: #1A0E00; --primary-soft: #3D2A18; --accent: #F2C14E; --accent-soft: #3A3218;
  --ok: #6FDC8C; --ok-soft: #173A27; --danger: #FF7A7A; --danger-soft: #4A1F2E; --warn-soft: #3D2A18;
  --men: #8FC8FF; --women: #FF9ACB;
  --radius: 18px; --shadow: 0 6px 22px rgba(0, 0, 0, .35); color-scheme: dark;
}
[data-design="befana"] body { background: url(../img/themes/bf-moon.svg) right 4% top 22%/60px no-repeat fixed, radial-gradient(120% 60% at 80% 0%, #2A3570 0%, #141B3D 55%, #0C1128 100%) fixed, #141B3D; }
/* la Befana attraversa il cielo sulla scopa, dietro le schede */
[data-design="befana"] body::after { content: ""; position: fixed; z-index: -1; left: 0; top: 24%; width: 120px; height: 70px; pointer-events: none; opacity: .75;
  background: url(../img/themes/bf-broom.svg) center/contain no-repeat; animation: bf-fly 24s linear infinite; }
@keyframes bf-fly { 0% { transform: translate(-140px, 40px) rotate(-6deg); } 50% { transform: translate(50vw, -10px) rotate(-2deg); } 100% { transform: translate(calc(100vw + 20px), 30px) rotate(-6deg); } }
@media (prefers-reduced-motion: reduce) { [data-design="befana"] body::after { animation: none; left: auto; right: 70px; top: 90px; width: 90px; } }
/* sopra il menu in basso: calza piena di dolci e calza col carbone (non cliccabili) */
[data-design="befana"] body::before { content: ""; position: fixed; z-index: 21; right: 8px; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) - 4px);
  width: 86px; height: 54px; pointer-events: none;
  background: url(../img/themes/bf-stocking-green.svg) 0 100%/auto 44px no-repeat, url(../img/themes/bf-stocking.svg) 100% 100%/auto 54px no-repeat; }
[data-design="befana"] h1 { font-family: var(--font-head); font-weight: 400; color: #F2C14E; letter-spacing: .01em; font-size: 2.2rem; line-height: 1.1; }
[data-design="befana"] :is(h2, h3) { font-family: var(--font-body); font-weight: 800; }
[data-design="befana"] :is(.card, .cal-btn, .ko-card, .stat, .theme-opt, .design-opt) { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); }
[data-design="befana"] .tour-card { position: relative; }
[data-design="befana"] .btn { border-radius: 12px; font-weight: 700; background: var(--surface-2); color: var(--text); border-color: var(--border); }
[data-design="befana"] .btn.primary { background: var(--primary); border-color: var(--primary); color: #1A0E00; }
[data-design="befana"] .btn.danger { color: var(--danger); }
[data-design="befana"] .badge { border-radius: 999px; font-weight: 700; background: #2E3A73; color: #E6E8F5; }
[data-design="befana"] :is(input, select, textarea) { background: #10163A; color: var(--text); border-color: var(--border); }
[data-design="befana"] a { color: #F2C14E; }
[data-design="befana"] .topbar { background: #0E1430; border-bottom: 3px solid #E8892B; position: relative; }
[data-design="befana"] .brand-text :is(strong, small) { color: #fff; }
[data-design="befana"] .tabs a { font-weight: 700; color: var(--muted); }
[data-design="befana"] .tabs a.active { color: #F2C14E; }
[data-design="befana"] .mainnav { background: #0E1430; border-top: 3px solid #E8892B; }
[data-design="befana"] .mainnav a { color: var(--muted); }
[data-design="befana"] .mainnav a.active { color: #F2C14E; }
[data-design="befana"] .mainnav a.active .ni { background: #3D2A18; }
[data-design="befana"] .table th { color: var(--muted); }
[data-design="befana"] .note { color: var(--text); }
/* calze appese sotto la barra in alto */
[data-design="befana"] .topbar::after { display: block; content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 34px; z-index: 5;
  background: url(../img/themes/bf-stockings.svg) 0 0/120px 34px repeat-x; pointer-events: none; }
[data-design="befana"] .tour-card::after { content: ""; position: absolute; right: 10px; bottom: 8px; width: 30px; height: 40px;
  background: url(../img/themes/bf-stocking.svg) center/contain no-repeat; pointer-events: none; }
[data-design="befana"] .profile-hero { background: linear-gradient(160deg, #E8892B, #B8561A); color: #1A0E00; }
[data-design="befana"] .profile-hero h1 { color: #1A0E00; }
[data-design="befana"] .profile-hero .ph-avatar { background: #141B3D; color: #F2C14E; position: relative; }
[data-design="befana"] .profile-hero .ph-avatar::after { content: ""; position: absolute; bottom: -6px; right: -12px; width: 32px; height: 20px; transform: rotate(-16deg);
  background: url(../img/themes/bf-candy.svg) center/contain no-repeat; pointer-events: none; }
[data-design="befana"] .profile-hero .badge { background: #141B3D; color: #F2C14E; }
[data-design="befana"] .ag-tr { background: #2E3A73; color: #E6E8F5; }
[data-design="befana"] .ag-fp { background: #F2C14E; color: #2A1E00; }
[data-design="befana"] .ag-bk, [data-design="befana"] .ag-to { background: #E8892B; color: #1A0E00; }

/* Anteprime dei temi grafici */
.design-opt { display: flex; flex-direction: column; gap: 8px; padding: 10px; cursor: pointer; text-align: left; border-radius: 12px;
  border: 2px solid var(--border); background: var(--surface); color: var(--text); font: inherit; }
.design-opt[aria-pressed="true"] { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.design-opt .pv { padding: 10px; background: var(--surface-2); display: flex; flex-direction: column; gap: 6px; min-height: 92px; }
.design-opt .pv b { font-size: 1.15rem; line-height: 1.1; }
.design-opt .pv .pb { align-self: flex-start; padding: 3px 10px; font-size: .7rem; background: var(--primary); color: var(--primary-ink); }
.design-opt .nm { font-weight: 600; font-size: .85rem; }
.design-opt .ds { font-size: .72rem; color: var(--muted); }

/* Protezione: nessun tema deve creare effetti sulla testata che sposterebbero il menu fisso del telefono. */
.topbar { transform: none !important; filter: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; contain: none !important; will-change: auto !important; }

/* EOPE UPDATE: rubrica destinatari */
.rcpt-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.rcpt { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 8px; }
.rcpt label.check { overflow-wrap: anywhere; }
.rcpt-add { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 8px; align-items: end; }
@media (max-width: 560px) { .rcpt-add { grid-template-columns: 1fr; } }
/* Account dei campi (E-scorer) */
.scorer-list { list-style: none; margin: 0 0 12px; padding: 0; }
.scorer-list li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border); flex-wrap: wrap; }
.scorer-list li:first-child { border-top: 0; }
.scorer-list li span:nth-child(2) { flex: 1; min-width: 160px; }
.scorer-form { grid-template-columns: 110px 1fr 1fr; }
.scorer-form .span-all { grid-column: 1 / -1; }
.scorer-list select { max-width: 260px; min-height: 34px; }
@media (max-width: 700px) { .scorer-form { grid-template-columns: 1fr; } }

/* Cartella referti (scheda Referti) */
.folder h2 .ti-folder { color: var(--accent); }
.file-list { list-style: none; margin: 0; padding: 0; }
.file-list li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--border); }
.file-list li:first-child { border-top: 0; }
.file-ic { font-size: 1.6rem; color: var(--muted); flex: 0 0 auto; }
.file-ic.pdf { color: var(--danger); }
.file-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: left; }
.file-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-main.as-link { background: none; border: 0; padding: 0; cursor: pointer; color: inherit; font: inherit; }
.file-main.as-link:hover strong { color: var(--primary); text-decoration: underline; }
.file-state { display: flex; align-items: center; gap: 6px; font-size: .82rem; font-variant-numeric: tabular-nums; flex-wrap: wrap; }
.file-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 600px) { .file-list li { flex-wrap: wrap; } .file-actions { flex: 1 0 100%; } }
.dialog.wide-dialog { width: min(1100px, 96vw); max-width: none; }
.pdf-viewer .pv-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.pdf-viewer .pv-bar strong { overflow-wrap: anywhere; }
.pv-frame { width: 100%; height: min(75vh, 760px); border: 1px solid var(--border); border-radius: 8px; background: #fff; }
.pv-pages { max-height: min(75vh, 780px); overflow: auto; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 8px; }
.pv-pages canvas { display: block; width: 100%; height: auto; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .15); margin: 0 auto 8px; }

/* Gold & Silver */
.gs-box { border: 1px dashed var(--border); border-radius: 12px; padding: 12px; display: grid; gap: 10px; }
.gs-box h3 { margin: 6px 0 0; font-size: 1rem; }
.gs-pools { display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 8px; }
.gs-pool { display: grid; grid-template-columns: 5em 8.5em 1fr; gap: 6px; align-items: center; background: var(--surface-2); border-radius: 10px; padding: 6px 8px; }
@media (max-width: 420px) { .gs-pools { grid-template-columns: 1fr; } .gs-pool { grid-template-columns: 5em 1fr; } .gs-pool [name=gsMode] { grid-column: 1 / -1; } }
.gs-pool select { min-height: 36px; }
.gs-tables { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.gs-table h3 { margin: 0 0 6px; }
.gs-title.gold { color: #b8860b; }
.gs-title.silver { color: #7a8591; }
.badge.gs-gold { background: #fff3bf; color: #7a5b00; border-color: #f0c419; }
.badge.gs-silver { background: #eceff3; color: #495057; border-color: #adb5bd; }
.gs-preview { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.gs-preview-pool { background: var(--surface-2); border-radius: 10px; padding: 8px 10px; }
.gs-preview-pool h3 { margin: 0 0 6px; font-size: .95rem; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.gs-preview-pool ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.gs-preview-pool li { display: flex; gap: 8px; align-items: baseline; font-size: .9rem; }
.gs-preview-pool .seed-no { min-width: 1.8em; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.pos-input { width: 3.6em; text-align: center; padding: 4px; }

/* Beach+ Arena: logo orizzontale su fondo bianco (leggibile con tutti i temi, anche scuri) */
.brand-logos img.brand-wordmark { width: auto; height: 40px; background: #fff; border-radius: 8px; padding: 3px 6px; box-sizing: content-box; }
@media (max-width: 720px) { .brand-logos img.brand-wordmark { width: auto; height: 30px; } }


/* =====================================================================
   BEACH+ ARENA · TAVOLOZZE DI COLORI (data-theme) — sarde e beach
   ===================================================================== */
[data-theme="quattromori"] {
  --bg: #faf7f5; --surface: #fff; --surface-2: #fdfbfa; --text: #161616; --muted: #5d5d5d; --border: #ece4e1;
  --primary: #c8102e; --primary-ink: #fff; --primary-soft: #fbe3e7; --accent: #111; --accent-soft: #ececec;
  --ok: #1e7b4f; --ok-soft: #e4f4eb; --danger: #a50d26; --danger-soft: #fbe3e7; --warn-soft: #fff5d9;
  --men: #1f4f8f; --women: #c8102e; --shadow: 0 1px 2px rgba(0,0,0,.05), 0 6px 18px rgba(0,0,0,.05); color-scheme: light;
}
[data-theme="smeralda"] {
  --bg: #eefaf7; --surface: #fff; --surface-2: #f5fcfa; --text: #0d2b28; --muted: #4f6f6a; --border: #d2ebe5;
  --primary: #00796b; --primary-ink: #fff; --primary-soft: #d9f2ec; --accent: #0098c7; --accent-soft: #dcf2fa;
  --ok: #1e7b4f; --ok-soft: #e4f4eb; --danger: #c0392b; --danger-soft: #fcebea; --warn-soft: #fff5d9;
  --men: #0a6aa0; --women: #c2306a; --shadow: 0 1px 2px rgba(13,43,40,.05), 0 6px 18px rgba(13,43,40,.05); color-scheme: light;
}
[data-theme="alghero"] {
  --bg: #fff5f1; --surface: #fff; --surface-2: #fff9f6; --text: #2a1611; --muted: #7a5a50; --border: #f4dcd2;
  --primary: #c73b2f; --primary-ink: #fff; --primary-soft: #fde3dd; --accent: #1b4965; --accent-soft: #dde9f1;
  --ok: #1e7b4f; --ok-soft: #e4f4eb; --danger: #a8261c; --danger-soft: #fcebea; --warn-soft: #fff5d9;
  --men: #1b4965; --women: #c73b2f; --shadow: 0 1px 2px rgba(42,22,17,.05), 0 6px 18px rgba(42,22,17,.05); color-scheme: light;
}
[data-theme="mirto"] {
  --bg: #f8f3f9; --surface: #fff; --surface-2: #fbf8fc; --text: #26142a; --muted: #6e5a73; --border: #eadcee;
  --primary: #6a2c70; --primary-ink: #fff; --primary-soft: #f0e1f2; --accent: #a87a1c; --accent-soft: #f6ecd6;
  --ok: #3f7d20; --ok-soft: #e6f2dc; --danger: #b3261e; --danger-soft: #fcebea; --warn-soft: #fff5d9;
  --men: #3d5f9e; --women: #a8325e; --shadow: 0 1px 2px rgba(38,20,42,.05), 0 6px 18px rgba(38,20,42,.05); color-scheme: light;
}
[data-theme="pietra"] {
  --bg: #f4efe6; --surface: #fffdf9; --surface-2: #faf6ef; --text: #2b2318; --muted: #6f6453; --border: #e5dbc9;
  --primary: #8a5a2b; --primary-ink: #fff; --primary-soft: #f1e5d6; --accent: #4a6b52; --accent-soft: #e2ece4;
  --ok: #3f7d20; --ok-soft: #e6f2dc; --danger: #b3261e; --danger-soft: #fcebea; --warn-soft: #fff5d9;
  --men: #3d6a9e; --women: #a8325e; --shadow: 0 1px 2px rgba(43,35,24,.06), 0 6px 18px rgba(43,35,24,.06); color-scheme: light;
}
[data-theme="fenicotteri"] {
  --bg: #fff4f8; --surface: #fff; --surface-2: #fff8fb; --text: #2a1020; --muted: #7e5a6b; --border: #f4d6e1;
  --primary: #c2306a; --primary-ink: #fff; --primary-soft: #fbe1ea; --accent: #1f8a7e; --accent-soft: #ddf3f0;
  --ok: #1e7b4f; --ok-soft: #e4f4eb; --danger: #b3261e; --danger-soft: #fcebea; --warn-soft: #fff5d9;
  --men: #2a5db0; --women: #c2306a; --shadow: 0 1px 2px rgba(42,16,32,.05), 0 6px 18px rgba(42,16,32,.05); color-scheme: light;
}
[data-theme="isarutas"] {
  --bg: #fbf6ee; --surface: #fff; --surface-2: #fffaf3; --text: #1c2530; --muted: #6b7280; --border: #eee2cf;
  --primary: #0a6c8f; --primary-ink: #fff; --primary-soft: #e0f0f6; --accent: #c4791b; --accent-soft: #fbecd6;
  --ok: #1e7b4f; --ok-soft: #e4f4eb; --danger: #c0392b; --danger-soft: #fcebea; --warn-soft: #fff5d9;
  --men: #0a6c8f; --women: #c2306a; --shadow: 0 1px 2px rgba(28,37,48,.05), 0 6px 18px rgba(28,37,48,.05); color-scheme: light;
}
[data-theme="carnevale"] {
  --bg: #14100c; --surface: #1f1813; --surface-2: #261e18; --text: #f3ece4; --muted: #b3a597; --border: #3a2e25;
  --primary: #d9a441; --primary-ink: #1b1206; --primary-soft: #3a2c16; --accent: #e0574a; --accent-soft: #3d1c18;
  --ok: #6ee7a8; --ok-soft: #0f3324; --danger: #ff7b72; --danger-soft: #3a1a1a; --warn-soft: #3a320f;
  --men: #8fb8ef; --women: #f08aa8; --shadow: none; color-scheme: dark;
}
[data-theme="notturna"] {
  --bg: #0b1530; --surface: #13204a; --surface-2: #182856; --text: #eef3fb; --muted: #9db0d3; --border: #26386c;
  --primary: #c6f432; --primary-ink: #142004; --primary-soft: #2a3a1e; --accent: #4fc1f0; --accent-soft: #12355a;
  --ok: #6ee7a8; --ok-soft: #0f3324; --danger: #ff7b72; --danger-soft: #3a1a1a; --warn-soft: #3a320f;
  --men: #8fc4f6; --women: #f08aa8; --shadow: none; color-scheme: dark;
}

/* =====================================================================
   BEACH+ ARENA · TEMI GRAFICI (data-design): Sardegna e beach volley.
   Ognuno ha colori, caratteri e decorazioni propri. Le illustrazioni in img/themes/
   sono disegni originali; .theme-hero (in cima alla pagina dei tornei) le mostra
   e può essere sostituita da una foto (es. img/themes/spiaggia.jpg).
   ===================================================================== */
.theme-hero { display: none; aspect-ratio: 4 / 1; min-height: 100px; max-height: 270px; width: 100%; margin: 0 0 18px; border-radius: var(--radius);
  background: center / cover no-repeat; box-shadow: var(--shadow); }

/* Quattro Mori: bianco, rosso della croce e nero, titoli forti */
[data-design="quattromori"] {
  --font-body: "Source Sans 3", "Inter", sans-serif; --font-head: "Oswald", "Inter", sans-serif;
  --bg: #f7f4f2; --surface: #fff; --surface-2: #fbf9f8; --text: #141414; --muted: #5a5a5a; --border: #e6dfdc;
  --primary: #c8102e; --primary-ink: #fff; --primary-soft: #fbe3e7; --accent: #111; --accent-soft: #ededed;
  --men: #1f4f8f; --women: #c8102e; color-scheme: light;
}
[data-design="quattromori"] .theme-hero { display: block; background: #4e8ad0 url(../img/photos/quattro-mori.jpg) center 62% / cover no-repeat; }
[data-design="quattromori"] :is(h1, h2) { text-transform: uppercase; letter-spacing: .02em; }
[data-design="quattromori"] h1::before { content: ""; display: inline-block; width: 1.25em; height: .85em; margin-right: .4em; vertical-align: -.02em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Crect width='30' height='20' fill='%23fff' stroke='%23111' stroke-width='.8'/%3E%3Crect y='8.5' width='30' height='3' fill='%23c8102e'/%3E%3Crect x='13.5' width='3' height='20' fill='%23c8102e'/%3E%3Cg fill='%23111'%3E%3Ccircle cx='7' cy='4.3' r='2.6'/%3E%3Ccircle cx='22.5' cy='4.3' r='2.6'/%3E%3Ccircle cx='7' cy='15.6' r='2.6'/%3E%3Ccircle cx='22.5' cy='15.6' r='2.6'/%3E%3C/g%3E%3Cg fill='%23fff'%3E%3Crect x='4.4' y='3.2' width='5.2' height='1'/%3E%3Crect x='19.9' y='3.2' width='5.2' height='1'/%3E%3Crect x='4.4' y='14.5' width='5.2' height='1'/%3E%3Crect x='19.9' y='14.5' width='5.2' height='1'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; }
[data-design="quattromori"] .topbar::after { height: 10px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='10' shape-rendering='crispEdges'%3E%3Crect width='40' height='10' fill='%23fff'/%3E%3Crect y='3' width='40' height='4' fill='%23c8102e'/%3E%3Crect x='18' width='4' height='10' fill='%23c8102e'/%3E%3C/svg%3E") repeat-x left bottom / 40px 10px; }
[data-design="quattromori"] :is(.card, .cal-btn, .ko-card) { border-radius: 4px; border-top: 4px solid var(--primary); }
[data-design="quattromori"] .btn { border-radius: 3px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
[data-design="quattromori"] .badge { border-radius: 3px; }
[data-design="quattromori"] .tabs a.active { border-bottom-width: 4px; }

/* Mamuthones: maschera di legno, vello nero, campanacci di bronzo (scuro) */
[data-design="mamuthones"] {
  --font-body: "Alegreya Sans", "Inter", sans-serif; --font-head: "Alegreya SC", Georgia, serif;
  --bg: #120e0b; --surface: #1f1813; --surface-2: #261e18; --text: #f3ece4; --muted: #b3a597; --border: #3a2e25;
  --primary: #d9a441; --primary-ink: #1b1206; --primary-soft: #3a2c16; --accent: #e0574a; --accent-soft: #3d1c18;
  --ok: #6ee7a8; --ok-soft: #0f3324; --danger: #ff7b72; --danger-soft: #3a1a1a; --warn-soft: #3a320f;
  --men: #8fb8ef; --women: #f08aa8; --shadow: 0 6px 20px rgba(0,0,0,.45); color-scheme: dark;
}
[data-design="mamuthones"] body { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='18'%3E%3Cpath d='M2 12 q4 -9 9 0 q4 -9 9 0' fill='none' stroke='%232a221c' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M-9 3 q4 -8 9 0 q4 -8 9 0 q4 -8 9 0' fill='none' stroke='%23211a15' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 22px 18px, #120e0b; }
[data-design="mamuthones"] .theme-hero { display: block; background-image: url(../img/themes/mamuthones.svg); }
[data-design="mamuthones"] h1 { color: var(--primary); letter-spacing: .03em; }
[data-design="mamuthones"] .topbar { background: #1a130e; }
[data-design="mamuthones"] .topbar::after { height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='16'%3E%3Cpath d='M6 2 Q6 -0 17 -0' fill='none'/%3E%3Cpath d='M11 13 Q10 3 17 2 Q24 3 23 13 L26 15 L8 15 Z' fill='%23c99233'/%3E%3Ccircle cx='17' cy='15' r='1.6' fill='%236b4716'/%3E%3C/svg%3E") repeat-x left bottom / 34px 16px; }
[data-design="mamuthones"] :is(.card, .cal-btn, .ko-card) { background: linear-gradient(180deg, #2a2019, #1f1813); border: 1px solid #4a3a2c; }
[data-design="mamuthones"] .btn.primary { background: linear-gradient(180deg, #e8b75a, #a8762a); border-color: #8a5f1f; color: #1b1206; }
[data-design="mamuthones"] .mainnav { background: #1a130e; border-top-color: #3a2e25; }

/* Giganti di Mont'e Prama: pietra calcarea, caratteri incisi, occhi a cerchi concentrici */
[data-design="monteprama"] {
  --font-body: "Source Sans 3", "Inter", sans-serif; --font-head: "Cinzel", Georgia, serif;
  --bg: #ece3d2; --surface: #f8f3ea; --surface-2: #f2ebde; --text: #2b2318; --muted: #6f6453; --border: #d9cbb2;
  --primary: #7a5530; --primary-ink: #fff; --primary-soft: #ead9c3; --accent: #4a6b52; --accent-soft: #dfe9e1;
  --men: #3d6a9e; --women: #a8325e; --shadow: 0 2px 0 #d2c2a5, 0 8px 18px rgba(80,60,30,.12); color-scheme: light;
}
[data-design="monteprama"] body { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='6' cy='9' r='1.2' fill='%23a8957044'/%3E%3Ccircle cx='27' cy='21' r='1' fill='%23a8957055'/%3E%3Ccircle cx='15' cy='33' r='1.4' fill='%239c886340'/%3E%3Ccircle cx='35' cy='5' r='.9' fill='%239c886350'/%3E%3C/svg%3E") 0 0 / 40px 40px, #ece3d2; }
[data-design="monteprama"] .theme-hero { display: block; background-image: url(../img/themes/monteprama.svg); border: 1px solid #d2c2a5; }
[data-design="monteprama"] :is(h1, h2) { font-weight: 700; letter-spacing: .06em; text-shadow: 0 1px 0 #fff, 0 -1px 0 rgba(90,70,40,.25); }
[data-design="monteprama"] .page-head h1::after { content: ""; display: block; width: 66px; height: 21px; margin-top: 6px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='14'%3E%3Cg fill='none' stroke='%238a7350' stroke-width='1.6'%3E%3Ccircle cx='11' cy='7' r='5.5'/%3E%3Ccircle cx='11' cy='7' r='2.4'/%3E%3Ccircle cx='33' cy='7' r='5.5'/%3E%3Ccircle cx='33' cy='7' r='2.4'/%3E%3C/g%3E%3C/svg%3E") left center / contain no-repeat; }
[data-design="monteprama"] .topbar { background: #f3ecdf; }
[data-design="monteprama"] .topbar::after { height: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='14'%3E%3Cg fill='none' stroke='%238a7350' stroke-width='1.6'%3E%3Ccircle cx='11' cy='7' r='5.5'/%3E%3Ccircle cx='11' cy='7' r='2.4'/%3E%3Ccircle cx='33' cy='7' r='5.5'/%3E%3Ccircle cx='33' cy='7' r='2.4'/%3E%3C/g%3E%3C/svg%3E") repeat-x left center / 44px 14px; }
[data-design="monteprama"] :is(.card, .cal-btn, .ko-card) { border-radius: 2px; clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px); }
[data-design="monteprama"] .btn { border-radius: 2px; font-family: "Cinzel", Georgia, serif; font-weight: 700; letter-spacing: .05em; }

/* Tessuto sardo: telai di Samugheo e Mogoro, rosso, giallo e nero, pibiones */
[data-design="tessuto"] {
  --font-body: "Nunito Sans", "Inter", sans-serif; --font-head: "Josefin Sans", "Inter", sans-serif;
  --bg: #f7f0e3; --surface: #fffaf1; --surface-2: #fbf4e7; --text: #1f1a17; --muted: #6b5f55; --border: #e8d9bf;
  --primary: #b3261e; --primary-ink: #fff; --primary-soft: #f8dcd8; --accent: #b98309; --accent-soft: #f8ebc8;
  --men: #24508f; --women: #b3261e; color-scheme: light;
}
[data-design="tessuto"] body { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='6' cy='6' r='2' fill='%23b3261e' opacity='.18'/%3E%3Ccircle cx='18' cy='18' r='2' fill='%23b3261e' opacity='.18'/%3E%3Ccircle cx='18' cy='6' r='1.2' fill='%231a1a1a' opacity='.12'/%3E%3Ccircle cx='6' cy='18' r='1.2' fill='%231a1a1a' opacity='.12'/%3E%3C/svg%3E") 0 0 / 24px 24px, #f7f0e3; }
[data-design="tessuto"] :is(h1, h2) { font-weight: 700; letter-spacing: .03em; }
[data-design="tessuto"] .theme-hero { display: block; background-image: url(../img/themes/tessuto.svg); }
[data-design="tessuto"] .topbar::after { height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='16' shape-rendering='crispEdges'%3E%3Crect width='32' height='16' fill='%23b3261e'/%3E%3Cpath d='M0 16 L8 8 L16 16 L24 8 L32 16 Z' fill='%231a1a1a'/%3E%3Crect x='14' y='3' width='4' height='2' fill='%23f2b632'/%3E%3Crect x='12' y='5' width='8' height='2' fill='%23f2b632'/%3E%3Crect x='14' y='7' width='4' height='2' fill='%23f2b632'/%3E%3Crect x='0' y='0' width='32' height='2' fill='%23f2b632'/%3E%3C/svg%3E") repeat-x left bottom / 32px 16px; }
[data-design="tessuto"] :is(.card, .cal-btn, .ko-card) { border-radius: 6px; border: 1px solid #e3cfa9; box-shadow: inset 0 6px 0 #b3261e, inset 0 9px 0 #f2b632, 0 4px 12px rgba(80,40,10,.08); padding-top: 22px; }
[data-design="tessuto"] .btn.primary { background: #b3261e; border-color: #8f1c16; box-shadow: inset 0 -3px 0 #1a1a1a; }
[data-design="tessuto"] .badge { border-radius: 4px; }

/* Spiaggia: sabbia, mare turchese, sole; forme morbide */
[data-design="spiaggia"] {
  --font-body: "Nunito", "Inter", sans-serif; --font-head: "Baloo 2", "Nunito", sans-serif;
  --bg: #fbf3e2; --surface: #fff; --surface-2: #fff9ee; --text: #18324a; --muted: #5e7488; --border: #f0e2c4;
  --primary: #0b84b3; --primary-ink: #fff; --primary-soft: #dcf1fa; --accent: #f08a24; --accent-soft: #fde8d3;
  --men: #0b84b3; --women: #d63f7a; --radius: 20px; color-scheme: light;
}
[data-design="spiaggia"] body { background: linear-gradient(rgba(251, 243, 226, .86), rgba(251, 243, 226, .9)), url(../img/photos/sabbia.jpg) center top / cover no-repeat, #fbf3e2; background-attachment: scroll; }
[data-design="spiaggia"] .theme-hero { display: block; background-image: url(../img/photos/arena-giorno.jpg), url(../img/themes/spiaggia.svg); background-position: 50% 76%, center; }
[data-design="spiaggia"] :is(h1, h2) { font-weight: 800; }
[data-design="spiaggia"] .topbar::after { height: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='14'%3E%3Cpath d='M0 9 q15 -9 30 0 t30 0 V14 H0 Z' fill='%2313a8cf'/%3E%3Cpath d='M0 9 q15 -9 30 0 t30 0' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") repeat-x left bottom / 60px 14px; }
[data-design="spiaggia"] :is(.card, .cal-btn, .ko-card) { border-radius: 20px; }
[data-design="spiaggia"] .btn { border-radius: 999px; font-weight: 800; }
[data-design="spiaggia"] .btn.primary { background: linear-gradient(180deg, #ffa44a, #f08a24); border-color: #e07816; color: #fff; }

/* Arena by night: campo illuminato, rete, pallone giallo-lime (scuro) */
[data-design="arena"] {
  --font-body: "Barlow", "Inter", sans-serif; --font-head: "Barlow Condensed", "Inter", sans-serif;
  --bg: #0a1430; --surface: #12204a; --surface-2: #172756; --text: #eef3fb; --muted: #9db0d3; --border: #26386c;
  --primary: #c6f432; --primary-ink: #142004; --primary-soft: #2a3a1e; --accent: #4fc1f0; --accent-soft: #12355a;
  --ok: #6ee7a8; --ok-soft: #0f3324; --danger: #ff7b72; --danger-soft: #3a1a1a; --warn-soft: #3a320f;
  --men: #8fc4f6; --women: #f08aa8; --shadow: 0 8px 24px rgba(0,0,0,.35); color-scheme: dark;
}
[data-design="arena"] body { background: radial-gradient(60% 40% at 10% 0%, rgba(255,251,224,.10), transparent), radial-gradient(60% 40% at 90% 0%, rgba(255,251,224,.10), transparent), #0a1430; }
[data-design="arena"] .theme-hero { display: block; background-image: url(../img/photos/arena-notte.jpg), url(../img/themes/arena.svg); background-position: 50% 64%, center; }
[data-design="arena"] :is(h1, h2, .tabs a, .btn) { font-family: var(--font-head); font-style: italic; text-transform: uppercase; letter-spacing: .03em; }
[data-design="arena"] h1 { font-size: 2rem; color: var(--primary); }
[data-design="arena"] .topbar { background: #0d1838; }
[data-design="arena"] .topbar::after { height: 10px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M0 0 H12 M0 0 V12' stroke='%23c6f432' stroke-width='1' opacity='.35'/%3E%3C/svg%3E") 0 0 / 12px 12px, linear-gradient(#c6f432, #c6f432) left top / 100% 2px no-repeat; }
[data-design="arena"] :is(.card, .cal-btn, .ko-card) { border: 1px solid #2c4282; border-radius: 10px; }
[data-design="arena"] .cal-team.win .sc, [data-design="arena"] .champion { color: var(--primary); }
[data-design="arena"] .mainnav { background: #0d1838; border-top-color: #26386c; }

/* Foto dell'arena (fornite dall'organizzazione): nel tema base scorrono in dissolvenza. */
.theme-hero i { display: none; }
:root:not([data-design]) .theme-hero { display: block; position: relative; overflow: hidden; background: #1b2c63; }
:root:not([data-design]) .theme-hero i {
  display: block; position: absolute; inset: 0; background: center / cover no-repeat; opacity: 0;
  animation: heroFade 24s infinite;
}
:root:not([data-design]) .theme-hero i:nth-child(1) { background-image: url(../img/photos/cagliari-arena-porto.jpg); background-position: 40% 80%; animation-delay: 0s; }
:root:not([data-design]) .theme-hero i:nth-child(2) { background-image: url(../img/photos/arena-notte.jpg); background-position: 50% 64%; animation-delay: 6s; }
:root:not([data-design]) .theme-hero i:nth-child(3) { background-image: url(../img/photos/arena-giorno.jpg); background-position: 50% 76%; animation-delay: 12s; }
:root:not([data-design]) .theme-hero i:nth-child(4) { background-image: url(../img/photos/arena-notte-ruota.jpg); background-position: 50% 72%; animation-delay: 18s; }
@keyframes heroFade { 0% { opacity: 0; } 5% { opacity: 1; } 25% { opacity: 1; } 30% { opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  :root:not([data-design]) .theme-hero i { animation: none; }
  :root:not([data-design]) .theme-hero i:nth-child(1) { opacity: 1; }
}

/* Arena Cagliari: viola, magenta e arancio dell'arena al porto di Cagliari, con le foto dell'evento */
[data-design="cagliari"] {
  --font-body: "Montserrat", "Inter", sans-serif; --font-head: "Montserrat", "Inter", sans-serif;
  --bg: #f6f1fa; --surface: #fff; --surface-2: #fbf8fd; --text: #24113a; --muted: #6b5a80; --border: #e7dcf1;
  --primary: #8e1f8f; --primary-ink: #fff; --primary-soft: #f6e0f4; --accent: #e08a00; --accent-soft: #fdecd0;
  --men: #3d4fb8; --women: #c2186f; --radius: 16px; color-scheme: light;
}
[data-design="cagliari"] body { background: radial-gradient(50% 40% at 100% 0%, rgba(214,36,159,.10), transparent), radial-gradient(40% 30% at 0% 100%, rgba(91,42,134,.10), transparent), #f6f1fa; }
[data-design="cagliari"] .theme-hero { display: block; background-image: url(../img/photos/cagliari-arena-porto.jpg); background-position: 40% 80%; }
[data-design="cagliari"] :is(h1, h2) { font-weight: 800; letter-spacing: -.01em; }
[data-design="cagliari"] h1 { background: linear-gradient(90deg, #5b2a86, #d6249f); -webkit-background-clip: text; background-clip: text; color: transparent; }
[data-design="cagliari"] .topbar::after { height: 6px; background: linear-gradient(90deg, #5b2a86, #d6249f 60%, #f7a21b); }
[data-design="cagliari"] :is(.card, .cal-btn, .ko-card) { border-radius: 16px; border: 1px solid #ead9f3; box-shadow: 0 6px 18px rgba(91,42,134,.08); }
[data-design="cagliari"] .tour-card { border-left: 5px solid #d6249f; }
[data-design="cagliari"] .btn { border-radius: 999px; font-weight: 700; }
[data-design="cagliari"] .btn.primary { background: linear-gradient(90deg, #5b2a86, #d6249f); border-color: transparent; }
[data-design="cagliari"] .badge { border-radius: 999px; }

/* Sartiglia: cavalieri mascherati di Oristano, rosso, bianco e oro delle coccarde */
[data-design="sartiglia"] {
  --font-body: "Lato", "Inter", sans-serif; --font-head: "Playfair Display", Georgia, serif;
  --bg: #fbf6f1; --surface: #fff; --surface-2: #fdf9f5; --text: #2a1414; --muted: #75585a; --border: #f0dcd6;
  --primary: #c8151e; --primary-ink: #fff; --primary-soft: #fde0dc; --accent: #b8860b; --accent-soft: #f8ecd0;
  --men: #2b4f8f; --women: #c8151e; color-scheme: light;
}
[data-design="sartiglia"] .theme-hero { display: block; background-image: url(../img/photos/sartiglia.jpg); background-position: 50% 24%; }
[data-design="sartiglia"] :is(h1, h2) { font-weight: 700; }
[data-design="sartiglia"] h1 { color: var(--primary); }
[data-design="sartiglia"] .topbar::after { height: 8px; background: repeating-linear-gradient(90deg, #c8151e 0 18px, #fff 18px 22px, #d4a52a 22px 30px, #fff 30px 34px); }
[data-design="sartiglia"] :is(.card, .cal-btn, .ko-card) { border-radius: 14px; border: 1px solid #f0d6cf; box-shadow: 0 4px 14px rgba(120, 20, 20, .07); }
[data-design="sartiglia"] .tour-card { border-top: 4px solid #c8151e; }
[data-design="sartiglia"] .btn.primary { background: #c8151e; border-color: #a30f17; box-shadow: inset 0 -3px 0 #d4a52a; }
[data-design="sartiglia"] .badge { border-radius: 999px; }

/* Nuraghe: pietra di basalto con i licheni, cielo blu */
[data-design="nuraghe"] {
  --font-body: "Source Sans 3", "Inter", sans-serif; --font-head: "Marcellus", Georgia, serif;
  --bg: #eef1f3; --surface: #fff; --surface-2: #f6f7f8; --text: #24221d; --muted: #67645b; --border: #dcdcd5;
  --primary: #1f5f9e; --primary-ink: #fff; --primary-soft: #dde9f5; --accent: #9a7d16; --accent-soft: #f3ecd0;
  --men: #1f5f9e; --women: #a8325e; color-scheme: light;
}
[data-design="nuraghe"] .theme-hero { display: block; background-image: url(../img/photos/nuraghe.jpg); background-position: 50% 42%; }
[data-design="nuraghe"] :is(h1, h2) { letter-spacing: .02em; }
[data-design="nuraghe"] .topbar::after { height: 10px; background: radial-gradient(ellipse 9px 4px at 10px 5px, #8a8576 98%, transparent) 0 0 / 20px 10px, radial-gradient(ellipse 9px 4px at 0 5px, #b5a14a 98%, transparent) 10px 0 / 20px 10px; }
[data-design="nuraghe"] :is(.card, .cal-btn, .ko-card) { border-radius: 18px 18px 18px 4px; border: 1px solid #d6d4cb; }
[data-design="nuraghe"] .btn { border-radius: 10px; }

/* Molentargius: fenicotteri rosa sullo stagno */
[data-design="molentargius"] {
  --font-body: "Quicksand", "Inter", sans-serif; --font-head: "Quicksand", "Inter", sans-serif;
  --bg: #f3f6f9; --surface: #fff; --surface-2: #f8fafc; --text: #1c2a38; --muted: #5d6e7f; --border: #dde5ec;
  --primary: #c94f7c; --primary-ink: #fff; --primary-soft: #fbe3ec; --accent: #3f6680; --accent-soft: #e0ebf2;
  --men: #3f6680; --women: #c94f7c; --radius: 22px; color-scheme: light;
}
[data-design="molentargius"] body { background: linear-gradient(180deg, #f3f6f9, #fbeef3); }
[data-design="molentargius"] .theme-hero { display: block; background-image: url(../img/photos/fenicottero.jpg); background-position: 50% 48%; }
[data-design="molentargius"] :is(h1, h2) { font-weight: 700; }
[data-design="molentargius"] .topbar::after { height: 8px; background: linear-gradient(90deg, #f4a3bf, #c94f7c 50%, #3f6680); }
[data-design="molentargius"] :is(.card, .cal-btn, .ko-card) { border-radius: 22px; }
[data-design="molentargius"] .btn { border-radius: 999px; font-weight: 700; }

/* Iscrizioni online, profilo, reward, messaggi */
.reg-line { margin: 6px 0 0; font-size: .85rem; font-weight: 600; color: var(--muted); }
.reg-line.open { color: var(--ok); }
.reg-list { list-style: none; margin: 0; padding: 0; }
.reg-list li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--border); flex-wrap: wrap; }
.reg-list li:first-child { border-top: 0; }
.reg-list li.wait { opacity: .75; }
.kq-move { display: inline-flex; gap: 2px; }
.reg-list .reg-no { min-width: 1.8em; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; font-weight: 700; }
.reg-list .reg-names { flex: 1; min-width: 180px; }
.reg-box { border-left: 5px solid var(--ok); }
.note.ok { background: var(--ok-soft); color: var(--text); }
.reward { font-size: 1.05em; line-height: 1; cursor: help; }
.stat small { display: block; margin-top: 4px; font-size: .72rem; }
.msg-alert { margin: 0 0 14px; padding: 12px 14px; border-radius: var(--radius); background: #fff4d6; color: #3a2a00;
  border: 2px solid #f0a500; box-shadow: 0 4px 14px rgba(240, 165, 0, .25); }
.msg-alert .msg-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 6px; }
.msg-alert .msg-head strong { font-size: 1.05rem; text-transform: uppercase; letter-spacing: .02em; }
.msg-alert .msg-text { margin-bottom: 10px; line-height: 1.5; overflow-wrap: anywhere; }
.msg-alert .btn { background: #fff; color: #3a2a00; border-color: #f0a500; }
.msg-users { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 12px; max-height: 320px; overflow: auto;
  border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; }

.badge.warn-b { background: var(--warn-soft); color: #7a5b00; border-color: #f0c419; }
.users-list li.homonym { background: var(--warn-soft); border-radius: 8px; padding-left: 8px; padding-right: 8px; }
.nick-form { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.nick-form input { width: 170px; min-height: 34px; }
.nick-form select { max-width: 260px; min-height: 34px; }

/* Stato del torneo nel riquadro */
.tour-flag { margin: 8px 0 0; font-weight: 800; font-size: .92rem; display: flex; align-items: center; gap: 6px; }
.tour-flag .flag-star { font-size: 1.35rem; line-height: 1; }
.tour-flag.open { color: #16a34a; }
.tour-flag.shut { color: #dc2626; }
.tour-flag.soon { color: #d97706; }
.tour-flag.done { color: #dc2626; text-transform: uppercase; letter-spacing: .04em; }
.tour-flag.live { color: #16a34a; text-transform: uppercase; letter-spacing: .04em; }
.blink { animation: tourBlink 1.2s ease-in-out infinite; }
@keyframes tourBlink { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .blink { animation: none; } }

/* ---------- prenotazione dei campi (slot di mezz'ora) ---------- */
:root { --slot-free: #dff5e3; --slot-free-b: #9fd8aa; --slot-busy: #fbe0de; --slot-busy-b: #f1a39c; --slot-busy-ink: #b42318; --slot-sel: #ffd23f; --slot-sel-ink: #3b2f00; }
.stats-row { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.date-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 14px 0; }
.date-nav input[type=date] { width: auto; }
.date-nav .btn.icon { padding: 0; width: 40px; min-height: 40px; justify-content: center; }
.date-label { text-transform: capitalize; margin-left: 4px; }
.bands { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.bands button { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-weight: 600; font-size: .88rem; cursor: pointer; }
.bands button.on { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.bands button:disabled { opacity: .4; cursor: not-allowed; }
.book-layout { display: flex; flex-direction: column; gap: 16px; margin-bottom: 16px; }
.book-grid { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.book-grid .court-box { margin: 0; }
.court-box { padding: 14px 16px; }
.court-box.closed { opacity: .7; }
.court-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 8px; }
.court-head h3 { margin: 0; font-size: 1.05rem; }
.strip-wrap { overflow-x: auto; padding-bottom: 4px; }
.strip { min-width: calc(var(--n) * 30px); }
.strip-labels, .strip-slots { display: grid; grid-template-columns: repeat(var(--n), minmax(26px, 1fr)); gap: 3px; }
.strip-labels { margin-bottom: 3px; font-size: .7rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.strip-labels .tl { border-left: 1px solid var(--border); padding-left: 3px; white-space: nowrap; }
.strip-slots { grid-auto-rows: 44px; }
.strip-slots .slot { min-width: 0; }
.slot button, .slot > div {
  width: 100%; height: 100%; min-height: 44px; border: 0; border-radius: 6px; cursor: pointer; padding: 2px 4px;
  font: inherit; font-size: .72rem; font-weight: 700; display: flex; flex-direction: column; align-items: center; justify-content: center;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.slot span { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: .78rem; }
.slot.free button { background: var(--slot-free); color: transparent; border: 1px solid var(--slot-free-b); }
.slot.free button:hover { background: var(--primary); }
.slot.sel button { background: var(--slot-sel); color: var(--slot-sel-ink); border: 1px solid rgba(0,0,0,.15); }
.slot.busy button, .slot.busy > div { background: var(--slot-busy); color: var(--slot-busy-ink); border: 1px solid var(--slot-busy-b); cursor: default; }
.slot.busy button { cursor: pointer; }
.slot.busy.mine button, .slot.busy.mine > div { background: #e5484d; color: #fff; border-color: #c62a2f; }
.slot.busy.blocked button, .slot.busy.blocked > div { background: repeating-linear-gradient(45deg, var(--slot-busy), var(--slot-busy) 6px, rgba(0,0,0,.12) 6px, rgba(0,0,0,.12) 12px), var(--slot-busy); }
.slot.busy small { font-weight: 500; opacity: .85; font-size: .68rem; }
.slot.off { border-radius: 6px; background: repeating-linear-gradient(45deg, transparent, transparent 5px, var(--surface-2) 5px, var(--surface-2) 10px); }
.slot.off.past { background: var(--surface-2); border: 1px dashed var(--border); }
.legend { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; font-size: .75rem; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.sw { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.sw.free { background: var(--slot-free); border: 1px solid var(--slot-free-b); }
.sw.busy { background: var(--slot-busy); border: 1px solid var(--slot-busy-b); }
.sw.sel { background: var(--slot-sel); }
.sw.off { background: repeating-linear-gradient(45deg, var(--surface), var(--surface) 3px, var(--border) 3px, var(--border) 6px); border: 1px solid var(--border); }
.book-summary { border: 2px solid var(--primary); margin: 0; }
.book-summary.idle { border: 1px solid var(--border); }
.book-summary h3 { margin: 0 0 8px; }
.book-summary label { margin-bottom: 10px; }
dl.summary { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 8px 0; font-size: .9rem; }
dl.summary dt { color: var(--muted); }
dl.summary dd { margin: 0; }
dl.summary dd:first-letter { text-transform: uppercase; }
@media (min-width: 901px) {
  .book-summary .summary-body { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(240px, 1fr); gap: 0 24px; align-items: start; }
}
@media (max-width: 900px) {
  .strip { min-width: calc(var(--n) * 38px); }
  .book-summary.active { position: sticky; bottom: 8px; z-index: 5; box-shadow: 0 -6px 24px rgba(0,0,0,.15); }
  .book-summary.active .legend { display: none; }
}
.court-form { padding: 14px 16px; }
.court-form table.hours td, .court-form table.hours th { padding: 4px 6px; }
.court-form table.hours select { padding: 4px 6px; min-height: 34px; }
.court-form table.hours input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--primary); }
.ban-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 6px; font-size: .8rem; color: var(--muted); }
.ban-row label.check { font-size: .8rem; }
.users-list li.banned { background: var(--danger-soft); }
.cap { text-transform: capitalize; }
.slot a { width: 100%; height: 100%; min-height: 44px; border-radius: 6px; padding: 2px 4px; font-size: .72rem; font-weight: 700; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; white-space: nowrap; text-decoration: none; }
.slot.busy a { background: repeating-linear-gradient(135deg, var(--slot-busy), var(--slot-busy) 6px, rgba(124, 58, 237, .14) 6px, rgba(124, 58, 237, .14) 12px), var(--slot-busy); color: #5b21b6; border: 1px solid #c4b5fd; }

/* ---------- sfide ---------- */
.ch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 14px; }
.ch-card { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.ch-card.mine { border: 2px solid var(--primary); }
.ch-card h3 { margin: 4px 0 0; font-size: 1.05rem; }
.ch-card h4 { margin: 8px 0 4px; font-size: .9rem; }
.ch-card p { margin: 2px 0; }
.ch-head { display: flex; flex-wrap: wrap; gap: 6px; }
.ch-players { list-style: none; padding: 0; margin: 4px 0; display: flex; flex-direction: column; gap: 4px; font-size: .92rem; }
.ch-players .icon-btn { padding: 0 6px; }
.ch-me { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.badge.ch-full { background: var(--primary-soft); color: var(--primary); border-color: transparent; }
.badge.lvl-start { background: #e7f6e7; color: #23672a; border-color: transparent; }
.badge.lvl-inter { background: #e6f0fb; color: #1d4f8a; border-color: transparent; }
.badge.lvl-high { background: #fff1db; color: #8a5300; border-color: transparent; }
.badge.lvl-pro { background: #fde4e4; color: #9b1c1c; border-color: transparent; }
.msg-alert.warn-alert { background: #ffe9d6; border-color: #f59e0b; }

/* ---------- cerco compagno/a ---------- */
.ps-list { list-style: none; padding: 0; margin: 8px 0; display: flex; flex-direction: column; gap: 10px; }
.ps-list > li { border: 1px solid var(--border); border-radius: calc(var(--radius) - 4px); padding: 10px 12px; }
.ps-list > li.mine { border: 2px solid var(--primary); }
.ps-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.ps-owner { margin-top: 8px; }
.ps-app.declined, .ps-app.revoked { opacity: .6; }
.msg-alert .ps-owner .reg-list li { background: rgba(255, 255, 255, .6); }
.badge.lvl-any { background: var(--surface-2); color: var(--muted); border-color: transparent; }

/* ---------- gioco libero ---------- */
.fp-card { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.fp-card.mine { border: 2px solid var(--primary); }
.fp-card h3 { margin: 2px 0 0; }
.fp-counts { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 1.05rem; margin: 4px 0; }
.fp-counts .ti { color: var(--primary); }
.fp-join { display: flex; flex-wrap: wrap; align-items: end; gap: 8px 12px; }
.fp-join label { flex: 1 1 160px; }
.fp-join small { flex-basis: 100%; }
.fp-levels { border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.fp-admin h4 { margin: 10px 0 4px; font-size: .9rem; }
.fp-pick { flex-basis: 100%; border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; }
.fp-pick label.check { flex: 0 0 auto; }
form[data-form=fp-blocks] { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.fp-blocks { margin: 2px 0 4px; }
.fp-blocks .table td, .fp-blocks .table th { padding: 4px 8px; }
.fp-blocks .ti { color: var(--primary); }
.fp-byblock li { margin: 2px 0; }
/* menu in basso con molte voci: si scorre in orizzontale invece di stringere troppo le voci */
@media (max-width: 1199px) {
  .mainnav { overflow-x: auto; scrollbar-width: none; grid-auto-columns: minmax(52px, 1fr); }
  .mainnav::-webkit-scrollbar { display: none; }
}
/* Schermi medi con molte voci (admin, utente collegato): il menu va su una seconda riga sotto logo e pulsanti */
@media (min-width: 1200px) and (max-width: 1699px) {
  .topbar { flex-wrap: wrap; row-gap: 4px; }
  .topbar .brand { margin-right: auto; }
  .mainnav { order: 10; flex: 1 0 100%; justify-content: center; flex-wrap: wrap; }
  .mainnav a { padding: 6px 12px; font-size: .88rem; }
}

/* ---------- allenamenti ---------- */
.month-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 14px; }
.month-nav strong { min-width: 9em; text-align: center; }
.month-nav input[type=search] { flex: 1 1 180px; margin-left: auto; }
.tr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 14px; margin-bottom: 14px; }
.tr-card { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.tr-card h3 { margin: 2px 0 0; }
.tr-card h4 { margin: 8px 0 2px; font-size: .9rem; }
.badge.st-full { background: #fde3e3; color: #a11; border-color: transparent; }
.badge.cert-ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.badge.cert-soon { background: #fff1db; color: #8a5300; border-color: transparent; }
.badge.cert-expired { background: #fde3e3; color: #a11; border-color: transparent; }
.badge.cert-none, .badge.tess-no { background: transparent; color: var(--muted); }
.ath-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.ath-card { margin: 0; }
.ath-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.ath-head > div { flex: 1 1 240px; line-height: 1.7; }
.ath-card form { margin-top: 12px; border-top: 1px dashed var(--border); padding-top: 10px; }
.msg-alert.danger { background: #fde3e3; color: #5a0000; }
.inline-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.inline-form select { flex: 1 1 200px; }
.coach-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.coach-list li .reg-names { flex: 1 1 160px; }
.coach-list li select { flex: 0 1 240px; }
.occ-sum { font-weight: 600; margin: 2px 0; }
.occ-card.is-cancelled { opacity: .75; }
.occ-card .reg-list li { flex-wrap: wrap; }
.rec-form { flex-basis: 100%; margin-top: 8px; border-top: 1px dashed var(--border); padding-top: 8px; }
.att-btns { margin-top: 6px; }
.msg-alert.ok { background: var(--ok-soft); color: var(--ok); }
.att-alert { border: 2px solid var(--primary); }
.pay-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 8px 0 0; }
.pay-wrap { flex-basis: 100%; }
.pay-form { flex-basis: 100%; margin-top: 8px; border-top: 1px dashed var(--border); padding-top: 8px; }
.badge.pay-paid { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.badge.pay-late { background: #fde3e3; color: #a11; border-color: transparent; }
.badge.pay-due { background: #fff1db; color: #8a5300; border-color: transparent; }
li.is-void { opacity: .6; }
/* grafici del profilo (una serie, colore primario) */
.charts-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 18px; margin: 10px 0; }
.bar-fig { margin: 0; }
.bar-fig figcaption { font-weight: 600; font-size: .9rem; margin-bottom: 8px; }
.bar-chart { display: flex; align-items: flex-end; gap: 6px; height: 150px; padding: 18px 2px 0; border-bottom: 1px solid var(--border); }
.bar-col { flex: 1 1 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; min-width: 0; }
.bar-col .bar { width: 70%; max-width: 34px; min-height: 0; background: var(--primary); border-radius: 4px 4px 0 0; }
.bar-col:hover .bar { filter: brightness(1.15); }
.bar-col .bar-val { font-size: .75rem; font-weight: 700; color: var(--text); margin-bottom: 2px; }
.bar-col .bar-lbl { position: absolute; bottom: -20px; font-size: .7rem; color: var(--muted); white-space: nowrap; }
.bar-table { margin-top: 26px; font-size: .85rem; }
.bar-table summary { cursor: pointer; color: var(--muted); }
/* stato presenza: colori fissi in ogni tema */
.badge.att-chip { border-color: transparent !important; font-weight: 700; }
.badge.att-in { background: #1e8e3e !important; color: #fff !important; }
.badge.att-out { background: #d93025 !important; color: #fff !important; }
.badge.att-wait { background: #9aa0a6 !important; color: #fff !important; }
.badge.att-late { background: #f29900 !important; color: #1f1300 !important; }
/* ---------- footer legale, avviso cookie, testi legali ---------- */
.site-footer { max-width: 1200px; margin: 30px auto 0; padding: 18px 16px calc(90px + env(safe-area-inset-bottom)); font-size: .8rem; color: var(--muted); text-align: center; line-height: 1.6; }
.site-footer p { margin: 2px 0; }
.site-footer a { color: inherit; }
.cookie-bar { position: fixed; left: 12px; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 60; max-width: 720px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: 12px; background: var(--surface, #fff); color: var(--text); box-shadow: 0 6px 24px rgba(0,0,0,.25); border: 1px solid var(--border); font-size: .9rem; }
.cookie-bar[hidden] { display: none; }
.cookie-bar p { margin: 0; flex: 1 1 260px; }
@media (min-width: 900px) { .cookie-bar { bottom: 16px; } }
.legal-text h2 { font-size: 1.05rem; margin: 18px 0 6px; }
.legal-text ul { padding-left: 20px; }
.legal-text li { margin: 4px 0; line-height: 1.5; }
.legal-text p { line-height: 1.55; }
.legal-check span { font-weight: 400; }

.pack-box { margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--border); }
.pack-box h3 { margin-top: 0; }
.rp-table th[scope=row] { text-align: left; font-weight: 600; white-space: nowrap; }
.rp-table td.num, .rp-table th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rp-table tfoot th, .rp-table tfoot td { border-top: 2px solid var(--border); }
/* report: visione per corsisti */
.rp-table .linkish { background: none; border: 0; padding: 4px 0; font: inherit; font-weight: 700; color: var(--primary); text-decoration: underline; cursor: pointer; text-align: left; min-height: 32px; }
.rp-table tr.rp-sel th, .rp-table tr.rp-sel td { background: var(--primary-soft); }
.rp-ath-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.rp-ath-list { list-style: none; margin: 0; padding: 0; }
.rp-ath-row { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; border-top: 1px solid var(--border); }
.rp-ath-row:first-child { border-top: 0; }
.rp-ath-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.rp-ath-nums { display: flex; gap: 6px; flex-wrap: wrap; }
.rp-pill { padding: 3px 10px; border-radius: 999px; font-size: .8rem; font-weight: 700; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }
.rp-pill.rp-in { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.rp-pill.rp-out { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.rp-pill.rp-nr { color: var(--muted); border-style: dashed; }
.rp-days { display: flex; flex-wrap: wrap; gap: 4px; }
.rp-day { display: inline-flex; align-items: center; gap: 2px; padding: 2px 6px; border-radius: 8px; font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.rp-day.rp-in { background: var(--ok-soft); color: var(--ok); }
.rp-day.rp-out { background: var(--danger-soft); color: var(--danger); }
.rp-day.rp-nr { background: var(--surface-2); color: var(--muted); border: 1px dashed var(--border); }
.ca-line { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(5em, 1fr); gap: 8px; margin-bottom: 8px; }
.ca-line select[name=bk]:not([hidden]) { grid-column: 1 / -1; }
.ca-line input[name=amount] { text-align: right; }
@media (max-width: 560px) { .ca-line { grid-template-columns: 1fr 6em; } .ca-line .ca-cat-l, .ca-line input[name=desc] { grid-column: 1 / -1; } }
.badge.rc-Q { background: #e3f2e8; color: #1e6b3a; }
.badge.rc-C { background: #fff1d6; color: #8a5300; }
.ca-list .is-void, .reg-list .is-void { opacity: .6; }
.ca-form [hidden] { display: none !important; }
.ca-line .ca-cat-l { display: flex; flex-direction: column; gap: 2px; font-size: .85em; font-weight: 600; }
.ca-line { align-items: end; }
.tess-star { color: #d93025; font-weight: 700; margin-left: 4px; }
.bk-players { display: grid; gap: 8px; margin: 10px 0; padding-top: 8px; border-top: 1px solid var(--border); }
.bk-players h4 { margin: 0; }
.bk-players label { display: flex; flex-direction: column; gap: 2px; }
.slot.busy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; display: block; }
/* banner cookie: Rifiuta e Accetta con pari evidenza; "Personalizza" mostra le categorie */
.cookie-bar .ck-custom, .cookie-bar .ck-save { display: none; }
.cookie-bar.custom .ck-custom { display: flex; flex-direction: column; gap: 6px; flex-basis: 100%; }
.cookie-bar.custom .ck-save { display: inline-flex; }
.cookie-bar.custom .ck-cust-btn { display: none; }
.cookie-bar .btn-row { flex-wrap: wrap; gap: 8px; }
.ch-card.flash-target { outline: 3px solid #e8175d; outline-offset: 2px; }
/* utenti registrati: riga compatta, scheda completa aperta al clic */
.users-list .user-item { width: 100%; }
.users-list .user-item > summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 4px 0; }
.users-list .user-item > summary::-webkit-details-marker { display: none; }
.users-list .user-item > summary::before { content: '▸'; color: var(--muted, #888); width: 1em; }
.users-list .user-item[open] > summary::before { content: '▾'; }
.users-list .user-item[open] > summary { margin-bottom: 8px; }
/* King & Queen of the Beach */
.kq-games td { vertical-align: top; }
.kq-games .kq-win { font-weight: 700; }
.kq-games td.num { text-align: left; min-width: 6.5em; }
.kq-sched summary { font-weight: 400; color: var(--muted); }
.kq-score { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kq-score input { width: 4.2em; }
.kq-final-sets .kq-set { display: inline-flex; align-items: center; gap: 4px; margin-right: 8px; }
.kq-live { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.kq-winner { font-size: 1.1rem; }
.kq-pname { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.kq-pname input { flex: 1; min-width: 0; }
.kq-rank ol { margin: 4px 0 0; padding-left: 1.4em; } .kq-rank { margin-top: 8px; }

/* ---------- Profilo: tessera giocatore e prossimi impegni ---------- */
.profile-hero { background: var(--primary); color: var(--primary-ink); border: 0; display: flex; flex-direction: column; gap: 16px; padding: 20px; }
.profile-hero .ph-top { display: flex; align-items: center; gap: 14px; }
.profile-hero .ph-avatar { flex: none; width: 64px; height: 64px; border-radius: 50%; background: var(--primary-ink); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 800; letter-spacing: .5px; }
.profile-hero .ph-name { flex: 1; min-width: 0; }
.profile-hero h1 { margin: 0; font-size: 1.6rem; line-height: 1.1; color: inherit; }
.profile-hero .ph-name p { margin: 4px 0 0; }
.profile-hero .ph-mail { font-size: .85rem; opacity: .85; overflow-wrap: anywhere; }
.profile-hero .ph-reward { flex: none; padding: 6px 10px; border-radius: 10px; background: var(--gold); color: #2b2104; font-weight: 800; font-size: .8rem; }
.profile-hero .ph-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.profile-hero .ph-stats > div { padding: 10px; border-radius: 12px; background: color-mix(in srgb, var(--primary-ink) 14%, transparent); display: flex; flex-direction: column; gap: 2px; }
.profile-hero .ph-stats strong { font-size: 1.5rem; line-height: 1.1; }
.profile-hero .ph-stats span { font-size: .75rem; opacity: .9; }
.profile-hero .ph-progress { display: flex; flex-direction: column; gap: 6px; }
.profile-hero .ph-prog-head { display: flex; justify-content: space-between; gap: 8px; font-size: .8rem; opacity: .95; flex-wrap: wrap; }
.profile-hero .ph-bar { height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--primary-ink) 20%, transparent); overflow: hidden; }
.profile-hero .ph-bar span { display: block; height: 100%; background: var(--gold); border-radius: 4px; }
.profile-hero .badge { background: var(--primary-ink); color: var(--primary); }
.agenda { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ag-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); flex-wrap: wrap; }
.ag-chip { flex: none; width: 58px; min-height: 50px; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; line-height: 1.15; }
.ag-chip small { font-size: .65rem; font-weight: 700; text-transform: uppercase; }
.ag-chip strong { font-size: .95rem; }
.ag-tr { background: var(--primary-soft); color: var(--primary); }
.ag-fp { background: var(--accent-soft); color: var(--accent); }
.ag-bk { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }
.ag-to { background: var(--warn-soft); color: var(--text); }
.ag-body { flex: 1 1 160px; min-width: 0; }
.ag-side { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.ag-side .att-btns { margin: 0; }
.push-card .push-prefs { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 10px; }
.push-card .push-prefs label.check { display: flex; align-items: center; justify-content: space-between; flex-direction: row-reverse; gap: 12px; min-height: 40px; padding: 4px 0; border-bottom: 1px solid var(--border); }
.push-card .push-prefs label.check input { width: 22px; height: 22px; accent-color: var(--primary); }
.filter-note { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* Halloween su schermo largo: il menu è in alto, le decorazioni stanno nell'angolo in basso */
@media (min-width: 1200px) {
  [data-design="halloween"] body::before { bottom: 12px; right: 16px; width: 110px; height: 56px; background-size: 42px, 56px; }
  [data-design="halloween"] .mainnav { background: transparent; border-top: 0; }
}
/* Natale su schermo largo: il menu è in alto, le decorazioni stanno nell'angolo in basso */
@media (min-width: 1200px) {
  [data-design="natale"] body::before { bottom: 12px; right: 16px; width: 140px; height: 68px; background-size: auto 50px, 32px, auto 68px; background-position: 0 100%, 50px 100%, 100% 100%; }
  [data-design="natale"] .mainnav { background: transparent; border-top: 0; }
}
/* Capodanno e Befana su schermo largo: il menu è in alto, le decorazioni stanno nell'angolo in basso */
@media (min-width: 1200px) {
  [data-design="capodanno"] body::before { bottom: 12px; right: 16px; width: 120px; height: 66px; background-size: 44px, 62px; }
  [data-design="befana"] body::before { bottom: 12px; right: 16px; width: 110px; height: 70px; background-size: auto 56px, auto 70px; }
  :is([data-design="capodanno"], [data-design="befana"]) .mainnav { background: transparent; border-top: 0; }
}
/* Stagioni dei tornei (impostazioni) */
.season-row { align-items: flex-end; padding: 10px 0; border-top: 1px solid var(--border); }
.season-row:first-of-type { border-top: 0; }
.season-row label { display: flex; flex-direction: column; gap: 4px; }
.season-row input[name=name] { min-width: 180px; }
.season-row select { flex: none; height: auto; min-height: 44px; min-width: 200px; }
.rank-season-note { margin: 4px 0 10px; }
.bk-times { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.bk-times label { display: flex; flex-direction: column; gap: 4px; }
.bk-times select { min-height: 40px; min-width: 96px; }
.adm-notices summary { cursor: pointer; list-style: none; }
.adm-notice-list { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 360px; overflow: auto; }
.adm-notice-list li { display: flex; gap: 8px; align-items: flex-start; padding: 6px 0; border-top: 1px solid var(--border); }
.adm-notice-list li span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
/* Recupero allenamento (allenamento extra in una sola data) */
.tr-form:not(.is-extra):not(:has([name=kind][value=extra]:checked)) .only-extra { display: none; }
.tr-form.is-extra .only-weekly, .tr-form:has([name=kind][value=extra]:checked) .only-weekly { display: none; }
.tr-kind { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.badge.tr-extra-badge { background: #6d3fd1; color: #fff; border-color: #6d3fd1; }
.tr-card.tr-extra { border-color: #6d3fd1; box-shadow: inset 6px 0 0 #6d3fd1, var(--shadow, none); background: linear-gradient(180deg, rgba(109, 63, 209, .10), rgba(109, 63, 209, 0) 70%), var(--surface); }
.tr-pick input { min-height: 36px; }
.tr-month-list { display: flex; flex-direction: column; gap: 4px; }
.tr-month-day { padding: 10px 0; border-top: 1px solid var(--border); }
.tr-month-day:first-child { border-top: 0; }
.tr-month-day.is-today .tr-month-date { color: var(--primary); }
.tr-month-date { font-weight: 800; background: none; border: 0; padding: 0; color: var(--text); cursor: pointer; font: inherit; font-weight: 800; }
.tr-month-day li { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 4px 0; }
.tr-month-day li .linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--text); cursor: pointer; text-align: left; }
.tr-month-day li.tr-extra-row { border-left: 4px solid #6d3fd1; padding-left: 8px; }

/* ---------- figurina del giocatore ---------- */
.fig-wrap { margin: 0 0 16px; }
.fig { position: relative; max-width: 360px; margin: 0 auto; border-radius: 22px; padding: 9px; background: linear-gradient(135deg, #ffd400, #ff8a00 55%, #e8174b); box-shadow: 0 10px 28px rgba(0, 0, 0, .22); }
.fig-in { background: #fff; color: #111; border-radius: 15px; overflow: hidden; }
.fig-top { position: relative; height: 150px; background: linear-gradient(160deg, #0a7cff, #00c2d1); display: flex; align-items: flex-end; justify-content: center; }
.fig.g-F .fig-top { background: linear-gradient(160deg, #e8174b, #ff8a00); }
.fig-ph { width: 124px; height: 124px; border-radius: 50%; background: #fff; border: 5px solid #ffd400; display: grid; place-items: center; margin-bottom: -44px; overflow: hidden; font: 900 46px/1 var(--font-head, system-ui); color: #0a7cff; }
.fig-ph img { width: 100%; height: 100%; object-fit: cover; }
.fig-num { position: absolute; top: 10px; left: 12px; background: #111; color: #ffd400; font-weight: 900; font-size: 13px; padding: 6px 9px; border-radius: 8px; text-transform: uppercase; }
.fig-lvl { position: absolute; top: 10px; right: 12px; background: #fff; color: #111; font-weight: 800; font-size: 12px; padding: 5px 9px; border-radius: 999px; }
.fig-name { text-align: center; margin: 52px 12px 0; font-size: 23px; line-height: 1.1; text-transform: uppercase; color: #111; }
.fig-sub { text-align: center; color: #666; font-size: 13px; font-weight: 600; margin: 4px 0 0; }
.fig-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 12px 12px 0; }
.fig-stats div { background: #f2f4f8; border-radius: 10px; padding: 8px 4px; text-align: center; }
.fig-stats strong { display: block; font-size: 21px; line-height: 1.1; color: #111; }
.fig-stats span { display: block; font-size: 10.5px; font-weight: 700; line-height: 1.2; color: #666; text-transform: uppercase; margin-top: 2px; }
.fig-own div { background: #fff5cc; }
.fig-note { font-size: 11px; color: #777; text-align: center; margin: 6px 12px 0; }
.fig-badges { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 12px 0; justify-content: center; }
.fig-badges span { font-size: 12px; font-weight: 700; background: #fff5cc; border: 1px solid #ffd400; border-radius: 999px; padding: 4px 9px; color: #111; }
.fig-foot { display: flex; justify-content: space-between; gap: 8px; background: #111; color: #fff; font-size: 12px; font-weight: 700; padding: 9px 14px; margin-top: 12px; }
.fig-foot span:last-child { color: #ffd400; }
.fig-actions { justify-content: center; margin-top: 12px; }
.fig-upload { cursor: pointer; }
.fig-hint { text-align: center; margin: 6px 0 0; }
/* ---------- Wrapped ---------- */
.wr-nav { justify-content: space-between; }
.wr { position: relative; max-width: 420px; min-height: 560px; margin: 0 auto; border-radius: 24px; overflow: hidden; color: #fff; padding: 22px 22px 30px; box-shadow: 0 12px 30px rgba(0, 0, 0, .25); }
.wr-a { background: radial-gradient(circle at 15% 10%, #ff4d8d, transparent 55%), radial-gradient(circle at 95% 85%, #ffd400, transparent 45%), #3a0ca3; }
.wr-b { background: radial-gradient(circle at 85% 5%, #00e1ff, transparent 50%), #0b1f4d; }
.wr-c { background: radial-gradient(circle at 10% 90%, #9bd15a, transparent 50%), #0f3d2e; }
.wr-d { background: radial-gradient(circle at 90% 10%, #ffd400, transparent 45%), #7a1028; }
.wr-e { background: radial-gradient(circle at 20% 15%, #ff8a00, transparent 50%), #3b1f0b; }
.wr-f { background: radial-gradient(circle at 15% 10%, #ff4d8d, transparent 50%), radial-gradient(circle at 90% 90%, #00e1ff, transparent 45%), #2b0a8a; }
.wr-dots { display: flex; gap: 4px; margin-bottom: 22px; position: relative; z-index: 2; }
.wr-dots i { flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .35); }
.wr-dots i.on { background: #fff; }
.wr-body { position: relative; z-index: 1; }
.wr small { font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .9; font-size: 12px; }
.wr h2 { font-size: 32px; line-height: 1.05; margin: 10px 0 18px; color: #fff; }
.wr-big { font-size: 74px; font-weight: 900; line-height: 1; color: #ffd400; margin-top: 8px; }
.wr-of { font-size: 34px; color: #fff; opacity: .8; }
.wr p { font-size: 17px; font-weight: 600; line-height: 1.4; margin: 6px 0; color: #fff; }
.wr .wr-soft { opacity: .85; }
.wr-row { display: flex; justify-content: space-between; gap: 10px; border-top: 1px solid rgba(255, 255, 255, .25); padding: 10px 0; font-weight: 700; font-size: 15px; }
.wr-row b { color: #ffd400; text-align: right; }
.wr-share { position: relative; z-index: 3; width: 100%; justify-content: center; margin-top: 18px; background: #fff; color: #111; border-color: #fff; }
.wr-tap { position: absolute; top: 0; bottom: 0; z-index: 2; background: transparent; border: 0; cursor: pointer; }
.wr-prev { left: 0; width: 30%; }
.wr-next { right: 0; width: 70%; }
.wr-hint { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; font-size: 12px !important; opacity: .7; }
.wr-ctrl { justify-content: center; margin-top: 12px; }
.wr-teaser { display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; background: radial-gradient(circle at 10% 10%, #ff4d8d, transparent 60%), #3a0ca3; border: 0; }
.wr-teaser small { color: #fff; opacity: .85; }
.wr-teaser strong { color: #fff; }
.wr-teaser-ic { font-size: 30px; }
.wr-teaser .ti { margin-left: auto; font-size: 22px; }
.wr-list { display: flex; flex-wrap: wrap; gap: 8px; }
.wr-chip { display: flex; flex-direction: column; padding: 10px 14px; border-radius: 14px; text-decoration: none; color: #fff; background: linear-gradient(135deg, #3a0ca3, #e8174b); }
.wr-chip small { opacity: .85; }
.ph-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.ph-avatar { overflow: hidden; }

/* ---------- Fantabeach ---------- */
.fb-head h2 { margin: 0 0 4px; }
.fb-team-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fb-pl { display: flex; align-items: center; gap: 8px; border-radius: 12px; padding: 8px; background: var(--surface-2, #f2f4f8); font-weight: 700; font-size: 14px; min-width: 0; }
.fb-pl span { overflow: hidden; text-overflow: ellipsis; }
.fb-pl i { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-style: normal; font-weight: 900; font-size: 12px; }
.fb-pl.g-M i { background: #0a7cff; } .fb-pl.g-F i { background: #e8174b; }
.fb-tag { display: inline-block; font-size: 11px; font-weight: 800; border-radius: 999px; padding: 3px 8px; color: #fff; white-space: nowrap; }
.fb-tag.tm { background: #0a7cff; } .fb-tag.tf { background: #e8174b; } .fb-tag.tx { background: #6d3fd1; }
.fb-pairs li { padding: 4px 0; }
.fb-swap { border: 1px dashed var(--border); border-radius: 12px; padding: 8px 12px; margin-top: 10px; }
.fb-swap label { display: flex; gap: 8px; align-items: center; padding: 4px 0; }
.fb-pairlist li { padding: 8px 0; border-top: 1px solid var(--border); }
.fb-pairlist li.mine { background: var(--accent-soft); border-radius: 8px; padding: 8px; }
.fb-q { color: var(--muted); font-weight: 900; margin: 0 6px; }
.fb-lock { text-align: center; background: #fff5cc; color: #111; border: 1px solid #ffd400; border-radius: 12px; padding: 10px; font-weight: 700; }
.fb-match { border-top: 1px solid var(--border); padding: 10px 0; }
.fb-match.mine .fb-vs { background: linear-gradient(135deg, #3a0ca3, #e8174b); color: #fff; }
.fb-vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; border-radius: 12px; padding: 10px; background: var(--surface-2, #f2f4f8); margin: 6px 0; }
.fb-vs .right { text-align: right; }
.fb-sc { font-weight: 900; font-size: 22px; text-align: center; }
.fb-match.mine .fb-sc { color: #ffd400; }
.fb-mini { display: grid; grid-template-columns: auto 1fr 1fr; gap: 6px; align-items: center; font-size: 13px; padding: 4px 0; }
.fb-mini .right { text-align: right; }
.fb-mini .win { color: #1a9c4b; font-weight: 700; } .fb-mini .lose { color: var(--muted); }
.fb-detail ul { margin: 2px 0 8px; padding-left: 18px; font-size: 13px; }
.fb-rules li { margin: 4px 0; line-height: 1.45; }
.fb-scoring { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; border: 1px solid var(--border); border-radius: 12px; padding: 10px; }
.fb-vrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; border: 0; border-top: 1px solid var(--border); padding: 8px 0; margin: 0; }
.fb-vrow legend { float: left; font-weight: 700; margin-right: auto; padding: 0; }
.fb-vb { position: relative; }
.fb-vb input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.fb-vb span { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 12px; border: 2px solid var(--text); border-radius: 10px; font-weight: 800; font-size: .9rem; white-space: nowrap; cursor: pointer; }
.fb-vb input:checked + span { background: #ffd400; color: #111; }
.fb-vb input:focus-visible + span { outline: 3px solid var(--primary); }
.fb-cv { display: inline-flex; gap: 4px; align-items: center; margin-left: 6px; }
.rk-me td { background: var(--accent-soft); }
.ed-linkset { border: 1px solid var(--border); border-radius: 12px; padding: 8px 12px; display: grid; gap: 8px; }
.ed-foot .ed-link { margin-left: auto; }
.article-body .ed-link { margin-top: 14px; }
.ver-bar { position: fixed; left: 12px; right: 12px; bottom: calc(var(--nav-h) + 12px + env(safe-area-inset-bottom)); z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--text); color: var(--surface); padding: 10px 14px; border-radius: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.25); font-weight: 600; }
@media (min-width: 1200px) { .ver-bar { left: auto; right: 24px; bottom: 24px; max-width: 420px; } }
.cert-only { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.table td.wl.strong { font-weight: 800; }
.table .wl { width: 2.5em; }
.fb-admin-teams li { padding: 8px 0; border-top: 1px solid var(--border); }
.fb-admin-teams .btn-row { margin-top: 6px; }
.fb-adm-form { margin-top: 8px; }
.super-list { list-style: none; margin: 0; padding: 0; }
.super-row { border-top: 1px solid var(--border); padding: 10px 0; display: grid; gap: 6px; }
.super-head { display: flex; justify-content: space-between; gap: 8px; align-items: center; flex-wrap: wrap; }
.super-teams { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-weight: 700; }
.super-sets { font-weight: 800; letter-spacing: .04em; }
.super-grid { display: grid; grid-template-columns: auto 64px 64px; gap: 6px 8px; align-items: center; max-width: 260px; }
.super-grid input { text-align: center; }
.super-tours { display: grid; gap: 4px; }
.super-pick summary { cursor: pointer; font-size: .9rem; }
.scorer-edit { flex-basis: 100%; margin-top: 8px; }
.scorer-list li.is-suspended > span:not(.badge) { opacity: .6; text-decoration: line-through; }
.played-item { flex-direction: column; align-items: stretch !important; }
.fb-vote-in { border-top: 1px dashed var(--border); margin-top: 8px; padding-top: 6px; }

/* scheda evidenziata quando ci si arriva da un collegamento (es. allenamento cliccato nella griglia dei campi) */
.flash-focus { outline: 3px solid var(--primary); outline-offset: 3px; transition: outline-color .4s; }
.occ-card { scroll-margin-top: 96px; }

/* Sondaggi: riquadro in prima pagina, risultati, editor dell'admin */
.poll-card .page-head { margin-bottom: 4px; }
.poll-vq { border: 0; padding: 0; margin: 14px 0 0; }
.poll-vq .pq { display: block; font-weight: 700; margin-bottom: 6px; }
.poll-vq textarea, .poll-vq select { width: 100%; }
.poll-choices { display: grid; gap: 6px; }
.poll-choices.long { max-height: 260px; overflow-y: auto; padding-right: 4px; }
.poll-choices .check { align-items: flex-start; }
.poll-bars { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; }
.poll-bars .pb-top { display: flex; justify-content: space-between; gap: 10px; font-size: .92rem; }
.poll-bars .pb-top span { overflow-wrap: anywhere; }
.poll-bars .bar { display: block; height: 8px; border-radius: 99px; background: var(--primary-soft); overflow: hidden; margin: 3px 0 1px; }
.poll-bars .bar span { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.poll-res-q { margin-top: 14px; }
.poll-res-q h3 { font-size: 1rem; margin: 0 0 4px; }
.poll-open-list, .poll-voters { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.poll-open-list li { padding: 6px 10px; border-radius: 8px; background: var(--primary-soft); overflow-wrap: anywhere; }
.poll-voters li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.poll-editor > label { margin-bottom: 10px; }
.poll-editor input:not([type=checkbox]):not([type=radio]), .poll-editor textarea, .poll-editor select { width: 100%; }
.poll-q { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin: 14px 0; display: grid; gap: 8px; }
.poll-q legend { font-weight: 700; padding: 0 6px; }
.poll-opt { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.poll-opt input { flex: 1; min-width: 0; }
.poll-src .segmented { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0; }
.poll-tours { max-height: 220px; overflow-y: auto; display: grid; gap: 4px; margin: 6px 0 10px; padding: 6px; border: 1px solid var(--border); border-radius: 8px; }
.poll-admin .badges { display: flex; flex-wrap: wrap; gap: 6px; }
.poll-file { position: relative; cursor: pointer; }
.poll-file input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.poll-thumb { width: 44px; height: 44px; border-radius: 6px; object-fit: cover; flex: none; background: var(--primary-soft); }
.poll-thumb.ph { display: inline-flex; align-items: center; justify-content: center; color: var(--muted); }
.poll-bars .pb-lbl { display: flex; align-items: center; gap: 8px; }
.poll-bars .poll-thumb { width: 36px; height: 36px; }
.poll-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 18px 14px; padding: 6px 2px 4px; }
/* foto da votare: cornice tipo polaroid, inclinate a turno; quella scelta si raddrizza e si illumina */
.poll-photo { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 9px 9px 12px; cursor: pointer; font-weight: 500;
  background: linear-gradient(180deg, #fffdf7, #f3eee2); color: #2b2620; border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0,0,0,.25), 0 8px 18px rgba(0,0,0,.22); transform: rotate(-1.6deg);
  transition: transform .18s ease, box-shadow .18s ease; }
.poll-photo:nth-child(even) { transform: rotate(1.4deg); }
.poll-photo:nth-child(3n) { transform: rotate(-.6deg); }
.poll-photo::before { content: ''; position: absolute; top: -8px; left: 50%; width: 54px; height: 16px; margin-left: -27px;
  background: rgba(255, 236, 170, .75); box-shadow: 0 1px 2px rgba(0,0,0,.15); transform: rotate(-3deg); border-radius: 2px; }
.poll-photo:hover { transform: rotate(0) translateY(-2px); box-shadow: 0 2px 4px rgba(0,0,0,.25), 0 12px 24px rgba(0,0,0,.28); }
.poll-photo:has(input:checked) { transform: rotate(0) scale(1.03); box-shadow: 0 0 0 3px var(--accent), 0 12px 26px rgba(0,0,0,.3); }
.poll-photo:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 3px; }
.poll-photo input { position: absolute; top: 15px; left: 15px; width: 22px; height: 22px; accent-color: var(--accent); z-index: 1; }
.poll-photo .pp-img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 2px; background: #e6e0d2; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.poll-photo .pp-img.ph { display: flex; align-items: center; justify-content: center; font-size: 2rem; color: #9a917f; }
.poll-photo .pp-cap { font-size: .92rem; text-align: center; line-height: 1.25; overflow-wrap: anywhere; color: #2b2620; }
.poll-thumb { border-radius: 2px; border: 3px solid #fffdf7; box-shadow: 0 1px 4px rgba(0,0,0,.3); box-sizing: content-box; }
@media (prefers-reduced-motion: reduce) { .poll-photo, .poll-photo:nth-child(n) { transition: none; } }
.poll-home { display: grid; gap: 8px; margin: 0 0 14px; }
.poll-home-btn { display: flex; align-items: center; gap: 10px; justify-content: flex-start; text-align: left; padding: 10px 14px; }
.poll-home-btn > .ti { font-size: 1.4rem; }
.poll-home-btn span { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.poll-home-btn small { font-weight: 400; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* voti da 1 a 10: la cornice resta, il voto si sceglie sotto la didascalia */
.poll-photo.scored { cursor: default; }
.poll-photo.scored::after { content: none; }
.poll-photo .poll-score { width: 100%; text-align: center; font-weight: 700; background: #fff; color: #2b2620; border: 1px solid #d8cfbd; }
.poll-photo.scored:has(.poll-score:valid) { box-shadow: 0 0 0 3px var(--accent), 0 12px 26px rgba(0,0,0,.3); transform: rotate(0); }
.poll-scores { display: grid; gap: 8px; }
.poll-score-row { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; font-weight: 500; font-size: .92rem; }
.poll-score-row span { flex: 1; overflow-wrap: anywhere; }
.poll-score-row .poll-score { width: 84px; flex: none; }
/* anteprima del sondaggio (admin) */
.poll-preview-bar h3 { font-size: .95rem; margin: 12px 0 6px; }
.poll-preview-bar .poll-home-btn { pointer-events: none; }
.poll-preview-title { font-size: 1rem; margin: 18px 0 8px; }
.poll-preview { outline: 2px dashed var(--accent); outline-offset: 4px; }
/* classifica avulsa dei gironi: linea tra Gold e Silver (o tra qualificate e no) */
.avulsa tr.cut td { border-top: 3px solid var(--primary); }
.avulsa td.num, .avulsa th.num { white-space: nowrap; }
.avulsa td, .avulsa th { padding-left: 5px; padding-right: 5px; }
/* voti in parole: nome sopra, i quattro voti sotto (due per riga sul telefono, quattro su schermi larghi) */
.fb-vrow legend { float: none; width: 100%; margin: 0 0 6px; }
.fb-vrow .fb-vb { flex: 1 1 calc(50% - 6px); }
.fb-vrow .fb-vb span { width: 100%; }
@media (min-width: 640px) { .fb-vrow .fb-vb { flex-basis: calc(25% - 6px); } }

/* A+B iscrizioni: Start (B) turchese, Intermedi (A) corallo */
.ab-tag { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 8px; font-weight: 900; color: #fff; vertical-align: middle; }
.ab-tag.b { background: #18a497; } .ab-tag.a { background: #e2465c; }
.ab-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.ab-list.b { border-top: 4px solid #18a497; } .ab-list.a { border-top: 4px solid #e2465c; }
.ab-admin li { flex-wrap: wrap; align-items: center; }
.ab-admin li .reg-names { flex: 1 1 160px; min-width: 0; }
.ab-admin li.pending { background: color-mix(in srgb, #e2465c 7%, transparent); border-radius: 8px; }
.ab-admin .ab-edit { flex: 1 1 100%; }
.ab-when { font-variant-numeric: tabular-nums; }
.ab-q { font-weight: 700; }
.ab-opt { flex-direction: row; align-items: flex-start; gap: 10px; border: 2px solid var(--border); border-radius: 12px; padding: 10px 12px; cursor: pointer; font-weight: 500; }
.ab-opt input { width: 20px; height: 20px; min-height: 20px; margin-top: 2px; accent-color: var(--primary); }
.ab-opt span { display: flex; flex-direction: column; gap: 2px; }
.ab-opt:has(input:checked) { border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 25%, transparent); }
.ab-draw-btn { font-size: 1.05rem; }
/* A+B Fantasma: livello del giocatore e coppie del turno */
.badge.ab-lv { font-weight: 800; min-width: 1.6em; text-align: center; }
.badge.ab-b { background: #d4f5f1; color: #0d5f58; border-color: #2ec4b6; }
.badge.ab-a { background: #ffe0e5; color: #8f2236; border-color: #ff5d73; }
.ghost-pairs { list-style: none; margin: 6px 0 10px; padding: 0; display: grid; gap: 6px; }
.ghost-pairs li { padding: 6px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2, var(--surface)); }

/* MVP del torneo */
.mvp-star { font-size: 1rem; line-height: 1; margin-left: 2px; vertical-align: baseline; }
.mvp-star.gold { color: #e0a800; text-shadow: 0 0 1px #7a5c00; }
.mvp-star.silver { color: #9aa4ad; text-shadow: 0 0 1px #4b5560; }
.mvp-card .mvp-group { border: 1px solid var(--line, #ddd); border-radius: 10px; padding: 8px 12px; margin: 0 0 10px; }
.mvp-card .mvp-group legend { font-weight: 700; padding: 0 6px; }
.mvp-opt { display: flex; align-items: center; gap: 8px; padding: 6px 0; cursor: pointer; }
.mvp-opt.off { opacity: .55; cursor: not-allowed; }
.mvp-win { font-size: 1.05rem; margin: 4px 0; }
.mvp-admin { border-top: 1px dashed var(--line, #ddd); margin-top: 12px; padding-top: 10px; }
.mvp-votes { list-style: none; padding: 0; margin: 8px 0 0; }
.mvp-votes li { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 4px 0; border-bottom: 1px solid var(--line, #eee); }
.mvp-votes li .icon-btn { margin-left: auto; }
.mvp-badge.gold { background: #fff4c2; color: #6b4e00; }
.mvp-badge.silver { background: #eef1f4; color: #39424b; }

/* Sconti e offerte Partner */
.pt-grid, .pt-offers { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.pt-shop { display: block; color: inherit; text-decoration: none; padding: 0; overflow: hidden; }
.pt-shop .pt-head, .pt-shop > p { padding: 0 14px; }
.pt-shop .pt-head { display: flex; align-items: center; gap: 10px; padding-top: 12px; }
.pt-shop .pt-head div { display: flex; flex-direction: column; }
.pt-shop > p { padding-bottom: 12px; }
.pt-cover { display: block; width: 100%; height: 150px; object-fit: cover; }
.pt-offer { overflow: hidden; display: flex; flex-direction: column; gap: 6px; }
.pt-offer .pt-cover { margin: -16px -16px 6px; width: calc(100% + 32px); max-width: none; }
.pt-offer h3 { margin: 0; }
.pt-offer .btn { align-self: flex-start; margin-top: auto; }
.pt-benefit { font-size: 1.3rem; color: var(--primary); }
.pt-logo { width: 44px; height: 44px; border-radius: 50%; object-fit: contain; background: #fff; border: 1px solid var(--border); flex: none; }
.pt-logo.big { width: 52px; height: 52px; vertical-align: middle; }
.pt-hero { display: block; width: 100%; max-height: 320px; object-fit: cover; border-radius: var(--radius); margin-bottom: 14px; }
.pt-info p { margin: 4px 0; }
.pt-hours td { padding: 4px 8px; }
.pt-hours td:first-child { text-transform: capitalize; }
.pt-cats { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
/* quota allenamenti del mese nella scheda del corsista (anche nei temi scuri: sfondo chiaro, testo scuro) */
.note.fee-paid { background: #e3f6e8; color: #155c2c; }
.note.fee-due { background: #fff1db; color: #8a5300; }
.note.fee-late { background: #fde3e3; color: #a11; }
.note[class*="fee-"] { font-weight: 600; }
/* Score OBS del campo sotto il suo refertista */
.obs-row { flex-basis: 100%; display: flex; flex-direction: column; gap: 6px; margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: var(--primary-soft); }
.obs-row .obs-link { font-size: .78rem; overflow-wrap: anywhere; }
.obs-row .btn-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.obs-row .btn[aria-pressed="true"] { background: var(--primary); color: #fff; border-color: var(--primary); }
/* classifica finale: titolo grande, con GOLD / SILVER ben in vista */
.final-card > h2 { font-size: 1.7rem; line-height: 1.2; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 14px; }
.final-card > h2 .badge { font-size: 1.5rem; padding: 6px 18px; border-width: 2px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
/* classifica finale Gold & Silver: cornice e testata metalliche (oro / argento) */
.final-card.gs-gold { border: 3px solid #d4a017; box-shadow: 0 0 0 1px #f7e08a inset, 0 8px 22px rgba(212, 160, 23, .28); }
.final-card.gs-silver { border: 3px solid #9aa5b1; box-shadow: 0 0 0 1px #e9edf1 inset, 0 8px 22px rgba(120, 132, 145, .28); }
.final-card.gs-gold > h2, .final-card.gs-silver > h2 { padding: 14px 18px; border-radius: 12px; text-shadow: 0 1px 0 rgba(255, 255, 255, .55); }
.final-card.gs-gold > h2 { background: linear-gradient(135deg, #8a6500 0%, #d4a017 22%, #f8dc6c 42%, #fff6cf 52%, #e2b52c 68%, #9c7300 100%); color: #3a2a00; }
.final-card.gs-silver > h2 { background: linear-gradient(135deg, #5f6b77 0%, #9aa5b1 22%, #d6dde4 42%, #ffffff 52%, #b8c2cc 68%, #6b7682 100%); color: #1f2933; }
.final-card.gs-gold > h2 .badge { background: #3a2a00; color: #ffd75e; border-color: #ffe9a3; }
.final-card.gs-silver > h2 .badge { background: #1f2933; color: #e9edf1; border-color: #ffffff; }
.friendly-card { margin-top: 18px; }
.friendly-card h2 { margin-top: 0; }