/* The strip moves as one piece. Fruit keeps its shape throughout the spin. */
.reel { overflow: hidden; }
.symbol-art { will-change: auto; }
.reel-belt { position: absolute; inset: 0 0 auto; z-index: 2; will-change: transform; pointer-events: none; }
.reel-symbol,.cascade-piece { display: grid; place-items: center; container-type: size; isolation: isolate; }
.reel-symbol { width: 100%; }
.reel-symbol .symbol-art,.cascade-piece .symbol-art { width: min(95cqw,95cqh); height: min(95cqw,95cqh); filter: drop-shadow(0 3px 2px #002d3c66); }
.reel-running > .cell > .symbol-art,.reel-running > .cell::after,.board-falling .reel > .cell > .symbol-art,.board-falling .reel > .cell::after { visibility: hidden; }
.cascade-layer { position: absolute; inset: 0; z-index: 5; overflow: hidden; border-radius: inherit; pointer-events: none; }
.cascade-piece { position: absolute; width: 16.666666667%; height: 25%; }
.cascade-piece .symbol-art { transform-origin: center 88%; }
.cascade-departing { z-index: 1; }
.cascade-departing .symbol-art { filter: drop-shadow(0 0 8px var(--juice)); }
.cascade-bursting::before {
  content: '';
  position: absolute;
  inset: 13% 8%;
  z-index: -1;
  border: 2px solid var(--juice);
  border-radius: 51% 44% 54% 46%;
  background: radial-gradient(ellipse,#fff7d1b3 0%,var(--juice) 34%,transparent 72%);
  box-shadow: 0 0 9px var(--juice);
  animation: cascade-bloom var(--cascade-burst-time) linear both;
}
@keyframes cascade-bloom {
  from { transform: scale(.65); opacity: .9; }
  44% { transform: scale(1.06); opacity: .86; }
  to { transform: scale(var(--cascade-burst-scale)); opacity: 0; }
}
.cascade-droplet,.cascade-ripple { position: absolute; translate: -50% -50%; }
.cascade-droplet {
  z-index: 2;
  width: clamp(5px,1.55vw,9px);
  height: clamp(7px,2.25vw,16px);
  border-radius: 65% 48% 60% 45%;
  background: linear-gradient(145deg,#fff6d3 9%,var(--juice) 48%);
  box-shadow: 0 0 3px var(--juice);
}
.cascade-ripple {
  z-index: 1;
  width: 16%;
  height: 8%;
  border: 2px solid var(--juice);
  border-radius: 50%;
  background: radial-gradient(ellipse,#fff7c87d,transparent 72%);
  box-shadow: 0 0 9px var(--juice), inset 0 0 5px #fff3c7b3;
}
.cascade-ripple::after {
  content: '';
  position: absolute;
  inset: -27% -14%;
  border: 1px solid var(--juice);
  border-radius: inherit;
  opacity: .75;
}
.reel-frame::after { content: ''; position: absolute; inset: 0; z-index: 2; background: linear-gradient(#001f3640,transparent 12%,transparent 88%,#001d3445); box-shadow: inset 0 5px 9px #00253350,inset 0 -4px 8px #00253344; pointer-events: none; }
.cell.winning { background: radial-gradient(#ffdc6840,#ffdd6508); box-shadow: inset 0 0 0 1px #ffe298b3; }
.cell.winning .symbol-art { animation: fruit-recognize .34s ease-out both; filter: drop-shadow(0 1px 4px #f3cf6a66); }
.cell.sun-trigger .symbol-art { animation: sun-recognize .42s ease-in-out both; }
.payline-layer polyline { stroke-width: 2; stroke-dasharray: 900; stroke-dashoffset: 0; animation: route-sweep .32s ease-out both; }
.payline-layer circle { r: 3; }
.fruit-game[data-motion]:not([data-motion=reels]) .spin-button svg { animation: none; }
.cabinet-message { position: relative; height: 52px; padding: 0 10px; }
.fruit-game[data-award=true] .cabinet-message { justify-content: flex-start; padding-right: 138px; }
.fruit-game[data-award=true] #status { text-align: left; font-size: 12px; }
.step-callout { left: auto; right: 14px; top: 50%; transform: translateY(-40%); text-align: right; text-shadow: none; color: #ffdfa0; transition: transform .18s ease-out,opacity .14s; }
.step-callout.visible { transform: translateY(-50%); }
.step-callout small { font-size: 9px; letter-spacing: .8px; background: transparent; padding: 0; }
.step-callout strong { display: block; font-size: 32px; line-height: 1; -webkit-text-stroke: 0; }
.fruit-game[data-reward=return] .step-callout { color: #e3e8cd; }
.fruit-game[data-reward=return] .step-callout strong { font-size: 27px; }
.fruit-game[data-reward=big] .step-callout strong { color: #ffde7a; }
.win-panel { border: 0; background: transparent; padding: 0; font: inherit; color: inherit; min-width: 0; }
.win-panel:enabled #win-caption { color: #ffe2a0; text-decoration: underline; text-underline-offset: 3px; }
.win-panel:enabled:hover > strong { color: #fff2b5; }
.line-detail { text-align: center; color: #ffe1a0; font-variant-numeric: tabular-nums; }
.line-picker button { width: 44px; height: 44px; }
.line-picker span { font-size: 20px; }
.stake-stepper button { min-width: 36px; min-height: 36px; }
.text-button { min-height: 36px; padding-inline: 4px; }
.fruit-game[data-free=true] .cabinet { box-shadow: inset 0 0 0 3px #743e23,inset 0 0 0 5px #dea554,0 8px 0 #3e271a,0 12px 0 #b97836,0 0 28px #ffd46d55; }
.fruit-game[data-free=true] .reels { background: radial-gradient(ellipse at 50% 20%,#23756a,#103b48); }
.bonus-banner { background: radial-gradient(ellipse at 50% 40%,#126765f5,#073b48f7); }
.bonus-sun { filter: drop-shadow(0 3px 10px #ffdb6b66); }
.bonus-banner > span { color: #dce7bd; }
.fruit-page .fruit-dialog { scrollbar-color: #a2a37a #103a41; }
.fruit-page ::selection { color: #143e3f; background: #ffdd8b; }
@keyframes fruit-recognize { 0% { transform: scale(1); } 45% { transform: scale(1.1); } 100% { transform: scale(1.025); } }
@keyframes sun-recognize { 45% { transform: scale(1.2); } 100% { transform: scale(1.06); } }
@keyframes route-sweep { from { stroke-dashoffset: 900; } to { stroke-dashoffset: 0; } }
@media (max-width:767px) {
  .fruit-game { min-height: 100svh; padding-bottom: 10px; }
  .island-nav { height: 54px; flex-shrink: 0; padding: 7px 12px; }
  .play-area { width: calc(100% - 16px); margin: auto 0; }
  .game-masthead { height: 94px; }
  .feature-ribbon { height: 36px; }
  .cabinet-crown { height: 34px; }
  .reels { height: min(calc((100vw - 46px) * .73),calc(100svh - 430px)); aspect-ratio: auto; min-height: 145px; max-height: 345px; }
  .reel-symbol .symbol-art,.cascade-piece .symbol-art { width: min(103cqw,103cqh); height: min(103cqw,103cqh); }
  .cabinet-message { height: 42px; }
  .fruit-game[data-award=true] .cabinet-message { padding-right: 105px; }
  .fruit-game[data-award=true] #status { font-size: 10px; }
  .step-callout { right: 8px; }
  .step-callout strong { font-size: 28px; }
  .step-callout small { font-size: 8px; }
  .fruit-game[data-reward=return] .step-callout strong { font-size: 25px; }
  .control-deck { height: 116px; margin-top: 14px; padding: 9px 12px 32px; column-gap: 8px; }
  .spin-cluster { margin-top: -22px; }
  .spin-button { width: 98px; height: 98px; }
  .spin-button span { font-size: 18px; }
  .stake-stepper { gap: 2px; margin: 1px 0; }
  .stake-stepper button { width: 32px; height: 36px; min-width: 32px; min-height: 36px; }
  .stake-stepper strong { font-size: 24px; }
  .control-label { font-size: 8px; letter-spacing: .6px; }
  .stake-panel small { font-size: 8px; }
  .win-panel > strong { font-size: 29px; padding-block: 3px; }
  .win-panel small { display: block; font-size: 8px; line-height: 1.3; }
  .secondary-controls { position: absolute; left: 10px; right: 10px; bottom: 1px; height: 36px; margin: 0; }
  .secondary-controls > div { gap: 14px; }
  .text-button { min-width: 44px; min-height: 36px; padding-inline: 4px; }
  .game-footnote { margin: 10px 6px 0; font-size: 8px; line-height: 1.35; }
  .fruit-game[data-free=true] #cascade-label { display: none; }
  .free-counter { white-space: nowrap; }
}
@media (max-width:767px) and (max-height:700px) {
  .island-nav { height: 44px; padding-block: 5px; }
  .game-masthead { height: 70px; }
  .feature-ribbon { height: 30px; }
  .cabinet-crown { height: 28px; }
  .reels { height: min(calc((100vw - 46px) * .73),calc(100svh - 335px)); min-height: 135px; }
  .cabinet-message { height: 36px; }
  .control-deck { height: 98px; margin-top: 12px; padding-top: 3px; padding-bottom: 30px; }
  .spin-button { width: 82px; height: 82px; }
  .spin-button svg { width: 27px; height: 27px; }
  .spin-button span { font-size: 16px; }
  .spin-cluster { margin-top: -19px; }
  .win-panel > strong { font-size: 27px; }
  .game-footnote { display: none; }
  .fruit-game { padding-bottom: 8px; }
}
@media (max-width:350px) {
  .control-deck { padding-inline: 8px; column-gap: 5px; }
  .control-label { font-size: 7px; }
  .stake-stepper strong { font-size: 22px; }
  .stake-stepper button { min-width: 28px; width: 28px; }
  .win-panel small { font-size: 7px; }
  .secondary-controls > div { gap: 8px; }
  .fruit-game[data-award=true] .cabinet-message { padding-right: 92px; }
  .step-callout strong { font-size: 25px; }
}
@media (orientation:landscape) and (max-height:560px) and (min-width:600px) {
  .fruit-game { min-height: 100svh; padding-bottom: 8px; }
  .island-nav { height: 38px; padding-block: 3px; }
  .play-area { width: min(590px,calc(100% - 190px)); margin: auto 0; }
  .game-masthead { height: 35px; }
  .game-logo { position: absolute; bottom: 2px; width: auto; max-width: calc(100vw - 380px); height: 62px; }
  .feature-ribbon { top: 42px; }
  .cabinet-crown { height: 26px; }
  .reels { height: calc(100svh - 225px); min-height: 110px; max-height: 245px; }
  .cabinet-message { height: 30px; }
  .control-deck { height: 62px; margin-top: 10px; padding: 3px 14px; }
  .spin-button { width: 73px; height: 73px; }
  .spin-button svg { width: 24px; height: 24px; }
  .spin-button span { font-size: 15px; }
  .spin-cluster { margin-top: -14px; }
  .stake-panel small { display: none; }
  .stake-stepper button { min-width: 32px; width: 32px; min-height: 32px; height: 32px; }
  .stake-stepper strong { font-size: 24px; }
  .win-panel > strong { font-size: 27px; }
  .secondary-controls { position: absolute; top: -183px; left: auto; right: -85px; bottom: auto; width: 72px; height: auto; display: flex; flex-direction: column; gap: 7px; }
  .secondary-controls > div { display: flex; flex-direction: column; gap: 7px; }
  .secondary-controls .text-button { min-width: 66px; min-height: 38px; border: 1px solid #adc18955; border-radius: 7px; background: #124646df; }
  .game-footnote { display: none; }
  .step-callout strong { font-size: 23px; }
  .step-callout small { font-size: 7px; }
}
@media (prefers-reduced-motion:reduce) {
  .cell.winning .symbol-art,.cell.sun-trigger .symbol-art,.payline-layer polyline { animation: none; }
  .step-callout { transition: opacity .1s; }
}
@media (min-width:768px) and (min-height:851px) {
  .reels { height: clamp(180px,calc(100svh - 574px),440px); }
}

/* Visible badges stay compact inside full-size, transparent touch targets. */
.feature-ribbon { --feature-sun: 23px; --feature-line: 33px; --feature-spin: 22px; --feature-number: 23px; --feature-height: 32px; --feature-padding: 9px; --feature-line-gap: 7px; --feature-bonus-gap: 6px; --feature-arrow: 12px; --feature-award-gap: 4px; height: 36px; margin-bottom: 0; align-items: flex-end; gap: 14px; }
.feature-ribbon > button { display: flex; position: relative; align-items: flex-end; justify-content: center; width: auto; height: auto; min-width: 44px; min-height: 44px; margin: 0; padding: 0; gap: 0; border: 0; border-radius: 6px; background: transparent; box-shadow: none; transform: none; flex-wrap: nowrap; }
.feature-ribbon .feature-badge { display: inline-flex; align-items: center; justify-content: center; width: auto; max-width: none; height: var(--feature-height); padding: 2px var(--feature-padding); border: 1px solid; color: var(--sand); font: inherit; letter-spacing: normal; text-align: center; box-shadow: 0 2px 4px #163b3c55; pointer-events: none; }
.line-plaque .feature-badge { gap: var(--feature-line-gap); border-color: #b9c66794; border-radius: 6px 6px 0 0; background: #153e31; }
.line-plaque strong { font-size: var(--feature-number); }
.line-plaque .payline-icon { display: block; width: var(--feature-line); height: auto; flex-shrink: 0; filter: drop-shadow(0 1px 1px #001f1e55); }
.sun-feature .feature-badge { flex-direction: row; gap: var(--feature-bonus-gap); border-color: #c8bd6a88; border-radius: 18px; background: #234e39ed; }
.sun-feature .sun-trio { display: flex; flex-direction: row; align-items: center; gap: .7px; }
.sun-feature .sun-trio > .mini-symbol { width: var(--feature-sun); height: var(--feature-sun); filter: drop-shadow(0 1px 1px #1c2e2077); }
.sun-feature .feature-arrow { display: block; width: var(--feature-arrow); height: var(--feature-arrow); flex-shrink: 0; fill: none; stroke: #e5d48b; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sun-feature .free-spin-award { display: flex; flex-direction: row; align-items: center; gap: var(--feature-award-gap); }
.free-spin-award strong { font: 700 var(--feature-number)/1 var(--display-font); color: #ffe17c; }
.free-spin-award .free-spin-icon { display: block; width: var(--feature-spin); height: var(--feature-spin); overflow: visible; }
.free-spin-orbit { fill: none; stroke: #e6f5cd; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.free-spin-star { fill: #ffe17c; stroke: #fff1b6; stroke-width: .6; }
.feature-ribbon .line-plaque:hover,.feature-ribbon .sun-feature:enabled:hover { background: transparent; border-color: transparent; }
.line-plaque:hover .feature-badge { background: #1f5a40; }
.sun-feature:enabled:hover .feature-badge { background: #2b6242; border-color: #e5d48bc9; }
.sun-feature:focus-visible,.line-plaque:focus-visible { outline-offset: 2px; }
@media (max-width:767px) {
  .feature-ribbon { --feature-sun: 18px; --feature-line: 26px; --feature-spin: 18px; --feature-number: 19.5px; --feature-height: 26px; --feature-padding: 6.5px; --feature-line-gap: 5px; --feature-bonus-gap: 4.5px; --feature-arrow: 9.5px; --feature-award-gap: 2.2px; height: 30px; padding-inline: 10px; gap: 8px; }
}
@media (max-width:767px) and (max-height:700px) {
  .feature-ribbon { --feature-sun: 16.5px; --feature-line: 24.5px; --feature-spin: 16.5px; --feature-number: 18px; --feature-height: 24px; --feature-padding: 6px; --feature-line-gap: 4.5px; --feature-bonus-gap: 3.5px; --feature-arrow: 8px; height: 28px; padding-inline: 8px; }
}
@media (orientation:landscape) and (max-height:560px) and (min-width:600px) {
  .feature-ribbon { --feature-sun: 14.5px; --feature-line: 24.5px; --feature-spin: 18px; --feature-number: 18.5px; --feature-height: 28px; --feature-padding: 4px; --feature-line-gap: 3px; --feature-bonus-gap: 2px; --feature-arrow: 8.5px; --feature-award-gap: 3px; display: flex; flex-direction: column; align-items: center; left: -75px; top: 39px; width: 56px; height: auto; padding: 0; gap: 6px; }
  .feature-ribbon > button { width: 56px; align-items: center; }
  .line-plaque .feature-badge { width: 56px; border-radius: 6px; }
  .sun-feature .feature-badge { flex-direction: column; width: 56px; height: 56px; padding: 4px 3px; border-radius: 9px; }
  .sun-feature .feature-arrow { transform: rotate(90deg); }
}

/* Quick controls expose a clear fast state and a small, non-modal count menu. */
.fruit-page { --auto-menu-surface: #0e3732; --auto-menu-edge: #d7bf76; }
.secondary-controls #fast,.secondary-controls #auto { min-height: 40px; padding: 4px 8px; gap: 5px; white-space: nowrap; }
.secondary-controls #fast[aria-pressed=true] svg { fill: currentColor; }
.secondary-controls #auto { border: 1px solid transparent; border-radius: 9px; }
.secondary-controls #auto[aria-pressed=true] { color: #ffe17c; border-color: #e8d58aa6; background: #194b36; }
.secondary-controls #auto[aria-expanded=true] { color: #ffe17c; border-color: var(--auto-menu-edge); border-top-color: transparent; border-radius: 0 0 9px 9px; background: var(--auto-menu-surface); }
.secondary-controls #auto[aria-expanded=true][data-menu-placement=below] { border-top-color: var(--auto-menu-edge); border-bottom-color: transparent; border-radius: 9px 9px 0 0; }
.secondary-controls #auto[aria-pressed=true] svg { display: none; }
.fruit-page .auto-menu { position: fixed; z-index: 120; display: grid; width: 72px; max-height: calc(100svh - 20px); overflow: auto; margin: 0; padding: 3px; gap: 0; border: 1px solid var(--auto-menu-edge); border-bottom: 0; border-radius: 9px 9px 0 0; background: var(--auto-menu-surface); color: #fff1c2; box-shadow: 0 -6px 20px #00252260; }
.fruit-page .auto-menu[data-placement=below] { border-top: 0; border-bottom: 1px solid var(--auto-menu-edge); border-radius: 0 0 9px 9px; }
.auto-menu button { display: grid; place-items: center; min-height: 32px; padding: 4px; border: 0; border-radius: 5px; background: transparent; color: inherit; font: 400 17px/1.2 var(--body-font); font-variant-numeric: tabular-nums; }
.auto-menu button:hover,.auto-menu button:focus-visible { outline: none; color: #173e2d; background: #ffe17c; }
@media (max-width:767px) {
  .secondary-controls { height: 40px; bottom: 0; }
  .secondary-controls > div { gap: 6px; }
}
@media (orientation:landscape) and (max-height:560px) and (min-width:600px) {
  .secondary-controls #fast,.secondary-controls #auto { min-width: 66px; padding-inline: 5px; }
}