@font-face{font-family:"Plus Jakarta Sans";src:url(fonts/jakarta.woff2) format("woff2");font-weight:400 800;font-display:swap}
:root{--k:1;--grape:#5426B2;--pink:#FF4A98;--mint:#58E9BF;--cream:#FFF8EC;--navy:#27194A;--lav:#D2C2F6;--line:rgba(255,248,236,.14);--mute:#BFB2E6;--trophy:#58E9BF;--wm:#FFF8EC;--face:#27194A;--card:rgba(255,255,255,.055);--card2:rgba(255,255,255,.09);
--f:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif}
html[data-theme=light]{--line:rgba(39,25,74,.16);--mute:#5B4F80;--trophy:#5426B2;--face:#FFF8EC;--wm:#27194A;--card:#fff;--card2:#F3ECFF}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--f);color:var(--cream);background:#160C33 radial-gradient(120% 70% at 50% -10%,#3A1F86 0%,#1E1046 45%,#120a2b 100%) fixed;overflow-x:hidden;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;font-size:calc(var(--k)*16px)}
html[data-theme=light] body{color:var(--navy);background:#FFF8EC}
a{color:inherit;text-decoration:none}
button{font-family:inherit;color:inherit}
#app{max-width:calc(var(--k)*1180px);margin:0 auto;padding:0 calc(var(--k)*20px);height:100%;display:flex;flex-direction:column}
.htop{display:flex;align-items:center;justify-content:space-between;padding:calc(var(--k)*10px) 0 calc(var(--k)*4px);flex:0 0 auto}
.logo{display:block;width:calc(var(--k)*124px)}
.zl{display:block;width:100%;height:auto;overflow:visible}
.hr{display:flex;align-items:center;gap:calc(var(--k)*8px)}
.allg{font-size:calc(var(--k)*14px);font-weight:700;color:var(--mute);padding:0 calc(var(--k)*6px);min-height:calc(var(--k)*56px);display:flex;align-items:center}
.allg:hover{color:var(--cream)}
html[data-theme=light] .allg:hover{color:var(--navy)}
.tgl{flex:0 0 calc(var(--k)*44px);width:calc(var(--k)*44px);height:calc(var(--k)*44px);border-radius:50%;display:grid;place-items:center;border:calc(var(--k)*2.5px) solid var(--line);background:rgba(255,255,255,.04);color:var(--cream);cursor:pointer;transition:transform .15s,border-color .2s}
.tgl:hover{border-color:var(--mint)}
.tgl svg{width:calc(var(--k)*20px);height:calc(var(--k)*20px);fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;grid-area:1/1}
#tgl .sun{color:var(--mint)}#tgl .sun circle{fill:var(--mint)}#tgl .moon{display:none;fill:var(--grape);stroke:var(--grape)}
html[data-theme=light] .tgl{background:#fff;color:var(--navy)}
html[data-theme=light] #tgl .sun{display:none}html[data-theme=light] #tgl .moon{display:block}
#snd .soff{display:none}#snd.off .son{display:none}#snd.off .soff{display:block}#snd .son path:first-child,#snd .soff path:first-child{fill:currentColor}
.tgl:focus-visible,.ib:focus-visible,.cb:focus-visible,.btn:focus-visible,.mode:focus-visible,.lv:focus-visible,.allg:focus-visible{outline:calc(var(--k)*3px) solid var(--mint);outline-offset:calc(var(--k)*3px)}

.fs{font-size:calc(var(--k)*13px);font-weight:700;color:var(--mint);padding:0 calc(var(--k)*6px);min-height:calc(var(--k)*44px);display:flex;align-items:center}
.hide{display:none!important}
#helpBtn .q{font-weight:800;font-size:calc(var(--k)*18px)}
main{flex:1 1 auto;min-height:0;position:relative;display:flex;flex-direction:column}
#app{padding:0 calc(var(--k)*12px)}
.stage{flex:1 1 auto;min-height:0;position:relative;touch-action:none;user-select:none;-webkit-user-select:none;border-radius:calc(var(--k)*18px);overflow:hidden;background:#2a1a12}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
.hud{display:flex;gap:calc(var(--k)*6px);pointer-events:none;flex-wrap:wrap}
.pill{background:rgba(22,12,51,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:var(--cream);font-size:calc(var(--k)*12px);font-weight:700;padding:calc(var(--k)*5px) calc(var(--k)*10px);border-radius:999px;border:1px solid rgba(255,248,236,.14)}
.pill.turn{background:var(--mint);color:var(--navy);border-color:transparent;display:none}
.pill.turn.on{display:block;animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.06)}}
.hint{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(var(--k)*44px);font-size:calc(var(--k)*12.5px);font-weight:600;color:var(--cream);background:rgba(22,12,51,.62);padding:calc(var(--k)*6px) calc(var(--k)*12px);border-radius:999px;pointer-events:none;white-space:nowrap;max-width:94%;overflow:hidden;text-overflow:ellipsis;opacity:0;transition:opacity .3s}
.hint.on{opacity:1}
.toast{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%) scale(.96);background:rgba(22,12,51,.92);color:var(--cream);font-weight:700;font-size:calc(var(--k)*15px);padding:calc(var(--k)*12px) calc(var(--k)*18px);border-radius:calc(var(--k)*16px);max-width:86%;text-align:center;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;border:2px solid var(--pink);z-index:5}
.toast.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.toast.good{border-color:var(--mint)}
/* seats */
#seats{position:absolute;inset:0;pointer-events:none}
.seat{position:absolute;display:flex;align-items:center;gap:calc(var(--k)*7px);transform:translate(-50%,-100%);transition:opacity .3s}
.seat .av{width:calc(var(--k)*40px);height:calc(var(--k)*40px);border-radius:50%;background:#3a2a5e center/cover;border:calc(var(--k)*2.5px) solid rgba(255,248,236,.7);flex:0 0 auto;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.seat .nm{background:rgba(22,12,51,.74);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-radius:calc(var(--k)*12px);padding:calc(var(--k)*4px) calc(var(--k)*9px);line-height:1.2;white-space:nowrap}
.seat .nm b{display:block;font-size:calc(var(--k)*13px);color:var(--cream)}
.seat .nm i{font-style:normal;font-size:calc(var(--k)*11px);color:var(--lav);font-weight:600}
.seat.active .av{border-color:var(--mint);box-shadow:0 0 0 calc(var(--k)*3px) rgba(88,233,191,.35),0 2px 8px rgba(0,0,0,.35)}
.seat .think{display:none;font-size:calc(var(--k)*11px);color:var(--mint);font-weight:700}
.seat.thinking .think{display:block}
.seat.thinking .cnt{display:none}
.bub{position:absolute;bottom:calc(100% + var(--k)*8px);left:50%;transform:translateX(-50%) scale(.9);background:var(--cream);color:var(--navy);font-weight:700;font-size:calc(var(--k)*13px);padding:calc(var(--k)*7px) calc(var(--k)*11px);border-radius:calc(var(--k)*14px);white-space:nowrap;opacity:0;transition:opacity .2s,transform .2s;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.bub:after{content:"";position:absolute;top:100%;left:50%;margin-left:calc(var(--k)*-6px);border:calc(var(--k)*6px) solid transparent;border-top-color:var(--cream)}
.bub.on{opacity:1;transform:translateX(-50%) scale(1)}
.seat.l .bub{left:0;transform:none}.seat.l .bub:after{left:calc(var(--k)*24px)}
.seat.r .bub{left:auto;right:0;transform:none}.seat.r .bub:after{left:auto;right:calc(var(--k)*18px)}
.dots:after{content:"";animation:dots 1.2s steps(4) infinite}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
/* controls */
.ctl{flex:0 0 auto;display:flex;gap:calc(var(--k)*8px);padding:calc(var(--k)*8px) 0 calc(var(--k)*10px);padding-bottom:max(calc(var(--k)*10px),env(safe-area-inset-bottom))}
.cb{flex:1 1 0;min-height:calc(var(--k)*58px);border-radius:calc(var(--k)*16px);border:calc(var(--k)*2px) solid var(--line);background:var(--card);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--k)*2px);cursor:pointer;font-weight:700;font-size:calc(var(--k)*12px);color:var(--cream)}
.cb svg{width:calc(var(--k)*22px);height:calc(var(--k)*22px);fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.cb .sk{font-size:calc(var(--k)*14px);font-weight:800;letter-spacing:.02em;line-height:calc(var(--k)*22px)}
.cb:hover:not(:disabled){border-color:var(--mint)}
.cb:disabled{opacity:.35;cursor:default}
.cb.go{flex:1.6 1 0;background:var(--grape);border-color:transparent;font-size:calc(var(--k)*17px);font-weight:800}
.cb.go.done{background:var(--mint);color:var(--navy)}
.cb.go.shake{animation:shake .4s}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.cb:focus-visible{outline:calc(var(--k)*3px) solid var(--mint);outline-offset:2px}
/* start overlay */
.ovl{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:linear-gradient(180deg,rgba(18,10,43,.25),rgba(18,10,43,.7));padding:calc(var(--k)*14px);z-index:6;overflow-y:auto}
.ovl.on{display:flex}
.ocard{background:rgba(28,16,64,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,248,236,.16);border-radius:calc(var(--k)*24px);padding:calc(var(--k)*20px) calc(var(--k)*20px) calc(var(--k)*16px);width:min(100%,calc(var(--k)*430px));text-align:center;display:flex;flex-direction:column;gap:calc(var(--k)*8px);margin:auto}
.okick{font-size:calc(var(--k)*11px);font-weight:800;letter-spacing:.16em;color:var(--mint)}
.ocard h1{font-size:calc(var(--k)*40px);line-height:1;font-weight:800;letter-spacing:-.02em}
.osub{color:var(--lav);font-size:calc(var(--k)*14px);line-height:1.4}
.cast{display:flex;justify-content:center;gap:calc(var(--k)*10px);margin:calc(var(--k)*4px) 0}
.cast div{flex:1;max-width:calc(var(--k)*120px)}
.cast .av{width:calc(var(--k)*64px);height:calc(var(--k)*64px);border-radius:50%;margin:0 auto calc(var(--k)*5px);background:#3a2a5e center/cover;border:calc(var(--k)*2.5px) solid rgba(255,248,236,.6)}
.cast b{display:block;font-size:calc(var(--k)*13px)}
.cast i{display:block;font-style:normal;font-size:calc(var(--k)*11px);color:var(--lav);line-height:1.3}
.lbl{font-size:calc(var(--k)*12px);font-weight:700;color:var(--lav);margin-top:calc(var(--k)*4px)}
.seg{display:flex;background:rgba(255,255,255,.06);border-radius:calc(var(--k)*16px);padding:calc(var(--k)*4px);gap:calc(var(--k)*4px)}
.seg button{flex:1;min-height:calc(var(--k)*48px);border-radius:calc(var(--k)*12px);border:0;background:transparent;font-weight:800;font-size:calc(var(--k)*15px);cursor:pointer;color:var(--cream)}
.seg button[aria-checked=true]{background:var(--pink);color:#fff}
.btn{min-height:calc(var(--k)*56px);border-radius:calc(var(--k)*16px);border:0;background:var(--grape);color:#fff;font-weight:800;font-size:calc(var(--k)*17px);cursor:pointer;padding:0 calc(var(--k)*18px)}
.btn.big{background:var(--mint);color:var(--navy);font-size:calc(var(--k)*19px);margin-top:calc(var(--k)*6px)}
.btn.ghost{background:transparent;border:calc(var(--k)*2px) solid var(--line);color:var(--cream);font-size:calc(var(--k)*15px)}
.btn:hover{filter:brightness(1.08)}
.stats{font-size:calc(var(--k)*12px);color:var(--lav)}
/* dialog */
.dlg{position:fixed;inset:0;background:rgba(10,5,25,.6);display:flex;align-items:center;justify-content:center;z-index:20;padding:calc(var(--k)*16px)}
.dlg[hidden]{display:none}
.dcard{background:#24154f;border:1px solid rgba(255,248,236,.16);border-radius:calc(var(--k)*22px);padding:calc(var(--k)*20px);width:min(100%,calc(var(--k)*460px));max-height:90%;overflow-y:auto;color:var(--cream)}
.dcard h3{font-size:calc(var(--k)*24px);font-weight:800;margin-bottom:calc(var(--k)*10px)}
.dcard p,.dcard li{font-size:calc(var(--k)*14px);line-height:1.5;color:#E9E1FF}
.dcard ul{padding-left:calc(var(--k)*18px);margin:calc(var(--k)*6px) 0}
.dcard .ex{display:inline-flex;gap:2px;vertical-align:middle}
.dcard .ex span{display:inline-block;background:#FFF8EC;border-radius:4px;font-weight:800;font-size:calc(var(--k)*13px);width:calc(var(--k)*20px);text-align:center;line-height:calc(var(--k)*26px)}
.dbtns{display:flex;flex-direction:column;gap:calc(var(--k)*8px);margin-top:calc(var(--k)*14px)}
table.sc{width:100%;border-collapse:collapse;margin-top:calc(var(--k)*6px);font-size:calc(var(--k)*14px)}
table.sc th,table.sc td{padding:calc(var(--k)*7px) calc(var(--k)*4px);text-align:right;border-bottom:1px solid rgba(255,248,236,.1)}
table.sc th:first-child,table.sc td:first-child{text-align:left}
table.sc tr.win td{color:var(--mint);font-weight:800}
table.sc th{color:var(--lav);font-size:calc(var(--k)*12px)}
.short .seat .av{width:calc(var(--k)*32px);height:calc(var(--k)*32px)}

#seats.pt .seat{flex-direction:column;gap:calc(var(--k)*3px);transform:translateX(-50%);text-align:center}
#seats.pt .seat .nm{padding:calc(var(--k)*3px) calc(var(--k)*8px)}
#seats.pt .seat .nm b{font-size:calc(var(--k)*12px)}
#seats.pt .seat .nm i{font-size:calc(var(--k)*10.5px)}
#seats.pt .bub{bottom:auto;top:calc(100% + var(--k)*8px);white-space:normal;width:max-content;max-width:calc(var(--k)*170px);text-align:center}
#seats.pt .bub:after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:var(--cream)}
#seats.pt .seat.l .bub{left:0}#seats.pt .seat.r .bub{right:0;left:auto}
.ctlinfo{flex:0 0 auto;display:flex;gap:calc(var(--k)*6px);align-items:center;padding-top:calc(var(--k)*7px);min-height:calc(var(--k)*30px);overflow:hidden}
.ctlinfo .pill{background:var(--card);flex:0 0 auto}
.ctlinfo .hint{position:static;transform:none;background:none;padding:0 calc(var(--k)*4px);flex:1 1 auto;min-width:0;text-align:right;color:var(--lav);font-size:calc(var(--k)*12px)}

.side .htop{padding:calc(var(--k)*4px) 0 calc(var(--k)*2px)}
.side .logo{width:calc(var(--k)*96px)}
.side .tgl{flex-basis:calc(var(--k)*38px);width:calc(var(--k)*38px);height:calc(var(--k)*38px)}
.side .allg{min-height:calc(var(--k)*38px)}
.side main{display:grid;grid-template-columns:1fr calc(var(--k)*128px);grid-template-rows:auto 1fr;column-gap:calc(var(--k)*8px);padding-bottom:calc(var(--k)*8px)}
.side .stage{grid-column:1;grid-row:1/3}
.side .ctlinfo{grid-column:2;grid-row:1;flex-wrap:wrap;padding-top:0;gap:calc(var(--k)*4px)}
.side .ctlinfo .hint{display:none}
.side .ctl{grid-column:2;grid-row:2;flex-direction:column;padding:calc(var(--k)*6px) 0 0;gap:calc(var(--k)*6px)}
.side .cb{min-height:calc(var(--k)*48px);flex:1 1 0;flex-direction:row;gap:calc(var(--k)*6px)}
.side .cb.go{flex:1.4 1 0}
.ctlinfo .pill.turn{background:var(--mint);color:var(--navy)}

/* rooms update: the start card scrolls cleanly on short screens */
.ovl{align-items:flex-start}.ovl .ocard{margin:auto}