/* 3인 4목 — mobile-first */

:root {
  --bg: #0f1220;
  --panel: #1a1f35;
  --panel-2: #232a4a;
  --text: #f2f4ff;
  --muted: #9aa3c7;
  --primary: #5b6cff;
  --primary-hover: #4a5af0;
  --red: #ff5d5d;
  --yellow: #ffce3a;
  --blue: #4aa8ff;
  --board: #2a3158;
  --cell: #1c2242;
  --line: #4a5280;
  --radius: 14px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
    "Noto Sans KR", "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* 네이티브 앱(Hotwire Native)·모바일 웹 공통 — 꾹 눌렀을 때 선택/드래그/미리보기가 뜨지 않게 */
body {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation; /* 더블탭 확대 방지 */
  overscroll-behavior-y: none; /* 당겨서 새로고침·바운스 방지 */
}
input, textarea, [contenteditable] {
  -webkit-user-select: text;
  user-select: text;
}
img {
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

.container {
  max-width: 560px;
  margin: 0 auto;
  padding: 16px;
  /* 노치·홈 인디케이터 세이프 에어리어 (viewport-fit=cover 전제) */
  padding-top: max(16px, env(safe-area-inset-top));
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

h1 { font-size: 1.5rem; margin: 0.5em 0; }
h2 { font-size: 1.1rem; }
.muted { color: var(--muted); font-size: 0.9rem; }

.flash {
  padding: 10px 16px;
  text-align: center;
  font-size: 0.9rem;
}
.flash-alert { background: #4a2030; color: #ffb4c0; }
.flash-notice { background: #1c3a2a; color: #a4e8bc; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* buttons */
.btn {
  display: inline-block;
  border: 0;
  border-radius: var(--radius);
  padding: 12px 20px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  background: var(--panel-2);
  color: var(--text);
  text-decoration: none;
  transition: transform 0.05s ease, background 0.15s ease;
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.4; cursor: default; }
.btn-primary { background: var(--primary); }
.btn-primary:hover { background: var(--primary-hover); }
.btn-lg { padding: 16px 28px; font-size: 1.1rem; }
.btn-sm { padding: 8px 14px; font-size: 0.85rem; }
.btn-ghost { background: transparent; color: var(--muted); }
.btn-google { background: #fff; color: #1a1a1a; }
.btn-danger { background: #4a2030; color: #ffb4c0; }

/* 홈 진입 버튼 5종(빠른 대전·친구랑 하기·슬렁 모드·혼자하기·랭킹 보기) —
   크기·정렬·모서리는 완전히 같게 두고 강조색(--accent)만 바꿔서 톤을 맞춘다 */
.btn-entry {
  --accent: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  position: relative;
  padding: 16px 20px;
  font-size: 1.1rem;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--accent) 20%, var(--panel)),
    color-mix(in srgb, var(--accent) 38%, var(--panel))
  );
  color: var(--text);
  transition: transform 0.05s ease, background 0.15s ease, border-color 0.15s ease;
}
.btn-entry:hover {
  border-color: var(--accent);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--accent) 30%, var(--panel)),
    color-mix(in srgb, var(--accent) 50%, var(--panel))
  );
}
.btn-entry-quick { --accent: var(--primary); }
.btn-entry-friend { --accent: var(--blue); }
.btn-entry-infinite { --accent: #8b6cf0; }
.btn-entry-practice { --accent: #6f7aa8; }
.btn-entry-ranking { --accent: #b98f1e; }
.btn-entry-achievements { --accent: #d0603a; position: relative; }
/* 혼자하기 — 진입 반응이 가장 좋은 메인 버튼. 다른 진입 버튼과 대조되게 한 단계 크고 밝게 */
.btn-entry-main {
  --accent: #2fbf8b;
  padding: 21px 20px;
  font-size: 1.3rem;
  font-weight: 800;
  border-width: 2px;
  box-shadow: 0 4px 22px color-mix(in srgb, var(--accent) 28%, transparent);
}
/* 랭킹·업적 나란히 — 승부 진입 버튼보다 낮되 숨지 않는 상시 노출 */
.entry-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.entry-duo .btn-entry { padding: 14px 10px; font-size: 1rem; }
.entry-count {
  font-size: 0.62rem; font-weight: 800; color: var(--text);
  background: color-mix(in srgb, var(--accent) 45%, var(--panel));
  border-radius: 10px; padding: 1px 5px; white-space: nowrap;
}

/* 슬렁 모드 인포마크 + 팝업 — 인포마크는 버튼 우측 안쪽에 겹쳐 배치 */
.info-mark {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid rgba(255, 255, 255, 0.45); color: rgba(255, 255, 255, 0.75);
  font-weight: 800; font-style: italic; font-family: Georgia, serif; font-size: 0.85rem;
  cursor: pointer;
}
.info-mark:hover { border-color: #fff; color: #fff; }
.info-dialog {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 0;
  background: var(--panel); color: var(--text);
  max-width: 340px; width: calc(100% - 40px);
}
.info-dialog::backdrop { background: rgba(8, 10, 20, 0.7); }
.info-dialog-body { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.info-dialog-body h3 { margin: 0; }
.info-dialog-body ul { margin: 0; padding-left: 18px; text-align: left; color: var(--muted); }
.info-dialog-body li { margin-bottom: 6px; font-size: 0.9rem; }

/* 혼자하기 봇 난이도 선택 팝업 */
.bot-level-list { display: flex; flex-direction: column; gap: 8px; }
.bot-level-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 12px 14px; border-radius: 12px; cursor: pointer; text-align: left;
  border: 1px solid var(--line); background: var(--bg); color: var(--text);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.bot-level-btn:hover { border-color: #6f7aa8; background: color-mix(in srgb, #6f7aa8 12%, var(--bg)); }
.bot-level-btn strong { font-size: 1rem; }
.bot-level-btn span { font-size: 0.82rem; color: var(--muted); }
.bot-level-fortress { border-color: color-mix(in srgb, #b98f1e 55%, transparent); }
.bot-level-yeopo { border-color: color-mix(in srgb, #c2452d 55%, transparent); }
.bot-level-record { font-weight: 700; color: #b98f1e !important; }
.bot-level-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; align-self: stretch; }
.bot-level-chip {
  font-size: 0.75rem !important; font-weight: 800; color: var(--yellow) !important;
  background: #3d3416; border-radius: 999px; padding: 2px 9px; white-space: nowrap;
}
.bot-level-chip-graduated { color: #7dd87d !important; background: #1e3a26; }
.bot-level-title { display: flex; align-items: center; gap: 6px; }
.bot-level-chip-recommend { color: #7de3ff !important; background: #16324a; }
.bot-level-help { margin-top: 12px; text-align: left; font-size: 0.82rem; color: var(--muted); }

/* 혼자하기 팝업 패널 — 제목·뒤로·목록이 붙지 않도록 세로 간격을 준다.
   :not([hidden])로 한정해야 flex가 hidden 속성(display:none)을 덮어 숨긴 패널이 펼쳐지지 않는다 */
[data-bot-picker-target]:not([hidden]) { display: flex; flex-direction: column; gap: 12px; }

/* 혼자하기 1단계 — 훈련 / 보스 도전 갈림길 */
.bot-mode-choice { display: flex; flex-direction: column; gap: 10px; }
.bot-mode-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 16px; border-radius: 14px; cursor: pointer; text-align: left;
  border: 1px solid var(--line); background: var(--bg); color: var(--text);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.bot-mode-card:hover { border-color: #6f7aa8; background: color-mix(in srgb, #6f7aa8 12%, var(--bg)); }
.bot-mode-card strong { font-size: 1.1rem; }
.bot-mode-card span { font-size: 0.85rem; color: var(--muted); line-height: 1.45; }
.bot-mode-card-boss { border-color: color-mix(in srgb, #ffb27a 45%, transparent); }
.bot-mode-card-boss:hover { border-color: #ffb27a; background: color-mix(in srgb, #ffb27a 10%, var(--bg)); }
.bot-picker-back {
  display: inline-flex; align-self: flex-start; align-items: center; gap: 4px;
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 0.85rem; font-weight: 700; padding: 4px 2px;
}
.bot-picker-back:hover { color: var(--text); }
.bot-level-chip-version { color: #c3b4ff !important; background: #2a2340; }
.bot-level-help summary { cursor: pointer; font-weight: 700; }
.bot-level-help ul { margin: 8px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.btn-kakao { background: #fee500; color: #191919; }
.btn-kakao:hover { background: #fada0a; }
/* 오픈채팅 유도 — 로그인 버튼과 혼동되지 않게 브랜드색 없이 중립 톤 */
.btn-openchat { background: transparent; color: var(--muted); border: 1px solid var(--line); }
.btn-openchat:hover { color: var(--text); border-color: var(--muted); }
.hearts-row {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 4px 0 12px; font-weight: 700;
}
.hearts-next { color: var(--muted); font-size: 0.85rem; font-weight: 400; }
.hearts-refill { white-space: nowrap; }
.hearts-empty { text-align: center; margin: 0 0 10px; }
.hearts-hint { text-align: center; margin: -6px 0 10px; font-size: 0.8rem; }
.bot-mode-card[disabled] { opacity: 0.45; cursor: not-allowed; }
.btn-apple { background: #000; color: #fff; border: 1px solid #3a3a3c; margin-top: 14px; }
.btn-apple:hover { background: #111; }
.btn-google, .btn-kakao, .btn-apple, .btn-openchat {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; max-width: 380px; margin-left: auto; margin-right: auto;
}
.btn-logo { width: 18px; height: 18px; flex-shrink: 0; }
.btn-link {
  background: none; border: 0; color: var(--muted);
  text-decoration: underline; cursor: pointer; font-size: inherit; padding: 0;
}
.inline-form { display: inline; }

/* home */
.hero { text-align: center; margin-top: 12vh; }
.hero .logo { font-size: 2.2rem; letter-spacing: 4px; margin-bottom: 0; }
.hero h1 { font-size: 2.2rem; margin: 0.2em 0; }
.tagline { color: var(--muted); margin-bottom: 2em; line-height: 1.6; }
.how-to {
  margin-top: 4em; text-align: left;
  background: var(--panel); border-radius: var(--radius); padding: 8px 24px 16px;
}
.how-to ol { padding-left: 1.2em; line-height: 1.9; color: var(--muted); }

/* auth */
.auth { text-align: center; margin-top: 16vh; }
.dev-login { margin-top: 2.5em; }
.inapp-warning {
  max-width: 380px; margin: 0 auto 20px;
  background: var(--panel); border: 1px solid var(--yellow);
  border-radius: var(--radius); padding: 18px 20px;
  display: flex; flex-direction: column; gap: 12px; align-items: stretch;
}
.inapp-warning-title { margin: 0; font-weight: 800; color: var(--yellow); }
.inapp-warning-desc { margin: 0; color: var(--muted); line-height: 1.55; font-size: 0.9rem; }

/* profile */
.avatar {
  width: 40px; height: 40px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
}
.avatar-lg { width: 56px; height: 56px; }
.avatar-md { width: 36px; height: 36px; }
.avatar-sm { width: 24px; height: 24px; }
.avatar-xl { width: 96px; height: 96px; font-size: 2.4rem; }
.avatar-fallback {
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--primary), #8b5bff);
  color: #fff; font-weight: 800; font-size: 1.2rem;
}
.avatar-sm.avatar-fallback { font-size: 0.7rem; }

.profile-card {
  margin: 28px auto 0;
  max-width: 380px;
  background: var(--panel);
  border: 1px solid #2b3363;
  border-radius: var(--radius);
  padding: 18px 20px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 14px;
  align-items: center;
  text-align: left;
}
.profile-info { min-width: 0; }
.profile-name { font-weight: 800; font-size: 1.05rem; }
.profile-email {
  color: var(--muted); font-size: 0.8rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.profile-record {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 10px; padding-top: 12px;
  border-top: 1px solid #2b3363;
}
.record-line { display: flex; gap: 6px; }
.record-chip {
  background: var(--panel-2); border-radius: 8px;
  padding: 4px 8px; font-size: 0.8rem; font-weight: 700;
}
.record-win { color: #7dd87d; }
.record-draw { color: var(--yellow); }
.record-loss { color: var(--red); }
.record-rate { font-size: 0.85rem; color: var(--muted); font-weight: 700; }
.profile-record { flex-direction: column; align-items: stretch; gap: 8px; }
.record-row { display: flex; align-items: center; gap: 8px; }
.record-row .record-line { flex: 1; }
.record-mode {
  width: 42px; text-align: center; font-size: 0.75rem; font-weight: 800;
  color: var(--muted); background: var(--panel-2); border-radius: 6px; padding: 3px 0;
}
.record-mode-rank { color: var(--yellow); background: #3d3416; }

/* ranking */
.ranking { display: flex; flex-direction: column; gap: 12px; }
.ranking-tabs { display: flex; gap: 8px; }
.ranking-tab {
  flex: 1; text-align: center; padding: 11px 0; border-radius: 10px;
  background: var(--panel); color: var(--muted); font-weight: 800;
  font-size: 0.95rem; text-decoration: none; border: 1px solid transparent;
}
.ranking-tab.active { background: var(--panel-2); color: var(--text); border-color: var(--yellow); }
.ranking-periods { display: flex; gap: 6px; }
.ranking-period {
  flex: 1; text-align: center; padding: 7px 0; border-radius: 8px;
  background: var(--panel); color: var(--muted); font-weight: 700;
  font-size: 0.85rem; text-decoration: none; border: 1px solid transparent;
}
.ranking-period.active { background: var(--panel-2); color: var(--text); border-color: var(--line); }
.ranking-reset-note { font-size: 0.76rem; color: var(--muted); margin: 6px 0 0; }
.my-tier-period { border-top: 1px solid var(--line); margin-top: 10px !important; padding-top: 10px; }
/* 새 소식 빨간 점 — 홈 '랭킹 보기'(새 랭킹 날마다)·'혼자하기'(새 보스 출시) 버튼 */
.btn-entry-ranking, .btn-entry-practice { position: relative; }
.new-dot {
  position: absolute; top: 8px; right: 10px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--red);
}
.my-tier-panel { text-align: center; padding: 18px 16px; }
.my-tier-label {
  font-size: 0.75rem; font-weight: 800; color: var(--muted); letter-spacing: 0.12em;
}
.my-tier-emoji { font-size: 2.8rem; line-height: 1.25; margin-top: 2px; }
.my-tier-name { font-size: 1.35rem; font-weight: 900; }
.my-tier-meta { color: var(--muted); font-size: 0.85rem; margin: 6px 0 0; }
.my-tier-meta strong { color: var(--text); }
.ranking-row.me { box-shadow: inset 0 0 0 1px var(--blue); }
.ranking-list { list-style: none; padding: 0; margin: 16px 0 0; text-align: left; }
.ranking-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--panel-2); border-radius: 10px;
  padding: 10px 14px; margin: 8px 0; font-size: 0.9rem;
}
.ranking-row.top-1 { border: 1px solid var(--yellow); }
.rank-no { width: 26px; text-align: center; font-weight: 800; }
.rank-name { flex: 1; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-record { color: var(--muted); font-size: 0.82rem; }
.rank-rate { font-weight: 800; width: 44px; text-align: right; }
.rank-tier { font-weight: 800; font-size: 0.85rem; white-space: nowrap; }
.tier-diamond { color: #7de3ff; }
.tier-gold { color: var(--yellow); }
.tier-silver { color: #cdd4ea; }
.tier-bronze { color: #d99a6c; }
.tier-stone { color: var(--muted); }
.tier-legend { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }

/* 티어/랭크 점수 표시 */
.profile-tier { display: flex; align-items: center; gap: 8px; }
.profile-tier-value { font-size: 0.95rem; }
.result-rank-delta { font-size: 1rem; }
.delta-up { color: #7dd87d; }
.delta-down { color: var(--red); }
.profile-logout { grid-column: 1 / -1; justify-self: end; font-size: 0.8rem; margin-top: 6px; }
.profile-links {
  grid-column: 1 / -1; display: flex; gap: 14px; justify-content: flex-end;
  font-size: 0.8rem; margin-top: 6px;
}

/* 프로필 수정 */
.profile-form { display: flex; flex-direction: column; gap: 12px; max-width: 320px; margin: 16px auto 0; }
.profile-form-avatar { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.avatar-upload-label { cursor: pointer; }
.profile-form input[type="text"] {
  border: 1px solid #39406b; background: var(--cell); color: var(--text);
  border-radius: 10px; padding: 12px; font-size: 1rem; text-align: center;
}
.form-errors { background: #4a2030; color: #ffb4c0; border-radius: 10px; padding: 10px 14px; font-size: 0.85rem; }
.form-errors p { margin: 2px 0; }

/* lobby player rows */
.lobby-player { display: flex; align-items: center; gap: 10px; text-align: left; }
.lobby-player-name { flex: 1; }
.lobby-player .ready-badge { float: none; }

.room-header-right { display: flex; align-items: center; gap: 10px; }
.header-user {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--muted); font-size: 0.85rem; font-weight: 600;
}

/* room */
.room { display: flex; flex-direction: column; gap: 12px; flex: 1; }
.room-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 0;
}
.room-logo { color: var(--text); text-decoration: none; font-weight: 800; }
.room-code {
  font-family: ui-monospace, monospace; color: var(--muted);
  background: var(--panel); padding: 4px 10px; border-radius: 8px;
}

.panel {
  background: var(--panel); border-radius: var(--radius);
  padding: 20px; text-align: center;
}

/* mode selection */
.create-form { display: flex; flex-direction: column; gap: 10px; max-width: 380px; margin: 0 auto; }
.mode-group { background: var(--panel); border-radius: var(--radius); padding: 14px 16px; text-align: left; }
.mode-group-label { display: block; font-size: 0.8rem; font-weight: 700; color: var(--muted); margin-bottom: 8px; }
.mode-options { display: flex; gap: 8px; }
.mode-chip { flex: 1; }
.mode-chip input { position: absolute; opacity: 0; }
.mode-chip span {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 6px; border-radius: 10px; font-weight: 700; font-size: 0.95rem;
  background: var(--panel-2); border: 2px solid transparent; cursor: pointer;
}
.mode-chip small { color: var(--muted); font-weight: 500; }
.mode-chip input:checked + span { border-color: var(--primary); background: #2b3363; }
.mode-hint { color: var(--muted); font-size: 0.78rem; margin: 10px 0 0; }
.room-settings { display: flex; flex-direction: column; gap: 12px; margin: 12px 0 4px; }
.room-settings .mode-group { background: var(--panel-2); }
/* 구분선으로 로그인 영역과 성격을 분리 — 버튼 폭(380px)에 맞춘다 */
.kakao-openchat {
  margin: 16px auto 0; padding-top: 16px; max-width: 380px;
  border-top: 1px solid var(--line);
}
.login-cta { margin-top: 28px; display: flex; flex-direction: column; gap: 12px; align-items: center; }
/* btn-apple의 margin-top 14px는 로그인 페이지(.auth) 레이아웃용 — 홈은 gap으로 통일 */
.login-cta .btn-apple { margin-top: 0; }

/* badges */
.mode-badges { display: flex; gap: 6px; justify-content: center; margin-bottom: 4px; }
.badge {
  display: inline-block; background: var(--panel-2); color: var(--muted);
  border-radius: 8px; padding: 4px 10px; font-size: 0.78rem; font-weight: 700;
}
.badge-rank { background: #3d3416; color: var(--yellow); }
.badge-quick { background: #1c3a4a; color: var(--blue); }
.badge-kind { background: #2b3363; color: var(--text); }

/* 참여 중인 방 배너 */
.current-room-banner {
  max-width: 380px; margin: 0 auto 16px;
  background: var(--panel); border: 1px solid var(--primary);
  border-radius: var(--radius); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.current-room-info { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.current-room-state { font-weight: 800; color: var(--yellow); }
.current-room-state.playing { color: #7dd87d; }
.current-room-desc { color: var(--muted); font-size: 0.85rem; }
.current-room-actions { display: flex; gap: 8px; justify-content: center; align-items: center; }

/* 빠른 대전 홈 대기열 */
.queue-banner {
  display: flex; flex-direction: column; gap: 10px; text-align: center;
  background: var(--panel-2); border: 1px solid var(--primary); border-radius: var(--radius);
  padding: 14px; margin: 0 auto 10px; max-width: 380px;
}
.queue-pulse { animation: pulse 0.7s infinite alternate; }
.queue-text { font-weight: 700; }
.queue-cancel-form { display: block; }

/* 실시간 대전 슬롯 — 두 입구(빠른 대전·친구랑 하기)가 자리 하나를 공유한다는 걸 묶음으로 보여준다.
   대기·참여 중에는 이 안이 통째로 상태 카드로 바뀌므로, 안쪽 배너는 자기 테두리를 벗는다.
   혼자하기 슬롯(연습 방 참여 중)도 같은 껍데기를 입어 홈의 상태 카드 톤·폭을 통일한다. */
.realtime-slot, .practice-slot {
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px; border-radius: calc(var(--radius) + 4px);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
}
.slot-form { display: flex; flex-direction: column; gap: 8px; }
.slot-label { font-size: 0.78rem; font-weight: 700; color: var(--muted); text-align: center; }
.slot-or {
  display: flex; align-items: center; gap: 10px;
  color: var(--muted); font-size: 0.72rem; font-weight: 700;
}
.slot-or::before, .slot-or::after {
  content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, 0.09);
}
.slot-hint { margin: 0; text-align: center; color: var(--muted); font-size: 0.78rem; }
.realtime-slot .queue-banner,
.realtime-slot .current-room-banner,
.practice-slot .current-room-banner {
  border: 0; background: transparent; padding: 0; margin: 0; max-width: none;
}
.entry-form { display: flex; flex-direction: column; gap: 10px; }
.btn-entry-cancel { --accent: #8d5a6b; font-size: 1rem; padding: 12px 16px; }

/* 레디체크 — 매칭 성사 시 전체 화면 수락 창 (20초) */
.ready-check-overlay {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(8, 10, 20, 0.82);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.ready-check {
  background: var(--panel); border: 1px solid var(--primary); border-radius: var(--radius);
  padding: 26px 22px; width: 100%; max-width: 340px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
}
.ready-title { margin: 0; font-size: 1.25rem; }
.ready-dots { display: flex; gap: 10px; }
.ready-dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--panel-2); border: 2px solid var(--line);
}
.ready-dot.on { background: #7dd87d; border-color: #7dd87d; }
.ready-timer { width: 100%; height: 6px; border-radius: 3px; background: var(--panel-2); overflow: hidden; }
.ready-timer-bar {
  height: 100%; background: var(--primary); border-radius: 3px;
  animation: ready-timer-shrink 20s linear forwards;
}
@keyframes ready-timer-shrink { from { width: 100%; } to { width: 0%; } }
.ready-countdown { font-weight: 800; font-variant-numeric: tabular-nums; }
.ready-accept { width: 100%; animation: pulse 0.9s infinite alternate; }

/* 배경음악 토글 — 모든 화면 우하단 고정 */
.bgm-toggle {
  position: fixed; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 80;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
  font-size: 1.05rem; cursor: pointer; opacity: 0.85;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.bgm-toggle.off { opacity: 0.5; filter: grayscale(1); }

/* 게임 종류 탭 (홈 진입점) */
.game-kind-tabs {
  display: flex; gap: 6px;
  max-width: 380px; margin: 0 auto 12px;
  background: var(--panel); border-radius: var(--radius); padding: 6px;
}
.kind-tab {
  flex: 1; text-align: center;
  padding: 10px 8px; border-radius: 10px;
  font-weight: 700; font-size: 0.95rem;
  color: var(--muted); text-decoration: none;
  border: 2px solid transparent;
  transition: background 0.15s, color 0.15s;
}
.kind-tab:hover { color: var(--text); }
.kind-tab.active {
  background: var(--panel-2); color: var(--text);
  border-color: var(--primary);
}

/* lobby */
.player-count { color: var(--primary); }
.ready-badge { float: right; font-size: 0.78rem; color: var(--muted); font-weight: 500; }
.ready-badge.on { color: #7dd87d; font-weight: 700; }
.start-area { margin: 16px 0 6px; }
.lobby-players { list-style: none; padding: 0; margin: 16px 0; }
.lobby-players li {
  background: var(--panel-2); border-radius: 10px;
  padding: 12px; margin: 8px 0; font-weight: 600;
}
.lobby-players .empty-slot { color: var(--muted); font-weight: 400; border: 1px dashed #39406b; background: transparent; }
.lobby-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
.join-form { display: flex; flex-direction: column; gap: 12px; max-width: 300px; margin: 0 auto; }
.join-form input[type="text"] {
  border: 1px solid #39406b; background: var(--cell); color: var(--text);
  border-radius: 10px; padding: 12px; font-size: 1rem; text-align: center;
}
.me-badge {
  background: var(--primary); color: #fff; font-size: 0.7rem;
  border-radius: 6px; padding: 2px 6px; margin-left: 6px; vertical-align: middle;
}
.host-badge {
  background: #3d3416; color: var(--yellow); font-size: 0.7rem; font-weight: 800;
  border-radius: 6px; padding: 2px 6px; margin-left: 6px; vertical-align: middle;
}
.btn-kick {
  background: transparent; border: 1px solid var(--red); color: var(--red);
  border-radius: 8px; padding: 4px 8px; font-size: 0.72rem; font-weight: 700; cursor: pointer;
}
.btn-kick:hover { background: #4a2030; }
.rematch-members {
  list-style: none; padding: 0; margin: 4px 0 0; width: 100%; max-width: 300px;
}
.rematch-members li {
  display: flex; align-items: center; gap: 8px;
  background: var(--panel-2); border-radius: 8px;
  padding: 6px 10px; margin: 6px 0; font-size: 0.85rem;
}
.rematch-member-name { flex: 1; text-align: left; font-weight: 600; }

/* players bar */
.players-bar {
  list-style: none; padding: 0; margin: 0;
  display: flex; gap: 6px;
}
.player-chip {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px;
  background: var(--panel); border-radius: 10px; padding: 8px 4px;
  font-size: 0.85rem; font-weight: 600;
  border: 2px solid transparent;
  min-width: 0;
}
.chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-chip.current { border-color: var(--primary); background: var(--panel-2); }
.player-chip.resigned { opacity: 0.4; }
.player-chip.resigned .chip-name { text-decoration: line-through; }
.player-chip.spectator { opacity: 0.75; border-style: dashed; border-color: var(--yellow); }
.resigned-badge { font-size: 0.7rem; color: var(--red); }
.spectator-badge { font-size: 0.7rem; color: var(--yellow); }
.chip-medal { font-size: 0.9rem; }

/* turn status */
.turn-status {
  text-align: center; padding: 10px; border-radius: 10px;
  background: var(--panel); font-weight: 700;
}
.turn-status.my-turn { background: var(--primary); }

/* 내 차례 강조 — 화면 가장자리가 은은하게 깜빡이는 글로우 (iOS 웹뷰 포함 전 플랫폼 동일) */
.my-turn-live::before {
  content: ""; position: fixed; inset: 0; z-index: 70; pointer-events: none;
  animation: turn-glow 1.4s ease-in-out infinite;
}
/* 글로우 색은 보스 테마가 --turn-glow-rgb로 덮어쓴다 — 일반 게임 기본값은 기존 파란색 */
@keyframes turn-glow {
  0%, 100% { box-shadow: inset 0 0 12px 1px rgba(var(--turn-glow-rgb, 91, 108, 255), 0.25); }
  50% { box-shadow: inset 0 0 30px 8px rgba(var(--turn-glow-rgb, 91, 108, 255), 0.65); }
}
@media (prefers-reduced-motion: reduce) {
  /* 반복 점멸 제거 — 약한 정적 가장자리선으로 내 차례 정보는 유지 (기능성 배너·알림음은 그대로) */
  .my-turn-live::before { animation: none; box-shadow: inset 0 0 12px 2px rgba(var(--turn-glow-rgb, 91, 108, 255), 0.35); }
}

/* 1등 확정 후 2·3등전 안내 */
.second-race-banner {
  text-align: center; padding: 6px 10px; border-radius: 10px;
  background: linear-gradient(135deg, #3a3410, #4a3d10);
  border: 1px solid var(--yellow);
  font-size: 0.82rem;
}
.countdown { font-variant-numeric: tabular-nums; margin-left: 6px; }
.turn-mode { color: var(--muted); font-size: 0.85rem; margin-left: 6px; font-weight: 700; }
.countdown.urgent, .urgent { color: var(--yellow); animation: pulse 0.6s infinite alternate; }
@keyframes pulse { from { opacity: 1; } to { opacity: 0.5; } }

.pause-banner {
  text-align: center; padding: 12px; border-radius: 10px;
  background: #3d3416; color: var(--yellow); font-size: 0.95rem;
  display: flex; flex-direction: column; gap: 8px; align-items: center;
}
.draw-offer-banner {
  text-align: center; padding: 12px; border-radius: 10px;
  background: #1c3a4a; color: var(--text); font-size: 0.95rem;
  display: flex; flex-direction: column; gap: 8px; align-items: center;
  border: 1px solid var(--blue);
}
.draw-offer-actions { display: flex; gap: 8px; }
.game-actions { flex-wrap: wrap; justify-content: center; }

/* board — 바둑판처럼 선 교차점 위에 착수 */
.board-wrap { position: relative; }
/* 보드에 딱 맞는 정사각 프레임 — 핑 오버레이(.pings-layer)의 위치 기준. 기본은 보드를 그대로 감싼다 */
.board-square { position: relative; }
.board {
  display: grid; /* grid-template-columns는 보드 크기(게임 종류별 9/12)에 따라 인라인으로 지정 */
  gap: 0;
  background: var(--board);
  border-radius: var(--radius);
  padding: 10px;
  aspect-ratio: 1;
  touch-action: manipulation;
}
.cell {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: 0;
  padding: 0;
}
/* 각 칸의 중심을 지나는 가로/세로 선 → 이어지면 격자 */
.cell::before {
  content: ""; position: absolute;
  left: 0; right: 0; top: 50%; height: 2px;
  background: var(--line);
  transform: translateY(-50%);
}
.cell::after {
  content: ""; position: absolute;
  top: 0; bottom: 0; left: 50%; width: 2px;
  background: var(--line);
  transform: translateX(-50%);
}
/* 가장자리는 반만 그려서 테두리 밖으로 선이 안 나가게 */
.cell.edge-left::before { left: 50%; }
.cell.edge-right::before { right: 50%; }
.cell.edge-top::after { top: 50%; }
.cell.edge-bottom::after { bottom: 50%; }

.hoshi {
  position: absolute; z-index: 1;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--line);
}
.point {
  position: absolute; inset: 0; z-index: 2;
  background: transparent; border: 0; padding: 0;
  cursor: pointer;
}
.point-over-stone { z-index: 3; }
.board-active .point:hover::before,
.point.cell-pending::before {
  content: ""; position: absolute; inset: 12%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}
/* 착수 미리보기 — 누른 채 조준 중인 교차점에 내 색의 반투명 돌 + 확대 링 (손가락에 가려도 보이게) */
.point.cell-preview::before {
  content: ""; position: absolute; inset: 4%;
  border-radius: 50%;
  opacity: 0.75;
  box-shadow: inset 0 -3px 4px rgba(0,0,0,0.35), 0 1px 3px rgba(0,0,0,0.4),
              0 0 0 4px rgba(255, 255, 255, 0.35);
}
/* 조준 드래그 미리보기(핑) — 종류별 색의 점선 링 */
.point.cell-ping-preview::before {
  content: ""; position: absolute; inset: 12%;
  border-radius: 50%;
  border: 3px dashed var(--yellow);
}
.point.cell-ping-preview.ping-preview-block::before { border-color: var(--red); }
/* 착수·핑 모드에서는 보드 위 드래그가 조준 — 스크롤로 새지 않게 */
.board-active, .board-pinging { touch-action: none; }
.point.cell-preview.preview-red::before { background: var(--red); }
.point.cell-preview.preview-yellow::before { background: var(--yellow); }
.point.cell-preview.preview-blue::before { background: var(--blue); }
.point.cell-preview.preview-black::before { background: #111; }
.point.cell-preview.preview-white::before { background: #eee; }
.board-pinging .point:hover::before {
  content: ""; position: absolute; inset: 18%;
  border-radius: 50%;
  border: 2px dashed rgba(255, 255, 255, 0.4);
}
.stone {
  position: relative; z-index: 2;
  width: 82%; height: 82%; border-radius: 50%;
  box-shadow: inset 0 -3px 4px rgba(0,0,0,0.35), 0 1px 3px rgba(0,0,0,0.4);
  display: flex; align-items: center; justify-content: center;
}
.stone-red { background: var(--red); }
.stone-yellow { background: var(--yellow); }
.stone-blue { background: var(--blue); }
.stone-black {
  background: radial-gradient(circle at 35% 30%, #4a4a4a, #0a0a0a 70%);
  border: 1px solid #000;
}
.stone-white {
  background: radial-gradient(circle at 35% 30%, #ffffff, #cfcfd6 80%);
  border: 1px solid #8a8f9e;
}
.stone-last { outline: 2px solid #fff; outline-offset: 1px; }

/* 착수 순간 pop-in — Stimulus stone 컨트롤러가 붙이는 클래스 */
@keyframes stone-drop {
  0%   { transform: scale(0.35); opacity: 0.4; }
  55%  { transform: scale(1.18); opacity: 1;   }
  100% { transform: scale(1);    opacity: 1;   }
}
.stone-drop { animation: stone-drop 0.28s cubic-bezier(0.18, 1.4, 0.4, 1) both; }

/* 승리 라인 위의 모든 돌 — 글로우는 ::after 레이어에만 둔다(스킨 위에 인셋 음영 재도입 금지).
   --glow는 승리 효과 세트가 색을 덮어쓸 수 있는 RGB 채널값 */
@keyframes stone-winning-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--glow), 0.2); }
  50%      { box-shadow: 0 0 14px 4px rgba(var(--glow), 0.9); }
}
.stone-winning, .stone-win-hit { --glow: 255, 206, 58; }
.stone-winning::after, .stone-win-hit::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
}
.stone-winning { z-index: 3; }
.stone-winning::after { animation: stone-winning-glow 1.3s ease-in-out infinite; }

/* 승리 착수 순간(마지막 한 수) — 스케일 임팩트는 셸, 글로우는 ::after */
@keyframes stone-win-hit {
  0%   { transform: scale(0.2); }
  40%  { transform: scale(1.45); }
  70%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}
@keyframes stone-win-hit-glow {
  0%   { box-shadow: 0 0 0 0 rgba(var(--glow), 0); }
  40%  { box-shadow: 0 0 28px 10px rgba(var(--glow), 0.95); }
  70%  { box-shadow: 0 0 20px 6px rgba(var(--glow), 0.55); }
  100% { box-shadow: 0 0 14px 4px rgba(var(--glow), 0.9); }
}
.stone-win-hit {
  animation: stone-win-hit 0.7s cubic-bezier(0.2, 1.5, 0.5, 1) both;
  z-index: 4;
}
.stone-win-hit::after {
  animation:
    stone-win-hit-glow 0.7s cubic-bezier(0.2, 1.5, 0.5, 1) both,
    stone-winning-glow 1.3s ease-in-out 0.7s infinite;
}

/* 오목 돌 위 순번 (1~8) */
.stone-number {
  font-size: 0.75rem; font-weight: 800;
  line-height: 1; pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.stone-black .stone-number { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
.stone-white .stone-number { color: #1a1a1a; }
.stone-red .stone-number,
.stone-yellow .stone-number,
.stone-blue .stone-number { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }

/* game misc */
.game { display: flex; flex-direction: column; gap: 12px; }

/* ===== 플레이 화면 스크롤 잠금 (작은 폰 오버스크롤 바운스 방지) =====
   페이지를 뷰포트 높이에 고정하고, 보드는 남은 세로 공간에 맞춰 min(가로,세로) 정사각으로 줄인다.
   보드-wrap이 남는 공간(레터박스)을 흡수하고, .board-square만 정사각으로 축소돼 핑 정렬을 지킨다. */
body.screen-playing { overflow: hidden; height: 100dvh; }
body.screen-playing .container { min-height: 0; height: 100dvh; overflow: hidden; }
body.screen-playing .room { min-height: 0; }
body.screen-playing .game { flex: 1 1 auto; min-height: 0; }
body.screen-playing .site-footer { display: none; } /* 플레이 중엔 푸터도 숨겨 공간 확보 */
body.screen-playing .board-wrap {
  flex: 1 1 auto; min-height: 0;
  container-type: size; /* .board-square가 cqw/cqh(=남은 가로·세로)를 기준으로 삼는다 */
  display: flex; justify-content: center; align-items: center;
}
/* 남은 공간의 가로·세로 중 작은 쪽으로 정사각 — height 명시 없이 aspect-ratio로 높이를 파생시켜야
   프로맥스처럼 세로 여유가 큰 화면에서도 직사각형으로 늘어나지 않는다 */
body.screen-playing .board-square {
  width: 100%; max-width: min(100cqw, 100cqh); aspect-ratio: 1;
}
body.screen-playing .board { width: 100%; height: 100%; }
.game-actions { display: flex; justify-content: space-between; gap: 8px; }
.result-stats { color: var(--muted); }
.rematch { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; align-items: center; }

/* 훈수(핑) */
.ping-bar {
  display: flex; gap: 6px; align-items: center; justify-content: center; flex-wrap: wrap;
  background: var(--panel); border-radius: var(--radius); padding: 8px 10px;
}
/* 내 차례 전환 시 높이 변화로 화면이 튀지 않도록 툴바 높이 고정 */
.board-toolbar { min-height: 52px; }
.ping-kind {
  border: 2px solid transparent; border-radius: 10px;
  background: var(--panel-2); color: var(--text);
  font-size: 0.85rem; font-weight: 700; padding: 7px 12px; cursor: pointer;
}
.ping-kind.active { border-color: var(--primary); background: #2b3363; }
.ping-hint { color: var(--muted); font-size: 0.72rem; width: 100%; text-align: center; }

.pings-layer {
  position: absolute; inset: 10px;
  pointer-events: none; z-index: 5;
}
.ping-marker {
  position: absolute; width: 0; height: 0;
  animation: ping-fade 4s ease forwards;
}
/* 링 중심 = 교차점. 이모지가 아닌 도형이라 픽셀 단위로 정확히 찍힌다 */
.ping-ring {
  position: absolute; left: 0; top: 0;
  width: 26px; height: 26px; border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 3px solid var(--yellow);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35), inset 0 0 6px rgba(0, 0, 0, 0.3);
  animation: ping-ring-pop 0.5s ease;
}
.ping-block .ping-ring { border-color: var(--red); border-style: dashed; }
.ping-label {
  position: absolute; left: 0; top: -20px;
  transform: translate(-50%, -100%);
  background: rgba(15, 18, 32, 0.92); border: 1.5px solid var(--muted);
  border-radius: 8px; padding: 2px 7px;
  font-size: 0.68rem; font-weight: 700; white-space: nowrap;
}
.ping-color-red .ping-label { border-color: var(--red); }
.ping-color-yellow .ping-label { border-color: var(--yellow); }
.ping-color-blue .ping-label { border-color: var(--blue); }
.ping-color-black .ping-label { border-color: #1a1a1a; }
.ping-color-white .ping-label { border-color: #f0f0f0; }
@keyframes ping-fade {
  0% { opacity: 0; }
  6% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes ping-ring-pop {
  0% { transform: translate(-50%, -50%) scale(0.3); }
  60% { transform: translate(-50%, -50%) scale(1.3); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

/* 감정표현 */
.reaction-bar {
  display: flex; gap: 4px; justify-content: center; flex-wrap: wrap;
  background: var(--panel); border-radius: var(--radius); padding: 8px;
  transition: opacity 0.2s;
}
.reaction-bar.cooling { opacity: 0.4; pointer-events: none; }
.reaction-btn {
  flex: 1; background: transparent; border: 0; border-radius: 8px;
  font-size: 1.4rem; padding: 6px 0; cursor: pointer;
  transition: transform 0.1s;
}
.reaction-btn:hover { background: var(--panel-2); }
.reaction-btn:active { transform: scale(1.3); }

.reactions-overlay {
  position: fixed; top: 0; left: 0; right: 0; height: 0;
  z-index: 100; pointer-events: none;
}
.reaction-bubble {
  position: absolute; top: 130px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: rgba(26, 31, 53, 0.92);
  border: 2px solid var(--panel-2);
  border-radius: 14px; padding: 8px 14px;
  animation: reaction-float 2.8s ease-out forwards;
}
.reaction-color-red { border-color: var(--red); }
.reaction-color-yellow { border-color: var(--yellow); }
.reaction-color-blue { border-color: var(--blue); }
.reaction-color-black { border-color: #1a1a1a; }
.reaction-color-white { border-color: #f0f0f0; }
.reaction-bubble-emoji { font-size: 2rem; line-height: 1; }
.reaction-bubble-name { font-size: 0.7rem; color: var(--muted); font-weight: 700; }
@keyframes reaction-float {
  0% { opacity: 0; transform: translateX(-50%) translateY(20px) scale(0.5); }
  12% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.1); }
  20% { transform: translateX(-50%) translateY(0) scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) translateY(-70px) scale(0.9); }
}

/* 게임 종료 연출 */
.result-panel { animation: result-pop 0.45s cubic-bezier(0.18, 1.4, 0.4, 1); }
@keyframes result-pop {
  from { opacity: 0; transform: scale(0.75) translateY(16px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.result-banner {
  color: var(--muted); font-size: 0.8rem; font-weight: 800; letter-spacing: 2px;
}
.result-hero-emoji {
  font-size: 3.4rem; line-height: 1.2; margin-top: 8px;
  animation: result-bounce 0.9s ease 0.2s 2;
}
@keyframes result-bounce {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-14px); }
  70% { transform: translateY(4px); }
}
.result-title { font-size: 2.2rem; margin: 0.1em 0 0.3em; }
.result-title-win { color: var(--yellow); }
.result-title-second { color: var(--text); }
.result-title-third { color: var(--muted); }
.result-win {
  border: 2px solid var(--yellow);
  box-shadow: 0 0 24px rgba(255, 206, 58, 0.25);
}
.result-second { border: 1px solid var(--muted); }
.result-winner-line { font-size: 1.05rem; }
.result-cold-note { color: var(--muted); font-size: 0.85rem; margin-top: 2px; }
.stone-mini {
  display: inline-block; width: 14px; height: 14px; border-radius: 50%;
  vertical-align: -1px; margin: 0 2px;
}
.stone-mini.stone-black { border: 1px solid #000; }
.stone-mini.stone-white { border: 1px solid #8a8f9e; }
.chip-crown { font-size: 0.9rem; }
.result-ranking {
  list-style: none; padding: 8px 0 0; margin: 12px 0 4px;
  display: flex; flex-direction: column; gap: 6px;
}
.result-rank-row {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 8px;
  background: var(--panel);
}
.result-rank-row.rank-1 { background: rgba(255, 206, 58, 0.12); }
.result-rank-row.rank-none { opacity: 0.75; }
.result-rank-medal { font-size: 1.1rem; }

/* admin */
.admin { display: flex; flex-direction: column; gap: 12px; }
.admin .panel { text-align: left; }
.admin .panel h1, .admin .panel h2 { font-size: 1.2rem; margin: 0 0 4px; }
.admin-date { font-size: 0.85rem; font-weight: 400; }
.admin-nav { display: flex; gap: 6px; }
.admin-nav-link {
  color: var(--muted); text-decoration: none; font-size: 0.9rem; font-weight: 600;
  padding: 6px 10px; border-radius: 8px;
}
.admin-nav-link.active { background: var(--panel-2); color: var(--text); }
.admin-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px; margin-top: 14px;
}
.admin-stats-sub .stat-value { font-size: 1.2rem; color: var(--muted); }
.stat-card { background: var(--panel-2); border-radius: var(--radius); padding: 14px 10px; text-align: center; }
.stat-value { font-size: 1.8rem; font-weight: 800; }
.stat-label { color: var(--muted); font-size: 0.8rem; margin-top: 4px; }
.admin-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 0.88rem; }
.admin-table th, .admin-table td { padding: 8px 8px; text-align: left; border-bottom: 1px solid var(--panel-2); }
.admin-table th { color: var(--muted); font-weight: 600; font-size: 0.8rem; }
.admin-email, .admin-players { color: var(--muted); word-break: break-all; }
/* 접을 예정인 기능(슬렁)의 지표는 아카이브 톤 — 다른 패널과 시각 위계를 달리한다 */
.admin-archive { border: 1px dashed var(--line); background: transparent; }
.admin-archive summary { cursor: pointer; color: var(--muted); font-weight: 700; }
.admin-archive p { margin: 10px 0 0; }
.admin-search { display: flex; gap: 8px; margin: 12px 0; }
.admin-search-input {
  flex: 1; border: 1px solid #39406b; background: var(--cell); color: var(--text);
  border-radius: 10px; padding: 10px 12px; font-size: 0.95rem;
}

@media (min-width: 700px) {
  .container { padding-top: 40px; }
}

/* ===== 업적 (achievements) ===== */

/* 대표 배지 variant — docs/avatar-badge-visual-hierarchy-spec.md.
   상태 표시(현재 턴·기권·순위·메달)보다 시각 우선순위 낮음. 비상호작용(클릭 불가). */
.ach-badge { flex-shrink: 0; pointer-events: none; border-radius: 6px; }
/* 어두운 일러스트가 패널에 묻히지 않게 하는 중립 프레임 (금색 금지 — 순위·희귀도 오해 방지) */
.ach-badge-featured, .ach-badge-ranking, .ach-badge-result {
  border: 1px solid #cdd4ea;
  background: var(--panel);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.ach-badge-featured { width: 32px; height: 32px; }
.ach-badge-ranking { width: 24px; height: 24px; }
.ach-badge-result { width: 24px; height: 24px; }
.ach-badge-compact { width: 20px; height: 20px; border-radius: 4px; }
/* 로비 썸네일 핀 — 절반 이상 바깥, 패널색 2px 테두리로 경계 분리 */
.avatar-badge-wrap { position: relative; display: inline-flex; flex-shrink: 0; }
.ach-badge-overlay {
  position: absolute; right: -10px; bottom: -4px;
  width: 20px; height: 20px;
  border: 2px solid var(--panel); background: var(--panel);
}
@media (max-width: 359px) {
  .ach-badge-compact { width: 18px; height: 18px; }
}

/* 홈 대표 업적 행 — 행 전체가 업적 페이지 링크, 터치 영역 44px */
.featured-achievement-row {
  display: flex; align-items: center; gap: 8px;
  min-height: 44px; margin-top: 4px;
  color: var(--text); text-decoration: none; font-weight: 700; font-size: 0.9rem;
}
.featured-achievement-row .ach-badge-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.featured-achievement-empty { color: var(--muted); font-size: 0.85rem; }

/* 프로필 수정 — 대표 업적 영역 (저장과 무관, 변경은 업적 페이지에서) */
.profile-featured-achievement { margin: 14px 0 4px; }
.profile-featured-body { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.profile-featured-body .ach-badge-name { font-weight: 700; font-size: 0.9rem; }


/* 랭킹 반응형 — 배지보다 전적·썸네일을 먼저 숨긴다 (경쟁 화면 제거 우선순위) */
@media (max-width: 399px) {
  .ranking-row .rank-record { display: none; }
}
@media (max-width: 359px) {
  .ranking-row .avatar { display: none; }
}

.achievements-page { max-width: 560px; margin: 0 auto; }
.achievements-page .page-head h1 { margin: 6px 0 4px; }
.ach-section { margin-top: 18px; }
.ach-category {
  font-size: 0.95rem; color: var(--muted); font-weight: 700;
  margin: 0 0 8px 2px;
}
.ach-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ach-item { background: var(--panel); border-radius: var(--radius); }
.ach-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: transparent; border: 0; padding: 12px; text-align: left;
  color: var(--text); font: inherit; cursor: pointer; border-radius: var(--radius);
}
.ach-chevron { color: var(--muted); font-size: 1.2rem; flex-shrink: 0; }
.ach-reward-summary {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 7px;
}
.reward-stones-mini { display: flex; gap: 4px; }
.ach-item.locked .ach-icon { filter: grayscale(1) brightness(0.55); }
.ach-item.locked .ach-name { color: var(--muted); }
.ach-item.in-progress .ach-icon { filter: grayscale(0.6) brightness(0.8); }
.ach-icon { width: 52px; height: 52px; border-radius: 10px; flex-shrink: 0; }
.ach-body { flex: 1; min-width: 0; }
.ach-name { font-weight: 800; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ach-reward-tag {
  font-size: 0.7rem; font-weight: 700; color: var(--yellow);
  background: #3d3416; border-radius: 8px; padding: 2px 6px;
}
.ach-blurb { color: var(--muted); font-size: 0.82rem; margin-top: 2px; }
.ach-date { color: var(--yellow); font-size: 0.75rem; margin-top: 4px; font-weight: 700; }
.ach-progress { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.ach-progress-track {
  flex: 1; height: 6px; border-radius: 3px; background: var(--cell); overflow: hidden;
}
.ach-progress-bar { height: 100%; border-radius: 3px; background: var(--primary); }
.ach-progress-num { color: var(--muted); font-size: 0.75rem; font-variant-numeric: tabular-nums; }

/* 결과 화면 달성 알림 — 확인 전까지만 노출 */
.achievement-toast {
  background: var(--panel-2); border: 1px solid var(--yellow);
  border-radius: var(--radius); padding: 12px; margin: 12px 0; text-align: left;
}
.achievement-toast-title { font-weight: 800; color: var(--yellow); margin-bottom: 8px; }
.achievement-toast-item { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.ach-icon-md { width: 44px; height: 44px; border-radius: 8px; flex-shrink: 0; }
.achievement-toast-text { display: flex; flex-direction: column; gap: 1px; font-size: 0.88rem; }
.achievement-toast-text .muted { font-size: 0.78rem; }
.reward-earned { color: var(--yellow); font-size: 0.78rem; font-weight: 700; }
.achievement-toast-actions {
  display: flex; align-items: center; gap: 10px; margin-top: 10px;
}

/* ===== 업적 보상 스킨 (cosmetics) ===== */

/* 말 스킨 레이어 계약(스킨 렌더링 수정 스펙 3~5장) —
   셸(.stone.stone-skinned): 위치·크기·상태 기준, 자체 배경·인셋 음영 없음(중립 외곽 그림자만)
   폴백(.stone-fallback): 기본 소유색+인셋 음영, loading/error에서만 표시
   이미지(.stone-skin-image): 완성형 스킨, loaded에서만 표시 */
.stone.stone-skinned {
  background: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.stone-fallback {
  position: absolute; inset: 0; border-radius: 50%;
  box-shadow: inset 0 -3px 4px rgba(0, 0, 0, 0.35);
}
.stone-red .stone-fallback { background: var(--red); }
.stone-yellow .stone-fallback { background: var(--yellow); }
.stone-blue .stone-fallback { background: var(--blue); }
.stone-skin-image {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; visibility: hidden; pointer-events: none;
}
[data-stone-skin-state-value="loaded"] .stone-skin-image { visibility: visible; }
[data-stone-skin-state-value="loaded"] .stone-fallback { visibility: hidden; }

.equip-on { border: 1px solid var(--primary); }

/* 착수 효과 — 서버 수락 후 1회 재생, 450ms 이내 · 돌 지름 1.35배 이내 (스펙 12장).
   턴별 id로 렌더되므로 morph 시 요소가 교체되어 애니메이션이 다시 시작된다. */
.place-fx {
  position: absolute; z-index: 3; pointer-events: none;
  width: 110%; height: 110%; /* 돌(82%) 대비 약 1.34배 */
  left: 50%; top: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}
@keyframes fx-ring {
  0% { opacity: 0.9; transform: translate(-50%, -50%) scale(0.4); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}
@keyframes fx-flash {
  0% { opacity: 0.95; transform: translate(-50%, -50%) scale(0.5); }
  60% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}
@keyframes fx-spin {
  0% { opacity: 0.9; transform: translate(-50%, -50%) scale(0.5) rotate(0deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1) rotate(150deg); }
}
/* 버티는 성벽 — 300ms 균열 파동 */
.place-fx-fortress-survivor {
  border: 3px solid #b8c0d8; box-shadow: 0 0 8px #b8c0d8;
  animation: fx-ring 0.3s ease-out forwards;
}
/* 성벽 파괴자 — 400ms 성문 파쇄광 */
.place-fx-fortress-breaker {
  background: radial-gradient(circle, rgba(255,140,50,0.9) 0%, rgba(255,90,40,0.4) 55%, transparent 75%);
  animation: fx-flash 0.4s ease-out forwards;
}
/* 프리즘 다이아 — 350ms 프리즘 굴절 */
.place-fx-prism-diamond {
  background: conic-gradient(#ff5d5d, #ffce3a, #4aefb8, #4aa8ff, #b55dff, #ff5d5d);
  -webkit-mask: radial-gradient(circle, transparent 55%, #000 60%);
  mask: radial-gradient(circle, transparent 55%, #000 60%);
  animation: fx-spin 0.35s ease-out forwards;
}
/* 삼색 왕관 — 360ms 삼색 회전링 */
.place-fx-tricolor-crown {
  background: conic-gradient(var(--red) 0 120deg, var(--yellow) 120deg 240deg, var(--blue) 240deg 360deg);
  -webkit-mask: radial-gradient(circle, transparent 55%, #000 60%);
  mask: radial-gradient(circle, transparent 55%, #000 60%);
  animation: fx-spin 0.36s ease-out forwards;
}
/* 네 개의 정석 — 300ms 네 점 점화 */
.place-fx-exact-four {
  background:
    radial-gradient(circle 5px at 50% 6%, gold 60%, transparent 70%),
    radial-gradient(circle 5px at 50% 94%, gold 60%, transparent 70%),
    radial-gradient(circle 5px at 6% 50%, gold 60%, transparent 70%),
    radial-gradient(circle 5px at 94% 50%, gold 60%, transparent 70%);
  animation: fx-ring 0.3s ease-out forwards;
}
/* 사방의 나침반 — 350ms 사방 점화 */
.place-fx-four-directions {
  background:
    linear-gradient(0deg, transparent 46%, #c9a6ff 46% 54%, transparent 54%),
    linear-gradient(90deg, transparent 46%, #c9a6ff 46% 54%, transparent 54%);
  animation: fx-spin 0.35s ease-out forwards;
}
/* 포커스 크로노 — 400ms 속도 링 */
.place-fx-focus-chrono {
  border: 3px solid #3ee6d8; box-shadow: 0 0 10px #3ee6d8, inset 0 0 6px #3ee6d8;
  animation: fx-ring 0.4s ease-out forwards;
}

/* 승리 효과 — 승자의 실제 승리선 돌에만. 공통 금빛 펄스(.stone-winning) 위에 얹는다.
   첫 임팩트 700ms 이내, 승리선·마지막 수를 가리지 않는다 (스펙 12장). */
@keyframes victory-impact {
  0% { transform: scale(1.25); }
  100% { transform: scale(1); }
}
/* 승리 효과 세트 — 공통 승리 글로우(::after)의 색만 덮어쓰고 스케일 임팩트를 더한다 */
.victory-fx-fortress-breaker { --glow: 255, 120, 40; animation: victory-impact 0.6s ease-out; }
.victory-fx-prism-diamond { --glow: 180, 120, 255; animation: victory-impact 0.6s ease-out; }
.victory-fx-exact-four { outline: 2px solid gold; outline-offset: 2px; animation: victory-impact 0.6s ease-out; }
.victory-fx-four-directions { --glow: 201, 166, 255; animation: victory-impact 0.6s ease-out; }
.victory-fx-focus-chrono { --glow: 62, 230, 216; animation: victory-impact 0.6s ease-out; }

/* Reduce Motion — 애니메이션 대신 정적 외곽선·글로우 (스펙 12장) */
@media (prefers-reduced-motion: reduce) {
  .place-fx { animation: none; opacity: 0; }
  [class*="victory-fx-"], .stone-win-hit { animation: none; }
  .stone-winning::after, .stone-win-hit::after {
    animation: none;
    box-shadow: 0 0 10px 3px rgba(var(--glow), 0.7); /* 정적 글로우 대체 */
  }
}

/* ===== 업적 화면 개선 — 내 스타일 카드 + 상세 다이얼로그 ===== */

.style-card {
  background: var(--panel); border-radius: var(--radius);
  padding: 12px; margin-top: 12px;
}
.style-card-title { font-weight: 800; font-size: 0.9rem; margin-bottom: 8px; }
.style-slots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.style-slot {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  background: var(--panel-2); border: 0; border-radius: 10px; padding: 8px 10px;
  color: var(--text); font: inherit; text-align: left; cursor: pointer; min-height: 44px;
}
.style-slot-empty { cursor: default; }
.style-slot-label { font-size: 0.72rem; color: var(--muted); font-weight: 700; }
.style-slot-value {
  font-size: 0.85rem; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}

.achievement-dialog { width: min(92vw, 420px); }
.ach-detail { display: flex; flex-direction: column; gap: 12px; text-align: left; }
.ach-detail-head { display: flex; align-items: center; gap: 12px; }
.ach-detail-head .ach-icon { width: 56px; height: 56px; }
.ach-detail-title h3 { margin: 0 0 2px; }
.ach-detail-title p { margin: 0; font-size: 0.85rem; }
.ach-detail-badge { display: flex; }
.ach-detail-reward {
  border-top: 1px solid var(--panel-2); padding-top: 12px;
  display: flex; flex-direction: column; gap: 10px;
}
.reward-head { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.reward-state { font-size: 0.78rem; font-weight: 800; }
.reward-state-locked { color: var(--muted); }
.reward-state-unequipped { color: var(--text); }
.reward-state-partial { color: var(--blue); }
.reward-state-full { color: #7dd87d; }
.reward-stones { display: flex; align-items: center; gap: 6px; }
.reward-stone { position: relative; width: 26px; height: 26px; flex-shrink: 0; }
.reward-stone .stone-fallback { box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.35); }
.reward-stone-red .stone-fallback { background: var(--red); }
.reward-stone-yellow .stone-fallback { background: var(--yellow); }
.reward-stone-blue .stone-fallback { background: var(--blue); }
.reward-effects-note { font-size: 0.75rem; }
.reward-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ach-detail-close { align-self: flex-end; }

/* ===== 코스메틱 프리뷰 (업적 상세 다이얼로그) ===== */
.cosmetic-preview { display: flex; flex-direction: column; gap: 10px; }
.preview-colors { display: flex; gap: 6px; flex-wrap: wrap; }
.preview-color-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--panel-2); color: var(--text); border: 1px solid transparent;
  border-radius: 999px; padding: 5px 11px; font-size: 0.8rem; font-weight: 700; cursor: pointer;
}
.preview-color-btn[aria-pressed="true"] { border-color: #cdd4ea; }
.preview-color-dot { width: 12px; height: 12px; border-radius: 50%; }
.preview-color-dot-red { background: var(--red); }
.preview-color-dot-yellow { background: var(--yellow); }
.preview-color-dot-blue { background: var(--blue); }
.preview-tabs { display: flex; gap: 6px; }
.preview-tab {
  background: transparent; border: 1px solid var(--panel-2); color: var(--muted);
  border-radius: 8px; padding: 5px 11px; font-size: 0.8rem; font-weight: 700; cursor: pointer;
}
.preview-tab[aria-selected="true"] { background: var(--panel-2); color: var(--text); }
.preview-board { max-width: 230px; width: 100%; margin: 0 auto; }
/* 선택 색상 강조 — 마지막 수(흰색)·승리(금색)와 오해되지 않는 중립색 */
.preview-stone-selected { outline: 2px solid #cdd4ea; outline-offset: 1px; }
.preview-replay { align-self: center; }
.preview-replay[hidden] { display: none; } /* .btn의 display 지정이 [hidden] UA 규칙을 이기는 것 방지 */
.preview-rm-note { display: none; margin: 0; font-size: 0.75rem; color: var(--muted); text-align: center; }
@media (prefers-reduced-motion: reduce) {
  .preview-rm-note[data-effect-tab="true"] { display: block; }
}

/* 숨김 업적 — 잠금 상태 봉인 행 (실명·보상 미노출) */
.ach-row-static { cursor: default; }
.ach-icon-sealed {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 10px; flex-shrink: 0;
  background: var(--panel-2); color: var(--muted); font-size: 1.4rem;
}

/* ===== 철옹성 명예의 전당 · 보스 도전 ===== */
.bot-group-label {
  font-size: 0.78rem; font-weight: 800; color: var(--muted);
  margin: 6px 0 0 2px; text-align: left;
}
.bot-level-chips { display: flex; gap: 4px; }
.bot-level-chip-boss { color: #ffb27a !important; background: #3d2416; }
.fortress-first-slayer {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 10px; background: var(--bg);
  font-size: 0.82rem;
}
.fortress-hall { text-align: left; }
.fortress-hall-title { margin: 0 0 4px; font-size: 1.05rem; }
.fortress-hall-record { margin: 0 0 10px; color: var(--muted); font-size: 0.88rem; font-weight: 700; }
.fortress-slayers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fortress-slayer-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--panel-2); border-radius: 10px; padding: 8px 12px; font-size: 0.88rem;
}
.fortress-slayer-first {
  border: 1px solid color-mix(in srgb, #ffb27a 55%, transparent);
  padding: 12px; font-size: 0.95rem;
}
.slayer-label { font-weight: 800; color: #ffb27a; font-size: 0.78rem; white-space: nowrap; }
.slayer-name { font-weight: 700; }
.slayer-date { color: var(--muted); font-size: 0.78rem; margin-left: auto; white-space: nowrap; }
.fortress-slayer-mark { width: 18px; height: 18px; border-radius: 4px; flex-shrink: 0; }

/* ===== 플레이어 정체성 (티어 문양·명패·카드·공개 프로필) ===== */

.tier-crest { display: inline-flex; align-items: center; gap: 5px; }
.tier-crest-art { flex-shrink: 0; }
.tier-crest-sm .tier-crest-art { width: 24px; height: 24px; }
.tier-crest-md .tier-crest-art { width: 48px; height: 48px; }
.tier-crest-lg .tier-crest-art { width: 64px; height: 64px; }
.tier-crest-sm .tier-crest-emoji { font-size: 0.95rem; }
.tier-crest-md .tier-crest-emoji { font-size: 1.6rem; }
.tier-crest-label { font-weight: 800; font-size: 0.82rem; white-space: nowrap; }
.tier-crest-points { color: var(--muted); font-size: 0.78rem; font-weight: 700; }

.rep-achievement { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.rep-achievement-icon {
  flex-shrink: 0; border-radius: 6px;
  border: 1px solid #aeb8d0; background: var(--panel); /* 중립 은색 프레임 — 티어와 경쟁 금지 */
}
.rep-achievement-compact .rep-achievement-icon { width: 24px; height: 24px; }
.rep-achievement-featured .rep-achievement-icon { width: 44px; height: 44px; }
.rep-achievement-text { display: flex; flex-direction: column; min-width: 0; }
.rep-achievement-name {
  font-weight: 800; font-size: 0.85rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rep-achievement-featured .rep-achievement-name { font-size: 0.95rem; }
.rep-achievement-blurb {
  color: var(--muted); font-size: 0.78rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.identity-card { display: flex; flex-direction: column; gap: 14px; text-align: left; }
.identity-head { display: flex; align-items: center; gap: 12px; }
.identity-nickname {
  font-weight: 800; font-size: 1.1rem;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.identity-meta { color: var(--muted); font-size: 0.82rem; margin-top: 2px; }
.identity-tiers { display: flex; gap: 16px; flex-wrap: wrap; }
.identity-skins { display: flex; flex-direction: column; gap: 8px; }
.identity-skins-label { color: var(--muted); font-size: 0.82rem; font-weight: 700; }
.identity-profile-link { align-self: flex-start; }

/* 카드 다이얼로그 — 모바일 바텀시트, 560px 이상 중앙 (정체성 스펙 7.4장) */
.player-card-dialog { width: min(92vw, 420px); }
@media (max-width: 559px) {
  .player-card-dialog {
    margin: auto 0 0; width: 100%; max-width: none;
    border-radius: var(--radius) var(--radius) 0 0; border-bottom: 0;
  }
}
.player-card-close { align-self: flex-end; }

/* 카드 트리거 행 */
.row-card-trigger { cursor: pointer; }
.row-card-trigger:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

/* 로비 정체성 행 */
.lobby-player-identity {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 3px; font-size: 0.8rem; color: var(--muted);
}

/* 공개 프로필 */
.public-profile { display: flex; flex-direction: column; gap: 12px; }
.profile-hero { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.avatar-profile { width: 72px; height: 72px; font-size: 1.8rem; }
.profile-hero-name {
  margin: 0; font-size: 1.3rem;
  display: flex; align-items: center; gap: 8px; justify-content: center;
}
.profile-hero .rep-achievement { justify-content: center; }

/* 문의하기 — 폼(모바일 우선)과 관리자 문의 화면 */
.inquiry-form { display: flex; flex-direction: column; gap: 8px; }
.inquiry-form textarea {
  width: 100%; padding: 10px; border-radius: 10px; resize: vertical;
  background: var(--panel-2); color: var(--text); border: 1px solid var(--line); font: inherit;
}
.inquiry-categories { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.inquiry-category {
  display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 4px;
  border: 1px solid var(--line); border-radius: 10px; cursor: pointer; font-size: 0.9rem;
}
.inquiry-category:has(input:checked) { border-color: #6f7aa8; background: color-mix(in srgb, #6f7aa8 12%, var(--bg)); }
.inquiry-category input { accent-color: #6f7aa8; }
.inquiry-needs-reply { display: flex; align-items: center; gap: 8px; margin-top: 6px; cursor: pointer; }
.inquiry-privacy-note, .inquiry-reply-note { font-size: 0.8rem; margin: 0; }
.inquiry-submit { margin-top: 10px; }
.inquiry-meta { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: 0.9rem; }
.inquiry-meta dt { color: var(--muted); }
.inquiry-meta dd { margin: 0; }
.inquiry-body {
  margin: 14px 0; padding: 12px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel-2); white-space: pre-wrap; word-break: break-word;
}
.inquiry-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ── 보스 전장 테마 — 격자 안(말·화점·좌표)은 불변, 페이지 배경·프레임·표식만 (보스 연출 명세 3장) ── */
.boss-banner {
  display: flex; width: fit-content; align-items: center; gap: 6px; margin: 0 auto 6px;
  font-size: 0.76rem; font-weight: 800; letter-spacing: 0.1em;
  color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 3px 12px;
}
.boss-room { border-radius: 16px; padding: 8px; }
/* 보스별 전장 토큰 — 보드 바탕·격자·강조·내 차례 색을 변수로만 덮어쓴다
   (세 보스 아이덴티티 명세 5장 — 말 색 --red/--yellow/--blue는 절대 재정의하지 않는다) */
.boss-fortress {
  --board: #151922; --line: #596474; --boss-accent: #a3adbc;
  --boss-turn-bg: #3a4556; --turn-glow-rgb: 158, 172, 194;
  background: linear-gradient(180deg, color-mix(in srgb, #27303f 35%, var(--bg)), var(--bg) 60%);
}
.boss-yeopo {
  --board: #321518; --line: #875048; --boss-accent: #d35a42;
  --boss-turn-bg: #7d2d24; --turn-glow-rgb: 239, 92, 60;
  background: linear-gradient(180deg, color-mix(in srgb, #4a221a 35%, var(--bg)), var(--bg) 60%);
}
.boss-taegeuk {
  --board: #211b34; --line: #74678f; --boss-accent: #d3b56c;
  --boss-turn-bg: #51426f; --turn-glow-rgb: 197, 169, 231;
  background: linear-gradient(180deg, color-mix(in srgb, #34294a 35%, var(--bg)), var(--bg) 60%);
}
/* 보드 외곽 프레임 — 장식은 격자 바깥 테두리에서만, 입력을 가로채지 않는다.
   .board-square(보드에 딱 맞는 프레임)에 걸어야 플레이 중 레터박스 여백이 아닌 보드를 두른다 */
.boss-fortress .board-square { border: 3px double color-mix(in srgb, #8b94a3 60%, transparent); border-radius: 12px; }
.boss-yeopo    .board-square { border: 3px solid color-mix(in srgb, #c2452d 55%, transparent); border-radius: 4px; }
.boss-taegeuk  .board-square { border: 3px double color-mix(in srgb, #d3b56c 50%, transparent); border-radius: 50px 12px 50px 12px / 24px 12px 24px 12px; }
.boss-room .boss-banner { color: var(--boss-accent); border-color: color-mix(in srgb, var(--boss-accent) 45%, transparent); }
/* 내 차례 강조 색 테마화 — 배너 배경과 가장자리 글로우만 (기능·주기·밝기는 일반 게임과 동일) */
.boss-room .turn-status.my-turn { background: var(--boss-turn-bg); }

/* 최초 진입 연출 — 1.2초 자동 종료, 어디를 눌러도 스킵 (착수로 전달되지 않음) */
.boss-intro {
  position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center;
  background: rgba(8, 10, 14, 0.78); transition: opacity 180ms ease-out;
}
.boss-intro-out { opacity: 0; pointer-events: none; }
.boss-intro-card { text-align: center; animation: boss-intro-in 320ms ease-out; }
.boss-intro-icon { font-size: 3.2rem; }
.boss-intro-name { font-size: 1.7rem; font-weight: 900; letter-spacing: 0.24em; margin-top: 4px; color: #eef1f6; }
.boss-intro-line { margin-top: 8px; color: #c7cdd8; font-size: 0.95rem; }
.boss-yeopo .boss-intro-name { color: #f2d9d2; }
.boss-taegeuk .boss-intro-name { color: #ead9b0; }
@keyframes boss-intro-in { from { transform: scale(0.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* 결과 연출 — 결과 정보 뒤 레이어의 짧은 프레임 효과 (≤700ms, 게임 ID로 1회) */
.boss-fortress .boss-result-play { animation: boss-result-glow-fortress 700ms ease-out; }
.boss-yeopo    .boss-result-play { animation: boss-result-glow-yeopo 700ms ease-out; }
@keyframes boss-result-glow-fortress {
  0% { box-shadow: 0 0 0 6px color-mix(in srgb, #8b94a3 45%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@keyframes boss-result-glow-yeopo {
  0% { box-shadow: 0 0 0 6px color-mix(in srgb, #c2452d 45%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.boss-taegeuk .boss-result-play { animation: boss-result-glow-taegeuk 700ms ease-out; }
@keyframes boss-result-glow-taegeuk {
  0% { box-shadow: 0 0 0 6px color-mix(in srgb, #d3b56c 45%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .boss-intro-card { animation: none; }
  .boss-intro { transition: none; }
  .boss-result-play { animation: none !important; }
}

/* 홈 프로필 카드 — 누르면 공개 프로필 카드 (기존 "다른 사람에게 이렇게 보여요" 링크 대체) */
.profile-card-clickable { cursor: pointer; }
.profile-card-clickable:hover { border-color: #6f7aa8; }

/* 보스 명예의 전당 — 난도 티어 배지·격파 횟수 */
.boss-hall-tier { font-size: 0.72rem; font-weight: 800; border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; margin-left: 8px; vertical-align: middle; color: var(--muted); }
.boss-hall-tier-50 { color: #e8c66a; border-color: color-mix(in srgb, #e8c66a 55%, transparent); }
.boss-hall-tier-40 { color: #9ec5ff; border-color: color-mix(in srgb, #9ec5ff 55%, transparent); }
.boss-hall-tier-30 { color: #d9b36a; border-color: color-mix(in srgb, #d9b36a 45%, transparent); }
.slayer-kills { font-weight: 800; color: #e8c66a; font-size: 0.85rem; }

/* 명예의 전당 독립 메뉴 — 홈 3분할 진입과 랭킹 솔로 탭의 입구 링크 */
.entry-trio { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 8px; }
.entry-trio .btn-entry { padding: 13px 4px; font-size: 0.9rem; white-space: nowrap; }
.btn-entry-hall { --accent: #8f6ad9; position: relative; }
.hall-entry-link {
  display: flex; justify-content: center; align-items: center; gap: 6px;
  padding: 10px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 12px;
  color: var(--text); text-decoration: none; font-weight: 700; font-size: 0.9rem;
}
.hall-entry-link:hover { border-color: #8f6ad9; }
.bot-level-taegeuk { border-color: color-mix(in srgb, #d3b56c 50%, transparent); }

/* 법적 문서·게임 문서 페이지·사이트 푸터 */
/* 긴 글은 왼쪽 정렬이 읽기 좋다 — .panel 의 가운데 정렬을 문서 본문에서만 되돌린다. */
.legal-doc { text-align: left; }
.legal-doc h1 { text-align: center; }
.legal-doc h2 { font-size: 1.02rem; margin: 22px 0 8px; }
.legal-doc p, .legal-doc li { font-size: 0.9rem; line-height: 1.65; color: var(--text); }
.legal-doc ul { padding-left: 18px; }
.legal-meta { color: var(--muted); font-size: 0.8rem; }
.legal-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; margin: 8px 0; }
.legal-table th, .legal-table td { border: 1px solid var(--line); padding: 6px 8px; text-align: left; vertical-align: top; }
.legal-table th { background: var(--panel-2); white-space: nowrap; }
.site-footer { max-width: 560px; margin: 28px auto 20px; padding: 0 16px; text-align: center; }
.site-footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; }
.site-footer-links a { color: var(--muted); font-size: 0.78rem; text-decoration: none; }
.site-footer-links a:hover { color: var(--text); text-decoration: underline; }
.site-footer-biz { color: color-mix(in srgb, var(--muted) 70%, transparent); font-size: 0.7rem; margin-top: 6px; }
.auth-legal-note { font-size: 0.8rem; }
.auth-legal-note a { color: var(--muted); }

/* 대인전 가능성 안내 — 빠른 대전 버튼 위 한 줄, 상태 전환에도 높이가 흔들리지 않게 최소 높이 고정 */
.versus-availability {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-height: 44px; padding: 8px 10px; margin-bottom: 8px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2);
  font-size: 0.84rem; text-align: left;
}
.versus-availability-text { flex: 1; }
.versus-availability-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.versus-availability-close {
  background: none; border: 0; color: var(--muted); font-size: 0.85rem; cursor: pointer; padding: 4px 6px;
}
.versus-ready_now { border-color: color-mix(in srgb, var(--yellow) 55%, transparent); }
.versus-waiting { border-color: color-mix(in srgb, var(--primary) 55%, transparent); }