/* Geolite - El globo (v0.2.51): la carta de la Barra y la mesa. La escena corre a 640x360 px nativos (canvas) y se muestra a un factor ENTERO n (x3 en 1920x1080); el escenario de 1920x1080
   (HUD y marco) se escala con n/3, de modo que el canvas siempre llena el escenario. Maqueta aprobada en tools/art/globo. Todo cuelga de .rou.globo (la capa de rouShell). */
.rp-globo { background: #ff9a5e; }

.rou.globo { background: #05051a; }
.rou.globo .gb-stage { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; overflow: hidden; user-select: none; background: #0a0a2a; }
.rou.globo .gb-stage img { image-rendering: pixelated; display: block; }
.rou.globo .gb-shake { position: absolute; inset: 0; will-change: transform; }
.rou.globo .gb-cv { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; image-rendering: pixelated; }
.rou.globo .gb-vig { position: absolute; inset: 0; pointer-events: none; opacity: var(--vg, 0); background: radial-gradient(ellipse at 50% 46%, transparent 52%, rgba(10, 0, 40, .78) 100%); }
.rou.globo .gb-top { position: absolute; left: 0; right: 0; top: 40px; z-index: 8; display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.rou.globo .gb-mult { font: 900 196px/0.95 var(--serif); letter-spacing: .02em; color: var(--mc, #fff); font-variant-numeric: tabular-nums; text-shadow: 6px 0 #0a0048, -6px 0 #0a0048, 0 6px #0a0048, 0 -6px #0a0048, 5px 5px #0a0048, -5px 5px #0a0048, 5px -5px #0a0048, -5px -5px #0a0048, 0 14px 0 #0a0048, 0 0 60px var(--mg, rgba(255, 255, 255, .25)); transition: color .25s; }
.rou.globo .gb-mult.ghost { opacity: .72; filter: saturate(.25) brightness(1.1); }
.rou.globo .gb-ghostlbl { font: 900 30px var(--serif); letter-spacing: .12em; color: #d8e8ff; text-shadow: 0 3px 0 #0a0048, 2px 0 #0a0048, -2px 0 #0a0048; height: 36px; text-transform: uppercase; opacity: 0; } .rou.globo .gb-ghostlbl.on { opacity: .95; }
.rou.globo .gb-sub { font: 400 22px var(--mono); letter-spacing: .1em; color: #ffe9a6; text-shadow: 0 3px 0 #0a0048, 2px 0 #0a0048, -2px 0 #0a0048; height: 28px; margin-top: 2px; }
.rou.globo .gb-res { position: absolute; left: 70px; top: 262px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; visibility: hidden; }
.rou.globo .gb-res.on { visibility: visible; }
.rou.globo .gb-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 56px/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.globo .gb-plate.lose { --cc: #8a1f3f; --ch: #d9506d; --cs: #4a0d22; } .rou.globo .gb-plate.sky { --cc: #3a6fd8; --ch: #8ec4ff; --cs: #1c3a8a; }
.rou.globo .gb-plate i { font: 400 32px var(--mono); font-style: normal; color: rgba(255, 255, 255, .9); }
.rou.globo .gb-msg { font: 900 38px/1 var(--serif); letter-spacing: .03em; color: #ffe9a6; text-shadow: 0 3px 0 #0a0048, 2px 0 #0a0048, -2px 0 #0a0048; }
.rou.globo .gb-res.on .gb-plate { animation: gb-stamp .55s var(--spring) both; transform-origin: 0 50%; } .rou.globo .gb-res.on .gb-msg { animation: gb-up .45s .25s var(--spring) both; }
@keyframes gb-stamp { from { opacity: 0; transform: scale(1.7) rotate(-5deg); } } @keyframes gb-up { from { opacity: 0; transform: translateY(14px); } }

.rou.globo .gb-left { position: absolute; left: 70px; top: 66px; z-index: 9; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.rou.globo .gb-pill { display: inline-flex; align-items: center; gap: 12px; padding: 9px 26px 7px 14px; border-radius: 999px; background: #0a0a2a; color: #ffd98a; box-shadow: inset 0 0 0 3px #f8b449, 0 5px 0 2px #0a0a2a; font: 20px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.rou.globo .gb-pill b { color: #fff; font-weight: 400; } .rou.globo .gb-pill i { width: 24px; height: 24px; border-radius: 50%; background: #e8a91e; box-shadow: 0 0 0 2px #0a0a2a, inset 0 3px 0 rgba(255, 255, 255, .35), inset 0 -3px 0 rgba(0, 0, 0, .3); }
.rou.globo .gb-pill.gb-click { cursor: pointer; } .rou.globo .gb-pill.gb-click:hover { filter: brightness(1.2); } .rou.globo .gb-pill.gb-click.lock { cursor: default; filter: none; }
.rou.globo .gb-back { cursor: pointer; border: 0; padding: 7px 24px 9px; border-radius: 10px; font: 900 24px/1 var(--serif); letter-spacing: .05em; text-transform: uppercase; color: #fff; background: #2a4a8a; box-shadow: 0 0 0 3px #0a0a2a, inset 0 4px 0 #5a82d0, inset 0 -5px 0 #16285a, 0 6px 0 3px #0a0a2a; }
.rou.globo .gb-back:hover { filter: brightness(1.25); } .rou.globo .gb-back[hidden] { display: none; }

/* altimetro: p = ln(x) / ln(100) */
.rou.globo .gb-alt { position: absolute; right: 78px; top: 250px; width: 120px; height: 600px; z-index: 7; }
.rou.globo .gb-alt-track { position: absolute; right: 0; top: 0; bottom: 0; width: 26px; border-radius: 13px; background: rgba(10, 10, 42, .78); box-shadow: 0 0 0 4px #0a0048, inset 0 0 0 3px #f8b449; overflow: hidden; }
.rou.globo .gb-alt-fill { position: absolute; left: 4px; right: 4px; bottom: 4px; top: 4px; border-radius: 9px; background: linear-gradient(0deg, #ffe08a, #ffa23a 55%, #ff4a5a); transform-origin: 50% 100%; transform: scaleY(0); }
.rou.globo .gb-alt-ticks { position: absolute; left: 0; right: 40px; top: 0; bottom: 0; }
.rou.globo .gb-alt-ticks span { position: absolute; right: 0; font: 400 17px var(--mono); color: #ffe9a6; text-shadow: 0 2px 0 #0a0048, 1px 0 #0a0048, -1px 0 #0a0048; transform: translateY(50%); } .rou.globo .gb-alt-ticks span::after { content: ""; position: absolute; left: calc(100% + 6px); top: 50%; width: 8px; height: 3px; margin-top: -1px; background: #f8b449; }
.rou.globo .gb-flag { position: absolute; right: -14px; width: 54px; height: 14px; margin-bottom: -7px; bottom: 0; transform: translateY(0); opacity: 0; clip-path: polygon(0 50%, 22% 0, 100% 0, 100% 100%, 22% 100%); }
.rou.globo .gb-flag.cash { background: #ffd24a; } .rou.globo .gb-flag.ghost { background: #b4d8ff; }
.rou.globo .gb-alt-km { position: absolute; right: 0; top: -44px; font: 400 20px var(--mono); color: #ffe9a6; text-shadow: 0 3px 0 #0a0048, 2px 0 #0a0048, -2px 0 #0a0048; letter-spacing: .06em; white-space: nowrap; }

/* el crupier: el sprite animado se monta fuera del escenario escalado (a pixel entero); aqui solo el marco */
.rou.globo .gb-dealerbox { position: absolute; left: 44px; bottom: 44px; width: 312px; height: 312px; z-index: 9; border-radius: 22px; background: radial-gradient(ellipse at 50% 38%, #3a2a78, #130a34); box-shadow: 0 0 0 4px #0a0a2a, 0 0 0 10px #f0b94f, 0 0 0 14px #9a6a1c, 0 0 0 18px #0a0a2a, 0 14px 0 18px rgba(10, 10, 42, .9); overflow: hidden; }
.rou.globo .gb-dealer { position: absolute; z-index: 10; pointer-events: none; }
.rou.globo .gb-bubble { position: absolute; left: 50px; bottom: 408px; max-width: 560px; z-index: 10; 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.globo .gb-bubble.on { opacity: 1; transform: none; }
.rou.globo .gb-bubble::before { content: ""; position: absolute; left: 70px; bottom: -30px; border: 12px solid transparent; border-top: 18px solid #0a0048; }
.rou.globo .gb-bubble::after { content: ""; position: absolute; left: 77px; bottom: -20px; border: 8px solid transparent; border-top: 12px solid #fff; }

.rou.globo .gb-btn { position: absolute; left: 660px; bottom: 40px; width: 600px; height: 132px; z-index: 11; border: 0; padding: 0; cursor: pointer; border-radius: 22px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #fff; font-family: var(--serif);
  --cc: #d9a21f; --ch: #ffe08a; --cs: #8a5a12; background: var(--cc); text-shadow: 0 4px 0 rgba(0, 0, 0, .45); box-shadow: 0 0 0 5px #0a0a2a, inset 0 8px 0 var(--ch), inset 0 -10px 0 var(--cs), 0 12px 0 5px #0a0a2a; transition: transform .12s var(--spring), filter .15s; }
.rou.globo .gb-btn b { font: 900 64px/1 var(--serif); letter-spacing: .06em; } .rou.globo .gb-btn i { font: 400 26px var(--mono); font-style: normal; letter-spacing: .08em; color: rgba(255, 255, 255, .92); min-height: 28px; }
.rou.globo .gb-btn:hover { filter: brightness(1.12); transform: translateY(-3px); } .rou.globo .gb-btn:active { transform: translateY(5px); }
.rou.globo .gb-btn.cash { --cc: #ff7a2a; --ch: #ffc07a; --cs: #b43a12; animation: gb-pulse .9s ease-in-out infinite; }
.rou.globo .gb-btn.off { --cc: #5d6470; --ch: #8a93a2; --cs: #3a4049; cursor: default; filter: saturate(.6); animation: none; } .rou.globo .gb-btn.off:hover { transform: none; filter: saturate(.6); }
@keyframes gb-pulse { 50% { box-shadow: 0 0 0 5px #0a0a2a, inset 0 8px 0 var(--ch), inset 0 -10px 0 var(--cs), 0 12px 0 5px #0a0a2a, 0 0 44px 12px rgba(255, 150, 60, .65); } }
.rou.globo .gb-hist { position: absolute; right: 70px; bottom: 56px; z-index: 9; display: flex; gap: 10px; flex-direction: row-reverse; }
.rou.globo .gb-hist span { font: 900 28px/1 var(--serif); letter-spacing: .03em; padding: 7px 14px 5px; border-radius: 9px; background: #0a0a2a; box-shadow: inset 0 0 0 3px #6a4cc0; color: #cfc4ec; }
.rou.globo .gb-hist span.lo { color: #ff8a90; box-shadow: inset 0 0 0 3px #a8142e; } .rou.globo .gb-hist span.mid { color: #ffd24a; box-shadow: inset 0 0 0 3px #f8b449; } .rou.globo .gb-hist span.hi { color: #8fffc0; box-shadow: inset 0 0 0 3px #2cc47c; }
.rou.globo .gb-count { position: absolute; left: 0; right: 0; top: 330px; z-index: 12; text-align: center; font: 900 330px/1 var(--serif); color: #ffe9a6; text-shadow: 10px 0 #0a0048, -10px 0 #0a0048, 0 10px #0a0048, 0 -10px #0a0048, 8px 8px #0a0048, -8px 8px #0a0048, 0 22px 0 #0a0048, 0 0 70px rgba(255, 180, 60, .7); opacity: 0; pointer-events: none; }
.rou.globo .gb-count.on { animation: gb-cnt .8s both; } @keyframes gb-cnt { 0% { opacity: 0; transform: scale(1.6); } 20% { opacity: 1; transform: scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: scale(.9); } }
/* marco del cuadro: bombillas como las bandas de las ruletas (arriba y abajo con .rou-lights del juego; laterales propios) */
.rou.globo .gb-frame { position: absolute; inset: 0; z-index: 30; pointer-events: none; box-shadow: inset 0 0 0 5px #0a140f, inset 0 0 0 12px #f0b94f, inset 0 0 0 17px #9a6a1c, inset 0 0 0 21px #0a140f, inset 0 0 40px rgba(0, 0, 0, .35); }
.rou.globo .gb-frame .rou-lights { left: 34px; right: 34px; z-index: 31; } .rou.globo .gb-frame .rou-lights.top { top: 27px; bottom: auto; } .rou.globo .gb-frame .rou-lights.bot { bottom: 27px; top: auto; }
.rou.globo .gb-vl { position: absolute; width: 10px; top: 34px; bottom: 34px; background-size: 10px 56px; --lc: #ffe08a; --ld: #4a3410;
  background-image: linear-gradient(180deg, var(--lc) 0 10px, transparent 10px 28px, var(--ld) 28px 38px, transparent 38px 56px); animation: gb-chase .5s steps(1) infinite; }
.rou.globo .gb-vl.l { left: 27px; } .rou.globo .gb-vl.r { right: 27px; animation-direction: reverse; } @keyframes gb-chase { 50% { background-position: 0 28px; } }
.rou.globo .gb-frame.fast .rou-lights, .rou.globo .gb-frame.fast .gb-vl { animation-duration: .14s; }
.rou.globo .rou-wash { --wc: rgba(255, 217, 90, .55); z-index: 40; }
html.reduce-motion .rou.globo .gb-btn.cash { animation: none !important; }