body{overflow:hidden;height:100dvh;display:flex;flex-direction:column;user-select:none}
.bg{position:fixed;inset:0;z-index:-1;background:radial-gradient(60% 50% at 0% 0%,color-mix(in srgb,var(--accent2) 22%,transparent),transparent 70%),radial-gradient(60% 50% at 100% 100%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 70%),radial-gradient(120% 90% at 50% -10%,var(--bg2),var(--bg) 60%);overflow:hidden}
@keyframes rise{6%{opacity:var(--o)}88%{opacity:var(--o)}100%{transform:translate3d(var(--sw),-112vh,0);opacity:0}}
.stage{isolation:isolate;background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 30%,transparent),color-mix(in srgb,var(--surface) 55%,transparent))}
.stage::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:radial-gradient(60% 45% at 50% 40%,color-mix(in srgb,var(--accent) 8%,transparent),transparent 70%);pointer-events:none}
.top{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem clamp(1rem,2.5vw,2.5rem)}
.brand{display:flex;align-items:center;gap:.9rem;min-width:0}
.logo{width:46px;height:46px;border-radius:14px;flex:none;background:conic-gradient(from 200deg,var(--accent),var(--accent2),var(--accent));box-shadow:var(--glow)}
h1{font-size:clamp(1.1rem,2vw,1.9rem);font-weight:800;line-height:1.2}
.brand p{color:var(--muted);font-size:clamp(.8rem,1vw,1rem)}
.tools{display:flex;gap:.5rem;align-items:center}
.pool{display:flex;flex-direction:column;align-items:flex-end;margin-inline-end:.8rem;line-height:1.2;color:var(--muted);font-size:.85rem}
.pool b{color:var(--text);font-size:1.5rem}
a.icon-btn{color:inherit}
.layout{flex:1;min-height:0;display:grid;grid-template-columns:minmax(220px,22vw) 1fr minmax(220px,22vw);gap:clamp(.8rem,1.6vw,1.6rem);padding:0 clamp(1rem,2.5vw,2.5rem) clamp(1rem,2vw,2rem)}
aside,.stage{background:color-mix(in srgb,var(--surface) 62%,transparent);border:1px solid var(--line);border-radius:var(--r);backdrop-filter:blur(10px)}
aside{padding:1rem;display:flex;flex-direction:column;min-height:0}
aside h2{font-size:1rem;color:var(--muted);font-weight:600;margin-bottom:.7rem}
aside ol{list-style:none;padding:0 0 0 6px;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:.6rem;scrollbar-width:thin}
.p{padding:.8rem 1rem;border-radius:14px;border:1px solid var(--line);background:var(--surface2);cursor:pointer;transition:border-color .2s,transform .2s;position:relative;text-align:start;width:100%}
.p:hover{border-color:var(--accent)}
.p.on{border-color:var(--accent);box-shadow:var(--glow);transform:translateX(-4px)}
.p.done{opacity:.55}
.p .t{font-weight:700;font-size:1.05rem;display:flex;justify-content:space-between;gap:.5rem}
.p .m{color:var(--muted);font-size:.8rem;margin-top:.15rem}
.bar{height:6px;border-radius:9px;background:var(--line);margin-top:.55rem;overflow:hidden}
.bar b{display:block;height:100%;background:linear-gradient(90deg,var(--accent2),var(--accent));transform-origin:right;transition:transform .5s}
.stage{display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:clamp(1rem,2vw,2rem);min-width:0;position:relative;text-align:center;overflow:hidden}
.prize-name{font-size:clamp(1.4rem,3.2vw,3.4rem);font-weight:800;color:var(--accent)}
.prize-meta{color:var(--muted);font-size:clamp(.85rem,1.2vw,1.2rem)}
.arena{flex:1;width:100%;display:grid;place-items:center;position:relative;min-height:0}
.arena>*{grid-area:1/1}
.count{font-size:clamp(7rem,22vw,20rem);font-weight:900;line-height:1;color:var(--accent);opacity:0}
.count.tick{animation:tick 1s ease-out forwards}
@keyframes tick{0%{opacity:0;transform:scale(1.8)}25%{opacity:1;transform:scale(1)}80%{opacity:1}100%{opacity:0;transform:scale(.7)}}
.name{font-size:clamp(2rem,7.5vw,8rem);font-weight:900;line-height:1.25;max-width:100%;overflow-wrap:anywhere;unicode-bidi:plaintext;opacity:0;padding:0 1rem}
.name.shuffle{opacity:.85;color:var(--muted);font-size:clamp(1.8rem,5vw,5rem)}
.name.win{opacity:1;background:linear-gradient(100deg,var(--text) 40%,var(--accent) 50%,var(--text) 60%) 100%/250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:pop .7s cubic-bezier(.2,1.5,.3,1),sweep 1.6s .3s ease-out forwards}
@keyframes pop{from{transform:scale(.4);opacity:0}}
@keyframes sweep{to{background-position:0 0}}
.extra{margin-top:calc(clamp(2rem,7.5vw,8rem)*1.4);color:var(--muted);font-size:clamp(1rem,2vw,2rem);direction:ltr;opacity:0;transition:opacity .5s .5s}
.extra.show{opacity:1}
.rings{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.rings i{grid-area:1/1;width:20vmin;height:20vmin;border-radius:50%;border:3px solid var(--accent);opacity:0}
.rings.go i{animation:ring 1.6s ease-out}
.rings.go i:nth-child(2){animation-delay:.2s}.rings.go i:nth-child(3){animation-delay:.4s}
@keyframes ring{from{opacity:.9;transform:scale(.3)}to{opacity:0;transform:scale(4.5)}}
.grid{display:none;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.7rem;width:100%;max-height:100%;overflow:auto;align-content:center;padding:.5rem;scrollbar-width:thin}
.grid.on{display:grid}
.grid div{padding:.9rem .6rem;border-radius:14px;background:var(--surface2);border:1px solid var(--accent);font-weight:800;font-size:clamp(1rem,1.7vw,1.7rem);unicode-bidi:plaintext;animation:pop .5s cubic-bezier(.2,1.5,.3,1) backwards}
.grid small{display:block;font-weight:400;color:var(--muted);font-size:.7em;direction:ltr}
.arena.multi .name,.arena.multi .extra{display:none}
.draw{border:0;border-radius:999px;padding:clamp(.8rem,1.6vw,1.5rem) clamp(2.5rem,7vw,7rem);font-size:clamp(1.3rem,2.6vw,2.8rem);font-weight:900;color:var(--on-accent);background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 60%,var(--accent2)));box-shadow:var(--glow),0 8px 0 color-mix(in srgb,var(--accent) 50%,#000);transition:transform .12s,box-shadow .12s,filter .2s;margin-top:.8rem}
.draw:hover:not(:disabled){filter:brightness(1.08)}
.draw:active:not(:disabled){transform:translateY(5px);box-shadow:var(--glow),0 3px 0 color-mix(in srgb,var(--accent) 50%,#000)}
.draw:disabled{filter:grayscale(.7);opacity:.55;cursor:not-allowed;box-shadow:none}
.hint{color:var(--muted);font-size:.85rem;margin-top:.7rem}
.winners li{padding:.55rem .8rem;border-radius:12px;background:var(--surface2);display:flex;gap:.6rem;align-items:baseline;unicode-bidi:plaintext;animation:pop .4s backwards}
.winners li span{color:var(--accent);font-weight:800;flex:none}
.winners li em{font-style:normal;color:var(--muted);font-size:.75rem;direction:ltr;margin-inline-start:auto}
.empty{position:absolute;inset:0;display:grid;place-content:center;gap:1rem;background:var(--surface);font-size:1.4rem;padding:2rem}
.empty[hidden]{display:none}
.empty a{color:var(--accent);font-weight:700}
.toast{position:fixed;bottom:1.5rem;left:50%;transform:translate(-50%,200%);background:var(--surface2);border:1px solid var(--accent);padding:.8rem 1.6rem;border-radius:14px;transition:transform .35s;z-index:9;box-shadow:var(--shadow)}
.toast.on{transform:translate(-50%,0)}
#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:8}
.idle{cursor:none}
/* mobile rules: see the end of the file */

/* ---- animated scene INSIDE the stage box: thin, dashed, very slow ---- */
.stage.run .draw{position:relative}
.draw::after{content:"";position:absolute;inset:-7px;border-radius:inherit;border:1px dashed var(--accent);opacity:.35;pointer-events:none}
.draw:disabled::after{display:none}
:root[data-theme=light] .draw::after{opacity:.55}

/* ---- spectator mode (public viewers) ---- */
.viewer .host-only{display:none}
.viewer .admin-link{display:none}
.live{display:none;align-items:center;gap:.45rem;padding:.3rem .8rem;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--muted);font-size:.85rem;font-weight:600;white-space:nowrap}
.viewer .live{display:inline-flex}
.live i{width:9px;height:9px;border-radius:50%;background:var(--danger);flex:none}
.live.on{color:var(--text)}
.live.on i{background:var(--ok);animation:livepulse 1.8s ease-out infinite}
@keyframes livepulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 60%,transparent)}100%{box-shadow:0 0 0 10px transparent}}
.wait{display:flex;flex-direction:column;align-items:center;gap:1rem;color:var(--muted);font-size:clamp(1rem,2vw,1.6rem);padding:1rem}
.wait[hidden]{display:none}
.wait i{width:14px;height:14px;border-radius:50%;background:var(--accent);animation:waitp 1.6s ease-in-out infinite}
@keyframes waitp{50%{transform:scale(1.9);opacity:.35}}

/* ---- tablet / phone ---- */
@media (max-width:900px){
  body{overflow:auto;height:auto;min-height:100dvh;-webkit-user-select:none}
  .top{padding:max(.7rem,env(safe-area-inset-top)) max(.9rem,env(safe-area-inset-right)) .6rem max(.9rem,env(safe-area-inset-left))}
  .logo{width:36px;height:36px;border-radius:11px}
  .brand{gap:.65rem}
  .brand p{font-size:.8rem}
  .pool{display:none}
  .full-btn{display:none}
  .layout{grid-template-columns:minmax(0,1fr);gap:.8rem;padding:0 max(.9rem,env(safe-area-inset-right)) max(1rem,env(safe-area-inset-bottom)) max(.9rem,env(safe-area-inset-left));flex:none}
  /* order: prize chips -> stage -> winners */
  .prizes{order:1}.stage{order:2}.winners{order:3}
  aside{padding:.7rem .8rem;max-height:none;border-radius:16px;min-width:0}
  .prizes h2{display:none}
  .prizes ol{flex-direction:row;overflow-x:auto;overflow-y:hidden;padding:2px 0 6px;gap:.5rem;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
  .p{flex:none;width:auto;min-width:150px;max-width:70vw;padding:.55rem .8rem;scroll-snap-align:center}
  .p.on{transform:none}
  .p .t{font-size:.95rem}
  .winners ol{max-height:46dvh;overflow-y:auto}
  .stage{min-height:min(68dvh,560px);padding:1rem .8rem;border-radius:16px}
  .prize-name{font-size:clamp(1.3rem,6.5vw,2rem)}
  .prize-meta{font-size:.85rem}
  .arena{min-height:34dvh;margin:.4rem 0}
  .count{font-size:clamp(6rem,42vw,12rem)}
  .name{font-size:clamp(2rem,11vw,4rem);padding:0 .3rem}
  .name.shuffle{font-size:clamp(1.6rem,9vw,3rem)}
  .extra{margin-top:calc(clamp(2rem,11vw,4rem)*1.5);font-size:1.1rem}
  .grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.5rem;max-height:46dvh}
  .grid div{font-size:1rem;padding:.7rem .4rem}
  .rings i{width:40vmin;height:40vmin}
  .draw{width:100%;padding:1rem;font-size:1.4rem}
  .hint{display:none}
  .toast{bottom:max(1rem,env(safe-area-inset-bottom));max-width:calc(100vw - 2rem);text-align:center}
  .bg i{filter:blur(60px)}
}
@media (max-width:480px){
  h1{font-size:1.05rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .brand>div{min-width:0}
  .tools{gap:.35rem}
  .icon-btn{width:38px;height:38px}
  .live{padding:.25rem .6rem;font-size:.78rem}
}
@media (max-width:360px){.live span{display:none}.live{padding:.5rem}}


#bgCanvas{position:absolute;inset:0;width:100%;height:100%;display:block}