:root {
  --bg: #141414;
  --text: #f5efe0;
  --muted: #9a948a;
  --ink: #1d1d1d;
  --panel: #fff8e6;
  --red: #e9695f;
  --gold: #ffc93c;
  --font: "Comic Sans MS", "Chalkboard SE", "Comic Neue", cursive;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
}

#game {
  display: flex; flex-direction: column;
  height: 100dvh; max-width: 440px; margin: 0 auto;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  gap: 12px;
}

/* HUD: one centered column. Title before play, then the count (+ streak chip under it).
   Fixed height so the stage never resizes when things appear. */
.hud {
  height: 92px; flex: none;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
}
.hud h1 { margin: 18px 0 0; font-size: 30px; letter-spacing: 1px; }
.hud [hidden] { display: none !important; }
.counter {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  color: var(--gold);
  font-family: ui-monospace, Menlo, monospace;
  transition: color .35s, text-shadow .35s;
}
.counter b { font-size: 44px; line-height: 1; display: inline-block; }
.counter span { font-size: 11px; letter-spacing: 2px; margin-top: 2px; }
.counter b.bump { animation: bump .18s ease-out; }
@keyframes bump { 50% { transform: scale(1.2); } }
.counter.rank { color: #fff; text-shadow: 0 0 14px var(--gold); }

/* +1 that drifts up off the counter */
.plus {
  position: absolute; left: calc(100% + 4px); top: 0;
  font: bold 14px ui-monospace, Menlo, monospace; color: var(--gold);
  pointer-events: none; animation: plus .6s ease-out forwards;
}
@keyframes plus { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-22px); opacity: 0; } }

/* perfect-streak chip: only exists while a streak is alive */
#streak {
  display: flex; align-items: baseline; gap: 2px;
  margin-top: 4px;
  font: bold 15px ui-monospace, Menlo, monospace; color: var(--gold);
  transform: scale(var(--s, 1)); transform-origin: center top;
  transition: transform .15s;
  animation: chip-in .2s ease-out;
}
@keyframes chip-in { from { transform: scale(.5); opacity: 0; } }

/* Stage */
#stage {
  flex: 1; position: relative; min-height: 0; overflow: hidden;
  touch-action: manipulation; cursor: pointer;
}
#stage canvas { position: absolute; inset: 0; display: block; }

/* Prompt + toast */
#prompt {
  position: absolute; left: 0; right: 0; top: 22%; margin: 0;
  text-align: center; font-size: 26px; font-weight: bold; color: var(--gold);
  animation: pulse 1s ease-in-out infinite alternate; pointer-events: none;
}
#prompt[hidden] { display: none; }
@keyframes pulse { to { opacity: .45; } }

#toast {
  position: absolute; left: 50%; top: 12%;
  transform: translate(-50%, 8px);
  font-size: 18px; font-weight: bold; letter-spacing: 2px; color: var(--gold);
  opacity: 0; transition: opacity .12s, transform .12s; pointer-events: none;
  white-space: nowrap;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#toast.rank { transition: opacity .35s, transform .35s; font-size: 28px; letter-spacing: 1px; color: #fff; text-shadow: 0 0 14px var(--gold); }

/* Ending card */
#ending {
  position: fixed; inset: 0; display: flex; align-items: flex-end; justify-content: center;
  background: linear-gradient(transparent 45%, rgb(0 0 0 / .6));
  padding: 16px 16px calc(12dvh + env(safe-area-inset-bottom));
}
#ending[hidden] { display: none; }
#ending .card {
  background: var(--panel); color: var(--ink);
  border: 4px solid var(--ink); border-radius: 16px;
  padding: 18px 20px; width: 100%; max-width: 340px; text-align: center;
  animation: rise .35s ease-out;
}
#ending .mascot[hidden] { display: none; }
#ending .mascot { width: 96px; height: 96px; object-fit: contain; margin: -4px auto 8px; display: block; }
#ending .score-block { margin-bottom: 12px; }
#ending .score { margin: 0; font-size: 60px; line-height: 1; font-weight: bold; }
#ending .label { margin: 2px 0 0; font-size: 12px; letter-spacing: 2px; }
#ending .streak {
  display: table; margin: 0 auto 16px; padding: 4px 12px;
  border-radius: 999px; background: rgb(0 0 0 / .06);
  font-size: 14px; color: #6b665e;
}
#ending h2 { margin: 0 0 6px; font-size: 26px; }
#ending .line { margin: 0 0 14px; }
#ending button {
  font: inherit; font-weight: bold; font-size: 18px; padding: 10px 22px;
  background: var(--red); color: #fff; border: 3px solid var(--ink); border-radius: 10px; cursor: pointer;
}
@keyframes rise { from { transform: translateY(60px); opacity: 0; } }