:root{
  --bg:#024097; --panel:#ffffff; --accent:#024097; --muted:#000000; --text:#000000;
  --green:#29a36a; --red:#024097; --yellow:#d6a508; --blue:#88b1c8; --white:#f2f2f2;
}

*{ box-sizing:border-box }
body{ margin:0; background:var(--bg); color:var(--text); font:16px/1.3 system-ui,Segoe UI,Roboto,Inter,sans-serif }
header{ display:flex; align-items:center; gap:12px; padding:10px 16px; background:#024097 }
header h1{ margin:0; font-size:18px; font-weight:700; }

.wrap{ display:grid; grid-template-columns:260px 1fr; gap:16px; padding:16px }
.left{ display:grid; gap:16px }
.card{ background:var(--panel); border-radius:14px; box-shadow:0 8px 24px rgba(0,0,0,.25); padding:16px }



/* ---------- Patrón / tarjeta ---------- */
.pattern-letters{ display:grid; grid-template-columns:repeat(5,1fr); gap:6px; margin-bottom:6px }
.pattern-letters span{ display:grid; place-items:center; background:#ffffff; border:1px solid #000000; border-radius:8px; font-weight:900; color:#000000; height:28px }
.pattern-grid{ --sz:42px; display:grid; grid-template-columns:repeat(5,var(--sz)); grid-auto-rows:var(--sz); gap:6px; justify-content:center }
.cell{ border:2px solid #024097; background-color: #ffffff; border-radius:8px; display:grid; place-items:center; cursor:pointer }
.cell.active{ background:#024097; border-color:#024097; box-shadow:inset 0 0 0 22px #024097 }
.cell.free{ font-size:12px; color:var(--muted); text-align:center; }

.stats-hidden {
  display: none;          /* No se ve, no ocupa espacio */
}
/* ---------- Controles ---------- */
.controls{ display:grid; gap:10px }
.btn{ border:0; border-radius:10px; padding:12px 14px; font-weight:700; cursor:pointer }
.btn-primary{ background:var(--accent); color:#ffffff }
.btn-ghost{ background:#024097; color:#cfd6e5; border:1px dashed #ffe4e6 }
.btn-danger{ background:#024097; color:#ffd7dc; border:1px solid #ffffff }

/* ---------- Tablero ---------- */
.board-wrap{ display:grid; grid-template-columns:64px 1fr; gap:10px }
.letters-col{ display:grid; grid-template-rows:repeat(5,1fr); gap:8px }
.letters-col .L{ display:grid; place-items:center; background:#024097; border:1px solid #024097; border-radius:10px; font-weight:900; font-size:26px; color:#000000 }

.board{ display:grid; grid-template-columns:repeat(15,1fr); gap:8px }
.num{ aspect-ratio:1/1.05; border-radius:10px; background:#ffffff; display:grid; place-items:center; color:#000000; font-weight:800; font-size:34px; border:1px solid #024097 }
.num.hit{ background:#024097; border-color:#024097; color:#d8ffe9 }

/* ---------- Zona inferior ---------- */
.bottom{ display:grid; grid-template-columns:380px 1fr 300px; gap:16px }

/* ===== Bolas 3D (actual y anteriores) ===== */
.ball, .mini-ball{
  position:relative; border-radius:50%; display:grid; place-items:center;
  /* Variables de tema (se definen con clases B/I/N/G/O) */
  --c1:#efefef;      /* luz de la esfera */
  --c2:#a0a0a0;      /* sombra de la esfera */
  --ring:#d33b3b;    /* color del aro fino y “tick” */
}

/* Bola grande (actual) */
.ball{
  width:260px; aspect-ratio:1; margin:auto; filter:drop-shadow(0 10px 25px rgba(0,0,0,.35));
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.9), rgba(255,255,255,0) 36%),
    radial-gradient(circle at 50% 120%, rgba(0,0,0,.35), rgba(0,0,0,0) 58%),
    radial-gradient(circle at 50% 50%, var(--c1), var(--c2) 72%);
}
/* Disco blanco con doble aro */
.ball::after{
  content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:56%; height:56%; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #fff, #ececec 58%, #d6d6d6 86%);
  border:6px solid #fff;               /* aro blanco grueso */
  outline:4px solid var(--ring);       /* aro del color de la bola */
}

.color-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.color-btn {
  font-size: 13px;
  border: none;
  background: none;
  cursor: pointer;
  transition: transform 0.2s;
}

.color-btn:hover {
  transform: scale(1.2);
}

/* “Tick” de color arriba de la letra */
.ball .letter::before{
  content:""; position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  width:6px; height:14px; border-radius:3px; background:var(--ring);
}
.ball .letter{
  position:absolute; top:22%; left:50%; transform:translateX(-50%);
  font-weight:900; font-size:22px; color:#111; z-index:1;
}
.ball .value{ font-weight:900; font-size:66px; color:#111; z-index:1; }

/* Mini bolas (5 anteriores) */
.mini-ball{
  width:72px; aspect-ratio:1;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.9), rgba(255,255,255,0) 36%),
    radial-gradient(circle at 50% 120%, rgba(0,0,0,.35), rgba(0,0,0,0) 58%),
    radial-gradient(circle at 50% 50%, var(--c1), var(--c2) 72%);
}
.mini-ball::after{
  content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:54%; height:54%; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #fff, #ececec 58%, #d6d6d6 86%);
  border:5px solid #fff; outline:3px solid var(--ring);
}
.mini-ball .letter::before{
  content:""; position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  width:5px; height:10px; border-radius:3px; background:var(--ring);
}
.mini-ball .letter{
  position:absolute; top:22%; left:50%; transform:translateX(-50%);
  font-weight:900; font-size:12px; color:#111; z-index:1;
}
.mini-ball .value{ font-weight:900; font-size:26px; color:#111; z-index:1; }

/* Temas por letra (colores de la esfera y aro) */
.ball.B, .mini-ball.B{ --c1:#62b2ff; --c2:#0d4a8e; --ring:#88b1c8; }
.ball.I, .mini-ball.I{ --c1:#ff6e6e; --c2:#9a1414; --ring:#024097; }
.ball.N, .mini-ball.N{ --c1:#f6f7f9; --c2:#9aa3ad; --ring:#b9c2cc; }
.ball.G, .mini-ball.G{ --c1:#52d18d; --c2:#17643e; --ring:#29a36a; }
.ball.O, .mini-ball.O{ --c1:#ffd24a; --c2:#b27700; --ring:#d6a508; }

/* ---------- Previas / stats / toast ---------- */
.prev{ display:flex; gap:14px; justify-content:center }

.right {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #ffffff;
  padding: 20px;
  border-radius: 12px;
}

.patrocinadores {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.titulo-patrocinadores {
  font-size: 18px;
  color: #e9eef6;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0;
}

.patro-slider {
  width: 100%;
  max-width: 350px;     /* ajusta según tu diseño/pantalla */
  height: 120px;        /* alto fijo del bloque */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.patro-logo {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;  /* respeta proporción de la imagen */
  display: block;
  opacity: 0;
  transition: opacity 0.7s ease-in-out;
}

/* Estados de animación */
.patro-logo.show {
  opacity: 1;
}

.oculto {
  visibility: hidden;  /* no se ve */
}
.stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; text-align:center }
.stats div{ padding:12px; border-radius:10px; background:#909090 }
.big{ font-size:28px; font-weight:900; color:#111;}
.label{ color:var(--muted); font-size:12px }

.toast{ position:fixed; right:16px; bottom:16px; background:#101317; border:1px solid #2b3242; border-radius:10px; padding:10px 12px; color:#cfe1ff; opacity:0; transform:translateY(8px); transition:.2s }
.toast.show{ opacity:1; transform:translateY(0) }

/* ---------- Shuffle (parpadeo) ---------- */
.num.on{
  color:#fff; background:#ffe667; border-color:#c6b158;
  box-shadow:inset 0 0 0 2px #c6b158;
}
.num.dim{ opacity:.25; }
.ball .letter::before,
.mini-ball .letter::before { content:none; display:none; }
/* ===== Takeover BINGO ===== */
.takeover{
  position:fixed; inset:0; z-index:9999;
  display:none; place-items:center;
  background:radial-gradient(1200px 800px at 50% 40%, rgba(255,255,255,.10), rgba(0,0,0,.85) 60%);
  backdrop-filter:saturate(1.1) blur(1px);
}
.takeover.show{ display:grid; animation:fadeIn .25s ease-out both; }
@keyframes fadeIn{ from{opacity:0; transform:scale(.98)} to{opacity:1; transform:scale(1)} }

.takeover-content{ position:relative; text-align:center; user-select:none }
.takeover-word{
  font-weight:900;
  font-size:clamp(64px, 16vw, 220px);
  letter-spacing:.08em;
  line-height:1;
  text-shadow:0 12px 28px rgba(0,0,0,.5);
  -webkit-text-stroke:10px rgba(255,255,255,.26);
  filter:drop-shadow(0 24px 60px rgba(0,0,0,.45));
  animation:pulse 1.2s ease-in-out infinite alternate;
}
@keyframes pulse{ from{ transform:scale(1)} to{ transform:scale(1.03)} }

.takeover-sub{
  margin-top:.25em;
  font: clamp(18px,3.2vw,44px)/1.1 ui-sans-serif,system-ui,Segoe UI,Roboto,Inter;
  color:#fff; letter-spacing:.25em; opacity:.9;
}

/* Colores por letra (coinciden con tu app) */
.takeover-word .B{ color:#1e90ff }
.takeover-word .I{ color:#e44848 }
.takeover-word .N{ color:#e6ebf0 }
.takeover-word .G{ color:#29a36a }
.takeover-word .O{ color:#d6a508 }

/* Botón cerrar (por si quieres ocultarlo antes de los 15s) */
.takeover-close{
  position:absolute; top:-10px; right:-10px;
  width:48px; height:48px; border-radius:50%;
  background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.25);
  font-size:28px; line-height:1; cursor:pointer;
  backdrop-filter:blur(2px);
}
.takeover-close:hover{ background:rgba(255,255,255,.2) }

#qrBackdrop{ position:fixed; inset:0; background:rgba(0,0,0,.5); display:none; z-index:9998; }