:root {
  color-scheme: dark;
  --paper: #ead7aa;
  --paper-dark: #c7a76b;
  --ink: #25170d;
  --cream: #f8e9c7;
  --gold: #d5a642;
  --red: #7f2531;
  --blue: #17243d;
  --night: #070910;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: Georgia, 'Times New Roman', serif;
  background:
    radial-gradient(circle at 18% 12%, rgba(213,166,66,.16), transparent 22%),
    radial-gradient(circle at 70% 75%, rgba(80,64,128,.2), transparent 35%),
    linear-gradient(135deg, #05060a, #111522 55%, #06050a);
  color: var(--cream);
  display: grid;
  place-items: center;
  overflow-x: hidden;
}

.scene {
  width: min(1220px, 96vw);
  min-height: min(760px, 94vh);
  display: grid;
  grid-template-columns: .78fr 1.22fr;
  gap: 24px;
  padding: 24px;
}

.owlery, .desk {
  position: relative;
  border: 1px solid rgba(213,166,66,.32);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 28px 90px rgba(0,0,0,.52), inset 0 0 60px rgba(255,255,255,.035);
}

.owlery {
  min-height: 650px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px) 0 0/60px 60px,
    linear-gradient(#10172a, #080910 50%, #18100d);
}
.owlery::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(248,233,199,.75) 0 1px, transparent 1.4px);
  background-size: 72px 88px;
  opacity: .16;
  animation: stars 22s linear infinite;
}
@keyframes stars { to { transform: translateY(88px); } }
.moon {
  position: absolute;
  top: 56px; left: 58px;
  width: 112px; height: 112px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff9db, #dec77d 68%, #96703a);
  box-shadow: 0 0 50px rgba(248,233,199,.5);
}
.perch {
  position: absolute;
  left: 8%; right: 8%; bottom: 150px;
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(90deg, #2d190d, #65401d, #2a160c);
  box-shadow: 0 18px 0 rgba(0,0,0,.22);
}
.owl {
  position: absolute;
  left: 50%; top: 45%;
  width: 150px; height: 175px;
  transform: translate(-50%, -50%);
  animation: hover 3.8s ease-in-out infinite;
}
@keyframes hover { 50% { transform: translate(-50%, -54%); } }
.owl .body {
  position: absolute;
  left: 30px; top: 58px;
  width: 90px; height: 105px;
  border-radius: 48% 48% 42% 42%;
  background: radial-gradient(circle at 50% 22%, #f4e4c2, #9b7951 58%, #4d321f);
}
.owl .head {
  position: absolute;
  left: 24px; top: 16px;
  width: 102px; height: 88px;
  border-radius: 45% 45% 52% 52%;
  background: radial-gradient(circle at 50% 30%, #fff3cf, #a98255 70%);
  z-index: 2;
}
.owl .head::before, .owl .head::after {
  content: "";
  position: absolute; top: -10px;
  border-bottom: 28px solid #8a6742;
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
}
.owl .head::before { left: 5px; transform: rotate(-24deg); }
.owl .head::after { right: 5px; transform: rotate(24deg); }
.owl .head span {
  position: absolute; top: 31px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #140b08;
  box-shadow: 0 0 0 8px rgba(248,233,199,.45), 0 0 18px #d5a642;
}
.owl .head span:first-child { left: 25px; }
.owl .head span:last-child { right: 25px; }
.wing { position:absolute; top: 66px; width:48px; height:94px; background:#725234; border-radius: 70% 30% 70% 30%; }
.wing.left { left: 0; transform: rotate(18deg); }
.wing.right { right: 0; transform: scaleX(-1) rotate(18deg); }
.letter-string { position:absolute; left:50%; top:155px; width:2px; height:68px; background: rgba(248,233,199,.5); }
.letter-string::after { content:"✉"; position:absolute; left:-19px; top:54px; font-size:34px; color:var(--paper); filter: drop-shadow(0 4px 8px #000); }
.hint { position:absolute; left:28px; right:28px; bottom:34px; color:#d8c8a3; line-height:1.5; text-align:center; }

.desk {
  padding: 30px;
  background:
    radial-gradient(circle at 20% 0%, rgba(213,166,66,.14), transparent 32%),
    linear-gradient(145deg, rgba(29,18,14,.94), rgba(10,8,11,.97));
}
.eyebrow { color:var(--gold); text-transform:uppercase; letter-spacing:.14em; font-size:12px; margin:0 0 8px; }
h1 { margin:0; font-size: clamp(38px, 5vw, 68px); line-height:.9; }
.intro { color:#dac69c; font-size:18px; line-height:1.45; max-width:720px; }
.letters { display:grid; grid-template-columns: repeat(4, 1fr); gap:12px; margin: 24px 0; }
.letter {
  cursor:pointer;
  min-height: 116px;
  border: none;
  border-radius: 8px;
  padding: 14px;
  color: var(--ink);
  background:
    linear-gradient(135deg, transparent 49%, rgba(80,42,23,.25) 50%, transparent 51%),
    linear-gradient(45deg, transparent 49%, rgba(80,42,23,.18) 50%, transparent 51%),
    linear-gradient(#ead7aa, #cfae74);
  box-shadow: 0 12px 24px rgba(0,0,0,.35);
  font: inherit;
  text-align:left;
  transition: transform .18s, filter .18s;
  position:relative;
}
.letter:hover { transform: translateY(-5px) rotate(-1deg); filter: brightness(1.06); }
.letter.read { filter: sepia(.5) brightness(.86); }
.letter.future { animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 26px rgba(126,113,205,.55); } }
.letter b { display:block; font-size:17px; position:relative; z-index:2; }
.letter small { display:block; margin-top:8px; opacity:.72; position:relative; z-index:2; }
.letter::after {
  content:"";
  position:absolute; left:50%; top:50%;
  width:16px; height:16px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background: radial-gradient(circle, #a52c36, #5c121b);
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset;
  z-index:1;
  pointer-events:none;
}
.parchment {
  min-height: 280px;
  color: var(--ink);
  padding: 34px;
  border-radius: 16px;
  background:
    radial-gradient(circle at 20% 30%, rgba(92,54,18,.12), transparent 20%),
    radial-gradient(circle at 80% 80%, rgba(92,54,18,.12), transparent 26%),
    linear-gradient(120deg, #f2dfae, #d7b677 58%, #ead7aa);
  box-shadow: inset 0 0 30px rgba(84,48,19,.22), 0 18px 40px rgba(0,0,0,.32);
  position:relative;
  line-height:1.55;
}
.parchment h2 { margin:0 0 12px; font-size:30px; }
.parchment p { font-size:18px; }
.seal { position:absolute; right:24px; top:20px; color:#8d2632; font-size:28px; }
.parchment .changed { color:#7f2531; font-weight:bold; }
.reply {
  margin-top:18px;
  border:1px solid rgba(213,166,66,.35);
  border-radius:18px;
  padding:18px;
  background: rgba(255,255,255,.04);
}
.reply h2 { margin:0 0 6px; }
.reply p { margin-top:0; color:#d8c8a3; }
.reply-options { display:flex; flex-wrap:wrap; gap:10px; }
.reply-options button, footer button {
  cursor:pointer;
  border:1px solid rgba(213,166,66,.48);
  border-radius:999px;
  background:#221419;
  color:var(--cream);
  font: inherit;
  padding: 11px 16px;
}
.reply-options button:hover, footer button:hover { border-color:var(--gold); background:#3a2023; }
footer { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:18px; }
.meter { color:#d8c8a3; }
.meter span { display:block; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); }
.meter b { font-size:20px; }
body.ending .owl { animation-duration: 1.3s; }
body.ending .moon { box-shadow:0 0 80px rgba(127,37,49,.75); }

@media (max-width: 900px) {
  .scene { grid-template-columns:1fr; padding:14px; }
  .owlery { min-height:360px; }
  .owl { transform: translate(-50%, -55%) scale(.78); }
  .perch { bottom:82px; }
  .hint { display:none; }
  .letters { grid-template-columns:1fr 1fr; }
}
@media (max-width: 520px) { .letters { grid-template-columns:1fr; } .desk { padding:20px; } }