/* Reels engine (bq-rl-*): a framed 5×3 reel window with line overlays,
   win pops, a feature HUD and a celebration card. Motion uses transform,
   opacity and filter only; the reel strips move with translateY. */

.bq-rl {
  --rl-accent: #5fe3b5;
  --rl-accent-soft: color-mix(in srgb, var(--rl-accent) 28%, transparent);
  --rl-accent-ink: color-mix(in srgb, var(--rl-accent) 55%, white);
  --rl-radius: clamp(16px, 2.6vw, 28px);
  position: relative;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  gap: 10px;
  container-type: inline-size;
  font-family: var(--bq-font-display);
  color: var(--bq-ink);
  -webkit-tap-highlight-color: transparent;
}

/* ------------------------------------------------------------ top bar */
.bq-rl-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 32px;
  overflow: hidden;
}

.bq-rl-hud {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.bq-rl-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 12px;
  border-radius: var(--bq-r-pill);
  background: rgba(3, 14, 16, 0.62);
  border: 1px solid var(--bq-line-2);
  font-size: clamp(12px, 1.7cqi, 14px);
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.bq-rl-chip--hint { color: var(--bq-muted); }
.bq-rl-chip--strong {
  background: linear-gradient(180deg, color-mix(in srgb, var(--rl-accent) 42%, #061719), color-mix(in srgb, var(--rl-accent) 22%, #061719));
  border-color: color-mix(in srgb, var(--rl-accent) 70%, transparent);
}
.bq-rl-chip--gold { color: var(--bq-gold); border-color: rgba(255, 207, 90, 0.45); }

.bq-rl-chip__sym {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-left: -6px;
}

.bq-rl-chip__sym .bq-rl-img { width: 22px; height: 22px; filter: none; }
.bq-rl-chip__sym .bq-rl-tile { width: 20px; font-size: 11px; border-radius: 6px; }

/* ------------------------------------------------------------ frame + glass */
.bq-rl-frame {
  position: relative;
  padding: clamp(5px, 1.2cqi, 11px);
  border-radius: var(--rl-radius);
  background:
    linear-gradient(165deg,
      color-mix(in srgb, var(--rl-accent) 85%, white) 0%,
      color-mix(in srgb, var(--rl-accent) 55%, #0a2124) 22%,
      color-mix(in srgb, var(--rl-accent) 22%, #061719) 55%,
      color-mix(in srgb, var(--rl-accent) 60%, #0a2124) 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.35) inset,
    0 0 0 1px rgba(0, 0, 0, 0.35),
    0 26px 60px rgba(0, 0, 0, 0.55),
    0 0 46px color-mix(in srgb, var(--rl-accent) 22%, transparent);
  transition: box-shadow 400ms var(--bq-ease-out);
}

/* Soft sheen across the top rail. */
.bq-rl-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 18%);
  pointer-events: none;
}

/* Feature glow: a slow, low-contrast breathing ring (decorative). */
.bq-rl-frame::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: calc(var(--rl-radius) + 3px);
  box-shadow: 0 0 0 2px var(--bq-gold), 0 0 34px 6px color-mix(in srgb, var(--bq-gold) 45%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms var(--bq-ease-out);
}

.bq-rl-frame.is-feature::after {
  opacity: 1;
  animation: bq-rl-breathe 2.4s ease-in-out infinite alternate;
}

.bq-rl-glass {
  position: relative;
  padding: clamp(4px, 0.9cqi, 9px);
  border-radius: calc(var(--rl-radius) - 6px);
  background:
    radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--rl-accent) 16%, transparent), transparent 70%),
    linear-gradient(180deg, rgba(3, 13, 15, 0.94), rgba(8, 27, 30, 0.9));
  box-shadow: inset 0 3px 14px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}

.bq-rl-window {
  position: relative;
  aspect-ratio: 5 / 3;
  user-select: none;
}

.bq-rl-reels {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.bq-rl-reel {
  position: relative;
  overflow: hidden;
  margin: 0 clamp(1px, 0.35cqi, 3px);
  border-radius: clamp(8px, 1.4cqi, 14px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025) 50%, rgba(255, 255, 255, 0.07));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

/* Depth: the window curves away at the top and bottom edges. */
.bq-rl-reel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(2, 10, 12, 0.55), transparent 16%, transparent 84%, rgba(2, 10, 12, 0.55));
  pointer-events: none;
}

.bq-rl-strip {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--n, 3) * 100% / 3);
  display: flex;
  flex-direction: column;
  will-change: transform;
}

.bq-rl-strip.is-moving { filter: blur(1.1px) saturate(1.1); }

.bq-rl-cell {
  flex: 1 1 0;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 7%;
}

.bq-rl-sym {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 18%;
  transition: opacity 220ms var(--bq-ease-out), transform 220ms var(--bq-ease-out);
}

.bq-rl-sym::before {
  content: "";
  position: absolute;
  inset: 2%;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 45%, var(--rl-accent-soft), transparent 68%);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--rl-accent) 75%, white);
  opacity: 0;
  transition: opacity 200ms var(--bq-ease-out);
}

.bq-rl-img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5));
  pointer-events: none;
}

.bq-rl-cell.is-dim .bq-rl-sym { opacity: 0.34; transform: scale(0.93); }

.bq-rl-cell.is-win .bq-rl-sym { animation: bq-rl-pop 760ms var(--bq-ease-out); }
.bq-rl-cell.is-win .bq-rl-sym::before { opacity: 1; }
.bq-rl-cell.is-win .bq-rl-img { filter: drop-shadow(0 0 10px var(--rl-accent)) drop-shadow(0 4px 6px rgba(0, 0, 0, 0.45)) brightness(1.08); }

.bq-rl-cell.is-land .bq-rl-sym { animation: bq-rl-land 420ms var(--bq-ease-out); }

.bq-rl-cell.is-feat .bq-rl-sym { animation: bq-rl-feat 900ms var(--bq-ease-out) 2; }
.bq-rl-cell.is-feat .bq-rl-sym::before {
  opacity: 1;
  background: radial-gradient(circle at 50% 45%, rgba(255, 207, 90, 0.45), transparent 70%);
  box-shadow: inset 0 0 0 2px var(--bq-gold);
}
.bq-rl-cell.is-feat .bq-rl-img { filter: drop-shadow(0 0 12px var(--bq-gold)) brightness(1.1); }

/* Fallback when a symbol image is missing: a lettered, coloured tile. */
.bq-rl-tile {
  --t1: #3a6f78;
  --t2: #1b3e44;
  position: relative;
  display: grid;
  place-items: center;
  width: 84%;
  aspect-ratio: 1;
  border-radius: 24%;
  background: linear-gradient(160deg, var(--t1), var(--t2));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.32), inset 0 -4px 0 rgba(0, 0, 0, 0.25), 0 6px 14px rgba(0, 0, 0, 0.45);
  color: #fff;
  font-family: var(--bq-font-display);
  font-size: clamp(16px, 5cqi, 42px);
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
}

.bq-rl-tile[data-k="h1"] { --t1: #ff8a5c; --t2: #b8342a; }
.bq-rl-tile[data-k="h2"] { --t1: #ffd36b; --t2: #c27a12; }
.bq-rl-tile[data-k="h3"] { --t1: #7be0a8; --t2: #1f7f5a; }
.bq-rl-tile[data-k="h4"] { --t1: #ff9ed1; --t2: #a83c7a; }
.bq-rl-tile[data-k="l1"] { --t1: #6cc8ff; --t2: #2361a8; }
.bq-rl-tile[data-k="l2"] { --t1: #c6a3ff; --t2: #5e3aa8; }
.bq-rl-tile[data-k="l3"] { --t1: #9fd8d0; --t2: #2f6d68; }
.bq-rl-tile[data-k="wild"] { --t1: #fff1b8; --t2: #e0a21a; color: #3a2400; text-shadow: none; }
.bq-rl-tile[data-k="feat"] { --t1: var(--rl-accent-ink); --t2: color-mix(in srgb, var(--rl-accent) 60%, #061719); }

/* ------------------------------------------------------------ lines + tags */
.bq-rl-linelayer {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.bq-rl-line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 6px var(--rl-accent));
}

.bq-rl-line polyline {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bq-rl-line__glow { stroke: var(--rl-accent); stroke-width: 10px; opacity: 0.32; }
.bq-rl-line__core { stroke: var(--rl-accent-ink); stroke-width: 3.5px; }

.bq-rl-tag {
  position: absolute;
  z-index: 4;
  transform: translate(-50%, -50%);
  padding: 4px 12px;
  border-radius: var(--bq-r-pill);
  background: linear-gradient(180deg, #ffe08a, var(--bq-gold) 55%, #f0a92c);
  color: var(--bq-on-gold);
  font-size: clamp(12px, 2.3cqi, 19px);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45), 0 0 0 2px rgba(43, 29, 0, 0.35);
  pointer-events: none;
}

/* ------------------------------------------------------------ line readout */
.bq-rl-bar {
  margin: 0;
  min-height: 1.5em;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(13px, 1.9cqi, 16px);
  font-weight: 800;
  color: var(--bq-muted);
  font-variant-numeric: tabular-nums;
  transition: color 200ms var(--bq-ease-out);
}

.bq-rl-bar.is-on { color: var(--rl-accent-ink); }

/* ------------------------------------------------------------ celebration card */
.bq-rl-over {
  position: absolute;
  inset: -6px;
  z-index: 10;
  display: grid;
  place-items: center;
  border-radius: var(--rl-radius);
  background: radial-gradient(80% 70% at 50% 50%, rgba(4, 18, 20, 0.72), rgba(2, 9, 10, 0.88));
  cursor: pointer;
  overflow: hidden;
}

.bq-rl-card {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 4px;
  max-width: 92%;
  padding: clamp(14px, 3.6cqi, 34px) clamp(18px, 5cqi, 52px);
  border-radius: clamp(18px, 3cqi, 28px);
  text-align: center;
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--rl-accent) 26%, transparent), transparent 70%),
    linear-gradient(180deg, rgba(14, 40, 44, 0.92), rgba(5, 19, 21, 0.94));
  border: 1px solid color-mix(in srgb, var(--rl-accent) 55%, transparent);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 24px 60px rgba(0, 0, 0, 0.6), 0 0 50px var(--rl-accent-soft);
}

.bq-rl-card p { margin: 0; }

.bq-rl-card__kick {
  font-size: clamp(12px, 1.9cqi, 15px);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rl-accent-ink);
}

.bq-rl-card__title {
  font-size: clamp(32px, 8.4cqi, 78px);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.01em;
  background: linear-gradient(180deg, #fff8dc 0%, var(--bq-gold) 52%, #ff9a3c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 0 rgba(60, 25, 0, 0.55)) drop-shadow(0 0 22px rgba(255, 207, 90, 0.35));
}

.bq-rl-over[data-mood="feature"] .bq-rl-card__title {
  background-image: linear-gradient(180deg, #ffffff 0%, var(--rl-accent-ink) 50%, var(--rl-accent) 100%);
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.45)) drop-shadow(0 0 22px var(--rl-accent-soft));
}

.bq-rl-over[data-mood="feature"] .bq-rl-card__title { font-size: clamp(28px, 6.6cqi, 62px); }
.bq-rl-over[data-mood="tier-3"] .bq-rl-card__title { font-size: clamp(34px, 9.4cqi, 88px); }

.bq-rl-card__num {
  font-size: clamp(28px, 7.5cqi, 64px);
  font-weight: 900;
  line-height: 1.05;
  color: #fff;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.45), 0 0 26px var(--rl-accent-soft);
}

.bq-rl-card__sub {
  max-width: 44ch;
  font-family: var(--bq-font-body);
  font-size: clamp(13px, 1.9cqi, 16px);
  font-weight: 600;
  color: var(--bq-muted);
}

.bq-rl-card__btn { margin-top: 10px; }

.bq-rl-confetti {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.bq-rl-bit {
  position: absolute;
  top: 46%;
  width: 9px;
  height: 14px;
  border-radius: 2px;
  opacity: 0;
}

.bq-rl-bit--1 { width: 5px; height: 18px; }
.bq-rl-bit--2 { width: 11px; height: 11px; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }

/* ------------------------------------------------------------ deck buttons */
.bq-rl-go { min-width: 168px; }
.bq-rl-fast[aria-pressed="true"],
.bq-rl-auto[aria-pressed="true"] {
  border-color: var(--bq-gold);
  color: var(--bq-gold);
  background: rgba(255, 207, 90, 0.08);
}

/* ------------------------------------------------------------ small screens */
@container (max-width: 560px) {
  .bq-rl-hud .bq-rl-chip:nth-child(2) { display: none; }
  .bq-rl-chip { padding: 0 9px; min-height: 26px; }
  .bq-rl-cell { padding: 6%; }
  .bq-rl-line__glow { stroke-width: 7px; }
  .bq-rl-line__core { stroke-width: 2.5px; }
  .bq-rl-tag { padding: 2px 8px; }
  .bq-rl.is-feature .bq-rl-top > .bq-rl-chip:first-child { display: none; }
}

@container (max-width: 400px) {
  .bq-rl-chip--hint span:last-child { display: none; }
  .bq-rl-chip--hint::after { content: "3+"; }
}

@media (max-width: 760px) {
  .bq-rl-go { min-width: 0; }
}

.bq-theatre.is-theatre .bq-rl { max-width: min(1100px, calc((100dvh - 260px) * 1.6)); }

/* ------------------------------------------------------------ keyframes */
@keyframes bq-rl-pop {
  0% { transform: scale(1); }
  22% { transform: scale(1.17); }
  45% { transform: scale(0.98); }
  70% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

@keyframes bq-rl-land {
  0% { transform: scale(0.9); }
  55% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

@keyframes bq-rl-feat {
  0% { transform: scale(1) rotate(0deg); }
  30% { transform: scale(1.2) rotate(-4deg); }
  60% { transform: scale(1.04) rotate(3deg); }
  100% { transform: scale(1) rotate(0deg); }
}

@keyframes bq-rl-breathe {
  from { opacity: 0.55; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .bq-rl-strip.is-moving { filter: none; }
  .bq-rl-frame.is-feature::after { animation: none; }
}