:root {
  color-scheme: dark;
  font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  color: #f3f0e6;
  background: radial-gradient(circle at 50% 0%, #24365c 0%, #101728 55%, #0a0f1c 100%);
  --accent: #ffd34d;
  --good: #7ce38b;
  --danger: #ff6b6b;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body { margin: 0; }

body {
  min-height: 100dvh;
  padding: 10px 10px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  overflow-x: hidden;
}

.site-head { text-align: center; }

h1 {
  margin: 0;
  font-size: clamp(1.35rem, 4vw, 2rem);
  letter-spacing: .02em;
  text-shadow: 0 3px 0 #00000055;
}

.tagline {
  margin: 2px 0 0;
  font-size: clamp(.8rem, 2.4vw, .98rem);
  color: #bcd0ee;
}

.game-shell {
  position: relative;
  width: min(calc(100vw - 20px), 1100px, calc((100dvh - 20px) * 1.5));
  aspect-ratio: 3 / 2;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 45px #00000066, 0 0 0 3px #2c4068;
  background: #1a2440;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: crosshair;
}

.hud {
  position: absolute;
  inset: 0 0 auto;
  display: flex;
  justify-content: space-between;
  padding: 8px 10px;
  pointer-events: none;
  gap: 8px;
}

.hud-side {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
}

.hud-right { justify-content: flex-end; }

.hud span {
  background: #101728cc;
  border: 1px solid #ffffff22;
  border-radius: 999px;
  padding: 4px 11px;
  font-size: clamp(.66rem, 1.8vw, .92rem);
  font-weight: 700;
  letter-spacing: .03em;
  white-space: nowrap;
  backdrop-filter: blur(3px);
}

.hearts {
  color: #ff7a8a;
  letter-spacing: .12em;
  font-size: clamp(.78rem, 2.2vw, 1.05rem);
}

.stink-button {
  position: absolute;
  right: 12px;
  bottom: 12px;
  font: inherit;
  font-weight: 800;
  font-size: clamp(.62rem, 1.7vw, .82rem);
  letter-spacing: .06em;
  padding: 10px 16px;
  border-radius: 999px;
  border: 2px solid #b487ff;
  background: #4c2a7b;
  color: #f3e8ff;
  cursor: pointer;
  box-shadow: 0 5px 0 #2c1547;
  touch-action: manipulation;
}

.stink-button:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 2px 0 #2c1547; }

.stink-button:disabled {
  opacity: .35;
  cursor: default;
  border-color: #ffffff33;
  box-shadow: none;
  background: #2a3350;
}

.overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  background: radial-gradient(circle at 50% 40%, #101728e0, #060a14f2);
  z-index: 5;
}

.overlay[hidden] { display: none; }

.panel {
  width: min(560px, 92%);
  max-height: 100%;
  overflow: auto;
  text-align: center;
  padding: clamp(14px, 3vw, 26px);
  border-radius: 20px;
  background: linear-gradient(180deg, #25355a, #17223a);
  border: 2px solid #3d5688;
  box-shadow: 0 20px 50px #00000088;
}

.panel h2 {
  margin: 0 0 8px;
  font-size: clamp(1.15rem, 3.4vw, 1.8rem);
  color: var(--accent);
  text-shadow: 0 2px 0 #00000066;
}

.overlay-body {
  font-size: clamp(.78rem, 2.2vw, 1rem);
  line-height: 1.5;
  color: #dbe6f8;
}

.overlay-body p { margin: 0 0 8px; }

.overlay-body .big {
  font-size: clamp(1.5rem, 5vw, 2.4rem);
  font-weight: 800;
  color: var(--good);
  margin: 6px 0;
}

.overlay-body .detail {
  color: #a9bfe0;
  font-size: .86em;
}

.panel button {
  font: inherit;
  font-weight: 800;
  font-size: clamp(.85rem, 2.4vw, 1.05rem);
  margin-top: 12px;
  padding: 11px 26px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffe072, #f4b72b);
  color: #3a2600;
  cursor: pointer;
  box-shadow: 0 5px 0 #a97a06;
}

.panel button:active { transform: translateY(3px); box-shadow: 0 2px 0 #a97a06; }

.scores {
  width: min(560px, 100%);
  text-align: center;
}

.scores h2 { margin: 0 0 4px; font-size: 1.1rem; color: #cfe0ff; }

#scores-status { margin: 0 0 6px; color: #9db2d3; font-size: .85rem; }

#scores-board {
  display: inline-block;
  text-align: left;
  margin: 0 auto;
  padding-left: 1.4em;
  line-height: 1.6;
  font-size: .9rem;
}

#score-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 10px 0;
}

#score-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: .78rem;
  color: #b7c9e6;
}

#score-form input {
  font: inherit;
  padding: 8px 10px;
  width: 6.5em;
  border-radius: 10px;
  border: 1px solid #3d5688;
  background: #101728;
  color: #fff;
}

#score-form button,
#refresh-scores {
  font: inherit;
  font-weight: 700;
  font-size: .85rem;
  padding: 9px 16px;
  border: 0;
  border-radius: 12px;
  background: #3d5688;
  color: #eef4ff;
  cursor: pointer;
}

#refresh-scores { margin-top: 4px; }

.help {
  width: min(700px, 100%);
  margin: 0;
  text-align: center;
  color: #9fb2d2;
  font-size: clamp(.72rem, 2vw, .85rem);
  line-height: 1.5;
}

@media (max-width: 620px) {
  body { padding: 6px 6px 20px; gap: 6px; }
  .tagline { display: none; }
  .game-shell { width: min(calc(100vw - 12px), calc((100dvh - 12px) * 1.5)); border-radius: 12px; }
}

@media (orientation: landscape) and (max-height: 560px) {
  .site-head, .scores, .help { display: none; }
  body { padding: 0; gap: 0; justify-content: center; }
  .game-shell { width: min(100vw, calc(100dvh * 1.5)); border-radius: 0; box-shadow: none; }
}