/* ── Game-page ad rail — right-side sister-site ads ─────────────────────────
 * Ported from pokerroom.games' game-ad-rail (React) to a self-contained sheet.
 * On desktop (>=880px) the full-screen game iframe is shrunk to free a right
 * gutter; the rail fills it. On this site the ads promote the OTHER Yoda
 * sister sites (never Crash or Cash itself): Texas Hold'em (Poker Room),
 * Video Poker, Blackjack.
 *
 * Everything is scoped under .car-rail so it can't leak into the games.
 */
.car-rail { display: none; }

@media (min-width: 880px) {
  /* Free a 350px right gutter for the rail. Games come in two shapes:
     (a) iframe games (plinko, mines) — the game is an absolute iframe;
     (b) inline games (limbo, rock-paper-scissors) — the game is in-flow DIVs.
     padding-right shrinks the in-flow content (b); the explicit iframe width
     shrinks (a) since absolute elements ignore padding. The rail and the
     cover/loading overlays are absolute, so they sit in the freed gutter. */
  .car-has-rail .game-player-wrapper { box-sizing: border-box; padding-right: 326px; }
  .car-has-rail .game-player-wrapper iframe { width: calc(100% - 326px); }
  .car-has-rail .game-player-wrapper .game-cover,
  .car-has-rail .game-player-wrapper .game-loading { right: 326px; }
  .car-has-rail .car-rail {
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
    width: 326px;
    height: 100%;
    padding: 14px 14px 18px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 22px;
    overflow-y: auto;
    z-index: 30;
    background: #0d0e25; /* matches the game wrapper so the gutter blends */
  }
}

/* Carousel slot — crossfades between Video Poker and Blackjack every 30s */
.car-rail .gar-slot { width: 300px; transition: opacity 0.45s ease; }
.car-rail .gar-slot:not(.is-shown) { opacity: 0; }

/* ── Ad unit shell ── */
.car-rail .gar-ad {
  position: relative;
  width: 300px;
  flex: 0 0 auto;
  border-radius: 0;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  display: block;
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
.car-rail .gar-short { height: 166px; }
.car-rail .gar-tall { height: 248px; }
.car-rail .gar-ad:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(0, 0, 0, 0.55); filter: brightness(1.06); }
.car-rail .gar-ad:focus-visible { outline: 2px solid #ffcb47; outline-offset: 2px; }
.car-rail .gar-ad::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 22%),
    radial-gradient(120% 100% at 50% 0%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.28) 100%);
}

.car-rail .gar-body {
  position: relative; z-index: 4; height: 100%; padding: 15px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.car-rail .gar-lockup { display: flex; align-items: center; gap: 8px; }
.car-rail .gar-suit {
  width: 28px; height: 28px; border-radius: 6px; display: grid; place-items: center;
  font-size: 16px; font-weight: 900; background: rgba(0, 0, 0, 0.28); color: #fff;
}
.car-rail .gar-brand {
  font-weight: 900; font-size: 15px; letter-spacing: 0.03em; text-transform: uppercase;
}
.car-rail .gar-tagline {
  font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

/* ── Poker Room / Texas Hold'em (short, top) — replaces the Crash creative ── */
.car-rail .gar-poker {
  background:
    radial-gradient(90% 120% at 15% 18%, rgba(255, 203, 71, 0.16) 0%, transparent 55%),
    linear-gradient(150deg, #14233f 0%, #0e1830 45%, #080f22 100%);
  border-color: rgba(255, 203, 71, 0.4);
}
.car-rail .gar-poker .gar-suit { background: linear-gradient(180deg, #ffd766, #d9a12b); color: #0a1020; }
.car-rail .gar-poker .gar-brand em { font-style: normal; color: #ffcb47; }
.car-rail .gar-poker .gar-tagline { align-self: center; text-align: center; color: #ffc07a; }
.car-rail .gar-poker .gar-body { padding: 12px 12px 13px; }
/* Hero = the two hole cards (A♠ A♥) dealt on a mini poker table — an oval of
   green felt with a wooden rail, the unmistakable Texas Hold'em scene. Static;
   a faint warm glow gives it life. The oval + wood rail differ from the flat
   green felt of the Blackjack ad, and the black spade differs from the all-red
   Video Poker royal flush. */
.car-rail .gar-poker-glow {
  position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%);
  width: 270px; height: 124px; z-index: 1; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 203, 71, 0.22) 0%, transparent 72%);
  animation: garGlow 2.8s ease-in-out infinite;
}
.car-rail .gar-poker-table {
  position: relative; z-index: 2; width: 270px; height: 108px; border-radius: 50%;
  background: radial-gradient(ellipse 72% 84% at 50% 36%, #1c8150 0%, #10613a 58%, #0a4529 100%);
  box-shadow:
    inset 0 0 0 6px #7a4e26, inset 0 0 0 8px #543619,
    inset 0 7px 16px rgba(0, 0, 0, 0.4), 0 8px 18px rgba(0, 0, 0, 0.5);
  display: flex; justify-content: center; align-items: center;
}
.car-rail .gar-poker-table::before { /* faint felt inlay ring */
  content: ''; position: absolute; inset: 13px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.07);
}
/* the two hole cards — real faces, fanned, resting on the felt */
.car-rail .gar-ace {
  position: relative; z-index: 2; width: 54px; height: 76px; border-radius: 6px;
  background: linear-gradient(155deg, #fff 0%, #f2f4f8 55%, #e2e6ee 100%);
  box-shadow: 0 6px 13px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.car-rail .gar-ace.s { color: #0a0a0a; transform: rotate(-9deg); margin-right: -12px; }
.car-rail .gar-ace.h { color: #e00611; transform: rotate(9deg); margin-left: -12px; z-index: 3; }
.car-rail .gar-ace-idx { position: absolute; top: 4px; left: 5px; display: flex; flex-direction: column; align-items: center; line-height: 1; }
.car-rail .gar-ace-idx b { font-weight: 900; font-size: 16px; letter-spacing: -0.02em; }
.car-rail .gar-ace-idx svg { width: 11px; height: 11px; margin-top: 1px; fill: currentColor; display: block; }
.car-rail .gar-ace-pip { position: absolute; width: 33px; height: 33px; left: 50%; top: 58%; transform: translate(-50%, -50%); fill: currentColor; opacity: 0.95; display: block; }

/* ── Pure Video Poker (tall) — glowing royal flush ── */
.car-rail .gar-vp {
  background:
    radial-gradient(90% 70% at 50% 108%, rgba(255, 203, 71, 0.18) 0%, transparent 60%),
    linear-gradient(150deg, #5b5bf0 0%, #6d3ff0 55%, #7c3aed 100%);
  border-color: rgba(255, 203, 71, 0.35);
}
.car-rail .gar-vp-glow {
  position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%);
  width: 250px; height: 130px; z-index: 1; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 214, 102, 0.55) 0%, transparent 70%);
  animation: garGlow 2.4s ease-in-out infinite;
}
@keyframes garGlow { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
.car-rail .gar-vp-brand { color: #ffd766; font-size: 13px; letter-spacing: 0.1em; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); }
.car-rail .gar-vp-head { font-weight: 900; font-size: 25px; margin: 6px 0 0; color: #fff; letter-spacing: -0.01em; }
.car-rail .gar-vp-royal { display: flex; gap: 5px; justify-content: center; }
.car-rail .gar-vp-card {
  position: relative;
  width: 46px; height: 64px; border-radius: 6px;
  background: linear-gradient(155deg, #fff 0%, #f2f4f8 55%, #e2e6ee 100%);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  font-weight: 900; color: #e00611; line-height: 1; transform-origin: bottom center;
  animation: garDealCollect 7s ease-in-out infinite both;
  animation-delay: calc(var(--i) * 0.13s);
}
.car-rail .gar-vp-idx { position: absolute; top: 3px; left: 4px; display: flex; flex-direction: column; align-items: center; line-height: 1; }
.car-rail .gar-vp-idx b { font-weight: 900; font-size: 13px; letter-spacing: -0.03em; }
.car-rail .gar-vp-suit { width: 9px; height: 9px; margin-top: 1px; fill: currentColor; display: block; }
.car-rail .gar-vp-pip { position: absolute; width: 32px; height: 32px; left: 50%; top: 63%; transform: translate(-50%, -50%); fill: currentColor; opacity: 0.95; display: block; }

/* Shared deal→hold→collect loop (staggered by --i) */
@keyframes garDealCollect {
  0%   { opacity: 0; transform: translateY(15px) rotateY(80deg); }
  9%   { opacity: 1; transform: translateY(0) rotateY(0deg); }
  72%  { opacity: 1; transform: translateY(0) rotateY(0deg); }
  85%  { opacity: 0; transform: translateY(-16px) rotateY(-80deg); }
  100% { opacity: 0; transform: translateY(-16px) rotateY(-80deg); }
}

/* ── Free Blackjack (tall) ── */
.car-rail .gar-bj { background: radial-gradient(120% 100% at 30% 0%, #12724a 0%, #0d5f3a 45%, #073d24 100%); border-color: rgba(255, 203, 71, 0.3); }
.car-rail .gar-bj-wm { position: absolute; right: 12px; top: 6px; z-index: 0; font-weight: 900; font-size: 60px; color: rgba(255, 255, 255, 0.06); }
.car-rail .gar-bj-head { font-weight: 900; font-size: 30px; line-height: 1.05; margin: 14px 0 0; letter-spacing: -0.01em; }
.car-rail .gar-bj-head em { font-style: normal; color: #ffcb47; }
.car-rail .gar-bj-deck { position: absolute; right: -4px; bottom: 44px; z-index: 1; }
.car-rail .gar-bj-card {
  position: absolute; width: 61px; height: 85px; border-radius: 8px;
  background: linear-gradient(160deg, #fff, #f0f2f5); border: 1px solid rgba(0, 0, 0, 0.14);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.car-rail .gar-bj-idx { position: absolute; top: 4px; left: 5px; display: flex; flex-direction: column; align-items: center; line-height: 1; }
.car-rail .gar-bj-idx b { font-weight: 900; font-size: 15px; letter-spacing: -0.02em; }
.car-rail .gar-bj-suit { width: 12px; height: 12px; margin-top: 1.5px; fill: currentColor; display: block; }
.car-rail .gar-bj-pip {
  position: absolute; width: 43px; height: 43px; left: 50%; top: 59%; transform: translate(-50%, -50%);
  fill: currentColor; opacity: 0.95; display: block; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.12));
}
.car-rail .gar-bj-a { right: 60px; bottom: 0; color: #0a0a0a; animation: garBjDealCollectA 7s ease-in-out infinite both; }
.car-rail .gar-bj-j { right: 6px; bottom: 6px; color: #e00611; animation: garBjDealCollectJ 7s ease-in-out 0.14s infinite both; }
@keyframes garBjDealCollectA {
  0%   { opacity: 0; transform: translate(24px, -30px) rotate(10deg); }
  9%   { opacity: 1; transform: rotate(-12deg); }
  72%  { opacity: 1; transform: rotate(-12deg); }
  85%  { opacity: 0; transform: translate(22px, -28px) rotate(8deg); }
  100% { opacity: 0; transform: translate(22px, -28px) rotate(8deg); }
}
@keyframes garBjDealCollectJ {
  0%   { opacity: 0; transform: translate(28px, -34px) rotate(24deg); }
  9%   { opacity: 1; transform: rotate(8deg); }
  72%  { opacity: 1; transform: rotate(8deg); }
  85%  { opacity: 0; transform: translate(26px, -32px) rotate(22deg); }
  100% { opacity: 0; transform: translate(26px, -32px) rotate(22deg); }
}

@media (prefers-reduced-motion: reduce) {
  .car-rail .gar-vp-glow, .car-rail .gar-poker-glow, .car-rail .gar-chip.gold::after,
  .car-rail .gar-vp-card,
  .car-rail .gar-bj-a, .car-rail .gar-bj-j { animation: none !important; }
  .car-rail .gar-vp-card { transform: none; opacity: 1; }
  .car-rail .gar-bj-a { transform: rotate(-12deg); opacity: 1; }
  .car-rail .gar-bj-j { transform: rotate(8deg); opacity: 1; }
  .car-rail .gar-vp-glow { opacity: 0.8; }
  .car-rail .gar-slot { transition: none; }
}