@font-face{
  font-family:"Argent Pixel CF";
  src:url("fonts/ArgentPixelCF-Regular.otf") format("opentype");
  font-weight:400; font-style:normal; font-display:block;
}

:root{
  --nero:#001514;
  --bianco:#FFFFFF;
  --giallo:#FEE440;
  --giallo-lo:#8A7412;
  --giallo-hi:#FFF6B8;
  --viola:#A226E4;
  --viola-hi:#CE7BF7;
  --viola-body:#7A17B8;
  --viola-lo:#3E0A61;
  --bg:#2F2F2F;
  --fg:var(--bianco);
  --ui:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --cur-arrow:url("cursors/arrow.png") 0 0;
  --cur-hand:url("cursors/hand.png") 5 0;
  --cur-wait:url("cursors/wait.png") 6 6;
  --dot:rgba(254,228,64,.55);
}
body.calm{ --bg:var(--bianco); --fg:var(--nero); --dot:rgba(162,38,228,.45) }

*{box-sizing:border-box;margin:0;padding:0}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{
  background:var(--bg); color:var(--fg);
  font-family:"Argent Pixel CF",Georgia,serif;
  transition:background-color 1.1s ease, color 1.1s ease;
  overflow-x:hidden;
  cursor:var(--cur-arrow), default;
}
a,button,summary,.ln[data-w],.relief,.bar,.prov,select.f,.x{ cursor:var(--cur-hand), pointer }
input.f,textarea.f{ cursor:text }
.waiting,.waiting *{ cursor:var(--cur-wait), wait !important }

/* ---------- manifesto ----------
   LA COLONNA DI LETTURA
   Il testo vive in una colonna a sinistra larga --colonna; tutto lo spazio
   che resta a destra e' la zona dove le finestre hanno il permesso di
   spuntare (se ne occupa script.js, che legge la larghezza da qui).
   Se vuoi il testo piu' largo alza --colonna: le finestre avranno meno
   spazio e torneranno a sovrapporsi alla lettura. 56vw e' il buon compromesso. */
:root{ --colonna:56vw }

.sheet{ padding:12vh 6vw 14vh }
.manifesto{
  max-width:var(--colonna); margin:0;
  transition:transform 1s cubic-bezier(.5,.05,.2,1);
}
.manifesto p{
  font-size:clamp(1.35rem,2.6vw,2.75rem);
  line-height:1.44; letter-spacing:.005em;
  text-wrap:pretty;
}
.ln{ display:inline; padding:.02em .1em; margin:0 -.06em;
     transition:color .18s, background-color .18s, text-decoration-color .3s }
.ln[data-w]{
  text-decoration:underline dotted var(--dot);
  text-decoration-thickness:1.5px; text-underline-offset:.18em;
}
.ln[data-w]:hover, .ln[data-w]:focus-visible{
  background:var(--giallo); color:var(--nero); outline:none;
  text-decoration-color:transparent;
}
.ln[data-w]:active{ background:var(--giallo-hi) }
/* frase gia' usata: si spegne, ma resta leggibile (prima era troppo scura) */
.ln.spent{ color:#93A5A3 }
body.calm .ln.spent{ color:#7C8A89 }
.ln.spent:hover{ color:var(--nero) }

/* ---------- scroll hint ---------- */
.hint{
  position:fixed; left:50%; bottom:calc(1.6rem + env(safe-area-inset-bottom));
  transform:translateX(-50%); z-index:9;
  font-family:var(--ui); font-size:9px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--giallo); text-align:center; pointer-events:none;
  transition:opacity .5s ease;
  background:var(--bg); padding:4px 10px; border-radius:2px;
}
.hint b{ display:block; font-size:13px; font-weight:400; animation:bob 1.4s ease-in-out infinite }
@keyframes bob{ 50%{ transform:translateY(4px) } }
.hint.off{ opacity:0 }

/* ---------- coda ---------- */
.coda{
  min-height:100vh; min-height:100svh; display:grid; place-items:center;
  padding:10vh 7vw; text-align:center;
}
.coda-in{
  max-width:1000px;
  font-size:clamp(1.7rem,4.8vw,4.2rem); line-height:1.3;
  opacity:0; transform:translateY(26px);
  transition:opacity 1s ease, transform 1s cubic-bezier(.2,.8,.2,1);
}
.coda-in.show{ opacity:1; transform:none }
.relief{ position:relative; white-space:nowrap; color:var(--giallo) }
body.calm .relief{ color:var(--viola) }
.relief::after{
  content:""; position:absolute; left:0; bottom:.02em; height:.05em; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:0 50%;
  transition:transform .55s cubic-bezier(.2,.8,.2,1);
}
.relief:hover::after,.relief:focus-visible::after{ transform:scaleX(1) }
.relief:focus-visible{ outline:none }

/* ---------- veil (dissolvenza verso la homepage) ---------- */
.veil{
  position:fixed; inset:0; z-index:60; background:var(--bianco);
  opacity:0; pointer-events:none; transition:opacity .6s ease;
}
.veil.show{ opacity:1 }

/* ---------- windows ---------- */
#desk{ position:fixed; inset:0; pointer-events:none; z-index:15 }
.win{
  position:fixed; pointer-events:auto;
  background:var(--viola-body); color:#fff;
  border:2px solid var(--nero);
  box-shadow:inset 1px 1px 0 var(--viola-hi), inset -1px -1px 0 var(--viola-lo),
             4px 4px 0 rgba(0,0,0,.55);
  font-family:var(--ui); font-size:11.5px; line-height:1.5;
  transform:rotate(var(--rot));
  animation:pop .2s cubic-bezier(.3,1.5,.5,1);
  transition:opacity .4s ease, transform .4s cubic-bezier(.5,0,.9,.3);
  max-width:calc(100vw - 24px);
}
/* se una finestra e' piu' alta dello schermo, scorre dentro di se' */
.win .body{ max-height:62vh; overflow:auto; overscroll-behavior:contain }
@keyframes pop{ from{ transform:rotate(var(--rot)) scale(.87); opacity:0 } }
.win.gone{ opacity:0; transform:rotate(var(--rot)) translateY(14px) scale(.9) }

.bar{
  display:flex; align-items:center; gap:8px;
  background:linear-gradient(90deg,var(--viola) 0%,#4E0A7A 100%);
  color:#fff; padding:3px 3px 3px 7px; user-select:none;
  border-bottom:1px solid var(--viola-lo);
}
.bar span{ flex:1; font-size:10px; letter-spacing:.14em; text-transform:uppercase;
           white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.x{
  width:16px; height:15px; flex:none; padding:0;
  font:inherit; font-size:9px; line-height:1; position:relative;
  background:var(--giallo); color:var(--nero);
  border:2px solid; border-color:var(--giallo-hi) var(--giallo-lo) var(--giallo-lo) var(--giallo-hi);
  transition:left .12s, top .12s;
}
.x:active{ border-color:var(--giallo-lo) var(--giallo-hi) var(--giallo-hi) var(--giallo-lo) }
.body{ padding:11px 12px 12px }
.body p{ margin-bottom:9px }
.body p:last-child{ margin-bottom:0 }
.mini{ font-size:9px; color:#DCB4F6; line-height:1.45 }

.row{ display:flex; gap:6px; margin-top:10px; align-items:center }
button.b{
  font:inherit; font-size:11px; padding:5px 11px;
  background:var(--giallo); color:var(--nero);
  border:2px solid; border-color:var(--giallo-hi) var(--giallo-lo) var(--giallo-lo) var(--giallo-hi);
  box-shadow:0 0 0 1px var(--nero);
}
button.b:active{ border-color:var(--giallo-lo) var(--giallo-hi) var(--giallo-hi) var(--giallo-lo) }
button.b.ghost{
  background:var(--viola-body); color:#fff;
  border-color:var(--viola-hi) var(--viola-lo) var(--viola-lo) var(--viola-hi);
}
button.b.big{ flex:1; padding:8px; font-size:12px; letter-spacing:.05em }
button.b[disabled]{ opacity:.4; cursor:var(--cur-arrow),not-allowed }
button.tiny{
  font:inherit; font-family:var(--ui); font-size:8.5px; color:#DCB4F6;
  background:none; border:0; padding:0; text-decoration:underline;
}
button.tiny:hover{ color:var(--giallo) }

input.f,textarea.f,select.f{
  font:inherit; font-family:var(--ui); font-size:11px; width:100%;
  padding:5px 7px; background:#fff; color:var(--nero); margin-bottom:6px;
  border:2px solid; border-color:var(--viola-lo) var(--viola-hi) var(--viola-hi) var(--viola-lo);
}
textarea.f{ resize:none; height:52px }
input.f:focus,textarea.f:focus,select.f:focus{ outline:2px solid var(--giallo); outline-offset:0 }

ul.req{ list-style:none; font-size:10px }
ul.req li{ padding:1px 0; color:#C89AE8 }
ul.req li::before{ content:"○ " }
ul.req li.ok{ color:var(--giallo) }
ul.req li.ok::before{ content:"● " }

.blink{ animation:bl 1s steps(1,end) infinite }
@keyframes bl{ 50%{ opacity:.2 } }
.marquee{
  overflow:hidden; white-space:nowrap; margin:-4px -12px 9px;
  background:var(--nero); color:var(--giallo); font-size:9px; padding:3px 0;
  border-bottom:1px solid var(--viola-lo);
}
.marquee span{ display:inline-block; padding-left:100%; animation:mq 9s linear infinite }
@keyframes mq{ to{ transform:translateX(-100%) } }
.price{ font-family:"Argent Pixel CF",serif; font-size:32px; line-height:1; color:var(--giallo) }
.prov{ display:block; width:100%; text-align:left; font:inherit; font-size:11px;
       padding:4px 7px; border:0; border-bottom:1px solid #E4D2F2;
       background:none; color:var(--nero) }
.prov:hover{ background:var(--viola); color:#fff }
.list{ max-height:114px; overflow:auto; background:#fff;
       border:2px solid; border-color:var(--viola-lo) var(--viola-hi) var(--viola-hi) var(--viola-lo) }
.otp{ display:flex; gap:4px; margin-bottom:8px }
.otp input{ width:100%; text-align:center; padding:6px 0; background:#fff;
            font:inherit; font-size:13px; color:var(--nero);
            border:2px solid; border-color:var(--viola-lo) var(--viola-hi) var(--viola-hi) var(--viola-lo) }
.deity{ font-family:"Argent Pixel CF",serif; font-size:15px }

/* ---------- schermi stretti e telefoni ----------
   Sotto i 900px non c'e' spazio per una colonna libera accanto al testo:
   le finestre smettono di spargersi e si impilano in fondo allo schermo,
   cosi' il testo sopra resta sempre leggibile. Se ne occupa script.js. */
@media (max-width:899px){
  :root{ --colonna:100% }
  .sheet{ padding:8vh 6vw 12vh }
  .manifesto p{ font-size:clamp(1.3rem,5.6vw,2.1rem); line-height:1.55 }
  .ln[data-w]{ padding:.1em .14em; text-underline-offset:.2em }
  .coda-in{ font-size:clamp(1.5rem,6.4vw,2.6rem) }
  .relief{ white-space:normal }

  /* la pila non deve mai coprire le ultime righe: quando c'e' almeno una
     finestra aperta il testo guadagna aria in fondo */
  body.has-win .sheet{ padding-bottom:56vh }
  body.has-win .hint{ opacity:0 }

  .win{ font-size:12.5px }
  .win .body{ max-height:44vh }
  .bar{ padding:5px 5px 5px 9px }
  .bar span{ font-size:10.5px }
  /* bersagli piu' grandi da toccare senza sbagliare */
  .x{ width:26px; height:24px; font-size:11px }
  button.b{ padding:9px 14px; font-size:12px }
  button.b.big{ padding:12px; font-size:13px }
  button.tiny{ font-size:10px; padding:6px 0 }
  .prov{ padding:10px 9px; font-size:12px }
  .list{ max-height:150px }
  /* 16px: sotto questa soglia iOS ingrandisce la pagina da solo quando scrivi */
  input.f,textarea.f,select.f{ font-size:16px; padding:8px }
  .otp input{ font-size:16px; padding:9px 0 }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.01ms !important }
  html{ scroll-behavior:auto }
}