:root {
  color-scheme: dark;
  font-family: "Trebuchet MS", ui-rounded, "Segoe UI", system-ui, sans-serif;
  --night: #07040f;
  --deep: #120a24;
  --panel: #1a1030;
  --edge: #45306f;
  --ghost: #f4f1ff;
  --lavender: #cbbcf5;
  --muted: #a897cf;
  --orange: #ff9328;
  --orange-deep: #d4600c;
  --gold: #ffd166;
  --pink: #ff77bd;
  --green: #8bffa5;
  --red: #ff5a7a;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

html { background: var(--night); }

body {
  min-height: 100svh;
  padding:
    calc(10px + env(safe-area-inset-top))
    calc(10px + env(safe-area-inset-right))
    calc(12px + env(safe-area-inset-bottom))
    calc(10px + env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--ghost);
  background:
    radial-gradient(ellipse 60% 45% at 78% -4%, #3a1a5e 0%, transparent 62%),
    radial-gradient(ellipse 70% 50% at 12% 8%, #23153f 0%, transparent 58%),
    radial-gradient(ellipse 80% 60% at 50% 112%, #1b0c2c 0%, transparent 70%),
    linear-gradient(#0a0616, #07040f 60%, #04030a);
  overflow-x: hidden;
}

header { text-align: center; line-height: 1; }

h1 {
  margin: 2px 0 0;
  font-size: clamp(1.7rem, 5vw, 2.7rem);
  letter-spacing: .16em;
  color: #ffe7b8;
  text-shadow:
    0 0 12px #ff9a2f88,
    0 0 34px #ff6b1c55,
    0 3px 0 #321300;
}

.tagline {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: clamp(.68rem, 2.1vw, .84rem);
  letter-spacing: .13em;
  text-transform: uppercase;
}

main {
  width: min(100%, 1020px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.game-shell {
  position: relative;
  width: min(100%, calc((100svh - 218px) * 16 / 9), 1020px);
  aspect-ratio: 16 / 9;
  border: 1px solid #4b3a78;
  border-radius: 20px;
  overflow: hidden;
  background: #080410;
  box-shadow:
    0 20px 54px #000a,
    0 0 0 1px #0009 inset,
    0 0 46px #5c2b8a33;
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  user-select: none;
}

.hud {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
  padding: clamp(6px, 1.4vw, 12px);
  pointer-events: none;
}

.hud-side {
  display: flex;
  align-items: center;
  gap: clamp(4px, .9vw, 8px);
  min-width: 0;
}

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px clamp(7px, 1.3vw, 11px);
  border: 1px solid #4d3a79;
  border-radius: 999px;
  background: #0d071bd9;
  backdrop-filter: blur(4px);
  font-size: clamp(.58rem, 1.7vw, .8rem);
  font-weight: 800;
  letter-spacing: .08em;
  white-space: nowrap;
  text-shadow: 0 2px 6px #000;
}

.hearts {
  min-width: 4.2em;
  color: var(--pink);
  letter-spacing: 2px;
  text-shadow: 0 0 9px #ff4f9a88, 0 2px 5px #000;
}

.zone {
  max-width: 46vw;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--lavender);
}

.candy {
  color: var(--gold);
  text-shadow: 0 0 9px #ffb23e66, 0 2px 5px #000;
}

.icon-button {
  width: clamp(30px, 4.6vw, 38px);
  height: clamp(30px, 4.6vw, 38px);
  padding: 0;
  border: 1px solid #54407f;
  border-radius: 50%;
  background: #150c28e0;
  color: #ffe7b8;
  font: 1rem/1 system-ui, sans-serif;
  cursor: pointer;
  pointer-events: auto;
}

.icon-button:hover { background: #241640; }
.icon-button:active { transform: translateY(1px); }

.toast {
  position: absolute;
  top: clamp(40px, 7vw, 66px);
  left: 50%;
  z-index: 4;
  width: max-content;
  max-width: 90%;
  margin: 0;
  padding: 5px 14px;
  transform: translate(-50%, -6px);
  border: 1px solid #6b4b9e;
  border-radius: 999px;
  background: #0d071be6;
  color: #ffe6b0;
  font-size: clamp(.62rem, 1.8vw, .86rem);
  font-weight: 700;
  letter-spacing: .04em;
  text-align: center;
  text-shadow: 0 2px 6px #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

.overlay {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 1.2vw, 10px);
  padding: clamp(16px, 4vw, 34px);
  overflow: auto;
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 42%, #1c0f36e6, #05030cf7 78%);
  backdrop-filter: blur(2px);
}

.overlay[hidden] { display: none; }

.overlay .eyebrow {
  margin: 0;
  font-size: clamp(.58rem, 1.8vw, .72rem);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #b7a4e4;
}

.overlay h2 {
  margin: 0;
  font-size: clamp(1.7rem, 6.5vw, 3rem);
  letter-spacing: .05em;
  color: #ffe7b8;
  text-shadow: 0 0 18px #ff9a2f77, 0 0 54px #ff5e0e33;
}

.overlay p {
  width: min(100%, 34em);
  margin: 0;
  color: #ddd5f6;
  font-size: clamp(.76rem, 2.3vw, .98rem);
  line-height: 1.42;
}

.overlay strong { color: var(--gold); }

.overlay .small {
  color: #a99ac9;
  font-size: clamp(.66rem, 1.9vw, .8rem);
}

.controls-help { margin-top: 2px !important; }

.byline {
  color: #8d7cae !important;
  font-size: .72rem !important;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.overlay-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 2px;
}

button.primary,
button.ghost-button {
  min-height: 46px;
  padding: 9px 24px;
  border-radius: 999px;
  font: 800 clamp(.92rem, 2.5vw, 1.06rem) "Trebuchet MS", ui-rounded, system-ui, sans-serif;
  letter-spacing: .02em;
  cursor: pointer;
}

button.primary {
  border: 0;
  background: linear-gradient(#ffd98b, #f59a26);
  color: #2a1503;
  box-shadow: 0 5px 0 #9e530c, 0 9px 22px #0007;
}

button.primary:hover { filter: brightness(1.06); }
button.primary:active { transform: translateY(3px); box-shadow: 0 2px 0 #9e530c; }
button.primary:disabled { opacity: .55; cursor: wait; transform: none; }

button.ghost-button {
  border: 1px solid #6d5596;
  background: #170d2ae6;
  color: #e5dbff;
  box-shadow: 0 4px 0 #0b0615;
}

button.ghost-button:hover { background: #241640; }
button.ghost-button:active { transform: translateY(2px); box-shadow: 0 2px 0 #0b0615; }

.end-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin: 2px 0 !important;
  color: #b9a9db !important;
  font-size: .72rem !important;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.end-score output {
  color: var(--gold);
  font-size: clamp(2rem, 6vw, 2.8rem);
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1;
  text-shadow: 0 0 18px #ffb23e66;
}

.win-overlay {
  background:
    radial-gradient(ellipse at 50% 46%, rgba(58, 26, 36, .62), rgba(10, 5, 16, .9) 76%);
}

kbd {
  display: inline-block;
  min-width: 1.55em;
  padding: 1px 5px;
  border: 1px solid #625096;
  border-bottom-width: 2px;
  border-radius: 5px;
  background: #1d1233;
  color: #fff;
  font: inherit;
  font-size: .84em;
}

.touch-controls {
  display: none;
  width: min(100%, 1020px);
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px;
  touch-action: none;
}

.touch-pad {
  display: flex;
  align-items: center;
  gap: clamp(7px, 2vw, 12px);
}

.touch-button {
  height: clamp(52px, 9vw, 66px);
  min-width: clamp(52px, 9vw, 66px);
  padding: 0 clamp(10px, 2.4vw, 18px);
  border: 1px solid #6c528f;
  border-bottom-width: 5px;
  border-radius: 18px;
  background: linear-gradient(#2a1a47, #170e2a);
  color: #f1e9ff;
  font: 800 clamp(.9rem, 3.4vw, 1.08rem) "Trebuchet MS", ui-rounded, system-ui, sans-serif;
  letter-spacing: .06em;
  text-shadow: 0 2px 5px #000;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

.touch-button.jump {
  border-color: #3f7b63;
  background: linear-gradient(#1e4a3c, #10281f);
  color: #b8ffd4;
}

.touch-button.kick {
  border-color: #a56a24;
  background: linear-gradient(#733d12, #3e1f08);
  color: #ffe1a3;
}

.touch-button.pressed,
.touch-button:active {
  transform: translateY(3px);
  border-bottom-width: 2px;
  filter: brightness(1.16);
}

.key-hint {
  width: min(100%, 860px);
  margin: 0;
  color: #9384b3;
  font-size: clamp(.62rem, 1.8vw, .76rem);
  line-height: 1.5;
  text-align: center;
}

.touch-help { display: none; }

@media (hover: none), (pointer: coarse) {
  .touch-controls { display: flex; }
  .desktop-help { display: none; }
  .touch-help { display: inline; }
}

@media (max-width: 560px) {
  body { gap: 6px; }
  .game-shell { border-radius: 14px; }
  .zone { display: none; }
  .key-hint { display: none; }
  .overlay p { line-height: 1.35; }
  .overlay .byline { display: none; }
}

@media (orientation: landscape) and (max-height: 600px) {
  body {
    gap: 4px;
    padding:
      calc(4px + env(safe-area-inset-top))
      calc(6px + env(safe-area-inset-right))
      calc(6px + env(safe-area-inset-bottom))
      calc(6px + env(safe-area-inset-left));
  }

  header, .tagline, .key-hint { display: none; }

  .game-shell {
    width: min(100%, calc((100svh - 86px) * 16 / 9));
    border-radius: 12px;
  }

  .touch-controls {
    width: min(100%, calc((100svh - 86px) * 16 / 9));
  }

  .touch-button {
    height: clamp(44px, 13svh, 58px);
    min-width: clamp(44px, 13svh, 58px);
    border-radius: 14px;
  }

  .overlay {
    gap: 4px;
    padding: 10px 18px;
  }

  .overlay h2 { font-size: clamp(1.35rem, 6svh, 2rem); }
  .overlay p { font-size: clamp(.66rem, 2.4svh, .82rem); line-height: 1.3; }
  .overlay .small { font-size: clamp(.58rem, 2svh, .7rem); }
  .overlay .byline, .overlay .controls-help { display: none; }
  button.primary, button.ghost-button { min-height: 38px; padding: 6px 18px; font-size: .9rem; }
}

@media (prefers-reduced-motion: reduce) {
  .toast { transition: none; }
}