/* Portrait-only popup layout. Native illustrated corners stay at their original aspect. */
html[data-slot-orientation="portrait"] #gameShell { container-type: size; }
html[data-slot-orientation="portrait"] #overlay { padding: 0; background: radial-gradient(ellipse at 50% 40%,#54236a55,transparent 70%),#080310d9; }
html[data-slot-orientation="portrait"] #overlay .panelFrame { width: 96%; height: auto; max-height: 92%; display: flex; padding: 56px 26px 32px; background: #10071a; border: 0; border-radius: 16px; filter: drop-shadow(0 12px 15px #0009); }
html[data-slot-orientation="portrait"] #overlay .panelFrame::before,
html[data-slot-orientation="portrait"] #paytableDialog .paytableFrame::before { content: ''; position: absolute; inset: 0; z-index: 0; border: 34px solid transparent; border-image: url('../assets/art/ui/popup-frame.png') 190 fill / 34px / 0 round; pointer-events: none; image-rendering: pixelated; }
html[data-slot-orientation="portrait"] #overlay .panelContent { position: relative; z-index: 1; inset: auto; width: 100%; max-height: calc(83cqh - 88px); min-height: 0; padding: 4px 3px 10px; overflow: auto; scrollbar-width: thin; font-size: clamp(12px,3.2cqw,16px); }
html[data-slot-orientation="portrait"] #overlay .panelClose { top: 15px; right: 18px; z-index: 3; width: 44px; height: 44px; padding: 0; border-radius: 4px; font: 900 30px/1 Consolas,monospace; background: linear-gradient(#78328c,#2b0b3d); box-shadow: inset 0 0 0 2px #1b0827,0 3px #08020f; }
html[data-slot-orientation="portrait"] #overlay .panelClose[hidden] { display: none; }
html[data-slot-orientation="portrait"] #overlay .panelTitle { margin: 5px 0 12px; font-size: clamp(21px,6cqw,30px); letter-spacing: .045em; }
html[data-slot-orientation="portrait"] #overlay .panelLead { margin: 0 auto 18px; font-size: clamp(11px,3.05cqw,15px); line-height: 1.45; }
html[data-slot-orientation="portrait"] #overlay .menuGrid.isSimple { width: 100%; margin: 0; grid-template-columns: minmax(0,1fr); gap: 12px; }
html[data-slot-orientation="portrait"] #overlay .menuGrid.isSimple .menuTile { min-height: 74px; grid-template-columns: 46px minmax(0,1fr) auto; grid-template-rows: auto auto; justify-items: start; align-content: center; gap: 4px 12px; padding: 10px; text-align: left; border-radius: 4px; }
html[data-slot-orientation="portrait"] #overlay .menuIcon { grid-column: 1; grid-row: 1/3; display: grid; place-items: center; width: 46px; font-size: 29px; }
html[data-slot-orientation="portrait"] #overlay .paytableMenuThumb { width: 42px; height: 42px; }
html[data-slot-orientation="portrait"] #overlay .menuTile strong { grid-column: 2/4; font-size: clamp(14px,4.1cqw,20px); }
html[data-slot-orientation="portrait"] #overlay .menuValue { grid-column: 2/4; font-size: clamp(10px,2.65cqw,13px); letter-spacing: 0; }
html[data-slot-orientation="portrait"] #overlay .togglePill { font-size: 10px; border-radius: 3px; }
html[data-slot-orientation="portrait"] #overlay .togglePill span { padding: 3px 8px; }
html[data-slot-orientation="portrait"] #overlay .choiceGrid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
html[data-slot-orientation="portrait"] #overlay .choiceButton { min-height: 48px; padding: 9px 5px; font-size: clamp(11px,3cqw,15px); overflow-wrap: anywhere; border-radius: 4px; }
html[data-slot-orientation="portrait"] #overlay .autoCount { min-height: 58px; font-size: clamp(24px,7cqw,34px); color: var(--lime); }
html[data-slot-orientation="portrait"] #overlay .rulesGrid { grid-template-columns: minmax(0,1fr); gap: 10px; }
html[data-slot-orientation="portrait"] #overlay .ruleCard { padding: 10px 12px; font-size: 12px; }
html[data-slot-orientation="portrait"] #overlay .ruleCard strong { font-size: 12px; }
html[data-slot-orientation="portrait"] #overlay input[type='number'] { width: 100%; min-height: 44px; margin: 4px 0 0; padding: 8px; border: 1px solid #86519b; color: #fff2af; background: #10051a; font: 16px Consolas,monospace; }
html[data-slot-orientation="portrait"] #overlay input[type='checkbox'] { width: 24px; height: 24px; accent-color: var(--lime); vertical-align: middle; }
html[data-slot-orientation="portrait"] #overlay .qaSectionTitle { margin: 18px 0 10px; font-size: 14px; }
html[data-slot-orientation="portrait"] #overlay .pixelButton { min-height: 44px; padding: 10px; font-size: 13px; border-radius: 4px; }
html[data-slot-orientation="portrait"] #overlay .featureAward { min-height: 230px; height: auto; }
html[data-slot-orientation="portrait"] #overlay .awardNumber { font-size: clamp(48px,20cqw,96px); }
html[data-slot-orientation="portrait"] #overlay .awardLabel { margin: 12px 0 20px; font-size: 17px; }
html[data-slot-orientation="portrait"] #overlay button, html[data-slot-orientation="portrait"] #paytableDialog button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

/* The laboratory manual becomes a readable scrollable portrait book. */
html[data-slot-orientation="portrait"] #paytableDialog { width: min(calc(100vw - 12px),560px); height: min(calc(100dvh - 20px),920px); max-width: calc(100vw - 12px); max-height: calc(100dvh - 20px); aspect-ratio: auto; margin: auto; border-radius: 15px; background: #10071a; }
html[data-slot-orientation="portrait"] #paytableDialog .paytableFrame { width: 100%; height: 100%; overflow: hidden; filter: none; }
html[data-slot-orientation="portrait"] #paytableDialog .paytableContent { z-index: 1; inset: 73px 28px 107px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #9553b3 #160924; font-size: clamp(11px,3.2cqw,15px); }
html[data-slot-orientation="portrait"] #paytableDialog .paytableStage { height: auto; min-height: 100%; aspect-ratio: auto; background: transparent; overflow: visible; }
html[data-slot-orientation="portrait"] #paytableDialog .paytablePage { position: relative; inset: auto; height: auto; overflow: visible; animation: none; }
html[data-slot-orientation="portrait"] #paytableDialog .paytablePageTitle { position: relative; left: auto; top: auto; width: 100%; height: auto; min-height: 60px; gap: 7px; padding: 10px 5px; border-radius: 3px; }
html[data-slot-orientation="portrait"] #paytableDialog .paytablePageTitle span { font-size: 9px; letter-spacing: .05em; line-height: 1.25; }
html[data-slot-orientation="portrait"] #paytableDialog .paytablePageTitle h3 { margin: 0; font-size: clamp(19px,5.3cqw,28px); line-height: 1.08; }
html[data-slot-orientation="portrait"] #paytableDialog .paytablePageBody { position: relative; inset: auto; height: auto; overflow: visible; padding: 12px 1px 8px; }
html[data-slot-orientation="portrait"] #paytableDialog .paytablePageLead { height: auto; margin: 0 0 13px; font-size: clamp(11px,3.1cqw,14px); line-height: 1.4; }
html[data-slot-orientation="portrait"] #paytableDialog .paytablePayoutCards { grid-template-columns: minmax(0,1fr); height: auto; gap: 12px; }
html[data-slot-orientation="portrait"] #paytableDialog .paytablePayoutCard { grid-template-columns: 74px minmax(0,1fr); grid-template-rows: auto auto; gap: 5px 8px; min-height: 95px; padding: 8px; border-radius: 3px; }
html[data-slot-orientation="portrait"] #paytableDialog .paytablePayoutSymbol { grid-column: 1; grid-row: 1/3; height: 74px; }
html[data-slot-orientation="portrait"] #paytableDialog .paytablePayoutCard h4 { grid-column: 2; margin: 0; min-height: 0; font-size: 12px; line-height: 1.25; align-self: center; }
html[data-slot-orientation="portrait"] #paytableDialog .paytablePayoutMatrix { grid-column: 2; grid-template-rows: 22px 28px; min-height: 50px; border-radius: 3px; }
html[data-slot-orientation="portrait"] #paytableDialog .paytablePayoutMatrix span { font-size: 11px; }
html[data-slot-orientation="portrait"] #paytableDialog .paytablePayoutMatrix strong { font-size: clamp(11px,3.45cqw,16px); }
html[data-slot-orientation="portrait"] #paytableDialog .paytableSpecialGrid { grid-template-columns: minmax(0,1fr); height: auto; gap: 12px; }
html[data-slot-orientation="portrait"] #paytableDialog .paytableFeatureCard { grid-template-columns: 76px minmax(0,1fr); grid-template-rows: auto; gap: 10px; padding: 12px 9px; text-align: left; }
html[data-slot-orientation="portrait"] #paytableDialog .paytableFeatureSymbol { height: 96px; align-self: center; }
html[data-slot-orientation="portrait"] #paytableDialog .paytableFeatureCopy > span { font-size: 9px; letter-spacing: .07em; }
html[data-slot-orientation="portrait"] #paytableDialog .paytableFeatureCopy h4 { font-size: 20px; margin: 5px 0 8px; }
html[data-slot-orientation="portrait"] #paytableDialog .paytableFeatureCopy p, html[data-slot-orientation="portrait"] #paytableDialog .doorFlow p, html[data-slot-orientation="portrait"] #paytableDialog .paytableCompactRules, html[data-slot-orientation="portrait"] #paytableDialog .paytableInfoNotes p { font-size: clamp(11px,3.1cqw,14px); line-height: 1.4; }
html[data-slot-orientation="portrait"] #paytableDialog .paytableRibbon, html[data-slot-orientation="portrait"] #paytableDialog .paytableFinePrint { height: auto; min-height: 0; margin: 13px 0 0; padding: 10px; font-size: 10px; line-height: 1.5; letter-spacing: 0; }
html[data-slot-orientation="portrait"] #paytableDialog .paytableSplitPage, html[data-slot-orientation="portrait"] #paytableDialog .waysPageLayout { grid-template-columns: minmax(0,1fr); height: auto; gap: 14px; }
html[data-slot-orientation="portrait"] #paytableDialog .paytableVignette { height: 210px; }
html[data-slot-orientation="portrait"] #paytableDialog .paytableVignette figcaption { font-size: 10px; }
html[data-slot-orientation="portrait"] #paytableDialog .draculaChoiceExplainer { grid-template-rows: auto auto auto; gap: 14px; }
html[data-slot-orientation="portrait"] #paytableDialog .draculaChoiceOrder { min-height: 104px; gap: 4px; }
html[data-slot-orientation="portrait"] #paytableDialog .draculaChoiceStep { grid-template-rows: 21px 54px 15px; padding: 5px 1px; }
html[data-slot-orientation="portrait"] #paytableDialog .draculaChoiceStep > small { display: none; }
html[data-slot-orientation="portrait"] #paytableDialog .choiceOriginal, html[data-slot-orientation="portrait"] #paytableDialog .draculaChoiceStep > b { font-size: 10px; }
html[data-slot-orientation="portrait"] #paytableDialog .draculaChoiceStep.is-miss > b { font-size: 43px; }
html[data-slot-orientation="portrait"] #paytableDialog .paytableCompactRules { gap: 10px; padding: 13px 12px 13px 28px; overflow: visible; }
html[data-slot-orientation="portrait"] #paytableDialog .potionAwardGrid { grid-template-columns: minmax(0,1fr); height: auto; gap: 12px; }
html[data-slot-orientation="portrait"] #paytableDialog .potionAwardCard { grid-template-columns: 43% minmax(0,1fr); grid-template-rows: 22px 44px 20px; column-gap: 9px; padding: 10px; }
html[data-slot-orientation="portrait"] #paytableDialog .potionCluster { grid-column: 1; grid-row: 1/4; height: 86px; }
html[data-slot-orientation="portrait"] #paytableDialog .potionAwardCard > span, html[data-slot-orientation="portrait"] #paytableDialog .potionAwardCard > b { font-size: 11px; }
html[data-slot-orientation="portrait"] #paytableDialog .potionAwardCard > strong { font-size: 38px; }
html[data-slot-orientation="portrait"] #paytableDialog .levelLadder { grid-template-rows: none; gap: 10px; }
html[data-slot-orientation="portrait"] #paytableDialog .paytableLevelRow { grid-template-columns: minmax(0,1fr); gap: 4px; padding: 8px; }
html[data-slot-orientation="portrait"] #paytableDialog .paytableLevelRow > strong { font-size: 12px; text-align: center; }
html[data-slot-orientation="portrait"] #paytableDialog .paytableLevelSymbols { height: 60px; }
html[data-slot-orientation="portrait"] #paytableDialog .levelSymbolChip small { font-size: 9px; }
html[data-slot-orientation="portrait"] #paytableDialog .doorFlow { grid-template-columns: minmax(0,1fr); gap: 12px; }
html[data-slot-orientation="portrait"] #paytableDialog .doorFlow article { grid-template-rows: 100px auto auto; gap: 7px; padding: 12px; }
html[data-slot-orientation="portrait"] #paytableDialog .doorFlow article > small { font-size: 11px; }
html[data-slot-orientation="portrait"] #paytableDialog .doorFlow strong { font-size: 13px; }
html[data-slot-orientation="portrait"] #paytableDialog .waysDiagram { grid-template-rows: 180px 45px; padding: 8px; }
html[data-slot-orientation="portrait"] #paytableDialog .waysEquation { font-size: 12px; gap: 5px; }
html[data-slot-orientation="portrait"] #paytableDialog .waysRules { grid-template-rows: 58px auto; gap: 10px; padding: 10px; }
html[data-slot-orientation="portrait"] #paytableDialog .waysHeadline strong { font-size: 40px; }
html[data-slot-orientation="portrait"] #paytableDialog .waysHeadline span { font-size: 12px; }
html[data-slot-orientation="portrait"] #paytableDialog .paytableStatsGrid { grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: none; height: auto; gap: 10px; }
html[data-slot-orientation="portrait"] #paytableDialog .paytableStatsGrid article { min-height: 86px; padding: 7px; }
html[data-slot-orientation="portrait"] #paytableDialog .paytableStatsGrid span { font-size: 9px; }
html[data-slot-orientation="portrait"] #paytableDialog .paytableStatsGrid strong { font-size: 23px; }
html[data-slot-orientation="portrait"] #paytableDialog .paytableInfoNotes { grid-template-columns: minmax(0,1fr); height: auto; margin-top: 12px; padding: 4px 10px; }
html[data-slot-orientation="portrait"] #paytableDialog .paytableInfoNotes p { padding: 12px 0; border-left: 0; border-top: 1px solid #764589; }
html[data-slot-orientation="portrait"] #paytableDialog .paytableInfoNotes p:first-child { border-top: 0; }
html[data-slot-orientation="portrait"] #paytableDialog .paytableClose { top: 16px; right: 19px; width: 44px; height: 44px; font-size: 30px; border-radius: 4px; }
html[data-slot-orientation="portrait"] #paytableDialog .paytableControls { left: 27px; right: 27px; bottom: 27px; height: 64px; padding: 7px; grid-template-columns: 44px minmax(0,1fr) 44px; gap: 8px; border-radius: 3px; }
html[data-slot-orientation="portrait"] #paytableDialog .paytableNavButton { width: 44px; height: 44px; font-size: 30px; }
html[data-slot-orientation="portrait"] #paytableDialog .paytableCurrentPage { font-size: 10px; line-height: 1.5; white-space: normal; overflow: visible; letter-spacing: .025em; }
html[data-slot-orientation="portrait"] #paytableDialog .paytableDots { display: none; }

/* Celebrations fill the cabinet; only the illustration itself keeps its native ratio. */
html[data-slot-orientation="portrait"] #bigWinOverlay { overflow: hidden; isolation: isolate; background: radial-gradient(ellipse at 50% 45%,#752caf80,transparent 65%),#080112c9; }
html[data-slot-orientation="portrait"] #bigWinOverlay::before { content: ''; position: absolute; z-index: -1; left: 50%; top: 47%; width: 250%; aspect-ratio: 1; background: repeating-conic-gradient(from 0deg,#bd7dff20 0deg 9deg,transparent 9deg 24deg); transform: translate(-50%,-50%); animation: portraitMonsterRays 36s linear infinite; pointer-events: none; }
html[data-slot-orientation="portrait"] #bigWinOverlay .bigWinArt { width: 100%; max-width: none; }
html[data-slot-orientation="portrait"] #bigWinOverlay .bigWinGlyph { font-size: 10.8cqw; }
html[data-slot-orientation="portrait"] #bigWinOverlay .bigWinGlyphText { font-size: 7cqw; }
html[data-slot-orientation="portrait"] #bigWinOverlay .bigWinSuffix { font-size: 8cqw; }
html[data-slot-orientation="portrait"] #levelUpOverlay .levelUpCard, html[data-slot-orientation="portrait"] #draculaConversionOverlay .draculaConversionCard { width: 100%; max-width: none; }
html[data-slot-orientation="portrait"] #levelUpOverlay .levelUpTitle { font-size: 6.1cqw; }
html[data-slot-orientation="portrait"] #levelUpOverlay .levelUpSpins { font-size: 4.4cqw; letter-spacing: .025em; }
html[data-slot-orientation="portrait"] #draculaConversionOverlay .draculaConversionContents h2 { font-size: 4.3cqw; letter-spacing: .02em; }
html[data-slot-orientation="portrait"] #draculaConversionOverlay .draculaConversionContents > strong { font-size: 4.5cqw; letter-spacing: .015em; }
html[data-slot-orientation="portrait"] #draculaConversionOverlay .draculaChoice.isMissing::after, html[data-slot-orientation="portrait"] #draculaConversionOverlay .draculaChoice.isMissed::after { font-size: 10cqw; }
html[data-slot-orientation="portrait"] #bonusTransition .bonusTransitionCopy { padding: 0 5%; gap: 10px; transform: none; }
html[data-slot-orientation="portrait"] #bonusTransition .bonusTransitionCopy small { font-size: 5cqw; letter-spacing: .1em; }
html[data-slot-orientation="portrait"] #bonusTransition .bonusTransitionCopy strong { max-width: 100%; font-size: 29cqw; line-height: 1; }
html[data-slot-orientation="portrait"] #bonusTransition.isOutro .bonusTransitionCopy strong { font-size: 17cqw; }
html[data-slot-orientation="portrait"] #bonusTransition .bonusTransitionCopy span { font-size: 8cqw; letter-spacing: .06em; }
html[data-slot-orientation="portrait"] #bonusTransition .bonusRecoveryPrompt { left: 8%; right: 8%; bottom: 9%; font-size: 3.2cqw; }
@keyframes portraitMonsterRays { to { transform: translate(-50%,-50%) rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { html[data-slot-orientation="portrait"] #bigWinOverlay::before { animation: none; } }
/* The loading scene uses the same portrait castle artwork as the cabinet. */
html[data-slot-orientation="portrait"] #loadingScreen::before { inset: 0; background-image:none; background-position: center; background-size: cover; filter: saturate(.9) brightness(.37); transform: none; animation: none; }
html[data-slot-orientation="portrait"] #loadingScreen::after { background: radial-gradient(ellipse at 50% 45%,#793db640,transparent 63%),linear-gradient(#0b001133,#09011477); }
html[data-slot-orientation="portrait"] #loadingScreen .loadingCard { width: 88%; min-height: 0; padding: 57px 16px 29px; gap: 16px; border-radius: 5px; border-width: 3px; box-shadow: inset 0 0 0 4px #12051c,0 12px 32px #000b,0 0 25px #ab45ee40; }
html[data-slot-orientation="portrait"] #loadingScreen .loadingSpecimen { top: -41px; width: 86px; }
html[data-slot-orientation="portrait"] #loadingScreen .loadingEyebrow { margin-top: 0; font-size: clamp(8px,2.3cqw,11px); letter-spacing: .17em; }
html[data-slot-orientation="portrait"] #loadingScreen .loadingLogo { gap: 5px; }
html[data-slot-orientation="portrait"] #loadingScreen .loadingLogo span { font-size: 12cqw; }
html[data-slot-orientation="portrait"] #loadingScreen .loadingLogo strong { font-size: 13.4cqw; letter-spacing: .015em; }
html[data-slot-orientation="portrait"] #loadingScreen .loadingDivider { font-size: 11px; }
html[data-slot-orientation="portrait"] #loadingScreen .loadingTrack { width: 88%; height: 18px; padding: 2px; border-radius: 3px; border-width: 2px; }
html[data-slot-orientation="portrait"] #loadingScreen .loadingStatus { gap: 7px; min-height: 25px; }
html[data-slot-orientation="portrait"] #loadingScreen p { font-size: clamp(8px,2.5cqw,12px); letter-spacing: .04em; }
/* Explicit visibility wins over the legacy landscape orientation guard. */
html[data-slot-orientation="portrait"] #paytableDialog[open] { visibility: visible; }
html[data-slot-orientation="portrait"] #overlay[hidden], html[data-slot-orientation="portrait"] #bigWinOverlay[hidden], html[data-slot-orientation="portrait"] #levelUpOverlay[hidden], html[data-slot-orientation="portrait"] #draculaConversionOverlay[hidden], html[data-slot-orientation="portrait"] #bonusTransition[hidden], html[data-slot-orientation="portrait"] #paytableDialog:not([open]) { display: none; }