*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root { --paper: #ede8dc; --red: #8b1a1a; --mono: 'Courier Prime', monospace; }

body {
  min-height: 100vh; font-family: var(--mono);
  color: #2a2218; overflow-x: hidden; position: relative;
  background-color: #e4dece;
}
#paper-texture { position:fixed; inset:0; pointer-events:none; z-index:0; }
body::after {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse at 22% 18%, rgba(215,200,162,0.4) 0%, transparent 52%),
    radial-gradient(ellipse at 80% 82%, rgba(190,175,138,0.28) 0%, transparent 46%);
}

header {
  position:fixed; top:0; left:0; right:0;
  display:flex; justify-content:space-between; align-items:center;
  padding:15px 36px;
  font-family:var(--mono); font-size:12.5px; letter-spacing:0.09em; color:#5a5040;
  z-index:100;
  background:linear-gradient(to bottom, rgba(228,222,206,0.97) 65%, transparent);
}
footer {
  position:fixed; bottom:0; left:0; right:0; padding:12px 26px;
  font-family:var(--mono); font-size:11.5px; color:#8a7a60; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
}
footer a { color:#1a4a8b; text-decoration:underline; text-underline-offset:2px; }
.footer-home { visibility:hidden; pointer-events:none; }
body.typing-view .footer-home { visibility:visible; pointer-events:auto; }
.sound-toggle{
  position:fixed;
  right:26px;
  bottom:54px;
  transform:none;
  width:42px;
  height:42px;
  border-radius:50%;
  border:1.5px solid rgba(90,70,50,0.4);
  background:rgba(228,222,206,0.92);
  color:#3a2e20;
  font-size:19px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:101;
  opacity:0;
  pointer-events:none;
  transition:all 0.2s ease;
}
.sound-toggle:hover{
  border-color:var(--red);
  color:var(--red);
}
body.typing-view .sound-toggle{
  opacity:1;
  pointer-events:auto;
}

/* SIDEBARS */
.sidebar-left { position:fixed; left:24px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:9px; z-index:100; }
.font-btn {
  width:40px; height:40px; border-radius:50%;
  border:1.5px solid rgba(90,70,50,0.3); background:rgba(228,222,206,0.9);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-size:13px; color:#3a2e20; transition:all 0.2s; backdrop-filter:blur(6px);
}
.font-btn:hover { border-color:var(--red); color:var(--red); }
.font-btn.active { border-color:var(--red); background:rgba(139,26,26,0.09); color:var(--red); }
.font-btn:nth-child(1){ font-family:'Playfair Display',serif; font-style:italic; }
.font-btn:nth-child(2){ font-family:'Special Elite',cursive; }
.font-btn:nth-child(3){ font-family:'Cormorant Garamond',serif; font-style:italic; }
.font-btn:nth-child(4){ font-family:'IM Fell English',serif; font-style:italic; }
.font-size-btn { font-size:11px; font-family:var(--mono); letter-spacing:-0.02em; }

.sidebar-right { position:fixed; right:24px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:10px; z-index:100; }
.color-btn { width:27px; height:27px; border-radius:50%; border:2.5px solid transparent; cursor:pointer; transition:all 0.2s; }
.color-btn:hover,.color-btn.active { border-color:rgba(80,60,40,0.55); transform:scale(1.18); }
.color-btn[data-color="#1a1a1a"]{ background:#1a1a1a; }
.color-btn[data-color="#5c4a3a"]{ background:#5c4a3a; }
.color-btn[data-color="#8b1a1a"]{ background:#8b1a1a; }
.color-btn[data-color="#1a3a7a"]{ background:#1a3a7a; }
/* Hidden on home, shown in typing view */
.sidebar-left,.sidebar-right { opacity:0; pointer-events:none; transition:opacity 0.2s ease; }
body.typing-view .sidebar-left, body.typing-view .sidebar-right { opacity:1; pointer-events:auto; }

/* LANDING */
.special-elite-regular {
  font-family: "Special Elite", system-ui;
  font-weight: 400;
  font-style: normal;
}

#landing { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:38px; position:relative; z-index:10; }
.main-title { font-family:"Special Elite", system-ui; font-weight:400; font-style:normal; font-size:clamp(24px,3.8vw,44px); color:var(--red); text-align:center; letter-spacing:-0.01em; line-height:1.1; }
.start-btn { font-family:"Special Elite", system-ui; font-weight:400; font-style:normal; font-size:clamp(14px,2vw,20px); color:var(--red); border:2px solid var(--red); border-radius:50px; padding:14px 54px; background:transparent; cursor:pointer; transition:all 0.3s; letter-spacing:0.02em; }
.start-btn:hover { background:var(--red); color:var(--paper); }

/* TYPEWRITER SCREEN */
#typewriter-screen { display:none; flex-direction:column; align-items:center; min-height:100vh; padding:74px 20px 110px; position:relative; z-index:10; }
#typewriter-screen.visible { display:flex; }

.paper-container { position:relative; width:390px; max-width:84vw; z-index:5; }
.paper {
  background:#fdfaf4; width:100%; min-height:240px;
  box-shadow:2px 4px 22px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.07);
  padding:30px 38px 30px; border-radius:1px 1px 0 0; position:relative;
}
.paper::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:repeating-linear-gradient(transparent, transparent 27px, rgba(180,160,130,0.17) 27px, rgba(180,160,130,0.17) 28px);
  margin-top:30px;
}
#letter-content { font-size:15px; line-height:1.85; min-height:150px; outline:none; white-space:pre-wrap; word-break:break-word; position:relative; z-index:1; }
.cursor-blink { display:inline-block; width:1.5px; height:1em; background:var(--red); vertical-align:text-bottom; animation:blink 1s step-end infinite; margin-left:1px; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* SVG TYPEWRITER — angular tilt */
.typewriter-wrap {
  position:relative; width:580px; max-width:94vw; margin-top:-4px;
  transform:perspective(1200px) rotateX(11deg) rotateY(-1.5deg);
  transform-origin:top center;
  filter:drop-shadow(0 18px 30px rgba(0,0,0,0.3));
}
/* key press */
.tw-key { transition:transform 0.08s ease, filter 0.08s ease; transform-origin:center bottom; transform-box:fill-box; }
.tw-key.pressed { transform:translateY(6px) scaleY(0.78); filter:brightness(1.45) drop-shadow(0 0 7px rgba(255,210,120,0.55)); }
.tw-key text{
  font-size:10.5px;
  fill:#f3e8c8;
  paint-order:stroke;
  stroke:rgba(35,18,12,0.55);
  stroke-width:0.8px;
}
.typewriter-wrap.key-hit { animation:keyHitNudge 90ms ease-out; }
@keyframes keyHitNudge {
  0% { transform:perspective(1200px) rotateX(11deg) rotateY(-1.5deg) translateY(0); }
  45% { transform:perspective(1200px) rotateX(11deg) rotateY(-1.5deg) translateY(1.6px); }
  100% { transform:perspective(1200px) rotateX(11deg) rotateY(-1.5deg) translateY(0); }
}

.done-btn { margin-top:34px; background:var(--red); color:#fdfaf4; border:none; border-radius:50px; padding:15px 58px; font-family:'Times New Roman', 'Times', Georgia, serif; font-style:italic; font-size:20px; cursor:pointer; transition:all 0.25s; box-shadow:0 4px 18px rgba(139,26,26,0.28); }
.done-btn:hover { background:#6b1010; transform:translateY(-2px); box-shadow:0 7px 22px rgba(139,26,26,0.38); }
.clear-btn {
  display:block; margin:0 auto 8px; background:none; border:none;
  font-family:var(--mono); font-size:11px; letter-spacing:0.1em;
  color:#9a8870; cursor:pointer; text-decoration:underline;
  text-underline-offset:3px; text-decoration-color:rgba(154,136,112,0.55);
  padding:4px 8px; transition:color 0.2s, text-decoration-color 0.2s;
  text-transform:lowercase;
}
.clear-btn:hover { color:var(--red); text-decoration-color:var(--red); }
.hint-text { margin-top:12px; font-family:var(--mono); font-size:11.5px; color:var(--red); text-align:center; line-height:1.65; letter-spacing:0.03em; }

.fade-out { animation:fadeOut 0.44s ease forwards; }
.fade-in  { animation:fadeIn  0.44s ease forwards; }
@keyframes fadeOut { to{opacity:0;pointer-events:none;} }
@keyframes fadeIn  { from{opacity:0;} to{opacity:1;} }
@keyframes carriageReturn { 0%{transform:translateX(0)} 35%{transform:translateX(-14px)} 100%{transform:translateX(0)} }
.paper.cr { animation:carriageReturn 0.32s ease-out; }