/* tarotstosay: una sola notte per tutto il sito, l'oro solo dove si tocca o si legge il nome di una carta. */
:root{
  --notte:#0f0c1f; --notte2:#1a1533; --velo:#241d44; --linea:#3a3163;
  --oro:#d9b46a; --oro2:#f1e6cf; --testo:#e9e3f5; --piano:#b4abcc; --viola:#c7a6ff; --errore:#ff9a9a;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif; --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{background:var(--notte)}
body{min-height:100vh;background:radial-gradient(120% 80% at 50% 0%,#221a45 0%,var(--notte) 60%);color:var(--testo);
  font:400 16px/1.6 var(--sans)}
a{color:var(--oro)}
img{max-width:100%;height:auto}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--oro);outline-offset:2px}
.pagina{max-width:760px;margin:0 auto;padding:24px 16px 72px;display:flex;flex-direction:column;gap:22px}
.testa{display:flex;justify-content:space-between;align-items:center}
.marchio{font:500 20px/1 var(--serif);letter-spacing:.06em;color:var(--oro2);text-decoration:none}
.testa nav{display:flex;gap:16px;font-size:14px}
.testa nav a{color:var(--piano);text-decoration:none}
h1{font:500 clamp(34px,8vw,52px)/1.05 var(--serif);color:var(--oro2);text-wrap:balance}
h2{font:500 26px/1.15 var(--serif);color:var(--oro2)}
.sotto{color:var(--piano);max-width:56ch}
.bottone{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;
  border-radius:999px;border:1px solid var(--oro);background:var(--oro);color:#1a1300;font:600 15px var(--sans);
  cursor:pointer;text-decoration:none}
.bottone.vuoto{background:transparent;color:var(--oro)}
.bottone:disabled{opacity:.45;cursor:default}
label{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--piano)}
input,textarea,select{font:16px var(--sans);color:var(--testo);background:var(--notte2);border:1px solid var(--linea);
  border-radius:10px;padding:12px}
textarea{min-height:96px;resize:vertical}
.nota{font-size:13px;color:var(--piano)}
.errore{color:var(--errore);font-size:14px}
.scheda{background:rgba(26,21,51,.7);border:1px solid var(--linea);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:14px}
/* il mazzo da cui si sceglie */
.filtri{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
.filtri button{flex:none;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--linea);background:transparent;
  color:var(--piano);font:14px var(--sans);cursor:pointer}
.filtri button[aria-pressed="true"]{border-color:var(--oro);color:var(--oro2)}
.mazzo{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
@media (min-width:560px){.mazzo{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}}
.mazzo button{border:2px solid transparent;border-radius:12px;padding:0;background:none;cursor:pointer;position:relative}
.mazzo button img{width:100%;display:block;border-radius:10px}
.mazzo button[aria-pressed="true"]{border-color:var(--oro)}
.mazzo button[aria-pressed="true"]::after{content:attr(data-ordine);position:absolute;top:6px;right:6px;width:24px;height:24px;
  border-radius:50%;background:var(--oro);color:#1a1300;font:700 13px/24px var(--sans);text-align:center}
.scelte{display:flex;gap:10px;min-height:20px;flex-wrap:wrap}
.scelte .chip{font-size:13px;border:1px solid var(--oro);color:var(--oro2);border-radius:999px;padding:4px 10px}
.barra{position:sticky;bottom:0;padding:12px 0 calc(12px + env(safe-area-inset-bottom));background:linear-gradient(transparent,var(--notte) 30%)}
/* la lettura */
.lettura h3{font:500 22px/1.2 var(--serif);color:var(--oro2);margin-top:6px}
.lettura p,.lettura li{max-width:64ch}
.lettura ul{padding-left:20px;display:flex;flex-direction:column;gap:8px}
.riga-carta{display:grid;grid-template-columns:56px 1fr auto;gap:10px;align-items:center}
.riga-carta img{width:56px;border-radius:6px}
.riga-carta .pos{font-size:12px;color:var(--piano)}
.riga-carta select{width:100%}
.anteprima{max-width:100%;max-height:360px;border-radius:12px;align-self:center}
.attesa{display:flex;align-items:center;gap:10px;color:var(--piano)}
.attesa::before{content:"";width:16px;height:16px;border-radius:50%;border:2px solid var(--oro);border-right-color:transparent;animation:gira 1s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* le pagine da leggere: le carte «as feelings», i mazzi, le pagine di servizio */
.voce{display:flex;flex-direction:column;gap:14px}
.voce h2{margin-top:14px}
.voce h3{font:600 16px/1.4 var(--sans);color:var(--oro2);margin-top:8px}
.voce ul,.voce ol{padding-left:20px;display:flex;flex-direction:column;gap:8px}
.voce p,.voce li,.voce dd{max-width:66ch}
.carta-testa{display:grid;grid-template-columns:120px 1fr;gap:18px;align-items:center}
.carta-testa img{width:120px;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.occhiello{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--oro)}
.frase{font:italic 500 22px/1.35 var(--serif);color:var(--oro2)}
.frase.piccola{font-size:19px}
.apertura{font-size:17px}
.situazioni{display:grid;grid-template-columns:1fr;gap:4px 16px}
.situazioni dt{font-weight:600;color:var(--oro2);margin-top:6px}
.porte .fila-bottoni,.fila-bottoni{display:flex;gap:10px;flex-wrap:wrap}
.piede{display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--linea);padding-top:16px;margin-top:10px}
.piede a{color:var(--piano)}
.prezzi{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.idee{list-style:none;padding-left:0!important}
.idee li{display:grid;grid-template-columns:60px 1fr;gap:14px;align-items:center}
.idee img{width:60px;border-radius:6px}
.indice-carte{list-style:none;columns:2;column-gap:18px;font-size:15px}
.indice-carte li{break-inside:avoid;padding:3px 0}
.indice-carte a{color:var(--testo);text-decoration:none;border-bottom:1px solid var(--linea)}
@media (min-width:560px){.indice-carte{columns:3}.carta-testa{grid-template-columns:160px 1fr}.carta-testa img{width:160px}}
.collegamento{background:none;border:0;padding:0;color:var(--oro);font:inherit;text-decoration:underline;cursor:pointer}