/* =========================================================
   NON SUONO MAICOL CLACSON - tema CANTIERE CARTOON
   ========================================================= */

/* ---------- Font auto-ospitate ---------- */
@font-face {
  font-family: 'Bangers';
  font-style: normal; font-weight: 400; font-display: block;
  src: url('fonts/bangers-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bangers';
  font-style: normal; font-weight: 400; font-display: block;
  src: url('fonts/bangers-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Permanent Marker';
  font-style: normal; font-weight: 400; font-display: block;
  src: url('fonts/permanent-marker-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Special Elite';
  font-style: normal; font-weight: 400; font-display: block;
  src: url('fonts/special-elite-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Special Elite';
  font-style: normal; font-weight: 400; font-display: block;
  src: url('fonts/special-elite-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root{
  --giallo:#ffcc00;
  --giallo-scuro:#e6a700;
  --nero:#1a1a1a;
  --rosso:#c0392b;
  --arancio:#e67e22;
  --mattone:#8b3a1f;
  --crema:#f4e4c1;
  --cemento:#5d5d5d;
  --cemento-chiaro:#9a9a9a;
}

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

/* Sfondo dietro tutto: sfumato nero -> giallo cantiere scuro (overscroll mobile incluso) */
html{
  background:
    linear-gradient(180deg, #1a1a1a 0%, #2a1f0a 55%, #3d2d10 100%);
  background-attachment:fixed;
  min-height:100%;
}

body{
  min-height:100vh;
  font-family:'Special Elite',monospace;
  color:#1a1a1a;
  background:
    repeating-linear-gradient(45deg,
      rgba(0,0,0,0.04) 0 12px,
      rgba(0,0,0,0) 12px 24px),
    radial-gradient(circle at 20% 10%, #d6c39a 0%, #b89866 60%, #8a7440 100%);
  overflow-x:hidden;
}

/* nastro a strisce gialle/nere (hazard tape) */
.hazard{
  height:28px;
  background:
    repeating-linear-gradient(135deg,
      #ffcc00 0 28px,
      #1a1a1a 28px 56px);
  border-top:3px solid #000;
  border-bottom:3px solid #000;
  box-shadow:0 4px 12px rgba(0,0,0,0.4);
  position:relative;
  z-index:5;
}
.hazard.fissa{position:sticky;top:0}

/* ============== NAVBAR / SCHEDE IN ALTO ============== */
.topbar{
  position:relative;
  background:
    linear-gradient(180deg,#3a2618 0%,#1f140c 100%);
  border-bottom:6px solid #000;
  padding:14px 20px 18px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  z-index:4;
}
.brand{
  display:flex;
  align-items:center;
  gap:14px;
  text-decoration:none;
}
.brand .casco{
  display:none;
}
.brand .casco::after{
  content:"MAICOL";
  position:absolute;
  bottom:6px;left:50%;
  transform:translateX(-50%);
  font-family:'Bangers',cursive;
  color:#000;
  font-size:10px;
  letter-spacing:1px;
}
.brand h1{
  font-family:'Bangers',cursive;
  color:#ffcc00;
  font-size:clamp(22px,2.8vw,36px);
  letter-spacing:2px;
  text-shadow:3px 3px 0 #000, 5px 5px 0 #c0392b;
  line-height:1;
  white-space:nowrap;
}

.nav-schede{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.scheda{
  font-family:'Bangers',cursive;
  letter-spacing:2px;
  font-size:18px;
  padding:10px 18px 12px;
  color:#1a1a1a;
  text-decoration:none;
  background:
    linear-gradient(180deg,#f4d36b 0%,#e0a72a 100%);
  border:3px solid #000;
  border-radius:6px 6px 0 0;
  position:relative;
  box-shadow:3px 3px 0 #000;
  transform:translateY(0) rotate(-1deg);
  transition:transform .18s ease, box-shadow .18s ease, background .2s;
}
.scheda:nth-child(2n){transform:rotate(1deg)}
.scheda:nth-child(3n){transform:rotate(-2deg)}
.scheda::before{
  content:"";
  position:absolute;left:8px;top:6px;
  width:8px;height:8px;border-radius:50%;
  background:#000;
  box-shadow:inset 1px 1px 0 #555;
}
.scheda:hover{
  transform:translateY(-4px) rotate(0deg) scale(1.04);
  background:linear-gradient(180deg,#ffe07a 0%,#ffb52a 100%);
  box-shadow:6px 6px 0 #000, 0 0 18px rgba(255,204,0,0.7);
}
.scheda.attiva{
  background:linear-gradient(180deg,#c0392b 0%,#7c1d10 100%);
  color:#fff;
  text-shadow:2px 2px 0 #000;
}

/* ============== MAIN PAGE: cartolina cantiere ============== */
.cartolina{
  max-width:920px;
  margin:30px auto 20px;
  padding:18px;
  background:
    repeating-linear-gradient(90deg,#6b3a1d 0 30px,#7a4421 30px 60px),
    #6b3a1d;
  border:5px solid #000;
  border-radius:10px;
  box-shadow:0 12px 0 #2b1607, 0 18px 30px rgba(0,0,0,.5);
  position:relative;
  transform:rotate(-0.6deg);
}
.cartolina::before,
.cartolina::after{
  content:"";
  position:absolute;
  width:90px;height:30px;
  background:repeating-linear-gradient(45deg,#ffcc00 0 10px,#1a1a1a 10px 20px);
  border:2px solid #000;
  top:-18px;
  transform:rotate(-6deg);
  box-shadow:2px 2px 0 #000;
}
.cartolina::before{left:-20px}
.cartolina::after{right:-20px;transform:rotate(7deg)}

.scena{
  position:relative;
  border:4px solid #000;
  border-radius:6px;
  overflow:hidden;
  background:#000;
  box-shadow:inset 0 0 0 3px #ffcc00;
}
.scena img,
.scena video{
  display:block;
  width:100%;
  height:auto;
}

/* Advisory cartello sul QR code in alto a destra */
.scena .advisory{
  position:absolute;
  top:1.5%;
  right:1.5%;
  width:17%;
  height:auto;
  z-index:2;
  border:2px solid #000;
  box-shadow:3px 3px 0 #000;
  transform:rotate(2deg);
  background:#fff;
}

/* Audio off: solo l'ingranaggio cambia aspetto. Video e animazioni continuano. */

/* hotspot social cliccabili sopra l'immagine */
.hotspot{
  position:absolute;
  border:none;
  background:transparent;
  cursor:pointer;
  border-radius:50%;
  padding:0;
  transition:transform .2s ease, filter .2s ease;
}
.hotspot::after{
  content:attr(data-label);
  position:absolute;
  left:50%; top:-32px;
  transform:translateX(-50%) rotate(-3deg);
  font-family:'Bangers',cursive;
  letter-spacing:2px;
  font-size:14px;
  color:#fff;
  background:#c0392b;
  padding:3px 10px;
  border:2px solid #000;
  border-radius:4px;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease, top .2s ease;
  box-shadow:2px 2px 0 #000;
}
.hotspot:hover{
  animation:scuoti .9s ease-in-out infinite;
  filter:drop-shadow(0 0 12px #ffcc00) drop-shadow(0 0 22px #ff6a00);
}
.hotspot:hover::after{
  opacity:1;
  top:-42px;
}
.hotspot::before{
  content:"";
  position:absolute; inset:-6px;
  border:3px dashed #ffcc00;
  border-radius:50%;
  opacity:0;
  transition:opacity .2s;
}
.hotspot:hover::before{
  opacity:1;
  animation:girotondo 3s linear infinite;
}

@keyframes scuoti{
  0%,100%{transform:translate(0,0) rotate(0)}
  20%{transform:translate(-2px,-2px) rotate(-3deg)}
  40%{transform:translate(2px,1px) rotate(2deg)}
  60%{transform:translate(-1px,2px) rotate(-2deg)}
  80%{transform:translate(2px,-1px) rotate(3deg)}
}
@keyframes girotondo{
  to{transform:rotate(360deg)}
}

/* Posizioni hotspot calibrate sull'immagine (in %) */
.hs-spotify{   left:23.7%; top:62.3%; width:14%; aspect-ratio:1; }
.hs-youtube{   left:44.1%; top:61.7%; width:14%; aspect-ratio:1; }
.hs-instagram{ left:65.8%; top:60.8%; width:14%; aspect-ratio:1; }
.hs-facebook{  left:19.5%; top:73.1%; width:14%; aspect-ratio:1; }
.hs-tiktok{    left:43.9%; top:73.5%; width:14%; aspect-ratio:1; }
.hs-bandcamp{  left:68.8%; top:74.3%; width:14%; aspect-ratio:1; }
.hs-storia{         left:20.3%; top:49.1%; width:68%; height:14%; border-radius:8px; }
.hs-contatti{       left:79.4%; top:24.5%; width:21%; height:26%; border-radius:8px; }
.hs-galleria{       left:14.0%; top:4.7%;  width:33%; height:28%; border-radius:8px; }
.hs-tracce{         left:64.0%; top:14.4%; width:13%; aspect-ratio:1; border-radius:50%; }
.hs-collaborazioni{ left:5.3%;  top:84.4%; width:14%; aspect-ratio:1; border-radius:50%; }
.hs-storia::before,
.hs-contatti::before,
.hs-galleria::before{ border-radius:8px }
/* tooltip ancorato in alto a sinistra (hotspot rettangolari di navigazione) */
.hs-storia::after,
.hs-contatti::after,
.hs-galleria::after{
  left:8px !important;
  top:8px !important;
  transform:rotate(-3deg) !important;
}
.hs-storia:hover::after,
.hs-contatti:hover::after,
.hs-galleria:hover::after{
  top:8px !important;
}

/* Hotspot di navigazione: niente rotazione, solo pulsazione orizzontale */
.hs-storia:hover,
.hs-contatti:hover,
.hs-galleria:hover,
.hs-tracce:hover,
.hs-collaborazioni:hover{
  animation:pulsaStoria .55s ease-in-out infinite alternate;
}
@keyframes pulsaStoria{
  0%   { transform:translateY(0)    scale(1);    }
  100% { transform:translateY(-3px) scale(1.03); }
}
.hs-storia:hover::before,
.hs-contatti:hover::before,
.hs-galleria:hover::before,
.hs-tracce:hover::before,
.hs-collaborazioni:hover::before{
  animation:girotondo 0s !important;
  border-color:#ffcc00;
  opacity:1;
  transform:none;
}

/* DEBUG: premi "D" per mostrare i contorni e trascinare gli hotspot */
body.debug-hotspot .hotspot{
  outline:3px dashed #ff00ff;
  background:rgba(255,0,255,.20);
  cursor:move;
  touch-action:none;
}
body.debug-hotspot .hotspot::after{
  content:attr(data-label);
  opacity:1 !important;
  top:-30px !important;
  background:#ff00ff !important;
}
#debugPanel{
  position:fixed; right:10px; top:60px;
  z-index:99999;
  background:#1a1a1a; color:#ffcc00;
  border:3px solid #ffcc00;
  padding:10px 12px;
  font-family:'Special Elite',monospace;
  font-size:12px;
  line-height:1.5;
  max-width:340px;
  box-shadow:5px 5px 0 #000;
  display:none;
  white-space:pre;
  resize:both; overflow:auto;
}
body.debug-hotspot #debugPanel{display:block}
#debugPanel h4{font-family:'Bangers',cursive;color:#ff66ff;letter-spacing:2px;margin-bottom:6px}
#debugPanel button{
  font-family:'Bangers',cursive;
  background:#ffcc00;color:#000;border:2px solid #000;
  padding:4px 8px;margin-top:8px;cursor:pointer;letter-spacing:2px;
}

/* ============== LINK EXTRA: VIBEST (in mezzo ai link sociali) ============== */
.extra-link{
  max-width:920px;
  margin:-6px auto 20px;
  display:flex;
  justify-content:center;
  padding:0 16px;
}
.vibest-btn{
  display:inline-flex;
  align-items:center;
  gap:14px;
  text-decoration:none;
  padding:14px 26px 16px;
  background:
    radial-gradient(ellipse at center, #1a0030 0%, #0a0014 80%);
  border:4px solid #000;
  border-radius:10px;
  box-shadow:
    0 0 0 3px #ffcc00 inset,
    5px 5px 0 #000;
  position:relative;
  transform:rotate(-1deg);
  transition:transform .2s ease, box-shadow .2s ease;
}
.vibest-btn:hover{
  transform:rotate(0deg) translate(-2px,-3px) scale(1.04);
  box-shadow:
    0 0 0 3px #ffcc00 inset,
    8px 8px 0 #000,
    0 0 22px rgba(200,0,255,.65);
  animation:scuoti 1s ease-in-out infinite;
}
.vibest-btn img{
  height:54px;
  width:auto;
  filter:drop-shadow(0 0 8px #c800ff) drop-shadow(0 0 18px #7a00ff);
  animation:pulsaNeon 4s ease-in-out infinite;
}
.vibest-tag{
  font-family:'Bangers',cursive;
  letter-spacing:2px;
  font-size:16px;
  color:#1a1a1a;
  background:#ffcc00;
  padding:4px 12px;
  border:2px solid #000;
  box-shadow:2px 2px 0 #000;
  transform:rotate(-2deg);
  white-space:nowrap;
}
@keyframes pulsaNeon{
  0%,100%{ filter:drop-shadow(0 0 8px #c800ff) drop-shadow(0 0 16px #ff00d4); opacity:1; }
  45%   { filter:drop-shadow(0 0 18px #ff4df0) drop-shadow(0 0 34px #c800ff); opacity:.92; }
  50%   { opacity:.55; }
  55%   { opacity:1; }
}
@media (max-width:680px){
  .vibest-btn{flex-direction:column;gap:8px;padding:12px 18px}
  .vibest-btn img{height:38px}
  .vibest-tag{font-size:14px}
}

/* ============== CARTELLI / SEZIONI INTERNE ============== */
.cantiere{
  max-width:1000px;
  margin:24px auto;
  padding:0 18px 60px;
}

.cartello{
  background:
    linear-gradient(180deg,#fff7d6 0%,#f0d987 100%);
  border:5px solid #000;
  border-radius:10px;
  padding:28px 28px 32px;
  position:relative;
  box-shadow:
    8px 8px 0 #000,
    0 0 0 4px #ffcc00 inset;
  transform:rotate(-0.4deg);
}
.cartello::before{
  content:"";
  position:absolute;
  top:-22px;left:50%;
  transform:translateX(-50%);
  width:64px;height:22px;
  background:repeating-linear-gradient(135deg,#ffcc00 0 8px,#1a1a1a 8px 16px);
  border:2px solid #000;
}
.cartello h2{
  font-family:'Bangers',cursive;
  font-size:clamp(28px,4.5vw,52px);
  color:#c0392b;
  text-shadow:3px 3px 0 #000, 6px 6px 0 #ffcc00;
  letter-spacing:3px;
  margin-bottom:18px;
  transform:rotate(-1.5deg);
  display:inline-block;
}
.cartello h3{
  font-family:'Permanent Marker',cursive;
  color:#1a1a1a;
  font-size:22px;
  margin:18px 0 10px;
  border-bottom:3px dashed #c0392b;
  padding-bottom:6px;
}
.cartello p{
  font-size:17px;
  line-height:1.6;
  margin-bottom:14px;
}
.cartello a{
  color:#c0392b;
  font-weight:bold;
  text-decoration:none;
  border-bottom:2px dotted #c0392b;
}
.cartello a:hover{background:#ffcc00}

/* timbro work in progress */
.timbro{
  position:absolute;
  top:14px;right:14px;
  border:4px solid #c0392b;
  color:#c0392b;
  font-family:'Bangers',cursive;
  letter-spacing:3px;
  padding:6px 12px;
  transform:rotate(14deg);
  opacity:.65;
  font-size:18px;
  pointer-events:none;
}

/* griglia gallery (cornici come polaroid attaccate al muro) */
.muro{
  background:
    repeating-linear-gradient(0deg, #8b3a1f 0 28px, #6b2a13 28px 30px),
    repeating-linear-gradient(90deg, #8b3a1f 0 56px, #6b2a13 56px 58px);
  border:5px solid #000;
  border-radius:8px;
  padding:30px 18px;
  box-shadow:inset 0 0 30px rgba(0,0,0,.6), 6px 6px 0 #000;
  margin-top:24px;
}
.polaroid-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:24px;
}
.polaroid{
  background:#fff;
  padding:12px 12px 36px;
  border:2px solid #000;
  box-shadow:5px 5px 0 rgba(0,0,0,0.4);
  transform:rotate(-2deg);
  transition:transform .25s ease, box-shadow .25s ease;
  position:relative;
}
.polaroid:nth-child(2n){transform:rotate(2deg)}
.polaroid:nth-child(3n){transform:rotate(-3deg)}
.polaroid:hover{
  transform:rotate(0) scale(1.05);
  box-shadow:10px 10px 0 rgba(0,0,0,0.5), 0 0 24px #ffcc00;
  z-index:3;
}
.polaroid::before{
  content:"";
  position:absolute;
  top:-12px;left:50%;
  transform:translateX(-50%) rotate(-4deg);
  width:80px;height:24px;
  background:rgba(255,255,180,.85);
  border:1px dashed rgba(0,0,0,.3);
}
.polaroid .ph{
  width:100%;aspect-ratio:1;
  background:linear-gradient(135deg,#222,#555);
  display:flex;align-items:center;justify-content:center;
  color:#ffcc00;
  font-family:'Bangers',cursive;
  font-size:48px;
  letter-spacing:2px;
  border:1px solid #000;
}
.polaroid figcaption{
  text-align:center;
  font-family:'Permanent Marker',cursive;
  margin-top:10px;
  font-size:18px;
  color:#1a1a1a;
}

/* tracce: titolo + data + pulsante allineati su colonna centrata */
.polaroid.traccia figcaption{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}
.polaroid.traccia figcaption strong{
  font-size:20px;
  letter-spacing:1px;
  line-height:1.2;
}
.polaroid.traccia figcaption span{
  font-family:'Special Elite',monospace;
  font-size:12px;
  color:#666;
  letter-spacing:1px;
}
.bottone.mini{
  font-size:14px;
  padding:6px 14px;
  letter-spacing:2px;
  margin-top:4px;
  box-shadow:3px 3px 0 #000;
}
.bottone.mini:hover{
  box-shadow:5px 5px 0 #000;
}
.bottone.mini:active{
  box-shadow:1px 1px 0 #000;
}

/* form contatti = blocco da capocantiere */
.modulo{
  display:grid;
  gap:14px;
  max-width:560px;
}
.modulo label{
  font-family:'Permanent Marker',cursive;
  font-size:16px;
}
.modulo input,
.modulo textarea{
  width:100%;
  padding:12px 14px;
  border:3px solid #000;
  background:#fffceb;
  font-family:'Special Elite',monospace;
  font-size:15px;
  box-shadow:3px 3px 0 #000;
}
.modulo input:focus,
.modulo textarea:focus{
  outline:none;
  background:#fff5b8;
  box-shadow:3px 3px 0 #000, 0 0 0 3px #c0392b;
}
.bottone{
  font-family:'Bangers',cursive;
  letter-spacing:3px;
  font-size:22px;
  padding:12px 24px;
  background:linear-gradient(180deg,#ffcc00 0%,#e0a72a 100%);
  color:#1a1a1a;
  border:3px solid #000;
  box-shadow:5px 5px 0 #000;
  cursor:pointer;
  text-decoration:none;
  display:inline-block;
  transition:transform .15s ease, box-shadow .15s ease;
}
.bottone:hover{
  transform:translate(-2px,-2px);
  box-shadow:7px 7px 0 #000;
  background:linear-gradient(180deg,#ffe07a 0%,#ffb52a 100%);
}
.bottone:active{
  transform:translate(3px,3px);
  box-shadow:2px 2px 0 #000;
}

/* lista contatti / link social */
.cassetta{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:16px;
  margin-top:20px;
}
.cassetta a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px;
  background:#1a1a1a;
  color:#ffcc00;
  border:3px solid #ffcc00;
  font-family:'Bangers',cursive;
  letter-spacing:2px;
  text-decoration:none;
  border-radius:4px;
  box-shadow:4px 4px 0 #000;
  transition:transform .15s, background .2s;
}
.cassetta a:hover{
  background:#c0392b;
  color:#fff;
  transform:translate(-2px,-2px) rotate(-1deg);
  box-shadow:6px 6px 0 #000;
}
/* link colorati con i brand delle piattaforme */
.cassetta a.vibest-link{
  background:#1a0030; border-color:#c800ff; color:#ff66ff;
  box-shadow:4px 4px 0 #000, 0 0 14px rgba(200,0,255,.5);
}
.cassetta a.vibest-link span.ico{ background:#c800ff; color:#fff; }
.cassetta a.vibest-link:hover{
  background:#3a0066; color:#fff;
  box-shadow:6px 6px 0 #000, 0 0 22px rgba(200,0,255,.85);
}

.cassetta a.email-link{
  background:#3a2618; border-color:#ffcc00; color:#ffcc00;
}
.cassetta a.email-link span.ico{ background:#ffcc00; color:#1a1a1a; }
.cassetta a.email-link:hover{
  background:#5a3a22; color:#fff;
  box-shadow:6px 6px 0 #000, 0 0 18px rgba(255,204,0,.7);
}

.cassetta a.spotify-link{
  background:#0a2a16; border-color:#1db954; color:#1ed760;
  box-shadow:4px 4px 0 #000, 0 0 14px rgba(29,185,84,.45);
}
.cassetta a.spotify-link span.ico{ background:#1db954; color:#000; }
.cassetta a.spotify-link:hover{
  background:#15532a; color:#fff;
  box-shadow:6px 6px 0 #000, 0 0 22px rgba(29,185,84,.85);
}

.cassetta a.youtube-link{
  background:#220000; border-color:#ff0000; color:#ff4d4d;
  box-shadow:4px 4px 0 #000, 0 0 14px rgba(255,0,0,.45);
}
.cassetta a.youtube-link span.ico{ background:#ff0000; color:#fff; }
.cassetta a.youtube-link:hover{
  background:#5a0000; color:#fff;
  box-shadow:6px 6px 0 #000, 0 0 22px rgba(255,0,0,.85);
}

.cassetta a.instagram-link{
  background:#1a0d1a;
  border-color:#dd2a7b;
  color:#ffd1e0;
  box-shadow:4px 4px 0 #000, 0 0 14px rgba(221,42,123,.5);
}
.cassetta a.instagram-link span.ico{
  background:linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
  color:#fff;
}
.cassetta a.instagram-link:hover{
  background:#3a1a3a; color:#fff;
  box-shadow:6px 6px 0 #000, 0 0 22px rgba(221,42,123,.8);
}

.cassetta a.facebook-link{
  background:#0a1a3a; border-color:#1877f2; color:#7eb1ff;
  box-shadow:4px 4px 0 #000, 0 0 14px rgba(24,119,242,.45);
}
.cassetta a.facebook-link span.ico{ background:#1877f2; color:#fff; }
.cassetta a.facebook-link:hover{
  background:#13316b; color:#fff;
  box-shadow:6px 6px 0 #000, 0 0 22px rgba(24,119,242,.85);
}

.cassetta a.tiktok-link{
  background:#0a0a0a; border-color:#25f4ee; color:#25f4ee;
  box-shadow:4px 4px 0 #000, 0 0 14px rgba(254,44,85,.4);
  position:relative;
}
.cassetta a.tiktok-link span.ico{
  background:#25f4ee; color:#000;
  box-shadow:2px 2px 0 #fe2c55;
}
.cassetta a.tiktok-link:hover{
  background:#1a1a1a; color:#fff;
  box-shadow:6px 6px 0 #000, 0 0 22px rgba(37,244,238,.7), -3px -3px 12px rgba(254,44,85,.6);
}

.cassetta a.bandcamp-link{
  background:#0d2630; border-color:#629aa9; color:#9ec7d4;
  box-shadow:4px 4px 0 #000, 0 0 14px rgba(98,154,169,.45);
}
.cassetta a.bandcamp-link span.ico{ background:#629aa9; color:#fff; }
.cassetta a.bandcamp-link:hover{
  background:#1c4a5a; color:#fff;
  box-shadow:6px 6px 0 #000, 0 0 22px rgba(98,154,169,.85);
}
.cassetta a span.ico{
  width:28px;height:28px;
  background:#ffcc00;
  color:#1a1a1a;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:'Bangers',cursive;
}

/* footer */
.footer{
  background:#1a1a1a;
  color:#ffcc00;
  text-align:center;
  padding:18px 12px 22px;
  font-family:'Special Elite',monospace;
  border-top:5px solid #000;
}
.footer small{display:block;color:#aaa;margin-top:6px}
.footer small .diritti{font-size:0.85em;color:#888;letter-spacing:1px;margin-left:6px}
.footer small.creato-da{
  font-size:11px;
  color:#666;
  letter-spacing:1px;
  margin-top:8px;
}
.footer small.creato-da a{
  color:#c800ff;
  text-decoration:none;
  font-weight:bold;
  text-shadow:0 0 6px rgba(200,0,255,0.5);
  border-bottom:1px dotted #c800ff;
}
.footer small.creato-da a:hover{
  color:#ff66ff;
  text-shadow:0 0 10px rgba(255,102,255,0.9);
}

/* gru + ingranaggio animati */
.gru{
  position:fixed;
  right:10px; bottom:-4px;
  width:120px;height:160px;
  pointer-events:none;
  z-index:10;
  opacity:.6;
}
.gru::before{
  content:"🏗️";
  font-size:120px;
  position:absolute;bottom:0;right:0;
  animation:dondola 4s ease-in-out infinite;
  transform-origin:bottom center;
}
@keyframes dondola{
  0%,100%{transform:rotate(-4deg)}
  50%{transform:rotate(4deg)}
}

/* Ingranaggio decorativo (storia/galleria/tracce/contatti/collaborazioni) */
.ingranaggio{
  position:fixed;
  left:8px; bottom:8px;
  font-size:60px;
  animation:girotondo 8s linear infinite;
  opacity:.4;
  z-index:10;
  pointer-events:none;
}

/* Cassa audio: dentro .scena in alto a sinistra del video */
.cassa-audio{
  position:absolute;
  left:2%; top:2%;
  font-size:38px;
  line-height:1;
  opacity:.85;
  z-index:3;
  cursor:pointer;
  border:none;
  background:rgba(0,0,0,0.35);
  border-radius:50%;
  padding:6px 8px;
  transition:opacity .2s, transform .2s, background .2s;
}
.cassa-audio .icona{
  display:inline-block;
  position:relative;
  width:1em; height:1em;
  text-align:center;
}
.cassa-audio:hover{ opacity:1; transform:scale(1.08); background:rgba(0,0,0,0.55); }
.cassa-audio .tip{
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  background:#1a1a1a;
  color:#ffcc00;
  font-family:'Bangers',cursive;
  letter-spacing:2px;
  font-size:13px;
  padding:4px 10px;
  border:2px solid #ffcc00;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s;
  margin-top:6px;
}
.cassa-audio:hover .tip{ opacity:1 }
/* X rossa simmetrica (2 linee crociate) sopra la cassa quando audio OFF */
.cassa-audio .icona::before,
.cassa-audio .icona::after{
  content:"";
  position:absolute;
  left:5%; right:5%;
  top:50%;
  height:5px;
  margin-top:-2.5px;
  background:#e53935;
  border:1px solid #000;
  border-radius:2px;
  pointer-events:none;
  transition:transform .25s, opacity .25s;
  opacity:0;
}
.cassa-audio .icona::before{ transform:rotate(45deg); }
.cassa-audio .icona::after{ transform:rotate(-45deg); }
body.effetti-off .cassa-audio{ opacity:.7; }
body.effetti-off .cassa-audio .icona::before,
body.effetti-off .cassa-audio .icona::after{ opacity:1; }

/* sirena ATTENZIONE */
.sirena{
  display:inline-block;
  width:14px;height:14px;border-radius:50%;
  background:#ff2222;
  box-shadow:0 0 10px #ff2222;
  animation:lampeggia 1s steps(2,end) infinite;
  vertical-align:middle;
  margin:0 6px;
}
@keyframes lampeggia{
  50%{background:#330000;box-shadow:none}
}

/* responsive */
@media (max-width: 680px){
  .brand h1{font-size:26px;text-align:center;white-space:normal;line-height:1.05;letter-spacing:2px}
  .cartolina{margin:14px 10px}
  .cartello{padding:18px}
  .gru{display:none}
  .ingranaggio{font-size:38px;opacity:.25}

  /* topbar: solo il titolo grande, casco nascosto */
  .topbar{flex-direction:column;align-items:stretch;gap:10px;padding:12px 12px 14px}
  .brand{flex-direction:column;gap:0;justify-content:center;align-items:center}
  .brand .casco{display:none}

  /* schede: 2 righe ordinate, centrate, niente scroll laterale, niente chiodo */
  .nav-schede{
    flex-wrap:wrap;
    justify-content:center;
    gap:6px;
    overflow:visible;
  }
  .scheda{
    font-size:13px;
    padding:6px 10px 6px 10px;
    letter-spacing:1.5px;
    transform:none;
    box-shadow:2px 2px 0 #000;
    flex:0 0 auto;
  }
  .scheda::before{display:none}
  .scheda:hover, .scheda:active{
    transform:translateY(-2px);
    box-shadow:3px 3px 0 #000;
  }

  /* timbro WORK IN PROGRESS: in flusso sopra al titolo invece che assoluto */
  .timbro{
    position:static;
    display:inline-block;
    transform:rotate(-4deg);
    margin-bottom:12px;
    font-size:14px;
    padding:4px 10px;
  }
}

/* schermi molto piccoli */
@media (max-width: 380px){
  .brand h1{font-size:22px;letter-spacing:1px}
  .scheda{font-size:12px;padding:5px 8px}
  .cartello h2{font-size:32px}
}