/* ══════════════ TEMA · BOLICHE ══════════════════════════════════
   Un fork del tema de juegos de mal-ds, para una noche de Finados en
   la Sierra. Igual que Acolita, declara su capa de referencia y hereda
   todo lo demás: los componentes son los mismos (.btn, .chip, .vidrio,
   .marcador…), solo cambia la materia.

   La materia es la de un HUD de videojuego, no la de un rótulo de
   feria: paneles de vidrio oscuro con un filo de luz, botones con
   brillo que se iluminan al poder tocarlos, cifras condensadas y
   nítidas, viñeta y grano sobre la imagen. Los colores sí son de la
   fiesta: el maíz de la guagua de pan es la marca; el celeste de las
   canicas es PARES (el redondo) y el morado de la colada es NONES (la
   cajita), igual en los botones, el conteo y el resultado.

   Se activa con `data-marca="boliche"` en el <html>. Va después de
   mal.css y del <style> de la página. */

:root[data-marca="boliche"]{
  /* ── los colores de la feria ── */
  --bo-maiz:#F7B943;        --bo-maiz-2:#FFD98A;   --bo-corteza:#B86A22;
  --bo-colada:#9A4BB0;      --bo-colada-2:#C98BE0;
  --bo-canica:#58B9F0;      --bo-canica-2:#A6DDFF;
  --bo-achiote:#F0513F;     --bo-hoja:#5FC25A;
  --bo-glaseado:#FF8FC2;    /* el rosado del glaseado de las guaguas: tu voz */
  --bo-papel:#FFF6E6;       --bo-tinta:#120B08;
  --bo-noche:#140C09;       --bo-humo:#2A1A13;

  /* ── capa 1 · referencia ── */
  --ref-marca:var(--bo-maiz); --ref-marca-2:#E09C2C; --ref-marca-txt:var(--bo-maiz);
  --ref-sobre-marca:var(--bo-tinta); --ref-acento:var(--bo-canica); --ref-acento-2:var(--bo-colada);
  --ref-n0:var(--bo-noche); --ref-n1:#1E1310; --ref-n2:#221611; --ref-n3:#2E1F18;
  --ref-t0:var(--bo-papel); --ref-t1:#D9C7A8; --ref-t2:#A8947A;
  --ref-borde-rgb:255,246,230; --ref-marca-rgb:247,185,67;

  --ref-display:"Montserrat","Arial Black",system-ui,sans-serif;
  --ref-texto:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ref-mono:"Montserrat",system-ui,sans-serif;
  --ref-peso-display:900;
  --ref-tracking:-.01em;

  --ref-radio:.9;
  --ref-borde:1px;
  --ref-densidad:1;
  --ref-tap:52px;
  --ref-elev-1:0 8px 24px rgba(0,0,0,.45);
  --ref-elev-2:0 18px 50px rgba(0,0,0,.6);
  --ref-relleno-marca:linear-gradient(180deg, var(--bo-maiz-2) 0%, var(--bo-maiz) 45%, #E39A2A 100%);
  --ref-destello:transparent;
  --ref-salto:translateY(-1px);
  --ref-presion:scale(.97);
  --ref-fondo:var(--bo-noche);
  --mal-ok:var(--bo-hoja); --mal-warn:var(--bo-maiz); --mal-danger:var(--bo-achiote);
  color-scheme:dark;

  /* ── lo que se pinta con eso ── */
  --bo-vidrio:linear-gradient(180deg, rgba(42,26,19,.78), rgba(20,12,9,.86));
  --bo-filo:1px solid rgba(255,246,230,.14);
  --bo-luz:inset 0 1px 0 rgba(255,246,230,.18);
  --bo-halo-maiz:0 0 0 1px rgba(247,185,67,.55), 0 0 24px rgba(247,185,67,.35);
  --bo-grano:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

[data-marca="boliche"] body{background:var(--ref-fondo);color:var(--bo-papel)}

/* ─── sobre la imagen: viñeta y grano, como una cámara ───────── */
[data-marca="boliche"] .escena::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:13;
  background:radial-gradient(115% 85% at 50% 45%, transparent 50%, rgba(10,5,3,.6) 100%);
}
[data-marca="boliche"] #tina{filter:contrast(1.06) saturate(1.08)}
[data-marca="boliche"] .globos::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--bo-grano) repeat 0 0 / 160px;opacity:.07;mix-blend-mode:overlay;
}
/* el latido cuando falta una: un borde de maíz que respira */
[data-marca="boliche"] .escena::after{box-shadow:inset 0 0 140px 30px rgba(247,185,67,.38)}

/* ─── los paneles: vidrio oscuro con un filo de luz ───────────── */
[data-marca="boliche"] .vidrio{
  position:relative;
  background:var(--bo-vidrio);
  -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
  border:var(--bo-filo);
  border-radius:calc(20px * var(--ref-radio));
  box-shadow:var(--bo-luz), var(--ref-elev-2);
}
/* la esquina biselada y la línea de acento arriba a la izquierda */
[data-marca="boliche"] .mesa::before,[data-marca="boliche"] .capa__panel::before{
  content:"";position:absolute;left:18px;top:0;width:64px;height:2px;border-radius:2px;pointer-events:none;
  background:linear-gradient(90deg, var(--bo-maiz), transparent);
}
[data-marca="boliche"] .mesa{padding-top:calc(var(--mal-e4) + 2px)}
[data-marca="boliche"] .capa__panel.portada{overflow:hidden}
[data-marca="boliche"] .portada__pie{border-top:1px solid rgba(255,246,230,.1);background:rgba(0,0,0,.18)}

/* ─── los rótulos: condensados, en mayúsculas ─────────────────── */
[data-marca="boliche"] .kicker{color:var(--bo-maiz);font-weight:800;letter-spacing:.2em;font-size:.68rem}
[data-marca="boliche"] .kicker::before{width:14px;height:2px;background:var(--bo-maiz);border-radius:2px}
[data-marca="boliche"] .micro{font-weight:700;letter-spacing:.18em;font-size:.66rem;color:var(--ref-t2);white-space:nowrap}
[data-marca="boliche"] .caption{color:var(--ref-t1)}
[data-marca="boliche"] h1,[data-marca="boliche"] h2{font-family:var(--mal-display);font-weight:900;letter-spacing:-.02em}
/* el título: letras grandes con un degradado de maíz y un resplandor */
[data-marca="boliche"] .portada h1{
  text-transform:uppercase;letter-spacing:.02em;line-height:.95;
  background:linear-gradient(180deg, #FFF0C2 0%, var(--bo-maiz) 55%, #D98A1E 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.6)) drop-shadow(0 0 18px rgba(247,185,67,.35));
}
[data-marca="boliche"] .mesa__dice,[data-marca="boliche"] .mesa__suma{font-family:var(--mal-display);font-weight:900;letter-spacing:-.01em}
[data-marca="boliche"] .reglas .icono{color:var(--bo-maiz)}
[data-marca="boliche"] .reglas b,[data-marca="boliche"] .expl__x b{color:var(--bo-papel)}
[data-marca="boliche"] .expl__n{background:var(--ref-relleno-marca);color:var(--bo-tinta);box-shadow:0 0 14px rgba(247,185,67,.45)}
[data-marca="boliche"] .puntos i{background:rgba(255,246,230,.22)}
[data-marca="boliche"] .puntos i.ve{background:var(--bo-maiz);box-shadow:0 0 10px rgba(247,185,67,.6)}

/* ─── botones: pastillas con brillo ───────────────────────────── */
[data-marca="boliche"] .btn{
  font-family:var(--mal-display);font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:.82rem;
  background:linear-gradient(180deg, rgba(255,246,230,.12), rgba(255,246,230,.04));color:var(--bo-papel);
  border:1px solid rgba(255,246,230,.22);
  box-shadow:inset 0 1px 0 rgba(255,246,230,.18), 0 6px 18px rgba(0,0,0,.35);
  position:relative;overflow:hidden;
}
[data-marca="boliche"] .btn:hover{color:var(--bo-papel);border-color:rgba(255,246,230,.45);box-shadow:inset 0 1px 0 rgba(255,246,230,.25), 0 8px 22px rgba(0,0,0,.4)}
[data-marca="boliche"] .btn:active{transform:scale(.97)}
[data-marca="boliche"] .btn--rojo,[data-marca="boliche"] .btn--rojo:hover{
  background:var(--ref-relleno-marca);color:var(--bo-tinta);border-color:rgba(255,246,230,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 0 0 1px rgba(247,185,67,.35), 0 10px 26px rgba(247,185,67,.3);
}
/* el reflejo que cruza el botón principal, para que llame */
[data-marca="boliche"] .btn--rojo::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 48%, transparent 56%);
  transform:translateX(-120%);animation:bo-reflejo 3.2s ease-in-out infinite;
}
[data-marca="boliche"] .btn--rojo:disabled::after{animation:none}
@keyframes bo-reflejo{0%,55%{transform:translateX(-120%)}85%,100%{transform:translateX(120%)}}
[data-marca="boliche"] .btn:disabled{opacity:.4;filter:saturate(.3)}
[data-marca="boliche"] .btn-ghost{background:transparent;border-color:transparent;box-shadow:none;color:var(--bo-maiz)}
[data-marca="boliche"] .boton-juego{font-size:.95rem;min-height:58px}

/* los dos bandos: pares celeste (el redondo), nones morado (la cajita) */
[data-marca="boliche"] [data-grita="pares"],[data-marca="boliche"] [data-grita="pares"]:hover{
  background:linear-gradient(180deg, var(--bo-canica-2), var(--bo-canica) 60%, #2F7FB5);color:var(--bo-tinta);
  border-color:rgba(166,221,255,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 0 22px rgba(88,185,240,.35)}
[data-marca="boliche"] [data-grita="nones"],[data-marca="boliche"] [data-grita="nones"]:hover{
  background:linear-gradient(180deg, var(--bo-colada-2), var(--bo-colada) 60%, #5B2470);color:#fff;
  border-color:rgba(201,139,224,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 0 22px rgba(154,75,176,.4)}
[data-marca="boliche"] .conteo{font-family:var(--mal-display);font-weight:900;font-size:.9rem;letter-spacing:.02em}
[data-marca="boliche"] #n-pares{color:var(--bo-canica-2)}
[data-marca="boliche"] #n-nones{color:var(--bo-colada-2)}
[data-marca="boliche"] .conteo .medidor{height:10px;background:var(--bo-colada);border:0;border-radius:999px;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.5), 0 0 14px rgba(154,75,176,.35);--mal-relleno-medidor:var(--bo-canica);overflow:hidden}
[data-marca="boliche"] .conteo .medidor > i{box-shadow:0 0 14px rgba(88,185,240,.6);transition:width .35s var(--mal-ease)}
/* el reloj de la gritadera: una línea de maíz que se consume */
[data-marca="boliche"] #reloj-gente{background:linear-gradient(90deg, var(--bo-achiote), var(--bo-maiz));box-shadow:0 0 10px rgba(247,185,67,.5)}
[data-marca="boliche"] .medidor--fino{height:4px;background:rgba(255,246,230,.08)}

/* los botones redondos de arriba: discos de vidrio */
[data-marca="boliche"] .btn--icono{
  border-radius:50%;color:var(--bo-papel);
  background:radial-gradient(circle at 35% 30%, rgba(255,246,230,.18), rgba(255,246,230,.04) 60%), rgba(20,12,9,.6);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(255,246,230,.2);box-shadow:inset 0 1px 0 rgba(255,246,230,.2), 0 6px 16px rgba(0,0,0,.45);
}
[data-marca="boliche"] .btn--icono[aria-pressed=false]{color:var(--ref-t2)}

/* los escenarios: pestañas */
[data-marca="boliche"] .chip{
  font-family:var(--mal-display);font-weight:800;text-transform:uppercase;letter-spacing:.1em;font-size:.7rem;
  background:rgba(255,246,230,.05);color:var(--ref-t1);border:1px solid rgba(255,246,230,.16);border-radius:12px;
}
[data-marca="boliche"] .chip[aria-pressed=true]{background:rgba(247,185,67,.14);color:var(--bo-maiz);border-color:rgba(247,185,67,.6);
  box-shadow:var(--bo-halo-maiz)}

/* ─── la plata ───────────────────────────────────────────────── */
[data-marca="boliche"] .marcador{font-family:var(--mal-display);font-weight:900;letter-spacing:-.02em;
  background:linear-gradient(180deg, #FFF0C2, var(--bo-maiz) 60%, #E09C2C);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.7))}
[data-marca="boliche"] .marcador small{color:var(--ref-t1);-webkit-text-fill-color:var(--ref-t1);font-weight:800;letter-spacing:.2em;font-size:.6rem}
[data-marca="boliche"] .badge{font-family:var(--mal-display);font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:.62rem;
  background:rgba(20,12,9,.7);color:var(--bo-papel);border:1px solid rgba(255,246,230,.2);border-radius:999px;padding:.3rem .6rem;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
[data-marca="boliche"] .badge-ok{background:rgba(95,194,90,.2);color:var(--bo-hoja);border-color:rgba(95,194,90,.5)}
[data-marca="boliche"] .badge-danger{background:rgba(240,81,63,.2);color:var(--bo-achiote);border-color:rgba(240,81,63,.5)}
/* las monedas: discos con brillo metálico */
[data-marca="boliche"] .ficha{font-family:var(--mal-display);font-weight:900;color:#5A4620;border:1px solid rgba(255,255,255,.55);
  background:radial-gradient(circle at 35% 28%, #FFFBEF, #E8D9B4 45%, #B89B5F 100%);
  box-shadow:inset 0 0 0 4px rgba(255,255,255,.3), inset 0 -3px 6px rgba(0,0,0,.2), 0 4px 10px rgba(0,0,0,.5)}
[data-marca="boliche"] #en-mesa{color:var(--bo-maiz);text-shadow:0 0 12px rgba(247,185,67,.4)}
[data-marca="boliche"] .medidor--continuo{border-radius:999px}
[data-marca="boliche"] #carga{background:linear-gradient(90deg, var(--bo-canica), var(--bo-maiz) 55%, var(--bo-achiote));box-shadow:0 0 12px rgba(247,185,67,.5)}
[data-marca="boliche"] .delta{font-family:var(--mal-display);font-weight:900;text-shadow:0 0 10px currentColor}

/* ─── lo que grita la gente ──────────────────────────────────── */
[data-marca="boliche"] .globo{font-family:var(--mal-display);font-weight:900;font-size:1rem;letter-spacing:.01em;
  background:rgba(20,12,9,.82);color:var(--bo-papel);border:1px solid rgba(255,246,230,.25);box-shadow:0 6px 16px rgba(0,0,0,.45);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
[data-marca="boliche"] .globo::after{border-width:0 1px 1px 0}
[data-marca="boliche"] .globo--banca{background:rgba(247,185,67,.92);color:var(--bo-tinta);border-color:transparent}
[data-marca="boliche"] .globo--tu{background:rgba(255,143,194,.92);color:var(--bo-tinta);border-color:transparent}

/* ─── el resultado: una franja a pantalla completa ───────────── */
[data-marca="boliche"] .sello{
  left:0;right:0;top:50%;width:auto;transform:translateY(-50%) scaleY(0);transform-origin:center;
  border:0;border-radius:0;padding:clamp(18px, 4vh, 32px) 0;color:var(--bo-papel);
  font-size:clamp(3rem, 15vw, 7rem);letter-spacing:.02em;text-transform:uppercase;line-height:.9;
  background:linear-gradient(90deg, transparent, var(--bo-franja) 18%, var(--bo-franja) 82%, transparent);
  box-shadow:0 0 80px var(--bo-franja);
  -webkit-mask-image:none;mask-image:none;
}
[data-marca="boliche"] .sello::before,[data-marca="boliche"] .sello::after{
  content:"";position:absolute;left:12%;right:12%;height:2px;background:linear-gradient(90deg, transparent, var(--bo-papel), transparent);opacity:.7}
[data-marca="boliche"] .sello::before{top:6px}[data-marca="boliche"] .sello::after{bottom:6px}
[data-marca="boliche"] .sello b{display:block;font-weight:900}
[data-marca="boliche"] .sello small{font-family:var(--mal-display);font-size:.26em;letter-spacing:.3em;opacity:.95;margin-top:.3em}
[data-marca="boliche"] .sello--gana{--bo-franja:rgba(63,150,60,.92)}
[data-marca="boliche"] .sello--pierde{--bo-franja:rgba(196,52,38,.92)}
[data-marca="boliche"] .sello--pasa{--bo-franja:rgba(90,70,55,.92)}
[data-marca="boliche"] .sello.ve{animation:bo-franja 2.2s cubic-bezier(.2,.9,.3,1) both}
@keyframes bo-franja{
  0%{opacity:0;transform:translateY(-50%) scaleY(0)}
  12%{opacity:1;transform:translateY(-50%) scaleY(1)}
  82%{opacity:1;transform:translateY(-50%) scaleY(1)}
  100%{opacity:0;transform:translateY(-54%) scaleY(1)}}
/* el texto entra un poco después, con un estirón */
[data-marca="boliche"] .sello.ve > *{animation:bo-franja-texto 2.2s cubic-bezier(.2,1.2,.3,1) both}
@keyframes bo-franja-texto{0%,10%{opacity:0;letter-spacing:.3em;filter:blur(6px)}30%{opacity:1;letter-spacing:.02em;filter:blur(0)}100%{opacity:1}}

/* ─── el tiempo de la gritadera: la línea de arriba del panel se consume,
   de maíz a rojo, de izquierda a derecha ── */
[data-marca="boliche"] #m-gente{--tiempo:1}
[data-marca="boliche"] #m-gente::before{
  left:0;right:0;top:0;width:auto;height:3px;border-radius:0 0 3px 3px;
  background:linear-gradient(90deg, var(--bo-achiote), var(--bo-maiz));
  transform-origin:left;transform:scaleX(var(--tiempo));transition:transform .25s linear;
  box-shadow:0 0 12px rgba(247,185,67,.6);
}

/* ─── las esquinas del HUD: marcas de encuadre, como una cámara ── */
[data-marca="boliche"] .hud-juego{--esq:18px}
[data-marca="boliche"] .hud-juego::before,[data-marca="boliche"] .hud-juego::after{
  content:"";position:absolute;width:var(--esq);height:var(--esq);pointer-events:none;opacity:.55;
  border:2px solid var(--bo-maiz);
}
[data-marca="boliche"] .hud-juego::before{left:12px;bottom:12px;border-top:0;border-right:0;border-radius:0 0 0 6px}
[data-marca="boliche"] .hud-juego::after{right:12px;bottom:12px;border-top:0;border-left:0;border-radius:0 0 6px 0}

/* ─── el resto ───────────────────────────────────────────────── */
[data-marca="boliche"] .capa{background:rgba(20,12,9,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
[data-marca="boliche"] .toast{font-family:var(--mal-display);font-weight:700;background:rgba(20,12,9,.9);color:var(--bo-papel);
  border:1px solid rgba(255,246,230,.25);border-radius:999px;box-shadow:0 10px 30px rgba(0,0,0,.5)}
[data-marca="boliche"] #fin-suma[data-bando="pares"]{color:var(--bo-canica-2);text-shadow:0 0 16px rgba(88,185,240,.5)}
[data-marca="boliche"] #fin-suma[data-bando="nones"]{color:var(--bo-colada-2);text-shadow:0 0 16px rgba(154,75,176,.6)}
[data-marca="boliche"] #fin-suma small{color:var(--ref-t2);text-shadow:none}
[data-marca="boliche"] .pista i{background:rgba(255,246,230,.95);box-shadow:0 0 0 6px rgba(247,185,67,.45), 0 0 24px rgba(247,185,67,.6)}

/* la portada sigue cabiendo: el cuerpo se desplaza, no el panel */
[data-marca="boliche"] .capa{grid-template-rows:minmax(0, 1fr)}
[data-marca="boliche"] .portada{max-height:100%;align-self:center}
[data-marca="boliche"] .portada__cuerpo{flex:1 1 auto;min-height:0}
[data-marca="boliche"] .portada__pie{flex:none}
@media (orientation:landscape) and (max-height:520px){
  [data-marca="boliche"] .portada h1{font-size:1.6rem}
  [data-marca="boliche"] .portada__pie .caption{display:none}
}
@media (prefers-reduced-motion:reduce){
  [data-marca="boliche"] .btn--rojo::after{animation:none}
  [data-marca="boliche"] .sello.ve,[data-marca="boliche"] .sello.ve > *{animation:none;opacity:1;transform:translateY(-50%);filter:none;letter-spacing:.02em}
}

/* la plata de la banca, arriba: legible sobre cualquier fondo */
[data-marca="boliche"] .banca-plata{text-shadow:0 1px 4px rgba(0,0,0,.85)}
[data-marca="boliche"] .banca-plata b{color:var(--bo-papel);font-family:var(--mal-display);font-weight:900}
[data-marca="boliche"] .banca-plata small{color:var(--ref-t1);font-family:var(--mal-display);font-weight:800;font-size:.6rem;letter-spacing:.16em}
[data-marca="boliche"] .apuesta__todo{background:linear-gradient(180deg, #FF7A66, var(--bo-achiote));color:#fff;border-color:rgba(255,200,190,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 0 18px rgba(240,81,63,.35)}
[data-marca="boliche"] .apuesta__todo[aria-pressed=true]{background:var(--bo-papel);color:var(--bo-achiote)}