/* The slot machine (round twelve, 2026-08-20).
   Its own file rather than more of game.css: that one is 38 KB of the Dragon
   Tiger table's own art, and none of it is shared with this. Loaded only by
   slots.html, after style.css so the tokens are already set.

   DRAWN ONLY this round: the reels spin, no coins are bet.
   Martin's spec and reference pictures:
   businesses/chat-app/sources/look spec 2026-08-20.md */

.slots-page { background: var(--void); }
.slots {
  min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center;
  gap: .55rem;
  max-width: 27rem; margin-inline: auto;
  padding: .8rem .9rem calc(5.4rem + env(safe-area-inset-bottom));
}

/* ---- the top row ---- */
.sl-top { display: flex; align-items: center; gap: .6rem; width: 100%; }
.sl-back {
  width: 2.75rem; height: 2.75rem;             /* 44px, thumb sized */
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; color: var(--text); text-decoration: none;
  font-size: 1.7rem; line-height: 1;
}
.sl-back:active { background: var(--panel-2); }
.sl-bal { margin-left: auto; display: inline-flex; align-items: center; gap: .4rem; }
.sl-bal b { font-family: var(--round); font-weight: 800; font-size: 1.45rem; color: #FFFFFF; }
.sl-coin {
  width: 1.25rem; height: 1.25rem; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #FFF3A0, var(--gold) 62%, #C8A400);
  box-shadow: 0 0 10px -2px var(--gold);
  flex: 0 0 auto;
}
.sl-plus {
  min-width: 2.75rem; height: 2.2rem; padding: 0 .8rem;
  border-radius: 999px; cursor: pointer;
  background: none; border: 1px solid var(--gold); color: var(--gold);
  font-family: var(--round); font-weight: 800; font-size: 1.2rem; line-height: 1;
}

/* ---- YOU WIN ---- */
.sl-win { margin: .2rem 0 0; text-align: center; }
.sl-w1 {
  display: block; font-family: var(--round); font-weight: 800;
  font-size: .82rem; letter-spacing: .18em; color: var(--gold);
  text-shadow: 0 0 12px rgba(255,215,0,.6);
}
.sl-w2 {
  display: block; font-family: var(--round); font-weight: 800;
  font-size: 2.7rem; line-height: 1.05; color: var(--gold);
  text-shadow: 0 0 8px rgba(255,215,0,.85), 0 0 26px rgba(255,215,0,.45);
}

/* ---- the reels and the side icons ---- */
.sl-body { display: flex; align-items: stretch; gap: .55rem; width: 100%; flex: 1; min-height: 0; max-height: 26rem; }

.sl-reels {
  position: relative; flex: 1; min-width: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 2px solid var(--gold); border-radius: var(--r);
  background: #0A0A0C; /* the reel window's near-black, from Martin's slot picture; game art, not chrome */
  box-shadow: 0 0 22px -6px var(--gold), inset 0 0 26px -14px var(--gold);
  overflow: hidden;
}
.sl-reel { display: flex; flex-direction: column; border-right: 1px solid rgba(255,215,0,.22); padding: .35rem 0; min-width: 0; }
.sl-reel:last-of-type { border-right: 0; }
.sl-reel.rolling { filter: blur(1.4px); opacity: .8; }
.sl-reel.won .sl-cell.mid { background: rgba(255,215,0,.14); }

.sl-cell { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 4.3rem; }
.sl-cell.mid { background: rgba(255,255,255,.035); }

/* the line that pays, drawn across the middle */
.sl-line {
  position: absolute; left: 0; right: 0; top: 50%; height: 0;
  border-top: 1px solid rgba(255,215,0,.35);
  pointer-events: none;
}

/* Martin's own painted symbols, cut out of the picture he made on 2026-08-20
   (tools/cut-slot-art.py). They come at 192px and show at about 46, so they
   stay sharp on a retina phone. The drop shadow is the reel's own glow under
   them, not a glow drawn on the art. */
.sl-sym { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.sl-sym img {
  width: auto; height: auto;
  max-width: 76%; max-height: 74%;
  display: block;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.65));
}
/* the seven and the cherries carry their own warm glow, the bell a gold one */
.sl-seven img  { filter: drop-shadow(0 2px 5px rgba(0,0,0,.65)) drop-shadow(0 0 9px rgba(225,45,45,.45)); }
.sl-cherry img { filter: drop-shadow(0 2px 5px rgba(0,0,0,.65)) drop-shadow(0 0 8px rgba(225,45,45,.35)); }
.sl-bell img   { filter: drop-shadow(0 2px 5px rgba(0,0,0,.65)) drop-shadow(0 0 9px rgba(255,215,0,.45)); }
.sl-bar img    { max-width: 82%; max-height: 46%; }

.sl-side { display: flex; flex-direction: column; justify-content: center; gap: .35rem; flex: 0 0 auto; }
.sl-ico {
  width: 3.1rem; min-height: 2.75rem;          /* 44px, thumb sized */
  display: flex; flex-direction: column; align-items: center; gap: .1rem;
  background: none; border: 0; padding: .3rem 0; cursor: pointer;
  color: var(--text); text-decoration: none; border-radius: var(--r-sm);
}
.sl-ico svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sl-ico u { text-decoration: none; font-size: .5rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.sl-ico:active { background: var(--panel-2); }

/* ---- SPIN ---- */
.sl-spin {
  width: 100%; margin: .3rem 0 0;
  border-radius: 999px; padding: .95rem 1rem; cursor: pointer;
  background: var(--red); border: 1px solid #FF6B6B; color: #FFFFFF;
  font-family: var(--round); font-weight: 800; font-size: 1.5rem; letter-spacing: .08em;
  box-shadow: 0 0 22px -6px var(--red);
}
.sl-spin.going { opacity: .65; letter-spacing: .3em; }

/* ---- the bet ---- */
.sl-bet { display: flex; align-items: center; justify-content: center; gap: 1.6rem; margin-top: .2rem; }
.sl-step {
  width: 2.75rem; height: 2.75rem;             /* 44px, thumb sized */
  border-radius: 999px; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--line); color: #FFFFFF;
  font-family: var(--round); font-weight: 800; font-size: 1.3rem; line-height: 1;
}
.sl-step.off { opacity: .32; cursor: default; }
.sl-amt { text-align: center; }
.sl-amt b { display: block; font-family: var(--round); font-weight: 800; font-size: 1.65rem; color: #FFFFFF; line-height: 1.1; }
.sl-amt small { display: block; font-family: var(--sans); font-size: .52rem; letter-spacing: .16em; color: var(--text-2); }

.sl-note { margin: .5rem 0 0; text-align: center; font-size: .72rem; color: var(--text-3); }

@media (min-width: 700px) {
  .sl-cell { min-height: 4.9rem; }
}

/* the sound button when it is off */
.sl-ico.off { opacity: .55; }
.sl-ico.off u { color: var(--text-3); }