/* ============================================================
   Paper Trial — 서류를 베어라 · style.css (v5 · 2026-09-06 전면 개편)
   레이어: #bg(0) < #stage(1) < .vignette(2) < fx 오버레이(3~6) < #ui HUD(10)
           < 토스트·콤보(12) < 오버레이 패널(20~30) < 사운드 버튼(25) < 이스터에그(9999)
   ============================================================ */

@font-face {
  font-family: 'Playfair';
  src: url('assets/fonts/playfair-var.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Playfair';
  src: url('assets/fonts/playfair-900-italic.woff2') format('woff2');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --bg-0: #0a1530;
  --bg-1: #14213d;
  --ink: #f4efe0;
  --ink-dim: #8a93b8;
  --accent: #d63a3a;
  --accent-2: #d4a84a;
  --gold: #d4a84a;
  --gold-2: #f3d78e;
  --good: #6affb4;
  --paper: #f4ecd6;
  --ice: #9ddffb;
  --pink: #ff9ce6;
  --font-display: 'Playfair', Georgia, 'Times New Roman', 'Noto Serif KR', 'Nanum Myeongjo', serif;
  --font-ui: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, 'Noto Sans KR', 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; padding: 0;
  width: 100%; height: 100%;
  background: var(--bg-0);
  color: var(--ink);
  font-family: var(--font-ui);
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  word-break: keep-all; /* 한글 어절 단위 줄바꿈 — 2026-07-19 영구 룰 */
}
button { font-family: inherit; }

/* ---------- 배경 · 캔버스 · 비네팅 ---------- */
#bg {
  position: fixed; inset: 0; z-index: 0;
  background-color: var(--bg-0);
  background-image: url('assets/bg-portrait.jpg');
  background-size: cover; background-position: center 40%;
  background-repeat: no-repeat;
  transform: translateZ(0);
}
#bg::after {
  /* 게임 오브젝트 가독성용 어둡기 + 상단 골드·하단 인주 미세 컬러 */
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(212,168,74,0.10), transparent 60%),
    radial-gradient(ellipse 100% 60% at 50% 100%, rgba(214,58,58,0.10), transparent 70%),
    linear-gradient(180deg, rgba(10,21,48,0.55) 0%, rgba(10,21,48,0.62) 55%, rgba(5,10,26,0.78) 100%);
}
@media (min-aspect-ratio: 1/1) {
  #bg { background-image: url('assets/bg-landscape.jpg'); background-position: center 55%; }
}
body.no-bg #bg { background-image: linear-gradient(180deg, #14213d 0%, #0a1530 60%, #050a1a 100%) !important; }

#stage {
  position: fixed; inset: 0; z-index: 1;
  display: block;
  transition: filter .5s ease;
}
body.dying #stage { filter: saturate(0.35) brightness(0.75); }

.vignette {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(ellipse 75% 65% at 50% 50%, transparent 55%, rgba(4,8,20,0.55) 100%);
}

/* ---------- HUD ---------- */
#ui {
  position: fixed; inset: 0; z-index: 10;
  pointer-events: none;
  display: flex; flex-direction: column;
  padding: var(--sat) var(--sar) var(--sab) var(--sal);
  opacity: 0; transition: opacity .35s ease;
}
body.playing #ui { opacity: 1; }
.hud-top {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 12px 16px 0;
}
.score-wrap { display: flex; flex-direction: column; gap: 2px; }
.score-label {
  font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--ink-dim); font-weight: 700;
}
.score {
  font-size: 52px; font-weight: 800; letter-spacing: -0.04em;
  line-height: 1; font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 22px rgba(212,168,74,0.45), 0 1px 0 rgba(0,0,0,0.4);
  position: relative; display: inline-block;
}
.score.pop { animation: scorePop .32s ease; }
@keyframes scorePop {
  0% { transform: scale(1); }
  40% { transform: scale(1.16); color: var(--gold-2); }
  100% { transform: scale(1); }
}
.combo-ring {
  position: absolute; left: -10px; top: -8px; right: -10px; bottom: -8px;
  pointer-events: none; opacity: 0; transition: opacity .25s ease;
}
.combo-ring.on { opacity: 1; }
.combo-ring svg { width: 100%; height: 100%; overflow: visible; }
.combo-ring .bg { stroke: rgba(255,255,255,0.08); }
.combo-ring .fg {
  stroke: var(--good);
  filter: drop-shadow(0 0 6px rgba(106,255,180,0.7));
  transition: stroke-dashoffset .12s linear;
}
.combo-badge {
  position: absolute; right: -4px; bottom: -8px;
  background: var(--good); color: #04140c;
  font-size: 11px; font-weight: 900; letter-spacing: 0.04em;
  padding: 3px 8px; border-radius: 999px;
  box-shadow: 0 4px 12px rgba(106,255,180,0.5);
  opacity: 0; transform: scale(0.6);
  transition: opacity .2s ease, transform .25s cubic-bezier(.2,1.6,.4,1);
}
.combo-badge.on { opacity: 1; transform: scale(1); }

/* 집중심리(FEVER) 게이지 */
.fever-wrap { margin-top: 10px; width: 156px; }
.fever-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 9px; letter-spacing: 0.26em; color: var(--gold); font-weight: 800;
  margin-bottom: 4px;
}
.fever-head .pct { font-variant-numeric: tabular-nums; letter-spacing: 0.06em; color: var(--ink-dim); }
.fever-bar {
  height: 7px; border-radius: 999px;
  background: rgba(255,255,255,0.09);
  border: 1px solid rgba(212,168,74,0.25);
  overflow: hidden;
}
.fever-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #b8862f, #d4a84a 60%, #fff1c2);
  box-shadow: 0 0 10px rgba(212,168,74,0.65);
  transition: width .12s linear;
}
.fever-bar.full { border-color: rgba(255,241,194,0.8); box-shadow: 0 0 14px rgba(212,168,74,0.7); }
.fever-bar.full .fever-fill { animation: feverPulse .45s ease-in-out infinite alternate; }
@keyframes feverPulse { from { filter: brightness(1); } to { filter: brightness(1.45); } }
.fever-bar.active .fever-fill { background: linear-gradient(90deg, #ff8a3d, #ffd166 50%, #fff7d6); }

.right { text-align: right; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.meta { font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink-dim); font-weight: 700; }
.meta b {
  display: block; color: var(--ink); font-size: 20px; letter-spacing: -0.02em; font-weight: 700;
  margin-top: 3px; text-transform: none; font-variant-numeric: tabular-nums;
}
.hearts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; max-width: 118px; }
.heart {
  width: 18px; height: 16px;
  background: linear-gradient(180deg, #ff6b6b, #c22525);
  -webkit-mask: var(--heart-shape); mask: var(--heart-shape);
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  filter: drop-shadow(0 0 6px rgba(214,58,58,0.55));
  transition: opacity .25s ease, transform .25s ease, background .25s ease;
}
.heart.lost { opacity: 0.16; background: #3a4570; filter: none; transform: scale(0.82); }
.heart.granted { animation: heartGrant .6s cubic-bezier(.2,1.6,.4,1); }
@keyframes heartGrant {
  0% { transform: scale(0.2); opacity: 0; }
  50% { transform: scale(1.5); opacity: 1; filter: drop-shadow(0 0 12px rgba(214,58,58,0.9)); }
  100% { transform: scale(1); opacity: 1; }
}
.heart.hurt { animation: heartHurt .4s ease; }
@keyframes heartHurt { 0% { transform: scale(1.4); } 100% { transform: scale(0.82); } }
.stage-tag {
  font-family: var(--font-display); font-size: 11px; letter-spacing: 0.16em;
  color: var(--gold); opacity: 0.85; font-weight: 700;
}

/* 일시정지 버튼 (상단 중앙) */
.pause-btn {
  position: fixed; left: 50%; top: calc(var(--sat) + 10px); transform: translateX(-50%);
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(10,21,48,0.5);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: var(--ink-dim); cursor: pointer; z-index: 11;
  pointer-events: none; opacity: 0; transition: opacity .3s ease, transform .15s ease;
  -webkit-appearance: none; appearance: none;
}
.pause-btn svg { width: 16px; height: 16px; }
body.playing .pause-btn { opacity: 1; pointer-events: auto; }
.pause-btn:active { transform: translateX(-50%) scale(0.92); }

/* ---------- 콤보 카운터 · 토스트 · 카운트다운 ---------- */
.combo-big {
  position: fixed; left: 50%; top: 27%;
  transform: translate(-50%, 0) scale(0.7);
  opacity: 0; pointer-events: none; z-index: 12;
  font-family: var(--font-display); font-weight: 900; font-style: italic;
  font-size: 58px; letter-spacing: -0.02em; line-height: 1;
  background: linear-gradient(180deg, #fff6d8 20%, #d4a84a 80%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 18px rgba(212,168,74,0.55)) drop-shadow(0 1px 0 rgba(0,0,0,0.6));
  transition: opacity .35s ease, transform .35s ease;
  white-space: nowrap;
}
.combo-big small {
  display: block; font-size: 12px; letter-spacing: 0.42em; font-style: normal; font-weight: 700;
  color: var(--gold); -webkit-text-fill-color: var(--gold); text-align: center; margin-top: 2px;
}
.combo-big.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
.combo-big.hit { animation: comboHit .28s cubic-bezier(.2,1.6,.4,1); }
@keyframes comboHit { 0% { transform: translate(-50%, 0) scale(1.35); } 100% { transform: translate(-50%, 0) scale(1); } }
.combo-big.tier2 { background: linear-gradient(180deg, #fff 10%, #ff9ce6 90%); -webkit-background-clip: text; background-clip: text; }
.combo-big.tier3 { background: linear-gradient(180deg, #fff 10%, #6affb4 90%); -webkit-background-clip: text; background-clip: text; }

.toast {
  position: fixed; left: 50%; top: 41%;
  transform: translate(-50%, 0) scale(0.6);
  opacity: 0; pointer-events: none; z-index: 12;
  font-family: var(--font-display); font-weight: 900;
  font-size: 22px; letter-spacing: 0.06em; text-align: center;
  color: var(--gold-2);
  text-shadow: 0 0 22px rgba(212,168,74,0.7), 0 2px 0 rgba(0,0,0,0.6);
  transition: transform .25s cubic-bezier(.2,1.6,.4,1), opacity .35s ease;
  white-space: normal; width: max-content; max-width: 90vw; line-height: 1.25;
  padding: 0 10px;
}
.toast.show { opacity: 1; transform: translate(-50%, -8px) scale(1); }
.toast.bad { color: #ff6b6b; text-shadow: 0 0 22px rgba(214,58,58,0.7), 0 2px 0 rgba(0,0,0,0.6); }
.toast.ice { color: #cdefff; text-shadow: 0 0 22px rgba(140,210,255,0.8), 0 2px 0 rgba(0,0,0,0.6); }
.toast.pink { color: var(--pink); text-shadow: 0 0 22px rgba(255,156,230,0.8), 0 2px 0 rgba(0,0,0,0.6); }

.countdown {
  position: fixed; left: 50%; top: 42%; transform: translate(-50%, -50%);
  z-index: 12; pointer-events: none; opacity: 0;
  font-family: var(--font-display); font-weight: 900; font-size: 120px; line-height: 1;
  color: var(--ink); text-shadow: 0 0 40px rgba(212,168,74,0.6), 0 6px 0 rgba(0,0,0,0.5);
}
.countdown.go { animation: cdPop .55s cubic-bezier(.2,1.4,.4,1) forwards; }
.countdown.final { color: var(--gold-2); font-size: 96px; letter-spacing: 0.04em; }
@keyframes cdPop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(2.2); }
  25% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  80% { opacity: 1; transform: translate(-50%, -50%) scale(0.96); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
}

/* 첫 플레이 스와이프 힌트 */
.hint {
  position: fixed; left: 50%; top: 56%; transform: translate(-50%, -50%);
  width: 220px; height: 160px; z-index: 12; pointer-events: none;
  opacity: 0; transition: opacity .4s ease;
}
.hint.show { opacity: 1; }
.hint-dot {
  position: absolute; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,0.9); box-shadow: 0 0 0 8px rgba(255,255,255,0.22), 0 0 24px rgba(212,168,74,0.8);
  left: 20px; top: 110px;
  animation: hintSwipe 1.6s ease-in-out infinite;
}
.hint-line {
  position: absolute; left: 30px; top: 40px; width: 170px; height: 110px;
  border-radius: 100%; border: 0;
  background: linear-gradient(135deg, transparent 40%, rgba(212,168,74,0.5) 50%, transparent 60%);
  opacity: 0.6;
}
@keyframes hintSwipe {
  0% { transform: translate(0, 0) scale(0.8); opacity: 0; }
  15% { opacity: 1; transform: translate(0,0) scale(1); }
  70% { transform: translate(160px, -100px) scale(1); opacity: 1; }
  100% { transform: translate(170px, -108px) scale(0.7); opacity: 0; }
}
.hint-text {
  position: absolute; left: 50%; bottom: -34px; transform: translateX(-50%);
  white-space: nowrap; font-size: 13px; letter-spacing: 0.08em; color: var(--ink);
  text-shadow: 0 2px 8px rgba(0,0,0,0.8); font-weight: 600;
}

/* 기일 배너 */
.stage-banner {
  position: fixed; left: 50%; top: calc(var(--sat) + 62px); transform: translate(-50%, -10px);
  z-index: 12; pointer-events: none; opacity: 0;
  font-family: var(--font-display); font-size: 13px; letter-spacing: 0.28em; font-weight: 700;
  color: var(--gold-2); padding: 6px 16px;
  border-top: 1px solid rgba(212,168,74,0.6); border-bottom: 1px solid rgba(212,168,74,0.6);
  background: rgba(10,21,48,0.55);
  transition: opacity .35s ease, transform .4s cubic-bezier(.2,1.2,.4,1);
  white-space: nowrap;
}
.stage-banner.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- FX 오버레이 ---------- */
.frost-overlay {
  position: fixed; inset: 0; pointer-events: none; z-index: 5;
  background:
    radial-gradient(ellipse 70% 50% at 20% 10%, rgba(140,210,255,0.2), transparent 60%),
    radial-gradient(ellipse 70% 50% at 80% 90%, rgba(140,210,255,0.2), transparent 60%);
  opacity: 0; transition: opacity .3s ease; mix-blend-mode: screen;
}
.frost-overlay.on { opacity: 1; }
.frost-overlay::before, .frost-overlay::after {
  content: ''; position: absolute; left: 0; right: 0; height: 6px;
  background: linear-gradient(90deg, transparent, rgba(190,225,255,0.55), transparent);
  filter: blur(2px);
}
.frost-overlay::before { top: 0; } .frost-overlay::after { bottom: 0; }
.slow-label {
  position: fixed; left: 50%; bottom: calc(var(--sab) + 22%); transform: translate(-50%, 8px);
  font-size: 11px; letter-spacing: 0.5em; text-transform: uppercase;
  color: #beecff; font-weight: 800; opacity: 0;
  transition: opacity .2s ease, transform .3s ease; pointer-events: none;
  text-shadow: 0 0 12px rgba(140,210,255,0.7); z-index: 6;
}
.slow-label.on { opacity: 1; transform: translate(-50%, 0); }

.imm-overlay {
  position: fixed; inset: 0; pointer-events: none; z-index: 5;
  /* 2026-09-30 금색 → 보랏빛(면책 전용). 금색은 판결문·집중심리·콤보가 써서 무적과 구별되지 않았다(조변).
     안쪽 테두리 한 줄로 «화면 전체가 보호막 안»을 그린다. 움직이지 않는다(번쩍임 금지 · 2026-09-20). */
  box-shadow: inset 0 0 0 3px rgba(185,140,255,0.55), inset 0 0 110px 26px rgba(150,100,255,0.34);
  opacity: 0; transition: opacity .3s ease;
}
/* 2026-09-20 — 금빛 덮개가 세 겹(면책·집중심리·콤보) 겹쳐 «노랑 번쩍임»이 됐다.
   면책 덮개는 «켜져 있다»만 알리는 잔잔한 고정값으로 두고, 끝나기 1.5초 전에만 경고로 깜빡인다. */
body.invincible-on .imm-overlay { opacity: 1; }
body.imm-ending .imm-overlay { animation: immPulse .5s ease-in-out infinite; }
@keyframes immPulse {
  0%, 100% { box-shadow: inset 0 0 0 3px rgba(255,154,90,0.5), inset 0 0 100px 22px rgba(150,100,255,0.26); }
  50% { box-shadow: inset 0 0 0 3px rgba(255,154,90,0.9), inset 0 0 140px 40px rgba(255,140,90,0.4); }
}
/* 2026-09-30 무적 초읽기 — HUD 왼쪽 위(집중심리 게이지 밑)에 작게. 서류는 가운데로 날아오므로 모서리가 가장 덜 가린다.
   점수를 보는 눈길이 닿는 자리라 따로 찾을 필요가 없다. 자리는 늘 잡아 두고(흐름 속) 보이기만 켠다 → HUD 가 들썩이지 않는다. */
.imm-label {
  margin-top: 10px; display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  padding: 4px 11px 4px 4px; border-radius: 999px;
  background: rgba(36,18,78,0.8); border: 1.5px solid rgba(185,140,255,0.85);
  box-shadow: 0 4px 14px rgba(0,0,0,0.4), 0 0 18px rgba(150,100,255,0.45);
  opacity: 0; transform: translateX(-8px) scale(.94); transform-origin: left center;
  transition: opacity .25s ease, transform .35s cubic-bezier(.2,1.4,.4,1);
  pointer-events: none;
}
body.invincible-on .imm-label { opacity: 1; transform: none; }
.imm-ring { position: relative; width: 38px; height: 38px; flex: none; }
.imm-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.imm-ring .track { stroke: rgba(255,255,255,0.16); }
.imm-ring .fg { stroke: #c9a8ff; transition: stroke-dashoffset .12s linear; }
.imm-ring span {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 13px; font-weight: 900; color: #fff; font-variant-numeric: tabular-nums;
}
.imm-txt { text-align: left; line-height: 1.15; }
.imm-txt b {
  display: block; font-family: var(--font-ui); font-size: 14px; font-weight: 900;
  color: #e8dbff; letter-spacing: .02em; white-space: nowrap;
}
.imm-txt small { display: block; font-size: 11px; font-weight: 700; color: #fff; white-space: nowrap; opacity: .9; margin-top: 2px; letter-spacing: 0; }
/* 끝나기 직전 — 색이 변하고 링이 뛴다 */
.imm-label.ending { border-color: rgba(255,140,90,0.85); }
.imm-label.ending .imm-ring .fg { stroke: #ff9a5a; }
.imm-label.ending .imm-txt b { color: #ffb38a; }
.imm-label.ending .imm-ring { animation: immTick .5s ease-in-out infinite; }
@keyframes immTick { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
/* 2026-09-30 화면 맨 위 줄어드는 막대 — 눈이 어디에 있든 남은 시간이 보인다 */
.imm-bar {
  position: fixed; left: 0; right: 0; top: 0; height: calc(var(--sat) + 5px); z-index: 11; pointer-events: none;
  opacity: 0; transition: opacity .25s ease;
}
.imm-bar i {
  position: absolute; left: 0; right: 0; bottom: 0; height: 5px; transform-origin: left center;
  background: linear-gradient(90deg, #8f5cff, #d9c2ff); box-shadow: 0 0 10px rgba(185,140,255,0.9);
}
body.invincible-on .imm-bar { opacity: 1; }
body.imm-ending .imm-bar i { background: linear-gradient(90deg, #ff7a3d, #ffc09a); box-shadow: 0 0 10px rgba(255,140,90,0.9); }
/* 면책 시작 — 가운데 큰 글씨 한 번(1.7초) */
.imm-splash {
  position: fixed; left: 50%; top: 34%; transform: translate(-50%, -50%) scale(.6);
  z-index: 12; pointer-events: none; opacity: 0; text-align: center; white-space: nowrap;
}
.imm-splash b {
  display: block; font-family: var(--font-ui); font-weight: 900; font-size: clamp(38px, 11vw, 54px); letter-spacing: .04em;
  color: #fff; text-shadow: 0 0 18px rgba(170,120,255,0.95), 0 0 42px rgba(140,90,255,0.7), 0 3px 0 #3d1f7a;
}
.imm-splash span {
  display: inline-block; margin-top: 6px; padding: 5px 14px; border-radius: 999px;
  font-size: 14px; font-weight: 800; color: #fff; background: rgba(60,28,120,0.85); border: 1px solid rgba(201,168,255,0.8);
}
.imm-splash.show { animation: immSplash 1.2s cubic-bezier(.2,1.3,.4,1) forwards; }
@keyframes immSplash {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.6); }
  14% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  24% { transform: translate(-50%, -50%) scale(1); }
  78% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -58%) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .imm-splash.show { animation-duration: 1s; }   /* 한 번짜리 알림이라 줄여서 남긴다(헌법 §7) */
}

.miss-flash {
  position: fixed; left: 0; right: 0; bottom: 0; height: 220px; pointer-events: none; z-index: 6;
  background: linear-gradient(0deg, rgba(214,58,58,0.65), rgba(214,58,58,0.12) 55%, transparent);
  opacity: 0; transition: opacity .12s ease;
}
.miss-flash.on { opacity: 1; }
.hurt-vignette {
  position: fixed; inset: 0; pointer-events: none; z-index: 6;
  box-shadow: inset 0 0 90px 30px rgba(214,58,58,0.6);
  opacity: 0; transition: opacity .15s ease;
}
.hurt-vignette.on { opacity: 1; }

.combo-glow {
  position: fixed; inset: 0; pointer-events: none; z-index: 4;
  box-shadow: inset 0 0 120px 24px rgba(212,168,74,0);
  transition: box-shadow .18s ease;
}
.combo-glow.on { box-shadow: inset 0 0 150px 36px rgba(212,168,74,0.38); }
body.invincible-on .combo-glow.on, body.fever-on .combo-glow.on { box-shadow: inset 0 0 120px 24px rgba(212,168,74,0.12); }

/* 집중심리(FEVER) 화면 연출 */
.fever-tint {
  position: fixed; inset: 0; pointer-events: none; z-index: 4;
  background:
    radial-gradient(ellipse 90% 60% at 50% 110%, rgba(255,170,60,0.32), transparent 65%),
    radial-gradient(ellipse 90% 40% at 50% -10%, rgba(212,168,74,0.22), transparent 65%);
  opacity: 0; transition: opacity .4s ease;
}
body.fever-on .fever-tint { opacity: 1; animation: feverTint 2.6s ease-in-out infinite alternate; }
/* filter: brightness 는 전체 화면 레이어를 매 프레임 다시 칠한다 → 투명도만 완만히 움직인다 */
@keyframes feverTint { from { opacity: .72; } to { opacity: 1; } }
/* 면책과 겹치면 금빛이 두 겹이 된다 — 그때는 틴트를 낮춰 둔다 */
body.fever-on.invincible-on .fever-tint { animation: none; opacity: .5; }
.fever-label {
  position: fixed; left: 50%; bottom: calc(var(--sab) + 13%); transform: translate(-50%, 10px) scale(0.9);
  z-index: 6; pointer-events: none; opacity: 0;
  font-family: var(--font-display); font-weight: 900; font-style: italic;
  font-size: 26px; letter-spacing: 0.1em; white-space: nowrap;
  background: linear-gradient(90deg, #ffd166, #fff7d6, #ff9a3d, #ffd166);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 16px rgba(255,180,60,0.8)) drop-shadow(0 2px 0 rgba(0,0,0,0.6));
  transition: opacity .3s ease, transform .4s cubic-bezier(.2,1.4,.4,1);
}
.fever-label small { display: block; font-style: normal; font-size: 10px; letter-spacing: 0.5em; text-align: center; -webkit-text-fill-color: #ffe9a5; color: #ffe9a5; }
body.fever-on .fever-label { opacity: 1; transform: translate(-50%, 0) scale(1); animation: feverShimmer 1.4s linear infinite; }
@keyframes feverShimmer { from { background-position: 0% 50%; } to { background-position: 300% 50%; } }

/* ---------- 조변 컷 (시작·게임오버에서 «살짝» · 2026-09-20 조변 지시) ----------
   카드 아래에서 고개만 내민 것처럼 위쪽 일부만 보여 준다. 아래는 어둠으로 흐려 밤의 법정 톤을 지킨다.
   ⚠️ OG 이미지(og-image*.png)는 손대지 않는다 — 조변 지시. */
.jo-peek {
  width: 100%; max-width: 400px; height: 104px; overflow: hidden;
  display: flex; justify-content: flex-end; align-items: flex-start;   /* 왼쪽 아래는 음악·링크 버튼 자리라 오른쪽에 둔다 */
  margin-top: 8px; pointer-events: none; flex: none;
  -webkit-mask-image: linear-gradient(180deg, #000 58%, rgba(0,0,0,0.35) 84%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 58%, rgba(0,0,0,0.35) 84%, transparent 100%);
}
.jo-peek img {
  height: 212px; width: auto; margin-right: 16px;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,0.5)) brightness(0.92) saturate(0.95);
}
@media (max-height: 700px) { .jo-peek { height: 82px; } .jo-peek img { height: 190px; } }

/* ---------- 오버레이 패널 ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 20;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: calc(var(--sat) + 20px) 18px calc(var(--sab) + 20px);
  background: radial-gradient(ellipse at center, rgba(10,21,48,0.18) 0%, rgba(6,12,30,0.64) 75%);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  pointer-events: auto;
  transition: opacity .4s ease, transform .4s ease;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.overlay.hidden { opacity: 0; pointer-events: none; transform: scale(1.04); }
/* 게임 방법·랭킹은 시작/게임오버 패널 위에서 열린다 — 같은 z-index면 DOM 뒤쪽(게임오버)이 덮는다.
   ⚠️ 2026-09-06 v5 이관 때 빠뜨려 게임오버→게임 방법이 뒤에 깔리는 버그가 났다. 지우지 말 것. */
#howto, #board { z-index: 30; }
.panel {
  width: 100%; max-width: 400px;
  background: linear-gradient(180deg, rgba(24,38,70,0.78), rgba(10,21,48,0.9));
  border: 1px solid rgba(212,168,74,0.24);
  border-radius: 24px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.08);
  padding: 30px 22px 26px;
  display: flex; flex-direction: column; align-items: center;
  position: relative;
}
.panel::before {
  content: ''; position: absolute; left: 18px; right: 18px; top: 10px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,168,74,0.5), transparent);
}
.title {
  font-family: var(--font-display);
  font-size: 66px; font-weight: 900; letter-spacing: -0.02em; line-height: 1.02;
  padding: 6px 0 4px; text-align: center; margin: 0 0 6px;
  background: linear-gradient(180deg, #fff 30%, #c4cce0 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.title em {
  display: block; font-style: italic;
  background: linear-gradient(120deg, var(--accent), var(--gold) 60%, #fff1c2);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 22px rgba(212,168,74,0.35));
}
.subtitle {
  font-size: 12px; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--ink-dim); font-weight: 700; margin-bottom: 10px; text-align: center;
}
.start-tagline {
  font-family: var(--font-display); font-size: 17px; color: var(--paper);
  margin: 4px 0 22px; text-align: center; letter-spacing: 0.1em; font-weight: 700;
}
.logo-ic { width: 84px; height: 84px; margin-bottom: 10px; filter: drop-shadow(0 8px 26px rgba(212,168,74,0.45)); }
.best-chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: 0.22em; color: var(--ink-dim); font-weight: 700;
  margin-bottom: 22px; padding: 6px 14px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04);
}
.best-chip b { color: var(--gold-2); font-size: 15px; letter-spacing: 0; font-variant-numeric: tabular-nums; }

.btn {
  appearance: none; border: 0; cursor: pointer;
  padding: 17px 40px; min-height: 54px;
  font-size: 15px; font-weight: 800; letter-spacing: 0.2em;
  color: #1a0606;
  background: linear-gradient(135deg, var(--accent), #e87171);
  border-radius: 999px;
  box-shadow: 0 12px 36px rgba(214,58,58,0.5), inset 0 -3px 0 rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.25);
  transition: transform .15s ease, box-shadow .15s ease;
  white-space: nowrap;
}
.btn:active { transform: scale(0.96); box-shadow: 0 6px 18px rgba(214,58,58,0.45); }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22); }
.btn-ghost:active { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35); }
.btn-gold { background: linear-gradient(135deg, var(--gold), #f0cf7e); color: #2a1a04; box-shadow: 0 12px 36px rgba(212,168,74,0.4), inset 0 -3px 0 rgba(0,0,0,0.15); }
.go-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; width: 100%; }
.go-btns .btn { flex: 1 1 auto; min-width: 140px; padding-left: 20px; padding-right: 20px; }
.link-btn {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  color: var(--gold); font-size: 12px; letter-spacing: 0.18em; font-weight: 700;
  margin-top: 18px; padding: 8px 12px; text-decoration: none;
}
.link-btn:active { color: var(--gold-2); }

/* 게임오버 */
.stamp {
  font-family: var(--font-display); font-weight: 900; font-size: 44px; letter-spacing: 0.24em;
  color: #e94b4b; border: 4px double #e94b4b; border-radius: 10px; padding: 6px 18px 6px 22px;
  transform: rotate(-9deg) scale(3); opacity: 0;
  text-shadow: 0 0 18px rgba(233,75,75,0.45);
  box-shadow: 0 0 0 2px rgba(233,75,75,0.15), 0 0 26px rgba(214,58,58,0.35);
  margin: -6px 0 14px;
  mix-blend-mode: screen;
  transition: transform .32s cubic-bezier(.3,1.5,.5,1), opacity .2s ease;
}
.stamp.in { transform: rotate(-9deg) scale(1); opacity: 1; }
.go-sub { font-size: 12px; letter-spacing: 0.34em; color: var(--ink-dim); font-weight: 700; margin-bottom: 14px; }
.go-stats { display: flex; gap: 22px; margin: 4px 0 14px; }
.go-stat { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 84px; }
.go-stat .l { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-dim); font-weight: 700; }
.go-stat .v { font-size: 38px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.go-stat.best .v { color: var(--good); text-shadow: 0 0 18px rgba(106,255,180,0.4); }
.nr-badge {
  display: inline-block; padding: 5px 12px; border-radius: 999px;
  background: linear-gradient(135deg, var(--good), #2adba0);
  color: #04140c; font-size: 10px; font-weight: 800; letter-spacing: 0.2em;
  margin-bottom: 10px; opacity: 0; transform: translateY(-6px);
  transition: opacity .4s ease .2s, transform .4s cubic-bezier(.2,1.6,.4,1) .2s;
  position: absolute; top: 14px; right: 18px;
}
.nr-badge.show { opacity: 1; transform: translateY(0); }
.grade {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  margin: 2px 0 16px; padding: 10px 22px; border-radius: 14px;
  border: 1px solid rgba(212,168,74,0.35); background: rgba(212,168,74,0.08);
  opacity: 0; transform: translateY(8px); transition: opacity .4s ease .5s, transform .4s ease .5s;
}
.grade.show { opacity: 1; transform: translateY(0); }
.grade .gl { font-size: 9px; letter-spacing: 0.34em; color: var(--ink-dim); font-weight: 700; }
.grade .gv { font-family: var(--font-display); font-size: 22px; font-weight: 900; color: var(--gold-2); letter-spacing: 0.06em; }
.grade .gd { font-size: 11px; color: var(--ink-dim); letter-spacing: 0.02em; }

.score-submit { display: flex; gap: 8px; margin: 2px 0 6px; width: 100%; flex-wrap: wrap; justify-content: center; }
.name-input {
  flex: 1; min-width: 0; padding: 12px 14px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.06);
  /* ⚠️ 16px 미만이면 iOS Safari가 탭 시 화면을 자동 확대한다 — 내리지 말 것 */
  color: var(--ink); font-size: 16px; font-family: inherit; outline: none;
}
.name-input::placeholder { color: var(--ink-dim); }
.name-input:focus { border-color: var(--gold); }
.btn-sm {
  appearance: none; border: 0; cursor: pointer; white-space: nowrap;
  padding: 12px 18px; min-height: 46px; font-size: 13px; font-weight: 800; letter-spacing: 0.04em;
  color: #1a0606; background: linear-gradient(135deg, var(--gold), #e6c170);
  border-radius: 999px; transition: transform .15s ease, opacity .2s;
}
.btn-sm:active { transform: scale(0.96); }
.btn-sm:disabled { opacity: 0.6; cursor: default; }
.submit-msg { font-size: 12px; min-height: 16px; margin-bottom: 12px; color: var(--good); letter-spacing: 0.02em; text-align: center; }

/* 랭킹 · 게임방법 */
.board-title { font-family: var(--font-display); font-size: 30px; font-weight: 900; color: var(--ink); margin: 0; text-align: center; }
.board-sub { display: block; font-size: 10px; letter-spacing: 0.34em; color: var(--gold); font-family: var(--font-ui); font-weight: 700; margin-top: 6px; }
.board-list { width: 100%; margin: 18px 0 12px; max-height: 52vh; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; -webkit-overflow-scrolling: touch; }
.board-row { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; background: rgba(255,255,255,0.04); font-size: 14px; }
.board-row.top { background: rgba(212,168,74,0.12); border: 1px solid rgba(212,168,74,0.25); }
.b-rank { font-weight: 800; color: var(--ink-dim); font-size: 15px; text-align: center; }
.board-row.top .b-rank { font-size: 18px; }
.b-name { color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b-score { color: var(--gold); font-weight: 800; font-variant-numeric: tabular-nums; }
.board-empty { color: var(--ink-dim); text-align: center; padding: 30px 10px; font-size: 14px; line-height: 1.5; }
.board-more { appearance: none; border: 0; cursor: pointer; margin-bottom: 14px; background: transparent; color: var(--gold); font-size: 13px; font-weight: 700; text-decoration: underline; padding: 6px; }

.rules { display: flex; flex-direction: column; gap: 12px; margin: 16px 0 18px; width: 100%; max-height: 54vh; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-right: 4px; }
.rule { display: flex; gap: 12px; align-items: center; }
.rule .ic {
  width: 34px; height: 34px; flex-shrink: 0; display: grid; place-items: center;
  border-radius: 10px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08);
}
.rule .ic svg { width: 20px; height: 20px; }
.rule .tx { font-size: 13.5px; line-height: 1.45; color: var(--ink); font-weight: 500; }
.rule .tx b { color: var(--gold); font-weight: 700; }
.rule .tx .red { color: #ff6b6b; font-weight: 700; }
.rule-h { font-size: 10px; letter-spacing: 0.3em; color: var(--ink-dim); font-weight: 800; margin: 6px 0 -4px; }

.brand-tag {
  position: fixed; top: calc(var(--sat) + 14px); left: calc(var(--sal) + 16px); z-index: 22;
  display: flex; flex-direction: column; gap: 1px;
  text-decoration: none; pointer-events: auto; line-height: 1.25;
}
.brand-tag .b1 { font-size: 14px; color: var(--ink); font-weight: 700; font-family: var(--font-display); }
.brand-tag .b1 b { color: var(--gold); font-size: 1.08em; }
.brand-tag .b2 { font-size: 11px; color: var(--ink-dim); letter-spacing: 0.02em; }
.brand-tag:active .b1 { color: var(--gold); }

/* 일시정지 */
#pause .panel { max-width: 320px; }
.pause-title { font-family: var(--font-display); font-size: 34px; font-weight: 900; margin: 0 0 4px; }
.pause-sub { font-size: 11px; letter-spacing: 0.3em; color: var(--ink-dim); font-weight: 700; margin-bottom: 22px; }

/* 사운드 토글 */
.mute-btn {
  position: fixed; left: calc(var(--sal) + 14px); bottom: calc(var(--sab) + 14px);
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,0.12); border-radius: 50%;
  background: rgba(10,21,48,0.55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: var(--ink-dim); cursor: pointer; z-index: 25; pointer-events: auto;
  -webkit-appearance: none; appearance: none;
  transition: transform .15s ease, color .15s ease;
}
.mute-btn svg { width: 22px; height: 22px; }
.mute-btn:active { transform: scale(0.92); }
.mute-btn.muted { color: var(--accent); border-color: rgba(214,58,58,0.4); }
.bgm-btn { bottom: calc(var(--sab) + 66px); color: var(--gold); }
.bgm-btn.bgm-off { color: var(--ink-dim); opacity: 0.6; }

/* ---------- 민준 이스터에그 (transition 기반, reduced-motion 안전) ---------- */
.minjun-egg { position: fixed; inset: 0; pointer-events: none; z-index: 9999; overflow: hidden; }
.minjun-egg.hidden { display: none; }
.me-flash { position: absolute; inset: 0; background: #fff; opacity: 0; transition: opacity 0.45s ease-out; }
.me-flash.go { opacity: 0.92; }
.me-flash.fade { opacity: 0; }
.me-rainbow {
  position: absolute; inset: 0; opacity: 0;
  background: linear-gradient(90deg, rgba(255,90,130,0.45), rgba(255,170,80,0.45), rgba(255,230,90,0.45), rgba(120,255,160,0.45), rgba(90,180,255,0.45), rgba(220,130,255,0.45));
  background-size: 300% 100%; background-position: 0% 50%;
  mix-blend-mode: screen; transition: opacity 0.6s ease-out;
}
.me-rainbow.go { opacity: 0.6; animation: me-rainbow-slide 5s linear; }
.me-rainbow.fade { opacity: 0; transition: opacity 0.8s ease-out; }
@keyframes me-rainbow-slide { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }
.me-stamp {
  position: absolute; top: 30%; left: 50%;
  transform: translate(-50%, -50%) scale(0) rotate(-22deg);
  font-family: var(--font-display); font-size: clamp(64px, 14vw, 180px);
  font-weight: 900; color: #ff3a8a; letter-spacing: 0.05em;
  text-shadow: 0 8px 36px rgba(255,80,140,0.7), 0 0 80px rgba(255,150,180,0.55);
  opacity: 0; white-space: nowrap;
  transition: opacity 0.4s ease-out, transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.me-stamp.go { opacity: 1; transform: translate(-50%, -50%) scale(1.05) rotate(-8deg); }
.me-stamp.fade { opacity: 0; transition: opacity 0.6s ease-out; }
.me-confetti { position: absolute; inset: 0; }
.me-piece { position: absolute; top: -40px; width: 11px; height: 18px; border-radius: 2px; animation: me-fall 2.8s ease-in forwards; opacity: 0.95; }
@keyframes me-fall { 0% { transform: translateY(0) rotate(0deg); opacity: 1; } 100% { transform: translateY(115vh) rotate(720deg); opacity: 0.55; } }
.me-line {
  position: absolute; bottom: 26%; left: 0; right: 0; text-align: center; padding: 0 16px;
  font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 5.6vw, 58px);
  color: #fff; letter-spacing: 0.02em; opacity: 0; transform: translateY(40px) scale(0.7);
  text-shadow: 0 4px 24px rgba(0,0,0,0.75), 0 0 36px rgba(255,180,220,0.65);
  transition: opacity 0.35s ease-out, transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.me-line.go { opacity: 1; transform: translateY(0) scale(1.05); }

/* ---------- 반응형 ---------- */
@media (max-height: 700px) {
  .title { font-size: 54px; }
  .logo-ic { width: 66px; height: 66px; margin-bottom: 6px; }
  .start-tagline { margin-bottom: 14px; }
  .best-chip { margin-bottom: 14px; }
  .panel { padding: 22px 18px 20px; }
  .go-stat .v { font-size: 32px; }
  .stamp { font-size: 36px; }
}
@media (max-height: 600px) {
  .title { font-size: 44px; }
  .logo-ic { display: none; }
  .rules { max-height: 44vh; }
  .board-list { max-height: 42vh; }
}
@media (max-width: 360px) {
  .score { font-size: 44px; }
  .fever-wrap { width: 130px; }
  .go-stats { gap: 12px; }
  .go-stat { min-width: 70px; }
}
@media (min-width: 900px) {
  .panel { max-width: 440px; }
}
@media (prefers-reduced-motion: reduce) {
  .combo-big.hit, .score.pop, .heart.granted, .heart.hurt, .fever-bar.full .fever-fill,
  body.fever-on .fever-tint, body.fever-on .fever-label, .hint-dot, body.imm-ending .imm-overlay, .imm-label.ending .imm-ring { animation: none; }
}