* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: #f5c9dd;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  background: #f5c9dd;
}

button {
  font: inherit;
  -webkit-user-select: none;
  user-select: none;
}

.game-shell {
  position: fixed;
  inset: 0;
  width: min(100%, 430px);
  max-width: 430px;
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  contain: layout paint size;
  background: #f5c9dd;
  box-shadow: 0 0 40px rgb(93 69 99 / 16%);
}

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

.game-ui {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding:
    max(16px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    max(18px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
  pointer-events: none;
}

.game-ui[hidden] {
  display: none;
}

.game-hud {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

.hud-item {
  display: grid;
  min-width: 92px;
  padding: 10px 16px;
  border: 1px solid rgb(255 255 255 / 82%);
  border-radius: 18px;
  color: #5d4563;
  background: rgb(255 255 255 / 78%);
  box-shadow: 0 8px 24px rgb(100 70 105 / 12%);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.hud-item__label {
  color: #98778f;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
}

.hud-item strong {
  font-size: 22px;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.touch-controls {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
}

.control-button {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(72px, 22vw, 88px);
  aspect-ratio: 1;
  padding: 0;
  overflow: hidden;
  border: 1.5px solid rgb(255 255 255 / 68%);
  border-radius: 22px;
  color: #ffffff;
  font-size: 38px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  background: linear-gradient(145deg, rgb(255 255 255 / 24%), rgb(232 174 218 / 16%));
  box-shadow:
    0 10px 26px rgb(126 82 143 / 16%),
    inset 0 1px 0 rgb(255 255 255 / 74%),
    inset 0 -10px 20px rgb(177 119 174 / 7%);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  backdrop-filter: blur(18px) saturate(1.35);
  pointer-events: auto;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 100ms ease, box-shadow 100ms ease;
}

.control-button::before {
  position: absolute;
  inset: 7px;
  border: 1px solid rgb(255 255 255 / 24%);
  border-radius: inherit;
  background: radial-gradient(circle at 30% 20%, rgb(255 255 255 / 46%), transparent 46%);
  content: "";
  pointer-events: none;
}

.control-button span {
  position: relative;
  z-index: 1;
  transform: translateY(-2px);
  text-shadow: 0 2px 6px rgb(75 49 88 / 34%);
}

.control-button.is-pressed,
.control-button:active {
  transform: translateY(3px) scale(0.96);
  background: linear-gradient(145deg, rgb(255 255 255 / 36%), rgb(223 153 208 / 27%));
  box-shadow:
    0 6px 15px rgb(126 82 143 / 20%),
    inset 0 2px 10px rgb(91 55 111 / 16%);
}

.control-button:focus-visible {
  outline: 3px solid #5d4563;
  outline-offset: 3px;
}

.start-screen {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: grid;
  place-items: center;
  min-width: 0;
  padding:
    max(24px, env(safe-area-inset-top))
    max(20px, env(safe-area-inset-right))
    max(24px, env(safe-area-inset-bottom))
    max(20px, env(safe-area-inset-left));
  overflow: hidden;
  text-align: center;
  background:
    radial-gradient(circle at 16% 18%, rgb(244 175 208 / 45%) 0 9%, transparent 10%),
    radial-gradient(circle at 86% 76%, rgb(190 173 235 / 42%) 0 12%, transparent 13%),
    linear-gradient(155deg, #fffaf6 0%, #fff0f7 50%, #f4efff 100%);
}

.start-screen[hidden] {
  display: none;
}

.start-card {
  width: min(100%, 360px);
  padding: clamp(30px, 8vw, 44px) clamp(22px, 7vw, 36px);
  border: 1px solid rgb(255 255 255 / 80%);
  border-radius: 32px;
  background: rgb(255 255 255 / 72%);
  box-shadow: 0 22px 60px rgb(100 70 105 / 14%);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.start-card__eyebrow {
  display: block;
  margin-bottom: 12px;
  color: #9a6b8d;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.start-card h1 {
  margin: 0;
  color: #5d4563;
  font-size: clamp(42px, 13vw, 64px);
  line-height: 0.9;
  letter-spacing: -0.055em;
}

.start-card p {
  max-width: 250px;
  margin: 24px auto 28px;
  color: #715f75;
  font-size: clamp(16px, 4.5vw, 19px);
  line-height: 1.45;
}

.play-button {
  width: min(100%, 240px);
  min-height: 58px;
  border: 0;
  border-radius: 999px;
  color: #ffffff;
  font-size: 19px;
  font-weight: 800;
  cursor: pointer;
  background: linear-gradient(135deg, #e87bb2, #a482dc);
  box-shadow: 0 12px 26px rgb(178 101 161 / 30%);
  -webkit-tap-highlight-color: transparent;
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.play-button:active {
  transform: translateY(2px) scale(0.98);
  box-shadow: 0 7px 16px rgb(178 101 161 / 24%);
}

.play-button:focus-visible {
  outline: 3px solid #5d4563;
  outline-offset: 4px;
}

.game-over-screen {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: grid;
  place-items: center;
  padding:
    max(24px, env(safe-area-inset-top))
    max(20px, env(safe-area-inset-right))
    max(24px, env(safe-area-inset-bottom))
    max(20px, env(safe-area-inset-left));
  overflow: hidden;
  text-align: center;
  background: rgb(82 58 88 / 34%);
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
}

.game-over-screen[hidden] {
  display: none;
}

.game-over-card {
  width: min(100%, 360px);
  padding: clamp(28px, 8vw, 42px) clamp(22px, 7vw, 36px);
  border: 1px solid rgb(255 255 255 / 86%);
  border-radius: 32px;
  background: linear-gradient(155deg, rgb(255 250 246 / 96%), rgb(249 239 255 / 96%));
  box-shadow: 0 24px 70px rgb(63 42 68 / 26%);
}

.game-over-card__eyebrow {
  display: block;
  margin-bottom: 8px;
  color: #a16e91;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.game-over-card h2 {
  margin: 0;
  color: #5d4563;
  font-size: clamp(38px, 12vw, 54px);
  line-height: 1;
  letter-spacing: -0.045em;
}

.final-results {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin: 24px 0 20px;
}

.final-results div {
  display: grid;
  gap: 2px;
  padding: 14px 10px;
  border-radius: 18px;
  color: #5d4563;
  background: #ffffff;
  box-shadow: 0 7px 20px rgb(100 70 105 / 9%);
}

.final-results span {
  color: #98778f;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.final-results strong {
  font-size: 25px;
  font-variant-numeric: tabular-nums;
}

.game-over-message {
  min-height: 48px;
  margin: 0 auto 24px;
  color: #715f75;
  font-size: 17px;
  line-height: 1.4;
}

@media (max-height: 520px) {
  .game-ui {
    padding-block: 10px;
  }

  .control-button {
    width: 62px;
  }

  .start-card {
    padding-block: 22px;
  }

  .start-card h1 {
    font-size: 38px;
  }

  .start-card p {
    margin-block: 14px 18px;
  }

  .game-over-card {
    padding-block: 20px;
  }

  .game-over-card h2 {
    font-size: 34px;
  }

  .final-results {
    margin-block: 14px;
  }

  .game-over-message {
    min-height: 0;
    margin-bottom: 16px;
  }
}