/* ═════════════════════════════════════════════════════════════════
   DADOS · el foso de piedra
   ─────────────────────────────────────────────────────────────────
   No es una tarjeta con dos dados: es un pozo. Piedra fría, tierra
   pisada, una antorcha arriba a la izquierda. El jugador suelta el
   cubilete y espera. Toda la identidad está en esa espera.
   Sin degradado sobre texto, sin resplandor de color, sin cristal.
   ════════════════════════════════════════════════════════════════ */

body.escena-dados{
  --pd-brasa:#c2542a;          /* la antorcha del brocal */
  --pd-hueso:#e7ddca;          /* tu dado */
  --pd-piedra:#3c3d44;
  --pd-tierra:#4b4437;
}

/* ── el pozo visto desde el brocal ──────────────────────────────── */
body.escena-dados .escena-fondo{
  opacity:1;
  background:
    /* antorcha, arriba a la izquierda */
    radial-gradient(ellipse 46% 34% at 18% 2%, rgba(224,132,66,.15), transparent 66%),
    /* el pozo se traga la luz hacia abajo */
    radial-gradient(ellipse 130% 88% at 50% 118%, rgba(0,0,0,.94), transparent 58%),
    linear-gradient(180deg, #16161a 0%, #0d0d10 44%, #050506 100%);
}
/* sillería de la pared del pozo, en hiladas */
body.escena-dados .escena-fondo::after{
  content:'';position:absolute;inset:0;opacity:.42;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.5) 0 1px, transparent 1px 74px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.42) 0 1px, transparent 1px 112px);
}

/* ── el foso ────────────────────────────────────────────────────── */
#p-dados .dd-foso{
  position:relative;width:min(540px,100%);height:266px;margin:0 auto;
  border-radius:6px;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,#26262c 0%,#1b1b20 40%,#131318 100%);
  box-shadow:inset 0 0 0 1px #000, 0 30px 66px rgba(0,0,0,.8);
}

/* brocal: el borde de piedra tallada por el que asomas */
#p-dados .dd-brocal{
  position:absolute;left:0;right:0;top:0;height:26px;z-index:6;
  background:linear-gradient(180deg,#5a5a64 0%,#3b3b44 52%,#101014 100%);
  box-shadow:0 6px 16px rgba(0,0,0,.85);
}
#p-dados .dd-brocal::after{        /* juntas de los sillares del brocal */
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,
    transparent 0 62px, rgba(0,0,0,.6) 62px 64px);
}

/* muro del fondo, en penumbra */
#p-dados .dd-muro{
  position:absolute;left:0;right:0;top:26px;height:118px;
  background:
    radial-gradient(ellipse 60% 120% at 16% 0%, rgba(226,134,68,.13), transparent 70%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.34) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 46px),
    linear-gradient(180deg,#2a2a31,#17171c);
}

/* paredes laterales: dos triángulos que cierran el pozo */
#p-dados .dd-pared{position:absolute;bottom:0;width:24%;height:160px;z-index:2}
#p-dados .dd-pared-izq{
  left:0;clip-path:polygon(0 0,100% 100%,0 100%);
  background:linear-gradient(90deg,#1d1d22,#0b0b0e)}
#p-dados .dd-pared-der{
  right:0;clip-path:polygon(100% 0,100% 100%,0 100%);
  background:linear-gradient(270deg,#131317,#08080a)}

/* el suelo: tierra pisada, más ancho al frente */
#p-dados .dd-suelo{
  position:absolute;left:0;right:0;bottom:0;height:160px;z-index:1;
  clip-path:polygon(24% 0, 76% 0, 100% 100%, 0 100%);
  background:
    radial-gradient(ellipse 44% 70% at 30% 8%, rgba(216,128,62,.11), transparent 70%),
    radial-gradient(circle at 22% 62%, rgba(0,0,0,.3) 0 6px, transparent 7px),
    radial-gradient(circle at 71% 34%, rgba(0,0,0,.26) 0 4px, transparent 5px),
    radial-gradient(circle at 47% 84%, rgba(0,0,0,.22) 0 8px, transparent 9px),
    radial-gradient(circle at 84% 71%, rgba(255,255,255,.03) 0 5px, transparent 6px),
    linear-gradient(180deg,#413b30 0%,#332e26 44%,#22201b 100%);
}
/* polvo asentado en el frente del foso */
#p-dados .dd-polvo{
  position:absolute;left:0;right:0;bottom:0;height:56px;z-index:5;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(6,5,4,.72))}

/* ── marcas grabadas donde cae cada dado ────────────────────────── */
#p-dados .dd-marca{
  position:absolute;z-index:3;width:96px;height:38px;margin-left:-48px;
  border-radius:50%;
  border:1px solid rgba(0,0,0,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  display:grid;place-items:end center}
#p-dados .dd-marca span{
  font-family:var(--mono);font-size:8.5px;letter-spacing:.28em;
  color:rgba(231,221,202,.34);transform:translateY(13px)}
#p-dados .dd-marca-tu{left:32%;bottom:38px}
#p-dados .dd-marca-casa{left:68%;bottom:56px;transform:scale(.9)}
/* mientras esperas el dado de la casa, su marca respira */
#p-dados .dd-foso.esperando .dd-marca-casa{
  border-color:rgba(194,84,42,.7);
  animation:dd-latido 620ms ease-in-out infinite}
#p-dados .dd-foso.esperando .dd-marca-casa span{color:rgba(230,150,110,.8)}
@keyframes dd-latido{
  0%,100%{box-shadow:inset 0 0 0 1px rgba(194,84,42,.12)}
  50%    {box-shadow:inset 0 0 0 1px rgba(194,84,42,.5)}
}

/* tres puntos de espera, junto a la marca de la casa */
#p-dados .dd-espera{
  position:absolute;z-index:4;left:68%;bottom:104px;margin-left:-15px;
  display:flex;gap:5px;opacity:0;transition:opacity .2s linear}
#p-dados .dd-foso.esperando .dd-espera{opacity:1}
#p-dados .dd-espera i{
  width:5px;height:5px;border-radius:50%;background:var(--pd-brasa);
  animation:dd-punto 900ms ease-in-out infinite}
#p-dados .dd-espera i:nth-child(2){animation-delay:.15s}
#p-dados .dd-espera i:nth-child(3){animation-delay:.3s}
@keyframes dd-punto{0%,100%{opacity:.2}50%{opacity:1}}

/* ── los dados ──────────────────────────────────────────────────── */
#p-dados .dd-lanza{
  position:absolute;z-index:4;left:0;top:0;width:0;height:0;
  will-change:transform}
#p-dados .dd-vuelo{
  position:absolute;left:0;top:0;width:56px;height:56px;margin:-28px 0 0 -28px;
  perspective:520px;will-change:transform}
#p-dados .dd-cubo{
  position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
#p-dados .dd-cara{
  position:absolute;inset:0;border-radius:9px;
  display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);
  padding:7px;backface-visibility:hidden}
#p-dados .dd-cara i{border-radius:50%;width:9px;height:9px;align-self:center;justify-self:center}

/* tu dado: hueso gastado */
#p-dados .dd-hueso .dd-cara{
  background:linear-gradient(150deg,#f2ead8 0%,#ded2ba 46%,#b8ab92 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5), inset 0 -5px 9px rgba(90,76,54,.35)}
#p-dados .dd-hueso .dd-cara i{
  background:#2a241c;box-shadow:inset 0 1px 1px rgba(0,0,0,.7)}
/* el de la casa: piedra negra */
#p-dados .dd-obsidiana .dd-cara{
  background:linear-gradient(150deg,#3a3a42 0%,#22222a 48%,#111116 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.11), inset 0 -5px 9px rgba(0,0,0,.6)}
#p-dados .dd-obsidiana .dd-cara i{
  background:#d8cdb6;box-shadow:inset 0 -1px 1px rgba(0,0,0,.35)}

/* sombra proyectada en la tierra */
#p-dados .dd-sombra{
  position:absolute;left:0;top:0;width:58px;height:16px;margin:-8px 0 0 -29px;
  border-radius:50%;background:rgba(0,0,0,.6);filter:blur(4px);
  opacity:0;z-index:3;will-change:transform,opacity}

/* valor accesible: lo lee el lector de pantalla, no se ve */
#p-dados .dd-val{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap}

/* ── la apuesta, grabada bajo el foso ───────────────────────────── */
#p-dados .dd-apuesta{
  display:flex;align-items:center;justify-content:center;gap:12px;
  margin:14px auto 0;width:min(540px,100%);flex-wrap:wrap}
#p-dados .dd-lab{
  font-family:var(--mono);font-size:9px;letter-spacing:.3em;
  color:rgba(231,221,202,.35)}
#p-dados .dd-fichas{display:flex;gap:6px}
#p-dados .dd-fichas .chip{
  min-width:50px;height:30px;border-radius:3px;
  background:#141419;border:1px solid #34343d;color:#8c8b84;
  font-family:var(--mono);font-size:11px;font-variant-numeric:tabular-nums}
#p-dados .dd-fichas .chip.on{
  background:rgba(194,84,42,.16);border-color:var(--pd-brasa);color:#e0906a}

/* ── el cubilete ────────────────────────────────────────────────── */
#p-dados .dd-mando{display:flex;justify-content:center;margin-top:14px}
#p-dados .dd-cubilete{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:9px;
  background:none;border:none;padding:0 10px;cursor:pointer;font-family:inherit;
  -webkit-tap-highlight-color:transparent}
#p-dados .dd-copa{
  position:relative;display:block;width:52px;height:56px;
  transform-origin:60% 100%;
  transition:transform .34s cubic-bezier(.42,0,.7,1.5)}
#p-dados .dd-cuero{                 /* el cuerpo de cuero, tronco de cono */
  position:absolute;inset:6px 0 0;
  clip-path:polygon(6% 0, 94% 0, 78% 100%, 22% 100%);
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.16) 0 1px, transparent 1px 9px),
    linear-gradient(94deg,#5e3517 0%, #a3652f 34%, #6d3f1e 78%, #3d2110 100%)}
#p-dados .dd-cuero::after{          /* costura */
  content:'';position:absolute;left:26%;top:6%;width:1px;height:88%;
  background:repeating-linear-gradient(180deg,
    rgba(231,221,202,.28) 0 3px, transparent 3px 7px)}
#p-dados .dd-boca{                  /* la boca, elipse oscura */
  position:absolute;left:0;top:0;width:52px;height:13px;border-radius:50%;
  background:radial-gradient(ellipse at 50% 40%, #0a0806 42%, #56331a 100%);
  box-shadow:0 1px 0 rgba(231,221,202,.14)}
#p-dados .dd-lab-btn{
  font-family:var(--mono);font-size:10px;letter-spacing:.26em;
  color:#c9c0ae;text-transform:uppercase;transition:color .16s linear}
#p-dados .dd-cubilete:hover:not(:disabled) .dd-copa{transform:rotate(-9deg)}
#p-dados .dd-cubilete:hover:not(:disabled) .dd-lab-btn{color:#f0e6d2}
/* el gesto: vuelca y devuelve */
#p-dados .dd-cubilete.vuelca .dd-copa{
  transform:rotate(-118deg) translateY(-6px);
  transition:transform .22s cubic-bezier(.3,.9,.4,1)}
#p-dados .dd-cubilete.agita .dd-copa{animation:dd-agita 130ms linear 3}
@keyframes dd-agita{
  0%,100%{transform:rotate(-6deg)}
  50%    {transform:rotate(6deg) translateY(-3px)}
}
#p-dados .dd-cubilete:disabled{cursor:default}
#p-dados .dd-cubilete:disabled .dd-lab-btn{color:#6e6a61}

/* ── el resultado, tallado en la piedra ─────────────────────────── */
#p-dados .res{
  text-align:center;margin-top:12px;min-height:36px;
  font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ── que quepa siempre, incluso en los 543px de Discord ─────────── */
@media(max-height:660px){
  #p-dados .dd-foso{height:212px;width:min(460px,100%)}
  #p-dados .dd-muro{height:92px}
  #p-dados .dd-pared,#p-dados .dd-suelo{height:126px}
  #p-dados .dd-marca-tu{bottom:28px}
  #p-dados .dd-marca-casa{bottom:44px}
  #p-dados .dd-espera{bottom:84px}
  #p-dados .dd-apuesta{margin-top:10px}
  #p-dados .dd-mando{margin-top:10px}
  #p-dados .dd-copa{width:44px;height:48px}
  #p-dados .dd-boca{width:44px;height:11px}
  #p-dados .res{margin-top:8px;min-height:30px}
}
@media(max-width:520px){
  #p-dados .dd-foso{height:200px}
  #p-dados .dd-lab{display:none}
}