/* ============================================================
   CASSINO PLACEBO — estilos dos jogos e das miniaturas do lobby
   ============================================================ */

/* ---------- miniaturas (cards do lobby) ---------- */

.card-thumb { font-family: var(--f-digito); }

.th-dice { width: 78%; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.th-dice-trilho {
  width: 100%; height: 10px; border-radius: 999px;
  background: linear-gradient(90deg, var(--tarja-2), var(--tarja) 55%, var(--led-2) 55.2%, var(--led));
  position: relative;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.5);
}
.th-dice-trilho i {
  position: absolute; top: -4px; width: 6px; height: 18px;
  background: var(--papel); border-radius: 3px;
  box-shadow: 0 0 8px rgba(82,255,160,.7);
}
.th-dice-num { font-weight: 900; font-size: 24px; color: var(--led); text-shadow: 0 0 12px rgba(82,255,160,.6); }

.th-limbo span {
  font-weight: 900; font-size: 38px; color: var(--led);
  text-shadow: 0 0 16px rgba(82,255,160,.65), 0 0 50px rgba(82,255,160,.25);
}

.th-coin {
  width: 74px; height: 74px; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #DFF5E4, #9BD8AE 45%, #4E9B68 90%);
  border: 4px solid #3B7A52;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 24px; color: #14261B;
  box-shadow: 0 8px 20px rgba(0,0,0,.5), inset 0 -4px 8px rgba(0,0,0,.25);
  transform: rotate(-12deg);
}

.th-crash svg { width: 86%; height: 76%; }
.th-crash polyline { fill: none; stroke: var(--led); stroke-width: 3; filter: drop-shadow(0 0 6px rgba(82,255,160,.7)); }
.th-crash .queda { stroke: var(--tarja); stroke-dasharray: 4 4; filter: none; }

.th-mines { display: grid; grid-template-columns: repeat(3, 26px); gap: 5px; }
.th-mines i {
  width: 26px; height: 26px; border-radius: 5px;
  background: var(--vitrine-2); border: 1px solid var(--risco-2);
}
.th-mines i.ok { background: rgba(82,255,160,.16); border-color: var(--led-2); box-shadow: 0 0 8px rgba(82,255,160,.3); }
.th-mines i.boleto {
  background: repeating-linear-gradient(90deg, #FFD9DE 0 2px, #7A1020 2px 4px);
  border-color: var(--tarja);
}

.th-tower { display: flex; gap: 6px; align-items: flex-end; height: 70%; }
.th-tower i { width: 22px; border-radius: 4px 4px 0 0; background: var(--vitrine-2); border: 1px solid var(--risco-2); }
.th-tower i:nth-child(1) { height: 42%; }
.th-tower i:nth-child(2) { height: 68%; background: rgba(82,255,160,.16); border-color: var(--led-2); box-shadow: 0 0 10px rgba(82,255,160,.35); }
.th-tower i:nth-child(3) { height: 90%; }

.th-plinko { position: relative; width: 100%; height: 100%; }
.th-plinko .pinos {
  position: absolute; inset: 12% 18% 30%;
  background-image: radial-gradient(circle 2.5px, var(--texto-2) 92%, transparent);
  background-size: 18px 15px;
  background-position: 0 0;
  -webkit-mask-image: linear-gradient(to bottom right, transparent 46%, #000 46%), linear-gradient(to bottom left, transparent 46%, #000 46%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom right, transparent 46%, #000 46%), linear-gradient(to bottom left, transparent 46%, #000 46%);
  mask-composite: intersect;
}
.th-plinko .bola {
  position: absolute; top: 16%; left: 50%; width: 11px; height: 11px; margin-left: -5px;
  border-radius: 50%; background: var(--led);
  box-shadow: 0 0 10px rgba(82,255,160,.8);
}

.th-roleta {
  width: 84px; height: 84px; border-radius: 50%;
  background: conic-gradient(var(--tarja) 0 20deg, #0E1A12 20deg 40deg, var(--tarja) 40deg 60deg, #0E1A12 60deg 80deg,
    var(--led-2) 80deg 90deg, var(--tarja) 90deg 110deg, #0E1A12 110deg 130deg, var(--tarja) 130deg 150deg,
    #0E1A12 150deg 170deg, var(--tarja) 170deg 190deg, #0E1A12 190deg 210deg, var(--tarja) 210deg 230deg,
    #0E1A12 230deg 250deg, var(--tarja) 250deg 270deg, #0E1A12 270deg 290deg, var(--tarja) 290deg 310deg,
    #0E1A12 310deg 330deg, var(--tarja) 330deg 350deg, #0E1A12 350deg 360deg);
  border: 5px solid #1E3A29;
  box-shadow: 0 0 0 2px #0A150E, 0 10px 26px rgba(0,0,0,.55), inset 0 0 0 17px rgba(7,16,9,.55);
  position: relative;
}
.th-roleta::after {
  content: ""; position: absolute; inset: 30px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #16301F, #0A150E);
  border: 1px solid var(--risco-2);
}

.th-slots { display: flex; gap: 5px; }
.th-slots i {
  width: 30px; height: 44px; border-radius: 5px;
  background: linear-gradient(180deg, #F4F8EA, var(--papel-2));
  border: 2px solid #3B7A52;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-display); font-size: 16px; color: #B22036;
}
.th-slots i:nth-child(2) { color: #14261B; }

.th-rasp {
  width: 78%; height: 62%;
  border-radius: 8px;
  background:
    linear-gradient(115deg, transparent 42%, rgba(82,255,160,.9) 42%, rgba(82,255,160,.9) 58%, transparent 58%),
    repeating-linear-gradient(135deg, #B9C4AC 0 6px, #97A48C 6px 12px);
  border: 2px solid #77836D;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  overflow: hidden;
}
.th-rasp b { font-family: var(--f-digito); font-weight: 900; color: #0E1A12; font-size: 18px; }

/* ---------- resultado comum ---------- */
.resultado-slot { margin-top: 12px; }

/* ---------- DADO ---------- */

.palco-dice { display: flex; flex-direction: column; justify-content: center; gap: 22px; }

.dice-display { text-align: center; }
.dice-num {
  font-family: var(--f-digito);
  font-weight: 900;
  font-size: clamp(56px, 10vw, 96px);
  line-height: 1;
  color: var(--texto);
  text-shadow: 0 0 14px rgba(217, 232, 214, .2);
}
.dice-num.win { color: var(--led); text-shadow: 0 0 18px rgba(82,255,160,.65); }
.dice-num.loss { color: var(--tarja); text-shadow: 0 0 18px rgba(255,61,85,.45); }

.dice-trilho-wrap { padding: 0 6px; }
.dice-trilho {
  position: relative;
  height: 16px;
  border-radius: 999px;
  background: linear-gradient(180deg, #0A150E, #122417);
  border: 1px solid var(--risco);
  box-shadow: inset 0 3px 7px rgba(0,0,0,.55);
}
.dice-zona {
  position: absolute; top: 2px; bottom: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(82,255,160,.55), rgba(82,255,160,.85));
  box-shadow: 0 0 12px rgba(82,255,160,.35);
}
.dice-alvo {
  position: absolute; top: -9px; bottom: -9px; width: 4px; margin-left: -2px;
  background: var(--papel);
  border-radius: 2px;
}
.dice-alvo b {
  position: absolute; top: -22px; left: 50%; transform: translateX(-50%);
  font-family: var(--f-mono); font-size: 11px; color: var(--texto-2); font-weight: 600;
}
.dice-cursor {
  position: absolute; top: -7px; width: 12px; height: 30px; margin-left: -6px;
  border-radius: 4px;
  background: var(--texto);
  box-shadow: 0 2px 8px rgba(0,0,0,.6);
  left: 0%;
}
.dice-cursor.win { background: var(--led); box-shadow: 0 0 14px rgba(82,255,160,.8); }
.dice-cursor.loss { background: var(--tarja); box-shadow: 0 0 14px rgba(255,61,85,.6); }

.dice-escala {
  display: flex; justify-content: space-between;
  font-family: var(--f-mono); font-size: 10px; color: var(--texto-2);
  padding: 8px 0 0;
}

#diceRange { -webkit-appearance: none; appearance: none; width: 100%; height: 30px; background: transparent; cursor: pointer; }
#diceRange::-webkit-slider-runnable-track {
  height: 6px; border-radius: 999px;
  background: #0A150E; border: 1px solid var(--risco);
}
#diceRange::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 26px; height: 24px; margin-top: -10px;
  border-radius: 6px;
  background: linear-gradient(180deg, #F4F8EA, var(--papel) 55%, var(--papel-2));
  border: 2px solid #0A140D;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .5);
}
#diceRange::-moz-range-track {
  height: 6px; border-radius: 999px;
  background: #0A150E; border: 1px solid var(--risco);
}
#diceRange::-moz-range-thumb {
  width: 24px; height: 22px;
  border-radius: 6px;
  background: linear-gradient(180deg, #F4F8EA, var(--papel) 55%, var(--papel-2));
  border: 2px solid #0A140D;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .5);
}

/* ---------- LIMBO ---------- */

.palco-limbo { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; }
.limbo-display { min-height: 130px; display: flex; align-items: center; }
#limboNum {
  font-family: var(--f-digito);
  font-weight: 900;
  font-size: clamp(58px, 11vw, 110px);
  color: var(--texto);
  line-height: 1;
}
#limboNum.win { color: var(--led); text-shadow: 0 0 22px rgba(82,255,160,.7); }
#limboNum.loss { color: var(--tarja); text-shadow: 0 0 22px rgba(255,61,85,.5); }
.palco-limbo .historico { justify-content: center; }

/* ---------- FOGUETINHO ---------- */

.palco-crash { display: flex; flex-direction: column; gap: 10px; }
.crash-hud { display: flex; align-items: baseline; gap: 14px; }
.crash-num {
  font-family: var(--f-digito);
  font-weight: 900;
  font-size: clamp(40px, 7vw, 64px);
  line-height: 1;
  color: var(--texto);
}
.crash-num.win { color: var(--led); text-shadow: 0 0 18px rgba(82,255,160,.6); }
.crash-num.loss { color: var(--tarja); text-shadow: 0 0 18px rgba(255,61,85,.5); }
.crash-tag { font-family: var(--f-mono); font-size: 11px; color: var(--texto-2); }
#crashCv { width: 100%; height: 300px; display: block; }

/* ---------- CARA OU COROA ---------- */

.palco-coin { display: flex; flex-direction: column; align-items: center; gap: 18px; justify-content: center; }
.coin-cena { perspective: 900px; height: 150px; display: flex; align-items: center; }
.moeda { width: 138px; height: 138px; position: relative; transform-style: preserve-3d; }
.moeda .face {
  position: absolute; inset: 0;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  backface-visibility: hidden;
  border: 6px solid #3B7A52;
  background: radial-gradient(circle at 34% 28%, #E7F8EA, #9BD8AE 48%, #4E9B68 92%);
  box-shadow: 0 12px 30px rgba(0,0,0,.5), inset 0 -5px 10px rgba(0,0,0,.25);
}
.moeda .face.coroa { transform: rotateY(180deg); }
.moeda .face svg { width: 62px; height: 62px; }
.moeda .face svg path { fill: #14261B; }
.moeda .face.coroa b { font-family: var(--f-display); font-size: 40px; color: #14261B; }
.coin-botoes { display: flex; gap: 10px; width: 100%; max-width: 360px; }
.coin-botoes .btn { flex: 1; font-size: 16px; padding: 14px 10px; }
.coin-escada { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; min-height: 24px; }
.ficha-hist.prox { border-style: dashed; color: var(--texto); }
#btnSacarCoin { max-width: 360px; }

/* ---------- CAMPO DE BOLETOS ---------- */

.palco-mines { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.mn-grade {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  width: min(430px, 100%);
}
.mn-cel {
  aspect-ratio: 1;
  border-radius: 9px;
  border: 1px solid var(--risco-2);
  background: linear-gradient(180deg, #132618, #0D1A11);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 14%;
  transition: transform .08s ease, border-color .12s ease, background .12s ease;
}
.mn-cel:hover:not(:disabled) { border-color: var(--led-2); transform: translateY(-2px); }
.mn-cel:disabled { cursor: default; }
.mn-cel svg { width: 100%; height: auto; }
.mn-cel.ok { background: rgba(82,255,160,.10); border-color: var(--led-2); box-shadow: 0 0 12px rgba(82,255,160,.25); }
.mn-cel.boleto { background: rgba(255,61,85,.08); border-color: rgba(255,61,85,.5); opacity: .8; }
.mn-cel.boom { background: rgba(255,61,85,.2); border-color: var(--tarja); box-shadow: 0 0 16px rgba(255,61,85,.5); animation: mnshake .3s; }
.mn-cel.apagada { opacity: .35; }
@keyframes mnshake { 25% { transform: translateX(-3px) } 75% { transform: translateX(3px) } }

/* ---------- TORRE ---------- */

.palco-tower { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.tw-torre { display: flex; flex-direction: column; gap: 6px; width: min(380px, 100%); }
.tw-andar { display: flex; gap: 6px; align-items: center; opacity: .6; }
.tw-andar.ativo { opacity: 1; }
.tw-mult {
  font-family: var(--f-mono); font-size: 10px; color: var(--texto-2);
  width: 52px; text-align: right; flex: none;
}
.tw-andar.ativo .tw-mult { color: var(--led); }
.tw-cel {
  flex: 1;
  height: 38px;
  border-radius: 7px;
  border: 1px solid var(--risco-2);
  background: linear-gradient(180deg, #132618, #0D1A11);
  cursor: pointer;
  color: var(--texto);
  font-family: var(--f-mono);
  font-weight: 600;
  transition: transform .08s ease, border-color .12s ease;
}
.tw-andar.ativo .tw-cel:not(:disabled) { border-color: var(--risco-2); box-shadow: inset 0 0 0 1px rgba(82,255,160,.15); }
.tw-andar.ativo .tw-cel:hover:not(:disabled) { border-color: var(--led-2); transform: translateY(-2px); }
.tw-cel.ok { background: rgba(82,255,160,.12); border-color: var(--led-2); color: var(--led); }
.tw-cel.bomba { color: rgba(255,61,85,.7); border-color: rgba(255,61,85,.4); }
.tw-cel.boom { background: rgba(255,61,85,.2); border-color: var(--tarja); color: var(--tarja); animation: mnshake .3s; }

/* ---------- PLINKO ---------- */

.palco-plinko { display: flex; flex-direction: column; gap: 8px; }
#plCv { width: 100%; height: 430px; display: block; }
@media (max-width: 760px) { #plCv { height: 350px; } }

/* ---------- ROLETA ---------- */

.palco-roleta { display: flex; flex-direction: column; gap: 16px; }
.rl-topo { display: flex; gap: 18px; align-items: center; }
.rl-lado { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.rl-num {
  font-family: var(--f-digito);
  font-weight: 900;
  font-size: 54px;
  line-height: 1;
  color: var(--texto-2);
}
.rl-num.verm { color: var(--tarja); text-shadow: 0 0 14px rgba(255,61,85,.5); }
.rl-num.preto { color: var(--texto); }
.rl-num.zero { color: var(--led); text-shadow: 0 0 14px rgba(82,255,160,.6); }
.rl-lado .resultado-slot { margin: 0; }
.rl-lado .historico { margin: 0; }

.rl-scroll { overflow-x: auto; padding-bottom: 4px; }
.rl-mesa {
  display: grid;
  grid-template-columns: 34px repeat(12, minmax(26px, 1fr)) 40px;
  grid-auto-rows: 34px;
  gap: 3px;
  min-width: 480px;
}
.rl-cel {
  position: relative;
  border-radius: 5px;
  border: 1px solid var(--risco-2);
  background: #101B13;
  color: var(--texto);
  font-family: var(--f-mono);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: filter .1s ease, border-color .1s ease;
  padding: 0;
}
.rl-cel:hover { filter: brightness(1.35); border-color: var(--led-2); }
.rl-cel.verm { background: #7A1523; }
.rl-cel.zero { background: #14532F; }
.rl-cel.lado, .rl-cel.faixa { background: #0C1810; color: var(--texto-2); }
.rl-cel.venceu { border-color: var(--led); box-shadow: 0 0 12px rgba(82,255,160,.55); }
.rl-badge {
  position: absolute;
  top: -6px; right: -4px;
  background: linear-gradient(180deg, #F4F8EA, var(--papel-2));
  color: var(--papel-tinta);
  border: 1px solid #0A140D;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  font-style: normal;
  box-shadow: 0 2px 4px rgba(0,0,0,.5);
}
.rl-losango {
  width: 14px; height: 14px;
  display: inline-block;
  transform: rotate(45deg);
  border-radius: 2px;
}
.rl-losango.verm { background: var(--tarja); }
.rl-losango.preto { background: #2A3A2E; border: 1px solid var(--texto-2); }
@media (max-width: 760px) {
  .rl-topo { flex-direction: column; align-items: center; }
  .rl-lado { align-items: center; }
}

/* ---------- CAÇA-PILA ---------- */

.palco-slots { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.sl-maquina {
  background: linear-gradient(180deg, #16301F, #0E2013);
  border: 2px solid var(--risco-2);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 14px 40px rgba(0,0,0,.5), inset 0 1px 0 rgba(82,255,160,.12);
  width: min(360px, 100%);
}
.sl-janela {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  height: 240px;
  overflow: hidden;
  border-radius: 10px;
  background: #0A150E;
  border: 1px solid var(--risco);
}
.sl-reel { display: flex; flex-direction: column; will-change: transform; }
.sl-cel { height: 80px; flex: none; display: flex; align-items: center; justify-content: center; }
.sl-cel svg { width: 52px; height: 52px; }
.sl-janela::before, .sl-janela::after {
  content: ""; position: absolute; left: 0; right: 0; height: 34px; z-index: 2; pointer-events: none;
}
.sl-janela::before { top: 0; background: linear-gradient(180deg, rgba(7,16,9,.9), transparent); }
.sl-janela::after { bottom: 0; background: linear-gradient(0deg, rgba(7,16,9,.9), transparent); }
.sl-linhas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }
.sl-linhas polyline { fill: none; stroke: transparent; stroke-width: 3; }
.sl-linhas polyline.on { stroke: var(--led); filter: drop-shadow(0 0 6px rgba(82,255,160,.8)); opacity: .9; }
.sl-paytable { display: flex; flex-wrap: wrap; gap: 6px 12px; justify-content: center; }
.sl-pay {
  display: inline-flex; align-items: center; gap: 2px;
  font-family: var(--f-mono); font-size: 11px; color: var(--texto-2);
  border: 1px solid var(--risco); border-radius: 999px; padding: 3px 9px;
}
.sl-pay svg { width: 15px; height: 15px; }
.sl-pay b { color: var(--led-2); margin-left: 3px; }

/* ---------- RASPADINHA ---------- */

.palco-rasp { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.rs-cartela { width: min(360px, 100%); }
.rs-cartela.ganhou { box-shadow: 0 10px 30px rgba(0,0,0,.5), 0 0 24px rgba(82,255,160,.35); }
.rs-cabeca {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 12px 16px 8px;
  font-size: 12px;
}
.rs-cabeca b { font-family: var(--f-display); letter-spacing: .5px; }
.rs-area { position: relative; margin: 0 12px 12px; }
.rs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.rs-cel {
  aspect-ratio: 4/3;
  border: 1.5px dashed rgba(20,38,27,.4);
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.4);
}
.rs-cel b { font-family: var(--f-digito); font-weight: 900; font-size: clamp(13px, 4vw, 17px); color: #14261B; }
.rs-cartela.ganhou .rs-cel.e-premio { background: rgba(82,255,160,.35); border-color: #2FBF74; border-style: solid; }
#rsCv {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border-radius: 8px;
  touch-action: none;
  cursor: crosshair;
  transition: opacity .5s ease;
}

/* ---------- juice por jogo ---------- */

/* caça-pila: giro com blur, suspense no 3º rolo, células vencedoras */
.sl-reel.girando { filter: blur(2.6px) saturate(.9); }
.sl-janela.quente { border-color: var(--led-2); animation: slQuente .5s infinite; }
@keyframes slQuente {
  50% { box-shadow: 0 0 22px rgba(82,255,160,.5), inset 0 0 18px rgba(82,255,160,.18); }
}
.sl-cel.brilha { animation: slBrilha .55s 3; border-radius: 8px; }
@keyframes slBrilha {
  50% { background: rgba(82,255,160,.2); box-shadow: inset 0 0 0 2px var(--led); }
}

/* campo de boletos e torre: revelação com pop */
.mn-cel.ok, .tw-cel.ok { animation: celPop .3s cubic-bezier(.3,1.7,.45,1); }
@keyframes celPop { 45% { transform: scale(1.16); } }

/* moeda no ar: blur na moeda, salto no palco (o transform inline do flip fica intacto) */
.moeda.no-ar { animation: moedaBlur 1.05s ease-in-out; }
@keyframes moedaBlur {
  30% { filter: blur(1.8px); }
  55% { filter: blur(2.1px); }
  85% { filter: blur(.6px); }
}
.coin-cena:has(.no-ar) { animation: moedaSalto 1.05s cubic-bezier(.35,0,.3,1); }
@keyframes moedaSalto {
  45% { transform: translateY(-24px); }
}

/* raspadinha: flocos de raspa e células virando */
.rs-floco {
  position: fixed;
  z-index: 155;
  width: 5px; height: 5px;
  border-radius: 1.5px;
  background: #97A48C;
  pointer-events: none;
  animation: rsFloco .62s ease-in forwards;
}
@keyframes rsFloco {
  to { transform: translate(var(--desvio, 0px), 90px) rotate(160deg); opacity: 0; }
}
.rs-cel.vira { animation: rsVira .34s cubic-bezier(.3,1.5,.5,1) backwards; }
@keyframes rsVira {
  0% { transform: scaleY(.1); opacity: .3; }
  60% { transform: scaleY(1.12); opacity: 1; }
}

/* torre: bombas dos andares que ficaram acima (reveladas ao fim) */
.tw-cel.bomba.futura { opacity: .38; }