.case{padding:10px;border:2px solid #ead18a;border-radius:22px;background:#4d311c;box-shadow:0 14px 42px #0009,inset 0 0 0 3px #84613a}.top{padding:8px 14px 1px;color:#ecd99c;letter-spacing:2px;font-size:12px}.play-deck{--rail:clamp(106px,15%,150px);background:#bb914f url('assets/ui/western-gold-panel-v2.png') center/100% 100% no-repeat;border-radius:14px;padding:8px;gap:0;isolation:isolate}.control-rail{background:transparent;padding:18px 9px 14px;gap:12px;align-items:center}.session-buttons,.utility-buttons{width:100%;gap:10px}.utility-buttons{display:grid;grid-template-columns:1fr 1fr;align-content:start}.utility-buttons #fullscreen{grid-column:1/-1}.control-rail button{position:relative;border:0;box-shadow:none;background:transparent;padding:0;transform:none;color:#f4ecd7;min-height:44px;border-radius:10px;text-shadow:0 1px 2px #000;font:800 clamp(8px,1.1vw,12px)/1.15 system-ui;letter-spacing:.35px;touch-action:none;outline-offset:3px;-webkit-tap-highlight-color:transparent;overflow:visible}.session-buttons button,.utility-buttons button{background:url('assets/ui/western-utility-button-v2.png') center/100% 100% no-repeat;padding:9px 7px;transition:filter .08s,transform .08s}.session-buttons button{min-height:48px}.control-rail button:focus-visible{outline:2px solid #fff4bb}.control-rail button:active,.control-rail button.is-pressed{transform:translateY(2px);filter:brightness(.78)}.control-rail button:disabled{filter:grayscale(.65) brightness(.75);cursor:wait}.rail-left .fire,.directions button{background:transparent;border:0;border-radius:12px;box-shadow:none;font-size:0;color:transparent;flex-shrink:0;min-height:44px}.rail-left .fire{width:min(100%,118px);height:auto;aspect-ratio:1;max-height:118px;min-height:70px;display:block}.rail-left .fire small{display:none}.rail-left .fire::before,.directions button::before{content:'';position:absolute;inset:0;pointer-events:none;background-image:url('assets/ui/western-action-buttons-v2.png');background-size:300% 100%;background-repeat:no-repeat}.rail-left .fire::before{background-position:0% 50%}.directions #left::before{background-position:50% 50%}.directions #right::before{background-position:100% 50%}.directions{display:grid;grid-template-columns:1fr 1fr;align-content:center;align-items:center;gap:5px;width:100%;height:118px;flex-shrink:0}.directions button{width:100%;height:auto;aspect-ratio:1;min-width:44px;max-height:none}.screen{border:3px solid #56371e;border-radius:8px;box-shadow:0 0 0 2px #f0d38c,0 4px 10px #4d2d1e8c;z-index:1}.hud{background:#342314;color:#ffe9b2}.hud-top{border-color:#b89551}.hud-bottom{border-color:#b89551}.hud span{color:#d4b674}.hud small{color:#cfb487}.control-rail #status{color:#4a2d18;text-shadow:0 1px #f3dca180;font-weight:650;font-size:clamp(8px,.9vw,11px);align-self:stretch;line-height:1.5;-webkit-line-clamp:5}.control-rail button>*{pointer-events:none}html,body{overscroll-behavior:none}
@media (pointer:coarse) and (orientation:landscape),(max-height:600px) and (orientation:landscape){.case{padding:0;border:0}.play-deck{padding:6px;border-radius:0}.control-rail{padding:10px 5px;gap:7px}.control-rail button{min-height:36px;font-size:9px;letter-spacing:.1px}.session-buttons,.utility-buttons{gap:7px}.session-buttons button{min-height:38px}.utility-buttons button{padding:7px 3px}.rail-left .fire{width:min(100%,102px);min-height:70px;max-height:102px}.directions{height:102px;gap:5px}.directions button{min-height:44px;min-width:44px}.screen{border-width:2px}.control-rail #status{font-size:9px;-webkit-line-clamp:3}}
@media(max-height:340px) and (orientation:landscape){.control-rail{padding:7px 5px;gap:4px}.session-buttons,.utility-buttons{gap:4px}.session-buttons button,.utility-buttons button{min-height:32px;font-size:8px}.directions{height:82px}.rail-left .fire{max-height:82px;width:82px}.control-rail #status{-webkit-line-clamp:2;font-size:8px}}

/* Preserve the v1.0 scene geometry: all decoration stays inside existing rails. */
.case{padding:24px}.play-deck{--rail:13%;padding:0;gap:0}.screen{border:0;border-radius:0;box-shadow:inset 0 0 0 2px #6c4826,0 0 0 2px #f0d38c}.utility-buttons{grid-template-columns:1fr}.utility-buttons #fullscreen{grid-column:auto}.directions{grid-template-columns:1fr;height:auto;justify-items:center;gap:8px}.directions button{width:min(100%,72px);height:auto;max-height:72px;min-width:44px;aspect-ratio:1}.rail-left .fire{width:min(100%,100px);max-height:100px}.control-rail{padding:10px 7px;gap:10px}.session-buttons button{min-height:44px}
@media(max-width:600px){.case{padding:12px}}
@media (pointer:coarse) and (orientation:landscape),(max-height:600px) and (orientation:landscape){.case{padding:0}.play-deck{padding:0;--rail:13%}.control-rail{padding:8px 6px;gap:5px}.session-buttons,.utility-buttons{gap:5px}.session-buttons button,.utility-buttons button{min-height:33px;font-size:9px;padding:5px 2px}.directions{height:auto;gap:8px}.directions button{width:min(100%,58px);min-height:44px;min-width:44px}.rail-left .fire{width:min(100%,85px);max-height:85px;min-height:48px}}
@media(max-height:340px) and (orientation:landscape){.control-rail{padding:5px}.session-buttons button,.utility-buttons button{min-height:28px;font-size:8px}.directions button{width:44px;min-height:44px}.rail-left .fire{width:min(100%,63px);min-height:43px;max-height:63px}}

/* v1.2: inset controls inside brass frame, one direction on each side. */
.control-rail{--inset-x:clamp(13px,2.4vw,34px);padding:clamp(16px,4.2vh,36px) var(--inset-x);min-height:0;gap:10px}.rail-left{display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;justify-items:center;align-items:center}.rail-right{display:flex;flex-direction:column;justify-content:space-between}.session-buttons,.utility-buttons{width:100%;min-width:0}.control-rail button{max-width:100%;min-width:0}.rail-left .fire{width:min(100%,110px);height:auto;min-height:44px;max-height:110px}.rail-left #left,.rail-right #right{position:relative;width:min(100%,80px);height:auto;aspect-ratio:1;min-height:44px;min-width:44px;max-height:80px;border:0;background:transparent;font-size:0;border-radius:12px;padding:0;justify-self:center}.rail-left #left::before{content:"";position:absolute;inset:0;background:url("assets/ui/western-action-buttons-v2.png") 50% 50%/300% 100% no-repeat;pointer-events:none}.directions{height:auto;display:flex;justify-content:center;width:100%;gap:0}.control-rail #status{align-self:center;justify-self:stretch;min-height:0;max-height:100%;display:block;overflow:hidden;-webkit-line-clamp:unset;font-size:clamp(11px,calc(.9vw + 3px),14px);line-height:1.55}
@media (pointer:coarse) and (orientation:landscape),(max-height:600px) and (orientation:landscape){.control-rail{padding:clamp(16px,4.2vh,26px) clamp(13px,2.4vw,24px);gap:8px}.rail-left .fire{width:min(100%,85px);min-height:44px;max-height:85px}.rail-left #left,.rail-right #right{width:min(100%,58px);height:auto;min-width:44px;min-height:44px;max-height:58px}.control-rail #status{font-size:12px;line-height:1.5}.session-buttons button,.utility-buttons button{padding:4px 1px;font-size:8px;letter-spacing:0}}
@media(max-height:340px) and (orientation:landscape){.control-rail{padding:16px 13px;gap:7px}.control-rail #status{font-size:11px;line-height:1.4}.rail-left .fire{width:min(100%,63px);min-height:44px;max-height:63px}.rail-left #left,.rail-right #right{width:44px;min-height:44px;max-height:44px}.session-buttons,.utility-buttons{gap:4px}}
.play-deck{container-type:inline-size}.control-rail{padding-inline:clamp(13px,2.4cqw,34px);padding-block:clamp(16px,2.4cqw,36px)}.session-buttons button,.utility-buttons button{white-space:nowrap}.utility-buttons button{font-size:clamp(8px,.85vw,11px)}
@media (pointer:coarse) and (orientation:landscape),(max-height:600px) and (orientation:landscape){.control-rail{padding-inline:clamp(13px,2.4cqw,24px);padding-block:clamp(16px,2.4cqw,26px)}.utility-buttons button{font-size:8px}}
@media(max-height:340px) and (orientation:landscape){.control-rail{padding:16px 13px}.utility-buttons #fullscreen{font-size:7px}}

.control-rail #status{overflow:auto;scrollbar-width:thin;overscroll-behavior:contain;touch-action:pan-y;}

/* v1.3: annotated reference: a centered, uniformly scaled display and inset controls. */
.play-deck{--rail:17.8%}
.screen{width:114.9068323%;justify-self:center;transform:scale(.87027027);transform-origin:center}
.control-rail{position:relative;padding:0;display:block}
.session-buttons,.utility-buttons{position:absolute;top:16%;left:30%;width:52%;gap:clamp(8px,2.2cqw,32px)}
.session-buttons button,.utility-buttons button{min-height:0;height:clamp(28px,4cqw,58px);padding:4px 2px;font-size:clamp(11px,1.45cqw,21px);letter-spacing:0;white-space:nowrap}
.utility-buttons #fullscreen{font-size:clamp(10px,1.3cqw,19px)}
.rail-left .fire{position:absolute;left:30%;bottom:22%;width:52%;min-height:44px;max-height:110px;max-width:110px}
.rail-left #left{position:absolute;left:30%;bottom:9%;width:52%;min-height:44px;max-height:90px;max-width:90px}
.rail-right .directions{position:absolute;left:18%;bottom:9%;width:52%}
.rail-right #right{width:100%;max-width:90px;max-height:90px;min-height:44px}
.control-rail #status{position:absolute;left:30%;width:52%;top:43%;height:18%;max-height:none;margin:0;font-size:clamp(11px,1.17cqw,17px);line-height:1.5}
@media(max-height:340px) and (orientation:landscape){.session-buttons,.utility-buttons{gap:7px}.session-buttons button,.utility-buttons button{height:28px;font-size:11px}.utility-buttons #fullscreen{font-size:10px}.rail-left .fire{bottom:25%;width:44px;height:44px}.rail-left #left,.rail-right #right{width:44px;height:44px}.control-rail #status{font-size:11px;top:43%;height:17%}}
/* Keep the two left action targets separated at every landscape size. */
.rail-left .fire{bottom:calc(9% + min(9.256cqw,90px) + 12px)}
.control-rail #status{top:40%;height:13.5%}
@media(max-height:340px) and (orientation:landscape){.rail-left .fire{bottom:calc(9% + 44px + 12px)}.control-rail #status{top:43%;height:17%}}
.control-rail #status{font-size:clamp(12px,calc(.9cqw + 3px),17px)}
@media(max-height:340px) and (orientation:landscape){.control-rail #status{font-size:11px}}
@media(max-height:340px) and (orientation:landscape){.session-buttons,.utility-buttons{width:68px}.utility-buttons{left:18%}.control-rail #status{height:14%}}

/* v1.4: paired thumb directions at bottom right; hit areas follow the artwork. */
.rail-left .fire{bottom:9%}
.rail-right .directions{position:absolute;left:4%;bottom:9%;width:92%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;justify-items:center;gap:6px;height:auto}
.rail-right .directions #left,.rail-right .directions #right{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:1;min-width:0;min-height:0;max-width:90px;max-height:90px;padding:0;border:0;background:transparent;font-size:0;flex-shrink:0;transform:none}
.rail-left .fire,.rail-right .directions button{border-radius:50%;clip-path:circle(48% at 50% 50%)}
.rail-right .directions button::before{inset:0}
.rail-right .directions button:active,.rail-right .directions button.is-pressed{transform:translateY(2px)}
@media(max-height:340px) and (orientation:landscape){.rail-right .directions{gap:4px}.rail-left .fire{bottom:9%}}
.rail-right .directions{left:2%;width:86%}
/* v1.5: move the three utility keys toward the inner edge of the right rail. */
.utility-buttons{left:8%}
@media(max-height:340px) and (orientation:landscape){.utility-buttons{left:8%}}
.scene-viewport{position:relative;container-type:inline-size}
.production-credit{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#171711;color:#f6d59c;pointer-events:none;font-family:system-ui,sans-serif}
.production-credit[hidden]{display:none}
.production-credit .credit-card{position:relative;width:92%;text-align:center;padding:3% 3.5%;border:2px solid #aa793c;box-shadow:inset 0 0 0 4px #271b10,0 0 0 1px #e6b367;background:#241c13}
.credit-kicker{font-size:clamp(8px,1.8cqw,15px);letter-spacing:.15em;color:#e6b86b;margin-bottom:2%}
.credit-sign{padding:2% 1%;border:clamp(3px,.8cqw,7px) solid #d9a156;border-radius:clamp(7px,1.5cqw,14px);box-shadow:inset 0 0 0 4px #382414;background:#80512b;color:#ffe0a2;font-weight:900;font-size:clamp(16px,4.4cqw,36px);letter-spacing:.05em}
.credit-intro h2{font-size:clamp(13px,3.3cqw,27px);line-height:1.3;margin:3% 0;color:#ffe1a1}
.credit-role{font-size:clamp(9px,2.1cqw,18px);line-height:1.7;margin:0;color:#e7d1ad}
.credit-assisted{font-size:clamp(8px,1.8cqw,15px);color:#bfa67e;margin:2% 0 0;letter-spacing:.06em}
.credit-start{margin-top:3%;font-size:clamp(8px,1.8cqw,15px);letter-spacing:.2em;color:#ffcf75}
.credit-start::before,.credit-start::after{content:'✦';margin:0 1em;color:#bb8344}
.credit-exiting{background:transparent;animation:credit-backdrop .85s ease both}
.credit-exiting .credit-card{animation:credit-slide .85s cubic-bezier(.55,-.12,.8,.4) both}
@keyframes credit-slide{0%{transform:translateX(0) rotate(0)}20%{transform:translateX(-4%) rotate(-1deg)}100%{transform:translateX(130%) rotate(6deg);opacity:0}}
@keyframes credit-backdrop{0%,25%{background:#171711}100%{background:#17171100}}
.credit-outro .credit-card{width:94%;padding:1% 2%;background:transparent;border:0;box-shadow:none;animation:credit-finish .65s ease-out both}
.credit-outro .credit-sign{font-family:monospace;font-size:clamp(22px,6cqw,49px);letter-spacing:.13em;padding:3% 0}
.credit-created{font-family:Georgia,serif;font-size:clamp(11px,2.6cqw,22px);margin:2% 0 0;color:#ecd8b7}
.credit-name{font-size:clamp(18px,4.4cqw,36px);font-weight:750;margin:1% 0 2%;color:#f7c777}
.credit-rule{height:1px;background:#876a42;margin:0 0 2%}
.credit-outro .credit-role{line-height:1.8;color:#d2b88e}
.credit-year{margin:1% 0 0;font-size:clamp(8px,1.6cqw,14px);color:#b4a078}
@keyframes credit-finish{from{opacity:0;transform:translateY(5%)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.credit-exiting .credit-card{animation:credit-finish .2s reverse both}.credit-exiting{animation-duration:.2s}.credit-outro .credit-card{animation:none}}
.continue-prompt{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;background:#130d09df;color:#ffe5b2;text-align:center;pointer-events:auto}
.continue-prompt[hidden]{display:none}
.continue-card{width:86%;padding:4% 3%;background:#352315;border:3px solid #d7a456;box-shadow:0 0 0 3px #1e140c,inset 0 0 0 2px #634324}
.continue-kicker{font:700 clamp(9px,2cqw,17px) monospace;letter-spacing:.2em;color:#d5b67f}
.continue-card h2{margin:2% 0;font-size:clamp(20px,5cqw,40px)}
.continue-card p{margin:1% 0;font-size:clamp(12px,3cqw,23px)}
.continue-card small{display:block;margin:2% 0;color:#d8c3a3;font-size:clamp(9px,2.2cqw,18px);letter-spacing:0}
.continue-choices{display:flex;justify-content:center;gap:7%;margin-top:3%}
.continue-choices button{width:30%;min-height:44px;padding:5px;border:2px solid #e6b563;background:#99452c;color:#fff1cb;font-size:clamp(16px,3.6cqw,28px);border-radius:8px;touch-action:manipulation}
.continue-choices #continue-no{background:#3f3c35;border-color:#978775}
.continue-choices button:focus-visible{outline:3px solid #fff;outline-offset:3px}