/* =====================================================================
   ShotGram v78.5 — TikTok-style LIVE layer
   Loads AFTER styles.css, safe-area.css and css/v78_3-patch.css.
   Additive only: every selector here is a NEW class introduced in v78.5.
   Nothing in styles.css is edited or renamed.

   All animation is transform/opacity only (compositor work), never
   width/height/top/left, so a gift storm cannot force layout.
   ===================================================================== */

:root{
  --sg-gift-gold:#ffcc4d;
  --sg-gift-glass:rgba(10,11,22,.72);
  --sg-gift-line:rgba(255,255,255,.14);
}

/* ---------------------------------------------------------------------
   1. FLYING GIFT LAYER
   Sits over the video, under the chat and the control rail, and never
   takes a pointer event.
   --------------------------------------------------------------------- */
.sg-gift-layer{
  position:absolute;inset:0;
  z-index:7;
  pointer-events:none;
  overflow:hidden;
  contain:layout paint;
}
.sg-gift-fly{
  position:absolute;
  inset-inline-start:0;
  inset-block-start:50%;
  display:flex;align-items:center;gap:8px;
  padding:7px 13px 7px 8px;
  border-radius:999px;
  background:var(--sg-gift-glass);
  border:1px solid var(--sg-gift-line);
  backdrop-filter:blur(10px);
  color:#fff;
  white-space:nowrap;
  will-change:transform,opacity;
  transform:translate3d(-120%,0,0);
  animation:sg-gift-cross 3.4s cubic-bezier(.22,.61,.36,1) forwards;
}
.sg-gift-fly .sg-gift-emoji{font-size:26px;line-height:1}
.sg-gift-fly .sg-gift-who{display:flex;flex-direction:column;min-width:0}
.sg-gift-fly .sg-gift-who b{font-size:12.5px;font-weight:700;max-width:9.5em;overflow:hidden;text-overflow:ellipsis}
.sg-gift-fly .sg-gift-who small{font-size:11px;opacity:.72}
.sg-gift-fly .sg-gift-combo{
  font-size:15px;font-weight:900;
  color:var(--sg-gift-gold);
  text-shadow:0 0 12px rgba(255,204,77,.65);
  margin-inline-start:2px;
}
.sg-gift-fly[data-tier="epic"]      { border-color:rgba(var(--violet-rgb, 139, 92, 255),.65);box-shadow:0 0 22px rgba(var(--violet-rgb, 139, 92, 255),.35) }
.sg-gift-fly[data-tier="legendary"] { border-color:rgba(255,204,77,.75);box-shadow:0 0 26px rgba(255,204,77,.42) }

@keyframes sg-gift-cross{
  0%   { transform:translate3d(-120%,0,0); opacity:0 }
  12%  { transform:translate3d(14%,0,0);   opacity:1 }
  72%  { transform:translate3d(22%,0,0);   opacity:1 }
  100% { transform:translate3d(140%,-18px,0); opacity:0 }
}
/* RTL: the gift flies the other way so it never crosses the chat column. */
[dir="rtl"] .sg-gift-fly{ animation-name:sg-gift-cross-rtl }
@keyframes sg-gift-cross-rtl{
  0%   { transform:translate3d(120%,0,0);  opacity:0 }
  12%  { transform:translate3d(-14%,0,0);  opacity:1 }
  72%  { transform:translate3d(-22%,0,0);  opacity:1 }
  100% { transform:translate3d(-140%,-18px,0); opacity:0 }
}

/* The big centre burst for a single high-tier gift. */
.sg-gift-burst{
  position:absolute;inset-block-start:38%;inset-inline-start:50%;
  transform:translate3d(-50%,-50%,0) scale(.4);
  font-size:78px;line-height:1;
  will-change:transform,opacity;
  animation:sg-gift-pop 1.5s cubic-bezier(.2,.9,.25,1) forwards;
  filter:drop-shadow(0 6px 26px rgba(0,0,0,.55));
}
@keyframes sg-gift-pop{
  0%  { transform:translate3d(-50%,-50%,0) scale(.35); opacity:0 }
  22% { transform:translate3d(-50%,-50%,0) scale(1.12); opacity:1 }
  68% { transform:translate3d(-50%,-50%,0) scale(1); opacity:1 }
  100%{ transform:translate3d(-50%,-62%,0) scale(.86); opacity:0 }
}

/* ---------------------------------------------------------------------
   2. COMBO COUNTER — grows on each repeat tap, then fades.
   --------------------------------------------------------------------- */
.sg-combo-chip{
  position:absolute;
  inset-block-end:clamp(96px,22vh,190px);
  inset-inline-end:14px;
  z-index:8;
  display:flex;align-items:center;gap:7px;
  padding:8px 14px;
  border-radius:999px;
  background:linear-gradient(135deg,rgba(255,72,140,.92),rgba(var(--violet-rgb, 139, 92, 255),.92));
  color:#fff;font-weight:900;
  pointer-events:none;
  will-change:transform,opacity;
  animation:sg-combo-in .22s ease-out;
}
.sg-combo-chip .sg-combo-x{font-size:22px;letter-spacing:-.5px}
.sg-combo-chip .sg-combo-emoji{font-size:20px}
.sg-combo-chip.is-bump{animation:sg-combo-bump .24s cubic-bezier(.3,1.4,.4,1)}
.sg-combo-chip.is-out{animation:sg-combo-out .3s ease-in forwards}
@keyframes sg-combo-in  { from{transform:scale(.7);opacity:0} to{transform:scale(1);opacity:1} }
@keyframes sg-combo-bump{ 0%{transform:scale(1)} 45%{transform:scale(1.22)} 100%{transform:scale(1)} }
@keyframes sg-combo-out { to{transform:scale(.8) translate3d(0,10px,0);opacity:0} }

/* ---------------------------------------------------------------------
   3. TOP GIFTERS ROW — above the video, under the status bar.
   --------------------------------------------------------------------- */
.sg-top-gifters{
  position:absolute;
  inset-block-start:calc(var(--sa-t,0px) + 58px);
  inset-inline-start:10px;
  z-index:9;
  display:flex;align-items:center;gap:6px;
  max-width:min(74%,320px);
  padding:4px 8px 4px 5px;
  border-radius:999px;
  background:rgba(6,7,15,.5);
  border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(9px);
  overflow-x:auto;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.sg-top-gifters::-webkit-scrollbar{display:none}
.sg-top-gifters:empty{display:none}
.sg-top-gifters .sg-gifter-label{
  font-size:10px;font-weight:800;letter-spacing:.6px;
  color:var(--sg-gift-gold);text-transform:uppercase;
  padding-inline:4px;flex:none;
}
.sg-gifter{
  display:flex;align-items:center;gap:5px;flex:none;
  padding:2px 8px 2px 2px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  color:#fff;
}
.sg-gifter img,.sg-gifter i{
  width:22px;height:22px;border-radius:50%;object-fit:cover;
  display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:800;
  background:rgba(var(--violet-rgb, 139, 92, 255),.4);
}
.sg-gifter b{font-size:11.5px;font-weight:700;max-width:7em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sg-gifter small{font-size:10.5px;opacity:.78}
.sg-gifter[data-rank="1"]{background:linear-gradient(135deg,rgba(255,204,77,.34),rgba(255,138,0,.26));box-shadow:inset 0 0 0 1px rgba(255,204,77,.45)}
.sg-gifter[data-rank="2"]{background:rgba(203,213,225,.2)}
.sg-gifter[data-rank="3"]{background:rgba(205,127,50,.22)}
.sg-gifter .sg-rank{font-size:10px;font-weight:900;opacity:.85;min-width:12px;text-align:center}

/* ---------------------------------------------------------------------
   4. JOIN TOASTS — "<name> joined", non-blocking, capped.
   --------------------------------------------------------------------- */
.sg-join-layer{
  position:absolute;
  inset-block-end:clamp(150px,30vh,260px);
  inset-inline-start:10px;
  z-index:8;
  display:flex;flex-direction:column;gap:6px;
  pointer-events:none;
  max-width:min(70%,280px);
}
.sg-join-toast{
  display:flex;align-items:center;gap:7px;
  padding:5px 11px 5px 5px;
  border-radius:999px;
  background:linear-gradient(135deg,rgba(var(--violet-rgb, 139, 92, 255),.85),rgba(62,166,255,.7));
  color:#fff;font-size:12px;font-weight:600;
  will-change:transform,opacity;
  animation:sg-join-in .32s cubic-bezier(.2,.9,.3,1);
}
.sg-join-toast img,.sg-join-toast i{
  width:20px;height:20px;border-radius:50%;object-fit:cover;flex:none;
  display:grid;place-items:center;font-style:normal;font-size:10px;font-weight:800;
  background:rgba(255,255,255,.22);
}
.sg-join-toast.is-out{animation:sg-join-out .28s ease-in forwards}
@keyframes sg-join-in { from{transform:translate3d(-24px,0,0);opacity:0} to{transform:none;opacity:1} }
@keyframes sg-join-out{ to{transform:translate3d(0,-8px,0);opacity:0} }
[dir="rtl"] .sg-join-toast{animation-name:sg-join-in-rtl}
@keyframes sg-join-in-rtl{ from{transform:translate3d(24px,0,0);opacity:0} to{transform:none;opacity:1} }

/* ---------------------------------------------------------------------
   5. COIN CHIP + GIFT SHEET (the monetization surface)
   --------------------------------------------------------------------- */
.sg-coin-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:999px;
  background:linear-gradient(135deg,rgba(255,204,77,.22),rgba(255,138,0,.16));
  border:1px solid rgba(255,204,77,.4);
  color:var(--sg-gift-gold);font-weight:800;font-size:12.5px;
  line-height:1;
}
.sg-coin-chip .sg-coin-dot{
  width:15px;height:15px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 32% 30%,#ffe9a8,#ffb020 62%,#d98a00);
  box-shadow:0 0 8px rgba(255,176,32,.5);
}

.sg-gift-sheet{
  display:flex;flex-direction:column;gap:12px;
  min-height:0;
}
.sg-gift-sheet-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  flex-wrap:wrap;
}
.sg-gift-sheet-head h3{
  margin:0;font-size:16px;font-weight:800;letter-spacing:-.2px;
}
.sg-gift-sheet-head .sg-gift-head-actions{display:flex;align-items:center;gap:8px}
.sg-gift-topup{
  padding:6px 13px;border-radius:999px;
  border:1px solid rgba(255,204,77,.45);
  background:transparent;color:var(--sg-gift-gold);
  font-weight:800;font-size:12.5px;cursor:pointer;
  min-height:34px;
}
.sg-gift-tiers{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.sg-gift-tiers::-webkit-scrollbar{display:none}
.sg-gift-tier-btn{
  flex:none;padding:6px 14px;border-radius:999px;
  border:1px solid var(--line,rgba(255,255,255,.12));
  background:rgba(255,255,255,.04);color:var(--muted,#9aa0b5);
  font-size:12.5px;font-weight:700;cursor:pointer;min-height:34px;
}
.sg-gift-tier-btn.is-active{
  background:linear-gradient(135deg,rgba(var(--violet-rgb, 139, 92, 255),.34),rgba(62,166,255,.24));
  border-color:rgba(var(--violet-rgb, 139, 92, 255),.5);color:#fff;
}
.sg-gift-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:9px;
  max-height:min(48vh,340px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding-bottom:max(6px,var(--sa-b,0px));
}
@media (max-width:360px){ .sg-gift-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
.sg-gift-card{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:11px 6px 9px;
  border-radius:var(--r-md,14px);
  border:1px solid var(--line,rgba(255,255,255,.1));
  background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
  color:var(--text,#f4f5ff);
  cursor:pointer;min-height:88px;
  transition:transform .14s ease,border-color .14s ease;
}
.sg-gift-card:active{transform:scale(.95)}
.sg-gift-card.is-selected{
  border-color:rgba(var(--violet-rgb, 139, 92, 255),.75);
  background:linear-gradient(160deg,rgba(var(--violet-rgb, 139, 92, 255),.26),rgba(62,166,255,.12));
}
.sg-gift-card .sg-gift-card-emoji{font-size:30px;line-height:1}
.sg-gift-card .sg-gift-card-name{
  font-size:11.5px;font-weight:700;text-align:center;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.sg-gift-card .sg-gift-card-cost{
  display:inline-flex;align-items:center;gap:4px;
  font-size:11px;font-weight:800;color:var(--sg-gift-gold);
}
.sg-gift-card .sg-gift-card-cost i{
  width:10px;height:10px;border-radius:50%;
  background:radial-gradient(circle at 32% 30%,#ffe9a8,#ffb020 62%,#d98a00);
}
.sg-gift-card[data-tier="legendary"]{box-shadow:inset 0 0 0 1px rgba(255,204,77,.3)}

.sg-gift-send-row{
  display:flex;align-items:center;gap:9px;
  padding-top:2px;
}
.sg-gift-qty{
  display:flex;align-items:center;gap:2px;
  border-radius:999px;border:1px solid var(--line,rgba(255,255,255,.12));
  background:rgba(255,255,255,.04);
  flex:none;
}
.sg-gift-qty button{
  width:34px;height:34px;min-width:34px;
  background:none;border:0;color:var(--text,#f4f5ff);
  font-size:17px;font-weight:800;cursor:pointer;border-radius:999px;
}
.sg-gift-qty b{min-width:30px;text-align:center;font-size:13.5px;font-weight:800}
.sg-gift-send{
  flex:1;min-height:46px;
  border:0;border-radius:999px;
  background:linear-gradient(135deg,#ff488c,var(--violet, #8b5cff));
  color:#fff;font-weight:900;font-size:14.5px;cursor:pointer;
}
.sg-gift-send[disabled]{opacity:.5;cursor:not-allowed}
.sg-gift-note{
  font-size:11.5px;color:var(--muted,#9aa0b5);
  text-align:center;margin:0;
}
.sg-gift-note.is-warn{color:#ffb63d}

/* ---------------------------------------------------------------------
   6. ALWAYS-VISIBLE FLIP + MIC (streamer quick dock)
   Pulled out of the collapsible control sheet. 44x44 targets, safe-area
   aware, always on top of the camera preview.
   --------------------------------------------------------------------- */
.sg-live-quick{
  position:absolute;
  z-index:12;
  inset-inline-end:12px;
  inset-block-end:calc(var(--sa-b,0px) + 16px);
  display:flex;flex-direction:column;gap:10px;
}
.sg-quick-btn{
  width:46px;height:46px;min-width:46px;min-height:46px;
  border-radius:50%;
  display:grid;place-items:center;
  background:rgba(6,7,15,.55);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(10px);
  color:#fff;cursor:pointer;
  transition:transform .14s ease,background .14s ease;
}
.sg-quick-btn:active{transform:scale(.92)}
.sg-quick-btn svg{width:21px;height:21px}
.sg-quick-btn.is-off{
  background:rgba(255,72,92,.85);
  border-color:rgba(255,255,255,.3);
}
.sg-quick-btn .sg-quick-label{
  position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
}
/* On desktop the control panel is always open, so the dock is redundant. */
@media (min-width:761px){ .sg-live-quick{ inset-block-end:20px } }

/* ---------------------------------------------------------------------
   7. SWIPE BETWEEN LIVE STREAMS
   --------------------------------------------------------------------- */
.sg-swipe-veil{
  position:absolute;inset:0;z-index:11;
  display:grid;place-items:center;gap:10px;
  background:rgba(6,7,15,.82);
  backdrop-filter:blur(6px);
  color:#fff;font-size:13px;font-weight:600;
  opacity:0;pointer-events:none;
  transition:opacity .18s ease;
}
.sg-swipe-veil.is-on{opacity:1;pointer-events:auto}
.sg-swipe-veil .sg-swipe-spin{
  width:30px;height:30px;border-radius:50%;
  border:2.5px solid rgba(255,255,255,.22);
  border-top-color:#fff;
  animation:sg-swipe-spin .8s linear infinite;
}
@keyframes sg-swipe-spin{to{transform:rotate(360deg)}}

.sg-swipe-hint{
  position:absolute;
  inset-block-end:calc(var(--sa-b,0px) + 74px);
  inset-inline-start:50%;
  transform:translate3d(-50%,0,0);
  z-index:8;
  display:flex;align-items:center;gap:6px;
  padding:5px 12px;border-radius:999px;
  background:rgba(6,7,15,.5);
  border:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.82);font-size:11.5px;font-weight:600;
  pointer-events:none;
  animation:sg-hint-fade 5.4s ease forwards;
}
@keyframes sg-hint-fade{ 0%,64%{opacity:1} 100%{opacity:0;visibility:hidden} }

/* The player nudges as the finger drags, so the gesture feels attached. */
.live-watch-player.sg-dragging{ transition:none }
.live-watch-player.sg-settling{ transition:transform .2s cubic-bezier(.2,.8,.3,1) }

/* ---------------------------------------------------------------------
   8. LIVE STATE MESSAGES (viewer + streamer)
   --------------------------------------------------------------------- */
.sg-live-state{
  position:absolute;inset:0;z-index:10;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;text-align:center;
  padding:24px max(18px,var(--sa-r,0px)) calc(24px + var(--sa-b,0px)) max(18px,var(--sa-l,0px));
  background:radial-gradient(120% 80% at 50% 40%,rgba(20,10,44,.86),rgba(6,7,15,.95));
  color:#fff;
}
.sg-live-state b{font-size:16px;font-weight:800}
.sg-live-state span{font-size:13px;color:rgba(255,255,255,.72);max-width:30ch}
.sg-live-state .sg-live-state-actions{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;margin-top:4px}
.sg-live-state button{
  min-height:42px;padding:0 20px;border-radius:999px;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.08);color:#fff;font-weight:700;cursor:pointer;
}
.sg-live-state button.is-primary{
  border-color:transparent;
  background:linear-gradient(135deg,#ff488c,var(--violet, #8b5cff));
}
.sg-live-state .sg-live-state-icon{font-size:40px;line-height:1}

.sg-live-warn{
  position:absolute;
  inset-block-start:calc(var(--sa-t,0px) + 104px);
  inset-inline-start:50%;
  transform:translate3d(-50%,0,0);
  z-index:9;
  padding:6px 14px;border-radius:999px;
  background:rgba(255,138,0,.9);color:#1a1206;
  font-size:12px;font-weight:800;white-space:nowrap;
}
.sg-live-warn[hidden]{display:none}

.sg-live-summary{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;
  margin:12px 0;
}
.sg-live-summary div{
  padding:12px;border-radius:var(--r-md,14px);
  background:rgba(255,255,255,.05);
  border:1px solid var(--line,rgba(255,255,255,.1));
  text-align:center;
}
.sg-live-summary b{display:block;font-size:20px;font-weight:900}
.sg-live-summary small{font-size:11px;color:var(--muted,#9aa0b5)}

/* ---------------------------------------------------------------------
   9. Height + safe-area correctness for everything added above.
   --------------------------------------------------------------------- */
.live-watch-screen,.live-creator-screen{ min-height:100dvh }
.sg-gift-layer,.sg-join-layer,.sg-top-gifters,.sg-combo-chip{
  padding-inline-start:var(--sa-l,0px);
  padding-inline-end:var(--sa-r,0px);
}

/* ---------------------------------------------------------------------
   10. REDUCED MOTION — the gift still registers, it just doesn't fly.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .sg-gift-fly,
  .sg-gift-burst,
  .sg-combo-chip,
  .sg-combo-chip.is-bump,
  .sg-join-toast,
  .sg-swipe-hint{
    animation:none !important;
    transform:none !important;
    opacity:1 !important;
  }
  .sg-gift-fly{
    position:relative;
    inset-block-start:auto;
    margin:6px 0 0 auto;
    inline-size:max-content;
  }
  .sg-gift-layer{
    display:flex;flex-direction:column;align-items:flex-end;
    justify-content:flex-start;
    padding:calc(var(--sa-t,0px) + 96px) 12px 0;
  }
  .sg-gift-burst{position:static;font-size:34px;align-self:center}
  .sg-swipe-veil{transition:none}
  .live-watch-player.sg-settling{transition:none}
}

/* v139.13 — LIVE overlays never sit on top of text
   · gift banners: solid background so chat text behind them doesn't show through
   · "joined": already written in the chat as a grey line, so the floating
     pill that covered the chat is no longer shown */
.sg-gift-fly { background: rgba(12, 12, 22, .92) !important; }
.sg-join-layer { display: none !important; }
.sg-top-gifters { background: rgba(6, 7, 15, .82) !important; }

/* ======== v139.14 — LIVE, high-end layout ======== */

/* TOP strip: compact, on the RIGHT, level with the host card (left = host) */
.sg-top-gifters { inset-inline-start: auto !important; inset-inline-end: 10px !important; max-width: 46% !important;
  padding: 4px 6px !important; gap: 4px !important; }
.sg-top-gifters .sg-gifter b, .sg-top-gifters .sg-gifter small, .sg-top-gifters .sg-gifter .sg-rank { display: none !important; }
.sg-top-gifters .sg-gifter { padding: 0 !important; background: none !important; border: 0 !important; margin-inline-start: -6px; }
.sg-top-gifters .sg-gifter:first-of-type { margin-inline-start: 0; }
.sg-top-gifters .sg-gifter img, .sg-top-gifters .sg-gifter i { width: 28px !important; height: 28px !important; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.85); }
.sg-top-gifters .sg-gifter[data-rank="1"] img, .sg-top-gifters .sg-gifter[data-rank="1"] i { border-color: #ffcc4d; }
.sg-top-gifters .sg-gifter[data-rank="2"] img, .sg-top-gifters .sg-gifter[data-rank="2"] i { border-color: #d7dee8; }
.sg-top-gifters .sg-gifter[data-rank="3"] img, .sg-top-gifters .sg-gifter[data-rank="3"] i { border-color: #e2925a; }

/* BIG gift in the middle (epic / legendary) */
.sg-big-gift { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; align-content: center; gap: 14px;
  pointer-events: none; animation: sg-big-life var(--sg-big-ms, 3000ms) ease forwards; }
.sg-big-art { position: relative; width: min(62vw, 300px); aspect-ratio: 1; display: grid; place-items: center;
  animation: sg-big-in .6s cubic-bezier(.2,1.4,.4,1) both; filter: drop-shadow(0 10px 40px rgba(0,0,0,.6)); }
.sg-big-art .sg-big-img, .sg-big-art img { width: 100%; height: 100%; object-fit: contain; }
.sg-big-emoji { font-size: min(40vw, 180px); line-height: 1; }
.sg-big-rays { position: absolute; left: 50%; top: 50%; width: min(120vw, 560px); aspect-ratio: 1; transform: translate(-50%, -58%);
  background: radial-gradient(circle, rgba(255,214,102,.42) 0%, rgba(255,46,209,.18) 34%, transparent 66%);
  animation: sg-big-glow 1.6s ease-in-out infinite alternate; }
.sg-big-gift.tier-epic .sg-big-rays { background: radial-gradient(circle, rgba(139,92,255,.45) 0%, rgba(0,216,255,.16) 36%, transparent 66%); }
.sg-big-who { position: relative; display: grid; justify-items: center; gap: 2px; padding: 8px 18px; border-radius: 999px;
  background: rgba(10,10,20,.82); color: #fff; animation: sg-big-in .5s .2s cubic-bezier(.2,1.2,.4,1) both; }
.sg-big-who b { font-size: 16px; max-width: 70vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-big-who small { font-size: 12.5px; opacity: .8; }
@keyframes sg-big-in { from { transform: scale(.3) translateY(40px); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes sg-big-glow { from { opacity: .65; transform: translate(-50%, -58%) scale(.92) } to { opacity: 1; transform: translate(-50%, -58%) scale(1.06) } }
@keyframes sg-big-life { 0%, 82% { opacity: 1 } 100% { opacity: 0; transform: scale(1.06) } }
@media (prefers-reduced-motion: reduce) { .sg-big-art, .sg-big-who, .sg-big-rays { animation: none !important; } }

/* Top contributors: a sheet that SLIDES UP from the bottom */
.modal-backdrop.sg-slide-sheet { align-items: flex-end !important; justify-content: stretch !important; padding: 0 !important; }
.modal-backdrop.sg-slide-sheet .modal { width: 100% !important; max-width: 640px; margin: 0 auto; max-height: 72vh; overflow-y: auto;
  border-radius: 24px 24px 0 0 !important; padding-bottom: calc(18px + env(safe-area-inset-bottom)) !important;
  animation: sg-sheet-up .28s cubic-bezier(.2,.9,.3,1); transition: transform .2s ease; }
.sg-sheet-grip { width: 42px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.35); margin: 2px auto 12px; }
@keyframes sg-sheet-up { from { transform: translateY(100%) } to { transform: none } }

/* v139.14 — coins burst out around a big gift */
.sg-big-coins { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: translateY(-40px); }
.sg-big-coin { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; opacity: 0;
  animation: sg-coin-fly 1.5s var(--d, 0ms) cubic-bezier(.15,.8,.3,1) forwards; filter: drop-shadow(0 3px 8px rgba(0,0,0,.5)); }
@keyframes sg-coin-fly {
  0%   { transform: translate(0, 0) scale(.3) rotate(0); opacity: 0 }
  15%  { opacity: 1 }
  70%  { transform: translate(var(--x), var(--y)) scale(1) rotate(var(--r)); opacity: 1 }
  100% { transform: translate(calc(var(--x) * 1.1), calc(var(--y) * 1.1 + 60px)) scale(.8) rotate(var(--r)); opacity: 0 }
}
@media (prefers-reduced-motion: reduce) { .sg-big-coin { display: none; } }

/* v139.14 — LIVE chat always readable over the video (and while typing) */
.live-watch-screen .live-chat-message { background: rgba(0, 0, 0, .42); border-radius: 14px; padding: 3px 10px 3px 4px; width: fit-content; max-width: 86%; }
.live-watch-screen .live-chat-system { background: rgba(0, 0, 0, .32); border-radius: 12px; padding: 2px 10px; width: fit-content; }