/* Layout: dive bar at night. Lobby = row of bar doors on a brick wall. Room = stage + crowd on the left, narrow chalkboard sign-up sheet and song binder on the right. */
:root{
  --brick:#3b1d16; --mortar:#1b0d0a; --wood:#3a2416; --wood2:#2a1a10; --panel:#1a1311;
  --fg:#f4e9dc; --dim:#b9a28f; --neon:#ff4f8b; --amber:#ffb340; --beer:#ffcf5a; --teal:#4fe3d1;
  --chalk:#e9eee6; --board:#1f2a25; --paper:#efe2c4; --ink:#2b1d14; --tape:#e8d9a8;
  --neonface:"Yellowtail", "Brush Script MT", cursive;
  --hand:"Permanent Marker", "Comic Sans MS", cursive;
  --body:"Figtree", system-ui, -apple-system, sans-serif;
  --lyric:"VT323", ui-monospace, "Courier New", monospace;
  color-scheme:dark;
}
html,body{height:100%}
body{color:var(--fg);font-family:var(--body);font-size:15px;box-sizing:border-box;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:10px;
  background-color:var(--brick);
  background-image:
    radial-gradient(ellipse 70% 45% at 50% -5%, rgba(255,79,139,.22), transparent 70%),
    radial-gradient(ellipse 60% 50% at 100% 100%, rgba(255,179,64,.10), transparent 70%),
    linear-gradient(rgba(10,4,3,.55), rgba(10,4,3,.78)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='32'%3E%3Crect width='64' height='32' fill='%233b1d16'/%3E%3Crect x='2' y='2' width='29' height='13' fill='%23452219'/%3E%3Crect x='34' y='18' width='29' height='13' fill='%23331912'/%3E%3Cpath d='M0 1H64M0 17H64M1 0V16M33 16V32' stroke='%231b0d0a' stroke-width='2'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
button{font:inherit;color:inherit;cursor:pointer}
button:disabled{cursor:not-allowed}
button:focus-visible{outline:2px solid var(--beer);outline-offset:2px}
.app{max-width:1360px;margin:0 auto;height:100%;display:flex;flex-direction:column;gap:10px}
header.top{position:relative;z-index:3;display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.logo{font-family:var(--neonface);font-weight:400;font-size:clamp(30px,4.6vw,46px);margin:0;line-height:1;color:#ffe3ee;
  text-shadow:0 0 4px #fff,0 0 10px var(--neon),0 0 22px var(--neon),0 0 40px var(--neon);animation:flicker 7s infinite}
.logo span{color:#fff3d6;text-shadow:0 0 4px #fff,0 0 10px var(--amber),0 0 22px var(--amber),0 0 40px var(--amber);animation:flicker2 5s infinite}
@keyframes flicker{0%,18%,22%,62%,64%,100%{opacity:1}20%,63%{opacity:.55}}
@keyframes flicker2{0%,40%,44%,100%{opacity:1}42%{opacity:.4}}
.tag{font-family:var(--hand);color:var(--dim);font-size:14px}
.btn{background:#2b201b;border:1px solid #5a4335;border-radius:6px;padding:8px 14px;font-weight:700;box-shadow:inset 0 -2px 0 rgba(0,0,0,.4)}
.btn:hover:not(:disabled){border-color:var(--amber)}
.btn.hot{background:var(--neon);border-color:#ff8db3;color:#2a0012;box-shadow:0 0 14px rgba(255,79,139,.45),inset 0 -2px 0 rgba(0,0,0,.25)}
.btn.sm{padding:4px 9px;font-size:13px}
.note{font-size:12.5px;color:var(--dim)}

/* ---------- LOBBY ---------- */
#lobby{flex:1;overflow:auto;min-height:0}
.lobby-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:8px 0 18px}
.lobby-head>div{display:flex;flex-direction:column;gap:4px}
.makebtn{font-size:15px;padding:10px 16px}
.maker{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:20px;align-items:start;background:rgba(12,7,5,.85);border:2px dashed #5a4335;border-radius:10px;padding:16px;margin-bottom:22px}
.maker-fields{display:flex;flex-direction:column;gap:6px;min-width:0}
.maker h3{font-family:var(--hand);font-weight:400;font-size:22px;margin:0 0 4px}
.maker label,.mklbl{font-size:12.5px;color:var(--dim);font-weight:600}
.mklbl{margin-top:4px}
.themechip{display:flex;align-items:center;gap:8px;text-align:left;background:#1d1513;border:1px solid #4a372c;border-radius:8px;padding:7px 9px;color:var(--fg)}
.themechip .te{font-size:20px;line-height:1}
.themechip b{display:block;font-size:13px}
.themechip small{display:block;font-size:11.5px;color:var(--dim)}
.themechip[aria-pressed="true"]{border-color:var(--neon);background:#2a1420;box-shadow:0 0 0 1px var(--neon)}
.nothemechip{max-width:420px;padding:9px 11px}
.orpick{font-size:12px;color:var(--dim);display:flex;align-items:center;gap:8px;max-width:420px}
.orpick::before,.orpick::after{content:"";flex:1;height:1px;background:#4a372c}
.themegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;max-width:640px}
.themegrid .themechip{padding:6px 8px}
.themetag{align-self:center;margin:-4px 0 -2px;font-size:11.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;background:#fff3d6;color:#2b1d14;padding:2px 9px;border-radius:999px;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.themepill{font-size:12px;font-weight:800;background:#2a1420;border:1px solid var(--neon);color:#ffd6e4;padding:2px 10px;border-radius:999px}
.maker input{background:#1d1513;border:1px solid #4a372c;border-radius:6px;color:var(--fg);padding:9px 10px;font:inherit;max-width:420px}
.maker input:focus{outline:2px solid var(--amber);outline-offset:0}
.lookrow{display:flex;align-items:center;justify-content:center;gap:8px}
.lookrow span{flex:1;min-width:0;text-align:center;font-weight:700;color:var(--beer)}
.makeacts{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.headacts{display:flex;gap:8px;flex-wrap:wrap}
.joinrow{display:flex;gap:6px;margin-top:8px;max-width:420px}
.joinrow input{flex:1;min-width:0;background:#1d1513;border:1px solid #4a372c;border-radius:6px;color:var(--fg);padding:8px 10px;font:inherit;font-size:13.5px}
.joinrow input:focus{outline:2px solid var(--amber);outline-offset:0}
.maker-side{display:flex;flex-direction:column;gap:8px}
.maker-preview{pointer-events:none}
.maker-preview .arrow{animation:none}
.maker-preview .board-sign{display:none}
.newtag{position:absolute;top:-10px;right:-6px;z-index:3;background:var(--beer);color:#241a00;font-weight:800;font-size:11px;letter-spacing:.06em;padding:3px 8px;border-radius:4px;transform:rotate(6deg);box-shadow:0 2px 6px rgba(0,0,0,.5)}
.newtag.lock{right:auto;left:-6px;transform:rotate(-5deg);background:#2b201b;color:var(--fg);border:1px solid #5a4335}
.front.flash{animation:flash 1.2s ease-out 2}
@keyframes flash{0%{filter:drop-shadow(0 0 0 var(--h))}50%{filter:drop-shadow(0 0 22px var(--h))}}
@media (max-width:640px){.maker{grid-template-columns:1fr}.maker-side{max-width:280px}}
.lobby-head h2{font-family:var(--hand);font-weight:400;font-size:clamp(22px,3.6vw,32px);margin:0;transform:rotate(-1deg);text-wrap:balance}
.bars{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:22px 18px;align-items:end}
/* each bar is a little storefront: roof, neon sign, awning, windows, door, sidewalk sandwich board */
.front{position:relative;display:flex;flex-direction:column;filter:drop-shadow(0 10px 14px rgba(0,0,0,.55));transition:transform .15s}
.front:hover{transform:translateY(-3px)}
.roof{height:26px;background:var(--trim);margin:0 -6px}
.roof.flat{height:14px;box-shadow:inset 0 -4px 0 rgba(0,0,0,.35)}
.roof.peak{height:40px;clip-path:polygon(0 100%,50% 0,100% 100%)}
.roof.arch{height:34px;border-radius:50% 50% 0 0/100% 100% 0 0;margin:0}
.roof.step{height:30px;clip-path:polygon(0 100%,0 55%,22% 55%,22% 20%,40% 20%,40% 0,60% 0,60% 20%,78% 20%,78% 55%,100% 55%,100% 100%)}
.roof.cabin{height:30px;clip-path:polygon(0 100%,14% 0,86% 0,100% 100%);margin:0 -10px}
.roof.slant{height:30px;clip-path:polygon(0 100%,0 60%,100% 0,100% 100%)}
.roof.castle{height:22px;margin:0;clip-path:polygon(0 100%,0 0,12% 0,12% 45%,24% 45%,24% 0,38% 0,38% 45%,50% 45%,50% 0,62% 0,62% 45%,76% 45%,76% 0,88% 0,88% 45%,100% 45%,100% 100%)}
.roof.thatch{height:44px;margin:0 -14px;clip-path:polygon(0 100%,50% 0,100% 100%);background:repeating-linear-gradient(100deg,#c9a24a 0 4px,#9c7a2c 4px 6px,#b48d3a 6px 9px)}
.roof.saw{height:24px;margin:0;clip-path:polygon(0 100%,0 0,25% 100%,25% 0,50% 100%,50% 0,75% 100%,75% 0,100% 100%)}
.roof.cornice{height:20px;margin:0 -8px;box-shadow:inset 0 -6px 0 rgba(255,255,255,.12),inset 0 6px 0 rgba(0,0,0,.3)}
.front .sign.marquee{background:#140a06;border:0;outline:6px dotted #ffe7a6;outline-offset:-3px;padding:10px 10px 12px;box-shadow:0 0 14px rgba(255,220,140,.35)}
.front .sign.gold{font-family:var(--hand);font-size:22px;color:#ffe08a;text-shadow:0 1px 0 #6b4a00,0 0 8px rgba(255,200,80,.4);background:#123a24;border:3px solid #c9a24a}
.win.tall{flex:none;width:44px;height:84px}
.doorbtn.double{width:84px;background:linear-gradient(90deg,transparent 0 49%,#0d0705 49% 51%,transparent 51%),var(--door,#2a1a10)}
.doorbtn.double::before{left:8px;right:8px}
.doorbtn.painted{background:var(--door)}
.facade{background:var(--wall);padding:12px 12px 0;display:flex;flex-direction:column;gap:10px;box-shadow:inset 0 0 30px rgba(0,0,0,.45)}
.front .sign{font-family:var(--neonface);font-size:30px;line-height:1.05;text-align:center;color:#fff;text-wrap:balance;
  background:rgba(8,4,3,.82);border:2px solid #120a07;border-radius:6px;padding:6px 8px 8px;text-shadow:0 0 4px #fff,0 0 10px var(--h),0 0 24px var(--h)}
.awning{position:relative;height:22px;margin:0 -16px;background:var(--awn);box-shadow:inset 0 -6px 8px rgba(0,0,0,.25)}
.awning::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:8px;background:radial-gradient(circle at 9px 0,var(--awn1) 8px,transparent 8.5px) 0 0/18px 8px repeat-x}
.shop{display:flex;align-items:flex-end;gap:10px;padding-top:12px}
.shop.left{flex-direction:row-reverse}
.win{flex:1;height:64px;border:4px solid var(--trim);border-radius:3px;background-color:#e8953a;box-shadow:inset 0 0 18px rgba(255,220,150,.7),0 0 16px rgba(255,170,70,.35)}
.win.round{flex:none;width:56px;height:56px;border-radius:50%;align-self:center;margin-bottom:14px}
.doorbtn{flex:none;width:62px;height:96px;border:4px solid var(--trim);border-bottom:0;border-radius:4px 4px 0 0;background:linear-gradient(#2a1a10,#1a0f09);
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:0 0 10px;color:var(--fg)}
.doorbtn.archd{border-radius:31px 31px 0 0}
.doorbtn::before{content:"";position:absolute;top:10px;left:12px;right:12px;height:28px;border-radius:3px;background:#f0a64a;box-shadow:inset 0 0 8px rgba(255,230,170,.8)}
.doorbtn.archd::before{border-radius:16px 16px 3px 3px}
.doorbtn.saloon{background:linear-gradient(90deg,transparent 0 48%,#120a07 48% 52%,transparent 52%),repeating-linear-gradient(transparent 0 7px,rgba(0,0,0,.35) 7px 8px),#7a4b25}
.doorbtn.saloon::before{display:none}
.doorbtn .knob{position:absolute;right:8px;top:54px;width:6px;height:6px;border-radius:50%;background:var(--beer)}
.doorbtn .plate{position:relative;z-index:1;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;background:var(--neon);color:#2a0012;padding:3px 6px;border-radius:3px;box-shadow:0 0 10px rgba(255,79,139,.6)}
.doorbtn:hover:not(:disabled) .plate{background:#fff}
.doorbtn:disabled .plate{background:#555;color:#ddd;box-shadow:none}
.arrow{position:absolute;bottom:104px;left:50%;transform:translateX(-50%);font-family:var(--neonface);font-size:24px;line-height:1;color:#fff;white-space:nowrap;text-shadow:0 0 4px #fff,0 0 10px var(--neon),0 0 20px var(--neon);animation:bob 1.1s ease-in-out infinite;pointer-events:none}
.arrow::after{content:"";display:block;width:0;height:0;margin:2px auto 0;border:8px solid transparent;border-top-color:var(--neon);filter:drop-shadow(0 0 6px var(--neon))}
@keyframes bob{50%{transform:translate(-50%,5px)}}
.doorwrap{position:relative;flex:none}
.walkbtn{width:100%;margin-top:4px;font-size:15px;padding:10px}
.front{cursor:pointer}
.front.full{cursor:default}
.walk{background:linear-gradient(#58504a,#3c3632);height:12px;margin:0 -10px;border-top:3px solid #6e655e}
.board-sign{margin:10px 6px 0;background:#1d2723;border:5px solid #5a3b24;border-radius:4px;padding:9px 10px;display:flex;flex-direction:column;gap:6px;box-shadow:0 6px 10px rgba(0,0,0,.4)}
.board-sign .vibe{font-family:var(--hand);font-size:14px;color:var(--chalk);line-height:1.3;min-height:2.6em}
.board-sign .now{font-size:12.5px;color:#a9b8ae}
.board-sign .now b{color:var(--beer)}
.cap{display:flex;justify-content:space-between;font-size:12px;font-variant-numeric:tabular-nums;color:#a9b8ae}
.cap b{color:var(--chalk)}
.meter{height:5px;background:rgba(0,0,0,.5);border-radius:3px;overflow:hidden;margin-top:4px}
.meter i{display:block;height:100%;background:var(--h);box-shadow:0 0 6px var(--h)}
.front.full .facade,.front.full .roof,.front.full .awning{filter:saturate(.35) brightness(.7)}
.front.full .sign{text-shadow:none;color:#8a7a70}

/* ---------- ROOM ---------- */
#room{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:10px}
.main{display:flex;flex-direction:column;gap:8px;min-height:0;min-width:0}
.roombar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.roombar h2{font-family:var(--neonface);font-weight:400;font-size:30px;margin:0;line-height:1;color:#fff;text-shadow:0 0 4px #fff,0 0 10px var(--h),0 0 22px var(--h)}
.kj{font-family:var(--hand);font-size:13px;color:var(--ink);background:var(--tape);padding:2px 10px;transform:rotate(2deg);box-shadow:0 2px 4px rgba(0,0,0,.4)}
.spacer{flex:1}

.stagebox{position:relative;flex:1;min-height:240px;display:flex;flex-direction:column;border-radius:8px;overflow:hidden;
  background:#0d0807;border:3px solid #1a0f09;box-shadow:0 10px 30px rgba(0,0,0,.6)}
.tv{position:absolute;right:16px;top:26px;z-index:3;width:min(32%,210px);aspect-ratio:4/3;background:linear-gradient(#5a3a22,#3a2414);border:3px solid #1a0f09;border-radius:12px;padding:9px 9px 16px;box-shadow:0 8px 20px rgba(0,0,0,.7)}
.tv::before,.tv::after{content:"";position:absolute;top:-22px;width:2px;height:24px;background:#888}
.tv::before{left:38%;transform:rotate(-24deg)}.tv::after{right:38%;transform:rotate(24deg)}
.tv .screen{height:100%;border-radius:16px/22px;overflow:hidden;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center;padding:6px;
  background:repeating-linear-gradient(transparent 0 2px,rgba(0,0,0,.25) 2px 3px),radial-gradient(circle,#1d3a5a,#06101c);box-shadow:inset 0 0 18px rgba(0,0,0,.9)}
.tv .screen span{font-size:10px;font-weight:800;background:#d22;color:#fff;padding:1px 5px;border-radius:3px}
.tv .screen b{font-family:var(--lyric);font-weight:400;font-size:16px;color:#cfe8ff;line-height:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.tv .screen span.ch{background:#2a4a6a}
.tv .screen i{font-size:10px;color:#8fb0cc;font-style:normal}
.tv .knobs{position:absolute;bottom:3px;right:12px;display:flex;gap:4px}
.tv .knobs u{width:7px;height:7px;border-radius:50%;background:#c9a24a;display:block}
.curtain{height:16px;flex:none;background:repeating-linear-gradient(90deg,#7a1020 0 14px,#5a0a18 14px 22px,#8e1426 22px 30px);box-shadow:0 4px 10px rgba(0,0,0,.7);position:relative;z-index:2}
.stage{flex:1;min-height:0;display:grid;gap:8px;padding:8px;grid-template-columns:1fr}
.stage.duet{grid-template-columns:1fr 1fr}
.tile{position:relative;border-radius:6px;overflow:hidden;min-height:0;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 30%,hsl(var(--hue) 45% 30%),hsl(var(--hue) 35% 9%) 75%)}
.tile .face{width:34%;max-width:130px;aspect-ratio:1;border-radius:50%;background:hsl(var(--hue) 55% 68%);color:hsl(var(--hue) 50% 14%);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:clamp(16px,3vw,40px);box-shadow:0 6px 18px rgba(0,0,0,.5)}
.tape{position:absolute;left:8px;top:8px;font-family:var(--body);font-weight:700;letter-spacing:.02em;font-size:12.5px;color:var(--ink);background:var(--tape);padding:1px 9px;transform:rotate(-2deg);box-shadow:0 1px 3px rgba(0,0,0,.4);opacity:.95}
.stage .tile::before{content:"";position:absolute;inset:0;background:conic-gradient(from 168deg at 50% -10%,transparent 0deg,rgba(255,240,210,.16) 12deg,rgba(255,240,210,.16) 24deg,transparent 36deg);pointer-events:none}
.stage .tile .face{animation:sing .55s ease-in-out infinite alternate}
.stage.paused .tile .face{animation:none}
@keyframes sing{to{transform:scale(1.06) translateY(-2px)}}
.onmic{position:absolute;right:8px;top:8px;font-family:var(--neonface);font-size:22px;line-height:1;color:#fff;text-shadow:0 0 4px #fff,0 0 10px #ff2a2a,0 0 20px #ff2a2a}
.stage.paused .onmic{opacity:.45;text-shadow:none}
.empty-stage{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:20px;color:var(--dim)}
.empty-stage b{font-family:var(--neonface);font-weight:400;font-size:40px;color:#fff;text-shadow:0 0 4px #fff,0 0 12px var(--amber),0 0 26px var(--amber)}

/* lyrics: old karaoke TV */
.lyrics{position:absolute;left:0;right:0;bottom:0;padding:40px 10px 12px;background:linear-gradient(transparent,rgba(4,2,10,.9) 42%);text-align:center}
.lwrap{position:relative;display:inline-block;max-width:100%}
.lline{position:relative;display:inline-block;font-family:var(--lyric);line-height:1;white-space:nowrap}
.syl{color:#fff;opacity:.6;text-shadow:2px 2px 0 #000}
.syl.done{color:var(--beer);opacity:1}
.syl.cur{color:var(--beer);opacity:1;text-shadow:2px 2px 0 #000,0 0 12px rgba(255,207,90,.8)}
.lline.offpart .syl{opacity:.28}
.lline.offpart .syl.done,.lline.offpart .syl.cur{color:var(--teal);opacity:.65;text-shadow:2px 2px 0 #000}
.ball{position:absolute;top:-16px;left:0;width:14px;height:14px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 35% 35%,#fff,var(--neon) 55%,#9b0d44);box-shadow:0 0 10px var(--neon);transform:translate(-50%,0)}
.lnext{font-family:var(--lyric);font-size:clamp(15px,1.8vw,22px);color:var(--dim);margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ytbox{display:inline-flex;flex-direction:column;align-items:center;gap:4px;background:rgba(0,0,0,.6);border:1px dashed rgba(255,255,255,.3);border-radius:8px;padding:10px 16px;max-width:100%}
.ytbox b{font-family:var(--lyric);font-size:clamp(20px,2.6vw,32px);color:var(--beer);font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.ytbox span{font-size:12.5px;color:var(--dim)}
.yt{font-size:9.5px;font-weight:700;background:#d22;color:#fff;padding:0 4px;border-radius:3px;margin-left:4px;vertical-align:2px;font-family:var(--body)}
.count{font-family:var(--neonface);font-size:34px;line-height:1;color:#fff;text-shadow:0 0 10px var(--amber);margin-bottom:6px}
.part{font-family:var(--hand);font-size:12px;color:var(--teal);margin-bottom:4px}

.transport{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 12px;border-radius:8px;
  background:repeating-linear-gradient(45deg,#1d1614 0 3px,#221a17 3px 6px);border:2px solid #0e0907;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.transport .song{flex:1;min-width:150px}
.transport .song b{display:block;font-size:15px}
.prog{height:4px;background:#000;border-radius:2px;margin-top:5px;overflow:hidden}
.prog i{display:block;height:100%;width:0;background:var(--amber);box-shadow:0 0 6px var(--amber)}
.guide{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--dim);cursor:pointer}
.guide input{accent-color:var(--neon)}

.crowdhead{display:flex;justify-content:space-between;align-items:baseline}
.crowdlabel{font-family:var(--hand);font-size:14px;color:var(--dim)}
.audience{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:6px;max-height:28%;overflow:auto;flex:none}
.audience .tile{aspect-ratio:4/3;filter:brightness(.82)}
.audience .tile .face{width:42%;font-size:14px}
.audience .tape{font-size:11px;top:auto;bottom:4px;left:4px}
.audience .you{outline:2px solid var(--teal);outline-offset:-2px;filter:none}

/* chalkboard rail */
.rail{display:flex;flex-direction:column;gap:10px;min-height:0}
.board{flex:1;min-height:0;display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:6px;
  background:radial-gradient(ellipse at 30% 20%,rgba(255,255,255,.06),transparent 60%),radial-gradient(ellipse at 80% 90%,rgba(255,255,255,.04),transparent 55%),var(--board);
  border:8px solid #4a2f1d;box-shadow:inset 0 0 20px rgba(0,0,0,.6),0 8px 20px rgba(0,0,0,.5)}
.board h3{font-family:var(--hand);font-weight:400;font-size:18px;margin:0;color:var(--chalk);transform:rotate(-1.5deg)}
.qlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;overflow:auto;min-height:0}
.q{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:6px;align-items:center;padding:5px 2px;border-bottom:1px dashed rgba(233,238,230,.18);font-family:var(--hand);color:var(--chalk)}
.q .n{font-size:14px;opacity:.7}
.q .t{font-family:var(--body);font-weight:700;font-size:13.5px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.q .s{font-family:var(--body);font-size:11.5px;color:#a9b8ae;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.q .acts{display:flex;gap:2px}
.q .acts button{background:transparent;border:1px solid rgba(233,238,230,.25);border-radius:4px;width:22px;height:22px;font-size:10px;color:var(--chalk);padding:0}
.q .acts button:disabled{opacity:.25}
.duo{font-family:var(--body);font-size:9.5px;font-weight:700;background:var(--teal);color:#032;padding:0 4px;border-radius:3px;margin-left:4px;vertical-align:2px}
.tabbox{flex:1.35;min-height:0;display:flex;flex-direction:column}
.tabs{display:flex;gap:4px}
.tabs button{flex:1;background:#241a16;border:1px solid #4a372c;border-bottom:0;border-radius:6px 6px 0 0;padding:6px 4px;font-size:12.5px;font-weight:700;color:var(--dim)}
.tabs button[aria-selected="true"]{background:#120c0a;color:var(--fg);border-color:var(--amber)}
.chat{flex:1;min-height:0;display:flex;flex-direction:column;background:#120c0a;border:1px solid #4a372c;border-radius:0 0 6px 6px;box-shadow:0 8px 20px rgba(0,0,0,.5)}
.msgs{list-style:none;margin:0;padding:8px 10px;flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:6px;font-size:13px;line-height:1.35}
.msgs li{overflow-wrap:anywhere}
.msgs .who{font-weight:700;margin-right:5px}
.msgs .bot{background:#1f1714;border-left:3px solid var(--amber);padding:5px 8px;border-radius:0 4px 4px 0;color:#e7d8c6}
.msgs .bot .who{color:var(--amber)}
.msgs code{font-family:var(--lyric);font-size:15px;color:var(--beer)}
.say{display:flex;gap:6px;padding:8px;border-top:1px solid #3a2b23}
.say input{flex:1;min-width:0;background:#1d1513;border:1px solid #4a372c;border-radius:6px;color:var(--fg);padding:7px 9px;font:inherit;font-size:13px}
.say input:focus{outline:2px solid var(--amber);outline-offset:0}
.binder{flex:1;min-height:0;display:flex;flex-direction:column;gap:6px;padding:10px 12px;border-radius:4px;color:var(--ink);
  background:repeating-linear-gradient(transparent 0 23px,rgba(43,29,20,.12) 23px 24px),var(--paper);box-shadow:0 8px 20px rgba(0,0,0,.5)}
.lib{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;overflow:auto;min-height:0}
.lib li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 6px;align-items:center;padding:6px 0;border-bottom:1px solid rgba(43,29,20,.15)}
.lib .t{font-weight:700;font-size:13.5px;line-height:1.2}
.lib .s{font-size:11.5px;color:#6b5646}
.lib .add{display:flex;gap:4px}
.lib .add button{background:var(--ink);color:var(--paper);border:0;border-radius:4px;font-size:11.5px;font-weight:700;padding:4px 7px}
.lib .add button.d{background:#0f5e57}
.fine{font-size:11px;color:#6b5646;line-height:1.35}

[hidden]{display:none!important}
/* home bar scene */
#home{--ctr:clamp(84px,15vh,140px);position:relative;padding-bottom:calc(var(--ctr) + 8px)!important}
.hero,.nametag{position:relative;z-index:2}
.barscene{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.barscene::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,5,3,.82) 0%,rgba(12,5,3,.5) 38%,rgba(12,5,3,.12) 62%,rgba(12,5,3,.35) 100%),linear-gradient(rgba(12,5,3,.55),transparent 30%)}
.backbar{position:absolute;left:0;bottom:calc(var(--ctr) - 10px);width:100%;height:78%;opacity:.5;filter:blur(1.6px)}
.bartender{position:absolute;left:58%;bottom:calc(var(--ctr) - 46px);transform:translateX(-50%);height:min(64vh,540px);width:auto;filter:brightness(.72) saturate(.9) blur(.35px);opacity:.95}
.counter{position:absolute;left:0;right:0;bottom:0;height:var(--ctr);z-index:1;
  background:linear-gradient(#a06a3a 0 3px,#7a4a26 3px 14px,#3a210f 14px 18px,transparent 18px),repeating-linear-gradient(90deg,#4a2a14 0 90px,#43260f 90px 92px,#52301a 92px 180px),#4a2a14;
  box-shadow:0 -10px 30px rgba(0,0,0,.6)}
.counter::after{content:"";position:absolute;left:0;right:0;bottom:22%;height:5px;background:linear-gradient(#e0c070,#9a7a30);opacity:.55}
.pint{position:absolute;z-index:1;left:44%;bottom:calc(var(--ctr) - 12px);height:clamp(48px,8vh,74px);filter:brightness(.8)}
@media (max-width:820px){
  .bartender{left:50%;height:46vh;opacity:.4}
  .backbar{opacity:.3}
  .pint{display:none}
  .barscene::after{background:rgba(12,5,3,.55)}
}
/* home */
.topright{display:flex;align-items:center;gap:10px}
.privlink{background:none;border:0;padding:4px 2px;font-size:13px;font-weight:600;color:var(--dim);text-decoration:underline;text-underline-offset:3px}
.privlink:hover{color:var(--fg)}
.mechip{background:#2b201b;border:1px solid #5a4335;border-radius:999px;padding:5px 12px 5px 8px;font-weight:700;font-size:13.5px;display:flex;align-items:center;gap:6px}
.mechip:hover{border-color:var(--amber)}
#home{flex:1;min-height:0;overflow:auto;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,360px);gap:clamp(20px,4vw,56px);align-items:center;padding-block:12px 24px}
.hero{display:flex;flex-direction:column;gap:18px;min-width:0}
.bigneon{font-family:var(--neonface);font-weight:400;font-size:clamp(40px,6.4vw,76px);line-height:1;margin:0;color:#fff;text-wrap:balance;text-shadow:0 0 4px #fff,0 0 12px var(--amber),0 0 30px rgba(255,179,64,.6)}
.pitch{font-size:17px;line-height:1.55;color:#e4d6c6;max-width:52ch;margin:0}
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;max-width:52ch}
.steps li{display:flex;gap:12px;align-items:flex-start}
.steps .num{flex:none;width:32px;height:32px;border-radius:50%;border:2px solid var(--chalk);font-family:var(--hand);display:flex;align-items:center;justify-content:center;color:var(--chalk);background:var(--board)}
.steps b{display:block;font-size:15.5px}
.steps span{color:var(--dim);font-size:14px;line-height:1.45}
.steps code,.steps span code{font-family:var(--lyric);font-size:17px;color:var(--beer)}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chips li{font-size:12.5px;font-weight:700;padding:5px 10px;border-radius:999px;border:1px solid #5a4335;background:rgba(0,0,0,.35);color:#e4d6c6}
.nametag{background:#c8162f;border-radius:16px;padding:0 0 18px;box-shadow:0 18px 40px rgba(0,0,0,.6),inset 0 0 0 3px rgba(0,0,0,.15);transform:rotate(-1.5deg);display:flex;flex-direction:column}
.hello{text-align:center;color:#fff;padding:14px 10px 10px;display:flex;flex-direction:column;line-height:1}
.hello .h1{font-weight:800;font-size:40px;letter-spacing:.1em}
.hello .h2{font-size:15px;font-weight:600;margin-top:4px}
.tagbody{background:#fff;margin:0 14px;border-radius:6px;display:flex;align-items:center;gap:10px;padding:16px 14px}
#pvEmoji{font-size:40px;line-height:1}
.tagbody input{flex:1;min-width:0;border:0;background:transparent;font-family:var(--hand);font-size:32px;color:#16110e;padding:0}
.tagbody input::placeholder{color:#b8aaa0}
.tagbody input:focus{outline:2px dashed #c8162f;outline-offset:4px}
.tagextras{display:flex;flex-direction:column;gap:8px;padding:16px 18px 0}
.lbl{font-size:12.5px;font-weight:700;color:#ffe3e7;letter-spacing:.02em}
.emojis{display:grid;grid-template-columns:repeat(8,1fr);gap:4px}
.emojis button{aspect-ratio:1;border-radius:8px;border:0;background:rgba(0,0,0,.18);font-size:20px;padding:0}
.emojis button[aria-pressed="true"]{background:#fff;box-shadow:0 0 0 2px #2a0008}
#pSig{border:0;border-radius:6px;padding:9px 10px;font:inherit;background:#fff3f4;color:#16110e}
#pSig:focus{outline:2px solid #fff;outline-offset:1px}
.bigbtn{margin-top:6px;font-size:16px;padding:12px;background:#16110e;border-color:#16110e;color:#fff;box-shadow:none}
.bigbtn:hover:not(:disabled){border-color:#fff}
@media (max-width:820px){#home{grid-template-columns:1fr}.nametag{max-width:400px}}
/* emoji faces */
.tile .face.emo{background:hsl(var(--hue) 45% 22%);font-size:clamp(26px,5vw,64px);border:3px solid hsl(var(--hue) 55% 55%)}
.audience .tile .face.emo{font-size:clamp(18px,2.2vw,26px);border-width:2px}
.tile[data-pi]{cursor:pointer}
.tile[data-pi]:hover .face{box-shadow:0 0 0 3px var(--amber)}
.tape .drk{margin-left:4px;letter-spacing:-.1em}
/* reactions + applause */
.reactbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.reactbar .re{width:38px;height:38px;border-radius:50%;background:#2b201b;border:1px solid #5a4335;font-size:19px;padding:0;transition:transform .1s}
.reactbar .re:hover{border-color:var(--amber)}
.reactbar .re:active{transform:scale(.85)}
.ameter{flex:1;min-width:120px;display:flex;align-items:center;gap:8px;font-family:var(--hand);font-size:13px;color:var(--dim)}
.abar{flex:1;height:10px;background:#000;border-radius:5px;overflow:hidden;border:1px solid #3a2b23}
.abar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--teal),var(--beer) 60%,var(--neon));transition:width .2s}
.floaty{position:absolute;bottom:70px;z-index:4;font-size:32px;pointer-events:none;animation:floatup 2.4s ease-out forwards}
@keyframes floatup{0%{transform:translate(0,0) scale(.5);opacity:0}12%{opacity:1;transform:translate(0,-20px) scale(1.15)}100%{transform:translate(var(--dx),-240px) scale(.9);opacity:0}}
.verdict{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:rgba(8,3,3,.72);text-align:center;padding:16px;animation:pop .35s ease-out}
.verdict b{font-family:var(--neonface);font-weight:400;font-size:clamp(32px,5vw,56px);color:#fff;line-height:1;text-shadow:0 0 6px #fff,0 0 16px var(--neon),0 0 32px var(--neon)}
.verdict .score{font-family:var(--lyric);font-size:clamp(56px,9vw,104px);line-height:.9;color:var(--beer);text-shadow:0 0 18px rgba(255,207,90,.6)}
.verdict .score small{font-size:.4em;color:var(--dim)}
.verdict span{color:#e4d6c6;font-size:14px}
@keyframes pop{from{transform:scale(.9);opacity:0}}
.upnext{position:absolute;top:28px;left:50%;transform:translateX(-50%);z-index:5;background:var(--neon);color:#2a0012;font-weight:800;padding:10px 18px;border-radius:999px;box-shadow:0 0 24px rgba(255,79,139,.7);white-space:nowrap;max-width:calc(100% - 32px);overflow:hidden;text-overflow:ellipsis;animation:pulse 1s ease-in-out infinite alternate}
@keyframes pulse{to{box-shadow:0 0 40px rgba(255,79,139,1)}}
.q.me{background:rgba(255,79,139,.12);border-radius:4px}
.q .nextup{font-family:var(--body);font-size:9.5px;font-weight:800;background:var(--neon);color:#2a0012;padding:0 4px;border-radius:3px;margin-left:4px;vertical-align:2px}
/* mic + camera */
.ctl{background:#2b201b;border:1px solid #5a4335;border-radius:999px;padding:6px 12px;font-size:13px;font-weight:700}
.ctl[aria-pressed="false"]{background:#5a1220;border-color:#ff5a6e;color:#ffd6db}
.ctl:hover{border-color:var(--amber)}
.tile .muted{position:absolute;right:6px;bottom:6px;font-size:13px;background:rgba(0,0,0,.65);border-radius:50%;width:24px;height:24px;display:flex;align-items:center;justify-content:center;z-index:2}
.stage .tile .muted{bottom:auto;top:40px;right:8px}
.tile.camoff{background:#141010}
.tile.camoff .face{filter:grayscale(1) brightness(.6)}
.tile.camoff::after{content:"camera off";position:absolute;left:50%;top:calc(50% + 22%);transform:translateX(-50%);font-size:11px;color:#8a7a70;white-space:nowrap}
.audience .tile.camoff::after{top:auto;bottom:22px;font-size:9.5px}
.stage .tile.camoff::after{top:12px;left:auto;right:96px;transform:none}
.miccard{width:min(400px,100%);background:#1a1311;border:1px solid #5a4335;border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:12px;box-shadow:0 20px 50px rgba(0,0,0,.7)}
.miccard 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(--neon),0 0 24px var(--neon)}
.mcsub{margin:0;color:var(--dim);font-size:14px}
.mcpreview{position:relative;aspect-ratio:16/10;border-radius:8px;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 30%,hsl(190 45% 30%),hsl(190 35% 9%) 75%);--hue:190;overflow:hidden}
.mcpreview .face{width:30%;aspect-ratio:1;border-radius:50%;display:flex;align-items:center;justify-content:center;background:hsl(190 45% 22%);border:3px solid hsl(190 55% 55%);font-size:48px}
.mcpreview.off{background:#141010}
.mcpreview.off .face{filter:grayscale(1) brightness(.6)}
.mccam{position:absolute;bottom:10px;font-size:12px;color:#8a7a70}
.mcpreview:not(.off) .mccam{display:none}
.mclevel{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--dim)}
.mclevel .abar i{transition:width .08s}
.mctoggles{display:flex;gap:8px}
.mcnote{margin:0;font-size:12px;color:var(--dim)}
.miccard .ruleacts .btn:not(.hot){color:var(--fg)}
.hostbox{border-top:1px dashed #b9a27f;border-bottom:1px dashed #b9a27f;padding:10px 0;display:flex;flex-direction:column;gap:6px}
.hostbtns{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.hostbtns button{border:1px solid #b9a27f;background:#fff8e8;border-radius:6px;padding:6px 9px;font-size:12.5px;font-weight:700;color:var(--ink)}
.hostbtns button:hover{border-color:#b3242e}
.hostbtns button.danger{color:#9a1020;border-color:#d58a8a}
.kickconfirm{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center;font-size:13px;font-weight:700}
.kickconfirm .btn:not(.hot){color:var(--fg)}
/* privacy note */
.privlink.inline{display:inline;padding:0;font-size:inherit;color:var(--beer)}
.privcard{width:min(560px,100%);max-height:100%;overflow:auto;background:var(--paper);color:var(--ink);border-radius:6px;padding:22px 24px;box-shadow:0 20px 50px rgba(0,0,0,.7);display:flex;flex-direction:column;gap:6px;line-height:1.5;font-size:14.5px}
.privcard h3{font-family:var(--hand);font-weight:400;font-size:30px;margin:0}
.privcard h4{margin:10px 0 0;font-size:14.5px}
.privcard p{margin:0;max-width:62ch}
.pdate{font-size:12.5px;color:#6b5646}
.pmail{font-weight:700;user-select:all}
.pnote{font-size:12px;color:#9a1020}
.privcard .ruleacts{margin-top:12px;justify-content:flex-end}
.privcard .ruleacts .btn:not(.hot){color:var(--fg)}
/* chalkboard tabs + setlist */
.btabs{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.btabs button{background:none;border:0;padding:0 0 2px;font-family:var(--hand);font-size:17px;color:rgba(233,238,230,.45);border-bottom:2px solid transparent}
.btabs button[aria-selected="true"]{color:var(--chalk);border-bottom-color:rgba(233,238,230,.6)}
.btabs button:last-child{font-size:14px}
.btabs button[aria-selected="true"]:last-child{font-size:17px}
.btabs button:first-child:not([aria-selected="true"]){font-size:14px}
.q.h{grid-template-columns:34px minmax(0,1fr) auto}
.h .sc{font-family:var(--lyric);font-size:20px;color:var(--beer)}
.h .again{background:transparent;border:1px solid rgba(233,238,230,.3);color:var(--chalk);border-radius:4px;font-size:11px;font-weight:700;padding:3px 6px;font-family:var(--body)}
/* profile card */
.pcard{width:min(380px,100%);background:repeating-linear-gradient(transparent 0 23px,rgba(43,29,20,.12) 23px 24px),var(--paper);color:var(--ink);border-radius:6px;padding:20px;box-shadow:0 20px 50px rgba(0,0,0,.7);display:flex;flex-direction:column;gap:8px;text-align:center;transform:rotate(.6deg)}
.pcemoji{font-size:56px;line-height:1}
.pcard h3{font-family:var(--hand);font-weight:400;font-size:30px;margin:0}
.pcard p{margin:0;font-size:14px}
.pcsig b{color:#b3242e}
.pcard .lbl{color:#6b5646;display:block;margin-bottom:6px}
.drinks{display:flex;justify-content:center;gap:6px;flex-wrap:wrap}
.drinks button{border:1px solid #b9a27f;background:#fff8e8;border-radius:8px;padding:6px 8px;font-size:13px;font-weight:700;color:var(--ink);display:flex;flex-direction:column;align-items:center;gap:2px;min-width:58px}
.drinks button span{font-size:22px;line-height:1}
.drinks button:hover{border-color:#b3242e}
.pcard .ruleacts{justify-content:center;margin-top:6px}
.pcard .ruleacts .btn:not(.hot){color:var(--fg)}
@media (prefers-reduced-motion:reduce){.floaty,.upnext,.verdict{animation:none}}
.modal{position:fixed;inset:0;z-index:30;background:rgba(5,2,2,.7);display:flex;align-items:center;justify-content:center;padding:16px max(16px,env(safe-area-inset-right,0px)) 16px max(16px,env(safe-area-inset-left,0px));overflow:auto}
.rulecard{width:min(520px,100%);max-height:100%;overflow:auto;background:repeating-linear-gradient(transparent 0 23px,rgba(43,29,20,.12) 23px 24px),var(--paper);color:var(--ink);border-radius:4px;padding:18px 20px;box-shadow:0 20px 50px rgba(0,0,0,.7);transform:rotate(-.5deg);display:flex;flex-direction:column;gap:12px}
.rulecard h3{font-family:var(--hand);font-weight:400;font-size:28px;margin:0}
.rulecard .who{margin:0;font-size:13px;color:#6b5646}
.rgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:8px 12px;align-items:center}
.rgrid label{font-weight:700;font-size:13.5px}
.rgrid select{font:inherit;font-size:13.5px;padding:6px 8px;border-radius:5px;border:1px solid #b9a27f;background:#fff8e8;color:var(--ink);min-width:0}
.checks{display:flex;flex-direction:column;gap:6px;font-size:13.5px}
.checks input{accent-color:#b3242e;margin-right:6px}
.rulecard :disabled{opacity:.55;cursor:not-allowed}
.ruleacts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.ruleacts .btn:not(.hot){color:var(--fg)}
.linkish{margin-left:auto}
.timer{font-variant-numeric:tabular-nums;color:var(--beer);font-weight:700;margin-left:6px}
@media (max-width:520px){.rgrid{grid-template-columns:1fr}}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%) rotate(-1deg);background:var(--tape);color:var(--ink);font-family:var(--hand);padding:8px 16px;z-index:20;box-shadow:0 4px 12px rgba(0,0,0,.5);max-width:calc(100% - 32px);text-align:center}

@media (max-width:860px){
  html,body{height:auto}
  #room{grid-template-columns:minmax(0,1fr)}
  .stagebox{flex:none;min-height:0}
  .stage{aspect-ratio:16/10}
  .stage.duet{aspect-ratio:auto;grid-template-columns:1fr}
  .stage.duet .tile{aspect-ratio:16/10}
  .audience{max-height:none}
  .qlist,.lib{max-height:300px}
  .msgs{height:260px;flex:none}
  .stage{aspect-ratio:4/3.4}
  .tv{width:26%;right:10px;top:22px;padding:5px 5px 10px;border-radius:8px}
  .tv .screen{border-radius:8px/11px;padding:3px}
  .tv .screen b{font-size:12px}
  .tv .screen i,.tv .knobs{display:none}
  .lyrics{padding:26px 6px 8px}
  .transport .song{order:-1;flex-basis:100%}
  .transport .guide{margin-left:auto}
  .audience{grid-template-columns:repeat(auto-fill,minmax(76px,1fr))}
  .ameter{order:1;flex-basis:100%}
  .drinkbtn{order:2}
  .roombar h2{font-size:26px}
}
@media (prefers-reduced-motion:reduce){.arrow,.logo,.logo span,.stage .tile .face{animation:none}}