.draw-studio { max-width:1280px; margin:auto; padding:38px 32px 48px; }
.studio-intro { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:28px; }
.studio-intro h1 { margin:6px 0 10px; font-size:34px; letter-spacing:-1.3px; }
.studio-intro .muted { margin:0; font-size:14px; }
.studio-format { color:#857f79; font-size:12px; letter-spacing:2px; white-space:nowrap; }
.studio-format strong { display:block; font-size:38px; letter-spacing:-2px; color:#40382f; }
.studio-grid { display:grid; grid-template-columns:minmax(0,1.85fr) minmax(300px,1fr); align-items:start; gap:24px; }
.machine-panel { overflow:hidden; background:#f8f7f6; border:1px solid #dedbd8; color:#42392f; box-shadow:0 16px 40px #14284012; }
.machine-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 26px; }
.machine-heading h2 { display:flex; align-items:center; gap:9px; margin:0; font-size:12px; letter-spacing:2px; font-weight:600; }
.machine-led { width:6px; height:6px; background:#b7b1aa; }
[data-state=drawing] .machine-led { background:#66e1c3; box-shadow:0 0 12px #66e1c3; }
#machine-phase { font-size:11px; color:#6f675e; }
.machine-viewport { position:relative; }
#lotto-machine { width:100%; height:auto; display:block; aspect-ratio:680/540; }
.machine-caption { display:flex; justify-content:space-between; position:absolute; bottom:15px; left:26px; right:26px; font-size:9px; letter-spacing:2px; color:#90877c; pointer-events:none; }
.draw-tray-heading { display:flex; justify-content:space-between; padding:10px 26px; color:#777067; font-size:11px; letter-spacing:1px; }
.draw-tray { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; margin:0 26px; padding:16px; background:#f0ede9; border:1px solid #dfdbd7; }
.draw-slot { display:grid; place-items:center; min-width:0; height:58px; font-size:12px; color:#a19b95; }
.draw-slot .ball { width:100%; max-width:58px; height:auto; aspect-ratio:1; font-size:22px; box-shadow:inset -4px -5px 10px #0003,inset 3px 3px 8px #fff5,0 5px 10px #0005; animation:ball-arrive .25s cubic-bezier(.23,1,.32,1) both; }
.machine-announcement { min-height:18px; margin:18px 16px 22px; text-align:center; font-size:12px; color:#625a50; }
.draw-console { padding:26px; background:white; border:1px solid var(--line); }
.ticket-header h2 { margin:8px 0; font-size:23px; letter-spacing:-.7px; }
.ticket-header .muted { font-size:12px; }
.draw-settings { display:grid; gap:10px; margin:24px 0 18px; }
.draw-settings > label:first-child { font-size:12px; font-weight:700; }
.draw-settings select { width:100%; min-height:44px; padding:10px 12px; border:1px solid #e8e5df; background:#fbfaf9; font:inherit; font-size:13px; }
.sound-setting { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12px; cursor:pointer; }
.sound-setting input { accent-color:var(--blue); width:16px; height:16px; }
.draw-start { width:100%; display:flex; align-items:center; justify-content:space-between; padding:16px 20px; font-size:15px; }
#random-skip { margin-top:10px; font-size:12px; }
.ticket-divider { display:flex; align-items:center; gap:12px; margin:26px 0 10px; font-size:9px; letter-spacing:1.8px; color:#a5a09a; }
.ticket-divider:before,.ticket-divider:after { content:''; flex:1; border-top:1px dashed #e6e3de; }
.ticket-empty { text-align:center; padding:20px 0 28px; color:#9d9892; }
.ticket-empty > span { font-size:34px; color:#d0ccc7; }
.ticket-empty p { font-size:13px; margin:10px 0 6px; }
.ticket-empty small { font-size:11px; }
.ticket-results { margin-bottom:18px; }
.ticket-game { padding:14px 0; border-bottom:1px solid #f2f1ef; }
.ticket-game-title { display:flex; justify-content:space-between; margin-bottom:10px; font-size:11px; color:#908a84; }
.ticket-game-title strong { color:#4f4539; }
.ticket-game .ball-row { display:flex; gap:6px; margin:0; }
.ticket-game .ball { width:32px; height:32px; font-size:13px; flex-shrink:0; }
.ticket-pending { font-size:12px; color:#b4afaa; padding:8px 0; }
.ticket-note { margin:16px 0 0; font-size:11px; color:#98938e; line-height:1.8; }
.studio-footnote { text-align:center; margin:22px 0 0; font-size:11px; color:#95908a; }
@keyframes ball-arrive { from { opacity:0; transform:translateY(-6px) scale(.95); } to { opacity:1; transform:translateY(0) scale(1); } }
@media(max-width:1000px) { .studio-grid { grid-template-columns:minmax(0,1.4fr) minmax(280px,1fr); gap:18px; } .draw-console { padding:20px; } .draw-tray { margin:0 16px; gap:6px; padding:10px; } .draw-slot .ball { font-size:18px; } }
@media(max-width:760px) {
 .draw-studio { padding:24px 16px 32px; }
 .studio-intro { margin-bottom:20px; }
 .studio-intro h1 { font-size:27px; }
 .studio-intro .muted { font-size:12px; line-height:1.7; }
 .studio-format { display:none; }
 .studio-grid { grid-template-columns:minmax(0,1fr); gap:16px; }
 .machine-heading { padding:16px 18px; }
 .machine-heading h2 { font-size:10px; }
 .draw-tray-heading { padding:8px 18px; }
 .draw-console { padding:22px; }
 .draw-slot { height:44px; }
 .draw-slot .ball { max-width:44px; font-size:17px; }
 .machine-announcement { font-size:11px; margin:14px 12px 18px; }
 .ticket-game .ball { width:36px; height:36px; }
}
@media(prefers-reduced-motion:reduce) { .draw-slot .ball { animation:none; } }
@media(max-width:360px) {
 .ticket-game .ball-row { gap:5px; }
 .ticket-game .ball { width:32px; height:32px; }
}

@media(max-width:540px) { #lotto-machine { aspect-ratio:500/540; } }

/* WebGL stage: geometry supplies depth, the surrounding controls stay quiet. */
.machine-panel { background:#f8f7f6; }
.machine-view-controls { display:flex; align-items:center; gap:4px; padding:0 24px 14px; }
.machine-view-controls button { padding:7px 12px; border:1px solid #e3e0da; background:transparent; color:#6f685f; font:inherit; font-size:11px; cursor:pointer; }
.machine-view-controls button[aria-pressed=true] { background:#443c32; color:white; border-color:#443c32; }
.machine-view-controls button:focus-visible { outline:2px solid #f0a119; outline-offset:3px; }
.machine-view-controls > span { margin-left:auto; font-size:9px; letter-spacing:1.5px; color:#958f87; }
#lotto-machine { aspect-ratio:1.12; cursor:grab; }
#lotto-machine:active { cursor:grabbing; }
.machine-render-note { margin:0; padding:10px 16px; text-align:center; color:#8e8780; font-size:10px; background:#eeedeb; }
#lotto-machine[data-renderer=unavailable] { display:none; }
@media(max-width:540px) { #lotto-machine { aspect-ratio:.82; } .machine-view-controls { padding:0 16px 12px; } }