:root {
  --ink: #5a3d1e;
  --ink-soft: rgba(90, 61, 30, .78);
  --paper: #f5eedc;
  --accent: #e2a02a;
  --accent-ink: #8a5a12;
  --pill: rgba(255, 252, 240, .55);
}
html, body { height: 100%; margin: 0; }
body {
  position: fixed; inset: 0; overflow: hidden;
  background: var(--paper); color: var(--ink);
  font-family: "Caveat", "Segoe Script", cursive;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none; -webkit-user-select: none;
  overscroll-behavior: none; touch-action: none;
}
canvas#paint { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

/* title */
.title {
  position: fixed; top: calc(env(safe-area-inset-top) + 16px); left: 0; right: 0;
  text-align: center; pointer-events: none; padding: 0 20px;
  opacity: 0; transform: translateY(10px);
  transition: opacity 1.4s ease, transform 1.4s ease;
}
.title.in { opacity: 1; transform: none; }
.title .date { font-size: 1.3rem; letter-spacing: .04em; color: var(--ink-soft); }
.title h1 {
  font-family: "Fraunces", Georgia, serif; font-style: italic; font-weight: 300;
  font-size: clamp(2.3rem, 9.5vw, 4.2rem); line-height: 1; margin: .02em 0 .12em; color: var(--ink);
}
.title .sub { margin: 0; font-size: 1.3rem; line-height: 1.15; color: var(--ink-soft); }

/* hints */
.hints {
  position: fixed; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom) + 96px);
  display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; padding: 0 16px;
}
.hint {
  font-size: 1.2rem; line-height: 1.1; text-align: center; color: var(--ink-soft);
  background: var(--pill); padding: 4px 14px; border-radius: 999px;
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; transform: translateY(6px); transition: opacity .9s ease, transform .9s ease;
  max-width: 92vw;
}
.hint.in { opacity: 1; transform: none; }

/* handwritten note */
.note {
  position: fixed; left: 18px; bottom: calc(env(safe-area-inset-bottom) + 22px);
  max-width: min(62vw, 340px); pointer-events: none; transform: rotate(-2.2deg);
  opacity: 0; transition: opacity 1.6s ease;
  text-shadow: 0 0 12px var(--paper), 0 0 4px var(--paper);
}
.note.in { opacity: 1; }
.note-for { font-size: 2rem; font-weight: 600; line-height: 1; }
.note-msg { font-size: 1.4rem; line-height: 1.12; margin-top: 4px; }
.note-from { font-size: 1.35rem; margin-top: 6px; color: var(--ink-soft); }
.note-for:empty, .note-from:empty { display: none; }

[hidden] { display: none !important; }
body.og .hints { display: none !important; }

@media (min-width: 700px) {
  .note { left: 32px; bottom: 32px; }
  .hints { bottom: 104px; }
}
@media (max-height: 560px) {
  .title .sub { display: none; }
  .hints { bottom: calc(env(safe-area-inset-bottom) + 70px); }
}