/* --- FONTS --- */
@font-face {
  font-family: 'Pretendard';
  src: url('../font/Pretendard/Pretendard-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Pretendard';
  src: url('../font/Pretendard/Pretendard-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'VigilanceBRK';
  src: url('../font/vigilance_brk/vigilanc.woff2') format('woff2'),
    url('../font/vigilance_brk/vigilanc.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Kartrider';
  src: url('../font/Kartrider/KartriderMedium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
}

/* --- RESPONSIVE REM SCALING (Pure CSS Aspect Ratio) --- */
/* 가로 1080px 기준 1rem = 20px (2배 확대: 20 / 1080 * 100vw = 1.8519vw) */
html {
  font-size: 1.8519vw;
}

/* 가로가 9:16 비율보다 넓어지면, 높이 100vh에 비례하도록 폰트 크기 변경 (20 / 1920 * 100vh = 1.0417vh) */
@media (min-aspect-ratio: 9/16) {
  html {
    font-size: 1.0417vh;
    font-size: calc(var(--vh, 1vh) * 1.0417);
    font-size: 1.0417dvh;
    /* dvh 표준 스케일링 추가 */
  }
}

/* --- RESET & BASE --- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
  -webkit-user-drag: none;
}

html,
body {
  width: 100%;
  height: 100%;
  background-color: #000000;
  color: #ffffff;
  font-family: 'Pretendard', -apple-system, sans-serif;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* --- LAYOUT (Pure CSS Portrait Letterboxing) --- */
.game-viewport {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url('../images/bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.game-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  height: 100dvh;
  /* iOS 주소창 연동 동적 뷰포트 높이 */
  max-width: calc(100vh * 9 / 16);
  max-width: calc(calc(var(--vh, 1vh) * 100) * 9 / 16);
  max-width: calc(100dvh * 9 / 16);
  max-height: calc(100vw * 16 / 9);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}

/* --- COMPONENTS --- */
/* 공통 버튼 (픽셀 해상도 트랜지션 및 3D 도트 모션 장착) */
.btn-primary {
  font-family: 'VigilanceBRK', sans-serif;
  font-size: 4.8rem;
  color: #ffffff;
  background-color: #00C8DC;
  border: none;
  padding: 1.2rem 4.5rem;
  cursor: pointer;
  border-radius: 99px;
  /* 물리 변화도 픽셀 느낌으로 툭 툭 변하도록 steps(2)를 가미한 트랜지션 */
  transition: transform 0.1s steps(2), box-shadow 0.1s steps(2), background-color 0.15s ease, color 0.15s ease;
  letter-spacing: 0.15rem;
  outline: none;

  opacity: 1;
  /* 애니메이션 교체 시 사라짐 방지를 위해 기본 노출 설정 */
  /* 대기 중에는 0% 투명도를, 종료 후에는 100% 투명도를 유지하도록 both 설정 */
  animation: pixel-resolution 0.7s steps(4) both;
  animation-delay: 2.7s;

  /* 레트로 3D 픽셀 버튼을 묘사하는 굵은 입체 하단 섀도우 */
  box-shadow: 0 0.4rem 0 #0096A8;
}

/* 호버 시: 위로 툭 점프하며 하단에 더 굵은 픽셀 그림자 생성 및 색상 깜빡임 전초 반전 */
.btn-primary:hover {
  background-color: #ffffff;
  color: #00C8DC;
  transform: translateY(-0.4rem);
  box-shadow: 0 0.8rem 0 #0096A8;
}

/* 클릭(액티브) 시: 꾹 눌려 내려앉으며 버튼이 픽셀 글리치처럼 초고속 반전 점멸 */
.btn-primary:active {
  transform: translateY(0.2rem);
  box-shadow: 0 0.2rem 0 #0096A8;
  animation: btn-click-blink 0.12s steps(2) infinite;
  opacity: 1 !important;
  /* 팝업 블로킹 시 투명화 방지용 */
}

/* 클릭 시 픽셀 점멸(Blink) 키프레임 */
@keyframes btn-click-blink {
  0% {
    background-color: #ffffff;
    color: #00C8DC;
  }

  50% {
    background-color: #00C8DC;
    color: #ffffff;
  }

  100% {
    background-color: #ffffff;
    color: #00C8DC;
  }
}

/* --- SCENE: COMMON --- */
.scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4.8rem;
  /* 3.8rem에서 4.8rem으로 추가 확대하여 모바일 세로 뷰에 맞춰 시원한 공간 레이아웃 확보 */
  padding: 5rem;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
}

.scene.active {
  opacity: 1;
  pointer-events: auto;
}

/* --- SCENE: Title Scene --- */
/* 상단 타이틀 영역 */
.title-area {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.main-title {
  font-family: 'VigilanceBRK', sans-serif;
  font-size: 15rem;
  font-weight: normal;
  line-height: 1;
  letter-spacing: 0.5rem;
  color: #ffffff;

  opacity: 0;
  /* 초기 숨김 */
  animation: pixel-boot-title 0.6s steps(4) forwards;
  animation-delay: 0.2s;
  /* 부팅 인트로 시점 */
}

.subtitle-en {
  font-family: 'Pretendard', sans-serif;
  font-weight: 400;
  font-size: 1.8rem;
  letter-spacing: 0.05rem;
  color: #ffffff;
  margin-top: 0.5rem;

  opacity: 0;
  /* 초기 숨김 */
  width: 0;
  overflow: hidden;
  white-space: nowrap;
  margin-left: auto;
  margin-right: auto;
  animation: pixel-typing-en 1.2s steps(28) forwards, pixel-fade-in 0.1s forwards;
  animation-delay: 0.8s;
}

.subtitle-kr {
  font-family: 'Pretendard', sans-serif;
  font-weight: 700;
  /* Bold체 적용 */
  font-size: 2.5rem;
  letter-spacing: 0.1rem;
  margin-top: 0.8rem;
  /* 윗 간격 확보 */
  color: #ffffff;
  padding-left: 0.1rem;

  opacity: 0;
  /* 초기 숨김 */
  width: 0;
  overflow: hidden;
  white-space: nowrap;
  margin-left: auto;
  margin-right: auto;
  animation: pixel-typing-kr 0.8s steps(9) forwards, pixel-fade-in 0.1s forwards;
  animation-delay: 1.8s;
}

/* HOW TO PLAY? 개별 단어 박스 컨테이너 */
.guide-title-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
}

.guide-word {
  font-family: 'VigilanceBRK', sans-serif;
  font-size: 10.5rem;
  font-weight: normal;
  line-height: 1;
  letter-spacing: 0.2rem;
  text-align: center;
  width: max-content;
  padding: 0 2.2rem;
  border-radius: 0;
  position: relative;
  /* z-index auto를 완벽히 보존하여 Stacking Context 붕괴 방지 */
}

/* 텍스트 렌더링용 공통 스판 스타일 (글자 개별 애니메이션) */
.guide-word span {
  position: relative;
  /* z-index 작동용 */
  opacity: 0;
  animation: pixel-box-in 0.4s steps(3) forwards;
}

/* 배경 렌더링용 공통 가상 요소 (배경 개별 애니메이션) */
.guide-word::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  animation: pixel-box-in 0.4s steps(3) forwards;
}

/* 각 단어 박스 내부 자식 요소들에 개별 시간차 딜레이 부여 */
.guide-title-box .guide-word:nth-child(1) span,
.guide-title-box .guide-word:nth-child(1)::before {
  animation-delay: 1.0s;
}

.guide-title-box .guide-word:nth-child(2) span,
.guide-title-box .guide-word:nth-child(2)::before {
  animation-delay: 1.2s;
}

.guide-title-box .guide-word:nth-child(3) span,
.guide-title-box .guide-word:nth-child(3)::before {
  animation-delay: 1.4s;
}

/* 박스 오버랩(겹침) 스타일 */
.guide-word+.guide-word {
  margin-top: -2.8rem;
}

/* HOW & PLAY? : 텍스트는 TO 박스 위로, 배경은 TO 박스 아래로 */
.word-key {
  color: #ffffff;
}

.word-key span {
  z-index: 4;
}

.word-key::before {
  background-color: #00C8DC;
  border: 0.15rem solid #00C8DC;
  z-index: 1;
  top: 0.6rem;
}

/* TO : 텍스트는 중간, 배경은 HOW/PLAY? 배경을 덮음 */
.word-dark {
  color: #ffffff;
}

.word-dark span {
  z-index: 3;
}

.word-dark::before {
  background-color: #000000;
  border: none;
  z-index: 2;
}

/* PLAY? 박스 하단 말풍선 꼬리 및 단독 마진 */
.word-play {
  position: relative;
  margin-top: -3.4rem !important;
}

.word-play::after {
  content: '';
  position: absolute;
  bottom: -2.8rem;
  left: 50%;
  transform: translateX(-50%);
  border-width: 3.0rem 3.5rem 0 0;
  border-style: solid;
  border-color: #00C8DC transparent transparent transparent;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 4;

  opacity: 0;
  /* 초기 숨김 */
  animation: pixel-fade-in 0.1s forwards;
  animation-delay: 1.5s;
  /* PLAY? 박스 팝업 완료 후 꼬리 노출 */
}

/* 설명글 및 시작 버튼 영역 */
.content-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
  width: 100%;
}

.guide-desc {
  font-family: 'Pretendard', sans-serif;
  font-weight: 400;
  /* Bold 최소화 (Regular 적용) */
  font-size: 2.1rem;
  /* 폰트 크기 확대 */
  line-height: 1.6;
  color: #ffffff;
  text-align: center;
  word-break: keep-all;

  opacity: 0;
  /* 초기 숨김 */
  transform: translateY(2rem);
  animation: pixel-slide-up 0.4s steps(4) forwards;
  animation-delay: 2.3s;
}


/* --- ANIMATION KEYFRAMES (Pixel Game Theme) --- */

/* 1. 타이틀 부팅 깜빡임 (Steps 기반 글리치 연출) */
@keyframes pixel-boot-title {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }

  25% {
    opacity: 0.4;
  }

  50% {
    opacity: 0.2;
  }

  75% {
    opacity: 0.9;
    transform: scale(1.03);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* 2. 영문 서브타이틀 타이핑 */
@keyframes pixel-typing-en {
  from {
    width: 0;
  }

  to {
    width: 38rem;
  }

  /* 폰트/자간 비례 100% 너비 확보 */
}

/* 3. 국문 서브타이틀 타이핑 */
@keyframes pixel-typing-kr {
  from {
    width: 0;
  }

  to {
    width: 25.5rem;
  }
}

/* 4. 단순 페이드 인 */
@keyframes pixel-fade-in {
  to {
    opacity: 1;
  }
}

/* 5. 픽셀화 박스 깜빡임 등장 (레이아웃 틀어짐 방지용) */
@keyframes pixel-box-in {
  0% {
    opacity: 0;
  }

  33% {
    opacity: 1;
  }

  66% {
    opacity: 0.2;
  }

  100% {
    opacity: 1;
  }
}

/* 6. 설명글 픽셀 슬라이드 업 */
@keyframes pixel-slide-up {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 7. 버튼 픽셀 해상도 복원 효과 (저해상도 도트 뭉치 -> 고해상도 맑은 도트 폰트) */
@keyframes pixel-resolution {
  0% {
    opacity: 0;
    /* 뚱뚱하고 뭉툭한 8bit 픽셀 폰트 렌더링 연출 (굵은 그림자 및 강한 블러+대비 필터링) */
    text-shadow:
      -0.6rem -0.6rem 0 #ffffff, 0.6rem 0.6rem 0 #ffffff,
      -0.6rem 0.6rem 0 #ffffff, 0.6rem -0.6rem 0 #ffffff,
      0 -0.6rem 0 #ffffff, 0 0.6rem 0 #ffffff,
      -0.6rem 0 0 #ffffff, 0.6rem 0 #ffffff;
    filter: blur(0.2rem) contrast(15);
    transform: scale(0.95);
  }

  33% {
    opacity: 0.6;
    /* 픽셀 덩어리가 서서히 가라앉으며 글자가 정돈되는 중간 단계 */
    text-shadow:
      -0.3rem -0.3rem 0 #ffffff, 0.3rem 0.3rem 0 #ffffff,
      -0.3rem 0.3rem 0 #ffffff, 0.3rem -0.3rem 0 #ffffff;
    filter: blur(0.1rem) contrast(8);
    transform: scale(0.97);
  }

  66% {
    opacity: 0.9;
    /* 그림자 크기가 조밀해져 글자 원형이 거의 다듬어지는 단계 */
    text-shadow:
      -0.15rem -0.15rem 0 #ffffff, 0.15rem 0.15rem 0 #ffffff;
    filter: blur(0.05rem) contrast(3);
    transform: scale(0.99);
  }

  100% {
    opacity: 1;
    /* 그림자와 필터가 완벽히 소거되어 선명한 고해상도 폰트 노출 */
    text-shadow: 0 0 0 transparent;
    filter: blur(0) contrast(1);
    transform: scale(1);
  }
}

/* 우측 상단 픽셀 스타일 사운드 토글 버튼 (아이콘용 정사각형) */
.sound-toggle-btn {
  position: fixed;
  /* absolute에서 fixed로 전환하여 뷰포트 우측 상단에 고정 */
  top: 4rem;
  right: 4rem;
  z-index: 100;
  /* 모든 화면 위에 항상 고정 노출 */
  width: 5.5rem;
  height: 5.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00C8DC;
  /* 기본 상태 (SOUND ON): 청록색 */
  background-color: transparent;
  border: 0.15rem solid #00C8DC;
  padding: 0;
  cursor: pointer;
  border-radius: 0;
  /* 픽셀 도트 테마 직각 고수 */
  outline: none;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.sound-toggle-btn svg {
  width: 3.2rem;
  height: 3.2rem;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* SOUND ON 상태 호버 시: 청록색(Primary) 채우기, 검은색 아이콘 반전 */
.sound-toggle-btn:hover {
  background-color: #00C8DC;
  border-color: #00C8DC;
  color: #000000;
}

/* SOUND OFF 상태 (음소거): 공통 흰색 */
.sound-toggle-btn.sound-off {
  color: #ffffff;
  border-color: #ffffff;
}

/* SOUND OFF 상태 호버 시: 동일하게 청록색(Primary) 채우기, 검은색 반전 */
.sound-toggle-btn.sound-off:hover {
  background-color: #00C8DC;
  border-color: #00C8DC;
  color: #000000;
}

.sound-toggle-btn:active {
  filter: brightness(0.8);
}

/* --- IN-GAME SCENE & CANVAS LAYOUT --- */
/* 공통 씬 레이아웃 */
.scene {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  flex-direction: column;
  box-sizing: border-box;
}

.scene.active {
  display: flex;
}

/* 인게임 격추 씬 기본 구조 (Flex-Box 기반 레이아웃 정립) */
#game-scene {
  position: fixed;
  /* fixed로 승격하여 조상의 가로 제약 우회 */
  top: 0;
  left: 0;
  width: 100vw;
  /* 브라우저 가로 100% 반응형 꽉 채움 */
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  height: 100dvh;
  /* 동적 뷰포트 높이 장착 */
  background: transparent;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* 상단 가이드, 중앙 캔버스, 하단 로고 등간격 자동 분배 */
  align-items: center;
  gap: 0;
  /* .scene 공통의 4.8rem gap 상속을 강제 비활성화하여 캔버스 상하 갭 최소화 */
  padding-top: 1.2dvh;
  padding-left: 2rem;
  padding-right: 2rem;
  padding-bottom: calc(var(--vh, 1vh) * 3.2);
  padding-bottom: 3.2dvh;
  /* 모바일 기기 하단 주소창/메뉴바 간섭 방어용 세이프에어리어 바닥 여백 복구 */
  box-sizing: border-box;
}

/* 캔버스 래핑용 레이아웃 정렬 컨테이너 */
.game-screen-wrapper {
  position: relative;
  width: 100%;
  flex-grow: 1;
  /* 가용 세로 공간을 우선적으로 독점 리사이징 */
  flex-shrink: 1;
  min-height: 0;
  /* Flex 자식 캔버스가 부모 영역을 찢고 나가는 겹침 버그 차단 */
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

/* 캔버스 기본 꽉 채움 배치 (box.png 레트로 픽셀 프레임만 얹음) */
#game-canvas {
  position: relative;
  /* z-index 순위 작동 */
  z-index: 10;
  /* 뒷단 레이더 이미지(z-index: 5)보다 한 층 전면 배치 */
  width: 100%;
  height: 100%;
  background-image: url('../images/box.png');
  /* 외부 테두리 박스 프레임 연동 */
  background-size: 100% 100%;
  /* 프레임 100% 꽉 채움 */
  background-position: center;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background-color: transparent;
  display: block;
}

/* 단독으로 회전/펄싱 모션을 전개하는 독립 레이더 오버레이 레이어 */
.game-radar-layer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  /* 가로 크기 80% (이전 background-size 80% 설정값 보존) */
  height: 80%;
  max-width: calc(100vh * 9 / 16 * 0.8);
  /* 캔버스 비율에 대응하는 최대가로 제어 */
  aspect-ratio: 1 / 1;
  /* 완벽한 정원형 조준 비율 고수 */
  background-image: url('../images/rader.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
  /* 사용자 클릭 관통 */
  z-index: 5;
  /* 캔버스 위로 오버레이 */
  image-rendering: pixelated;
  image-rendering: crisp-edges;

  /* 회전을 제거하고 레트로 모니터 특유의 펄스 호흡 및 지지직거리는 8비트 점멸만 바인딩 */
  animation: radar-pulse 6s ease-in-out infinite, radar-flicker 0.15s steps(2) infinite;
}

/* 오폭 패널티용 붉은색 화면 지지직 깜빡임 오버레이 (최상위에서 번쩍임) */
.red-flash-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 0, 0, 0.45);
  pointer-events: none;
  /* 클릭 관통 */
  z-index: 99;
  /* 캔버스 및 레이더보다 위에서 번쩍임 */
  opacity: 0;
  display: block;
}

.red-flash-overlay.flash-active {
  animation: red-warning-flicker 0.28s steps(2) 2;
  /* 레트로 8bit 2회 긴급 경고 점멸 */
}

@keyframes red-warning-flicker {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.red-flash-overlay.start-flash {
  background-color: #ffffff;
  /* 부팅/재기동 시 아케이드 전광판 백색 플래시 */
  animation: start-flash-anim 0.5s ease-out forwards;
}

@keyframes start-flash-anim {
  0% {
    opacity: 0.85;
  }

  100% {
    opacity: 0;
  }
}

/* --- IN-GAME TEXT OVERLAP SYSTEM (2줄 가로/세로 오버랩 튜닝) --- */
/* 인게임 상단 겹침 가이드 타이틀 컨테이너 */
.game-guide-title {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  z-index: 100;
  margin-bottom: 1.4rem;
  /* 상하 gap 균등 통일 (1.4rem 대칭) */
  pointer-events: none;
}

/* 2줄 레이아웃용 가로 유연 행 (지그재그 어긋남 및 입체 겹침 튜닝) */
.game-guide-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: relative;
}

/* 1행 ('다양한~'): 좌측 편향 정렬 및 2행 위로 오도록 뎁스 격상 */
.game-guide-row:nth-child(1) {
  transform: translateX(-4.5rem);
  /* 왼쪽으로 4.5rem 시프트 */
  z-index: 20;
  /* 1행이 2행 위로 올라오도록 뎁스 격상 */
}

/* 2행 ('드론을~'): 우측 편향 정렬 (약간 왼쪽으로 조정) */
.game-guide-row:nth-child(2) {
  transform: translateX(2.0rem);
  /* 4.5rem에서 2.0rem으로 줄여 약간 왼쪽으로 쏠림 보정 */
  z-index: 10;
  /* 1행 밑으로 포개지도록 10 설정 */
  margin-top: -1rem;
  /* 패딩 두께 추가에 비례하여 -1.4rem으로 겹침 보정 */
}

/* Kartrider 기반 국문 픽셀 오버랩 가이드 박스 */
.game-guide-title .guide-word {
  font-family: 'Kartrider', sans-serif;
  font-weight: bold;
  /* 500 ➡️ bold 로 두께 부스팅 */
  font-size: 3.2rem;
  /* 4.2rem에서 3.2rem으로 컴팩트하게 축소 */
  line-height: 1;
  /* 줄높이 100% (1) 규격화 */
  letter-spacing: -0.05rem;
  padding: 2rem 2rem 1.5rem;
  /* 좌우 패딩을 1.2rem ➡️ 2.8rem 으로 넉넉하게 증폭 */
  width: max-content;
}

/* 가로 단어 간의 오버랩 음수 마진 */
.game-guide-row .guide-word+.guide-word {
  margin-left: -1.4rem;
  /* 가로 방향 겹침 적용 */
}

/* 가로 방향 겹침 z-index 입체 순위 맵핑 (오른쪽이 왼쪽을 덮는 규격) */
.game-guide-row .guide-word:nth-child(1)::before {
  z-index: 1;
}

.game-guide-row .guide-word:nth-child(2)::before {
  z-index: 2;
}

/* 오른쪽 배경이 덮음 */
.game-guide-row .guide-word:nth-child(1) span {
  z-index: 3;
}

.game-guide-row .guide-word:nth-child(2) span {
  z-index: 4;
}

/* 오른쪽 글자가 최상위 */

/* 가로 방향 타이핑 등장 시간차 딜레이 매칭 */
.game-guide-row:nth-child(1) .guide-word:nth-child(1) span,
.game-guide-row:nth-child(1) .guide-word:nth-child(1)::before {
  animation-delay: 0.2s;
}

.game-guide-row:nth-child(1) .guide-word:nth-child(2) span,
.game-guide-row:nth-child(1) .guide-word:nth-child(2)::before {
  animation-delay: 0.4s;
}

.game-guide-row:nth-child(2) .guide-word:nth-child(1) span,
.game-guide-row:nth-child(2) .guide-word:nth-child(1)::before {
  animation-delay: 0.7s;
}

.game-guide-row:nth-child(2) .guide-word:nth-child(2) span,
.game-guide-row:nth-child(2) .guide-word:nth-child(2)::before {
  animation-delay: 0.9s;
}

/* --- BRANDING FOOTER LOGO --- */
.game-footer-logo {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

.game-footer-logo img {
  height: 3.8rem;
  /* 3.2rem ➡️ 3.8rem 으로 조금 키워 존재감 및 가독성 확보 */
  width: auto;
  opacity: 0.9;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.game-footer-area {
  position: relative;
  width: 100%;
  height: 5.0rem;
  /* 로고 확대에 비례하여 푸터 높이 5.0rem 확장 */
  margin-top: 1.4rem;
  /* 상하 gap 균등 통일 (1.4rem 대칭) */
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

/* --- GAME RADAR ANIMATION KEYFRAMES --- */
/* 레이더 펄싱 모션 (회전은 캔버스 내부에서 별도로 드로잉되므로 소거) */
@keyframes radar-pulse {
  0% {
    transform: translate(-50%, -50%) scale(0.99);
    opacity: 0.88;
  }

  50% {
    transform: translate(-50%, -50%) scale(1.01);
    opacity: 0.98;
  }

  100% {
    transform: translate(-50%, -50%) scale(0.99);
    opacity: 0.88;
  }
}

/* 8비트 디스플레이 특유의 자지러지는 미세 지지직(Flicker) 점멸 */
@keyframes radar-flicker {
  0% {
    filter: brightness(1) contrast(1);
  }

  50% {
    filter: brightness(1.04) contrast(1.03);
  }

  100% {
    filter: brightness(0.98) contrast(0.98);
  }
}

.game-footer-counter {
  position: absolute;
  left: 2rem;
  /* 캔버스 좌측 보더라인과 칼같이 대칭 보정 */
  bottom: 0;
  font-family: 'VigilanceBRK', sans-serif;
  font-size: 3.2rem;
  /* 시원하고 볼드한 픽셀 타이머 숫자 */
  z-index: 10;
  pointer-events: none;
  /* 클릭 이벤트 투과 */
}

/* 오폭 패널티 적용 시 타이머 숫자 빨갛게 점멸/유지 */
.game-footer-counter.penalty .time-num {
  color: #ff3b30 !important;
  text-shadow: 0 0 0.8rem rgba(255, 59, 48, 0.6) !important;
  transition: color 0.1s ease, text-shadow 0.1s ease;
}

.game-footer-counter .time-num {
  color: #00C8DC;
  /* 숫자 부분: Primary 청록색 형광 발광 복원 */
  text-shadow: 0 0 0.8rem rgba(0, 200, 220, 0.5);
  /* 청록색 글로우 효과 */
}

.game-footer-counter .time-unit {
  color: #ffffff;
  /* 단위 부분: 흰색 본문 매칭 */
  font-family: 'Pretendard', sans-serif;
  font-size: 2.2rem;
  font-weight: 600;
  margin-left: 0.4rem;
  text-shadow: none;
  /* 글로우 제거하여 높은 가시 대비 확보 */
}

/* --- RESULT SCENE (결과 화면) STYLE --- */
#result-scene {
  position: absolute;
  /* 콕핏 창 틀 내에서 절대 정렬 고정 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  /* 배경색 제거 */
  display: flex;
  align-items: center;
  /* 세로 정중앙 정렬 */
  justify-content: center;
  /* 가로 정중앙 정렬 */
  z-index: 200;
  /* 최상위 오버레이 배치 */
}

.result-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 하위 요소 가로 정중앙 강제 정렬 */
  justify-content: center;
  width: 100%;
  /* 가로 폭 100% 꽉 채워 텍스트 탈출 방지 */
  max-width: 900px;
  /* 초대형 폰트 수용을 위해 최대폭 확장 */
  background: transparent;
  /* 박스 내부 배경색 완전 제거 (투명) */
  border: none;
  /* 외곽 테두리 상자 삭제 */
  padding: 0;
  /* 패딩에 의한 수평 쏠림 원천 차단 */
  text-align: center;
  box-shadow: none;
  /* 그림자 그림 데코 삭제 */
}

.result-title {
  font-family: 'VigilanceBRK', sans-serif;
  font-size: 11.5rem;
  /* 한 층 더 웅장하게 초대형 극대화 (8.2rem ➡️ 11.5rem) */
  font-weight: normal;
  color: #ffffff;
  /* 폰트 색상 흰색 교체 */
  letter-spacing: 0.2rem;
  margin: 0;
  text-shadow: 0 0 1.5rem rgba(255, 255, 255, 0.55);
  /* 흰색 발광 글로우 적용 */
  white-space: nowrap;
  /* 줄바꿈 절대 방지 */
  opacity: 0;
  /* 초기 등장 전 숨김 */
}

.result-title.reveal {
  animation: result-title-reveal 0.65s cubic-bezier(0.19, 1, 0.22, 1) both;
  /* 자간 팽창 분해 등장 */
}

.result-subtitle {
  font-family: 'Pretendard', sans-serif;
  font-size: 1.8rem;
  color: #ffffff;
  opacity: 0.75;
  margin-top: 1.2rem;
  letter-spacing: 0.15rem;
  white-space: nowrap;
  /* 줄바꿈 절대 방지 */
}

.score-container {
  border: none;
  /* 내부 점선 테두리 상자 삭제 */
  margin: 0.6rem 0;
  /* 1.8rem ➡️ 0.6rem 으로 대폭 수축 */
  padding: 0 2rem;
  /* 상하 패딩 0 으로 제거하여 수직 공백 축소 */
  background: transparent;
  /* 스코어 박스 배경색 완전 제거 (투명) */
  opacity: 0;
  /* 초기 등장 전 숨김 */
}

.score-container.reveal {
  animation: score-reveal 0.65s cubic-bezier(0.19, 1, 0.22, 1) both;
  animation-delay: 0.35s;
  /* 전선이 슥 그려져 흘러내린 직후 아래서 솟아남 */
}

.score-label {
  font-family: 'Pretendard', sans-serif;
  font-size: 4.6rem;
  /* 한 차례 더 추가 격상 (3.8rem ➡️ 4.6rem) */
  color: #ffffff;
  opacity: 0.95;
  /* 0.55에서 0.95로 올려서 선명한 흰색 노출 */
  font-weight: 600;
  /* bold 느낌 조금 수혈 */
  letter-spacing: 0.1rem;
  margin-bottom: -0.8rem;
  /* 0.4rem ➡️ -0.8rem 음수 마진으로 폰트 고유 빈 공간까지 깎아 초밀착 */
  white-space: nowrap;
  /* 줄바꿈 절대 방지 */
}

.score-value {
  display: inline-flex;
  align-items: baseline;
  /* 서로 크기가 다른 초 숫자와 "초" 단위 텍스트의 밑바닥선을 수평 칼일치 시킴 */
  justify-content: center;
  font-family: 'VigilanceBRK', sans-serif;
  letter-spacing: 0.15rem;
  white-space: nowrap;
  /* 줄바꿈 절대 방지 */
}

.score-value .time-num {
  font-size: 12.5rem;
  /* 초 숫자 크기를 한층 더 초대형으로 격상 (8.6rem ➡️ 12.5rem) */
  color: #00C8DC;
  /* 초록 ➡️ Primary 청록 LCD 형광색 복원 */
  text-shadow: 0 0 1.5rem rgba(0, 200, 220, 0.6);
  /* 청록색 형광 글로우 적용 */
}

.score-value .time-unit {
  color: #ffffff;
  /* 단위 부분: 흰색 고수 */
  font-family: 'Pretendard', sans-serif;
  font-size: 4.8rem;
  /* 비례에 맞추어 2차 확대 (3.8rem ➡️ 4.8rem) */
  font-weight: 600;
  margin-left: 0.6rem;
  text-shadow: none;
  /* 글로우 제거하여 선명한 대비 확보 */
}

#retry-btn {
  margin-top: 3.8rem;
  /* 1.5rem ➡️ 3.8rem 으로 상단 여백 확장 */
  white-space: nowrap;
  /* TIME RESET 글씨 줄바꿈 방지 */
  opacity: 0;
  /* 초기 등장 전 숨김 */
}

#retry-btn.reveal {
  animation: btn-reveal 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  /* 통통 바운싱 등장 */
  animation-delay: 0.6s;
  /* 최종 성적 표출 완료 후 위엄있게 마침표 */
}

/* 리빌 클래스가 없는 대기 상태에서는 완전히 감추어 물리적 플리커(Flicker) 노출 차단 */
.result-title:not(.reveal),
.score-container:not(.reveal),
#retry-btn:not(.reveal),
.btn-home:not(.reveal) {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* --- 계단형 SF 회로 전선 SVG 스타일 --- */
.circuit-wire-wrapper {
  width: 160px;
  height: 50px;
  margin: 1.8rem auto 1.4rem auto;
  /* MISSION과 나의 클리어타임 사이의 가이드 라인 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.circuit-wire {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 0.8rem rgba(255, 255, 255, 0.6));
  /* 백색 네온 글로우로 갱신 */
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.circuit-wire path {
  stroke-dasharray: 200;
  /* 선의 길이 */
  stroke-dashoffset: 200;
  /* 선을 감춰두기 */
}

.circuit-wire-wrapper.reveal path {
  animation: circuit-wire-draw 0.7s cubic-bezier(0.19, 1, 0.22, 1) both;
  animation-delay: 0.2s;
  /* MISSION 제목이 샥 펼쳐지는 시점에 실시간 드로잉 융합 */
}

/* --- 결과 씬 유기적 개별 모션 Keyframes 정의 --- */
@keyframes result-title-reveal {
  from {
    opacity: 0;
    transform: translateY(-25px) scale(0.95);
    letter-spacing: 1.5rem;
    /* 글자 간격이 샥 퍼지면서 등장 */
    filter: blur(5px);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    letter-spacing: 0.2rem;
    filter: blur(0);
  }
}

@keyframes circuit-wire-draw {
  to {
    stroke-dashoffset: 0;
    /* 선이 위에서 사선으로 슥 자라남 */
  }
}

@keyframes score-reveal {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes btn-reveal {
  from {
    opacity: 0;
    transform: scale(0.8);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* --- 결과 씬 전용 홈(Home) 원형 버튼 스타일 --- */
.btn-home {
  background: transparent;
  border: 2px solid #ffffff;
  color: #ffffff;
  width: 6.8rem;
  height: 6.8rem;
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-top: 2.0rem;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 1.5rem;
  box-shadow: 0 0.4rem 0 rgba(255, 255, 255, 0.2);
  opacity: 0;
  /* 초기 숨김 */
  outline: none;
}

.btn-home.reveal {
  animation: btn-reveal 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: 0.75s;
  /* TIME RESET 버튼(0.6s) 바로 다음 딜레이 기동 */
}

.btn-home:hover {
  background-color: #ffffff;
  color: #000000;
  transform: translateY(-0.3rem);
  box-shadow: 0 0.7rem 0 rgba(255, 255, 255, 0.35);
}

.btn-home:active {
  transform: translateY(0.1rem);
  box-shadow: 0 0.1rem 0 rgba(255, 255, 255, 0.2);
}

.btn-home svg {
  width: 100%;
  height: 100%;
}