/*
 * waiting.css — 대기방 화면 국소 컴포넌트 스타일 (grain-2)
 *
 * tokens.css 의 토큰만 참조한다. 새 전역 토큰을 만들지 않는다.
 * 여기 정의된 것은 대기방 화면에서 소비되는 컴포넌트의 국소 스타일뿐이다:
 *   waiting-room · player-list(참여자 슬롯 · 방장/사람/AI 배지 · 빈 슬롯)
 * 참여 모달은 로비의 Modal 컴포넌트(.modal*)를 그대로 재사용한다.
 *
 * 값 규칙(lobby.css 와 동일):
 *   - 색/서체/간격/모서리/보더/그림자는 반드시 var(--token) 을 통한다.
 *   - z-index/position/display/overflow/cursor/max-width 등은 구현 설정값이므로
 *     직접 사용한다.
 *
 * 슬롯 상태 색 매핑(기존 color 토큰 재사용, 신규 토큰 없음):
 *   - 채워진 슬롯 표면 → color-surface-raised   빈 슬롯 표면 → color-surface-sunken
 *   - 방장 표식 → color-secondary   사람 표식 → color-accent   AI 표식 → color-support
 *   - 방장 슬롯 강조 → shadow-glow
 */

/* ── Waiting room layout ───────────────────────────────── */
.waiting-room {
  max-width: 62rem; /* 레이아웃 제약(구현 설정값) — 대기방 영역 폭 확대 */
  margin: 0 auto;
  padding: var(--space-2xl) var(--space-lg) var(--space-3xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}

.waiting-room[hidden] {
  display: none;
}

.waiting-room__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.waiting-room__heading {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  min-width: 0;
}

.waiting-room__title {
  /* 카툰 타이틀: 굵은 잉크 아웃라인 느낌의 텍스트 섀도우 (lobby__title 과 동일 톤) */
  color: var(--color-secondary);
  text-shadow: var(--shadow-pop-sm);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 인원 현황 배지: playerCount / maxPlayers (예: 3 / 4) */
.waiting-room__count {
  flex: none;
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-black);
  font-size: var(--text-size-lg);
  color: var(--color-ink);
  background-color: var(--color-accent);
  border: var(--border-width-thick) solid var(--color-ink);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-pop-sm);
  padding: var(--space-2xs) var(--space-md);
  white-space: nowrap;
}

.waiting-room__players {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.waiting-room__players-title {
  color: var(--color-text-inverse);
  font-size: var(--text-size-xl);
}

/* ── Player list & Player slot ─────────────────────────── */
.player-list {
  display: grid;
  /* 슬롯 4개를 2×2 로 배치: 데스크톱은 고정 2열(각 열 minmax(0,1fr) 로 균등 분할)
     이라 각 슬롯 폭이 넓어져 난이도 '어려움' 라벨이 한 줄에 들어간다. minmax(0,…)
     로 트랙이 콘텐츠 최소 크기 때문에 컨테이너를 넘치지 않게 가드한다. 구현 설정값. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
}

/* 좁은 뷰포트: 2열을 1열로 자연 축소해 슬롯이 컨테이너를 넘치지 않게 한다.
   분기점(640px)은 프로젝트의 모바일 분기 선례를 따른 구현 설정값. */
@media (max-width: 640px) {
  .player-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

.player-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  text-align: center;
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-md);
}

/* 채워진 슬롯: 흰 스티커 카드(잉크 아웃라인 + 하드 그림자) */
.player-slot--filled {
  background-color: var(--color-surface-raised);
  color: var(--color-text-default);
  border: var(--border-width-chunky) solid var(--color-ink);
  box-shadow: var(--shadow-pop-md);
}

/* 방장 슬롯: 옐로우 글로우로 강조 */
.player-slot--host {
  box-shadow: var(--shadow-pop-md), var(--shadow-glow);
}

/* 빈 슬롯: 점선 잉크 아웃라인의 가라앉은 표면 */
.player-slot--empty {
  background-color: var(--color-surface-sunken);
  color: var(--color-text-muted);
  border: var(--border-width-thick) dashed var(--color-ink);
}

/* 아바타: 플레이어 유형 기호. 기본(사람)은 터콰이즈, AI 는 그레이프 */
.player-slot__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--space-3xl);
  height: var(--space-3xl);
  font-size: var(--text-size-xl);
  line-height: var(--line-height-tight);
  color: var(--color-ink);
  background-color: var(--color-accent);
  border: var(--border-width-thick) solid var(--color-ink);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-pop-sm);
}

.player-slot--ai .player-slot__avatar {
  background-color: var(--color-support);
  color: var(--color-text-inverse);
}

/* 빈 슬롯 아바타: 점선 잉크 링의 자리표시(＋) */
.player-slot--empty .player-slot__avatar {
  color: var(--color-text-muted);
  background-color: var(--color-surface-raised);
  border-style: dashed;
  box-shadow: none;
}

.player-slot__name {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-black);
  font-size: var(--text-size-lg);
  color: var(--color-text-default);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-slot__placeholder {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-bold);
  font-size: var(--text-size-lg);
  color: var(--color-text-muted);
}

/* ── Player badges (방장 · 사람/AI 구분) ───────────────── */
.player-slot__badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2xs);
}

.player-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-black);
  font-size: var(--text-size-xs);
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-ink);
  border: var(--border-width-thin) solid var(--color-ink);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-pop-sm);
  padding: var(--space-2xs) var(--space-sm);
}

/* 방장 표식: 옐로우 */
.player-badge--host {
  background-color: var(--color-secondary);
  color: var(--color-ink);
}

/* 사람 표식: 터콰이즈 */
.player-badge--human {
  background-color: var(--color-accent);
  color: var(--color-ink);
}

/* AI 표식: 그레이프 */
.player-badge--ai {
  background-color: var(--color-support);
  color: var(--color-text-inverse);
}

/* ── 대기방 상태줄(AI 추가/제거 실패 등 인터랙션 메시지) ──
   로비 상태줄(.lobby__notice)과 동일 톤: 위험색 배경 + 잉크 아웃라인 pill. */
.waiting-room__notice {
  text-align: center;
  font-size: var(--text-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-inverse);
  background-color: color-mix(in srgb, var(--color-danger) 82%, var(--color-ink));
  border: var(--border-width-thin) solid var(--color-ink);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-pop-sm);
  padding: var(--space-2xs) var(--space-md);
  align-self: center;
}

.waiting-room__notice[hidden] {
  display: none;
}

/* ── 하단 액션 영역(게임 시작) — waiting-room/host-start Extension ──
   '게임 시작'은 대기방의 주 행동(button primary Variant 재사용)으로 참여자 목록
   아래에 눈에 띄게 배치한다. 방장에게만 노출되며, 참가자가 2명 미만이면 비활성
   (button disabled 물리 = 불투명도 저하)되고 안내 문구를 보인다. 신규 토큰 없음. */
.waiting-room__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

.waiting-room__start[hidden] {
  display: none;
}

/* 비활성 안내(Disabled Hint): 비활성 사유를 알리는 한 줄 안내(비활성 시에만 표시). */
.waiting-room__start-hint {
  text-align: center;
  font-size: var(--text-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-inverse);
}

.waiting-room__start-hint[hidden] {
  display: none;
}

/* ── AI 슬롯 제거 컨트롤(방장 전용) ────────────────────────
   채워진 AI 슬롯에서 방장에게만 노출. AI 를 빈 자리로 되돌린다.
   Design Spec: player-list/host-add-ai Extension(제거 컨트롤). 신규 토큰 없음. */
.player-slot__remove {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-black);
  font-size: var(--text-size-xs);
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-ink);
  background-color: var(--color-surface-raised);
  border: var(--border-width-thin) solid var(--color-ink);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-pop-sm);
  padding: var(--space-2xs) var(--space-sm);
  cursor: pointer;
  transition: transform var(--duration-fast) var(--easing-standard),
    box-shadow var(--duration-fast) var(--easing-standard),
    background-color var(--duration-fast) var(--easing-standard);
}

.player-slot__remove:hover:not(:disabled) {
  background-color: var(--color-surface-sunken);
}

/* 눌리는 스티커 피드백(Button 과 동일 물리) */
.player-slot__remove:active:not(:disabled) {
  transform: translate(2px, 2px);
  box-shadow: none;
}

.player-slot__remove:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ── AI 추가 어포던스(방장 전용 빈 슬롯) ───────────────────
   Design Spec: player-list/host-add-ai Extension.
   빈 슬롯 표면을 유지하되, 추가 아이콘·라벨은 color-support 로 "AI 를 더한다"를
   신호하고, hover/focus 시 아웃라인이 실선 잉크로 또렷해지며 살짝 떠오른다. */
.player-slot--add {
  gap: var(--space-md);
  justify-content: center;
  cursor: default;
}

.player-slot--add:hover,
.player-slot--add:focus-within {
  border-style: solid;
  box-shadow: var(--shadow-pop-sm);
}

/* 추가 아이콘(＋): color-support 로 신호, 점선 잉크 링 유지 */
.player-slot__avatar--add {
  color: var(--color-support);
  background-color: var(--color-surface-raised);
  border-style: dashed;
  box-shadow: none;
}

/* 추가 라벨("AI 추가"): color-support */
.player-slot__placeholder--add {
  color: var(--color-support);
}

/* 확정 액션: Button primary Variant 재사용. 슬롯 폭에 맞춰 정렬만 조정. */
.player-slot__add-confirm {
  align-self: stretch;
}

/* ── DifficultySelect(난이도 3단계 세그먼트 컨트롤) ─────────
   Design Spec: components/difficulty-select/base.md. 신규 토큰 없음.
   트랙: color-surface-sunken 표면 + 잉크 아웃라인(두께 thick) + 완전 둥근 형태. */
.difficulty-select {
  display: flex;
  gap: var(--space-2xs);
  background-color: var(--color-surface-sunken);
  border: var(--border-width-thick) solid var(--color-ink);
  border-radius: var(--radius-pill);
  padding: var(--space-2xs);
}

.difficulty-select__option {
  position: relative;
  display: inline-flex;
  flex: 1 1 0;
}

/* 실제 라디오 입력: 시각적으로 감추되 포커스·조작은 유지(라벨 위에 겹친다). */
.difficulty-select__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

/* 옵션 라벨: 기본은 투명 채움 + muted 텍스트 */
.difficulty-select__label {
  display: inline-flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-bold);
  font-size: var(--text-size-sm);
  color: var(--color-text-muted);
  border-radius: var(--radius-pill);
  padding: var(--space-xs) var(--space-sm);
  /* 라벨('어려움' 등)이 개행되지 않게 한 줄 유지(슬롯 폭 확대와 함께 보조). */
  white-space: nowrap;
  transition: color var(--duration-fast) var(--easing-standard),
    background-color var(--duration-fast) var(--easing-standard),
    box-shadow var(--duration-fast) var(--easing-standard);
}

/* 미선택 옵션 hover/focus: muted → default */
.difficulty-select__input:hover + .difficulty-select__label,
.difficulty-select__input:focus-visible + .difficulty-select__label {
  color: var(--color-text-default);
}

/* 선택된 옵션: primary 채움 + inverse 텍스트 + 하드 그림자(눌린 스티커) */
.difficulty-select__input:checked + .difficulty-select__label {
  color: var(--color-text-inverse);
  background-color: var(--color-primary);
  box-shadow: var(--shadow-pop-sm);
}

/* 포커스 링은 라벨에 그린다(감춘 입력의 기본 아웃라인은 끈다) */
.difficulty-select__input:focus-visible {
  outline: none;
}

.difficulty-select__input:focus-visible + .difficulty-select__label {
  outline: var(--border-width-chunky) solid var(--color-ink);
  outline-offset: var(--space-2xs);
}