/* Shared layout for the standalone arcade pages (roulette, coupon simulator).
   Colours, fonts and components all come from ../style.css — this file only
   handles the page-level layout that the homepage's embedded versions didn't
   need. */

:root {
  /* Used by the coupon simulator's callouts/highlights; not part of the
     main site palette, so it's scoped to the arcade pages only. */
  --amber: #f4c542;
}

.arcade-intro {
  padding: 56px 0 8px;
  text-align: center;
}

.arcade-intro .section-title-card { margin-bottom: 4px; }

.arcade-intro .section-subtitle {
  margin: 18px 0 0;
}

.arcade-stage {
  display: flex;
  justify-content: center;
  padding: 34px 0 90px;
}

/* The roulette card was designed to float inside a fixed, full-screen modal.
   Freed onto a normal page it just needs to drop that positioning and pick
   up the page's own centring instead. */
.roulette-card.is-standalone {
  position: relative;
  margin: 0 auto;
}

/* Roulette gets its own casino floor, built from the main site's red, black,
   gold and carpark photography. Everything is scoped so the coupon page and
   homepage arcade tiles keep their existing layout. */
.roulette-page main { min-height: calc(100vh - 68px); }

.roulette-hero {
  position: relative;
  min-height: 790px;
  overflow: hidden;
  isolation: isolate;
  padding: 58px 0 82px;
  background: #090506;
}

.roulette-hero-art,
.roulette-hero-scrim,
.roulette-casino-lights { position: absolute; inset: 0; }

.roulette-hero-art {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  opacity: .48;
  filter: saturate(.72) contrast(1.12);
  z-index: -3;
}

.roulette-hero-scrim {
  z-index: -2;
  background:
    radial-gradient(circle at 50% 42%, rgba(112, 0, 22, .22), transparent 40%),
    linear-gradient(90deg, rgba(6, 6, 6, .93), rgba(10, 4, 5, .62) 50%, rgba(6, 6, 6, .93)),
    linear-gradient(0deg, #0f0f0f 0, transparent 30%, rgba(0, 0, 0, .32));
}

.roulette-casino-lights {
  z-index: -1;
  opacity: .28;
  background-image: radial-gradient(circle, #ffd76a 0 2px, transparent 3px);
  background-size: 42px 42px;
  -webkit-mask-image: linear-gradient(90deg, #000, transparent 34%, transparent 66%, #000);
  mask-image: linear-gradient(90deg, #000, transparent 34%, transparent 66%, #000);
  animation: casino-twinkle 2.4s steps(2) infinite;
}

.roulette-hero-inner { position: relative; z-index: 1; }

.roulette-heading-lockup { text-align: center; margin-bottom: 30px; }

.roulette-eyebrow {
  display: inline-flex;
  padding: 5px 13px;
  margin-bottom: 10px;
  border: 1px solid rgba(255, 215, 106, .55);
  border-radius: 999px;
  background: rgba(15, 7, 8, .76);
  color: #ffd76a;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.roulette-heading-lockup h1 {
  margin: 0;
  font-size: clamp(3rem, 7.6vw, 6.7rem);
  font-weight: 950;
  line-height: .84;
  letter-spacing: -.07em;
  text-transform: uppercase;
  text-shadow: 0 8px 28px #000, 0 0 35px rgba(225, 0, 45, .28);
}

.roulette-heading-lockup h1 span { color: var(--red); }

.roulette-heading-lockup p {
  margin: 20px auto 0;
  color: #d0cccd;
  font-size: 1rem;
}

.roulette-table {
  position: relative;
  width: min(100%, 860px);
  margin: 0 auto;
  padding: 48px 110px 58px;
  border: 1px solid rgba(255, 215, 106, .38);
  border-radius: 48% 48% 24px 24px / 23% 23% 24px 24px;
  background:
    radial-gradient(ellipse at center, rgba(255,255,255,.075), transparent 55%),
    repeating-radial-gradient(ellipse at center, transparent 0 42px, rgba(255,255,255,.025) 43px 44px),
    linear-gradient(145deg, #174b34, #073020 70%);
  box-shadow: 0 24px 80px rgba(0,0,0,.72), inset 0 0 0 9px #3b190e, inset 0 0 0 12px #b47b38;
}

.roulette-table::after {
  content: "♠   ♦   CLUB CARPARK   ♥   ♣";
  position: absolute;
  inset: auto 50px 16px;
  color: rgba(255, 231, 166, .42);
  font-family: Georgia, serif;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-align: center;
}

.table-chip {
  position: absolute;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 6px dashed rgba(255,255,255,.82);
  border-radius: 50%;
  color: white;
  background: #d9002c;
  box-shadow: 0 5px 12px rgba(0,0,0,.55), inset 0 0 0 3px #760018;
  font-size: .65rem;
  font-weight: 900;
  transform: rotate(-13deg);
}

.chip-one { left: 58px; top: 31%; }
.chip-two { right: 58px; top: 24%; background: #151515; transform: rotate(16deg); }
.chip-three { right: 72px; bottom: 70px; width: 43px; height: 43px; background: #df9e20; transform: rotate(-8deg); }
.chip-four { left: 72px; bottom: 76px; width: 45px; height: 45px; background: #1767b7; transform: rotate(19deg); }
.chip-five { right: 49px; top: 52%; width: 37px; height: 37px; border-width: 5px; background: #6f2aa8; transform: rotate(-21deg); }

.chip-stack {
  position: absolute;
  z-index: 3;
  width: 58px;
  height: 45px;
  filter: drop-shadow(0 7px 5px rgba(0,0,0,.42));
}

.chip-stack i {
  position: absolute;
  left: 0;
  width: 58px;
  height: 18px;
  border: 3px dashed rgba(255,255,255,.82);
  border-radius: 50%;
  background: #cf0029;
  box-shadow: inset 0 0 0 2px #710017;
}

.chip-stack i:nth-child(1) { bottom: 0; }
.chip-stack i:nth-child(2) { bottom: 8px; }
.chip-stack i:nth-child(3) { bottom: 16px; }
.chip-stack i:nth-child(4) { bottom: 24px; }
.chip-stack-left { left: 46px; top: 52%; transform: rotate(-8deg); }
.chip-stack-right { right: 46px; bottom: 114px; transform: scale(.78) rotate(10deg); }
.chip-stack-right i { background: #161616; box-shadow: inset 0 0 0 2px #000; }

.table-cards {
  position: absolute;
  z-index: 2;
  right: 62px;
  top: 38%;
  width: 70px;
  height: 82px;
  transform: rotate(9deg);
}

.table-cards span {
  position: absolute;
  display: flex;
  flex-direction: column;
  width: 43px;
  height: 64px;
  padding: 5px;
  border: 2px solid #e7d8b6;
  border-radius: 5px;
  color: #17110c;
  background: #f4eddd;
  font: 800 .8rem/1 Georgia, serif;
  box-shadow: 0 5px 10px rgba(0,0,0,.35);
}

.table-cards span:first-child { left: 0; transform: rotate(-12deg); }
.table-cards span:last-child { right: 0; color: #b30024; transform: rotate(8deg); }
.table-cards small { margin-top: 2px; font-size: .7rem; }

.felt-bet {
  position: absolute;
  z-index: 1;
  padding: 3px 8px;
  border: 1px solid rgba(255,231,166,.2);
  color: rgba(255,231,166,.25);
  font: 800 .55rem/1.2 Arial, sans-serif;
  letter-spacing: .16em;
}

.bet-left { left: 58px; top: 24%; transform: rotate(-8deg); }
.bet-right { right: 66px; bottom: 30%; transform: rotate(7deg); }

.roulette-page .roulette-card {
  width: min(100%, 480px);
  padding: 104px 34px 32px;
  border-width: 2px;
  border-radius: 20px;
  background: linear-gradient(155deg, rgba(39, 6, 12, .98), rgba(10, 4, 5, .99));
}

.jackpot-sign {
  position: absolute;
  top: 18px;
  left: 50%;
  width: calc(100% - 42px);
  padding: 10px 18px 9px;
  transform: translateX(-50%);
  border: 3px solid #f4c542;
  border-radius: 12px;
  background: linear-gradient(#e1002d, #8f001c);
  box-shadow: inset 0 0 0 3px #680014, 0 8px 20px rgba(0,0,0,.45), 0 0 18px rgba(225,0,45,.42);
  text-transform: uppercase;
}

.jackpot-sign strong,
.jackpot-sign small { display: block; }

.jackpot-sign strong {
  color: #fff5d6;
  font-family: Georgia, serif;
  font-size: 1.38rem;
  line-height: 1;
  letter-spacing: .12em;
  text-shadow: 0 2px #630014, 0 0 8px #ffd76a;
}

.jackpot-sign small { margin-top: 5px; color: #ffd76a; font-size: .55rem; letter-spacing: .19em; }

.jackpot-bulbs { position: absolute; inset: -7px; border: 2px dotted #fff0a4; border-radius: 15px; animation: bulb-pulse .8s steps(2) infinite; }

.roulette-page .roulette-label { min-height: 1.5em; margin-bottom: 14px; }
.roulette-page .reel { border-radius: 7px; }

.reel-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 11px;
  color: #868686;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.reel-status span { width: 5px; height: 5px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 8px #4ade80; }

.roulette-page .roulette-play-link { box-shadow: 0 0 22px rgba(225,0,45,.5); }
.roulette-page .roulette-actions .btn-outline { margin-top: 0; }

.roulette-disclaimer {
  margin: 22px 0 0;
  color: #999;
  font-size: .78rem;
  font-style: italic;
  text-align: center;
}

/* Roulette now follows the same page rhythm as the coupon simulator: a
   photographic introduction, compact instructions and a separate game band. */
.roulette-page {
  background:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.07) 1px, transparent 0) 0 0/26px 26px,
    radial-gradient(ellipse 760px 500px at 90% 30%, rgba(144,109,142,.08), transparent 60%),
    var(--bg);
}

.roulette-intro {
  position: relative;
  min-height: 318px;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}

.roulette-intro .roulette-hero-art,
.roulette-intro .roulette-hero-scrim { position: absolute; inset: 0; }

.roulette-intro .roulette-hero-art {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 47%;
  opacity: 1;
  filter: saturate(.86) contrast(1.06);
  z-index: -2;
}

.roulette-intro .roulette-hero-scrim {
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(7,7,7,.9) 0%, rgba(7,7,7,.67) 43%, rgba(7,7,7,.14) 76%),
    linear-gradient(0deg, var(--bg) 0%, transparent 38%);
}

.roulette-intro-inner { width: 100%; padding-block: 26px 22px; }

.roulette-intro .roulette-heading-lockup {
  max-width: 650px;
  margin: 0;
  text-align: left;
}

.roulette-intro .roulette-eyebrow {
  padding: 0;
  margin-bottom: 7px;
  border: 0;
  background: transparent;
  color: var(--amber);
  font-size: .95rem;
  text-shadow: 0 2px 12px rgba(244,197,66,.34);
}

.roulette-intro .roulette-heading-lockup h1 {
  font-size: clamp(3.15rem, 6vw, 5.35rem);
  line-height: .88;
}

.roulette-intro .roulette-heading-lockup p {
  max-width: 570px;
  margin: 14px 0 0;
  color: var(--text-dim);
  font-size: 1.05rem;
}

.arcade-torn-edge {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 20px;
  margin-top: -1px;
  fill: var(--bg-alt);
}

.arcade-torn-edge-dark { fill: var(--bg); }

.roulette-game-band { padding: 28px 0 64px; background: var(--bg); }
.roulette-game-inner { position: relative; }

.roulette-game-band .roulette-table { max-width: 860px; }

@keyframes casino-twinkle { 50% { opacity: .14; transform: translateY(2px); } }
@keyframes bulb-pulse { 50% { opacity: .45; filter: brightness(1.8); } }

@media (max-width: 680px) {
  .roulette-hero { min-height: 720px; padding-top: 40px; }
  .roulette-heading-lockup p { max-width: 300px; font-size: .9rem; }
  .roulette-table { padding: 28px 18px 40px; border-radius: 30px 30px 18px 18px; }
  .roulette-page .roulette-card { padding: 101px 20px 25px; }
  .table-chip,
  .chip-stack,
  .table-cards,
  .felt-bet { display: none; }
  .roulette-table::after { inset-inline: 16px; font-size: .56rem; }
  .jackpot-sign strong { font-size: 1.15rem; }
  .roulette-intro { min-height: 406px; }
  .roulette-intro .roulette-hero-art { object-position: 58% center; }
  .roulette-intro .roulette-hero-scrim {
    background:
      linear-gradient(90deg, rgba(7,7,7,.9), rgba(7,7,7,.5)),
      linear-gradient(0deg, var(--bg) 0%, transparent 44%);
  }
  .roulette-intro-inner { padding: 22px 20px 18px; }
  .roulette-intro .roulette-heading-lockup h1 { font-size: clamp(3rem, 15vw, 4.15rem); }
  .roulette-intro .roulette-heading-lockup p { max-width: 325px; }
  .roulette-game-band { padding: 24px 0 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .roulette-casino-lights,
  .jackpot-bulbs { animation: none; }
}