:root {
  --parch: #e8dcc0;
  --parch-dk: #d4c39a;
  --ink: #2a1c0e;
  --stone: #3a352c;
  --gold: #c99a2e;
  --crimson: #7a1f26;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; background: #0d1526; }
body {
  font-family: 'Cormorant Garamond', serif;
  -webkit-user-select: none; user-select: none;
  touch-action: none;
}
#scene-container { position: fixed; inset: 0; }
#scene-container canvas { display: block; cursor: grab; }
#scene-container canvas:active { cursor: grabbing; }

/* ---------- Loader ---------- */
#loader {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 40%, #1c2b45, #070c17);
  transition: opacity .7s ease;
}
.loader-inner { text-align: center; color: var(--parch); }
.crest { font-size: 68px; animation: float 2.4s ease-in-out infinite; }
.loader-title {
  font-family: 'Cinzel Decorative', serif; font-weight: 900;
  font-size: 34px; letter-spacing: 6px; margin-top: 8px;
  color: var(--gold); text-shadow: 0 2px 12px rgba(201,154,46,.5);
}
.loader-sub { font-size: 18px; opacity: .7; margin-top: 6px; letter-spacing: 2px; font-style: italic; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }

/* ---------- Top bar ---------- */
#topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 18px;
  background: linear-gradient(180deg, rgba(20,14,6,.82), rgba(20,14,6,0));
  animation: slideDown .8s .3s both;
}
#topbar h1 {
  font-family: 'Cinzel Decorative', serif; font-weight: 700;
  font-size: clamp(18px, 4vw, 26px); color: var(--parch);
  letter-spacing: 2px; text-shadow: 0 2px 6px #000;
}
#dayNightBtn {
  background: rgba(232,220,192,.12); border: 1px solid rgba(201,154,46,.5);
  color: var(--parch); font-size: 22px; width: 46px; height: 46px;
  border-radius: 50%; cursor: pointer; transition: .25s; backdrop-filter: blur(4px);
}
#dayNightBtn:hover { background: rgba(201,154,46,.3); transform: rotate(20deg) scale(1.1); }

/* ---------- Viewpoints ---------- */
#viewpoints {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 62px; z-index: 20;
  display: flex; gap: 6px; flex-wrap: wrap; justify-content: center;
  max-width: 96vw; padding: 6px;
  animation: slideUp .8s .5s both;
}
#viewpoints button {
  font-family: 'Cinzel Decorative', serif; font-size: clamp(10px, 2.4vw, 13px);
  letter-spacing: 1px; color: var(--parch);
  background: linear-gradient(180deg, #4a4238, #2e2820);
  border: 1px solid rgba(201,154,46,.4);
  padding: 9px 13px; border-radius: 6px; cursor: pointer;
  transition: .2s; box-shadow: 0 3px 8px rgba(0,0,0,.4);
}
#viewpoints button:hover { transform: translateY(-2px); border-color: var(--gold); }
#viewpoints button.active {
  background: linear-gradient(180deg, #8a6a1e, var(--crimson));
  border-color: var(--gold); color: #fff;
}

/* ---------- Hint ---------- */
#hint {
  position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%);
  z-index: 15; color: var(--parch); opacity: .65; font-size: 13px;
  letter-spacing: .5px; text-shadow: 0 1px 4px #000; text-align: center;
  padding: 0 12px; pointer-events: none; font-style: italic;
  animation: fadeIn 1s 1s both;
}

/* ---------- Info panel (parchment scroll) ---------- */
#infopanel {
  position: fixed; top: 50%; right: -420px; transform: translateY(-50%);
  z-index: 30; width: min(360px, 88vw);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.06)),
    var(--parch);
  color: var(--ink);
  border: 2px solid var(--parch-dk);
  border-radius: 8px;
  padding: 26px 26px 30px;
  box-shadow: -8px 0 40px rgba(0,0,0,.6), inset 0 0 40px rgba(160,120,60,.25);
  transition: right .45s cubic-bezier(.2,.9,.3,1);
}
#infopanel.open { right: 18px; }
.scroll-top, .scroll-bot {
  position: absolute; left: -6px; right: -6px; height: 14px;
  background: linear-gradient(90deg, var(--woodDk, #4a2f18), #6b4423, #4a2f18);
  border-radius: 8px;
}
.scroll-top { top: -8px; } .scroll-bot { bottom: -8px; }
#closePanel {
  position: absolute; top: 10px; right: 12px; z-index: 2;
  background: none; border: none; font-size: 22px; color: var(--crimson);
  cursor: pointer; font-weight: bold; line-height: 1;
}
#ipName {
  font-family: 'Cinzel Decorative', serif; font-size: 22px;
  color: var(--crimson); margin-bottom: 2px; line-height: 1.2;
}
#ipType {
  font-size: 14px; letter-spacing: 2px; text-transform: uppercase;
  color: #7a5a2a; margin-bottom: 12px; font-weight: 600;
}
#ipDesc { font-size: 18px; line-height: 1.45; margin-bottom: 16px; font-style: italic; }
#ipStats { border-top: 1px dashed #b09660; padding-top: 12px; }
.stat {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 16px; padding: 4px 0; border-bottom: 1px dotted #c9b688;
}
.stat span { color: #6a5228; letter-spacing: .5px; }
.stat b { color: var(--ink); font-weight: 700; }

/* ---------- Footer ---------- */
#footer {
  position: fixed; bottom: 8px; right: 12px; z-index: 15; font-size: 12px;
}
#footer a {
  color: rgba(232,220,192,.55); text-decoration: none; letter-spacing: 1px;
  border-bottom: 1px dotted rgba(232,220,192,.3); padding-bottom: 1px;
  transition: .2s;
}
#footer a:hover { color: var(--gold); }

@keyframes slideDown { from{opacity:0;transform:translateY(-30px)} to{opacity:1} }
@keyframes slideUp { from{opacity:0;transform:translateX(-50%) translateY(30px)} to{opacity:1;transform:translateX(-50%)} }
@keyframes fadeIn { from{opacity:0} to{opacity:.65} }

@media (max-width: 600px) {
  #hint { display: none; }
  #viewpoints { bottom: 46px; }
  #infopanel { padding: 22px 18px 26px; }
  #ipDesc { font-size: 16px; }
}
</parameter>