/* Portrait panels preserve native event handlers, artwork and game state. */
html:not([data-slot-orientation="portrait"]) .portraitPanelClose { display: none; }
.portraitPanelClose, #portraitDevMenuButton, #portraitFeaturesButton, #portraitPaytableSelect, .portraitPickLabel, .portraitPanelShade { display: none; }
html[data-slot-orientation="portrait"] .portraitPanelShade:not([hidden]) { display: block; position: absolute; inset: 0; z-index: 39; background: rgba(0, 5, 12, .7); backdrop-filter: blur(4px); }
/* Preserve the crest and corner carving while shortening the quiet middle of the frame. */
html[data-slot-orientation="portrait"] .glassPanel {
  --portrait-panel-width: min(94cqw, 390px);
  z-index: 40; left: 50%; right: auto; top: 50%; bottom: auto;
  width: var(--portrait-panel-width); height: auto; aspect-ratio: auto;
  box-sizing: border-box; padding: calc(var(--portrait-panel-width) * .29) calc(var(--portrait-panel-width) * .16) calc(var(--portrait-panel-width) * .18);
  transform: translate(-50%, -50%); animation: none; background: none;
  border: 0 solid transparent;
  border-image-source: url('../assets/art/menu-popup-frame.webp');
  border-image-slice: 310 160 300 fill;
  border-image-width: calc(var(--portrait-panel-width) * .302734375) calc(var(--portrait-panel-width) * .15625) calc(var(--portrait-panel-width) * .29296875);
  border-image-repeat: stretch;
  filter: drop-shadow(0 12px 20px #000);
}
html[data-slot-orientation="portrait"] .glassPanel header { flex: none; padding: 0 0 12px; margin: 0 0 4px; }
html[data-slot-orientation="portrait"] .glassPanel header span { font-size: 9px; line-height: 1.3; letter-spacing: .12em; }
html[data-slot-orientation="portrait"] .glassPanel header strong { margin: 4px 0 0; font-size: clamp(21px, 6cqw, 24px); line-height: 1.1; }
html[data-slot-orientation="portrait"] #portraitDevMenuButton { display: grid; }
html[data-slot-orientation="portrait"] .gameMenu > button:not(.portraitPanelClose) {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) 28px; align-items: center;
  box-sizing: border-box; flex: none; width: 100%; min-height: 52px;
  gap: 8px; padding: 7px 8px; margin: 7px 0 0; border-radius: 7px;
}
html[data-slot-orientation="portrait"] .gameMenu button i { box-sizing: border-box; width: 28px; height: 28px; font-size: 18px; }
html[data-slot-orientation="portrait"] .gameMenu button span { min-width: 0; }
html[data-slot-orientation="portrait"] .gameMenu button span strong { font-size: 13px; line-height: 1.2; }
html[data-slot-orientation="portrait"] .gameMenu button span small { margin-top: 3px; font-size: 10px; line-height: 1.25; }
html[data-slot-orientation="portrait"] .gameMenu button b { font-size: 23px; line-height: 1; }
html[data-slot-orientation="portrait"] .gameMenu .toggle { box-sizing: border-box; width: 28px; height: 16px; }
html[data-slot-orientation="portrait"] .gameMenu .toggle::after { top: 2px; left: 2px; width: 10px; height: 10px; }
html[data-slot-orientation="portrait"] .gameMenu button[aria-pressed='true'] .toggle::after { transform: translateX(12px); }
html[data-slot-orientation="portrait"] .menuSession {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); flex: none; gap: 8px;
  margin: 14px 0 0; padding: 11px 0 0; border-top: 1px solid #8cc6c328;
  font-size: 10px; line-height: 1.3; text-align: center;
}
html[data-slot-orientation="portrait"] .menuSession > span { display: grid; gap: 3px; }
html[data-slot-orientation="portrait"] .menuSession b { font-size: 11px; }
/* A 30px face with a generous 44px target. The cross uses two centered strokes. */
html[data-slot-orientation="portrait"] .portraitPanelClose {
  position: absolute; z-index: 50; display: grid; grid-template-columns: 1fr; place-items: center;
  right: 7%; top: 9%; box-sizing: border-box; width: 44px; height: 44px; min-width: 44px; min-height: 44px;
  margin: 0; padding: 0; border: 0; border-radius: 50%; color: #fff0b1; background: none;
  font-size: 0; line-height: 1; text-align: center; box-shadow: none;
}
html[data-slot-orientation="portrait"] .portraitPanelClose::before {
  content: ''; position: absolute; inset: 7px; border: 1px solid #bca36b; border-radius: 50%;
  background: radial-gradient(circle at 40% 20%, #23545d, #061821 80%); box-shadow: 0 2px 7px #0008;
}
html[data-slot-orientation="portrait"] .portraitPanelClose::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; transform: translate(-50%, -50%);
  background: linear-gradient(45deg, transparent calc(50% - 1px), currentColor calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)), linear-gradient(-45deg, transparent calc(50% - 1px), currentColor calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px));
}
html[data-slot-orientation="portrait"] .glassPanel .portraitPanelClose { top: calc(var(--portrait-panel-width) * .215); right: calc(var(--portrait-panel-width) * .09); }
html[data-slot-orientation="portrait"] .autoSpinMenu { display: flex; flex-direction: column; justify-content: flex-start; }
html[data-slot-orientation="portrait"] .autoSpinOptions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 14px 0; }
html[data-slot-orientation="portrait"] .autoSpinOptions button { box-sizing: border-box; justify-self: center; width: 64px; height: 64px; min-width: 44px; min-height: 44px; font-size: 22px; }
html[data-slot-orientation="portrait"] .autoSpinMenu > small { display: block; font-size: 11px; line-height: 1.45; }
html[data-slot-orientation="portrait"] .devPanel.isCollapsed { display: none; }
html[data-slot-orientation="portrait"] .devPanel:not(.isCollapsed):not([hidden]) { position: absolute; z-index: 80; left: 5%; top: 22%; right: auto; bottom: auto; width: 90%; max-height: 65%; padding: 52px 12px 14px; box-sizing: border-box; overflow-y: auto; border: 1px solid #ad9358; border-radius: 16px; background: #061920; }
html[data-slot-orientation="portrait"] .devPanel .devToggle { display: none; }
html[data-slot-orientation="portrait"] .devPanel .portraitPanelClose { top: 5px; right: 7px; }
html[data-slot-orientation="portrait"] .devTools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; max-height: none; padding: 0; gap: 8px; }
html[data-slot-orientation="portrait"] .devTools strong { grid-column: 1 / -1; font-size: 13px; }
html[data-slot-orientation="portrait"] .devTools button { min-height: 44px; padding: 6px; font-size: 13px; }

/* A purpose-built 2:3 grimoire; live rules scroll within its empty center. */
html[data-slot-orientation="portrait"] #paytableDialog, html[data-slot-orientation="portrait"] #portraitFeaturesDialog { width: min(96vw, 640px, calc(96dvh * 2 / 3)); max-width: 96vw; height: auto; max-height: 96dvh; aspect-ratio: 2 / 3; margin: auto; padding: 0; border: 0; color: #d7e8e9; overflow: visible; background: transparent; }
html[data-slot-orientation="portrait"] #paytableDialog::backdrop, html[data-slot-orientation="portrait"] #portraitFeaturesDialog::backdrop { background: rgba(0, 5, 10, .88); backdrop-filter: blur(7px); }
html[data-slot-orientation="portrait"] .paytableFrame, html[data-slot-orientation="portrait"] .portraitFeaturesFrame { position: relative; width: 100%; height: 100%; display: block; padding: 0; border: 0; border-radius: 0; overflow: hidden; background: #03131b url('../assets/art/mobile/portrait-grimoire.webp') center / contain no-repeat; box-shadow: 0 15px 45px #000b; }
html[data-slot-orientation="portrait"] #closePaytableButton, html[data-slot-orientation="portrait"] #portraitFeaturesDialog .portraitPanelClose { top: 5.5%; right: 7%; width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
html[data-slot-orientation="portrait"] .paytableContent { display: block; position: absolute; inset: 10% 10% 17%; padding: 0; overflow: hidden; }
html[data-slot-orientation="portrait"] .paytableStage { width: 100%; height: 100%; aspect-ratio: auto; background: none; border-radius: 0; box-shadow: none; }
html[data-slot-orientation="portrait"] .paytablePage { display: grid; grid-template-rows: 60px minmax(0, 1fr); gap: 6px; inset: 0; overflow: hidden; }
html[data-slot-orientation="portrait"] .paytablePageTitle { position: static; width: auto; height: auto; margin-right: 34px; border: 0; border-radius: 0; background: none; box-shadow: none; gap: 4px; align-content: center; }
html[data-slot-orientation="portrait"] .paytablePageTitle span { font-size: 10px; line-height: 1.15; letter-spacing: .08em; }
html[data-slot-orientation="portrait"] .paytablePageTitle h3 { font-size: clamp(19px, 5vw, 30px); line-height: 1.08; }
html[data-slot-orientation="portrait"] .paytablePageBody { position: static; min-width: 0; min-height: 0; padding: 1px 3px 10px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #627b74 #09222b; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
html[data-slot-orientation="portrait"] .paytablePageLead { height: auto; margin: 0 0 10px; font-size: 12px; line-height: 1.4; }
html[data-slot-orientation="portrait"] .paytablePayoutCards { height: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0; }
html[data-slot-orientation="portrait"] .paytablePayoutCards.fortunes .paytablePayoutCard:first-child { grid-column: 1 / -1; grid-template-columns: 86px minmax(0, 1fr); grid-template-rows: auto auto; }
html[data-slot-orientation="portrait"] .paytablePayoutCards.fortunes .paytablePayoutCard:first-child .paytablePayoutSymbol { grid-row: 1 / -1; }
html[data-slot-orientation="portrait"] .paytablePayoutCards.fortunes .paytablePayoutCard:first-child h4 { align-self: end; }
html[data-slot-orientation="portrait"] .paytablePayoutCard { grid-template-rows: 90px auto auto; padding: 6px; gap: 4px; }
html[data-slot-orientation="portrait"] .paytablePayoutSymbol { height: 90px; }
html[data-slot-orientation="portrait"] .paytablePayoutCard h4, html[data-slot-orientation="portrait"] .paytableSpecialCard h4 { font-size: 12px; line-height: 1.15; }
html[data-slot-orientation="portrait"] .paytablePayoutMatrix { min-height: 50px; grid-template-rows: 21px 29px; }
html[data-slot-orientation="portrait"] .paytablePayoutMatrix span { font-size: 11px; }
html[data-slot-orientation="portrait"] .paytablePayoutMatrix strong { font-size: 12px; }
html[data-slot-orientation="portrait"] .paytableSpecialGrid { grid-template-columns: 1fr; height: auto; gap: 8px; }
html[data-slot-orientation="portrait"] .paytableSpecialCard { grid-template-columns: 70px minmax(0, 1fr); padding: 9px; gap: 6px; }
html[data-slot-orientation="portrait"] .paytableSpecialArt { height: 90px; }
html[data-slot-orientation="portrait"] .paytableSpecialCard span { font-size: 10px; letter-spacing: .07em; }
html[data-slot-orientation="portrait"] :is(.paytableSpecialCard, .paytableFeatureMedallion, .paytableMushroomHero, .paytableMushroomSteps, .paytableRuleList, .paytableInfoNotes) p { font-size: 12px; line-height: 1.4; }
html[data-slot-orientation="portrait"] .paytableBonusAwards { height: auto; grid-template-columns: 1fr; gap: 7px; margin-top: 9px; }
html[data-slot-orientation="portrait"] .paytableBonusAwards article { min-height: 57px; padding: 7px 12px; grid-template-columns: 27px 36px 1fr; grid-template-rows: auto auto; }
html[data-slot-orientation="portrait"] .paytableBonusAwards strong { font-size: 30px; }
html[data-slot-orientation="portrait"] .paytableBonusAwards span { font-size: 10px; }
html[data-slot-orientation="portrait"] .paytableBonusAwards b { font-size: 13px; }
html[data-slot-orientation="portrait"] .paytableBonusAwards small { font-size: 11px; }
html[data-slot-orientation="portrait"] .paytableStackShowcase { height: auto; grid-template-rows: auto auto; gap: 8px; }
html[data-slot-orientation="portrait"] :is(.paytableStackPair, .paytableWildReelRow, .paytableTransformationGrid, .paytableTransformationSupport, .paytableMultiplierGrid) { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; height: auto; margin: 0 0 8px; gap: 8px; }
html[data-slot-orientation="portrait"] .paytableFeatureMedallion { grid-template-rows: 102px auto; padding: 6px; }
html[data-slot-orientation="portrait"] .paytableFeatureArt { width: 100%; height: 102px; container-type: normal; }
html[data-slot-orientation="portrait"] .paytableFeatureIcon.featureIcon { width: min(100%, 100px); height: auto; }
html[data-slot-orientation="portrait"] .paytableFeatureMedallion p { padding: 3px 0 0; min-height: 0; }
html[data-slot-orientation="portrait"] .paytableTransformationSupport .paytableFeatureMedallion { grid-template-columns: 1fr; grid-template-rows: 102px auto; text-align: center; }
html[data-slot-orientation="portrait"] .paytableTransformationSupport .paytableFeatureMedallion p { padding: 3px 0 0; }
html[data-slot-orientation="portrait"] .paytableRibbon { height: auto; margin: 9px 0 0; padding: 9px; font-size: 12px; line-height: 1.4; }
html[data-slot-orientation="portrait"] .paytableMultiplierGrid .paytableFeatureMedallion:last-child { grid-column: 1 / -1; grid-template-columns: 85px minmax(0, 1fr); grid-template-rows: auto; }
html[data-slot-orientation="portrait"] .paytableMultiplierGrid .paytableFeatureMedallion:last-child .paytableFeatureArt { height: 85px; }
html[data-slot-orientation="portrait"] .paytableMultiplierEquation { width: 100%; height: auto; gap: 3px; margin-top: 9px; }
html[data-slot-orientation="portrait"] .paytableMultiplierEquation article { min-height: 76px; padding: 7px 3px; }
html[data-slot-orientation="portrait"] .paytableMultiplierEquation strong { font-size: 19px; }
html[data-slot-orientation="portrait"] .paytableMultiplierEquation span { margin-top: 5px; font-size: 10px; line-height: 1.2; }
html[data-slot-orientation="portrait"] .paytableMultiplierEquation > i { font-size: 19px; }
html[data-slot-orientation="portrait"] .paytableMushroomLayout, html[data-slot-orientation="portrait"] .paytableRulesLayout { height: auto; grid-template-columns: 1fr; gap: 8px; }
html[data-slot-orientation="portrait"] .paytableMushroomHero, html[data-slot-orientation="portrait"] .paytableWildHero { grid-template-rows: 108px auto auto; padding: 9px; gap: 5px; }
html[data-slot-orientation="portrait"] .paytableMushroomHero > div { height: 108px; }
html[data-slot-orientation="portrait"] .paytableMushroomHero strong, html[data-slot-orientation="portrait"] .paytableWildHero strong { font-size: 15px; }
html[data-slot-orientation="portrait"] .paytableWildHero span { font-size: 11px; }
html[data-slot-orientation="portrait"] .paytableMushroomSteps, html[data-slot-orientation="portrait"] .paytableRuleList { grid-template-rows: none; gap: 7px; }
html[data-slot-orientation="portrait"] .paytableMushroomSteps article, html[data-slot-orientation="portrait"] .paytableRuleList article { grid-template-columns: 30px minmax(0, 1fr); min-height: 58px; padding: 8px; gap: 6px; }
html[data-slot-orientation="portrait"] .paytableMushroomSteps b, html[data-slot-orientation="portrait"] .paytableRuleList b { width: 27px; font-size: 13px; }
html[data-slot-orientation="portrait"] .paytableMushroomSteps strong { font-size: 12px; }
html[data-slot-orientation="portrait"] .paytableLineCards { height: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; gap: 8px; }
html[data-slot-orientation="portrait"] .paytableLineCard { padding: 6px; gap: 4px; }
html[data-slot-orientation="portrait"] .paytableLineCard > strong { font-size: 14px; }
html[data-slot-orientation="portrait"] .paytableLineCard svg { height: auto; aspect-ratio: 300 / 126; }
html[data-slot-orientation="portrait"] .paytableStatsGrid { height: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; gap: 8px; }
html[data-slot-orientation="portrait"] .paytableStatCard { min-height: 90px; padding: 9px 5px; }
html[data-slot-orientation="portrait"] .paytableStatCard strong { font-size: 20px; }
html[data-slot-orientation="portrait"] .paytableStatCard span { font-size: 11px; line-height: 1.35; }
html[data-slot-orientation="portrait"] .paytableInfoNotes { height: auto; grid-template-columns: 1fr; margin-top: 9px; }
html[data-slot-orientation="portrait"] .paytableInfoNotes p { padding: 10px; border: 0; border-top: 1px solid #5ac7d633; }
html[data-slot-orientation="portrait"] #paytableTabs.paytableControls { position: absolute; left: 10%; right: 10%; bottom: 7.5%; width: auto; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 6px; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
html[data-slot-orientation="portrait"] #paytableTabs .paytableNavButton { width: 44px; height: 44px; font-size: 31px; }
html[data-slot-orientation="portrait"] .paytableDots, html[data-slot-orientation="portrait"] .paytableCurrentPage { display: none; }
html[data-slot-orientation="portrait"] #portraitPaytableSelect { display: block; width: 100%; min-width: 0; min-height: 44px; padding: 5px; border: 1px solid #8eaa89; border-radius: 7px; color: #ffedb9; background: #082832; font: bold 11px/1.2 'Trebuchet MS', Arial, sans-serif; }

/* Twelve original choices, readable revealed rewards and a natural field crop. */
html[data-slot-orientation="portrait"] .mushroomScene { background-size: cover; background-position: 50% 55%; }
html[data-slot-orientation="portrait"] .mushroomHeader { left: 5%; top: 5%; width: 90%; transform: none; }
html[data-slot-orientation="portrait"] .mushroomHeader > span { font-size: clamp(11px, 3vw, 16px); letter-spacing: .15em; }
html[data-slot-orientation="portrait"] .mushroomHeader h2 { max-width: 90%; margin: 8px auto 0; font-size: clamp(27px, 7.5vw, 45px); line-height: 1.05; }
html[data-slot-orientation="portrait"] .mushroomHeader > strong { margin-top: 10px; gap: 5px; font-size: clamp(14px, 3.7vw, 20px); }
html[data-slot-orientation="portrait"] .mushroomGrid { left: 5%; top: 23%; width: 90%; height: 72%; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 2% 2%; }
html[data-slot-orientation="portrait"] .mushroomPick { min-width: 44px; min-height: 44px; }
html[data-slot-orientation="portrait"] .mushroomSprite { width: 100%; }
html[data-slot-orientation="portrait"] .pickReveal { inset: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; align-content: center; gap: 2px; }
html[data-slot-orientation="portrait"] .pickReveal .featureIcon { grid-area: auto; align-self: end; width: 86%; max-height: 100%; }
html[data-slot-orientation="portrait"] .portraitPickLabel { display: block; align-self: start; max-width: 100%; padding: 3px 2px; border-radius: 5px; color: #fff0bb; background: #00101de0; font: bold clamp(10px, 2.8vw, 14px)/1.2 'Trebuchet MS', Arial, sans-serif; text-shadow: 0 1px 2px #000; }
html[data-slot-orientation="portrait"] .mushroomGrid.isGathering .mushroomPick.isPicked { transform: translate3d(var(--mushroom-gather-x, 0), var(--mushroom-gather-y, 0), 0) scale(var(--mushroom-gather-scale, 1)); }
html[data-slot-orientation="portrait"] .mushroomGrid.isGathering .portraitPickLabel { visibility: hidden; }

/* Two balanced columns keep the fairy clear and every live readout centered. */
html[data-slot-orientation="portrait"] .activeFeatures { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; transform: none; background: none; pointer-events: none; }
html[data-slot-orientation="portrait"] .activeFeatures::before { display: none; }
html[data-slot-orientation="portrait"] .activeFeatures.isVisible { animation: none; }
html[data-slot-orientation="portrait"] .bonusInfoStat,
html[data-slot-orientation="portrait"] .bonusInfoFeatures {
  box-sizing: border-box; left: 1.5%; width: 28%; height: 6.6375%; padding: 3px 2%;
  border: 0; border-radius: 0; box-shadow: none;
  background: url('../assets/art/mobile/portrait-stat-bay-compact.webp') center / 100% 100% no-repeat;
}
html[data-slot-orientation="portrait"] .bonusInfoStat {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
}
html[data-slot-orientation="portrait"] .bonusInfoSpins,
html[data-slot-orientation="portrait"] .bonusInfoTotal { top: 50.0625%; }
html[data-slot-orientation="portrait"] .bonusInfoTotal,
html[data-slot-orientation="portrait"] .bonusInfoFeatures { left: 70.5%; }
html[data-slot-orientation="portrait"] .bonusInfoStat > span {
  width: 100%; margin: 0; padding: 0; font-size: clamp(10px, 2.7cqw, 12px); line-height: 1;
  letter-spacing: .025em; text-align: center;
}
html[data-slot-orientation="portrait"] .bonusInfoStat strong {
  position: static; width: 100%; max-width: 100%; margin: 0; padding: 0;
  font-size: var(--portrait-bonus-value-size, clamp(16px, 4.3cqw, 20px)); line-height: 1;
  text-align: center; transform: none;
}
html[data-slot-orientation="portrait"] .bonusInfoTotal strong { font-size: var(--portrait-bonus-value-size, clamp(15px, 4cqw, 19px)); }
html[data-slot-orientation="portrait"] .bonusInfoMultiplier,
html[data-slot-orientation="portrait"] .bonusInfoFeatures { top: 57.825%; height: 6.1875%; }
html[data-slot-orientation="portrait"] .bonusInfoMultiplier { gap: 2px; }
html[data-slot-orientation="portrait"] .bonusInfoMultiplier > span { font-size: clamp(9px, 2.5cqw, 11px); letter-spacing: .015em; }
html[data-slot-orientation="portrait"] .bonusInfoMultiplier strong { font-size: var(--portrait-bonus-value-size, clamp(15px, 4cqw, 19px)); }
/* The gem comes from the original multiplier medallion, excluding its baked award text. */
html[data-slot-orientation="portrait"] .bonusInfoMultiplier strong::before {
  content: ''; display: inline-block; box-sizing: border-box; width: 15px; height: 15px;
  margin-right: 5px; vertical-align: -2px; border: 1px solid #bb9a62; border-radius: 50%;
  background: #342378 url('../assets/art/feature-icons-atlas.webp?v=wicked-wood-feature-icons-5') 91.55844% 30.95238% / 1024% 1024% no-repeat;
}
html[data-slot-orientation="portrait"] .bonusInfoFeatures { padding: 0; background: none; }
html[data-slot-orientation="portrait"] .bonusInfoFeatures > header,
html[data-slot-orientation="portrait"] .bonusInfoFeatures > .activeFeatureList,
html[data-slot-orientation="portrait"] .bonusInfoFeatures > .bonusInfoEmpty { display: none; }
html[data-slot-orientation="portrait"] #portraitFeaturesButton {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; min-height: 44px;
  box-sizing: border-box; margin: 0; padding: 3px 5px; transform: translate(-50%, -50%);
  pointer-events: auto; border: 0; border-radius: 0; color: #ffecaa; box-shadow: none;
  background: url('../assets/art/mobile/portrait-stat-bay-compact.webp') center / 100% 100% no-repeat;
}
html[data-slot-orientation="portrait"] #portraitFeaturesButton > .portraitSpecialLabel {
  width: 100%; color: #9defff; font: 900 clamp(9px, 2.5cqw, 11px)/1 'Trebuchet MS', Arial, sans-serif;
  letter-spacing: .015em; text-transform: uppercase; text-align: center;
}
html[data-slot-orientation="portrait"] .portraitSpecialSummary,
html[data-slot-orientation="portrait"] .portraitSpecialIcons { display: inline-flex; align-items: center; justify-content: center; gap: 3px; }
html[data-slot-orientation="portrait"] .portraitSpecialSummary { max-width: 100%; gap: 4px; }
html[data-slot-orientation="portrait"] .portraitSpecialIcons:empty { display: none; }
html[data-slot-orientation="portrait"] #portraitFeaturesButton .featureIcon { flex: none; width: 16px; height: 16px; filter: none; }
html[data-slot-orientation="portrait"] #portraitFeaturesButton strong { flex: none; margin: 0; color: #fff1c6; font: bold 12px/1 Georgia, serif; white-space: nowrap; }
html[data-slot-orientation="portrait"] #portraitFeaturesDialog .portraitFeaturesFrame { display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 9px; box-sizing: border-box; padding: 17% 11% 18%; }
html[data-slot-orientation="portrait"] #portraitFeaturesDialog header { text-align: center; }
html[data-slot-orientation="portrait"] #portraitFeaturesDialog header > span { color: #94e7f2; font: 10px 'Trebuchet MS', Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
html[data-slot-orientation="portrait"] #portraitFeaturesTitle { margin: 5px 0 0; color: #ffe09c; font: bold 23px/1.1 Georgia, serif; }
html[data-slot-orientation="portrait"] .portraitFeatureTotals { margin: 0; color: #b6d5d9; font: 12px/1.4 'Trebuchet MS', Arial, sans-serif; text-align: center; }
html[data-slot-orientation="portrait"] .portraitFeatureRows { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
html[data-slot-orientation="portrait"] .portraitFeatureRows article { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 7px; padding: 8px 0; border-bottom: 1px solid #73cbd433; }
html[data-slot-orientation="portrait"] .portraitFeatureRows .featureIcon { width: 64px; }
html[data-slot-orientation="portrait"] .portraitFeatureRows strong { color: #ffdf9e; font: bold 12px/1.2 'Trebuchet MS', Arial, sans-serif; }
html[data-slot-orientation="portrait"] .portraitFeatureRows p { margin: 4px 0 0; color: #bcd4d9; font: 11px/1.4 'Trebuchet MS', Arial, sans-serif; }
html[data-slot-orientation="portrait"] :is(.glassPanel, .devPanel, #paytableDialog, #portraitFeaturesDialog) button:focus-visible, html[data-slot-orientation="portrait"] #portraitPaytableSelect:focus-visible, html[data-slot-orientation="portrait"] #portraitFeaturesButton:focus-visible { outline: 2px solid #9bfbff; outline-offset: 2px; }
html[data-slot-orientation="portrait"] .toast { max-width: 84%; bottom: 14%; padding: 9px 13px; border-radius: 12px; font-size: 13px; }
@media (prefers-reduced-motion: reduce) {
  html[data-slot-orientation="portrait"] .mushroomGrid.isGathering .mushroomPick.isPicked { transition: none; }
}
html[data-slot-orientation="portrait"] .activeFeatures:not(.isVisible) { visibility: hidden; }