:root {
  --bg: oklch(0.86 0.08 129);
  --sky: oklch(0.78 0.08 221);
  --sky-light: oklch(0.91 0.045 212);
  --grass: oklch(0.72 0.14 134);
  --grass-dark: oklch(0.48 0.14 139);
  --field: oklch(0.82 0.12 108);
  --wood: oklch(0.55 0.11 55);
  --ink: oklch(0.18 0.05 71);
  --muted: oklch(0.39 0.06 80);
  --paper: oklch(0.96 0.035 91);
  --paper-2: oklch(0.90 0.07 83);
  --line: oklch(0.22 0.05 68);
  --red: oklch(0.62 0.18 27);
  --red-dark: oklch(0.43 0.16 28);
  --yellow: oklch(0.86 0.15 82);
  --blue: oklch(0.52 0.13 246);
  --pink: oklch(0.76 0.15 6);
  --pixel: 4px;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  color: var(--ink);
  font-family: "Trebuchet MS", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  background:
    linear-gradient(var(--sky-light) 0 34%, var(--bg) 34% 100%);
  overflow-x: hidden;
}

button {
  font: inherit;
}

.accepted-story-link {
  display: inline-block;
  margin-top: 18px;
  color: var(--line);
  text-underline-offset: 4px;
  font-weight: 800;
}

#fireworks {
  position: fixed;
  inset: 0;
  z-index: 6;
  width: 100vw;
  height: 100vh;
  image-rendering: pixelated;
  pointer-events: none;
}

.page {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: max(18px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
  position: relative;
  isolation: isolate;
}

.page::before,
.page::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 28vh;
  z-index: -1;
  image-rendering: pixelated;
  pointer-events: none;
}

.page::before {
  background:
    linear-gradient(90deg, transparent 0 18px, oklch(0.60 0.12 131) 18px 22px, transparent 22px 42px) 0 72% / 42px 26px repeat-x,
    linear-gradient(var(--grass) 0 66%, var(--grass-dark) 66% 100%);
  clip-path: polygon(0 28%, 12% 20%, 26% 29%, 39% 18%, 55% 27%, 70% 16%, 86% 26%, 100% 18%, 100% 100%, 0 100%);
}

.page::after {
  height: 10vh;
  background:
    linear-gradient(90deg, oklch(0.48 0.12 105) 0 4px, transparent 4px 26px) 0 0 / 26px 100% repeat-x,
    oklch(0.76 0.12 99);
  opacity: 0.95;
}

.window {
  width: min(760px, 100%);
  border: var(--pixel) solid var(--line);
  background: var(--paper);
  box-shadow: 8px 8px 0 var(--line);
  image-rendering: pixelated;
  position: relative;
  transform-origin: center;
}

.window.is-shaking {
  animation: shake 240ms steps(2, end);
}

.titlebar {
  min-height: 38px;
  display: grid;
  grid-template-columns: 104px 1fr 104px;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  color: oklch(0.98 0.02 100);
  background: var(--grass-dark);
  border-bottom: var(--pixel) solid var(--line);
  font-size: 15px;
  font-weight: 800;
}

.hearts {
  display: flex;
  gap: 7px;
}

.hearts span {
  width: 16px;
  height: 16px;
  background: var(--pink);
  border: 3px solid var(--line);
  box-shadow: 2px 2px 0 oklch(0.16 0.04 70);
}

.title {
  text-align: center;
}

.stamp {
  justify-self: end;
  padding: 2px 6px;
  color: var(--line);
  background: var(--yellow);
  border: 3px solid var(--line);
}

.scene {
  position: relative;
  height: clamp(150px, 32vw, 235px);
  margin: 22px auto 0;
  width: min(560px, calc(100% - 36px));
  overflow: hidden;
  border: var(--pixel) solid var(--line);
  background: linear-gradient(var(--sky) 0 55%, var(--grass) 55% 100%);
}

.sun {
  position: absolute;
  top: 18px;
  right: 34px;
  width: 34px;
  height: 34px;
  background: var(--yellow);
  border: 4px solid var(--line);
  box-shadow: 0 0 0 8px oklch(0.88 0.12 85 / 0.35);
}

.cloud {
  position: absolute;
  width: 80px;
  height: 24px;
  background: oklch(0.97 0.01 210);
  border: 4px solid var(--line);
}

.cloud::before,
.cloud::after {
  content: "";
  position: absolute;
  background: inherit;
  border: 4px solid var(--line);
  border-bottom: 0;
}

.cloud::before {
  left: 12px;
  top: -18px;
  width: 24px;
  height: 18px;
}

.cloud::after {
  right: 12px;
  top: -14px;
  width: 26px;
  height: 14px;
}

.cloud-a {
  top: 26px;
  left: 36px;
}

.cloud-b {
  top: 55px;
  right: 118px;
  transform: scale(0.72);
}

.hill {
  position: absolute;
  bottom: 54px;
  height: 68px;
  border-top: 4px solid var(--line);
  background: oklch(0.64 0.13 136);
}

.hill-a {
  left: -30px;
  width: 56%;
  clip-path: polygon(0 100%, 0 55%, 18% 38%, 38% 20%, 64% 26%, 100% 62%, 100% 100%);
}

.hill-b {
  right: -26px;
  width: 62%;
  clip-path: polygon(0 100%, 0 64%, 24% 34%, 46% 16%, 74% 35%, 100% 52%, 100% 100%);
}

.field {
  position: absolute;
  bottom: 0;
  height: 52px;
  border-top: 4px solid var(--line);
}

.field-a {
  left: 0;
  width: 58%;
  background:
    linear-gradient(90deg, transparent 0 20px, oklch(0.61 0.12 98) 20px 24px, transparent 24px 44px) 0 0 / 44px 100% repeat-x,
    var(--field);
}

.field-b {
  right: 0;
  width: 45%;
  background:
    linear-gradient(90deg, transparent 0 16px, oklch(0.56 0.12 121) 16px 20px, transparent 20px 38px) 0 0 / 38px 100% repeat-x,
    oklch(0.73 0.13 128);
}

.tree {
  position: absolute;
  bottom: 56px;
  width: 26px;
  height: 58px;
  background: var(--wood);
  border: 4px solid var(--line);
}

.tree::before {
  content: "";
  position: absolute;
  left: -18px;
  top: -34px;
  width: 58px;
  height: 46px;
  background: oklch(0.48 0.15 139);
  border: 4px solid var(--line);
}

.tree-left {
  left: 48px;
}

.tree-right {
  right: 52px;
  transform: scale(0.88);
}

.house {
  position: absolute;
  right: 26px;
  bottom: 24px;
  width: 52px;
  height: 52px;
}

.roof,
.wall,
.door {
  position: absolute;
  display: block;
}

.roof {
  left: 2px;
  top: 0;
  width: 48px;
  height: 26px;
  background: var(--red);
  border: 4px solid var(--line);
  clip-path: polygon(50% 0, 100% 58%, 100% 100%, 0 100%, 0 58%);
}

.wall {
  left: 8px;
  bottom: 0;
  width: 36px;
  height: 32px;
  background: oklch(0.91 0.10 86);
  border: 4px solid var(--line);
}

.door {
  left: 21px;
  bottom: 0;
  width: 12px;
  height: 20px;
  background: var(--red-dark);
  border: 3px solid var(--line);
}

.person {
  position: absolute;
  bottom: 54px;
  width: 38px;
  height: 78px;
}

.person-a {
  left: calc(50% - 48px);
}

.person-b {
  left: calc(50% + 12px);
}

.person span {
  position: absolute;
  display: block;
}

.head {
  left: 10px;
  top: 0;
  width: 20px;
  height: 20px;
  background: oklch(0.82 0.08 61);
  border: 4px solid var(--line);
}

.body {
  left: 8px;
  top: 22px;
  width: 24px;
  height: 34px;
  border: 4px solid var(--line);
}

.person-a .body {
  background: var(--red);
}

.person-b .body {
  background: var(--blue);
}

.leg {
  top: 54px;
  width: 9px;
  height: 20px;
  background: oklch(0.23 0.04 65);
  border: 3px solid var(--line);
}

.leg-a {
  left: 8px;
}

.leg-b {
  right: 6px;
}

.flower {
  position: absolute;
  bottom: 35px;
  width: 12px;
  height: 12px;
  background: var(--pink);
  border: 3px solid var(--line);
  box-shadow: 0 12px 0 -3px var(--grass-dark);
}

.flower-a {
  left: 25%;
}

.flower-b {
  left: 61%;
  background: var(--yellow);
}

.flower-c {
  left: 72%;
  background: var(--red);
}

.dialogue {
  position: relative;
  width: min(610px, calc(100% - 36px));
  margin: 22px auto 18px;
  padding: 24px 20px 20px;
  background: oklch(0.99 0.015 92);
  border: var(--pixel) solid var(--line);
  box-shadow: 5px 5px 0 oklch(0.78 0.07 80);
  text-align: center;
}

.tag {
  position: absolute;
  left: 12px;
  top: -16px;
  padding: 3px 9px;
  background: var(--yellow);
  border: 3px solid var(--line);
  font-weight: 900;
  transform: rotate(-3deg);
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  font-size: clamp(24px, 6vw, 42px);
  line-height: 1.18;
  letter-spacing: 0;
  text-wrap: balance;
}

.dialogue p {
  margin: 10px auto 0;
  max-width: 38rem;
  color: var(--muted);
  font-size: clamp(14px, 2.8vw, 17px);
  line-height: 1.65;
}

.actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 4vw, 28px);
  min-height: 76px;
  padding: 0 18px 8px;
  flex-wrap: wrap;
}

.yes,
.no,
.again {
  min-width: 132px;
  min-height: 48px;
  padding: 10px 22px;
  color: oklch(0.99 0 0);
  border: var(--pixel) solid var(--line);
  box-shadow: 5px 5px 0 var(--line);
  font-weight: 900;
  cursor: pointer;
  transition: transform 180ms steps(2, end), filter 180ms ease;
}

.yes {
  --yes-scale: 1;
  background: var(--red);
  transform: scale(var(--yes-scale));
  transform-origin: center;
  z-index: 2;
}

.yes:hover,
.yes:focus-visible,
.again:hover,
.again:focus-visible {
  filter: brightness(1.08);
}

.yes:active,
.again:active {
  transform: translate(3px, 3px) scale(var(--yes-scale, 1));
  box-shadow: 2px 2px 0 var(--line);
}

.no {
  color: var(--ink);
  background: var(--paper-2);
}

.no.is-dodging {
  animation: dodge 260ms steps(2, end);
}

button:focus-visible {
  outline: 4px solid oklch(0.97 0.16 92);
  outline-offset: 4px;
}

.tiny {
  min-height: 28px;
  padding: 0 18px 24px;
  color: var(--muted);
  text-align: center;
  font-size: 13px;
  font-weight: 700;
}

.accepted {
  position: fixed;
  inset: 0;
  z-index: 7;
  display: grid;
  place-items: center;
  padding: 18px;
  background: oklch(0.10 0.04 267 / 0.72);
}

.accepted[hidden] {
  display: none;
}

.accepted-card {
  width: min(520px, 100%);
  padding: clamp(26px, 7vw, 44px) 22px;
  text-align: center;
  background: oklch(0.98 0.04 91);
  border: var(--pixel) solid var(--line);
  box-shadow: 8px 8px 0 var(--line);
}

.accepted-kicker {
  display: inline-block;
  margin-bottom: 14px;
  padding: 4px 10px;
  color: oklch(0.99 0 0);
  background: var(--grass-dark);
  border: 3px solid var(--line);
  font-weight: 900;
}

.accepted h2 {
  font-size: clamp(34px, 10vw, 64px);
  line-height: 1.05;
}

.accepted-card > p:not(.accepted-kicker) {
  margin: 14px auto 22px;
  max-width: 25rem;
  color: var(--muted);
  line-height: 1.65;
  font-weight: 700;
}

.again {
  color: var(--ink);
  background: var(--yellow);
}

@keyframes shake {
  0%,
  100% {
    transform: translate(0, 0) rotate(0);
  }
  20% {
    transform: translate(-8px, 3px) rotate(-1deg);
  }
  40% {
    transform: translate(7px, -4px) rotate(1deg);
  }
  60% {
    transform: translate(-5px, 4px) rotate(-1deg);
  }
  80% {
    transform: translate(5px, -2px) rotate(1deg);
  }
}

@keyframes dodge {
  0%,
  100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(11px, -7px);
  }
}

@media (max-width: 520px) {
  .window {
    box-shadow: 5px 5px 0 var(--line);
  }

  .titlebar {
    grid-template-columns: 74px 1fr 72px;
    font-size: 12px;
  }

  .hearts span {
    width: 13px;
    height: 13px;
  }

  .scene,
  .dialogue {
    width: calc(100% - 22px);
  }

  .scene {
    height: 176px;
  }

  .cloud-b,
  .tree-right {
    display: none;
  }

  .house {
    transform: scale(0.75);
    transform-origin: right bottom;
  }

  .person {
    transform: scale(0.85);
    transform-origin: bottom center;
  }

  .person-a {
    left: calc(50% - 42px);
  }

  .person-b {
    left: calc(50% + 6px);
  }

  .yes,
  .no,
  .again {
    min-width: min(180px, 78vw);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }
}