* { box-sizing: border-box; }
html,
body,
canvas,
button,
.game-wrap {
  -webkit-tap-highlight-color: transparent;
}
body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #203044;
  background: #8dece9 url("assets/background.png") center / cover fixed no-repeat;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,.22);
  pointer-events: none;
}

.game-shell { position: relative; width: min(96vw, 720px); padding: 14px; }
.top-panel, .info-panel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.eyebrow { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .12em; color: #52708f; }
h1 { margin: 0; font-size: clamp(26px, 7vw, 42px); line-height: 1; color: #16466f; text-shadow: 0 3px 0 rgba(255,255,255,.75); }
.score-row { display: flex; gap: 8px; }
.score-card, .next-box, .evolution-box {
  min-width: 104px;
  padding: 10px 12px;
  border: 3px solid rgba(22,70,111,.18);
  border-radius: 18px;
  background: rgba(255,255,255,.78);
  box-shadow: 0 8px 18px rgba(46,90,120,.18);
  text-align: center;
  backdrop-filter: blur(3px);
}
.score-card span, .next-box span, .evolution-box span { display: block; font-size: 12px; font-weight: 900; color: #678; }
.score-card strong { display: block; font-size: 26px; color: #e77b36; }
.game-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  border: 5px solid rgba(255,255,255,.94);
  box-shadow: 0 18px 40px rgba(37,86,130,.32);
  background: rgba(255,255,255,.25);
  max-width: 560px;
  margin: 0 auto;
}
canvas {
  display: block;
  width: 100%;
  height: auto;
  touch-action: none;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.overlay {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  align-content: center;
  padding: 32px;
  text-align: center;
  background: rgba(15,42,70,.66);
  color: white;
  z-index: 10;
}
.overlay.show { display: grid; }
.overlay h2 { margin: 0 0 10px; font-size: clamp(30px, 8vw, 54px); text-shadow: 0 4px 0 rgba(0,0,0,.18); }
.overlay p { max-width: 420px; line-height: 1.7; }
.overlay .small { font-size: 13px; opacity: .9; }
button {
  border: 0;
  border-radius: 999px;
  padding: 13px 30px;
  font-size: 18px;
  font-weight: 900;
  cursor: pointer;
  color: #17476e;
  background: #fff163;
  box-shadow: 0 6px 0 #d3a431;
}
button {
  border: 0;
  border-radius: 999px;
  padding: 13px 30px;
  font-size: 18px;
  font-weight: 900;
  cursor: pointer;
  color: #17476e;
  background: #fff163;
  box-shadow: 0 6px 0 #d3a431;
  outline: none;
  user-select: none;
  -webkit-user-select: none;
}

button:focus {
  outline: none;
}
.sub-button { background: #dff9ff; box-shadow: 0 6px 0 #76bdd2; }
.button-row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.record-text { min-height: 1.5em; color: #fff163; font-weight: 900; }
.info-panel { margin-top: 10px; align-items: stretch; }
.next-box img { width: 58px; height: 50px; object-fit: contain; display: block; margin: 4px auto 0; }
.evolution-box { flex: 1.2; }
.evolution-list { display: flex; align-items: center; justify-content: center; gap: 5px; flex-wrap: wrap; margin-top: 7px; }
.evo-item { display: flex; align-items: center; gap: 5px; font-size: 18px; font-weight: 900; color: #668; }
.evo-item img { width: 38px; height: 32px; object-fit: contain; filter: drop-shadow(0 2px 1px rgba(0,0,0,.12)); }
.help {
  flex: 1.5;
  padding: 10px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.66);
  font-size: 13px;
  backdrop-filter: blur(3px);
}
.help p { margin: 3px 0; }
.controls { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; }
.mini-button { padding: 8px 14px; font-size: 12px; box-shadow: 0 4px 0 #d3a431; }
@media (max-width: 680px) {
  .game-shell { width: min(98vw, 560px); padding: 8px; }
  .top-panel { align-items: end; }
  .score-card { min-width: 82px; padding: 8px; }
  .score-card strong { font-size: 22px; }
  .info-panel { flex-direction: column; }
  .evolution-list { justify-content: flex-start; }
}