/* TikTok audio introduction: one compact trigger and one in-page floating player. */
.medal-pick-copy { color: inherit; text-decoration: none; }
.medal-tiktok-button {
  position: absolute;
  right: 10.1rem;
  bottom: .58rem;
  display: inline-flex;
  align-items: center;
  gap: .32rem;
  min-height: 1.68rem;
  padding: .22rem .55rem .22rem .27rem;
  border: 1px solid color-mix(in srgb, var(--rank-tone) 72%, transparent);
  border-radius: 999px;
  color: #f5eaff;
  background: linear-gradient(100deg, rgba(255,44,133,.25), rgba(129,76,255,.2));
  box-shadow: 0 0 13px color-mix(in srgb, var(--rank-tone) 24%, transparent);
  cursor: pointer;
  z-index: 2;
}
.medal-tiktok-button > span {
  display: grid;
  place-items: center;
  width: 1.12rem;
  height: 1.12rem;
  border-radius: 50%;
  color: #fff;
  font-size: .52rem;
  background: linear-gradient(145deg, #ff2c85, #8d52ff);
  box-shadow: 0 0 9px rgba(255,44,133,.48);
}
.medal-tiktok-button small { font-size: .56rem; font-weight: 700; white-space: nowrap; }
.medal-tiktok-button.is-unavailable {
  color: #918aa1;
  border-color: rgba(151,140,171,.28);
  background: rgba(110,102,130,.08);
  box-shadow: none;
  cursor: default;
}
.medal-tiktok-button.is-unavailable > span { background: #514b5f; box-shadow: none; color: #aaa2b6; }
.medal-tiktok-button:hover,
.medal-tiktok-button:focus-visible { outline: 0; transform: translateY(-1px); box-shadow: 0 0 18px rgba(220,91,255,.45); }

.tiktok-story-player {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  width: min(23rem, calc(100vw - 28px));
  z-index: 1300;
  opacity: 0;
  transform: translateY(18px) scale(.98);
  transition: opacity .22s ease, transform .22s ease;
}
.tiktok-story-player.is-ready { opacity: 1; transform: none; }
.tiktok-story-preview {
  position: relative;
  width: min(11.2rem, 46vw);
  aspect-ratio: 9 / 16;
  margin: 0 0 .55rem auto;
  overflow: hidden;
  border: 1px solid rgba(234,125,255,.7);
  border-radius: 17px;
  background: #05050a;
  box-shadow: 0 0 0 1px rgba(104,217,238,.15), 0 0 28px rgba(210,66,255,.34), 0 18px 48px rgba(0,0,0,.62);
  transform-origin: bottom right;
  transition: opacity .18s ease, transform .22s ease, max-height .22s ease, margin .22s ease;
}
.tiktok-story-preview iframe { display: block; width: 100%; height: 100%; border: 0; }
.tiktok-story-minimize {
  position: absolute;
  top: .38rem;
  right: .38rem;
  width: 1.7rem;
  height: 1.7rem;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 50%;
  color: #fff;
  background: rgba(4,5,12,.7);
  z-index: 2;
}
.tiktok-story-tag {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto auto auto auto;
  align-items: center;
  gap: .5rem;
  min-height: 3.05rem;
  padding: .4rem .48rem;
  border: 1px solid rgba(210,125,255,.52);
  border-radius: 999px;
  color: #f8f4ff;
  background: linear-gradient(105deg, rgba(21,18,39,.97), rgba(9,15,29,.98));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 0 24px rgba(188,74,255,.27), 0 13px 34px rgba(0,0,0,.48);
  backdrop-filter: blur(18px);
}
.tiktok-story-tag img { width: 2.15rem; height: 2.15rem; border-radius: 50%; object-fit: cover; border: 1px solid rgba(255,255,255,.24); }
.tiktok-story-play,
.tiktok-story-sound,
.tiktok-story-video-toggle,
.tiktok-story-close { border: 0; color: #fff; background: transparent; cursor: pointer; }
.tiktok-story-play { display: inline-flex; align-items: center; justify-content: center; gap: .28rem; min-width: 5.6rem; height: 2.05rem; padding: 0 .65rem; border-radius: 999px; background: linear-gradient(135deg, #d526c9, #7e45e9); box-shadow: 0 0 14px rgba(218,44,205,.34); }
.tiktok-story-play span { font-size: .62rem; }
.tiktok-story-play small { font-size: .53rem; font-weight: 800; white-space: nowrap; }
.tiktok-story-play:disabled { opacity: .48; box-shadow: none; cursor: wait; }
.tiktok-story-sound { width: 2.05rem; height: 2.05rem; border-radius: 50%; font-size: .82rem; background: rgba(255,255,255,.08); }
.tiktok-story-sound:disabled { opacity: .4; }
.tiktok-story-video-toggle { display: inline-flex; align-items: center; gap: .22rem; min-width: 4.5rem; height: 1.85rem; padding: 0 .52rem; border-radius: 999px; color: #e7d8ff; background: rgba(151,92,235,.18); }
.tiktok-story-video-toggle span { font-size: .8rem; }
.tiktok-story-video-toggle small { font-size: .5rem; font-weight: 700; white-space: nowrap; }
.tiktok-story-close { width: 1.85rem; height: 1.85rem; font-size: 1.45rem; color: #d9d0e8; }
.tiktok-story-copy { min-width: 0; }
.tiktok-story-copy b,
.tiktok-story-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tiktok-story-copy b { font-family: var(--serif); font-size: .84rem; font-weight: 600; }
.tiktok-story-copy small { margin-top: .06rem; color: #a99cbd; font-size: .52rem; }
.tiktok-story-live { color: #ffc6ef; font-size: .52rem; white-space: nowrap; }
.tiktok-story-live i { display: inline-block; width: .35rem; height: .35rem; margin-right: .18rem; border-radius: 50%; background: #ff3d98; box-shadow: 0 0 8px #ff3d98; animation: tiktokLive 1.3s ease-in-out infinite; }
.tiktok-story-player.is-minimized .tiktok-story-preview {
  position: fixed !important;
  right: 0;
  bottom: 0;
  width: 180px !important;
  height: 320px !important;
  max-height: none !important;
  aspect-ratio: 9 / 16 !important;
  margin: 0 !important;
  opacity: 0 !important;
  clip-path: inset(100%);
  transform: none !important;
  pointer-events: none;
}
@keyframes tiktokLive { 50% { opacity: .35; transform: scale(.72); } }

@media (max-width: 760px) {
  .medal-tiktok-button { position: static; grid-column: 3 / 5; grid-row: 3; justify-self: stretch; justify-content: center; align-self: start; width: 100%; min-height: 1.72rem; padding: .2rem .5rem; margin-top: .1rem; }
  .medal-tiktok-button small { display: inline; font-size: .58rem; }
  .medal-tiktok-button > span { width: 1.12rem; height: 1.12rem; }
  #app .medal-pick-stats { grid-column: 3 / 5 !important; }
  .tiktok-story-player { left: 50%; right: auto; bottom: max(12px, env(safe-area-inset-bottom)); transform: translate(-50%,18px) scale(.98); }
  .tiktok-story-player.is-ready { transform: translateX(-50%); }
  .tiktok-story-preview { width: min(10rem, 43vw); }
  .tiktok-story-live { display: none; }
  .tiktok-story-tag { grid-template-columns: auto minmax(0,1fr) auto auto auto auto; gap: .32rem; }
  .tiktok-story-video-toggle { min-width: 2.05rem; width: 2.05rem; padding: 0; justify-content: center; }
  .tiktok-story-video-toggle small { display: none; }
  .tiktok-story-play { min-width: 4.8rem; padding: 0 .48rem; }
}
@media (min-width: 900px) and (orientation: landscape), (min-width: 1100px){
  .home-desktop-side .medal-tiktok-button { position: static; grid-column: 3; grid-row: 3; justify-self: stretch; justify-content: center; width: 100%; margin-top: .2rem; }
  .home-desktop-side .medal-tiktok-button small { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
  .tiktok-story-player, .tiktok-story-preview, .tiktok-story-live i { transition: none; animation: none; }
}