:root {
  --milk: #ffe3ec;      /* strawberry milk */
  --gingham: rgba(255, 143, 177, 0.14);
  --bow: #e8384f;       /* bow red */
  --pink: #ff8fb1;      /* bubblegum */
  --nose: #ffcf3f;      /* nose yellow */
  --white: #ffffff;
  --ink: #5b2a3c;       /* berry-brown, never black */
  --ink-soft: rgba(91, 42, 60, 0.72);
  --gutter: clamp(16px, 3vw, 36px);
  --round: "M PLUS Rounded 1c", ui-rounded, "Hiragino Maru Gothic ProN", system-ui, sans-serif;
  --pop: "Mochiy Pop One", var(--round);
  --heart-cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cpath d='M15 26 C2 17 3 7 9.5 6 C12.5 5.5 14.3 7.4 15 9 C15.7 7.4 17.5 5.5 20.5 6 C27 7 28 17 15 26Z' fill='%23e8384f' stroke='white' stroke-width='2.6' stroke-linejoin='round'/%3E%3C/svg%3E") 15 15, auto;
}

*,
*::before,
*::after { box-sizing: border-box; }

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  color: var(--ink);
  font-family: var(--round);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

body {
  background-color: var(--milk);
  /* Picnic-cloth gingham. */
  background-image:
    linear-gradient(90deg, var(--gingham) 50%, transparent 50%),
    linear-gradient(var(--gingham) 50%, transparent 50%);
  background-size: 46px 46px;
  cursor: var(--heart-cursor);
}

.glow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 55% at 50% 48%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 70%),
    radial-gradient(ellipse 120% 100% at 50% 50%, transparent 60%, rgba(255, 143, 177, 0.28) 100%);
}

#sky {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

/* ---------- Corners ---------- */

.stage {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink-soft);
}

.corner {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.tl, .tr { top: max(var(--gutter), env(safe-area-inset-top)); }
.bl, .br { bottom: max(var(--gutter), env(safe-area-inset-bottom)); }
.tl, .bl { left: max(var(--gutter), env(safe-area-inset-left)); }
.tr, .br { right: max(var(--gutter), env(safe-area-inset-right)); text-align: right; align-items: flex-end; }

.strong { color: var(--ink); font-weight: 800; }

.live { color: var(--bow); font-weight: 800; }

.beat {
  display: inline-block;
  animation: beat 1.1s ease-in-out infinite;
}

@keyframes beat {
  0%, 60%, 100% { transform: scale(1); }
  15%           { transform: scale(1.35); }
  30%           { transform: scale(1.05); }
  45%           { transform: scale(1.25); }
}

#music {
  pointer-events: auto;
  cursor: pointer;
  margin-bottom: 6px;
  padding: 7px 16px 8px;
  font: 800 14px/1 var(--round);
  color: var(--ink);
  background: var(--white);
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  box-shadow: 0 3px 0 var(--ink);
  transition: transform 0.12s, box-shadow 0.12s;
}

#music:hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--ink); }
#music:active { transform: translateY(3px); box-shadow: 0 0 0 var(--ink); }
#music:focus-visible { outline: 3px solid var(--bow); outline-offset: 3px; }
#music[aria-pressed="true"] { background: var(--pink); }

/* ---------- Center ---------- */

.center {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(100% - 2 * var(--gutter), 860px);
  transform: translate(-50%, -54%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.friend {
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vw, 22px);
  margin-bottom: clamp(-6px, -1vw, 0px);
}

#kitty {
  width: clamp(112px, 15vw, 168px);
  height: auto;
  overflow: visible;
  flex: none;
  filter: drop-shadow(0 6px 0 rgba(255, 143, 177, 0.55));
  transform-origin: 50% 100%;
  animation: sway 5s ease-in-out infinite;
}

#kitty.boing { animation: boing 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }

@keyframes sway {
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate(3deg); }
}

@keyframes boing {
  0%   { transform: translateY(0) scale(1, 1); }
  30%  { transform: translateY(-18px) scale(0.94, 1.08); }
  60%  { transform: translateY(0) scale(1.08, 0.92); }
  100% { transform: translateY(0) scale(1, 1); }
}

#kitty .blink {
  transform-box: fill-box;
  transform-origin: center;
  animation: blink 4.8s infinite;
}

@keyframes blink {
  0%, 94%, 100% { transform: scaleY(1); }
  96%           { transform: scaleY(0.1); }
}

#kitty .bow {
  transform-box: fill-box;
  transform-origin: 50% 60%;
  animation: wiggle 2.6s ease-in-out infinite;
}

@keyframes wiggle {
  0%, 80%, 100% { transform: rotate(0); }
  85%           { transform: rotate(-9deg); }
  90%           { transform: rotate(7deg); }
  95%           { transform: rotate(-4deg); }
}

.bubble {
  position: relative;
  margin: 0;
  width: min(300px, 52vw);
  min-height: 4.6em;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  font: 800 clamp(13px, 1.5vw, 16px)/1.45 var(--round);
  color: var(--ink);
  background: var(--white);
  border: 2.5px solid var(--ink);
  border-radius: 22px;
  box-shadow: 0 4px 0 var(--ink);
}

/* Tail pointing back at the kitty. */
.bubble::before,
.bubble::after {
  content: "";
  position: absolute;
  top: 50%;
  border-style: solid;
}

.bubble::before {
  left: -16px;
  margin-top: -10px;
  border-width: 10px 16px 10px 0;
  border-color: transparent var(--ink) transparent transparent;
}

.bubble::after {
  left: -11px;
  margin-top: -7px;
  border-width: 7px 12px 7px 0;
  border-color: transparent var(--white) transparent transparent;
}

.name {
  margin: 0;
  font: 400 clamp(72px, 16vw, 210px)/1 var(--pop);
  letter-spacing: 0.06em;
  padding-left: 0.06em; /* balance trailing letter-spacing */
  color: var(--bow);
  /* Sticker edge: a ring of white shadows (text-stroke gets clipped on animated letters). */
  text-shadow:
    0.075em 0.000em 0 var(--white),
    0.069em 0.029em 0 var(--white),
    0.053em 0.053em 0 var(--white),
    0.029em 0.069em 0 var(--white),
    0.000em 0.075em 0 var(--white),
    -0.029em 0.069em 0 var(--white),
    -0.053em 0.053em 0 var(--white),
    -0.069em 0.029em 0 var(--white),
    -0.075em 0.000em 0 var(--white),
    -0.069em -0.029em 0 var(--white),
    -0.053em -0.053em 0 var(--white),
    -0.029em -0.069em 0 var(--white),
    -0.000em -0.075em 0 var(--white),
    0.029em -0.069em 0 var(--white),
    0.053em -0.053em 0 var(--white),
    0.069em -0.029em 0 var(--white),
    0 0.1em 0 var(--pink),
    0 0.16em 0.22em rgba(232, 56, 79, 0.22);
  filter: drop-shadow(0 0 0.5px var(--white)); /* soften the shadow ring's steps */
  user-select: none;
}

.name span {
  display: inline-block;
  pointer-events: auto;
  animation: pop 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.name span:nth-child(2) { animation-delay: 0.08s; }
.name span:nth-child(3) { animation-delay: 0.16s; }
.name span:nth-child(4) { animation-delay: 0.24s; }
.name span:nth-child(5) { animation-delay: 0.32s; }
.name span:nth-child(6) { animation-delay: 0.4s; }

.name span:hover { animation: jelly 0.6s ease; }

@keyframes pop {
  from { transform: translateY(0.4em) scale(0.2); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

@keyframes jelly {
  0%, 100% { transform: none; }
  25%      { transform: scale(1.18, 0.86) rotate(-4deg); }
  50%      { transform: scale(0.9, 1.12) rotate(3deg); }
  75%      { transform: scale(1.05, 0.96); }
}

.back {
  pointer-events: auto;
  margin-top: clamp(40px, 7vw, 84px);
  padding: 9px 20px 10px;
  font: 800 15px/1 var(--round);
  color: var(--ink);
  text-decoration: none;
  background: var(--white);
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  box-shadow: 0 3px 0 var(--ink);
}

.back:hover { background: var(--pink); }
.back:focus-visible { outline: 3px solid var(--bow); outline-offset: 3px; }

.noscript {
  position: fixed;
  inset: auto 0 18% 0;
  text-align: center;
  font: 800 18px var(--round);
  z-index: 5;
}

@media (max-width: 560px) {
  .hide-sm { display: none; }
  .stage { font-size: 13px; }
  .friend { flex-direction: column; gap: 14px; }
  .bubble { width: min(320px, 100%); min-height: 3.6em; justify-content: center; text-align: center; }
  .bubble::before {
    left: 50%; top: -16px; margin: 0 0 0 -10px;
    border-width: 0 10px 16px 10px;
    border-color: transparent transparent var(--ink) transparent;
  }
  .bubble::after {
    left: 50%; top: -11px; margin: 0 0 0 -7px;
    border-width: 0 7px 12px 7px;
    border-color: transparent transparent var(--white) transparent;
  }
  .center { transform: translate(-50%, -50%); }
  /* Name sits above the kitty's speech on phones. */
  .name { order: -1; margin-bottom: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .beat, #kitty, #kitty .blink, #kitty .bow, .name span { animation: none; }
}