/* bola8.css — La Bola 8 Mágica (agitar de verdad; respuesta armada por el mago) */

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

/* ===================== JUEGO ===================== */
.b8-screen { min-height:100svh; min-height:100vh; display:flex; align-items:center; justify-content:center; background:radial-gradient(ellipse at 50% 12%, #26203e 0%, #151030 50%, #090617 100%); color:#cfc8e8; overflow:hidden; }
.b8-screen .exit-btn { background:rgba(30,24,58,.85); color:#a89fd0; border-color:#3c3468; }
.b8-inner { position:relative; width:100%; max-width:480px; min-height:100svh; min-height:100vh; padding:26px 18px 40px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px; text-align:center; }
.b8-title { font-family:Georgia, "Times New Roman", serif; font-size:19px; font-weight:700; letter-spacing:6px; margin:0; color:#b3a7e0; text-transform:uppercase; text-shadow:0 0 18px rgba(150,120,255,.35); }
.b8-conn { margin:0; min-height:20px; font-size:13.5px; color:#8d84b8; font-style:italic; }
.b8-conn.is-ready { color:#c9a84c; }
.b8-conn.is-error { color:#d66; }

/* La bola */
.b8-ball { position:relative; width:min(310px, 82vw); aspect-ratio:1/1; border-radius:50%; background:radial-gradient(circle at 33% 26%, #4a4a55 0%, #1b1b22 34%, #050507 78%); box-shadow:0 22px 60px rgba(0,0,0,.65), inset 0 -14px 40px rgba(0,0,0,.6); cursor:pointer; }
.b8-ball.shaking { animation:b8Shake .5s ease-in-out infinite; }
@keyframes b8Shake {
  0%,100% { transform:translate(0,0) rotate(0deg); }
  20% { transform:translate(-7px,4px) rotate(-3deg); }
  45% { transform:translate(6px,-5px) rotate(2.5deg); }
  70% { transform:translate(-5px,-4px) rotate(-2deg); }
  85% { transform:translate(5px,5px) rotate(2deg); }
}
.b8-gloss { position:absolute; left:14%; top:8%; width:38%; height:26%; border-radius:50%; background:radial-gradient(ellipse, rgba(255,255,255,.5) 0%, transparent 68%); transform:rotate(-18deg); pointer-events:none; }

/* Ventana del líquido */
.b8-window { position:absolute; left:50%; top:50%; width:56%; height:56%; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle at 46% 38%, #14297a 0%, #0a1848 55%, #060e2e 100%); box-shadow:inset 0 8px 26px rgba(0,0,0,.75), inset 0 -3px 10px rgba(70,110,255,.18), 0 0 0 7px #0a0a10; overflow:hidden; }

/* Burbujas al agitar */
.b8-bubble { position:absolute; bottom:-10px; width:9px; height:9px; border-radius:50%; background:rgba(150,180,255,.35); opacity:0; }
.shaking .b8-bubble { animation:b8Bub 1s linear infinite; }
.b8-bubble.b1 { left:22%; animation-delay:0s; }
.b8-bubble.b2 { left:46%; width:6px; height:6px; animation-delay:.25s; }
.b8-bubble.b3 { left:64%; animation-delay:.5s; }
.b8-bubble.b4 { left:36%; width:5px; height:5px; animation-delay:.7s; }
@keyframes b8Bub { 0% { transform:translateY(0); opacity:0; } 15% { opacity:.9; } 100% { transform:translateY(-150px); opacity:0; } }

/* El triángulo con la respuesta */
.b8-tri { position:absolute; left:50%; top:54%; width:74%; aspect-ratio:1/0.9; transform:translate(-50%,-46%) translateY(70px) rotate(8deg); opacity:0; filter:blur(4px); transition:transform 1.1s cubic-bezier(.2,.8,.3,1), opacity .9s ease, filter 1.1s ease; clip-path:polygon(50% 0%, 100% 86%, 0% 86%); background:linear-gradient(180deg, #1d3aa0 0%, #10214f 80%); display:flex; align-items:center; justify-content:center; }
.b8-tri.up { transform:translate(-50%,-46%) translateY(0) rotate(0deg); opacity:1; filter:blur(0); }
.b8-answer { display:block; width:62%; margin-top:-4%; font-size:17px; line-height:1.25; font-weight:700; color:#dbe6ff; text-shadow:0 0 10px rgba(120,160,255,.5); }
.b8-answer.small { font-size:13.5px; }

.b8-hint { margin:0; font-family:Georgia, serif; font-size:13px; letter-spacing:1.5px; color:#8d84b8; font-style:italic; }

.b8-new { font-size:14px; font-weight:800; letter-spacing:2px; padding:13px 38px; border-radius:14px; border:1px solid #5a4d8a; background:linear-gradient(135deg,#2e2752,#171232); color:#cfc0f0; cursor:pointer; box-shadow:0 6px 20px rgba(0,0,0,.5); }
.b8-new:active { transform:translateY(1px); }
.b8-new:disabled { opacity:.4; cursor:default; }

/* ===================== CONTROL ===================== */
.field textarea { width:100%; padding:22px 16px 10px; font-size:15px; border:1.5px solid var(--line); border-radius:12px; background:#fff; color:inherit; outline:none; resize:vertical; font-family:inherit; }
.field textarea:focus { border-color:var(--brand1); box-shadow:0 0 0 3px rgba(108,92,231,.15); }
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label { top:6px; font-size:11px; color:var(--brand1); transform:none; }

.b8-arm { width:100%; padding:12px; border-radius:13px; border:none; cursor:pointer; color:#fff; font-weight:800; letter-spacing:.5px; background:linear-gradient(135deg,#6c5ce7,#4834b8); }
.b8-arm:active { transform:translateY(1px); }
.b8-note { margin:0; font-size:12px; color:var(--muted); text-align:left; width:100%; }
.b8-clear { width:100%; padding:12px; border-radius:13px; border:none; cursor:pointer; color:#e6e9f2; font-weight:800; letter-spacing:.5px; background:#3a4150; }
.b8-clear:active { transform:translateY(1px); }