/* ═══════════════════════════════════════════════════════════════════════════
   FYM CASINO — SLOTS · "La Machine"
   Renovation V2 (docs/game-renovation-v2/specs/slots-base.md).

   Owns the base-slot screen only. The premium slot variants (black-vault,
   high-roller, liquidation) keep slot-fx.css; the legacy `.slots-machine` /
   `.reel-container` / `.autospin-*` rules in style.css are orphaned by the
   rebuild's innerHTML swap and are not touched from here.

   The cabinet itself is a canvas — this file lays out the chrome around it
   and hosts the shared platform modules (BetCockpit, Ring, Ledger, Juice).

   Fold budget at 375x812 (usable 692 = 812 - 56 header - 64 nav):
     16 pad + 32 head + 8 + 20 marquee + 270 canvas + 26 result + 8
     + 92 cockpit + 8 + 56 CTA + 8 + 26 ledger = 570  ->  122px slack,
   which is what absorbs --tg-content-safe-area-inset-bottom (0-34px).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Beats games-compact.css's `#slots-screen.active` shape (same id, one more
   class) — that file loads before this one in index.html. */
#slots-screen.active.sl-screen {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sl-screen {
  --sl-gap: 8px;
  --sl-gold: var(--accent, oklch(0.78 0.13 80));
  --sl-gold-hi: var(--accent-hi, oklch(0.85 0.13 80));
  --sl-ember: oklch(0.74 0.15 62);
  --sl-panel: oklch(0.16 0.010 80);
  --sl-panel-edge: oklch(0.25 0.012 80);
  --sl-walnut: oklch(0.12 0.012 60);
  font-family: var(--font-body);
  color: var(--text);
}

.sl-wrap {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sl-gap);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(12px + var(--tg-content-safe-area-inset-bottom, 0px));
}
.sl-wrap::-webkit-scrollbar { display: none; }
.sl-wrap button,
.sl-wrap input { font-family: inherit; }

/* ── Header (32px) ───────────────────────────────────────────────────────── */
.sl-head {
  flex: 0 0 auto;
  height: 32px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sl-nav,
.sl-info {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--sl-panel-edge);
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}
.sl-nav:active,
.sl-info:active { transform: scale(0.94); }
.sl-titles {
  flex: 1;
  min-width: 0;
  text-align: center;
  line-height: 1;
}
.sl-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.20em;
  color: var(--sl-gold-hi);
}
.sl-sub {
  font-size: 10px;
  letter-spacing: 0.10em;
  color: var(--faint, var(--muted));
  margin-top: 2px;
}
.sl-head-tools {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.sl-fairslot { display: inline-flex; }

/* ── Marquee (20px) — becomes the free-spins banner ──────────────────────── */
.sl-marquee {
  flex: 0 0 auto;
  height: 20px;
  line-height: 20px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.28em;
  color: var(--sl-gold);
  border-top: 1px solid color-mix(in oklch, var(--sl-gold) 22%, transparent);
  border-bottom: 1px solid color-mix(in oklch, var(--sl-gold) 22%, transparent);
  background: linear-gradient(180deg,
    color-mix(in oklch, var(--sl-gold) 6%, transparent), transparent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 300ms ease, border-color 300ms ease;
}
.sl-wrap.is-feature .sl-marquee {
  color: var(--sl-ember);
  border-color: color-mix(in oklch, var(--sl-ember) 45%, transparent);
  letter-spacing: 0.16em;
}

/* ── Stage (the cabinet canvas, 343x270 design grid) ─────────────────────── */
.sl-stage {
  flex: 0 0 auto;
  position: relative;
  width: 100%;
  max-width: 343px;
  margin: 0 auto;
  border-radius: 14px;
  background:
    radial-gradient(120% 90% at 50% 0%,
      color-mix(in oklch, var(--sl-gold) 7%, transparent), transparent 62%),
    var(--sl-walnut);
  border: 1px solid color-mix(in oklch, var(--sl-gold) 18%, transparent);
  overflow: hidden;
  touch-action: manipulation;
}
.sl-wrap.is-feature .sl-stage {
  border-color: color-mix(in oklch, var(--sl-ember) 40%, transparent);
}
.sl-canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 343 / 270;
}

/* ── Result line (26px min) ──────────────────────────────────────────────── */
.sl-result {
  flex: 0 0 auto;
  min-height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}
.sl-res-line { letter-spacing: 0.02em; }
.sl-res-amt {
  font-family: var(--font-numeric);
  font-weight: 700;
  color: var(--sl-gold-hi);
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.sl-res-mult,
.sl-res-x2 {
  font-style: normal;
  font-size: 11px;
  padding: 1px 5px;
  border-radius: 6px;
  background: color-mix(in oklch, var(--sl-gold) 16%, transparent);
  color: var(--sl-gold-hi);
}
.sl-res-x2 { background: color-mix(in oklch, var(--sl-ember) 22%, transparent); }
.sl-result.is-win .sl-res-line { color: var(--text); }
.sl-result.is-lose { color: var(--faint, var(--muted)); }
.sl-result.is-info { color: var(--sl-ember); }
.sl-gameid {
  border: 0;
  background: transparent;
  color: var(--faint-deco, var(--muted));
  font-size: 11px;
  text-decoration: underline dotted;
  cursor: pointer;
  padding: 0 2px;
}

/* ── Cockpit (92px: chips 36 + bet row 48 + 8) ───────────────────────────── */
.sl-cockpit { flex: 0 0 auto; }
/* Row 5 owns the CTA; the cockpit's generic one would duplicate SPIN. */
.sl-cockpit .fym-ck-ctarow { display: none; }
.sl-cockpit .fym-ck-params:empty { display: none; }

/* ── CTA row (56px): SPIN · TURBO · AUTO ─────────────────────────────────── */
.sl-cta {
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  gap: 8px;
  height: 56px;
}
.sl-spin {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 1px solid color-mix(in oklch, var(--sl-gold) 55%, transparent);
  border-radius: 12px;
  background: linear-gradient(180deg,
    color-mix(in oklch, var(--sl-gold) 26%, transparent),
    color-mix(in oklch, var(--sl-gold) 10%, transparent));
  color: var(--sl-gold-hi);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 90ms ease, opacity 180ms ease;
}
.sl-spin:active { transform: scale(0.985); }
.sl-spin.is-disabled {
  opacity: 0.72;
  border-color: color-mix(in oklch, var(--sl-ember) 45%, transparent);
  color: var(--sl-ember);
}
.sl-spin-l1 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.20em;
  line-height: 1;
}
.sl-spin-l2 {
  font-size: 10px;
  letter-spacing: 0.06em;
  color: color-mix(in oklch, var(--sl-gold-hi) 66%, transparent);
}
.sl-mini {
  flex: 0 0 72px;
  min-height: 44px;
  border: 1px solid var(--sl-panel-edge);
  border-radius: 12px;
  background: var(--sl-panel);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  cursor: pointer;
  position: relative;
  touch-action: manipulation;
}
.sl-mini:active { transform: scale(0.96); }
.sl-mini.is-on {
  color: var(--sl-gold-hi);
  border-color: color-mix(in oklch, var(--sl-gold) 55%, transparent);
  background: color-mix(in oklch, var(--sl-gold) 12%, transparent);
}
.sl-mini.is-running {
  color: var(--loss);
  border-color: color-mix(in oklch, var(--loss) 55%, transparent);
}
.sl-autowrap { position: relative; flex: 0 0 72px; display: flex; }
.sl-autowrap .sl-mini { flex: 1 1 auto; }
.sl-autobadge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--loss);
  color: #fff;
  font-size: 11px;
  line-height: 20px;
  text-align: center;
}
.sl-autobadge:empty { display: none; }

/* Autospin popover — opens UPWARD and never overlays the SPIN/STOP
   affordance, which has to stay tappable for the whole run. */
.sl-autopop {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  width: 232px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--sl-panel-edge);
  border-radius: 14px;
  background: var(--surface, oklch(0.14 0.008 80));
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55);
}
.sl-autopop[hidden] { display: none; }
.sl-autotitle {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--sl-gold);
}
.sl-autocounts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.sl-autocount {
  min-height: 44px;
  border: 1px solid var(--sl-panel-edge);
  border-radius: 10px;
  background: var(--raised, var(--sl-panel));
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.sl-autocount:active { transform: scale(0.95); }
.sl-autofield {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
  font-size: 12px;
  color: var(--muted);
}
.sl-autofield input {
  width: 96px;
  min-height: 36px;
  padding: 0 8px;
  border: 1px solid var(--sl-panel-edge);
  border-radius: 9px;
  background: var(--sl-panel);
  color: var(--text);
  font-size: 13px;
  text-align: right;
}
.sl-autocheck {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
}
.sl-autocheck input { width: 18px; height: 18px; accent-color: var(--sl-gold); }
.sl-autostop {
  min-height: 44px;
  border: 1px solid color-mix(in oklch, var(--loss) 55%, transparent);
  border-radius: 10px;
  background: color-mix(in oklch, var(--loss) 14%, transparent);
  color: var(--loss);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  cursor: pointer;
}

/* ── SessionLedger bar (26px, above the fold — live session state) ───────── */
.sl-ledger {
  flex: 0 0 auto;
  min-height: 26px;
  display: flex;
  align-items: center;
}
.sl-ledger .fym-ledger { width: 100%; }

/* ── Below the fold: results ring, paytable, fairness row ────────────────── */
.sl-fold {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 6px;
}
.sl-ring { min-height: 26px; }
.sl-paytable {
  border: 1px solid var(--sl-panel-edge);
  border-radius: 12px;
  background: var(--sl-panel);
  padding: 10px 12px;
}
.sl-paytable h4 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--sl-gold);
}
.sl-pay-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 0;
  font-size: 12px;
  color: var(--muted);
  border-bottom: 1px solid color-mix(in oklch, var(--sl-panel-edge) 55%, transparent);
}
.sl-pay-row:last-of-type { border-bottom: 0; }
.sl-pay-row b {
  font-family: var(--font-numeric);
  color: var(--sl-gold-hi);
}
.sl-pay-note {
  margin: 6px 0 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--faint, var(--muted));
}
.sl-fairrow {
  min-height: 44px;
  border: 1px solid var(--sl-panel-edge);
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.sl-fairrow:active { transform: scale(0.99); }

/* ── SE ladder — 375x667 (usable 547) ────────────────────────────────────────
   Marquee merges into the header (-28: 20px row + 8px gap), the ledger
   compresses 26 -> 16 (-10) and the stack gaps 8 -> 6 (-8):
   570 - 46 = 524 <= 547. The reel canvas never shrinks. ────────────────── */
@media (max-height: 700px) {
  .sl-screen { --sl-gap: 6px; }
  .sl-marquee {
    height: 0;
    border: 0;
    overflow: hidden;
    visibility: hidden;
  }
  .sl-wrap.is-feature .sl-marquee {
    /* The feature banner is the one state worth the row back — it carries
       the live n/8 counter the disabled SPIN sub-line refers to. */
    height: 18px;
    line-height: 18px;
    visibility: visible;
  }
  .sl-ledger { min-height: 16px; }
  .sl-ledger .fym-ledger { min-height: 16px; font-size: 11px; }
  .sl-fold { padding-top: 2px; }
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .sl-marquee,
  .sl-spin { transition: none; }
  .sl-spin:active,
  .sl-mini:active,
  .sl-autocount:active,
  .sl-nav:active,
  .sl-info:active { transform: none; }
}