/* 브랜드 블루(#00A3E0) 디자인 시스템 — 투 트랙:
   화이트 베이스(홈·점수·공유·보드) + 딥 네이비 위 블루 네온(게임 화면).
   타이포(2026-08-10 개편): 영문 tachyon(Adobe Fonts) + 국문 배스킨라빈스(로컬 OTF).
   두 서체를 한 스택에 순서대로 두면 브라우저가 글리프 단위로 고른다 —
   tachyon에 없는 한글은 자동으로 배스킨라빈스로 떨어진다. */

/* 국문 — 배스킨라빈스. public/font/ 에 동봉.
   · 파일명은 ASCII로 변환(원본: 배스킨라빈스 R.otf / 배스킨라빈스B.otf).
     한글·공백 파일명은 호스팅/CDN에 따라 인코딩이 어긋나 404가 나기 때문.
   · woff2를 먼저 둔다 — 774KB OTF → 202KB. 한글 11,172자 전체 포함(서브셋 아님)이라
     닉네임에 무슨 글자가 들어와도 폰트가 깨지지 않는다. OTF는 구형 브라우저 폴백이라
     woff2를 지원하는 브라우저는 내려받지 않는다. 변환: fonttools(TTFont.flavor='woff2') */
@font-face {
  font-family: 'BaskinRobbins';
  src: url('public/font/BaskinRobbins-R.woff2') format('woff2'),
       url('public/font/BaskinRobbins-R.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'BaskinRobbins';
  src: url('public/font/BaskinRobbins-B.woff2') format('woff2'),
       url('public/font/BaskinRobbins-B.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* 구 픽셀 서체 — 현재 미사용(폴백용으로 정의만 유지, 쓰이지 않으면 다운로드되지 않는다) */
@font-face {
  font-family: 'DungGeunMo';
  /* 구 projectnoonnu gh 저장소가 삭제돼 404 — npm 미러(불변 버전)로 교체 (2026-07-07) */
  src: url('https://cdn.jsdelivr.net/npm/@noonnu/dung-geun-mo@0.1.0/fonts/dunggeunmo-normal.woff') format('woff');
  font-display: swap;
}

:root {
  /* 컬러 팔레트 — js/characters.js PALETTE와 미러. 한쪽 변경 시 반드시 함께 변경 */
  --brand: #00A3E0;
  --brand-deep: #0072A3;
  --brand-light: #5FC9F2;
  --tint: #CDEFFB;
  --gold: #FFC53D;
  --gold-tint: #FFEDC2;
  --neon: #02F9FE; /* 플레이 HUD 점수·배속 액티브. JS PALETTE.neon과 미러 */
  --periwinkle: #C9D4FF;
  --coral: #FF6B6B;
  --bg-game: #04121B;
  --bg-base: #FFFFFF;
  --ink: #0B2530;

  /* 선택한 멤버 테마 — main.js가 런타임에 덮어쓴다 */
  --char-accent: #00A3E0;
  --char-accent-soft: #E6F6FC;

  /* 타이포 스택 — 앞이 영문(tachyon), 뒤가 국문(배스킨라빈스). 순서 바꾸지 말 것.
     브라우저가 글리프 단위로 폴백하므로 영문은 tachyon, 한글은 자동으로 배스킨라빈스가 잡힌다 */
  --font-display: tachyon, 'BaskinRobbins', sans-serif;
  --font-bubble: tachyon, 'BaskinRobbins', sans-serif;
  --font-body: tachyon, 'BaskinRobbins', sans-serif;
  /* 푸터·약관 등 본문 성격 텍스트 — 디스플레이 서체 대신 가독성 좋은 기본 산세리프 */
  --font-footer: 'Pretendard', 'Noto Sans KR', -apple-system, 'Segoe UI', sans-serif;
  /* 영문 전용 포인트 서체(sofachrome) — 한글 글리프가 없어 국문은 배스킨라빈스로 떨어진다.
     쓸 곳은 .font-chrome 유틸이나 개별 규칙에서 이 토큰을 지정 */
  --font-chrome: sofachrome, 'BaskinRobbins', sans-serif;
}

/* sofachrome 포인트용 유틸 — 영문 표기 요소에만 붙인다 */
.font-chrome { font-family: var(--font-chrome); font-weight: 400; }

/* touch-action은 상속되지 않으므로 전 요소에 지정해야 더블탭 확대가 완전히 막힌다 */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

html, body {
  height: 100%;
  height: 100dvh; /* 모바일 주소창 동적 높이 추적 — 미지원 브라우저는 위 100% 폴백 */
  background: var(--ink);
  color: var(--ink);
  font-family: var(--font-display);
  /* 킷 ktk4bxx에는 tachyon/sofachrome 모두 Regular(400) 한 웨이트만 발행돼 있다.
     100을 요청하면 400으로 대체되긴 하나(브라우저는 가는 웨이트를 합성하지 않는다) 실제 값과 맞춘다.
     Thin이 필요하면 Adobe Fonts 웹 프로젝트에서 해당 스타일을 추가로 켜야 한다 */
  font-weight: 400;
  overflow: hidden;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

/* 데스크톱 — 좌우 여백(ink 단색) 대신 파도 텍스처가 뷰포트 전체를 채운다 */
@media (min-width: 441px) {
  html, body {
    background-color: rgba(122, 197, 230, 1);
    background-image: url('public/images/bg_wave.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
}

/* 데스크톱 배경 캐릭터 — 파도 배경 위, 중앙 440px 프레임 양옆에 빼꼼.
   프레임 안쪽 가장자리에 딱 붙여 프레임 뒤에서 내다보는 연출 (index.html 상단 <img> 2장) */
.bg-char {
  display: none;
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  height: 100vh;
  height: 100dvh; /* 미지원 브라우저는 위 100vh 폴백 */
  width: auto;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
@media (min-width: 441px) {
  .bg-char { display: block; }
  .bg-char--left { right: calc(50% + 220px); }  /* 오른쪽 끝 = 프레임 왼쪽 변 */
  .bg-char--right { left: calc(50% + 220px); }  /* 왼쪽 끝 = 프레임 오른쪽 변 */
}

/* 모바일 세로 우선, 데스크톱은 중앙 440px 칼럼 (3.0) */
.screen {
  display: none;
  position: fixed;
  inset: 0;
  width: min(100%, 440px);
  margin-inline: auto;
  flex-direction: column;
  justify-content: flex-start;
}
/* 화면 전환 — ease-in-out 크로스페이드. incoming(.active)은 항상 위(z-index:1)에서 페이드인,
   outgoing(.leaving)은 잠깐 남아 페이드아웃한다 (타이밍은 showScreen이 관리). */
.screen.active { display: flex; z-index: 1; animation: screenIn 0.28s ease-in-out; }
.screen.leaving { display: flex; z-index: 0; animation: screenOut 0.28s ease-in-out forwards; }
@keyframes screenIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes screenOut { from { opacity: 1; } to { opacity: 0; } }
.hidden { display: none !important; }

/* 모달 — 결과/홈 위에 풀페이지로 겹쳐 띄운다. 닫으면 이전 화면이 그대로 남는다 (3.5). */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  width: min(100%, 440px);
  margin-inline: auto;
  flex-direction: column;
  justify-content: flex-start;
  z-index: 40;
  overflow-y: auto;
}
/* 모달 — 열 때 스르륵 나타나고(modalIn) 닫을 때 스르륵 사라진다(modalOut, .closing은 main.js가 부여).
   ease-in-out 페이드+슬라이드. */
.modal.open { display: flex; animation: modalIn 0.24s ease-in-out; }
.modal.closing { display: flex; animation: modalOut 0.24s ease-in-out forwards; }
@keyframes modalIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes modalOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(12px); } }
.modal-inner {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 440px;
  flex-shrink: 0;
  padding: 20px 24px calc(24px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* 화면 칼럼(440px) 배경 — 데스크톱 여백(html/body의 bg_wave)은 그대로 둔다.
   홈·로딩·결과·공유·보드 = bg_home / 플레이 = bg_play */
.screen--home,
.screen--sky,
.screen--collage {
  background-color: #7FB5FB; /* 이미지 로드 전·실패 시 폴백 */
  background-image: url('public/images/bg_home.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.screen--collage {
  align-items: center;
  overflow-y: auto;
}
.screen--game {
  background-color: var(--bg-game);
  background-image: url('public/images/bg_play.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #f4eeff;
}
.screen--sky {
  align-items: center;
  overflow-y: auto;
}

.screen-inner {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 440px;
  flex-shrink: 0;
  padding: 20px 24px calc(24px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* CRT 글리치 와이프 전환 (2.4) */
.glitch-in { animation: glitchIn 0.22s steps(3, end); }
@keyframes glitchIn {
  0% { opacity: 0.4; transform: translateX(-6px); clip-path: inset(0 0 60% 0); }
  34% { opacity: 0.7; transform: translateX(4px); clip-path: inset(30% 0 20% 0); }
  67% { opacity: 0.9; transform: translateX(-2px); clip-path: inset(60% 0 0 0); }
  100% { opacity: 1; transform: none; clip-path: none; }
}

/* 등장: 스프링 이징 (2.4) */
@keyframes springIn {
  0% { opacity: 0; transform: scale(0.6); }
  60% { opacity: 1; transform: scale(1.1); }
  100% { opacity: 1; transform: scale(1); }
}

/* 스티커 idle 흔들림 ±2° (2.4) — 게임 레인 영역에는 사용 금지 */
@keyframes wiggle {
  from { transform: rotate(-2deg); }
  to { transform: rotate(2deg); }
}
.sticker-idle { animation: wiggle 2.6s ease-in-out infinite alternate; }

.blink-soft { animation: blinkSoft 1.4s ease-in-out infinite; }
@keyframes blinkSoft { 50% { opacity: 0.75; transform: scale(0.985); } }

/* ---------- 공통 버튼·필드 ---------- */
/* 픽셀·버블 폰트 버튼 — 텍스트 광학 중앙 (DungGeunMo 하단 여백 보정) */
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-align: center;
  gap: 0;
}
.cta-main {
  width: 100%;
  padding: 16px 24px;
  font-family: var(--font-bubble);
  font-size: 22px;
  color: #fff;
  background: var(--brand);
  border: 3px solid var(--ink);
  border-radius: 18px;
  box-shadow: 4px 4px 0 var(--ink);
  cursor: pointer;
  transition: transform 0.08s;
}
.cta-main .cd-spinner { margin-left: 8px; }
.cta-main:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.cta-main:disabled { opacity: 0.6; cursor: default; }

.cta-sub {
  padding: 10px 22px;
  font-family: var(--font-bubble);
  font-size: 16px;
  color: var(--ink);
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 999px;
  box-shadow: 2px 2px 0 var(--ink);
  cursor: pointer;
}
.cta-sub small { font-size: 12px; color: #7A93A1; }

.back-btn {
  align-self: flex-start;
  background: none;
  border: none;
  font-family: var(--font-bubble);
  font-size: 16px;
  color: var(--ink);
  cursor: pointer;
  padding: 4px 0;
}
/* 공유 화면 뒤로가기 — btn_back.png, 볼륨과 동일 56 */
.back-btn--icon {
  width: 56px;
  height: 56px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.28));
}
.back-btn--icon img {
  width: 100%;
  height: 100%;
  display: block;
}
.back-btn--icon:active { transform: scale(0.92); }
.icon-btn {
  background: none;
  border: none;
  font-size: 20px;
  color: var(--ink);
  cursor: pointer;
}

.footnote { font-size: 12px; color: #8CA3B0; text-align: center; }
.field-error { min-height: 18px; font-size: 13px; color: var(--coral); }
.screen-title {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--ink);
  letter-spacing: 2px;
}

/* ---------- 홈 (3.1) — bg_home + 3!4! 로고 + 대형 캐러셀 ---------- */
.screen--home {
  overflow-x: hidden;
  overflow-y: auto;
}
/* 홈 본문(헤더~툴바) — 최소 한 화면을 채우고, 푸터는 그 아래에 자연스럽게 이어진다.
   예전 --footer-peek는 툴바(.home-tools)를 가려서 제거. .screen이 inset:0이라 100%는 뷰포트를 따라간다 */
.home-main {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  flex-shrink: 0;
  width: 100%;
  /* 홈 타이포는 vw가 아니라 이 컨테이너 폭(cqw) 기준이다.
     .screen이 최대 440px로 묶여 있어 vw를 쓰면 데스크톱에서 글자만 프레임 밖으로 삐져나간다 */
  container-type: inline-size;
}

/* 헤더 — 언어 토글 하나만 우측 상단 */
.home-head {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: calc(12px + env(safe-area-inset-top)) 16px 2px;
}
/* 홈에서는 하단 툴바의 볼륨 버튼이 음소거를 맡으므로 전역 고정 🔊는 숨긴다.
   (#btn-bgm-mute는 DOM상 모든 섹션 뒤에 있어 일반 형제 선택자가 닿는다) */
#screen-home.active ~ .bgm-mute { display: none; }
/* ── 광택 블루 젤리 버튼 (홈 공통 스킨) ─────────────────────────────
   위→아래로 하늘색이 부드럽게 진해지는 단일 그라데이션 + 상단 화이트 글로스.
   테두리 선은 없고, 안쪽 상단 하이라이트 / 하단 음영과 바깥 하늘빛 헤일로로 볼륨을 만든다. */
.home-jelly,
.home-pill,
.home-play-btn {
  color: #fff;
  border: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.14) 18%, rgba(255, 255, 255, 0) 42%),
    linear-gradient(180deg, #8FD5F2 0%, #71C4EB 20%, #43A0DD 55%, #1F7AC9 88%, #2F89D5 100%);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.75),
    inset 0 0 0 1px rgba(255, 255, 255, 0.3),
    inset 0 -5px 10px rgba(8, 62, 118, 0.28),
    0 0 0 1.5px rgba(255, 255, 255, 0.5), /* 하늘색 배경 위에서 윤곽이 묻히지 않게 하는 화이트 헤어라인 */
    0 3px 8px rgba(20, 100, 170, 0.3),
    0 0 12px rgba(126, 200, 240, 0.65);
  text-shadow: 0 1px 2px rgba(9, 74, 145, 0.45);
  cursor: pointer;
}

/* 홈 화면 ranking 버튼*/
.home-pill {
  font-family: var(--font-display);
  font-size: 15px;
  border-radius: 999px;
  padding: 8px 15px;
}
.home-pill:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 6px rgba(8, 62, 118, 0.35),
    inset 0 0 0 1px rgba(255, 255, 255, 0.25),
    0 1px 4px rgba(20, 100, 170, 0.3);
}
/* 언어 토글 — 누르면 전환될 언어 코드가 표시된다 (js/main.js) */
.home-pill--lang { min-width: 44px; font-size: 13px; padding: 8px 10px; letter-spacing: 1px; }

/* 3!4! 타이틀 — 하프톤 배경이 이미지에 포함돼 있다. 부유 모션(ambDiagonal)은 유지 */
#home-logo {
  position: relative;
  z-index: 1;
  align-self: center;
  width: min(75%, 340px);
  max-height: 17dvh;
  height: auto;
  object-fit: contain;
  animation: ambDiagonal 1.5s ease-in-out infinite alternate;
}
@keyframes ambDiagonal {
  from { transform: translate(-0.5px, -4px); }
  to { transform: translate(1px, 4px); }
}

/* 로고 아래 영문 태그라인 — 로고 폭과 거의 같은 길이로 깔린다 */
.home-tagline {
  position: relative;
  z-index: 3;
  align-self: center;
  margin-top: 2px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(10px, 3cqw, 14px); /* 기존 대비 ~80%, 정수 px */
  letter-spacing: 1px;
  white-space: nowrap;
  color: #fff;
  text-shadow: 0 2px 6px rgba(2, 90, 160, 0.45);
}

/* "멤버 선택" — 캐러셀 섹션 라벨 */
.home-select-title {
  position: relative;
  z-index: 3;
  align-self: center;
  margin-top: 14px;
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(18px, 6cqw, 25px);
  letter-spacing: 0.5px;
  color: #fff;
  text-shadow: 0 2px 8px rgba(2, 70, 130, 0.5);
}

/* Play With MEMBER! — 젤리 스킨(.home-jelly 공통) + 큰 사이즈 */
.home-play-btn {
  position: relative;
  z-index: 3;
  align-self: center;
  margin-top: -8px;
  max-width: 90%;
  padding: 15px 26px;
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 1px;
  white-space: nowrap;
  border-radius: 16px;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.75),
    inset 0 0 0 1px rgba(255, 255, 255, 0.3),
    inset 0 -8px 14px rgba(8, 62, 118, 0.28),
    0 0 0 2px rgba(255, 255, 255, 0.55),
    0 5px 12px rgba(20, 100, 170, 0.32),
    0 0 18px rgba(126, 200, 240, 0.7);
  text-shadow: 0 2px 3px rgba(9, 74, 145, 0.45);
}
.home-play-btn:active {
  transform: scale(0.97);
  box-shadow:
    inset 0 3px 10px rgba(8, 62, 118, 0.38),
    inset 0 0 0 1px rgba(255, 255, 255, 0.25),
    0 2px 6px rgba(20, 100, 170, 0.3),
    0 0 12px rgba(126, 200, 240, 0.5);
}

/* 멤버 캐러셀 + 이름 — 한 덩어리. 양옆 카드가 가장자리에 살짝 걸쳐 보인다.
   카드는 5:4. 크기는 가로 폭에서만 나온다(뷰포트 높이에 묶으면 주소창 접힘에 비율이 널뛴다).
   --card-w를 wrap에 두는 이유는 좌우 화살표도 이 값을 참조하기 때문 */
.char-carousel-wrap {
  --card-w: min(78cqw, 320px);
  --card-h: calc(var(--card-w) * 4 / 5); /* 5:4 */
  position: relative;
  z-index: 2;
  width: 100%;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin-block: auto; /* 남는 세로 공간을 위아래로 균등 흡수 → 사진+이름이 가운데 걸린다 */
}
#char-carousel {
  position: relative;
  width: 100%;
  height: var(--card-h);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  touch-action: pan-x; /* 전역 manipulation 오버라이드 — 가로 스와이프 허용 */
  scrollbar-width: none;
  padding: 0 calc(50% - var(--card-w) / 2);
}
#char-carousel::-webkit-scrollbar { display: none; }

/* 좌우 화살표 — btn_arrow_left/right.png 원본 그대로(색 반전 없음), 카드 위에 얹힌다 */
.carousel-arrow {
  position: absolute;
  top: calc(var(--card-h) / 2); /* 이름 제외, 카드 세로 중심에 맞춘다 */
  left: calc(50% - var(--card-w, 320px) / 2 - 6px);
  z-index: 4;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  filter: drop-shadow(0 3px 8px rgba(2, 50, 100, 0.35));
}
.carousel-arrow--next { left: auto; right: calc(50% - var(--card-w, 320px) / 2 - 6px); transform: translate(50%, -50%); }
.carousel-arrow img { display: block; width: 100%; height: 100%; }
.carousel-arrow:active { transform: translate(-50%, -50%) scale(0.9); }
.carousel-arrow--next:active { transform: translate(50%, -50%) scale(0.9); }

/* 카드 — 실사 사진이 본체, 치비가 우하단 오버레이 */
.char-card {
  position: relative;
  flex: 0 0 var(--card-w);
  height: 100%; /* = --card-h. 폭에서만 나오므로 항상 5:4 */
  scroll-snap-align: center;
  overflow: hidden;
  padding: 0;
  /* 멤버 사진은 배경 투명 컷아웃 — 카드 바탕은 반투명 화이트만 (멤버별 색을 넣지 않는다) */
  background: rgba(255, 255, 255, 0.16);
  border: none;
  border-radius: 20px;
  cursor: pointer;
  transition: transform 0.25s, opacity 0.25s;
}
.char-card-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  pointer-events: none;
}
.char-card-chibi {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 34%; /* 기존 42%의 ~80% */
  height: auto;
  max-height: 50%; /* 기존 62%의 ~80% */
  object-fit: contain;
  object-position: bottom center;
  pointer-events: none;
  filter: drop-shadow(0 6px 12px rgba(2, 40, 80, 0.3));
}
.char-card:not(.selected) { transform: scale(0.9); opacity: 0.75; }
.char-card.selected:active { transform: scale(0.97); }
.char-card:not(.selected):active { transform: scale(0.87); }

/* 캐러셀 바로 아래 멤버 이름 — wrap 안에 묶여 사진과 같이 움직인다. sofachrome + 하드 드롭섀도 */
.member-name {
  position: relative;
  z-index: 3;
  align-self: center;
  flex-shrink: 0;
  margin-top: 16px; /* 카드와 이름 사이 +10px */
  font-family: var(--font-chrome);
  font-weight: 400;
  font-size: clamp(18px, 7cqw, 27px); /* 직전 대비 ~85%, 정수 px */
  letter-spacing: 1px;
  line-height: 1;
  color: #fff;
  text-shadow:
    3px 4px 0 rgba(10, 68, 122, 0.75),
    0 8px 18px rgba(2, 40, 80, 0.45);
  transition: opacity 0.32s ease;
}
.member-name.is-dissolving { opacity: 0; }

/* ── CTA 플레이트 버튼 ────────────────────────────────────────────
   public/images/btn_primary.png · btn_secondary.png 를 CSS로 옮긴 것.
   이미지를 그대로 쓰지 않는 이유는 다국어 라벨 길이에 맞춰 늘어나야 하기 때문.
   구성: 바깥 테두리(border) + 위→아래 그라데이션 본체 + 상단 절반 광택 + 하단 안쪽 음영 */
.home-cta {
  position: relative;
  z-index: 3;
  width: 100%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
}
.btn-plate {
  width: min(64%, 284px); /* ~20px 더 넓게 — 영문 라벨 한 줄 유지 */
  padding: 13px 20px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(17px, 5.2cqw, 22px);
  letter-spacing: 0.5px;
  line-height: 1.15;
  color: #fff;
  border-radius: 16px;
  cursor: pointer;
  text-shadow: 0 2px 3px rgba(9, 60, 110, 0.5);
  white-space: nowrap;
}
.btn-plate--primary {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.14) 22%, rgba(255, 255, 255, 0) 48%),
    linear-gradient(180deg, #93DAF6 0%, #6EC3EC 22%, #3D9EDC 58%, #1C77C7 90%, #2C86D3 100%);
  border: 3px solid #6FC4EC;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.8),
    inset 0 -7px 13px rgba(8, 62, 118, 0.3),
    0 4px 10px rgba(16, 90, 160, 0.35);
}
.btn-plate--secondary {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.12) 22%, rgba(255, 255, 255, 0) 48%),
    linear-gradient(180deg, #D3E5F1 0%, #B4D0E4 24%, #8AAECB 60%, #6B93B6 92%, #7BA0BF 100%);
  border: 3px solid #8CA6B8;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.8),
    inset 0 -7px 13px rgba(40, 70, 100, 0.26),
    0 4px 10px rgba(50, 80, 110, 0.28);
}
.btn-plate:active {
  transform: scale(0.97);
  box-shadow:
    inset 0 3px 9px rgba(8, 62, 118, 0.35),
    0 2px 5px rgba(20, 100, 170, 0.28);
}

/* 볼륨·설정 — 이미지 아이콘 그대로 */
.home-tools {
  position: relative;
  z-index: 3;
  width: 100%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  margin-top: 16px;
  margin-bottom: 10px;
}
.tool-btn {
  width: 56px;
  height: 56px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  filter: drop-shadow(0 3px 8px rgba(2, 50, 100, 0.3));
}
.tool-btn img { display: block; width: 100%; height: 100%; }
.tool-btn:active { transform: scale(0.92); }
/* 음소거 상태 — 아이콘을 흐리게 (bgm.js가 .muted를 토글) */
.tool-btn.muted { filter: grayscale(0.85) opacity(0.55); }

/* 푸터 — 2GATHR 브랜딩. 본문 가독성이 우선이라 디스플레이 서체가 아닌 기본 산세리프 */
.home-footer {
  position: relative;
  z-index: 3;
  width: 100%;
  flex-shrink: 0;
  background: #2C3238;
  color: #fff;
  text-align: center;
  padding: 13px 16px calc(11px + env(safe-area-inset-bottom));
  font-family: var(--font-footer);
}
.home-footer-link {
  display: block;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}
.home-footer-link:active {
  opacity: 0.85;
}
.home-footer-title { font-size: 15px; font-weight: 600; line-height: 1.35; }
.home-footer-copy { font-size: 11px; opacity: 0.85; margin-top: 3px; }
/* 법적 고지 링크·동의 문구 — YouTube API 서비스 정책 III.A.1/2 (본문은 policy.html) */
.home-footer-legal { margin-top: 6px; font-size: 11px; }
.home-footer-legal a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.home-footer-legal span { margin: 0 4px; opacity: 0.6; }
.home-footer-consent { font-size: 10px; opacity: 0.75; line-height: 1.4; margin-top: 3px; max-width: 340px; margin-inline: auto; }

/* 낮은 뷰포트(주소창 있는 모바일 초기 화면 등) — 세로 스크롤 없이 한 화면에 들어가게 압축 */
@media (max-height: 700px) {
  #home-logo { max-height: 13dvh; }
  .home-tagline { font-size: 10px; }
  .home-select-title { font-size: 18px; margin-top: 8px; margin-bottom: 6px; }
  .char-carousel-wrap { --card-w: min(72cqw, 268px); }
  .member-name { font-size: 20px; margin-top: 14px; }
  .home-cta { margin-top: 16px; gap: 8px; }
  .btn-plate { padding: 10px 18px; font-size: 19px; }
  .home-tools { margin-top: 10px; }
  .home-footer { padding-top: 10px; }
  .home-footer-title { font-size: 13px; }
  .home-footer-legal { font-size: 10px; margin-top: 4px; }
  .home-footer-consent { font-size: 9px; }
}

/* ---------- 설정 모달 (홈 ⚙) — 노트 배속 ---------- */
.settings-modal {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(4, 30, 50, 0.55);
  backdrop-filter: blur(2px);
}
.settings-card {
  width: min(100%, 340px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 22px 20px;
  text-align: center;
  background: linear-gradient(180deg, #EAF7FE 0%, #CFEAFA 100%);
  border: 3px solid #6FC4EC;
  border-radius: 20px;
  box-shadow: 0 12px 30px rgba(3, 50, 95, 0.4);
}
.settings-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 24px;
  color: var(--brand-deep);
}
.settings-label { font-family: var(--font-display); font-size: 17px; color: var(--ink); }
.settings-hint { font-family: var(--font-footer); font-size: 12px; line-height: 1.4; color: #4A6B7E; }
.settings-card .speed-btns { display: flex; gap: 8px; }
/* 모달은 터치 타깃을 HUD보다 크게 */
.settings-card .speed-btn { min-width: 54px; padding: 10px 12px; font-size: 20px; }
.settings-card .btn-plate { width: 100%; margin-top: 4px; }

/* ---------- 닉네임 입력 (결과 화면) · 박자 보정 (홈) ---------- */
.ready-label {
  align-self: flex-start;
  font-family: var(--font-bubble);
  font-size: 18px;
  color: var(--ink);
}
.ready-label small { font-size: 13px; color: #8a7f96; }
#nickname {
  width: 100%;
  padding: 13px 18px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink);
  background: #fff;
  border: none;
  border-radius: 999px;
  box-shadow: none;
  outline: none;
}
#nickname:focus { box-shadow: 0 0 0 2px color-mix(in srgb, var(--neon) 55%, transparent); }
#nickname.shake { animation: nickShake 0.45s ease; }
@keyframes nickShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(6px); }
}
.nickname-row .btn-plate.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
  pointer-events: none;
}

#cal-panel {
  width: 100%;
  text-align: center;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.7);
  border: 2px solid var(--ink);
  border-radius: 14px;
  padding: 14px;
}
#cal-pad {
  position: relative;
  width: 170px;
  height: 170px;
  margin: 14px auto;
  border: 3px solid var(--brand);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: #fff;
}
#cal-beat-circle {
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: var(--tint);
  transform: scale(0);
}
#cal-beat-circle.pulse { animation: calPulse 0.25s ease-out; }
@keyframes calPulse {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.2); opacity: 0; }
}
#cal-count { font-family: var(--font-display); font-size: 19px; color: var(--ink); z-index: 2; }
#cal-result { min-height: 20px; color: var(--ink); font-size: 13px; }

.vib-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #5A7484; }

/* 노트 속도(배속) 선택 — 배속↑ = 노트 낙하 빠름 = 화면상 노트 간격 넓음 */
.speed-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #5A7484;
}
.speed-btns { display: flex; gap: 5px; }
.speed-btn {
  min-width: 38px;
  padding: 5px 8px;
  font-size: 18px;
  font-family: inherit;
  border: 2px solid #CFE3EE;
  border-radius: 9px;
  background: #fff;
  color: #5A7484;
  cursor: pointer;
}
.speed-btn.selected {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
  font-weight: 700;
}

/* READY 대기: 회전 CD 모티프 스피너 (3.2) */
.cd-spinner { display: none; }
.cta-main.loading .cd-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: conic-gradient(var(--brand-light), var(--periwinkle), var(--tint), var(--brand-light));
  border: 2px solid #fff;
  position: relative;
  animation: spin 1.1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 로딩 (풀페이지 — 시작 탭 후 에셋 대기 시에만) ---------- */
.loading-inner {
  justify-content: center;
  min-height: 80dvh;
  gap: 18px;
  text-align: center;
}
.cd-spinner.big {
  display: inline-block;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: conic-gradient(var(--brand-light), var(--periwinkle), var(--tint), var(--brand-light));
  border: 3px solid #fff;
  box-shadow: 2px 2px 0 var(--ink);
  animation: spin 1.1s linear infinite;
}
#loading-msg { font-family: var(--font-bubble); font-size: 18px; color: #fff; }
.loading-inner .btn-plate { width: min(74%, 320px); }

/* ---------- 리듬게임 (3.3) ---------- */
/* 유튜브 플레이어: 가로폭 전체 16:9, 최소 200×200 보장, 오버레이 일절 금지 (9장 게이트) */
#player-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 200px;
  background: #000;
  flex-shrink: 0;
  position: relative;
  z-index: 20; /* 게임 요소가 절대 위로 올라오지 못하게 명시 */
}
#player-wrap iframe, #yt-player { width: 100%; height: 100%; display: block; }

#hud {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 12px;
  gap: 8px;
  flex-shrink: 0;
  border-bottom: 1px solid #0E2E40;
  font-family: var(--font-display);
}
#hud-score { color: var(--neon); font-size: 18px; }
.hud-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
/* 플레이 중 나가기 버튼 — HUD 좌측 끝, 탭 시 확인 다이얼로그. btn_back.png 원본 */
.hud-back {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}
.hud-back img {
  width: 100%;
  height: 100%;
  display: block;
}
.hud-back:active { transform: scale(0.92); }
.play-speed-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
/* HUD 배속 — 원형 네온 링. 설정 모달(.speed-btn)의 흰 필 스타일은 건드리지 않는다 */
.speed-btns--compact {
  gap: 6px;
  align-items: center;
}
#hud .speed-btn {
  width: 30px;
  height: 30px;
  min-width: 30px;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--neon) 30%, #1a4a66);
  background: transparent;
  color: color-mix(in srgb, #c8dce8 55%, transparent);
  font-family: var(--font-chrome);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
  box-shadow: 0 0 5px color-mix(in srgb, var(--neon) 18%, transparent);
}
#hud .speed-btn.selected {
  border-color: var(--neon);
  background: transparent;
  color: #fff;
  font-weight: 400;
  box-shadow:
    0 0 4px var(--neon),
    0 0 10px color-mix(in srgb, var(--neon) 75%, transparent);
  text-shadow: 0 0 6px var(--neon);
}
#hud .speed-btn:active { transform: scale(0.92); }

#lane-wrap {
  position: relative; flex: 1; min-height: 0; overflow: hidden;
  /* 배경은 .screen--game(bg_play)이 비쳐 보이게 — 레인만 따로 자르지 않는다 */
  /* 레인 안쪽(캔버스·판정 연출)의 리페인트가 바깥 배경 레이어까지 무효화하지 않도록 격리 */
  contain: paint;
}
/* 플레이 배경 위 대비용 딤 — 레인/노트/이펙트 시인성 확보. 캔버스(반투명 레인)는 이 위에 얹힌다 */
#lane-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(4, 18, 27, 0.55), rgba(4, 18, 27, 0.30) 45%, rgba(4, 18, 27, 0.60));
  pointer-events: none;
  z-index: 0;
}
#lane-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }

/* CRT 스캔라인 — 레인 영역에만. 유튜브 플레이어 위에는 절대 올리지 않음 */
.crt-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px, transparent 2px,
    rgba(0, 0, 0, 0.10) 3px, rgba(0, 0, 0, 0.10) 4px
  );
  z-index: 5;
}

/* 콤보 마일스톤 말풍선 — 기본(어드민 플레이테스트 등 char-dock 없을 때) */
#fx-sticker {
  position: absolute;
  left: 50%;
  top: 36%;
  z-index: 6;
  max-width: none;
  font-family: var(--font-bubble);
  font-size: 13px;
  line-height: 1.35;
  color: var(--ink);
  background: #fff;
  border: none;
  border-radius: 16px;
  padding: 8px 12px;
  text-align: center;
  white-space: nowrap; /* 한 줄 — 줄바꿈 없음 */
  transform: translateX(-50%) rotate(-3deg) scale(0);
  transform-origin: 50% 100%;
  pointer-events: none;
  box-shadow: 0 4px 14px rgba(4, 30, 50, 0.28);
}
#fx-sticker::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -7px;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: #fff;
  filter: drop-shadow(0 2px 2px rgba(4, 30, 50, 0.12));
}
/* 게임 — 캐릭터 머리 바로 위 (말하는 것처럼) */
#char-dock > #fx-sticker {
  top: auto;
  bottom: calc(100% + 4px);
}
#fx-sticker.show { animation: stickerPop 1.8s ease-out forwards; }
@keyframes stickerPop {
  0% { transform: translateX(-50%) rotate(-3deg) scale(0); opacity: 0; }
  8% { transform: translateX(-50%) rotate(3deg) scale(1.12); opacity: 1; }
  14% { transform: translateX(-50%) rotate(-2deg) scale(1); opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translateX(-50%) rotate(-2deg) scale(1); opacity: 0; }
}

#game-overlay {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 0 28px;
  background: rgba(4, 18, 27, 0.85);
}
#overlay-msg { color: #BFD9E6; font-size: 20px; text-align: center; }
#game-overlay .home-play-btn { margin-top: 0; }
#quit-confirm .home-play-btn {
  margin-top: 0;
  width: 100%;
  max-width: none;
}
/* 일시정지 오버레이의 '홈으로' — 텍스트 버튼(채움 없음). 어두운 오버레이 위라 밝은 글자 */
.overlay-home-btn {
  background: none;
  border: none;
  font-family: var(--font-bubble);
  font-size: 15px;
  color: #BFD9E6;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  padding: 4px 10px;
}
.overlay-home-btn:active { color: #fff; transform: translateY(1px); }

/* 나가기 확인 다이얼로그 — .modal 재사용, 딤 배경 위 중앙 카드 */
.quit-confirm {
  justify-content: center;
  align-items: center;
  background: rgba(4, 18, 27, 0.78);
  z-index: 50; /* 리더보드 모달(40)보다 위 */
}
.quit-inner {
  width: calc(100% - 48px);
  padding: 24px;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 20px;
  box-shadow: 4px 4px 0 var(--ink);
}
.quit-msg {
  font-family: var(--font-bubble);
  font-size: 20px;
  color: var(--ink);
  text-align: center;
  line-height: 1.45;
}
.quit-msg small { font-size: 14px; color: #7A93A1; }
.quit-inner .overlay-home-btn { color: #7A93A1; } /* 흰 카드 위라 딥톤으로 */

/* 판정 연출 오버레이 — 레인 중앙 (PIU 레퍼런스 스타일).
   콤보는 레인 상단, 판정 텍스트는 판정선 근처. 플레이어 영역 침범 없음 */
#fx-combo {
  position: absolute;
  top: 11%;
  left: 0;
  right: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  pointer-events: none;
  opacity: 0;
  font-family: var(--font-display);
}
#fx-combo.show { opacity: 1; }
/* COMBO 워드마크 — score_combo.png */
#fx-combo .combo-label {
  width: auto;
  height: 17px; /* 20px → 85% */
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--char-accent) 80%, transparent));
}
/* 콤보 숫자 — score_num_{0-9}.png 를 자릿수만큼 나열 (game.js updateCombo) */
#fx-combo-num {
  display: flex;
  align-items: flex-end;
  gap: 1px;
  height: 61px; /* 72px → 85% */
}
#fx-combo-num .combo-digit {
  height: 100%;
  width: auto;
}
#fx-combo.pulse #fx-combo-num { animation: comboPulse 0.16s ease-out; }
@keyframes comboPulse { 50% { transform: scale(1.15); } }
#fx-combo.combo-break { animation: comboBreak 0.12s steps(2, end) forwards; }
@keyframes comboBreak {
  0% { transform: skewX(18deg) translateX(3px); opacity: 1; }
  50% { transform: skewX(-22deg) translateX(-6px); opacity: 0.6; }
  100% { transform: none; opacity: 0; }
}

/* 판정 연출 — score_{perfect|good|bad|miss}.png (index.html에 4장 상주, 클래스로 스위칭).
   애니메이션은 컨테이너 단위라 텍스트일 때와 동일하게 적용된다 */
#fx-judge {
  position: absolute;
  top: 63%;
  left: 0;
  right: 0;
  z-index: 6;
  display: flex;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.6);
}
#fx-judge .ji {
  display: none;
  width: auto;
  height: 34px; /* 40px → 85% */
  max-width: 82%;
  object-fit: contain;
}
#fx-judge.j-perfect .ji-perfect,
#fx-judge.j-good .ji-good,
#fx-judge.j-bad .ji-bad,
#fx-judge.j-miss .ji-miss { display: block; }
#fx-judge.show { animation: judgePop 0.3s ease-out forwards; }
@keyframes judgePop {
  0% { opacity: 0; transform: scale(0.6); }
  55% { opacity: 1; transform: scale(1.1); }
  100% { opacity: 1; transform: scale(1); }
}
/* PERFECT만 살짝 더 크게. 글로우는 아트에 들어있어 filter를 걸지 않는다 */
#fx-judge.j-perfect .ji-perfect { height: 39px; } /* 46px → 85% */
#fx-judge.j-bad { animation: judgePop 0.3s ease-out forwards, badShake 0.3s linear; }
@keyframes badShake {
  25% { translate: -4px 0; }
  50% { translate: 4px 0; }
  75% { translate: -4px 0; }
}
#fx-judge.j-miss { animation: missSink 0.4s ease-in forwards; }
@keyframes missSink {
  0% { opacity: 1; transform: scale(1) translateY(0); }
  100% { opacity: 0; transform: scale(0.95) translateY(10px); }
}

/* 점수 플로트 — 비표시 (HUD 점수만 사용) */
#fx-float {
  display: none;
}

/* 구간 배너 (6.4) — 콤보 아래 레인 중단 */
#fx-banner {
  position: absolute;
  top: 32%;
  left: 0;
  right: 0;
  z-index: 6;
  text-align: center;
  font-family: var(--font-bubble);
  font-size: 27px;
  color: var(--gold);
  text-shadow: 0 0 10px rgba(255, 197, 61, 0.5);
  opacity: 0;
  pointer-events: none;
}
#fx-banner.show { animation: bannerIn 0.5s ease-out forwards; }
@keyframes bannerIn {
  0% { opacity: 0; transform: translateY(8px); }
  20% { opacity: 1; transform: translateY(0); }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

/* ── 게임 플레이 화면(#screen-play) 전용: 탭 패드 = 리셉터 = 노트 착지점 (통합) ──
   레인 하단에 오버레이. 좌우 padding 0 유지 필수(laneX = w*(lane+0.5)/5 정렬).
   #lane-canvas(z1)·.crt-overlay(z5) 위에 올려 버튼 아트가 스캔라인에 가리지 않게 한다.
   admin 플레이테스트(#game-stage)는 아래 별도 규칙을 쓰므로 영향받지 않는다 */
#screen-play #pad-wrap {
  position: absolute;
  left: 0;
  right: 0;
  /* 안드로이드 하단 바(제스처/버튼)와 충돌 방지 — 살짝 위로 띄운다 */
  bottom: calc(20px + env(safe-area-inset-bottom));
  z-index: 7;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
}
#screen-play .pad {
  position: relative;
  /* svh = 주소창 상태와 무관한 고정 뷰포트 단위 — 모바일 크롬에서 URL바가 숨고 나타나도
     높이가 널뛰지 않는다. clamp로 기기 크기에 연속 대응 (구 max-height:620px 2단 점프 대체) */
  height: 74px; /* svh 미지원 브라우저 폴백 */
  height: clamp(60px, 11svh, 74px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  border: 2px solid rgba(95, 201, 242, 0.35);
  border-radius: 14px;
  /* 반투명 글래스 — 뒤 캔버스의 낙하 노트가 버튼에 "들어와" 착지하듯 비친다 */
  background-color: rgba(11, 36, 51, 0.42);
  /* 버튼 얼굴 = game_assets 화살표 아트 (outline). nth-child로 레인별 아트 지정 */
  background-repeat: no-repeat;
  background-position: center 44%;
  background-size: 62% auto;
  cursor: pointer;
  transition: transform 0.06s ease, box-shadow 0.09s ease, border-color 0.09s ease;
}
/* 기본 아이들 글로우 — 버튼이 멤버 색으로 은은히 숨쉬듯 번쩍인다.
   ::after 별도 레이어라 탭 시 .pad 자체의 강한 글로우(box-shadow)와 충돌하지 않는다. */
#screen-play .pad::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 14px;
  pointer-events: none;
  animation: padBreath 1.7s ease-in-out infinite;
}
@keyframes padBreath {
  0%, 100% { box-shadow: 0 0 5px rgba(95, 201, 242, 0.14); }
  50%      { box-shadow: 0 0 16px color-mix(in srgb, var(--char-accent) 50%, transparent); }
}
#screen-play #pad-wrap .pad:nth-child(1) { background-image: url('public/images/game_assets/arrow-ld-outline_default.png'); }
#screen-play #pad-wrap .pad:nth-child(2) { background-image: url('public/images/game_assets/arrow-lu-outline_default.png'); }
#screen-play #pad-wrap .pad:nth-child(3) { background-image: url('public/images/game_assets/arrow-c-outline_default.png'); }
#screen-play #pad-wrap .pad:nth-child(4) { background-image: url('public/images/game_assets/arrow-ru-outline_default.png'); }
#screen-play #pad-wrap .pad:nth-child(5) { background-image: url('public/images/game_assets/arrow-rd-outline_default.png'); }
/* 눌림: 아트를 pushed로 스왑 + 강한 글로우 + 살짝 눌리는 손맛.
   탭마다 다시 그려지는 규칙이라 페인트 비용을 아낀다:
   filter는 요소를 별도 래스터 패스로 밀어내므로 쓰지 않고, 밝기는 배경색 비율로 흡수했다.
   그림자도 3중 → 2중 (반경 큰 블러가 가장 비싸다) */
#screen-play .pad:active, #screen-play .pad.hit {
  border-color: var(--char-accent);
  background-color: color-mix(in srgb, var(--char-accent) 48%, rgba(11, 36, 51, 0.5));
  box-shadow:
    0 0 30px color-mix(in srgb, var(--char-accent) 95%, transparent),
    inset 0 0 22px color-mix(in srgb, var(--char-accent) 62%, transparent);
  transform: translateY(2px) scale(0.97);
}
#screen-play #pad-wrap .pad:nth-child(1):active, #screen-play #pad-wrap .pad:nth-child(1).hit { background-image: url('public/images/game_assets/arrow-ld-outline_pushed.png'); }
#screen-play #pad-wrap .pad:nth-child(2):active, #screen-play #pad-wrap .pad:nth-child(2).hit { background-image: url('public/images/game_assets/arrow-lu-outline_pushed.png'); }
#screen-play #pad-wrap .pad:nth-child(3):active, #screen-play #pad-wrap .pad:nth-child(3).hit { background-image: url('public/images/game_assets/arrow-c-outline_pushed.png'); }
#screen-play #pad-wrap .pad:nth-child(4):active, #screen-play #pad-wrap .pad:nth-child(4).hit { background-image: url('public/images/game_assets/arrow-ru-outline_pushed.png'); }
#screen-play #pad-wrap .pad:nth-child(5):active, #screen-play #pad-wrap .pad:nth-child(5).hit { background-image: url('public/images/game_assets/arrow-rd-outline_pushed.png'); }
/* 키캡 힌트 — 데스크톱(호버+정밀 포인터)에서만 노출. 아트는 유지하고 하단 코너에 작은 배지로 */
#screen-play .pad .pad-key {
  display: none;
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1;
  color: #cdeefb;
  background: rgba(4, 18, 27, 0.72);
  border: 1px solid rgba(95, 201, 242, 0.4);
  border-radius: 6px;
  padding: 3px 6px;
  margin-bottom: 5px;
}
@media (hover: hover) and (pointer: fine) {
  #screen-play .pad .pad-key { display: block; }
}
/* 낮은 뷰포트 — 레인 영역 확보를 위해 패드만 살짝 축소 */
/* (구) max-height:620px에서 62px로 점프하던 티어는 위 clamp(svh)로 대체 — 모바일 크롬
   주소창 등장/숨김에 따라 패드 높이가 74↔62px로 널뛰던 문제 해결 */

/* ── admin 플레이테스트(#game-stage) 패드 — 기존 인플로우 버튼 유지 (회귀 방지) ── */
#game-stage #pad-wrap {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  padding: 4px 0;
}
#game-stage .pad {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  border: 2px solid #1E4258;
  border-radius: 12px;
  background: #0B2433;
  color: #7FA8BD;
  cursor: pointer;
}
#game-stage .pad:active, #game-stage .pad.hit {
  border-color: var(--char-accent);
  color: var(--char-accent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--char-accent) 60%, transparent);
}
/* 캐릭터 독 — 레인 정중앙. 머리 위 말풍선(#fx-sticker)이 캐릭터가 말하는 것처럼 붙음.
   z-index 4 < 연출 오버레이 6 — 콤보/판정 텍스트가 위에. pointer-events 없음 */
#char-dock {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translateX(-50%);
  z-index: 6; /* 머리 위 말풍선이 레인 위에 보이도록 */
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
  overflow: visible;
  opacity: 1;
}
#char-dock::before { /* 멤버 액센트 오라 */
  content: '';
  position: absolute;
  bottom: -4px;
  width: 76px;
  height: 30px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--char-accent) 40%, transparent) 0%, transparent 70%);
}
#char-dock img {
  position: relative;
  height: 100px; /* 기존 50px의 2배 — 인게임 캐릭터 크게 */
  width: auto;
  transform-origin: 50% 100%;
}
#char-dock.react-perfect img { animation: charBounce 0.28s ease-out; }
#char-dock.react-miss img { animation: charShake 0.32s linear; }
#char-dock.fever img { animation: charFever 0.5s ease-in-out infinite alternate; }
@keyframes charBounce {
  0% { transform: scale(1); }
  40% { transform: scale(1.14) translateY(-5px); }
  100% { transform: scale(1); }
}
@keyframes charShake {
  0%, 100% { transform: translateX(0); filter: grayscale(0.6); }
  25% { transform: translateX(-4px) rotate(-4deg); }
  75% { transform: translateX(4px) rotate(4deg); }
}
@keyframes charFever {
  from { transform: translateY(0) rotate(-2deg); }
  to { transform: translateY(-4px) rotate(2deg); }
}

#debug-hud {
  position: fixed;
  top: 4px;
  left: 4px;
  z-index: 30;
  background: rgba(0, 0, 0, 0.7);
  color: #0f0;
  font-size: 11px;
  font-family: var(--font-display);
  padding: 4px 8px;
  white-space: pre;
  pointer-events: none;
}

/* ---------- 점수 (3.4) — 홈 톤앤매너 (bg_home + 화이트 글로우 카드) ---------- */
/* 요소가 많아 세로가 가장 긴 화면 — dvh 기반 clamp로 화면 높이에 맞춰 자동 압축 */
.result-inner {
  justify-content: flex-start;
  gap: clamp(16px, 1.5dvh, 20px);
  padding-top: 36px; /* RESULT 헤더 위 여백 */
}
.result-title {
  color: #fff;
  text-shadow: 0 2px 10px rgba(2, 136, 253, 0.5), 0 0 22px rgba(255, 255, 255, 0.6);
}

/* 성적 카드 — 프로스티드 글래스 (멤버 바·랭킹 카드와 동일 톤). PERFECT만 neon */
.result-card.receipt {
  position: relative;
  width: 100%;
  max-width: 320px;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding: 20px 22px 22px;
  background: rgba(255, 255, 255, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 20px;
  color: #fff;
  font-family: var(--font-display);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 10px 28px rgba(4, 30, 50, 0.3);
  backdrop-filter: blur(10px);
}
/* 합계(TOTAL) 라벨 */
.result-score-label {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.65);
  flex-shrink: 0;
}

.grade-stamp {
  flex-shrink: 0;
  width: clamp(88px, 15dvh, 128px);
  height: clamp(88px, 15dvh, 128px);
  border: none;
  border-radius: 0;
  background: transparent center / contain no-repeat;
  display: block;
  transform: scale(0);
}
.grade-stamp.stamped { animation: stampIn 0.35s cubic-bezier(0.2, 1.6, 0.4, 1) forwards; }
@keyframes stampIn {
  0% { transform: scale(1.8); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
/* 등급 도장 — 중앙 히어로 + 소프트 블루 글로우 (정면) */
.receipt .grade-stamp {
  align-self: center;
  width: clamp(96px, 16dvh, 132px);
  height: clamp(96px, 16dvh, 132px);
  margin: 2px 0 4px;
  filter: drop-shadow(0 4px 14px rgba(2, 136, 253, 0.45));
}

/* 합계 줄 — 글래스 디바이더 위 TOTAL 히어로 */
.receipt-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
  min-width: 0;
}
#result-score {
  font-family: var(--font-display);
  font-size: clamp(18px, 3.6dvh, 26px); /* 7자리도 카드 안쪽에 맞춤 */
  color: #fff;
  line-height: 1;
  min-width: 0;
  flex: 1 1 auto;
  max-width: none;
  overflow: hidden;
  white-space: nowrap;
  text-align: right;
  text-shadow:
    0 2px 10px rgba(2, 136, 253, 0.55),
    0 0 18px rgba(255, 255, 255, 0.55);
  filter: drop-shadow(0 1px 3px rgba(4, 30, 50, 0.35));
}
#result-badge {
  align-self: center;
  font-family: var(--font-bubble);
  font-size: 14px;
  color: #fff;
  border-radius: 999px;
  padding: 5px 14px;
  border: 2px solid #6FC4EC;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.12) 22%, rgba(255, 255, 255, 0) 48%),
    linear-gradient(180deg, #93DAF6 0%, #6EC3EC 22%, #3D9EDC 58%, #1C77C7 90%, #2C86D3 100%);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.75),
    0 3px 8px rgba(16, 90, 160, 0.32);
  text-shadow: 0 1px 2px rgba(9, 60, 110, 0.4);
  rotate: -2deg;
  animation: springIn 0.3s 1.3s backwards;
}

/* 이름 태그 — 멤버 공통 primary 플레이트(액센트 색 통일) */
.member-tag {
  position: absolute;
  top: -14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-chrome);
  font-size: 14px;
  letter-spacing: 1px;
  line-height: 1;
  color: #fff;
  border-radius: 999px;
  padding: 7px 14px;
  border: 2px solid #6FC4EC;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.14) 22%, rgba(255, 255, 255, 0) 48%),
    linear-gradient(180deg, #93DAF6 0%, #6EC3EC 22%, #3D9EDC 58%, #1C77C7 90%, #2C86D3 100%);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.8),
    inset 0 -5px 10px rgba(8, 62, 118, 0.28),
    0 3px 8px rgba(16, 90, 160, 0.3);
  text-shadow: 0 1px 2px rgba(9, 60, 110, 0.45);
}
.member-msg {
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 1.3;
  color: #fff;
  flex: 1;
  min-width: 0;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 함께한 멤버 바 — 성적 카드와 같은 반투명 흰 라운드.
   상단 패딩을 이름 태그 높이만큼 확보해 2줄 메시지가 태그와 겹치지 않게 한다 */
.result-member-bar {
  position: relative;
  width: 100%;
  min-height: 74px;
  flex-shrink: 0;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 8px 24px rgba(4, 30, 50, 0.22);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  padding: 30px 76px 12px 16px;
  margin-top: 18px;
  margin-bottom: 0;
  animation: springIn 0.15s 0.6s backwards;
}
.result-member-bar .member-msg { font-size: 15px; line-height: 1.35; }
.result-member-bar .member-tag {
  left: 14px;
  top: -12px;
}
/* 멤버 사진 — 바 오른쪽 풀하이트, 상하 패딩 없음 */
#result-char-img {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: auto;
  height: 100%;
  border-radius: 0 20px 20px 0;
  object-fit: cover;
  object-position: top center;
}

#result-rows {
  list-style: none;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#result-rows li {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 2px;
  font-size: 14px;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  opacity: 0;
}
#result-rows li span { font-family: var(--font-display); flex: 1; letter-spacing: 1px; }
#result-rows li b { font-family: var(--font-display); font-weight: normal; font-size: 15px; color: #fff; }
/* PERFECT 행만 네온 토큰(--neon / #02F9FE) */
#result-rows li.is-perfect,
#result-rows li.is-perfect span,
#result-rows li.is-perfect b { color: var(--neon); }
#result-rows li:last-child { border-bottom: none; } /* TOTAL 상단선과 이중 구분선 방지 */
#result-rows.animate li { animation: springIn 0.3s both; }
#result-rows.animate li:nth-child(1) { animation-delay: 1.25s; }
#result-rows.animate li:nth-child(2) { animation-delay: 1.33s; }
#result-rows.animate li:nth-child(3) { animation-delay: 1.41s; }
#result-rows.animate li:nth-child(4) { animation-delay: 1.49s; }
#result-rows.animate li:nth-child(5) { animation-delay: 1.57s; }

/* 닉네임 입력 + [랭킹 등록] — 한 줄. 등록은 홈 primary 플레이트 */
.nickname-row {
  display: flex;
  width: 100%;
  gap: 8px;
  align-items: stretch;
  margin-top: 18px; /* 멤버 바 위 여백 추가 */
}
.nickname-row #nickname { flex: 1; min-width: 0; }
.nickname-row .btn-plate {
  width: auto;
  flex-shrink: 0;
  padding: 0 18px;
  font-size: 16px;
  border-radius: 999px;
}

/* 재시도·홈·공유 — 이미지 아이콘 가로 한 줄 */
.result-nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 28px;
  margin-top: 4px;
}
.result-icon-btn {
  width: 51px; /* 64px의 ~80% */
  height: 51px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  filter: drop-shadow(0 3px 8px rgba(2, 50, 100, 0.28));
}
.result-icon-btn img { display: block; width: 100%; height: 100%; }
.result-icon-btn:active { transform: scale(0.92); }
/* 재시도 — primary 플레이트, 좌우 아이콘과 동일 높이 */
.result-retry-btn {
  width: auto;
  flex-shrink: 0;
  height: 51px;
  min-height: 51px;
  padding: 0 18px;
  font-size: 15px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* 결과 하단 — 홈과 동일한 secondary 랭킹 버튼 */
.result-board-btn {
  align-self: center;
  margin-top: 10px;
}
.result-inner .field-error {
  width: 100%;
  margin-top: 4px;
  padding: 6px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.62);
  text-align: center;
  line-height: 1.35;
}
.result-inner .field-error:empty { display: none; }

/* 낮은 뷰포트 — clamp 압축만으로 부족한 잔여 요소 추가 축소.
   상하단 여백은 어떤 티어에서도 16px 아래로 줄이지 않는다 (요소 잘림 방지 최소기준) */
@media (max-height: 700px) {
  .result-member-bar { min-height: 62px; padding: 28px 68px 10px 14px; }
  #result-char-img { height: 100%; top: 0; bottom: 0; width: auto; }
  .result-member-bar .member-msg { font-size: 14px; }
  .result-icon-btn { width: 43px; height: 43px; }
  .result-retry-btn { height: 43px; min-height: 43px; font-size: 14px; padding: 0 14px; }
  .result-nav { gap: 20px; }
}
@media (max-height: 600px) {
  .result-inner { padding: 28px 24px calc(16px + env(safe-area-inset-bottom)); }
  .result-inner .screen-title { font-size: 22px; }
  .grade-stamp,
  .receipt .grade-stamp { width: 84px; height: 84px; }
  #result-rows li { font-size: 13px; }
  #nickname { padding: 9px 16px; }
  .result-icon-btn { width: 38px; height: 38px; }
  .result-retry-btn { height: 38px; min-height: 38px; font-size: 13px; padding: 0 12px; }
}

/* ---------- 리더보드 (3.5) — 홈 톤앤매너 (screen--sky 위) ---------- */
.board-inner { gap: 10px; padding-bottom: 120px; }
.board-head {
  width: 100%;
  display: grid;
  grid-template-columns: 56px 1fr 56px;
  align-items: center;
}
.board-head-spacer { width: 56px; height: 56px; }
/* 닫기 — btn_close 56px. 타이틀은 가운데 유지 */
.board-head-btn {
  align-self: center;
  justify-self: end;
  width: 56px;
  height: 56px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  filter: drop-shadow(0 2px 6px rgba(2, 50, 100, 0.28));
}
.board-head-btn img { display: block; width: 100%; height: 100%; }
.board-head-btn:active { transform: scale(0.92); }
.board-head .screen-title {
  justify-self: center;
  color: #fff;
  text-shadow: 0 2px 10px rgba(2, 136, 253, 0.5), 0 0 22px rgba(255, 255, 255, 0.6);
}
/* 이벤트/누적 탭(.board-tabs, .board-tab)·기간(.board-period)·곡명(.board-song)·새로고침은
   누적 단일 랭킹 UX로 정리하면서 제거. 필요 시 git 히스토리에서 복원 */

#board-list { list-style: none; width: 100%; display: flex; flex-direction: column; gap: 8px; }
/* 랭킹 카드 — 반투명 필. 1~3위는 왼쪽 풀하이트 네온 원, 4위+는 흰 원+파란 숫자 */
.board-row {
  --row-h: 50px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--row-h);
  padding: 0 18px 0 0; /* 왼쪽은 순위 원이 붙도록 패딩 없음 */
  margin: 0;
  background: rgba(255, 255, 255, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  font-size: 15px;
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
  overflow: hidden; /* 왼쪽 원이 필 곡선에 맞게 */
}
.board-row.is-mine {
  border-color: var(--neon);
  box-shadow:
    0 0 0 1.5px var(--neon),
    0 0 14px color-mix(in srgb, var(--neon) 45%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.board-row .my-badge {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 10px;
  line-height: 1;
  color: #fff;
  background: var(--brand); /* 키컬러 블루 — 멤버 액센트(보라 등) 쓰지 않음 */
  border-radius: 999px;
  padding: 3px 7px;
  align-self: center;
}
.board-row.just-in { animation: springIn 0.35s; }
.board-row .rank {
  flex-shrink: 0;
  width: var(--row-h);
  height: var(--row-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--neon);
  color: #fff;
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1;
  box-shadow: none;
}
/* 1~3위 숫자 — 네온 원 위 가독성용 그림자 */
.board-row.is-top .rank {
  text-shadow:
    0 1px 2px rgba(4, 30, 50, 0.55),
    0 0 8px rgba(4, 30, 50, 0.35);
}
/* 4위부터 — 흰 원형 + 브랜드 블루 숫자 (가독성) */
.board-row.is-rest .rank {
  background: #fff;
  color: var(--brand);
  box-shadow: none;
  font-size: 16px;
}
.board-row .name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
}
.board-row .pts {
  flex-shrink: 0;
  font-family: var(--font-display);
  color: #fff;
}
.board-empty { padding: 28px 0; text-align: center; color: #fff; font-size: 14px; list-style: none; }

/* 내 기록 — 하단 플로팅 필(시안). 좌: 라벨+순위(+닉네임) / 우: 점수. 정보는 기존과 동일 */
.board-me {
  position: fixed;
  bottom: calc(14px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  width: min(calc(100% - 32px), 408px);
  z-index: 15;
}
.board-me-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(8, 62, 90, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 6px 18px rgba(4, 30, 50, 0.28);
  backdrop-filter: blur(8px);
  color: #fff;
  font-family: var(--font-display);
}
.board-me-left {
  display: flex;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
  flex: 1;
}
.board-me-label {
  flex-shrink: 0;
  font-size: 13px;
  letter-spacing: 0.3px;
  color: #fff;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
.board-me .rank {
  flex-shrink: 0;
  width: auto;
  font-size: 15px;
  color: #fff;
}
.board-me .rank b {
  font-weight: inherit;
  color: var(--neon);
  text-shadow: 0 0 8px color-mix(in srgb, var(--neon) 55%, transparent);
}
.board-me .name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.72);
}
.board-me .pts {
  flex-shrink: 0;
  font-size: 16px;
  color: #fff;
  letter-spacing: 0.3px;
}
@media (max-width: 380px) {
  .board-me-pill { padding: 9px 12px; gap: 6px; }
  .board-me-left { gap: 4px; }
  .board-me-label { font-size: 11px; }
  .board-me .rank { font-size: 13px; }
  .board-me .name { font-size: 11px; }
  .board-me .pts { font-size: 14px; }
}
/* ---------- 공유이미지 (3.6) — 결과 화면과 같은 sky 톤 + 유리 버튼 베리에이션 ---------- */
.share-inner { gap: 12px; }
/* 프리뷰 — sky 위 유리 카드 (리더보드 내 기록 카드와 동일 무드) */
#share-preview {
  width: 100%;
  display: flex;
  justify-content: center;
  background: rgba(255, 255, 255, 0.55);
  border: 2px solid #fff;
  border-radius: 16px;
  padding: 10px;
  min-height: 200px;
  align-items: center;
  box-shadow: 0 6px 18px rgba(4, 30, 50, 0.18);
}
/* 스토리·피드 — 프레임이 캔버스를 감싸 좌우 빈 여백을 줄인다 */
#share-preview.fmt-story,
#share-preview.fmt-feed {
  width: fit-content;
  max-width: 100%;
  align-self: center;
  min-height: 0;
  padding: 8px;
}
#share-preview canvas {
  max-width: 100%;
  border: none;
  border-radius: 10px;
  filter: drop-shadow(0 4px 12px rgba(4, 30, 50, 0.28));
}
/* 9:16 — 더 넓게(높이 한도↑) 미리보기 */
#share-preview.fmt-story canvas {
  width: min(100%, calc(62dvh * 9 / 16));
  height: auto;
  max-height: 62dvh;
}
/* 1:1 — 스토리와 같은 프레임, 정사각 */
#share-preview.fmt-feed canvas {
  width: min(100%, 48dvh);
  height: auto;
  max-height: 48dvh;
}
.share-loading { color: #5a7a8c; font-size: 14px; }
.share-formats { display: flex; gap: 8px; justify-content: center; }
/* 포맷 토글 — 비선택 btn_gray / 선택 btn_white */
.format-btn {
  padding: 9px 18px;
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.5px;
  color: #3a4a58;
  background: linear-gradient(180deg, #d8dee4 0%, #b4bcc6 100%);
  border: none;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(4, 30, 50, 0.14);
  cursor: pointer;
}
.format-btn.selected {
  color: #1a3a4e;
  background: linear-gradient(180deg, #ffffff 0%, #e8eef3 100%);
  box-shadow: 0 2px 6px rgba(4, 30, 50, 0.12);
}
.format-btn:active { transform: scale(0.95); }
/* 공유 CTA — 두 버튼 동일 폭, 텍스트가 버튼 밖으로 나가지 않게 */
.share-cta {
  align-self: stretch;
  width: 100%;
  max-width: 100%;
  text-align: center;
}
#share-toast { color: #fff; }

/* ---------- 사운드(BGM+SFX) 음소거 토글 (js/bgm.js) ---------- */
/* 440px 칼럼 우상단에 고정 — z 35: 화면(10) 위, 보드 모달(40) 아래.
   결과/공유에서 btn_volume.png 이미지 버튼으로 노출. 홈은 하단 툴바가 담당 */
.bgm-mute {
  position: fixed;
  top: calc(14px + env(safe-area-inset-top));
  right: calc((100% - min(100%, 440px)) / 2 + 16px);
  z-index: 35;
  width: 56px;
  height: 56px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
  cursor: pointer;
  filter: drop-shadow(0 2px 6px rgba(2, 50, 100, 0.3));
}
.bgm-mute img { display: block; width: 100%; height: 100%; }
.bgm-mute:active { transform: scale(0.92); }
.bgm-mute.muted { filter: grayscale(0.85) opacity(0.55); }

/* ---------- 첫 진입 사운드 프롬프트 (소형 배너, 화면 비침범) — index.html #sound-prompt ---------- */
.sound-prompt {
  position: fixed;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  opacity: 0.8; /* 배너 공통 투명도 20% — 사운드 프롬프트·제출 결과 알림 등 컴포넌트 단위 적용 */
  z-index: 45; /* 모달(40)보다 위, 나가기 확인(50)보다 아래 */
  width: min(calc(100% - 28px), 412px);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 16px;
  box-shadow: 3px 3px 0 var(--ink);
  animation: glitchIn 0.28s ease-out;
}
.sound-prompt.hidden { display: none; }
.sound-prompt-icon { font-size: 20px; line-height: 1; flex: 0 0 auto; }
.sound-prompt-msg {
  flex: 1 1 auto;
  font-family: var(--font-bubble);
  font-size: 14px;
  line-height: 1.35;
  color: var(--ink);
}
.sound-prompt-btn {
  flex: 0 0 auto;
  padding: 8px 14px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--char-accent);
  color: #fff;
  font-family: var(--font-bubble);
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer;
}
.sound-prompt-btn:active { transform: translateY(1px); }
.sound-prompt-close {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: #7A93A1;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
/* 제출 결과 알림 — 테두리·그림자 없음. 내 기록 필(.board-me) 바로 위에 띄움 */
#submit-outcome {
  border: none;
  box-shadow: none;
  /* board-me bottom(14) + pill(~48) + 간격(10) */
  bottom: calc(72px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.92);
  border-radius: 999px;
}

/* ---------- 접근성 (2.4) ---------- */
@media (prefers-reduced-motion: reduce) {
  .sticker-idle, .blink-soft { animation: none; }
  .glitch-in { animation: none; }
  /* 화면·모달 전환 애니메이션 제거 — 로직(setTimeout)은 그대로 동작한다 */
  .screen.active, .screen.leaving, .modal.open, .modal.closing { animation: none; }
  #screen-play .pad::after { animation: none; } /* 아이들 글로우 정지 */
  #fx-combo.combo-break { animation: none; opacity: 0; }
  #fx-judge.j-bad { animation: judgePop 0.3s ease-out forwards; }
  .char-card { animation: none; transition: none; }
  #char-dock img { animation: none !important; }
  /* 홈 로고 부유 모션 정지 */
  #home-logo { animation: none; }
}