/* v11.1 · Balotas uniformes y transición física continua Cadaya */

/* Más espacio para los dos protagonistas: balotera y moto. */
.workspace {
  grid-template-columns: 292px minmax(0, 1fr) 258px;
}

.center-column {
  grid-template-rows: minmax(0, 1fr) 136px;
}

.event-heading > span {
  font-size: 11px;
  letter-spacing: .17em;
  color: #fff4f4;
}

.showcase-title {
  display: none !important;
}

.showcase-card {
  isolation: isolate;
  background:
    radial-gradient(ellipse at 25% 45%, rgba(255, 41, 58, .25), transparent 33%),
    radial-gradient(ellipse at 78% 45%, rgba(255, 215, 143, .15), transparent 29%),
    radial-gradient(ellipse at 50% 105%, rgba(227, 6, 19, .22), transparent 49%),
    linear-gradient(180deg, #15151b 0%, #08070a 52%, #020203 100%);
}

.showcase-card::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  opacity: .28;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 38%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 38%, #000 100%);
  transform: perspective(450px) rotateX(61deg) translateY(238px) scale(1.45);
  transform-origin: center bottom;
}

.showcase-card::after {
  height: 116px;
  z-index: 12;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .88) 72%);
}

.scene-floor {
  position: absolute;
  z-index: 1;
  left: 4%;
  right: 3%;
  bottom: 59px;
  height: 98px;
  border-radius: 50%;
  pointer-events: none;
  transform: perspective(520px) rotateX(68deg);
  background:
    radial-gradient(ellipse, rgba(255, 255, 255, .09), rgba(227, 6, 19, .12) 32%, rgba(0, 0, 0, .72) 68%, transparent 74%);
  box-shadow: inset 0 0 25px rgba(255, 255, 255, .05), 0 0 40px rgba(227, 6, 19, .18);
}

.stage-lights {
  z-index: 0;
  opacity: .76;
}

.stage-lights i {
  width: 160px;
  height: 540px;
  opacity: .34;
  filter: blur(14px);
  background: linear-gradient(180deg, rgba(255,255,255,.31), rgba(255,62,77,.08) 48%, transparent 82%);
}

.stage-lights i:nth-child(1) { left: 5%; transform: rotate(20deg); }
.stage-lights i:nth-child(2) { left: 27%; transform: rotate(7deg); }
.stage-lights i:nth-child(3) { left: 43%; opacity: .16; transform: rotate(-5deg); }
.stage-lights i:nth-child(4) { left: 61%; opacity: .19; transform: rotate(7deg); }
.stage-lights i:nth-child(5) { left: 76%; transform: rotate(-12deg); }
.stage-lights i:nth-child(6) { right: 0; transform: rotate(-22deg); }

.stage-content {
  z-index: 3;
  inset: 2px 8px 76px;
  grid-template-columns: 62% 38%;
  gap: 0;
}

.drum-zone,
.prize-zone {
  isolation: isolate;
  overflow: visible;
}

.drum-zone::before,
.prize-zone::before {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
}

.drum-zone::before {
  left: -54px;
  top: -68px;
  width: 720px;
  height: 630px;
  background:
    radial-gradient(circle at 43% 43%, rgba(255,255,255,.12), transparent 31%),
    radial-gradient(circle at 42% 47%, rgba(255,30,48,.29), transparent 56%);
  filter: blur(5px);
}

.prize-zone::before {
  left: 50%;
  top: -60px;
  width: 470px;
  height: 560px;
  transform: translateX(-50%);
  background:
    radial-gradient(ellipse at 50% 43%, rgba(255,255,255,.19), transparent 29%),
    radial-gradient(ellipse at 50% 52%, rgba(255,194,94,.16), transparent 54%);
  filter: blur(3px);
}

/* Una sola máquina, escalada como foco principal. */
.drum-machine {
  z-index: 6 !important;
  left: -10px;
  top: 0;
  width: 610px;
  height: 510px;
  perspective: 1180px;
  transform: scale(1.055);
  transform-origin: left top;
  transform-style: preserve-3d;
  filter:
    drop-shadow(13px 28px 27px rgba(0, 0, 0, .90))
    drop-shadow(0 0 21px rgba(227, 6, 19, .36));
}

.drum-machine::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 4px;
  right: 2px;
  bottom: -7px;
  height: 88px;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,31,49,.57), rgba(58,0,7,.32) 47%, transparent 73%);
  filter: blur(11px);
}

.drum-machine::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 25px;
  top: 17px;
  width: 411px;
  height: 411px;
  pointer-events: none;
  border-radius: 50%;
  transform: translate3d(12px, 14px, -54px) scale(.995);
  background:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,.18), transparent 25%),
    radial-gradient(circle at 64% 75%, rgba(0,0,0,.91), transparent 61%),
    linear-gradient(145deg, rgba(93,116,134,.30), rgba(8,11,16,.91) 63%, rgba(30,0,5,.95));
  box-shadow:
    24px 25px 34px rgba(0,0,0,.88),
    -7px -8px 17px rgba(220,244,255,.14),
    0 0 40px rgba(227,6,19,.36);
}

.machine-floor-shadow {
  left: 5px !important;
  bottom: -1px !important;
  width: 578px !important;
  height: 58px !important;
  opacity: .92;
}

.machine-frame {
  z-index: 6 !important;
  overflow: visible;
  filter:
    drop-shadow(11px 15px 10px rgba(0,0,0,.80))
    drop-shadow(-2px -3px 2px rgba(255,255,255,.16))
    drop-shadow(0 0 14px rgba(227,6,19,.31)) !important;
}

.machine-ground-glow { fill: url(#redglow-v11); opacity: .82; }
.machine-ground { fill: rgba(0,0,0,.92); stroke: rgba(255,44,62,.62); stroke-width: 2; }
.machine-base-top { fill: url(#chrome-v11); stroke: rgba(255,255,255,.58); stroke-width: 3; }
.machine-base-body { fill: url(#base-v11); stroke: url(#chrome-v11); stroke-width: 5; }
.machine-base-band { fill: #050609; stroke: url(#chrome-v11); stroke-width: 5; }
.machine-base-light {
  fill: none;
  stroke: #ff1c31;
  stroke-width: 5;
  opacity: .96;
  filter: drop-shadow(0 0 9px rgba(255,23,43,.96));
}
.machine-cradle {
  fill: none;
  stroke: url(#chrome-v11);
  stroke-width: 18;
  stroke-linecap: round;
  filter: drop-shadow(0 5px 5px rgba(0,0,0,.79));
}

.machine-tube-shadow {
  fill: none;
  stroke: rgba(0,0,0,.76);
  stroke-width: 98;
  stroke-linecap: butt;
  stroke-linejoin: round;
  transform: translate(9px, 11px);
  filter: blur(4px);
}
.machine-tube-metal { fill: none; stroke: url(#chrome-v11); stroke-width: 84; stroke-linecap: butt; stroke-linejoin: round; }
.machine-tube-glass { fill: none; stroke: url(#tube-v11); stroke-width: 64; stroke-linecap: butt; stroke-linejoin: round; }
.machine-tube-highlight { fill: none; stroke: rgba(255,255,255,.66); stroke-width: 4; stroke-linecap: round; opacity: .86; }
.machine-coupling {
  fill: url(#base-v11);
  stroke: url(#chrome-v11);
  stroke-width: 7;
  filter: drop-shadow(0 0 8px rgba(255,255,255,.22)) drop-shadow(0 0 9px rgba(227,6,19,.32));
}
.machine-tube-mouth {
  fill: #07080b;
  stroke: url(#chrome-v11);
  stroke-width: 8;
  filter: drop-shadow(8px 10px 6px rgba(0,0,0,.84)) drop-shadow(0 0 10px rgba(227,6,19,.44));
}
.machine-tube-mouth-inner { fill: #010102; stroke: rgba(255,255,255,.31); stroke-width: 2; }

.machine-globe-back {
  fill: none;
  stroke: rgba(0,0,0,.74);
  stroke-width: 12;
  filter: blur(2px) drop-shadow(14px 19px 12px rgba(0,0,0,.79));
}
.machine-globe {
  fill: url(#globe-v11);
  stroke: rgba(225,244,255,.54);
  stroke-width: 9;
  filter: drop-shadow(8px 11px 7px rgba(0,0,0,.74)) drop-shadow(-4px -5px 3px rgba(255,255,255,.30));
}
.machine-globe-depth-ring {
  fill: none;
  stroke: rgba(195,229,250,.13);
  stroke-width: 3;
  stroke-dasharray: 250 75;
  transform: rotate(-12deg);
  transform-origin: 227px 225px;
}
.machine-globe-edge { fill: none; stroke: url(#rim-v11); stroke-width: 7; opacity: .92; }
.machine-globe-inner { fill: none; stroke: rgba(255,255,255,.36); stroke-width: 2; filter: drop-shadow(0 0 5px rgba(213,239,255,.36)); }
.machine-globe-lower-refraction {
  fill: none;
  stroke: rgba(223,245,255,.28);
  stroke-width: 8;
  stroke-linecap: round;
  filter: blur(.6px);
}
.machine-neck-shadow { fill: rgba(0,0,0,.78); transform: translate(6px,8px); filter: blur(3px); }
.machine-neck { fill: url(#chrome-v11); stroke: rgba(255,255,255,.71); stroke-width: 3; }
.machine-neck-inner { fill: rgba(2,4,8,.88); stroke: rgba(207,232,250,.54); stroke-width: 2; }
.machine-globe-shine { fill: none; stroke-linecap: round; pointer-events: none; }
.shine-one { stroke: rgba(255,255,255,.82); stroke-width: 9; filter: blur(.35px); }
.shine-two { stroke: rgba(206,235,255,.34); stroke-width: 5; }
.shine-three { stroke: rgba(255,255,255,.22); stroke-width: 4; }

/* Cámara interior: fondo, piso, cuerpos en Z y cristal frontal son capas distintas. */
.drum-viewport {
  left: 23px !important;
  top: 14px !important;
  width: 408px !important;
  height: 408px !important;
  overflow: hidden !important;
  border: 0 !important;
  background:
    radial-gradient(ellipse at 26% 13%, rgba(255,255,255,.27), transparent 19%),
    radial-gradient(ellipse at 50% 112%, rgba(234,20,42,.29), transparent 46%),
    radial-gradient(circle at 48% 47%, #42212c 0%, #15131a 55%, #030408 100%) !important;
  perspective: 690px !important;
  perspective-origin: 50% 48%;
  transform-style: preserve-3d !important;
  box-shadow:
    inset 24px 17px 45px rgba(255,255,255,.10),
    inset -43px -47px 76px rgba(0,0,0,.91),
    inset 0 -93px 86px rgba(0,0,0,.43),
    10px 13px 23px rgba(0,0,0,.69),
    0 0 30px rgba(227,6,19,.44) !important;
}

.drum-backwall {
  position: absolute;
  z-index: 1;
  inset: 15px;
  border-radius: 50%;
  pointer-events: none;
  transform: translateZ(-96px) scale(.89);
  background:
    radial-gradient(circle at 31% 24%, rgba(204,235,255,.12), transparent 25%),
    radial-gradient(circle at 52% 54%, rgba(124,9,23,.30), transparent 55%),
    linear-gradient(145deg, rgba(42,49,59,.28), rgba(4,6,10,.88));
  box-shadow: inset 17px 13px 28px rgba(255,255,255,.07), inset -28px -31px 42px rgba(0,0,0,.78), 0 0 26px rgba(0,0,0,.88);
}

.drum-floor {
  position: absolute;
  z-index: 4;
  left: 42px;
  right: 42px;
  bottom: 22px;
  height: 82px;
  border-radius: 50%;
  pointer-events: none;
  transform: translateZ(-34px) rotateX(66deg);
  background: radial-gradient(ellipse, rgba(255,66,81,.25), rgba(49,0,7,.42) 43%, rgba(0,0,0,.78) 71%);
  box-shadow: 0 0 28px rgba(227,6,19,.22), inset 0 0 18px rgba(255,255,255,.06);
}

.drum-depth {
  z-index: 88 !important;
  inset: 8px !important;
  border: 1px solid rgba(255,255,255,.19) !important;
  background:
    radial-gradient(ellipse at 50% 109%, rgba(255,38,58,.16), transparent 48%),
    radial-gradient(circle at 29% 20%, rgba(255,255,255,.07), transparent 25%);
  box-shadow: inset 22px 13px 36px rgba(255,255,255,.08), inset -31px -37px 53px rgba(0,0,0,.55) !important;
}

.glass-rim {
  z-index: 99 !important;
  inset: 0 !important;
  border: 4px solid rgba(237,249,255,.15) !important;
  box-shadow: inset 21px 10px 29px rgba(255,255,255,.17), inset -24px -29px 39px rgba(0,0,0,.70), inset 0 0 0 2px rgba(255,255,255,.045) !important;
}

.glass-sheen { z-index: 96 !important; }
.sheen-a {
  left: 36px !important;
  top: 17px !important;
  width: 91px !important;
  height: 352px !important;
  opacity: .88;
  filter: blur(3px) !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.31), transparent) !important;
}
.sheen-b {
  right: 39px !important;
  top: 42px !important;
  width: 48px !important;
  height: 249px !important;
  opacity: .61;
  filter: blur(2px) !important;
}

.glass-refraction {
  position: absolute;
  z-index: 97;
  left: 54px;
  right: 49px;
  bottom: 24px;
  height: 74px;
  pointer-events: none;
  border-radius: 50%;
  transform: rotateX(68deg);
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(151,210,242,.025) 39%, rgba(0,0,0,.19));
  border-top: 2px solid rgba(238,249,255,.25);
  filter: blur(.3px);
}

.drum-base {
  z-index: 12 !important;
  left: 104px !important;
  bottom: 57px !important;
  width: 246px !important;
  height: 59px !important;
  border: 2px solid rgba(226,235,243,.52) !important;
  border-radius: 11px 11px 22px 22px !important;
  background: linear-gradient(180deg, rgba(33,36,43,.99), rgba(3,4,6,.99) 72%) !important;
  box-shadow: 0 0 0 2px rgba(227,6,19,.22), 0 0 27px rgba(227,6,19,.46), inset 0 7px 13px rgba(255,255,255,.08) !important;
}
.drum-base::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 5px 7px;
  border-radius: 7px 7px 17px 17px;
  background: linear-gradient(180deg, #1d2026, #030405);
}
.drum-base img { width: 43px !important; height: 43px !important; }

/* Balotas brillantes, siempre circulares, con profundidad controlada por el motor JS. */
.lottery-ball {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  transform-origin: 50% 50%;
  transform-style: preserve-3d !important;
  backface-visibility: hidden;
  will-change: transform, filter, opacity;
  pointer-events: none;
  isolation: isolate;
}

.lottery-ball .ball-shell {
  border: 1px solid rgba(255,255,255,.92) !important;
  border-radius: 50% !important;
  transform: translateZ(0);
  box-shadow:
    inset -14px -17px 22px rgba(0,0,0,.46),
    inset 13px 13px 19px rgba(255,255,255,.78),
    inset 0 0 0 2px rgba(255,255,255,.24),
    0 9px 17px rgba(0,0,0,.69),
    0 0 18px rgba(255,255,255,.31) !important;
}

.redb .ball-shell {
  background:
    radial-gradient(ellipse at 24% 16%, #fff 0 6%, #ffe4e7 7%, transparent 17%),
    radial-gradient(circle at 33% 27%, #ffbdc3 0%, #ff3446 29%, #d20719 62%, #650008 100%) !important;
}

.whiteb .ball-shell {
  background:
    radial-gradient(ellipse at 23% 15%, #fff 0 14%, rgba(255,255,255,.44) 16%, transparent 24%),
    radial-gradient(circle at 34% 27%, #ffffff 0%, #ffffff 37%, #f4f7fa 59%, #cbd2da 80%, #727a84 100%) !important;
  border-color: #fff !important;
  box-shadow:
    inset -12px -15px 20px rgba(59,67,78,.32),
    inset 13px 13px 19px rgba(255,255,255,.98),
    inset 0 0 0 2px rgba(255,255,255,.58),
    0 8px 16px rgba(0,0,0,.70),
    0 0 21px rgba(255,255,255,.62) !important;
}

.blackb .ball-shell {
  background:
    radial-gradient(ellipse at 24% 16%, #fff 0 5%, #f1f4f7 6%, transparent 17%),
    radial-gradient(circle at 34% 27%, #aeb5be 0%, #4a4e58 34%, #15171d 69%, #010104 100%) !important;
}

.lottery-ball .ball-shell::before {
  left: 8px !important;
  top: 6px !important;
  width: 24px !important;
  height: 14px !important;
  opacity: .98;
  background: linear-gradient(180deg, rgba(255,255,255,.99), rgba(255,255,255,.11)) !important;
  filter: blur(.55px) !important;
}

.lottery-ball .ball-shell::after {
  left: 7px !important;
  right: 7px !important;
  bottom: -1px !important;
  height: 18px !important;
  opacity: .64;
  background: radial-gradient(ellipse, rgba(0,0,0,.38), rgba(0,0,0,.02) 72%) !important;
}

.lottery-ball .ball-shadow {
  bottom: -7px !important;
  height: 12px !important;
  opacity: var(--shadow-opacity, .55);
  transform: translate3d(0, var(--shadow-drop, 5px), -16px) scale(var(--shadow-scale, .82));
  transition: opacity .22s ease, transform .22s ease;
}

.ball-brand {
  left: 16% !important;
  top: 16% !important;
  width: 68% !important;
  height: 68% !important;
  display: grid !important;
  place-items: center !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 50%;
  background: transparent !important;
  box-shadow: none !important;
  backface-visibility: hidden;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.36)) drop-shadow(0 2px 2px rgba(0,0,0,.47));
}

.ball-brand::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: -7%;
  pointer-events: none;
  border-radius: 50%;
  background:
    linear-gradient(132deg, rgba(255,255,255,.31), transparent 34%, rgba(0,0,0,.14) 83%),
    radial-gradient(ellipse at 30% 19%, rgba(255,255,255,.23), transparent 39%);
  mix-blend-mode: soft-light;
}

.ball-logo {
  position: relative;
  z-index: 1;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  opacity: 1;
  transform: translate3d(0,0,0) !important;
  filter: contrast(1.22) saturate(1.18) brightness(1.08) drop-shadow(0 1px 0 rgba(255,255,255,.32)) drop-shadow(0 2px 2px rgba(0,0,0,.52)) !important;
}

.whiteb .ball-logo {
  filter: contrast(1.20) saturate(1.18) drop-shadow(0 1px 1px rgba(255,255,255,.48)) drop-shadow(0 2px 2px rgba(0,0,0,.60)) !important;
}

#drum.tombola-mixing,
#drum.tombola-extracting {
  box-shadow:
    inset 24px 17px 45px rgba(255,255,255,.12),
    inset -43px -47px 76px rgba(0,0,0,.88),
    inset 0 -93px 86px rgba(0,0,0,.40),
    10px 13px 23px rgba(0,0,0,.69),
    0 0 38px rgba(255,25,46,.59) !important;
}

#drum.tombola-mixing .drum-backwall,
#drum.tombola-extracting .drum-backwall {
  animation: chamberBreath 1.35s ease-in-out infinite alternate;
}

#drum.tombola-mixing .lottery-ball .ball-shadow,
#drum.tombola-extracting .lottery-ball .ball-shadow {
  opacity: .15;
  transform: translate3d(0, 8px, -16px) scale(.68);
}

@keyframes chamberBreath {
  from { filter: brightness(.88) saturate(.92); }
  to { filter: brightness(1.16) saturate(1.18); }
}

.extract-ball {
  left: 520px !important;
  top: 337px !important;
  width: 65px !important;
  height: 65px !important;
  border-radius: 50% !important;
  filter: brightness(1.28) saturate(1.16) contrast(1.06) drop-shadow(0 10px 14px rgba(0,0,0,.76)) drop-shadow(0 0 18px rgba(227,6,19,.56)) !important;
}
.extract-ball.whiteb { filter: brightness(1.27) saturate(.88) drop-shadow(0 10px 14px rgba(0,0,0,.76)) drop-shadow(0 0 16px rgba(255,255,255,.43)) !important; }
.extract-ball .ball-brand { left: 16% !important; top: 16% !important; width: 68% !important; height: 68% !important; }

/* Segundo foco: la moto conserva su identidad y no compite con rótulos flotantes. */
.prize-zone {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.moto-halo {
  z-index: 1;
  bottom: 44px;
  width: 382px;
  height: 403px;
  filter: blur(5px);
  background:
    radial-gradient(ellipse at 50% 43%, rgba(255,255,255,.26), rgba(255,206,126,.11) 42%, transparent 70%);
}

.moto-floor-shadow {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 13px;
  width: 390px;
  height: 74px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0,0,0,.94), rgba(35,0,4,.66) 55%, transparent 73%);
  filter: blur(5px);
}

.moto-podium {
  z-index: 3;
  bottom: 10px;
  width: 390px;
  height: 87px;
  border: 3px solid #ef4b31;
  background: linear-gradient(180deg, #574640, #09080a 66%);
  box-shadow: 0 0 42px rgba(227,6,19,.91), inset 0 11px 27px rgba(255,255,255,.10);
}

.moto-photo {
  z-index: 8;
  bottom: 35px;
  height: 399px;
  max-width: 430px;
  filter: drop-shadow(0 32px 24px rgba(0,0,0,.92)) drop-shadow(0 0 16px rgba(255,255,255,.23));
}

.draw-console {
  z-index: 24;
  left: 19px;
  right: 19px;
  bottom: 10px;
}

.draw-announcement {
  z-index: 60;
}