:root {
  --ground: #F58C97; --panel: #FFC4C9; --card: #FFF1F3; --ink: #2F3A66; --muted: #6B5472; --line: #F6A9B2;
  --tile: #FFFFFF; --rose: #D93A4E; --balloon: #D93A4E; --balloon-shade: #B92A3E;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #171A35; --panel: #262147; --card: #312852; --ink: #FBE4EA; --muted: #C9A9C4; --line: #4C3B6A;
    --tile: #3A2E5C; --rose: #FF6B81; --balloon: #E0475D; --balloon-shade: #B8304A;
  }
}
:root[data-theme="dark"] {
  --ground: #171A35; --panel: #262147; --card: #312852; --ink: #FBE4EA; --muted: #C9A9C4; --line: #4C3B6A;
  --tile: #3A2E5C; --rose: #FF6B81; --balloon: #E0475D; --balloon-shade: #B8304A;
}

[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--ground);
  color: var(--ink);
  font-family: Quicksand, system-ui, -apple-system, sans-serif;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.wrap {
  position: relative; z-index: 1;
  max-width: 880px; margin: 40px auto 56px; padding: 44px 32px 48px; box-sizing: border-box;
  background: var(--panel); border-radius: 32px;
  box-shadow: 0 50px 70px -36px rgba(70, 18, 40, .55);
}
@media (max-width: 920px) { .wrap { margin: 24px 16px 40px; } }
@media (max-width: 480px) { .wrap { margin: 12px 10px 28px; padding: 28px 14px 32px; border-radius: 24px; } }

/* Heart balloons */
.balloons { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.balloon { position: absolute; width: 96px; animation: bob 6s ease-in-out infinite; transform-origin: 50% 100%; }
.balloon .body { fill: var(--balloon); }
.balloon .knot { fill: var(--balloon-shade); }
.balloon .shine { fill: #fff; opacity: .28; }
.balloon .string { fill: none; stroke: var(--balloon-shade); stroke-width: 1.5; opacity: .7; }
.b1 { left: 2%; top: 8%; animation-delay: -1s; }
.b2 { left: -14px; bottom: -40px; width: 130px; animation-delay: -3s; }
.b3 { right: 3%; top: 22%; width: 80px; animation-delay: -2s; }
.b4 { right: -20px; bottom: -60px; width: 140px; animation-delay: -4.5s; }
.b5 { left: 12%; top: 32%; width: 72px; animation-delay: -2.5s; }
.b6 { right: 13%; top: 44%; width: 88px; animation-delay: -5s; }
@media (max-width: 600px) {
  .balloon { width: 56px; }
  .b1 { left: -12px; top: 4px; }
  .b3 { right: -12px; top: 40%; }
  .b2, .b4, .b5, .b6 { display: none; }
}

/* Page tabs */
.tabs { display: flex; justify-content: center; gap: 6px; width: fit-content; margin: -12px auto 28px; padding: 5px; border-radius: 999px; background: var(--card); box-shadow: 0 8px 18px -12px rgba(70, 18, 40, .4); }
.tab { padding: 9px 20px; border-radius: 999px; font-weight: 700; font-size: 15px; color: var(--ink); text-decoration: none; }
.tab:hover { color: var(--rose); }
.tab[aria-current="page"] { background: var(--rose); color: #fff; }
.tab:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

header { text-align: center; }
.eyebrow { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--rose); }
.title .eyebrow { display: block; margin-bottom: 10px; font-family: Quicksand, system-ui, sans-serif; line-height: 1.2; }
.title { margin: 8px 0 12px; font-family: Fredoka, Quicksand, sans-serif; font-weight: 700; font-size: clamp(36px, 6vw, 58px); line-height: 1.05; color: var(--ink); }
.lede { margin: 0 auto 28px; color: var(--muted); font-size: 18px; line-height: 1.55; max-width: 60ch; }

.card { background: var(--card); border-radius: 24px; padding: 24px; box-shadow: 0 18px 40px -24px rgba(70, 18, 40, .35); }

/* Heart-shaped name form */
.heart-form { position: relative; width: min(600px, 100%); aspect-ratio: 100 / 92; min-height: 400px; margin: 0 auto; }
.heart-shape { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 18px 24px rgba(185, 42, 62, .25)); }
.heart-shape path { fill: var(--card); stroke: var(--rose); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.heart-inner { position: absolute; top: 21%; left: 18%; right: 18%; bottom: 30%; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.heart-fields { width: 100%; display: flex; flex-direction: column; gap: 12px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.label { font-size: 14px; font-weight: 700; color: var(--muted); text-align: center; }
.input { font: inherit; font-weight: 600; font-size: 18px; padding: 14px 16px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--tile); color: var(--ink); width: 100%; box-sizing: border-box; text-align: center; }
.input:focus { outline: 3px solid var(--rose); outline-offset: 1px; border-color: var(--rose); }
.heart-btn { margin-top: auto; }

/* On phones the heart keeps its natural proportions (no min-height stretch) and borrows the panel's side padding. */
@media (max-width: 480px) {
  .heart-form { width: calc(100% + 20px); margin: 0 -10px; min-height: 0; }
  .heart-inner { top: 18%; left: 15%; right: 15%; bottom: 25%; gap: 8px; }
  .heart-fields { gap: 6px; }
  .field { gap: 4px; }
  .label { font-size: 12px; }
  .input { padding: 8px 12px; font-size: 16px; }
  .heart-btn { padding: 8px 14px; font-size: 15px; min-height: 40px; }
}

/* Buttons */
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; align-items: center; justify-content: center; }
.btn { font: inherit; font-weight: 700; font-size: 16px; padding: 13px 26px; border-radius: 999px; cursor: pointer; border: 1.5px solid transparent; min-height: 44px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.primary { background: var(--rose); color: #fff; box-shadow: 0 10px 18px -10px var(--rose); }
.primary:not(:disabled):hover { filter: brightness(1.07); }
.ghost { background: var(--card); color: var(--ink); border-color: var(--line); }
.ghost:hover { border-color: var(--rose); color: var(--rose); }

/* Floats at the bottom of the screen while a calculation plays, so it never scrolls away. */
.skip-float {
  position: fixed; z-index: 10; left: 50%; bottom: max(20px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  box-shadow: 0 14px 28px -10px rgba(70, 18, 40, .55);
  animation: rise .3s ease-out;
}

/* Calculation stage */
.stage { margin-top: 20px; }
.stage.playing { padding-bottom: 96px; }
.phrase { margin: 0; font-family: Fredoka, Quicksand, sans-serif; font-size: clamp(24px, 4vw, 34px); font-weight: 600; line-height: 1.2; word-break: break-word; }
.group { margin-top: 24px; }
.group-label { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.row { display: flex; flex-wrap: wrap; gap: 12px; padding: 6px 4px 8px; }
.lines { display: flex; flex-direction: column; gap: 2px; }
.gap { width: 20px; flex: none; }
.mark { align-self: center; font-family: Fredoka, Quicksand, sans-serif; font-weight: 600; font-size: 20px; color: var(--muted); }

.tile {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; padding: 0; box-sizing: border-box;
  border-radius: 50%; border: 1.5px solid var(--line); background: var(--tile);
  font-family: Fredoka, Quicksand, sans-serif; font-weight: 600; font-size: 20px; color: var(--ink);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
  animation: pop .4s ease-out;
}
.tile.num { width: 48px; height: 48px; font-variant-numeric: tabular-nums; }
.tile.active { transform: translateY(-4px); border-color: var(--rose); box-shadow: 0 0 0 4px color-mix(in srgb, var(--rose) 22%, transparent), 0 8px 16px -8px var(--rose); }
/* --heat is set per tile from its pop intensity, so the finished working reads as a heat map. */
.tile.crossed {
  background: color-mix(in srgb, var(--heat, var(--rose)) 32%, var(--tile));
  border-color: color-mix(in srgb, var(--heat, var(--rose)) 70%, var(--tile));
  color: color-mix(in srgb, var(--heat, var(--rose)) 55%, var(--ink));
}
.tile.final { background: var(--rose); border-color: var(--rose); color: #fff; transform: scale(1.12); box-shadow: 0 10px 20px -10px var(--rose); }

@media (max-width: 480px) {
  .tile { width: 39px; height: 39px; font-size: 17px; }
  .tile.num { width: 41px; height: 41px; }
}

/* Exploding hearts: created by app.js with --dx, --dy, --r, --hc (colour), --hs (size), --glow */
.heart { position: absolute; left: 50%; top: 50%; z-index: 5; width: 0; height: 0; opacity: 0; pointer-events: none; font-style: normal; font-size: var(--hs, 13px); color: var(--hc, var(--rose)); animation: burst .9s ease-out forwards; }
.heart::before { content: "\2665"; position: absolute; left: -.5em; top: -.6em; line-height: 1; filter: drop-shadow(0 0 var(--glow, 0px) var(--hc, var(--rose))); }
.result .heart { animation-duration: 1.3s; }

/* Result */
.result { margin-top: 28px; padding: 28px 16px 8px; text-align: center; border-top: 2px dashed var(--line); }
.result-label { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.result-nums { position: relative; margin: 12px 0 0; display: flex; justify-content: center; align-items: center; gap: 18px; font-family: Fredoka, Quicksand, sans-serif; font-weight: 700; font-size: clamp(64px, 14vw, 120px); line-height: 1; color: var(--ink); }
.sep { color: var(--rose); animation: beat 1.2s ease-in-out infinite; }
.burst { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.result-note { margin: 12px 0 0; color: var(--muted); font-size: 15px; }
.result-reset { margin-top: 24px; }
/* Text sections (home intro, How it works) */
.info { margin-top: 24px; font-size: 17px; line-height: 1.6; }
.info h2 { margin: 0 0 12px; font-family: Fredoka, Quicksand, sans-serif; font-weight: 600; font-size: 24px; line-height: 1.2; }
.info h3 { margin: 22px 0 6px; font-family: Fredoka, Quicksand, sans-serif; font-weight: 600; font-size: 19px; }
.info p { margin: 0 0 12px; }
.info p:last-child { margin-bottom: 0; }
.info ol { margin: 0; padding-left: 22px; display: grid; gap: 10px; }
.info a { color: var(--rose); font-weight: 700; }
.info .row { padding-left: 0; margin-bottom: 8px; }
.info .tile { animation: none; }
.cta { margin-top: 28px; text-align: center; }
.cta .btn { display: inline-block; text-decoration: none; }
.foot { margin: 24px 0 0; font-size: 13px; color: var(--muted); text-align: center; }

@keyframes pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes burst {
  0%   { opacity: 0; transform: translate(0, 0) scale(.2) rotate(0deg); }
  12%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.25) rotate(var(--r)); }
}
@keyframes rise { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translateX(-50%); } }
@keyframes beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-14px) rotate(3deg); } }

@media (prefers-reduced-motion: reduce) {
  .heart { display: none; }
  .tile, .sep, .balloon, .skip-float { animation: none; }
  .tile { transition: none; }
}