/* HealingMart Lotto 6/45 — Korean broadcast-inspired studio; original artwork, no broadcaster assets */
:root { --ballGold:#ffc736;--ballBlue:#4c9ce8;--ballRed:#f36269;--ballSilver:#c4cbd3;--ballGreen:#48c479; }
.brand-copy small {letter-spacing:1.6px}
body {background:radial-gradient(ellipse at 14% 0%,#153949 0%,transparent 38%),radial-gradient(ellipse at 87% 66%,#0c2735 0%,transparent 34%),var(--bg)}
html[data-theme=light] body{background:radial-gradient(ellipse at 0% 0%,#d3f4ec 0%,transparent 40%),#edf5f5}
.stage-title-row h1 {font-weight:930;letter-spacing:-2.4px}
.stage-title-row h1 em{background:linear-gradient(100deg,#2af0c1,#b5f277);-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-theme=light] .stage-title-row h1 em{background:linear-gradient(100deg,#058e81,#087a53);-webkit-background-clip:text;background-clip:text}
.machine-wrap{background:radial-gradient(ellipse 52% 68% at 48% 42%,#123e58 0%,#0a2239 45%,#031221 85%);border-color:#386482;min-height:clamp(430px,56dvh,940px)}
.machine-wrap:after{content:'';position:absolute;left:-20%;right:-20%;bottom:-16%;height:37%;background:radial-gradient(ellipse at center,#0cb4c344,transparent 62%);pointer-events:none;z-index:0}
.machine-top{top:22px;left:24px;right:24px;color:#cceef9;font-size:clamp(10px,.82vw,14px)}
.machine-top b {color:#b8f2e4}
.machine-indicator{display:flex;align-items:center}
.machine-indicator i{animation:livePulse 1.8s infinite}
@keyframes livePulse {50%{opacity:.4;box-shadow:0 0 0 8px #9bffaa0a}}
.machine-window canvas{z-index:2}
.korean-machine-silhouette{position:absolute;inset:0;pointer-events:none;z-index:1}
.machine-halo{position:absolute;width:min(69%,78dvh);aspect-ratio:1;left:50%;top:45%;transform:translate(-50%,-50%);border:9px solid #83d4ff23;border-radius:50%;box-shadow:0 0 0 1px #85dbfc7f,inset 0 0 55px #36afff12,0 0 100px #009dec1b;background:radial-gradient(circle at 35% 28%,#ffffff12,transparent 42%),radial-gradient(circle at 65% 80%,#026b9f30,transparent 45%)}
.machine-halo:before,.machine-halo:after{content:'';position:absolute;inset:2%;border-radius:50%;border:1px solid #c8faff28;transform:rotate(-22deg) scaleX(.88)}
.machine-halo:after{transform:rotate(38deg) scaleX(.9);border-style:dashed;opacity:.4}
.machine-stand{position:absolute;left:50%;bottom:10%;transform:translateX(-50%);width:min(45%,34dvh);height:12%;border-radius:50% 50% 22% 22%;background:linear-gradient(180deg,#316a94,#0e3556 50%,#081e35);box-shadow:0 12px 25px #02091577,0 0 0 3px #79caff49}
.studio-ambient{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.studio-ambient span {position:absolute;width:2px;height:72%;top:-20%;background:linear-gradient(transparent,#5cbbff3b,transparent);filter:blur(3px);transform:rotate(23deg)}
.studio-ambient span:nth-child(1){left:12%}.studio-ambient span:nth-child(2){left:31%;transform:rotate(-24deg)}.studio-ambient span:nth-child(3){left:79%;transform:rotate(-26deg)}.studio-ambient span:nth-child(4){left:91%;transform:rotate(24deg)}
.machine-drag{top:54px;left:24px;color:#98c5d5}
.machine-instruction{top:auto;left:23px;bottom:22px;background:#092838cf;border:1px solid #6ac9c344;color:#abecdb}
.machine-watermark{bottom:20px;right:22px;opacity:.6}
.machine-outlet {display:none}
.broadcast-lower-third{position:absolute;z-index:5;pointer-events:none;left:50%;bottom:66px;transform:translateX(-50%);min-width:min(330px,75%);max-width:85%;padding:9px 15px;display:flex;align-items:center;justify-content:center;gap:10px;color:#e8f7ff;background:linear-gradient(110deg,#0d3a58d9,#113b55e8);box-shadow:0 4px 28px #0006;border:1px solid #6ca9cd55;border-radius:9px;backdrop-filter:blur(12px);white-space:nowrap}
.broadcast-lower-third strong{font-size:clamp(11px,1.2vw,15px);font-weight:850}.broadcast-lower-third small{font-size:9px;letter-spacing:1px;color:#a3d4e3}.air-led{width:7px;height:7px;flex:none;background:#37e9bf;border-radius:50%;box-shadow:0 0 9px #37e9bf}
.on-air .broadcast-lower-third{background:linear-gradient(105deg,#064c57eb,#087067ea);border-color:#5cefd066}.on-air .air-led{animation:livePulse .7s infinite}
.flash-burst{position:absolute;z-index:5;pointer-events:none;left:50%;top:48%;height:10px;width:10px;border-radius:50%;opacity:0;background:#fff;box-shadow:0 0 30px 30px #fff3}
.flash-burst.burst-on{animation:burst .58s ease-out both}@keyframes burst{0%{opacity:1;transform:scale(.1)}40%{opacity:.48;transform:scale(9)}100%{opacity:0;transform:scale(20)}}
.live-stamp{border-color:#4e848d;position:relative;transform:none;color:#abdecf}.live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#2ae6b5;box-shadow:0 0 12px #2ae6b5}
.draw-panel{background:linear-gradient(113deg,#102f40,#0b2234);border-color:#396174}
.draw-groups{display:flex;align-items:flex-start;justify-content:center;gap:clamp(8px,1.3vw,28px);width:100%;margin-top:9px}
.draw-groups>div{min-width:0}.draw-groups>div:first-child{flex:0 1 auto}
.draw-group-label{display:block;text-align:center;font-size:10px;color:#94b6c5;letter-spacing:1px;font-weight:800}
.draw-bonus-group{border-left:1px solid #447285aa;padding-left:clamp(8px,1.2vw,22px);min-width:0}
.draw-result{justify-content:center;flex-wrap:nowrap;min-height:clamp(61px,7dvh,95px);gap:clamp(4px,1vw,13px)}
.draw-result .ball,.draw-result .empty-ball{width:clamp(32px,3.5vw,62px);height:clamp(32px,3.5vw,62px);font-size:clamp(14px,1.5vw,23px)}
.draw-bonus-group .ball{box-shadow:inset -8px -12px 16px #00000035,inset 5px 6px 12px #ffffff90,0 0 0 4px #ffe68c55,0 7px 18px #0005}
.draw-timeline{display:flex;gap:6px;justify-content:center;margin:2px auto 12px;max-width:440px}
.draw-timeline span{flex:1;height:4px;border-radius:5px;background:#344d61;transition:background .4s,box-shadow .4s}
.draw-timeline span.lit{background:#29dbba;box-shadow:0 0 9px #18ddb977}.draw-timeline span.bonus-step.lit{background:#ffdc73;box-shadow:0 0 9px #ffdc7388}
.studio-presets{display:flex;align-items:center;justify-content:center;gap:11px;margin:4px 0 13px;color:#a2bdc7;font-size:11px;font-weight:700}
.broadcast-modes{display:flex;align-items:center;padding:3px;gap:3px;border:1px solid #3a5d6a;background:#0a1f2d;border-radius:9px}
.broadcast-modes button{background:transparent;color:#a3bfc8;border:0;border-radius:6px;padding:6px 12px;font-size:11px;font-weight:850}
.broadcast-modes button.selected{background:#1c756c;color:#fff}
.latest-bonus-key{margin:-10px 0 12px;color:#87aeb5;font-size:11px}.latest-bonus-key span{color:#fdc756;font-weight:900}
.replay-latest{display:block;width:100%;margin:15px 0 5px;padding:11px;border-radius:9px;border:1px solid #65d6c488;background:#0b5c59a6;color:#e1fff7;font-size:12px;font-weight:850;transition:transform .15s,background .15s}
.replay-latest:hover{background:#0d7970;transform:translateY(-2px)}
.replay-round{margin:11px 0 6px;width:100%;font-size:12px}
.bonus-heatmap{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:6px;padding-top:5px}
.bonus-frequency-item{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;border:1px solid var(--stroke);background:var(--surface2);border-radius:8px;padding:7px 2px;color:var(--secondary)}
.bonus-frequency-item .ball{width:29px;height:29px;font-size:12px}.bonus-frequency-item span:last-child{font-size:10px}
.gap-list{display:grid;grid-template-columns:1fr 1fr;gap:7px}.gap-entry{display:flex;align-items:center;gap:8px;border-radius:9px;border:1px solid var(--stroke);padding:8px;background:var(--surface2)}.gap-entry>span:first-child{font-size:10px;color:var(--secondary);min-width:15px}.gap-entry .ball{width:30px;height:30px;font-size:12px}.gap-entry strong{font-size:12px;white-space:nowrap}
/* In the light theme only the studio remains a dramatic dark broadcast set. */
html[data-theme=light] .draw-panel{background:#fff;border-color:#c9d9de}html[data-theme=light] .draw-group-label{color:#486d79}html[data-theme=light] .draw-timeline span{background:#bed4d8}html[data-theme=light] .draw-timeline span.lit{background:#0fa79e}
html[data-theme=light] .studio-presets{color:#537b85}html[data-theme=light] .broadcast-modes{background:#eef6f6;border-color:#bad0d2}html[data-theme=light] .broadcast-modes button{color:#426672}html[data-theme=light] .broadcast-modes button.selected{background:#087c69;color:#fff}
html[data-theme=light] .latest-bonus-key{color:#66848d}html[data-theme=light] .replay-latest{background:#087c69;color:#fff;border-color:#087c69}html[data-theme=light] .replay-latest:hover{background:#04675c}
@media(min-width:1700px){.main-grid{grid-template-columns:minmax(0,1fr) clamp(370px,21vw,475px)}.machine-wrap{min-height:clamp(530px,58dvh,1000px)}}
@media(max-width:1100px){.machine-wrap{min-height:clamp(440px,52dvh,700px)}.draw-result .ball,.draw-result .empty-ball{width:clamp(29px,3.1vw,53px);height:clamp(29px,3.1vw,53px);font-size:clamp(13px,1.6vw,21px)}}
@media(max-width:800px){.machine-wrap{min-height:clamp(375px,49dvh,660px)}.draw-groups{justify-content:center}.draw-result .ball,.draw-result .empty-ball{width:clamp(36px,6vw,58px);height:clamp(36px,6vw,58px);font-size:clamp(15px,2.7vw,23px)}}
@media(max-width:600px){.main-grid{padding-top:18px}.stage-title-row h1{font-size:clamp(30px,7.5vw,42px);letter-spacing:-1.8px}.machine-wrap{min-height:clamp(340px,43dvh,490px)}.machine-top{top:14px;left:14px;right:14px;font-size:10px}.machine-drag{top:43px;left:14px;font-size:9px}.machine-watermark{display:none}.machine-instruction{bottom:12px;left:12px;font-size:9px;max-width:170px}.broadcast-lower-third{min-width:0;bottom:54px;width:max-content;max-width:94%;padding:8px 10px;gap:6px}.broadcast-lower-third strong{font-size:10px}.broadcast-lower-third small{font-size:8px}.machine-halo{width:min(90%,57dvh);top:47%}.draw-panel{padding:14px 10px}.draw-groups{gap:6px}.draw-group-label{font-size:9px}.draw-result{gap:4px;min-height:56px;padding:7px 0}.draw-result .ball,.draw-result .empty-ball{width:clamp(31px,9vw,42px);height:clamp(31px,9vw,42px);font-size:clamp(13px,3.6vw,17px)}.draw-bonus-group{padding-left:6px}.studio-presets{justify-content:space-between;gap:6px}.broadcast-modes button{font-size:10px;padding:6px 9px}.draw-timeline{max-width:300px}.bonus-heatmap{grid-template-columns:repeat(5,minmax(0,1fr))}.gap-list{grid-template-columns:1fr 1fr}.gap-entry{gap:4px;padding:6px}.gap-entry strong{font-size:10px}.gap-entry .ball{width:25px;height:25px;font-size:10px}.replay-latest{font-size:12px}}
@media(max-width:350px){.draw-result .ball,.draw-result .empty-ball{width:29px;height:29px;font-size:12px}.draw-controls{gap:4px}.draw-controls .primary-button,.draw-controls .outline-button{font-size:10px;padding:8px 7px}}

html{scroll-padding-bottom:115px}.draw-controls{scroll-margin-bottom:125px}

/* v0.4: motion-graphics program cues + analytics commentary. */
.broadcast-curtain{position:absolute;z-index:8;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;background:radial-gradient(circle at 50% 37%,#17738cbf,#021c30f5 65%);opacity:0;visibility:hidden;transform:scale(1.06);transition:opacity .28s,transform .28s,visibility .28s;pointer-events:none;color:white;text-align:center;padding:20px}
.broadcast-curtain.curtain-on{opacity:1;visibility:visible;transform:scale(1)}
.curtain-logo{font-size:12px;letter-spacing:.32em;font-weight:900;color:#b7fff0}.curtain-logo span{font-size:10px;color:#73b0c7;letter-spacing:.18em}
.broadcast-curtain strong{font-size:clamp(35px,5.8vw,78px);font-weight:950;letter-spacing:-.055em;line-height:1.1;text-shadow:0 0 25px #22e9c077}
.broadcast-curtain p{font-size:clamp(11px,1.5vw,17px);color:#d4edee;margin:0}.curtain-countdown{font-size:clamp(38px,6.3vw,90px);font-weight:950;color:#ffdd75;font-variant-numeric:tabular-nums;line-height:1.2;filter:drop-shadow(0 0 15px #ffe07f5b);animation:countPulse .55s infinite alternate}
@keyframes countPulse{to{transform:scale(1.12);opacity:.82}}
.broadcast-narrative{border:1px solid #407287;background:linear-gradient(115deg,#081d2e,#124357);border-radius:12px;padding:13px 16px;margin-top:14px;color:#eaffff;box-shadow:inset 0 1px 0 #ffffff1a}
.narrative-head{display:flex;align-items:center;gap:8px;color:#aefbdc;font-size:11px;letter-spacing:.035em}.narrative-led{width:6px;height:6px;background:#2fe8ba;box-shadow:0 0 12px #2fe8ba;border-radius:50%}.narrative-head strong{flex:1}.narrative-head #narrativePhase{color:#8cbdcc;font-size:10px;font-variant-numeric:tabular-nums}.broadcast-narrative p{font-size:clamp(15px,1.6vw,21px);font-weight:850;margin:9px 0;color:#fff;line-height:1.4}.narrative-stats{display:flex;flex-wrap:wrap;gap:8px}.narrative-stats span{font-size:11px;color:#c1e8ec;padding:5px 9px;border:1px solid #50869b;background:#19445a;border-radius:7px;font-variant-numeric:tabular-nums}
html[data-theme=light] .broadcast-narrative{background:#e9f6f5;border-color:#bbd8d3}html[data-theme=light] .broadcast-narrative p{color:#10454a}html[data-theme=light] .narrative-head{color:#096e63}html[data-theme=light] .narrative-stats span{background:#f7fcfb;color:#265765;border-color:#c9dfdf}html[data-theme=light] .narrative-head #narrativePhase{color:#567e84}
@media(max-width:600px){.broadcast-narrative{margin-top:9px;padding:10px 12px}.broadcast-narrative p{font-size:15px}.narrative-stats span{font-size:10px;padding:4px 6px}}
@media(prefers-reduced-motion:reduce){.broadcast-curtain,.curtain-countdown{transition:none;animation:none}}

/* v0.4.1 viewport-matched drum halo: keep the attention on the actual 3D machine */
@media(min-width:801px){.machine-halo{width:min(48%,65dvh);top:46%}}