/* ============================================================
   style.css — 검은 숲의 소녀 (Dark Fantasy Gothic TCG Playing Card Theme)
   소녀와 패밀리어의 검은 숲 모험기
   ============================================================ */

/* ── 폰트: 쿠키런(CookieRun) CDN & 구글 폰트 ─────────────────── */
@font-face {
  font-family: 'CookieRun';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/CookieRun-Regular.woff') format('woff');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700;900&family=Jua&family=Noto+Sans+KR:wght@400;600;700;800&display=swap');

/* ── CSS 커스텀 프로퍼티 (디자인 토큰) ──────────────────────── */
:root {
  /* 팔레트 — 세련된 다크 판타지 & 앤틱 고서 톤 (사이버펑크 탈피) */
  --clr-bg-deep:       #0d0f1a;      /* 깊은 밤의 슬레이트 */
  --clr-bg-mid:        #151726;      /* 고딕 미드나잇 차콜 */
  --clr-bg-card:       #1e2136;      /* 양장본 다크 플레이트 */
  --clr-bg-tome:       #191b2c;      /* 마법 고서 속지 톤 */
  --clr-glass:         rgba(21, 23, 38, 0.94);
  --clr-glass-border:  rgba(212, 175, 55, 0.35); /* 앤틱 브라스/골드 테두리 */

  --clr-accent:        #c4823f;      /* 웜 앰버 골드 (소녀 / 가죽) */
  --clr-accent2:       #7a5230;      /* 엔틱 브라운 */
  --clr-danger:        #d94254;      /* 루비 가넷 (체력 / 위험) */
  --clr-gold:          #f3c766;      /* 앤틱 브라스 골드 */
  --clr-gold-light:    #ffe39f;      /* 샴페인 하이라이트 */
  --clr-success:       #2ec4b6;      /* 에메랄드 룬 */

  --clr-text:          #f6f4ee;      /* 따뜻한 양피지 크림 화이트 */
  --clr-text-dim:      #b8b5c4;      /* 부드러운 실버 그레이 */
  --clr-text-muted:    #7b798c;

  /* 카드/역할별 테마 (보석톤 / 차분한 판타지 컬러) */
  --clr-monster:      #9d6bdf;      /* 신비한 아메시스트 퍼플 */
  --clr-weapon:       #4a90e2;      /* 룬 사파이어 블루 */
  --clr-item:         #38b000;      /* 알케미 에메랄드 */
  --clr-gold-cell:    #f3c766;
  --clr-exit:         #c77dff;

  /* 타이포그래피: 쿠키런 둥근 서체 전면 적용 */
  --font-header: 'CookieRun', 'Jua', 'Cinzel', 'Noto Sans KR', sans-serif;
  --font-main:   'CookieRun', 'Jua', 'Noto Sans KR', system-ui, sans-serif;

  --fs-xs:  0.75rem;
  --fs-sm:  0.875rem;
  --fs-md:  1rem;
  --fs-lg:  1.25rem;
  --fs-xl:  1.75rem;
  --fs-2xl: 2.5rem;

  /* 공간 */
  --sp-xs: 0.25rem;
  --sp-sm: 0.5rem;
  --sp-md: 1rem;
  --sp-lg: 1.5rem;
  --sp-xl: 2.5rem;

  /* 반경 (Wildfrost 스타일 부드러운 라운딩) */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;

  /* 그림자 & 자연스러운 뎁스 효과 (네온 제거) */
  --shadow-card:   0 10px 30px rgba(0, 0, 0, 0.7), 0 0 1px rgba(243, 199, 102, 0.4);
  --shadow-glow:   0 4px 18px rgba(196, 130, 63, 0.35);
  --shadow-glow2:  0 4px 18px rgba(122, 82, 48, 0.4);
  --shadow-gold:   0 4px 16px rgba(243, 199, 102, 0.35);

  /* 교체 가능한 다크 판타지 배경 이미지 (메인 메뉴 기본) */
  --dungeon-bg-image: url('assets/images/main.png');

  /* 트랜지션 */
  --tr-fast:  150ms ease;
  --tr-mid:   280ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --tr-slow:  450ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
::selection { background: transparent; }

/* ── 스크롤바 세련된 다크 판타지 커스텀 ─────────────────────────── */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(212, 175, 55, 0.4) transparent;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(212, 175, 55, 0.4);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(243, 199, 102, 0.7);
}

html, body {
  height: 100%;
  font-family: var(--font-main);
  background: #04050a;
  color: var(--clr-text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  background: #04050a;
}

/* ── 9:16 모바일 풀화면 뷰포트 컨테이너 ─────────────────────── */
#viewport-wrapper {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #04050a;
}

#app-container {
  position: relative;
  container-type: inline-size;
  container-name: app;
  width: 400px;
  height: 711px;
  min-width: 400px;
  min-height: 711px;
  flex-shrink: 0;
  margin: 0 auto;
  background-image: var(--dungeon-bg-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 0 70px rgba(0, 0, 0, 0.95), 0 0 35px rgba(122, 87, 56, 0.35);
  border-left: 1px solid rgba(122, 87, 56, 0.3);
  border-right: 1px solid rgba(122, 87, 56, 0.3);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  -webkit-user-select: none;
  user-select: none;
}

/* ── 고딕 카드 디자인 ─────────────────────────────────────────── */
.gothic-card {
  background: var(--clr-glass);
  border: 1px solid var(--clr-glass-border);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(16px);
  border-radius: var(--r-lg);
  position: relative;
}

.gothic-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: var(--r-lg);
  padding: 1px;
  background: linear-gradient(135deg, rgba(255, 209, 102, 0.45), rgba(255, 244, 214, 0.25), rgba(122, 87, 56, 0.4));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* ── 화면 공통 ─────────────────────────────────────────────── */
.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sp-md);
  z-index: 10;
}

/* 가독성용 딤 스크림 — 메인 메뉴(main-menu-transparent)만 제외하고 모든 화면에 적용.
   #app-container의 배경 이미지 자체에는 더 이상 딤이 섞여있지 않으므로,
   화면별로 필요할 때만 이 스크림을 얹는다. z-index:-1로 각 화면의 정적 콘텐츠보다
   반드시 아래에 깔리게 한다. */
.screen:not(.main-menu-transparent)::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(4, 5, 10, 0.65) 0%, rgba(13, 11, 25, 0.75) 50%, rgba(4, 5, 10, 0.85) 100%);
}

/* ── 메인 메뉴 ─────────────────────────────────────────────── */
.main-menu-transparent {
  padding: max(14px, env(safe-area-inset-top)) 16px max(10px, env(safe-area-inset-bottom));
  justify-content: flex-start;
}

/* 메인 메뉴 몽환적 반딧불이 & 미세 파티클(별가루) 캔버스 */
.main-menu-fireflies-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5; /* 메인 배경 위, 액션 UI 버튼(z-index: 20) 아래 */
}

.main-top-left-actions {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  left: max(14px, env(safe-area-inset-left));
  display: flex;
  align-items: center;
  z-index: 20;
}

.main-top-right-actions {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right));
  display: flex;
  align-items: center;
  z-index: 20;
}

.btn-icon-top {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  border: none;
  background: transparent;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform var(--tr-fast), filter var(--tr-fast);
}
.btn-icon-top img,
.btn-menu-icon-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.7));
  pointer-events: none;
  display: block;
}
.btn-icon-top:active { transform: scale(0.92); }
.btn-icon-top:hover {
  transform: translateY(-1px) scale(1.08);
  filter: brightness(1.15);
}

.main-bottom-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 100%;
  gap: 8px;
  animation: fadeInUp 0.8s ease-out;
  margin-bottom: 12px;
  margin-top: auto;
  z-index: 20;
  padding: 0 8px;
  box-sizing: border-box;
}

/* 시작하기 버튼 중앙 정렬 (새로하기 / 이어하기 가로 배치) */
.main-start-row,
.main-start-btn-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
}

.main-icon-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
}

.btn.btn-start-btn,
.btn-start-btn,
.btn.btn-start-large,
.btn-start-large,
#btn-new-game,
#btn-continue-game {
  width: 140px;
  height: 46px;
  box-sizing: border-box;
  padding: 0 12px;
  font-size: 1.05rem;
  font-weight: 800;
  border-radius: 23px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  /* 딥 미드나잇 네이비 & 사파이어 인디고 (일러스트 망토/밤하늘과 완벽 조화) */
  background: linear-gradient(180deg, #283b66 0%, #17243e 50%, #0c1424 100%);
  /* 앤틱 샴페인 골드 테두리 (일러스트 골드 자수/타이틀과 조화) */
  border: 1.5px solid #ecd393;
  color: #fff9ed;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.75),
    0 0 12px rgba(60, 120, 240, 0.35),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1.5px 0 rgba(0, 0, 0, 0.4);
  letter-spacing: 0.5px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 10px rgba(243, 199, 102, 0.4);
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--tr-fast), box-shadow var(--tr-fast), filter var(--tr-fast), border-color var(--tr-fast);
}

.btn-start-text {
  display: inline-block;
  line-height: 1;
}

.btn.btn-start-btn:hover,
.btn-start-btn:hover,
.btn.btn-start-large:hover,
.btn-start-large:hover,
#btn-new-game:hover,
#btn-continue-game:hover {
  transform: translateY(-1px) scale(1.02);
  filter: brightness(1.12);
  border-color: #fff2bd;
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.85),
    0 0 18px rgba(85, 150, 255, 0.5),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.45);
}

.btn.btn-start-btn:active,
.btn-start-btn:active,
.btn.btn-start-large:active,
.btn-start-large:active,
#btn-new-game:active,
#btn-continue-game:active {
  transform: translateY(1px) scale(0.98);
  filter: brightness(0.95);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.8), inset 0 2px 4px rgba(0, 0, 0, 0.6);
}

/* ── 버튼 (Wildfrost 스타일: 라운드 볼륨감 & 앤틱 엠보싱) ──────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-xs);
  padding: 0.85em 1.6em;
  font-family: inherit;
  font-size: var(--fs-md);
  font-weight: 700;
  border-radius: 18px;
  border: none;
  cursor: pointer;
  transition: transform var(--tr-fast), box-shadow var(--tr-fast), filter var(--tr-fast);
  text-decoration: none;
  user-select: none;
}

.btn-primary {
  background: linear-gradient(180deg, #d4934b 0%, #a2652b 50%, #7d4416 100%);
  color: #fff9ee;
  border: 1.5px solid #ffe29a;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}
.btn-primary:hover {
  transform: translateY(-2px) scale(1.02);
  filter: brightness(1.08);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6), 0 0 12px rgba(243, 199, 102, 0.35);
}
.btn-primary:active {
  transform: translateY(1px) scale(0.98);
}

.btn-secondary {
  background: linear-gradient(180deg, #2b2e44 0%, #1f2133 100%);
  color: var(--clr-text);
  border: 1.5px solid rgba(212, 175, 55, 0.4);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.btn-secondary:hover {
  background: linear-gradient(180deg, #373b56 0%, #26283d 100%);
  border-color: var(--clr-gold);
  color: var(--clr-gold-light);
  transform: translateY(-2px);
}
.btn-secondary:active {
  transform: translateY(1px) scale(0.98);
}

.btn-small {
  padding: 0.4em 1em;
  font-size: var(--fs-sm);
  font-weight: 700;
  border-radius: 12px;
  background: linear-gradient(180deg, #26283d 0%, #1a1c2b 100%);
  color: var(--clr-gold);
  border: 1px solid rgba(243, 199, 102, 0.4);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
.btn-small:hover {
  background: rgba(243, 199, 102, 0.15);
  transform: translateY(-1px);
}

/* ── HUD (D파트: 2행 구조 / safe-area / 터치타겟 44px) ──────────── */
#screen-level-play {
  padding: 0 !important;
  justify-content: flex-start !important;
  overflow: hidden !important;
}

/* HUD 전체 컨테이너: 깊은 밤의 슬레이트 + 앤틱 브라스 플레이트 */
.hud {
  position: relative;
  width: 100%;
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 3px;
  padding-top:    max(8px, env(safe-area-inset-top));
  padding-bottom: 6px;
  padding-left:   max(4px, env(safe-area-inset-left));
  padding-right:  max(4px, env(safe-area-inset-right));
  background: linear-gradient(180deg, rgba(18, 20, 32, 0.98) 0%, rgba(13, 15, 25, 0.98) 100%);
  backdrop-filter: blur(16px);
  border-bottom: 2px solid rgba(212, 175, 55, 0.45);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7);
  z-index: 100;
  overflow-x: hidden;
}

/* 좌측 영역: 1행 유지 (아이템 획득 시 레이아웃 흔들림/하단 밀림 방지) */
.hud-stats-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2px;
  flex: 1;
  min-width: 0;
  flex-wrap: nowrap;
  overflow: visible;
}

/* 공간 확보 - 불필요한 스페이서 숨김 */
.hud-spacer {
  display: none !important;
}

/* HUD 아이템 공통 스타일 - 둥근 보석 배지 룩 (완전 고정 규격으로 크기 출렁임 원천 차단) */
.hud-item {
  font-size: 0.76rem;
  font-weight: 800;
  color: var(--clr-text);
  padding: 2px 3.5px;
  border-radius: 8px;
  background: rgba(25, 27, 42, 0.92);
  border: 1.5px solid rgba(212, 175, 55, 0.35);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  white-space: nowrap;
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

/* HP 강조: 루비 젬스톤 (모바일 큼직한 시인성) */
.hud-item-hp {
  border-color: rgba(239, 68, 68, 0.65);
  color: #fca5a5;
  background: linear-gradient(135deg, rgba(65, 18, 28, 0.95) 0%, rgba(38, 12, 18, 0.95) 100%);
  font-size: 0.78rem;
  font-weight: 900;
  box-shadow: 0 2px 10px rgba(220, 38, 38, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

/* 라이프 시스템 제거: 0px 은닉 */
.hud-item-lives {
  display: none !important;
}

/* 골드 아이템: 토파즈 골드 */
.hud-item-gold {
  border-color: rgba(245, 158, 11, 0.65);
  color: var(--clr-gold);
  background: linear-gradient(135deg, rgba(50, 38, 18, 0.95) 0%, rgba(32, 24, 12, 0.95) 100%);
  font-size: 0.76rem;
  font-weight: 800;
  box-shadow: 0 2px 10px rgba(245, 158, 11, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
}

/* 무기 스텟: 사파이어 블루 (수치/괄호 잘림 절대 방지) */
.hud-item-weapon {
  border-color: rgba(96, 165, 250, 0.65);
  color: #93c5fd;
  background: linear-gradient(135deg, rgba(20, 38, 68, 0.95) 0%, rgba(14, 24, 45, 0.95) 100%);
  font-size: 0.76rem;
  font-weight: 800;
  box-shadow: 0 2px 10px rgba(59, 130, 246, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  flex-shrink: 0 !important;
  min-width: max-content;
  width: auto;
  justify-content: center;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}

/* 에너지 실드 스텟: 아쿠아 사파이어 (방어막 보유 시 HP 우측에 팝업) */
.hud-item-shield {
  border-color: rgba(56, 189, 248, 0.75);
  color: #38bdf8;
  background: linear-gradient(135deg, rgba(14, 45, 72, 0.95) 0%, rgba(10, 28, 48, 0.95) 100%);
  font-size: 0.76rem;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  flex-shrink: 0 !important;
  animation: hudShieldGlow 2s ease-in-out infinite alternate;
}

@keyframes hudShieldGlow {
  from { box-shadow: 0 0 6px rgba(56, 189, 248, 0.3); border-color: rgba(56, 189, 248, 0.5); }
  to   { box-shadow: 0 0 14px rgba(56, 189, 248, 0.7); border-color: rgba(125, 211, 252, 0.85); }
}

/* 무기 보존(Ward) 배지: 황금 수호 방패 (워드 장전 시 무기 우측에 팝업) */
.hud-item-ward {
  border-color: rgba(245, 158, 11, 0.85);
  color: #fbbf24;
  background: linear-gradient(135deg, rgba(60, 36, 12, 0.95) 0%, rgba(38, 20, 8, 0.95) 100%);
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  flex-shrink: 0 !important;
  font-size: 0.76rem;
  padding: 2px 3.5px;
  animation: wardBadgePulse 2.2s ease-in-out infinite alternate;
}

.hud-item-ward.ward-badge-popin {
  animation: wardPopIn 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes wardBadgePulse {
  from { box-shadow: 0 0 6px rgba(245, 158, 11, 0.35); filter: brightness(1); }
  to   { box-shadow: 0 0 14px rgba(251, 191, 36, 0.75); filter: brightness(1.2); }
}

@keyframes wardPopIn {
  0%   { transform: scale(0.2); opacity: 0; filter: brightness(2.5) drop-shadow(0 0 20px #fbbf24); }
  60%  { transform: scale(1.35); opacity: 1; filter: brightness(1.8); }
  100% { transform: scale(1); opacity: 1; filter: brightness(1); }
}

/* 예비 무기 백팩 HUD 슬롯 — 더 이상 상단에 표기하지 않으므로 완전 숨김 */
.hud-item-weapon-backpack { display: none !important; }

/* ═══════════════════════════════════════════════════════════
   무기 독(Dock) — 플레이어 캐릭터 하단 3종 고정 슬롯
   sword(0) | dagger(1) | shield(2)
   ═══════════════════════════════════════════════════════════ */
.weapon-dock {
  position: absolute;
  bottom: clamp(16px, 7.5%, 22px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: clamp(6px, 1.8cqw, 10px);
  align-items: center;
  z-index: 80;
  pointer-events: auto;
}

/* 개별 무기 슬롯: 완벽한 정원(1:1) 규격 강제 고정 */
.weapon-slot {
  position: relative;
  width: clamp(44px, 13cqw, 54px);
  height: clamp(44px, 13cqw, 54px);
  flex: 0 0 clamp(44px, 13cqw, 54px);
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, rgba(30, 50, 90, 0.85) 0%, rgba(10, 18, 36, 0.95) 100%);
  border: 1.5px solid rgba(96, 165, 250, 0.35);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  transition: transform 0.14s cubic-bezier(0.34, 1.56, 0.64, 1),
              border-color 0.18s ease,
              box-shadow 0.18s ease,
              opacity 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  overflow: visible;
}

/* 무기가 없는 슬롯: 완전 투명 */
.weapon-slot.weapon-slot-empty {
  opacity: 0;
  cursor: default;
  pointer-events: none;
}

/* 현재 장착(활성) 무기 슬롯 강조: 얇고 산뜻한 밝은 하늘색 링 */
.weapon-slot.weapon-slot-active {
  border: 2px solid #38bdf8;
  box-shadow:
    0 0 10px rgba(56, 189, 248, 0.7),
    0 0 20px rgba(14, 165, 233, 0.35),
    0 3px 10px rgba(0, 0, 0, 0.65),
    inset 0 0 6px rgba(56, 189, 248, 0.30);
  animation: weaponSlotActivePulse 1.8s ease-in-out infinite alternate;
}

@keyframes weaponSlotActivePulse {
  from {
    border-color: #38bdf8;
    box-shadow:
      0 0 8px rgba(56, 189, 248, 0.6),
      0 0 16px rgba(14, 165, 233, 0.25),
      0 3px 10px rgba(0, 0, 0, 0.65),
      inset 0 0 4px rgba(56, 189, 248, 0.20);
  }
  to {
    border-color: #7dd3fc;
    box-shadow:
      0 0 14px rgba(56, 189, 248, 0.9),
      0 0 24px rgba(14, 165, 233, 0.45),
      0 3px 10px rgba(0, 0, 0, 0.65),
      inset 0 0 8px rgba(56, 189, 248, 0.40);
  }
}

.weapon-slot:not(.weapon-slot-empty):not(.weapon-slot-active):hover {
  transform: translateY(-2px) scale(1.06);
  border-color: rgba(147, 197, 253, 0.7);
  box-shadow: 0 0 8px rgba(96, 165, 250, 0.45), 0 3px 10px rgba(0, 0, 0, 0.65);
}

.weapon-slot:not(.weapon-slot-empty):active {
  transform: scale(0.93);
}

/* 무기 이미지: 원 테두리를 벗어나지 않으면서 내부를 꽉 채우도록 중앙 정렬 및 최적 스케일 조정 */
.weapon-slot-img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.22);
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.7));
  user-select: none;
  -webkit-user-drag: none;
  display: block;
  z-index: 1;
}

/* 무기 수치 배지 (우상단) */
.weapon-slot-value {
  position: absolute;
  top: -3px;
  right: -3px;
  z-index: 3;
  min-width: 18px;
  height: 18px;
  padding: 0 3px;
  background: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 100%);
  border: 1.5px solid rgba(147, 197, 253, 0.9);
  border-radius: 9px;
  color: #e0f2fe;
  font-size: clamp(0.60rem, 1.6cqw, 0.72rem);
  font-weight: 800;
  line-height: 16px;
  text-align: center;
  display: none; /* JS가 값 있을 때만 보여줌 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  white-space: nowrap;
  letter-spacing: -0.01em;
}

/* 현재 활성 무기의 수치 배지는 밝은 하늘색 테마 */
.weapon-slot.weapon-slot-active .weapon-slot-value {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  border-color: #38bdf8;
  color: #f0f9ff;
}

/* 스왑 팝 애니메이션 */
.weapon-slot.weapon-swap-pop {
  animation: weaponSwapPop 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes weaponSwapPop {
  0%   { transform: scale(0.65); opacity: 0.7; }
  60%  { transform: scale(1.18); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* 제거된 요소 스타일 (D파트 제거, 레거시 코드 대비) */
.hud-hero-badge  { display: none !important; }
.hud-item-bomb   { display: none !important; }
.btn-sound-hud   { display: none !important; }
/* L파트에서 플로팅 버튼으로 이전된 도감 HUD 버튼 (혹시 남아있을 경우 숨김) */
#btn-bestiary-hud { display: none !important; }

/* ── HUD 우측 메뉴 버튼 ────────────────────────────── */
.hud-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

/* ── 메인 메뉴 BGM 토글 버튼 ─────────────────────────────────── */
.btn-sound-menu {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(26, 27, 46, 0.85);
  border: 1px solid rgba(122, 87, 56, 0.45);
  color: #ffffff;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  transition: transform var(--tr-fast), border-color var(--tr-fast), background var(--tr-fast);
  z-index: 20;
}

.btn-sound-menu:hover {
  transform: scale(1.1);
  border-color: var(--clr-gold);
}

.btn-sound-menu:active {
  transform: scale(0.92);
}

.btn-bgm-toggle.muted,
.btn-sound-menu.muted,
.btn-sound-hud.muted {
  opacity: 0.55;
  filter: grayscale(0.9);
  border-color: rgba(255, 255, 255, 0.2);
}

/* ── 그리드 래퍼 & 9:16 모바일 그리드 ──────────────────────── */
.grid-wrapper {
  position: relative !important;
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: min(2cqw, 8px);
  box-sizing: border-box;
  overflow: hidden;
}

/* ── 게임 그리드 (TCG 플레잉 카드 레이아웃) ─────────────────── */
.game-grid {
  position: relative !important;
  display: grid;
  gap: min(0.8cqw, 3px);
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 3 / 4; /* 초기 로드 깜빡임 방지용 fallback (JS 인라인 스타일이 동적 덮어씀) */
  margin: auto;
  align-content: center;
  justify-content: center;
}

/* ── 진짜 카드다운 고딕 TCG 플레잉 카드 (.grid-cell) ───────────── */
.grid-cell {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 3 / 4; /* TCG 카드 비율 고정 (뒤틀림 방지) */
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  font-family: inherit;
  border-radius: 8px;
  border: none;
  box-shadow: none !important;
  background: transparent !important;
  color: var(--clr-text);
  cursor: pointer;
  transition: transform var(--tr-mid), border-color var(--tr-fast);
  overflow: visible; /* 스티커 팝아웃 연출 */
  padding: 0;
  user-select: none;
  box-sizing: border-box;
}

.grid-cell:not(:disabled):hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: none !important;
  z-index: 60 !important;
}

.grid-cell:not(:disabled):active {
  transform: scale(0.95);
}

/* ── 카드 타입별 플레잉 카드 세부 테마 ─────────────────────── */

/* 1. 봉인된 고딕 카드 뒷면 (.cell-hidden) */
.cell-hidden {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  cursor: default !important;
  transform: none !important;
}

/* 1-a. "곧 열릴 안개" — 인접 칸이 열려있음, 살짝 밝고 은은한 펄스 (J파트) */
.cell-hidden-near {
  filter: brightness(1.2) saturate(1.3) !important;
  animation: fogNearPulse 2.5s ease-in-out infinite alternate !important;
}

@keyframes fogNearPulse {
  from { filter: brightness(1.1) saturate(1.2); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.6), 0 0 8px rgba(157, 78, 221, 0.25); }
  to   { filter: brightness(1.3) saturate(1.5); box-shadow: 0 3px 12px rgba(157, 78, 221, 0.5), 0 0 16px rgba(200, 150, 255, 0.4); }
}

/* 1-b. "먼 안개" — 더 어둡고 채도 낮은 정적인 톤 (J파트) */
.cell-hidden-far {
  filter: brightness(0.65) saturate(0.5) !important;
  opacity: 0.8 !important;
}

/* ── J파트: card-sheen — 열린 카드 대각선 반짝임 효과 ── */
/* 좌상단→우하단으로 천천히 훑는 은은한 광택 */
.card-sheen {
  position: relative;
  /* overflow: visible 유지 — 팝아웃 hover 효과를 해치지 않음 */
}

.card-sheen::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background: linear-gradient(
    115deg,
    transparent 0%,
    transparent 35%,
    rgba(255, 255, 255, 0.2) 48%,
    rgba(255, 255, 255, 0.22) 50%,
    rgba(255, 255, 255, 0.2) 52%,
    transparent 65%,
    transparent 100%
  );
  background-size: 300% 300%;
  background-position: 200% 200%;
  pointer-events: none;
  z-index: 20;
  animation: sheenSweep 4s ease-in-out infinite;
  animation-delay: var(--sheen-delay, 0s);
  opacity: 0;
}

@keyframes sheenSweep {
  0%   { background-position: 200% 200%; opacity: 0; }
  15%  { opacity: 1; }
  50%  { background-position: -100% -100%; opacity: 1; }
  65%  { opacity: 0; }
  100% { background-position: -100% -100%; opacity: 0; }
}


.cell-lock-container {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 2px;
  opacity: 0.75;
}

.lock-icon {
  font-size: clamp(0.65rem, 24cqw, 1.2rem);
  filter: drop-shadow(0 0 6px rgba(157, 78, 221, 0.8));
}
.lock-label {
  font-size: clamp(0.42rem, 16cqw, 0.62rem);
  font-weight: 700;
  color: #c77dff;
  letter-spacing: 0.5px;
}

/* 2. 이미 클리어하여 지나간 칸 — 완전 빈 배경 (J파트: 카드 프레임·이미지·라벨 제거) */
.cell-cleared {
  background: rgba(5, 6, 12, 0.25) !important;
  border: none !important;
  box-shadow: none !important;
  opacity: 0.5 !important;
  cursor: default !important;
  transform: none !important;
}

.cleared-cell-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: clamp(0.6rem, 22cqw, 1rem);
}
.cleared-label {
  font-size: clamp(0.4rem, 14cqw, 0.56rem);
  opacity: 0.7;
}

/* 3. 이동 가능 열린 카드 (.cell-empty-unlocked) - 노란 외곽선 및 그림자 완전 제거 */
.cell-empty-unlocked {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

.open-path-container {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 2px;
  color: var(--clr-gold);
}

.path-icon {
  font-size: clamp(0.7rem, 26cqw, 1.3rem);
  filter: drop-shadow(0 0 8px rgba(255, 209, 102, 0.9));
}

.path-label {
  font-size: clamp(0.45rem, 15cqw, 0.68rem);
  font-weight: 800;
  color: #ffffff;
  text-shadow: 0 0 6px rgba(255, 209, 102, 0.8);
}

.path-sub {
  font-size: clamp(0.38rem, 13cqw, 0.54rem);
  color: var(--clr-gold);
  font-weight: 600;
}

/* 4. 출구 고딕 관문 카드 (.cell-exit, .cell-exit-revealed) - 딤처리 완전 제거 및 선명도 극대화 */
.cell-exit,
.cell-exit-revealed,
.cell-cleared.cell-exit,
.cell-cleared.cell-exit-revealed,
.grid-cell.cell-exit {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
  filter: brightness(1.05) drop-shadow(0 4px 12px rgba(0, 0, 0, 0.6)) !important;
}

.cell-exit .card-plate-bg,
.cell-exit-revealed .card-plate-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 7px;
  z-index: 1;
  pointer-events: none;
}

.cell-exit .tile-bg-img,
.cell-exit-revealed .tile-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 7px;
  z-index: 2;
  pointer-events: none;
}

/* 5. 몬스터/무기/아이템 TCG 플레잉 카드 프레임 */
.cell-monster {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.cell-weapon {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.cell-item {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ── 3계층 (3-Layer Depth) 카드 렌더링 아키텍처 ────────────────── */
.card-placeholder,
.gothic-tcg-card {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0;
  pointer-events: none;
  overflow: visible; /* 스프라이트가 카드 위로 자연스럽게 움직일 수 있도록 허용 */
  border-radius: 7px;
}

/* [Layer 1] 하단 베이스 플레이트 (고정 배경 - 움직이지 않음) */
.card-plate-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 7px;
  pointer-events: none;
  z-index: 1; /* 최하단 고정 */
}

/* [Layer 2] 중간 투명 스프라이트 래퍼 (오직 이 레이어만 애니메이션 적용) */
.card-sprite-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 10; /* 중간 뎁스: 베이스 플레이트 위 */
  border-radius: 7px;
  will-change: transform;
}

/* 중간 투명 스프라이트 PNG (3:4 비율) */
.card-sprite-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  filter: none !important;
  transition: transform var(--tr-mid);
}

/* 레거시/폴백 호환 */
.card-art-box {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
  border-radius: 7px;
}

.card-visual-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 7px;
  pointer-events: none;
  transition: transform var(--tr-mid);
}

/* 3:4 통카드 타일 배경 이미지 */
.tile-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 7px;
  pointer-events: none;
  z-index: 1;
}

.card-placeholder-art {
  width: 100%;
  height: 100%;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-emoji-wrap {
  font-size: clamp(0.85rem, 32cqw, 1.7rem);
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.7));
}

/* 통카드 일러스트를 위해 상단 이모지 엠블럼 숨김 */
.card-type-emblem {
  display: none;
}

.card-placeholder-fallback .card-type-emblem {
  display: block;
  position: absolute;
  top: 3px;
  left: 3px;
  z-index: 25;
  font-size: clamp(0.45rem, 15cqw, 0.72rem);
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.9));
}

/* ── [Layer 3] 최상단 정보 레이어: 하단 중앙 이름 + 우상단 수치 오버레이 (z-index: 25) ── */

/* 1. 하단 중앙 카드 이름 태그 (정보값 배지) */
.card-name-tag {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 25;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: clamp(1.2px, 2cqw, 2.5px) clamp(3px, 5cqw, 7px);
  border-radius: 10px;
  font-size: clamp(0.52rem, 12.5cqw, 0.70rem);
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 92%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(4px);
  letter-spacing: -0.2px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(30, 24, 38, 0.95) 0%, rgba(18, 14, 25, 0.98) 100%);
  border: 1px solid rgba(243, 199, 102, 0.4);
  color: #f6f4ee;
}

/* 몬스터 카드 이름 배지: 가넷 루비 */
.cell-monster .card-name-tag {
  background: linear-gradient(180deg, rgba(62, 22, 32, 0.96) 0%, rgba(32, 10, 16, 0.98) 100%);
  border: 1px solid #d94254;
  color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
}

/* 무기 카드 이름 배지: 사파이어 스틸 */
.cell-weapon .card-name-tag {
  background: linear-gradient(180deg, rgba(22, 38, 58, 0.96) 0%, rgba(10, 20, 32, 0.98) 100%);
  border: 1px solid #4a90e2;
  color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
}

/* 아이템 카드 이름 배지: 에메랄드 */
.cell-item .card-name-tag {
  background: linear-gradient(180deg, rgba(20, 52, 36, 0.96) 0%, rgba(10, 28, 19, 0.98) 100%);
  border: 1px solid #2ec4b6;
  color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
}

/* 타일 전용 이름 배지 (탈출의 관문, 이동 경로, 봉인된 칸) */
.tile-name-tag {
  width: auto;
  max-width: 88%;
  justify-content: center;
  text-align: center;
}

/* 탈출의 관문 이름 배지: 신비한 보랏빛 룬 & 황금 프레임 */
.cell-exit .card-name-tag,
.exit-name-tag {
  background: linear-gradient(180deg, rgba(68, 36, 95, 0.97) 0%, rgba(32, 14, 48, 0.98) 100%) !important;
  border: 1.5px solid #f3c766 !important;
  color: #fff !important;
  font-weight: 800 !important;
  box-shadow: 0 0 12px rgba(243, 199, 102, 0.35), 0 2px 8px rgba(0, 0, 0, 0.85) !important;
}

/* 이동 경로 이름 배지 */
.path-name-tag {
  background: linear-gradient(180deg, rgba(38, 28, 52, 0.95) 0%, rgba(22, 16, 32, 0.98) 100%) !important;
  border: 1px solid var(--clr-gold) !important;
  color: var(--clr-gold) !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.7) !important;
}

/* 봉인된 칸 이름 배지 */
.locked-name-tag {
  background: rgba(22, 16, 32, 0.92) !important;
  border: 1px solid rgba(157, 107, 223, 0.4) !important;
  color: #c5a0ea !important;
}

/* 클리어된 칸 이름 배지 */
.cleared-name-tag {
  background: rgba(14, 15, 24, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: rgba(255, 255, 255, 0.6) !important;
}

/* ── 더미(스택) 카드 후면 플레이트 완전 비활성화 (인위적 테두리/외곽선/두께감 림 원천 제거) ── */
.card-stack-plate {
  display: none !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: none !important;
}

/* ── 진짜 카드 그래픽을 사용하는 정갈한 스택 레이어 (테두리 0, 그림자 0, 인위적 효과 완전 배제) ── */
.card-stack-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  border-radius: 7px;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  overflow: hidden;
  transition: transform var(--tr-mid, 0.15s ease);
}

.card-stack-layer .card-plate-bg,
.card-stack-layer .tile-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  border-radius: 7px;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* ── 미개방(안개/봉인) 타일 본체 래퍼 ── */
.tile-locked-body {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
  border-radius: 7px;
  overflow: visible;
  transition: transform var(--tr-mid, 0.15s ease);
}

/* ── 스택 장수별 정밀 계단식 오프셋 (배지와 시각적 낱장 수 1:1 완벽 일치, 무외곽선, 무그림자) ── */

/* [2장 스택] 밑장 1장(0px) + 최상단 1장(-4px) = 정확히 2장 노출 */
.cell-stack-2 .stack-layer-1 {
  transform: translateY(0);
  z-index: 2;
  filter: brightness(0.92);
}
.cell-stack-2 .gothic-tcg-card,
.cell-stack-2 .tile-locked-body {
  transform: translateY(-4px);
  z-index: 10;
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
}

/* [3장 스택] 밑장1(0px) + 밑장2(-4px) + 최상단(-8px) = 정확히 3장 노출 */
.cell-stack-3 .stack-layer-1 {
  transform: translateY(0);
  z-index: 2;
  filter: brightness(0.88);
}
.cell-stack-3 .stack-layer-2 {
  transform: translateY(-4px);
  z-index: 3;
  filter: brightness(0.94);
}
.cell-stack-3 .gothic-tcg-card,
.cell-stack-3 .tile-locked-body {
  transform: translateY(-8px);
  z-index: 10;
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
}

/* [4장 스택] 밑장1(0px) + 밑장2(-3.5px) + 밑장3(-7px) + 최상단(-10.5px) = 정확히 4장 노출 */
.cell-stack-4 .stack-layer-1 {
  transform: translateY(0);
  z-index: 2;
  filter: brightness(0.86);
}
.cell-stack-4 .stack-layer-2 {
  transform: translateY(-3.5px);
  z-index: 3;
  filter: brightness(0.90);
}
.cell-stack-4 .stack-layer-3 {
  transform: translateY(-7px);
  z-index: 4;
  filter: brightness(0.95);
}
.cell-stack-4 .gothic-tcg-card,
.cell-stack-4 .tile-locked-body {
  transform: translateY(-10.5px);
  z-index: 10;
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
}

/* [5장 이상 풀스택] 밑장1(0px) + 밑장2(-3.5px) + 밑장3(-7px) + 밑장4(-10.5px) + 최상단(-14px) = 정확히 5장 노출 */
.cell-stack-5 .stack-layer-1 {
  transform: translateY(0);
  z-index: 2;
  filter: brightness(0.84);
}
.cell-stack-5 .stack-layer-2 {
  transform: translateY(-3.5px);
  z-index: 3;
  filter: brightness(0.88);
}
.cell-stack-5 .stack-layer-3 {
  transform: translateY(-7px);
  z-index: 4;
  filter: brightness(0.92);
}
.cell-stack-5 .stack-layer-4 {
  transform: translateY(-10.5px);
  z-index: 5;
  filter: brightness(0.96);
}
.cell-stack-5 .gothic-tcg-card,
.cell-stack-5 .tile-locked-body {
  transform: translateY(-14px);
  z-index: 10;
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
}

/* 2. 우상단 동적 수치 오버레이 배지 (VALUE ZONE) */
/* 2. 우상단 동적 수치 오버레이 배지 (VALUE ZONE) */
.card-stat-overlay {
  position: absolute;
  top: clamp(1px, 2cqw, 3px);
  right: clamp(1px, 2cqw, 3px);
  z-index: 25;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.5px;
  padding: clamp(1.5px, 2.5cqw, 3px) clamp(3.5px, 5.5cqw, 6px);
  border-radius: 999px;
  font-size: clamp(0.65rem, 16.5cqw, 0.90rem);
  font-weight: 900;
  box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.75);
  pointer-events: none;
  backdrop-filter: blur(4px);
  flex-shrink: 0;
  white-space: nowrap;
  letter-spacing: -0.2px;
}

.stat-badge-monster {
  background: linear-gradient(180deg, #d94254 0%, #8a1c27 100%);
  color: #ffffff;
  border: 1.5px solid #ffa3ae;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.stat-badge-weapon {
  background: linear-gradient(180deg, #4a90e2 0%, #1d4e89 100%);
  color: #ffffff;
  border: 1.5px solid #a4c9f7;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.stat-badge-item {
  background: linear-gradient(180deg, #2d936c 0%, #134f37 100%);
  color: #ffffff;
  border: 1.5px solid #8be8c4;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.badge-icon {
  font-size: 0.95em;
  flex-shrink: 0;
  line-height: 1;
}

.badge-val {
  font-size: 1.05em;
  font-weight: 900;
  letter-spacing: -0.3px;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}

/* 3. 좌상단 스택 표시 배지 (가디언 더미 등 복수 카드) */
.card-stack-indicator {
  position: absolute;
  top: clamp(1px, 2cqw, 3px);
  left: clamp(1px, 2cqw, 3px);
  z-index: 25;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.5px;
  background: linear-gradient(135deg, #ffd166 0%, #ff9e00 100%);
  color: #101120;
  font-size: clamp(0.62rem, 15.5cqw, 0.85rem);
  font-weight: 900;
  padding: clamp(1.5px, 2.5cqw, 3px) clamp(3px, 5cqw, 5.5px);
  border-radius: 999px;
  border: 1px solid #ffffff;
  box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.75);
  pointer-events: none;
  white-space: nowrap;
  letter-spacing: -0.2px;
}

.card-stack-indicator .stack-icon {
  font-size: 0.9em;
  flex-shrink: 0;
  line-height: 1;
}

.card-stack-indicator .stack-val {
  font-size: 1.05em;
  font-weight: 900;
  letter-spacing: -0.3px;
  line-height: 1;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6);
}

/* ── 소형 카드 배지 패딩/간격 반응형 조절 (가독성 폰트 크기 보존, scale 축소 제거) ── */
@container (max-width: 65px) {
  .card-stack-indicator {
    top: 1px;
    left: 1px;
    padding: 1px 3px;
    gap: 1px;
  }
  .card-stat-overlay {
    top: 1px;
    right: 1px;
    padding: 1px 3.5px;
    gap: 1px;
  }
  .card-name-tag {
    bottom: 2px;
    padding: 1px 4px;
    max-width: 94%;
  }
}

@container (max-width: 48px) {
  .card-stack-indicator {
    top: 1px;
    left: 1px;
    padding: 0.5px 2px;
    gap: 0.5px;
  }
  .card-stat-overlay {
    top: 1px;
    right: 1px;
    padding: 0.5px 2.5px;
    gap: 0.5px;
  }
  .card-name-tag {
    bottom: 1px;
    padding: 0.5px 3px;
    max-width: 96%;
  }
}

/* 초소형 화면 안전장치: 수치/더미 최우선 유지, 공간 부족 시 이름표 숨김 */
@container (max-width: 38px) {
  .card-name-tag {
    display: none !important;
  }
}

/* ── 몬스터 고유 애니메이션 (오직 2계층 스프라이트 레이어만 애니메이션) ── */
.monster-anim-hop .card-sprite-wrap,
.monster-anim-hop .card-visual-inner {
  transform-origin: bottom center;
  animation: monsterCardHop 1.15s cubic-bezier(0.28, 0.84, 0.42, 1) infinite;
  animation-delay: var(--anim-delay, 0s);
}
.monster-anim-tilt .card-sprite-wrap,
.monster-anim-tilt .card-visual-inner {
  transform-origin: bottom center;
  animation: monsterCardTilt 1.4s ease-in-out infinite alternate;
  animation-delay: var(--anim-delay, 0s);
}
.monster-anim-pulse .card-sprite-wrap,
.monster-anim-pulse .card-visual-inner {
  transform-origin: center center;
  animation: monsterCardPulse 1.25s ease-in-out infinite alternate;
  animation-delay: var(--anim-delay, 0s);
}
.monster-anim-bounce .card-sprite-wrap,
.monster-anim-bounce .card-visual-inner {
  transform-origin: bottom center;
  animation: monsterCardBounce 1.2s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite;
  animation-delay: var(--anim-delay, 0s);
}
.monster-anim-wobble .card-sprite-wrap,
.monster-anim-wobble .card-visual-inner {
  transform-origin: bottom center;
  animation: monsterCardWobble 1.35s ease-in-out infinite alternate;
  animation-delay: var(--anim-delay, 0s);
}
.monster-anim-float .card-sprite-wrap,
.monster-anim-float .card-visual-inner {
  transform-origin: center center;
  animation: monsterCardFloat 2.2s ease-in-out infinite alternate;
  animation-delay: var(--anim-delay, 0s);
}
.monster-anim-calm .card-sprite-wrap,
.monster-anim-calm .card-visual-inner {
  transform-origin: bottom center;
  animation: monsterCardCalm 3.0s ease-in-out infinite alternate;
  animation-delay: var(--anim-delay, 0s);
}

/* ── 무기 스프라이트 고유 애니메이션 (루닉 광채 & 번쩍임) ── */
.weapon-anim-gleam .card-sprite-wrap,
.weapon-anim-gleam .card-visual-inner {
  transform-origin: center center;
  animation: weaponSpriteGleam 2.4s ease-in-out infinite alternate;
  animation-delay: var(--anim-delay, 0s);
}

/* ── 아이템 스프라이트 고유 애니메이션 (신비로운 부유 & 골드/물약 반짝임) ── */
.item-anim-bob .card-sprite-wrap,
.item-anim-bob .card-visual-inner {
  transform-origin: center center;
  animation: itemSpriteBob 2.2s ease-in-out infinite alternate;
  animation-delay: var(--anim-delay, 0s);
}

/* 1. 톡톡 점프 (Squash & Stretch — 쥐/역병 등) */
@keyframes monsterCardHop {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  18%      { transform: translateY(0) scale(1.08, 0.92); } /* 점프 전 웅크림 */
  45%      { transform: translateY(-9px) scale(0.92, 1.1); } /* 솟구침 */
  70%      { transform: translateY(0) scale(1.06, 0.94); } /* 바닥 착지 찌그러짐 */
  85%      { transform: translateY(-2px) scale(0.98, 1.02); } /* 미세 리바운드 */
}

/* 2. 좌우 기우뚱 (Tilt & Sway — 갑주기사/좀도둑 등) */
@keyframes monsterCardTilt {
  0%   { transform: rotate(-6deg) translateY(0) scale(1); }
  50%  { transform: rotate(0deg) translateY(-2px) scale(1.02); }
  100% { transform: rotate(6deg) translateY(0) scale(1); }
}

/* 3. 음산한 숨쉬기 펄스 */
@keyframes monsterCardPulse {
  0%   { transform: scale(1); filter: brightness(1); }
  50%  { transform: scale(1.08, 1.05) translateY(-2px); filter: brightness(1.18) drop-shadow(0 0 8px rgba(82, 183, 136, 0.7)); }
  100% { transform: scale(0.98, 0.98); filter: brightness(0.95); }
}

/* 4. 리드미컬 깃발 바운스 */
@keyframes monsterCardBounce {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  25%      { transform: translateY(-6px) scale(0.96, 1.05); }
  50%      { transform: translateY(0) scale(1.04, 0.96); }
  75%      { transform: translateY(-3px) scale(0.98, 1.02); }
}

/* 5. 잽싼 흔들림 */
@keyframes monsterCardWobble {
  0%   { transform: translateX(-3px) rotate(-4deg); }
  50%  { transform: translateX(0) rotate(0deg) translateY(-2px); }
  100% { transform: translateX(3px) rotate(4deg); }
}

/* 6. 유령 부유 (Float & Glow) */
@keyframes monsterCardFloat {
  0%   { transform: translateY(0) scale(0.98); opacity: 0.88; filter: drop-shadow(0 2px 4px rgba(157, 78, 221, 0.4)); }
  50%  { transform: translateY(-8px) scale(1.03); opacity: 1; filter: drop-shadow(0 4px 14px rgba(224, 170, 255, 0.85)); }
  100% { transform: translateY(0) scale(0.98); opacity: 0.88; }
}

/* 7. 침착 대기 (모두가 움직일 필요 없이 조화롭게) */
@keyframes monsterCardCalm {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.01, 1.01) translateY(-1px); }
}

/* 8. 무기 루닉 광채 (Weapon Gleam & Sheen) */
@keyframes weaponSpriteGleam {
  0% {
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 2px rgba(72, 202, 228, 0.3));
  }
  50% {
    transform: translateY(-2px) scale(1.02);
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 12px rgba(72, 202, 228, 0.95)) brightness(1.15);
  }
  100% {
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 2px rgba(72, 202, 228, 0.3));
  }
}

/* 무기 셀 호버/활성 시 더 강렬한 번쩍임 */
.cell-weapon:hover .card-sprite-wrap,
.cell-weapon:active .card-sprite-wrap {
  filter: drop-shadow(0 0 16px rgba(72, 202, 228, 1)) brightness(1.22) !important;
}

/* 9. 아이템 신비로운 부유 & 반짝임 (Item Bob & Twinkle) */
@keyframes itemSpriteBob {
  0% {
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 2px rgba(255, 209, 102, 0.25));
  }
  50% {
    transform: translateY(-3px) scale(1.02);
    filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 10px rgba(255, 209, 102, 0.85)) brightness(1.1);
  }
  100% {
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 2px rgba(255, 209, 102, 0.25));
  }
}

/* ── 터치 물결 (Ripple) 이펙트 ───────────────────────────── */
.touch-ripple-effect {
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(255, 209, 102, 0.7) 35%, rgba(157, 78, 221, 0.4) 65%, transparent 100%);
  border: 2px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 18px rgba(255, 209, 102, 0.95), 0 0 30px rgba(157, 78, 221, 0.8);
  pointer-events: none;
  z-index: 999;
  transform: translate(-50%, -50%) scale(0.2);
  animation: touchRippleAnim 0.55s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

.touch-ripple-effect::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px solid rgba(224, 170, 255, 0.8);
  animation: touchRippleOuterRing 0.55s cubic-bezier(0.15, 0.85, 0.35, 1) forwards;
}

@keyframes touchRippleAnim {
  0% {
    transform: translate(-50%, -50%) scale(0.25);
    opacity: 1;
  }
  40% {
    opacity: 0.9;
  }
  100% {
    transform: translate(-50%, -50%) scale(4.8);
    opacity: 0;
    border-width: 0.5px;
  }
}

@keyframes touchRippleOuterRing {
  0%   { transform: scale(0.5); opacity: 0.8; }
  100% { transform: scale(3.5); opacity: 0; }
}

/* ── 화면 진동 (부적 폭발 임팩트) ─────────────────── */
.talisman-screen-shake {
  animation: talismanShakeAnim 0.36s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

#app-container.talisman-screen-shake {
  animation: none !important;
}

@keyframes talismanShakeAnim {
  0%   { transform: translate(0, 0); }
  15%  { transform: translate(-4px, 3px); }
  30%  { transform: translate(4px, -3px); }
  45%  { transform: translate(-3px, -1px); }
  60%  { transform: translate(3px, 2px); }
  80%  { transform: translate(-1px, 1px); }
  100% { transform: translate(0, 0); }
}

/* ── 마법부적 주술 폭발 & 적 처치 화려한 파티클 이펙트 ────── */
.defeat-explosion-container {
  position: absolute;
  pointer-events: none;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

/* ── 마법부적 보라색 지옥불 화염 연소 (Purple Hellfire Incineration) ── */
.defeat-explosion-container.talisman-explosion-container {
  position: absolute;
  pointer-events: none;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

/* 1. 카드가 보라색 화염에 휩싸여 붉게 달아오르다 검은 재로 바스러지는 연소 애니메이션 */
.cell-incinerate-purple {
  animation: cellIncinerateBurnAnim 0.65s cubic-bezier(0.2, 0.8, 0.25, 1) forwards !important;
}

@keyframes cellIncinerateBurnAnim {
  0% {
    filter: brightness(1) drop-shadow(0 0 0 transparent);
  }
  20% {
    /* 발화: 보라색 화염 빛에 휩싸이며 초열 발광 */
    filter: brightness(2.6) contrast(1.6) drop-shadow(0 0 25px #d946ef) drop-shadow(0 0 45px #7c3aed);
    transform: scale(1.05);
  }
  45% {
    /* 연소: 카드가 붉은 숯처럼 타들어가며 일그러짐 */
    filter: brightness(1.8) contrast(2.2) hue-rotate(280deg) drop-shadow(0 0 35px #a855f7);
    transform: scale(0.98) translateY(-2px);
    opacity: 0.9;
  }
  70% {
    /* 붕괴: 검은 재(Ash)로 변하며 형체가 쪼그라듦 */
    filter: brightness(0.4) contrast(2.5) grayscale(0.8) blur(2px);
    transform: scale(0.88) translateY(4px);
    opacity: 0.6;
  }
  100% {
    /* 소멸: 완전 연소되어 연기와 재로 사라짐 */
    filter: brightness(0.1) blur(5px);
    transform: scale(0.75) translateY(8px);
    opacity: 0;
  }
}

/* 2. 마법부적 중심 링 충격파 (Arcane Shockwave Ring) */
.talisman-burst-ring {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--card-h, 85px) * 0.95);
  height: calc(var(--card-h, 85px) * 0.95);
  border-radius: 50%;
  border: 2px solid #e879f9;
  box-shadow: 0 0 16px #d946ef, inset 0 0 12px #a855f7;
  transform: translate(-50%, -50%) scale(0.1);
  animation: talismanRingBurstAnim 0.52s cubic-bezier(0.1, 0.85, 0.25, 1) forwards;
  pointer-events: none;
  z-index: 1002;
}

@keyframes talismanRingBurstAnim {
  0% {
    transform: translate(-50%, -50%) scale(0.1);
    opacity: 1;
    filter: brightness(2.0);
  }
  40% {
    opacity: 0.9;
    filter: brightness(1.5);
  }
  100% {
    transform: translate(-50%, -50%) scale(1.65);
    opacity: 0;
    border-color: #7c3aed;
  }
}

/* 3. 사방으로 시원하게 비산하는 순수 보라빛 마법 불티 파티클 (Talisman Burst Sparks) */
.talisman-burst-spark {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  background: var(--p-color, #f5d0fe);
  box-shadow: 0 0 8px var(--p-color, #f5d0fe), 0 0 18px #d946ef, 0 0 28px #9333ea;
  animation: talismanSparkBurstAnim 0.60s cubic-bezier(0.12, 0.9, 0.28, 1) forwards;
  pointer-events: none;
  z-index: 1005;
}

@keyframes talismanSparkBurstAnim {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.3);
  }
  15% {
    opacity: 1;
    transform: translate(calc(-50% + var(--tx, 0px) * 0.35), calc(-50% + var(--ty, 0px) * 0.35)) scale(1.35);
    filter: brightness(2.2);
  }
  50% {
    opacity: 0.95;
    transform: translate(calc(-50% + var(--tx, 0px) * 0.78), calc(-50% + var(--ty, 0px) * 0.78)) scale(1.0);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--tx, 0px)), calc(-50% + var(--ty, 0px))) scale(0.1);
    filter: brightness(0.7);
  }
}

/* 4. 예리하게 회전하며 뻗어나가는 마법 결정 파편 (Talisman Burst Shards) */
.talisman-burst-shard {
  position: absolute;
  left: 0;
  top: 0;
  background: linear-gradient(135deg, #ffffff 0%, #f5d0fe 40%, #c084fc 100%);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  box-shadow: 0 0 10px #d946ef;
  animation: talismanShardBurstAnim 0.56s cubic-bezier(0.15, 0.88, 0.3, 1) forwards;
  pointer-events: none;
  z-index: 1004;
}

@keyframes talismanShardBurstAnim {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(0deg) scale(0.2);
  }
  20% {
    opacity: 1;
    transform: translate(calc(-50% + var(--tx, 0px) * 0.4), calc(-50% + var(--ty, 0px) * 0.4)) rotate(var(--rot, 90deg)) scale(1.2);
    filter: brightness(1.8);
  }
  70% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--tx, 0px)), calc(-50% + var(--ty, 0px))) rotate(calc(var(--rot, 90deg) * 2.5)) scale(0.1);
  }
}

/* ── 상단 출구 너머 길 (Exit Trail Connector) ───────────────── */
.exit-path-connector {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2px 0 6px;
  margin-top: 0;
  margin-bottom: 2px;
  position: relative;
  overflow: visible;
  flex-shrink: 0; /* 공간 축소 시 상단 진행바 영역 찌그러짐/파묻힘 방어 */
}

.exit-trail-glow {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 140px;
  height: 24px;
  background: radial-gradient(ellipse at 50% 0%, rgba(224, 170, 255, 0.45) 0%, rgba(157, 78, 221, 0.15) 60%, transparent 100%);
  filter: blur(4px);
  pointer-events: none;
}

.exit-trail-stairs {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-bottom: 2px;
}

.exit-trail-stairs .trail-stone {
  display: block;
  height: 2.5px;
  background: linear-gradient(90deg, transparent 0%, rgba(224, 170, 255, 0.8) 50%, transparent 100%);
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(224, 170, 255, 0.6);
  animation: trailStoneGlow 2.0s ease-in-out infinite alternate;
}

.exit-trail-stairs .trail-stone:nth-child(1) { width: 36px; opacity: 0.4; }
.exit-trail-stairs .trail-stone:nth-child(2) { width: 52px; opacity: 0.65; }
.exit-trail-stairs .trail-stone:nth-child(3) { width: 68px; opacity: 0.9; }

@keyframes trailStoneGlow {
  from { opacity: 0.4; filter: drop-shadow(0 0 2px rgba(224, 170, 255, 0.3)); }
  to   { opacity: 0.95; filter: drop-shadow(0 0 8px rgba(224, 170, 255, 0.9)); }
}

.stage-progress-bar {
  width: min(94%, 400px);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 12px;
  background: linear-gradient(180deg, rgba(26, 28, 42, 0.92) 0%, rgba(16, 18, 28, 0.95) 100%);
  border: 1.5px solid rgba(212, 175, 55, 0.4);
  border-radius: 20px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  box-sizing: border-box;
  z-index: 20;
  position: relative;
}

.stage-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  padding: 3px 8px;
  background: rgba(38, 30, 20, 0.85);
  border: 1px solid rgba(243, 199, 102, 0.45);
  border-radius: 10px;
  font-family: var(--font-header);
  line-height: 1;
}

.stage-badge-label {
  font-size: clamp(0.6rem, 1.8cqw, 0.7rem);
  font-weight: 800;
  color: #ffd166;
  letter-spacing: 0.5px;
}

.stage-badge-num {
  font-size: clamp(0.68rem, 2cqw, 0.8rem);
  font-weight: 800;
  color: #ffffff;
}

.stage-badge-divider {
  color: rgba(255, 255, 255, 0.4);
  margin: 0 1px;
}

.stage-track-wrapper {
  flex: 1;
  min-width: 60px;
  position: relative;
  padding: 0 11px; /* 22px 러너 기준 양끝 정렬 인셋 */
  display: flex;
  align-items: center;
}

.stage-track-rail {
  position: relative;
  width: 100%;
  height: 6px;
  background: rgba(14, 16, 26, 0.95);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 6px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8);
}

.stage-track-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #8a5a2b 0%, #c4823f 50%, #f3c766 100%);
  border-radius: 6px;
  box-shadow: 0 0 8px rgba(243, 199, 102, 0.5);
  transition: width 0.6s cubic-bezier(0.34, 1.25, 0.64, 1);
}

.stage-track-nodes {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.stage-node-dot {
  position: absolute;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.25);
  transition: all 0.3s ease;
}

.stage-node-dot.cleared {
  background: #c4823f;
  box-shadow: 0 0 4px #c4823f;
}

.stage-node-dot.active {
  background: #f3c766;
  box-shadow: 0 0 8px #f3c766;
  transform: translate(-50%, -50%) scale(1.4);
}

.stage-runner {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 22px;
  height: 22px;
  transform: translate(-50%, -50%);
  z-index: 10;
  pointer-events: none;
  transition: left 0.6s cubic-bezier(0.34, 1.25, 0.64, 1);
}

.stage-runner-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 6px rgba(243, 199, 102, 0.6));
  animation: stageRunnerBob 2.2s ease-in-out infinite alternate;
}

@keyframes stageRunnerBob {
  0%   { transform: translateY(0) rotate(0deg); }
  50%  { transform: translateY(-2px) rotate(-3deg); }
  100% { transform: translateY(1px) rotate(3deg); }
}

.stage-destination {
  flex-shrink: 0;
  font-family: 'Noto Sans KR', sans-serif;
  font-size: clamp(0.68rem, 2cqw, 0.78rem);
  font-weight: 800;
  color: #a7f3d0;
  text-shadow: 0 0 8px rgba(52, 211, 153, 0.6), 0 1px 2px rgba(0, 0, 0, 0.8);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 3px;
  letter-spacing: -0.2px;
}

.stage-dest-icon {
  font-size: 0.85em;
  filter: drop-shadow(0 0 4px rgba(52, 211, 153, 0.8));
}

/* ── 카드 그리드 본체 ───────────────────────────────────────── */
.grid-card-container {
  position: relative;
  width: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0; /* 세로 공간 부족 시 flex 자식 넘침 방지 */
}

.grid-path-underlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(157, 78, 221, 0.08) 0%, transparent 70%);
}


/* ── 세루리안 블루 반딧불이 앰비언트 캔버스 ── */
.ambient-fireflies-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 71; /* 캐릭터(z-index: 70) 바로 위, 카드들(최대 30)보다 상위 */
}

/* ── 하단 시작 지점 & 내 캐릭터 뒷모습 연출 (Hero Back View) ── */
.start-path-connector {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 0 0 max(4px, env(safe-area-inset-bottom));
  z-index: 70 !important; /* 모든 카드 그리드 셀(최대 30)보다 상위 레이어 */
  pointer-events: none;
  flex-shrink: 0; /* 공간 축소 시 하단 캐릭터 영역 찌그러짐/파묻힘 방어 */
}

/* 출발 디딤돌 */
.start-step-stones {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 0;
  opacity: 0.7;
}

.start-step-stones .stone {
  display: inline-block;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(255, 209, 102, 0.4), rgba(255, 209, 102, 0.8), rgba(255, 209, 102, 0.4));
  box-shadow: 0 0 8px rgba(255, 209, 102, 0.6);
}

.stone-left  { width: 28px; }
.stone-mid   { width: 44px; }
.stone-right { width: 28px; }

/* ── 하단 플레이어 시점 앵커 — 캐릭터 & 패밀리어 ── */
.hero-back-character {
  position: relative;
  width: clamp(270px, 75%, 376px);
  max-width: 376px;
  aspect-ratio: 1175 / 666;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  margin-top: -38px; /* 5×5 기준: 맨 아랫줄 중앙 카드의 이름표(name-tag) 영역 정도만 살짝 가려지는 고정값 (그림/수치 비침범) */
  margin-bottom: -25px; /* 잘린 밑단이 화면 바닥 아래로 묻혀 모션 시에도 보이지 않도록 방어 */
  z-index: 70 !important; /* 모든 카드보다 상위 레이어에 위치 */
  pointer-events: none; /* 클릭 통과 */
}

#player-sprite {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
  background-image: url('assets/images/player.png');
  background-size: 200% 100%;
  background-position: 0 0;
  background-repeat: no-repeat;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: bottom center;
  animation: playerIdleAnim 3s ease-in-out infinite alternate;
}

@keyframes playerIdleAnim {
  0%, 40%   { transform: rotate(0deg); }
  45%       { transform: rotate(-1.5deg); }
  50%       { transform: rotate(1.5deg); }
  55%       { transform: rotate(-1deg); }
  60%, 100% { transform: rotate(0deg); }
}

.hero-react-hop #player-sprite {
  animation: playerStepAnim 0.32s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
}

.hero-react-slash #player-sprite {
  animation: playerSlashAnim 0.38s cubic-bezier(0.18, 0.9, 0.3, 1) forwards !important;
}

.hero-react-hit #player-sprite {
  background-position: 100% 0 !important; /* 피격 이미지 (우측 셀) */
  animation: playerHitFlinch 0.42s ease-out forwards !important;
}

/* 걷는 듯한 가벼운 1스텝 상하 들썩 모션 (스케일 왜곡 제거) */
@keyframes playerStepAnim {
  0%   { transform: translateY(0); }
  35%  { transform: translateY(-7px); }
  70%  { transform: translateY(1.5px); }
  100% { transform: translateY(0); }
}

@keyframes playerHopAnim {
  0%   { transform: translateY(0); }
  35%  { transform: translateY(-7px); }
  70%  { transform: translateY(1.5px); }
  100% { transform: translateY(0); }
}

/* 적 공격 시 베는 타이밍에 맞춘 좌측 수평 베기 모션 (슥 이동 후 감속 복귀) */
@keyframes playerSlashAnim {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  22% {
    /* 날카로운 쾌검 베기 가속 — 좌측 수평으로 슥 이동하며 상체 살짝 기울임 */
    transform: translate(-22px, -2px) rotate(-1.8deg);
  }
  48% {
    /* 베기 끝자락 관성 및 살짝 감속 (팔로우스루) */
    transform: translate(-25px, -1px) rotate(-1.2deg);
  }
  75% {
    /* 복귀 시작 */
    transform: translate(-6px, 0) rotate(-0.4deg);
  }
  100% {
    /* 제자리 복귀 */
    transform: translate(0, 0) rotate(0deg);
  }
}

@keyframes playerHitFlinch {
  0%   { transform: scale(1) translate(0, 0) rotate(0deg); }
  20%  { transform: scale(1.05, 0.92) translate(-4px, 8px) rotate(-2deg); }
  45%  { transform: scale(0.97, 1.03) translate(3px, -4px) rotate(1.5deg); }
  70%  { transform: scale(1.01, 0.99) translate(-1px, 1px) rotate(-0.5deg); }
  100% { transform: scale(1) translate(0, 0) rotate(0deg); }
}

@keyframes heroHitShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px) rotate(-3deg); }
  40%, 80% { transform: translateX(6px) rotate(3deg); }
}

/* 시작 지점 텍스트 태그 (사용자 요청으로 제거) */
.start-marker-tag {
  display: none !important;
}

.cell-bomb-target {
  outline: 2px solid #ff9e00 !important;
  box-shadow: 0 0 16px rgba(255, 158, 0, 0.8), inset 0 0 10px rgba(255, 158, 0, 0.4) !important;
  animation: pulseBombTarget 0.8s ease-in-out infinite alternate !important;
}

@keyframes pulseBombTarget {
  from { outline-color: #ff9e00; box-shadow: 0 0 12px rgba(255, 158, 0, 0.6); }
  to   { outline-color: #ff4d6d; box-shadow: 0 0 24px rgba(255, 77, 109, 0.9); }
}

/* ── 마법까마귀 정찰 모드 스타일 ────────────────────────────── */
.cell-scout-target {
  cursor: crosshair !important;
  outline: 2px dashed #9d4edd !important;
  animation: pulseScoutTarget 1.2s ease-in-out infinite alternate !important;
}

@keyframes pulseScoutTarget {
  from { box-shadow: 0 0 8px rgba(157, 78, 221, 0.5); outline-color: #9d4edd; }
  to   { box-shadow: 0 0 20px rgba(199, 125, 255, 0.9); outline-color: #c77dff; }
}

.cell-scouting {
  outline: 3px solid #c77dff !important;
  box-shadow: 0 0 22px rgba(199, 125, 255, 0.85), inset 0 0 15px rgba(157, 78, 221, 0.6) !important;
  animation: scoutGlow 1.5s ease-in-out infinite alternate !important;
  z-index: 20 !important;
}

/* 정찰 오픈 시 중심(클릭된) 셀 강조 하이라이트 */
.cell-scouting-center {
  outline: 3px solid #f72585 !important;
  box-shadow: 0 0 26px rgba(247, 37, 133, 0.9), inset 0 0 16px rgba(181, 23, 158, 0.7) !important;
}

/* 정찰 오픈 시 어두운 필터(.cell-hidden-far, .cell-hidden-near) 일시 해제하여 선명한 일러스트 표출 */
.cell-scout-revealed {
  filter: none !important;
  opacity: 1 !important;
}

@keyframes scoutGlow {
  0%   { filter: brightness(1); }
  100% { filter: brightness(1.3) drop-shadow(0 0 10px #c77dff); }
}

.scout-overlay-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(60, 9, 108, 0.95);
  border: 1px solid #c77dff;
  color: #e0aaff;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 6px;
  box-shadow: 0 0 8px rgba(199, 125, 255, 0.8);
  pointer-events: none;
  z-index: 25;
}

/* ── 불라바 전술핵 조준 모드 스타일 (Watch와 동일한 조준 가이드 + 레드 테마) ── */
.cell-nuke-target {
  cursor: crosshair !important;
  outline: 2px dashed #ff3b30 !important;
  animation: pulseNukeTarget 1.0s ease-in-out infinite alternate !important;
}

@keyframes pulseNukeTarget {
  from {
    box-shadow: 0 0 8px rgba(255, 59, 48, 0.45);
    outline-color: #ff3b30;
  }
  to {
    box-shadow: 0 0 22px rgba(255, 69, 58, 0.95);
    outline-color: #ff6b6b;
  }
}

/* 전술핵 마우스 호버 시 3×3 범위 가이드 */
.cell-nuke-hover-range {
  outline: 2px dashed #ff5252 !important;
  box-shadow: inset 0 0 18px rgba(255, 82, 82, 0.45), 0 0 18px rgba(255, 23, 68, 0.7) !important;
  animation: pulseNukeRange 0.8s ease-in-out infinite alternate !important;
  z-index: 25 !important;
}

@keyframes pulseNukeRange {
  0%   { outline-color: #ff5252; box-shadow: inset 0 0 14px rgba(255, 82, 82, 0.35), 0 0 14px rgba(255, 23, 68, 0.6); }
  100% { outline-color: #ff1744; box-shadow: inset 0 0 22px rgba(255, 23, 68, 0.65), 0 0 28px rgba(255, 61, 0, 0.9); }
}

/* 전술핵 마우스 호버 시 중심 셀 가이드 */
.cell-nuke-hover-center {
  outline: 3px solid #ff1744 !important;
  box-shadow: inset 0 0 26px rgba(255, 23, 68, 0.7), 0 0 32px rgba(255, 23, 68, 0.95) !important;
  z-index: 30 !important;
  transform: scale(1.03);
  transition: transform 120ms ease-out;
}

/* 전술핵 3×3 타일 순백 광휘 승화(Sublimation) 애니메이션 */
.cell-nuke-disintegrate,
.cell-nuke-atomize,
.cell-nuke-sublimate {
  animation: nukeCellSublimateAnim 0.65s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  pointer-events: none !important;
}

@keyframes nukeCellSublimateAnim {
  0% {
    transform: scale(1);
    filter: brightness(1) drop-shadow(0 0 0 transparent);
    opacity: 1;
  }
  20% {
    transform: scale(1.08);
    filter: brightness(6.0) contrast(1.5) drop-shadow(0 0 35px #ffffff);
    opacity: 1;
  }
  60% {
    transform: scale(0.96) translateY(-16px);
    filter: brightness(3.5) contrast(2) drop-shadow(0 0 22px #ffe082);
    opacity: 0.5;
  }
  100% {
    transform: scale(0.55) translateY(-45px);
    filter: brightness(1.8) blur(6px);
    opacity: 0;
  }
}

/* 폭심지 갱신 타일에 남는 은은한 백금/골드 림라이트 잔광 */
.cell-nuke-scorch {
  animation: nukeRimGlowFade 1.2s ease-out forwards;
}

@keyframes nukeRimGlowFade {
  0% {
    box-shadow: inset 0 0 25px rgba(255, 255, 255, 0.9), 0 0 20px rgba(255, 215, 64, 0.65) !important;
    filter: brightness(1.3);
  }
  50% {
    box-shadow: inset 0 0 14px rgba(255, 235, 59, 0.45) !important;
    filter: brightness(1.1);
  }
  100% {
    box-shadow: none !important;
    filter: none;
  }
}

/* 초신성 순백색 화이트아웃 섬광 (폭발 중심점에서 급팽창하는 초임계 백색 섬광) */
.nuke-gamma-flash,
.nuke-supernova-flash {
  position: absolute;
  inset: -15%;
  width: 130%;
  height: 130%;
  pointer-events: none;
  z-index: 180;
  --nuke-cx: 50%;
  --nuke-cy: 50%;
  transform-origin: var(--nuke-cx, 50%) var(--nuke-cy, 50%);
  background: radial-gradient(
    circle 1000px at var(--nuke-cx, 50%) var(--nuke-cy, 50%),
    #ffffff 0%,
    #ffffff 50%,
    rgba(255, 250, 240, 0.98) 70%,
    rgba(255, 224, 130, 0.75) 85%,
    rgba(255, 23, 68, 0.25) 100%
  );
  animation: nukeSupernovaExplosiveFlash 0.8s cubic-bezier(0.1, 0.9, 0.2, 1) forwards;
}

@keyframes nukeSupernovaExplosiveFlash {
  0% {
    opacity: 0.4;
    transform: scale(0.35);
  }
  12% {
    opacity: 1;
    transform: scale(1.0);
  }
  32% {
    opacity: 0.92;
    transform: scale(1.02);
  }
  65% {
    opacity: 0.35;
    transform: scale(1.05);
  }
  100% {
    opacity: 0;
    transform: scale(1.08);
  }
}

/* 공습 경보 비네트 (붉은 스트로브 플래시) */
.nuke-alert-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 145;
  box-shadow: inset 0 0 90px rgba(255, 23, 68, 0.75);
  animation: nukeAlertVignettePulse 0.32s ease-in-out infinite alternate;
}

@keyframes nukeAlertVignettePulse {
  0%   { opacity: 0.35; box-shadow: inset 0 0 60px rgba(255, 23, 68, 0.4); }
  100% { opacity: 0.85; box-shadow: inset 0 0 120px rgba(255, 0, 0, 0.9); }
}

/* 락온 타겟팅 HUD 오버레이 (하이테크 군사 조준경) */
.tactical-nuke-lockon {
  position: absolute;
  pointer-events: none;
  z-index: 160;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  width: 140px;
  height: 140px;
}

.tactical-nuke-lockon-ring {
  position: absolute;
  inset: 0;
  border: 2px dashed #ff1744;
  border-radius: 50%;
  animation: nukeLockonSpin 2.0s linear infinite;
  box-shadow: 0 0 25px rgba(255, 23, 68, 0.85), inset 0 0 20px rgba(255, 23, 68, 0.5);
}

.tactical-nuke-lockon-reticle {
  position: absolute;
  width: 70px;
  height: 70px;
  border: 2px solid #ff5252;
  border-radius: 50%;
  animation: nukeLockonPulse 0.5s ease-in-out infinite alternate;
}

.tactical-nuke-lockon-crosshair-h {
  position: absolute;
  width: 160px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #ff1744, #fff, #ff1744, transparent);
}

.tactical-nuke-lockon-crosshair-v {
  position: absolute;
  height: 160px;
  width: 2px;
  background: linear-gradient(180deg, transparent, #ff1744, #fff, #ff1744, transparent);
}

.tactical-nuke-lockon-corners {
  position: absolute;
  inset: 12px;
  border: 2px solid transparent;
  border-top-color: #ff1744;
  border-bottom-color: #ff1744;
  animation: nukeLockonCornerPulse 0.4s ease-in-out infinite alternate;
}

@keyframes nukeLockonCornerPulse {
  0% { transform: scale(0.92); opacity: 0.6; }
  100% { transform: scale(1.05); opacity: 1; }
}

.tactical-nuke-lockon-label {
  position: absolute;
  bottom: -28px;
  background: rgba(30, 0, 0, 0.92);
  border: 1.5px solid #ff1744;
  color: #ff1744;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 1.5px;
  padding: 3px 10px;
  border-radius: 4px;
  white-space: nowrap;
  box-shadow: 0 0 16px rgba(255, 23, 68, 0.85);
  animation: nukeLockonPulse 0.4s ease-in-out infinite alternate;
}

@keyframes nukeLockonSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes nukeLockonPulse {
  0%   { transform: scale(0.95); opacity: 0.8; }
  100% { transform: scale(1.08); opacity: 1; filter: drop-shadow(0 0 12px #ff1744); }
}

/* 대지진급 초강력 복합 화면 진동 */
.nuke-screen-shake-heavy {
  animation: nukeScreenShakeAnim 1.25s cubic-bezier(0.25, 1, 0.5, 1) both !important;
}

@keyframes nukeScreenShakeAnim {
  0%, 100% { transform: translate3d(0, 0, 0); }
  4%  { transform: translate3d(-18px, 16px, 0) rotate(-2.5deg); }
  8%  { transform: translate3d(19px, -15px, 0) rotate(2.2deg); }
  12% { transform: translate3d(-17px, 14px, 0) rotate(-2.0deg); }
  16% { transform: translate3d(16px, -13px, 0) rotate(1.8deg); }
  22% { transform: translate3d(-14px, 11px, 0) rotate(-1.5deg); }
  28% { transform: translate3d(12px, -10px, 0) rotate(1.2deg); }
  35% { transform: translate3d(-10px, 8px, 0) rotate(-0.9deg); }
  45% { transform: translate3d(8px, -7px, 0) rotate(0.6deg); }
  55% { transform: translate3d(-6px, 5px, 0); }
  70% { transform: translate3d(4px, -3px, 0); }
  85% { transform: translate3d(-2px, 2px, 0); }
}

/* ── 부적 플로터 (B파트) ── */
.floater-icon-img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain;
  pointer-events: none;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  outline: none !important;
  border-radius: 0 !important;
  padding: 3px;
  box-sizing: border-box;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  user-select: none;
  backface-visibility: hidden;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.6));
}


.item-floater,
.charm-floater {
  position: absolute;
  width: clamp(65px, 18cqw, 80px);
  aspect-ratio: 1 / 1;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 50% !important;
  overflow: visible !important;
  -webkit-tap-highlight-color: transparent !important;
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  pointer-events: auto;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.2s ease;
  will-change: transform;
  isolation: isolate;
}

.item-floater:focus,
.item-floater:active,
.item-floater:focus-visible,
.charm-floater:focus,
.charm-floater:active,
.charm-floater:focus-visible {
  outline: none !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* 4개 슬롯 위치: 좌상, 우상, 좌하, 우하 (맨 아랫열 카드와 겹치지 않도록 top 위치 조정 및 균형 배치) */
.item-floater-top-left,
.item-floater-left {
  top: 15%;
  left: -4%;
  animation: itemFloatTopLeft 3.0s ease-in-out infinite alternate;
}

.item-floater-top-right,
.item-floater-right {
  top: 15%;
  right: -4%;
  animation: itemFloatTopRight 2.8s ease-in-out infinite alternate;
}

.item-floater-bottom-left {
  top: 42%;
  left: -18%;
  animation: itemFloatBottomLeft 3.3s ease-in-out infinite alternate;
}

.item-floater-bottom-right {
  top: 42%;
  right: -18%;
  animation: itemFloatBottomRight 3.1s ease-in-out infinite alternate;
}

.floater-icon-emoji {
  font-size: clamp(2.15rem, 6.8cqw, 2.9rem);
  pointer-events: none;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.7));
  line-height: 1;
  user-select: none;
}

.item-floater.charm-appear-pop,
.charm-floater.charm-appear-pop {
  animation: charmAppearPop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
}

@keyframes charmAppearPop {
  0%   { transform: scale(0.1); opacity: 0; filter: brightness(2.5) drop-shadow(0 0 35px #d946ef); }
  55%  { transform: scale(1.35); opacity: 1; filter: brightness(1.8) drop-shadow(0 0 30px #a855f7); }
  80%  { transform: scale(0.92); opacity: 1; }
  100% { transform: scale(1); opacity: 1; filter: brightness(1) drop-shadow(0 4px 10px rgba(0,0,0,0.6)); }
}

.item-floater.selected,
.charm-floater.selected {
  filter: drop-shadow(0 0 15px rgba(255, 183, 3, 0.95)) drop-shadow(0 0 25px rgba(255, 140, 0, 0.6));
  transform: scale(1.18);
  z-index: 60 !important;
}

.item-floater.armed {
  filter: drop-shadow(0 0 15px rgba(72, 191, 227, 0.95)) drop-shadow(0 0 25px rgba(100, 223, 223, 0.7));
  transform: scale(1.15);
  z-index: 60 !important;
}

/* 4슬롯 개별 부유 애니메이션 (90% 크기 축소치에 대응하여 7~9px) */
@keyframes itemFloatTopLeft {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(-2px, -8px); }
}

@keyframes itemFloatTopRight {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(2px, -8px); }
}

@keyframes itemFloatBottomLeft {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(-3px, 7px); }
}

@keyframes itemFloatBottomRight {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(3px, 7px); }
}

@keyframes charmFloatAnim {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-9px); }
}

@keyframes charmPulse {
  0%   { filter: brightness(1) drop-shadow(0 0 15px rgba(255, 183, 3, 0.5)); }
  100% { filter: brightness(1.4) drop-shadow(0 0 25px rgba(255, 183, 3, 1)); }
}

.hero-speech-bubble {
  position: absolute;
  bottom: 105%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(12, 10, 26, 0.95);
  border: 2px solid #ffb703;
  color: #fff;
  padding: 8px 14px;
  border-radius: 16px;
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.8), 0 0 12px rgba(255, 183, 3, 0.4);
  z-index: 80 !important;
  pointer-events: none;
  animation: bubblePop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.hero-speech-bubble::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: #ffb703 transparent transparent transparent;
}

@keyframes bubblePop {
  0%   { opacity: 0; transform: translateX(-50%) scale(0.8) translateY(10px); }
  100% { opacity: 1; transform: translateX(-50%) scale(1) translateY(0); }
}

/* ── 도감 플로터 (L파트) — 캐릭터 좌측 어깨 공백 부근 ── */
.bestiary-floater {
  position: absolute;
  top: 26%; /* 캐릭터 좌측 어깨 공백 부근 */
  left: -20%;
  width: clamp(70px, 20cqw, 84px); /* 이전 크기감 대비 2배 확대 */
  aspect-ratio: 1 / 1;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  pointer-events: auto;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  animation: bestiaryFloatAnim 3.2s ease-in-out infinite alternate;
}

.bestiary-floater:hover {
  transform: scale(1.1) translateY(-4px);
  filter: drop-shadow(0 0 10px rgba(255, 209, 102, 0.7));
}

.bestiary-floater:active {
  transform: scale(0.94);
}

@keyframes bestiaryFloatAnim {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-10px); }
}

.cell-pop-in {
  animation: cellPopIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes cellPopIn {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── 플레이어 공격 / 몬스터 처치 가로 베기 이펙트 (Luminous Slash Effect) ── */
.slash-horizontal-container {
  position: absolute;
  pointer-events: none;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
}

/* 1. 타격 중심부 수평 섬광 (순간 임팩트) */
.slash-impact-flash {
  position: absolute;
  width: 120%;
  height: calc(64px * var(--blade-scale, 1));
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.98) 0%, rgba(255, 120, 0, 0.6) 35%, rgba(255, 40, 75, 0.25) 65%, transparent 80%);
  filter: drop-shadow(0 0 16px #ff5722);
  animation: slashImpactFlashAnim 0.22s ease-out forwards;
}

@keyframes slashImpactFlashAnim {
  0%   { transform: scale(0.2); opacity: 0; }
  20%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* 2. 가로 검기 궤적 (Luminous Horizontal Blade Arc) */
.slash-blade-arc {
  position: absolute;
  width: 150%;
  height: calc(90px * var(--blade-scale, 1));
  overflow: visible;
  filter: drop-shadow(0 0 12px rgba(255, 70, 35, 0.95)) drop-shadow(0 0 4px #ffffff);
  animation: slashHorizontalBlade 0.32s cubic-bezier(0.12, 0.95, 0.25, 1) forwards;
}

@keyframes slashHorizontalBlade {
  0% {
    transform: scaleX(0.05) scaleY(0.2);
    opacity: 0;
    transform-origin: 0% 50%;
  }
  20% {
    transform: scaleX(1.05) scaleY(1.1);
    opacity: 1;
  }
  55% {
    transform: scaleX(1.12) scaleY(1.25);
    opacity: 0.95;
  }
  100% {
    transform: scaleX(1.18) scaleY(0.15);
    opacity: 0;
  }
}

/* 3. 예리한 가로 광선 (Razor-sharp Light Streak) */
.slash-light-streak {
  position: absolute;
  width: 155%;
  height: calc(3.5px * var(--blade-scale, 1));
  left: -27.5%;
  top: calc(50% - 1.75px * var(--blade-scale, 1));
  border-radius: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 120, 0, 0.25) 10%, #ffffff 50%, rgba(255, 45, 85, 0.25) 90%, transparent 100%);
  box-shadow: 0 0 10px #ff6a00, 0 0 20px #ff2d55, 0 0 4px #ffffff;
  animation: slashStreakAnim 0.28s cubic-bezier(0.08, 0.85, 0.2, 1) forwards;
}

@keyframes slashStreakAnim {
  0%   { transform: scaleX(0.05); opacity: 0; transform-origin: 0% 50%; }
  25%  { transform: scaleX(1.08); opacity: 1; }
  60%  { transform: scaleX(1.15); opacity: 0.85; }
  100% { transform: scaleX(1.22); opacity: 0; }
}

/* 4. 가로로 튀어나가는 칼날 스파크 파편 */
.slash-blade-spark {
  position: absolute;
  width: calc(var(--spark-w, 14px) * var(--blade-scale, 1));
  height: calc(var(--spark-h, 2.5px) * var(--blade-scale, 1));
  background: #ffffff;
  border-radius: 1px;
  box-shadow: 0 0 7px #ff7b00, 0 0 14px #ff2d55, 0 0 2px #ffffff;
  transform-origin: center center;
  animation: slashSparkAnim 0.32s cubic-bezier(0.15, 0.85, 0.35, 1) forwards;
}

@keyframes slashSparkAnim {
  0% {
    transform: translate(0, 0) rotate(var(--rot, 0deg)) scale(1.4);
    opacity: 1;
  }
  60% {
    opacity: 0.9;
  }
  100% {
    transform: translate(calc(var(--tx, 45px) * var(--blade-scale, 1)), calc(var(--ty, 0px) * var(--blade-scale, 1))) rotate(var(--rot, 0deg)) scale(0.2);
    opacity: 0;
  }
}

/* ── 플레이어 피해 오버레이 ──────────────────────────────────── */
.player-hit-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 500;
  border-radius: inherit;
  animation: playerHitFlash 0.65s ease-out forwards;
}

@keyframes playerHitFlash {
  0%   { box-shadow: inset 0 0 0 6px rgba(230, 57, 70, 0.0), inset 0 0 40px rgba(230, 57, 70, 0.0); }
  15%  { box-shadow: inset 0 0 0 6px rgba(230, 57, 70, 0.9), inset 0 0 60px rgba(230, 57, 70, 0.6); background: rgba(230, 57, 70, 0.12); }
  40%  { box-shadow: inset 0 0 0 4px rgba(230, 57, 70, 0.7), inset 0 0 40px rgba(230, 57, 70, 0.4); }
  100% { box-shadow: inset 0 0 0 2px rgba(230, 57, 70, 0.0), inset 0 0 0 rgba(0,0,0,0); background: transparent; }
}

/* 데미지 수치 플로팅 텍스트 */
.player-hit-label {
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-header);
  font-size: clamp(2rem, 6cqw, 3rem);
  font-weight: 900;
  color: #ff4d6d;
  text-shadow: 0 0 20px #ff0000, 0 0 40px rgba(230, 57, 70, 0.8), 2px 2px 0 #000;
  letter-spacing: 2px;
  animation: dmgFloat 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  pointer-events: none;
}

@keyframes dmgFloat {
  0%   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.4); }
  30%  { opacity: 1; transform: translateX(-50%) translateY(-20px) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-60px) scale(0.8); }
}

/* HP HUD 빨간 번쩍임 */
.hp-slash-hit {
  animation: hpHitPulse 0.6s ease-out forwards !important;
  border-color: rgba(255, 77, 109, 1) !important;
}

@keyframes hpHitPulse {
  0%   { background: rgba(230, 57, 70, 0.7); color: #ffffff; transform: scale(1.2); }
  30%  { background: rgba(230, 57, 70, 0.4); }
  100% { background: rgba(26, 27, 46, 0.85); color: #ff758f; transform: scale(1); }
}

/* ── 무기 룬 엣지 광채 플래시 이펙트 ────────────────────────────── */
.weapon-glow-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  border-radius: var(--card-radius, 8px);
  border: 1.5px solid rgba(144, 224, 239, 0.95);
  box-shadow:
    0 0 12px 2px rgba(0, 180, 216, 0.8),
    inset 0 0 8px 1px rgba(255, 255, 255, 0.6);
  animation: weaponRuneEdgeBurst 0.52s cubic-bezier(0.12, 0.9, 0.25, 1) forwards;
}

@keyframes weaponRuneEdgeBurst {
  0% {
    opacity: 0;
    transform: scale(0.92);
    filter: brightness(2.0);
  }
  25% {
    opacity: 1;
    transform: scale(1.03);
    border-color: #ffffff;
    box-shadow:
      0 0 20px 4px rgba(0, 180, 216, 0.95),
      0 0 35px 8px rgba(72, 202, 228, 0.6),
      inset 0 0 15px rgba(255, 255, 255, 0.8);
  }
  60% {
    opacity: 0.85;
    transform: scale(1.0);
  }
  100% {
    opacity: 0;
    transform: scale(1.05);
    border-color: rgba(0, 119, 182, 0);
    box-shadow:
      0 0 0 0 rgba(0, 180, 216, 0),
      inset 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

/* ── 신비로운 빛 파티클 이펙트 ───────────────────────────────── */
.mystic-particle-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 55;
  overflow: visible;
}

.mystic-particle {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  animation: mysticRise linear forwards;
}

@keyframes mysticRise {
  0%   {
    opacity: 0;
    transform: translateY(0) scale(0.5);
  }
  15%  {
    opacity: 0.9;
    transform: translateY(-8px) scale(1);
  }
  70%  {
    opacity: 0.7;
    transform: translateY(-55px) scale(0.8);
  }
  100% {
    opacity: 0;
    transform: translateY(-90px) scale(0.3);
  }
}

/* ── 오버레이 & 고서(Grimoire) 테마 ────────────────────────── */
.overlay {
  position: absolute;
  inset: -4px; /* 부모 컨테이너의 1px border 및 서브픽셀 스케일링 틈새를 완전히 덮어 비침 차단 */
  background: radial-gradient(circle at 50% 40%, rgba(20, 22, 36, 0.94) 0%, rgba(8, 10, 18, 0.98) 100%);
  backdrop-filter: blur(14px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 0;
}

.overlay-content {
  padding: 20px;
  max-width: 100%;
  width: 100%;
  max-height: 98%;
  overflow-y: auto;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(28, 30, 48, 0.97) 0%, rgba(18, 20, 32, 0.98) 100%);
  border: 2px solid rgba(212, 175, 55, 0.45);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 230, 160, 0.2);
}

/* ── 풀스크린 모달 (바깥 테두리/박스 제거, 100% 뷰포트 페이지) ── */
.overlay-content-fullscreen {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #0d0f1a !important;
  overflow: hidden !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  display: flex;
  flex-direction: column;
  padding: 0 !important;
}

.overlay-content-fullscreen::before {
  display: none !important;
}

/* ── 모달 상단 고정 헤더 바 (타이틀 + 우측 닫기 버튼 일체형) ── */
.modal-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: max(12px, env(safe-area-inset-top)) 16px 12px;
  background: linear-gradient(180deg, rgba(24, 26, 42, 0.98) 0%, rgba(16, 18, 28, 0.98) 100%);
  border-bottom: 1px solid rgba(212, 175, 55, 0.25);
  flex-shrink: 0;
  z-index: 20;
}

.modal-header-title {
  font-family: var(--font-header);
  font-size: 1.25rem;
  color: var(--clr-gold);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.modal-title-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
  vertical-align: middle;
}

.btn-close-fullscreen {
  position: static !important;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(36, 38, 58, 0.85);
  border: 1.2px solid rgba(243, 199, 102, 0.45);
  color: var(--clr-gold);
  font-size: 1.15rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  transition: transform var(--tr-fast), background var(--tr-fast), border-color var(--tr-fast);
}
.btn-close-fullscreen:hover {
  transform: scale(1.08);
  background: rgba(50, 52, 80, 0.95);
  border-color: var(--clr-gold-light);
  color: #fff;
}
.btn-close-fullscreen:active {
  transform: scale(0.92);
}

/* ── 스토리 헤더 (슬림 & 정돈된 인트로 카드) ── */
.tutorial-story-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  margin: 10px 12px 8px;
  background: linear-gradient(135deg, rgba(38, 32, 24, 0.6) 0%, rgba(22, 24, 38, 0.6) 100%);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 12px;
  flex-shrink: 0;
}

.tut-story-img {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  object-fit: cover;
  object-position: center;
  border: 1.5px solid var(--clr-gold);
  box-shadow: 0 0 8px rgba(243, 199, 102, 0.3);
  flex-shrink: 0;
}

.tut-story-text-wrap {
  flex: 1;
  min-width: 0;
}

.tut-story-title {
  font-size: 1.02rem;
  color: var(--clr-gold);
  font-weight: 800;
  margin-bottom: 2px;
}

.tut-story-desc {
  font-size: 0.84rem;
  color: var(--clr-text-dim);
  line-height: 1.38;
  word-break: keep-all;
}

.tutorial-panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.tutorial-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 0;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 12px 16px;
}

.tutorial-list li,
.tut-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  background: rgba(22, 25, 40, 0.75);
  border: 1px solid rgba(212, 175, 55, 0.18);
  border-radius: 12px;
  line-height: 1.42;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  transition: transform var(--tr-fast), border-color var(--tr-fast), background var(--tr-fast);
}

.tutorial-list li:hover,
.tut-item:hover {
  background: rgba(28, 32, 52, 0.85);
  border-color: rgba(243, 199, 102, 0.4);
}

/* ── 튜토리얼 카드 미니어처 썸네일 (게임 어셋 활용, 68x90px 3:4 비율) ── */
.tut-card-thumb {
  width: 68px;
  height: 90px;
  flex-shrink: 0;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(212, 175, 55, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 17, 26, 0.9);
}

.tut-card-thumb .tut-card-plate {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: 1;
}

.tut-card-thumb .tut-thumb-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  z-index: 2;
  padding: 2px;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.7));
  transition: transform var(--tr-fast);
}

.tut-card-thumb img[src*="hero_girl"] {
  transform: scale(1.22) translateY(-2px);
}

.tut-card-thumb.thumb-tile {
  background: radial-gradient(circle, #2a2538 0%, #151322 100%);
  border: 1.5px solid rgba(212, 175, 55, 0.45);
}

.tut-card-thumb .card-name-tag {
  display: none !important;
}

.tut-item-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

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

.tut-name {
  font-size: 1.08rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.2px;
}

.tut-desc {
  font-size: 0.88rem;
  color: rgba(220, 218, 228, 0.85);
  line-height: 1.42;
  word-break: keep-all;
}

.tut-icon {
  font-size: 1.5rem;
  line-height: 1.1;
  flex-shrink: 0;
}

.tutorial-buttons {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 8px;
  flex-shrink: 0;
}

.tutorial-buttons .btn {
  width: 100%;
  min-height: 48px;
  font-size: 1.05rem;
  font-weight: 800;
  border-radius: 16px;
  letter-spacing: 0.3px;
}

.tutorial-content {
  overflow: hidden !important;
}

.bestiary-unknown {
  opacity: 0.7;
  color: var(--clr-text-muted);
}

.exit-path {
  color: #e0aaff !important;
}

/* ── 토스트 (Wildfrost 둥근 알림 뱃지) ───────────────────────── */
.toast {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: linear-gradient(180deg, rgba(35, 38, 58, 0.96) 0%, rgba(20, 22, 36, 0.98) 100%);
  color: var(--clr-text);
  padding: 0.7em 1.4em;
  border-radius: 20px;
  border: 1.5px solid rgba(212, 175, 55, 0.5);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  font-size: var(--fs-sm);
  font-weight: 800;
  z-index: 300;
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
  pointer-events: none;
}

.toast.toast-visible,
.toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* 상점 아이템 구매 등 화면 정중앙 토스트 전용 모디파이어 */
.toast.toast-center {
  bottom: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.85);
  text-align: center;
  max-width: calc(100% - 32px);
  word-break: keep-all;
}

.toast.toast-center.toast-visible,
.toast.toast-center.show {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  pointer-events: auto;
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── 일시정지 메뉴 (Wildfrost 탐험 일지) ─────────────────────────── */

.pause-menu-content,
.overlay-content.pause-menu-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-sm);
  padding: 28px 24px 24px;
  width: min(94%, 460px);
  max-width: 480px;
  border-radius: 22px;
  border: 2px solid rgba(212, 175, 55, 0.5);
  background: linear-gradient(180deg, rgba(28, 30, 48, 0.98) 0%, rgba(18, 19, 32, 0.99) 100%);
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.88), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  animation: pauseMenuIn 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
}

@keyframes pauseMenuIn {
  from { opacity: 0; transform: scale(0.88) translateY(-12px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.tome-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 2px;
}

.tome-icon-symbol {
  font-size: 1.4rem;
}

.pause-menu-title {
  font-family: var(--font-header);
  font-size: 1.35rem;
  color: var(--clr-gold);
  letter-spacing: 1px;
  margin: 0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

.tome-ornament-line {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-bottom: 16px;
  color: var(--clr-gold);
  font-size: 0.85rem;
  opacity: 0.75;
}
.tome-ornament-line::before,
.tome-ornament-line::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(243, 199, 102, 0.5), transparent);
}
.tome-ornament-line span {
  padding: 0 8px;
}

/* 일시정지 메뉴 내 뷰 컨테이너 */
.pause-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}

/* 일시정지 메뉴 메인 버튼들 */
.pause-btn {
  width: 100%;
  min-height: 50px;
  padding: 13px 20px;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.3px;
  border-radius: 16px;
  white-space: nowrap;
}

/* 메인 메뉴 나가기 버튼 전용 차분한 톤 */
.btn-exit-tone {
  background: linear-gradient(180deg, #2a2538 0%, #1e1b29 100%);
  border-color: rgba(180, 140, 70, 0.35);
  color: #c9c5d6;
}
.btn-exit-tone:hover {
  border-color: rgba(217, 66, 84, 0.6);
  color: #ff94a2;
}

/* 탐험 포기 및 랭킹 정산 버튼 전용 앤틱 앰버 골드 톤 */
.btn-settle-tone {
  background: linear-gradient(180deg, #3d3122 0%, #261e14 100%);
  border: 1.5px solid rgba(243, 199, 102, 0.55);
  color: #ffeab0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}
.btn-settle-tone:hover {
  border-color: #ffd875;
  color: #ffffff;
  background: linear-gradient(180deg, #52402c 0%, #352819 100%);
  box-shadow: 0 4px 16px rgba(243, 199, 102, 0.35);
}

/* 확인 뷰 내 메시지: 줄바꿈 단어 보존 */
.pause-confirm-msg {
  font-size: 1.02rem;
  color: var(--clr-text);
  font-weight: 800;
  line-height: 1.45;
  margin-bottom: 8px;
  word-break: keep-all;
  text-align: center;
}

.pause-confirm-sub {
  display: block;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--clr-text-dim);
  margin-top: 6px;
  word-break: keep-all;
  line-height: 1.4;
}

.pause-confirm-btns {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 12px;
  width: 100%;
  margin-top: 6px;
}

/* 확인창 버튼 크기 및 비율: 가로 2열 배치 시 텍스트 1줄 보장 */
.pause-btn-confirm {
  flex: 1;
  min-height: 48px;
  padding: 12px 14px;
  font-size: 1rem;
  white-space: nowrap;
  letter-spacing: 0.2px;
}

/* 위험 나가기 버튼 강조 */
.btn-danger-tone {
  background: linear-gradient(180deg, #d94254 0%, #9e2a3b 100%);
  border: 1.5px solid #ff94a2;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.btn-danger-tone:hover {
  filter: brightness(1.1);
  box-shadow: 0 6px 16px rgba(217, 66, 84, 0.4);
}

.pause-btn-confirm.btn-settle-tone {
  background: linear-gradient(180deg, #c4823f 0%, #8a531e 100%);
  border: 1.5px solid #ffe39f;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.pause-btn-confirm.btn-settle-tone:hover {
  filter: brightness(1.1);
  box-shadow: 0 6px 16px rgba(196, 130, 63, 0.45);
}

.btn-menu-hud {
  min-width: 40px;
  width: 40px;
  min-height: 40px;
  height: 40px;
  font-size: 1.2rem;
  border-radius: 10px;
  background: linear-gradient(180deg, #2c2f44 0%, #1c1e2d 100%);
  border: 1.5px solid rgba(212, 175, 55, 0.45);
  color: var(--clr-gold);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  transition: transform var(--tr-fast), background var(--tr-fast);
}
.btn-menu-hud:active {
  transform: scale(0.92);
}

/* ── 도감 & 튜토리얼 책갈피 탭 (모던 세그먼트 컨트롤 디자인) ── */
.bestiary-tabs,
.tutorial-tabs {
  display: flex;
  gap: 4px;
  margin: 10px 12px 10px;
  padding: 3px;
  background: rgba(14, 16, 26, 0.85);
  border: 1px solid rgba(212, 175, 55, 0.22);
  border-radius: 10px;
  flex-shrink: 0;
}

.tab-btn,
.tutorial-tab-btn {
  flex: 1;
  padding: 9px 4px;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 800;
  background: transparent;
  color: var(--clr-text-dim);
  border: 1px solid transparent;
  border-radius: 7px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  white-space: nowrap;
  transition: all var(--tr-fast);
}

.tab-btn.active,
.tutorial-tab-btn.active {
  background: linear-gradient(180deg, #3d3222 0%, #201e2c 100%);
  color: var(--clr-gold-light);
  border-color: rgba(243, 199, 102, 0.5);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.bestiary-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  margin-bottom: 0;
  padding: 0 12px 16px;
}

.bestiary-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  background: rgba(22, 25, 40, 0.75);
  border-radius: 12px;
  border: 1px solid rgba(212, 175, 55, 0.18);
  line-height: 1.42;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  transition: transform var(--tr-fast), border-color var(--tr-fast), background var(--tr-fast);
}

.bestiary-item:hover {
  background: rgba(28, 32, 52, 0.85);
  border-color: rgba(243, 199, 102, 0.4);
}

.bestiary-card-thumb {
  width: 68px;
  height: 90px;
  flex-shrink: 0;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(212, 175, 55, 0.35);
}

.bestiary-card-thumb.cell-hidden {
  border-radius: 8px !important;
}

.bestiary-card-thumb.cell-hidden .lock-icon {
  font-size: 1.8rem;
}

.bestiary-card-thumb .card-name-tag {
  display: none !important;
}

.bestiary-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

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

.bestiary-name {
  font-size: 1.08rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.2px;
}

.bestiary-rule-tag,
.tut-rule-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 0.78rem;
  font-weight: 700;
  border-radius: 8px;
  background: rgba(20, 16, 30, 0.9);
  border: 1px solid rgba(243, 199, 102, 0.45);
  color: var(--clr-gold);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  line-height: 1.25;
}

.tut-rule-danger {
  border-color: rgba(217, 66, 84, 0.6);
  color: #ff94a2;
  background: rgba(45, 18, 24, 0.85);
}

.tut-rule-warning {
  border-color: rgba(243, 199, 102, 0.6);
  color: #ffe39f;
  background: rgba(42, 34, 18, 0.85);
}

.tut-rule-special {
  border-color: rgba(74, 144, 226, 0.6);
  color: #8ec5fc;
  background: rgba(18, 30, 48, 0.85);
}

.tag-unknown {
  opacity: 0.6;
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--clr-text-dim);
}

.bestiary-desc {
  font-size: 0.88rem;
  color: rgba(220, 218, 228, 0.85);
  line-height: 1.42;
  word-break: keep-all;
}

/* ── 레벨 클리어 & 게임 오버 결과 화면 ─────────────────────── */
.screen-result {
  justify-content: center;
  align-items: center;
  background: radial-gradient(circle at 50% 40%, rgba(20, 22, 36, 0.92) 0%, rgba(8, 10, 18, 0.96) 100%);
  backdrop-filter: blur(14px);
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* 폭죽 파티클 캔버스 */
.level-clear-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

.result-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 14px 16px 12px;
  width: min(86%, 335px);
  max-width: 340px;
  gap: 5px;
  animation: celebrationCardEntrance 0.35s ease-out forwards;
  position: relative;
  z-index: 20;
  border-radius: 18px;
}

/* 팝업 테두리 박스 이중 라운딩 겹침 결함 원천 차단: gothic-card의 24px 마스크 림 비활성화 */
.result-container.gothic-card::before,
.level-clear-card::before,
.overlay-content.gothic-card::before,
.pause-menu-content::before,
.ranking-overlay-content::before,
.shop-modal-card::before {
  display: none !important;
}

/* 레벨 클리어 전용 카드 스타일 (화면 뒤쪽 폭죽 효과가 잘 보이도록 지나치지 않게 균형 조절) */
.level-clear-card {
  background: linear-gradient(180deg, rgba(28, 30, 48, 0.97) 0%, rgba(18, 20, 32, 0.98) 100%);
  border: 2px solid rgba(243, 199, 102, 0.7);
  box-shadow:
    0 16px 45px rgba(0, 0, 0, 0.85),
    0 0 24px rgba(243, 199, 102, 0.3),
    inset 0 1px 0 rgba(255, 230, 160, 0.35);
  border-radius: 18px;
  padding: 13px 16px 11px;
  width: min(86%, 335px);
  max-width: 340px;
  gap: 5px;
}

.run-complete-card {
  border: 2px solid rgba(255, 215, 0, 0.75);
  box-shadow:
    0 16px 50px rgba(0, 0, 0, 0.9),
    0 0 30px rgba(255, 215, 0, 0.3),
    inset 0 1px 0 rgba(255, 240, 180, 0.4);
}

@keyframes celebrationCardEntrance {
  0% {
    opacity: 0;
    transform: translateY(14px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.level-clear-card .clear-hero-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  font-size: 2.6rem;
  margin-bottom: 2px;
  animation: clearTrophyBounce 2.4s ease-in-out infinite alternate;
}

.clear-trophy-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 14px rgba(255, 215, 0, 0.55));
}

@keyframes clearTrophyBounce {
  0% {
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 0 10px rgba(243, 199, 102, 0.6));
  }
  100% {
    transform: translateY(-4px) scale(1.06);
    filter: drop-shadow(0 0 20px rgba(243, 199, 102, 0.85));
  }
}

.clear-sparkle-l {
  position: absolute;
  font-size: 1.15rem;
  animation: clearSparkleTwinkle 1.5s ease-in-out infinite alternate;
  top: -2px;
  left: -12px;
}
.clear-sparkle-r {
  position: absolute;
  font-size: 1.15rem;
  animation: clearSparkleTwinkle 1.5s ease-in-out infinite alternate;
  bottom: 2px;
  right: -12px;
  animation-delay: 0.75s;
}

@keyframes clearSparkleTwinkle {
  0% { opacity: 0.3; transform: scale(0.7) rotate(0deg); }
  100% { opacity: 1; transform: scale(1.2) rotate(20deg); }
}

.level-clear-card .clear-tagline {
  font-size: 0.7rem;
  color: var(--clr-gold);
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  margin-bottom: -1px;
}

.level-clear-card .clear-title {
  font-family: var(--font-header);
  font-size: clamp(1.1rem, 4.8cqw, 1.32rem);
  color: #fff;
  font-weight: 900;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9), 0 0 12px rgba(243, 199, 102, 0.5);
  margin: 0 0 2px 0;
}

/* 보상 상세 내역 컨테이너 */
.clear-rewards-wrap {
  width: 100%;
  background: rgba(14, 16, 26, 0.85);
  border: 1.5px solid rgba(212, 175, 55, 0.35);
  border-radius: 12px;
  padding: 5px 8px;
  margin: 1px 0 4px 0;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5);
}

.clear-reward-header {
  font-size: 0.7rem;
  color: var(--clr-gold);
  font-weight: 800;
  margin-bottom: 3px;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.level-clear-card .clear-rewards-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.reward-badge-item {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(26, 28, 44, 0.85);
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 8px;
  padding: 3px 7px;
  text-align: left;
  min-height: 29px;
}

.reward-hp {
  background: linear-gradient(90deg, rgba(58, 20, 28, 0.85) 0%, rgba(26, 28, 44, 0.85) 100%);
  border-color: rgba(217, 66, 84, 0.5);
}
.reward-hp .reward-val {
  color: #ff94a2;
}

.reward-gold {
  background: linear-gradient(90deg, rgba(52, 40, 20, 0.85) 0%, rgba(26, 28, 44, 0.85) 100%);
  border-color: rgba(243, 199, 102, 0.5);
}
.reward-gold .reward-val {
  color: #ffd166;
}

.reward-score {
  background: linear-gradient(90deg, rgba(22, 38, 58, 0.85) 0%, rgba(26, 28, 44, 0.85) 100%);
  border-color: rgba(74, 144, 226, 0.5);
}
.reward-score .reward-val {
  color: #8ec5fc;
}

/* 게임오버 결산 통계: 아이콘 제거 및 중앙 정렬 */
#game-over-stats-wrap {
  padding: 8px 12px;
}

#game-over-stats-wrap .clear-rewards-list {
  gap: 7px;
  align-items: center;
}

#game-over-stats-wrap .reward-badge-item {
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 2px 0;
  min-height: auto;
  justify-content: center;
  text-align: center;
  width: 100%;
}

#game-over-stats-wrap .reward-icon {
  display: none;
}

#game-over-stats-wrap .reward-texts {
  align-items: center;
  text-align: center;
}

#game-over-stats-wrap .reward-label,
#game-over-stats-wrap .reward-val {
  text-align: center;
}

.reward-icon {
  font-size: 1.05rem;
  flex-shrink: 0;
}

.reward-texts {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-width: 0;
  gap: 1px;
}

.reward-label {
  font-size: 0.63rem;
  color: var(--clr-text-dim);
  font-weight: 700;
  letter-spacing: 0.2px;
  line-height: 1.1;
}

.reward-val {
  font-size: 0.76rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.2px;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

/* 다음 레벨 버튼 (Wildfrost 골드 엠보싱) */
.level-clear-card .btn-next-level {
  width: 100%;
  font-size: 0.88rem;
  font-weight: 900;
  letter-spacing: 0.5px;
  padding: 7px 14px;
  min-height: 36px;
  border-radius: 12px;
  background: linear-gradient(180deg, #e5a458 0%, #b87532 50%, #8c4c19 100%);
  border: 2px solid #ffe8ab;
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.6),
    inset 0 2px 0 rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
  margin-top: 1px;
}

.level-clear-card .btn-next-level:hover,
.level-clear-card .btn-next-level:active {
  transform: translateY(-2px) scale(1.02);
  filter: brightness(1.08);
  box-shadow:
    0 8px 25px rgba(0, 0, 0, 0.7),
    0 0 15px rgba(243, 199, 102, 0.4);
}

.result-hero-icon {
  font-size: 2.6rem;
  margin-bottom: var(--sp-xs);
}

.result-title {
  font-family: var(--font-header);
  font-size: clamp(1.4rem, 6.5cqw, 1.8rem);
  color: var(--clr-gold);
  font-weight: 900;
  letter-spacing: 0.5px;
}

.hero-grade-title {
  font-family: var(--font-header);
  font-size: clamp(1.9rem, 9cqw, 2.5rem);
  font-weight: 900;
  letter-spacing: 0.5px;
  margin: 2px 0 6px;
  text-align: center;
}
.hero-grade-s {
  color: #ffe066;
  text-shadow: 0 0 8px rgba(255,224,102,0.6), 0 0 18px rgba(255,224,102,0.4);
  animation: heroGlowPulse 1.6s ease-in-out infinite alternate;
}
.hero-grade-a {
  color: #e6ebf5;
  text-shadow: 0 0 8px rgba(230,235,245,0.6), 0 0 16px rgba(230,235,245,0.35);
  animation: heroGlowPulse 1.6s ease-in-out infinite alternate;
}
.hero-grade-b, .hero-grade-c, .hero-grade-d {
  color: #f0b07a;
}
.hero-grade-coward {
  color: var(--clr-text-dim);
}
@keyframes heroGlowPulse {
  0%   { filter: brightness(1);    text-shadow: 0 0 6px currentColor; }
  100% { filter: brightness(1.35); text-shadow: 0 0 20px currentColor; }
}

.result-reward,
.result-score,
.result-best {
  font-size: 0.95rem;
  color: var(--clr-text);
  font-weight: 700;
}

#game-over-container .btn {
  width: 100%;
  min-height: 44px;
  font-size: 0.98rem;
  font-weight: 800;
  border-radius: 14px;
}

#game-over-container {
  width: min(94%, 395px);
  max-width: 410px;
  max-height: calc(100% - 24px);
  overflow-y: auto;
  background: linear-gradient(180deg, rgba(28, 30, 48, 0.98) 0%, rgba(18, 20, 32, 0.99) 100%);
  border: 2px solid rgba(212, 175, 55, 0.6);
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.88), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* ── 게임 오버 닉네임 입력 및 랭킹 등록 영역 ────────────────────────── */
.rank-register-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 4px 0 2px;
}

.rank-nickname-input {
  width: 100%;
  height: 42px;
  padding: 0 14px;
  background: rgba(13, 15, 26, 0.9);
  border: 1.5px solid rgba(212, 175, 55, 0.45);
  border-radius: 12px;
  color: #f6f4ee;
  font-family: var(--font-main);
  font-size: 0.92rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.5px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
  transition: border-color var(--tr-fast), box-shadow var(--tr-fast);
}

.rank-nickname-input:focus {
  outline: none;
  border-color: #f3c766;
  box-shadow: 0 0 12px rgba(243, 199, 102, 0.4), inset 0 2px 4px rgba(0, 0, 0, 0.5);
}

.rank-nickname-input::placeholder {
  color: rgba(184, 181, 196, 0.45);
  font-size: 0.82rem;
  font-weight: 500;
}

.rank-btn-register {
  width: 100%;
  min-height: 42px;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 800;
  background: linear-gradient(180deg, #2b3852 0%, #1a2336 100%);
  border: 1.5px solid rgba(243, 199, 102, 0.6);
  color: #fff4d4;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
  transition: transform var(--tr-fast), background var(--tr-fast), border-color var(--tr-fast);
}

.rank-btn-register:hover:not(:disabled) {
  border-color: #ffe066;
  background: linear-gradient(180deg, #374666 0%, #202c42 100%);
}

.rank-btn-register:active:not(:disabled) {
  transform: scale(0.97);
}

.rank-btn-register:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(24, 26, 38, 0.8);
  color: #9d9aa8;
}

.game-over-inline-ranking {
  width: 100%;
  max-height: 320px;
  display: flex;
  flex-direction: column;
  margin: 6px 0;
  border-radius: 12px;
  background: rgba(13, 15, 26, 0.9);
  border: 1.5px solid rgba(212, 175, 55, 0.55);
  overflow: hidden;
  padding: 0;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.75),
    0 0 16px rgba(243, 199, 102, 0.2),
    inset 0 2px 8px rgba(0, 0, 0, 0.6);
}

.game-over-col-header-bar {
  padding: 7px 8px;
  background: #10121e;
  border-bottom: 1.5px solid rgba(212, 175, 55, 0.35);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.game-over-inline-list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 8px 6px 8px;
  min-height: 120px;
  max-height: 280px;
}

.game-over-inline-list .ranking-table thead {
  display: none;
}

/* ── 랭킹 오버레이 & 테이블 ───────────────────────────────────────── */
.ranking-overlay-content {
  width: min(94%, 390px);
  max-height: calc(100% - 32px);
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(28, 30, 48, 0.98) 0%, rgba(16, 18, 28, 0.99) 100%);
  border: 2px solid rgba(212, 175, 55, 0.5);
  border-radius: 18px;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.9), 0 0 24px rgba(243, 199, 102, 0.25);
  overflow: hidden;
  padding: 0;
}

.ranking-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: rgba(20, 22, 36, 0.95);
  border-bottom: 1px solid rgba(212, 175, 55, 0.3);
  flex-shrink: 0;
}

.ranking-my-best-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 18px;
  background: linear-gradient(90deg, rgba(30, 36, 56, 0.95) 0%, rgba(20, 24, 40, 0.95) 100%);
  border-bottom: 1.5px solid rgba(212, 175, 55, 0.35);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.4);
  flex-shrink: 0;
}

.ranking-my-best-label {
  font-size: 0.88rem;
  font-weight: 800;
  color: #ebd7a3;
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ranking-my-best-score {
  font-size: 1.02rem;
  font-weight: 800;
  color: #ffd875;
  letter-spacing: 0.5px;
  text-shadow: 0 0 10px rgba(243, 199, 102, 0.45);
}

.ranking-col-header-bar {
  display: flex;
  align-items: center;
  padding: 8px 14px;
  background: #10121e;
  border-bottom: 1.5px solid rgba(212, 175, 55, 0.35);
  font-family: var(--font-header);
  color: var(--clr-gold);
  font-size: 0.78rem;
  letter-spacing: 0.5px;
  flex-shrink: 0;
  box-sizing: border-box;
}

.ranking-col-header-bar .col-rank {
  width: 46px;
  flex-shrink: 0;
  text-align: center;
  white-space: nowrap;
}

.ranking-col-header-bar .col-name {
  flex: 1;
  min-width: 0;
  text-align: left;
  padding: 0 6px;
  white-space: nowrap;
  font-weight: 700;
}

.ranking-col-header-bar .col-grade {
  width: 46px;
  flex-shrink: 0;
  text-align: center;
  white-space: nowrap;
}

.ranking-col-header-bar .col-score {
  width: 104px;
  flex-shrink: 0;
  text-align: right;
  padding: 0 6px;
  white-space: nowrap;
  font-weight: 800;
}

.ranking-list-container {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 14px 10px 14px;
  min-height: 220px;
  max-height: 380px;
}

#ranking-overlay .ranking-table thead {
  display: none;
}

.ranking-footer-bar {
  padding: 10px 16px 14px;
  border-top: 1px solid rgba(212, 175, 55, 0.2);
  background: rgba(16, 18, 28, 0.95);
  display: flex;
  justify-content: center;
  flex-shrink: 0;
}

.ranking-btn-close {
  min-height: 38px;
  padding: 8px 28px;
  border-radius: 20px;
  font-size: 0.92rem;
  font-weight: 700;
}

/* ── 랭킹 테이블 (공용) ───────────────────────────────────────────── */
.ranking-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.88rem;
  color: var(--clr-text);
}

.ranking-table thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #10121e;
  padding: 8px 2px;
  font-family: var(--font-header);
  color: var(--clr-gold);
  font-size: 0.78rem;
  letter-spacing: 0.5px;
  border-bottom: 1.5px solid rgba(212, 175, 55, 0.35);
  text-align: center;
  white-space: nowrap;
}

.ranking-table .col-rank {
  width: 46px;
  text-align: center;
  white-space: nowrap;
}

.ranking-table .col-name {
  width: auto;
  text-align: left;
  padding: 8px 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}

.ranking-table .col-stage {
  display: none;
}

.ranking-table .col-grade {
  width: 46px;
  text-align: center;
  padding: 8px 2px;
  white-space: nowrap;
}

.ranking-table .col-score {
  width: 104px;
  text-align: right;
  padding: 8px 6px;
  font-weight: 800;
  white-space: nowrap;
}

.ranking-row {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: background var(--tr-fast);
}

.ranking-row:hover {
  background: rgba(212, 175, 55, 0.08);
}

/* 상위 1~3위 특별 하이라이트 (고딕 골드/실버/브론즈 톤) */
.rank-row-gold {
  background: linear-gradient(90deg, rgba(255, 215, 0, 0.16) 0%, rgba(212, 175, 55, 0.05) 100%);
}

.rank-row-gold .col-score {
  color: #ffe066;
  text-shadow: 0 0 8px rgba(255, 224, 102, 0.5);
}

.rank-row-gold .col-name {
  color: #fff9e6;
}

.rank-row-silver {
  background: linear-gradient(90deg, rgba(220, 225, 235, 0.13) 0%, rgba(180, 190, 205, 0.04) 100%);
}

.rank-row-silver .col-score {
  color: #e6ebf5;
}

.rank-row-silver .col-name {
  color: #f5f7fc;
}

.rank-row-bronze {
  background: linear-gradient(90deg, rgba(205, 127, 50, 0.14) 0%, rgba(180, 100, 40, 0.04) 100%);
}

.rank-row-bronze .col-score {
  color: #f0b07a;
}

.rank-row-bronze .col-name {
  color: #fdede0;
}

/* 등록 직후 본인 행 하이라이트 */
.ranking-row-highlight {
  outline: 1.5px solid #2ec4b6;
  background: rgba(46, 196, 182, 0.18) !important;
  animation: rankingRowGlow 2s ease-in-out infinite alternate;
}

@keyframes rankingRowGlow {
  0% { box-shadow: inset 0 0 6px rgba(46, 196, 182, 0.3); }
  100% { box-shadow: inset 0 0 14px rgba(46, 196, 182, 0.7); }
}

/* 뱃지 및 아이콘 */
.rank-badge-medal {
  font-size: 0.85rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.rank-num {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--clr-text-dim);
}

.stage-tag {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--clr-text-dim);
  font-size: 0.72rem;
  font-weight: 600;
}

.stage-tag-complete {
  background: rgba(255, 215, 0, 0.2);
  color: #ffe066;
  border: 1px solid rgba(255, 215, 0, 0.4);
  font-weight: 800;
}

.rank-crown {
  display: inline-block;
  font-size: 0.95rem;
  vertical-align: middle;
  filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.8));
  animation: crownTwinkle 2s ease-in-out infinite alternate;
}

@keyframes crownTwinkle {
  0% { transform: scale(1); filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.6)); }
  100% { transform: scale(1.15); filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.95)); }
}

/* 랭킹 상태 안내 메시지 */
.ranking-state-msg {
  padding: 32px 14px;
  text-align: center;
  font-size: 0.92rem;
  color: var(--clr-text-dim);
  line-height: 1.6;
}

.ranking-spinner-icon {
  display: inline-block;
  font-size: 1.6rem;
  margin-bottom: 6px;
  animation: rankingSpin 1.4s linear infinite;
}

@keyframes rankingSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.ranking-msg-sub {
  font-size: 0.8rem;
  color: var(--clr-text-muted);
  display: block;
  margin-top: 6px;
}

.ranking-error-msg {
  color: #f87171;
}

.ranking-error-title {
  font-weight: 700;
}

/* ── 멜트 넘버즈: 하이엔드 판타지 광역 서리 대마법 연출 ───────────────── */
.melt-blizzard-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 140;
  border-radius: 8px;
  overflow: hidden;
  transition: opacity 300ms ease;
}

/* 몬스터 카드 정중앙에 시원하게 팝업되는 얼음 파쇄 대형 -1 텍스트 */
.stat-badge-minus-one {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 150;
  font-family: var(--font-header, sans-serif);
  font-weight: 900;
  font-size: 2.6rem;
  letter-spacing: -1px;
  line-height: 1;
  color: #ffffff;
  text-shadow:
    0 0 10px #00f0ff,
    0 0 22px #00d2ff,
    0 0 40px #0284c7,
    0 4px 10px rgba(0, 0, 0, 0.95);
  filter: drop-shadow(0 0 18px rgba(0, 240, 255, 0.9));
  pointer-events: none;
  white-space: nowrap;
  animation: meltBadgeMinusOneFloat 1300ms cubic-bezier(0.16, 0.84, 0.36, 1) forwards;
}

@keyframes meltBadgeMinusOneFloat {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.3);
  }
  18% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.45);
    filter: drop-shadow(0 0 28px #00f0ff) brightness(1.8);
  }
  45% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.18);
    filter: drop-shadow(0 0 18px #00d2ff);
  }
  72% {
    opacity: 0.95;
    transform: translate(-50%, -65%) scale(1.05);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -90%) scale(0.85);
  }
}

/* 수치 변경 시 배지 숫자 동결 파쇄 팝 & 발광 펄스 */
.badge-val-melt-pop {
  display: inline-block;
  animation: badgeValMeltPop 550ms ease-out forwards;
}

@keyframes badgeValMeltPop {
  0% {
    transform: scale(1);
    filter: brightness(1);
  }
  30% {
    transform: scale(1.5);
    filter: brightness(2.2) drop-shadow(0 0 10px #00e5ff) drop-shadow(0 0 18px #0091ea);
    color: #e0f7fa;
  }
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}

/* 마법 타격 시 몬스터 카드 피격 반동 및 서리 충격 */
.cell-monster-debuff-hit {
  animation: monsterDebuffHit 420ms cubic-bezier(0.2, 0.9, 0.3, 1);
}

@keyframes monsterDebuffHit {
  0%   { transform: scale(1); }
  25%  { transform: scale(0.92) translateY(3px); filter: brightness(1.9) drop-shadow(0 0 14px rgba(0, 229, 255, 0.95)) drop-shadow(0 0 24px rgba(0, 145, 234, 0.6)); }
  55%  { transform: scale(1.06) translateY(-2px); }
  100% { transform: scale(1) translateY(0); }
}

/* 일반 카드 타격 시 크리스탈 섬광 */
.cell-light-impact {
  animation: cellLightImpact 320ms ease-out;
}

@keyframes cellLightImpact {
  0%   { filter: brightness(1); }
  35%  { filter: brightness(1.85) drop-shadow(0 0 12px rgba(128, 222, 234, 0.95)); }
  100% { filter: brightness(1); }
}

/* 태고의 심판진(Primal Judgment) 카드 소멸 및 타격 연출 */
.primal-judgment-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 150;
}

.cell-primal-vanish {
  animation: cellPrimalVanish 400ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  pointer-events: none !important;
}

@keyframes cellPrimalVanish {
  0% {
    transform: scale(1) translateY(0);
    filter: brightness(1) drop-shadow(0 0 0 rgba(255, 180, 40, 0));
    opacity: 1;
  }
  20% {
    transform: scale(1.08) translateY(-4px);
    filter: brightness(3.6) contrast(1.4) drop-shadow(0 0 22px rgba(255, 230, 80, 1)) drop-shadow(0 0 38px rgba(255, 120, 0, 0.9));
    opacity: 1;
  }
  60% {
    transform: scale(1.14) translateY(-14px);
    filter: brightness(2.6) drop-shadow(0 0 28px rgba(255, 180, 40, 0.85));
    opacity: 0.8;
  }
  100% {
    transform: scale(1.22) translateY(-26px);
    filter: brightness(1.8) drop-shadow(0 0 36px rgba(255, 140, 20, 0));
    opacity: 0;
  }
}

.cell-primal-impact {
  animation: cellPrimalImpact 380ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes cellPrimalImpact {
  0% {
    transform: scale(0.92);
    filter: brightness(2.8) drop-shadow(0 0 20px rgba(255, 215, 60, 1));
  }
  30% {
    transform: scale(1.06);
    filter: brightness(1.9) drop-shadow(0 0 26px rgba(255, 160, 30, 0.9));
  }
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}

.primal-judgment-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 215, 64, 0.55) 45%, rgba(255, 120, 0, 0.25) 85%, transparent 100%);
  pointer-events: none;
  z-index: 160;
  animation: primalFlash 340ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes primalFlash {
  0% { opacity: 0; }
  25% { opacity: 0.95; }
  100% { opacity: 0; }
}

/* 하위 호환성 유지용 레거시 스타일 */
.melt-numbers-overlay {
  position: absolute;
  inset: 0;
  z-index: 150;
  pointer-events: none;
  overflow: hidden;
}

.melt-beam {
  position: absolute;
  top: -30%;
  width: 3px;
  height: 60%;
  background: linear-gradient(to bottom, transparent, rgba(255, 244, 214, 0.9), rgba(255, 209, 102, 0.6), transparent);
  filter: blur(1.5px);
  animation: meltBeamFall 700ms ease-in forwards;
}

@keyframes meltBeamFall {
  0%   { transform: translateY(0) scaleY(0.6); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translateY(160%) scaleY(1.3); opacity: 0; }
}

.melt-burst-container {
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
}

.melt-burst-particle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ffd166;
  box-shadow: 0 0 8px #ffd166;
  animation: meltBurstFly 550ms ease-out forwards;
}

@keyframes meltBurstFly {
  from { transform: translate(-50%, -50%) translate(0, 0); opacity: 1; }
  to   { transform: translate(-50%, -50%) translate(var(--tx), var(--ty)); opacity: 0; }
}

.melt-minus-label {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 31;
  font-family: var(--font-header);
  font-weight: 900;
  font-size: 1.1rem;
  color: #ffd166;
  text-shadow: 0 0 10px rgba(255, 209, 102, 0.9), 0 2px 4px rgba(0,0,0,0.8);
  pointer-events: none;
  animation: meltLabelPop 700ms ease-out forwards;
}

@keyframes meltLabelPop {
  0%   { opacity: 0; transform: translate(-50%, -30%) scale(0.6); }
  25%  { opacity: 1; transform: translate(-50%, -60%) scale(1.15); }
  70%  { opacity: 1; transform: translate(-50%, -90%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -120%) scale(0.9); }
}

/* ══════════════════════════════════════════════════════════════
   § 게임 내 화려한 전용 비주얼 이펙트 시스템
   ══════════════════════════════════════════════════════════════ */

/* ── 1. 카드 오픈 황금빛 빛무리 파티클 (Card Open Golden Aura) ── */
.card-open-effect-container {
  position: absolute;
  pointer-events: none;
  z-index: 70;
  overflow: visible;
  width: 0;
  height: 0;
}

.card-open-gold-particle {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  pointer-events: none;
  background: var(--p-color, #ffd166);
  box-shadow: 0 0 6px var(--p-color, #ffd166), 0 0 10px rgba(255, 243, 176, 0.6);
  animation: cardOpenParticleSpread 0.52s cubic-bezier(0.1, 0.9, 0.25, 1) forwards;
}

@keyframes cardOpenParticleSpread {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) translate(0, 0) scale(1.1);
  }
  60% {
    opacity: 0.95;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) scale(0.15);
  }
}

.card-open-gold-sparkle {
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: var(--sz, 11px);
  color: var(--p-color, #fff8e1);
  text-shadow: 0 0 8px rgba(255, 235, 120, 0.95), 0 0 14px rgba(255, 183, 3, 0.7);
  line-height: 1;
  pointer-events: none;
  animation: cardOpenSparkleSpread 0.58s cubic-bezier(0.12, 0.9, 0.3, 1) forwards;
}

@keyframes cardOpenSparkleSpread {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(0, 0) scale(0.3) rotate(0deg);
  }
  25% {
    opacity: 1;
    transform: translate(-50%, -50%) translate(calc(var(--tx) * 0.45), calc(var(--ty) * 0.45)) scale(1.15) rotate(45deg);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) scale(0.3) rotate(90deg);
  }
}

/* ── 2. 출구(목표지점) 성스러운 광선 기둥 & 피날레 (Exit Divine Beam) ── */
.exit-beam-container {
  position: absolute;
  pointer-events: none;
  z-index: 120;
  overflow: visible;
  width: 0;
  height: 0;
}

/* 바닥 카드 기저부 발광 웅덩이 (카드와 빛기둥을 자연스럽게 연결 — 바닥 퍼스펙티브 타원) */
.exit-beam-card-base {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--card-w, 90px);
  height: calc(var(--card-w, 90px) * 0.42);
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 1) 0%, rgba(255, 235, 150, 0.95) 28%, rgba(255, 190, 40, 0.5) 60%, transparent 82%);
  box-shadow: 0 0 45px 18px rgba(255, 214, 102, 0.9), inset 0 0 25px rgba(255, 255, 255, 0.85);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.3);
  pointer-events: none;
  animation: exitCardBaseGlow 0.75s cubic-bezier(0.15, 0.85, 0.35, 1) both;
}

@keyframes exitCardBaseGlow {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
  20% { opacity: 1; transform: translate(-50%, -50%) scale(1.18); }
  60% { opacity: 0.95; transform: translate(-50%, -50%) scale(1.28); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.4); }
}

/* 바닥 코어 섬광 — 바닥 퍼스펙티브(2.6:1 타원) 적용 */
.exit-beam-ground-flash {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 140px;
  height: 54px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, #ffffff 0%, rgba(255, 235, 150, 0.9) 35%, rgba(255, 183, 3, 0.5) 65%, transparent 80%);
  box-shadow: 0 0 60px 25px rgba(255, 214, 102, 0.95);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.2);
  pointer-events: none;
  animation: exitGroundFlash 0.75s cubic-bezier(0.15, 0.85, 0.35, 1) both;
}

@keyframes exitGroundFlash {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
  25% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
  60% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.4); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.6); }
}

/* 수직 천상 광선 기둥 — 원통형 부드러운 수평 그라디언트 + 상하단 자연 감쇠 마스크 (네모 각진 상자감 완전 제거) */
.exit-divine-beam {
  position: absolute;
  left: 50%;
  bottom: -20px;
  width: 145px;
  height: 1200px;
  background: linear-gradient(to right,
    transparent 0%,
    rgba(255, 183, 3, 0.12) 15%,
    rgba(255, 214, 102, 0.55) 38%,
    rgba(255, 255, 225, 0.88) 50%,
    rgba(255, 214, 102, 0.55) 62%,
    rgba(255, 183, 3, 0.12) 85%,
    transparent 100%
  );
  box-shadow: 0 0 60px 25px rgba(255, 214, 102, 0.65), 0 0 120px 50px rgba(255, 183, 3, 0.35);
  transform-origin: bottom center;
  mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(to top, transparent 0%, rgba(0,0,0,0.85) 7%, black 15%, black 88%, transparent 100%);
  mask-image: linear-gradient(to top, transparent 0%, rgba(0,0,0,0.85) 7%, black 15%, black 88%, transparent 100%);
  opacity: 0;
  transform: translateX(-50%) scaleX(0.1) scaleY(0.05);
  pointer-events: none;
  animation: exitBeamPillarAnim 0.75s cubic-bezier(0.1, 0.9, 0.2, 1) both;
}

@keyframes exitBeamPillarAnim {
  0% {
    opacity: 0;
    transform: translateX(-50%) scaleX(0.1) scaleY(0.05);
  }
  20% {
    opacity: 1;
    transform: translateX(-50%) scaleX(1.25) scaleY(1.0);
  }
  60% {
    opacity: 0.95;
    transform: translateX(-50%) scaleX(1.0) scaleY(1.0);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) scaleX(0.15) scaleY(1.05);
  }
}

/* 광선 기둥 중심부 초고휘도 순백 광선 코어 */
.exit-divine-beam-core {
  position: absolute;
  left: 50%;
  bottom: -20px;
  width: 65px;
  height: 1200px;
  background: linear-gradient(to right,
    transparent 0%,
    rgba(255, 244, 180, 0.8) 25%,
    #ffffff 50%,
    rgba(255, 244, 180, 0.8) 75%,
    transparent 100%
  );
  box-shadow: 0 0 35px 15px rgba(255, 255, 255, 0.95), 0 0 60px 25px rgba(255, 235, 140, 0.75);
  transform-origin: bottom center;
  mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(to top, transparent 0%, black 5%, black 90%, transparent 100%);
  mask-image: linear-gradient(to top, transparent 0%, black 5%, black 90%, transparent 100%);
  opacity: 0;
  transform: translateX(-50%) scaleX(0.1) scaleY(0.05);
  pointer-events: none;
  animation: exitBeamCoreAnim 0.75s cubic-bezier(0.1, 0.9, 0.2, 1) both;
}

@keyframes exitBeamCoreAnim {
  0% {
    opacity: 0;
    transform: translateX(-50%) scaleX(0.1) scaleY(0.05);
  }
  18% {
    opacity: 1;
    transform: translateX(-50%) scaleX(1.3) scaleY(1.0);
  }
  60% {
    opacity: 0.95;
    transform: translateX(-50%) scaleX(1.0) scaleY(1.0);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) scaleX(0.12) scaleY(1.05);
  }
}

/* 다중 충격파 링 — 빛기둥 퍼스펙티브(2.6:1 타원)에 맞춘 바닥 확산 링 */
.exit-shockwave-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 68px;
  height: 26px;
  border-radius: 50%;
  border: 3px solid #ffe082;
  box-shadow: 0 0 16px #ffd166, inset 0 0 12px #ffd166;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.25);
  pointer-events: none;
  animation: exitShockwaveExpand 0.72s cubic-bezier(0.1, 0.8, 0.25, 1) both;
}

@keyframes exitShockwaveExpand {
  0% { opacity: 0.95; transform: translate(-50%, -50%) scale(0.25); border-width: 4px; }
  60% { opacity: 0.7; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(3.2); border-width: 1px; }
}

/* 카드에서 시작하여 빛기둥을 타고 위로 솟구치며 퍼지는 천상 에너지 링 */
.exit-pillar-ascend-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 68px;
  height: 26px;
  border-radius: 50%;
  border: 2.5px solid #fff3b0;
  box-shadow: 0 0 18px #ffd166, inset 0 0 10px #ffe082;
  opacity: 0;
  transform: translate(-50%, -50%) translateY(0) scale(0.5);
  pointer-events: none;
  animation: exitPillarRingAscend 0.70s cubic-bezier(0.15, 0.85, 0.3, 1) both;
}

@keyframes exitPillarRingAscend {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) translateY(0) scale(0.5);
  }
  25% {
    opacity: 1;
    transform: translate(-50%, -50%) translateY(-65px) scale(0.9);
  }
  65% {
    opacity: 0.75;
    transform: translate(-50%, -50%) translateY(-200px) scale(1.25);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) translateY(-360px) scale(1.6);
  }
}

/* 빛기둥 코어를 관통하여 초고속으로 치솟는 수직 광선 트레이서 바늘 */
.exit-pillar-streak {
  position: absolute;
  border-radius: 999px;
  background: linear-gradient(to top, transparent 0%, #ffffff 40%, #fff7cc 70%, transparent 100%);
  box-shadow: 0 0 12px rgba(255, 240, 150, 0.95);
  opacity: 0;
  transform: translate(-50%, -50%) translateY(0) scaleY(0.2);
  pointer-events: none;
  animation: exitPillarStreakShoot 0.65s cubic-bezier(0.15, 0.9, 0.2, 1) both;
}

@keyframes exitPillarStreakShoot {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) translateY(0) scaleY(0.2);
  }
  20% {
    opacity: 1;
    transform: translate(-50%, -50%) translateY(calc(var(--ty) * 0.3)) scaleY(1.4);
  }
  70% {
    opacity: 0.85;
    transform: translate(-50%, -50%) translateY(calc(var(--ty) * 0.8)) scaleY(1.0);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) translateY(var(--ty)) scaleY(0.2);
  }
}

/* 카드 기저부에서 빛기둥을 따라 수직 상승하는 황금 별가루 */
.exit-pillar-sparkle {
  position: absolute;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 8px #fff3b0, 0 0 16px #ffd166, 0 0 24px #ffb703;
  opacity: 0;
  transform: translate(-50%, -50%) translate(0, 0) scale(0.3);
  pointer-events: none;
  animation: exitPillarSparkleAscend 0.72s cubic-bezier(0.2, 0.8, 0.25, 1) both;
}

@keyframes exitPillarSparkleAscend {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(0, 0) scale(0.3);
  }
  15% {
    opacity: 1;
    transform: translate(-50%, -50%) translate(calc(var(--tx) * 0.15), calc(var(--ty) * 0.15)) scale(1.25);
  }
  65% {
    opacity: 0.9;
    transform: translate(-50%, -50%) translate(calc(var(--tx) * 0.75), calc(var(--ty) * 0.75)) scale(1.0);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) scale(0.2);
  }
}

/* 레거시 호환용 */
.exit-ascend-sparkle {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 10px #ffd166, 0 0 20px #ffb703;
  animation: exitSparkleAscend 0.75s cubic-bezier(0.15, 0.85, 0.35, 1) forwards;
}

@keyframes exitSparkleAscend {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) translate(0, 0) scale(1);
  }
  60% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) scale(0.2);
  }
}

/* ── 3. 포션 힐링 파티클 (Potion Healing Bloom & Soft Life Particles) ── */
.potion-heal-container {
  position: absolute;
  pointer-events: none;
  z-index: 65;
  overflow: visible;
  width: 0;
  height: 0;
}

.potion-heal-ripple {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2.5px solid #34d399;
  box-shadow: 0 0 20px #10b981, inset 0 0 15px rgba(52, 211, 153, 0.4);
  animation: potionRippleExpand 0.75s cubic-bezier(0.2, 0.85, 0.35, 1) forwards;
}

@keyframes potionRippleExpand {
  0% { opacity: 0.9; transform: translate(-50%, -50%) scale(0.4); }
  60% { opacity: 0.6; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(3.5); }
}

.potion-heal-core-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(167, 243, 208, 0.9) 0%, rgba(52, 211, 153, 0.5) 45%, transparent 75%);
  box-shadow: 0 0 35px 12px rgba(16, 185, 129, 0.7);
  animation: potionCoreGlow 0.7s cubic-bezier(0.2, 0.85, 0.35, 1) forwards;
}

@keyframes potionCoreGlow {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
  35% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.4); }
}

.potion-heal-particle {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  background: var(--p-color, #34d399);
  box-shadow: 0 0 10px var(--p-color, #10b981);
  animation: potionParticleFloat 0.82s cubic-bezier(0.18, 0.89, 0.32, 1) forwards;
}

@keyframes potionParticleFloat {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(0, 0) scale(0.4);
  }
  25% {
    opacity: 1;
    transform: translate(-50%, -50%) translate(calc(var(--tx) * 0.4), calc(var(--ty) * 0.4)) scale(1.1);
  }
  75% {
    opacity: 0.85;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(var(--tx), calc(var(--ty) - 25px)) scale(0.3);
  }
}

.potion-heal-cross {
  position: absolute;
  left: 50%;
  top: 50%;
  color: #6ee7b7;
  font-size: var(--sz, 18px);
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 0 12px #10b981, 0 0 20px #059669;
  animation: potionCrossRise 0.85s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}

@keyframes potionCrossRise {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(0, 0) scale(0.3) rotate(0deg);
  }
  30% {
    opacity: 1;
    transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) scale(1.2) rotate(15deg);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(var(--tx), calc(var(--ty) - 45px)) scale(0.6) rotate(30deg);
  }
}

/* ── 4. 무기 획득 대각선 45도 크로스 슬래시 (Weapon Equip Dual 45deg Blue Slash) ── */
.weapon-cross-container {
  position: absolute;
  pointer-events: none;
  z-index: 75;
  overflow: visible;
  width: 0;
  height: 0;
}

/* 순간 푸른 섬광 플래시 */
.weapon-slash-flash {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(80px * var(--blade-scale, 1));
  height: calc(80px * var(--blade-scale, 1));
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.98) 0%, rgba(72, 202, 228, 0.8) 35%, rgba(0, 180, 216, 0.3) 65%, transparent 80%);
  box-shadow: 0 0 calc(30px * var(--blade-scale, 1)) calc(10px * var(--blade-scale, 1)) rgba(0, 180, 216, 0.9);
  animation: weaponSlashFlashAnim 0.3s ease-out forwards;
}

@keyframes weaponSlashFlashAnim {
  0%   { transform: translate(-50%, -50%) scale(0.2); opacity: 0; }
  25%  { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.3); opacity: 0; }
}

/* 대각선 45도 검기 아크 (SVG 유선형 베기 궤적) */
.weapon-blade-arc {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(140px * var(--blade-scale, 1));
  height: calc(60px * var(--blade-scale, 1));
  overflow: visible;
  filter: drop-shadow(0 0 12px rgba(0, 180, 216, 0.95)) drop-shadow(0 0 4px #ffffff);
  pointer-events: none;
}

.weapon-blade-arc-1 {
  animation: weaponBladeSlash1 0.4s cubic-bezier(0.12, 0.95, 0.25, 1) forwards;
}

.weapon-blade-arc-2 {
  animation: weaponBladeSlash2 0.4s cubic-bezier(0.12, 0.95, 0.25, 1) forwards;
  animation-delay: 25ms; /* 아주 살짝 시차를 두어 2연타 베는 입체감 연출 */
}

@keyframes weaponBladeSlash1 {
  0% {
    transform: translate(-50%, -50%) rotate(45deg) scaleX(0.1) scaleY(0.2);
    opacity: 0;
  }
  25% {
    transform: translate(-50%, -50%) rotate(45deg) scaleX(1.05) scaleY(1.05);
    opacity: 1;
  }
  65% {
    transform: translate(-50%, -50%) rotate(45deg) scaleX(1.12) scaleY(1.15);
    opacity: 0.9;
  }
  100% {
    transform: translate(-50%, -50%) rotate(45deg) scaleX(1.2) scaleY(0.15);
    opacity: 0;
  }
}

@keyframes weaponBladeSlash2 {
  0% {
    transform: translate(-50%, -50%) rotate(-45deg) scaleX(0.1) scaleY(0.2);
    opacity: 0;
  }
  25% {
    transform: translate(-50%, -50%) rotate(-45deg) scaleX(1.05) scaleY(1.05);
    opacity: 1;
  }
  65% {
    transform: translate(-50%, -50%) rotate(-45deg) scaleX(1.12) scaleY(1.15);
    opacity: 0.9;
  }
  100% {
    transform: translate(-50%, -50%) rotate(-45deg) scaleX(1.2) scaleY(0.15);
    opacity: 0;
  }
}

/* 튕겨나가는 강철 스파크 파티클 */
.weapon-cross-spark {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  background: var(--p-color, #7dd3fc);
  box-shadow: 0 0 10px var(--p-color, #38bdf8);
  animation: weaponSparkBurst 0.55s cubic-bezier(0.15, 0.9, 0.35, 1) forwards;
}

@keyframes weaponSparkBurst {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) translate(0, 0) scale(1);
  }
  60% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(calc(var(--tx) * var(--blade-scale, 1)), calc(var(--ty) * var(--blade-scale, 1))) scale(0.2);
  }
}

/* ── 5. 골드 획득 성스러운 솟구침 (Holy Gold Geyser & Ascending Sparkles) ── */
.gold-geyser-container {
  position: absolute;
  pointer-events: none;
  z-index: 75;
  overflow: visible;
  width: 0;
  height: 0;
}

/* 위로 솟구쳐 오르는 성스러운 골드 파티클 */
.gold-geyser-particle {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  background: var(--p-color, #ffd700);
  box-shadow: 0 0 10px var(--p-color, #ffb703);
  animation: goldGeyserRiseAnim 0.75s cubic-bezier(0.22, 0.9, 0.35, 1) forwards;
}

@keyframes goldGeyserRiseAnim {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(0, 0) scale(0.5);
  }
  20% {
    opacity: 1;
    transform: translate(-50%, -50%) translate(calc(var(--tx) * 0.4), calc(var(--ty) * 0.6)) scale(1.15);
  }
  65% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) scale(0.3);
  }
}

/* 솟구치는 황금 스파클 (✦, ✧, ✨) */
.gold-geyser-sparkle {
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: var(--sz, 14px);
  color: #fffbeb;
  text-shadow: 0 0 12px #fbbf24, 0 0 20px #f59e0b;
  line-height: 1;
  animation: goldSparkleGeyserAnim 0.8s cubic-bezier(0.2, 0.9, 0.35, 1) forwards;
}

@keyframes goldSparkleGeyserAnim {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(0, 0) scale(0.3) rotate(0deg);
  }
  25% {
    opacity: 1;
    transform: translate(-50%, -50%) translate(calc(var(--tx) * 0.5), calc(var(--ty) * 0.7)) scale(1.2) rotate(35deg);
  }
  70% {
    opacity: 0.85;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) scale(0.5) rotate(70deg);
  }
}

/* 성스러운 획득 골드 수치 텍스트 (+N G) */
.gold-geyser-pop-text {
  position: absolute;
  left: 50%;
  top: 25%;
  font-family: var(--font-cinzel), 'Cinzel', serif;
  font-size: 1.15rem;
  font-weight: 800;
  color: #fffbeb;
  text-shadow: 0 0 10px #f59e0b, 0 0 20px #d97706, 0 2px 4px rgba(0,0,0,0.8);
  white-space: nowrap;
  animation: goldTextFloatAnim 0.85s cubic-bezier(0.18, 0.89, 0.32, 1) forwards;
}

@keyframes goldTextFloatAnim {
  0% {
    opacity: 0;
    transform: translate(-50%, 0) scale(0.5);
  }
  25% {
    opacity: 1;
    transform: translate(-50%, -18px) scale(1.15);
  }
  75% {
    opacity: 0.95;
    transform: translate(-50%, -35px) scale(1.0);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -52px) scale(0.8);
  }
}

/* ── 6. 마법부적 획득 신비로운 불꽃 파티클 (Talisman Pickup Burst) ── */
.talisman-pickup-container {
  position: absolute;
  pointer-events: none;
  z-index: 70;
  overflow: visible;
  width: 0;
  height: 0;
}

.talisman-pickup-particle {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  background: var(--p-color, #ff9e00);
  box-shadow: 0 0 10px var(--p-color, #ff9e00);
  animation: talismanPickupSpread 0.65s cubic-bezier(0.15, 0.9, 0.35, 1) forwards;
}

@keyframes talismanPickupSpread {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) translate(0, 0) scale(1);
  }
  60% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) scale(0.25);
  }
}

/* ── 7. 마법부적 비행 집속 스트림 (Talisman Fly to Hero Right) ── */
.talisman-stream-container {
  position: absolute;
  pointer-events: none;
  z-index: 150;
  overflow: visible;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
}

.talisman-stream-particle {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  pointer-events: none;
  background: var(--p-color, #c77dff);
  box-shadow: 0 0 10px var(--p-color, #9d4edd), 0 0 18px rgba(123, 44, 191, 0.7);
  animation: talismanStreamFly 0.52s cubic-bezier(0.2, 0.8, 0.25, 1) forwards;
}

@keyframes talismanStreamFly {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(0, 0) scale(0.3);
  }
  20% {
    opacity: 1;
    transform: translate(-50%, -50%) translate(calc(var(--dx) * 0.15 + var(--curve-x)), calc(var(--dy) * 0.15 + var(--curve-y))) scale(1.3);
  }
  75% {
    opacity: 0.95;
    transform: translate(-50%, -50%) translate(calc(var(--dx) * 0.75 + var(--curve-x) * 0.5), calc(var(--dy) * 0.75 + var(--curve-y) * 0.5)) scale(1.0);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) scale(0.2);
  }
}

/* 플레이어 우측 부적 도착 흡수 펄스 */
.talisman-absorb-pulse {
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, rgba(199, 125, 255, 0.9) 35%, rgba(123, 44, 191, 0.4) 65%, transparent 80%);
  box-shadow: 0 0 25px 10px rgba(157, 78, 221, 0.85);
  animation: talismanAbsorbPulseAnim 0.45s ease-out forwards;
}

@keyframes talismanAbsorbPulseAnim {
  0%   { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
  30%  { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; }
}

/* ── 7-1. 아이템 슬롯 생성 지점 보라색 펑! 파티클 버스트 (Item Floater Spawn Burst) ── */
.item-spawn-burst-container {
  position: absolute;
  pointer-events: none;
  z-index: 200;
  overflow: visible;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 중앙 순간 보라빛 코어 섬광 플래시 */
.item-spawn-core-flash {
  position: absolute;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, #f5d0fe 25%, rgba(217, 70, 239, 0.95) 55%, rgba(126, 34, 206, 0.8) 75%, transparent 100%);
  filter: drop-shadow(0 0 30px #d946ef) drop-shadow(0 0 15px #f43f5e);
  animation: itemSpawnFlashAnim 0.42s ease-out forwards;
  pointer-events: none;
}

@keyframes itemSpawnFlashAnim {
  0%   { opacity: 0; transform: scale(0.1); }
  25%  { opacity: 1; transform: scale(1.45); }
  100% { opacity: 0; transform: scale(2.2); }
}

/* 2중 보라색 열풍 충격파 링 */
.item-spawn-shockwave-ring {
  position: absolute;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3.5px solid #f5d0fe;
  box-shadow: 0 0 24px #d946ef, inset 0 0 14px #c084fc;
  animation: itemSpawnRingAnim 0.52s cubic-bezier(0.1, 0.85, 0.25, 1) forwards;
  pointer-events: none;
}

.item-spawn-shockwave-ring.ring-secondary {
  border-color: #d946ef;
  box-shadow: 0 0 20px #a855f7;
  animation-delay: 50ms;
}

@keyframes itemSpawnRingAnim {
  0%   { transform: scale(0.2); opacity: 1; }
  100% { transform: scale(3.6); opacity: 0; border-width: 1px; }
}

/* 사방으로 펑! 터지는 보라빛 불꽃 스파크 파티클 */
.item-spawn-burst-particle {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  pointer-events: none;
  background: var(--p-color, #c084fc);
  box-shadow: 0 0 12px var(--p-color, #a855f7), 0 0 22px rgba(147, 51, 234, 0.9);
  animation: itemSpawnBurstAnim 0.58s cubic-bezier(0.12, 0.9, 0.3, 1) forwards;
}

@keyframes itemSpawnBurstAnim {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) translate(0, 0) scale(0.5);
  }
  30% {
    opacity: 1;
    transform: translate(-50%, -50%) translate(calc(var(--tx) * 0.55), calc(var(--ty) * 0.55)) scale(1.4);
  }
  70% {
    opacity: 0.95;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) scale(0.15);
  }
}

/* 반짝이는 마법 별가루 스파클 */
.item-spawn-magic-sparkle {
  position: absolute;
  font-size: 16px;
  color: #ffffff;
  text-shadow: 0 0 12px #f5d0fe, 0 0 22px #d946ef;
  animation: itemSpawnSparkleAnim 0.62s cubic-bezier(0.15, 0.85, 0.35, 1) forwards;
  pointer-events: none;
  z-index: 201;
}

@keyframes itemSpawnSparkleAnim {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.2) rotate(0deg); }
  35%  { opacity: 1; transform: translate(var(--tx, 15px), var(--ty, -15px)) scale(1.4) rotate(45deg); }
  100% { opacity: 0; transform: translate(var(--tx2, 25px), var(--ty2, -30px)) scale(0.1) rotate(90deg); }
}

/* ── 8. 캐릭터 체력 회복 힐링 십자 모션 (Hero Healing Cross Effect) ── */
.hero-heal-effect-container {
  position: absolute;
  pointer-events: none;
  z-index: 140;
  overflow: visible;
  width: 0;
  height: 0;
}

.hero-heal-aura {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(167, 243, 208, 0.8) 0%, rgba(52, 211, 153, 0.4) 40%, rgba(16, 185, 129, 0.15) 65%, transparent 80%);
  box-shadow: 0 0 40px 15px rgba(16, 185, 129, 0.6);
  animation: heroHealAuraAnim 0.85s cubic-bezier(0.15, 0.85, 0.35, 1) forwards;
}

@keyframes heroHealAuraAnim {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  35%  { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.4); }
}

.hero-heal-cross {
  font-size: var(--sz, 18px) !important;
  color: #a7f3d0 !important;
  text-shadow: 0 0 14px #10b981, 0 0 25px #059669, 0 0 4px #ffffff !important;
}

/* ── 9. 디버그 모드 단축키 안내 패널 (하단 캐릭터 영역 오버레이) ── */
.debug-guide-panel {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: min(94%, 380px);
  background: rgba(10, 14, 26, 0.95);
  border: 2px solid #ffcc00;
  box-shadow: 0 0 18px rgba(255, 204, 0, 0.5), inset 0 0 12px rgba(0, 0, 0, 0.9);
  border-radius: 10px;
  padding: 8px 10px;
  z-index: 100;
  pointer-events: auto;
  font-family: 'Noto Sans KR', sans-serif;
  color: #ffffff;
  font-weight: 800;
  backdrop-filter: blur(8px);
  max-height: calc(100% - 16px);
  overflow-y: auto;
  box-sizing: border-box;
  animation: debugPanelFadeIn 0.2s ease-out;
}

@keyframes debugPanelFadeIn {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

.debug-guide-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 204, 0, 0.4);
  padding-bottom: 4px;
  margin-bottom: 6px;
}

.debug-guide-title {
  font-size: 12px;
  color: #ffcc00;
  font-weight: 900;
  letter-spacing: 0.3px;
  text-shadow: 0 0 6px rgba(255, 204, 0, 0.6);
}

.debug-guide-close {
  background: transparent;
  border: none;
  color: #ffcc00;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}

.debug-guide-close:hover {
  color: #ffffff;
}

.debug-guide-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px 8px;
}

.debug-key-item {
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  font-weight: 800;
}

.debug-key-divider {
  grid-column: 1 / -1;
  text-align: center;
  color: #ffcc00;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.5px;
  margin: 4px 0 2px;
  padding: 2px 0;
  border-top: 1px dashed rgba(255, 204, 0, 0.35);
  border-bottom: 1px dashed rgba(255, 204, 0, 0.35);
}

.dbg-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  background: #ffcc00;
  color: #0d1117;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 900;
  flex-shrink: 0;
  box-shadow: 0 0 5px rgba(255, 204, 0, 0.7);
}

.dbg-desc {
  color: #f1f5f9;
  font-weight: 800;
  letter-spacing: -0.3px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}





/* ═══════════════════════════════════════════════════════════════════
   § 상점 시스템 (Shop System) 스타일링
   3×3 고딕 판타지 나무 사물함(Wood Cabinet) & 구매 모달
   ═══════════════════════════════════════════════════════════════════ */

.screen-shop {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 6px 10px;
  background: rgba(10, 8, 14, 0.85);
  backdrop-filter: blur(8px);
}

.shop-container.gothic-wood-cabinet {
  width: 100%;
  max-width: 520px;
  height: calc(100% - 12px);
  max-height: calc(100% - 12px);
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #2b1d14 0%, #1c130d 50%, #120c08 100%);
  border: 4px solid #5a381e;
  border-radius: 16px;
  box-shadow: 
    inset 0 0 30px rgba(0, 0, 0, 0.9),
    inset 0 2px 4px rgba(255, 200, 150, 0.2),
    0 12px 40px rgba(0, 0, 0, 0.95),
    0 0 25px rgba(90, 56, 30, 0.4);
  padding: 12px 12px 10px;
  position: relative;
  overflow: hidden;
}

/* 상점 헤더 */
.shop-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 5px;
  margin-bottom: 8px;
  padding-bottom: 7px;
  border-bottom: 2px solid rgba(139, 90, 43, 0.4);
  flex-shrink: 0;
}

.shop-title {
  font-family: var(--font-header);
  font-size: clamp(1.4rem, 4.5cqw, 1.7rem);
  font-weight: 900;
  color: #ffd166;
  letter-spacing: 2px;
  text-shadow: 0 0 14px rgba(255, 209, 102, 0.5), 0 2px 4px rgba(0, 0, 0, 0.9);
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.shop-title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.shop-title-img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(255, 209, 102, 0.4));
}

.shop-gold-display {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: clamp(1.25rem, 3.8cqw, 1.55rem);
  font-weight: 900;
  color: #ffd166;
  text-shadow: 0 0 10px rgba(255, 209, 102, 0.6), 0 2px 5px rgba(0, 0, 0, 0.9);
  letter-spacing: 1px;
}

.shop-gold-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.shop-gold-img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(255, 209, 102, 0.6));
}

.shop-price-gold-img {
  width: 13px;
  height: 13px;
  object-fit: contain;
  vertical-align: middle;
  margin-right: 2px;
}

.shop-gold-unit {
  font-size: 1.05rem;
  color: #fca311;
  margin-left: 2px;
}

.shop-carried-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 0.85rem;
  color: #e2d9cc;
  flex-wrap: wrap;
}

.shop-carried-label {
  font-weight: 700;
  color: #c9b097;
}

.shop-carried-slots {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}

.shop-carried-slot {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(14, 10, 7, 0.8);
  border: 1px solid #734d28;
  border-radius: 8px;
  padding: 2px 7px;
  font-size: 0.78rem;
  color: #f1ebd9;
}

.shop-carried-slot .slot-badge {
  background: #5a381e;
  color: #ffd166;
  font-size: 0.7rem;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 4px;
}

.shop-carried-slot .slot-content {
  font-weight: 600;
}

.shop-notice-text {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.35;
  word-break: keep-all;
  color: #ffb703;
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.shop-notice-text.notice-full {
  color: #ff4d6d;
}

/* 3×3 사물함 선반 그리드 (스크롤 지원) */
.shop-shelves-wrap {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow-y: auto;
  min-height: 0;
  padding: 2px 4px 6px;
  -webkit-overflow-scrolling: touch;
}

.shop-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: 100%;
  padding: 2px 0 6px;
}

/* 사물함 개별 칸 */
.shop-cell {
  position: relative;
  background: linear-gradient(180deg, rgba(30, 20, 15, 0.95) 0%, rgba(15, 10, 8, 0.98) 100%);
  border: 2px solid #5a3a22;
  border-radius: 12px;
  padding: 8px 6px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 
    inset 0 0 14px rgba(0, 0, 0, 0.8),
    0 4px 10px rgba(0, 0, 0, 0.6);
  min-height: 135px;
  justify-content: space-between;
}

.shop-cell:hover:not(.disabled):not(.sold-out) {
  border-color: #ffd166;
  transform: translateY(-3px) scale(1.02);
  box-shadow: 
    inset 0 0 16px rgba(255, 209, 102, 0.2),
    0 6px 18px rgba(0, 0, 0, 0.8),
    0 0 12px rgba(255, 209, 102, 0.4);
}

.shop-cell:active:not(.disabled):not(.sold-out) {
  transform: scale(0.97);
}

.shop-cell.row-weapon { border-top-color: #4a6fa5; }
.shop-cell.row-charm  { border-top-color: #9d4edd; }
.shop-cell.row-heal   { border-top-color: #2a9d8f; }
.shop-cell.row-legend:not(.disabled) {
  border-top-color: #ffd700;
  box-shadow: 0 0 14px 2px rgba(255, 215, 0, 0.35);
}
.shop-cell.row-nuke:not(.disabled) {
  border-top-color: #7cff5c;
  box-shadow: 0 0 14px 2px rgba(124, 255, 92, 0.32);
}

/* 봉인된(미해금) 상점 아이템 — 클릭은 가능하되 구매는 불가, 은은하게 맥동하는 신비로운 느낌 */
.shop-cell.locked-mystery {
  cursor: pointer;
  filter: grayscale(0.5) brightness(0.82);
  animation: locked-mystery-pulse 2.6s ease-in-out infinite;
}

.shop-cell.locked-mystery:hover {
  filter: grayscale(0.3) brightness(0.92);
}

.shop-cell-price.shop-cell-price-locked {
  color: #7cff5c;
  font-weight: 700;
}

@keyframes locked-mystery-pulse {
  0%, 100% {
    box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.85), 0 4px 10px rgba(0, 0, 0, 0.6);
  }
  50% {
    box-shadow: inset 0 0 18px rgba(124, 255, 92, 0.28), 0 4px 14px rgba(124, 255, 92, 0.4);
  }
}

/* 정사각형 비율로 칸에 큼직하게 들어가는 아이템 아이콘 래퍼 */
.shop-cell-icon-wrap {
  width: 100%;
  max-width: 82px;
  aspect-ratio: 1 / 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 4px;
}

.shop-cell-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0;
  padding: 2px;
  box-sizing: border-box;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,0.8));
  transition: transform 0.2s ease;
}

.shop-cell:hover:not(.disabled):not(.sold-out) .shop-cell-img {
  transform: scale(1.05);
}

.shop-cell-emoji {
  font-size: 1.85rem;
  line-height: 1;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.8));
}

.shop-cell-name {
  font-size: 0.8rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 3px;
  line-height: 1.15;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
  min-height: 2.3em;
  display: flex;
  align-items: center;
  justify-content: center;
  word-break: keep-all;
  overflow-wrap: break-word;
  padding: 0 2px;
}

.shop-cell-price {
  font-size: 0.78rem;
  font-weight: 800;
  color: #ffd166;
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(255, 209, 102, 0.35);
  border-radius: 12px;
  padding: 2px 8px;
  margin-bottom: 2px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.shop-cell-desc {
  display: none !important;
}

/* 비활성화 상태 (2개 소지 시 또는 골드 부족 시) */
.shop-cell.disabled {
  opacity: 0.38;
  filter: grayscale(0.85);
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.9);
}

/* 구매 완료 (빈 칸 선반) 상태 */
.shop-cell.sold-out {
  background: rgba(10, 7, 5, 0.4);
  border: 2px dashed #422d1c;
  cursor: default;
  pointer-events: none;
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.9);
  justify-content: center;
}

.shop-cell-soldout-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: #634f3f;
  letter-spacing: 1px;
}

/* 상점 푸터 */
.shop-footer {
  margin-top: 14px;
  display: flex;
  justify-content: center;
  padding-top: 10px;
  border-top: 2px solid rgba(139, 90, 43, 0.3);
}

.btn-exit-shop {
  min-width: 180px;
  font-size: 1rem;
  font-weight: 800;
  padding: 12px 24px;
  background: linear-gradient(180deg, #4a7c59 0%, #2b5136 100%);
  border: 2px solid #68a679;
  border-radius: 10px;
  color: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,0.6), 0 0 12px rgba(74, 124, 89, 0.4);
  cursor: pointer;
  transition: all 0.2s;
}

.btn-exit-shop:hover {
  background: linear-gradient(180deg, #59946b 0%, #356342 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.7), 0 0 16px rgba(104, 166, 121, 0.6);
}

.btn-exit-shop:active {
  transform: scale(0.97);
}

/* ── 상점 구매 확인 모달 ────────────────────────────── */
.shop-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 4, 8, 0.82);
  backdrop-filter: blur(5px);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: modalFadeIn 0.25s ease-out forwards;
}

@keyframes modalFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.shop-modal-card {
  width: 100%;
  max-width: 360px;
  background: linear-gradient(180deg, #241913 0%, #150f0c 100%);
  border: 2px solid #8b5a2b;
  border-radius: 16px;
  padding: 22px 18px;
  text-align: center;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.95), 0 0 25px rgba(139, 90, 43, 0.4);
  animation: modalPopIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes modalPopIn {
  from { transform: scale(0.8); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.shop-modal-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 16px;
}

.shop-modal-icon-wrap {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.shop-modal-icon-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0;
  padding: 2px;
  box-sizing: border-box;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.8));
}

.shop-modal-icon-wrap .shop-cell-emoji {
  font-size: 2.8rem;
}

.shop-modal-item-name {
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 6px 0;
}

.shop-modal-item-price {
  font-size: 1.05rem;
  font-weight: 800;
  color: #ffd166;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 209, 102, 0.4);
  border-radius: 12px;
  padding: 3px 12px;
  margin-bottom: 8px;
}

.shop-modal-item-desc {
  font-size: 0.8rem;
  color: #bfaea0;
  margin: 0;
  line-height: 1.35;
}

.shop-modal-question {
  font-size: 0.95rem;
  font-weight: 700;
  color: #f1ebd9;
  margin: 0 0 18px 0;
}

.shop-modal-btns {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.shop-modal-btn {
  flex: 1;
  padding: 10px 16px;
  font-size: 0.95rem;
  font-weight: 700;
  border-radius: 8px;
}

/* ──────────────────────────────────────────────────────────────────────────────
 * [Batch E] 상점 소지 아이템 및 상태 이펙트 (Item Effects & Particle Enhancements)
 * ────────────────────────────────────────────────────────────────────────────── */

/* ── E-1. 소지 슬롯 실패 셰이크 (Shake) ────────────────────────────────────── */
.item-floater.item-floater-shake {
  animation: itemFloaterShakeAnim 0.32s cubic-bezier(0.36, 0.07, 0.19, 0.97) both !important;
}

@keyframes itemFloaterShakeAnim {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-6px) rotate(-3deg); }
  40%      { transform: translateX(6px) rotate(3deg); }
  60%      { transform: translateX(-4px) rotate(-1.5deg); }
  80%      { transform: translateX(4px) rotate(1.5deg); }
}

/* ── E-2. 소지 아이템 소비 펑! 파티클 버스트 (Item Floater Consume Burst) ─────── */
.item-consume-burst-container {
  position: absolute;
  pointer-events: none;
  z-index: 220;
  overflow: visible;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 수렴 후 팡! 중심 코어 섬광 플래시 (안쪽으로 응축되었다가 폭발) */
.item-consume-core-flash {
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, var(--theme-light, #fef08a) 30%, var(--theme-core, #f59e0b) 60%, transparent 100%);
  filter: drop-shadow(0 0 25px var(--theme-core, #f59e0b)) drop-shadow(0 0 12px #ffffff);
  animation: itemConsumeFlashAnim 0.42s cubic-bezier(0.1, 0.9, 0.2, 1) forwards;
  pointer-events: none;
}

@keyframes itemConsumeFlashAnim {
  0%   { opacity: 0; transform: scale(0.8); }
  25%  { opacity: 1; transform: scale(0.3); } /* 순간 중심 수렴 */
  50%  { opacity: 1; transform: scale(1.6); } /* 팡! 팽창 */
  100% { opacity: 0; transform: scale(2.4); }
}

/* 소비 충격파 링 */
.item-consume-shockwave-ring {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid var(--theme-light, #fef08a);
  box-shadow: 0 0 20px var(--theme-core, #f59e0b), inset 0 0 12px var(--theme-core, #f59e0b);
  animation: itemConsumeRingAnim 0.5s cubic-bezier(0.12, 0.85, 0.25, 1) forwards;
  pointer-events: none;
}

.item-consume-shockwave-ring.ring-secondary {
  border-color: var(--theme-core, #f59e0b);
  animation-delay: 45ms;
}

@keyframes itemConsumeRingAnim {
  0%   { transform: scale(0.2); opacity: 1; }
  100% { transform: scale(3.2); opacity: 0; border-width: 1px; }
}

/* 사방으로 흩어지는 소비 불꽃 스파크 파티클 */
.item-consume-burst-particle {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  pointer-events: none;
  background: var(--p-color, #f59e0b);
  box-shadow: 0 0 10px var(--p-color, #f59e0b), 0 0 18px rgba(255, 255, 255, 0.8);
  animation: itemConsumeBurstAnim 0.55s cubic-bezier(0.15, 0.85, 0.35, 1) forwards;
}

@keyframes itemConsumeBurstAnim {
  0% {
    opacity: 0.8;
    transform: translate(-50%, -50%) translate(0, 0) scale(0.3);
  }
  20% {
    opacity: 1;
    transform: translate(-50%, -50%) translate(calc(var(--tx) * 0.15), calc(var(--ty) * 0.15)) scale(1.3);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) scale(0.1);
  }
}

/* 소비 스파클 별가루 */
.item-consume-sparkle {
  position: absolute;
  font-size: 15px;
  color: var(--theme-light, #ffffff);
  filter: drop-shadow(0 0 8px var(--theme-core, #f59e0b));
  pointer-events: none;
  animation: itemConsumeSparkleAnim 0.5s ease-out forwards;
}

@keyframes itemConsumeSparkleAnim {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(0.5); }
  60%  { opacity: 1; transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) scale(1.3); }
  100% { opacity: 0; transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) scale(0.2); }
}

/* ── E-3. 무기 보존 방어 성공 (Weapon Ward Block Effect) ─────────────────────── */
.ward-block-container {
  position: absolute;
  pointer-events: none;
  z-index: 230;
  overflow: visible;
  width: 0;
  height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 황금 룬 방패 팝업 및 충격 방어 배리어 */
.ward-block-shield-burst {
  position: absolute;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 0 28px #fbbf24) drop-shadow(0 0 14px #ffffff);
  animation: wardBlockShieldAnim 0.65s cubic-bezier(0.12, 0.9, 0.28, 1) forwards;
  pointer-events: none;
}

.ward-block-shield-burst svg {
  width: 100%;
  height: 100%;
}

@keyframes wardBlockShieldAnim {
  0%   { opacity: 0; transform: scale(0.3); }
  25%  { opacity: 1; transform: scale(1.25); filter: brightness(2) drop-shadow(0 0 35px #fbbf24); }
  65%  { opacity: 1; transform: scale(1.05); }
  100% { opacity: 0; transform: scale(1.4); filter: brightness(1.2); }
}

/* 황금 파동 충격파 링 */
.ward-block-shockwave {
  position: absolute;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 4px solid #fef08a;
  box-shadow: 0 0 25px #f59e0b, inset 0 0 15px #fbbf24;
  animation: wardBlockShockwaveAnim 0.6s cubic-bezier(0.1, 0.85, 0.25, 1) forwards;
  pointer-events: none;
}

@keyframes wardBlockShockwaveAnim {
  0%   { transform: scale(0.4); opacity: 1; }
  100% { transform: scale(2.8); opacity: 0; border-width: 1px; }
}

/* 산산이 부서져 비산하는 방패 크리스탈 파편 */
.ward-block-shard {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  background: linear-gradient(135deg, #ffffff, #fde047, #f59e0b);
  box-shadow: 0 0 12px #fbbf24, 0 0 6px #ffffff;
  clip-path: polygon(50% 0%, 100% 70%, 50% 100%, 0% 70%);
  animation: wardBlockShardAnim 0.62s cubic-bezier(0.1, 0.85, 0.25, 1) forwards;
}

@keyframes wardBlockShardAnim {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) translate(0, 0) rotate(0deg) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(0.2);
  }
}

/* 플로팅 방어 텍스트 */
.ward-block-floating-text,
.energy-shield-block-text {
  position: absolute;
  top: -42px;
  white-space: nowrap;
  font-size: 1.15rem;
  font-weight: 900;
  color: #fffbeb;
  text-shadow: 0 0 12px #fbbf24, 0 0 24px #d97706, 0 2px 4px #000000;
  pointer-events: none;
  animation: wardBlockTextAnim 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  z-index: 240;
}

.energy-shield-block-text {
  color: #f0f9ff;
  text-shadow: 0 0 14px #38bdf8, 0 0 28px #0284c7, 0 2px 4px #000000;
}

@keyframes wardBlockTextAnim {
  0%   { opacity: 0; transform: translate(-50%, 10px) scale(0.6); }
  25%  { opacity: 1; transform: translate(-50%, -8px) scale(1.18); }
  60%  { opacity: 1; transform: translate(-50%, -22px) scale(1.0); }
  100% { opacity: 0; transform: translate(-50%, -40px) scale(0.85); }
}

/* ── E-4. 에너지 실드 신규 이펙트 (Energy Shield Activate & Block) ───────────── */
.energy-shield-activate-container,
.energy-shield-block-container {
  position: absolute;
  pointer-events: none;
  z-index: 215;
  overflow: visible;
  width: 0;
  height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 캐릭터 주변에 전개되는 푸른 육각형 에너지 배리어 */
.energy-shield-hex-barrier {
  position: absolute;
  width: 140px;
  height: 140px;
  pointer-events: none;
  animation: energyShieldDeployAnim 1.0s cubic-bezier(0.15, 0.85, 0.25, 1) forwards;
  filter: drop-shadow(0 0 22px #38bdf8) drop-shadow(0 0 10px #0284c7);
}

.energy-shield-hex-barrier svg {
  width: 100%;
  height: 100%;
}

@keyframes energyShieldDeployAnim {
  0%   { opacity: 0; transform: scale(0.2) rotate(-30deg); }
  35%  { opacity: 1; transform: scale(1.22) rotate(6deg); filter: brightness(1.8) drop-shadow(0 0 35px #7dd3fc); }
  65%  { opacity: 0.9; transform: scale(1.0) rotate(0deg); }
  100% { opacity: 0; transform: scale(1.15) rotate(0deg); }
}

/* 에너지 배리어 전개 파동 링 */
.energy-shield-activate-ring {
  position: absolute;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: 3.5px solid #bae6fd;
  box-shadow: 0 0 25px #0284c7, inset 0 0 16px #38bdf8;
  animation: energyShieldRingAnim 0.7s cubic-bezier(0.12, 0.85, 0.25, 1) forwards;
  pointer-events: none;
}

@keyframes energyShieldRingAnim {
  0%   { transform: scale(0.3); opacity: 1; }
  100% { transform: scale(2.2); opacity: 0; border-width: 1px; }
}

/* 푸른 에너지 스파크 */
.energy-shield-activate-spark {
  position: absolute;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 10px #38bdf8, 0 0 18px #0284c7;
  pointer-events: none;
  animation: energyShieldSparkAnim 0.65s ease-out forwards;
}

@keyframes energyShieldSparkAnim {
  0%   { opacity: 1; transform: translate(-50%, -50%) translate(0, 0) scale(0.5); }
  100% { opacity: 0; transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) scale(0.15); }
}

/* 피해 방어 시 육각 실드 산산조각 (Glass Shatter) */
.energy-shield-shatter-hex {
  position: absolute;
  width: 130px;
  height: 130px;
  pointer-events: none;
  animation: energyShieldShatterAnim 0.5s ease-out forwards;
  filter: drop-shadow(0 0 25px #38bdf8);
}

.energy-shield-shatter-hex svg {
  width: 100%;
  height: 100%;
}

@keyframes energyShieldShatterAnim {
  0%   { opacity: 1; transform: scale(1); filter: brightness(2.5); }
  30%  { opacity: 0.9; transform: scale(1.15); filter: brightness(2.0); }
  100% { opacity: 0; transform: scale(1.35); filter: brightness(1.0); }
}

/* 비산하는 푸른 유리 파편 */
.energy-shield-glass-shard {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(56, 189, 248, 0.9), rgba(2, 132, 199, 0.7));
  box-shadow: 0 0 10px #38bdf8, inset 0 0 4px #ffffff;
  clip-path: polygon(30% 0%, 100% 20%, 75% 100%, 0% 70%);
  animation: energyGlassShardAnim 0.6s cubic-bezier(0.1, 0.85, 0.25, 1) forwards;
}

@keyframes energyGlassShardAnim {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) translate(0, 0) rotate(0deg) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(0.15);
  }
}

/* ── E-5. 정찰까마귀 비행 모션 및 안개 걷힘 (Scout Crow Flight & Mist Reveal) ─── */
.crow-flight-container {
  position: absolute;
  pointer-events: none;
  z-index: 250;
  inset: 0;
  overflow: visible;
}

/* 날아가는 까마귀 본체 실루엣 */
.crow-flying-entity {
  position: absolute;
  width: 44px;
  height: 38px;
  pointer-events: none;
  filter: drop-shadow(0 0 12px #9d4edd) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.8));
  transition: transform 0.05s linear;
}

.crow-flying-entity svg {
  width: 100%;
  height: 100%;
  animation: crowFlapAnim 0.16s ease-in-out infinite alternate;
}

@keyframes crowFlapAnim {
  0%   { transform: scaleY(0.75) rotate(-4deg); }
  100% { transform: scaleY(1.25) rotate(4deg); }
}

/* 뒤로 날리는 보라/검은 깃털 파티클 */
.crow-feather-particle {
  position: absolute;
  width: 14px;
  height: 6px;
  border-radius: 60% 40% 60% 40%;
  background: linear-gradient(90deg, #1e1035 0%, #7c3aed 70%, #c084fc 100%);
  box-shadow: 0 0 6px #7c3aed;
  pointer-events: none;
  animation: crowFeatherDriftAnim 0.55s ease-out forwards;
}

@keyframes crowFeatherDriftAnim {
  0% {
    opacity: 0.9;
    transform: translate(-50%, -50%) translate(0, 0) rotate(var(--rot, 0deg)) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) rotate(calc(var(--rot, 0deg) + 70deg)) scale(0.3);
  }
}

/* 까마귀 영혼 안개 잔상 */
.crow-trail-particle {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, #e9d5ff 0%, #9333ea 50%, transparent 100%);
  box-shadow: 0 0 12px #a855f7;
  pointer-events: none;
  animation: crowTrailFadeAnim 0.42s ease-out forwards;
}

@keyframes crowTrailFadeAnim {
  0%   { opacity: 0.85; transform: translate(-50%, -50%) scale(0.8); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.0); }
}

/* 까마귀 착탄 지점 폭발 링 */
.crow-arrival-burst {
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 3px solid #e9d5ff;
  box-shadow: 0 0 25px #9333ea, inset 0 0 15px #c084fc;
  animation: crowArrivalAnim 0.48s cubic-bezier(0.1, 0.85, 0.25, 1) forwards;
  pointer-events: none;
}

@keyframes crowArrivalAnim {
  0%   { transform: scale(0.2); opacity: 1; }
  100% { transform: scale(2.5); opacity: 0; border-width: 1px; }
}

/* 3×3 정찰 안개가 걷히는 오버레이 */
.scout-fog-dissolve {
  position: absolute;
  inset: 0;
  z-index: 22;
  pointer-events: none;
  border-radius: var(--card-radius, 8px);
  background: radial-gradient(circle, rgba(157, 78, 221, 0.5) 0%, rgba(30, 10, 50, 0.7) 70%, rgba(10, 5, 20, 0.9) 100%);
  animation: scoutFogDissolveAnim 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes scoutFogDissolveAnim {
  0%   { opacity: 0.95; filter: blur(4px); transform: scale(1); }
  45%  { opacity: 0.75; filter: blur(2px); transform: scale(1.03); }
  100% { opacity: 0; filter: blur(0px); transform: scale(1.08); }
}

/* 안개 속에서 카드가 솟아오르는 리프트 효과 */
.scout-card-lift {
  animation: scoutCardLiftAnim 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes scoutCardLiftAnim {
  0%   { opacity: 0.2; transform: scale(0.85) translateY(8px); filter: brightness(0.6); }
  100% { opacity: 1; transform: scale(1) translateY(0); filter: brightness(1); }
}

/* ═════════════════════════════════════════════════════════════
   신규 아이템 Golden Path (황금의 길) 비주얼 이펙트
   ═════════════════════════════════════════════════════════════ */
.golden-path-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1200;
  overflow: visible;
}

.golden-path-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

.gp-path-glow {
  opacity: 0.85;
}

.gp-path-main {
  opacity: 0.95;
}

.gp-path-core {
  opacity: 1;
}

.gp-fade-out {
  transition: opacity 1.4s ease-out;
  opacity: 0 !important;
}

/* 선두 황금빛 혜성 머리 오브 */
.golden-path-comet-head {
  position: absolute;
  width: 26px;
  height: 26px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 15%, #ffe66d 50%, #ffb703 80%, rgba(255, 183, 3, 0) 100%);
  box-shadow: 0 0 20px #ffd700, 0 0 38px #ff9e00, inset 0 0 10px #ffffff;
  pointer-events: none;
  z-index: 1210;
}

/* 혜성 꼬리 반짝이 파티클 */
.gp-trail-sparkle {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 30%, #ffe66d 65%, #ffb703 100%);
  box-shadow: 0 0 10px #ffd700, 0 0 16px #ff9e00;
  pointer-events: none;
  z-index: 1205;
  animation: gpTrailSparkleAnim 0.48s ease-out forwards;
}

@keyframes gpTrailSparkleAnim {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.3);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--tx, 0px)), calc(-50% + var(--ty, 0px))) scale(0.2);
  }
}

/* 혜성 뒤로 촤라락 흩뿌려지는 황금 별빛 파티클 */
.gp-trail-star {
  position: absolute;
  font-size: clamp(11px, 3.5cqw, 17px);
  color: #fff8cc;
  text-shadow: 0 0 8px #ffd700, 0 0 18px #ff9e00;
  pointer-events: none;
  z-index: 1206;
  animation: gpTrailStarAnim 0.55s ease-out forwards;
}

@keyframes gpTrailStarAnim {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.5) rotate(0deg);
  }
  35% {
    opacity: 1;
    transform: translate(calc(-50% + var(--tx, 0px) * 0.6), calc(-50% + var(--ty, 0px) * 0.6)) scale(1.3) rotate(calc(var(--rot, 0deg) * 0.5));
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--tx, 0px)), calc(-50% + var(--ty, 0px) + 10px)) scale(0.3) rotate(var(--rot, 0deg));
  }
}

/* 탈출 관문 도착 시 펑 터지는 황금 충격파 링 */
.gp-shockwave-ring {
  position: absolute;
  width: 40px;
  height: 40px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 3.5px solid #ffd700;
  box-shadow: 0 0 24px #ffb703, inset 0 0 14px #ffd700;
  pointer-events: none;
  z-index: 1220;
}

.gp-ring-1 {
  animation: gpShockwaveAnim 0.72s cubic-bezier(0.12, 0.9, 0.25, 1) forwards;
}

.gp-ring-2 {
  animation: gpShockwaveAnim 0.85s cubic-bezier(0.12, 0.9, 0.25, 1) 0.08s forwards;
  border-color: #fff3b0;
}

@keyframes gpShockwaveAnim {
  0% {
    transform: translate(-50%, -50%) scale(0.2);
    opacity: 1;
    border-width: 5px;
  }
  50% {
    opacity: 0.9;
  }
  100% {
    transform: translate(-50%, -50%) scale(3.6);
    opacity: 0;
    border-width: 1px;
  }
}

/* 360도 펑 터지는 황금 별빛 파티클 */
.gp-burst-star-particle {
  position: absolute;
  font-size: clamp(14px, 4cqw, 22px);
  color: #fff3b0;
  text-shadow: 0 0 12px #ffd700, 0 0 24px #ff9e00;
  pointer-events: none;
  z-index: 1225;
  animation: gpBurstStarAnim 0.85s cubic-bezier(0.15, 0.85, 0.35, 1) forwards;
}

@keyframes gpBurstStarAnim {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.3) rotate(0deg);
  }
  40% {
    opacity: 1;
    transform: translate(calc(-50% + var(--tx, 0px) * 0.7), calc(-50% + var(--ty, 0px) * 0.7)) scale(1.4) rotate(calc(var(--rot, 0deg) * 0.5));
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--tx, 0px)), calc(-50% + var(--ty, 0px) + 20px)) scale(0.4) rotate(var(--rot, 0deg));
  }
}

/* 탈출 관문 카드 3초간 눈부신 황금빛 아우라 하이라이트 */
.cell-golden-path-highlight {
  animation: gpTargetHighlightPulse 1s ease-in-out infinite alternate !important;
  z-index: 100 !important;
}

@keyframes gpTargetHighlightPulse {
  0% {
    filter: brightness(1.15) drop-shadow(0 0 16px rgba(255, 215, 0, 0.8)) !important;
    transform: scale(1.02);
  }
  100% {
    filter: brightness(1.4) drop-shadow(0 0 32px rgba(255, 234, 117, 1)) drop-shadow(0 0 45px rgba(255, 183, 3, 0.9)) !important;
    transform: scale(1.06);
  }
}

/* 터치한 플로터 위치에서 팡 튀는 황금 마력 버스트 */
.gp-floater-burst-container {
  position: absolute;
  pointer-events: none;
  z-index: 1250;
}

.gp-floater-flash-ring {
  position: absolute;
  width: 36px;
  height: 36px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 3.5px solid #ffd700;
  box-shadow: 0 0 18px #ffd700, inset 0 0 10px #ffffff;
  pointer-events: none;
  animation: gpFloaterRingAnim 0.5s ease-out forwards;
}

@keyframes gpFloaterRingAnim {
  0% {
    transform: translate(-50%, -50%) scale(0.3);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(2.8);
    opacity: 0;
    border-width: 1px;
  }
}

.gp-floater-sparkle {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 30%, #ffd700 80%, transparent 100%);
  box-shadow: 0 0 10px #ffd700, 0 0 18px #ff9e00;
  pointer-events: none;
  animation: gpFloaterSparkleAnim 0.55s cubic-bezier(0.1, 0.85, 0.25, 1) forwards;
}

@keyframes gpFloaterSparkleAnim {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.4);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--tx, 0px)), calc(-50% + var(--ty, 0px))) scale(0.1);
  }
}

.gp-floater-star {
  position: absolute;
  font-size: clamp(12px, 3.8cqw, 18px);
  color: #fff9db;
  text-shadow: 0 0 10px #ffd700, 0 0 20px #ff9e00;
  pointer-events: none;
  animation: gpBurstStarAnim 0.65s cubic-bezier(0.12, 0.85, 0.3, 1) forwards;
}

/* 혜성이 미로 카드 중심을 통과할 때 카드의 순간 황금빛 번쩍임 */
.cell-golden-step-gleam {
  animation: gpStepGleamAnim 0.42s ease-out forwards !important;
}

@keyframes gpStepGleamAnim {
  0%   { filter: brightness(1); }
  35%  { filter: brightness(1.35) drop-shadow(0 0 12px #ffd700) !important; transform: scale(1.03); }
  100% { filter: brightness(1); transform: scale(1); }
}

.clear-retry-info {
  font-size: 0.85em;
  opacity: 0.8;
  margin: -4px 0 8px;
}
.grade-badge-s { color: #e0b84c; font-weight: 700; }
.grade-badge-a { color: #7ea8d8; font-weight: 700; }
.grade-badge-b { color: #7fbf7f; font-weight: 700; }
.grade-badge-c { color: #b8a583; font-weight: 700; }
.grade-badge-d { color: #999; font-weight: 700; }
.grade-badge {
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(0,0,0,0.06);
}

/* 컷신(오프닝/엔딩) 공용 풀화면 오버레이 (body 직속 전체 뷰포트 고정) */
.video-cutscene-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* 9:16 비디오 비율 유지 래퍼 컨테이너 (화면 크기에 맞춰 최대 풀사이즈로 렌더링되며 워터마크 커버 위치 고정) */
.video-cutscene-container {
  position: relative;
  width: min(100vw, calc(100vh * 9 / 16));
  height: min(100vh, calc(100vw * 16 / 9));
  width: min(100vw, calc(100dvh * 9 / 16));
  height: min(100dvh, calc(100vw * 16 / 9));
  aspect-ratio: 9 / 16;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cutscene-video {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 영상 비율 유지, 레터박스는 overlay의 검은 배경으로 자연 처리 */
  background: #000;
  display: block;
}

.btn-skip-cutscene {
  position: absolute;
  left: 83.5% !important;
  top: 90.7% !important;
  transform: translate(-50%, -50%) !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 10000;
  display: inline-flex;
  align-items: center !important;
  justify-content: center !important;
  width: 22.5% !important;
  max-width: 130px !important;
  aspect-ratio: 90 / 32 !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  border: none !important;
  background: transparent !important;
  cursor: pointer;
  white-space: nowrap !important;
  user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.75));
  transition: transform var(--tr-fast), filter var(--tr-fast);
}

.btn-skip-cutscene:hover {
  transform: translate(-50%, -50%) scale(1.05);
  filter: brightness(1.15) drop-shadow(0 4px 14px rgba(85, 150, 255, 0.5));
}

.btn-skip-cutscene:active {
  transform: translate(-50%, -50%) scale(0.95);
  filter: brightness(0.92);
}

.btn-skip-img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  pointer-events: none;
  object-fit: contain;
}

/* 공용 암전 트랜지션 레이어 — 항상 DOM에 존재, opacity로만 제어 */
/* fadeTransition의 fadeMs 기본값(450ms)과 일치 */
.global-fade-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10001;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
}
.global-fade-overlay.is-active {
  opacity: 1;
  pointer-events: auto; /* 암전 중 입력 차단 */
}

/* ── 추가 예정 콘텐츠 (Coming Soon) 풀화면 오버레이 ─────────── */
.coming-soon-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.coming-soon-container {
  position: relative;
  width: min(100vw, calc(100vh * 9 / 16));
  height: min(100vh, calc(100vw * 16 / 9));
  width: min(100vw, calc(100dvh * 9 / 16));
  height: min(100dvh, calc(100vw * 16 / 9));
  aspect-ratio: 9 / 16;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.coming-soon-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
}

/* ── 녹화(OBS)용 가짜 마우스 커서 (?rec=1 전용) ────────────────── */
#rec-fake-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  pointer-events: none !important;
  z-index: 2147483647 !important;
  display: none;
  opacity: 0;
  will-change: transform;
  user-select: none;
  -webkit-user-select: none;
}

#rec-fake-cursor.visible {
  display: block;
  opacity: 1;
}

.rec-cursor-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45));
  transform-origin: 0 0;
  transition: transform 0.08s cubic-bezier(0.2, 0.8, 0.4, 1);
  pointer-events: none !important;
}

#rec-fake-cursor.is-down .rec-cursor-icon {
  transform: scale(0.85);
}

.rec-cursor-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 32px;
  margin-top: -16px;
  margin-left: -16px;
  border-radius: 50%;
  border: 2px solid rgba(255, 230, 100, 0.95);
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.8), inset 0 0 6px rgba(255, 215, 0, 0.5);
  transform: scale(0.2);
  opacity: 0;
  pointer-events: none !important;
}

.rec-cursor-ring.active {
  animation: recRingPulse 0.35s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

@keyframes recRingPulse {
  0% {
    transform: scale(0.2);
    opacity: 1;
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}