* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 20% 10%, rgba(77, 243, 255, 0.16), transparent 26%),
    radial-gradient(circle at 80% 20%, rgba(255, 77, 109, 0.12), transparent 28%),
    radial-gradient(circle at 50% 100%, rgba(255, 216, 107, 0.13), transparent 30%),
    linear-gradient(135deg, #050509, #100824 45%, #020205);
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  overflow-x: hidden;
}

.game-wrapper {
  max-width: 840px;
  margin: 22px auto;
  padding: 0 14px 34px;
}

h1 {
  font-size: 52px;
  margin: 8px 0 4px;
  letter-spacing: 3px;
  color: #ffd86b;
  text-transform: uppercase;
  text-shadow:
    0 0 8px rgba(255, 216, 107, 0.95),
    0 0 25px rgba(255, 216, 107, 0.65),
    0 0 55px rgba(255, 216, 107, 0.3);
}

.game-wrapper > p {
  margin-top: 0;
  margin-bottom: 16px;
  font-size: 16px;
  color: #d8d2f0;
  letter-spacing: 0.8px;
}

.hud {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 18px auto;
  max-width: 820px;
  font-size: 14px;
  gap: 10px;
  flex-wrap: wrap;
}

.hud span {
  min-width: 112px;
  padding: 10px 12px;
  border: 1px solid rgba(77, 243, 255, 0.26);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015)),
    rgba(5, 5, 15, 0.72);
  box-shadow:
    inset 0 0 14px rgba(255, 216, 107, 0.04),
    0 0 18px rgba(77, 243, 255, 0.09),
    0 8px 18px rgba(0, 0, 0, 0.32);
  color: #e6e1ff;
}

.hud strong {
  color: #ffd86b;
  text-shadow: 0 0 12px rgba(255, 216, 107, 0.65);
}

button {
  background: linear-gradient(135deg, #ffe58c, #ffb84d 55%, #ff8f3d);
  border: none;
  padding: 11px 20px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 900;
  color: #1a1005;
  letter-spacing: 0.4px;
  box-shadow:
    0 0 18px rgba(255, 216, 107, 0.38),
    0 6px 0 rgba(116, 65, 0, 0.85);
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}

button:hover {
  filter: brightness(1.1);
  box-shadow:
    0 0 28px rgba(255, 216, 107, 0.6),
    0 6px 0 rgba(116, 65, 0, 0.85);
}

button:active {
  transform: translateY(4px);
  box-shadow:
    0 0 15px rgba(255, 216, 107, 0.35),
    0 2px 0 rgba(116, 65, 0, 0.85);
}

#pauseBtn,
#soundBtn {
  background: linear-gradient(135deg, #4df3ff, #72fff0);
  color: #061417;
  box-shadow:
    0 0 18px rgba(77, 243, 255, 0.35),
    0 6px 0 rgba(15, 72, 82, 0.85);
}

.game-area {
  position: relative;
  width: 606px;
  height: 606px;
  margin: 0 auto;
  border-radius: 22px;
  padding: 3px;
  background: linear-gradient(135deg, #ffd86b, #4df3ff, #b84dff, #ff4d6d);
  box-shadow:
    0 0 28px rgba(255, 216, 107, 0.26),
    0 0 48px rgba(77, 243, 255, 0.16),
    0 0 70px rgba(184, 77, 255, 0.12),
    0 20px 55px rgba(0, 0, 0, 0.65);
}

canvas {
  display: block;
  width: 600px;
  height: 600px;
  background: #060711;
  border-radius: 19px;
  max-width: 100%;
}

.screen {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 600px;
  height: 600px;
  background:
    radial-gradient(circle at top, rgba(77, 243, 255, 0.12), transparent 34%),
    radial-gradient(circle at bottom, rgba(255, 216, 107, 0.11), transparent 34%),
    rgba(4, 4, 14, 0.95);
  backdrop-filter: blur(5px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 19px;
  padding: 30px;
}

.screen h2 {
  font-size: 48px;
  color: #ffd86b;
  text-shadow:
    0 0 12px rgba(255, 216, 107, 0.95),
    0 0 34px rgba(255, 216, 107, 0.55);
  margin: 0 0 14px;
}

#pauseScreen h2,
#levelCompleteScreen h2 {
  color: #4df3ff;
  text-shadow:
    0 0 12px rgba(77, 243, 255, 0.95),
    0 0 34px rgba(77, 243, 255, 0.55);
}

.screen p {
  max-width: 440px;
  font-size: 18px;
  line-height: 1.55;
  margin: 8px 0;
  color: #d7d1ef;
}

.small-text {
  font-size: 15px !important;
  color: #aaa4c8 !important;
  margin-bottom: 22px !important;
}

.hidden {
  display: none;
}

.score-submit-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 12px 0 18px;
  width: 100%;
  max-width: 320px;
}

.score-submit-box input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(77, 243, 255, 0.36);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  font-size: 16px;
  text-align: center;
  outline: none;
}

.score-submit-box input::placeholder {
  color: rgba(255, 255, 255, 0.55);
}

.mobile-controls {
  display: grid;
  grid-template-columns: repeat(3, 74px);
  grid-template-rows: repeat(2, 64px);
  gap: 11px;
  justify-content: center;
  margin: 24px auto 0;
}

.control-btn {
  width: 74px;
  height: 64px;
  font-size: 30px;
  border-radius: 20px;
  background: linear-gradient(135deg, #4df3ff, #ffd86b);
  color: #11101b;
  box-shadow:
    0 0 20px rgba(77, 243, 255, 0.36),
    0 6px 0 rgba(15, 72, 82, 0.9);
  user-select: none;
  touch-action: manipulation;
}

.control-btn.empty {
  opacity: 0;
  pointer-events: none;
}

#message {
  min-height: 34px;
  margin-top: 20px;
  font-size: 23px;
  font-weight: 900;
  color: #ffd86b;
  text-shadow: 0 0 18px rgba(255, 216, 107, 0.55);
}

#levelBonusText {
  font-size: 28px;
  font-weight: 900;
  color: #ffd86b;
  text-shadow: 0 0 20px rgba(255, 216, 107, 0.7);
}

#nextLevelText {
  font-size: 20px;
  color: #ffffff;
}

.leaderboard-section,
.how-to-play {
  max-width: 790px;
  margin: 34px auto 0;
  padding: 24px;
  border: 1px solid rgba(77, 243, 255, 0.18);
  border-radius: 24px;
  background:
    radial-gradient(circle at top, rgba(77, 243, 255, 0.08), transparent 35%),
    rgba(5, 5, 15, 0.68);
  box-shadow:
    inset 0 0 22px rgba(255, 216, 107, 0.04),
    0 0 30px rgba(77, 243, 255, 0.08);
}

.leaderboard-section h2,
.how-to-play h2 {
  margin: 0 0 12px;
  color: #ffd86b;
  font-size: 30px;
  text-shadow: 0 0 18px rgba(255, 216, 107, 0.5);
}

.leaderboard-note {
  margin: 0 0 18px;
  font-size: 14px;
  color: #bfb8dc;
}

.leaderboard-list {
  list-style-position: inside;
  margin: 0 auto;
  padding: 0;
  max-width: 520px;
  text-align: left;
}

.leaderboard-list li {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 10px;
  align-items: center;
  margin: 9px 0;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 15px;
  background: rgba(5, 5, 15, 0.62);
  color: #e8e3ff;
}

.rank-number {
  color: #ffd86b;
  font-weight: 900;
}

.score-name {
  font-weight: 800;
}

.score-points {
  color: #4df3ff;
  font-weight: 900;
}

.guide-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 20px;
}

.guide-card {
  min-height: 150px;
  padding: 18px 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  background: rgba(5, 5, 15, 0.62);
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.24);
}

.guide-icon {
  width: 44px;
  height: 44px;
  margin: 0 auto 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  font-size: 22px;
  font-weight: 900;
}

.guide-card h3 {
  margin: 8px 0 6px;
  font-size: 16px;
  color: #ffffff;
}

.guide-card p {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: #bfb8dc;
}

.guide-icon.yellow {
  color: #1a1200;
  background: #ffd86b;
  box-shadow: 0 0 18px rgba(255, 216, 107, 0.65);
}

.guide-icon.red {
  color: #ffffff;
  background: #ff4d6d;
  box-shadow: 0 0 18px rgba(255, 77, 109, 0.65);
}

.guide-icon.blue {
  color: #05141a;
  background: #4df3ff;
  box-shadow: 0 0 18px rgba(77, 243, 255, 0.65);
}

.guide-icon.green {
  color: #041408;
  background: #50ff88;
  box-shadow: 0 0 18px rgba(80, 255, 136, 0.65);
}

.guide-icon.purple {
  color: #ffffff;
  background: #b84dff;
  box-shadow: 0 0 18px rgba(184, 77, 255, 0.65);
}

.guide-icon.hunter {
  color: #ffffff;
  background: #6f28b8;
  box-shadow: 0 0 18px rgba(184, 77, 255, 0.65);
}

@media (max-width: 700px) {
  .game-wrapper {
    margin: 10px auto;
    padding: 0 10px 24px;
  }

  h1 {
    font-size: 34px;
    letter-spacing: 1px;
  }

  .game-wrapper > p {
    font-size: 14px;
    margin-bottom: 12px;
  }

  .hud {
    max-width: 95vw;
    font-size: 12px;
    gap: 7px;
    margin: 12px auto;
  }

  .hud span {
    min-width: 98px;
    padding: 8px 9px;
    border-radius: 12px;
  }

  .hud button {
    padding: 9px 14px;
  }

  .game-area {
    width: calc(95vw + 6px);
    height: calc(95vw + 6px);
    max-width: 606px;
    max-height: 606px;
    border-radius: 18px;
  }

  canvas {
    width: 95vw;
    height: 95vw;
    max-width: 600px;
    max-height: 600px;
    border-radius: 15px;
  }

  .screen {
    width: 95vw;
    height: 95vw;
    max-width: 600px;
    max-height: 600px;
    border-radius: 15px;
    padding: 20px;
  }

  .screen h2 {
    font-size: 30px;
  }

  .screen p {
    font-size: 13px;
    max-width: 84%;
  }

  .small-text {
    font-size: 11px !important;
  }

  .score-submit-box {
    max-width: 260px;
    gap: 8px;
    margin: 8px 0 12px;
  }

  .score-submit-box input {
    padding: 10px 12px;
    font-size: 14px;
  }

  .mobile-controls {
    grid-template-columns: repeat(3, 66px);
    grid-template-rows: repeat(2, 58px);
    gap: 9px;
    margin-top: 18px;
  }

  .control-btn {
    width: 66px;
    height: 58px;
    font-size: 27px;
    border-radius: 18px;
  }

  #message {
    font-size: 17px;
    margin-top: 14px;
  }

  .leaderboard-section,
  .how-to-play {
    margin-top: 26px;
    padding: 18px;
  }

  .leaderboard-section h2,
  .how-to-play h2 {
    font-size: 24px;
  }

  .leaderboard-list li {
    grid-template-columns: 28px 1fr auto;
    font-size: 13px;
    padding: 10px;
  }

  .guide-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .guide-card {
    min-height: 140px;
    padding: 14px 10px;
  }

  .guide-icon {
    width: 38px;
    height: 38px;
    font-size: 19px;
  }

  .guide-card h3 {
    font-size: 14px;
  }

  .guide-card p {
    font-size: 12px;
  }
}

@media (max-width: 390px) {
  h1 {
    font-size: 30px;
  }

  .hud {
    font-size: 11px;
  }

  .hud span {
    min-width: 92px;
  }

  .mobile-controls {
    grid-template-columns: repeat(3, 60px);
    grid-template-rows: repeat(2, 54px);
  }

  .control-btn {
    width: 60px;
    height: 54px;
    font-size: 24px;
  }

  .guide-grid {
    grid-template-columns: 1fr;
  }

  .guide-card {
    min-height: auto;
  }
}