/* Bola 8: estilos só deste jogo (prefixo .bola8-; o palco tem data-game="bola8") */

/* ---------- palco: o jogo é sempre DEITADO. A barra de cima do jogo (jogadores, relógio, pote) substitui o
   cabeçalho geral da partida e o botão de desistir, que aqui ficam escondidos ---------- */
.match:has(.stage[data-game='bola8']) .duel,
.match:has(.stage[data-game='bola8']) .match-actions {
  display: none;
}
.stage[data-game='bola8'] {
  aspect-ratio: 1.75 / 1;
}
.match:has(.stage[data-game='bola8']) {
  --board-w: min(1400px, 98vw, calc((100svh - var(--bola8-chrome, 104px)) * 1.75));
}
/* celular deitado (o layout geral já tira a barra do site): o jogo pega a tela inteira */
@media (orientation: landscape) and (max-height: 560px) {
  body .match:has(.stage[data-game='bola8']) {
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-template-areas: 'stage';
    /* desconta a área segura dos lados (no iPhone deitado a câmera fica em cima da barra de força) */
    --board-w: calc(100vw - max(8px, env(safe-area-inset-left)) - max(8px, env(safe-area-inset-right)));
  }
  body .match:has(.stage[data-game='bola8']) .duel,
  body .match:has(.stage[data-game='bola8']) .match-actions {
    display: none;
  }
  /* altura real medida (--altura-tela, ver main.js): o Safari do iOS 26 erra svh/dvh deitado (vão ou mesa cortada) */
  .match .stage[data-game='bola8'] {
    aspect-ratio: auto;
    height: calc(100svh - 12px);
    height: calc(var(--altura-tela, 100svh) - 12px);
  }
}
/* celular em pé: o palco fica em pé e o jogo vai deitado lá dentro, girado 90° (a pessoa vira o celular) */
@media (orientation: portrait) and (max-width: 900px) {
  .match:has(.stage[data-game='bola8']) {
    --board-w: calc(100vw - 8px);
  }
  .match .stage[data-game='bola8'] {
    aspect-ratio: auto;
    height: max(320px, calc(100svh - var(--bola8-chrome-v, 94px)));
    height: max(320px, calc(var(--altura-tela, 100svh) - var(--bola8-chrome-v, 94px)));
  }
}

.bola8-root {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform-origin: 0 0;
  overflow: hidden;
  isolation: isolate;
  container-type: size;
  border-radius: 18px;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  background: radial-gradient(
    ellipse at 50% 55%,
    color-mix(in srgb, var(--bola8-bg, #140f0a), #fff 7%),
    var(--bola8-bg, #140f0a) 70%
  );
  box-shadow:
    inset 0 0 0 1px rgba(245, 194, 43, 0.22),
    0 24px 50px -24px rgba(0, 0, 0, 0.9);
}
.bola8-root.can-play {
  cursor: crosshair;
}
/* o canvas fica por cima da barra e das colunas (o taco passa por cima delas, inteiro) e é transparente fora da
   mesa; não pega toque: a mira é tratada na caixa do jogo */
.bola8-root canvas.bola8-canvas {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  pointer-events: none;
}
.bola8-root.can-play :is(.bola8-top, .bola8-left, .bola8-right) {
  cursor: default;
}
.bola8-root.demo .bola8-left,
.bola8-root.demo .bola8-right,
.bola8-root.demo .bola8-top {
  display: none;
}

/* ---------- barra de cima: desistir | jogador 1 | pote | jogador 2 ---------- */
.bola8-top {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 3;
  height: var(--bola8-hb);
  display: grid;
  grid-template-columns: var(--bola8-cl) minmax(0, 1fr) auto minmax(0, 1fr) var(--bola8-cr);
  align-items: center;
  column-gap: clamp(6px, 1.2cqw, 14px);
  padding: 4px 0 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.15) 80%, transparent);
}
.bola8-quit {
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 40px;
  min-height: 40px;
  padding: 4px 4px 3px;
  border: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
  font: 800 9px/1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--line);
  transition:
    background 0.2s,
    color 0.2s;
}
.bola8-quit:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--paper);
}
.bola8-quit.armed {
  background: #e3192f;
  color: #fff;
  box-shadow: 0 0 16px rgba(227, 25, 47, 0.5);
}
.bola8-quit.gone {
  visibility: hidden;
}
.bola8-flag {
  position: relative;
  width: 16px;
  height: 16px;
}
.bola8-flag::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 1px;
  width: 2px;
  height: 14px;
  border-radius: 1px;
  background: currentColor;
}
.bola8-flag::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 9px;
  height: 7px;
  border-radius: 0 2px 2px 0;
  background: currentColor;
}

.bola8-tp {
  display: flex;
  align-items: center;
  gap: clamp(6px, 1cqw, 12px);
  min-width: 0;
  transition: opacity 0.3s;
}
.bola8-tp.p1 {
  flex-direction: row-reverse;
  text-align: right;
}
.bola8-tp.p1 .bola8-tname {
  justify-content: flex-end;
}
.bola8-tp.p1 .bola8-slots {
  justify-content: flex-end;
}
.bola8-tp.off {
  opacity: 0.55;
}
.bola8-av {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: calc(var(--bola8-hb) - 10px);
  aspect-ratio: 1;
  border-radius: 50%;
}
.bola8-av::before {
  content: '';
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  box-shadow:
    inset 0 -3px 0 rgba(0, 0, 0, 0.25),
    0 3px 8px rgba(0, 0, 0, 0.5);
}
.bola8-av.p1::before {
  background: radial-gradient(circle at 38% 30%, #ff6a78, var(--p1) 48%, var(--p1-deep));
}
.bola8-av.p2::before {
  background: radial-gradient(circle at 38% 30%, #fff3b8, var(--p2) 42%, var(--p2-deep));
}
.bola8-ini {
  position: relative;
  font: 400 calc(var(--bola8-hb) * 0.36)/1 var(--display);
  color: #fff;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
}
.bola8-av.p2 .bola8-ini {
  color: #3a2600;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}
.bola8-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  overflow: visible;
}
.bola8-rtrack {
  fill: none;
  stroke: rgba(255, 255, 255, 0.1);
  stroke-width: 3.2;
}
.bola8-rprog {
  fill: none;
  stroke: var(--gold);
  stroke-width: 3.2;
  stroke-linecap: round;
  filter: drop-shadow(0 0 3px rgba(245, 194, 43, 0.7));
  transition: stroke 0.3s;
}
.bola8-av.low .bola8-rprog {
  stroke: #ff3b4e;
  filter: drop-shadow(0 0 4px rgba(255, 59, 78, 0.9));
}
.bola8-tp.on .bola8-av {
  box-shadow:
    0 0 0 2px rgba(245, 194, 43, 0.35),
    0 0 22px rgba(245, 194, 43, 0.45);
}
.bola8-tinfo {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.bola8-tname {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}
.bola8-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 800 clamp(12px, calc(var(--bola8-hb) * 0.25), 17px)/1.1 var(--font);
  color: var(--paper);
}
.bola8-tp.on .bola8-name {
  color: var(--gold);
}
.bola8-tag {
  flex: none;
  font: 700 clamp(8px, calc(var(--bola8-hb) * 0.14), 10px)/1 var(--mono);
  letter-spacing: 0.1em;
  color: var(--muted);
}
.bola8-tp.off .bola8-tag {
  color: var(--bad);
}
.bola8-slots {
  display: flex;
  gap: clamp(2px, 0.4cqw, 4px);
}
.bola8-slots .bola8-ico {
  --s: clamp(11px, calc(var(--bola8-hb) * 0.27), 21px);
}

/* pote: o valor total em jogo (ou TREINO / AMISTOSO) */
.bola8-pot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: clamp(96px, 14cqw, 170px);
  padding: 3px 12px 4px;
  border-radius: 14px;
  background: linear-gradient(180deg, #2a2016, #120d09);
  box-shadow:
    inset 0 0 0 1.5px rgba(245, 194, 43, 0.55),
    inset 0 2px 0 rgba(255, 255, 255, 0.08),
    0 6px 16px rgba(0, 0, 0, 0.5);
}
.bola8-potrow {
  display: flex;
  align-items: center;
  gap: 6px;
}
.bola8-chips {
  display: none;
  position: relative;
  width: calc(var(--bola8-hb) * 0.3);
  height: calc(var(--bola8-hb) * 0.3);
}
.bola8-pot.money .bola8-chips {
  display: block;
}
.bola8-chips::before,
.bola8-chips::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 42%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 40%, #ffe27a, #f5c22b 55%, #8a5a00);
  box-shadow:
    0 2px 0 #7d5200,
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.35);
}
.bola8-chips::before {
  bottom: 0;
}
.bola8-chips::after {
  bottom: 36%;
}
.bola8-potv {
  font: 400 clamp(14px, calc(var(--bola8-hb) * 0.34), 26px)/1 var(--display);
  letter-spacing: 0.03em;
  color: var(--gold);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
  white-space: nowrap;
}
.bola8-potl {
  font: 700 clamp(7px, calc(var(--bola8-hb) * 0.12), 9px)/1 var(--mono);
  letter-spacing: 0.14em;
  color: var(--muted);
}
.bola8-potl:empty {
  display: none;
}
.bola8-turn {
  max-width: 34cqw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 800 clamp(8px, calc(var(--bola8-hb) * 0.15), 11px)/1.15 var(--font);
  letter-spacing: 0.05em;
  color: var(--paper);
}
.bola8-turn.mine {
  color: var(--gold);
  animation: bola8-nudge 1.6s ease-in-out infinite;
}
.bola8-turn:empty {
  display: none;
}
@keyframes bola8-nudge {
  50% {
    opacity: 0.65;
  }
}

/* bolinhas (barra de cima e canaleta) */
.bola8-ico {
  --s: 16px;
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.55), transparent 42%), var(--c);
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.35);
  transition:
    opacity 0.3s,
    filter 0.3s,
    box-shadow 0.3s;
}
.bola8-ico.st {
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.55), transparent 42%),
    linear-gradient(180deg, #f6f1e4 0 25%, var(--c) 25% 75%, #f6f1e4 75%);
}
.bola8-ico b {
  display: grid;
  place-items: center;
  width: 62%;
  height: 62%;
  border-radius: 50%;
  background: #fbf8ef;
  color: #111;
  font: 800 calc(var(--s) * 0.38)/1 var(--font);
}
.bola8-ico.empty {
  background: #050403;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(255, 255, 255, 0.08);
}
.bola8-ico.wait {
  opacity: 0.3;
  filter: saturate(0.4);
}
.bola8-ico.in {
  box-shadow:
    inset 0 -2px 3px rgba(0, 0, 0, 0.35),
    0 0 8px rgba(255, 240, 200, 0.55);
}
.bola8-ico.goal {
  box-shadow:
    0 0 0 1.5px var(--gold),
    0 0 10px rgba(245, 194, 43, 0.7);
  animation: bola8-nudge 1.4s ease-in-out infinite;
}

/* ---------- coluna da direita: canaleta das bolas encaçapadas ---------- */
.bola8-right {
  position: absolute;
  right: 0;
  top: var(--bola8-hb);
  bottom: 0;
  z-index: 2;
  width: var(--bola8-cr);
  padding: 8px 6px 10px 2px;
}
.bola8-tube {
  height: 100%;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 2px;
  padding: 6px 0;
  overflow: hidden;
  border-radius: 99px;
  background: linear-gradient(90deg, #07090b, #1d2328 35%, #0c0f12 70%, #050607);
  box-shadow:
    inset 0 0 0 1.5px rgba(205, 214, 221, 0.35),
    inset 0 6px 12px rgba(0, 0, 0, 0.8),
    0 4px 10px rgba(0, 0, 0, 0.5);
}
.bola8-tube .bola8-ico {
  --s: calc(var(--bola8-cr) - 18px);
  animation: bola8-drop 0.45s var(--ease-out);
}
@keyframes bola8-drop {
  from {
    transform: translateY(-40px);
    opacity: 0;
  }
}

/* ---------- coluna da esquerda: força (puxa para baixo e solta) + efeito ---------- */
.bola8-left {
  position: absolute;
  left: 0;
  top: var(--bola8-hb);
  bottom: 0;
  z-index: 2;
  width: var(--bola8-cl);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 4px 10px 8px;
}
.bola8-power {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: grab;
  touch-action: none;
  transition: opacity 0.25s;
}
.bola8-power.pulling {
  cursor: grabbing;
}
.bola8-power.off {
  opacity: 0.4;
  cursor: default;
}
.bola8-plabel {
  font: 700 10px/1 var(--mono);
  letter-spacing: 0.16em;
  color: var(--gold);
}
.bola8-ptrack {
  position: relative;
  flex: 1;
  min-height: 60px;
  width: clamp(34px, 62%, 48px);
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(90deg, #0b0806, #261c14 50%, #0b0806);
  box-shadow:
    inset 0 0 0 2px rgba(245, 194, 43, 0.6),
    inset 0 8px 16px rgba(0, 0, 0, 0.85),
    0 4px 10px rgba(0, 0, 0, 0.5);
}
.bola8-pfill {
  position: absolute;
  left: 3px;
  right: 3px;
  top: 3px;
  bottom: 3px;
  border-radius: 20px;
  transform-origin: 50% 0;
  transform: scaleY(0);
  background: linear-gradient(180deg, #ffe27a, #f5c22b 38%, #f0791e 70%, #e3192f);
  opacity: 0.9;
}
.bola8-pstick {
  position: absolute;
  left: 50%;
  top: 5%;
  width: 9px;
  height: 86%;
  margin-left: -4.5px;
  border-radius: 5px;
  background: linear-gradient(
    180deg,
    #1f4f8f 0 2.5%,
    #f3efe6 2.5% 5%,
    #e2c38a 5% 50%,
    #f5c22b 50% 52%,
    #3a160b 52% 72%,
    #f5c22b 72% 73.5%,
    #141414 73.5% 95%,
    #8f0d1c 95%
  );
  box-shadow:
    0 3px 8px rgba(0, 0, 0, 0.7),
    inset -2px 0 2px rgba(0, 0, 0, 0.35),
    inset 2px 0 2px rgba(255, 255, 255, 0.25);
}
.bola8-pval {
  min-height: 13px;
  font: 700 12px/1 var(--mono);
  color: var(--paper);
}

.bola8-spin {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.bola8-spin:disabled {
  opacity: 0.4;
  cursor: default;
}
.bola8-spin small {
  font: 700 9px/1 var(--mono);
  letter-spacing: 0.14em;
}
.bola8-sball {
  position: relative;
  display: block;
  width: clamp(40px, calc(var(--bola8-cl) - 16px), 58px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #fff, #f2ede1 45%, #b8b0a0);
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.6),
    inset 0 0 0 1px rgba(0, 0, 0, 0.18);
}
.bola8-spin.set .bola8-sball {
  box-shadow:
    0 0 0 2px var(--gold),
    0 4px 10px rgba(0, 0, 0, 0.6);
}
.bola8-sdot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22%;
  height: 22%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: #e3192f;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7);
}

/* ---------- aviso no meio da mesa (falta, grupo, joga de novo) ---------- */
.bola8-pop {
  position: absolute;
  left: var(--bola8-cl);
  right: var(--bola8-cr);
  top: var(--bola8-ty, 50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-50%);
}
.bola8-pop b {
  padding: 6px 14px;
  border-radius: 10px;
  background: rgba(8, 6, 4, 0.62);
  font: 400 clamp(18px, 8cqh, 40px)/1.05 var(--display);
  letter-spacing: 0.03em;
  color: var(--paper);
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.6);
}
.bola8-pop small {
  padding: 3px 10px;
  border-radius: 8px;
  background: rgba(8, 6, 4, 0.66);
  font: 700 clamp(10px, 3.8cqh, 13px)/1.2 var(--font);
  color: var(--paper);
}
.bola8-pop.show {
  animation: bola8-pop 2.4s var(--ease-out) both;
}
.bola8-pop.gold b {
  color: var(--gold);
}
.bola8-pop.bad b {
  color: #ff5d6c;
}
@keyframes bola8-pop {
  0% {
    opacity: 0;
    transform: translateY(-38%) scale(0.9);
  }
  12% {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
  82% {
    opacity: 1;
    transform: translateY(-50%);
  }
  100% {
    opacity: 0;
    transform: translateY(-58%);
  }
}

/* ---------- seletor de efeito (grande, por cima) ---------- */
.bola8-spinpad {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  background: rgba(5, 4, 3, 0.6);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.bola8-spinpad[hidden] {
  display: none;
}
.bola8-padcard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(6px, 2.5cqh, 12px);
  padding: clamp(8px, 3cqh, 16px) 18px;
  border-radius: 18px;
  background: linear-gradient(180deg, #221a14, #110c09);
  box-shadow:
    inset 0 0 0 1px rgba(245, 194, 43, 0.45),
    0 20px 40px rgba(0, 0, 0, 0.6);
}
.bola8-padtitle {
  font: 700 12px/1 var(--font);
  color: var(--muted);
}
.bola8-pball-big {
  position: relative;
  width: min(54cqh, 210px);
  aspect-ratio: 1;
  border-radius: 50%;
  cursor: crosshair;
  touch-action: none;
  background: radial-gradient(circle at 36% 30%, #fff, #f1ece0 50%, #b3ab9b);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.6);
}
.bola8-pball-big::after {
  content: '';
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  border: 1.5px dashed rgba(0, 0, 0, 0.22);
  pointer-events: none;
}
.bola8-cross {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.bola8-cross::before,
.bola8-cross::after {
  content: '';
  position: absolute;
  background: rgba(0, 0, 0, 0.16);
}
.bola8-cross::before {
  left: 50%;
  top: 10%;
  bottom: 10%;
  width: 1px;
}
.bola8-cross::after {
  top: 50%;
  left: 10%;
  right: 10%;
  height: 1px;
}
.bola8-pdot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16%;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: #e3192f;
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.75),
    0 2px 6px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
.bola8-padrow {
  display: flex;
  gap: 8px;
}
.bola8-padbtn {
  min-height: 40px;
  padding: 0 18px;
  border: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.09);
  color: var(--paper);
  font: 800 14px/1 var(--font);
  cursor: pointer;
}
.bola8-padbtn.ok {
  background: var(--gold);
  color: var(--ink);
}

/* ---------- celular em pé: aviso para virar (não bloqueia o toque) ---------- */
.bola8-turnhint {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 8;
  display: none;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-radius: 99px;
  transform: translate(-50%, -50%);
  background: rgba(10, 8, 6, 0.88);
  box-shadow:
    inset 0 0 0 1px rgba(245, 194, 43, 0.55),
    0 10px 30px rgba(0, 0, 0, 0.6);
  color: var(--paper);
  font: 700 13px/1 var(--font);
  white-space: nowrap;
  pointer-events: none;
}
.stage.bola8-turned .bola8-turnhint {
  display: flex;
  animation: bola8-hint 6s ease-in 1 forwards;
}
.bola8-phone {
  flex: none;
  width: 13px;
  height: 22px;
  border-radius: 3px;
  border: 2px solid var(--gold);
  box-shadow: inset 0 -3px 0 -1px rgba(245, 194, 43, 0.6);
  animation: bola8-rot 2.2s ease-in-out infinite;
}
@keyframes bola8-rot {
  0%,
  25% {
    transform: rotate(0);
  }
  55%,
  100% {
    transform: rotate(90deg);
  }
}
@keyframes bola8-hint {
  0%,
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

/* ---------- pôster do catálogo: bola 8 e taco no feltro ---------- */
.poster-art:has(.bola8-poster) {
  background: radial-gradient(ellipse at 50% 38%, #157a4d, #08422a 55%, #061409);
}
.bola8-poster {
  position: absolute;
  inset: 0;
  transition: transform 0.4s var(--ease-out);
}
.poster:hover .bola8-poster {
  transform: translateY(-2%) scale(1.03);
}
.bola8-pfelt {
  position: absolute;
  left: 9%;
  right: 9%;
  top: 9%;
  height: 50%;
  border-radius: 3cqi;
  background: radial-gradient(ellipse at 50% 42%, #1ea468, #0d6b43 58%, #084a2e);
  box-shadow:
    0 0 0 2.6cqi #4a1a0c,
    0 0 0 3.1cqi #f5c22b,
    0 2cqi 6cqi rgba(0, 0, 0, 0.7);
}
.bola8-pfelt::before,
.bola8-pfelt::after {
  content: '';
  position: absolute;
  width: 5cqi;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #050403;
  box-shadow: 0 0 0 0.5cqi #f5c22b;
}
.bola8-pfelt::before {
  left: -2.4cqi;
  top: -2.4cqi;
}
.bola8-pfelt::after {
  right: -2.4cqi;
  top: -2.4cqi;
}
.bola8-pball {
  position: absolute;
  display: grid;
  place-items: center;
  width: 13cqi;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.8) 0 6%, transparent 26%),
    radial-gradient(circle at 50% 50%, var(--c) 56%, color-mix(in srgb, var(--c), #000 48%));
  box-shadow: 0 1.6cqi 1.8cqi rgba(0, 0, 0, 0.55);
}
.bola8-pball b {
  display: grid;
  place-items: center;
  width: 46%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fbf8ef;
  color: #111;
  font: 800 5.4cqi/1 var(--font);
}
.bola8-pball.b8 {
  --c: #151515;
  left: 57%;
  top: 31%;
  width: 21cqi;
}
.bola8-pball.b8 b {
  font-size: 8.6cqi;
}
.bola8-pball.b3 {
  --c: #d3222a;
  left: 76%;
  top: 22%;
}
.bola8-pball.b11 {
  --c: #b71c25;
  left: 79%;
  top: 45%;
}
.bola8-pball.st {
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.8) 0 6%, transparent 26%),
    radial-gradient(circle at 50% 50%, transparent 56%, rgba(0, 0, 0, 0.45)),
    linear-gradient(180deg, #f6f1e4 0 25%, var(--c) 25% 75%, #f6f1e4 75%);
}
.bola8-pball.cue {
  --c: #f6f1e4;
  left: 31%;
  top: 44%;
  width: 12cqi;
}
.bola8-pcue {
  position: absolute;
  left: -9%;
  top: 49%;
  width: 34%;
  height: 2.4cqi;
  border-radius: 1.2cqi;
  transform-origin: 100% 50%;
  transform: rotate(-21deg);
  background: linear-gradient(
    90deg,
    #0d0d0d 0 8%,
    #8f0d1c 8% 13%,
    #141414 13% 38%,
    #f5c22b 38% 40%,
    #3a160b 40% 60%,
    #e2c38a 60% 95%,
    #f3efe6 95% 98%,
    #1f4f8f 98%
  );
  box-shadow: 0 1.2cqi 1.4cqi rgba(0, 0, 0, 0.5);
}