/* 다빈치코드 — Tailwind 기반.
   여기에는 Tailwind로 표현하기 까다로운 최소한의 베이스만. */

/* 폰트 로드 전엔 앱을 숨겼다가, 준비되면 부드럽게 등장 (FOUT 우글거림 방지) */
#app { opacity: 0; transition: opacity 0.45s ease; }
html.fonts-ready #app { opacity: 1; }

/* 첫 로딩 화면 — 심플한 텍스트 + 퍼센트 */
#loading {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  background: #060303;
  transition: opacity 0.5s ease;
}
html.fonts-ready #loading { opacity: 0; pointer-events: none; }
/* 원형 — 검붉은 액체가 출렁이며 차오름 (테두리·glow 없음) */
.vessel {
  position: relative;
  width: 140px;
  height: 140px;
}
.vessel-svg {
  display: block;
  width: 140px;
  height: 140px;
  overflow: visible;
  /* 상시 버즈: 빠른 RGB 채널 흔들림 + 미세 위치/스큐 jitter (steps로 디지털하게 뚝뚝) */
  animation: vhs-glitch 0.5s steps(1) infinite;
}
@keyframes vhs-glitch {
  0%   { filter: drop-shadow(-2px 0 0 rgba(255,0,64,.55)) drop-shadow(2px 0 0 rgba(0,225,255,.55)); transform: translate(0,0) skewX(0); }
  12%  { filter: drop-shadow(-3px 0 0 rgba(255,0,64,.55)) drop-shadow(1px 0 0 rgba(0,225,255,.55)); transform: translate(1px,0); }
  24%  { filter: drop-shadow(-1px 0 0 rgba(255,0,64,.55)) drop-shadow(3px 0 0 rgba(0,225,255,.55)); transform: translate(-1px,0); }
  36%  { filter: drop-shadow(-4px 0 0 rgba(255,0,64,.7))  drop-shadow(2px 0 0 rgba(0,225,255,.7));  transform: translate(2px,0) skewX(-2deg); }
  48%  { filter: drop-shadow(-2px 0 0 rgba(255,0,64,.55)) drop-shadow(4px 0 0 rgba(0,225,255,.55)); transform: translate(-2px,0); }
  60%  { filter: drop-shadow(-3px 0 0 rgba(255,0,64,.6))  drop-shadow(2px 0 0 rgba(0,225,255,.6));  transform: translate(1px,0) skewX(1.5deg); }
  72%  { filter: drop-shadow(-1px 0 0 rgba(255,0,64,.55)) drop-shadow(2px 0 0 rgba(0,225,255,.55)); transform: translate(0,0); }
  84%  { filter: drop-shadow(-2px 0 0 rgba(255,0,64,.55)) drop-shadow(3px 0 0 rgba(0,225,255,.55)); transform: translate(-1px,0); }
  100% { filter: drop-shadow(-2px 0 0 rgba(255,0,64,.55)) drop-shadow(2px 0 0 rgba(0,225,255,.55)); transform: translate(0,0); }
}

/* 스캔라인 (VHS 질감) — 빨간 액체 위에서만 보이게 multiply, 천천히 롤링 */
.vessel::after {
  content: '';
  position: absolute;
  inset: -12px;
  pointer-events: none;
  z-index: 2;
  background: repeating-linear-gradient(0deg,
    rgba(0,0,0,0) 0 1.5px,
    rgba(0,0,0,0.5) 1.5px 3px);
  mix-blend-mode: multiply;
  animation: scanroll 5s linear infinite;
}
@keyframes scanroll {
  from { background-position-y: 0; }
  to   { background-position-y: 24px; }
}

/* 모션 최소화 기기는 글리치 끔 (채널 분리만 약하게 유지) */
@media (prefers-reduced-motion: reduce) {
  .vessel-svg {
    animation: none;
    filter: drop-shadow(-1px 0 0 rgba(255,0,64,.4)) drop-shadow(1px 0 0 rgba(0,225,255,.4));
  }
  .vessel::after { animation: none; }
}
/* 완료 시 그릇이 먼저 사라짐 → 어두운 배경 잠깐 → 화면 등장 */
#loading.text-gone .vessel {
  opacity: 0;
  transition: opacity 0.45s ease;
}

/* 화면 토글 (JS의 show() 함수가 토글하는 로직) */
.screen { display: none; }
.screen.active { display: flex; min-height: 100dvh; }  /* iOS: 100vh(툴바 포함=화면보다 큼) 대신 dvh로 → 로그인창 스크롤바 제거 */

/* 로비 우상단 햄버거 메뉴 — 노치/다이나믹 아일랜드 피하기 (인라인 top-4 덮어씀) */
#lobby-menu-wrap {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
}

/* 사운드 설정 (전역 고정 — 좌상단) */
.sound-control {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  left: 12px;
  z-index: 300;
  transition: opacity 0.2s ease;
}

/* 게임 방법 버튼 (음소거 옆) */
.help-btn {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  left: 58px;
  z-index: 300;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.75);
  font-family: 'Cinzel', serif;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  transition: color 0.15s, border-color 0.15s, opacity 0.2s ease;
}
.help-btn:hover { color: #fff; border-color: rgba(201,169,97,0.5); }

/* 홈 버튼 (게임 방법 옆) — 게임 화면에선 숨김 */
.home-btn {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  left: 104px;
  z-index: 300;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: color 0.15s, border-color 0.15s, opacity 0.2s ease;
}
.home-btn svg { width: 19px; height: 19px; }
.home-btn:hover { color: #fff; border-color: rgba(201,169,97,0.5); }
body.on-game .home-btn { display: none; }
.mute-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: color 0.15s, border-color 0.15s;
}
.mute-btn:hover { color: #fff; border-color: rgba(255,255,255,0.3); }
.mute-btn svg { width: 18px; height: 18px; }
.mute-btn .mute-off { display: none; }
/* 둘 다 꺼졌을 때만 음소거 아이콘 */
.mute-btn.muted { color: rgba(255,255,255,0.4); }
.mute-btn.muted .mute-on { display: none; }
.mute-btn.muted .mute-off { display: block; }

/* 펼쳐지는 패널 */
.sound-panel {
  position: absolute;
  top: 46px;
  left: 0;
  display: none;
  flex-direction: column;
  gap: 2px;
  background: rgba(8, 5, 5, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 6px;
  min-width: 150px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}
.sound-panel.open { display: flex; }

.snd-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 10px;
  border-radius: 6px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  font-family: 'Cormorant Garamond', 'Noto Serif KR', serif;
  font-size: 15px;
  letter-spacing: 0.05em;
}
.snd-row:hover { background: rgba(255, 255, 255, 0.06); }
.snd-row.on { color: rgba(255, 255, 255, 0.95); }

/* 토글 스위치 */
.snd-switch {
  width: 34px;
  height: 18px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.18);
  position: relative;
  flex-shrink: 0;
  transition: background 0.2s;
}
.snd-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s;
}
.snd-row.on .snd-switch {
  background: rgba(196, 24, 24, 0.7);
  box-shadow: 0 0 8px rgba(196, 24, 24, 0.4);
}
.snd-row.on .snd-switch::after { transform: translateX(16px); }

/* 모달 토글 */
/* 모달: 부드럽게 페이드+스케일 등장 (갑자기 튀어나오지 않게) */
.modal {
  display: flex;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s ease, visibility 0.35s;
}
.modal.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.modal > * {
  transform: scale(0.92) translateY(10px);
  transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}
.modal.show > * {
  transform: scale(1) translateY(0);
}

/* 추측 패널 — 이미 드러난 숫자(추측 불가) 비활성 표시 */
.numpad .num:disabled {
  opacity: 0.22;
  cursor: not-allowed;
  text-decoration: line-through;
  pointer-events: none;
}

/* 승부 긴장감 — 미공개 카드 1장 남았을 때 영역 펄스 */
@keyframes danger-pulse {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(196, 24, 24, 0.3); }
  50%      { box-shadow: inset 0 0 18px 2px rgba(196, 24, 24, 0.45), inset 0 0 0 1px rgba(196, 24, 24, 0.75); }
}
#my-hand.danger {
  animation: danger-pulse 1.4s ease-in-out infinite;
  border-color: rgba(196, 24, 24, 0.5) !important;
}
@keyframes chance-pulse {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(201, 169, 97, 0.25); }
  50%      { box-shadow: inset 0 0 18px 2px rgba(201, 169, 97, 0.4), inset 0 0 0 1px rgba(201, 169, 97, 0.65); }
}
#opp-hand.chance {
  animation: chance-pulse 1.4s ease-in-out infinite;
  border-color: rgba(201, 169, 97, 0.5) !important;
}

/* 토스트 토글 */
.toast { opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; transform: translate(-50%, 8px); }
.toast.show { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }

/* 모바일 viewport 풀높이 (iOS Safari 대응) */
html, body, #app {
  min-height: 100vh;
  min-height: 100dvh;
  background-color: #050302;   /* 배경 이미지 밖/오버스크롤/리페인트 시 흰색 대신 검정 */
}
* { -webkit-tap-highlight-color: transparent; }

/* 한글 본문 폰트 + 자간 */
body {
  font-family: 'Cormorant Garamond', 'Noto Serif KR', serif;
  letter-spacing: -0.04em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 모노스페이스가 필요한 곳은 자간 리셋 (방코드 등) */
.font-mono, [class*="font-['JetBrains"] {
  letter-spacing: 0;
}

/* =========================================================
   화면 전환 오버레이 — 불 꺼졌다 켜지는 효과
   ========================================================= */

.transition-overlay {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}

/* 어두워짐: 처음엔 느리게, 끝에서 확 — 불이 깜빡이며 꺼지는 느낌 */
.transition-overlay.fading-in {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.35s cubic-bezier(0.8, 0, 1, 0.4);
}

/* 밝아짐: 처음엔 빠르게, 끝에서 천천히 — 빛이 천천히 차오르는 느낌 */
.transition-overlay.fading-out {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.55s cubic-bezier(0, 0.6, 0.4, 1);
}

/* =========================================================
   다빈치 로고 — 원본 SVG 위에 3초마다 검붉은 글리치만 깜빡
   ========================================================= */

.logo-wrap {
  position: relative;
}

.logo-glitch {
  position: absolute;
  inset: 0;
  -webkit-mask: url('icons/Da-Vinci.svg') no-repeat center / contain;
          mask: url('icons/Da-Vinci.svg') no-repeat center / contain;
  opacity: 0;
  pointer-events: none;
}

/* 빨간 글리치 채널 (왼쪽으로 어긋남) */
.logo-glitch-r {
  background: #c41818;
  mix-blend-mode: screen;
  animation: logo-glitch-r 3s infinite steps(1);
}

/* 어두운 글리치 채널 (오른쪽으로 어긋남) */
.logo-glitch-b {
  background: #5a0000;
  mix-blend-mode: multiply;
  animation: logo-glitch-b 3s infinite steps(1);
}

@keyframes logo-glitch-r {
  0%, 88%, 100% { opacity: 0; transform: translate(0); clip-path: inset(0); }
  89%           { opacity: 0.85; transform: translate(-4px, 0); clip-path: inset(40% 0 30% 0); }
  90%           { opacity: 0; transform: translate(0); }
  93%           { opacity: 0.65; transform: translate(3px, -1px); clip-path: inset(10% 0 70% 0); }
  94%           { opacity: 0; }
  97%           { opacity: 0.75; transform: translate(-2px, 1px); clip-path: inset(60% 0 10% 0); }
  98%           { opacity: 0; }
}

@keyframes logo-glitch-b {
  0%, 88%, 100% { opacity: 0; transform: translate(0); clip-path: inset(0); }
  89%           { opacity: 0.7; transform: translate(4px, 0); clip-path: inset(40% 0 30% 0); }
  90%           { opacity: 0; transform: translate(0); }
  93%           { opacity: 0.5; transform: translate(-3px, 1px); clip-path: inset(10% 0 70% 0); }
  94%           { opacity: 0; }
  97%           { opacity: 0.6; transform: translate(2px, -1px); clip-path: inset(60% 0 10% 0); }
  98%           { opacity: 0; }
}

/* =========================================================
   게임 카드 — 흑/백, 조커, 공개/비공개 상태
   ========================================================= */

.card {
  width: 52px;
  height: 74px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 카드 폭 기준 container — 안의 숫자가 카드 크기에 비례 */
  container-type: inline-size;
  /* 카드 내 숫자/J 표기: 모노스페이스로 통일해 폭·높이 균일 */
  font-family: 'JetBrains Mono', monospace;
  font-size: 23px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  user-select: none;
  position: relative;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  flex-shrink: 0;
}

/* 카드 안 숫자 — 카드 폭의 ~44%로 비례 (좁아지면 자동 축소) */
.card-val {
  font-size: 44cqw;
  line-height: 1;
}

/* 검정 카드 — 그을린 숯/잿불 */
.card.black {
  background:
    radial-gradient(ellipse at 50% -10%, rgba(120, 55, 20, 0.32), transparent 55%),  /* 윗변 잔열 */
    radial-gradient(circle at 82% 88%, rgba(0, 0, 0, 0.55), transparent 42%),         /* 모서리 탄 자국 */
    linear-gradient(160deg, #1f1714 0%, #060302 100%);
  border: 1px solid rgba(120, 75, 40, 0.3);
  color: rgba(244, 236, 222, 0.9);
  box-shadow:
    inset 0 0 12px 3px rgba(0, 0, 0, 0.7),   /* 가장자리 그을림 */
    0 2px 6px rgba(0, 0, 0, 0.5);
}

/* 흰 카드 — 가장자리 탄 양피지 */
.card.white {
  background:
    radial-gradient(ellipse at 50% 45%,
      #ece0c4 24%,    /* 중앙: 양피지 */
      #cdb98f 58%,
      #7d5a32 86%,    /* 가장자리: 갈변 */
      #2c1a0c 100%);  /* 끝: 탄 검정 */
  border: 1px solid rgba(50, 28, 12, 0.5);
  color: #2a1810;
  box-shadow:
    inset 0 0 10px 2px rgba(60, 28, 8, 0.45),
    0 2px 6px rgba(0, 0, 0, 0.5);
}

/* 카드 뒷면 (상대 비공개) — 어두운 배경에서도 윤곽이 살게
   주의: 클래스명 'hidden'은 Tailwind의 display:none 유틸리티와 충돌하므로 'card-back' 사용 */
.card.card-back {
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.08) 0 2px, transparent 2px 6px),
    linear-gradient(160deg, #2c2222 0%, #140b0b 100%);
  color: transparent;
  border-color: rgba(255, 255, 255, 0.24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 2px 8px rgba(0, 0, 0, 0.55);
}
.card.card-back.white {
  background:
    repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0 2px, transparent 2px 6px),
    linear-gradient(160deg, #f5f0e8 0%, #c8c0b4 100%);
  border-color: rgba(0, 0, 0, 0.28);
}

/* 공개된(맞춰진) 카드 — 소진되어 뒤로 엎어진 상태로 고정.
   흐리게 + 채도/명도 낮춤 → 한눈에 "끝난 카드"로 보이고,
   아랫변을 축으로 뒤로 눕혀(rotateX) 미공개 카드와 구분됨. */
/* 맞춰진 카드: 평면 유지 + 밝은 빨강 테두리 + 봉인 ✕ 워터마크 + 모서리 접힘.
   "간파당해 봉인된 카드" 느낌. 숫자는 또렷이 읽히게 최상단. */
.card.revealed {
  border-color: rgba(255, 80, 72, 0.7);
  box-shadow:
    0 0 0 1.5px rgba(255, 70, 62, 0.95),   /* 밝은 빨강 테두리 링 */
    0 0 9px rgba(255, 55, 48, 0.5),         /* 빨강 글로우 */
    inset 0 0 10px rgba(0, 0, 0, 0.5);      /* 안쪽 어둠(소진 느낌) */
  transform: scale(0.9);                    /* 공개된 카드만 살짝 작게 */
}
/* 어두운 dim 오버레이 (숫자는 안 덮음) */
.card.revealed::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(8, 5, 5, 0.5);
  pointer-events: none;
  z-index: 1;
}
.card.revealed.white::after {
  background: rgba(40, 26, 12, 0.32);
}
/* 봉인 ✕ — 숫자 뒤 옅은 빨강 워터마크 */
.card.revealed::before {
  content: '✕';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: 78cqw;
  line-height: 1;
  color: rgba(255, 90, 78, 0.24);
  z-index: 2;
  pointer-events: none;
}
/* 숫자/조커 문양 — 최상단, 또렷하게 */
.card.revealed .card-val,
.card.revealed .joker-sigil {
  position: relative;
  z-index: 3;
  opacity: 0.95;
}
/* 모서리 접힘(dog-ear) — 우상단 */
.card-dogear {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 14px 14px 0;
  border-color: transparent rgba(10, 6, 6, 0.85) transparent transparent;
  filter: drop-shadow(-1.5px 1.5px 1px rgba(0, 0, 0, 0.5));
  z-index: 4;
  pointer-events: none;
}

/* =========================================================
   카드 등장/인터랙션 애니메이션 (juicy — 발라트로식 overshoot)
   ========================================================= */

/* 손패에 새 카드: 그림자에서 스르르 떠오름 (부드러운 감속, 바운스 없음) */
@keyframes card-enter {
  0%   { opacity: 0; transform: translateY(9px) scale(0.96); filter: brightness(0.4); }
  100% { opacity: 1; transform: translateY(0)   scale(1);    filter: brightness(1); }
}
.card.card-enter {
  animation: card-enter 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* 가져온 카드: 덱(위)에서 회전하며 휙 날아와 살짝 오버슈트 후 안착 */
@keyframes drawn-enter {
  0%   { opacity: 0; transform: translateY(-48px) rotate(-11deg) scale(0.7); }
  55%  { opacity: 1; transform: translateY(5px)   rotate(4deg)   scale(1.06); }
  100% { opacity: 1; transform: translateY(0)     rotate(0deg)   scale(1); }
}
#drawn-card-area .card.drawn-enter {
  animation: drawn-enter 0.55s cubic-bezier(0.34, 1.4, 0.5, 1) both;
}

/* 카드 공개(추측 정답): 뒤집혀 숫자가 드러난 뒤 → 뒤로 엎어지며 소진.
   마지막 프레임을 .revealed 정착 상태와 일치시켜 깜빡임 없이 이어짐. */
@keyframes card-flip {
  0%   { opacity: 1;   transform: rotateY(78deg)  scale(1); }
  55%  { opacity: 1;   transform: rotateY(0deg)   scale(1); }
  100% { opacity: 1;   transform: scale(0.9); }
}
@keyframes card-flip-glow {
  0%   { box-shadow: 0 0 0 1px rgba(255,70,62,0.3),  0 0 8px  rgba(255,55,48,0.2); }
  45%  { box-shadow: 0 0 0 2px rgba(255,90,80,0.95), 0 0 26px rgba(255,55,48,0.6); }
  100% { box-shadow: 0 0 0 1.5px rgba(255,70,62,0.95), 0 0 9px rgba(255,55,48,0.5), inset 0 0 10px rgba(0,0,0,0.5); }
}
.card.card-flip {
  transform-origin: bottom center;
  animation:
    card-flip 0.7s cubic-bezier(0.16, 1, 0.3, 1) both,
    card-flip-glow 0.9s ease both;
}

/* 호버 juice (마우스 환경) — 내 카드/추측 대상 카드가 떠오름 */
@media (hover: hover) {
  #my-hand .card:hover,
  #opp-hand .card.targetable:hover {
    transform: translateY(-5px);
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 5;
  }
}
/* 탭 피드백 (모바일) */
#opp-hand .card.targetable:active {
  transform: translateY(-3px);
}

/* 추측 대상 가능 — 호버/탭 시 강조 */
.card.targetable {
  cursor: pointer;
}
.card.targetable:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(196, 24, 24, 0.5), 0 4px 12px rgba(196, 24, 24, 0.3);
}

/* 조커 — 가장 심하게 타서 "재"만 남은 스타일.
   J 글자가 흐릿하게 사그라들고 잔불 글로우만 남음 */
.card.joker.black {
  background:
    radial-gradient(ellipse at 50% 40%, rgba(50, 24, 10, 0.55), transparent 72%),
    linear-gradient(160deg, #1a1210 0%, #040201 100%);
}
.card.joker.white {
  background:
    radial-gradient(ellipse at 50% 45%,
      #d6c6a4 14%,
      #9a7848 52%,
      #4a3018 84%,
      #1a0e06 100%);
}
.card.joker .card-val {
  opacity: 0.62;
  /* SVG라 text-shadow 대신 drop-shadow로 잔불 글로우 */
  filter: blur(0.3px) drop-shadow(0 0 5px rgba(255, 95, 25, 0.5));
}
.card.joker .joker-sigil {
  width: 64cqw;          /* 카드 폭의 64% (card가 container) */
  display: flex;
  align-items: center;
  justify-content: center;
}
.card.joker .joker-sigil svg {
  width: 100%;
  height: auto;
  display: block;
}
.card.joker.black .card-val { color: #cabaa8; }    /* 재 (흰빛) */
.card.joker.white .card-val { color: #3a281a; }    /* 재 (갈빛) */

/* 조커 위치 이동 버튼 — 카드 하단 좌우 오버레이 */
.joker-move {
  position: absolute;
  bottom: 3px;
  width: 36%;
  max-width: 20px;
  aspect-ratio: 1;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(196, 24, 24, 0.45);
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.joker-move-left { left: 3px; }
.joker-move-right { right: 3px; }
.joker-move:hover {
  background: rgba(196, 24, 24, 0.35);
  border-color: rgba(196, 24, 24, 0.7);
  color: #fff;
}
.joker-move:active { transform: scale(0.9); }

/* =========================================================
   게임 화면 보조 요소
   ========================================================= */

/* 가져온 카드 영역 라벨 */
#drawn-card-area .label {
  font-size: 10px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
}

/* 가져온 카드는 살짝 크게 + 글로우 */
#drawn-card-area .card {
  width: 64px;
  height: 90px;
  font-size: 30px;
  box-shadow: 0 0 24px rgba(196, 24, 24, 0.25), 0 4px 12px rgba(0, 0, 0, 0.6);
}

/* 턴 인디케이터 — 상대 턴이면 검붉게 */
#turn-indicator.opp {
  color: rgba(196, 24, 24, 0.9);
  border-color: rgba(196, 24, 24, 0.4);
}

/* 마지막 추측 색상 */
#last-guess .correct {
  color: rgba(150, 220, 180, 0.9);
}
#last-guess .wrong {
  color: rgba(220, 100, 100, 0.9);
}

/* 액션 버튼 (renderActions에서 동적 생성) */
#actions button.primary {
  width: 100%;
  padding: 12px 16px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.95);
  color: #060303;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
#actions button.primary:hover { background: #fff; }
#actions button.primary:active { transform: scale(0.98); }

#actions button.secondary {
  width: 100%;
  padding: 12px 16px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
#actions button.secondary:hover { background: rgba(255, 255, 255, 0.15); }
#actions button.secondary:active { transform: scale(0.98); }

#actions .row {
  display: flex;
  gap: 8px;
}
#actions .row button {
  flex: 1;
}

#actions .hint {
  font-size: 15px;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.7);
  font-style: italic;
  text-align: center;
  font-family: 'Cormorant Garamond', serif;
  padding: 4px;
  line-height: 1.45;
}

/* 배치 단계 — 상대 손 가림 placeholder */
.arrange-placeholder {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 15px;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.4);
  padding: 18px 8px;
  text-align: center;
  animation: reconnect-pulse 2.4s ease-in-out infinite;
}

/* 배치 단계 — 카운트다운 */
.arrange-timer {
  text-align: center;
  font-size: 15px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.65);
  font-family: 'Cormorant Garamond', serif;
  padding-top: 2px;
}
.arrange-timer strong {
  color: rgba(220, 90, 90, 0.95);
  font-size: 22px;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0;
  margin: 0 3px;
}

/* 로그인↔회원가입 모드 전환 페이드 */
#auth-form {
  transition: opacity 0.18s ease;
}
#auth-form.mode-fading {
  opacity: 0;
}

/* 상대 연결끊김 대기 — 검붉게 천천히 깜빡 */
#actions .hint.waiting-reconnect {
  color: rgba(220, 90, 90, 0.85);
  font-style: normal;
  animation: reconnect-pulse 1.8s ease-in-out infinite;
}
@keyframes reconnect-pulse {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 1; }
}

/* 로그 라인 */
.log-line {
  padding: 2px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
}
.log-line:last-child { border-bottom: none; }

/* =========================================================
   카드 뽑기 picker (색 칩 → 부채꼴 → 선택 버튼)
   ========================================================= */

/* 색 선택 칩 */
.color-chips {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 4px 0 8px;
}

.color-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.7);
  font-family: 'Cormorant Garamond', 'Noto Serif KR', serif;
  font-size: 13px;
  letter-spacing: 0.2em;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
}
.color-chip:hover:not(:disabled) {
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}
.color-chip:active:not(:disabled) {
  transform: scale(0.97);
}
.color-chip:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.color-chip.active {
  background: rgba(196, 24, 24, 0.15);
  border-color: rgba(196, 24, 24, 0.6);
  color: #fff;
  box-shadow: 0 0 12px rgba(196, 24, 24, 0.2);
}

.chip-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.swatch-black {
  background: linear-gradient(160deg, #1a1414, #060303);
}
.swatch-white {
  background: linear-gradient(160deg, #f5f0e8, #c8c0b4);
  border-color: rgba(0, 0, 0, 0.2);
}

.chip-label {
  font-weight: 500;
}

.chip-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.45);
  margin-left: 2px;
}
.color-chip.active .chip-count {
  color: rgba(255, 255, 255, 0.85);
}

/* 부채꼴 카드 영역
   카드들을 단순 flex로 가로 배치하고 음수 margin으로 겹침.
   각 카드는 JS가 transform으로 회전+Y offset을 줘 부채꼴 효과를 냄. */
.deck-fan {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  /* 색 선택 여부와 무관하게 항상 같은 높이 유지 (부채꼴이 펼쳐졌을 때 기준) */
  height: 110px;
  padding: 20px 0 4px;
}

.fan-card {
  /* flex item에서 .card 기본 width/height/display가 어떤 이유로 안 먹어,
     명시적으로 다시 박아 보장. */
  width: 44px !important;
  height: 62px !important;
  display: inline-block !important;
  flex-shrink: 0;
  margin: 0 -14px;            /* 서로 겹치게 */
  transform-origin: 50% 100%; /* 회전축: 카드 아래 중앙 */
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.fan-card.white {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.fan-card:hover {
  z-index: 999 !important;
}
.fan-card.picked {
  box-shadow: 0 0 0 1px rgba(196, 24, 24, 0.8), 0 6px 22px rgba(196, 24, 24, 0.5);
  border-color: rgba(196, 24, 24, 0.8);
  z-index: 999 !important;
}

.fan-placeholder {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 0.3);
  /* placeholder도 fan과 같은 영역을 차지하지만 가운데에 텍스트만 표시 */
  align-self: center;
}

/* =========================================================
   #game 레이아웃 — Grid로 5영역 고정. 화면에 딱 맞춰 스크롤 없음.
   ========================================================= */

.game-layout {
  display: grid;
  grid-template-rows: auto auto 1fr auto;   /* header / opp / center(가변) / me */
  gap: 12px;
  height: 100dvh;          /* 정확히 viewport 높이 */
  box-sizing: border-box;  /* padding 포함 */
  overflow: hidden;        /* 안에서 절대 스크롤 안 생기게 */
  /* 노치/홈인디케이터(safe area) 피하기 — 인라인 pt-4/pb-4/px-5에 더해서 덮어씀 */
  padding-top: calc(16px + env(safe-area-inset-top)) !important;
  padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
  padding-left: calc(20px + env(safe-area-inset-left)) !important;
  padding-right: calc(20px + env(safe-area-inset-right)) !important;
}

/* 헤더는 좌상단 음소거/? 버튼과 같은 줄 높이로 둔다 (.game-layout의 safe-area
   패딩이 이미 노치만큼 내려줌).
   헤더의 turn-indicator는 가운데 큰 안내 텍스트와 내용이 겹치고 좌상단 버튼과
   충돌하므로 숨긴다 → DECK/햄버거만 우측에 남아 버튼과 좌우 균형이 맞는다. */
#game #turn-indicator { display: none; }

.game-header { grid-row: 1; }
.game-opp    { grid-row: 2; }
.game-center { grid-row: 3; min-height: 0; overflow: hidden; }
.game-me     { grid-row: 4; }

/* 상대/내 카드 영역 — 빈 상태에서도 일정 높이 유지 */
#opp-hand, #my-hand {
  min-height: 90px;   /* 카드 74 + padding 8*2 — 카드 수와 무관하게 덱 높이 고정 */
  height: 90px;
  padding: 8px 12px !important;
  flex-wrap: nowrap;       /* 항상 한 줄 */
  align-items: center;     /* 카드 작아져도 세로 가운데 */
  perspective: 700px;      /* 카드 뒤집기 입체감 */
}

/* 손패 카드: 적을 땐 52px, 많으면 폭에 맞춰 균등 축소 (한 줄 유지) */
#opp-hand .card, #my-hand .card,
#opp-hand .card-slot, #my-hand .card-slot {
  flex: 1 1 0;
  width: auto;
  max-width: 52px;
  min-width: 0;
  height: auto;
  aspect-ratio: 52 / 74;   /* 비율 유지하며 축소 */
}

/* 태블릿 (iPad mini ~819px): 칼럼 폭 + 카드 + 덱 높이 키움 */
@media (min-width: 768px) {
  #game .game-layout {
    max-width: 620px;
  }
  #opp-hand, #my-hand {
    height: 116px;
    min-height: 116px;
  }
  #opp-hand .card, #my-hand .card,
  #opp-hand .card-slot, #my-hand .card-slot {
    max-width: 72px;
  }
  #drawn-card-area .card {
    width: 80px;
    height: 114px;
  }
}

/* 큰 태블릿 (iPad Air 820 / Pro 834·1024): 한 단계 더 키움 */
@media (min-width: 820px) {
  #game .game-layout {
    max-width: 720px;
  }
  #opp-hand, #my-hand {
    height: 134px;
    min-height: 134px;
  }
  #opp-hand .card, #my-hand .card,
  #opp-hand .card-slot, #my-hand .card-slot {
    max-width: 84px;
  }
  #drawn-card-area .card {
    width: 92px;
    height: 131px;
  }
}

/* drawn-card 영역: 카드 없으면 공간 안 먹게 */
#drawn-card-area:empty {
  display: none;
}
#drawn-card-area {
  min-height: 0 !important;
}

/* last-guess도 비었으면 공간 안 먹게 */
#last-guess:empty {
  display: none;
}

/* setup에서 진척 표시(작은 점) */
.setup-progress {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 8px 0 4px;
}
.setup-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: background 0.2s, border-color 0.2s;
}
.setup-dot.filled {
  background: rgba(196, 24, 24, 0.6);
  border-color: rgba(196, 24, 24, 0.8);
  box-shadow: 0 0 8px rgba(196, 24, 24, 0.3);
}

/* 선택 버튼 */
.picker-confirm {
  margin-top: 8px;
}
.picker-confirm:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.picker-confirm:disabled:hover {
  background: rgba(255, 255, 255, 0.95);
}

/* 게임오버 결과 텍스트 색상 */
.result.win {
  color: rgba(220, 200, 150, 0.95);
  text-shadow: 0 0 16px rgba(220, 200, 150, 0.3);
}
.result.lose {
  color: rgba(196, 24, 24, 0.9);
  text-shadow: 0 0 16px rgba(196, 24, 24, 0.3);
}

/* =========================================================
   턴 시작 알림 오버레이
   페이드인 0.4s → 유지 0.7s → 페이드아웃 0.5s (총 1.6s)
   ========================================================= */

.turn-announce {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  /* 텍스트 가독성 위해 어두운 배경 — opacity 애니로 부드럽게 페이드(깜빡임 없음) */
  background: rgba(0, 0, 0, 0.8);
}

.turn-announce.show {
  animation: turn-announce-cycle 1.6s ease forwards;
}

.turn-announce-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transform: scale(0.92);
}

.turn-announce.show .turn-announce-inner {
  animation: turn-announce-scale 1.6s ease forwards;
}

.turn-announce-sub {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.4em;
  text-transform: lowercase;
  color: rgba(255, 255, 255, 0.45);
}

.turn-announce-main {
  font-family: 'Cormorant Garamond', 'Noto Serif KR', serif;
  font-weight: 500;
  font-size: 44px;
  letter-spacing: 0.18em;
  color: #fff;
  text-shadow: 0 0 24px rgba(196, 24, 24, 0.5), 0 2px 8px rgba(0, 0, 0, 0.8);
}

/* 상대 턴: 검붉게 + 살짝 작게 */
.turn-announce.opp .turn-announce-main {
  color: rgba(196, 24, 24, 0.95);
  font-size: 38px;
  text-shadow: 0 0 24px rgba(196, 24, 24, 0.45), 0 2px 8px rgba(0, 0, 0, 0.8);
}
.turn-announce.opp .turn-announce-sub {
  color: rgba(196, 24, 24, 0.45);
}

@keyframes turn-announce-cycle {
  0%   { opacity: 0; }
  25%  { opacity: 1; }     /* 0.4s = 페이드인 완료 */
  68%  { opacity: 1; }     /* 1.1s = 유지 끝 (0.4 + 0.7) */
  100% { opacity: 0; }     /* 1.6s = 페이드아웃 완료 */
}

@keyframes turn-announce-scale {
  0%   { transform: scale(0.92); }
  25%  { transform: scale(1); }
  68%  { transform: scale(1); }
  100% { transform: scale(1.06); }
}

/* =========================================================
   빈 카드 슬롯 (setup 단계에서 아직 안 채워진 자리)
   ========================================================= */

.card-slot {
  width: 52px;
  height: 74px;
  border-radius: 7px;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
}

/* =========================================================
   로그 드로어 (우측 슬라이드)
   ========================================================= */

.log-drawer {
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
}

.log-drawer.open {
  pointer-events: auto;
}

.log-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.log-drawer.open .log-drawer-backdrop {
  opacity: 1;
}

.log-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(360px, 85vw);
  background: #0a0606;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: -8px 0 40px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1);
  /* 헤더가 노치에 가리지 않게, 하단 버튼이 홈인디케이터에 가리지 않게 */
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

/* 드로어가 열리면 좌상단 fixed 음소거/도움말 버튼(z-index 300)이
   드로어(z-index 80) 위로 튀어나오므로 숨긴다 */
.log-drawer.open ~ .sound-control,
.log-drawer.open ~ .help-btn,
body:has(.log-drawer.open) .sound-control,
body:has(.log-drawer.open) .help-btn {
  opacity: 0;
  pointer-events: none;
}

.log-drawer.open .log-drawer-panel {
  transform: translateX(0);
}

/* =========================================================
   감정표현(이모트) — 피커 + 떠오르는 리액션
   ========================================================= */

/* 내 덱 우측 상단 — 이모트 버튼 (레이아웃 영향 없게 절대배치) */
.game-me { position: relative; }
.emote-wrap {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 40;
}

/* 버튼 위로 펼쳐지는 이모지 피커 */
.emote-picker {
  position: absolute;
  bottom: calc(100% + 8px);   /* 버튼 위로 */
  right: 0;
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
  width: 208px;   /* 4열 × 2행 (44px*4 + gap + padding, border-box) */
  padding: 8px;
  border-radius: 10px;
  background: rgba(10, 6, 6, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  /* 닫힘 상태 */
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px) scale(0.96);
  transform-origin: bottom right;
  transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.18s;
}
.emote-picker.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.emote-opt {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid transparent;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, transform 0.08s, border-color 0.12s;
}
.emote-opt:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255,255,255,0.2); }
.emote-opt:active { transform: scale(0.88); }
.emote-opt img { width: 30px; height: 30px; display: block; pointer-events: none; }

/* 떠오르는 리액션 오버레이 (JS가 위치 계산해 띄움) */
#emote-layer {
  position: fixed;
  inset: 0;
  z-index: 65;
  pointer-events: none;
  overflow: hidden;
}
.emote-float {
  position: absolute;
  font-size: 46px;
  line-height: 1;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.6));
  will-change: transform, opacity;
  animation: emote-rise 1.7s cubic-bezier(0.22, 0.7, 0.3, 1) forwards;
}
.emote-float img { width: 58px; height: 58px; display: block; }
@keyframes emote-rise {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  16%  { opacity: 1; transform: translate(-50%, -62%) scale(1.18); }
  30%  { transform: translate(-50%, -68%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -150%) scale(0.95); }
}

/* =========================================================
   오답 피드백 — 미세한 화면 떨림 + 핏빛 가장자리 번쩍
   (아이폰은 웹 진동 불가 → 시각 효과로 손맛 대체)
   ========================================================= */

/* 가운데는 투명, 가장자리만 핏빛으로 번쩍 (vignette) */
.hurt-flash {
  position: fixed;
  inset: 0;
  z-index: 9990;        /* 화면전환 오버레이(9999)보다는 아래 */
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse at center,
    transparent 42%,
    rgba(150, 12, 12, 0.18) 70%,
    rgba(150, 8, 8, 0.62) 100%);
}
.hurt-flash.show {
  animation: hurt-flash 0.5s ease-out;
}
@keyframes hurt-flash {
  0%   { opacity: 0; }
  12%  { opacity: 1; }
  100% { opacity: 0; }
}

/* 미세 떨림 — 게임 레이아웃에만, 아주 약하게 (±2px) */
.game-layout.shaking {
  animation: subtle-shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
@keyframes subtle-shake {
  0%, 100% { transform: translate(0, 0); }
  15%      { transform: translate(-2px, 1px); }
  30%      { transform: translate(2px, -1px); }
  45%      { transform: translate(-2px, 0); }
  60%      { transform: translate(2px, 1px); }
  75%      { transform: translate(-1px, -1px); }
  90%      { transform: translate(1px, 0); }
}

/* 모션 최소화 설정 기기는 떨림 끄고 번쩍만 약하게 */
@media (prefers-reduced-motion: reduce) {
  .game-layout.shaking { animation: none; }
  .hurt-flash.show { animation-duration: 0.35s; }
}

/* =========================================================
   연결 끊김 — 재접속 오버레이 (끊긴 본인에게 표시)
   ========================================================= */
#reconnect-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;            /* 모달보다 위, 화면전환 오버레이(9999)보다 아래 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(6, 3, 3, 0.92);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s;
}
#reconnect-overlay.show { opacity: 1; visibility: visible; }
.reconnect-inner { text-align: center; max-width: 320px; }
.reconnect-title {
  font-family: 'Cormorant Garamond', 'Noto Serif KR', serif;
  font-size: 26px;
  letter-spacing: 0.04em;
  color: rgba(220, 90, 90, 0.95);
  margin-bottom: 8px;
}
.reconnect-sub {
  font-family: 'Cormorant Garamond', 'Noto Serif KR', serif;
  font-size: 15px;
  font-style: italic;
  color: rgba(255, 255, 255, 0.6);
  animation: reconnect-pulse 1.8s ease-in-out infinite;
}
.reconnect-actions {
  display: none;
  flex-direction: column;
  gap: 8px;
  margin-top: 22px;
}
.reconnect-actions.show { display: flex; }
.reconnect-actions button {
  padding: 11px 16px;
  border-radius: 6px;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
#reconnect-retry { background: rgba(255, 255, 255, 0.92); color: #060303; border: none; font-weight: 600; }
#reconnect-leave { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.15); color: #fff; }
.reconnect-actions button:active { transform: scale(0.98); }

/* 로비 메뉴 버튼 — safe-area 보정(노치/다이나믹 아일랜드 회피, 좌측 버튼과 동일 정렬) */
#lobby-menu-wrap{ position:fixed; top:max(12px, env(safe-area-inset-top)); right:max(12px, env(safe-area-inset-right)); }

/* 전적 초기화 버튼 무장(2단계 확인) 상태 — 빨강 강조 */
.reset-armed{ color:#fff !important; background:rgba(214,68,52,.92) !important; border-radius:8px; padding:5px 12px; font-weight:600; }