:root {
  --cream: #fbf3e4;
  --ink: #3a2418;
  --red: #c8243a;
  --red-deep: #5a0b17;
  --ui: 'Pretendard', -apple-system, system-ui, sans-serif;
  --hand: 'Nanum Pen Script', cursive;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: radial-gradient(120% 75% at 50% 40%, #9a1a2c 0%, #6a0d1c 45%, #2e050c 100%) fixed #2e050c; color: var(--cream); font-family: var(--ui); }
body { touch-action: none; user-select: none; -webkit-user-select: none; }
#gl, #gl2 { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#gl2 { pointer-events: none; z-index: 6; }
#letter { z-index: 5; }
#actions { z-index: 7; }
.hidden { opacity: 0; pointer-events: none; }

/* film grain keeps the gradient from banding and makes it feel shot, not rendered */
#grain {
  position: fixed; inset: -50%; pointer-events: none; opacity: .09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1s steps(6) infinite;
}
@keyframes grain { 0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-1%)} 80%{transform:translate(3%,3%)} 100%{transform:translate(0,0)} }

/* ---------- intro ---------- */
#intro {
  position: fixed; left: 0; right: 0; top: calc(env(safe-area-inset-top) + 13vh); text-align: center;
  transition: opacity .9s ease, transform .9s ease; pointer-events: none;
}
#intro.hidden { transform: translateY(-10px); }
#intro .to-line { font-size: 15px; letter-spacing: .02em; color: rgba(251,243,228,.62); margin-bottom: 10px; }
#intro .big { font-size: 27px; font-weight: 700; letter-spacing: -.02em; text-shadow: 0 2px 24px rgba(0,0,0,.35); }

/* ---------- hint ---------- */
#hint { position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; width: 120px; height: 100%; pointer-events: none; transition: opacity .6s; }
#hint .trail { position: absolute; left: 50%; width: 2px; margin-left: -1px; }
#hint .dot {
  position: absolute; left: 50%; width: 34px; height: 34px; margin-left: -17px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.95) 0 30%, rgba(255,255,255,.25) 31% 60%, transparent 61%);
  animation: pull 1.6s ease-out infinite;
}
@keyframes pull {
  0% { transform: scale(.5); opacity: 0; }
  25% { transform: scale(1); opacity: 1; }
  55% { transform: scale(.82); opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}
#hint .label { position: absolute; left: 0; right: 0; text-align: center; font-size: 14px; color: rgba(251,243,228,.75); letter-spacing: .02em; }

/* ---------- meter + quips ---------- */
#meter {
  position: fixed; right: calc(env(safe-area-inset-right) + 18px); top: 50%; transform: translateY(-50%);
  writing-mode: horizontal-tb; text-align: right; transition: opacity .5s; pointer-events: none;
  font-variant-numeric: tabular-nums;
}
#meter .num { font-size: 40px; font-weight: 800; letter-spacing: -.03em; }
#meter .unit { font-size: 15px; font-weight: 600; margin-left: 3px; opacity: .7; }
#meter.bump .num { animation: bump .35s ease; }
@keyframes bump { 40% { transform: scale(1.12); } }
#meter .num { display: inline-block; transform-origin: right center; }

#quip {
  position: fixed; left: 0; right: 0; top: calc(env(safe-area-inset-top) + 9vh); text-align: center;
  font-size: 19px; font-weight: 600; letter-spacing: -.01em; pointer-events: none;
  opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .35s;
  text-shadow: 0 2px 18px rgba(0,0,0,.4);
}
#quip.on { opacity: 1; transform: none; }

/* ---------- letter ---------- */
#letter {
  position: fixed; left: 50%; top: 46%; width: min(82vw, 360px); transform: translate(-50%, -50%) rotate(-1.2deg);
  transition: opacity .25s, transform .9s cubic-bezier(.2,1.4,.3,1); filter: drop-shadow(0 24px 40px rgba(0,0,0,.45)) drop-shadow(0 4px 8px rgba(0,0,0,.25));
}
#letter:not(.open) { transform: translate(-50%, -50%) rotate(-6deg) scale(.96); }
#letter .paper {
  height: 0; overflow: hidden; margin: 0 6px;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.55), transparent 60%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='.03' numOctaves='4' seed='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .55  0 0 0 0 .42  0 0 0 0 .28  0 0 0 .13 0'/></filter><rect width='100%' height='100%' filter='url(%23p)'/></svg>"),
    linear-gradient(180deg, #fdf6e8, #f4e7cf);
  box-shadow: inset 0 10px 14px -10px rgba(90,60,30,.45), inset 0 -10px 14px -10px rgba(90,60,30,.45);
}
#letter .inner { padding: 28px 26px 96px; position: relative; color: var(--ink); font-family: var(--hand); }
#letter .to { font-size: 30px; margin-bottom: 8px; }
#letter .msg { font-size: 29px; line-height: 1.32; min-height: 1.3em; white-space: pre-wrap; word-break: keep-all; overflow-wrap: anywhere; }
#letter .msg .ch { opacity: 0; display: inline; transition: opacity .18s; }
#letter .msg .ch.on { opacity: 1; }
#letter .from { font-size: 28px; text-align: right; margin-top: 16px; opacity: 0; transition: opacity .5s; }
#letter .from.on { opacity: 1; }
#letter .stamp {
  position: absolute; left: 22px; bottom: 20px; width: 74px; height: 74px;
  opacity: 0; transform: scale(2.3) rotate(-30deg); filter: drop-shadow(0 2px 2px rgba(60,0,10,.35));
}
#letter .stamp.on { opacity: 1; transform: scale(1) rotate(-12deg); transition: transform .26s cubic-bezier(.2,1.5,.4,1), opacity .08s; }
#letter .roll {
  height: 22px; border-radius: 11px; position: relative; z-index: 1;
  background: linear-gradient(180deg, #e9d6b4 0%, #fffaf0 28%, #e3cca6 62%, #b99a6c 100%);
  box-shadow: 0 3px 6px rgba(0,0,0,.25);
}
#letter .roll::before, #letter .roll::after {
  content: ''; position: absolute; top: 3px; width: 10px; height: 16px; border-radius: 3px;
  background: linear-gradient(180deg, #e6475b, #b01b31 60%, #7d0c1f);
}
#letter .roll::before { left: 14px; } #letter .roll::after { right: 14px; }

/* ---------- actions ---------- */
#actions {
  position: fixed; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom) + 34px);
  display: flex; gap: 10px; justify-content: center; transition: opacity .6s;
}
button {
  font-family: var(--ui); font-size: 16px; font-weight: 700; border: 0; border-radius: 16px; padding: 15px 22px; cursor: pointer;
  transition: transform .12s, filter .12s;
}
button:active { transform: scale(.97); filter: brightness(.95); }
button.solid { background: var(--cream); color: var(--red-deep); }
button.ghost { background: rgba(255,255,255,.12); color: var(--cream); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/* ---------- create ---------- */
#create { position: fixed; inset: 0; overflow-y: auto; touch-action: pan-y; transition: opacity .5s; display: flex; align-items: flex-start; justify-content: center; }
#create .card {
  width: min(100%, 420px); margin: calc(env(safe-area-inset-top) + 7vh) 16px 40px; padding: 26px 22px 22px;
  border-radius: 26px; background: rgba(30, 4, 9, .55); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: 0 30px 60px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);
  user-select: text; -webkit-user-select: text;
}
#create .eyebrow { font-size: 13px; font-weight: 700; color: #ff9aa8; letter-spacing: .04em; }
#create h1 { font-size: 26px; line-height: 1.28; letter-spacing: -.03em; margin: 8px 0 10px; }
#create .sub { font-size: 14px; line-height: 1.55; color: rgba(251,243,228,.68); margin: 0 0 22px; }
#create label { display: block; font-size: 13px; font-weight: 600; color: rgba(251,243,228,.75); margin-bottom: 14px; position: relative; }
#create input, #create textarea {
  display: block; width: 100%; margin-top: 7px; padding: 14px 15px; border-radius: 14px; border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.07); color: var(--cream); font-family: var(--ui); font-size: 16px; outline: none; resize: none;
  transition: border-color .15s, background .15s;
}
#create input:focus, #create textarea:focus { border-color: rgba(255,170,180,.55); background: rgba(255,255,255,.1); }
#create input::placeholder, #create textarea::placeholder { color: rgba(251,243,228,.3); }
#create .count { position: absolute; right: 12px; bottom: 10px; font-size: 12px; color: rgba(251,243,228,.4); }
#create .row { display: flex; gap: 10px; margin-top: 20px; }
#create .row button { flex: 1; }

#toast {
  position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 110px); transform: translate(-50%, 10px);
  background: rgba(20,3,6,.85); color: var(--cream); padding: 12px 18px; border-radius: 14px; font-size: 14px; font-weight: 600;
  opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; white-space: nowrap;
}
#toast.on { opacity: 1; transform: translate(-50%, 0); }