:root {
  --font: "Yuanti SC", "PingFang SC", "Hiragino Maru Gothic ProN", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --ink: #5a4632;
  --cream: #faf3e4;
  --paper: #f4ebd9;
  --green: #8db580;
  --pink: #f6b6c4;
  --kraft: #c9a26b;
  --red: #c4403a;
  --shadow: rgba(70, 48, 32, 0.34);
  --grain: none;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: var(--paper);
  font-family: var(--font); color: var(--ink);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  overscroll-behavior: none; touch-action: none;
}
canvas#game { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; touch-action: none; }
.hidden { display: none !important; }

/* ---------- cut-paper building blocks ---------- */
.shadowed { filter: drop-shadow(4px 4px 0 var(--shadow)); }
.card {
  background-color: var(--cream);
  background-image: var(--grain);
  background-size: 128px 128px;
  padding: 22px 26px;
}
.tilt-l { transform: rotate(-2deg); }
.tilt-r { transform: rotate(1.6deg); }

.btn {
  display: inline-block; border: 0; margin: 0; cursor: pointer;
  font: 700 20px/1 var(--font); letter-spacing: .12em; color: #fffaf2;
  padding: 15px 36px 14px 40px; text-decoration: none;
  background-image: var(--grain); background-size: 128px 128px;
  text-shadow: 1px 1px 0 rgba(70,48,32,.35);
}
.btn:active { transform: translate(3px, 3px); }
.btn-green { background-color: #86b276; }
.btn-pink { background-color: #e88ea2; }
.btn-cream { background-color: #faf3e4; color: var(--ink); text-shadow: none; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
#corner {
  position: absolute; left: max(12px, env(safe-area-inset-left)); top: max(12px, env(safe-area-inset-top));
  font-size: 13px; font-weight: 700; letter-spacing: .1em; padding: 6px 12px 5px;
  background: var(--kraft); background-image: var(--grain); background-size: 128px 128px; color: #fffaf2;
  filter: drop-shadow(2px 2px 0 var(--shadow)); transform: rotate(-3deg);
}
.icon-btn {
  position: absolute; right: max(12px, env(safe-area-inset-right)); top: max(10px, env(safe-area-inset-top));
  width: 42px; height: 42px; border: 0; padding: 0; cursor: pointer; pointer-events: auto;
  background: var(--cream); background-image: var(--grain); background-size: 128px 128px;
  filter: drop-shadow(3px 3px 0 var(--shadow)); display: grid; place-items: center;
}
.icon-btn:active { transform: translate(2px, 2px); }
.icon-btn .cross { display: none; }
body.muted .icon-btn .cross { display: inline; }
body.muted .icon-btn .wave { display: none; }
#hint {
  position: absolute; left: 50%; bottom: max(18px, env(safe-area-inset-bottom));
  transform: translateX(-50%) rotate(-1deg); max-width: 92vw;
}
.paper-strip {
  background: var(--cream); background-image: var(--grain); background-size: 128px 128px;
  padding: 9px 18px 8px; font-size: 15px; font-weight: 700; white-space: nowrap; letter-spacing: .04em;
}

/* ---------- speech bubble ---------- */
#bubble { position: fixed; left: 0; top: 0; z-index: 6; pointer-events: none; max-width: min(300px, 92vw); }
.bubble-body {
  background: #fffaf2; background-image: var(--grain); background-size: 128px 128px;
  padding: 11px 16px 12px; font-size: 16px; font-weight: 700; line-height: 1.35;
}
.bubble-body .who {
  display: block; font-size: 11px; letter-spacing: .12em; color: #fffaf2; background: #e88ea2;
  width: max-content; padding: 2px 8px 1px; margin: -2px 0 5px -4px; transform: rotate(-3deg);
}
.bubble-body .who:empty { display: none; }
.bubble-tail {
  position: absolute; bottom: -11px; left: var(--tail, 50%); width: 18px; height: 13px; margin-left: -9px;
  background: #fffaf2; clip-path: polygon(0 0, 100% 0, 38% 100%);
}
.popping { animation: pop 250ms steps(1, end) both; }
@keyframes pop {
  0% { transform: scale(.55); }
  33% { transform: scale(1.12); }
  66%, 100% { transform: scale(1); }
}

/* ---------- overlays ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 10; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 22px; padding: 20px;
}
#title { background: rgba(244, 235, 217, .18); }
.title-stack { display: flex; flex-direction: column; align-items: center; gap: 26px; margin-top: -6vh; }
.title-card { text-align: center; padding: 26px 34px 24px; position: relative; min-width: 270px; }
.title-small { font-size: 12px; letter-spacing: .3em; color: #a8824f; font-weight: 700; }
.title-card h1 { margin: 10px 0 6px; font-size: 40px; letter-spacing: .08em; line-height: 1.1; }
.title-card h1 span { color: #d9667f; }
.title-sub { font-size: 16px; letter-spacing: .35em; font-weight: 700; color: #6f9a62; }
.stamp {
  position: absolute; right: -14px; top: -16px; width: 62px; height: 62px; border-radius: 50%;
  border: 2px dashed #c4403a; color: #c4403a; display: grid; place-items: center;
  font-size: 14px; font-weight: 800; transform: rotate(12deg); background: rgba(250,243,228,.9);
}
.title-tip { margin: 0; font-size: 12px; letter-spacing: .08em; font-weight: 700; color: #6b5440;
  background: rgba(250,243,228,.85); padding: 5px 10px; }

#note { background: transparent; justify-content: flex-end; padding-bottom: max(13vh, 40px); gap: 18px; }
.note-card { width: min(300px, 82vw); padding: 26px 28px 22px; transform: rotate(-1.5deg); }
.note-to { font-size: 14px; font-weight: 700; color: #a8824f; letter-spacing: .1em; }
#note-text {
  margin: 14px 0 18px; font-size: 22px; line-height: 1.55; font-weight: 700; white-space: pre-line;
  background-image: repeating-linear-gradient(transparent 0 33px, rgba(201,162,107,.35) 33px 34px);
}
.note-from { text-align: right; font-size: 16px; font-weight: 700; color: #d9667f; }
.pop { animation: pop 250ms steps(1, end) both; }
.pop2 { animation: pop 250ms steps(1, end) 330ms both; }

#video {
  background-color: #efe3cc; background-image: var(--grain); background-size: 128px 128px;
  gap: 16px; justify-content: center;
}
.video-frame-wrap { transform: rotate(-1deg); }
.video-frame { padding: 10px 10px 14px; background-color: #fffaf2; }
#vid {
  display: block; background: #2e2520;
  height: min(64vh, calc((100vw - 60px) * 16 / 9)); width: auto; aspect-ratio: 9 / 16; max-width: calc(100vw - 60px);
}
.video-actions { display: flex; gap: 18px; align-items: center; }
.video-actions .btn { font-size: 17px; padding: 13px 22px 12px 26px; }
.ios-hint { margin: 0; font-size: 12.5px; font-weight: 700; color: #6b5440; letter-spacing: .03em; text-align: center; }

@media (min-width: 700px) {
  .title-card h1 { font-size: 48px; }
  #vid { height: min(70vh, 720px); }
}
body.on-title #corner { display: none; }