/* Dedicated portrait artwork. The housing always keeps its native 1024:1664 ratio. */
#menuDialog {
  width: min(calc(100vw - var(--slot-safe-left, 0px) - var(--slot-safe-right, 0px) - 16px), 460px, calc((var(--slot-viewport-height, 100dvh) - var(--slot-safe-top, 0px) - var(--slot-safe-bottom, 0px) - 24px) * 8 / 13));
  max-width: none; max-height: none; border: 0; border-radius: 0;
  padding: 0; overflow: visible; background: transparent; box-shadow: none;
}
#menuDialog::backdrop { background: #020607d9; }
#menuDialog .dialogArt {
  container-type: inline-size; position: relative; width: 100%; aspect-ratio: 8 / 13;
  max-height: none; padding: 0; overflow: visible; border: 0; border-radius: 0;
  background: url('../assets/mobile/portrait-paytable.webp') center / contain no-repeat;
  box-shadow: none; filter: drop-shadow(0 12px 28px #0009);
}
#menuDialog .portraitPaytableHeader {
  position: absolute; left: 12%; top: 7.1%; width: 58%; height: 8.2%;
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
}
#menuDialog .portraitPaytableHeader > span { color: #c5a374; font-size: clamp(9px, 2.6cqw, 12px); font-weight: 750; letter-spacing: .15em; }
#menuDialog .portraitPaytableHeader h2 {
  margin: 0; font-family: inherit; font-size: clamp(17px, 5.2cqw, 25px); font-weight: 900;
  line-height: 1.12; color: #ffe5a6; text-shadow: 0 2px 2px #000b; letter-spacing: -.03em;
}
#menuDialog .closeButton {
  left: 84.25%; top: 11.45%; right: auto; width: max(44px, 12.5cqw); height: max(44px, 12.5cqw);
  transform: translate(-50%, -50%); display: grid; place-items: center; padding: 0;
  border: 0; background: transparent; box-shadow: none; border-radius: 50%;
  color: #ffe5a6; font-size: clamp(24px, 7.5cqw, 34px); line-height: 1; text-shadow: 0 2px 2px #000b;
}
#menuDialog .paytableList, #menuDialog .paytableViewer { position: absolute; inset: 0; display: block; padding: 0; margin: 0; }
#menuDialog .paytableStage {
  position: absolute; left: 10.1%; top: 21%; width: 79.8%; height: 57.2%; aspect-ratio: auto;
  padding: 1px; border: 0; background: transparent; box-shadow: none; border-radius: 0;
  overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #8a6135 transparent;
  touch-action: pan-y;
}
#menuDialog .paytableOverlay { position: static; height: 100%; pointer-events: auto; }
#menuDialog .paytableBuiltPage {
  position: relative; inset: auto; display: flex; flex-direction: column; gap: 7px;
  width: 100%; height: 100%; min-height: 100%; padding: 1px; overflow: visible;
  border: 0; border-radius: 0; background: none; box-shadow: none;
}
#menuDialog .paytableBuiltPage > * { flex-shrink: 0; }
#menuDialog .paytableBuiltPage::before, #menuDialog .paytableBuiltPage::after,
#menuDialog .paytablePipe, #menuDialog .paytableTitlePlate, #menuDialog .paytableDivider,
#menuDialog .paytableText.spriteTitle { display: none; }
#menuDialog .portraitPaytableColumns {
  display: grid; grid-template-columns: 24% repeat(3, minmax(0, 1fr));
  padding: 0 8px; min-height: 20px; align-items: center; text-align: center;
  color: #d0ac72; font-size: clamp(10px, 3cqw, 13px); font-weight: 800; letter-spacing: .07em;
}
#menuDialog .portraitPaytableColumns span:first-child { text-align: left; font-size: .82em; }
#menuDialog .paytablePayItem, #menuDialog .paytablePayItem.low,
#menuDialog .paytableAwardCard, #menuDialog .paytableStepCard, #menuDialog .paytableStatRow,
#menuDialog .paytableWaysDiagram, #menuDialog .paytableWaysNote {
  border: 8px solid transparent;
  border-image: url('../assets/mobile/portrait-paytable-row.webp') 28 fill / 8px / 0 stretch;
  border-radius: 0; background: none; box-shadow: none;
}
#menuDialog .paytablePayItem, #menuDialog .paytablePayItem.low {
  position: static; width: 100% !important; height: auto !important; min-height: 60px;
  display: grid; grid-template-columns: 24% minmax(0, 1fr); gap: 3px; align-items: center; flex: 1 0 60px;
}
#menuDialog .paytablePayItem.low { min-height: 44px; flex-basis: 44px; }
#menuDialog .paytableSymbolFrame, #menuDialog .paytablePayItem.low .paytableSymbolFrame,
#menuDialog .paytableSymbolFrame.large, #menuDialog .paytableSymbolFrame.small {
  width: 100%; height: 100%; padding: 0; margin: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
}
#menuDialog .paytableSymbolInline, #menuDialog .paytableVideoSymbol,
#menuDialog .paytableBuiltPage-sticky .paytableStepCard .paytableSymbolInline,
#menuDialog .paytableBuiltPage-sticky .paytableStepCard .paytableSymbolInline.board {
  width: 100%; height: 100%; object-fit: contain; transform: none;
  filter: drop-shadow(0 2px 2px #0009);
}
#menuDialog .paytablePayoutGrid {
  height: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: 1fr;
  border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible;
}
#menuDialog .paytableGridHeader { display: none; }
#menuDialog .paytablePayoutGrid > * { border: 0; }
#menuDialog .paytableGridValue, #menuDialog .paytablePayItem.premium .paytableGridValue {
  display: flex; align-items: center; justify-content: center; gap: 1px;
  min-width: 0; margin: 0; padding: 0; border-left: 1px solid #b27b3c35;
  font-family: inherit; font-size: clamp(13px, 4cqw, 18px); font-weight: 800;
  font-variant-numeric: tabular-nums; color: #ffe5a6; line-height: 1.2; white-space: nowrap; text-shadow: 0 1px 2px #000c;
}
#menuDialog .paytablePayoutAmount, #menuDialog .paytablePayoutX {
  position: static; display: inline; top: auto; left: auto; width: auto; max-width: none; transform: none; line-height: inherit;
}
#menuDialog .paytablePayoutX { font-size: .72em; color: #c9b58c; }
#menuDialog .portraitPayoutNote { display: block; margin: 0; text-align: center; font-size: clamp(9px, 2.8cqw, 12px); color: #c5b08d; line-height: 1.4; }
#menuDialog .paytableFeatureSymbol { position: static; align-self: center; width: clamp(80px, 25cqw, 116px) !important; height: clamp(80px, 25cqw, 116px) !important; margin: 0 auto; }
#menuDialog .paytableAwardStack { display: grid; gap: 8px; }
#menuDialog .paytableAwardCard {
  position: static; display: grid; place-items: center; width: 100% !important; height: auto !important; min-height: 48px;
  padding: 4px; font-family: inherit; font-size: clamp(13px, 3.85cqw, 18px); font-weight: 800; line-height: 1.25; color: #ffe5a6; text-shadow: 0 1px 2px #000b;
}
#menuDialog .paytableNotePanel {
  position: static; width: 100%; height: auto; margin: auto 0 0; padding: 8px 4px;
  border: 0; background: none; box-shadow: none; color: #d6c4a3; font-size: clamp(12px, 3.4cqw, 15px); font-weight: 550; line-height: 1.4; text-shadow: none;
}
#menuDialog .paytableBuiltPage-sticky > .paytableFeatureSymbol { display: none; }
#menuDialog .paytableStepRow { display: grid; grid-template-columns: 1fr; gap: 10px; }
#menuDialog .paytableStepCard {
  position: relative; inset: auto !important; display: grid; grid-template-columns: 29% minmax(0, 1fr); grid-template-rows: 1fr; gap: 10px;
  width: 100% !important; height: 78px !important; padding: 3px 8px; align-items: center;
}
#menuDialog .paytableStepCard strong { margin: 0; padding: 0; font-family: inherit; font-size: clamp(13px, 4cqw, 18px); font-weight: 800; line-height: 1.3; text-shadow: 0 1px 2px #000b; text-align: left; color: #ffe5a6; }
#menuDialog .paytableStepCard strong span { display: inline; }
#menuDialog .paytableStepCard strong span + span::before { content: ' '; }
#menuDialog .paytableStepArrow { display: none; }
#menuDialog .paytableWaysDiagram { position: static; width: 100%; height: auto; min-height: 135px; flex: 1 0 135px; padding: 4px; }
#menuDialog .paytableWaysGraphic { width: 88%; height: 100%; max-height: 160px; object-fit: contain; transform: none; filter: drop-shadow(0 2px 3px #0008); }
#menuDialog .paytableWaysNote { position: static; width: 100%; height: auto; min-height: 48px; margin: 0; padding: 7px; color: #e6d2a9; font-family: inherit; font-size: clamp(12px, 3.5cqw, 16px); font-weight: 600; line-height: 1.4; text-shadow: none; }
#menuDialog .paytableStatsPanel { position: static; width: 100%; padding: 0; border: 0; display: grid; gap: 7px; background: none; box-shadow: none; }
#menuDialog .paytableStatRow { min-height: 44px; padding: 3px 5px; gap: 8px; grid-template-columns: minmax(0, 1fr) auto; color: #c9b995; font-size: clamp(10px, 3.1cqw, 14px); font-weight: 650; line-height: 1.25; text-shadow: none; }
#menuDialog .paytableStatRow em { color: #ffe5a6; font-size: clamp(14px, 4.1cqw, 19px); font-weight: 850; font-variant-numeric: tabular-nums; }
#menuDialog .paytableControls { position: absolute; inset: 0; display: block; width: 100%; padding: 0; border: 0; background: none; box-shadow: none; pointer-events: none; }
#menuDialog .paytableDots { display: none; }
#menuDialog .paytableNavButton {
  position: absolute; top: 87.7%; width: max(44px, 12cqw); height: max(44px, 12cqw); transform: translate(-50%, -50%);
  padding: 0; border: 0; border-radius: 50%; background: none; box-shadow: none; color: #ffe5a6; font-size: clamp(30px, 9cqw, 42px);
  text-shadow: 0 2px 2px #000b; pointer-events: auto;
}
#menuDialog #paytablePrevButton { left: 17.25%; }
#menuDialog #paytableNextButton { left: 82.8%; }
#menuDialog .portraitPaytablePicker {
  position: absolute; left: 29%; top: 84.1%; width: 42%; height: 7.1%; min-height: 44px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; pointer-events: auto; color: #f8dfa4;
}
#menuDialog .portraitPaytablePicker > span { font-size: clamp(9px, 2.5cqw, 11px); font-weight: 750; letter-spacing: .1em; color: #c5a374; }
#menuDialog .portraitPaytablePicker > strong { font-size: clamp(17px, 5cqw, 24px); line-height: 1; font-weight: 850; font-variant-numeric: tabular-nums; }
#menuDialog #portraitPaytableSelect { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
#menuDialog .portraitPaytablePicker:focus-within { outline: 2px solid #ffe4a1; outline-offset: 1px; }
#menuDialog .closeButton:hover, #menuDialog .paytableNavButton:hover { color: #fff5d0; background: #ffd98a0c; }
#menuDialog .closeButton:active, #menuDialog .paytableNavButton:active { background: #ffd98a20; }
#menuDialog :focus-visible { outline: 2px solid #ffe4a1; outline-offset: -2px; }