/* Direction: cartoon stickers. Every object (envelope, inputs, cards, photos)
   gets the same 3px ink outline and a flat offset shadow instead of a soft blur,
   so the whole thing reads like one drawn page. Patrick Hand (marker lettering)
   for short labels; the letter body stays in the system serif for reading. */
@font-face {
  font-family: "Patrick Hand";
  src: url("fonts/patrick-hand-latin.woff2") format("woff2");
  font-display: swap;
}

:root {
  --bg: #fbf1e1;
  --paper: #fffaf0;
  --white: #fff;
  --ink: #23232e;
  --muted: #5c5650;
  --red: #e4574f;
  --sand: #f5c64a;
  --pink: #f39cc0;
  --orange: #f2913a;
  --wrong: #b3261e;
  --line: 3px solid var(--ink);
  --serif: ui-serif, "New York", "Iowan Old Style", Georgia, serif;
  --hand: "Patrick Hand", "Chalkboard SE", var(--serif);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

[hidden] { display: none !important; }

/* Stage */
.stage {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding: max(2rem, env(safe-area-inset-top)) 1.25rem max(2rem, env(safe-area-inset-bottom));
  overflow: hidden;
}

.env-wrap {
  width: min(84vw, 430px);
  aspect-ratio: 3 / 2;
}

.env {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 4px;
}

/* Front: the addressed side */
.front {
  display: block;
  padding: 0;
  font: inherit;
  color: inherit;
  background: var(--paper);
  border: var(--line);
  box-shadow: 6px 6px 0 var(--ink);
  cursor: pointer;
}

.front:focus-visible { outline: 3px dashed var(--ink); outline-offset: 6px; }

.from {
  position: absolute;
  top: 9%;
  left: 7%;
  max-width: 58%;
  font-family: var(--hand);
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--muted);
  text-align: left;
}

.stamp {
  position: absolute;
  top: 8%;
  right: 6%;
  width: 16%;
  rotate: 6deg;
}

.to {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 12% 10% 0;
  font-family: var(--hand);
  font-size: clamp(1.9rem, 8.5vw, 2.7rem);
  line-height: 1.1;
}

/* Back: liner, letter, pocket, flap, seal */
.back { box-shadow: 6px 6px 0 var(--ink); }

.pocket-back {
  position: absolute;
  inset: 0;
  border-radius: 4px;
  background: var(--sand);
  border: var(--line);
}

.peek {
  position: absolute;
  left: 7%;
  right: 7%;
  top: 7%;
  height: 86%;
  background: var(--white);
  border: var(--line);
  border-radius: 6px;
}

.pocket-front,
.flap {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  overflow: visible;
}

.pocket-front { height: 100%; }

.pocket-front path,
.flap path {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 3px;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.pocket-front .fold { fill: none; stroke-width: 2px; stroke-dasharray: 2 6; stroke-linecap: round; }

.flap {
  height: 60%;
  transform-origin: top center;
  z-index: 3;
}

.seal {
  position: absolute;
  left: 50%;
  top: 60%;
  width: 25%;
  aspect-ratio: 1;
  translate: -50% -50%;
  z-index: 4;
}

.seal-half { position: absolute; inset: 0; }
.seal-half svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* Jagged crack down the middle */
.seal-l { clip-path: polygon(-10% -10%, 52% -10%, 46% 22%, 55% 41%, 45% 60%, 54% 79%, 48% 110%, -10% 110%); }
.seal-r { clip-path: polygon(52% -10%, 110% -10%, 110% 110%, 48% 110%, 54% 79%, 45% 60%, 55% 41%, 46% 22%); }

/* Prompt and form */
.prompt {
  margin: 0;
  max-width: 28rem;
  font-family: var(--hand);
  font-size: 1.45rem;
  line-height: 1.3;
  text-align: center;
}

.unlock {
  width: min(84vw, 430px);
  display: grid;
  gap: 0.9rem;
}

.hint {
  font-family: var(--hand);
  font-size: 1.4rem;
  line-height: 1.3;
  text-align: center;
}

.unlock input {
  width: 100%;
  font-family: var(--hand);
  font-size: 1.6rem; /* >= 16px keeps iOS from zooming */
  letter-spacing: 0.08em;
  color: var(--ink);
  text-align: center;
  padding: 0.4rem 0.5rem;
  background: var(--white);
  border: var(--line);
  border-radius: 12px;
  box-shadow: 4px 4px 0 var(--ink);
  outline: none;
}

.unlock input:focus-visible { box-shadow: 4px 4px 0 var(--ink), 0 0 0 4px var(--sand); }

.unlock button {
  justify-self: center;
  max-width: 100%;
  min-height: 48px;
  margin-top: 0.4rem;
  padding: 0.45rem 1.3rem 0.55rem;
  font-family: var(--hand);
  font-size: 1.35rem;
  line-height: 1.2;
  color: var(--ink);
  background: var(--sand);
  border: var(--line);
  border-radius: 14px;
  box-shadow: 4px 4px 0 var(--ink);
  cursor: pointer;
  transition: transform 120ms var(--ease-out), box-shadow 120ms var(--ease-out);
}

/* Press pushes the sticker into its shadow */
.unlock button:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.unlock button:disabled { cursor: progress; transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.unlock button:focus-visible { outline: 3px dashed var(--ink); outline-offset: 4px; }

.status {
  min-height: 1.5em;
  margin: 0;
  font-family: var(--hand);
  font-size: 1.25rem;
  text-align: center;
  color: var(--wrong);
}

/* Letter */
.letter {
  max-width: 36rem;
  margin: 0 auto;
  padding: max(3rem, env(safe-area-inset-top)) 1.5rem max(4rem, env(safe-area-inset-bottom));
  background: var(--paper);
  min-height: 100dvh;
  font-size: 1.125rem;
  line-height: 1.7;
}

@media (min-width: 640px) {
  .letter {
    margin: 3rem auto;
    min-height: auto;
    padding: 3.5rem 3rem 4rem;
    border: var(--line);
    border-radius: 10px;
    box-shadow: 8px 8px 0 var(--ink);
  }
}

.letter p { margin: 0 0 1.25em; white-space: pre-line; overflow-wrap: anywhere; }

/* Memory cards: comic panels with a doodle sticker on the corner. */
.memory {
  --memory-bg: var(--red);
  position: relative;
  margin: 3.75rem 0;
  padding: 1.5rem 1.1rem 1.25rem;
  background: var(--memory-bg);
  border: var(--line);
  border-radius: 28px 18px 32px 16px / 18px 30px 16px 28px;
  box-shadow: 6px 6px 0 var(--ink);
  rotate: -0.6deg;
}

.memory:nth-of-type(even) { rotate: 0.5deg; }

/* One color and doodle per memory, in letter order:
   1 cinema seat red + popcorn, 2 beach sand + sun and waves,
   3 Pop Mart box pink + blind box, 4 road-mirror orange + round mirror. */
.memory:nth-of-type(4n + 2) { --memory-bg: var(--sand); }
.memory:nth-of-type(4n + 3) { --memory-bg: var(--pink); }
.memory:nth-of-type(4n + 4) { --memory-bg: var(--orange); }

.doodle {
  position: absolute;
  top: -34px;
  right: -14px;
  width: 78px;
  height: 78px;
  rotate: 9deg;
  pointer-events: none;
}

.memory:nth-of-type(even) .doodle { rotate: -7deg; }

.memory-title {
  display: table;
  max-width: calc(100% - 3.5rem);
  margin: -2.75rem 0 1.1rem -0.4rem;
  padding: 0.1rem 0.8rem 0.2rem;
  font-family: var(--hand);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.2;
  background: var(--white);
  border: var(--line);
  border-radius: 10px;
  box-shadow: 3px 3px 0 var(--ink);
  rotate: -2deg;
}

.memory-photos {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: start;
  gap: 0.75rem;
}

.shot {
  margin: 0;
  padding: 6px;
  background: var(--white);
  border: var(--line);
  border-radius: 6px;
  box-shadow: 4px 4px 0 var(--ink);
  rotate: -1.5deg;
}

.shot:nth-child(2) { rotate: 2deg; margin-top: 0.9rem; }
.shot.portrait:only-child { width: 74%; justify-self: center; }
.shot img { display: block; width: 100%; height: auto; border-radius: 2px; }

.letter .bubble {
  position: relative;
  z-index: 1;
  width: fit-content;
  max-width: 88%;
  margin: -0.6rem 0 0 1rem;
  padding: 0.35rem 0.9rem 0.45rem;
  font-family: var(--hand);
  font-size: 1.3rem;
  line-height: 1.3;
  background: var(--white);
  border: var(--line);
  border-radius: 18px;
  rotate: -1.5deg;
}

/* Speech-bubble tail pointing up at the photo */
.letter .bubble::before,
.letter .bubble::after {
  content: "";
  position: absolute;
  left: 1.4rem;
  border-style: solid;
  border-color: transparent;
}
.letter .bubble::before { top: -15px; border-width: 0 9px 15px 9px; border-bottom-color: var(--ink); }
.letter .bubble::after { top: -9px; left: calc(1.4rem + 4px); border-width: 0 5px 10px 5px; border-bottom-color: var(--white); }

.memory-text {
  margin-top: 1.1rem;
  padding: 1rem 1.1rem;
  background: var(--paper);
  border: var(--line);
  border-radius: 14px;
}

.letter .memory-text p:last-child { margin-bottom: 0; }

.photo-missing {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  padding: 1rem;
  border: 2px dashed var(--ink);
  color: var(--muted);
  font-size: 0.9rem;
  text-align: center;
  overflow-wrap: anywhere;
}