@font-face {
    font-family: 'Jua'; /* 주아체 폰트 이름 */
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/Jua.woff') format('woff');
    font-weight: normal;
    font-style: normal;
  }
  
  body {
    margin: 0;
    padding: 0;
    /* 어두운 보라색 계열 배경 및 별 패턴 추가 */
    background-color: #ab73ff; /* 이미지 참고하여 크림/베이지색 배경 */
    font-family: 'Press Start 2P', cursive;
    text-align: center;
    color: #ffffff; /* Glassmorphism: Text color white */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
    /* 기존 별 패턴 배경 이미지 유지 또는 변경 */
    /* background-image: url('images/stars.png'); */ /* 주석 처리 또는 새로운 패턴 이미지 사용 */
    background-repeat: repeat;
    background-size: cover;
    background-attachment: fixed;

    /* 레트로 그리드 패턴 추가 - 색상 조정 */
    background-image:
      linear-gradient(to right, rgba(255, 226, 235, 0.1) 1px, transparent 1px), /* 핑크 계열 그리드 */
      linear-gradient(to bottom, rgba(255, 246, 249, 0.1) 1px, transparent 1px); /* 핑크 계열 그리드 */
    background-size: 20px 20px; /* 그리드 셀 크기 */
    /* 기존 background-image가 있다면 병합 또는 순서 조정 필요 */
    /* 예: background-image: url('images/stars.png'), linear-gradient(...), linear-gradient(...); */
    padding-top: 0; /* GNB 관련 padding-top 제거 */
  }
  
  /* 기존 배경 별 패턴 임시 제거 스타일 제거 */
  body::before {
    content: none;
  }
  
  h1 {
    font-size: 30px;
    line-height: 1.4;
    color: #e75480; /* Retro: Pink color */
    margin-top: 0;
    margin-bottom: 20px;
    font-family: 'Press Start 2P', cursive;
    padding: 15px 25px;
    text-shadow: 2px 2px 0 #b49fff, -2px -2px 0 #b49fff, 2px -2px 0 #b49fff, -2px -2px 0 #b49fff;
    border: 3px solid #1a162d; /* Dark border */
    box-shadow: 4px 4px 0 0 #87CEEB; /* Light blue shadow */
    background-color: #ab73ff; /* Purple background */
  }
  
  #startScreen {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px; /* 패딩 조정 */
    /* Glassmorphism 스타일 제거 */
    /* Retro 스타일 복구 제거 */
    /* background-color: rgba(255, 255, 255, 0.8); */ /* Slightly transparent white background */
    /* border: 6px solid #ffffff; */ /* Thick white border */
    /* box-shadow: 8px 8px 0 0 #FF74A2; */ /* Pink shadow */
    /* color: #1a162d; */ /* Retro: Dark text color */
    /* border-radius: 0; */ /* Sharp corners */

    /* Reverting to a neutral state or re-applying glassmorphism if needed later */
    /* background-color: #ffffff; */ /* Set background to white */
    /* border: 6px solid #e75480; */ /* Add thick pink border */
    /* box-shadow: none; */ /* Remove shadow */

    /* Apply liked retro style from provided snippet */
    background-color: rgba(255, 255, 255, 0.8); /* Slightly transparent white background */
    border: 6px solid #ffffff; /* Thick white border */
    box-shadow: 8px 8px 0 0 #FF74A2; /* Pink shadow */
    color: #1a162d; /* Retro: Dark text color (텍스트 색상은 h1에서 오버라이드) */
    border-radius: 0; /* Sharp corners */

    max-width: 400px;
    width: 90%;
    margin-top: 80px; /* Adjusted for layout below header area */
    position: relative;
    overflow: hidden;
  }
  
  #startScreen::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 30px; /* Height of the title bar */
    background-color: #FF74A2; /* Pink color 다시 적용 */
    /* background-color: transparent; */ /* Remove pink background */
    z-index: 1;
  }
  
  #startScreen h1 {
    position: relative;
    z-index: 2;
    margin-top: 10px; /* Increased top margin */
    margin-bottom: 10px;
    padding: 0 10px;
    font-size: 20px; /* Reduced font size to h3 level */
    /* color: #1a162d; */ /* Dark color for text on pink bar */
    color: #B49FFF; /* Change text color to light purple */
    text-shadow: none;
    border: none;
    box-shadow: none;
    background-color: transparent;
  }
  
  #startImage {
    display: none;
  }
  
  #nicknameInput {
    font-size: 18px;
    padding: 10px;
    border-radius: 5px; /* 모서리 둥글게 */
    /* Glassmorphism 스타일에 맞게 조정 제거 */
    /* border: 1px solid rgba(255, 255, 255, 0.3); */
    /* background-color: rgba(255, 255, 255, 0.1); */
    /* color: #ffffff; */
    /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
    width: calc(100% - 24px); /* 테두리 및 패딩 고려 */
    text-align: left;
    outline: none;
    transition: all 0.1s ease-in-out;
    /* 레트로 커서 느낌 */
    caret-color: #FF74A2; /* 분홍색 커서 다시 적용 */
    /* Retro: Add thick border and background */
    /* border: none; */ /* Remove border */
    border: 3px solid #e75480; /* 분홍색 테두리로 변경 */
    background-color: #FFC0CB; /* 입력창 배경색을 연분홍색으로 변경 */
    /* color: inherit; */ /* Inherit text color */
    /* color: #333333; */ /* Dark grey text color for better readability */
    /* color: #1a162d; */ /* Dark text color 다시 적용 */
    color: #1a162d; /* Change input text color to match start button font color */
    padding: 12px;
    margin-bottom: 12px; /* 간격을 12px로 좁힘 */
    box-shadow: 4px 4px 0 0 #87CEEB; /* Light blue shadow */
  }
  
  #nicknameInput::placeholder {
    color: #FF74A2; /* Change placeholder color to pink */
  }
  
  #nicknameInput:focus {
    border-color: #B49FFF; /* 포커스 시 보라색 테두리 (유지) */
    box-shadow: 0 0 8px rgba(180, 159, 255, 0.5); /* Keep subtle glow */
  }
  
  button {
    /* font-size: 40px; */ /* 크기 2배 키움 */
    /* padding: 24px 48px; */
    /* Glassmorphism 스타일 제거 */
    /* Retro 스타일 제거 및 .back-button 스타일 적용 */
    /* background-color: transparent; */ /* Remove pink background */
    /* color: inherit; */ /* Inherit text color */
    /* border: none; */ /* Remove border */
    /* border-radius: 0; */ /* Sharp corners */
    /* box-shadow: none; */ /* Remove shadow */
    /* cursor: pointer; */
    /* transition: all 0.3s ease-in-out; */
    font-family: 'Press Start 2P', cursive;
    /* margin-top: 20px; */ /* 중복된 margin-top 제거 */
    /* letter-spacing: 2px; */
    /* text-transform: uppercase; */

    /* Apply .back-button style and requested size (approx 1.2x original) */
    display: inline-block;
    margin-top: 12px; /* 간격을 12px로 유지 */
    margin-bottom: 20px; /* 내용과의 간격 */
    padding: 12px 24px; /* 요청된 크기 (약 1.2배) */
    background-color: #FF74A2; /* 핑크 배경 */
    color: #1a162d; /* 어두운 글씨 */
    text-decoration: none; /* 밑줄 제거 */
    font-size: 24px; /* Reduced font size */
    border: 3px solid #1a162d; /* 어두운 테두리 */
    border-radius: 0; /* 각진 모서리 */
    box-shadow: 4px 4px 0 0 #B49FFF; /* 보라색 그림자 */
    transition: all 0.1s ease-in-out;
  }
  
  button:hover {
    /* Glassmorphism 호버 스타일 제거 */
    /* Retro 호버 스타일 제거 및 .back-button 호버 스타일 적용 */
     /* background-color: #B49FFF; */ /* Purple background on hover */
     /* box-shadow: 4px 4px 0 0 #FF74A2; */ /* Pink shadow on hover */
     /* transform: translate(-2px, -2px); */ /* Shift on hover */

     /* Apply .back-button:hover style */
     background-color: #B49FFF; /* 호버 시 보라색 배경 */
     box-shadow: 4px 4px 0 0 #FF74A2; /* 호버 시 핑크 그림자 */
     transform: translate(-2px, -2px); /* 살짝 움직이는 효과 */
  }
  
  button:active {
    /* Retro active 스타일 제거 및 .back-button active 스타일 적용 */
    /* transform: translate(2px, 2px); */ /* Shift on active */
    /* box-shadow: 0 0 0 0; */ /* Remove shadow on active */

    /* Apply .back-button:active style */
    transform: translate(2px, 2px); /* 클릭 시 효과 */
    box-shadow: 0 0 0 0; /* 클릭 시 그림자 제거 */
  }
  
  canvas {
    display: none;
    margin: 0; /* Remove margins, gap in gameContainer will handle vertical space */
    position: relative;
    overflow: hidden;
    width: 100%; /* Take full width of gameContainer */
    max-width: 480px; /* Keep max width */
    aspect-ratio: 3 / 4; /* Maintain aspect ratio */
    height: auto; /* Let height be determined by aspect ratio */
    background-color: rgba(255, 255, 255, 0.15); /* 반투명 배경 */
    backdrop-filter: blur(10px); /* 배경 흐리게 */
    -webkit-backdrop-filter: blur(10px); /* Safari 지원 */
    border: 4px solid #ffffff; /* 하얀색 4px 테두리 */
    border-radius: 20px; /* 모서리 둥글게 */
    box-shadow: 0 8px 20px rgba(0,0,0,0.3); /* 그림자 (기존 값 유지) */
    outline: 6px solid #e75480; /* 바깥에 분홍색 6px 테두리 */
  }
  
  /* 캔버스 유리병 목 부분 스타일 제거 */
  #gameCanvas::before {
    content: none;
  }
  
  /* 반응형 디자인을 위한 미디어 쿼리 */
  @media (max-width: 600px) {
    h1 {
      font-size: 30px;
      margin-top: 30px;
      margin-bottom: 20px;
    }
  
    #startScreen {
      padding: 15px 20px; /* 위아래 15px, 좌우 20px 패딩 */
      margin-top: 40px;
      box-shadow: 6px 6px 0px 0px #FF74A2;
    }
  
    #nicknameInput {
       padding: 8px;
       width: calc(100% - 20px);
       font-size: 14px;
       margin-bottom: 20px;
    }
  
    button {
      font-size: 18px;
      padding: 8px 16px;
      box-shadow: 3px 3px 0px 0px #B49FFF;
    }
  
    button:hover {
      box-shadow: 3px 3px 0px 0px #FF74A2;
    }
  
    #gameCanvas {
      /* width: calc(100% - 40px); */ /* Removed */
      /* margin: 0 auto; */ /* Removed */
    }
  
    #bottomGuide {
      /* width: calc(100% - 40px); */ /* Removed */
      /* margin: 20px auto; */ /* Removed */
    }
  
    #gameOverScreen {
      padding: 10px 15px; /* Further reduced vertical padding for mobile */
      border-width: 3px;
      box-shadow: 6px 6px 0px 0px #FF74A2;
    }
  
    #gameOverScreen h2 {
      font-size: 28px; /* Keep existing size */
      white-space: nowrap; /* Prevent text wrapping */
    }
  
    #restartButton {
      padding: 10px 20px;
      box-shadow: 3px 3px 0px 0px #B49FFF;
    }
  
    #restartButton:hover {
      box-shadow: 3px 3px 0px 0px #7fff97;
    }
  
    #gameInfo {
      /* width: calc(100% - 40px); */ /* Removed */
      /* margin: 20px auto; */ /* Removed */
    }
  }
  
  /* 반응형 디자인을 위한 추가 스타일 (모바일) */
  @media (max-width: 600px) {
    /* 레벨별 구슬 이미지 크기 조정 */
    #bottomGuide img {
        /* 작은 화면에서 구슬 크기 유연하게 줄어들도록 수정 */
        /* width: 30px; */ /* 고정 크기 제거 */
        /* height: 30px; */ /* 고정 크기 제거 */
        /* 필요하다면 max-width 등 추가 */
    }
  }
  
  /* 움직이는 별/도형을 위한 스타일 (CSS 애니메이션 예시) */
  .star {
    position: absolute;
    width: 5px;
    height: 5px;
    background-color: #ffffff; /* 하얀색 별 */
    box-shadow: 0 0 5px #ffffff; /* 하얀색 그림자 */
    border-radius: 50%; /* 또는 각진 모양을 위해 border 사용 */
    animation: twinkle 1.5s infinite alternate; /* 반짝이는 애니메이션 */
    z-index: 0; /* 배경 요소로 배치 */
  }
  
  /* 다양한 위치와 애니메이션 지연 시간을 가진 별들을 추가 */
  .star:nth-child(1) { top: 10%; left: 20%; animation-delay: 0.2s; }
  .star:nth-child(2) { top: 5%; left: 70%; animation-delay: 0.8s; }
  .star:nth-child(3) { top: 30%; left: 85%; animation-delay: 1.1s; }
  .star:nth-child(4) { top: 50%; left: 15%; animation-delay: 0.5s; }
  .star:nth-child(5) { top: 70%; left: 40%; animation-delay: 1.3s; }
  .star:nth-child(6) { top: 85%; left: 60%; animation-delay: 0.7s; }
  .star:nth-child(7) { top: 20%; left: 50%; animation-delay: 1.5s; }
  .star:nth-child(8) { top: 40%; left: 80%; animation-delay: 0.9s; }
  .star:nth-child(9) { top: 60%; left: 30%; animation-delay: 1.2s; }
  .star:nth-child(10) { top: 80%; left: 10%; animation-delay: 0.6s; }
  .star:nth-child(11) { top: 90%; left: 95%; animation-delay: 1.4s; }
  
  @keyframes twinkle {
    from { opacity: 1; }
    to { opacity: 0.3; }
  }
  
  /* 레트로 모니터 스캐닝 라인 효과 */
  body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0,0,0,0.1) 1px, transparent 1px);
    background-size: 100% 4px; /* 라인 간격 조절 */
    pointer-events: none; /* 마우스 이벤트 무시 */
    z-index: 1000; /* 다른 요소 위에 표시 */
    animation: scanline 8s linear infinite;
  }
  
  @keyframes scanline {
    from { background-position: 0 0; }
    to { background-position: 0 100%; }
  }
  
  /* 픽셀 아트 하트 스타일 */
  .pixel-hearts {
    display: flex;
    justify-content: center;
    gap: 10px; /* 하트 사이 간격 */
    margin-top: 20px; /* 제목과 버튼 아래에 배치 */
  }
  
  .heart {
    position: relative;
    width: 15px; /* 하트 크기 */
    height: 15px;
    background-color: #e75480; /* 핑크색 */
    transform: rotate(-45deg); /* 하트 모양을 위해 회전 */
  }
  
  .heart::before,
  .heart::after {
    content: '';
    position: absolute;
    width: 15px; /* 하트 윗부분 원 크기 */
    height: 15px;
    background-color: #e75480; /* 핑크색 */
    border-radius: 50%; /* 원 모양 */
  }
  
  .heart::before {
    top: -7.5px; /* 위치 조정 */
    left: 0;
  }
  
  .heart::after {
    top: 0;
    left: 7.5px; /* 위치 조정 */
  }
  
  /* HTML 파일에 .star 요소를 여러 개 추가해야 합니다. */
  /* 예: <div class="star"></div> */
  
  /* 게임 시작 시 startScreen 숨기고 gameCanvas 표시 (수정 필요) */
  /* startScreen hidden 및 gameContainer visible 관련 스타일 제거 */
  /*
  #startScreen.hidden {
    display: none;
  }

  #gameContainer.visible {
    display: flex;
  }
  */
  
  /* about.html 전용 body 패딩 조정 (컨테이너가 이미 마진을 가지고 있으므로) */
  body.about-page {
      font-family: 'Press Start 2P', cursive;
      color: #242424; /* 가독성을 위해 어두운 색으로 변경 */
      /* background-color: #ab73ff; */ /* 인덱스 페이지와 동일한 배경색 */
      padding: 20px; /* 내용과 가장자리에 패딩 추가 */
      line-height: 1.6;
      /* 레트로 그리드 패턴 */
      background-image:
          linear-gradient(to right, rgba(255, 226, 235, 0.1) 1px, transparent 1px),
          linear-gradient(to bottom, rgba(255, 246, 249, 0.1) 1px, transparent 1px);
      background-size: 20px 20px;
      /* 별과 스캐닝 라인 효과를 위한 위치 설정 */
      position: relative;
      min-height: 100vh;
      overflow-x: hidden;
  }

  body.about-page .container {
      max-width: 800px; /* 내용의 최대 너비 제한 */
      margin: 0 auto; /* 가운데 정렬 */
      padding: 20px;
      background-color: rgba(255, 255, 255, 0.8); /* 컨테이너 배경을 더 불투명하게 */
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.3);
      border-radius: 15px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }

  body.about-page h1, body.about-page h2 {
      color: #1a1a1a; /* 제목 글씨색도 어둡게 */
      background-color: #ffffff; /* 하얀색 배경 깔기 */
      display: inline-block; /* 배경이 글씨 너비만큼만 차지하도록 */
      padding: 5px 10px; /* 배경과 글씨 사이 패딩 */
      border-radius: 5px; /* 배경 모서리 살짝 둥글게 */
      text-align: center;
      margin-top: 20px;
      margin-bottom: 20px;
  }

  /* Update h1 font size and add p font size for about page */
  body.about-page h1 {
      font-size: 24px; /* Who is Hymish 글씨 크기 */
  }

  body.about-page p {
      margin-bottom: 15px;
      color: #1a1a1a; /* 단락 텍스트 색상도 어둡게 */
      font-size: 12px; /* 단락 글씨 크기 10pt에 가깝게 줄임 */
  }

  body.about-page img {
      max-width: 400px;
      /* Remove shadow effect */
      /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); */
  }

  body.about-page .content-section {
      margin-bottom: 40px; /* 섹션 하단 간격 */
      padding: 20px;
      background-color: rgba(255, 255, 255, 0.5); /* 섹션별 배경색 더 불투명하게 */
      border-radius: 10px;
  }

  body.about-page .content-section h2 {
      margin-top: 0;
  }

  body.about-page #contact {
      /* 문의하기 섹션 스타일 */
  }

  body.about-page::after {
      /* 스캐닝 라인 효과 */
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(rgba(0,0,0,0.1) 1px, transparent 1px);
      background-size: 100% 4px;
      pointer-events: none;
      z-index: 1000;
      animation: scanline 8s linear infinite;
  }
  
  /* index.html의 body에 기본 패딩 적용 */
  body:not(.about-page) {
      /* padding-top은 body 기본 스타일에서 설정 */
  }
  
  /* ✅ 상단 내비게이션 바 스타일 제거 */
  header {
      display: none; /* 헤더 숨김 */
  }
  
  /* nav ul, nav li, nav a 스타일도 필요없으므로 제거하거나 display: none 처리 */
  nav ul, nav li, nav a {
      display: none;
  }
  
  #bottomGuide img:hover {
    transform: none;
    box-shadow: none;
  }
  
  /* Add styles for the popup overlay */
  #gameOverScreen {
    display: none; /* Managed by game.js */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent dark overlay */
    backdrop-filter: blur(5px); /* Optional: blur background content */
    -webkit-backdrop-filter: blur(5px); /* Safari support */
    z-index: 100; /* Ensure it's above other content */
    display: flex; /* Use flexbox for centering */
    flex-direction: column; /* Arrange children (character image and popup) vertically */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
  }
  
  /* Style for the main popup container */
  #gameOverScreen .popup-container {
    /* 기존 배경색 */
    /* background-color: #FFF8E1; */ /* Light yellow/beige background */
    background-color: #B49FFF; /* Purple background */
    /* 기존 테두리 */
    /* border: 6px solid #FFC0CB; */ /* Light pink border */
    border: 6px solid #FF74A2; /* Pink border */
    border-radius: 20px; /* Rounded corners */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); /* Soft shadow */
    padding: 0; /* Remove padding, inner sections have their own */
    text-align: center;
    position: relative; /* Needed for absolute positioning of close button */
    width: 90%; /* Responsive width */
    max-width: 400px; /* Max width for larger screens */
    overflow: hidden; /* Ensure nothing spills out of rounded corners */
    display: flex; /* Use flexbox for header, content, button layout */
    flex-direction: column; /* Stack header, content, buttons vertically */
    align-items: center; /* Center items horizontally within container */
  }
  
  /* Style for the character image container */
  #gameOverScreen #popupCharacterImage {
      width: auto; /* Allow width to be determined by content */
      height: auto; /* Allow height to be determined by content */
      margin: 0 auto 0 auto; /* Center horizontally, remove bottom margin */
      border: none; /* Remove border */
      border-radius: 0; /* Remove rounded corners */
      background-color: transparent; /* Remove background color */
      display: flex; /* Keep flex for centering image if needed */
      justify-content: center; /* Center image horizontally */
      align-items: center; /* Center image vertically */
      overflow: visible; /* Ensure content is not hidden */
      /* Remove shadow */
      box-shadow: none;
      position: relative; /* Keep relative positioning */
      z-index: 10; /* Keep z-index */
  }

  /* Style for the character image itself within the game over screen popup */
  #gameOverScreen #popupCharacterImage img {
      display: block;
      width: 150px; /* Set a fixed width to 150px */
      height: auto; /* Maintain aspect ratio */
      object-fit: contain; /* Ensure the whole image is visible */
      border-radius: 0 !important; /* Remove rounded corners, forcefully */
      padding: 0 !important; /* Remove any potential padding causing spacing */
      margin: 0 auto !important; /* Center horizontally, remove any external margin */
      background-color: transparent !important; /* Ensure no background color */
      border: none !important; /* Ensure no border */
      box-shadow: none !important; /* Ensure no shadow */
  }

  /* Style for the popup header */
  #gameOverScreen .popup-header {
      width: 100%;
      padding: 30px 0 0 0; /* Increased top padding, removed bottom padding */
      position: relative; /* Keep relative positioning */
      margin-top: 0; /* Keep margin-top at 0 */
      margin-bottom: 0; /* Remove bottom margin */
      z-index: 15; /* Keep z-index */
      overflow: visible; /* Ensure content is not hidden */
      display: flex; /* Use flexbox to center the ribbon */
      justify-content: center; /* Center the ribbon horizontally */
      align-items: center; /* Center the ribbon vertically */
  }

  /* Style for the ribbon effect (keep the background color for the ribbon text background) */
  #gameOverScreen .ribbon {
      background-color: #FF74A2; /* Pink background for the ribbon text */
      color: #1a162d; /* Dark text color */
      font-family: 'Press Start 2P', cursive;
      font-size: 24px; /* Keep increased font size */
      padding: 10px 20px; /* Keep padding */
      position: relative; /* Change back to relative positioning */
      /* top: 20px; */ /* Remove absolute positioning properties */
      /* left: 50%; */
      /* transform: translateX(-50%); */
      display: inline-block; /* Keep inline-block */
      border-radius: 5px; /* Keep slight rounding */
      z-index: 16; /* Keep z-index */
  }

  /* Style for the popup content area */
  #gameOverScreen .popup-content {
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    align-items: center; /* Center items horizontally */
    gap: 8px; /* Keep reduced space between content elements */
    padding: 20px 20px 20px 20px; /* Added top padding, keep other padding */
    width: calc(100% - 40px); /* Adjust for horizontal padding */
    position: relative; /* Add relative positioning */
    z-index: 1; /* Lower z-index than header/ribbon */
  }

  /* Style for "Your Score" text */
  /* #gameOverScreen #popupYourScore { display: none; } */ /* Removed as element is deleted */

  /* Style for the combined nickname and score value */
  #gameOverScreen #popupNicknameAndScore {
      font-size: 16px; /* Slightly larger font size for the actual value */
      color: #1a162d; /* Dark text color */
      margin: 0 0 15px 0; /* Add bottom margin to separate from bead info */
      text-align: center; /* Center text */
      word-break: break-word; /* Allow long text to wrap */
  }

  /* Style for the container holding the bead image and title */
  #gameOverScreen #popupBeadInfoContainer {
      display: flex;
      flex-direction: column; /* Stack image and title vertically */
      align-items: center; /* Center items horizontally */
      gap: 12px; /* Space between title and image */
      margin: 0 0 15px 0; /* Add bottom margin to separate from buttons */
      /* Remove background, border, border-radius, padding, box-shadow */
      background-color: transparent;
      border: none;
      border-radius: 0;
      padding: 0;
      box-shadow: none;
      width: fit-content; /* Shrink to content width */
      max-width: 100%; /* Prevent overflow */
  }

  /* Style for the image inside the bead image container */
  #gameOverScreen #popupBeadImageContainer img {
      display: block;
      width: 100%; /* Make image fill the container width */
      height: 100%; /* Make image fill the container height */
      object-fit: contain; /* Scale image to fit inside the container without distortion */
      border-radius: 0; /* Ensure image itself is not rounded */
      /* Remove any conflicting styles from the general img rule if necessary */
  }

  /* Style for the highest level title within the popupBeadInfoContainer */
  #gameOverScreen #popupHighestLevelTitle {
      font-size: 14px; /* Adjust font size */
      color: #1a162d; /* Dark text color */
      margin: 0; /* Remove default margin */
      text-align: center; /* Center text */
      /* flex-grow: 1; */ /* Remove flex-grow */
      word-break: break-word; /* Allow long titles to wrap */
  }

  /* Remove old score style as it's no longer used or styled separately */
  /* #gameOverScreen #popupScore { display: none; } */ /* Removed as element is deleted */

  /* Style for the restart button in the popup */
  #gameOverScreen #popupRestartButton {
      /* Inherits base button styles, adjust if needed */
      margin-top: 0; /* Remove top margin, spacing handled by bead info container */
      margin-bottom: 20px; /* Space below the button */
      font-size: 18px; /* Adjust font size */
      padding: 10px 20px; /* Adjust padding */
  }

  /* Style for the close button */
  #gameOverScreen #popupCloseButton {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    background-color: #B49FFF; /* Purple background */
    color: #1a162d; /* Dark text */
    border: 2px solid #1a162d; /* Dark border */
    border-radius: 50%; /* Circle shape */
    font-size: 18px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0; /* Remove default padding */
    line-height: 1; /* Adjust line height for centering 'X' */
    box-shadow: 2px 2px 0 0 #FF74A2; /* Pink shadow */
    transition: all 0.1s ease-in-out;
    z-index: 10; /* Ensure it's above other popup content */
  }

  #gameOverScreen #popupCloseButton:hover {
      background-color: #FF74A2; /* Pink background on hover */
      box-shadow: 2px 2px 0 0 #B49FFF; /* Purple shadow on hover */
      transform: translate(-1px, -1px); /* Slight movement */
  }

  #gameOverScreen #popupCloseButton:active {
      transform: translate(1px, 1px); /* Click effect */
      box-shadow: 0 0 0 0; /* Remove shadow on click */
  }

  /* Add some festive background elements to the popup */
  /* Example: Small circles */
  /* Removed #gameOverScreen .popup-container::before and #gameOverScreen .popup-container::after */

  /* Example: Stars */
  #gameOverScreen .popup-container .star-decoration {
      position: absolute;
      width: 8px;
      height: 8px;
      background-color: #ffffff;
      box-shadow: 0 0 5px #ffffff;
      border-radius: 50%;
      z-index: 1; /* Ensure it's above the container background */
      animation: twinkle 1.5s infinite alternate;
  }

  #gameOverScreen .popup-container .star-decoration:nth-child(1) { top: 50px; left: 40px; animation-delay: 0.2s; }
  #gameOverScreen .popup-container .star-decoration:nth-child(2) { top: 60px; right: 40px; animation-delay: 0.5s; }
  #gameOverScreen .popup-container .star-decoration:nth-child(3) { bottom: 30px; left: 30px; animation-delay: 0.8s; }
  #gameOverScreen .popup-container .star-decoration:nth-child(4) { bottom: 40px; right: 20px; animation-delay: 1.1s; }

  /* Ensure game over screen elements are positioned correctly */
  #gameOverScreen .bead-info-container {
      /* This container is no longer used in the new popup structure,
         its content will be directly within .popup-content */
      display: none; /* Hide the old container */
  }

  #gameOverScreen .level8-bead-container {
      /* This container is also no longer used directly */
       display: none; /* Hide the old container */
  }

  /* The old #restartButton is replaced by #popupRestartButton */
  #restartButton {
      display: none; /* Hide the old button */
  }

  /* Remove or adjust styles for old elements if they conflict */
  #gameOverScreen h2, #gameOverScreen p {
      /* Adjust or remove if the new popup structure and styling handle these */
      margin: 0; /* Remove default margins */
  }
  
  /* 게임 정보 표시 영역 스타일 - Retro 강화 */
  #gameInfo {
    display: none; /* Hide by default, shown by game.js when game starts */
    flex-direction: row; /* Ensure items are in a row */
    align-items: center; /* Vertically center items */
    justify-content: space-between; /* .info-group과 #nextBeadInfo를 양 끝으로 분산 */
    margin: 0;
    width: 100%;
    max-width: 480px;
    padding: 0;
    background-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-radius: 0;
    box-shadow: none;
    color: #ffffff;
    font-family: 'Press Start 2P', cursive;
    font-size: 12px;
    text-shadow: 0 0 5px rgba(255, 192, 203, 0.5);
    box-sizing: border-box;
  }

  /* 닉네임과 스코어를 묶는 그룹 스타일 */
  .info-group {
      display: flex; /* 자식 요소들을 가로로 배치 */
      align-items: center; /* 세로 중앙 정렬 */
      gap: 10px; /* 닉네임과 스코어 사이 간격 10px */
  }

  /* Style for individual info items (Applies to #idInfo, #scoreInfo, #nextBeadInfo) */
  /* 기존 #gameInfo .info-item 스타일 유지 및 필요시 조정 */
  #gameInfo .info-item {
      display: flex; /* Arrange icon and text horizontally */
      align-items: center; /* Vertically center icon and text */
      gap: 5px; /* Space between icon and text */
      background-color: rgba(180, 159, 255, 0.5); /* Semi-transparent purple background */
      backdrop-filter: blur(10px); /* Add blur effect */
      -webkit-backdrop-filter: blur(10px); /* Add Safari support */
      border: none;
      border-radius: 999px; /* Pill shape */
      padding: 5px 10px; /* Internal padding */
      color: #ffffff;
      box-shadow: none;
      min-height: 35px;
  }

  /* .info-group 내의 .info-item에 대한 flex 속성 오버라이드 */
  .info-group .info-item {
      flex-shrink: 0; /* 그룹 내에서 아이템 크기 유지 */
      flex-grow: 0; /* 그룹 내에서 아이템 크기 고정 */
  }

  /* Style for score info (left align - inside .info-group) */
  #gameInfo #scoreInfo {
      justify-content: flex-start;
  }

  /* Style for next info (right align in #gameInfo) */
  #gameInfo #nextBeadInfo {
      justify-content: center; /* Center content within this item */
      margin: 0;
  }

  /* Style for nickname info (left align - inside .info-group) */
  #gameInfo #idInfo {
      justify-content: flex-start;
  }

  /* Style for info icons */
  #gameInfo .info-icon {
      display: block;
      width: 20px;
      height: 20px;
      object-fit: cover;
      margin: 0;
  }

  /* Adjust text color for better visibility on the new background */
  #gameInfo .info-item span {
      color: #ffffff;
      font-size: 12px;
  }

  /* Style for the Next bead image specifically */
  #gameInfo #nextBeadImage {
      border-radius: 50%;
  }

  /* Media query for wider screens */
  @media (min-width: 768px) {
    #gameContainer {
      justify-content: center;
    }

    #gameInfo {
      width: 480px;
      max-width: 480px;
    }

    canvas {
        width: 480px;
        max-width: 480px;
    }
  }
  
  /* 게임 컨테이너 스타일 */
  #gameContainer {
    display: flex;
    flex-direction: column; /* Always column for narrow and wide screens */
    gap: 10px; /* Increase gap between elements to 10px */
    align-items: center; /* Center items horizontally in column layout */
    justify-content: center; /* Center items vertically within the container if it has height */
    margin: 40px auto 20px auto; /* Adjusted top and bottom margin, auto for left/right */
    max-width: 480px; /* Ensure container doesn't exceed 480px */
    width: 100%; /* Allow container to take full width on smaller screens */
    padding: 0 10px; /* Add horizontal padding to prevent content from touching edges */
    box-sizing: border-box; /* Include padding in width */
  }
  
  /* 하단 구슬 안내 스타일 */
  #bottomGuide {
    display: none; /* needs to be changed to flex by game.js when game starts */
    margin: 0; /* Remove margins, gap in gameContainer will handle vertical space */
    justify-content: center;
    align-items: center; /* vertical center alignment */
    gap: 10px; /* original gap */
    flex-wrap: wrap;
    padding: 10px; /* original padding */
    text-transform: none;
    background-color: rgba(255, 255, 255, 0.15); /* translucent background */
    backdrop-filter: blur(10px); /* blur background */
    -webkit-backdrop-filter: blur(10px); /* safari support */
    border: none; /* remove border */
    border-radius: 15px; /* rounded corners (slightly smaller than game area) */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* shadow */
    color: #ffffff; /* text color */
    font-family: 'Press Start 2P', cursive;
    font-size: 12px; /* keep font size */
    width: 100%; /* Take full width of gameContainer */
    max-width: 480px; /* Ensure it doesn't exceed 480px */
    box-sizing: border-box; /* Include padding in width */
  }

  #bottomGuide h3 {
      margin: 0 0 5px 0; /* Reduced bottom margin */
      font-size: 10px; /* Reduced font size */
  }

  /* Style for the container holding the progress bar and image and title */
  #bottomGuide #progressDisplayArea {
      display: flex; /* Arrange level container, image, and title side-by-side */
      align-items: center; /* Vertically align children */
      gap: 8px; /* Reduced space between elements */
      width: 100%; /* Take full width of bottomGuide */
      justify-content: center; /* Center content horizontally within the area */
  }

  /* Add styles for level progress UI (modified for bar appearance) */
  #bottomGuide #levelProgressContainer {
    display: flex; /* Arrange blocks in a row */
    /* justify-content: center; */ /* Remove center alignment, blocks will fill from left */
    align-items: center; /* Vertically align the blocks */
    gap: 2px; /* Reduced space between blocks to form a bar */
    margin: 0; /* Remove margin */
    flex-grow: 1; /* Allow container to grow and take available space */
    height: 20px; /* Reduced height of the progress bar */
    border: 2px solid #ffffff; /* Border around the bar */
    border-radius: 10px; /* Reduced rounded corners for the bar */
    overflow: hidden; /* Hide overflow from blocks */
    background-color: rgba(255, 255, 255, 0.1); /* Subtle background for the bar track */
  }

  .level-block {
    width: calc(100% / 11); /* Make each block take equal width */
    height: 100%; /* Fill the height of the container */
    background-color: transparent; /* Default transparent background */
    border: none; /* Remove individual block borders */
    border-radius: 0; /* Remove individual block rounded corners */
    transition: background-color 0.5s ease; /* Smooth transition for color change */
  }

  .level-block.achieved {
    background-color: #FF74A2; /* Pink background for achieved levels */
    /* border-color: #FFC0CB; */ /* Remove border-color change */
  }

  /* Style for the highest level bead image container */
  #bottomGuide #highestLevelImageContainer {
      display: flex; /* Use flex to center the image if needed */
      align-items: center; /* Vertically center the image */
      justify-content: center; /* Horizontally center the image */
      width: 30px; /* Reduced fixed width for the image area */
      height: 30px; /* Reduced fixed height for the image area */
      border: 3px solid #FF74A2; /* Pink border around the image */
      border-radius: 50%; /* Make the container round */
      overflow: hidden; /* Hide overflow */
      flex-shrink: 0; /* Prevent shrinking */
      background-color: #1a162d; /* Dark background for contrast */
  }

  /* Style for the highest level bead image itself */
  #bottomGuide .highest-level-bead-image {
      display: block; /* Ensure image is a block element */
      width: 100%; /* Fill the container width */
      height: 100%; /* Fill the container height */
      object-fit: cover; /* Cover the area without distorting aspect ratio */
      border-radius: 50%; /* Make the image round */
      /* Remove any conflicting styles from the general #bottomGuide img rule */
      border: none;
      margin: 0;
      box-shadow: none;
  }

  /* Style for the highest level title */
  #bottomGuide #highestLevelTitle {
      font-size: 10px; /* Font size for the title */
      color: #FFC0CB; /* Light pink color */
      font-family: 'Press Start 2P', cursive;
      text-align: left; /* Align text to the left */
      flex-grow: 0; /* Prevent growing */
      flex-shrink: 0; /* Prevent shrinking */
      width: 80px; /* Fixed width for the title to prevent layout shifts */
      word-break: break-word; /* Allow long titles to wrap */
  }
  
  /* 새로 추가될 info-group 스타일 */
  .info-group {
      display: flex; /* 자식 요소들을 가로로 배치 */
      align-items: center; /* 세로 중앙 정렬 */
      gap: 10px; /* 닉네임과 스코어 사이 간격 10px */
  }
  
  /* Style for individual game items */
  .game-item {
    display: flex;
    flex-direction: column; /* Arrange image and title vertically */
    align-items: center; /* Center items horizontally */
    cursor: pointer;
    padding: 10px;
    border: none; /* Explicitly remove border */
    box-shadow: none; /* Explicitly remove box-shadow */
  }

  /* Remove hover and selected styles related to border */
  .game-item:hover {
    /* border-color: #B49FFF; */ /* Highlight on hover - removed */
  }

  .game-item.selected {
    /* border-color: #FF74A2; */ /* Highlight when selected - removed */
  }

  /* Style for the game thumbnail image */
  .game-thumbnail {
    width: 200px;
    height: 200px;
    object-fit: cover; /* Crop image to fit the container */
    /* border: 3px solid #1a162d; */ /* Dark border around image - Removed stroke */
    /* box-shadow: 4px 4px 0 0 #87CEEB; */ /* Light blue shadow - Removed stroke effect */
    margin-bottom: 10px; /* Space between image and title */
    /* border-radius: 8px; */ /* Add rounded corners - Removed radius */
  }

  /* Adjust h2 style within game-item if needed */
  .game-item h2 {
    font-size: 18px; /* Adjust font size to be smaller, like h3 */
    margin: 0; /* Remove default margin */
    color: #1a162d; /* Dark text color */
    text-shadow: none; /* Remove text shadow */
    background-color: transparent; /* Remove background */
    padding: 0;
    border: none;
    box-shadow: none;
  }