.tongvh-steam-strip {
  --sgs-panel-bg: linear-gradient(180deg, #1b2838 0%, #162332 100%);
  --sgs-panel-edge: rgba(255,255,255,.035);
  --sgs-title: #ffffff;
  --sgs-sub: #8f98a0;
  --sgs-price: #c7d5e0;
  --sgs-gap: 12px;
  --sgs-main-width: 450px;
  --sgs-main-height: 200px;
  --sgs-thumb-height: 164px;
  --sgs-top-shadow: 0 -10px 18px -16px rgba(0,0,0,.28);
  --sgs-bottom-shadow: 0 14px 24px -18px rgba(0,0,0,.34);
  width: 100%;
  max-width: 1000px;
  margin: 26px auto;
  position: relative;
  color: var(--sgs-title);
  font-family: Arial, Helvetica, sans-serif;
}
.tongvh-steam-strip,
.tongvh-steam-strip * { box-sizing: border-box; }
.tongvh-steam-strip__panel {
  position: relative;
  background: var(--sgs-panel-bg);
  border: 1px solid var(--sgs-panel-edge);
  box-shadow: var(--sgs-top-shadow), var(--sgs-bottom-shadow);
  padding: 10px 12px 14px;
  overflow: visible;
}
.tongvh-steam-strip__header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}
.tongvh-steam-strip__header-left { min-width: 0; }
.tongvh-steam-strip__title {
  margin: 0;
  font-size: 18px;
  line-height: 1.15;
  font-weight: 400;
  color: #fff;
}
.tongvh-steam-strip__subtitle {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.25;
  color: var(--sgs-sub);
}
.tongvh-steam-strip__price {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 15px;
  line-height: 1;
  color: var(--sgs-price);
  margin-top: 2px;
}
.tongvh-steam-strip__media-row {
  display: grid;
  grid-template-columns: var(--sgs-main-width) 1fr;
  gap: var(--sgs-gap);
  align-items: center;
}
.tongvh-steam-strip__main {
  position: relative;
  display: block;
  width: 100%;
  height: var(--sgs-main-height);
  background: #101923;
  overflow: hidden;
  text-decoration: none;
  box-shadow: var(--sgs-top-shadow), var(--sgs-bottom-shadow);
}
.tongvh-steam-strip__main-image,
.tongvh-steam-strip__thumb-image,
.tongvh-steam-strip__popup-fallback,
.tongvh-steam-strip__popup-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tongvh-steam-strip__main-image {
  transition: transform .18s ease;
}
.tongvh-steam-strip__main:hover .tongvh-steam-strip__main-image,
.tongvh-steam-strip__main:focus-visible .tongvh-steam-strip__main-image {
  transform: scale(1.02);
}
.tongvh-steam-strip__thumbs {
  min-width: 0;
  height: var(--sgs-main-height);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sgs-gap);
  align-items: center;
}
.tongvh-steam-strip__thumb {
  position: relative;
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  height: var(--sgs-thumb-height);
  align-self: center;
  background: #101923;
  cursor: pointer;
  overflow: visible;
  box-shadow: var(--sgs-top-shadow), var(--sgs-bottom-shadow);
  transition: transform .18s ease, box-shadow .18s ease;
}
.tongvh-steam-strip__thumb-image {
  transition: transform .18s ease;
}
.tongvh-steam-strip__thumb:hover,
.tongvh-steam-strip__thumb:focus-visible {
  transform: scale(1.12);
  z-index: 3;
  box-shadow: 0 -10px 18px -16px rgba(0,0,0,.30), 0 18px 28px -16px rgba(0,0,0,.42);
}
.tongvh-steam-strip__thumb:hover .tongvh-steam-strip__thumb-image,
.tongvh-steam-strip__thumb:focus-visible .tongvh-steam-strip__thumb-image {
  transform: scale(1.04);
}
.tongvh-steam-strip__popup {
  position: absolute;
  top: 42px;
  right: 12px;
  z-index: 30;
  width: 320px;
  background: #e5eaef;
  color: #2b2f33;
  border: 1px solid rgba(0,0,0,.24);
  box-shadow: 0 10px 28px rgba(0,0,0,.45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s ease;
  pointer-events: none;
}
.tongvh-steam-strip.is-popup-visible .tongvh-steam-strip__popup {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.tongvh-steam-strip__popup-header {
  padding: 10px 12px 8px;
}
.tongvh-steam-strip__popup-title {
  font-size: 14px;
  line-height: 1.2;
  color: #2b2f33;
}
.tongvh-steam-strip__popup-date {
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.3;
  color: #6b6f73;
}
.tongvh-steam-strip__popup-video-wrap {
  height: 180px;
  background: #0c1320;
}
.tongvh-steam-strip__popup-desc {
  padding: 10px 12px 12px;
  background: #f0f3f6;
  color: #4a4f55;
  font-size: 13px;
  line-height: 1.45;
}
.tongvh-steam-strip__notice {
  max-width: 1000px;
  margin: 18px auto;
  color: #fff;
  background: #152232;
  padding: 12px 14px;
}

@media (max-width: 1080px) {
  .tongvh-steam-strip { max-width: 94vw; }
  .tongvh-steam-strip__media-row { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
  .tongvh-steam-strip__main { height: 190px; }
  .tongvh-steam-strip__thumbs { height: 190px; }
  .tongvh-steam-strip__thumb { height: 154px; }
}

@media (max-width: 820px) {
  .tongvh-steam-strip__header-row { flex-direction: column; gap: 6px; }
  .tongvh-steam-strip__media-row { grid-template-columns: 1fr; }
  .tongvh-steam-strip__main { height: 220px; }
  .tongvh-steam-strip__thumbs { height: auto; grid-template-columns: repeat(3, 1fr); }
  .tongvh-steam-strip__thumb { height: 132px; }
  .tongvh-steam-strip__popup {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    margin-top: 10px;
    transform: none;
    display: none;
    visibility: visible;
    opacity: 1;
  }
  .tongvh-steam-strip.is-popup-visible .tongvh-steam-strip__popup { display: block; }
}

@media (max-width: 600px) {
  .tongvh-steam-strip__main { height: 180px; }
  .tongvh-steam-strip__thumbs { grid-template-columns: 1fr; gap: 10px; }
  .tongvh-steam-strip__thumb { height: 140px; }
}