/* ---- fonts ---- */
@font-face {
  font-family: 'RiddleScript';
  src: url('/fonts/DancingScript.ttf') format('truetype');
  font-display: swap;
  unicode-range: U+0000-024F, U+2000-206F; /* Latin + punctuation */
}
@font-face {
  font-family: 'RiddleHan';
  src: url('/fonts/STXINGKA.TTF') format('truetype');
  font-display: swap;
}

* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  background: #050403;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  touch-action: none;
  overscroll-behavior: none;
}
body {
  font-family: 'RiddleScript', 'RiddleHan', cursive;
}

/* ---------- opening video ---------- */
#intro {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  z-index: 20;
  transition: opacity 1.1s ease;
}
#intro.gone {
  opacity: 0;
  pointer-events: none;
}
#intro-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
#enter-btn {
  position: absolute;
  z-index: 2;
  font-family: 'RiddleScript', 'RiddleHan', cursive;
  color: #e9e2cf;
  background: rgba(20, 15, 10, 0.35);
  border: 1px solid rgba(200, 180, 140, 0.4);
  cursor: pointer;
  backdrop-filter: blur(2px);
  transition: opacity 0.4s ease, background 0.3s ease;
  -webkit-user-select: none;
  user-select: none;
  bottom: max(12%, calc(env(safe-area-inset-bottom, 0px) + 48px));
  left: 50%;
  transform: translateX(-50%);
  padding: 14px 40px;
  font-size: clamp(18px, 5vw, 24px);
  letter-spacing: 2px;
  border-radius: 40px;
}
#enter-btn:hover {
  background: rgba(60, 45, 25, 0.6);
}

/* ---------- frozen last frame / paper fill ---------- */
#paper-bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.1s ease;
  background: #0a0806;
  -webkit-user-select: none;
  user-select: none;
}
#paper-bg.show {
  opacity: 1;
}

/* ---------- diary writing overlay (full viewport) ---------- */
#diary {
  position: fixed;
  inset: 0;
  z-index: 10;
  background: transparent;
}
#page {
  position: absolute;
  inset: 0;
  cursor: text;
  /* paper is #paper-bg underneath — keep this layer transparent */
  background: transparent;
}

/* handwriting ink layer — inset keeps text on the paper body */
#ink {
  position: absolute;
  top: max(10%, env(safe-area-inset-top, 0px) + 8%);
  right: max(8%, env(safe-area-inset-right, 0px) + 4%);
  bottom: max(12%, env(safe-area-inset-bottom, 0px) + 6%);
  left: max(8%, env(safe-area-inset-left, 0px) + 4%);
  display: flex;
  align-items: center; /* vertical centering */
  justify-content: center; /* horizontal centering */
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
}
#ink-text {
  color: #4a3826;
  font-size: clamp(34px, 6.6vmin, 66px);
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  text-align: center; /* center each wrapped line too */
  text-shadow: 0 0 1px rgba(40, 26, 12, 0.25);
  max-width: 100%;
  max-height: 100%;
}

.ch {
  display: inline;
  opacity: 0;
  animation: ink-in 0.28s ease forwards;
}
/* STXingkai (华文行楷) is a fixed brush-weight TTF — font-weight can't thin
   it, so a hairline stroke in the paper's own tone "eats into" the glyph
   edges, plus a touch smaller since it reads denser than the Latin script
   at the same font-size. */
.ch.han {
  font-size: 0.9em;
  -webkit-text-stroke: 0.55px #ebe2d1;
  text-stroke: 0.55px #ebe2d1;
}
@keyframes ink-in {
  from {
    opacity: 0;
    filter: blur(1.2px);
  }
  to {
    opacity: 0.92;
    filter: blur(0);
  }
}
.sinking .ch {
  animation: ink-out 2.6s ease forwards;
}
@keyframes ink-out {
  from {
    opacity: 0.92;
    filter: blur(0);
  }
  to {
    opacity: 0;
    filter: blur(2.5px);
  }
}
#ink.reply {
  color: #4a3826;
}

/* drawing surface fills the writing region (explicit % size — canvas
   is a replaced element and does not stretch from inset alone) */
#board {
  position: absolute;
  top: max(9%, env(safe-area-inset-top, 0px) + 7%);
  left: max(7%, env(safe-area-inset-left, 0px) + 3%);
  width: min(86%, calc(100% - 14%));
  height: min(81%, calc(100% - 19%));
  touch-action: none;
  cursor: crosshair;
  display: block;
  -webkit-user-select: none;
  user-select: none;
  /* transition lives here so adding .sinking can animate opacity */
  opacity: 1;
  filter: none;
  transition: opacity 2.4s ease, filter 2.4s ease;
}
#board.locked {
  pointer-events: none;
}
#board.sinking {
  opacity: 0;
  filter: blur(2.5px);
}

#controls {
  position: absolute;
  top: max(3%, env(safe-area-inset-top, 0px) + 12px);
  right: max(4%, env(safe-area-inset-right, 0px) + 12px);
  display: flex;
  gap: 12px;
  z-index: 2;
}
#clear-btn {
  font-family: Georgia, serif;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(80, 60, 35, 0.35);
  background: rgba(120, 95, 60, 0.14);
  color: rgba(70, 52, 30, 0.75);
  font-size: 18px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.4s ease;
  -webkit-user-select: none;
  user-select: none;
}
#clear-btn.show {
  opacity: 1;
}
#clear-btn:hover {
  background: rgba(120, 95, 60, 0.28);
}

/* phones */
@media (max-width: 600px) {
  #ink {
    font-size: clamp(28px, 7.2vmin, 48px);
    line-height: 1.55;
  }
  #clear-btn {
    width: 48px;
    height: 48px;
  }
}

/* short landscape */
@media (max-height: 500px) and (orientation: landscape) {
  #ink {
    font-size: clamp(26px, 5.8vmin, 42px);
  }
  #board {
    top: 8%;
    height: 84%;
  }
}