:root {
  --paper: #F3EAD7;
  --paper-glow: #FAF4E6;
  --ink: #2A2522;
  --wash: #E9C987;
  --wash-opacity: 0.55;
  --vermilion: #B8352D;
  --blossom: #C9463F;
  --stamen: #E2B04A;
  --tongue: #D9645B;
  --blush-opacity: 0.32;
  --grain-opacity: 0.35;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1D1B19;
    --paper-glow: #2A2622;
    --ink: #E8DFCD;
    --wash: #E3BE72;
    --wash-opacity: 0.22;
    --vermilion: #C2453B;
    --blossom: #D9625A;
    --tongue: #C85A52;
    --blush-opacity: 0.4;
    --grain-opacity: 0.18;
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }

body {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background-color: var(--paper);
  background-image: radial-gradient(ellipse at 50% 40%, var(--paper-glow), transparent 70%);
  -webkit-tap-highlight-color: transparent;
}

/* Rice-paper grain */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: var(--grain-opacity);
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.45  0 0 0 0 0.38  0 0 0 0 0.28  0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
@media (prefers-color-scheme: dark) {
  body::before { mix-blend-mode: screen; }
}

.defs { position: absolute; width: 0; height: 0; }

/* Shared ink classes */
.ink-stroke { fill: none; stroke: var(--ink); stroke-linecap: round; stroke-linejoin: round; }
.ink-fill { fill: var(--ink); }

/* ---------- Plum branch ---------- */
.plum {
  position: absolute;
  top: 0;
  left: 0;
  width: min(34vw, 400px);
  height: auto;
  pointer-events: none;
}
.branch-main { stroke-width: 9; }
.branch-sub { stroke-width: 5; }
.branch-twig { stroke-width: 2.5; }
.petal-fill { fill: var(--blossom); opacity: 0.88; }
.stamen { fill: var(--stamen); }
.bud { fill: var(--vermilion); }

/* ---------- Mountains ---------- */
.mountains {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 32vh;
  pointer-events: none;
}
.mist-stop { stop-color: var(--ink); }

/* ---------- Stage ---------- */
.stage {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: clamp(12px, 4vmin, 40px);
  margin-bottom: 6vh;
}

.face-button {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 50%;
}
.face-button:focus-visible { outline: 2px dashed var(--vermilion); outline-offset: 10px; }

.face {
  display: block;
  width: min(58vmin, 340px);
  height: auto;
  overflow: visible;
  animation: float 6s ease-in-out infinite;
}

.wash { fill: var(--wash); opacity: var(--wash-opacity); }
.blush { fill: var(--blossom); opacity: var(--blush-opacity); transition: opacity 0.3s; }
.enso { stroke-width: 9; }
.enso-tail { stroke-width: 4; }
.eyes-happy { stroke-width: 6; opacity: 0; }
.mouth { stroke: var(--ink); stroke-width: 4; stroke-linejoin: round; }
.tongue { fill: var(--tongue); }

.eyes-open { transform-box: fill-box; transform-origin: center; animation: blink 6s infinite; }

.giggle .face { animation: wiggle 0.5s ease-in-out 2; }
.giggle .eyes-open { opacity: 0; animation: none; }
.giggle .eyes-happy { opacity: 1; }
.giggle .blush { opacity: calc(var(--blush-opacity) + 0.25); }

/* ---------- Seal, bottom-right corner ---------- */
.seal {
  position: fixed;
  right: clamp(16px, 5vmin, 56px);
  bottom: clamp(16px, 5vmin, 56px);
  z-index: 2;
  width: clamp(48px, 8vmin, 76px);
  height: auto;
  transform: rotate(-3deg);
}
.seal-bg { fill: var(--vermilion); }
.seal-strokes {
  fill: none;
  stroke: #F6EEDD;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Falling petals ---------- */
.petals { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.petals span {
  position: absolute;
  top: -4vh;
  width: 10px;
  height: 8px;
  border-radius: 60% 0 60% 0;
  background: var(--blossom);
  opacity: 0;
  animation: fall 16s linear infinite;
}
.petals span:nth-child(1) { left: 12%; animation-delay: 0s; animation-duration: 15s; }
.petals span:nth-child(2) { left: 26%; animation-delay: 4s; animation-duration: 19s; }
.petals span:nth-child(3) { left: 40%; animation-delay: 9s; animation-duration: 17s; }
.petals span:nth-child(4) { left: 58%; animation-delay: 2s; animation-duration: 21s; }
.petals span:nth-child(5) { left: 74%; animation-delay: 12s; animation-duration: 16s; }
.petals span:nth-child(6) { left: 88%; animation-delay: 7s; animation-duration: 20s; }

/* ---------- Animations ---------- */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1.6vmin); }
}
@keyframes blink {
  0%, 93%, 100% { transform: scaleY(1); }
  96% { transform: scaleY(0.1); }
}
@keyframes wiggle {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-7deg) scale(1.03); }
  75% { transform: rotate(7deg) scale(1.03); }
}
@keyframes fall {
  0% { transform: translate(0, 0) rotate(0); opacity: 0; }
  8% { opacity: 0.8; }
  50% { transform: translate(6vw, 55vh) rotate(200deg); }
  90% { opacity: 0.6; }
  100% { transform: translate(-2vw, 110vh) rotate(420deg); opacity: 0; }
}

/* ---------- Narrow screens ---------- */
@media (max-aspect-ratio: 3/4) {
  .face { width: min(72vw, 340px); }
  .plum { width: 56vw; }
}

@media (prefers-reduced-motion: reduce) {
  .face, .eyes-open, .giggle .face { animation: none; }
  .petals { display: none; }
}