/* Distant Archives - Archive tab, tab bar, auth modal, Other Room button.
   Layered on top of app.css (the radio's original styles). */

/* ---------- left column + tab bar ---------- */
#leftCol{min-width:0;display:flex;flex-direction:column;min-height:0;}
#tabbar{display:flex;gap:8px;margin-bottom:16px;}
.da-tab{
  font-family:inherit;font-weight:700;letter-spacing:.22em;font-size:11px;text-transform:uppercase;
  background:transparent;color:var(--dim);border:1px solid var(--line);border-radius:999px;
  padding:9px 18px;cursor:pointer;transition:.18s;
}
.da-tab:hover{color:var(--muted);border-color:rgba(255,255,255,.18);}
.da-tab.on{
  color:#fff;border-color:rgba(255,255,255,.5);
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.12));
  box-shadow:0 6px 22px -12px rgba(255,255,255,.6);
}
#main[hidden],#archivePanel[hidden],#chatPanel[hidden],#notifyPanel[hidden]{display:none!important;}
#main,#archivePanel,#chatPanel,#notifyPanel{flex:1 1 auto;min-height:0;}

/* ---------- fixed layout: same width on both tabs, no expand ---------- */
/* Locked to the wide Home layout for every tab. The grid no longer animates or
   resizes when switching Lobby/Home, so the player stays put. */
#app{grid-template-columns:200px 1fr 428px;max-width:1820px;}
/* soft crossfade of the left panel when switching tabs */
#main,#archivePanel,#chatPanel,#notifyPanel{transition:opacity .26s ease;}
#main.paneFade,#archivePanel.paneFade,#chatPanel.paneFade,#notifyPanel.paneFade{opacity:0;}

/* ---------- left sidebar (labeled primary nav) ---------- */
#navRail{display:flex;flex-direction:column;align-items:stretch;gap:3px;
  padding:2px 12px 12px;min-width:0;
  border-right:1px solid var(--line);}
.navBrand{display:flex;align-items:center;gap:10px;padding:6px 8px;margin-bottom:14px;}
.navMark{width:46px;height:46px;flex:0 0 auto;border-radius:13px;display:flex;
  align-items:center;justify-content:center;overflow:hidden;
  background:transparent;box-shadow:0 0 26px -10px rgba(124,58,237,.8);}
.navMark img,.navMark svg{width:100%;height:100%;display:block;object-fit:cover;border-radius:13px;}
.navWord{font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--txt);line-height:1.2;}
.navWord b{color:#e8e8ea;font-weight:700;}
.navSep{height:1px;margin:9px 6px;background:var(--line);}
.navItem{position:relative;display:flex;align-items:center;gap:13px;width:100%;
  padding:10px 12px;border-radius:12px;background:transparent;border:1px solid transparent;
  color:var(--muted);cursor:pointer;text-align:left;font:inherit;font-size:14px;font-weight:600;
  letter-spacing:.01em;transition:background .16s,color .16s,border-color .16s;}
.navItem[hidden]{display:none;}
.navItem:hover{color:var(--txt);background:rgba(255,255,255,.05);}
.navItem.on{color:#fff;border-color:rgba(255,255,255,.40);
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.10));}
.navItem.on::after{content:"";position:absolute;left:-13px;top:50%;transform:translateY(-50%);
  width:3px;height:24px;border-radius:0 3px 3px 0;background:linear-gradient(180deg,#e8e8ea,#3a3a40);}
.navItem.on .navIco{color:#e8e8ea;}
.navIco{width:21px;height:21px;flex:0 0 auto;display:block;}
.navIco svg{width:100%;height:100%;display:block;}
.navLabel{white-space:nowrap;}

/* ---------- brutal compaction: keep the whole player in one screen ---------- */
#side{gap:18px;padding:22px 58px 22px 22px;}
.pgPrivacy{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--dim);cursor:pointer;margin:2px 0;line-height:1.35;}
.pgPrivacy input{flex:none;width:16px;height:16px;accent-color:var(--acc);cursor:pointer;}
#dialWrap{max-width:226px;margin-top:0;}
#eq{height:38px;}
#side .sideHdr{margin-bottom:-2px;}

/* transient toast for stub destinations */
#daToast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,12px);
  background:#16161d;border:1px solid var(--line);color:var(--txt);font-size:13px;
  letter-spacing:.02em;padding:10px 16px;border-radius:12px;z-index:120;opacity:0;
  pointer-events:none;transition:opacity .2s,transform .2s;
  box-shadow:0 18px 50px -18px rgba(0,0,0,.9);}
#daToast.on{opacity:1;transform:translate(-50%,0);}

/* ---------- kill the CRT white-noise overlay (it covered everything) ---------- */
canvas#static{display:none!important;}

/* ---------- equalizer: a baseline line so it reads as a bar/meter ---------- */
#eq{position:relative;}
#eq::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),rgba(255,255,255,.55),transparent);
  box-shadow:0 0 8px rgba(255,255,255,.35);}

/* ---------- archive: signed-out gate (blurred preview) ---------- */
#archivePanel{position:relative;display:flex;flex-direction:column;}
#archiveGate{position:relative;flex:1;border:1px solid var(--line);border-radius:18px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;min-height:60vh;
  background:radial-gradient(120% 90% at 80% -10%,rgba(255,255,255,.1),transparent 55%),
             radial-gradient(100% 90% at 0% 110%,rgba(255,255,255,.1),transparent 55%),#0b0b0d;}
.gateBlur{position:absolute;inset:0;filter:blur(34px) saturate(1.2);opacity:.5;pointer-events:none;}
.gateBlur .fauxCard{position:absolute;border-radius:18px;}
.fauxCard.c1{top:6%;left:5%;width:42%;height:30%;background:#000;}
.fauxCard.c2{top:10%;right:6%;width:38%;height:24%;background:#000;}
.fauxCard.c3{top:44%;left:8%;width:34%;height:30%;background:linear-gradient(135deg,#3a3a40,#26262c);}
.fauxCard.c4{top:40%;right:5%;width:44%;height:34%;background:#000;}
.fauxCard.c5{bottom:4%;left:18%;width:30%;height:22%;background:#000;}
.fauxCard.c6{bottom:6%;right:20%;width:26%;height:20%;background:#000;}
.gateInner{position:relative;z-index:2;max-width:30rem;text-align:center;padding:28px;}
.gateKicker{font-family:ui-monospace,monospace;font-size:11px;letter-spacing:.4em;color:var(--acc);margin-bottom:14px;}
.gateInner h2{font-size:clamp(28px,4.4vw,44px);line-height:1.05;margin:0 0 14px;color:#fff;font-weight:800;letter-spacing:-.01em;}
.gateInner p{color:var(--muted);font-size:14.5px;line-height:1.65;margin:0 auto 22px;max-width:26rem;}
.gateBtns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.gateNote{margin-top:16px;font-size:11px;letter-spacing:.04em;color:var(--dim);min-height:14px;}

.gatePrimary{font-family:inherit;font-weight:800;letter-spacing:.06em;font-size:14px;color:#fff;cursor:pointer;
  border:none;border-radius:12px;padding:14px 26px;background:#000;
  box-shadow:0 12px 34px -12px rgba(255,255,255,.6);transition:transform .15s,filter .15s;}
.gatePrimary:hover{filter:brightness(1.07);transform:translateY(-1px);}
.gatePrimary.full{width:100%;margin-top:6px;padding:13px;}
.gateGhost{font-family:inherit;font-weight:600;letter-spacing:.04em;font-size:13px;color:var(--muted);cursor:pointer;
  background:transparent;border:1px solid var(--line);border-radius:12px;padding:14px 22px;transition:.15s;}
.gateGhost:hover{color:#fff;border-color:rgba(255,255,255,.25);}
.gateGhost.sm{padding:8px 14px;font-size:12px;}

/* ---------- archive: signed-in placeholder ---------- */
#archiveApp{flex:1;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:18px;
  background:#0b0b0d;overflow:hidden;}
.archiveTop{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line);}
.archiveTop[hidden]{display:none;}
#archiveHello{font-family:ui-monospace,monospace;font-size:12px;letter-spacing:.16em;color:var(--acc);}
.archiveSoon{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 24px;gap:6px;}
.soonGlyph{font-size:34px;color:#c9c9cf;text-shadow:0 0 22px rgba(255,255,255,.6);margin-bottom:8px;}
.archiveSoon h3{margin:0;color:#fff;font-size:20px;font-weight:800;}
.archiveSoon p{margin:0;color:var(--muted);font-size:14px;line-height:1.6;max-width:30rem;}

/* ---------- auth modal ---------- */
#authOverlay{position:fixed;inset:0;z-index:90;background:rgba(4,4,6,.74);backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);display:flex;align-items:center;justify-content:center;padding:24px;}
#authOverlay[hidden]{display:none;}
#authModal{position:relative;width:100%;max-width:420px;background:linear-gradient(180deg,#15151b,#0d0d11);
  border:1px solid var(--line);border-radius:20px;padding:30px 28px 22px;box-shadow:0 40px 100px rgba(0,0,0,.7);}
#authClose{position:absolute;top:14px;right:16px;background:none;border:none;color:var(--dim);font-size:22px;cursor:pointer;line-height:1;}
#authClose:hover{color:#fff;}
.authKicker{font-family:ui-monospace,monospace;font-size:10px;letter-spacing:.4em;color:var(--acc);margin-bottom:8px;}
#authModal h2{margin:0 0 18px;font-size:23px;color:#fff;font-weight:800;letter-spacing:-.01em;}
.authError{background:rgba(255,70,120,.1);border:1px solid rgba(255,70,120,.35);color:#ff9fb6;
  font-size:12.5px;line-height:1.5;border-radius:10px;padding:10px 12px;margin-bottom:14px;}
.authError[hidden]{display:none;}
.authField{display:block;margin-bottom:13px;}
.authField span{display:block;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim);margin-bottom:6px;}
.authField input{width:100%;font-family:inherit;font-size:14px;color:#fff;background:rgba(255,255,255,.04);
  border:1px solid var(--line);border-radius:11px;padding:12px 13px;transition:border-color .15s;}
.authField input:focus{outline:none;border-color:rgba(255,255,255,.5);}
.authSwap{margin:16px 0 2px;text-align:center;font-size:12.5px;color:var(--muted);}
.authSwap button{background:none;border:none;font:inherit;color:var(--acc);cursor:pointer;text-decoration:underline;text-underline-offset:3px;}

/* ---------- Continue with Google ---------- */
.authGoogle{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;
  font-family:inherit;font-weight:650;font-size:14px;letter-spacing:-.01em;color:#fff;cursor:pointer;
  background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:11px;padding:12px;
  margin-bottom:4px;transition:border-color .15s,background .15s;}
.authGoogle:hover{border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.08);}
.authGoogle svg{flex:0 0 auto;}
.authOr{display:flex;align-items:center;gap:12px;margin:14px 0;color:var(--muted);
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;}
.authOr::before,.authOr::after{content:"";flex:1;height:1px;background:var(--line);}

/* ---------- Other Room button (right column) ---------- */
.orBtn{width:100%;margin-top:9px;font-family:inherit;font-weight:700;letter-spacing:.16em;font-size:12px;
  text-transform:uppercase;padding:13px;border-radius:12px;cursor:pointer;display:flex;align-items:center;
  justify-content:center;gap:9px;background:var(--panel);color:var(--muted);border:1px solid var(--line);transition:.18s;}
.orBtn:hover{border-color:rgba(255,255,255,.45);color:var(--txt);}
.orBtn .orGlyph{font-size:13px;opacity:.6;}
.orBtn.on{color:#f0f0f2;border-color:rgba(255,255,255,.6);
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.08));
  box-shadow:0 0 22px -4px rgba(255,255,255,.55);animation:orPulse 2.6s ease-in-out infinite;}
.orBtn.on .orGlyph{opacity:1;color:#f0f0f2;}
@keyframes orPulse{0%,100%{box-shadow:0 0 18px -6px rgba(255,255,255,.4)}50%{box-shadow:0 0 28px -2px rgba(255,255,255,.7)}}

/* ============================================================
   PHASE 2 - THE FEED (composer, filter bar, post cards, threads)
   ============================================================ */
#archiveApp{padding:0;}
#feedRoot{flex:1;min-height:0;display:flex;flex-direction:column;overflow-y:auto;padding:16px;gap:14px;}
#feedRoot::-webkit-scrollbar{width:8px;}
#feedRoot::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:8px;}

/* ---- composer ---- */
.composer{border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.01));
  padding:20px;display:flex;flex-direction:column;gap:16px;}
.compTypes{display:flex;gap:7px;}
.compType{font-family:inherit;font-weight:700;letter-spacing:.14em;font-size:10.5px;text-transform:uppercase;
  background:transparent;color:var(--dim);border:1px solid var(--line);border-radius:999px;padding:7px 14px;cursor:pointer;transition:.16s;}
.compType:hover{color:var(--muted);}
.compType.on{color:#fff;border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.08);}
.composer textarea{width:100%;resize:vertical;min-height:46px;font-family:inherit;font-size:14px;color:#fff;
  background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:12px;padding:11px 12px;transition:border-color .15s;}
.composer textarea:focus{outline:none;border-color:rgba(255,255,255,.45);}
.compMedia{display:flex;flex-wrap:wrap;align-items:center;gap:12px;}
.compMedia[hidden]{display:none;}
#compUrl{flex:1;min-width:200px;font-family:inherit;font-size:13px;color:#fff;background:rgba(255,255,255,.04);
  border:1px solid var(--line);border-radius:10px;padding:10px 12px;}
#compUrl:focus{outline:none;border-color:rgba(255,255,255,.45);}
.compUpload{font-family:inherit;font-weight:600;font-size:12px;letter-spacing:.04em;color:var(--muted);cursor:pointer;
  border:1px solid var(--line);border-radius:10px;padding:10px 14px;transition:.15s;white-space:nowrap;}
.compUpload:hover{color:#fff;border-color:rgba(255,255,255,.4);}
.compPreview{width:100%;}
.compPreview[hidden]{display:none;}
.compPreview img{max-height:200px;max-width:100%;border-radius:12px;border:1px solid var(--line);}
.compFoot{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.compHint{font-size:11.5px;color:var(--muted);letter-spacing:.02em;}
.gatePrimary.sm{padding:10px 22px;font-size:13px;border-radius:11px;}
.gatePrimary.sm:disabled{opacity:.6;cursor:default;transform:none;filter:none;}

/* ---- filter bar ---- */
.filterBar{display:flex;gap:7px;flex-wrap:wrap;position:sticky;top:-16px;z-index:3;
  padding:8px 0;background:linear-gradient(180deg,#0b0b0d 70%,transparent);}
.filt{font-family:ui-monospace,monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  background:transparent;color:var(--dim);border:1px solid var(--line);border-radius:999px;padding:7px 13px;cursor:pointer;transition:.16s;}
.filt:hover{color:var(--muted);}
.filt.on{color:#fff;border-color:rgba(255,255,255,.5);background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.1));}

/* ---- feed list ---- */
.feedList{display:flex;flex-direction:column;gap:0;}
.feedEmpty{text-align:center;color:var(--dim);font-size:13.5px;padding:34px 16px;letter-spacing:.02em;}
.feedEmpty[hidden]{display:none;}

/* ---- post card (X-style: flat pitch-black rows, hairline separators) ---- */
.postCard{--glow:rgba(255,255,255,.4);position:relative;border:0;border-bottom:1px solid var(--line);border-radius:0;
  background:transparent;padding:14px 16px;display:flex;flex-direction:column;gap:11px;
  box-shadow:none;transition:background .15s;}
.postCard::before{display:none;}
.tag-image{--glow:rgba(255,255,255,.6);}
.tag-gif{--glow:rgba(255,255,255,.6);}
.tag-music{--glow:rgba(255,255,255,.65);}
.tag-text{--glow:rgba(255,255,255,.6);}
.tag-poll{--glow:rgba(45,212,191,.6);}
.postCard.justIn{animation:cardIn .5s ease both;}
@keyframes cardIn{from{opacity:0;transform:translateY(-8px) scale(.99);}to{opacity:1;transform:none;}}

.pcHead{display:flex;align-items:center;gap:10px;}
.pcAvatar{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:none;border:1px solid var(--line);}
.pcAvatarFallback{display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;color:#fff;
  background:#000;}
.pcWho{display:flex;flex-direction:column;line-height:1.2;margin-right:auto;min-width:0;}
.pcName{font-weight:700;font-size:13.5px;color:#fff;}
.pcTime{font-family:ui-monospace,monospace;font-size:10.5px;color:var(--dim);letter-spacing:.04em;}
.pcTag{font-family:ui-monospace,monospace;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:#fff;border:1px solid var(--glow);border-radius:999px;padding:4px 9px;
  box-shadow:0 0 14px -4px var(--glow);background:rgba(255,255,255,.02);}

.pcMediaWrap{display:flex;flex-direction:column;gap:9px;}
.pcMedia{width:100%;max-height:540px;object-fit:contain;border-radius:12px;display:block;
  border:1px solid var(--line);background:#0a0a0c;}
.pcCaption{margin:0;color:var(--muted);font-size:13.5px;line-height:1.55;}
.pcTextBody .pcText{margin:0;color:#eee;font-size:16px;line-height:1.6;letter-spacing:.01em;
  padding:6px 2px;white-space:pre-wrap;word-break:break-word;}

.pcActions{display:flex;align-items:center;gap:8px;}
.pcBtn{font-family:inherit;font-size:12.5px;color:var(--muted);background:transparent;border:1px solid var(--line);
  border-radius:999px;padding:7px 13px;cursor:pointer;display:flex;align-items:center;gap:6px;transition:.16s;}
.pcBtn:hover{color:#fff;border-color:rgba(255,255,255,.2);}
.pcShare{padding:7px 12px;}
.pcShare.copied{color:#7cf29a;border-color:rgba(124,242,154,.4);}
.pcViews{display:inline-flex;align-items:center;gap:5px;color:var(--muted);font-size:12.5px;padding:7px 10px;margin-left:auto;}
.pcViews svg{opacity:.8;}
.pcViewsN{font-variant-numeric:tabular-nums;}
.pcHeart{font-size:14px;color:var(--dim);transition:color .16s,transform .16s;display:inline-block;}
.pcLike.liked{border-color:rgba(255,255,255,.5);color:#f4f4f6;}
.pcLike.liked .pcHeart{color:#c9c9cf;}
.pcLike.pop .pcHeart{animation:heartPop .34s ease;}
@keyframes heartPop{0%{transform:scale(1)}35%{transform:scale(1.5)}60%{transform:scale(.9)}100%{transform:scale(1)}}

/* ---- comment thread ---- */
.pcThread{border-top:1px solid var(--line);padding-top:14px;display:flex;flex-direction:column;gap:14px;}
.pcThread[hidden]{display:none;}
.threadList{display:flex;flex-direction:column;gap:18px;max-height:240px;overflow-y:auto;}
.threadEmpty{color:var(--dim);font-size:14px;letter-spacing:.02em;}

/* one comment = a vertical block (name+time, text, reply) - same font everywhere */
.cmt{display:flex;flex-direction:column;gap:6px;font-size:14px;line-height:1.55;}
.cmtHead{display:flex;align-items:baseline;gap:8px;}
.cmtWho{font-weight:700;color:#fff;font-size:14px;}
.cmtText{color:var(--muted);word-break:break-word;font-size:14px;}
.cmtAt{color:#cdd2da;font-weight:600;}
.cmtTime{font-family:inherit;font-size:12px;color:var(--dim);font-weight:400;}
.cmtReplyBtn{align-self:flex-start;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--dim);
  background:transparent;border:none;cursor:pointer;padding:3px 0;margin-top:6px;letter-spacing:.02em;}
.cmtReplyBtn:hover{color:#cdd2da;}

/* collapsible nested replies: indent + a thread line, with a small chevron toggle */
.cmtToggle{align-self:flex-start;font-family:inherit;font-size:13px;font-weight:600;color:#cdd2da;
  background:transparent;border:none;cursor:pointer;padding:2px 0;margin:2px 0;letter-spacing:.01em;}
.cmtToggle:hover{filter:brightness(1.15);}
.cmtKids{display:flex;flex-direction:column;gap:18px;margin-left:6px;padding-left:14px;
  border-left:2px solid rgba(255,255,255,.2);margin-top:4px;}
.cmtKids[hidden]{display:none;}

/* reply tag: blue @handle chip that sits before the input */
.replyTag{display:inline-flex;align-items:center;gap:6px;align-self:center;
  background:rgba(125,211,252,.1);border:1px solid rgba(125,211,252,.32);border-radius:9px;padding:6px 9px;}
.replyTag[hidden]{display:none;}
.replyAt{font-family:inherit;font-size:13px;font-weight:700;color:#cdd2da;white-space:nowrap;}
.replyX{font-family:inherit;font-size:15px;line-height:1;color:var(--dim);background:transparent;
  border:none;cursor:pointer;padding:0 2px;}
.replyX:hover{color:#fff;}

.threadInput{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.threadInput input{flex:1;min-width:0;font-family:inherit;font-size:14px;color:#fff;background:rgba(255,255,255,.04);
  border:1px solid var(--line);border-radius:10px;padding:9px 11px;}
.threadInput input:focus{outline:none;border-color:rgba(255,255,255,.45);}
.threadSend{font-family:inherit;font-weight:700;font-size:13px;color:#fff;cursor:pointer;border:none;border-radius:10px;
  padding:9px 16px;background:#000;}

@media(max-width:880px){
  #app{grid-template-columns:1fr;max-width:none;}
  #navRail{order:0;flex-direction:row;align-items:center;width:100%;justify-content:center;gap:8px;
    padding:8px;border-right:none;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30;
    background:rgba(10,10,13,.78);backdrop-filter:blur(10px);}
  #navRail .navBrand{display:none;}
  #navRail .navSep{display:none;}
  #navRail .navItem{width:auto;padding:8px 14px;}
  #navRail .navItem.on::after{display:none;}
  #leftCol{order:1;} #side{order:2;padding:22px;}
  #archiveGate{min-height:48vh;}
  #feedRoot{padding:12px;}
}

/* ============================================================
   MODERN MINIMALIST REDESIGN (2026-06-23)
   user: "lean into modern minimalist, everything's too glassy, calm
   it down, but keep the synth core. middle feed stays as-is, just use
   a more readable text color." Built for a broad audience (gamers too).
   Loads after app.css so these win at equal specificity.
   ============================================================ */
:root{
  --surface:#0e0a16;        /* black-purple panel */
  --surface2:#160f24;       /* elevated / hover */
  --line:rgba(255,255,255,.10);
  --line2:rgba(255,255,255,.20);
  --read:#cfcfd4;           /* comfortable body-reading color */
}

/* calmer page backdrop - black with a faint purple wash */
body{
  background:
    radial-gradient(120% 90% at 88% -12%, rgba(255,255,255,.10), transparent 55%),
    radial-gradient(100% 90% at -5% 112%, rgba(255,255,255,.08), transparent 60%),
    linear-gradient(160deg,#0c0913 0%,#070509 62%,#040305 100%);
}

/* ---- player panel: solid + flat, no glass / heavy shadow ---- */
#side{background:var(--surface);border:1px solid var(--line);box-shadow:none;}
#side .ft{border-top:1px solid var(--line);}

/* dial: drop the big coloured halo, keep only a faint needle glow */
#dialWrap::after{box-shadow:inset 0 0 38px rgba(0,0,0,.55);}
svg#dial{filter:none;}
.needle{filter:drop-shadow(0 0 4px rgba(255,255,255,.5));}

/* EQ: keep the synth bars, lose the glowing baseline */
#eq::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);box-shadow:none;}

/* ---- buttons: black with a purple edge, modern display font ---- */
/* primary CTA = black button, bright purple border, white text */
#enterCta,.gatePrimary{background:#150d24;color:#fff;border:1px solid #c9c9cf;box-shadow:none;animation:none;
  font-family:var(--display);font-weight:600;letter-spacing:.02em;}
#enterCta:hover,.gatePrimary:hover{background:#1d1334;border-color:#e8e8ea;filter:none;}

/* secondary / utility buttons = black, faint purple edge */
#tune{background:var(--surface2);color:var(--txt);border:1px solid var(--line2);box-shadow:none;
  font-family:var(--display);letter-spacing:.04em;}
#tune:hover{background:#1c1430;border-color:rgba(255,255,255,.5);filter:none;}
#favMode{background:var(--surface2);border:1px solid var(--line2);}
#favMode.on{background:rgba(255,255,255,.12);color:#f4f4f6;border:1px solid rgba(255,255,255,.4);box-shadow:none;}
#favMode.on #favModeState{color:var(--dim);}
#play{background:var(--surface2);color:#fff;border:1px solid rgba(255,255,255,.4);}
#play.hint{animation:none;border-color:rgba(255,255,255,.55);}

/* favorites list panel: solid, drop the pink rail */
#favPanel{background:var(--surface);border:1px solid var(--line);}

/* other-room: calm the amber glow + pulse */
.orBtn.on{box-shadow:none;animation:none;background:rgba(255,255,255,.1);}

/* thread send: black button with purple edge */
.threadSend{background:#150d24;color:#fff;border:1px solid #c9c9cf;font-family:var(--display);}

/* ---- gate: kill the heavy multicolour blur, keep a clean field ---- */
.gateBlur{opacity:.09;filter:blur(64px) saturate(1);}
.gateInner p{color:var(--read);}
.soonGlyph{text-shadow:none;}

/* ---- feed: layout unchanged, just easier to read ---- */
#archiveHello{color:var(--txt);}
.pcCaption{color:var(--read);}
.cmtText{color:var(--read);}

/* ---- modern display font on the UI chrome (body text stays Inter) ---- */
.brand,.navWord,.navLabel,#sName,.gateInner h2,.archiveSoon h3,#archiveHello,
.sideHdr .t,.pcName,#authTitle,.gateGhost,#favMode,#play{font-family:var(--display);}

/* ============================================================
   PURE BLACK + PURPLE PASS (2026-06-23)
   user: "pure black and purple, filled not glass - except the player
   panel (glass over a gif), whose buttons stay black w/ white text."
   Appended last so it wins at equal specificity.
   ============================================================ */
:root{
  --surface:#08070a;        /* near-pure-black card */
  --surface2:#100e15;       /* elevated / hover */
  --line:rgba(255,255,255,.12);
  --line2:rgba(255,255,255,.24);
}

/* pure black page, faint purple glow */
body{
  background:
    radial-gradient(120% 80% at 90% -10%, rgba(255,255,255,.13), transparent 55%),
    radial-gradient(90% 80% at -6% 112%, rgba(255,255,255,.08), transparent 60%),
    #050406;
}
#app{background:transparent;}
#navRail{background:#040305;border-right:1px solid var(--line);}

/* ---- primary actions = FILLED purple, white text (not glass) ---- */
#enterCta,.gatePrimary,.threadSend{
  background:#4a4a52;color:#fff;border:1px solid #4a4a52;box-shadow:none;animation:none;
  font-family:var(--display);font-weight:600;letter-spacing:.02em;}
#enterCta:hover,.gatePrimary:hover,.threadSend:hover{background:#2a2a33;border-color:#2a2a33;filter:none;}
.orBtn.on{background:#4a4a52;color:#fff;border-color:#4a4a52;box-shadow:none;animation:none;}

/* ===== PLAYER PANEL - the one glass exception, over a live GIF ===== */
#side{
  position:relative;border-radius:18px;overflow:hidden;
  background:rgba(16,11,26,.34);
  border:1px solid rgba(255,255,255,.30);
  box-shadow:0 22px 60px -30px rgba(0,0,0,.95);
}
#side::before{                 /* the chosen gif, fills the player box exactly (cover crops any overflow) */
  content:"";position:absolute;inset:0;z-index:0;
  background-image:var(--player-bg, url('/assets/bg/bg1.gif'));
  background-size:cover;background-position:center;background-repeat:no-repeat;
  opacity:.6;}
#side::after{                  /* frosted-glass scrim for readability */
  content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg, rgba(7,5,14,.38), rgba(7,5,14,.56));
  -webkit-backdrop-filter:blur(4px) saturate(1.15);
  backdrop-filter:blur(4px) saturate(1.15);}
#side > *{position:relative;z-index:2;}

/* player buttons = pure black, pure white text (over the glass) */
#tune,#favMode,#play,#prev,#next,.tbtn,#supportBtn,#privacyLink,#bgMenuBtn{
  background:#0a0a0c;color:#fff;border:1px solid rgba(255,255,255,.16);box-shadow:none;}
#tune:hover,#favMode:hover,.tbtn:hover,#supportBtn:hover,#bgMenuBtn:hover,#privacyLink:hover{
  background:#161618;border-color:rgba(255,255,255,.32);filter:none;color:#fff;}
#favMode.on{background:#000;color:#fff;border-color:rgba(255,255,255,.6);}
#favMode.on #favModeState{color:#e8e8ea;}
#favPanel{background:rgba(5,4,8,.62);border:1px solid rgba(255,255,255,.22);}
#side .ft{border-top:1px solid rgba(255,255,255,.1);}
#side .ft span,#side .vi,.eqLabel{color:#cfcfd4;}

/* ===== three-dot background menu ===== */
.sideHdr{position:relative;}
#bgMenuBtn{font-size:17px;line-height:1;padding:3px 10px;border-radius:9px;cursor:pointer;
  font-family:var(--display);}
#bgMenu{position:absolute;top:40px;left:14px;z-index:30;width:212px;
  background:#060509;border:1px solid rgba(255,255,255,.32);border-radius:13px;
  padding:11px;box-shadow:0 24px 60px -22px rgba(0,0,0,.95);}
#bgMenu[hidden]{display:none;}
.bgMenuHd{font-family:var(--display);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin:0 2px 9px;}
.bgGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.bgOpt{height:56px;border-radius:10px;border:1px solid rgba(255,255,255,.16);cursor:pointer;
  background-size:cover;background-position:center;background-repeat:no-repeat;background-color:#0a0a0c;
  color:#fff;font-family:var(--display);font-size:12px;transition:border-color .15s,box-shadow .15s;}
.bgOpt:hover{border-color:rgba(255,255,255,.65);}
.bgOpt.on{border-color:#2a2a33;box-shadow:0 0 0 2px rgba(255,255,255,.55);}
.bgOff{display:flex;align-items:center;justify-content:center;letter-spacing:.08em;background-color:#000;}
.bgOpt[data-bg$="bg1.gif"]{background-image:url('../assets/bg/bg1.gif');}
.bgOpt[data-bg$="bg2.gif"]{background-image:url('../assets/bg/bg2.gif');}
.bgOpt[data-bg$="bg3.gif"]{background-image:url('../assets/bg/bg3.gif');}
.bgOpt[data-bg$="bg4.gif"]{background-image:url('../assets/bg/bg4.gif');}
/* custom player GIFs (add / hover-to-delete) */
.bgCustomTile{position:relative;display:block;}
.bgCustomTile .bgOpt{width:100%;}
.bgTrash{position:absolute;top:5px;right:5px;width:24px;height:24px;border-radius:8px;
  border:1px solid rgba(255,255,255,.18);cursor:pointer;display:flex;align-items:center;justify-content:center;
  padding:0;color:#fff;background:rgba(8,8,10,.72);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  opacity:0;transform:scale(.85);transition:opacity .12s,transform .12s,background .12s,border-color .12s;}
.bgTrash svg{display:block;}
.bgCustomTile:hover .bgTrash,.bgTrash:focus-visible{opacity:1;transform:scale(1);}
.bgTrash:hover{background:#d23b5b;border-color:#d23b5b;}
.bgAdd{display:flex;align-items:center;justify-content:center;font-size:26px;line-height:1;
  font-weight:300;color:var(--muted);background-color:#0c0c10;border-style:dashed;}
.bgAdd:hover{color:#fff;}

/* tap-to-fullscreen image viewer */
#feedRoot img.pcMedia,.pgPostImg,.pgAvatar img,.pgBanner:not(.pgBannerEmpty){cursor:pointer;}
#daLightbox[hidden]{display:none;}
#daLightbox{position:fixed;inset:0;z-index:140;display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(3,3,5,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  animation:lbFade .14s ease;}
#daLightbox .lbImg{max-width:96vw;max-height:92vh;width:auto;height:auto;border-radius:12px;
  box-shadow:0 30px 90px rgba(0,0,0,.7);object-fit:contain;cursor:default;}
#daLightbox .lbClose{position:absolute;top:16px;right:16px;width:42px;height:42px;border-radius:50%;
  border:1px solid rgba(255,255,255,.18);background:rgba(15,15,18,.7);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .12s,border-color .12s;}
#daLightbox .lbClose:hover{background:rgba(210,59,91,.9);border-color:transparent;}
@keyframes lbFade{from{opacity:0}to{opacity:1}}

/* ===== community / feed = pure black + purple ===== */
#feedRoot .composer,.archiveSoon,.gateInner{background:var(--surface);}
.threadInput input{background:rgba(255,255,255,.05);}

/* ============================================================
   PHASE 4 - polls, music embeds, profiles & members directory
   ============================================================ */

/* --- archive top buttons --- */
.archiveTopBtns{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}

/* --- clickable post author --- */
.pcAvatarBtn{cursor:pointer;transition:transform .12s,box-shadow .12s;}
.pcAvatarBtn:hover{transform:translateY(-1px);box-shadow:0 0 0 2px rgba(255,255,255,.5);}
.clickName{cursor:pointer;}
.clickName:hover{color:#e8e8ea;text-decoration:underline;text-underline-offset:2px;}

/* --- composer: music --- */
.compMusic{display:flex;flex-direction:column;gap:9px;}
.compMusic[hidden]{display:none;}
.compMusic input{width:100%;font-family:inherit;font-size:14px;color:#fff;
  background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:10px;padding:10px 12px;}
.compMusic input:focus{outline:none;border-color:rgba(255,255,255,.5);}
.compEmbed[hidden]{display:none;}

/* --- composer: poll --- */
.compPoll{display:flex;flex-direction:column;gap:8px;}
.compPoll[hidden]{display:none;}
.pollOpts{display:flex;flex-direction:column;gap:7px;}
.pollOptIn{width:100%;font-family:inherit;font-size:13.5px;color:#fff;
  background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:9px;padding:9px 11px;}
.pollOptIn:focus{outline:none;border-color:rgba(45,212,191,.5);}
.pollAddOpt{align-self:flex-start;font-family:inherit;font-weight:600;font-size:12px;
  color:var(--muted);cursor:pointer;background:transparent;border:1px dashed var(--line2);
  border-radius:9px;padding:7px 12px;transition:.15s;}
.pollAddOpt:hover{color:#fff;border-color:rgba(45,212,191,.55);}
.pollAddOpt:disabled{opacity:.4;cursor:not-allowed;}

/* --- music embed in a post card --- */
.pcEmbed{width:100%;height:152px;border:1px solid var(--line);border-radius:12px;display:block;background:#000;}
.pcEmbed.pcEmbedVideo{height:auto;aspect-ratio:16 / 9;}
.pcEmbed.pcEmbedAudio{height:80px;background:transparent;}
.pcEmbedLink{display:inline-block;font-family:var(--display);font-weight:600;font-size:13px;color:#e8e8ea;
  text-decoration:none;border:1px solid var(--line2);border-radius:10px;padding:9px 13px;}
.pcEmbedLink:hover{border-color:rgba(255,255,255,.6);color:#fff;}

/* --- poll inside a post card --- */
.pcPoll{display:flex;flex-direction:column;gap:10px;}
.pollQ{margin:0;font-family:var(--display);font-size:16px;font-weight:600;color:#fff;letter-spacing:-.01em;}
.pollList{display:flex;flex-direction:column;gap:8px;}
.pollOpt{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;
  gap:10px;width:100%;text-align:left;cursor:pointer;font-family:inherit;font-size:13.5px;color:#fff;
  background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:11px;padding:11px 13px;
  transition:border-color .15s;}
.pollOpt:hover{border-color:rgba(45,212,191,.5);}
.pollFill{position:absolute;left:0;top:0;bottom:0;width:0;z-index:0;
  background:linear-gradient(90deg,rgba(45,212,191,.26),rgba(45,212,191,.12));
  transition:width .45s cubic-bezier(.2,.8,.2,1);}
.pollLab{position:relative;z-index:1;flex:1;min-width:0;}
.pollPct{position:relative;z-index:1;font-family:ui-monospace,monospace;font-size:12px;color:var(--muted);}
.pollOpt.voted{border-color:rgba(45,212,191,.75);}
.pollOpt.voted .pollFill{background:linear-gradient(90deg,rgba(45,212,191,.4),rgba(45,212,191,.18));}
.pollOpt.voted .pollPct{color:#7ff0df;}
.pollMeta{font-family:ui-monospace,monospace;font-size:11px;letter-spacing:.04em;color:var(--dim);}

/* ============================================================
   PROFILE + MEMBERS MODAL
   ============================================================ */
#profileOverlay{position:fixed;inset:0;z-index:95;background:rgba(4,4,6,.74);backdrop-filter:blur(7px);
  display:flex;align-items:flex-start;justify-content:center;padding:7vh 18px 18px;overflow-y:auto;}
#profileOverlay[hidden]{display:none;}
#profileModal{position:relative;width:100%;max-width:460px;background:linear-gradient(180deg,#15131c,#0c0b10);
  border:1px solid var(--line2);border-radius:18px;box-shadow:0 30px 80px -30px rgba(0,0,0,.95);
  overflow:hidden;}
#profileClose{position:absolute;top:10px;right:12px;z-index:5;width:30px;height:30px;border-radius:8px;
  font-size:20px;line-height:1;color:#fff;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.16);
  cursor:pointer;}
#profileClose:hover{background:rgba(0,0,0,.7);}
#profileBody{padding:0 22px 22px;}

.pfLoading{padding:26px 0;text-align:center;color:var(--muted);font-size:13.5px;}
.pfBanner{height:110px;margin:0 -22px 0;background:linear-gradient(120deg,#241a3d,#10101a);
  background-size:cover;background-position:center;}
.pfHead{display:flex;align-items:flex-end;gap:13px;margin-top:-34px;margin-bottom:14px;}
.pfAvatar{width:72px;height:72px;border-radius:18px;object-fit:cover;flex-shrink:0;
  border:3px solid #0c0b10;background:#1a1622;}
.pfAvatarFallback{display:flex;align-items:center;justify-content:center;font-family:var(--display);
  font-size:28px;font-weight:700;color:#e8e8ea;}
.pfId{flex:1;min-width:0;padding-bottom:2px;}
.pfNameRow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.pfName{font-family:var(--display);font-size:19px;font-weight:700;color:#fff;letter-spacing:-.01em;}
.pfBadge{font-family:ui-monospace,monospace;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;background:#000;border-radius:6px;padding:3px 7px;font-weight:700;}
.pfBadge.sm{font-size:8.5px;padding:2px 6px;}
.pfHandle{display:block;font-family:ui-monospace,monospace;font-size:12.5px;color:var(--muted);margin-top:2px;}
.pfEditBtn{align-self:center;font-family:inherit;font-weight:600;font-size:12px;color:#fff;cursor:pointer;
  background:#4a4a52;border:1px solid #4a4a52;border-radius:9px;padding:8px 13px;}
.pfEditBtn:hover{background:#2a2a33;}
.pfBio{margin:0 0 14px;color:#e8e8ea;font-size:14px;line-height:1.6;word-break:break-word;}
.pfTags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px;}
.pfTag{font-family:inherit;font-size:11.5px;color:#e8e8ea;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:5px 11px;}
.pfLinks{display:flex;flex-wrap:wrap;gap:8px;}
.pfLink{font-family:var(--display);font-weight:600;font-size:12.5px;color:#e8e8ea;text-decoration:none;
  border:1px solid var(--line2);border-radius:9px;padding:7px 12px;}
.pfLink:hover{border-color:rgba(255,255,255,.6);color:#fff;}
.pfFoot{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);}
.pfGhost{font-family:inherit;font-weight:600;font-size:12.5px;color:var(--muted);cursor:pointer;
  background:transparent;border:1px solid var(--line);border-radius:9px;padding:8px 13px;transition:.15s;}
.pfGhost:hover{color:#fff;border-color:rgba(255,255,255,.25);}

/* edit form */
.pfTitle{margin:18px 0 14px;font-family:var(--display);font-size:18px;font-weight:700;color:#fff;}
.pfField{display:block;margin-bottom:12px;}
.pfFieldLab{display:block;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);margin-bottom:6px;}
.pfInput{width:100%;font-family:inherit;font-size:13.5px;color:#fff;background:rgba(255,255,255,.04);
  border:1px solid var(--line);border-radius:9px;padding:9px 11px;}
.pfInput:focus{outline:none;border-color:rgba(255,255,255,.5);}
.pfTextarea{resize:vertical;line-height:1.5;}
.pfCheck{display:flex;align-items:center;gap:9px;margin:4px 0 14px;font-size:13px;color:#e8e8ea;cursor:pointer;}
.pfCheck input{width:16px;height:16px;accent-color:#c9c9cf;}
.pfErr{color:#ff9c9c;font-size:12.5px;margin-bottom:10px;}
.pfErr[hidden]{display:none;}
.pfEditRow{display:flex;justify-content:flex-end;gap:9px;margin-top:6px;}
.pfSave{font-family:inherit;font-weight:600;font-size:13px;color:#fff;cursor:pointer;
  background:#4a4a52;border:1px solid #4a4a52;border-radius:9px;padding:9px 16px;}
.pfSave:hover{background:#2a2a33;}
.pfSave:disabled{opacity:.5;cursor:not-allowed;}

/* members directory */
.pfDir{display:flex;flex-direction:column;gap:8px;}
.pfDirRow{display:flex;align-items:center;gap:11px;width:100%;text-align:left;cursor:pointer;
  background:rgba(255,255,255,.025);border:1px solid var(--line);border-radius:12px;padding:10px 12px;transition:.15s;}
.pfDirRow:hover{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.07);}
.pfDirAvatar{width:42px;height:42px;border-radius:11px;overflow:hidden;flex-shrink:0;background:#1a1622;
  display:flex;align-items:center;justify-content:center;}
.pfDirAvatar img{width:100%;height:100%;object-fit:cover;display:block;}
.pfDirAvatar.pfAvatarFallback{font-size:17px;}
.pfDirMeta{flex:1;min-width:0;}
.pfDirName{display:flex;align-items:center;gap:7px;font-family:var(--display);font-weight:600;font-size:14px;color:#fff;}
.pfDirHandle{display:block;font-family:ui-monospace,monospace;font-size:11.5px;color:var(--muted);margin-top:1px;}

/* ============================================================
   SCROLL + LAYOUT OVERHAUL (2026-06-24)
   user: "middle should scroll down like a normal page, get rid of the inner
   slide-boxes, i can't reach the bottom of the player, and after sign-in I
   still see Join the community." Fixes: real [hidden] for gate/app, natural
   page scrolling, no inner overflow boxes, player grows so it's reachable.
   ============================================================ */

/* THE sign-in bug: #archiveGate/#archiveApp have display:flex, so the bare
   [hidden] attribute couldn't hide them -> gate + feed showed at once. */
#archiveGate[hidden],#archiveApp[hidden]{display:none!important;}

/* kill every inner scroll container the user hated (works on all widths) */
#feedRoot{overflow:visible!important;}
#archiveApp{overflow:visible!important;}
.threadList{max-height:none!important;overflow:visible!important;}
.filterBar{position:static!important;top:auto!important;}

@media(min-width:881px){
  /* X-STYLE FIXED SHELL: the page itself NEVER scrolls. The 3-column grid is
     locked to the viewport - nav (left) and player (right) stay perfectly
     still, and ONLY the center feed column scrolls up/down. */
  html,body{height:100%!important;overflow:hidden!important;}
  #app{position:fixed!important;inset:0!important;height:100vh!important;
       margin:0;align-items:stretch!important;overflow:hidden!important;}

  /* nav: fixed column, doesn't move */
  #navRail{align-self:stretch;max-height:100vh;overflow-y:auto;}

  /* RADIO tab keeps its full-viewport column (wave pinned to the bottom) */
  #main{min-height:0;height:100vh;overflow-y:auto;}

  /* COMMUNITY tab: the center column is THE scroller (only this moves) */
  #leftCol{display:block;height:100vh;overflow-y:auto;min-height:0;}
  #archivePanel{display:block;min-height:0;}
  #archiveApp{display:block;}
  #feedRoot{display:block;min-height:0;padding:18px;}

  /* player: fixed column on the right, never moves; scrolls INTERNALLY only if
     it's taller than the screen (saved-stations expanded). */
  #side{position:relative!important;align-self:stretch;
        height:100vh;max-height:100vh;overflow-y:auto;overflow-x:hidden;}

  /* hide the scrollbar "slider" on the scrollers - clean like X */
  #leftCol,#side,#navRail,#main{scrollbar-width:none;}
  #leftCol::-webkit-scrollbar,#side::-webkit-scrollbar,
  #navRail::-webkit-scrollbar,#main::-webkit-scrollbar{width:0;height:0;display:none;}
}

/* saved-stations playlist: drop its own inner scrollbox ("border slide") -
   the player already scrolls to its own end, so the list just flows. */
#favList{max-height:none!important;overflow:visible!important;}

/* POST DETAIL VIEW - click a post to open its own page (back button + comments),
   exactly like X. The composer / filter / feed list hide; the center column
   still scrolls the detail. */
.postCard.clickable{cursor:pointer;}
.postCard.clickable:hover{background:rgba(255,255,255,.03);}
#feedRoot.inDetail > .composer,
#feedRoot.inDetail > .filterBar,
#feedRoot.inDetail > #feedList,
#feedRoot.inDetail > #feedEmpty{display:none!important;}
.postDetail{display:block;}
.postDetail[hidden]{display:none;}
.detailBar{display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:6;
  margin:-18px -18px 0;padding:12px 16px;
  background:rgba(10,7,16,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(255,255,255,.07);}
.detailBack{font-family:inherit;font-size:15px;font-weight:700;color:#fff;
  background:transparent;border:none;cursor:pointer;border-radius:99px;padding:7px 13px;
  transition:background .15s;}
.detailBack:hover{background:rgba(255,255,255,.10);}
.detailTitle{font-size:18px;font-weight:700;color:#fff;letter-spacing:.01em;}
.detailBody{padding-top:14px;}
.postDetail .postCard{cursor:default;}
.postDetail .pcThread{display:block!important;}

/* composer type chips: wrap instead of spilling "POLL" out of the box */
.compTypes{flex-wrap:wrap;}
.composer{overflow:visible;}

/* CLEAN NAV (Twitter-style): no persistent filled pill, just a hover highlight
   and a bold white active item. user: "notice how clean twitter is, they only
   add highlight on hover." */
.navItem{border:none!important;}
.navItem:hover{color:#fff;background:rgba(255,255,255,.08);}
.navItem.on{color:#fff;background:transparent;font-weight:700;}
.navItem.on:hover{background:rgba(255,255,255,.08);}
.navItem.on .navIco{color:#fff;}

/* ════════════════ CREATOR SPACE (v1) ════════════════ */
/* Studio is a PAGE, not a popup: it sits in the centre content column (between
   the nav rail and the player) on desktop, full-screen on mobile, with a Back
   button instead of a floating modal card. */
#creatorOverlay{position:fixed;inset:0;z-index:94;background:var(--bg0);
  display:block;overflow-y:auto;padding:0;}
#creatorOverlay[hidden]{display:none;}
@media(min-width:881px){
  /* Studio takes the whole canvas right of the nav rail. The FM player is
     force-collapsed while the Studio is open, so there's no leftover wave /
     dead space on the right - the editor uses the full width. */
  #creatorOverlay{left:248px;right:0;
    border-left:1px solid var(--line);}
}
#creatorModal{position:relative;width:100%;max-width:640px;margin:0 auto;min-height:100%;
  background:transparent;border:0;border-radius:0;box-shadow:none;overflow:visible;}
#creatorClose{position:absolute;top:14px;left:14px;z-index:5;height:34px;padding:0 13px 0 11px;
  border-radius:9px;font-size:14px;font-weight:600;line-height:1;color:var(--txt);
  background:rgba(255,255,255,.05);border:1px solid var(--line2);cursor:pointer;
  display:inline-flex;align-items:center;gap:4px;}
#creatorClose:hover{background:rgba(255,255,255,.1);border-color:var(--acc);}
#creatorBody{padding:62px 22px 40px;font-size:14px;color:var(--read);}
.crLoading{padding:30px 0;text-align:center;color:var(--muted);font-size:14px;}

/* header */
.crHead{display:flex;align-items:center;gap:14px;margin-bottom:18px;}
.crArt{flex:0 0 auto;width:72px;height:72px;border-radius:14px;background:#241a33 center/cover no-repeat;
  display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:800;color:#fff;
  border:1px solid var(--line2);}
.crIdCol{min-width:0;}
.crKicker{font-size:11px;letter-spacing:.16em;color:var(--dim);font-weight:700;}
.crName{margin:3px 0 2px;font-size:20px;font-weight:800;color:#fff;line-height:1.2;}
.crHandle{font-size:14px;color:var(--dim);}
.crBio{font-size:14px;line-height:1.55;color:var(--read);margin:0 0 16px;}

/* studio section tabs (one section at a time: Profile / Tracks / Games) */
.crTabs{display:flex;gap:8px;margin:4px 0 18px;border-bottom:1px solid var(--line);padding-bottom:0;}
.crTab{appearance:none;border:0;background:transparent;cursor:pointer;
  font-family:var(--display);font-size:14px;font-weight:650;color:var(--dim);
  padding:10px 14px;border-bottom:2px solid transparent;margin-bottom:-1px;transition:.15s;}
.crTab:hover{color:var(--read);}
.crTab.on{color:#fff;border-bottom-color:var(--acc2);}
.crSection[hidden]{display:none !important;}
.crPanels{min-height:120px;}

/* form */
.crForm{display:flex;flex-direction:column;gap:14px;margin-bottom:8px;}
.crField{display:flex;flex-direction:column;gap:6px;}
.crFieldLabel{font-size:13px;color:var(--dim);font-weight:600;}
.crField input,.crField textarea{font-family:inherit;font-size:14px;color:#fff;background:rgba(255,255,255,.04);
  border:1px solid var(--line);border-radius:10px;padding:10px 12px;}
.crField textarea{min-height:76px;resize:vertical;line-height:1.5;}
.crField input:focus,.crField textarea:focus{outline:none;border-color:rgba(255,255,255,.45);}

.crMedia{display:flex;flex-direction:column;gap:10px;}
.crUploadRow,.crSaveRow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.crFileBtn{display:inline-block;font-family:inherit;font-size:13px;font-weight:600;color:#fff;cursor:pointer;
  background:rgba(255,255,255,.06);border:1px solid var(--line2);border-radius:10px;padding:9px 14px;}
.crFileBtn:hover{background:rgba(255,255,255,.12);}
.crFileName{font-size:13px;color:var(--dim);}
.crMsg{font-size:13px;color:var(--dim);}

.crPrimary{font-family:inherit;font-weight:700;font-size:14px;color:#fff;cursor:pointer;border:none;
  border-radius:10px;padding:10px 18px;background:#000;color:#fff;}
.crPrimary:hover{filter:brightness(1.08);}
.crPrimary:disabled{opacity:.55;cursor:default;}
.crGhost{font-family:inherit;font-weight:700;font-size:14px;color:#fff;cursor:pointer;
  background:transparent;border:1px solid var(--line2);border-radius:10px;padding:9px 16px;margin-bottom:16px;}
.crGhost:hover{background:rgba(255,255,255,.08);}

/* tracks */
.crTracks{margin-top:22px;border-top:1px solid var(--line);padding-top:18px;}
.crSubhead{font-size:16px;font-weight:800;color:#fff;margin:0 0 14px;}
.crNote{font-size:13px;color:var(--dim);line-height:1.5;margin:0 0 16px;max-width:560px;}
.pgFreq{font-size:11px;font-weight:700;letter-spacing:.02em;color:#cfe8ff;
  background:rgba(125,211,252,.12);border:1px solid rgba(125,211,252,.35);
  border-radius:99px;padding:2px 8px;white-space:nowrap;cursor:help;}
.crAddTrack{display:flex;flex-direction:column;gap:16px;margin-bottom:18px;max-width:560px;
  background:rgba(255,255,255,.02);border:1px solid var(--line);border-radius:14px;padding:16px 16px 18px;}
.crStep{display:flex;gap:12px;align-items:flex-start;}
.crStepNum{flex:0 0 auto;width:24px;height:24px;border-radius:50%;font-size:12px;font-weight:800;
  color:#fff;background:rgba(255,255,255,.1);border:1px solid var(--line2);
  display:flex;align-items:center;justify-content:center;margin-top:1px;}
.crStepBody{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;}
.crStepLabel{font-size:13px;font-weight:700;color:#fff;}
.crStepRow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.crAddCta{align-self:flex-start;}
.crTrackTitle{width:100%;font-family:inherit;font-size:14px;color:#fff;background:rgba(255,255,255,.04);
  border:1px solid var(--line);border-radius:10px;padding:9px 12px;}
.crTrackTitle:focus{outline:none;border-color:rgba(255,255,255,.45);}
.crTrackList{display:flex;flex-direction:column;gap:10px;}
.crTrack{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.03);
  border:1px solid var(--line);border-radius:12px;padding:10px 12px;}
.crTrackPlay{flex:0 0 auto;width:36px;height:36px;border-radius:50%;font-size:13px;color:#fff;cursor:pointer;
  background:#000;border:none;display:flex;align-items:center;justify-content:center;}
.crTrackPlay:hover{filter:brightness(1.1);}
.crTrackMeta{flex:1;min-width:0;}
.crTrackTitleTxt{font-size:14px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.crTrackSub{font-size:12px;color:var(--dim);}
.crTrackAdd{font-family:inherit;font-size:13px;font-weight:600;color:#e8e8ea;cursor:pointer;
  background:transparent;border:1px solid rgba(255,255,255,.35);border-radius:99px;padding:6px 12px;white-space:nowrap;}
.crTrackAdd:hover{background:rgba(255,255,255,.12);}
.crTrackDel{flex:0 0 auto;width:28px;height:28px;border-radius:8px;font-size:16px;line-height:1;color:var(--dim);
  background:transparent;border:1px solid var(--line2);cursor:pointer;}
.crTrackDel:hover{color:#fff;background:rgba(255,80,80,.18);border-color:rgba(255,80,80,.4);}
.crEmpty{font-size:13px;color:var(--dim);padding:6px 0;}
.navItem.on::after{display:none!important;}

/* ════════════════ CREATOR PAGE (inline, profile = creator space) ════════════════ */
#feedRoot.inPage > .composer,
#feedRoot.inPage > .filterBar,
#feedRoot.inPage > #feedList,
#feedRoot.inPage > #feedEmpty,
#feedRoot.inPage > #postDetail{display:none!important;}
.pageView{display:block;}
.pageView[hidden]{display:none;}
.pgLoading{padding:40px 0;text-align:center;color:var(--muted);font-size:14px;}

/* top bar */
.pgBar{display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:6;
  margin:-18px -18px 0;padding:12px 16px;
  background:rgba(10,7,16,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(255,255,255,.07);}
.pgBack{font-family:inherit;font-size:15px;font-weight:700;color:#fff;background:transparent;
  border:none;cursor:pointer;border-radius:99px;padding:7px 12px;transition:background .15s;}
.pgBack:hover{background:rgba(255,255,255,.10);}
.pgBarTitle{font-size:18px;font-weight:700;color:#fff;letter-spacing:.01em;}

.pgBody{padding-top:14px;}
.pgBanner{height:150px;border-radius:16px;background:#1a1426 center/cover no-repeat;border:1px solid var(--line2);}
.pgBannerEmpty{background:linear-gradient(120deg,#241a33,#15131c);}

.pgHead{display:flex;align-items:flex-end;gap:14px;margin:-40px 4px 0;padding:0 6px;}
.pgAvatar{flex:0 0 auto;width:86px;height:86px;border-radius:18px;overflow:hidden;background:#241a33;
  border:3px solid #0c0b10;display:flex;align-items:center;justify-content:center;}
.pgAvatar img{width:100%;height:100%;object-fit:cover;}
.pgAvatarFallback{font-size:34px;font-weight:800;color:#fff;}
.pgId{flex:1 1 auto;min-width:0;padding-bottom:4px;}
.pgNameRow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.pgName{font-size:21px;font-weight:800;color:#fff;letter-spacing:.01em;}
.pgArtist{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#e8e8ea;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);border-radius:99px;padding:2px 8px;}
.pgHandle{display:block;font-size:14px;color:var(--dim);margin-top:2px;}
.pgEditBtn{flex:0 0 auto;font-family:inherit;font-size:13px;font-weight:700;color:#fff;cursor:pointer;
  background:transparent;border:1px solid var(--line2);border-radius:99px;padding:8px 16px;transition:.16s;}
.pgEditBtn:hover{background:rgba(255,255,255,.08);}

/* follow button + follower/following counts */
.pgFollowBtn{flex:0 0 auto;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;
  color:#0a0a0c;background:#fff;border:1px solid #fff;border-radius:99px;padding:8px 18px;transition:.16s;}
.pgFollowBtn:hover{filter:brightness(.92);}
.pgFollowBtn:disabled{opacity:.5;cursor:default;}
.pgFollowBtn.following{color:var(--txt);background:transparent;border-color:var(--line2);}
.pgFollowBtn.following:hover{border-color:#e0455e;color:#e0455e;background:transparent;}
.pgMsgBtn{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  color:var(--txt);background:transparent;border:1px solid var(--line2);border-radius:50%;
  width:38px;height:38px;padding:0;transition:.16s;}
.pgMsgBtn:hover{border-color:var(--acc);background:rgba(255,255,255,.08);color:var(--acc);}
.pgMsgBtn svg{display:block;}
.pgActions{display:flex;align-items:center;gap:8px;}
.pgCounts{display:flex;gap:20px;margin:12px 8px 0;}
.pgCount{font-size:13.5px;color:var(--muted);background:none;border:0;padding:2px 0;cursor:pointer;font:inherit;}
.pgCount:hover .pgCountL,.pgCount:hover .pgCountN{color:#e8e8ea;}
.pgCountN{color:var(--txt);font-weight:750;}
.pgCountL{color:var(--muted);}

/* followers / following list modal */
.pgFollowOv{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.62);backdrop-filter:blur(3px);padding:18px;}
.pgFollowModal{width:100%;max-width:420px;max-height:78vh;display:flex;flex-direction:column;
  background:var(--bg2,#14141a);border:1px solid var(--line2,#2a2a33);border-radius:16px;overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.5);}
.pgFollowHd{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;
  border-bottom:1px solid var(--line,#23232b);}
.pgFollowTitle{font-size:15px;font-weight:750;color:var(--txt);}
.pgFollowClose{background:none;border:0;color:var(--muted);font-size:16px;cursor:pointer;line-height:1;padding:4px;}
.pgFollowClose:hover{color:var(--txt);}
.pgFollowList{overflow-y:auto;padding:6px;}
.pgFollowRow{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  background:none;border:0;padding:9px 10px;border-radius:11px;cursor:pointer;font:inherit;}
.pgFollowRow:hover{background:rgba(255,255,255,.05);}
.pgFollowAv{width:42px;height:42px;border-radius:50%;overflow:hidden;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;background:#2a2540;color:#fff;font-weight:800;}
.pgFollowAv img{width:100%;height:100%;object-fit:cover;}
.pgFollowAv.pgAvatarFallback{font-size:18px;}
.pgFollowId{display:flex;flex-direction:column;min-width:0;}
.pgFollowNameRow{display:flex;align-items:center;gap:7px;}
.pgFollowName{font-size:14px;font-weight:700;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pgFollowHandle{font-size:12.5px;color:var(--muted);}

.pgBio{margin:14px 8px 0;color:var(--read);font-size:14.5px;line-height:1.6;}
.pgTags{display:flex;flex-wrap:wrap;gap:7px;margin:12px 8px 0;}
.pgChip{font-size:12px;color:var(--muted);background:rgba(255,255,255,.05);border:1px solid var(--line);
  border-radius:99px;padding:4px 11px;}
.pgLinks{display:flex;flex-wrap:wrap;gap:8px;margin:12px 8px 0;}
.pgLink{font-size:13px;font-weight:600;color:#cdd2da;text-decoration:none;border:1px solid rgba(125,211,252,.3);
  border-radius:99px;padding:5px 12px;transition:.16s;}
.pgLink:hover{background:rgba(125,211,252,.12);}

/* owner compose */
.pgCompose{margin:18px 8px 0;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:14px;padding:14px;}
.pgComposeText{width:100%;box-sizing:border-box;resize:vertical;min-height:54px;font:inherit;font-size:14.5px;
  color:#fff;background:transparent;border:none;outline:none;}
.pgComposeText::placeholder{color:var(--dim);}
.pgComposeRow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px;}
.pgImgBtn,.pgFileBtn{font-family:inherit;font-weight:600;font-size:13px;color:var(--muted);cursor:pointer;
  background:transparent;border:1px solid var(--line2);border-radius:99px;padding:6px 13px;transition:.16s;}
.pgImgBtn:hover,.pgFileBtn:hover{color:#fff;background:rgba(255,255,255,.07);}
.pgFileName{font-size:12px;color:var(--dim);max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pgPost{font-family:inherit;font-weight:700;font-size:13.5px;color:#fff;cursor:pointer;
  background:#000;border:none;border-radius:99px;padding:8px 18px;}
.pgPost:disabled{opacity:.6;cursor:default;}
.pgGhost{font-family:inherit;font-weight:600;font-size:13.5px;color:var(--muted);cursor:pointer;
  background:transparent;border:1px solid var(--line2);border-radius:99px;padding:8px 16px;}
.pgMsg{font-size:12.5px;color:var(--dim);}

/* tracks + posts sections */
.pgTracks,.pgPosts{margin:24px 8px 0;}
.pgSubhead{margin:0 0 12px;font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
.pgAddTrack{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:14px;
  background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:12px;padding:11px;}
.pgTrackTitle{flex:1 1 160px;min-width:0;font:inherit;font-size:14px;color:#fff;background:transparent;
  border:none;border-bottom:1px solid var(--line2);outline:none;padding:5px 2px;}
.pgTrackTitle::placeholder{color:var(--dim);}
.pgTrackList{display:flex;flex-direction:column;gap:8px;}
.pgTrack{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.03);border:1px solid var(--line);
  border-radius:12px;padding:10px 12px;}
.pgTrackPlay{flex:0 0 auto;width:38px;height:38px;border-radius:50%;font-size:14px;color:#fff;cursor:pointer;
  background:#000;border:none;display:flex;align-items:center;justify-content:center;}
.pgTrackMeta{flex:1 1 auto;min-width:0;}
.pgTrackTitle2{font-size:14.5px;font-weight:700;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pgTrackSub{font-size:12px;color:var(--dim);}
.pgTrackAdd{font-family:inherit;font-size:13px;font-weight:600;color:#e8e8ea;cursor:pointer;
  background:transparent;border:1px solid rgba(255,255,255,.35);border-radius:99px;padding:6px 12px;white-space:nowrap;}
.pgTrackAdd:hover{background:rgba(255,255,255,.12);}
.pgTrackDel{flex:0 0 auto;width:28px;height:28px;border-radius:8px;font-size:16px;line-height:1;color:var(--dim);
  background:transparent;border:1px solid var(--line2);cursor:pointer;}
.pgTrackDel:hover{color:#fff;background:rgba(255,80,80,.18);border-color:rgba(255,80,80,.4);}
.pgEmpty,.pgPostEmpty{font-size:13px;color:var(--dim);padding:6px 0;}

.pgPostList{display:flex;flex-direction:column;gap:12px;}
.pgPostCard{display:block;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:14px;padding:14px;}
.pgPostText{margin:0;color:var(--read);font-size:14.5px;line-height:1.6;word-break:break-word;}
.pgPostImg{display:block;width:100%;max-height:440px;object-fit:cover;border-radius:10px;margin-top:10px;border:1px solid var(--line);}
.pgPostTime{margin-top:8px;font-size:12px;color:var(--dim);}

/* edit form */
.pgForm{display:flex;flex-direction:column;gap:14px;margin:18px 8px 0;}
.pgField{display:flex;flex-direction:column;gap:6px;}
.pgFieldLabel{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);}
.pgField input,.pgField textarea{font:inherit;font-size:14px;color:#fff;background:rgba(255,255,255,.04);
  border:1px solid var(--line2);border-radius:10px;padding:9px 11px;outline:none;}
.pgField textarea{resize:vertical;min-height:64px;}
.pgUploadRow{display:flex;align-items:center;gap:10px;}
.pgCheck{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--muted);cursor:pointer;}
.pgFormRow{display:flex;gap:10px;align-items:center;}

/* player source switch (FM / My Music / Artist) */
.srcSwitch{display:flex;gap:5px;margin:0 0 12px;padding:4px;border-radius:99px;
  background:rgba(255,255,255,.05);border:1px solid var(--line);}
.srcBtn{flex:1 1 auto;font-family:inherit;font-size:12px;font-weight:700;letter-spacing:.02em;
  color:var(--dim);background:transparent;border:none;border-radius:99px;padding:6px 8px;cursor:pointer;
  transition:.15s;white-space:nowrap;}
.srcBtn:hover{color:#fff;}
.srcBtn.on{color:#fff;background:#000;}

/* ============================================================
   SMOOTH REVEALS (2026-06-24) - comment threads & rows ease in
   instead of snapping. Keeps the feed feeling polished, not jumpy.
   ============================================================ */
@keyframes threadReveal{from{opacity:0;transform:translateY(-5px);}to{opacity:1;transform:none;}}
.pcThread:not([hidden]){animation:threadReveal .26s cubic-bezier(.2,.7,.2,1) both;}
@keyframes cmtReveal{from{opacity:0;transform:translateY(3px);}to{opacity:1;transform:none;}}
.cmt{animation:cmtReveal .22s ease both;}



/* ============================================================================
   SOCIAL - follows, messages, alerts. Layered on the synthwave palette.
   ============================================================================ */

/* ---- nav unread badges ---- */
.navItem{position:relative;}
.navBadge{
  position:absolute;top:6px;left:50%;margin-left:2px;min-width:16px;height:16px;
  padding:0 4px;border-radius:9px;background:#000;
  color:#fff;font-size:10px;font-weight:800;line-height:16px;text-align:center;
  box-shadow:0 0 0 2px var(--bg0),0 4px 12px -4px rgba(255,255,255,.8);
}

/* ---- shared sign-in gate for chat / alerts ---- */
.socialGate{display:flex;align-items:center;justify-content:center;height:100%;padding:32px;}
.socialGate .gateInner{max-width:420px;text-align:center;}
.socialGate .gateKicker{font-size:11px;letter-spacing:.26em;color:var(--acc);text-transform:uppercase;margin-bottom:10px;}
.socialGate h2{margin:0 0 10px;font-size:24px;color:var(--txt);}
.socialGate p{color:var(--muted);line-height:1.6;margin:0 0 20px;}
.socialGate .gateBtns{display:flex;gap:10px;justify-content:center;}

/* ---- profile: follow / message / counts ---- */
.pfActions{margin-left:auto;display:flex;gap:8px;align-self:flex-start;}
.pfFollow,.pfMsg{
  font-family:inherit;font-weight:700;font-size:13px;border-radius:999px;padding:8px 18px;cursor:pointer;
  border:1px solid rgba(255,255,255,.5);background:#000;color:#fff;
  transition:.16s;
}
.pfFollow.on{background:transparent;color:var(--txt);border-color:var(--line);}
.pfFollow.on:hover{border-color:#f87171;color:#f87171;}
.pfMsg{background:transparent;color:var(--txt);border-color:var(--line);}
.pfMsg:hover:not(:disabled){border-color:var(--acc);color:var(--acc);}
.pfMsg:disabled{opacity:.4;cursor:not-allowed;}
.pfFollowsYou{
  display:inline-block;margin-left:8px;font-size:10.5px;font-weight:700;letter-spacing:.04em;
  color:var(--muted);background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:2px 7px;
  vertical-align:middle;
}
.pfStats{display:flex;gap:22px;margin:4px 0 16px;}
.pfStat{background:none;border:0;color:var(--muted);font-size:13.5px;cursor:pointer;padding:0;font-family:inherit;}
.pfStat b{color:var(--txt);font-weight:800;}
.pfStat:hover b{text-decoration:underline;}

/* ============================== MESSAGES ================================== */
#chatPanel,#notifyPanel{display:flex;flex-direction:column;overflow:hidden;}
#chatWrap{flex:1 1 auto;display:grid;grid-template-columns:300px 1fr;min-height:0;
  border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--panel);}
#chatListCol{display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--line);}
.chatListHd{display:flex;align-items:center;justify-content:space-between;padding:16px 16px 12px;}
.chatListHd span{font-size:19px;font-weight:800;color:var(--txt);}
#chatNewBtn{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:var(--panel2);
  color:var(--acc);font-size:19px;line-height:1;cursor:pointer;transition:.16s;}
#chatNewBtn:hover{border-color:var(--acc);background:rgba(255,255,255,.14);}
.chatSearch{padding:0 12px 10px;}
.chatSearch input{width:100%;box-sizing:border-box;background:var(--bg1);border:1px solid var(--line);
  border-radius:999px;padding:9px 14px;color:var(--txt);font-family:inherit;font-size:13px;}
.chatSearch input:focus{outline:none;border-color:var(--acc);}
#chatList{flex:1 1 auto;overflow-y:auto;min-height:0;}
.chatRow{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:none;border:0;
  padding:10px 14px;cursor:pointer;border-left:2px solid transparent;font-family:inherit;transition:background .14s;}
.chatRow:hover{background:var(--panel2);}
.chatRow.on{background:rgba(255,255,255,.1);border-left-color:var(--acc);}
.chatAv{width:42px;height:42px;border-radius:50%;flex:none;overflow:hidden;display:flex;align-items:center;
  justify-content:center;background:var(--bg2);color:var(--acc);font-weight:800;font-size:16px;}
.chatAv img{width:100%;height:100%;object-fit:cover;}
.chatAvGroup{background:#000;color:#fff;}
.chatRowMid{min-width:0;flex:1 1 auto;}
.chatRowTop{display:flex;justify-content:space-between;gap:8px;}
.chatRowName{font-weight:700;color:var(--txt);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.chatRowTime{color:var(--dim);font-size:12px;flex:none;}
.chatRowPrev{color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px;}
.chatRowDot{width:9px;height:9px;border-radius:50%;background:var(--acc);flex:none;box-shadow:0 0 8px var(--acc);}
.chatListEmpty,.chatLoading,.chatNewEmpty{padding:24px 16px;color:var(--muted);font-size:13px;text-align:center;}

#chatThreadCol{display:flex;flex-direction:column;min-height:0;position:relative;}
.chatEmpty{margin:auto;text-align:center;max-width:300px;padding:30px;}
.chatEmptyArt{font-size:40px;color:var(--acc);opacity:.5;margin-bottom:8px;}
.chatEmpty h3{margin:0 0 6px;color:var(--txt);font-size:20px;}
.chatEmpty p{color:var(--muted);line-height:1.6;margin:0 0 16px;font-size:14px;}
#chatThread{display:flex;flex-direction:column;min-height:0;height:100%;}
#chatThreadHd{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);}
.chatThreadName{font-weight:800;color:var(--txt);font-size:15px;}
.chatBack{display:none;background:none;border:0;color:var(--acc);font-size:20px;cursor:pointer;padding:0 4px 0 0;}
.chatAvGroup img{width:100%;height:100%;object-fit:cover;}
.chatGroupEdit{margin-left:auto;flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--panel2);color:var(--txt);
  cursor:pointer;transition:.16s;}
.chatGroupEdit:hover{border-color:var(--acc);color:var(--acc);background:rgba(255,255,255,.1);}
.chatGroupEdit svg{display:block;}
/* When the radio player is collapsed it shows a floating pill (#miniPlayer,
   position:fixed; top-right; z-index:60) that sits over the chat header's
   top-right corner - which is exactly where the group-settings gear lives,
   making it unclickable. While collapsed, dock the gear inline right after the
   group name (away from the corner) so it's always reachable at any width. */
body.playerCollapsed .chatGroupEdit{margin-left:8px;}
#chatMsgs{flex:1 1 auto;overflow-y:auto;min-height:0;padding:16px;display:flex;flex-direction:column;gap:3px;
  background-size:cover;background-position:center;background-repeat:no-repeat;}
/* when a group sets a background, keep bubbles readable with a dark scrim */
#chatMsgs.chatMsgsBg{background-color:#0a0a0c;}
#chatMsgs.chatMsgsBg::before{content:"";position:sticky;top:0;display:block;height:0;}
#chatMsgs.chatMsgsBg .chatBubble{backdrop-filter:blur(2px);}

/* deleted message placeholder */
.chatBubbleDeleted{background:transparent !important;border:1px dashed var(--line2) !important;}
.chatDeletedText{font-size:13px;font-style:italic;color:var(--dim);}
.chatMsg.mine .chatBubbleDeleted{border-color:var(--line2) !important;}
.chatMsg.mine .chatDeletedText{color:#9a9aa2;}
/* a quote pointing at a deleted/missing message */
.chatQuoteGone{border-left-color:var(--line2) !important;cursor:default;opacity:.8;}
.chatQuoteGone .chatQuoteWho{color:var(--dim);}
.chatQuoteGone .chatQuoteText{font-style:italic;color:var(--dim);}
/* delete control in a message's meta row (own messages only) */
.chatDelDo{background:none;border:0;color:var(--dim);font-size:11.5px;font-weight:600;line-height:1;cursor:pointer;
  display:inline-flex;align-items:center;gap:3px;padding:2px 6px;border-radius:7px;opacity:0;transition:.14s;}
.chatDelDo svg{display:block;}
.chatMsg:hover .chatDelDo{opacity:1;}
.chatDelDo:hover{color:#e0455e;background:rgba(224,69,94,.12);}

/* group settings overlay */
.chatGroupOverlay{position:fixed;inset:0;z-index:60;background:rgba(7,5,9,.74);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:20px;}
.chatGroupModal{width:min(440px,100%);max-height:84vh;overflow-y:auto;position:relative;
  background:linear-gradient(180deg,var(--bg2),var(--bg1));border:1px solid var(--line);border-radius:18px;padding:22px;}
.chatGroupModal h3{margin:0 0 4px;color:var(--txt);font-size:20px;}
.chatGroupClose{position:absolute;top:14px;right:16px;background:none;border:0;color:var(--muted);font-size:24px;cursor:pointer;line-height:1;}
.chatGroupClose:hover{color:var(--txt);}
.chatGroupPicRow{display:flex;align-items:center;gap:14px;margin:14px 0 6px;}
.chatGroupPic{flex:0 0 auto;width:64px;height:64px;border-radius:16px;overflow:hidden;background:#000;color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:24px;border:1px solid var(--line);}
.chatGroupPic img{width:100%;height:100%;object-fit:cover;}
.chatGroupPicBtns{display:flex;flex-direction:column;align-items:flex-start;gap:6px;}
.chatGroupLink{background:none;border:0;color:var(--dim);font-size:12px;cursor:pointer;padding:0;text-decoration:underline;}
.chatGroupLink:hover{color:#e0455e;}
.chatGroupLbl{display:block;font-size:12px;font-weight:700;color:var(--muted);margin:14px 0 5px;letter-spacing:.02em;}
.chatGroupInput{width:100%;background:var(--bg1);border:1px solid var(--line);border-radius:11px;
  padding:11px 14px;color:var(--txt);font-family:inherit;font-size:14px;}
.chatGroupInput:focus{outline:none;border-color:var(--acc);}
.chatGroupBgRow{display:flex;gap:8px;align-items:center;}
.chatGroupBgRow .chatGroupInput{flex:1 1 auto;}
.chatGroupHint{display:block;font-size:11px;color:var(--muted);margin:7px 2px 0;line-height:1.45;opacity:.85;}
.chatGroupActions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px;}
.chatGroupSave{height:38px;padding:0 20px;border-radius:999px;border:0;background:#000;color:#fff;
  font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:.16s;}
.chatGroupSave:hover{filter:brightness(1.15);}
.chatGroupSave:disabled{opacity:.5;cursor:default;}
.chatDay{align-self:center;font-size:11px;color:var(--dim);background:var(--panel2);border:1px solid var(--line);
  border-radius:999px;padding:3px 12px;margin:12px 0 8px;letter-spacing:.04em;}
.chatMsg{display:flex;gap:8px;max-width:74%;align-items:flex-end;margin-bottom:2px;}
.chatMsg.mine{align-self:flex-end;flex-direction:row-reverse;}
.chatMsgAv{width:26px;height:26px;border-radius:50%;flex:none;overflow:hidden;display:flex;align-items:center;
  justify-content:center;background:var(--bg2);color:var(--acc);font-size:11px;font-weight:800;}
.chatMsgAv img{width:100%;height:100%;object-fit:cover;}
.chatMsgCol{min-width:0;display:flex;flex-direction:column;}
.chatMsg.mine .chatMsgCol{align-items:flex-end;}
.chatMsgWho{font-size:11px;color:var(--acc);font-weight:700;margin:0 4px 2px;}
.chatBubble{padding:9px 13px;border-radius:16px;font-size:14px;line-height:1.45;color:var(--txt);
  background:var(--panel2);border:1px solid var(--line);border-bottom-left-radius:5px;word-wrap:break-word;
  overflow-wrap:anywhere;}
.chatMsg.mine .chatBubble{background:#000;border-color:transparent;
  color:#fff;border-radius:16px;border-bottom-right-radius:5px;}
.chatMention{color:var(--acc);font-weight:700;}
.chatMsg.mine .chatMention{color:#f0f0f2;}
.chatAttach{display:block;max-width:240px;border-radius:10px;margin-top:6px;}
.chatMsgTime{font-size:10.5px;color:var(--dim);margin:2px 5px 0;}
.chatMsg .chatBubble.flash,.chatMsg.flash .chatBubble{animation:msgFlash 1.5s ease;}
@keyframes msgFlash{0%,100%{box-shadow:none;}30%{box-shadow:0 0 0 3px rgba(255,255,255,.5);}}

/* time + tiny reply button under each bubble */
.chatMsgMeta{display:flex;align-items:center;gap:6px;margin:2px 5px 0;}
.chatMsg.mine .chatMsgMeta{flex-direction:row-reverse;}
.chatReplyDo{background:none;border:0;color:var(--dim);font-size:11.5px;font-weight:600;line-height:1;cursor:pointer;
  display:inline-flex;align-items:center;gap:3px;padding:2px 6px;border-radius:7px;opacity:0;transition:.14s;}
.chatReplyDo svg{display:block;}
.chatMsg:hover .chatReplyDo{opacity:1;}
.chatReplyDo:hover{color:var(--txt);background:rgba(255,255,255,.08);}

/* quoted reply reference inside a bubble */
.chatQuote{display:flex;flex-direction:column;gap:1px;width:100%;text-align:left;cursor:pointer;
  background:rgba(255,255,255,.06);border:0;border-left:3px solid var(--acc);border-radius:7px;
  padding:5px 9px;margin-bottom:6px;font-family:inherit;}
.chatQuote:hover{background:rgba(255,255,255,.12);}
.chatQuoteWho{display:block;font-size:11px;font-weight:700;color:var(--acc);}
.chatQuoteText{display:block;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px;}
.chatMsg.mine .chatQuoteWho{color:#cfcfd6;}

/* reply bar above the composer */
#chatReplyBar{display:flex;align-items:center;gap:10px;padding:8px 16px;border-top:1px solid var(--line);
  background:var(--bg1);}
#chatReplyBar[hidden]{display:none !important;}
.chatReplyInfo{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;border-left:3px solid var(--acc);padding-left:9px;}
#chatReplyWho{font-size:11.5px;font-weight:700;color:var(--acc);}
#chatReplyText{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#chatReplyCancel{flex:none;background:none;border:0;color:var(--muted);font-size:20px;cursor:pointer;line-height:1;}
#chatReplyCancel:hover{color:var(--txt);}

#chatComposer{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--line);align-items:center;}
.chatImgBtn{width:40px;height:40px;flex:none;border-radius:50%;border:1px solid var(--line);cursor:pointer;
  font-size:17px;background:var(--panel2);color:var(--txt);transition:.16s;}
.chatImgBtn:hover{border-color:var(--acc);background:rgba(255,255,255,.12);}
.chatImgBtn:disabled{opacity:.5;cursor:default;}
#chatInput{flex:1 1 auto;background:var(--bg1);border:1px solid var(--line);border-radius:999px;
  padding:11px 16px;color:var(--txt);font-family:inherit;font-size:14px;}
#chatInput:focus{outline:none;border-color:var(--acc);}
#chatSend{width:42px;height:42px;flex:none;border-radius:50%;border:0;cursor:pointer;font-size:16px;
  background:#000;color:#fff;transition:.16s;}
#chatSend:hover{filter:brightness(1.1);}

/* group button in the messages header */
.chatHdBtns{display:flex;align-items:center;gap:8px;}
.chatGroupBtn{height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:var(--panel2);
  color:var(--txt);font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer;transition:.16s;}
.chatGroupBtn:hover{border-color:var(--acc);background:rgba(255,255,255,.12);}
.chatGroupMembers{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 8px;}
.chatMemChip{display:inline-flex;align-items:center;gap:6px;padding:3px 9px 3px 3px;border-radius:999px;
  border:1px solid var(--line);background:var(--panel2);font-size:12px;max-width:100%;}
.chatMemChip .chatAv{width:22px;height:22px;flex:0 0 22px;}
.chatMemName{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:120px;}
.chatGroupPick{margin:6px 0 4px;max-height:240px;overflow-y:auto;display:flex;flex-direction:column;gap:2px;
  border:1px solid var(--line);border-radius:12px;padding:4px;}

/* new-message overlay */
#chatNewOverlay{position:fixed;inset:0;z-index:60;background:rgba(7,5,9,.74);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:20px;}
#chatNewModal{width:min(440px,100%);max-height:80vh;overflow-y:auto;background:linear-gradient(180deg,var(--bg2),var(--bg1));
  border:1px solid var(--line);border-radius:18px;padding:22px;position:relative;}
#chatNewModal h3{margin:0 0 4px;color:var(--txt);font-size:20px;}
.chatNewHint{color:var(--muted);font-size:13px;line-height:1.5;margin:0 0 16px;}
#chatNewClose{position:absolute;top:14px;right:16px;background:none;border:0;color:var(--muted);font-size:24px;cursor:pointer;}
#chatNewList{display:flex;flex-direction:column;gap:4px;margin-bottom:14px;}
.chatPick{display:flex;align-items:center;gap:11px;background:none;border:1px solid transparent;border-radius:12px;
  padding:8px 10px;cursor:pointer;font-family:inherit;text-align:left;transition:.14s;}
.chatPick:hover{background:var(--panel2);}
.chatPick.on{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.4);}
.chatPickMid{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;}
.chatPickName{color:var(--txt);font-weight:700;font-size:14px;}
.chatPickHandle{color:var(--muted);font-size:12px;}
.chatPickCheck{width:20px;height:20px;border-radius:50%;border:2px solid var(--line);flex:none;transition:.14s;}
.chatPick.on .chatPickCheck{background:var(--acc);border-color:var(--acc);box-shadow:inset 0 0 0 3px var(--bg1);}
.chatGroupTitle{display:flex;flex-direction:column;gap:5px;margin-bottom:14px;}
.chatGroupTitle span{font-size:12px;color:var(--muted);letter-spacing:.04em;}
.chatGroupTitle input{background:var(--bg1);border:1px solid var(--line);border-radius:10px;padding:10px 12px;
  color:var(--txt);font-family:inherit;font-size:14px;}
.chatGroupTitle input:focus{outline:none;border-color:var(--acc);}

/* =============================== ALERTS ================================== */
#notifyWrap{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;border:1px solid var(--line);
  border-radius:18px;overflow:hidden;background:var(--panel);}
.notifyHd{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line);}
.notifyHd span{font-size:19px;font-weight:800;color:var(--txt);}
#notifyReadAll{background:none;border:0;color:var(--acc);font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;}
#notifyReadAll:hover{text-decoration:underline;}
#notifyList{flex:1 1 auto;overflow-y:auto;min-height:0;}
.ntRow{display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left;background:none;border:0;
  border-bottom:1px solid var(--line);padding:14px 18px;cursor:pointer;font-family:inherit;transition:background .14s;}
.ntRow:hover{background:var(--panel2);}
.ntRow.unread{background:rgba(255,255,255,.07);}
.ntAv{width:40px;height:40px;border-radius:50%;flex:none;overflow:hidden;display:flex;align-items:center;
  justify-content:center;background:var(--bg2);color:var(--acc);font-weight:800;}
.ntAv img{width:100%;height:100%;object-fit:cover;}
.ntMid{flex:1 1 auto;min-width:0;}
.ntLine{color:var(--muted);font-size:14px;line-height:1.4;}
.ntLine b{color:var(--txt);font-weight:700;}
.ntBody{color:var(--txt);font-size:13.5px;margin-top:3px;background:var(--panel2);border:1px solid var(--line);
  border-radius:10px;padding:7px 11px;word-wrap:break-word;overflow-wrap:anywhere;}
.ntTime{color:var(--dim);font-size:12px;margin-top:4px;}
.ntDot{width:9px;height:9px;border-radius:50%;background:var(--acc);flex:none;margin-top:6px;box-shadow:0 0 8px var(--acc);}
.ntEmpty{padding:40px 20px;text-align:center;color:var(--muted);font-size:14px;}

/* ---- mobile: chat collapses to a single column ---- */
@media (max-width:760px){
  #chatWrap{grid-template-columns:1fr;}
  #chatListCol{border-right:0;}
  #chatThreadCol{display:none;}
  #chatThreadCol.open{display:flex;position:absolute;inset:0;z-index:5;background:var(--bg1);}
  .chatBack{display:block;}
  #chatWrap{position:relative;}
}

/* hidden-attribute guards (these elements set an explicit display, which would
   otherwise override the [hidden] attribute and leak open on load) */
#chatNewOverlay[hidden],#chatThread[hidden],.chatGroupTitle[hidden],
#chatWrap[hidden],#notifyWrap[hidden],#chatGate[hidden],#notifyGate[hidden],
.chatEmpty[hidden]{display:none!important;}

/* ============================================================================
   PROFESSIONAL REDESIGN (2026-06-24) - loaded last, wins the cascade.
   Goal: drop the "candy" identity (neon glow, wide uppercase tracking, violet
   translucent panels) for a calm, premium, product-grade look. Inter only.
   ============================================================================ */
:root{
  --bg0:#000000; --bg1:#070708; --bg2:#0d0d10;
  --panel:#0a0a0c; --panel2:#141416;
  --line:rgba(255,255,255,.07); --line2:rgba(255,255,255,.12);
  --txt:#eaeaee; --muted:#9a9aa4; --dim:#66666f;
  --acc:#c9c9cf; --acc2:#c9c9cf;
  --display:"Inter","Helvetica Neue",system-ui,sans-serif;
  --radius:14px;
}
body{
  background:
    radial-gradient(130% 80% at 85% -10%, rgba(255,255,255,.05), transparent 55%),
    #000 !important;
}
/* calmer texture */
#grain{opacity:.018 !important;}
#vig{background:radial-gradient(140% 120% at 50% 30%,transparent 60%,rgba(0,0,0,.5) 100%) !important;}

/* ---- typography: kill uppercase + wide tracking, normalize to Inter ---- */
.brandWord,.navWord,.tag,.pill,.chip,.dashLabel,#genreLbl,.gateKicker,.authKicker,
#archiveHello,.compType,.filt,.pcTag,.da-tab,.orBtn,#enterCta,.eqLabel,
.sideHdr .n,#storyCard .lbl,.dashLabel,.pcBtn,.srcBtn,.gateInner h2,
.chatListHd span,.notifyHd span{
  text-transform:none !important;
  letter-spacing:-0.005em !important;
  font-family:var(--display) !important;
}
.gateKicker,.authKicker{letter-spacing:.12em !important;font-family:var(--display) !important;}

/* ---- buttons: flatten glow, solid restrained accent ---- */
.gatePrimary,#enterCta{
  background:#000 !important;color:#fff !important;
  box-shadow:none !important;font-weight:650 !important;letter-spacing:-0.01em !important;
  text-transform:none !important;border-radius:10px !important;animation:none !important;}
.gatePrimary:hover,#enterCta:hover{filter:brightness(1.08) !important;transform:none !important;}
.pfFollow,.chatAvGroup,#chatSend,.navBadge{box-shadow:none !important;}

/* ---- panels: neutral solid surfaces instead of violet translucency ---- */
.composer,.feedCard,.pcCard,#chatWrap,#notifyWrap,#chatListCol,#archiveApp,
#archiveGate,#authModal,#privacyModal,#chatNewModal,#profileModal{
  background:var(--panel) !important;}
/* pitch-black middle column (behind the feed panels) */
#main{background:#000 !important;}
/* pitch-black HOME feed (the middle community column lives in #archivePanel,
   NOT #main - so it needs its own black or it stays panel-grey) */
#archivePanel,#archiveApp,#feedRoot{background:#000 !important;}
/* 3-dot post menu */
.pcHead{position:relative;}
.pcMenu{margin-left:auto;position:relative;}
.pcMenuBtn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;
  border:0;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer;transition:.15s;}
.pcMenuBtn:hover{background:rgba(255,255,255,.07);color:#fff;}
.pcMenuPop{position:absolute;top:36px;right:0;z-index:30;min-width:160px;display:flex;flex-direction:column;
  padding:6px;background:var(--panel2);border:1px solid var(--line2);border-radius:12px;
  box-shadow:0 18px 40px -12px rgba(0,0,0,.7);}
.pcMenuPop[hidden]{display:none !important;}
.pcMenuItem{text-align:left;font-family:var(--display);font-size:13.5px;font-weight:550;color:var(--txt);
  background:transparent;border:0;border-radius:8px;padding:9px 11px;cursor:pointer;transition:.12s;}
.pcMenuItem:hover{background:rgba(255,255,255,.07);}
.pcMenuDanger{color:#ff6b6b;}
.pcMenuDanger:hover{background:rgba(255,107,107,.12);}
.navItem.on{
  background:rgba(255,255,255,.06) !important;border-color:transparent !important;
  color:#fff !important;}
.navItem.on::after{display:none !important;}
.navItem.on .navIco{color:var(--acc) !important;}

/* ---- remove the heavy neon glows globally on common bits ---- */
.brandMark,.navMark,.soonGlyph,#storyCard{box-shadow:none !important;}

/* ============================== X-STYLE SIDEBAR =========================== */
#app{grid-template-columns:248px minmax(0,1fr) 352px !important;gap:8px !important;
  max-width:1680px !important;padding:0 !important;}
#navRail{padding:8px 12px 14px !important;gap:2px !important;
  border-right:1px solid var(--line) !important;}
/* brand: just the mark, no wordmark (like X) - bigger + centered in the rail */
/* brand: logo mark + wordmark beside it, YouTube style */
.navBrand{padding:10px 8px 10px 6px !important;margin-bottom:8px !important;
  justify-content:flex-start !important;gap:10px !important;align-items:center !important;}
.navWord{display:block !important;font-family:var(--display) !important;
  font-size:14px !important;font-weight:800 !important;letter-spacing:.03em !important;
  line-height:1.1 !important;color:var(--txt) !important;white-space:nowrap !important;}
.navWord b{color:var(--muted) !important;font-weight:800 !important;margin:0 2px !important;}
.navMark{width:58px !important;height:58px !important;border-radius:16px !important;
  font-size:30px !important;background:transparent !important;border:0 !important;
  color:var(--txt) !important;display:flex !important;align-items:center !important;
  justify-content:center !important;line-height:1 !important;overflow:hidden !important;}
.navMark img,.navMark svg{width:100% !important;height:100% !important;
  object-fit:cover !important;border-radius:16px !important;display:block !important;
  transform:scale(1.22) !important;}
.navItem{gap:17px !important;padding:11px 14px !important;border-radius:999px !important;
  font-size:19px !important;font-weight:500 !important;letter-spacing:-0.01em !important;}
.navItem.on{font-weight:750 !important;}
.navItem:hover{background:rgba(255,255,255,.07) !important;}
.navIco{width:25px !important;height:25px !important;}
.navIco svg{stroke-width:1.9 !important;}
.navSep{margin:8px 14px !important;}
.navBadge{top:7px !important;left:34px !important;}
/* account item shows the live avatar when signed in (set by app.js) */
.navItem .navAvatar{width:25px;height:25px;border-radius:50%;object-fit:cover;display:none;}
.navItem.hasAvatar .navAvatar{display:block;}
.navItem.hasAvatar .navIco{display:none;}

@media (max-width:1100px){
  #app{grid-template-columns:84px minmax(0,1fr) 320px !important;}
  .navItem .navLabel{display:none;}
  .navItem{justify-content:center;padding:13px !important;}
  .navBadge{left:auto;right:10px;}
  /* icon-only rail: drop the wordmark, center the logo */
  .navBrand{justify-content:center !important;padding:10px 0 8px !important;}
  .navWord{display:none !important;}
}

/* ===================== COLLAPSIBLE PLAYER + MINI BAR ====================== */
#playerCollapseBtn{margin-left:8px;width:30px;height:30px;border-radius:8px;flex:none;
  background:transparent;border:1px solid var(--line);color:var(--muted);cursor:pointer;
  font-size:11px;line-height:1;transition:.15s;}
#playerCollapseBtn:hover{color:var(--txt);border-color:var(--line2);background:rgba(255,255,255,.05);}

/* compact floating overlay - a clean pill, not a full-width black bar */
#miniPlayer{position:fixed;top:14px;right:22px;z-index:60;display:none;
  align-items:center;gap:8px;padding:6px 8px;border-radius:999px;
  background:rgba(20,20,24,.70);backdrop-filter:blur(18px) saturate(1.3);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid rgba(255,255,255,.10);box-shadow:0 12px 34px -10px rgba(0,0,0,.65);
  max-width:min(360px,44vw);}
body.playerCollapsed #miniPlayer{display:inline-flex;}
body.playerCollapsed #side{display:none !important;}
body.playerCollapsed #app{grid-template-columns:248px minmax(0,1fr) !important;}
.miniBtn{width:32px;height:32px;flex:none;border-radius:50%;border:0;
  background:transparent;color:var(--txt);cursor:pointer;font-size:12px;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:.15s;}
.miniBtn:hover{background:rgba(255,255,255,.12);}
.miniPlay{background:var(--txt);color:#0a0a0b;font-size:13px;}
.miniPlay:hover{background:#fff;}
.miniMid{min-width:0;display:flex;flex-direction:column;justify-content:center;padding:0 2px;}
.miniNow{font-size:9px;color:var(--dim);letter-spacing:.05em;text-transform:uppercase;line-height:1.15;}
.miniName{font-size:13px;font-weight:600;color:var(--txt);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:150px;line-height:1.2;}
.miniExpand{font-size:11px;color:var(--muted);}

@media (max-width:760px){
  #miniPlayer{right:12px;top:10px;max-width:72vw;}
}

/* ===================== COMPOSER MEDIA ICON BUTTONS ======================= */
/* foot is two rows: icon buttons + Post on row 1, hint on its own full-width
   row below (only when there's a hint) so it never crowds the icon bar. */
.composer .compFoot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-top:2px;}
.composer .compTypes{display:flex;align-items:center;gap:8px;margin:0;order:1;}
.composer .compType{width:40px;height:40px;padding:0;display:flex;align-items:center;
  justify-content:center;border-radius:50%;border:0;background:transparent;
  color:var(--acc);cursor:pointer;transition:.15s;font-size:0;letter-spacing:0;text-transform:none;}
.composer .compType svg{width:20px;height:20px;}
.composer .compType:hover{background:rgba(255,255,255,.12);}
.composer .compType.on{background:rgba(255,255,255,.18);color:var(--acc2);}
.composer #compPost{order:2;margin-left:auto;}
.composer .compFoot .compHint{order:3;flex:1 1 100%;margin:6px 2px 0;line-height:1.5;font-size:12px;}
.composer .compFoot .compHint:empty{display:none;margin:0;}

/* ===================== PROFILE - MODERN, NAME CLUMPED ==================== */
.pfBanner{height:132px !important;margin:0 -22px 0 !important;border-radius:0 !important;
  background:linear-gradient(120deg,#1c1830,#101019) !important;}
.pfHead{display:flex !important;align-items:flex-end !important;gap:14px !important;
  margin-top:-44px !important;margin-bottom:8px !important;padding:0 2px;position:relative;}
.pfAvatar{width:88px !important;height:88px !important;border-radius:50% !important;
  border:4px solid var(--panel) !important;background:var(--panel2) !important;
  box-shadow:0 6px 20px rgba(0,0,0,.4) !important;flex-shrink:0;overflow:hidden;}
.pfAvatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.pfAvatarFallback{font-size:34px !important;color:var(--txt) !important;}
.pfIdBox{padding-bottom:4px;min-width:0;}
.pfName{font-size:22px !important;font-weight:750 !important;letter-spacing:-.02em !important;
  color:var(--txt) !important;line-height:1.15;}
.pfHandle{font-family:inherit !important;font-size:13.5px !important;color:var(--muted) !important;
  margin-top:1px !important;}
.pfActions,.pfEdit{align-self:flex-start !important;margin-top:6px;}
.pfEdit,.pfFollow,.pfMsg{border-radius:999px !important;font-weight:650 !important;
  font-size:13.5px !important;padding:8px 18px !important;letter-spacing:-.01em !important;}
.pfEdit{background:transparent !important;border:1px solid var(--line2) !important;color:var(--txt) !important;cursor:pointer;}
.pfEdit:hover{background:rgba(255,255,255,.06) !important;}
.pfFollow{background:var(--txt) !important;color:#0a0a0b !important;border:0 !important;}
.pfFollow:hover{filter:brightness(.92);}
.pfStats{gap:20px !important;margin:6px 0 16px !important;}
.pfStat{background:transparent;border:0;cursor:pointer;color:var(--muted);font-size:13.5px;padding:0;}
.pfStat b{color:var(--txt);font-weight:700;}
.pfStat:hover b{text-decoration:underline;}
.pfBio{color:var(--txt) !important;font-size:14.5px !important;line-height:1.55 !important;}
.pfArtist{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:2px 8px;border-radius:6px;background:rgba(255,255,255,.16);color:var(--acc);}

/* ===================== TEXTAREAS - capped auto-grow ===================== */
.composer #compText, .pgComposeText, #compText{
  resize:none !important; min-height:2.6em; max-height:8.2em; overflow-y:hidden;
  line-height:1.45;}

/* ===================== PLAYER - clean floating card, off the edges ====== */
@media(min-width:881px){
  #side{height:calc(100vh - 24px) !important;margin:12px 14px 12px 0 !important;
    border:1px solid var(--line) !important;border-radius:18px !important;
    background:var(--panel) !important;padding:16px 16px 18px !important;}
  /* let the radio center column breathe at the top too */
  #main{padding-top:8px;}
  #leftCol{scroll-padding-top:12px;}
  #archiveApp,#pageView,#chatWrap,#notifyWrap{padding-top:10px;}
  /* Messages must fill the whole viewport so the divider line runs all the
     way down and the empty notice can center vertically. */
  #chatPanel{height:100vh !important;}
}

/* Messages: center the empty notice, run the divider full height, and pin a
   small X-style footer to the bottom of the thread area. */
#chatThreadCol{position:relative !important;}
.chatEmpty{margin:auto !important;}
.chatFoot{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;
  justify-content:center;flex-wrap:wrap;gap:8px;padding:14px 18px;
  border-top:1px solid var(--line);color:var(--dim);font-size:12.5px;}
.chatFootBrand{color:var(--muted);font-weight:700;letter-spacing:.01em;}
.chatFootDot{opacity:.5;}
.chatFootLink{background:transparent;border:0;color:var(--muted);font:inherit;
  cursor:pointer;padding:0;}
.chatFootLink:hover{color:var(--acc);text-decoration:underline;}
#chatThreadCol.open .chatFoot{display:none;}
@media(max-width:880px){.chatFoot{position:static;margin-top:auto;}}

/* ===================== MESSAGES - lighter, less boxy ==================== */
#chatWrap{border:0 !important;background:transparent !important;}
#chatListCol{background:transparent !important;border:0 !important;
  border-right:1px solid var(--line) !important;border-radius:0 !important;}
#chatThreadCol{background:transparent !important;border:0 !important;border-radius:0 !important;}
.chatEmpty{color:var(--muted);}
.chatEmpty h3{color:var(--txt);font-weight:700;letter-spacing:-.01em;}

/* ===================== PROFILE/PAGE - sections, bio, links ============== */
.pgArtist,.pfArtist{align-self:center;margin-top:0;}
.pgNameRow,.pfNameRow{flex-direction:row;align-items:center !important;gap:9px !important;flex-wrap:wrap;}
.pgBio,.pfBio{margin:12px 0 6px !important;}
.pgLinks,.pfLinks{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 14px;}
.pgLink,.pfLink{font-size:13px;color:var(--acc);text-decoration:none;
  padding:5px 11px;border:1px solid var(--line2);border-radius:999px;transition:.15s;}
.pgLink:hover,.pfLink:hover{background:rgba(255,255,255,.10);border-color:var(--acc);}

.pgSection{margin:22px 0 6px;}
.pgSubhead{font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--muted);
  text-transform:none;margin:0 0 12px;}
.pgFeatured{margin:18px 0;padding:16px;border-radius:16px;
  background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.22);}
.pgFeaturedKicker{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--acc);margin-bottom:10px;}
.pgFeaturedRow{display:flex;align-items:center;gap:14px;}
.pgFeaturedPlay{width:48px;height:48px;flex:none;border-radius:50%;border:0;cursor:pointer;
  background:#000;color:#fff;font-size:17px;display:flex;align-items:center;justify-content:center;}
.pgFeaturedPlay:hover{filter:brightness(1.1);}
.pgFeaturedMeta{min-width:0;}
.pgFeaturedTitle{font-size:16px;font-weight:700;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pgFeaturedSub{font-size:12.5px;color:var(--muted);margin-top:1px;}

/* ============ FLAT, COMPACT IN-POST + NO FLOATING BLACK CARDS ============
   The single-post view and the social gates were wrapped in a heavy dark
   bordered card that floated in the column and read as "unfinished". On a
   detail page the post IS the page, so drop the card chrome and let it sit
   flat on the background, then tighten the comment spacing so it's compact. */
.postDetail .postCard{background:transparent !important;border:0 !important;
  box-shadow:none !important;padding:2px 2px 0 !important;gap:9px !important;}
.postDetail .postCard::before{display:none !important;}
.postDetail .detailBody{padding-top:10px !important;}
.postDetail .pcThread{padding-top:12px !important;gap:8px !important;}
.postDetail .threadList{gap:12px !important;}
.postDetail .cmt{gap:2px !important;}
.postDetail .cmtReplyBtn{margin-top:1px !important;padding:1px 0 !important;}
.postDetail .cmtToggle{margin:1px 0 !important;}
.postDetail .cmtKids{gap:12px !important;margin-top:2px !important;}
.postDetail .threadInput{margin-top:4px !important;}

/* social gates (Community / Messages / Alerts when signed-out): no black box,
   just centered text on the page - the "glitchy" floating panel is gone. */
.socialGate .gateInner{background:transparent !important;border:0 !important;
  box-shadow:none !important;padding:24px 16px !important;}

/* ============ HEADER - clean X-style stacked layout =====================
   Avatar overlaps the banner on its own line; name + inline ARTIST badge +
   @handle stack directly below it, left-aligned. The Edit button floats
   top-right just under the banner. No more name-on-banner or avatar over bio. */
.pgHead,.pfHead{position:relative !important;flex-direction:column !important;
  align-items:flex-start !important;gap:8px !important;margin:0 4px 8px !important;}
.pgAvatar{margin-top:-50px !important;}
.pfAvatar{margin-top:-44px !important;}
.pgId,.pfId{padding:0 !important;width:100% !important;}
.pgName,.pfName{font-size:22px !important;font-weight:800 !important;letter-spacing:-.01em !important;}
.pgHandle,.pfHandle{display:block;margin-top:1px;}
/* edit button: floats top-right of the header, below the banner */
.pgEditBtn,.pfEditBtn{position:absolute !important;top:8px !important;right:2px !important;
  margin:0 !important;align-self:auto !important;}
/* follow + message actions: float top-right, never stretch the header */
.pgActions{position:absolute !important;top:8px !important;right:2px !important;margin:0 !important;}

/* ============ PROFILE EDIT - DOB + Location side by side (compact) ======= */
.pgFieldRow{display:flex;gap:12px;}
.pgFieldRow .pgField{flex:1;min-width:0;margin:0;}
.pgFieldRow .pgField input,.pgFieldRow .pgField select{width:100%;}

/* ============ PROFILE BODY - align bio/meta/tags/links to header ========= */
.pgBio,.pgMeta,.pgTags,.pgLinks{margin-left:4px !important;margin-right:4px !important;}

/* meta row (location + born) was unstyled -> icons + text mashed together */
.pgMeta{display:flex !important;flex-wrap:wrap;align-items:center;
  gap:6px 18px;margin-top:8px;margin-bottom:6px;
  color:var(--muted);font-size:14.5px;}
.pgMetaItem{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;}
.pgMetaIco{color:var(--dim);font-size:14px;line-height:1;}

/* ============ PROFILE POSTS - match the normal feed post look =========== */
.pgPostHead{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.pgPostAv{width:36px;height:36px;border-radius:50%;object-fit:cover;flex:0 0 auto;
  border:1px solid var(--line);}
.pgPostAvFb{display:flex;align-items:center;justify-content:center;
  background:var(--panel);color:var(--muted);font-weight:700;font-size:15px;}
.pgPostWho{display:flex;flex-direction:column;line-height:1.2;min-width:0;}
.pgPostName{font-weight:700;font-size:14.5px;color:var(--txt);}
.pgPostTime{font-size:12.5px;color:var(--dim);}

/* ============ PROFILE - horizontal Tracks / Posts / Games tabs =========== */
.pgTabs{margin-top:20px;}
.pgTabBar{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:16px;}
.pgTab{flex:1;background:transparent;border:0;cursor:pointer;font:inherit;
  font-size:14.5px;font-weight:600;color:var(--muted);padding:13px 8px;
  position:relative;border-radius:0;transition:color .15s,background .15s;}
.pgTab:hover{color:var(--txt);background:rgba(255,255,255,.03);}
.pgTab.on{color:var(--txt);font-weight:750;}
.pgTab.on::after{content:"";position:absolute;left:50%;transform:translateX(-50%);
  bottom:-1px;width:48px;height:3px;border-radius:3px;background:#f0f0f2;}
.pgTabPanels > [hidden]{display:none !important;}
.pgGames .pgEmpty{margin:6px 0;}

/* ============ COMMENT IMAGE / GIF - small, decent size for a thread ====== */
.threadMedia{flex:0 0 auto;width:34px;height:34px;border-radius:9px;cursor:pointer;
  background:transparent;border:1px solid var(--line2);color:var(--muted);
  font-size:15px;line-height:1;display:flex;align-items:center;justify-content:center;
  transition:.15s;}
.threadMedia:hover{color:var(--txt);border-color:var(--acc);}
.threadMedia.on{color:var(--acc);border-color:var(--acc);background:rgba(255,255,255,.12);}
.threadMediaPreview{position:relative;display:inline-flex;margin:6px 0 2px;}
.threadMediaThumb{max-width:120px;max-height:120px;border-radius:10px;
  border:1px solid var(--line);object-fit:cover;display:block;}
.threadMediaX{position:absolute;top:-7px;right:-7px;width:22px;height:22px;border-radius:50%;
  background:rgba(0,0,0,.78);border:1px solid rgba(255,255,255,.22);color:#fff;
  font-size:14px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.threadMediaX:hover{background:#000;}
/* image inside a rendered comment - sized like a post image (just a bit shorter) */
.cmtImg{display:block;margin-top:8px;width:100%;max-width:420px;max-height:420px;height:auto;
  border-radius:12px;border:1px solid var(--line);background:#0a0a0c;object-fit:contain;cursor:zoom-in;}

/* ============ REPOST (retweet) ========================================== */
.pcRepostBtn span:first-child{font-size:15px;line-height:1;}
.pcRepost{padding-top:2px;}
.pcRepostKicker{font-size:12px;color:var(--dim);font-weight:600;margin-bottom:7px;
  display:flex;align-items:center;gap:5px;}
.pcRepostInner{border:1px solid var(--line2);border-radius:14px;padding:11px 13px;
  background:rgba(255,255,255,.02);}
.pcRepostInner:hover{border-color:var(--line2);background:rgba(255,255,255,.035);}
.pcRepostHead{display:flex;align-items:center;gap:8px;margin-bottom:7px;}
.pcRepostAv{width:26px !important;height:26px !important;border-radius:50%;flex:0 0 auto;
  font-size:12px !important;}
.pcRepostName{font-weight:700;font-size:13.5px;color:var(--txt);}
.pcRepostInner .pcBody{margin:0;}
.pcRepostInner .pcMedia{max-height:300px;}

/* ===== repost v2: quote comment, compact clip, locked-player shake ===== */
/* the locked mini-player shake (Messages / Studio / active game) */
@keyframes daLockShake{0%,100%{transform:translateX(0)}15%{transform:translateX(-6px)}
  30%{transform:translateX(6px)}45%{transform:translateX(-4px)}60%{transform:translateX(4px)}
  75%{transform:translateX(-2px)}90%{transform:translateX(2px)}}
#miniPlayer.daLocked{animation:daLockShake .42s ease;}

/* quote-repost composer */
.rcBox{display:flex;flex-direction:column;gap:9px;border-top:1px solid var(--line);padding-top:13px;}
.rcBox[hidden]{display:none;}
.rcInput{width:100%;font-family:inherit;font-size:14px;color:#fff;background:rgba(255,255,255,.04);
  border:1px solid var(--line);border-radius:11px;padding:10px 12px;resize:vertical;min-height:46px;}
.rcInput:focus{outline:none;border-color:rgba(255,255,255,.5);}
.rcActions{display:flex;justify-content:flex-end;gap:8px;}
.rcCancel{font-family:inherit;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;
  background:transparent;border:1px solid var(--line);border-radius:9px;padding:8px 14px;}
.rcCancel:hover{color:#fff;border-color:rgba(255,255,255,.25);}
.rcSend{font-family:var(--display);font-weight:700;font-size:13px;color:#fff;cursor:pointer;
  background:#4a4a52;border:1px solid #4a4a52;border-radius:9px;padding:8px 16px;}
.rcSend:hover{background:#2a2a33;}
.rcSend:disabled{opacity:.5;cursor:not-allowed;}

/* the reposter's own comment, shown as the main text above the quoted clip */
.pcRepostComment{margin:0 0 9px;color:#eee;font-size:15px;line-height:1.55;
  white-space:pre-wrap;word-break:break-word;}

/* compact quoted clip - short text + a small peek of any image, so reposts
   never blow up the feed height */
.pcRepostClip{display:flex;flex-direction:column;gap:8px;}
.pcRepostText{margin:0;color:var(--read);font-size:14px;line-height:1.5;word-break:break-word;}
.pcSeeMore{appearance:none;border:0;background:transparent;cursor:pointer;padding:0;
  font:inherit;font-size:13px;font-weight:600;color:var(--acc);}
.pcSeeMore:hover{text-decoration:underline;}
.pcRepostMedia{width:100%;max-height:200px;object-fit:cover;border-radius:10px;display:block;
  border:1px solid var(--line);background:#0a0a0c;}
.pcRepostMeta{font-family:ui-monospace,monospace;font-size:11.5px;letter-spacing:.05em;color:var(--dim);}

/* ════════════════ GAMES ════════════════ */
/* --- Studio: upload + manage --- */
.crGames{margin-top:26px;}
.gmHint{color:var(--muted);font-size:13px;margin:4px 0 14px;line-height:1.5;}
.gmUpload{display:flex;flex-direction:column;gap:10px;margin-bottom:16px;}
.gmInput{width:100%;background:var(--panel);border:1px solid var(--line2);border-radius:10px;
  color:var(--txt);font:inherit;font-size:14px;padding:10px 12px;}
.gmInput:focus{outline:none;border-color:var(--acc);}
.gmArea{resize:vertical;min-height:44px;}
.gmDrop{border:1.5px dashed var(--line2);border-radius:13px;padding:22px 16px;text-align:center;
  cursor:pointer;color:var(--muted);font-size:13.5px;transition:.15s;background:rgba(255,255,255,.015);}
.gmDrop:hover,.gmDrop.over{border-color:var(--acc);color:var(--txt);background:rgba(255,255,255,.07);}
.gmFileBtn{display:inline-block;align-self:flex-start;background:var(--panel);border:1px solid var(--line2);
  border-radius:9px;padding:7px 13px;font-size:13px;color:var(--txt);cursor:pointer;}
.gmFileBtn:hover{border-color:var(--acc);}
.gmFileName{font-size:12.5px;color:var(--dim);margin-top:-4px;}
.gmBtn{background:var(--panel);border:1px solid var(--line2);border-radius:9px;color:var(--txt);
  font:inherit;font-size:13px;font-weight:600;padding:8px 13px;cursor:pointer;transition:.15s;}
.gmBtn:hover{border-color:var(--acc);}
.gmPrimary{background:#000;border-color:var(--acc2);color:#fff;}
.gmPrimary:hover{filter:brightness(1.08);}
.gmDel{color:var(--muted);padding:8px 11px;}
.gmDel:hover{color:#ff6b6b;border-color:#ff6b6b;}
.gmMsg{font-size:12.5px;color:var(--muted);min-height:16px;}

/* ---- Publisher console: exact errors for game publishers ---- */
.gmConsole{margin:2px 0 16px;border:1px solid var(--line2);border-radius:12px;
  background:linear-gradient(180deg,rgba(124,58,237,.06),rgba(0,0,0,.18));overflow:hidden;}
.gmConsoleSum{list-style:none;cursor:pointer;display:flex;align-items:center;gap:9px;
  padding:11px 14px;font-size:13px;font-weight:600;color:var(--txt);user-select:none;}
.gmConsoleSum::-webkit-details-marker{display:none;}
.gmConsoleDot{width:8px;height:8px;border-radius:50%;flex:0 0 auto;background:#c4b5fd;
  box-shadow:0 0 9px 1px rgba(196,181,253,.7);}
.gmConsoleTitle{letter-spacing:.01em;}
.gmConsoleHint{font-size:11.5px;font-weight:500;color:var(--dim);margin-left:auto;text-align:right;}
.gmConsoleTools{display:flex;gap:8px;padding:0 14px 9px;}
.gmConsoleBtn{background:var(--panel);border:1px solid var(--line2);border-radius:8px;
  color:var(--muted);font:inherit;font-size:12px;font-weight:600;padding:5px 11px;cursor:pointer;}
.gmConsoleBtn:hover{border-color:var(--acc);color:var(--txt);}
.gmLogList{max-height:230px;overflow-y:auto;padding:4px 0 8px;
  font-family:"SF Mono",ui-monospace,Menlo,Consolas,monospace;font-size:12px;line-height:1.5;}
.gmLogEmpty{padding:10px 14px;color:var(--dim);font-size:12.5px;font-family:var(--display);}
.gmLogRow{display:flex;gap:9px;padding:4px 14px;align-items:baseline;
  border-top:1px solid rgba(255,255,255,.04);}
.gmLogTime{color:var(--dim);flex:0 0 auto;}
.gmLogLvl{flex:0 0 auto;font-weight:700;font-size:10px;letter-spacing:.04em;padding-top:1px;}
.gmLogBody{min-width:0;flex:1;}
.gmLogMsg{color:var(--read,#cfcfd6);word-break:break-word;}
.gmLogDetail{margin:3px 0 0;padding:6px 8px;background:var(--bg0);border-radius:7px;
  color:var(--muted);white-space:pre-wrap;word-break:break-word;font-size:11px;}
.gmLog-error .gmLogLvl{color:#ff7a7a;}
.gmLog-error .gmLogMsg{color:#ffb4b4;}
.gmLog-hint .gmLogLvl{color:#ffd479;}
.gmLog-hint .gmLogMsg{color:#ffe1a6;}
.gmLog-ok .gmLogLvl{color:#7cf29a;}
.gmLog-info .gmLogLvl{color:#9db7ff;}

/* play-mode selector in the uploader (single player / duo play) */
.gmModeRow{display:flex;flex-direction:column;gap:7px;margin:2px 0;}
.gmModeLabel{font-size:12.5px;font-weight:600;color:var(--muted);}
.gmModePills{display:flex;gap:8px;}
.gmModePill{appearance:none;cursor:pointer;font-family:var(--display);font-size:13px;font-weight:600;
  color:var(--read);background:var(--panel);border:1px solid var(--line2);border-radius:999px;
  padding:8px 16px;transition:.15s;}
.gmModePill:hover{border-color:var(--acc2);color:#fff;}
.gmModePill.on{background:#000;border-color:var(--acc2);color:#fff;}
.gmBadgeMode{color:#9ec3ff;border-color:rgba(158,195,255,.4) !important;}
.gmCardMode{background:rgba(158,195,255,.14);color:#bcd5ff;}

.gmEmpty{color:var(--dim);font-size:13px;padding:10px 0;}
.gmList{display:flex;flex-direction:column;gap:9px;}
.gmRow{display:flex;align-items:center;gap:11px;padding:9px;border:1px solid var(--line);border-radius:12px;background:var(--panel);}
.gmThumb{width:46px;height:46px;flex:0 0 auto;border-radius:9px;background-size:cover;background-position:center;
  background-color:#1c1b22;display:flex;align-items:center;justify-content:center;font-size:20px;}
.gmRowMeta{flex:1;min-width:0;}
.gmRowTitle{font-weight:700;font-size:14px;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.gmRowSub{font-size:12px;color:var(--dim);display:flex;align-items:center;gap:2px;margin-top:2px;}
.gmBadge{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--dim);
  border:1px solid var(--line2);border-radius:6px;padding:1px 6px;}
.gmBadge.on{color:#7CFFB2;border-color:rgba(124,255,178,.4);}

/* --- profile games grid + feed card --- */
.gmGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;margin-top:6px;}
.pcGame{margin-top:2px;}
.gmCard{border:1px solid var(--line2);border-radius:15px;overflow:hidden;background:var(--panel);max-width:420px;}
.gmCardCover{position:relative;aspect-ratio:16/10;background-size:cover;background-position:center;
  background-color:#15141b;display:flex;align-items:center;justify-content:center;}
.gmCardNoCover{font-size:46px;opacity:.5;}
.gmCardPlayWrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.18);opacity:0;transition:.18s;}
.gmCard:hover .gmCardPlayWrap{opacity:1;}
.gmCardPlay{width:58px;height:58px;border-radius:50%;border:0;cursor:pointer;font-size:22px;color:#0a0a0b;
  background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;padding-left:4px;}
.gmCardPlay:hover{transform:scale(1.06);}
.gmCardBar{display:flex;align-items:center;gap:10px;padding:11px 13px;}
.gmCardInfo{flex:1;min-width:0;}
.gmCardTitle{font-weight:700;font-size:14.5px;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.gmCardPlays{font-size:12px;color:var(--dim);margin-top:2px;}
.gmCardGo{background:#000;border:0;border-radius:9px;color:#fff;font:inherit;font-weight:700;
  font-size:13px;padding:8px 16px;cursor:pointer;}
.gmCardGo:hover{filter:brightness(1.08);}

/* --- fullscreen play overlay --- */
.gmPlayOverlay{position:fixed;inset:0;z-index:120;background:var(--bg0);display:flex;flex-direction:column;overflow-y:auto;}
.gmPlayBar{flex:0 0 auto;display:flex;align-items:center;gap:14px;padding:11px 16px;border-bottom:1px solid var(--line);
  position:sticky;top:0;background:var(--bg0);z-index:2;}
.gmPlayBack{background:rgba(255,255,255,.05);border:1px solid var(--line2);border-radius:9px;color:var(--txt);
  font:inherit;font-weight:600;font-size:14px;padding:7px 13px;cursor:pointer;}
.gmPlayBack:hover{border-color:var(--acc);background:rgba(255,255,255,.1);}
.gmPlayTitle{font-weight:700;font-size:16px;color:var(--txt);}
.gmPlayStage{flex:0 0 auto;width:100%;max-width:1000px;margin:0 auto;padding:16px;}
.gmFrame{width:100%;height:70vh;min-height:420px;border:1px solid var(--line2);border-radius:14px;background:#000;display:block;}

/* --- leaderboard panel --- */
.gmLeaders{width:100%;max-width:760px;margin:0 auto;padding:8px 16px 0;}
.gmLeaderList{display:flex;flex-direction:column;gap:4px;margin-top:4px;}
.gmLeaderRow{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;
  border:1px solid var(--line);background:var(--panel);}
.gmLeaderMe{border-color:var(--acc);background:rgba(255,255,255,.1);}
.gmLeaderRank{font-weight:800;font-size:13px;color:var(--muted);min-width:28px;}
.gmLeaderName{flex:1;min-width:0;font-weight:650;font-size:14px;color:var(--txt);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.gmLeaderMeta{display:flex;align-items:center;gap:10px;}
.gmLeaderLv{font-size:12px;color:var(--dim);}
.gmLeaderScore{font-weight:800;font-size:15px;color:var(--acc);}

/* --- upload spec (what can I upload) --- */
.gmSpec{margin:6px 0 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:4px 14px;}
.gmSpec summary{cursor:pointer;font-weight:700;font-size:13.5px;color:var(--txt);padding:9px 0;list-style:none;}
.gmSpec summary::-webkit-details-marker{display:none;}
.gmSpec summary::before{content:"\002B  ";color:var(--acc);font-weight:800;}
.gmSpec[open] summary::before{content:"\2212  ";}
.gmSpecList{margin:4px 0 10px;padding-left:18px;display:flex;flex-direction:column;gap:6px;}
.gmSpecList li{font-size:13px;color:var(--muted);line-height:1.5;}
.gmSpecHead{font-weight:700;font-size:13px;color:var(--txt);margin:8px 0 4px;}
.gmSpecP{font-size:13px;color:var(--muted);line-height:1.5;margin:0 0 8px;}
.gmSpecCode{background:var(--bg0);border:1px solid var(--line2);border-radius:9px;padding:11px 13px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;color:#e8e8ea;
  white-space:pre;overflow-x:auto;margin:0 0 8px;}
.gmReviews{width:100%;max-width:760px;margin:0 auto;padding:8px 16px 60px;}
.gmRevHead{display:flex;align-items:baseline;gap:12px;margin-bottom:12px;}
.gmRevTitle{font-size:17px;font-weight:800;color:var(--txt);margin:0;}
.gmRevAvg{font-size:13.5px;color:var(--muted);font-weight:600;}
.gmRevForm{display:flex;flex-direction:column;gap:9px;padding:14px;border:1px solid var(--line);border-radius:13px;
  background:var(--panel);margin-bottom:16px;}
.gmStars{display:flex;gap:4px;}
.gmStar{background:transparent;border:0;cursor:pointer;font-size:24px;line-height:1;color:var(--line2);padding:0;transition:.1s;}
.gmStar.on,.gmStar:hover{color:#ffcf4d;}
.gmRevInput{width:100%;background:var(--bg0);border:1px solid var(--line2);border-radius:10px;color:var(--txt);
  font:inherit;font-size:14px;padding:10px 12px;resize:vertical;}
.gmRevInput:focus{outline:none;border-color:var(--acc);}
.gmRevList{display:flex;flex-direction:column;gap:12px;}
.gmRevItem{border-bottom:1px solid var(--line);padding-bottom:12px;}
.gmRevItemHead{display:flex;align-items:center;gap:9px;margin-bottom:4px;}
.gmRevWho{font-weight:700;font-size:13.5px;color:var(--txt);}
.gmRevStars{color:#ffcf4d;font-size:13px;letter-spacing:1px;}
.gmRevTime{font-size:12px;color:var(--dim);margin-left:auto;}
.gmRevBody{font-size:14px;color:var(--read,#cfcfd6);line-height:1.5;}
.gmRevEmpty{color:var(--dim);font-size:13px;padding:8px 0;}
@media(max-width:880px){
  .gmFrame{height:62vh;min-height:340px;}
  .gmGrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));}
}

/* ── Round-7: Games sidebar, game-card polish, sticky profile tabs, clean icons ── */
.gamesHd{display:flex;flex-direction:column;gap:2px;padding:4px 2px 14px;}
.gamesHd>span:first-child{font-weight:800;font-size:19px;color:var(--txt);}
.gamesHdSub{font-size:12.5px;color:var(--dim);}
#gamesBrowse{padding-bottom:30px;}
#gamesPanel{padding-top:14px;}

/* make the game card actually read as a game */
.gmCard{cursor:pointer;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;}
.gmCard:hover{transform:translateY(-3px);border-color:var(--acc);box-shadow:0 10px 28px rgba(0,0,0,.4);}
.gmCardCover{aspect-ratio:1/1;}
.gmCardNoCover{background-image:radial-gradient(120% 120% at 50% 0,#26233a,#131220);}
.gmCardNoCover::after{content:"\1F3AE";font-size:48px;opacity:.55;}
.gmCardScrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.04) 0,rgba(0,0,0,0) 38%,rgba(0,0,0,.55) 100%);}
.gmCardBadge{position:absolute;top:9px;left:9px;z-index:2;display:inline-flex;align-items:center;gap:5px;
  padding:4px 9px 4px 7px;border-radius:999px;background:rgba(8,8,12,.62);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.14);color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.08em;}
.gmCardBadge svg{width:14px;height:14px;}
.gmCardPlayWrap{opacity:1;background:transparent;}
.gmCardPlay{width:54px;height:54px;background:rgba(255,255,255,.16);color:#fff;backdrop-filter:blur(4px);
  border:1.5px solid rgba(255,255,255,.55);box-shadow:0 6px 20px rgba(0,0,0,.45);transition:.18s;}
.gmCard:hover .gmCardPlay{background:#000;border-color:var(--acc2);color:#fff;transform:scale(1.08);}

/* keep the profile Tracks/Posts/Games tab bar reachable */
.pgTabBar{position:sticky;top:0;z-index:5;background:var(--bg);
  backdrop-filter:blur(8px);padding-top:6px;}

/* clean monochrome comment-image icon (was a yellow emoji) */
.threadMedia svg{width:19px;height:19px;display:block;}
.threadMedia{display:flex;align-items:center;justify-content:center;color:var(--dim);}

/* ── Round-9: lively game browse, system games, play overlay, filters ── */
.gmFilters{display:flex;gap:8px;flex-wrap:wrap;padding:2px 2px 14px;}
.gmFilter{appearance:none;border:1px solid var(--line2);background:transparent;color:var(--dim);
  font:inherit;font-size:12.5px;font-weight:700;padding:7px 15px;border-radius:999px;cursor:pointer;transition:.15s;}
.gmFilter:hover{color:var(--txt);border-color:var(--acc);}
.gmFilter.on{background:#000;border-color:transparent;color:#fff;}

/* card cover: title baked in for cover-less games, and a system glow */
.gmCardGlyphTitle{position:absolute;left:12px;right:12px;bottom:42px;z-index:1;
  font-weight:900;font-size:20px;line-height:1.1;color:#fff;letter-spacing:-.01em;
  text-shadow:0 2px 14px rgba(0,0,0,.6);}
.gmCardNoCover::after{display:none;}
.gmCardSys{border-color:rgba(255,255,255,.4);}
.gmCardSys:hover{border-color:#e8e8ea;box-shadow:0 12px 34px rgba(255,255,255,.22);}
.gmCardBadgeSys{background:linear-gradient(90deg,rgba(255,255,255,.92),rgba(240,171,252,.92));color:#fff;border-color:transparent;}
.gmCardMeta{display:flex;align-items:center;gap:8px;margin-top:3px;}
.gmCardTag{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--dim);border:1px solid var(--line2);border-radius:6px;padding:1px 6px;}

/* the play overlay should feel like a stage, not a dead page */
.gmPlayOverlay{background:radial-gradient(120% 80% at 50% -10%,#171225,var(--bg0) 60%);}
.gmPlayBar{backdrop-filter:blur(10px);background:rgba(10,10,15,.6);position:sticky;top:0;z-index:2;}
.gmPlayTitle{background:linear-gradient(90deg,#dcdce0,#e8e8ea,#cdd2da);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800;}
.gmFrame{box-shadow:0 30px 80px -30px #000,0 0 0 1px rgba(255,255,255,.18),inset 0 0 90px -50px #e8e8ea;}
.gmPlayStage{animation:gmStageIn .3s ease;}
@keyframes gmStageIn{from{opacity:0;transform:translateY(8px) scale(.99);}to{opacity:1;transform:none;}}

/* @mentions in posts */
.pcMention{color:#fff;font-weight:700;cursor:pointer;text-decoration:underline;text-decoration-color:rgba(255,255,255,.45);text-underline-offset:2px;}
.pcMention:hover{text-decoration-color:#fff;}

/* ── Round-9: LIVE schedule, watch rooms, polling chat, composer modal ── */
#livePanel{padding-top:14px;padding-bottom:30px;}
.schHd{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:2px 2px 4px;}
.schHd>span:first-child{font-weight:800;font-size:19px;color:var(--txt);}
.schNewBtn{appearance:none;border:0;border-radius:999px;font:inherit;font-weight:800;font-size:13px;
  color:#fff;background:#000;padding:9px 16px;cursor:pointer;box-shadow:0 8px 22px -10px var(--acc);}
.schNewBtn:active{transform:scale(.96);}
.schSub{font-size:12.5px;color:var(--dim);padding:0 2px 14px;}
.schList{display:flex;flex-direction:column;gap:12px;}
.schCard{display:flex;gap:13px;align-items:center;border:1px solid var(--line2);border-radius:14px;
  background:var(--panel);padding:10px;cursor:pointer;transition:.15s;}
.schCard:hover{border-color:var(--acc);transform:translateY(-2px);box-shadow:0 12px 30px -16px #000;}
.schCover{position:relative;flex:0 0 auto;width:104px;height:74px;border-radius:10px;background-size:cover;background-position:center;background-color:#16121f;overflow:hidden;}
.schKind{position:absolute;left:7px;bottom:6px;font-size:10px;font-weight:800;letter-spacing:.05em;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.7);}
.schLive{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:900;letter-spacing:.08em;color:#fff;
  background:rgba(244,63,94,.92);border-radius:999px;padding:3px 8px;}
.schCover .schLive{position:absolute;top:6px;right:6px;}
.schLiveDot{width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 0 0 rgba(255,255,255,.7);animation:schPulse 1.4s infinite;}
@keyframes schPulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.6);}70%{box-shadow:0 0 0 7px rgba(255,255,255,0);}100%{box-shadow:0 0 0 0 rgba(255,255,255,0);}}
.schBody{flex:1;min-width:0;}
.schTitle{font-weight:700;font-size:15px;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.schVs{font-size:12.5px;color:#e8e8ea;font-weight:600;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.schMeta{display:flex;gap:12px;margin-top:4px;font-size:11.5px;color:var(--dim);}
.schGo{flex:0 0 auto;appearance:none;border:1px solid var(--line2);background:transparent;color:var(--txt);
  font:inherit;font-weight:800;font-size:13px;border-radius:10px;padding:9px 16px;cursor:pointer;}
.schGo.on{border-color:transparent;color:#fff;background:linear-gradient(90deg,#f43f5e,#ec4899);}
.schGo:hover{filter:brightness(1.08);}

/* composer modal */
.schModalOv{position:fixed;inset:0;z-index:140;display:flex;align-items:center;justify-content:center;padding:18px;
  background:rgba(6,6,11,.66);backdrop-filter:blur(6px);}
.schModal{width:100%;max-width:440px;max-height:90vh;overflow-y:auto;background:var(--panel);border:1px solid var(--line2);
  border-radius:18px;padding:20px;display:flex;flex-direction:column;gap:10px;box-shadow:0 30px 80px -30px #000;}
.schModalTitle{font-size:18px;font-weight:800;color:var(--txt);margin-bottom:2px;}
.schInput{width:100%;background:#0e0e15;border:1px solid var(--line2);border-radius:10px;color:var(--txt);
  font:inherit;font-size:14px;padding:11px 12px;}
.schInput:focus{outline:none;border-color:var(--acc);}
.schArea{resize:vertical;min-height:46px;}
.schField{display:flex;flex-direction:column;gap:5px;}
.schLabel{font-size:11.5px;color:var(--dim);font-weight:600;}
.schChips{display:flex;gap:7px;}
.schChip{flex:1;appearance:none;border:1px solid var(--line2);background:transparent;color:var(--dim);
  font:inherit;font-weight:700;font-size:13px;padding:9px;border-radius:10px;cursor:pointer;}
.schChip.on{background:#000;border-color:transparent;color:#fff;}
.schLiveNow{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--txt);cursor:pointer;}
.schMsg{font-size:12.5px;color:#ff9fb6;min-height:16px;}
.schActions{display:flex;gap:10px;justify-content:flex-end;margin-top:4px;}
.schCancel{appearance:none;border:1px solid var(--line2);background:transparent;color:var(--txt);font:inherit;font-weight:700;border-radius:10px;padding:10px 18px;cursor:pointer;}
.schSave{appearance:none;border:0;border-radius:10px;font:inherit;font-weight:800;color:#fff;background:#000;padding:10px 20px;cursor:pointer;}

/* watch room */
.schRoom{position:fixed;inset:0;z-index:130;display:flex;flex-direction:column;overflow:hidden;
  background:radial-gradient(120% 80% at 50% -10%,#171225,var(--bg0) 60%);}
.schRoomBar{flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:11px 16px;border-bottom:1px solid var(--line);
  background:rgba(10,10,15,.6);backdrop-filter:blur(10px);}
.schRoomBack{appearance:none;border:1px solid var(--line2);background:transparent;color:var(--txt);font:inherit;font-weight:700;border-radius:9px;padding:7px 13px;cursor:pointer;}
.schRoomTitle{flex:1;font-weight:800;font-size:16px;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.schHostBtn{appearance:none;border:1px solid var(--line2);background:transparent;color:var(--txt);font:inherit;font-weight:700;font-size:13px;border-radius:9px;padding:7px 13px;cursor:pointer;}
.schRoomGrid{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:0;}
.schStage{position:relative;display:flex;flex-direction:column;padding:16px;min-height:0;}
.schStageVs{display:flex;align-items:center;gap:12px;justify-content:center;margin-bottom:12px;}
.schPlayer{font-weight:800;color:#ececee;font-size:15px;}
.schVsTag{font-size:11px;font-weight:900;letter-spacing:.1em;color:#fff;background:linear-gradient(90deg,#f43f5e,#ec4899);border-radius:6px;padding:2px 8px;}
.schFrame{flex:1;width:100%;border:0;border-radius:14px;background:#000;min-height:300px;
  box-shadow:0 30px 80px -30px #000,0 0 0 1px rgba(255,255,255,.18);}
.schOpenLink{margin:auto;color:#cdd2da;font-weight:700;font-size:15px;}
.schSoon{margin:auto;text-align:center;max-width:340px;}
.schSoonBig{font-size:26px;font-weight:900;background:linear-gradient(90deg,#dcdce0,#e8e8ea,#cdd2da);-webkit-background-clip:text;background-clip:text;color:transparent;}
.schSoonSub{color:var(--dim);font-size:13.5px;margin-top:8px;line-height:1.5;}
.schChat{display:flex;flex-direction:column;min-height:0;border-left:1px solid var(--line);background:rgba(12,12,18,.5);}
.schChatHd{flex:0 0 auto;padding:13px 16px;font-weight:800;font-size:14px;color:var(--txt);border-bottom:1px solid var(--line);}
.schChatLog{flex:1;min-height:0;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:9px;}
.schMsgRow{font-size:13.5px;line-height:1.4;}
.schMsgName{color:#e8e8ea;font-weight:700;margin-right:6px;}
.schMsgBody{color:#e8e8ea;word-break:break-word;}
.schChatForm{flex:0 0 auto;display:flex;gap:8px;padding:11px 12px;border-top:1px solid var(--line);}
.schChatInput{flex:1;background:#0e0e15;border:1px solid var(--line2);border-radius:10px;color:var(--txt);font:inherit;font-size:13.5px;padding:10px 12px;}
.schChatInput:focus{outline:none;border-color:var(--acc);}
.schChatSend{appearance:none;border:0;border-radius:10px;font:inherit;font-weight:800;color:#fff;background:#000;padding:0 16px;cursor:pointer;}
.schChatSend:disabled,.schChatInput:disabled{opacity:.5;cursor:not-allowed;}
@media (max-width:760px){
  .schRoomGrid{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) minmax(180px,40vh);}
  .schChat{border-left:0;border-top:1px solid var(--line);}
  .schFrame{min-height:200px;}
}

/* ════════════════ LIVE / DUO PLAY - 2-player game rooms ════════════════ */
#liveRoot{display:flex;flex-direction:column;overflow-y:auto;padding:18px;gap:0;height:100%;}
.duoHd{display:flex;align-items:center;gap:9px;}
.duoHdTitle{font-family:var(--display);font-size:22px;font-weight:800;color:#fff;letter-spacing:-0.01em;}
.duoHdTitle::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;
  background:#ff4d6d;margin-right:9px;vertical-align:middle;box-shadow:0 0 0 3px rgba(255,77,109,.18);}
.duoSub{font-size:13.5px;line-height:1.55;color:var(--muted);margin:6px 0 18px;max-width:560px;}

/* lobby: game tiles */
.duoGames{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-bottom:24px;align-items:stretch;}
.duoGameCard{display:flex;flex-direction:column;border:1px solid var(--line2);
  border-radius:14px;background:var(--panel);overflow:hidden;transition:border-color .15s,background .15s;}
.duoGameCard:hover{border-color:rgba(255,255,255,.2);}
.duoGameCard.open{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.06);}
/* the whole tile is a clean tap target; options live below, hidden until tapped */
.duoTile{appearance:none;cursor:pointer;text-align:left;font:inherit;color:inherit;
  background:transparent;border:0;display:flex;flex-direction:column;gap:9px;padding:15px;width:100%;flex:1 1 auto;}
.duoOpts{display:flex;flex-direction:column;gap:8px;padding:0 15px 15px;}
.duoGameTop{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;}
.duoGameName{font-family:var(--display);font-size:15px;font-weight:700;color:#fff;line-height:1.25;}
.duoGameMode{font-size:10px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;
  flex:0 0 auto;margin-top:1px;color:#bcd5ff;background:rgba(158,195,255,.14);border-radius:999px;padding:4px 9px;}
.duoGameHow{font-size:12.5px;line-height:1.5;color:var(--muted);margin:0;flex:1;}
.duoHostBtn{appearance:none;border:0;cursor:pointer;font-family:var(--display);font-size:13.5px;
  font-weight:650;color:#fff;background:#000;border-radius:10px;padding:9px 14px;transition:.15s;}
.duoHostBtn:hover{filter:brightness(1.08);}
.duoHostBtn:disabled{opacity:.6;cursor:default;}
.duoInviteInput{appearance:none;width:100%;box-sizing:border-box;font-family:var(--display);font-size:13px;
  color:#fff;background:rgba(255,255,255,.05);border:1px solid var(--line2);border-radius:9px;padding:8px 11px;}
.duoInviteInput::placeholder{color:var(--muted);}
.duoInviteInput:focus{outline:none;border-color:var(--acc2);}
.duoInviteHint{margin:0;font-size:11.5px;line-height:1.45;color:var(--muted);}
.duoSchedToggle{appearance:none;cursor:pointer;font-family:var(--display);font-size:12.5px;font-weight:600;
  color:var(--muted);background:transparent;border:1px solid var(--line2);border-radius:10px;padding:8px 12px;transition:.15s;}
.duoSchedToggle:hover{color:var(--txt);border-color:rgba(255,255,255,.22);}
.duoGhostBtn{appearance:none;cursor:pointer;font-family:var(--display);font-size:13.5px;font-weight:600;
  color:var(--read);background:transparent;border:1px solid var(--line2);border-radius:10px;padding:9px 14px;transition:.15s;}
.duoGhostBtn:hover{border-color:var(--acc2);color:#fff;}

/* lobby: open rooms */
.duoRoomsHd{font-family:var(--display);font-size:13px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--dim);margin:0 0 10px;}
.duoRooms{display:flex;flex-direction:column;gap:8px;}
.duoRoomRow{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 13px;border:1px solid var(--line);border-radius:12px;background:var(--panel);}
.duoRoomInfo{display:flex;flex-direction:column;gap:2px;min-width:0;}
.duoRoomName{font-size:14px;font-weight:650;color:var(--txt);}
.duoRoomMeta{font-size:12px;color:var(--dim);}
.duoJoinBtn{appearance:none;border:0;cursor:pointer;font-family:var(--display);font-size:13px;
  font-weight:650;color:#fff;background:#000;border-radius:9px;padding:8px 18px;transition:.15s;}
.duoJoinBtn:hover{filter:brightness(1.08);}
.duoJoinBtn:disabled{opacity:.6;cursor:default;}
.duoWatchBtn{background:transparent;border:1px solid var(--line2);color:var(--read);}
.duoWatchBtn:hover{border-color:var(--acc2);color:#fff;filter:none;}

/* room: top bar */
.duoBar{display:flex;align-items:center;gap:12px;margin-bottom:16px;}.duoBack{appearance:none;cursor:pointer;font-family:var(--display);font-size:13.5px;font-weight:600;
  color:var(--read);background:transparent;border:1px solid var(--line2);border-radius:9px;padding:7px 12px;transition:.15s;}
.duoBack:hover{border-color:var(--acc2);color:#fff;}
.duoBarTitle{font-family:var(--display);font-size:16px;font-weight:700;color:#fff;}
.duoWatchCount{font-size:12.5px;font-weight:650;color:var(--read);background:rgba(255,255,255,.06);
  border:1px solid var(--line2);border-radius:99px;padding:3px 10px;}
.duoWatchTag{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--acc2);border:1px solid var(--acc2);border-radius:99px;padding:3px 9px;margin-left:auto;}
.duoEndLive{appearance:none;cursor:pointer;font-family:var(--display);font-size:13px;font-weight:700;
  color:#fff;background:#c0392b;border:0;border-radius:9px;padding:7px 14px;transition:.15s;}
.duoEndLive:hover{filter:brightness(1.1);}
.duoFocusBtn{appearance:none;cursor:pointer;font-family:var(--display);font-size:13px;font-weight:700;
  color:var(--read);background:rgba(255,255,255,.06);border:1px solid var(--line2);border-radius:9px;
  padding:7px 13px;transition:.15s;margin-left:auto;}
.duoFocusBtn:hover{border-color:var(--acc2);color:#fff;}
/* a participant took the game fullscreen on their own screen - hide the chat/chrome,
   let the board fill the space. The Minimize button (label swap) brings them back. */
.duoFocus{background:var(--bg);padding:24px;overflow:auto;}
.duoFocus .duoChat{display:none;}
.duoFocus .duoRoomGrid{flex-direction:column;min-height:0;height:100%;}
.duoFocus .duoArena{margin:0 auto;max-width:1100px;width:100%;}
.duoFocus .duoStage{gap:26px;}
.duoFocus .duoBoard{transform:scale(1.12);transform-origin:top center;}
@media(max-width:720px){.duoFocus .duoBoard{transform:none;}}
.duoReservedTag{font-size:12px;font-weight:650;color:var(--muted);background:rgba(255,255,255,.05);
  border:1px solid var(--line2);border-radius:99px;padding:5px 12px;white-space:nowrap;}

/* room: versus strip (slim collapsed bar - both handles + pfp, low profile) */
.duoVs{display:flex;align-items:center;gap:10px;margin-bottom:0;flex:0 0 auto;}
.duoPlayer{flex:1;display:flex;align-items:center;justify-content:center;gap:9px;
  padding:8px 12px;border:1px solid var(--line2);border-radius:11px;background:var(--panel);}
.duoPlayer.me{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.08);}
.duoPlayer.them.waiting{opacity:.55;border-style:dashed;}
.duoAv{width:30px;height:30px;flex:0 0 auto;border-radius:50%;overflow:hidden;
  display:flex;align-items:center;justify-content:center;font-family:var(--display);
  font-size:14px;font-weight:800;color:#fff;background:linear-gradient(135deg,#2a2a30,#22203a);}
.duoAv img{width:100%;height:100%;object-fit:cover;}
.duoPlayerCol{display:flex;flex-direction:row;align-items:center;gap:7px;min-width:0;}
.duoPlayerName{font-family:var(--display);font-size:14px;font-weight:700;color:#fff;
  max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.duoMark{display:inline-flex;align-items:center;justify-content:center;width:21px;height:21px;
  border-radius:6px;font-size:12.5px;font-weight:800;}
.duoMark.mk-X{color:#c9c9cf;background:rgba(255,255,255,.16);}
.duoMark.mk-O{color:#ff7eb6;background:rgba(255,126,182,.16);}
.duoMark.mk-R{color:#ff5e6c;background:rgba(255,94,108,.18);}
.duoMark.mk-Y{color:#ffd23f;background:rgba(255,210,63,.18);}
.duoVsX{display:flex;align-items:center;font-family:var(--display);font-size:12px;font-weight:800;
  letter-spacing:.08em;color:var(--dim);}

/* room: stage */
.duoStage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;}
.duoWaiting{font-size:14px;color:var(--muted);text-align:center;padding:40px 16px;line-height:1.6;}
.duoBanner{font-family:var(--display);font-size:17px;font-weight:700;color:#fff;text-align:center;padding:24px 10px;}
.duoStatus{font-family:var(--display);font-size:15px;font-weight:650;color:var(--read);}
.duoStatus.done{color:#fff;font-size:18px;font-weight:800;}
.duoBoard{display:flex;justify-content:center;}
.duoEndActions{display:flex;gap:10px;margin-top:4px;}

/* board: tic-tac-toe */
.duoTtt{display:grid;grid-template-columns:repeat(3,96px);grid-template-rows:repeat(3,96px);gap:9px;}
.duoTttCell{appearance:none;cursor:pointer;border:1px solid var(--line2);border-radius:12px;
  background:var(--panel);font-size:38px;font-weight:800;line-height:1;color:#fff;transition:.12s;
  display:flex;align-items:center;justify-content:center;}
.duoTttCell:not(:disabled):hover{border-color:var(--acc2);background:rgba(255,255,255,.08);}
.duoTttCell:disabled{cursor:default;}
.duoTttCell.mark-X{color:#c9c9cf;}
.duoTttCell.mark-O{color:#ff7eb6;}

/* board: connect four */
.duoC4{display:flex;gap:7px;padding:11px;background:rgba(255,255,255,.07);border:1px solid var(--line2);border-radius:14px;}
.duoC4Col{display:flex;flex-direction:column;gap:7px;appearance:none;cursor:pointer;
  background:transparent;border:0;padding:4px;border-radius:9px;transition:.12s;}
.duoC4Col:not(:disabled):hover{background:rgba(255,255,255,.12);}
.duoC4Col:disabled{cursor:default;}
.duoC4Cell{width:40px;height:40px;border-radius:50%;background:var(--bg0);box-shadow:inset 0 2px 5px rgba(0,0,0,.45);}
.duoC4Cell.disc-R{background:radial-gradient(circle at 35% 30%,#ff8a93,#ff3344);}
.duoC4Cell.disc-Y{background:radial-gradient(circle at 35% 30%,#ffe27a,#ffc107);}

/* board: rock-paper-scissors */
.duoRpsScore{display:flex;align-items:center;gap:12px;font-family:var(--display);font-size:16px;font-weight:700;color:#fff;}
.duoRpsDash{color:var(--dim);}
.duoRpsThem{color:var(--read);}
.duoRpsReveal{display:flex;align-items:center;gap:14px;padding:6px 0;}
.duoRpsThrow{font-size:44px;line-height:1;}
.duoRpsVs{font-family:var(--display);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--dim);}
.duoRpsPicks{display:flex;gap:10px;}
.duoRpsBtn{appearance:none;cursor:pointer;width:70px;height:70px;border-radius:16px;
  border:1px solid var(--line2);background:var(--panel);font-size:34px;line-height:1;transition:.12s;}
.duoRpsBtn:not(:disabled):hover{border-color:var(--acc2);background:rgba(255,255,255,.1);}
.duoRpsBtn.on{border-color:var(--acc2);background:rgba(255,255,255,.18);}
.duoRpsBtn:disabled{cursor:default;}
.duoRpsHint{font-size:13px;color:var(--muted);}

@media (max-width:760px){
  .duoTtt{grid-template-columns:repeat(3,72px);grid-template-rows:repeat(3,72px);}
  .duoC4Cell{width:34px;height:34px;}
}

/* room: live chat */
.duoChat{border:1px solid var(--line);border-radius:14px;background:var(--panel);overflow:hidden;
  display:flex;flex-direction:column;width:300px;flex-shrink:0;align-self:stretch;}
.duoRoomGrid{display:flex;gap:18px;align-items:stretch;flex:1;min-height:calc(100dvh - 150px);}
.duoArena{flex:1;min-width:0;display:flex;flex-direction:column;gap:16px;}
.duoChatList{display:flex;flex-direction:column;gap:3px;padding:10px 12px;flex:1;min-height:0;overflow-y:auto;}
@media(max-width:720px){.duoRoomGrid{flex-direction:column;}.duoChat{width:100%;min-height:260px;}}
/* live-stream format: one line per message - "name: text", no bubbles, no sides */
.duoChatRow{display:block;max-width:100%;align-self:stretch;padding:2px 2px;background:transparent;
  border-radius:0;line-height:1.45;}
.duoChatRow.mine{align-self:stretch;background:transparent;}
.duoChatName{font-size:13px;font-weight:700;color:#fff;}
.duoChatName::after{content:":";color:var(--muted);margin:0 5px 0 1px;font-weight:700;}
.duoChatRow.mine .duoChatName{color:#9ec3ff;}
.duoChatText{font-size:13.5px;line-height:1.45;color:var(--read);word-break:break-word;}
.duoChatForm{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line);}
.duoChatInput{flex:1;min-width:0;font-family:inherit;font-size:13.5px;color:var(--txt);
  background:var(--bg0);border:1px solid var(--line2);border-radius:10px;padding:9px 12px;}
.duoChatInput:focus{outline:none;border-color:var(--acc2);}
.duoChatSend{appearance:none;border:0;cursor:pointer;font-family:var(--display);font-size:13px;
  font-weight:650;color:#fff;background:#000;border-radius:10px;padding:9px 16px;transition:.15s;}
.duoChatSend:hover{filter:brightness(1.08);}

/* lobby: schedule-for-later */
.duoSchedBtn{appearance:none;cursor:pointer;font-family:var(--display);font-size:12.5px;font-weight:600;
  color:var(--muted);background:transparent;border:1px solid var(--line2);border-radius:10px;
  padding:8px 12px;margin-top:8px;width:100%;transition:.15s;}
.duoSchedBtn:hover{color:var(--txt);border-color:rgba(255,255,255,.22);}
.duoSchedRow{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap;}
.duoSchedWhen{flex:1;min-width:0;font:inherit;font-size:12.5px;color:var(--txt);
  background:var(--bg0);border:1px solid var(--line2);border-radius:10px;padding:8px 10px;color-scheme:dark;}
.duoSchedGo{appearance:none;border:0;cursor:pointer;font-family:var(--display);font-size:12.5px;font-weight:650;
  color:#fff;background:#000;border-radius:10px;padding:8px 14px;}
.duoSchedGo:hover{filter:brightness(1.08);}
.duoSchedCancel{appearance:none;cursor:pointer;font-family:var(--display);font-size:12.5px;font-weight:600;
  color:var(--muted);background:transparent;border:1px solid var(--line2);border-radius:10px;padding:8px 12px;margin-left:8px;}
.duoSchedCancel:hover{color:#ff8d8d;border-color:rgba(255,120,120,.35);}
.duoSchedSoon{font-size:12.5px;font-weight:600;color:var(--acc);align-self:center;}

/* comment thread: "see more" chunking buttons */
.cmtMore{appearance:none;cursor:pointer;display:inline-block;margin:6px 0 4px;
  font-family:var(--display);font-size:12.5px;font-weight:650;color:var(--acc);
  background:transparent;border:0;padding:4px 0;}
.cmtMore:hover{text-decoration:underline;}
.cmtMoreRoots{margin-top:10px;}

/* feed: flash a post when you jump to it from its detail page */
@keyframes flashPost{0%{box-shadow:0 0 0 2px var(--acc2) inset;background:rgba(255,255,255,.10);}100%{box-shadow:none;background:transparent;}}
.flashPost{animation:flashPost 1.6s ease-out;border-radius:14px;}

/* in-app confirm dialog (replaces native confirm/alert) */
.uiConfirmOverlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(0,0,0,.6);backdrop-filter:blur(3px);opacity:0;transition:opacity .18s;}
.uiConfirmOverlay.on{opacity:1;}
.uiConfirmBox{width:100%;max-width:340px;background:var(--panel2);border:1px solid var(--line2);
  border-radius:16px;padding:22px;box-shadow:0 24px 60px rgba(0,0,0,.55);transform:translateY(8px);transition:transform .18s;}
.uiConfirmOverlay.on .uiConfirmBox{transform:translateY(0);}
.uiConfirmMsg{margin:0 0 18px;font-size:15px;line-height:1.5;color:var(--txt);}
.uiConfirmRow{display:flex;gap:10px;justify-content:flex-end;}
.uiConfirmCancel,.uiConfirmOk{appearance:none;cursor:pointer;font-family:var(--display);font-size:13.5px;
  font-weight:650;border-radius:10px;padding:9px 16px;transition:.15s;}
.uiConfirmCancel{color:var(--txt);background:transparent;border:1px solid var(--line2);}
.uiConfirmCancel:hover{border-color:rgba(255,255,255,.28);}
.uiConfirmOk{color:#fff;background:#000;border:0;}
.uiConfirmOk:hover{filter:brightness(1.08);}
.uiConfirmOk.danger{background:#e0455e;}

/* ════════════════ notification toast (slide-in "pop") ════════════════ */
.ntToast{position:fixed;right:18px;bottom:18px;z-index:1200;display:flex;align-items:center;gap:10px;
  max-width:300px;padding:11px 14px;border:1px solid var(--line2);border-radius:14px;
  background:var(--panel2);box-shadow:0 18px 44px -14px rgba(0,0,0,.7);cursor:pointer;
  text-align:left;transform:translateY(140%);opacity:0;transition:transform .32s cubic-bezier(.2,.8,.2,1),opacity .32s;}
.ntToast.on{transform:translateY(0);opacity:1;}
.ntToast .ntAv{width:34px;height:34px;flex:0 0 auto;border-radius:50%;overflow:hidden;
  display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;}
.ntToast .ntAv img{width:100%;height:100%;object-fit:cover;}
.ntToastTxt{font-size:13px;line-height:1.35;color:var(--read);min-width:0;}
.ntToastName{font-weight:750;color:#fff;}
.ntToastVerb{color:var(--muted);}
@media (max-width:760px){ .ntToast{left:14px;right:14px;bottom:84px;max-width:none;} }

/* ── Analytics tab ───────────────────────────────────────────────────────── */
.pgCountStatic{cursor:default;}
.pgCountStatic:hover .pgCountL,.pgCountStatic:hover .pgCountN{color:inherit;}
.anHd{font-size:21px;font-weight:800;color:var(--txt);margin:18px 4px 2px;}
.anSub{color:var(--muted);font-size:13.5px;line-height:1.55;margin:0 4px 16px;max-width:560px;}
.anGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 4px;}
/* YouTube-style hero metrics: the four numbers that matter, up top and bigger */
.anGridHero{grid-template-columns:repeat(4,1fr);}
.anGridHero .anStat{background:rgba(255,255,255,.05);padding:18px 18px 16px;}
.anGridHero .anStatN{font-size:30px;}
.anGridSub{grid-template-columns:repeat(3,1fr);margin:0;}
@media (max-width:760px){ .anGridHero{grid-template-columns:repeat(2,1fr);} }
.anStat{background:rgba(255,255,255,.035);border:1px solid var(--line,#23232b);border-radius:14px;padding:16px 16px 14px;}
.anStatN{font-size:26px;font-weight:800;color:var(--txt);font-variant-numeric:tabular-nums;line-height:1.1;}
.anStatL{font-size:12.5px;font-weight:650;color:var(--muted);margin-top:5px;text-transform:uppercase;letter-spacing:.05em;}
.anStatHint{font-size:11.5px;color:var(--dim,#6b6b76);margin-top:3px;}
.anTop{margin:22px 4px 40px;}
.anTopHd{font-size:14px;font-weight:750;color:var(--txt);margin-bottom:10px;}
.anRow{display:flex;align-items:center;gap:14px;padding:11px 12px;border-radius:12px;
  border:1px solid var(--line,#23232b);background:rgba(255,255,255,.02);margin-bottom:8px;}
.anRowMain{flex:1;min-width:0;}
.anRowText{font-size:13.5px;color:var(--read,#cfcfd6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:7px;}
.anBar{height:6px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden;}
.anBarFill{height:100%;border-radius:99px;background:linear-gradient(90deg,#c9c9cf,#e8e8ea);}
.anRowMeta{text-align:right;flex:0 0 auto;}
.anRowViews{display:block;font-size:13.5px;font-weight:750;color:var(--txt);font-variant-numeric:tabular-nums;}
.anRowEng{display:block;font-size:11.5px;color:var(--muted);margin-top:2px;}
@media (max-width:760px){ .anGrid{grid-template-columns:repeat(2,1fr);} }
.anInsights{margin:22px 4px 4px;background:rgba(255,255,255,.035);border:1px solid var(--line,#23232b);
  border-radius:14px;padding:14px 16px;}
.anInsight{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-top:1px solid rgba(255,255,255,.05);}
.anInsight:first-of-type{border-top:0;}
.anInsightDot{flex:0 0 auto;font-weight:800;color:var(--txt);line-height:1.5;}
.anInsightText{font-size:13.5px;line-height:1.5;color:var(--read,#cfcfd6);}
.anFmtRow{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 12px;
  border-radius:12px;background:rgba(255,255,255,.035);border:1px solid var(--line,#23232b);margin-bottom:8px;}
.anFmtMain{min-width:0;display:flex;flex-direction:column;gap:2px;}
.anFmtName{font-size:13.5px;font-weight:750;color:var(--txt);text-transform:capitalize;}
.anFmtSub{font-size:11.5px;color:var(--muted);}
.anFmtMeta{text-align:right;flex:0 0 auto;}
.anFmtViews{display:block;font-size:13.5px;font-weight:750;color:var(--txt);font-variant-numeric:tabular-nums;}
.anFmtEng{display:block;font-size:11.5px;color:var(--muted);margin-top:2px;}
/* collapsible "More details" layer (collapsed by default) */
.anCollapse{margin:8px 4px 40px;border:1px solid var(--line,#23232b);border-radius:14px;overflow:hidden;
  background:rgba(255,255,255,.02);}
.anCollapseHd{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 16px;background:none;border:0;cursor:pointer;font-family:inherit;text-align:left;}
.anCollapseHd:hover{background:rgba(255,255,255,.03);}
.anCollapseTitle{font-size:13.5px;font-weight:750;color:var(--txt);letter-spacing:.02em;}
.anCollapseChev{font-size:18px;color:var(--muted);transition:transform .2s ease;line-height:1;}
.anCollapseHd.on .anCollapseChev{transform:rotate(90deg);}
.anCollapseBody{padding:4px 14px 14px;}
.anCollapseBody[hidden]{display:none;}
.anCollapseBody .anTop{margin:18px 0 0;}
.anCollapseBody .anGridSub{margin-bottom:4px;}

/* ════════════════ SETTINGS ════════════════ */
/* working preference effects */
html[data-reduce-motion] *{animation:none!important;transition:none!important;scroll-behavior:auto!important;}

.setOverlay{position:fixed;inset:0;z-index:130;display:flex;align-items:flex-start;justify-content:center;
  padding:6vh 16px 16px;background:rgba(4,4,6,.74);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);overflow-y:auto;}
.setCard{width:100%;max-width:520px;background:var(--panel);border:1px solid var(--line2);border-radius:18px;
  box-shadow:0 30px 80px -24px rgba(0,0,0,.8);overflow:hidden;}
.setHead{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px;border-bottom:1px solid var(--line);}
.setTitle{margin:0;font-family:var(--display);font-size:20px;font-weight:800;color:#fff;}
.setClose{appearance:none;cursor:pointer;width:32px;height:32px;border-radius:9px;font-size:15px;
  color:var(--read);background:transparent;border:1px solid var(--line2);transition:.15s;}
.setClose:hover{color:#fff;border-color:var(--acc2);}
.setSection{padding:16px 20px;border-bottom:1px solid var(--line);}
.setSectionTitle{margin:0 0 12px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}
.setWho{display:flex;flex-direction:column;gap:2px;margin-bottom:14px;}
.setWhoLabel{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}
.setWhoEmail{font-family:var(--display);font-size:15px;font-weight:650;color:#fff;word-break:break-all;}
.setAction,.setToggle{display:flex;align-items:center;gap:14px;padding:11px 0;border-top:1px solid var(--line);}
.setSection .setAction:first-of-type,.setSection .setToggle:first-of-type{border-top:0;}
.setToggleTxt{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;}
.setToggleLabel{font-size:14px;font-weight:650;color:#fff;}
.setToggleHint{font-size:12px;line-height:1.4;color:var(--muted);}
.setBtn{appearance:none;cursor:pointer;flex:0 0 auto;font-family:var(--display);font-size:13px;font-weight:650;
  color:#fff;background:#000;border:0;border-radius:9px;padding:8px 16px;transition:.15s;}
.setBtn:hover{filter:brightness(1.18);}
.setBtn:disabled{opacity:.6;cursor:default;}
.setBtn.danger{background:#c0392b;}
.setSwitch{appearance:none;cursor:pointer;flex:0 0 auto;width:46px;height:26px;border-radius:99px;
  background:rgba(255,255,255,.14);border:1px solid var(--line2);position:relative;transition:.18s;}
.setSwitch::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;
  background:#fff;transition:.18s;}
.setSwitch.on{background:#fff;border-color:#fff;}
.setSwitch.on::after{left:22px;background:#000;}
.setAbout{margin:0;font-size:12.5px;line-height:1.55;color:var(--muted);}

/* ====================================================================== */
/* SIGNED-OUT: radio-only face page (guest lock)                          */
/* A logged-out visitor sees ONLY the radio - no sidebar, no feed, nothing */
/* else - so the page never looks "cursed" with dead links. One button     */
/* lets them log in / sign up; finishing that drops them into the full app. */
/* ====================================================================== */
html.daGuest #navRail{display:none !important;}
html.daGuest #app{grid-template-columns:minmax(0,1fr) 360px !important;
  max-width:1200px;margin:0 auto;}
html.daGuest #archivePanel,html.daGuest #chatPanel,html.daGuest #notifyPanel,
html.daGuest #gamesPanel,html.daGuest #livePanel,html.daGuest #analyticsPanel,
html.daGuest #postDetail,html.daGuest #miniPlayer{display:none !important;}
@media (max-width:900px){
  html.daGuest #app{grid-template-columns:1fr !important;}
  html.daGuest #side{display:none !important;}
}
/* the player tabs sit at the top of the side card again - the auth cluster now
   lives in the left-column top row, so nothing overlaps them or the volume bar */
html.daGuest #side{padding-top:20px !important;}
/* with no nav rail, give the radio hero real breathing room (was glued to the
   left edge - the rail used to provide that gap) + top space so the status
   pill isn't glued to the top of the window */
html.daGuest #main{padding:clamp(16px,2.6vh,30px) clamp(22px,4vw,56px) 0 !important;}

/* the way in: a Google button + Log in / Sign up cluster, pinned to the right
   of the top status row (left column) so it stays clear of the player tabs at
   every width. Google = real white pill, sign-in = the app's flat black pill. */
.daGuestAuth{display:none;align-items:center;gap:10px;margin-left:auto;}
html.daGuest .daGuestAuth{display:flex;}

.daGuestGoogle{display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  padding:10px 17px;border-radius:10px;font-family:var(--display,inherit);
  font-weight:600;font-size:13px;letter-spacing:-0.01em;color:#1f1f23;
  background:#fff;border:1px solid #e4e4e7;box-shadow:0 8px 22px -10px rgba(0,0,0,.7);
  transition:filter .15s,transform .15s;}
.daGuestGoogle:hover{filter:brightness(.97);transform:translateY(-1px);}
.daGuestGoogle svg{flex:0 0 auto;}

.daGuestSignIn{display:inline-flex;align-items:center;gap:8px;padding:11px 19px;
  border-radius:10px;cursor:pointer;
  font-family:var(--display,inherit);font-weight:650;font-size:13px;letter-spacing:-0.01em;
  color:#fff;background:#000;border:1px solid #4a4a52;box-shadow:none;
  transition:filter .15s,border-color .15s;}
.daGuestSignIn:hover{filter:brightness(1.12);border-color:#6a6a74;}
.daGuestSignIn svg{opacity:.9;}

/* shared-post peek: a logged-out visitor who followed a share link sees that
   one post, read-only. Any click on it OR pressing Back boots them to sign-in. */
.daGuestPost{position:fixed;inset:0;z-index:115;overflow:auto;
  padding:64px 16px 124px;background:rgba(6,6,9,.9);
  backdrop-filter:blur(10px) saturate(1.1);-webkit-backdrop-filter:blur(10px) saturate(1.1);
  display:flex;flex-direction:column;align-items:center;}
.daGuestPostInner{width:100%;max-width:600px;}
.daGuestPostLoad{color:var(--muted,#9a93ad);text-align:center;padding:60px 0;font-size:14px;}
.daGuestPostBar{position:fixed;left:0;right:0;bottom:0;z-index:116;
  display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:center;
  padding:16px 18px calc(16px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(0deg,rgba(8,8,12,.98) 55%,rgba(8,8,12,0));
  border-top:1px solid rgba(255,255,255,.08);}
.daGuestPostMsg{color:#cfc9dd;font-size:13.5px;}
.daGuestPostBtn{position:static !important;display:inline-flex !important;top:auto;right:auto;left:auto;transform:none !important;}

/* ════════════ Studio: game builder + beat maker (2026-06-26) ════════════ */
.gmBuilder{margin:4px 0 22px;}
.gmTplGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:10px 0;}
.gmTpl{display:flex;flex-direction:column;gap:4px;text-align:left;padding:12px;border-radius:14px;
  border:1px solid var(--line);background:var(--panel2);color:var(--txt);cursor:pointer;font-family:inherit;transition:.16s;}
.gmTpl:hover{border-color:var(--acc);transform:translateY(-2px);}
.gmTpl.on{border-color:var(--acc);box-shadow:0 0 0 2px var(--acc) inset;}
.gmTplEmoji{font-size:26px;line-height:1;}
.gmTplName{font-weight:800;font-size:14px;}
.gmTplBlurb{font-size:11.5px;color:var(--muted);line-height:1.4;}
.gmTplEditor{margin-top:12px;padding:14px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.03);}
.gmEditHd{font-size:16px;font-weight:800;margin-bottom:10px;}
.gmFields{display:flex;flex-direction:column;gap:10px;}
.gmField{display:flex;flex-direction:column;gap:4px;}
.gmFieldLabel{font-size:12px;font-weight:700;color:var(--muted);}
.gmFieldHint{font-size:11px;color:var(--muted);opacity:.8;}
.gmColorRow{display:flex;gap:14px;}
.gmFieldColor{flex-direction:row;align-items:center;gap:8px;}
.gmColor{width:46px;height:30px;border:1px solid var(--line);border-radius:8px;background:none;cursor:pointer;padding:2px;}
.gmBuildRow{display:flex;gap:10px;margin-top:12px;}

/* itch.io-style publish hero (game studio) */
.gmHero{margin:4px 0 18px;padding:20px;border-radius:16px;border:1px solid var(--line);
  background:linear-gradient(160deg,rgba(217,119,87,.12),rgba(255,255,255,.03));}
.gmHeroKicker{font-size:11px;font-weight:800;letter-spacing:.22em;color:var(--acc);margin-bottom:8px;}
.gmHeroTitle{font-size:22px;font-weight:800;margin:0 0 8px;}
.gmHeroSub{font-size:13.5px;line-height:1.6;color:var(--muted);margin:0;max-width:60ch;}