/* ===== Tema Casino: rojo + dorado ===== */
:root{
  --bg:#000000;        /* fondo profundo vino */
  --card:#2a0f0f;      /* tarjetas borgoña oscuro */
  --accent:#FFD700;    /* dorado */
  --accent2:#d90429;   /* rojo vivo para variantes */
  --ok:#30e07a;        /* verde premios */
  --warn:#ffcc4d;
  --danger:#ff5a5a;
  --muted:#f2e6d8;     /* texto apagado crema */
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter,system-ui,Arial;
  background:var(--bg);
  color:#fdebd2;         /* texto principal cálido */
}

.container{max-width:1100px;margin:0 auto;padding:24px}
.card{
  background:var(--card);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  padding:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.35)
}

header{display:flex;gap:16px;align-items:center;justify-content:space-between}

/* Botones */
.btn{
  background:var(--accent2);   /* rojo */
  color:#fff;
  border:none;
  padding:10px 16px;
  border-radius:12px;
  font-weight:700;
  cursor:pointer
}
.btn:hover{filter:brightness(1.05)}
.btn.ghost{
  background:transparent;
  border:1px solid var(--accent2);
  color:var(--accent2)
}
/* Variante dorada para CTAs importantes */
.btn.gold{background:var(--accent);color:#5a2a00}
.header-logo{color:var(--accent)}

/* Layout */
.grid{display:grid;gap:12px}
.briefcases{grid-template-columns:repeat(8,1fr)}

/* ===== Maletines ===== */
.briefcase{
  aspect-ratio:1.2/1;
  background:#3b0f0f;           /* rojo oscuro */
  border:1px solid #5a1414;     /* borde rojizo */
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  cursor:pointer;
  color:#ffe9c6;                /* números claros */
  position:relative;
}

/* Elegido (bloqueado) */
.briefcase.selected{
  border-color:var(--accent);                 /* dorado */
  box-shadow:0 0 0 2px var(--accent) inset;
}
.briefcase.selected::after{
  content:"🔒";
  position:absolute;
  top:6px; right:8px;
  font-size:16px;
  opacity:.95;
}

/* Abierto (mostrar premio) */
.briefcase.open{
  background:#4a1920;           /* contraste */
  color:var(--ok);              /* premio verde */
  font-size:18px;
  cursor:not-allowed;
}

/* Badges / etiquetas */
.badge{
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(255,209,102,.35);
  color:var(--muted);
  font-size:12px
}

/* Oferta del banquero */
.offer{font-size:28px;font-weight:900;color:var(--ok)}

/* Inputs */
.input,select{
  background:#300e0e;                       /* fondo rojo muy oscuro */
  border:1px solid rgba(255,209,102,.25);   /* borde dorado tenue */
  color:#ffe9c6;
  border-radius:10px;
  padding:10px 12px
}

.link{color:var(--accent)}
footer{margin-top:24px;color:var(--muted);font-size:12px;text-align:center}
.prize-wrap{margin:10px 0 6px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.prize-list{display:flex;gap:8px;flex-wrap:wrap}
.chip{
  padding:6px 10px;border-radius:999px;
  border:1px solid rgba(255,209,102,.35);
  color:#ffe9c6;background:rgba(255,209,102,.06);
  font-weight:700;font-size:13px
}
.chip-max{background:#ffd166;color:#5a2a00;border-color:#ffd166}

/* ===== Tablero de premios laterales ===== */
.board{display:grid;grid-template-columns:170px 1fr 170px;gap:14px;align-items:start}
.prize-col{display:flex;flex-direction:column;gap:8px}
.prize-item{
  display:flex;justify-content:space-between;align-items:center;
  padding:6px 10px;border-radius:10px;
  border:1px solid rgba(255,209,102,.35);
  background:rgba(255,209,102,.06);color:#ffe9c6;font-weight:800;
  font-variant-numeric:tabular-nums;
}
.prize-item .lbl{opacity:.9}
.prize-item .amt{color:#ffd166}
.prize-item.removed{opacity:.35;text-decoration:line-through}
.board-center{min-height:340px}
@media (max-width:920px){
  .board{grid-template-columns:1fr}
  .prize-col{flex-direction:row;flex-wrap:wrap}
  .prize-item{min-width:120px}
}

/* === (bloque de variables adicionales que ya tenías) === */
:root{
  --bg:#0b0b0b; --panel:#2a0f0f; --panel-2:#3a1515;
  --danger:#ff3e52; --ok:#00e676; --warn:#ffc107;
  --gold:#ffd54f; --gold-2:#ffea00; --txt:#ffe0bd;
}

.glow{ box-shadow:0 0 0.7rem rgba(255,213,79,.35),0 0 2rem rgba(255,234,0,.15) inset; }
.pulse{ animation:pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 0%,100%{transform:scale(1);} 50%{transform:scale(1.03);} }

.flip{ animation:flip .55s ease-out forwards; transform-style:preserve-3d; }
@keyframes flip{ 0%{transform:rotateY(0);} 100%{transform:rotateY(180deg);} }

.shake{ animation:shake .45s linear; }
@keyframes shake{
  10%,90%{transform:translateX(-2px);}
  20%,80%{transform:translateX(3px);}
  30%,50%,70%{transform:translateX(-5px);}
  40%,60%{transform:translateX(5px);}
}

.blink{ animation:blink 1.2s ease-in-out infinite; }
@keyframes blink{ 0%,100%{opacity:1;} 50%{opacity:.35;} }

.count-flash{ animation:countFlash .7s ease; }
@keyframes countFlash{ 0%{background:transparent;} 50%{background:rgba(255,234,0,.15);} 100%{background:transparent;} }

.btn-offer{ transition:.2s transform, .2s filter; }
.btn-offer:hover{ transform:translateY(-1px); filter:brightness(1.1); }

.case{
  position:relative; cursor:pointer; border-radius:.8rem;
  background:var(--panel-2); color:var(--txt);
  transition:.18s transform, .2s filter, .2s box-shadow;
}
.case:hover:not(.opened){ transform:translateY(-2px); filter:brightness(1.12); box-shadow:0 0 .5rem rgba(255,234,0,.25); }
.case.selected{ outline:2px solid var(--gold); box-shadow:0 0 1rem rgba(255,234,0,.45); }
.case.opened{ opacity:.45; cursor:default; filter:grayscale(.2); }

#offerBox{ background:var(--panel); border-radius:1rem; }
#offerAmount{
  font-weight:800; font-size:2.2rem; color:var(--ok);
  text-shadow:0 0 10px rgba(0,230,118,.35);
}
#offerAmount.pulse-gold{ color:var(--gold-2); text-shadow:0 0 12px rgba(255,234,0,.55); }

/* =========================================================
   MARCO DE FOCOS AMARILLOS TIPO CASINO (animación chasing)
   Envuelve tu .board con: <div class="marquee"> ... </div>
   ========================================================= */
.marquee{
  /* Tamaño/espaciado de focos */
  --bulb-size: 18px;
  --bulb-gap:  26px;
  --stride: calc(var(--bulb-size) + var(--bulb-gap));

  /* Colores amarillos/dorados para el marco */
  --bulb-on:   #ffd84a;                 /* foco encendido */
  --bulb-dim:  #7a5a00;                 /* foco apagado */
  --bulb-glow: rgba(255,215,64,.65);    /* halo */

  position: relative;
  border-radius: 24px;
  padding: 18px;                        /* espacio interno para que no tape el tablero */
  background: var(--card);
  border: 1px solid rgba(255,209,102,.25);
  box-shadow: 0 0 25px rgba(255,30,30,.25) inset;
}
.marquee > .board{ position: relative; z-index: 2; }

/* Pseudo-elementos que pintan los focos alrededor */
.marquee::before,
.marquee::after{
  content:"";
  position:absolute;
  inset:-28px;                          /* separa los focos hacia afuera */
  border-radius: 32px;
  pointer-events:none;
  filter: drop-shadow(0 0 6px var(--bulb-glow))
          drop-shadow(0 0 12px var(--bulb-glow));
}

/* HORIZONTALES (arriba/abajo) con persecución */
.marquee::before{
  background:
    radial-gradient(circle, var(--bulb-on) 0 70%, #0000 72%)    top left / var(--stride) var(--bulb-size) repeat-x,
    radial-gradient(circle, var(--bulb-dim) 0 70%, #0000 72%)   top left / var(--stride) var(--bulb-size) repeat-x,
    radial-gradient(circle, var(--bulb-on) 0 70%, #0000 72%)    bottom left / var(--stride) var(--bulb-size) repeat-x,
    radial-gradient(circle, var(--bulb-dim) 0 70%, #0000 72%)   bottom left / var(--stride) var(--bulb-size) repeat-x;
  background-position:
    0 0, calc(var(--stride)/2) 0,
    0 100%, calc(var(--stride)/2) 100%;
  animation: bulbsX 0.9s steps(1) infinite;
}

/* VERTICALES (izquierda/derecha) con persecución */
.marquee::after{
  background:
    radial-gradient(circle, var(--bulb-on) 0 70%, #0000 72%)    top left  / var(--bulb-size) var(--stride) repeat-y,
    radial-gradient(circle, var(--bulb-dim) 0 70%, #0000 72%)   top left  / var(--bulb-size) var(--stride) repeat-y,
    radial-gradient(circle, var(--bulb-on) 0 70%, #0000 72%)    top right / var(--bulb-size) var(--stride) repeat-y,
    radial-gradient(circle, var(--bulb-dim) 0 70%, #0000 72%)   top right / var(--bulb-size) var(--stride) repeat-y;
  background-position:
    0 0, 0 calc(var(--stride)/2),
    100% 0, 100% calc(var(--stride)/2);
  animation: bulbsY 0.9s steps(1) infinite;
}

/* Animación por pasos (estilo feria/casino) */
@keyframes bulbsX{
  to {
    background-position:
      var(--stride) 0, 0 0,
      var(--stride) 100%, 0 100%;
  }
}
@keyframes bulbsY{
  to {
    background-position:
      0 var(--stride), 0 0,
      100% var(--stride), 100% 0;
  }
}

/* Responsive del marco */
@media (max-width: 560px){
  .marquee{
    --bulb-size: 14px;
    --bulb-gap:  18px;
    padding: 14px;
  }
  .marquee::before,
  .marquee::after{ inset:-22px; }
}

/* Respeta usuarios que prefieren menos animación */
@media (prefers-reduced-motion: reduce){
  .marquee::before, .marquee::after{ animation:none; opacity:.85; }
}