/* dado.css — El Dado Invisible (dado 3D que rueda y cae en el número) */

/* Barra de salida (igual que el resto de efectos) */
.exit-bar { position:fixed; top:10px; right:10px; display:flex; gap:8px; z-index:60; }
.exit-bar.exit-bottom { top:auto; bottom:14px; right:50%; transform:translateX(50%); }
.exit-btn { font-size:12px; font-weight:600; padding:6px 11px; border-radius:9px; border:1px solid var(--line); background:rgba(255,255,255,.92); color:var(--muted); cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.08); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.exit-btn:active { transform:translateY(1px); }
.exit-btn.danger { color:var(--danger); border-color:#f3c9d2; }
#logout-btn { display:none; }

/* ===================== PUNTOS DEL DADO (compartido) ===================== */
.die-pips { position:absolute; inset:0; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr); padding:14%; box-sizing:border-box; }
.die-pips .dp { display:flex; align-items:center; justify-content:center; }
.die-pips .dp i { width:66%; height:66%; border-radius:50%; background:radial-gradient(circle at 35% 30%, #3a3f4b, #14171f); box-shadow:inset 0 1px 1px rgba(255,255,255,.35), 0 1px 2px rgba(0,0,0,.45); opacity:0; }
.die-pips .dp.on i { opacity:1; }

/* ===================== JUEGO ===================== */
.dd-screen { min-height:100svh; min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 24%, #14663f 0%, #0c3f28 55%, #062015 100%); color:#eafff2; }
.dd-inner { width:100%; max-width:520px; padding:24px 20px 40px; display:flex; flex-direction:column; align-items:center; gap:20px; text-align:center; }
.dd-title { font-size:22px; font-weight:800; letter-spacing:.5px; margin:0; }
.dd-status { font-size:14px; color:#a7d8bf; margin:0; min-height:20px; transition:color .3s; }
.dd-status.is-roll { color:#ffe08a; }
.dd-status.is-done { color:#ffd977; font-weight:700; }
.dd-status.is-error{ color:#ff9aa8; }

/* Escena 3D + radar */
.dd-stage { position:relative; width:230px; height:230px; margin:6px auto; display:flex; align-items:center; justify-content:center; }
.dice-scene { position:relative; z-index:1; width:170px; height:170px; perspective:780px; display:flex; align-items:center; justify-content:center; cursor:pointer; -webkit-tap-highlight-color:transparent; }

/* Aura pulsante (estilo La Venda Psicológica) que "capta" el número */
.dd-aura { position:absolute; top:50%; left:50%; width:190px; height:190px; transform:translate(-50%,-50%); border-radius:50%; opacity:0; transition:opacity .5s ease; pointer-events:none; z-index:0;
  background:radial-gradient(circle at 50% 45%, rgba(124,109,230,.34), rgba(20,16,52,.12) 70%);
  box-shadow:inset 0 0 46px rgba(124,109,230,.40), 0 0 42px rgba(140,110,235,.30); }
.dd-aura.on { opacity:1; }
.dd-aura::before, .dd-aura::after { content:""; position:absolute; inset:0; border-radius:50%; border:2px solid rgba(175,155,255,.5); }
.dd-aura.on::before { animation:ddAura 1.4s ease-out infinite; }
.dd-aura.on::after  { animation:ddAura 1.4s ease-out infinite .7s; }
@keyframes ddAura { 0%{ transform:scale(.55); opacity:.95; } 100%{ transform:scale(1.35); opacity:0; } }
.dd-aura.deep { box-shadow:inset 0 0 62px rgba(201,184,255,.55), 0 0 64px rgba(150,120,255,.6); }
.dice-scene.shake { animation:diceShake .18s linear infinite; }
.dice-scene.land  { animation:diceLand .42s ease; }
@keyframes diceShake { 0%,100%{ transform:translate(0,0) rotate(0); } 25%{ transform:translate(2px,-2px) rotate(.6deg); } 50%{ transform:translate(-2px,1px) rotate(-.6deg); } 75%{ transform:translate(1px,2px) rotate(.4deg); } }
@keyframes diceLand { 0%{ transform:scale(1);} 35%{ transform:scale(1.09);} 70%{ transform:scale(.97);} 100%{ transform:scale(1);} }

.dice { position:relative; width:92px; height:92px; transform-style:preserve-3d; will-change:transform; }
.dice-face { position:absolute; inset:0; border-radius:16px; background:linear-gradient(135deg,#ffffff,#e7ecf3); border:1px solid #cfd6e2;
  box-shadow:inset 0 0 12px rgba(0,0,0,.07); backface-visibility:hidden; }

/* Colocación de las 6 caras (mitad del lado = 46px) */
.df-front  { transform:translateZ(46px); }
.df-back   { transform:rotateY(180deg) translateZ(46px); }
.df-right  { transform:rotateY(90deg)  translateZ(46px); }
.df-left   { transform:rotateY(-90deg) translateZ(46px); }
.df-top    { transform:rotateX(90deg)  translateZ(46px); }
.df-bottom { transform:rotateX(-90deg) translateZ(46px); }

/* Botón lanzar / acciones */
.dd-actions { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.dd-btn { font-size:14px; font-weight:700; padding:12px 28px; border-radius:12px; cursor:pointer;
  border:1px solid rgba(255,215,120,.5); background:rgba(255,215,120,.16); color:#fff7e0; transition:transform .1s, box-shadow .2s, opacity .2s; }
.dd-btn:hover { box-shadow:0 8px 22px rgba(0,0,0,.3); }
.dd-btn:active { transform:translateY(1px); }
.dd-btn[disabled] { opacity:.5; cursor:default; }
.dd-btn.primary { background:linear-gradient(135deg,#e0a83c,#ffd977); color:#3a2a06; border:none; }
.dd-hint { font-size:12px; color:#8fc7ab; margin:0; }

/* Hotspot secreto + aviso del forzado */
.dd-secret { position:fixed; left:0; bottom:0; width:64px; height:64px; z-index:55; background:transparent; border:none; }
.dd-hintbox { position:fixed; left:10px; bottom:12px; z-index:56; font-size:11px; color:rgba(255,224,138,.7); background:rgba(6,32,21,.7); border:1px solid rgba(255,215,120,.3); border-radius:8px; padding:3px 8px; opacity:0; transition:opacity .3s; pointer-events:none; }
.dd-hintbox.show { opacity:1; }

/* ===================== CONTROL ===================== */
.dd-ctrl-preview { width:110px; height:110px; border-radius:18px; position:relative; background:linear-gradient(135deg,#fff,#e7ecf3); border:1px solid #cfd6e2; box-shadow:inset 0 0 12px rgba(0,0,0,.06); }
.dd-ctrl-preview.empty { display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:40px; font-weight:700; background:#fff; border:1.5px dashed var(--line); }
.dd-ctrl-preview.empty .die-pips { display:none; }

.dd-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; width:100%; }
.dd-num-btn { position:relative; aspect-ratio:1/1; border-radius:14px; cursor:pointer; background:linear-gradient(135deg,#fff,#eef1f6); border:1.5px solid var(--line); transition:border-color .2s, box-shadow .2s, transform .1s; }
.dd-num-btn .die-pips { padding:18%; }
.dd-num-btn.sel { border-color:var(--brand2); box-shadow:0 0 0 3px rgba(26,115,232,.16); }
.dd-num-btn:active { transform:translateY(1px); }

.dd-force-note { width:100%; font-size:12px; color:var(--muted); background:#f2f8f4; border:1px solid #dcebe1; border-radius:12px; padding:9px 12px; text-align:center; line-height:1.5; }
.dd-force-note b { color:#1c8a53; }
.dd-force-note .k { font-weight:700; color:var(--ink); }