/* loteria.css — La Lotería del Destino (bombo de gala con bolas de colores) */

/* 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 (escena) ===================== */
.lt-screen { min-height:100svh; min-height:100vh; display:flex; align-items:center; justify-content:center; background:radial-gradient(ellipse at 50% 8%, #33285a 0%, #1d1640 42%, #0e0a24 75%, #070417 100%); color:#cfc8e8; overflow:hidden; position:relative; }
.lt-screen::before { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse at 50% 36%, rgba(201,168,76,.14) 0%, transparent 46%); }
.lt-screen .exit-btn { background:rgba(30,24,58,.85); color:#a89fd0; border-color:#3c3468; }

/* Pantalla completa: el lienzo llena todo; los textos flotan encima. */
.lt-inner { position:fixed; inset:0; }

.lt-frame { position:fixed; inset:0; display:flex; }
.lt-canvas { width:100%; height:100%; flex:1; }

.lt-title { position:fixed; top:12px; left:0; right:0; z-index:5; pointer-events:none; text-align:center; font-family:Georgia, "Times New Roman", serif; font-size:18px; font-weight:700; letter-spacing:5px; margin:0; color:#e8d590; text-transform:uppercase; text-shadow:0 0 22px rgba(232,213,144,.45), 0 2px 4px rgba(0,0,0,.6); }
.lt-title::after { content:""; display:block; width:120px; height:2px; margin:7px auto 0; background:linear-gradient(90deg, transparent, #c9a84c 25%, #f0dfa0 50%, #c9a84c 75%, transparent); }

.lt-status { position:fixed; top:58px; left:0; right:0; z-index:5; pointer-events:none; text-align:center; font-size:12.5px; color:#8d84b8; margin:0; min-height:19px; font-style:italic; text-shadow:0 1px 4px rgba(0,0,0,.7); }
.lt-status.is-ready { color:#c9a84c; }
.lt-status.is-error { color:#d66; }

.lt-caption { position:fixed; bottom:14px; left:50%; transform:translateX(-50%); z-index:5; pointer-events:none; white-space:nowrap; margin:0; font-family:Georgia, serif; font-size:11.5px; letter-spacing:2px; color:#8d84b8; font-style:italic; padding:6px 16px; border:1px solid rgba(201,168,76,.35); border-radius:99px; background:rgba(20,14,44,.75); }

.lt-new { position:fixed; bottom:52px; left:50%; transform:translateX(-50%); z-index:6; font-size:14px; font-weight:800; letter-spacing:3px; padding:14px 46px; border-radius:14px; border:1.5px solid #c9a84c; background:linear-gradient(135deg,#3a2f14 0%,#241c0a 100%); color:#f0dfa0; cursor:pointer; box-shadow:0 6px 24px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,235,180,.25); text-shadow:0 1px 2px rgba(0,0,0,.5); }
.lt-new:active { transform:translate(-50%,1px); }
.lt-new:disabled { opacity:.4; cursor:default; }

/* ===================== CONTROL ===================== */
.lt-save { 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); }
.lt-save:active { transform:translateY(1px); }

.lt-drop { width:100%; display:flex; flex-direction:column; align-items:center; gap:3px; padding:16px 4px; border-radius:13px; border:none; cursor:pointer; color:#fff; font-weight:800; background:linear-gradient(135deg,#22c58b,#0f9d63); }
.lt-drop:active { transform:translateY(1px); }
.lt-drop .big { font-size:16px; letter-spacing:1px; }
.lt-drop .sub { font-size:11px; font-weight:600; opacity:.9; }

.lt-reset { width:100%; padding:12px; border-radius:13px; border:none; cursor:pointer; color:#e6e9f2; font-weight:800; letter-spacing:.5px; background:#3a4150; }
.lt-reset:active { transform:translateY(1px); }