/* style.css */

/* 1) CSS 변수 */
:root {
  --bg-color: #f9f9f9;
  --pad-color: #e0f0ff;
  --num-color: #2c3e50;
}

/* 2) 전역 스타일 */
body {
  margin: 0; padding: 0;
  font-family: 'Segoe UI', sans-serif;
  background-color: var(--bg-color);
  color: #333; text-align: center;
}

/* 메인 메뉴 */
#main-menu {
  margin-top: 60px;
}
#start-button, #menu-options-button {
  padding: 8px 16px; font-size: 1rem;
  margin: 0 4px; border: none; border-radius: 6px;
  background: #ddd; cursor: pointer;
}
#start-button:hover, #menu-options-button:hover {
  background: #ccc;
}
#instructions { margin: 20px 0; }

/* 커스터마이징 패널 */
#custom-panel {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin: 20px auto; padding: 16px; max-width: 600px;
  background: #fafafa; border: 1px solid #ddd; border-radius: 8px;
}
#custom-controls { flex: 1; text-align: left; padding-right: 20px; }
#custom-controls section { margin-bottom: 12px; }
.color-palette button {
  width: 24px; height: 24px; margin: 3px; border: none; cursor: pointer;
}
#preview-pad {
  flex: 1; display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center; padding: 8px;
  background: #fff; border: 1px solid #ccc; border-radius: 6px;
}
#preview-pad .tile {
  width: 48px; height: 48px; font-size: 18px; font-weight: bold;
  background: var(--pad-color); color: var(--num-color);
  border: 2px solid #3498db;
  display: flex; align-items: center; justify-content: center;
  transition: background-color 0.2s;
}

/* 사운드 패널 */
#sound-panel {
  position: fixed; top: 10%; left: 50%; transform: translateX(-50%);
  background: #fff; padding: 16px; border: 1px solid #aaa;
  border-radius: 8px; z-index: 1000;
}
#sound-panel h3 { margin-top: 0; }
#sound-panel label { display: block; margin: 8px 0; }
#close-sound-panel { margin-top: 8px; padding: 6px 12px; }

/* 게임 UI */
#top-info-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; background: #e3f2fd; border-bottom: 1px solid #ccc;
}
.info-group { display: flex; gap: 16px; font-weight: bold; }
.button-group { display: flex; gap: 10px; }
#reset-button, #sound-toggle {
  font-size: 0.9rem; background: #ddd; border: 1px solid #aaa;
  border-radius: 6px; padding: 6px 10px; cursor: pointer;
}
#reset-button:hover, #sound-toggle:hover {
  background: #ccc;
}

/* 게임판 타일 */
#game-container {
  display: grid; grid-template-columns: repeat(10, 48px);
  gap: 6px; justify-content: center; margin: 20px auto;
}
#game-container .tile {
  width: 48px !important; height: 48px !important;
  font-size: 18px; font-weight: bold;
  background: var(--pad-color); color: var(--num-color);
  border: 2px solid #3498db; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background-color 0.2s;
}
#game-container .tile:hover { background: #d0eaff; }
#game-container .tile.removed { visibility: hidden; }

/* shape 적용 */
body[data-shape="circle"] #game-container .tile,
body[data-shape="circle"] #preview-pad .tile {
  border-radius: 50%; clip-path: none;
}
body[data-shape="square"] #game-container .tile,
body[data-shape="square"] #preview-pad .tile {
  border-radius: 6px; clip-path: none;
}
body[data-shape="triangle"] #game-container .tile,
body[data-shape="triangle"] #preview-pad .tile {
  border-radius: 0;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

/* 게임오버 메시지 */
#game-over-message {
  margin-top: 30px; font-size: 1.1rem; color: #e74c3c;
}

/* 반응형 */
@media (max-width: 600px) {
  #custom-panel { flex-direction: column; align-items: stretch; }
  #custom-controls { padding-right: 0; }
  #preview-pad { margin-top: 12px; }
  #preview-pad .tile {
    width: 40px; height: 40px; font-size: 14px;
  }
  #game-container {
    grid-template-columns: repeat(5, 48px);
    gap: 6px;
  }
  #game-container .tile {
    width: 48px !important; height: 48px !important;
    font-size: 18px;
  }
}