/* MythicOlbia v4 — "Notte sull'isola". Base scura coi colori Mythic della v3 (i token stanno in stile.css).
   Qui: hero con illustrazione PixelLab + effetti animati, blocchi, bordi erba/pietra, staff e partner.
   Nessuna libreria. Le animazioni si spengono con prefers-reduced-motion. */

.btn-twitch { --b-bg: #6a3fd1; --b-fg: #fff; --b-3d: #3b1f85; border-color: #3b1f85; }
.sezione.alt { background: color-mix(in srgb, var(--bg-2) 82%, transparent); }
.marchio img { transition: opacity .3s; }
body.home:not(.scrolled) .marchio img { opacity: 0; }
main, .piede { position: relative; z-index: 1; }
#luci { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

/* ---------- Hero: l'illustrazione 768x300 mostrata a 2x esatti, con effetti sopra ---------- */
.hero4 { --k: 2; position: relative; isolation: isolate; overflow: hidden; background: #070a1f; color: #fff;
  padding: 26px 0 calc(300px * var(--k) - 30px); }
@media (min-width: 720px) { .hero4 { padding-top: 34px; } }
/* sfondo largo: la stessa immagine sfocata, cosi' ai lati dello schermo i colori coincidono */
.cielo4 { position: absolute; inset: -40px; z-index: -2; background: url("img/mc_porto_notte.png") center bottom / cover no-repeat;
  filter: blur(26px) brightness(.62) saturate(1.1); transform: scale(1.1); }
.cielo4::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #070a1f 0%, #070a1f 50%, rgba(7, 10, 31, 0) 82%); }
.scena { position: absolute; left: calc(50% - 700px); bottom: 0; width: calc(768px * var(--k)); height: calc(300px * var(--k)); z-index: -1;
  image-rendering: pixelated; pointer-events: none; }
@media (min-width: 720px) {
  .scena { left: 50%; transform: translateX(-50%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); }
}
.scena::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(70px * var(--k)); z-index: 3; pointer-events: none;
  background: linear-gradient(180deg, #070a1f 0%, rgba(7, 10, 31, 0) 100%); }
.l { position: absolute; inset: 0; background-repeat: no-repeat; background-size: 100% 100%; image-rendering: pixelated; }
.l-base { background-image: url("img/mc_porto_notte.png"); }
.l-stelle.sa { background-image: url("img/scena_stelle_a.png"); animation: brilla 3.4s ease-in-out infinite; }
.l-stelle.sb { background-image: url("img/scena_stelle_b.png"); animation: brilla 3.4s ease-in-out -1.7s infinite; }
.l-scint.sca { background-image: url("img/scena_scintille_a.png"); animation: onda 2.4s steps(1) infinite; }
.l-scint.scb { background-image: url("img/scena_scintille_b.png"); animation: onda 2.4s steps(1) -1.2s infinite; }
.l-bagliore { inset: auto; left: calc(450px * var(--k)); top: calc(-23px * var(--k)); width: calc(220px * var(--k)); height: calc(200px * var(--k));
  background: radial-gradient(circle, rgba(200, 215, 255, .38) 0%, rgba(150, 120, 255, .16) 42%, transparent 68%); mix-blend-mode: screen;
  animation: pulsa 7s ease-in-out infinite; }
.l-faroluce { inset: auto; left: calc(282px * var(--k)); top: calc(31px * var(--k)); width: calc(46px * var(--k)); height: calc(42px * var(--k));
  background: radial-gradient(circle, rgba(255, 240, 170, .75), transparent 68%); mix-blend-mode: screen; animation: faro 5s ease-in-out infinite; }
.l-lanterna { inset: auto; width: calc(44px * var(--k)); height: calc(44px * var(--k));
  background: radial-gradient(circle, rgba(255, 214, 120, .6), transparent 68%); mix-blend-mode: screen; animation: tremola 2.2s steps(1) infinite; }
.l-lanterna.la1 { left: calc(330px * var(--k)); top: calc(221px * var(--k)); }
.l-lanterna.la2 { left: calc(700px * var(--k)); top: calc(221px * var(--k)); animation-delay: -.9s; }
.l-lanterna.la3 { left: calc(20px * var(--k)); top: calc(240px * var(--k)); animation-delay: -1.4s; }
.l-cadente { inset: auto; left: calc(140px * var(--k)); top: calc(16px * var(--k)); width: calc(34px * var(--k)); height: calc(2px * var(--k));
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff); opacity: 0; transform: rotate(22deg); transform-origin: 100% 50%; animation: cadente 14s linear infinite; }
.lucciole { position: absolute; inset: 0; width: 100%; height: 100%; }
.scena .cast { position: absolute; left: 0; right: 0; bottom: calc(8px * var(--k)); height: 0; min-height: 0; margin: 0; display: block; order: 0; z-index: 2; pointer-events: none; }
.scena .cast img { position: absolute; bottom: 0; width: auto; height: auto; max-width: none; image-rendering: pixelated; filter: drop-shadow(0 4px 0 rgba(8, 4, 30, .4)); animation: respira 2.4s steps(2, jump-none) infinite alternate; }
.scena .cast { bottom: calc(5px * var(--k)); }
.cast .c1 { left: calc(285px * var(--k) + 120px); }
.cast .c2 { left: calc(285px * var(--k)); animation-delay: -1.2s; }
.cast .fumetto { display: none; }
@media (min-width: 720px) {
  .cast .c1 { left: calc(574px * var(--k)); }
  .cast .c2 { left: calc(60px * var(--k)); }
  .cast .fumetto { display: block; position: absolute; top: auto; bottom: 362px; left: calc(560px * var(--k)); transform: none; }
}

@keyframes brilla { 0%, 100% { opacity: .12; } 50% { opacity: 1; } }
@keyframes pulsa { 0%, 100% { opacity: .7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes onda { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes faro { 0%, 10% { opacity: .35; } 25%, 45% { opacity: 1; } 60%, 100% { opacity: .35; } }
@keyframes tremola { 0% { opacity: 1; } 30% { opacity: .65; } 55% { opacity: .95; } 80% { opacity: .75; } }
@keyframes respira { 0% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes fluttua { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes cadente { 0%, 3% { opacity: 0; translate: 0 0; } 4% { opacity: 1; } 9% { opacity: 0; translate: calc(var(--k) * 150px) calc(var(--k) * 60px); } 100% { opacity: 0; translate: calc(var(--k) * 150px) calc(var(--k) * 60px); } }

/* testo dell'hero (sempre su cielo scuro: colori fissi, quelli del logo) */
.hero4-testo { position: relative; z-index: 2; text-align: center; display: flex; flex-direction: column; align-items: center; }
.hero4 .badge-riga { justify-content: center; }
.hero4 .badge { background: rgba(7, 10, 26, .62); color: #fff; border-color: rgba(255, 255, 255, .28); }
.hero4 .badge.vivo { color: #7ff2c4; }
.hero4 h1 { margin: 6px 0 4px; }
.hero4 h1 img { width: min(290px, 68vw); display: block; margin-inline: auto; filter: drop-shadow(0 4px 0 rgba(4, 4, 24, .55)); }
.hero4 .slogan { font-size: clamp(1.2rem, .95rem + 1.4vw, 1.9rem); font-weight: 900; margin: 2px 0 6px; }
.hero4 .sotto { font-size: .98rem; margin-bottom: 12px; }
.riga-hero { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; justify-content: center; margin-bottom: 10px; }
.riga-hero .ip-card { margin: 0; }
.hero4 .stato { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 8px; margin: 2px 0 0; }
.hero4 .stato .badge { padding: 4px 8px; font-size: .74rem; }
.hero4 .stato .punto { margin-left: 6px; }
.scena::before { height: calc(36px * var(--k)); }
.hero4 .grad { background-image: linear-gradient(100deg, #22d3ee 0%, #818cf8 40%, #c084fc 70%, #f472b6 100%); filter: drop-shadow(0 2px 0 rgba(4, 4, 24, .6)); }
.hero4 .sotto { color: #e6e9ff; max-width: 60ch; margin: 0 auto 14px; text-shadow: 0 1px 6px rgba(4, 4, 24, .9); }
.hero4 .ip-card { background: rgba(7, 10, 26, .74); backdrop-filter: blur(6px); border-color: #ffcf5c; text-align: left; margin: 0 auto 14px; max-width: 100%; }
.hero4 .ip-card .etichetta, .hero4 .ip-card .dett { color: #b8c0ea; }
.hero4 .ip-card .ip { color: #fff; }
.hero4 .stato { color: #d6dbf7; text-shadow: 0 1px 4px rgba(4, 4, 24, .9); }
.hero4 .stato .punto { background: #7ff2c4; box-shadow: 0 0 0 3px rgba(127, 242, 196, .25); }
.riga-btn.centro { justify-content: center; }

/* bordi del mondo: erba sotto l'hero, pietra sopra il piede */
.bordo-erba { height: 32px; background: url("img/bordo_erba.png") repeat-x 0 0 / 32px 32px; image-rendering: pixelated; margin-top: -1px; position: relative; z-index: 2; }
.bordo-pietra { height: 32px; background: url("img/bordo_pietra.png") repeat-x 0 0 / 32px 32px; image-rendering: pixelated; margin-top: 56px; position: relative; z-index: 2; }

/* numeri + blocchi */
.spazio-su { margin-top: 44px; }
.numero { background: color-mix(in srgb, var(--surface) 92%, transparent); }
.scheda.blocco { padding-top: 14px; }
.bl { display: block; width: 64px; height: 96px; margin: -4px 0 -22px; image-rendering: pixelated; animation: fluttua 4s ease-in-out infinite; }
.griglia > .blocco:nth-child(2) .bl { animation-delay: -1s; } .griglia > .blocco:nth-child(3) .bl { animation-delay: -2s; } .griglia > .blocco:nth-child(4) .bl { animation-delay: -3s; }
.bl-s { flex: none; width: 48px; height: 72px; margin: -6px 0 -14px; image-rendering: pixelated; animation: fluttua 4.5s ease-in-out infinite; }
.elenco-mondo li:nth-child(2) .bl-s { animation-delay: -1.1s; } .elenco-mondo li:nth-child(3) .bl-s { animation-delay: -2.2s; } .elenco-mondo li:nth-child(4) .bl-s { animation-delay: -3.3s; }
.scheda { transition: transform .18s var(--ease), box-shadow .18s; }
.scheda.blocco:hover { transform: translateY(-4px); }
.mondo-arte { background-image: url("img/mc_villaggio.png"); aspect-ratio: 768 / 300; background-position: center; background-size: 100% 100%; }
.mondo-arte img { bottom: 3%; }
.mondo-arte .m1 { left: 36%; width: 11%; } .mondo-arte .m2 { left: 52%; width: 8%; }
.mondo-arte figcaption { content: ""; }

/* staff e partner */
.ruolo-admin { color: var(--magenta); border-color: var(--magenta); }
.ruolo-dev { color: var(--gold); border-color: var(--gold); }
.ruolo-staff { color: var(--cyan); border-color: var(--cyan); }
.ruolo-owner { color: #ff5b5b; border-color: #ff5b5b; }
:root[data-tema-attivo="light"] .ruolo-owner { color: #b3261e; border-color: #b3261e; }
.ruolo-helper { color: var(--ok); border-color: var(--ok); }
.creator { display: flex; gap: 16px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); }
.creator img { flex: none; width: 76px; height: auto; image-rendering: pixelated; }
.creator h3 { margin: 0 0 8px; overflow-wrap: anywhere; }
.creator .handle { display: block; margin-top: 8px; font: 650 .82rem/1.2 var(--mono); color: var(--muted); }

/* skin grandi e riconoscibili: figure intere a misura intera (ogni pixel di skin = 8 o 12 px) */
.owner-card { flex-direction: column; text-align: center; gap: 12px; padding: 22px 18px; }
.owner-card img { width: auto; height: auto; max-width: none; }
@media (min-width: 560px) { .owner-card { flex-direction: row; text-align: left; gap: 22px; padding: 22px 28px 22px 22px; } }
.persona-card { padding: 20px 10px 16px; gap: 10px; }
.persona-card img { width: auto; height: auto; max-width: 100%; }
.creator { gap: 18px; padding: 18px 18px 18px 14px; }
.creator img { width: auto; height: auto; max-width: 132px; }
.banda.con-skin img { position: absolute; right: 24px; bottom: -8px; width: auto; height: auto; max-width: none; display: block; }
@media (max-width: 819px) { .banda.con-skin { padding-bottom: 8px; } .banda.con-skin img { position: static; margin: 4px auto -2px; } }
@media (min-width: 820px) { .banda.con-skin { padding-right: 250px; min-height: 290px; } .banda.con-skin img { bottom: 0; } }
/* "Il mondo": riquadro a tutta larghezza con due skin grandi */
.mondo-arte { margin: 0 0 24px; }
.mondo-arte img { width: auto; height: auto; max-width: none; bottom: 3%; }
.mondo-arte .m1 { left: 33%; width: 14%; } .mondo-arte .m2 { left: 52%; width: 15%; }
@media (max-width: 719px) {
  .mondo-arte { aspect-ratio: auto; height: 300px; background-size: auto 100%; }
  .mondo-arte .m1 { left: 12%; width: 120px; } .mondo-arte .m2 { left: 50%; width: 126px; }
}
.elenco-mondo { grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) { .elenco-mondo { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .elenco-mondo { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
.elenco-mondo li { background: color-mix(in srgb, var(--surface) 90%, transparent); border: 1px solid var(--border); border-radius: 12px; padding: 14px 14px 14px 12px; }
.mondo-arte + div > p { margin-top: 22px; }
#staff { background: linear-gradient(180deg, rgba(7, 10, 31, .25) 0, var(--bg) 560px), url("img/mc_castello.png") center top / auto 600px no-repeat var(--bg); }
#staff .testa-sez h2, #staff .testa-sez .intro { color: #fff; text-shadow: 0 2px 8px rgba(4, 4, 24, .85); }
#staff .testa-sez .intro code { color: var(--text); }

/* proporzioni: ritmo verticale piu' stretto, passi in riga, un solo owner centrato */
.sezione { padding: 52px 0; }
.testa-sez { margin-bottom: 22px; }
.spazio-su { margin-top: 36px; }
.passi { grid-template-columns: 1fr; }
@media (min-width: 640px) { .passi { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) {
  .passi { grid-template-columns: repeat(5, 1fr); gap: 12px; }
  .passi li { flex-direction: column; gap: 10px; padding: 16px 14px; }
}
.staff-owner { grid-template-columns: 1fr; }
@media (min-width: 700px) { .staff-owner { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Piu' vita nello sfondo ---------- */
/* nuvole a blocchi che scorrono sul cielo dell'hero */
.l-nuvole2 { top: calc(4px * var(--k)); bottom: auto; height: calc(120px * var(--k)); background-image: url("img/scena_nuvole_cubi.png");
  background-repeat: repeat-x; background-size: auto 100%; opacity: .5; animation: scorri 200s linear infinite;
  transform: translate3d(calc(var(--mx, 0) * -6px), calc(var(--sy, 0) * -.06px), 0); }
@keyframes scorri { to { background-position-x: calc(var(--k) * -768px); } }
/* barra dell'esperienza (come in Minecraft) in alto: si riempie scorrendo la pagina */
.xp { position: fixed; top: 0; left: 0; right: 0; height: 7px; z-index: 70; background: rgba(0, 0, 0, .55); pointer-events: none; }
.xp i { display: block; height: 100%; width: 0; background: linear-gradient(180deg, #d8ff8a 0%, #8be32f 45%, #4bb81c 100%); box-shadow: 0 0 10px rgba(139, 227, 47, .7); transition: width .12s linear; }
.xp::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0, transparent calc(10% - 2px), rgba(0, 0, 0, .55) calc(10% - 2px), rgba(0, 0, 0, .55) 10%); }
/* sezioni con sfondo "vivo": immagine fissa che scorre piano (parallasse) sotto un velo scuro */
#eventi { background: linear-gradient(rgba(7, 10, 31, .84), rgba(7, 10, 31, .9)), url("img/mc_porto_notte.png") center / auto 600px fixed no-repeat #070a1f; }
#creator { background: linear-gradient(rgba(7, 10, 31, .82), rgba(7, 10, 31, .9)), url("img/mc_villaggio.png") center / auto 600px fixed no-repeat #070a1f; }
.sezione#eventi .giorno, .sezione#creator .creator { background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(3px); }
/* schede che si sollevano con un alone */
.scheda:hover, .persona-card:hover, .creator:hover, .owner-card:hover, .giorno:hover { transform: translateY(-4px); box-shadow: 0 14px 32px -14px rgba(139, 120, 255, .55), var(--shadow); }
.persona-card, .creator, .owner-card, .giorno { transition: transform .18s var(--ease), box-shadow .18s; }
.persona-card:hover img, .owner-card:hover img { animation: respira 1s steps(2, jump-none) infinite alternate; }

/* effetti d'uso */
.conf { position: fixed; width: 8px; height: 8px; z-index: 200; pointer-events: none; animation: conf .85s ease-out forwards; }
@keyframes conf { to { transform: translate(var(--dx), var(--dy)) rotate(200deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .l, .bl, .bl-s, .cast img, .conf, .persona-card:hover img, .owner-card:hover img { animation: none !important; }
  .xp { display: none; }
  .l-stelle.sb, .l-scint.scb, .l-cadente { opacity: 0; }
  #luci, .lucciole { display: none; }
}

/* ---- pacchetto 86: dati veri del server (ricerca giocatore, etichetta Bedrock, eventi di adesso) ---- */
[hidden] { display: none !important; }
.cerca-giocatore { margin-top: 28px; }
.cerca-giocatore .riga-cerca { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cerca-giocatore input { font: 700 1rem/1.2 var(--font); padding: 10px 12px; border-radius: 8px; border: 2px solid var(--border-strong); background: var(--surface); color: inherit; min-width: 0; flex: 1 1 220px; max-width: 360px; }
.cerca-giocatore ul { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cerca-giocatore ul .btn { display: inline-flex; align-items: center; gap: 8px; }
.cerca-giocatore ul .testina { width: 20px; height: 20px; }
.profilo-giocatore { margin-top: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px; }
.profilo-giocatore h3 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 6px; }
td .badge, .posto .badge { font-size: .62rem; padding: 3px 5px; vertical-align: middle; }
.eventi-ora { margin-top: 14px; }