.dropsLive{
  background:
    radial-gradient(1100px 320px at 20% -20%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(900px 260px at 80% 0%, rgba(255,255,255,.07), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(0,0,0,.04)),
    var(--card);
  border:1px solid var(--span-low);
  border-radius:var(--br-16);
  padding:16px;
  box-shadow:var(--box-shadow-b-30);
  position:relative;
  overflow:hidden
}

.dropsLive__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px
}

.dropsLive__title{
  user-select:none;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:var(--font-size-default);
  font-weight:var(--font-weight-6);
  color:var(--text-default)
}

.dropsLive__badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:var(--br-12);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color:var(--text-default);
  font-size:var(--font-size-s);
  font-weight:var(--font-weight-5)
}

.dropsLive__meta{
  font-size:var(--font-size-s);
  color:var(--text-default);
  opacity:.82;
  white-space:nowrap;
  margin-bottom:8px
}

.dropsLive__viewport{
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  border-radius:var(--br-12);
  background:linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.10));
  padding:14px;
  cursor:grab;
  scrollbar-width:none;
  overscroll-behavior:contain;
  -ms-overflow-style:none;
  position:relative;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x;
  isolation:isolate;
  transform:translateZ(0)
}


.dropsLive__viewport.is-dragging{cursor:grabbing}
.dropsLive__viewport::-webkit-scrollbar{display:none}

.dropsLive__viewport:before,
.dropsLive__viewport:after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:34px;
  pointer-events:none;
  z-index:3;
  opacity:.9;
  filter:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none
}

.dropsLive__viewport:before{
  left:0;
  background:linear-gradient(90deg, rgba(0,0,0,.38), rgba(0,0,0,0))
}

.dropsLive__viewport:after{
  right:0;
  background:linear-gradient(270deg, rgba(0,0,0,.38), rgba(0,0,0,0))
}

.dropsLive__track{
  display:flex;
  flex-direction:row;
  gap:0;
  align-items:stretch;
  width:max-content;
  will-change:transform;
  transform:translate3d(0,0,0);
  backface-visibility:hidden;
  position:relative;
  z-index:1
}

.dropsLive__lane{
  display:flex;
  flex-direction:row;
  gap:12px;
  align-items:stretch;
  padding-right:12px;
  width:max-content
}

.dropsLive__lane_clone{
  display:none;

}

.dropsLive__card{
  flex:0 0 auto;
  width:320px;
  max-width:360px;
  border:1px solid var(--dl-accent, rgba(255,255,255,.10));
  border-radius:var(--br-12);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
  box-shadow:0 10px 28px rgba(0,0,0,.16);
  transition:transform 180ms ease, border-color 180ms ease, background 180ms ease;
  filter:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none
}


.dropsLive__card:hover{
  transform:translate3d(0,-1px,0);
  border-color:var(--dl-accent, rgba(255,255,255,.16));
  background:linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.03))
}

.dropsLive__user{
  user-select:none;
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0
}

.dropsLive__avatar{
  width:34px;
  height:34px;
  border-radius:50%;
  display:block;
  flex:0 0 auto
}

.dropsLive__avatar--empty{
  background:rgba(255,255,255,.06);
  border:1px solid var(--span-low)
}

.dropsLive__nick{
  font-weight:var(--font-weight-6);
  color:var(--text-default);
  text-decoration:none;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
  max-width:250px;
  border-radius:10px
}

.dropsLive__nick:hover{text-decoration:underline}

.dropsLive__nick:focus-visible{
  outline:2px solid var(--span);
  outline-offset:2px;
  text-decoration:none
}

.dropsLive__itemRow{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0
}

.dropsLive__itemIcon--empty{opacity:.55}

.dropsLive__itemIcon{
  width:52px;
  height:52px;
  border-radius:var(--br-12);
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.14));
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--dl-accent, rgba(255,255,255,.82));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)
}

.dropsLive__itemIcon svg{
  width:34px;
  height:34px;
  display:block
}

.dropsLive__itemIcon svg *{
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  fill:none;
  vector-effect:non-scaling-stroke
}


.dropsLive__itemIcon svg .dl-fill{
  fill:currentColor;
  stroke:none
}

.dropsLive__item{
  color:var(--text-default);
  opacity:.92;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0
}

.dropsLive__foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:auto
}

.dropsLive__rarity{
  user-select:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:var(--br-12);
  font-size:var(--font-size-s);
  font-weight:var(--font-weight-6);
  border:1px solid rgba(255,255,255,.10);
  color:var(--dl-accent, var(--text-default));
  text-transform:uppercase;
  letter-spacing:.04em;
  white-space:nowrap;
  background:linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.10))
}

.dropsLive__time{
  font-size:var(--font-size-s);
  color:var(--text-default);
  opacity:.78;
  white-space:nowrap
}

.dropsLive__empty{
  padding:12px;
  border-radius:var(--br-12);
  background:rgba(255,255,255,.04);
  border:1px dashed var(--span-low);
  color:var(--text-default);
  opacity:.88
}

.dropsLive__err{
  padding:12px;
  border-radius:var(--br-12);
  background:rgba(255,255,255,.04);
  border:1px solid var(--span-low);
  color:var(--text-default);
  opacity:.92
}

.dropsLive__sub{margin-top:14px}

.dropsLive__subhead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin:12px 0 10px
}

.dropsLive__title--sub{font-size:var(--font-size-default)}

.dropsLive__subMeta{
  display:flex;
  align-items:flex-end;
  gap:14px
}

.dropsLive__hintBtn{
  appearance:none;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.10));
  color:var(--text-default);
  opacity:.86;
  border-radius:var(--br-12);
  width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding:0;
  user-select:none
}

.dropsLive__hintBtn:hover{opacity:1}

.dropsLive__hintBtn:focus-visible{
  outline:2px solid var(--span);
  outline-offset:2px
}

.dropsLive__hintI{
  font-size:var(--font-size-default);
  font-weight:var(--font-weight-7);
  line-height:1
}

.dropsLive__viewport--prizes{min-height:124px}
.dropsLive__card--prize{width:292px}

.dropsLive__who{
  font-size:var(--font-size-xs);
  font-weight:var(--font-weight-6);
  color:var(--text-default);
  opacity:.86;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:170px;
  padding:6px 10px;
  border-radius:var(--br-12);
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.10));
  text-transform:uppercase;
  letter-spacing:.04em
}

@media (prefers-reduced-motion: reduce){
  .dropsLive__card{transition:none}
}

@media (hover: none){
  .dropsLive__viewport{cursor:auto}
}

@media (max-width: 900px){
  .dropsLive__head{flex-direction:column;align-items:flex-start}
  .dropsLive__meta{white-space:normal}
  .dropsLive__card{width:286px}
  .dropsLive__subhead{flex-direction:column;align-items:flex-start}
  .dropsLive__subMeta{align-items:flex-start}
  .dropsLive__viewport{scroll-snap-type:x proximity}
  .dropsLive__card{scroll-snap-align:start}
  .dropsLive__viewport:before,
  .dropsLive__viewport:after{width:34px}
  .dropsLive__who{letter-spacing:.02em}
}