* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background-color: #0a0a18;
  color: #eaeaea;
  font-family: 'Segoe UI', 'Malgun Gothic', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  overflow-x: hidden;
}

#game-container {
  display: flex;
  gap: 30px;
  align-items: flex-start;
  justify-content: center;
}

#left-panel, #right-panel {
  width: 200px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

#right-panel h1 {
  font-size: 32px;
  letter-spacing: 3px;
  color: #e94560;
  text-shadow: 0 0 10px rgba(233,69,96,0.7);
  margin-bottom: 10px;
}

#board-area { position: relative; }

#board {
  background-color: #05050f;
  border: 3px solid #3a3a6a;
  box-shadow: 0 0 20px rgba(80,120,255,0.25);
  display: block;
}

.info-box {
  background-color: #12122a;
  padding: 12px 16px;
  border-radius: 8px;
}

.label { font-size: 13px; color: #888; margin-bottom: 4px; }
.value { font-size: 26px; font-weight: bold; }

.controls {
  background-color: #12122a;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.9;
}

#wall-hp { display: flex; gap: 6px; margin-top: 4px; }

.brick {
  width: 26px;
  height: 20px;
  border-radius: 3px;
  background: linear-gradient(#c1440e, #8a2f0a);
  border: 1px solid #5a1e06;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,0.25);
}
.brick.broken { background: #1a1a2e; border: 1px solid #2a2a44; box-shadow: none; }

#game-over {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(20,90,140,0.35);
  display: flex; flex-direction: column;
  justify-content: center; align-items: center; gap: 16px;
}
#game-over h2 { font-size: 36px; color: #e94560; text-shadow: 0 0 12px rgba(233,69,96,0.7); }

#restart-btn {
  padding: 12px 28px; font-size: 16px;
  background-color: #e94560; color: white;
  border: none; border-radius: 8px; cursor: pointer;
}
#restart-btn:hover { background-color: #ff5773; }

#stage-banner {
  position: absolute; top: 45%; left: 0; width: 100%;
  transform: translateY(-50%);
  text-align: center; font-size: 30px; font-weight: bold;
  color: #ffe066; text-shadow: 0 0 12px rgba(255,224,102,0.8);
  pointer-events: none;
}

#next {
  background-color: #05050f;
  border: 1px solid #2a2a4a;
  border-radius: 4px;
  display: block;
  margin-top: 4px;
}

.hidden { display: none !important; }


/* ===== 아이템 인벤토리 ===== */
#items { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }

.item-slot {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px;
  background-color: #0d0d20;
  border: 1px solid #2a2a4a;
  border-radius: 6px;
  font-size: 13px;
}
.item-slot.ready { border-color: #6fd0ff; box-shadow: 0 0 8px rgba(111,208,255,0.35); }
.item-slot.empty { opacity: 0.35; }

.item-key {
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  background-color: #2a2a4a; border-radius: 4px;
  font-size: 12px; font-weight: bold; color: #cfe8ff;
  flex-shrink: 0;
}
.item-name { flex: 1; color: #cfcfe0; }
.item-count { font-weight: bold; color: #ffe066; }


/* ===== 음소거 버튼 ===== */
#mute-btn {
  margin-top: 6px;
  padding: 8px 12px;
  font-size: 13px;
  background-color: #12122a;
  color: #cfe8ff;
  border: 1px solid #2a2a4a;
  border-radius: 8px;
  cursor: pointer;
}
#mute-btn:hover { border-color: #6fd0ff; }
#mute-btn.muted { color: #777; }


/* ===== 랭킹 (게임오버 화면) ===== */
#game-over p { font-size: 15px; }

#score-entry {
  display: flex; flex-direction: column; gap: 8px;
  width: 240px; margin-top: 4px;
}
.entry-row { display: flex; gap: 6px; }

#country-select {
  width: 72px; padding: 8px 4px;
  background-color: #12122a; color: #eaeaea;
  border: 1px solid #2a2a4a; border-radius: 6px;
  font-size: 15px; text-align: center; cursor: pointer;
}
#nick-input {
  flex: 1; padding: 8px 10px;
  background-color: #12122a; color: #eaeaea;
  border: 1px solid #2a2a4a; border-radius: 6px;
  font-size: 14px;
}
#nick-input:focus, #country-select:focus { outline: none; border-color: #6fd0ff; }

#save-score-btn {
  padding: 10px; font-size: 14px;
  background-color: #6fd0ff; color: #05050f; font-weight: bold;
  border: none; border-radius: 6px; cursor: pointer;
}
#save-score-btn:hover { background-color: #93ddff; }
#save-score-btn:disabled { background-color: #3a3a55; color: #888; cursor: default; }

#ranking-box {
  width: 260px; margin-top: 6px;
  background-color: rgba(18,18,42,0.9);
  border: 1px solid #2a2a4a; border-radius: 8px;
  padding: 10px 12px;
}
.rank-title { font-size: 15px; color: #ffe066; margin-bottom: 6px; text-align: center; }
#ranking-list { list-style: none; counter-reset: rank; margin: 0; padding: 0; }
#ranking-list li {
  counter-increment: rank;
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; padding: 3px 0;
  border-bottom: 1px solid #1c1c38;
}
#ranking-list li::before {
  content: counter(rank);
  width: 20px; text-align: right; color: #888; font-weight: bold; flex-shrink: 0;
}
#ranking-list li .r-flag { flex-shrink: 0; }
#ranking-list li .r-nick { flex: 1; color: #eaeaea; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ranking-list li .r-stage { color: #8ecae6; font-size: 11px; }
#ranking-list li .r-score { color: #ffe066; font-weight: bold; min-width: 56px; text-align: right; }
#ranking-list li.mine { background-color: rgba(111,208,255,0.15); border-radius: 4px; }
#ranking-list li.mine .r-nick { color: #6fd0ff; font-weight: bold; }