/* ============================================================
   CS2 LIVE FEED — STYLES
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=Orbitron:wght@700;900&display=swap');

:root {
  --lf-bg:       #07090f;
  --lf-surface:  rgba(255,255,255,0.04);
  --lf-border:   rgba(255,255,255,0.07);
  --lf-cyan:     #00e5ff;
  --lf-height:   90px;

  --rarity-consumer:   #9e9e9e;
  --rarity-industrial: #5e98d9;
  --rarity-mil-spec:   #4b69ff;
  --rarity-restricted: #8847ff;
  --rarity-classified: #d32ce6;
  --rarity-covert:     #eb4b4b;
  --rarity-gold:       #ffd700;
}

/* ── WRAPPER ── */
.cs2lf-wrap {
  width: 100%;
  background: var(--lf-bg);
  border-top: 1px solid var(--lf-border);
  border-bottom: 1px solid var(--lf-border);
  font-family: 'Rajdhani', sans-serif;
  overflow: hidden;
  position: relative;
  user-select: none;
}

/* ── HEADER BAR ── */
.cs2lf-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px 4px;
  background: rgba(0,0,0,.4);
  border-bottom: 1px solid var(--lf-border);
}

.cs2lf-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff3b3b;
  box-shadow: 0 0 8px #ff3b3b, 0 0 16px rgba(255,59,59,.5);
  animation: livePulse 1.4s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes livePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .5; transform: scale(.8); }
}

.cs2lf-title {
  font-family: 'Orbitron', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .25em;
  color: rgba(255,255,255,.45);
  text-transform: uppercase;
}

/* ── TRACK WRAP ── */
.cs2lf-track-wrap {
  position: relative;
  height: var(--lf-height, 90px);
  overflow: hidden;
}

/* Fade edges */
.cs2lf-fade-left,
.cs2lf-fade-right {
  position: absolute;
  top: 0; bottom: 0;
  width: 100px;
  pointer-events: none;
  z-index: 10;
}
.cs2lf-fade-left  { left:  0; background: linear-gradient(to right, var(--lf-bg), transparent); }
.cs2lf-fade-right { right: 0; background: linear-gradient(to left,  var(--lf-bg), transparent); }

/* ── TRACK ── */
.cs2lf-track {
  display: flex;
  align-items: center;
  height: 100%;
  will-change: transform;
  /* JS sets animation */
}

/* ── ITEM ── */
.cs2lf-item {
  flex: 0 0 auto;
  width: 200px;
  height: calc(var(--lf-height, 90px) - 12px);
  margin: 0 4px;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  border: 1px solid transparent;
  transition: border-color .2s;
  cursor: default;
}

/* Rarity border */
.cs2lf-item.rarity-consumer   { border-color: rgba(158,158,158,.2); }
.cs2lf-item.rarity-industrial { border-color: rgba(94,152,217,.25); }
.cs2lf-item.rarity-mil-spec   { border-color: rgba(75,105,255,.3); }
.cs2lf-item.rarity-restricted { border-color: rgba(136,71,255,.35); }
.cs2lf-item.rarity-classified { border-color: rgba(211,44,230,.4); box-shadow: 0 0 12px rgba(211,44,230,.15); }
.cs2lf-item.rarity-covert     { border-color: rgba(235,75,75,.45); box-shadow: 0 0 14px rgba(235,75,75,.2); }
.cs2lf-item.rarity-gold       { border-color: rgba(255,215,0,.5);  box-shadow: 0 0 18px rgba(255,215,0,.25); animation: goldGlow 2s ease-in-out infinite; }

@keyframes goldGlow {
  0%, 100% { box-shadow: 0 0 18px rgba(255,215,0,.25); }
  50%       { box-shadow: 0 0 30px rgba(255,215,0,.5);  }
}

/* Rarity bottom glow */
.cs2lf-item-glow {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 0 0 6px 6px;
  pointer-events: none;
}
.rarity-consumer   .cs2lf-item-glow { background: var(--rarity-consumer); }
.rarity-industrial .cs2lf-item-glow { background: var(--rarity-industrial); }
.rarity-mil-spec   .cs2lf-item-glow { background: var(--rarity-mil-spec); }
.rarity-restricted .cs2lf-item-glow { background: var(--rarity-restricted); }
.rarity-classified .cs2lf-item-glow { background: var(--rarity-classified); box-shadow: 0 0 8px var(--rarity-classified); }
.rarity-covert     .cs2lf-item-glow { background: var(--rarity-covert);     box-shadow: 0 0 10px var(--rarity-covert); }
.rarity-gold       .cs2lf-item-glow { background: var(--rarity-gold);       box-shadow: 0 0 12px var(--rarity-gold); }

/* Item background tint */
.cs2lf-item.rarity-consumer   { background: rgba(158,158,158,.04); }
.cs2lf-item.rarity-industrial { background: rgba(94,152,217,.05); }
.cs2lf-item.rarity-mil-spec   { background: rgba(75,105,255,.06); }
.cs2lf-item.rarity-restricted { background: rgba(136,71,255,.07); }
.cs2lf-item.rarity-classified { background: rgba(211,44,230,.08); }
.cs2lf-item.rarity-covert     { background: rgba(235,75,75,.09); }
.cs2lf-item.rarity-gold       { background: rgba(255,215,0,.08); }

/* Item inner layout */
.cs2lf-item-inner {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 6px 10px 8px 8px;
  gap: 8px;
}

/* Image */
.cs2lf-img-wrap {
  flex: 0 0 auto;
  width: 56px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cs2lf-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 4px rgba(255,255,255,.15));
}
.cs2lf-img-placeholder {
  font-size: 22px;
  color: rgba(255,255,255,.2);
}

/* Info */
.cs2lf-item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.cs2lf-item-user {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .05em;
  color: rgba(255,255,255,.38);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cs2lf-item-name {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  color: rgba(255,255,255,.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.cs2lf-item-rarity {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Rarity label colors */
.rarity-label-consumer   { color: var(--rarity-consumer); }
.rarity-label-industrial { color: var(--rarity-industrial); }
.rarity-label-mil-spec   { color: var(--rarity-mil-spec); }
.rarity-label-restricted { color: var(--rarity-restricted); }
.rarity-label-classified { color: var(--rarity-classified); }
.rarity-label-covert     { color: var(--rarity-covert); }
.rarity-label-gold       { color: var(--rarity-gold); }

/* ── EMPTY STATE ── */
.cs2lf-empty {
  padding: 20px;
  text-align: center;
  font-family: 'Rajdhani', sans-serif;
  font-size: 14px;
  color: rgba(255,255,255,.3);
  background: var(--lf-bg);
}

/* ── NEW ITEM POP ANIMATION ── */
@keyframes itemPop {
  0%   { opacity: 0; transform: scale(.85) translateY(6px); }
  60%  { transform: scale(1.04) translateY(-2px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.cs2lf-item.cs2lf-new {
  animation: itemPop .45s cubic-bezier(.34,1.56,.64,1) forwards;
}

/* ── PAUSE on hover ── */
.cs2lf-track-wrap:hover .cs2lf-track {
  animation-play-state: paused !important;
}

/* ── RESPONSIVE ── */
@media (max-width: 600px) {
  .cs2lf-item { width: 160px; }
  .cs2lf-img-wrap { width: 44px; height: 34px; }
  .cs2lf-fade-left, .cs2lf-fade-right { width: 50px; }
}