/* 다빈치코드 — 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; }
/* (옛 로딩 그릇 .vessel CSS 제거 — 로딩은 .boot-* 사용) */

/* 화면 토글 (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: 'Share Tech Mono', monospace;
  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(90,166,216,0.6); }

/* 홈 버튼 (게임 방법 옆) — 게임 화면에선 숨김 */
.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(90,166,216,0.6); }
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: 'Pretendard Variable', Pretendard, system-ui, sans-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(90, 166, 216, 0.7);
  box-shadow: 0 0 8px rgba(90, 166, 216, 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);
}

/* (옛 넘패드/카드 펄스 CSS 제거) */

/* 토스트 토글 */
.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: 'Pretendard Variable', Pretendard, system-ui, sans-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);
}

/* 로고 컨테이너 (용의주도 글리치 텍스트는 .yj-logo 사용) */
.logo-wrap { position: relative; }

/* =========================================================
   (옛 게임 카드/조커 CSS 제거 — 현재는 CCTV 보드 타일 .gw-tile 사용)
   ========================================================= */


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


/* 로그 라인 */
.log-line {
  padding: 2px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
}
.log-line:last-child { border-bottom: none; }
/* 내 질문 — 또렷 + 좌측 블루 바 */
.log-line.log-mine {
  color: rgba(233, 240, 245, 0.95);
  border-left: 2px solid rgba(90,166,216,0.7);
  padding-left: 8px;
}
/* 상대 질문 — 흐리게 */
.log-line.log-opp {
  color: rgba(216, 210, 196, 0.4);
  padding-left: 8px;
}

/* 게임오버 결과 텍스트 색상 */
.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);
}

/* 게임오버 정답 썸네일 — 내가 맞췄는지 ✓/✗ 배지 (우상단) */
.go-mark {
  position: absolute; top: -8px; right: -8px; z-index: 5;
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 700; line-height: 1;
  border: 2px solid #0E0F12;   /* 썸네일과 분리되는 외곽선 */
}
.go-mark-ok { background: #16a34a; color: #fff; box-shadow: 0 0 12px rgba(34,197,94,0.6); }
.go-mark-no { background: #C2402F; color: #fff; box-shadow: 0 0 12px rgba(194,64,47,0.6); }

/* 인물 사진 공용 필터 (인스펙트·게임오버 모달) — 이중첩자(scn-0)만 흑백, 나머지 컬러 */
.scn-photo { filter: contrast(1.05); }
body.scn-0 .scn-photo { filter: grayscale(1) contrast(1.05); }

/* =========================================================
   턴 시작 알림 오버레이
   페이드인 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;
  pointer-events: auto;   /* 떠 있는 동안 아래 보드·버튼 클릭 차단 */
}

.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: 'Share Tech Mono', monospace;
  font-style: normal;
  font-size: 14px;
  letter-spacing: 0.4em;
  text-transform: lowercase;
  color: rgba(90, 166, 216, 0.6);
}

.turn-announce-main {
  font-family: 'Pretendard Variable', Pretendard, system-ui, sans-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); }
}

/* =========================================================
   답 공개 오버레이 — 질문 직후 "질문 + 답"을 크게 보여줌 (턴 넘어가기 전)
   페이드인 0.35s → 유지 2.15s → 페이드아웃 0.5s (총 3s)
   ========================================================= */
.answer-reveal {
  position: fixed; inset: 0; z-index: 72;   /* turn-announce(70)보다 위 */
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; opacity: 0;
  background: rgba(0, 0, 0, 0.82);
}
.answer-reveal.show { animation: answer-reveal-cycle 3s ease forwards; pointer-events: auto; }   /* 떠 있는 동안 클릭 차단 */

.answer-reveal-inner {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 0 28px; text-align: center;
  transform: scale(0.9);
}
.answer-reveal.show .answer-reveal-inner { animation: answer-reveal-scale 3s cubic-bezier(0.16,1,0.3,1) forwards; }

/* 누가 물었나 — 작은 모노 라벨 */
.answer-reveal-who {
  font-family: 'Share Tech Mono', monospace;
  font-size: 13px; letter-spacing: 0.3em; text-indent: 0.3em;
  text-transform: uppercase; color: var(--crt-blue);
}
/* 질문 본문 — 크게 */
.answer-reveal-q {
  font-family: 'Pretendard Variable', Pretendard, system-ui, sans-serif;
  font-weight: 600; font-size: 30px; letter-spacing: -0.03em;
  color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,0.7);
  line-height: 1.25;
}
/* 답(개수) — 가장 크게, 색으로 강조 */
.answer-reveal-count {
  display: flex; align-items: baseline; gap: 6px; margin-top: 4px;
}
.answer-reveal-num {
  font-family: 'Share Tech Mono', monospace;
  font-size: 68px; font-weight: 700; line-height: 1;
}
.answer-reveal-unit {
  font-family: 'Pretendard Variable', Pretendard, system-ui, sans-serif;
  font-size: 22px; color: var(--crt-muted); letter-spacing: -0.02em;
}
/* 답 0명: 차가운 블루 / 2명: 레드 / 1명: 노란빛(둘이 갈리는 결정적 단서) */
.answer-reveal[data-hit="0"] .answer-reveal-num { color: var(--crt-line);
  text-shadow: 0 0 28px rgba(90,166,216,0.6); }
.answer-reveal[data-hit="2"] .answer-reveal-num { color: #ff7a68;
  text-shadow: 0 0 28px rgba(226,80,60,0.6); }
.answer-reveal[data-hit="1"] .answer-reveal-num { color: #ffcf5a;
  text-shadow: 0 0 30px rgba(255,207,90,0.7); }
/* 부연 설명 라벨 (0/1/2명 공통) — count별 색은 data-hit로 */
.answer-reveal-hint {
  margin-top: 14px; padding: 0 24px;
  font-family: 'Pretendard Variable', Pretendard, sans-serif;
  font-size: 15px; letter-spacing: -0.04em; line-height: 1.5;
  color: rgba(216,210,196,0.7); min-height: 20px;
  word-break: keep-all; text-align: center;
}
.answer-reveal[data-hit="1"] .answer-reveal-hint { color: #ffcf5a; font-weight: 600; }

@keyframes answer-reveal-cycle {
  0%   { opacity: 0; }
  12%  { opacity: 1; }     /* 0.35s 페이드인 */
  83%  { opacity: 1; }     /* 2.5s 유지 끝 */
  100% { opacity: 0; }     /* 3s 페이드아웃 */
}
@keyframes answer-reveal-scale {
  0%   { transform: scale(0.9); }
  12%  { transform: scale(1); }
  83%  { transform: scale(1); }
  100% { transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .answer-reveal-inner { transform: scale(1); }
}

/* =========================================================
   사건 브리핑 오버레이 — 게임 시작 시 스토리 + 룰 + 내 인물
   ========================================================= */
.briefing {
  position: fixed; inset: 0; z-index: 400;   /* 전역 음소거·도움말(300)보다 위 */
  display: flex; flex-direction: column;
  /* 레이어(위→아래): 어둡게 까는 스크림 → 시나리오 배경 → 기본 그라데이션(이미지 없을 때).
     브리핑은 글이 많아 스크림을 진하게 둬 가독성 유지. 배경은 분위기만 은은히. */
  background-image:
    linear-gradient(rgba(8, 9, 12, 0.80), rgba(8, 9, 12, 0.86)),
    var(--scn-bg, none),
    radial-gradient(ellipse 140% 90% at 50% -10%, #14161B, #0B0C0F 70%);
  background-size: cover, cover, auto;
  background-position: center center, center center, center top;
  background-repeat: no-repeat;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.45s ease, visibility 0.45s;
}
.briefing.show { opacity: 1; visibility: visible; pointer-events: auto; }

/* 브리핑 중엔 좌상단 전역 버튼(음소거·도움말) 숨김 — 브리핑을 가리지 않게 */
body.briefing-open .sound-control,
body.briefing-open .help-btn { opacity: 0; pointer-events: none; }

.briefing-scroll {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column;
}
.briefing-inner {
  width: 100%; max-width: 30rem; margin: 0 auto;
  padding: max(56px, calc(env(safe-area-inset-top) + 44px)) 24px 24px;
  display: flex; flex-direction: column; gap: 16px;
  transform: translateY(12px);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.briefing.show .briefing-inner { transform: translateY(0); }
/* 스텝 내부 요소 간격 (제목·스토리·표적 등이 붙지 않게) */
.briefing-step { display: flex; flex-direction: column; gap: 14px; }
.briefing-step[hidden] { display: none; }

/* 사건 번호 태그 (REC 점 재사용) */
.briefing-tag {
  display: flex; align-items: center; gap: 8px;
  font-family: 'Share Tech Mono', monospace; font-size: 12px;
  letter-spacing: 0.25em; color: var(--crt-red);
}
.briefing-tag .rec-dot {
  width: 8px; height: 8px; border-radius: 50%; display: inline-block;
  background: var(--crt-red); box-shadow: 0 0 8px var(--crt-red);
  animation: rec-blink 1s steps(1) infinite;
}

/* 작전명 / 스토리 */
.briefing-title {
  font-family: 'Pretendard Variable', Pretendard, sans-serif;
  font-weight: 800; font-size: 28px; letter-spacing: -0.04em;
  color: #fff; line-height: 1.2;
}
.briefing-story {
  color: rgba(216,210,196,0.78); font-size: 15px; line-height: 1.75; letter-spacing: -0.04em;
  word-break: keep-all;
}
.briefing-story b { color: #cdd6df; font-weight: 600; }

/* 섹션 라벨 (수사 방법) */
.briefing-section-label {
  font-family: 'Share Tech Mono', monospace; font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--crt-muted);
}

/* 표적 라벨 — 2줄 (자간 정상) */
.briefing-target-label {
  font-family: 'Pretendard Variable', Pretendard, sans-serif;
  font-size: 16px; font-weight: 700; letter-spacing: -0.04em; line-height: 1.35;
  color: #e9edf2;
  border-top: 1px solid rgba(255,255,255,0.08); padding-top: 28px; margin-top: 12px;
}
.briefing-target-label .sub {
  display: block; font-size: 13px; font-weight: 400; letter-spacing: -0.04em;
  color: rgba(216,210,196,0.5); margin-top: 3px;
}

/* 표적 2인 (큰 머그샷 서류 카드) */
.briefing-secret { display: flex; flex-direction: column; gap: 14px; }
.tcard {
  display: flex; align-items: stretch; gap: 0; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1); border-radius: 10px;
  background: rgba(255,255,255,0.02);
}
.tcard-photo-wrap { position: relative; flex-shrink: 0; }
body.scn-0 .tcard-photo { filter: grayscale(1) contrast(1.05); }   /* 이중첩자만 흑백 */
.tcard-photo {
  width: 140px; height: 140px; object-fit: cover; display: block;
  filter: contrast(1.05);
  border-right: 1px solid rgba(255,255,255,0.08);
}
.tcard-photo-ph {
  display: flex; align-items: center; justify-content: center;
  font-size: 56px; background: rgba(0,0,0,0.4);
}
.tcard-no {
  position: absolute; top: 6px; left: 6px;
  font-family: 'Share Tech Mono', monospace; font-size: 9px; letter-spacing: 0.08em;
  color: rgba(216,210,196,0.9); background: rgba(0,0,0,0.5);
  padding: 2px 5px; border-radius: 2px;
}
.tcard-info { display: flex; flex-direction: column; justify-content: center; gap: 7px; padding: 0 18px; min-width: 0; }
.tcard-name {
  font-family: 'Pretendard Variable', Pretendard, sans-serif;
  font-size: 24px; font-weight: 700; letter-spacing: -0.04em; color: #fff;
}
.tcard-attrs { font-size: 13px; letter-spacing: -0.04em; color: rgba(216,210,196,0.55); }

/* 룰 */
.briefing-rules { display: flex; flex-direction: column; gap: 16px; margin-top: 18px; }
.briefing-rule {
  display: flex; align-items: flex-start; gap: 11px;
  color: rgba(216,210,196,0.82); font-size: 14px; line-height: 1.6; letter-spacing: -0.04em;
  word-break: keep-all;
}
.briefing-rule b { color: #fff; font-weight: 600; }
.briefing-rule-no {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Share Tech Mono', monospace; font-size: 12px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.15);
  color: rgba(216,210,196,0.75);
}

/* 하단 버튼 영역 (뒤로 + 다음/수사개시) */
.briefing-actions {
  flex-shrink: 0; display: flex; align-items: stretch; gap: 10px;
  padding: 14px 20px calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255,255,255,0.08);
}
.briefing-back {
  flex-shrink: 0; padding: 0 18px; border-radius: 8px;
  font-family: 'Share Tech Mono', monospace; font-size: 13px; letter-spacing: 0.05em;
  color: rgba(216,210,196,0.6); border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.03); cursor: pointer;
}
.briefing-back:hover { color: #fff; border-color: rgba(255,255,255,0.3); }
.briefing-cta {
  flex: 1; text-align: center; cursor: pointer; user-select: none;
  padding: 14px 24px; border-radius: 8px;
  font-family: 'Share Tech Mono', monospace; font-size: 15px; letter-spacing: 0.12em;
  color: #8FCDF2;
  border: 1px solid rgba(90,166,216,0.5);
  background: linear-gradient(180deg, rgba(90,166,216,0.12), rgba(90,166,216,0.04));
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.briefing-cta:hover { color: #d6efff; border-color: rgba(143,205,242,0.85); }
.briefing-cta:active { transform: scale(0.99); }
.briefing-cta.waiting {
  color: rgba(216,210,196,0.45); cursor: default;
  border-color: rgba(255,255,255,0.12); background: rgba(255,255,255,0.02);
}
.briefing-cta.waiting:hover { color: rgba(216,210,196,0.45); }
/* 텍스트만 은은히 깜빡 */
.briefing-cta > span { display: inline-block; animation: briefing-cta-pulse 1.8s ease-in-out infinite; }
.briefing-cta:hover > span { animation: none; }
@keyframes briefing-cta-pulse { 0%,100% { opacity: 0.6; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .briefing-inner { transform: translateY(0); }
  .briefing-cta > span { animation: none; opacity: 1; }
}

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

/* ── 수사 기록 드로어 (우측 슬라이드) ── */
.drawer { position: fixed; inset: 0; z-index: 60; visibility: hidden; pointer-events: none; transition: visibility 0.3s; }
.drawer.open { visibility: visible; pointer-events: auto; }
.drawer-backdrop {
  position: absolute; inset: 0; background: rgba(0,0,0,0.6);
  opacity: 0; transition: opacity 0.25s ease;
}
.drawer.open .drawer-backdrop { opacity: 1; }
.drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(360px, 86vw);
  display: flex; flex-direction: column;
  background: #0B0C0F;
  border-left: 1px solid rgba(255,255,255,0.1);
  box-shadow: -12px 0 50px rgba(0,0,0,0.6);
  padding: max(16px, env(safe-area-inset-top)) 18px calc(18px + env(safe-area-inset-bottom));
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.drawer.open .drawer-panel { transform: translateX(0); }
.drawer:not(.open) .drawer-panel { transition: transform 0.24s cubic-bezier(0.4, 0, 1, 1); }
.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  color: #fff; font-size: 15px; font-weight: 700; letter-spacing: -0.03em;
  font-family: 'Pretendard Variable', Pretendard, sans-serif;
  padding-bottom: 14px; margin-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.08);
}
.drawer-head button {
  width: 32px; height: 32px; border-radius: 999px; flex-shrink: 0;
  color: rgba(255,255,255,0.55); font-size: 15px; line-height: 1;
  background: rgba(255,255,255,0.06); transition: color 0.15s, background 0.15s;
}
.drawer-head button:hover { color: #fff; background: rgba(255,255,255,0.12); }
/* 드로어 열리면 좌상단 전역 버튼이 위로 안 튀게 숨김 */
body:has(.drawer.open) .sound-control,
body:has(.drawer.open) .help-btn { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .drawer, .drawer-panel, .drawer-backdrop { transition: none; } }

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

/* 가운데는 투명, 가장자리만 핏빛으로 번쩍 (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) — .shaking에 적용 (정의는 아래 Guess Who 섹션) */
@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) {
  .shaking { animation: none; }
  .hurt-flash.show { animation-duration: 0.35s; }
}

/* =========================================================
   Guess Who 추가 규칙
   ========================================================= */
/* 최근 질문/답 배너 색상 (#last-answer는 새 마크업의 id) */
#last-answer .correct { color: rgba(150, 220, 180, 0.9); }
#last-answer .wrong   { color: rgba(220, 100, 100, 0.9); }
#last-answer .split   { color: #ffcf5a; font-weight: 700; }

/* 비활성 콘솔 버튼 (질문 소진 등) */
.btn-console.is-disabled {
  opacity: 0.4; cursor: not-allowed;
  color: rgba(216,210,196,0.5); border-color: rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.02); box-shadow: none;
}
.btn-console.is-disabled:hover { color: rgba(216,210,196,0.5); border-color: rgba(255,255,255,0.12); box-shadow: none; }

/* 미세 떨림 — 새 게임 레이아웃에도 적용 (Fx.hurt가 #game > .relative에 .shaking 부여) */
.shaking {
  animation: subtle-shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

/* 게임 화면: 페이지 전체 스크롤(보드 자연 높이 → 타일 정사각 유지) + 하단 액션바 고정.
   (보드를 고정높이 flex 그리드로 만들면 일부 환경에서 행이 압축돼 타일이 짜부라짐 → 그래서 이 방식) */
/* 상단: 노치/상태바(OS 시계) 안전 영역만큼 띄워 헤더 버튼이 가려지지 않게.
   (HTML의 pt-4는 제거 — 여기서 safe-area로 일괄 관리) */
#game-stage { min-height: 100dvh; padding-top: max(16px, env(safe-area-inset-top)); padding-bottom: 92px; }
/* 데스크탑: 게임 보드를 적당히 넓혀 중앙 정렬 (모바일은 max-w-md=28rem 유지) — davinci 방식 */
@media (min-width: 768px){ #game-stage{ max-width: 40rem; } }
@media (min-width: 1100px){ #game-stage{ max-width: 44rem; } }
#game #actions {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 28rem; z-index: 40;
  padding: 10px 16px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, #0E0F12 60%, rgba(14, 15, 18, 0));
}

/* ── 콘솔(터미널) 버튼 — CRT 블루 글로우. 게임 액션 공용 ──
   라벨이 한글이라 본문 폰트 + 본문 자간(-0.04em). 영문/숫자만 모노+넓은 자간(.mono로 opt-in) */
.btn-console, .btn-console-danger, .btn-console-ghost, .q-chip {
  font-family: 'Pretendard Variable', Pretendard, system-ui, sans-serif;
  letter-spacing: -0.04em;
  transition: color .15s, border-color .15s, box-shadow .15s, background .15s, transform .1s;
}
/* 영문/숫자 라벨용 — 모노스페이스 콘솔 룩 유지 */
.btn-console.mono, .btn-console-danger.mono, .btn-console-ghost.mono, .q-chip.mono {
  font-family: 'Share Tech Mono', monospace;
  letter-spacing: 0.1em;
}
.btn-console:active, .btn-console-danger:active, .btn-console-ghost:active, .q-chip:active { transform: scale(0.97); }

/* 비활성: 발광 죽이고 흐리게 (로비/대기실 입력 전 상태) */
.btn-console:disabled, .btn-console-danger:disabled, .btn-console-ghost:disabled {
  opacity: 0.3; cursor: not-allowed; box-shadow: none; transform: none;
}
.btn-console:disabled:hover {
  color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.25); box-shadow: none;
}
.btn-console-ghost:disabled:hover {
  color: rgba(216,210,196,0.7); border-color: rgba(255,255,255,0.15);
}

/* 메인 (질문하기·지목) — 화이트 (시나리오 무관 고정) */
.btn-console {
  color: #fff;
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04));
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow: 0 0 14px rgba(255,255,255,0.12), inset 0 0 12px rgba(255,255,255,0.05);
}
.btn-console:hover { color: #fff; border-color: rgba(255,255,255,0.95);
  box-shadow: 0 0 20px rgba(255,255,255,0.25), inset 0 0 16px rgba(255,255,255,0.10); }

/* 위험 (최종추측) — 레드 */
.btn-console-danger {
  color: #E98C7E;
  background: linear-gradient(180deg, rgba(194,64,47,0.16), rgba(194,64,47,0.05));
  border: 1px solid rgba(194,64,47,0.6);
  box-shadow: 0 0 14px rgba(194,64,47,0.18), inset 0 0 12px rgba(194,64,47,0.06);
}
.btn-console-danger:hover { color: #ffb3a8; border-color: rgba(226,80,60,0.95);
  box-shadow: 0 0 20px rgba(194,64,47,0.38); }

/* 보조 (취소·닫기) — 고스트 */
.btn-console-ghost {
  color: rgba(216,210,196,0.7);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.15);
}
.btn-console-ghost:hover { color: #fff; border-color: rgba(255,255,255,0.32); }

/* 질문 칩 (시트 안 속성 버튼) — 차분한 블루 */
.q-chip {
  color: #cdeeff;
  background: rgba(90,166,216,0.06);
  border: 1px solid rgba(90,166,216,0.3);
}
.q-chip:hover { background: rgba(90,166,216,0.15); border-color: rgba(90,166,216,0.6); }

/* 질문 시트 섹션 라벨 */
.q-section-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(216,210,196,0.45); margin-bottom: 10px;
}

/* 질문 아이콘 타일 (아이콘 그리드) */
.q-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 9px; aspect-ratio: 1 / 1; border-radius: 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(216,210,196,0.85);
  transition: transform 0.12s, border-color 0.15s, background 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.q-tile:hover { background: rgba(90,166,216,0.1); border-color: rgba(90,166,216,0.55); color: #cdeeff; }
.q-tile:active { transform: scale(0.95); }
.q-tile-ic { display: block; width: 38px; height: 38px; opacity: 0.9; }
.q-tile-tx {
  font-family: 'Pretendard Variable', Pretendard, sans-serif;
  font-size: 14px; font-weight: 600; letter-spacing: -0.04em;
}
/* 이미 물어본 질문 — 흐리게 + 체크 */
.q-tile.q-asked { opacity: 0.4; position: relative; }
.q-tile.q-asked .q-asked-mark {
  position: absolute; top: 6px; right: 8px;
  font-size: 12px; color: #8FCDF2; font-weight: 700;
}

/* 상대 연결 끊김 안내 — 레드 점멸 */
.conn-lost {
  color: #f08a7e; font-weight: 600;
  animation: conn-lost-blink 1.4s ease-in-out infinite;
}
@keyframes conn-lost-blink { 0%,100%{opacity:0.55;} 50%{opacity:1;} }
@media (prefers-reduced-motion: reduce) { .conn-lost { animation: none; } }

/* ── 질문 바텀시트 ──
   display 토글 대신 visibility/opacity로 — 열림/닫힘 모두 부드럽게 슬라이드 */
.qsheet {
  position: fixed; inset: 0; z-index: 60;
  visibility: hidden; pointer-events: none;
  transition: visibility 0.26s;
}
.qsheet.open { visibility: visible; pointer-events: auto; }
.qsheet-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.72);
  opacity: 0; transition: opacity 0.2s ease;
}
.qsheet.open .qsheet-backdrop { opacity: 1; }
.qsheet-panel {
  position: absolute; left: 8px; right: 8px; bottom: 8px;   /* 좌우·하단 살짝 띄워 떠 보이게 */
  max-width: 28rem; margin: 0 auto;
  background: #0B0C0F;   /* 아주 어둡게 */
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 26px;
  padding: 10px 18px calc(20px + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 40px rgba(0,0,0,0.6);
  max-height: 80vh; overflow-y: auto;
  transform: translateY(calc(100% + 12px));
  transition: transform 0.26s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.qsheet.open .qsheet-panel { transform: translateY(0); }
.qsheet:not(.open) .qsheet-panel { transition: transform 0.2s cubic-bezier(0.4, 0, 1, 1); }
/* 그랩 핸들 — 상단 가운데 손잡이 바 (요즘 시트 시그니처) */
.qsheet-panel::before {
  content: ''; display: block; width: 38px; height: 4px; margin: 4px auto 12px;
  border-radius: 999px; background: rgba(255,255,255,0.18);
}
.qsheet-head {
  display: flex; align-items: center; justify-content: space-between;
  color: #fff; font-size: 16px; font-weight: 700; letter-spacing: -0.03em;
  font-family: 'Pretendard Variable', Pretendard, sans-serif;
  padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,0.07);
}
.qsheet-head button {
  width: 32px; height: 32px; border-radius: 999px; flex-shrink: 0;
  color: rgba(255,255,255,0.55); font-size: 15px; line-height: 1;
  background: rgba(255,255,255,0.06);
  transition: color 0.15s, background 0.15s;
}
.qsheet-head button:hover { color: #fff; background: rgba(255,255,255,0.12); }
@media (prefers-reduced-motion: reduce) {
  .qsheet, .qsheet-panel, .qsheet-backdrop,
  .qsheet:not(.open) .qsheet-panel { transition: none; }
}

/* ── 보드 CCTV화 ── */
/* CCTV HUD (턴 표시 · CAM · 타임코드) */
#cctv-hud .rec-dot {
  width: 7px; height: 7px; border-radius: 50%; display: inline-block;
}

/* 턴 표시 — REC 자리에서 차례 상태를 나타냄 */
.turn-rec {
  font-family: 'Share Tech Mono', monospace;
  letter-spacing: 0.2em;
  transition: color 0.3s ease;
}
/* 내 차례: 초록빛으로 깜빡 (촬영 중인 듯) */
.turn-rec.mine { color: #4ade80; }
.turn-rec.mine .rec-dot {
  background: #4ade80; box-shadow: 0 0 8px #4ade80;
  animation: rec-blink 1s steps(1) infinite;
}
/* 상대 차례: 불 꺼진 회색 (깜빡임 없음) */
.turn-rec.off { color: var(--crt-muted); }
.turn-rec.off .rec-dot {
  background: rgba(138,147,160,0.4); box-shadow: none;
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  .turn-rec.mine .rec-dot { animation: none; }
}
/* 타일을 감시 캡처처럼 — 흑백 + 청록 틴트 + 스캔라인 + 번호 */
#board .gw-tile {
  position: relative; overflow: hidden;
  /* 길게 누르기를 "크게 보기"로 쓰므로, 모바일 OS의 기본 길게누르기 동작
     (이미지 복사/저장 콜아웃·텍스트 선택)을 막는다. */
  -webkit-touch-callout: none;
  -webkit-user-select: none; user-select: none;
}
/* 이중첩자(scn-0)만 흑백. 증인보호·현상수배는 컬러 유지(앰버/머그샷). */
body.scn-0 #board .gw-tile img { filter: grayscale(1) contrast(1.03); }
#board .gw-tile img {
  filter: contrast(1.03);
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
  -webkit-user-drag: none; user-drag: none; pointer-events: none;   /* 이미지 자체 드래그/콜아웃 차단 */
}
/* 크게 보기(인스펙트) 모달의 확대 이미지도 길게누르기 콜아웃 차단 */
#inspect-modal img {
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
  -webkit-user-drag: none; user-drag: none;
}
#board .gw-tile::after {           /* 아주 옅은 스캔라인만 (사진을 가리지 않게) */
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: inherit;
  background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,0.08) 2px 3px);
}
/* 좌상단 캠 번호 (#01) */
.gw-tile .cam-no {
  position: absolute; top: 2px; left: 4px; z-index: 3;
  font-family: 'Share Tech Mono', monospace; font-size: 9px;
  color: rgba(216,210,196,0.85); letter-spacing: 0.05em;
  text-shadow: 0 0 3px #000, 0 0 2px #000;
}
/* 접힘(용의자 제외) — opacity로 투명하게(배경 비침) 하지 않고, 어두운 오버레이로 사진만 누른다.
   오버레이(::after)는 z-2, ✕(JS 추가)는 z-10이라 사진은 어둡고 ✕는 또렷하게 보인다. */
#board .gw-tile.gw-folded::after { background:
    repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,0.3) 2px 3px),
    rgba(0,0,0,0.64);
}

/* 내 인물(잠금) — 이미 내 인물이라 제외 불필요 → 흐리게 비활성.
   테두리(ring)는 또렷이 두고 내용만 어둡게(::after 오버레이) + 탭 반응 제거 */
#board .gw-tile.gw-mine-locked { cursor: default; }
#board .gw-tile.gw-mine-locked:active { transform: none; }
#board .gw-tile.gw-mine-locked::after {
  background:
    repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,0.08) 2px 3px),
    rgba(0,0,0,0.5);
}

/* =========================================================
   용의주도 — 느와르 + VHS/CRT 리브랜딩 레이어
   (콜드 블루 인광 + 레드 포인트)
   ========================================================= */
:root {
  --crt-base:   #0E0F12;
  --crt-surface:#15181E;
  --crt-blue:   #5AA6D8;
  --crt-line:   #8FCDF2;
  --crt-text:   #D8D2C4;
  --crt-muted:  #8A93A0;
  --crt-red:    #C2402F;
}

html { font-family: 'Pretendard Variable', Pretendard, system-ui, sans-serif; letter-spacing: -0.02em; }
body { color: var(--crt-text); background: var(--crt-base); }
/* HUD·영문·숫자는 모노스페이스 */
.mono, .font-mono { font-family: 'Share Tech Mono', monospace; letter-spacing: 0; }

/* 화면 배경 — 콜드한 어두운 모니터 (다빈치 핏빛 배경 대체) */
.crt-screen {
  /* 맨 위 레이어 = 시나리오 배경(--scn-bg). 없으면 none → 아래 기본 CRT 그라데이션이 보임. */
  background-image:
    var(--scn-bg, none),
    radial-gradient(ellipse 120% 80% at 50% 0%, rgba(90,166,216,0.10), transparent 60%),
    radial-gradient(ellipse at center, #15181E 0%, #0E0F12 70%);
  background-size: cover, auto, auto;
  background-position: center center, center top, center center;
  background-repeat: no-repeat;
}

/* 시나리오별 배경 슬롯 — 디자이너가 webp를 아래 경로에 넣으면 자동 적용.
   파일이 없으면 기본 CRT 배경이 그대로 보임(에러 아님). 분위기 차이는 배경으로만,
   버튼·UI 색은 시나리오와 무관하게 고정한다.
   ※ #game 위에는 어둡게 까는 그라데이션 오버레이가 있어 배경이 어둡게 보임 —
     더 밝게 하려면 index.html #game의 from-black/70 … 오버레이 농도를 낮추면 됨. */
body.scn-0 { --scn-bg: url('backgrounds/doublecross_bg.webp'); }  /* 이중첩자 */
body.scn-1 { --scn-bg: url('backgrounds/witness_bg.webp'); }     /* 증인 보호 */
body.scn-2 { --scn-bg: url('backgrounds/bounty_bg.webp'); }      /* 현상수배 */

/* 전역 CRT 텍스처 — 스캔라인 + 비네트 + 미세 플리커 (모달 아래, 콘텐츠 위) */
#crt-overlay {
  position: fixed; inset: 0; z-index: 35; pointer-events: none;
  background:
    repeating-linear-gradient(0deg,
      rgba(0,0,0,0) 0 2px,
      rgba(0,0,0,0.07) 2px 3px),
    radial-gradient(ellipse 100% 100% at 50% 50%,
      transparent 70%, rgba(0,0,0,0.32) 100%);
  mix-blend-mode: multiply;
  animation: crt-flicker 4s steps(60) infinite;
}
@keyframes crt-flicker { 0%,100%{opacity:0.85;} 50%{opacity:0.78;} 97%{opacity:0.92;} }
@media (prefers-reduced-motion: reduce) { #crt-overlay { animation: none; } }

/* 로고 — 용의주도 글리치 텍스트 (Da-Vinci.svg 대체) */
.yj-logo {
  position: relative;
  font-family: 'Pretendard Variable', Pretendard, sans-serif;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-indent: 0.12em;
  color: var(--crt-text);
  line-height: 1;
  text-shadow: 0 0 18px rgba(90,166,216,0.35);
  user-select: none;
}
.yj-logo::before, .yj-logo::after {
  content: attr(data-text);
  position: absolute; left: 0; top: 0; width: 100%;
  overflow: hidden; opacity: 0.85;
}
.yj-logo::before { color: var(--crt-red);  animation: yj-glitch-r 3.2s steps(1) infinite; }
.yj-logo::after  { color: var(--crt-blue); animation: yj-glitch-b 3.2s steps(1) infinite; }
@keyframes yj-glitch-r {
  0%,92%,100% { transform: translate(0,0); clip-path: inset(0 0 0 0); opacity:0; }
  93% { transform: translate(-3px,1px); opacity:0.9; clip-path: inset(20% 0 40% 0); }
  96% { transform: translate(2px,-1px); opacity:0.9; clip-path: inset(60% 0 10% 0); }
}
@keyframes yj-glitch-b {
  0%,92%,100% { transform: translate(0,0); clip-path: inset(0 0 0 0); opacity:0; }
  94% { transform: translate(3px,-1px); opacity:0.9; clip-path: inset(10% 0 55% 0); }
  97% { transform: translate(-2px,1px); opacity:0.9; clip-path: inset(50% 0 20% 0); }
}
@media (prefers-reduced-motion: reduce) {
  .yj-logo::before, .yj-logo::after { animation: none; opacity: 0.25; }
  .yj-logo::before { transform: translate(-1px,0); }
  .yj-logo::after  { transform: translate(1px,0); }
}
.yj-sub {
  font-family: 'Share Tech Mono', monospace;
  letter-spacing: 0.25em; font-size: 11px;
  color: var(--crt-muted); text-transform: lowercase;
}

/* 한자 부제 — 用意周到 ⤳ 容疑(용의) 글리치 리빌
   평소 用意周到, 가끔 앞 두 글자가 容疑로 깜빡여 '容疑周到'(용의자)로 보임 */
.yj-sub-han {
  font-family: 'Nanum Myeongjo', serif;   /* 한자는 명조 계열로 — 동양 느와르 무드 */
  font-size: 17px; letter-spacing: 0.45em; text-indent: 0.45em;
  color: var(--crt-muted);
}
.yj-sub-han-lg { font-size: 19px; }

/* 인라인 Tailwind의 옛 다빈치 세리프 클래스를 현재 테마 폰트로 리라우팅
   (font-['Cormorant_Garamond'] → Pretendard, font-['Cinzel'] → Share Tech Mono) */
[class*="Cormorant"] { font-family: 'Pretendard Variable', Pretendard, system-ui, sans-serif !important; }
[class*="Cinzel"]    { font-family: 'Share Tech Mono', monospace !important; }
.han-swap { position: relative; display: inline-block; }
.han-a { display: inline-block; animation: han-hide 5.5s steps(1) infinite; }
.han-b {
  position: absolute; left: 0; top: 0; white-space: nowrap;
  color: var(--crt-red); opacity: 0;
  text-shadow: 1px 0 var(--crt-blue), -1px 0 rgba(194,64,47,0.7);
  animation: han-reveal 5.5s steps(1) infinite;
}
@keyframes han-hide {
  0%, 85%, 100% { opacity: 1; }
  87%, 92% { opacity: 0; }
  93% { opacity: 1; }
}
@keyframes han-reveal {
  0%, 85%, 100% { opacity: 0; transform: translate(0,0); }
  87% { opacity: 0.95; transform: translate(-1px,0); }
  89% { opacity: 0.95; transform: translate(1px,0); }
  91% { opacity: 0.95; transform: translate(0,0); }
  93% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .han-a { animation: none; opacity: 1; }
  .han-b { animation: none; opacity: 0; }
}

/* 로딩 — 화면 전체가 CRT 모니터처럼 켜짐 (박스/밝은 선 없음) */
#loading {
  background: #070809 !important;
  overflow: hidden;
  animation: boot-warm 1.3s steps(1) 1;   /* 튜브 워밍업 — 몇 번 깜빡 */
}
@keyframes boot-warm {
  0%{opacity:0;} 5%{opacity:1;} 8%{opacity:0.15;} 11%{opacity:1;}
  15%{opacity:0.5;} 19%{opacity:1;} 100%{opacity:1;}
}

/* 켜진 화면 본체 — 가운데 가는 띠에서 위아래로 펼쳐지며(clip) 켜짐.
   밝은 가로선 없이 화면 자체가 쫙 펴지는 느낌. 이후 스캔라인+비네트+발광+플리커 */
.boot-scan {
  position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, transparent 0 1px, rgba(0,0,0,0.78) 1px 2px),
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(90,166,216,0.045), transparent 70%),
    radial-gradient(ellipse 120% 120% at 50% 50%, transparent 42%, rgba(0,0,0,0.88) 100%);
  clip-path: inset(50% 0 50% 0);
  animation: boot-open 1.2s cubic-bezier(0.2,0.75,0.15,1) forwards,
             crt-flicker 4s steps(60) 1.2s infinite;
}
@keyframes boot-open {
  0%   { clip-path: inset(49.8% 0 49.8% 0); opacity: 0.85; }
  60%  { clip-path: inset(0 0 0 0);          opacity: 1; }
  100% { clip-path: inset(0 0 0 0);          opacity: 1; }
}

/* VHS 트래킹 찢김 — 가로 띠가 화면을 훑고 올라감 */
.boot-tear {
  position: absolute; left: 0; right: 0; height: 12%; top: 120%;
  pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: linear-gradient(rgba(143,205,242,0), rgba(143,205,242,0.12),
              rgba(0,0,0,0.3), rgba(143,205,242,0));
  animation: boot-tear 2.8s linear 1.1s infinite;
}
@keyframes boot-tear {
  0%{top:120%; opacity:0;} 12%{opacity:0.85;} 100%{top:-25%; opacity:0;}
}

/* REC HUD (좌상단) — 점등 후 등장 */
.boot-rec {
  position: absolute; top: max(16px, env(safe-area-inset-top)); left: 16px; z-index: 2;
  font-family: 'VT323', monospace; font-size: 18px;
  letter-spacing: 0.1em; color: var(--crt-text); opacity: 0;
  display: flex; align-items: center; gap: 6px;
  animation: boot-fade 0.5s ease-out 1.0s forwards;
}
.boot-rec .dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--crt-red);
  box-shadow: 0 0 10px var(--crt-red); animation: rec-blink 1s steps(1) infinite;
}
@keyframes rec-blink { 0%,49%{opacity:1;} 50%,100%{opacity:0.15;} }

/* 가운데 라벨 (타이틀 없음) — 점등 후 등장 */
.boot-label {
  position: relative; z-index: 2;
  font-family: 'VT323', monospace; font-size: 22px;
  letter-spacing: 0.35em; text-indent: 0.35em;
  color: var(--crt-muted); text-transform: uppercase;
  opacity: 0; animation: boot-fade 0.45s ease-out 0.95s forwards;
}
@keyframes boot-fade { from{opacity:0;} to{opacity:1;} }

@media (prefers-reduced-motion: reduce) {
  #loading, .boot-scan, .boot-tear, .boot-rec, .boot-label { animation: none !important; }
  .boot-scan { clip-path: inset(0 0 0 0); opacity: 1; }
  .boot-rec, .boot-label { opacity: 1; }
}

/* =========================================================
   연결 끊김 — 재접속 오버레이 (끊긴 본인에게 표시)
   Render 콜드스타트(~50초) 동안 소켓이 끊겨도 상황을 알 수 있게.
   ========================================================= */
#reconnect-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;            /* 모달(400)보다 위, 화면전환 오버레이(9990/9999)보다 아래 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(11, 12, 15, 0.93);
  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: 'Share Tech Mono', monospace;
  font-size: 22px;
  letter-spacing: 0.08em;
  color: var(--crt-red, #C2402F);
  margin-bottom: 10px;
}
.reconnect-sub {
  font-family: 'Pretendard Variable', Pretendard, system-ui, sans-serif;
  font-size: 14px;
  color: var(--crt-muted, #8A93A0);
  animation: reconnect-pulse 1.8s ease-in-out infinite;
}
@keyframes reconnect-pulse {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 1; }
}
.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: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: 'Share Tech Mono', monospace;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
#reconnect-retry { background: var(--crt-text, #D8D2C4); color: #0B0C0F; 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); }
@media (prefers-reduced-motion: reduce) {
  .reconnect-sub { animation: none !important; opacity: 1; }
}

/* 로비 메뉴 버튼 — 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; }