/* ShotGram 1.3.7 — supporter levels: pills, level page, celebrations */

/* ---- the pill (TikTok shape: rounded tag, 3D gem, bold number) ---- */
.sg-lvl { display: inline-flex; align-items: center; gap: 3px; height: 18px; padding: 0 6px 0 3px; margin-inline-end: 4px;
  border-radius: 6px; font: 800 11.5px/1 Inter, system-ui, sans-serif; font-style: normal; color: #fff; vertical-align: middle;
  flex: none; direction: ltr; box-shadow: inset 0 1px 0 rgba(255,255,255,.22); }
.sg-lvl .sg-gem { width: 14px; height: 14px; flex: none; filter: drop-shadow(0 1px 1px rgba(0,0,0,.35)); }
.sg-lvl b { font-weight: 800; letter-spacing: .2px; text-shadow: 0 1px 1px rgba(0,0,0,.25); }
.sg-lvl.t1 { background: linear-gradient(180deg, #5a7dff, #3651d9); }
.sg-lvl.t2 { background: linear-gradient(180deg, #2fa8ff, #2263e0); }
.sg-lvl.t3 { background: linear-gradient(180deg, #7b4dff, #4d22c9); }
.sg-lvl.t4 { background: linear-gradient(180deg, #6a3dff, #3d17b8); box-shadow: inset 0 0 0 1.2px #ffcf4d; }
.sg-lvl.t5 { background: linear-gradient(180deg, #a23dff, #6a1fc9); box-shadow: inset 0 0 0 1.2px #ffcf4d; }
.sg-lvl.t6 { background: linear-gradient(90deg, #00b8e6, #8b5cff 50%, #ff3db8); box-shadow: inset 0 0 0 1.4px #ffd75e; }
.sg-lvl.big { height: 28px; padding: 0 10px 0 5px; border-radius: 9px; font-size: 17px; gap: 5px; }
.sg-lvl.big .sg-gem { width: 22px; height: 22px; }
.sg-gcard .sg-lvl { height: 16px; font-size: 10.5px; }
.sg-gcard .sg-lvl .sg-gem { width: 12px; height: 12px; }

/* gold name for level 40+ in LIVE chat */
html body :is(#liveChatList, #creatorChatList) .ltt-name.lvl-gold { color: #ffd75e !important; }

/* ---- level-up celebration + entrance spotlight lines in the chat ---- */
html body .live-chat-system.levelup, html body .live-chat-system.spot,
html body .live-tt :is(#liveChatList, #creatorChatList) > .live-chat-system:is(.levelup, .spot) {
  display: inline-flex !important; align-items: center; gap: 6px; width: max-content; max-width: 92%;
  padding: 5px 12px 5px 8px !important; border-radius: 999px !important; color: #fff !important; font-weight: 700;
  background: linear-gradient(90deg, rgba(139,92,255,.9), rgba(255,61,184,.75)) !important; text-shadow: none !important;
}
html body .live-chat-system.spot, html body .live-tt :is(#liveChatList, #creatorChatList) > .live-chat-system.spot { background: linear-gradient(90deg, rgba(0,184,230,.85), rgba(139,92,255,.75)) !important; }
html body .live-chat-system.levelup > svg:first-child, html body .live-chat-system.spot > svg:first-child { display: none; }
html body .live-chat-system .sg-gem { width: 18px; height: 18px; }

/* ---- the level page ---- */
.slv-wrap { position: fixed; inset: 0; z-index: 2700; background: rgba(0,0,0,0); transition: background .22s; }
.slv-wrap.open { background: rgba(0,0,0,.5); }
.slv { position: absolute; left: 0; right: 0; bottom: 0; height: min(86dvh, 820px); overflow-y: auto; overscroll-behavior: contain;
  color: #fff; border-radius: 24px 24px 0 0; transform: translateY(100%); transition: transform .24s cubic-bezier(.2,.9,.3,1);
  background: radial-gradient(120% 60% at 30% 0%, #3a1d7a 0%, #1a1240 45%, #0c0b1f 100%);
  padding: 18px 0 calc(24px + env(safe-area-inset-bottom, 0px)); }
.slv-wrap.open .slv { transform: none; }
@media (min-width: 900px) and (pointer: fine) { .slv { left: 50%; right: auto; width: 480px; transform: translate(-50%, 100%); } .slv-wrap.open .slv { transform: translate(-50%, 0); } }
.slv-x { position: absolute; top: 12px; inset-inline-end: 14px; width: 34px; height: 34px; border-radius: 50%; border: 0;
  background: rgba(255,255,255,.1); color: #fff; font-size: 22px; line-height: 1; }
.slv-head { display: flex; align-items: center; gap: 14px; padding: 6px 22px 18px; }
.slv-head .avatar { width: 64px !important; height: 64px !important; box-shadow: 0 0 0 2px rgba(255,255,255,.25); }
.slv-head > div { display: grid; gap: 6px; justify-items: start; min-width: 0; }
.slv-head b { font-size: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70vw; }
.slv-head small { color: #c6c3e8; font-size: 13px; }
.slv-track { display: flex; align-items: center; padding: 6px 18px 18px; direction: ltr; }
.slv-dot { position: relative; flex: none; width: 40px; height: 40px; display: grid; place-items: center; border: 0; background: none; padding: 0; opacity: .45; filter: grayscale(.4); }
.slv-dot.got { opacity: 1; filter: none; }
.slv-dot.on::after { content: ''; position: absolute; bottom: -8px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #fff; }
.slv-line { flex: 1; height: 1.5px; background: linear-gradient(90deg, rgba(255,255,255,.35), rgba(255,255,255,.12)); margin: 0 4px; }
.slv-cards { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px 22px 6px; scrollbar-width: none; direction: ltr; }
.slv-cards::-webkit-scrollbar { display: none; }
.slv-card { position: relative; flex: 0 0 calc(100% - 20px); scroll-snap-align: center; min-height: 230px; border-radius: 22px; padding: 22px 22px 20px;
  display: flex; flex-direction: column; justify-content: flex-end; overflow: visible; box-shadow: inset 0 1px 0 rgba(255,255,255,.18); }
.slv-card.c1 { background: linear-gradient(135deg, #5b7cff, #3a3fbf 60%, #2b2a8f); }
.slv-card.c2 { background: linear-gradient(135deg, #3aa7ff, #3b4fe0 60%, #3a2ab0); }
.slv-card.c3 { background: linear-gradient(135deg, #7a5cff, #5a2fe0 60%, #3d1aa8); }
.slv-card.c4 { background: linear-gradient(135deg, #8a5cff, #5d2be0 55%, #3d14a8); box-shadow: inset 0 0 0 1.5px rgba(255,207,77,.55); }
.slv-card.c5 { background: linear-gradient(135deg, #b04dff, #7a23d8 55%, #4a118f); box-shadow: inset 0 0 0 1.5px rgba(255,207,77,.6); }
.slv-card.c6 { background: linear-gradient(135deg, #00b8e6, #8b5cff 50%, #ff3db8); box-shadow: inset 0 0 0 2px rgba(255,215,94,.8); }
.slv-card.locked { filter: saturate(.85); }
.slv-roman { position: absolute; top: 18px; left: 22px; display: flex; align-items: center; gap: 4px; }
.slv-roman b { font: italic 900 54px/1 Inter, system-ui, sans-serif; letter-spacing: -2px; text-shadow: 0 3px 0 rgba(0,0,0,.18); }
.slv-roman .lau { font-style: normal; font-size: 26px; color: rgba(255,255,255,.7); }
.slv-roman .lau.r { transform: scaleX(-1); }
.slv-range { position: absolute; top: 84px; left: 24px; font-size: 15px; font-weight: 700; color: rgba(255,255,255,.62); }

.slv-big { position: absolute; top: 14px; right: 14px; filter: drop-shadow(0 10px 18px rgba(0,0,0,.35)); }
.slv-msg { font-size: 16px; font-weight: 700; color: rgba(255,255,255,.88); margin-top: 120px; }
.slv-msg.dim { color: rgba(255,255,255,.7); font-weight: 600; font-size: 14px; }
.slv-prog { margin-top: 110px; font-size: 14px; color: rgba(255,255,255,.7); }
.slv-prog b { font-size: 26px; color: #fff; font-weight: 800; }
.slv-bar { height: 6px; border-radius: 6px; background: rgba(255,255,255,.18); margin: 8px 0 8px; overflow: hidden; }
.slv-bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #fff, #ffd5f5); box-shadow: 0 0 10px rgba(255,255,255,.7); }
.slv-hint { font-size: 13px; color: rgba(255,255,255,.8); }
.slv-h { margin: 22px 22px 10px; font-size: 20px; }
.slv-rewards { display: grid; gap: 10px; padding: 0 18px; }
.slv-reward { position: relative; display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 14px 18px; border-radius: 16px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.06); }
.slv-reward.col { flex-direction: column; align-items: stretch; gap: 12px; }
.slv-rowtop { display: flex; align-items: center; gap: 14px; }
.slv-rl { font-weight: 800; font-size: 16px; min-width: 52px; }
.slv-rt { flex: 1; color: rgba(255,255,255,.62); font-size: 15px; font-weight: 600; }
.slv-lock { position: absolute; top: 0; left: 0; width: 26px; height: 20px; display: grid; place-items: center; border-radius: 16px 0 10px 0; background: rgba(255,255,255,.1); color: rgba(255,255,255,.55); }
.slv-demo { align-self: flex-end; display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 700; max-width: 100%; }
.slv-demo.up { background: linear-gradient(90deg, rgba(139,92,255,.9), rgba(255,61,184,.7)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.slv-demo.up b { font-size: 15px; }
.slv-demo.in { background: linear-gradient(90deg, rgba(0,184,230,.8), rgba(139,92,255,.75)); }
.slv-demo bdi { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.slv-goldname { color: #ffd75e; font-weight: 800; }
.sg-mylvl { cursor: pointer; }

.slv-big .sg-gem { width: 120px; height: 120px; }
.slv-card { min-height: 250px; }
.cp-who { display: grid; justify-items: start; gap: 3px; }
.cp-lvl:empty { display: none; }
.cp-lvl .sg-lvl { height: 22px; font-size: 13px; padding: 0 8px 0 4px; }
.cp-lvl .sg-lvl .sg-gem { width: 17px; height: 17px; }