/**
 * XRayders — Refactor grafico (Clinical Dark)
 *
 * Primo blocco del nuovo design system. Caricato DOPO esports.css.
 * Tutto è prefissato `rf-` per non collidere con le 5700 righe esistenti:
 * finché il refactor non è completo i due sistemi convivono.
 */

:root {
  /* Superfici — temperatura "blu notte", parte da --bg-primary già esistente */
  --rf-bg:    #0A0F1A;
  --rf-card:  #121A2A;
  --rf-flat:  #172136;
  --rf-line:  #233047;

  /* Testo */
  --rf-ink:   #E8EDF5;
  --rf-mu:    #8496AE;

  /* Tinte: schiarite rispetto alle neon attuali, reggono il testo su fondo scuro */
  --rf-cyan:   #4FB8D4;
  --rf-gold:   #E0B341;
  --rf-green:  #4FC98A;
  --rf-purple: #A48BEA;
  --rf-red:    #EC7C6F;

  --rf-r-card: 22px;
  --rf-r-btn:  14px;

  --rf-font-display: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  --rf-font-ui:      'Inter', system-ui, sans-serif;
}

/* =====================================================
   Overlay generico
   ===================================================== */
.rf-scrim {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(4, 7, 13, 0.74);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.rf-dialog {
  width: 100%;
  max-width: 360px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--rf-card);
  border: 1px solid var(--rf-line);
  border-radius: var(--rf-r-card);
  padding: 22px 20px 20px;
  text-align: center;
  color: var(--rf-ink);
  font-family: var(--rf-font-ui);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  animation: rf-pop 0.26s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}

@keyframes rf-pop {
  from { opacity: 0; transform: translateY(14px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .rf-dialog { animation: none; }
}

/* =====================================================
   Modale "stai giocando come ospite"
   ===================================================== */
.rf-guest-mascot {
  width: 150px;
  height: auto;
  display: block;
  margin: 0 auto 4px;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.5));
}

.rf-dialog-title {
  font-family: var(--rf-font-display);
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
  margin: 0 0 7px;
  color: var(--rf-ink);
}

.rf-dialog-text {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--rf-mu);
  margin: 0 0 16px;
}

/* Riga vantaggi: cosa sblocca l'account */
.rf-perks {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.rf-perk {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--rf-flat);
  border: 1px solid var(--rf-line);
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--rf-ink);
  white-space: nowrap;
}

.rf-perk svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.rf-perk-cyan   svg { color: var(--rf-cyan); }
.rf-perk-gold   svg { color: var(--rf-gold); }
.rf-perk-purple svg { color: var(--rf-purple); }

/* =====================================================
   Bottoni
   ===================================================== */
.rf-actions {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.rf-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px 18px;
  border-radius: var(--rf-r-btn);
  border: 1px solid transparent;
  font-family: var(--rf-font-display);
  font-weight: 800;
  font-size: 0.86rem;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.rf-btn:active { transform: translateY(1px); }

/* Primario: bianco pieno. Sul fondo scuro è la cosa più luminosa dello schermo. */
.rf-btn-primary {
  background: var(--rf-ink);
  color: var(--rf-bg);
}
.rf-btn-primary:hover { background: #ffffff; }

/* Secondario: contorno */
.rf-btn-ghost {
  background: transparent;
  border-color: var(--rf-line);
  color: var(--rf-ink);
}
.rf-btn-ghost:hover {
  background: var(--rf-flat);
  border-color: var(--rf-mu);
}

/* Terziario: l'uscita, sempre disponibile e mai un vicolo cieco */
.rf-btn-quiet {
  background: transparent;
  color: var(--rf-mu);
  font-family: var(--rf-font-ui);
  font-weight: 600;
  font-size: 0.8rem;
  padding: 9px 14px;
}
.rf-btn-quiet:hover { color: var(--rf-ink); }

/* Focus visibile: la tastiera deve funzionare */
.rf-btn:focus-visible,
.rf-dialog [tabindex]:focus-visible {
  outline: 2px solid var(--rf-cyan);
  outline-offset: 2px;
}

@media (max-width: 380px) {
  .rf-guest-mascot { width: 120px; }
  .rf-dialog-title { font-size: 1.08rem; }
}

/* =====================================================
   CONVERSIONE — Navbar e Home
   Sovrascrive esports.css, che è caricato prima: stessa
   specificità, vince l'ordine. Nessun !important dove non serve.
   ===================================================== */

/* ---- Navbar ---- */
.navbar-esports {
  background: var(--rf-card);
  border-bottom: 1px solid var(--rf-line);
}

.nav-logo {
  font-family: var(--rf-font-display);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--rf-ink);
  text-shadow: none;
}

/* ---- Il cabinato diventa un pannello pulito ---- */
.home-arcade-cabinet {
  background: var(--rf-card);
  border: 1px solid var(--rf-line);
  border-radius: var(--rf-r-card);
}
.home-arcade-cabinet::before,
.home-arcade-cabinet::after { display: none; }

.corner-decor { display: none; }

/* L'alone dietro la mascotte competeva con lei: via */
.home-mascot-wrapper::before { display: none; }

/* ---- Titolo ---- */
.neon-title {
  font-family: var(--rf-font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--rf-ink);
  text-shadow: none;
}

/* ---- Griglia 2x2 ---- */
.home-nav-btn {
  background: var(--rf-flat);
  border: 1px solid var(--rf-line);
  border-radius: 14px;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.home-nav-btn::before { display: none; }     /* scanline */
.home-nav-btn:hover {
  transform: translateY(-2px);
  background: var(--rf-flat);
  border-color: var(--rf-mu);
}

/* Bloccato: ingrigito ma leggibile. L'opacità globale lo faceva
   sparire sul fondo scuro e sembrava un elemento rotto. */
.home-nav-locked,
.home-nav-locked:hover {
  opacity: 1;
  background: transparent;
  border-style: dashed;
  border-color: var(--rf-line);
}
.home-nav-locked .home-nav-icon {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--rf-line);
  color: var(--rf-mu);
}
.home-nav-locked .home-nav-label,
.home-nav-locked .home-nav-sub { color: var(--rf-mu); }

.home-nav-icon { border-radius: 10px; }

/* Tinte schiarite: le neon non reggevano il testo su fondo scuro */
.home-nav-icon-amber  { background: rgba(224,179,65,0.14);  border-color: rgba(224,179,65,0.32);  color: var(--rf-gold); }
.home-nav-icon-purple { background: rgba(164,139,234,0.14); border-color: rgba(164,139,234,0.32); color: var(--rf-purple); }
.home-nav-icon-red    { background: rgba(236,124,111,0.14); border-color: rgba(236,124,111,0.32); color: var(--rf-red); }
.home-nav-icon-cyan   { background: rgba(79,184,212,0.14);  border-color: rgba(79,184,212,0.32);  color: var(--rf-cyan); }

.home-nav-label {
  font-family: var(--rf-font-display);
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--rf-ink);
  text-shadow: none;
}
.home-nav-sub { color: var(--rf-mu); }

/* ---- Footer ---- */
.home-arcade-footer-line { background: var(--rf-line); }
.home-arcade-footer-link { color: var(--rf-mu); }
.home-arcade-footer-link:hover { color: var(--rf-ink); }
.home-arcade-footer-sep { color: var(--rf-line); }
.home-arcade-footer-link { white-space: nowrap; }
.home-arcade-footer-links { flex-wrap: wrap; }

/* =====================================================
   CONVERSIONE — Scelta modalità
   ===================================================== */
.rf-sheet {
  background: var(--rf-card);
  border: 1px solid var(--rf-line);
  border-radius: var(--rf-r-card);
  padding: 20px;
  width: 100%;
  max-width: 32rem;
  color: var(--rf-ink);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}
.rf-sheet-title {
  font-family: var(--rf-font-display);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--rf-ink);
}

/* La card modalità perde scanline, corner accent e pulsazione:
   restano il colore che identifica la modalità e la mascotte. */
.game-mode-card {
  background: var(--rf-flat);
  border: 1px solid rgba(var(--card-color), 0.4);
  border-radius: 16px;
  animation: none;
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.game-mode-card::before,
.game-mode-card::after { display: none; }
.game-mode-card:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--card-color), 0.85);
  box-shadow: none;
}
.game-mode-card:hover img { transform: scale(1.06); filter: none; }
.game-mode-card img { filter: none; }

.game-mode-mascot-wrapper { background: none; }
.game-mode-mascot-wrapper::before { display: none; }

.game-mode-label {
  font-family: var(--rf-font-display);
  font-weight: 800;
  letter-spacing: 0.01em;
}
.game-mode-sub { color: var(--rf-mu); }

/* Modalità che richiede l'account: stesso trattamento della griglia home */
.game-mode-card.rf-locked {
  background: transparent;
  border-style: dashed;
  border-color: var(--rf-line);
  opacity: 1;
}
.game-mode-card.rf-locked img { filter: grayscale(1); opacity: 0.4; }
.game-mode-card.rf-locked .game-mode-label { color: var(--rf-mu); }

/* =====================================================
   CONVERSIONE — Banner ospite
   ===================================================== */
.rf-guest-banner {
  background: var(--rf-card);
  border: 1px solid var(--rf-line);
  border-radius: 14px;
  padding: 10px 14px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}
.rf-guest-banner-text { color: var(--rf-ink); font-size: 0.82rem; line-height: 1.45; }
.rf-guest-banner-cta {
  background: var(--rf-ink);
  color: var(--rf-bg);
  border-radius: 999px;
  padding: 6px 13px;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}
.rf-guest-banner-cta:hover { background: #fff; }
.rf-guest-banner-x { color: var(--rf-mu); }
.rf-guest-banner-x:hover { color: var(--rf-ink); }

/* Le etichette modalità avevano un alone neon: sul pannello pulito
   il colore basta a distinguerle, il bagliore sporcava soltanto. */
.game-mode-label { text-shadow: none; }

/* =====================================================
   Mobile — la griglia 2x2 non regge sotto i 480px
   Il bottone era icona+testo in riga: a ~175px di larghezza
   "CLASSIFICA" veniva troncata e il lucchetto finiva sopra
   l'etichetta. Sotto i 480px si impila.
   ===================================================== */
@media (max-width: 480px) {
  .home-nav-btn {
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    padding: 11px 12px;
  }

  /* Il testo non deve mai finire sotto il lucchetto */
  .home-nav-text { padding-right: 18px; }

  .home-nav-icon { width: 32px; height: 32px; }
  .home-nav-label { font-size: 0.74rem; letter-spacing: 0; }
  .home-nav-sub   { font-size: 0.63rem; line-height: 1.3; }

  /* Il footer andava a capo spezzando "♥ Supporta" */
  .home-arcade-footer-links { flex-wrap: wrap; gap: 0.4rem 0.5rem; }
  .home-arcade-footer-link  { white-space: nowrap; }
}

/* Sotto i 360px anche il titolo e la mascotte vanno stretti */
@media (max-width: 360px) {
  .neon-title { font-size: 1.35rem; }
  .home-nav-label { font-size: 0.7rem; }
}

/* Il banner ospite è `fixed`: senza spazio riservato copriva
   la testa della mascotte. Quando c'è, la home scende. */
.rf-has-banner { padding-top: 62px; }

@media (max-width: 480px) {
  .rf-has-banner { padding-top: 74px; }
}

/* Sotto i 480px il footer va a capo e i separatori restavano
   orfani a inizio o fine riga: meglio toglierli e usare il gap. */
@media (max-width: 480px) {
  .home-arcade-footer-sep { display: none; }
  .home-arcade-footer-links { gap: 0.4rem 0.85rem; }
}

/* =====================================================
   Sottotitolo home
   ===================================================== */
.rf-tagline {
  text-align: center;
  color: var(--rf-mu);
  font-size: 0.82rem;
  margin: 0 0 18px;
}

/* =====================================================
   Barra laterale desktop
   Nascosta sotto i 1024px: li' la navigazione resta la
   griglia 2x2 dentro la home.
   ===================================================== */
.rf-rail { display: none; }

@media (min-width: 1024px) {
  .rf-rail {
    display: flex !important;   /* x-show usa display:none inline quando nasconde la vista di gioco */
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 240px;
    z-index: 55;
    padding: 16px 14px;
    background: var(--rf-card);
    border-right: 1px solid var(--rf-line);
  }
  .rf-rail[style*="display: none"] { display: none !important; }

  .rf-rail-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px 0;
    margin-bottom: 20px;
  }
  .rf-rail-brand img { width: 34px; height: auto; flex-shrink: 0; }
  .rf-rail-brand span {
    font-family: var(--rf-font-display);
    font-weight: 800;
    font-size: 0.95rem;
    letter-spacing: -0.01em;
    color: var(--rf-ink);
  }

  .rf-rail-nav { display: flex; flex-direction: column; gap: 4px; }

  .rf-rail-link {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 11px 13px;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: var(--rf-mu);
    font-family: var(--rf-font-ui);
    font-weight: 600;
    font-size: 0.86rem;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .rf-rail-link svg { width: 18px; height: 18px; flex-shrink: 0; }
  .rf-rail-link:hover { background: var(--rf-flat); color: var(--rf-ink); }

  /* Voce attiva: piena, è l'unica cosa accesa nella barra */
  .rf-rail-on,
  .rf-rail-on:hover { background: var(--rf-flat); color: var(--rf-ink); }

  .rf-rail-locked { color: var(--rf-mu); opacity: 0.72; }
  .rf-rail-lock { width: 14px !important; height: 14px !important; margin-left: auto; }

  .rf-rail-foot {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--rf-line);
    display: flex;
    gap: 18px;
    padding-left: 8px;
  }
  .rf-rail-foot button {
    background: none;
    border: none;
    color: var(--rf-mu);
    font-size: 0.74rem;
    cursor: pointer;
    padding: 0;
  }
  .rf-rail-foot button:hover { color: var(--rf-ink); }

  /* Navbar e contenuto si spostano a destra della barra */
  .navbar-esports { padding-left: 256px; }
  .rf-banner-wrap { padding-left: 256px; }
  main.container { padding-left: 272px; padding-right: 28px; }

  /* ---- Home: mascotte a sinistra, CTA + griglia a destra ---- */
  /* raddoppio la classe per battere .md\:max-w-2xl di Tailwind */
  .rf-home-wrap.rf-home-wrap { max-width: none; }

  .home-arcade-cabinet {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
    grid-template-areas:
      "main side"
      "foot foot";
    align-items: center;
    column-gap: 40px;
  }

  .home-arcade-cabinet > .rf-home-main { grid-area: main; }
  .home-arcade-cabinet > .rf-home-side { grid-area: side; }
  .home-arcade-cabinet > .home-arcade-footer { grid-area: foot; margin-top: 26px; }

  .home-arcade-cabinet > .rf-home-side .insert-coin-btn { white-space: nowrap; }
  .home-arcade-cabinet > .rf-home-side .rf-home-nav { margin-bottom: 0; }

  .rf-tagline { margin-bottom: 0; }

  /* Come nel mockup: icona sopra, etichetta e descrizione sotto */
  .home-arcade-cabinet > .rf-home-side .home-nav-btn {
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
    padding: 13px 15px;
  }
  .home-arcade-cabinet > .rf-home-side .home-nav-text { padding-right: 20px; }
}

/* Il footer della home resta centrato ovunque */
.home-arcade-footer-links { justify-content: center; }

/* =====================================================
   CONVERSIONE — Modale pre-partita (splash)
   ===================================================== */
.arcade-bg {
  background: rgba(4, 7, 13, 0.86);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.arcade-cabinet {
  background: var(--rf-card);
  border: 1px solid var(--rf-line);
  border-radius: var(--rf-r-card);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}

/* La schermata di avvio deve stare in uno schermo senza scorrere: era alta
   814px contro una finestra da 710, e sul telefono anche peggio. Chi la vede
   sta per giocare, non sta leggendo un manuale, e un tasto INIZIA sotto la
   piega e' il modo piu' rapido per far credere che la pagina sia rotta.
   La spaziatura sta qui e non fra le classi Tailwind del markup: cosi' e'
   un posto solo, e cambia con la larghezza. */
.rf-splash-box { padding: 16px 15px; }
@media (min-width: 640px) { .rf-splash-box { padding: 20px 22px; } }
.arcade-cabinet::before,
.arcade-cabinet::after { display: none; }

/* Il titolo prendeva il colore della modalita' come alone.
   Ora il colore sta nella barretta sotto: il testo resta leggibile. */
.rf-splash-title {
  font-family: var(--rf-font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--rf-ink);
  text-shadow: none;
  text-align: center;
  margin: 0 0 5px;
}
.rf-splash-rule {
  width: 34px;
  height: 3px;
  border-radius: 2px;
  margin: 0 auto 8px;
  background: var(--rf-mode, var(--rf-cyan));
}

.arcade-subtitle {
  color: var(--rf-mu);
  text-shadow: none;
  animation: none;
  opacity: 1;
}

/* I tre riquadri round / vite / tempo */
.arcade-display {
  background: var(--rf-flat);
  border: 1px solid var(--rf-line);
  border-radius: 12px;
  padding: 6px 6px 5px;
}
.arcade-display::before { display: none; }
.arcade-display-value {
  font-family: var(--rf-font-display);
  font-weight: 800;
  text-shadow: none;
}
.arcade-display-label {
  color: var(--rf-mu);
  letter-spacing: 0.12em;
}

/* Blocchi descrizione e passi: erano nero puro su card scura */
.rf-splash-note {
  background: var(--rf-flat);
  border: 1px solid var(--rf-line);
  border-radius: 12px;
  padding: 7px 12px;
  color: var(--rf-mu);
  font-size: 0.76rem;
  line-height: 1.35;
  text-align: center;
}
.rf-splash-step {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--rf-flat);
  border: 1px solid var(--rf-line);
  border-radius: 10px;
  padding: 5px 10px;
}
.rf-splash-step-n {
  width: 19px;
  height: 19px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.68rem;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.07);
  color: var(--rf-mode, var(--rf-cyan));
}
.rf-splash-step p { color: var(--rf-ink); font-size: 0.78rem; margin: 0; }

.rf-splash-bonus {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 0.72rem;
  color: var(--rf-mu);
}

.rf-splash-back {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 6px;
  background: none;
  border: none;
  color: var(--rf-mu);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}
.rf-splash-back:hover { color: var(--rf-ink); }

/* =====================================================
   CONVERSIONE — HUD di gioco
   ===================================================== */
.game-hud-bar {
  background: var(--rf-card);
  border-bottom: 1px solid var(--rf-line);
  backdrop-filter: none;
}

.hud-box {
  background: var(--rf-flat);
  border: 1px solid var(--rf-line);
  border-radius: 10px;
  box-shadow: none;
}
.hud-box::before, .hud-box::after { display: none; }
.hud-box-label {
  color: var(--rf-mu);
  letter-spacing: 0.1em;
  text-shadow: none;
}
.hud-box-value {
  font-family: var(--rf-font-display);
  font-weight: 800;
  color: var(--rf-ink);
  text-shadow: none;
}
/* Il punteggio e' l'unico numero colorato della barra */
.hud-box-score .hud-box-value,
.hud-box-score .neon-text-gold {
  color: var(--rf-gold);
  text-shadow: none;
}

/* Bordi colorati per modalita': tinte schiarite */
.hud-box-cyan  { border-color: rgba(79,184,212,0.4); }
.hud-box-gold  { border-color: rgba(224,179,65,0.4); }
.hud-box-green { border-color: rgba(79,201,138,0.4); }

/* Timer: stesso anello, senza il bagliore che sbavava sui numeri */
.timer-ring-progress {
  stroke: var(--rf-cyan);
  filter: none;
}
.timer-ring-progress.timer-warning { stroke: var(--rf-gold); filter: none; }
.timer-ring-progress.timer-danger  { stroke: var(--rf-red);  filter: none; }
.timer-value-lg { color: var(--rf-ink); text-shadow: none; }
.timer-value-lg.timer-warning { color: var(--rf-gold); text-shadow: none; }
.timer-value-lg.timer-danger  { color: var(--rf-red);  text-shadow: none; }

/* Quit: era 32px, sotto la soglia di 44px per il tocco.
   Sta sopra la radiografia: un tap mancato costa punti. */
.hud-quit-btn {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: transparent;
  border: 1px solid var(--rf-line);
  color: var(--rf-mu);
}
.hud-quit-btn:hover {
  background: rgba(236,124,111,0.12);
  border-color: rgba(236,124,111,0.45);
  color: var(--rf-red);
}

/* Cuori */
.hud-heart-active { color: var(--rf-red); filter: none; animation: none; }
.hud-heart-empty  { color: rgba(255,255,255,0.14); }

/* Bonus velocita' */
.hud-speed-bonus {
  background: rgba(79,201,138,0.14);
  border: 1px solid rgba(79,201,138,0.4);
  color: var(--rf-green);
  border-radius: 999px;
  box-shadow: none;
}

/* Serie */
.hud-streak-inline {
  background: rgba(224,179,65,0.14);
  border: 1px solid rgba(224,179,65,0.4);
  color: var(--rf-gold);
  animation: none;
  box-shadow: none;
}
.hud-streak-inline.streak-fire-inline {
  background: rgba(236,124,111,0.16);
  border-color: rgba(236,124,111,0.45);
  color: var(--rf-red);
  animation: none;
}

/* Barra dei round */
.round-progress-bar {
  background: var(--rf-card);
  border-bottom: 1px solid var(--rf-line);
}
.round-progress-segment { background: rgba(255,255,255,0.08); }
.round-progress-segment::before { display: none; }
.round-progress-segment.completed {
  background: var(--rf-cyan);
  box-shadow: none;
}
.round-progress-segment.current {
  background: var(--rf-ink);
  box-shadow: none;
  animation: none;
}
.round-progress-segment.current::after { display: none; }

/* Strumenti sull'immagine: anche questi sotto la soglia di tocco */
.tool-btn {
  background: rgba(18,26,42,0.86);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  color: var(--rf-ink);
  min-width: 46px;
  min-height: 46px;
  justify-content: center;
  box-shadow: none;
}
.tool-btn:hover {
  background: rgba(23,33,54,0.94);
  border-color: var(--rf-mu);
  transform: none;
  box-shadow: none;
}
.tool-btn-icon { background: transparent; }
.tool-btn:hover .tool-btn-icon { background: transparent; color: var(--rf-cyan); }
.tool-btn-label { color: var(--rf-mu); }

.tool-btn-active {
  border-color: rgba(79,184,212,0.6) !important;
  background: rgba(79,184,212,0.16) !important;
  color: var(--rf-cyan);
  box-shadow: none;
}
.tool-btn-active .tool-btn-icon { background: transparent; color: var(--rf-cyan); box-shadow: none; }
.tool-btn-active .tool-btn-label { color: var(--rf-cyan); }

.tool-btn-help {
  border-color: rgba(224,179,65,0.5);
  background: rgba(224,179,65,0.14);
  animation: none;
}
.tool-btn-help .tool-btn-icon { background: transparent; color: var(--rf-gold); }
.tool-btn-help .tool-btn-label { color: var(--rf-gold); }
.tool-btn-help:hover:not(.tool-btn-used) {
  border-color: rgba(224,179,65,0.8);
  background: rgba(224,179,65,0.22);
  box-shadow: none;
  transform: none;
}

.tool-btn-used {
  opacity: 1;
  background: transparent !important;
  border-color: var(--rf-line) !important;
  border-style: dashed;
}
.tool-btn-used .tool-btn-icon,
.tool-btn-used .tool-btn-label { color: var(--rf-mu); background: transparent; }

/* Hint 50/50 */
.hint-5050-btn {
  background: rgba(164,139,234,0.14);
  border: 1px solid rgba(164,139,234,0.4);
  color: var(--rf-purple);
  border-radius: 11px;
  min-height: 40px;
}
.hint-5050-icon { background: rgba(164,139,234,0.2); }
.hint-5050-btn:hover:not(.hint-5050-used) {
  background: rgba(164,139,234,0.22);
  border-color: rgba(164,139,234,0.7);
  box-shadow: none;
  transform: none;
}
.hint-5050-used {
  opacity: 1;
  background: transparent !important;
  border-color: var(--rf-line) !important;
  border-style: dashed;
  color: var(--rf-mu);
}
.hint-5050-used .hint-5050-icon { background: transparent; }

/* =====================================================
   CONVERSIONE - Popup "Identifica" (fase select)
   ===================================================== */
.popup-overlay {
  background: rgba(4, 7, 13, 0.62);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.game-popup {
  background: var(--rf-card);
  border: 1px solid var(--rf-line);
  border-radius: 18px;
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.65);
}
.game-popup::before, .game-popup::after { display: none; }

.game-popup-header {
  border-bottom: 1px solid var(--rf-line);
  background: transparent;
}
.game-popup-header h3 {
  font-family: var(--rf-font-display);
  font-weight: 800;
  letter-spacing: 0.01em;
  text-shadow: none;
}

/* Le opzioni: erano riquadri con bordo neon e sweep animato.
   Ora sono righe piatte, la selezione si legge dal bordo ciano. */
.pathology-option {
  background: var(--rf-flat);
  border: 1px solid var(--rf-line);
  border-radius: 11px;
  color: var(--rf-ink);
  min-height: 46px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.pathology-option::before,
.pathology-option::after { display: none; }
.pathology-option:hover {
  background: var(--rf-flat);
  border-color: var(--rf-mu);
  transform: none;
  box-shadow: none;
}

.pathology-option-index {
  background: rgba(255, 255, 255, 0.07);
  color: var(--rf-mu);
  border: none;
  border-radius: 7px;
  font-family: var(--rf-font-display);
  font-weight: 800;
  text-shadow: none;
}
.pathology-option-label {
  color: var(--rf-ink);
  text-shadow: none;
  font-weight: 600;
}

.pathology-option-selected {
  background: rgba(79, 184, 212, 0.12);
  border-color: rgba(79, 184, 212, 0.6);
  box-shadow: none;
}
.pathology-option-selected .pathology-option-index {
  background: rgba(79, 184, 212, 0.25);
  color: var(--rf-cyan);
}
.pathology-option-check { color: var(--rf-cyan); }

/* Azioni del popup */
.game-popup-actions { border-top: 1px solid var(--rf-line); }

.btn-popup-cancel {
  background: transparent;
  border: 1px solid var(--rf-line);
  border-radius: 11px;
  color: var(--rf-mu);
  font-family: var(--rf-font-display);
  font-weight: 800;
  min-height: 44px;
  text-shadow: none;
  box-shadow: none;
}
.btn-popup-cancel:hover {
  background: var(--rf-flat);
  border-color: var(--rf-mu);
  color: var(--rf-ink);
}

/* Inattivo finche non scegli: il contorno tratteggiato lo dice
   senza spegnerlo come farebbe un opacity basso. */
.btn-popup-confirm {
  background: transparent;
  border: 1px dashed var(--rf-line);
  border-radius: 11px;
  color: var(--rf-mu);
  font-family: var(--rf-font-display);
  font-weight: 800;
  min-height: 44px;
  text-shadow: none;
  box-shadow: none;
}

/* Attivo: bianco pieno, come ogni azione primaria del sistema */
.btn-popup-confirm-active {
  background: var(--rf-ink);
  border: 1px solid var(--rf-ink);
  border-style: solid;
  color: var(--rf-bg);
  animation: none;
  box-shadow: none;
}
.btn-popup-confirm-active:hover {
  background: #ffffff;
  box-shadow: none;
  transform: none;
}

/* =====================================================
   CONVERSIONE - Feedback di risposta (result toast)
   ===================================================== */
.result-toast {
  background: var(--rf-card);
  border: 1px solid var(--rf-line);
  border-radius: 18px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6);
  animation: rf-pop 0.24s cubic-bezier(0.34, 1.4, 0.64, 1) backwards;
  backdrop-filter: none;
}

/* Il verdetto lo dà il bordo, non un alone diffuso su tutta la card */
.result-toast-correct {
  border-color: rgba(79, 201, 138, 0.55);
  background: var(--rf-card);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6);
  animation: rf-pop 0.24s cubic-bezier(0.34, 1.4, 0.64, 1) backwards;
}
.result-toast-wrong {
  border-color: rgba(236, 124, 111, 0.55);
  background: var(--rf-card);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6);
  animation: rf-pop 0.24s cubic-bezier(0.34, 1.4, 0.64, 1) backwards;
}

.result-toast-icon { box-shadow: none; border-radius: 13px; }
.result-toast-icon-correct { background: rgba(79, 201, 138, 0.18); color: var(--rf-green); }
.result-toast-icon-wrong   { background: rgba(236, 124, 111, 0.18); color: var(--rf-red); }

.result-toast-title {
  font-family: var(--rf-font-display);
  font-weight: 800;
  letter-spacing: 0.01em;
  text-shadow: none;
}
.result-toast-title .neon-text-correct,
.result-toast-title.neon-text-correct { color: var(--rf-green); text-shadow: none; }
.result-toast-title .neon-text-wrong,
.result-toast-title.neon-text-wrong { color: var(--rf-red); text-shadow: none; }

.result-toast-scores .neon-text-gold   { color: var(--rf-gold);   text-shadow: none; }
.result-toast-scores .neon-text-purple { color: var(--rf-purple); text-shadow: none; }

.result-toast-answers {
  border-top: 1px solid var(--rf-line);
  background: transparent;
}
.result-toast-answer { color: var(--rf-mu); }

.result-toast-levelup {
  background: rgba(224, 179, 65, 0.14);
  border: 1px solid rgba(224, 179, 65, 0.4);
  border-radius: 11px;
  box-shadow: none;
  animation: none;
}

/* Maniglia per trascinare via il toast */
.rf-toast-grip {
  width: 38px;
  height: 4px;
  border-radius: 2px;
  background: var(--rf-line);
  margin: 0 auto;
}

/* =====================================================
   Righe informative dentro il toast
   Erano sei varianti Tailwind diverse (bg-green-500/20,
   bg-orange-500/20, bg-red-900/50...) con saturazioni
   incoerenti. Una sola forma, cinque tinte del sistema.
   ===================================================== */
.rf-note-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  margin-bottom: 8px;
  border-radius: 11px;
  border: 1px solid transparent;
  font-family: var(--rf-font-display);
  font-weight: 800;
  font-size: 0.78rem;
}
.rf-note-row svg { width: 15px; height: 15px; flex-shrink: 0; }
.rf-note-row .rf-note-sub { font-weight: 600; font-size: 0.7rem; opacity: 0.8; }

.rf-note-green  { background: rgba(79,201,138,0.14);  border-color: rgba(79,201,138,0.4);  color: var(--rf-green); }
.rf-note-cyan   { background: rgba(79,184,212,0.14);  border-color: rgba(79,184,212,0.4);  color: var(--rf-cyan); }
.rf-note-gold   { background: rgba(224,179,65,0.14);  border-color: rgba(224,179,65,0.4);  color: var(--rf-gold); }
.rf-note-red    { background: rgba(236,124,111,0.14); border-color: rgba(236,124,111,0.4); color: var(--rf-red); }
.rf-note-purple { background: rgba(164,139,234,0.14); border-color: rgba(164,139,234,0.4); color: var(--rf-purple); }

/* Fine partita per vite esaurite: unica riga che alza il tono */
.rf-note-alarm {
  background: rgba(236,124,111,0.2);
  border-color: rgba(236,124,111,0.6);
  color: var(--rf-red);
  font-size: 0.84rem;
  padding: 11px 14px;
}

/* =====================================================
   Fine partita - lo scontrino
   E' l'unica superficie chiara di tutta l'app: recupera
   il contrasto che il tema scuro aveva tolto, e arriva
   esattamente nel momento che conta.
   ===================================================== */
.rf-receipt-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.rf-receipt {
  --paper: #F7F4EC;
  --tint: #2B2A26;
  --faint: #8A867C;
  width: 100%;
  max-width: 320px;
  background: var(--paper);
  color: var(--tint);
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  line-height: 1.62;
  padding: 22px 20px 24px;
  filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.55));
  clip-path: polygon(0.00% 6px, 3.33% 0px, 6.67% 6px, 10.00% 0px, 13.33% 6px, 16.67% 0px, 20.00% 6px, 23.33% 0px, 26.67% 6px, 30.00% 0px, 33.33% 6px, 36.67% 0px, 40.00% 6px, 43.33% 0px, 46.67% 6px, 50.00% 0px, 53.33% 6px, 56.67% 0px, 60.00% 6px, 63.33% 0px, 66.67% 6px, 70.00% 0px, 73.33% 6px, 76.67% 0px, 80.00% 6px, 83.33% 0px, 86.67% 6px, 90.00% 0px, 93.33% 6px, 96.67% 0px, 100.00% 6px, 100.00% calc(100% - 6px), 96.67% calc(100% - 0px), 93.33% calc(100% - 6px), 90.00% calc(100% - 0px), 86.67% calc(100% - 6px), 83.33% calc(100% - 0px), 80.00% calc(100% - 6px), 76.67% calc(100% - 0px), 73.33% calc(100% - 6px), 70.00% calc(100% - 0px), 66.67% calc(100% - 6px), 63.33% calc(100% - 0px), 60.00% calc(100% - 6px), 56.67% calc(100% - 0px), 53.33% calc(100% - 6px), 50.00% calc(100% - 0px), 46.67% calc(100% - 6px), 43.33% calc(100% - 0px), 40.00% calc(100% - 6px), 36.67% calc(100% - 0px), 33.33% calc(100% - 6px), 30.00% calc(100% - 0px), 26.67% calc(100% - 6px), 23.33% calc(100% - 0px), 20.00% calc(100% - 6px), 16.67% calc(100% - 0px), 13.33% calc(100% - 6px), 10.00% calc(100% - 0px), 6.67% calc(100% - 6px), 3.33% calc(100% - 0px), 0.00% calc(100% - 6px));
  animation: rf-print 0.9s cubic-bezier(0.22, 0.75, 0.3, 1) both;
}

@keyframes rf-print {
  from { transform: translateY(-24px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .rf-receipt { animation: none; }
}

.rf-rc-head { text-align: center; }
.rf-rc-logo {
  font-family: 'Press Start 2P', cursive;
  font-size: 12px;
  letter-spacing: 0.02em;
  margin-bottom: 8px;
}
.rf-rc-sub   { color: var(--faint); font-size: 9.5px; letter-spacing: 0.06em; }
.rf-rc-title { font-weight: 700; letter-spacing: 0.16em; margin: 3px 0; }
.rf-rc-meta  { color: var(--faint); font-size: 9.5px; letter-spacing: 0.03em; }

.rf-rc-rule      { border-top: 1px solid var(--tint);  margin: 10px 0; }
.rf-rc-rule-dash { border-top: 1px dashed var(--faint); margin: 10px 0; }

.rf-rc-lbl {
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--faint);
  margin-bottom: 5px;
}

/* Riga con i puntini di riempimento */
.rf-rc-li { display: flex; align-items: baseline; gap: 5px; }
.rf-rc-li .n { color: var(--faint); flex-shrink: 0; }
.rf-rc-li .d {
  flex-shrink: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 58%;
}
.rf-rc-li .dots {
  flex: 1;
  border-bottom: 1px dotted var(--faint);
  transform: translateY(-3px);
  min-width: 8px;
}
.rf-rc-li .v { flex-shrink: 0; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Caso mancato: resta in elenco ma spento, con i trattini al posto dei punti */
.rf-rc-li.miss { color: var(--faint); }
.rf-rc-li.miss .v { font-weight: 400; }

.rf-rc-li.tot {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  padding: 3px 0;
}

.rf-rc-xp { height: 5px; background: #E2DED2; margin-top: 10px; overflow: hidden; }
.rf-rc-xp i { display: block; height: 100%; background: var(--tint); }

.rf-rc-bars {
  display: flex;
  gap: 2px;
  justify-content: center;
  align-items: flex-end;
  height: 30px;
  margin: 6px 0;
}
.rf-rc-bars i { display: block; height: 100%; background: var(--tint); }

.rf-rc-code   { text-align: center; font-size: 9px; letter-spacing: 0.14em; color: var(--faint); }
.rf-rc-thanks { text-align: center; font-weight: 700; letter-spacing: 0.06em; margin-top: 10px; font-size: 11px; }

@media (max-width: 380px) {
  .rf-receipt { font-size: 10.5px; padding: 20px 16px 22px; }
  .rf-rc-logo { font-size: 11px; }
}

/* Titolo sopra lo scontrino */
.rf-result-heading {
  font-family: var(--rf-font-display);
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
  text-shadow: none;
}
.rf-result-win  { color: var(--rf-green); }
.rf-result-lose { color: var(--rf-red); }

/* Su mobile le due meta' restano impilate: i wrapper non fanno nulla */
.rf-rc-col { display: block; }

/* =====================================================
   Scontrino su desktop: due colonne
   Allargarlo e basta non bastava, il problema era
   l'altezza. Casi a sinistra, totali a destra: lo
   scontrino si legge senza scorrere.
   ===================================================== */
@media (min-width: 1024px) {
  /* SOLO gli scontrini che hanno davvero le due colonne: la regola le
     presuppone (`.rf-rc-col-a` / `.rf-rc-col-b`), e su uno scontrino a elenco
     piatto — quello di CT Segmenter — trasformava ogni riga in una cella,
     venti pezzi sparsi su due file. Dove `:has()` non c'e', la regola non si
     applica e lo scontrino resta a una colonna: il ripiego giusto. */
  .rf-receipt:has(> .rf-rc-col-a) {
    max-width: 620px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 26px;
    align-items: start;
    padding: 24px 26px 26px;
  }

  /* L'intestazione resta centrata sopra entrambe le colonne */
  .rf-receipt > .rf-rc-col-a > .rf-rc-head {
    grid-column: 1 / -1;
  }

  /* Il filo verticale sostituisce il tratteggio orizzontale */
  .rf-rc-col-b {
    border-left: 1px dashed var(--faint, #8A867C);
    padding-left: 24px;
  }
  .rf-rc-col-b > .rf-rc-rule-dash:first-child { display: none; }

  .rf-rc-bars { height: 26px; }
}

/* =====================================================
   Toast - rifiniture
   ===================================================== */

/* L'anello rotante dietro l'icona girava all'infinito dietro una
   spunta ferma: due animazioni scollegate sullo stesso elemento. */
.result-toast-icon::before { display: none; }

.result-toast-icon {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  border: none;
  box-shadow: none;
  animation: none;
}
.result-toast-icon-correct {
  background: rgba(79, 201, 138, 0.18);
  border: none;
  box-shadow: none;
  color: var(--rf-green);
  animation: none;
}
.result-toast-icon-wrong {
  background: rgba(236, 124, 111, 0.18);
  border: none;
  box-shadow: none;
  color: var(--rf-red);
  animation: none;
}

/* Le righe informative erano figlie dirette del toast: il loro bordo
   arrivava a filo di quello del dialogo. */
.rf-note-row {
  margin-left: 14px;
  margin-right: 14px;
}
.result-toast-answers {
  padding-left: 18px;
  padding-right: 18px;
}

/* Maniglia: deve dire da sola che si tira in giu' */
.rf-toast-handle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 9px 0 5px;
  cursor: grab;
}
.result-toast.dragging .rf-toast-handle { cursor: grabbing; }

.rf-toast-grip {
  width: 44px;
  height: 4px;
  border-radius: 2px;
  background: var(--rf-line);
}
.rf-toast-hint {
  font-size: 0.6rem;
  color: var(--rf-mu);
  letter-spacing: 0.02em;
}

/* Mentre si trascina niente transizione, altrimenti insegue il dito */
.result-toast { transition: transform 0.18s ease; }
.result-toast.dragging { transition: none; }

@media (max-width: 480px) {
  .rf-toast-hint { font-size: 0.58rem; }
  .rf-note-row { margin-left: 12px; margin-right: 12px; }
}

/* =====================================================
   HUD - avvicinamento al mockup
   Nel mockup IMMAGINE e PUNTI sono affiancati a sinistra
   e il timer e' spinto a destra. Il markup usa
   `justify-between`, che li sparpagliava sui tre terzi.
   ===================================================== */
.game-hud-bar > div:first-child {
  position: relative;
  justify-content: space-between;
  align-items: center;
  min-height: 60px;
  gap: 10px;
}

/* Punteggio e moltiplicatore centrati sul serio: fuori dal flusso,
   cosi' restano al centro anche se i due lati hanno larghezze diverse. */
.game-hud-bar > div:first-child > div:nth-child(2) {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}

/* Timer e uscita ancorati a destra */
.game-hud-bar > div:first-child > div:last-child {
  margin-left: auto;
}

/* I riquadri hanno il respiro del mockup */
.hud-box {
  padding: 7px 13px;
  min-width: 74px;
  text-align: center;
}
.hud-box-label {
  font-size: 0.56rem;
  display: block;
  margin-bottom: 1px;
}
.hud-box-value {
  font-size: 1.05rem;
  display: block;
  line-height: 1.15;
}
.hud-box-score .hud-box-value,
.hud-box-score .neon-text-gold {
  font-size: 1.25rem;
}

/* La serie sta sotto il punteggio, compatta */
.hud-streak-inline {
  padding: 1px 9px;
  font-size: 0.62rem;
  border-radius: 999px;
}

/* Cuori e bonus velocita': seconda riga piu' stretta */
.game-hud-bar > div:nth-child(2) {
  margin-top: 6px;
}
.hud-heart svg { width: 15px; height: 15px; }

/* =====================================================
   Toast - riga principale come nel mockup:
   icona, titolo con sottotitolo, punteggio a destra
   ===================================================== */
.result-toast-main {
  padding: 14px 16px;
  gap: 13px;
  align-items: center;
}
.result-toast-title {
  font-size: 0.98rem;
  line-height: 1.2;
  flex: 1;
  text-align: left;
}
.result-toast-scores {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 0.95rem;
  display: flex;
  align-items: baseline;
  gap: 7px;
}

/* La riga Tua/Corretta e' il sottotitolo del verdetto:
   piu' vicina al titolo, senza il filo che la staccava */
.result-toast-answers {
  border-top: none;
  padding-top: 0;
  padding-bottom: 10px;
  margin-top: -6px;
  gap: 16px;
  font-size: 0.74rem;
}

@media (max-width: 480px) {
  .hud-box { min-width: 64px; padding: 6px 10px; }
  .hud-box-value { font-size: 0.95rem; }
  .hud-box-score .hud-box-value,
  .hud-box-score .neon-text-gold { font-size: 1.1rem; }
  .game-hud-bar > div:first-child { gap: 7px; }
}

/* Piede del toast */
.rf-toast-foot {
  padding: 12px 14px 14px;
  border-top: 1px solid var(--rf-line);
}
.rf-toast-foot .rf-btn svg { width: 17px; height: 17px; }

/* =====================================================
   HUD su desktop: gli indicatori erano agli estremi di
   uno schermo largo. Li riavvicino al centro.
   ===================================================== */
@media (min-width: 1024px) {
  .game-hud-bar > div:first-child,
  .game-hud-bar > div:nth-child(2) {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
  }
  .round-progress-bar {
    width: 100%;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Il commento fra parentesi era attaccato all'etichetta */
.rf-note-row .rf-note-sub {
  margin-left: 6px;
  opacity: 0.85;
}
.rf-note-row { gap: 9px; padding: 9px 14px; }

/* =====================================================
   Lascia o raddoppia
   ===================================================== */
.rf-dialog-gold {
  border-color: rgba(224, 179, 65, 0.45);
  max-width: 340px;
}
.rf-title-gold { color: var(--rf-gold); }

.rf-double-stake {
  background: var(--rf-flat);
  border: 1px solid var(--rf-line);
  border-radius: 12px;
  padding: 11px 13px;
  margin-bottom: 16px;
  text-align: center;
  color: var(--rf-mu);
  font-size: 0.8rem;
}

/* I due bottoni stanno affiancati: la scelta e' binaria */
.rf-actions-row {
  flex-direction: row;
  gap: 10px;
}
.rf-actions-row .rf-btn { width: auto; flex: 1; }

/* Raddoppia usa l'oro, ma pieno: e' l'azione che rischia */
.rf-btn-gold {
  background: var(--rf-gold);
  color: #1A1204;
  border-color: var(--rf-gold);
}
.rf-btn-gold:hover { background: #EFC65B; }

/* =====================================================
   Aiuti - riscrittura del posizionamento
   L'ancora e' un quadrato centrato che coincide con la
   lastra (le radiografie sono 512x512, in contain sono
   limitate dall'altezza). Gli aiuti si agganciano al suo
   bordo destro, FUORI dall'immagine.
   ===================================================== */
.rf-tools-anchor {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  height: calc(100% - 20px);
  aspect-ratio: 1;
  max-width: 100%;
  pointer-events: none;
  z-index: 5;
}

.rf-tools {
  position: absolute;
  top: 0;
  left: 100%;
  margin-left: 12px;
  pointer-events: auto;
}

/* Su schermi stretti non c'e' spazio a lato: tornano sopra
   l'immagine, in alto a destra. */
@media (max-width: 900px) {
  .rf-tools-anchor {
    left: auto;
    right: 8px;
    transform: none;
    height: auto;
    aspect-ratio: auto;
    width: auto;
  }
  .rf-tools {
    position: static;
    margin-left: 0;
  }
}

/* Lo sfondo traslucido spariva sopra i campi polmonari chiari.
   Ora e' pieno: gli aiuti restano leggibili su qualsiasi lastra. */
.tool-btn {
  background: #172136;
  border-color: rgba(255, 255, 255, 0.16);
}
.tool-btn:hover {
  background: #1E2B45;
  border-color: var(--rf-mu);
}
.tool-btn-active {
  background: #16394A !important;
  border-color: rgba(79, 184, 212, 0.75) !important;
}
.tool-btn-help {
  background: #33290E;
  border-color: rgba(224, 179, 65, 0.6);
}
.tool-btn-help:hover:not(.tool-btn-used) {
  background: #43350F;
  border-color: rgba(224, 179, 65, 0.9);
}
.tool-btn-used {
  background: rgba(23, 33, 54, 0.85) !important;
}

/* La stella era rimasta senza dimensione dopo aver tolto le
   classi Tailwind, quindi prendeva tutta l'altezza della riga. */
.result-toast-levelup svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}
.result-toast-levelup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 14px;
  margin: 0 14px 8px;
  font-family: var(--rf-font-display);
  font-weight: 800;
  font-size: 0.78rem;
  color: var(--rf-gold);
}

/* =====================================================
   CONVERSIONE - Classifica
   ===================================================== */
.leaderboard-title {
  font-family: var(--rf-font-display);
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: -0.02em;
  background: none;
  -webkit-background-clip: initial;
  -webkit-text-fill-color: initial;
  background-clip: initial;
  color: var(--rf-ink);
  text-shadow: none;
  text-transform: none;
}
.leaderboard-subtitle { color: var(--rf-mu); }

/* Filtro modalita': pill piatte, la selezionata prende la tinta */
.mode-pill {
  background: var(--rf-flat);
  border: 1px solid var(--rf-line);
  color: var(--rf-mu);
  font-family: var(--rf-font-ui);
  font-weight: 600;
  border-radius: 999px;
  min-height: 38px;
}
.mode-pill:hover { background: var(--rf-flat); border-color: var(--rf-mu); color: var(--rf-ink); }
.mode-pill-active-cyan  { background: rgba(79,184,212,0.14);  border-color: rgba(79,184,212,0.5);  color: var(--rf-cyan);  box-shadow: none; }
.mode-pill-active-gold  { background: rgba(224,179,65,0.14);  border-color: rgba(224,179,65,0.5);  color: var(--rf-gold);  box-shadow: none; }
.mode-pill-active-green { background: rgba(79,201,138,0.14);  border-color: rgba(79,201,138,0.5);  color: var(--rf-green); box-shadow: none; }

/* Filtro periodo: segmented control */
.period-filter {
  background: var(--rf-flat);
  border: 1px solid var(--rf-line);
  border-radius: 12px;
  padding: 4px;
}
.period-tab {
  font-family: var(--rf-font-ui);
  font-weight: 600;
  color: var(--rf-mu);
  border-radius: 9px;
  min-height: 38px;
}
.period-tab:hover { color: var(--rf-ink); }
.period-tab-active {
  background: var(--rf-ink);
  color: var(--rf-bg);
  box-shadow: none;
}

/* Banner della propria posizione */
.user-rank-banner {
  background: var(--rf-card);
  border: 1px solid var(--rf-line);
  border-radius: var(--rf-r-card);
}
.user-rank-position {
  font-family: var(--rf-font-display);
  font-weight: 800;
  color: var(--rf-ink);
  text-shadow: none;
}
.user-rank-label { color: var(--rf-mu); }
.user-rank-score {
  font-family: var(--rf-font-display);
  font-weight: 800;
  color: var(--rf-gold);
  text-shadow: none;
}

/* Righe della classifica */
.ranking-item {
  background: var(--rf-flat);
  border: 1px solid var(--rf-line);
  border-radius: 12px;
}
.ranking-item:hover {
  background: var(--rf-flat);
  border-color: var(--rf-mu);
  transform: none;
}
.ranking-item-current {
  background: rgba(79,184,212,0.10);
  border-color: rgba(79,184,212,0.45);
}
.ranking-position {
  background: rgba(255,255,255,0.06);
  color: var(--rf-mu);
  font-family: var(--rf-font-display);
  font-weight: 800;
  border-radius: 9px;
  box-shadow: none;
}
/* Podio: solo il colore del testo, senza gradienti e aloni */
.ranking-position-1 { background: rgba(224,179,65,0.18);  color: var(--rf-gold);  box-shadow: none; }
.ranking-position-2 { background: rgba(255,255,255,0.10); color: #C7CFDA;         box-shadow: none; }
.ranking-position-3 { background: rgba(205,127,50,0.18);  color: #D9975A;         box-shadow: none; }

.ranking-avatar {
  background: var(--rf-card);
  border: 1px solid var(--rf-line);
  border-radius: 11px;
  color: var(--rf-ink);
}
.ranking-name { color: var(--rf-ink); }
.ranking-name-current { color: var(--rf-cyan); }
.ranking-stats { color: var(--rf-mu); }
.ranking-score {
  font-family: var(--rf-font-display);
  font-weight: 800;
  color: var(--rf-gold);
  text-shadow: none;
}

/* Contenitore generico usato in piu' sezioni */
.esports-card {
  background: var(--rf-card);
  border: 1px solid var(--rf-line);
  border-radius: var(--rf-r-card);
}
.esports-card::before, .esports-card::after { display: none; }
.esports-card:hover { border-color: var(--rf-line); box-shadow: none; }

/* =====================================================
   CONVERSIONE - Badge rank e statistica
   ===================================================== */
.rank-badge {
  font-family: var(--rf-font-display);
  font-weight: 800;
  border-radius: 8px;
  box-shadow: none;
  letter-spacing: 0.04em;
}
.rank-badge-bronze      { background: rgba(205,127,50,0.18);  color: #D9975A; }
.rank-badge-silver      { background: rgba(255,255,255,0.12); color: #C7CFDA; }
.rank-badge-gold        { background: rgba(224,179,65,0.18);  color: var(--rf-gold); }
.rank-badge-diamond     { background: rgba(79,184,212,0.18);  color: var(--rf-cyan); }
.rank-badge-master      { background: rgba(236,124,111,0.18); color: var(--rf-red); }
.rank-badge-grandmaster { background: rgba(164,139,234,0.18); color: var(--rf-purple); }

.stat-badge { border-radius: 6px; font-weight: 700; }
.stat-badge-cyan   { background: rgba(79,184,212,0.14);  color: var(--rf-cyan);   border-color: rgba(79,184,212,0.35); }
.stat-badge-gold   { background: rgba(224,179,65,0.14);  color: var(--rf-gold);   border-color: rgba(224,179,65,0.35); }
.stat-badge-green  { background: rgba(79,201,138,0.14);  color: var(--rf-green);  border-color: rgba(79,201,138,0.35); }
.stat-badge-purple { background: rgba(164,139,234,0.14); color: var(--rf-purple); border-color: rgba(164,139,234,0.35); }
.stat-badge-red    { background: rgba(236,124,111,0.14); color: var(--rf-red);    border-color: rgba(236,124,111,0.35); }

/* =====================================================
   CONVERSIONE - Profilo
   ===================================================== */
.player-card {
  background: var(--rf-card);
  border: 1px solid var(--rf-line);
  border-radius: var(--rf-r-card);
}
.player-card::before { display: none; }

/* Barra XP: un solo trattamento in tutta l'app */
.xp-progress-container {
  background: var(--rf-flat);
  border: 1px solid var(--rf-line);
  border-radius: 999px;
  height: 10px;
}
.xp-progress-fill {
  background: var(--rf-ink);
  border-radius: 999px;
}
.xp-progress-fill::after { display: none; }   /* shimmer */
.xp-progress-mini { height: 6px; }

.challenge-stat-box {
  background: var(--rf-flat);
  border: 1px solid var(--rf-line);
  border-radius: 12px;
}
.challenge-stat-value {
  font-family: var(--rf-font-display);
  font-weight: 800;
  text-shadow: none;
}
.challenge-stat-label { color: var(--rf-mu); }
.challenge-stat-wins   .challenge-stat-value { color: var(--rf-green); }
.challenge-stat-losses .challenge-stat-value { color: var(--rf-red); }
.challenge-stat-draws  .challenge-stat-value { color: var(--rf-gold); }

/* =====================================================
   CONVERSIONE - Sfide: la ruota
   ===================================================== */
.wheel {
  border: 3px solid var(--rf-line);
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.wheel-spin-btn {
  background: var(--rf-ink);
  color: var(--rf-bg);
  border: none;
  border-radius: var(--rf-r-btn);
  font-family: var(--rf-font-display);
  font-weight: 800;
  box-shadow: none;
  animation: none;
}
.wheel-spin-btn:hover { background: #fff; box-shadow: none; transform: none; }

/* =====================================================
   CONVERSIONE - Modale Info
   ===================================================== */
.info-modal {
  background: var(--rf-card);
  border: 1px solid var(--rf-line);
  border-radius: var(--rf-r-card);
  box-shadow: 0 24px 60px rgba(0,0,0,0.6);
}
.info-modal::before, .info-modal::after { display: none; }
.info-modal-header { border-bottom: 1px solid var(--rf-line); background: transparent; }
.info-modal-title {
  font-family: var(--rf-font-display);
  font-weight: 800;
  color: var(--rf-ink);
  text-shadow: none;
}
.info-modal-close {
  background: transparent;
  border: 1px solid var(--rf-line);
  color: var(--rf-mu);
  border-radius: 10px;
  min-width: 40px;
  min-height: 40px;
}
.info-modal-close:hover { background: var(--rf-flat); color: var(--rf-ink); }

.info-tabs { border-bottom: 1px solid var(--rf-line); }
.info-tab {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--rf-mu);
  font-family: var(--rf-font-ui);
  font-weight: 600;
  min-height: 40px;
  box-shadow: none;
}
.info-tab:hover { background: var(--rf-flat); color: var(--rf-ink); }
.info-tab-active {
  background: var(--rf-flat);
  border-color: var(--rf-line);
  color: var(--rf-ink);
  box-shadow: none;
}
.info-tab-icon { filter: none; }

.info-mode-card {
  background: var(--rf-flat);
  border: 1px solid var(--rf-line);
  border-radius: 14px;
  box-shadow: none;
  animation: none;
}
.info-mode-card::before, .info-mode-card::after { display: none; }
.info-mode-card:hover { border-color: var(--rf-mu); transform: none; box-shadow: none; }
.info-mode-card-title {
  font-family: var(--rf-font-display);
  font-weight: 800;
  text-shadow: none;
}
.info-mode-card-sub { color: var(--rf-mu); }
.info-mode-card-content { color: var(--rf-mu); }

/* Le quattro tinte delle modalita', schiarite */
.info-mode-cyan   .info-mode-card-title { color: var(--rf-cyan); }
.info-mode-amber  .info-mode-card-title { color: var(--rf-gold); }
.info-mode-green  .info-mode-card-title { color: var(--rf-green); }
.info-mode-purple .info-mode-card-title { color: var(--rf-purple); }
.info-mode-cyan   { border-color: rgba(79,184,212,0.35); }
.info-mode-amber  { border-color: rgba(224,179,65,0.35); }
.info-mode-green  { border-color: rgba(79,201,138,0.35); }
.info-mode-purple { border-color: rgba(164,139,234,0.35); }

@media (min-width: 1024px) {
  /* La home si distribuisce su tutta la larghezza utile */
  .home-arcade-cabinet {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    column-gap: 56px;
    padding: 34px 40px;
  }
  .home-arcade-cabinet > .rf-home-side .rf-home-nav { gap: 14px; }
  .home-arcade-cabinet > .rf-home-main .home-mascot-wrapper img { width: 100%; max-width: 260px; }
}

/* Il colore del titolo sta sull'h3 interno, non sul contenitore */
.info-modal-title h3 {
  font-family: var(--rf-font-display);
  font-weight: 800;
  color: var(--rf-ink);
  text-shadow: none;
  letter-spacing: 0.01em;
}

/* Il modale della classifica riusa le classi info-modal */
.info-modal { background: var(--rf-card); }
.info-modal-header {
  background: transparent;
  border-bottom: 1px solid var(--rf-line);
}

/* Bottoni legacy che compaiono dentro questi modali */
.btn-neon-cyan {
  background: var(--rf-ink);
  border: 1px solid var(--rf-ink);
  color: var(--rf-bg);
  font-family: var(--rf-font-display);
  font-weight: 800;
  border-radius: var(--rf-r-btn);
  min-height: 44px;
}
.btn-neon-cyan:hover { background: #fff; box-shadow: none; }

.btn-neon-gold, .btn-neon-purple, .btn-neon-red {
  background: transparent;
  border: 1px solid var(--rf-line);
  color: var(--rf-ink);
  border-radius: var(--rf-r-btn);
  min-height: 44px;
}
.btn-neon-gold:hover, .btn-neon-purple:hover, .btn-neon-red:hover {
  background: var(--rf-flat);
  border-color: var(--rf-mu);
  box-shadow: none;
}

/* =====================================================
   Desktop: i modali lasciano visibile la barra laterale
   e usano la larghezza rimanente. Prima coprivano tutto
   e restavano in una colonna stretta al centro.
   ===================================================== */
@media (min-width: 1024px) {
  /* La home torna a una larghezza comoda: i modali sono
     `fixed`, quindi non dipendono da questo contenitore. */
  main.container {
    padding-left: 272px;
    padding-right: 28px;
    max-width: 1500px;
  }

  .rf-modal-wrap {
    left: 240px;
  }

  .rf-modal-panel {
    max-width: 1080px;
  }
}

/* =====================================================
   Info: il testo aveva sei colori diversi in tre righe.
   Resta un solo accento; il resto e' testo normale.
   ===================================================== */
.info-content {
  color: var(--rf-mu);
  line-height: 1.7;
}
.info-content h2,
.info-content h3,
.info-content h4,
.info-content strong,
.info-content b {
  color: var(--rf-ink);
}

/* Neutralizzo le tinte sparse sui frammenti di testo */
.info-content [class*="text-cyan"],
.info-content [class*="text-amber"],
.info-content [class*="text-yellow"],
.info-content [class*="text-green"],
.info-content [class*="text-purple"],
.info-content [class*="text-pink"],
.info-content [class*="text-orange"],
.info-content [class*="text-red"],
.info-content [class*="text-blue"] {
  color: var(--rf-ink);
}

/* L'unico accento rimasto: i termini di gioco */
.info-content .rf-term { color: var(--rf-cyan); font-weight: 600; }

.info-content [class*="text-gray"] { color: var(--rf-mu); }
.info-content em, .info-content i { font-style: normal; color: var(--rf-ink); }

/* =====================================================
   CONVERSIONE - Tornei (usata anche dal profilo)
   ===================================================== */
.tournament-modal {
  background: var(--rf-card);
  border: 1px solid var(--rf-line);
  border-radius: var(--rf-r-card);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}
.tournament-modal::before, .tournament-modal::after { display: none; }

.tournament-modal-header {
  background: transparent;
  border-bottom: 1px solid var(--rf-line);
}
.tournament-modal-title,
.tournament-modal-title h3 {
  font-family: var(--rf-font-display);
  font-weight: 800;
  color: var(--rf-ink);
  text-shadow: none;
  letter-spacing: 0.01em;
}

.tournament-card {
  background: var(--rf-flat);
  border: 1px solid var(--rf-line);
  border-radius: 14px;
  box-shadow: none;
  animation: none;
}
.tournament-card::before, .tournament-card::after { display: none; }
.tournament-card:hover {
  border-color: var(--rf-mu);
  transform: none;
  box-shadow: none;
}

.tournament-info-box {
  background: var(--rf-flat);
  border: 1px solid var(--rf-line);
  border-radius: 12px;
  box-shadow: none;
}

.tournament-button-unlocked {
  background: var(--rf-ink);
  color: var(--rf-bg);
  border: 1px solid var(--rf-ink);
  border-radius: var(--rf-r-btn);
  font-family: var(--rf-font-display);
  font-weight: 800;
  min-height: 44px;
  box-shadow: none;
  animation: none;
}
.tournament-button-unlocked:hover { background: #fff; box-shadow: none; transform: none; }

.tournament-button-locked {
  background: transparent;
  border: 1px dashed var(--rf-line);
  color: var(--rf-mu);
  border-radius: var(--rf-r-btn);
  min-height: 44px;
  opacity: 1;
  box-shadow: none;
}

/* =====================================================
   Strato di compatibilita'
   Profilo e sfide sono scritti quasi solo con utility
   Tailwind, quindi gli override sulle classi legacy non
   li toccavano. Qui rimappo le tinte ricorrenti sui token
   nuovi: e' un ponte, finche' quel markup non viene
   riscritto con classi rf-.
   ===================================================== */

/* Superfici */
[class*="bg-[#1a1a24]"] { background-color: var(--rf-card) !important; }
[class*="bg-[#12121a]"],
[class*="bg-[#0d0d14]"] { background-color: var(--rf-flat) !important; }
[class*="bg-black/30"],
[class*="bg-black/40"],
[class*="bg-black/50"] { background-color: var(--rf-flat) !important; }

/* Bordi */
[class*="border-white/10"],
[class*="border-white/5"],
[class*="border-gray-700"],
[class*="border-gray-600"] { border-color: var(--rf-line) !important; }

/* Testo di servizio */
[class*="text-gray-400"],
[class*="text-gray-500"] { color: var(--rf-mu) !important; }
[class*="text-gray-300"],
[class*="text-gray-200"] { color: var(--rf-ink) !important; }

/* Accenti: stesse tinte, luminanza che regge il testo su fondo scuro */
[class*="text-cyan-400"],  [class*="text-cyan-300"]  { color: var(--rf-cyan) !important; }
[class*="text-amber-400"], [class*="text-amber-300"],
[class*="text-yellow-400"] { color: var(--rf-gold) !important; }
[class*="text-green-400"], [class*="text-green-300"] { color: var(--rf-green) !important; }
[class*="text-red-400"],   [class*="text-red-300"]   { color: var(--rf-red) !important; }
[class*="text-purple-400"],[class*="text-purple-300"]{ color: var(--rf-purple) !important; }

/* Gli alonI neon residui */
.neon-text-cyan, .neon-text-gold, .neon-text-purple,
.neon-text-correct, .neon-text-wrong, .neon-title,
.neon-text-red, .neon-text-green {
  text-shadow: none !important;
}
.neon-text-cyan   { color: var(--rf-cyan); }
.neon-text-gold   { color: var(--rf-gold); }
.neon-text-purple { color: var(--rf-purple); }
.neon-text-red    { color: var(--rf-red); }
.neon-text-green, .neon-text-correct { color: var(--rf-green); }
.neon-text-wrong  { color: var(--rf-red); }

/* Le card generiche di daisyUI usate qua e la' */
.card {
  background: var(--rf-card);
  border: 1px solid var(--rf-line);
  border-radius: var(--rf-r-card);
}

/* I gradienti Tailwind non erano intercettati dallo strato di
   compatibilita': restavano intestazioni viola/ciano e bottoni
   sfumati in mezzo a superfici gia' convertite. */
button[class*="bg-gradient-to"] {
  background-image: none !important;
  background-color: var(--rf-ink) !important;
  color: var(--rf-bg) !important;
  border: none;
  border-radius: var(--rf-r-btn);
  font-family: var(--rf-font-display);
  font-weight: 800;
  min-height: 44px;
}
button[class*="bg-gradient-to"]:hover { background-color: #fff !important; }

div[class*="bg-gradient-to"],
span[class*="bg-gradient-to"] { background-image: none !important; }

/* L'intestazione del profilo era un gradiente ciano/viola */
div[class*="from-cyan-900"],
div[class*="from-purple-900"] { background-color: var(--rf-flat) !important; }

/* =====================================================
   Tornei e Profilo: pagine, non modali
   Sono destinazioni con tab, storico e badge, non
   decisioni da prendere e chiudere. Da modali avevano
   anche due barre di scorrimento annidate.
   ===================================================== */
.rf-page {
  background: var(--rf-bg);
  align-items: flex-start;
  padding: 0;
}

.rf-page > .rf-modal-panel,
.rf-page > div {
  max-width: none;
  width: 100%;
  max-height: none;
  margin-bottom: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  overflow: visible;
}

/* Il contenuto respira e resta leggibile su schermi larghi */
.rf-page > div > * { max-width: 1080px; margin-left: auto; margin-right: auto; }

@media (min-width: 1024px) {
  .rf-page { left: 240px; padding: 26px 32px 40px; }
}
@media (max-width: 1023px) {
  .rf-page { padding: 16px 14px 32px; }
}

/* `inset-0` di Tailwind (iniettato a runtime) vince su .rf-modal-wrap:
   il pannello copriva tutta la finestra, barra laterale inclusa, e
   sembrava spostato solo perche' e' centrato. Qualifico col tag. */
@media (min-width: 1024px) {
  div.rf-modal-wrap { left: 240px !important; }
  div.rf-page {
    left: 240px !important;
    background-color: var(--rf-bg) !important;
  }
}
div.rf-page { background-color: var(--rf-bg) !important; }

/* =====================================================
   Crea sfida
   Ruota, esito del sorteggio, codice e bottoni erano
   impilati in un dialogo da 448px: troppo alto, si
   scorreva. Allargo e compatto la ruota.
   ===================================================== */
.rf-sfida { max-width: 520px; text-align: left; }
.rf-sfida-title { text-align: left; margin: 0; }

/* La ruota occupava mezza schermata */
.rf-sfida .wheel-container { width: 176px; height: 176px; }
.rf-sfida .wheel-mascot-wrapper { width: 48px; height: 48px; }
.rf-sfida .wheel-mascot-wrapper img { width: 36px; height: 36px; }
.rf-sfida .wheel-mascot-1 { top: 4px; }
.rf-sfida .wheel-mascot-2,
.rf-sfida .wheel-mascot-3 { bottom: 18px; }
.rf-sfida .wheel-pointer { top: -12px; }
.rf-sfida .wheel-pointer svg { width: 22px; height: 22px; }

/* Esito del sorteggio: riquadro piatto, non un gradiente */
.rf-draw-result {
  text-align: center;
  margin-top: 14px;
  padding: 11px 13px;
  border-radius: 12px;
  background: var(--rf-flat);
  border: 1px solid var(--rf-line);
}

/* Il codice della sfida: e' la cosa da copiare, quindi la piu' evidente */
.rf-code-box {
  background: var(--rf-flat);
  border: 1px dashed var(--rf-line);
  border-radius: 14px;
  padding: 18px 16px;
  text-align: center;
}
.rf-code-box [class*="font-mono"] {
  color: var(--rf-ink) !important;
  letter-spacing: 0.24em;
  font-size: 1.7rem;
}

/* Etichette dei passaggi */
.rf-sfida p[class*="uppercase"] {
  color: var(--rf-mu);
  letter-spacing: 0.14em;
  font-size: 0.62rem;
  text-align: center;
}

.rf-sfida .btn { min-height: 44px; }

@media (max-width: 420px) {
  .rf-sfida .wheel-container { width: 150px; height: 150px; }
}

/* =====================================================
   Profilo - tab
   Erano quattro colori diversi (ciano, ambra, viola,
   giallo) piu' le emoji: quattro accenti per quattro
   voci equivalenti. Ora un solo stato attivo.
   ===================================================== */
.rf-ptabs {
  display: flex;
  gap: 4px;
  padding: 6px;
  margin: 0 0 4px;
  background: var(--rf-flat);
  border-radius: 12px;
}

.rf-ptab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 8px;
  min-height: 44px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--rf-mu);
  font-family: var(--rf-font-ui);
  font-weight: 600;
  font-size: 0.78rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.rf-ptab svg { width: 16px; height: 16px; flex-shrink: 0; }
.rf-ptab:hover { color: var(--rf-ink); }

.rf-ptab-on {
  background: var(--rf-ink);
  color: var(--rf-bg);
}

@media (max-width: 560px) {
  .rf-ptab span { display: none; }   /* sotto i 560px restano le icone */
  .rf-ptab { padding: 10px 4px; }
  .rf-ptab svg { width: 18px; height: 18px; }
}

/* =====================================================
   Profilo - riquadri statistica con icona
   ===================================================== */
.rf-stat-box {
  background: var(--rf-flat);
  border: 1px solid var(--rf-line);
  border-radius: 13px;
  padding: 12px 13px;
  text-align: left;
}

.rf-stat-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 6px;
}
.rf-stat-ico {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--rf-mu);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.rf-stat-ico svg { width: 14px; height: 14px; }
.rf-stat-lbl {
  font-size: 0.63rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--rf-mu);
  line-height: 1.25;
}

/* Il numero e' il protagonista del riquadro */
.rf-stat-box > div:not(.rf-stat-head) {
  font-family: var(--rf-font-display);
  font-weight: 800;
  font-size: 1.45rem;
  line-height: 1.1;
}

/* Le etichette della griglia home ereditavano text-align:center:
   le voci corte (TORNEI, INFO) rientravano di ~20px e sembravano
   spostate rispetto a CLASSIFICA e SFIDE, che riempiono la riga. */
.home-nav-text,
.home-nav-label,
.home-nav-sub {
  text-align: left;
}

/* =====================================================
   Profilo - intestazione
   Prima: mascotte grande sullo sfondo con gradiente e i
   dati sovrapposti in basso a sinistra. Ora la mascotte
   sta a sinistra e i dati leggibili a destra.
   ===================================================== */
.rf-prof-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 22px 24px;
  background: var(--rf-card);
  border-bottom: 1px solid var(--rf-line);
}

.rf-prof-avatar {
  flex-shrink: 0;
  width: 148px;
  height: 148px;
  border-radius: 22px;
  background: var(--rf-flat);
  border: 1px solid var(--rf-line);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}
.rf-prof-avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.5));
}

.rf-prof-info { flex: 1; min-width: 0; }

.rf-prof-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.rf-prof-level {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--rf-flat);
  border: 1px solid var(--rf-line);
  color: var(--rf-mu);
  font-size: 0.68rem;
  font-weight: 700;
}

.rf-prof-name {
  font-family: var(--rf-font-display);
  font-weight: 800;
  font-size: 1.55rem;
  letter-spacing: -0.02em;
  color: var(--rf-ink);
  margin: 0 0 8px;
  text-shadow: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rf-prof-fotoni {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  color: var(--rf-gold);
}
.rf-prof-fotoni svg { width: 15px; height: 15px; }
.rf-prof-fotoni b {
  font-family: var(--rf-font-display);
  font-weight: 800;
  font-size: 1.05rem;
}
.rf-prof-fotoni span {
  color: var(--rf-mu);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* `space-between` senza `gap`: quando le due scritte riempiono esattamente la
   riga — succede sul telefono, dove la colonna e' stretta — lo spazio in mezzo
   diventa zero e si leggono attaccate. Con «Livello 10» e «1963 / 2067 XP» il
   risultato era «Livello 101963», che sembra un numero. Un `gap` minimo lo
   impedisce, e `nowrap` tiene insieme i numeri se poi la riga va a capo. */
.rf-prof-xp-row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2px 12px;
  font-size: 0.68rem;
  color: var(--rf-mu);
  margin-bottom: 5px;
}
.rf-prof-xp-row > span { white-space: nowrap; }

.rf-prof-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: transparent;
  border: 1px solid var(--rf-line);
  color: var(--rf-mu);
  padding: 10px;
  cursor: pointer;
}
.rf-prof-close:hover { background: var(--rf-flat); color: var(--rf-ink); }
.rf-prof-close svg { width: 100%; height: 100%; }

/* Azioni in fondo */
.rf-prof-actions {
  display: flex;
  gap: 10px;
  padding: 16px 24px 22px;
  border-top: 1px solid var(--rf-line);
}
.rf-prof-actions .rf-btn { flex: 1; }
.rf-prof-actions .rf-btn svg { width: 17px; height: 17px; }

@media (max-width: 560px) {
  .rf-prof-head { flex-direction: column; text-align: center; gap: 14px; padding: 20px 16px; }
  /* Sul telefono l'intestazione si impila e la mascotte va al centro, con
     tutta la larghezza a disposizione: rimpicciolirla li' era il contrario
     di quello che serve. E' la faccia del rango, la cosa che si guarda per
     prima aprendo il profilo. */
  .rf-prof-avatar { width: 172px; height: 172px; border-radius: 26px; padding: 10px; }
  .rf-prof-badges, .rf-prof-fotoni { justify-content: center; }
  .rf-prof-name { white-space: normal; }
  .rf-prof-actions { flex-direction: column; padding: 14px 16px 20px; }
}

/* Sotto i 380px lo schermo e' davvero stretto e 172px si mangerebbero mezza
   schermata prima ancora dei dati. */
@media (max-width: 380px) {
  .rf-prof-avatar { width: 140px; height: 140px; }
}

/* =====================================================
   Footer: una riga sola, con icone
   Su mobile andava a capo spezzando i link; Supporta si
   perdeva in mezzo agli altri tre.
   ===================================================== */
.rf-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: nowrap;
}

.rf-foot-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--rf-mu);
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.rf-foot-link svg { width: 13px; height: 13px; flex-shrink: 0; }
.rf-foot-link:hover { background: var(--rf-flat); color: var(--rf-ink); }

/* Supporta e' l'unica azione del footer, non un link di servizio */
.rf-foot-support {
  background: rgba(236, 124, 111, 0.12);
  border: 1px solid rgba(236, 124, 111, 0.35);
  color: var(--rf-red);
  font-weight: 700;
}
.rf-foot-support:hover {
  background: rgba(236, 124, 111, 0.2);
  border-color: rgba(236, 124, 111, 0.6);
  color: var(--rf-red);
}

/* Sotto i 480px restano le icone, tranne Supporta che tiene il testo */
@media (max-width: 480px) {
  .rf-foot { gap: 4px; }
  .rf-foot-link { padding: 8px 9px; }
  .rf-foot-link span { display: none; }
  .rf-foot-link svg { width: 15px; height: 15px; }
  .rf-foot-support span { display: inline; }
  .rf-foot-support { padding: 8px 12px; }
}

/* La tagline ora fa da sola: due righe, un filo piu' grande */
/* Sottotitolo del gioco: sta attaccato alla mascotte e ha il
   peso di un claim, non di una nota a pie' di pagina. */
.rf-tagline {
  margin: 2px 0 20px;
  text-align: center;
}

.rf-tagline-1,
.rf-tagline-2 { display: block; }

.rf-tagline-1 {
  color: var(--rf-ink);
  font-family: var(--rf-font-ui);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.rf-tagline-2 {
  color: var(--rf-cyan);
  font-family: var(--rf-font-ui);
  font-size: 1.02rem;
  font-weight: 500;
  line-height: 1.35;
  margin-top: 3px;
}

@media (max-width: 640px) {
  .rf-tagline-1 { font-size: 1.15rem; }
  .rf-tagline-2 { font-size: 0.92rem; }
}

/* =====================================================
   Tornei - rifiniture
   ===================================================== */
.rf-trn-tabs { margin: 0 16px 12px; }

/* Copertina della card */
.rf-tcover {
  width: 100%;
  height: 116px;
  border-radius: 13px 13px 0 0;
  overflow: hidden;
  background: var(--rf-flat);
}
.rf-tcover-empty {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--rf-line);
}
.rf-tcover-empty svg { width: 44px; height: 44px; }

/* Stato del torneo: pastiglie sobrie, non blocchi saturi */
.rf-tstate {
  display: inline-block;
  padding: 4px 10px !important;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
  backdrop-filter: blur(6px);
}
.rf-tstate-live { background: rgba(79,201,138,0.18);  border-color: rgba(79,201,138,0.5);  color: #7FE3AC; }
.rf-tstate-soon { background: rgba(224,179,65,0.18);  border-color: rgba(224,179,65,0.5);  color: #EFCE73; }
.rf-tstate-done { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.2); color: #C3CCD8; }
.rf-tstate-off  { background: rgba(236,124,111,0.18); border-color: rgba(236,124,111,0.5); color: #F09A8E; }
.rf-tstate-in   { background: rgba(79,184,212,0.18);  border-color: rgba(79,184,212,0.5);  color: #7FD0E4; }

/* Partecipanti */
.rf-tcount { display: inline-flex; align-items: center; gap: 5px; }
.rf-tcount svg { width: 13px; height: 13px; }

/* =====================================================
   Modali rimasti: pelle comune
   ===================================================== */
.rf-panel {
  background: var(--rf-card);
  border: 1px solid var(--rf-line);
  border-radius: var(--rf-r-card);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  color: var(--rf-ink);
}
.rf-panel h3 {
  font-family: var(--rf-font-display);
  font-weight: 800;
  color: var(--rf-ink) !important;
  text-shadow: none !important;
  letter-spacing: 0.01em;
}

.rf-panel-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 11px;
  border: 1px solid var(--rf-line);
  background: transparent;
  color: var(--rf-mu);
  cursor: pointer;
}
.rf-panel-close:hover { background: var(--rf-flat); color: var(--rf-ink); }
.rf-panel-close svg { width: 18px; height: 18px; }

/* =====================================================
   Le mie sfide
   Il pannello era max-w-md: con le sfide in elenco il
   contenuto sforava e compariva lo scroll orizzontale.
   ===================================================== */
.rf-sfide-panel {
  max-width: 640px;
  overflow-x: hidden;
}
.rf-sfide-panel * { min-width: 0; }
.rf-sfide-panel .overflow-y-auto {
  overflow-x: hidden;
  padding-right: 4px;
}
/* Le righe possono andare a capo invece di allargare il pannello */
.rf-sfide-panel .flex { flex-wrap: wrap; }
.rf-sfide-panel .flex-1 { min-width: 0; }

/* =====================================================
   Ordine Best of 3
   Erano emoji dentro cerchi a tinta piena. Ora icone a
   tratto che usano currentColor, quindi lo stato le tinge.
   ===================================================== */
.rf-bo3-ico {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9px;
  border: 1px solid transparent;
}
.rf-bo3-ico svg { width: 100%; height: 100%; }

.rf-bo3-cyan  { background: rgba(79,184,212,0.14);  border-color: rgba(79,184,212,0.4);  color: var(--rf-cyan); }
.rf-bo3-gold  { background: rgba(224,179,65,0.14);  border-color: rgba(224,179,65,0.4);  color: var(--rf-gold); }
.rf-bo3-green { background: rgba(79,201,138,0.14);  border-color: rgba(79,201,138,0.4);  color: var(--rf-green); }

.rf-bo3-lbl {
  font-size: 0.62rem;
  font-weight: 700;
  margin-top: 6px;
  letter-spacing: 0.02em;
}
.rf-bo3-cyan-t  { color: var(--rf-cyan); }
.rf-bo3-gold-t  { color: var(--rf-gold); }
.rf-bo3-green-t { color: var(--rf-green); }

.rf-bo3-arrow {
  color: var(--rf-line);
  font-size: 1.3rem;
  margin: 0 4px;
  align-self: center;
  padding-bottom: 14px;
}

/* =====================================================
   La ruota
   Settori piu' sobri, bordo pulito, indicatore a cuneo
   invece della freccia che rimbalzava.
   ===================================================== */
.wheel {
  background: conic-gradient(
    from -60deg,
    rgba(79, 184, 212, 0.32)  0deg 120deg,
    rgba(224, 179, 65, 0.32)  120deg 240deg,
    rgba(79, 201, 138, 0.32)  240deg 360deg
  );
  border: 2px solid var(--rf-line);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5);
}
/* Le linee divisorie erano bianche al 30%: troppo marcate */
.wheel::before {
  background:
    linear-gradient(30deg,  transparent 49.4%, rgba(255,255,255,0.16) 49.4%, rgba(255,255,255,0.16) 50.6%, transparent 50.6%),
    linear-gradient(150deg, transparent 49.4%, rgba(255,255,255,0.16) 49.4%, rgba(255,255,255,0.16) 50.6%, transparent 50.6%),
    linear-gradient(270deg, transparent 49.4%, rgba(255,255,255,0.16) 49.4%, rgba(255,255,255,0.16) 50.6%, transparent 50.6%);
}

/* Le mascotte leggono meglio con un velo dietro */
.wheel-mascot-wrapper img {
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.75));
}
.wheel-mascot-wrapper span {
  background: rgba(10, 15, 26, 0.7);
  padding: 1px 6px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}

/* Indicatore: un cuneo fermo, non una freccia che rimbalza */
.wheel-pointer {
  animation: none;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.6));
}
.wheel-pointer svg { color: var(--rf-ink); }

/* Il bottone di rotazione E' il mozzo: prima ci avevo messo sopra
   un cerchio decorativo che lo copriva. */
.wheel-spin-btn {
  border-radius: 999px;
  width: 82px;
  height: 82px;
  padding: 0;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  border: 3px solid var(--rf-card);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}
.wheel-spin-btn:disabled { opacity: 0.55; }

/* Indicatori di round dentro "Le mie sfide": stesso linguaggio
   dell'ordine Best of 3, in scala ridotta. */
.rf-mini-dot {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.66rem;
  font-weight: 800;
}
.rf-mini-mode {
  width: 15px;
  height: 15px;
  margin-top: 4px;
}
.rf-mini-mode svg { width: 100%; height: 100%; }

/* =====================================================
   Barra di avanzamento dei round
   Verde = individuata, rosso = mancata, bianco = round in
   corso, grigio = da giocare. Resta sottile: sta sopra la
   lastra e non deve rubarle spazio.
   ===================================================== */
.round-progress-bar {
  gap: 4px;
  padding: 7px 14px;
}
.round-progress-segment {
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.10);
  transition: background 0.25s ease;
}

.round-progress-segment.seg-ok { background: var(--rf-green); }
.round-progress-segment.seg-ko { background: var(--rf-red); }

/* Il round in corso: bianco, cosi' si distingue da entrambi gli esiti */
.round-progress-segment.current {
  background: var(--rf-ink);
  box-shadow: none;
  animation: none;
}
.round-progress-segment.completed { background: rgba(255, 255, 255, 0.24); }

@media (max-width: 480px) {
  .round-progress-bar { gap: 3px; padding: 6px 12px; }
  .round-progress-segment { height: 4px; }
}

/* =====================================================
   Schermata risultati: azioni in alto
   Home, Replay e Condividi stanno sopra lo scontrino,
   cosi' si raggiungono senza doverlo scorrere fino in fondo.
   ===================================================== */
.rf-result-actions {
  display: flex;
  gap: 8px;
  margin: 0 0 16px;
}

.rf-result-action {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 10px;
  border: 1px solid var(--rf-line);
  border-radius: 10px;
  background: var(--rf-flat);
  color: var(--rf-mu);
  font-family: var(--rf-font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.rf-result-action svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.rf-result-action:hover {
  background: var(--rf-card);
  border-color: var(--rf-cyan);
  color: var(--rf-ink);
}

.rf-result-action:focus-visible {
  outline: 2px solid var(--rf-cyan);
  outline-offset: 2px;
}

/* Rigiocare e' l'azione che quasi tutti vogliono: si distingue */
.rf-result-action-primary {
  background: var(--rf-cyan);
  border-color: var(--rf-cyan);
  color: #06131A;
}

.rf-result-action-primary:hover {
  background: #6ACAE4;
  border-color: #6ACAE4;
  color: #06131A;
}

/* Sotto i 380px le tre etichette non ci stanno: restano le icone */
@media (max-width: 380px) {
  .rf-result-action span { display: none; }
  .rf-result-action { min-height: 40px; }
  .rf-result-action svg { width: 18px; height: 18px; }
}

/* =====================================================
   .esports-card usa overflow:hidden per contenere il bagliore
   dello ::before, ma cosi' diventa un contenitore di scorrimento:
   se il contenuto lo supera anche di un pixel, il browser prova a
   scorrerlo, non puo' (hidden non e' scorribile dall'utente) e non
   passa l'evento alla pagina — la rotella muore li' mentre la
   scrollbar continua a funzionare. `clip` ritaglia allo stesso
   modo senza creare il contenitore di scorrimento.
   ===================================================== */
.esports-card {
  overflow: clip;
}

/* =====================================================
   Tab riutilizzabili (prima usati dalle sfide)
   ===================================================== */
.rf-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--rf-line);
  padding-bottom: 8px;
}

.rf-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--rf-mu);
  font-family: var(--rf-font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.rf-tab:hover { background: var(--rf-flat); color: var(--rf-ink); }

.rf-tab-on {
  background: var(--rf-flat);
  border-color: var(--rf-line);
  color: var(--rf-ink);
}

.rf-tab:focus-visible {
  outline: 2px solid var(--rf-cyan);
  outline-offset: 2px;
}

.rf-tab-count {
  min-width: 19px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--rf-line);
  color: var(--rf-ink);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

.rf-tab-on .rf-tab-count {
  background: var(--rf-cyan);
  color: #06131A;
}

/* Stato vuoto: dice cosa manca e cosa fare, senza emoji decorative */
.rf-empty {
  padding: 40px 20px;
  text-align: center;
}

.rf-empty-title {
  color: var(--rf-ink);
  font-family: var(--rf-font-ui);
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 6px;
}

.rf-empty-sub {
  color: var(--rf-mu);
  font-size: 12.5px;
}

/* =====================================================
   Scheda sfida: intestazione, esito e blocco VS
   La striscia a sinistra porta l'esito, cosi' si legge di
   sfilata senza dover mettere a fuoco il testo.
   ===================================================== */
.rf-ch-card {
  position: relative;
  padding: 11px 14px 11px 16px;
  border: 1px solid var(--rf-line);
  border-radius: 14px;
  background: var(--rf-card);
  overflow: hidden;
}

.rf-ch-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--rf-line);
}

.rf-ch-open::before { background: var(--rf-cyan); }
.rf-ch-won::before  { background: var(--rf-green); }
.rf-ch-lost::before { background: var(--rf-red); }
.rf-ch-draw::before { background: var(--rf-gold); }

/* Le concluse sono cronologia: restano leggibili senza gridare
   quanto quelle su cui si puo' ancora agire */
.rf-ch-won, .rf-ch-lost, .rf-ch-draw { background: var(--rf-flat); }
.rf-ch-won .rf-vs-score,
.rf-ch-lost .rf-vs-score,
.rf-ch-draw .rf-vs-score { opacity: 0.82; }

.rf-ch-dot {
  position: absolute;
  top: 10px; right: 12px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--rf-cyan);
  color: #06131A;
  font-size: 10px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
.rf-ch-open .rf-ch-status { padding-right: 26px; }

.rf-ch-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 9px;
}

.rf-ch-tags { display: flex; align-items: center; gap: 7px; }

.rf-ch-code {
  padding: 3px 8px;
  border: 1px solid var(--rf-line);
  border-radius: 6px;
  background: var(--rf-bg);
  color: var(--rf-cyan);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
}

.rf-ch-bo3 {
  padding: 3px 7px;
  border-radius: 6px;
  background: rgba(164, 139, 234, 0.16);
  color: var(--rf-purple);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.rf-ch-status { display: flex; align-items: center; gap: 8px; }

.rf-ch-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-family: var(--rf-font-ui);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.rf-ch-pill svg { width: 12px; height: 12px; flex-shrink: 0; }

.rf-pill-won  { background: rgba(79, 201, 138, 0.15); color: var(--rf-green); }
.rf-pill-lost { background: rgba(236, 124, 111, 0.15); color: var(--rf-red); }
.rf-pill-draw { background: rgba(224, 179, 65, 0.15);  color: var(--rf-gold); }
.rf-pill-open { background: var(--rf-flat); color: var(--rf-mu); }

.rf-ch-fot {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11.5px;
  font-weight: 700;
}
.rf-ch-fot svg { width: 11px; height: 11px; }
.rf-fot-up   { color: var(--rf-gold); }
.rf-fot-down { color: var(--rf-red); }

/* --- Il perno VS --- */
.rf-vs {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
}

.rf-vs-side {
  display: flex;
  align-items: baseline;
  gap: 9px;
  min-width: 0;
}
.rf-vs-right { flex-direction: row-reverse; }

.rf-vs-name {
  color: var(--rf-mu);
  font-family: var(--rf-font-ui);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rf-vs-score {
  /* Non Orbitron: il suo zero e' un rettangolo sbarrato che a colpo
     d'occhio sembra un glifo mancante. Per dei punteggi serve una
     cifra che non lasci dubbi. */
  font-family: var(--rf-font-ui);
  font-variant-numeric: tabular-nums;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.rf-vs-me   { color: var(--rf-cyan); }
.rf-vs-them { color: var(--rf-purple); }

.rf-vs-unit {
  color: var(--rf-mu);
  font-size: 10px;
  letter-spacing: 0.05em;
  margin-top: 1px;
}

.rf-vs-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border: 1px solid var(--rf-line);
  border-radius: 50%;
  background: var(--rf-bg);
  color: var(--rf-mu);
  font-family: var(--rf-font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

@media (max-width: 420px) {
  .rf-vs-score { font-size: 19px; }
  .rf-vs-badge { width: 27px; height: 27px; font-size: 10px; }
}

/* =====================================================
   Testi lunghi dei pannelli (privacy, disclaimer, info)
   Questi contenuti sono scritti in Tailwind e ogni voce
   portava un colore diverso: ne usciva un arcobaleno che
   rendeva difficile capire cosa fosse davvero importante.
   Qui si riporta tutto a due soli livelli — titolo e testo —
   e l'accento resta per i link, che sono l'unica cosa
   cliccabile. Serve la specificita' doppia perche' Tailwind
   Play CDN inietta le utility a runtime.
   ===================================================== */
.rf-doc {
  color: var(--rf-mu) !important;
  font-size: 13.5px;
  line-height: 1.62;
}

.rf-doc.rf-doc h1,
.rf-doc.rf-doc h2,
.rf-doc.rf-doc h3,
.rf-doc.rf-doc h4,
.rf-doc.rf-doc h5 {
  color: var(--rf-ink) !important;
  font-family: var(--rf-font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 7px;
}

.rf-doc.rf-doc p,
.rf-doc.rf-doc li,
.rf-doc.rf-doc span { color: var(--rf-mu) !important; }

.rf-doc.rf-doc strong,
.rf-doc.rf-doc b { color: var(--rf-ink) !important; font-weight: 600; }

.rf-doc.rf-doc ul {
  list-style: none;
  margin: 6px 0 0;
  padding-left: 2px;
}

.rf-doc.rf-doc ul li {
  position: relative;
  padding-left: 15px;
  margin-bottom: 3px;
}

.rf-doc.rf-doc ul li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 9px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--rf-line);
}

/* I link restano l'unico accento: sono l'unica cosa cliccabile */
.rf-doc.rf-doc a,
.rf-doc.rf-doc button {
  color: var(--rf-cyan) !important;
  text-decoration: none;
}
.rf-doc.rf-doc a:hover,
.rf-doc.rf-doc button:hover { text-decoration: underline; }

/* Separazione fra sezioni, al posto dei colori diversi */
.rf-doc.rf-doc > div + div {
  border-top: 1px solid var(--rf-line);
  padding-top: 14px;
}

/* =====================================================
   Accesso e registrazione
   Erano rimasti in DaisyUI: unici schermi con i controlli
   del tema di partenza.
   ===================================================== */
.rf-auth {
  max-width: 420px;
  margin: 0 auto;
  border: 1px solid var(--rf-line);
  border-radius: 16px;
  background: var(--rf-card);
}

.rf-auth-body { padding: 26px 24px 24px; }

.rf-auth-title {
  color: var(--rf-ink);
  font-family: var(--rf-font-ui);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.rf-auth-sub {
  color: var(--rf-mu);
  font-size: 13px;
  margin: 4px 0 20px;
}

.rf-auth-note {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  margin-bottom: 18px;
  border: 1px solid rgba(164, 139, 234, 0.35);
  border-radius: 10px;
  background: rgba(164, 139, 234, 0.12);
  color: var(--rf-purple);
  font-size: 12.5px;
}
.rf-auth-note svg { width: 17px; height: 17px; flex-shrink: 0; }

.rf-field { margin-bottom: 15px; }

.rf-label {
  display: block;
  color: var(--rf-mu);
  font-family: var(--rf-font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.rf-input {
  width: 100%;
  height: 44px;
  padding: 0 13px;
  border: 1px solid var(--rf-line);
  border-radius: 10px;
  background: var(--rf-bg);
  color: var(--rf-ink);
  font-family: var(--rf-font-ui);
  font-size: 14px;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.rf-input::placeholder { color: var(--rf-mu); }

.rf-input:focus {
  outline: none;
  border-color: var(--rf-cyan);
  box-shadow: 0 0 0 3px rgba(79, 184, 212, 0.16);
}

.rf-hint {
  color: var(--rf-mu);
  font-size: 11.5px;
  margin-top: 5px;
}

.rf-auth-forgot { text-align: right; margin-bottom: 16px; }

.rf-link {
  color: var(--rf-cyan);
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
  cursor: pointer;
}
.rf-link:hover { text-decoration: underline; }

.rf-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 16px;
  color: var(--rf-mu);
  font-size: 12.5px;
  line-height: 1.5;
  cursor: pointer;
}

.rf-check input[type="checkbox"] {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  margin-top: 1px;
  accent-color: var(--rf-cyan);
  cursor: pointer;
}

.rf-alert {
  padding: 10px 12px;
  margin-bottom: 14px;
  border: 1px solid rgba(236, 124, 111, 0.4);
  border-radius: 10px;
  background: rgba(236, 124, 111, 0.12);
  color: var(--rf-red);
  font-size: 12.5px;
}

.rf-sep {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  color: var(--rf-mu);
  font-size: 11.5px;
}
.rf-sep::before, .rf-sep::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rf-line);
}

/* Azione secondaria: presente ma senza competere con quella
   principale, che e' l'unica che si vuole far premere */
.rf-btn-quiet {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--rf-line);
  border-radius: 10px;
  background: transparent;
  color: var(--rf-mu);
  font-family: var(--rf-font-ui);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.rf-btn-quiet:hover {
  background: var(--rf-flat);
  border-color: var(--rf-cyan);
  color: var(--rf-ink);
}
.rf-btn-quiet:focus-visible {
  outline: 2px solid var(--rf-cyan);
  outline-offset: 2px;
}

/* Icona guida dentro il campo: dice a colpo d'occhio cosa
   chiede la riga, senza allungare l'etichetta */
.rf-input-wrap { position: relative; }

.rf-input-ico {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 17px;
  height: 17px;
  color: var(--rf-mu);
  pointer-events: none;
  transition: color 0.16s ease;
}

.rf-input-ico-pad { padding-left: 39px; }

.rf-input-wrap:focus-within .rf-input-ico { color: var(--rf-cyan); }

.rf-btn-quiet svg { width: 15px; height: 15px; margin-right: 8px; flex-shrink: 0; }

/* =====================================================
   Feedback
   ===================================================== */
.rf-choices { display: flex; gap: 10px; }

.rf-choice {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  border: 1px solid var(--rf-line);
  border-radius: 10px;
  background: var(--rf-bg);
  color: var(--rf-mu);
  font-family: var(--rf-font-ui);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.rf-choice svg { width: 18px; height: 18px; flex-shrink: 0; }
.rf-choice:hover { background: var(--rf-flat); color: var(--rf-ink); }

.rf-choice-yes {
  border-color: var(--rf-green);
  background: rgba(79, 201, 138, 0.14);
  color: var(--rf-green);
}
.rf-choice-no {
  border-color: var(--rf-red);
  background: rgba(236, 124, 111, 0.14);
  color: var(--rf-red);
}

.rf-textarea {
  height: auto;
  min-height: 74px;
  padding: 11px 13px;
  line-height: 1.5;
  resize: vertical;
}

.rf-fb-skip {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 6px;
  border: none;
  background: none;
  color: var(--rf-mu);
  font-size: 12.5px;
  cursor: pointer;
}
.rf-fb-skip:hover { color: var(--rf-ink); text-decoration: underline; }

.rf-fb-thanks { padding: 34px 10px; text-align: center; }
.rf-fb-thanks svg {
  width: 44px; height: 44px;
  margin: 0 auto 14px;
  color: var(--rf-green);
}
.rf-fb-thanks h3 {
  color: var(--rf-ink);
  font-family: var(--rf-font-ui);
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 5px;
}
.rf-fb-thanks p { color: var(--rf-mu); font-size: 13px; }

/* Nel pannello Info alcuni colori portano significato — sono le
   modalita' di gioco, riconoscibili dal colore in tutta l'app.
   Quelli restano; .rf-doc spegne solo i colori decorativi. */
.rf-doc .info-mode-card-title,
.rf-doc .info-mode-card-title span,
.rf-doc .rf-keep,
.rf-doc .rf-keep span { color: inherit !important; }

.rf-doc .info-mode-cyan   .info-mode-card-title { color: var(--rf-cyan) !important; }
.rf-doc .info-mode-amber  .info-mode-card-title { color: var(--rf-gold) !important; }
.rf-doc .info-mode-green  .info-mode-card-title { color: var(--rf-green) !important; }
.rf-doc .info-mode-purple .info-mode-card-title { color: var(--rf-purple) !important; }

/* Nel pannello Info i titoli di sezione restano leggibili come
   testo corrente, non come etichette tutte maiuscole */
.rf-doc .info-mode-card-title {
  font-size: 13px !important;
  letter-spacing: 0.02em;
  text-transform: none;
}

/* Le icone dei tab Info sono ora tracciati, non emoji: prendono
   il colore del tab e si spengono con lui */
.info-tab .info-tab-icon {
  width: 17px;
  height: 17px;
  display: block;
  margin: 0 auto 3px;
}

/* =====================================================
   Invito a registrarsi (tasti col lucchetto, fine partita)
   ===================================================== */
.rf-gs-head { text-align: center; margin-bottom: 16px; }

.rf-gs-mascot {
  width: 74px;
  height: auto;
  margin: 0 auto 6px;
  display: block;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.45));
}

.rf-gs-head h3 {
  color: var(--rf-ink);
  font-family: var(--rf-font-ui);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 4px;
}

.rf-gs-head p {
  color: var(--rf-mu);
  font-size: 12.5px;
  line-height: 1.5;
}

.rf-gs-score {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  margin-bottom: 16px;
  border: 1px solid var(--rf-line);
  border-radius: 10px;
  background: var(--rf-bg);
}
.rf-gs-score span { color: var(--rf-mu); font-size: 12px; }
.rf-gs-score strong {
  color: var(--rf-gold);
  font-family: var(--rf-font-ui);
  font-variant-numeric: tabular-nums;
  font-size: 20px;
  font-weight: 700;
}

/* =====================================================
   Tab Supporta
   La promessa "resta gratuito" non e' una frase di cortesia:
   e' anche il vincolo di licenza dei dataset non commerciali,
   quindi sta in evidenza e non fra le righe piccole.
   ===================================================== */
.rf-sup { max-width: 460px; margin: 0 auto; text-align: center; }

.rf-sup-mascot {
  width: 92px;
  height: auto;
  margin: 0 auto 6px;
  display: block;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.45));
}

.rf-doc.rf-doc .rf-sup-title {
  color: var(--rf-ink) !important;
  font-size: 18px !important;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
  margin-bottom: 7px;
}

.rf-sup-lead {
  color: var(--rf-mu);
  font-size: 13.5px;
  line-height: 1.55;
  margin-bottom: 14px;
}

.rf-doc.rf-doc .rf-sup-list {
  list-style: none;
  margin: 0 0 15px;
  padding: 12px 14px;
  border: 1px solid var(--rf-line);
  border-radius: 12px;
  background: var(--rf-flat);
  text-align: left;
}

.rf-doc.rf-doc .rf-sup-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-left: 0;
  margin-bottom: 7px;
}
.rf-doc.rf-doc .rf-sup-list li::before { content: none; }
.rf-doc.rf-doc .rf-sup-list li:last-child { margin-bottom: 0; }

.rf-sup-list svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--rf-green);
}

.rf-doc.rf-doc .rf-sup-list span { color: var(--rf-mu) !important; font-size: 13px; }

.rf-doc.rf-doc .rf-sup-cta, .rf-sup-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: 48px;
  border-radius: 12px;
  background: var(--rf-gold);
  color: #1C1405 !important;
  font-family: var(--rf-font-ui);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none !important;
  transition: background 0.16s ease, transform 0.16s ease;
}
.rf-sup-cta svg { width: 19px; height: 19px; }
.rf-sup-cta:hover { background: #EDC257; transform: translateY(-1px); }
.rf-sup-cta:focus-visible { outline: 2px solid var(--rf-gold); outline-offset: 3px; }

.rf-sup-note {
  color: var(--rf-mu);
  font-size: 11.5px;
  line-height: 1.55;
  margin-top: 11px;
}

/* Un volto, non la mascotte della sfida 1v1: qui si parla
   dell'account, non di sfidare qualcuno */
.rf-gs-avatar {
  width: 62px;
  height: 62px;
  margin: 0 auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rf-line);
  border-radius: 50%;
  background: var(--rf-flat);
  color: var(--rf-cyan);
}
.rf-gs-avatar svg { width: 30px; height: 30px; }

/* Il modale dell'account deve stare in una schermata senza
   scorrere: e' la prima cosa che vede un ospite, e uno scroll
   li' fa sembrare la registrazione piu' lunga di quanto sia. */
.rf-gs-panel {
  max-height: 94vh;
  overflow-y: auto;
}

.rf-gs-panel .rf-field { margin-bottom: 11px; }
.rf-gs-panel .rf-check { margin-bottom: 13px; }
.rf-gs-panel .rf-tabs { margin-bottom: 12px; padding-bottom: 7px; }
.rf-gs-panel .rf-gs-head { margin-bottom: 13px; }
.rf-gs-panel .rf-gs-avatar { width: 52px; height: 52px; margin-bottom: 8px; }
.rf-gs-panel .rf-gs-avatar svg { width: 25px; height: 25px; }
.rf-gs-panel .rf-gs-head h3 { font-size: 17px; }

/* Su schermi bassi si stringe ancora, invece di scorrere */
@media (max-height: 620px) {
  .rf-gs-panel .rf-gs-avatar { display: none; }
  .rf-gs-panel .rf-input { height: 40px; }
  .rf-gs-panel .rf-field { margin-bottom: 9px; }
}

/* Introduzione del pannello Info: due paragrafi, niente fronzoli */
.rf-doc.rf-doc .rf-info-intro { margin-bottom: 20px; }
.rf-doc.rf-doc .rf-info-intro h4 {
  font-size: 15px !important;
  letter-spacing: -0.01em;
  text-transform: none;
  margin-bottom: 9px;
}
.rf-doc.rf-doc .rf-info-intro p { margin-bottom: 10px; }
.rf-doc.rf-doc .rf-info-intro p:last-child { margin-bottom: 0; }

/* Il tab Tornei mancava fra i colori disponibili */
.info-tab-red { --tab-color: 236, 124, 111; }

/* Elenco a voci: titolo e spiegazione, con l'icona a fare da
   ancora visiva. Usato nel pannello Info. */
.rf-doc.rf-doc .rf-info-h {
  font-size: 12px !important;
  margin: 22px 0 10px;
}

.rf-doc.rf-doc .rf-info-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rf-doc.rf-doc .rf-info-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  margin: 0;
  border-top: 1px solid var(--rf-line);
}
.rf-doc.rf-doc .rf-info-list li::before { content: none; }
.rf-doc.rf-doc .rf-info-list li:first-child { border-top: none; padding-top: 0; }

.rf-info-list > li > svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--rf-cyan);
}

.rf-doc.rf-doc .rf-info-list strong {
  display: block;
  color: var(--rf-ink) !important;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 2px;
}

.rf-doc.rf-doc .rf-info-list span {
  display: block;
  color: var(--rf-mu) !important;
  font-size: 12.5px;
  line-height: 1.55;
}

.rf-doc.rf-doc .rf-info-foot {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--rf-line);
  font-size: 12.5px;
}

/* =====================================================
   Schede modalita' nel pannello Info: dati in chiaro
   ===================================================== */
.rf-doc.rf-doc .rf-mode-desc {
  font-size: 12.5px;
  line-height: 1.6;
  margin-bottom: 11px;
}

.rf-mode-rows {
  border: 1px solid var(--rf-line);
  border-radius: 9px;
  overflow: hidden;
  margin-bottom: 11px;
}

.rf-mode-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 11px;
  border-top: 1px solid var(--rf-line);
}
.rf-mode-row:first-child { border-top: none; }

.rf-doc.rf-doc .rf-mode-row span { color: var(--rf-mu) !important; font-size: 12px; }
.rf-doc.rf-doc .rf-mode-row strong {
  color: var(--rf-ink) !important;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

.rf-doc.rf-doc .rf-mode-tip {
  padding: 9px 11px;
  border-left: 2px solid var(--rf-cyan);
  background: var(--rf-flat);
  border-radius: 0 8px 8px 0;
  font-size: 12px;
  line-height: 1.55;
  margin-bottom: 12px;
}

/* =====================================================
   Fotoni in palio nelle sfide
   ===================================================== */
.rf-fot-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}

.rf-fot {
  padding: 11px 9px;
  border: 1px solid var(--rf-line);
  border-radius: 10px;
  background: var(--rf-flat);
  text-align: center;
}

.rf-doc.rf-doc .rf-fot span {
  display: block;
  color: var(--rf-mu) !important;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 3px;
}

.rf-doc.rf-doc .rf-fot strong {
  display: block;
  font-size: 19px;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

.rf-doc.rf-doc .rf-fot small {
  display: block;
  color: var(--rf-mu) !important;
  font-size: 10px;
  line-height: 1.4;
  margin-top: 3px;
}

.rf-doc.rf-doc .rf-fot-win strong  { color: var(--rf-green) !important; }
.rf-doc.rf-doc .rf-fot-draw strong { color: var(--rf-gold) !important; }
.rf-doc.rf-doc .rf-fot-loss strong { color: var(--rf-red) !important; }

@media (max-width: 420px) {
  .rf-fot-grid { grid-template-columns: 1fr; }
  .rf-fot { display: flex; align-items: baseline; gap: 9px; text-align: left; }
  .rf-doc.rf-doc .rf-fot span { margin-bottom: 0; }
  .rf-doc.rf-doc .rf-fot small { margin-top: 0; margin-left: auto; }
}

/* =====================================================
   Supporta su schermo largo: mascotte a sinistra, testo a destra
   ===================================================== */
@media (min-width: 700px) {
  .rf-sup {
    max-width: 640px;
    display: grid;
    grid-template-columns: 215px 1fr;
    align-items: center;
    gap: 26px;
    text-align: left;
  }
  .rf-sup-mascot { width: 100%; max-width: 215px; margin: 0; }
  .rf-doc.rf-doc .rf-sup-title { font-size: 20px !important; }
  .rf-sup-cta, .rf-doc.rf-doc .rf-sup-cta { width: auto; padding: 0 22px; }
}

/* L'inciso scherzoso resta leggibile ma non compete con la frase */
.rf-doc.rf-doc .rf-sup-aside { color: var(--rf-mu) !important; opacity: 0.78; }
.rf-sup-lead + .rf-sup-lead { margin-top: -6px; }

/* =====================================================
   Selettore di lingua nella barra in alto
   Due bandiere disegnate, non emoji: su Windows le emoji
   bandiera non esistono e vengono rese come le due lettere
   del paese, che e' peggio di non metterle.
   ===================================================== */
.rf-lang {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--rf-line);
  border-radius: 9px;
  background: var(--rf-flat);
}

.rf-lang button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 22px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.rf-lang button svg {
  width: 20px;
  height: 14px;
  display: block;
  border-radius: 2px;
}

.rf-lang button:hover { opacity: 0.8; }

.rf-lang .rf-lang-on {
  opacity: 1;
  background: var(--rf-card);
  border-color: var(--rf-cyan);
}

.rf-lang button:focus-visible {
  outline: 2px solid var(--rf-cyan);
  outline-offset: 2px;
}

@media (max-width: 480px) {
  .rf-lang button { width: 26px; height: 20px; }
  .rf-lang button svg { width: 17px; height: 12px; }
}

  }

/* =====================================================
   Ospite che lascia la schermata finale
   Il punteggio in grande: e' quello che sta per perdere, e
   dirlo con un numero funziona meglio di una frase.
   ===================================================== */
.rf-exit-panel { text-align: center; }

.rf-exit-head { margin-bottom: 14px; }

.rf-exit-score {
  color: var(--rf-gold);
  font-family: var(--rf-font-ui);
  font-variant-numeric: tabular-nums;
  font-size: 42px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}

.rf-exit-unit {
  color: var(--rf-mu);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 4px;
}

.rf-exit-text {
  color: var(--rf-mu);
  font-size: 13px;
  line-height: 1.55;
  margin-bottom: 18px;
}

.rf-exit-save {
  width: 100%;
  min-height: 44px;
  border: none;
  border-radius: 10px;
  background: var(--rf-gold);
  color: #1C1405;
  font-family: var(--rf-font-ui);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.16s ease;
}
.rf-exit-save:hover { background: #EDC257; }
.rf-exit-save:focus-visible { outline: 2px solid var(--rf-gold); outline-offset: 3px; }

.rf-exit-skip {
  width: 100%;
  margin-top: 10px;
  padding: 8px;
  border: none;
  background: none;
  color: var(--rf-mu);
  font-size: 12.5px;
  cursor: pointer;
}
.rf-exit-skip:hover { color: var(--rf-ink); text-decoration: underline; }

/* Tolta l'icona a bersaglio dalla barra in alto, il nome resta l'unica
   cosa a sinistra: su schermo stretto si stringe invece di sparire. */
@media (max-width: 480px) {
  .nav-logo { font-size: 15px; letter-spacing: 0.02em; }
}

/* =====================================================
   Tutorial guidato
   Una lastra grande e una voce che spiega accanto: la lastra
   e' la cosa da guardare, il testo la accompagna e non la
   copre. Su schermo stretto passano in colonna.
   ===================================================== */
.rf-tut-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(5, 8, 14, 0.94);
  overflow-y: auto;
}

.rf-tut {
  width: 100%;
  max-width: 980px;
  border: 1px solid var(--rf-line);
  border-radius: 16px;
  background: var(--rf-card);
  overflow: hidden;
}

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

.rf-tut-steps { display: flex; gap: 6px; }

.rf-tut-dot {
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: var(--rf-line);
  transition: background 0.25s ease;
}
.rf-tut-dot.on { background: var(--rf-cyan); }

.rf-tut-skip {
  border: none;
  background: none;
  color: var(--rf-mu);
  font-size: 12.5px;
  cursor: pointer;
}
.rf-tut-skip:hover { color: var(--rf-ink); text-decoration: underline; }

.rf-tut-stage { padding: 18px; }

.rf-tut-imgwrap {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  border-radius: 10px;
  overflow: hidden;
  line-height: 0;
}
.rf-tut-imgwrap.clickable { cursor: crosshair; }

.rf-tut-img { width: 100%; height: auto; display: block; }

/* Il segno di dove ha cliccato */
.rf-tut-mark {
  position: absolute;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}

/* La lesione vera: compare solo dopo il click, mai prima */
.rf-tut-box {
  position: absolute;
  border: 2px solid var(--rf-green);
  border-radius: 3px;
  background: rgba(79, 201, 138, 0.14);
  pointer-events: none;
  animation: rf-tut-in 0.35s ease both;
}
@keyframes rf-tut-in {
  from { opacity: 0; transform: scale(1.12); }
  to   { opacity: 1; transform: scale(1); }
}

.rf-tut-say {
  padding: 0 20px 20px;
  text-align: center;
}

.rf-tut-say h3 {
  color: var(--rf-ink);
  font-family: var(--rf-font-ui);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 7px;
}

.rf-tut-say p {
  color: var(--rf-mu);
  font-size: 13.5px;
  line-height: 1.6;
  max-width: 560px;
  margin: 0 auto;
}
.rf-tut-say strong { color: var(--rf-ink); }

.rf-tut-opts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}

.rf-tut-opt {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--rf-line);
  border-radius: 9px;
  background: var(--rf-flat);
  color: var(--rf-ink);
  font-family: var(--rf-font-ui);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease;
}
.rf-tut-opt:hover { border-color: var(--rf-cyan); }
.rf-tut-opt.right { border-color: var(--rf-green); background: rgba(79, 201, 138, 0.16); color: var(--rf-green); }
.rf-tut-opt.wrong { border-color: var(--rf-red);   background: rgba(236, 124, 111, 0.16); color: var(--rf-red); }

.rf-tut-score {
  max-width: 300px;
  margin: 16px auto 0;
  border: 1px solid var(--rf-line);
  border-radius: 10px;
  overflow: hidden;
}
.rf-tut-score > div {
  display: flex;
  justify-content: space-between;
  padding: 7px 12px;
  border-top: 1px solid var(--rf-line);
  font-size: 12.5px;
}
.rf-tut-score > div:first-child { border-top: none; }
.rf-tut-score span { color: var(--rf-mu); }
.rf-tut-score strong { color: var(--rf-ink); font-variant-numeric: tabular-nums; }
.rf-tut-score-tot { background: var(--rf-flat); }
.rf-tut-score-tot strong { color: var(--rf-gold); font-size: 15px; }

.rf-tut-go {
  min-height: 44px;
  padding: 0 26px;
  margin-top: 18px;
  border: none;
  border-radius: 10px;
  background: var(--rf-cyan);
  color: #06131A;
  font-family: var(--rf-font-ui);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}
.rf-tut-go:hover { background: #6ACAE4; }

@media (min-width: 800px) {
  .rf-tut-stage { display: flex; justify-content: center; }
  .rf-tut-imgwrap { max-width: 380px; }
}

/* =====================================================
   AVVISI
   Striscia in home, campanella in alto, pannello con l'elenco.
   I colori vengono dagli accenti gia' in uso: il tipo di avviso
   e' l'unica cosa che cambia, e si legge dal colore prima che
   dall'etichetta.
   ===================================================== */

.rf-ann-strip {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  margin-bottom: 14px;
  background: var(--rf-card);
  border: 1px solid var(--rf-line);
  border-left: 3px solid var(--ann-tint, var(--rf-cyan));
  border-radius: var(--rf-r-btn);
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease;
}
.rf-ann-strip:hover { background: var(--rf-flat); }
.rf-ann-strip:focus-visible { outline: 2px solid var(--ann-tint, var(--rf-cyan)); outline-offset: 2px; }

.rf-ann-strip-ico {
  flex: none;
  width: 20px; height: 20px;
  margin-top: 1px;
  color: var(--ann-tint, var(--rf-cyan));
}
.rf-ann-strip-body { flex: 1; min-width: 0; }
.rf-ann-strip-title {
  font-family: var(--rf-font-display);
  font-weight: 700;
  font-size: 0.86rem;
  color: var(--rf-ink);
  line-height: 1.3;
  margin-bottom: 2px;
}
.rf-ann-strip-sub {
  font-size: 0.76rem;
  color: var(--rf-mu);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rf-ann-strip-more { flex: none; width: 16px; height: 16px; color: var(--rf-mu); margin-top: 3px; }

/* tinte per tipo */
.rf-ann-info   { --ann-tint: var(--rf-cyan); }
.rf-ann-novita { --ann-tint: var(--rf-green); }
.rf-ann-evento { --ann-tint: var(--rf-gold); }
.rf-ann-avviso { --ann-tint: var(--rf-red); }

/* campanella */
.rf-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 12px;
  border: 1px solid var(--rf-line);
  background: transparent;
  color: var(--rf-mu);
  cursor: pointer;
  transition: color .16s ease, border-color .16s ease, background .16s ease;
}
.rf-bell:hover { color: var(--rf-ink); border-color: var(--rf-mu); }
.rf-bell:focus-visible { outline: 2px solid var(--rf-cyan); outline-offset: 2px; }
.rf-bell svg { width: 20px; height: 20px; }

/* Con qualcosa da leggere la campanella si accende: senza, un pallino da solo
   su un'icona spenta si perde in una barra gia' piena di cose. */
.rf-bell-on {
  color: var(--rf-cyan);
  border-color: color-mix(in srgb, var(--rf-cyan) 45%, transparent);
  background: color-mix(in srgb, var(--rf-cyan) 12%, transparent);
}
.rf-bell-on:hover { color: var(--rf-cyan); }

.rf-bell-dot {
  position: absolute;
  top: -5px; right: -5px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--rf-red);
  color: #2A0F0C;
  font-size: 11px;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
  border: 2px solid var(--rf-bg);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--rf-red) 55%, transparent);
}

/* Sul telefono la barra in alto e' campanella + lingue + livello + Fotoni +
   avatar + uscita su una riga sola. Il blocco del livello e' il piu' largo e
   non e' il piu' importante: la barra XP a 80px (`w-20`, in `topbar.php`)
   schiacciava la campanella contro il bordo sinistro. Qui si stringe e cede
   lo spazio alla campanella, che deve farsi notare.
   `w-20` arriva da Tailwind Play, iniettato a runtime: per batterlo non basta
   una regola di pari specificita', serve tag + due classi. */
@media (max-width: 640px) {
  nav.navbar-esports div.xp-progress-container.xp-progress-mini {
    width: 40px;
    height: 4px;
  }
  /* "Lv.12" resta leggibile ma smette di occupare una colonna intera */
  nav.navbar-esports .neon-text-cyan { font-size: 10px; line-height: 1.2; }
  /* meno aria dentro il tasto profilo e dentro il gettone Fotoni */
  nav.navbar-esports .btn.gap-2 { gap: .35rem; padding-left: .4rem; }
  nav.navbar-esports .bg-amber-500\/20 { padding-left: .4rem; padding-right: .4rem; }
  /* quello che il livello lascia lo prende la campanella */
  nav.navbar-esports .rf-bell { width: 42px; height: 42px; }
  nav.navbar-esports .rf-bell svg { width: 22px; height: 22px; }
}

/* Avviso del pinch: sotto la lastra e dentro la schermata di avvio.
   Deve leggersi sopra una radiografia, che e' chiara al centro e nera ai
   bordi: da qui lo sfondo scuro pieno invece di una semplice scritta. */
.rf-pinch-hint,
.rf-splash-pinch {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--rf-mu);
}
.rf-pinch-hint svg,
.rf-splash-pinch svg { width: 15px; height: 15px; flex: none; }

/* La riga sta SOTTO il riquadro dell'immagine, non sopra la lastra: li'
   copriva proprio cio' che si deve guardare, e la lesione puo' capitare
   dietro la scritta. Fuori dal nero non serve piu' uno sfondo pieno per
   staccarsi, quindi resta solo la scritta. */
.rf-pinch-line {
  padding: 6px 12px 2px;
  text-align: center;
}

/* Nella schermata di avvio lo sfondo c'e' gia': qui basta la riga. */
.rf-splash-pinch {
  justify-content: center;
  width: 100%;
  color: var(--rf-cyan);
}

/* Riquadro degli aiuti nella schermata di avvio. Volutamente sommesso: e'
   un promemoria, non un capitolo. La spiegazione sta nel tutorial. */
.rf-splash-tools {
  padding: 7px 10px;
  background: var(--rf-flat);
  border: 1px solid var(--rf-line);
  border-radius: var(--rf-r-btn);
}
.rf-splash-tools-t {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--rf-mu);
  text-align: center;
  margin-bottom: 5px;
}

/* I bonus sono la prima riga della stessa cornice, separati da un filo. */
.rf-splash-tools .rf-splash-bonus {
  padding-bottom: 6px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--rf-line);
}
.rf-splash-tools-r {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 14px;
}
.rf-splash-tools-r > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--rf-ink);
  white-space: nowrap;
}
.rf-splash-tools-r svg {
  width: 14px; height: 14px; flex: none;
  color: var(--rf-cyan);
}
/* Il pinch sta dentro lo stesso riquadro, separato da un filo. */
.rf-splash-tools .rf-splash-pinch {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--rf-line);
}

/* pannello */
.rf-ann-list { display: flex; flex-direction: column; gap: 10px; }

.rf-ann-item {
  padding: 14px 16px;
  background: var(--rf-flat);
  border: 1px solid var(--rf-line);
  border-left: 3px solid var(--ann-tint, var(--rf-cyan));
  border-radius: var(--rf-r-btn);
}
.rf-ann-head {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin-bottom: 7px;
}
.rf-ann-kind {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--ann-tint) 18%, transparent);
  color: var(--ann-tint);
  border: 1px solid color-mix(in srgb, var(--ann-tint) 45%, transparent);
}
.rf-ann-date { font-size: 0.68rem; color: var(--rf-mu); margin-left: auto; }
.rf-ann-new {
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--rf-red);
}
.rf-ann-item h4 {
  font-family: var(--rf-font-display);
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--rf-ink);
  margin: 0 0 5px;
  line-height: 1.3;
}
.rf-ann-body {
  font-size: 0.84rem;
  color: var(--rf-mu);
  line-height: 1.6;
}
.rf-ann-body strong { color: var(--rf-ink); font-weight: 600; }
.rf-ann-body em { font-style: italic; }

.rf-ann-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 11px;
  padding: 7px 13px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--ann-tint) 45%, transparent);
  background: color-mix(in srgb, var(--ann-tint) 14%, transparent);
  color: var(--ann-tint);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}
.rf-ann-cta:hover { background: color-mix(in srgb, var(--ann-tint) 24%, transparent); }
.rf-ann-cta svg { width: 14px; height: 14px; }

.rf-ann-empty {
  text-align: center;
  padding: 34px 16px;
  color: var(--rf-mu);
  font-size: 0.86rem;
}

/* =====================================================
   SCRIVI ALLO SVILUPPATORE
   ===================================================== */

.rf-mail-head { text-align: center; margin-bottom: 18px; }
.rf-mail-ico {
  width: 52px; height: 52px;
  margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 16px;
  background: color-mix(in srgb, var(--rf-cyan) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--rf-cyan) 38%, transparent);
  color: var(--rf-cyan);
}
.rf-mail-ico svg { width: 26px; height: 26px; }
.rf-mail-head h3 {
  font-family: var(--rf-font-display);
  font-weight: 800;
  font-size: 1.12rem;
  color: var(--rf-ink);
  margin: 0 0 5px;
}
.rf-mail-head p {
  font-size: 0.82rem;
  color: var(--rf-mu);
  margin: 0;
  line-height: 1.5;
}

.rf-mail-note {
  font-size: 0.74rem;
  color: var(--rf-mu);
  line-height: 1.5;
  margin: 0 0 14px;
  padding-left: 10px;
  border-left: 2px solid var(--rf-line);
}
.rf-mail-anon {
  font-size: 0.74rem;
  color: var(--rf-mu);
  text-align: center;
  margin: 14px 0 0;
}
.rf-mail-anon strong { color: var(--rf-cyan); font-weight: 600; }

/* textarea: eredita .rf-input ma le serve altezza propria */
textarea.rf-input {
  min-height: 108px;
  resize: vertical;
  line-height: 1.55;
  padding-top: 10px;
}

/* =====================================================
   LENTE D'INGRANDIMENTO
   Segue il puntatore sulla lastra. La lastra non si muove:
   e' la lente a spostarsi, quindi il click cade sempre dove
   il dito lo mette e non serve correggere nessuna coordinata.
   ===================================================== */

.rf-lente {
  position: absolute;
  width: 168px;
  height: 168px;
  margin-left: -84px;          /* centrata sul puntatore */
  margin-top: -84px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(79, 184, 212, 0.85);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.6),
    0 10px 30px -8px rgba(0, 0, 0, 0.9),
    inset 0 0 22px rgba(0, 0, 0, 0.45);
  /* Obbligatorio: senza, il cerchio si prende il click al posto della lastra. */
  pointer-events: none;
  z-index: 12;
}

/* L'immagine ingrandita sta qui dentro, cosi' il filtro di inversione
   non tocca ne' il bordo ne' il mirino. */
.rf-lente-img {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-color: #000;
}

/* Mirino: senza un riferimento al centro non si sa che cosa si sta per
   toccare, perche' l'ingrandimento sposta tutto il resto. */
.rf-lente-mirino {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  border: 1px solid rgba(79, 184, 212, 0.9);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55);
}
.rf-lente-mirino::before,
.rf-lente-mirino::after {
  content: '';
  position: absolute;
  background: rgba(79, 184, 212, 0.9);
}
.rf-lente-mirino::before { left: 50%; top: -7px;  width: 1px; height: 6px; margin-left: -0.5px; }
.rf-lente-mirino::after  { top: 50%;  left: -7px; height: 1px; width: 6px; margin-top: -0.5px; }

@media (max-width: 640px) {
  .rf-lente { width: 132px; height: 132px; margin-left: -66px; margin-top: -66px; }
}

/* =====================================================
   DOMANDE FREQUENTI
   In fondo al tab Gioco del pannello Info. Una risposta
   aperta per volta: tutte aperte sono un muro di testo e
   la domanda che interessa non si trova piu'.
   ===================================================== */

.rf-faq { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--rf-line); }

.rf-faq-sub {
  font-size: 0.8rem;
  color: var(--rf-mu);
  margin: -6px 0 14px;
}

.rf-faq-item {
  border: 1px solid var(--rf-line);
  border-radius: 12px;
  background: var(--rf-flat);
  margin-bottom: 8px;
  overflow: hidden;
  transition: border-color .16s ease;
}
.rf-faq-item.rf-faq-open { border-color: color-mix(in srgb, var(--rf-cyan) 42%, transparent); }

.rf-faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  padding: 13px 15px;
  background: transparent;
  border: 0;
  color: var(--rf-ink);
  font-family: var(--rf-font-display);
  font-weight: 600;
  font-size: 0.88rem;
  line-height: 1.4;
  cursor: pointer;
}
.rf-faq-q:hover { color: var(--rf-cyan); }
.rf-faq-q:focus-visible { outline: 2px solid var(--rf-cyan); outline-offset: -2px; }
.rf-faq-q span { flex: 1; }
.rf-faq-q svg {
  flex: none;
  width: 17px; height: 17px;
  color: var(--rf-mu);
  transition: transform .18s ease, color .18s ease;
}
.rf-faq-open .rf-faq-q svg { transform: rotate(180deg); color: var(--rf-cyan); }

.rf-faq-a {
  padding: 0 15px 14px;
  font-size: 0.84rem;
  line-height: 1.62;
  color: var(--rf-mu);
}
.rf-faq-a strong { color: var(--rf-ink); font-weight: 600; }
.rf-faq-a em { font-style: italic; }

/* Segnalino sul punto toccato, quando la lente e' scostata dal dito.
   Sul telefono il pollice copre proprio l'area da guardare: il cerchio si
   sposta sopra il dito e questo anello resta a dire dove cadra' il colpo. */
.rf-lente-punto {
  position: absolute;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  border: 2px solid rgba(79, 184, 212, 0.9);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 12px rgba(79, 184, 212, 0.45);
  pointer-events: none;
  z-index: 11;
}
.rf-lente-punto::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 3px; height: 3px;
  margin: -1.5px 0 0 -1.5px;
  border-radius: 50%;
  background: rgba(79, 184, 212, 0.95);
}

/* Sul telefono la lente ora sta sopra il dito, quindi puo' essere piu' grande:
   prima era stretta perche' doveva starci sotto senza invadere lo schermo. */
@media (max-width: 640px) {
  .rf-lente { width: 152px; height: 152px; margin-left: -76px; margin-top: -76px; }
}

/* =====================================================
   CT ANATOMY
   ===================================================== */

/* Il prompt: e' la domanda, deve leggersi in un colpo d'occhio mentre il
   cronometro corre. Grande, centrato, e si spegne appena si risponde. */
.rf-anat-prompt {
  padding: 10px 16px 12px;
  text-align: center;
  transition: opacity .2s ease;
}
.rf-anat-prompt.is-risposto { opacity: .35; }
.rf-anat-prompt-occhiello {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rf-mu);
  margin-bottom: 3px;
}
.rf-anat-prompt-nome {
  display: block;
  font-family: var(--rf-font-display);
  font-weight: 800;
  font-size: clamp(1.3rem, 5.5vw, 1.9rem);
  letter-spacing: -.02em;
  color: var(--rf-ink);
  line-height: 1.1;
  text-wrap: balance;
}

/* Barra del tempo sotto l'HUD. */
.rf-anat-barra {
  height: 4px;
  margin-top: 7px;
  background: var(--rf-flat);
  border-radius: 999px;
  overflow: hidden;
}
.rf-anat-barra-riempi {
  height: 100%;
  background: var(--rf-cyan);
  border-radius: 999px;
  transition: width .12s linear, background .25s ease;
}
.rf-anat-barra-riempi.is-bassa { background: var(--rf-red); }

@keyframes rf-anat-battito { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
.rf-anat-urgente { animation: rf-anat-battito .9s ease-in-out infinite; }

/* Il segno del tocco. */
.rf-anat-segno {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 3px solid var(--rf-ink);
  box-shadow: 0 0 0 2px rgba(0,0,0,.55);
}
.rf-anat-segno.is-preso   { border-color: var(--rf-green); }
.rf-anat-segno.is-mancato { border-color: var(--rf-red); }

/* Il contorno vero, mostrato solo dopo la risposta. */
.rf-anat-vero {
  fill: rgba(255,255,255,.10);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.rf-anat-vero.is-preso   { stroke: var(--rf-green); fill: color-mix(in srgb, var(--rf-green) 18%, transparent); }
.rf-anat-vero.is-mancato { stroke: var(--rf-gold);  fill: color-mix(in srgb, var(--rf-gold) 14%, transparent); }

/* La riga di esito. */
.rf-anat-esito {
  padding: 9px 14px;
  border-top: 1px solid var(--rf-line);
  background: var(--rf-card);
}
.rf-anat-esito-riga {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.rf-anat-esito-msg { font-size: .92rem; font-weight: 600; color: var(--rf-ink); }
.rf-anat-esito.is-preso   .rf-anat-esito-msg { color: var(--rf-green); }
.rf-anat-esito.is-mancato .rf-anat-esito-msg { color: var(--rf-gold); }
.rf-anat-esito-punti {
  font-family: var(--rf-font-display);
  font-weight: 800;
  color: var(--rf-gold);
  font-variant-numeric: tabular-nums;
}
.rf-anat-esito-tempo {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-weight: 600;
  font-size: .9rem;
  font-variant-numeric: tabular-nums;
}
.rf-anat-esito-tempo.is-piu  { color: var(--rf-green); }
.rf-anat-esito-tempo.is-meno { color: var(--rf-red); }

/* Fine partita. */
.rf-anat-fine {
  background: var(--rf-card);
  border: 1px solid var(--rf-line);
  border-radius: var(--rf-r-card);
  padding: 26px 24px 18px;
  text-align: center;
  max-width: 340px;
  width: 100%;
  box-shadow: 0 24px 60px rgba(0,0,0,.6);
}
.rf-anat-fine-occhiello {
  font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--rf-mu); margin-bottom: 10px;
}
.rf-anat-fine-punti {
  font-family: var(--rf-font-display);
  font-weight: 800; font-size: 3.2rem; line-height: 1;
  color: var(--rf-gold); font-variant-numeric: tabular-nums;
}
.rf-anat-fine-etichetta {
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--rf-mu); margin-top: 4px;
}

/* La scheda di prova di CT Anatomy dentro il pannello Tornei. Volutamente
   diversa dalle schede dei tornei veri: non e' un torneo, e' un assaggio. */
.rf-anat-invito {
  background: var(--rf-flat);
  border: 1px dashed color-mix(in srgb, var(--rf-cyan) 45%, var(--rf-line));
  border-radius: var(--rf-r-card);
  padding: 14px 16px;
  margin-bottom: 16px;
}
.rf-anat-invito-testa { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; flex-wrap: wrap; }
.rf-anat-invito-tag {
  font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--rf-cyan); border: 1px solid currentColor; border-radius: 999px; padding: 2px 7px;
}
.rf-anat-invito-nome {
  font-family: var(--rf-font-display); font-weight: 800; letter-spacing: -.01em;
  color: var(--rf-ink); font-size: 1.02rem;
}
.rf-anat-invito-desc { font-size: .84rem; color: var(--rf-mu); margin: 0 0 11px; line-height: 1.4; }

/* Il contorno giusto, rivelato dopo la risposta, deve farsi notare in un
   secondo scarso senza diventare fastidioso: due battiti e basta. */
@keyframes rf-anat-rivela {
  0%   { opacity: 0; stroke-width: 5; }
  25%  { opacity: 1; stroke-width: 3; }
  60%  { opacity: .75; stroke-width: 2; }
  100% { opacity: 1; stroke-width: 2.5; }
}
.rf-anat-vero { animation: rf-anat-rivela .75s ease-out both; }
@media (prefers-reduced-motion: reduce) {
  .rf-anat-vero { animation: none; opacity: 1; }
}

/* =====================================================
   La quinta scheda: CT Anatomy, larga
   =====================================================
   La griglia delle modalita' e' fatta per quattro. Un quinto riquadro a tre
   colonne rimpicciolisce le mascotte proprio sul telefono, dove sono il
   richiamo; una scheda larga invece dice da sola che quella voce e' diversa
   dalle altre — e le serve piu' testo, perche' deve spiegare che si gioca
   altrove. */
.game-mode-wide {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  padding: 12px 14px;
  background: var(--rf-flat);
  border: 1px solid var(--rf-line);
  border-radius: var(--rf-r-card);
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}
/* Da iscritta ha comunque il bordo acceso: e' l'unica scheda nuova, e in un
   menu di cinque riquadri tutti uguali non la guarderebbe nessuno. */
.game-mode-wide { border-color: color-mix(in srgb, var(--rf-purple) 42%, var(--rf-line)); }
.game-mode-wide:hover { border-color: color-mix(in srgb, var(--rf-purple) 75%, var(--rf-line)); }
.game-mode-wide:focus-visible { outline: 2px solid var(--rf-purple); outline-offset: 2px; }

.game-mode-wide-mascot {
  position: relative;
  width: 84px; height: 84px; flex: none;
  display: flex; align-items: center; justify-content: center;
}
@media (min-width: 640px) { .game-mode-wide-mascot { width: 104px; height: 104px; } }
/* Il segno sotto la mascotte: si vede solo finche' il file manca, perche'
   l'immagine gli sta sopra. Meglio di un'icona rotta. */
.game-mode-wide-segno {
  position: absolute; inset: 22%;
  color: color-mix(in srgb, var(--rf-purple) 60%, transparent);
  z-index: -1;
}
.game-mode-wide-testo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.game-mode-wide-testa { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.game-mode-wide-invito {
  font-size: .78rem; font-weight: 600; color: var(--rf-purple); margin-top: 3px;
}

/* Lo stato "prossimamente": smorzato, ma non spento — la mascotte si deve
   comunque vedere, e' meta' del richiamo. */
.rf-soon .game-mode-wide-mascot img { filter: grayscale(.7); opacity: .85; }
.rf-soon .game-mode-label { opacity: .9; }

/* Da ospite, come la sfida. Le regole del lucchetto erano scritte su
   `.game-mode-card`, e CT Anatomy e' `.game-mode-wide`: non la prendevano,
   quindi restava accesa e cliccabile come se fosse disponibile. */
.game-mode-wide.rf-locked {
  background: transparent;
  border-style: dashed;
  /* Tratteggiata come la sfida, ma viola invece che grigia: e' chiusa, non
     spenta. La modalita' e' nuova e la scheda deve farsi notare anche da
     ospite — e' proprio l'ospite che va convinto a iscriversi. */
  border-color: color-mix(in srgb, var(--rf-purple) 55%, var(--rf-line));
}
.game-mode-wide.rf-locked .game-mode-wide-mascot img { filter: grayscale(1); opacity: .4; }
.game-mode-wide.rf-locked .game-mode-label,
.game-mode-wide.rf-locked .game-mode-wide-invito { color: var(--rf-mu); }
.game-mode-wide.rf-locked .game-mode-wide-segno { color: var(--rf-line); }

/* Quando ci si arriva dalla scheda del menu, quella nei Tornei fa un cenno. */
@keyframes rf-anat-cenno {
  0%, 100% { border-color: color-mix(in srgb, var(--rf-cyan) 45%, var(--rf-line)); }
  50%      { border-color: var(--rf-cyan); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rf-cyan) 22%, transparent); }
}
.rf-anat-invito.is-evidenza { animation: rf-anat-cenno .7s ease-in-out 3; }
@media (prefers-reduced-motion: reduce) { .rf-anat-invito.is-evidenza { animation: none; } }

/* Le schede delle modalita' erano 229x304: un rettangolo in piedi che sul
   telefono diventa ancora piu' allungato, e con cinque voci la schermata non
   entrava piu' in una pagina. Mascotte piu' basse (nel markup) e qui meno
   aria intorno: la scheda si avvicina al quadrato e ci sta tutto. */
.game-mode-card {
  padding: .55rem .6rem .7rem;
  gap: 1px;
}
.game-mode-card .game-mode-label { font-size: .82rem; letter-spacing: .09em; }
.game-mode-card .game-mode-sub   { font-size: .66rem; line-height: 1.25; }
@media (min-width: 640px) {
  .game-mode-card { padding: .7rem .75rem .85rem; }
  .game-mode-card .game-mode-label { font-size: .88rem; }
  .game-mode-card .game-mode-sub   { font-size: .7rem; }
}
/* L'allargamento della scritta al passaggio del mouse faceva ballare la
   larghezza della scheda: con meno aria intorno si notava. */
.game-mode-card:hover .game-mode-label { letter-spacing: .11em; }

/* L'aria dentro la scheda: il contenitore della mascotte porta 8px di
   riempimento sopra e sotto piu' 8 di margine, e il sottotitolo altri 4.
   Sono 36 pixel che sulla scheda piccola del telefono fanno la differenza
   fra un quadrato e un rettangolo in piedi. */
.game-mode-card .game-mode-mascot-wrapper {
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 2px;
}
.game-mode-card .game-mode-sub { margin-top: 1px; }

/* Striscia del torneo dentro CT Anatomy. Sobria: e' un contesto, non un
   elemento di gioco, e non deve rubare l'occhio al prompt. */
.rf-anat-torneo {
  padding: 5px 14px 0;
}
.rf-anat-torneo-riga {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  flex-wrap: wrap; font-size: 11px; color: var(--rf-mu);
}
.rf-anat-torneo-riga svg { width: 13px; height: 13px; color: var(--rf-gold); flex: none; }
.rf-anat-torneo-nome { font-weight: 700; color: var(--rf-ink); }
.rf-anat-torneo-tent {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .04em;
}
.rf-anat-fine-torneo {
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--rf-line);
  font-size: .85rem; color: var(--rf-mu);
}

/* Il nastro in diagonale nell'angolo della scheda.
   Meglio di una pastiglia in riga: dice "stato di questa cosa" invece di
   sembrare un'altra etichetta fra le altre, e non ruba spazio al testo.
   Serve `overflow: hidden` sul contenitore, altrimenti sborda. */
.game-mode-wide { position: relative; overflow: hidden; }
.rf-nastro {
  position: absolute;
  top: 14px; right: -42px;
  width: 150px;
  transform: rotate(45deg);
  text-align: center;
  padding: 3px 0;
  background: color-mix(in srgb, var(--rf-purple) 88%, #000);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  box-shadow: 0 1px 6px rgba(0,0,0,.45);
  pointer-events: none;
  z-index: 2;
}
/* Sul telefono la scheda e' piu' bassa: il nastro sale un po'. */
@media (max-width: 480px) {
  .rf-nastro { top: 10px; right: -46px; width: 140px; font-size: 8.5px; }
}

/* "Come si gioca" dentro la scheda di CT Anatomy nel pannello Info.
   E' la modalita' che funziona in modo piu' diverso dalle altre, e leggerlo
   prima cambia davvero la prima partita: qui lo spazio c'e', a differenza
   della schermata di avvio. */
.rf-anat-come {
  margin: 12px 0;
  padding: 11px 13px;
  background: var(--rf-flat);
  border: 1px solid var(--rf-line);
  border-radius: var(--rf-r-btn);
}
.rf-anat-come-tit {
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--rf-purple); margin-bottom: 8px;
}
.rf-anat-come-lista {
  margin: 0; padding-left: 1.15em;
  font-size: .8rem; line-height: 1.45; color: var(--rf-mu);
}
.rf-anat-come-lista li + li { margin-top: 7px; }
.rf-anat-come-lista strong { color: var(--rf-ink); font-weight: 600; }
.rf-anat-come-lista::marker, .rf-anat-come-lista li::marker { color: var(--rf-purple); }

/* Il cerchio del suggerimento: deve dire "guarda qui dentro" senza indicare
   un punto. Solo contorno, niente riempimento pieno, e un battito che lo fa
   notare e poi lo lascia stare. */
@keyframes rf-anat-aiuto-appare {
  0%   { opacity: 0; stroke-width: 6; }
  30%  { opacity: 1; stroke-width: 3; }
  100% { opacity: .9; stroke-width: 2.5; }
}
.rf-anat-aiuto {
  fill: color-mix(in srgb, var(--rf-cyan) 8%, transparent);
  stroke: var(--rf-cyan);
  stroke-dasharray: 7 6;
  vector-effect: non-scaling-stroke;
  animation: rf-anat-aiuto-appare .5s ease-out both;
}
@media (prefers-reduced-motion: reduce) { .rf-anat-aiuto { animation: none; opacity: .9; } }


/* =====================================================
   PARERE SU UNA MODALITA' — chiesto una volta sola
   ===================================================== */
.rf-mfb-intro {
  color: var(--rf-mu); font-size: .84rem; line-height: 1.45; margin-bottom: 14px;
}
.rf-mfb-blocco { margin-bottom: 16px; }
.rf-mfb-domanda {
  display: block; color: var(--rf-ink); font-size: .86rem;
  font-weight: 600; margin-bottom: 8px; line-height: 1.35;
}
.rf-mfb-stelle { display: flex; gap: 6px; }
.rf-mfb-stella {
  color: var(--rf-line); background: none; border: none; padding: 2px;
  cursor: pointer; transition: color .12s, transform .12s;
}
.rf-mfb-stella:hover { transform: scale(1.12); }
.rf-mfb-stella.is-scelta { color: var(--rf-gold); }
.rf-mfb-stella:focus-visible { outline: 2px solid var(--rf-cyan); outline-offset: 2px; border-radius: 4px; }

.rf-mfb-testo {
  width: 100%; background: var(--rf-flat); color: var(--rf-ink);
  border: 1px solid var(--rf-line); border-radius: 10px;
  padding: 9px 11px; font-size: .86rem; line-height: 1.45; resize: vertical;
}
.rf-mfb-testo:focus { outline: none; border-color: var(--rf-cyan); }
.rf-mfb-testo::placeholder { color: var(--rf-mu); }

.rf-mfb-scelte { display: flex; gap: 8px; }
.rf-mfb-scelta {
  flex: 1; padding: 8px 10px; border-radius: 10px; cursor: pointer;
  background: var(--rf-flat); color: var(--rf-mu);
  border: 1px solid var(--rf-line); font-weight: 600; font-size: .86rem;
  transition: border-color .12s, color .12s;
}
.rf-mfb-scelta.is-scelta { border-color: var(--rf-cyan); color: var(--rf-ink); }
.rf-mfb-scelta:focus-visible { outline: 2px solid var(--rf-cyan); outline-offset: 2px; }

.rf-mfb-errore {
  color: var(--rf-red); font-size: .8rem; margin-bottom: 8px; line-height: 1.4;
}

.rf-mfb-grazie {
  color: var(--rf-green); font-weight: 600; font-size: .95rem;
  text-align: center; padding: 26px 8px; line-height: 1.4;
}

/* Fette finite: non e' una sconfitta, e il colore lo deve dire. */
/* Finire tutte le fette e' un traguardo, non uno stato: qui l'occhiello
   smette di essere un'etichetta minuscola tutta maiuscola — quella frase in
   maiuscolo spaziato diventerebbe un urlo illeggibile — e prende la forma di
   un complimento. */
.rf-anat-fine-occhiello.is-completata {
  color: var(--rf-green);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.35;
  margin-bottom: 12px;
}
.rf-anat-fine-nota {
  color: var(--rf-mu); font-size: .8rem; line-height: 1.45;
  margin: 6px 0 2px; text-align: center;
}

/* Le voci del bonus di fine partita: gia' comprese nel totale sopra. */
.rf-anat-bonus {
  margin: 10px 0 2px; padding-top: 10px;
  border-top: 1px solid var(--rf-line);
  display: flex; flex-direction: column; gap: 5px;
}
.rf-anat-bonus-riga {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; font-size: .8rem; color: var(--rf-mu);
}
.rf-anat-bonus-val { color: var(--rf-green); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Nota "anteprima" nel pannello di fine partita. */
.rf-anat-fine-anteprima {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rf-line);
  color: var(--rf-mu); font-size: .74rem; line-height: 1.5; text-align: left;
}
.rf-anat-fine-tag {
  display: inline-block; margin-right: 6px; padding: 1px 7px;
  border-radius: 999px; font-size: .66rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--rf-purple);
  border: 1px solid color-mix(in srgb, var(--rf-purple) 45%, var(--rf-line));
}

/* =====================================================
   PROFILO PUBBLICO — badge e punteggi massimi
   ===================================================== */
.rf-pp-liv { display: flex; gap: 10px; align-items: baseline; margin-top: 3px;
  font-size: .78rem; color: var(--rf-mu); }
.rf-pp-xp { color: var(--rf-cyan); font-weight: 700; font-variant-numeric: tabular-nums; }

.rf-pp-sezione {
  margin: 16px 0 8px; font-size: .7rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--rf-mu);
  padding-bottom: 6px; border-bottom: 1px solid var(--rf-line);
}
.rf-pp-punteggi, .rf-pp-badge { display: flex; flex-direction: column; gap: 6px; }
.rf-pp-riga {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  font-size: .85rem; color: var(--rf-ink);
}
.rf-pp-val { color: var(--rf-gold); font-weight: 700; font-variant-numeric: tabular-nums; }
.rf-pp-vuoto { font-size: .8rem; color: var(--rf-mu); padding: 4px 0; }

.rf-pp-badge-riga { display: flex; align-items: center; gap: 10px; }
.rf-pp-badge-icona { font-size: 1.4rem; line-height: 1; flex: none; }
.rf-pp-badge-testo { display: flex; flex-direction: column; min-width: 0; }
.rf-pp-badge-nome { font-size: .85rem; font-weight: 600; color: var(--rf-ink); }
.rf-pp-badge-dove { font-size: .72rem; color: var(--rf-mu); }

/* Le righe della classifica ora si aprono: deve vedersi. */
.leaderboard-row[data-profilo] { cursor: pointer; transition: background-color .12s; }
.leaderboard-row[data-profilo]:hover { background: color-mix(in srgb, var(--rf-cyan) 8%, transparent); }
.leaderboard-row[data-profilo]:focus-visible { outline: 2px solid var(--rf-cyan); outline-offset: -2px; }

/* =====================================================
   PROFILO — schede Sfide e Badge, portate nel design system
   Erano gradienti e colori Tailwind scritti a mano: stonavano
   con le altre schede e dipendevano dal livello di compatibilita'.
   ===================================================== */
.rf-duel-box { text-align: center; padding: 12px 8px; }
.rf-duel-val {
  font-family: var(--rf-font-display); font-weight: 900; font-size: 1.5rem;
  line-height: 1.1; font-variant-numeric: tabular-nums;
}
.rf-duel-val.is-vinte { color: var(--rf-green); }
.rf-duel-val.is-perse { color: var(--rf-red); }
.rf-duel-val.is-pari  { color: var(--rf-mu); }
.rf-duel-val.is-oro   { color: var(--rf-gold); }
.rf-duel-val.is-podio { color: var(--rf-gold); }
.rf-duel-val.is-ciano { color: var(--rf-cyan); }
.rf-duel-lbl {
  margin-top: 3px; font-size: .64rem; letter-spacing: .07em;
  text-transform: uppercase; color: var(--rf-mu);
}

.rf-wr-testa { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.rf-wr-val { font-family: var(--rf-font-display); font-weight: 800; font-variant-numeric: tabular-nums; }
.rf-wr-val.is-bene { color: var(--rf-green); }
.rf-wr-val.is-male { color: var(--rf-red); }
.rf-wr-barra { height: 7px; border-radius: 999px; background: var(--rf-line); overflow: hidden; }
.rf-wr-riempi { height: 100%; background: var(--rf-green); transition: width .45s ease; }
@media (prefers-reduced-motion: reduce) { .rf-wr-riempi { transition: none; } }

.rf-azione {
  padding: 9px 10px; border-radius: 11px; cursor: pointer;
  font-family: var(--rf-font-display); font-weight: 700; font-size: .78rem;
  background: var(--rf-flat); border: 1px solid var(--rf-line); color: var(--rf-ink);
  transition: border-color .12s, color .12s;
}
.rf-azione.is-viola:hover { border-color: var(--rf-purple); color: var(--rf-purple); }
.rf-azione.is-ciano:hover { border-color: var(--rf-cyan); color: var(--rf-cyan); }
.rf-azione:focus-visible { outline: 2px solid var(--rf-cyan); outline-offset: 2px; }

.rf-badge-card {
  position: relative;
  background: var(--rf-flat); border: 1px solid var(--rf-line);
  border-radius: 13px; padding: 12px 10px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  transition: border-color .14s;
}
.rf-badge-card.is-p1 { border-color: color-mix(in srgb, var(--rf-gold) 45%, var(--rf-line)); }
.rf-badge-card.is-p2 { border-color: color-mix(in srgb, var(--rf-mu) 55%, var(--rf-line)); }
.rf-badge-card.is-p3 { border-color: color-mix(in srgb, #b45309 45%, var(--rf-line)); }
.rf-badge-card:hover { border-color: var(--rf-cyan); }
.rf-badge-img { width: 60px; height: 60px; }
.rf-badge-img img { width: 100%; height: 100%; object-fit: contain; }
.rf-badge-nome {
  font-family: var(--rf-font-display); font-weight: 700; font-size: .82rem;
  color: var(--rf-ink); max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rf-badge-dove {
  font-size: .68rem; color: var(--rf-mu); max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Il tasto per ricondividere il torneo. Sempre visibile e non al passaggio
   del mouse: sul telefono un :hover non arriva mai, e questa scheda si guarda
   soprattutto li'. */
.rf-badge-share {
  position: absolute; top: 6px; right: 6px;
  width: 26px; height: 26px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--rf-card); border: 1px solid var(--rf-line);
  color: var(--rf-mu); cursor: pointer; transition: color .14s, border-color .14s;
}
.rf-badge-share svg { width: 13px; height: 13px; }
.rf-badge-share:hover { color: var(--rf-cyan); border-color: var(--rf-cyan); }
.rf-badge-share:disabled { opacity: .45; cursor: default; }

.rf-badge-pill {
  margin-top: 2px; padding: 2px 8px; border-radius: 999px;
  font-size: .62rem; font-weight: 700; color: var(--rf-mu);
  border: 1px solid var(--rf-line);
}

/* Meglio per modalita', nella scheda Statistiche. */
.rf-pm-box {
  background: var(--rf-flat); border: 1px solid var(--rf-line);
  border-radius: 13px; padding: 12px 13px;
}
.rf-pm-titolo {
  font-size: .64rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--rf-mu); margin-bottom: 9px;
}
.rf-pm-riga { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: .82rem; }
.rf-pm-pallino { width: 8px; height: 8px; border-radius: 999px; flex: none; }
.rf-pm-nome { color: var(--rf-ink); }
.rf-pm-partite { color: var(--rf-mu); font-size: .7rem; margin-left: auto; }
.rf-pm-val { color: var(--rf-gold); font-weight: 700; font-variant-numeric: tabular-nums; min-width: 52px; text-align: right; }

/* La modalita' sotto il miglior punteggio. */
.rf-stat-sub { font-size: .68rem; color: var(--rf-mu); margin-top: 1px; }

/* ---- scontrino di CT Anatomy: le due righe che il classico non ha ---- */
.rf-rc-fetta {
  font-size: 8.5px; letter-spacing: .18em; color: var(--faint);
  margin: 7px 0 2px; text-transform: uppercase;
}
.rf-rc-fetta::after { content: ''; display: block; border-top: 1px dotted #D9D4C6; margin-top: 2px; }

.rf-rc-cat { display: flex; align-items: center; gap: 6px; margin: 3px 0; }
.rf-rc-cat .cn { width: 62px; flex: none; }
.rf-rc-cat .cb { flex: 1; height: 5px; background: #E2DED2; overflow: hidden; }
.rf-rc-cat .cb i { display: block; height: 100%; background: var(--tint); }
.rf-rc-cat .cv { flex: none; font-variant-numeric: tabular-nums; font-weight: 600; width: 42px; text-align: right; }

/* Intestazione sopra lo scontrino dell'anatomia. */
.rf-anatres-testa {
  font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--rf-mu); margin-bottom: 10px;
}
.rf-anatres-testa.is-completata {
  color: var(--rf-green); font-size: 1rem; letter-spacing: 0;
  text-transform: none; line-height: 1.35;
}
.rf-anat-fine-secondario {
  width: 100%; padding: 8px; border-radius: 10px; cursor: pointer;
  background: transparent; border: 1px solid var(--rf-line); color: var(--rf-mu);
  font-family: var(--rf-font-display); font-weight: 700; font-size: .8rem;
}
.rf-anat-fine-secondario:hover { border-color: var(--rf-cyan); color: var(--rf-ink); }
.stat-badge-purple { background: color-mix(in srgb, var(--rf-purple) 18%, transparent); color: var(--rf-purple); }

/* "Risultati CT Anatomy" e' un titolo, non una sigla: il maiuscolo spaziato
   dello scontrino classico lo renderebbe illeggibile. */
.rf-rc-title.is-anat { letter-spacing: .04em; text-transform: none; font-size: 12px; }

/* L'invito al parere dentro lo scontrino: una riga, non una finestra. */
.rf-rc-parere {
  margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--faint);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 10px; color: var(--faint);
}
.rf-rc-parere-btn {
  border: 1px solid var(--tint); background: transparent; color: var(--tint);
  border-radius: 999px; padding: 2px 10px; font: inherit; font-weight: 700;
  cursor: pointer;
}
.rf-rc-parere-btn:hover { background: var(--tint); color: var(--paper); }

/* ============================================================
   CT Anatomy nei tornei: il sorteggio a rulli e la fascetta del giro
   ============================================================ */

/* La fascetta sotto la striscia del torneo: a che giro siamo, in che
   distretto, e quanto vale un colpo qui. I trattini sono i quattro distretti
   del giro: quello corrente acceso, quelli gia' fatti pieni ma spenti. */
.rf-anat-tappa {
  display: flex; align-items: center; justify-content: center;
  gap: 9px; padding: 4px 10px 6px; flex-wrap: wrap;
}
.rf-anat-giro {
  font-family: var(--rf-font-display); font-weight: 800; font-size: .68rem;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--rf-gold);
  border: 1px solid color-mix(in srgb, var(--rf-gold) 40%, var(--rf-line));
  border-radius: 999px; padding: 1px 8px;
}
.rf-anat-tappa-passi { display: flex; gap: 5px; }
.rf-anat-passo { width: 16px; height: 4px; border-radius: 2px; background: var(--rf-line); }
.rf-anat-passo.is-fatta { background: var(--rf-mu); }
.rf-anat-passo.is-qui { background: var(--rf-cyan); box-shadow: 0 0 8px rgba(79, 184, 212, .55); }
.rf-anat-tappa-nome {
  font-family: var(--rf-font-display); font-weight: 700;
  font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--rf-ink);
}
.rf-anat-tappa-sec {
  font-size: .68rem; font-weight: 700; color: var(--rf-green);
  border: 1px solid color-mix(in srgb, var(--rf-green) 35%, var(--rf-line));
  border-radius: 999px; padding: 1px 7px;
}
.rf-anat-tappa-pt {
  font-size: .68rem; font-weight: 700; color: var(--rf-purple);
  border: 1px solid color-mix(in srgb, var(--rf-purple) 35%, var(--rf-line));
  border-radius: 999px; padding: 1px 7px;
}

/* ---------------------------------------------------- il sorteggio a rulli */
.rf-slot-velo {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(5, 8, 14, .94);
}
.rf-slot {
  width: 100%; max-width: 560px; text-align: center;
  background: var(--rf-card); border: 1px solid var(--rf-line);
  border-radius: 20px; padding: 22px 18px 20px;
}
.rf-slot-occhiello {
  font-size: .64rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--rf-gold); font-weight: 700; margin-bottom: 5px;
}
.rf-slot-titolo {
  font-family: var(--rf-font-display); font-weight: 800; font-size: 1.3rem;
  color: var(--rf-ink); margin: 0 0 16px;
}

/* La macchina: quattro finestre alte una cella, con il nastro che scorre
   dentro. L'altezza della cella (96px) e' anche nel JS, che calcola dove
   fermare il nastro. */
.rf-slot-macchina {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  padding: 10px; margin-bottom: 14px;
  background: var(--rf-bg); border: 1px solid var(--rf-line); border-radius: 15px;
}
.rf-slot-rullo {
  position: relative; height: 96px; overflow: hidden;
  background: var(--rf-flat); border: 1px solid var(--rf-line); border-radius: 11px;
}
.rf-slot-rullo.is-fermo { border-color: color-mix(in srgb, var(--rf-cyan) 55%, var(--rf-line)); }
.rf-slot-nastro { animation: rf-slot-gira .28s linear infinite; }
.rf-slot-rullo.is-fermo .rf-slot-nastro { animation: none; }
@keyframes rf-slot-gira { from { transform: translateY(0); } to { transform: translateY(-96px); } }
@media (prefers-reduced-motion: reduce) {
  .rf-slot-nastro { animation: none; }
}
.rf-slot-cella {
  height: 96px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px;
}
.rf-slot-icona { color: var(--rf-mu); display: block; }
.rf-slot-icona svg { width: 26px; height: 41px; display: block; }
.rf-slot-rullo.is-fermo .rf-slot-icona { color: var(--rf-cyan); }
.rf-slot-nome {
  font-family: var(--rf-font-display); font-weight: 700; font-size: .68rem;
  letter-spacing: .04em; text-transform: uppercase; color: var(--rf-mu);
}
.rf-slot-rullo.is-fermo .rf-slot-nome { color: var(--rf-ink); }
.rf-slot-ordine {
  position: absolute; top: 4px; left: 6px;
  font-size: .58rem; font-weight: 800; color: var(--rf-line);
}
.rf-slot-rullo.is-fermo .rf-slot-ordine { color: var(--rf-mu); }

.rf-slot-intro { font-size: .78rem; color: var(--rf-mu); margin: 0 0 14px; line-height: 1.5; }

/* La scala dei giri. */
.rf-slot-giri {
  background: var(--rf-flat); border: 1px solid var(--rf-line);
  border-radius: 14px; padding: 12px 12px 10px; margin-bottom: 16px;
}
.rf-slot-giri-tit {
  font-size: .6rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--rf-mu); font-weight: 700; margin-bottom: 8px;
}
.rf-slot-giri-righe { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.rf-slot-giro {
  display: flex; flex-direction: column; gap: 2px; padding: 6px 4px;
  border: 1px solid var(--rf-line); border-radius: 10px;
}
.rf-slot-giro.is-ora { border-color: color-mix(in srgb, var(--rf-cyan) 45%, var(--rf-line)); }
.rf-slot-giro-n { font-size: .58rem; text-transform: uppercase; letter-spacing: .07em; color: var(--rf-mu); }
.rf-slot-giro-sec { font-size: .8rem; font-weight: 800; color: var(--rf-green); }
.rf-slot-giro-pt { font-size: .8rem; font-weight: 800; color: var(--rf-purple); }
.rf-slot-nota { font-size: .7rem; color: var(--rf-mu); margin: 9px 0 0; line-height: 1.5; }

.rf-slot-azioni { display: flex; justify-content: center; }
.rf-slot-azioni > * { min-width: 210px; }

/* ---------------------------------- Sfide: la scelta del genere e i rulli */
.rf-genere { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rf-genere-card {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 16px 10px; border-radius: 15px; cursor: pointer;
  background: var(--rf-flat); border: 1px solid var(--rf-line);
  transition: border-color .14s, transform .14s;
}
.rf-genere-card:hover { transform: translateY(-2px); }
.rf-genere-card.is-xr:hover { border-color: var(--rf-cyan); }
.rf-genere-card.is-ct:hover { border-color: var(--rf-purple); }
.rf-genere-sigla {
  font-family: var(--rf-font-display); font-weight: 800; font-size: 1.7rem;
  line-height: 1; color: var(--rf-ink);
}
.rf-genere-card.is-xr .rf-genere-sigla { color: var(--rf-cyan); }
.rf-genere-card.is-ct .rf-genere-sigla { color: var(--rf-purple); }
.rf-genere-nome {
  font-family: var(--rf-font-display); font-weight: 700; font-size: .82rem;
  color: var(--rf-ink);
}
.rf-genere-sub { font-size: .66rem; color: var(--rf-mu); text-align: center; line-height: 1.35; }

/* Le regole della sfida CT, prima di generare il codice. */
.rf-ct-regole {
  display: flex; flex-direction: column; gap: 7px;
  background: var(--rf-flat); border: 1px solid var(--rf-line);
  border-radius: 14px; padding: 12px 14px;
  font-size: .76rem; color: var(--rf-mu); line-height: 1.45;
}
.rf-ct-regole > div { padding-left: 14px; position: relative; }
.rf-ct-regole > div::before {
  content: ''; position: absolute; left: 0; top: .5em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--rf-purple);
}

/* I rulli della sfida sono tre, non quattro. */
.rf-slot-tre { grid-template-columns: repeat(3, 1fr); }

/* ---------------------------------- Lo scontrino di una sfida conclusa */
.rf-scres { width: 100%; max-width: 460px; }
.rf-scres-testa {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px;
  background: var(--rf-flat); border: 1px solid var(--rf-line);
  border-radius: 15px; padding: 14px 12px;
}
.rf-scres-testa.is-vinta { border-color: color-mix(in srgb, var(--rf-gold) 45%, var(--rf-line)); }
.rf-scres-testa.is-persa { border-color: color-mix(in srgb, var(--rf-cyan) 40%, var(--rf-line)); }
.rf-scres-lato { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.rf-scres-nome {
  font-size: .76rem; color: var(--rf-ink); font-weight: 600; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rf-scres-lato.is-loro .rf-scres-nome { color: var(--rf-mu); }
.rf-scres-vinte {
  font-family: var(--rf-font-display); font-weight: 800; font-size: 2.2rem;
  line-height: 1; color: var(--rf-ink);
}
.rf-scres-testa.is-vinta .rf-scres-lato:not(.is-loro) .rf-scres-vinte { color: var(--rf-gold); }
.rf-scres-testa.is-persa .rf-scres-lato.is-loro .rf-scres-vinte { color: var(--rf-cyan); }
.rf-scres-vs { font-size: .66rem; color: var(--rf-line); text-transform: uppercase; letter-spacing: .1em; }
.rf-scres-esito {
  text-align: center; margin: 10px 0 12px;
  font-family: var(--rf-font-display); font-weight: 700; font-size: .8rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--rf-mu);
}

.rf-scres-righe { display: flex; flex-direction: column; gap: 8px; }
.rf-scres-riga {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: 4px 12px; padding: 10px 13px;
  background: var(--rf-flat); border: 1px solid var(--rf-line); border-radius: 13px;
  border-left-width: 3px;
}
.rf-scres-riga.is-mia { border-left-color: var(--rf-green); }
.rf-scres-riga.is-sua { border-left-color: color-mix(in srgb, var(--rf-red) 60%, var(--rf-line)); }
.rf-scres-riga.is-pari { border-left-color: var(--rf-mu); }
.rf-scres-quale { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rf-scres-n { font-size: .6rem; text-transform: uppercase; letter-spacing: .08em; color: var(--rf-mu); }
.rf-scres-nomeManche {
  font-family: var(--rf-font-display); font-weight: 700; font-size: .88rem; color: var(--rf-ink);
}
.rf-scres-punti { display: flex; align-items: baseline; gap: 7px; font-variant-numeric: tabular-nums; }
.rf-scres-p { font-weight: 700; font-size: .95rem; color: var(--rf-mu); }
.rf-scres-p.is-vinta { color: var(--rf-green); }
.rf-scres-sep { color: var(--rf-line); }
.rf-scres-strutture { grid-column: 1 / -1; font-size: .68rem; color: var(--rf-mu); }
.rf-scres-nota { text-align: center; font-size: .7rem; color: var(--rf-mu); margin: 10px 0 0; }
.rf-scres-azioni { margin-top: 14px; }

/* ---------------------------------- La dimostrazione nella schermata di avvio */
.rf-demo {
  margin: 0 auto 10px; width: 100%; max-width: 230px;
  border-radius: 13px; overflow: hidden;
  border: 1px solid var(--rf-line); background: #000;
  line-height: 0;
}
.rf-demo-tela { width: 100%; height: auto; display: block; }

/* Il passo in corso si accende insieme a quello che succede nel riquadro:
   e' quello che lega la scritta al gesto. */
.rf-splash-step.is-ora {
  border-color: color-mix(in srgb, var(--rf-cyan) 55%, var(--rf-line));
  background: color-mix(in srgb, var(--rf-cyan) 9%, transparent);
}
.rf-splash-step.is-ora .rf-splash-step-n { background: var(--rf-cyan); color: #06121a; }
.rf-splash-step { transition: background-color .18s, border-color .18s; }

/* La didascalia sotto la dimostrazione: un passo per volta, quello che si sta
   vedendo. I pallini dicono a che punto siamo. */
.rf-demo-passo { text-align: center; }
.rf-demo-pallini { display: flex; justify-content: center; gap: 5px; margin-bottom: 5px; }
.rf-demo-pallini span {
  width: 5px; height: 5px; border-radius: 50%; background: var(--rf-line);
  transition: background-color .18s, transform .18s;
}
.rf-demo-pallini span.is-ora { background: var(--rf-cyan); transform: scale(1.35); }
.rf-demo-passo p {
  margin: 0; font-size: .78rem; color: var(--rf-ink); line-height: 1.4;
  min-height: 2.2em; display: flex; align-items: center; justify-content: center;
}

/* ---------------------------------- Il carosello della schermata di avvio */
.rf-carosello {
  overflow: hidden; margin-bottom: 10px;
  transition: height .28s cubic-bezier(.22,.61,.36,1);
}
@media (prefers-reduced-motion: reduce) { .rf-carosello { transition: none; } }
/* Le schede non aperte non devono allungare il contenitore: si sovrappongono
   in altezza e chi decide e' quella che si vede. */
.rf-caro-nastro { align-items: flex-start; }
.rf-caro-nastro {
  display: flex; width: 100%;
  transition: transform .32s cubic-bezier(.22,.61,.36,1);
}
@media (prefers-reduced-motion: reduce) { .rf-caro-nastro { transition: none; } }
/* Ogni scheda occupa tutta la larghezza e non si restringe: senza
   `flex: 0 0 100%` flexbox le comprime per farle stare tutte insieme. */
.rf-caro-scheda { flex: 0 0 100%; min-width: 100%; }
.rf-caro-tit {
  font-family: var(--rf-font-display); font-weight: 700; font-size: .72rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--rf-mu); text-align: center; margin-bottom: 10px;
}
.rf-splash-sub {
  text-align: center; font-size: .78rem; color: var(--rf-mu); margin-top: 2px;
}
.rf-caro-pallini { display: flex; justify-content: center; gap: 7px; margin-bottom: 12px; }
.rf-caro-pallini button {
  width: 7px; height: 7px; border-radius: 50%; padding: 0;
  background: var(--rf-line); border: none; cursor: pointer;
  transition: background-color .18s, width .18s;
}
.rf-caro-pallini button.is-ora { background: var(--rf-cyan); width: 18px; border-radius: 4px; }

/* ============================================================
   Survival Ortho: la vista di gioco, portata sul design system
   ============================================================
   Era l'ultima rimasta su `arcade-*` e DaisyUI. L'HUD, la barra del tempo e
   la striscia del torneo sono gli stessi di CT Anatomy — le classi si riusano
   tali e quali — e qui c'e' solo cio' che questa modalita' ha di suo: la
   scelta fra due tasti, l'esito a tutta lastra e il salto. */

/* Il rosso che monta sotto i cinque secondi. `pointer-events: none` perche'
   copre tutto lo schermo e non deve mangiare i tocchi sui tasti. */
.rf-tg-allarme {
  position: absolute; inset: 0; z-index: 10; pointer-events: none;
  opacity: 0; transition: opacity .45s;
  background: radial-gradient(ellipse at center, transparent 35%, rgba(180, 0, 0, .45) 100%);
}
.rf-tg-allarme.is-ora { opacity: 1; }

/* I round superati. */
.rf-tg-passi {
  display: flex; justify-content: center; align-items: center;
  gap: 5px; padding: 5px 10px 7px; flex-wrap: wrap;
}
.rf-tg-passi > span { width: 14px; height: 4px; border-radius: 2px; background: var(--rf-line); }
.rf-tg-passi > span.is-fatta { background: var(--rf-green); }
.rf-tg-passi > span.is-qui { background: var(--rf-cyan); box-shadow: 0 0 8px rgba(79, 184, 212, .55); }
.rf-tg-oltre { font-size: .68rem; font-weight: 700; color: var(--rf-cyan); margin-left: 3px; }

.rf-tg-lastra { border: 2px solid color-mix(in srgb, var(--rf-green) 30%, var(--rf-line)); transition: border-color .3s; }
.rf-tg-lastra.is-urgente { border-color: color-mix(in srgb, var(--rf-red) 60%, var(--rf-line)); }

/* Il riquadro della frattura, sopra la lastra. Tratteggiato e non pieno: deve
   dire "era qui" senza coprire quello che si deve imparare a vedere. */
.rf-tg-riquadro {
  position: absolute; pointer-events: none; z-index: 6;
  border: 2px dashed var(--rf-red); border-radius: 3px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0), 0 0 14px rgba(236, 124, 111, .55);
  animation: rf-tg-pulsa 1.1s ease-in-out infinite;
}
@keyframes rf-tg-pulsa { 50% { border-color: color-mix(in srgb, var(--rf-red) 55%, transparent); } }
@media (prefers-reduced-motion: reduce) { .rf-tg-riquadro { animation: none; } }

/* Il velo: vela appena, non copre. La lastra col riquadro e' la cosa da
   guardare, e prima l'esito la nascondeva del tutto. */
.rf-tg-velo { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.rf-tg-velo.is-giusta { background: rgba(20, 70, 45, .30); }
.rf-tg-velo.is-sbagliata { background: rgba(80, 25, 25, .34); }

/* Il verdetto, in una fascia in basso. */
.rf-tg-esito {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 7;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; backdrop-filter: blur(4px);
  background: linear-gradient(to top, rgba(10, 15, 26, .95), rgba(10, 15, 26, .72));
  border-top: 2px solid var(--rf-line);
}
.rf-tg-esito.is-giusta { border-top-color: var(--rf-green); }
.rf-tg-esito.is-sbagliata { border-top-color: var(--rf-red); }
.rf-tg-esito-segno { font-size: 2rem; line-height: 1; }
.rf-tg-esito.is-giusta .rf-tg-esito-segno { color: var(--rf-green); }
.rf-tg-esito.is-sbagliata .rf-tg-esito-segno { color: var(--rf-red); }
.rf-tg-esito-testo { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.rf-tg-esito-tit {
  font-family: var(--rf-font-display); font-weight: 800; font-size: 1rem;
  letter-spacing: .03em; color: var(--rf-ink);
}
.rf-tg-esito-sub { font-size: .78rem; color: var(--rf-mu); }
.rf-tg-esito-punti {
  font-family: var(--rf-font-display); font-weight: 800; font-size: 1.3rem;
  color: var(--rf-gold);
}

/* La scelta: due tasti larghi, uno per pollice. */
/* Due risposte larghe piu' il salto, che e' stretto: e' una via d'uscita, non
   una terza risposta, e non deve pesare come loro. */
.rf-tg-scelta {
  display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px;
  padding: 4px 12px 10px; max-width: 560px; margin: 0 auto; width: 100%;
}
.rf-tg-tasto.is-salta {
  border-color: var(--rf-line); padding: 14px 16px;
}
.rf-tg-tasto.is-salta .rf-tg-tasto-icona { color: var(--rf-mu); }
.rf-tg-tasto.is-salta .rf-tg-tasto-testo {
  font-size: .72rem; color: var(--rf-mu); display: flex; align-items: center; gap: 6px;
}
.rf-tg-tasto.is-salta:hover:not(:disabled) { border-color: var(--rf-mu); }
.rf-tg-tasto {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 14px 8px; border-radius: 15px; cursor: pointer;
  background: var(--rf-flat); border: 2px solid var(--rf-line);
  transition: transform .1s, border-color .14s, background-color .14s;
}
.rf-tg-tasto:active { transform: translateY(2px); }
.rf-tg-tasto:disabled { opacity: .45; cursor: default; transform: none; }
.rf-tg-tasto.is-normale { border-color: color-mix(in srgb, var(--rf-green) 45%, var(--rf-line)); }
.rf-tg-tasto.is-normale:hover:not(:disabled) {
  background: color-mix(in srgb, var(--rf-green) 12%, var(--rf-flat)); border-color: var(--rf-green);
}
.rf-tg-tasto.is-frattura { border-color: color-mix(in srgb, var(--rf-red) 45%, var(--rf-line)); }
.rf-tg-tasto.is-frattura:hover:not(:disabled) {
  background: color-mix(in srgb, var(--rf-red) 12%, var(--rf-flat)); border-color: var(--rf-red);
}
.rf-tg-tasto-icona { display: block; line-height: 0; }
.rf-tg-tasto-icona svg { width: 30px; height: 30px; }
.rf-tg-tasto.is-normale .rf-tg-tasto-icona { color: var(--rf-green); }
.rf-tg-tasto.is-frattura .rf-tg-tasto-icona { color: var(--rf-red); }
.rf-tg-tasto-testo {
  font-family: var(--rf-font-display); font-weight: 800; font-size: .92rem;
  letter-spacing: .06em; color: var(--rf-ink);
}

/* Il salto sta sotto i tasti, non sopra la lastra: in alto copriva proprio
   l'angolo dove una frattura puo' capitare. */
.rf-tg-salta { display: flex; justify-content: center; padding: 0 12px 10px; }
.rf-tg-salta button {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 14px; border-radius: 999px; cursor: pointer;
  background: transparent; border: 1px solid var(--rf-line);
  color: var(--rf-mu); font-size: .7rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  transition: color .14s, border-color .14s;
}
.rf-tg-salta button:hover:not(:disabled) { color: var(--rf-ink); border-color: var(--rf-mu); }
.rf-tg-salta button:disabled { opacity: .4; cursor: default; }
.rf-tg-salta-n {
  background: var(--rf-flat); border-radius: 999px; padding: 0 7px;
  font-size: .68rem; color: var(--rf-ink);
}

/* Fine partita. */
.rf-tg-fine { width: 100%; max-width: 360px; text-align: center; }
.rf-tg-fine-mascotte { width: 96px; height: 96px; object-fit: contain; margin: 0 auto 6px; display: block; }
.rf-tg-fine-tit {
  font-family: var(--rf-font-display); font-weight: 800; font-size: 1.5rem;
  color: var(--rf-red); margin: 0 0 2px;
}
.rf-tg-fine-sub { font-size: .8rem; color: var(--rf-mu); margin: 0 0 14px; }
.rf-tg-fine-cifre { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.rf-tg-fine-tent { font-size: .72rem; color: var(--rf-mu); margin: 0 0 14px; }
.rf-tg-fine-azioni { display: flex; flex-direction: column; gap: 8px; }

/* ---------------------------------- Tornei: il nastro e la cover del dettaglio */

/* «Iscritto» come nastro d'angolo. Sta dentro `.rf-tcover`, che ha gia'
   `overflow: hidden` e l'angolo arrotondato: il nastro finisce tagliato dalla
   curva senza bisogno di una maschera. */
.rf-tribbon {
  position: absolute; top: 0; right: 0;
  width: 92px; height: 92px; overflow: hidden; pointer-events: none; z-index: 2;
}
.rf-tribbon span {
  position: absolute; top: 15px; right: -30px; width: 124px;
  transform: rotate(45deg); text-align: center;
  background: linear-gradient(135deg, var(--rf-green), color-mix(in srgb, var(--rf-green) 62%, #0b3d29));
  color: #062015; font-size: .58rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; padding: 4px 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
}

/* La cover del torneo aperto. */
.rf-tdet-testa { flex-shrink: 0; }
.rf-tdet-cover {
  width: 100%; height: 210px; overflow: hidden;
  background: linear-gradient(135deg, rgba(120, 80, 10, .35), #000);
}
@media (max-width: 640px) { .rf-tdet-cover { height: 168px; } }

/* La sfumatura sale solo dal basso e resta trasparente in alto: cosi' il
   titolo ha il suo fondo scuro e l'immagine resta leggibile dove non c'e'
   testo. Prima l'immagine era velata tutta al 60% e non si capiva. */
.rf-tdet-velo {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top,
      rgba(13, 13, 20, .96) 0%,
      rgba(13, 13, 20, .78) 26%,
      rgba(13, 13, 20, .18) 58%,
      rgba(13, 13, 20, 0) 100%);
}
.rf-tdet-titolo {
  font-family: var(--rf-font-display); font-weight: 800;
  font-size: 1.45rem; line-height: 1.15; color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .85);
  margin: 0; text-wrap: balance;
}
@media (max-width: 640px) { .rf-tdet-titolo { font-size: 1.2rem; } }

/* Le regole di un torneo, al posto di bonus e aiuti sulla terza scheda. */
.rf-splash-regole {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--rf-flat); border: 1px solid var(--rf-line);
  border-radius: 14px; padding: 13px 15px;
}
.rf-splash-regola {
  position: relative; padding-left: 15px;
  font-size: .78rem; color: var(--rf-mu); line-height: 1.45; text-align: left;
}
.rf-splash-regola::before {
  content: ''; position: absolute; left: 0; top: .55em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--rf-purple);
}

/* Gli aiuti riscritti dal pannello: righe di testo al posto della fila con le
   icone, che qui non si possono indovinare. */
.rf-splash-aiuti {
  display: flex; flex-direction: column; gap: 5px;
  margin-top: 6px; text-align: left;
}
.rf-splash-aiuti > div {
  position: relative; padding-left: 14px;
  font-size: .74rem; color: var(--rf-ink); line-height: 1.4;
}
.rf-splash-aiuti > div::before {
  content: ''; position: absolute; left: 0; top: .52em;
  width: 4px; height: 4px; border-radius: 50%; background: var(--rf-cyan);
}
/* Con l'icona il pallino sparisce: due segni all'inizio della stessa riga
   sono uno di troppo. */
.rf-splash-aiuti > div.ha-icona { padding-left: 0; display: flex; align-items: flex-start; gap: 7px; }
.rf-splash-aiuti > div.ha-icona::before { display: none; }
.rf-splash-aiuto-i { flex: none; line-height: 0; color: var(--rf-cyan); margin-top: 1px; }
.rf-splash-aiuto-i svg { width: 15px; height: 15px; }

/* Survival: il tasto per tornare a grandezza naturale e il promemoria del
   gesto. Stanno FUORI dall'elemento che si ingrandisce, se no crescerebbero
   con la lastra. */
.rf-tg-1x {
  position: absolute; top: 10px; right: 10px; z-index: 8;
  min-width: 38px; padding: 5px 9px; border-radius: 10px; cursor: pointer;
  background: rgba(10, 15, 26, .82); border: 1px solid var(--rf-line);
  color: var(--rf-ink); font-size: .74rem; font-weight: 700;
  backdrop-filter: blur(3px);
}
.rf-tg-1x:hover { border-color: var(--rf-cyan); color: var(--rf-cyan); }

/* Il promemoria sta in basso e sparisce al primo ingrandimento: sopra la
   lastra coprirebbe proprio cio' che si deve guardare, e una lesione puo'
   capitare dietro la scritta. */
.rf-tg-pinch {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin: 4px auto 0; padding: 3px 0; pointer-events: none;
  color: var(--rf-mu); font-size: .66rem; white-space: nowrap;
}
.rf-tg-pinch svg { width: 13px; height: 13px; flex: none; }

/* Il pallino "c'e' qualcosa di nuovo" sulle scorciatoie della home.
   Stessa forma di quello della campanella — chi ne ha imparato uno ha
   imparato l'altro — ma ancorato all'angolo della scheda invece che
   all'icona. Il selettore e' qualificato col tag perche' le utility di
   Tailwind Play arrivano a runtime e battono le regole di pari specificita'. */
span.rf-nuovo-dot {
  position: absolute; top: 6px; right: 6px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px;
  background: var(--rf-red); color: #2A0F0C;
  font-size: 11px; font-weight: 800; line-height: 18px; text-align: center;
  border: 2px solid var(--rf-card);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--rf-red) 55%, transparent);
}
/* Sulla scheda dei tornei il lucchetto dell'ospite sta nello stesso angolo,
   ma i due non convivono mai: da ospite il conteggio e' zero. */

/* Sulla colonna di sinistra basta un punto: la voce e' gia' stretta, e il
   numero li' sarebbe illeggibile prima che informativo. */
.rf-rail-dot {
  width: 7px; height: 7px; border-radius: 999px; flex: none;
  margin-left: auto;
  background: var(--rf-red);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rf-red) 22%, transparent);
}

/* ---------------------------------------- Vetrina pubblica: le medaglie */

/* I premi di torneo: grandi, in fila da due. Un premio si guarda. */
.rf-pp-medaglie {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 10px; margin-bottom: 12px;
}
/* I traguardi: piccoli, molti per riga, senza nome sotto — il nome lo dice
   la descrizione quando li tocchi, e ventitre' etichette in colonna
   sarebbero un elenco, non una vetrina. */
.rf-pp-medaglie.is-piccole { grid-template-columns: repeat(auto-fill, 64px); gap: 7px; justify-content: start; }

.rf-pp-med {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 9px 6px; border-radius: 12px; cursor: pointer;
  background: var(--rf-flat); border: 1px solid var(--rf-line);
  color: var(--rf-ink); font: inherit;
  transition: border-color .14s, transform .14s;
}
.rf-pp-med img { width: 38px; height: 38px; object-fit: contain; display: block; }
.rf-pp-med.is-torneo { padding: 12px 8px; }
.rf-pp-med.is-torneo img { width: 76px; height: 76px; }
.rf-pp-med-nome {
  font-family: var(--rf-font-display); font-weight: 700; font-size: .74rem;
  text-align: center; line-height: 1.2;
}
.rf-pp-med-nome.is-mini {
  font-size: .54rem; line-height: 1.15; color: var(--rf-mu); font-weight: 500;
  font-family: var(--rf-font-ui);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; width: 100%;
}
.rf-pp-med:hover { border-color: var(--rf-cyan); }
.rf-pp-med.is-aperto { border-color: var(--rf-cyan); transform: translateY(-2px); }
.rf-pp-med:focus-visible { outline: 2px solid var(--rf-cyan); outline-offset: 2px; }

.rf-pp-dettaglio {
  display: flex; gap: 11px; align-items: center;
  padding: 11px 12px; margin-bottom: 12px;
  background: var(--rf-card); border: 1px solid var(--rf-cyan); border-radius: 12px;
}
.rf-pp-dettaglio img { width: 54px; height: 54px; object-fit: contain; flex: none; }
.rf-pp-det-nome {
  font-family: var(--rf-font-display); font-weight: 700; font-size: .88rem;
  color: var(--rf-ink);
}
.rf-pp-det-testo { font-size: .76rem; color: var(--rf-mu); line-height: 1.35; }

@media (max-width: 380px) {
  .rf-pp-medaglie.is-piccole { grid-template-columns: repeat(4, 1fr); }
}

/* Il podio della classifica si apre come le righe sotto. Prima non era
   cliccabile: le righe portano `data-profilo`, il podio e' disegnato a parte
   e non ce l'aveva, quindi gli unici tre nomi che non si aprivano erano i tre
   piu' guardati. */
.rf-podio-tocca { cursor: pointer; border-radius: 12px; transition: transform .14s; }
.rf-podio-tocca:hover { transform: translateY(-2px); }
.rf-podio-tocca:focus-visible { outline: 2px solid var(--rf-cyan); outline-offset: 3px; }

/* ------------------------------------ Profilo proprio: i traguardi */

.rf-tg-sezione {
  margin: 18px 0 8px;
  font-size: .66rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--rf-mu);
}
/* Riquadri a misura fissa, non frazioni della larghezza: su uno schermo largo
   sei colonne diventano sei medaglie enormi, e i traguardi finirebbero per
   sembrare piu' importanti dei premi di torneo — l'opposto di quello che
   devono dire. */
.rf-tg-griglia {
  display: grid; grid-template-columns: repeat(auto-fill, 68px);
  gap: 7px; justify-content: start;
}
.rf-tg-med {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px 4px; border-radius: 10px; cursor: pointer;
  background: var(--rf-flat); border: 1px solid var(--rf-line);
  font: inherit; color: inherit;
  transition: border-color .14s, transform .14s;
}
.rf-tg-med img { width: 40px; height: 40px; object-fit: contain; display: block; }
/* Il nome sotto, minuscolo e su due righe al massimo: serve a riconoscerli a
   colpo d'occhio senza toccarli uno per uno, non a leggerli. */
.rf-tg-med-nome {
  font-size: .56rem; line-height: 1.15; color: var(--rf-mu); text-align: center;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; width: 100%;
}
.rf-tg-med:hover { border-color: var(--rf-cyan); }
.rf-tg-med.is-aperto { border-color: var(--rf-cyan); transform: translateY(-2px); }
.rf-tg-med:focus-visible { outline: 2px solid var(--rf-cyan); outline-offset: 2px; }

/* La scheda del badge, unica per profilo proprio e vetrina pubblica. */
.rf-badge-modale-img {
  width: 132px; height: 132px; object-fit: contain; display: block;
  margin: 4px auto 10px;
}
.rf-badge-modale-nome {
  font-family: var(--rf-font-display); font-weight: 800; font-size: 1.05rem;
  color: var(--rf-ink); margin-bottom: 6px;
}
.rf-badge-modale-testo { font-size: .84rem; color: var(--rf-mu); line-height: 1.4; }
.rf-badge-modale-dove {
  margin-top: 9px; font-size: .72rem; color: var(--rf-gold);
}

@media (max-width: 520px) { .rf-tg-griglia { grid-template-columns: repeat(auto-fill, 62px); } }

/* "Tocca a te" nella scheda delle sfide: e' l'unica riga della home che
   chiede di fare qualcosa, quindi si distingue dal grigio delle altre. */
.home-nav-sub.is-tocca { color: var(--rf-green); font-weight: 600; }

/* La sfida in cui tocca a te. Bordo verde e un'etichetta: il pallino
   nell'angolo dice quante manche restano, non che la mossa e' tua. */
.rf-ch-card.is-tocca {
  border-color: var(--rf-green);
  /* Fondo appena verde, non solo il bordo: in un elenco scorrendo veloce il
     colore della superficie si vede prima del filo attorno. Sta all'8%,
     perche' sopra ci vanno due nomi e due punteggi e devono restare
     leggibili. */
  background: color-mix(in srgb, var(--rf-green) 8%, var(--rf-card));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--rf-green) 45%, transparent),
              0 6px 22px color-mix(in srgb, var(--rf-green) 14%, transparent);
}
.rf-ch-tocca {
  padding: 2px 9px; border-radius: 999px;
  font-family: var(--rf-font-display); font-weight: 700;
  font-size: .6rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--rf-bg); background: var(--rf-green);
}

/* La proposta delle notifiche. Discreta di proposito: e' una domanda, non un
   annuncio, e compare in un momento in cui la persona sta facendo altro. */
.rf-push-invito {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding: 12px 14px; margin-bottom: 14px;
  background: color-mix(in srgb, var(--rf-cyan) 9%, var(--rf-card));
  border: 1px solid color-mix(in srgb, var(--rf-cyan) 40%, var(--rf-line));
  border-radius: 12px;
}
.rf-push-testo { display: flex; flex-direction: column; gap: 2px; min-width: 12rem; flex: 1; }
.rf-push-testo strong {
  font-family: var(--rf-font-display); font-weight: 700; font-size: .92rem; color: var(--rf-ink);
}
.rf-push-testo span { font-size: .76rem; color: var(--rf-mu); line-height: 1.35; }
.rf-push-tasti { display: flex; gap: 8px; align-items: center; }
.rf-push-si {
  font-family: var(--rf-font-display); font-weight: 700; font-size: .8rem; cursor: pointer;
  padding: 8px 16px; border-radius: 9px;
  background: var(--rf-cyan); color: var(--rf-bg); border: 1px solid var(--rf-cyan);
}
.rf-push-si:hover { filter: brightness(1.08); }
.rf-push-si:disabled { opacity: .5; cursor: default; }
.rf-push-no {
  font-size: .78rem; cursor: pointer; padding: 8px 12px; border-radius: 9px;
  background: transparent; color: var(--rf-mu); border: 1px solid var(--rf-line);
}
.rf-push-no:hover { color: var(--rf-ink); }


/* ==========================================================================
   Modale "Scegli modalita": griglia piatta con la mascotte in filigrana
   ==========================================================================
   La mascotte non e' piu' un'icona a lato ma sta DIETRO la scheda, monocroma
   nel colore dell'accento. Tre cose che vale la pena sapere:

   1. `--rf-filigrana` e' l'unico numero da toccare per alzare o abbassare
      l'intensita'. Sta qui e non sparso nelle regole apposta: l'opacita' giusta
      si decide guardando su un telefono vero, e cambiarla deve costare
      un numero, non una caccia.

   2. La filigrana ESCE dal bordo della scheda (right/bottom negativi, dentro
      un `overflow:hidden`). E' quel dettaglio a farla leggere come una cosa
      *dietro* invece che come un'immagine sbiadita *dentro*.

   3. La tinta si fa con `sepia` + `hue-rotate`, non con un `background-color`
      mascherato: il PNG ha l'alfa gia' scontornata, quindi basta portarlo a un
      tono solo e ruotarlo. `grayscale(1)` prima serve perche' `hue-rotate` su
      un'immagine gia' colorata darebbe un colore diverso per ogni mascotte.

   Selettori qualificati col tag (`button.rf-gm-carta`): Tailwind Play inietta
   le sue utility a runtime e batte le regole di pari specificita' scritte a
   mano. Vedi la nota in CLAUDE.md.
   ========================================================================== */

.rf-sheet {
    --rf-filigrana: 0.20;
}

.rf-gm-griglia {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}

/* Con un numero DISPARI di modalita' l'ultima resterebbe spaiata a meta'
   larghezza, e una scheda mezza vuota accanto al nulla si legge come un errore
   di impaginazione. Se e' l'ultima e sta in posizione dispari, prende tutta la
   riga. Si aggiusta da sola quando le modalita' diventano sei. */
.rf-gm-griglia > .rf-gm-carta:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

button.rf-gm-carta {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 76px;
    padding: 11px 13px;
    text-align: left;
    background: var(--rf-card, #16202e);
    border: 1px solid var(--rf-line, #26344a);
    border-left-width: 3px;
    border-radius: 13px;
    cursor: pointer;
    transition: transform .12s ease, border-color .12s ease;
}
button.rf-gm-carta:hover { transform: translateY(-1px); }
button.rf-gm-carta:focus-visible { outline: 2px solid var(--rf-cyan, #4bb8d8); outline-offset: 2px; }

.rf-gm-testo { position: relative; z-index: 2; display: flex; flex-direction: column; min-width: 0; }
.rf-gm-nome {
    display: block;
    font-family: var(--rf-font-display, inherit);
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: .03em;
    line-height: 1.2;
}
.rf-gm-sub {
    display: block;
    font-size: 11.5px;
    line-height: 1.35;
    color: var(--rf-mu, #8e9cab);
    margin-top: 2px;
}

img.rf-gm-filigrana {
    position: absolute;
    right: -14px;
    /* Alto quanto basta che si veda la FACCIA. Con `bottom` molto negativo il
       personaggio scendeva sotto il bordo e restavano solo le spalle: la
       filigrana c'era ma non si capiva di chi fosse. La testa e' la parte
       riconoscibile, e sta in cima al ritaglio. */
    bottom: -4px;
    width: 104px;
    height: auto;
    z-index: 1;
    pointer-events: none;
    opacity: var(--rf-filigrana);
    /* grayscale prima, se no ogni mascotte finirebbe in un colore diverso */
    filter: grayscale(1) brightness(.6) sepia(1) saturate(3);
}

/* Un accento per modalita': bordo, titolo e tinta della filigrana insieme,
   cosi' la scheda si legge come un oggetto solo invece che come un riquadro
   con dentro un'immagine. */
button.rf-gm-ciano { border-left-color: #4bb8d8; }
button.rf-gm-ciano .rf-gm-nome { color: #67c7e4; }
button.rf-gm-ciano img.rf-gm-filigrana { filter: grayscale(1) brightness(.6) sepia(1) hue-rotate(150deg) saturate(3); }

button.rf-gm-oro { border-left-color: #d6a34a; }
button.rf-gm-oro .rf-gm-nome { color: #e0b464; }
button.rf-gm-oro img.rf-gm-filigrana { filter: grayscale(1) brightness(.65) sepia(1) hue-rotate(-15deg) saturate(3); }

button.rf-gm-verde { border-left-color: #5fbf8a; }
button.rf-gm-verde .rf-gm-nome { color: #77cb9c; }
button.rf-gm-verde img.rf-gm-filigrana { filter: grayscale(1) brightness(.62) sepia(1) hue-rotate(70deg) saturate(2.4); }

button.rf-gm-viola { border-left-color: #a78bfa; }
button.rf-gm-viola .rf-gm-nome { color: #b9a3fb; }
button.rf-gm-viola img.rf-gm-filigrana { filter: grayscale(1) brightness(.62) sepia(1) hue-rotate(215deg) saturate(3); }

button.rf-gm-rosa { border-left-color: #f472b6; }
button.rf-gm-rosa .rf-gm-nome { color: #f68cc4; }
button.rf-gm-rosa img.rf-gm-filigrana { filter: grayscale(1) brightness(.66) sepia(1) hue-rotate(275deg) saturate(3); }

/* I formati: staccati da una riga, bordo tratteggiato. Dicono da soli di
   essere di un altro tipo, senza doverlo scrivere. */
.rf-gm-formati {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--rf-line, #28323d);
}
button.rf-gm-formato {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    text-align: left;
    background: transparent;
    border: 1px dashed var(--rf-line, #2c3a4f);
    border-radius: 12px;
    cursor: pointer;
    transition: background .12s ease;
}
button.rf-gm-formato:hover { background: rgba(255,255,255,.03); }
button.rf-gm-formato img { width: 34px; height: 34px; object-fit: contain; flex: none; }
button.rf-gm-formato b {
    display: block;
    font-family: var(--rf-font-display, inherit);
    font-size: 12.5px;
    letter-spacing: .04em;
}
button.rf-gm-formato small { display: block; font-size: 10.5px; color: var(--rf-mu, #8e9cab); }
button.rf-gm-rosso b { color: #e08379; }
button.rf-gm-formato.rf-gm-oro b { color: #e0b464; }

/* Sul telefono una colonna sola.
   A due colonne dentro un modale largo ~340px le schede restano sotto i 165px:
   il titolo va a capo, il sottotitolo prende tre righe, e la filigrana non ha
   spazio per farsi vedere. Una sotto l'altra ognuna ha la larghezza intera —
   si legge il titolo, ci sta la frase, e la mascotte si riconosce.
   Soglia a 640px (la `sm` di Tailwind, che e' quella usata nel resto del
   progetto) e non a 380: anche un telefono largo e' stretto per due colonne. */
@media (max-width: 640px) {
    .rf-gm-griglia, .rf-gm-formati { grid-template-columns: 1fr; }
    button.rf-gm-carta { min-height: 72px; }
    img.rf-gm-filigrana { width: 120px; right: -16px; bottom: -6px; }
}


/* ==========================================================================
   CT Segmenter: la vista del ricalco
   ========================================================================== */

.rf-seg-esito {
    position: absolute;
    left: 50%; top: 14px;
    transform: translateX(-50%);
    display: flex; align-items: baseline; gap: 12px;
    padding: 8px 16px;
    background: rgba(10, 13, 17, .88);
    border: 1px solid var(--rf-line, #28323d);
    border-radius: 12px;
    z-index: 5;
}
.rf-seg-voto  { font-size: 26px; font-weight: 700; color: #5fbf8a; line-height: 1; }
.rf-seg-dice  { font-size: 12px; color: var(--rf-mu, #8e9cab); font-variant-numeric: tabular-nums; }
.rf-seg-punti { font-size: 15px; font-weight: 600; color: #d6a34a; }

.rf-seg-comandi {
    display: flex; gap: 10px; justify-content: center;
    padding: 10px 14px 16px;
}
button.rf-seg-btn {
    flex: 1; max-width: 190px;
    padding: 11px 14px;
    font-family: var(--rf-font-display, inherit);
    font-size: 13px; letter-spacing: .06em;
    color: var(--rf-ink, #e2e9f1);
    background: var(--rf-flat, #1b222b);
    border: 1px solid var(--rf-line, #28323d);
    border-radius: 12px;
    cursor: pointer;
}
button.rf-seg-btn:disabled { opacity: .38; cursor: default; }
button.rf-seg-btn-primario {
    background: rgba(75, 184, 216, .16);
    border-color: rgba(75, 184, 216, .5);
    color: #7fd0e8;
}

/* Il prompt e la fine partita: classi proprie invece di riusare quelle di
   CT Anatomy. Il primo giro ne avevo usate alcune che NON esistevano
   (`rf-anat-hud`, `rf-anat-fine-box`): il markup c'era, il CSS no, e la
   schermata usciva senza HUD e senza errori da nessuna parte. Meglio un
   namespace proprio che indovinare nomi altrui. */
.rf-seg-prompt {
    text-align: center; padding: 10px 16px 6px;
}
.rf-seg-prompt-eti {
    display: block; font-size: 11px; letter-spacing: .18em;
    color: var(--rf-mu, #8e9cab); text-transform: uppercase;
}
.rf-seg-prompt-nome {
    display: block; font-family: var(--rf-font-display, inherit);
    font-size: clamp(20px, 4vw, 28px); font-weight: 700;
    color: var(--rf-ink, #e2e9f1); line-height: 1.2;
}

.rf-seg-fine {
    position: absolute; inset: 0; z-index: 30;
    display: grid; place-items: center;
    background: rgba(8, 11, 15, .93);
}
.rf-seg-fine-box {
    max-width: 380px; width: 90%; padding: 26px 24px;
    text-align: center;
    background: var(--rf-card, #141920);
    border: 1px solid var(--rf-line, #28323d); border-radius: 18px;
}
.rf-seg-fine-tit {
    font-family: var(--rf-font-display, inherit);
    font-size: 22px; font-weight: 700; margin: 0 0 10px;
}
.rf-seg-fine-punti {
    font-family: var(--rf-font-display, inherit);
    font-size: 46px; font-weight: 700; color: #d6a34a; line-height: 1;
}
.rf-seg-fine-sub { margin: 12px 0 0; font-size: 13.5px; color: var(--rf-mu, #8e9cab); }
.rf-seg-fine-azioni { display: flex; gap: 10px; justify-content: center; margin-top: 20px; }

/* ==========================================================================
   CT Segmenter: la barra degli strumenti, a lato della lastra
   ==========================================================================
   Icona e testo per ogni voce, come nella schermata di avvio: nessuno prova un
   gesto che non sa di avere, e un'icona sola non lo dice.

   In colonna a destra sopra i 900px, in riga sotto l'immagine sotto. MAI sopra
   la lastra — li' coprirebbe la struttura da ricalcare.
   ========================================================================== */
.rf-seg-barra {
    display: flex; flex-wrap: wrap; gap: 6px;
    justify-content: center; align-items: stretch;
    padding: 10px 16px 0;
}
button.rf-seg-voce {
    display: flex; align-items: center; gap: 9px;
    padding: 7px 11px; text-align: left;
    background: transparent; color: var(--rf-mu, #8e9cab);
    border: 1px solid var(--rf-line, #28323d); border-radius: 11px;
    cursor: pointer; font: inherit;
}
button.rf-seg-voce:hover:not(:disabled) { background: rgba(255,255,255,.03); }
button.rf-seg-voce:disabled { opacity: .35; cursor: default; }
button.rf-seg-voce.attivo {
    color: #7fd0e8; border-color: rgba(75,184,216,.55); background: rgba(75,184,216,.12);
}
button.rf-seg-voce svg { width: 18px; height: 18px; flex: none; }
button.rf-seg-voce b {
    display: block; font-size: 12px; letter-spacing: .03em;
    color: inherit; line-height: 1.25;
}
button.rf-seg-voce small { display: none; }
.rf-seg-sep { display: none; }
.rf-seg-conta {
    display: flex; align-items: center; gap: 5px;
    padding: 7px 11px; font-size: 11.5px; color: var(--rf-deb, #5d6b7a);
}
.rf-seg-conta b { color: var(--rf-ink, #e2e9f1); font-family: "IBM Plex Mono", monospace; }

@media (min-width: 900px) {
    .rf-seg-barra {
        position: absolute; right: 20px; top: 50%;
        transform: translateY(-50%);
        flex-direction: column; flex-wrap: nowrap;
        align-items: stretch; justify-content: center;
        width: 232px; padding: 0; z-index: 6;
    }
    /* Il testo lungo compare solo quando c'e' spazio: su schermo stretto la
       barra e' una riga di pulsanti e la spiegazione non ci sta. */
    button.rf-seg-voce { align-items: flex-start; padding: 9px 12px; }
    button.rf-seg-voce small {
        display: block; font-size: 10.5px; line-height: 1.35;
        color: var(--rf-deb, #5d6b7a); margin-top: 2px;
    }
    .rf-seg-sep { display: block; height: 1px; background: var(--rf-line, #28323d); margin: 4px 2px; }
    .rf-seg-conta { justify-content: flex-start; padding: 4px 12px 0; }
}

/* Il ritorno a 1x dello zoom. In basso a sinistra, lontano dagli strumenti a
   destra e dal punto dove sta il dito che disegna. */
button.rf-seg-1x {
    position: absolute; left: 12px; bottom: 12px; z-index: 7;
    min-width: 42px; padding: 6px 10px;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 12px; font-weight: 600;
    color: #7fd0e8;
    background: rgba(10, 13, 17, .82);
    border: 1px solid rgba(75, 184, 216, .5);
    border-radius: 999px; cursor: pointer;
}

/* ==========================================================================
   Scontrino di CT Segmenter: le righe in piu' rispetto alla carta comune
   ==========================================================================
   La carta (`.rf-receipt`) c'era gia' — fondo crema, inchiostro scuro,
   monospaziato, bordo seghettato, animazione di stampa. Qui si aggiunge solo
   cio' che questa modalita' ha e le altre no: la riga della misura sotto ogni
   voce, e il codice a barre.
   ========================================================================== */

/* La misura sotto la voce, rientrata come una sotto-riga di ricevuta. */
.rf-seg-rc-nota {
    display: flex; gap: 10px;
    padding-left: 26px;
    font-size: 9.5px;
    color: var(--faint, #8A867C);
    letter-spacing: .02em;
    margin: -1px 0 3px;
}
.rf-seg-rc-nota span:last-child { margin-left: auto; }
.rf-seg-rc-su { padding-left: 0; justify-content: flex-end; margin-top: -2px; }

.rf-seg-rc-totale .d,
.rf-seg-rc-totale .v { font-weight: 700; font-size: 13px; }

.rf-seg-rc-avviso {
    margin: 10px 0 0;
    padding: 6px 8px;
    border: 1px dashed var(--faint, #8A867C);
    font-size: 9px;
    line-height: 1.5;
    text-align: center;
    color: var(--faint, #8A867C);
}

/* Il codice a barre: barre vere, non un font. Un font da codice a barre
   andrebbe caricato, e se non arriva restano delle lettere. */
.rf-seg-rc-barre {
    display: flex; align-items: flex-end; justify-content: center;
    gap: 2px; height: 38px; margin: 14px 0 4px;
}
.rf-seg-rc-barre i { display: block; height: 100%; background: var(--tint, #2B2A26); }

/* La nota sotto il titolo del modale di scelta. */
.rf-sheet-nota {
    margin: -6px 0 14px;
    font-size: 12px;
    color: var(--rf-mu, #8e9cab);
}

/* ==========================================================================
   La stampa dello scontrino
   ==========================================================================
   `rf-print` faceva scivolare la carta dall'alto: un movimento solo, morbido,
   che legge come "un pannello che compare". Una stampante termica non fa cosi'
   — spinge la carta A SCATTI, una riga per volta, e la carta esce da una
   fessura.

   TRAPPOLA, e ci sono cascato: lo scoprimento NON puo' stare sulla carta.
   `.rf-receipt` usa gia' `clip-path` per il bordo seghettato, e una seconda
   `clip-path` non si somma — la sostituisce. Animandola li', la carta perdeva
   i denti, e li perdeva per sempre perche' l'animazione e' `both`. Lo
   scoprimento va sul CONTENITORE, che di suo non ha nessun ritaglio.
   ========================================================================== */

.rf-stampa {
    position: relative;
    padding-top: 18px;                 /* lo spazio per la fessura */
}

/* la fessura della stampante: senza, la carta esce dal nulla e non si legge */
.rf-stampa::before {
    content: "";
    position: absolute;
    left: 50%; top: 4px;
    transform: translateX(-50%);
    width: min(340px, 92%);
    height: 10px;
    border-radius: 3px;
    background: linear-gradient(#12161d, #05070a 60%, #0b0f15);
    box-shadow: 0 3px 10px rgba(0, 0, 0, .7), inset 0 -2px 3px rgba(0, 0, 0, .9);
    z-index: 3;
}

/* Il bonus velocita': oro, che e' il colore del premio in tutto il gioco, e
   staccato dai punti perche' e' un'altra cosa — quelli li ha guadagnati la
   precisione, questo la mano. */
.rf-seg-veloce {
    color: var(--rf-gold);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .04em;
}
.rf-seg-rc-veloce {
    display: flex;
    color: #8A867C;
}
.rf-seg-rc-veloce .fine { margin-left: auto; }

/* La bocca della stampante.
   Ritaglia SOLO in alto: la carta parte sopra il bordo e scende dentro. Ai
   lati e in basso si lascia sfogo (-40px), perche' li' c'e' l'ombra della
   carta e un ritaglio secco la taglierebbe di netto.
   `clip-path` e non `overflow: hidden`: quello farebbe di questo elemento un
   contenitore di scorrimento e costringerebbe l'altro asse ad `auto` — la
   trappola gia' pagata su `html`/`body`. */
.rf-stampa-tunnel {
    display: flex;
    justify-content: center;
    width: 100%;
    clip-path: inset(0 -40px -40px -40px);
}

/* La carta SCENDE, non si scopre.
   Prima era una `clip-path` che si apriva: il risultato somiglia in un
   fermo immagine, ma il movimento non c'e', e dal vivo si legge come un
   pannello che compare invece che come carta che esce. Trenta scatti: meno
   si contano a occhio, molti di piu' tornano a sembrare fluidi. */
.rf-stampa .rf-receipt {
    animation: rf-trascina 2.1s steps(30, end) both;
}
@keyframes rf-trascina {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0); }
}

/* Chi ha chiesto meno movimento vede la carta gia' stampata. */
@media (prefers-reduced-motion: reduce) {
    .rf-stampa .rf-receipt { animation: none; }
}


/* =====================================================
   Com'e' finito il torneo
   Il badge e' l'eroe, come nella storia da condividere:
   e' l'oggetto che uno vuole vedere e mostrare. Il resto
   e' contorno e sta scritto piu' piccolo.
   ===================================================== */
.rf-esito {
  width: 100%;
  max-width: 380px;
  background: var(--rf-card);
  border: 1px solid var(--rf-line);
  border-radius: 18px;
  padding: 26px 24px 20px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
}

.rf-esito-occhiello {
  font-family: var(--rf-font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--rf-gold);
  margin-bottom: 6px;
}

.rf-esito-nome {
  font-family: var(--rf-font-ui);
  font-size: 20px;
  font-weight: 700;
  color: var(--rf-ink);
  margin: 0 0 18px;
  line-height: 1.2;
}

/* L'alone prende il colore del posto. Sotto il podio resta neutro: un alone
   dorato su un diciassettesimo posto sarebbe una presa in giro. */
.rf-esito-badge {
  width: 148px;
  height: 148px;
  margin: 0 auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(142, 156, 171, .16), transparent 70%);
}
.rf-esito-badge.p1 { background: radial-gradient(circle, rgba(224, 179, 65, .30), transparent 70%); }
.rf-esito-badge.p2 { background: radial-gradient(circle, rgba(196, 205, 215, .26), transparent 70%); }
.rf-esito-badge.p3 { background: radial-gradient(circle, rgba(196, 129, 74, .26), transparent 70%); }

.rf-esito-badge img {
  width: 132px;
  height: 132px;
  object-fit: contain;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .5));
}

/* Il ripiego quando il torneo non ha badge: senza, resterebbe un buco
   proprio dove l'occhio va per primo. */
.rf-esito-coccarda {
  font-family: var(--rf-font-ui);
  font-size: 44px;
  font-weight: 800;
  color: var(--rf-mu);
}

.rf-esito-badge-nome {
  font-size: 13px;
  font-weight: 600;
  color: var(--rf-ink);
  margin-bottom: 16px;
}

.rf-esito-riga {
  display: flex;
  justify-content: center;
  gap: 26px;
  padding: 14px 0;
  border-top: 1px solid var(--rf-line);
  border-bottom: 1px solid var(--rf-line);
  margin-bottom: 18px;
}
.rf-esito-riga b {
  display: block;
  font-family: var(--rf-font-ui);
  font-size: 24px;
  font-weight: 700;
  color: var(--rf-ink);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.rf-esito-riga span {
  display: block;
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--rf-mu);
  margin-top: 4px;
}

.rf-esito-azioni { display: grid; gap: 8px; }

.rf-esito-btn {
  width: 100%;
  min-height: 44px;
  border-radius: 11px;
  border: 1px solid var(--rf-line);
  background: var(--rf-flat);
  color: var(--rf-ink);
  font-family: var(--rf-font-ui);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .06em;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}
.rf-esito-btn:hover { background: var(--rf-card); border-color: var(--rf-cyan); }
.rf-esito-btn:focus-visible { outline: 2px solid var(--rf-cyan); outline-offset: 2px; }

.rf-esito-btn-primario {
  background: var(--rf-gold);
  border-color: var(--rf-gold);
  color: #1A1207;
}
.rf-esito-btn-primario:hover { background: #EFC55C; border-color: #EFC55C; color: #1A1207; }

.rf-esito-btn-muto { color: var(--rf-mu); font-weight: 600; }