.room-top{position:absolute;top:10px;right:12px;left:12px;display:flex;align-items:center;gap:8px;z-index:20;color:#fff}
.room-top .name{background:rgba(20,12,5,.6);border-radius:22px;padding:4px 12px 4px 4px;display:flex;align-items:center;gap:8px;font-weight:800}
.room-top .name small{display:block;font-size:11px;color:#FFE08A}
.seats{position:absolute;top:70px;right:0;left:0;display:grid;grid-template-columns:repeat(4,1fr);gap:10px 0;padding:0 14px;z-index:10;transition:all .35s}
.seat{display:flex;flex-direction:column;align-items:center;gap:3px;color:#fff;font-weight:700;font-size:12px;text-shadow:0 1px 2px #000;cursor:pointer}
.seat .ring{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;background:rgba(20,12,5,.45);border:2px dashed rgba(255,255,255,.5)}
.seat .ring .av{width:60px;height:60px}
.seat.speaking .ring{box-shadow:0 0 0 3px #7CFF9B,0 0 18px #7CFF9B;animation:spk 1.2s infinite}
@keyframes spk{50%{box-shadow:0 0 0 5px #7CFF9B,0 0 26px #7CFF9B}}
.seat.turn .ring{box-shadow:0 0 0 4px #FFB300,0 0 20px #FFB300}
.seat .tag{background:rgba(20,12,5,.65);border-radius:10px;padding:0 6px}
.room.playing .seats{top:58px;grid-template-columns:repeat(8,1fr);padding:0 6px}
.room.playing .seat .ring{width:40px;height:40px}.room.playing .seat .ring .av{width:38px;height:38px}
.room.playing .seat .tag{display:none}
.stage{position:absolute;top:118px;right:0;left:0;bottom:84px;z-index:12;display:none}
.room.playing .stage{display:block}
.chat{position:absolute;right:12px;left:80px;bottom:92px;max-height:34%;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;z-index:11;pointer-events:none}
.room.playing .chat{display:none}
.msg{align-self:flex-start;background:rgba(20,12,5,.55);color:#fff;border-radius:14px;padding:5px 12px;font-size:13px;font-weight:600;max-width:100%;animation:fade .2s}
.msg b{color:#FFE08A}
.msg.card{background:linear-gradient(180deg,var(--cream1),var(--cream2));color:var(--ink);pointer-events:auto;border:2px solid #fff}
.bottombar{position:absolute;bottom:0;right:0;left:0;height:84px;display:flex;align-items:center;justify-content:space-around;padding:0 6px 10px;z-index:30;
  background:linear-gradient(180deg,rgba(20,12,5,0),rgba(20,12,5,.75))}
.bb{width:50px;height:50px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;background:rgba(255,255,255,.16);position:relative}
.bb.gift{background:linear-gradient(180deg,#FF8AD8,#B23BE0)}
.bb.game{width:58px;height:58px;background:linear-gradient(180deg,#FFD866,#FF7A1F);box-shadow:0 0 18px rgba(255,170,40,.8)}
.bb.mic.on{background:linear-gradient(180deg,#A6EE73,#2E9E3A)}
.bb .badge{position:absolute;top:-4px;left:-4px;background:#D7263D;color:#fff;border-radius:10px;font-size:11px;font-weight:800;padding:0 6px}
.sheet{position:absolute;right:0;left:0;bottom:0;z-index:45;background:linear-gradient(180deg,var(--cream1),var(--cream2));border-radius:28px 28px 0 0;box-shadow:0 -8px 24px rgba(0,0,0,.35);padding:16px;max-height:78%;overflow:auto;animation:up .25s}
@keyframes up{from{transform:translateY(40px);opacity:0}}
.gcard{border-radius:18px;overflow:hidden;background:#fff;border:2px solid var(--line);cursor:pointer;text-align:center;font-weight:800;padding-bottom:6px}
.gcard img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.gcard.soon{opacity:.55}
.gcard.sel{border-color:#FF9A1F;border-width:3px}