/* R18 — entry "최근 경기" 섹션. 핸드오프(handoff-game-detail) .tabs/.gc/.prev 구조를
   --bb-* 토큰으로 이식 (원값 CSS 는 참고만, 하드코딩 금지). 모바일 우선(375px).
   사용자 피드백 2026-07-25: 날짜 세그먼트 탭 + MVP 티저 점선 스트립·hover 정합. */

.oa-recent-games {
  margin-top: var(--bb-space-5);
}

.oa-recent-games__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.oa-recent-games__hint {
  font-size: 11px;
  font-weight: 600;
  color: var(--bb-ink-muted);
}

/* ── 날짜 세그먼트 탭 (핸드오프 .tabs) ───────────────────────────── */
.oa-date-tabs {
  display: flex;
  gap: var(--bb-space-1);
  padding: var(--bb-space-05);
  background: var(--bb-surface);
  border: 1px solid var(--bb-border-soft);
  border-radius: var(--bb-radius-8);
  margin-top: var(--bb-space-2);
}
.oa-date-tab {
  flex: 1;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--bb-radius-sm);
  background: transparent;
  font-size: 12px;
  font-weight: 700;
  color: var(--bb-ink-sub); /* R152 — 대비 4.63:1(#6B7280 on #F9FAFB). 이전 --bb-ink-muted 는 미달 */
  cursor: pointer;
  transition: background var(--bb-t-fast) var(--bb-ease), color var(--bb-t-fast) var(--bb-ease);
}
.oa-date-tab--active {
  background: var(--bb-bg);
  color: var(--bb-ink);
  box-shadow: var(--bb-shadow-sm);
}
.oa-date-tab__mmdd {
  margin-left: var(--bb-space-1);
  font-size: 10px; /* R152 — opacity 로 흐리게 하지 않는다(색 상속 → 대비 유지). 구분은 크기 */
}

.oa-recent-games__list {
  display: flex;
  flex-direction: column;
  gap: var(--bb-space-2);
  margin-top: var(--bb-space-3);
}
/* ⚠️ [hidden] 가드 — 위 display:flex(0,1,0) 가 UA 의 [hidden]{display:none} 을 이겨서
   날짜 탭을 눌러도(=JS 가 hidden 을 걸어도) 다른 날짜 패널이 계속 보였다.
   사용자 신고 2026-07-26 "07.12 눌러도 07.11 경기까지 다 나온다". 이 레포의 기존
   가드(card-studio.css .cs-card__placeholder[hidden])와 동일 패턴. */
.oa-recent-games__list[hidden] { display: none; }

/* ── 경기 카드 (핸드오프 .gc) ─────────────────────────────────────── */
.oa-game-card {
  display: block;
  position: relative;   /* V8 샤인 오버레이 기준 */
  border-radius: var(--bb-radius-lg);
  border: 1px solid var(--bb-border);
  background: var(--bb-bg);
  padding: var(--bb-space-3);
  text-decoration: none;
  color: inherit;
  transition: transform var(--bb-t-fast) var(--bb-ease),
              box-shadow var(--bb-t-fast) var(--bb-ease),
              border-color var(--bb-t-fast) var(--bb-ease);
}
.oa-game-card:hover {
  border-color: var(--bb-ink-muted);
  box-shadow: var(--bb-shadow);
  transform: translateY(-1px);
}
.oa-game-card:active {
  transform: scale(0.985);
}

.oa-game-card__top {
  display: flex;
  align-items: center;
  gap: var(--bb-space-2);
  margin-bottom: var(--bb-space-2);
}
.oa-game-card__date {
  font-size: 11px;
  font-weight: 600;
  color: var(--bb-ink-muted);
}
.oa-game-card__competition {
  font-size: 11px;
  color: var(--bb-ink-muted);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* ▶ 메타 배지 (핸드오프 .gc .meta b) */
.oa-game-card__vod {
  margin-left: auto;
  flex-shrink: 0;
  width: 22px;
  height: 19px;
  border-radius: var(--bb-radius-4);
  background: var(--bb-surface);
  color: var(--bb-ink-muted);
  font-size: 9px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.oa-game-card__score {
  display: flex;
  align-items: center;
  gap: var(--bb-space-2);
}
.oa-game-card__team {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.oa-game-card__team--winner {
  font-weight: 800;
  color: var(--bb-ink);
}
.oa-game-card__team--loser {
  font-weight: 600;
  color: var(--bb-ink-muted);
  text-align: right;
}
.oa-game-card__scoreline {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.6px;
  white-space: nowrap;
}
.oa-game-card__score-win { color: var(--bb-ink); }
.oa-game-card__score-lose { color: var(--bb-ink-muted); font-weight: 600; }
.oa-game-card__sep {
  font-style: normal;
  font-weight: 600;
  color: var(--bb-ink-muted);
  margin: 0 2px;
}

/* ── MVP 티저 스트립 (핸드오프 .gc .prev — 점선 구분 + 옅은 배경 풀블리드) ── */
.oa-game-card__mvp {
  display: flex;
  align-items: center;
  gap: var(--bb-space-2);
  margin: var(--bb-space-3) calc(-1 * var(--bb-space-3)) calc(-1 * var(--bb-space-3));
  padding: var(--bb-space-2) var(--bb-space-3);
  border-top: 1px dashed var(--bb-border);
  background: var(--bb-surface);
  border-radius: 0 0 var(--bb-radius-lg) var(--bb-radius-lg);
}
.oa-game-card__mvp-tag {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: var(--bb-radius-pill);
  background: var(--bb-accent-soft);
  color: var(--bb-accent-dark);
  font-size: 9px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.oa-game-card__mvp-text {
  font-size: 11px;
  font-weight: 600;
  color: var(--bb-ink-sub);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.oa-game-card__mvp-text b {
  color: var(--bb-ink);
  font-weight: 800;
}
.oa-game-card__more {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 800;
  color: var(--bb-primary-heavy); /* R152 — 대비 5.31:1. --bb-primary(#FF6B35) on #F9FAFB 는 2.71 */
  white-space: nowrap;
}

/* ══ V8 신규 강조 + 샤인 (사용자 요청 2026-07-25, Card Tap Affordance 정본) ══
   .oa-game-card--new(=created_at 2h 이내 && 미확인)에만 발동 — 클래스 제거만으로
   일반 카드(MVP 티저)로 강등되도록 상호 배타 노출을 전부 CSS 로 처리. */

/* 신규/일반 상호 배타 — 신규엔 뱃지+액션바, 일반엔 MVP 티저 */
.oa-game-card__newbadge,
.oa-game-card__actbar { display: none; }
.oa-game-card--new .oa-game-card__newbadge { display: inline-flex; }
.oa-game-card--new .oa-game-card__actbar { display: flex; }
.oa-game-card--new .oa-game-card__mvp { display: none; }
.oa-game-card--new .oa-game-card__vod { display: none; }   /* 뱃지가 ▶ 메타 대체 */

/* 주황 연한 테두리 (정본 #ffd0bd — --bb-primary-soft 계열 매핑) */
.oa-game-card--new {
  border-color: var(--bb-primary-soft);
  box-shadow: 0 0 0 1px var(--bb-primary-soft);
}

/* 샤인 스윕은 쓰지 않는다 (2026-08-01 제거 — 선수 페이지와 동일 정책).
   강조는 위의 주황 테두리 + 점멸 뱃지로 성립하고, 샤인은 그 위 장식이었다.
   구현이 `left` 애니메이션이라 카드마다 매 프레임 Layout 을 유발하기도 했다
   (docs/conventions/frontend-pitfalls.md P1). 되살릴 일이 있으면 `transform` 으로 쓸 것. */

/* "기록지 도착" 점멸 뱃지 (정본 .badge/.newdot) — r1 우측(메타 위치) */
.oa-game-card__newbadge {
  margin-left: auto;
  flex-shrink: 0;
  align-items: center;
  gap: var(--bb-space-1);
  height: 20px;
  padding: 0 var(--bb-space-2);
  border-radius: var(--bb-radius-pill);
  background: var(--bb-primary-soft);
  color: var(--bb-primary-dark);
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}
.oa-game-card__newdot {
  width: 6px;
  height: 6px;
  border-radius: var(--bb-radius-pill);
  background: var(--bb-primary);
  animation: oa-newdot-blink 1.4s ease-in-out infinite;
}
@keyframes oa-newdot-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}

/* 하단 액션바 (정본 .actbar) — MVP 티저 자리 대체, 같은 풀블리드 스트립 문법 */
.oa-game-card__actbar {
  align-items: center;
  justify-content: space-between;
  gap: var(--bb-space-2);
  margin: var(--bb-space-3) calc(-1 * var(--bb-space-3)) calc(-1 * var(--bb-space-3));
  padding: var(--bb-space-2) var(--bb-space-3);
  border-top: 1px dashed var(--bb-primary-soft);
  background: var(--bb-primary-tint);
  border-radius: 0 0 var(--bb-radius-lg) var(--bb-radius-lg);
}
.oa-game-card__actbar-label {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--bb-primary);
}
.oa-game-card__actbar-arrow {
  font-size: 14px;
  font-weight: 800;
  color: var(--bb-primary);
  animation: oa-actbar-nudge 1.6s ease-in-out infinite;
}
@keyframes oa-actbar-nudge {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(3px); }
}