@font-face {
  font-family: 'ONE Mobile POP';
  src:
    local('ONE Mobile POP'),
    local('ONE Mobile POP OTF'),
    local('ONEMobilePOP'),
    url('assets/fonts/ONE-Mobile-POP.ttf') format('truetype');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

/* ============================================================================
   두두의 폴짝폴짝 대모험 — 타이틀 로비 독립 에셋 모션 디자인 v4.0 (title-lobby.css)
   - Implements `두두_타이틀로비_스프라이트_애니메이션_근본수정_통합제작지시서_v3.md`:
     * Gate A (A01~A03): Uses ONLY intact single master cutout (`hero-dudu-master.png` / `hero-dudu-night-master.png`);
       all 12 damaged `hero-day/night-f0..5.png` files are retired & deleted.
     * Gate B (B01~B04): `.lobbyHero`, `.lobbyForeground`, `.lobbyLogo`, `.lobbyKwangBadge` are direct children
       of `#duduTitleLobby` outside `.lobbyDemoPanel` so ZERO ancestor `clip-path` ever clips Dudu!
       Gentle single-master CSS transform loop (5.4s, translateY -3px~+2px, rotate ±0.45deg, scale 0.996~1.006).
       Identical alpha silhouette `.heroGlowLayer` behind `.heroBodyLayer` for 1.1s smooth Night Glow transition after 35s idle.
     * Gate C (C01~C05): 7-scene real-map cross-dissolve slideshow (2.5s hold + 0.75s dissolve),
       5 capsule buttons with unmistakable active-only Hover/Focus/Pressed highlight,
       3 alternating Dudu-Star-Moon diagonal tracks (+x,+y) with zero track `clip-path` truncation,
       Options -> Return to Lobby preserving all localStorage keys.
   ============================================================================ */

:root {
  --lobby-left-top-pct: 64.8%;
  --lobby-left-bot-pct: 44.6%;

  /* Motion & Transition Timings (§3-3, §3-4, §8) */
  --lobby-enter-fade-ms: 480ms;
  --lobby-hero-enter-ms: 780ms;
  --lobby-logo-enter-ms: 720ms;
  --lobby-hero-breath-sec: 5.4s;
  --lobby-kwang-loop-sec: 5.4s;
  --lobby-track-a-sec: 19.6s;
  --lobby-track-b-sec: 25.2s;
  --lobby-track-c-sec: 22.4s;
  --lobby-twinkle-sec: 8.0s;
  --lobby-btn-enter-ms: 820ms;
  --lobby-btn-stagger-ms: 100ms;
  --lobby-btn-hover-ms: 180ms;
  --lobby-btn-leave-ms: 540ms;
  --lobby-wipe-open-ms: 600ms;
  --lobby-slide-dissolve-ms: 850ms;
  --lobby-night-fade-ms: 1100ms;
  --lobby-wake-fade-ms: 550ms;
  --lobby-font: 'ONE Mobile POP', sans-serif;
}

/* Hide legacy `.intro` card ONLY when `#overlay` is in `title` mode; keep `.intro` intact for `pause` & `result`! */
#overlay[data-modal-kind="title"] > .intro {
  display: none !important;
}

#overlay:not([data-modal-kind="title"]) > .titleLobby {
  display: none !important;
}

#overlay[data-modal-kind="title"]:not([hidden]) {
  display: block !important;
  padding: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  overflow: hidden !important;
}

/* Hide in-game HUD while Title Lobby is active */
body[data-game-state="loading"] .hud,
body[data-game-state="ready"] .hud,
body[data-game-state="loading"] .playerHealthHud,
body[data-game-state="ready"] .playerHealthHud,
body[data-game-state="loading"] .practiceHUD,
body[data-game-state="ready"] .practiceHUD {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Main Title Lobby Root Container (16:9 inside `#gameViewport`) */
.titleLobby {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  font-family: var(--lobby-font) !important;
  pointer-events: auto;
  z-index: 14;
  animation: lobbyFadeIn var(--lobby-enter-fade-ms) cubic-bezier(0.22, 1, 0.36, 1) both;
}

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

/* Pause all infinite CSS animations when lobby is hidden or inactive (§6 C01) */
.titleLobby.lobby-paused,
.titleLobby.lobby-paused * {
  animation-play-state: paused !important;
}

/* ============================================================================
   1. `.lobbyDemoPanel` (LEFT BACKGROUND PANEL ONLY — Diagonal `clip-path` applies ONLY here! §4-2 B02)
   ============================================================================ */
.lobbyDemoPanel {
  position: absolute;
  inset: 0;
  clip-path: polygon(0% 0%, 65.2% 0%, 45.0% 100%, 0% 100%);
  z-index: 1;
  pointer-events: none;
  transition: transform var(--lobby-wipe-open-ms) cubic-bezier(0.65, 0, 0.35, 1),
              opacity var(--lobby-wipe-open-ms) ease;
  will-change: transform;
}

.lobbyDemo {
  position: absolute;
  inset: -2%;
  width: 70%;
  height: 104%;
  background: url('./assets/title/demo-poster.jpg?v=V4_STANDALONE') center center / cover no-repeat;
  filter: blur(2.8px) saturate(1.05);
  transform: scale(1.03);
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.lobbySlideLayer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity var(--lobby-slide-dissolve-ms) ease-in-out,
              transform 3400ms ease-out;
  transform: scale(1.02);
  will-change: opacity, transform;
  pointer-events: none;
}

.lobbySlideLayer.is-visible {
  opacity: 1;
  transform: scale(1.06);
}

.lobbySceneShade {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 26% 58%, rgba(255, 255, 235, 0.08) 0%, rgba(16, 38, 30, 0.28) 66%, rgba(8, 24, 22, 0.56) 100%),
    linear-gradient(180deg, rgba(10, 28, 24, 0.34) 0%, rgba(18, 42, 30, 0.08) 32%, rgba(14, 38, 22, 0.24) 100%);
  z-index: 2;
  pointer-events: none;
  transition: background var(--lobby-night-fade-ms) ease;
}

.titleLobby.is-night .lobbySceneShade {
  background:
    radial-gradient(circle at 26% 62%, rgba(56, 232, 165, 0.14) 0%, rgba(6, 18, 22, 0.78) 58%, rgba(4, 10, 14, 0.92) 100%),
    linear-gradient(180deg, rgba(4, 12, 16, 0.84) 0%, rgba(6, 18, 22, 0.72) 45%, rgba(6, 22, 18, 0.86) 100%);
}

.lobbyLeftSparkles {
  position: absolute;
  inset: 0;
  width: 64%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}

/* ============================================================================
   2. `.lobbyRightHalf` & `.lobbyRightField` (RIGHT BACKGROUND PANEL & STICKER STAGE)
   ============================================================================ */
.lobbyRightHalf {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  transition: transform var(--lobby-wipe-open-ms) cubic-bezier(0.65, 0, 0.35, 1),
              opacity var(--lobby-wipe-open-ms) ease;
  will-change: transform;
}

.lobbyRightField {
  position: absolute;
  inset: 0;
  clip-path: polygon(64.8% 0%, 100% 0%, 100% 100%, 44.6% 100%);
  background:
    radial-gradient(circle at 82% 24%, #1b5a52 0%, #0c3333 56%, #071f21 100%);
  transition: filter var(--lobby-night-fade-ms) ease, background var(--lobby-night-fade-ms) ease;
  overflow: hidden;
  pointer-events: none;
}

.titleLobby.is-night .lobbyRightField {
  background:
    radial-gradient(circle at 82% 24%, #0f3838 0%, #06181c 54%, #030d10 100%);
}

.lobbyRightStripes {
  position: absolute;
  inset: -20%;
  background: repeating-linear-gradient(
    -68deg,
    rgba(116, 232, 172, 0.045) 0px,
    rgba(116, 232, 172, 0.045) 34px,
    transparent 34px,
    transparent 78px
  );
  pointer-events: none;
}

/* [V3.1] FOUR DISTINCT DIAGONAL STREAMS (top-left -> bottom-right).
   Tracks are independent lanes. Each lane contains only 3 items, with large gaps,
   no duplicated markup, no waterfall columns or vertical flex stacking.
   Their animation starts offscreen and fades out before resetting. */
.lobbyStickerStage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 3;
}
.stickerTrack {
  position: absolute;
  inset: 0;
  pointer-events: none;
  --lane-start: 62%;
  --lane-duration: 26s;
  --lane-shift: 18%;
}
/* V4.2: keep the original lobby geometry. Only distribute small Dudu stickers
   into sparse diagonal margins to the LEFT of the menu buttons. No waterfall. */
/* v5 §0-4 & §4.2 (L08): 4 Diagonal Lanes inside safe right region (never clipped by diagonal divider),
   18.5s ~ 23.2s cycle (within 16~24s spec), drifting smoothly top-left -> bottom-right (+X, +Y). */
.stickerTrackA { --lane-x: 67.5%; --lane-y: 0%;  --lane-duration: 16.5s; --lane-delay: -2.0s; }
.stickerTrackB { --lane-x: 62.8%; --lane-y: 20%; --lane-duration: 19.2s; --lane-delay: -9.5s; }
.stickerTrackC { --lane-x: 58.2%; --lane-y: 42%; --lane-duration: 17.8s; --lane-delay: -5.8s; }
.stickerTrackD { --lane-x: 54.0%; --lane-y: 63%; --lane-duration: 20.6s; --lane-delay: -13.4s; }
.stickerMotion {
  position: absolute;
  left: calc(var(--lane-x) + var(--slot, 0) * 3.8%);
  top: calc(var(--lane-y) + var(--slot, 0) * 9.5%);
  width: clamp(44px, 4.8vw, 64px);
  height: clamp(44px, 4.8vw, 64px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  animation: lobbyStickerDriftV42 var(--lane-duration) linear infinite;
  animation-delay: calc(var(--lane-delay) + var(--sticker-delay, 0s));
  will-change: transform, opacity;
}
/* Visible, smooth top-left -> bottom-right (+X, +Y) diagonal drift */
@keyframes lobbyStickerDriftV42 {
  0%   { transform: translate3d(0px, -14px, 0) rotate(-6deg); opacity: 0; }
  10%  { opacity: 0.92; }
  50%  { transform: translate3d(52px, 80px, 0) rotate(6deg); opacity: 0.95; }
  88%  { opacity: 0.88; }
  100% { transform: translate3d(104px, 172px, 0) rotate(-4deg); opacity: 0; }
}

.lobbyStickerItem {
  position: relative;
  width: 100%;
  aspect-ratio: 1.12 / 1;
  flex-shrink: 0;
  pointer-events: none;
}

.lobbyStickerItem.st-tilt-left {
  transform: rotate(-8deg);
}

.lobbyStickerItem.st-tilt-right {
  transform: rotate(7deg);
}

.lobbyStickerItem img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity var(--lobby-night-fade-ms) ease, filter var(--lobby-night-fade-ms) ease;
}

.stickerImgDay {
  opacity: 0.90;
  filter: drop-shadow(0 4px 10px rgba(4, 16, 16, 0.42));
}

.stickerImgNight {
  opacity: 0;
  filter: drop-shadow(0 0 12px rgba(108, 255, 188, 0.72));
}

.titleLobby.is-night .stickerImgDay {
  opacity: 0;
}

.titleLobby.is-night .stickerImgNight {
  opacity: 1;
}

.lobbyCelestialSticker {
  width: 46%;
  height: 46%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  filter: drop-shadow(0 3px 8px rgba(4, 16, 16, 0.38));
  transition: filter var(--lobby-night-fade-ms) ease;
}

.titleLobby.is-night .lobbyCelestialSticker {
  filter: drop-shadow(0 0 12px rgba(235, 255, 128, 0.85)) drop-shadow(0 0 20px rgba(112, 255, 188, 0.55));
}

.lobbyCelestialSticker svg {
  width: 100%;
  height: 100%;
  display: block;
}

.lobbySparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}

.lobbySparkleNode {
  position: absolute;
  pointer-events: none;
  animation: gentleTwinkle var(--lobby-twinkle-sec) ease-in-out infinite;
}

@keyframes gentleTwinkle {
  0%, 100% { opacity: 0.68; transform: scale(0.96); }
  50% { opacity: 1; transform: scale(1.05); }
}

.lobbyDiagonalDivider {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
  transition: transform var(--lobby-wipe-open-ms) cubic-bezier(0.65, 0, 0.35, 1),
              opacity var(--lobby-wipe-open-ms) ease;
  animation: dividerPulse 7.2s ease-in-out infinite;
}

@keyframes dividerPulse {
  0%, 100% { opacity: 0.88; filter: drop-shadow(0 0 6px rgba(182, 255, 120, 0.45)); }
  50% { opacity: 1; filter: drop-shadow(0 0 14px rgba(142, 255, 178, 0.80)); }
}

/* ============================================================================
   3. UNCLIPPED FOREGROUND CHARACTER & TITLE LAYERS (§4-2 B01~B03)
   - Direct children of `#duduTitleLobby` (OUTSIDE `.lobbyDemoPanel` clip-path!)
   ============================================================================ */
.lobbyForeground {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 45.2%;
  aspect-ratio: 760 / 161;
  z-index: 4;
  pointer-events: none;
  transition: transform var(--lobby-wipe-open-ms) cubic-bezier(0.65, 0, 0.35, 1),
              opacity var(--lobby-wipe-open-ms) ease;
}

.lobbyForeground img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left bottom;
  transition: opacity var(--lobby-night-fade-ms) ease;
}

.lobbyFgGrassNight {
  opacity: 0;
}

.titleLobby.is-night .lobbyFgGrassDay {
  opacity: 0;
}

.titleLobby.is-night .lobbyFgGrassNight {
  opacity: 1;
}

/* [Gate A & B: B01~B03] `.lobbyHero`: Standalone Unclipped Single-Master Hero Dudu
   - Placed at `left: 1.2%; bottom: 1.2%` so there is >= 18px safety margin on left & bottom (§4-3).
   - Uses ONLY `hero-dudu-master.png` & `hero-dudu-night-master.png` (100% identical alpha silhouette & anchor).
   - Animated ONLY via gentle whole-layer CSS transform (`--lobby-hero-breath-sec: 5.4s`, `translateY(-3px ~ +2px)`,
     `rotate(±0.45deg)`, `scale(0.996 ~ 1.006)` anchored at feet `46% 88%`). */
.lobbyHero {
  position: absolute;
  left: 2.0%;
  bottom: 0.2%;
  width: 46.0%;
  height: 80.0%;
  z-index: 5;
  pointer-events: none;
  transform-origin: 46% 88%;
  animation: heroEnterPop var(--lobby-hero-enter-ms) cubic-bezier(0.22, 1.28, 0.36, 1) both;
  transition: transform var(--lobby-wipe-open-ms) cubic-bezier(0.65, 0, 0.35, 1),
              opacity var(--lobby-wipe-open-ms) ease;
}

@keyframes heroEnterPop {
  0% { opacity: 0; transform: scale(0.94) translateY(14px); }
  66% { opacity: 1; transform: scale(1.02) translateY(-2px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

.lobbyHeroBreathWrap {
  position: relative;
  width: 100%;
  height: 100%;
  transform-origin: 50% 93%;
  animation: heroMasterCuteWobbleV5 2.8s steps(1, end) infinite;
  will-change: transform;
}

/* [v5 §0-7 & §4.1 L07] Crisp 6-step low-FPS (steps) cute left-right wobble anchored at feet (50% 93%) */
@keyframes heroMasterCuteWobbleV5 {
  0%      { transform: translate3d(-4px, 0px, 0) rotate(-1.5deg); }
  16.67%  { transform: translate3d(-2px, -2px, 0) rotate(-0.6deg) scale(1.008); }
  33.33%  { transform: translate3d(0px, -2.5px, 0) rotate(0deg) scale(1.012); }
  50.00%  { transform: translate3d(4px, 0px, 0) rotate(1.5deg); }
  66.67%  { transform: translate3d(2px, -2px, 0) rotate(0.6deg) scale(1.008); }
  83.33%  { transform: translate3d(0px, -1.5px, 0) rotate(0deg) scale(1.005); }
  100%    { transform: translate3d(-4px, 0px, 0) rotate(-1.5deg); }
}

/* `.heroGlowLayer`: Cloned identical-alpha silhouette behind `.heroBodyLayer` for Night Glow (§3-4, §4-2) */
.heroGlowLayer,
.heroBodyLayer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  pointer-events: none;
}

.heroGlowLayer {
  z-index: 1;
  opacity: 0;
  filter: blur(5px) drop-shadow(0 0 14px rgba(96, 255, 184, 0.78)) drop-shadow(0 0 28px rgba(64, 235, 162, 0.45));
  transition: opacity var(--lobby-night-fade-ms) ease;
}

.titleLobby.is-night .heroGlowLayer {
  opacity: 0.50;
}

.heroBodyDay {
  z-index: 2;
  opacity: 1;
  filter: drop-shadow(0 8px 18px rgba(8, 22, 16, 0.36));
  transition: opacity var(--lobby-night-fade-ms) ease;
}

.heroBodyNight {
  z-index: 3;
  opacity: 0;
  transition: opacity var(--lobby-night-fade-ms) ease;
}

.titleLobby.is-night .heroBodyDay {
  opacity: 0;
}

.titleLobby.is-night .heroBodyNight {
  opacity: 1;
}

/* Independent `크왕!` Burst Speech Badge (`--lobby-kwang-loop-sec: 5.4s`) */
.lobbyKwangBadge {
  position: absolute;
  left: 1.2%;
  top: 35.5%;
  width: 10.2%;
  aspect-ratio: 180 / 154;
  z-index: 6;
  pointer-events: none;
  transform-origin: 78% 72%;
  animation: kwangPopLoop var(--lobby-kwang-loop-sec) cubic-bezier(0.22, 1, 0.36, 1) infinite;
  transition: transform var(--lobby-wipe-open-ms) cubic-bezier(0.65, 0, 0.35, 1),
              opacity var(--lobby-wipe-open-ms) ease;
}

@keyframes kwangPopLoop {
  0%, 24%, 86%, 100% { transform: scale(0.92) rotate(-4deg); opacity: 0.88; }
  45% { transform: scale(1.06) rotate(2deg); opacity: 1; }
  58% { transform: scale(1.02) rotate(-1deg); opacity: 1; }
}

.lobbyKwangBadge img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity var(--lobby-night-fade-ms) ease;
}

.lobbyKwangNight {
  opacity: 0;
  filter: drop-shadow(0 0 10px rgba(138, 255, 164, 0.65));
}

.titleLobby.is-night .lobbyKwangDay {
  opacity: 0;
}

.titleLobby.is-night .lobbyKwangNight {
  opacity: 1;
}

/* Top Calligraphy / Sticker Logo (`두두의 폴짝폴짝 대모험`) */
.lobbyLogo {
  position: absolute;
  left: 0.8%;
  top: 0.0%;
  width: 60.5%;
  height: 29.0%;
  aspect-ratio: auto;
  z-index: 7;
  pointer-events: none;
  transform-origin: 45% 50%;
  animation: logoBounceIn var(--lobby-logo-enter-ms) cubic-bezier(0.22, 1.32, 0.36, 1) 80ms both;
  transition: transform var(--lobby-wipe-open-ms) cubic-bezier(0.65, 0, 0.35, 1),
              opacity var(--lobby-wipe-open-ms) ease;
}

@keyframes logoBounceIn {
  0% { opacity: 0; transform: translate3d(0, -24px, 0) scale(0.93); }
  68% { opacity: 1; transform: translate3d(0, 3px, 0) scale(1.02); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

.lobbyLogo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left top;
  transition: opacity var(--lobby-night-fade-ms) ease, filter var(--lobby-night-fade-ms) ease;
}

.lobbyLogoDay {
  opacity: 1;
  filter: drop-shadow(0 5px 14px rgba(8, 24, 18, 0.42));
}

.lobbyLogoNight {
  opacity: 0;
  filter: drop-shadow(0 0 14px rgba(132, 255, 178, 0.62));
}

.titleLobby.is-night .lobbyLogoDay {
  opacity: 0;
}

.titleLobby.is-night .lobbyLogoNight {
  opacity: 1;
}

/* Subtle stage caption badge in bottom-left corner of demo */
.lobbyDemoStageTag {
  position: absolute;
  left: 1.4%;
  bottom: 1.8%;
  z-index: 7;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(10, 28, 22, 0.62);
  border: 1px solid rgba(186, 255, 168, 0.38);
  color: rgba(242, 255, 235, 0.90);
  font-size: clamp(9.5px, 0.85vw, 11.5px);
  letter-spacing: 0.2px;
  pointer-events: none;
  transition: opacity var(--lobby-wipe-open-ms) ease;
}

/* Center Diagonal Split Wipe when entering Play / World Map / Challenge */
.titleLobby.is-wiping .lobbyDemoPanel,
.titleLobby.is-wiping .lobbyHero,
.titleLobby.is-wiping .lobbyForeground,
.titleLobby.is-wiping .lobbyLogo,
.titleLobby.is-wiping .lobbyKwangBadge,
.titleLobby.is-wiping .lobbyDemoStageTag {
  transform: translate3d(-68%, 0, 0);
  opacity: 0;
}

.titleLobby.is-wiping .lobbyRightHalf,
.titleLobby.is-wiping .lobbyDiagonalDivider {
  transform: translate3d(62%, 0, 0);
  opacity: 0;
}

/* ============================================================================
   4. 5 INTERACTIVE CAPSULE MENU BUTTONS (`.lobbyMenu`) (§5-1 C02)
   Exact labels: 플레이 / 월드맵 / 챌린지 모드 / 키 설명 / 게임옵션
   ============================================================================ */
.lobbyMenu {
  position: absolute;
  right: 3.0%;
  top: 16.0%;
  bottom: 12.0%;
  width: min(29.8%, 408px);
  min-width: 236px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(6px, 1.25vh, 14px);
  z-index: 8;
  pointer-events: auto;
}

.lobbyMenuBtnWrap {
  position: relative;
  width: 100%;
  flex: 1;
  max-height: 76px;
  min-height: 44px;
  display: flex;
  align-items: center;
  opacity: 0;
  transform: translate3d(125%, 0, 0);
  animation: menuSlideInRight var(--lobby-btn-enter-ms) cubic-bezier(0.20, 1.22, 0.34, 1) forwards;
  animation-delay: calc(160ms + var(--btn-idx, 0) * var(--lobby-btn-stagger-ms));
}

@keyframes menuSlideInRight {
  0% { opacity: 0; transform: translate3d(125%, 0, 0); }
  74% { opacity: 1; transform: translate3d(-6px, 0, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}

.titleLobby.is-leaving .lobbyMenuBtnWrap {
  animation: menuSlideOutRight var(--lobby-btn-leave-ms) cubic-bezier(0.55, 0, 0.85, 0.35) forwards !important;
  animation-delay: calc(var(--btn-idx, 0) * 40ms) !important;
  pointer-events: none !important;
}

@keyframes menuSlideOutRight {
  0% { opacity: 1; transform: translate3d(0, 0, 0); }
  100% { opacity: 0; transform: translate3d(135%, 0, 0); }
}

.lobbyCapsuleBtn {
  position: relative;
  width: 93%;
  height: 100%;
  min-height: 44px;
  padding: 0 22px 0 18px !important;
  border-radius: 999px !important;
  border: 2.5px solid #143828 !important;
  background: linear-gradient(180deg, #d6f8b4 0%, #8de584 50%, #5bc870 100%) !important;
  box-shadow:
    inset 0 4px 0 rgba(255, 255, 255, 0.84),
    inset 0 -4px 0 rgba(24, 92, 54, 0.36),
    0 0 0 2px rgba(164, 245, 182, 0.55),
    0 6px 14px rgba(3, 16, 16, 0.52) !important;
  color: #122b20 !important;
  font-family: var(--lobby-font) !important;
  font-size: clamp(16px, 2.0vw, 26px) !important;
  font-weight: 400 !important;
  letter-spacing: -0.3px;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: clamp(10px, 1.25vw, 16px) !important;
  cursor: pointer;
  outline: none;
  pointer-events: auto;
  transition:
    transform var(--lobby-btn-hover-ms) cubic-bezier(0.22, 1, 0.36, 1),
    background var(--lobby-btn-hover-ms) ease,
    border-color var(--lobby-btn-hover-ms) ease,
    box-shadow var(--lobby-btn-hover-ms) ease,
    filter var(--lobby-btn-hover-ms) ease !important;
}

.lobbyCapsuleBtn.btn-play {
  width: 95%;
  background: linear-gradient(180deg, #eeff78 0%, #b5f442 52%, #74da2b 100%) !important;
  box-shadow:
    inset 0 4px 0 rgba(255, 255, 255, 0.90),
    inset 0 -4px 0 rgba(52, 120, 20, 0.40),
    0 0 0 2.5px rgba(225, 255, 124, 0.78),
    0 6px 16px rgba(3, 16, 16, 0.54) !important;
  font-size: clamp(18px, 2.28vw, 30px) !important;
}

.lobbyCapsuleBtn::before {
  content: '';
  position: absolute;
  inset: 4px 7px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.72);
  pointer-events: none;
  transition: border-color var(--lobby-btn-hover-ms) ease;
}

.lobbyCapsuleBtn::after {
  content: '▶';
  position: absolute;
  left: -22px;
  top: 50%;
  transform: translateY(-50%) translateX(8px) scale(0.6);
  opacity: 0;
  color: #f8ff78;
  font-size: 16px;
  text-shadow: 0 0 10px rgba(248, 255, 120, 0.95), 0 2px 4px rgba(0, 0, 0, 0.8);
  pointer-events: none;
  transition: opacity var(--lobby-btn-hover-ms) ease, transform var(--lobby-btn-hover-ms) cubic-bezier(0.22, 1.35, 0.36, 1);
}

.lobbyCapsuleBtn:hover:not(:disabled),
.lobbyCapsuleBtn:focus-visible:not(:disabled),
.lobbyCapsuleBtn.is-hovered:not(:disabled) {
  transform: translate3d(-6px, -2px, 0) scale(1.042) !important;
  border-color: #ffffff !important;
  background: linear-gradient(180deg, #fbff96 0%, #c6ff4e 48%, #7be832 100%) !important;
  box-shadow:
    inset 0 5px 0 rgba(255, 255, 255, 0.98),
    inset 0 -4px 0 rgba(36, 112, 22, 0.45),
    0 0 0 3.5px #f6ff78,
    0 0 28px rgba(196, 255, 88, 0.92),
    0 10px 24px rgba(0, 0, 0, 0.65) !important;
  filter: brightness(1.06);
  z-index: 10;
}

.lobbyCapsuleBtn:hover:not(:disabled)::before,
.lobbyCapsuleBtn:focus-visible:not(:disabled)::before,
.lobbyCapsuleBtn.is-hovered:not(:disabled)::before {
  border-color: rgba(255, 255, 255, 0.98);
}

.lobbyCapsuleBtn:hover:not(:disabled)::after,
.lobbyCapsuleBtn:focus-visible:not(:disabled)::after,
.lobbyCapsuleBtn.is-hovered:not(:disabled)::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0) scale(1);
}

.lobbyCapsuleBtn:hover:not(:disabled) .lobbyBtnIcon,
.lobbyCapsuleBtn:focus-visible:not(:disabled) .lobbyBtnIcon,
.lobbyCapsuleBtn.is-hovered:not(:disabled) .lobbyBtnIcon {
  transform: scale(1.14) rotate(-6deg);
}

.lobbyCapsuleBtn[data-wm-locked="true"] {
  background: linear-gradient(180deg, #cbe6c8 0%, #86b892 52%, #5c8e6c 100%) !important;
}

.lobbyCapsuleBtn[data-wm-locked="true"]:hover:not(:disabled),
.lobbyCapsuleBtn[data-wm-locked="true"]:focus-visible:not(:disabled) {
  transform: translate3d(-4px, -1px, 0) scale(1.022) !important;
  background: linear-gradient(180deg, #fff0b8 0%, #f5c85c 52%, #d4962a 100%) !important;
  border-color: #fff3bf !important;
  box-shadow:
    inset 0 4px 0 rgba(255, 255, 255, 0.92),
    0 0 0 3px #ffd43b,
    0 0 22px rgba(255, 212, 59, 0.78),
    0 8px 20px rgba(0, 0, 0, 0.6) !important;
}

.lobbyCapsuleBtn:active:not(:disabled),
.lobbyCapsuleBtn.is-pressed:not(:disabled) {
  transform: translate3d(-1px, 2px, 0) scale(0.968) !important;
  background: linear-gradient(180deg, #ffe866 0%, #9ce838 55%, #56b820 100%) !important;
  box-shadow:
    inset 0 3px 6px rgba(18, 56, 24, 0.35),
    0 0 0 3px #ffffff,
    0 0 18px rgba(255, 232, 102, 0.88),
    0 3px 8px rgba(0, 0, 0, 0.55) !important;
  transition-duration: 70ms !important;
}

.lobbyCapsuleBtn:disabled {
  opacity: 0.62;
  cursor: wait;
}

.titleLobby.is-night .lobbyCapsuleBtn {
  background: linear-gradient(180deg, #b6fca2 0%, #5ee88e 52%, #2ec47a 100%) !important;
  box-shadow:
    inset 0 4px 0 rgba(255, 255, 255, 0.88),
    inset 0 -4px 0 rgba(14, 78, 52, 0.48),
    0 0 0 2.5px rgba(120, 255, 190, 0.88),
    0 0 16px rgba(72, 255, 168, 0.42),
    0 6px 16px rgba(0, 0, 0, 0.68) !important;
}

.titleLobby.is-night .lobbyCapsuleBtn:hover:not(:disabled),
.titleLobby.is-night .lobbyCapsuleBtn:focus-visible:not(:disabled),
.titleLobby.is-night .lobbyCapsuleBtn.is-hovered:not(:disabled) {
  background: linear-gradient(180deg, #f8ff92 0%, #b8ff46 50%, #52e838 100%) !important;
  box-shadow:
    inset 0 5px 0 rgba(255, 255, 255, 0.98),
    0 0 0 3.5px #f8ff88,
    0 0 32px rgba(172, 255, 92, 0.96),
    0 10px 24px rgba(0, 0, 0, 0.75) !important;
}

.lobbyBtnIcon {
  width: clamp(26px, 3.0vw, 40px);
  height: clamp(26px, 3.0vw, 40px);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 2px 2px rgba(12, 38, 24, 0.25));
  transition: transform var(--lobby-btn-hover-ms) cubic-bezier(0.22, 1.35, 0.36, 1);
}

.lobbyBtnIcon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.lobbyBtnLabel {
  flex: 1;
  text-align: center;
  padding-right: clamp(8px, 1.2vw, 18px);
  color: #132a1f;
  text-shadow:
    -1.5px -1.5px 0 #ffffff,
     1.5px -1.5px 0 #ffffff,
    -1.5px  1.5px 0 #ffffff,
     1.5px  1.5px 0 #ffffff,
     0px    2px   3px rgba(12, 38, 24, 0.25);
  white-space: nowrap;
}

.lobbyWmLockBadge {
  font-size: clamp(10px, 0.95vw, 12.5px);
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(18, 43, 32, 0.18);
  color: #1c3d2c;
  margin-left: -6px;
}

.lobbyCapsuleBtn[data-wm-locked="false"] .lobbyWmLockBadge {
  display: none !important;
}

.lobbyBtnEchoArcs {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 76%;
  pointer-events: none;
  opacity: 0.72;
  transition: transform var(--lobby-btn-hover-ms) ease, opacity var(--lobby-btn-hover-ms) ease, filter var(--lobby-btn-hover-ms) ease;
}

.lobbyMenuBtnWrap:hover .lobbyBtnEchoArcs,
.lobbyMenuBtnWrap:focus-within .lobbyBtnEchoArcs,
.lobbyMenuBtnWrap[data-active-menu="true"] .lobbyBtnEchoArcs {
  transform: translateY(-50%) translateX(5px) scale(1.1);
  opacity: 1;
  filter: drop-shadow(0 0 8px rgba(242, 255, 120, 0.95));
}

.lobbyPlayBurstRays {
  position: absolute;
  right: 4%;
  top: -34%;
  width: 48px;
  height: 36px;
  pointer-events: none;
  z-index: 9;
}

/* ============================================================================
   5. IN-GAME OPTIONS -> `로비로 복귀` BUTTON & CONFIRMATION DIALOG (§5-5 C04)
   ============================================================================ */
.returnLobbyOptBtn {
  background: linear-gradient(180deg, #ff9248 0%, #e05e1b 100%) !important;
  border: 1.5px solid #ffd8a8 !important;
  color: #fffdf5 !important;
  border-radius: 999px !important;
  padding: 8px 16px !important;
  font-family: var(--lobby-font) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  box-shadow: 0 3px 0 #8f3608 !important;
  cursor: pointer;
  transition: transform 120ms ease, filter 120ms ease;
}

.returnLobbyOptBtn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.returnLobbyOptBtn:active {
  transform: translateY(1px);
}

.returnLobbyConfirmModal {
  position: absolute;
  inset: 0;
  z-index: 28;
  display: grid;
  place-items: center;
  background: rgba(8, 18, 14, 0.72);
  backdrop-filter: blur(4px);
  padding: 18px;
}

.returnLobbyConfirmCard {
  width: min(410px, 92%);
  background: #fffdf6;
  border: 3px solid #6b965e;
  border-radius: 24px;
  padding: 22px 24px 18px;
  text-align: center;
  color: #243627;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.52);
  font-family: var(--lobby-font) !important;
}

.returnLobbyConfirmCard h4 {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 400;
  color: #1f3624;
}

.returnLobbyConfirmCard p {
  margin: 0 0 18px;
  font-size: 13.5px;
  line-height: 1.55;
  color: #495e4c;
}

.returnLobbyConfirmActions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.returnLobbyConfirmActions button {
  min-width: 120px;
  min-height: 42px;
  padding: 9px 18px !important;
  border-radius: 999px !important;
  font-family: var(--lobby-font) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  cursor: pointer;
}

.btnCancelReturnLobby {
  background: #eef5ea !important;
  border: 1.5px solid #bdd4b5 !important;
  color: #2c4730 !important;
}

.btnConfirmReturnLobby {
  background: linear-gradient(180deg, #ff883d 0%, #d95316 100%) !important;
  border: 1.5px solid #ffd8a8 !important;
  color: #fffdf5 !important;
  box-shadow: 0 3px 0 #8a3208 !important;
}

/* ============================================================================
   6. LOBBY LOCK TOAST & LIGHTWEIGHT KEY HELP PANEL (`.lobbyPanelHost`)
   ============================================================================ */
.lobbyToastBanner {
  position: absolute;
  left: 50%;
  bottom: 4.5%;
  transform: translateX(-50%) translateY(12px);
  background: rgba(14, 34, 28, 0.94);
  border: 2px solid #9ef868;
  color: #fffdf5;
  padding: 10px 22px;
  border-radius: 999px;
  font-size: clamp(12px, 1.2vw, 15.5px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55), 0 0 16px rgba(158, 248, 104, 0.32);
  z-index: 22;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
  white-space: nowrap;
}

.lobbyToastBanner.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.lobbyPanelHost {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  background: rgba(6, 18, 18, 0.68);
  backdrop-filter: blur(4px);
  padding: 18px;
  animation: lobbyFadeIn 180ms ease both;
}

.lobbyKeyHelpCard {
  width: min(560px, 92%);
  max-height: 88%;
  overflow-y: auto;
  background: linear-gradient(180deg, #13352f 0%, #0c2422 100%);
  border: 2.5px solid #8cf59e;
  border-radius: 26px;
  padding: 20px 24px 18px;
  color: #f6fff8;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.62), 0 0 24px rgba(112, 245, 152, 0.25);
}

.lobbyKeyHelpHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1.5px solid rgba(140, 245, 158, 0.28);
  padding-bottom: 10px;
  margin-bottom: 14px;
}

.lobbyKeyHelpHeader h3 {
  margin: 0;
  font-size: clamp(18px, 1.8vw, 23px);
  font-weight: 400;
  color: #e8ff98;
}

.lobbyKeyHelpCloseBtn {
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1.5px solid rgba(180, 255, 195, 0.55) !important;
  color: #fffdf5 !important;
  border-radius: 999px !important;
  padding: 6px 14px !important;
  font-size: 13px !important;
  cursor: pointer;
}

.lobbyKeyHelpCloseBtn:hover {
  background: rgba(140, 245, 158, 0.28) !important;
}

.lobbyKeyGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.lobbyKeySection {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(162, 242, 178, 0.26);
  border-radius: 16px;
  padding: 12px 14px;
}

.lobbyKeySection h4 {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 400;
  color: #9ef87a;
}

.lobbyKeyRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.10);
  font-size: 12.5px;
}

.lobbyKeyRow:last-child {
  border-bottom: none;
}

.lobbyKeyBadge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 8px;
  background: rgba(224, 255, 148, 0.18);
  border: 1px solid rgba(212, 255, 148, 0.55);
  color: #f2ffad;
  font-size: 11.5px;
  white-space: nowrap;
}

.lobbyKeyFooter {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11.5px;
  color: rgba(215, 245, 224, 0.80);
}

/* ============================================================================
   7. RESPONSIVE MOBILE LANDSCAPE (`844x390` / `800x450`) & REDUCED MOTION
   ============================================================================ */
@media (max-height: 500px), (max-width: 920px) {
  .lobbyMenu {
    right: 2.2%;
    top: 8.5%;
    bottom: 6.5%;
    width: min(33.0%, 296px);
    min-width: 192px;
    gap: 5px;
  }
  .lobbyMenuBtnWrap {
    min-height: 44px;
  }
  .lobbyCapsuleBtn {
    min-height: 44px;
    padding: 0 14px 0 12px !important;
    font-size: clamp(13.5px, 1.9vw, 17px) !important;
    gap: 8px !important;
  }
  .lobbyCapsuleBtn.btn-play {
    font-size: clamp(14.5px, 2.1vw, 18.5px) !important;
  }
  .lobbyBtnIcon {
    width: 22px;
    height: 22px;
  }
  .lobbyStickerItem { width: 100%; }
  .lobbyCelestialSticker { width: 78%; height: 78%; }
  .lobbyKeyGrid {
    grid-template-columns: 1fr;
  }
}

.returnLobbyOptBtn[hidden],
.returnLobbyConfirmModal[hidden],
.lobbyPanelHost[hidden] {
  display: none !important;
}

/* [v5 §4.3 & §4.4 L14] Keep lobby animations, 7-scene cross-dissolve, and 35s Day/Night transitions
   active even when Windows OS "Show animations in Windows" is turned off (prefers-reduced-motion: reduce),
   only toning down fast exit/entry scale jumps. */
@media (prefers-reduced-motion: reduce) {
  .lobbySlideLayer {
    transition: opacity var(--lobby-slide-dissolve-ms) ease-in-out !important;
  }
}