/* 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; }
}