:root{
    --ink:#eaf2ff; --sub:#9fb4d8; --card:#0a1128cc; --line:#22345e; --hot:#ff4fc3; --cyan:#35e0e0;
    --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
    --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  }
  *{box-sizing:border-box} html,body{height:100%}
  body{margin:0;background:#050817;color:var(--ink);font-family:var(--sans);overflow:hidden;display:grid;place-items:center}
  .stage{position:relative;width:min(100vw,177.7vh);aspect-ratio:16/9;box-shadow:0 30px 120px #000c;overflow:hidden;border-radius:6px}
  canvas#c,canvas#glstage{position:absolute;inset:0;width:100%;height:100%;display:block}
  canvas#c{image-rendering:pixelated}
  canvas#glstage{display:none;background:#050611;touch-action:manipulation;outline:none}
  body.webgl-live canvas#glstage{display:block}
  body.webgl-live canvas#c,body.webgl-live canvas#fx{display:none!important}
  .world-labels{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;display:none}
  body.webgl-live .world-labels{display:block}
  .raver-tag{position:absolute;transform:translate(-50%,-100%);padding:2px 5px;border:1px solid #334064aa;
    border-radius:4px;background:#070a16cc;color:#edf4ff;font:700 8px/1.2 var(--mono);letter-spacing:.04em;
    white-space:nowrap;text-shadow:0 1px 2px #000;box-shadow:0 2px 8px #0009;will-change:transform}
  .raver-tag.npc{padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
  .raver-tag.npc .name{opacity:.5}
  .raver-tag.me{border-color:#ff4fc3;color:#fff;box-shadow:0 0 10px #ff4fc355}
  .raver-tag.human{border-color:#35e0e0;color:#d9ffff;box-shadow:0 0 10px #35e0e055}
  .raver-tag.human.me{border-color:#ff4fc3;color:#fff;box-shadow:0 0 10px #ff4fc355}
  .raver-tag .say{display:block;margin-top:2px;color:#b9cbeb;font-weight:500;max-width:120px;overflow:hidden;text-overflow:ellipsis}
  #perfmetrics{position:absolute;z-index:30;left:12px;bottom:12px;margin:0;padding:8px 10px;
    border:1px solid #35e0e088;border-radius:5px;background:#030711e8;color:#aefcff;
    font:600 10px/1.45 var(--mono);pointer-events:none;white-space:pre}
  canvas#fx{position:absolute;inset:0;width:100%;height:100%;display:none;pointer-events:none;z-index:1}
  body.bloom canvas#fx{display:block}
  body.bloom canvas#c{visibility:hidden}
  .grain{position:absolute;inset:-50%;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    animation:grain 1.1s steps(4) infinite}
  @keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-6%,3%)}50%{transform:translate(4%,-5%)}75%{transform:translate(-3%,-2%)}100%{transform:translate(0,0)}}
  .vig{position:absolute;inset:0;pointer-events:none;background:radial-gradient(135% 105% at 42% 40%,#0000 48%,#050817d0 100%)}
  .scan{position:absolute;inset:0;pointer-events:none;opacity:.07;background:repeating-linear-gradient(#000 0 1px,#0000 1px 3px)}
  .stage::before,.stage::after{content:"";position:absolute;inset:-12%;z-index:2;pointer-events:none;
    opacity:0;transition:opacity .45s ease;mix-blend-mode:screen}
  body.trip-active canvas#glstage{filter:hue-rotate(var(--trip-hue-shift,0deg)) saturate(1.38) contrast(1.06)}
  body.trip-active .stage::before{opacity:var(--trip-intensity,0);animation:trip-drift 7s ease-in-out infinite alternate}
  body.trip-molly .stage::before{background:radial-gradient(circle at 48% 45%,#ff5fc755 0 11%,#ff3cac18 32%,#0000 64%)}
  body.trip-shroom .stage::before{background:
    radial-gradient(circle at 18% 72%,#bdff6660 0 4%,#54ff9324 8%,#0000 21%),
    radial-gradient(circle at 67% 64%,#b06cff5c 0 5%,#6427ff20 10%,#0000 25%),
    radial-gradient(circle at 46% 44%,#ffb34732,#0000 58%)}
  body.trip-acid .stage::after{opacity:var(--trip-acid,0);background:
    conic-gradient(from 0turn at 47% 48%,#ff2f8d22,#ffd43b1f,#56ff9d22,#17d9ff22,#9d57ff22,#ff2f8d22);
    filter:blur(34px);animation:trip-spin 13s linear infinite}
  body.trip-molly.trip-acid.trip-shroom .stage::before{background:
    radial-gradient(circle at 48% 45%,#ff5fc766 0 10%,#0000 43%),
    radial-gradient(circle at 18% 72%,#bdff6655 0 5%,#0000 23%),
    radial-gradient(circle at 72% 66%,#17d9ff44 0 5%,#0000 26%)}
  @keyframes trip-drift{from{transform:scale(.96) translate3d(-1%,1%,0)}to{transform:scale(1.08) translate3d(2%,-1%,0)}}
  @keyframes trip-spin{to{transform:rotate(1turn) scale(1.08)}}

  .brand{position:absolute;top:3.5%;left:2.6%;display:flex;align-items:center;gap:10px;font-family:var(--mono);z-index:3}
  .live{display:flex;align-items:center;gap:7px;font-size:12px;letter-spacing:.16em;font-weight:700;background:#0a112888;border:1px solid var(--line);padding:5px 11px;border-radius:20px;backdrop-filter:blur(4px)}
  .dot{width:8px;height:8px;border-radius:50%;background:var(--hot);box-shadow:0 0 8px var(--hot);animation:pulse 1.2s ease-in-out infinite}
  @keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}
  .loc{font-size:11px;color:var(--sub);letter-spacing:.14em}
  .upnext{position:absolute;left:2.6%;bottom:15%;width:330px;z-index:5;font-family:var(--mono);
    background:#0a1128ee;border:1px solid var(--line);border-radius:9px;padding:10px 12px;
    backdrop-filter:blur(6px);display:none}
  .upnext.on{display:block}
  .upnext h4{margin:0 0 7px;font-size:9.5px;letter-spacing:.2em;color:#ff8ad0;font-weight:700}
  .upnext .row{display:flex;align-items:center;gap:8px;padding:3px 0;font-size:10px;color:#e6efff}
  .upnext .row .queue-track{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .upnext .row .vote-count{flex:none;min-width:39px;padding:3px 5px;border:1px solid #35e0e055;
    border-radius:10px;background:#071b24;color:#8ff7f0;text-align:center;font-weight:800;white-space:nowrap}
  .upnext .row button{background:rgba(120,220,180,.85);border:0;color:#07231a;border-radius:4px;
    padding:3px 8px;font:inherit;font-size:10px;font-weight:700;cursor:pointer;flex:none}
  .upnext .row button:disabled{background:rgba(140,170,220,.25);color:#8fa4c4;cursor:default}
  .upnext .qhint{margin-top:6px;font-size:9px;color:var(--sub);opacity:.75}
  .upnext .suggestbtn{width:100%;margin-top:8px;background:#271335;border:1px solid #ff4fc366;color:#fff;
    border-radius:6px;padding:7px;font:700 10px var(--mono);cursor:pointer}
  .suggestform{margin-top:7px}.suggestform input{width:100%;background:#080d1d;border:1px solid var(--line);border-radius:6px;
    color:#fff;padding:7px;font:10px var(--mono)}
  .suggestform button{width:100%;margin-top:5px;background:#35e0e0;border:0;border-radius:5px;padding:6px;font:700 10px var(--mono);cursor:pointer}
  #suggestmsg{min-height:13px;margin-top:5px;color:#9fffd8;font-size:9px}
  body.streaming .upnext, body.streaming #nextbtn{display:none}
  .story{position:absolute;top:11%;left:2.6%;width:210px;z-index:3;font-family:var(--mono);
    background:#0a1128cc;border:1px solid var(--line);border-radius:9px;padding:9px 11px;
    backdrop-filter:blur(5px)}
  .story h4{margin:0 0 6px;font-size:9.5px;letter-spacing:.2em;color:#ff8ad0;font-weight:700}
  .story .fact{display:flex;justify-content:space-between;gap:8px;padding:2.5px 0;font-size:10px}
  .story .fact b{color:var(--sub);font-weight:400;letter-spacing:.06em;flex:none}
  .story .fact span{color:#e6efff;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .story .none{font-size:10px;color:var(--sub);opacity:.7}
  body.streaming .story{top:6%}
  @media (max-width:820px){ .story{display:none} }
  .sayrow{display:flex;gap:6px;padding:6px 8px;border-top:1px solid rgba(140,170,220,.14)}
  .sayrow input{flex:1;min-width:0;background:rgba(8,12,24,.85);border:1px solid rgba(140,170,220,.22);
    color:#dfe9ff;border-radius:5px;padding:5px 7px;font:inherit;font-size:11px}
  .sayrow input:focus{outline:2px solid rgba(255,120,200,.5);outline-offset:0}
  .sayrow button{background:rgba(255,90,190,.85);border:0;color:#12060f;border-radius:5px;
    padding:5px 10px;font:inherit;font-size:11px;font-weight:700;cursor:pointer}
  .sayrow button:disabled{opacity:.45;cursor:default}
  body.streaming .sayrow{display:none}
  .mood{position:absolute;top:3.5%;right:38%;font-family:var(--mono);font-size:11px;
    letter-spacing:.16em;color:var(--sub);background:#0a112888;border:1px solid var(--line);
    padding:5px 11px;border-radius:20px;backdrop-filter:blur(4px);z-index:3;text-transform:uppercase}
  .mood.hot{color:#ff8ad0;border-color:rgba(255,120,200,.5);box-shadow:0 0 14px rgba(255,90,190,.35)}
  .count{position:absolute;top:3.5%;right:26%;font-family:var(--mono);font-size:12px;color:var(--sub);background:#0a112888;border:1px solid var(--line);padding:5px 11px;border-radius:20px;backdrop-filter:blur(4px);z-index:3}

  .chat{position:absolute;top:0;right:0;bottom:0;width:23.5%;background:#070d1f;border-left:1px solid var(--line);contain:paint;
    display:flex;flex-direction:column;z-index:4;overflow:hidden}
  .chat h3{margin:0;padding:12px 14px 10px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--sub);border-bottom:1px solid var(--line)}
  .feed{flex:1;min-height:0;overflow:hidden;display:block;padding:8px 12px;contain:strict}
  .feed .msg{margin-top:5px}
  .msg{font-size:12.5px;line-height:1.35;word-wrap:break-word}
  @keyframes pop{from{opacity:0;transform:translateY(4px)}to{opacity:1}}
  .msg .u{font-weight:700;margin-right:5px}
  .msg.k-safety{background:#10251baa;border:1px solid #1f5c3a;border-radius:8px;padding:5px 8px;font-size:12px}
  .msg.k-safety .u{color:#57c98b}
  .msg.k-gift{color:#ffd166}
  .msg.k-event{color:var(--cyan);font-family:var(--mono);font-size:11.5px;letter-spacing:.06em}

  .gifts{padding:8px 10px 10px;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .gift{background:#0d1631;border:1px solid var(--line);border-radius:9px;color:var(--ink);cursor:pointer;min-width:0;
    font-family:var(--mono);font-size:10.5px;padding:7px 2px 6px;display:flex;flex-direction:column;align-items:center;gap:2px;transition:transform .1s,border-color .1s}
  .gift:hover{transform:translateY(-2px);border-color:var(--cyan)}
  .gift .e{font-size:16px;line-height:1}
  .gift .p{color:var(--sub);font-size:9.5px}
  .wallet{display:flex;justify-content:space-between;align-items:center;padding:8px 14px;font-family:var(--mono);font-size:11px;color:var(--sub);border-top:1px solid var(--line)}
  .wallet b{color:#ffd166}
  .charity{color:#57c98b}

  .np{position:absolute;left:2.6%;bottom:4.5%;display:flex;gap:12px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 14px 10px 10px;backdrop-filter:blur(6px);max-width:46%;z-index:3}
  .cover{width:52px;height:52px;border-radius:8px;flex:none;image-rendering:pixelated;box-shadow:0 4px 16px #ff4fc355}
  .track{font-weight:800;font-size:14.5px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track b{color:var(--hot)}.meta{min-width:0}
  .by{font-family:var(--mono);font-size:11px;color:var(--sub);margin-top:3px}
  .by a{color:#ff7fcf;text-decoration:none;border-bottom:1px solid #ff7fcf66}
  .by a:hover,.by a:focus-visible{color:#fff;border-color:#fff;outline:none}
  .vote{display:flex;gap:6px;margin-left:6px}
  .vbtn{background:#0d1631;border:1px solid var(--line);border-radius:8px;color:var(--ink);cursor:pointer;font-size:13px;padding:6px 10px}
  .vbtn:hover{border-color:var(--cyan)}
  .soundbtn{min-width:76px;font-family:var(--mono);font-size:10px;font-weight:800;color:var(--cyan)}
  .soundbtn.playing{border-color:#35e0e0;box-shadow:0 0 12px #35e0e044;color:#fff}
  .soundbtn.error{border-color:#ff8f70;color:#ffb09b}
  .volctl{display:flex;align-items:center;gap:4px;color:var(--sub);font:8px var(--mono);width:78px}
  .volctl input{width:55px;accent-color:var(--cyan)}
  .banner{position:absolute;left:38%;top:16%;transform:translateX(-50%);font-family:var(--mono);font-weight:800;
    font-size:clamp(18px,2.6vw,34px);letter-spacing:.08em;color:#fff;text-shadow:0 0 18px var(--hot),0 0 40px var(--hot);
    opacity:0;transition:opacity .3s;z-index:3;text-align:center;pointer-events:none}
  .banner.on{opacity:1}
  /* broadcast mode: no economy chrome, no login — just the rave */
  body.streaming .gifts, body.streaming .wallet, body.streaming .authbtn,
  body.streaming .custbtn, body.streaming .vote{display:none}
  body.streaming .chat{width:20%}
  .shake{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);z-index:14;display:none;
    text-align:center;font-family:var(--mono);pointer-events:none}
  .shake.on{display:block}
  .shake .word{font-size:clamp(28px,5vw,58px);font-weight:800;letter-spacing:.14em;color:#fff;
    text-shadow:0 0 22px var(--hot),0 0 60px var(--hot)}
  .shake .dots{margin-top:10px;display:flex;gap:8px;justify-content:center}
  .shake .dots i{width:10px;height:10px;border-radius:50%;background:#2a1a3a;display:block}
  .shake .dots i.lit{background:var(--hot);box-shadow:0 0 10px var(--hot)}
  .shake .sub{margin-top:8px;font-size:12px;color:var(--sub);letter-spacing:.1em}
  .custbtn{position:absolute;top:3.5%;right:26%;transform:translateX(230%);font-family:var(--mono);font-size:12px;
    letter-spacing:.1em;background:#0a112888;border:1px solid var(--line);color:var(--ink);padding:5px 12px;
    border-radius:20px;cursor:pointer;z-index:5}
  .custbtn:hover{border-color:var(--hot)}
  .cust{position:absolute;inset:0;background:#050817d9;display:none;place-items:center;z-index:12}
  .cust.on{display:grid}
  .cwrap{background:#0b1220;border:1px solid var(--line);border-radius:16px;width:min(94%,620px);
    max-height:86%;overflow:auto;padding:20px 22px;font-family:var(--mono)}
  .cwrap h3{margin:0 0 4px;font-size:16px;letter-spacing:.05em}
  .cwrap .sub{font-size:11.5px;color:var(--sub);margin-bottom:14px}
  .crow{display:flex;gap:14px;align-items:flex-start;margin-bottom:12px}
  .cprev{flex:none;width:130px;height:170px;background:#070d1a;border:1px solid var(--line);border-radius:12px}
  .cslots{flex:1;min-width:0}
  .slot{margin-bottom:11px}
  .slot h4{margin:0 0 5px;font-size:10.5px;letter-spacing:.16em;color:var(--sub);text-transform:uppercase}
  .opts{display:flex;flex-wrap:wrap;gap:5px}
  .opt{background:#0d1631;border:1px solid var(--line);border-radius:8px;color:var(--ink);cursor:pointer;
    font-family:var(--mono);font-size:10.5px;padding:6px 9px}
  .opt.sel{border-color:var(--hot);background:#1d1030;color:#fff}
  .opt.locked{opacity:.75}
  .opt .c{color:var(--gold,#ffd166);margin-left:5px;font-size:9.5px}
  .huerow{display:flex;align-items:center;gap:9px;margin:6px 0 14px;font-size:11px;color:var(--sub)}
  .huerow input{flex:1}
  .cfoot{display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:1px solid var(--line);padding-top:12px}
  .cfoot .cost{font-size:12px;color:var(--sub)} .cfoot .cost b{color:var(--gold,#ffd166)}
  .cfoot button{background:linear-gradient(100deg,#ff4fc3,#8b5cf6);border:none;border-radius:9px;color:#fff;
    font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.05em;padding:10px 18px;cursor:pointer}
  .cfoot .ghost{background:none;border:1px solid var(--line);color:var(--sub)}
  .authbtn{position:absolute;top:3.5%;right:26%;transform:translateX(110%);font-family:var(--mono);font-size:12px;
    letter-spacing:.1em;background:#0a112888;border:1px solid var(--line);color:var(--ink);padding:5px 13px;
    border-radius:20px;cursor:pointer;z-index:5;backdrop-filter:blur(4px)}
  .authbtn:hover{border-color:var(--hot)}
  .authbtn.me{color:var(--gold,#ffd166);border-color:#554a1d}
  .authbtn[hidden]{display:none!important}
  .modal{position:absolute;inset:0;background:#050817cc;display:none;place-items:center;z-index:9}
  .modal.on{display:grid}
  .mcard{background:#0b1220;border:1px solid var(--line);border-radius:16px;padding:26px 28px;width:min(90%,360px);
    font-family:var(--mono)}
  .mcard h3{margin:0 0 6px;font-size:16px;letter-spacing:.04em}
  .mcard p{margin:0 0 14px;font-size:12px;color:var(--sub);line-height:1.5}
  .mcard input{width:100%;background:#0d1631;border:1px solid var(--line);border-radius:9px;color:var(--ink);
    font-family:var(--mono);font-size:14px;padding:10px 12px;margin-bottom:10px;outline:none}
  .mcard input:focus{border-color:var(--cyan)}
  .mcard button{width:100%;background:linear-gradient(100deg,#ff4fc3,#8b5cf6);border:none;border-radius:9px;
    color:#fff;font-family:var(--mono);font-weight:700;font-size:13px;letter-spacing:.06em;padding:11px;cursor:pointer}
  .mcard .hint{font-size:11px;color:var(--leaf,#7ee08a);margin-bottom:10px}
  .mcard .err{font-size:11px;color:#ff6b81;margin-bottom:8px;min-height:14px}
  .mcard ul{margin:6px 0 12px;padding-left:18px;font-size:12px;color:var(--ink)}
  body.closeup .chat, body.closeup .np, body.closeup .count{display:none}

  .splash{position:absolute;inset:0;z-index:20;display:grid;place-items:center;text-align:center;
    background:radial-gradient(120% 100% at 50% 30%,#0a1128e8,#050817f5);backdrop-filter:blur(3px)}
  .splash.off{display:none}
  .scard{font-family:var(--mono);padding:24px 28px;width:min(94vw,820px);max-height:94vh;overflow:auto;
    border:1px solid #31416dcc;border-radius:20px;background:#080d1de8;box-shadow:0 24px 90px #000b,0 0 50px #ff4fc31a}
  .splash-kicker{font-size:10px;letter-spacing:.22em;color:var(--cyan);margin-bottom:8px}
  .scard h1{margin:0 0 8px;font-size:clamp(22px,4vw,40px);letter-spacing:.06em;color:var(--ink);
    text-shadow:0 0 24px var(--hot)}
  .scard p{margin:0 0 18px;color:var(--sub);font-size:12px;letter-spacing:.04em}
  .namelabel,.custom-label{display:block;text-align:left;font-size:10px;font-weight:800;letter-spacing:.18em;color:#f09bd6;margin:0 0 7px}
  .ravername{box-sizing:border-box;width:100%;background:#0d1631;border:1px solid var(--line);border-radius:10px;color:#fff;
    font-family:var(--mono);font-size:16px;padding:11px 13px;margin-bottom:15px;outline:none}
  .ravername:focus{border-color:var(--cyan);box-shadow:0 0 0 3px #35e0e018}
  .onboard-grid{display:grid;grid-template-columns:260px 1fr;gap:22px;align-items:center;text-align:left}
  .raverpreview{width:260px;height:310px;border:1px solid var(--line);border-radius:14px;background:#050817}
  .onboard-controls{min-width:0}
  .choice-group{margin-bottom:11px}.choiceopts{display:flex;flex-wrap:wrap;gap:6px}
  .scard .choicepick{background:#0d1631;border:1px solid var(--line);border-radius:8px;color:var(--ink);cursor:pointer;
    font-family:var(--mono);font-size:10px;padding:7px 9px;box-shadow:none;letter-spacing:0}
  .scard .choicepick:hover{border-color:var(--cyan)}
  .scard .choicepick.sel{border-color:var(--hot);background:#271335;color:#fff;box-shadow:0 0 12px #ff4fc322}
  .scard .skinpick{width:25px;height:25px;padding:0;border:2px solid #ffffff22;border-radius:50%;background:var(--skin);cursor:pointer}
  .scard .skinpick.sel{border-color:var(--cyan);box-shadow:0 0 0 2px #080d1d,0 0 12px #35e0e088}
  .huepick{display:grid;grid-template-columns:auto 1fr 32px;align-items:center;gap:9px;color:var(--sub);font-size:10px;letter-spacing:.12em;margin-bottom:12px}
  .huepick input{min-width:0;width:100%;accent-color:#ff4fc3}
  .huepick span{text-align:right;color:#fff}
  .extras{display:flex;gap:18px;color:var(--sub);font-size:11px}
  .extras label{display:flex;align-items:center;gap:6px;cursor:pointer}.extras input{accent-color:#35e0e0}
  .subcontrol{margin-top:12px}.totemrow{display:grid;grid-template-columns:90px 1fr;align-items:center;gap:9px;
    color:var(--sub);font-size:10px;letter-spacing:.12em;margin-top:10px}
  .totemrow input{box-sizing:border-box;width:100%;background:#0d1631;border:1px solid var(--line);border-radius:8px;
    color:#fff;font-family:var(--mono);padding:8px 10px;outline:none;text-transform:uppercase}
  [hidden]{display:none!important}
  .splasherr{min-height:16px;margin:9px 0 2px;color:#ff8ca9;font-size:11px;text-align:left}
  .scard #splashgo{width:100%;background:linear-gradient(100deg,#ff4fc3,#8b5cf6);border:none;border-radius:11px;
    color:#fff;font-family:var(--mono);font-weight:700;font-size:15px;letter-spacing:.08em;
    padding:14px 26px;cursor:pointer;box-shadow:0 8px 30px #ff4fc355}
  .scard #splashgo:hover{filter:brightness(1.08)}

  /* ---------- MOBILE PORTRAIT: stacked layout (floor on top, chat below) ---------- */
  @media (max-aspect-ratio: 5/6), (max-width: 720px) {
    body{display:block;overflow:auto}
    .stage{width:100vw;height:100dvh;aspect-ratio:auto;border-radius:0;display:flex;flex-direction:column}
    canvas#c,canvas#glstage{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:16/9;flex:none;order:1}
    .vig{display:none}
    .grain,.scan{height:100%}
    .np{position:static;order:2;max-width:none;margin:8px 10px 4px;padding:8px 10px;
      display:grid;grid-template-columns:40px minmax(0,1fr);gap:8px 10px}
    .np .vote{grid-column:1/-1;justify-content:flex-end;margin-left:0}
    .np .vbtn{white-space:nowrap;flex:none}
    .np .cover{width:40px;height:40px}
    .track{font-size:13px}
    .chat{position:static;order:3;width:100%;flex:1;min-height:0;border-left:none;border-top:1px solid var(--line)}
    .feed{min-height:120px}
    .gifts{grid-template-columns:repeat(6,minmax(0,1fr));gap:5px;padding:6px 8px 8px}
    .gift{font-size:9px;padding:6px 1px 5px}
    .gift .e{font-size:14px}
    .gift .p{font-size:8.5px}
    .brand{top:8px;left:8px}
    .loc{display:none}
    .count{top:8px;right:86px;left:auto;font-size:11px;padding:4px 9px}
    .mood{display:none}                     /* no room for it on a phone */
    .authbtn{top:8px;right:8px;transform:none}
    .scard{width:min(92vw,560px);padding:18px;max-height:92vh}
    .onboard-grid{grid-template-columns:145px 1fr;gap:12px}
    .raverpreview{width:145px;height:190px}
    .scard .choicepick{font-size:9px;padding:6px 7px}
    .banner{left:50%;transform:translateX(-50%);top:20vw}
  }
  /* ---- trip hud: effect card stack (top-right) ---- */
#triphud{
  position:fixed;
  top:max(16px,env(safe-area-inset-top,16px));
  right:max(16px,env(safe-area-inset-right,16px));
  z-index:6;
  display:flex;
  flex-direction:column;
  gap:6px;
  pointer-events:none;
  max-width:220px;
  overflow:hidden;
}
#triphud:empty{display:none!important}
.triphud-card{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  background:rgba(10,8,20,.72);
  border:1px solid rgba(160,120,255,.35);
  border-radius:10px;
  font:600 13px/1.2 system-ui,sans-serif;
  color:#efe6ff;
  letter-spacing:.02em;
  backdrop-filter:blur(6px);
}
.triphud-head{flex:none}
.triphud-ring-wrap{
  position:relative;
  width:36px;
  height:36px;
  flex:none;
}
.triphud-ring{display:block;transform:rotate(-90deg)}
.triphud-ring-bg{fill:none;stroke:rgba(160,120,255,.15);stroke-width:2.5}
.triphud-ring-fg{fill:none;stroke:#efe6ff;stroke-width:2.5;stroke-linecap:round;transition:stroke-dashoffset .25s linear}
.triphud-time-text{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font:700 10px/1 var(--mono,ui-monospace);
  color:#efe6ff;
  pointer-events:none;
}
.triphud-clock-icon{
  flex:none;
  margin-left:0;
  color:rgba(160,120,255,.6);
  opacity:.8;
}
.triphud-stacks{
  flex:none;
  font-size:11px;
  color:rgba(160,120,255,.7);
}
@media (max-aspect-ratio: 5/6), (max-width: 720px) {
  #triphud{top:max(8px,env(safe-area-inset-top,8px));right:max(8px,env(safe-area-inset-right,8px))}
}
@media (prefers-reduced-motion:reduce){
    .grain,.dot{animation:none}
    .grain{opacity:.025}
    .stage::before,.stage::after{animation:none!important;transition:none}
  }

/* Keep the launch policy readable beside guest entry. */
.scard .entry-policy{font-size:12px;line-height:1.5;color:#b3c9be;margin:14px 0 10px}
.entry-policy a{color:#b8f4ca;text-decoration:underline;text-underline-offset:3px}

/* Compact stage navigation and the shared SoundCloud timeline. */
.stagepick{display:flex;align-items:center;gap:7px;font:10px var(--mono);color:var(--sub)}
.stagepick select{max-width:180px;background:#0a1128e8;color:var(--ink);border:1px solid var(--line);
  border-radius:8px;padding:6px 8px;font:600 11px var(--mono);cursor:pointer}
.stagepick select:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.stagepick select:disabled{opacity:.6;cursor:wait}
.brand .loc{display:none}
.custbtn{right:calc(23.5% + 16px);top:calc(3.5% + 40px);transform:none}
.np{width:min(650px,70%);max-width:70%;display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:8px 12px}
.np .vote{grid-column:3;grid-row:1}
.track-progress{grid-column:1/-1;grid-row:2;display:flex;align-items:center;gap:9px;min-width:0;
  color:var(--sub);font:10px/1 var(--mono);font-variant-numeric:tabular-nums}
.track-progress[hidden]{display:none}
.track-progress canvas{display:block;flex:1;min-width:0;width:0;height:30px}
.track-elapsed,.track-duration{flex:none;min-width:30px}
.track-duration{text-align:right}
.triphud-ring-fg{transition:none}
@media (max-aspect-ratio:5/6), (max-width:720px){
  .brand{gap:7px}.stagepick{gap:0}.stagepick>span{display:none}
  .stagepick select{max-width:135px;padding:5px;font-size:10px}
  .count{top:44px;right:8px}
  .custbtn{top:8px;right:8px;transform:none;font-size:10px;padding:5px 8px}
  #triphud{top:max(78px,env(safe-area-inset-top,8px));max-width:calc(100vw - 16px)}
  .np{width:auto;max-width:none;grid-template-columns:40px minmax(0,1fr)}
  .np .vote{grid-column:1/-1;grid-row:3}
  .track-progress canvas{height:26px}
}

/* Searchable owner catalog and persistent vote feedback. */
.upnext{width:min(480px,calc(100% - 24px));bottom:24%;max-height:65%;overflow:auto;z-index:7}
.clipboard-head{display:flex;gap:8px;align-items:center;margin-bottom:10px}
.clipboard-head h4{flex:1;margin:0}
.clipboard-head button{border:1px solid var(--line);background:#101b35;color:var(--ink);border-radius:6px;padding:6px 8px;font:11px var(--mono);cursor:pointer}
#track-close{font-size:22px;line-height:18px}
#track-search-form[hidden]{display:none}
#track-search{width:100%;padding:9px;color:var(--ink);background:#060d1f;border:1px solid var(--line);border-radius:6px;font:12px var(--mono)}
#upnextb{max-height:260px;overflow:auto;overscroll-behavior:contain}
.upnext .row{padding:9px 0;border-bottom:1px solid #253153}
.upnext .row .queue-track{white-space:normal;line-height:1.45}
#track-message{font-size:11px;color:#9fffd8;min-height:14px;margin:8px 0 0}
#up.voted,.upnext .row button.voted:disabled{background:#60204c;border-color:#ff4fc3;color:#fface2;opacity:1}
#up:disabled{cursor:default}
#up.voted{box-shadow:0 0 12px #ff4fc326}
@media (max-aspect-ratio:5/6),(max-width:720px){
  .upnext{position:fixed;left:12px;right:12px;top:64px;bottom:auto;width:auto;max-height:calc(100dvh - 230px)}
  #upnextb{max-height:210px}
}

#vote-message{grid-column:1/-1;grid-row:3;font:10px var(--mono);color:#fface2;overflow-wrap:anywhere}
#vote-message:empty{display:none}
@media (max-aspect-ratio:5/6),(max-width:720px){#vote-message{grid-row:4}}

.upnext.on{display:flex;flex-direction:column}
.upnext>:not(#upnextb){flex:none}
#upnextb{flex:1 1 auto;min-height:70px}