/* Extra styles for the live app (real cameras, YouTube TV, rooms list). */
.logo a{color:inherit;text-decoration:none}
.invited{margin:0;font-size:15px;font-weight:700;background:rgba(255,79,139,.15);border:1px solid var(--neon);color:#ffd6e4;padding:8px 12px;border-radius:8px;align-self:flex-start}

/* rooms list */
.emptyrooms{display:flex;flex-direction:column;gap:6px;align-items:flex-start;max-width:46ch;padding:22px;border:2px dashed #5a4335;border-radius:10px;background:rgba(12,7,5,.6)}
.emptyrooms b{font-family:var(--hand);font-weight:400;font-size:24px}
.emptyrooms span{color:var(--dim);line-height:1.5}
.front .forget{position:absolute;top:-10px;left:-8px;z-index:4;width:26px;height:26px;border-radius:50%;border:1px solid #5a4335;background:#2b201b;color:var(--dim);font-size:12px;padding:0;opacity:.85}
.front .forget:hover{color:var(--fg);border-color:var(--amber);opacity:1}

/* real video in tiles */
.tile .vid{position:absolute;inset:0;z-index:0}
.tile .vid video{width:100%;height:100%;object-fit:cover;display:block;background:#000}
.tile.hasvid .face{display:none}
.tile .tape,.tile .muted,.tile .onmic,.tile .lyrics{z-index:2}
.tile .muted[hidden]{display:none!important}
.mirror{transform:scaleX(-1)}
.stage .tile.hasvid::before{display:none}
.stage .tile{min-height:180px}
.audience .tile.hasvid{filter:none}

/* mic check camera preview */
.mcpreview video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mcpreview.off video{display:none}
.mcpreview:not(.off) .face{display:none}

/* YouTube on the TV: big enough for YouTube's minimum player size */
.tv .ytbox-host{position:absolute;inset:9px 9px 16px;border-radius:16px/22px;overflow:hidden;display:none}
.tv.ytmode .ytbox-host{display:block}
.tv.ytmode .screen{visibility:hidden}
.tv .ytbox-host iframe{width:100%;height:100%;border:0;display:block}
.ytnote{display:inline-block;font-family:var(--lyric);font-size:clamp(18px,2.4vw,28px);color:var(--beer);background:rgba(0,0,0,.55);padding:6px 14px;border-radius:8px}

.transport .btn:disabled{opacity:.6}
#play[disabled]{background:#2b201b;border-color:#5a4335;color:var(--dim);box-shadow:none}
.lib .add select{font:inherit;font-size:12px;max-width:110px;border-radius:4px;border:1px solid #b9a27f;background:#fff8e8;color:var(--ink)}
.crowdhead{gap:12px;flex-wrap:wrap}
@media (max-width:860px){
  .stage .tile{min-height:0}
}

/* ---------- character builder (on the name tag) ---------- */
#home{grid-template-columns:minmax(0,1.15fr) minmax(0,420px)!important;align-items:start!important}
.nametag{transform:rotate(-1deg)!important}
.pvhead{flex:none;width:46px;height:46px;border-radius:50%;background:#f3e6d8;overflow:hidden;display:flex}
.pvhead svg,.chathead svg,.mehead svg{width:100%;height:100%;display:block}
.builder{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;background:rgba(0,0,0,.18);border-radius:10px;padding:10px}
.avstage{position:relative;background:radial-gradient(ellipse at 50% 30%,#fff6e8,#efd9c2 70%);border-radius:8px;height:226px;cursor:pointer;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.avstage::after{content:"";position:absolute;left:12%;right:12%;bottom:6px;height:8px;border-radius:50%;background:rgba(0,0,0,.18);z-index:0}
.avstage svg{position:relative;z-index:1;height:100%;width:auto}
.avstage .lockbadge{position:absolute;top:6px;left:6px;z-index:2;background:#16110e;color:#ffd23f;font-size:11px;font-weight:800;padding:2px 7px;border-radius:999px}
.avstage.locked svg{filter:grayscale(.2) brightness(.9)}
.bcontrols{display:flex;flex-direction:column;gap:8px;min-width:0}
.cattabs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.cattabs button{border:0;border-radius:6px;background:rgba(0,0,0,.25);color:#ffe3e7;font-size:12px;font-weight:700;padding:6px 2px}
.cattabs button[aria-selected="true"]{background:#fff;color:#16110e}
.cycler{display:flex;align-items:center;gap:6px;background:#fff;border-radius:8px;padding:5px}
.cyc{flex:none;width:32px;height:32px;border-radius:6px;border:0;background:#16110e;color:#fff;font-size:13px}
.cyc:hover{background:#c8162f}
.cyname{flex:1;min-width:0;text-align:center;color:#16110e;line-height:1.15}
.cyname b{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cyname small{font-size:11px;color:#6b5646;font-variant-numeric:tabular-nums}
.lockline{margin:0;font-size:12px;line-height:1.35;color:#fff3c4;background:rgba(0,0,0,.28);border-radius:6px;padding:6px 8px}
.bacts{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto}
.mini{border:0;border-radius:6px;background:rgba(0,0,0,.25);color:#fff;font-size:12px;font-weight:700;padding:6px 8px}
.mini:hover{background:rgba(0,0,0,.4)}
@media (max-width:820px){#home{grid-template-columns:minmax(0,1fr)!important}.nametag{max-width:440px;width:100%;min-width:0}.hero{min-width:0}}
@media (max-width:420px){.builder{grid-template-columns:118px minmax(0,1fr)}.avstage{height:190px}}

/* header chips */
.trophychip{background:#2b201b;border:1px solid #5a4335;border-radius:999px;padding:5px 11px;font-weight:800;font-size:13px;color:var(--beer)}
.trophychip:hover{border-color:var(--amber)}
.mechip .mehead{width:24px;height:24px;border-radius:50%;background:#f3e6d8;overflow:hidden;display:inline-flex}

/* avatars in the room */
.tile .avbox{position:absolute;left:0;right:0;top:6%;bottom:0;z-index:1;display:flex;justify-content:center;align-items:flex-end;pointer-events:none}
.tile .avbox svg{height:100%;width:auto;max-width:100%}
.stage .tile .avbox{top:4%;bottom:-2%}
.tile.hasvid .avbox{display:none}
.tile.camoff .avbox svg{filter:saturate(.6) brightness(.85)}
.tile{cursor:pointer}
.tile:focus-visible{outline:2px solid var(--beer);outline-offset:-2px}
.stage .tile .face,.audience .tile .face{display:none}
.chathead{display:inline-flex;width:20px;height:20px;border-radius:50%;background:#f3e6d8;overflow:hidden;vertical-align:-5px;margin-right:4px}
.mcpreview .mcav{position:absolute;inset:6% 0 0;display:flex;justify-content:center;align-items:flex-end}
.mcpreview .mcav svg{height:100%;width:auto}
.mcpreview:not(.off) .mcav{display:none}

/* person card */
.pcav{height:170px;display:flex;justify-content:center;background:radial-gradient(ellipse at 50% 30%,#fff6e8,#efd9c2 70%);border-radius:8px}
.pcav svg{height:100%;width:auto}
.pctro{font-size:13px;color:#6b5646}
.hostbtns button:disabled{opacity:.5}

/* trophy case */
.trophycard{width:min(680px,100%);max-height:calc(100vh - 32px);overflow:auto;background:#1a1311;border:1px solid #5a4335;border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:10px;box-shadow:0 20px 50px rgba(0,0,0,.7)}
.trophycard h3{font-family:var(--neonface);font-weight:400;font-size:38px;margin:0;line-height:1;color:#fff;text-shadow:0 0 4px #fff,0 0 12px var(--amber),0 0 24px var(--amber)}
.trophycard .who{margin:0;color:var(--dim)}
.trlist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px}
.tr{display:grid;grid-template-columns:40px minmax(0,1fr);gap:4px 10px;align-items:start;background:#241a16;border:1px solid #3a2b23;border-radius:8px;padding:10px}
.tr .te{font-size:26px;line-height:1;grid-row:span 3;text-align:center;filter:grayscale(1);opacity:.5}
.tr.got{border-color:var(--amber);background:#2b2014}
.tr.got .te{filter:none;opacity:1}
.tr b{font-size:14px}
.tr .td{font-size:12.5px;color:var(--dim)}
.tr .tbar{height:5px;background:#000;border-radius:3px;overflow:hidden}
.tr .tbar i{display:block;height:100%;background:linear-gradient(90deg,var(--teal),var(--beer))}
.tr .tun{grid-column:2;font-size:11.5px;color:#cbb79f}
.tr .tun b{font-size:11.5px;color:var(--beer)}
.trnote{margin:0;font-size:12px;color:var(--dim)}
.trophycard .ruleacts{justify-content:flex-end}

/* achievement unlocked popup */
.achpop{position:fixed;left:50%;top:calc(16px + env(safe-area-inset-top,0px));transform:translateX(-50%);z-index:40;display:flex;align-items:center;gap:12px;background:#16110e;border:2px solid var(--beer);border-radius:12px;padding:10px 16px 10px 12px;box-shadow:0 0 30px rgba(255,207,90,.45),0 10px 30px rgba(0,0,0,.6);max-width:calc(100% - 32px);animation:achin .4s ease-out}
.achpop .ae{font-size:34px;line-height:1}
.achpop b{display:block;color:var(--beer);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.achpop strong{display:block;font-size:17px;color:#fff}
.achpop span{display:block;font-size:12.5px;color:#d9c8b4}
@keyframes achin{from{transform:translate(-50%,-20px);opacity:0}}
@media (prefers-reduced-motion:reduce){.achpop{animation:none}}

/* ---------- the TV: bigger, and raised so half of it sits above the stage ---------- */
/* Size and height are set by placeTV() in micdrop.js so it never covers the header buttons. */
.stagebox{overflow:visible!important}
.curtain{border-radius:6px 6px 0 0}
.stage{border-radius:0 0 6px 6px}
#room .tv{z-index:6;right:22px;top:0;transition:width .25s ease,top .25s ease;padding:10px 10px 18px;border-radius:14px}
#room .tv .screen b{font-size:clamp(16px,1.6vw,22px)}
#room .tv .screen span,#room .tv .screen i{font-size:12px}
#room .tv .ytbox-host{inset:10px 10px 18px}
.roombar{transition:padding-right .25s ease}
.stage{transition:padding-top .25s ease}
@media (max-width:860px){
  #room .tv.inline{position:relative;right:auto;top:auto!important;width:auto!important;aspect-ratio:16/10;order:1;margin:10px 10px 0;padding:8px 8px 14px}
  #room .tv.inline:not(.ytmode){display:none}
  #room .tv.inline::before,#room .tv.inline::after{display:none}
  #room .tv.inline .ytbox-host{inset:8px 8px 14px}
  .stagebox .curtain{order:0}
  .stagebox .stage{order:2}
}
@media (prefers-reduced-motion:reduce){#room .tv,.roombar,.stage{transition:none}}

/* =====================================================================
   BIG STAGE layout (default on screens wider than 860px).
   Everything here is scoped to body.bigstage, so "Classic view" turns it all off.
   ===================================================================== */
.railtabs,.railhead,.chatpeek{display:none}
.railbody{display:flex;flex-direction:column;gap:10px;min-height:0;flex:1}
.btn.ghost{background:transparent;border-color:#4a372c;color:var(--dim)}
.btn.ghost:hover{color:var(--fg)}

@media (min-width:861px){
  body.bigstage .app{max-width:none}
  body.bigstage.inroom header.top{align-items:center;flex-wrap:nowrap;gap:18px}
  body.bigstage.inroom .logo{font-size:32px;flex:none}
  body.bigstage header.top .roombar{flex:1;min-width:0;gap:8px;padding-right:0!important}
  body.bigstage header.top .roombar h2{font-size:28px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:32vw}
  body.bigstage.inroom .topright{flex:none}

  body.bigstage #room{grid-template-columns:minmax(0,1fr) 310px;gap:12px;transition:grid-template-columns .28s ease}
  body.bigstage #room.railfolded{grid-template-columns:minmax(0,1fr) 68px}
  body.bigstage .main{gap:8px}
  body.bigstage .stagebox{min-height:320px}
  body.bigstage .stage{padding:10px;gap:10px}
  body.bigstage .stage .tile{border-radius:8px}
  body.bigstage .transport{padding:6px 12px;gap:10px}
  body.bigstage .transport .song b{font-size:16px}
  body.bigstage .crowdhead{min-height:0}

  /* crowd: one tidy strip of little screens along the bottom */
  body.bigstage .audience{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;max-height:none;flex:none;padding-bottom:4px;scrollbar-width:thin}
  body.bigstage .audience .tile{flex:none;width:136px;height:102px;aspect-ratio:auto}

  /* the TV gets its own lane beside the singer during YouTube songs (sized in placeTV) */
  body.bigstage #room .tv:not(.ytmode){display:none}
  body.bigstage #room .tv.ytmode{aspect-ratio:auto;padding:12px 12px 20px;border-radius:16px;box-shadow:0 14px 34px rgba(0,0,0,.7),0 0 40px rgba(255,179,64,.12)}
  body.bigstage #room .tv.ytmode .ytbox-host{inset:12px 12px 20px;border-radius:12px/16px}
  body.bigstage .stage{transition:padding-right .28s ease}

  /* bigger lyrics */
  body.bigstage .lyrics{padding:56px 16px 16px}
  body.bigstage .ytnote{font-size:clamp(22px,2vw,32px)}

  /* ---------- the sidebar ---------- */
  body.bigstage .rail{position:relative;min-width:0}
  body.bigstage .railhead{display:flex;align-items:center;gap:6px;min-height:28px}
  body.bigstage .railhead .rh{flex:1;font-family:var(--hand);font-size:15px;color:var(--dim)}
  .mini2{border:1px solid #4a372c;border-radius:6px;background:#241a16;color:var(--fg);font-size:12px;font-weight:700;padding:4px 9px}
  .mini2:hover{border-color:var(--amber)}

  /* folded: a slim strip of buttons */
  body.bigstage #room.railfolded .railbody{display:none}
  body.bigstage #room.railfolded .railtabs{display:flex;flex-direction:column;gap:8px;align-items:stretch}
  body.bigstage .railtabs button{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 4px;border-radius:10px;border:1px solid #4a372c;background:rgba(20,13,11,.85);color:var(--fg)}
  body.bigstage .railtabs button:hover{border-color:var(--amber)}
  body.bigstage .railtabs .ri{font-size:20px;line-height:1}
  body.bigstage .railtabs .rl{font-size:11px;font-weight:700;color:var(--dim)}
  body.bigstage .railtabs .pinbtn{margin-top:auto}
  body.bigstage .railtabs .badge{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:#2b201b;border:1px solid var(--amber);color:var(--beer);font-style:normal;font-size:11px;font-weight:800;line-height:18px;text-align:center}
  body.bigstage .railtabs .badge.hot{background:var(--neon);border-color:#ff8db3;color:#2a0012}
  body.bigstage .railtabs .badge[hidden]{display:none}

  /* folded, but slid out to peek */
  body.bigstage #room.railfolded.draweropen .railbody{display:flex;position:absolute;top:0;right:76px;bottom:0;width:340px;z-index:25;background:#140d0b;border:1px solid #5a4335;border-radius:12px;padding:10px;box-shadow:-18px 0 40px rgba(0,0,0,.6);animation:drawerin .2s ease-out}
  @keyframes drawerin{from{transform:translateX(16px);opacity:0}}

  /* new chat while folded */
  body.bigstage .chatpeek{display:block;position:absolute;right:76px;top:58px;z-index:24;width:max-content;min-width:140px;max-width:260px;background:var(--paper);color:var(--ink);border-radius:10px 10px 2px 10px;padding:8px 11px;font-size:13px;line-height:1.35;box-shadow:0 8px 20px rgba(0,0,0,.5);cursor:pointer;animation:drawerin .2s ease-out}
  body.bigstage .chatpeek b{display:block;font-size:12px}
  body.bigstage .chatpeek[hidden]{display:none}
}
@media (min-width:861px) and (prefers-reduced-motion:reduce){
  body.bigstage #room,body.bigstage .stage{transition:none}
  body.bigstage #room.railfolded.draweropen .railbody,body.bigstage .chatpeek{animation:none}
}

/* ---------- logo ---------- */
.brand{display:flex;flex-direction:column;gap:4px;min-width:0}
.logo a{display:inline-flex;align-items:center;gap:.06em}
.logomark{height:1.2em;width:auto;flex:none;overflow:visible;margin-right:.04em;filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px #ff4f8b) drop-shadow(0 0 14px #ff4f8b)}
.tagline{font-family:var(--body);font-weight:800;font-size:11px;letter-spacing:.42em;text-transform:uppercase;color:#fff3d6;text-shadow:0 0 8px var(--amber);padding-left:calc(1.2 * clamp(30px,4.6vw,46px) + 2px);white-space:nowrap}
body.inroom .tagline{display:none}
@media (max-width:520px){.tagline{font-size:9.5px;letter-spacing:.3em;padding-left:2px}}
@media (min-width:861px){body.bigstage.inroom .brand{flex:none}}

/* camera off: the logo glows on the back wall like a bar sign, behind the person's character */
#room .tile:not(.hasvid){background:url(/logo-sign.svg) no-repeat 8% 16% / auto 46%,radial-gradient(ellipse at 50% 30%,#3a2230,#120a0e 75%)}
#room .stage .tile:not(.hasvid){background-position:10% 18%,0 0;background-size:auto 50%,auto}
.mcpreview.off{background:url(/logo-sign.svg) no-repeat 10% 18% / auto 52%,#141010}

/* ---------- singer with no camera: the big neon logo + a clear label ---------- */
.tile .nocam{display:none}
#room .stage .tile:not(.hasvid){background:radial-gradient(ellipse at 50% 32%,#3a1a26,#110a0d 72%)}
#room .stage .tile:not(.hasvid) .avbox{display:none}
#room .stage .tile:not(.hasvid)::after{content:none}
#room .stage .tile:not(.hasvid) .nocam{position:absolute;left:0;right:0;top:0;bottom:30%;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(6px,1.4vh,14px);padding:36px 12px 0;pointer-events:none}
.nocammark{height:min(48%,240px);width:auto;max-width:70%;overflow:visible;filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 8px #ff4f8b) drop-shadow(0 0 22px #ff4f8b);animation:nocamflick 6s infinite}
.nocamwm{font-family:var(--neonface);font-size:clamp(30px,4.2vw,68px);line-height:1;color:#ffe9f1;white-space:nowrap;text-shadow:0 0 4px #fff,0 0 12px #ff4f8b,0 0 28px #ff4f8b}
.nocamwm span{color:#fff3d6;text-shadow:0 0 4px #fff,0 0 12px #ffb340,0 0 28px #ffb340}
.nocamlbl{margin-top:4px;font-family:var(--body);font-weight:800;font-size:clamp(13px,1.2vw,17px);color:#fff;background:rgba(10,5,6,.78);border:1.5px solid var(--amber);border-radius:999px;padding:6px 14px;box-shadow:0 0 14px rgba(255,179,64,.35);white-space:nowrap}
@keyframes nocamflick{0%,18%,22%,61%,65%,100%{opacity:1}20%,63%{opacity:.55}}
@media (prefers-reduced-motion:reduce){.nocammark{animation:none}}

/* ---------- sound settings ---------- */
.transport{position:relative}
.soundpanel{position:absolute;z-index:40;bottom:calc(100% + 8px);right:8px;width:380px;box-sizing:border-box;padding:12px 14px;border-radius:10px;
  background:#1d1513;border:1px solid #5a4335;box-shadow:0 10px 30px rgba(0,0,0,.55),0 0 0 1px rgba(255,179,64,.08)}
.soundpanel[hidden]{display:none}
.sphead{display:flex;align-items:baseline;gap:8px;margin-bottom:8px}
.sphead .note{flex:1;font-size:11.5px}
.sphead .x{background:none;border:0;color:#b9a28f;font-size:15px;cursor:pointer;padding:2px 6px}
.sphead .x:hover{color:#fff}
.sprow{display:grid;grid-template-columns:118px minmax(0,1fr) 44px;align-items:center;gap:8px;margin:6px 0;font-size:13px;font-weight:700}
.sprow input{width:100%;accent-color:var(--amber,#ffb340)}
.sprow output{text-align:right;font-variant-numeric:tabular-nums;color:#ffcf5a;font-size:12.5px}
.spmeter{height:5px;margin:2px 0 10px 126px;background:#000;border-radius:3px;overflow:hidden}
.spmeter i{display:block;height:100%;width:0;background:linear-gradient(90deg,#4fe3d1,#ffb340 70%,#ff4f8b);transition:width .08s linear}
.spfoot{display:flex;align-items:center;gap:10px}
.spfoot .note{flex:1;font-size:11.5px;line-height:1.35}
#soundBtn[aria-expanded="true"]{border-color:var(--amber,#ffb340);color:#ffcf5a}
@media (max-width:640px){
  .soundpanel{position:fixed;left:12px;right:12px;bottom:12px;width:auto;z-index:90}
  .sprow{grid-template-columns:104px minmax(0,1fr) 42px}
  .spmeter{margin-left:112px}
}