:root {
  color-scheme: dark;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  background: #071e2c;
  color: #f4fbff;
  font-synthesis: none;
}

* {
  box-sizing: border-box;
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  padding: 20px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(30, 111, 134, 0.34), transparent 56%),
    #071e2c;
}

button {
  font: inherit;
}

.game-shell {
  width: min(100%, 1120px);
  margin: 0 auto;
}

.game-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin: 0 2px 14px;
}

.eyebrow {
  margin: 0 0 4px;
  color: #8be3d4;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-size: clamp(1.55rem, 4vw, 2.25rem);
  line-height: 1;
}

.scoreboard {
  display: flex;
  gap: 10px;
}

.scoreboard span {
  min-width: 82px;
  padding: 9px 12px;
  border: 1px solid rgba(153, 224, 230, 0.18);
  border-radius: 12px;
  background: rgba(7, 42, 56, 0.82);
  color: #acd0d9;
  font-size: 0.77rem;
}

.scoreboard strong {
  float: right;
  margin-left: 12px;
  color: #fff2a1;
  font-size: 1rem;
}

.game-frame {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1000 / 640;
  border: 2px solid rgba(159, 230, 226, 0.5);
  border-radius: 18px;
  background: #0b3443;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.36), 0 0 34px rgba(36, 164, 177, 0.11);
}

#game-canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

.game-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.start-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(390px, 82%);
  padding: clamp(18px, 4vw, 30px);
  transform: translate(-50%, -50%);
  border: 1px solid rgba(172, 238, 232, 0.46);
  border-radius: 20px;
  background: rgba(5, 34, 47, 0.93);
  box-shadow: 0 14px 60px rgba(0, 0, 0, 0.44);
  text-align: center;
  pointer-events: auto;
}

.start-panel h2 {
  margin: 4px 0 9px;
  font-size: clamp(1.45rem, 3vw, 2rem);
}

.primary-button {
  padding: 11px 22px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffe776, #f4ae39);
  color: #3a2910;
  font-weight: 900;
  box-shadow: 0 4px 0 #bd7625;
  cursor: pointer;
}

.primary-button:hover {
  filter: brightness(1.08);
}

.primary-button:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #bd7625;
}

.bite-button {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: clamp(54px, 8%, 76px);
  aspect-ratio: 1;
  padding: 4px;
  transform: translate(-50%, -50%);
  place-items: center;
  border: 3px solid #fff3a2;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #fff58c, #ffbf35 58%, #f06d2c);
  color: #572410;
  font-size: clamp(0.58rem, 1.5vw, 0.78rem);
  font-weight: 1000;
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 0 5px rgba(255, 220, 82, 0.24), 0 7px 18px rgba(0, 0, 0, 0.42);
  cursor: pointer;
  pointer-events: auto;
  animation: bite-pulse 0.75s ease-in-out infinite alternate;
}

.bite-button span {
  display: block;
  margin-top: 2px;
  font-size: 0.62em;
  font-weight: 800;
}

.bite-button[hidden],
.start-panel[hidden],
.debug-panel[hidden] {
  display: none;
}

.bite-button:focus-visible,
.primary-button:focus-visible {
  outline: 3px solid white;
  outline-offset: 4px;
}

@keyframes bite-pulse {
  to {
    transform: translate(-50%, -50%) scale(1.07);
  }
}

.status-label {
  min-height: 1.5em;
  margin: 12px 4px 0;
  color: #f4fbff;
  font-size: clamp(0.84rem, 1.7vw, 1rem);
  font-weight: 800;
  text-align: center;
  text-shadow: 0 1px 4px #062c39;
}

.debug-panel {
  position: absolute;
  top: 3%;
  left: 2%;
  min-width: 190px;
  padding: 9px 11px;
  border: 1px solid rgba(162, 230, 232, 0.35);
  border-radius: 9px;
  background: rgba(3, 21, 30, 0.86);
  color: #b9f3e7;
  font: 0.72rem/1.55 Consolas, monospace;
  pointer-events: none;
}

.game-instructions {
  margin-top: 8px;
  padding: 16px 20px;
  border: 1px solid rgba(153, 224, 230, 0.18);
  border-radius: 12px;
  background: rgba(7, 42, 56, 0.72);
  color: #c3dce1;
}

.game-instructions h2 {
  margin: 0 0 6px;
  color: #8be3d4;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.game-instructions p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.55;
}

kbd {
  padding: 1px 4px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 3px;
  font: inherit;
}

.footer-note {
  margin: 10px 3px 0;
  color: #8faeb8;
  font-size: 0.76rem;
}

@media (max-width: 560px) {
  body {
    padding: 10px;
  }

  .game-header {
    align-items: center;
  }

  .scoreboard {
    gap: 5px;
  }

  .scoreboard span {
    min-width: 67px;
    padding: 7px 8px;
    font-size: 0.68rem;
  }

  .scoreboard strong {
    margin-left: 5px;
  }

  .game-frame {
    border-radius: 10px;
  }
}