/* 观野电竞 — 干员卡面图块
   位置：各页 hero 右侧（与首页主视觉同一视觉位）
   规格：整张卡面完整呈现，不裁切、不抠底 */

.hero-card{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
}

/* 卡面本体：高度随视口走，宽度按原图比例自动算，保证整图完整 */
.hc-frame{
  position:relative;
  height:clamp(340px,54vh,560px);
  aspect-ratio:1272/2540;
  max-width:100%;
  border-radius:8px;
  overflow:hidden;
  background:#0a0a0a;
  border:1px solid var(--line-2);
  box-shadow:
    0 30px 80px rgba(0,0,0,.65),
    0 0 0 1px rgba(232,234,237,.04),
    0 0 60px rgba(138,155,178,.06);
}
.hc-frame img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
/* 底部压暗，让卡面融进黑银体系 */
.hc-frame::after{
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,transparent 62%,rgba(5,5,5,.5) 100%);
}

/* 四角准星（与首页主视觉同一语言） */
.hc-corner{position:absolute;width:20px;height:20px;border:2px solid var(--silver-3);z-index:4}
.hc-corner.tl{top:-1px;left:-1px;border-right:none;border-bottom:none}
.hc-corner.tr{top:-1px;right:-1px;border-left:none;border-bottom:none}
.hc-corner.bl{bottom:-1px;left:-1px;border-right:none;border-top:none}
.hc-corner.br{bottom:-1px;right:-1px;border-left:none;border-top:none}

/* 标签 */
.hc-tag{
  font-family:var(--mono);font-size:10px;letter-spacing:1.6px;color:var(--silver-2);
  padding:4px 9px;border:1px solid var(--line-2);border-radius:3px;
  background:rgba(10,10,10,.72);backdrop-filter:blur(4px);
  white-space:nowrap;
}
.hc-tag-top{
  position:absolute;top:12px;left:12px;z-index:5;
}
.hc-tags-bottom{
  position:absolute;left:12px;right:12px;bottom:12px;z-index:5;
  display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;
}

/* 卡面序号（左下角，装饰） */
.hc-idx{
  position:absolute;left:12px;bottom:12px;z-index:5;
  font-family:var(--mono);font-size:11px;letter-spacing:2px;color:var(--silver-3);
}

@media (max-width:860px){
  .hc-frame{height:auto;width:min(62vw,260px);aspect-ratio:1272/2540}
  .hero-card{margin:0 auto}
}