/* Geolite - Duelo de dados (v0.2.49): la carta de la Barra y la mesa de 1920x1080 (se escala con K/4, K entero: cada pixel del arte = K pixeles de pantalla).
   Maqueta aprobada en tools/art/dados. Todo cuelga de .rou.dice (la capa que comparten las pantallas de casino: rouShell). */
.rp-dice { background: #2ca89a; }

.rou.dice { background: radial-gradient(ellipse at 50% 40%, rgba(5, 34, 38, .98), rgba(1, 7, 8, 1) 85%); }
.rou.dice .rou-wash { --wc: rgba(255, 217, 90, .5); } .rou.dice.lv2 .rou-wash { --wc: rgba(255, 190, 70, .62); } .rou.dice.lv3 .rou-wash { --wc: rgba(255, 120, 60, .75); } .rou.dice.lose .rou-wash { --wc: rgba(0, 0, 0, .4); }
.rou.dice.hush .rou-lights { animation-play-state: paused; }
.rou.dice .dd-stage { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; overflow: hidden; user-select: none; touch-action: none; }
.rou.dice .dd-stage img, .rou.dice .dd-world div { image-rendering: pixelated; }
.rou.dice .dd-stage img { display: block; }
.rou.dice .dd-bg { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 38%, #0d3b3d 0%, #051a1d 58%, #010708 100%); }
.rou.dice .dd-dealer { position: absolute; left: 751px; top: 44px; width: 384px; height: 384px; z-index: 2; will-change: transform; image-rendering: pixelated; }   /* 96 px de arte a x4 */
.rou.dice .dd-dealer.hop { animation: dd-hop .5s ease-out; } @keyframes dd-hop { 0% { transform: translateY(0); } 35% { transform: translateY(-30px); } 70% { transform: translateY(0); } 85% { transform: translateY(-8px); } 100% { transform: translateY(0); } }
.rou.dice .dd-dealer.shudder { animation: dd-shd .5s linear; } @keyframes dd-shd { 0%, 100% { transform: translateX(0); } 12% { transform: translateX(-12px); } 25% { transform: translateX(12px); } 40% { transform: translateX(-9px); } 55% { transform: translateX(9px); } 70% { transform: translateX(-5px); } 85% { transform: translateX(4px); } }
.rou.dice .dd-dealer.drop { animation: dd-drop .7s ease-out; } @keyframes dd-drop { 0% { transform: translateY(0); } 30% { transform: translateY(26px); } 55% { transform: translateY(10px); } 100% { transform: translateY(0); } }
.rou.dice .dd-dealer.lean { animation: dd-lean .8s ease-in-out; } @keyframes dd-lean { 0%, 100% { transform: translateX(0); } 40%, 60% { transform: translateX(-20px); } }
.rou.dice .dd-bubble { position: absolute; left: 1160px; top: 150px; max-width: 560px; z-index: 6; padding: 14px 20px 12px; background: #fff; color: #120a2a; border: 4px solid #0a0048; box-shadow: 0 6px 0 #0a0048;
  font: 27px/1.12 "Jersey 15", var(--serif); opacity: 0; transform: translateY(10px); transition: opacity .25s, transform .25s; pointer-events: none; }
.rou.dice .dd-bubble.on { opacity: 1; transform: none; }
.rou.dice .dd-bubble::before { content: ""; position: absolute; left: -22px; top: 26px; border: 12px solid transparent; border-right: 14px solid #0a0048; }
.rou.dice .dd-bubble::after { content: ""; position: absolute; left: -15px; top: 30px; border: 8px solid transparent; border-right: 10px solid #fff; }
.rou.dice .dd-left { position: absolute; left: 130px; top: 150px; width: 600px; z-index: 6; display: flex; flex-direction: column; gap: 22px; align-items: flex-start; pointer-events: none; }
.rou.dice .dd-left .rou-pick { font-size: 15px; }
.rou.dice .dd-hint { font: 900 36px/1.05 var(--serif); letter-spacing: .04em; color: #ffe9a6; text-shadow: 0 4px 0 #0a140f; opacity: 0; transition: opacity .25s; max-width: 600px; }
.rou.dice .dd-hint.on { opacity: 1; }
.rou.dice .dd-top { position: absolute; left: 0; right: 0; top: 34px; z-index: 8; display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.rou.dice .dd-no { position: absolute; top: 8px; font: 900 76px/1 var(--serif); letter-spacing: .06em; color: #ffe9a6; text-shadow: 0 4px 0 #0a140f, 0 0 26px rgba(255, 217, 90, .5); opacity: 0; white-space: nowrap; }
.rou.dice .dd-no.on { animation: dd-no 1.4s both; } @keyframes dd-no { 0% { opacity: 0; transform: scale(1.5); } 18% { opacity: 1; transform: scale(1); } 72% { opacity: 1; } 100% { opacity: 0; transform: scale(.96); } }
.rou.dice .dd-res { display: flex; flex-direction: row; align-items: center; gap: 26px; visibility: hidden; }
.rou.dice .dd-res.on { visibility: visible; }
.rou.dice .dd-plate { --cc: #d9a21f; --ch: #ffe08a; --cs: #8a5a12; display: inline-flex; align-items: baseline; gap: 18px; padding: 6px 32px 10px 28px; border-radius: 12px; background: var(--cc); color: #fff; text-transform: uppercase;
  font: 900 62px/1 var(--serif); letter-spacing: .05em; text-shadow: 0 3px 0 rgba(0, 0, 0, .42); box-shadow: 0 0 0 3px #0a140f, inset 0 5px 0 var(--ch), inset 0 -7px 0 var(--cs), 0 8px 0 3px #0a140f; }
.rou.dice .dd-plate.lose { --cc: #5d6470; --ch: #8a93a2; --cs: #3a4049; } .rou.dice .dd-plate.tie { --cc: #2a8f94; --ch: #6fd6d8; --cs: #14565a; } .rou.dice .dd-plate.l2 { --cc: #e8a91e; --ch: #fff0a8; --cs: #a8680e; } .rou.dice .dd-plate.l3 { --cc: #f06a2a; --ch: #ffd08a; --cs: #a02e10; }
.rou.dice .dd-plate i { font: 400 34px var(--mono); font-style: normal; color: rgba(255, 255, 255, .88); }
.rou.dice .dd-msg { font: 900 34px/1 var(--serif); letter-spacing: .03em; color: #ffe9a6; text-shadow: 0 3px 0 rgba(0, 0, 0, .6); }
.rou.dice .dd-res.on .dd-plate { animation: rou-stamp .55s var(--spring) both; } .rou.dice .dd-res.on .dd-msg { animation: rou-up .45s .25s var(--spring) both; }
/* la mesa: fieltro verde azulado, baranda acolchada de cuero burdeos con capitone, filete de oro y bombillas (como las bandas de las ruletas) */
.rou.dice .dd-band { position: absolute; left: 0; top: 440px; width: 1920px; height: 520px; z-index: 3; animation: none;
  background: url(../assets/dados/felt.png) 0 0 / 128px 128px, radial-gradient(ellipse at 50% 46%, #178a82 0%, #0c5659 50%, #052a31 100%);
  box-shadow: 0 -4px 0 #0a140f, 0 -8px 0 #f0b94f, 0 -11px 0 #9a6a1c, 0 -14px 0 #0a140f, 0 4px 0 #0a140f, 0 8px 0 #f0b94f, 0 11px 0 #9a6a1c, 0 14px 0 #0a140f, 0 40px 70px rgba(0, 0, 0, .65); }
.rou.dice .dd-band::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 40px 50px rgba(0, 20, 24, .55), inset 70px 0 60px -30px rgba(0, 20, 24, .45), inset -70px 0 60px -30px rgba(0, 20, 24, .45), inset 0 -30px 40px rgba(0, 12, 16, .5); }
.rou.dice .dd-band .rou-lights { --lc: #ffe08a; --ld: #4a3410; }
.rou.dice .dd-rail { position: absolute; z-index: 4; }
.rou.dice .dd-rail-h { left: 0; top: 0; width: 1920px; height: 88px; background: url(../assets/dados/rail_h.png) 0 0 / 96px 88px repeat-x; filter: drop-shadow(0 8px 6px rgba(0, 14, 18, .6)); z-index: 5; }
.rou.dice .dd-rail-l { left: 0; top: 0; width: 88px; height: 520px; background: url(../assets/dados/rail_l.png) 0 0 / 88px 96px repeat-y; filter: drop-shadow(8px 0 6px rgba(0, 14, 18, .5)); }
.rou.dice .dd-rail-r { right: 0; top: 0; width: 88px; height: 520px; background: url(../assets/dados/rail_r.png) 0 0 / 88px 96px repeat-y; filter: drop-shadow(-8px 0 6px rgba(0, 14, 18, .5)); }
.rou.dice .dd-rail.hit::after { content: ""; position: absolute; inset: 0; background: rgba(255, 233, 166, .38); animation: dd-railhit .26s linear both; } @keyframes dd-railhit { to { opacity: 0; } }
.rou.dice .dd-ring { position: absolute; top: 238px; width: 496px; height: 184px; z-index: 4; } .rou.dice .dd-ring.d { left: 352px; } .rou.dice .dd-ring.p { left: 1072px; }
.rou.dice .dd-lab { position: absolute; top: 430px; width: 300px; margin-left: -150px; text-align: center; z-index: 4; font: 400 22px var(--mono); letter-spacing: .5em; color: #f6c453; text-shadow: 0 3px 0 #04181b; opacity: .85; } .rou.dice .dd-lab.d { left: 600px; } .rou.dice .dd-lab.p { left: 1320px; }
.rou.dice .dd-vs { position: absolute; left: 960px; top: 330px; width: 0; z-index: 4; }
.rou.dice .dd-vs::before { content: ""; position: absolute; left: -2px; top: -180px; width: 4px; height: 360px; background: linear-gradient(#9a6a1c, #f0b94f 20%, #f0b94f 80%, #9a6a1c); opacity: .55; }
.rou.dice .dd-vs span { position: absolute; left: -44px; top: -32px; width: 88px; height: 64px; display: flex; align-items: center; justify-content: center; font: 900 34px var(--serif); letter-spacing: .06em; color: #3a2606; background: #e8a91e; box-shadow: 0 0 0 4px #0a140f, inset 0 5px 0 #ffe08a, inset 0 -6px 0 #a8680e; }
.rou.dice .dd-world { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
.rou.dice .dd-die { position: absolute; left: 0; top: 0; width: 144px; height: 144px; background-size: 2304px 3456px; background-repeat: no-repeat; will-change: transform; }
.rou.dice .dd-sh { position: absolute; left: 0; top: 0; will-change: transform; background-repeat: no-repeat; }
.rou.dice .dd-cup { position: absolute; left: 0; top: 0; width: 248px; height: 248px; background-size: 5952px 248px; background-repeat: no-repeat; will-change: transform; }
.rou.dice .dd-tot { position: absolute; z-index: 12; top: 548px; width: 190px; margin-left: -95px; text-align: center; pointer-events: none; opacity: 0; } .rou.dice .dd-tot.d { left: 600px; } .rou.dice .dd-tot.p { left: 1320px; }
.rou.dice .dd-tot b { display: inline-block; min-width: 96px; padding: 4px 22px 8px; font: 900 78px/1 var(--serif); color: #fff; border-radius: 14px; background: #0a2a30; text-shadow: 0 4px 0 rgba(0, 0, 0, .5); box-shadow: 0 0 0 4px #0a140f, inset 0 0 0 4px #f8b449, 0 8px 0 4px #0a140f; }
.rou.dice .dd-tot.on { animation: dd-pop .5s var(--spring) both; } @keyframes dd-pop { from { opacity: 0; transform: translateY(-18px) scale(.6); } to { opacity: 1; transform: none; } }
.rou.dice .dd-tot.win b { background: #e8a91e; color: #3a2606; text-shadow: none; box-shadow: 0 0 0 4px #0a140f, inset 0 5px 0 #ffe08a, inset 0 -7px 0 #a8680e, 0 0 40px rgba(255, 217, 90, .7); }
.rou.dice .dd-tot.lose { opacity: .6 !important; animation: none; } .rou.dice .dd-tot.lose b { background: #3a4049; box-shadow: 0 0 0 4px #0a140f, inset 0 0 0 4px #6c7685; }
.rou.dice .dd-turn { position: absolute; z-index: 13; left: 1685px; top: 560px; width: 0; pointer-events: none; opacity: 0; transition: opacity .3s; }
.rou.dice .dd-turn.on { opacity: 1; } .rou.dice .dd-turn span { position: absolute; left: -150px; width: 300px; top: 0; text-align: center; font: 900 30px/1.05 var(--serif); letter-spacing: .05em; color: #ffe9a6; text-shadow: 0 3px 0 #0a140f; animation: dd-pulse 1s steps(2) infinite; } @keyframes dd-pulse { 50% { transform: translateY(-6px); } }
.rou.dice .dd-glovelayer { position: absolute; inset: 0; z-index: 100; pointer-events: none; clip-path: inset(442px 0 0 0); }
.rou.dice .dd-glove { position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform; display: none; }
.rou.dice .dd-glove img { position: absolute; display: none; }
.rou.dice .dd-glove[data-f=reach] .hf-reach, .rou.dice .dd-glove[data-f=half] .hf-half, .rou.dice .dd-glove[data-f=grab_sq] .hf-grab_sq, .rou.dice .dd-glove[data-f=grab] .hf-grab { display: block; }
.rou.dice .dd-hit { position: absolute; left: 1060px; top: 450px; width: 760px; height: 500px; z-index: 150; cursor: pointer; display: none; }
.rou.dice .dd-hit.on { display: block; }
.rou.dice .dd-coin { position: absolute; left: 0; top: 0; width: 96px; height: 96px; z-index: 120; background: url(../assets/icons/coin_spin.webp) 0 0 / 2304px 96px no-repeat; image-rendering: pixelated; display: none; filter: drop-shadow(0 8px 0 rgba(0, 0, 0, .35)); pointer-events: none; }