/* Musical Housie — public hall LED, Bollywood night.
   Ported from archive/v1 led-bollywood.css. Anonymous, iframe-safe.
   The stage is letterboxed 16:9 (or settings.stage) and scaled by JS;
   1rem = 1% of stage width, so every size below scales with the screen. */
@font-face{font-family:HousieFilmy;src:url(/assets/fonts/YatraOne-Regular.ttf) format("truetype");unicode-range:U+0900-097F,U+1CD0-1CFF,U+A8E0-A8FF,U+200C-200D,U+25CC;font-display:swap}
@font-face{font-family:HousieFilmy;src:url(/assets/fonts/TiroDevanagariHindi-Regular.ttf) format("truetype");unicode-range:U+0000-08FF,U+0980-1CCF,U+1D00-200B,U+200E-25CB,U+25CD-A8DF,U+A900-FFFF;font-display:swap}
@font-face{font-family:HousieHindi;src:url(/assets/fonts/NotoSansDevanagari.ttf) format("truetype");font-display:swap}

html,body{margin:0;height:100%;background:#000;overflow:hidden}
[hidden]{display:none!important}

#stage{--night:#170208;--gold:#f3b53b;--ivory:#fff0cf;--soft:#e9c99a;--accent:var(--gold);--accent-ink:#3a0512;
--metal:linear-gradient(180deg,#fff6d2 0%,#ffd66e 38%,#e09a22 62%,#fbe3a0 100%);
--bulb:1.98rem;--curtain:6.25rem;
position:fixed;left:50%;top:50%;transform-origin:center;overflow:hidden;isolation:isolate;
font:400 1rem/1.4 HousieFilmy,HousieHindi,serif;color:var(--ivory);
background:radial-gradient(ellipse 70% 55% at 50% 42%,#6d0f27 0%,transparent 72%),radial-gradient(ellipse 120% 60% at 50% 120%,#2c0410,transparent 70%),var(--night)}
#stage.accent-ruby{--accent:#ff5d7d;--accent-ink:#2a0410}
#stage.accent-emerald{--accent:#4fd6a0;--accent-ink:#052419}
#stage[data-scene="blank"]{background:#000}
#stage[data-scene="blank"] .decor,#stage[data-scene="blank"] #scene{display:none}

/* ---- Decor: velvet curtains, sweeping spotlights, marquee bulbs ---- */
.decor{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.decor::before,.decor::after{content:"";position:absolute;top:0;bottom:0;width:var(--curtain);opacity:.85;
background:linear-gradient(90deg,transparent,var(--night) 92%),repeating-linear-gradient(90deg,#3d0613 0 8px,#6e0e26 14px,#8e1834 18px,#5a0a1e 24px,#3d0613 30px)}
.decor::before{left:0;transform:scaleX(-1)}
.decor::after{right:0}
.spot{position:absolute;top:-12%;width:40rem;height:125%;transform-origin:50% 0;mix-blend-mode:screen;filter:blur(28px);opacity:.38;
background:linear-gradient(to bottom,rgba(255,232,170,.5),rgba(255,220,150,.12) 50%,transparent 88%);
clip-path:polygon(44% 0,56% 0,100% 100%,0 100%)}
.spot:first-child{left:2rem;animation:sweep-l 16s ease-in-out infinite alternate}
.spot:nth-child(2){right:2rem;animation:sweep-r 19s ease-in-out infinite alternate}
@keyframes sweep-l{from{transform:rotate(-38deg)}to{transform:rotate(-8deg)}}
@keyframes sweep-r{from{transform:rotate(36deg)}to{transform:rotate(6deg)}}
.bulbs{--dot:radial-gradient(circle,#fffbe8 0 14%,#ffd877 24%,rgba(243,181,59,.45) 40%,transparent 64%);
position:absolute;z-index:1;inset:.5rem;
background:var(--dot) 0 0/calc(var(--bulb)*2) var(--bulb) repeat-x,var(--dot) 0 100%/calc(var(--bulb)*2) var(--bulb) repeat-x,
var(--dot) 0 0/var(--bulb) calc(var(--bulb)*2) repeat-y,var(--dot) 100% 0/var(--bulb) calc(var(--bulb)*2) repeat-y;
animation:chase 1.3s steps(1) infinite}
.bulbs.alt{background-position:var(--bulb) 0,var(--bulb) 100%,0 var(--bulb),100% var(--bulb);animation-delay:-.65s}
.bulbs.alt::after{content:"";position:absolute;inset:calc(var(--bulb)*.7);border:1px solid rgba(243,181,59,.38);border-radius:6px;box-shadow:inset 0 0 60px rgba(0,0,0,.45)}
@keyframes chase{0%{opacity:1}50%{opacity:.22}}

/* ---- Stage and shared type ---- */
#scene{position:absolute;inset:calc(var(--bulb)*1.6) calc(var(--curtain) + .73rem);z-index:1;display:grid}
.scene{width:100%;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1rem;box-sizing:border-box;animation:fadein .6s ease}
@keyframes fadein{from{opacity:0}}
.pair span{display:block}
.pair span + span{font-size:.48em;line-height:1.3;margin-top:.25em;opacity:.86}
.onair{animation:onair 1.4s ease-in-out infinite alternate}
@keyframes onair{to{opacity:.3}}
.reel{width:3rem;height:auto;fill:none;stroke:var(--gold);stroke-width:3;animation:reel 6s linear infinite}
.reel .hole{fill:rgba(243,181,59,.16)}
.reel .hub{fill:var(--gold)}
@keyframes reel{to{transform:rotate(360deg)}}

/* The marquee sign: a lit plate above a clue. */
.sign{position:relative;display:inline-block;margin:0 auto 1.5rem;padding:.35em 1.3em .45em;font-size:2.6rem;line-height:1.15;color:var(--accent-ink);background:var(--metal);border-radius:10px;
box-shadow:0 0 0 3px var(--night),0 0 0 5px var(--gold),0 0 46px rgba(243,181,59,.45)}
#stage.accent-ruby .sign,#stage.accent-emerald .sign{background:var(--accent)}
.sign .pair span + span{color:inherit;font-size:.56em;opacity:.8}

/* ---- Board: called songs as cinema ticket stubs + prize strip ---- */
.board-title{margin:0 0 1.5rem;font-weight:400;font-size:4.17rem;line-height:1.1;color:var(--gold);text-shadow:0 0 30px rgba(243,181,59,.35)}
.s-board .audio{margin:2rem 0 0}
.s-board .audio .reel{width:5rem}
.stubs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:.9rem;max-width:78rem;flex:0 1 auto;min-height:0;overflow:hidden}
.b-m .stubs{--cols:5}
.b-l .stubs{--cols:6}
.b-xl .stubs{--cols:7;gap:.4rem}
.stub{--notch:.5rem;position:relative;display:flex;flex-direction:column;justify-content:center;min-height:2.6em;padding:.5em .9em .55em 1.3em;text-align:left;background:linear-gradient(135deg,#5c0b20,#3c0614);border:1px solid rgba(243,181,59,.55);border-radius:6px;font-size:1.35rem;
-webkit-mask:radial-gradient(circle at 0 50%,transparent var(--notch),#000 0) left/51% 100% no-repeat,radial-gradient(circle at 100% 50%,transparent var(--notch),#000 0) right/51% 100% no-repeat;
mask:radial-gradient(circle at 0 50%,transparent var(--notch),#000 0) left/51% 100% no-repeat,radial-gradient(circle at 100% 50%,transparent var(--notch),#000 0) right/51% 100% no-repeat}
.stub::before{content:"";position:absolute;left:calc(var(--notch) + 4px);top:18%;bottom:18%;border-left:2px dotted rgba(243,181,59,.5)}
.stub b{font-weight:400;font-size:1.12em;line-height:1.25;color:var(--gold);overflow-wrap:anywhere}
.stub span{font-weight:500;font-size:.72em;line-height:1.3;font-family:system-ui,HousieHindi,sans-serif;color:var(--ivory);opacity:.85;overflow-wrap:anywhere}
.stub b:only-child,.stub span:only-child{font-size:1.12em;opacity:1}
.stub span:only-child{font-family:HousieFilmy,serif;color:var(--gold)}
.b-l .stub{font-size:1.15rem}
.b-xl .stub{font-size:1.09rem;padding:.4em .6em .45em 1.15em}
.stub.latest{background:var(--metal);border-color:#fff3c4;box-shadow:0 0 36px rgba(243,181,59,.55);animation:latest 2.4s ease-in-out infinite alternate}
#stage.accent-ruby .stub.latest,#stage.accent-emerald .stub.latest{background:var(--accent)}
.stub.latest b,.stub.latest span{color:var(--accent-ink)}
.stub.latest::before{border-color:rgba(58,5,18,.45)}
@keyframes latest{to{box-shadow:0 0 12px rgba(243,181,59,.25)}}
.strip{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem .8rem;margin-top:1.2rem;max-width:80rem;font-family:system-ui,HousieHindi,sans-serif;font-size:.9rem}
.pz{display:inline-flex;align-items:center;gap:.45em;padding:.25em .8em;border:1px solid rgba(243,181,59,.3);border-radius:99px;color:var(--soft);background:rgba(23,2,8,.5)}
.pz i{flex:none;width:.55em;height:.55em;border-radius:50%;background:#6b5a4a}
.pz.open i,.pz.drawing i{background:var(--accent);box-shadow:0 0 8px var(--accent)}
.pz.open i,.pz.drawing i,.live::before{animation:onair 1.4s ease-in-out infinite alternate}
.pz.closed i{background:var(--gold)}
.pz.waiting{opacity:.55}
.pz b{color:var(--ivory);font-weight:700}

/* ---- Clue ---- */
.clue-label{margin:1.2rem 0 0;font-weight:400;font-size:5.42rem;line-height:1.12;color:var(--gold);text-shadow:0 0 36px rgba(243,181,59,.3)}
.s-clue.has-media .clue-label{font-size:3.8rem}
.clue-text{position:relative;max-width:34ch;margin:1.6rem auto 0;padding:0 1.2em;font-weight:400;font-size:3.44rem;line-height:1.35;color:var(--ivory);white-space:pre-line;overflow-wrap:anywhere}
.clue-text::before,.clue-text::after{position:absolute;font-size:2.2em;line-height:1;color:var(--gold);opacity:.55}
.clue-text::before{content:"\201C";left:-.1em;top:-.25em}
.clue-text::after{content:"\201D";right:-.1em;bottom:-.7em}
.s-clue.has-media .clue-text{font-size:2.4rem;margin-top:.7rem}

/* ---- Media: cinema screen frame, audio reels ---- */
.frame{position:relative;width:min(100%,46rem);margin:1.2rem auto 0;padding:6px;background:#000;border-radius:8px;
box-shadow:0 0 0 2px var(--gold),0 0 0 8px var(--night),0 0 0 9px rgba(243,181,59,.45),0 20px 70px rgba(0,0,0,.6),0 0 90px rgba(243,181,59,.2)}
.frame video,.frame img{display:block;width:100%;max-height:26rem;aspect-ratio:16/9;object-fit:contain;background:#000;border-radius:4px}
.frame.is-image{width:fit-content;max-width:100%}
.frame.is-image img{width:auto;max-width:100%;aspect-ratio:auto}
.audio{display:flex;justify-content:center;gap:2rem;margin:1.5rem auto 0}
.audio .reel{width:6rem}
.audio .reel + .reel{animation-duration:4.5s}

/* ---- Answer: the reveal ---- */
.s-answer.has-media{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:center;gap:3rem;text-align:left}
.s-answer.has-media .frame,.s-answer.has-media .audio{margin:0;width:100%}
.s-answer.has-media .frame video{max-height:34rem}
.answer-text{display:flex;flex-direction:column;align-items:center;min-width:0}
.kicker{margin:0 0 .2em;font-size:2rem;color:var(--soft)}
.answer-title{margin:0;font-weight:400;font-size:7.81rem;line-height:1.12;overflow-wrap:anywhere;
background:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent;
filter:drop-shadow(0 4px 0 #5a0a1e) drop-shadow(0 0 28px rgba(243,181,59,.4));
animation:reveal 1.1s cubic-bezier(.2,.9,.25,1.15) both}
@keyframes reveal{from{opacity:0;transform:scale(.82);letter-spacing:.08em}}
.answer-en{margin:.25em 0 0;font-size:3.02rem;color:var(--ivory)}
.credits{display:flex;flex-wrap:wrap;justify-content:center;gap:.35em 1.4em;margin:1.4rem 0 0;font-size:1.67rem;color:var(--soft)}
.credits span + span::before{content:"";display:inline-block;width:.38em;height:.38em;margin:0 .9em .12em 0;background:var(--gold);transform:rotate(45deg)}
.live{display:inline-flex;align-items:center;gap:.6em;margin-top:1.4rem;padding:.5em 1.2em;border:2px solid var(--accent);border-radius:999px;font-size:1.56rem;color:var(--ivory);background:rgba(23,2,8,.55)}
.live::before{content:"";flex:none;width:.6em;height:.6em;border-radius:50%;background:var(--accent);box-shadow:0 0 14px var(--accent)}

/* ---- Screens ---- */
.screen-title{margin:0;font-weight:400;font-size:7.29rem;line-height:1.1;overflow-wrap:anywhere;
background:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent;
filter:drop-shadow(0 4px 0 #5a0a1e) drop-shadow(0 0 30px rgba(243,181,59,.35))}
.screen-title span + span{-webkit-text-fill-color:var(--ivory)}
.s-screen.welcome .screen-title,.s-screen.thanks .screen-title{font-size:8.33rem}
.s-screen.has-media .screen-title{font-size:4.7rem}
.lines{margin:1.6rem 0 0;max-width:67rem}
.lines p{margin:.35em 0;font-size:2.08rem;line-height:1.4;color:var(--ivory)}
.lines p:first-child{color:var(--gold);font-size:2.5rem}
.plist{list-style:none;margin:2rem 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem 1rem;text-align:left;max-width:75rem}
.plist li{display:flex;justify-content:space-between;align-items:baseline;gap:1em;padding:.45em .8em;border-left:3px solid var(--gold);background:linear-gradient(90deg,rgba(134,19,49,.55),transparent);font-size:1.56rem;line-height:1.3;color:var(--gold)}
.plist em{font-style:normal;font-family:system-ui,HousieHindi,sans-serif;font-size:.62em;color:var(--ivory);opacity:.9;text-align:right}
.plist .st.waiting{opacity:.5}

/* ---- Lottery: spinning serials, then the winner ---- */
.tiles{display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem;margin-top:2rem;max-width:72rem}
.tile{padding:.4em .9em;border:1px solid rgba(243,181,59,.55);border-radius:6px;background:linear-gradient(135deg,#5c0b20,#3c0614);font-family:system-ui,HousieHindi,sans-serif;font-weight:700;font-size:1.8rem;color:var(--ivory)}
.winner{position:relative;z-index:1;margin-top:2rem;padding:.35em 1.2em;background:var(--metal);color:var(--accent-ink);border-radius:12px;
font-family:system-ui,HousieHindi,sans-serif;font-weight:800;font-size:8rem;line-height:1.15;
box-shadow:0 0 0 4px var(--night),0 0 0 7px var(--gold),0 0 60px rgba(243,181,59,.55);
animation:reveal 1.1s cubic-bezier(.2,.9,.25,1.15) both}
.confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.confetti i{position:absolute;top:-6%;width:.7rem;height:1.5rem;background:var(--gold);opacity:0;animation:fall 3s linear infinite}
.confetti i:nth-child(odd){background:var(--accent)}
.confetti i:nth-child(3n){background:#fff0cf}
@keyframes fall{from{top:-6%;opacity:1}55%{opacity:1}to{top:106%;opacity:.9;transform:rotate(560deg)}}

/* ---- Chips: sound arm hint, connection lost ---- */
#soundchip,#offline{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:9;padding:10px 18px;border:1px solid rgba(243,181,59,.6);border-radius:999px;background:rgba(23,2,8,.9);color:#fff0cf;font:600 15px/1.2 system-ui,HousieHindi,sans-serif}
#soundchip{cursor:pointer}
#offline{border-color:#a3241b;color:#ffd9d5;pointer-events:none}

@media (prefers-reduced-motion:reduce){#stage *,#stage *::before,#stage *::after{animation:none!important}}