:root {
  --sky-gradient: linear-gradient(180deg, #74b9ff 0%, #a0d8ef 55%, #e1f5fe 100%);
  --navy-dark: #1b3046;
  --gold-accent: #f59f00;
  --blue-active: #1971c2;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
  -webkit-user-select: none;
}

body {
  font-family: 'Noto Sans KR', sans-serif;
  background: var(--sky-gradient);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

body.in-game-3d {
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
}

/* ── 상단 헤더 ── */
#header {
  height: 56px;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 10;
}

.btn-back {
  background: #0984e3;
  color: white;
  border: none;
  padding: 7px 15px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 900;
  box-shadow: 0 3px 0 #0767b3, 0 4px 10px rgba(0,0,0,0.18);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}
.btn-back:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #0767b3;
}

.title-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: 10px;
  flex: 1;
}

.title-text {
  font-family: 'Jua', sans-serif;
  font-size: 20px;
  color: #1a2f45;
  line-height: 1.1;
  text-shadow: 1px 1px 0 #ffffff;
}

.subtitle-text {
  font-size: 11px;
  font-weight: 800;
  color: #e67700;
  margin-top: 2px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.view-mode-badge {
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid #0984e3;
  color: #0984e3;
  border-radius: 16px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(0,0,0,0.12);
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s;
}
.view-mode-badge:hover {
  background: #e7f5ff;
}
.view-mode-badge.third-person {
  background: #ff7675;
  border-color: #d63031;
  color: white;
}

.sound-btn {
  width: 36px;
  height: 40px;
  background: white;
  border-radius: 12px;
  border: 2px solid #e7f5ff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.08);
  cursor: pointer;
  font-size: 16px;
  transition: transform 0.15s;
}
.sound-btn:active {
  transform: scale(0.92);
}

.reset-view-btn {
  background: white;
  border-radius: 12px;
  border: 2px solid #e7f5ff;
  padding: 0 10px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.08);
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  color: #1b3046;
  transition: all 0.15s;
}
.reset-view-btn:hover {
  background: #f1f3f5;
}
.reset-view-btn:active {
  transform: scale(0.92);
}


.avatar-btn:hover {
  background: #fff4e6;
  border-color: #ffd8a8;
}
.avatar-btn:active {
  transform: scale(0.92);
}
.avatar-btn .avatar-emoji {
  font-size: 18px;
}


.theme-btn:hover {
  background: #e7f5ff;
  border-color: #74c0fc;
}
.theme-btn:active {
  transform: scale(0.92);
}
.theme-btn .theme-emoji {
  font-size: 18px;
}

/* 테스트용 즉시 클리어 치트 버튼 */
.test-clear-btn {
  background: #fff3bf;
  border: 1.5px solid #fcc419;
  border-radius: 18px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 800;
  color: #d9480f;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 2px 5px rgba(245, 159, 0, 0.2);
  transition: all 0.15s;
}
.test-clear-btn:hover {
  background: #ffe066;
  transform: translateY(-1px);
}
.test-clear-btn:active {
  transform: scale(0.92);
}

.theme-quick-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.quick-theme-btn {
  flex: 1;
  padding: 8px 10px;
  font-size: 11.5px;
  font-weight: 800;
  border-radius: 12px;
  border: 1.5px solid #dee2e6;
  background: #f8f9fa;
  color: #495057;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.quick-theme-btn:hover {
  background: #e9ecef;
  border-color: #ced4da;
}
.quick-theme-btn.highlight {
  background: #fff3bf;
  border-color: #ffd43b;
  color: #d9480f;
}
.quick-theme-btn.highlight:hover {
  background: #ffe066;
}

/* 테마 선택 팝업 모달 */
#theme-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(4px);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
#theme-modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.theme-modal-card {
  background: white;
  border-radius: 24px;
  width: 92%;
  max-width: 520px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  padding: 22px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.25), 0 0 0 1px rgba(255,255,255,0.8);
  transform: scale(0.92);
  transition: transform 0.25s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
#theme-modal-overlay.open .theme-modal-card {
  transform: scale(1);
}

.theme-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  overflow-y: auto;
  padding-right: 4px;
  margin-top: 4px;
}
.theme-card {
  background: #f8f9fa;
  border: 2px solid #e9ecef;
  border-radius: 16px;
  padding: 12px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}
.theme-card:hover {
  transform: translateY(-2px);
  border-color: #74c0fc;
  background: #f1f9ff;
}
.theme-card.active {
  border-color: #0984e3;
  background: #e7f5ff;
  box-shadow: 0 4px 12px rgba(9, 132, 227, 0.25);
}
.theme-card.active::after {
  content: '✓';
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 14px;
  font-weight: 900;
  color: #0984e3;
}
.theme-preview-icon {
  font-size: 28px;
}
.theme-info {
  display: flex;
  flex-direction: column;
  text-align: left;
}
.theme-name {
  font-family: 'Jua', sans-serif;
  font-size: 15px;
  color: #1b3046;
}
.theme-desc {
  font-size: 10.5px;
  font-weight: 600;
  color: #868e96;
  margin-top: 1px;
}

/* 아바타 선택 팝업 모달 */
#avatar-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(4px);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
#avatar-modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.avatar-modal-card {
  background: white;
  border-radius: 24px;
  width: 90%;
  max-width: 440px;
  padding: 22px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.25), 0 0 0 1px rgba(255,255,255,0.8);
  transform: scale(0.92);
  transition: transform 0.25s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
#avatar-modal-overlay.open .avatar-modal-card {
  transform: scale(1);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.modal-title {
  font-family: 'Jua', sans-serif;
  font-size: 22px;
  color: #1b3046;
  display: flex;
  align-items: center;
  gap: 8px;
}
.modal-close-btn {
  background: #f1f3f5;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 16px;
  font-size: 16px;
  font-weight: 900;
  color: #495057;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-close-btn:hover {
  background: #e9ecef;
}

.avatar-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.avatar-card {
  background: #f8f9fa;
  border: 2px solid #e9ecef;
  border-radius: 16px;
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}
.avatar-card:hover {
  transform: translateY(-2px);
  border-color: #74c0fc;
  background: #f1f9ff;
}
.avatar-card.active {
  border-color: #ff6b6b;
  background: #fff5f5;
  box-shadow: 0 4px 12px rgba(255, 107, 107, 0.25);
}
.avatar-card.active::after {
  content: '✓ 착용중';
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 10px;
  font-weight: 900;
  color: #e03131;
  background: #ffe3e3;
  padding: 1px 6px;
  border-radius: 8px;
}

.avatar-preview-icon {
  font-size: 34px;
  margin-bottom: 6px;
}
.avatar-name {
  font-family: 'Jua', sans-serif;
  font-size: 16px;
  color: #212529;
}
.avatar-desc {
  font-size: 11px;
  font-weight: 600;
  color: #868e96;
  margin-top: 2px;
  text-align: center;
}

/* 캐릭터 목록: 큐브 펫 24마리 + 기본 동물 (스크롤) */
.avatar-list {
  max-height: min(68vh, 560px);
  overflow-y: auto;
  padding: 2px 4px 4px 2px;
  -webkit-overflow-scrolling: touch;
}
.avatar-section-title {
  font-family: 'Jua', sans-serif;
  font-size: 15px;
  color: #1b3046;
  margin: 4px 2px 8px;
}
.avatar-section-title small {
  font-family: inherit;
  font-size: 12px;
  color: #868e96;
  margin-left: 4px;
}
.avatar-list .avatar-grid + .avatar-section-title { margin-top: 16px; }
.cube-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.avatar-card.cube {
  padding: 8px 4px 6px;
  border-radius: 14px;
}
.avatar-card.cube .avatar-name {
  font-size: 13px;
  white-space: nowrap;
}
.avatar-card.cube.active::after {
  content: '✓';
  top: 3px;
  right: 4px;
  padding: 0 5px;
}
.avatar-thumb {
  width: 48px;
  height: 48px;
  object-fit: contain;
  margin-bottom: 2px;
}
.avatar-credit {
  font-size: 11px;
  color: #adb5bd;
  text-align: center;
  margin-top: 12px;
}

/* ── 메인 게임 영역 ── */
#game-area {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

#dir-bar {
  position: absolute;
  top: 10px;
  z-index: 10;
  display: flex;
  gap: 8px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  padding: 4px;
  border-radius: 24px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.1);
  border: 1.5px solid rgba(255,255,255,0.95);
}

.dir-btn {
  padding: 5px 16px;
  border-radius: 18px;
  font-size: 13px;
  font-weight: 800;
  border: none;
  background: transparent;
  color: #495057;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 4px;
}

.dir-btn.active {
  background: #0984e3;
  color: white;
  box-shadow: 0 2px 8px rgba(9, 132, 227, 0.4);
}

#control-guide {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(27, 48, 70, 0.88);
  backdrop-filter: blur(6px);
  color: white;
  padding: 6px 18px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  z-index: 10;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: opacity 0.3s;
}
#control-guide kbd {
  background: #ffffff;
  color: #1b3046;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 900;
  box-shadow: 0 2px 0 #ced4da;
}
.guide-highlight {
  color: #a9e34b;
}

/* 3인칭 캐릭터 머리 위 힌트 말풍선 */
#char-speech-bubble {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -100%) scale(0.8);
  background: #ffffff;
  border: 2.5px solid #1b3046;
  border-radius: 16px;
  padding: 10px 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.22), 0 3px 0 #ced4da;
  pointer-events: none;
  z-index: 15;
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  max-width: 260px;
  min-width: 140px;
  text-align: center;
}

#char-speech-bubble::after {
  content: '';
  position: absolute;
  bottom: -11px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 11px solid #1b3046;
}

#char-speech-bubble::before {
  content: '';
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 8px solid #ffffff;
  z-index: 1;
}

.bubble-tag {
  display: inline-block;
  background: #e7f5ff;
  color: #0984e3;
  border: 1px solid #74c0fc;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 900;
  margin-bottom: 4px;
}

.bubble-hint {
  font-size: 13px;
  font-weight: 800;
  color: #212529;
  line-height: 1.35;
  word-break: keep-all;
}

#canvas-container {
  width: 100%;
  height: 100%;
  touch-action: none;
}

/* ── 하단 독 ── */
#bottom-dock {
  background: #f8f9fa;
  border-top: 2px solid #e9ecef;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.06);
  z-index: 20;
  padding-bottom: max(6px, env(safe-area-inset-bottom));
}

.clue-nav {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  gap: 8px;
  background: #ffffff;
  border-bottom: 1px solid #e9ecef;
}

.nav-arrow {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid #ced4da;
  background: white;
  color: #495057;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.nav-arrow:active {
  background: #e9ecef;
}

.clue-display {
  flex: 1;
  background: #f1f3f5;
  border-radius: 18px;
  padding: 6px 14px;
  font-size: 13px;
  color: #343a40;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1.5px solid #dee2e6;
  min-height: 18px;
}
.clue-display.active-clue {
  background: #e7f5ff;
  border-color: #74c0fc;
  color: #1864ab;
}

#keyboard {
  padding: 5px 4px 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 520px;
  margin: 0 auto;
}

.kb-row {
  display: flex;
  justify-content: center;
  gap: 4px;
}

.kb-key {
  flex: 1;
  max-width: 46px;
  height: 40px;
  background: white;
  border: 1.5px solid #ced4da;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
  color: #212529;
  box-shadow: 0 2px 0 #adb5bd;
  cursor: pointer;
  transition: transform 0.05s;
}
.kb-key:active {
  transform: translateY(2px);
  box-shadow: none;
  background: #e7f5ff;
}

.kb-key.del {
  background: #ffe3e3;
  border-color: #ffa8a8;
  color: #e03131;
  box-shadow: 0 2px 0 #ff8787;
  max-width: 54px;
}

.kb-key.shift {
  background: #edf2ff;
  border-color: #bac8ff;
  color: #4c6ef5;
  box-shadow: 0 2px 0 #91a7ff;
  max-width: 54px;
}
.kb-key.shift.active {
  background: #0984e3;
  border-color: #0767b3;
  color: white;
  box-shadow: 0 2px 0 #054d85;
}

#toast, .toast {
  position: fixed;
  top: 68px;
  bottom: auto !important;
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  background: rgba(15, 23, 42, 0.92);
  backdrop-filter: blur(8px);
  color: white;
  padding: 8px 20px;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  transition: all 0.25s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  z-index: 220;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  text-align: center;
  white-space: nowrap;
  max-width: 90vw;
  height: auto !important;
  max-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#toast.show, .toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
#toast.error, .toast.error {
  background: rgba(220, 38, 38, 0.95);
}
#toast.success, .toast.success {
  background: rgba(16, 185, 129, 0.95);
}

/* ──────────────────────────────────────────────────────────
   힐링 BGM 주크박스 & 헤더 플레이어 스타일
   ────────────────────────────────────────────────────────── */
.bgm-player-badge {
  background: white;
  border-radius: 12px;
  border: 2px solid #e7f5ff;
  padding: 0 10px;
  height: 40px;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.08);
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  color: #1b3046;
  max-width: 175px;
  transition: all 0.15s;
}
.bgm-player-badge:hover {
  background: #f1f3f5;
  border-color: #74c0fc;
}
.bgm-title-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: 'Jua', sans-serif;
  font-size: 13px;
  color: #2b8a3e;
}

.bgm-ctrl-btn {
  width: 36px;
  height: 40px;
  background: white;
  border-radius: 12px;
  border: 2px solid #e7f5ff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.08);
  cursor: pointer;
  font-size: 14px;
  transition: transform 0.15s, background 0.15s;
}
.bgm-ctrl-btn:hover {
  background: #f1f3f5;
}
.bgm-ctrl-btn:active {
  transform: scale(0.92);
}

.bgm-disc-icon.spinning {
  display: inline-block;
  animation: bgmSpin 3s linear infinite;
}
@keyframes bgmSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* BGM 주크박스 팝업 모달 */
#bgm-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(4px);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
#bgm-modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.bgm-modal-card {
  background: white;
  border-radius: 24px;
  width: 90%;
  max-width: 440px;
  padding: 22px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.25), 0 0 0 1px rgba(255,255,255,0.8);
  transform: scale(0.92);
  transition: transform 0.25s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
#bgm-modal-overlay.open .bgm-modal-card {
  transform: scale(1);
}

.bgm-now-playing-box {
  background: linear-gradient(135deg, #f3f9f1 0%, #eefbf3 100%);
  border: 2px solid #b2f2bb;
  border-radius: 18px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 12px 0 14px 0;
}
.bgm-turntable {
  font-size: 38px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15));
}
.bgm-turntable.spinning {
  animation: bgmSpin 3.5s linear infinite;
}
.bgm-now-info {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-align: left;
}
.bgm-now-status {
  font-size: 11px;
  font-weight: 800;
  color: #2b8a3e;
}
.bgm-now-name {
  font-family: 'Jua', sans-serif;
  font-size: 17px;
  color: #1b3046;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}
.bgm-now-mood {
  font-size: 11.5px;
  font-weight: 600;
  color: #5c7cfa;
  margin-top: 2px;
}

.bgm-volume-container {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f8f9fa;
  border-radius: 12px;
  padding: 8px 14px;
  margin-bottom: 14px;
}
.bgm-vol-slider {
  flex: 1;
  accent-color: #2b8a3e;
  cursor: pointer;
}
.bgm-vol-icon {
  font-size: 16px;
}
.bgm-vol-pct {
  font-size: 12px;
  font-weight: 800;
  color: #495057;
  min-width: 35px;
  text-align: right;
}

.bgm-track-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 260px;
  overflow-y: auto;
}
.bgm-track-card {
  background: #f8f9fa;
  border: 2px solid #e9ecef;
  border-radius: 14px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: all 0.18s;
}
.bgm-track-card:hover {
  background: #f1f9ff;
  border-color: #74c0fc;
  transform: translateY(-1px);
}
.bgm-track-card.active {
  background: #e7f5ff;
  border-color: #0984e3;
  box-shadow: 0 4px 12px rgba(9, 132, 227, 0.18);
}
.bgm-track-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.bgm-track-icon {
  font-size: 24px;
}
.bgm-track-info {
  text-align: left;
}
.bgm-track-name {
  font-family: 'Jua', sans-serif;
  font-size: 14.5px;
  color: #1b3046;
}
.bgm-track-en {
  font-size: 10px;
  font-weight: 600;
  color: #868e96;
}
.bgm-track-mood {
  font-size: 10.5px;
  font-weight: 700;
  color: #2b8a3e;
  margin-top: 1px;
}
.bgm-track-badge {
  font-size: 11px;
  font-weight: 800;
  color: #0984e3;
  background: rgba(9, 132, 227, 0.12);
  padding: 4px 8px;
  border-radius: 8px;
  white-space: nowrap;
}

/* ──────────────────────────────────────────────────────────
   통합 모드 스위처 (2D ⟷ 3D) 및 목록 화면 스타일
   ────────────────────────────────────────────────────────── */
.hidden { display: none !important; }

/* ── 헤더 통합 ── */
.cw-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: transparent; z-index: 1000; position: absolute; top: 0; left: 0; right: 0; }
.cw-home-btn { background: none; border: none; padding: 0; cursor: pointer; display: flex; align-items: center; }
.cw-game-back { display:none; position:relative; width:44px; height:44px; flex:0 0 44px; padding:0; border:0; border-radius:50%; overflow:hidden; background:transparent; cursor:pointer; filter:drop-shadow(0 3px 5px rgba(0,0,0,.3)); }
.cw-game-back img { position:absolute; left:50%; top:50%; width:54px; height:94px; max-width:none; transform:translate(-50%,-50%); }
body:not(.home-active) .cw-game-back { display:block; }
.cw-game-back:hover { filter:drop-shadow(0 4px 7px rgba(0,0,0,.4)) brightness(1.07); }
.cw-game-back:active { transform:scale(.94); }
.game-sub-header .btn-back { display:none; }
.cw-resource-wrap { flex: 1; display: flex; justify-content: flex-start; position: relative; }
.cw-score-toggle { display: none; align-items: center; gap: 6px; height: 48px; padding: 3px 11px 3px 4px;
  border: 2px solid #fbbf24; border-radius: 999px; color: #fff; cursor: pointer;
  background: linear-gradient(180deg, #2db2ff, #0669b3); box-shadow: inset 0 2px 4px rgba(255,255,255,.4), 0 4px 10px rgba(0,0,0,.25); }
.cw-score-toggle img { width: 34px; height: 34px; object-fit: contain; }
/* The vinyl source images include a white square margin; show only the record face. */
.cw-score-toggle > img, .header-record-img, .stage-record-image { clip-path: circle(47% at 50% 50%); }
.cw-score-copy { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.05; white-space: nowrap; }
.cw-score-copy small { font-size: 9px; font-weight: 800; opacity: .9; }
.cw-score-copy strong { font-family: 'Black Han Sans', sans-serif; font-size: 20px; font-weight: 400; }
.cw-score-unit { font-family: 'Noto Sans KR', sans-serif; font-size: 11px; font-weight: 900; margin-left: 2px; }
.cw-score-chevron { font-size: 17px; line-height: 1; opacity: .85; }
body:not(.home-active) .cw-resource-wrap { flex: 0 0 auto; }
body:not(.home-active) .cw-header { justify-content: flex-start; }
body:not(.home-active) .cw-resource-wrap { margin-left: 6px; }
body:not(.home-active) .cw-header-center { margin-left: auto; }
body:not(.home-active) .cw-score-toggle { display: inline-flex; }
body:not(.home-active) .cw-stars-bar { display: none; position: absolute; top: calc(100% + 8px); left: 8px;
  z-index: 1200; margin-left: 0; width: 300px; max-width: calc(100vw - 16px);
  background: linear-gradient(180deg, rgba(45,178,255,.46), rgba(6,105,179,.42));
  backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); }
body:not(.home-active) .cw-resource-wrap.record-details-open .cw-stars-bar { display: flex; }
.cw-stars-bar {
  background: linear-gradient(180deg, #2db2ff 0%, #0669b3 100%);
  border: 3px solid #fbbf24;
  border-radius: 99px;
  box-shadow: inset 0 3px 6px rgba(255,255,255,0.4), 0 0 0 1px #b45309;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
  min-width: 278px;
  padding: 2px 12px;
  gap: 0;
  margin-left: 8px;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.25));
}
.record-summary { min-width: 0; flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px; padding: 0 6px; }
.record-summary + .record-summary { border-left: 1px solid rgba(255,255,255,.28); }
.header-record-img { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0,0,0,.42)); }
body.home-active .header-record-img { width: 32px; height: 32px; flex-basis: 32px; }
.record-summary-values { min-width: 20px; display: flex; flex-direction: column; align-items: flex-start; line-height: 1; gap: 2px; }
.header-record-count { color: #fff; font-family: 'Black Han Sans', sans-serif; font-size: 1.05rem; text-shadow: 0 2px 3px rgba(0,0,0,.6); }
.header-star-total { display: flex; align-items: center; gap: 2px; color: #fff; font-family: 'Black Han Sans', sans-serif; font-size: .72rem; text-shadow: 0 1px 2px rgba(0,0,0,.7); }
.header-star-total img { width: 13px; height: 13px; object-fit: contain; filter: drop-shadow(0 1px 1px rgba(0,0,0,.4)); }
.cw-header-center { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.header-btn { background: none; border: none; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.15s; }
.header-btn:hover { transform: scale(1.08); }
.header-btn:active { transform: scale(0.92); }
.header-icon-img { height: 44px; width: auto; filter: drop-shadow(0 3px 5px rgba(0,0,0,0.3)); }

/* Puzzle streak: compact entry point, with the supplied artwork in a light image well. */
#streak-tab { position:relative; z-index:1100; flex:0 0 auto; margin:0 12px 0 8px; display:flex; align-items:center; gap:5px;
  border:2px solid #dfaa4b; border-radius:999px; padding:3px 9px 3px 3px; background:#fffaf1;
  color:#563414; box-shadow:0 4px 12px #2520473d; cursor:pointer; font-family:'Jua',sans-serif; }
#streak-tab img { width:30px; height:30px; object-fit:cover; border-radius:50%; }
#streak-tab span { display:flex; align-items:baseline; gap:2px; white-space:nowrap; }
#streak-tab strong { font-size:19px; } #streak-tab small { font-size:11px; }
#streak-tab.reward-ready { box-shadow:0 0 0 3px #ffdc5a, 0 4px 14px #bf7711; }
body:not(.home-active) #streak-tab { display:none !important; }
body:not(.home-active) .cw-header-center { margin-left:auto; }
#streak-modal { display:none; position:fixed; inset:0; z-index:5000; align-items:center; justify-content:center;
  background:#11172d99; padding:16px; }
#streak-modal.open { display:flex; }
.streak-panel { position:relative; box-sizing:border-box; width:min(90vw,420px); max-height:calc(100dvh - 32px); overflow-y:auto;
  padding:22px 20px 18px; border:2px solid #d8aa61; border-radius:22px; color:#fff;
  background:linear-gradient(145deg,#26304b,#211d38 68%,#342144);
  box-shadow:0 18px 45px #0008, inset 0 0 0 2px #ffffff13; text-align:center; font-family:'Jua',sans-serif; }
.streak-panel h2 { margin:0 32px 10px; font-size:23px; color:#ffe5a0; }
.streak-hero { display:flex; justify-content:center; align-items:center; gap:9px; margin-bottom:10px; }
.streak-hero img { width:40px; height:40px; border-radius:50%; object-fit:cover; }
.streak-hero strong { font-size:24px; font-weight:normal; }
.streak-next-row { display:flex; align-items:center; justify-content:center; gap:8px; margin:8px 0 10px; font-size:15px; }
#streak-reward-box { display:block; width:38px; height:38px; border-radius:50%; object-fit:cover; }
.streak-close { position:absolute; top:11px; right:12px; border:0; background:#fff2; color:#fff;
  font-size:22px; border-radius:50%; width:30px; height:30px; cursor:pointer; }
#streak-progress { display:flex; gap:5px; max-width:310px; margin:8px auto; }
#streak-progress span { flex:1; height:12px; border-radius:10px; background:#ffffff55; border:1px solid #edc778; }
#streak-progress span.filled { background:linear-gradient(90deg,#ffad32,#ffe379); box-shadow:0 0 8px #ffc552; }
.streak-stats { display:flex; justify-content:center; flex-wrap:wrap; gap:7px; margin:8px 0; }
.streak-stats span { background:#fff2; border-radius:99px; padding:5px 9px; font-size:12px; }
.streak-stats img { width:16px; height:16px; object-fit:contain; vertical-align:middle; }
#streak-choices { border-top:1px solid #d9bd8b77; margin:9px 0; padding:8px 0; }
#streak-choices[hidden] { display:none; } #streak-choices p { margin:0 0 6px; }
#streak-choices button { display:inline-flex; align-items:center; gap:5px; margin:3px; padding:5px 10px;
  border:1px solid #efc879; border-radius:12px; background:#fffaf0; color:#50330f; font:inherit; cursor:pointer; }
#streak-choices button:disabled { opacity:.45; cursor:not-allowed; }
#streak-choices img { width:28px; height:28px; object-fit:cover; border-radius:8px; }
#streak-badges { display:flex; justify-content:center; gap:12px; margin:10px 0 7px; }
.streak-badge { opacity:.4; display:flex; align-items:center; flex-direction:column; gap:2px; font-size:12px; }
.streak-badge.earned { opacity:1; } .streak-badge img { width:36px; height:36px; border-radius:50%; object-fit:cover; }
.streak-rule { display:block; margin-top:9px; padding-top:8px; border-top:1px solid #d9bd8b55;
  font-size:11px; line-height:1.35; color:#f1e6d7; }
@media (max-width:700px) {
  #streak-tab { margin:0 3px; padding:2px 5px 2px 2px; }
  #streak-tab img { width:23px; height:23px; } #streak-tab strong { font-size:15px; }
  #streak-tab small { font-size:11px; } #streak-tab .streak-word { display:none; }
  .streak-panel { padding:20px 16px 16px; }
}

.cw-logo {
  font-family: 'Black Han Sans', sans-serif;
  font-size: 1.15rem; color: #fff; text-decoration: none;
  display: flex; align-items: center; gap: 6px;
}

/* ── 구름 애니메이션 ── */
.clouds-bg {
  position: fixed; top: 0; left: 0; width: 100%; height: 200px;
  pointer-events: none; z-index: 0; overflow: hidden;
}
.cloud-bg-item {
  position: absolute; background: white; border-radius: 50px; opacity: 0.7; animation: cloudDrift linear infinite;
}
.cloud-bg-item::before, .cloud-bg-item::after { content: ''; position: absolute; background: white; border-radius: 50%; }
.cloud-bg-item:nth-child(1) { width:120px;height:40px;top:30px;animation-duration:25s;animation-delay:-5s; }
.cloud-bg-item:nth-child(1)::before { width:60px;height:60px;top:-30px;left:20px; }
.cloud-bg-item:nth-child(1)::after  { width:40px;height:40px;top:-20px;left:60px; }
.cloud-bg-item:nth-child(2) { width:160px;height:50px;top:60px;animation-duration:35s;animation-delay:-15s; }
.cloud-bg-item:nth-child(2)::before { width:80px;height:80px;top:-40px;left:30px; }
.cloud-bg-item:nth-child(2)::after  { width:55px;height:55px;top:-30px;left:90px; }
.cloud-bg-item:nth-child(3) { width:100px;height:35px;top:15px;animation-duration:20s;animation-delay:-10s; }
.cloud-bg-item:nth-child(3)::before { width:50px;height:50px;top:-25px;left:15px; }
.cloud-bg-item:nth-child(3)::after  { width:35px;height:35px;top:-18px;left:50px; }
@keyframes cloudDrift {
  from { transform: translateX(-200px); }
  to   { transform: translateX(calc(100vw + 200px)); }
}

/* ── 로그인 게이트 ── */
#login-gate {
  position: relative; z-index: 5;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; padding: 36px 24px;
  /* 3D 배경 테마(어두운 화산·밤하늘 등) 위에서도 글자가 보이도록 흰 카드로 띄운다 */
  max-width: 420px; margin: 12vh auto 0; width: calc(100% - 32px); box-sizing: border-box;
  background: rgba(255,255,255,0.95); border-radius: 24px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.18);
}
.cw-gate-emoji { font-size: 4rem; margin-bottom: 12px; }
.cw-gate-title { font-family: 'Black Han Sans', sans-serif; font-size: 2rem; color: #1e293b; margin-bottom: 6px; }
.cw-gate-sub { color: #475569; margin-bottom: 28px; font-weight: 700; }
.cw-google-btn {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  background: #fff; border: 2px solid #d9e4ee; border-radius: 16px;
  padding: 13px 26px; font-size: 1rem; font-weight: 800; color: #2C3E50;
  box-shadow: 0 3px 12px rgba(0,0,0,0.07); font-family: inherit;
  transition: all 0.2s;
}
.cw-google-btn:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.15); transform: translateY(-1px); }

/* ── 퍼즐 목록 화면 ── */
#screen-list {
  position: relative; z-index: 10;
  padding: 20px 16px 80px; max-width: 860px; margin: 0 auto; width: 100%;
}
.list-header { text-align: center; margin-bottom: 18px; }
.list-title {
  font-family: 'Black Han Sans', sans-serif;
  font-size: 2.3rem; color: #1e293b;
  text-shadow: 2px 2px 0 rgba(255,255,255,0.7);
  letter-spacing: 1px;
}
.list-subtitle {
  color: #334155; font-size: 0.95rem; margin-top: 4px; font-weight: 800;
}

/* 플레이 모드 기본 선택 바 */
.mode-pref-bar {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 12px auto 16px; background: rgba(255,255,255,0.75);
  backdrop-filter: blur(8px); border-radius: 30px; padding: 5px 8px;
  max-width: 380px; border: 2px solid rgba(255,255,255,0.9);
}
.mode-pref-label { font-size: 0.8rem; font-weight: 800; color: #475569; margin-left: 6px; }
.mode-pref-btn {
  border: none; border-radius: 20px; padding: 6px 14px;
  font-family: 'Black Han Sans', sans-serif; font-size: 0.85rem;
  color: #64748b; background: transparent; cursor: pointer;
  transition: all 0.18s;
}
.mode-pref-btn.active {
  background: #3b82f6; color: #fff;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.35);
}


.book-tabs {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  margin: 16px 12px 24px;
}
.book-tab {
  background: linear-gradient(180deg, #ffffff 0%, #e2e8f0 100%);
  border: 2px solid #cbd5e1;
  color: #334155;
  font-family: 'Jua', sans-serif; font-size: 15px;
  padding: 10px 16px; border-radius: 99px;
  cursor: pointer;
  box-shadow: 0 4px 0 #94a3b8, 0 6px 10px rgba(0,0,0,0.1);
  transition: all 0.1s;
  display: flex; align-items: center; gap: 6px;
}
.book-tab:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 #94a3b8, 0 2px 4px rgba(0,0,0,0.1);
}
.book-tab.active {
  background: linear-gradient(180deg, #60a5fa 0%, #2563eb 100%);
  border-color: #1d4ed8;
  color: #ffffff;
  box-shadow: 0 4px 0 #1e3a8a, 0 6px 10px rgba(37,99,235,0.3);
}
.book-tab small { background: rgba(0,0,0,0.1); padding: 2px 6px; border-radius: 10px; font-size: 11px; }
.book-tab.active small { background: rgba(255,255,255,0.2); }

.tab-pt {
  font-size: 0.72rem; font-weight: 800; background: rgba(0,0,0,0.12);
  border-radius: 999px; padding: 1px 6px;
}
.book-tab.active .tab-pt { background: rgba(255,255,255,0.25); color: #fff; }

.sub-tabs {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 6px; white-space: nowrap; flex-shrink: 0; margin-bottom: 12px;
}
.sub-tab {
  background: rgba(255,255,255,0.5); border: 1.5px solid rgba(255,255,255,0.7);
  border-radius: 16px; padding: 5px 12px; font-size: 0.82rem; font-weight: 800;
  color: #475569; cursor: pointer; transition: all 0.15s;
}
.sub-tab:hover { background: #fff; }
.sub-tab.active { background: #3b82f6; color: #fff; border-color: #2563eb; }

.book-reward {
  text-align: center; margin: 0 auto 16px; font-size: 0.85rem;
  color: #334155; font-weight: 700;
}
.book-reward b { color: #d97706; font-size: 1rem; }

.puzzle-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 12px;
}
.puzzle-card {
  background: #fff; border-radius: 18px; padding: 16px 12px;
  text-align: center; cursor: pointer; position: relative;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06); border: 2px solid #e2e8f0;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.puzzle-card:hover {
  transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  border-color: #60a5fa;
}
.puzzle-card-num {
  font-family: 'Black Han Sans', sans-serif; font-size: 1.4rem; color: #1e293b;
}
.puzzle-card-title {
  font-size: 0.82rem; font-weight: 800; color: #475569; margin: 4px 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.puzzle-card-stars { font-size: 0.85rem; }
.puzzle-card-pt {
  margin-top: 5px; font-size: 0.72rem; font-weight: 900;
  color: #b45309; background: #fef3c7; border-radius: 999px;
  padding: 2px 8px; display: inline-block;
}
.puzzle-card-done {
  position: absolute; top: -6px; right: -6px; width: 26px; height: 26px;
  background: #10b981; color: #fff; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; font-weight: 900; border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.puzzle-card-done.ing { background: #f59e0b; }

/* ── 게임 화면 공통 헤더 ── */
#screen-game {
  position: relative; z-index: 10; width: 100%; height: 100dvh;
  display: flex; flex-direction: column; overflow: hidden;
}

.game-sub-header {
  height: 52px; padding: 6px 16px;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(255,255,255,0.92); backdrop-filter: blur(8px);
  border-bottom: 2px solid #e2e8f0; z-index: 20;
}
body.in-game-3d .game-sub-header {
  position: absolute; top: 0; left: 0; right: 0; height: 60px;
  padding: 4px 8px; justify-content: center;
  background: transparent !important; border: 0 !important;
  pointer-events: none; z-index: 100;
}
body.in-game-3d .game-sub-header .btn-back { display: none !important; }
/* 2D 판의 맵 이름: 전에는 흰 띠의 왼쪽 끝에 놓여 뒤로·홈·점수 버튼 밑에 깔렸다 → 3D 처럼 가운데로 (사용자 2026-10-02).
   넓은 화면은 머리띠와 같은 줄 가운데, 좁은 화면(700px 이하)은 버튼과 겹치지 않게 머리띠 아랫줄 가운데. */
body:not(.in-game-3d) .game-sub-header { height: 60px; padding: 4px 8px; justify-content: center; background: transparent; border-bottom: 0; backdrop-filter: none; pointer-events: none; }
@media (min-width: 701px) { body:not(.in-game-3d) .game-title-info { transform: translateX(-34px); } }
@media (max-width: 700px) { body:not(.in-game-3d) .game-sub-header { height: auto; margin-top: 52px; padding: 2px 8px 4px; } }
body.in-game-3d .game-title-info { position: absolute; top: 4px; left: 50%; transform: translateX(-50%); }
@media (min-width: 701px) {
  body.in-game-3d .game-title-info { transform: translateX(calc(-50% - 34px)); }
}
.game-title-info {
  display: flex; align-items: center; gap: 10px;
  position: relative;
  padding: 7px 17px 7px 9px;
  border: 1px solid rgba(255, 219, 126, .9);
  border-radius: 20px;
  background: linear-gradient(135deg, #27354e 0%, #101a2e 72%, #29364c 100%);
  box-shadow: 0 5px 16px rgba(15, 23, 42, .24), inset 0 1px 0 rgba(255,255,255,.2);
}
.stage-record-image {
  display: block; width: 44px; height: 44px; object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.38));
}
.stage-record-copy { display: flex; min-width: 86px; flex-direction: column; align-items: flex-start; gap: 2px; }
.game-main-title {
  font-family: 'Black Han Sans', sans-serif; font-size: 1.1rem; color: #1e293b;
}
.game-title-info .game-main-title { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.45); }
.game-reward-tag {
  display: flex; align-items: center; gap: 7px;
  font-size: 0.7rem; font-weight: 800; color: #fff;
}
.stage-stars { display: inline-flex; align-items: center; gap: 2px; }
.stage-stars img { display: block; width: 19px; height: 19px; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.stage-stars img.is-dimmed { opacity: .26; filter: grayscale(1); }
.stage-mistakes { padding: 3px 7px; border-radius: 999px; color: #f8fafc; background: rgba(255,255,255,.13); white-space: nowrap; }

/* ── 2D 뷰 레이아웃 ── */
#view-2d {
  flex: 1; overflow-y: auto; padding: 14px 16px 280px;
  display: flex; flex-direction: column; align-items: center;
}
.crossword-wrap {
  display: flex; flex-direction: column; align-items: center; margin-bottom: 16px;
}
.dir-toggle-bar {
  display: flex; gap: 8px; margin-bottom: 10px;
}
.dir-btn {
  background: #f1f5f9; border: 2px solid #cbd5e1; border-radius: 12px;
  padding: 5px 14px; font-family: 'Black Han Sans', sans-serif; font-size: 0.85rem;
  color: #475569; cursor: pointer; transition: all 0.15s;
}
.dir-btn.active {
  background: #3b82f6; color: #fff; border-color: #2563eb;
  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3);
}

.crossword-grid {
  display: grid; gap: 4px; background: #334155; padding: 8px;
  border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}
.cell {
  aspect-ratio: 1; border-radius: 8px; position: relative;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.12s; font-family: 'Black Han Sans', sans-serif;
}
.cell.white { background: #fff; color: #1e293b; border: 2px solid #e2e8f0; }
.cell.white:hover { border-color: #93c5fd; }
.cell.black { background: #1e293b; cursor: default; }
.cell.given { background: #fef08a; border-color: #f59e0b; color: #92400e; }
.cell.active, .cell.selected {
  background: #BEE3F8 !important;
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3.5px rgba(37, 99, 235, 0.45) !important;
  transform: scale(1.05);
  z-index: 5;
}
.cell.highlight, .cell.word-highlight {
  background: #EBF8FF !important;
  border-color: #90CDF4 !important;
}
.cell.correct {
  background: #dcfce7; border-color: #22c55e; color: #15803d;
  animation: cellPop 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
.cell.wrong {
  background: #fee2e2; border-color: #ef4444; color: #b91c1c;
  animation: cellShake 0.45s ease-in-out;
}
@keyframes cellPop {
  0% { transform: scale(0.9); }
  50% { transform: scale(1.14); }
  100% { transform: scale(1); }
}
@keyframes cellShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}
.clue-item.done {
  text-decoration: line-through;
  opacity: 0.55;
  color: #10b981;
}

.cell-num {
  position: absolute; top: 2px; left: 4px; font-size: 0.65rem;
  font-weight: 900; color: #64748b; font-family: 'Noto Sans KR', sans-serif;
  pointer-events: none; user-select: none;
}
.cell-letter {
  font-size: 1.4rem; font-weight: 900;
  pointer-events: none; user-select: none;
}
/* 2D 판: 글자·번호 크기를 칸 크기(--cell)에 맞춘다 + 확대하면 넘치는 판을 끌어서 본다 (2026-10-02) */
/* 2D 판 글자: 굵은 제목 글꼴(Black Han Sans)은 획이 뭉쳐 작은 칸에서 뚜·두·뜻이 구분이 안 된다 → 본문 글꼴 Noto Sans KR 굵게 (사용자 2026-10-02) */
.crossword-grid .cell-letter { font-family: 'Noto Sans KR', 'Malgun Gothic', sans-serif; font-weight: 700; letter-spacing: 0; font-size: min(1.45rem, calc(var(--cell, 40px) * 0.66)); }
.crossword-grid .cell.given .cell-letter, .crossword-grid .cell.correct .cell-letter { font-weight: 900; }
#keyboard .kb-key { font-family: 'Noto Sans KR', 'Malgun Gothic', sans-serif; font-weight: 700; font-size: 17px; }
.crossword-grid .cell-num { font-size: min(0.65rem, calc(var(--cell, 40px) * 0.3)); top: 1px; left: 2px; }
.crossword-grid .cell { border-radius: min(8px, calc(var(--cell, 40px) * 0.18)); }
.grid-scroll { max-width: calc(100vw - 16px); max-height: 62vh; overflow: auto; border-radius: 14px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.grid-scroll { cursor: grab; touch-action: pan-x pan-y; }
.grid-scroll.dragging { cursor: grabbing; user-select: none; }
.grid-scroll.dragging .cell { cursor: grabbing; }
/* 2D 판에 맵 그림 입히기 (game.js applyGrid2DSkin) — 고급 맵에서만 */
#view-2d.skin-2d { background-image: linear-gradient(rgba(10,8,16,0.35), rgba(10,8,16,0.35)), var(--skin-floor); background-size: auto, 384px 384px; }
.skin-2d .crossword-grid { background: var(--skin-frame-color, #334155); box-shadow: 0 10px 30px rgba(0,0,0,0.45), 0 0 0 2px rgba(214,186,120,0.55); }
.skin-2d .cell.white { background-image: var(--skin-top); background-size: cover; border-color: rgba(0,0,0,0.12); }
.skin-2d .cell.black { background-color: var(--skin-block-color, #1e293b); background-image: var(--skin-block); background-size: cover; }
.skin-2d .cell.given { background-image: var(--skin-given); background-size: cover; background-color: transparent; border-color: rgba(180,130,30,0.5); }
.skin-2d .cell.correct { background-image: var(--skin-ok) !important; background-size: cover !important; background-color: transparent !important; }
.skin-2d .cell.given.correct { background-image: var(--skin-given) !important; }
.skin-2d .dir-btn:not(.active) { background: rgba(255,255,255,0.9); }
.grid-zoom { display: inline-flex; gap: 6px; margin-left: 10px; }
.grid-zoom-btn { padding: 5px 10px; }
.grid-zoom-btn:disabled { opacity: 0.4; cursor: default; }

.clues-panel {
  width: 100%; max-width: 560px; display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px; margin-bottom: 14px;
}
.clue-group {
  background: rgba(255,255,255,0.9); border-radius: 14px; padding: 12px;
  border: 1.5px solid #e2e8f0; max-height: 180px; overflow-y: auto;
}
.clue-group-title {
  font-family: 'Black Han Sans', sans-serif; font-size: 0.9rem; margin-bottom: 8px;
  padding-bottom: 4px; border-bottom: 2px solid #e2e8f0;
}
/* 방향 색 통일: 가로 = 파랑, 세로 = 빨강 (2026-09-15 사용자 요청) */
.clue-group-title.across { color: #2563eb; border-color: #93c5fd; }
.clue-group-title.down { color: #dc2626; border-color: #fca5a5; }
.clue-item {
  font-size: 0.8rem; font-weight: 700; color: #334155; margin-bottom: 6px;
  line-height: 1.35; cursor: pointer; border-radius: 6px; padding: 3px 5px;
}
.clue-item:hover { background: #e0f2fe; }
.clue-item.active { background: #dbeafe; color: #1d4ed8; font-weight: 900; }

/* ── 3D 뷰 레이아웃 ── */
#view-3d {
  position: absolute; inset: 52px 0 0 0; width: 100%; height: calc(100% - 52px);
  z-index: 5;
}
#canvas-container {
  width: 100%; height: 100%; position: absolute; inset: 0;
}

/* ── 공유 액션 바 (채점 / 힌트 / 초기화) ── */
.shared-action-bar {
  display: flex; gap: 8px; width: 100%; max-width: 560px; margin: 0 auto 10px;
}
.btn-check, .btn-hint-show, .btn-reset {
  flex: 1; padding: 10px 12px; border: none; border-radius: 12px;
  font-family: 'Black Han Sans', sans-serif; font-size: 0.92rem;
  cursor: pointer; transition: all 0.15s;
}
.btn-check {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white; box-shadow: 0 3px 0 #047857;
}
.btn-check:hover { transform: translateY(-1px); box-shadow: 0 5px 0 #047857; }
.btn-check:active { transform: translateY(2px); box-shadow: none; }
.btn-hint-show {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white; box-shadow: 0 3px 0 #b45309;
}
.btn-hint-show:hover { transform: translateY(-1px); }
.btn-reset {
  background: #f1f5f9; color: #64748b; border: 1.5px solid #cbd5e1;
  box-shadow: 0 3px 0 #cbd5e1;
}

/* ── 완료 모달 ── */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 200; opacity: 0; pointer-events: none;
  transition: opacity 0.3s;
}
.modal-overlay.show { opacity: 1; pointer-events: all; }
.modal-box {
  background: white; border-radius: 28px; padding: 36px 28px; text-align: center;
  max-width: 320px; width: 90%; transform: scale(0.7);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.modal-overlay.show .modal-box { transform: scale(1); }
.modal-emoji { font-size: 4rem; animation: emojiSpin 0.6s ease 0.3s both; }
@keyframes emojiSpin {
  from { transform: rotate(-180deg) scale(0); }
  to   { transform: rotate(0) scale(1); }
}
.modal-title {
  font-family: 'Black Han Sans', sans-serif; font-size: 1.8rem; color: #f59e0b; margin: 12px 0 6px;
}
.modal-sub { font-size: 0.92rem; color: #475569; margin-bottom: 20px; font-weight: 700; }
.modal-btn {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white; border: none; border-radius: 14px;
  padding: 12px 28px; font-family: 'Black Han Sans', sans-serif; font-size: 1.05rem;
  cursor: pointer; box-shadow: 0 4px 0 #1d4ed8;
}

/* ── 포인트 모달 & 토스트 ── */
#point-modal {
  position: fixed; inset: 0; z-index: 210; padding: 16px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(17,24,39,0.55); backdrop-filter: blur(4px);
}
.pm-card { background: #fff; border-radius: 24px; width: 100%; max-width: 360px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.3); }
.pm-head { background: linear-gradient(135deg, #FBBF24, #F59E0B); color: #fff; padding: 24px; text-align: center; position: relative; }
.pm-close { position: absolute; top: 10px; right: 12px; background: none; border: none; color: rgba(255,255,255,0.85); font-size: 1.2rem; cursor: pointer; }
.pm-star { font-size: 2.2rem; margin-bottom: 4px; }
.pm-label { font-size: 0.82rem; font-weight: 800; color: rgba(255,255,255,0.92); }
.pm-total { font-size: 2.8rem; font-weight: 900; margin-top: 4px; }
.pm-body { padding: 24px; }
.pm-cash-box { background: #ECFDF5; border: 1px solid #D1FAE5; border-radius: 16px; padding: 16px; margin-bottom: 8px; text-align: center; }
.pm-cash-label { font-size: 0.82rem; font-weight: 800; color: #047857; margin-bottom: 4px; }
.pm-cash { font-size: 1.7rem; font-weight: 900; color: #059669; }
.pm-note { font-size: 0.72rem; color: #9ca3af; text-align: center; margin-bottom: 14px; }
.pm-btn-cash { width: 100%; margin-top: 8px; background: #10B981; color: #fff; border: none; font-weight: 800; padding: 13px; border-radius: 12px; cursor: pointer; font-family: inherit; font-size: 0.95rem; }
.pm-btn-cash:hover:not(:disabled) { background: #059669; }
.pm-btn-cash:disabled { opacity: 0.4; cursor: default; }
.pm-pending { margin-top: 18px; }
.pm-pending-label { font-size: 0.72rem; font-weight: 800; color: #9ca3af; margin-bottom: 8px; }
#point-modal-pending-items > * + * { margin-top: 8px; }
.pm-form-label { font-size: 0.86rem; color: #4b5563; font-weight: 600; margin-bottom: 12px; text-align: center; }
.pm-input { width: 100%; border: 2px solid #e5e7eb; border-radius: 12px; padding: 12px; text-align: center; font-size: 1.5rem; font-weight: 900; outline: none; font-family: inherit; }
.pm-input:focus { border-color: #34D399; }
.pm-preview { text-align: center; font-size: 0.86rem; color: #6b7280; margin-top: 8px; }
.pm-error { text-align: center; font-size: 0.86rem; color: #f43f5e; font-weight: 800; margin-bottom: 8px; }
.pm-form-btns { display: flex; gap: 8px; margin-top: 16px; }
.pm-btn-cancel, .pm-btn-submit { flex: 1; border: none; font-weight: 800; padding: 13px; border-radius: 12px; cursor: pointer; font-family: inherit; font-size: 0.95rem; }
.pm-btn-cancel { background: #f3f4f6; color: #4b5563; }
.pm-btn-submit { background: #10B981; color: #fff; }

#point-toast { position: fixed; top: 76px; right: 16px; z-index: 105; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; }
.point-toast-item { background:#ffd43b; color:#856404; font-weight:800; font-size:14px; padding:12px 18px; border-radius:999px; box-shadow:0 4px 16px rgba(0,0,0,0.15); white-space:nowrap; }
.point-toast-item.info { background:#10b981; color:#fff; }

/* ── 폭죽 파티클 (2D) ── */
.confetti-wrap {
  position: fixed; inset: 0; pointer-events: none; z-index: 190; overflow: hidden;
}
.confetti-piece {
  position: absolute; width: 10px; height: 10px; border-radius: 2px; animation: confettiFall linear forwards;
}
@keyframes confettiFall {
  0%   { transform: translateY(-20px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

/* ── 하단 가상 키보드 및 단서 바 스타일 ── */
.keyboard {
  width: 100%; background: white; border-radius: 20px;
  padding: 10px; box-shadow: 0 4px 14px rgba(0,0,0,0.15);
}
.kb-dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: rgba(255,255,255,0.97); backdrop-filter: blur(8px);
  box-shadow: 0 -4px 18px rgba(0,0,0,0.15);
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
}
.kb-dock .keyboard {
  box-shadow: none; padding: 0; border-radius: 0;
  max-width: 560px; margin: 0 auto; background: transparent;
}
.cur-clue {
  display: flex; align-items: stretch; gap: 8px;
  max-width: 560px; margin: 0 auto 8px;
}
.cur-clue-text {
  flex: 1; min-width: 0;
  font-size: 0.85rem; font-weight: 700; color: #2C3E50; line-height: 1.35;
  background: #EBF8FF; border: 2px solid #BEE3F8; border-radius: 12px;
  padding: 7px 10px; max-height: 3.4em; overflow-y: auto;
}
.cur-clue-text b { color: #2563eb; }
.cur-clue-text b.dir-down { color: #dc2626; }
.cur-nav {
  flex: 0 0 auto; width: 36px; border-radius: 11px;
  border: 2px solid #CBD5E0; background: #F7FAFC; color: #4A5568;
  font-size: 0.9rem; font-weight: 900; cursor: pointer;
}
.cur-nav:hover { background: #E2E8F0; }
.kb-row { display: flex; justify-content: center; gap: 5px; margin-bottom: 5px; }
.kb-key {
  flex: 1; max-width: 44px; aspect-ratio: 1;
  background: #F7FAFC; border: 2px solid #E2E8F0;
  border-radius: 10px; font-family: 'Black Han Sans', sans-serif;
  font-size: 0.85rem; cursor: pointer; color: #2C3E50;
  transition: all 0.1s; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 0 #CBD5E0;
  user-select: none;
}
.kb-key:hover  { background: #BEE3F8; border-color: #4A90D9; transform: translateY(-1px); }
.kb-key:active { transform: translateY(1px); box-shadow: none; }
.kb-key.del    { background: #FED7D7; border-color: #FC8181; color: #C53030; max-width: 60px; font-size: 0.75rem; }
.kb-key.del:hover { background: #FEB2B2; }
.kb-key.shift  { background: #E2E8F0; border-color: #A0AEC0; color: #4A5568; max-width: 60px; }
.kb-key.shift:hover { background: #CBD5E0; }
.kb-key.shift.on { background: #4A90D9; border-color: #2B6CB0; color: #fff; }

/* ── 3D 모드 전용 UI 및 하단 도크 숨김 ── */
body.in-game-3d .kb-dock {
  display: none !important;
}

/* 3D 화면 하단 컴팩트 HUD (단서 바 + 액션 버튼) */
.hud-3d-bottom {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 25;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: calc(100vw - 32px);
  pointer-events: auto;
}

.hud-3d-clue {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #ffffff;
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  border-radius: 16px;
  padding: 8px 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  max-width: min(92vw, 540px);
  box-sizing: border-box;
}

.hud-clue-badge {
  background: #2563eb;
  color: #ffffff;
  font-weight: 900;
  font-size: 0.75rem;
  padding: 3px 9px;
  border-radius: 9999px;
  white-space: nowrap;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 1px;
}

.hud-clue-text {
  font-size: 0.86rem;
  font-weight: 700;
  color: #f1f5f9;
  line-height: 1.38;
  white-space: normal;
  word-break: keep-all;
  overflow-y: auto;
  max-height: 4.5em;
  text-align: left;
}

.hud-3d-actions {
  display: flex;
  gap: 8px;
}

.hud-btn {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border: 1.5px solid #cbd5e1;
  border-radius: 20px;
  padding: 6px 13px;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hud-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
}

.hud-btn:active {
  transform: translateY(1px);
}

.hud-btn.hud-hint {
  color: #b45309;
  border-color: #fde68a;
  background: #fefce8;
}

.hud-btn.hud-check {
  color: #ffffff;
  background: linear-gradient(135deg, #10b981, #059669);
  border-color: #047857;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35);
}

.hud-btn.hud-reset {
  color: #475569;
}

/* 3D 모바일/터치 조작 패널 */
#control-panel {
  position: absolute;
  bottom: 16px;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  padding: 0 16px;
}

#virtual-dpad {
  pointer-events: auto;
  width: 108px;
  height: 108px;
  position: relative;
  touch-action: none;
}

.dpad-btn {
  position: absolute;
  width: 34px;
  height: 34px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  border: 1.5px solid rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 900;
  color: #1e293b;
  user-select: none;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  transition: all 0.08s;
}

.dpad-btn:active, .dpad-btn.pressed {
  background: #93c5fd;
  transform: scale(0.92);
  border-color: #2563eb;
  color: #1d4ed8;
}

.dpad-up    { top: 0; left: 37px; }
.dpad-down  { bottom: 0; left: 37px; }
.dpad-left  { top: 37px; left: 0; }
.dpad-right { top: 37px; right: 0; }
.dpad-center {
  top: 37px; left: 37px;
  border-radius: 50%;
  opacity: 0.3;
  pointer-events: none;
}

#action-buttons {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
  justify-content: flex-end;
}

.action-btn {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  border: 1.5px solid rgba(0, 0, 0, 0.12);
  border-radius: 18px;
  padding: 8px 14px;
  font-size: 0.78rem;
  font-weight: 800;
  color: #1e293b;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  transition: all 0.1s;
}

.action-btn:hover {
  transform: scale(1.04);
}

.action-btn:active {
  transform: scale(0.95);
}

/* 3D 뷰 우측 플로팅 줌 컨트롤 (➕ 확대 / ➖ 축소 - 글자 가림 완벽 방지) */
#zoom-controls {
  position: absolute;
  top: 55%;
  right: 14px;
  transform: translateY(-50%);
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: auto;
}
.zoom-btn {
  width: 36px;
  height: 40px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #ffffff;
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  font-size: 15px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
  cursor: pointer;
  transition: all 0.12s;
  user-select: none;
}
.zoom-btn:hover {
  background: #2563eb;
  transform: scale(1.06);
}
.zoom-btn:active {
  background: #1d4ed8;
  transform: scale(0.92);
}

/* 3D 전용 뱃지: 2D 모드에서는 항상 완전히 숨김 */
body:not(.in-game-3d) .badge-3d-only {
  display: none !important;
}

/* 로비(목록 화면)에서도 캐릭터를 바꿀 수 있게 아바타 버튼만 예외로 보인다 (2026-09-18 요청) */
body:not(.in-game-3d) #avatar-btn {
  display: flex !important;
}

/* ──────────────────────────────────────────────────────────
   📱 모바일 완벽 대응 반응형 스타일 (화면 너비 700px 이하)
   ────────────────────────────────────────────────────────── */
/* 태블릿·좁은 PC 창(641~1100px) 게임 중 헤더: 글자 라벨을 숨기고 아이콘만 한 줄로 (라벨이 세로로 꺾이던 문제) */
@media (min-width: 641px) and (max-width: 1100px) {
  body.in-game-3d .cw-logo span,
  body.in-game-3d #header-theme-name,
  body.in-game-3d #header-avatar-name,
  body.in-game-3d #view-label,
  body.in-game-3d .bgm-title-label,
  body.in-game-3d #user-name {
    display: none !important;
  }
  body.in-game-3d .cw-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: transparent; z-index: 1000; position: absolute; top: 0; left: 0; right: 0; }
  body.in-game-3d .cw-logo,
  body.in-game-3d #user-info,
  body.in-game-3d #point-badge,
  body.in-game-3d 
  body.in-game-3d .cw-header-center {
    min-width: 0;
    gap: 6px;
  }
}

@media (max-width: 700px) {
  html, body {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    width: 100% !important;
  }

  /* 1. 상단 통합 헤더: 모바일 1줄 컴팩트 정렬 (6개 버튼 완벽 대응) */
  .cw-header {
    padding: 6px 6px !important;
    gap: 3px !important;
  }
  .cw-home-btn .header-icon-img {
    height: 30px !important;
    width: 30px !important;
  }
  .cw-stars-bar {
    min-width: auto !important;
    height: 38px !important;
    padding: 0 5px !important;
    gap: 5px !important;
    margin-left: 1px !important;
    border-width: 2px !important;
  }
  body:not(.home-active) .cw-score-toggle { height: 32px; gap: 3px; padding: 2px 7px 2px 2px; }
  body:not(.home-active) .cw-score-toggle img { width: 24px; height: 24px; }
  body:not(.home-active) .cw-score-copy small { font-size: 7px; }
  body:not(.home-active) .cw-score-copy strong { font-size: 15px; }
  body:not(.home-active) .cw-score-unit { font-size: 9px; }
  body:not(.home-active) .cw-score-chevron { font-size: 13px; }
  body:not(.home-active) .cw-resource-wrap.record-details-open .cw-stars-bar { gap: 0 !important; }
  .star-item {
    gap: 2px !important;
  }
  .header-star-img {
    width: 20px !important;
    height: 20px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    margin-top: -1px !important;
  }
  .header-star-num {
    font-size: 0.8rem !important;
  }
  .cw-header-center {
    gap: 2px !important;
    justify-content: flex-end !important;
    overflow: visible !important;
    flex-shrink: 0 !important;
  }
  .header-btn {
    padding: 0 !important;
    margin: 0 !important;
  }
  .header-icon-img {
    height: 30px !important;
    width: 30px !important;
  }

  /* 3D 모드 인게임 타이틀 및 힌트 락 겹침 해결 */
  body.in-game-3d .game-sub-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: transparent !important;
    border: none !important;
    padding: 2px 8px;
    pointer-events: none;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  body.in-game-3d .btn-back {
    display: none !important;
  }
  body.in-game-3d .game-title-info {
    margin: 0;
    text-align: left;
    padding: 6px 13px 6px 7px;
    pointer-events: auto;
  }
  body.in-game-3d .stage-record-image { width: 38px; height: 38px; }
  body.in-game-3d .stage-record-copy { gap: 1px; }
  body.in-game-3d .game-main-title {
    font-size: 0.9rem !important;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  }
  body.in-game-3d .game-reward-tag {
    font-size: 0.66rem !important;
    color: #ffffff !important;
  }
  body.in-game-3d .stage-stars img { width: 17px; height: 17px; }
  body.in-game-3d .stage-mistakes { padding: 2px 6px; }
  body.in-game-3d .game-title-info { gap: 4px; padding: 4px 7px 4px 5px; }
  body.in-game-3d .stage-record-image { width: 32px; height: 32px; }
  body.in-game-3d .stage-record-copy { min-width: 0; }
  body.in-game-3d .game-main-title { font-size: .82rem !important; }
  body.in-game-3d .game-reward-tag { gap: 4px; font-size: .59rem !important; }
  body.in-game-3d .stage-stars img { width: 14px; height: 14px; }
  body.in-game-3d .stage-mistakes { padding: 2px 4px; }
  #point-badge {
    height: 28px;
    padding: 0 7px;
    font-size: 0.72rem;
    white-space: nowrap;
  }

  /* 모바일 퍼즐 화면은 판과 단서가 우선이다. 장식용 감정 액션은
     화면을 덮지 않도록 숨기고 이동 패드만 유지한다. */
  body.in-game-3d #action-buttons {
    display: none;
  }

  /* 2. 2D 게임 플레이 화면 반응형 */
  .game-sub-header {
    padding: 4px 8px;
  }
  .btn-back {
    padding: 4px 8px;
    font-size: 11px;
  }
  .game-main-title {
    font-size: 1rem;
  }
  body:not(.in-game-3d) .game-title-info { gap: 7px; padding: 5px 10px 5px 6px; border-radius: 16px; }
  body:not(.in-game-3d) .stage-record-image { width: 36px; height: 36px; }
  body:not(.in-game-3d) .game-main-title { font-size: .92rem; }
  body:not(.in-game-3d) .stage-stars img { width: 16px; height: 16px; }
  .crossword-wrap {
    padding: 0 4px;
    width: 100%;
    max-width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .crossword-grid {
    width: min(94vw, 350px);
    height: auto;
    padding: 5px;
    gap: 2px;
    box-sizing: border-box;
  }
  .cell {
    border-radius: 6px;
  }
  .cell-num {
    font-size: 0.55rem;
    top: 1px;
    left: 2px;
  }
  .cell-letter {
    font-size: 1.1rem;
  }
  .clues-panel {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 0 6px;
    margin-bottom: 8px;
    width: 100%;
    max-width: min(94vw, 350px);
    box-sizing: border-box;
  }
  .clue-group {
    padding: 6px;
    max-height: 120px;
    border-radius: 10px;
  }
  .clue-item {
    font-size: 0.74rem;
    padding: 2px 4px;
  }

  /* 2D 가상 키보드 및 액션 바 (화면 완벽 100% 밀착 피팅) */
  .kb-dock {
    width: 100vw !important;
    max-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
    padding: 5px 6px calc(6px + env(safe-area-inset-bottom)) !important;
    box-sizing: border-box !important;
  }
  .kb-dock .keyboard {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .shared-action-bar {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    gap: 5px !important;
    margin-bottom: 5px !important;
  }
  .btn-check, .btn-hint-show, .btn-reset {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 8px 2px !important;
    font-size: 0.78rem !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .cur-clue {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 5px !important;
    gap: 4px !important;
  }
  .cur-clue-text {
    font-size: 0.76rem !important;
    padding: 5px 8px !important;
    line-height: 1.3 !important;
  }
  .cur-nav {
    width: 32px !important;
    min-width: 32px !important;
  }
  .kb-row {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    gap: 2.5px !important;
    margin-bottom: 3px !important;
  }
  .kb-key {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: 0 !important;
    max-width: 34px !important;
    height: 38px !important;
    font-size: 0.82rem !important;
    border-radius: 6px !important;
    padding: 0 !important;
    border-width: 1.5px !important;
    box-shadow: 0 1.5px 0 #CBD5E0 !important;
  }
  .kb-key.del, .kb-key.shift {
    flex: 1.4 1 0 !important;
    max-width: 44px !important;
    font-size: 0.72rem !important;
  }

  /* 3. 3D 모바일 조작 레이아웃 */
  #control-panel {
    position: absolute;
    bottom: calc(108px + env(safe-area-inset-bottom));
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100vw;
    padding: 0 10px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    pointer-events: none;
    z-index: 20;
  }
  #virtual-dpad {
    width: 90px;
    height: 90px;
    flex-shrink: 0;
    position: relative;
    pointer-events: auto;
  }
  .dpad-btn {
    width: 28px;
    height: 28px;
    font-size: 11px;
    border-radius: 8px;
  }
  .dpad-up    { top: 0; left: 31px; }
  .dpad-down  { bottom: 0; left: 31px; }
  .dpad-left  { top: 31px; left: 0; }
  .dpad-right { top: 31px; right: 0; }
  .dpad-center { top: 31px; left: 31px; }

  #action-buttons {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-end;
    flex-shrink: 0;
    pointer-events: auto;
  }
  .action-btn {
    padding: 6px 11px;
    font-size: 0.74rem;
    border-radius: 14px;
    white-space: nowrap;
  }

  /* 3D 모바일 단서 HUD: 화면 최하단에 배치하여 3D 퍼즐판을 가리지 않음 */
  .hud-3d-bottom {
    bottom: calc(10px + env(safe-area-inset-bottom));
    gap: 6px;
    width: min(94vw, 380px);
    max-width: 94vw;
  }
  .hud-3d-clue {
    padding: 7px 12px;
    border-radius: 14px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    align-items: flex-start;
  }
  .hud-clue-badge {
    font-size: 0.7rem;
    padding: 2px 7px;
    margin-top: 1px;
    flex-shrink: 0;
  }
  .hud-clue-text {
    font-size: 0.78rem;
    line-height: 1.36;
    white-space: normal;
    word-break: keep-all;
    max-width: none;
    max-height: 3.8em;
    overflow-y: auto;
  }
  .hud-3d-actions {
    gap: 5px;
  }
  .hud-btn {
    padding: 5px 10px;
    font-size: 0.72rem;
    border-radius: 14px;
  }

  /* 3D 모바일 줌 컨트롤: 액션 버튼(점프/댄스/인사)과 겹치지 않게 약간 위쪽에 배치 */
  #zoom-controls {
    top: 36% !important;
    right: 10px !important;
    transform: translateY(-50%) !important;
    gap: 6px;
  }
  .zoom-btn {
    width: 32px;
    height: 36px;
    font-size: 13px;
    border-radius: 10px;
  }
}
/* ── 큐브 펫 모으기 (2026-09-15) ── */
.avatar-card.cube.locked {
  background: #f1f3f5;
  border-style: dashed;
}
.avatar-card.cube.locked .avatar-thumb {
  filter: brightness(0) opacity(0.28);
}
.avatar-card.cube.locked .avatar-name {
  color: #868e96;
  font-size: 12px;
}
.avatar-card.cube.locked:hover {
  transform: none;
}
.pet-progress {
  background: #fff9db;
  border: 1px solid #ffe066;
  border-radius: 12px;
  padding: 8px 10px;
  margin: 0 2px 10px;
}
.pet-progress-text {
  font-size: 12.5px;
  color: #5c3d00;
  font-weight: 600;
}
.pet-progress-text b { color: #e67700; }
.pet-progress-bar {
  height: 8px;
  background: #fff3bf;
  border-radius: 4px;
  margin-top: 6px;
  overflow: hidden;
}
.pet-progress-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #ffd43b, #fab005);
  border-radius: 4px;
}

#pet-unlock-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
#pet-unlock-overlay.open {
  opacity: 1;
  pointer-events: auto;
}
.pet-unlock-card {
  background: white;
  border-radius: 24px;
  width: 100%;
  max-width: 320px;
  padding: 22px 18px 18px;
  text-align: center;
  transform: scale(0.85);
  transition: transform 0.35s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}
#pet-unlock-overlay.open .pet-unlock-card { transform: scale(1); }
.pet-unlock-title {
  font-family: 'Jua', sans-serif;
  font-size: 22px;
  color: #1b3046;
}
.pet-unlock-thumb {
  width: 132px;
  height: 132px;
  margin: 14px auto 8px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff3bf 0%, #ffe8a3 60%, #ffd8a8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pet-pop 1.2s ease-in-out infinite;
}
.pet-unlock-thumb img { width: 96px; height: 96px; }
@keyframes pet-pop {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-6px) rotate(4deg); }
}
.pet-unlock-name {
  font-family: 'Jua', sans-serif;
  font-size: 20px;
  color: #e67700;
}
.pet-unlock-sub {
  font-size: 12px;
  color: #868e96;
  margin-top: 2px;
}
.pet-unlock-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}
.pet-unlock-actions button {
  flex: 1;
  border: none;
  border-radius: 14px;
  padding: 11px 8px;
  font-family: 'Jua', sans-serif;
  font-size: 15px;
  cursor: pointer;
}
.pet-unlock-go { background: #ff922b; color: white; box-shadow: 0 3px 0 #e8590c; }
.pet-unlock-later { background: #f1f3f5; color: #495057; }

/* 세로 단서 배지는 빨강 (가로는 기본 파랑) */
.hud-clue-badge.dir-down { background: #dc2626; }
.bubble-tag.dir-down { background: #fff5f5; color: #e03131; border-color: #ffa8a8; }
.clue-item[data-dir="down"].active { background: #fee2e2; color: #b91c1c; }

/* ── 완주 단어 카드 (2026-09-15) ── */
.modal-overlay .modal-box {
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
}
.modal-overlay .modal-box:has(.modal-words:not(:empty)) {
  max-width: 440px;
  padding: 22px 16px 18px;
}
.modal-box:has(.modal-words:not(:empty)) .modal-emoji { font-size: 2.6rem; }
.modal-box:has(.modal-words:not(:empty)) .modal-title { margin: 4px 0 4px; font-size: 1.5rem; }
.modal-box:has(.modal-words:not(:empty)) .modal-sub { margin-bottom: 10px; }
.modal-words:empty { display: none; }
.modal-words {
  text-align: left;
  margin-bottom: 14px;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.wc-head {
  font-size: 0.82rem;
  font-weight: 800;
  color: #334155;
  margin: 0 2px 6px;
}
.wc-head b { color: #e8590c; }
.wc-list {
  overflow-y: auto;
  max-height: 42vh;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #f8fafc;
  padding: 4px;
  -webkit-overflow-scrolling: touch;
}
.wc-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 7px 8px;
  border-radius: 10px;
}
.wc-row + .wc-row { border-top: 1px dashed #e2e8f0; }
.wc-row.wc-review { background: #fff4e6; }
.wc-dir {
  flex-shrink: 0;
  background: #2563eb;
  color: white;
  font-size: 0.68rem;
  font-weight: 900;
  padding: 2px 7px;
  border-radius: 9999px;
  margin-top: 2px;
  white-space: nowrap;
}
.wc-dir.dir-down { background: #dc2626; }
.wc-body { min-width: 0; }
.wc-word {
  font-family: 'Jua', sans-serif;
  font-size: 1.05rem;
  color: #0f172a;
}
.wc-mark {
  font-family: inherit;
  font-size: 0.7rem;
  color: #c2410c;
  margin-left: 2px;
  white-space: nowrap;
}
.wc-hint {
  font-size: 0.78rem;
  color: #475569;
  line-height: 1.35;
  margin-top: 1px;
  word-break: keep-all;
}

/* 완료 창 제목 가운데 (아바타 창 .modal-title 의 flex 규칙이 겹쳐 왼쪽으로 쏠리던 것) */
.modal-box .modal-title { justify-content: center; }

/* ── 다시 볼 단어장 (2026-09-15) ── */
.wordnote-entry {
  margin: 10px auto 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff4e6;
  border: 2px solid #ffc078;
  color: #d9480f;
  border-radius: 9999px;
  padding: 7px 16px;
  font-family: 'Jua', sans-serif;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 3px 0 #ffa94d;
}
.wordnote-count {
  background: #fa5252;
  color: white;
  border-radius: 9999px;
  min-width: 22px;
  padding: 1px 7px;
  font-size: 12px;
  font-family: system-ui, sans-serif;
  font-weight: 800;
}
#wordnote-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(4px);
  z-index: 250;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
#wordnote-overlay.open { opacity: 1; pointer-events: auto; }
.wn-card {
  background: white;
  border-radius: 24px;
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 24px);
  display: flex;
  flex-direction: column;
  padding: 18px 16px 14px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.25);
}
.wn-card .modal-header { margin-bottom: 8px; }
.wn-summary {
  font-size: 13px;
  color: #475569;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.wn-summary b { color: #e8590c; }
.wn-chips {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 10px 0 8px;
  scrollbar-width: none;
}
.wn-chips::-webkit-scrollbar { display: none; }
.wn-chip {
  flex-shrink: 0;
  border: 1.5px solid #dee2e6;
  background: #f8f9fa;
  color: #495057;
  border-radius: 9999px;
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.wn-chip b { color: #e8590c; margin-left: 2px; }
.wn-chip.active { background: #1b3046; border-color: #1b3046; color: white; }
.wn-chip.active b { color: #ffd43b; }
.wn-list {
  overflow-y: auto;
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 2px;
  -webkit-overflow-scrolling: touch;
}
.wn-item {
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  padding: 10px 11px;
  background: #f8fafc;
  transition: background 0.3s, border-color 0.3s, opacity 0.3s;
}
.wn-item.solved { background: #dcfce7; border-color: #4ade80; opacity: 0.6; }
.wn-item.resolved { background: #f1f5f9; }
.wn-item.shake { animation: cellShake 0.45s ease-in-out; border-color: #fca5a5; }
.wn-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 11.5px;
}
.wn-src { color: #64748b; font-weight: 600; }
.wn-tag {
  margin-left: auto;
  font-size: 11px;
  font-weight: 800;
  padding: 1px 7px;
  border-radius: 9999px;
  white-space: nowrap;
}
.wn-tag.wrong { background: #ffe3e3; color: #c92a2a; }
.wn-tag.hint { background: #fff3bf; color: #b45309; }
.wn-tag.done { background: #d3f9d8; color: #2b8a3e; }
.wn-hint {
  margin: 6px 0 8px;
  font-size: 14px;
  color: #1e293b;
  font-weight: 600;
  line-height: 1.4;
  word-break: keep-all;
}
.wn-answer-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.wn-boxes { display: inline-flex; gap: 2px; flex-shrink: 0; }
.wn-boxes i {
  width: 10px;
  height: 10px;
  border: 1.5px solid #94a3b8;
  border-radius: 2px;
  background: white;
}
.wn-input {
  flex: 1;
  min-width: 0;
  border: 2px solid #cbd5e1;
  border-radius: 10px;
  padding: 7px 10px;
  font-size: 16px;
  font-family: 'Jua', sans-serif;
  outline: none;
}
.wn-input:focus { border-color: #3b82f6; }
.wn-ok {
  flex-shrink: 0;
  background: #2563eb;
  color: white;
  border: none;
  border-radius: 10px;
  padding: 8px 14px;
  font-family: 'Jua', sans-serif;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 3px 0 #1d4ed8;
}
.wn-sub-row { margin-top: 6px; font-size: 12px; }
.wn-link {
  background: none;
  border: none;
  color: #64748b;
  text-decoration: underline;
  font-size: 12px;
  cursor: pointer;
  padding: 0;
}
.wn-peek { color: #475569; }
.wn-peek b { color: #d9480f; font-family: 'Jua', sans-serif; font-size: 14px; }
.wn-word { font-family: 'Jua', sans-serif; font-size: 17px; color: #2b8a3e; flex: 1; }
.wn-del {
  background: #f1f3f5;
  border: none;
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 12px;
  color: #868e96;
  cursor: pointer;
}
.wn-empty {
  text-align: center;
  color: #64748b;
  font-size: 14px;
  line-height: 1.6;
  padding: 36px 10px;
}
.wn-foot {
  font-size: 11px;
  color: #94a3b8;
  text-align: center;
  margin-top: 8px;
}
.wn-card .modal-header, .wn-summary, .wn-chips, .wn-foot { flex-shrink: 0; }

/* 포털(메인)로 가는 집 버튼 — 로고 왼쪽 */
.cw-home-btn {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(255,255,255,0.15);
  font-size: 18px;
  text-decoration: none;
  margin-right: 2px;
  transition: background 0.15s;
}
.cw-home-btn:hover { background: rgba(255,255,255,0.3); }
@media (max-width: 700px) {
  .cw-home-btn { width: 28px; height: 28px; font-size: 15px; border-radius: 8px; }
}
@media (max-width: 700px) {
  /* 게임 중 폰 헤더: 🏠 버튼이 생겨 자리가 모자라므로 🧩 로고는 숨김 (목록은 「← 목록」 버튼으로) */
  body.in-game-3d .cw-logo { display: none !important; }
}

/* ── 스테이지 지도 (시안 2026-09-15) ── */
.puzzle-grid.stage-map-mode { display: block; }
.sm-head {
  max-width: 480px; margin: 0 auto 10px; background: #fff; border-radius: 18px;
  padding: 12px 16px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); text-align: center;
}
.sm-title { font-family: 'Black Han Sans', sans-serif; font-size: 1.35rem; color: #2f6b1f; }
.sm-meta { font-size: 0.85rem; color: #475569; font-weight: 700; margin-top: 2px; }
.sm-meta b { color: #e67700; }
.sm-bar { height: 8px; background: #edf2e6; border-radius: 4px; margin-top: 8px; overflow: hidden; }
.sm-bar span { display: block; height: 100%; background: linear-gradient(90deg, #8ce99a, #40c057); border-radius: 4px; }
.sm-scroll {
  max-width: 480px; margin: 0 auto; height: min(68vh, 640px); overflow-y: auto;
  border-radius: 22px; box-shadow: inset 0 0 0 3px rgba(255,255,255,0.7), 0 6px 18px rgba(0,0,0,0.12);
  -webkit-overflow-scrolling: touch; background: #dff3cf;
}


.sm-band + 
.sm-sign {
  position: absolute; bottom: 12px; left: 10px; background: #fffdf5; border: 2px solid #c9a27a;
  border-radius: 10px; padding: 4px 9px; box-shadow: 0 3px 0 #a47a52; display: flex; flex-direction: column;
  line-height: 1.2; z-index: 3;
}
.sm-sign b { font-family: 'Jua', sans-serif; font-size: 14px; color: #5c3d1e; font-weight: normal; }
.sm-sign span { font-size: 10.5px; color: #8a6a4a; font-weight: 700; }
.sm-path { position: absolute; left: 0; top: 0; width: 100%; z-index: 1; overflow: visible; }
.sm-path-all { fill: none; stroke: #fff; stroke-width: 14; stroke-linecap: round; stroke-dasharray: 2 18; opacity: 0.95; }
.sm-path-done { fill: none; stroke: #d9a45b; stroke-width: 12; stroke-linecap: round; opacity: 0.9; }
.sm-deco { position: absolute; font-size: 22px; transform: translate(-50%, -50%); z-index: 2; pointer-events: none; opacity: 0.9; }
.sm-start {
  position: absolute; left: 50%; transform: translateX(-50%); font-family: 'Jua', sans-serif;
  font-size: 13px; color: #5c3d1e; background: #fffdf5; padding: 2px 10px; border-radius: 10px; z-index: 3;
}
.sm-node {
  position: absolute; transform: translate(-50%, -50%); background: none; border: none; padding: 0;
  cursor: pointer; z-index: 4; display: flex; flex-direction: column; align-items: center;
  -webkit-tap-highlight-color: transparent;
}

.sm-node:active 
.sm-num { font-family: 'Black Han Sans', sans-serif; font-size: 20px; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,0.25); }
.sm-node.done 
.sm-node.locked 
.sm-node.locked .sm-num { font-size: 18px; text-shadow: none; }
.sm-node.cur 
@keyframes sm-glow {
  0%, 100% { box-shadow: 0 9px 0 #8a5a33, 0 0 0 0 rgba(255,212,59,0.0); }
  50% { box-shadow: 0 9px 0 #8a5a33, 0 0 0 10px rgba(255,212,59,0.55); }
}
.sm-node.boss 
.sm-node.boss .sm-num { font-size: 30px; }
.sm-boss-label {
  margin-top: 12px; font-family: 'Jua', sans-serif; font-size: 12px; color: #7048e8;
  background: #fff; padding: 1px 8px; border-radius: 8px;
}
.sm-stars { margin-top: 11px; display: flex; gap: 1px; background: rgba(255,255,255,0.85); border-radius: 8px; padding: 0 4px; }
.sm-stars i { font-style: normal; font-size: 12px; color: #ced4da; }
.sm-stars i.on { color: #fab005; }
.sm-pet {
  position: absolute; bottom: 38px; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;
  font-size: 34px; animation: sm-hop 0.9s ease-in-out infinite; filter: drop-shadow(0 4px 3px rgba(0,0,0,0.25));
}
.sm-pet img { width: 46px; height: 46px; }
@keyframes sm-hop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* 3D 스테이지 지도 */
.sm3d {
  position: relative; max-width: 520px; margin: 0 auto; height: min(70vh, 660px);
  border-radius: 24px; overflow: hidden;
  background: linear-gradient(180deg, #8fd3ff 0%, #c9ecff 55%, #e8f7ff 100%);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,0.7), 0 8px 22px rgba(0,0,0,0.15);
}
.sm3d canvas { display: block; width: 100%; height: 100%; }
.sm3d-hint {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 2;
  background: rgba(15,23,42,0.55); color: #fff; font-size: 12px; font-weight: 700;
  padding: 4px 12px; border-radius: 999px; pointer-events: none; white-space: nowrap;
}

/* ── 🏝️ 내 섬 키우기 (시안 2026-09-15) ── */

















/* 🎁 아이템 (2026-09-18) */
.item-bag-btn.empty { opacity: 0.55; }
.cell .cell-item { position: absolute; right: 2px; bottom: 1px; font-size: 13px; line-height: 1; pointer-events: none; }
.cell.white { position: relative; }

/* 🎒 아이템 가방 창 (2026-09-18) */
#item-modal-overlay { position: fixed; inset: 0; background: rgba(15,23,42,0.45); display: none; align-items: center; justify-content: center; z-index: 210; }
#item-modal-overlay.open { display: flex; }
.item-modal-card { background: #fff; border-radius: 20px; padding: 18px; width: min(420px, 92vw); max-height: 80vh; overflow: auto; box-shadow: 0 18px 50px rgba(0,0,0,0.25); }
.item-modal-head { display: flex; align-items: center; justify-content: space-between; font-weight: 800; font-size: 1.1rem; margin-bottom: 12px; }
.item-modal-x { border: none; background: #f1f5f9; border-radius: 10px; width: 32px; height: 32px; cursor: pointer; font-size: 15px; }
.item-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 2px solid #eef2f7; border-radius: 16px; margin-bottom: 8px; background: #fff; transition: all 0.2s ease; }
.item-row.unowned { background: #fff; border-color: #f1f5f9; }
.item-ico { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; flex-shrink: 0; background: #f1f5f9; border-radius: 14px; }
.item-thumb { width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.18)); }
.item-info { flex: 1; display: flex; flex-direction: column; }
.item-title-row { display: flex; align-items: center; gap: 6px; }
.item-name { color: #0f172a; font-size: 15px; font-weight: 800; }
.item-count-badge { font-size: 12px; font-weight: 800; color: #64748b; background: #f1f5f9; padding: 2px 7px; border-radius: 999px; }
.item-count-badge.has { color: #2563eb; background: #eff6ff; }
.item-desc-text { font-size: 12.5px; color: #475569; line-height: 1.4; margin-top: 2px; font-weight: 500; }
.item-action { flex-shrink: 0; }
.item-use { border: none; background: #2563eb; color: #fff; font-weight: 800; font-size: 13px; border-radius: 12px; padding: 8px 14px; cursor: pointer; transition: transform 0.1s; }
.item-use:active { transform: scale(0.94); }
.item-use.off { background: #e2e8f0; color: #94a3b8; cursor: default; }
.item-use.passive-badge { background: #10b981; color: #fff; cursor: default; font-size: 12px; padding: 6px 10px; }
.item-use.open-box { background: #f59e0b; color: #fff; }
.item-empty { text-align: center; color: #94a3b8; padding: 26px 0; line-height: 1.7; }
.item-modal-foot { color: #94a3b8; font-size: 12px; text-align: center; margin-top: 6px; }

/* 보물을 얻었을 때 화면 가운데에 펼쳐지는 연출 (깜빡이는 효과 없이 천천히 떠오르기만) */
#treasure-reveal { position: fixed; inset: 0; z-index: 10050; display: flex; align-items: center; justify-content: center; padding: 20px; background: radial-gradient(circle at 50% 42%, rgba(60,38,110,0.86), rgba(14,9,32,0.93)); opacity: 0; transition: opacity 0.26s ease; cursor: pointer; }
#treasure-reveal.open { opacity: 1; }
.treasure-reveal-card { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 420px; transform: translateY(14px) scale(0.94); transition: transform 0.7s cubic-bezier(0.2, 0.9, 0.25, 1); }
#treasure-reveal.open .treasure-reveal-card { transform: none; }
.treasure-reveal-art { position: relative; width: min(250px, 58vw); aspect-ratio: 1; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.treasure-reveal-art::before { content: ''; position: absolute; inset: -22%; border-radius: 50%; background: radial-gradient(circle, rgba(255,231,170,0.5) 0%, rgba(178,140,255,0.26) 38%, rgba(178,140,255,0) 70%); }
.treasure-reveal-art img { position: relative; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 14px 26px rgba(0,0,0,0.5)); animation: treasure-float 5s ease-in-out infinite; pointer-events: none; user-select: none; -webkit-user-drag: none; }
@keyframes treasure-float { 0%, 100% { transform: translateY(-6px); } 50% { transform: translateY(6px); } }
.treasure-reveal-name { color: #ffe9b0; font-size: clamp(1.25rem, 5vw, 1.6rem); font-weight: 900; letter-spacing: 0.02em; text-shadow: 0 2px 14px rgba(255,205,110,0.4); }
.treasure-reveal-msg { margin: 12px 0 0; color: #efe8ff; font-size: clamp(0.98rem, 3.8vw, 1.12rem); line-height: 1.65; font-weight: 600; word-break: keep-all; }
.treasure-reveal-foot { margin-top: 22px; color: #b9aadb; font-size: 0.78rem; font-weight: 700; }

/* 히든 스테이지: 시간 표시 · 아이템과 광고 힌트 숨김 · 완료 창의 기록 */
/* 시계는 화면 위 가운데, 맵 이름 바로 아래 (사용자 2026-10-02: 오른쪽 구석은 눈에 안 띈다) */
#hidden-timer { position: fixed; top: 58px; left: 50%; transform: translateX(-50%); z-index: 1150; display: flex; align-items: center; gap: 9px;
  padding: 5px 18px 5px 6px; border-radius: 999px; white-space: nowrap;
  background: linear-gradient(180deg, #33274f 0%, #1a1329 55%, #120d1d 100%); border: 2px solid #e6c46e;
  box-shadow: 0 0 0 2px #130d1e, 0 0 0 3.5px rgba(230,196,110,0.5), 0 8px 18px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -6px 12px rgba(0,0,0,0.35); }
#hidden-timer .ht-ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-style: normal; font-size: 1rem; line-height: 1;
  background: radial-gradient(circle at 35% 30%, #fff3c4 0%, #f0c95e 45%, #b8862a 100%); box-shadow: inset 0 -2px 3px rgba(90,55,0,0.45), 0 1px 2px rgba(0,0,0,0.5); }
#hidden-timer .ht-time { font-size: 1.3rem; font-weight: 900; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; color: #fff4d6;
  text-shadow: 0 1px 0 #000, 0 0 10px rgba(255,204,120,0.6); }
@media (max-width: 480px) { #hidden-timer .ht-time { font-size: 1.15rem; } #hidden-timer .ht-ico { width: 26px; height: 26px; font-size: 0.9rem; } }
#hidden-timer[hidden] { display: none; }
body.hidden-stage #toast { margin-top: var(--hidden-toast-shift, 60px); }
body.hidden-stage:not(.in-game-3d) #view-2d { padding-top: 64px; }   /* 타임어택 2D: 시계가 가로·세로 버튼을 가리지 않게 판을 내린다 */   /* 타임어택: 알림 띠가 시계를 가리지 않게 한 줄 아래로 */
body.hidden-stage .ad-btn, body.hidden-stage .item-bag-btn, body.hidden-stage #item-bag-header { display: none !important; }
#hidden-choice { position: fixed; inset: 0; z-index: 10040; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(24,14,48,0.72); }
.hidden-choice-card { display: flex; flex-direction: column; gap: 12px; width: min(340px, 100%); }
.hidden-choice-card button { display: flex; flex-direction: column; gap: 4px; align-items: center; padding: 18px 16px; border: none; border-radius: 20px; background: #fff; color: #3b2a63; font: inherit; cursor: pointer; box-shadow: 0 10px 26px rgba(0,0,0,0.3); }
.hidden-choice-card button:active { transform: scale(0.97); }
.hidden-choice-card b { font-size: 1.08rem; font-weight: 900; }
.hidden-choice-card small { font-size: 0.8rem; font-weight: 600; color: #7a6c96; }
.hidden-clear-time { margin-top: 10px; font-size: 1.25rem; font-weight: 900; color: #5b2fa8; font-variant-numeric: tabular-nums; }
.hidden-clear-rank { margin-top: 4px; min-height: 1.2em; font-size: 0.92rem; font-weight: 800; color: #7c3aed; }
.hidden-choice-card button.hidden-choice-rank { padding: 13px 16px; background: rgba(255,255,255,0.14); color: #fff; box-shadow: none; border: 1.5px solid rgba(255,255,255,0.45); }
.hidden-choice-card button.hidden-choice-rank small { color: rgba(255,255,255,0.78); }
/* 타임어택 순위표 (2026-10-02) */
#hidden-rank { position: fixed; inset: 0; z-index: 10045; display: flex; align-items: center; justify-content: center; padding: 18px; background: rgba(24,14,48,0.72); }
.hidden-rank-card { display: flex; flex-direction: column; width: min(380px, 100%); max-height: min(78vh, 620px); padding: 18px 16px 14px; border-radius: 22px; background: #fff; color: #3b2a63; box-shadow: 0 16px 40px rgba(20,8,50,0.4); }
.hidden-rank-card h3 { margin: 0 0 10px; text-align: center; font-size: 1.12rem; font-weight: 900; }
.hidden-rank-body { flex: 1; min-height: 120px; overflow-y: auto; }
.hidden-rank-note { margin: 34px 8px; text-align: center; font-size: 0.92rem; font-weight: 700; color: #7a6c96; line-height: 1.5; }
.hidden-rank-body ol { list-style: none; margin: 0; padding: 0; }
.hidden-rank-body li { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 12px; font-size: 0.95rem; }
.hidden-rank-body li:nth-child(odd) { background: #f6f2ff; }
.hidden-rank-body li.me { background: #efe3ff; box-shadow: inset 0 0 0 2px #a67cf0; }
.hidden-rank-mine { margin-top: 8px !important; padding-top: 8px !important; border-top: 1px dashed #cdbff0; }
.hr-rank { flex: none; width: 2.2em; text-align: center; font-weight: 900; color: #5b2fa8; font-variant-numeric: tabular-nums; }
.hr-avatar { flex: none; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; overflow: hidden; border-radius: 50%; }
.hr-avatar img { width: 100%; height: 100%; object-fit: cover; }
.hr-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.hr-time { flex: none; font-weight: 900; font-variant-numeric: tabular-nums; }
.hidden-rank-close { margin-top: 12px; padding: 12px; border: none; border-radius: 14px; background: #6d3fd6; color: #fff; font: inherit; font-weight: 900; cursor: pointer; }
.hidden-clear-map { margin-top: 6px; font-size: 0.85rem; font-weight: 700; color: #7c3aed; line-height: 1.45; }

/* 가방 탭: 아이템 / 보물 */
.item-modal-tabs { display: flex; gap: 4px; padding: 4px; margin-bottom: 12px; background: #f1f5f9; border-radius: 14px; }
.item-modal-tabs[hidden], .item-list[hidden], .treasure-list[hidden] { display: none; }
.item-modal-tab { flex: 1; border: none; background: transparent; color: #64748b; font: inherit; font-weight: 800; font-size: 14px; padding: 9px 6px; border-radius: 11px; cursor: pointer; }
.item-modal-tab.active { background: #fff; color: #0f172a; box-shadow: 0 2px 6px rgba(15,23,42,0.1); }
.treasure-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
.treasure-slot { min-height: 128px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 8px 4px; border: 2px solid #eee4fb; border-radius: 16px; background: #faf5ff; }
.treasure-slot img { width: 80px; height: 80px; object-fit: contain; pointer-events: none; user-select: none; -webkit-user-drag: none; filter: drop-shadow(0 4px 8px rgba(91,33,182,0.22)); }
.treasure-slot strong { color: #4c1d95; font-size: 11.5px; text-align: center; line-height: 1.25; }

/* 칸 고르는 중 안내 막대 */
#item-pick-bar { position: fixed; left: 50%; transform: translateX(-50%); top: 96px; display: none; align-items: center; gap: 12px;
  background: rgba(15,23,42,0.9); color: #fff; padding: 10px 16px; border-radius: 999px; z-index: 205; font-weight: 700; font-size: 14px; box-shadow: 0 8px 24px rgba(0,0,0,0.25); }
#item-pick-bar button { border: none; background: #fbbf24; color: #3b1300; font-weight: 800; border-radius: 999px; padding: 6px 12px; cursor: pointer; }
body.item-picking .cell.white:not(.correct):not(.given) { outline: 2px dashed #fbbf24; outline-offset: -3px; cursor: crosshair; }

.item-bag-ico { vertical-align: -4px; }
.item-bag-btn .item-bag-count { font-weight: 800; margin-left: 2px; }

/* 2D 퍼즐판 내 아이템 아이콘 및 초성 힌트 */
.cell .cell-item.cell-item-2d { right: 0; bottom: 0; width: 22px; height: 22px; }
.cell-item-img { width: 20px; height: 20px; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)); animation: bounceItem 2.4s infinite ease-in-out; }
@keyframes bounceItem {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-3px) scale(1.08); }
}

.cell.white.has-chosung-hint {
  background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%) !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.45);
}
.cell .cell-chosung-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.45rem;
  font-weight: 900;
  color: #0284c7;
  pointer-events: none;
  animation: pulseChosung 1.6s infinite alternate ease-in-out;
  text-shadow: 0 0 6px #ffffff, 0 0 10px #ffffff;
}
@keyframes pulseChosung {
  from { transform: scale(0.95); opacity: 0.85; }
  to { transform: scale(1.08); opacity: 1; }
}

/* 주사위 롤링 모달 */
#dice-roll-overlay { position: fixed; inset: 0; background: rgba(15,23,42,0.6); display: none; align-items: center; justify-content: center; z-index: 300; }
.dice-box { background: #fff; border-radius: 24px; padding: 26px 40px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,0.35); animation: popScale 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.dice-display { font-size: 48px; font-weight: 900; color: #e11d48; margin-bottom: 6px; }
.dice-msg { font-size: 14px; font-weight: 700; color: #475569; }
@keyframes popScale { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* 별 기록이 없는 판 (2026-09-18) */
.sm-stars.none i { color: #cbd5e1; opacity: .8; }

/* 퍼즐 카드: 푼 판은 얻은 별, 안 푼 판은 난이도 (2026-09-18) */
.pc-star-earned { color: #f59e0b; letter-spacing: 1px; font-size: 15px; }
.pc-star-earned .pc-star-off { color: #d9dee6; }
.pc-star-earned.none { color: #d9dee6; }


/* Dashboard / Quest Board Styles (Restored and Upgraded) */
.my-island { max-width: 500px; margin: 24px auto; padding: 0 16px; }
.isl-card {
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 28px;
  padding: 20px 24px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.1), inset 0 0 16px rgba(255,255,255,0.6);
  display: flex; flex-direction: column; gap: 8px;
  text-align: center;
}
.isl-head { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 8px; }
.isl-title { font-family: 'Black Han Sans', sans-serif; font-size: 1.6rem; color: #1e293b; text-shadow: 0 2px 4px rgba(255,255,255,0.8); }
.isl-title small { font-family: 'Jua', sans-serif; font-size: 1.1rem; color: #475569; margin-left: 6px; }
.isl-count { font-size: 1.1rem; font-weight: 800; color: #0f172a; background: rgba(255,255,255,0.7); padding: 6px 16px; border-radius: 99px; box-shadow: 0 2px 6px rgba(0,0,0,0.05); }
.isl-count b { color: #f59e0b; font-size: 1.3rem; margin: 0 2px; }
.isl-3d { display: none; }
.isl-3d canvas { display: block; width: 100%; height: 100%; }
.isl-zone { font-family: 'Jua', sans-serif; font-size: 1.2rem; color: #0f172a; margin: 4px 0 12px 0; display: flex; justify-content: center; align-items: center; gap: 6px; }
.isl-zone b { color: #0284c7; }
.isl-next {
  background: rgba(255,255,255,0.9);
  border-radius: 20px; padding: 14px;
  font-size: 1.05rem; font-weight: 700; color: #475569;
  box-shadow: 0 6px 12px rgba(0,0,0,0.05);
}
.isl-next b { color: #e11d48; }
.isl-bar { height: 12px; background: #e2e8f0; border-radius: 6px; margin-top: 10px; overflow: hidden; box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); }
.isl-bar span { display: block; height: 100%; background: linear-gradient(90deg, #fcd34d, #f59e0b); border-radius: 6px; transition: width 0.3s; }


/* Custom Resource Bar */
.cw-resource-bar {
  display: flex; align-items: center;
  background: linear-gradient(180deg, #38bdf8 0%, #0369a1 100%);
  border: 3px solid #fbbf24;
  border-radius: 99px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.2), inset 0 3px 6px rgba(255,255,255,0.4), 0 0 0 1px #b45309;
  height: 40px;
  margin-left: 18px;
  position: relative;
  min-width: 130px;
}
.res-star-btn {
  background: none; border: none; padding: 0; margin: 0;
  position: absolute; left: -14px; top: 50%; transform: translateY(-50%);
  cursor: pointer; transition: transform 0.1s; z-index: 2;
}
.res-star-btn:active { transform: translateY(-50%) scale(0.9); }
.res-star-btn img { height: 46px; filter: drop-shadow(0 3px 5px rgba(0,0,0,0.4)); } filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3)); }

.res-amount {
  flex: 1; text-align: center;
  font-family: 'Black Han Sans', sans-serif;
  color: #ffffff; font-size: 1.2rem;
  text-shadow: 0 2px 3px rgba(0,0,0,0.6);
  padding: 0 24px 0 28px;
  letter-spacing: 1px;
}

.res-plus-btn {
  background: none; border: none; padding: 0; margin: 0;
  position: absolute; right: -10px; top: 50%; transform: translateY(-50%);
  cursor: pointer; transition: transform 0.1s; z-index: 2;
}
.res-plus-btn:active { transform: translateY(-50%) scale(0.9); }
.res-plus-btn img { height: 40px; filter: drop-shadow(0 3px 5px rgba(0,0,0,0.4)); } filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3)); }


/* Upgraded Center Header Buttons */
.mode-toggle-btn {
  background: linear-gradient(180deg, #60a5fa 0%, #2563eb 100%);
  color: #fff; border: 2px solid #60a5fa;
  border-radius: 99px; padding: 6px 16px;
  font-family: 'Black Han Sans', sans-serif; font-size: 1rem;
  cursor: pointer; display: flex; align-items: center; gap: 6px; white-space: nowrap; flex-shrink: 0;
  box-shadow: 0 4px 0 #1e3a8a, 0 6px 12px rgba(37,99,235,0.4), inset 0 2px 4px rgba(255,255,255,0.4);
  transition: transform 0.1s;
  height: 40px;
}
.mode-toggle-btn:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 #1e3a8a, 0 2px 4px rgba(37,99,235,0.4);
}
.mode-toggle-btn.is-2d {
  background: linear-gradient(180deg, #34d399 0%, #059669 100%);
  border: 2px solid #6ee7b7;
  box-shadow: 0 4px 0 #064e3b, 0 6px 12px rgba(5,150,105,0.4), inset 0 2px 4px rgba(255,255,255,0.4);
}
.mode-toggle-btn.is-2d:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 #064e3b, 0 2px 4px rgba(5,150,105,0.4);
}

.avatar-btn, .theme-btn {
  background: linear-gradient(180deg, #ffffff 0%, #e0f2fe 100%);
  border-radius: 16px;
  border: 2px solid #bae6fd;
  padding: 0 14px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px; white-space: nowrap; flex-shrink: 0;
  box-shadow: 0 4px 0 #94a3b8, 0 6px 10px rgba(0,0,0,0.1), inset 0 2px 4px rgba(255,255,255,0.8);
  cursor: pointer;
  font-family: 'Black Han Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #0f172a;
  transition: transform 0.1s;
}
.avatar-btn:active, .theme-btn:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 #94a3b8, 0 2px 4px rgba(0,0,0,0.1);
}


/* Settings Modal */
#settings-modal-overlay {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
  background: rgba(0,20,40,0.6);
  backdrop-filter: blur(4px);
  z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.25s;
}
#settings-modal-overlay.open {
  opacity: 1; pointer-events: auto;
}
.settings-modal-card {
  background: white; border-radius: 24px;
  width: 90%; max-width: 360px;
  display: flex; flex-direction: column; padding: 22px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.25), 0 0 0 1px rgba(255,255,255,0.8);
  transform: scale(0.92); transition: transform 0.25s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
#settings-modal-overlay.open .settings-modal-card {
  transform: scale(1);
}
.settings-menu-list {
  display: flex; flex-direction: column; gap: 12px; margin-top: 10px;
}
.settings-menu-btn {
  background: #f8f9fa; border: 2px solid #e9ecef;
  border-radius: 16px; padding: 16px 20px;
  display: flex; align-items: center; gap: 14px;
  cursor: pointer; transition: all 0.2s;
  font-family: 'Black Han Sans', sans-serif;
  font-size: 1.1rem; color: #1b3046;
  text-align: left;
}
.settings-menu-btn:hover {
  transform: translateY(-2px); border-color: #74c0fc; background: #f1f9ff;
}
.settings-menu-btn:active {
  transform: translateY(2px);
}
.settings-menu-btn .sm-icon {
  font-size: 1.5rem;
}

@media (max-width: 520px) {
  body.in-game-3d .cw-game-back { width:24px; height:24px; flex-basis:24px; }
  body.in-game-3d .cw-game-back img { width:30px; height:52px; }
  body.in-game-3d .cw-header { padding: 4px 4px !important; gap: 2px !important; }
  body.in-game-3d .cw-home-btn .header-icon-img { width: 24px !important; height: 24px !important; }
  body.in-game-3d .cw-resource-wrap { margin-left: 2px; }
  body.in-game-3d .cw-score-toggle { width: 92px; height: 32px; gap: 3px; padding: 2px 5px 2px 2px; }
  body.in-game-3d .cw-score-toggle img { width: 24px; height: 24px; }
  body.in-game-3d .cw-score-copy small { display: block; font-size: 7px; }
  body.in-game-3d .cw-score-copy strong { font-size: 15px; }
  body.in-game-3d .cw-score-chevron { font-size: 11px; }
  body.in-game-3d .cw-header-center { gap: 1px !important; }
  body.in-game-3d .cw-header-center .header-icon-img,
  body.in-game-3d #mode-toggle-img { width: 23px !important; height: 23px !important; object-fit: contain; }
  body.in-game-3d .game-sub-header { top: 0; height: 36px; }
  body.in-game-3d .game-title-info { top: 3px; left: 50%; gap: 3px; padding: 3px 5px; border-radius: 14px; }
  body.in-game-3d .stage-record-image { width: 22px; height: 22px; }
  body.in-game-3d .game-main-title { font-size: .66rem !important; }
  body.in-game-3d .game-reward-tag { gap: 2px; }
  body.in-game-3d .stage-stars { gap: 0; }
  body.in-game-3d .stage-stars img { width: 10px; height: 10px; }
  body.in-game-3d .stage-mistakes { font-size: .5rem; padding: 1px 3px; }
}

/* 전체음 · 배경음 · 효과음 개별 믹서 */
#sound-settings-overlay {
  position: fixed; inset: 0; z-index: 10020;
  display: flex; align-items: center; justify-content: center;
  padding: 18px; background: rgba(0,20,40,.62); backdrop-filter: blur(5px);
  opacity: 0; pointer-events: none; transition: opacity .22s ease;
}
#sound-settings-overlay.open { opacity: 1; pointer-events: auto; }
.sound-settings-card {
  width: min(100%, 390px); padding: 22px; border-radius: 24px; background: #fff;
  box-shadow: 0 20px 40px rgba(0,0,0,.28); transform: scale(.92);
  transition: transform .25s cubic-bezier(.18,.89,.32,1.28);
}
#sound-settings-overlay.open .sound-settings-card { transform: scale(1); }
.sound-settings-desc { margin: 2px 0 14px; color: #64748b; font-size: 13px; font-weight: 700; }
.sound-mixer-list { display: flex; flex-direction: column; gap: 10px; }
.sound-mixer-row { padding: 13px 14px 11px; border: 2px solid #e6edf7; border-radius: 16px; background: #f8fbff; }
.sound-mixer-heading { display: flex; align-items: center; gap: 9px; }
.sound-mixer-heading > div { display: flex; min-width: 0; flex: 1; flex-direction: column; line-height: 1.15; }
.sound-mixer-heading strong { color: #1e293b; font-family: 'Black Han Sans', sans-serif; font-size: 1rem; font-weight: 400; }
.sound-mixer-heading small { color: #16a34a; font-size: 11px; font-weight: 800; margin-top: 3px; }
.sound-mixer-heading small.off { color: #94a3b8; }
.sound-mixer-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; background: #e0f2fe; font-size: 18px; }
.sound-volume-line { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.sound-volume-line input { min-width: 0; flex: 1; accent-color: #3478f6; cursor: pointer; }
.sound-volume-line input:disabled { cursor: default; opacity: .4; }
.sound-volume-line b { width: 39px; color: #334155; font-size: 12px; text-align: right; }
.sound-switch { width: 46px; height: 26px; position: relative; flex: 0 0 auto; cursor: pointer; }
.sound-switch input { width: 0; height: 0; opacity: 0; }
.sound-switch span { position: absolute; inset: 0; border-radius: 30px; background: #cbd5e1; transition: .18s; }
.sound-switch span::after { content: ''; position: absolute; width: 20px; height: 20px; left: 3px; top: 3px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: .18s; }
.sound-switch input:checked + span { background: #22c55e; }
.sound-switch input:checked + span::after { transform: translateX(20px); }
.sound-settings-note { margin-top: 13px; padding: 9px 11px; border-radius: 10px; color: #64748b; background: #f1f5f9; font-size: 11px; font-weight: 700; }

/* =========================================================
   🏆 실시간 랭킹 & 듀오링고식 30명 주간 스타 리그 모달 스타일
   ========================================================= */
#ranking-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  padding: 12px;
}

#ranking-modal.show {
  opacity: 1;
  pointer-events: auto;
}

.ranking-modal-card {
  background: #ffffff;
  width: 100%;
  max-width: 440px;
  height: 85vh;
  max-height: 680px;
  border-radius: 26px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.5);
  transform: scale(0.92);
  transition: transform 0.25s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

#ranking-modal.show .ranking-modal-card {
  transform: scale(1);
}

/* 모달 헤더 */
.ranking-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px 10px;
  background: #ffffff;
  border-bottom: 1px solid #f1f5f9;
}

.ranking-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ranking-header-icon {
  font-size: 1.5rem;
  filter: drop-shadow(0 2px 4px rgba(245, 158, 11, 0.4));
}

.ranking-header-title {
  font-family: 'Jua', 'Black Han Sans', sans-serif;
  font-size: 1.25rem;
  color: #1e293b;
  letter-spacing: -0.5px;
}

/* 탭 버튼 */
.ranking-tab-bar {
  display: flex;
  background: #f1f5f9;
  padding: 4px;
  margin: 10px 16px 8px;
  border-radius: 14px;
  gap: 4px;
}

.rank-tab-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 4px;
  background: transparent;
  border: none;
  border-radius: 11px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #64748b;
}

.rank-tab-btn .tab-title {
  font-family: 'Noto Sans KR', sans-serif;
  font-weight: 800;
  font-size: 0.92rem;
}

.rank-tab-btn .tab-sub-tag {
  font-size: 0.72rem;
  font-weight: 600;
  opacity: 0.8;
  margin-top: 1px;
}

.rank-tab-btn.active {
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.rank-tab-btn.active .tab-title {
  color: #2563eb;
}

/* 스크롤 가능한 본문 영역 */
.ranking-content-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 16px 12px;
  display: flex;
  flex-direction: column;
}

/* 주간 리그 배너 */
.weekly-header-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-radius: 18px;
  color: #ffffff;
  margin-bottom: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.tier-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tier-badge-icon {
  font-size: 1.8rem;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.tier-title {
  font-family: 'Black Han Sans', sans-serif;
  font-size: 1.15rem;
  letter-spacing: -0.3px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.tier-subtitle {
  font-size: 0.75rem;
  font-weight: 700;
  opacity: 0.9;
}

.season-timer-badge {
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(4px);
  padding: 5px 9px;
  border-radius: 12px;
  font-size: 0.76rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 4px;
  letter-spacing: -0.2px;
}

/* 승급/안전/강등 룰 바 */
.zone-legend-bar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 6px 10px;
  margin-bottom: 10px;
}

.legend-item {
  font-size: 0.75rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 4px;
}

.legend-item.promo { color: #16a34a; }
.legend-item.safe { color: #64748b; }
.legend-item.demo { color: #dc2626; }

.legend-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.legend-dot.promo { background: #22c55e; }
.legend-dot.safe { background: #94a3b8; }
.legend-dot.demo { background: #ef4444; }

/* 랭킹 스크롤 리스트 */
.ranking-scroll-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.rank-item {
  display: flex;
  align-items: center;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 8px 12px;
  transition: all 0.15s ease;
}

.rank-item.is-current-user {
  background: #eff6ff;
  border: 2px solid #3b82f6;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.18);
}

.rank-item.zone-promo {
  border-left: 4px solid #22c55e;
}
.rank-item.zone-demo {
  border-left: 4px solid #ef4444;
}

.rank-pos-col {
  width: 38px;
  font-weight: 900;
  text-align: center;
  flex-shrink: 0;
}

.rank-num {
  font-size: 0.95rem;
  color: #64748b;
  font-weight: 800;
}

.rank-medal {
  font-size: 1.05rem;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  gap: 1px;
}
.rank-medal.gold { color: #d97706; }
.rank-medal.silver { color: #475569; }
.rank-medal.bronze { color: #92400e; }

.rank-avatar-col {
  font-size: 1.45rem;
  width: 36px;
  text-align: center;
  margin-right: 8px;
  flex-shrink: 0;
}

.rank-name-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.rank-name {
  font-size: 0.92rem;
  font-weight: 800;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.me-tag {
  display: inline-block;
  background: #3b82f6;
  color: #ffffff;
  font-size: 0.65rem;
  font-weight: 900;
  padding: 1px 5px;
  border-radius: 6px;
  margin-left: 4px;
  vertical-align: middle;
}

.record-summary-mini {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
  color: #64748b;
  font-size: 0.69rem;
  font-weight: 800;
  line-height: 1;
}
.record-mini-tier { display: inline-flex; align-items: center; gap: 1px; white-space: nowrap; }
.record-mini-disc { width: 16px; height: 16px; border-radius: 50%; object-fit: cover; filter: drop-shadow(0 1px 1px rgba(0,0,0,.22)); }
.record-mini-star { width: 13px; height: 13px; object-fit: contain; margin-left: 2px; }
.weekly-record-summary { margin-top: 4px; }

.rank-zone-col {
  margin-right: 6px;
}

.zone-tag {
  font-size: 0.7rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 6px;
}
.zone-tag.promo {
  background: #dcfce7;
  color: #15803d;
}
.zone-tag.demo {
  background: #fee2e2;
  color: #b91c1c;
}

.rank-score-col {
  display: flex;
  align-items: baseline;
  gap: 2px;
  flex-shrink: 0;
}

.rank-score-num {
  font-family: 'Black Han Sans', sans-serif;
  font-size: 1.15rem;
  color: #0f172a;
}

.rank-score-unit {
  font-size: 0.75rem;
  font-weight: 700;
  color: #64748b;
}

/* 포디움 단상 연출 (누적 랭킹 1~3위) */
.alltime-header-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 0 4px;
}

.trophy-lead {
  font-size: 1.6rem;
}

.hof-title {
  font-family: 'Black Han Sans', sans-serif;
  font-size: 1.1rem;
  color: #1e293b;
}

.hof-subtitle {
  font-size: 0.75rem;
  color: #64748b;
  font-weight: 600;
}

.podium-wrap {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
  padding: 12px 6px 14px;
  margin-bottom: 8px;
  background: radial-gradient(circle at 50% 100%, rgba(254, 243, 199, 0.6) 0%, rgba(255, 255, 255, 0) 70%);
  border-radius: 20px;
}

.podium-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  max-width: 105px;
}

.podium-avatar-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

.podium-crown {
  position: absolute;
  top: -16px;
  font-size: 1.3rem;
  animation: floatCrown 2s ease-in-out infinite;
}

@keyframes floatCrown {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.podium-medal {
  position: absolute;
  top: -12px;
  font-size: 1.1rem;
}

.podium-avatar {
  font-size: 2.2rem;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.15));
}

.podium-avatar.big {
  font-size: 2.6rem;
}

.podium-name {
  font-size: 0.78rem;
  font-weight: 800;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 90px;
  text-align: center;
}

.podium-score {
  font-family: 'Black Han Sans', sans-serif;
  font-size: 0.95rem;
  color: #475569;
  margin-bottom: 4px;
}

.podium-score.gold {
  color: #d97706;
  font-size: 1.05rem;
}

.podium-score .pts {
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
}

.podium-box {
  width: 100%;
  border-radius: 12px 12px 4px 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Black Han Sans', sans-serif;
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.box-gold {
  height: 64px;
  background: linear-gradient(180deg, #f59e0b, #d97706);
  font-size: 1.6rem;
}

.box-silver {
  height: 48px;
  background: linear-gradient(180deg, #94a3b8, #64748b);
  font-size: 1.35rem;
}

.box-bronze {
  height: 38px;
  background: linear-gradient(180deg, #b45309, #78350f);
  font-size: 1.2rem;
}

/* 하단 고정 내 순위 바 (Sticky Footer) */
.ranking-sticky-wrap {
  border-top: 1px solid #e2e8f0;
  background: #ffffff;
  padding: 10px 16px;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05);
}

.sticky-user-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f8fafc;
  border: 1.5px solid #cbd5e1;
  border-radius: 16px;
  padding: 8px 12px;
}

.sticky-user-bar.promo {
  background: #f0fdf4;
  border-color: #86efac;
}

.sticky-user-bar.demo {
  background: #fef2f2;
  border-color: #fca5a5;
}

.sticky-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.sticky-rank {
  font-family: 'Black Han Sans', sans-serif;
  font-size: 1.25rem;
  color: #2563eb;
  width: 38px;
  text-align: center;
}

.sticky-avatar {
  font-size: 1.6rem;
}

.sticky-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.sticky-name-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.sticky-name {
  font-size: 0.92rem;
  font-weight: 900;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 105px;
}

.sticky-edit-btn {
  background: transparent;
  border: none;
  font-size: 0.85rem;
  cursor: pointer;
  padding: 2px;
  border-radius: 4px;
}
.sticky-edit-btn:hover {
  background: #e2e8f0;
}

.sticky-status-msg {
  font-size: 0.72rem;
  font-weight: 800;
  margin-top: 1px;
}
.sticky-status-msg.promo { color: #15803d; }
.sticky-status-msg.safe { color: #475569; }
.sticky-status-msg.demo { color: #b91c1c; }

.sticky-stars-row {
  margin-top: 3px;
}

.sticky-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
}

.sticky-score-title {
  font-size: 0.68rem;
  font-weight: 700;
  color: #64748b;
}

.sticky-score-val {
  font-family: 'Black Han Sans', sans-serif;
  font-size: 1.3rem;
  color: #0f172a;
}
.sticky-score-val.gold {
  color: #d97706;
}

.sticky-score-val .unit {
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
}

/* 🍀 네잎클로버 활성 실드 뱃지 */
.clover-shield-badge {
  display: none;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #ffffff;
  padding: 3px 9px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.45);
  animation: pulseClover 2s infinite ease-in-out;
  margin-left: 6px;
  pointer-events: auto;
  border: 1px solid rgba(255, 255, 255, 0.6);
}
@keyframes pulseClover {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}


/* ── 로그인 · 공용 포인트 뱃지 (2026-09-24, 기존 웹 배포판에서 이식) ── */
#cw-login-btn { flex: 0 0 auto; margin-left: 8px; height: 34px; padding: 0 14px; border: 2px solid #c7b8ef; border-radius: 999px;
  background: #fff; color: #4c3a8f; font-weight: 900; font-size: 0.8rem; cursor: pointer; font-family: inherit; }
#cw-login-btn:hover { background: #f4f0ff; }
#cw-login-btn.hidden, #user-info.hidden, #point-badge.hidden { display: none !important; }
#user-info { display: flex; align-items: center; gap: 6px; margin-left: 8px; flex: 0 0 auto; }
#user-info img { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 2px 5px rgba(0,0,0,.2); }
#user-name { font-size: 0.8rem; font-weight: 800; color: #334155; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#point-badge { display: flex; align-items: center; gap: 4px; border: none; cursor: pointer; background: #FFD43B; color: #856404;
  font-weight: 900; font-size: 0.82rem; padding: 0 13px; height: 34px; border-radius: 999px; transition: transform 0.15s; font-family: inherit; }
#point-badge:hover { background: #ffe066; transform: scale(1.05); }
.cw-logout { background: rgba(15,23,42,0.08); border: none; color: #475569; font-size: 0.72rem; padding: 5px 9px; border-radius: 8px; cursor: pointer; font-family: inherit; }
.cw-logout:hover { background: rgba(15,23,42,0.16); }
/* 헤더 한 줄에는 자리가 없어서(아이콘들만으로도 꽉 찬다) 헤더 아래 오른쪽에 띄운다. 홈 화면에서만. */
@media (max-width: 1100px) {
  #user-name, #user-info img { display: none !important; }
}
@media all {
  /* right 는 홈 헤더·콘텐츠 좌우 여백(home.css 맨 끝: 32px, 최대폭 860 / ≤700 18px / ≤360 12px)과 같게 — 설정 버튼·아래 탭 창과 오른쪽 끝을 맞춘다 */
  #cw-login-btn, #user-info { position: absolute; top: 76px; right: max(32px, calc((100% - 860px) / 2 + 32px)); z-index: 1200; margin: 0; }
  body:not(.home-active) #cw-login-btn, body:not(.home-active) #user-info { display: none !important; }
}
@media (max-width: 700px) {
  .cw-logout { padding: 4px 7px; font-size: 0.66rem; background: rgba(255,255,255,.85); }
  #cw-login-btn, #user-info { top: 62px; right: 18px; }
  #cw-login-btn { height: 28px; padding: 0 11px; font-size: 0.72rem; box-shadow: 0 3px 8px rgba(76,58,143,.18); }
  #point-badge { height: 28px; padding: 0 10px; font-size: 0.74rem; box-shadow: 0 3px 8px rgba(133,100,4,.25); }
}
@media (max-width: 360px) {
  #cw-login-btn, #user-info { right: 12px; }
}

/* ── 실제 사용자 랭킹 1단계 (2026-09-24): 로그인 전·불러오는 중·기록 없음 상태 ── */
.rank-state-box { display:flex; flex-direction:column; align-items:center; gap:10px; padding:36px 16px; text-align:center; color:#475569; }
.rank-state-emoji { font-size:2.2rem; }
.rank-state-title { font-weight:800; font-size:.95rem; line-height:1.5; }
.rank-state-btn { border:0; border-radius:999px; padding:10px 18px; background:linear-gradient(135deg,#7c3aed,#db2777); color:#fff; font-weight:900; font-family:inherit; cursor:pointer; }
.rank-rule-bar .legend-item { width:100%; justify-content:center; text-align:center; font-size:.78rem; line-height:1.45; color:#64748b; }
.rank-name-line { display:flex; align-items:center; min-width:0; }
.rank-name-line .me-tag { flex:0 0 auto; }
/* 관리자 전용: 부적절한 닉네임 초기화 버튼 (ranking.js adminReset) */
.rank-admin-reset { margin-left:6px; border:1px solid #fecaca; border-radius:8px; background:#fff1f2; font-size:.72rem; line-height:1; padding:3px 5px; cursor:pointer; }
.rank-admin-reset:hover { background:#fee2e2; }

/* ── 별 하나 점수 숫자 (규칙 2: 별 하나 = 판 크기, tiers.js · 2026-09-30) ── */
.cw-starnum { position: relative; }
span.cw-starnum { display: inline-block; line-height: 0; }
.cw-starnum::after {
  content: attr(data-n); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding-top: 12%; font: 900 var(--sn, 10px)/1 'Pretendard', sans-serif; color: #fff; letter-spacing: -.3px;
  text-shadow: 0 0 2px rgba(0,0,0,.95), 0 1px 1px rgba(0,0,0,.9); pointer-events: none;
}
.cw-starnum:has(.is-dimmed)::after, .cw-starnum:has(.off)::after { opacity: .55; }
.stage-stars .cw-starnum { --sn: 9px; }
.pick-vinyl-stars .cw-starnum { --sn: 10px; }
.star-img.cw-starnum { --sn: 11px; }
.sm-modal-stars .star-img.cw-starnum { --sn: 15px; }
.score-calc { display: inline-block; margin-top: 4px; font-size: .82rem; font-weight: 700; color: #475569; }
.score-calc b { color: #0f172a; }

/* ── 순위표 등급별 칸 (2026-09-30) — 5칸이 휴대폰 한 줄에 ── */
.record-tier-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; margin-top: 4px; max-width: 300px; }
.record-tier-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 3px 1px; border-radius: 7px;
  font-size: 0.68rem; font-weight: 800; line-height: 1; white-space: nowrap; color: #475569; background: #f1f5f9; }
.record-tier-cell .rtc-line { display: inline-flex; align-items: center; gap: 1px; }
.record-tier-cell small { font-size: .56rem; font-weight: 700; margin-left: 1px; opacity: .8; }
.record-tier-cell .record-mini-disc { width: 13px; height: 13px; }
.record-tier-cell .record-mini-star { width: 12px; height: 12px; margin-left: 0; }
.record-tier-cell.tier-bronze   { background: #fdf0de; color: #7c3d12; }
.record-tier-cell.tier-silver   { background: #eef1f5; color: #334155; }
.record-tier-cell.tier-gold     { background: #fef3c7; color: #854d0e; }
.record-tier-cell.tier-platinum { background: #efeafe; color: #4c1d95; }
.record-tier-cell.tier-diamond  { background: #e0f2fe; color: #075985; }
.rank-cell-note { font-size: .72rem; opacity: .85; }
/* 등급 칸은 한 줄 전체 폭으로 (이름 열 아래가 아니라 줄 맨 아래) */
.rank-item { flex-wrap: wrap; }
.record-tier-grid.rank-tier-row { flex: 0 0 100%; max-width: none; margin: 6px 0 0; padding-left: 38px; box-sizing: border-box; }
.zone-legend-bar.rank-rule-bar { flex-direction: column; gap: 4px; }