* {
  box-sizing: border-box;
}

/* 브랜드 컬러 토큰 — 화면 곳곳에 리터럴 hex로 흩어져 있던 값들 중
   반복적으로 쓰이는(3회 이상) 색만 모았다. 화면별로 한 번씩만 쓰이는
   고유 포인트 컬러(랭킹 뒤로가기 파랑, 이름변경 보라 등)는 그 자체로
   의미가 명확해 변수화하지 않는다 */
:root {
  --color-accent: #facc15;
  --color-on-accent: #422006;
  --color-bg: #0f172a;
  --color-text-light: #f8fafc;
  --color-outline-dark: #1e3a5f;
  --glow-inner: #fff7b0;
  --glow-outer: #eab308;
  --glow-text: #fef9c3;
  /* 브라우저 기본 ease/ease-in-out은 펀치가 약해서 의도된 느낌이 덜 산다 —
     진입/피드백용 강한 ease-out과, 화면 위에서 모양이 바뀌는(morph)
     전환용 ease-in-out을 커스텀 커브로 정의 */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: var(--color-bg);
  overflow: hidden;
  font-family: "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  /* #game-container is letterboxed to a fixed 9:16 box below — center it in
     whatever leftover space the browser window has on either axis */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 세로 방향 고정용 안내 오버레이 — 이 게임은 위에서 아래로 떨어지는
   구조라 세로 전용으로 설계됨. PWA/TWA로 설치된 상태면 manifest.json의
   orientation 필드가 OS 차원에서 회전 자체를 막아주지만, 일반 브라우저
   탭에서는 그게 안 통하므로 여기서 직접 가로 모드를 가로막는다.
   (max-height: 500px)로 태블릿 가로모드나 데스크톱 가로 창은 건드리지
   않고, (pointer: coarse)로 마우스 쓰는 데스크톱은 아예 대상에서 제외 —
   실제 손가락으로 쥐는 작은 화면 기기가 가로로 눕혀졌을 때만 뜬다. */
#rotate-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--color-bg);
  color: var(--color-text-light);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
  padding: 24px;
}

#rotate-overlay p {
  margin: 0;
  font-size: 1.1rem;
  font-weight: bold;
}

.rotate-overlay-icon {
  font-size: 3rem;
  animation: rotate-hint 1.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .rotate-overlay-icon {
    animation: none;
  }
}

@keyframes rotate-hint {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-90deg); }
}

@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  #rotate-overlay {
    display: flex;
  }
}

#game-container {
  position: relative;
  /* fixed 9:16 letterbox: pick whichever of width/height the viewport
     constrains first, then cap the other via the same ratio computed from
     it — this always lands on an exact 9:16 box, pillarboxed (bars left/
     right) on a wide window or letterboxed (bars top/bottom) on a
     taller-than-9:16 one, with html/body's flex centering + background
     (see above) filling the bars */
  width: 100vw;
  height: 100vh;
  max-width: calc(100vh * 9 / 16);
  max-height: calc(100vw * 16 / 9);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  /* #play-area already clips its own overflow, but #gameover-screen's
     wide spotlight-beam div (width up to 560px, centered via
     translateX(-50%)) is a sibling outside #play-area with no clipping
     ancestor of its own — it was overflowing past this container's edge
     and widening the page's scrollable area, which on mobile showed up as
     the whole layout shifted right with a horizontal scrollbar. clipping
     here (once, at the top-level fixed-width wrapper) covers every
     current and future overlay instead of adding overflow-x:hidden to
     each one individually */
  overflow: hidden;
}

#play-area {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  /* 오버레이가 화면 크기(cqw/cqh)에 맞춰 스스로 줄어들 수 있게 한다 */
  container-type: size;
  background: #e2e8f0;
}

#game-canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

/* 화면 전환(시작↔랭킹↔도감↔설정↔일시정지↔게임오버)이 전부 .hidden
   토글(display:none↔flex)이라 지금까지 전환 애니메이션이 전혀 없었다.
   display:none→flex로 바뀌는 순간 CSS 애니메이션은 항상 처음부터
   다시 재생되므로(전환과 달리 keyframes는 display:none 상태에서 멈춰
   있다가 보이는 순간 재시작한다), 이 한 곳만 고치면 game.js의 67곳
   .hidden 토글 전부에 자동으로 적용된다 */
@keyframes overlay-in {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* 내용이 화면보다 길어지면 그냥 center로는 위쪽이 화면 밖으로 잘려
     스크롤로도 못 올라간다(제목이 잘리던 원인) — safe center는 넘칠 땐
     위에서부터 시작해 끝까지 스크롤되게 한다. 미지원 브라우저는 위의
     center 선언이 그대로 쓰인다 */
  justify-content: safe center;
  gap: 12px;
  padding: 24px;
  text-align: center;
  background: rgba(15, 23, 42, 0.72);
  color: var(--color-text-light);
  overflow-y: auto;
  /* #game-container/#play-area의 overflow:hidden이 게임오버 스포트라이트
     빔(폭 560px까지, translateX(-50%)로 일부러 화면 밖까지 넓게 퍼짐)
     같은 요소를 막아주는 유일한 방어선이었다 — 화면(.overlay) 자신에게도
     같은 클리핑을 한 겹 더 둬서, 상위 컨테이너 쪽에 문제가 생겨도 최소한
     이 화면 자체는 가로로 넘치지 않는다 */
  overflow-x: hidden;
  animation: overlay-in 200ms var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .overlay,
  .ad-overlay {
    animation: none;
  }
}

.overlay h1 {
  margin: 0 0 8px;
  font-size: 2rem;
  font-family: 'Jua', "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}

.overlay p {
  margin: 0;
  line-height: 1.5;
}

.overlay button {
  /* was 16px — .overlay's own flex `gap: 12px` already spaces every
     sibling, so this margin used to stack on top of that and eat into the
     9:16 letterbox's now-tighter vertical budget (see #game-container's
     max-height). trimmed rather than removed so a lone button right after
     a paragraph still gets a little breathing room */
  margin-top: 6px;
  padding: 12px 32px;
  font-size: 1.1rem;
  font-weight: bold;
  border: none;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-on-accent);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 120ms var(--ease-out);
}

.overlay button:active {
  transform: scale(0.96);
}

/* 핵심 CTA(게임 시작/다시하기/계속하기/메인으로/광고보고 부활하기)만
   골라 이름입력창 버튼과 같은 "젤리 버튼" 촉각 피드백을 준다 — 두꺼운
   아래쪽 테두리가 눌리는 순간 납작해지는 느낌. 아이콘/탭/소형 버튼 등
   나머지는 기존의 단순 scale 피드백을 그대로 유지한다 */
#start-button,
#restart-button,
#resume-button,
#gameover-menu-button,
#register-score-button,
#continue-ad-button {
  border: 2px solid #b45309;
  box-shadow: 0 4px 0 #b45309;
  transition: transform 120ms var(--ease-out), box-shadow 120ms var(--ease-out);
}

/* longest label of any CTA (📺 + "광고보고 부활하기") — the base 32px side
   padding wrapped it to 2 lines on a narrow 9:16-letterboxed phone, which
   on top of every other element's own height pushed the gameover screen
   past its available height into a scrollbar (see .overlay overflow-y) */
#gameover-screen #continue-ad-button {
  padding-left: 16px;
  padding-right: 16px;
  font-size: clamp(0.78rem, 4.3vw, 1rem);
  /* 한글 폰트가 넓게 렌더링되는 폰에서 마지막 글자("기")만 다음 줄로 떨어지지 않게 */
  white-space: nowrap;
}

#start-button:active,
#restart-button:active,
#resume-button:active,
#gameover-menu-button:active,
#register-score-button:active,
#continue-ad-button:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 #b45309;
}

/* game.js가 실제로 여러 버튼에 disabled를 거는데(점수 등록 확인/광고보고
   부활하기/이름 변경 저장 등) 지금까지 스타일이 없어서 눌러도 되는
   버튼처럼 보였다 */
.overlay button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

#continue-ad-button:disabled {
  box-shadow: none;
}

.overlay button.secondary-button {
  background: rgba(255, 255, 255, 0.14);
  color: var(--color-text-light);
  border: 1.5px solid rgba(255, 255, 255, 0.4);
}

.overlay button.small-button {
  margin-top: 0;
  padding: 8px 16px;
  font-size: 0.85rem;
  background: rgba(255, 255, 255, 0.14);
  color: var(--color-text-light);
  border: 1.5px solid rgba(255, 255, 255, 0.4);
}

.overlay button.back-button {
  background: rgba(255, 255, 255, 0.14);
  color: var(--color-text-light);
  border: 1.5px solid rgba(255, 255, 255, 0.4);
}

/* wins over the plain .back-button color above so the neon glow shows */
.overlay button.back-button.neon-sign-text {
  color: var(--glow-text);
  animation: neon-flicker 1.8s infinite;
}

.menu-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  width: 100%;
  max-width: 320px;
}

/* 게임오버 화면에서 다시하기/메인으로 버튼 자리를 대신 차지하는 이름
   입력 폼 — 같은 폭 제약으로 자리를 바꿔도 레이아웃이 흔들리지 않는다 */
#gameover-register-form {
  margin-top: 8px;
  max-width: 320px;
}

.menu-row button {
  flex: 1;
  margin-top: 0;
  /* two buttons share the row, so the base 32px side padding leaves too
     little room for their text (다시하기/메인으로) once the 9:16 letterbox
     narrows the window — that wrapped to 2 lines and pushed the row taller
     than it needed to be, per user report */
  padding-left: 12px;
  padding-right: 12px;
}

.high-score {
  color: var(--color-accent);
  font-weight: bold;
}

.final-score {
  font-size: 1.4rem;
  font-weight: bold;
}

.new-best {
  color: #4ade80;
  font-weight: bold;
}

.hint-text {
  font-size: 0.85rem;
  color: #cbd5e1;
}

/* --- icon / pause button --- */
.icon-button {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.85);
  color: #1f2937;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  transition: transform 120ms var(--ease-out);
}

.icon-button:active {
  transform: translateX(-50%) scale(0.94);
}

/* --- intro screen: the one-time company intro video, shown full-bleed
   before the real start screen the very first time the game is ever
   launched (see game.js's INTRO_SEEN_KEY) --- */
.intro-screen {
  padding: 0;
  gap: 0;
  background: #000;
  overflow: hidden;
}

/* 인트로 재생 중에는 하단 컨트롤 자리(숨겨진 조이스틱 영역)도 영상과 같은 검정 */
#game-container:has(#intro-screen:not(.hidden)),
#game-container:has(#intro-screen:not(.hidden)) #play-area,
#game-container:has(#intro-screen:not(.hidden)) #mobile-controls,
#game-container:has(#intro-screen:not(.hidden)) #ad-banner {
  background: #000;
  border-top-color: #000;
}
#game-container:has(#intro-screen:not(.hidden)) #game-canvas {
  visibility: hidden;
}

#intro-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  background: #000;
}

/* --- start screen: game.js draws the backdrop straight onto game-canvas
   (drawStartScene(), while game.phase==='start') behind this overlay, so
   this just needs to stay transparent and lay out real buttons in normal
   flex flow — same pattern every other screen (gameover/ranking/settings)
   already uses. no video, no positioning math, no watchdog needed. --- */
.start-art-overlay {
  background: transparent;
  /* .start-deco의 음수 z-index가 이 화면 안에서만 "콘텐츠 뒤"가 되도록
     스태킹 컨텍스트를 명시적으로 만든다(.ranking-art-overlay와 동일).
     이게 없으면 장식들이 화면 밖으로 빠져나가 불투명한 배경 캔버스
     뒤로 숨는다 — 진입 애니메이션(overlay-in)이 도는 동안만 임시로
     컨텍스트가 생겨서 그때만 우연히 보였다 */
  z-index: 0;
  /* 내용이 넘쳐 스크롤바가 생기면 버튼이 화면 아래에 붙는다 — 크기를 높이 기준으로 맞추고 스크롤은 막는다 */
  overflow-y: hidden;
}

/* .secondary-button's translucent white was designed for the dark navy
   .overlay background — against this screen's bright bathroom photo
   instead, that reads as barely-there. a solid dark pill keeps it legible
   and still reads as secondary next to the yellow "게임 시작" pill */
#start-screen .menu-row button {
  background: rgba(15, 23, 42, 0.82);
  color: var(--color-text-light);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
}

.start-mascot {
  /* 타이틀과 시작 버튼 사이 남는 세로 공간을 캐릭터가 전부 채운다 */
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  object-fit: contain;
  object-position: 50% 0%;
  margin-top: -26px;
  position: relative;
  z-index: 2; /* 제목(z-index 1) 앞으로 */
  /* 30fps 애니메이션 이미지에 filter(drop-shadow)를 걸면 매 프레임 블러를 다시 그려
     아래쪽(발 부분)이 깜빡이고 느려진다 — 필터 제거, 별도 레이어로 합성 */
  will-change: transform;
  backface-visibility: hidden;
  animation: start-mascot-bob 3s ease-in-out infinite;
}

@keyframes start-mascot-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8%); }
}

@media (prefers-reduced-motion: reduce) {
  .start-mascot {
    animation: none;
  }
}

/* 시작화면 배경에 떠다니는 아이템 장식들 — .ranking-deco와 같은 패턴
   (음수 z-index로 캐릭터/제목/버튼 등 실제 콘텐츠보다 항상 뒤에 그려짐).
   캐릭터(.start-mascot)/제목/버튼이 차지하는 화면 중앙 세로 줄(대략
   x:28%~71%)은 피해서 양옆 여백 기둥에 세 개씩, 메뉴 버튼 아래 남는
   하단 띠에 나머지 세 개를 깔았다 */
.start-deco {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  user-select: none;
  /* 입체감: 가까운 것(near)은 크고 그림자가 깊고 진폭이 크게, 먼 것(far)은
     작고 그림자가 얕고 진폭이 작게 — 크기만 다르면 그냥 크기가 다른
     스티커로 보이지만 그림자·움직임 폭까지 같이 달라야 앞뒤 거리로 읽힌다.
     흐림/투명도는 쓰지 않고 모두 또렷하게 둔다. 값은 아래
     깊이 그룹에서 지정 */
  filter: drop-shadow(0 var(--sy, 4px) var(--sb, 10px) rgba(0, 0, 0, var(--sa, 0.35)));
  /* 아이템마다 고유한 기울기(--tilt)를 중심 기준으로 틀어 놓고, 떠다니는
     애니메이션도 그 기울기를 기준으로 흔들린다 — 다 똑바로 서 있으면
     격자에 세워 둔 것처럼 뻣뻣해 보인다. 모션 줄이기 설정에서도 기울기는
     남도록 정적 transform도 같이 둔다 */
  transform: rotate(var(--tilt, 0deg));
  animation: start-deco-float 3.2s ease-in-out infinite;
}

@keyframes start-deco-float {
  0%, 100% { transform: translateY(0) rotate(var(--tilt, 0deg)); }
  50% { transform: translateY(var(--bob, -8%)) rotate(calc(var(--tilt, 0deg) + 4deg)); }
}

/* 깊이 그룹 — near / mid / far */
.start-deco-ice, .start-deco-ufo, .start-deco-palm, .start-deco-poop, .start-deco-trident, .start-deco-shoes {
  --sy: 9px; --sb: 16px; --sa: 0.45; --bob: -10%;
}
.start-deco-tp, .start-deco-rainbow, .start-deco-goldpoop {
  --sy: 4px; --sb: 10px; --sa: 0.35; --bob: -8%;
}
.start-deco-fly, .start-deco-gem {
  --sy: 2px; --sb: 5px; --sa: 0.2; --bob: -5%;
}

/* 크기·위치도 깊이에 맞춰: 가까운 건 크게 화면 가장자리에 걸쳐 잘리게,
   먼 건 작게 안쪽으로 */
.start-deco-ice      { left: -8%; top: 10%; width: 24%; --tilt: -16deg; animation-duration: 3.2s; animation-delay: 0s; }
.start-deco-fly      { left: 1%;  top: 72%; width: 13%; --tilt: 14deg;  animation-duration: 4.9s; animation-delay: -1.1s; }
.start-deco-tp       { left: -4%; top: 64%; width: 18%; --tilt: -11deg; animation-duration: 3.7s; animation-delay: -2.3s; }
.start-deco-trident  { left: -5%; top: 30%; width: 30%; --tilt: 14deg;  animation-duration: 5.2s; animation-delay: -1.4s; }
.start-deco-rainbow  { left: 78%; top: 12%; width: 16%; --tilt: 15deg;  animation-duration: 3.6s; animation-delay: -0.6s; }
.start-deco-ufo      { left: 78%; top: 68%; width: 22%; --tilt: -12deg; animation-duration: 3.3s; animation-delay: -1.8s; }
.start-deco-gem      { left: 16.5%; top: 1.5%; width: 10%; --tilt: -19deg; animation-duration: 4.7s; animation-delay: -2.6s; }
.start-deco-palm     { left: 53%; top: 42%; width: 66%; --tilt: 10deg;  animation-duration: 3.4s; animation-delay: -2s; }
/* 날개 신발 — 날개 올린/내린 두 장 사이를 광학 흐름(optical flow)으로
   보간해 24프레임(0.8초 주기)짜리 애니메이션 WebP로 미리 구워 둔 것.
   내려칠 때는 빠르게, 다시 올릴 때는 느리게 이징을 줬고, 날개를 내리는
   순간 몸통이 떠오르는 움직임도 프레임 안에 들어 있어서 CSS 애니메이션이
   따로 필요 없다. "모션 줄이기"일 땐 <picture>가 정지 이미지로 바꿔준다.
   .start-deco의 둥실 떠다니는 애니메이션과 그림자는 그대로 겹쳐 쓴다 */
.start-deco-shoes { left: 68%; top: 26%; width: 30%; aspect-ratio: 520 / 346; --tilt: -8deg; animation-duration: 3.4s; animation-delay: -0.9s; }

/* 거대형 똥 두 마리 — 황금똥은 화면 위쪽(윗부분은 화면 밖으로 살짝 잘림,
   위쪽으로 넘치는 건 스크롤 영역이 안 늘어나서 안전), 기본똥은 아래쪽.
   아래로 삐져나가면 .overlay(overflow-y:auto)에 스크롤바가 생기므로 기울어진
   모서리까지 감안해 아래 끝을 100%보다 여유 있게 잡았다. 캐릭터/제목과는
   겹치지 않고 버튼 뒤로만 깔린다 */
.start-deco-goldpoop { left: 26%; top: -14%; width: 48%; --tilt: -9deg; animation-duration: 4.2s; animation-delay: -1.5s; }
.start-deco-poop     { left: 17%; top: 66%;  width: 66%; --tilt: 6deg;  animation-duration: 3.8s; animation-delay: -0.3s; }

@media (prefers-reduced-motion: reduce) {
  .start-deco {
    animation: none;
  }
}

.overlay button.corner-icon-button {
  position: absolute;
  top: 10px;
  margin-top: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.85);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  z-index: 5;
}

.overlay button.corner-icon-button:active {
  transform: scale(0.92);
}

.start-icon-lang { left: 10px; overflow: hidden; padding: 0; }
/* 현재 언어의 국기만 보이고, 누르면 다른 언어로 바뀐다 */
.start-icon-lang img { display: block; width: 22px; height: 15px; margin: auto; border-radius: 2px; pointer-events: none; }
.start-icon-lang .f-en, html[lang="en"] .start-icon-lang .f-ko { display: none; }
html[lang="en"] .start-icon-lang .f-en { display: block; }
.start-icon-sound { right: 10px; padding: 0; }
.start-icon-sound img { display: block; width: 22px; height: 22px; object-fit: contain; margin: auto; pointer-events: none; }

/* --- 도감(guide) screen --- */
.guide-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 4px;
}

.overlay button.guide-tab-button {
  margin-top: 0;
  padding: 8px 18px;
  font-size: 0.9rem;
  font-weight: bold;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-text-light);
  cursor: pointer;
}

.overlay button.guide-tab-button.active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
}

.guide-list {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
}

.guide-entry {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.94);
  border-radius: 10px;
  padding: 8px 12px;
  text-align: left;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.guide-thumb {
  width: 44px;
  height: 44px;
  object-fit: contain;
  flex: none;
}

/* 특정 아이콘만 그림 자체가 작게 그려져 있어서 유독 작아 보일 때 쓰는
   보정용 클래스 (예: 여래신장/무지개 여래신장). width/height로 박스 자체를
   키우면 그 줄만 .guide-entry 높이가 늘어나서 다른 줄과 줄 간격이
   어긋나므로, 반드시 transform: scale로 그림만 시각적으로 확대한다 — 박스
   크기(44px)는 그대로 유지되어 줄 간격에 영향을 주지 않는다. 앞으로 도감에
   항목/아이콘이 추가될 때도 이 규칙만 지키면 줄 간격이 자동으로 맞는다. */
.guide-thumb-lg {
  transform: scale(1.18);
}
/* 삼지창(가늘고 긴 그림)·날개 신발(납작하고 넓은 그림)은 44px 정사각 칸에
   contain으로 넣으면 한 축이 많이 남아 작아 보여서, 기본 크기보다 조금 더
   키운다 */
.guide-thumb-xl {
  transform: scale(1.3);
}

.guide-entry-text {
  min-width: 0;
}

.guide-entry-name {
  font-weight: bold;
  font-size: 0.92rem;
  margin-bottom: 2px;
  color: #1e293b;
}

.guide-entry-desc {
  font-size: 0.8rem;
  color: #475569;
  line-height: 1.4;
}

/* --- ranking screen: same bathroom illustration as the rest of the game,
   with a few of the item icons floating around it as decoration. the
   background sits on a ::before instead of directly on the element so it
   can be blurred (for readability) without blurring the real content
   painted on top of it --- */
.ranking-art-overlay {
  background: var(--color-bg);
  /* establishes a stacking context so the ::before's negative z-index
     below only buries it under this element's own children, rather than
     under every other position:static sibling (title, hint text, etc.)
     in the wider document */
  z-index: 0;
}

.ranking-art-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url('assets/background.webp') center / cover no-repeat;
  filter: blur(5px);
}

.ranking-deco {
  position: absolute;
  /* positioned elements paint above static in-flow content by default even
     without an explicit z-index, which is what let these float on top of
     the title/buttons/list text; pinning them negative keeps them behind
     every real (static) content element no matter how the layout shifts */
  z-index: -1;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35));
  animation: ranking-deco-float 3.2s ease-in-out infinite;
}

/* a different duration/delay per item so they drift out of sync with each
   other instead of bobbing up and down together like one rigid grid */
.ranking-deco-rainbow { left: 4%;  top: 3%;  width: 15%; animation-duration: 3.4s; animation-delay: 0s; }
.ranking-deco-shoes   { left: 73%; top: 8%;  width: 19%; aspect-ratio: 520 / 346; animation-duration: 3.9s; animation-delay: -0.6s; }
.ranking-deco-tp      { left: -3%; top: 24%; width: 16%; animation-duration: 3s;   animation-delay: -1.4s; }
.ranking-deco-ice     { left: 79%; top: 40%; width: 15%; animation-duration: 3.7s; animation-delay: -2.1s; }
.ranking-deco-gem     { left: 2%;  top: 68%; width: 17%; animation-duration: 3.3s; animation-delay: -0.9s; }
.ranking-deco-char    { left: 75%; top: 76%; width: 21%; animation-duration: 4s;   animation-delay: -1.7s; }

@keyframes ranking-deco-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-8%) rotate(3deg); }
}


/* the neon glow alone reads fine on the dark overlays it was designed for,
   but needs a dark outline to stay legible over the lighter, busier
   bathroom art these three screens show behind it */
#start-screen .neon-sign-text,
#ranking-screen .neon-sign-text,
#gameover-screen .neon-sign-text {
  -webkit-text-stroke: 1.5px var(--color-outline-dark);
  paint-order: stroke fill;
}

#ranking-screen .hint-text,
#gameover-screen .hint-text {
  color: #1e293b;
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.6);
  padding: 0 8px;
}

/* --- 부활 카운트다운: 9→0으로 내려가는 동안 캐릭터 표정(go1/go2)과 큰
   숫자를 나란히 보여준다. 숫자는 GAME OVER 제목과 같은 네온 글로우 +
   어두운 외곽선(가독성용) 처리를 그대로 가져와 톤을 맞춘다 --- */
.revive-countdown-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  position: relative;
  left: 16px;
}

/* go1 상태는 몸통(go1_body, 머리 위 물방울 5개를 지운 버전)과 그 물방울들
   (go1_drops)을 같은 캔버스 크기로 겹쳐서, 물방울 레이어만 좌우 반전시킬
   수 있게 한다 — 둘 다 원본과 동일한 1386x1086 캔버스라 inset:0으로
   그대로 포개면 픽셀이 맞아떨어진다 */
.revive-countdown-img-wrap {
  position: relative;
  width: 75vw;
  max-width: 288px;
  aspect-ratio: 1386 / 1086;
  /* 숫자 글꼴 자체의 오른쪽 여백(글자 베어링) 때문에 gap:0만으로는 여전히
     눈에 띄게 떨어져 보여서, 그만큼 더 끌어당긴다 */
  margin-left: -64px;
}

/* 00 도달(.blackout) — 제목/숫자는 계속 밝게 보여야 하니 그대로 두고,
   캐릭터(몸통+머리 위 물방울)만 한층 더 어둡게. 숫자는 이 캐릭터
   래퍼(.revive-countdown-img-wrap) 밖의 형제 요소(.revive-countdown-number)라
   같이 어두워지지 않는다. startReviveCountdown()의 tick()이 카운트다운이
   00에 닿는 순간 이 클래스를 붙인다 */
.revive-countdown-img-wrap.character-dim .revive-countdown-img,
.revive-countdown-img-wrap.character-dim .revive-countdown-drops {
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35)) brightness(0.4) saturate(0.8);
}

.revive-countdown-img,
.revive-countdown-drops {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35));
  transition: filter 0.4s ease;
}

/* 부활 버튼을 누르면 캐릭터 뒤(머리 위치 중심)에 오라 — aura.mp4를 크로마키해 만든 webp */
.revive-aura {
  display: none;
  position: absolute;
  left: 52.5%;
  top: 55%;
  width: 200%;
  transform: translate(-50%, -50%) rotate(90deg);
  pointer-events: none;
  /* 밝은 배경 위에서도 보이도록 채도/대비를 올리고 푸른 글로우를 얹는다 */
  filter: saturate(2.4) contrast(1.35) drop-shadow(0 0 10px rgba(30, 160, 255, 0.9));
}
.revive-countdown-img-wrap.aura-on .revive-aura {
  display: block;
}

/* 반전축을 캔버스 정중앙(50%)이 아니라 머리(눈물방울 몸통) 콘 부분의 실제
   중심선(원본 PNG 기준 x≈728px / 1386px 폭 ≈ 52.5%)에 맞춘다 — 이 중심을
   기점으로 좌우 대칭 배치되면서, 곁가지 translateX 없이도 물방울 5개가
   전부 머리 실루엣 바깥쪽(원래 자리와 대칭인 반대쪽)에 떨어진다 */
.revive-countdown-drops {
  transition: transform 0.15s var(--ease-in-out);
  transform-origin: 52.5% 50%;
}

.revive-countdown-drops.flipped {
  transform: scaleX(-1);
}

.revive-countdown-number {
  /* 캐릭터와의 간격을 좁힌 뒤로 둘이 겹치는 부분이 생겨서, 뒤에 있는
     .revive-countdown-img-wrap(position: relative라 자연스럽게 쌓임 순서상
     위에 옴)에 숫자 끝자리가 가려지지 않도록 명시적으로 앞에 오게 한다 */
  position: relative;
  z-index: 1;
  font-size: 6.5rem;
  font-weight: bold;
  line-height: 1;
  color: var(--glow-text);
  -webkit-text-stroke: 1.5px var(--color-outline-dark);
  paint-order: stroke fill;
  text-shadow:
    0 0 4px var(--glow-inner),
    0 0 11px var(--color-accent),
    0 0 19px var(--color-accent),
    0 0 40px var(--glow-outer);
}

/* --- 부활 카운트다운 스포트라이트: 화면 맨 위에 작은 조명 기구 하나가
   매달려 있고(jm.png, #gameover-spotlight-lamp), 그 아래로 빛줄기가
   화면 바닥까지 은은하게 내려오는(#gameover-spotlight-beam) 분위기
   레이어. 기구는 이미지 그대로 쓰지만, 빛줄기는 이미지를 늘려 쓰는 대신
   순수 CSS 사다리꼴(clip-path polygon) + 세로 그라데이션으로 직접
   그렸다 — 원본 이미지의 빛줄기 부분은 세로로 짧아서, 화면 바닥까지
   닿게 하려면 이미지를 억지로 늘려야 했는데 그러면 결이 뭉개져
   부자연스러웠다. 순수 그라데이션은 높이에 구애받지 않고 자연스럽게
   바닥까지 뻗을 수 있고, 밝기/불투명도도 자유롭게 조절된다.
   mix-blend-mode:screen은 기본적으로 스택 순서와 무관하게 그 아래 전체
   (캐릭터/제목까지)와 섞여버려서, 처음엔 조명 밝은 부분에 캐릭터와
   "GAME OVER", 카운트다운 숫자가 하얗게 묻혀 안 보이는 문제가 있었다 —
   그래서 이 조명 레이어는 어디까지나 배경을 위한 "분위기"일 뿐, 정작
   읽혀야 하는 제목/캐릭터/숫자는 아래에서 h1.neon-sign-text와
   #revive-countdown-row에 이 레이어보다 높은 z-index를 줘서 조명 밝기와
   무관하게 항상 원래 선명도 그대로 보이게 분리했다.
   startReviveCountdown()이 .active를 붙여 켜고, 카운트다운이 00에 닿으면
   .blackout으로 바뀌어 beam(광선)만 사라지고 lamp(기구)는 그대로
   남으며, 어두운 막은 오히려 살짝 더 짙어진다 */
#gameover-spotlight {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background: rgba(6, 8, 20, 0.42);
  transition: opacity 0.7s ease, background 0.9s ease;
}

#gameover-spotlight.active {
  opacity: 1;
}

/* 조명 꺼짐: 광선은 사라지고(아래 #gameover-spotlight-beam 규칙) 기구는
   남은 채로, 어두운 막이 조금 더 짙어진다 — 그래도 완전 암전은 아니고
   배경만 조금 더 어두운 정도 (제목/캐릭터/숫자는 이 레이어보다 z-index가
   높아 영향 없음) */
#gameover-spotlight.blackout {
  background: rgba(6, 8, 20, 0.42);
}

/* 조명 기구(끈+물방울 유리 갓) — 화면 맨 위에 작게. 끈 윗부분은 화면
   밖으로 살짝 밀어 올리고(top 음수), 원본 이미지 위쪽 68.5%(갓+소켓
   테두리, 폭 프로파일로 확인한 경계)만 clip-path로 남겨서 빛줄기 부분은
   여기 포함되지 않는다. 조명이 꺼져도(.blackout) 계속 보인다 */
#gameover-spotlight-lamp {
  position: absolute;
  top: -6%;
  left: 50%;
  width: 60%;
  max-width: 220px;
  transform: translateX(-50%);
  clip-path: inset(0 0 31.5% 0);
  transition: filter 0.4s ease;
}

/* 00 도달 — 캐릭터(.character-dim)와 같은 정도로 조명 기구도 어둡게 */
#gameover-spotlight.blackout #gameover-spotlight-lamp {
  filter: brightness(0.3) saturate(0.7);
}

/* 빛줄기 — 조명 기구 바로 아래부터 화면 바닥까지 닿는 사다리꼴을
   clip-path로 자르고, 그 안을 위(밝음)에서 아래(옅음)로 흐려지는 노란
   그라데이션으로 채운다. 끝까지 완전히 0으로 떨어뜨리지 않고 아주
   옅게 남겨서 "바닥까지 빛이 닿는" 느낌을 유지한다. 전체 밝기는 한 단계
   올렸고, 그 안에서도 기구 바로 아래(그라데이션 시작점)는 가장 밝게
   잡아 "빛이 비추는 자리"가 확실히 도드라지게 했다.
   사다리꼴의 위쪽 변(광원) 폭은 이 요소 자신의 박스(420px, 화면
   너비보다 훨씬 넓다) 기준 %라서, 조명 갓의 실제 렌더링 폭(168px)과
   맞아떨어지는 지점을 따로 계산해야 한다 — 갓의 벌어진 아래쪽 테두리가
   갓 이미지 폭의 약 45.9%였으므로(이전 폭 프로파일 분석), 168px *
   0.459 ≈ 77px가 실제 테두리 폭. 이걸 이 요소의 420px 박스에 대한
   비율로 바꾸면 약 18%(중심 기준 좌우 9%)가 되어 41%~59%로 잡았다 —
   30%~70%(40% 폭)로 뒀을 때는 갓 테두리보다 훨씬 넓게 시작해서 조명과
   광원이 어긋나 보였다 */
#gameover-spotlight-beam {
  position: absolute;
  /* 갓(lamp)은 width:60%+max-width:220px라 화면 폭에 따라 커지다가
     어느 지점부터 멈추는데, 여기 top은 컨테이너 "높이"의 %라서 고정값
     하나로는 화면 폭마다 갓 테두리와 어긋난다 — 그래서 고정값은 JS가
     아직 안 붙었을 때만 쓰이는 대략치일 뿐이고, 실제 값은
     game.js의 alignSpotlightBeam()이 갓의 실측 위치를 보고 매번
     인라인 style로 덮어쓴다 */
  top: 18%;
  left: 50%;
  width: 150%;
  max-width: 560px;
  height: 84%;
  transform: translateX(-50%);
  /* 윗변(41%~59%)은 JS가 붙기 전 대략치 — 실제 폭은 alignSpotlightBeam()이
     갓 입구의 좌우 끝에 맞춰 인라인 clip-path로 덮어쓴다 */
  clip-path: polygon(41% 0%, 59% 0%, 93% 100%, 7% 100%);
  background: linear-gradient(
    to bottom,
    rgba(255, 214, 110, 1) 0%,
    rgba(255, 214, 110, 0.72) 20%,
    rgba(255, 214, 110, 0.46) 45%,
    rgba(255, 214, 110, 0.3) 70%,
    rgba(255, 214, 110, 0.18) 100%
  );
  mix-blend-mode: screen;
  opacity: 0.56;
  transition: opacity 0.5s ease;
}

/* 00 도달 — 조명 자체는 남지만 광선만 꺼진다 */
#gameover-spotlight.blackout #gameover-spotlight-beam {
  opacity: 0;
}

/* 스포트라이트 레이어(z-index:2)보다 위에 고정 — 조명이 꺼지든 켜지든
   점수판과 버튼 줄은 항상 밝고 눌리는 상태로 남는다 */
#gameover-screen .gameover-score-row,
#gameover-screen .menu-row,
#gameover-screen #continue-ad-button,
#gameover-screen #gameover-register-form {
  position: relative;
  z-index: 3;
}

/* 제목/캐릭터/카운트다운 숫자도 마찬가지로 스포트라이트 레이어보다 위에
   고정 — 조명은 어디까지나 배경 분위기일 뿐, 정작 읽혀야 하는 이
   셋(GAME OVER, 우는 캐릭터, 숫자)은 조명이 켜져 있든 꺼져 있든 항상
   원래 밝기/선명도 그대로 보인다 */
#gameover-screen h1.neon-sign-text,
#gameover-screen #revive-countdown-row {
  position: relative;
  z-index: 3;
}

/* --- 게임 오버: 랭킹 화면과 같은 목욕탕 아트 배경 위에, 점수 정보를
   랭킹 리스트와 같은 프로스티드 카드에 담아 가독성을 맞춘다 --- */
.gameover-score-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.gameover-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 18px;
  background: rgba(255, 255, 255, 0.55);
  border: 1.5px solid rgba(250, 204, 21, 0.6);
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.25);
  backdrop-filter: blur(3px);
}

/* 점수판 옆에 붙는 등록 버튼 — 다른 오버레이 버튼과 같은 노란 필 스타일을
   쓰되, 가로 폭은 좁게 잡고 세로로 짧은 라벨을 쌓아서 점수판과 높이가
   맞도록 함 */
.overlay button.register-score-button {
  flex: none;
  margin-top: 0;
  padding: 6px 14px;
  font-size: 0.75rem;
  line-height: 1.35;
  white-space: nowrap;
}

.gameover-card .final-score {
  color: var(--color-outline-dark);
  font-size: 1rem;
}

.gameover-card .high-score {
  color: var(--color-outline-dark);
  font-size: 0.8rem;
}

.gameover-card .new-best {
  font-size: 0.8rem;
}

/* --- ranking list: a frosted card sitting on top of the bathroom art,
   each row its own rounded pill so it reads as a physical stack of tiles
   rather than plain rows on a dark overlay --- */
#ranking-list {
  list-style: none;
  padding: 14px;
  margin: 0;
  width: 100%;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(255, 255, 255, 0.55);
  border: 1.5px solid rgba(250, 204, 21, 0.6);
  border-radius: 20px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.25);
  backdrop-filter: blur(3px);
}

#ranking-list li {
  display: flex;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.85);
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: bold;
  color: var(--color-outline-dark);
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.12);
}

#ranking-list li.empty {
  justify-content: center;
  color: #64748b;
  background: rgba(255, 255, 255, 0.6);
  box-shadow: none;
}

/* 순위별 배경색 — 1위 빨강, 2위 주황, 3위 노랑, 4위 초록, 5위 파랑 */
#ranking-list li.rank-1 { background: #fca5a5; }
#ranking-list li.rank-2 { background: #fdba74; }
#ranking-list li.rank-3 { background: #fde047; }
#ranking-list li.rank-4 { background: #86efac; }
#ranking-list li.rank-5 { background: #93c5fd; }

/* 내 기록은 순위 색보다 우선해서 금색 강조를 유지한다 (소스 순서상 뒤에 옴) */
#ranking-list li.own {
  background: #fef3c7;
  border: 2px solid var(--color-accent);
  box-shadow: 0 0 10px rgba(250, 204, 21, 0.6);
}
/* 내 기록이 1위여도 배경은 빨강 (금색 테두리·glow는 그대로) */
#ranking-list li.own.rank-1 { background: #fca5a5; }

/* --- ranking account (google sign-in) --- */
.ranking-account {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 280px;
}

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

.ranking-profile-name {
  font-weight: bold;
  font-size: 0.95rem;
}

.ranking-account-actions {
  display: flex;
  gap: 8px;
}

/* pill-colored to match the illustrated ranking screen instead of the
   plain translucent-white buttons used on the darker overlay screens */
.overlay button.small-button#rename-button {
  background: #c4b5fd;
  color: #000;
  border-color: #a78bfa;
}

/* wins over the plain color set on the pill button above, same as the
   ranking screen's back button */
#rename-button.neon-sign-text,
#google-signout-button.neon-sign-text {
  color: var(--glow-text);
  animation: neon-flicker 1.8s infinite;
}

.overlay button.small-button#google-signout-button {
  background: #fda4af;
  color: #4c0519;
  border-color: #fb7185;
}

.overlay button.secondary-button#google-signin-button {
  background: #bae6fd;
  color: #0c4a6e;
  border-color: #7dd3fc;
}

#ranking-screen button.back-button {
  background: #93c5fd;
  border-color: #60a5fa;
}

.rename-form {
  display: flex;
  gap: 6px;
  align-items: center;
  width: 100%;
}

.rename-form input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.12);
  color: var(--color-text-light);
  font-size: 0.9rem;
}

.rename-form button {
  flex: 0 0 auto;
  white-space: nowrap;
}

.rename-form input::placeholder {
  color: rgba(248, 250, 252, 0.55);
}

/* the account panel's box/inputs are made solid black so they stay readable
   against the busy light bathroom art behind them (scoped to the ranking
   screen only — the name-prompt overlay reuses .rename-form too, on its own
   dark background where the lighter default styling is fine). the
   ".ranking-profile-name" slot is a fixed "명예의 전당" screen title, not
   the signed-in user's own name (see updateRankingAccountUI() in game.js —
   it used to show user.name, which meant the title itself changed the
   moment a player renamed themselves), so it gets the opposite visual
   treatment from the rest of the panel: bigger, yellow neon glow straight
   over the art (no backing pill) — the one flourish on this screen, now
   that the heading/buttons around it read as plain black (no flicker
   here either, just a static glow). */
#ranking-screen .ranking-profile-name {
  color: var(--glow-text);
  font-size: 1.5rem;
  text-shadow:
    0 0 4px var(--glow-inner),
    0 0 11px var(--color-accent),
    0 0 19px var(--color-accent),
    0 0 40px var(--glow-outer);
  -webkit-text-stroke: 1.5px var(--color-outline-dark);
  paint-order: stroke fill;
}

/* the "랭킹" heading, 이름 변경, and 뒤로 button all carry the shared
   .neon-sign-text look elsewhere, but on this screen they're demoted to
   plain static black — no flicker, no glow — so the yellow neon above
   (명예의 전당) reads as the one deliberate accent instead of competing
   with three other flickering labels */
#ranking-screen #rename-button.neon-sign-text,
#ranking-screen #google-signout-button.neon-sign-text {
  color: #000;
  text-shadow: none;
  -webkit-text-stroke: 0;
  animation: none;
}

/* "랭킹" 제목과 "뒤로" 버튼은 도감 화면과 같은 글자체(네온 글로우, 깜빡임
   없이 고정)로 통일 — 밝은 배경 위라 읽히도록 앞쪽의
   #ranking-screen .neon-sign-text 어두운 외곽선(text-stroke)도 그대로 쓴다 */
#ranking-screen h1.neon-sign-text,
#ranking-screen button.back-button.neon-sign-text {
  animation: none;
}

/* the 도감 heading and its 뒤로 button keep the shared neon-sign-text
   color/glow, just held static instead of flickering */
#guide-screen h1.neon-sign-text,
#guide-screen button.back-button.neon-sign-text {
  animation: none;
}

#ranking-screen .rename-form input,
#gameover-screen .rename-form input {
  background: #000;
  color: #fff;
  border-color: #000;
}

#ranking-screen .rename-form input::placeholder,
#gameover-screen .rename-form input::placeholder {
  color: rgba(255, 255, 255, 0.55);
}

#ranking-screen .rename-form button,
#gameover-screen .rename-form button {
  background: #000;
  color: #fff;
  border-color: #000;
}

.rename-error {
  margin: 0;
  color: #f87171;
  font-size: 0.82rem;
}

/* --- settings toggles --- */
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 220px;
  background: rgba(255, 255, 255, 0.08);
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 0.95rem;
  cursor: pointer;
}

.toggle-row input {
  width: 20px;
  height: 20px;
}

/* --- on-screen controls: 게임 화면(캔버스) 위에 겹치는 오버레이가 아니라,
   #play-area 아래의 별도 하단 바 — 이전에 있던 광고 배너 자리를 대신
   차지한다. game.js가 game.phase==='playing'일 때만 visibility로
   보이게/숨기게 전환한다 (visibility는 hidden이어도 높이를 차지해
   레이아웃이 흔들리지 않는다) --- */
#mobile-controls {
  flex: 0 0 auto;
  display: none; /* 플레이 중에만 game.js가 flex로 켜고, 그 외에는 같은 자리에 #ad-banner가 보인다 */
  align-items: center;
  justify-content: space-between;
  height: 89px; /* 74 x 1.2 */
  padding: 0 16px;
  background: #1e293b;
  border-top: 1px solid #334155;
}

#action-buttons {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.pad-button,
.action-button {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.55);
  color: #1f2937;
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.pad-button:active,
.action-button:active {
  background: rgba(255, 255, 255, 0.85);
  transform: scale(0.94);
}

.action-button.a-button {
  background: rgba(56, 189, 248, 0.65);
  color: #ffffff;
  font-size: 0.74rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
/* 날개 신발을 먹으면 Double Jump — 빨강 */
.action-button.a-button.double {
  background: rgba(239, 68, 68, 0.8);
}

/* --- 조이스틱(좌우 이동): 알약 모양 트랙 위를 레버(초록 원)가 좌우로
   드래그되는 방식 — 두 개의 탭 버튼이 아니라 손가락으로 레버를 밀고 있는
   동안만 그 방향으로 이동하고, 손을 떼면 레버가 가운데로 되돌아온다.
   드래그 로직은 game.js의 bindLever() 참고 --- */
#dpad {
  position: relative;
  flex: 0 0 auto;
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background: rgba(148, 163, 184, 0.28);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.2), inset 0 -1px 3px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.22);
}

.dpad-hint {
  display: none; /* 원형 조이스틱이라 좌우 화살표 안내는 뺀다 */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.95rem;
  color: rgba(241, 245, 249, 0.55);
  pointer-events: none;
}

.dpad-hint-left {
  left: 16px;
}

.dpad-hint-right {
  right: 16px;
}

.pad-lever {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  transform: translate(-50%, -50%);
  transition: transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1);
  background: radial-gradient(circle at 35% 30%, #4ade80, #16a34a 72%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45), inset 0 1px 2px rgba(255, 255, 255, 0.4);
  color: #ffffff;
  font-size: 1.3rem;
  line-height: 1;
  z-index: 2;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

/* 드래그 중엔 손가락을 그대로 따라가야 하므로 되돌아오는 트랜지션을 끈다 */
.pad-lever.dragging {
  transition: none;
}

/* --- mock ad overlays --- */
.ad-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  animation: overlay-in 200ms var(--ease-out);
}

.ad-box {
  text-align: center;
  color: var(--color-text-light);
}

.ad-label {
  font-size: 1rem;
  color: #94a3b8;
  margin-bottom: 10px;
}
/* the two upper-middle items sit between the corner icons and the box,
   the two lower ones flank the giant droplet below it — same spread the
   ranking screen uses, just re-fitted around this screen's own box/button
   positions so nothing touches */


/* same dark outline the ranking screen's title uses, for legibility on
   the lighter background */

/* 건너뛰기/등록 버튼: 이름 입력이라는 이 화면의 핵심 행동을 더 귀엽고
   누르고 싶게 — 두꺼운 하단 테두리로 말랑한 젤리 버튼처럼 보이게 하고,
   누르면 그 테두리만큼 눌리는 촉각 피드백을 준다 */

.neon-sign-text {
  margin: 0 0 4px;
  white-space: nowrap;
  font-family: 'Jua', "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: clamp(0.8rem, 5.5vw, 1.15rem);
  font-weight: bold;
  letter-spacing: 0.5px;
  color: var(--glow-text);
  animation: neon-flicker 1.8s infinite;
}

@keyframes neon-flicker {
  0%, 3%, 6%, 9%, 12%, 74%, 77%, 100% {
    color: var(--glow-text);
    text-shadow:
      0 0 4px var(--glow-inner),
      0 0 11px var(--color-accent),
      0 0 19px var(--color-accent),
      0 0 40px var(--glow-outer),
      0 0 70px var(--glow-outer);
  }
  4%, 8%, 75%, 76% {
    color: #a16207;
    text-shadow: none;
  }
}

/* 다른 애니메이션(마스코트 bob, 도감/랭킹 장식 float 등)은 전부 감속 모드
   처리가 돼있는데 네온 깜빡임만 빠져있었다 — 1.8초마다 밝기가 훅 꺼졌다
   켜지는 실질적 스트로브라 광과민성 문제가 될 수 있어, 켜진 상태로 고정한다 */
@media (prefers-reduced-motion: reduce) {
  .neon-sign-text {
    animation: none;
    color: var(--glow-text);
    text-shadow:
      0 0 4px var(--glow-inner),
      0 0 11px var(--color-accent),
      0 0 19px var(--color-accent),
      0 0 40px var(--glow-outer),
      0 0 70px var(--glow-outer);
  }
}

.ad-countdown {
  font-size: 3rem;
  font-weight: bold;
  color: var(--color-accent);
}

/* 키보드/게임패드 탐색 시 어느 버튼이 선택됐는지 보이도록 — 마우스/터치
   클릭에서는 뜨지 않고(:focus-visible), 게임 내 모든 버튼(오버레이,
   모바일 십자패드/점프, 일시정지 아이콘)에 공통으로 적용 */
button:focus-visible {
  outline: 3px solid #38bdf8;
  outline-offset: 2px;
}

/* kept last so it always wins over any single-class display rule above,
   regardless of source order (e.g. .overlay, .ad-overlay, .icon-button) */
.hidden {
  display: none !important;
}

/* --- 랭킹 화면 컴팩트 레이아웃 — 9:16 레터박스 안에서 폰이 작을수록
   화면 높이도 줄어든다(오버레이 높이 ≈ 폭×16/9 − 하단 컨트롤 바 89px,
   360px 폭 폰이면 약 566px). 기존 여백/글자 크기로는 제목·안내문·목록·
   뒤로 버튼을 합치면 600px를 넘어 제목과 뒤로 버튼이 잘렸다. 큰 화면에서도
   답답하지 않을 정도로만 각 요소를 줄여 작은 폰에서도 한 화면에 다 보이게 함 --- */
#ranking-screen {
  padding: 12px 20px;
  gap: 8px;
}

#ranking-screen h1.neon-sign-text {
  margin: 0;
}

#ranking-screen .ranking-account {
  max-width: 320px;
  gap: 6px;
}

#ranking-screen .hint-text {
  font-size: 0.78rem;
  line-height: 1.35;
  padding: 0 4px;
}

#ranking-screen #google-signin-button {
  margin-top: 0;
  padding: 9px 20px;
  font-size: 1rem;
}

#ranking-screen #ranking-list {
  padding: 10px;
  gap: 6px;
}

#ranking-screen #ranking-list li {
  padding: 7px 14px;
  font-size: 0.9rem;
}

#ranking-screen button.back-button {
  margin-top: 2px;
  padding: 10px 28px;
}

/* 날개 신발 — 날개 올린/내린 두 장을 겹쳐 번갈아 크로스페이드해서 날갯짓하고,
   날개를 내리는 순간 몸통이 살짝 떠오르도록 같은 주기로 shoes-lift를 준다 */
.shoes-body { position: absolute; inset: 0; animation: shoes-lift 0.8s ease-in-out infinite; }
.shoes-frame { position: absolute; inset: 0; width: 100%; height: 100%; }
/* 두 장을 그냥 반투명으로 겹치면 전환 중에 알파가 줄어 뒤 배경이 비친다 — plus-lighter로 더해서 항상 불투명하게 섞는다 */
.shoes-body { isolation: isolate; }
.shoes-down { mix-blend-mode: plus-lighter; }
.shoes-up { animation: shoes-flap-up 0.8s linear infinite; }
.shoes-down { opacity: 0; animation: shoes-flap-down 0.8s linear infinite; }
@keyframes shoes-flap-up   { 0%, 38% { opacity: 1; } 50%, 88% { opacity: 0; } 100% { opacity: 1; } }
@keyframes shoes-flap-down { 0%, 38% { opacity: 0; } 50%, 88% { opacity: 1; } 100% { opacity: 0; } }
@keyframes shoes-lift { 0%, 38% { transform: translateY(0); } 50%, 88% { transform: translateY(-6%); } 100% { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .shoes-body, .shoes-up, .shoes-down { animation: none; }
}

/* 점수 등록 버튼 — 주변 노란 버튼들 사이에서 눈에 띄도록 초록색으로 바꾸고
   테두리에서 빛이 번져 나오게 한다 */
.overlay button#register-score-button {
  background: linear-gradient(#4ade80, #16a34a);
  color: #fff;
  text-shadow: 0 1px 0 rgba(20, 83, 45, 0.6);
  border-color: #166534;
  box-shadow: 0 4px 0 #166534, 0 0 0 0 rgba(74, 222, 128, 0.7);
  animation: register-glow 1.6s ease-out infinite;
}
.overlay button#register-score-button:active {
  animation: none;
  box-shadow: 0 0 0 #166534;
}
@keyframes register-glow {
  0%   { box-shadow: 0 4px 0 #166534, 0 0 0 0 rgba(74, 222, 128, 0.75); }
  70%  { box-shadow: 0 4px 0 #166534, 0 0 0 12px rgba(74, 222, 128, 0); }
  100% { box-shadow: 0 4px 0 #166534, 0 0 0 0 rgba(74, 222, 128, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .overlay button#register-score-button { animation: none; box-shadow: 0 4px 0 #166534, 0 0 10px rgba(74, 222, 128, 0.8); }
}

/* --- 게임오버 화면: 스크롤 없이 어떤 스마트폰/태블릿 높이에서도 한 화면에
   다 들어오도록, 캐릭터 크기와 여백/버튼 크기를 #play-area 높이(cqh)에
   비례해서 줄인다 (.overlay 기본은 overflow-y:auto라 넘치면 스크롤이 생겼다) --- */
#gameover-screen {
  overflow: hidden;
  padding: clamp(8px, 3cqh, 24px) 16px;
  gap: clamp(3px, 1.4cqh, 12px);
}
#gameover-screen h1.neon-sign-text {
  margin: 0;
  font-size: clamp(1.3rem, 5.6cqh, 2rem);
}
#gameover-screen .revive-countdown-img-wrap {
  width: clamp(80px, min(75cqw, (100cqh - 315px) * 1.276), 288px);
  margin-left: calc(clamp(80px, min(75cqw, (100cqh - 315px) * 1.276), 288px) * -0.22);
}
#gameover-screen .revive-countdown-number {
  font-size: clamp(3rem, 15cqh, 6.5rem);
}
@container (max-height: 560px) {
  #gameover-screen button { padding-top: 8px; padding-bottom: 8px; font-size: 1rem; margin-top: 2px; }
  #gameover-screen .menu-row { margin-top: 2px; }
  #gameover-screen .gameover-card { padding: 4px 14px; }
  #gameover-screen .register-score-button { padding: 4px 12px; }
}

/* 점수 등록 버튼 — 아케이드 푸시 버튼 모양: 동그란 볼록 돔 + 금속 테두리(베젤) +
   아래로 두툼한 몸통. 누르면 몸통만큼 아래로 눌린다. 빛은 베젤 바깥으로 퍼진다 */
.gameover-score-row { gap: 12px; align-items: center; padding: 10px 0 15px; /* 버튼 테두리(위 6px/아래 11px)가 위아래 버튼을 침범하지 않게 */ }
.overlay button#register-score-button {
  width: 68px;
  height: 68px;
  margin-top: -4px; /* 아래로 두툼한 몸통(+11px) 때문에 겉보기 중심이 내려가는 것을 보정 */
  padding: 0;
  border: none;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 28%, #fecaca 0%, #f87171 30%, #dc2626 68%, #991b1b 100%);
  box-shadow:
    inset 0 -7px 10px rgba(0, 0, 0, 0.28),
    inset 0 5px 8px rgba(255, 255, 255, 0.5),
    0 0 0 4px #cbd5e1,
    0 0 0 6px #64748b,
    0 7px 0 4px #475569,
    0 0 12px 5px rgba(255, 30, 30, 0.8);
  animation: register-glow 1.8s ease-in-out infinite;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 0.88rem;
  line-height: 1.15;
  text-shadow: 0 1px 0 rgba(127, 29, 29, 0.7);
}
.overlay button#register-score-button:active {
  animation: none;
  transform: translateY(5px);
  box-shadow:
    inset 0 -4px 8px rgba(0, 0, 0, 0.3),
    inset 0 3px 6px rgba(255, 255, 255, 0.4),
    0 0 0 4px #cbd5e1,
    0 0 0 6px #64748b,
    0 2px 0 4px #475569;
}
@keyframes register-glow {
  0%, 100% { box-shadow: inset 0 -7px 10px rgba(0,0,0,0.28), inset 0 5px 8px rgba(255,255,255,0.5), 0 0 0 4px #cbd5e1, 0 0 0 6px #64748b, 0 7px 0 4px #475569, 0 0 4px 1px rgba(255, 30, 30, 0.06); }
  50%      { box-shadow: inset 0 -7px 10px rgba(0,0,0,0.28), inset 0 5px 8px rgba(255,255,255,0.5), 0 0 0 4px #cbd5e1, 0 0 0 6px #64748b, 0 7px 0 4px #475569, 0 0 20px 8px rgba(255, 20, 20, 1); }
}
@media (prefers-reduced-motion: reduce) {
  .overlay button#register-score-button { animation: none; }
}

/* --- 시작 화면 타이틀 로고(Poop Dodge): 등장 때 통통 튀며 커졌다가,
   이후 천천히 떠다니고 따뜻한 빛이 숨 쉬듯 맥동한다 --- */
#start-screen h1.start-title {
  margin: 26px 0 -22px;
  position: relative;
  z-index: 1;
  line-height: 0;
  flex: none;
  width: clamp(150px, min(90cqw, 29cqh * 1.4), 290px);
  animation: title-pop 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
#start-screen h1.start-title img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  animation: title-float 3.4s ease-in-out 0.9s infinite, title-glow 2.4s ease-in-out 0.9s infinite;
}
/* 언어별 로고: html[lang]에 맞는 이미지만 보이고, 효과도 각자 다르다 */
#start-screen h1.start-title img.t-en { display: none; }
html[lang="en"] #start-screen h1.start-title img.t-ko { display: none; }
html[lang="en"] #start-screen h1.start-title img.t-en { display: block; }
/* 한국어: 젤리처럼 말랑하게 출렁 + 붉은/노란 빛 */
#start-screen h1.start-title img.t-ko {
  transform-origin: 50% 90%;
  animation: title-jelly 2.6s ease-in-out 0.9s infinite, title-glow 2.4s ease-in-out 0.9s infinite;
}
/* 영어: 위아래로 떠다니며 숨 쉬듯 살짝 커지고, 붉은 네온 빛이 맥동 */
#start-screen h1.start-title img.t-en {
  animation: title-float 3.4s ease-in-out 0.9s infinite, title-neon 2s ease-in-out 0.9s infinite;
}
@keyframes title-jelly {
  0%, 100% { transform: scale(1, 1); }
  25% { transform: scale(1.05, 0.95); }
  50% { transform: scale(0.97, 1.04) translateY(-4px); }
  75% { transform: scale(1.03, 0.97); }
}
@keyframes title-neon {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(255, 60, 40, 0.4)) drop-shadow(0 3px 3px rgba(40, 0, 0, 0.6)); }
  50% { filter: drop-shadow(0 0 14px rgba(255, 70, 50, 0.95)) drop-shadow(0 3px 3px rgba(40, 0, 0, 0.6)); }
}
@keyframes title-pop {
  0% { opacity: 0; transform: scale(0.4) translateY(-16px); }
  100% { opacity: 1; transform: none; }
}
@keyframes title-float {
  0%, 100% { transform: translateY(0) rotate(-0.6deg); }
  50% { transform: translateY(-5px) rotate(0.6deg); }
}
@keyframes title-glow {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(255, 190, 80, 0.45)) drop-shadow(0 3px 3px rgba(60, 20, 0, 0.5)); }
  50% { filter: drop-shadow(0 0 12px rgba(255, 210, 90, 0.95)) drop-shadow(0 3px 3px rgba(60, 20, 0, 0.5)); }
}
@media (prefers-reduced-motion: reduce) {
  #start-screen h1.start-title,
  #start-screen h1.start-title img,
  #start-screen h1.start-title img.t-ko,
  #start-screen h1.start-title img.t-en { animation: none; }
}

/* 조이스틱 바가 숨겨진 동안 같은 자리(89px)를 차지하는 광고 배너 */
#ad-banner {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 89px;
  background: #0f172a;
  border-top: 1px solid #334155;
  color: #64748b;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
}
/* 인트로 화면에서는 광고 제외 — 높이만 유지하고 내용은 숨김 */
#game-container:has(#intro-screen:not(.hidden)) #ad-banner {
  color: transparent;
}

/* 부활 광고는 버튼 안에서 이미 카운트했으므로 오버레이의 별도 카운트 숫자는 숨긴다 */
#rewarded-ad-countdown {
  display: none;
}