/* Emoji Slots — the machine, lever, jackpot panel, and stats extras. Shared
   page, button, and stats styles live in /assets/site.css. The lime stays
   lime in dark mode. White text is unreadable on lime, so this game switches
   the shared "ink" (page text, header, links) to near-black. */

body.game-slots {
  --game-bg: #A3E635;
  --game-deep: #4D7C0F;
  --game-accent: #5B21B6;          /* big numbers and links on white cards */
  --game-ink: #1A2E05;
  --game-ink-rgb: 26, 46, 5;
  --game-on-white: #1A2E05;
  --game-focus: #1A2E05;
  --card-text: #1A2E05;
  --card-muted: #56643F;
  --card-line: #ECF5DC;
  --purple: #4C1D95;
  --purple-hi: #6D34C9;
  --gold: #FFD23F;
  --pay: #E0302A;
  /* The machine (cabinet + lever) is 100 units wide. */
  --W: min(90vw, 420px);
  --u: calc(var(--W) / 100);
}

/* Desktop and wide: the machine grows to 560px including the lever (the
   site-wide size table); everything inside scales with it. */
@media (min-width: 900px) {
  body.game-slots { --W: 560px; }
}

/* ── Layout ────────────────────────────────────────────── */

.slots-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.slots-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 10px 16px 0;
}

/* Phones and tablets: no side panel (the drought counter sits on the machine). */
.slots-side { display: none; }

@media (min-width: 900px) {
  .slots-layout {
    display: grid;
    grid-template-columns: 560px 340px;
    justify-content: center;
    align-items: start;
    column-gap: 40px;
    max-width: calc(var(--ws-container) + 2 * var(--ws-gutter));
    margin: 0 auto;
    padding: 0 var(--ws-gutter);
  }
  .slots-main { padding: 8px 0 0; }
  .slots-side { display: flex; flex-direction: column; gap: 16px; padding-top: 8px; }
  .plate { display: none; }
  .slots-stats-link { display: none; }
  .slots-side-link { font-weight: 700; font-size: 16px; }
}

/* ── Machine ───────────────────────────────────────────── */

.machine {
  display: flex;
  align-items: stretch;
  width: var(--W);
  user-select: none;
  -webkit-user-select: none;
}

.cabinet {
  position: relative;
  width: calc(84 * var(--u));
  padding: calc(4 * var(--u)) calc(5 * var(--u)) calc(3.5 * var(--u));
  border: calc(1.6 * var(--u)) solid transparent;
  border-radius: calc(7 * var(--u));
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 38%) padding-box,
    linear-gradient(180deg, var(--purple-hi), var(--purple) 55%, #3A1577) padding-box,
    linear-gradient(135deg, #FFFFFF, #9CA3AF 30%, #F3F4F6 50%, #6B7280 75%, #E5E7EB) border-box;
  box-shadow: 0 calc(2 * var(--u)) 0 #2E1065, 0 calc(4 * var(--u)) calc(8 * var(--u)) rgba(26, 46, 5, 0.35);
}

/* Marquee with a ring of bulbs */
.marquee {
  position: relative;
  margin-bottom: calc(4 * var(--u));
  padding: calc(3.4 * var(--u)) calc(3 * var(--u));
  border-radius: calc(4 * var(--u));
  background: linear-gradient(180deg, #2A0D5C, #1C0842);
  box-shadow: inset 0 0 0 calc(0.5 * var(--u)) rgba(255, 210, 63, 0.35);
}

.marquee-text {
  margin: 0;
  color: var(--gold);
  font-size: calc(7.2 * var(--u));
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 0 calc(1.5 * var(--u)) rgba(255, 210, 63, 0.8), 0 0 calc(4 * var(--u)) rgba(255, 170, 0, 0.45);
}

.bulbs { position: absolute; inset: 0; pointer-events: none; }

.bulb {
  position: absolute;
  width: calc(1.9 * var(--u));
  height: calc(1.9 * var(--u));
  margin: calc(-0.95 * var(--u)) 0 0 calc(-0.95 * var(--u));
  border-radius: 50%;
  background: #FFE88A;
  box-shadow: 0 0 calc(1.2 * var(--u)) rgba(255, 210, 63, 0.9);
  opacity: 0.45;
  animation: bulb-twinkle 2.4s ease-in-out infinite;
  animation-delay: var(--t, 0s);
}

@keyframes bulb-twinkle {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}

/* Chase: one bulb in three lit, stepping 3 times a second, so each bulb
   flashes once a second (well under 3 flashes per second). */
.bulbs.is-chase .bulb { animation: bulb-chase 1s steps(1, end) infinite; animation-delay: var(--d, 0s); opacity: 0.3; }

@keyframes bulb-chase {
  0%     { opacity: 1; }
  33.3%  { opacity: 0.3; }
}

/* Reels: three white windows showing three rows each */
.reels {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(2 * var(--u));
  padding: calc(1.6 * var(--u));
  border-radius: calc(3.5 * var(--u));
  background: #1C0842;
}

.reel {
  position: relative;
  height: calc(60 * var(--u));
  overflow: hidden;
  border-radius: calc(2.4 * var(--u));
  background: #FFFFFF;
}

/* Soft shade top and bottom so the reels look curved. */
.reel::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(20, 8, 50, 0.42), rgba(20, 8, 50, 0) 26%, rgba(20, 8, 50, 0) 74%, rgba(20, 8, 50, 0.42));
  box-shadow: inset 0 0 calc(2 * var(--u)) rgba(20, 8, 50, 0.3);
}

.strip { will-change: transform; }
.strip.is-fast { filter: blur(calc(0.35 * var(--u))); }

.sym {
  display: grid;
  place-items: center;
  height: calc(20 * var(--u));
  font-family: var(--ws-emoji-font);
  font-size: calc(14.5 * var(--u));
  line-height: 1;
}

.sym span {
  display: block;
  border-radius: 50%;
  transition: filter 200ms ease, transform 200ms ease;
}

.sym.is-win span {
  animation: sym-glow 900ms ease-in-out infinite alternate;
}

@keyframes sym-glow {
  from { filter: drop-shadow(0 0 calc(1 * var(--u)) rgba(255, 196, 0, 0.9)); transform: scale(1.04); }
  to   { filter: drop-shadow(0 0 calc(3 * var(--u)) rgba(255, 196, 0, 1)) drop-shadow(0 0 calc(1 * var(--u)) #FFFFFF); transform: scale(1.1); }
}

.payline {
  position: absolute;
  left: calc(0.6 * var(--u));
  right: calc(0.6 * var(--u));
  top: 50%;
  height: calc(0.55 * var(--u));
  margin-top: calc(-0.275 * var(--u));
  background: var(--pay);
  opacity: 0.85;
  pointer-events: none;
}

.arrow {
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  border-top: calc(2 * var(--u)) solid transparent;
  border-bottom: calc(2 * var(--u)) solid transparent;
  transform: translateY(-50%);
}

.arrow--l { left: calc(-1.6 * var(--u)); border-left: calc(2.4 * var(--u)) solid var(--pay); }
.arrow--r { right: calc(-1.6 * var(--u)); border-right: calc(2.4 * var(--u)) solid var(--pay); }

.plate {
  margin: calc(3 * var(--u)) 0 0;
  color: #E9DDFF;
  font-size: calc(3.8 * var(--u));
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.plate b { color: var(--gold); }
.plate.flash, .slots-drought .big-number.flash { animation: plate-flash 700ms ease; }

@keyframes plate-flash {
  0%, 100% { filter: none; }
  30%      { filter: brightness(1.8) drop-shadow(0 0 6px rgba(255, 210, 63, 0.9)); }
}

/* ── Lever ─────────────────────────────────────────────── */

.lever {
  position: relative;
  width: calc(16 * var(--u));
  touch-action: none;
}

.lever-mount {
  position: absolute;
  left: calc(-1.2 * var(--u));
  top: 55%;
  width: calc(7.5 * var(--u));
  height: calc(15 * var(--u));
  margin-top: calc(-7.5 * var(--u));
  border-radius: 0 calc(3 * var(--u)) calc(3 * var(--u)) 0;
  background: linear-gradient(90deg, #6B7280, #F3F4F6 40%, #9CA3AF 70%, #4B5563);
  box-shadow: 0 calc(0.8 * var(--u)) calc(1.6 * var(--u)) rgba(0, 0, 0, 0.3);
}

.lever-shaft {
  position: absolute;
  left: calc(6.3 * var(--u));
  width: calc(2.6 * var(--u));
  border-radius: calc(1.3 * var(--u));
  background: linear-gradient(90deg, #6B7280, #FFFFFF 45%, #9CA3AF 75%, #4B5563);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.lever-ball {
  position: absolute;
  top: 0;
  left: calc(1.6 * var(--u));
  width: calc(12 * var(--u));
  height: calc(12 * var(--u));
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #FFFFFF 0 6%, #FF6B63 14%, #E0302A 45%, #9B1410 100%);
  box-shadow: 0 calc(1 * var(--u)) calc(2 * var(--u)) rgba(0, 0, 0, 0.35);
  cursor: grab;
  -webkit-tap-highlight-color: transparent;
}

.lever.is-dragging .lever-ball { cursor: grabbing; }
.lever.is-busy .lever-ball { cursor: default; }

/* ── Controls and result ───────────────────────────────── */

.slots-button {
  margin-top: 22px;
  background: #1A2E05;
  color: #C8F56B;
  box-shadow: 0 6px 0 #0B1402, 0 10px 24px rgba(26, 46, 5, 0.3);
}

.slots-button:active:not(:disabled) { box-shadow: 0 2px 0 #0B1402, 0 4px 12px rgba(26, 46, 5, 0.3); }
.slots-button .kbd { border-color: #C8F56B; }
.slots-button .kbd + .kbd { margin-left: 4px; }

@media (min-width: 900px) {
  .slots-button { min-width: 260px; padding: 20px 56px; font-size: 30px; }
}

.slots-result {
  min-height: 1.3em;
  margin: 16px 16px 0;
  font-size: clamp(24px, 7vw, 34px);
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
}

.slots-result .emoji { font-weight: 400; }
.slots-result.is-jackpot { color: var(--purple); font-weight: 900; }
.slots-result.is-error { color: #56643F; font-size: 20px; font-weight: 700; }
body.game-slots .play-message { font-weight: 700; }

/* ── Desktop jackpot panel ─────────────────────────────── */

.slots-side .card h2 { margin-bottom: 8px; }
.slots-drought .big-number { font-size: 56px; }

.slots-recent { margin: 0; padding: 0; list-style: none; }

.slots-recent li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--card-line);
}

.slots-recent li:last-child { border-bottom: 0; }
.slots-recent .triple { font-family: var(--ws-emoji-font); font-size: 24px; letter-spacing: 2px; }
.slots-recent time { margin-left: auto; color: var(--card-muted); font-size: 13px; white-space: nowrap; }
.slots-recent li.is-mega { margin: 2px -8px; padding: 6px 8px; border-bottom: 0; border-radius: 10px; background: #F1EAFF; color: var(--purple); font-weight: 800; }
.mega-badge { padding: 1px 8px; border-radius: 999px; background: #EDE4FF; color: var(--purple); font-size: 12px; font-weight: 800; white-space: nowrap; }
.slots-none { color: var(--card-muted); }

.odds-bars { margin: 0 0 10px; padding: 0; list-style: none; }
.odds-bars li { padding: 6px 0; }
.odds-row { display: flex; justify-content: space-between; font-size: 14px; }
.odds-row b { font-variant-numeric: tabular-nums; }
.odds-row small { color: var(--card-muted); }

.odds-track {
  position: relative;
  height: 12px;
  margin-top: 5px;
  border-radius: 999px;
  background: #F1F5E8;
}

.odds-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--purple-hi); transition: width 400ms ease; }

/* Each bar's scale runs to twice the expected rate, so the tick sits mid-bar. */
.odds-tick { position: absolute; left: 50%; top: -4px; bottom: -4px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: #6B7280; }

/* ── Mega jackpot emoji rain ───────────────────────────── */

.rain { position: fixed; inset: 0; z-index: 200; overflow: hidden; pointer-events: none; }
.rain span { position: absolute; top: -60px; font-family: var(--ws-emoji-font); line-height: 1; will-change: transform; }

/* ── Stats page extras ─────────────────────────────────── */

.slots-triples { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }

.slots-triples li {
  padding: 4px 8px;
  border-radius: 10px;
  background: #F6FAEE;
  font-family: var(--ws-emoji-font);
  font-size: 22px;
  letter-spacing: 1px;
}

.slots-triples li.is-pair { background: #ECF7D2; box-shadow: inset 0 0 0 1px #C6E58A; }
.slots-triples li.is-jackpot { background: #EDE4FF; box-shadow: inset 0 0 0 2px #B794F6; }
.slots-triples li.is-mega { background: #FFF3C4; box-shadow: inset 0 0 0 2px var(--gold); }

.slots-jackpots { margin: 0; padding: 0; list-style: none; }
.slots-jackpots li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--card-line); }
.slots-jackpots li:last-child { border-bottom: 0; }
.slots-jackpots .triple { font-family: var(--ws-emoji-font); font-size: 24px; letter-spacing: 2px; }
.slots-jackpots small { margin-left: auto; color: var(--card-muted); font-size: 13px; text-align: right; }
.slots-jackpots .is-mega .triple { filter: drop-shadow(0 0 4px rgba(255, 210, 63, 0.9)); }

.reel-verdicts { margin-top: 10px; }
.reel-verdicts li { align-items: baseline; }
.reel-verdicts .is-fair { color: var(--good); font-weight: 700; }
.reel-verdicts .is-uneven { color: var(--bad); font-weight: 700; }

.pair-top { display: flex; align-items: center; gap: 14px; }
.pair-top .emoji { font-size: 56px; line-height: 1; }
.pair-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; text-align: center; }
.pair-list li { padding: 4px 0; border-radius: 10px; background: #F6FAEE; }
.pair-list .emoji { display: block; font-size: 24px; }
.pair-list small { color: var(--card-muted); font-size: 12px; }

@media (hover: hover) and (pointer: fine) {
  .lever-ball:hover { filter: brightness(1.08); }
  .slots-button:hover:not(:disabled) { filter: brightness(1.25); }
  .slots-side-link:hover { color: var(--game-ink); }
}

@media (prefers-reduced-motion: reduce) {
  .bulb, .bulbs.is-chase .bulb { animation: none; opacity: 0.8; }
  .sym.is-win span { animation: none; filter: drop-shadow(0 0 4px rgba(255, 196, 0, 1)); }
  .plate.flash, .slots-drought .big-number.flash { animation: none; }
  .odds-fill { transition: none; }
}