/* CINEMATIC: Korean transparent acrylic machine, broadcast camera controls. */
.machine-wrap{isolation:isolate;overflow:hidden;border-color:#427e9a;box-shadow:inset 0 1px 0 #b5ebff77,0 26px 90px #03172455}
.machine-window{background:radial-gradient(ellipse at 50% 31%,#125578 0,#06273d 47%,#04131f 100%)!important;overflow:hidden}
.machine-window::before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,#ffffff05 0px,#ffffff05 1px,transparent 1px,transparent 4px);z-index:1;opacity:.27}
.machine-window::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 49%,transparent 40%,#05152273 100%);pointer-events:none;z-index:2}
#machineCanvas{position:relative;z-index:2;filter:contrast(1.08) saturate(1.10)}
.korean-machine-silhouette{opacity:.07!important;pointer-events:none}
.cinematic-cameras{position:absolute;right:15px;top:62px;display:flex;align-items:center;gap:4px;z-index:7;border:1px solid #8be5f25c;background:#062538b9;backdrop-filter:blur(9px);border-radius:12px;padding:4px;box-shadow:0 8px 27px #0005}
.cinematic-cameras button{background:transparent;color:#abcfda;border:0;border-radius:8px;font-size:11px;font-weight:800;letter-spacing:.01em;padding:7px 10px;cursor:pointer;transition:background .15s ease}
.cinematic-cameras button.active,.cinematic-cameras button:hover{background:#0fa79e;color:#fff}
.machine-drag{top:76px!important;left:17px!important;max-width:220px;font-size:10px!important;color:#b5dde5!important}
.machine-watermark{letter-spacing:.16em}
.machine-window:has(+.machine-outlet){min-height:0}
.on-air .machine-window{box-shadow:inset 0 0 110px #0ba6a51b}
.on-air .machine-watermark{animation:cinematicWatermark 1.5s infinite alternate}
@keyframes cinematicWatermark{to{opacity:.37}}
@media(max-width:600px){.cinematic-cameras{top:51px;right:10px;padding:3px;gap:0}.cinematic-cameras button{padding:7px 7px;font-size:10px}.machine-drag{top:92px!important;left:13px!important;max-width:200px;font-size:9px!important}.machine-top{z-index:7!important}}
@media(prefers-reduced-motion:reduce){.on-air .machine-watermark{animation:none}}

/* v0.5.1 visual QA adjustments: tighter real-scale framing, readable mobile content. */
.main-grid,.main-stage,.machine-wrap,.machine-window{min-width:0;max-width:100%}
.stage-title-row > div:first-child{min-width:0;flex:1}
.stage-title-row h1{overflow-wrap:anywhere}
.cinematic-cameras{max-width:calc(100% - 20px)}
.cinematic-cameras button{flex-shrink:0}
@media(max-width:600px){
 .stage-title-row h1{font-size:clamp(26px,7.5vw,34px);line-height:1.16!important}
 .stage-title-row .lead{overflow-wrap:anywhere}
 .cinematic-cameras{right:8px;top:52px;max-width:calc(100% - 16px);padding:3px}
 .cinematic-cameras button{padding:6px 6px;font-size:9px}
 .machine-drag{top:92px!important;left:12px!important;max-width:160px}
 .broadcast-lower-third{bottom:26px!important}
}

/* v0.5.2 mobile width safety: result row must not widen the entire studio. */
@media(max-width:600px){
 .app-shell,.view,.main-grid,.main-stage,.stage-title-row,.machine-wrap,.draw-panel{min-width:0;max-width:100%;width:100%}
 .draw-groups{display:flex;align-items:flex-start;justify-content:center;min-width:0;max-width:100%;width:100%;gap:4px}
 .draw-groups>div:first-child{flex:1 1 auto;min-width:0;max-width:calc(100% - 46px)}
 .draw-bonus-group{flex:0 0 42px;min-width:0;padding-left:4px}
 .draw-result{display:flex;flex-wrap:nowrap;min-width:0;max-width:100%;gap:3px;justify-content:center}
 .draw-result .ball,.draw-result .empty-ball{width:clamp(27px,8.2vw,33px)!important;height:clamp(27px,8.2vw,33px)!important;font-size:13px!important;flex-shrink:1}
 .cinematic-cameras{top:50px;right:8px;left:auto!important;width:max-content;max-width:calc(100% - 22px)}
 .cinematic-cameras button{font-size:9px;padding:5px 5px}
 .machine-drag{top:95px!important;max-width:135px;font-size:9px}
}

/* v0.5.3: thumb-size camera controls, no collisions with tap/drag hint. */
@media(max-width:600px){
 .cinematic-cameras{top:41px;left:50%!important;right:auto!important;transform:translateX(-50%);max-width:calc(100% - 20px);width:auto;box-shadow:0 5px 20px #0008}
 .cinematic-cameras button{min-width:42px;min-height:32px;padding:8px 6px;font-size:10px}
 .machine-drag{top:auto!important;bottom:65px!important;left:10px!important;max-width:min(55%,190px);line-height:1.35}
 .machine-wrap{overflow:hidden}
}

/* v0.5.4: keep all seven actual balls fully visible on a 320–430px handset. */
@media(max-width:600px){
 .draw-panel-top{gap:6px;flex-wrap:wrap}
 .draw-panel-top .section-kicker{letter-spacing:0.06em;font-size:9px;flex:1 1 165px}
 .draw-panel-top .status-text{font-size:9px;letter-spacing:0;white-space:normal;text-align:right;flex:0 1 132px}
 .draw-groups{display:grid;grid-template-columns:minmax(0,1fr) 48px;gap:4px;align-items:start;width:100%;overflow:visible}
 .draw-groups>div:first-child{width:100%;min-width:0;max-width:none}
 .draw-bonus-group{width:48px;min-width:0;max-width:none;display:flex;align-items:center;flex-direction:column;padding-left:4px;border-left:1px solid #447285aa}
 .draw-group-label{display:block;font-size:9px;letter-spacing:0;white-space:nowrap;text-align:center}
 .draw-result{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));justify-items:center;align-items:center;width:100%;gap:3px;min-height:52px}
 .draw-result .ball,.draw-result .empty-ball{display:grid;place-items:center;width:min(100%,35px)!important;height:auto!important;aspect-ratio:1;font-size:clamp(11px,3.2vw,14px)!important;min-width:0}
 .draw-bonus-group .draw-result{display:grid;grid-template-columns:minmax(0,1fr);width:100%;gap:0}
 .draw-bonus-group .draw-result .ball,.draw-bonus-group .draw-result .empty-ball{width:min(100%,35px)!important}
}