/* dado.css — la pagina del tiro del d20.
   Tutto raccolto e centrato: il dado sta in un riquadro suo, non a tutto schermo. */

.dado-pannello{
  max-width: 560px;
  margin: 18px auto;
  padding: 22px 22px 20px;
}

/* ---- chi tira e perché ---- */
.chi-tira{
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
  margin-bottom: 18px;
}
.campo{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.campo > span{
  font:700 11px "Cinzel", serif; letter-spacing:.18em; text-transform:uppercase;
  color: var(--gold, #c9a86a);
}
.campo input{
  width:100%; padding:10px 12px;
  font:400 15px "IM Fell English", serif;
  color:#f4ead7; background:rgba(20,16,12,.75);
  border:1px solid rgba(201,168,106,.3); border-radius:4px;
}
.campo input::placeholder{ color:rgba(244,234,215,.35); }
.campo input:focus{ outline:none; border-color:rgba(201,168,106,.75);
  box-shadow:0 0 0 3px rgba(201,168,106,.12); }

/* ---- il dado ---- */
.scena{
  position:relative;
  width: min(300px, 68vw);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  display:grid; place-items:center;
}
.scena::after{                       /* l'ombra sotto, che lo tiene a terra */
  content:''; position:absolute; left:50%; bottom:4%;
  width:56%; height:9%; transform:translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.55), transparent 70%);
  filter: blur(4px); pointer-events:none;
}
.scena canvas{
  width:100%; height:100%; display:block;
  cursor:pointer; touch-action:manipulation;
  filter: drop-shadow(0 10px 26px rgba(0,0,0,.55));
}
.niente-webgl{
  font:400 14px "IM Fell English", serif; color:var(--muted,#a89880);
  text-align:center; margin:0; padding:0 10px;
}

/* ---- l'esito ---- */
.esito{
  text-align:center; margin:10px 0 2px; min-height:64px;
  display:flex; align-items:center; justify-content:center;
}
.esito .numero{
  font:700 clamp(38px, 11vw, 54px)/1 "Cinzel", serif;
  color:#e8dcc4; text-shadow:0 0 20px rgba(201,168,106,.28);
  transition: color .25s ease, text-shadow .25s ease;
}
.esito.in-corso .numero{ color:rgba(232,220,196,.35); text-shadow:none; }
.esito.critico .numero{ color:#8ff0ac; text-shadow:0 0 26px rgba(120,240,160,.5); }
.esito.fallimento .numero{ color:#ff9a9a; text-shadow:0 0 26px rgba(255,110,110,.45); }

/* ---- comandi ---- */
.comandi{
  display:flex; gap:10px; justify-content:center; align-items:center;
  flex-wrap:wrap; margin-top:6px;
}
.comandi--storico{ margin-top:16px; }
.conteggio{
  display:inline-block; min-width:1.5em; margin-left:6px; padding:1px 6px;
  border:1px solid rgba(201,168,106,.4); border-radius:999px;
  font-size:.82em; color:var(--gold,#c9a86a);
}
.avviso{
  text-align:center; margin:12px 0 0;
  font:400 14px "IM Fell English", serif; color:#ff9a9a;
}

/* ---- resoconto ---- */
.storico{ max-width:720px; }
.tabella-avvolta{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tab-tiri{ width:100%; border-collapse:collapse; font:400 15px "IM Fell English", serif; }
.tab-tiri th{
  font:700 11px "Cinzel", serif; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold,#c9a86a); text-align:left; padding:8px 10px;
  border-bottom:1px solid rgba(201,168,106,.35); white-space:nowrap;
}
.tab-tiri td{
  padding:9px 10px; color:#e8dcc4;
  border-bottom:1px solid rgba(201,168,106,.12); vertical-align:top;
}
.tab-tiri tr:last-child td{ border-bottom:0; }
.tab-tiri .vuoto td{ color:var(--muted,#a89880); font-style:italic; text-align:center; padding:18px 10px; }
.esito-cella{ font:700 17px "Cinzel", serif; text-align:right; white-space:nowrap; }
.esito-cella.critico{ color:#8ff0ac; }
.esito-cella.fallimento{ color:#ff9a9a; }
.nota-piccola{
  margin:12px 0 0; text-align:center;
  font:400 13px "IM Fell English", serif; color:var(--muted,#a89880);
}

/* ---- telefono ---- */
@media (max-width: 620px){
  .dado-pannello{ margin:12px auto; padding:16px 14px 18px; }
  .chi-tira{ grid-template-columns:1fr; gap:10px; }
  .scena{ width:min(260px, 72vw); }
  .comandi .btn{ flex:1 1 auto; min-width:140px; }
  .tab-tiri th, .tab-tiri td{ padding:8px 8px; font-size:14px; }
}
@media (max-width: 380px){
  .scena{ width:min(220px, 70vw); }
}

@media (prefers-reduced-motion: reduce){
  .esito .numero{ transition:none; }
}

/* ===== la rastrelliera e il tavolo (18 agosto 2026) ===== */
.tavolata{ display:grid; gap:16px; grid-template-columns:1fr; }
@media (min-width:860px){ .tavolata{ grid-template-columns:150px minmax(0,1fr); align-items:start; } }

.rastrelliera{ display:grid; gap:8px; grid-template-columns:repeat(auto-fit,minmax(64px,1fr)); }
@media (min-width:860px){ .rastrelliera{ grid-template-columns:1fr 1fr; } }
.presa{
  display:grid; place-items:center; gap:2px; padding:.5rem .3rem; cursor:pointer;
  border-radius:10px; border:1px solid rgba(201,168,106,.28); background:rgba(22,18,14,.7);
  color:var(--gold,#c9a86a); transition:border-color .15s ease, background .15s ease, transform .1s ease;
}
.presa:hover{ border-color:rgba(201,168,106,.7); background:rgba(34,27,20,.9); color:#f0dcae; }
.presa:active{ transform:scale(.94); }
.presa:focus-visible{ outline:2px solid rgba(201,168,106,.6); outline-offset:2px; }
.presa svg{ width:30px; height:30px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linejoin:round; }
.presa b{ font:700 11px "Cinzel",serif; letter-spacing:.1em; }
.presa .quanti{
  position:absolute; margin:-34px 0 0 26px; min-width:17px; padding:0 4px; border-radius:999px;
  font:700 10px "Cinzel",serif; color:#1b150f; background:#c9a86a;
}

.tavolo{ position:relative; }
.tavolo canvas{ width:100%; height:min(46vh,380px); display:block; cursor:pointer; }
/* il display esplicito qui sotto batte l'attributo hidden: senza questa riga
   la scritta d'invito resta stampata sopra i dadi */
.tavolo [hidden], .rastrelliera [hidden]{ display:none !important; }
.tavolo .vuoto{
  position:absolute; inset:0; display:grid; place-items:center; pointer-events:none;
  color:var(--muted,#a89880); font:400 15px "IM Fell English",serif; text-align:center; padding:0 1rem;
}
.somma{ text-align:center; margin:.2rem 0 0; }
.somma .totale{ font:700 clamp(30px,7vw,44px)/1 "Cinzel",serif; color:#f0dcae; }
.somma .conto{ display:block; margin-top:.3rem; font-size:.9rem; color:var(--muted,#a89880); }
.somma.critico .totale{ color:#8ff0ac; text-shadow:0 0 26px rgba(120,240,160,.5); }
.somma.disastro .totale{ color:#ff9a9a; text-shadow:0 0 26px rgba(255,110,110,.45); }

/* Il motto prende il posto del titolo: stesso oro inciso, un gradino sotto.
   Il vero titolo resta nella pagina ma non si vede — serve a chi la legge con
   la voce e ai motori di ricerca, che un h1 se lo aspettano. */
.motto{
  margin:.1rem 0 0; text-align:center;
  font-family:"Cinzel",serif; font-weight:900; letter-spacing:.05em;
  font-size:clamp(19px,3.4vw,27px); text-transform:none;
}
.solo-per-chi-legge-a-voce{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}