/* ======================================================================
   LE BARRE DELL HUB — la fascia delle schede e i comandi della partita.
   Uscite da css/rtp4.css, che aveva sfondato il proprio tetto: il contratto
   dice di dividere il file, non di alzare il numero. Il taglio non e a meta
   pagine: qui stanno i due CONTROLLI dell hub, cioe le cose che si premono.
   Quello che resta in rtp4.css e contenuto che si legge.
   ====================================================================== */

/* LA FASCIA: la scheda dove sei porta i colori del club. Non lime — quello e
   dei Punti Legenda — e non un grigio piu chiaro, che non direbbe niente.
   Il bordo mescola il secondo colore verso il primo: con societa che hanno il
   nero come secondo (il Milan) un bordo di puro --c2 sparirebbe nel fondo. */
.rtp4-nav {
  display:flex;
  gap:4px;
  margin-bottom:0}
.rtp4-nav > * {
  display:flex;
  flex:1;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:0;
  min-height:0;
  padding:11px 14px;
  border:1px solid var(--rtp4-line);
  border-radius:var(--radius-md) var(--radius-md) 0 0;
  background:transparent;
  color:var(--rtp4-muted);
  letter-spacing:.01em;
  text-transform:none;
  font:600 var(--type-corpo) var(--rtp4-reading)}
.rtp4-nav > :hover {
  filter:brightness(1.35);
  color:var(--rtp4-soft)}
.rtp4-nav .rtp4-on, .rtp4-nav .rtp4-on:hover {
  filter:none;
  border-color:color-mix(in srgb, var(--c2) 55%, var(--c1));
  background:linear-gradient(160deg, color-mix(in srgb, var(--c1) 86%, var(--ink-1000)), color-mix(in srgb, var(--c1) 48%, var(--ink-1000)));
  color:var(--rtp4-text);
  font-weight:700}
.rtp4-nav button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; box-shadow: none; border-radius: var(--radius-sm); font: inherit; padding: 0 10px; cursor: pointer; }
.rtp4-nav button svg { width: 15px; height: 15px; flex: none; opacity: .85; }
/* il testo della scheda attiva e lo stesso del bottone che gioca: il lime e
   dei Punti Legenda, qui non c entra */
.rtp4-nav button.rtp4-on { color: var(--rtp4-text); }
/* i sette attributi con P e S addosso: l'allenamento si cambia da qui */
.rtp4-attrs-train { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
/* I COMANDI DELLA PARTITA: stessa materia per tutti — stesso font, stesso
   corpo, bordo inferiore spesso, testo al centro. Cambia solo il colore, e i
   colori sono una SCALA, non quattro etichette: giochi, salti una giornata,
   salti finche non succede qualcosa, chiudi la stagione. I due salti erano
   azzurro e arancione e non dicevano niente — sono la stessa cosa a due
   misure, e adesso si legge.
   Niente lime di partenza: il lime e dei Punti Legenda. Torna solo sotto il
   dito, sul bottone che si preme davvero.
   E si ILLUMINANO al passaggio, non si spengono. */
.rtp4-actions {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px}
.rtp4-actions > .rtp4-gioca, .rtp4-actions > .rtp4-fine {
  grid-column:1 / -1}
.rtp4-button {
  min-height:50px;
  padding:12px;
  border:1px solid var(--rtp4-line);
  border-bottom-width:4px;
  border-radius:var(--radius-sm);
  background:linear-gradient(180deg, var(--surface-raised), var(--surface-content));
  color:var(--rtp4-text);
  text-align:center;
  letter-spacing:.05em;
  text-transform:none;
  font:700 var(--type-corpo) var(--rtp4-reading)}
.rtp4-button:hover:not(:disabled) {
  filter:brightness(1.3)}
.rtp4-gioca {
  min-height:58px;
  border-color:color-mix(in srgb, var(--c2) 60%, transparent);
  border-bottom-color:color-mix(in srgb, var(--c2) 90%, var(--text-primary));
  background:linear-gradient(170deg, color-mix(in srgb, var(--c1) 80%, var(--ink-1000)), color-mix(in srgb, var(--c1) 36%, var(--ink-1000)))}
.rtp4-gioca:hover:not(:disabled) {
  filter:none;
  border-color:var(--accent-brand);
  border-bottom-color:var(--accent-brand);
  background:linear-gradient(170deg, var(--accent-brand), color-mix(in srgb, var(--accent-brand) 74%, var(--ink-900)));
  color:var(--text-on-accent)}
.rtp4-salta {
  background:linear-gradient(180deg, var(--surface-interactive), var(--surface-raised));
  border-bottom-color:var(--border-strong)}
.rtp4-evento {
  background:linear-gradient(180deg, color-mix(in srgb, var(--state-warning) 22%, var(--surface-content)), var(--surface-canvas));
  border-bottom-color:var(--state-warning)}
.rtp4-fine {
  background:linear-gradient(180deg, color-mix(in srgb, var(--state-negative) 24%, var(--surface-content)), var(--surface-canvas));
  border-bottom-color:var(--state-negative)}

@media(max-width:560px) {
/* le quattro schede restano tutte visibili: una quarta fuori dallo schermo
   non la trova nessuno. L etichetta e il significato, l icona no. */
.rtp4-nav {
  gap:5px}
.rtp4-nav > * {
  padding:10px 6px;
  letter-spacing:0}
.rtp4-nav svg {
  display:none}
}