/* =================================================================
   CHOCOLATE STARFISH — versione 2001
   Foglio di stile a sé: sito2000.html non carica quello del sito
   moderno. Larghezza fissa, tabelle, bordi in rilievo, muro taggato.
   ================================================================= */

:root{
  --arancio:  #f07a1a;
  --arancio2: #b8500a;
  --rosso:    #d02017;
  --verde:    #6dfb3a;   /* il verde dei link del 2001 */
  --nero:     #0d0b09;
  --pannello: #16120f;
  --testo:    #ded6c6;
  --grigio:   #8d8577;
  --marker:   "Permanent Marker", "Comic Sans MS", cursive;
  --impatto:  "Anton", Impact, "Arial Narrow", sans-serif;
  --sistema:  Verdana, Geneva, Arial, sans-serif;
  --macchina: "Courier New", Courier, monospace;
}

*{ box-sizing:border-box; }
[hidden]{ display:none !important; }

body{
  margin:0; padding:0 0 2rem;
  background:#100d0b url("../img/muro.svg") repeat;
  background-attachment:fixed;
  color:var(--testo);
  font-family:var(--sistema); font-size:12px; line-height:1.35;
}
body::before{           /* alone di lampione sul muro */
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(80% 60% at 50% -5%, rgba(240,122,26,.13), transparent 60%),
             radial-gradient(120% 90% at 50% 50%, transparent 40%, rgba(0,0,0,.75));
}
img{ max-width:100%; display:block; }

a{ color:#7ea9ff; text-decoration:underline; }
a:visited{ color:#c39bff; }
a:hover{ color:#fff; background:var(--rosso); }
a.finto{ cursor:default; }

.piccolo{ font-size:11px; color:var(--grigio); }
.piccolo.ok{ color:var(--verde); }
.piccolo.errore{ color:var(--rosso); }
.rosso{ color:var(--arancio); }
.centrato{ text-align:center; }

.lampeggia{ animation:lampeggia 1s steps(2) infinite; color:#ffe600; font-style:normal; }
@keyframes lampeggia{ 50%{ opacity:0 } }
@media (prefers-reduced-motion: reduce){ .lampeggia{ animation:none; } }

/* barra di scorrimento come si conviene */
*::-webkit-scrollbar{ width:16px; height:16px; }
*::-webkit-scrollbar-track{ background:#2a231d; }
*::-webkit-scrollbar-thumb{ background:var(--arancio2); border:2px outset var(--arancio); }

/* la tela dei tag sta sul muro, dietro a tutto */
.muro-tag{ position:fixed; inset:0; z-index:1; pointer-events:none; }

/* --------------------- CURSORE A BOMBOLETTA ----------------------
   Sul muro (tutto cio' che sta fuori dai bordi di .pagina) il puntatore
   diventa una bomboletta spray. Sopra i contenuti veri, e con la
   versione leggera attiva, resta il puntatore normale.
   ------------------------------------------------------------------- */
body{
  cursor:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiI+CiAgPGNpcmNsZSBjeD0iMTAiIGN5PSIzIiByPSIxIiBmaWxsPSIjZThlMWQwIiBvcGFjaXR5PSIuOSIvPgogIDxjaXJjbGUgY3g9IjYuNSIgY3k9IjUuNSIgcj0iMS40IiBmaWxsPSIjZThlMWQwIiBvcGFjaXR5PSIuOCIvPgogIDxjaXJjbGUgY3g9IjMuNSIgY3k9IjkiIHI9IjEuOCIgZmlsbD0iI2U4ZTFkMCIgb3BhY2l0eT0iLjY1Ii8+CiAgPHJlY3QgeD0iMTYuNSIgeT0iNCIgd2lkdGg9IjMiIGhlaWdodD0iNSIgcng9IjEiIGZpbGw9IiNmMDdhMWEiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIxIi8+CiAgPHJlY3QgeD0iMTQuNSIgeT0iOCIgd2lkdGg9IjExIiBoZWlnaHQ9IjYuNSIgcng9IjEuNSIgZmlsbD0iIzJhMjQxZCIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEiLz4KICA8cmVjdCB4PSIxNC41IiB5PSIxOSIgd2lkdGg9IjExIiBoZWlnaHQ9IjQuNSIgcng9IjEiIGZpbGw9IiNmMDdhMWEiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIxIi8+CiAgPHJlY3QgeD0iMTQuNSIgeT0iMTQiIHdpZHRoPSIxMSIgaGVpZ2h0PSIxNiIgcng9IjEuNSIgZmlsbD0iIzE3MTMwZiIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEiLz4KPC9zdmc+Cg==") 17 4, crosshair;
}
.pagina, .barra-stato, body.quiete{ cursor:auto; }

/* Mentre si tiene premuto per spruzzare, il trascinamento non deve
   selezionare/evidenziare in blu i testi della pagina. */
body.spruzzando{ -webkit-user-select:none; user-select:none; }

/* ============================== PAGINA ========================== */
.pagina{
  position:relative; z-index:2;
  width:min(780px, 100%); margin:0 auto; padding:0;
  background:var(--pannello);
  border:5px ridge var(--arancio2);
  box-shadow:0 0 40px rgba(0,0,0,.8);
}

.scorre{ background:var(--nero); border-bottom:3px double var(--arancio2); overflow:hidden; padding:4px 0; }
.scorre span{
  display:inline-block; white-space:nowrap; padding-left:100%;
  font-family:var(--macchina); font-size:12px; color:var(--verde);
  animation:scorri 22s linear infinite;
}
@keyframes scorri{ to{ transform:translateX(-100%) } }
@media (prefers-reduced-motion: reduce){ .scorre span{ animation:none; padding-left:0; } }

.testata{
  text-align:center; padding:1.6rem 1rem 1.2rem; overflow:hidden;
  background:linear-gradient(180deg, #241d18, #14100d);
  border-bottom:3px double var(--arancio2);
}
.sottotitolo{ font-family:var(--macchina); color:var(--arancio); margin:1.1rem 0 .3rem; letter-spacing:.08em; }
.aggiornato{ font-size:11px; color:var(--grigio); margin:0; }

.colonne{ display:flex; align-items:flex-start; gap:0; }
@media (max-width:700px){
  .colonne{ display:flex; flex-direction:column; align-items:stretch; }
  /* .colonna-sinistra, .contenuto e .spalla spariscono (display:contents):
     tutti i loro figli diretti diventano figli diretti di .colonne,
     riordinabili e nascondibili qui sotto senza toccare il markup ne'
     la vista desktop, che non passa mai da questo breakpoint. */
  .tab-mobile{ order:0; }
  .menu{ display:none; }

  /* HOME: pubblicita', concerti, trovaci anche su (in quest'ordine,
     dato dalla posizione nel markup: gli elementi con lo stesso
     "order" si dispongono secondo l'ordine con cui compaiono). */
  .blocco-pubblicita, #date, .blocco-trovaci{ order:1; }
  /* BAND E MULTIMEDIA: band, foto, video, contatti, sempre nell'ordine
     in cui compaiono nel markup. */
  #band, #foto, #video, #contatti{ order:1; }
  /* GUESTBOOK: sondaggio, poi guestbook. */
  .blocco-sondaggio{ order:1; }
  #guestbook{ order:2; }

  /* in fondo, sempre visibili qualunque sia la scheda aperta */
  .widget-visite{ order:100; }
  .orologio{ order:101; }

  /* di scheda in scheda si mostra solo il gruppo giusto */
  body:not([data-tab="home"]) .blocco-pubblicita,
  body:not([data-tab="home"]) #date,
  body:not([data-tab="home"]) .blocco-trovaci,
  body:not([data-tab="band"]) #band,
  body:not([data-tab="band"]) #foto,
  body:not([data-tab="band"]) #video,
  body:not([data-tab="band"]) #contatti,
  body:not([data-tab="guest"]) .blocco-sondaggio,
  body:not([data-tab="guest"]) #guestbook{
    display:none;
  }
}

/* ------------------------------ MENU --------------------------- */
.colonna-sinistra{
  width:148px; flex:none; padding:9px 7px; background:#100c0a;
  border-right:3px double var(--arancio2);
}
.menu-titolo{ font-family:var(--impatto); color:var(--arancio); text-align:center; margin:0 0 10px; letter-spacing:.1em; }
.menu a{
  display:block; margin-bottom:3px; padding:4px 7px; text-decoration:none;
  font-family:var(--sistema); font-size:11px; font-weight:bold; color:var(--testo);
  background:linear-gradient(180deg, #2c241d, #1a1512);
  border:2px outset #4a3c30;
}
.menu a:hover{ background:linear-gradient(180deg, var(--arancio), var(--arancio2)); color:#fff; border-style:inset; }
.menu a i{ font-size:10px; margin-left:4px; }

/* ------------------- TAB DI SEZIONE (solo mobile) -----------------
   Su schermi stretti il menu a elenco verticale sparisce e al suo
   posto ci sono tre schede: HOME, BAND E MULTIMEDIA, GUESTBOOK. Ogni
   scheda mostra solo il proprio gruppo di contenuti (vedi le regole
   su .colonne piu' sopra); ora esatta, musica e visitatori restano
   sempre visibili in fondo, qualunque scheda sia aperta.
   ------------------------------------------------------------------ */
.tab-mobile{ display:none; }
@media (max-width:700px){
  .tab-mobile{
    display:flex; flex-wrap:wrap; gap:5px; padding:8px;
    background:#100c0a; border-bottom:3px double var(--arancio2);
  }
  .tab-mobile-bottone{
    flex:1 1 auto; margin:0; padding:6px 7px; cursor:pointer; text-align:center;
    white-space:nowrap; text-decoration:none;
    font-family:var(--sistema); font-size:11px; font-weight:bold; color:var(--testo);
    background:linear-gradient(180deg, #2c241d, #1a1512);
    border:2px outset #4a3c30;
  }
  .tab-mobile-bottone[aria-pressed="true"]{
    color:#fff; border-style:inset;
    background:linear-gradient(180deg, var(--arancio), var(--arancio2));
  }
}

.widget-visite{}
@media (max-width:700px){
  .colonna-sinistra, .contenuto, .spalla{ display:contents; }
  .widget-visite{
    display:flex; flex-wrap:wrap; gap:6px;
    padding:8px 7px; background:#100c0a;
    border-top:3px double var(--arancio2); border-bottom:3px double var(--arancio2);
  }
  /* .contenuto e .spalla perdono il loro riquadro (display:contents):
     ai gruppi promossi va ridato lo spazio ai lati che avevano dal
     genitore, cosi' l'occhio non cambia rispetto a prima. */
  .blocco-pubblicita, .riquadro{ margin-left:9px; margin-right:9px; }
  .blocco-trovaci, .blocco-sondaggio, .orologio{ margin-left:9px; margin-right:9px; }
  .nota-preferiti{ display:none; }
  .a-capo-visitatore{ display:none; }
}

.riquadro-musica, .contatore{
  margin-top:14px; padding:8px; text-align:center;
  border:2px inset #4a3c30; background:#0b0908;
}
.riquadro-musica p, .contatore p{ margin:0 0 6px; font-size:10px; letter-spacing:.16em; color:var(--arancio); }
.riquadro-musica button{
  font-family:var(--sistema); font-size:11px; font-weight:bold; cursor:pointer;
  padding:4px 10px; color:#fff; background:linear-gradient(180deg, #2c241d, #1a1512);
  border:2px outset #4a3c30;
}
.riquadro-musica button:hover{ background:var(--rosso); }
.contatore span{ display:flex; gap:2px; justify-content:center; }
.contatore i{
  font-style:normal; background:#000; color:var(--verde); border:1px solid #333;
  padding:2px 4px; font-family:var(--macchina); font-size:14px;
}
.menu-nota{ margin-top:14px; font-size:10px; color:var(--grigio); text-align:center; line-height:1.7; }
@media (max-width:700px){
  /* musica e visitatori affiancati su una riga sola, piu' compatti:
     meno margine sopra e meno padding interno, cosi' il riquadro
     "widget-visite" non ha piu' aria in eccesso delle altre sezioni.
     La nota sotto va sempre a capo su una riga tutta sua
     (flex-basis:100% in un contenitore che va a capo). */
  .riquadro-musica, .contatore{ flex:1 1 130px; margin-top:0; padding:6px 4px; }
  .riquadro-musica p, .contatore p{ margin:0 0 4px; font-size:9px; }
  .contatore i{ font-size:11px; padding:1px 2px; }
  .menu-nota{ flex-basis:100%; margin-top:6px; }
}

/* --------------------------- CONTENUTO ------------------------- */
.contenuto{ flex:1; min-width:0; padding:9px; }

.riquadro{ margin-bottom:10px; border:3px ridge #4a3c30; background:#120e0c; }
.riquadro-testa{
  margin:0; padding:6px 10px; font-family:var(--impatto); font-size:1.15rem;
  letter-spacing:.06em; color:#fff; text-transform:uppercase;
  background:linear-gradient(180deg, var(--arancio), var(--arancio2));
  border-bottom:2px solid var(--nero);
}
.riquadro-testa i{ font-size:11px; margin-left:6px; }
.riquadro-corpo{ padding:8px 9px; }
.riquadro-corpo p{ margin:0 0 7px; }
.riquadro-corpo p:last-child{ margin-bottom:0; }

.costruzione{
  text-align:center; padding:10px; margin-top:12px !important;
  border:2px dashed #ffe600; color:#ffe600; background:rgba(255,230,0,.06);
}

.tabella{ width:100%; border-collapse:collapse; margin:7px 0; font-size:11px; }
.tabella th{
  background:linear-gradient(180deg, #33291f, #201a15); color:var(--arancio);
  text-align:left; padding:3px 6px; border:2px outset #4a3c30; font-size:11px; letter-spacing:.06em;
}
.tabella td{ padding:3px 6px; border:1px solid #342b23; }
.tabella tr:nth-child(even) td{ background:rgba(255,255,255,.025); }
.tabella .passata{ color:var(--grigio); text-decoration:line-through; }

.miniature{ display:flex; flex-wrap:wrap; gap:8px; }
.miniatura-bottone{
  display:block; padding:3px; background:#0b0908; border:2px outset #4a3c30; line-height:0;
  cursor:pointer;
}
.miniatura-bottone:hover, .miniatura-bottone:focus-visible{ border-style:inset; background:var(--arancio2); }
.miniatura-bottone img{ width:96px; height:96px; object-fit:cover; display:block; }
/* Su mobile, 3 foto per riga fisse invece della griglia a scorrimento
   libero: con 9 foto riempiono esattamente 3 righe. Le miniature si
   rimpiccioliscono per stare in tre nella larghezza dello schermo. */
@media (max-width:700px){
  .miniature{ display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; justify-items:center; }
  .miniatura-bottone{ padding:2px; }
  .miniatura-bottone img{ width:78px; height:78px; object-fit:cover; }
}

.modale-foto{
  position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center;
  padding:24px; background:rgba(5,4,3,.92);
}
.modale-foto img{
  max-width:min(900px, 100%); max-height:calc(100vh - 48px); object-fit:contain;
  border:4px solid #1a1512; box-shadow:0 0 0 1px #000, 0 10px 40px rgba(0,0,0,.7);
}
.modale-chiudi{
  position:absolute; top:14px; right:18px; width:34px; height:34px; font-size:20px; line-height:1;
  color:#fff; background:linear-gradient(180deg, var(--arancio), var(--arancio2));
  border:2px outset var(--arancio); cursor:pointer;
}
.modale-chiudi:active{ border-style:inset; }
@media (prefers-reduced-motion: reduce), (max-width: 480px){
  .modale-foto{ padding:10px; }
}

.modulo{ margin-top:14px; padding:10px; border:2px inset #4a3c30; background:#0b0908; }
/* Campo "trappola" per bot: invisibile per una persona, un bot che
   compila tutti i campi ci casca. */
.campo-trappola{ position:absolute; left:-5000px; width:1px; height:1px; overflow:hidden; }
.modulo p{ margin:0 0 8px; }
.modulo input, .modulo textarea{
  font-family:var(--macchina); font-size:12px; width:100%; max-width:320px;
  background:#000; color:var(--verde); border:2px inset #4a3c30; padding:4px;
}
.modulo textarea{ max-width:100%; }
.modulo button{
  font-family:var(--sistema); font-weight:bold; font-size:12px; cursor:pointer;
  padding:5px 14px; color:#fff; background:linear-gradient(180deg, var(--arancio), var(--arancio2));
  border:3px outset var(--arancio);
}
.modulo button:active{ border-style:inset; }

.firma{ padding:8px; margin-bottom:8px; border:1px dashed #4a3c30; background:rgba(255,255,255,.02); }
.firma b{ color:var(--arancio); font-family:var(--macchina); }
.firma span{ float:right; font-size:10px; color:var(--grigio); }
.firma p{ clear:both; margin:4px 0 0 !important; font-family:var(--macchina); font-size:12px; }

.busta{ font-size:3rem; margin:0 !important; animation:dondola 2.5s ease-in-out infinite; }
@keyframes dondola{ 50%{ transform:rotate(8deg) scale(1.08) } }
@media (prefers-reduced-motion: reduce){ .busta{ animation:none; } }
.grande{ font-size:1.15rem; font-family:var(--macchina); }

/* ------------------------------ PIEDE -------------------------- */
.piede{ padding:14px; border-top:3px double var(--arancio2); text-align:center; background:#100c0a; }
.bottoncini{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin:0 0 12px; }
.b31{
  width:88px; height:31px; display:grid; place-items:center; text-align:center;
  font-family:var(--sistema); font-size:8px; line-height:1.15; letter-spacing:.02em;
  color:#fff; background:#333; border:1px solid #000;
  box-shadow:inset -1px -1px 0 rgba(0,0,0,.6), inset 1px 1px 0 rgba(255,255,255,.25);
}
.b31 b{ font-size:9px; }
.b31-blu{ background:#1a3a8f; } .b31-verde{ background:#1f6b2a; }
.b31-rosso{ background:#8f1a1a; } .b31-giallo{ background:#8f7a1a; }
.piede-testo{ margin:0; font-size:10px; color:var(--grigio); line-height:1.9; }


/* =================================================================
   FASCIA IN ALTO, LINGUETTE E COLONNA DI DESTRA
   Aggiunte per avvicinarsi ai portali dell'epoca: tre colonne,
   roba dappertutto, colori che non si parlano fra loro.
   ================================================================= */

.banner{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1rem;
  padding:10px 16px; overflow:hidden;
  background:linear-gradient(180deg, #3b2a5e 0%, #2a1d45 55%, #1b1330 100%);
  border-bottom:3px solid var(--arancio);
}
.banner-online{
  justify-self:start; font-family:var(--sistema); font-size:.65rem;
  letter-spacing:.06em; text-transform:uppercase; color:#9fb0d6; line-height:1.3;
}
.banner-online b{
  display:block; font-family:var(--impatto); font-size:1.3rem; line-height:1;
  color:#7cfc6e; text-shadow:0 0 6px rgba(124,252,110,.65);
}
.banner-logo{ display:flex; align-items:center; gap:8px; margin:0; justify-self:center; }
.banner-logo img{ display:block; height:clamp(40px, 7vw, 60px); width:auto; transition:filter .15s; }
.banner-logo:hover img, .banner-logo:focus-within img{ animation:flicker-neon 1.4s linear; }
.banner-logo .stella{
  background:none; border:0; padding:2px; margin:0; cursor:pointer;
  font-size:1rem; line-height:1; color:var(--arancio); opacity:.6;
}
.banner-logo .stella:hover, .banner-logo .stella:focus-visible{ opacity:1; color:#fff; }
@keyframes flicker-neon{
  0%, 19%, 21%, 23%, 54%, 56%, 100%{
    opacity:1; filter:drop-shadow(0 0 6px rgba(240,122,26,.9)) drop-shadow(0 0 14px rgba(240,122,26,.5));
  }
  20%, 22%, 55%{ opacity:.45; filter:none; }
}
.slogan{
  margin:0; text-align:right; font-family:var(--impatto);
  font-size:clamp(.95rem, 2vw, 1.35rem); line-height:1.15;
  color:#ffe600; text-transform:uppercase; letter-spacing:.02em;
  text-shadow:2px 2px 0 #000;
  justify-self:end;
}
@media (prefers-reduced-motion: reduce){
  .banner-logo:hover img, .banner-logo:focus-within img{
    animation:none; filter:drop-shadow(0 0 8px rgba(240,122,26,.8));
  }
}
@media (max-width:700px){
  .banner{
    grid-template-columns:1fr auto 1fr; column-gap:.5rem; row-gap:4px;
    grid-template-areas:"online logo ." "slogan slogan slogan";
  }
  .banner-online{ grid-area:online; justify-self:start; text-align:left; font-size:.55rem; }
  .banner-online b{ font-size:.85rem; }
  .banner-logo{ grid-area:logo; justify-self:center; }
  .banner-logo img{ height:56px; }
  .banner-logo .stella{ display:none; }
  .slogan{ grid-area:slogan; justify-self:center; text-align:center; }
}


.riga-stato{
  margin:0; padding:3px 9px; font-size:10px; color:var(--grigio);
  background:#0b0908; border-bottom:1px solid #2a231d;
}

/* --------------------------- COLONNA DESTRA ---------------------- */
.spalla{
  width:220px; flex:none; padding:8px 7px; background:#100c0a;
  border-left:3px double var(--arancio2);
}

.orologio{
  text-align:center; padding:6px; margin-bottom:10px;
  background:linear-gradient(180deg, #2b4c9b, #1b3068); border:2px outset #4a6fc0;
}
.orologio span{
  display:block; font-family:var(--macchina); font-size:1.35rem; font-weight:bold;
  letter-spacing:.02em; color:#9dfcff; text-shadow:0 0 6px rgba(60,220,255,.6);
}
.orologio b{ display:block; font-size:9px; letter-spacing:.14em; color:#c7d6ff; }
.orologio em{
  display:block; margin-top:4px; padding-top:4px; font-style:normal;
  font-family:var(--sistema); font-size:9px; letter-spacing:.03em; color:#ffe600;
  border-top:1px solid rgba(255,255,255,.25); text-transform:uppercase;
}

.spalla-testa{
  margin:0 0 6px; padding:4px 6px; font-family:var(--impatto);
  font-size:.95rem; line-height:1; letter-spacing:.04em; color:#fff;
  background:linear-gradient(180deg, #2b4c9b, #1b3068);
  border:1px solid #4a6fc0; text-transform:uppercase;
}
.spalla-testa span{ color:#ffe600; }

/* "trovaci anche su": badge per gli strumenti di messaggistica dell'epoca */
.trovaci{ list-style:none; margin:0 0 12px; padding:0; }
.trovaci li{
  position:relative; margin-bottom:6px; padding:4px 6px 4px 34px;
  border:1px solid #2a231d; background:#0b0908;
  font-size:10px; line-height:1.4;
}
.trovaci li::before{
  content:""; position:absolute; left:6px; top:50%; translate:0 -50%;
  width:20px; height:20px; background-size:contain; background-repeat:no-repeat; background-position:center;
}
.trovaci a, .trovaci-spento{ display:block; color:inherit; text-decoration:none; }
.trovaci a:visited{ color:inherit; }
.trovaci a:hover, .trovaci a:focus-visible{ text-decoration:underline; }
.trovaci b{ display:block; color:#fff; font-weight:bold; }
/* riga social vera (instagram/mail/facebook/youtube): di proposito
   grigio spento e non nei colori standard da hyperlink, per restare
   una didascalia e non un link "vero" nell'aspetto. Su desktop sta
   sotto al nome, su mobile le sta di fianco per risparmiare altezza. */
.trovaci-sotto{
  display:block; margin-top:2px; font-size:9px; font-weight:normal;
  color:var(--grigio); overflow-wrap:anywhere;
}
@media (max-width:700px){
  .trovaci a, .trovaci-spento{ display:flex; flex-wrap:wrap; align-items:baseline; column-gap:6px; }
  .trovaci-sotto{ margin-top:0; }
}
.trovaci .msn::before{ background-image:url("../img/icona-msn.png"); }
.trovaci .icq::before{ background-image:url("../img/icona-icq.png"); }
.trovaci .napster::before{ background-image:url("../img/icona-napster.png"); }
.trovaci .myspace::before{ background-image:url("../img/icona-myspace.png"); }

.sondaggio{ margin-bottom:10px; padding:6px; border:2px inset #4a3c30; background:#0b0908; }
.sondaggio .domanda{ margin:0 0 6px; font-size:10px; color:var(--arancio); }
.sondaggio label{ display:block; font-size:11px; margin-bottom:3px; cursor:pointer; }
.sondaggio button{
  margin-top:5px; width:100%; font-family:var(--sistema); font-size:11px; font-weight:bold;
  cursor:pointer; padding:3px; color:#fff;
  background:linear-gradient(180deg, var(--arancio), var(--arancio2));
  border:2px outset var(--arancio);
}
.sondaggio button:active{ border-style:inset; }

.risultati{ margin-bottom:10px; padding:6px; border:2px inset #4a3c30; background:#0b0908; font-size:10px; }
.risultati div{ margin-bottom:5px; }
.risultati u{ display:block; text-decoration:none; color:var(--testo); }
.risultati .barra{ height:9px; background:var(--arancio); border:1px solid #000; margin-top:2px; }
.risultati .tuo u{ color:#ffe600; }

/* ------------------- IL BANNER 468x60 DEL 2001 ------------------- */
.etichetta-pub{
  margin:0 0 2px; font-size:9px; letter-spacing:.2em; color:var(--grigio);
  text-transform:uppercase;
}
.banner468{
  display:block; width:468px; max-width:100%; height:60px; margin:0 auto 10px;
  border:2px solid #000; text-decoration:none; overflow:hidden;
  background:linear-gradient(90deg, #2b4c9b, #6b2b9b 55%, var(--rosso));
  box-shadow:0 0 0 1px var(--arancio);
  display:grid; place-items:center; text-align:center;
  animation:pulsa 1.4s steps(2) infinite;
}
.banner468:hover{ background:linear-gradient(90deg, var(--rosso), var(--arancio)); }
.banner468 span{
  font-family:var(--impatto); font-size:1.05rem; line-height:1.1; color:#fff;
  text-transform:uppercase; letter-spacing:.02em; text-shadow:2px 2px 0 #000;
  padding:0 8px;
}
@keyframes pulsa{ 50%{ box-shadow:0 0 0 1px #ffe600 } }
@media (prefers-reduced-motion: reduce){ .banner468{ animation:none; } }


/* =================================================================
   AGGIUNTE DAL VADEMECUM
   Soglia con scelta, ricerca, barra di stato, mappa, easter egg,
   e una modernita' invisibile: skip link, focus, movimento ridotto.
   ================================================================= */

/* ------------------------- ACCESSIBILITA' ----------------------- */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:-999px; top:0; z-index:99;
  background:var(--arancio); color:#fff; padding:6px 14px;
  font-family:var(--sistema); font-weight:bold; font-size:12px;
}
.skip-link:focus{ left:0; }
:focus-visible{ outline:2px dotted var(--arancio); outline-offset:2px; }

/* Il movimento si spegne sia con l'impostazione di sistema, sia con
   la "versione leggera" scelta da chi visita. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}
body.quiete *, body.quiete *::before, body.quiete *::after{
  animation:none !important; transition:none !important;
}
body.quiete .scorre span{ padding-left:0; }
body.quiete .muro-tag{ display:none; }

/* ----------------------------- VIDEO ----------------------------- */
.video-griglia{ display:flex; flex-wrap:wrap; gap:10px; }
.video-cella{
  display:block; width:150px; padding:4px; text-decoration:none;
  background:#0b0908; border:2px outset #4a3c30; color:var(--testo);
}
.video-cella:hover{ border-style:inset; background:#141110; }
.video-cella b{ display:block; margin-top:5px; font-size:11px; color:#fff; font-weight:bold; }
.video-cella i{ display:block; font-size:10px; font-style:italic; color:var(--grigio); }
.video-thumb{
  position:relative; display:block; aspect-ratio:4/3; background:#000;
  border:1px solid #000; overflow:hidden;
}
.video-thumb img{ width:100%; height:100%; object-fit:cover; }
.video-play{
  position:absolute; inset:0; margin:auto; width:26px; height:26px;
  background:rgba(208,32,23,.88); border-radius:50%;
}
.video-play::after{
  content:""; position:absolute; top:50%; left:54%; translate:-50% -50%;
  border-style:solid; border-width:6px 0 6px 10px;
  border-color:transparent transparent transparent #fff;
}
.video-segnaposto{
  position:absolute; inset:0; display:grid; place-items:center;
  font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--grigio);
  background:repeating-linear-gradient(45deg, #14110e 0 8px, #1a1613 8px 16px);
}
.video-vuota{ cursor:default; }
.video-vuota:hover{ border-style:outset; background:#0b0908; }

/* --------------------------- EASTER EGG ------------------------- */
.segreto{
  margin-bottom:10px; padding:10px; text-align:center;
  border:3px double #ffe600; background:#241d05; color:#ffe600; font-size:12px;
}
.segreto p{ margin:0 0 6px; }
.segreto p:last-child{ margin:0; }
.segreto-profezia{
  padding-top:8px; margin-top:8px !important; border-top:1px dashed #6b5a00;
  color:#d8c96a; font-size:11px; font-style:italic;
}

/* ------------------------- BARRA DI STATO ----------------------- */
.barra-stato{
  position:fixed; left:0; right:0; bottom:0; z-index:60; margin:0;
  padding:3px 10px; font-family:var(--sistema); font-size:11px; color:#111;
  background:#d4d0c8; border-top:2px groove #fff;
  box-shadow:inset 1px 1px 0 #fff;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.barra-stato[hidden]{ display:none !important; }
@media (max-width:700px){ .barra-stato{ display:none; } }

/* --------------------------- PIEDE ------------------------------ */
.piede-nav{ margin:0 0 8px; font-size:11px; }