/* 共享"三选一"选项卡样式。结构统一,配色由各游戏覆盖这些变量:
     --draft-bg / --draft-bg-lit  卡片底色与选中态底色
     --draft-line                 边框
     --draft-ink / --draft-muted  文字
     --draft-accent               强调色(标题、数值)
     --draft-shadow               投影
   稀有度不只改边框:底色渐变 + 外发光 + 角标三重叠加,扫一眼就能分出轻重。 */
.draft-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* stretch:三张卡等高,便于横向比较同一行数值 */
  align-items: stretch;
  gap: 12px;
}

.draft-card {
  --rarity-tint: transparent;
  --rarity-glow: transparent;
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr;
  min-width: 0;
  min-height: 208px;
  gap: 10px;
  padding: 14px 13px 13px;
  border: 2px solid var(--draft-line, #344961);
  border-radius: 4px;
  background:
    linear-gradient(160deg, var(--rarity-tint), transparent 62%),
    var(--draft-bg, #101a2c);
  color: var(--draft-ink, #eff8ff);
  box-shadow: 3px 3px 0 var(--draft-shadow, rgba(0, 0, 0, .45));
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: transform 130ms ease, border-color 130ms ease, box-shadow 130ms ease, background-color 130ms ease;
}

.draft-card:hover:not(:disabled),
.draft-card:focus-visible {
  border-color: var(--draft-accent, #81f4ff);
  background-color: var(--draft-bg-lit, #16233a);
  transform: translateY(-3px);
  box-shadow: 3px 6px 0 var(--draft-shadow, rgba(0, 0, 0, .45)), 0 0 18px var(--rarity-glow);
  outline: none;
}

.draft-card:focus-visible { outline: 3px solid var(--draft-accent, #81f4ff); outline-offset: 3px; }
.draft-card:active:not(:disabled) { transform: translateY(-1px); }
.draft-card:disabled { cursor: default; filter: grayscale(.55) brightness(.72); }

/* 选中瞬间:压一下 + 强光,给点"确认了"的手感 */
.draft-card.is-picked {
  border-color: var(--draft-accent, #81f4ff);
  transform: scale(.97);
  box-shadow: 0 0 26px var(--draft-accent, #81f4ff);
  filter: brightness(1.18);
}

/* 稀有度:tint 上底色渐变,glow 上悬停光晕 */
.draft-card.rarity-rare { --rarity-tint: rgba(122, 110, 200, .30); --rarity-glow: rgba(122, 110, 200, .55); border-color: #756ec2; }
.draft-card.rarity-epic { --rarity-tint: rgba(200, 141, 72, .32); --rarity-glow: rgba(220, 155, 80, .6); border-color: #c28d48; }
.draft-card.rarity-legendary { --rarity-tint: rgba(242, 99, 109, .34); --rarity-glow: rgba(242, 99, 109, .62); border-color: #f2636d; }

.draft-badges { display: flex; flex-wrap: wrap; gap: 4px; min-height: 16px; }
.draft-rarity, .draft-tag {
  padding: 2px 6px;
  border-radius: 2px;
  font: 900 9px/1.4 "Courier New", monospace;
  font-style: normal;
  letter-spacing: 1px;
}
/* 角标底色默认跟随各游戏的稀有度色,但允许用 --draft-rarity-* 单独覆盖,
   避免冷色角标压在暖色卡面上显得突兀。 */
.draft-rarity { background: var(--draft-accent, #81f4ff); color: var(--draft-rarity-ink, #0b1220); }
.rarity-rare .draft-rarity { background: var(--draft-rarity-rare, #9c92ea); color: var(--draft-rarity-ink, #0b1220); }
.rarity-epic .draft-rarity { background: var(--draft-rarity-epic, #e0a75c); color: var(--draft-rarity-ink, #0b1220); }
.rarity-legendary .draft-rarity { background: var(--draft-rarity-legendary, #f2636d); color: #fff; }
.draft-tag { border: 1px solid var(--draft-line, #344961); color: var(--draft-muted, #8fa2b8); }
.draft-tag.is-new { border-color: var(--draft-accent, #81f4ff); color: var(--draft-accent, #81f4ff); }

.draft-icon { width: 44px; height: 44px; }

.draft-head { display: grid; gap: 3px; }
.draft-head em { color: var(--draft-muted, #8fa2b8); font: 700 10px "Courier New", monospace; font-style: normal; }
.draft-head strong { font-size: 16px; line-height: 1.2; overflow-wrap: anywhere; }
.draft-level { color: var(--draft-accent, #81f4ff); font: 700 10px "Courier New", monospace; }

.draft-body { display: flex; flex-direction: column; justify-content: flex-end; gap: 7px; min-width: 0; }
.draft-detail { color: var(--draft-muted, #8fa2b8); font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }

/* 数值对比行:旧值划掉 + 箭头 + 新值高亮,让三张卡能横向比较 */
.draft-stats { display: grid; gap: 3px; }
.draft-stat { display: flex; align-items: baseline; gap: 5px; font: 700 11px "Courier New", monospace; }
.draft-stat em { flex: 1 1 auto; min-width: 0; color: var(--draft-muted, #8fa2b8); font-style: normal; overflow-wrap: anywhere; }
.draft-stat s { color: var(--draft-muted, #8fa2b8); text-decoration: line-through; opacity: .75; }
.draft-stat s::after { content: " →"; text-decoration: none; display: inline-block; }
.draft-stat b { color: var(--draft-accent, #81f4ff); font-size: 12px; }

.draft-cost { color: var(--draft-accent, #81f4ff); font: 900 15px "Courier New", monospace; }
.draft-note { color: var(--draft-muted, #8fa2b8); font-size: 10px; }

/* 入场:错峰浮起,和各游戏原有的卡片动画节奏保持一致 */
.draft-grid .draft-card { animation: draft-card-in 300ms cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(var(--card-index, 0) * 60ms); }
@keyframes draft-card-in {
  from { opacity: 0; transform: translateY(14px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 560px) {
  .draft-grid { grid-template-columns: 1fr; gap: 8px; }
  .draft-card { min-height: 0; grid-template-rows: auto auto auto; grid-template-columns: 44px 1fr; grid-template-areas: "badges badges" "icon head" "icon body"; column-gap: 12px; padding: 11px 12px; }
  .draft-badges { grid-area: badges; }
  .draft-icon { grid-area: icon; }
  .draft-head { grid-area: head; }
  .draft-body { grid-area: body; }
}

@media (prefers-reduced-motion: reduce) {
  .draft-card, .draft-grid .draft-card { transition: none; animation: none; }
  .draft-card:hover:not(:disabled) { transform: none; }
}