/*
 * result.css — 승패 결정(패배 전환 · 관전 · 최종 결과/우승) 컴포넌트 스타일
 *
 * tokens.css 의 토큰만 참조한다(원시 값 직접 사용 금지). 이 파일은 "최후 1인
 * 생존" 규칙이 낳는 사용자 대면 결과 표면의 재사용 컴포넌트를 카툰 룩으로
 * 확정하는 전방 선언(forward declaration)이다 — 아이템 피처의 items.css 선례와
 * 동일 계층. 실제 결과 화면 마크업/뷰 전환/순위 판정은 후속 화면 grain 이 이
 * 계약(.rank-badge · .standings-row · .game-overlay--spectator)을 소비한다.
 *
 * 담는 것:
 *   - rank-badge      : 최종 순위/우승 배지(왕관·등수·시상대 색)
 *   - standings-row   : 최종 순위 목록 한 줄(등수 + 아바타 + 이름 + 사람/AI)
 *   - game-overlay 의 패배→관전(spectator) 상태 + 패배 전환 모션
 *
 * game.css 의 game-overlay 기본 스타일을 덮어쓰지 않는 가산 스타일이다.
 * (스크림·패널·제목 등 기본 처리는 game.css 소유, 여기선 상태 modifier 만 얹는다.)
 */

/* ── Rank Badge (rank-badge) ───────────────────────────────
   최종 순위/결과에서 한 플레이어의 등수를 나타내는 스티커 배지. 우승(1위)은
   왕관 글리프 + 골드 채움 + 광채로, 2·3위는 시상대 색으로, 4위 이하는 기본
   표면 톤으로 둔다. 대기방의 방장/사람/AI 배지(player-list)와 역할·맥락이
   다르다(방 역할 표식 vs 최종 결과 표식) — 별도 Component. */
.rank-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-sm);
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-black);
  font-size: var(--text-size-sm);
  line-height: var(--line-height-tight);
  color: var(--color-ink);
  background-color: var(--color-surface-sunken);
  border: var(--border-width-thick) solid var(--color-ink);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-pop-sm);
  white-space: nowrap;
}

/* 등수 글리프(왕관/메달). 어떤 배지 색 위에서도 또렷하도록 코믹 아웃라인 톤을
   유지한다(잉크 하드 그림자). */
.rank-badge__glyph {
  font-size: var(--text-size-md);
  line-height: 1;
}

/* 시상대(상위 3위) 색 — 순위 정체성 토큰 소비 */
.rank-badge--first {
  background-color: var(--color-rank-first);
  /* 우승 배지는 광채로 최후 1인을 집어낸다(방장 슬롯 shadow-glow 강조와 동일 계열) */
  box-shadow: var(--shadow-pop-sm), var(--shadow-glow);
}

.rank-badge--second {
  background-color: var(--color-rank-second);
}

.rank-badge--third {
  background-color: var(--color-rank-third);
}

/* ── Standings Row (standings-row) ─────────────────────────
   최종 순위 목록의 한 줄. 등수(rank-badge) + 아바타 + 이름 + 사람/AI 표식으로
   구성하며, 우승 줄은 한 단계 두꺼운 아웃라인 + 광채로 강조한다. 결과 화면 grain
   이 이 줄을 순위대로 쌓아 최종 순위/우승자를 표시한다. */
.standings-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background-color: var(--color-surface-raised);
  border: var(--border-width-thick) solid var(--color-ink);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-pop-sm);
}

/* 우승(최후 1인) 줄: 두툼한 아웃라인 + 하드 그림자 + 광채로 시각적 최상위. */
.standings-row--winner {
  border-width: var(--border-width-chunky);
  box-shadow: var(--shadow-pop-md), var(--shadow-glow);
}

.standings-row__avatar {
  font-size: var(--text-size-xl);
  line-height: 1;
}

.standings-row__name {
  flex: 1;
  min-width: 0;
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-black);
  font-size: var(--text-size-md);
  color: var(--color-text-default);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 사람/AI 표식: 프로젝트 전역 규칙 계승(player-list·opponent-board 와 동일 색 —
   사람=accent, AI=support). 별도 신규 색을 만들지 않는다. */
.standings-row__type {
  font-size: var(--text-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-text-muted);
}

.standings-row__type--human {
  color: var(--color-accent);
}

.standings-row__type--ai {
  color: var(--color-support);
}

/* ── Game Overlay — 패배→관전(spectator) 상태 ──────────────
   자신 보드가 천장까지 쌓여 탈락하면, 자신 메인 보드 위 game-overlay 가 이
   상태로 전환된다. 구성 요소·토큰은 game-overlay Base 와 동일하고, 탈락을
   알리는 색 강조(color-danger)와 "관전 모드" 안내만 얹는다. 패배 전환은 카툰
   팝(easing-pop)으로 극적으로 등장한다. 이후 관전으로 잦아드는 상주 표시는
   조작을 막지 않는 후속 화면 grain 의 몫(여기선 상태 표면만 정의). */
.game-overlay--spectator .game-overlay__title {
  /* 탈락을 알리는 상태색 강조(opponent-board 게임오버 라벨과 동일 color-danger). */
  color: var(--color-danger);
}

.game-overlay--spectator .game-overlay__panel {
  /* 패배 전환: 살짝 오버슈트하며 튀어나오는 카툰 팝(등장 강조). */
  animation: defeat-pop-in var(--duration-base) var(--easing-pop) both;
}

@keyframes defeat-pop-in {
  from {
    transform: scale(0.82) rotate(-2deg);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

/* 모션 최소화 선호 사용자: 패배 전환 애니메이션을 끈다(상태 표면 자체는 유지). */
@media (prefers-reduced-motion: reduce) {
  .game-overlay--spectator .game-overlay__panel {
    animation: none;
  }
}

/* ── Result Screen (result-screen) ─────────────────────────
   최후 1인 생존이 확정된 뒤 표시하는 결과 화면. 우승자 스포트라이트 +
   최종 순위 목록(standings-row · rank-badge 재사용) + '로비로 돌아가기'를
   카툰 카드에 담는다. 로비/대기방/인게임과 병존하는 SPA 뷰이며 hidden 속성으로
   전환한다(waiting-room·game-stage 선례). 모든 값은 tokens.css 토큰만 참조한다. */
.result {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.result[hidden] {
  display: none;
}

.result-screen {
  width: 100%;
  max-width: 32rem; /* 레이아웃 제약(구현 설정값) */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  padding: var(--space-2xl) var(--space-xl);
  background-color: var(--color-surface-raised);
  border: var(--border-width-chunky) solid var(--color-ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop-lg), var(--shadow-float);
}

.result-screen__title {
  margin: 0;
  text-align: center;
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-black);
  font-size: var(--text-size-2xl);
  line-height: var(--line-height-tight);
  color: var(--color-text-default);
}

/* 결과 등장 안내(aria-live). 시각적으로 숨기고 스크린리더에만 우승자·최종 순위
   요약을 낭독시킨다(items.css .item-slot__name 의 sr-only 선례와 동일 — clip 은
   구현 설정값이라 시각 토큰이 아니다). */
.result-screen__announce {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 우승자 스포트라이트: 왕관 + 이름 + '우승' 라벨. 결과의 시각적 정점 — 패배
   전환과 동일 이징(easing-pop)으로 극적으로 등장한다(화려한 카툰 이펙트 방향성).
   시상대 골드 광채(shadow-glow)로 최후 1인을 집어낸다(rank-badge 우승 배지 정합). */
.result-screen__champion {
  position: relative; /* 축하 이펙트 레이어(celebrate)의 위치 기준(구현 설정값) */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-lg);
  background-color: var(--color-surface-sunken);
  border: var(--border-width-thick) solid var(--color-ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop-md), var(--shadow-glow);
  animation: champion-pop-in var(--duration-base) var(--easing-pop) both;
}

/* 우승자 텍스트(왕관·이름·'우승' 라벨)는 축하 이펙트 레이어 위에 얹혀 항상
   또렷하게 읽힌다(z-index 는 구현 설정값). 이펙트가 결과 판독을 가리지 않게 한다. */
.result-screen__crown,
.result-screen__champion-name,
.result-screen__champion-label {
  position: relative;
  z-index: 1;
}

.result-screen__crown {
  font-size: var(--text-size-3xl);
  line-height: 1;
}

.result-screen__champion-name {
  margin: 0;
  text-align: center;
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-black);
  font-size: var(--text-size-xl);
  line-height: var(--line-height-tight);
  color: var(--color-text-default);
  overflow-wrap: anywhere;
}

/* '우승' 배지: 시상대 골드 알약(rank-badge 우승 배지와 동일 순위색·아웃라인 계열). */
.result-screen__champion-label {
  margin: 0;
  padding: var(--space-2xs) var(--space-md);
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-black);
  font-size: var(--text-size-sm);
  color: var(--color-ink);
  background-color: var(--color-rank-first);
  border: var(--border-width-thick) solid var(--color-ink);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-pop-sm);
}

/* 최종 순위 목록: standings-row 를 순위대로 세로로 쌓는다. */
.result-screen__standings {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.result-screen__actions {
  display: flex;
  justify-content: center;
}

@keyframes champion-pop-in {
  from {
    transform: scale(0.82) rotate(-2deg);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

/* ── 우승자 축하 카툰 이펙트 (result-screen 우승 등장 정점) ────────────
   과제의 "전체적으로 화려한 카툰 렌더링 풍" 방향을 결과 화면의 정점(우승자
   스포트라이트)에 반영한다. 우승자 스포트라이트가 champion-pop-in 으로 등장할 때,
   그 위에 별/스파클이 터져 나오는 카툰 축하 버스트를 한 번 재생한다(지속 반복 없음).
   인게임 effect-overlay 버스트의 카툰 룩·모션 언어를 계승한다 — 잉크 하드 그림자
   (shadow-pop-sm 코믹 아웃라인) · 오버슈트 팝(easing-pop) · 대표색 글로우 펄스
   (radial-gradient + duration-slow). 순수 CSS/DOM 이며 색은 시상대 골드
   (color-rank-first)·하이라이트 옐로우(color-secondary)·흰빛 flash(color-text-inverse)
   토큰과 그 파생 국소 이펙트만 쓴다(effect-overlay flash 선례와 동일 계층 — 전역
   이펙트 색 토큰 신설 없음). 장식이므로 aria-hidden(lobby.js) + pointer-events:none
   으로 결과(순위·이름·버튼)의 판독·조작을 막지 않는다. z-index/좌표 offset·글리프는
   구현 설정값. */
.result-screen__celebrate {
  position: absolute;
  inset: 0;
  z-index: 0; /* 우승자 텍스트 아래에서 재생(구현 설정값) */
  overflow: visible;
  pointer-events: none; /* 조작을 막지 않는다(구현 설정값) */
}

/* 대표색 글로우 펄스: 골드빛이 한 번 부풀었다 잦아든다(effect-overlay__burst 글로우
   펄스 선례 — duration-slow + easing-standard). */
.result-screen__celebrate::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  background: radial-gradient(
    circle at 50% 42%,
    color-mix(in srgb, var(--color-secondary) 55%, transparent),
    transparent 62%
  );
  animation: champion-celebrate-glow var(--duration-slow) var(--easing-standard) both;
}

/* 스파클(별): 중심에서 사방으로 튀어 나갔다 사라지는 카툰 스티커 파티클. 대표색·
   이펙트 위에 얹히므로 color-ink 하드 그림자(shadow-pop-sm) 코믹 아웃라인으로
   또렷하게(effect-overlay 글리프 규칙 계승). 등장·비산은 오버슈트 팝(easing-pop),
   전체 수명은 duration-slow(effect-overlay 버스트 재생 envelope 와 동일 시간축). */
.result-screen__spark {
  position: absolute;
  top: 50%;
  left: 50%;
  --spark-x: 0px;
  --spark-y: 0px;
  --spark-rot: 0deg;
  font-size: var(--text-size-lg);
  line-height: 1;
  color: var(--color-secondary);
  text-shadow: var(--shadow-pop-sm);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  animation: champion-celebrate-spark var(--duration-slow) var(--easing-pop) both;
}

.result-screen__spark::before {
  content: "★";
}

/* 방향·색·크기·타이밍을 나눠 화려한 버스트로 흩뿌린다(좌표 offset·delay 는 구현
   설정값, 색·서체 크기는 토큰). */
.result-screen__spark:nth-child(1)  { --spark-x:   0px; --spark-y: -84px; --spark-rot:  20deg; }
.result-screen__spark:nth-child(2)  { --spark-x:  60px; --spark-y: -60px; --spark-rot: -18deg; }
.result-screen__spark:nth-child(3)  { --spark-x:  86px; --spark-y:  -6px; --spark-rot:  24deg; }
.result-screen__spark:nth-child(4)  { --spark-x:  66px; --spark-y:  56px; --spark-rot: -22deg; }
.result-screen__spark:nth-child(5)  { --spark-x:   8px; --spark-y:  82px; --spark-rot:  16deg; }
.result-screen__spark:nth-child(6)  { --spark-x: -60px; --spark-y:  58px; --spark-rot: -20deg; }
.result-screen__spark:nth-child(7)  { --spark-x: -86px; --spark-y:  -2px; --spark-rot:  22deg; }
.result-screen__spark:nth-child(8)  { --spark-x: -62px; --spark-y: -58px; --spark-rot: -16deg; }
.result-screen__spark:nth-child(9)  { --spark-x:  34px; --spark-y: -96px; --spark-rot:  28deg; }
.result-screen__spark:nth-child(10) { --spark-x: -34px; --spark-y: -94px; --spark-rot: -26deg; }
.result-screen__spark:nth-child(11) { --spark-x:  98px; --spark-y:  36px; --spark-rot:  18deg; }
.result-screen__spark:nth-child(12) { --spark-x: -98px; --spark-y:  34px; --spark-rot: -18deg; }

/* 색 교대: 골드(우승색)·흰빛 flash 를 섞어 스티커 다채로움을 준다(전부 토큰 파생). */
.result-screen__spark:nth-child(3n + 2) { color: var(--color-rank-first); }
.result-screen__spark:nth-child(3n)     { color: var(--color-text-inverse); }

/* 크기·타이밍 교대: 버스트가 한꺼번에 터지되 살짝 어긋나게(구현 설정값). */
.result-screen__spark:nth-child(even)   { font-size: var(--text-size-md); }
.result-screen__spark:nth-child(3n + 2) { animation-delay: 50ms; }
.result-screen__spark:nth-child(3n)     { animation-delay: 100ms; }

@keyframes champion-celebrate-glow {
  0%   { opacity: 0; transform: scale(0.6); }
  40%  { opacity: 1; transform: scale(1.06); }
  100% { opacity: 0; transform: scale(1); }
}

@keyframes champion-celebrate-spark {
  0% {
    transform: translate(-50%, -50%) translate(0, 0) scale(0) rotate(0);
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  60% {
    transform: translate(-50%, -50%)
      translate(var(--spark-x), var(--spark-y)) scale(1) rotate(var(--spark-rot));
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%)
      translate(var(--spark-x), var(--spark-y)) scale(0.55) rotate(var(--spark-rot));
    opacity: 0;
  }
}

/* 모션 최소화 선호 사용자: 우승자 등장 애니메이션과 축하 이펙트를 끈다(결과 표면
   자체는 유지). 축하 레이어는 통째로 감춰 잔여 정지 파티클이 남지 않게 한다. */
@media (prefers-reduced-motion: reduce) {
  .result-screen__champion {
    animation: none;
  }
  .result-screen__celebrate {
    display: none;
  }
}