:root{--safe-bottom:env(safe-area-inset-bottom,0px);--safe-top:env(safe-area-inset-top,0px)}
#intro-loader{position:fixed;inset:0;z-index:100;background:#0b0c0d;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:24px;opacity:1;transition:opacity .6s ease,visibility .6s}
#intro-loader.is-ready{opacity:0;visibility:hidden;pointer-events:none}
.intro-brand{font:bold 18px Arial,sans-serif;letter-spacing:4px;color:#efeee8}.intro-brand span{color:#ef982f}
.intro-track{width:min(240px,65vw);height:2px;background:#292a28;overflow:hidden}
#intro-progress{width:10%;height:100%;background:#ef982f;transition:width .3s ease}
#intro-label{font:9px monospace;letter-spacing:2px;color:#96968e}
@media(prefers-reduced-motion:reduce){#intro-loader,#intro-progress{transition:none}}
html,body{width:100%;height:100%;overscroll-behavior:none}
body{height:100dvh}
button{min-height:44px;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.showcase-items{overscroll-behavior:contain;touch-action:pan-x}
#stage{overflow:hidden}
@media(max-width:1199px){
 header{top:calc(22px + var(--safe-top));left:24px;right:24px}
 .edition{font-size:9px;letter-spacing:1px}
 .info{left:24px;top:24%;width:225px}
 h1{font-size:48px;letter-spacing:-2px}
 .status{top:calc(57px + var(--safe-top));right:24px}
 #stage{left:250px;right:12px;top:75px;bottom:185px}
 .controls{left:24px;bottom:calc(24px + var(--safe-bottom));max-width:calc(100vw - 280px);gap:6px}
 .controls button{padding:10px 14px}
 .hint{left:24px;bottom:calc(132px + var(--safe-bottom))}
 .showcase{right:24px;bottom:calc(24px + var(--safe-bottom));width:222px}
}
@media(max-width:1199px) and (orientation:portrait), (max-width:700px){
 header{left:20px;right:20px;top:calc(18px + var(--safe-top))}
 .brand{font-size:14px;letter-spacing:2px}.edition{display:none}
 .status{top:calc(22px + var(--safe-top));right:20px;font-size:9px}
 .info{left:20px;right:20px;top:calc(76px + var(--safe-top));width:auto}
 .eyebrow{font-size:9px;letter-spacing:2px}
 h1{font-size:clamp(30px,5.4vw,48px);letter-spacing:-1.5px;margin:12px 0;line-height:1.1}
 h1 br{display:none}h1 span~span{margin-left:.22em}
 .info p,.rule{display:none}
 #stage{left:12px;right:12px;top:calc(159px + var(--safe-top));bottom:calc(228px + var(--safe-bottom))}
 .hint{left:0;right:0;text-align:center;bottom:calc(211px + var(--safe-bottom));font-size:10px}
 .showcase{left:20px;right:20px;width:auto;bottom:calc(79px + var(--safe-bottom));padding:10px}
 .showcase-title{font-size:8px;margin-bottom:7px}
 .showcase-items{gap:8px;max-height:95px}
 .showcase button{width:76px;flex:0 0 76px;padding:4px;min-height:0}
 .showcase img{height:56px}.showcase span{padding:5px 0 1px;font-size:8px}
 .controls{left:12px;right:12px;bottom:calc(16px + var(--safe-bottom));max-width:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px}
 .controls button{min-width:0;min-height:46px;font-size:11px;padding:8px 2px;border-radius:13px;white-space:nowrap}
 #error{inset:20% 16px auto;font-size:13px}
}
@media(min-width:701px) and (max-width:1199px) and (orientation:portrait){
 .info{top:calc(100px + var(--safe-top));left:32px}
 #stage{top:205px;bottom:260px;left:32px;right:32px}
 .showcase{left:32px;right:32px;bottom:100px;padding:14px}
 .showcase img{height:72px}.showcase-items{max-height:115px}.showcase button{flex-basis:94px}
 .controls{left:32px;right:32px;bottom:calc(28px + var(--safe-bottom));gap:10px}
 .controls button{font-size:13px;min-height:50px}
 .hint{bottom:252px}
}
@media(max-height:600px) and (orientation:landscape){
 header{top:calc(12px + var(--safe-top));left:20px;right:20px}.edition{display:none}.brand{font-size:12px}
 .status{top:16px;right:20px;font-size:9px}
 .info{top:80px;left:max(20px,env(safe-area-inset-left));width:170px;right:auto}
 .eyebrow{font-size:8px;letter-spacing:1px}h1{font-size:30px;margin:12px 0;letter-spacing:-1px}h1 br{display:block}h1 span~span{margin-left:0}.info p,.rule{display:none}
 #stage{left:180px;right:125px;top:45px;bottom:80px}
 .showcase{left:auto;right:max(12px,env(safe-area-inset-right));top:55px;bottom:85px;width:102px;padding:7px;overflow:hidden}
 .showcase-title{font-size:7px;letter-spacing:0;margin-bottom:5px}
 .showcase-items{flex-direction:column;max-height:calc(100% - 17px);overflow-y:auto;overflow-x:hidden;touch-action:pan-y}
 .showcase button{flex:0 0 auto;width:100%;padding:3px}.showcase img{height:49px}.showcase span{font-size:7px;padding:4px 0 1px}
 .hint{left:20px;right:auto;bottom:70px;font-size:9px;text-align:left}
 .controls{left:max(20px,env(safe-area-inset-left));right:max(20px,env(safe-area-inset-right));bottom:calc(10px + var(--safe-bottom));max-width:none;display:flex;flex-wrap:nowrap;gap:8px}
 .controls button{padding:8px 16px;font-size:11px;min-height:44px}
}
@media(max-width:350px){.controls{gap:3px;left:6px;right:6px}.controls button{font-size:10px}.brand{font-size:12px}.status{font-size:8px}}
@media(hover:none){body.clean .controls,body.clean .showcase{opacity:.85}}
/* A 17-card rail shares the desktop baseline with the left controls. */
.showcase-items{scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:#b98132 #161819}
.showcase button{scroll-snap-align:start}
@media(min-width:1200px) and (min-height:601px){
 .showcase{width:min(1752px,calc(100vw - 710px));right:40px;bottom:30px;padding:12px}
 .showcase-items{justify-content:flex-start;gap:8px}
 .showcase button{flex:0 0 94px}
 .showcase img{height:72px}
 .controls{bottom:30px;max-width:none}
 .hint{bottom:82px}
 #stage{bottom:188px;top:35px}
 .info{top:20%}
}
@media(min-width:701px) and (max-width:1199px) and (orientation:landscape) and (min-height:601px){
 .showcase{left:24px;right:24px;width:auto;bottom:90px}
 .showcase img{height:64px}
 .controls{max-width:none}
 .hint{bottom:226px}
 #stage{bottom:245px}
}

@media(max-width:700px) and (orientation:portrait){
 .controls{grid-template-columns:repeat(3,minmax(0,1fr))}
 .showcase{bottom:calc(130px + var(--safe-bottom))}
 .hint{bottom:calc(262px + var(--safe-bottom))}
 #stage{bottom:calc(279px + var(--safe-bottom))}
}