/* 
    PAPERCRAFT v.7 - 메인 화면 및 공통 디자인 CSS
*/

/* 
    ================================================
    1. CSS Reset & Base Settings (기본 초기화 설정)
    ================================================
*/
* {
  box-sizing: border-box;
  /* 패딩과 테두리를 너비에 포함 */
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-size: 16px;
  /* 반응형 기준이 되는 기본 폰트 크기 (1rem = 16px) */
  font-family: 'Courier New', Courier, monospace;
  color: white;

  /* 배경은 body나 html에 설정하여 화면 전체를 덮도록 합니다 */
  background: radial-gradient(circle at center, #0b1026, #000);
}

ul,
ol,
li {
  list-style: none;
  /* 리스트의 기본 블릿 기호 제거 */
}

a {
  text-decoration: none;
  /* 링크의 기본 밑줄 제거 */
  color: inherit;
  /* 링크 색상을 부모 요소에서 상속 */
}

button {
  font-family: inherit;
  /* 버튼에도 전역 폰트 적용 */
  outline: none;
  /* 포커스 시 생기는 기본 외곽선 제거 */
}

/* 
    ================================================
    2. Main Layout Settings (Body & Wrappers)
    ================================================
*/
body {
  /* 플렉스를 해제하고 블록 요소로 전환하여 margin: 0 auto 가 완벽히 동작하도록 변경 */
  display: block;
  overflow: hidden;
  /* 레이아웃이 화면을 넘어갈 때 스크롤바가 생기지 않도록 방지 */
}

#menu-layer {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto; /* 가로 중앙 정렬을 확실하게 보장 */
  /* min-width: 300px; */
  /* (요청) 최저 가로 크기 300px 제한 */
  height: 100%;
  display: flex;
  flex-direction: column;

  align-items: center;
  /* 내용물 가로 중앙 정렬 */
  padding: 20px;
  padding-top: 100px;
  padding-bottom: 50px; /* 하단 여백 추가 */
  /* 고정된 상단 바를 위한 공간 확보 */
  /* 브라우저 창 끝에 딱 붙지 않도록 여백 부여 */
}

/* 
    ================================================
    3. Typography & Headings
    ================================================
*/
/* 메인 게임 제목 스타일 */
h1 {
  font-size: 80px;
  /* 데스크탑 기본 폰트 크기 (Desktop-First) */
  margin-top: 5vh;
  /* 상단 여백 (화면 높이 기준) */
  margin-bottom: 10px;

  /* 텍스트 그라데이션 및 그림자 효과 */
  background: linear-gradient(to right, #00f260, #0575e6);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 20px rgba(5, 117, 230, 0.5);
  letter-spacing: 5px;
  text-align: center;
}

/* 화면 너비가 600px 이하일 때 h1 크기 반응형 조절 (모바일 대응) */
@media all and (max-width: 600px) {
  h1 {
    font-size: 13vw;
  }
}

/* 부제목 스타일 ("기하학 방어전" 등) */
.subtitle {
  font-size: 24px;
  color: #aab;
  margin-bottom: 50px;
  letter-spacing: 5px;
  text-align: center;
}

/* 
    ================================================
    4. Components (Buttons, etc.)
    ================================================
*/
/* 메인 메뉴 버튼 공통 스타일 */
.menu-btn {
  background: transparent;
  border: 2px solid #0575e6;
  color: #fff;
  padding: 15px 50px;
  font-size: 24px;
  margin: 10px;
  cursor: pointer;
  border-radius: 5px;
  transition: all 0.3s;

  /* 고정 너비 대신 최대 너비를 사용하여 작은 화면에서 자동으로 줄어들게 처리 */
  width: 100%;
  max-width: 300px;
  text-transform: uppercase;
  box-shadow: 0 0 10px rgba(5, 117, 230, 0.2);
}

.menu-btn:hover {
  background: #0575e6;
  box-shadow: 0 0 30px rgba(5, 117, 230, 0.8);
  transform: scale(1.05);
}

/* 튜토리얼 전용 버튼 스타일 */
.menu-btn.tutorial {
  border-color: #e43a15;
}

.menu-btn.tutorial:hover {
  background: #e43a15;
  box-shadow: 0 0 30px rgba(228, 58, 21, 0.8);
}

/* 
    ================================================
    5. Vertical Responsiveness (세로 크기 축소 시 대응)
    ================================================
*/
/* (요청) 세로 해상도가 700px 이하로 좁아졌을 때 컨텐츠 짤림 방지 */
@media all and (max-height: 700px) {
  #menu-layer {
    padding: 10px;
    padding-bottom: 40px; /* 세로가 짧을 때도 하단 여백 유지 */
    justify-content: center;
    /* 세로가 짧을 땐 요소들을 세로 중앙으로 모아 공간 효율 극대화 */
  }

  h1 {
    font-size: 60px;
    /* 데스크탑 기준 폰트 크기도 낮춤 */
    margin-top: 10px;
    margin-bottom: 5px;
  }

  @media all and (max-width: 600px) {
    h1 {
      font-size: 10vw;
      /* 세로가 짧고 화면도 좁은 모바일일 때 가로 기준 비율 적용 */
    }
  }

  .subtitle {
    font-size: 18px;
    margin-bottom: 20px;
    /* 타이틀과 버튼 사이 여백 축소 */
    letter-spacing: 3px;
  }

  .menu-btn {
    padding: 10px 20px;
    /* 버튼 내부 여백 축소 */
    font-size: 18px;
    /* 폰트 크기 축소 */
    margin: 5px;
    /* 버튼 간 간격 축소 */
    max-width: 250px;
    /* 최대 너비도 비례해서 축소 */
  }
}

/* 더 극단적으로 세로가 작은 화면 (예: 500px 이하) 추가 대응 */
@media all and (max-height: 500px) {
  h1 {
    font-size: 40px;
  }

  .subtitle {
    font-size: 14px;
    margin-bottom: 10px;
  }

  .menu-btn {
    padding: 5px 15px;
    font-size: 14px;
    margin: 3px;
    max-width: 200px;
  }
}

/* 
    ================================================
    6. Animations
    ================================================
*/
/* 로딩 스피너 회전 애니메이션 */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}