:root {
  --bg0: #12100f;
  --bg1: #1c1613;
  --bg2: #2a1a12;
  --ember: #ff6a1a;
  --ember-hot: #ffb020;
  --ember-deep: #c22c00;
  --magenta: #d4189b;
  --rail: #1de1c2;
  --gold: #f5c84b;
  --gold-2: #ffe9a8;
  --panel: #15120f;
  --muted: #9d9188;
  --cell-dark: #1b1613;
  --cell-dark-2: #0d0b0a;
  --red: #d6001d;
  --black: #1a1a1a;
  --cell-h: 104px;
}

* { box-sizing: border-box; }

/* Elements below are toggled with the `hidden` attribute AND given a
   `display` value by their own class rule. Without this override the class
   wins and `el.hidden = true` silently does nothing. */
[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  color: #f4efe9;
  background:
    radial-gradient(circle at 50% -10%, rgba(255, 106, 26, 0.22), transparent 55%),
    radial-gradient(circle at 90% 110%, rgba(212, 24, 155, 0.18), transparent 50%),
    linear-gradient(170deg, var(--bg0), var(--bg1) 55%, var(--bg0));
  background-attachment: fixed;
}

.layout {
  position: relative;
  z-index: 1;
  width: min(1040px, 96vw);
  margin: 0.8rem auto;
  padding: 0.9rem;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 106, 26, 0.08), rgba(0, 0, 0, 0.34));
  border: 1px solid rgba(245, 200, 75, 0.16);
}

/* ---- topbar ---- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.brand-logo {
  width: clamp(190px, 40vw, 340px);
  height: auto;
  display: block;
  filter: drop-shadow(0 4px 12px rgba(255, 106, 26, 0.45));
}

.topbar-actions { display: flex; align-items: center; gap: 0.45rem; }

.pill {
  border: 1px solid rgba(245, 200, 75, 0.35);
  border-radius: 999px;
  padding: 0.35rem 0.8rem;
  background: rgba(0, 0, 0, 0.4);
  color: var(--gold-2);
  font-weight: 700;
  white-space: nowrap;
}

.chip {
  border: 1px solid rgba(29, 225, 194, 0.4);
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  background: rgba(0, 0, 0, 0.4);
  color: var(--rail);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  cursor: pointer;
}

.chip[aria-pressed="true"] {
  background: linear-gradient(180deg, var(--rail), #0e9f8a);
  color: #04211c;
  border-color: var(--rail);
}

h2 { margin: 0 0 0.5rem; color: var(--gold-2); font-size: 0.95rem; }
h3 { margin: 0.9rem 0 0.35rem; color: var(--ember-hot); font-size: 0.85rem; letter-spacing: 0.04em; }

/* ---- stage ---- */

.stage { margin-top: 0.8rem; }

.ways-rule {
  text-align: center;
  color: var(--muted);
  font-size: 0.8rem;
  margin: 0.5rem 0 0;
}

/* The cabinet hugs its contents: the rail + 3 reels span only ~427px, so a
   full-width frame left ~290px of dead space on each side. `max-content` is
   sized by the reel windows themselves, so it stays correct at every
   `--cell-h` breakpoint; `max-width: 100%` keeps narrow phones from
   overflowing. Centring the 125px rail against the 312px reels also closes
   the empty pocket that flex-start left under the multiplier tile. */
.slot-frame {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
  gap: 0.7rem;
  padding: 0.5rem 0.7rem;
  border-radius: 16px;
  background: linear-gradient(180deg, #241812, #0f0c0a);
  border: 3px solid var(--gold);
  box-shadow: inset 0 0 34px rgba(0, 0, 0, 0.75), 0 0 22px rgba(255, 106, 26, 0.22);
}

.multiplier-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  flex: 0 0 auto;
}

.rail-caption {
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  color: var(--rail);
  font-weight: 800;
}

/* The trim on the reel windows is drawn with box-shadow, not border: a
   border would eat 4px of the content box, leaving a window that is not an
   exact multiple of the cell height. The strip would then land 4px short of
   where the statically rendered grid sits and the symbols would visibly jump
   on the first spin.

   The selector must also out-specify `.reel-col { height: 100% }` below:
   #multReel carries both classes, and its parent has no definite height, so
   `height: 100%` would resolve to `auto` and the window would stretch to the
   full spin strip. */
.reel-col.mult-col {
  width: var(--cell-h);
  height: var(--cell-h);
  border-radius: 10px;
  border: 0;
  box-shadow: 0 0 0 2px var(--rail), 0 0 14px rgba(29, 225, 194, 0.28);
}

.mult-col.mult-pulse { animation: rail-pulse 620ms ease-in-out 2; }

@keyframes rail-pulse {
  0%, 100% { box-shadow: 0 0 0 2px var(--rail), 0 0 14px rgba(29, 225, 194, 0.28); transform: scale(1); }
  50% { box-shadow: 0 0 0 2px var(--ember-hot), 0 0 26px 6px rgba(255, 176, 32, 0.75); transform: scale(1.06); }
}

.reels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: calc(var(--cell-h) * 3);
  height: calc(var(--cell-h) * 3);
  border-radius: 10px;
  overflow: hidden;
  background: var(--cell-dark-2);
  border: 0;
  box-shadow: 0 0 0 2px rgba(245, 200, 75, 0.55);
}

.reel-col {
  height: 100%;
  overflow: hidden;
  background: linear-gradient(180deg, var(--cell-dark), var(--cell-dark-2));
}

/* Scoped to `.reels` so the multiplier rail never picks up a divider edge. */
.reels .reel-col { border-right: 2px solid rgba(245, 200, 75, 0.45); }
.reels .reel-col:last-child { border-right: 0; }

.reel-strip { will-change: transform; transform-origin: 50% 50%; }

/* Never blur() a translateY-animated strip: it forces a compositing path
   that blacks the whole reel out. Saturation is the safe motion cue. */
.reel-strip.spinning { filter: saturate(1.15); }

.cell {
  /* Height is also set inline by JS from the measured window so the scroll
     distance always matches what is actually on screen. */
  height: var(--cell-h);
  display: grid;
  place-items: center;
  border-bottom: 1px solid rgba(245, 200, 75, 0.12);
}

.cell img {
  width: 78%;
  height: 78%;
  object-fit: contain;
  pointer-events: none;
}

.cell.win {
  animation: pulse 560ms ease-in-out 2;
  background: radial-gradient(circle, rgba(255, 106, 26, 0.28), transparent 70%);
}

.cell.win img { filter: drop-shadow(0 0 8px rgba(255, 176, 32, 0.85)); }
.cell.wild-win img { filter: drop-shadow(0 0 12px rgba(255, 233, 168, 0.95)) drop-shadow(0 0 22px rgba(212, 24, 155, 0.6)); }

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

.slot-frame.win-flash { animation: win-flash 560ms ease-in-out 2; }

@keyframes win-flash {
  0%, 100% { box-shadow: inset 0 0 34px rgba(0, 0, 0, 0.75), 0 0 22px rgba(255, 106, 26, 0.22); }
  50% { box-shadow: inset 0 0 34px rgba(0, 0, 0, 0.4), 0 0 42px 10px rgba(255, 176, 32, 0.8); }
}

.big-win-banner {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  gap: 0.2rem;
  border-radius: 13px;
  background: rgba(12, 6, 3, 0.72);
  pointer-events: none;
  animation: bigwin-fade 2.4s ease-out forwards;
}

.big-win-text {
  font-size: clamp(1.7rem, 6vw, 3rem);
  font-weight: 900;
  letter-spacing: 0.08em;
  color: var(--gold-2);
  text-shadow: 0 0 18px rgba(255, 176, 32, 0.9), 0 3px 0 #6f2900;
  animation: bigwin-pop 0.5s ease-out;
}

.big-win-amount {
  font-size: clamp(1rem, 3vw, 1.5rem);
  color: #fff;
  text-shadow: 0 0 10px rgba(255, 176, 32, 0.8);
}

@keyframes bigwin-pop {
  0% { transform: scale(0.4); opacity: 0; }
  60% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); }
}

@keyframes bigwin-fade {
  0%, 74% { opacity: 1; }
  100% { opacity: 0; }
}

/* ---- controls ---- */

.controls {
  margin-top: 0.9rem;
  display: grid;
  grid-template-columns: 1fr repeat(5, auto);
  gap: 0.55rem;
  align-items: stretch;
}

.control-block {
  background: rgba(0, 0, 0, 0.4);
  border-radius: 10px;
  padding: 0.4rem 0.5rem;
}

.control-block label { display: block; color: var(--muted); font-size: 0.75rem; }

.control-block select {
  width: 100%;
  border: 0;
  border-radius: 8px;
  padding: 0.45rem;
  color: #f4efe9;
  background: #2a201a;
}

button {
  border: 0;
  border-radius: 12px;
  padding: 0.8rem 1.05rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  cursor: pointer;
  color: #fff;
}

.spin {
  min-width: 128px;
  background: linear-gradient(180deg, var(--ember-hot), var(--ember-deep));
  color: #34120a;
  text-shadow: 0 1px 0 rgba(255, 235, 190, 0.55);
  animation: spin-breathe 2.4s ease-in-out infinite;
}

.spin:active { transform: scale(0.95); }
.spin:disabled { animation: none; opacity: 0.6; cursor: not-allowed; }

@keyframes spin-breathe {
  0%, 100% { box-shadow: 0 0 0 rgba(255, 176, 32, 0); }
  50% { box-shadow: 0 0 16px 3px rgba(255, 176, 32, 0.55); }
}

.alt {
  background: linear-gradient(180deg, #3a2a22, #1d1512);
  border: 1px solid rgba(245, 200, 75, 0.28);
  color: var(--gold-2);
}

.alt:disabled { opacity: 0.5; cursor: not-allowed; }
.alt[aria-pressed="true"], .alt.active {
  background: linear-gradient(180deg, var(--magenta), #7d0a5b);
  border-color: var(--magenta);
  color: #fff;
}

.verify-link {
  display: block;
  margin: 0.7rem auto 0;
  background: none;
  border: 1px solid rgba(255, 106, 26, 0.45);
  color: var(--ember-hot);
  padding: 0.4rem 1rem;
  font-size: 0.78rem;
  border-radius: 8px;
}

.verify-link.inline { display: inline-block; margin: 0.2rem 0; padding: 0.25rem 0.7rem; }
.verify-link:disabled { opacity: 0.45; cursor: not-allowed; }

/* ---- toast / modals ---- */

.toast {
  position: fixed;
  bottom: 1.2rem;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(70, 20, 5, 0.96);
  color: #fff5e6;
  border: 1px solid rgba(255, 176, 32, 0.45);
  border-radius: 10px;
  padding: 0.6rem 1.1rem;
  z-index: 60;
  max-width: 90vw;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 4, 2, 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 1rem;
  overflow: auto;
}

.modal-card {
  margin: auto;
  background: linear-gradient(180deg, #2a1a10, #15100c);
  border: 3px solid var(--gold);
  border-radius: 16px;
  padding: 1.2rem 1.4rem;
  max-width: 380px;
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.65), 0 0 30px rgba(255, 106, 26, 0.22);
}

.modal-card h2 { margin-bottom: 0.2rem; }
.modal-card p { margin: 0.2rem 0; color: var(--muted); }
.modal-card strong { color: var(--gold); }

.info-modal { max-width: 460px; text-align: left; }
.info-modal h2 { text-align: center; }
.info-lead { font-size: 0.82rem; line-height: 1.4; }
.info-note { font-size: 0.78rem; color: var(--ember-hot) !important; margin-top: 0.6rem !important; }
.info-modal .collect { display: block; margin: 0.9rem auto 0; min-width: 140px; }

.info-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.info-table th, .info-table td { text-align: left; padding: 0.28rem 0.4rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.info-table th { color: var(--muted); font-weight: 600; }
.info-table td:last-child { text-align: right; color: var(--gold-2); }
.info-table .sym { display: flex; align-items: center; gap: 0.45rem; }
.info-table .sym img { width: 26px; height: 26px; }

.verify-detail { margin: 0.6rem 0 0; text-align: left; font-size: 0.72rem; }
.verify-detail dt { color: var(--muted); }
.verify-detail dd { margin: 0 0 0.4rem; color: var(--gold-2); overflow-wrap: anywhere; }

.playing-card {
  width: 116px;
  height: 162px;
  margin: 1rem auto;
  perspective: 800px;
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s ease;
  transform-style: preserve-3d;
}

.card-inner.flipped { transform: rotateY(180deg); }

.card-face {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  backface-visibility: hidden;
  display: grid;
  place-items: center;
  font-size: 3rem;
  font-weight: 800;
  border: 3px solid var(--gold-2);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.55);
}

.card-back {
  background: repeating-linear-gradient(45deg, #7a2c0d, #7a2c0d 10px, #521c07 10px, #521c07 20px);
  color: var(--gold-2);
}

.card-front {
  transform: rotateY(180deg);
  color: #fff;
  background: #333;
}

.card-front.red { background: linear-gradient(180deg, #e5162f, #7a0012); }
.card-front.black { background: linear-gradient(180deg, #3a3a3a, #0a0a0a); }

.gamble-actions {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}

.card-btn { min-width: 96px; }
.card-btn.red { background: linear-gradient(180deg, var(--red), #7a0012); }
.card-btn.black { background: linear-gradient(180deg, #3a3a3a, var(--black)); }
.collect { background: linear-gradient(180deg, #2e7d32, #1b5e20); }
.card-btn:disabled, .collect:disabled { opacity: 0.5; cursor: not-allowed; }

.gamble-result { min-height: 1.2rem; color: var(--gold-2) !important; font-weight: 600; }

/* ---- results / panels ---- */

.results {
  margin-top: 0.9rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
}

.results div {
  background: linear-gradient(180deg, rgba(58, 30, 16, 0.6), rgba(0, 0, 0, 0.5));
  border: 1px solid rgba(255, 106, 26, 0.3);
  border-radius: 10px;
  padding: 0.5rem;
}

.results span { display: block; color: var(--muted); font-size: 0.74rem; }
.results strong { display: block; margin-top: 0.25rem; font-size: 0.92rem; color: var(--gold-2); overflow-wrap: anywhere; }

.panels {
  margin-top: 0.9rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.7rem;
}

.panel {
  background: var(--panel);
  border-radius: 12px;
  padding: 0.72rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.panel table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.panel th, .panel td { text-align: left; padding: 0.28rem 0.4rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.panel th { color: var(--muted); font-weight: 600; }
.panel td:last-child { text-align: right; color: var(--gold-2); }
.panel .sym { display: flex; align-items: center; gap: 0.45rem; }
.panel .sym img { width: 24px; height: 24px; }

.panel ul { margin: 0; padding-left: 1.1rem; color: #e8e0d8; }
.panel ul li { margin: 0.2rem 0; font-size: 0.85rem; }

/* ---- ember drift ---- */

.embers {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.embers span {
  position: absolute;
  bottom: -24px;
  width: 10px;
  height: 10px;
  background: url("/assets/ember.svg") center/contain no-repeat;
  animation: ember-rise linear infinite;
  opacity: 0;
}

.embers span:nth-child(1) { left: 5%; animation-duration: 9s; animation-delay: 0s; }
.embers span:nth-child(2) { left: 15%; animation-duration: 12s; animation-delay: 1.4s; }
.embers span:nth-child(3) { left: 26%; animation-duration: 8s; animation-delay: 3s; }
.embers span:nth-child(4) { left: 37%; animation-duration: 11s; animation-delay: 0.8s; }
.embers span:nth-child(5) { left: 48%; animation-duration: 10s; animation-delay: 2.4s; }
.embers span:nth-child(6) { left: 59%; animation-duration: 13s; animation-delay: 4s; }
.embers span:nth-child(7) { left: 70%; animation-duration: 9.5s; animation-delay: 1s; }
.embers span:nth-child(8) { left: 79%; animation-duration: 11.5s; animation-delay: 3.6s; }
.embers span:nth-child(9) { left: 88%; animation-duration: 10.5s; animation-delay: 5s; }
.embers span:nth-child(10) { left: 95%; animation-duration: 12.5s; animation-delay: 2s; }

@keyframes ember-rise {
  0% { transform: translateY(0) translateX(0) scale(0.6); opacity: 0; }
  8% { opacity: 0.95; }
  100% { transform: translateY(-105vh) translateX(22px) scale(1.15); opacity: 0; }
}

.ember-burst {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  background: url("/assets/ember.svg") center/contain no-repeat;
  pointer-events: none;
  animation: ember-fly 900ms ease-out forwards;
}

@keyframes ember-fly {
  0% { transform: translate(0, 0) scale(0.3); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(1.1); opacity: 0; }
}

/* ---- accessibility / responsive ---- */

@media (prefers-reduced-motion: reduce) {
  .cell.win,
  .slot-frame.win-flash,
  .big-win-text,
  .spin,
  .mult-col.mult-pulse { animation: none; }
  .embers { display: none; }
  .ember-burst { display: none; }
}

@media (max-width: 720px) {
  :root { --cell-h: 86px; }
  .layout { padding: 0.6rem; }
  .controls { grid-template-columns: 1fr 1fr; }
  .results, .panels { grid-template-columns: 1fr 1fr; }
  .topbar { justify-content: center; }
  .slot-frame { gap: 0.45rem; padding: 0.4rem 0.5rem; }
  .rail-caption { font-size: 0.55rem; letter-spacing: 0.1em; }
}

/* 360px-wide phones: the rail + 3 reels + frame/layout padding must still
   fit on one line, so the cell shrinks rather than the rail. */
@media (max-width: 420px) {
  :root { --cell-h: 72px; }
  .brand-logo { width: min(230px, 66vw); }
}

@media (max-height: 620px) {
  :root { --cell-h: 68px; }
  .modal-card { padding: 0.85rem 1rem; }
  .playing-card { width: 76px; height: 106px; margin: 0.5rem auto; }
  .card-face { font-size: 1.9rem; }
  .card-btn { min-width: 76px; }
}

/* ---- profit-practices presentation layer (display only) ---- */

.wins-ticker {
  margin-top: 0.55rem;
  min-height: 1.2em;
  text-align: center;
  font-size: 0.92rem;
  color: var(--gold-2);
  text-shadow: 0 0 8px rgba(255, 176, 32, 0.5);
}

.bet-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }

.chip-bet {
  background: #241a12;
  color: #f4efe9;
  border: 1px solid rgba(245, 200, 75, 0.35);
  border-radius: 999px;
  padding: 0.35rem 0.6rem;
  font-weight: 700;
  cursor: pointer;
}

.chip-bet.active { background: var(--ember); border-color: var(--gold); color: #fff; }

.chip-bet.anchor {
  border-color: var(--gold);
  color: var(--gold-2);
  font-size: 1.02rem;
  padding: 0.35rem 0.85rem;
  box-shadow: 0 0 10px rgba(245, 200, 75, 0.45);
}

.chip-bet.anchor.active { background: var(--gold); color: #241a00; }

.auto-count {
  background: #241a12;
  color: #f4efe9;
  border: 1px solid rgba(245, 200, 75, 0.35);
  border-radius: 10px;
  padding: 0 0.4rem;
}

.almost-banner {
  position: absolute;
  left: 50%;
  top: 9%;
  transform: translateX(-50%);
  z-index: 5;
  font-size: clamp(1.4rem, 5vw, 2.4rem);
  font-weight: 900;
  letter-spacing: 0.1em;
  color: var(--gold-2);
  text-shadow: 0 0 16px rgba(255, 176, 32, 0.95), 0 3px 0 #6f2900;
  pointer-events: none;
  animation: bigwin-pop 0.45s ease-out;
}

.cell.near {
  animation: pulse 500ms ease-in-out 3;
  background: radial-gradient(circle, rgba(245, 200, 75, 0.35), transparent 70%);
}

.cell.near img { filter: drop-shadow(0 0 10px rgba(245, 200, 75, 0.95)); }

.slot-frame.tease { animation: tease-pulse 0.5s ease-in-out infinite; }

@keyframes tease-pulse {
  0%, 100% { box-shadow: inset 0 0 34px rgba(0, 0, 0, 0.75), 0 0 18px rgba(255, 106, 26, 0.35); }
  50% { box-shadow: inset 0 0 34px rgba(0, 0, 0, 0.4), 0 0 44px 8px rgba(255, 176, 32, 0.85); }
}

.big-win-banner.tier-ldw { animation-duration: 1.3s; background: rgba(12, 6, 3, 0.5); }
.big-win-banner.tier-ldw .big-win-text { font-size: clamp(1.2rem, 4vw, 1.8rem); }
.big-win-banner.tier-big { animation-duration: 2.6s; }
.big-win-banner.tier-mega { animation-duration: 3.4s; }
.big-win-banner.tier-mega .big-win-text { color: #ffd76a; font-size: clamp(2rem, 7vw, 3.6rem); }
.big-win-banner.tier-epic { animation-duration: 4.2s; background: rgba(30, 4, 20, 0.78); }
.big-win-banner.tier-epic .big-win-text { color: #ff9df3; font-size: clamp(2.3rem, 8vw, 4.2rem); }

.recent-results {
  margin-top: 0.8rem;
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
}

.recent-strip { display: flex; gap: 0.35rem; flex-wrap: wrap; }

.recent-chip {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(245, 200, 75, 0.2);
  color: var(--muted);
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
  font-size: 0.85rem;
}

.recent-chip.won { color: var(--gold-2); border-color: rgba(245, 200, 75, 0.6); }

@media (prefers-reduced-motion: reduce) {
  .almost-banner, .cell.near, .slot-frame.tease { animation: none; }
}