/* =========================================================
   Baraja del Gambling: el suelo ajedrezado (rojo y negro) con la casilla dorada, las monedas, el dado, la moneda que se
   lanza, la ruleta y la escena (una mesa de casino: tapete verde y baranda de madera con filo dorado).
   ========================================================= */

/* ---------- el suelo ---------- */
.cell.gRed:not(.selectable):not(.selectable-out) { background-color: #8E1F2E; }
.cell.gBlack:not(.selectable):not(.selectable-out) { background-color: #26262D; }
.cell.gRed, .cell.gBlack { box-shadow: inset 0 1px 0 rgba(255,255,255,.07), inset 0 -2px 0 rgba(0,0,0,.18); }
.cell.gRed .parLabel, .cell.gBlack .parLabel { color: rgba(246,240,226,.75); }
/* la casilla dorada: oro con un destello que la cruza de vez en cuando */
.cell.gGold:not(.selectable):not(.selectable-out) { background-color: #C9962E; }
.cell.gGold { overflow: hidden;
  box-shadow: inset 0 0 0 2px #FFE38A, inset 0 0 12px 2px rgba(255,240,190,.55), 0 0 10px 1px rgba(242,193,78,.45); }
.cell.gGold::before { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.55) 48%, transparent 60%) no-repeat; background-size: 300% 100%;
  animation: goldSheen 3.4s ease-in-out infinite; }
@keyframes goldSheen { 0%, 55% { background-position: 150% 0; } 100% { background-position: -150% 0; } }
/* su ruleta: caer en la casilla dorada la hace girar (gira despacio, como esperando) */
.cell .gGoldIco { position: absolute; left: 50%; top: 50%; width: calc(var(--cell-w) * .64); aspect-ratio: 1; transform: translate(-50%, -50%);
  pointer-events: none; opacity: .9; filter: drop-shadow(0 1px 2px rgba(90,50,10,.4)); }
.cell .gGoldIco svg { width: 100%; height: 100%; display: block; }
.gGoldRot { transform-box: fill-box; transform-origin: center; animation: skSpin 14s linear infinite; } /* (fill-box: la rueda es un círculo centrado; con view-box y un viewBox negativo, Chrome la sacaba de sitio) */
html.reduceMotion .gGoldRot { animation: none; }
/* la ruleta ha caído en este color: la casilla se ilumina */
.cell.rlHit { animation: rlHit 1.5s ease-out both; }
@keyframes rlHit { 0% { box-shadow: inset 0 0 0 0 rgba(255,236,170,0); } 18% { box-shadow: inset 0 0 0 3px #FFE38A, inset 0 0 0 999px rgba(255,236,170,.3), 0 0 14px 2px rgba(242,193,78,.7); }
  100% { box-shadow: inset 0 0 0 0 rgba(255,236,170,0), 0 0 0 0 rgba(242,193,78,0); } }
.cell.jackpot { animation: jackpot .9s ease-out 2 both; }
@keyframes jackpot { 30% { box-shadow: inset 0 0 0 3px #fff, 0 0 26px 8px rgba(255,214,90,.95); transform: scale(1.08); } }

/* ---------- las monedas ---------- */
.cell .gCoin { position: absolute; left: 50%; top: 50%; width: calc(var(--cell-w) * .58); aspect-ratio: 1; transform: translate(-50%, -50%);
  pointer-events: none; z-index: 1; filter: drop-shadow(0 2px 2px rgba(0,0,0,.35)); animation: coinBob 2.6s ease-in-out infinite; }
.cell .gCoin svg, .coinBadge svg, .gCoinFly svg, .gCoinMove svg { width: 100%; height: 100%; display: block; }
.gCoinShine { animation: coinShine 2.6s ease-in-out infinite; }
@keyframes coinBob { 50% { transform: translate(-50%, -58%); } }
@keyframes coinShine { 0%, 100% { opacity: .2; } 50% { opacity: .95; } }
/* la que se lleva una pelota: salta y se pega a ella (una chapita en su esquina hasta que la lanza) */
.gCoinFly { position: absolute; width: var(--s, 22px); height: var(--s, 22px); margin: calc(var(--s, 22px) / -2) 0 0 calc(var(--s, 22px) / -2);
  pointer-events: none; animation: coinFly .6s cubic-bezier(.3,.7,.4,1) both; }
@keyframes coinFly { 0% { transform: none; } 45% { transform: translateY(-70%) scale(1.25) rotateY(360deg); opacity: 1; } 100% { transform: translate(40%, -40%) scale(.45); opacity: 0; } }
.piece .coinBadge { position: absolute; right: 6%; top: 4%; width: 34%; aspect-ratio: 1; z-index: 3; pointer-events: none;
  filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.4)); animation: badgeIn .3s var(--ease-out) both; }
@keyframes badgeIn { from { transform: scale(0); } 70% { transform: scale(1.25); } to { transform: none; } }
/* la moneda grande que se lanza: en medio de la pantalla (como la ruleta), da vueltas y cae de una cara */
.gFlipOv { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; pointer-events: none;
  background: rgba(8,24,16,0); transition: background .22s; }
.gFlipOv.in { background: rgba(8,24,16,.28); }
.gFlipOv.out { background: rgba(8,24,16,0); }
.gFlipBox { --s: min(40vmin, 180px); display: flex; flex-direction: column; align-items: center; gap: 14px; perspective: 700px;
  transform: scale(.3); opacity: 0; transition: transform .3s var(--ease-out), opacity .22s; }
.gFlipOv.in .gFlipBox { transform: none; opacity: 1; }
.gFlipOv.out .gFlipBox { transform: scale(.6); opacity: 0; }
.gFlipCoin { position: relative; width: var(--s); height: var(--s); transform-style: preserve-3d; }
.gFlipCoin i { position: absolute; inset: 0; backface-visibility: hidden; filter: drop-shadow(0 10px 18px rgba(0,0,0,.45)); }
.gFlipCoin i svg { width: 100%; height: 100%; display: block; }
.gFlipCoin .b { transform: rotateY(180deg); }
.gFlipWho { font-style: normal; font-size: 15px; font-weight: 800; color: #fff; padding: 3px 12px; border-radius: 999px; background: var(--pc);
  box-shadow: 0 0 0 2.5px #F6F0E2, 0 4px 10px rgba(0,0,0,.3); }
.gFlipTxt { font-size: 22px; font-weight: 800; letter-spacing: .04em; padding: 6px 18px; border-radius: 999px; color: #FFF6D6; background: #2E7D4F;
  box-shadow: 0 0 0 3px #E2B23C, 0 6px 14px rgba(0,0,0,.35); transform: scale(.4); opacity: 0; transition: transform .25s var(--ease-out), opacity .2s; }
.gFlipOv.tails .gFlipTxt { background: #A3283A; }
.gFlipOv.landed .gFlipTxt { transform: none; opacity: 1; }
.gFlipOv.landed .gFlipCoin { animation: flipLand .35s ease-out; }
@keyframes flipLand { 40% { transform: scale(1.12) rotateY(2160deg); } }
.gSpark { position: fixed; z-index: 61; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 2px; pointer-events: none; animation: gSpark .65s ease-out both; }
@keyframes gSpark { from { transform: none; opacity: 1; } to { transform: translate(var(--dx), var(--dy)) rotate(200deg) scale(.4); opacity: 0; } }
/* la moneda usada vuela a su casilla nueva */
.gCoinMove { position: absolute; width: var(--s, 22px); height: var(--s, 22px); margin: calc(var(--s, 22px) / -2) 0 0 calc(var(--s, 22px) / -2);
  pointer-events: none; z-index: 20; filter: drop-shadow(0 4px 4px rgba(0,0,0,.35)); animation: coinMove .58s cubic-bezier(.4,0,.3,1) both; }
@keyframes coinMove { 0% { transform: none; } 50% { transform: translate(calc(var(--dx) / 2), calc(var(--dy) / 2 - 40px)) scale(1.35) rotateY(540deg); }
  100% { transform: translate(var(--dx), var(--dy)) rotateY(1080deg); } }
/* el número del dado al chocar */
.gDiceNum { position: absolute; transform: translate(-50%, -50%); pointer-events: none; z-index: 30;
  font-size: 18px; font-weight: 800; color: #FFF6D6; padding: 1px 8px; border-radius: 999px; background: #2A2226;
  box-shadow: 0 0 0 2px #F2C14E, 0 3px 8px rgba(0,0,0,.35); animation: diceNum .9s ease-out both; }
@keyframes diceNum { 0% { transform: translate(-50%, -20%) scale(.4); opacity: 0; } 20% { transform: translate(-50%, -70%) scale(1.15); opacity: 1; }
  70% { opacity: 1; } 100% { transform: translate(-50%, -150%) scale(1); opacity: 0; } }
.splashRing.gold { border-color: #FFE38A; height: 22px; margin-top: -11px; }

/* ---------- el dado ---------- */
.tile-dice { background: transparent; width: 100%; height: 100%; }
.tile-dice .sub { display: none; }
.cardOnCell .tilePic.dicePic { transform: scale(.94); }
.cell.woodHit .dicePic { animation: woodHit .26s ease-out; }

/* ---------- la ruleta: sale en medio de la pantalla ---------- */
.rlOverlay { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; pointer-events: none;
  background: rgba(8,24,16,0); transition: background .25s; }
.rlOverlay.in { background: rgba(8,24,16,.32); }
.rlBox { display: flex; flex-direction: column; align-items: center; gap: 12px; transform: scale(.3) rotate(-30deg); opacity: 0;
  transition: transform .35s var(--ease-out), opacity .25s; }
.rlOverlay.in .rlBox { transform: none; opacity: 1; }
.rlOverlay.out { background: rgba(8,24,16,0); }
.rlOverlay.out .rlBox { transform: scale(.6); opacity: 0; }
.rlSvg { width: min(58vmin, 240px); height: auto; filter: drop-shadow(0 10px 22px rgba(0,0,0,.45)); }
.rlRot { transform-box: view-box; transform-origin: 100px 100px; }
.rlNum { font: 700 11px/1 Outfit, sans-serif; fill: #F6F0E2; }
.rlRes { min-width: 120px; text-align: center; padding: 6px 18px; border-radius: 999px; font-size: 20px; font-weight: 800; letter-spacing: .06em;
  color: #FFF6D6; background: var(--rc, #2A2226); box-shadow: 0 0 0 3px #E2B23C, 0 6px 14px rgba(0,0,0,.35);
  transform: scale(.4); opacity: 0; transition: transform .25s var(--ease-out), opacity .2s; }
.rlOverlay.done .rlRes { transform: none; opacity: 1; }
.rlOverlay.r-gold .rlRes { color: #5A2E1A; animation: rlGold .5s ease-in-out 3; }
@keyframes rlGold { 50% { transform: scale(1.12); box-shadow: 0 0 0 3px #fff, 0 0 26px 8px rgba(255,214,90,.9); } }

/* ---------- escena: la mesa del casino ----------
   Plana, como el resto: tapete verde con un rombo muy suave y la baranda de madera con filo dorado alrededor del campo
   (sin adornos alrededor: el campo ya tiene mucho que mirar). */
#gameScreen[data-scene="casino"] #game {
  background-color: #145C3E;
  background-image: var(--grain), repeating-linear-gradient(45deg, rgba(255,255,255,.025) 0 2px, transparent 2px 44px), repeating-linear-gradient(-45deg, rgba(255,255,255,.025) 0 2px, transparent 2px 44px);
}
#gameScreen[data-scene="casino"] #gameDecor { display: none; } /* (sin adornos: solo el tapete) */
/* la baranda: madera oscura con un filo dorado, como el borde de una mesa de casino */
#gameScreen[data-scene="casino"] #boardWrap { background-color: #5A2E1A;
  background-image: var(--grain), repeating-linear-gradient(90deg, rgba(0,0,0,.12) 0 2px, transparent 2px 46px);
  box-shadow: inset 0 0 0 3px #C9962E, inset 0 0 0 5px #3A1C0E, 0 0 0 4px #2E160A, 0 8.4px 25.2px 2px rgba(0,20,10,.45); }
html.reduceMotion .cell.gGold::before, html.reduceMotion .cell .gCoin, html.reduceMotion .gCoinShine { animation: none !important; }

/* la carta de la baraja (Modos de juego): al pasar por encima, la ruleta gira */
.dkArt .dkWheel { transform-box: fill-box; transform-origin: center; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.deckCard:hover .dkArt .dkWheel, .deckCard:focus-within .dkArt .dkWheel { transform: rotate(320deg); }

/* la presentación de la baraja: el número del dado en la escena */
.dmDice { font: 800 12px Outfit, sans-serif; fill: #FFF6D6; }

/* ---------- cara en una moneda: te toca elegir otra vez ----------
   la barra de ayuda late con un aro dorado y, sobre la pelota (o el hoyo), un bocadillo «¡Elige otra vez!» */
.hint.bonusCta { animation: bonusCta 1.3s ease-in-out infinite; box-shadow: 0 0 0 2px #E2B23C, 0 0 16px 3px rgba(242,193,78,.55); }
@keyframes bonusCta { 50% { transform: scale(1.035); box-shadow: 0 0 0 3px #FFE38A, 0 0 24px 7px rgba(242,193,78,.75); } }
.piece.bonusPick::after { content: attr(data-cta); position: absolute; left: 50%; bottom: 88%; transform: translateX(-50%); white-space: nowrap; z-index: 6;
  font-size: 12px; font-weight: 800; padding: 3px 9px; border-radius: 999px; color: #5A2E1A; background: #FFE38A;
  box-shadow: 0 0 0 2px #B8892B, 0 4px 10px rgba(0,0,0,.3); animation: bonusPick 1s ease-in-out infinite; pointer-events: none; }
@keyframes bonusPick { 50% { transform: translate(-50%, -4px); } }
.piece.bonusPick .cardOnCell { filter: drop-shadow(0 0 6px rgba(255,214,90,.95)); }
html.reduceMotion .hint.bonusCta, html.reduceMotion .piece.bonusPick::after { animation: none; }

/* el creador: el fantasma de la casilla dorada */
.edGoldGhost { position: absolute; inset: 3px; border-radius: 5px; background: rgba(226,178,60,.6); box-shadow: inset 0 0 0 2px #FFE38A; }