/*
 * lobby.css — 로비 화면 국소 컴포넌트 스타일 (grain-3)
 *
 * tokens.css 의 토큰만 참조한다. 새 전역 토큰을 만들지 않는다.
 * 여기 정의된 것은 로비 화면에서 소비되는 컴포넌트의 국소 스타일뿐이다:
 *   button · text-field · modal · room-card · empty-state
 *
 * 값 규칙:
 *   - 색/서체/간격/모서리/보더/그림자는 반드시 var(--token) 을 통한다.
 *   - z-index/position/display/overflow/cursor 등은 구현 설정값이므로 직접 사용한다.
 *   - 레이아웃 컨테이너 폭(max-width)은 반응형 레이아웃 제약(구현 설정값)이다.
 *   - 모달 스크림 등 투명 이펙트는 base.css 배경 광원과 동일하게
 *     color-ink 토큰에서 파생(color-mix)해 국소 이펙트로 처리한다.
 */

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

.lobby__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  text-align: center;
}

.lobby__title {
  /* 카툰 타이틀: 굵은 잉크 아웃라인 느낌의 텍스트 섀도우 */
  color: var(--color-secondary);
  text-shadow: var(--shadow-pop-sm);
}

.lobby__subtitle {
  color: var(--color-text-inverse);
  font-size: var(--text-size-lg);
  font-weight: var(--font-weight-bold);
}

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

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

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

/* 목록 개수 요약 pill */
.lobby__count-pill {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-black);
  font-size: var(--text-size-md);
  color: var(--color-ink);
  background-color: var(--color-secondary);
  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);
}

/* ── Button ────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-black);
  font-size: var(--text-size-lg);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-wide);
  padding: var(--space-sm) var(--space-xl);
  border: var(--border-width-chunky) solid var(--color-ink);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-pop-md);
  cursor: pointer;
  /* 상호작용 피드백 시간·곡선은 motion 토큰이 소유한다(duration-fast: hover/press,
     easing-standard: 일반 상태 전환). 원시 0.08s/0.12s 하드코딩을 토큰으로 교정. */
  transition: transform var(--duration-fast) var(--easing-standard),
    box-shadow var(--duration-fast) var(--easing-standard),
    background-color var(--duration-fast) var(--easing-standard);
}

/* 눌리는 느낌: 그림자를 줄이고 살짝 내려가 스티커가 눌리는 카툰 동작 */
.btn:active {
  transform: translate(3px, 3px);
  box-shadow: var(--shadow-pop-sm);
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: var(--shadow-pop-sm);
}

/* primary: 코랄 브랜드 액션 (방 만들기/만들기) */
.btn--primary {
  color: var(--color-text-inverse);
  background-color: var(--color-primary);
}

.btn--primary:hover:not(:disabled) {
  background-color: var(--color-primary-strong);
}

/* ghost: 보조/취소. 밝은 표면 위 잉크 텍스트 */
.btn--ghost {
  color: var(--color-ink);
  background-color: var(--color-surface-raised);
}

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

.btn--lg {
  font-size: var(--text-size-xl);
  padding: var(--space-md) var(--space-2xl);
}

/* ── Text field ────────────────────────────────────────── */
.text-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.text-field__label {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-black);
  font-size: var(--text-size-md);
  color: var(--color-text-default);
}

.text-field__input {
  font-family: var(--font-family-base);
  font-size: var(--text-size-md);
  color: var(--color-text-default);
  background-color: var(--color-surface-sunken);
  border: var(--border-width-thick) solid var(--color-ink);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-pop-sm);
  padding: var(--space-sm) var(--space-md);
  width: 100%;
}

.text-field__input::placeholder {
  color: var(--color-text-muted);
}

.text-field__hint {
  font-size: var(--text-size-xs);
  color: var(--color-text-muted);
  text-align: right;
}

/* ── Modal ─────────────────────────────────────────────── */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
}

.modal[hidden] {
  display: none;
}

.modal__overlay {
  position: absolute;
  inset: 0;
  /* 스크림: color-ink 토큰에서 파생한 국소 투명 이펙트 */
  background-color: color-mix(in srgb, var(--color-ink) 62%, transparent);
}

.modal__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 26rem; /* 레이아웃 제약(구현 설정값) */
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  background-color: var(--color-surface-raised);
  color: var(--color-text-default);
  border: var(--border-width-chunky) solid var(--color-ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop-lg), var(--shadow-float);
  padding: var(--space-xl);
}

.modal__title {
  color: var(--color-text-default);
  font-size: var(--text-size-2xl);
}

.modal__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.modal__error {
  color: var(--color-danger);
  font-size: var(--text-size-sm);
  font-weight: var(--font-weight-bold);
  background-color: var(--color-surface-sunken);
  border: var(--border-width-thin) solid var(--color-danger);
  border-radius: var(--radius-sm);
  padding: var(--space-xs) var(--space-sm);
}

.modal__error[hidden] {
  display: none;
}

.modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
  margin-top: var(--space-xs);
}

/* ── Room list & Room card ─────────────────────────────── */
.room-list {
  display: grid;
  /* 카드 최소 폭 확대(16rem→18rem). min(...,100%) 로 좁은 뷰포트에서
     트랙이 컨테이너를 넘지 않게 가드(가로 스크롤/넘침 방지). 구현 설정값. */
  grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));
  gap: var(--space-lg);
}

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

.room-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  background-color: var(--color-surface-raised);
  color: var(--color-text-default);
  border: var(--border-width-chunky) solid var(--color-ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop-md);
  padding: var(--space-lg);
  /* hover 떠오름 전환: motion 토큰 소비(duration-fast · easing-standard). */
  transition: transform var(--duration-fast) var(--easing-standard),
    box-shadow var(--duration-fast) var(--easing-standard);
}

.room-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-pop-lg);
}

.room-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  min-width: 0;
}

.room-card__name {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-black);
  font-size: var(--text-size-lg);
  color: var(--color-text-default);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 상태 라벨 + 점 */
.room-card__status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--text-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-muted);
}

.room-card__status::before {
  content: "";
  display: inline-block;
  width: 0.6em;
  height: 0.6em;
  border-radius: var(--radius-pill);
  background-color: var(--color-success);
  border: var(--border-width-thin) solid var(--color-ink);
}

/* 인원 현황 배지: playerCount/maxPlayers (예: 2/4) */
.room-card__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;
}

/* 가득 찬 방: 인원 배지를 경고색으로, 상태 점을 위험색으로 */
.room-card--full .room-card__count {
  background-color: var(--color-warning);
}

.room-card--full .room-card__status::before {
  background-color: var(--color-danger);
}

/* ── Empty state ───────────────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  text-align: center;
  color: var(--color-text-inverse);
  background-color: color-mix(in srgb, var(--color-ink) 32%, transparent);
  border: var(--border-width-thick) dashed var(--color-text-inverse);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl) var(--space-lg);
}

.empty-state[hidden] {
  display: none;
}

.empty-state__emoji {
  font-size: var(--text-size-3xl);
  line-height: var(--line-height-tight);
}

.empty-state__text {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-bold);
  font-size: var(--text-size-lg);
  color: var(--color-text-inverse);
}

/* ── Lobby-level status line (연결/에러 알림) ──────────── */
.lobby__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;
}

.lobby__notice[hidden] {
  display: none;
}