:root{
    --bg1:#FDF6EC; --bg2:#F3E9F8; --bg3:#E4F1EC;
    --card:#ffffff; --card2:#FBF7F0; --line:#EAD9C0;
    --txt:#4A3F33; --muted:#7A6C5E;
    --acc:#5FBFA0; --acc-ink:#123A2E;
    --acc2:#6FA8DC; --purple:#B39DDB; --pink:#F2A7C3;
    --warn:#F5D488; --err:#E38B9A; --gold:#E8B75E;
  }
  *{box-sizing:border-box}
  body{margin:0;min-height:100vh;
       background:linear-gradient(135deg,var(--bg1) 0%,var(--bg2) 55%,var(--bg3) 100%);
       background-attachment:fixed;
       color:var(--txt);font-family:'Nunito',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
       padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
  .wrap{max-width:520px;margin:0 auto;padding:16px}
  @media (min-width:768px){ .wrap{max-width:700px} }
  @media (min-width:1100px){ .wrap{max-width:920px;padding:24px} }
  h1,h2,h3{margin:0 0 8px;font-family:'Baloo 2',system-ui,sans-serif}
  h1{font-size:26px} h2{font-size:20px} h3{font-size:15px;color:var(--purple);font-weight:700}
  .card-sinfondo{background:transparent!important;border:none!important;box-shadow:none!important;padding:16px 4px 4px}
  .card-sinfondo h1{text-shadow:0 2px 16px rgba(0,0,0,.5),0 1px 4px rgba(0,0,0,.65)}
  .card-sinfondo p{text-shadow:0 1px 8px rgba(0,0,0,.55)}
  .card{background:var(--card);border:2px solid var(--line);border-radius:20px;padding:16px;margin-bottom:14px;
        box-shadow:0 6px 16px rgba(60,20,0,.12)}
  .row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
  .between{justify-content:space-between}
  input,select,button,textarea{font:inherit}
  input,select,textarea{width:100%;padding:11px 12px;border-radius:12px;border:2px solid var(--line);
       background:var(--card2);color:var(--txt);margin-bottom:10px}
  button{padding:11px 16px;border-radius:14px;border:none;background:var(--acc2);color:#fff;font-weight:800;
       font-family:'Baloo 2',system-ui,sans-serif;letter-spacing:.2px;
       cursor:pointer;transition:transform .1s,opacity .15s;box-shadow:0 4px 0 rgba(0,0,0,.15)}
  button:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}
  button:active{transform:translateY(2px);box-shadow:none}
  .btn-acc{background:var(--acc);color:var(--acc-ink)} .btn-warn{background:var(--warn);color:#4a2e00}
  .btn-err{background:var(--err);color:#fff} .btn-ghost{background:var(--card2);border:2px solid var(--line);color:var(--txt);box-shadow:none}
  .btn-sm{padding:6px 10px;font-size:13px;border-radius:10px}
  .muted{color:var(--muted)} .small{font-size:12.5px}
  .pill{display:inline-block;padding:4px 12px;border-radius:999px;font-size:12px;font-weight:800;font-family:'Baloo 2',sans-serif}
  .pill-live{background:#d4f7ea;color:#04895e} .pill-wait{background:#e0ecff;color:#2a5cd6}
  .teaser-card{background:linear-gradient(120deg,var(--purple),var(--pink));border:none;color:#fff;position:relative;overflow:hidden}
  .teaser-card::after{content:'✨';position:absolute;top:-6px;right:8px;font-size:60px;opacity:.25}
  .teaser-badge{display:inline-block;background:rgba(255,255,255,.25);color:#fff;font-weight:800;font-size:11px;letter-spacing:.5px;padding:3px 10px;border-radius:999px;margin-bottom:6px}
  .teaser-card h3{color:#fff!important}
  .teaser-card p{color:rgba(255,255,255,.9)!important;margin:0}
  .pill-tie{background:#fff1c9;color:#a6720a} .pill-done{background:#eee;color:#888}
  .pill-err{background:#fde2e1;color:#c0392b}
  .frases-row{display:flex;flex-wrap:wrap;gap:6px}
  #chat_burbujas{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:500;
    display:flex;flex-direction:column;gap:6px;max-width:90vw;pointer-events:none}
  .chat-burbuja{background:var(--card);border:2px solid var(--line);border-radius:14px;padding:6px 12px;
    font-size:13px;box-shadow:0 4px 10px rgba(0,0,0,.15);animation:burbujaIn .2s ease-out}
  .chat-burbuja.mia{background:var(--acc);color:var(--acc-ink);border-color:var(--acc)}
  @keyframes burbujaIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
  .err-box{background:#ffe1e9;border:2px solid var(--err);color:#a5123a;padding:10px 12px;border-radius:14px;margin-bottom:10px;font-size:14px;font-weight:700}
  .ok-box{background:#d9fbee;border:2px solid var(--acc);color:#04895e;padding:10px 12px;border-radius:14px;margin-bottom:10px;font-size:14px;font-weight:700}
  .hide{display:none !important}
  .tabs{display:flex;gap:6px;margin-bottom:14px;position:sticky;top:0;padding:10px 0;z-index:5}
  .tab{flex:1;text-align:center;padding:10px 4px;border-radius:14px;background:rgba(255,255,255,.85);color:#6e6e6e;
       font-size:13px;font-weight:700;font-family:'Baloo 2',sans-serif;cursor:pointer;border:2px solid transparent}
  .tab.active{background:var(--purple);color:#fff;border-color:var(--purple)}
  .balls{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
  .ball{width:36px;height:36px;border-radius:50%;background:var(--card2);border:2px solid var(--line);
        display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;font-family:'Baloo 2',sans-serif;color:var(--purple)}
  .ball.last{background:linear-gradient(135deg,var(--acc),#04b589);color:#fff;transform:scale(1.2);box-shadow:0 0 0 3px #06d6a055}
  .carton{background:var(--card2);border:2px solid var(--line);border-radius:14px;padding:8px;margin-bottom:10px}
  .cgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:3px}
  .chead{text-align:center;font-weight:800;font-size:13px;color:var(--acc2);padding:2px 0;font-family:'Baloo 2',sans-serif}
  .cnum{aspect-ratio:1;display:flex;align-items:center;justify-content:center;background:#fff;
        border-radius:8px;font-size:12.5px;font-weight:700}
  .cnum.marked{background:linear-gradient(135deg,var(--gold),#ff9f1c);color:#4a2e00;font-weight:900}
  .qty{display:flex;align-items:center;gap:10px;margin:10px 0}
  .qty button{width:38px;height:38px;padding:0;font-size:18px;flex:none}
  .qty .n{flex:1;text-align:center;font-size:20px;font-weight:800}
  .envs{display:grid;grid-template-columns:repeat(auto-fit,minmax(60px,1fr));gap:8px;margin:10px 0}
  .env{aspect-ratio:3/4;background:linear-gradient(135deg,var(--purple),var(--pink));border:2px solid var(--line);
       border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:22px;cursor:pointer}
  .env.taken{opacity:.3;cursor:not-allowed}
  .env.mine{border-color:var(--acc);box-shadow:0 0 0 3px #06d6a055}
  .spinner{display:inline-block;width:14px;height:14px;border:2px solid #fff5;border-top-color:#fff;
        border-radius:50%;animation:spin .7s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}
  .topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;
          background:rgba(255,255,255,.9);border-radius:16px;padding:10px 14px}
  .topbar b{color:#232323} .topbar .muted{color:#6e6e6e}
  .saldo{font-size:20px;font-weight:800;color:var(--acc-ink);font-family:'Baloo 2',sans-serif}
  a.link{color:var(--acc2);cursor:pointer;text-decoration:underline;font-size:13.5px;font-weight:700}
  table{width:100%;border-collapse:collapse;font-size:13px}
  td,th{padding:6px 4px;border-bottom:2px solid var(--line);text-align:left}
  th{font-family:'Baloo 2',sans-serif;color:var(--purple)}

  /* --- Celebración de premio: confeti + modal --- */
  .confetti{position:fixed;top:-20px;z-index:1000;pointer-events:none;border-radius:2px;animation:fall linear forwards}
  @keyframes fall{to{transform:translateY(110vh) rotate(720deg);opacity:.25}}
  .celebrate-overlay{position:fixed;inset:0;background:rgba(40,10,30,.6);display:flex;align-items:center;
        justify-content:center;z-index:999;padding:20px;animation:fadeIn .25s ease}
  @keyframes fadeIn{from{opacity:0}to{opacity:1}}
  .celebrate-box{background:#fff;border-radius:26px;padding:30px 22px;text-align:center;max-width:340px;width:100%;
        box-shadow:0 20px 60px rgba(0,0,0,.4);animation:popIn .45s cubic-bezier(.34,1.56,.64,1)}
  @keyframes popIn{0%{transform:scale(.3) rotate(-8deg);opacity:0}100%{transform:scale(1) rotate(0);opacity:1}}
  .celebrate-box h1{font-size:30px;margin:0 0 10px;
        background:linear-gradient(90deg,var(--pink),var(--purple),var(--acc2));
        -webkit-background-clip:text;background-clip:text;color:transparent;
        animation:wiggle 1.2s ease-in-out infinite}
  @keyframes wiggle{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
  .celebrate-prize{font-size:17px;font-weight:800;margin:4px 0;font-family:'Baloo 2',sans-serif}
  .celebrate-amount{font-size:28px;font-weight:900;color:var(--acc-ink);margin:12px 0;font-family:'Baloo 2',sans-serif}
  .celebrate-box button{margin-top:8px;width:100%}

  /* --- Layout de juego en vivo: 65% cartones / 35% tablero de bolas --- */
  .juego-live-grid{display:flex;gap:10px;align-items:flex-start}
  .col-bolas{flex:0 0 35%;max-width:35%;min-width:0}
  .col-cartones{flex:1 1 65%;max-width:65%;min-width:0}
  .col-bolas .card,.col-cartones .card{padding:10px}
  @media (max-width:380px){
    .juego-live-grid{flex-direction:column}
    .col-bolas,.col-cartones{flex:1 1 100%;max-width:100%}
  }

  /* Tablero clásico compacto B-I-N-G-O */
  .bolas-board{display:flex;gap:3px;justify-content:space-between}
  .bcol{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
  .bcol-head{text-align:center;font-weight:800;font-size:11px;color:var(--acc2);font-family:'Baloo 2',sans-serif}
  .bcell{text-align:center;font-size:8.5px;padding:2px 0;border-radius:4px;background:var(--card2);color:var(--muted);line-height:1.2}
  .bcell.marked{background:var(--acc);color:#fff;font-weight:800}
  .bcell.last{background:var(--gold);color:#4a2e00;font-weight:900;font-size:12px;position:relative;z-index:1;
        transform:scale(1.3);box-shadow:0 0 0 2px #fff,0 0 10px rgba(255,183,3,.8);animation:pulseLast 1s ease-in-out infinite}
  @keyframes pulseLast{0%,100%{transform:scale(1.3)}50%{transform:scale(1.45)}}

  /* Cuadrícula de cartones que se adapta a la cantidad comprada */
  .cartones-grid{display:grid;gap:calc(10px*var(--n-scale,1))}
  .cartones-grid .carton{margin-bottom:0;padding:calc(8px*var(--n-scale,1));position:relative}
  .cartones-grid .chead{font-size:calc(13px*var(--n-scale,1))}
  .cartones-grid .cnum{font-size:calc(12.5px*var(--n-scale,1))}

  /* Aviso de "ya casi" (tabla llena a 1-2 números) */
  .carton{position:relative}
  .carton-badge{position:absolute;top:-8px;right:-8px;background:linear-gradient(135deg,var(--err),var(--pink));
        color:#fff;font-size:10px;font-weight:800;padding:3px 8px;border-radius:999px;
        box-shadow:0 3px 8px rgba(0,0,0,.25);animation:pulseBadge 1s ease-in-out infinite;z-index:2;white-space:nowrap}
  .carton-badge.hide{display:none}
  @keyframes pulseBadge{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}

  /* Parpadeo de línea (azul) y de 4 esquinas (rosa) próximas a completarse */
  .cnum.blink-line{--blink-color:var(--acc2);animation:blinkRing .8s ease-in-out infinite}
  .cnum.blink-corner{--blink-color:var(--pink);animation:blinkRing .8s ease-in-out infinite}
  @keyframes blinkRing{0%,100%{box-shadow:0 0 0 2px transparent}50%{box-shadow:0 0 0 3px var(--blink-color)}}

  /* --- Selector de tema (botón flotante) --- */
  #theme_fab{position:fixed;bottom:14px;right:14px;z-index:200}
  #wsp_fab{position:fixed;bottom:14px;left:14px;z-index:200;width:46px;height:46px;border-radius:50%;
    background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;font-size:24px;
    box-shadow:0 4px 14px rgba(0,0,0,.2);text-decoration:none}
  .theme-fab-btn{width:46px;height:46px;border-radius:50%;font-size:20px;padding:0;
        box-shadow:0 4px 14px rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center}
  .theme-panel{position:absolute;bottom:56px;right:0;background:#fff;border-radius:18px;padding:12px;
        display:flex;gap:10px;box-shadow:0 10px 30px rgba(0,0,0,.3);align-items:center}
  .theme-panel.hide{display:none}
  .theme-swatch{width:36px;height:36px;border-radius:50%;cursor:pointer;border:3px solid #fff;
        box-shadow:0 0 0 2px #ddd;transition:transform .15s}
  .theme-swatch:active{transform:scale(.9)}
  .theme-swatch.active{box-shadow:0 0 0 3px var(--acc2,#333)}

  /* Cartón que ya ganó Línea o 4 Esquinas */
  .carton.ganador-linea{border-color:var(--acc2)!important;background:#e8f4ff}
  .carton.ganador-esquinas{border-color:var(--pink)!important;background:#fce8f3}
  .carton.ganador-linea.ganador-esquinas{border-color:var(--gold)!important;background:#fff6e0}
  .carton.ganador-tabla{border-color:var(--acc)!important;box-shadow:0 0 0 2px var(--acc)}

  /* Layout móvil: número grande arriba */
  .bola-actual-movil{display:none;text-align:center;font-size:40px;font-weight:900;
    font-family:'Baloo 2',sans-serif;padding:14px;margin-bottom:10px;
    background:var(--card2);border:2px solid var(--line);border-radius:16px;color:var(--acc-ink)}
  .bola-actual-movil .sub{font-size:13px;font-weight:600;color:var(--muted);margin-top:4px}
  @media (max-width:600px){
    .juego-live-grid{flex-direction:column}
    .col-bolas,.col-cartones{flex:1 1 100%;max-width:100%}
    .bola-actual-movil{display:block}
    .col-bolas .card h3{font-size:13px}
  }

  /* --- Recargas / retiros / alarma --- */
  button:disabled{opacity:.55;cursor:not-allowed}
  .demo-box{background:#fff6e0;border:2px dashed var(--gold);color:#7a5200;padding:8px 10px;border-radius:12px;font-size:13px;margin:8px 0}
  .pend-box{background:#e0ecff;border:2px solid var(--acc2);color:#1f3f8a;padding:10px 12px;border-radius:14px;margin:8px 0;font-size:14px}
  .qr-row{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0 12px}
  .qr-card{flex:1 1 140px;text-align:center;background:var(--card2);border:2px solid var(--line);border-radius:14px;padding:10px}
  .qr-img{width:100%;max-width:170px;border-radius:8px}
  .qr-ph{width:100%;max-width:170px;aspect-ratio:1/1;margin:0 auto 6px;border:3px dashed var(--line);border-radius:10px;
         display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:900;font-size:26px;color:var(--muted)}
  #alarma-bar{position:sticky;top:0;z-index:9999;display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:space-between;
         background:#c0392b;color:#fff;padding:10px 12px;font-weight:800;font-size:14px;animation:alarmaPulso 1s ease-in-out infinite}
  #alarma-bar button{background:#fff;color:#c0392b;box-shadow:none}
  @keyframes alarmaPulso{0%,100%{background:#c0392b}50%{background:#e74c3c}}

  /* --- ¿Jugamos? --- */
  #jugamos-bar{position:fixed;left:8px;right:8px;top:8px;z-index:9998;background:#1e8e3e;color:#fff;padding:10px 12px;border-radius:12px;font-weight:700;font-size:14px;display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:space-between;box-shadow:0 4px 14px rgba(0,0,0,.3)}
  #jugamos-bar button{background:#fff;color:#111;box-shadow:none}
  .badge-n{background:#e74c3c;color:#fff;border-radius:999px;padding:1px 7px;font-size:11px;font-weight:800;margin-left:4px}
  .ojito{position:absolute!important;right:4px;top:0;bottom:0;width:auto!important;padding:0 12px!important;background:transparent!important;box-shadow:none!important;border:none!important;font-size:18px;line-height:1;color:var(--txt)!important;margin:0!important;display:flex;align-items:center}
  .ojito:active{transform:none!important}
  .sala-hero{background:linear-gradient(135deg,#fff7e6,#ffe9f3 60%,#e8f4ff);border:2px solid var(--line)}
  .sala-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
  .sala-cd{text-align:center;background:#fff;border-radius:14px;padding:6px 12px;box-shadow:0 2px 0 rgba(0,0,0,.08)}
  .sala-cd .cd{font-family:'Baloo 2',sans-serif;font-size:24px;font-weight:800;color:var(--acc2);line-height:1.1}
  .prog{height:12px;border-radius:99px;background:#fff;border:2px solid var(--line);overflow:hidden;margin-top:10px}
  .prog-fill{height:100%;background:linear-gradient(90deg,var(--gold),#ff9f1c);transition:width .5s}
  .prog-fill.ok{background:linear-gradient(90deg,var(--acc),#04b589)}
  .tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
  .tile{background:#fff;border-radius:14px;padding:8px 4px;text-align:center;box-shadow:0 2px 0 rgba(0,0,0,.08)}
  .tile .ti{font-size:20px} .tile .tl{font-size:11px;color:var(--muted,#777);font-weight:700} .tile .tv{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:16px;color:var(--acc-ink)}
  .buy-head{display:flex;justify-content:space-between;align-items:center}
  .chip-precio{background:var(--acc);color:var(--acc-ink);border-radius:99px;padding:3px 12px;font-weight:800;font-size:13px}
  .chips-qty{display:flex;gap:8px;margin:10px 0}
  .chips-qty .chipq{flex:1;padding:8px 0;border-radius:12px} .chips-qty .chipq.sel{background:var(--acc);color:var(--acc-ink);border-color:var(--acc)}
  .buy-total{display:flex;justify-content:space-between;align-items:baseline;margin:6px 0 10px}
  .buy-total b{font-family:'Baloo 2',sans-serif;font-size:24px;color:var(--acc-ink)}

  /* v16: superficies blancas fijas llevan texto oscuro fijo (en temas oscuros el texto heredado era casi blanco) */
  .cnum{color:#4A3F33}
  .celebrate-box{color:#4A3F33}
  .tab:not(.active){color:#5B4F43}
  .sala-hero{color:#4A3F33}
  .sala-hero .muted,.sala-cd .muted,.tile .tl{color:#6B5D4F}
  .sala-cd .cd{color:#2F67AD}
  .buy-total b{color:var(--txt)}
  .bola-actual-movil{color:var(--txt)}
  .wrap{padding-bottom:84px}   /* los botones flotantes (💬 🎨) ya no tapan el final de la pantalla */

  /* v17: lobby con 3 estilos (pastel / neón / premium). Colores propios de cada estilo para que el texto siempre se lea. */
  .lb-sel{display:flex;gap:6px;margin:4px 0 12px}
  .lb-chip{flex:1;border:2px solid var(--line);background:var(--card);color:var(--txt);border-radius:999px;padding:7px 8px;font-weight:800;font-size:13px;cursor:pointer}
  .lb-chip.on{background:var(--acc);color:var(--acc-ink);border-color:transparent}
  .lbc{display:flex;gap:12px;align-items:center;flex-wrap:wrap;border-radius:22px;padding:14px;margin-bottom:12px;border:2px solid}
  .lb-mini{display:grid;grid-template-columns:repeat(5,1fr);gap:2px;width:62px;flex:none}
  .lb-mini i{aspect-ratio:1;border-radius:3px;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:9px}
  .lb-info{flex:1;min-width:150px;display:flex;flex-direction:column;gap:3px}
  .lb-name{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:21px;line-height:1.1}
  .lb-tag{font-size:12px;font-weight:800}
  .lb-price{font-weight:800;font-size:15px}
  .lb-meta,.lb-cupo{font-size:12px}
  .lb-st{font-size:13px;font-weight:700}
  .lb-st small{font-weight:600;font-size:12px}
  .lb-act{display:flex;flex-direction:column;gap:6px;align-items:stretch}
  .lb-btn{border:0;border-radius:14px;padding:11px 16px;font-weight:800;font-size:15px;cursor:pointer;color:#fff}
  .lb-mas{width:100%;font-size:12px;display:flex;gap:8px;align-items:center;justify-content:space-between;border-top:1px dashed currentColor;padding-top:8px}
  .lb-mas button{border:0;border-radius:10px;padding:6px 10px;font-weight:800;cursor:pointer}
  .lb-pastel .lbc{color:#3d3550;border-color:rgba(255,255,255,.85);box-shadow:0 6px 16px rgba(120,90,160,.15)}
  .lb-pastel .c0{background:linear-gradient(135deg,#e8fbf3,#c9f1e1)} .lb-pastel .c1{background:linear-gradient(135deg,#fff1e6,#ffd9c4)} .lb-pastel .c2{background:linear-gradient(135deg,#f4edff,#dccbff)}
  .lb-pastel .c0 .lb-btn{background:#17795a} .lb-pastel .c1 .lb-btn{background:#c93a45} .lb-pastel .c2 .lb-btn{background:#6a45d6}
  .lb-pastel .lb-mini i{background:rgba(255,255,255,.85);box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)} .lb-pastel .lb-mini i.fr{background:#ffd54a;color:#6b4a00}
  .lb-pastel .lb-mas button{background:#fff;color:#3d3550}
  .lb-neon .lbc{background:#0a0e1f;color:#fff}
  .lb-neon .c0{border-color:#22d3ee;box-shadow:0 0 14px rgba(34,211,238,.35)} .lb-neon .c1{border-color:#fb923c;box-shadow:0 0 14px rgba(251,146,60,.35)} .lb-neon .c2{border-color:#fbbf24;box-shadow:0 0 14px rgba(251,191,36,.4)}
  .lb-neon .c0 .lb-name,.lb-neon .c0 .lb-mini{color:#22d3ee} .lb-neon .c1 .lb-name,.lb-neon .c1 .lb-mini{color:#fb923c} .lb-neon .c2 .lb-name,.lb-neon .c2 .lb-mini{color:#fbbf24}
  .lb-neon .lb-mini i{box-shadow:inset 0 0 0 1px currentColor;background:transparent} .lb-neon .lb-mini i.fr{background:currentColor;color:#0a0e1f}
  .lb-neon .lb-btn{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 2px currentColor}
  .lb-neon .c0 .lb-btn{color:#4ade80} .lb-neon .c1 .lb-btn{color:#fdba74} .lb-neon .c2 .lb-btn{color:#fca5a5}
  .lb-neon .lb-mas button{background:transparent;box-shadow:inset 0 0 0 1px #fff;color:#fff}
  .lb-premium .lbc{color:#fff;border-color:rgba(255,255,255,.2)}
  .lb-premium .c0{background:linear-gradient(135deg,#15439a,#0b2257)} .lb-premium .c1{background:linear-gradient(135deg,#9a4a10,#522708)} .lb-premium .c2{background:linear-gradient(135deg,#7a1020,#3f0714);border-color:#e8b44a}
  .lb-premium .c2 .lb-name{color:#f4d37a}
  .lb-premium .lb-mini i{background:rgba(255,255,255,.2)} .lb-premium .lb-mini i.fr{background:#f4d37a;color:#5a3a00}
  .lb-premium .c0 .lb-btn{background:#11772f} .lb-premium .c1 .lb-btn{background:#a95508} .lb-premium .c2 .lb-btn{background:#c42030}
  .lb-premium .lb-mas button{background:rgba(255,255,255,.15);color:#fff}
  /* v18: aviso fuera de horario + eventos en vivo en el lobby */
  .lb-aviso{border-radius:18px;padding:12px 14px;margin:0 0 12px;color:#fff;background:linear-gradient(135deg,#4b3a8f,#6a45d6);box-shadow:0 6px 16px rgba(60,20,120,.25);font-weight:700;font-size:14px;line-height:1.35}
  .lb-aviso b{display:block;font-family:'Baloo 2',sans-serif;font-size:21px;margin:2px 0}
  .lb-aviso small{font-weight:600;opacity:.92;font-size:12.5px}
  .lb-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
  .lb-chips:empty{display:none}
  .lb-ev{display:inline-block;border-radius:999px;padding:4px 10px;font-size:12px;font-weight:800;background:#ffd54a;color:#5a3a00}
  .lb-ev.casi{background:#ff6b4a;color:#fff;animation:lbpulse 1s ease-in-out infinite}
  @keyframes lbpulse{50%{transform:scale(1.07)}}
  /* v19: pantalla en vivo — número grande, tira de bolas, cartones grandes */
  .juego-live-grid{flex-direction:column;align-items:stretch}
  .col-bolas,.col-cartones{flex:1 1 100%;max-width:100%;width:100%}
  .bola-hero{text-align:center;border-radius:20px;padding:8px 12px;margin-bottom:8px;background:linear-gradient(135deg,#F5D488,#E8B75E);color:#4a2e00;border:2px solid #fff;box-shadow:0 6px 16px rgba(180,120,0,.25)}
  .bola-hero .num{font-family:'Baloo 2',sans-serif;font-weight:900;font-size:62px;line-height:1.05}
  .bola-hero .num small{font-size:26px;margin-right:6px;opacity:.8}
  .bola-hero .sub{font-size:13px;font-weight:700}
  .tira{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px}
  .tb{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;font-family:'Baloo 2',sans-serif;background:#e9e4f5;color:#4A3F33}
  .tb.r{background:#6a45d6;color:#fff}
  .tb.u{background:#E8B75E;color:#4a2e00;box-shadow:0 0 0 3px #fff,0 0 10px rgba(232,183,94,.9);animation:pulseTb 1s ease-in-out infinite}
  @keyframes pulseTb{50%{transform:scale(1.15)}}
  .casi-aviso{border-radius:16px;padding:10px 12px;background:linear-gradient(135deg,#ff6b4a,#f2849f);color:#fff;font-weight:800;font-size:14.5px;line-height:1.35;box-shadow:0 4px 12px rgba(255,107,74,.35)}
  .casi-aviso:empty{display:none}

/* v27: cartones vendidos/faltantes bien visibles y mensaje de inicio */
.lb-prog{background:rgba(255,255,255,.94);color:#2b2540;border-radius:14px;padding:8px 10px;margin:6px 0}
.lb-prog-n{font-size:22px;line-height:1.15}
.lb-prog-n small{font-size:13px;font-weight:700}
.lb-prog-bar{height:12px;border-radius:99px;background:#e2dcf3;overflow:hidden;margin:6px 0 3px}
.lb-prog-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#ff9f43,#ff6b4a);transition:width .5s}
.lb-prog.ok .lb-prog-bar i{background:linear-gradient(90deg,#2fbf71,#7be0a6)}
.lb-prog-s{font-size:12px;font-weight:700;opacity:.8}
.prog-num{font-size:26px;line-height:1.15;margin-top:8px}
.prog-num small{font-size:14px;font-weight:700}
.intro-ov{position:fixed;inset:0;z-index:900;background:rgba(20,10,40,.6);display:flex;align-items:center;justify-content:center;padding:18px}
.intro-box{background:#fff;border-radius:26px;padding:22px 18px;max-width:420px;width:100%;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.45)}
.intro-t{font-family:'Baloo 2',sans-serif;font-size:30px;font-weight:900}
.intro-n{font-size:22px;margin:6px 0}
.intro-s{font-size:14px;opacity:.75;font-weight:700}
.intro-p{display:flex;gap:8px;margin:12px 0}
.intro-p>div{flex:1;background:#f4effc;border-radius:14px;padding:8px 4px;font-size:13px;font-weight:700}
.intro-p b{font-size:20px}
.intro-bar{height:6px;border-radius:99px;background:#eee;overflow:hidden;margin-top:12px}
.intro-bar i{display:block;height:100%;background:#6a45d6;animation:introbar 8s linear forwards}
@keyframes introbar{from{width:100%}to{width:0}}

/* v28: pantalla de PC (panel izquierdo + cartones grandes a la derecha) y panel del director */
@media (min-width:1000px){
  body.juego-wide .wrap{max-width:1280px;padding:24px}
  body.juego-wide .juego-live-grid{display:grid;grid-template-columns:360px 1fr;gap:16px;align-items:start}
  body.juego-wide .juego-live-grid .col-bolas{grid-column:1;grid-row:1}
  body.juego-wide .juego-live-grid .casi-aviso{grid-column:1;grid-row:2}
  body.juego-wide .juego-live-grid .col-cartones{grid-column:2;grid-row:1 / span 2}
  body.juego-wide .bola-hero .num{font-size:84px}
  body.juego-wide .tb{width:36px;height:36px;font-size:15px}
}
.director .btn,.director .btn-ghost{flex:1;padding:10px 6px;line-height:1.2}
.director .btn-warn,.director .btn-err{flex:1}

/* v29: empate explicado a todos + resultado */
.tie-ov{position:fixed;inset:0;z-index:850;background:rgba(20,10,40,.74);display:flex;align-items:center;justify-content:center;padding:14px;overflow:auto}
.tie-box{background:#fff;border-radius:24px;padding:18px 16px;max-width:460px;width:100%;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.tie-t{font-family:'Baloo 2',sans-serif;font-size:28px;font-weight:900;color:#c2410c;line-height:1.1}
.tie-n{font-size:19px;margin:6px 0}
.tie-names{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:8px 0}
.tie-names span{background:#f4effc;border-radius:99px;padding:5px 12px;font-weight:800}
.tie-names span.yo{background:#ffd54a}
.tie-prem{font-size:18px;margin:8px 0}
.tie-exp{font-size:15px;line-height:1.4;background:#fff7e6;border-radius:14px;padding:10px;margin:8px 0;text-align:left}
.tie-acc{margin:10px 0}
.tie-acc .btn-acc,.tie-acc .btn-warn{padding:12px 8px;font-size:15px}
.tie-fila{display:flex;justify-content:space-between;align-items:center;background:#f4effc;border-radius:12px;padding:8px 12px;margin:5px 0;font-size:17px;font-weight:800}
.tie-fila.gana{background:#ffe9a8}
.tie-cd{height:6px;border-radius:99px;background:#eee;overflow:hidden;margin-top:10px}
.tie-cd i{display:block;height:100%;width:100%;background:#ff6b4a}
@keyframes tiebar{from{width:100%}to{width:0}}
body.juego-wide .col-bolas .bola-hero{margin:10px 0 0}

/* v30: pantalla de la hoja */
.hoja-fila{display:flex;align-items:center;justify-content:space-between;gap:10px}
.hoja-letras{display:flex;gap:6px}
.hoja-letras span{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Baloo 2',sans-serif;font-weight:900;font-size:18px;background:#e9e4f5;color:#4A3F33}
.hoja-letras span.cur{background:#E8B75E;color:#4a2e00;box-shadow:0 0 0 3px #fff,0 0 12px rgba(232,183,94,.9)}
.hoja-letras span.done{background:#6a45d6;color:#fff}
.hoja-mini{display:grid;grid-template-columns:repeat(5,12px);gap:2px}
.hoja-mini i{width:12px;height:12px;border-radius:3px;background:#e9e4f5}
.hoja-mini i.on{background:#6a45d6}.hoja-mini i.cen{background:#E8B75E}
.hoja-pausa,.hoja-anuncio{border-radius:16px;padding:10px 12px;margin-bottom:8px;font-weight:800;text-align:center;color:#fff;background:linear-gradient(135deg,#4b3a8f,#6a45d6)}
.hoja-anuncio{background:linear-gradient(135deg,#ff9f43,#ff6b4a)}
.hp-fila{display:grid;grid-template-columns:1.3fr auto 1.6fr;gap:6px;align-items:center;padding:6px 8px;border-radius:10px;background:#f4effc;margin:4px 0;font-size:14px}
.hp-fila.ok{background:#ffe9a8}.hp-q{text-align:right;font-weight:700;font-size:13px}
.tabla-h .hc.fuera{opacity:.32}
.tabla-h .hc.fig:not(.marked){background:#f3eeff;box-shadow:inset 0 0 0 2px #6a45d6aa}
.tabla-h .hc.libre{font-size:1.25em}
body.juego-wide .hoja-premios{margin-top:10px}

/* v31 · local y cartón de sala con BINGO */
.loc-code{font-size:34px;font-weight:900;letter-spacing:4px;text-align:center;padding:12px;margin:8px 0;border-radius:14px;background:var(--card2,#fbf7f0);border:2px dashed var(--acc,#5fbfa0);user-select:all}
.lb-mini{width:92px}
.lb-mini i{font-size:8px}
.lb-mini b{display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:900;height:12px}

/* v32 · hoja: solo se ve la letra en juego; marcado manual asistido */
.tabla-h .hc.fuera{visibility:hidden}
.tabla-h.manual .hc.pend{outline:2px dashed #e0a100;outline-offset:-2px;cursor:pointer}
.tabla-h.manual .hc.pulso{animation:hmpulso .7s ease-in-out infinite}
.tabla-h.manual .hc.auto{box-shadow:inset 0 0 0 2px rgba(0,0,0,.28)}
@keyframes hmpulso{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
@media (prefers-reduced-motion:reduce){.tabla-h.manual .hc.pulso{animation:none;outline-width:3px}}

/* v33 · lobby nuevo, sala en una pantalla y temas (Pastel, Noche, Halloween, Navidad) */
.lb{display:flex;flex-direction:column;gap:16px}
.lb .lbc{display:flex;flex-direction:column;gap:12px;padding:18px;border-radius:28px;background:var(--cbg);border:2px solid var(--cbd);color:var(--ctx);box-shadow:none}
.lbn-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.lb .lbc .lb-name{font-size:26px;font-weight:800;line-height:1.1;color:inherit}
.lbn-precio{background:var(--bx);color:var(--ca);border-radius:999px;padding:4px 16px;font-size:30px;font-weight:900;box-shadow:0 3px 0 var(--cbd)}
.lbn-box{background:var(--bx,var(--card2));color:var(--tx,var(--txt));border-radius:20px;padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.lbn-n b{font-size:36px;font-weight:900;line-height:1}.lbn-n span{font-size:18px;font-weight:700;margin-left:8px;opacity:.75}
.lbn-msg{font-size:15px;font-weight:800;color:var(--ca,var(--acc))}
.lbn-bar{position:relative;padding-top:20px}
.lbn-bar em{position:absolute;top:0;transform:translateX(-50%);font-size:11px;font-weight:800;font-style:normal;color:var(--ca,var(--acc));white-space:nowrap}
.lbn-trk{height:14px;border-radius:999px;background:var(--tr,#e6e1f5);overflow:hidden;display:flex}
.lbn-trk .a{background:var(--ca,var(--acc))}.lbn-trk .b{background:var(--co,#8fd0b4)}
.lbn-bar u{position:absolute;top:16px;width:3px;height:22px;border-radius:2px;background:var(--tx,var(--txt));transform:translateX(-50%)}
.lbn-fr{font-size:13px;line-height:1.4}
.lbn-how{background:none;border:0;padding:0;font:inherit;font-weight:800;color:var(--ca,var(--acc));text-decoration:underline;cursor:pointer;box-shadow:none}
.lbn-help{font-size:13px;line-height:1.45;background:rgba(127,127,160,.16);border-radius:12px;padding:10px 12px}
.lb .lbc .lb-st{font-size:22px;font-weight:800;color:inherit}
.lb .lbc .lb-cupo{font-size:13px}
.lb .lbc .lb-btn{height:54px;border:0;border-radius:24px;width:100%;background:var(--ca);color:var(--cbt);font-size:20px;font-weight:800;box-shadow:0 5px 0 var(--cs);cursor:pointer}
.lb-minis{display:flex;gap:8px}
.lb .lb-minis .lb-mini{flex:1;min-width:0;width:auto;background:var(--mb,#fff);border-radius:10px;padding:4px;box-shadow:none}
.lbn-lab{text-align:center;font-size:11px;opacity:.7}
.lb-mini i{transition:transform .3s cubic-bezier(.3,1.7,.5,1),background .25s,color .25s;color:var(--ctx)}
.lb-mini i.k0{background:var(--k0)}.lb-mini i.k1{background:var(--k1)}.lb-mini i.k2{background:var(--k2)}.lb-mini i.k3{background:var(--k3)}.lb-mini i.k4{background:var(--k4)}
.lb-mini b.k0{color:var(--f0)}.lb-mini b.k1{color:var(--f1)}.lb-mini b.k2{color:var(--f2)}.lb-mini b.k3{color:var(--f3)}.lb-mini b.k4{color:var(--f4)}
.lb-mini i.on{transform:scale(1.22) translateY(-2px);position:relative;z-index:2;color:var(--ft)}
.lb-mini i.k0.on{background:var(--f0)}.lb-mini i.k1.on{background:var(--f1)}.lb-mini i.k2.on{background:var(--f2)}.lb-mini i.k3.on{background:var(--f3)}.lb-mini i.k4.on{background:var(--f4)}
.lb-pastel{--bx:#fff;--tx:#2b2350;--tr:#e6e1f5;--mb:#fff;--k0:#d9e8ff;--k1:#ffdce9;--k2:#fff0c7;--k3:#e6deff;--k4:#d3f1e3;--f0:#3b7ddd;--f1:#e05a8a;--f2:#e0a100;--f3:#7a5bd6;--f4:#2fae7a;--ft:#fff;--ctx:#2b2350;--cbt:#fff}
.lb-pastel .c0{--cbg:#d3f1e3;--cbd:#a9dcc3;--ca:#1f7a5a;--cs:#14553f;--co:#8fd0b4}
.lb-pastel .c1{--cbg:#ffdcd1;--cbd:#f6b4a2;--ca:#c8323f;--cs:#8f2230;--co:#f2a9a1}
.lb-pastel .c2{--cbg:#e6dcff;--cbd:#c9b8f5;--ca:#6a45d6;--cs:#4a2fa0;--co:#b9a4f0}
.lb-noche{--bx:#0a0e1f;--tx:#f1f5ff;--tr:#1e293b;--mb:#0a0e1f;--k0:#17254a;--k1:#3a1a3a;--k2:#3a3210;--k3:#2a2150;--k4:#12382e;--f0:#60a5fa;--f1:#f472b6;--f2:#facc15;--f3:#a78bfa;--f4:#34d399;--ft:#0a0e1f;--ctx:#f1f5ff;--cbt:#0a0e1f}
.lb-noche .c0{--cbg:#0a1f26;--cbd:#22d3ee;--ca:#22d3ee;--cs:#0e7490;--co:#155e75}
.lb-noche .c1{--cbg:#26150a;--cbd:#fb923c;--ca:#fb923c;--cs:#c2410c;--co:#9a5a1f}
.lb-noche .c2{--cbg:#26220a;--cbd:#facc15;--ca:#facc15;--cs:#a16207;--co:#8a7a14}
.lb-halloween{--bx:#241338;--tx:#f4e9ff;--tr:#3b2a57;--mb:#150a24;--k0:#2b2f66;--k1:#4d1f45;--k2:#4d3a12;--k3:#38266b;--k4:#1d4a38;--f0:#6fa8ff;--f1:#ff7ab0;--f2:#ffb703;--f3:#b79cff;--f4:#4be0a0;--ft:#1b0b2e;--ctx:#f4e9ff;--cbt:#1b0b2e}
.lb-halloween .c0{--cbg:#3b1d0a;--cbd:#ff7a1a;--ca:#ff7a1a;--cs:#b34d00;--co:#a85a1f}
.lb-halloween .c1{--cbg:#1f2d0f;--cbd:#a3e635;--ca:#a3e635;--cs:#6b9a1a;--co:#6f9a2a}
.lb-halloween .c2{--cbg:#2b1650;--cbd:#a78bfa;--ca:#a78bfa;--cs:#6d4fd6;--co:#7c5cd6}
.lb-navidad{--bx:#0f2f1e;--tx:#fff6dc;--tr:#1d5738;--mb:#0b2418;--k0:#1d3a66;--k1:#5a1f26;--k2:#5a4a14;--k3:#3a2a5a;--k4:#17492e;--f0:#7fb2ff;--f1:#ff8a8a;--f2:#f5d76e;--f3:#c4a8ff;--f4:#5fe3a0;--ft:#2a1a00;--ctx:#fff6dc;--cbt:#2a1a00}
.lb-navidad .c0{--cbg:#4a1118;--cbd:#e0b64a;--ca:#e0b64a;--cs:#a67c1a;--co:#b88a2a}
.lb-navidad .c1{--cbg:#123d26;--cbd:#e0b64a;--ca:#e0b64a;--cs:#a67c1a;--co:#b88a2a}
.lb-navidad .c2{--cbg:#4a3a0e;--cbd:#f5d76e;--ca:#f5d76e;--cs:#a88b1c;--co:#b79b2a}
.sala-wrap{display:flex;flex-direction:column;gap:12px}
.sala-prem{order:99;position:sticky;bottom:8px;z-index:5;background:var(--card);border-radius:20px;padding:10px;box-shadow:0 -4px 14px rgba(0,0,0,.14)}
.sp-h{display:flex;justify-content:space-between;align-items:center;font-weight:800;margin-bottom:6px}
.sp-h b{background:var(--acc);color:var(--acc-ink);border-radius:999px;padding:2px 12px;font-size:18px}
.buy-main{border:2px solid var(--acc);box-shadow:0 6px 0 rgba(0,0,0,.12)}
.sala-hero .lbn-box{background:var(--card2)}
.theme-panel .theme-auto{font-size:11px;padding:4px 8px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--txt);cursor:pointer}

/* v34 · cartones claros, sala manual, pausa, sorteos y vista de PC */
/* BINGO dentro de cuadrículas */
.cgrid .chead{background:var(--acc2,#6FA8DC);color:#fff;border-radius:8px;padding:3px 0;line-height:1.15;text-shadow:0 1px 1px rgba(0,0,0,.25)}
/* Hoja: se ven todas las cuadrículas. Las de la figura en juego, resaltadas; las demás, vacías y tenues */
.tabla-h .hc.fig:not(.marked){background:#efe7ff;box-shadow:inset 0 0 0 2px #6a45d6;font-weight:900;color:#2b2350}
.tabla-h .hc.fuera,.tabla-h .hc.fuera.marked,.tabla-h.manual .hc.fuera.pend,.tabla-h.manual .hc.fuera.pulso,.tabla-h.manual .hc.fuera.auto{
  visibility:visible;color:transparent;background:rgba(120,110,150,.10);box-shadow:inset 0 0 0 1px rgba(120,110,150,.20);
  opacity:1;outline:none;animation:none;cursor:default;font-weight:400}
/* Sala manual: la bola nueva parpadea con fuerza */
@keyframes hmflash{0%,100%{background:#fff3c4;box-shadow:inset 0 0 0 3px #e0a100}50%{background:#ffd54a;box-shadow:inset 0 0 0 3px #ff7a00,0 0 14px 4px rgba(255,160,0,.85)}}
.tabla-h.manual .hc.pulso{animation:hmpulso .7s ease-in-out infinite,hmflash .7s ease-in-out infinite;position:relative;z-index:2}
@keyframes heroBlink{0%,100%{transform:scale(1);box-shadow:0 6px 16px rgba(180,120,0,.25)}50%{transform:scale(1.06);background:linear-gradient(135deg,#fff3b0,#ffb703);box-shadow:0 0 0 6px #fff,0 0 28px 10px rgba(255,120,0,.85)}}
.bola-hero.nueva{animation:heroBlink .75s ease-in-out 10}
@media (prefers-reduced-motion:reduce){.bola-hero.nueva{animation:none;box-shadow:0 0 0 6px #ff7a00}}
/* Pausa entre rondas: siguiente letra + cuenta regresiva grande */
.hoja-pausa{padding:12px}
.hoja-pausa .hp-t{font-size:14px;font-weight:900;letter-spacing:.6px}
.hoja-pausa .hp-row{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;margin-top:6px}
.hp-next{display:flex;flex-direction:column;align-items:center;line-height:1}
.hp-next small{font-size:12px;opacity:.9;font-weight:700}
.hp-next b{font-family:'Baloo 2',sans-serif;font-size:44px;background:#fff;color:#4b3a8f;border-radius:50%;width:62px;height:62px;display:flex;align-items:center;justify-content:center;margin-top:4px}
.hp-cd{font-family:'Baloo 2',sans-serif;font-weight:900;font-size:48px;line-height:1;font-variant-numeric:tabular-nums}
.hoja-pausa .hoja-mini i{background:rgba(255,255,255,.28)}
.hoja-pausa .hoja-mini i.on{background:#fff}
.hoja-pausa .hoja-mini i.cen{background:#E8B75E}
/* Sorteo: sobres numerados; los ocupados no se pueden elegir */
.env{flex-direction:column;gap:2px}
.env .env-n{font-family:'Baloo 2',sans-serif;font-size:24px;line-height:1;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.45)}
.env small{font-size:11px;font-weight:800;color:#fff}
.env.taken{opacity:.35;filter:grayscale(.7);pointer-events:none}
.env.mine{opacity:1;filter:none;pointer-events:none}
/* Celular: cartones y número primero; tira de bolas y premios debajo */
@media (max-width:999px){
  .juego-live-grid .casi-aviso{order:0}
  .juego-live-grid .col-cartones{order:1}
  .juego-live-grid .col-bolas{order:2}
}
/* PC: número arriba a la izquierda, 4 cartones en la misma fila, bolas y premios debajo */
@media (min-width:1000px){
  body.juego-wide .juego-live-grid{grid-template-columns:240px 1fr;grid-template-areas:"hero cart" "aviso aviso" "bolas bolas";gap:16px}
  body.juego-wide .juego-live-grid>.bola-hero{grid-area:hero;margin:0;align-self:start;position:sticky;top:12px}
  body.juego-wide .juego-live-grid .col-cartones{grid-area:cart}
  body.juego-wide .juego-live-grid .casi-aviso{grid-area:aviso}
  body.juego-wide .juego-live-grid .col-bolas{grid-area:bolas;display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:12px;align-items:start}
  body.juego-wide .juego-live-grid .col-bolas .card{margin-bottom:0}
  body.juego-wide .hoja-premios{margin-top:0}
}

/* ============================================================
   v35 · Menú lateral izquierdo, pantalla de juego limpia, premios arriba, pausa final, lobby en vivo
   ============================================================ */

/* --- Menú lateral --- */
.mnu-btn{position:relative;width:42px;height:42px;flex:none;padding:0;border-radius:12px;background:transparent;border:2px solid var(--line);color:#4A3F33;font-size:21px;line-height:1;box-shadow:none;display:flex;align-items:center;justify-content:center}
.mnu-btn:focus-visible,.mnu-it:focus-visible,.mnu-x:focus-visible{outline:3px solid var(--acc2);outline-offset:2px}
.mnu-dot{position:absolute;top:3px;right:3px;width:11px;height:11px;border-radius:50%;background:#e03131;box-shadow:0 0 0 2px #fff}
.mnu-scrim{position:fixed;inset:0;z-index:590;background:rgba(15,8,30,.5);opacity:0;visibility:hidden;transition:opacity .2s,visibility 0s .2s}
.mnu-scrim.open{opacity:1;visibility:visible;transition:opacity .2s}
.mnu{position:fixed;top:0;bottom:0;left:0;z-index:600;width:min(310px,86vw);display:flex;flex-direction:column;background:var(--card);color:var(--txt);border-right:2px solid var(--line);box-shadow:10px 0 30px rgba(0,0,0,.3);transform:translateX(-104%);visibility:hidden;transition:transform .22s ease,visibility 0s .22s;padding-top:env(safe-area-inset-top,0px);outline:none}
.mnu.open{transform:none;visibility:visible;transition:transform .22s ease}
html.mnu-lock,html.mnu-lock body{overflow:hidden}
.mnu-head{display:flex;align-items:center;gap:10px;padding:14px 12px;border-bottom:2px solid var(--line)}
.mnu-av{width:44px;height:44px;flex:none;border-radius:50%;background:var(--purple);color:#fff;font-family:'Baloo 2',sans-serif;font-weight:800;font-size:22px;display:flex;align-items:center;justify-content:center}
.mnu-who{flex:1;min-width:0}
.mnu-nom{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:16px;line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mnu-sub{font-size:12.5px;color:var(--muted)}
.mnu-x{width:36px;height:36px;flex:none;padding:0;border-radius:10px;background:transparent;color:var(--muted);box-shadow:none;font-size:18px}
.mnu-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:4px 8px 12px}
.mnu-sec{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:12px 10px 4px}
.mnu-it{display:flex;align-items:center;gap:12px;width:100%;min-height:46px;padding:8px 10px;margin:0;border-radius:12px;background:transparent;border:0;box-shadow:none;color:var(--txt);font-family:'Nunito',system-ui,sans-serif;font-weight:700;font-size:15px;text-align:left;letter-spacing:0}
.mnu-it:hover{background:var(--card2)}
.mnu-it:active{transform:none;background:var(--card2)}
.mnu-it.cur{background:var(--card2);box-shadow:inset 4px 0 0 var(--purple)}
.mnu-ic{width:26px;flex:none;text-align:center;font-size:19px}
.mnu-tx{flex:1;min-width:0}
.mnu-chip{font-size:11.5px;font-weight:800;color:var(--muted);background:var(--card2);border:1px solid var(--line);border-radius:99px;padding:2px 8px;white-space:nowrap}
.mnu-n{min-width:22px;height:22px;padding:0 6px;border-radius:99px;background:#e03131;color:#fff;font-size:12px;font-weight:800;display:inline-flex;align-items:center;justify-content:center}
.mnu-chev{color:var(--muted);font-size:13px}
.mnu-aj{margin:2px 4px 6px 14px;padding:8px 8px 4px;border-left:3px solid var(--line)}
.mnu-aj[hidden]{display:none}
.mnu-lab{font-size:12px;font-weight:800;color:var(--muted);margin:6px 0 4px}
.mnu-sw{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.mnu-sw .theme-swatch{padding:0;box-shadow:none;width:34px;height:34px}
.mnu-sw .theme-swatch.active{box-shadow:0 0 0 3px var(--acc2,#333)}
.mnu-voz{display:flex;gap:6px;align-items:center}
.mnu-voz select{margin:0;padding:7px 8px;font-size:13px;flex:1;min-width:0}
.mnu-it.sub{min-height:40px;padding-left:2px;font-size:14px}
.mnu-foot{border-top:2px solid var(--line);padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px))}
.mnu-it.out{color:var(--err)}
.adm-bar{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.adm-tit{margin:0;font-size:20px}
.btn-link-wsp{display:block;margin-top:14px;padding:12px;border-radius:14px;background:#25D366;color:#073b1a;text-align:center;font-weight:800;text-decoration:none}
@media (prefers-reduced-motion:reduce){.mnu,.mnu-scrim{transition:none}}

/* --- Pantalla de juego limpia: sin botones flotantes, número más pequeño → cartones más grandes --- */
body.juego-vivo #theme_fab,body.juego-vivo #wsp_fab{display:none}
.bola-hero{padding:3px 12px;margin-bottom:6px;border-radius:16px}
.bola-hero .num{font-size:44px;line-height:1.05}
.bola-hero .num small{font-size:44px;margin-right:12px;opacity:1}
.bola-hero .sub{font-size:12px}
body.juego-wide .bola-hero .num,body.juego-wide .bola-hero .num small{font-size:60px}
@media (min-width:1000px){ body.juego-wide .juego-live-grid{grid-template-columns:200px 1fr} }

/* --- Cabecera compacta con los premios arriba --- */
.hoja-cab{padding:10px 12px;margin-bottom:8px}
.hoja-cab .hoja-letras span{width:30px;height:30px;font-size:15px}
.hoja-tit{margin-top:6px;font-size:14px}
.hoja-sub{font-size:12px;opacity:.85;margin-top:2px}
.hoja-L{display:inline-flex;align-items:center;gap:8px}
.hp-lab{font-size:12px;font-weight:800;margin:8px 0 4px}
.hp-chips{display:grid;grid-template-columns:repeat(auto-fit,minmax(135px,1fr));gap:6px}
.hp-chip{display:grid;grid-template-columns:1fr auto;gap:1px 6px;align-items:center;padding:6px 8px;border-radius:10px;background:var(--card2);color:var(--txt);border:1px solid var(--line);font-size:13px}
.hp-chip b{font-family:'Baloo 2',sans-serif;font-size:15px}
.hp-chip small{grid-column:1/-1;font-size:11px;font-weight:700}
.hp-chip.ok{background:#ffe9a8;color:#4a2e00;border-color:#e8b75e}
body.juego-wide .hoja-premios{margin-top:0}

/* --- Pausa: barra descendente y aviso del Juego en L --- */
.hp-bar{height:8px;border-radius:99px;background:rgba(255,255,255,.28);overflow:hidden;margin-top:10px}
.hp-bar i{display:block;height:100%;width:100%;background:#fff;border-radius:99px;transition:width .5s linear}
.hp-final{margin-top:10px;background:rgba(255,255,255,.16);border-radius:12px;padding:8px;font-size:14px;line-height:1.35}
.hp-finalL{display:flex;justify-content:center;margin-top:6px}
.hp-finalL .hoja-mini i{background:rgba(255,255,255,.28)}
.hp-finalL .hoja-mini i.on{background:#fff}

/* --- Lobby: sala en vivo con número y 3 mini-cartones reales --- */
.lb-livebox{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 0}
.lb-bolaviva{flex:none}
.lb-bn{display:inline-flex;align-items:baseline;gap:8px;font-family:'Baloo 2',sans-serif;font-weight:900;font-size:34px;line-height:1.1;background:linear-gradient(135deg,#F5D488,#E8B75E);color:#4a2e00;border-radius:14px;padding:2px 14px;border:2px solid #fff}
.lb-bn small{font-size:34px;opacity:1}
.lb-livebox .lb-minis{flex:1 1 210px;min-width:0}
.lb-livebox .lbn-lab{flex-basis:100%}
.lb-mini i.off{opacity:.22}
.lb-mini i.fr{font-size:9px}
body.juego-vivo .tabs,body.juego-vivo .demo-box{display:none}
.live-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 6px;font-size:13px}
.live-head .lh-n{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:15px}
.live-head .lh-m{margin-left:auto;font-weight:700;color:var(--muted)}
body.juego-vivo .topbar{margin-bottom:8px}

/* --- v35b: sala de juego como pantalla propia; premios en panel deslizable; número que palpita solo si lo tienes --- */
body.juego-vivo .topbar{display:none}
.live-head .mnu-btn{width:38px;height:38px;font-size:19px;background:var(--card);color:var(--txt)}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:300;margin:0 auto;max-width:520px;max-height:78vh;display:flex;flex-direction:column;padding:0;
  background:var(--card);color:var(--txt);border:2px solid var(--line);border-bottom:0;border-radius:18px 18px 0 0;box-shadow:0 -6px 20px rgba(0,0,0,.22);
  transform:translateY(calc(100% - 46px - env(safe-area-inset-bottom,0px)));transition:transform .25s ease}
.sheet.open{transform:none}
.sheet-h{width:100%;height:46px;flex:none;display:flex;align-items:center;gap:10px;padding:0 14px;position:relative;background:transparent;color:var(--txt);border:0;box-shadow:none;border-radius:18px 18px 0 0;font-size:14px;font-family:'Nunito',system-ui,sans-serif}
.sheet-h:active{transform:none}
.sheet-grip{position:absolute;top:6px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:99px;background:var(--line)}
#sheet_sum{flex:1;text-align:left;margin-top:6px}
.sheet-up{margin-top:6px;transition:transform .2s}
.sheet.open .sheet-up{transform:rotate(180deg)}
.sheet-b{overflow-y:auto;padding:4px 12px calc(14px + env(safe-area-inset-bottom,0px))}
.sheet:not(.open) .sheet-b{visibility:hidden}
.sheet-scrim{position:fixed;inset:0;z-index:290;background:rgba(15,8,30,.35);opacity:0;visibility:hidden;transition:opacity .2s,visibility 0s .2s}
body.sheet-open .sheet-scrim{opacity:1;visibility:visible;transition:opacity .2s}
body.juego-vivo .wrap{padding-bottom:72px}
@media (min-width:1000px){ .sheet{max-width:920px} }
.ht-r{display:flex;gap:8px;align-items:flex-start;padding:5px 6px;border-radius:10px;margin:3px 0}
.ht-r.cur{background:var(--card2);box-shadow:inset 0 0 0 2px var(--purple)}
.ht-r>b{flex:none;width:26px;height:26px;border-radius:50%;background:var(--purple);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Baloo 2',sans-serif}
.ht-ps{display:flex;flex-wrap:wrap;gap:4px}
.ht-p{font-size:12px;font-weight:700;padding:2px 7px;border-radius:99px;background:var(--card2);border:1px solid var(--line)}
.ht-p.ok{background:#ffe9a8;color:#4a2e00;border-color:#e8b75e}
/* el número solo palpita y cambia de color si el jugador lo tiene */
@keyframes heroTengo{0%,100%{transform:scale(1)}50%{transform:scale(1.07);box-shadow:0 0 0 6px #fff,0 0 26px 10px rgba(20,170,90,.8)}}
.bola-hero.nueva{background:linear-gradient(135deg,#34d27b,#0f9d58);color:#fff;animation:heroTengo .75s ease-in-out 10;position:relative}
.bola-hero.nueva::after{content:'¡Lo tienes!';position:absolute;right:12px;top:50%;transform:translateY(-50%);font:800 12px 'Nunito',sans-serif;background:#fff;color:#0b6b3a;border-radius:99px;padding:2px 8px}
@media (prefers-reduced-motion:reduce){.bola-hero.nueva{animation:none}}

/* === v36: ajustes estéticos y estabilidad === */

/* Badge «¡Lo tienes!» no tapa el número en PC; en móvil se mantiene a la derecha */
@media (min-width: 900px){
  .bola-hero.nueva::after{
    right:auto; left:50%; top:auto; bottom:-6px;
    transform:translateX(-50%);
    white-space:nowrap; font-size:13px; padding:3px 10px;
  }
  .bola-hero.nueva{ margin-bottom:18px; }
}
/* Cuando el jugador ya marcó el número, deja de palpitar */
.bola-hero.nueva.ya-marcado{
  animation:none !important;
  box-shadow:0 0 0 4px #fff, 0 0 12px rgba(15,157,88,.45);
}
.bola-hero.nueva.ya-marcado::after{
  content:'Marcado ✓';
  background:#0b6b3a; color:#fff;
}

/* Tablas fijas: sin translateY al marcar (evita el “salto” de milímetros) */
.lb-mini i.on{ transform:scale(1.18) !important; }
.tabla-h .hc, .cnum, .cartones-grid .cnum{
  transition: background .12s, color .12s, box-shadow .12s !important;
}
.cartones-grid .carton, .tabla-h{
  transform:none !important;
  will-change:auto;
}

/* v36b: marco general alrededor de las tablas — los números quedan “dentro” del marco, no flotando */
#cartones_grid, .cartones-grid{
  border:2px solid var(--line);
  border-radius:16px;
  padding:10px;
  background:var(--card);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.04), 0 2px 10px rgba(0,0,0,.06);
}
.carton, .tabla-h{
  border:2px solid var(--line);
  border-radius:12px;
  background:var(--card2);
  overflow:hidden; /* celdas y números quedan recortados dentro del marco */
}
.carton .cgrid, .tabla-h .cgrid{
  border-radius:0 0 10px 10px;
}
/* Resalte suave de la ronda/letra en juego (sin parecer números flotantes) */
.carton.letra-activa, .tabla-h.letra-activa{
  border-color:var(--purple);
  box-shadow:0 0 0 2px rgba(106,69,214,.35);
}
.carton.letra-activa .chead, .tabla-h.letra-activa .chead{
  color:var(--purple);
}

/* Modal resumen final de premios del jugador */
.resumen-premios-overlay{
  position:fixed; inset:0; z-index:700; background:rgba(15,8,30,.55);
  display:flex; align-items:center; justify-content:center; padding:16px;
}
.resumen-premios-box{
  background:var(--card); color:var(--txt); border-radius:18px; max-width:420px; width:100%;
  padding:22px 18px 16px; box-shadow:0 12px 40px rgba(0,0,0,.35); text-align:center;
}
.resumen-premios-box h2{ font-family:'Baloo 2',sans-serif; margin:0 0 10px; font-size:22px; }
.resumen-premios-box .rp-lista{ text-align:left; margin:12px 0; max-height:45vh; overflow:auto; }
.resumen-premios-box .rp-item{
  display:flex; justify-content:space-between; gap:8px; padding:7px 8px;
  border-bottom:1px solid var(--line); font-size:14px; font-weight:700;
}
.resumen-premios-box .rp-total{ font-size:18px; font-weight:800; margin:10px 0 14px; color:var(--acc); }

/* --- v35c --- */
.tira{flex-wrap:nowrap;overflow:hidden}
.tb{flex:none}
.hoja-Ls{display:inline-flex;gap:8px}
.hp-finalL{flex-direction:column;align-items:center;gap:4px}
.hp-finalL small{font-size:12px;opacity:.9}
.sheet{transform:translateY(calc(100% - 62px - env(safe-area-inset-bottom,0px)))}
.sheet.open{transform:none}
.sheet-h{height:62px}
#sheet_sum{display:flex;gap:6px;flex-wrap:nowrap;overflow:hidden;margin-top:10px;font-size:12px}
.sh-p{flex:none;border-radius:99px;padding:4px 9px;font-weight:700;white-space:nowrap}
.sh-p.pend{background:#ffd54a;color:#4a2e00;box-shadow:0 0 0 2px #e8b75e}
.sh-p.pend b{font-family:'Baloo 2',sans-serif;font-size:13px}
.sh-p.won{background:var(--card2);color:var(--muted);text-decoration:line-through;opacity:.7}
.sheet-up{margin-top:10px}
body.juego-vivo .wrap{padding-bottom:84px}
.tab-ov{position:fixed;inset:0;z-index:880;background:rgba(15,8,30,.6);display:flex;align-items:center;justify-content:center;padding:14px}
.tab-box{background:var(--card);color:var(--txt);border-radius:20px;padding:14px;width:100%;max-width:420px;max-height:92vh;overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.tab-t{font-family:'Baloo 2',sans-serif;font-size:18px;font-weight:800;margin-bottom:8px}
.balls-board{display:flex;gap:4px}
.tab-box .bcell{font-size:14px;padding:5px 0;font-weight:700}
.tab-box .bcell.marked{font-weight:900}
.tab-box .bcol-head{font-size:15px}

/* === v37: cartones QUIETOS al marcar, sin marco lila === */
/* 1) Columnas de ancho fijo: un número en negrita ya no puede ensanchar la columna */
.cgrid{grid-template-columns:repeat(5,minmax(0,1fr))}
.cnum{min-width:0;overflow:hidden;font-weight:800 !important;line-height:1;transform:none !important}
.cnum.marked,.tabla-h .hc.fig:not(.marked){font-weight:800 !important}
/* 2) Marcar solo cambia colores: sin escalas, sin saltos */
.tabla-h.manual .hc.pulso{animation:hmflash .7s ease-in-out infinite !important;transform:none !important}
.cartones-grid .carton,.tabla-h,.carton{transform:none !important;transition:none !important}
.cnum,.tabla-h .hc{transition:background-color .12s,color .12s !important}
/* 3) El aviso «ya casi» flota abajo: ya no empuja los cartones */
.casi-aviso{position:fixed !important;left:12px;right:12px;bottom:78px;z-index:65;max-width:520px;margin:0 auto;grid-area:auto !important}
.casi-aviso:empty{display:none}
/* 4) El número grande reserva siempre su espacio (PC): no se mueve nada al aparecer «¡Lo tienes!» */
@media (min-width:900px){ .bola-hero{margin-bottom:18px} }
/* 5) Sin marco lila ni recorte: el cartón queda cuadrado y completo */
.carton,.tabla-h{overflow:visible !important;border:2px solid var(--line);border-radius:14px;background:var(--card2)}
.carton.letra-activa,.tabla-h.letra-activa{border-color:var(--line) !important;box-shadow:none !important}
.carton.letra-activa .chead,.tabla-h.letra-activa .chead{color:#fff}
#cartones_grid,.cartones-grid{border:0 !important;box-shadow:none !important;padding:0 !important;background:transparent !important;border-radius:0 !important}
.carton .cgrid,.tabla-h .cgrid{border-radius:0}
/* v37: el primer número (pulsa) ya no se recorta; el aviso «¡Lo tienes!» no tapa el número en PC */
.tira{padding:5px 4px}
@media (min-width:900px){
  .bola-hero.nueva::after{bottom:-17px}
  .bola-hero{margin-bottom:28px}
}

/* === v38 === */
/* fuera de la figura en juego: nunca palpita, aunque el número haya salido */
.tabla-h.manual .hc.fuera,.tabla-h.manual .hc.fuera.pulso,.tabla-h.manual .hc.fuera.pend{animation:none !important;outline:none !important;box-shadow:inset 0 0 0 1px rgba(120,110,150,.20) !important;background:rgba(120,110,150,.10) !important;z-index:auto !important}
/* palpito sin mover nada: solo color y brillo interior, sin glow exterior ni z-index/position nuevos */
@keyframes hmflash{0%,100%{background:#fff3c4;box-shadow:inset 0 0 0 3px #e0a100}50%{background:#ffd54a;box-shadow:inset 0 0 0 3px #ff7a00,inset 0 0 10px 2px rgba(255,160,0,.7)}}
.tabla-h.manual .hc.pulso{position:static !important;z-index:auto !important}
#hm_aviso{min-height:44px;box-sizing:border-box;display:flex;align-items:center;justify-content:center}
/* tu nombre resaltado en listas de ganadores/empatados */
mark.gan-yo{background:#ffd54a;color:#4a2e00;border-radius:8px;padding:1px 7px;font-weight:900;box-shadow:0 0 0 2px #e8b75e}
.tie-names span.yo{background:#ffd54a;color:#4a2e00;box-shadow:0 0 0 3px #e8b75e;font-weight:900}

/* === v40: depósito sin QR; cuentas visibles solo tras confirmar banco + monto + forma === */
.cta-aviso{margin:12px 0 8px;padding:10px 12px;border-radius:12px;background:var(--card2);border:2px solid var(--line);font-size:14px}
.cta-list{display:grid;gap:8px;margin:8px 0}
.cta-card{display:flex;gap:10px;align-items:flex-start;padding:10px;border:2px solid var(--line);border-radius:14px;background:var(--card2);cursor:pointer}
.cta-card input{margin-top:4px;flex:none}
.cta-num{font-family:'Baloo 2',sans-serif;font-size:20px;font-weight:800;letter-spacing:.04em}
.cta-card input[type=radio]{width:20px !important;height:20px;min-width:20px;padding:0;margin:3px 0 0;flex:none}
.cta-card>div{flex:1;min-width:0}

/* ===== v42 ===== */
/* "Ya casi" propio de cada cartón: el espacio es fijo, así la tabla no se mueve cuando aparece o desaparece */
.tabla-h .casi-slot{min-height:20px;margin:0 0 4px;border-radius:8px;font-size:11.5px;font-weight:800;line-height:20px;text-align:center;color:transparent;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.tabla-h .casi-slot.on{color:#fff;background:linear-gradient(135deg,#ff6b4a,#f2849f);animation:lbpulse 1s ease-in-out infinite}
/* número que falta: cambia de color (sin mover la celda) */
.hc.falta{background:#ffc24d !important;color:#4a2a00 !important;box-shadow:0 0 0 2px #ff6b4a inset;animation:faltapulso 1s ease-in-out infinite}
@keyframes faltapulso{0%,100%{box-shadow:0 0 0 2px #ff6b4a inset}50%{box-shadow:0 0 0 4px #ff6b4a inset}}
/* ganadores de la partida tras cada figura */
.gan-ov{position:fixed;inset:0;z-index:840;background:rgba(20,10,40,.6);display:flex;align-items:center;justify-content:center;padding:14px}
.gan-box{width:100%;max-width:440px;max-height:82vh;overflow:auto;background:#fff;border-radius:20px;padding:14px 14px 12px;box-shadow:0 14px 40px rgba(0,0,0,.35)}
.gan-t{font-weight:900;font-size:17px;text-align:center;margin-bottom:8px}
.gan-ronda{margin:8px 0 3px;font-weight:900;font-size:12.5px;color:#6a45d6;text-transform:uppercase;letter-spacing:.4px}
.gan-fila{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:baseline;padding:4px 0;border-bottom:1px dashed #e7dccb;font-size:13.5px}
.gan-p{font-weight:800}
.gan-n{min-width:0;overflow-wrap:anywhere}
.gan-box .btn-acc{width:100%;margin-top:10px}
/* lo que ganaste queda resaltado, sutil, en el cartón ganador */
.hc.gano{box-shadow:0 0 0 2px #f5b301 inset,0 0 6px rgba(245,179,1,.55)}
.tabla-h.gano-llena{box-shadow:0 0 0 3px #f5b301,0 0 14px rgba(245,179,1,.45)}

/* v43: en pausa la barra de premios se ve más: cronómetro, letra que sigue y sus premios */
.hoja-pausa .hp-prem{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;align-items:center;margin-top:8px}
.hoja-pausa .hp-prem small{flex:0 0 100%;font-size:12px;opacity:.92;font-weight:800}
.sheet.en-pausa .sheet-h{background:linear-gradient(135deg,#fff3c4,#ffe08a);box-shadow:0 -6px 18px rgba(232,183,94,.55);height:auto;min-height:46px;padding:10px 14px 8px}
.sheet.en-pausa #sheet_sum{display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center;margin-top:8px}
.sheet.en-pausa:not(.open){transform:translateY(calc(100% - 92px - env(safe-area-inset-bottom,0px)))}
body.juego-vivo.hay-pausa .wrap{padding-bottom:116px}
.sh-cd{flex:none;font-family:'Baloo 2',sans-serif;font-weight:900;font-size:17px;line-height:1;font-variant-numeric:tabular-nums;color:#4b3a8f;background:#fff;border-radius:99px;padding:3px 10px}
.sh-sig{flex:none;font-weight:900;font-size:13px;color:#4b3a8f;white-space:nowrap}
.mnu-voz-nota{margin:4px 14px 8px;line-height:1.35}

/* ===== v44 ===== */
/* ganadores de la letra, dentro del aviso de pausa */
.hoja-pausa .hp-gan{margin-top:10px;text-align:left;background:rgba(255,255,255,.16);border-radius:14px;padding:8px 10px}
.hoja-pausa .hp-gan small{display:block;font-size:12px;font-weight:900;margin-bottom:4px;text-align:center}
.hoja-pausa .hp-gan-f{display:grid;grid-template-columns:auto 1fr auto;gap:4px 8px;align-items:baseline;padding:3px 0;border-top:1px solid rgba(255,255,255,.22);font-size:13px;line-height:1.3}
.hoja-pausa .hp-gan-f:first-of-type{border-top:0}
.hoja-pausa .hp-gan-p{font-weight:800;white-space:nowrap}
.hoja-pausa .hp-gan-n{font-weight:700;overflow-wrap:anywhere}
.hoja-pausa .hp-gan-n em{opacity:.8;font-weight:600}
.hoja-pausa .hp-gan-f b{white-space:nowrap}
/* «ya casi» en el cartón: hasta 2 líneas (línea, 4 esquinas, L y tabla llena); espacio fijo → el cartón no se mueve */
.tabla-h .casi-slot{min-height:32px;line-height:15px;font-size:11px;padding:1px 5px;white-space:normal;text-overflow:clip;display:flex;align-items:center;justify-content:center}
.aviso-corto{position:fixed;left:50%;top:max(14px,env(safe-area-inset-top));transform:translateX(-50%);z-index:900;max-width:92vw;background:#4b3a8f;color:#fff;font-weight:800;font-size:14px;line-height:1.3;padding:9px 16px;border-radius:99px;box-shadow:0 6px 22px rgba(0,0,0,.35);pointer-events:none;text-align:center}

/* v45: «ya casi» = solo la frase, y el número que falta palpita en VERDE (lo marcado es dorado) */
.tabla-h .casi-slot{min-height:22px !important;line-height:20px !important;font-size:12px !important;padding:0 6px !important;white-space:nowrap !important;display:block !important;text-align:center}
.tabla-h .casi-slot.on{color:#fff !important;background:linear-gradient(135deg,#15803d,#22c55e) !important;box-shadow:0 2px 8px rgba(21,128,61,.4);animation:none !important}
.hc.falta,.cnum.falta{background:#22c55e !important;color:#fff !important;font-weight:900 !important;transform:none !important;animation:faltaverde 1s ease-in-out infinite !important}
@keyframes faltaverde{0%,100%{box-shadow:0 0 0 2px #15803d inset,0 0 0 0 rgba(34,197,94,.7)}50%{box-shadow:0 0 0 2px #15803d inset,0 0 0 6px rgba(34,197,94,0)}}

/* ===== v46: desempate (votación + sobres visibles + apertura con suspenso) ===== */
.sz-ov{position:fixed;inset:0;z-index:850;background:rgba(20,10,40,.84);display:flex;align-items:center;justify-content:center;padding:12px;overflow:auto}
.sz-box{background:#fff;color:#2a1a4a;border-radius:24px;padding:16px 14px;max-width:540px;width:100%;max-height:94vh;overflow:auto;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.55)}
.sz-rol{border-radius:12px;padding:8px 10px;font-weight:900;margin:8px 0;font-size:15px}
.sz-rol.yo{background:#ffd54a;color:#4a2e00;box-shadow:0 0 0 3px #e8b75e}
.sz-rol.no{background:#e9e4f5;color:#4b3a8f}
.sz-voto{background:#f4effc;border-radius:14px;padding:8px 10px;margin:8px 0;font-size:13.5px;line-height:1.4;text-align:left}
.sz-voto b{font-weight:900}.sz-voto .sz-dec{margin-top:4px;font-size:15px}
.sz-stage{font-family:'Baloo 2',sans-serif;font-size:22px;font-weight:900;color:#c2410c;min-height:30px;margin:8px 0 2px;line-height:1.15}
.sz-res{min-height:20px}
.sz-envs{display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:10px;margin:12px 0;perspective:900px}
.sz-env{position:relative;aspect-ratio:3/4;min-height:104px}
.sz-env.libre{cursor:pointer}
.sz-env.libre:active{transform:scale(.96)}
.sz-card{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.sz-env.open .sz-card{transform:rotateY(180deg)}
.sz-f,.sz-b{position:absolute;inset:0;border-radius:14px;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:4px;overflow:hidden}
.sz-f{background:linear-gradient(135deg,var(--purple),var(--pink));border:2px solid #d9cdf5;color:#fff}
.sz-f .sz-i{font-size:26px;line-height:1}
.sz-f b{font-family:'Baloo 2',sans-serif;font-size:26px;line-height:1;text-shadow:0 1px 3px rgba(0,0,0,.45)}
.sz-f small,.sz-b small{font-size:11px;font-weight:800;overflow-wrap:anywhere;line-height:1.15}
.sz-env.taken .sz-f{opacity:.55;filter:grayscale(.55)}
.sz-env.mine .sz-f{border-color:#06d6a0;box-shadow:0 0 0 4px #06d6a055}
.sz-b{background:#fff;border:3px solid #8e5eff;transform:rotateY(180deg);color:#4b3a8f}
.sz-b .num{font-family:'Baloo 2',sans-serif;font-size:30px;line-height:1;font-variant-numeric:tabular-nums}
.sz-env.perdio .sz-b{opacity:.6}
.sz-env.gana .sz-b{background:linear-gradient(135deg,#fff3c4,#ffd54a);border-color:#e8b75e;color:#4a2e00;box-shadow:0 0 0 4px #ffd54a,0 0 28px 8px rgba(255,200,60,.8)}
.sz-env.gana{animation:szgana 1.1s ease-out 1}
.sz-env.gana .sz-b .num{font-size:34px}
.sz-env.shake .sz-card{animation:szshake .32s linear infinite}
.sz-env.tension .sz-card{animation:sztension .55s ease-in-out infinite}
@keyframes szshake{0%,100%{transform:translateX(0) rotate(0)}25%{transform:translateX(-3px) rotate(-3deg)}75%{transform:translateX(3px) rotate(3deg)}}
@keyframes sztension{0%,100%{transform:scale(1) rotate(0);filter:brightness(1)}30%{transform:scale(1.1) rotate(-5deg);filter:brightness(1.25)}70%{transform:scale(1.1) rotate(5deg);filter:brightness(1.25)}}
@keyframes szgana{0%{transform:scale(1)}40%{transform:scale(1.22)}100%{transform:scale(1)}}
.sz-pill{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(76px + env(safe-area-inset-bottom,0px));z-index:845;border:0;border-radius:99px;padding:10px 16px;font-weight:900;font-size:14px;background:#ffd54a;color:#4a2e00;box-shadow:0 6px 18px rgba(0,0,0,.4);animation:sztension 1.4s ease-in-out infinite}

/* ===== v46: ventana flotante de la pausa (resultados + premios de la letra que sigue) ===== */
.pz-ov{position:fixed;inset:0;z-index:830;background:rgba(20,10,40,.66);display:flex;align-items:center;justify-content:center;padding:12px}
.pz-box{width:100%;max-width:480px;max-height:92vh;overflow:auto;background:#fff;color:#2a1a4a;border-radius:22px;padding:14px;box-shadow:0 14px 40px rgba(0,0,0,.4)}
.pz-top{display:flex;align-items:center;justify-content:space-between;gap:10px;background:linear-gradient(135deg,#4b3a8f,#6a45d6);color:#fff;border-radius:14px;padding:8px 14px}
.pz-t{font-weight:900;letter-spacing:.6px;font-size:15px}
.pz-cd{font-family:'Baloo 2',sans-serif;font-weight:900;font-size:34px;line-height:1;font-variant-numeric:tabular-nums}
.pz-sec{margin-top:10px;background:#f4effc;border-radius:14px;padding:8px 10px}
.pz-sig{background:#fff3c4;box-shadow:0 0 0 2px #e8b75e}
.pz-h{font-weight:900;font-size:14px;margin-bottom:4px}
.pz-h2{font-weight:800;font-size:12px;margin:8px 0 2px;opacity:.85}
.pz-f{display:grid;grid-template-columns:auto 1fr auto;gap:2px 8px;align-items:baseline;padding:4px 0;border-top:1px solid rgba(75,58,143,.15);font-size:14px;line-height:1.3}
.pz-f:first-of-type{border-top:0}
.pz-p{font-weight:800;white-space:nowrap}
.pz-n{font-weight:700;overflow-wrap:anywhere;text-align:right}
.pz-n em{opacity:.75;font-weight:600}
.pz-f b{white-space:nowrap;font-family:'Baloo 2',sans-serif;font-size:16px}
.pz-s b{color:#7a4a00}
.pz-sigrow{display:flex;align-items:center;justify-content:center;gap:18px;margin:4px 0}
.pz-badge{font-family:'Baloo 2',sans-serif;font-weight:900;font-size:44px;line-height:1;width:66px;height:66px;border-radius:50%;background:#4b3a8f;color:#fff;display:flex;align-items:center;justify-content:center}
.pz-ov .hoja-mini i{background:rgba(75,58,143,.22)}
.pz-ov .hoja-mini i.on{background:#4b3a8f}
.pz-ov .hoja-mini i.cen{background:#E8B75E}
.pz-nota{margin-top:8px;font-size:13px;line-height:1.35}
.pz-box .btn-acc{width:100%;margin-top:12px}
.hoja-pausa .pz-reabrir{margin-top:10px;color:#fff;border-color:rgba(255,255,255,.7)}

/* v46: premios de la letra que sigue dentro del sorteo */
.sz-sig{margin-top:10px;background:#fff3c4;box-shadow:0 0 0 2px #e8b75e;border-radius:12px;padding:6px 8px;font-size:13px}
.sz-chips{display:flex;flex-wrap:wrap;gap:4px 6px;justify-content:center;margin-top:4px}
.sz-chips span{background:#fff;border-radius:99px;padding:3px 9px;font-weight:700;font-size:12.5px;white-space:nowrap}
.sz-chips b{font-family:'Baloo 2',sans-serif}

/* v47: aviso «Marca el N» dentro del título de las tablas */
.hm-aviso-t{background:#fff3c4;color:#6a4a00;border-radius:12px;padding:2px 10px;box-shadow:0 0 0 2px #e0a100;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;max-width:100%}

/* ===== v48: mensaje de premio flotante (4 s) ===== */
.celebrate-flot{position:fixed;left:50%;top:max(70px,env(safe-area-inset-top));transform:translateX(-50%);z-index:880;pointer-events:none;
  background:linear-gradient(135deg,#fff7d6,#ffe08a);color:#4a2e00;border:2px solid #fff;border-radius:20px;padding:10px 18px;text-align:center;
  box-shadow:0 10px 28px rgba(0,0,0,.3);max-width:88vw;animation:cfIn .35s ease-out}
.celebrate-flot.sale{opacity:0;transition:opacity .4s}
.celebrate-flot .cf-t{font:900 17px 'Baloo 2',sans-serif}
.celebrate-flot .celebrate-prize{font-size:15px;margin:2px 0}
.celebrate-flot .cf-m{font:900 24px 'Baloo 2',sans-serif;color:#0b6b3a}
@keyframes cfIn{from{opacity:0;transform:translate(-50%,-14px) scale(.92)}to{opacity:1;transform:translate(-50%,0) scale(1)}}

/* ===== v48: pista dentro de la bola + "ya casi" como etiqueta en la esquina (sin hueco sobre la tabla) ===== */
.bola-hero .hint{font-size:12px;font-weight:800;line-height:1.1;margin-top:-2px;opacity:.95}
.tabla-h{position:relative}
.tabla-h .casi-slot{position:absolute !important;top:-9px;left:50%;transform:translateX(-50%);z-index:3;min-height:0 !important;height:18px;line-height:18px !important;font-size:11px !important;padding:0 10px !important;margin:0 !important;border-radius:99px;width:auto;max-width:92%;pointer-events:none}
.tabla-h .casi-slot:not(.on){display:none !important}

/* ===== v51: aviso de premio para los demás jugadores (más discreto que el del ganador) ===== */
.celebrate-flot.otros{background:linear-gradient(135deg,#eef3ff,#dbe6ff);color:#1d2f5c}
.celebrate-flot.otros .cf-m{font-size:20px;color:#1d2f5c}
.hint-reg{margin:10px 0 0;font-size:12.5px;color:var(--muted,#6b6b80)}
.hint-reg summary{cursor:pointer;list-style:none}
.hint-reg summary::-webkit-details-marker{display:none}
.hint-reg ul{margin:6px 0 0 16px;padding:0}
.hint-reg li{margin:2px 0}
.hint-reg .hr-x{margin-left:8px;opacity:.7;text-decoration:underline;cursor:pointer}

/* ===== v52 ===== */
/* chanchito alcancía */
.pig-row{display:flex;align-items:center;gap:12px}
.pig{width:118px;height:auto;flex:none;overflow:visible}
.pig-b{transform:scale(var(--g,1));transform-origin:58px 58px;transition:transform .6s ease}
.pig-c{fill:#ffcc33;stroke:#c98f00;stroke-width:2;opacity:0}
.pig-c.idle{animation:pigcoin 3.6s ease-in infinite}
.pig-c.nueva{animation:pigcoin .9s ease-in both}
@keyframes pigcoin{0%{transform:translateY(0);opacity:0}12%{opacity:1}75%{transform:translateY(22px);opacity:1}100%{transform:translateY(27px);opacity:0}}
.pig-info{min-width:0;flex:1;display:flex;flex-direction:column;gap:4px}
.pig-pozo{font-size:15px;font-weight:800}
@media (prefers-reduced-motion:reduce){.pig-c{animation:none!important}.pig-b{transition:none}}
/* con 5 o más tablas: la barra inferior de premios se esconde; queda una pestañita y asoma al cantarse un premio */
body.muchas-tablas .sheet:not(.open):not(.asoma){transform:translateY(calc(100% - 26px - env(safe-area-inset-bottom,0px)))}
body.muchas-tablas .sheet:not(.open):not(.asoma) .sheet-h{height:26px;min-height:0;padding:0 14px;justify-content:center;background:transparent;box-shadow:none}
body.muchas-tablas .sheet:not(.open):not(.asoma) #sheet_sum{display:none}
body.muchas-tablas .sheet:not(.open):not(.asoma) .sheet-up{margin-top:2px}
body.muchas-tablas .sheet:not(.open):not(.asoma) .sheet-up::before{content:"🏆 "}
body.muchas-tablas.juego-vivo .wrap{padding-bottom:36px}

/* v71: fichitas de letras anteriores en la ventana de pausa */
.pz-chips{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 8px}
.pz-chip{border:1px solid #c9b99a;background:#fff;border-radius:14px;min-width:34px;padding:4px 10px;font-weight:700;cursor:pointer}
.pz-chip.on{background:#f5a623;border-color:#e08e0b;color:#fff}

/* v74: salas en cuadrícula — 2 columnas en el celular (caben 4 salas), 3 en tablet y 4 en PC; las que están en juego primero */
.lb{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-items:stretch}
.lb .lbc{margin-bottom:0;padding:9px;gap:5px;border-radius:16px;flex-direction:column;align-items:stretch;flex-wrap:nowrap;min-width:0;overflow:hidden}
.lb .lbc>div,.lb .lbc>button{width:100%;min-width:0}
.lb .lbn-head{display:flex;justify-content:space-between;align-items:center;gap:4px}
.lb .lbc .lb-name{font-size:16px;overflow-wrap:anywhere}
.lb .lbc .lbn-precio{font-size:13px;padding:2px 9px;box-shadow:0 2px 0 var(--cbd)}
.lb .lb-tag,.lb .lbn-fr,.lb .lb-cupo,.lb .lbc>.lb-minis,.lb .lbc>.lb-minis+.lbn-lab,.lb .lb-live,.lb .lb-mas{display:none}
.lb .lbc .lb-st{font-size:12px;line-height:1.25}
.lb .lbc .lb-st b{font-size:15px}
.lb .lb-st small{display:none}
.lb .lbc .lb-btn{height:auto;padding:8px 10px;font-size:14px;border-radius:14px;box-shadow:0 3px 0 var(--cs);margin-top:auto}
.lb .lbn-box{padding:6px 8px;gap:3px;border-radius:12px}
.lb .pig-row{display:block}
.lb .pig{display:none}
.lb .lbn-n b{font-size:22px}
.lb .lbn-n span{font-size:12px;margin-left:4px}
.lb .pig-pozo{font-size:12px}
.lb .lbn-msg{font-size:11.5px;line-height:1.2}
.lb .lbn-help{display:none!important}
.lb .lb-livebox{display:block}
.lb .lb-bolaviva{transform:scale(.8);transform-origin:left center}
@media (min-width:700px){
  .lb{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .lb .lbc{padding:13px;gap:8px}
  .lb .lbc .lb-name{font-size:21px}
  .lb .lbc .lbn-precio{font-size:18px;padding:3px 12px}
  .lb .lbc .lb-st{font-size:16px} .lb .lbc .lb-st b{font-size:20px}
  .lb .lbc>.lb-minis{display:grid} .lb .lbc>.lb-minis+.lbn-lab,.lb .lb-live,.lb .lb-mas{display:revert}
  .lb .lb-live{display:grid}
  .lb .lb-st small{display:inline}
  .lb .lbn-fr{display:block}
  .lb .lbc .lb-btn{font-size:16px;padding:11px 14px}
  .lb .pig{display:block;width:70px}
  .lb .pig-row{display:flex}
  .lb .lbn-box{padding:10px 12px}
  .lb .lbn-n b{font-size:28px} .lb .lbn-n span{font-size:15px} .lb .pig-pozo{font-size:14px} .lb .lbn-msg{font-size:13px}
}
@media (min-width:1100px){ .lb{grid-template-columns:repeat(4,minmax(0,1fr))} }
body.lobby-wide .wrap{max-width:1280px;padding:24px}
.lb .lb-aviso{grid-column:1/-1}
/* v74: en el celular, la tarjeta del evento del lobby va resumida para que quepan las salas */
@media (max-width:699px){ .card.ev-bote:has(~ .lb) .pend-box, .card.ev-bote:has(~ .lb) > p.small, .card.ev-bote:has(~ .lb) details{display:none} }

/* v77 · lobby en PC: sin cartones de muestra y entradas de sala más grandes */
body.lobby-wide .lb .lb-minis,
body.lobby-wide .lb .lbn-lab{display:none}
body.lobby-wide .lb .lb-livebox{justify-content:center}
body.lobby-wide .lb .lb-bolaviva{margin:0 auto}
body.lobby-wide .lb .lbc{padding:20px 18px;min-height:210px}
body.lobby-wide .lb .lbc .lb-name{font-size:1.28rem}
body.lobby-wide .lb .lbc button,body.lobby-wide .lb .lbc .btn-acc{font-size:1rem;padding:11px 14px}

/* v77 · encuesta y botón ⭐ discreto */
#enc_fab{position:fixed;bottom:14px;left:14px;z-index:200;width:38px;height:38px;border-radius:50%;border:1px solid var(--line,#e6dccb);background:var(--card,#fff);color:#b7791f;font-size:18px;line-height:1;box-shadow:0 2px 8px rgba(0,0,0,.18);cursor:pointer;opacity:.85}
#enc_fab:hover{opacity:1}
.enc-q{margin:0 0 12px}.enc-ops{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.enc-op{border:2px solid var(--line,#e6dccb);background:var(--card,#fff);color:inherit;border-radius:999px;padding:8px 12px;font:inherit;font-weight:700;cursor:pointer}
.enc-op.on{background:#5fbf9f;border-color:#3f9f7f;color:#102a22}
.enc-cara{display:flex;flex-direction:column;align-items:center;font-size:24px;line-height:1;padding:6px 12px;min-width:52px}.enc-cara small{font-size:11px;font-weight:700}
.enc-otro{width:100%;margin-top:2px}
.lb-pastel .c3{background:linear-gradient(135deg,#fff8d6,#ffe9a0)} .lb-pastel .c3 .lb-btn{background:#b7791f;color:#fff}
.lb-neon .c3{border-color:#f472b6;box-shadow:0 0 14px rgba(244,114,182,.4)} .lb-neon .c3 .lb-name{color:#f472b6} .lb-neon .c3 .lb-btn{color:#f9a8d4}
.lb-premium .c3{background:linear-gradient(135deg,#4a3a0c,#241a02);border-color:#e8b44a} .lb-premium .c3 .lb-name{color:#f4d37a} .lb-premium .c3 .lb-btn{background:#b7791f}