/* Physical CSS-pixel panels over the fitted 1000:1777.778 cabinet. */
html:not([data-slot-orientation="portrait"]) :is(.portraitPanelClose,.portraitOnlyControl,.portraitPanelShade){display:none}
html[data-slot-orientation="portrait"] .portraitPanelShade{position:fixed;z-index:1000;inset:0;background:#001115bd;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
html[data-slot-orientation="portrait"] :is(#gameMenuPanel,#autoSpinChoice,#testMenuPanel).portraitManagedPanel{position:fixed;z-index:1001;inset:auto;left:50%;top:50%;transform:translate(-50%,-50%);width:min(94vw,420px);max-height:calc(100dvh - 24px);min-height:0;aspect-ratio:auto;padding:62px 49px 74px;overflow:auto;display:flex;flex-direction:column;justify-content:flex-start;gap:13px;border:0;border-radius:26px;color:#fff4d0;background:none;border-image:url('../assets/ui/spa-menu-panel.png') 270 240 300 240 fill / 62px 55px 70px / 0 stretch;filter:drop-shadow(0 16px 28px #000b);animation:portraitPanelIn 180ms ease both;container-type:inline-size;scrollbar-width:thin;scrollbar-color:#dfc778 #073333}
html[data-slot-orientation="portrait"] .portraitManagedPanel header{margin:0}
html[data-slot-orientation="portrait"] .portraitManagedPanel h2{margin:0 0 3px;font:800 24px/1.15 Georgia,serif;color:#ffe69a}
@media(max-width:360px){html[data-slot-orientation="portrait"] #autoSpinChoice h2{font-size:22px}}
html[data-slot-orientation="portrait"] :is(.portraitPanelClose,#closePaytableButton){position:absolute;z-index:4;top:7px;right:7px;width:44px;height:44px;padding:0;margin:0;display:grid;place-items:center;border:0;border-radius:50%;color:#fff1bc;background:radial-gradient(circle,#135a55 0 47%,#e2c36c 49% 52%,transparent 55%);font-size:0;cursor:pointer;aspect-ratio:1}
/* The native frame's flowers and towels extend inward: keep content inside
   its plain teal field, and preserve those ornaments in the corner slices. */
html[data-slot-orientation="portrait"] :is(#gameMenuPanel,#autoSpinChoice,#testMenuPanel) .portraitPanelClose{top:54px;right:42px}
html[data-slot-orientation="portrait"] :is(.portraitPanelClose,#closePaytableButton)::before,
html[data-slot-orientation="portrait"] :is(.portraitPanelClose,#closePaytableButton)::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;border-radius:1px;background:#fff1bc;transform:translate(-50%,-50%) rotate(45deg);pointer-events:none}
html[data-slot-orientation="portrait"] :is(.portraitPanelClose,#closePaytableButton)::after{transform:translate(-50%,-50%) rotate(-45deg)}
html[data-slot-orientation="portrait"] .portraitManagedPanel .menuOptions{gap:8px;margin:0}
html[data-slot-orientation="portrait"] .portraitManagedPanel .menuOptions button{min-height:54px;padding:7px 8px;gap:8px;grid-template-columns:26px minmax(0,1fr) auto}
html[data-slot-orientation="portrait"] .portraitManagedPanel .menuOptions i{font-size:19px}
html[data-slot-orientation="portrait"] .portraitManagedPanel .menuOptions strong{font-size:15px;line-height:1.2}
html[data-slot-orientation="portrait"] .portraitManagedPanel .menuOptions small{font-size:11px;line-height:1.25}
html[data-slot-orientation="portrait"] .portraitManagedPanel .menuOptions b{font-size:23px}
html[data-slot-orientation="portrait"] .portraitManagedPanel .menuOptions .toggle{font-size:14px}
html[data-slot-orientation="portrait"] .autoSpinOptions{gap:10px;margin:0}
html[data-slot-orientation="portrait"] .autoSpinOptions button{min-height:62px;padding:9px 4px;font-size:24px}
html[data-slot-orientation="portrait"] .autoSpinOptions small{font-size:10px}
html[data-slot-orientation="portrait"] .testControls{display:none}
html:not([data-slot-orientation="portrait"]) #testMenuPanel>.testMenuTitle{display:none}
/* Keep the QA header outside the scrollable actions on short phones. */
html[data-slot-orientation="portrait"] #testMenuPanel.portraitManagedPanel{height:min(740px,calc(100dvh - 24px - var(--slot-safe-top) - var(--slot-safe-bottom)));max-height:calc(100dvh - 24px - var(--slot-safe-top) - var(--slot-safe-bottom));top:calc(50% + (var(--slot-safe-top) - var(--slot-safe-bottom))/2);gap:12px;overflow:hidden;padding:62px 49px 64px}
html[data-slot-orientation="portrait"] #testMenuPanel>.testMenuTitle{flex:none;min-height:32px;margin:0;padding-right:43px;font:800 23px/1.25 Georgia,serif;color:#ffe69a}
html[data-slot-orientation="portrait"] #testMenuPanel .testMenuActions{display:flex;flex-direction:column;flex:1;min-height:0;gap:7px;padding:3px 5px 5px;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;scroll-padding-block:4px;scrollbar-width:thin;scrollbar-color:#dfc778 #073333}
html[data-slot-orientation="portrait"] #testMenuPanel .testMenuActions>strong{flex:none;margin:5px 0 2px;font-size:14px;line-height:1.3}
html[data-slot-orientation="portrait"] #testMenuPanel .testMenuActions>button{flex:none;min-height:44px;padding:8px;margin:0;font-size:13px;line-height:1.25}
html[data-slot-orientation="portrait"] #paytableDialog{position:fixed;inset:0;margin:auto;width:min(96vw,550px);height:min(94dvh,880px);max-height:calc(100dvh - 16px);aspect-ratio:auto;max-width:calc(100vw - 12px);visibility:visible;pointer-events:auto;overflow:hidden}
html[data-slot-orientation="portrait"] #paytableDialog .dialogFrame{display:flex;flex-direction:column;gap:10px;padding:53px 25px 27px;border-image:url('../assets/ui/paytable-frame.png') 150 160 180 160 fill / 31px / 0 stretch;background:none;filter:none}
html[data-slot-orientation="portrait"] #paytableContent{height:auto;flex:1;min-height:0;padding:0 5px 8px;overflow:hidden auto;overscroll-behavior:contain;scrollbar-gutter:auto;touch-action:pan-y}
html[data-slot-orientation="portrait"] .paytablePage{height:auto;min-height:100%}
html[data-slot-orientation="portrait"] .paytablePage h2{font-size:25px;line-height:1.1;margin:0 0 12px}
html[data-slot-orientation="portrait"] .paytablePage .lead{max-width:100%;font-size:13px;line-height:1.45;margin:0 0 16px}
html[data-slot-orientation="portrait"] .symbolPayGrid{display:grid;grid-template-columns:1fr;grid-template-rows:none;gap:9px;height:auto}
html[data-slot-orientation="portrait"] .symbolPay{grid-template-columns:76px minmax(0,1fr);gap:8px;min-height:96px;padding:8px}
html[data-slot-orientation="portrait"] .symbolPay h3{font-size:15px;white-space:normal;margin:0 0 8px}
html[data-slot-orientation="portrait"] .symbolPayouts{gap:4px}
html[data-slot-orientation="portrait"] .symbolPayouts span{min-height:36px;padding:4px 1px}
html[data-slot-orientation="portrait"] .symbolPayouts b{font-size:11px}
html[data-slot-orientation="portrait"] .symbolPayouts em{font-size:13px}
html[data-slot-orientation="portrait"] .ruleCards{grid-template-columns:1fr;grid-template-rows:none;gap:10px;height:auto}
html[data-slot-orientation="portrait"] .ruleCard{grid-template-columns:39px minmax(0,1fr);gap:10px;padding:13px 10px}
html[data-slot-orientation="portrait"] .ruleCard>i{font-size:18px}
html[data-slot-orientation="portrait"] .ruleCard h3{font-size:16px;line-height:1.2;margin-bottom:6px}
html[data-slot-orientation="portrait"] :is(.ruleCard p,.pediRuleGrid p){font-size:13px;line-height:1.45}
html[data-slot-orientation="portrait"] .pediRuleGrid{grid-template-columns:1fr;height:auto;gap:10px}
html[data-slot-orientation="portrait"] .pediRuleGrid article{display:grid;grid-template-columns:85px minmax(0,1fr);column-gap:9px;padding:12px 8px;text-align:left}
html[data-slot-orientation="portrait"] .pediRuleGrid img{grid-row:span 2;width:85px;height:100px;max-height:none;margin:0;align-self:center}
html[data-slot-orientation="portrait"] .pediRuleGrid h3{font-size:16px;line-height:1.15;margin:3px 0 7px}
html[data-slot-orientation="portrait"] .pediMathNote{max-width:100%;margin:14px 0;font-size:12px;line-height:1.45}
html[data-slot-orientation="portrait"] .lineGallery{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;gap:10px;height:auto}
html[data-slot-orientation="portrait"] .lineMini span{font-size:13px}
html[data-slot-orientation="portrait"] #paytableTabs{display:grid;grid-template-columns:repeat(2,1fr);flex:0 0 auto;gap:6px;height:auto;padding:0}
html[data-slot-orientation="portrait"] #paytableTabs button{min-height:44px;padding:7px 4px;font-size:13px}
html[data-slot-orientation="portrait"] .screenOverlay{inset:0;width:100%;height:100%}
html[data-slot-orientation="portrait"] .pickPediStage{width:100%;height:100%}
html[data-slot-orientation="portrait"] .pickPediTitle{top:11%;width:88%;height:16%}
html[data-slot-orientation="portrait"] #pickPediPrompt{top:29%;left:8%;right:8%;font-size:clamp(12px,3.5cqw,19px);line-height:1.4;letter-spacing:.04em}
html[data-slot-orientation="portrait"] .pediChoices{top:41%;bottom:auto;left:4%;right:4%;grid-template-columns:repeat(6,minmax(0,1fr));gap:12cqw 1cqw;align-items:start}
html[data-slot-orientation="portrait"] .pediChoice{grid-column:span 2;min-width:44px;min-height:44px;opacity:1;transform:none}
html[data-slot-orientation="portrait"] .pediChoice:nth-child(4){grid-column:2 / span 2}
html[data-slot-orientation="portrait"] .pediChoice:nth-child(5){grid-column:4 / span 2}
html[data-slot-orientation="portrait"] .pickPediOverlay.isEntering .pediChoice{animation-fill-mode:backwards}
html[data-slot-orientation="portrait"] .pediChoice.isSelected,html[data-slot-orientation="portrait"] .pickPediOverlay.isAllRevealed .pediChoice.isSelected{transform:scale(1.06)}
html[data-slot-orientation="portrait"] :is(.pediStatic,.pediPrize,.pediVideoCanvas){width:100%;height:100%;aspect-ratio:1;object-fit:contain}
html[data-slot-orientation="portrait"] .pediInstantAmount{inset:10%;font-size:clamp(18px,6.4cqw,38px)}
html[data-slot-orientation="portrait"] #winSpinDoors{left:var(--portrait-doors-left);top:var(--portrait-doors-top);width:var(--portrait-doors-width);height:var(--portrait-doors-height);right:auto;bottom:auto}
html[data-slot-orientation="portrait"] #pediMultiplierValue{top:26%;font-size:clamp(70px,22cqw,150px)}
html[data-slot-orientation="portrait"] .pediMultiplierOverlay.isParked #pediMultiplierValue{left:15%;top:11%}
html[data-slot-orientation="portrait"] .pediMultiplierOverlay:is(.isReturning,.isFlashing,.isLeaving) #pediMultiplierValue{top:26%}
html[data-slot-orientation="portrait"] .messageCard{width:94%;min-height:0;padding:40px 35px;background:none;border-image:url('../assets/ui/spa-menu-panel.png') 210 190 200 190 fill / 39px / 0 stretch}
html[data-slot-orientation="portrait"] .messageCard>small{font-size:12px}
html[data-slot-orientation="portrait"] .messageCard h2{font-size:clamp(23px,6.5cqw,38px);line-height:1.15}
html[data-slot-orientation="portrait"] .messageCard p{max-width:100%;font-size:14px}
html[data-slot-orientation="portrait"] .messageCard>strong{font-size:clamp(28px,10cqw,62px);margin:12px 0}
html[data-slot-orientation="portrait"] .messageCard .panelAction{min-height:44px;font-size:14px;width:90%}
html[data-slot-orientation="portrait"] .bonusTransition{background-size:cover}
html[data-slot-orientation="portrait"] .bonusTransition::after{inset:24% 8%}
html[data-slot-orientation="portrait"] .bonusTransition .portalCopy,html[data-slot-orientation="portrait"] .bonusTransition.isAwardSummary .portalCopy{width:88%;top:-4%}
html[data-slot-orientation="portrait"] .bonusTransition .portalCopy h2,html[data-slot-orientation="portrait"] .bonusTransition.isAwardSummary .portalCopy h2{font-size:clamp(29px,9cqw,58px);line-height:1.08;white-space:normal}
html[data-slot-orientation="portrait"] .bonusTransition .portalCopy strong{font-size:clamp(37px,13cqw,88px);line-height:1.1;margin:15px 0 0}
html[data-slot-orientation="portrait"] .bonusTransition.isAwardSummary .portalCopy strong{font-size:clamp(23px,7cqw,46px);white-space:normal}
html[data-slot-orientation="portrait"] .bigWinReadout{width:86%;margin-top:-20%}
html[data-slot-orientation="portrait"] .bigWinReadout h2{font-size:clamp(40px,14cqw,88px)}
html[data-slot-orientation="portrait"] #bigWinNumberCanvas{width:100%;height:auto;aspect-ratio:900 / 190}
html[data-slot-orientation="portrait"] #skipBigWinButton{min-width:84px;min-height:44px;right:6%;bottom:5%;font-size:14px;padding:10px 17px}
html[data-slot-orientation="portrait"] :is(.portraitManagedPanel,#paytableDialog,.pickPediOverlay) button:focus-visible{outline:3px solid #fff2b0;outline-offset:3px}
@keyframes portraitPanelIn{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){html[data-slot-orientation="portrait"] :is(.portraitManagedPanel,.pickPediBloom),html[data-slot-orientation="portrait"] .pediMedallion::before{animation:none}}
/* Revealed alternatives stay legible beside the selected treatment. */
html[data-slot-orientation="portrait"] .pediChoice{border-radius:50%}
html[data-slot-orientation="portrait"] .pickPediOverlay.isAllRevealed .pediChoice:not(.isSelected){opacity:.72;filter:grayscale(.08) brightness(.92) drop-shadow(0 5px 6px #000)}