/* =====================================================================
   SLOTS — 5×3 video slot
   Violet/gold cabinet · spinning reels · neon paylines · win pulse
   ===================================================================== */

.screen--slots {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ---------- Cabinet — ornate frame around the reels ----------
   We render the cabinet as nested layers so it gets a real depth feel:
   outer gold trim → inner dark panel → reels with their own dark backdrop. */
.slotsCabinet {
  position: relative;
  border-radius: 22px;
  padding: 4px;
  background:
    linear-gradient(135deg, #ffd56b 0%, #b8771f 28%, #43240a 50%, #b8771f 72%, #ffd56b 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -2px 4px rgba(0,0,0,.4),
    0 14px 38px -8px rgba(144,86,255,.32),
    0 6px 18px -4px rgba(0,0,0,.6);
}
.slotsCabinet__frame {
  position: relative;
  border-radius: 18px;
  background:
    radial-gradient(circle 240px at 50% 0%, rgba(144,86,255,.22), transparent 75%),
    linear-gradient(180deg, #0e0820 0%, #07041a 100%);
  padding: 12px;
  overflow: hidden;
}
/* Dim runner lights inside the cabinet — gives 'lit' feeling */
.slotsCabinet__frame::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 8% 6%, var(--gold), transparent 40%),
    radial-gradient(1.5px 1.5px at 92% 6%, var(--gold), transparent 40%),
    radial-gradient(1.5px 1.5px at 8% 94%, var(--violet), transparent 40%),
    radial-gradient(1.5px 1.5px at 92% 94%, var(--violet), transparent 40%);
  opacity: .8;
}

/* ---------- Reels row ---------- */
.slotsReels {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  z-index: 1;
}

/* Single reel: viewport showing 3 visible cells */
.slotsReel {
  --cell-h: 64px;
  position: relative;
  height: calc(var(--cell-h) * 3);
  overflow: hidden;
  border-radius: 12px;
  background:
    linear-gradient(180deg, #15092e 0%, #0a051c 100%);
  border: 1px solid rgba(255,255,255,.06);
  box-shadow:
    inset 0 2px 10px rgba(0,0,0,.55),
    inset 0 0 0 1px rgba(255,205,60,.06);
}
/* Subtle horizontal dividers between the 3 visible cells — like Vegas glass lines */
.slotsReel::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to bottom,
      transparent calc(33.33% - 1px),
      rgba(255,255,255,.04) 33.33%,
      transparent calc(33.33% + 1px),
      transparent calc(66.66% - 1px),
      rgba(255,255,255,.04) 66.66%,
      transparent calc(66.66% + 1px));
  z-index: 4;
}
/* Top/bottom shadows soften the cut-off symbols entering the viewport */
.slotsReel::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background:
    linear-gradient(180deg, rgba(7,4,26,.85) 0%, transparent 12%, transparent 88%, rgba(7,4,26,.85) 100%);
}

/* The vertical strip that we translate during the spin */
.slotsReel__strip {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  flex-direction: column;
  will-change: transform;
}
.slotsReel__strip--spinning {
  transition: transform 2s cubic-bezier(0.18, 0.94, 0.21, 1.02);
}

/* A symbol cell on the strip */
.slotsCell {
  height: var(--cell-h);
  display: grid;
  place-items: center;
  font-size: 36px;
  line-height: 1;
  user-select: none;
  position: relative;
}
.slotsCell--win {
  z-index: 2;
  animation: slotsWinPulse 1s ease-in-out infinite;
}
.slotsCell--win::before {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 10px;
  background: radial-gradient(circle, rgba(255,205,60,.45) 0%, rgba(255,120,0,.1) 60%, transparent 100%);
  z-index: -1;
}
@keyframes slotsWinPulse {
  0%, 100% { transform: scale(1);    filter: drop-shadow(0 0 6px var(--gold)); }
  50%      { transform: scale(1.15); filter: drop-shadow(0 0 16px var(--gold-hi)); }
}

/* ---------- Payline overlay (SVG drawn on top of reels) ---------- */
.slotsPaylines {
  position: absolute;
  inset: 12px;
  width: calc(100% - 24px);
  height: calc(100% - 24px);
  pointer-events: none;
  z-index: 2;
}
.slotsPayline__path {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px currentColor);
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  animation: slotsLineDraw .6s ease-out forwards;
}
@keyframes slotsLineDraw {
  to { stroke-dashoffset: 0; }
}

/* ---------- Last-spin compact win chips below cabinet ---------- */
.slotsLastChips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 24px;
  padding: 0 2px;
}
.slotsChip {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255,205,60,.08);
  border: 1px solid rgba(255,205,60,.3);
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.slotsChip__sym { font-family: var(--display); font-size: 12px; }

/* ---------- Win banner (count-up overlay) ---------- */
.slotsWinBanner {
  position: relative;
  text-align: center;
  margin-top: 12px;
  padding: 14px 16px;
  border-radius: var(--r-inner);
  background:
    radial-gradient(circle 220px at 50% 50%, rgba(255,205,60,.22), transparent 70%),
    linear-gradient(180deg, rgba(255,205,60,.06) 0%, rgba(255,120,0,.06) 100%);
  border: 1px solid rgba(255,205,60,.4);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    0 6px 22px -8px rgba(255,205,60,.45);
  overflow: hidden;
  animation: slotsBannerIn .3s var(--ease-back);
}
/* Rotating golden rays behind the amount — only visible on big-win variant */
.slotsWinBanner__rays {
  position: absolute;
  inset: -50%;
  pointer-events: none;
  background: conic-gradient(
    from 0deg,
    transparent 0deg, rgba(255,205,60,.12) 8deg, transparent 16deg,
    transparent 32deg, rgba(255,205,60,.12) 40deg, transparent 48deg,
    transparent 64deg, rgba(255,205,60,.12) 72deg, transparent 80deg,
    transparent 96deg, rgba(255,205,60,.12) 104deg, transparent 112deg,
    transparent 128deg, rgba(255,205,60,.12) 136deg, transparent 144deg,
    transparent 160deg, rgba(255,205,60,.12) 168deg, transparent 176deg,
    transparent 192deg, rgba(255,205,60,.12) 200deg, transparent 208deg,
    transparent 224deg, rgba(255,205,60,.12) 232deg, transparent 240deg,
    transparent 256deg, rgba(255,205,60,.12) 264deg, transparent 272deg,
    transparent 288deg, rgba(255,205,60,.12) 296deg, transparent 304deg,
    transparent 320deg, rgba(255,205,60,.12) 328deg, transparent 336deg,
    transparent 352deg
  );
  opacity: 0;
  z-index: 0;
}
/* Floating sparkle dots around the amount */
.slotsWinBanner__sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
}
.slotsWinBanner__sparkles span {
  position: absolute;
  width: 4px; height: 4px;
  background: #fff8d0;
  border-radius: 50%;
  box-shadow: 0 0 6px var(--gold-hi), 0 0 12px var(--gold);
}
.slotsWinBanner__sparkles span:nth-child(1) { top: 14%; left: 8%;  animation: slotsSparkle 1.6s ease-in-out infinite .0s; }
.slotsWinBanner__sparkles span:nth-child(2) { top: 22%; left: 22%; animation: slotsSparkle 1.6s ease-in-out infinite .2s; }
.slotsWinBanner__sparkles span:nth-child(3) { top: 18%; right: 14%;animation: slotsSparkle 1.6s ease-in-out infinite .35s; }
.slotsWinBanner__sparkles span:nth-child(4) { top: 65%; left: 12%; animation: slotsSparkle 1.6s ease-in-out infinite .5s; }
.slotsWinBanner__sparkles span:nth-child(5) { top: 72%; right: 18%;animation: slotsSparkle 1.6s ease-in-out infinite .65s; }
.slotsWinBanner__sparkles span:nth-child(6) { top: 38%; left: 5%;  animation: slotsSparkle 1.6s ease-in-out infinite .8s; }
.slotsWinBanner__sparkles span:nth-child(7) { top: 50%; right: 7%; animation: slotsSparkle 1.6s ease-in-out infinite .95s; }
.slotsWinBanner__sparkles span:nth-child(8) { top: 80%; left: 48%; animation: slotsSparkle 1.6s ease-in-out infinite 1.1s; }
@keyframes slotsSparkle {
  0%, 100% { transform: scale(0); opacity: 0; }
  40%      { transform: scale(1.4); opacity: 1; }
  60%      { transform: scale(1);   opacity: .9; }
}
/* Big-win variant — switches on for wins above the threshold (set by JS) */
.slotsWinBanner--big {
  border-color: rgba(255,205,60,.7);
  background:
    radial-gradient(circle 260px at 50% 50%, rgba(255,205,60,.32), transparent 70%),
    linear-gradient(180deg, rgba(255,205,60,.12) 0%, rgba(255,120,0,.12) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 10px 36px -8px rgba(255,205,60,.6),
    0 0 0 1px rgba(255,205,60,.25);
  animation: slotsBannerInBig .5s var(--ease-back), slotsBigPulse 1.4s ease-in-out 0.5s infinite;
}
.slotsWinBanner--big .slotsWinBanner__rays {
  opacity: 1;
  animation: slotsRaysSpin 8s linear infinite;
}
.slotsWinBanner--big .slotsWinBanner__sparkles { opacity: 1; }
.slotsWinBanner--big .slotsWinBanner__amount {
  font-size: 44px;
}
.slotsWinBanner--big .slotsWinBanner__label {
  letter-spacing: .32em;
  color: var(--gold-hi);
}
@keyframes slotsBannerInBig {
  0%   { transform: scale(.7); opacity: 0; }
  60%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}
@keyframes slotsBigPulse {
  50% {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.22),
      0 14px 46px -6px rgba(255,205,60,.75),
      0 0 0 1px rgba(255,205,60,.35);
  }
}
@keyframes slotsRaysSpin {
  to { transform: rotate(360deg); }
}
@keyframes slotsBannerIn {
  from { transform: scale(.9); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.slotsWinBanner__label {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 2px;
}
.slotsWinBanner__amount {
  font-family: var(--display);
  font-weight: 900;
  font-size: 32px;
  line-height: 1;
  letter-spacing: -.02em;
  font-feature-settings: 'tnum';
  background: linear-gradient(180deg, #fff, var(--gold) 50%, var(--gold-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 12px var(--gold-glow));
}
/* Pop-in flash applied each time a win is rendered. Keeps the amount always
   correctly shown (no count-up race with the value sitting at 0 mid-anim). */
.slotsWinBanner__amount--flash {
  animation: slotsAmountPop .45s var(--ease-back);
}
@keyframes slotsAmountPop {
  0%   { transform: scale(.6); filter: drop-shadow(0 2px 18px var(--gold-hi)); }
  60%  { transform: scale(1.18); }
  100% { transform: scale(1); filter: drop-shadow(0 2px 12px var(--gold-glow)); }
}
.slotsWinBanner__sub {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-hi);
  font-weight: 700;
  margin-top: 2px;
}

/* ---------- Controls (bet input + SPIN) ---------- */
.slotsControls {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 8px;
  align-items: stretch;
}
.slotsBet {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-inner);
  padding: 8px 10px;
}
.slotsBet__label {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 700;
  margin-bottom: 6px;
}
.slotsBet__row {
  display: grid;
  grid-template-columns: 32px 1fr 32px;
  gap: 6px;
  align-items: stretch;
  margin-bottom: 6px;
}
.slotsBet__step {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  color: var(--text-2);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 12px;
  transition: background .12s;
}
.slotsBet__step:hover { background: rgba(255,255,255,.08); }
.slotsBet__input {
  background: var(--bg-1);
  border: 1px solid var(--border-2);
  border-radius: 8px;
  padding: 7px 10px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 17px;
  color: var(--gold);
  text-align: center;
  font-feature-settings: 'tnum';
  min-width: 0;
}
.slotsBet__chips {
  display: flex; gap: 4px;
}
.slotsBet__chips button {
  flex: 1;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 4px 6px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-3);
  transition: color .12s, background .12s;
}
.slotsBet__chips button:hover { color: var(--text); background: rgba(255,255,255,.04); }

/* The big SPIN button — gold like a casino lever */
.slotsSpin {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold-deep));
  color: #2a1500;
  border: 0;
  border-radius: var(--r-btn);
  font-family: var(--display);
  font-weight: 900;
  font-size: 19px;
  letter-spacing: .08em;
  padding: 10px 16px;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.45),
    inset 0 -2px 5px rgba(120,60,0,.2),
    0 8px 24px -6px var(--gold-glow);
  transition: filter .15s, transform .12s;
}
.slotsSpin:hover { filter: brightness(1.06); }
.slotsSpin:active { transform: scale(.97); }
.slotsSpin:disabled { filter: grayscale(.7) brightness(.7); cursor: not-allowed; }
.slotsSpin--spinning { animation: slotsSpinShimmer 1.2s ease-in-out infinite; }
/* STOP variant of the SPIN button — used while auto-spin is running so the
   user can mash the same big button to halt. Reads red to telegraph "stop". */
.slotsSpin--stop {
  background: linear-gradient(180deg, #ff7a8a, #c01a78);
  color: #fff;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.45),
    inset 0 -2px 5px rgba(80,0,30,.25),
    0 8px 24px -6px var(--pink-glow);
  animation: slotsStopPulse 0.9s ease-in-out infinite;
}
@keyframes slotsStopPulse {
  50% { box-shadow:
    inset 0 2px 0 rgba(255,255,255,.5),
    inset 0 -2px 5px rgba(80,0,30,.3),
    0 12px 32px -4px var(--pink-glow); }
}
@keyframes slotsSpinShimmer {
  50% { box-shadow:
    inset 0 2px 0 rgba(255,255,255,.5),
    inset 0 -2px 5px rgba(120,60,0,.25),
    0 12px 32px -4px var(--gold-glow); }
}
.slotsSpin__icon {
  display: inline-flex;
  width: 22px; height: 22px;
}
.slotsSpin__icon svg { width: 100%; height: 100%; }

/* ---------- Auto-spin row ---------- */
.slotsAuto {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-inner);
  padding: 8px 10px;
}
.slotsAuto__label {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 700;
}
.slotsAuto__chips {
  display: flex;
  gap: 5px;
}
.slotsAutoChip {
  flex: 1;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 12px;
  font-feature-settings: 'tnum';
  padding: 6px 4px;
  background: rgba(0,0,0,.22);
  border: 1px solid var(--border-2);
  border-radius: 8px;
  color: var(--text-2);
  transition: background .12s, color .12s, border-color .12s, opacity .12s;
}
.slotsAutoChip:hover:not(:disabled) {
  background: rgba(255,255,255,.06);
  color: var(--text);
}
.slotsAutoChip--inf {
  font-family: var(--display);
  font-size: 16px;
  letter-spacing: 0;
}
.slotsAutoChip--active {
  background: linear-gradient(180deg, var(--violet), var(--violet-deep));
  color: #fff;
  border-color: rgba(255,255,255,.25);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 4px 12px -4px var(--violet-glow);
}
.slotsAutoChip:disabled {
  opacity: .35;
  cursor: not-allowed;
}

/* ---------- Rules button + bottom-sheet ---------- */
.slotsRulesBtn {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--r-inner);
  color: var(--text-2);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: -.005em;
  transition: background .15s, color .15s;
  width: 100%;
}
.slotsRulesBtn:hover {
  background: rgba(255,255,255,.05);
  color: var(--text);
}
.slotsRulesBtn svg {
  width: 18px; height: 18px;
  color: var(--gold);
  flex-shrink: 0;
}
.slotsRulesBtn span:first-of-type { flex: 1; text-align: left; }
.slotsRulesBtn__chev {
  font-family: var(--display);
  font-size: 16px;
  color: var(--text-3);
}

/* Backdrop + sheet container */
.slotsRules {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: slotsRulesFadeIn .2s var(--ease);
}
.slotsRules__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5,2,12,.7);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.slotsRules__sheet {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: 88vh;
  background: linear-gradient(180deg, #1a0a36 0%, #0a0418 100%);
  border-top: 1px solid rgba(255,205,60,.25);
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -20px 50px -10px rgba(0,0,0,.7);
  display: flex;
  flex-direction: column;
  animation: slotsRulesSlideUp .28s var(--ease-back);
  padding-bottom: var(--tg-safe-bottom);
}
@keyframes slotsRulesFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slotsRulesSlideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.slotsRules__handle {
  width: 36px; height: 4px;
  background: rgba(255,255,255,.2);
  border-radius: 999px;
  margin: 10px auto 4px;
}
.slotsRules__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 18px 12px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.slotsRules__head h3 {
  font-family: var(--display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -.015em;
}
.slotsRules__close {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--text-2);
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  display: grid; place-items: center;
  transition: background .12s, color .12s;
}
.slotsRules__close:hover { background: rgba(255,255,255,.1); color: var(--text); }

.slotsRules__body {
  overflow-y: auto;
  padding: 16px 18px 24px;
  scrollbar-width: none;
}
.slotsRules__body::-webkit-scrollbar { display: none; }

.slotsRules__steps {
  list-style: none;
  display: flex; flex-direction: column;
  gap: 12px;
  padding: 0;
  margin: 0;
}
.slotsRules__steps li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  align-items: start;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text-2);
}
.slotsRules__steps b { color: var(--text); }
.slotsRules__steps i { font-style: normal; color: var(--gold); font-weight: 700; }
.slotsRules__stepN {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold-deep));
  color: #2a1500;
  display: grid; place-items: center;
  font-family: var(--display);
  font-weight: 900;
  font-size: 13px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    0 3px 8px -2px var(--gold-glow);
}

.slotsRules__section {
  margin: 20px 0 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 800;
}

.slotsRules__paytable {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.slotsRules__paytable th {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 700;
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.slotsRules__paytable td {
  padding: 7px 8px;
  border-bottom: 1px solid rgba(255,255,255,.04);
  font-family: var(--sans);
  font-weight: 600;
  color: var(--text-2);
}
.slotsRules__paytable td.ta-r {
  text-align: right;
  font-family: var(--mono);
  font-feature-settings: 'tnum';
  color: var(--text);
}
.slotsRules__paytable th.ta-r { text-align: right; }
.slotsRules__paytable td b { color: var(--gold); font-weight: 800; }

.slotsRules__hint {
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(255,205,60,.06);
  border: 1px solid rgba(255,205,60,.18);
  border-radius: 10px;
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.45;
}
.slotsRules__hint b { color: var(--gold); }

.slotsRules__lines {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
.slotsRules__line {
  background: rgba(0,0,0,.25);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 8px 6px;
  display: flex; flex-direction: column; align-items: center;
  gap: 6px;
}
.slotsRules__line span {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .04em;
  color: var(--text-3);
  font-weight: 700;
}
.slotsRules__lineGrid {
  width: 70px;
  aspect-ratio: 5/3;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 2px;
}
.slotsRules__lineGrid > span {
  background: rgba(255,255,255,.05);
  border-radius: 2px;
  letter-spacing: 0;
}
.slotsRules__lineGrid > span.on {
  background: var(--violet);
  box-shadow: 0 0 4px var(--violet-glow);
}

.slotsRules__p {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.55;
  margin: 0;
}
.slotsRules__p b { color: var(--gold); }

/* ---------- Profile · history rows ---------- */
.slotsUserHist { display: flex; flex-direction: column; gap: 6px; }
.slotsUserRow {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-inner);
}
.slotsUserRow__m {
  font-family: var(--display);
  font-weight: 800;
  font-size: 17px;
  font-feature-settings: 'tnum';
  letter-spacing: -.02em;
  padding: 5px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,.04);
}
.slotsUserRow__m.win { color: var(--gold); background: rgba(255,205,60,.1); }
.slotsUserRow__m.lose { color: var(--text-3); background: rgba(255,255,255,.04); }
.slotsUserRow__info { font-size: 13px; font-weight: 600; }
.slotsUserRow__info small {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-3);
  margin-top: 2px;
  font-weight: 500;
}
.slotsUserRow__prize {
  font-family: var(--mono);
  font-weight: 800;
  font-size: 14px;
  font-feature-settings: 'tnum';
}
.slotsUserRow__prize.win { color: var(--gold); }
.slotsUserRow__prize.lose { color: var(--pink); }