/* ==========================================================================
   HOME — POPUP "VIRUS" E CACCIA AI BUG (li crea js/popup.js)
   I popup sono finestre di Windows 95/98: tutte con lo stesso messaggio,
   diverse per tipo, misura, titolo, icona e barra. Il carattere e' Heebo,
   lo stesso del sito: cosi' e' identico su ogni browser e sistema.
   Mentre ci sono, il sito sotto e' congelato.
   ========================================================================== */

/* ---------- SITO CONGELATO ---------- */
/* niente scroll, niente animazioni, e il cursore e' la clessidra */
html.congelato{overflow:hidden !important}
html.congelato body *:not(.virus):not(.virus *){animation-play-state:paused !important}
.virus{position:fixed;inset:0;z-index:2000;pointer-events:none}
.virus.attivo{pointer-events:auto;cursor:wait}

/* ---------- FINESTRE ---------- */
.win{
  position:fixed;left:0;top:0;width:var(--w,320px);
  text-align:left;color:#000;background:#c0c0c0;padding:3px;cursor:default;
  font:400 13px/1.4 'Heebo',sans-serif;
  box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #dfdfdf,inset -2px -2px #808080,inset 2px 2px #fff;
  transform:translate(var(--x,0),var(--y,0)) scale(var(--s,1));transform-origin:0 0;
}
/* le finestre di una volta non "arrivano": compaiono di colpo */
.win{animation:win-su .06s steps(1) both}
@keyframes win-su{from{opacity:0}to{opacity:1}}

.win__bar{
  display:flex;align-items:center;gap:6px;padding:3px 3px 3px 6px;cursor:move;touch-action:none;
  background:linear-gradient(90deg,#808080,#b5b5b5);color:#dcdcdc;
  font-weight:900;font-size:12px;user-select:none;
}
.win.attiva .win__bar{background:linear-gradient(90deg,#000080,#1084d0);color:#fff}
.win--rossa .win__bar{background:linear-gradient(90deg,#8a5a5a,#c49a9a)}
.win--rossa.attiva .win__bar{background:linear-gradient(90deg,#7a0000,#e01010)}
.win__titolo{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.win__x{
  width:18px;height:16px;flex:none;display:grid;place-items:center;cursor:pointer;
  background:#c0c0c0;border:0;padding:0;color:#000;font:900 11px/1 'Heebo',sans-serif;
  box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px #808080,inset 2px 2px #dfdfdf;
}
.win__x:active{box-shadow:inset 1px 1px #0a0a0a,inset -1px -1px #fff,inset 2px 2px #808080}

.win__corpo{display:flex;gap:14px;align-items:center;padding:16px 14px 12px}
.win__icona{width:34px;height:34px;flex:none}
.win__msg{margin:0}
.win__msg strong{font-weight:900;margin-right:.25em}

.win__tasti{display:flex;justify-content:center;gap:8px;padding:0 12px 12px;flex-wrap:wrap}
.win__tasto{
  min-width:86px;padding:4px 12px;border:0;background:#c0c0c0;color:#000;cursor:pointer;
  font:400 13px/1.4 'Heebo',sans-serif;text-decoration:none;text-align:center;
  box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px #808080,inset 2px 2px #dfdfdf;
}
.win__tasto:active{box-shadow:inset 1px 1px #0a0a0a,inset -1px -1px #fff,inset 2px 2px #808080}
/* il tasto predefinito ha il bordo nero, come allora */
.win__tasto:first-child{outline:1px solid #000;outline-offset:-1px}
.win__tasto:focus-visible{outline:1px dotted #000;outline-offset:-5px}

/* avviso con la barra di avanzamento ferma al 99% */
.win__avanza{margin:0 14px 12px;height:18px;padding:2px;background:#c0c0c0;
  box-shadow:inset 1px 1px #808080,inset -1px -1px #fff}
.win__avanza i{display:block;height:100%;width:99%;
  background:repeating-linear-gradient(90deg,#000080 0 9px,transparent 9px 11px)}

/* mini: solo icona e messaggio */
.win--mini .win__corpo{padding:12px}

/* blocco note */
.win__menu{display:flex;gap:14px;padding:2px 6px;font-size:12px}
.win__foglio{margin:0 3px 3px;background:#fff;min-height:96px;padding:8px 10px;
  box-shadow:inset 1px 1px #808080,inset -1px -1px #dfdfdf,inset 2px 2px #0a0a0a}

/* Riprova: la finestra trema, e non cambia niente */
.win.trema{animation:trema .32s steps(2) 1}
@keyframes trema{25%{margin-left:-6px}50%{margin-left:6px}75%{margin-left:-4px}}

/* la scia lasciata trascinando */
.win.scia{pointer-events:none;animation:none}

/* i bug: camminano dentro la finestra, a scatti (la classe "ferma" la mette
   e la toglie js/popup.js); schiacciati restano una macchia */
/* l'area cliccabile e' piu' grande del bug, e sotto il mouse si ferma:
   difficile da trovare, non da cliccare */
.win__bug{position:absolute;left:10%;top:42%;width:42px;height:42px;margin:-8px 0 0 -8px;padding:8px;border:0;z-index:2;
  background:none;cursor:crosshair;animation:cammina 3.4s linear infinite}
.win__bug.ferma,.win__bug:hover,.win__bug:focus-visible{animation-play-state:paused}
.win__bug svg{width:100%;height:100%;display:block}
@keyframes cammina{
  0%{left:8%;top:44%;transform:rotate(80deg)}
  22%{left:62%;top:66%;transform:rotate(110deg)}
  40%{left:84%;top:30%;transform:rotate(-20deg)}
  62%{left:44%;top:20%;transform:rotate(-100deg)}
  82%{left:20%;top:70%;transform:rotate(150deg)}
  100%{left:8%;top:44%;transform:rotate(80deg)}
}
/* il primo si fa vedere subito: un po' piu' grosso, e sopra a tutto */
.win__bug--primo{width:54px;height:54px;margin:-14px 0 0 -14px;padding:11px;z-index:3}
/* dopo due fughe si stanca: cammina piano */
.win__bug.stanco{animation-duration:7s}
.win__bug.schiacciato{animation:none;cursor:default;transform:scale(1.7,.3) rotate(4deg);filter:brightness(.55);
  transition:transform .12s steps(2)}

/* l'indizio: la barra della finestra col bug lampeggia */
.win.indizio .win__bar{animation:indizio .5s steps(1) 6}
@keyframes indizio{50%{background:#ff0000;color:#fff}}

/* la guida */
.win--guida{z-index:99999}
.win__guida{padding:14px 16px 6px;background:#ffffe1;margin:0 3px;
  box-shadow:inset 1px 1px #808080,inset -1px -1px #dfdfdf}
.win__guida p{margin:0 0 8px}
.win__guida ul{margin:0 0 6px;padding-left:18px}
.win__guida li{margin-bottom:4px}
.win--guida .win__tasti{padding-top:10px}

/* le due uscite */
.win.cade{ /* X: crollano */
  transition:transform .9s cubic-bezier(.55,0,1,.45),opacity .3s ease .6s;
  transform:translate(calc(var(--x) + var(--dx)),calc(var(--y) + var(--dy))) rotate(var(--rot)) scale(var(--s,1));
  opacity:0;
}
.win.via{ /* Chiudi tutto: risucchiate nel punto del menu */
  transition:transform .5s cubic-bezier(.6,0,.9,.4),opacity .5s ease;
  transform:translate(var(--vx),var(--vy)) scale(.04) rotate(25deg);opacity:0;
}

/* ---------- BARRA DELLE APPLICAZIONI ---------- */
.taskbar{
  position:fixed;left:0;right:0;bottom:0;z-index:100000;height:36px;
  display:flex;align-items:center;gap:6px;padding:3px 4px;cursor:default;
  background:#c0c0c0;box-shadow:inset 0 1px #dfdfdf,inset 0 2px #fff;
  font:400 13px/1 'Heebo',sans-serif;color:#000;text-align:left;
}
.taskbar__stato{flex:1;padding:0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.taskbar__chiudi:active{box-shadow:inset 1px 1px #0a0a0a,inset -1px -1px #fff,inset 2px 2px #808080}
.taskbar__chiudi{height:100%;flex:none;border:0;cursor:pointer;background:#c0c0c0;color:#000;padding:0 12px;
  font:900 13px/1 'Heebo',sans-serif;
  box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px #808080,inset 2px 2px #dfdfdf}
.taskbar__aiuto{height:100%;min-width:34px;flex:none;border:0;cursor:pointer;background:#c0c0c0;color:#000;
  font:900 15px/1 'Heebo',sans-serif;
  box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px #808080,inset 2px 2px #dfdfdf}
.taskbar__aiuto:active{box-shadow:inset 1px 1px #0a0a0a,inset -1px -1px #fff,inset 2px 2px #808080}
.taskbar__aiuto.lampeggia{animation:lampeggia .7s steps(1) infinite}
@keyframes lampeggia{50%{background:#000080;color:#fff}}

@media (max-width:700px){
  .taskbar__stato{font-size:12px}
  /* tasti piu' stretti: anche i nomi lunghi stanno su una riga */
  .win__tasti{gap:6px;padding:0 8px 10px}
  .win__tasto{min-width:0;padding:4px 9px}
}
@media (prefers-reduced-motion:reduce){
  .win,.win.via,.win.cade,.win__bug{animation:none !important;transition:none !important}
}