/* The TV's casino (built by /shared/lobby.js): a dark room seen through a long lens behind
   every screen, and in the lobby the room it's in (body[data-room]: bar, or a world's own)
   with the slot-machine room code, the neon "Squib" sign (the way back to the main menu),
   Pib's spot, and the eight seats.

   Two boxes: the room covers the whole screen, while the rooms sit in a 16:9 stage that
   always fits, so nothing important is ever cut off. Inside the stage, sizes are in cqw
   (1% of its width; the rooms were drawn at 1280 x 720, so 1cqw = 12.8px there). */

/* ---------- the room behind every screen ---------- */
.casino-room { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background: radial-gradient(70% 60% at 50% 55%, #160c14 0%, #0a0609 60%, #050407 100%); }
.lx-haze { position: absolute; inset: 0; }
.lx-b { position: absolute; border-radius: 50%; opacity: var(--o); background: radial-gradient(circle, var(--c) 0%, var(--c) 38%, transparent 70%);
  animation: lx-twinkle var(--t, 6s) ease-in-out infinite alternate, lx-drift calc(var(--t, 6s) * 4) ease-in-out infinite alternate; }
/* the out-of-focus lights drift slowly, each its own way, like a room seen through a long lens */
.lx-b:nth-child(2n) { --dx: -2.6vw; --dy: 1.3vw; }
.lx-b:nth-child(3n) { --dx: 1.8vw; --dy: 1.9vw; }
.lx-b:nth-child(5n) { --dx: -1.2vw; --dy: -2.2vw; }
@keyframes lx-drift { from { translate: 0 0; } to { translate: var(--dx, 2.2vw) var(--dy, -1.5vw); } }
@keyframes lx-twinkle { from { opacity: var(--o); } to { opacity: calc(var(--o) * .5); } }
.lx-vignette { position: absolute; inset: 0; background: radial-gradient(140% 110% at 50% 45%, transparent 50%, rgba(0,0,0,.78) 100%); }
.lx-grain { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .07; mix-blend-mode: overlay; }
/* outside the lobby the room steps back so the cards and answers read */
.casino-room::after { content: ""; position: absolute; inset: 0; background: transparent; transition: background .6s; }
body:not(.lobby) .casino-room::after { background: rgba(5,4,7,.5); }

.casino-stage { position: fixed; left: 50%; top: 50%; width: min(100vw, 177.78vh); height: min(56.25vw, 100vh); transform: translate(-50%, -50%);
  container-type: inline-size; pointer-events: none; display: none; font-family: "Quicksand", var(--body); color: #fff; }
body.lobby .casino-stage { display: block; }
.casino-ui { z-index: 15; }
.casino-front { z-index: 22; } /* in front of Pib (z 20), so the table or bar hides his legs */
.casino-stage * { box-sizing: border-box; }
.lx-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lx-lamp { animation: lx-lamp 6s ease-in-out infinite alternate; }
@keyframes lx-lamp { from { opacity: .85; } to { opacity: 1; } }
.lx-bottles { position: absolute; inset: 0; }

/* in the lobby the old join box and the ROOM pill give way to the room */
body.lobby #s-lobby, body.lobby #round-pill { visibility: hidden; }

/* ---------- the Squib sign: also the button back to the main menu ---------- */
.lx-sign { position: absolute; display: flex; align-items: center; gap: 1.3cqw; padding: 0 .6cqw; border: 0; border-radius: 1.2cqw; background: none;
  cursor: pointer; pointer-events: auto; color: inherit; font: inherit; }
.lx-title { font-family: "Sacramento", cursive; font-size: var(--ts, 5.6cqw); line-height: 1.2; color: #fff6dc; -webkit-text-stroke: .08cqw #fff6dc;
  text-shadow: 0 0 1px #fff, 0 0 .4cqw #ffe3a0, 0 0 .95cqw #ffc35a, 0 0 2cqw #ffa53a, 0 0 4cqw rgba(255,150,50,.5); animation: lx-hum 5s ease-in-out infinite; }
.lx-rule { width: max(2px, .16cqw); height: calc(var(--ts, 5.6cqw) * .5); background: #ff8cc4; box-shadow: 0 0 .6cqw #ff4f9a, 0 0 1.4cqw rgba(255,79,154,.6); }
.lx-credit { font-size: calc(var(--ts, 5.6cqw) * .14); font-weight: 500; letter-spacing: .34em; line-height: 2; text-align: left; color: #ffe6f1;
  text-shadow: 0 0 1px #fff, 0 0 .4cqw #ffb3d6, 0 0 .9cqw #ff6fae, 0 0 1.7cqw #ff4f9a; animation: lx-hum 4.4s ease-in-out .8s infinite; }
.lx-sign:hover .lx-title { filter: brightness(1.15); }
.lx-sign:focus-visible { outline: 2px solid #ffd98a; outline-offset: .4cqw; }
@keyframes lx-hum { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.1); } }

/* ---------- the room code panel ---------- */
.lx-panel { position: absolute; display: flex; flex-direction: column; gap: 1.1cqw; padding: 1.6cqw 1.7cqw; border-radius: 1.6cqw; pointer-events: auto;
  background: linear-gradient(180deg, #18101a, #0a070e); border: 1px solid rgba(224,176,74,.32);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 2.4cqw 4.6cqw -1.6cqw rgba(0,0,0,.8); }
.lx-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1cqw; }
.lx-k { font-size: .86cqw; font-weight: 600; letter-spacing: .32em; color: #ffd98a; }
.lx-row { display: flex; align-items: center; gap: 1.1cqw; }

/* the QR plaque: an ivory card set in a brushed gold frame, with light travelling slowly round the metal.
   The light stays on the frame: nothing ever moves across the code itself, so cameras can always read it. */
.lx-qr { position: relative; align-self: center; box-sizing: border-box; width: var(--qr, 15cqw); aspect-ratio: 1; padding: .7cqw; border-radius: 1.2cqw;
  background: linear-gradient(125deg, #a8701e 0%, #f3d27e 16%, #fff4cf 24%, #d9a441 36%, #8f5e18 50%, #e0b04a 64%, #fff0c0 74%, #c48d2e 86%, #a8701e 100%) 0 0 / 300% 300%;
  box-shadow: inset 0 0 0 1px rgba(255,244,207,.55), 0 0 0 1px rgba(20,12,4,.9), 0 0 0 .22cqw rgba(224,176,74,.28), 0 1.4cqw 3cqw -1cqw rgba(0,0,0,.9), 0 0 3.2cqw -.6cqw rgba(255,190,90,.5);
  animation: lx-qr-sheen 9s linear infinite; }
.lx-qr svg { display: block; width: 100%; height: 100%; border-radius: .72cqw; box-shadow: 0 0 0 1px rgba(60,36,8,.8); }
@keyframes lx-qr-sheen { to { background-position: 300% 300%; } }
/* "or", in the same neon script as the sign, between two gold hairlines */
.lx-or { display: flex; align-items: center; gap: 1cqw; margin: -.45cqw 0 -.25cqw; font-family: "Sacramento", cursive; font-size: 3cqw; -webkit-text-stroke: .03cqw #fff6dc; line-height: 1; color: #fff6dc;
  text-shadow: 0 0 .4cqw #ffe3a0, 0 0 1cqw #ffb347; }
.lx-or::before, .lx-or::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(224,176,74,.65)); }
.lx-or::after { transform: scaleX(-1); }
.lx-url { margin-top: -.5cqw; font-size: 1.35cqw; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; text-align: center; color: #fff; }
@media (prefers-reduced-motion: reduce) { .lx-qr { animation: none; } }

/* the marquee: a row of bulbs over the reels that chases while they spin and flashes on a win */
.lx-bulbs { display: flex; justify-content: space-between; padding: 0 .3cqw; margin: -.3cqw 0 -.4cqw; }
.lx-bulbs i { width: .55cqw; height: .55cqw; border-radius: 50%; background: #5a4520; box-shadow: inset 0 0 0 1px rgba(0,0,0,.4); transition: background .3s, box-shadow .3s; }
.lx-bulbs i:nth-child(odd) { background: #8a6a2a; }
.lx-panel.spinning .lx-bulbs i { animation: lx-chase .7s linear infinite; }
.lx-panel.win .lx-bulbs i { animation: lx-flash .18s steps(1) infinite; }
.lx-bulbs i:nth-child(2) { animation-delay: -.064s !important; } .lx-bulbs i:nth-child(3) { animation-delay: -.127s !important; }
.lx-bulbs i:nth-child(4) { animation-delay: -.191s !important; } .lx-bulbs i:nth-child(5) { animation-delay: -.255s !important; }
.lx-bulbs i:nth-child(6) { animation-delay: -.318s !important; } .lx-bulbs i:nth-child(7) { animation-delay: -.382s !important; }
.lx-bulbs i:nth-child(8) { animation-delay: -.445s !important; } .lx-bulbs i:nth-child(9) { animation-delay: -.509s !important; }
.lx-bulbs i:nth-child(10) { animation-delay: -.573s !important; } .lx-bulbs i:nth-child(11) { animation-delay: -.636s !important; }
@keyframes lx-chase { 0%, 25% { background: #fff4cf; box-shadow: 0 0 .5cqw #ffd98a, 0 0 1.1cqw #ffb347; } 30%, 100% { background: #5a4520; box-shadow: none; } }
@keyframes lx-flash { 0% { background: #fff4cf; box-shadow: 0 0 .6cqw #ffd98a, 0 0 1.3cqw #ffb347; } 50% { background: #ff8cc4; box-shadow: 0 0 .6cqw #ff4f9a; } }

.lx-machine { position: relative; display: flex; gap: .65cqw; padding: .5cqw; margin: 0 -.5cqw; border-radius: 1.2cqw;
  background: linear-gradient(180deg, #050307, #120c14 50%, #050307); box-shadow: inset 0 0 0 1px rgba(224,176,74,.35), inset 0 .3cqw .8cqw rgba(0,0,0,.8); }
.lx-machine::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: max(2px, .16cqw); margin-top: -1px; z-index: 2;
  background: #ff6fae; box-shadow: 0 0 .6cqw #ff4f9a, 0 0 1.3cqw rgba(255,79,154,.6); opacity: .8; }
/* a reel window shows a sliver of the letters above and below, darkened like a drum curving away */
.lx-reel { width: var(--rw); height: calc(var(--rh) * 1.45); border-radius: .8cqw; position: relative; overflow: hidden;
  background: linear-gradient(180deg, #d9c9a6 0%, #fffaf0 32%, #fffaf0 68%, #d9c9a6 100%); box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
.lx-reel::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,6,12,.85) 0%, rgba(10,6,12,.25) 22%, rgba(255,255,255,.12) 42%, transparent 50%, rgba(10,6,12,.25) 78%, rgba(10,6,12,.85) 100%); }
.lx-reel.thunk { animation: lx-thunk .28s cubic-bezier(.3,1.6,.5,1); }
@keyframes lx-thunk { 30% { transform: translateY(.35cqw); } }
.lx-strip { position: absolute; left: 0; right: 0; top: calc(var(--rh) * .225); will-change: transform; }
.lx-strip b { display: grid; place-items: center; height: var(--rh); font-size: calc(var(--rh) * .6); font-weight: 700; line-height: 1; color: #120c08; }
.lx-strip.spinning { filter: blur(.25cqw); }
.lx-panel.win .lx-reel { animation: lx-reelwin .45s ease-in-out 4 alternate; }
@keyframes lx-reelwin { to { box-shadow: inset 0 0 0 1px #fff, 0 0 1.4cqw rgba(255,210,120,.9); background: linear-gradient(180deg, #e8c46a 0%, #fff6dc 32%, #fff6dc 68%, #e8c46a 100%); } }
.lx-panel.win { animation: lx-panelwin .45s ease-in-out 4 alternate; }
@keyframes lx-panelwin { to { border-color: rgba(255,217,138,.8); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 3cqw rgba(255,190,90,.35); } }

/* the pull lever: a gold rod with a pink knob. Drag the knob down (or click it); lobby.js
   drives --pull from 0 (up) to 1 (all the way down), flipping the arm toward you past the pivot. */
.lx-lever { position: relative; flex: none; width: 2.6cqw; height: calc(var(--rh) * 1.45); border: 0; padding: 0; background: none; cursor: grab; touch-action: none; }
.lx-lever.held { cursor: grabbing; }
.lx-lever:focus-visible { outline: 2px solid #ffd98a; outline-offset: 3px; border-radius: 1cqw; }
.lx-lever .base { position: absolute; left: .45cqw; top: 50%; width: 1.7cqw; height: 2.6cqw; margin-top: -1.3cqw; border-radius: .5cqw;
  background: linear-gradient(90deg, #6b4a12, #e0b04a 45%, #a8701e 75%, #4a320c); box-shadow: 0 .3cqw .7cqw rgba(0,0,0,.6); }
.lx-lever .arm { position: absolute; left: 1.14cqw; bottom: 50%; width: .32cqw; height: 46%; border-radius: .2cqw; transform-origin: 50% 100%;
  transform: scaleY(calc(1 - var(--pull, 0) * 1.7));
  background: linear-gradient(90deg, #a8701e, #fff0c0 45%, #e0b04a 70%, #a8701e); }
/* the knob rides the rod's tip, and grows a little as it comes toward you */
.lx-lever .knob { position: absolute; left: 1.3cqw; top: calc(50% - 46% * (1 - var(--pull, 0) * 1.7)); width: 1.9cqw; height: 1.9cqw; border-radius: 50%;
  transform: translate(-50%, -50%) scale(calc(1 + var(--pull, 0) * .35));
  background: radial-gradient(circle at 35% 30%, #ffc2dd, #ff4f9a 50%, #b0225e); box-shadow: 0 0 .7cqw #ff4f9a; transition: box-shadow .2s; }
.lx-lever:hover .knob, .lx-lever.held .knob { box-shadow: 0 0 1.3cqw #ff4f9a, 0 0 2.4cqw rgba(255,79,154,.5); }

/* ---------- seats: x/y is where the guy sits; the nameplate goes under him ---------- */
.lx-seats { position: absolute; inset: 0; }
.lx-spot { position: absolute; height: 0; transform: translateX(-50%); }
.lx-seat { position: absolute; width: var(--w); height: 0; transform: translateX(-50%); }
.lx-seat .guy { position: absolute; left: 0; bottom: -.6cqw; width: 100%; }
.lx-seat.new .guy { animation: guy-sit .55s cubic-bezier(.2,.9,.3,1.4) both; }
@keyframes guy-sit { from { transform: translateY(-140%) scale(.4) rotate(-20deg); opacity: 0; } to { transform: none; opacity: 1; } }
.lx-seat.leaving .guy { animation: guy-getup .35s ease-in both; }
@keyframes guy-getup { to { transform: translateY(-120%) scale(.5) rotate(18deg); opacity: 0; } }
.lx-seat.gone .guy { opacity: .45; filter: grayscale(.6); }
.lx-plate { position: absolute; left: 50%; top: 1.2cqw; transform: translateX(-50%); display: flex; align-items: center; gap: .45cqw; white-space: nowrap;
  font-size: 1.05cqw; font-weight: 600; color: rgba(255,255,255,.9); text-shadow: 0 1px .4cqw #000; }
.lx-plate::before { content: ""; width: .5cqw; height: .5cqw; border-radius: 50%; background: var(--c); box-shadow: 0 0 .5cqw var(--c); }
.lx-plate.vip::after { content: "VIP"; font-size: .7cqw; font-weight: 700; letter-spacing: .18em; color: #2a1a08; padding: .15cqw .45cqw; border-radius: 999px; background: linear-gradient(180deg, #fff0c0, #e0b04a); }
.lx-seat.open .lx-ring { position: absolute; left: 50%; top: 0; width: 4.2cqw; height: 4.2cqw; margin: -2.1cqw 0 0 -2.1cqw; border-radius: 50%;
  display: grid; place-items: center; border: max(1px, .12cqw) dashed rgba(255,217,138,.38); font-size: .7cqw; font-weight: 600; letter-spacing: .16em; color: rgba(255,217,138,.6); }
body[data-room="bar"] .lx-seat.open .lx-ring { top: -2.6cqw; }

/* ---------- the three rooms: where the sign and the code panel sit ---------- */
body[data-room="bar"] .lx-sign { left: 1.4cqw; top: 1.4%; --ts: 4.8cqw; }
/* the room code on the left of the screen, the ways in on the right, Pib between them. Both are signs
   pinned to the wall past the ends of the shelves: brass-edged and screwed on at the corners, with light
   spilling onto the wall, and the room code sign centred on the height of the QR sign. */
body[data-room="bar"] .lx-panel { left: 1.2cqw; top: 31.8%; transform: translateY(-50%); width: 22cqw; gap: .8cqw; padding: 1.3cqw 1.4cqw 1.5cqw; --rw: 3.4cqw; --rh: 4.4cqw; border: 0; border-radius: .5cqw;
  background:
    radial-gradient(circle at .8cqw .8cqw, #f3d27e .14cqw, #6d4a14 .24cqw, transparent .28cqw),
    radial-gradient(circle at calc(100% - .8cqw) .8cqw, #f3d27e .14cqw, #6d4a14 .24cqw, transparent .28cqw),
    radial-gradient(circle at .8cqw calc(100% - .8cqw), #f3d27e .14cqw, #6d4a14 .24cqw, transparent .28cqw),
    radial-gradient(circle at calc(100% - .8cqw) calc(100% - .8cqw), #f3d27e .14cqw, #6d4a14 .24cqw, transparent .28cqw),
    linear-gradient(180deg, #1f1317, #0d080b);
  box-shadow: inset 0 0 0 .14cqw #c89a3e, inset 0 0 0 .3cqw #1a0f08, inset 0 0 0 .36cqw rgba(224,176,74,.4), 0 0 0 1px #000, .5cqw .7cqw 1.4cqw rgba(0,0,0,.75), 0 0 5cqw -.5cqw rgba(255,170,70,.4); }
body[data-room="bar"] .lx-panel .lx-head { padding-left: .6cqw; }
body[data-room="bar"] .lx-panel.lx-join { left: auto; right: 1.2cqw; top: auto; bottom: 45%; transform: none; width: 21cqw; gap: 1.1cqw; padding: 1.7cqw 1.6cqw; --qr: 17cqw; }

/* ---------- Pib at his spot: lobby.js measures it and parks the real host there (so every
   animation and flavor still applies), with the speech bubble to his upper left ---------- */
body.lobby #host, body.lobby #host.offstage { left: var(--dealer-x); bottom: var(--dealer-b); width: var(--dealer-w); transform: translateX(-50%); transition: none; }

/* ---------- the pour: Pib at the taps, and the beers on the bar ---------- */
body.lobby #host.at-taps { translate: var(--pour-x, 0) 0; transition: translate .6s ease-in-out; }
/* the flat Pib, for a machine that can't draw the 3D one (whose poses are in pib3d.js) */
body.lobby #host.tap-reach #arm-r { animation: none; transition: transform .22s ease-out; transform: rotate(-112deg) scaleY(2.5); }
body.lobby #host.tap-pull #arm-r { animation: none; transition: transform .24s ease-in; transform: rotate(-84deg) scaleY(2.2); }
body.lobby #host.tap-shove #arm-r { animation: none; transition: transform .14s ease-out; transform: rotate(-58deg) scaleY(2); }
.lx-tap { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .24s ease-in-out; }
.lx-tap.pulled { transform: rotate(-30deg); }
.lx-stream { opacity: 0; transition: opacity .12s; }
.lx-stream.on { opacity: .95; }
.lx-beers { position: absolute; inset: 0; }
.lx-beer { position: absolute; width: 2.3cqw; aspect-ratio: 40 / 48; transform: translate(-50%, -100%); filter: drop-shadow(0 .15cqw .15cqw rgba(0,0,0,.6)); }
.lx-beer svg { display: block; width: 100%; height: 100%; overflow: visible; }
.lx-beer-fill { transform-box: fill-box; transform-origin: 50% 100%; }
.lx-beer-foam { transform-box: fill-box; transform-origin: 50% 100%; }
.lx-beer.empty .lx-beer-fill, .lx-beer.empty .lx-beer-foam { transform: scaleY(0); }
.lx-beer.empty { animation: lx-beer-in .2s ease-out both; }
.lx-beer.filling .lx-beer-fill { animation: lx-beer-fill 1s ease-out both; }
.lx-beer.filling .lx-beer-foam { animation: lx-beer-foam 1s ease-out both; }
.lx-beer.landed { animation: lx-beer-land .36s ease-out; }
.lx-beer.gone { opacity: 0; transition: opacity .28s; }
@keyframes lx-beer-in { from { opacity: 0; } }
@keyframes lx-beer-fill { from { transform: scaleY(0); } }
@keyframes lx-beer-foam { 0%, 55% { transform: scaleY(0); } 100% { transform: none; } }
@keyframes lx-beer-land { 35% { transform: translate(-50%, -100%) rotate(-7deg); } 70% { transform: translate(-50%, -100%) rotate(3deg); } }
.lx-seat.cheers .guy { animation: lx-guy-cheers .5s ease-out; }
@keyframes lx-guy-cheers { 40% { transform: translateY(-16%); } }
body.lobby #bubble { left: auto; right: 82%; bottom: 82%; width: min(26vw, 46vh); min-height: 0; font-size: min(1.35vw, 2.4vh); padding: 1vw 1.3vw 1.1vw; transform-origin: 100% 100%; }

/* the top bar's buttons go quiet glass in the lobby, like the rest of the room */
body.lobby #topbar .icon-btn { font-family: "Quicksand", var(--body); font-weight: 500; letter-spacing: 0; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  .casino-room *, .casino-stage *, .casino-stage *::before, .casino-stage *::after { animation: none !important; }
}