/* Final geometry owns placement; the older art styles only own appearance. */
/* Match the painted lettering without squeezing small live copy into Impact. */
:root{font-family:'Trebuchet MS','Segoe UI',sans-serif}
.lower-screen>.status,.feature-meter>span,.feature-meter>output{font-family:CarnivalCoin,Georgia,serif;font-weight:700;letter-spacing:.02em;line-height:1.15;text-shadow:0 2px 2px #210908}
.controls>.spin,.feature-meter>.feature-spin{font-family:CarnivalCoin,Georgia,serif;font-weight:700;letter-spacing:.01em;line-height:1.1;-webkit-text-stroke:0;text-shadow:0 2px 1px #71150b,0 0 6px #ffb743}
.controls>.spin,.feature-meter>.feature-spin{-webkit-tap-highlight-color:transparent;user-select:none}
.controls>.spin{font-size:clamp(16px,2.8dvh,30px)}
html,body{width:100%;height:100%;min-height:0;overflow:hidden}
.cabinet.cabinet-shell{position:relative;display:flex;flex-direction:column;width:100vw;max-width:none;height:100dvh;min-height:0;padding:0;gap:0;overflow:hidden}
.cabinet-shell>.topper-stage{position:relative;top:auto;flex:none;width:100%;height:34dvh;aspect-ratio:auto;border-radius:0;background-size:100% 100%;filter:none}
.cabinet-shell>.lower-screen{flex:none;width:100%;height:calc(66dvh - 16px);aspect-ratio:auto;margin:0;background-size:100% 100%}
.cabinet-shell>footer{flex:none;height:16px;padding:2px 6px;font-size:9px;line-height:12px;overflow:hidden}
.chomper{bottom:15%;height:59%;aspect-ratio:2/3;filter:none}
.chomper.red{--stage-x:21%}.chomper.blue{--stage-x:50%}.chomper.green{--stage-x:79%}
.chomper.green{aspect-ratio:1199/1312}
/* Preserve accessible growth text without drawing another floor disc. */
.stage-progress{width:1px;height:1px;overflow:hidden;clip-path:inset(50%);background:none;mask:none;filter:none}
.stage-progress::after{content:none}
.chomper em{bottom:-8%;font-size:clamp(10px,.9vw,15px)}
.lower-screen>.main-game-logo.title-bridge{left:30%;top:0;width:40%;height:20%;object-fit:contain}
.lower-screen::before{display:none}
.controls>.how-to-button{left:4%;top:83%;width:44px;height:44px;min-width:44px;min-height:44px;pointer-events:auto}
.controls>.bonus-demo{left:12%;top:82%;width:8%;height:12%;min-width:44px;min-height:44px;color:#fff1a6!important;font-size:clamp(10px,1vw,16px)}
@media(min-width:901px),(orientation:landscape){
 /* Fit the two source canvases as one machine without non-uniform scaling.
    1 / (724/2172 + 941/1672) = 5016/4495. */
 body{background:#090416}
 .cabinet.cabinet-shell{width:min(100vw,calc((100dvh - 16px)*1.11590656));justify-content:center}
 .cabinet-shell>.topper-stage{height:auto;aspect-ratio:2172/724}
 .cabinet-shell>.lower-screen{height:auto;aspect-ratio:1672/941;background-image:url('../../assets/cabinet/carnival-main-screen-landscape-lights-v1.webp'),url('../../assets/cabinet/premium-cabinet-landscape-v2.png')}
 .cabinet-shell>.topper-stage{background-image:url('../../assets/topper/carnival-top-screen-v1.webp')}
 .lower-screen{--window-x:17.25%;--window-y:20.85%;--window-w:65.55%;--window-h:52.9%;--spin-right:12.2%;--spin-top:76.8%;--spin-width:12.6%;--message-top:75%}
 .lower-screen>.reel-stage{left:var(--window-x);top:var(--window-y);width:var(--window-w);height:var(--window-h)}
 .controls>.spin{right:12.2%;top:76.8%;width:12.6%;aspect-ratio:1;height:auto;display:grid;place-items:center;color:#fff3a4!important}
 .lower-screen>.status{left:28%;width:44%;top:75%;height:6%;background:none;border:0;box-shadow:none;font-size:clamp(10px,2dvh,22px)}
 /* Three live values occupy painted wells; the spare well holds bet controls. */
 .controls>label{top:85.5%;height:8%;padding:0;align-items:center;justify-content:center}
 .controls output{font-size:clamp(12px,2.2dvh,22px)}
 .controls>.balance-label{left:19%;width:12%}
 .controls>.bet-label{left:32%;width:11%}
 .controls>.win-label{left:58%;width:11%}
 .controls>.bet-label button{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;background:#57131d;border-color:#e8b44f;color:#fff0b4}
 .controls>.bet-label #bet-down{left:114%}
 .controls>.bet-label #bet-up{left:calc(114% + 48px)}
}
@media(max-width:900px) and (orientation:landscape){
 .controls>.bet-label button{width:28px;height:28px;min-width:28px;min-height:28px}
 .controls>.bet-label #bet-up{left:calc(114% + 32px)}
}
@media(max-width:900px) and (orientation:portrait){
 .lower-screen{--window-x:9.2%;--window-y:23.3%;--window-w:81.1%;--window-h:37.3%;--spin-right:35%;--spin-top:80.4%;--spin-width:30%;--message-top:63.8%}
 .lower-screen>.reel-stage{left:var(--window-x);top:var(--window-y);width:var(--window-w);height:var(--window-h)}
 .cabinet-shell>.topper-stage{height:34dvh;background-size:100% 100%}
 .cabinet-shell>.lower-screen{height:calc(66dvh - 16px);background-image:url('../../assets/cabinet/carnival-main-screen-mobile-lights-v1.webp')}
 .chomper{bottom:15%;height:40%}
 .chomper.red{--stage-x:18%}.chomper.blue{--stage-x:50%}.chomper.green{--stage-x:82%}
 .chomper em{bottom:-12%;font-size:9px}
 /* The portrait cabinet already contains the full painted title. */
 .lower-screen>.main-game-logo.title-bridge{display:none}
 .controls>.how-to-button{left:6%;top:82%;width:44px;height:44px}
 .controls>.bonus-demo{left:auto;right:5%;top:82%;width:48px;height:44px;font-size:10px}
 .controls>.spin{right:35%;top:80.4%;width:30%;min-height:44px}
 .controls output{font-size:clamp(12px,3.7vw,17px)}
 .controls>.bet-label{justify-content:center}
 .controls>.bet-label button{position:absolute;top:calc(100% + 8dvh);width:44px;height:44px;background:#57131d;border-color:#e8b44f;color:#fff0b4}
 .controls>.bet-label #bet-down{left:-45%}
 .controls>.bet-label #bet-up{right:-45%}
}
@media(max-width:900px) and (orientation:portrait) and (prefers-reduced-motion:reduce){
 .cabinet-shell>.lower-screen{background-image:url('../../assets/cabinet/carnival-main-screen-mobile-clean-v2.png')}
}
[data-scene][hidden]{display:none!important}
/* Painted button faces own the surface and glyph; DOM labels remain accessible. */
.controls>.bet-label button#bet-down,.controls>.bet-label button#bet-up{
 background-color:transparent;border:0;border-radius:0;box-shadow:none;
 background-repeat:no-repeat;background-position:center;background-size:contain;
 color:transparent;text-shadow:none;-webkit-text-stroke:0;padding:0;
}
.controls>.bet-label button#bet-down{background-image:url('../../assets/cabinet/bet-minus-v1.webp')}
.controls>.bet-label button#bet-up{background-image:url('../../assets/cabinet/bet-plus-v1.webp')}
.controls>.bet-label button:focus-visible{outline:2px solid #fff1b3;outline-offset:2px}
.controls>.bet-label button:active{filter:brightness(.8)}
@media(min-width:901px),(orientation:landscape){
 .controls>.bet-label button#bet-down,.controls>.bet-label button#bet-up{width:40%;height:100%;min-width:24px;min-height:24px;background-size:72% 72%}
 .controls>.bet-label button#bet-down{left:117%}
 .controls>.bet-label button#bet-up{left:168%}
}
/* Light lettering, dark contour: separate the value from every coin face.
   Keep the halo tight; broad gold bloom reduced small-number legibility. */
.symbol .coin-value,.feature-cell .coin-value{
 color:#fffbea;-webkit-text-fill-color:#fffbea;
 -webkit-text-stroke:.55px #321208;paint-order:stroke fill;
 text-shadow:0 1px 1px #160906,1px 0 1px #160906,-1px 0 1px #160906,0 0 3px #fff0a080;
 letter-spacing:0;font-weight:700;
}
@media(prefers-reduced-motion:reduce){
 @media(min-width:901px),(orientation:landscape){
  .cabinet-shell>.lower-screen{background-image:url('../../assets/cabinet/premium-cabinet-landscape-v2.png')}
 }
}
/* Temporary explicit audio preference in the demo footer; no new cabinet skin. */
#sound-toggle{font:inherit;color:inherit;background:none;border:0;padding:0 4px;cursor:pointer}
/* The portrait artwork owns SPIN lettering. Keep the button's accessible text. */
@media(max-width:900px) and (orientation:portrait){
 .feature-screen[data-action="spin"] .feature-spin{color:transparent;text-shadow:none;-webkit-text-stroke:0}
}
/* Collection is an explicit action in the existing painted message plaque. */
.feature-readout{position:absolute;left:28%;top:var(--message-top);width:44%;height:6%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff3ba;font-family:CarnivalCoin,Georgia,serif;line-height:1.05;text-shadow:0 1px 2px #200714;background:none;border:0;box-shadow:none}
.feature-readout>small{font:700 clamp(6px,1.2dvh,12px)/1.1 'Trebuchet MS',sans-serif;letter-spacing:.03em;color:#efd295}
.feature-readout>div{display:flex;justify-content:center;gap:1.2em;white-space:nowrap;font-size:clamp(9px,1.8dvh,18px)}
.feature-readout output{all:unset;display:inline;font:inherit;color:#fffbea}
.feature-readout>div>span{display:inline;white-space:nowrap}
.feature-screen[data-feedback="reset"] #respin-count{animation:respin-reset .65s ease-out}
.feature-cell.just-landed .coin-art{animation:coin-lock .32s ease-out}
.feature-screen[data-action="collect"] .feature-readout{visibility:visible}
@keyframes respin-reset{0%{color:#fff; text-shadow:0 0 7px #ffd469}100%{color:#fffbea;text-shadow:none}}
/* Keep the face and its amount at the same size when the reel cover clears. */
@keyframes coin-lock{0%{filter:brightness(1.3)}100%{filter:brightness(1)}}
@media(max-width:900px) and (orientation:portrait){
 .feature-readout{left:14%;width:72%;height:4.6%}
 .feature-readout>div{font-size:clamp(10px,3vw,16px)}
 .feature-readout>small{font-size:clamp(7px,2vw,10px)}
}
@media(prefers-reduced-motion:reduce){.feature-screen[data-feedback="reset"] #respin-count,.feature-cell.just-landed .coin-art{animation:none}}
.feature-screen[data-action="collect"] .feature-meter>span,
.feature-screen[data-action="collect"] .feature-meter>output{visibility:hidden}
.feature-screen[data-action="collect"] .feature-spin{
 left:28%;right:auto;top:var(--message-top);width:44%;height:6%;aspect-ratio:auto;
 border-radius:0;color:#fff3a4;font-size:clamp(12px,2dvh,22px);white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:.45em;
}
.feature-screen[data-action="collect"] .feature-spin{color:transparent;text-shadow:none;-webkit-text-stroke:0;opacity:0}
.feature-screen[data-action="collect"] .feature-spin::after{content:'PRESS SPIN';font:700 .65em 'Trebuchet MS',sans-serif;letter-spacing:0}
.feature-collect-shortcut{display:none}
.feature-screen[data-action="collect"]>.feature-collect-shortcut{display:grid;place-items:center;position:absolute;right:var(--spin-right);top:var(--spin-top);width:var(--spin-width);height:auto;aspect-ratio:1;padding:0;border:0;border-radius:50%;background:none;box-shadow:none;pointer-events:auto;cursor:pointer;color:#fff3a4;font:700 clamp(16px,2.8dvh,30px)/1.1 CarnivalCoin,Georgia,serif;text-shadow:0 2px 1px #71150b}
.feature-collect-shortcut:focus-visible{outline:2px solid #fff1b3;outline-offset:2px}
@media(max-width:900px) and (orientation:portrait){
 .feature-screen[data-action="collect"]>.feature-collect-shortcut{color:transparent;text-shadow:none}
 .feature-screen[data-action="collect"] .feature-spin{left:14%;width:72%;height:4.6%;min-height:44px;top:calc(var(--message-top) + 2.3%);transform:translateY(-50%);font-size:clamp(12px,3.5vw,18px)}
}