/* Бонус Рулетка — page-scoped dark casino-table theme (/bonus-ruletka/ only).
   Spacing/typography come from style.css variables; the dark palette is local.
   All animation uses transform/opacity only. */

:root {
  --felt: #14532D;
  --felt-deep: #052E16;
  --rl-gold: #FBBF24;
  --rl-mint: #A7F3D0;
  --rl-line: rgba(255, 255, 255, .14);
}

/* ---------- stage / layout ---------- */

.rl-screen { position: relative; }

.rl {
  background: radial-gradient(ellipse at 50% 0%, var(--felt) 0%, var(--felt-deep) 78%);
  color: #E7F6EE;
  text-align: center;
  padding: var(--sp-8) 0 var(--sp-7);
}

.rl h1, .rl h2 { color: #fff; }
.rl h1 { font-size: var(--f-46); margin-bottom: var(--sp-2); }

.rl-kicker {
  color: var(--rl-gold);
  font: 600 var(--f-13)/1.4 var(--sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: var(--sp-3);
}

.rl-sub { color: var(--rl-mint); max-width: 560px; margin: 0 auto var(--sp-6); }

/* The main CTA is a game token: gold gradient pill, pulsing glow,
   periodic shine sweep, slowly spinning wheel icon. */
.rl .rl-big-cta {
  position: relative;
  overflow: hidden;
  font-size: var(--f-20);
  font-weight: 800;
  padding: 16px 42px;
  border: none;
  border-radius: 999px;
  color: #052E16;
  background: linear-gradient(180deg, #FFD979 0%, var(--rl-gold) 52%, #D99F1C 100%);
  box-shadow: 0 6px 26px rgba(251, 191, 36, .38);
  transition: transform .15s ease;
  animation: rl-cta-pulse 2.2s ease-in-out infinite;
}
.rl .rl-big-cta:hover { transform: translateY(-2px) scale(1.04); }
.rl .rl-big-cta::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 45%;
  left: -60%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-20deg);
  animation: rl-cta-shine 2.8s ease infinite;
}
.rl-big-cta__icon {
  display: inline-block;
  width: 23px;
  height: 23px;
  margin-right: 8px;
  vertical-align: -4px;
}
.rl-big-cta__icon svg { display: block; width: 100%; height: 100%; }
/* roulette: pocket wheel spins one way, the ball runs the other;
   the outer rim is static */
.rl-cta-wheel {
  transform-box: view-box;
  transform-origin: 50% 50%;
  animation: rl-cta-spin 5s linear infinite;
}
.rl-cta-ball {
  transform-box: view-box;
  transform-origin: 50% 50%;
  animation: rl-cta-spin 2.2s linear infinite reverse;
}
@keyframes rl-cta-shine {
  0% { left: -60%; }
  55%, 100% { left: 115%; }
}
@keyframes rl-cta-pulse {
  0%, 100% { box-shadow: 0 6px 26px rgba(251, 191, 36, .35); }
  50% { box-shadow: 0 6px 42px rgba(251, 191, 36, .65); }
}
@keyframes rl-cta-spin {
  to { transform: rotate(1turn); }
}

.rl-progress {
  display: block;
  height: 6px;
  background: var(--rl-line);
  border-radius: 3px;
  max-width: 260px;
  margin: 0 auto var(--sp-6);
  overflow: hidden;
}
.rl-progress__bar {
  display: block;
  height: 100%;
  background: var(--rl-gold);
  border-radius: 3px;
  transition: width .3s ease;
}

/* ---------- choice tiles ---------- */

.rl-tiles {
  /* fixed equal columns — every tile the same size, one aligned row */
  display: grid;
  grid-template-columns: repeat(auto-fit, 190px);
  gap: var(--sp-4);
  justify-content: center;
  max-width: 880px;
  margin: 0 auto;
}

/* display:grid above would override the hidden attribute's UA rule,
   showing both verticals' tile sets at once — keep [hidden] winning. */
.rl-tiles[hidden] { display: none; }

.rl-tile {
  background: rgba(255, 255, 255, .06);
  border: 2px solid var(--rl-line);
  border-radius: 16px;
  color: #fff;
  font: 600 var(--f-17)/1.3 var(--sans);
  padding: var(--sp-4);
  min-height: 132px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.rl-tile:hover, .rl-tile:focus-visible {
  border-color: var(--rl-gold);
  transform: translateY(-3px);
  box-shadow: 0 0 24px rgba(251, 191, 36, .25);
  outline: none;
}
.rl-tile__icon { display: block; font-size: 34px; margin-bottom: var(--sp-2); }

/* ---------- sport reveal stage (penalty & goal) ---------- */

.rl-stage {
  position: relative;
  height: 180px;
  max-width: 420px;
  margin: 0 auto var(--sp-6);
}

.rl-goal {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  height: 120px;
  border: 4px solid #fff;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  background:
    repeating-linear-gradient(90deg, transparent 0 12px, rgba(255,255,255,.22) 12px 13px),
    repeating-linear-gradient(0deg, transparent 0 12px, rgba(255,255,255,.22) 12px 13px);
}

.rl-ball {
  position: absolute;
  left: calc(50% - 170px);
  bottom: 4px;
  font-size: 34px;
}

.rl-goalflash {
  position: absolute;
  top: -26px;
  left: 50%;
  transform: translateX(-50%);
  background: #111;
  color: var(--rl-gold);
  font: 700 var(--f-15)/1 var(--sans);
  padding: 5px 12px;
  border-radius: 6px;
  opacity: 0;
}

.rl-stage.is-live .rl-ball {
  animation: rl-kick 1.4s cubic-bezier(.2, .8, .3, 1) .2s forwards;
}
.rl-stage.is-live .rl-goal { animation: rl-net .5s ease 1.35s; }
.rl-stage.is-live .rl-goalflash { animation: rl-flash .5s ease 1.5s forwards; }
.rl-stage.is-done { opacity: .35; transform: scale(.85); transition: all .4s ease; }

@keyframes rl-kick {
  to { transform: translate(150px, -70px) scale(.7); }
}
@keyframes rl-net {
  0%, 100% { transform: translateX(-50%) skewX(0); }
  40% { transform: translateX(-50%) skewX(-5deg); }
  70% { transform: translateX(-50%) skewX(3deg); }
}
@keyframes rl-flash {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* ---------- sport reveal: "impact" variant (?reveal=impact) ----------
   The ball is kicked straight at the camera: flies from the bottom, grows,
   smashes into the screen centre (squash + white flash + shockwave ring +
   stage shake), then drops away. Elements are absolute within the stage —
   no position:fixed, so the shake transform can't dislodge them. */

.rl-ball2, .rl-flash, .rl-crack, .rl-goool { display: none; }
.rl-stage--impact .rl-goal,
.rl-stage--impact .rl-ball,
.rl-stage--impact .rl-goalflash { display: none; }

.rl-stage--impact.is-live { animation: rl-shake .45s ease 1.18s; }

.rl-stage--impact.is-live .rl-ball2 {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  /* vector ball — crisp at any size (emoji glyphs are bitmaps and pixelate) */
  width: clamp(200px, 38vmin, 320px);
  height: clamp(200px, 38vmin, 320px);
  z-index: 4;
  animation: rl-freekick 1.4s cubic-bezier(.35, .1, .5, 1) .1s both;
}
.rl-stage--impact.is-live .rl-ball2 svg {
  display: block;
  width: 100%;
  height: 100%;
}

.rl-stage--impact.is-live .rl-crack {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(420px, 80vmin, 720px);
  height: clamp(420px, 80vmin, 720px);
  z-index: 5;
  pointer-events: none;
  animation: rl-crack-in 3.4s ease 1.21s both;
}

.rl-stage--impact.is-live .rl-goool {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 6;
  font: 900 clamp(44px, 9vmin, 84px)/1 var(--sans);
  letter-spacing: .04em;
  color: var(--rl-gold);
  -webkit-text-stroke: 2px #052E16;
  text-shadow: 0 4px 24px rgba(0, 0, 0, .5);
  white-space: nowrap;
  pointer-events: none;
  animation: rl-goool-slam 3s cubic-bezier(.2, 1.4, .4, 1) 1.5s both;
}

.rl-stage--impact.is-live .rl-flash {
  display: block;
  position: absolute;
  left: -100vw;
  right: -100vw;
  top: -60vh;
  bottom: -60vh;
  background: #fff;
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  animation: rl-whiteout .5s ease 1.2s both;
}

/* Free kick, hit direct: placed low-left, one sharp rising touch, then a
   straight drive into the screen centre. */
@keyframes rl-freekick {
  0%   { transform: translate(calc(-50% - 200px), 170px) scale(.06) rotate(0turn); opacity: 1; }
  10%  { transform: translate(calc(-50% - 190px), 165px) scale(.07) rotate(.15turn); }
  45%  { transform: translate(calc(-50% - 70px), -30px) scale(.32) rotate(1.4turn); }
  80%  { transform: translate(-50%, -50%) scale(1) rotate(2.6turn); opacity: 1; }
  85%  { transform: translate(-50%, -50%) scale(1.1, .87) rotate(2.6turn); }
  90%  { transform: translate(-50%, -50%) scale(1) rotate(2.6turn); opacity: 1; }
  100% { transform: translate(-50%, 110px) scale(.42) rotate(2.8turn); opacity: 0; }
}
@keyframes rl-crack-in {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.55); }
  3%   { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
  5%   { transform: translate(-50%, -50%) scale(1); }
  90%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}
@keyframes rl-goool-slam {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(3); }
  14%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  19%  { transform: translate(-50%, -50%) scale(1.08); }
  24%  { transform: translate(-50%, -50%) scale(1); }
  90%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(.92); }
}
@keyframes rl-whiteout {
  0%   { opacity: 0; }
  25%  { opacity: .75; }
  100% { opacity: 0; }
}
@keyframes rl-shake {
  0%, 100% { transform: none; }
  20% { transform: translate(-8px, 4px); }
  40% { transform: translate(7px, -5px); }
  60% { transform: translate(-5px, 3px); }
  80% { transform: translate(3px, -2px); }
}

/* ---------- result cards (deal + flip) ---------- */

.rl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 300px));
  justify-content: center;
  gap: var(--sp-5);
  margin: 0 auto var(--sp-6);
  /* scrollIntoView lands here after the reveal — headroom keeps the
     fallback note above the cards in view without a dead gap. */
  scroll-margin-top: clamp(90px, 13vh, 140px);
}

.rl-card {
  perspective: 900px;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .4s ease, transform .4s ease;
}
.rl-card.is-dealt { opacity: 1; transform: none; }

.rl-card__inner {
  position: relative;
  min-height: 330px;
  transform-style: preserve-3d;
  transform: rotateY(180deg);
  transition: transform .6s ease;
}
.rl-card.is-revealed .rl-card__inner { transform: rotateY(0); }

.rl-card__back, .rl-card__front {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.rl-card__back {
  transform: rotateY(180deg);
  background: repeating-linear-gradient(45deg, #B3261E 0 8px, #7F1D1D 8px 16px);
  border: 3px solid var(--rl-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 46px;
}
.rl-card__front {
  background: var(--surface);
  color: var(--ink-70);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  box-shadow: var(--shadow);
}
/* The site-wide dark logo chip (brand__logo, style.css) — sized for the card.
   The logo PNGs are light variants drawn for dark backgrounds. */
.rl-card .rl-card__logo { width: 140px; height: 64px; }
.rl-card__headline { font: 700 var(--f-20)/1.3 var(--serif); color: var(--ink); margin: 0; }
.rl-card__terms { font-size: var(--f-13); color: var(--ink-40); margin: 0; }
.rl-card__review { font-size: var(--f-13); color: var(--emerald); }
.rl-card__legal { font-size: 11px; color: var(--ink-40); margin: 0; }

/* Hover: lift the revealed card and rim it in gold. */
.rl-card__front { transition: box-shadow .2s ease; }
.rl-card.is-revealed:hover { transform: translateY(-6px); }
.rl-card.is-revealed:hover .rl-card__front {
  box-shadow: 0 14px 34px rgba(0, 0, 0, .35), 0 0 0 2px var(--rl-gold);
}

/* category chips on the results screen — in-place filter switch */
.rl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: center;
  margin-bottom: var(--sp-5);
}
.rl-chips[hidden] { display: none; }
.rl-chip {
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--rl-line);
  border-radius: 999px;
  color: var(--rl-mint);
  font: 500 var(--f-13)/1 var(--sans);
  padding: 8px 16px;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.rl-chip:hover { border-color: var(--rl-gold); color: #fff; }
.rl-chip--vertical {
  border-color: rgba(255, 255, 255, .4);
  color: #fff;
  font-weight: 700;
  margin-right: var(--sp-2);
}
.rl-chip.is-active {
  background: var(--rl-gold);
  border-color: var(--rl-gold);
  color: #052E16;
  font-weight: 700;
}

.rl-fallback { color: var(--rl-mint); margin-bottom: var(--sp-4); }
.rl-error { color: var(--rl-mint); }
.rl-error a { color: var(--rl-gold); }
.rl-legal { font-size: var(--f-13); color: var(--rl-mint); }
.rl .btn--ghost { color: var(--rl-mint); border-color: var(--rl-line); }
.rl .btn--ghost:hover { color: var(--rl-gold); border-color: var(--rl-gold); }
.rl-legal a { color: var(--rl-mint); text-decoration: underline; }

.rl-actions {
  display: flex;
  gap: var(--sp-3);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--sp-3);
}
/* „Сподели“ — secondary next to the gold restart; mint outline on felt. */
.rl .rl-share {
  border-color: var(--rl-mint);
  color: var(--rl-mint);
  font-weight: 600;
  padding: 12px 26px;
}
.rl .rl-share:hover { border-color: var(--rl-gold); color: var(--rl-gold); }

/* „Завърти пак“ — promoted to a solid gold pill so it reads as the next move. */
.rl .rl-restart {
  background: var(--rl-gold);
  border-color: var(--rl-gold);
  color: #052E16;
  font-weight: 700;
  padding: 12px 30px;
}
.rl .rl-restart:hover {
  background: #FFD34D;
  border-color: #FFD34D;
  color: #052E16;
  transform: translateY(-2px);
}

.rl-noscript { text-align: left; max-width: 680px; margin: 0 auto; }
.rl-noscript a { color: var(--rl-gold); }

/* ---------- SEO section (back to paper) ---------- */

.rl-seo { background: var(--paper); padding: var(--sp-8) 0; }
.rl-seo__inner { max-width: 760px; }
.rl-seo__links { margin-top: var(--sp-6); }

/* ---------- mobile & motion ---------- */

@media (max-width: 700px) {
  .rl h1 { font-size: var(--f-34); }
  .rl-tiles { grid-template-columns: repeat(2, minmax(140px, 1fr)); max-width: 420px; }
  .rl-tile { min-height: 118px; }
  .rl-stage { transform: scale(.85); }
  .rl-grid { grid-template-columns: 1fr; }
}

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