/* drachenhort.css — the Drachenhort skin. Dark graphite cabinet + molten
   amber-gold, glowing runes. The game is its own dark "cabinet" regardless of
   the site's light/dark theme.

   THEMING: every colour lives in the :root token block below (--dh-*). To
   reskin, edit ONLY that block (or override the tokens on a wrapper element).
   Fonts reuse the site's self-hosted Sora (display) + Figtree (body) — no CDN.

   Mobile-first, 44px touch targets, prefers-reduced-motion supported. */

/* ---------- design tokens ---------- */

:root {
  /* cabinet surfaces (dark graphite, warm) */
  --dh-cab: #1c1610;
  --dh-cab-deep: #120f0c;
  --dh-panel: #241c13;
  --dh-line: #3c2f1e;

  /* reels */
  --dh-cell-bg: #241a0f;
  --dh-cell-edge: #4a3719;
  --dh-cell-size: clamp(48px, 13vw, 120px);
  --dh-gap: var(--s-8);

  /* molten amber-gold identity */
  --dh-gold-light: #f6ce6b;
  --dh-gold: #f1ba4b;
  --dh-amber: #d89529;
  --dh-amber-deep: #a66312;
  --dh-bronze: #6e3f0c;
  --dh-glow: #ffe9b8;

  /* text */
  --dh-ink: #f3ead9;
  --dh-muted: #b9a888;
  --dh-on-gold: #2a1c08;

  /* states */
  --dh-win-glow: rgba(241, 186, 75, 0.55);
  --dh-note-bg: rgba(241, 186, 75, 0.12);

  /* type */
  --dh-font-display: 'Sora', system-ui, sans-serif;
  --dh-font-body: 'Figtree', system-ui, sans-serif;

  --dh-radius: var(--radius);
}

/* ---------- base ---------- */

.drachenhort {
  font-family: var(--dh-font-body);
  color: var(--dh-ink);
}

.drachenhort *,
.drachenhort *::before,
.drachenhort *::after {
  box-sizing: border-box;
}

.drachenhort .dh-sym {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------- cabinet ---------- */

.dh-cabinet {
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(216, 149, 41, 0.10), transparent 55%),
    linear-gradient(180deg, var(--dh-cab), var(--dh-cab-deep));
  border: 1px solid var(--dh-line);
  border-radius: var(--dh-radius);
  padding: var(--s-24);
}

.dh-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-8) var(--s-16);
  max-width: calc(5 * var(--dh-cell-size) + 4 * var(--dh-gap) + var(--s-24) + 2px);
  margin: 0 auto var(--s-16);
}

.dh-title {
  margin: 0;
  font-family: var(--dh-font-display);
  font-weight: 800;
  font-size: clamp(1.3rem, 3.4vw, 1.8rem);
  letter-spacing: 0.02em;
  background: linear-gradient(180deg, var(--dh-gold-light), var(--dh-amber));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.dh-funnote {
  margin: 0;
  padding: var(--s-4) var(--s-12);
  font-size: var(--fs-12);
  font-weight: 600;
  color: var(--dh-gold);
  background: var(--dh-note-bg);
  border: 1px solid rgba(241, 186, 75, 0.35);
  border-radius: 999px;
  white-space: nowrap;
}

/* ---------- stage: backdrop + reels ---------- */

.dh-stage {
  position: relative;
  margin: 0 auto;
  max-width: calc(5 * var(--dh-cell-size) + 4 * var(--dh-gap) + var(--s-24) + 2px);
}

.dh-backdrop {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--radius-m);
  pointer-events: none;
}

.dh-backdrop-art {
  width: 100%;
  height: 100%;
}

.dh-reels {
  position: relative;
  display: grid;
  gap: var(--dh-gap);
  justify-content: center;
  padding: var(--s-12);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--dh-line);
  border-radius: var(--radius-m);
}

.dh-reel {
  position: relative;
  height: calc(3 * var(--dh-cell-size) + 2 * var(--dh-gap));
  overflow: hidden;
  border-radius: var(--radius-m);
}

/* While a win is shown, the reel column holds a winning cell whose pulse (scale 1.07) + outward glow
   would otherwise be clipped by the column's overflow:hidden (needed only during the spin). Lift the
   clip — and raise the column above its neighbours — just for those columns. Safe: by win time the
   strip is already normalized to the 3 visible cells (render.js land() → setColumn), so nothing else
   can leak out. No .dh-cell--win exists during a spin, so the clip stays put while the reels roll. */
.dh-reel:has(.dh-cell--win) { overflow: visible; z-index: 2; }

.dh-strip {
  display: flex;
  flex-direction: column;
  row-gap: var(--dh-gap);
  will-change: transform;
}

.dh-cell {
  width: var(--dh-cell-size);
  height: var(--dh-cell-size);
  flex: none;
  padding: calc(var(--dh-cell-size) * 0.08);
  background:
    radial-gradient(90% 90% at 50% 20%, rgba(246, 206, 107, 0.06), transparent 60%),
    var(--dh-cell-bg);
  border: 1.5px solid var(--dh-cell-edge);
  border-radius: var(--radius-m);
  user-select: none;
}

.dh-reel--spinning .dh-cell {
  filter: blur(2px) brightness(1.08);
}

.dh-reel--stopped .dh-cell {
  animation: dh-land 0.3s ease-out;
}

.dh-cell--win {
  border-color: var(--dh-gold);
  background:
    radial-gradient(90% 90% at 50% 30%, rgba(246, 206, 107, 0.22), transparent 70%),
    var(--dh-cell-bg);
  box-shadow: 0 0 4px 2px var(--dh-win-glow);
  animation: dh-pulse 0.9s ease-in-out 3;
}
/* teaser cells declare their `border` shorthand LATER than .dh-cell--win, so the win border-color
   above loses at equal specificity — re-assert it here with a higher-specificity selector. */
.dh-teaser-cell.dh-cell--win { border-color: var(--dh-gold); }

.dh-cell--expanded {
  border-color: var(--dh-glow);
  box-shadow: 0 0 18px 4px var(--dh-win-glow), inset 0 0 12px rgba(255, 233, 184, 0.35);
}

/* golden takeover pillar for the expanding wild */
.dh-expand-pillar {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-m);
  background: linear-gradient(180deg,
    rgba(246, 206, 107, 0.0) 0%,
    rgba(246, 206, 107, 0.75) 18%,
    rgba(216, 149, 41, 0.85) 50%,
    rgba(246, 206, 107, 0.75) 82%,
    rgba(246, 206, 107, 0.0) 100%);
  box-shadow: 0 0 22px 6px var(--dh-win-glow);
  pointer-events: none;
  transform-origin: 50% 50%;
}

.dh-expand-pillar--css {
  animation: dh-expand 0.98s ease-out forwards;
}

@keyframes dh-expand {
  0% { transform: scaleY(0.12); opacity: 0; }
  38% { transform: scaleY(1); opacity: 1; }
  62% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}

@keyframes dh-land {
  0% { transform: translateY(-7px); }
  60% { transform: translateY(2px); }
  100% { transform: translateY(0); }
}

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

/* effects layer (coin shower) */
.dh-fx {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--radius-m);
  pointer-events: none;
}

.dh-coin {
  position: absolute;
  top: -30px;
  width: 20px;
  height: 20px;
}

.dh-coin svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

.dh-coin--fall {
  animation-name: dh-coinfall;
  animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.6);
  animation-fill-mode: forwards;
}

@keyframes dh-coinfall {
  to { transform: translateY(120vh) rotate(320deg); opacity: 0.85; }
}

/* ---------- hoard meter ---------- */

/* `display: flex` would beat the UA's [hidden] rule — restore it explicitly. */
.dh-meter[hidden] {
  display: none;
}

.dh-meter {
  display: flex;
  align-items: center;
  gap: var(--s-12);
  max-width: 520px;
  margin: var(--s-16) auto 0;
  padding: var(--s-8) var(--s-16);
  background: var(--dh-panel);
  border: 1px solid var(--dh-line);
  border-radius: 999px;
}

.dh-meter-label {
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dh-muted);
  white-space: nowrap;
}

.dh-meter-track {
  position: relative;
  flex: 1;
  height: 14px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--dh-line);
  border-radius: 999px;
}

.dh-meter-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--dh-amber-deep), var(--dh-amber), var(--dh-gold-light));
  box-shadow: 0 0 10px rgba(241, 186, 75, 0.6);
  transition: width 0.5s ease-out;
}

.dh-meter-notch {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  background: var(--dh-gold);
  opacity: 0.8;
}

.dh-meter-notch::after {
  content: attr(data-mult);
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--fs-10);
  font-weight: 700;
  color: var(--dh-gold);
  font-family: var(--dh-font-display);
}

.dh-meter-mult {
  min-width: 2.6em;
  text-align: center;
  font-family: var(--dh-font-display);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--dh-gold-light);
  font-variant-numeric: tabular-nums;
}

.dh-meter--step .dh-meter-mult {
  animation: dh-multstep 0.7s ease-out 2;
}

@keyframes dh-multstep {
  0%, 100% { transform: scale(1); text-shadow: none; }
  50% { transform: scale(1.35); text-shadow: 0 0 14px var(--dh-glow); }
}

/* ---------- messages, free-spins pill ---------- */

.dh-msg {
  min-height: var(--s-28);
  margin: var(--s-16) 0 var(--s-8);
  text-align: center;
  font-weight: 700;
  font-size: var(--fs-16);
  color: var(--dh-glow);
}

.dh-freespins {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-12);
  width: fit-content;
  margin: 0 auto var(--s-12);
  padding: var(--s-8) var(--s-16);
  background: linear-gradient(180deg, var(--dh-amber), var(--dh-amber-deep));
  color: var(--dh-on-gold);
  border-radius: 999px;
  font-weight: 800;
  font-size: var(--fs-14);
}

.dh-freespins-title {
  font-family: var(--dh-font-display);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: var(--fs-12);
}

.dh-freespins[hidden] {
  display: none;
}

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

.dh-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-16) var(--s-24);
  margin-top: var(--s-16);
}

.dh-stat {
  font-size: var(--fs-14);
  white-space: nowrap;
}

.dh-stat-label {
  color: var(--dh-muted);
}

.dh-stat-value {
  font-variant-numeric: tabular-nums;
  color: var(--dh-ink);
}

.dh-bet {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  font-size: var(--fs-14);
}

.dh-bet-value {
  min-width: 2ch;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.dh-btn {
  min-height: var(--s-48);
  min-width: var(--s-48);
  padding: var(--s-8) var(--s-16);
  font-family: var(--dh-font-display);
  font-size: var(--fs-16);
  font-weight: 700;
  color: var(--dh-on-gold);
  background: linear-gradient(180deg, var(--dh-gold-light), var(--dh-amber));
  border: 1px solid var(--dh-amber-deep);
  border-radius: var(--radius-m);
  cursor: pointer;
  touch-action: manipulation;
  /* gradients aren't animatable, so the smooth hover comes from brightness/lift/shadow instead of a
     (instant) gradient swap */
  transition: filter .2s ease, transform .2s ease, box-shadow .2s ease;
}

.dh-btn:hover:not(:disabled) {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.dh-btn:active:not(:disabled) {
  transform: translateY(0);
  filter: brightness(1.02);
}

@media (prefers-reduced-motion: reduce) {
  .dh-btn,
  .dh-auto-count { transition: none; }
  .dh-btn:hover:not(:disabled) { transform: none; }
}

.dh-btn:focus-visible {
  outline: 3px solid var(--dh-glow);
  outline-offset: 2px;
}

.dh-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.dh-btn--spin {
  min-width: 10rem;
}

/* pointer-tracking glow (opt-in via .dh-btn--track): a soft spotlight follows the cursor instead of
   the instant gradient-swap hover — a gradient background can't transition, but opacity can. --mx/--my
   are set in px by JS on pointermove; the label lives in .dh-btn__label so the glow stays behind text. */
.dh-btn--track { position: relative; overflow: hidden; }
/* cancel the .dh-btn:hover gradient swap — keep the base gradient, let the glow carry the hover state */
.dh-btn--track:hover:not(:disabled) { background: linear-gradient(180deg, var(--dh-gold-light), var(--dh-amber)); }
.dh-btn--track::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle 7rem at var(--mx, 50%) var(--my, 50%), rgba(255, 233, 184, 0.9), transparent 60%);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  z-index: 0;
}
.dh-btn--track:hover::before { opacity: 1; }
.dh-btn__label { position: relative; z-index: 1; }

.dh-reset {
  display: block;
  margin: var(--s-12) auto 0;
}

.dh-reset[hidden] {
  display: none;
}

/* ---------- autospin ---------- */

.dh-auto {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-12) var(--s-24);
}

/* segmented count selector: 10 / 25 / 50 */
.dh-auto-counts {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4);
  background: var(--dh-panel);
  border: 1px solid var(--dh-line);
  border-radius: 999px;
}

.dh-auto-count {
  min-height: var(--s-48);
  min-width: var(--s-48);
  padding: var(--s-4) var(--s-12);
  font-family: var(--dh-font-display);
  font-size: var(--fs-14);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--dh-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  touch-action: manipulation;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.dh-auto-count:hover:not(:disabled):not([aria-pressed="true"]) {
  color: var(--dh-ink);
  background-color: var(--dh-note-bg);
}

.dh-auto-count:focus-visible {
  outline: 3px solid var(--dh-glow);
  outline-offset: 2px;
}

.dh-auto-count[aria-pressed="true"] {
  color: var(--dh-on-gold);
  background: linear-gradient(180deg, var(--dh-gold-light), var(--dh-amber));
  border-color: var(--dh-amber-deep);
}

.dh-auto-count:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* the Auto/Stopp button — a regular .dh-btn with a stable width so "Stopp (50)" doesn't jump */
.dh-auto-btn {
  min-width: 10rem;
}

.dh-auto-btn__label {
  font-variant-numeric: tabular-nums;
}

/* running = the stop control: dark panel look so it reads clearly different from the golden Auto */
.dh-auto-btn--running {
  color: var(--dh-gold-light);
  background: var(--dh-panel);
  border-color: var(--dh-amber-deep);
}

.dh-auto-btn--running:hover:not(:disabled) {
  background: var(--dh-panel);
}

/* ---------- paytable ---------- */

.dh-paytable {
  margin-top: var(--s-16);
  padding: var(--s-24);
  background: var(--dh-panel);
  border: 1px solid var(--dh-line);
  border-radius: var(--dh-radius);
}

.dh-paytable-title {
  margin: 0 0 var(--s-12);
  font-family: var(--dh-font-display);
  color: var(--dh-gold-light);
}

.dh-paytable-scroll { overflow-x: auto; }
.dh-paytable-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-16);
}

.dh-paytable-table th,
.dh-paytable-table td {
  padding: var(--s-8) var(--s-16);
  border: 1px solid var(--dh-line);
  text-align: center;
  color: var(--dh-ink);
}

.dh-paytable-table thead th {
  background: var(--dh-cab-deep);
  color: var(--dh-gold);
  font-family: var(--dh-font-display);
  font-size: var(--fs-14);
}

.dh-paytable-table thead th:first-child {
  text-align: left;
}

.dh-paytable-table tbody tr:nth-child(even) {
  background: rgba(0, 0, 0, 0.22);
}

/* keep this a real table-cell (not display:flex) so border-collapse merges its borders with the
   neighbours — a flex td drops out of the table model and its border doubles up on the seams. */
.dh-paytable-table td.dh-paytable-symbol {
  text-align: left;
  white-space: nowrap;
}

.dh-paytable-glyph {
  display: inline-block;
  vertical-align: middle;
  margin-right: var(--s-12);
  width: var(--s-32);
  height: var(--s-32);
}
.dh-paytable-symbol span:last-child { vertical-align: middle; }

.dh-paytable-notes {
  margin: var(--s-16) 0;
  padding-left: var(--s-24);
  font-size: var(--fs-16);
  color: var(--dh-muted);
}

.dh-paytable-notes li {
  margin: var(--s-4) 0;
}

.dh-paytable-feature {
  margin: var(--s-16) 0;
  padding: var(--s-16) var(--s-24);
  background: var(--dh-note-bg);
  border: 1px solid rgba(241, 186, 75, 0.3);
  border-radius: var(--radius-m);
  font-size: var(--fs-16);
}

.dh-paytable-feature h4 {
  margin: var(--s-8) 0;
  font-family: var(--dh-font-display);
  color: var(--dh-gold);
}

.dh-paytable-feature p {
  margin: var(--s-8) 0;
  color: var(--dh-ink);
}

.dh-paytable-feature ul {
  margin: var(--s-8) 0;
  padding-left: var(--s-24);
  color: var(--dh-ink);
}

.dh-paytable h4 {
  margin: var(--s-8) 0;
  font-family: var(--dh-font-display);
  color: var(--dh-gold-light);
}

.dh-paylines {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-12);
}

.dh-payline {
  margin: 0;
  text-align: center;
}

.dh-payline-grid {
  display: grid;
  gap: var(--s-4);
  padding: var(--s-8);
  background: var(--dh-cab-deep);
  border: 1px solid var(--dh-line);
  border-radius: var(--radius-s);
}

.dh-payline-cell {
  width: 13px;
  height: 13px;
  border-radius: var(--radius-xs);
  background: var(--dh-line);
}

.dh-payline-cell--on {
  background: var(--dh-gold);
}

.dh-payline figcaption {
  font-size: var(--fs-12);
  color: var(--dh-muted);
  margin-top: var(--s-4);
}

/* ---------- teaser (hero) ---------- */

.dh-teaser-cab {
  padding: var(--s-16);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(216, 149, 41, 0.12), transparent 55%),
    linear-gradient(180deg, var(--dh-cab), var(--dh-cab-deep));
  border: 1px solid var(--dh-line);
  border-radius: var(--dh-radius);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.4);
}

.dh-teaser-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-8);
  margin-bottom: var(--s-12);
}

.dh-teaser-title {
  font-family: var(--dh-font-display);
  font-weight: 800;
  font-size: var(--s-20);
  background: linear-gradient(180deg, var(--dh-gold-light), var(--dh-amber));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.dh-teaser-note {
  font-size: var(--s-12);
  font-weight: 600;
  color: var(--dh-gold);
  white-space: nowrap;
}

.dh-teaser-reels {
  position: relative;
  display: block;
  width: 100%;
  padding: var(--s-8);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--dh-line);
  border-radius: var(--radius-m);
  cursor: pointer;
  overflow: hidden;
}

.dh-teaser-reels:focus-visible {
  outline: 3px solid var(--dh-glow);
  outline-offset: 2px;
}

.dh-teaser-grid {
  display: grid;
  gap: var(--s-4);
}

.dh-teaser-cell {
  aspect-ratio: 1;
  min-width: 0; /* grid items default to min-width:auto (content min) → the 5×1fr board couldn't
                   shrink below its cells' content size and forced page overflow ≤340px. Let it shrink. */
  padding: var(--s-8);
  background: var(--dh-cell-bg);
  border: 1px solid var(--dh-cell-edge);
  border-radius: var(--radius-s);
}

.dh-teaser-cell svg {
  display: block;
  width: 100%;
  height: 100%;
}

.dh-teaser-grid--spin .dh-teaser-cell {
  filter: blur(1.5px) brightness(1.08);
}

/* first-visit "tap to spin" affordance — a soft gold ripple emanating from the grid centre.
   The whole reels IS a button; this is purely a discoverability cue so a first-time visitor
   realises the board is tappable. JS adds .is-tapped on the first spin, killing it for good.
   pointer-events:none so it never intercepts the tap it's advertising. */
.dh-teaser-reels::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2.5rem;
  height: 2.5rem;
  margin: -1.25rem 0 0 -1.25rem;
  border-radius: 50%;
  border: 2px solid var(--dh-gold, #f6ce6b);
  pointer-events: none;
  opacity: 0;
  animation: dh-tap-pulse 2.6s ease-out infinite;
}
.dh-teaser-reels.is-tapped::after {
  content: none;
}
@keyframes dh-tap-pulse {
  0%   { transform: scale(0.45); opacity: 0; }
  18%  { opacity: 0.7; }
  70%  { transform: scale(2.4); opacity: 0; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* idle amber shimmer sweep */
.dh-shimmer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg,
    transparent 38%,
    rgba(246, 206, 107, 0.14) 47%,
    rgba(255, 233, 184, 0.22) 50%,
    rgba(246, 206, 107, 0.14) 53%,
    transparent 62%);
  background-size: 240% 100%;
  background-position: 120% 0;
  animation: dh-shimmer 4.8s ease-in-out infinite;
}

@keyframes dh-shimmer {
  0%, 55%   { background-position: 120% 0; opacity: 0; }   /* idle off-screen, invisible */
  62%       { opacity: 1; }                                 /* fade in as the band enters */
  83%       { opacity: 1; }                                 /* stays visible through the sweep */
  90%, 100% { background-position: -120% 0; opacity: 0; }   /* fade out at the end — no abrupt vanish */
}

.dh-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: var(--s-12);
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .dh-shimmer,
  .dh-teaser-reels::after,
  .dh-reel--stopped .dh-cell,
  .dh-cell--win,
  .dh-coin--fall,
  .dh-expand-pillar--css,
  .dh-meter--step .dh-meter-mult {
    animation: none;
  }
  .dh-teaser-reels::after {
    opacity: 0;
  }
  .dh-reel--spinning .dh-cell,
  .dh-teaser-grid--spin .dh-teaser-cell {
    filter: none;
  }
  .dh-meter-fill,
  .dh-btn--track::before {
    transition: none;
  }
}

/* ---------- small screens ---------- */

@media (max-width: 47.9375rem) { /* 767px — unified with the site's phone breakpoint (was 520px) */
  .dh-cabinet {
    padding: var(--s-12) var(--s-12) var(--s-16);
  }
  .dh-controls {
    gap: var(--s-12) var(--s-16);
  }
  .dh-auto {
    gap: var(--s-12) var(--s-16);
  }
  .dh-auto-btn {
    min-width: 6.5rem;
  }
  .dh-paytable-table {
    font-size: var(--fs-14);
    min-width: 25rem; /* scrolls horizontally inside .dh-paytable-scroll instead of squashing */
  }
  .dh-paytable-table th,
  .dh-paytable-table td {
    padding: var(--s-4) var(--s-8);
  }
  .dh-meter-label {
    display: none;
  }
}

/* ≤767px — the teaser head (title + note) can't sit side-by-side, let it wrap */
@media (max-width: 47.9375rem) {
  .dh-teaser-head {
    gap: var(--s-4) var(--s-16);
    flex-wrap: wrap;
  }
}