/* ==== v0.35: ruta de la expedicion, pan de oro de las legendarias y pantallas de los juegos de la Barra ====
   - Ruta (A.adv.road en js/adventure.js): "bar" arriba del Campamento (12 rondas + infinito, lo jugado en oro, la proxima con la chincheta)
     y "plan" en las pantallas de Aventura y Reto diario (un panel por acto). El jefe es la chistera del crupier (assets/icons/boss_hat.webp).
   - La mesa del Campamento (.table.mesa) esta en css/gala.css (CAMPAMENTO, v0.3.48: Naipe de gala). Aqui se quedan el marco de oro de la
     legendaria (en la mesa y en la mochila), su secuencia al elegirla en el cofre y las pantallas de los juegos de casino.
   Todo en px del lienzo de 1280x720: la escala la pone --k (zoom), como en el resto de menus. */

/* ---------------------------------------------------------------- RUTA: comun */
.rd { --ink: #0a140f; --gold: #ffd98a; display: flex; align-items: center; }
.rd-act { position: relative; min-width: 0; }
.rd-row { position: relative; display: flex; align-items: center; }
.rd-n { position: relative; display: flex; flex-direction: column; align-items: center; flex: none; }
.rd-ic { position: relative; display: flex; align-items: center; justify-content: center; border-radius: 9px; background: #10261b;
  box-shadow: 0 0 0 2px var(--ink), inset 0 0 0 2px rgba(255, 217, 138, .32), inset 0 -4px 0 rgba(0, 0, 0, .25), 0 4px 0 rgba(0, 0, 0, .4); }
.rd-ic .ic { image-rendering: pixelated; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .45)); }
/* el jefe: casilla roja con la chistera del crupier (un rojo medio para que el morado de la chistera se lea) */
.rd-n.boss .rd-ic { background: radial-gradient(circle at 50% 38%, #c03a4f, #6e1a28 72%); box-shadow: 0 0 0 2px var(--ink), inset 0 0 0 2px #fe5f55, inset 0 -4px 0 rgba(0, 0, 0, .28), 0 4px 0 rgba(0, 0, 0, .4); }
.rd-n.inf .rd-ic { background: transparent; box-shadow: inset 0 0 0 2px rgba(255, 217, 138, .3); outline: 2px dashed rgba(255, 217, 138, .28); outline-offset: -2px; }
.rd-n.inf .rd-ic b { font-family: var(--serif); font-weight: 400; line-height: 1; color: rgba(255, 217, 138, .7); transform: translateY(-1px); }
/* el camino entre rondas: puntos; lo ya recorrido, en oro */
.rd-n + .rd-n { padding-left: var(--gap); background: repeating-linear-gradient(90deg, rgba(255, 217, 138, .42) 0 3px, transparent 3px 6px) 0 calc(var(--mid) - 1.5px) / var(--gap) 3px no-repeat; }
.rd-n.done + .rd-n { background-image: linear-gradient(#ffd98a, #ffd98a); }

/* ---------------------------------------------------------------- RUTA: barra del Campamento */
.rd.bar { --s: 28px; --sb: 32px; --gap: 9px; --mid: 50%; padding-top: 14px; }
.rd.bar .rd-act { display: flex; align-items: center; gap: 6px; }
.rd.bar .rd-row { gap: 0; }
.rd.bar .rd-k { font-style: normal; font-family: var(--serif); font-size: 17px; letter-spacing: .02em; line-height: 1; color: rgba(255, 217, 138, .45); min-width: 8px; text-align: right; text-shadow: 0 2px 0 rgba(0, 0, 0, .5); }
.rd.bar .rd-act.now .rd-k, .rd.bar .rd-act.done .rd-k { color: var(--gold); }
.rd.bar .rd-inf .rd-k { display: none; }
.rd.bar { gap: 0; } .rd.bar .rd-act + .rd-act { padding-left: 10px; background: repeating-linear-gradient(90deg, rgba(255, 217, 138, .42) 0 3px, transparent 3px 6px) 0 calc(50% - 1.5px) / 10px 3px no-repeat; }
.rd.bar .rd-act.done + .rd-act { background-image: linear-gradient(#ffd98a, #ffd98a); }
.rd.bar .rd-ic { width: var(--s); height: var(--s); border-radius: 8px; }
.rd.bar .rd-ic .ic { width: 22px; height: 22px; opacity: .5; filter: saturate(.5) drop-shadow(0 2px 0 rgba(0, 0, 0, .45)); }
.rd.bar .rd-n.boss .rd-ic { width: var(--sb); height: var(--sb); }
.rd.bar .rd-n.boss .rd-ic .ic { width: 30px; height: 30px; opacity: .95; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .45)); }
.rd.bar .rd-n.inf .rd-ic b { font-size: 26px; }
/* jugadas: ficha de oro con su marca */
.rd.bar .rd-n.done .rd-ic { image-rendering: pixelated; box-shadow: 0 0 0 2px var(--ink), inset 0 -4px 0 rgba(140, 80, 0, .32), inset 0 2px 0 rgba(255, 255, 255, .45), 0 4px 0 rgba(0, 0, 0, .4);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges' fill='%2316241c'%3E%3Cpath d='M6 1h2v1H6zM5 2h2v1H5zM0 3h1v1H0zM4 3h2v1H4zM0 4h2v1H0zM3 4h2v1H3zM1 5h3v1H1zM2 6h1v1H2z'/%3E%3C/svg%3E") center / 16px 16px no-repeat, linear-gradient(180deg, #ffe9a6, #f8b449); }
.rd.bar .rd-n.done .rd-ic .ic { visibility: hidden; }
/* la proxima: mas grande, encendida y con la chincheta del mapa encima (estas aqui) */
.rd.bar .rd-n.next .rd-ic { width: 36px; height: 36px; background: #17553a; box-shadow: 0 0 0 2px var(--ink), inset 0 0 0 3px var(--gold), inset 0 -4px 0 rgba(0, 0, 0, .25), 0 4px 0 rgba(0, 0, 0, .4), 0 0 16px 3px rgba(255, 208, 107, .55); }
.rd.bar .rd-n.next .rd-ic .ic { width: 30px; height: 30px; opacity: 1; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .45)); }
.rd.bar .rd-n.next.boss .rd-ic { width: 40px; height: 40px; background: radial-gradient(circle at 50% 38%, #e0566a, #8a2234 72%); box-shadow: 0 0 0 2px var(--ink), inset 0 0 0 3px #fe5f55, 0 4px 0 rgba(0, 0, 0, .4), 0 0 18px 4px rgba(254, 95, 85, .6); }
.rd.bar .rd-n.next.boss .rd-ic .ic { width: 36px; height: 36px; }
.rd.bar .rd-n.next::after { content: ""; position: absolute; left: 50%; bottom: calc(100% - 3px); width: 18px; height: 18px; margin-left: -9px; image-rendering: pixelated; will-change: transform;
  background: url("../assets/icons/s_pin.webp") center / contain no-repeat; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .55)); animation: rd-pin 1.4s ease-in-out infinite; }
@keyframes rd-pin { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* ---------------------------------------------------------------- RUTA: plano (pantallas de Aventura y Reto diario) */
.rd.plan { --s: 46px; --sb: 54px; --gap: 10px; --mid: calc(var(--s) / 2); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 12px; align-items: stretch; margin-top: 4px; }
.rd.plan .rd-act { display: grid; align-content: space-between; gap: 10px; padding: 10px 14px 9px; border-radius: 14px; background: rgba(10, 26, 18, .84);
  box-shadow: 0 0 0 2px #0a140f, inset 0 0 0 2px rgba(255, 217, 138, .26), 0 6px 0 rgba(0, 0, 0, .35); }
.rd.plan .rd-h { display: grid; gap: 1px; min-width: 0; }
.rd.plan .rd-h b { font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #f8b449; line-height: 1.1; }
.rd.plan .rd-h i { font-style: normal; font-family: var(--serif); font-size: 18px; line-height: 1.05; color: #f3eddc; text-wrap: balance; }
.rd.plan .rd-row { justify-content: space-between; align-items: flex-start; gap: 0; }
.rd.plan .rd-ic { width: var(--s); height: var(--s); border-radius: 11px; transition: transform .2s var(--spring); }
.rd.plan .rd-ic .ic { width: 36px; height: 36px; }
.rd.plan .rd-n.boss .rd-ic { width: var(--sb); height: var(--sb); margin-top: calc((var(--s) - var(--sb)) / 2); }
.rd.plan .rd-n.boss .rd-ic .ic { width: 48px; height: 48px; }
.rd.plan .rd-n:hover .rd-ic { transform: translateY(-3px); }
.rd.plan .rd-n em { font-style: normal; font-family: var(--mono); font-size: 12px; line-height: 1; margin-top: 6px; color: rgba(242, 233, 214, .6); }
.rd.plan .rd-n.boss em { color: #ff9d94; }
.rd.plan .rd-inf { align-content: end; padding-left: 10px; padding-right: 10px; background: rgba(10, 26, 18, .55); box-shadow: 0 0 0 2px #0a140f, inset 0 0 0 2px rgba(255, 217, 138, .14), 0 6px 0 rgba(0, 0, 0, .3); }
.rd.plan .rd-inf .rd-row { justify-content: center; }
.rd.plan .rd-n.inf em { font-family: var(--serif); font-size: 14px; letter-spacing: 0; color: rgba(255, 217, 138, .75); white-space: nowrap; }
.rd.plan .rd-n.inf .rd-ic b { font-size: 34px; }
/* Reto diario: el mismo plano, mas pequeno (con el orden barajado del dia) */

.rd { text-wrap: wrap; }
/* ---------------------------------------------------------------- PAN DE ORO (v0.51): la carta legendaria
   Marco de oro con bisel de pixel (luz arriba a la izquierda, sombra abajo a la derecha), placa de laton que pisa el borde de arriba (R_NAMES[3]),
   terciopelo de joyero detras del icono, halo de oro a dos pasos que late a saltos y el brillo que la barre (lienzo .lg-clip, js/adventure.js: Gold).
   La letra es la de las demas cartas (d0/d1/d2): la placa sale del flujo y su hueco se lo queda el icono. No gira ni crece al pasar el raton (el
   pixel se queda entero) y bota a saltos de 1 px. El halo esta dentro de la carta (inset 0): no ensancha lo que mide A.fitK */
.table.mesa .offer.pc.r3 { --g0: #fff6c8; --g1: #ffd95a; --g2: #f5a623; --g3: #c46a1b; isolation: isolate; overflow: visible; padding-top: 16px; animation-timing-function: var(--spring), steps(8, jump-end);
  box-shadow: 0 0 0 3px #16241c, inset 3px 3px 0 0 var(--g0), inset -3px -3px 0 0 var(--g3), inset 0 0 0 6px var(--g1), inset 0 0 0 9px #16241c, 0 12px 0 3px rgba(0, 0, 0, .42); }
.table.mesa .offer.pc.r3:nth-child(n) { transform: none; }   /* ni girada ni levantada en el centro: la placa no pisa el aviso de encima */
.table.mesa .offer.pc.r3:hover { transform: translateY(-3px);   /* sube 3 px: su sombra crece esos 3 px (12 + 3), no los 12 de las cartas que suben 18 */
  box-shadow: 0 0 0 3px #16241c, inset 3px 3px 0 0 var(--g0), inset -3px -3px 0 0 var(--g3), inset 0 0 0 6px var(--g1), inset 0 0 0 9px #16241c, 0 15px 0 3px rgba(0, 0, 0, .45); }
.table.mesa .offer.pc.r3.hit { box-shadow: 0 0 0 3px #16241c, inset 3px 3px 0 0 #fff, inset -3px -3px 0 0 var(--g1), inset 0 0 0 6px var(--g0), inset 0 0 0 9px #16241c, 0 12px 0 3px rgba(0, 0, 0, .42); }
.table.mesa .offer.pc.r3 .of-r { position: absolute; top: -10px; left: 50%; translate: -50% 0; z-index: 6; padding: 5px 10px 4px 12px; border-radius: 3px; white-space: nowrap;
  font-weight: 700; letter-spacing: .16em; color: #4e1530; background: linear-gradient(180deg, var(--g0) 0 3px, var(--g1) 3px 50%, var(--g2) 50% calc(100% - 3px), var(--g3) calc(100% - 3px));
  box-shadow: 0 0 0 3px #16241c, 0 4px 0 3px rgba(0, 0, 0, .35); }
.table.mesa .offer.pc.r3 .of-ico { border-color: #16241c; box-shadow: inset 0 0 0 3px var(--g3), inset 0 0 0 5px rgba(0, 0, 0, .4), inset 0 -12px 18px rgba(0, 0, 0, .45);
  background: repeating-linear-gradient(0deg, rgba(255, 201, 60, .09) 0 2px, transparent 2px 16px), repeating-linear-gradient(90deg, rgba(255, 201, 60, .09) 0 2px, transparent 2px 16px), radial-gradient(ellipse at 50% 30%, #3b2c40, #140f18 76%); }
.table.mesa .offer.pc.r3 > .of-n, .table.mesa .offer.pc.r3 > p { position: relative; z-index: 4; }
.table.mesa .offer.pc.r3 .buy { z-index: 4; box-shadow: inset 0 0 0 2px var(--g1), 0 5px 0 rgba(0, 0, 0, .35); }
/* halo (a dos pasos; el tercero late con opacidad, que no repinta la carta) y el lienzo del brillo, recortado a la carta */
.lg-halo { position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; box-shadow: 0 0 0 3px #16241c, 0 0 0 6px rgba(255, 201, 60, .34), 0 0 0 9px rgba(255, 201, 60, .14); }
.lg-halo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0; animation: lg-halo 1.8s steps(1) infinite;
  box-shadow: 0 0 0 3px #16241c, 0 0 0 6px rgba(255, 201, 60, .24), 0 0 0 9px rgba(255, 201, 60, .12), 0 0 0 12px rgba(255, 201, 60, .08); }
@keyframes lg-halo { 50% { opacity: 1; } }
.table.mesa .offer.pc.r3:hover .lg-halo { box-shadow: 0 0 0 3px #16241c, 0 0 0 6px rgba(255, 217, 90, .6), 0 0 0 9px rgba(255, 201, 60, .3), 0 0 0 12px rgba(255, 201, 60, .12); }
.table.mesa .offer.pc.r3.hit .lg-halo { box-shadow: 0 0 0 3px #16241c, 0 0 0 6px rgba(255, 246, 200, .8), 0 0 0 9px rgba(255, 201, 60, .5), 0 0 0 12px rgba(255, 201, 60, .25), 0 0 0 15px rgba(255, 201, 60, .1); }
.table.mesa .offer.pc.r3:hover .lg-halo::after, .table.mesa .offer.pc.r3.hit .lg-halo::after { animation: none; }
.lg-clip { position: absolute; inset: 0; z-index: 3; border-radius: inherit; overflow: hidden; pointer-events: none; }
.lg-clip canvas { position: absolute; left: 0; top: 0; image-rendering: pixelated; }
/* en la mochila: el mismo marco con bisel a 56 x 72, su halo y su brillo (el icono, por encima del brillo) */
.table.mesa .tr-relic.r3 .tr-face { isolation: isolate; box-shadow: 0 0 0 2px #16241c, inset 3px 3px 0 0 #fff6c8, inset -3px -3px 0 0 #c46a1b, inset 0 0 0 3px #ffd95a, inset 0 -5px 0 rgba(22, 36, 28, .12), 0 5px 0 rgba(0, 0, 0, .45); }
.table.mesa .tr-relic.r3.sel .tr-face { box-shadow: 0 0 0 2px #16241c, inset 3px 3px 0 0 #fff6c8, inset -3px -3px 0 0 #c46a1b, inset 0 0 0 3px #ffd95a, 0 0 0 5px #ffd98a, 0 0 24px 5px rgba(255, 208, 107, .55), 0 10px 0 rgba(0, 0, 0, .35); }
.table.mesa .tr-relic.r3 .tr-face .ic { position: relative; z-index: 4; }
.table.mesa .tr-relic.r3 .lg-halo { box-shadow: 0 0 0 2px #16241c, 0 0 0 4px rgba(255, 201, 60, .4); }
.table.mesa .tr-relic.r3 .lg-halo::after { box-shadow: 0 0 0 2px #16241c, 0 0 0 4px rgba(255, 201, 60, .25), 0 0 0 6px rgba(255, 201, 60, .16); }
.table.mesa .tr-face .lg-ico { background: center / contain no-repeat; }
/* la secuencia al elegirla en el cofre (js/adventure.js, legendary): la mesa inerte, las cartas quietas, la legendaria por encima de la sala oscura y los doblones por encima de ella
   (sin la perspectiva de las ofertas, que la encerraba en su propio contexto de apilado). Llega a la mochila: aparece y su hueco destella en oro */
.table.mesa.lg-seq .offers { perspective: none; }
.table.mesa.lg-seq .offer.pc { animation-play-state: paused; }
.table.mesa.lg-seq .tb-note, .table.mesa.lg-seq .go2 { opacity: 0; transition: opacity .3s; }   /* ya has elegido: fuera "Elige UNA..." y "Continuar sin elegir" */
.table.mesa .offer.pc.lg-hero { z-index: 20; }
.table.mesa.lg-seq .offer.pc.lg-hero, .table.mesa.lg-seq .offer.pc.lg-hero:hover { z-index: 20; }   /* el puntero sigue sobre la carta recien elegida: su :hover de la tienda (gala.css, z-index 4) no puede bajarla por detras de la sala oscura (z-index 8) */
.lg-dim { position: absolute; inset: 0; z-index: 8; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at var(--lx, 50%) var(--ly, 46%), rgba(48, 30, 6, .5), rgba(4, 7, 5, .9) 72%); }
.lg-fx { position: absolute; inset: 0; z-index: 21; pointer-events: none; overflow: hidden; }   /* los doblones saltan por delante de la carta (si no, la carta tapaba casi todos) */
.lg-coin { position: absolute; width: 36px; height: 36px; margin: -18px 0 0 -18px; background: url("../assets/icons/coin.webp") center / contain no-repeat; }
.table.mesa .tr-relic.lg-in .tr-face { animation: lg-pop .45s var(--spring) both; }
@keyframes lg-pop { from { opacity: 0; transform: translateY(-10px) scale(.6); } }
.table.mesa .tr-relic.lg-in::after { content: ""; position: absolute; inset: -9px; z-index: 5; border-radius: 16px; pointer-events: none; opacity: 0; box-shadow: 0 0 0 3px #ffd95a, 0 0 0 6px rgba(255, 217, 90, .35); animation: lg-flash .7s steps(1); }
@keyframes lg-flash { 0% { opacity: 1; } 30% { opacity: .2; } 50% { opacity: 1; } 75% { opacity: .3; } }
html.reduce-motion .lg-halo::after { animation: none; }

/* reducir movimiento (Ajustes o el sistema): sin chincheta que bota, ficha que gira ni brillo que late */
html.reduce-motion .rd.bar .rd-n.next::after { animation: none; }

.rd.bar .rd-k { font-size: 18px; }
@media (max-width: 700px) { .rd.plan { grid-template-columns: minmax(0, 1fr); } }
/* ---------------------------------------------------------------- v0.73: la ruleta lineal de Rojo o negro (banda a pantalla completa, rueda europea con cero) */
.rou { --cw: 96px; position: absolute; inset: 0; z-index: 100000; display: grid; place-items: center; pointer-events: auto; overflow: hidden;
  background: radial-gradient(ellipse at 50% 50%, rgba(12, 7, 7, .9), rgba(2, 4, 3, .97) 82%); animation: rou-bg .3s ease-out both; }
@keyframes rou-bg { from { opacity: 0; } }
.rou.out { animation: rou-out .28s ease-in both; pointer-events: none; } @keyframes rou-out { to { opacity: 0; } }
.rou.skippable { cursor: pointer; }
.rou-stage { position: relative; width: 100%; }
.rou-top { position: absolute; left: 0; right: 0; bottom: calc(100% + 44px); display: flex; flex-direction: column; align-items: center; gap: calc(var(--cw) * .28); pointer-events: none; }
.rou-pick { display: inline-flex; align-items: center; gap: 10px; padding: 7px 20px 6px 12px; border-radius: 999px; background: #0a140f; color: #ffd98a; box-shadow: inset 0 0 0 2px #f8b449, 0 4px 0 2px #0a140f;
  font-family: var(--mono); font-size: 15px; letter-spacing: .08em; text-transform: uppercase; animation: rou-drop .5s var(--spring) both; }
.rou-pick b { font-weight: 400; color: #fff; } .rp-k { opacity: .8; }
.rp-dot { width: 18px; height: 18px; border-radius: 50%; box-shadow: 0 0 0 2px #0a140f, inset 0 3px 0 rgba(255, 255, 255, .35), inset 0 -3px 0 rgba(0, 0, 0, .3); }
.rp-red { background: #d63a2f; } .rp-black { background: #23252e; } .rp-green { background: #1b8a4a; }
@keyframes rou-drop { from { opacity: 0; transform: translateY(-26px); } }
.rou-band { position: relative; width: 100%; height: calc(var(--cw) * 1.5); background: #070d09; animation: rou-open .46s var(--spring) both;
  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); }
@keyframes rou-open { from { transform: scaleY(.05); opacity: 0; } }
.rou-band::before, .rou-band::after { content: ""; position: absolute; top: 0; bottom: 0; width: 24%; z-index: 3; pointer-events: none; }
.rou-band::before { left: 0; background: linear-gradient(90deg, #04100a 8%, rgba(4, 16, 10, 0)); } .rou-band::after { right: 0; background: linear-gradient(270deg, #04100a 8%, rgba(4, 16, 10, 0)); }
.rou-lights { --lc: #ffe08a; --ld: #4a3410; position: absolute; left: 0; right: 0; height: 10px; z-index: 5; pointer-events: none; background-size: 56px 10px;
  background-image: linear-gradient(90deg, var(--lc) 0 10px, transparent 10px 28px, var(--ld) 28px 38px, transparent 38px 56px); animation: rou-chase .5s steps(1) infinite; }
.rou-lights.top { top: -32px; } .rou-lights.bot { bottom: -32px; }
@keyframes rou-chase { 50% { background-position: 28px 0; } }
.rou.done.is-red .rou-lights { --lc: #ff7a62; --ld: #ff7a62; } .rou.done.is-black .rou-lights { --lc: #eef2f0; --ld: #eef2f0; } .rou.done.is-green .rou-lights { --lc: #5dea98; --ld: #5dea98; }
.rou.done .rou-lights { animation: rou-flash .26s steps(1) 8; } @keyframes rou-flash { 50% { opacity: .25; } }
.rou-view { position: absolute; inset: 0; overflow: hidden; contain: layout paint; }
.rou-strip { position: absolute; left: 50%; top: 0; height: 100%; display: flex; will-change: transform; }
.rc { flex: none; width: var(--cw); height: 100%; box-sizing: border-box; position: relative; display: grid; place-items: center; font-style: normal; background: var(--cc);
  box-shadow: inset 0 0 0 3px #070d09, inset 0 6px 0 var(--ch), inset 0 -7px 0 var(--cs); }
.rc b { font: 900 calc(var(--cw) * .5)/1 var(--serif); color: #fff; text-shadow: 0 3px 0 rgba(0, 0, 0, .42); }
.rc-red { --cc: #c9362c; --ch: #ee6a52; --cs: #8c2320; } .rc-black { --cc: #22242d; --ch: #3d4150; --cs: #101117; } .rc-green { --cc: #1b8a4a; --ch: #52d68a; --cs: #0f5f33; }
.rc.cur { filter: brightness(1.25); }
.rou.done .rc { filter: brightness(.34) saturate(.55); transition: filter .35s; }
.rou.done .rc.hit { filter: none; z-index: 2; animation: rou-hit .22s steps(1) 6; } @keyframes rou-hit { 50% { filter: brightness(1.5); } }
.rou-ptr { position: absolute; left: 50%; top: -22px; bottom: -22px; width: 0; z-index: 4; pointer-events: none; }
.pt-line { position: absolute; left: -2px; top: 18px; bottom: 18px; width: 4px; background: #ffd95a; box-shadow: 0 0 0 2px #0a140f, 0 0 18px 4px rgba(255, 217, 90, .5); }
.rou.done .pt-line { opacity: 0; }
.pt-top, .pt-bot { position: absolute; left: -18px; width: 4px; height: 4px; filter: drop-shadow(3px 0 0 #0a140f) drop-shadow(-3px 0 0 #0a140f) drop-shadow(0 3px 0 #0a140f) drop-shadow(0 -3px 0 #0a140f); }
.pt-top { top: 0; box-shadow: 0px 0px 0 #ffd95a, 4px 0px 0 #ffd95a, 8px 0px 0 #ffd95a, 12px 0px 0 #ffd95a, 16px 0px 0 #ffd95a, 20px 0px 0 #ffd95a, 24px 0px 0 #ffd95a, 28px 0px 0 #ffd95a, 32px 0px 0 #ffd95a, 4px 4px 0 #ffd95a, 8px 4px 0 #ffd95a, 12px 4px 0 #ffd95a, 16px 4px 0 #ffd95a, 20px 4px 0 #ffd95a, 24px 4px 0 #ffd95a, 28px 4px 0 #ffd95a, 8px 8px 0 #ffd95a, 12px 8px 0 #ffd95a, 16px 8px 0 #ffd95a, 20px 8px 0 #ffd95a, 24px 8px 0 #ffd95a, 12px 12px 0 #ffd95a, 16px 12px 0 #ffd95a, 20px 12px 0 #ffd95a, 16px 16px 0 #ffd95a; }
.pt-bot { top: calc(100% - 20px); box-shadow: 16px 0px 0 #ffd95a, 12px 4px 0 #ffd95a, 16px 4px 0 #ffd95a, 20px 4px 0 #ffd95a, 8px 8px 0 #ffd95a, 12px 8px 0 #ffd95a, 16px 8px 0 #ffd95a, 20px 8px 0 #ffd95a, 24px 8px 0 #ffd95a, 4px 12px 0 #ffd95a, 8px 12px 0 #ffd95a, 12px 12px 0 #ffd95a, 16px 12px 0 #ffd95a, 20px 12px 0 #ffd95a, 24px 12px 0 #ffd95a, 28px 12px 0 #ffd95a, 0px 16px 0 #ffd95a, 4px 16px 0 #ffd95a, 8px 16px 0 #ffd95a, 12px 16px 0 #ffd95a, 16px 16px 0 #ffd95a, 20px 16px 0 #ffd95a, 24px 16px 0 #ffd95a, 28px 16px 0 #ffd95a, 32px 16px 0 #ffd95a; }
.pt-frame { position: absolute; left: calc(var(--cw) / -2 - 5px); width: calc(var(--cw) + 10px); top: 17px; bottom: 17px; box-sizing: border-box; border: 5px solid #ffd95a; opacity: 0;
  box-shadow: 0 0 0 3px #0a140f, inset 0 0 0 3px #0a140f, 0 0 30px 6px rgba(255, 217, 90, .45); }
.rou.done .pt-frame { opacity: 1; animation: rou-frame .24s steps(1) 6; } @keyframes rou-frame { 50% { opacity: .35; } }
.rou-res { order: -1; display: flex; flex-direction: column; align-items: center; gap: calc(var(--cw) * .2); visibility: hidden; }
.rou.done .rou-res { visibility: visible; }
.rr-plate { display: inline-flex; align-items: baseline; gap: 16px; padding: 8px 28px 10px 24px; border-radius: 12px; background: var(--cc);
  box-shadow: 0 0 0 3px #0a140f, inset 0 5px 0 var(--ch), inset 0 -7px 0 var(--cs), 0 8px 0 3px #0a140f; }
.rr-plate b { font: 900 calc(var(--cw) * .5)/1 var(--serif); letter-spacing: .05em; text-transform: uppercase; color: #fff; text-shadow: 0 3px 0 rgba(0, 0, 0, .42); }
.rr-plate i { font: 400 calc(var(--cw) * .3)/1 var(--mono); font-style: normal; color: rgba(255, 255, 255, .85); }
@keyframes rou-stamp { from { opacity: 0; transform: scale(1.7) rotate(-5deg); } }
.rr-msg { font: 900 calc(var(--cw) * .34)/1 var(--serif); letter-spacing: .03em; color: #ffe9a6; text-shadow: 0 3px 0 rgba(0, 0, 0, .6); }
.rou.done .rr-plate { animation: rou-stamp .55s var(--spring) both; } .rou.done .rr-msg { animation: rou-up .45s .25s var(--spring) both; }
@keyframes rou-up { from { opacity: 0; transform: translateY(14px); } }
.rou.lose .rr-msg { color: #c9d1cc; } .rou.zero.win .rr-msg { color: #7dffb0; } .rou.zero.lose .rr-msg { color: #ff9a86; }
html.reduce-motion .rou, html.reduce-motion .rou * { animation: none !important; }

/* v0.73.1: el "no va mas", las bombillas que corren, los numeros que se funden a toda velocidad, el latido del casi-fallo y el fogonazo del tope */
.rou-no { position: absolute; left: 0; right: 0; top: 0; text-align: center; font: 900 calc(var(--cw) * .62)/1 var(--serif); letter-spacing: .06em; color: #ffe9a6; text-shadow: 0 4px 0 #0a140f, 0 0 26px rgba(255, 217, 90, .5); animation: rou-no 1.15s both; pointer-events: none; }
@keyframes rou-no { 0% { opacity: 0; transform: scale(1.5); } 18% { opacity: 1; transform: scale(1); } 72% { opacity: 1; } 100% { opacity: 0; transform: scale(.96); } }
.rou.spin .rou-lights { animation-duration: .16s; }
.rou.crawl .rou-lights { animation-duration: 1s; }
.rou.hush .rou-lights { animation-play-state: paused; }                /* v0.2.47: el falso final: las bombillas se quedan quietas como si hubiera acabado */
.rou.fast .rc b { opacity: .18; }
.rc b { transition: opacity .25s; }
.rou-band { transition: transform .55s ease-in-out; } .rou.crawl .rou-band { transform: scale(1.014); }
.rou-wash { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at 50% 50%, var(--wc, rgba(255, 217, 90, .55)), transparent 70%); }
.rou.win .rou-wash { --wc: rgba(255, 217, 90, .55); } .rou.zero .rou-wash { --wc: rgba(80, 230, 140, .6); } .rou.lose:not(.zero) .rou-wash { --wc: rgba(0, 0, 0, .35); }
.rou.flash .rou-wash { animation: rou-wash .55s ease-out; } @keyframes rou-wash { 0% { opacity: 1; } 100% { opacity: 0; } }
html.reduce-motion .rou-no { display: none; }

/* ---------------------------------------------------------------- v0.2.9: los juegos de casino de la Barra (sus pantallas). Desde la v0.3.48, sus placas del Campamento son todas iguales (css/gala.css, CAMPAMENTO) */

/* las pantallas de Moneda al aire y de Ruleta de premios (comparten la capa .rou de Rojo o negro) */
.rc-coin { --cc: #d9a21f; --ch: #ffe08a; --cs: #8a5a12; } .rc-good { --cc: #1f9a58; --ch: #6fe6a0; --cs: #0f5f33; } .rc-bad { --cc: #c9362c; --ch: #ee6a52; --cs: #8c2320; } .rc-none { --cc: #5d6470; --ch: #8a93a2; --cs: #3a4049; }
.rp-coin { background: #e8a91e; } .rp-wheel { background: #8a3a9c; }
.rou.coin .rou-band { height: calc(var(--fw) * 1.75); background: radial-gradient(ellipse at 50% 55%, #1a3a68 0%, #0a1830 75%); }
.rou.coin .rou-band::before, .rou.coin .rou-band::after { display: none; }
.cn-air { position: absolute; left: 50%; top: 50%; width: var(--fw); height: var(--fw); margin: calc(var(--fw) / -2) 0 0 calc(var(--fw) / -2); z-index: 3; }
.cn-arc { position: absolute; inset: 0; }
.cn-spr { position: absolute; inset: 0; background: url(../assets/icons/coin_spin.webp) 0 0 / calc(var(--fw) * 24) var(--fw) no-repeat; image-rendering: pixelated; }
.cn-shadow { position: absolute; left: 18%; right: 18%; bottom: -1%; height: 7%; border-radius: 50%; background: rgba(0, 0, 0, .55); opacity: .55; }
.cn-stand { position: absolute; left: 50%; top: 0; width: calc(var(--fw) / 4); height: var(--fw); margin-left: calc(var(--fw) / -8); image-rendering: pixelated; display: none; transform-origin: 50% 94%; }
.rou.coin.is-edge .cn-spr { display: none; } .rou.coin.is-edge .cn-stand { display: block; animation: cn-wobble .9s ease-out both; }
@keyframes cn-wobble { 0% { transform: rotate(9deg); } 20% { transform: rotate(-6deg); } 40% { transform: rotate(4deg); } 60% { transform: rotate(-2deg); } 100% { transform: rotate(0); } }
.rou.coin.done.is-coin .rou-lights { --lc: #ffd95a; --ld: #ffd95a; }
.rou.wheel .rou-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--ws) * .05); }
.rou.wheel .rou-top { position: relative; left: auto; right: auto; bottom: auto; }
.wh { position: relative; width: var(--ws); height: var(--ws); flex: none; animation: rou-open .46s var(--spring) both; }
.wh-ring { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle closest-side, transparent 0 80.5%, #0a140f 80.5% 82.5%, #9a6a1c 82.5% 85%, #f0b94f 85% 95%, #9a6a1c 95% 97.5%, #0a140f 97.5% 100%); filter: drop-shadow(0 22px 28px rgba(0, 0, 0, .6)); }
.wh-b { position: absolute; left: 50%; top: 50%; width: calc(var(--ws) * .034); height: calc(var(--ws) * .034); margin: calc(var(--ws) * -.017) 0 0 calc(var(--ws) * -.017); border-radius: 50%; background: #fff4b0;
  box-shadow: 0 0 0 2px #0a140f, 0 0 10px 2px rgba(255, 224, 138, .8); transform: rotate(var(--a)) translateY(calc(var(--ws) * -.445)); animation: wh-blink .5s steps(1) infinite; }
.wh-b.o { animation-delay: .25s; } @keyframes wh-blink { 0% { background: #fff4b0; } 50% { background: #8a6a2a; box-shadow: 0 0 0 2px #0a140f; } }
.rou.spin .wh-b { animation-duration: .16s; } .rou.spin .wh-b.o { animation-delay: .08s; }
.rou.crawl .wh-b { animation-duration: 1s; } .rou.crawl .wh-b.o { animation-delay: .5s; } .rou.hush .wh-b { animation-play-state: paused; }   /* v0.2.47: tension y falso final de la rueda */
.rou.done .wh-b { animation: rou-flash .26s steps(1) 8; }
.wh-disc { position: absolute; inset: 9%; border-radius: 50%; overflow: hidden; will-change: transform; box-shadow: 0 0 0 3px #0a140f; }
.wh-s { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(var(--a)); }
.wh-s img { position: absolute; width: calc(var(--ws) * .15); height: calc(var(--ws) * .15); left: calc(var(--ws) * -.075); top: calc(var(--ws) * -.385); image-rendering: pixelated; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .4)); }
.wh-s b { position: absolute; width: calc(var(--ws) * .2); left: calc(var(--ws) * -.1); top: calc(var(--ws) * -.222); text-align: center; font: 900 calc(var(--ws) * .04)/1 var(--serif); color: #fff; text-shadow: 0 2px 0 #000, 0 0 4px #000; }
.wh-sep { position: absolute; inset: 0; background: repeating-conic-gradient(from -15deg, #0a140f 0 1deg, transparent 1deg 30deg); }
.wh-dim { position: absolute; inset: 0; opacity: 0; background: conic-gradient(from calc(var(--a) - 15deg), transparent 0 30deg, rgba(0, 0, 0, .66) 30deg 360deg); }
.rou.done .wh-dim { opacity: 1; transition: opacity .3s; }
.wh-hub { position: absolute; left: 50%; top: 50%; width: calc(var(--ws) * .17); height: calc(var(--ws) * .17); margin: calc(var(--ws) * -.085) 0 0 calc(var(--ws) * -.085); border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 40% 35%, #fff0a8, #f0b94f 55%, #9a6a1c); box-shadow: 0 0 0 3px #0a140f, 0 4px 0 3px #0a140f; z-index: 2; }
.wh-hub img { width: 70%; height: 70%; image-rendering: pixelated; }
.wh-ptr { position: absolute; left: 50%; top: calc(var(--ws) * -.035); width: calc(var(--ws) * .1); height: calc(var(--ws) * .13); margin-left: calc(var(--ws) * -.05); background: #0a140f; clip-path: polygon(0 0, 100% 0, 50% 100%); z-index: 3; transform-origin: 50% 15%; }
.wh-ptr::after { content: ""; position: absolute; inset: 4px 6px 9px; background: #ffd95a; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.rou.wheel .rou-wash { --wc: rgba(255, 217, 90, .5); } .rou.wheel.lose .rou-wash { --wc: rgba(0, 0, 0, .4); }
.rou.wheel, .rou.coin { background: radial-gradient(ellipse at 50% 50%, rgba(14, 6, 18, .96), rgba(3, 2, 6, .99) 85%); }
/* ---------------------------------------------------------------- v0.2.48: Los tres cubiletes (el trile). Fieltro burdeos y cenefa de rombos de oro (el ♦ del crupier);
   la mesa es un escenario fijo de 1920x1080 con el arte a x4 (se escala con transform: scale(K/4), K entero, para que el pixel art quede nitido) */
.rp-cups { background: #b0405a; }
.rou.cups { background: radial-gradient(ellipse at 50% 40%, rgba(40, 8, 22, .98), rgba(4, 1, 8, 1) 85%); }
.rou.cups .rou-wash { --wc: rgba(255, 217, 90, .5); } .rou.cups.lose .rou-wash { --wc: rgba(0, 0, 0, .4); } .rou.cups.joke .rou-wash { --wc: rgba(138, 31, 63, .55); }
.rou.cups.hush .rou-lights { animation-play-state: paused; }
.rou.cups .tr-stage { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; overflow: hidden; user-select: none; }
.rou.cups .tr-stage img { image-rendering: pixelated; display: block; }
.rou.cups .tr-bg { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 38%, #3d1024 0%, #14050e 58%, #05010a 100%); }
.rou.cups .tr-dealer { position: absolute; left: 751px; top: 44px; width: 384px; height: 384px; z-index: 2; image-rendering: pixelated; }   /* 96 px de arte a x4 (el pixel de la mesa) */
.rou.cups .tr-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.cups .tr-bubble.on { opacity: 1; transform: none; }
.rou.cups .tr-bubble::before { content: ""; position: absolute; left: -22px; top: 26px; border: 12px solid transparent; border-right: 14px solid #0a0048; }
.rou.cups .tr-bubble::after { content: ""; position: absolute; left: -15px; top: 30px; border: 8px solid transparent; border-right: 10px solid #fff; }
.rou.cups .tr-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.cups .tr-left .rou-pick { font-size: 15px; }
.rou.cups .tr-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.cups .tr-hint.on { opacity: 1; }
.rou.cups .tr-top { position: absolute; left: 0; right: 0; top: 34px; z-index: 8; display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.rou.cups .tr-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; }
.rou.cups .tr-no.on { animation: tr-no 1.3s both; } @keyframes tr-no { 0% { opacity: 0; transform: scale(1.5); } 18% { opacity: 1; transform: scale(1); } 72% { opacity: 1; } 100% { opacity: 0; transform: scale(.96); } }
.rou.cups .tr-res { display: flex; flex-direction: row; align-items: center; gap: 26px; visibility: hidden; }
.rou.cups .tr-res.on { visibility: visible; }
.rou.cups .tr-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.cups .tr-plate.lose { --cc: #5d6470; --ch: #8a93a2; --cs: #3a4049; } .rou.cups .tr-plate.joke { --cc: #8a1f3f; --ch: #d9506d; --cs: #4a0d22; }
.rou.cups .tr-plate i { font: 400 34px var(--mono); font-style: normal; color: rgba(255, 255, 255, .88); }
.rou.cups .tr-msg { font: 900 34px/1 var(--serif); letter-spacing: .03em; color: #ffe9a6; text-shadow: 0 3px 0 rgba(0, 0, 0, .6); }
.rou.cups .tr-res.on .tr-plate { animation: rou-stamp .55s var(--spring) both; } .rou.cups .tr-res.on .tr-msg { animation: rou-up .45s .25s var(--spring) both; }
.rou.cups .tr-band { position: absolute; left: 0; top: 450px; width: 1920px; height: 500px; z-index: 3; background: url(../assets/trile/felt.png) 0 0 / 128px 128px, radial-gradient(ellipse at 50% 46%, #9a2447 0%, #66142f 52%, #2b0816 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); animation: none; }
.rou.cups .tr-band .rou-lights { --lc: #ffe08a; --ld: #4a3410; }
.rou.cups .tr-ring { position: absolute; width: 232px; height: 72px; z-index: 4; }
.rou.cups .tr-num { position: absolute; z-index: 4; width: 80px; text-align: center; font: 900 54px/1 var(--serif); color: #f6c453; text-shadow: 0 4px 0 #0a140f; opacity: .9; transition: transform .15s, color .15s; }
.rou.cups .tr-num.hot { color: #fff3b0; transform: translateY(-4px); }
.rou.cups .tr-shadow { position: absolute; left: 0; top: 0; width: 176px; height: 48px; z-index: 5; }
.rou.cups .tr-coin { position: absolute; left: 0; top: 0; width: 120px; height: 64px; z-index: 6; image-rendering: pixelated; }
.rou.cups .tr-cup { position: absolute; left: 0; top: 0; width: 192px; height: 224px; will-change: transform; }
.rou.cups .tr-cup.pick { cursor: pointer; }
.rou.cups .tr-glovelayer { position: absolute; inset: 0; z-index: 100; pointer-events: none; clip-path: inset(452px 0 0 0); }
.rou.cups .tr-glove { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 100; will-change: transform; pointer-events: none; display: none; }
.rou.cups .tr-glove:not(.open) img { position: absolute; display: none; }
.rou.cups .tr-glove[data-f=reach] .hf-reach, .rou.cups .tr-glove[data-f=half] .hf-half, .rou.cups .tr-glove[data-f=grab_sq] .hf-grab_sq, .rou.cups .tr-glove[data-f=grab] .hf-grab { display: block; }
.rou.cups .tr-glove.r img { transform: scaleX(-1); }
.rou.cups .tr-glove.open { display: block; z-index: 101; width: 384px; height: 364px; -webkit-mask-image: linear-gradient(to top, transparent 0, #000 36px); mask-image: linear-gradient(to top, transparent 0, #000 36px); }
.rou.cups .tr-glove.open img { position: absolute; left: 0; top: 0; display: none; image-rendering: pixelated; } .rou.cups .tr-glove.open[data-f="0"] .ho-0, .rou.cups .tr-glove.open[data-f="1"] .ho-1, .rou.cups .tr-glove.open[data-f="2"] .ho-2, .rou.cups .tr-glove.open[data-f="3"] .ho-3, .rou.cups .tr-glove.open[data-f="4"] .ho-4, .rou.cups .tr-glove.open[data-f="5"] .ho-5 { display: block; }   /* la palma del chiste: sube cerrada y se abre */
.rou.cups .tr-spin { position: absolute; left: 0; top: 0; width: 192px; height: 192px; z-index: 120; background: url(../assets/icons/coin_spin.webp) 0 0 / 4608px 192px no-repeat; image-rendering: pixelated; display: none; filter: drop-shadow(0 8px 0 rgba(0, 0, 0, .35)); }