/* 경기 카드 개인 기록 펼침 — 선수 페이지(signup_other) PROFILE·GAMES 탭.
   Contract: contracts/game_box_score.py

   표 자체(.gd-team-tabs / .gd-players-table-head / .gd-player-row)는 경기 상세의
   rtp-game-detail.css 를 그대로 쓴다 — 이 파일은 "카드를 여닫는 껍데기"와
   "신규(주황) 강조"만 담당한다. rtp-game-detail.css 는 이 페이지에서도 함께 로드된다.

   신규 강조는 엔트리(/basketball/)의 .oa-game-card--new 와 같은 문법(주황 테두리 +
   샤인 스윕 + 점멸 뱃지)을 --bb-* 토큰으로 그대로 옮긴 것이다. 판정 창(7일)과
   확인 기록(localStorage 'rtp_seen_stats')만 그쪽과 분리돼 있다. */

/* ── 여닫는 껍데기 ────────────────────────────────────────────────── */
.rtp-gamecard--expandable {
  overflow: hidden;
  padding: 0;                 /* 패딩은 안쪽 토글 버튼이 갖는다 — 패널이 풀블리드가 되도록 */
}

/* 카드 상단 전체가 토글 버튼. 기존 카드와 같은 여백을 여기서 재현한다.
   relative 인 이유: 샤인 오버레이(absolute inset:0)를 여기에 가둔다. */
.rtp-gamecard__toggle {
  position: relative;
  display: block;
  width: 100%;
  padding: 16px 18px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--bb-t-fast) var(--bb-ease);
}
.rtp-gamecard__toggle:active { background: var(--bb-surface); }

/* 토글 셰브론 — 반드시 상단 줄에. 스코어 줄에 두면 열릴 때 팀명 flex 가 줄어
   스코어가 흔들린다(핸드오프 README 2장).
   ⚠️ 인라인 SVG 가 아니라 CSS(border 회전)로 그린다 — 카드가 최대 153장이라
   SVG 를 매 카드에 넣으면 HTML 이 22KB 늘어난다. */
.rtp-gamecard__chev {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  transition: transform 300ms cubic-bezier(0.34, 1.4, 0.5, 1);
}
.rtp-gamecard__chev::before {
  content: '';
  width: 7px;
  height: 7px;
  margin-top: -3px;                     /* 회전축 보정 — 시각적 중앙 정렬 */
  border-right: 2px solid var(--bb-ink-muted);
  border-bottom: 2px solid var(--bb-ink-muted);
  border-radius: 0 0 1.5px 0;           /* stroke-linejoin:round 대응 */
  transform: rotate(45deg);
  transition: border-color var(--bb-t-fast) var(--bb-ease);
}
.rtp-gamecard--open .rtp-gamecard__chev { transform: rotate(180deg); }
.rtp-gamecard--open .rtp-gamecard__chev::before {
  border-right-color: var(--bb-primary);
  border-bottom-color: var(--bb-primary);
}

/* 열린 카드의 내 기록 4칸은 살짝 가라앉혀 펼침 영역과 이어 보이게 한다. */
.rtp-gamecard--open .rtp-gamecard__stats { transition: none; }

/* ── 펼침 영역 ────────────────────────────────────────────────────── */
/* height:auto 는 트랜지션되지 않는다 — 실제 px 지정은 rtp-stat-expand.js 의 fit(). */
.rtp-gamecard__panel {
  overflow: hidden;
  height: 0;
  transition: height 300ms cubic-bezier(0.2, 0.8, 0.3, 1);
}
/* JS 없이도 열린 카드는 보여야 한다.
   서버가 각 탭 첫 카드를 --open 으로 SSR 하는데, 높이를 푸는 규칙이 JS 에만 있으면
   스크립트 로드가 실패했을 때 **전송은 됐는데 화면에 없는** 상태가 된다
   (docs/conventions/frontend-pitfalls.md P6).
   JS 가 살아있으면 fit() 이 곧바로 px 를 덮어써 트랜지션을 되찾는다. */
.rtp-gamecard--open .rtp-gamecard__panel { height: auto; }
.rtp-gamecard__panel-in {
  border-top: 1px solid var(--bb-border-soft);
  background: var(--bb-surface);
  padding: 12px 14px 14px;
}
/* 내용은 카드가 열린 뒤 살짝 늦게 떠오른다 */
.rtp-gamecard__panel-in > * {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 300ms 60ms var(--bb-ease), transform 300ms 60ms var(--bb-ease);
}
.rtp-gamecard--open .rtp-gamecard__panel-in > * { opacity: 1; transform: none; }

.rtp-bx__loading {
  margin: 0;
  padding: var(--bb-space-3) 0;
  text-align: center;
  font-size: 12px;
  color: var(--bb-ink-muted);
}

/* 표는 흰 카드로 띄워 회색 패널 위에서 분리 */
.rtp-bx .gd-players-table-head,
.rtp-bx .gd-players-panel {
  background: var(--bb-bg);
}
.rtp-bx .gd-players-table-head {
  border-radius: var(--bb-radius-8) var(--bb-radius-8) 0 0;
  padding-top: var(--bb-space-2);
}
.rtp-bx .gd-players-panel {
  border-radius: 0 0 var(--bb-radius-8) var(--bb-radius-8);
  padding-bottom: var(--bb-space-1);
}
.rtp-bx .gd-team-tabs { margin-bottom: var(--bb-space-2); }

/* 보고 있는 선수 본인 행 — 자기 페이지 링크 대신 주황 하이라이트만(뱃지 없음) */
.gd-player-row--viewer { background: var(--bb-primary-tint); }
.gd-player-row--viewer .gd-player-row__name { color: var(--bb-primary-dark); }
.gd-player-row--viewer .gd-player-row__pts { color: var(--bb-primary); }

/* 패널 하단 '경기 상세 ›' — 펼침 표는 상위 5명만이라 전체로 가는 길을 남긴다 */
.rtp-bx__detail {
  display: block;
  margin-top: var(--bb-space-2);
  padding: var(--bb-space-2) 0;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  color: var(--bb-primary);
  text-decoration: none;
}
.rtp-bx__detail:active { opacity: 0.6; }

/* ══ 신규(주황) 강조 — 엔트리 .oa-game-card--new 와 같은 문법 ══════════
   JS 가 'rtp-gamecard--new' 클래스만 떼어내면 평범한 카드로 강등된다(재렌더 금지). */
.rtp-gamecard__newbadge { display: none; }
.rtp-gamecard--new .rtp-gamecard__newbadge { display: inline-flex; }

.rtp-gamecard--new {
  border-color: var(--bb-primary-soft);
  box-shadow: 0 0 0 1px var(--bb-primary-soft);
}

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

/* "기록지 도착" 점멸 뱃지 — opacity 만 움직이므로 Composite 단계에서 끝난다 */
.rtp-gamecard__newbadge {
  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;
}
.rtp-gamecard__newdot {
  width: 6px;
  height: 6px;
  border-radius: var(--bb-radius-pill);
  background: var(--bb-primary);
  animation: rtp-bx-newdot-blink 1.4s ease-in-out infinite;
}
@keyframes rtp-bx-newdot-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}

@media (prefers-reduced-motion: reduce) {
  .rtp-gamecard__panel,
  .rtp-gamecard__chev,
  .rtp-gamecard__panel-in > * { transition: none !important; }
  .rtp-gamecard__newdot { animation: none !important; }
}