/* Antakshari Live - main styles */
:root{--ink:#2a1238;--card:#fff8ee;--acc:#e8347a;--acc2:#0e9f8e;--gold:#ffc83d;--mute:#7b6688;--ring:#f0d8bd;--bub:#fff;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box}html{scroll-padding-top:env(safe-area-inset-top,0px);background:#2a0f4d}
body{display:flex;flex-direction:column;margin:0;min-height:100vh;color:#fff;font-family:"Gayathri","Noto Sans Malayalam","Manjari",system-ui,sans-serif;font-weight:500;line-height:1.5;
background:radial-gradient(90% 55% at 8% 0%,#ff7b54 0,transparent 62%),radial-gradient(80% 55% at 100% 12%,#7b5cff 0,transparent 62%),radial-gradient(70% 45% at 50% 100%,#00b8a9 0,transparent 62%),#2a0f4d;background-attachment:fixed}
main{width:100%;box-sizing:border-box;flex:1 0 auto;max-width:640px;margin:0 auto;padding:12px 14px 16px}
h1{margin:6px 0 0;text-align:center;font-size:clamp(2.4rem,11vw,4.4rem);font-weight:800;line-height:1.25}
h1 span{display:inline-block;color:var(--c);transform:rotate(var(--r));text-shadow:1px 1px 0 var(--x),2px 2px 0 var(--x),3px 3px 0 var(--x),4px 4px 0 var(--x),6px 9px 14px rgba(0,0,0,.4);margin:0 .02em}
h1 span.live{font-size:.26em;color:#ff2d4d;transform:none;text-shadow:none;margin-left:.25em;font-weight:800;letter-spacing:.02em}
.sub{color:#ffeaf5;margin:0 0 10px;text-align:center}
.panel{background:var(--card);color:var(--ink);border-radius:20px;padding:14px;margin-top:8px;box-shadow:0 10px 28px rgba(20,0,50,.35)}
.panel .sub{color:var(--mute);text-align:left}
.row{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0;align-items:center}
button,input{font:inherit;color:inherit}
.chip{border:2px solid var(--ring);background:var(--card);color:var(--ink);border-radius:99px;padding:3px 14px;cursor:pointer}
.chip[aria-pressed=true]{border-color:var(--acc);background:var(--acc);color:#fff}
.chip:disabled{opacity:.7;cursor:default}
.big{background:linear-gradient(135deg,#14bfa9,#0d8c7d);color:#fff;border:0;border-radius:14px;padding:6px 20px;font-weight:800;font-size:1.05rem;cursor:pointer;box-shadow:0 3px 0 rgba(0,0,0,.18)}
.big.alt{background:linear-gradient(135deg,#ff5a9a,#d92a6d)}
.chip.red{background:#e53935;border-color:#e53935;color:#fff}
#startMsg:empty{display:none}
#chatLog{max-height:150px;overflow-y:auto;font-size:.9rem;margin-bottom:8px}
#chatLog p{margin:2px 0;word-break:break-word}#chatLog b{color:var(--acc)}
#rfFill{height:100%;transition:width .5s linear,background .3s}
.rfL{display:inline-grid;place-items:center;min-width:2em;height:2em;padding:0 6px;border-radius:10px;background:var(--acc);color:#fff;font-size:1.3rem;font-weight:800}
#stage{isolation:isolate}
.subrow{display:flex;justify-content:space-between;align-items:center;margin:0 0 6px;min-height:48px}
.subrow h2{margin:0;text-align:center}
.acctslot{justify-self:end}
.acctslot .big{padding:4px 10px;font-size:.85rem}
.avbtn{width:46px;height:46px;border-radius:50%;padding:2px;border:2px solid var(--gold);background:var(--card);cursor:pointer;display:grid;place-items:center;color:var(--ink)}
.avbtn img,.avbtn .ini{width:100%;height:100%;border-radius:50%;object-fit:cover;background:#ffeacb;display:grid;place-items:center;font-weight:800}
.tabsq{display:flex;gap:6px;margin-bottom:10px}
.tabsq button{flex:1 1 0;max-width:74px;aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:2px solid var(--ring);background:var(--card);color:var(--ink);border-radius:12px;font-size:.62rem;line-height:1.1;padding:2px;cursor:pointer}
.tabsq i{font-style:normal;font-size:1.25rem}
.tabsq button[aria-pressed=true]{background:var(--acc);border-color:var(--acc);color:#fff}
h1 .lv::before{content:"";display:inline-block;width:.22em;height:.22em;border-radius:50%;background:#ff3b3b;margin-right:.18em;vertical-align:.35em;animation:lv 1.4s ease-in-out infinite}
@keyframes lv{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){h1 .lv::before{animation:none}}
.sheetwrap{position:fixed;inset:0;z-index:900;background:rgba(20,5,45,.65);overflow-y:auto;padding:16px}
.sheet{max-width:560px;margin:20px auto}
.big.ghost{background:var(--card);color:var(--ink);border:2px solid var(--ring);box-shadow:none}
button:focus-visible,input:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
input{border:2px solid var(--ring);border-radius:12px;padding:5px 12px;background:#fff;color:var(--ink);min-width:0}
#stage{position:relative;width:100%;max-width:680px;aspect-ratio:10/8;margin:8px auto;border-radius:18px;overflow:hidden;box-shadow:0 0 0 4px rgba(255,200,61,.55),0 14px 40px rgba(0,0,0,.45)}
.s-camp{background:linear-gradient(#0b0a2a 0,#2b1457 18%,#4b2a7a 26%,#1f4a33 26.1%,#10281b 100%)}
.s-room{background:linear-gradient(#ecd9b8 0 27%,#b98a54 27.1% 100%)}
.bgsvg{position:absolute;inset:0;width:100%;height:100%}
.gnd{position:absolute;left:3%;top:24%;width:94%;height:68%;border-radius:50%;border:5px solid;box-sizing:border-box}
.s-camp .gnd{background:radial-gradient(ellipse at 50% 50%,#4d9150 0,#2f6e49 55%,#215239 100%);border-color:#9c7a4d;box-shadow:0 10px 0 #4a3520,0 20px 26px rgba(0,0,0,.6)}
.s-camp .gnd::after{content:'';position:absolute;inset:0;border-radius:50%;background:radial-gradient(ellipse 45% 42% at 50% 52%,rgba(255,170,60,.55),rgba(255,120,30,.15) 60%,transparent 80%);animation:cgl 1.3s ease-in-out infinite alternate;pointer-events:none;z-index:1}
.s-party .gnd{background:radial-gradient(ellipse,#ff4fa3 0,#7a2fb0 40%,#2d1b69 100%);border-color:#ffd54a;box-shadow:0 10px 0 #1a0f40,0 20px 26px rgba(0,0,0,.6)}
.s-room .gnd{background:radial-gradient(ellipse,#e6b87a 0,#c97a4a 45%,#8a3a3a 100%);border-color:#5a2a1a;box-shadow:0 10px 0 #3a1a10,0 20px 26px rgba(0,0,0,.5)}
.s-hill{background:linear-gradient(#2f64b0 0,#7fb8e8 14%,#ffd9a0 27%,#5a9a48 27.1%,#2f6a30 100%)}
.s-hill .gnd{background:radial-gradient(ellipse,#8fd05f 0,#58a248 55%,#3c7c36 100%);border-color:#9a9fa4;box-shadow:0 10px 0 #5f656b,0 20px 26px rgba(0,0,0,.5)}
.s-park{background:linear-gradient(#5fb4ff 0,#bfe6ff 24%,#58b84a 27.1%,#2f8a3a 100%)}
.s-park .gnd{background:radial-gradient(ellipse,#8fdc6a 0,#5cbb4b 55%,#3d9a3c 100%);border-color:#d8c8a0;box-shadow:0 10px 0 #8a7a50,0 20px 26px rgba(0,0,0,.5)}
.s-beach{background:linear-gradient(#4aa8f0 0,#bfe8ff 16%,#38b0d0 16.1%,#1a8fb8 27%,#f0d9a0 27.1%,#e0c080 100%)}
.s-beach .gnd{background:radial-gradient(ellipse,#fbe8b0 0,#f0d090 55%,#d8b070 100%);border-color:#c9a060;box-shadow:0 10px 0 #a07840,0 20px 26px rgba(0,0,0,.5)}
.s-resort{background:linear-gradient(#1a1040 0,#5a2a78 14%,#e8708a 27%,#2a1a30 27.1%,#1a1020 100%)}
.s-resort .gnd{background:repeating-linear-gradient(90deg,#8a5a34 0 14px,#7a4a2a 14px 16px);border-color:#5a3a20;box-shadow:0 10px 0 #3a2210,0 20px 26px rgba(0,0,0,.5)}
.s-river{background:linear-gradient(#9ad8f0 0,#f6efc4 15%,#2f8a60 23.5%,#2a9bb0 23.6%,#1b6a80 100%)}
.s-river .gnd{background:repeating-linear-gradient(90deg,#c9a066 0 12px,#b08850 12px 14px);border-color:#6a4a2a;box-shadow:0 10px 0 #4a3018,0 20px 26px rgba(0,0,0,.5)}
.s-tea{background:linear-gradient(#a8d8f0 0,#e8f4e0 22%,#4a9a4a 27.1%,#2f6a35 100%)}
.s-tea .gnd{background:radial-gradient(ellipse,#7fcf6a 0,#4a9a4a 55%,#357a3a 100%);border-color:#7a5a3a;box-shadow:0 10px 0 #4a3820,0 20px 26px rgba(0,0,0,.5)}
.s-party{background:radial-gradient(ellipse at 50% 30%,#5a2a8a,#1b0f3d 75%)}
.midsvg{position:absolute;left:50%;top:50%;width:21%;transform:translate(-50%,-70%);z-index:52;overflow:visible}
.s-resort .midsvg{width:40%;transform:translate(-50%,-50%);z-index:1}
.s-party .midsvg{transform:translate(-50%,-80%)}
.zc{animation:zcd 70s linear infinite}
.zs{transform-box:fill-box;transform-origin:50% 100%;animation:zsw 4s ease-in-out infinite alternate}
.zw{animation:zwv 4s linear infinite}
.zp{animation:zpl 3s ease-in-out infinite}
.zt{animation:ztw 2.4s ease-in-out infinite}
.zb{animation:zbb 3s ease-in-out infinite}
.zf{transform-box:fill-box;transform-origin:0% 50%;animation:zfl .9s ease-in-out infinite}
.zm{animation:zst 2.4s ease-out infinite}
.zd{stroke-dasharray:3 3;animation:zds .8s linear infinite}
.zr{transform-box:view-box;transform-origin:50px 0;animation:zbm 4s ease-in-out infinite alternate}
.zsp{transform-box:fill-box;transform-origin:50% 50%;animation:zsp 6s linear infinite}
@keyframes zcd{from{transform:translateX(-70px)}to{transform:translateX(130px)}}
@keyframes zsw{from{transform:rotate(-1.8deg)}to{transform:rotate(1.8deg)}}
@keyframes zwv{to{transform:translateX(-20px)}}
@keyframes zpl{50%{opacity:.55}}
@keyframes ztw{50%{opacity:.25}}
@keyframes zbb{50%{transform:translateY(-1.6px)}}
@keyframes zfl{50%{transform:skewY(7deg) scaleX(.93)}}
@keyframes zst{0%{transform:translateY(0);opacity:.7}100%{transform:translateY(-14px);opacity:0}}
@keyframes zds{to{stroke-dashoffset:-12}}
@keyframes zbm{from{transform:rotate(-24deg)}to{transform:rotate(24deg)}}
@keyframes zsp{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.zc,.zs,.zw,.zp,.zt,.zb,.zf,.zm,.zd,.zr,.zsp{animation:none}}
.foot{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:auto;padding:24px 14px calc(14px + env(safe-area-inset-bottom,0px));text-align:center}
.linkbtn{background:none;border:0;color:#fff;font-weight:800;font-size:1rem;cursor:pointer}
.foot small{color:#ffeaf5;opacity:.85}
@keyframes cgl{to{opacity:.65}}
.firesvg{position:absolute;left:50%;top:50%;width:21%;transform:translate(-50%,-70%);z-index:52;overflow:visible}
.cfl{transform-box:fill-box;transform-origin:50% 100%;animation:cfk .5s ease-in-out infinite alternate}
.cfl2{animation-duration:.37s}.cfl3{animation-duration:.29s}
@keyframes cfk{from{transform:scale(1,1) skewX(-2deg)}to{transform:scale(.92,1.12) skewX(3deg)}}
.cspark{animation:crise 1.8s linear infinite;opacity:0}
@keyframes crise{0%{transform:translateY(0);opacity:1}100%{transform:translateY(-38px);opacity:0}}
.ctr{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:clamp(2rem,9vw,3.4rem);z-index:52}
.pill{position:absolute;left:50%;top:2.5%;transform:translateX(-50%);z-index:600;background:rgba(0,0,0,.4);color:#fff;border-radius:99px;padding:2px 14px;font-size:.9rem;white-space:nowrap;text-shadow:0 1px 3px #000a}
.seat .s-win{animation:chop .7s ease-in-out infinite}
.seat .fx{animation:cbl 1s ease-in-out infinite}
@keyframes cpop{from{transform:scale(.9)}to{transform:scale(1)}}
.seat .s-up,.seat .s-down{animation:cpop .35s ease-out}
@keyframes chop{50%{transform:translateY(-4px)}}
@keyframes cbl{50%{opacity:.2}}
@media (prefers-reduced-motion:reduce){.cfl,.cspark,.s-camp .gnd::after,.seat .s-win,.seat .fx{animation:none}}
.seat{position:absolute;transform:translate(-50%,-86%);text-align:center;transition:opacity .3s,filter .3s}
.seat::before{content:"";position:absolute;left:8%;right:8%;bottom:12px;height:12%;background:radial-gradient(ellipse,rgba(0,0,0,.5),transparent 70%);z-index:-1}
.seat svg{width:100%;height:auto;display:block;overflow:visible}
.seat.on svg{animation:bob .7s ease-in-out infinite alternate;filter:drop-shadow(0 0 8px var(--gold))}
.seat.out{opacity:.45;filter:grayscale(1)}
.seat.out svg{transform:translateY(6px) scale(.92)}
.nm{font-size:.8rem;color:#fff;text-shadow:0 1px 3px #000c;line-height:1.1;margin-top:-2px}
.bub{position:absolute;left:50%;bottom:98%;transform:translateX(-50%);background:var(--bub);color:var(--ink);border-radius:14px;padding:1px 10px;font-size:.78rem;white-space:nowrap;box-shadow:0 2px 8px #0005;z-index:400}
@keyframes bob{to{transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){.seat.on svg{animation:none}}
.need{font-size:1.15rem;margin:0 0 8px}
.need b{display:inline-grid;place-items:center;min-width:2em;height:2em;padding:0 6px;border-radius:10px;background:var(--acc);color:#fff;font-size:1.3rem;font-weight:800}
.bar{height:10px;border-radius:9px;background:var(--ring);overflow:hidden;margin-bottom:10px}
#fill{height:100%;width:100%;background:var(--acc2);transition:width .5s linear,background .3s}
#msg{min-height:1.3em;margin:6px 0 0;color:var(--mute)}
.code{font-size:1.8rem;font-weight:800;letter-spacing:.12em;background:#ffeacb;border-radius:12px;padding:0 14px}
.letters{display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:6px}
.letters button{border:2px solid var(--ring);background:#fff;border-radius:10px;padding:2px 0;font-weight:800;font-size:1.2rem;cursor:pointer}
.letters button:hover{background:var(--acc);color:#fff}
ol{margin:8px 0 0;padding-left:1.3em;color:var(--mute);font-size:.9rem}
.fin{list-style:none;padding:0;margin:8px 0}.fin li{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:8px 10px;border-radius:12px;background:#fff;margin-bottom:6px}.fin li:first-child{background:linear-gradient(135deg,#fff3c4,#ffe08a);font-weight:800}.fin b{margin-left:auto;font-size:1.3rem}.bdg{font-size:.78rem;background:var(--card);border:1px solid var(--ring);border-radius:99px;padding:0 8px}.ttl{font-size:1.6rem;font-weight:800;text-align:center;margin:0}
.toast{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:998;max-width:480px;margin:0 auto;background:#fff;color:var(--ink);border-radius:16px;padding:10px 14px;box-shadow:0 8px 30px rgba(0,0,0,.45);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.info summary{cursor:pointer;font-weight:800;font-size:1.05rem}
.info ol,.info ul{color:var(--ink);font-size:.95rem;margin:8px 0 0}
.info li{margin-bottom:4px}
[hidden]{display:none!important}