/* ============================================================
   ZERO BINGO V76 · FIESTA
   Zero stays the brand. Bingo gets its own bright game identity.
   ============================================================ */
:root{
  --zb-ink:#070916;
  --zb-night:#090a1b;
  --zb-panel:rgba(13,15,38,.78);
  --zb-cyan:#20e6ff;
  --zb-blue:#3f7cff;
  --zb-violet:#8a55ff;
  --zb-pink:#ff3fb4;
  --zb-orange:#ff8a32;
  --zb-yellow:#ffd84a;
  --zb-green:#39e58c;
  --zb-white:#f8fbff;
}
html{background:#070916}
body{
  background:
    radial-gradient(circle at 8% 8%,rgba(32,230,255,.15),transparent 27%),
    radial-gradient(circle at 92% 12%,rgba(255,63,180,.15),transparent 28%),
    radial-gradient(circle at 50% 100%,rgba(138,85,255,.17),transparent 35%),
    linear-gradient(145deg,#060714,#0b0b20 48%,#080714)!important;
  color:#f7fbff;
}
body:before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.55;
  background-image:
    radial-gradient(circle at 12% 22%,rgba(255,216,74,.22) 0 2px,transparent 3px),
    radial-gradient(circle at 84% 28%,rgba(32,230,255,.20) 0 2px,transparent 3px),
    radial-gradient(circle at 24% 76%,rgba(255,63,180,.18) 0 2px,transparent 3px),
    radial-gradient(circle at 72% 82%,rgba(57,229,140,.16) 0 2px,transparent 3px);
  background-size:170px 170px,210px 210px,240px 240px,280px 280px;
}
.zp-topbar,.bingo-tv-header{
  background:linear-gradient(90deg,rgba(8,10,27,.90),rgba(17,12,40,.78))!important;
  border-color:rgba(255,255,255,.10)!important;
  box-shadow:0 14px 42px rgba(0,0,0,.24)!important;
}
.zp-play-name,.zp-brand-name{color:#fff!important}
.zp-play-name span,.zp-accent{
  background:linear-gradient(90deg,var(--zb-cyan),var(--zb-violet),var(--zb-pink));
  -webkit-background-clip:text;background-clip:text;color:transparent!important;
}
.zp-play-mode{color:#bcefff!important;letter-spacing:.17em!important}
.zp-pill{
  background:rgba(255,255,255,.07)!important;
  border-color:rgba(32,230,255,.22)!important;color:#dffbff!important;
}
.zp-card,.bingo-panel,.bingo-tv-board-panel,.bingo-tv-combos-panel,
.bingo-qr-panel,.bingo-tv-remaining,.zp-rejoin-card,.bingo-config-card,
.bingo-admin-panel{
  background:linear-gradient(145deg,rgba(15,17,44,.88),rgba(7,9,25,.78))!important;
  border-color:rgba(126,220,255,.15)!important;
  box-shadow:0 18px 50px rgba(0,0,0,.27),inset 0 1px rgba(255,255,255,.04)!important;
  backdrop-filter:blur(15px);
}
.zp-hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 90% 20%,rgba(255,63,180,.14),transparent 32%),
    radial-gradient(circle at 12% 88%,rgba(32,230,255,.12),transparent 30%)!important;
}
.zp-hero:after{
  content:"B  I  N  G  O";
  position:absolute;right:-1%;bottom:-4%;
  font-size:clamp(3.5rem,10vw,8rem);font-weight:1000;letter-spacing:.03em;
  color:rgba(255,255,255,.025);pointer-events:none;
}
.zp-kicker{color:var(--zb-cyan)!important}
.zp-title span{
  background:linear-gradient(90deg,var(--zb-yellow),var(--zb-orange),var(--zb-pink));
  -webkit-background-clip:text;background-clip:text;color:transparent!important;
}
.zp-btn-primary{
  border:0!important;color:#fff!important;
  background:linear-gradient(135deg,#19cfe8,#7657ff 54%,#ff3fae)!important;
  box-shadow:0 9px 25px rgba(105,79,255,.28),inset 0 1px rgba(255,255,255,.18)!important;
}
.zp-btn-soft{
  background:rgba(255,255,255,.055)!important;color:#edfaff!important;
  border-color:rgba(126,220,255,.17)!important;
}
.zp-btn:hover{transform:translateY(-1px)}
.zp-input,.zp-select,input,select,textarea{
  background:rgba(4,6,20,.72)!important;color:#fff!important;
  border-color:rgba(126,220,255,.17)!important;
}
.zp-input:focus,input:focus,select:focus,textarea:focus{
  border-color:rgba(32,230,255,.72)!important;
  box-shadow:0 0 0 3px rgba(32,230,255,.09)!important;
}

/* Bingo letters: a real game palette */
.bingo-row-b .bingo-num-head,.bingo-letter-b{background:linear-gradient(135deg,#14d8f4,#3287ff)!important}
.bingo-row-i .bingo-num-head,.bingo-letter-i{background:linear-gradient(135deg,#4b79ff,#7658ff)!important}
.bingo-row-n .bingo-num-head,.bingo-letter-n{background:linear-gradient(135deg,#8a55ff,#cf4cff)!important}
.bingo-row-g .bingo-num-head,.bingo-letter-g{background:linear-gradient(135deg,#ff3fb4,#ff676f)!important}
.bingo-row-o .bingo-num-head,.bingo-letter-o{background:linear-gradient(135deg,#ff8a32,#ffd84a)!important;color:#201306!important}
.bingo-num-head{color:#fff!important;text-shadow:0 1px 3px rgba(0,0,0,.25)}
.bingo-num-cell{
  background:rgba(255,255,255,.055)!important;
  border-color:rgba(255,255,255,.07)!important;color:#cbd7e5!important;
}
.bingo-num-cell.called,.bingo-num-cell.active,.bingo-num-cell.is-called{
  color:#07101b!important;background:#fff!important;
  box-shadow:0 0 0 2px rgba(32,230,255,.45),0 0 20px rgba(32,230,255,.20)!important;
}
.bingo-ball,.bingo-last-ball,.bingo-ball-main{
  box-shadow:0 15px 35px rgba(0,0,0,.28),inset 0 2px 3px rgba(255,255,255,.65)!important;
}
.bingo-ball-letter{color:var(--zb-cyan)!important}
.bingo-tv-code,.bingo-session-code{color:#fff!important}
.bingo-tv-message{color:#dffbff!important}

/* Combination cards become playful without becoming childish */
.bingo-tv-combo,.bingo-combo-card{
  background:linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.025))!important;
  border-color:rgba(255,255,255,.10)!important;
}
.bingo-tv-combo:nth-child(5n+1){border-top-color:var(--zb-cyan)!important}
.bingo-tv-combo:nth-child(5n+2){border-top-color:var(--zb-blue)!important}
.bingo-tv-combo:nth-child(5n+3){border-top-color:var(--zb-violet)!important}
.bingo-tv-combo:nth-child(5n+4){border-top-color:var(--zb-pink)!important}
.bingo-tv-combo:nth-child(5n+5){border-top-color:var(--zb-yellow)!important}

/* Admin operation drawers */
.zero-ops-drawer,.ca-card{
  background:linear-gradient(150deg,rgba(15,17,43,.97),rgba(7,9,25,.96))!important;
  border-color:rgba(32,230,255,.15)!important;
}
.zero-ops-kicker,.ca-kicker{color:var(--zb-cyan)!important}

/* Mobile: retain large touch targets */
@media(max-width:760px){
  .zp-btn{min-height:44px}
  .zp-hero:after{font-size:20vw;bottom:2%}
}

/* TV: slightly richer stage but preserve all existing responsive logic */
.bingo-tv-shell{
  background:
    radial-gradient(circle at 48% -10%,rgba(122,82,255,.18),transparent 33%),
    radial-gradient(circle at 0 100%,rgba(32,230,255,.09),transparent 30%),
    #070916!important;
}
.bingo-tv-footer{
  background:rgba(5,7,19,.68)!important;
  border-color:rgba(255,255,255,.07)!important;
}


/* ============================================================
   V76.2 · QUIRÚRGICO
   Keep the original V76 bingo mini-cards intact.
   Only alignment/text containment is corrected.
   ============================================================ */
@media (max-width:760px){
  .bingo-mobile-combo{
    min-width:0!important;
    overflow:hidden!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    text-align:center!important;
  }
  .bingo-mobile-combo .bingo-pattern-grid{
    margin-left:auto!important;
    margin-right:auto!important;
    flex:0 0 auto!important;
  }
  .bingo-mobile-combo-copy{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    padding-left:8px!important;
    padding-right:8px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    text-align:center!important;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
    overflow-wrap:anywhere!important;
  }
  .bingo-mobile-combo-copy > *{
    max-width:100%!important;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
    text-align:center!important;
  }
}
/* Zero signature: glass remains, without changing mini-card geometry. */
.bingo-mobile-combo{
  background:linear-gradient(145deg,rgba(255,255,255,.085),rgba(255,255,255,.032))!important;
  border-color:rgba(205,240,255,.14)!important;
  backdrop-filter:blur(18px) saturate(145%)!important;
  -webkit-backdrop-filter:blur(18px) saturate(145%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 14px 34px rgba(0,0,0,.20)!important;
}