:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #09030c;
  color: #fff7dc;
  --gold: #ffc83d;
  --cream: #fff1bc;
  --ink: #17070a;
  --panel: rgba(22, 8, 20, 0.96);
  --focus: #7cecff;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-width: 280px;
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background:
    radial-gradient(circle at 50% 44%, #4b162d 0, #190719 44%, #050207 100%);
}

button,
dialog {
  font: inherit;
}

button {
  color: inherit;
}

button:focus-visible,
dialog:focus-visible {
  outline: 5px solid var(--focus);
  outline-offset: 4px;
}

button:disabled {
  cursor: not-allowed;
  filter: grayscale(0.7);
  opacity: 0.46;
}

[hidden] {
  display: none !important;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

#gameShell {
  position: fixed;
  inset: 0;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.artboard {
  --game-scale: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1672px;
  height: 941px;
  overflow: hidden;
  transform: translate(-50%, -50%) scale(var(--game-scale));
  transform-origin: center;
  background: #221008;
  box-shadow: 0 0 90px rgba(0, 0, 0, 0.84);
  isolation: isolate;
}

#gameCanvas {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 1672px;
  height: 941px;
  display: block;
}

/* Doors need their own transparent plane. Painting them into the scene canvas
   left the live HTML meters and controls above the artwork; this overlay lets
   each moving door cover the complete cabinet progressively. */
#doorCanvas {
  position: absolute;
  z-index: 22;
  inset: 0;
  width: 1672px;
  height: 941px;
  display: block;
  pointer-events: none;
}

/* Big Win is painted into the main canvas. Raise that canvas only while the
   presentation is active so the award plaque and particles cover the cabinet
   controls without changing their normal hit targets. */
.artboard.is-big-win #gameCanvas,
.artboard.is-big-win-active #gameCanvas,
#gameShell.is-big-win-active #gameCanvas {
  z-index: 20;
}

/* The BIG WIN canvas must cover the cabinet buttons, but the live account
   values remain readable throughout the count-up. */
.artboard.is-big-win-active .meter,
#gameShell.is-big-win-active .meter {
  z-index: 21;
}

/* Free Spins state must remain visible beside the BIG WIN takeover just like
   the live account meters. The door canvas still sits one layer higher so its
   authored transition continues to cover the complete cabinet. */
.artboard.is-big-win-active .feature-hud,
#gameShell.is-big-win-active .feature-hud {
  z-index: 21;
}

.meter {
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 16px 28px;
  pointer-events: none;
  color: #fffbe1;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: 32px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: 1px;
  text-shadow: 0 3px 2px #000, 0 0 10px rgba(255, 177, 25, 0.5);
}

.balance-meter {
  left: 166px;
  top: 806px;
  width: 236px;
  height: 115px;
}

.bet-meter {
  left: 492px;
  top: 806px;
  width: 151px;
  height: 115px;
}

.win-meter {
  left: 1200px;
  top: 806px;
  width: 294px;
  height: 115px;
}

.cabinet-button {
  position: absolute;
  z-index: 9;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.cabinet-button::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 100ms ease, box-shadow 100ms ease, transform 80ms ease;
}

.cabinet-button:hover::before,
.cabinet-button:focus-visible::before {
  opacity: 1;
  box-shadow: inset 0 0 18px rgba(255, 249, 166, 0.7), 0 0 20px rgba(255, 167, 18, 0.78);
}

.cabinet-button:active::before {
  transform: translateY(3px) scale(0.97);
  opacity: 0.85;
}

.menu-button {
  left: 38px;
  top: 794px;
  width: 128px;
  height: 133px;
  border-radius: 50%;
}

.bet-down-button {
  left: 414px;
  top: 806px;
  width: 78px;
  height: 115px;
  border-radius: 13px;
}

.bet-up-button {
  left: 643px;
  top: 806px;
  width: 78px;
  height: 115px;
  border-radius: 13px;
}

.spin-button {
  z-index: 12;
  left: 728px;
  top: 742px;
  width: 216px;
  height: 199px;
  border-radius: 50%;
  isolation: isolate;
  overflow: visible;
}

.spin-button::before {
  z-index: 1;
  left: -17px;
  top: -11px;
  width: 235px;
  height: 235px;
  border-radius: 0;
  opacity: 1;
  background: url("../assets/art/ui/spin-idle.png") center / 100% 100% no-repeat;
  box-shadow: none;
  filter: none;
  transform: none;
  transition: filter 120ms ease;
  pointer-events: none;
}

.spin-button:hover::before,
.spin-button:focus-visible::before {
  background-image: url("../assets/art/ui/spin-over.png");
  opacity: 1;
  box-shadow: none;
  filter: none;
}

.spin-button:active::before {
  opacity: 1;
  transform: none;
}

.spin-button.is-spinning::before {
  background-image: url("../assets/art/ui/stop-idle.png");
  filter: none;
}

.spin-button.is-spinning:hover::before,
.spin-button.is-spinning:focus-visible::before {
  background-image: url("../assets/art/ui/stop-over.png");
  filter: none;
}

.spin-button.is-spinning:active::before,
.spin-button.is-spinning.is-pressed::before {
  background-image: url("../assets/art/ui/stop-press.png");
  filter: none;
  transform: none;
}

/* Keep STOP visible between individual autoplay rounds. The app toggles the
   artboard hook for the whole autoplay session, not only while reels move. */
.artboard.is-autoplay .spin-button::before,
.spin-button.is-autoplay::before {
  background-image: url("../assets/art/ui/stop-idle.png");
  filter: none;
}

.artboard.is-autoplay .spin-button:hover::before,
.artboard.is-autoplay .spin-button:focus-visible::before,
.spin-button.is-autoplay:hover::before,
.spin-button.is-autoplay:focus-visible::before,
.artboard.is-autoplay .spin-button:active::before,
.spin-button.is-autoplay:active::before {
  background-image: url("../assets/art/ui/stop-over.png");
}

.max-bet-button {
  left: 946px;
  top: 806px;
  width: 237px;
  height: 115px;
  border-radius: 14px;
  font-size: 0;
}

.auto-button {
  left: 1504px;
  top: 794px;
  width: 128px;
  height: 133px;
  border-radius: 50%;
}

.auto-button.is-active::before,
.auto-button[data-mode="stop"]::before,
.artboard.is-autoplay .auto-button::before {
  inset: auto;
  left: 1px;
  top: 17px;
  width: 104px;
  height: 104px;
  border-radius: 0;
  opacity: 1;
  background: url("../assets/art/ui/autoplay-stop.png") center / 100% 100% no-repeat;
  box-shadow: none;
  filter: none;
  pointer-events: none;
}

.auto-button.is-active:hover::before,
.auto-button.is-active:focus-visible::before,
.auto-button[data-mode="stop"]:hover::before,
.auto-button[data-mode="stop"]:focus-visible::before {
  filter: none;
}

.autoplay-remaining {
  position: absolute;
  z-index: 18;
  left: 784px;
  top: 819px;
  width: 90px;
  height: 60px;
  padding: 0;
  border: 0;
  display: grid;
  place-items: center;
  background: transparent;
  color: #fff8d6;
  font: 900 34px/1 Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-variant-numeric: tabular-nums;
  text-align: center;
  text-shadow: 0 3px 2px #210000, 0 0 8px #ff3a1f, 0 0 2px #000;
  box-shadow: none;
  pointer-events: none;
}

.message-bar.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.feature-hud {
  position: absolute;
  z-index: 16;
  left: 16px;
  top: -16px;
  width: 320px;
  height: 290px;
  padding: 143px 48px 21px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 8px;
  background: url("../assets/art/ui/free-spins-rope-panel.png") center / 100% 100% no-repeat;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.72));
  pointer-events: none;
}

.feature-hud-stat {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-align: center;
}

/* Screenshot audit: the top field is bounded by the turquoise centres at
   y=81/134 and the lower field by y=134/201. The equal CSS grid left the top
   copy four pixels high and the lower copy four pixels low. */
.feature-hud-stat:first-child {
  transform: translateY(4px);
}

.feature-hud-stat:last-child {
  transform: translateY(-4px);
}

.feature-hud-label {
  color: #ffd766;
  font: 900 13px/1 Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  letter-spacing: 0.7px;
  white-space: nowrap;
  text-shadow: 0 2px 1px #3b1005;
}

.feature-hud output {
  max-width: 100%;
  overflow: hidden;
  color: #fff8d7;
  font: 900 22px/1 Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 3px 1px #2b0903, 0 0 8px rgba(255, 181, 44, 0.62);
}

.feature-hud:not([hidden]) {
  animation: rope-panel-drop 560ms cubic-bezier(0.18, 0.86, 0.28, 1.12) both;
  transform-origin: 50% 0;
}

@keyframes rope-panel-drop {
  0% { opacity: 0; transform: translateY(-115px) rotate(-2.5deg); }
  70% { opacity: 1; transform: translateY(7px) rotate(1.2deg); }
  86% { transform: translateY(-3px) rotate(-0.55deg); }
  100% { opacity: 1; transform: translateY(0) rotate(0); }
}

.popover {
  position: absolute;
  z-index: 30;
  padding: 25px;
  border: 4px solid #eead2d;
  border-radius: 21px;
  background:
    linear-gradient(145deg, rgba(60, 20, 15, 0.98), rgba(16, 7, 18, 0.98));
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.74), inset 0 0 0 3px #6e3514;
  color: #fff2ca;
}

.popover h2 {
  margin: 0 0 16px;
  color: #ffd45e;
  font: 900 31px/1 Georgia, serif;
  text-transform: uppercase;
  text-shadow: 0 3px #4b1608;
}

.popover p {
  margin: 12px 0;
  font-size: 17px;
  line-height: 1.38;
}

.popover button {
  min-height: 49px;
  padding: 9px 15px;
  border: 2px solid #d99226;
  border-radius: 10px;
  background: linear-gradient(#3d2131, #180c18);
  color: #fff3c9;
  font-size: 19px;
  font-weight: 800;
  cursor: pointer;
}

.popover button:hover {
  border-color: #fff1a2;
  background: linear-gradient(#6e382d, #2c1222);
}

.game-menu {
  left: 14px;
  bottom: 118px;
  width: 460px;
  height: 575px;
  padding: 104px 98px 68px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: url("../assets/art/ui/menu-popup-frame.png") center / 100% 100% no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 22px 28px rgba(0, 0, 0, 0.76));
}

.game-menu > button {
  display: block;
  max-width: 100%;
  width: 100%;
  margin: 5px 0;
  overflow-wrap: anywhere;
  white-space: normal;
  text-align: center;
}

.game-menu h2,
.autoplay-menu h2 {
  margin-bottom: 10px;
  color: #fff0a4;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  letter-spacing: 1.5px;
  text-align: center;
  text-shadow: 0 4px 2px #3b1005, 0 0 13px rgba(255, 171, 29, 0.72);
}

.game-menu p {
  max-width: 100%;
  margin: 8px 2px 0;
  overflow-wrap: anywhere;
  color: #f8dca6;
  font-size: 14px;
  line-height: 1.28;
  text-align: center;
}

.autoplay-menu {
  right: 14px;
  bottom: 126px;
  width: 570px;
  height: 456px;
  padding: 142px 82px 74px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: url("../assets/art/ui/autospin-popup-frame.png") center / 100% 100% no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 22px 28px rgba(0, 0, 0, 0.76));
}

.game-menu:not([hidden]),
.autoplay-menu:not([hidden]) {
  animation: popup-arrive 240ms cubic-bezier(0.2, 0.82, 0.25, 1.18) both;
}

.autoplay-menu p {
  max-width: 100%;
  margin: 3px 0 5px;
  overflow-wrap: anywhere;
  color: #f8dca6;
  font-size: 14px;
  line-height: 18px;
  text-align: center;
}

.autoplay-menu h2 {
  margin-bottom: 3px;
  font-size: 29px;
  line-height: 30px;
}

.choice-grid {
  display: grid;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 8px;
  margin: 4px 0 6px;
}

.choice-grid button {
  min-width: 0;
  max-width: 100%;
  min-height: 40px;
  padding: 4px 8px;
  font-size: 21px;
  line-height: 1;
  overflow-wrap: anywhere;
}

.autoplay-menu > button:last-child {
  display: block;
  max-width: 100%;
  width: 100%;
  min-height: 40px;
  padding: 5px 12px;
  font-size: 17px;
}

.game-menu button,
.autoplay-menu button {
  border-color: #f1b437;
  background:
    linear-gradient(180deg, rgba(76, 38, 20, 0.97), rgba(30, 12, 9, 0.98));
  box-shadow:
    inset 0 0 0 2px rgba(57, 19, 6, 0.9),
    inset 0 1px 10px rgba(255, 198, 82, 0.16),
    0 4px 8px rgba(0, 0, 0, 0.42);
}

.game-menu button:hover,
.autoplay-menu button:hover {
  background:
    linear-gradient(180deg, rgba(125, 66, 27, 0.99), rgba(48, 17, 10, 0.99));
}

@keyframes popup-arrive {
  from { opacity: 0; transform: translateY(28px) scale(0.9); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.qa-menu {
  right: 39px;
  top: 216px;
  width: 480px;
}

.qa-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
  margin: 15px 0;
}

.qa-grid button {
  font-size: 16px;
}

.qa-menu > button:last-child {
  width: 100%;
}

.announcement {
  position: absolute;
  z-index: 24;
  inset: 0;
  display: grid;
  place-items: center;
  background: radial-gradient(circle, rgba(11, 91, 150, 0.2), rgba(11, 2, 16, 0.72));
  pointer-events: none;
}

.announcement-plaque {
  width: 820px;
  min-height: 0;
  aspect-ratio: 1335 / 700;
  padding: 82px 108px 62px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: url("../assets/art/ui/ornate-plaque-popup.png") center / 100% 100% no-repeat;
  filter: drop-shadow(0 20px 34px rgba(0, 0, 0, 0.8));
  text-align: center;
  animation: plaque-arrive 360ms cubic-bezier(0.2, 0.9, 0.3, 1.25) both;
}

.announcement strong {
  color: #ffe162;
  font: 900 62px/0.95 Impact, Georgia, serif;
  letter-spacing: 3px;
  text-shadow: 0 5px 2px #561900, 0 0 18px #ed8c11;
}

.announcement span {
  margin-top: 20px;
  color: #fff8d8;
  font: 900 34px/1.1 Georgia, serif;
  text-shadow: 0 3px 2px #160508;
}

@keyframes plaque-arrive {
  from { opacity: 0; transform: scale(0.66) translateY(45px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.preloader {
  position: absolute;
  z-index: 100;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background:
    radial-gradient(circle at 50% 42%, rgba(126, 52, 36, 0.96), rgba(24, 6, 18, 0.99) 58%),
    #160713;
  color: #fff0b2;
  font-size: 25px;
  transition: opacity 300ms ease, visibility 300ms ease;
}

.preloader.is-complete {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-mark {
  width: 148px;
  height: 148px;
  display: grid;
  place-items: center;
  border: 8px double #ffc63b;
  border-radius: 50%;
  background: #39130e;
  color: #ffd75b;
  font: 900 70px/1 Impact, serif;
  box-shadow: 0 0 35px rgba(255, 147, 20, 0.66);
}

.loader-track {
  width: 460px;
  height: 18px;
  overflow: hidden;
  border: 2px solid #ffc64b;
  border-radius: 9px;
  background: #16070c;
}

.loader-track span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #f16f16, #ffe768, #4eeeff);
  transition: width 100ms linear;
}

.orientation-hint {
  display: none;
}

/* Illustrated frontier-ledger paytable */

#paytableDialog {
  width: min(1672px, 97vw, calc(95dvh * 1.7768331562));
  max-width: none;
  height: auto;
  max-height: 95dvh;
  aspect-ratio: 1672 / 941;
  margin: auto;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff0bd;
  box-shadow: none;
  user-select: text;
}

#paytableDialog::backdrop {
  background:
    radial-gradient(circle at 50% 42%, rgba(28, 16, 8, 0.62), rgba(2, 3, 5, 0.96) 72%),
    rgba(2, 3, 5, 0.94);
  backdrop-filter: blur(7px) saturate(0.7);
}

#paytableDialog[open] {
  animation: paytable-ledger-arrive 240ms cubic-bezier(0.2, 0.82, 0.24, 1) both;
}

@keyframes paytable-ledger-arrive {
  from { opacity: 0; transform: scale(0.965); }
  to { opacity: 1; transform: scale(1); }
}

#paytableDialog .dialogFrame {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 2.2%;
  background: #07090a;
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(255, 208, 92, 0.16),
    0 0 34px rgba(44, 226, 255, 0.08);
  isolation: isolate;
}

#paytableDialog .paytableContent,
#paytableDialog .paytableStage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

#paytableDialog .paytableContent {
  z-index: 1;
  display: block;
  overflow: hidden;
}

#paytableDialog .paytableStage {
  container: buffalo-paytable / inline-size;
  overflow: hidden;
  background: #080b0d url("../assets/art/ui/paytable-frontier-ledger.png?v=bb-paytable-1") center / 100% 100% no-repeat;
}

#paytableDialog .dialog-close {
  position: absolute;
  z-index: 20;
  top: 5.1%;
  right: 2.9%;
  display: grid;
  place-items: center;
  width: clamp(30px, 3.35vw, 50px);
  aspect-ratio: 1;
  height: auto;
  padding: 0 0 0.08em;
  border: 2px solid #f8ca58;
  border-radius: 50%;
  color: #fff4c0;
  background:
    radial-gradient(circle at 38% 30%, rgba(105, 237, 255, 0.26), transparent 29%),
    linear-gradient(150deg, #71330f, #1a0c08 62%, #071116);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(22px, 2.45vw, 38px);
  font-weight: 900;
  line-height: 0.75;
  text-shadow: 0 2px 0 #481006;
  box-shadow:
    inset 0 0 0 3px rgba(7, 5, 4, 0.78),
    inset 0 0 14px rgba(68, 229, 255, 0.12),
    0 0 12px rgba(255, 181, 37, 0.38);
  cursor: pointer;
  transition: filter 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

#paytableDialog .dialog-close:hover {
  filter: brightness(1.2) saturate(1.12);
  transform: scale(1.055);
}

#paytableDialog .dialog-close:focus-visible,
#paytableDialog .paytableNavButton:focus-visible,
#paytableDialog .paytableDot:focus-visible {
  outline: 3px solid #79edff;
  outline-offset: 2px;
}

#paytableDialog .paytablePage {
  --page-accent: #ffd365;
  --page-accent-rgb: 255, 194, 62;
  position: absolute;
  inset: 0;
  overflow: hidden;
  animation: paytable-page-reveal 190ms ease-out both;
}

#paytableDialog .paytablePage::before,
#paytableDialog .paytablePage::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: 27%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--page-accent-rgb), 0.12), transparent 68%);
  filter: blur(4px);
  pointer-events: none;
}

#paytableDialog .paytablePage::before {
  left: 5%;
  top: 21%;
}

#paytableDialog .paytablePage::after {
  right: 5%;
  bottom: 10%;
}

@keyframes paytable-page-reveal {
  from { opacity: 0; transform: translateX(0.7%); }
  to { opacity: 1; transform: translateX(0); }
}

#paytableDialog .paytablePage-premium {
  --page-accent: #ffd66f;
  --page-accent-rgb: 255, 190, 49;
}

#paytableDialog .paytablePage-cards {
  --page-accent: #61dfff;
  --page-accent-rgb: 65, 204, 255;
}

#paytableDialog .paytablePage-special {
  --page-accent: #6cecff;
  --page-accent-rgb: 52, 218, 255;
}

#paytableDialog .paytablePage-free {
  --page-accent: #89f4dc;
  --page-accent-rgb: 91, 230, 208;
}

#paytableDialog .paytablePage-ways {
  --page-accent: #ffca52;
  --page-accent-rgb: 255, 174, 43;
}

#paytableDialog .paytablePage-info {
  --page-accent: #89eaff;
  --page-accent-rgb: 78, 213, 255;
}

#paytableDialog .paytablePageTitle {
  position: absolute;
  z-index: 4;
  left: 27%;
  top: 27.3%;
  display: grid;
  grid-template-rows: 32% 68%;
  place-items: center;
  width: 46%;
  height: 9.1%;
  padding: 0.5% 2%;
  border: 1px solid rgba(var(--page-accent-rgb), 0.78);
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(102, 53, 15, 0.94), rgba(12, 13, 13, 0.96) 42%, rgba(28, 16, 8, 0.96));
  box-shadow:
    inset 0 0 0 2px rgba(4, 5, 5, 0.8),
    inset 0 0 17px rgba(var(--page-accent-rgb), 0.11),
    0 5px 12px rgba(0, 0, 0, 0.58),
    0 0 12px rgba(var(--page-accent-rgb), 0.12);
  text-align: center;
  text-transform: uppercase;
}

#paytableDialog .paytablePageTitle span {
  align-self: end;
  color: var(--page-accent);
  font-size: clamp(6px, 0.68vw, 11px);
  font-weight: 950;
  letter-spacing: 0.18em;
  line-height: 1;
  white-space: nowrap;
}

#paytableDialog .paytablePageTitle h2 {
  align-self: start;
  margin: 0;
  line-height: 1;
}

#paytableDialog .paytablePageTitle strong {
  display: block;
  color: #ffd66e;
  background: linear-gradient(#fff4b1 5%, #ffd055 39%, #d66b20 76%, #ffc44b 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: clamp(14px, 2.33vw, 37px);
  font-weight: 900;
  letter-spacing: 0.035em;
  line-height: 0.98;
  white-space: nowrap;
  filter: drop-shadow(0 2px 0 #58150a) drop-shadow(0 0 6px rgba(var(--page-accent-rgb), 0.2));
}

#paytableDialog .paytablePageBody {
  position: absolute;
  z-index: 2;
  inset: 37.1% 7.25% 13.9%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

#paytableDialog .paytablePageLead {
  display: grid;
  place-items: center;
  height: 7.5%;
  margin: 0 0 0.8%;
  color: #e6d5b5;
  font-size: clamp(7px, 0.78vw, 13px);
  font-weight: 750;
  line-height: 1.14;
  text-align: center;
  text-shadow: 0 1px 2px #000;
}

#paytableDialog .paytablePageLead strong {
  color: #ffe38c;
}

#paytableDialog .paytablePayoutCard,
#paytableDialog .paytableRuleCard,
#paytableDialog .paytableScatterPanel,
#paytableDialog .paytableFreeHero,
#paytableDialog .paytableFreeRules article,
#paytableDialog .paytableRetriggerPanel,
#paytableDialog .paytableWaysDiagram,
#paytableDialog .paytableWaysRules article,
#paytableDialog .paytableStatCard,
#paytableDialog .paytableInfoNotes,
#paytableDialog .paytableRibbon {
  border: 1px solid rgba(var(--page-accent-rgb), 0.52);
  background:
    radial-gradient(circle at 50% 0, rgba(var(--page-accent-rgb), 0.09), transparent 40%),
    linear-gradient(155deg, rgba(56, 33, 14, 0.84), rgba(7, 10, 11, 0.93) 63%);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.68),
    inset 0 0 13px rgba(var(--page-accent-rgb), 0.055),
    0 5px 10px rgba(0, 0, 0, 0.38);
}

/* Payout pages */

#paytableDialog .paytablePayoutCards {
  display: grid;
  height: 91.7%;
  gap: clamp(4px, 0.62vw, 10px);
}

#paytableDialog .paytablePayoutCards.premium {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

#paytableDialog .paytablePayoutCards.cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

#paytableDialog .paytablePayoutCard {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  min-width: 0;
  min-height: 0;
  padding: clamp(3px, 0.5vw, 8px);
  overflow: hidden;
  border-radius: 7px;
  text-align: center;
}

#paytableDialog .paytablePayoutCards.cards .paytablePayoutCard {
  grid-template-columns: 39% minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  column-gap: clamp(3px, 0.5vw, 8px);
}

#paytableDialog .paytablePayoutCard.topAward {
  border-color: rgba(255, 221, 105, 0.9);
  box-shadow:
    inset 0 0 18px rgba(255, 188, 39, 0.16),
    0 0 16px rgba(255, 173, 31, 0.18),
    0 6px 11px rgba(0, 0, 0, 0.42);
}

#paytableDialog .paytablePayoutSymbol,
#paytableDialog .paytableRuleSymbol {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

#paytableDialog .paytablePayoutSymbol > img,
#paytableDialog .paytableRuleSymbol > img,
#paytableDialog .paytableSymbolImage {
  display: block;
  width: 94%;
  height: 94%;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
  object-position: center;
  filter:
    drop-shadow(0 5px 5px rgba(0, 0, 0, 0.68))
    drop-shadow(0 0 6px rgba(var(--page-accent-rgb), 0.14));
}

#paytableDialog .paytablePayoutCards.cards .paytablePayoutSymbol {
  grid-row: 1 / 3;
}

#paytableDialog .paytablePayoutCards.cards .paytablePayoutSymbol > img {
  width: 100%;
  height: 100%;
}

#paytableDialog .paytablePayoutCard h3 {
  min-height: 2.05em;
  margin: 0 0 3px;
  color: #ffe18a;
  font-size: clamp(7px, 0.86vw, 13px);
  font-weight: 950;
  line-height: 1.02;
  text-transform: uppercase;
  text-shadow: 0 2px 0 #541509;
}

#paytableDialog .paytablePayoutCards.cards .paytablePayoutCard h3 {
  align-self: end;
  min-height: 0;
  margin-bottom: 4px;
  font-size: clamp(7px, 0.8vw, 12px);
}

#paytableDialog .paytablePayoutMatrix {
  display: grid;
  grid-template-columns: repeat(var(--pay-columns, 5), minmax(0, 1fr));
  grid-template-rows: 34% 66%;
  min-height: clamp(39px, 5.5vw, 78px);
  overflow: hidden;
  border: 1px solid rgba(var(--page-accent-rgb), 0.46);
  border-radius: 5px;
  background: rgba(3, 6, 7, 0.84);
  font-variant-numeric: tabular-nums;
}

#paytableDialog .paytablePayoutCards.cards .paytablePayoutMatrix {
  align-self: stretch;
  min-height: 0;
}

#paytableDialog .paytablePayoutMatrix > * {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  border-left: 1px solid rgba(var(--page-accent-rgb), 0.3);
}

#paytableDialog .paytablePayoutMatrix > :first-child,
#paytableDialog .paytablePayoutMatrix > strong:first-of-type {
  border-left: 0;
}

#paytableDialog .paytablePayoutMatrix span {
  border-bottom: 1px solid rgba(var(--page-accent-rgb), 0.34);
  color: #ffd46d;
  background: rgba(113, 58, 17, 0.34);
  font-size: clamp(7px, 0.9vw, 14px);
  font-weight: 950;
}

#paytableDialog .paytablePayoutMatrix strong {
  color: #fff0b3;
  font-size: clamp(7px, 1.02vw, 16px);
  line-height: 1;
  text-shadow: 0 2px 0 #4e1308, 0 0 7px rgba(var(--page-accent-rgb), 0.24);
  white-space: nowrap;
}

#paytableDialog .paytablePayoutCards.premium .paytablePayoutMatrix strong {
  font-size: clamp(6px, 0.8vw, 12px);
  letter-spacing: -0.035em;
}

#paytableDialog .paytablePayoutMatrix small {
  color: var(--page-accent);
  font-size: 0.76em;
}

/* Wild, Diamond and scatter page */

#paytableDialog .paytablePage-special .paytablePageBody {
  display: grid;
  grid-template-rows: minmax(0, 1fr) 25% 11%;
  gap: clamp(3px, 0.55vw, 9px);
}

#paytableDialog .paytableSpecialGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(5px, 0.75vw, 12px);
  min-height: 0;
}

#paytableDialog .paytableRuleCard {
  display: grid;
  grid-template-columns: 38% minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  padding: clamp(4px, 0.6vw, 9px);
  overflow: hidden;
  border-radius: 8px;
}

#paytableDialog .paytableRuleCopy {
  align-self: center;
  min-width: 0;
  min-height: 0;
  padding: 2% 3%;
}

#paytableDialog .paytableRuleCopy > span,
#paytableDialog .paytableFreeHeroCopy > span {
  color: var(--page-accent);
  font-size: clamp(6px, 0.68vw, 10px);
  font-weight: 950;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
}

#paytableDialog .paytableRuleCopy h3,
#paytableDialog .paytableFreeHeroCopy h3,
#paytableDialog .paytableScatterPanel h3,
#paytableDialog .paytableRetriggerPanel h3 {
  margin: 3px 0 5px;
  color: #ffe28a;
  font-size: clamp(8px, 1.14vw, 17px);
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 0 2px 0 #501409;
}

#paytableDialog .paytableRuleCopy p,
#paytableDialog .paytableFreeHeroCopy p,
#paytableDialog .paytableFreeRules p,
#paytableDialog .paytableWaysRules p,
#paytableDialog .paytableInfoNotes p {
  margin: 0;
  color: #e7d8bf;
  font-size: clamp(7px, 0.72vw, 11px);
  line-height: 1.22;
}

#paytableDialog .paytableScatterPanel,
#paytableDialog .paytableRetriggerPanel {
  display: grid;
  grid-template-columns: 21% minmax(0, 1fr);
  align-items: center;
  min-width: 0;
  min-height: 0;
  padding: clamp(3px, 0.42vw, 7px);
  overflow: hidden;
  border-radius: 7px;
}

#paytableDialog .paytableScatterPanel h3,
#paytableDialog .paytableRetriggerPanel h3 {
  margin: 0;
  padding-inline: 5%;
  text-align: center;
}

#paytableDialog .paytableTableScroll {
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

#paytableDialog table {
  width: 100%;
  height: 100%;
  border-spacing: 0;
  border-collapse: separate;
  table-layout: fixed;
  font-variant-numeric: tabular-nums;
}

#paytableDialog th,
#paytableDialog td {
  padding: clamp(1px, 0.2vw, 3px) clamp(2px, 0.42vw, 7px);
  border-right: 1px solid rgba(var(--page-accent-rgb), 0.27);
  border-bottom: 1px solid rgba(var(--page-accent-rgb), 0.25);
  color: #f5e4bf;
  font-size: clamp(6px, 0.68vw, 10px);
  line-height: 1;
  text-align: center;
}

#paytableDialog th {
  color: #ffe18c;
  background: rgba(110, 57, 17, 0.48);
  font-weight: 950;
  text-transform: uppercase;
}

#paytableDialog tbody tr:nth-child(even) td {
  background: rgba(var(--page-accent-rgb), 0.045);
}

#paytableDialog tr > :last-child {
  border-right: 0;
}

#paytableDialog tbody tr:last-child td {
  border-bottom: 0;
}

#paytableDialog .paytableRibbon {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0 3%;
  border-radius: 6px;
  color: #fff0b7;
  font-size: clamp(7px, 0.7vw, 11px);
  font-weight: 850;
  line-height: 1.13;
  text-align: center;
}

/* Free Spins page */

#paytableDialog .paytablePage-free .paytablePageBody {
  display: grid;
  grid-template-rows: minmax(0, 1fr) 28% 13%;
  gap: clamp(3px, 0.48vw, 8px);
}

#paytableDialog .paytableRetriggerTable th,
#paytableDialog .paytableRetriggerTable td {
  padding-block: 0;
  font-size: clamp(6px, 0.66vw, 10px);
  line-height: 1;
}

#paytableDialog .paytableFreeGrid {
  display: grid;
  grid-template-columns: 1.35fr 0.86fr;
  gap: clamp(5px, 0.72vw, 11px);
  min-width: 0;
  min-height: 0;
}

#paytableDialog .paytableFreeHero {
  display: grid;
  grid-template-columns: 48% minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  padding: clamp(4px, 0.58vw, 9px);
  overflow: hidden;
  border-radius: 8px;
}

#paytableDialog .paytableMultiplierPair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
  min-height: 0;
  gap: 2%;
}

#paytableDialog .paytableMultiplierPair figure {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  margin: 0;
  text-align: center;
}

#paytableDialog .paytableMultiplierPair img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.68)) drop-shadow(0 0 7px rgba(68, 225, 255, 0.18));
}

#paytableDialog .paytableMultiplierPair figcaption {
  color: #85edff;
  font-size: clamp(6px, 0.68vw, 10px);
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

#paytableDialog .paytableFreeHeroCopy {
  align-self: center;
  min-width: 0;
  padding: 2% 4%;
}

#paytableDialog .paytableFreeHeroCopy h3 {
  font-size: clamp(9px, 1.25vw, 19px);
}

#paytableDialog .paytableFreeRules {
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  min-width: 0;
  min-height: 0;
  gap: clamp(3px, 0.42vw, 7px);
}

#paytableDialog .paytableFreeRules article {
  display: grid;
  grid-template-columns: 31% minmax(0, 1fr);
  align-items: center;
  min-width: 0;
  min-height: 0;
  padding: 3% 4%;
  overflow: hidden;
  border-radius: 6px;
}

#paytableDialog .paytableFreeRules strong {
  color: var(--page-accent);
  font-size: clamp(6px, 0.72vw, 11px);
  line-height: 1;
  text-align: center;
}

/* 4,096 ways page */

#paytableDialog .paytablePage-ways .paytablePageBody {
  display: grid;
  grid-template-rows: 8% 46% minmax(0, 1fr);
  gap: clamp(4px, 0.58vw, 9px);
}

#paytableDialog .paytablePage-ways .paytablePageLead {
  height: auto;
  margin: 0;
}

#paytableDialog .paytableWaysDiagram {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  min-width: 0;
  min-height: 0;
  gap: clamp(3px, 0.48vw, 8px);
  padding: clamp(5px, 0.62vw, 10px);
  overflow: hidden;
  border-radius: 8px;
}

#paytableDialog .paytableWaysReel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  padding: clamp(2px, 0.32vw, 5px);
  border: 1px solid rgba(82, 220, 255, 0.38);
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(16, 43, 50, 0.62), rgba(4, 7, 8, 0.82));
  box-shadow: inset 0 0 10px rgba(67, 219, 255, 0.07);
}

#paytableDialog .paytableWaysReel.is-first {
  border-color: rgba(255, 205, 75, 0.76);
  background: linear-gradient(180deg, rgba(93, 53, 14, 0.68), rgba(13, 9, 6, 0.84));
  box-shadow: inset 0 0 12px rgba(255, 183, 45, 0.12), 0 0 10px rgba(255, 182, 41, 0.12);
}

#paytableDialog .paytableWaysReel > strong {
  display: block;
  padding: 3% 0 6%;
  color: #85eaff;
  font-size: clamp(6px, 0.65vw, 10px);
  line-height: 1;
  text-align: center;
}

#paytableDialog .paytableWaysReel.is-first > strong {
  color: #ffdc7a;
}

#paytableDialog .paytableWaysCells {
  display: grid;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  min-width: 0;
  min-height: 0;
  gap: clamp(2px, 0.25vw, 4px);
}

#paytableDialog .paytableWaysCells i {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 0;
  border: 1px solid rgba(103, 232, 255, 0.62);
  border-radius: 3px;
  background:
    radial-gradient(circle, rgba(105, 232, 255, 0.27), transparent 64%),
    linear-gradient(145deg, rgba(42, 133, 156, 0.54), rgba(8, 25, 31, 0.88));
  box-shadow: inset 0 0 8px rgba(96, 229, 255, 0.12), 0 0 5px rgba(73, 219, 255, 0.12);
}

#paytableDialog .paytableWaysReel.is-first .paytableWaysCells i {
  border-color: rgba(255, 211, 96, 0.78);
  background:
    radial-gradient(circle, rgba(255, 213, 96, 0.33), transparent 62%),
    linear-gradient(145deg, rgba(156, 89, 19, 0.68), rgba(37, 18, 6, 0.9));
}

#paytableDialog .paytableWaysCells i::after {
  content: "";
  position: absolute;
  inset: 29%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
}

#paytableDialog .paytableWaysRules {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  min-width: 0;
  min-height: 0;
  gap: clamp(3px, 0.45vw, 7px);
}

#paytableDialog .paytableWaysRules article {
  display: grid;
  grid-template-columns: clamp(20px, 2.4vw, 36px) minmax(0, 1fr);
  align-items: center;
  min-width: 0;
  min-height: 0;
  padding: clamp(3px, 0.38vw, 6px);
  overflow: hidden;
  border-radius: 6px;
}

#paytableDialog .paytableWaysRules article > strong {
  display: grid;
  place-items: center;
  width: clamp(17px, 2vw, 29px);
  aspect-ratio: 1;
  border: 1px solid #ffe18b;
  border-radius: 50%;
  color: #251006;
  background: linear-gradient(#fff0a2, #dc8c23);
  font-size: clamp(7px, 0.8vw, 12px);
  box-shadow: 0 0 7px rgba(255, 184, 42, 0.24);
}

/* Information page */

#paytableDialog .paytablePage-info .paytablePageBody {
  display: grid;
  grid-template-rows: 48% minmax(0, 1fr);
  gap: clamp(5px, 0.7vw, 11px);
}

#paytableDialog .paytableStatsGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  min-width: 0;
  min-height: 0;
  gap: clamp(5px, 0.72vw, 11px);
}

#paytableDialog .paytableStatCard {
  display: grid;
  place-items: center;
  align-content: center;
  min-width: 0;
  min-height: 0;
  padding: 5%;
  overflow: hidden;
  border-radius: 8px;
  text-align: center;
}

#paytableDialog .paytableStatCard strong {
  color: #ffe18b;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: clamp(13px, 2.45vw, 38px);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.025em;
  line-height: 1;
  text-shadow: 0 2px 0 #501409, 0 0 8px rgba(var(--page-accent-rgb), 0.25);
  white-space: nowrap;
}

#paytableDialog .paytableStatCard span {
  margin-top: 5px;
  color: #e8d7b8;
  font-size: clamp(7px, 0.75vw, 11px);
  font-weight: 850;
  line-height: 1.12;
  text-transform: uppercase;
}

#paytableDialog .paytableInfoNotes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-width: 0;
  min-height: 0;
  gap: 0;
  overflow: hidden;
  border-radius: 8px;
}

#paytableDialog .paytableInfoNotes p {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  padding: clamp(5px, 0.85vw, 13px);
  border-left: 1px solid rgba(var(--page-accent-rgb), 0.28);
}

#paytableDialog .paytableInfoNotes p:first-child {
  border-left: 0;
}

#paytableDialog .paytableInfoNotes strong {
  display: block;
  margin-bottom: 5px;
  color: #ffe18c;
}

/* Navigation is authored into the lower rail of the same illustration. */

#paytableDialog #paytableTabs.paytableControls {
  position: absolute;
  z-index: 15;
  left: 50%;
  bottom: 2.1%;
  display: grid;
  grid-template-columns: clamp(31px, 3.45vw, 51px) minmax(0, 1fr) clamp(31px, 3.45vw, 51px);
  align-items: center;
  gap: clamp(6px, 0.85vw, 13px);
  width: min(45%, 720px);
  min-width: 245px;
  height: 7.6%;
  padding: 0.35% 0.8%;
  transform: translateX(-50%);
  border: 1px solid rgba(255, 206, 84, 0.31);
  border-radius: 999px;
  background: rgba(4, 7, 8, 0.86);
  box-shadow:
    inset 0 1px rgba(255, 239, 173, 0.1),
    inset 0 0 11px rgba(255, 176, 36, 0.07),
    0 5px 14px rgba(0, 0, 0, 0.48);
}

#paytableDialog #paytableTabs button {
  min-width: 0;
  padding: 0;
  cursor: pointer;
}

#paytableDialog .paytableNavButton {
  display: grid;
  place-items: center;
  width: 100%;
  max-height: 100%;
  aspect-ratio: 1;
  border: 2px solid #eeb94d;
  border-radius: 50%;
  color: #fff1ae;
  background:
    radial-gradient(circle at 38% 30%, rgba(255, 242, 169, 0.18), transparent 31%),
    linear-gradient(150deg, #9b551a, #3a1809 58%, #120907);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(22px, 2.75vw, 42px);
  font-weight: 950;
  line-height: 0.68;
  text-shadow: 0 2px 0 #501208;
  box-shadow:
    inset 0 0 0 3px rgba(11, 6, 4, 0.68),
    0 0 8px rgba(255, 181, 37, 0.23);
  transition: filter 120ms ease, transform 120ms ease;
}

#paytableDialog .paytableNavButton:hover {
  filter: brightness(1.2) saturate(1.1);
  transform: scale(1.055);
}

#paytableDialog .paytablePager {
  display: grid;
  justify-items: center;
  gap: clamp(2px, 0.22vw, 4px);
  min-width: 0;
}

#paytableDialog .paytableCurrentPage {
  max-width: 100%;
  overflow: hidden;
  color: #ead7b0;
  font-size: clamp(7px, 0.7vw, 11px);
  font-weight: 900;
  letter-spacing: 0.045em;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

#paytableDialog .paytableDots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 0.58vw, 9px);
}

#paytableDialog .paytableDot {
  width: clamp(8px, 0.88vw, 13px);
  height: clamp(8px, 0.88vw, 13px);
  border: 1px solid rgba(255, 221, 132, 0.54);
  border-radius: 50%;
  background: #24130a;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.35);
  transition: filter 120ms ease, transform 120ms ease;
}

#paytableDialog .paytableDot:hover {
  filter: brightness(1.35);
  transform: scale(1.12);
}

#paytableDialog .paytableDot.active,
#paytableDialog .paytableDot[aria-current="page"] {
  border-color: #fff0a5;
  background: radial-gradient(circle, #d9fbff 0 21%, #35d7f6 38%, #b87218 62%, #3b1709 100%);
  box-shadow: 0 0 9px rgba(61, 224, 255, 0.68), 0 0 5px rgba(255, 184, 45, 0.72);
}

/* The illustrated menu medallion stays inside the authored popup field. */

#paytableButton {
  display: grid;
  grid-template-columns: clamp(29px, 2.25vw, 36px) minmax(0, 1fr);
  align-items: center;
  column-gap: 8px;
  padding-inline: 10px;
}

#paytableButton::before {
  content: "";
  display: block;
  width: clamp(29px, 2.25vw, 36px);
  aspect-ratio: 1;
  background: url("../assets/art/ui/menu-icon-paytable.png?v=bb-paytable-1") center / contain no-repeat;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.68));
}

@media (max-height: 560px) {
  #paytableDialog .paytablePageBody {
    inset-bottom: 13.5%;
  }

  #paytableDialog #paytableTabs.paytableControls {
    bottom: 1.85%;
    height: 8%;
  }
}

@media (orientation: portrait) and (max-width: 700px) {
  #paytableDialog {
    width: min(97vw, calc(95dvh * 1.7768331562));
  }

  #paytableDialog .dialog-close {
    top: 4.5%;
    right: 2.6%;
  }

  #paytableDialog #paytableTabs.paytableControls {
    width: 48%;
    min-width: 230px;
  }
}

@media (orientation: portrait) and (max-width: 800px) {
  .orientation-hint {
    position: fixed;
    z-index: 110;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    display: block;
    width: min(270px, calc(100vw - 24px));
    margin: 0;
    padding: 9px 12px;
    border: 1px solid rgba(255, 206, 86, 0.5);
    border-radius: 12px;
    background: rgba(16, 5, 13, 0.76);
    color: #ffe6a2;
    font-size: 12px;
    text-align: center;
    pointer-events: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

@media (prefers-contrast: more) {
  .message-bar,
  .popover,
  dialog {
    border-color: #fff29d;
  }

  .meter,
  .feature-hud {
    color: #fff;
    text-shadow: 0 3px 1px #000, 0 0 5px #000;
  }
}