:root{
  --hs-col-bg:#0b0b0d;
  --hs-col-surface:#141418;
  --hs-col-surface2:#1a1a22;
  --hs-col-accent:#ff5a1e;
  --hs-col-accent2:#ff8a57;
  --hs-col-text:#ffffff;
  --hs-col-muted:#a0a0ae;
  --hs-col-border:rgba(255,255,255,.08);
  --hs-col-border-strong:rgba(255,255,255,.14);
  --hs-col-radius:14px;
  --hs-col-card-aspect:0.715;
}

/* ============ GRID & LAYOUT ============ */
.hs-col-grid{
  display:grid;
  grid-template-columns:repeat(var(--hs-col-grid, 4), minmax(0,1fr));
  gap:14px;
}
@media(max-width:900px){.hs-col-grid{grid-template-columns:repeat(3,1fr)!important}}
@media(max-width:600px){.hs-col-grid{grid-template-columns:repeat(2,1fr)!important;gap:10px}}
@media(max-width:380px){.hs-col-grid{grid-template-columns:repeat(2,1fr)!important;gap:8px}}

.hs-box .hs-col-grid{margin-top:14px}

/* ============ CARD BASE ============ */
.hs-col-card{
  --rarity-color:#8b8b9b;
  --rarity-glow:rgba(139,139,155,.28);
  --rarity-grad:linear-gradient(135deg,#5c5c6b,#2c2c35);
  --rarity-ring-width:2px;
  --mx:50%;
  --my:50%;
  position:relative;
  aspect-ratio:var(--hs-col-card-aspect);
  border-radius:16px;
  cursor:grab;
  perspective:1200px;
  transform-style:preserve-3d;
  transition:transform .3s ease, filter .3s ease;
  will-change:auto;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}
.hs-col-card.is-dragging-card{
  cursor:grabbing;
  z-index:8;
}
.hs-col-card:hover{
  transform:translateY(-4px);
  filter:drop-shadow(0 12px 24px rgba(0,0,0,.45));
  z-index:3;
}
.hs-col-card:hover .hs-col-card-frame{
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08),
    0 0 0 var(--rarity-ring-width) var(--rarity-color),
    0 0 30px 6px var(--rarity-glow),
    inset 0 0 0 1px rgba(255,255,255,.06);
}
.hs-col-card-frame{
  position:absolute;
  inset:0;
  border-radius:16px;
  padding:3px;
  background:linear-gradient(180deg, #101018 0%, #08080d 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.07),
    0 0 0 var(--rarity-ring-width) var(--rarity-color),
    0 0 18px 2px var(--rarity-glow),
    0 8px 18px rgba(0,0,0,.4),
    inset 0 0 0 1px rgba(255,255,255,.04);
  transition:box-shadow .3s ease;
  overflow:hidden;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:vertical;
  -webkit-box-direction:normal;
  -ms-flex-direction:column;
  flex-direction:column;
}
.hs-col-card-frame::before{
  content:"";
  position:absolute;
  inset:3px;
  border-radius:13px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.35));
  pointer-events:none;
  z-index:2;
}
.hs-col-card-frame::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:16px;
  border:1px solid var(--rarity-color);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    inset 0 0 14px rgba(255,255,255,.03);
  pointer-events:none;
  z-index:3;
}

/* Image & Info - FIXED HEIGHT PERCENTAGES (parent hs-col-card-frame = pos absolute inset:0 → explicit height!) */
.hs-col-card-frame > *{
  -webkit-box-flex:0;
  -ms-flex:0 0 auto;
  flex:0 0 auto;
}
/* Image */
.hs-col-card-img{
  position:relative;
  width:100%;
  height:68%;
  -webkit-box-flex:0;
  -ms-flex:0 0 68%;
  flex:0 0 68%;
  background:
    radial-gradient(circle at 50% 16%, rgba(255,90,30,.10), transparent 34%),
    linear-gradient(180deg, #171721 0%, #0b0b10 58%, #060609 100%);
  border-radius:13px 13px 0 0;
  overflow:hidden;
  display:block;
}
.hs-col-card-brand-bg,
.hs-col-card-art,
.hs-col-card-gloss,
.hs-col-card-foil,
.hs-col-card-brand-text{
  position:absolute;
  inset:0;
  border-radius:inherit;
}
.hs-col-card-brand-bg{
  background:
    linear-gradient(135deg, rgba(255,255,255,.03), rgba(255,255,255,0) 35%),
    linear-gradient(180deg, #171721 0%, #0b0b10 58%, #060609 100%);
  z-index:0;
}
.hs-col-card-brand-bg::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size:22px 22px;
  opacity:.22;
}
.hs-col-card-brand-text{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px;
  text-align:center;
  font-size:clamp(16px, 2.1vw, 26px);
  line-height:1.05;
  letter-spacing:.08em;
  font-weight:900;
  text-transform:uppercase;
  color:rgba(255,255,255,.10);
  text-shadow:0 4px 18px rgba(0,0,0,.45);
  z-index:1;
  pointer-events:none;
}
.hs-col-card.has-card-art .hs-col-card-brand-text{
  opacity:.55;
}
.hs-col-card-art{
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:.92;
  z-index:2;
  transform:translate3d(0,0,0) scale(1.005);
  filter:saturate(1.02) contrast(1.01);
  transition:transform .25s ease, filter .25s ease, opacity .25s ease;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  will-change:auto;
}
.hs-col-card.is-no-card-art .hs-col-card-art{
  opacity:0;
}
.hs-col-card-gloss{
  background:
    linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.02) 18%, rgba(255,255,255,0) 38%),
    linear-gradient(180deg, rgba(255,255,255,0) 40%, rgba(0,0,0,.10) 70%, rgba(0,0,0,.45) 100%);
  z-index:3;
  pointer-events:none;
}
.hs-col-card-foil{
  inset:0;
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.14), rgba(255,255,255,.04) 12%, rgba(255,255,255,0) 34%),
    linear-gradient(115deg, transparent 18%, rgba(255,255,255,.03) 28%, rgba(255,255,255,.14) 38%, rgba(255,255,255,.03) 48%, transparent 60%),
    linear-gradient(135deg, transparent 0%, rgba(255,90,30,.05) 28%, rgba(168,85,247,.07) 48%, transparent 72%);
  mix-blend-mode:screen;
  opacity:.18;
  transform:translate3d(0,0,0);
  transition:opacity .3s ease, transform .3s ease;
  z-index:4;
  pointer-events:none;
  animation:none;
}
.hs-col-card-img::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.02) 0%, rgba(0,0,0,.05) 30%, rgba(0,0,0,.72) 100%);
  pointer-events:none;
  z-index:5;
}
.hs-col-card-number{
  position:absolute !important;
  top:8px !important;
  left:8px !important;
  right:auto !important;
  bottom:auto !important;
  width:auto !important;
  display:inline-block !important;
  padding:3px 9px;
  background:rgba(0,0,0,.72);
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
  font-weight:900;
  letter-spacing:.4px;
  border-radius:999px;
  font-size:11px;
  backdrop-filter:blur(6px);
  z-index:6;
}
.hs-col-card-rarity-badge{
  position:absolute !important;
  bottom:8px !important;
  right:8px !important;
  left:auto !important;
  top:auto !important;
  width:auto !important;
  display:inline-block !important;
  padding:3px 10px !important;
  border-radius:999px !important;
  color:#fff;
  font-weight:900;
  font-size:10px;
  letter-spacing:.5px;
  text-transform:uppercase;
  box-shadow:0 2px 8px rgba(0,0,0,.35);
  z-index:6;
}

/* Shine effect on hover (mouse follow handled by JS) */
.hs-col-card-shine{
  position:absolute;
  inset:0;
  border-radius:16px;
  pointer-events:none;
  opacity:0;
  transition:opacity .35s ease;
  background:
    radial-gradient(560px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.12), rgba(255,255,255,.04) 16%, transparent 38%),
    linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,0) 38%);
  z-index:5;
  mix-blend-mode:overlay;
}
.hs-col-card:hover .hs-col-card-shine,
.hs-col-card.is-dragging-card .hs-col-card-shine{opacity:1}
.hs-col-card:hover .hs-col-card-foil,
.hs-col-card.is-dragging-card .hs-col-card-foil{
  opacity:.58;
  animation:hs-col-card-foil 4.8s ease-in-out infinite;
}
.hs-col-card:hover .hs-col-card-art,
.hs-col-card.is-dragging-card .hs-col-card-art{
  transform:translate3d(calc((var(--mx) - 50%) / 80), calc((var(--my) - 50%) / 96), 0) scale(1.012);
  filter:saturate(1.03) contrast(1.01);
  will-change:transform;
}

/* Info */
.hs-col-card-info{
  width:100%;
  height:32%;
  -webkit-box-sizing:border-box;
  box-sizing:border-box;
  padding:8px 10px 10px;
  background:linear-gradient(180deg, #181821, #0f0f15);
  border-radius:0 0 13px 13px;
  border-top:1px solid rgba(255,255,255,.05);
  overflow:hidden;
  position:relative;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:vertical;
  -webkit-box-direction:normal;
  -ms-flex-direction:column;
  flex-direction:column;
  -webkit-box-pack:start;
  -ms-flex-pack:start;
  justify-content:flex-start;
}
.hs-col-card-link{display:block;text-decoration:none;color:inherit}
.hs-col-card-title{
  color:#fff;
  font-weight:900;
  font-size:14px;
  line-height:1.1;
  letter-spacing:-.2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.hs-col-card-sub{
  color:var(--hs-col-muted);
  font-size:11px;
  margin-top:2px;
  font-weight:500;
}
.hs-col-card-fields{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-top:6px;
}
.hs-col-card-fields span{
  font-size:10px;
  padding:2px 7px;
  background:rgba(255,255,255,.045);
  color:#d9d9e4;
  border-radius:999px;
  border:1px solid var(--hs-col-border);
  font-weight:600;
  letter-spacing:.2px;
}

/* Quantity badge */
.hs-col-card-qty{
  position:absolute;
  top:10px;
  right:42px;
  background:linear-gradient(135deg, var(--hs-col-accent), var(--hs-col-accent2));
  color:#fff;
  font-weight:900;
  font-size:12px;
  padding:3px 9px;
  border-radius:999px;
  box-shadow:0 4px 12px rgba(255,90,30,.35);
  z-index:9;
}

/* ============ RARITY SPECIFIC ============ */
/* Mythic special pulse */
.hs-col-card--rarity-mythic:hover .hs-col-card-frame,
.hs-col-card--rarity-mythic.is-dragging-card .hs-col-card-frame{
  animation:hs-col-mythic-pulse 3.8s ease-in-out infinite;
}
.hs-col-card--rarity-common{
  --rarity-color:#8b8b9b;
  --rarity-glow:rgba(139,139,155,.28);
  --rarity-grad:linear-gradient(135deg,#5c5c6b,#2c2c35);
  --rarity-ring-width:2px;
}
.hs-col-card--rarity-rare{
  --rarity-color:#3b82f6;
  --rarity-glow:rgba(59,130,246,.45);
  --rarity-grad:linear-gradient(135deg,#3b82f6,#1e3a8a);
  --rarity-ring-width:2px;
}
.hs-col-card--rarity-epic{
  --rarity-color:#a855f7;
  --rarity-glow:rgba(168,85,247,.5);
  --rarity-grad:linear-gradient(135deg,#a855f7,#581c87);
  --rarity-ring-width:2px;
}
.hs-col-card--rarity-legendary{
  --rarity-color:#f59e0b;
  --rarity-glow:rgba(245,158,11,.6);
  --rarity-grad:linear-gradient(135deg,#f59e0b 0%,#b45309 50%,#fcd34d 100%);
  --rarity-ring-width:3px;
}
.hs-col-card--rarity-mythic{
  --rarity-color:#ef4444;
  --rarity-glow:rgba(239,68,68,.7);
  --rarity-grad:linear-gradient(135deg,#ef4444 0%,#be123c 50%,#fb7185 100%);
  --rarity-ring-width:3px;
}
@keyframes hs-col-mythic-pulse{
  0%,100%{box-shadow:0 0 0 1px rgba(255,255,255,.08),0 0 0 var(--rarity-ring-width) var(--rarity-color),0 0 28px 5px var(--rarity-glow),inset 0 0 0 1px rgba(255,255,255,.06)}
  50%{box-shadow:0 0 0 1px rgba(255,255,255,.10),0 0 0 var(--rarity-ring-width) var(--rarity-color),0 0 42px 10px var(--rarity-glow),inset 0 0 0 1px rgba(255,255,255,.08)}
}
/* Legendary shimmer */
.hs-col-card--rarity-legendary .hs-col-card-foil::before,
.hs-col-card--rarity-mythic .hs-col-card-foil::before{
  content:"";
  position:absolute;
  inset:-30% -60%;
  background:linear-gradient(110deg, transparent 35%, rgba(255,255,255,.18) 50%, transparent 65%);
  transform:translateX(-100%);
  animation:none;
  z-index:2;
}
@keyframes hs-col-shimmer{
  0%,60%{transform:translateX(-100%)}
  100%{transform:translateX(100%)}
}
/* Epic shimmer (subtle) */
.hs-col-card--rarity-epic .hs-col-card-foil::before{
  content:"";
  position:absolute;
  inset:-30% -60%;
  background:linear-gradient(110deg, transparent 40%, rgba(255,255,255,.08) 50%, transparent 60%);
  transform:translateX(-100%);
  animation:none;
  z-index:2;
}
.hs-col-card--rarity-legendary:hover .hs-col-card-foil::before,
.hs-col-card--rarity-legendary.is-dragging-card .hs-col-card-foil::before,
.hs-col-card--rarity-mythic:hover .hs-col-card-foil::before,
.hs-col-card--rarity-mythic.is-dragging-card .hs-col-card-foil::before{
  animation:hs-col-shimmer 6s ease-in-out infinite;
}
.hs-col-card--rarity-epic:hover .hs-col-card-foil::before,
.hs-col-card--rarity-epic.is-dragging-card .hs-col-card-foil::before{
  animation:hs-col-shimmer 9s ease-in-out infinite;
}
@keyframes hs-col-card-foil{
  0%,100%{transform:translateX(-3%) translateY(0);opacity:.34}
  50%{transform:translateX(3%) translateY(-1%);opacity:.62}
}

/* ============ STATS ============ */
.hs-col-stats{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}
.hs-col-stats-main{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}
@media(max-width:640px){.hs-col-stats-main{grid-template-columns:repeat(2,1fr)}}
.hs-col-stat{
  background:var(--hs-col-surface2);
  border:1px solid var(--hs-col-border);
  border-radius:var(--hs-col-radius);
  padding:12px 14px;
  position:relative;
  overflow:hidden;
}
.hs-col-stat::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(300px 120px at 100% -10%, rgba(255,90,30,.10), transparent 60%);
  pointer-events:none;
}
.hs-col-stat-label{
  font-size:12px;
  color:var(--hs-col-muted);
  font-weight:600;
  letter-spacing:.3px;
  text-transform:uppercase;
}
.hs-col-stat-value{
  font-size:26px;
  font-weight:900;
  color:#fff;
  letter-spacing:-.5px;
  margin-top:4px;
}
.hs-col-progress{
  width:100%;
}
.hs-col-progress-bar{
  width:100%;
  height:10px;
  background:rgba(255,255,255,.05);
  border-radius:999px;
  overflow:hidden;
  border:1px solid var(--hs-col-border);
}
.hs-col-progress-fill{
  height:100%;
  background:linear-gradient(90deg, var(--hs-col-accent), var(--hs-col-accent2));
  border-radius:999px;
  transition:width 1s cubic-bezier(.2,.9,.25,1);
  box-shadow:0 0 16px rgba(255,90,30,.25);
}

/* ============ RARITY CHIPS ============ */
.hs-col-rarity-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:8px;
  margin:4px 0 16px;
}
.hs-col-rarity-chip{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  background:var(--hs-col-surface2);
  border:1px solid var(--hs-col-border);
  border-radius:12px;
  position:relative;
  overflow:hidden;
}
.hs-col-rarity-chip::before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;width:3px;
  background:var(--c, var(--hs-col-accent));
}
.hs-col-rarity-chip-dot{
  width:10px;height:10px;border-radius:50%;
  box-shadow:0 0 8px currentColor;
}
.hs-col-rarity-chip b{color:#fff;font-weight:800;font-size:13px}
.hs-col-rarity-chip-cnt{margin-left:auto;color:var(--hs-col-muted);font-size:12px;font-weight:600}

/* ============ COLLECTION ACCORDION ============ */
.hs-col-accordion{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.hs-col-accordion > .hs-box{
  margin-bottom:0 !important;
}
.hs-col-accordion > .hs-box > .hs-header{
  position:relative;
  cursor:pointer;
  user-select:none;
  min-height:58px;
  padding:16px 52px 16px 18px;
  font-size:14px;
  font-weight:900;
  letter-spacing:.02em;
  display:flex;
  align-items:center;
  border-radius:16px;
}
.hs-col-accordion > .hs-box > .hs-header::after{
  content:"+";
  position:absolute;
  right:16px;
  top:50%;
  transform:translateY(-50%);
  color:#ffb38f;
  font-size:24px;
  font-weight:900;
  line-height:1;
  transition:transform .2s ease, color .2s ease;
}
.hs-col-accordion > .hs-box.is-open > .hs-header::after{
  content:"−";
  color:#ff5a1e;
}
.hs-col-accordion > .hs-box > .hs-body{
  display:none;
}
.hs-col-accordion > .hs-box.is-open > .hs-body{
  display:block;
}
.hs-col-accordion > .hs-box > .hs-header .hs-btn{
  position:relative;
  z-index:2;
}

/* ============ FILTERS ============ */
.hs-col-filters{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  padding:12px 14px;
  background:var(--hs-col-surface2);
  border:1px solid var(--hs-col-border);
  border-radius:var(--hs-col-radius);
  margin-bottom:8px;
}
.hs-col-filter-group{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hs-col-filter-group label{font-size:12px;color:var(--hs-col-muted);font-weight:700;letter-spacing:.3px;text-transform:uppercase}
.hs-col-search{
  min-width:220px;
  padding:9px 14px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--hs-col-border-strong);
  border-radius:12px;
  color:#fff;
  font-weight:500;
  outline:none;
  transition:border-color .2s,box-shadow .2s;
}
.hs-col-search:focus{border-color:rgba(255,90,30,.5);box-shadow:0 0 0 3px rgba(255,90,30,.12)}
.hs-col-filters select{
  background:rgba(255,255,255,.04);
  border:1px solid var(--hs-col-border-strong);
  color:#fff;
  padding:8px 12px;
  border-radius:12px;
  font-weight:600;
  outline:none;
  min-width:150px;
  appearance:auto;
}
.hs-col-filters select option{
  background:#161923;
  color:#fff;
}
.hs-col-filters select:focus{
  border-color:rgba(255,90,30,.5);
  box-shadow:0 0 0 3px rgba(255,90,30,.12);
}
.hs-col-toggle-wrap{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-size:13px;color:#e7e7ef}
.hs-col-toggle-wrap input{accent-color:var(--hs-col-accent)}

/* ============ MISSING / HUNTING ============ */
.hs-col-missing{
  margin:16px 0;
  border:1px solid rgba(255,90,30,.18);
  background:linear-gradient(180deg, rgba(255,90,30,.06), rgba(255,90,30,.02));
  border-radius:var(--hs-col-radius);
  padding:12px 14px;
}
.hs-col-missing-head{font-weight:900;color:#fff;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.hs-col-missing-list{display:flex;flex-direction:column;gap:10px}
.hs-col-hunt{margin-top:16px}
.hs-col-hunt-title{font-weight:900;color:#fff;margin-bottom:10px}
.hs-col-hunt-list{display:flex;flex-direction:column;gap:10px}
.hs-col-hunt-item{
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  align-items:center;
  padding:10px 14px;
  background:var(--hs-col-surface2);
  border:1px solid var(--hs-col-border);
  border-radius:var(--hs-col-radius);
}
.hs-col-hunt-name{font-weight:900;color:#fff;font-size:14px}
.hs-col-hunt-missing{margin-top:2px}
.hs-col-hunt-bar{
  margin-top:6px;
  height:6px;
  background:rgba(255,255,255,.05);
  border-radius:999px;
  overflow:hidden;
}
.hs-col-hunt-fill{
  height:100%;
  background:linear-gradient(90deg,#f59e0b,#ef4444);
  border-radius:999px;
  transition:width .8s cubic-bezier(.2,.9,.25,1);
}
.hs-col-hunt-cards{display:flex;gap:6px}
.hs-col-missing-card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  gap:12px;
}
.hs-col-missing-card-grid--compact{
  grid-template-columns:repeat(auto-fill, minmax(110px, 1fr));
  gap:10px;
}
.hs-col-missing-card-link{
  display:block;
  text-decoration:none;
  color:inherit;
}
.hs-col-missing-card-link .hs-col-card{
  cursor:pointer;
}
.hs-col-missing-card-link--compact .hs-col-card{
  --hs-col-card-aspect:0.72;
}
.hs-col-missing-card-link--compact .hs-col-card-title{
  font-size:12px;
}
.hs-col-missing-card-link--compact .hs-col-card-sub{
  font-size:10px;
}
.hs-col-missing-lock{
  position:absolute;
  top:10px;
  right:10px;
  z-index:4;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  border-radius:999px;
  background:rgba(8,10,16,.82);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 8px 18px rgba(0,0,0,.28);
  font-size:12px;
  line-height:1;
}
.hs-col-mini{
  display:block;
  width:40px;height:56px;
  border-radius:8px;
  padding:2px;
  background:var(--grad, #333);
  transition:transform .2s ease;
}
.hs-col-mini:hover{transform:translateY(-3px) scale(1.08)}
.hs-col-mini-img{
  width:100%;height:100%;
  background-size:cover;background-position:center;
  border-radius:6px;
  background-color:#111;
}
@media(max-width:600px){
  .hs-col-missing-card-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

/* ============ DAILY PACK ============ */
.hs-col-pack-box .hs-col-pack-stage{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  gap:22px;
  align-items:center;
  margin-bottom:20px;
  padding:20px;
  background:
    radial-gradient(400px 200px at 0% 0%, rgba(255,90,30,.14), transparent 60%),
    radial-gradient(400px 200px at 100% 100%, rgba(168,85,247,.10), transparent 60%),
    var(--hs-col-surface2);
  border:1px solid var(--hs-col-border);
  border-radius:18px;
}
.hs-col-pack-box .hs-col-pack-stage > *{
  min-width:0;
}
@media(max-width:700px){
  .hs-col-pack-box .hs-col-pack-stage{grid-template-columns:1fr;text-align:center}
}
.hs-col-pack-visual{
  display:none;
  aspect-ratio:0.715;
  width:170px;
  margin:0;
  border-radius:22px;
  background:
    linear-gradient(135deg, rgba(255,90,30,.95), rgba(255,0,110,.85) 50%, rgba(120,0,200,.95));
  box-shadow:
    0 0 0 1px rgba(255,255,255,.12),
    0 22px 44px rgba(255,90,30,.22),
    inset 0 1px 0 rgba(255,255,255,.2);
  overflow:hidden;
  transform-style:preserve-3d;
  transition:transform .3s ease;
  transform:translateY(-50%) rotate(-10deg);
  opacity:.16;
  filter:saturate(.9);
  pointer-events:none;
  animation:none;
}
@keyframes hs-col-pack-bob{
  0%,100%{transform:translateY(-50%) rotate(-10deg)}
  50%{transform:translateY(calc(-50% - 6px)) rotate(-8deg)}
}
.hs-col-pack-box:hover .hs-col-pack-visual{animation:hs-col-pack-bob 4s ease-in-out infinite}
.hs-col-pack-box:hover .hs-col-pack-visual{transform:translateY(calc(-50% - 8px)) rotate(-8deg) scale(1.03)}
.hs-col-pack-shine{
  position:absolute;
  inset:-40% -60%;
  background:linear-gradient(110deg, transparent 40%, rgba(255,255,255,.22) 50%, transparent 60%);
  animation:none;
  pointer-events:none;
}
@keyframes hs-col-pack-glare{
  0%,45%{transform:translateX(-60%) rotate(10deg)}
  100%{transform:translateX(60%) rotate(10deg)}
}
.hs-col-pack-glow{
  position:absolute;
  inset:-20%;
  background:radial-gradient(circle at 50% 50%, rgba(255,200,100,.28), transparent 60%);
  animation:none;
  pointer-events:none;
}
@keyframes hs-col-pack-glow{
  0%,100%{opacity:.6;transform:scale(1)}
  50%{opacity:1;transform:scale(1.08)}
}
.hs-col-pack-icon{
  position:absolute;
  inset:0;
  display:grid;place-items:center;
  font-size:86px;
  filter:drop-shadow(0 4px 14px rgba(0,0,0,.4));
  animation:none;
}
.hs-col-pack-box:hover .hs-col-pack-shine{animation:hs-col-pack-glare 3.8s ease-in-out infinite}
.hs-col-pack-box:hover .hs-col-pack-glow{animation:hs-col-pack-glow 3.2s ease-in-out infinite}
.hs-col-pack-box:hover .hs-col-pack-icon{animation:hs-col-pack-bounce 2.4s ease-in-out infinite}
@keyframes hs-col-pack-bounce{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
}
.hs-col-pack-label{
  position:absolute;
  bottom:18px;left:0;right:0;
  text-align:center;
  color:#fff;
  font-weight:900;
  letter-spacing:1.2px;
  line-height:1.15;
  font-size:16px;
  text-transform:uppercase;
  text-shadow:0 2px 8px rgba(0,0,0,.5);
}
.hs-col-pack-label span{
  font-size:12px;
  letter-spacing:3px;
  font-weight:700;
  opacity:.88;
}
.hs-col-pack-odds{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.hs-col-pack-odds span{
  display:flex;align-items:center;gap:10px;
  font-weight:600;font-size:13px;color:#dedee8;
}
.hs-col-pack-odds i{
  width:12px;height:12px;border-radius:3px;
  display:inline-block;
  box-shadow:0 0 8px currentColor;
}
.hs-col-pack-streak{
  display:inline-block;
  padding:6px 14px;
  border-radius:999px;
  background:rgba(255,90,30,.12);
  border:1px solid rgba(255,90,30,.35);
  color:#ff9770;
  font-weight:900;
  letter-spacing:.3px;
  margin-bottom:10px;
}
.hs-col-pack-streak span{margin-right:4px}
.hs-col-pack-meta-grid{
  display:grid;
  grid-template-columns:minmax(180px, 220px) minmax(0, 1fr);
  gap:20px;
  align-items:stretch;
  width:100%;
}
.hs-col-pack-meta{
  width:100%;
  justify-self:stretch;
  position:relative;
  z-index:1;
}
.hs-col-pack-odds-wrap{
  padding:16px 18px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
}
.hs-col-pack-kicker{
  margin-bottom:10px;
  color:#ffb18e;
  font-size:11px;
  font-weight:900;
  letter-spacing:1.1px;
  text-transform:uppercase;
}
.hs-col-pack-side-art{
  display:grid;
  grid-template-columns:180px minmax(0, 1fr);
  gap:20px;
  align-items:center;
  justify-self:stretch;
  min-height:196px;
  padding:18px 20px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(140px 120px at 18% 25%, rgba(255,90,30,.16), transparent 75%),
    radial-gradient(160px 120px at 86% 78%, rgba(168,85,247,.14), transparent 75%),
    linear-gradient(180deg, rgba(10,12,24,.92), rgba(7,8,14,.98));
  overflow:hidden;
}
.hs-col-pack-cardfan{
  position:relative;
  width:164px;
  height:172px;
  margin:0 auto;
}
.hs-col-pack-cardfan-card{
  position:absolute;
  left:50%;
  top:50%;
  width:116px;
  aspect-ratio:.715;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.16);
  background:
    linear-gradient(160deg, rgba(255,255,255,.16), rgba(255,255,255,.02) 34%, rgba(0,0,0,.18) 60%, rgba(0,0,0,.4)),
    var(--fan-frame, linear-gradient(135deg, rgba(255,90,30,.9), rgba(236,72,153,.72) 52%, rgba(99,102,241,.75)));
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  box-shadow:
    0 14px 26px rgba(0,0,0,.36),
    0 0 20px var(--fan-glow, rgba(255,90,30,.14)),
    inset 0 1px 0 rgba(255,255,255,.18);
  transform-origin:center center;
  overflow:hidden;
}
.hs-col-pack-cardfan-card::before{
  content:"";
  position:absolute;
  inset:10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(255,255,255,.04), transparent 34%, rgba(0,0,0,.18));
}
.hs-col-pack-cardfan-card::after{
  content:"";
  position:absolute;
  inset:-25% -55%;
  background:linear-gradient(110deg, transparent 42%, rgba(255,255,255,.24) 50%, transparent 58%);
  transform:translateX(-24%) rotate(10deg);
  opacity:.8;
}
.hs-col-pack-cardfan-card--back{
  transform:translate(-74%, -50%) rotate(-18deg) scale(.92);
  filter:saturate(.8) brightness(.9);
}
.hs-col-pack-cardfan-card--mid{
  transform:translate(-50%, -54%) rotate(-3deg);
  z-index:2;
}
.hs-col-pack-cardfan-card--front{
  transform:translate(-24%, -48%) rotate(16deg) scale(.96);
  z-index:3;
  box-shadow:
    0 18px 30px rgba(0,0,0,.42),
    0 0 26px var(--fan-glow, rgba(255,90,30,.22)),
    inset 0 1px 0 rgba(255,255,255,.22);
}
.hs-col-pack-cardfan-badge{
  position:absolute;
  left:10px;
  top:10px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(8,10,16,.68);
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
  font-size:9px;
  font-weight:900;
  letter-spacing:.6px;
  text-transform:uppercase;
  box-shadow:0 8px 18px rgba(0,0,0,.28);
}
.hs-col-pack-cardfan-title{
  position:absolute;
  left:10px;
  right:10px;
  bottom:10px;
  z-index:2;
  display:block;
  padding:20px 0 0;
  color:#fff;
  font-size:12px;
  font-weight:900;
  line-height:1.15;
  text-transform:uppercase;
  text-shadow:0 2px 10px rgba(0,0,0,.55);
}
.hs-col-pack-cardfan-title::before{
  content:"";
  position:absolute;
  left:-10px;
  right:-10px;
  bottom:-10px;
  top:-12px;
  z-index:-1;
  background:linear-gradient(180deg, transparent, rgba(4,5,10,.9) 54%, rgba(4,5,10,.98));
}
.hs-col-pack-side-copy{
  position:relative;
  z-index:1;
  align-self:center;
}
.hs-col-pack-side-title{
  margin-bottom:8px;
  color:#fff;
  font-size:26px;
  font-weight:900;
  line-height:1.05;
}
.hs-col-pack-side-copy p{
  margin:0;
  color:#cfcfda;
  font-size:15px;
  line-height:1.6;
  max-width:44ch;
}
.hs-col-pack-cta{
  margin-top:18px;
}
.hs-col-pack-cta .hs-col-open-pack{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:48px;
  padding:12px 20px;
  font-size:16px;
  font-weight:900;
}
@media(max-width:900px){
  .hs-col-pack-meta-grid{grid-template-columns:1fr}
  .hs-col-pack-side-art{grid-template-columns:160px 1fr}
}
@media(max-width:560px){
  .hs-col-pack-side-art{
    grid-template-columns:1fr;
    text-align:center;
  }
  .hs-col-pack-side-copy p{max-width:none}
}

.hs-col-xp-pack-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:14px;
}
.hs-col-xp-pack-card{
  display:grid;
  gap:14px;
  padding:16px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(160px 120px at 14% 18%, rgba(255,90,30,.14), transparent 75%),
    radial-gradient(180px 140px at 86% 86%, rgba(168,85,247,.12), transparent 75%),
    linear-gradient(180deg, rgba(10,12,24,.92), rgba(7,8,14,.98));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03), 0 18px 36px rgba(0,0,0,.22);
}
.hs-col-xp-pack-preview{
  padding:10px 12px 0;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.01));
}
.hs-col-xp-pack-preview .hs-col-pack-kicker{
  margin-bottom:8px;
}
.hs-col-xp-pack-stack-wrap{
  position:relative;
  width:182px;
  height:176px;
  margin:0 auto;
}
.hs-col-xp-pack-stack{
  position:absolute;
  inset:0;
}
.hs-col-xp-pack-stack-card{
  position:absolute;
  left:50%;
  top:50%;
  width:110px;
  aspect-ratio:.715;
  border-radius:15px;
  border:1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.02) 34%, rgba(0,0,0,.18) 60%, rgba(0,0,0,.44)),
    linear-gradient(180deg, rgba(28,32,48,.95), rgba(8,10,16,.98));
  box-shadow:
    0 10px 20px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.08);
  transform:translate(calc(-50% + (var(--stack-index) * 3px)), calc(-50% - (var(--stack-index) * .22px))) rotate(7deg);
  z-index:calc(var(--stack-index) + 1);
  opacity:calc(.18 + (var(--stack-index) * .024));
}
.hs-col-xp-pack-stack-card::before{
  content:"";
  position:absolute;
  inset:7px;
  border-radius:11px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(0,0,0,.14));
}
.hs-col-xp-pack-stack-count{
  position:absolute;
  right:0;
  top:8px;
  z-index:6;
  display:inline-flex;
  align-items:center;
  padding:5px 10px;
  border-radius:999px;
  background:rgba(8,10,16,.84);
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  box-shadow:0 8px 18px rgba(0,0,0,.24);
}
.hs-col-xp-pack-preview .hs-col-pack-cardfan{
  position:absolute;
  left:50%;
  top:50%;
  width:170px;
  height:166px;
  margin:0;
  transform:translate(-50%, -50%);
  z-index:7;
}
.hs-col-xp-pack-copy{
  display:grid;
  gap:10px;
}
.hs-col-xp-pack-head{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:baseline;
}
.hs-col-xp-pack-head b{
  color:#fff;
  font-size:16px;
}
.hs-col-xp-pack-head span{
  color:#ffb38f;
  font-size:12px;
  font-weight:900;
}
.hs-col-xp-pack-title{
  color:#fff;
  font-size:22px;
  font-weight:900;
  line-height:1.05;
}
.hs-col-xp-pack-text{
  color:#cfcfda;
  font-size:13px;
  line-height:1.55;
}
.hs-col-xp-pack-card .hs-col-buy-xp-pack{
  width:fit-content;
}
@media(max-width:560px){
  .hs-col-xp-pack-grid{
    grid-template-columns:1fr;
  }
}

.hs-col-pack-opened{
  position:relative;
  overflow:hidden;
  padding:28px 24px 22px;
  text-align:center;
  background:
    radial-gradient(520px 220px at 50% 0%, rgba(255,90,30,.16), transparent 60%),
    radial-gradient(300px 180px at 18% 60%, rgba(255,90,30,.08), transparent 60%),
    radial-gradient(300px 180px at 82% 60%, rgba(255,90,30,.08), transparent 60%),
    linear-gradient(180deg, rgba(13,16,26,.96), rgba(12,14,22,.98));
  border-radius:22px;
  border:1px solid rgba(255,122,43,.4);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 18px 46px rgba(0,0,0,.34);
}
.hs-col-pack-opened::before,
.hs-col-pack-opened::after{
  display:none;
}
.hs-col-pack-opened__eyebrow{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 18px;
  border-radius:999px;
  background:rgba(42,24,15,.78);
  border:1px solid rgba(255,122,43,.24);
  font-size:11px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#ffb38f;
  margin-bottom:14px;
}
.hs-col-pack-opened__eyebrow::before{
  content:"🎁";
  font-size:13px;
  line-height:1;
}
.hs-col-pack-opened__title{
  position:relative;
  z-index:1;
  max-width:760px;
  margin:0 auto 14px;
  font-size:22px;
  font-weight:900;
  line-height:1.15;
  color:#fff;
}
.hs-col-pack-opened__title span{
  color:#ff9a52;
  text-shadow:0 0 18px rgba(255,122,43,.2);
}
.hs-col-pack-opened__timer{
  position:relative;
  z-index:1;
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  min-width:min(100%, 440px);
  padding:16px 18px 18px;
  margin-bottom:12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
    rgba(10,12,20,.76);
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 14px 30px rgba(0,0,0,.24);
}
.hs-col-pack-opened__timer span{
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#ffcfb8;
}
.hs-col-pack-opened__timer .hs-col-countdown{
  display:none;
}
.hs-col-pack-opened__timer-copy{
  width:100%;
}
.hs-col-pack-opened__time-grid{
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr;
  align-items:center;
  gap:10px;
  width:100%;
}
.hs-col-pack-opened__time-box{
  min-width:0;
  padding:14px 10px 12px;
  border-radius:18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.01)),
    rgba(13,15,24,.96);
  border:1px solid rgba(255,255,255,.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.hs-col-pack-opened__time-value{
  font-size:20px;
  font-weight:900;
  color:#fff;
  line-height:1;
  font-variant-numeric:tabular-nums;
}
.hs-col-pack-opened__time-label{
  margin-top:8px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--hs-col-muted);
}
.hs-col-pack-opened__time-sep{
  font-size:26px;
  font-weight:900;
  color:#8b8f9f;
  line-height:1;
}
.hs-col-pack-opened__hint{
  position:relative;
  z-index:1;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  margin:0 auto 18px;
  color:var(--hs-col-muted);
  font-size:14px;
  font-weight:600;
}
.hs-col-pack-opened__hint::before{
  content:"🎁";
  opacity:.85;
}
.hs-col-pack-opened .hs-btn{
  position:relative;
  z-index:1;
  display:flex;
  width:fit-content;
  margin:0 auto;
  clear:both;
}
.hs-col-pack-opened__actions{
  position:relative;
  z-index:1;
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}
@media(max-width:640px){
  .hs-col-pack-opened__title{
    font-size:18px;
  }
  .hs-col-pack-opened__timer{
    min-width:100%;
  }
  .hs-col-pack-opened__time-grid{
    grid-template-columns:1fr;
    gap:8px;
  }
  .hs-col-pack-opened__time-sep{
    display:none;
  }
  .hs-col-pack-opened::before,
  .hs-col-pack-opened::after{
    display:none;
  }
  .hs-col-pack-opened__actions{
    flex-direction:column;
    align-items:center;
  }
}

/* Pack opening results */
.hs-col-pack-results{
  padding:20px;
  background:
    radial-gradient(500px 220px at 50% -10%, rgba(255,90,30,.16), transparent 60%),
    var(--hs-col-surface2);
  border:1px solid var(--hs-col-border);
  border-radius:18px;
}
.hs-col-pack-results h4{margin:0 0 14px;font-weight:900;color:#fff;letter-spacing:.2px;font-size:18px}
.hs-col-pack-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.hs-col-pack-results:empty{display:none !important}
.hs-col-new-badge{
  position:absolute;
  top:10px;right:10px;
  padding:3px 9px;
  background:linear-gradient(135deg,#10b981,#059669);
  color:#fff;font-weight:900;font-size:10px;
  border-radius:999px;z-index:7;
  box-shadow:0 3px 10px rgba(16,185,129,.35);
  letter-spacing:.5px;text-transform:uppercase;
}

/* Pack opening overlay animation */
.hs-col-pack-open-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,.86);
  display:grid;place-items:center;
  z-index:99999;
  animation:hs-col-fadein .25s ease;
}
body.hs-col-no-scroll{
  overflow:hidden;
}
@keyframes hs-col-fadein{from{opacity:0}to{opacity:1}}
.hs-col-pack-burst{
  width:min(640px, 92vw);
  max-height:90vh;overflow:auto;
  padding:28px;
  background:
    radial-gradient(500px 240px at 50% 0%, rgba(255,90,30,.18), transparent 60%),
    linear-gradient(180deg, #181821, #0b0b0f);
  border:1px solid var(--hs-col-border-strong);
  border-radius:24px;
  box-shadow:0 30px 100px rgba(0,0,0,.6);
  text-align:center;
  position:relative;
}
.hs-col-pack-burst h2{
  margin:0 0 4px;font-size:32px;font-weight:900;letter-spacing:-.4px;color:#fff;
}
.hs-col-pack-burst h2 span{
  background:linear-gradient(135deg,#ffb47a,#ff5a1e 60%,#ff2e82);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hs-col-pack-burst .hs-sub{color:var(--hs-col-muted);margin-bottom:20px;font-weight:600}
.hs-col-pack-cards-stage{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,220px));
  justify-content:center;
  gap:12px;
  width:100%;
  max-width:820px;
  margin:24px auto 24px;
}
.hs-col-pack-cards-stage > *{
  width:100%;
  max-width:220px;
}
.hs-col-pack-cards-stage > :only-child{
  max-width:min(280px, 32vw);
}
.hs-col-pack-cards-stage.is-many-pack{
  grid-template-columns:repeat(4,minmax(0,142px));
  gap:10px;
  max-width:598px;
}
.hs-col-pack-cards-stage.is-many-pack > *{
  max-width:142px;
}
.hs-col-pack-cards-stage.is-huge-pack{
  grid-template-columns:repeat(5,minmax(0,112px));
  gap:8px;
  max-width:592px;
}
.hs-col-pack-cards-stage.is-huge-pack > *{
  max-width:112px;
}
.hs-col-pack-cards-stage .hs-col-card-link{
  width:100%;
}
.hs-col-pack-cards-stage .hs-col-card{
  width:100%;
  opacity:0;
  animation:hs-col-card-reveal .7s cubic-bezier(.2,1.3,.3,1) forwards;
  transform-origin:center;
}
.hs-col-pack-cards-stage .hs-col-card:nth-child(1){animation-delay:.10s}
.hs-col-pack-cards-stage .hs-col-card:nth-child(2){animation-delay:.30s}
.hs-col-pack-cards-stage .hs-col-card:nth-child(3){animation-delay:.50s}
.hs-col-pack-cards-stage .hs-col-card:nth-child(4){animation-delay:.70s}
@keyframes hs-col-card-reveal{
  0%{opacity:0;transform:scale(.4) rotate(-15deg) translateY(40px)}
  60%{transform:scale(1.08) rotate(2deg) translateY(-6px)}
  100%{opacity:1;transform:scale(1) rotate(0deg) translateY(0)}
}
.hs-col-card-link.is-recent-drop,
.hs-col-card.is-recent-drop{
  position:relative;
  border-radius:24px;
  animation:hs-col-recent-drop-pulse 2.2s ease 3;
}
.hs-col-card-link.is-recent-drop .hs-col-card,
.hs-col-card.is-recent-drop{
  box-shadow:
    0 0 0 2px rgba(255,90,30,.72),
    0 0 0 7px rgba(255,90,30,.14),
    0 24px 54px rgba(255,90,30,.24);
}
@keyframes hs-col-recent-drop-pulse{
  0%, 100%{transform:translateY(0) scale(1)}
  18%{transform:translateY(-6px) scale(1.02)}
  38%{transform:translateY(0) scale(1)}
}
.hs-col-login-reveal__panel{
  width:min(980px, 92vw);
  max-height:92vh;
  overflow:hidden;
  padding:34px 28px 32px;
  background:
    radial-gradient(500px 240px at 50% 0%, rgba(255,90,30,.18), transparent 60%),
    linear-gradient(180deg, #181821, #0b0b0f);
  border:1px solid var(--hs-col-border-strong);
  border-radius:24px;
  box-shadow:0 30px 100px rgba(0,0,0,.6);
  text-align:center;
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.hs-col-daily-reveal{
  position:relative;
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
}
.hs-col-daily-reveal__close{
  position:fixed;
  top:16px;
  right:16px;
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(10,10,14,.55);
  color:#fff;
  font-size:22px;
  font-weight:900;
  line-height:1;
  cursor:pointer;
  z-index:100000;
  backdrop-filter:blur(6px);
  box-shadow:0 10px 30px rgba(0,0,0,.45);
}
.hs-col-daily-reveal__close:hover{transform:translateY(-1px)}
.hs-col-daily-reveal__opener{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  text-align:center;
  padding:28px 18px;
  transition:opacity .45s ease, transform .55s cubic-bezier(.2,.9,.25,1);
}
.hs-col-daily-reveal__opener-title{
  font-size:20px;
  font-weight:900;
  color:#fff;
  letter-spacing:-.2px;
  margin-top:10px;
}
.hs-col-daily-reveal__opener-sub{
  font-size:13px;
  font-weight:650;
  color:var(--hs-col-muted);
  margin-top:6px;
}
.hs-col-daily-reveal__hud{
  position:absolute;
  top:18px;
  left:0;
  right:0;
  text-align:center;
  padding:0 70px;
  opacity:0;
  transform:translateY(-10px);
  transition:opacity .45s ease, transform .55s cubic-bezier(.2,.9,.25,1);
  pointer-events:none;
}
.hs-col-daily-reveal__title{
  font-size:26px;
  font-weight:900;
  color:#fff;
  letter-spacing:-.4px;
}
.hs-col-daily-reveal__sub{
  margin-top:4px;
  color:var(--hs-col-muted);
  font-weight:650;
  font-size:13px;
}
.hs-col-daily-reveal__stage{
  width:min(980px, 94vw);
  height:min(640px, 78vh);
  display:grid;
  place-items:center;
  opacity:0;
  transform:translateY(14px) scale(.98);
  transition:opacity .45s ease, transform .55s cubic-bezier(.2,.9,.25,1);
}
.hs-col-daily-reveal.is-revealed .hs-col-daily-reveal__opener{
  opacity:0;
  transform:translateY(-18px) scale(.92);
  pointer-events:none;
}
.hs-col-daily-reveal.is-revealed .hs-col-daily-reveal__hud{
  opacity:1;
  transform:translateY(0);
}
.hs-col-daily-reveal.is-revealed .hs-col-daily-reveal__stage{
  opacity:1;
  transform:translateY(0) scale(1);
}
.hs-col-daily-reveal__fan{
  position:relative;
  width:min(860px, 92vw);
  height:min(560px, 72vh);
  display:block;
}
.hs-col-daily-reveal__fan-card{
  position:absolute;
  left:50%;
  top:50%;
  width:min(340px, 72vw);
  transform:translate(-50%,-50%) scale(.86);
  transform-origin:50% 80%;
  transition:transform .35s cubic-bezier(.2,.9,.25,1);
}
.hs-col-daily-reveal__fan-card .hs-col-card,
.hs-col-daily-reveal__fan-card .hs-col-card-link{
  width:100%;
  max-width:100%;
}
.hs-col-daily-reveal__fan--n1 .hs-col-daily-reveal__fan-card:nth-child(1){transform:translate(-50%,-50%) scale(.92)}
.hs-col-daily-reveal__fan--n2 .hs-col-daily-reveal__fan-card:nth-child(1){transform:translate(calc(-50% - min(140px,18vw)),-50%) rotate(-8deg) scale(.88)}
.hs-col-daily-reveal__fan--n2 .hs-col-daily-reveal__fan-card:nth-child(2){transform:translate(calc(-50% + min(140px,18vw)),-50%) rotate(8deg) scale(.88)}
.hs-col-daily-reveal__fan--n3 .hs-col-daily-reveal__fan-card:nth-child(1){transform:translate(calc(-50% - min(170px,22vw)),-50%) rotate(-14deg) scale(.84)}
.hs-col-daily-reveal__fan--n3 .hs-col-daily-reveal__fan-card:nth-child(2){transform:translate(-50%,-50%) rotate(0deg) scale(.92)}
.hs-col-daily-reveal__fan--n3 .hs-col-daily-reveal__fan-card:nth-child(3){transform:translate(calc(-50% + min(170px,22vw)),-50%) rotate(14deg) scale(.84)}
.hs-col-daily-reveal__fan--n4 .hs-col-daily-reveal__fan-card:nth-child(1){transform:translate(calc(-50% - min(210px,26vw)),-50%) rotate(-18deg) scale(.82)}
.hs-col-daily-reveal__fan--n4 .hs-col-daily-reveal__fan-card:nth-child(2){transform:translate(calc(-50% - min(80px,10vw)),-50%) rotate(-6deg) scale(.88)}
.hs-col-daily-reveal__fan--n4 .hs-col-daily-reveal__fan-card:nth-child(3){transform:translate(calc(-50% + min(80px,10vw)),-50%) rotate(6deg) scale(.88)}
.hs-col-daily-reveal__fan--n4 .hs-col-daily-reveal__fan-card:nth-child(4){transform:translate(calc(-50% + min(210px,26vw)),-50%) rotate(18deg) scale(.82)}
.hs-col-daily-reveal__fan--n5 .hs-col-daily-reveal__fan-card:nth-child(1){transform:translate(calc(-50% - min(230px,28vw)),-50%) rotate(-22deg) scale(.80)}
.hs-col-daily-reveal__fan--n5 .hs-col-daily-reveal__fan-card:nth-child(2){transform:translate(calc(-50% - min(115px,14vw)),-50%) rotate(-10deg) scale(.84)}
.hs-col-daily-reveal__fan--n5 .hs-col-daily-reveal__fan-card:nth-child(3){transform:translate(-50%,-50%) rotate(0deg) scale(.92)}
.hs-col-daily-reveal__fan--n5 .hs-col-daily-reveal__fan-card:nth-child(4){transform:translate(calc(-50% + min(115px,14vw)),-50%) rotate(10deg) scale(.84)}
.hs-col-daily-reveal__fan--n5 .hs-col-daily-reveal__fan-card:nth-child(5){transform:translate(calc(-50% + min(230px,28vw)),-50%) rotate(22deg) scale(.80)}
@media(max-width:520px){
  .hs-col-daily-reveal__hud{padding:0 54px}
  .hs-col-daily-reveal__title{font-size:22px}
  .hs-col-daily-reveal__fan-card{transform:translate(-50%,-50%) scale(.82)}
  .hs-col-daily-reveal__fan--n2 .hs-col-daily-reveal__fan-card:nth-child(1){transform:translate(calc(-50% - min(96px,20vw)),-50%) rotate(-8deg) scale(.82)}
  .hs-col-daily-reveal__fan--n2 .hs-col-daily-reveal__fan-card:nth-child(2){transform:translate(calc(-50% + min(96px,20vw)),-50%) rotate(8deg) scale(.82)}
  .hs-col-daily-reveal__fan--n3 .hs-col-daily-reveal__fan-card:nth-child(1){transform:translate(calc(-50% - min(118px,24vw)),-50%) rotate(-12deg) scale(.80)}
  .hs-col-daily-reveal__fan--n3 .hs-col-daily-reveal__fan-card:nth-child(3){transform:translate(calc(-50% + min(118px,24vw)),-50%) rotate(12deg) scale(.80)}
}
.hs-col-login-reveal__opener{
  transition:transform .7s ease, opacity .5s ease;
}
.hs-col-login-reveal__pack{
  width:min(240px, 52vw);
  margin:0 auto 18px;
  animation:hs-col-login-pack-intro 1.2s ease both, hs-col-pack-bob 4s ease-in-out infinite 1.2s;
}
.hs-col-login-reveal__result{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:100%;
  padding:8px 0 10px;
  opacity:0;
  transform:translateY(24px) scale(.96);
  pointer-events:none;
  transition:opacity .45s ease, transform .55s cubic-bezier(.2,.9,.25,1);
}
.hs-col-login-reveal__result.is-detail{
  align-items:stretch;
  text-align:left;
}
.hs-col-login-reveal.is-revealed .hs-col-login-reveal__opener{
  opacity:0;
  transform:translateY(-28px) scale(.88);
  pointer-events:none;
  position:absolute;
  left:28px;
  right:28px;
  top:28px;
}
.hs-col-login-reveal.is-revealed .hs-col-login-reveal__result{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}
.hs-col-reveal-detail-top{
  display:flex;
  justify-content:flex-start;
  width:100%;
  margin:0 0 14px;
}
.hs-col-reveal-modal-grid{
  width:100%;
  margin-top:6px;
}
.hs-col-reveal-detail-actions{
  display:flex;
  justify-content:center;
  margin-top:18px;
}
.hs-col-reveal-detail-actions .hs-col-pack-close{
  margin-top:0;
}
@keyframes hs-col-login-pack-intro{
  0%{transform:scale(.75) rotate(-8deg);opacity:0}
  55%{transform:scale(1.06) rotate(3deg);opacity:1}
  100%{transform:scale(1) rotate(0deg);opacity:1}
}
.hs-col-pack-close{
  margin-top:10px;
  padding:10px 24px;
  background:linear-gradient(135deg,var(--hs-col-accent),var(--hs-col-accent2));
  color:#fff;font-weight:900;border-radius:999px;
  border:none;cursor:pointer;
  box-shadow:0 8px 20px rgba(255,90,30,.25);
  transition:transform .2s;
}
.hs-col-pack-close:hover{transform:translateY(-1px)}

/* ============ PROGRESS WIDGET (compact) ============ */
.hs-col-progress-box{overflow:hidden}
.hs-col-progress-head{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin-bottom:14px;
}
@media(max-width:640px){.hs-col-progress-head{grid-template-columns:repeat(2,1fr)}}
.hs-col-pc-main{
  padding:10px 12px;
  background:var(--hs-col-surface2);
  border:1px solid var(--hs-col-border);
  border-radius:12px;
}
.hs-col-pc-numbers{
  font-weight:900;
  font-size:22px;
  letter-spacing:-.4px;
  color:#fff;
}
.hs-col-pc-numbers b{
  background:linear-gradient(135deg,#fff,#ff8a57);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hs-col-pc-numbers span{color:var(--hs-col-muted);font-weight:700;font-size:14px}
.hs-col-pc-label{font-size:11px;color:var(--hs-col-muted);font-weight:700;text-transform:uppercase;letter-spacing:.4px;margin-top:2px}
.hs-col-progress-big{margin-bottom:18px}
.hs-col-pbar{height:14px;background:rgba(255,255,255,.05);border-radius:999px;border:1px solid var(--hs-col-border);overflow:hidden}
.hs-col-pbar-fill{
  height:100%;
  background:linear-gradient(90deg,var(--hs-col-accent),#ff2e82 60%,#a855f7);
  border-radius:999px;
  box-shadow:0 0 20px rgba(255,90,30,.3);
  transition:width 1.2s cubic-bezier(.2,.9,.25,1);
  position:relative;
}
.hs-col-pbar-fill::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  animation:hs-col-glass-sweep 2.5s ease-in-out infinite;
}
@keyframes hs-col-glass-sweep{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(100%)}
}

.hs-col-rarity-bars{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.hs-col-rbar-row{
  display:grid;
  grid-template-columns:100px 1fr 100px;
  gap:12px;
  align-items:center;
}
@media(max-width:560px){
  .hs-col-rbar-row{grid-template-columns:90px 1fr 80px;font-size:12px}
}
.hs-col-rbar-lbl{
  display:flex;align-items:center;gap:7px;
  font-weight:800;font-size:13px;
}
.hs-col-rbar-lbl span{
  width:10px;height:10px;border-radius:3px;display:inline-block;
  box-shadow:0 0 8px currentColor;
}
.hs-col-rbar-bar{
  height:10px;background:rgba(255,255,255,.04);
  border-radius:999px;overflow:hidden;
  border:1px solid var(--hs-col-border);
}
.hs-col-rbar-fill{height:100%;border-radius:999px;transition:width .9s cubic-bezier(.2,.9,.25,1)}
.hs-col-rbar-cnt{text-align:right;font-size:12px;color:var(--hs-col-muted);font-weight:700}

/* ============ TRADING ============ */
.hs-col-tabs.hs-col-trade-tabs{
  display:flex;flex-wrap:wrap;
  border-bottom:1px solid var(--hs-col-border);
  margin-bottom:16px;
  gap:2px;
}
.hs-col-badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:22px;height:22px;padding:0 7px;
  background:var(--hs-col-accent);
  color:#fff;font-weight:900;font-size:11px;
  border-radius:999px;margin-left:5px;
}
.hs-col-trade-form{display:flex;flex-direction:column;gap:14px}
.hs-col-trade-form-row{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;
}
@media(max-width:780px){.hs-col-trade-form-row{grid-template-columns:1fr}}
.hs-col-trade-col{display:flex;flex-direction:column;gap:8px}
.hs-col-trade-label{font-weight:800;color:#fff;font-size:13px}
.hs-col-trade-user,.hs-col-trade-msg{
  width:100%;
  background:rgba(255,255,255,.04);
  border:1px solid var(--hs-col-border-strong);
  color:#fff;padding:9px 12px;border-radius:12px;
  font-weight:500;outline:none;
  transition:border-color .2s, box-shadow .2s;
  font-family:inherit;
}
.hs-col-trade-user:focus,.hs-col-trade-msg:focus{
  border-color:rgba(255,90,30,.5);box-shadow:0 0 0 3px rgba(255,90,30,.12);
}
.hs-col-trade-card-pool{
  max-height:360px;overflow:auto;
  padding:10px;
  background:var(--hs-col-surface2);
  border:1px solid var(--hs-col-border);
  border-radius:14px;
  display:flex;flex-direction:column;gap:8px;
}
.hs-col-trade-card-sel{
  display:grid;
  grid-template-columns:58px 1fr auto;
  gap:10px;align-items:center;
  padding:7px 9px;
  background:#121218;
  border:1px solid var(--hs-col-border);
  border-left:3px solid transparent;
  border-radius:10px;
  transition:border-color .2s, background .2s;
}
.hs-col-trade-card-sel::before{display:none}
.hs-col-trade-card-sel{border-left:3px solid; border-image:linear-gradient(180deg, transparent, transparent) 1}
.hs-col-trade-card-sel{position:relative}
.hs-col-trade-card-sel::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:3px 0 0 3px;background:var(--grad);display:block;
}
.hs-col-tcsel-img{
  width:58px;height:82px;border-radius:8px;
  background-size:cover;background-position:center;
  background-color:#0b0b0d;
  border:1px solid var(--hs-col-border-strong);
}
.hs-col-tcsel-title{font-weight:800;font-size:13px}
.hs-col-tcsel-sub{font-size:11px;color:var(--hs-col-muted);margin-top:3px}
.hs-col-tcsel-add{
  background:rgba(255,90,30,.12);
  border:1px solid rgba(255,90,30,.4);
  color:#ffa47a;
  padding:6px 10px;
  border-radius:999px;
  font-weight:800;
  cursor:pointer;font-size:12px;
  transition:all .2s;
}
.hs-col-tcsel-add:hover{background:linear-gradient(135deg,var(--hs-col-accent),var(--hs-col-accent2));color:#fff}
.hs-col-tcsel-add.is-added{background:rgba(16,185,129,.14);border-color:rgba(16,185,129,.45);color:#4ade80}
.hs-col-trade-summary{
  display:grid;grid-template-columns:1fr auto 1fr;gap:16px;
  padding:16px;
  background:var(--hs-col-surface2);
  border:1px solid var(--hs-col-border);
  border-radius:14px;
  align-items:center;
}
.hs-col-trade-summary-side{display:flex;flex-direction:column;gap:6px;min-height:60px}
.hs-col-trade-sum-arrow{font-size:28px;color:var(--hs-col-muted);text-align:center}
.hs-col-trade-summary-list{display:flex;flex-direction:column;gap:4px}
.hs-col-trade-summary-item{
  display:grid;grid-template-columns:18px 1fr auto;gap:8px;align-items:center;
  padding:5px 9px;
  background:rgba(255,255,255,.03);
  border-radius:8px;font-size:13px;
}
.hs-col-trade-summary-item .hs-tx-rarity{
  width:12px;height:12px;border-radius:3px;background:#666;
}
.hs-col-trade-summary-item .hs-tx-title{font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hs-col-trade-summary-item .hs-tx-qty{color:var(--hs-col-muted);font-weight:800;font-size:12px}
.hs-col-trade-summary-item .hs-tx-remove{
  background:transparent;border:none;color:#ef4444;cursor:pointer;font-weight:900;padding:0 4px;
}
.hs-col-trade-list{display:flex;flex-direction:column;gap:12px}
.hs-col-trade-row{
  padding:14px 16px;
  background:var(--hs-col-surface2);
  border:1px solid var(--hs-col-border);
  border-radius:14px;
}
.hs-col-trade-head{
  display:flex;gap:12px;align-items:center;
  padding-bottom:10px;margin-bottom:10px;
  border-bottom:1px solid var(--hs-col-border);
}
.hs-col-trade-avatar{width:44px;height:44px;border-radius:50%;background:#222;border:2px solid var(--hs-col-border)}
.hs-col-trade-other{flex:1}
.hs-col-trade-name{font-weight:900;color:#fff}
.hs-col-trade-date{font-size:12px;color:var(--hs-col-muted);margin-top:2px}
.hs-col-trade-status{
  padding:5px 12px;border-radius:999px;font-weight:800;font-size:11px;letter-spacing:.4px;text-transform:uppercase;
}
.hs-col-trade-status.pending{background:rgba(245,158,11,.14);color:#fbbf24;border:1px solid rgba(245,158,11,.3)}
.hs-col-trade-status.accepted{background:rgba(16,185,129,.14);color:#4ade80;border:1px solid rgba(16,185,129,.3)}
.hs-col-trade-status.declined{background:rgba(239,68,68,.14);color:#f87171;border:1px solid rgba(239,68,68,.3)}
.hs-col-trade-status.cancelled{background:rgba(156,163,175,.14);color:#9ca3af;border:1px solid rgba(156,163,175,.3)}
.hs-col-trade-body{
  display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;
}
.hs-col-trade-cards{display:flex;flex-wrap:wrap;gap:6px}
.hs-col-trade-cards .hs-col-mini{width:36px;height:50px}
.hs-col-trade-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:12px;flex-wrap:wrap}
.hs-col-trade-live-update{
  margin:0 0 14px;
  padding:10px 12px;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(255,90,30,.12), rgba(255,90,30,.06));
  border:1px solid rgba(255,90,30,.22);
  box-shadow:0 12px 28px rgba(0,0,0,.18);
}
.hs-col-trade-live-update .hs-btn{
  width:100%;
  justify-content:center;
}
.hs-col-trade-note{
  padding:12px 14px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;
  color:#d8d8e6;
  font-size:13px;
  line-height:1.55;
}
.hs-col-trade-pool-head{
  display:flex;align-items:center;gap:10px;
  padding:10px 10px 0;
  border-bottom:1px solid var(--hs-col-border);
  margin-bottom:10px;
}
.hs-col-trade-empty-cards{
  color:var(--hs-col-muted);
  font-size:12px;
  padding:6px 0;
}
.hs-col-trade-xp-box,
.hs-col-counter-xp{
  display:inline-flex;align-items:center;justify-content:center;
  margin-top:12px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,90,30,.12);
  border:1px solid rgba(255,90,30,.28);
  color:#ffb38f;
  font-weight:800;
  font-size:12px;
}
.hs-col-counter-xp{margin-top:10px}
.hs-col-trade-note-box{
  margin-top:12px;
  padding:12px 14px;
  background:rgba(255,255,255,.03);
  border-left:3px solid var(--hs-col-accent);
  border-radius:10px;
  color:#ececf4;
  font-size:13px;
  line-height:1.5;
}
.hs-col-trade-thread{
  margin-top:14px;
  padding:14px;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
}
.hs-col-trade-thread-head{
  font-weight:900;
  color:#fff;
  margin-bottom:10px;
}
.hs-col-trade-thread-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  max-height:260px;
  overflow:auto;
  padding-right:4px;
}
.hs-col-trade-thread-empty{
  color:var(--hs-col-muted);
  font-size:13px;
  padding:6px 2px;
}
.hs-col-trade-message{
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.hs-col-trade-message-avatar{
  width:34px;
  height:34px;
  border-radius:999px;
  object-fit:cover;
  border:1px solid rgba(255,255,255,.1);
  background:#111;
}
.hs-col-trade-message-body{
  flex:1;
  min-width:0;
  padding:10px 12px;
  border-radius:12px;
  background:#11111a;
  border:1px solid rgba(255,255,255,.06);
}
.hs-col-trade-message--system .hs-col-trade-message-body{
  background:rgba(255,90,30,.08);
  border-color:rgba(255,90,30,.18);
}
.hs-col-trade-message-meta{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  margin-bottom:4px;
}
.hs-col-trade-message-meta strong{
  color:#fff;
  font-size:12px;
}
.hs-col-trade-message-meta span{
  color:var(--hs-col-muted);
  font-size:11px;
}
.hs-col-trade-message-text{
  color:#e9e9f2;
  font-size:13px;
  line-height:1.5;
  white-space:pre-wrap;
  word-break:break-word;
}
.hs-col-trade-message-form{
  display:flex;
  gap:10px;
  margin-top:12px;
  align-items:flex-end;
}
.hs-col-trade-message-input{
  flex:1;
  min-height:74px;
  resize:vertical;
  background:rgba(255,255,255,.04);
  border:1px solid var(--hs-col-border-strong);
  color:#fff;
  padding:10px 12px;
  border-radius:12px;
  font-family:inherit;
}
.hs-col-trade-message-input:focus{
  outline:none;
  border-color:rgba(255,90,30,.5);
  box-shadow:0 0 0 3px rgba(255,90,30,.12);
}
.hs-col-trade-counter-wrap{
  margin-top:14px;
}
.hs-col-trade-counter{
  padding:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
}
.hs-col-trade-form-row--counter{
  margin-top:14px;
}
@media(max-width:780px){
  .hs-col-trade-summary,
  .hs-col-trade-body{
    grid-template-columns:1fr;
  }
  .hs-col-trade-sum-arrow{
    display:none;
  }
  .hs-col-trade-message-form{
    flex-direction:column;
    align-items:stretch;
  }
}
.hs-col-trade-empty{
  padding:32px;text-align:center;color:var(--hs-col-muted);font-weight:600;
}

/* ============ CARD DETAIL MODAL ============ */
.hs-col-modal{
  position:fixed;inset:0;
  background:rgba(0,0,0,.82);
  display:grid;place-items:center;
  z-index:99998;
  backdrop-filter:blur(8px);
  animation:hs-col-fadein .2s ease;
  padding:20px;
}
.hs-col-modal-inner{
  width:min(960px, 100%);
  max-height:92vh;overflow:auto;
  background:linear-gradient(180deg,#1a1a23,#0b0b11);
  border:1px solid var(--hs-col-border-strong);
  border-radius:22px;
  box-shadow:0 40px 120px rgba(0,0,0,.7);
  position:relative;
}
.hs-col-modal-close{
  position:absolute;top:14px;right:14px;z-index:10;
  width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.06);
  border:1px solid var(--hs-col-border);
  color:#fff;font-size:20px;font-weight:900;
  cursor:pointer;display:grid;place-items:center;
  transition:transform .2s, background .2s;
}
.hs-col-modal-close:hover{transform:rotate(90deg);background:rgba(255,90,30,.2);border-color:rgba(255,90,30,.4)}
.hs-col-modal-grid{
  display:grid;
  grid-template-columns:minmax(300px,380px) 1fr;
  gap:24px;
  padding:26px;
}
@media(max-width:820px){.hs-col-modal-grid{grid-template-columns:1fr}}
.hs-col-modal-card-wrap{
  position:sticky;top:20px;
}
.hs-col-modal-card-wrap .hs-col-card{
  aspect-ratio:0.715;
  max-width:380px;margin:0 auto;
  transform:none!important;
}
.hs-col-modal-card-wrap .hs-col-card:hover{filter:none;transform:none}
.hs-col-modal-details h2{
  font-size:28px;font-weight:900;letter-spacing:-.4px;color:#fff;margin:0 0 6px;
}
.hs-col-modal-rarity{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 12px;border-radius:999px;
  font-weight:800;font-size:12px;letter-spacing:.4px;
  color:#fff;text-transform:uppercase;
}
.hs-col-modal-meta{
  display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:18px 0;
}
.hs-col-modal-meta > div{
  padding:10px 12px;
  background:var(--hs-col-surface2);
  border:1px solid var(--hs-col-border);
  border-radius:12px;
}
.hs-col-modal-meta b{display:block;font-size:11px;color:var(--hs-col-muted);font-weight:800;text-transform:uppercase;letter-spacing:.4px;margin-bottom:3px}
.hs-col-modal-meta span{color:#fff;font-weight:700}
.hs-col-modal-stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px;
}
.hs-col-modal-stats > div{
  padding:12px;text-align:center;
  background:var(--hs-col-surface2);
  border:1px solid var(--hs-col-border);
  border-radius:12px;
}
.hs-col-modal-stats strong{display:block;font-size:22px;font-weight:900;color:#fff}
.hs-col-modal-stats span{font-size:11px;color:var(--hs-col-muted);font-weight:800;text-transform:uppercase;letter-spacing:.4px}
.hs-col-hint-box{
  margin-top:16px;padding:12px 14px;
  background:linear-gradient(135deg,rgba(255,90,30,.12),rgba(168,85,247,.08));
  border:1px solid rgba(255,90,30,.25);
  border-radius:12px;
}
.hs-col-hint-box b{display:block;color:#ffa47a;margin-bottom:4px;font-weight:900;font-size:13px}
.hs-col-hint-box p{margin:0;color:#e7d8cf;font-size:13px;font-weight:500;line-height:1.5}
.hs-col-related{margin-top:20px}
.hs-col-related h3{font-size:16px;font-weight:900;color:#fff;margin:0 0 12px;display:flex;align-items:center;gap:8px}
.hs-col-related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.hs-col-related-item{
  padding:8px;
  background:var(--hs-col-surface2);
  border:1px solid var(--hs-col-border);
  border-radius:12px;
  text-decoration:none;
  display:block;
  transition:transform .2s,border-color .2s;
}
.hs-col-related-item:hover{transform:translateY(-2px);border-color:rgba(255,90,30,.4)}
.hs-col-related-thumb{
  width:100%;aspect-ratio:16/9;
  background-size:cover;background-position:center;
  background-color:#111;border-radius:8px;margin-bottom:7px;
}
.hs-col-related-item b{display:block;color:#fff;font-size:12px;font-weight:800;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hs-col-related-item span{font-size:11px;color:var(--hs-col-muted);font-weight:600}

/* ============ RARITY BARS INLINE (for showcase) ============ */
.hs-col-showcase .hs-col-grid{margin-top:8px}

/* ============ CARDS MINE/OWNED INDICATOR (for public catalog) ============ */
.hs-col-card.is-owned::after{
  content:"✓";
  position:absolute;
  top:10px;right:10px;left:auto;
  width:26px;height:26px;border-radius:50%;
  background:linear-gradient(135deg,#10b981,#059669);
  color:#fff;font-weight:900;font-size:15px;
  display:grid;place-items:center;
  z-index:9;
  box-shadow:0 4px 12px rgba(16,185,129,.4);
  pointer-events:none;
}
.hs-col-card.is-not-owned .hs-col-card-img,
.hs-col-card.is-not-owned .hs-col-card-info{
  filter:grayscale(0.7) brightness(0.55);
  transition:filter .25s ease;
}
.hs-col-card.is-not-owned:hover .hs-col-card-img,
.hs-col-card.is-not-owned:hover .hs-col-card-info{filter:grayscale(0.1) brightness(0.9)}
.hs-col-card.is-not-owned::before{
  content:"🔒";
  position:absolute;
  top:34%;
  left:50%;
  transform:translate(-50%,-50%);
  font-size:24px;
  z-index:7;
  opacity:.88;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.6));
  pointer-events:none;
}

/* ============ MOBILE MENU / INTEGRATION ============ */
.hs-empty{padding:40px;color:var(--hs-col-muted);text-align:center;font-weight:600}

/* Scrollbars (for pools) */
.hs-col-trade-card-pool::-webkit-scrollbar{width:8px}
.hs-col-trade-card-pool::-webkit-scrollbar-track{background:transparent}
.hs-col-trade-card-pool::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:999px}
.hs-col-trade-card-pool::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.14)}

/* ============ SINGLE CARD HERO ============ */
.hs-col-single-card{
  position:relative;
  width:100%;
  aspect-ratio:5 / 7;
  border-radius:22px;
  isolation:isolate;
  cursor:grab;
  perspective:1400px;
  transform-style:preserve-3d;
  transition:transform .35s ease, filter .35s ease;
  filter:drop-shadow(0 22px 38px rgba(0,0,0,.32));
  --mx:50%;
  --my:50%;
  --rx:3deg;
  --ry:-4deg;
}
.hs-col-single-card.is-dragging-card{
  cursor:grabbing;
}
.hs-col-single-card:hover{
  transform:translateY(-6px) scale(1.005);
  filter:drop-shadow(0 30px 56px rgba(0,0,0,.46));
}
.hs-col-single-card.is-dragging-card{
  transform:translateY(-6px) rotateX(var(--rx)) rotateY(var(--ry)) scale(1.005);
  filter:drop-shadow(0 30px 56px rgba(0,0,0,.46));
}
.hs-col-single-card:hover .hs-col-single-card__img,
.hs-col-single-card.is-dragging-card .hs-col-single-card__img{
  transform:translate3d(calc((var(--mx) - 50%) / 90), calc((var(--my) - 50%) / 104), 0) scale(1.012);
  filter:saturate(1.03) contrast(1.01);
}
.hs-col-single-card:hover .hs-col-single-card__foil,
.hs-col-single-card.is-dragging-card .hs-col-single-card__foil{
  opacity:.56;
}
.hs-col-single-card__frame{
  position:absolute;
  inset:0;
  padding:3px;
  border-radius:22px;
  background:linear-gradient(180deg, #101018 0%, #08080d 100%);
  box-shadow:
    0 0 0 1px var(--rarity-color),
    0 20px 50px rgba(0,0,0,.45),
    0 0 36px 8px var(--rarity-glow);
  overflow:hidden;
  background-size:180% 180%;
}
.hs-col-single-card__frame::before{
  content:"";
  position:absolute;
  inset:3px;
  border-radius:19px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0) 18%, rgba(0,0,0,.16) 78%, rgba(0,0,0,.38) 100%);
  pointer-events:none;
  z-index:4;
}
.hs-col-single-card__frame::after{
  content:"";
  position:absolute;
  inset:10px;
  border-radius:14px;
  border:1px solid var(--rarity-color);
  pointer-events:none;
  z-index:4;
}
.hs-col-single-card__media{
  position:absolute;
  inset:3px;
  border-radius:19px;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 18%, rgba(255,90,30,.10), transparent 36%),
    linear-gradient(180deg, #171721 0%, #0b0b10 58%, #060609 100%);
}
.hs-col-single-card__brand-bg,
.hs-col-single-card__brand-text,
.hs-col-single-card__gloss,
.hs-col-single-card__foil{
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
}
.hs-col-single-card__brand-bg{
  z-index:0;
  background:
    linear-gradient(135deg, rgba(255,255,255,.03), rgba(255,255,255,0) 35%),
    linear-gradient(180deg, #171721 0%, #0b0b10 58%, #060609 100%);
}
.hs-col-single-card__brand-bg::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size:24px 24px;
  opacity:.2;
}
.hs-col-single-card__brand-text{
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:26px;
  font-size:clamp(24px, 5vw, 44px);
  line-height:.95;
  letter-spacing:.08em;
  font-weight:900;
  text-transform:uppercase;
  color:rgba(255,255,255,.10);
  text-shadow:0 8px 24px rgba(0,0,0,.48);
}
.hs-col-single-card.has-card-art .hs-col-single-card__brand-text{
  opacity:.5;
}
.hs-col-single-card__media::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.22), rgba(255,255,255,0) 26%),
    linear-gradient(130deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 18%, rgba(255,255,255,0) 62%, rgba(255,255,255,.08) 100%);
  mix-blend-mode:screen;
  opacity:.45;
  pointer-events:none;
  z-index:5;
}
.hs-col-single-card__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center top;
  z-index:2;
  transform:translate3d(0,0,0) scale(1.005);
  filter:saturate(1.02) contrast(1.01);
  transition:transform .25s ease, filter .25s ease;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  will-change:auto;
}
.hs-col-single-card__fallback{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  text-align:center;
  font-weight:900;
  font-size:clamp(28px, 5vw, 42px);
  line-height:1;
  letter-spacing:-1px;
  text-transform:uppercase;
  background:linear-gradient(135deg,#ff8a57,#ff5a1e 45%,#a855f7);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 8px 24px rgba(255,90,30,.35));
  z-index:2;
}
.hs-col-single-card__gloss{
  z-index:3;
  background:
    linear-gradient(180deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.03) 18%, rgba(255,255,255,0) 38%),
    linear-gradient(180deg, rgba(255,255,255,0) 40%, rgba(0,0,0,.12) 70%, rgba(0,0,0,.46) 100%);
}
.hs-col-single-card__foil{
  inset:0;
  z-index:4;
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.15), rgba(255,255,255,.04) 12%, rgba(255,255,255,0) 34%),
    linear-gradient(115deg, transparent 18%, rgba(255,255,255,.03) 28%, rgba(255,255,255,.14) 38%, rgba(255,255,255,.03) 48%, transparent 60%),
    linear-gradient(135deg, transparent 0%, rgba(255,90,30,.05) 28%, rgba(168,85,247,.07) 48%, transparent 72%);
  mix-blend-mode:screen;
  opacity:.18;
  transition:opacity .3s ease, transform .3s ease;
  animation:none;
}
.hs-col-single-card__overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 18%, rgba(0,0,0,.04) 42%, rgba(0,0,0,.28) 62%, rgba(0,0,0,.92) 100%);
  pointer-events:none;
  z-index:5;
}
.hs-col-single-card__stamp{
  position:absolute;
  left:14px;
  bottom:14px;
  z-index:6;
  padding:7px 11px;
  border-radius:999px;
  background:rgba(0,0,0,.46);
  border:1px solid rgba(255,255,255,.14);
  color:#f5f5fb;
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.9px;
  backdrop-filter:blur(12px);
}
.hs-col-single-card__content{
  position:absolute;
  left:14px;
  right:14px;
  bottom:14px;
  z-index:6;
  padding:14px 14px 12px;
  border-radius:18px;
  background:
    linear-gradient(180deg, rgba(12,12,18,.08), rgba(12,12,18,.72) 16%, rgba(7,7,11,.92) 100%);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 12px 24px rgba(0,0,0,.25);
  backdrop-filter:blur(14px);
  transition:transform .25s ease;
}
.hs-col-single-card__number,
.hs-col-single-card__rarity,
.hs-col-single-card__qty{
  position:absolute;
  z-index:6;
  border-radius:999px;
  font-weight:900;
  letter-spacing:.4px;
  backdrop-filter:blur(10px);
}
.hs-col-single-card__number{
  top:12px;
  left:12px;
  padding:5px 10px;
  font-size:12px;
  color:#fff;
  background:rgba(0,0,0,.56);
  border:1px solid rgba(255,255,255,.14);
}
.hs-col-single-card__rarity{
  right:12px;
  bottom:12px;
  padding:6px 12px;
  font-size:11px;
  text-transform:uppercase;
  color:#fff;
  box-shadow:0 10px 24px rgba(0,0,0,.28);
}
.hs-col-single-card__qty{
  top:12px;
  right:12px;
  padding:5px 10px;
  font-size:12px;
  color:#fff;
  background:linear-gradient(135deg, var(--hs-col-accent), var(--hs-col-accent2));
  box-shadow:0 10px 24px rgba(255,90,30,.35);
}
.hs-col-single-card__kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0 0 9px;
  padding:5px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.1);
  color:#ffd4bf;
  font-size:10px;
  line-height:1;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.8px;
}
.hs-col-single-card__title{
  color:#fff;
  font-size:24px;
  line-height:1;
  letter-spacing:-.7px;
  font-weight:900;
  margin:0 0 7px;
  text-shadow:0 4px 18px rgba(0,0,0,.48);
}
.hs-col-single-card__sub{
  color:#e6e6ef;
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.5px;
  margin:0 0 8px;
}
.hs-col-single-card__micro{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 10px;
  color:#b9b9c8;
  font-size:11px;
  font-weight:700;
}
.hs-col-single-card__micro span{
  position:relative;
}
.hs-col-single-card__micro span:not(:last-child)::after{
  content:"•";
  margin-left:8px;
  color:rgba(255,255,255,.35);
}
.hs-col-single-card__chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.hs-col-single-card__chips span{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:5px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  color:#f1f1f7;
  font-size:11px;
  font-weight:700;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.hs-col-single-card__shine{
  position:absolute;
  inset:3px;
  border-radius:19px;
  pointer-events:none;
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.24), rgba(255,255,255,.08) 10%, rgba(255,255,255,0) 28%),
    linear-gradient(115deg, transparent 12%, rgba(255,255,255,.06) 18%, rgba(255,255,255,.34) 24%, rgba(255,255,255,.06) 30%, transparent 38%),
    linear-gradient(135deg, transparent 0%, rgba(255,90,30,.08) 22%, rgba(168,85,247,.10) 42%, transparent 66%);
  mix-blend-mode:screen;
  opacity:.78;
  z-index:5;
  animation:hs-col-single-foil 5.5s ease-in-out infinite;
}
.hs-col-single-card:hover .hs-col-single-card__img{
  transform:scale(1.05) translate3d(calc((var(--mx) - 50%) / 28), calc((var(--my) - 50%) / 40), 0);
  will-change:transform;
}
.hs-col-single-card:hover .hs-col-single-card__content{
  transform:translateY(-2px);
}
.hs-col-single-card:hover .hs-col-single-card__foil,
.hs-col-single-card.is-dragging-card .hs-col-single-card__foil{
  animation:hs-col-single-foil 5.5s ease-in-out infinite;
}
.hs-col-single-card--rarity-mythic .hs-col-single-card__frame{
  box-shadow:
    0 0 0 1px var(--rarity-color),
    0 0 32px 6px var(--rarity-glow),
    0 24px 54px rgba(0,0,0,.5),
    0 0 60px rgba(255,58,134,.18);
}
@keyframes hs-col-single-foil{
  0%,100%{transform:translateX(-8%) translateY(0);opacity:.55}
  50%{transform:translateX(8%) translateY(-1%);opacity:.9}
}
@media(max-width:900px){
  .hs-col-login-reveal__panel{
    padding:24px 20px 22px;
  }
  .hs-col-pack-cards-stage{
    grid-template-columns:repeat(auto-fit,minmax(125px,180px));
    max-width:100%;
  }
  .hs-col-pack-cards-stage > *{
    max-width:180px;
  }
  .hs-col-pack-cards-stage.is-many-pack{
    grid-template-columns:repeat(4,minmax(0,124px));
  }
  .hs-col-pack-cards-stage.is-many-pack > *,
  .hs-col-pack-cards-stage.is-huge-pack > *{
    max-width:124px;
  }
  .hs-col-pack-cards-stage.is-huge-pack{
    grid-template-columns:repeat(4,minmax(0,106px));
    gap:8px;
    max-width:448px;
  }
  .hs-col-pack-cards-stage > :only-child{
    max-width:min(240px, 56vw);
  }
  .hs-col-login-reveal.is-revealed .hs-col-login-reveal__opener{
    left:20px;
    right:20px;
    top:20px;
  }
  .hs-col-single-card{max-width:380px}
  .hs-col-single-card:hover{transform:none}
  .hs-col-single-card__title{font-size:22px}
  .hs-col-single-card__content{left:12px;right:12px;bottom:12px;padding:12px 12px 11px}
  .hs-col-single-card:hover .hs-col-single-card__img,
  .hs-col-single-card:hover .hs-col-single-card__content{transform:none}
}

/* ============ COLLECTIBLES PROMO WIDGET ============ */
.hs-col-promo{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(280px,420px);
  gap:28px;
  padding:28px;
  border-radius:26px;
  overflow:hidden;
  background:
    radial-gradient(circle at top right, rgba(168,85,247,.18), transparent 26%),
    radial-gradient(circle at bottom left, rgba(255,90,30,.18), transparent 32%),
    linear-gradient(135deg, #15151d 0%, #0a0a0f 100%);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 22px 60px rgba(0,0,0,.34);
}
.hs-col-promo__bg{
  position:absolute;
  inset:0;
  background:
    linear-gradient(115deg, transparent 0%, rgba(255,255,255,.03) 18%, transparent 36%),
    radial-gradient(circle at 15% 25%, rgba(255,90,30,.10), transparent 24%);
  pointer-events:none;
}
.hs-col-promo__content,
.hs-col-promo__visual{
  position:relative;
  z-index:1;
}
.hs-col-promo__content{
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.hs-col-promo__eyebrow{
  display:inline-flex;
  align-items:center;
  width:max-content;
  min-height:30px;
  padding:0 12px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  color:#ffb290;
  font-size:11px;
  font-weight:900;
  letter-spacing:.8px;
  text-transform:uppercase;
  margin-bottom:14px;
}
.hs-col-promo__title{
  margin:0 0 12px;
  color:#fff;
  font-size:clamp(28px, 4vw, 44px);
  line-height:.98;
  letter-spacing:-1.2px;
  font-weight:900;
}
.hs-col-promo__text{
  color:#cbcbda;
  font-size:15px;
  line-height:1.7;
  max-width:62ch;
}
.hs-col-promo__stats{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:18px 0 0;
}
.hs-col-promo__stats span{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:0 12px;
  border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.07);
  color:#eef0f7;
  font-size:12px;
  font-weight:800;
}
.hs-col-promo__actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:20px;
}
.hs-col-promo__visual{
  display:flex;
  align-items:center;
  justify-content:center;
}
.hs-col-promo-card{
  position:relative;
  width:min(100%, 340px);
  aspect-ratio:5 / 7;
  border-radius:24px;
  transform:rotate(4deg);
  filter:drop-shadow(0 24px 44px rgba(0,0,0,.42));
}
.hs-col-promo-card::before{
  content:"";
  position:absolute;
  inset:26px -18px -18px 26px;
  border-radius:24px;
  background:linear-gradient(135deg, rgba(255,90,30,.2), rgba(168,85,247,.16));
  filter:blur(16px);
  z-index:0;
}
.hs-col-promo-card__frame{
  position:absolute;
  inset:0;
  border-radius:24px;
  padding:3px;
  background:var(--rarity-grad, linear-gradient(135deg,#ff5a1e,#a855f7));
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08),
    0 0 34px 6px var(--rarity-glow, rgba(255,90,30,.28));
  overflow:hidden;
}
.hs-col-promo-card__media{
  position:relative;
  width:100%;
  height:100%;
  border-radius:21px;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 15%, rgba(255,255,255,.14), transparent 24%),
    linear-gradient(135deg, #171721 0%, #09090d 100%);
  background-size:cover;
  background-position:center;
}
.hs-col-promo-card__media::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 24%, rgba(0,0,0,.06) 48%, rgba(0,0,0,.82) 100%);
  pointer-events:none;
}
.hs-col-promo-card__foil{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.24), rgba(255,255,255,0) 18%),
    linear-gradient(120deg, transparent 0%, rgba(255,255,255,.05) 20%, rgba(255,255,255,.34) 30%, rgba(255,255,255,.06) 38%, transparent 50%),
    linear-gradient(135deg, transparent 0%, rgba(255,90,30,.08) 26%, rgba(168,85,247,.12) 44%, transparent 70%);
  mix-blend-mode:screen;
  animation:hs-col-promo-foil 5.2s ease-in-out infinite;
}
.hs-col-promo-card__badge,
.hs-col-promo-card__number{
  position:absolute;
  z-index:2;
  border-radius:999px;
  backdrop-filter:blur(10px);
  font-weight:900;
  letter-spacing:.4px;
}
.hs-col-promo-card__badge{
  right:14px;
  top:14px;
  min-height:30px;
  padding:0 12px;
  display:inline-flex;
  align-items:center;
  background:rgba(0,0,0,.46);
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
  font-size:11px;
  text-transform:uppercase;
}
.hs-col-promo-card__number{
  left:14px;
  top:14px;
  min-height:30px;
  padding:0 11px;
  display:inline-flex;
  align-items:center;
  background:rgba(0,0,0,.46);
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
  font-size:11px;
}
.hs-col-promo-card__meta{
  position:absolute;
  left:14px;
  right:14px;
  bottom:14px;
  z-index:2;
  padding:16px 16px 14px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(10,10,16,.04), rgba(10,10,16,.76) 14%, rgba(7,7,11,.94) 100%);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(14px);
}
.hs-col-promo-card__name{
  color:#fff;
  font-size:22px;
  line-height:1;
  letter-spacing:-.8px;
  font-weight:900;
  margin-bottom:7px;
}
.hs-col-promo-card__type{
  color:#d3d3de;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.55px;
  font-weight:800;
}
@keyframes hs-col-promo-foil{
  0%,100%{transform:translateX(-10%);opacity:.62}
  50%{transform:translateX(10%);opacity:.95}
}
@media(max-width:900px){
  .hs-col-promo{
    grid-template-columns:1fr;
    gap:20px;
    padding:22px;
  }
  .hs-col-promo__visual{
    order:-1;
  }
  .hs-col-promo-card{
    width:min(100%, 320px);
    transform:none;
  }
}