/* ═══════════════════════════════════════════════════════════
   NoLifeMC — strato di identità
   Si sovrappone alla base senza riscriverla. Nasce dalla ricerca
   sui siti dei server: l'obiettivo è togliere il "look generico"
   e agganciare la grafica al logo (outline nero, colori piatti).
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,700;12..96,800&display=swap');

:root{
  /* superfici: tre livelli, non un nero unico.
     Nel tema scuro l'elevazione si legge dalla luminosità, non dall'ombra */
  --s0:#141014;
  --s1:#1e181e;
  --s2:#2a222a;

  --rosso:#e01b23;        /* accento: bordi, bagliori, dettagli */
  --rosso-pieno:#a31318;  /* riempimenti: con testo crema dà 6,5:1 */
  --rosso-cupo:#7e0f13;   /* ombre solide */
  --crema:#f2e8d3;
  --inchiostro:#1a1518;

  /* raggi in scala: il 16px uguale ovunque è il segno del sito anonimo */
  --r-chip:8px;
  --r-btn:12px;
  --r-card:16px;
  --r-blocco:22px;

  /* tempi: sopra 400ms sembra lento, sotto 80ms non si percepisce */
  --t-press:100ms;
  --t-fast:150ms;
  --t-base:220ms;
  --out:cubic-bezier(0,0,.2,1);
}

/* ── TIPOGRAFIA ─────────────────────────────────────────────
   Inter ovunque è il tell numero uno del sito generato.
   Display pesante sui titoli, Inter resta per il corpo.        */
h1,h2,h3,
.page-title,.join-left h2,.modes-hd h2,.dc-head,
.btn-entra,.btn-copia,.btn-dc,.sec-card-head h2{
  font-family:'Bricolage Grotesque',Inter,sans-serif !important;
  font-weight:800;
  letter-spacing:-.02em;
}

/* ── LA LUNA COME SORGENTE DI LUCE ──────────────────────────
   Il logo ha una luna beige: la uso come luce della pagina,
   così tutto il resto sembra illuminato da lì.                 */
#hero-wrap::before{
  content:'';
  position:absolute;left:50%;top:18%;
  width:min(1100px,120vw);height:min(1100px,120vw);
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(242,232,211,.09) 0%,rgba(242,232,211,.04) 34%,transparent 66%);
  pointer-events:none;z-index:1;
}

/* ── SISTEMA "STICKER" ──────────────────────────────────────
   Il logo ha un outline nero spesso: lo estendo a sistema.
   Ombre solide, niente sfocature: è l'opposto del look AI e
   nessun altro server italiano lo usa.                          */
.btn-entra{
  background:var(--rosso-pieno) !important;
  color:var(--crema) !important;          /* 6,5:1 — prima era nero su rosso */
  border:3px solid var(--inchiostro) !important;
  border-radius:var(--r-blocco) !important;
  box-shadow:5px 5px 0 var(--inchiostro) !important;
  transition:transform var(--t-fast) var(--out),box-shadow var(--t-fast) var(--out),background-color var(--t-fast) var(--out) !important;
}
.btn-entra:hover{
  background:var(--rosso) !important;
  transform:translate(-2px,-2px) !important;
  box-shadow:7px 7px 0 var(--inchiostro) !important;
}
.btn-entra:active{
  transform:translate(2px,2px) !important;
  box-shadow:2px 2px 0 var(--inchiostro) !important;
}

.btn-copia,.btn-dc,.btn-vote,.btn-vote-feat,.btn-neg{
  background:var(--rosso-pieno) !important;
  color:var(--crema) !important;
  border:2px solid var(--inchiostro) !important;
  border-radius:var(--r-btn) !important;
  box-shadow:3px 3px 0 var(--inchiostro) !important;
  transition:transform var(--t-fast) var(--out),box-shadow var(--t-fast) var(--out) !important;
}
.btn-copia:hover,.btn-dc:hover,.btn-vote:hover,.btn-vote-feat:hover,.btn-neg:hover{
  transform:translate(-2px,-2px) !important;
  box-shadow:5px 5px 0 var(--inchiostro) !important;
  filter:none !important;
}
.btn-copia:active,.btn-dc:active,.btn-vote:active,.btn-vote-feat:active{
  transform:translate(1px,1px) !important;
  box-shadow:2px 2px 0 var(--inchiostro) !important;
}

/* card con bordo netto invece di ombre sfocate invisibili sul nero */
.join-card,.mode-card,.sec-card,.vote-card,.progress-card,.lb-card{
  background:var(--s1) !important;
  border:2px solid var(--inchiostro) !important;
  border-radius:var(--r-card) !important;
  box-shadow:4px 4px 0 rgba(26,21,24,.9) !important;
}
.mode-card{transition:transform var(--t-fast) var(--out),box-shadow var(--t-fast) var(--out) !important}
.mode-card:hover{
  transform:translate(-3px,-3px) !important;
  box-shadow:7px 7px 0 var(--inchiostro) !important;
}

/* ── GRANA ──────────────────────────────────────────────────
   Un velo di rumore al 5%: toglie la piattezza da CSS puro
   senza pesare nulla. È il trucco della stampa serigrafata.    */
body::after{
  content:'';
  position:fixed;inset:0;z-index:9998;
  pointer-events:none;opacity:.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── PUNTEGGIATURA DI SEZIONE ───────────────────────────────
   La luna del logo ridotta a pallino beige prima dei titoli:
   un solo elemento che fa da luce, da firma e da ritmo.        */
.join-left h2::before,.modes-hd h2::before{
  content:'';
  display:inline-block;vertical-align:middle;
  width:9px;height:9px;margin-right:12px;
  border-radius:50%;
  background:var(--crema);
  box-shadow:0 0 14px rgba(242,232,211,.55);
}

/* ── ROTTURA DELLA GRIGLIA ──────────────────────────────────
   Due gradi di rotazione su elementi non critici: basta questo
   a togliere l'aria da template perfetto.                      */
.dc-char{transform:rotate(-3deg)}

/* ── STATO DEL SERVER ───────────────────────────────────────
   Il componente resta visibile anche a server spento: sparire
   sembra un errore, dire "offline" è informazione.             */
#hero-players{color:var(--crema);font-weight:600}

/* ── ACCESSIBILITÀ ──────────────────────────────────────────*/
:focus-visible{outline:3px solid var(--rosso);outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  .hw{animation:none !important}
}

/* ═══ PAGINE INTERNE — struttura ══════════════════════════
   La base bloccava regolamento e votaci dentro un viewport fisso
   (html,body{overflow:hidden}) con le colonne a scorrimento interno.
   Effetto: su desktop la lista categorie si tagliava al numero 10
   su 12, e su mobile la pagina diventava inservibile.
   Qui torno a una pagina che scorre normalmente, con la barra
   laterale che resta agganciata mentre leggi.
   ═══════════════════════════════════════════════════════════ */
html, body{
  height:auto !important;
  overflow:visible !important;
  overflow-x:hidden !important;
}
.page-wrap{
  overflow:visible !important;
  height:auto !important;
  padding-bottom:64px !important;
}
.rules-layout{
  overflow:visible !important;
  align-items:start;
}
.sidebar{
  position:sticky;
  top:92px;
  max-height:calc(100vh - 120px) !important;
  overflow-y:auto !important;
}
.rules-content{
  overflow:visible !important;
  height:auto !important;
}

/* categorie: la voce attiva si legge dal riempimento, non da un bordo */
.cat-item{border-radius:var(--r-btn) !important;transition:background var(--t-fast) var(--out)}
.cat-item.active{
  background:rgba(224,27,35,.16) !important;
  border-color:var(--rosso) !important;
}
.cat-num{
  background:var(--rosso-pieno) !important;
  color:var(--crema) !important;
  border:2px solid var(--inchiostro);
  border-radius:var(--r-chip) !important;
}

/* numeri di regola e badge: stesso trattamento del resto */
.rule-n{
  background:var(--rosso-pieno) !important;
  color:var(--crema) !important;
  border:1.5px solid var(--inchiostro);
  border-radius:6px !important;
}
.rule-text strong,.warn-box strong{color:#ff7a80 !important}  /* rosso leggibile sul testo */
.warn-box{
  background:rgba(60,14,17,.5) !important;
  border:2px solid var(--rosso) !important;
  border-radius:var(--r-btn) !important;
}

/* ── liste voto non ancora configurate ──
   Meglio dichiararlo che simulare un pulsante che non porta da nessuna parte */
a[data-todo="lista-voto"]{
  opacity:.5;
  cursor:not-allowed;
  pointer-events:none;
  filter:grayscale(.4);
}
a[data-todo="lista-voto"]::after{
  content:' — da configurare';
  font-size:.7em;
  font-weight:600;
  letter-spacing:.04em;
  opacity:.85;
}

/* ── MOBILE: la barra laterale diventa una fila scorrevole ── */
@media (max-width:860px){
  .rules-layout{grid-template-columns:1fr !important;gap:14px !important}
  .sidebar{
    position:static !important;
    max-height:none !important;
    overflow-x:auto !important;
    overflow-y:visible !important;
  }
  .cat-list{flex-direction:row !important;gap:8px !important}
  .cat-item{flex:0 0 auto;white-space:nowrap}
  .cat-name{font-size:.74rem !important}
  .featured-inner{flex-direction:column !important;text-align:center}
  .chest-img{width:150px !important;height:150px !important}
  .vote-grid{grid-template-columns:1fr !important}
}

/* ── MASCOTTE DISCORD ──
   La gif ha lo sfondo bianco retinato: il GIF ammette un solo colore
   trasparente, quindi ritagliarlo lascia pulviscolo. Invece di combattere
   il formato, il rettangolo diventa una card adesivo — coerente con gli
   outline e le ombre solide del resto del sito. Niente mix-blend-mode,
   cosi' il personaggio resta del suo blu. */
.dc-char{
  background:#fdfdfd;
  border:3px solid var(--inchiostro);
  border-radius:20px;
  box-shadow:7px 7px 0 var(--inchiostro);
  transform:rotate(-3deg);
  mix-blend-mode:normal !important;
}

/* ═══ SEZIONE "COME ENTRARE" ═══
   Prima erano due campi nudi: nome server e IP, senza dire cosa farne.
   Ora ci sono i passi veri, lo stato del server e la mascotte. */

/* colonna sinistra: la mascotte fa da ancora visiva */
.join-left{position:relative}
.join-ghost{
  display:block;
  width:min(300px,80%);
  margin-top:30px;
  border-radius:var(--r-blocco);
  border:2px solid var(--inchiostro);
  box-shadow:6px 6px 0 var(--inchiostro);
  transform:rotate(-2deg);
}

/* i tre passi */
.join-steps{
  list-style:none;margin:0 0 22px;padding:0;
  display:flex;flex-direction:column;gap:11px;
}
.join-steps li{
  display:flex;align-items:center;gap:12px;
  font-size:.87rem;color:rgba(242,232,211,.72);
}
.join-steps b{color:var(--crema);font-weight:700}
.js-n{
  flex:none;width:24px;height:24px;border-radius:var(--r-chip);
  background:var(--rosso-pieno);color:var(--crema);
  border:1.5px solid var(--inchiostro);
  display:grid;place-items:center;
  font-size:.72rem;font-weight:800;
}

/* l'IP e' il campo che conta: si distingue dagli altri */
.f-box-ip{
  border-color:rgba(224,27,35,.45) !important;
  font-weight:700;
}

/* stato del server: se e' spento lo si dice, non si nasconde */
.join-status{
  display:flex;align-items:center;gap:9px;
  margin-top:18px;padding-top:16px;
  border-top:1px solid rgba(255,255,255,.07);
  font-size:.82rem;color:rgba(242,232,211,.6);
}
.js-dot{
  width:9px;height:9px;border-radius:50%;flex:none;
  background:#6b6b6b;
}
.join-status.online .js-dot{background:#3ddc84;animation:battito 2s ease-in-out infinite}
.join-status.offline .js-dot{background:var(--rosso)}
.join-status.online b{color:var(--crema)}
@keyframes battito{0%,100%{opacity:1}50%{opacity:.45}}

@media (max-width:900px){
  .join-ghost{margin-inline:auto;width:min(240px,70%)}
}

/* ═══ SCHEDA "COME ENTRARE" A TEMA ═══
   Sfondo illustrato (luna e cimitero) con una velatura scura sopra:
   l'immagine si vede, il testo resta leggibile. La velatura e' piu'
   fitta al centro, dove stanno i passi e i campi. */
.join-card{
  position:relative;
  overflow:hidden;
  background-image:
    linear-gradient(180deg,
      rgba(18,14,18,.72) 0%,
      rgba(18,14,18,.86) 42%,
      rgba(18,14,18,.92) 78%,
      rgba(18,14,18,.80) 100%),
    url('card-cimitero.jpg') !important;
  background-size:cover !important;
  background-position:center !important;
  border:2px solid var(--inchiostro) !important;
  border-radius:var(--r-blocco) !important;
  box-shadow:6px 6px 0 var(--inchiostro) !important;
}
/* i campi devono staccare dallo sfondo illustrato */
.join-card .f-box{
  background:rgba(12,9,12,.72) !important;
  backdrop-filter:blur(2px);
}
.join-card .join-card-title{position:relative;z-index:1}

/* la mascotte non serve piu' qui */
.join-ghost{display:none}

/* ═══ SCHEDA "COME ENTRARE" — rifinitura ═══
   Problemi risolti qui:
   1. la luna finiva dietro al titolo: sposto l'inquadratura verso il basso,
      cosi' esce dal riquadro e restano le lapidi, che stanno sotto al testo
   2. la velatura era uniforme e appiattiva tutto: ora e' fitta al centro
      (dove sta il testo) e leggera in basso, dove l'illustrazione respira
   3. l'IP era un campo come gli altri: e' la cosa che serve copiare,
      quindi diventa il pezzo grosso della scheda                          */
.join-card{
  background-position:center 88% !important;
  background-size:150% !important;
  background-image:
    linear-gradient(180deg,
      rgba(18,14,18,.90) 0%,
      rgba(18,14,18,.93) 55%,
      rgba(18,14,18,.66) 82%,
      rgba(18,14,18,.55) 100%),
    url('card-cimitero.jpg') !important;
  padding-bottom:30px !important;
}

/* passi piu' compatti: sono istruzioni, non contenuto da leggere */
.join-steps{gap:9px !important;margin-bottom:20px !important}
.join-steps li{font-size:.84rem !important}

/* il nome server passa in secondo piano */
.join-card .f-lbl{
  font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  opacity:.62;margin-bottom:5px;
}
.join-card .f-box{
  background:rgba(10,8,10,.66) !important;
  border:1px solid rgba(255,255,255,.09) !important;
  border-radius:var(--r-btn) !important;
  padding:11px 14px !important;
  font-size:.9rem;
}

/* l'IP: monospazio, piu' grande, bordo rosso, pulsante staccato */
.join-card .f-box-ip{
  background:rgba(8,6,8,.82) !important;
  border:2px solid rgba(224,27,35,.55) !important;
  border-radius:var(--r-card) !important;
  padding:15px 15px 15px 18px !important;
  font-family:ui-monospace,"SF Mono",Menlo,monospace !important;
  font-size:1.12rem !important;
  font-weight:700;
  letter-spacing:.01em;
  color:var(--crema) !important;
  box-shadow:0 0 24px -6px rgba(224,27,35,.45);
}
.join-card .copy-btn{
  background:var(--rosso-pieno) !important;
  color:var(--crema) !important;
  border:2px solid var(--inchiostro) !important;
  border-radius:var(--r-chip) !important;
  box-shadow:2px 2px 0 var(--inchiostro) !important;
  width:38px;height:38px;
  transition:transform var(--t-fast) var(--out),box-shadow var(--t-fast) var(--out);
}
.join-card .copy-btn:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--inchiostro) !important}
.join-card .copy-btn:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--inchiostro) !important}

/* stato del server: staccato dal resto, senza riga divisoria dura */
.join-status{
  border-top:1px solid rgba(255,255,255,.08) !important;
  margin-top:20px !important;
}

/* ═══ SCHEDA: riempire il vuoto in basso ═══
   La meta' inferiore era spazio morto e l'illustrazione non si vedeva.
   Ora l'immagine respira sotto e due informazioni utili chiudono la scheda. */
.join-card{
  background-image:
    linear-gradient(180deg,
      rgba(18,14,18,.92) 0%,
      rgba(18,14,18,.90) 48%,
      rgba(18,14,18,.58) 78%,
      rgba(18,14,18,.42) 100%),
    url('card-cimitero.jpg') !important;
  background-position:center 92% !important;
  background-size:170% !important;
}

/* due dati che servono davvero a chi sta per entrare */
.join-chips{
  display:flex;flex-wrap:wrap;gap:8px;
  margin-top:18px;
}
.chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 13px;
  border-radius:99px;
  background:rgba(10,8,10,.62);
  border:1px solid rgba(255,255,255,.11);
  font-size:.75rem;font-weight:600;
  color:rgba(242,232,211,.78);
  backdrop-filter:blur(2px);
}
.chip i{color:#ff6b70;font-size:.72rem}

/* ═══ FOOTER: era tre colonne mezze vuote ═══ */
.ft-col h5{
  font-size:.7rem !important;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(242,232,211,.5) !important;
  padding-bottom:9px;margin-bottom:13px !important;
  border-bottom:1px solid rgba(255,255,255,.07);
}

/* secondo tasto: il Discord non deve gridare quanto il negozio */
.btn-ds{
  display:flex !important;align-items:center;justify-content:center;gap:9px;
  margin-top:9px;padding:11px 16px;
  background:rgba(88,101,242,.14) !important;
  border:1px solid rgba(88,101,242,.42);border-radius:9px;
  color:#aab2ff !important;font-size:.8rem;font-weight:700;
  text-decoration:none;transition:background .15s,color .15s;
}
.btn-ds:hover{background:#5865f2 !important;color:#fff !important}

@media(max-width:760px){
  .ft-top{grid-template-columns:1fr !important;gap:30px !important}
}

/* .ft-col a{display:block} vince per specificita' su .btn-neg{display:flex}:
   senza flex il justify-content non ha effetto e la scritta resta a sinistra. */
.ft-col .btn-neg{
  display:flex !important;align-items:center;justify-content:center;
  gap:9px;padding:11px 16px;text-align:center;
}

/* ═══ VIDEO DI SFONDO (regolamento e votaci) ═══
   Le stesse riprese dell'home, gia' sfocate nel file (riprese-bg.mp4, 384 px, ~400 KB):
   il browser non deve sfocare un video a tutto schermo. Il velo scuro tiene leggibili i riquadri. */
.pg-bg-vid{
  position:fixed;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0;pointer-events:none;
  transform:translateZ(0) scale(1.06);
}
.pg-bg-ov{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse 80% 70% at 50% 35%,rgba(16,12,16,.30) 0%,rgba(16,12,16,.68) 100%),
    rgba(16,12,16,.12);
}