/* ======================================================================
   LIVE SCREEN POLISH: gift banners, floating hearts, header, chat badges, clean view, guest boxes.
   Loaded last. Motion uses transform / opacity only (GPU), and is switched off for people who ask for less motion.
   ====================================================================== */

/* ---- gift banners ---- */
.gbanners { position:absolute; left:10px; top:34%; display:flex; flex-direction:column; align-items:flex-start; gap:6px; max-width:80%; pointer-events:none; z-index:2; }
.gban { display:flex; align-items:center; gap:8px; padding:4px 10px 4px 4px; border-radius:999px; color:#fff; background:linear-gradient(90deg, rgba(10,10,16,.72), rgba(10,10,16,.5)); border:1px solid rgba(255,255,255,.4); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:0 4px 16px rgba(0,0,0,.45), 0 0 14px color-mix(in srgb, var(--primary-accent, #00f2fe) 35%, transparent); will-change:transform, opacity; }
.gban .gav { flex:none; width:30px; height:30px; }
.gban .gtx { display:flex; flex-direction:column; min-width:0; line-height:1.15; } .gban .gtx b { font-size:13px; max-width:30cqw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .gban .gtx small { font-size:11px; color:#dcd9ff; max-width:30cqw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gban .gic { flex:none; width:32px; height:32px; display:flex; align-items:center; justify-content:center; font-size:26px; } .gban .gic img { width:100%; height:100%; object-fit:contain; }
.gban .gx { font-style:italic; font-weight:900; font-size:22px; color:#ffd34d; text-shadow:0 0 10px rgba(255,170,0,.8); transform-origin:left center; }
.gmega { position:absolute; left:10px; right:10px; top:96px; z-index:3; display:flex; align-items:center; justify-content:center; gap:10px; padding:9px 16px; border-radius:18px; color:#fff; overflow:hidden; border:1.5px solid rgba(255,255,255,.75); background:linear-gradient(100deg, var(--secondary-accent, #ff0844), var(--tertiary-accent, #7828c8) 55%, var(--primary-accent, #00f2fe)); box-shadow:0 0 22px 4px color-mix(in srgb, var(--secondary-accent, #ff0844) 55%, transparent), 0 8px 24px rgba(0,0,0,.5); will-change:transform, opacity; }
.gmega .mic { font-size:30px; flex:none; filter:drop-shadow(0 2px 6px rgba(0,0,0,.5)); }
.gmega .mtx { font-weight:900; font-size:clamp(13px, 4.2cqw, 20px); letter-spacing:.01em; text-shadow:0 0 10px rgba(255,255,255,.85), 0 2px 4px rgba(0,0,0,.6); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gmega::after { content:''; position:absolute; top:0; bottom:0; width:40%; left:-50%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent); transform:skewX(-20deg); animation:gmShine 1.6s ease-in-out .3s 2; }
@keyframes gmShine { to { left:130%; } }
@media (min-width:820px) and (min-aspect-ratio:1/1) { .gbanners { top:30%; } .gmega { top:70px; left:20%; right:20%; } }

/* ---- floating hearts (drawn on one canvas) ---- */
.heartcv { position:absolute; right:0; bottom:0; width:40%; height:74%; pointer-events:none; }

/* ---- header: host, follow, LIVE badge ---- */
.followbtn { flex:none; border:0; cursor:pointer; font-weight:800; font-size:12px; padding:6px 13px; border-radius:999px; color:#fff; background:linear-gradient(135deg, var(--secondary-accent, #ff0844), color-mix(in srgb, var(--secondary-accent, #ff0844) 60%, var(--gold-accent, #ffd700))); border:1px solid rgba(255,255,255,.55); box-shadow:0 2px 10px rgba(0,0,0,.4); white-space:nowrap; }
.followbtn[hidden] { display:none; } .followbtn:active { transform:scale(.95); }
.pill { flex:1 1 auto; max-width:46%; }
.livepill:not(.off) { position:relative; padding-left:12px; }
.livepill:not(.off)::before { content:''; width:7px; height:7px; border-radius:50%; background:#fff; flex:none; animation:liveDot 1.3s ease-in-out infinite; }
.livepill:not(.off)::after { content:''; position:absolute; inset:0; border-radius:inherit; border:2px solid var(--live, #ff2d55); animation:liveRing 1.8s ease-out infinite; pointer-events:none; }
@keyframes liveDot { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.35; transform:scale(.7); } }
@keyframes liveRing { 0% { opacity:.8; transform:scale(1); } 100% { opacity:0; transform:scale(1.35); } }
.eyebtn { color:#fff; } .stage .topbar .eyebtn svg { display:block; }

/* ---- chat: fade at the top, role badges ---- */
.chatlog { -webkit-mask-image:linear-gradient(transparent 0, rgba(0,0,0,.45) 12%, #000 32%); mask-image:linear-gradient(transparent 0, rgba(0,0,0,.45) 12%, #000 32%); scroll-behavior:smooth; overscroll-behavior:contain; }
.rb { display:inline-block; font-size:9.5px; line-height:1; font-weight:900; letter-spacing:.04em; padding:2px 5px; margin-right:1px; border-radius:6px; vertical-align:1px; color:#fff; text-shadow:none; border:1px solid rgba(255,255,255,.35); }
.rb.host { background:linear-gradient(135deg, var(--secondary-accent, #ff0844), var(--tertiary-accent, #7828c8)); }
.rb.mod { background:linear-gradient(135deg, #12b886, #0b7a5a); }
.rb.vip { background:linear-gradient(135deg, #ffd34d, #ff9d2e); color:#2a1500; border-color:rgba(255,255,255,.6); }
.rb.top.t1 { background:linear-gradient(135deg, #ffe27a, #e0a100); color:#2a1500; } .rb.top.t2 { background:linear-gradient(135deg, #f1f3f8, #a7afbf); color:#14161c; } .rb.top.t3 { background:linear-gradient(135deg, #e6a272, #a55c24); }

/* ---- clean view: only the streamer's video ---- */
.stage { touch-action:pan-y; }
.stage > * { transition:opacity .22s ease; }
.stage.clean > :not(.media):not(.cleanchip):not(.audioonly):not(.ggridwrap):not(.lockscreen) { opacity:0 !important; pointer-events:none !important; }
.stage.clean .vs.bt .vshud, .stage.clean .vs .support, .stage.clean .vs .endvs, .stage.clean .vs .panel .rk, .stage.clean .vs .panel .nm, .stage.clean .vs .panel .streak, .stage.clean .vs .sw, .stage.clean .ggrid .gt .nm, .stage.clean .ggrid .gt .rm, .stage.clean .ggrid .gt .gact { opacity:0; pointer-events:none; }
.vs .vshud, .vs .support, .vs .endvs, .vs .panel .rk, .vs .panel .nm, .vs .sw, .ggrid .gt .nm { transition:opacity .22s ease; }
.cleanchip { position:absolute; right:0; top:50%; transform:translateY(-50%); z-index:30; width:26px; height:60px; padding:0; border:0; cursor:pointer; color:#fff; border-radius:16px 0 0 16px; background:rgba(12,12,18,.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .25s; }
.cleanchip.show { opacity:.95; } .cleanchip[hidden] { display:none; }

@media (prefers-reduced-motion:reduce) {
  .livepill:not(.off)::before, .livepill:not(.off)::after, .gmega::after { animation:none; }
  .stage > * { transition:none; }
}

/* ---- 3- and 4-way battles on a phone: one row of gift buttons, a shorter chat, nothing overlapping ---- */
@media (max-width:819px), (max-aspect-ratio:1/1) {
  .vs.bt.n3 .support, .vs.bt.n4 .support { flex-wrap:nowrap; gap:4px; padding:6px 62px 0 8px; }
  .vs.bt.n3 .support button, .vs.bt.n4 .support button { flex:1 1 0; padding:6px 2px; font-size:11px; border-radius:12px; }
  .stage:has(.vs.bt.n3, .vs.bt.n4) .chatmount { height:168px; }
  .stage:has(.vs.bt.n3, .vs.bt.n4) .col { bottom:106px; }
}
.stage.clean .vschip, .stage.clean .panel .gift { opacity:0; }

/* ======================= guest boxes: glass tiles, talking glow, tap menu, empty seats ======================= */
@property --ang { syntax:'<angle>'; inherits:false; initial-value:0deg; }
.gbox { border-radius:18px; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4), 0 6px 22px rgba(0,0,0,.45); background:rgba(14,14,22,.55); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.gbox .gz, .dbox .gz { border-radius:14px; background:linear-gradient(160deg, #1d1b2e, #0c0c14); }
.gt { position:relative; }
.gt.hasact { cursor:pointer; }
.gt .nm, .gbox .gz .nm, .dbox .gz .nm { left:6px !important; right:auto !important; bottom:6px !important; top:auto !important; max-width:calc(100% - 12px); box-sizing:border-box; padding:3px 9px 3px 7px !important; border-radius:999px; background:rgba(10,10,16,.62) !important; border:1px solid rgba(255,255,255,.35); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); font-size:11px; display:flex; align-items:center; gap:5px; }
.gt .nm::before { content:''; width:6px; height:6px; border-radius:50%; background:#58e08a; box-shadow:0 0 6px #58e08a; flex:none; }
.ggrid .gt.lowrow .nm { top:6px !important; bottom:auto !important; }
.ggrid .gt { border-radius:18px; border:1.5px solid rgba(255,255,255,.3); background:linear-gradient(160deg, #1d1b2e, #0c0c14); }
.ggrid .gt .rm, .gbox .gz .rm { background:rgba(10,10,16,.65); border:1px solid rgba(255,255,255,.4); backdrop-filter:blur(6px); }

/* the person talking: a spinning neon border (falls back to a pulse where @property is not supported) */
.gt.speaking { box-shadow:inset 0 0 22px color-mix(in srgb, var(--primary-accent, #00f2fe) 45%, transparent); animation:gtPulse 1s ease-in-out infinite alternate; }
.gt.speaking::after { content:''; position:absolute; inset:0; border-radius:inherit; padding:3px; pointer-events:none; z-index:2;
  background:conic-gradient(from var(--ang), var(--primary-accent, #00f2fe), var(--secondary-accent, #ff0844), var(--gold-accent, #ffd700), var(--primary-accent, #00f2fe));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
  animation:gtSpin 2.2s linear infinite; filter:drop-shadow(0 0 6px var(--primary-accent, #00f2fe)); }
@keyframes gtSpin { to { --ang:360deg; } }
@keyframes gtPulse { from { filter:brightness(1); } to { filter:brightness(1.12); } }
.pill.speaking { box-shadow:0 0 0 2px var(--primary-accent, #00f2fe), 0 0 16px var(--primary-accent, #00f2fe); animation:gtPulse 1s ease-in-out infinite alternate; }
.stage.hastiles.hostspeak .media video { outline:3px solid var(--primary-accent, #00f2fe); outline-offset:-3px; border-radius:18px; }

/* tap menu on a picture */
.gact { position:absolute; left:50%; top:50%; z-index:6; transform:translate(-50%,-50%); display:flex; flex-direction:column; gap:5px; padding:8px; min-width:min(132px, 90%); border-radius:16px; background:rgba(10,10,16,.78); border:1px solid rgba(255,255,255,.45); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:0 10px 30px rgba(0,0,0,.6); animation:gactIn .26s cubic-bezier(.17,1.45,.4,1) both; }
.gact button { all:unset; box-sizing:border-box; text-align:center; cursor:pointer; font-size:12px; font-weight:800; color:#fff; padding:7px 10px; border-radius:999px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); white-space:nowrap; }
.gact button:hover, .gact button:focus-visible { background:rgba(255,255,255,.24); outline:2px solid var(--primary-accent, #00f2fe); outline-offset:1px; }
.gact button.danger { background:rgba(255,45,85,.3); border-color:rgba(255,45,85,.7); }
@keyframes gactIn { from { opacity:0; transform:translate(-50%,-50%) scale(.78); } to { opacity:1; transform:translate(-50%,-50%) scale(1); } }

/* empty seats */
.seat { all:unset; box-sizing:border-box; cursor:pointer; display:flex; align-items:center; gap:5px; padding:3px 9px 3px 4px; border-radius:999px; border:1.5px dashed rgba(255,255,255,.6); color:#fff; font-size:11px; font-weight:800; animation:seatPulse 2s ease-in-out infinite; flex:none; }
.seat i { font-style:normal; width:18px; height:18px; line-height:16px; text-align:center; border-radius:50%; background:var(--primary-accent, #00f2fe); color:#001; font-size:15px; }
.seat:focus-visible { outline:2px solid var(--primary-accent, #00f2fe); outline-offset:2px; }
.gt.seatTile { flex-direction:column; gap:4px; cursor:pointer; border:2px dashed rgba(255,255,255,.55); background:rgba(255,255,255,.05); animation:seatPulse 2s ease-in-out infinite; color:#e8e6ff; }
.gt.seatTile .plus { font-style:normal; width:34px; height:34px; line-height:32px; text-align:center; font-size:26px; font-weight:300; border-radius:50%; border:1.5px solid rgba(255,255,255,.7); color:#fff; }
@keyframes seatPulse { 0%,100% { opacity:.65; border-color:rgba(255,255,255,.4); } 50% { opacity:1; border-color:var(--primary-accent, #00f2fe); } }
.gbox.gfloat.strip { border-radius:999px; }
@media (prefers-reduced-motion:reduce) { .gt.speaking, .gt.speaking::after, .pill.speaking, .seat, .gt.seatTile, .gact { animation:none; } .gt.speaking::after { background:var(--primary-accent, #00f2fe); } }