/* ../cosmic-theme.css의 색상 변수는 그대로 쓰되, 두더지 게임만 우주 배경 대신 푸른 초원 배경을 쓴다
   (사용자 확정). cosmic-theme.css 는 허브/지렁이와 공유하므로 건드리지 않고 여기서 덮어쓴다.
   [hidden] 안전장치: 클래스의 display가 hidden 속성을 조용히 덮어쓰는 버그를 원천 차단. */
[hidden] { display: none !important; }
/* 모바일에서 버튼/링크 탭 시 나오는 사각 하이라이트 박스 제거 (전역) */
* { -webkit-tap-highlight-color: transparent; }
/* 키패드 등 버튼을 꾹 누르면 텍스트 선택 팝업(복사/번역/모두선택/웹검색)이 뜨는 문제 —
   입력칸(닉네임)만 빼고 전역으로 선택/롱프레스 콜아웃 차단. */
*:not(input):not(textarea) {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* 삼성 인터넷/크롬 자동 다크모드가 말풍선·문자칸 색을 재채색하지 않게.
   'light dark' + 아래 prefers-color-scheme 블록 = "이 페이지는 다크모드를 직접 처리함" 선언
   → 브라우저 자동 재채색 중단. */
html { color-scheme: light; }
/* 당겨서 새로고침 / 오버스크롤 바운스 차단 (전 페이지) */
html, body { overscroll-behavior: none; }

/* ── 밝은 모드 팔레트 — 삼성 기본 다이얼러(밝은) 레퍼런스: 깔끔한 흰색.
   Desktop/밝은모드.jpg 참고. 게임 플레이 보드(잔디밭)와 강조색은 그대로. ── */
:root {
  --lm-page:    #ffffff;   /* 페이지 배경 (폰 몸체) */
  --lm-bezel:   #f4f4f5;   /* 폰 베젤/힌지 (아주 옅은 회색) */
  --lm-surface: #ffffff;   /* 대화 홈·오버레이·메뉴 면 */
  --lm-pad:     #ffffff;   /* 다이얼러 패드 = 흰색 */
  --lm-ink:     #17171a;   /* 본문 글자 (다이얼 숫자 = 거의 검정) */
  --lm-muted:   #8a8a90;   /* 흐린 글자 (숫자 밑 알파벳·플레이스홀더) */
  --lm-line:    rgba(0, 0, 0, 0.10);
  --lm-line-2:  rgba(0, 0, 0, 0.055);
  --lm-fill:    #f1f1f3;   /* 검색바 등 옅은 채움 */
  --lm-chat:    #f4f1ea;   /* 대화 홈 배경 — 순백 대신 연한 웜그레이 (메신저 느낌) */
}
/* 배포 버전 표식 (스크린샷으로 어느 버전인지 확인용) — 시작 화면 좌하단 아주 작게 */
#build-tag {
  position: absolute;
  left: 6px;
  bottom: 4px;
  z-index: 9;
  font-size: 12px;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.32);
  pointer-events: none;
}
#game-screen:not(.is-start) #build-tag { display: none; }
img, .chat-emoji, .lane-hammer, .mole-pop, .mole-hole, .mole-hole-front { forced-color-adjust: none; }
/* 다크모드에서도 색은 그대로 (재선언 = 브라우저에게 "의도된 다크 색"임을 명시) */
@media (prefers-color-scheme: dark) {
  .chat-sms { background: #fff; color: #22242a; }
  .chat-bubble--them { background: linear-gradient(180deg, #35c866, #23b153); color: #fff; }
  .chat-bubble--me { background: #fee500; color: #1c1c14; }
  .chat-ad-btn { background: linear-gradient(180deg, #35c866, #23b153); color: #fff; }
}

/* 화면 전체 배경: 어두운 초록 단색 (사용자 확정 — 이미지 아님). 별/성운 레이어는 끈다.
   두더지 박스(.mole-board)만 잔디 이미지를 쓴다. */
body { background: var(--lm-page); }
.cosmic-bg { background: var(--lm-page); }
.cosmic-bg::before,
.cosmic-bg::after { display: none; }

.screen {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* 뒤로/홈 버튼 — 색칠앱과 동일한 3D 키캡 스타일 (사용자 요청). */
.icon-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(155deg, #ffffff 0%, #ececef 60%, #f6f6f8 100%);
  box-shadow: 0 3px 0 #d9d9de, 0 5px 8px rgba(0, 0, 0, 0.16), inset 0 1.5px 1.5px rgba(255, 255, 255, 0.95);
  color: #33333a;
  text-decoration: none;
  border: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;   /* 탭 시 사각 하이라이트 제거 */
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.icon-btn:focus, .icon-btn:focus-visible { outline: none; }
.icon-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #d9d9de, 0 2px 4px rgba(0, 0, 0, 0.14), inset 0 1.5px 1.5px rgba(255, 255, 255, 0.95);
}
.icon-btn img, .icon-btn svg { width: 26px; height: 26px; display: block; }

/* 시작 UI — 폰 화면(#mole-board) 안에 얹히는 패널. 큰 시작 버튼 하나
   (나중에 스테이지/모드 버튼을 이 자리에 추가). */
.board-panel {
  position: absolute;
  inset: 0;
}
/* 시작 화면 = 카톡풍 대화. 게임박스 안, 메신저 화면처럼 (키패드는 아래 그대로 보임). */
.board-start {
  display: flex;
  flex-direction: column;
  padding: 12px 4px 16px;   /* 좌우 12→4: 두더지·하마 아바타를 게임박스 가장자리에 더 붙임 (사용자 요청) */
  z-index: 7;
  background: var(--lm-chat);   /* 대화 홈 = 연한 웜그레이 (잔디는 플레이 중에만) */
  overflow: hidden;
}
/* 챕터 ◀ 챕터 N ▶ — board-stats 안 맨 앞(하트 왼쪽). "챕터 N" 은 알약 박스(테두리를 타고
   도는 불빛, 챕터별 색), 양옆은 꼬리 달린 3D 화살표 버튼(누르면 쑥 들어감). 항상 표시.
   코인 자릿수 늘면 board-stats 그룹 전체가 왼쪽으로 밀려 같이 이동(자리 고정 아님). */
.chapter-nav-top { display: none; }
#game-screen.is-start .chapter-nav-top {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  position: absolute; left: 4px; top: 8px; z-index: 9;  /* 좌측 상단 고정, 아바타처럼 가장자리 4px */
  padding: 3px 5px;
}
#chapter-nav[hidden] { display: none; }

/* 아우라는 "챕터 N" 글자에서 나온다 (사용자 요청) — 사각 테두리 대신 글자 자체가 챕터색으로 빛나며
   숨쉬듯 번짐. 테두리·박스 없음. */
#game-screen.is-start .ch-txt { animation: ch-txt-aura 2.4s ease-in-out infinite; }
@keyframes ch-txt-aura {
  0%, 100% { text-shadow: 0 0 2px var(--ch-glow), 0 0 6px var(--ch-glow-soft); }
  50%      { text-shadow: 0 0 4px var(--ch-glow), 0 0 11px var(--ch-glow),
             0 0 20px var(--ch-glow-soft), 0 0 30px var(--ch-glow-soft); }
}

/* 챕터별 불빛 색 (1 풀그린 → 2 스카이 → 3 앰버 → 4 바이올렛 → 5 크림슨: 난이도 상승 톤) */
#chapter-nav { --ch-glow: #ff8a00; --ch-glow-lt: #ffd36b; --ch-glow-dk: #ff5e00; --ch-glow-soft: rgba(255, 130, 0, 0.5); }
#chapter-nav[data-ch="1"] { --ch-glow: #16b364; --ch-glow-lt: #6ee7a8; --ch-glow-dk: #0b7a42; --ch-glow-soft: rgba(22, 179, 100, 0.5); }
#chapter-nav[data-ch="2"] { --ch-glow: #3b9eff; --ch-glow-lt: #a5cdff; --ch-glow-dk: #1667c9; --ch-glow-soft: rgba(59, 158, 255, 0.5); }
#chapter-nav[data-ch="3"] { --ch-glow: #ff8a00; --ch-glow-lt: #ffd36b; --ch-glow-dk: #ff5e00; --ch-glow-soft: rgba(255, 138, 0, 0.5); }
#chapter-nav[data-ch="4"] { --ch-glow: #a855f7; --ch-glow-lt: #d8b4fe; --ch-glow-dk: #7c2fd4; --ch-glow-soft: rgba(168, 85, 247, 0.5); }
#chapter-nav[data-ch="5"] { --ch-glow: #ef3b3b; --ch-glow-lt: #ff9a9a; --ch-glow-dk: #c81e1e; --ch-glow-soft: rgba(239, 59, 59, 0.5); }

/* 챕터1(신규 유저 첫 챕터)만 — 시선 끌기용 2중 펄스(둘 다 3.6s ease-in-out, 홈버튼 애니와 같은 리듬):
   (a) 챕터 유닛 전체가 살짝 오므렸다 펴짐(홈버튼 네모 모이는 느낌을 scale 로),
   (b) 글자가 조금 커졌다 정상으로. → 박스가 조여지는 동안 글자가 부풀어 채웠다 같이 풀림. */
#game-screen.is-start #chapter-nav[data-ch="1"] { animation: ch-breathe 3.6s ease-in-out infinite; }
#game-screen.is-start #chapter-nav[data-ch="1"] .ch-txt { animation: ch-txt-aura 2.4s ease-in-out infinite, ch-txt-pulse 3.6s ease-in-out infinite; }
@keyframes ch-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.95); } }
@keyframes ch-txt-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }

/* (c) 시작(통화) 버튼과 똑같은 대각선 빛 쓸기(idle-crown-sweep, 2.8s) — 모든 챕터. */
.ch-shine { position: absolute; inset: 0; z-index: 2; border-radius: inherit; overflow: hidden; pointer-events: none; display: none; }
#game-screen.is-start #chapter-nav .ch-shine { display: block; }
.ch-shine::before {
  content: '';
  position: absolute; inset: -60%;
  /* 흰색으로 글자를 덮지 않게 — 아주 옅은 빛만(사용자: "글자안 흰색 나오는거 투명으로") */
  background: linear-gradient(115deg, transparent 44%, rgba(255, 255, 255, 0.2) 50%, transparent 56%);
  animation: idle-crown-sweep 2.8s ease-in-out infinite;
}

/* 손가락 이모지(👈 👉). 박스 없이 — 그림자로 살짝 떠 있고, 누르면 쑥 들어가는 느낌. */
.ch-arrow {
  width: 24px; height: 26px;
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border: none;
  padding: 0;
  cursor: pointer;
  background: none;
  font-size: 17px;
  line-height: 1;
  filter: drop-shadow(0 2px 1.5px rgba(0, 0, 0, 0.4)) drop-shadow(0 0 0.5px rgba(255, 255, 255, 0.6));
  transition: transform 0.07s ease, filter 0.07s ease;
}
.ch-arrow:active:not(:disabled) {
  transform: translateY(2px) scale(0.9);
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.45));
}
.ch-arrow:disabled { cursor: default; filter: grayscale(1) opacity(0.35); }

.ch-label {
  position: relative;
  font-size: 0.82rem; font-weight: 800; line-height: 1;
  color: #1c1c22;
  background: transparent;
  padding: 3px 2px;               /* 글자↔손 이모지 간격 축소 (사용자 요청) */
  white-space: nowrap;
}
.ch-txt { display: inline-block; }
/* 티켓 이모지 + 개수 — 다음(👉) 손 이모지 옆. 동작은 추후 지정. */
.ch-ticket {
  flex: 0 0 auto;
  font-size: 16px;
  line-height: 1;
  margin-left: 2px;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
}
.ch-ticket-n {
  flex: 0 0 auto;
  font-size: 0.78rem; font-weight: 800; line-height: 1;
  color: #1c1c22;
  margin-left: 1px;
}
/* 챕터 바꿀 때 — 글자 아우라가 확 터졌다 가라앉음 (game.js 가 .ch-label 에 .ch-flare, 900ms 뒤 제거) */
.ch-label.ch-flare { animation: ch-flare 0.85s ease-out; }
.ch-label.ch-flare .ch-txt { animation: ch-flare-aura 0.85s ease-out; }
@keyframes ch-flare {
  0%, 100% { transform: scale(1); }
  16%      { transform: scale(1.12); }
}
@keyframes ch-flare-aura {
  0%   { text-shadow: 0 0 2px var(--ch-glow), 0 0 6px var(--ch-glow-soft); }
  16%  { text-shadow: 0 0 6px var(--ch-glow-lt), 0 0 16px var(--ch-glow),
         0 0 32px var(--ch-glow), 0 0 50px var(--ch-glow-soft); }
  100% { text-shadow: 0 0 2px var(--ch-glow), 0 0 6px var(--ch-glow-soft); }
}

.chat-thread {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;                   /* 말풍선 사이 넉넉히 */
  padding: 8px 2px 4px;        /* 문자칸은 z-index 로 이 위를 덮어도 됨 (사용자 확정) */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;       /* 스크롤바 숨김 — 손으로 올리고 내리기만 */
}
.chat-thread::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* 대화가 짧으면 아래에 붙고, 넘치면 위로 스크롤 가능 (flex-end 클리핑 회피) */
.chat-thread::before { content: ''; flex: 1 0 auto; }

.chat-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.chat-row--me { justify-content: flex-end; }   /* 말풍선 → 아바타 순, 오른쪽 정렬 */
/* game.js가 한 줄씩 공개 (카톡처럼 하나하나 도착) */
.chat-row.chat-pending { display: none; }
.chat-row.chat-appear {
  animation: chat-in 0.3s cubic-bezier(.2, .9, .3, 1) both;
}
@keyframes chat-in {
  from { opacity: 0; transform: translateY(10px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}

/* 3D 원형 아바타 */
.chat-avatar {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  background-repeat: no-repeat;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.35), 0 6px 12px rgba(0, 0, 0, 0.45),
    inset 0 2px 3px rgba(255, 255, 255, 0.55), inset 0 -6px 10px rgba(0, 0, 0, 0.25);
}
.chat-avatar--spacer { box-shadow: none; visibility: hidden; }  /* 연속 메시지 정렬용 빈 칸 */
.chat-avatar--mole {
  background-color: #eec69a;
  background-image: url('assets/avatar-mole.png');
  background-size: 120%;
  background-position: 50% 22%;
}
.chat-avatar--hippo {
  background-color: #b9b3cf;
  background-image: url('assets/avatar-hippo.png');
  background-size: 120%;
  background-position: 50% 22%;
}

/* 말풍선 */
.chat-bubble {
  position: relative;
  max-width: 72%;
  padding: 9px 12px;
  border-radius: 16px;
  font-size: 0.86rem;
  line-height: 1.44;
  font-weight: 600;
  word-break: keep-all;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
.chat-bubble b { font-weight: 800; }
/* 꼬리 없음 — 둥근 말풍선만 (사용자 지정: 다크모드에서 계속 깨져서 꼬리 자체를 제거). */
.chat-bubble--them {                /* 두더지 오빠 — 녹색 */
  background: linear-gradient(180deg, #35c866, #23b153);
  color: #fff;
}
.chat-bubble--me {                  /* 나(하마) — 노랑 */
  background: #fee500;
  color: #1c1c14;
}

/* "광고 보고 하트/코인" 버튼 2개 — 시작화면 문자 배너(#start-best) 안에 나란히. */
.chat-ad-btns { display: flex; gap: 7px; flex: 1; min-width: 0; }
.chat-ad-n { white-space: nowrap; }
.chat-ad-cap { margin-left: 2px; font-size: 0.66rem; font-weight: 700; opacity: 0.85; white-space: nowrap; }
.chat-ad-btn {
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 7px 6px;
  border: none;
  border-radius: 11px;
  background: linear-gradient(180deg, #35c866, #23b153);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 900;
  cursor: pointer;
  transition: transform 0.06s, opacity 0.12s;
}
.chat-ad-btn:active { transform: scale(0.95); }
.chat-ad-btn:disabled { opacity: 0.5; cursor: default; }
.chat-ad-play { color: #fff; font-size: 0.6rem; opacity: 0.9; }
.chat-ad-ic { width: 17px; height: 17px; flex: 0 0 auto; }
.chat-ad-ic--heart { color: #ff5a63; }
.chat-ad-ic--coin { color: #f4c430; }

/* 이모티콘만 보낸 메시지 = 말풍선 없이 크게 (카톡) */
.chat-row--emoji { align-items: center; }
.chat-emoji {
  position: relative;
  font-size: 2.7rem;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

/* 폭죽 — 축하 이모티콘 뒤에서 색점이 한 번 터진다 (그 줄이 뜰 때) */
.chat-burst {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
}
.chat-burst i {
  position: absolute;
  left: 0;
  top: 0;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  opacity: 0;
}
.chat-burst i:nth-child(1)  { background: #ff5a5a; --dx: 34px;  --dy: 0; }
.chat-burst i:nth-child(2)  { background: #ffd43b; --dx: 27px;  --dy: 20px; }
.chat-burst i:nth-child(3)  { background: #4dabf7; --dx: 10px;  --dy: 32px; }
.chat-burst i:nth-child(4)  { background: #69db7c; --dx: -14px; --dy: 30px; }
.chat-burst i:nth-child(5)  { background: #da77f2; --dx: -30px; --dy: 16px; }
.chat-burst i:nth-child(6)  { background: #ffa94d; --dx: -34px; --dy: -6px; }
.chat-burst i:nth-child(7)  { background: #ff5a5a; --dx: -24px; --dy: -24px; }
.chat-burst i:nth-child(8)  { background: #ffd43b; --dx: -4px;  --dy: -34px; }
.chat-burst i:nth-child(9)  { background: #4dabf7; --dx: 18px;  --dy: -28px; }
.chat-burst i:nth-child(10) { background: #69db7c; --dx: 32px;  --dy: -12px; }
.chat-row.chat-appear .chat-burst i { animation: chat-burst-pop 0.6s 0.05s ease-out forwards; }
@keyframes chat-burst-pop {
  0%   { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.3); }
}

/* 이모티콘 줄의 시작 버튼 (다시하기) — 하마 아바타 바로 옆, 첫 방문과 같은 크기 */

/* 위에서 툭 내려오는 문자 배너 = 광고 버튼 2개(하트+1 / 코인+50)를 담는다 */
.chat-sms {
  position: absolute;
  top: 10px;
  left: 4px;
  right: 4px;                   /* board-start 좌우 패딩(4px)과 동일 — 대화 폭과 맞춤 —
                                    하트/코인박스는 신경 안 씀(z-index로 이 박스가 위에 오게 처리, background 있어서 겹치면 뒤가 가려짐) */
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;             /* 위아래 20% 축소 (10px → 8px) */
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  color: #22242a;
  font-weight: 800;
  font-size: 0.9rem;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
  transform: translateY(-175%);
  z-index: 10;                 /* 하트/코인박스(board-stats)보다 위 — 겹쳐도 이 박스가 다 보이게 */
  will-change: transform, opacity, filter;
}
/* 배너 자체는 클릭 통과 — 안 그러면 내려와있는 동안 그 아래 챕터 선택(◀▶) 버튼이
   안 눌림(사용자 보고: "챕터3에서 챕터1,2로 못 돌아간다"). 광고 버튼만 예외로 클릭 받음. */
#start-best { pointer-events: none; }
#start-best .chat-ad-btns { pointer-events: none; }
#game-screen:not(.is-start) .chat-sms { display: none; }  /* #board-start 밖으로 옮겨서 이제 직접 게이팅 */
/* .sms-anim = game.js가 시작화면 열 때 붙임.
   툭 내려옴 → 4초 보임 → 그냥 사라짐(페이드) → 15초 안 보임 → 다시 내려옴 → 반복. 20초 주기. */
.chat-sms.sms-anim { animation: sms-loop 20s 0.3s infinite; }
/* 배너가 실제로 보이는 3~23% 구간에만 광고 버튼이 클릭을 받는다 (페이드아웃 후 투명하게
   깔린 채로 챕터◀▶ 를 가로막지 않게). */
.chat-sms.sms-anim .chat-ad-btns { animation: sms-ads-gate 20s 0.3s infinite; }
@keyframes sms-ads-gate {
  0%, 2%    { pointer-events: none; }
  3%, 23%   { pointer-events: auto; }
  26%, 100% { pointer-events: none; }
}
.chat-sms-ic { width: 20px; height: 20px; flex: 0 0 auto; color: #35b35a; }
@keyframes sms-loop {
  0%   { transform: translateY(-175%); opacity: 1; animation-timing-function: cubic-bezier(.2, 1.35, .4, 1); }
  3%   { transform: translateY(0); opacity: 1; }                        /* 내려옴 (~0.6s) */
  23%  { transform: translateY(0); opacity: 1; animation-timing-function: ease-out; }  /* 내려온 뒤 4초 보임 */
  26%  { transform: translateY(0); opacity: 0; }                        /* 그냥 사라짐 (페이드 ~0.6s) */
  100% { transform: translateY(0); opacity: 0; }                        /* ~15초 안 보인 채 대기 → 다시 0% */
}

/* HUD: 시작 상태엔 브라우저 주소창, 플레이 상태엔 티커. #game-screen.is-start 로 스위치. */
#hud-addr {
  display: none;
  flex: 1;
  min-width: 0;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--lm-fill);
  color: var(--lm-muted);
  font-size: 0.82rem;
  font-weight: 600;
}
.hud-addr-url {
  letter-spacing: 0.01em;
  white-space: nowrap;
  animation: addr-hue 4s linear infinite;
}
@keyframes addr-hue {
  0%   { color: #e0559b; }
  25%  { color: #f4a300; }
  50%  { color: #16a34a; }
  75%  { color: #3a7bd5; }
  100% { color: #e0559b; }
}
/* "두더지팡.app" + 채널 힌트가 #hud-ticker 와 같은 방식으로 스크롤(.ticker-viewport/.ticker-track 재사용). */
.hud-addr .ticker-seg { font-size: 0.82rem; font-weight: 600; }
#game-screen.is-start #hud-addr { display: flex; }
#game-screen.is-start #hud-ticker { display: none; }
#game-screen.is-start #hud-score,
#game-screen.is-start #hud-hearts,
#game-screen.is-start #hud-combo,
#game-screen.is-start #fever-badge,
#game-screen.is-start #combo-heart-pop,
#game-screen.is-start .hub-timer { display: none; }
/* 홈(시작) 화면: 게임박스 우측 상단 하트·코인 */
.board-stats { display: none; }
#game-screen.is-start .board-stats {
  display: inline-flex; gap: 12px;
  position: absolute; top: 8px; right: 4px; z-index: 9;    /* 아바타처럼 가장자리 4px — 코인 끝숫자가 여기 맞춰짐 */
  background: transparent; border-radius: 12px; padding: 4px 0;
  color: #fff; font-weight: 800;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65), 0 0 4px rgba(0, 0, 0, 0.5);
}
.board-stats .mm-stat { color: #fff; }
.board-stats .mm-stat svg { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55)); }


/* 게임 화면 = 폴더폰 모양: 컴팩트 HUD + [게임 정사각] + 힌지 + [다이얼러 정사각].
   HUD + 2*정사각 + 힌지 = 100dvh. 정사각 한 변(--sq)은 세로에 맞추되 가로를 넘지 않는다. */
#game-screen {
  position: relative;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  /* 정사각 박스 양옆/위에 남는 여백 = 폴더폰 몸체(베젤). */
  background: var(--lm-bezel);
  --hud-h: 46px;
  --hinge-h: 14px;
  --sq: min(100%, calc((100dvh - var(--hud-h) - var(--hinge-h)) / 2));
}
#game-screen .icon-btn { width: 34px; height: 34px; }
#game-screen .icon-btn img, #game-screen .icon-btn svg { width: 22px; height: 22px; }
/* 홈버튼(⊞) — 노란 원테두리 + PLAY/이어가기와 같은 쉬머 이펙트 (플레이중/홈 화면 공통, 같은 버튼) */
#btn-back-to-hub { position: relative; overflow: hidden; }
/* 인트로/카운트다운/라운드 전환 중 = 잠금(회색 음영). 클릭도 무시(JS navLocked). */
#btn-back-to-hub.nav-locked { opacity: 0.4; filter: grayscale(0.8); pointer-events: none; }
#btn-back-to-hub.nav-locked::before { box-shadow: inset 0 0 0 2px rgba(150, 150, 150, 0.6); }
#btn-back-to-hub.nav-locked::after { display: none; }
#btn-back-to-hub::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px #ffe08a, 0 0 6px 1px rgba(255, 207, 74, 0.7);
  pointer-events: none;
}
#btn-back-to-hub::after {
  content: '';
  position: absolute;
  inset: -60%;
  background: linear-gradient(115deg, transparent 42%, rgba(255, 240, 190, 0.9) 50%, transparent 58%);
  animation: idle-crown-sweep 2.8s ease-in-out infinite;
  pointer-events: none;
}
/* 홈 화면(is-start)에서만 4개 네모가 크기 변화 없이 안으로 모였다 원 끝까지
   다시 벌어지길 천천히 반복(위치만 이동, scale 아님). 플레이 중엔 중앙에
   시간 숫자가 들어가므로 애니메이션 없이 고정. */
#game-screen.is-start #btn-back-to-hub svg rect:nth-child(1) { animation: hub-sq-tl 3.6s ease-in-out infinite; }
#game-screen.is-start #btn-back-to-hub svg rect:nth-child(2) { animation: hub-sq-tr 3.6s ease-in-out infinite; }
#game-screen.is-start #btn-back-to-hub svg rect:nth-child(3) { animation: hub-sq-bl 3.6s ease-in-out infinite; }
#game-screen.is-start #btn-back-to-hub svg rect:nth-child(4) { animation: hub-sq-br 3.6s ease-in-out infinite; }
@keyframes hub-sq-tl { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(3px, 3px); } }
@keyframes hub-sq-tr { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-3px, 3px); } }
@keyframes hub-sq-bl { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(3px, -3px); } }
@keyframes hub-sq-br { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-3px, -3px); } }
/* 시간 = 4개 네모(홈버튼 아이콘) 사이 중앙에 숫자로 표기 ("초" 단위 생략) */
.hub-timer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: 900;
  font-size: 14px;
  line-height: 1;
  pointer-events: none;
}

.game-hud {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 8px;
  height: var(--hud-h);
  flex: 0 0 auto;
  flex-wrap: nowrap;
}

/* 티커 — 다이얼러 검색바처럼 둥근 어두운 바. 안에서 종목/스탯이 왼쪽으로 흐른다. */
#hud-ticker {
  flex: 1;
  min-width: 0;
  height: 30px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--lm-fill);
}
.ticker-viewport {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.ticker-track {
  display: flex;
  width: max-content;
  white-space: nowrap;
  animation: ticker-scroll 20s linear infinite;
  will-change: transform; /* 저사양 폰에서 스크롤 끊기는 것(사용자 보고) 방지 - GPU 합성 유도 */
  backface-visibility: hidden;
}
.ticker-seg {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding-right: 16px;
  font-size: 0.74rem;
  font-weight: 700;
}
.ticker-seg .tk-mode { color: #b26a00; letter-spacing: 0.02em; }
.ticker-seg i { font-style: normal; color: var(--lm-muted); font-weight: 600; }
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(var(--tk-shift, -50%)); } /* --tk-shift = 세그먼트 1개 폭(px), game.js tuneTicker 가 설정 */
}
#hud-ticker.hud-flash { animation: ticker-flash 0.35s ease-out; } /* 폭탄으로 시간 −3 */
@keyframes ticker-flash {
  0%, 100% { background: var(--lm-fill); }
  35% { background: rgba(255, 90, 90, 0.45); }
}

/* 점수 — 밤하늘 중앙에 크게 고정 (달 안 가리게 위쪽). 애니메이션은 나중에. */
#hud-score {
  position: absolute;
  top: 1.5%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  pointer-events: none;
  font-weight: 800;
  font-size: clamp(1.56rem, 8.5vw, 2.7rem);
  color: #fff;
  -webkit-text-stroke: 3px #000;
  paint-order: stroke fill;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.65);
  letter-spacing: 0.01em;
}

/* 하트 — 게임박스 우측 상단(예전 일시정지 버튼 자리, 하늘 영역). */
.board-hearts {
  position: absolute;
  right: 2.5%;
  top: 2.5%;
  z-index: 7;
  pointer-events: none;
  text-align: right;
  font-size: clamp(1.05rem, 4.7vw, 1.5rem);
  letter-spacing: 1px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
}
.board-hearts.life-bonus { animation: life-bonus 0.5s ease-out; }

/* 콤보 — 게임박스 맨 아래 가운데. 잔디 이미지 끝까지 내려도 됨(사용자 요청). 0이면 빈 텍스트라 안 보임. */
.board-combo {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 4;
  pointer-events: none;
  font-weight: 800;
  font-size: clamp(1.5rem, 6.2vw, 2.2rem);
  color: #ffcf4a;
  -webkit-text-stroke: 3px #000;
  paint-order: stroke;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.75);
}

/* 피버타임 배지 — 게임박스 상단 가운데(점수 아래). 콤보 50+ (챕터 3부터). */
.fever-badge {
  position: absolute;
  top: 12%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  pointer-events: none;
  padding: 3px 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ff8a3c, #ff4d4d);
  color: #fff;
  font-weight: 900;
  font-size: clamp(0.8rem, 3.6vw, 1.15rem);
  letter-spacing: 0.03em;
  -webkit-text-stroke: 1px rgba(0, 0, 0, 0.35);
  paint-order: stroke;
  box-shadow: 0 2px 8px rgba(255, 80, 60, 0.55), 0 0 0 2px rgba(255, 255, 255, 0.35) inset;
  animation: fever-pulse 0.7s ease-in-out infinite;
}
@keyframes fever-pulse {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50%      { transform: translateX(-50%) scale(1.08); }
}
/* 콤보 100 → "+❤️" 떠오르며 사라짐 */
.combo-heart-pop {
  position: absolute;
  top: 20%;
  left: 50%;
  z-index: 7;
  pointer-events: none;
  font-size: clamp(1.4rem, 6vw, 2rem);
  font-weight: 900;
  opacity: 0;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.6);
}
.combo-heart-pop.is-pop { animation: combo-heart-rise 1.1s ease-out; }
@keyframes combo-heart-rise {
  0%   { opacity: 0; transform: translate(-50%, 0) scale(0.6); }
  20%  { opacity: 1; transform: translate(-50%, -18px) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -64px) scale(1); }
}
@keyframes life-bonus {
  0%   { transform: scale(1); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55)); }
  40%  { transform: scale(1.35); filter: drop-shadow(0 0 8px #ff6b8a) drop-shadow(0 0 4px #fff); }
  100% { transform: scale(1); }
}

.mole-board {
  position: relative;
  flex: 0 0 auto;
  width: var(--sq);
  aspect-ratio: 1;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 0 0 8px 8px;
  background: #1b2b4a url('assets/board-scene.jpg') center / cover no-repeat;
}
/* 실드(챕터 4~5) 활성 = 보드에 파란 테두리 글로우 (별도 HUD 없이 상태 표시) */
.mole-board--shielded { box-shadow: inset 0 0 0 4px rgba(90, 170, 255, 0.9), inset 0 0 22px rgba(90, 170, 255, 0.55); }

/* 폴더폰 힌지 — 게임 박스와 다이얼러가 접히는 경계 (사용자 요청 ㅎㅎ) */
#fold-hinge {
  position: relative;
  z-index: 5;
  flex: 0 0 auto;
  width: var(--sq);
  height: var(--hinge-h);
  margin: 0 auto;
  background: linear-gradient(180deg, #dcdce0 0%, #f2f2f4 46%, #f2f2f4 54%, #d2d2d7 100%);
  box-shadow: 0 -3px 8px rgba(0, 0, 0, 0.10), 0 3px 8px rgba(0, 0, 0, 0.10);
}
#fold-hinge::before { /* 가운데 접힘선 */
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: rgba(0, 0, 0, 0.14);
}
#fold-hinge::after { /* 힌지 축 (양끝만 살짝 남긴 원통) */
  content: '';
  position: absolute;
  left: 5%;
  right: 5%;
  top: 50%;
  transform: translateY(-50%);
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(180deg, #f4f4f6, #cbcbd1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -1px 0 rgba(0, 0, 0, 0.14);
}
/* 그림 완성 보상(어두운 막 + 우주 이모지) 사용 안 함 — 잔디 배경이 항상 보이게 (사용자 확정 3안).
   JS/HTML 은 그대로 두고 여기서만 숨김 — 되돌리기 쉽게. */
#mole-emoji-img,
#mole-reveal-canvas { display: none; }

/* 밤하늘 레이어 — 반짝이는 별(두 세트가 엇갈려 깜빡) + 왼→오 흐르는 구름. 하늘 영역만, 구멍/두더지 아래. */
#mole-sky {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 27%;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent);
  mask-image: linear-gradient(180deg, #000 62%, transparent);
}
/* 별 두 세트 — 서로 다른 주기/위상으로 opacity 가 오가서 "각자 반짝"이는 느낌 */
#mole-sky::before,
#mole-sky::after {
  content: '';
  position: absolute;
  inset: 0;
}
#mole-sky::before {
  background-image:
    radial-gradient(1.7px 1.7px at 8% 20%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 24% 46%, #fff, transparent),
    radial-gradient(2.1px 2.1px at 40% 15%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 58% 38%, #fff, transparent),
    radial-gradient(1.7px 1.7px at 77% 22%, #dbe8ff, transparent),
    radial-gradient(1.4px 1.4px at 92% 47%, #fff, transparent);
  animation: mole-twinkle-a 2.3s ease-in-out infinite;
}
#mole-sky::after {
  background-image:
    radial-gradient(1.4px 1.4px at 15% 34%, #fff, transparent),
    radial-gradient(2.1px 2.1px at 33% 25%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 50% 49%, #fff, transparent),
    radial-gradient(1.7px 1.7px at 68% 13%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 85% 37%, #cfe0ff, transparent),
    radial-gradient(1.6px 1.6px at 4% 52%, #fff, transparent);
  animation: mole-twinkle-b 3.7s ease-in-out infinite -1.4s;
}
@keyframes mole-twinkle-a { 0%, 100% { opacity: 0.2; } 50% { opacity: 1; } }
@keyframes mole-twinkle-b { 0%, 100% { opacity: 1; } 45% { opacity: 0.25; } }

/* 구름 — 개수·크기·높이·속도·위상은 js/sky.js 가 인라인으로 넣는다. drift 는 left 로 (transform 은
   좌우반전 scaleX 에 양보). left −25%/125% 면 어느 크기든 양끝에서 완전히 화면 밖 → 이음매 없음. */
.mole-cloud {
  position: absolute;
  left: -25%;
  background: no-repeat center / contain;
  will-change: left;
}
@keyframes mole-cloud-drift {
  from { left: -25%; }
  to { left: 125%; }
}
.mole-board-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
#mole-emoji-img { object-fit: contain; }
/* 두더지 직접 터치 없음 (기획서 v1.4) — 조작은 레인 버튼. */
#mole-pop-layer { pointer-events: none; }
#mole-pop-layer .mole-pop { pointer-events: none; }

#mole-hole-layer,
#mole-hole-front-layer { pointer-events: none; }
/* 4x4 격자 구멍 — 게임 끝날 때까지 상시 표시 (사라지지 않음).
   .mole-hole = 뒤(pop 아래), .mole-hole-front = 앞턱(pop 위). 같은 위치·크기라야 겹친다. */
.mole-hole,
.mole-hole-front {
  position: absolute;
  width: 21%;
  transform: translate(-50%, -38%);
  margin-top: 0.7%;
  object-fit: contain;
  /* 구멍을 회색 돌턱 톤으로 — 흙색 두더지와 색이 겹쳐 구분이 안 되던 문제 해결 (사용자 요청).
     PNG 원본은 그대로(재슬라이스해도 유지) 두고 여기서만 탈색. 밝기 값만 조절하면 됨. */
  filter: grayscale(1) brightness(1.4) contrast(0.98);
}

/* .mole-pop = 구멍 위 클립박스. 스프라이트는 "발치가 캔버스 바닥"에 정렬돼 있고,
   이 박스의 아래 끝을 구멍 입구에 놓는다. 그래서 어떤 포즈든 발치가 구멍에 박히고,
   translateY 로 더 내려가면 박스 밖으로 잘려 "구멍 속으로" 사라진다. */
.mole-pop {
  position: absolute;
  left: 0;
  width: 27%;
  aspect-ratio: 6 / 7; /* = slice-mole-sprites.py 의 OUT_W:OUT_H */
  transform: translate(-50%, calc(-100% + 8%));
  /* 아래쪽(구멍 입구)만 자른다. 직선(inset)이면 두더지가 "수평으로 딱 잘린" 느낌 →
     구멍 앞턱 곡선을 따라 아래로 볼록한 타원 호로 자른다 (가운데가 더 보이고 양옆이 먼저 잠김).
     타원 중심을 박스 위로 크게 띄워 머리·옆구리는 안 건드리고 아랫호만 클립에 걸리게 함.
     구멍 스프라이트·클립박스는 16칸 전부 동일하므로 클립도 한 값으로 통일 (예전 data-row 별 튜닝 삭제). */
  clip-path: ellipse(160% 220% at 50% -114%);
}
/* 대포 연사 발동 두더지 — 유저가 바로 인지하게 밝게 맥동하는 오라 (발동 순간부터 침몰까지 잠깐). */
.mole-pop--burst .mole-pop-img {
  animation: mole-burst-aura 0.42s ease-in-out infinite alternate;
}
@keyframes mole-burst-aura {
  from { filter: drop-shadow(1.5px 0 0 #e0a400) drop-shadow(-1.5px 0 0 #e0a400) drop-shadow(0 1.5px 0 #e0a400) drop-shadow(0 -1.5px 0 #e0a400) drop-shadow(0 0 6px #ffd34d) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.4)); }
  to   { filter: drop-shadow(1.5px 0 0 #fff2a8) drop-shadow(-1.5px 0 0 #fff2a8) drop-shadow(0 1.5px 0 #fff2a8) drop-shadow(0 -1.5px 0 #fff2a8) drop-shadow(0 0 16px #ffb300) drop-shadow(0 0 26px rgba(255, 150, 0, 0.6)) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.4)); }
}
.mole-pop-img {
  position: absolute;
  left: 50%;
  bottom: -4%; /* 대기 상태에서도 발치가 살짝 구멍에 잠기게 */
  width: 100%;
  /* transform(translateY sink %) 은 pop-elements.js 가 깊이에 따라 설정 */
  transform: translate(-50%, 0);
  transform-origin: 50% 100%; /* 타격 squash(scale) 가 발치를 축으로 찌부러지게 */
  pointer-events: none;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.4));
}

/* 타겟 식별 글로우 — 굵은 외곽선 + 약한 번짐 (빛 세기는 이후 조정).
   두더지/빠끔/모자 = 진한 황금색(때려라), 동물·폭탄 = 시안(피해라).
   .mole-pop--mole 은 깊이에 따라 전신·빠끔(peek)·모자(helmet) 프레임을 갈아끼우므로
   이 한 규칙이 셋 다 덮는다. 폭탄은 고글 낀 동물 스프라이트라 동물과 같은 시안.
   item(실드)은 대상 아님 — 손대지 않음. */
.mole-pop--mole .mole-pop-img {
  filter:
    drop-shadow(1.5px 0 0 #e0a400) drop-shadow(-1.5px 0 0 #e0a400)
    drop-shadow(0 1.5px 0 #e0a400) drop-shadow(0 -1.5px 0 #e0a400)
    drop-shadow(0 0 5px rgba(224, 164, 0, 0.4))
    drop-shadow(0 2px 3px rgba(0, 0, 0, 0.4));
}
.mole-pop--animal .mole-pop-img,
.mole-pop--bomb .mole-pop-img {
  filter:
    drop-shadow(1.5px 0 0 #15c2d6) drop-shadow(-1.5px 0 0 #15c2d6)
    drop-shadow(0 1.5px 0 #15c2d6) drop-shadow(0 -1.5px 0 #15c2d6)
    drop-shadow(0 0 5px rgba(21, 194, 214, 0.4))
    drop-shadow(0 2px 3px rgba(0, 0, 0, 0.4));
}

/* 기획서 §14: 마지막 영역 완성 시 일반 영역 완성보다 강한 연출 (반짝임 플래시). */
.mole-board.sparkle::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(255, 240, 160, 0.9), rgba(255, 240, 160, 0) 70%);
  animation: mole-board-sparkle 0.6s ease-out;
  pointer-events: none;
}
@keyframes mole-board-sparkle {
  0% { opacity: 0; transform: scale(0.6); }
  40% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.4); }
}

/* 오버레이는 폰 화면(#mole-board) 안에서만 뜬다 — 다이얼러(키패드)는 안 가린다 (사용자 요청). */
.overlay {
  position: absolute;
  inset: 0;
  background: var(--lm-surface);   /* 불투명 — 직전 화면 안 비치게 */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
.gameover-score {
  position: relative; z-index: 2; margin: 0;
  font-size: 2.6rem; font-weight: 800; color: var(--lm-ink);
}
/* 승리 화면 "왼쪽으로 밀어" 힌트 — 축하 5초 뒤. 손 이모지 + 화살표가 왼쪽으로 까딱까딱. */
/* .dialpad(position:relative) 안, 키패드 최상단 = 2·3번 키 위 여백에 얹는다. */
.result-swipe-hint {
  position: absolute;
  left: 50%; top: 5px;
  transform: translateX(-50%);
  z-index: 8;
  display: flex; align-items: center; gap: 6px;
  padding: 8px 15px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
}
.result-swipe-hint[hidden] { display: none !important; }
.result-swipe-hint.is-on { animation: rsh-in 0.35s ease forwards; }
.result-swipe-hint .rsh-hand { font-size: 1.35rem; line-height: 1; }
.result-swipe-hint .rsh-arrows { color: #ffd54a; font-weight: 900; letter-spacing: -2px; }
.result-swipe-hint.is-on .rsh-hand,
.result-swipe-hint.is-on .rsh-arrows { animation: rsh-nudge 1.1s ease-in-out infinite; }
@keyframes rsh-in { to { opacity: 1; } }
@keyframes rsh-nudge { 0%, 100% { transform: translateX(4px); } 50% { transform: translateX(-6px); } }

/* ---- 최종 결과: 박스 없이. 성공(맨위) / 하마(중앙) / 점수(맨아래) ---- */
#gameover-overlay {
  overflow: hidden; flex-direction: column;
  justify-content: space-between; padding: 7% 0 10%;
  transition: transform 0.34s cubic-bezier(.4, 0, .3, 1); touch-action: pan-y;
  /* 노트북에서 하마 이미지를 마우스로 끌면 브라우저 기본 드래그가 발동해 캐릭터만
     따라 움직였음 — 결과화면은 통째로 하나. 자식 드래그·선택 전면 차단. */
  user-select: none; -webkit-user-select: none;
}
#gameover-overlay img, #gameover-overlay .go-hippo-wrap {
  -webkit-user-drag: none; user-drag: none; pointer-events: none;
}
#gameover-overlay.is-sliding { transform: translateX(-100%); }
/* 커튼(라운드 종료 전환)이 끝나는 색(노랑 #ffd166, 단색)과 이어지게 배경을 맞춤 —
   전엔 색이 달라서 커튼->결과화면 전환이 뚝 끊겨 보였음(사용자: "노란색 장면에서
   색종이·비가 와야 하는데"). */
#gameover-overlay.is-win,
#gameover-overlay.is-lose { background: #ffd166; }
/* 성공·실패 둘 다 버튼 없음 — 좌상단 ⊞ 로 홈 */

.go-word { position: relative; z-index: 2; margin: 0; font-size: 4.2rem; font-weight: 900; letter-spacing: 0.06em; }
#gameover-overlay.is-win .go-word { color: #ef8a00; text-shadow: 0 2px 0 #fff, 0 4px 12px rgba(240, 150, 0, 0.35); }
#gameover-overlay.is-lose .go-word { color: #5b6474; }
/* 화면전환(라운드 전환)과 같은 방식 — 글자는 오른쪽에서, 하마는 왼쪽에서 날아와 중앙에서 만남. */
#gameover-overlay:not([hidden]) .go-word { animation: go-word-fly-in 0.4s ease-out both; }
.go-hippo-wrap { position: relative; z-index: 2; transform-origin: center top; } /* 등장 스케일이 위로 안 삐치게 */
#gameover-overlay:not([hidden]) .go-hippo-wrap { animation: go-hippo-fly-in 0.4s ease-out both; }
/* 세로 크기는 game.js 가 보드 높이 기준 px 로 지정 (하마 머리 안 잘리게). 여기선 가로 상한만. */
.go-hippo { display: block; width: auto; height: auto; max-width: min(48vw, 172px); filter: drop-shadow(0 9px 11px rgba(0, 0, 0, 0.13)); }
/* 결과 하마 글로우 — 굵은 외곽선 + 큰 빛 (타겟 글로우보다 강하게).
   성공 = 밝은 은색, 실패 = 빨강. 오버레이 배경이 #ffd166(노랑)이라
   은색 번짐은 안쪽을 near-white 로 올려 노란 배경과 분리한다. */
#gameover-overlay.is-win .go-hippo {
  filter:
    drop-shadow(2.5px 0 0 #eef2f7) drop-shadow(-2.5px 0 0 #eef2f7)
    drop-shadow(0 2.5px 0 #eef2f7) drop-shadow(0 -2.5px 0 #eef2f7)
    drop-shadow(0 0 16px rgba(255, 255, 255, 0.85))
    drop-shadow(0 0 34px rgba(198, 214, 236, 0.55))
    drop-shadow(0 9px 11px rgba(0, 0, 0, 0.13));
}
#gameover-overlay.is-lose .go-hippo {
  filter:
    drop-shadow(2.5px 0 0 #ff3b3b) drop-shadow(-2.5px 0 0 #ff3b3b)
    drop-shadow(0 2.5px 0 #ff3b3b) drop-shadow(0 -2.5px 0 #ff3b3b)
    drop-shadow(0 0 16px rgba(255, 70, 70, 0.75))
    drop-shadow(0 0 34px rgba(255, 70, 70, 0.45))
    drop-shadow(0 9px 11px rgba(0, 0, 0, 0.13));
}
@keyframes go-word-fly-in { from { transform: translateX(70vw); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes go-hippo-fly-in { from { transform: translateX(-70vw); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* 승리: 뒤에서 도는 무지개 방사형 광선 (밝은 배경 위 — 불투명 색으로 직접). */
.go-rays {
  position: absolute; inset: -45%; z-index: 0; opacity: 0; pointer-events: none;
  background:
    repeating-conic-gradient(from 0deg at 50% 50%,
      rgba(255, 255, 255, 0.65) 0deg 4deg, transparent 4deg 13deg),
    conic-gradient(from 0deg at 50% 50%,
      #ff6b6b, #ffb03a, #ffe14d, #63d98a, #4ccfff, #a879ff, #ff6fb0, #ff6b6b);
  animation: go-rays-spin 18s linear infinite;
}
/* 승리 화면은 색종이만(사용자 요청) — 광선 효과는 끔. */
#gameover-overlay.is-win .go-rays { display: none; }
@keyframes go-rays-spin { to { transform: rotate(360deg); } }

/* 축하 색종이 / 실패 빗줄기 — 계속 반복 */
.go-confetti { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.go-confetti i {
  position: absolute; top: -12%;
  width: 9px; height: 14px; border-radius: 2px;
  animation: go-fall linear infinite;
}
#gameover-overlay.is-win .go-confetti i {
  background: hsl(var(--h, 40) 90% 60%);
}
#gameover-overlay.is-lose .go-confetti i {
  width: 2px; height: 18px; border-radius: 0;
  background: linear-gradient(rgba(120, 140, 170, 0), rgba(120, 140, 170, 0.6));
  animation-name: go-rain;
}
@keyframes go-fall {
  0% { transform: translateY(0) rotate(0); }
  100% { transform: translateY(140vh) rotate(540deg); }
}
@keyframes go-rain {
  0% { transform: translateY(-10vh); }
  100% { transform: translateY(150vh); }
}

/* 다음 챕터 placeholder — 오른쪽에서 슬라이드 인 */
#next-chapter-panel {
  background: radial-gradient(circle at 50% 40%, #241a3d 0%, #0d0a24 70%);
  flex-direction: column; gap: 10px;
  transform: translateX(100%);
  transition: transform 0.34s cubic-bezier(.4, 0, .3, 1);
}
#next-chapter-panel.is-in { transform: translateX(0); }

/* 승리 → 왼쪽 스와이프: 성공 카드는 왼쪽으로(#gameover-overlay.is-sliding),
   다음 챕터 홈 화면(#board-start)은 오른쪽에서 슬라이드 인. */
#board-start.nc-enter {
  z-index: 12;
  transform: translateX(100%);
  transition: transform 0.34s cubic-bezier(.4, 0, .3, 1);
}
#board-start.nc-enter.nc-enter--on { transform: translateX(0); }
.nc-big { color: #fff; font-size: 2.4rem; font-weight: 900; letter-spacing: 0.04em; }
.nc-sub { color: #b7b3cf; font-weight: 700; }
.nc-back {
  margin-top: 14px; padding: 10px 20px; border: none; border-radius: 999px;
  background: var(--brand); color: #fff; font-weight: 700; cursor: pointer;
}

/* 라운드 시작 카운트다운 — 매 시작마다(첫 시작·다시하기·자동 다음 라운드) 재생.
   불투명 커튼(좌/우 반쪽)이 보드를 완전히 가리고, 카운트 끝나면 커튼이 양쪽으로 확 열린다. */
.round-intro { background: transparent; flex-direction: column; gap: 6px; overflow: hidden; }
/* 종료 화면 — 커튼이 투명이라 뒤 밤하늘(#mole-sky)이 비쳤음. 불투명 배경으로 덮는다. */
#round-intro-overlay.is-bye { background: #101018; }
.ri-curtain {
  position: absolute;
  top: 0; bottom: 0;
  width: 50%;
  z-index: 0;
  overflow: hidden;
  transition: transform 0.26s cubic-bezier(.5, 0, .75, 0);
}
.ri-curtain--l { left: 0; }
.ri-curtain--r { right: 0; }
/* 참고 영상(화면전환.mp4) — 원 자체는 자리 이동 없음(고정 tile). 원 하나하나가
   노랑(바깥)+분홍(안쪽) 동심원 — 노랑이 제자리에서 천천히 커지고, 그 중심에서 분홍이
   더 빠르게 커져 노랑을 뒤덮으며 결국 화면 전체가 분홍이 된다. CSS @property 로
   그라디언트 stop 을 애니메이션했더니 브라우저에서 깨진 도형이 렌더링되는 버그가 있어
   JS(restartCurtainPattern, game.js)가 requestAnimationFrame 으로 매 프레임 직접
   background-image 문자열을 새로 그려 넣는다 — 정적 그라디언트라 렌더링이 안전하다. */
.ri-curtain::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--curtain-grad, none);
  background-size: 70px 70px; /* 고정 — 원 위치 불변 */
  background-position: var(--curtain-pos, 0 0); /* 우측 패널만 JS 가 보정 — 아래 참고 */
}
/* 라운드1 3·2·1 카운트다운만 배경 없이 — 보드가 그대로 비쳐 보이게. (라운드2+ 두더지 전환,
   시작 인트로 타이핑 화면은 커튼 패턴 유지.) */
#round-intro-overlay:not(.has-mole) .ri-curtain { background: none; }
#round-intro-overlay:not(.has-mole) .ri-curtain::before { display: none; }
.round-intro.is-opening .ri-curtain--l { transform: translateX(-101%); }
.round-intro.is-opening .ri-curtain--r { transform: translateX(101%); }
.round-intro.is-opening .round-intro-title,
.round-intro.is-opening .round-intro-count,
.round-intro.is-opening .round-intro-mole,
.round-intro.is-opening .si-line1,
.round-intro.is-opening .si-line2,
.round-intro.is-opening .si-line3 { opacity: 0; transition: opacity 0.12s; }
/* 라운드1 GO!: "라운드 1" 은 왼쪽(위 .mole-in.is-opening .round-intro-title 규칙), "GO!" 는 오른쪽으로 빛처럼. */
.round-intro.mole-in.is-opening .round-intro-count.cgo {
  opacity: 1;
  transform: translateX(90vw);
  transition: transform 0.26s cubic-bezier(.5, 0, .75, 0);
  animation: none;
}
.round-intro-title {
  position: relative; z-index: 1;
  margin-top: 14px; /* 구멍 그리드 상단과 살짝 간섭되던 것 완화(사용자 보고) */
  color: #fff;
  -webkit-text-stroke: 3px #000;
  paint-order: stroke fill; /* 검정 테두리 두껍게, 안쪽 흰색(사용자 요청) */
  font-size: 2.3rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.85), 0 0 18px rgba(255, 210, 100, 0.7);
}
/* 종료 안내 (exitApp) — 커튼 닫힌 위에 표시, 탭하면 다시 열림 */
.bye-msg {
  position: relative; z-index: 2;
  margin: 0 auto;
  max-width: 78%;
  padding: 0;
  border: none;
  background: none;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  white-space: pre-line;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
  cursor: pointer;
}
.bye-msg[hidden] { display: none !important; }

.round-intro-count {
  position: relative; z-index: 1;
  color: #e08a1e;
  font-size: 6.8rem;
  font-weight: 900;
  line-height: 1;
  /* 외곽 글로우 강조(사용자 요청) — 흰 글로우 + 주황 글로우 겹겹이 + 기존 그림자 */
  text-shadow:
    0 0 6px rgba(255, 255, 255, 0.95),
    0 0 16px rgba(255, 200, 90, 0.9),
    0 0 30px rgba(224, 138, 30, 0.6),
    0 3px 10px rgba(224, 138, 30, 0.35);
}
/* 카운트 숫자 = 멀리서 확 줌인 (사용자: 진짜 카운트다운 느낌) */
.round-intro-count.pop { animation: round-intro-pop 0.5s cubic-bezier(.16, 1, .3, 1); }
@keyframes round-intro-pop {
  0%   { transform: scale(3.2); opacity: 0; }
  35%  { opacity: 1; }
  62%  { transform: scale(0.9); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
/* 3·2·1 = 전부 같은 빨강 (사용자 지정) */
.round-intro-count.c3,
.round-intro-count.c2,
.round-intro-count.c1 {
  color: #ff4444;
  text-shadow: 0 0 6px rgba(255,255,255,.95), 0 0 18px rgba(255,70,70,.95), 0 0 38px rgba(255,70,70,.55);
}
/* GO! = 연두 배경에 안 묻히게 검은 외곽선 + 강한 글로우 (사용자 지정) */
.round-intro-count.cgo {
  color: #fff;
  -webkit-text-stroke: 4px #000;
  paint-order: stroke fill;
  text-shadow: 0 0 8px rgba(255,255,255,.98), 0 0 24px rgba(255,255,255,.9), 0 0 50px rgba(255,255,255,.6);
}
/* 2라운드부터 카운트다운 대신 — 두더지 이미지(8종 순환, 배경 제거된 PNG) 잠깐 보여주고 바로 커튼 오픈. */
.round-intro-mole {
  position: relative; z-index: 1;
  width: 62%;
  max-width: 240px;
}
/* 입장: 타이틀은 오른쪽에서, 이미지는 왼쪽에서 날아와 중앙에서 만남. */
@keyframes ri-title-fly-in { from { transform: translateX(70vw); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes ri-mole-fly-in { from { transform: translateX(-70vw); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
/* mole-in = has-mole(커튼 패턴 표시 여부)와 분리된, "패턴 다 끝난 뒤 캐릭터 등장" 트리거.
   has-mole 로 같이 걸면 커튼 패턴과 동시에(패턴이 채 안 끝났는데) 날아와버림. */
.round-intro.mole-in .round-intro-title { animation: ri-title-fly-in 0.4s ease-out forwards; }
.round-intro.mole-in .round-intro-mole { animation: ri-mole-fly-in 0.4s ease-out forwards; }
/* 퇴장: 커튼 열릴 때 타이틀은 왼쪽 커튼과, 이미지는 오른쪽 커튼과 같은 시간/이징으로 같이 사라짐
   (.ri-curtain 의 transition: 0.26s cubic-bezier(.5,0,.75,0) 과 동일하게 맞춤 — 타이밍 동기화). */
.round-intro.mole-in.is-opening .round-intro-title {
  animation: none;
  transform: translateX(-90vw);
  opacity: 1;
  transition: transform 0.26s cubic-bezier(.5, 0, .75, 0);
}
.round-intro.mole-in.is-opening .round-intro-mole {
  animation: none;
  transform: translateX(90vw);
  opacity: 1;
  transition: transform 0.26s cubic-bezier(.5, 0, .75, 0);
}

/* 시작 버튼 → 라운드1 진입 전 타이핑 인트로. 커튼(.ri-curtain)은 .round-intro 클래스 공유. */
.si-line1 {
  position: relative; z-index: 1;
  align-self: flex-start;
  padding-left: 10%;
  color: #000;
  font-size: 2.4rem;
  font-weight: 900;
  letter-spacing: 0.02em;
}
.si-line2 {
  position: relative; z-index: 1;
  align-self: flex-start;
  padding-left: 10%;
  color: #000;
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.si-line3 {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 2px;
  color: #000;
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  padding: 0 10%;
}
.si-caret { display: inline-block; width: 2px; height: 1em; background: currentColor; animation: si-blink 0.8s step-end infinite; }
.si-caret[hidden] { display: none; }
@keyframes si-blink { 50% { opacity: 0; } }

/* ---- 버튼 패드 = 전화 다이얼러로 위장 (사용자 요청) ----
   4x4 격자 = 16 구멍과 1:1 그대로. 왼쪽 3열 = 숫자패드, 오른쪽 열 = 연락처/키패드/최근기록/통화.
   동작(누르면 그 구멍 타격, 키보드, 두더지 있으면 --hot)은 변함 없음. */
#lane-button-bar {
  width: var(--sq);
  aspect-ratio: 1;
  flex: 0 0 auto;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 2px;
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
  border-radius: 8px 8px 0 0;
  background: var(--lm-pad);
}
/* 다이얼패드 래퍼 — 안내문구/첫방문 말풍선을 절대배치로 얹기 위함. */
.dialpad { position: relative; flex: 0 0 auto; }

/* 채널 버튼 길게 누르면 뜨는 말풍선 메뉴 [🕶 시크릿] [🗑 삭제] */
.lane-ch-menu {
  position: fixed;
  left: 50%; top: 0;
  transform: translate(-50%, -100%);
  z-index: 60;
  display: flex;
  gap: 6px;
  padding: 7px;
  white-space: nowrap;
  border-radius: 15px;
  background: linear-gradient(180deg, #35c866, #23b153); /* 대화 녹색 말풍선과 동일 */
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.38);
  animation: lch-pop 0.14s ease-out;
}
.lane-ch-menu::after {
  content: '';
  position: absolute;
  left: var(--tail-x, 50%); bottom: -8px;
  transform: translateX(-50%);
  border: 9px solid transparent;
  border-top-color: #23b153; /* 그라데이션 아래쪽 색 */
  border-bottom: 0;
}
.lane-ch-menu button {
  display: flex; align-items: center; gap: 5px;
  flex: 0 0 auto;
  padding: 11px 16px;
  border: none;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.lane-ch-menu button:active { background: rgba(255, 255, 255, 0.32); }
.lane-ch-menu [data-a="delete"] { color: #ffe0dd; }
.lane-ch-menu .lch-ic { font-size: 1.2rem; }
@keyframes lch-pop { from { opacity: 0; transform: translate(-50%, -92%); } }

/* 아이콘 로드 실패 시 대체 유튜브 로고 */
.lane-yt-glyph { width: 70%; height: 70%; }

/* 유튜브 채널 등록 창 (빈 버튼 더블탭) — ad-overlay 스크림 재사용 */
.ch-reg-card { display: flex; flex-direction: column; align-items: stretch; gap: 10px; max-width: 300px; }
.ch-reg-title { font-weight: 800; font-size: 1rem; }
.ch-reg-desc { font-size: 0.8rem; color: var(--lm-muted); line-height: 1.4; }
.ch-reg-input {
  width: 100%; box-sizing: border-box;
  padding: 9px 11px;
  border: 1.5px solid var(--lm-line, #d8d8dc);
  border-radius: 9px;
  font-size: 0.86rem;
  background: #fff; color: #1c1c1c;
}
.ch-reg-input--bad { border-color: #e53935; background: #fff2f1; }
.ch-reg-btns { display: flex; gap: 8px; width: 100%; }
.ch-reg-btns button {
  flex: 1; padding: 9px 0; border: none; border-radius: 9px;
  font-size: 0.86rem; font-weight: 800; cursor: pointer;
}
.ch-reg-btns [data-r="ok"] { background: #ff0000; color: #fff; }
.ch-reg-btns [data-r="cancel"] { background: rgba(0, 0, 0, 0.08); color: #333; }

/* 종료 제스처 안내 — 박스 없이 글자만. 다이얼패드 상단 가운데는 시작버튼과 겹쳐 보여
   우측 버튼박스와 폰 사이 여백으로 이동, 세로쓰기. 그 여백이 실측 ~8px로 매우 좁아서
   (.dialpad 는 화면 꽉 채운 폭, #lane-button-bar 만 --sq 로 가운데 정렬된 정사각형이라
   생기는 틈) 글자 크기를 그에 맞게 작게(사용자 확인: "작게 나와도 되니 세로로"). */
.start-coach {
  display: none;
  position: absolute;
  right: 8px;
  bottom: 27%;                 /* 초록 "시작" 버튼(맨 아래 행) 바로 위 */
  z-index: 6;
  max-width: 60vw;
  padding: 8px 12px;
  border-radius: 12px;
  background: #ffd54a;
  color: #3a2c00;
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.3;
  white-space: pre-line;
  text-align: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}
.start-coach.is-on { display: block; animation: coach-in 0.3s ease both; }
.start-coach::after {
  content: '';
  position: absolute;
  right: 26px;
  top: 100%;
  border: 7px solid transparent;
  border-top-color: #ffd54a;
}
@keyframes coach-in { from { opacity: 0; transform: translateY(6px); } }
.lane-button {
  position: relative;
  border: none;
  background: transparent;
  color: var(--lm-ink);
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  transition: transform 0.06s, background 0.12s, box-shadow 0.15s;
  --flash-ring: #12d16a;                       /* 흰 배경에서도 또렷하게 — 앱 초록(통화버튼 #2ecc57)과 같은 계열, 더 진하게 */
  --flash-fill: rgba(18, 209, 106, 0.5);       /* 클릭 순간 배경에 도는 초록 글로우 */
}
.lane-button--miss { --flash-ring: #ff5344; --flash-fill: rgba(255, 90, 70, 0.5); }  /* 헛방/폭탄 = 빨강 */
.lane-button--burst { --flash-ring: #ffce33; --flash-fill: rgba(255, 206, 51, 0.5); }  /* 대포 연사 = 골드 (실패 빨강과 구분) */
/* 누를 때 굵은 네온 링이 확 밝아졌다 사그라드는 이펙트 (아웃라인 셰이더 느낌, 참고 영상 그대로).
   버튼 원 밖으로 삐져나가 옆 버튼을 침범하면 안 됨 — inset:0 으로 버튼 원 안에서만. */
.lane-button::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid var(--flash-ring);
  opacity: 0;
  pointer-events: none;
}
.lane-button.lane-button--flash::after { animation: lane-btn-ring 0.8s ease-out; }
/* + 물결처럼 안에서 번지는 링 (쉬머 셰이더 느낌) — 버튼 원 경계(1.0)를 절대 안 넘게, 작게 시작해 원 끝까지만 커짐. */
.lane-button::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 5px solid var(--flash-ring);
  opacity: 0;
  pointer-events: none;
}
.lane-button.lane-button--flash::before { animation: lane-btn-ripple 0.8s ease-out; }
@keyframes lane-btn-ripple {
  0%   { opacity: 0.85; transform: scale(0.5); }
  100% { opacity: 0; transform: scale(1); }
}
@keyframes lane-btn-ring {
  0%   { opacity: 1; box-shadow: inset 0 0 22px 8px var(--flash-fill), 0 0 14px 4px var(--flash-ring); }
  55%  { opacity: 0.55; box-shadow: inset 0 0 10px 4px var(--flash-fill), 0 0 6px 2px var(--flash-ring); }
  100% { opacity: 0; box-shadow: inset 0 0 0 0 transparent, 0 0 0 0 transparent; }
}
.lane-button:active { transform: scale(0.9); background: rgba(0, 0, 0, 0.07); }

/* 골드해머 지진: 발동칸+주변 8칸에 갈색빛 회색 사각 음영(원형 X — 셀 전체). 두더지 처치된 칸은 흰색. */
.lane-quake-shade {
  position: absolute;
  inset: -1px;
  border-radius: 6px;
  background: rgba(168, 142, 112, 0.45);   /* 연한 갈색빛 회색 = 지진 (버튼 인지력 위해 톤다운) */
  opacity: 0;
  pointer-events: none;
  z-index: 4;
}
.lane-quake-shade.is-kill { background: rgba(255, 255, 255, 0.92); }
.lane-quake-shade.is-on { animation: lane-quake-shade 0.6s ease-out forwards; }
@keyframes lane-quake-shade {
  0%   { opacity: 0; }
  16%  { opacity: 1; }
  72%  { opacity: 1; }
  100% { opacity: 0; }
}
/* 지진 발동 = 다이얼패드 전체가 잠깐 흔들림 (보드 흔들림과 동시). */
.lane-bar--quake-shake { animation: lane-bar-quake 0.32s ease-out; }
@keyframes lane-bar-quake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-2px, 1px); }
  45% { transform: translate(2px, -1px); }
  70% { transform: translate(-1px, -1px); }
}

.lane-num { font-size: clamp(1rem, 6vw, 1.9rem); font-weight: 400; line-height: 1; }
.lane-sub {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  color: var(--lm-muted);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.lane-kr { font-size: clamp(0.42rem, 2vw, 0.62rem); }
.lane-en { font-size: clamp(0.36rem, 1.7vw, 0.52rem); letter-spacing: 0.08em; }

/* 채널 링크 등록된 버튼 — 평소 얼굴(숫자/내비)과 채널 아이콘을 동전 뒤집기(3D flip) 카드로
   포갠다. 짧게 누르면 lane-controls.js 의 flipChannelCard() 가 몇 바퀴 휙 돌려 반대 면에
   착지시킨다. 플레이 중엔(다이얼패드 아님) 이 버튼이 실제 구멍 타격 버튼이라 채널 로고가
   떠 있으면 헷갈리므로 항상 평소 얼굴 쪽으로 고정. */
.lane-button--flippable { perspective: 600px; }
.lane-flip {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.9s cubic-bezier(.2, .7, .3, 1);
}
.lane-face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  backface-visibility: hidden;
  border-radius: 50%;
}
.lane-face--front { transform: rotateY(0deg); }
.lane-face--back { transform: rotateY(180deg); }
.lane-channel-icon {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  pointer-events: none;
}
/* 게임 화면에선 채널 얼굴 대신 숫자 얼굴로 고정 — 단 진입 회전 연출(.lane-flip--spinning) 중엔 비켜준다. */
#game-screen:not(.is-start) .lane-button--flippable .lane-flip:not(.lane-flip--spinning) { transform: rotateY(180deg) !important; transition: none; }

/* 오른쪽 열 — 내비 4칸 */
.lane-button--nav { flex-direction: column; gap: 3px; color: #4b4b52; }
.lane-button--nav .lane-face { flex-direction: column; gap: 3px; }
.lane-ico { width: clamp(16px, 6vw, 24px); height: clamp(16px, 6vw, 24px); display: block; }
.lane-ico svg { width: 100%; height: 100%; display: block; }
.lane-lbl { font-size: clamp(0.4rem, 1.9vw, 0.56rem); font-weight: 600; color: var(--lm-muted); }
.lane-button--call { background: #2ecc57; color: #fff; }
.lane-button--call .lane-lbl {
  color: #fff;
  font-size: clamp(0.62rem, 2.7vw, 0.82rem);
  font-weight: 800;
  letter-spacing: 0.04em;
}
.lane-button--call:active { background: #29b84e; }

/* 게임 중: 우하단 통화 버튼(원형 유지) = 스킬 슬롯 2개 (캐논·특수망치, #game-screen.gs-laneskill).
   원을 수평으로 잘라 위/아래 반원 — 옆 숫자키와 같은 흰색 계열, 상하 대칭 3D 돔.
   뿅망치(gs-laneskill 없음)면 그냥 구멍. 홈에선 "시작" 버튼 그대로. */
.lane-items { display: none; }
#game-screen.gs-laneskill:not(.is-start) .lane-button--call {
  background: transparent;
  border-radius: 10%;
  box-shadow: none;
  overflow: visible;
}
#game-screen.gs-laneskill:not(.is-start) .lane-button--call:active { transform: none; background: transparent; }
#game-screen.gs-laneskill:not(.is-start) .lane-button--call > .lane-ico,
#game-screen.gs-laneskill:not(.is-start) .lane-button--call > .lane-lbl,
#game-screen.gs-laneskill:not(.is-start) .lane-button--call .lane-call-idle { display: none; }
/* 예전 원형 버튼 물결/링 이펙트(.lane-button::before/::after, 부모에 붙어있음) — 카드 2장 사이 틈을
   눌렀을 때 그 원형 흔적이 그대로 남아있던 것. 이 상태에서는 완전히 꺼서 카드 자체 물결만 남긴다. */
#game-screen.gs-laneskill:not(.is-start) .lane-button--call::before,
#game-screen.gs-laneskill:not(.is-start) .lane-button--call::after { display: none; }
/* 위/아래 각각 독립된 흰색 키캡 카드 2장 (바탕화면 버튼 참고: 둥근 사각, 흰색, 얇은 하이라이트 줄 + 바닥 회색 그림자) */
#game-screen.gs-laneskill:not(.is-start) .lane-button--call .lane-items {
  display: flex; flex-direction: column; gap: 8%; position: absolute; inset: 3%;
  border-radius: 0; overflow: visible;
}
.lane-item {
  position: relative; flex: 1 1 0; width: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(11px, 4.4vw, 18px); line-height: 1; color: #3a3d44;
  border-radius: 22%;
  background: linear-gradient(180deg, #ffffff 0%, #f2f3f5 78%, #e3e5e9 100%);
  box-shadow: 0 3px 0 #c9cace, 0 5px 6px rgba(0, 0, 0, 0.28), inset 0 1px 0 #fff;
  transition: transform 0.09s ease, box-shadow 0.09s ease;
  -webkit-tap-highlight-color: transparent; cursor: pointer; user-select: none;
  overflow: hidden;
}
/* 상단 얇은 하이라이트 줄 (참고 이미지) */
.lane-item::after {
  content: ''; position: absolute; left: 10%; right: 10%; top: 10%; height: 6%;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.95);
  pointer-events: none;
}
/* 홈 화면 "시작" 버튼과 같은 대각선 빛 스윕 — 실제 자식 엘리먼트라 각 사각형(overflow:hidden)에 각자 갇혀서 돈다. */
.lane-item-sweep {
  position: absolute; inset: -60%;
  background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.85) 50%, transparent 58%);
  animation: idle-crown-sweep 2.8s ease-in-out infinite;
  pointer-events: none;
}
/* 눌림 — 아주 깊게 눌리는 느낌 */
.lane-item.is-press {
  z-index: 3;
  transform: translateY(5px) scale(0.97);
  background: linear-gradient(180deg, #e9eaed 0%, #d9dade 100%);
  box-shadow: 0 0 0 #c9cace, inset 0 3px 6px rgba(0, 0, 0, 0.25);
}
/* 물결(ripple) — 사각형 중심에서 얇은 초록 테두리 선이 점점 커지고 굵어지며 바깥 테두리까지
   퍼진 뒤 사라짐 (채워진 원 X, 링 O — scale 이 커질수록 border 도 같이 굵어 보인다). */
.lane-item::before {
  content: ''; position: absolute; inset: 0; border-radius: 22%;
  border: 6px solid rgba(46, 204, 87, 0.95);
  opacity: 0; transform: scale(0.12); pointer-events: none;
}
.lane-item.is-rip::before { animation: lane-item-ripple 0.5s ease-out; }
@keyframes lane-item-ripple {
  0%   { opacity: 0.95; transform: scale(0.12); }
  100% { opacity: 0;    transform: scale(1); }
}
/* 빈 슬롯 — 게임 중엔 마크 없음(오조작 방지). ＋(장착)는 보관창에서만.
   스킬 아이콘/개수 배지/소진(회색)은 첫 스킬 확정 시 renderLaneItems 와 함께 추가. */
/* 대기 중(홈화면에서만, 종료대기 아닐 때) 왕관 이펙트 — 색 아웃라인 + 안에서 대각선으로
   움직이는 빛(쉬머). 게임 플레이 중(is-start 아님)엔 적용 안 됨. */
.lane-button--call { overflow: hidden; }
.lane-call-idle {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  box-shadow: inset 0 0 0 2px #6dffa0, 0 0 6px 1px rgba(46, 204, 87, 0.7);
}
#game-screen.is-start .lane-button--call:not(.lane-button--armed) .lane-call-idle { opacity: 1; }
.lane-call-idle::before {
  content: '';
  position: absolute;
  inset: -60%;
  background: linear-gradient(115deg, transparent 42%, rgba(200, 255, 220, 0.85) 50%, transparent 58%);
  animation: idle-crown-sweep 2.8s ease-in-out infinite;
}
@keyframes idle-crown-sweep {
  0%      { transform: translate(-25%, -25%); opacity: 1; }
  22%     { transform: translate(25%, 25%); opacity: 1; }
  23%     { opacity: 0; }
  100%    { transform: translate(25%, 25%); opacity: 0; }
}
/* 꾹 눌러 "종료 대기" — 빨강 + 라벨 교체(한 번 더 누르면 종료). */
.lane-button--call.lane-button--armed { background: #e53935; animation: call-arm-pulse 1s ease-in-out infinite; }
.lane-button--call.lane-button--armed:active { background: #c62828; }
.lane-button--call.lane-button--armed .lane-ico { display: none; }
.lane-button--call.lane-button--armed .lane-lbl {
  font-size: clamp(0.52rem, 2.5vw, 0.7rem);
  font-weight: 800;
  line-height: 1.2;
  white-space: pre-line;
  text-align: center;
}
@keyframes call-arm-pulse { 50% { background: #ff5a52; } }

/* 두더지가 그 구멍에 있음 — 눌러야 할 키. 다이얼러처럼 보이게 은은한 하이라이트. */
.lane-button--hot { background: rgba(120, 170, 255, 0.28); box-shadow: 0 0 10px 1px rgba(120, 170, 255, 0.4); }
/* 통화 버튼도 두더지 있으면 다른 버튼과 똑같은 파란 하이라이트 (라이트 ON 에서만).
   DIM/OFF 는 아래 diff-mid/legend 규칙이 다시 초록으로. */
#game-screen:not(.diff-mid):not(.diff-legend) .lane-button--call.lane-button--hot {
  background: rgba(120, 170, 255, 0.28);
  box-shadow: 0 0 10px 1px rgba(120, 170, 255, 0.4);
}
#game-screen:not(.diff-mid):not(.diff-legend) .lane-button--call.lane-button--hot .lane-lbl,
#game-screen:not(.diff-mid):not(.diff-legend) .lane-button--call.lane-button--hot .lane-ico {
  color: var(--lm-ink);
}

/* 화면 전환 플래시 — 더보기↔홈, 게임종료→홈 전환마다 잠깐 번쩍(대각선 광선 스윕).
   참고 영상은 순백색 플래시인데, 매번(일상적 메뉴 이동마다) 나오면 눈 피로가 커서
   흰색 대신 색(보라/진한 노랑) 플래시로 톤다운 — 사용자 확정. 두 색 중 랜덤. */
#screen-flash-fx {
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: 0;
}
#screen-flash-fx.is-on { animation: screen-flash-anim 0.45s ease-out; }
#screen-flash-fx::before {
  content: '';
  position: absolute;
  inset: -60%;
  background: repeating-linear-gradient(115deg,
    transparent 0 7%, rgba(255, 255, 255, 0.22) 8% 9%, transparent 10% 18%);
}
#screen-flash-fx.fx-violet { background: radial-gradient(circle at var(--fx-x, 50%) var(--fx-y, 50%), rgba(130, 70, 230, 0.6), rgba(90, 40, 170, 0.35) 60%, transparent 100%); }
#screen-flash-fx.fx-gold   { background: radial-gradient(circle at var(--fx-x, 50%) var(--fx-y, 50%), rgba(153, 106, 4, 0.6), rgba(110, 74, 3, 0.35) 60%, transparent 100%); }
@keyframes screen-flash-anim {
  0%   { opacity: 0; }
  22%  { opacity: 1; }
  100% { opacity: 0; }
}

/* 책장 넘기듯 화면전환 (처음 3D 적용했던 버전으로 확정 — 더 이상 변경하지 않음).
   more-menu 가 position:fixed 라 조상의 perspective 가 안 먹어서, transform 자체에
   perspective() 를 넣어 위치 무관하게 동작시킴. */
/* ease-in/out + 100도 회전이면 회전이 눈에 보이기도 전에 훅 사라져 버그처럼 보였음
   (사용자 확인) — linear로 일정 속도 유지하고, 회전의 80%까지는 안 사라지게 해서
   실제로 페이지가 좁아지며 넘어가는 게 보이게 함(마지막 20%만 edge-on 으로 사라짐). */
.flip-out, .flip-in { backface-visibility: hidden; }
.flip-out { animation: flip-out-anim 0.7s linear forwards; transform-origin: 100% 50%; }
.flip-in  { animation: flip-in-anim 0.7s linear forwards; transform-origin: 0% 50%; }
@keyframes flip-out-anim {
  0%   { transform: perspective(1400px) rotateY(0deg); opacity: 1; }
  80%  { transform: perspective(1400px) rotateY(-80deg); opacity: 1; }
  100% { transform: perspective(1400px) rotateY(-100deg); opacity: 0; }
}
@keyframes flip-in-anim {
  0%   { transform: perspective(1400px) rotateY(100deg); opacity: 0; }
  20%  { transform: perspective(1400px) rotateY(80deg); opacity: 1; }
  100% { transform: perspective(1400px) rotateY(0deg); opacity: 1; }
}

/* ---- 망치 ---- transform-origin 과 translate/rotate 는 lane-hammer.js 가 넣는다 ---- */
/* 뽕망치 레이어 = 보드 밖(#game-screen 직속). 보드 박스와 똑같은 위치·크기로 얹되
   .mole-board 의 overflow:hidden 에 안 잘려서 우측 끝 스윙이 베젤까지 다 보인다. */
#mole-hammer-layer {
  position: absolute;
  top: var(--hud-h);
  left: 50%;
  transform: translateX(-50%);
  width: var(--sq);
  height: var(--sq);
  pointer-events: none;
  overflow: visible;
  z-index: 20;
}
.lane-hammer {
  position: absolute;
  width: 14.04%;   /* 검은 외곽선(약 9px) 추가로 스프라이트가 커진 만큼(301→325px) 보정해 망치 아트 자체 크기 유지 */
  will-change: transform;
}
.lane-hammer img { display: block; width: 100%; filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.5)); }
/* 골드해머(지진 무기) = 뿅망치보다 ~1.2배 크게. 스프라이트 비율이 달라 폭으로 맞춘다. */
.lane-hammer--gold { width: 17.5%; }
/* 보석(파란빛) 맥동 글로우 — 아이템보관창(.inv-gem-glow)엔 있었는데 게임화면엔 빠져있던 것 추가.
   같은 원본(goldhammer.png) contain 배치라 좌표(%)는 .inv-gem-glow 와 동일. */
.lane-hammer-gem-glow { display: none; }
.lane-hammer--gold .lane-hammer-gem-glow {
  display: block;
  position: absolute;
  /* 사용자 오더 누적(위 0.1cm+0.2cm-아래0.1cm / 왼쪽 0.05cm+0.2cm+0.2cm)을 %로 환산 — 이 망치는
     보드 크기에 맞춰 커지고 작아지므로 cm를 그대로 섞으면 기기 화면 크기마다 어긋남.
     기준 105×109px(390 뷰포트 실측). */
  left: 24.8%; top: 23.1%;
  width: 30%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(120, 220, 255, 0.95) 0%, rgba(70, 170, 255, 0.55) 35%, rgba(70, 170, 255, 0) 70%);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: inv-gem-pulse 1.6s ease-in-out infinite;
}
/* 지진 분신 골드해머 — 가장자리에서 날아와 내리치고 골드로 소멸 (hit-fx.js quakeClone). */
.quake-clone {
  position: absolute;
  /* 메인 골드해머(.lane-hammer--gold width 17.5%, 스프라이트 217x307 → 렌더 높이 ≈ 24.8%)와
     같은 "높이"로 맞춘다. 폭으로 맞추면 90° 포즈(159x313 세로긴)가 엄청 커졌음. */
  height: 24.8%;
  width: auto;
  transform-origin: 50% 64%;
  pointer-events: none;
  z-index: 25;
  filter: drop-shadow(0 0 6px rgba(120, 200, 255, 0.95)) drop-shadow(0 0 14px rgba(120, 200, 255, 0.55)) drop-shadow(0 3px 4px rgba(0, 0, 0, 0.45));
}
/* 지진 먼지 파동 — 기존 링/흙먼지 재사용, 갈색·조금 크게. */
.hit-fx-ring--quake { width: 30%; border-width: 4px; animation-duration: 0.5s; }
.hit-fx-dust--quake { width: 10px; height: 10px; }
.lane-hammer-img--hit { animation: lane-hammer-squash 0.16s ease-out; }
@keyframes lane-hammer-squash {
  0% { transform: scale(1, 1); }
  35% { transform: scale(1.12, 0.9); }
  100% { transform: scale(1, 1); }
}

/* ---- 무기 스킨: 알리 펀치 ---- 위치·transform 은 lane-boxing.js 가 넣는다. 좌/우 글러브가
   삭제된 구멍(12·15) 자리에 고정, 담당 구역만 손을 뻗어 때린다(기획서 §1·§2). ---- */
.lane-boxing-glove {
  position: absolute;
  width: 14.63%; /* 19%→30%축소(13.3%)→10%확대(사용자 지시) */
  pointer-events: none;
  will-change: transform;
}
.lane-boxing-glove img { display: block; width: 100%; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.4)); }
/* 회전(대기 각도·펀치별 각도)은 lane-boxing.js 가 펀치 스타일에 따라 img.style.transform 으로
   직접 넣는다(ROT_BY_SIDE) — 오른쪽은 항상 scaleX(-1) 거울상 포함. */

/* 알리 펀치 전용 "별표" — 실제 다이얼패드 '✱' 키(구멍12, 알리펀치가 삭제하는 좌하단 자리)를
   재사용해 통화버튼과 똑같이 스킬 슬롯 2개로 바꾼다(기획서 §8). 다른 무기·홈 화면에선 원래 숫자키.
   .lane-items/.lane-item 스타일은 통화버튼과 완전히 공유(style.css 위쪽 참고). */
#game-screen.gs-alipunch:not(.is-start) [data-region="12"] {
  background: transparent;
  border-radius: 10%;
  box-shadow: none;
  overflow: visible;
}
#game-screen.gs-alipunch:not(.is-start) [data-region="12"]:active { transform: none; background: transparent; }
#game-screen.gs-alipunch:not(.is-start) [data-region="12"] > .lane-num,
#game-screen.gs-alipunch:not(.is-start) [data-region="12"] > .lane-sub {
  display: none;
}
#game-screen.gs-alipunch:not(.is-start) [data-region="12"]::before,
#game-screen.gs-alipunch:not(.is-start) [data-region="12"]::after { display: none; }
#game-screen.gs-alipunch:not(.is-start) [data-region="12"] .lane-items {
  display: flex; flex-direction: column; gap: 8%; position: absolute; inset: 3%;
  border-radius: 0; overflow: visible;
}

/* ---- 무기 스킨: 대포 ---- 위치·transform 은 lane-cannon.js 가 넣는다 ---- */
.lane-cannon { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
/* .lc-rig = 레이어 전체(--sq 정사각). transform-origin=회전축. rig 가 조준회전+반동. */
.lc-rig { position: absolute; inset: 0; will-change: transform; }
.lc-rig img { position: absolute; display: block; }
/* .lc-body = top-left 기준 배치 (lane-cannon.js 가 left/top/width 지정). 포즈 3개 중 1개만 표시. */
.lc-rig .lc-body {
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.35));
  z-index: 1;
}
/* 스파크→불연기→잔여연기: lane-cannon.js 가 width/left/top/transform-origin/--rot 지정
   (그림 속 코어 지점을 포구에 맞추고 포즈 각도로 회전 — 코어가 포구에 붙어 포신을 따라간다). */
.lc-spark {
  opacity: 0;
  transform: rotate(var(--rot, 0deg)) scale(0.5);
  filter: drop-shadow(0 0 10px rgba(255, 170, 60, 0.9));
  z-index: 2;
}
.lc-spark.is-on { animation: lc-spark 0.15s ease-out forwards; }
@keyframes lc-spark {
  0%   { opacity: 0; transform: rotate(var(--rot, 0deg)) scale(0.5); }
  30%  { opacity: 1; transform: rotate(var(--rot, 0deg)) scale(0.85); }
  100% { opacity: 0; transform: rotate(var(--rot, 0deg)) scale(1.1); }
}
.lc-burn {
  opacity: 0;
  transform: rotate(var(--rot, 0deg)) scale(0.4);
  filter: drop-shadow(0 0 14px rgba(255, 150, 60, 0.85)) saturate(1.15);
  z-index: 2;
}
.lc-burn.is-on { animation: lc-burn 0.22s ease-out forwards; }
@keyframes lc-burn {
  0%   { opacity: 0;    transform: rotate(var(--rot, 0deg)) scale(0.4); }
  15%  { opacity: 1;    transform: rotate(var(--rot, 0deg)) scale(0.9); }
  45%  { opacity: 0.85; transform: rotate(var(--rot, 0deg)) scale(1.1); }
  100% { opacity: 0;    transform: rotate(var(--rot, 0deg)) scale(1.4); }
}
/* 연기 = 대비를 올려서 더 진하고 선명하게 보이도록. */
.lc-smoke {
  opacity: 0;
  transform: rotate(var(--rot, 0deg)) scale(0.45);
  filter: contrast(1.35) saturate(0.95);
  z-index: 0;
}
.lc-smoke.is-on { animation: lc-smoke 0.7s ease-out forwards; }
@keyframes lc-smoke {
  0%   { opacity: 0;    transform: rotate(var(--rot, 0deg)) scale(0.45); }
  20%  { opacity: 1;    transform: rotate(var(--rot, 0deg)) scale(1.0); }
  100% { opacity: 0;    transform: rotate(var(--rot, 0deg)) scale(1.6); }
}
.lc-ball {
  position: absolute; display: block;
  width: calc(var(--sq) * 0.055); opacity: 0;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5));
  z-index: 3;
}

/* ---- 타격 연출 ---- */
.mole-board--shake { animation: mole-shake 0.2s ease-out; }
@keyframes mole-shake {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-4px, 3px); }
  50% { transform: translate(3px, -2px); }
  75% { transform: translate(-2px, 2px); }
  100% { transform: translate(0, 0); }
}
.hit-fx-burst, .hit-fx-clang {
  position: absolute;
  transform: translate(-50%, -60%);
  font-weight: 900;
  font-size: 1.8rem;
  color: #ffe14d;
  text-shadow: 0 2px 0 #b26a00, 0 0 10px rgba(255, 225, 77, 0.8);
  pointer-events: none;
  animation: hit-pop 0.4s ease-out forwards;
}
.hit-fx-clang { color: #cfd8ff; text-shadow: 0 2px 0 #445, 0 0 10px rgba(200, 210, 255, 0.8); }
.hit-fx-burst--juggle { color: #6cf0ff; text-shadow: 0 2px 0 #0a6b7a, 0 0 10px rgba(108, 240, 255, 0.85); font-size: 1.5rem; }
@keyframes hit-pop {
  0% { transform: translate(-50%, -60%) scale(0.4); opacity: 0; }
  30% { transform: translate(-50%, -75%) scale(1.15); opacity: 1; }
  100% { transform: translate(-50%, -95%) scale(1); opacity: 0; }
}
.hit-fx-helmet {
  position: absolute;
  width: 12%;
  height: 12%;
  background: no-repeat center / contain url('assets/moles/helmet.png');
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: hit-helmet 0.5s ease-in forwards;
}
@keyframes hit-helmet {
  0% { transform: translate(-50%, -50%) rotate(0) scale(1); opacity: 1; }
  100% { transform: translate(-120%, 40%) rotate(-140deg) scale(0.7); opacity: 0; }
}
.hit-fx-dust {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #7a5230;
  pointer-events: none;
  animation: hit-dust 0.45s ease-out forwards;
}
@keyframes hit-dust {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 0.9; }
  100% { transform: translate(calc(-50% + var(--dx, 20px)), calc(-50% - 30px)) scale(0.2); opacity: 0; }
}
/* 타격 = 밝기 플래시 + 살짝 찌부러졌다 돌아오는 스프링(squash).
   scale 는 transform 과 별개 속성이라 pop-elements.js 의 매프레임 transform 루프와 안 부딪힌다. */
.mole-pop-img--hit { animation: mole-pop-hit 0.18s ease-out; }
@keyframes mole-pop-hit {
  0%   { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.4)); scale: 1 1; }
  30%  { filter: brightness(2.6) drop-shadow(0 0 10px #fff); scale: 1.16 0.82; }
  60%  { scale: 0.95 1.05; }
  100% { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.4)); scale: 1 1; }
}

/* ---- 두더지 등장 연출 (hit-fx.js emerge) ---- */
.hit-fx-ring {
  position: absolute;
  width: 22%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 3px solid var(--ring, #ffe9a8);
  transform: translate(-50%, -50%) scale(0.25);
  pointer-events: none;
  animation: hit-ring 0.42s ease-out forwards;
}
@keyframes hit-ring {
  0% { transform: translate(-50%, -50%) scale(0.25); opacity: 0.95; }
  100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
}
/* 흙덩어리 파편 — 구멍에서 튀어올라 포물선으로 떨어진다 (등장 = 흙 폭발). */
.hit-fx-clod {
  position: absolute;
  width: 18px;
  height: 15px;
  background: #8a5a34;
  border: 2px solid #4a2f1a;
  border-radius: 42% 55% 48% 50%;
  box-shadow: inset -3px -3px 0 rgba(0, 0, 0, 0.3);
  pointer-events: none;
  animation: hit-clod 0.66s cubic-bezier(.2, .7, .45, 1) forwards;
}
.hit-fx-clod--weak { width: 14px; height: 12px; border-width: 1.5px; }
@keyframes hit-clod {
  0%   { transform: translate(-50%, -50%) scale(0.4) rotate(0); opacity: 1; }
  15%  { transform: translate(calc(-50% + var(--cx, 0px) * 0.35), calc(-50% + var(--cy, 0px) * 0.6)) scale(var(--cs, 1)) rotate(calc(var(--cr, 180deg) * 0.3)); opacity: 1; }
  65%  { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--cx, 0px)), calc(-50% + var(--cy, 0px) + 40px)) scale(calc(var(--cs, 1) * 0.5)) rotate(var(--cr, 180deg)); opacity: 0; }
}

/* 스타버스트 — 타격 지점에서 노란 별들이 사방으로 튄다. */
.hit-fx-star {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 1.15rem;
  line-height: 1;
  color: #ffd23c;
  text-shadow: 0 1px 0 #b26a00, 0 0 6px rgba(255, 210, 60, 0.8);
  pointer-events: none;
  animation: hit-star 0.44s ease-out forwards;
}
@keyframes hit-star {
  0%   { transform: translate(-50%, -50%) scale(0.2) rotate(0); opacity: 0; }
  25%  { transform: translate(calc(-50% + var(--sx, 0px) * 0.6), calc(-50% + var(--sy, 0px) * 0.6)) scale(var(--ss, 1)) rotate(calc(var(--sr, 0deg) * 0.5)); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--sx, 0px)), calc(-50% + var(--sy, 0px))) scale(calc(var(--ss, 1) * 0.7)) rotate(var(--sr, 0deg)); opacity: 0; }
}

/* ---- 대포 처치 (hit-fx.js moleBlast) ---- */
/* 명중 순간 흰 번쩍. */
.hit-fx-blast-flash {
  position: absolute;
  width: 26%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, #ffe08a 40%, rgba(255, 224, 138, 0) 70%);
  transform: translate(-50%, -50%) scale(0.4);
  pointer-events: none;
  animation: hit-blast-flash 0.2s ease-out forwards;
}
@keyframes hit-blast-flash {
  0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; }
}
/* 회재 + 불티 파편이 사방으로 흩뿌려진다. */
.hit-fx-ash {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #5f5a57;
  border: 2px solid #16130f;
  transform: translate(-50%, -50%) scale(0.5);
  pointer-events: none;
  animation: hit-ash 0.5s ease-out forwards;
}
.hit-fx-ash--ember {
  background: radial-gradient(circle at 35% 35%, #ffd27a, #ff8a2a 55%, #7a2a00);
  border-color: #7a2a00;
}
@keyframes hit-ash {
  0%   { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--ax, 0px)), calc(-50% + var(--ay, 0px))) scale(1.1); opacity: 0; }
}

/* 타격 획득 점수 — "+N" 이 히트 지점에서 위로 떠오른다. */
.hit-fx-score {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: 'Dongle', 'Segoe UI', 'Malgun Gothic', sans-serif;
  font-weight: 800;
  font-size: 1.7rem;
  color: #8affa0;
  -webkit-text-stroke: 3px #000;
  paint-order: stroke fill;
  pointer-events: none;
  animation: hit-score 0.7s ease-out forwards;
}
@keyframes hit-score {
  0%   { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
  25%  { transform: translate(-50%, -95%) scale(1.1); opacity: 1; }
  100% { transform: translate(-50%, -150%) scale(1); opacity: 0; }
}
.hud-flash { animation: hud-flash 0.3s ease-out; }
@keyframes hud-flash {
  0%, 100% { color: inherit; }
  40% { color: #ff5a5a; text-shadow: 0 0 8px rgba(255, 90, 90, 0.9); }
}

/* 대포 연사 발동 — 두더지 흙더미 부근에서 튀어나와 제자리서 사라짐(위로 안 뜸). 골드+글로우, 검은 외곽선. */
.hit-fx-burstword {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: 'Dongle', 'Segoe UI', 'Malgun Gothic', sans-serif;
  font-weight: 800;
  font-size: 1.85rem;
  color: #ffce33;
  -webkit-text-stroke: 3px #000;
  paint-order: stroke fill;
  text-shadow: 0 0 6px rgba(255, 206, 51, 0.95), 0 0 15px rgba(255, 180, 0, 0.7);
  white-space: nowrap;
  pointer-events: none;
  animation: hit-burstword 0.7s ease-out forwards;
}
@keyframes hit-burstword {
  0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }
  22%  { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
  55%  { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* ---- 알리 펀치 처치 연출 (hit-fx.js punchStar) ---- */
/* 별 2개가 머리 위 지점을 중심으로 회전 — 컨테이너를 돌리고 별은 좌우로 벌려 배치. */
.hit-fx-punch-star {
  position: absolute;
  width: 0; height: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: punch-star-spin 0.6s ease-out forwards;
}
.hit-fx-punch-star span {
  position: absolute;
  top: -10px;
  font-size: 1.3rem;
  line-height: 1;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4));
}
.hit-fx-punch-star span:nth-child(1) { left: -24px; }
.hit-fx-punch-star span:nth-child(2) { left: 6px; }
@keyframes punch-star-spin {
  0%   { transform: translate(-50%, -50%) rotate(0deg) scale(0.5); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(650deg) scale(1) translateY(-10px); opacity: 0; }
}

/* ---------- 앱 최초 1회 인트로 (두더지 게임의 역사) ---------- */
#intro-screen {
  position: fixed; inset: 0; z-index: 9998;   /* 스플래시(9999) 바로 아래 — GET NOW 뒤 홈이 안 비치게 */
  background: radial-gradient(120% 80% at 50% 0%, #1a2550 0%, #0b1024 55%, #070a18 100%);
  color: #e9edff;
  overflow: hidden;
  transition: opacity 1.7s ease;
}
/* 마무리: 인트로(어두움)가 천천히 투명해지며 홈(밝은 흰 몸체)이 서서히 배어나온다.
   = 밝아지며 홈이 서서히 나옴. 흰색으로 확 덮었다 지우는 방식 아님. */
#intro-screen.intro--out { opacity: 0; }
#intro-screen.intro--out .intro-view,
#intro-screen.intro--out .intro-skip { opacity: 0; transition: opacity 0.7s ease; }
.intro-skip {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(14, 20, 44, 0.92); color: #dfe4ff;
  font-size: 0.82rem; font-weight: 700; padding: 7px 12px; border-radius: 999px;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}
/* .intro-view = 고정 뷰포트(스크롤 없음). .intro-col 이 translateY 로 아래→위로 흐른다. */
.intro-view { position: absolute; inset: 0; overflow: hidden; }
.intro-col {
  position: absolute; left: 50%; top: 0; width: 100%; max-width: 440px;
  transform: translate(-50%, 80vh);
  padding: 0 22px; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 16px;
  will-change: transform;
}
.intro-col > * { opacity: 0; transition: opacity 0.5s ease; }
.intro-title {
  margin: 0 0 2px; font-size: 1.5rem; font-weight: 800; text-align: center;
  letter-spacing: -0.01em; min-height: 1.5em;
}
.intro-fig { margin: 4px 0; }
.intro-fig img { width: 100%; aspect-ratio: 1000 / 545; object-fit: cover; display: block; border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); }
.intro-fig figcaption { margin-top: 7px; text-align: center; font-size: 0.76rem; color: #9aa6dd; font-weight: 700; }
.intro-p {
  margin: 0; font-size: 0.98rem; line-height: 1.7; color: #dde3ff; text-align: center;
  min-height: 1.7em; word-break: keep-all;
}

/* ---------- 광고 (Phase 1 스텁) ---------- */
.ad-banner { display: flex; align-items: center; justify-content: center;
  min-height: 48px; background: #f0f0f2; color: #9a9aa0; font-size: 0.8rem;
  letter-spacing: 0.1em; border-radius: 8px; }
.ad-overlay { position: fixed; inset: 0; z-index: 50; display: flex;
  align-items: center; justify-content: center; background: rgba(20, 20, 28, 0.38); }
.ad-overlay-card { position: relative; width: 78%; max-width: 320px; padding: 28px 18px;
  background: #ffffff; border-radius: 14px; text-align: center; color: #3a3a41;
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.22); }
.ad-overlay-tag { font-size: 0.75rem; letter-spacing: 0.2em; color: #8a8a90; }
.ad-overlay-hint { margin-top: 10px; font-size: 0.8rem; font-weight: 700; color: #3a3a41; line-height: 1.4; white-space: pre-line; }
.ad-overlay-bar { margin-top: 14px; height: 4px; background: #e6e6ea; border-radius: 2px; overflow: hidden; }
.ad-overlay-bar i { display: block; height: 100%; width: 0; background: #57d977; animation: ad-fill 1.6s linear forwards; }
@keyframes ad-fill { to { width: 100%; } }
.ad-overlay-x { position: absolute; top: 8px; right: 10px; background: none; border: none;
  color: #8a8a90; font-size: 1rem; cursor: pointer; }

/* ============ 독립앱 Phase 1 — 더보기 메뉴 + 하위 화면 ============ */

/* 사람두더지 얼굴 레이어 (pop-elements.js 가 위치·크기 설정) */

/* 하위 화면 공통 (screen-nav.js 배타 토글) — 전체 화면 (키패드 위까지 덮는다) */
.board-screen { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column;
  background: #ffffff; color: #1f1f24; overflow-y: auto; scrollbar-width: none; }
.board-screen::-webkit-scrollbar { display: none; }
.board-screen-bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px;
  font-weight: 700; border-bottom: 1px solid rgba(0,0,0,0.09); flex: 0 0 auto; }
.bs-back { background: none; border: none; color: #1f1f24; font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 0 4px; }
.bs-title { font-size: 0.95rem; }

/* 더보기 메뉴 본체 — 전체 화면 (키패드 위까지 덮는다) */
.more-menu { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column;
  background: #ffffff; color: #1f1f24; overflow-y: auto; scrollbar-width: none; }
.more-menu::-webkit-scrollbar { display: none; }
.mm-topbar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid rgba(0,0,0,0.09); }
.mm-close { background: none; border: none; color: #1f1f24; font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 0 2px; }
.mm-title { font-weight: 800; font-size: 0.95rem; }
.mm-stat { display: inline-flex; align-items: center; gap: 3px; font-size: 0.82rem; color: #3a3a41; }
.mm-stat svg { width: 15px; height: 15px; }
.mm-regen { margin-left: 3px; font-size: 0.64rem; font-weight: 700; color: #8a8a92; font-variant-numeric: tabular-nums; }
/* 상단: 게임 안 함 = "‹ 더보기" / 게임 일시정지 중 = "‹ 이어하기" 3D 박스 */
#more-menu:not(.mm-paused) .mm-resume { display: none; }
#more-menu.mm-paused .mm-close,
#more-menu.mm-paused .mm-title { display: none; }
/* 일시정지(이어하기) 중엔 라이트 변경 잠금 — 이어하기 = 그 게임의 라이트 그대로 복귀. */
#more-menu.mm-paused .mm-pills { pointer-events: none; opacity: 0.4; }
.mm-resume {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: none;
  background: none;
  color: #ffcf4a;
  font-size: 0.9rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  text-shadow: 0 0 6px rgba(255, 207, 74, 0.7);
  transition: transform 0.06s;
}
/* PLAY(.mm-go)의 idle-crown-fx 와 같은 대각선 쉬머 이펙트 */
.mm-resume::before {
  content: '';
  position: absolute;
  inset: -60%;
  background: linear-gradient(115deg, transparent 42%, rgba(255, 240, 190, 0.9) 50%, transparent 58%);
  animation: idle-crown-sweep 2.8s ease-in-out infinite;
  pointer-events: none;
}
.mm-resume:active {
  transform: scale(0.92);
}
.mm-resume span:first-child { font-size: 1.15rem; line-height: 1; margin-top: -2px; }
.mm-hearts svg { fill: #e05a6e; }
.mm-coins svg { fill: #f2c14e; }
.mm-profile { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; padding: 14px;
  border-bottom: 1px solid rgba(0,0,0,0.09); }
.mm-profile-stats { position: absolute; top: 8px; right: 12px; display: inline-flex; gap: 10px; }
.mm-avatar { width: 46px; height: 46px; border-radius: 16px; flex: 0 0 auto; border: none; cursor: pointer;
  background: #ececef url("assets/moles/mole1.png") center/150% no-repeat; background-size: cover;
  position: relative; }
.mm-avatar::after { content: '✎'; position: absolute; right: -3px; bottom: -3px; width: 16px; height: 16px;
  border-radius: 50%; background: #2fb457; color: #fff; font-size: 9px; line-height: 16px; text-align: center; }
.mm-profile-txt { flex: 1; background: none; border: none; color: inherit; text-align: left; cursor: pointer; }
.mm-profile-txt b { display: block; font-size: 0.95rem; }
.mm-profile-txt i { font-style: normal; font-size: 0.78rem; color: #8a8a90; }
.mm-maker { position: relative; display: flex; align-items: center; gap: 8px; margin: 12px 14px 8px;
  padding: 12px; background: #f4f4f6; border-radius: 12px; cursor: pointer; }
.mm-maker-faces { display: flex; }
.mm-maker-txt { flex: 1; font-size: 0.86rem; }
.mm-maker-btn { padding: 6px 14px; border-radius: 8px; background: linear-gradient(180deg, #57d977, #2fb457);
  color: #fff; font-weight: 800; font-size: 0.82rem; flex: 0 0 auto; }
.mm-mini-mole { width: 26px; aspect-ratio: 470/548; margin-left: -4px; flex: 0 0 auto; }
.mm-mini-mole img { width: 100%; display: block; }
.mm-pills { display: flex; gap: 7px; padding: 14px 12px; }
.mm-pill { flex: 1; min-width: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px;
  padding: 9px 2px; border: none; border-radius: 10px; background: #f0f0f2;
  color: #55555c; font-weight: 800; font-size: 0.72rem; cursor: pointer; }
.mm-pill > span { white-space: nowrap; }
.mm-pill--locked { color: #a9a9b0; cursor: not-allowed; }
.mm-pill--locked .mm-pill-ic { stroke: #b4b4bb; }
.mm-pill-ic { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; }
/* DIM/OFF: 전구 좌측 + 오른쪽에 배율 2줄 (윗줄 기본 ×1.2, 아랫줄 피버 ×1.5). 라벨은 그대로 하단.
   두 줄 = 같은 크기·굵기, 박스 안에서 최대한 크게 (사용자 요청). */
.mm-pill--mult .mm-pill-row { display: flex; align-items: flex-start; gap: 3px; }
.mm-pill--mult .mm-pill-ic { width: 15px; height: 15px; margin-top: 1px; }
.mm-pill-mx { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; line-height: 1.15; }
.mm-pill-mx b, .mm-pill-mx i {
  font-size: clamp(0.6rem, 3.1vw, 0.72rem);
  font-weight: 400; /* 굵게 X — 아래 그리드 글자/아이콘 정도 */
  font-style: normal;
  opacity: 1;
  white-space: nowrap;
  letter-spacing: -0.02em;
}
/* 전구 밝기 = 난이도 표현: ON 노랑/글로우, DIM 은은, OFF 어둑 */
.mm-pill[data-mm-diff="easy"] .mm-pill-ic { stroke: #ffcf4a; filter: drop-shadow(0 0 4px rgba(255, 200, 70, 0.9)); }
.mm-pill[data-mm-diff="mid"] .mm-pill-ic { stroke: #9a9aa0; }
.mm-pill[data-mm-diff="legend"] .mm-pill-ic { stroke: #c2c2c8; }
.mm-pill--on { background: linear-gradient(180deg, #3ac06a, #2a9c54); color: #fff; }
.mm-pill--on .mm-pill-ic { stroke: #fff; filter: none; }
.bs-soon { text-align: center; color: #8a8a92; font-weight: 700; padding: 40px 20px; }
.mm-grid { display: grid; grid-template-columns: repeat(4, 1fr); padding: 8px 6px 12px; }
.mm-grid button { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 14px 2px;
  background: none; border: none; color: #3a3a41; font-size: 0.7rem; cursor: pointer; }
/* 카톡 더보기처럼 외곽선(흰색 stroke)만 있는 아이콘 */
.mm-grid .mm-ic { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; }
.mm-grid i { font-style: normal; text-align: center; }
/* 광고 박스 — PLAY 버튼 아래 여백을 채우되 버튼에 딱 붙지 않게 위쪽에 간격 (사용자 요청). */
.mm-ad { margin: 20px 14px 12px; flex: 1 0 auto; min-height: 150px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px; background: #f2f2f4; color: #9a9aa0; font-weight: 700; overflow: hidden; }
.mm-ad > * { max-width: 100%; }
.mm-ad:empty::after { content: '광고'; }

/* 더보기 그리드의 "GO" — 설정 아래 칸. 통화 아이콘 + GO, 색으로 구분 (앰버). */
/* 이어가기(mm-paused) 상태에서만: PLAY 왼쪽에 "이거 누르면 새로 시작" 안내 */
.mm-go-note {
  grid-column: 1 / 4;
  display: none;
  align-items: center;
  justify-content: flex-end;
  padding: 0 8px 0 4px;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.35;
  color: #9a9aa2;
  text-align: right;
  white-space: pre-line;
}
#more-menu.mm-paused .mm-go-note { display: flex; animation: mm-go-note-blink 1.8s ease-in-out infinite; }
@keyframes mm-go-note-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

.mm-go {
  grid-column: 4;          /* 설정 바로 아래 (4번째 열) */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 14px 2px;
  background: none;
  border: none;
  cursor: pointer;
  font-style: normal;
}
.mm-go-badge { position: relative; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; }
.mm-go .mm-ic { width: 26px; height: 26px; fill: #ffcf4a; stroke: none; position: relative; z-index: 1; }
/* 대기 중 왕관 이펙트 — 금색 아웃라인 + 안에서 대각선으로 움직이는 빛(쉬머). */
.mm-go .idle-crown-fx {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
  box-shadow: inset 0 0 0 2px #ffe08a, 0 0 6px 1px rgba(255, 207, 74, 0.7);
}
.mm-go .idle-crown-fx::before {
  content: '';
  position: absolute;
  inset: -60%;
  background: linear-gradient(115deg, transparent 42%, rgba(255, 240, 190, 0.9) 50%, transparent 58%);
  animation: idle-crown-sweep 2.8s ease-in-out infinite;
}
.mm-go i { font-style: normal; font-size: 0.68rem; font-weight: 900; letter-spacing: 0.06em; color: #ffcf4a; }
.mm-go:active { transform: scale(0.92); }

/* 하트 없음 모달 */
.nh-title { font-weight: 800; margin-bottom: 14px; }
.nh-btns { display: flex; flex-direction: column; gap: 8px; }
.nh-btns button { padding: 10px; border: none; border-radius: 8px; background: #2fb457; color: #fff; font-weight: 700; cursor: pointer; }
.nh-btns button[data-nh="close"] { background: #e6e6ea; color: #3a3a41; }

/* 종료 확인창 */
.quit-card { text-align: center; }
.quit-title { font-weight: 800; font-size: 1rem; margin-bottom: 18px; }
.quit-btns { display: flex; gap: 8px; }
.quit-btns button { flex: 1; padding: 11px; border: none; border-radius: 8px; background: #e6e6ea; color: #3a3a41; font-weight: 700; cursor: pointer; }
.quit-btns .quit-yes { background: #e53935; color: #fff; }

/* 메이커 */
.face-maker { align-items: center; }
.fm-stage { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 16px 14px; }
.fm-hint { font-size: 0.9rem; color: #55555c; margin: 0; text-align: center; }
.fm-pick-btn { display: inline-flex; align-items: center; padding: 10px 20px; border-radius: 10px;
  background: linear-gradient(180deg, #57d977, #2fb457); color: #fff; font-weight: 800; cursor: pointer; }
.fm-crop { position: relative; width: 74%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: #000; touch-action: none; }
.fm-crop-img { position: absolute; left: 50%; top: 50%; transform-origin: center; will-change: transform; max-width: none; }
.fm-crop-ring { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255,255,255,0.6) inset; pointer-events: none; }
.fm-next, .fm-save, .fm-redo { padding: 9px 22px; border: none; border-radius: 9px; font-weight: 800; cursor: pointer; }
.fm-next, .fm-save { background: linear-gradient(180deg, #57d977, #2fb457); color: #fff; }
.fm-redo { background: #e6e6ea; color: #3a3a41; }
.fm-preview-btns { display: flex; gap: 10px; }
.fm-name { width: 70%; padding: 8px 10px; border-radius: 8px; border: 1px solid #e6e6ea; background: #f2f2f4; color: #1f1f24; text-align: center; }
.fm-preview-mole { width: 46%; margin: 0 auto; aspect-ratio: 470/548; }
.fm-preview-mole img { width: 100%; display: block; }
.fm-preview-face-only { width: 46%; margin: 0 auto; }
.fm-preview-face-only img { width: 100%; aspect-ratio: 1; border-radius: 50%; object-fit: cover; display: block; }
.fm-priv { margin-top: auto; padding: 8px 14px 12px; font-size: 0.72rem; color: #9a9aa0; text-align: center; }

/* ---------- 사람두더지 꾸미기 ---------- */
.costume-screen { align-items: stretch; }
.cs-stage { position: relative; width: 200px; height: 200px; margin: 14px auto 8px; }
.cs-slot { position: absolute; width: 66px; height: 66px; border: 2px dashed #d3d3d8; border-radius: 14px;
  display: flex; align-items: center; justify-content: center; overflow: hidden; background: #f4f4f6;
  will-change: transform, opacity;
  transition: transform 0.5s cubic-bezier(.3,.85,.25,1.25), opacity 0.35s, border-color 0.3s; }
.cs-slot img, .cs-slot svg { width: 100%; height: 100%; object-fit: cover; }
.cs-slot--hat     { left: 67px; top: 0; }
.cs-slot--body    { left: 67px; bottom: 0; }
.cs-slot--face    { left: 0; top: 67px; }
.cs-slot--glasses { right: 0; top: 67px; }
.cs-stage--merge .cs-slot {
  left: 67px; top: 67px; right: auto; bottom: auto;
  transform: scale(0.35); opacity: 0; border-color: transparent;
}

.cs-rows { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: none; padding: 4px 0 8px; }
.cs-rows::-webkit-scrollbar { display: none; }
.cs-row { display: flex; align-items: center; gap: 8px; padding: 6px 10px; }
.cs-row-lbl { flex: 0 0 34px; font-size: 0.72rem; font-weight: 800; color: #8a8a90; }
.cs-strip { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.cs-strip::-webkit-scrollbar { display: none; }
.cs-chip { position: relative; flex: 0 0 auto; width: 48px; height: 48px; border-radius: 12px;
  border: 2px solid transparent; background: #f0f0f2; cursor: pointer; padding: 4px;
  display: flex; align-items: center; justify-content: center; }
.cs-chip img, .cs-chip .cs-thumb { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.cs-chip--on { border-color: #57d977; }
.cs-chip--lock { opacity: 0.5; }
.cs-lock { position: absolute; right: -2px; bottom: -2px; font-size: 11px; }

.cs-compose { margin: 6px 14px 14px; padding: 14px; border: none; border-radius: 12px;
  background: linear-gradient(180deg, #ffcf4a, #f0a800); color: #3a2600; font-weight: 900;
  font-size: 1rem; letter-spacing: 0.1em; cursor: pointer;
  box-shadow: 0 5px 0 #b98200, 0 8px 16px rgba(0,0,0,0.4); }
.cs-compose:active { transform: translateY(4px); box-shadow: 0 1px 0 #b98200; }

.cs-result { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px; background: rgba(255,255,255,0.96); }
.cs-card { width: 58%; aspect-ratio: 470/548; }
.cs-result-btns { display: flex; gap: 12px; }
.cs-redo, .cs-save { padding: 10px 26px; border: none; border-radius: 10px; font-weight: 800; cursor: pointer; }
.cs-redo { background: #e6e6ea; color: #3a3a41; }
.cs-save { background: linear-gradient(180deg,#57d977,#2fb457); color: #fff; }
.cs-result--in .cs-card { animation: cs-pop 0.5s cubic-bezier(.2,1.5,.4,1) both; }
@keyframes cs-pop {
  0% { transform: scale(0.2) rotate(-12deg); opacity: 0; }
  60% { transform: scale(1.12) rotate(3deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}
.cs-result--in::before {
  content: ''; position: absolute; left: 50%; top: 42%; width: 8px; height: 8px;
  border-radius: 50%; box-shadow:
    40px -20px 0 2px #ffd93b, -44px -10px 0 2px #4dd0ff, 10px -50px 0 2px #ff5a8a,
    -20px 40px 0 2px #69db7c, 50px 24px 0 2px #da77f2, -50px 20px 0 2px #ffa94d;
  animation: cs-spark 0.6s 0.1s ease-out both;
}
@keyframes cs-spark {
  0% { transform: translate(-50%,-50%) scale(0.2); opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(2.4); opacity: 0; }
}

/* 보관함 */
.face-locker .fl-new { margin-left: auto; background: none; border: none; color: #57d977; font-weight: 800; cursor: pointer; }
.fl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px; }
.fl-card { background: #f4f4f6; border-radius: 12px; padding: 10px; text-align: center; border: 2px solid transparent; }
.fl-card--active { border-color: #57d977; }
.fl-thumb { width: 68%; margin: 0 auto; aspect-ratio: 470/548; }
.fl-thumb-img { width: 100%; display: block; }
.fl-name { margin-top: 4px; font-size: 0.8rem; color: #55555c; min-height: 1em; }
.fl-actions { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.fl-actions button { padding: 5px 0; border: none; border-radius: 6px; background: #ececef; color: #3a3a41; font-size: 0.72rem; cursor: pointer; }
.fl-empty { padding: 24px; text-align: center; color: #9a9aa0; }

/* 상점 */
.shop-bal { margin-left: auto; font-size: 0.85rem; color: #f2c14e; }
.shop-list { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.shop-row { display: flex; align-items: center; gap: 8px; padding: 12px; background: #f4f4f6; border-radius: 10px; font-size: 0.85rem; }
.shop-row span { flex: 1; }
.shop-row button { padding: 6px 14px; border: none; border-radius: 8px; background: #2fb457; color: #fff; font-weight: 800; cursor: pointer; }
.shop-row button:disabled { background: #e6e6ea; color: #a0a0a6; cursor: default; }
.shop-head { padding: 14px 4px 4px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; color: #8a8a90; }
.shop-set { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #f4f4f6; border-radius: 10px; }
.shop-set-thumbs { display: flex; gap: 3px; flex: 0 0 auto; }
.shop-set-thumbs .cs-thumb { width: 26px; height: 26px; background: #e9e9ec; border-radius: 6px; }
.shop-set-name { flex: 1; font-size: 0.86rem; font-weight: 700; }
.shop-set button { padding: 6px 14px; border: none; border-radius: 8px; background: #f0a800; color: #3a2600; font-weight: 800; font-size: 0.78rem; cursor: pointer; }
.shop-set button:disabled { background: #e6e6ea; color: #a0a0a6; }

/* 일일 */
.daily-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 14px; }
.daily-cell { background: #f4f4f6; border-radius: 10px; padding: 12px 4px; text-align: center; border: 2px solid transparent; }
.daily-cell i { display: block; font-style: normal; font-size: 0.7rem; color: #8a8a90; }
.daily-cell b { font-size: 0.85rem; }
.daily-cell--done { opacity: 0.45; }
.daily-cell--today { border-color: #f2c14e; }
.daily-claim { margin: 6px 14px; padding: 12px; border: none; border-radius: 10px;
  background: linear-gradient(180deg, #57d977, #2fb457); color: #fff; font-weight: 800; cursor: pointer; }
.daily-claim:disabled { background: #e6e6ea; color: #a0a0a6; }
.daily-2x { margin: 0 14px 12px; padding: 10px; border: none; border-radius: 10px; background: #ececef; color: #3a3a41; cursor: pointer; }

/* 정적 화면 + 스코어 */
.info-body { padding: 16px; line-height: 1.6; font-size: 0.86rem; color: #3a3a41; }
.info-body h3 { margin: 14px 0 6px; font-size: 0.9rem; color: #1f1f24; }
.info-body p { margin: 0 0 10px; }
.score-best { padding: 12px 16px; display: flex; flex-direction: column; gap: 4px; border-bottom: 1px solid rgba(0,0,0,0.09); }
.score-best-row { font-size: 0.86rem; color: #3a3a41; }
.score-hist { padding: 8px 16px; }
.score-hist-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(0,0,0,0.07); font-size: 0.82rem; }
.score-hist-row b { margin-left: auto; }
.score-hist-row i { color: #f2c14e; font-style: normal; }
.score-empty { padding: 24px; text-align: center; color: #9a9aa0; }

/* 설정 화면 */
.set-list { padding: 8px 4px 20px; }
.set-row { display: flex; align-items: center; gap: 12px; padding: 16px 16px; border-bottom: 1px solid rgba(0,0,0,0.09); }
.set-ic { width: 22px; height: 22px; flex: 0 0 auto; fill: none; stroke: #3a3a41; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; }
.set-lbl { flex: 1; font-size: 0.9rem; }
.set-toggle { position: relative; width: 46px; height: 26px; border: none; border-radius: 13px;
  background: #3a3a41; cursor: pointer; transition: background 0.15s; flex: 0 0 auto; }
.set-toggle--on { background: #34c759; }
.set-knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; transition: transform 0.15s; }
.set-toggle--on .set-knob { transform: translateX(20px); }
.set-lang { padding: 6px 12px; border: 1px solid #e6e6ea; border-radius: 8px; background: #f2f2f4;
  color: #55555c; font-size: 0.8rem; font-weight: 700; cursor: pointer; }
.set-lang--on { background: #2fb457; border-color: #2fb457; color: #fff; }
.set-row--reset { justify-content: center; border-bottom: none; padding-top: 24px; }
.set-reset { padding: 10px 24px; border: 1px solid #e2b3b3; border-radius: 8px; background: transparent;
  color: #cf4a4a; font-size: 0.85rem; font-weight: 700; cursor: pointer; }
.set-row--link { cursor: pointer; }
.set-chev { color: var(--lm-muted); font-size: 1.2rem; line-height: 1; }
.set-adfree-badge { width: 26px; height: 26px; flex: 0 0 auto; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)); }

/* 아이템 보관 — 탭 + placeholder */
.inv-tabs { display: flex; gap: 6px; padding: 12px 12px 6px; }
.inv-tab {
  flex: 1; padding: 8px 0; border: none; border-radius: 8px;
  background: var(--lm-fill); color: var(--lm-muted);
  font-size: 0.82rem; font-weight: 700; cursor: pointer;
}
.inv-tab--on { background: #2fb457; color: #fff; }
.inv-body { padding: 8px 14px; }
.inv-soon { padding: 40px 0; text-align: center; color: var(--lm-muted); font-weight: 700; }
.inv-locked {
  margin: 4px 0 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff4d6;
  border: 1px solid #f0d38a;
  color: #8a6d1e;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  white-space: pre-line;
}
.inv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 6px 0; }
.inv-card {
  background: var(--lm-fill); border-radius: 12px; padding: 10px 10px 12px;
  text-align: center; border: 2px solid transparent;
  display: flex; flex-direction: column;
}
.inv-card--on { border-color: #2fb457; }
.inv-head { display: flex; justify-content: flex-end; min-height: 1.2em; }  /* 이름 = 카드 우측 상단 */
.inv-name { font-size: 0.86rem; font-weight: 800; color: var(--lm-ink); }
.inv-thumb { height: 88px; display: flex; align-items: center; justify-content: center; }
.inv-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* 알리 펀치 = 좌/우 글러브 한 쌍(오른쪽은 왼쪽 이미지 거울상, 실제 게임 배치와 동일). */
/* 사용자 지시: 좌우 글러브 사이 0.2cm 간격, 왼쪽 시계 15도·오른쪽 반시계 15도(거울상 유지). */
.inv-thumb--pair { position: relative; gap: 0.5cm; }
.inv-thumb--pair img { max-width: 46%; }
/* 강조 애니메이션(사용자 지시): 두 글러브가 2번 맞부딪히고, 2번째에 스파크+"POWER UP". */
.inv-thumb--pair img:not(.inv-thumb-mirror) { animation: inv-bump-l 3s ease-in-out infinite; }
.inv-thumb-mirror { animation: inv-bump-r 3s ease-in-out infinite; }
/* 곡선(아치) 궤적(사용자 지시) — 직선(translateX만)이 아니라 중간에 위로 살짝 뜨며 휘어진다. */
@keyframes inv-bump-l {
  0%        { transform: rotate(15deg) translate(0, 0); }
  5%        { transform: rotate(15deg) translate(5px, -6px); }
  10%       { transform: rotate(15deg) translate(10px, 0); }
  15%       { transform: rotate(15deg) translate(5px, -6px); }
  20%       { transform: rotate(15deg) translate(0, 0); }
  25%       { transform: rotate(15deg) translate(5px, -6px); }
  30%, 38%  { transform: rotate(15deg) translate(10px, 0); }
  43%       { transform: rotate(15deg) translate(5px, -6px); }
  48%, 100% { transform: rotate(15deg) translate(0, 0); }
}
@keyframes inv-bump-r {
  0%        { transform: rotate(-15deg) scaleX(-1) translate(0, 0); }
  5%        { transform: rotate(-15deg) scaleX(-1) translate(5px, -6px); }
  10%       { transform: rotate(-15deg) scaleX(-1) translate(10px, 0); }
  15%       { transform: rotate(-15deg) scaleX(-1) translate(5px, -6px); }
  20%       { transform: rotate(-15deg) scaleX(-1) translate(0, 0); }
  25%       { transform: rotate(-15deg) scaleX(-1) translate(5px, -6px); }
  30%, 38%  { transform: rotate(-15deg) scaleX(-1) translate(10px, 0); }
  43%       { transform: rotate(-15deg) scaleX(-1) translate(5px, -6px); }
  48%, 100% { transform: rotate(-15deg) scaleX(-1) translate(0, 0); }
}
.inv-bump-spark, .inv-bump-word {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(0.3);
  opacity: 0;
  pointer-events: none;
}
.inv-bump-spark { font-size: 1.7rem; animation: inv-bump-spark 3s ease-in-out infinite; }
.inv-bump-word {
  top: 58%;
  font-weight: 800; font-size: 0.6rem; color: #ffce33;
  -webkit-text-stroke: 2px #000; paint-order: stroke fill;
  white-space: nowrap;
  animation: inv-bump-word 3s ease-in-out infinite;
}
@keyframes inv-bump-spark {
  0%, 33%  { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
  36%      { opacity: 1; transform: translate(-50%, -50%) scale(1.3); }
  46%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.6); }
}
@keyframes inv-bump-word {
  0%, 34%  { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  40%      { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
  58%      { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  70%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}
/* 캐논 강조 애니메이션(사용자 지시): 포신 살짝 반동 + 포구 스파크 루프. */
.inv-thumb--cannon { position: relative; }
/* :not() 로 화염/연기 오버레이 제외 — 안 그러면 이 규칙이 더 구체적이라 그쪽 애니메이션을 덮어씀. */
.inv-thumb--cannon img:not(.inv-cannon-burn):not(.inv-cannon-smoke) { animation: inv-cannon-recoil 2.5s ease-in-out infinite; }
@keyframes inv-cannon-recoil {
  /* 포구가 이미지 왼쪽에 있으니, 발사 반동은 반대쪽(오른쪽, +)으로 밀려야 맞음 — 방향 반전. */
  0%, 70%, 100% { transform: translateX(0); }
  74%           { transform: translateX(6%); }
  80%           { transform: translateX(-1%); }
  86%           { transform: translateX(0); }
}
/* 포구 위치 = cannon-a1.png 픽셀 실측(이미지 자체 기준 13.8%/22.6%).
   .inv-thumb--cannon 박스는 창 너비에 맞춰 늘어나지만(board-screen이 inset:0), 캐논 이미지 자체는
   높이 고정(88px)이라 항상 박스 정중앙에 같은 크기로 렌더링됨 — 그래서 박스의 %가 아니라
   "박스 중앙 기준 고정 px 오프셋"으로 잡아야 창 크기와 무관하게 포구에 붙어 있음. */
.inv-cannon-burn, .inv-cannon-smoke {
  /* 사용자 오더: 좌 0.5cm+0.2cm=0.7cm, 위 0.2cm+0.1cm=0.3cm. */
  position: absolute; left: calc(50% - 38.2px - 0.7cm); top: calc(19.9px - 0.3cm);
  /* width도 박스(창 너비에 늘어남) 기준 %면 커져서 아래 translate(-60%…)도 같이 커져 어긋남 —
     캐논 이미지(105.5px)의 34%로 고정 px. */
  width: 35.9px; height: auto;
  transform: translate(-60%, -50%) scale(0.4) rotate(5deg);
  opacity: 0;
  pointer-events: none;
}
.inv-cannon-burn { animation: inv-cannon-burn 2.5s ease-in-out infinite; }
.inv-cannon-smoke { animation: inv-cannon-smoke 2.5s ease-in-out infinite; }
/* 반동(포신이 +6% 움직임)과 같은 타이밍에 같은 만큼 같이 움직여야 포구에서 안 떨어져 보임(방향 반전). */
@keyframes inv-cannon-burn {
  0%, 72%   { opacity: 0; transform: translate(calc(-60% + 0px), -50%) scale(0.3) rotate(5deg); }
  74%       { opacity: 0; transform: translate(calc(-60% + 6.3px), -50%) scale(0.3) rotate(5deg); }
  76%       { opacity: 1; transform: translate(calc(-60% + 6.3px), -50%) scale(1) rotate(5deg); }
  84%, 100% { opacity: 0; transform: translate(calc(-70% - 1.1px), -50%) scale(1.2) rotate(5deg); }
}
@keyframes inv-cannon-smoke {
  0%, 74%   { opacity: 0; transform: translate(calc(-60% + 6.3px), -50%) scale(0.4) rotate(5deg); }
  82%       { opacity: 0.9; transform: translate(calc(-75% + 6.3px), -60%) scale(1.1) rotate(5deg); }
  100%      { opacity: 0; transform: translate(calc(-90% + 6.3px), -75%) scale(1.5) rotate(5deg); }
}
/* 사용자 지시: 알리 판취 POWER UP, 골드해머 QUAKE!와 맞춰 캐논도 화염 옆에 "BOOM!" 표시. */
.inv-cannon-word {
  /* 사용자 오더: 아래 0.2cm, 좌측 0.3cm. */
  position: absolute; left: calc(50% - 38.2px - 0.7cm + 8px - 0.3cm); top: calc(10px + 0.2cm);
  transform: translate(-50%, -50%) scale(0.3);
  opacity: 0;
  pointer-events: none;
  font-weight: 800; font-size: 0.6rem; color: #ff6a3d;
  -webkit-text-stroke: 2px #000; paint-order: stroke fill;
  white-space: nowrap;
  animation: inv-cannon-word 2.5s ease-in-out infinite;
}
@keyframes inv-cannon-word {
  0%, 72%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  76%       { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
  82%       { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  92%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}
/* 골드해머 = 게임화면 이미지 그대로, 보석(파란불빛) 부분에만 맥동 글로우 +
   강조 애니메이션(사용자 지시): 두 번 쿵쿵 내리찍고 2번째에 번개+"QUAKE!". */
.inv-thumb--gem { position: relative; }
/* 사용자 지시: 균열선이 망치를 가리면 안 됨 — 망치가 위, 균열선이 아래. */
.inv-thumb--gem img { position: relative; z-index: 2; animation: inv-hammer-thump 3s ease-in-out infinite; }
@keyframes inv-hammer-thump {
  0%, 24%, 100% { transform: rotate(0deg); }
  38%           { transform: rotate(-90deg); }  /* 타격하듯 반시계 90도(사용자 지시) */
  50%           { transform: rotate(-90deg); }  /* 번개 타이밍까지 유지 */
  60%           { transform: rotate(0deg); }
}
.inv-hammer-word {
  /* 캐논과 동일한 이유(board-screen이 창 너비에 늘어남, 골드해머 이미지는 고정 62.2×88px)로
     박스 % 대신 고정 px 오프셋 사용. */
  /* 사용자 오더: 망치에 가려 안 보여서 좌측 하단으로 이동. */
  position: absolute; left: calc(50% - 60px); top: 75px;
  transform: translate(-50%, -50%) scale(0.3);
  opacity: 0;
  pointer-events: none;
  font-weight: 800; font-size: 0.6rem; color: #d9a24b;
  -webkit-text-stroke: 2px #000; paint-order: stroke fill;
  white-space: nowrap;
  animation: inv-hammer-word 3s ease-in-out infinite;
}
/* 망치 끝(머리, 반시계90도 회전 후 위치 약 30%/59%)에서 여러 갈래로 갈라지는 균열(참고 이미지). */
.inv-hammer-crack {
  /* 사용자 오더: 아래로 0.5cm+0.2cm=0.7cm. */
  position: absolute; left: calc(50% - 30.2px); top: calc(51.9px + 0.7cm);
  width: 93.6px; aspect-ratio: 1;
  z-index: 1;
  transform: translate(-50%, -50%);
  fill: none;
  stroke: #1a1005;
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
  opacity: 0;
  pointer-events: none;
}
.inv-hammer-crack path {
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
}
.inv-hammer-crack, .inv-hammer-crack path { animation: inv-hammer-crack 3s ease-in-out infinite; }
@keyframes inv-hammer-crack {
  0%, 38%   { opacity: 0; stroke-dashoffset: 40; }
  40%       { opacity: 1; }
  50%       { opacity: 1; stroke-dashoffset: 0; }
  62%, 100% { opacity: 0; stroke-dashoffset: 0; }
}
@keyframes inv-hammer-word {
  0%, 39%  { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  44%      { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
  60%      { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  72%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}
/* .inv-gem-glow(상점 카드 보석 글로우) — 사용자 지시로 삭제. inv-gem-pulse 는 게임화면
   .lane-hammer-gem-glow 가 계속 쓰므로 유지. */
@keyframes inv-gem-pulse {
  0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(0.82); }
  50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.18); }
}
/* 이미지 아래 능력치 칸 — 무기마다 동일 구성(3줄 표). 값 없으면 "-" (방어력은 미래 무기용). */
.inv-stat { margin: 6px 0 9px; }
/* "능력치" 헤더 — 검은 외곽선 + 번개색 글로우 */
.inv-stat-h {
  text-align: center; font-weight: 800; font-size: 0.82rem; margin-bottom: 5px;
  color: #eafcff;
  -webkit-text-stroke: 1.5px #000;
  paint-order: stroke fill;
  text-shadow: 0 0 3px #5fe8ff, 0 0 8px #29b6ff, 0 0 15px rgba(41, 182, 255, 0.6);
}
.inv-stat-tbl { width: 100%; border-collapse: collapse; font-size: 0.64rem; line-height: 1.3; }
.inv-stat-tbl th {
  text-align: left; font-weight: 700; color: var(--lm-muted);
  white-space: nowrap; padding: 1px 5px 1px 0; vertical-align: top;
}
.inv-stat-tbl td { width: 99%; text-align: left; color: var(--lm-ink); font-weight: 700; padding: 1px 0; }  /* 99% = 남는 폭 다 차지 (th는 내용폭) */
.inv-stat-tbl td.inv-stat-dash { text-align: center; }
.inv-equip { margin-top: auto; }

/* 게임화면 둥근 글자체(Dongle, 사용자 선택) — 홈화면·다이얼패드 숫자·더보기메뉴는 그대로,
   라운드전환/카운트다운/점수·하트·콤보/결과화면/타격 이펙트 텍스트만 적용. */
#round-intro-title, #round-intro-count, .si-line1, .si-line2, .si-line3,
#hud-score, .board-hearts, .board-combo, .hub-timer,
.go-word, .gameover-score,
.hit-fx-burst span {
  font-family: 'Dongle', 'Segoe UI', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
}
.inv-equip {
  width: 100%; padding: 7px 0; border: none; border-radius: 8px;
  background: #2fb457; color: #fff; font-weight: 800; font-size: 0.82rem; cursor: pointer;
}
.inv-equip:disabled { background: #d8dbe0; color: #8a8a90; cursor: default; }

/* 난이도: 고수·전설은 버튼 불(어느 구멍에 두더지) 끔 */
/* 라이트 DIM (고수): 버튼 배경 불빛은 끄고, 숫자·글씨·아이콘 색만 앰버로 바꾼다 ("불 켜진" 느낌) */
#game-screen.diff-mid .lane-button--hot { background: transparent; box-shadow: none; }
#game-screen.diff-mid .lane-button--hot .lane-num,
#game-screen.diff-mid .lane-button--hot .lane-sub,
#game-screen.diff-mid .lane-button--hot .lane-kr,
#game-screen.diff-mid .lane-button--hot .lane-en,
#game-screen.diff-mid .lane-button--hot .lane-lbl { color: #ffcf4a; }
#game-screen.diff-mid .lane-button--hot .lane-ico svg { stroke: #ffcf4a; fill: #ffcf4a; }
#game-screen.diff-mid .lane-button--call.lane-button--hot { background: #2ecc57; box-shadow: none; }

/* 라이트 OFF (전설): 아무 표시 없음 */
#game-screen.diff-legend .lane-button--hot { background: transparent; box-shadow: none; }
#game-screen.diff-legend .lane-button--call.lane-button--hot { background: #2ecc57; box-shadow: none; }