*{box-sizing:border-box;margin:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;background:#120a06;overflow:hidden;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
#stage{position:absolute;left:50%;top:50%;width:min(100vw,calc(100vh*9/16));width:min(100vw,calc(100dvh*9/16));aspect-ratio:9/16;transform:translate(-50%,-50%);container-type:size;overflow:hidden;background:#5a1f12;color:#fff}
#stage>*{font-size:3.6cqw}
#bg{position:absolute;inset:0;background:url(img/temple-photo.webp) center/100% 100% no-repeat,#2a0d08}
/* carpet fallback only visible if svg missing is acceptable; svg draws it */
#top{position:absolute;top:2cqw;right:2cqw;z-index:5}
#top{display:flex;flex-direction:column;align-items:flex-end;gap:1cqw}
#lb{display:flex;gap:1.5cqw;cursor:pointer;background:rgba(30,8,4,.85);border:1.5px solid #e9b24a;border-radius:4cqw;padding:.8cqw 1.2cqw;box-shadow:0 0 2.5cqw rgba(233,178,74,.45)}
#lb span{display:flex;align-items:center;gap:.8cqw;padding:.3cqw 1.6cqw .3cqw .8cqw;border-radius:3cqw;background:color-mix(in srgb,var(--c) 28%,transparent);border:1px solid var(--c)}
#lb span[data-t=incense]{--c:#ffb02e}#lb span[data-t=bow]{--c:#ffe14d}#lb span[data-t=lotus]{--c:#ff7fb0}
#lb img{width:3.6cqw;height:3.6cqw;filter:drop-shadow(0 0 .5cqw var(--c)) drop-shadow(0 0 .3cqw var(--c))}
#lb b,#onn{font-weight:800;font-size:3cqw;color:#fff;text-shadow:0 1px 2px #000,0 0 .8cqw rgba(0,0,0,.8)}
#opanel{width:34cqw;max-height:40cqw;overflow-y:auto;background:rgba(40,10,4,.92);border:1px solid #e9b24a;border-radius:2cqw;padding:1cqw 2cqw;font-size:2.4cqw;line-height:1.35;color:#fff}
#opanel[hidden]{display:none}
#opanel h4{font-size:2.5cqw;color:#ffd54a;margin-top:.8cqw;cursor:pointer}
#opanel p{color:#ffe9a8;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#opanel .e{opacity:.6;font-style:italic;cursor:default}
.av.blink img{animation:blink .6s ease-in-out infinite alternate}
@keyframes blink{from{filter:none}to{filter:drop-shadow(0 0 1.5cqw #ffd54a) brightness(1.6)}}
#seats{position:absolute;inset:0;z-index:2;pointer-events:none}
.av,.cu{position:absolute;left:0;top:0;width:6cqw;margin-left:-3cqw;transform-origin:50% 0}
.av{text-align:center;pointer-events:auto;transition:transform .7s ease;will-change:transform}
.cu{height:5.4cqw;opacity:.6;background:url(img/cushion.svg) center bottom/100% auto no-repeat;pointer-events:auto;cursor:pointer}
.cu[hidden]{display:none}
#clerics{position:absolute;inset:0;z-index:1;pointer-events:none}
.cl{position:absolute;top:50%;height:auto;margin-left:-5cqw;width:10cqw}
.cl.ab{left:50%;width:11cqw;margin-left:-5.5cqw;top:49.5%}
.cl.cd{left:36%;top:50.5%}
.cl.cl-lay{left:64%;width:9cqw;margin-left:-4.5cqw;top:50%}
.av img{display:block;width:4cqw;height:5.6cqw;margin:0 auto;object-fit:contain}
.av .n,.av .you{display:none}
.av .n{position:absolute;top:100%;left:50%;transform:translateX(-50%);font-size:1.8cqw;line-height:1.2;padding:0 1cqw;border-radius:1cqw;background:rgba(0,0,0,.55);color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:14cqw;z-index:3}
.av.show .n,.av.me .n,.av:hover .n{display:block}
.av.show,.av.me,.av:hover{z-index:40!important}
.av .r{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);font-size:1.4cqw;line-height:1.2;padding:0 1cqw;border-radius:1cqw;color:#fff;white-space:nowrap}
.av .r[hidden]{display:none}
.av .r.ho-phap{background:#c8102e}.av .r.thien-tin{background:#d98a00}
.av.me img{filter:drop-shadow(0 0 .8cqw #ffd54a) drop-shadow(0 0 1.6cqw #ffd54a)}
.av.me .you{display:block;position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:.3cqw;font-size:1.9cqw;font-weight:700;line-height:1.2;padding:0 1.2cqw;border-radius:1.5cqw;background:#ffd54a;color:#5a1f12;z-index:3}
.av.act img{animation:hop .6s}
@keyframes hop{40%{transform:translateY(-1.5cqw) scale(1.1)}}
.bub{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);width:max-content;max-width:22cqw;padding:.6cqw 1.4cqw;border-radius:2cqw;background:#fff;color:#222;font-size:2.2cqw;line-height:1.2;z-index:9;opacity:0;animation:bub 5s forwards;word-break:break-word}
@keyframes bub{0%{opacity:0;transform:translateX(-50%) translateY(2cqw)}8%,80%{opacity:1;transform:translateX(-50%)}100%{opacity:0}}
.fx{position:absolute;bottom:100%;left:50%;width:7cqw;height:7cqw;margin-left:-3.5cqw;z-index:8;animation:fx 1.4s forwards}
@keyframes fx{to{transform:translateY(-8cqw);opacity:0}}
#petals{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden}
.p{position:absolute;top:-5cqw;width:3cqw;height:3cqw;background:#f7a8c0 url(img/petal.svg) center/contain no-repeat;border-radius:50% 0;opacity:.8;animation:fall linear forwards;will-change:transform}
@keyframes fall{to{transform:translate(var(--dx),115cqh) rotate(540deg)}}
#toasts{position:absolute;top:19cqw;left:3cqw;z-index:7;display:flex;flex-direction:column;gap:1cqw;pointer-events:none}
.t{background:rgba(0,0,0,.55);color:#fff;font-size:3cqw;padding:1cqw 2.5cqw;border-radius:4cqw;max-width:60cqw;animation:tt 3.5s forwards}
@keyframes tt{0%{opacity:0;transform:translateX(-5cqw)}8%,85%{opacity:1;transform:none}100%{opacity:0}}
#bar{position:absolute;left:0;right:0;bottom:0;z-index:6;padding:1.5cqw 3cqw 2.5cqw;background:linear-gradient(transparent,rgba(30,8,3,.85) 25%);display:flex;flex-direction:column;gap:2cqw}
#bar button{font:inherit;cursor:pointer;border:0;color:#fff;background:#8f2a1a;border-radius:2.5cqw;padding:1.8cqw 1cqw}
#bar button:active{transform:scale(.95)}
#acts,#gifts{display:flex;gap:2cqw}
#acts button{flex:1;font-size:3.2cqw;padding:1.3cqw 1cqw!important;background:#2f6fb5}
#bc{opacity:.85;font-size:2.8cqw}
#gifts button{flex:1;min-height:max(8.5cqw,40px);padding:.5cqw 1cqw!important;font-size:2.4cqw;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:1cqw;background:linear-gradient(#c8102e,#8f1220);border:1px solid #ffd54a}
#gifts img{width:3cqw;height:3cqw}
#gifts span{display:flex;flex-direction:column;text-align:left;line-height:1.15}
#gifts em{font-style:normal}
#gifts i{font-style:normal;font-weight:700;color:#ffd54a;font-size:2.4cqw}
#xu{align-self:center;font-size:2.4cqw;color:#ffe9a8;min-width:9cqw;text-align:center;line-height:1.1}
#xu b{display:block;font-size:3cqw}
#chat{display:flex;gap:2cqw}
#ct{flex:1;min-width:0;font:inherit;font-size:16px;padding:1.8cqw 3cqw;border-radius:5cqw;border:0;background:rgba(255,255,255,.92)}
#chat button{padding:1.8cqw 4cqw!important}
#join{position:absolute;inset:0;z-index:20;background:rgba(40,10,4,.92);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3cqw;padding:10cqw;text-align:center}
#join.hide{display:none}
#hero{position:relative;width:100%;aspect-ratio:3/1;border-radius:3cqw;background:linear-gradient(#e9b24a,#7a1d14);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:2cqw}
#hero .hb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:3cqw}
#hero .dv{position:absolute;bottom:0;height:11cqw;width:auto;z-index:2}
#hero .dv.l{left:-4cqw}
#hero .dv.r{right:-4cqw;transform:scaleX(-1)}
#hero h1,#hero em{position:relative;text-shadow:0 1px 3px #000,0 0 8px #000}
#hero em{font-style:normal;font-size:3cqw;color:#ffe9a8}
#join h1{font-size:7cqw;color:#ffd54a}
#join p{color:#ffe9a8}
#join small{color:#e9b24a;font-size:3cqw;margin-top:-1cqw}
#join input{width:100%;font-size:16px;padding:3cqw;border-radius:3cqw;border:0;text-align:center}
#join button{font:inherit;width:100%;padding:3cqw;border:0;border-radius:3cqw;background:#c8102e;color:#fff;font-weight:700}
#jerr{color:#ff9a8a;min-height:5cqw}
#side{position:absolute;top:2cqw;left:2cqw;width:30cqw;z-index:8;display:flex;flex-direction:column;align-items:flex-start;gap:1.5cqw;pointer-events:none}
#online{display:flex;align-items:center;gap:1cqw;padding:.8cqw 2.2cqw .8cqw 1.6cqw;border-radius:4cqw;background:rgba(30,8,4,.85);border:1.5px solid #e9b24a;box-shadow:0 0 2.5cqw rgba(233,178,74,.45)}
#online svg{width:3.4cqw;height:3.4cqw;fill:#8fe08f;filter:drop-shadow(0 0 .5cqw #8fe08f)}
#spec,#conn{font-size:2.6cqw;line-height:1.25;padding:1cqw 2cqw;border-radius:3cqw}
#spec{background:rgba(233,178,74,.92);color:#4a1a0a}
#conn{background:#c8102e;color:#fff}
#spec[hidden],#conn[hidden]{display:none}
#toasts{top:12cqw}
#ticker{position:absolute;left:3cqw;right:3cqw;bottom:46cqw;z-index:6;display:flex;flex-direction:column;gap:.6cqw;pointer-events:none}
.tk{align-self:flex-start;max-width:90%;font-size:2.8cqw;padding:.6cqw 2cqw;border-radius:3cqw;background:rgba(0,0,0,.5);color:#fff;animation:tk 5s forwards;word-break:break-word}
.tk b{color:#ffd54a;font-weight:600}
@keyframes tk{0%{opacity:0}8%,70%{opacity:1}100%{opacity:0}}
#join input{margin:0}
#join input[type=number]{-moz-appearance:textfield}
#join input::-webkit-outer-spin-button,#join input::-webkit-inner-spin-button{-webkit-appearance:none}
#join .ab,#abr{color:#e9b24a;font-size:3cqw}
#abr{position:absolute;right:3cqw;bottom:44cqw;z-index:6;font-size:2.2cqw;opacity:.7;text-decoration:none;text-shadow:0 1px 2px #000}
#snd{pointer-events:auto;width:7cqw;height:7cqw;border-radius:50%;border:1.5px solid #e9b24a;background:rgba(30,8,4,.85) center/55% no-repeat;cursor:pointer;padding:0}
#snd[hidden]{display:none}
#snd.on{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffe9a8'%3E%3Cpath d='M3 9v6h4l5 4V5L7 9zM16 8a5 5 0 010 8M18.5 5.5a9 9 0 010 13' stroke='%23ffe9a8' stroke-width='2' fill-opacity='1'/%3E%3C/svg%3E")}
#snd.off{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffe9a8'%3E%3Cpath d='M3 9v6h4l5 4V5L7 9z'/%3E%3Cpath d='M16 9l6 6M22 9l-6 6' stroke='%23ff9a8a' stroke-width='2'/%3E%3C/svg%3E")}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}