/* TikForge Status — pagina pubblica di status.tikforge.net.
   Autonomo di proposito, come game/css/hub.css: stessa palette e stessi
   font del resto del sito, ma senza caricare css/styles.css (2700 righe
   scoped su body.page-home/page-dashboard che qui non servirebbero). */

:root{
  color-scheme: dark;
  --bg: #050208;
  --bg-panel: #100918;
  --bg-panel-2: #150C20;
  --blue: #A855F7;
  --red: #7C1FD4;
  --ink: #F1E7FF;
  --muted: #B6A0CF;
  --line: rgba(214,190,245,0.10);
  --radius: 16px;

  --state-online: #2ecc71;
  --state-sviluppo: #f5c451;
  /* "Presto disponibile": annunciato ma non ancora aperto. Azzurro e non
     giallo, per distinguerlo da "in sviluppo" che è ancora più indietro. */
  --state-presto: #58b6f0;
  --state-manutenzione: #FFB020;
  --state-offline: #ef4444;
  --state-down: #ef4444;
}

*{ box-sizing: border-box; margin: 0; padding: 0; }

/* Barra di scorrimento: stessa di css/styles.css (questo foglio è autonomo,
   vedi intestazione), così la pagina non mostra quella grigia di sistema.
   Due sintassi diverse per browser diversi: scrollbar-width/scrollbar-color
   è lo standard (Firefox), ::-webkit-scrollbar la vecchia sintassi WebKit
   ancora usata da Chrome/Edge/Safari. */
/* Standard SOLO per Firefox: Chromium, se trova scrollbar-color, disegna la
   scrollbar di sistema (con le frecce) e ignora le regole WebKit qui sotto.
   Vedi il commento esteso in css/styles.css. */
@supports not selector(::-webkit-scrollbar){
  *{ scrollbar-width: thin; scrollbar-color: rgba(185,107,250,0.45) transparent; }
}
::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-button{ display: none; width: 0; height: 0; }
::-webkit-scrollbar-thumb{
  background: rgba(185,107,250,0.45); border-radius: 999px;
  border: 2px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover{ background: rgba(185,107,250,0.7); background-clip: padding-box; }
::-webkit-scrollbar-corner{ background: transparent; }

body{
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Nunito Sans', system-ui, sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
}

h1, h2, h3{ font-family: 'Baloo 2', system-ui, sans-serif; font-weight: 700; letter-spacing: -0.01em; }
a{ color: inherit; text-decoration: none; }
::selection{ background: var(--blue); color: #0E0518; }

a:focus-visible{ outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 6px; }

.wrap{ width: 100%; max-width: 900px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 420px){ .wrap{ padding: 0 18px; } }

body::before{
  content: '';
  position: fixed; inset: 0;
  background:
    radial-gradient(60% 42% at 50% 0%, rgba(168,85,247,0.20), transparent 70%),
    radial-gradient(48% 34% at 88% 12%, rgba(124,31,212,0.16), transparent 72%);
  pointer-events: none;
  z-index: 0;
}
.site-header, .status-main, .site-footer{ position: relative; z-index: 1; }

/* ------------------------------------------------------------------ header */

.site-header{ padding: 22px 0; border-bottom: 1px solid var(--line); }
.site-header .wrap{ display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.logo{ display: inline-flex; align-items: center; gap: 10px; font-family: 'Baloo 2', system-ui, sans-serif; font-weight: 700; font-size: 18px; }
.logo img{ width: 26px; height: 26px; border-radius: 7px; }
.logo:hover{ color: var(--blue); }
.header-tools{ display: flex; align-items: center; gap: 10px; }
.header-link{
  color: var(--muted); font-size: 13.5px; font-weight: 600;
  padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px;
  transition: color .2s ease, border-color .2s ease;
}
.header-link:hover{ color: var(--ink); border-color: var(--blue); }
/* Su schermo stretto i due link non ci stanno accanto al logo. Sparisce solo
   "Vai al sito", che è un doppione del logo (punta allo stesso indirizzo):
   Discord resta, perché da qui non è raggiungibile in nessun altro modo — il
   footer di questa pagina ha solo Privacy e Termini.
   La soglia è 420 e non 520 perché la misura dice che i due link stanno
   comodi fino a 360px (a 320 "Vai al sito" va a capo dentro la pillola e
   diventa alta 60px); 420 lascia un margine di sicurezza.
   Selettore con .header-tools davanti solo per il peso: più in basso il
   blocco TELEFONO rimette display:inline-flex su .header-link per dargli i
   44px di area, e a parità di specificità vincerebbe lui. */
@media (max-width: 420px){ .header-tools .header-link--extra{ display: none; } }

/* -------------------------------------------------------------------- main */

.status-main{ flex: 1; padding: 48px 0 64px; }
.status-kicker{
  display: inline-flex; padding: 6px 14px; border-radius: 999px;
  background: rgba(168,85,247,0.12); border: 1px solid rgba(168,85,247,0.3);
  font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--blue);
  margin-bottom: 18px;
}
.status-title{ font-size: clamp(26px, 4vw, 36px); letter-spacing: -0.02em; margin-bottom: 10px; }
.status-sub{ color: var(--muted); font-size: 14.5px; max-width: 60ch; margin-bottom: 36px; }

.status-groups{ display: flex; flex-direction: column; gap: 28px; }

.status-group-title{
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; color: var(--muted); margin-bottom: 12px;
}

.status-items{ display: flex; flex-direction: column; gap: 10px; }

.status-item{
  border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(168deg, rgba(30,21,48,0.6), rgba(13,10,20,0.7));
  padding: 16px 18px;
}
.status-item-top{ display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.status-item-name{ font-weight: 700; font-size: 14.5px; }
.status-item-badge{
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 700;
}
.status-item-dot{ width: 9px; height: 9px; border-radius: 50%; flex: none; }
.status-item-reason{
  margin-top: 8px; font-size: 12.5px; color: var(--muted);
}

/* Barra a celle-giorno: 30 celle, una per giorno, rossa se quel giorno ha
   avuto un disservizio che copre questa voce (diretto, o via scope
   site/platform — vedi status.js). */
.status-bar{
  display: flex; gap: 3px; margin-top: 12px;
}
.status-bar-cell{
  flex: 1; height: 20px; border-radius: 3px;
  cursor: default;
}
.status-bar-cell.is-up{ background: var(--state-online); opacity: .55; }
.status-bar-cell.is-down{ background: var(--state-down); }
/* Giorni precedenti alla pubblicazione di un gioco (`since` in status.js):
   neutri, non verdi — non c'era niente da monitorare. */
.status-bar-cell.is-pending{ background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.07); }
.status-bar-cell:hover, .status-bar-cell:focus-visible{ opacity: 1; outline: none; box-shadow: 0 0 0 2px var(--blue); }

/* Tooltip condiviso mostrato al passaggio del mouse (o al focus da tastiera)
   su un blocchetto della barra — vedi status.js showTooltip(). */
.status-tooltip{
  position: fixed; z-index: 50; max-width: 260px;
  background: linear-gradient(168deg, rgba(30,21,48,0.98), rgba(13,10,20,0.98));
  border: 1px solid rgba(168,85,247,0.35); border-radius: 10px;
  padding: 10px 12px;
  box-shadow: 0 18px 40px -16px rgba(0,0,0,0.6);
  font-size: 12.5px; line-height: 1.5; color: var(--muted);
  pointer-events: none;
}
.status-tooltip p + p{ margin-top: 2px; }
.status-tooltip-date{ color: var(--ink); font-weight: 700; margin-bottom: 2px; }

/* Barra piena gialla per i titoli "in sviluppo": vedi status.js, sostituisce
   la griglia giorno per giorno quando non c'è un servizio davvero monitorato. */
.status-bar-dev{
  margin-top: 12px; padding: 5px 10px; border-radius: 6px;
  background: rgba(245,196,81,0.16); border: 1px solid rgba(245,196,81,0.4);
  color: var(--state-sviluppo); font-size: 11.5px; font-weight: 700; text-align: center;
}

/* ------------------------------------------------------------------ footer */

.site-footer{ padding: 26px 0 34px; border-top: 1px solid var(--line); }
.site-footer .wrap{ display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; }
.footer-copy{ color: var(--muted); font-size: 12.5px; opacity: .8; }
.footer-links{ display: flex; flex-wrap: wrap; gap: 18px; }
.footer-links a{ color: var(--muted); font-size: 12.5px; }
.footer-links a:hover{ color: var(--ink); }

/* ====================================================================
   TELEFONO
   Tutto quello che riguarda lo schermo piccolo sta qui in fondo: così
   vince sulla cascata senza !important e il desktop non lo attraversa
   mai.
   ==================================================================== */

@media (max-width: 760px){
  /* Bersagli tattili: erano fra i 19 e i 28px di altezza, sotto i 44 chiesti
     da HIG/WCAG 2.5.5. Si allarga l'area sensibile, non la grafica: min-height
     su elementi che diventano inline-flex, così il testo resta centrato e le
     dimensioni disegnate non cambiano. L'imbottitura dell'header scende da 22
     a 14 per compensare il logo che passa da 28 a 44: l'header resta alto
     uguale. */
  .site-header{ padding: 14px 0; }
  .logo{ min-height: 44px; }
  .header-link{ min-height: 44px; display: inline-flex; align-items: center; }

  /* Toglie l'attesa di ~300ms con cui il browser verifica se il tap è il primo
     di un doppio tap per zoomare. */
  .logo, .header-link, .footer-links a, .status-bar-cell{ touch-action: manipulation; }

  .status-kicker{ font-size: 12px; }
  .status-bar-dev{ font-size: 12px; }

  /* min-height:100% non attacca perché <html> non ha un'altezza dichiarata:
     finché il backend non risponde la pagina è quasi vuota e il footer resta
     a mezzo schermo — ed è proprio la schermata che si vede per prima con una
     connessione lenta. dvh e non vh: su iOS e Android vh misura la finestra
     con la barra degli indirizzi ritirata, quindi 100vh sporge sempre di una
     sessantina di pixel. */
  body{ min-height: 100vh; min-height: 100dvh; }

  /* La barra dei 30 giorni è l'unica cosa di questa pagina che col dito non si
     riusciva a usare: le celle sono per forza strette (trenta in fila dentro
     360px), quindi l'unica dimensione su cui si può guadagnare è l'altezza.
     A 30px il polpastrello prende comunque la colonna giusta, o una vicina, e
     il tooltip parte al tocco come parte al passaggio del mouse. */
  .status-bar{ gap: 2px; margin-top: 14px; }
  .status-bar-cell{ height: 30px; border-radius: 2px; }

  /* Il tooltip è posizionato da status.js con i pixel della finestra: qui gli
     si impedisce di essere più largo dello schermo, altrimenti la formula che
     lo tiene dentro (min/max a 8px) non ha margine con cui lavorare. */
  .status-tooltip{ max-width: min(260px, calc(100vw - 24px)); }

  /* Footer: copyright sopra e link sotto. Andavano già a capo da soli, ma
     appiccicati; e ogni link era un bersaglio alto 19px. */
  .site-footer .wrap{ flex-direction: column; align-items: stretch; gap: 10px; }
  .footer-links{ gap: 0 18px; }
  .footer-links a{ min-height: 44px; display: inline-flex; align-items: center; }
}

@media (max-width: 520px){
  /* Ogni pixel tolto ai fianchi della scheda finisce nelle celle della barra,
     che a 320px di finestra ne misuravano poco più di cinque. */
  .status-item{ padding: 14px; }
  .status-main{ padding: 32px 0 48px; }
  .status-sub{ margin-bottom: 26px; }
  .status-groups{ gap: 22px; }

  /* Nome del servizio e badge di stato: su una riga sola si comprimerebbero a
     vicenda quando il motivo è lungo ("Vertical Parkour" + "In manutenzione"
     riempiono già tutta la riga a 320px). Se non ci stanno, il badge scende. */
  .status-item-top{ flex-wrap: wrap; row-gap: 4px; }

  /* "Privacy" da solo è un bersaglio largo 40px: in due colonne diventa mezza
     larghezza di schermo, senza allungare il footer in una colonna di righe
     quasi vuote. */
  .footer-links{ display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
  .footer-links a{ display: flex; }
}