/* Art coordinates use a 1000 × 1800 cabinet; cqw keeps every circle circular. */
.portrait-only { display:none; }
html[data-layout="portrait"] .portrait-only { display:block; }
html[data-layout="portrait"] .game-stage {
  width:min(100%,calc((100dvh - var(--safe-block,0px)) * 5 / 9));
  height:min(100%,calc((100vw - var(--safe-inline,0px)) * 9 / 5));
  aspect-ratio:5/9; background:#02070d; overflow:hidden;
}
html[data-layout="portrait"] .scene,
html[data-layout="portrait"] .ambient-video-loop,
html[data-layout="portrait"] #ambient-canvas,
html[data-layout="portrait"] .logo-shine,
html[data-layout="portrait"] .stage-vignette,
html[data-layout="portrait"] .payline-markers,
html[data-layout="portrait"] .portrait-notice { display:none!important; }
.portrait-cabinet { position:absolute; inset:0; z-index:0; pointer-events:none; }
.portrait-cabinet img { position:absolute; inset:0; width:100%; height:100%; object-fit:fill; }
.portrait-cabinet-free { opacity:0; transition:opacity .65s ease; }
.is-bonus .portrait-cabinet-free { opacity:1; }
#portrait-atmosphere { position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; }
html[data-layout="portrait"] .reel-area {
  left:11.5%; top:17.38%; width:77%; height:27.79%; border-radius:2.5cqw;
  --symbol-optical-x:2%; --symbol-presentation-scale:1.05;
  --symbol-presentation-y:.22cqw; --symbol-presentation-adjust-y:0cqw;
  background:linear-gradient(#01030859,#01030815 50%,#01030866);
}
html[data-layout="portrait"] [data-symbol="fly"] { --symbol-presentation-adjust-y:-.37cqw; }
.portrait-reel-grid { position:absolute; inset:0; z-index:5; pointer-events:none; overflow:hidden; }
.portrait-reel-divider { position:absolute; background:#bc8a424f; }
html[data-layout="portrait"] .multiplier-panel { left:14.4%; top:68.25%; width:71.2%; height:5.05%; filter:none; }
html[data-layout="portrait"] .multiplier-panel > img { display:none; }
html[data-layout="portrait"] .multiplier-content { inset:0; width:100%; height:100%; }
html[data-layout="portrait"] .multiplier-track { display:flex; flex-direction:row-reverse; gap:1%; }
html[data-layout="portrait"] .multiplier-rung {
  flex:1 1 0; min-width:0; margin:.75cqw 0; border-radius:7%; background:url('../assets/ui/mobile/portrait-plaque.webp') center / 100% 100% no-repeat;
}
html[data-layout="portrait"] .multiplier-rung.is-current { margin:.75cqw 0; background:url('../assets/ui/mobile/portrait-plaque.webp') center / 100% 100% no-repeat; filter:brightness(1.38) saturate(1.4); box-shadow:0 0 2cqw #ffae234d; }
html[data-layout="portrait"] .multiplier-glyphs { height:51%; max-width:90%; }
html[data-layout="portrait"] .multiplier-rung.is-long .multiplier-glyphs { height:30%; }
html[data-layout="portrait"] .multiplier-rung.is-very-long .multiplier-glyphs { height:21%; }
html[data-layout="portrait"] .multiplier-track.is-window-shift { animation:portrait-multiplier-shift .62s ease; }
@keyframes portrait-multiplier-shift { from { opacity:.35; translate:8% 0; } to { opacity:1; translate:0 0; } }
.portrait-multiplier-label { position:absolute; z-index:6; left:20%; top:66.1%; width:60%; color:#ffe1a0; text-align:center; font:700 2.5cqw/1.1 Georgia,serif; letter-spacing:.1em; text-shadow:0 1px 3px #000,0 0 1cqw #000; }
html[data-layout="portrait"] .meter-overlay { top:47.1%; width:37%; height:4.3%; flex-direction:column; align-items:center; justify-content:center; gap:.25cqw; }
html[data-layout="portrait"] .balance-overlay { left:10.1%; }
html[data-layout="portrait"] .win-overlay { left:53.1%; }
html[data-layout="portrait"] .portrait-meter-label, .portrait-bet-label { color:#f6d78e; font:700 2.35cqw/1.15 Georgia,serif; text-align:center; letter-spacing:.065em; text-shadow:0 1px 2px #000; }
html[data-layout="portrait"] .meter-overlay output { display:block; width:94%; text-align:center; font-size:4.5cqw; line-height:1.06; letter-spacing:0; font-variant-numeric:tabular-nums; }
.portrait-bet-label { position:absolute; left:40%; top:78.95%; width:20%; font-size:2.25cqw; line-height:1.1; }
html[data-layout="portrait"] .bet-value { left:40%; top:80.3%; width:20%; height:2%; display:grid; place-items:center; font-size:3.35cqw; line-height:1; letter-spacing:0; font-variant-numeric:tabular-nums; }
html[data-layout="portrait"] .menu-hotspot { left:12.5%; top:85.12%; width:18%; height:10%; }
html[data-layout="portrait"] .auto-hotspot { left:69.65%; top:85.12%; width:18%; height:10%; }
html[data-layout="portrait"] .spin-hotspot { left:35.55%; top:82.3%; width:28.9%; height:16.06%; }
html[data-layout="portrait"] .control-button-art { left:50%; top:50%; width:100%; height:100%; }
html[data-layout="portrait"] .spin-hotspot small { left:50%; top:50%; font-size:4.5cqw; }
html[data-layout="portrait"] .bet-down-hotspot { left:27%; top:78.12%; width:9%; height:5%; min-width:32px; min-height:32px; }
html[data-layout="portrait"] .bet-up-hotspot { left:64%; top:78.12%; width:9%; height:5%; min-width:32px; min-height:32px; }
html[data-layout="portrait"] .max-hotspot { left:75.6%; top:78.15%; width:17.8%; height:5.15%; border-radius:1.7cqw; }
html[data-layout="portrait"] .hotspot::after { inset:4%; box-shadow:inset 0 0 1.4cqw #ffeeba,0 0 1.5cqw #ffd359; }
html[data-layout="portrait"] .hotspot:focus-visible { outline:2px solid #cefbff; outline-offset:2px; }
html[data-layout="portrait"] .portrait-turbo { left:calc(6.45% + 1.5px); top:78.55%; width:calc(18.4% - 3px); height:4.45%; border-radius:1.4cqw; display:flex; align-items:center; justify-content:center; gap:1.25cqw; padding:0 1cqw; color:#efd17c; }
.portrait-turbo svg { width:3.5cqw; height:5cqw; fill:#ffda62; filter:drop-shadow(0 0 .8cqw #ec872a); }
.portrait-turbo > span { font:700 2.4cqw/1.18 Georgia,serif; text-align:center; letter-spacing:.035em; }
.portrait-turbo strong { display:block; color:#fff2cb; font:700 3cqw/1.15 Georgia,serif; }
.portrait-turbo[aria-pressed="true"] { background:radial-gradient(ellipse,#e78e254d,transparent 75%); }
.portrait-turbo[aria-pressed="true"] svg { fill:#fff9b5; filter:drop-shadow(0 0 1cqw #ffa514); }
.portrait-turbo.is-switching { animation:portrait-turbo-pulse .55s ease-out; }
html[data-layout="portrait"] .free-hud { left:13%; top:55.1%; width:74%; height:8.8%; display:flex; flex-direction:row; gap:10%; filter:none; }
html[data-layout="portrait"] .free-hud[hidden] { display:none; }
html[data-layout="portrait"] .free-hud-art { display:none; }
html[data-layout="portrait"] .free-hud-readout:nth-of-type(n) { position:relative; inset:auto; flex:1 1 0; width:45%; height:100%; gap:0; padding:0; background:url('../assets/ui/mobile/portrait-plaque.webp') center / 100% 100% no-repeat; }
html[data-layout="portrait"] .free-hud-readout span { position:absolute; left:9%; top:26%; width:82%; height:17%; display:grid; place-items:center; font-size:2.25cqw; line-height:1; letter-spacing:.065em; }
html[data-layout="portrait"] .free-hud-readout strong { position:absolute; left:9%; top:45%; width:82%; height:27%; display:grid; place-items:center; font-size:4cqw; line-height:1; translate:0; letter-spacing:0; }
html[data-layout="portrait"] .free-hud-readout:nth-of-type(2) strong { font-size:4cqw; }
@media(prefers-reduced-motion:reduce) { .portrait-cabinet-free { transition:none; } .portrait-turbo.is-switching { animation:none; } }
/* Generous touch targets retain the illustrated button's exact visual centre. */
html[data-layout="portrait"] .bet-down-hotspot,
html[data-layout="portrait"] .bet-up-hotspot { top:80.65%; width:10.4%; height:5.78%; min-width:44px; min-height:44px; translate:-50% -50%; }
html[data-layout="portrait"] .bet-down-hotspot { left:31.5%; }
html[data-layout="portrait"] .bet-up-hotspot { left:68.5%; }
html[data-layout="portrait"] .portrait-turbo { top:80.775%; min-height:44px; translate:0 -50%; }
html[data-layout="portrait"] .max-hotspot { top:80.725%; min-height:44px; translate:0 -50%; }
/* Glow follows the painted face, independently of the larger invisible touch target. */
html[data-layout="portrait"] .bet-down-hotspot::after,
html[data-layout="portrait"] .bet-up-hotspot::after { inset:auto; left:50%; top:50%; width:7.8cqw; height:7.8cqw; translate:-50% -50%; }
html[data-layout="portrait"] .portrait-turbo::after,
html[data-layout="portrait"] .max-hotspot::after { inset:auto 4%; top:50%; height:7.6cqw; translate:0 -50%; }
html[data-layout="portrait"] .portrait-turbo[aria-pressed="true"] { background-size:100% 7.6cqw; background-position:center; background-repeat:no-repeat; }
@keyframes portrait-turbo-pulse { 0%,35% { filter:brightness(1.9); } 100% { filter:none; } }

/* Max Bet highlights its painted chamfered frame, not the larger touch target. */
html[data-layout="portrait"] .max-hotspot::after {
  inset:auto; left:50%; top:50%; width:20cqw; height:11cqw; translate:-50% -50%;
  border:0; border-radius:0; box-shadow:none;
  background-image:url('../assets/ui/mobile/portrait-cabinet-base-v1.webp');
  background-repeat:no-repeat; background-size:100cqw 180cqw;
  background-position:-74.5cqw -139.805cqw;
  clip-path:polygon(7.5% 8.6%,92.5% 8.6%,99% 20%,99% 82%,92.5% 94%,7.5% 94%,.5% 82%,.5% 20%);
  filter:brightness(1.4) saturate(1.1); pointer-events:none;
}
html[data-layout="portrait"] .game-stage.is-bonus .max-hotspot::after { background-image:url('../assets/ui/mobile/portrait-cabinet-free-v1.webp'); }
html[data-layout="portrait"] .max-hotspot:focus-visible { outline:none; }
html[data-layout="portrait"] .max-hotspot:focus-visible::after { opacity:1; filter:brightness(1.65) saturate(1.16); }