/* ============================================================
   battle.css — ⚔️ 1v1 배틀 로비 · 랭킹 · 결과
   ============================================================ */

/* 탭 */
.bt-tabs{
  display:flex;gap:6px;padding:10px 16px 0;
}
.bt-tab{
  flex:1;padding:10px 0;border-radius:var(--r-s);font-size:13px;font-weight:700;
  color:var(--txt-2);background:var(--surface);border:1px solid var(--line);
}
.bt-tab.on{color:var(--accent);background:var(--accent-soft);border-color:var(--accent-line)}

/* 규칙 */
.bt-rule-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:8px}
.bt-rule-grid div{
  display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:var(--r-s);
  background:var(--surface-2);border:1px solid var(--line);
}
.bt-rule-grid b{font-size:16px;line-height:1}
.bt-rule-grid span{font-size:11.5px;color:var(--txt-2);font-weight:600;letter-spacing:-.02em}
.bt-pick-title{margin-top:6px}

/* 선수 고르기 */
.bt-slot.is-picked{border-color:var(--accent-line);box-shadow:0 0 0 1px var(--accent-line),var(--shadow-1)}
.bt-slot.is-picked .bt-check{color:var(--accent)}
.bt-slot.is-off{opacity:.45}
.rk-pts{color:var(--txt);font-weight:800}

/* 랭크 티어 */
.rk-tier{
  display:inline-flex;align-items:center;gap:2px;padding:1px 6px;border-radius:99px;
  font-size:10.5px;font-weight:800;letter-spacing:-.02em;font-style:normal;
  color:var(--rk);background:color-mix(in srgb,var(--rk) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--rk) 45%,transparent);
}
.rk-bronze{--rk:#c98a5a}.rk-silver{--rk:#c9d2dc}.rk-gold{--rk:#f0c04a}.rk-platinum{--rk:#5ad9c8}
.rk-diamond{--rk:#6fb6ff}.rk-master{--rk:#c08cff}
.rk-champion{--rk:#ff6b8b;animation:rkChamp 2.4s ease-in-out infinite}
@keyframes rkChamp{0%,100%{box-shadow:0 0 0 0 transparent}50%{box-shadow:0 0 10px -2px #ff6b8b}}

/* 랭킹 */
.bt-mybest{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:4px 0 10px;
  padding:10px 12px;border-radius:var(--r-m);background:var(--accent-soft);border:1px solid var(--accent-line);
}
.bt-mybest b{font-size:12.5px;white-space:nowrap}
.bt-mybest span{font-size:11.5px;color:var(--txt-2);text-align:right}
.rk-ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.rk-row{
  display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-m);
  background:var(--surface);border:1px solid var(--line);
}
.rk-row.top{border-color:rgba(240,192,74,.35)}
.rk-row.mine{border-color:var(--accent-line);background:var(--accent-soft)}
.rk-pos{flex:none;width:28px;text-align:center;font-size:14px;font-weight:800;color:var(--txt-2)}
.rk-row .slot-ovr{min-width:38px;height:38px;font-size:16px}
.rk-who{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.rk-who b{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rk-who b i{font-style:normal}
.rk-who em{font-style:normal;font-size:10.5px;color:var(--txt-3);white-space:nowrap}
.rk-score{flex:none;display:flex;align-items:baseline;gap:2px}
.rk-score b{font-size:17px;font-weight:800;letter-spacing:-.03em}
.rk-score em{font-style:normal;font-size:10px;color:var(--txt-3)}

/* VS 인트로 */
.battle-vs .vs-row{display:flex;align-items:center;justify-content:center;gap:6px}
.battle-vs .vs-side{flex:1;min-width:0;display:flex;justify-content:center}
.battle-vs .vs-side .pcard{width:100%;max-width:170px;font-size:.62em}
.battle-vs .vs-side .pcard-head .ovr{font-size:28px}
.battle-vs .vs-side .pcard-name{font-size:14px}
.battle-vs .vs-side .pcard-num{font-size:70px}
.battle-vs .vs-side .pcard-stats{gap:2px 8px}
.battle-vs .vs-side .pcard-stats b{font-size:13px}
.battle-vs .vs-side .pcard-in{padding:10px 10px 9px}
.vs-mark{
  flex:none;font-family:'Bebas Neue','Archivo Black',sans-serif;font-size:30px;line-height:1;
  color:#ff6b8b;text-shadow:0 0 14px rgba(255,107,139,.6);animation:vsPulse 1.2s ease-in-out infinite;
}
@keyframes vsPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}

/* 결과 */
.rk-points{
  display:flex;align-items:baseline;justify-content:center;gap:10px;padding:12px;
  border-radius:var(--r-m);background:var(--surface-2);border:1px solid var(--line);
}
.rk-label{font-size:12px;color:var(--txt-3);font-weight:700}
.rk-num{font-size:30px;font-weight:800;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.rk-delta{font-size:15px;font-weight:800;animation:rkDelta .6s var(--ease) both .3s}
.rk-delta.up{color:#3ecf8e}
.rk-delta.down{color:#ff8a93}
@keyframes rkDelta{from{opacity:0;transform:translateY(8px) scale(.8)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .rk-champion,.vs-mark,.rk-delta{animation:none}
}