/* Portrait feature overlays use the cabinet container; dialogs use real screen pixels. */
html[data-layout="portrait"] dialog{
  position:fixed;inset:0;margin:auto;width:min(520px,calc(100vw - 24px));max-width:none;
  max-height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 28px);
  overflow:auto;overscroll-behavior:contain;padding:18px;border:2px solid #f4cf79;border-radius:22px;
  background:radial-gradient(ellipse at 50% 0,#7d215b55,transparent 48%),linear-gradient(150deg,#310e30,#15081d 65%);
  color:#fff0f7;box-shadow:inset 0 0 0 3px #572747,inset 0 0 0 5px #ae713f55,0 15px 65px #000c;
  scrollbar-width:thin;scrollbar-color:#b57493 #200b25;container-type:normal;
}
html[data-layout="portrait"] dialog::backdrop{background:#09020dd9;backdrop-filter:blur(5px)}
html[data-layout="portrait"] .dialog-header{position:sticky;top:0;z-index:3;background:#2c0d2b;min-height:48px;gap:12px;padding:0 0 12px;border-bottom:1px solid #aa668266;color:#ffe0a2;font-size:24px;letter-spacing:1.4px;text-shadow:0 2px #581743}
html[data-layout="portrait"] .dialog-header>span{min-width:0;flex:1}
html[data-layout="portrait"] .dialog-header button,
html[data-layout="portrait"] .dev-panel header button{
  flex:none;width:44px;height:44px;min-width:44px;padding:0;display:grid;place-items:center;
  border:1px solid #ffdaa0;border-radius:50%;background:linear-gradient(#c13d91,#76184e);
  color:#fff9dc;font-family:Arial,Helvetica,sans-serif;font-size:30px;font-weight:500;line-height:1;
  box-shadow:inset 0 1px 3px #ffe5b888,0 3px 8px #05000888;letter-spacing:0;
}
html[data-layout="portrait"] dialog nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin:16px 0}
html[data-layout="portrait"] dialog nav button{min-width:0;min-height:44px;padding:8px 2px;font-size:10px;font-weight:800;letter-spacing:.25px;border-radius:9px;border-color:#915170;background:linear-gradient(#45153c,#28112e)}
html[data-layout="portrait"] dialog nav button.selected{background:linear-gradient(#a2347c,#6b204f);border-color:#fbd885;box-shadow:inset 0 1px #ffb6db88;color:#fff3bc}
html[data-layout="portrait"] dialog p{font-size:13px;line-height:1.55;margin:12px 0;color:#ebcedf}
html[data-layout="portrait"] dialog h2{font-size:17px;line-height:1.25;letter-spacing:.6px;margin:21px 0 10px}
html[data-layout="portrait"] .paytable{grid-template-columns:1fr;gap:8px}
html[data-layout="portrait"] .paytable article{gap:12px;padding:10px;border-color:#784263;background:#18091fe0;border-radius:12px;min-width:0}
html[data-layout="portrait"] .paytable canvas{width:62px;height:62px;flex:none}
html[data-layout="portrait"] .paytable article>div{min-width:0;flex:1}
html[data-layout="portrait"] .paytable strong{font-size:14px;margin-bottom:5px}
html[data-layout="portrait"] .paytable small{font-size:12px;line-height:1.55;white-space:pre-wrap}
html[data-layout="portrait"] .paylines{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;margin-top:16px}
html[data-layout="portrait"] dialog label{min-height:52px;padding:10px 2px;margin:0;border-bottom:1px solid #78426055;font-size:15px;gap:14px}
html[data-layout="portrait"] dialog input{width:26px;height:26px;margin:8px;flex:none;accent-color:#f344bd;cursor:pointer}
html[data-layout="portrait"] dialog .secondary{min-height:46px;width:100%;padding:12px 10px;margin-top:12px;border-radius:10px;font-size:12px}
html[data-layout="portrait"] .history-row{gap:12px;font-size:12px;line-height:1.4;padding:13px 0}
html[data-layout="portrait"] .history-row b{white-space:nowrap}
html[data-layout="portrait"] #autoDialog{width:min(430px,calc(100vw - 24px))}
html[data-layout="portrait"] .auto-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:22px 0 8px}
html[data-layout="portrait"] .auto-options button{min-height:66px;margin:0;padding:12px 8px;border:1px solid #ffdb87;border-radius:15px;font-size:28px;line-height:1;color:#fff6cf;background:linear-gradient(#bf388c,#6b194f);box-shadow:inset 0 1px 1px #ffe7bf99,0 4px 12px #09000a88;letter-spacing:0}
html[data-layout="portrait"] .auto-options button::after{content:'SPINS';display:block;margin-top:5px;color:#ffdeef;font-size:10px;letter-spacing:1.2px;font-weight:700}
/* The developer drawer is portaled out of the cabinet's scaled layout. */
html[data-layout="portrait"] .portrait-dev-backdrop{position:fixed;inset:0;z-index:80;border:0;background:#08010cbb;backdrop-filter:blur(4px);padding:0}
html[data-layout="portrait"] .dev-panel{
  position:fixed;inset:auto;top:50%;left:50%;transform:translate(-50%,-50%);z-index:81;
  width:min(440px,calc(100vw - 28px));max-height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 28px);
  overflow:auto;overscroll-behavior:contain;padding:18px;border:2px solid #eec478;border-radius:20px;
  background:linear-gradient(145deg,#37112f,#15091d 75%);box-shadow:inset 0 0 0 3px #72334f77,0 12px 60px #000b;font-size:14px;
}
html[data-layout="portrait"] .dev-panel header{font-size:14px;letter-spacing:1px;gap:8px;min-height:44px}
html[data-layout="portrait"] .dev-panel p{font-size:13px;line-height:1.5;margin:15px 0}
html[data-layout="portrait"] .dev-panel label{display:flex;align-items:stretch;flex-direction:column;gap:8px;font-size:11px;letter-spacing:1px}
html[data-layout="portrait"] .dev-panel select{width:100%;min-height:46px;padding:10px;font-size:15px;background:#39122f;border-color:#b4778d;border-radius:8px}
html[data-layout="portrait"] .dev-actions{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:9px;margin:17px 0 12px}
html[data-layout="portrait"] .dev-actions button{min-height:48px;padding:10px 7px;font-size:11px;line-height:1.2;border-radius:9px}
html[data-layout="portrait"] .dev-panel small{font-size:11px;line-height:1.5}
html[data-layout="portrait"] #devToggle.portrait-dev-toggle{position:fixed;left:max(7px,env(safe-area-inset-left,0px));bottom:max(7px,env(safe-area-inset-bottom,0px));z-index:79;min-width:44px;height:44px;padding:0 9px;border:1px solid #f7d47d;border-radius:11px;background:#2b0d2dec;color:#ffdfa0;font-size:10px;font-weight:900;line-height:1;letter-spacing:.5px;box-shadow:0 3px 12px #0008}
html[data-layout="portrait"] #devToggle.portrait-dev-toggle.active{background:#9b296e;color:#fff3ca;border-color:#ffe0a0}
/* Keep feature values in matching, generous plaques below the dancers. */
html[data-layout="portrait"] .pulse-side{top:69.2%;width:41%;height:7.7%;filter:drop-shadow(0 .7cqw 1.2cqw #08010ac9)}
html[data-layout="portrait"] .pulse-side-left{left:7%}
html[data-layout="portrait"] .pulse-side-right{right:7%}
html[data-layout="portrait"] .pulse-side::before{background-size:100% 158%;background-position:center}
html[data-layout="portrait"] .pulse-side .panel-content{inset:16% 10%;padding:0;gap:.75cqw;transform:none!important}
html[data-layout="portrait"] .pulse-panel-title{height:2.8cqw;width:100%}
html[data-layout="portrait"] .pulse-panel-title canvas{display:block;width:auto;max-width:100%;height:100%;object-fit:contain}
html[data-layout="portrait"] .pulse-side strong{width:100%;height:5.3cqw;font-size:5.3cqw;line-height:1}
html[data-layout="portrait"] .pulse-side strong canvas{display:block;width:auto;height:100%;max-width:100%;object-fit:contain}
html[data-layout="portrait"] .life-lights{width:100%;height:5.3cqw;gap:1.1cqw}
html[data-layout="portrait"] .life-lights img{width:calc((100% - 2.2cqw)/3);max-width:7.3cqw;filter:none}
html[data-layout="portrait"] .life-lights img:not(.lit){filter:grayscale(1) brightness(.45);opacity:.3}
html[data-layout="portrait"] .life-lights img.lit{filter:drop-shadow(0 0 .6cqw #ffc46499)}
html[data-layout="portrait"] .pulse-jackpot{left:32%;right:32%;top:58.3%;width:auto;height:6.6%;gap:.45cqw;border:.3cqw solid #e9c474;border-radius:2cqw;padding:.7cqw 2cqw;background:linear-gradient(#490e3cef,#16081ded);box-shadow:inset 0 0 2.2cqw #fa35b455,0 1cqw 2cqw #03000599}
html[data-layout="portrait"] .pulse-jackpot>span{height:2.1cqw;width:94%}
html[data-layout="portrait"] .pulse-jackpot>strong{height:4.1cqw;width:90%}
html[data-layout="portrait"] .pulse-jackpot small{font-size:1.6cqw;letter-spacing:.1cqw;line-height:1}
/* Original nightclub door art is cover-fitted as one image across both halves. */
html[data-layout="portrait"] .door{overflow:hidden;background:none}
html[data-layout="portrait"] .door::before{content:'';position:absolute;top:0;width:200%;height:100%;background:#1c061f url('../assets/art/transition-doors.png') center/cover no-repeat}
html[data-layout="portrait"] .door.left::before{left:0}
html[data-layout="portrait"] .door.right::before{right:0}
html[data-layout="portrait"] .door-seam-flash{left:calc(50% - 1px);width:2px;box-shadow:0 0 1.2cqw #fff,0 0 3cqw #ffe5a9,0 0 5cqw #ff48b888}
html[data-layout="portrait"] .door-impact-spark{width:.7cqw;height:1.3cqw}
/* The entire cabinet remains the lighting surface, regardless of plaque size. */
html[data-layout="portrait"] .feature-entrance{background:radial-gradient(ellipse at 50% 50%,#ff28ae38,transparent 78%)}
html[data-layout="portrait"] .feature-hanging-sign{left:0;top:calc(50% - 44.3cqw);width:100%;height:auto;aspect-ratio:3/2;filter:drop-shadow(0 2cqw 3cqw #08010bbb)}
.feature-chain-extension{display:none}
html[data-layout="portrait"] .feature-chain-extension{display:block;position:absolute;bottom:calc(100% - 3.255208333cqw);width:11.71875%;height:201.171875cqw;pointer-events:none}
/* Join each repeat through a narrow connector; replace the first 50 source pixels too. */
html[data-layout="portrait"] .feature-chain-art{mask-image:linear-gradient(transparent 0 4.8828125%,#000 4.8828125%)}
html[data-layout="portrait"] .feature-chain-extension svg{display:block;width:100%;height:100%;overflow:hidden}
html[data-layout="portrait"] .feature-chain-extension--left{left:12.369792%}
html[data-layout="portrait"] .feature-chain-extension--right{right:12.109375%}
html[data-layout="portrait"] .feature-result-detail{font-size:1.8cqw;letter-spacing:.06cqw;height:auto;line-height:1.1;max-width:100%;white-space:normal}
html[data-layout="portrait"] .celebration{background:#0b020fe8;backdrop-filter:blur(3px);animation:portrait-award-fade .25s ease both}
html[data-layout="portrait"] .celebration-art{position:absolute;top:calc(50% - 33.333cqw);left:0;width:100%;height:auto;max-height:none;aspect-ratio:3/2;object-fit:contain;mask-image:none;filter:drop-shadow(0 0 4cqw #f02ab755)}
html[data-layout="portrait"] .celebration-copy{left:14%;right:14%;top:calc(50% - 2cqw);height:22cqw;gap:.75cqw;text-shadow:0 .5cqw #320415}
html[data-layout="portrait"] .celebration-copy>span{font-size:2cqw;letter-spacing:.5cqw}
html[data-layout="portrait"] .celebration-copy h1{height:4.5cqw;flex:none;max-width:100%}
html[data-layout="portrait"] .celebration-copy>strong{font-size:calc(8cqw * var(--portrait-award-amount-fit,1));line-height:1.08;letter-spacing:-.1cqw;max-width:100%;white-space:nowrap}
html[data-layout="portrait"] .celebration-copy p{font-size:2.1cqw;line-height:1.25;margin:.25cqw 0}
html[data-layout="portrait"] .celebration-copy button{position:absolute;left:50%;top:calc(100% + 13cqw);transform:translateX(-50%);min-height:44px;min-width:120px;font-size:13px;padding:12px 24px;letter-spacing:.5px;margin:0;white-space:nowrap}
/* Match the decoded dancers matte (RGB 16,0,20); aura light remains above it. */
html[data-layout="portrait"] .celebration.celebration--bigwin{background:#100014;backdrop-filter:none}
html[data-layout="portrait"] .celebration--bigwin .celebration-art{width:100%;height:auto;max-height:none;mask-image:linear-gradient(transparent,#000 7%,#000 94%,transparent);filter:none}
html[data-layout="portrait"] .celebration--bigwin .celebration-copy{left:17%;right:17%;top:calc(50% + 9.8cqw);height:13.8cqw;gap:.65cqw}
html[data-layout="portrait"] .celebration--bigwin .celebration-copy h1{height:4.3cqw}
html[data-layout="portrait"] .celebration--bigwin .celebration-copy>strong{font-size:calc(7.8cqw * var(--portrait-award-amount-fit,1));line-height:1.05}
html[data-layout="portrait"] .big-win-video{left:0;top:calc(50% - 32.8767cqw);transform:none;width:100%;height:auto;max-height:none;aspect-ratio:1168/768;object-fit:contain;mask-image:linear-gradient(transparent,#000 7%,#000 94%,transparent)}
html[data-layout="portrait"] .celebration--bigwin.celebration--video-active .celebration-copy{left:20%;right:20%;top:calc(50% + 8.2cqw);height:12cqw;gap:.5cqw}
html[data-layout="portrait"] .celebration-rays{inset:0;width:100%;height:100%;background:radial-gradient(ellipse at center,#ffc66944,transparent 80%)}
html[data-layout="portrait"] .celebration--bigwin .celebration-rays{inset:0;background:radial-gradient(ellipse at 50% 48%,#fc72c147,#a342bd26 45%,transparent 90%)}
html[data-layout="portrait"] .celebration--music-synced .celebration-rays{background:radial-gradient(ellipse at 50% 48%,#fff0af66,#fe65cc22 45%,transparent 95%)}
html[data-layout="portrait"] .big-win-aura{inset:0;width:100%;height:100%;contain:strict}
html[data-layout="portrait"] .toast{top:48%;max-width:88%;width:max-content;padding:10px 16px;font-size:13px;line-height:1.35;text-align:center;letter-spacing:.2px}
@keyframes portrait-award-fade{from{opacity:0}to{opacity:1}}
@media(min-width:600px){html[data-layout="portrait"] .paytable{grid-template-columns:1fr 1fr}html[data-layout="portrait"] .paytable article{gap:8px}html[data-layout="portrait"] .paytable canvas{width:50px;height:50px}}
@media(prefers-reduced-motion:reduce){html[data-layout="portrait"] .celebration,html[data-layout="portrait"] .celebration-art{animation:none}}