/* Portrait overlays share the fluid 1000 × 1800 cabinet coordinate system. */
#goalPlayfield,#bigWinDisplay{position:absolute;inset:0}
/* Native dialogs enter the browser top layer, so these use actual screen units. */
html[data-layout="portrait"] .game-dialog{position:fixed;inset:0;width:min(94vw,540px);max-width:none;max-height:calc(100dvh - 24px);height:fit-content;padding:0;margin:auto;overflow:visible;container-type:normal}
html[data-layout="portrait"] .game-dialog::backdrop{background:#010914dc;backdrop-filter:blur(5px)}
html[data-layout="portrait"] .dialog-frame{display:flex;flex-direction:column;max-height:calc(100dvh - 24px);border:3px solid #efbf42;border-radius:19px;background:radial-gradient(ellipse at 50% 0,#145c97,#061b39 62%,#031127);box-shadow:inset 0 0 0 4px #3c6589,0 10px 45px #000b;overflow:hidden}
html[data-layout="portrait"] .dialog-frame::before{inset:6px;border:1px solid #eed48475;border-radius:12px;z-index:2}
html[data-layout="portrait"] .dialog-frame header{flex:none;min-height:76px;padding:15px 13px 15px 19px;border-bottom:1px solid #cca230}
html[data-layout="portrait"] .dialog-frame h2{max-width:calc(100% - 52px);font-size:clamp(20px,5.8vw,29px);line-height:1.1;letter-spacing:.035em}
html[data-layout="portrait"] .dialog-frame header button{display:grid;place-items:center;flex:none;width:44px;min-width:44px;height:44px;min-height:44px;padding:0;border:2px solid #ffdc69;border-radius:50%;font-size:29px;line-height:1;background:linear-gradient(#c83136,#711522);box-shadow:inset 0 0 0 3px #681022}
html[data-layout="portrait"] .dialog-tabs{flex:none;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;padding:12px 14px}
html[data-layout="portrait"] .dialog-tabs button{min-width:0;min-height:48px;padding:10px 4px;border:1px solid #dfb63a;border-radius:8px;font-size:clamp(10px,2.9vw,14px);line-height:1.1}
html[data-layout="portrait"] .dialog-pages{min-height:0;max-height:none;overflow:auto;overscroll-behavior:contain;padding:0 19px 24px;scrollbar-width:thin;scrollbar-color:#cb9d32 #051932}
html[data-layout="portrait"] .dialog-pages h3{font-size:22px;line-height:1.2;margin:18px 0 10px}
html[data-layout="portrait"] .dialog-pages p{font-size:14px;line-height:1.5;margin:8px 0 20px}
html[data-layout="portrait"] .paytable-grid{grid-template-columns:1fr;gap:10px}
html[data-layout="portrait"] .paytable-entry{grid-template-columns:74px minmax(0,1fr);gap:9px;min-height:92px;padding:10px;border:1px solid #c8a95370;border-radius:10px}
html[data-layout="portrait"] .paytable-entry img{width:70px;height:70px}
html[data-layout="portrait"] .paytable-entry b{font-size:15px;line-height:1.3}
html[data-layout="portrait"] .paytable-entry span{font-size:13px;line-height:1.65}
html[data-layout="portrait"] .setting-row{min-height:64px;padding:14px 5px;font-size:17px;line-height:1.2;gap:15px}
html[data-layout="portrait"] .setting-row input{flex:none;width:30px;height:30px;min-width:30px;min-height:30px;accent-color:#ffd238}
html[data-layout="portrait"] .compact-dialog{width:min(94vw,440px)}
html[data-layout="portrait"] .auto-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;padding:23px}
html[data-layout="portrait"] .auto-options button{min-height:64px;padding:14px 8px;border:2px solid #e0b23a;border-radius:12px;font-size:27px;line-height:1;background:linear-gradient(#126caf,#063362);box-shadow:inset 0 0 0 3px #03264c}
html[data-layout="portrait"] .game-dialog button:focus-visible,html[data-layout="portrait"] .game-dialog input:focus-visible{outline:3px solid #fff29b;outline-offset:3px}
/* Developer controls remain inside the cabinet, with at least44px tap targets at320. */
html[data-layout="portrait"] .dev-drawer{left:1.5cqw;right:auto;top:164cqw;width:14cqw;font-size:3.7cqw}
html[data-layout="portrait"] .dev-toggle{right:auto;left:0;top:0;width:14cqw;min-width:44px;height:14cqw;min-height:44px;border:.3cqw solid #f2ce66;border-radius:2.5cqw;font-size:6cqw;display:grid;place-items:center;padding:0;background:#031931e8}
html[data-layout="portrait"] .dev-drawer.open{left:4cqw;top:5cqw;width:92cqw;height:170cqw}
html[data-layout="portrait"] .dev-drawer.open .dev-toggle{left:auto;right:0;z-index:3}
html[data-layout="portrait"] .dev-panel{margin-top:0;width:100%;height:100%;max-height:170cqw;overflow:auto;overscroll-behavior:contain;padding:7cqw 5cqw;border:.4cqw solid #ebc255;border-radius:3cqw;background:linear-gradient(#093869,#01112a);box-shadow:0 2cqw 8cqw #000c;scrollbar-width:thin}
html[data-layout="portrait"] .dev-panel h2{margin:0 15cqw 7cqw 0;font-size:5cqw;line-height:1.25}
html[data-layout="portrait"] .dev-panel label{display:grid;grid-template-columns:1fr;gap:2cqw;margin:5cqw 0;font-size:4cqw;line-height:1.3}
html[data-layout="portrait"] .dev-panel select{width:100%;min-height:14cqw;min-width:0;padding:3cqw;border:.3cqw solid #bd993e;border-radius:1.5cqw;font-size:4cqw;background:#03172e}
html[data-layout="portrait"] .dev-actions{gap:3cqw;margin-top:5cqw}
html[data-layout="portrait"] .dev-panel button{min-height:14cqw;padding:3cqw;border:.3cqw solid #d0aa45;border-radius:1.5cqw;font-size:4cqw}
html[data-layout="portrait"] .dev-panel pre{max-height:38cqw;margin:5cqw 0 0;padding:3cqw;font-size:3.1cqw;line-height:1.45;overflow-wrap:anywhere}
html[data-layout="portrait"] .loading-screen{gap:5cqw;background:radial-gradient(ellipse at 50% 44%,#0d5486,#021028 73%)}
html[data-layout="portrait"] .loading-ball{width:20cqw;height:20cqw;font-size:0;color:transparent;background:url('../assets/art/bonus/shot-football.png') center/contain no-repeat}
html[data-layout="portrait"] .loading-screen strong{font-size:8cqw;letter-spacing:.03em;text-align:center}
html[data-layout="portrait"] .loading-track{width:72%;height:1.8cqw;min-height:5px;border:.2cqw solid #efd26d;border-radius:2cqw}
html[data-layout="portrait"] .loading-screen span{max-width:82%;font-size:4cqw;line-height:1.3;text-align:center}
/* Matched natural-aspect illustrated meters, with content inside the blue inset. */
html[data-layout="portrait"] .free-hud-left{left:13cqw;top:87.5cqw;width:74cqw;height:17.8621cqw;padding:5.6cqw 8.2cqw 3.1cqw;gap:4cqw;background-size:contain}
html[data-layout="portrait"] .free-hud-right{left:25cqw;right:auto;top:106.2cqw;width:50cqw;height:17.0719cqw;padding:5.3cqw 6cqw 3.1cqw;background-size:contain}
html[data-layout="portrait"] .free-hud-panel span{min-width:0;gap:.35cqw;line-height:1}
html[data-layout="portrait"] .free-hud b{max-width:100%;font-size:4.8cqw;line-height:1;white-space:nowrap}
html[data-layout="portrait"] .free-hud small{font-size:3cqw;line-height:1.1;letter-spacing:0;white-space:nowrap}
html[data-layout="portrait"] .free-hud-right b{font-size:4.6cqw}
/* Goal physics retain their original ratio and percentage coordinates. */
html[data-layout="portrait"] .goal-scene{background:#001b34 url('../assets/art/portrait/goal-stadium-v1.webp') center/cover no-repeat}
html[data-layout="portrait"] #goalPlayfield{inset:auto;left:0;top:55cqw;width:100%;height:56.3136cqw;container-type:inline-size;overflow:visible}
html[data-layout="portrait"] #goalPlayfield .goal-background{object-fit:contain;mask-image:linear-gradient(transparent,#000 11%,#000 88%,transparent)}
html[data-layout="portrait"] .goal-scene::before{content:"CHOOSE WHERE TO SHOOT";position:absolute;z-index:5;left:8cqw;top:48cqw;width:84cqw;color:#fff1b5;font-size:4cqw;font-weight:900;line-height:1.3;letter-spacing:.025em;text-align:center;text-shadow:0 .4cqw .5cqw #000;pointer-events:none}
html[data-layout="portrait"] .goal-scoreboard{left:7cqw;top:24cqw;width:86cqw;height:21cqw;grid-template-columns:1fr 1.8fr 1fr;padding:2.5cqw 3cqw;border:.5cqw solid #ecc33b;border-radius:2.4cqw;box-shadow:inset 0 0 5cqw #087fd588,0 1cqw 3cqw #0009}
html[data-layout="portrait"] .goal-scoreboard span:not(.goal-title){gap:1cqw}
html[data-layout="portrait"] .goal-scoreboard b{font-size:7cqw;line-height:1}
html[data-layout="portrait"] .goal-scoreboard small{font-size:3cqw;line-height:1.1;letter-spacing:0}
html[data-layout="portrait"] .goal-title{height:90%}
html[data-layout="portrait"] .goal-targets button{touch-action:manipulation;cursor:pointer}
html[data-layout="portrait"] .goal-targets button::before{border-width:.55cqw}
html[data-layout="portrait"] .shot-result{left:4cqw;top:119cqw;width:92cqw;filter:drop-shadow(0 1.5cqw 1.4cqw #0009)}
/* Wheels and award media remain circular or preserve their source aspect. */
html[data-layout="portrait"] .var-wheel-rig{width:90cqw;top:50%;}
html[data-layout="portrait"] .var-wheel-hub{font-size:6cqw;letter-spacing:.02em}
html[data-layout="portrait"] .var-wheel-summary{left:3%;bottom:-15%;width:94%;min-height:14%;padding:2cqw 3cqw;font-size:3.6cqw;line-height:1.25;letter-spacing:0;border:.35cqw solid #f4c83d;border-radius:3cqw}
html[data-layout="portrait"] .var-wheel-overlay.is-entering .var-wheel-rig{animation-name:portrait-var-wheel-drop}
html[data-layout="portrait"] .var-wheel-overlay.is-exiting .var-wheel-rig{animation-name:portrait-var-wheel-lift}
html[data-layout="portrait"] .var-award-canvas{width:96cqw;height:85.3333cqw;top:50%;filter:drop-shadow(0 1.5cqw 2cqw #0009)}
html[data-layout="portrait"] .var-prize-popup-art,html[data-layout="portrait"] .var-prize-popup-content{left:0;top:calc(50% - 20.8333cqw);width:100cqw;height:41.6667cqw}
html[data-layout="portrait"] .var-prize-popup-summary{left:8%;top:110%;width:84%;height:auto;min-height:13cqw;padding:2.5cqw 3cqw;border:.3cqw solid #dfba45;border-radius:2cqw;font-size:3.6cqw;line-height:1.25;letter-spacing:0;background:linear-gradient(#104775,#011a3a);box-shadow:0 1cqw 3cqw #0007}
@keyframes portrait-var-wheel-drop{from{opacity:0;transform:translate3d(-50%,-230%,0) scale(.9)}72%{opacity:1;transform:translate3d(-50%,-47%,0) scale(1.015)}to{opacity:1;transform:translate3d(-50%,-50%,0) scale(1)}}
@keyframes portrait-var-wheel-lift{from{opacity:1;transform:translate3d(-50%,-50%,0)}to{opacity:0;transform:translate3d(-50%,-230%,0)}}
/* The dedicated portrait doors retain complete medallions and a matched center seam. */
html[data-layout="portrait"] .gate img{content:url('../assets/art/portrait/stadium-doors-v1.webp');width:calc(200% - 2px);height:100%;object-fit:fill;object-position:center}
/* Every illustrated popup gets its original16:9 content rectangle, independent of phone height. */
html[data-layout="portrait"] .feature-popup,html[data-layout="portrait"] .feature-popup.is-goal-shootout,html[data-layout="portrait"] .feature-popup.is-bonus-total{inset:auto;left:0;top:calc(50% - 28.13995cqw);width:100%;height:56.2799cqw}
html[data-layout="portrait"] .feature-copy h2{font-size:6.5cqw;line-height:1.08;letter-spacing:0}
html[data-layout="portrait"] .feature-copy p{font-size:3.8cqw;line-height:1.25;letter-spacing:0}
html[data-layout="portrait"] .feature-popup.is-goal-shootout .feature-copy{left:20%;top:52%;width:60%;height:31%}
html[data-layout="portrait"] .feature-popup.is-goal-shootout .feature-copy h2{flex:0 0 38%;font-size:0;line-height:0}
html[data-layout="portrait"] .feature-popup.is-goal-shootout .feature-goal-stats{flex:0 0 58%;width:96%;gap:4%;margin-top:1%;transform:none}
html[data-layout="portrait"] .feature-goal-stat{padding:.8cqw 1cqw;border:.25cqw solid #dfb23f}
html[data-layout="portrait"] .feature-goal-stat strong{font-size:4.7cqw;line-height:1}
html[data-layout="portrait"] .feature-goal-stat small{font-size:3cqw;line-height:1;letter-spacing:0}
html[data-layout="portrait"] .feature-popup.is-bonus-total .feature-copy{left:18%;top:34%;width:64%;height:31%;gap:2cqw}
html[data-layout="portrait"] .feature-popup.is-bonus-total .feature-copy h2{font-size:5cqw;line-height:1.1;letter-spacing:.04em}
html[data-layout="portrait"] .feature-popup.is-bonus-total .feature-copy p{max-width:100%;margin:0;font-size:7.4cqw;line-height:1;letter-spacing:0;white-space:nowrap}
html[data-layout="portrait"] .free-spins-award{inset:auto;left:0;top:calc(50% - 28.13995cqw);width:100%;height:56.2799cqw}
html[data-layout="portrait"] .free-spins-award-values strong{font-size:7.3cqw;line-height:1}
html[data-layout="portrait"] .free-spins-award-values small{margin-top:1cqw;font-size:2.9cqw;line-height:1.05;letter-spacing:0}
/* Artwork/video registration stays16:9; particles and flashes occupy the entire viewport. */
html[data-layout="portrait"] .big-win{background:radial-gradient(ellipse at 50% 48%,#163d67,#020a13 73%);animation:portrait-big-win-in .45s ease-out both}
html[data-layout="portrait"] #bigWinDisplay{inset:auto;left:0;top:calc(50% - 28.13995cqw);width:100%;height:56.2799cqw}
html[data-layout="portrait"] .big-win-art{object-fit:contain;mask-image:linear-gradient(transparent,#000 18%,#000 82%,transparent)}
html[data-layout="portrait"] .big-win-rays{width:245cqw;aspect-ratio:1;background:repeating-conic-gradient(from 0deg,transparent 0deg,rgba(255,218,113,.18) 3deg,rgba(255,218,113,.18) 4deg,transparent 7deg 12deg);mask-image:radial-gradient(circle closest-side,#000 6%,#0009 25%,#0003 48%,transparent 82%);filter:blur(.65cqw)}
html[data-layout="portrait"] .big-win-copy output{font-size:7cqw;letter-spacing:0;text-shadow:0 .12em #06172b,0 0 .3em #ffd437}
html[data-layout="portrait"] .big-win-copy h2{filter:drop-shadow(0 .35cqw .2cqw #0009) drop-shadow(0 0 1.2cqw #ffd73777)}
@keyframes portrait-big-win-in{from{opacity:0}to{opacity:1}}

html[data-layout="portrait"] #freeTotalValue{font-size:min(4.6cqw,calc(58cqw / var(--portrait-counter-chars,1)))}
html[data-layout="portrait"] .feature-popup.is-bonus-total #featureBody{font-size:min(7.4cqw,calc(94cqw / var(--portrait-counter-chars,1)))}
html[data-layout="portrait"] #bigWinAmount{font-size:min(7cqw,calc(80cqw / var(--portrait-counter-chars,1)))}