:root{
  --bg:#07080c; --panel:#10121a; --panel2:#171a25; --line:#262a38; --text:#eef0f6; --mute:#8b90a3;
  --accent:#7c8cff; --gold:#f5c451; --violet:#a77bff; --steel:#8fb4d9; --ok:#4fd1a5; --bad:#ff6b7a;
  --A:#5ee0ff; --B:#f5c451; --C:#c9a27e; --D:#ff6fae; --E:#8f7bff; --F:#9fe8d9;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font:14px/1.45 -apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer}
header.top{position:sticky;top:0;z-index:20;display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding:12px 16px;background:rgba(7,8,12,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
header.top h1{font-size:15px;margin:0 8px 0 0;letter-spacing:.02em}
header.top h1 small{color:var(--mute);font-weight:400;margin-left:6px}
.tabs,.seg{display:flex;gap:2px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:2px}
.tabs button,.seg button{border:0;background:none;padding:6px 12px;border-radius:8px;color:var(--mute);white-space:nowrap}
.tabs button.on,.seg button.on{background:var(--panel2);color:var(--text);box-shadow:0 0 0 1px var(--line)}
.seg button[data-v=A].on{color:var(--A)} .seg button[data-v=B].on{color:var(--B)} .seg button[data-v=C].on{color:var(--C)}
.spacer{flex:1}
.lbl{color:var(--mute);font-size:12px;margin-right:4px}
.vol{display:flex;align-items:center;gap:6px;color:var(--mute);font-size:12px}
.vol input{width:80px;accent-color:var(--accent)}
main{padding:16px;max-width:1400px;margin:0 auto}
.view{display:none}.view.on{display:block}
.layout{display:grid;grid-template-columns:minmax(300px,420px) 1fr;gap:24px;align-items:start}
@media (max-width:860px){.layout{grid-template-columns:1fr}}
.phone{position:relative;width:100%;max-width:420px;aspect-ratio:9/16;border-radius:34px;overflow:hidden;background:#000;box-shadow:0 0 0 8px #15171f,0 0 0 9px #2a2e3c,0 30px 80px rgba(0,0,0,.6);margin:0 auto;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.phone canvas.rive{position:absolute;inset:0;width:100%;height:100%}
.cam{position:absolute;inset:0;will-change:transform}
.fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:14px}
.card h3{margin:0 0 10px;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--mute);font-weight:600}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:10px}
.btn{border:1px solid var(--line);background:var(--panel2);padding:8px 14px;border-radius:10px}
.btn.primary{background:linear-gradient(180deg,#8c9aff,#6474ff);border-color:transparent;color:#fff;font-weight:600}
.btn:active{transform:scale(.97)}
.timeline{position:relative;height:56px;background:var(--panel2);border-radius:10px;overflow:hidden;cursor:pointer;border:1px solid var(--line)}
.timeline .ph{position:absolute;top:0;bottom:0;width:2px;background:#fff;box-shadow:0 0 8px #fff}
.timeline .mk{position:absolute;top:0;bottom:0;width:1px;background:rgba(124,140,255,.5)}
.timeline .mk span{position:absolute;top:2px;left:3px;font-size:9px;color:var(--mute);white-space:nowrap;transform-origin:left top}
.timeline .mk.alt span{top:auto;bottom:2px}
.timeline .bed{position:absolute;left:0;right:0;bottom:0;height:22px;opacity:.5}
.note{color:var(--mute);font-size:12.5px}
.note b{color:var(--text);font-weight:600}
.dirs{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.dirs div{border:1px solid var(--line);border-radius:10px;padding:10px;font-size:12.5px;color:var(--mute)}
.dirs div b{display:block;font-size:13px}
.dirs .A b{color:var(--A)} .dirs .B b{color:var(--B)} .dirs .C b{color:var(--C)}
/* sound board */
.board h2{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--mute);margin:26px 0 8px}
.cue{display:grid;grid-template-columns:minmax(160px,220px) repeat(6,minmax(0,1fr));gap:8px;align-items:stretch;padding:8px 0;border-top:1px solid var(--line)}
@media (max-width:860px){.cue{grid-template-columns:1fr}}
.cue .name{font-weight:600;font-size:13px}
.cue .name small{display:block;color:var(--mute);font-weight:400;font-family:ui-monospace,Menlo,monospace;font-size:11px}
.ver{position:relative;display:flex;gap:8px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:6px 8px;min-height:46px}
.ver.picked{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.ver .play{width:30px;height:30px;border-radius:50%;border:0;background:var(--panel2);flex:none;display:grid;place-items:center}
.ver[data-v=A] .play{color:var(--A)} .ver[data-v=B] .play{color:var(--B)} .ver[data-v=C] .play{color:var(--C)}
.ver canvas{flex:1;height:30px;min-width:40px}
.ver .meta{font-size:10.5px;color:var(--mute);font-family:ui-monospace,Menlo,monospace;width:44px;text-align:right}
.ver .pick{border:1px solid var(--line);background:none;border-radius:7px;font-size:11px;padding:3px 7px;color:var(--mute)}
.ver.picked .pick{background:var(--accent);color:#fff;border-color:transparent}
.ver .tag{position:absolute;top:-7px;left:8px;font-size:9.5px;font-weight:700;padding:0 4px;background:var(--bg);border-radius:4px}
.ver[data-v=A] .tag{color:var(--A)} .ver[data-v=B] .tag{color:var(--B)} .ver[data-v=C] .tag{color:var(--C)}
.ver.missing{opacity:.35}
textarea.export{width:100%;min-height:120px;background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:10px;font:12px ui-monospace,Menlo,monospace;padding:10px}
/* lobby mock */
.app{position:absolute;inset:0;display:flex;flex-direction:column;color:#fff;background:#05060a}
.app .bgimg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.55;filter:saturate(1.1)}
.app .bgfade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,6,10,.5),rgba(5,6,10,.1) 40%,rgba(5,6,10,.85) 82%)}
.app .bar{position:relative;display:flex;align-items:center;justify-content:space-between;padding:46px 16px 8px}
.app .bar .title{font-weight:700;font-size:20px;letter-spacing:.01em}
.pill{display:flex;align-items:center;gap:6px;padding:6px 10px 6px 6px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(10px);font-weight:700;font-variant-numeric:tabular-nums}
.pill img{width:22px;height:22px}
.pill.bump{animation:bump .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes bump{0%{transform:scale(1)}35%{transform:scale(1.14)}100%{transform:scale(1)}}
.pool{position:relative;flex:1;overflow:hidden}
.track{position:absolute;left:0;top:0;bottom:0;display:flex;align-items:center;will-change:transform}
.slot{position:relative;flex:none;width:62%;height:78%;display:grid;place-items:center}
.slot canvas{width:100%;height:100%}
.poolname{position:relative;text-align:center;padding:0 16px}
.poolname b{display:block;font-size:18px}
.poolname span{color:rgba(255,255,255,.65);font-size:12.5px}
.dots{display:flex;gap:6px;justify-content:center;margin:8px 0}
.dots i{width:6px;height:6px;border-radius:3px;background:rgba(255,255,255,.3);transition:all .25s}
.dots i.on{width:18px;background:#fff}
.cta{position:relative;margin:6px 16px 28px;padding:16px;border-radius:18px;border:0;font-weight:800;font-size:16px;color:#1b1406;background:linear-gradient(180deg,#ffe08a,#f5b83d);box-shadow:0 10px 30px rgba(245,184,61,.35),inset 0 1px 0 rgba(255,255,255,.6)}
.cta:active{transform:scale(.97)}
.subrow{position:relative;display:flex;gap:8px;justify-content:center;margin-top:-14px;margin-bottom:22px}
.chip{padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);font-size:12.5px;color:#fff}
.sheet-scrim{position:absolute;inset:0;background:rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity .3s}
.sheet-scrim.on{opacity:1;pointer-events:auto}
.sheet{position:absolute;left:0;right:0;bottom:0;padding:18px 16px 28px;border-radius:24px 24px 0 0;background:rgba(18,20,30,.96);border-top:1px solid rgba(255,255,255,.12);transform:translateY(105%);transition:transform .42s cubic-bezier(.2,.9,.2,1);backdrop-filter:blur(20px)}
.sheet.on{transform:none}
.sheet h4{margin:0 0 4px;font-size:18px}
.sheet p{margin:0 0 14px;color:rgba(255,255,255,.65);font-size:13px}
.bundles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.bundle{border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);border-radius:14px;padding:10px 6px;text-align:center}
.bundle img{width:44px;height:44px;object-fit:contain}
.bundle b{display:block;font-size:15px}
.bundle span{font-size:11.5px;color:rgba(255,255,255,.6)}
.bundle.on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset;background:rgba(245,196,81,.08)}
.sheet .go{width:100%;padding:14px;border-radius:14px;border:0;font-weight:800;background:#fff;color:#000}
.sheet .go.gold{background:linear-gradient(180deg,#ffe08a,#f5b83d);color:#1b1406}
.odds{display:grid;grid-template-columns:1fr auto;gap:6px 10px;font-size:13px;margin-bottom:14px}
.odds i{font-style:normal;color:rgba(255,255,255,.6)}
.pending{display:flex;align-items:center;gap:10px;justify-content:center;padding:14px;color:rgba(255,255,255,.75)}
.spinner{width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.2);border-top-color:#fff;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.picker{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,#1a1d33,#05060a 70%);display:none;flex-direction:column;align-items:center;justify-content:center}
.picker.on{display:flex}
.ring{position:relative;width:100%;height:60%}
.ring img{position:absolute;left:50%;top:50%;width:38%;transform-origin:50% 50%;transition:filter .2s;filter:brightness(.6)}
.ring img.sel{filter:brightness(1.1) drop-shadow(0 0 24px rgba(160,180,255,.55))}
.picker .hint{color:rgba(255,255,255,.6);font-size:13px;margin-top:8px}
.reveal-layer{position:absolute;inset:0;display:none;background:#000}
.reveal-layer.on{display:block}
.skip{position:absolute;top:44px;right:14px;z-index:5;padding:6px 12px;border-radius:999px;background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.2);color:#fff;font-size:12px}
.result-ui{position:absolute;left:0;right:0;bottom:0;padding:16px 14px 26px;display:none;gap:8px;flex-wrap:wrap;justify-content:center;background:linear-gradient(180deg,transparent,rgba(0,0,0,.75) 35%)}
.result-ui.on{display:flex}
.result-ui button{flex:1 1 40%;padding:12px;border-radius:14px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.1);color:#fff;font-weight:700;backdrop-filter:blur(10px)}
.result-ui button.gold{background:linear-gradient(180deg,#ffe08a,#f5b83d);color:#1b1406;border:0}
.toast{position:absolute;left:50%;top:96px;transform:translate(-50%,-20px);opacity:0;padding:9px 14px;border-radius:12px;background:rgba(20,22,32,.95);border:1px solid rgba(255,255,255,.14);font-size:13px;transition:all .3s;white-space:nowrap;z-index:9}
.toast.on{opacity:1;transform:translate(-50%,0)}
.wheel{width:220px;height:220px;margin:4px auto 14px;border-radius:50%;position:relative;background:conic-gradient(#2b2f55 0 45deg,#3a2f66 45deg 90deg,#2b2f55 90deg 135deg,#5a4520 135deg 180deg,#2b2f55 180deg 225deg,#3a2f66 225deg 270deg,#2b2f55 270deg 315deg,#3a2f66 315deg 360deg);box-shadow:0 0 0 4px #ffffff22,0 0 30px #7c8cff44}
.wheel::after{content:"";position:absolute;top:-10px;left:50%;margin-left:-8px;border:8px solid transparent;border-top:14px solid #fff}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--mute)}
kbd{font:11px ui-monospace,Menlo,monospace;background:var(--panel2);border:1px solid var(--line);border-radius:5px;padding:1px 5px}
.loading{position:absolute;inset:0;display:grid;place-items:center;color:var(--mute);font-size:13px;background:#000}
/* phone */
.cue .vers{display:contents}
@media (max-width:700px){
  header.top{gap:8px;padding:10px 12px}
  header.top h1 small{display:none}
  header.top .vol{display:none}
  header.top.showvol .vol{display:flex}
  #set{max-width:100%;overflow-x:auto;scrollbar-width:none}
  #set button{padding:6px 9px;font-size:13px}
  .tabs button{padding:6px 9px;font-size:13px}
  main{padding:12px}
  .cue{grid-template-columns:repeat(3,1fr);gap:6px}
  .cue .name{grid-column:1/-1}
  .ver{flex-wrap:wrap;gap:4px;padding:10px 6px 6px;min-height:0}
  .ver canvas{flex-basis:100%;order:3;height:22px}
  .ver .meta{width:auto;flex:1;text-align:left}
  .dirs{grid-template-columns:1fr}
  #cuelog{display:none}
}
#volbtn{display:none}
@media (max-width:700px){#volbtn{display:inline-block;border:1px solid var(--line);background:var(--panel);border-radius:8px;padding:5px 9px;color:var(--mute);font-size:12px}}
.slot canvas,.phone canvas{display:block}
.pool{min-height:0}
.slot canvas{position:absolute;inset:0;width:100%;height:100%}
.track{width:100%}

.seg button[data-v=D].on{color:var(--D)} .seg button[data-v=E].on{color:var(--E)} .seg button[data-v=F].on{color:var(--F)}
.dirs .D b{color:var(--D)} .dirs .E b{color:var(--E)} .dirs .F b{color:var(--F)}
.ver[data-v=D] .play{color:var(--D)} .ver[data-v=E] .play{color:var(--E)} .ver[data-v=F] .play{color:var(--F)}
.ver[data-v=D] .tag{color:var(--D)} .ver[data-v=E] .tag{color:var(--E)} .ver[data-v=F] .tag{color:var(--F)}
@media (max-width:1500px) and (min-width:861px){.cue{grid-template-columns:repeat(3,minmax(0,1fr))}.cue .name{grid-column:1/-1}}
.ver .pick{flex:none}

/* interactive gates */
.gatehint{position:absolute;left:0;right:0;display:none;flex-direction:column;align-items:center;gap:10px;pointer-events:none;color:#fff;font-size:13px;letter-spacing:.02em;text-shadow:0 1px 8px rgba(0,0,0,.8);z-index:5}
.gatehint.on{display:flex;animation:ghIn .45s cubic-bezier(.2,.9,.3,1) both}
.gatehint[data-g=tear]{top:16%}
.gatehint[data-g=hold]{bottom:9%}
.gatehint b{font-weight:600;background:rgba(0,0,0,.35);padding:5px 12px;border-radius:99px;backdrop-filter:blur(8px)}
.gatehint .swipe{width:62%;height:3px;border-radius:2px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);position:relative}
.gatehint .swipe i{position:absolute;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#fff;box-shadow:0 0 18px 4px rgba(255,255,255,.7);animation:swipeDot 1.4s cubic-bezier(.5,0,.3,1) infinite}
.gatehint svg{width:64px;height:64px;transform:rotate(-90deg)}
.gatehint circle{fill:none;stroke-width:3}
.gatehint .bg{stroke:rgba(255,255,255,.18)}
.gatehint .fg{stroke:#fff;stroke-dasharray:176;stroke-dashoffset:176;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(255,255,255,.8))}
@keyframes swipeDot{0%{left:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:100%;opacity:0}}
@keyframes ghIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}