:root {
  --paper: #e9dfc7;
  --paper-deep: #d8c9a8;
  --ink: #17120e;
  --ink-soft: #3b2f24;
  --cinnabar: #a8372b;
  --cinnabar-bright: #c54a34;
  --ochre: #c08a3e;
  --indigo: #25394a;
  --jade: #3f6a63;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #17120e;
  color: var(--ink);
  font-family: "STKaiti", "KaiTi", "Kaiti SC", "FangSong", "Songti SC", "SimSun", serif;
  -webkit-font-smoothing: antialiased;
}

body { cursor: default; }
body.playing { cursor: none; }

#scene, #scene canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

#grain {
  position: fixed;
  inset: -30%;
  pointer-events: none;
  z-index: 4;
  opacity: .13;
  background-image:
    radial-gradient(rgba(255,248,226,.9) .7px, transparent .8px),
    radial-gradient(rgba(15,8,4,.8) .6px, transparent .7px);
  background-size: 3px 3px, 5px 5px;
  background-position: 0 0, 1px 2px;
  mix-blend-mode: overlay;
  animation: grainShift .6s steps(2) infinite;
}

@keyframes grainShift {
  0% { transform: translate(0, 0); }
  50% { transform: translate(-1px, 1px); }
  100% { transform: translate(1px, 0); }
}

.hidden { display: none !important; }

/* ---------------- HUD ---------------- */
#hud {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.1s ease;
}
#hud.on { opacity: 1; }

.panel {
  background:
    linear-gradient(100deg, rgba(233,223,199,.92), rgba(216,201,168,.84));
  border: 1px solid rgba(23,18,14,.78);
  box-shadow:
    0 0 0 3px rgba(233,223,199,.16),
    2px 5px 18px rgba(0,0,0,.35);
}

#location {
  position: absolute;
  top: 26px;
  left: 28px;
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 12px 22px 12px 12px;
  min-width: 250px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}
#location #loc-seal {
  width: 42px;
  height: 48px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  background: var(--cinnabar);
  color: #f2e6ca;
  font-size: 25px;
  line-height: 1;
  border: 1px solid #6d1f18;
  box-shadow: inset 0 0 0 3px rgba(242,230,202,.18);
  transform: rotate(-2deg);
}
#location h2 {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: .18em;
  line-height: 1.2;
  white-space: nowrap;
}
#location p {
  margin-top: 5px;
  font-size: 12px;
  letter-spacing: .22em;
  color: #5b4836;
  white-space: nowrap;
}

#compass {
  position: absolute;
  top: 26px;
  right: 30px;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(233,223,199,.94) 0 44%, rgba(196,178,144,.88) 45% 100%);
  border: 1px solid rgba(23,18,14,.75);
  box-shadow: 0 0 0 5px rgba(233,223,199,.14), 2px 6px 18px rgba(0,0,0,.35);
  display: grid;
  place-items: center;
}
.compass-ring { position: absolute; inset: 8px; border: 1px solid rgba(23,18,14,.35); border-radius: 50%; }
.compass-ring span {
  position: absolute;
  font-size: 10px;
  color: #4a3a2b;
  letter-spacing: 0;
}
.compass-ring .north { top: 1px; left: 50%; transform: translateX(-50%); color: var(--cinnabar); font-weight: 700; }
.compass-ring .south { bottom: 1px; left: 50%; transform: translateX(-50%); }
.compass-ring .east { right: 3px; top: 50%; transform: translateY(-50%); }
.compass-ring .west { left: 3px; top: 50%; transform: translateY(-50%); }
#needle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 34px;
  background: linear-gradient(to bottom, var(--cinnabar) 0 48%, #231a12 49% 100%);
  transform-origin: 50% 50%;
  transform: translate(-50%, -50%) rotate(0deg);
  box-shadow: 0 0 0 1px rgba(233,223,199,.4);
}
#needle::before {
  content: "";
  position: absolute;
  top: -5px;
  left: -3.5px;
  border-left: 4.5px solid transparent;
  border-right: 4.5px solid transparent;
  border-bottom: 8px solid var(--cinnabar);
}
#bearing {
  position: absolute;
  bottom: 17px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  letter-spacing: .12em;
  color: #4c3a2a;
  font-family: Georgia, serif;
}

#time-chip {
  position: absolute;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  font-size: 11px;
  letter-spacing: .18em;
  color: #493828;
  opacity: .9;
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%);
}
#time-chip #time-label { color: var(--cinnabar); font-weight: 700; font-size: 13px; }
#time-chip i { font-style: normal; font-size: 9px; letter-spacing: .12em; color: #78624b; }

#hint {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 9px 20px;
  font-size: 12px;
  letter-spacing: .12em;
  color: #3f3023;
  white-space: nowrap;
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 100%, 0 100%);
  opacity: .92;
}
#hint span { display: flex; align-items: center; gap: 5px; }
kbd {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border: 1px solid #493a2b;
  background: rgba(255,250,236,.5);
  font-family: Georgia, serif;
  font-size: 10px;
  line-height: 1;
  box-shadow: 1px 1px 0 rgba(73,58,43,.25);
}
.mouse {
  display: inline-block;
  width: 10px;
  height: 15px;
  border: 1px solid #493a2b;
  border-radius: 6px;
  position: relative;
}
.mouse::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 50%;
  width: 1px;
  height: 4px;
  background: #493a2b;
  transform: translateX(-50%);
}

#reticle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(233,223,199,.58);
  box-shadow: 0 0 0 1px rgba(23,18,14,.45);
  transform: translate(-50%, -50%);
  opacity: .45;
}

#toast {
  position: absolute;
  left: 50%;
  bottom: 88px;
  transform: translateX(-50%) translateY(8px);
  padding: 8px 18px;
  background: rgba(23,18,14,.72);
  color: #eadfc6;
  border: 1px solid rgba(234,223,198,.35);
  font-size: 12px;
  letter-spacing: .16em;
  opacity: 0;
  transition: opacity .5s, transform .5s;
  white-space: nowrap;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

#crossfade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 45%, transparent 30%, rgba(18,12,8,.36) 100%);
}

/* ---------------- INTRO ---------------- */
#intro {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  background:
    radial-gradient(ellipse at 50% 38%, rgba(120,70,40,.22) 0, transparent 55%),
    linear-gradient(180deg, #1a130f 0%, #251a13 55%, #140f0c 100%);
  transition: opacity 1.2s ease, visibility 1.2s;
}
#intro.leaving { opacity: 0; visibility: hidden; }
#intro::before {
  content: "";
  position: absolute;
  inset: 22px;
  border: 1px solid rgba(216,201,168,.22);
  pointer-events: none;
}
#intro::after {
  content: "";
  position: absolute;
  inset: 29px;
  border: 1px solid rgba(216,201,168,.09);
  pointer-events: none;
}
.intro-ink {
  position: absolute;
  width: min(78vw, 900px);
  height: min(78vw, 900px);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(168,55,43,.15) 0 2%, transparent 2.6%),
    radial-gradient(circle at 50% 50%, transparent 0 28%, rgba(216,201,168,.035) 28.2% 28.5%, transparent 28.8%),
    radial-gradient(circle at 50% 50%, transparent 0 46%, rgba(216,201,168,.025) 46.2% 46.5%, transparent 46.8%),
    radial-gradient(circle at 50% 50%, rgba(168,55,43,.08) 0, transparent 62%);
  filter: blur(.3px);
}
.intro-inner {
  position: relative;
  text-align: center;
  padding: 42px 56px 38px;
  max-width: 720px;
  background:
    linear-gradient(180deg, rgba(233,223,199,.055), rgba(233,223,199,.015));
  border-top: 1px solid rgba(216,201,168,.26);
  border-bottom: 1px solid rgba(216,201,168,.26);
}
.seal {
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translateX(-50%) rotate(-1.5deg);
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  background: var(--cinnabar);
  color: #f0e1c4;
  font-size: 17px;
  letter-spacing: .02em;
  border: 1px solid #681a14;
  box-shadow: inset 0 0 0 4px rgba(240,225,196,.15), 0 7px 26px rgba(0,0,0,.4);
}
.seal.small { position: static; transform: rotate(-2deg); margin: 0 auto 14px; width: 42px; height: 42px; font-size: 15px; }
.eyebrow {
  color: #a89070;
  font-size: 11px;
  letter-spacing: .46em;
  margin: 12px 0 14px;
}
#intro h1 {
  color: #e7d9ba;
  font-size: clamp(54px, 8vw, 92px);
  font-weight: 400;
  letter-spacing: .12em;
  line-height: 1;
  text-shadow: 0 3px 26px rgba(0,0,0,.45);
}
#intro h1 span { color: var(--cinnabar-bright); font-size: .55em; vertical-align: .12em; padding: 0 .08em; }
.lede {
  margin: 26px auto 0;
  color: #b5a182;
  font-size: 14px;
  line-height: 2.15;
  letter-spacing: .16em;
}
.rule {
  width: 150px;
  height: 1px;
  margin: 26px auto 22px;
  background: linear-gradient(90deg, transparent, rgba(216,201,168,.55), transparent);
  position: relative;
}
.rule::after {
  content: "◆";
  position: absolute;
  left: 50%;
  top: -8px;
  transform: translateX(-50%);
  font-size: 8px;
  color: #9e3c2d;
}
.controls {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-bottom: 30px;
}
.controls div { display: flex; flex-direction: column; gap: 4px; }
.controls b {
  color: #d8c9a8;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .14em;
}
.controls span { color: #776650; font-size: 10px; letter-spacing: .2em; }
#enter {
  position: relative;
  padding: 14px 46px;
  background: transparent;
  color: #eadfc6;
  border: 1px solid rgba(216,201,168,.55);
  font-family: inherit;
  font-size: 15px;
  letter-spacing: .38em;
  cursor: pointer;
  transition: background .35s, color .35s, border-color .35s, letter-spacing .35s;
  overflow: hidden;
}
#enter::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--cinnabar);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s cubic-bezier(.2,.8,.2,1);
  z-index: -1;
}
#enter:hover {
  border-color: var(--cinnabar-bright);
  color: #f6ecd6;
  letter-spacing: .46em;
}
#enter:hover::before { transform: scaleX(1); }
.footnote {
  margin-top: 22px;
  color: #675747;
  font-size: 10px;
  letter-spacing: .26em;
}
#intro button, #pause button { pointer-events: auto; }

/* ---------------- PAUSE ---------------- */
#pause {
  position: fixed;
  inset: 0;
  z-index: 25;
  display: grid;
  place-items: center;
  background: rgba(16,11,8,.72);
  backdrop-filter: blur(3px);
}
.pause-card {
  width: min(88vw, 420px);
  padding: 34px 40px 30px;
  text-align: center;
  background: linear-gradient(180deg, #e9dfc7, #d7c7a5);
  border: 1px solid #2b2017;
  box-shadow: 0 0 0 7px rgba(233,223,199,.08), 0 24px 70px rgba(0,0,0,.55);
  position: relative;
}
.pause-card::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(43,32,23,.25);
  pointer-events: none;
}
.pause-card h2 { font-size: 34px; letter-spacing: .32em; font-weight: 400; margin-bottom: 12px; }
.pause-card p { font-size: 12px; line-height: 1.9; letter-spacing: .14em; color: #5a4634; margin-bottom: 24px; }
.pause-card button {
  padding: 11px 32px;
  border: 1px solid #3e2e20;
  background: #a8372b;
  color: #f1e5ca;
  font-family: inherit;
  font-size: 13px;
  letter-spacing: .3em;
  cursor: pointer;
}
.pause-card button:hover { background: #bd4633; }
.pause-card span { display: block; margin-top: 16px; font-size: 10px; letter-spacing: .2em; color: #715d47; }

/* ---------------- MAP ---------------- */
#map {
  position: fixed;
  inset: 0;
  z-index: 22;
  display: grid;
  place-items: center;
  background: rgba(16,11,8,.62);
  backdrop-filter: blur(2px);
}
.map-sheet {
  width: min(90vw, 620px);
  max-height: 92vh;
  padding: 24px 30px 20px;
  text-align: center;
  background:
    repeating-linear-gradient(92deg, rgba(96,71,39,.035) 0 2px, transparent 2px 5px),
    linear-gradient(160deg, #e8dec4, #d4c19d);
  border: 1px solid #2a1f15;
  box-shadow: 0 0 0 8px rgba(233,223,199,.07), 0 30px 80px rgba(0,0,0,.55);
  position: relative;
}
.map-sheet::before { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(42,31,21,.22); pointer-events: none; }
.map-sheet h3 { font-size: 17px; font-weight: 400; letter-spacing: .3em; margin-bottom: 8px; }
#map-canvas { display: block; width: 100%; max-height: calc(92vh - 150px); }
.map-sheet p { font-size: 11px; letter-spacing: .18em; color: #5d4935; margin-top: 2px; }
.map-hint { display: block; margin-top: 6px; font-size: 9px; letter-spacing: .24em; color: #816a50; }

/* ---------------- ATMOSPHERE PANEL ---------------- */
#atmos {
  position: fixed;
  inset: 0;
  z-index: 23;
  display: grid;
  place-items: center;
  background: rgba(16,11,8,.56);
  backdrop-filter: blur(2px);
}
.atmos-card {
  width: min(92vw, 430px);
  padding: 22px 26px 20px;
  background:
    repeating-linear-gradient(92deg, rgba(96,71,39,.035) 0 2px, transparent 2px 5px),
    linear-gradient(160deg, #e8dec4, #d4c19d);
  border: 1px solid #2a1f15;
  box-shadow: 0 0 0 8px rgba(233,223,199,.07), 0 30px 80px rgba(0,0,0,.55);
  position: relative;
}
.atmos-card::before { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(42,31,21,.22); pointer-events: none; }
.atmos-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.atmos-head h3 { font-size: 17px; font-weight: 400; letter-spacing: .28em; }
.atmos-head span { font-size: 9px; letter-spacing: .18em; color: #816a50; }
.atmos-times { display: flex; gap: 8px; margin-bottom: 15px; }
.atmos-times button {
  flex: 1;
  padding: 7px 0;
  border: 1px solid rgba(62,46,32,.45);
  background: rgba(255,250,236,.28);
  color: #4d3a29;
  font-family: inherit;
  font-size: 12px;
  letter-spacing: .2em;
  cursor: pointer;
}
.atmos-times button.active { background: var(--cinnabar); color: #f2e6ca; border-color: #6d1f18; }
.atmos-card label {
  display: grid;
  grid-template-columns: 38px 1fr 44px;
  align-items: center;
  gap: 10px;
  margin: 8px 0;
  font-size: 12px;
  letter-spacing: .14em;
  color: #4a3828;
}
.atmos-card label b { font-family: Georgia, serif; font-weight: 400; font-size: 10px; text-align: right; color: #6d563d; }
.atmos-card input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 3px;
  background: rgba(69,51,34,.35);
  outline: none;
  cursor: pointer;
}
.atmos-card input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--cinnabar);
  border: 1px solid #651d16;
  box-shadow: 0 0 0 3px rgba(168,55,43,.12);
}
.atmos-card input[type=range]::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--cinnabar);
  border: 1px solid #651d16;
}
.atmos-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; border-top: 1px solid rgba(69,51,34,.2); padding-top: 13px; }
.atmos-actions button {
  padding: 7px 14px;
  border: 1px solid #3e2e20;
  background: transparent;
  color: #4a3624;
  font-family: inherit;
  font-size: 10px;
  letter-spacing: .16em;
  cursor: pointer;
}
.atmos-actions button:hover { background: var(--cinnabar); color: #f2e6ca; }
.atmos-actions span { font-size: 9px; letter-spacing: .12em; color: #816a50; }

/* ---------------- LOADING ---------------- */
#loading {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  background: #17120e;
  transition: opacity .9s ease, visibility .9s;
}
#loading.done { opacity: 0; visibility: hidden; }
.load-ink { text-align: center; }
.load-seal {
  width: 66px;
  height: 66px;
  margin: 0 auto 24px;
  display: grid;
  place-items: center;
  background: var(--cinnabar);
  color: #f1e2c6;
  font-size: 36px;
  border: 1px solid #6d1f18;
  box-shadow: inset 0 0 0 5px rgba(241,226,198,.14);
  animation: sealPulse 1.8s ease-in-out infinite;
}
@keyframes sealPulse {
  0%, 100% { transform: rotate(-2deg) scale(1); opacity: .82; }
  50% { transform: rotate(1deg) scale(1.04); opacity: 1; }
}
#loading p { color: #a08a69; font-size: 12px; letter-spacing: .22em; }
.load-bar {
  width: 210px;
  height: 2px;
  margin: 22px auto 0;
  background: rgba(216,201,168,.15);
  overflow: hidden;
}
.load-bar i {
  display: block;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--cinnabar-bright), transparent);
  animation: barSlide 1.2s ease-in-out infinite;
}
@keyframes barSlide {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(360%); }
}

@media (max-width: 760px) {
  #location { top: 14px; left: 14px; min-width: 0; padding: 9px 16px 9px 9px; }
  #location #loc-seal { width: 34px; height: 38px; font-size: 20px; }
  #location h2 { font-size: 16px; }
  #location p { font-size: 10px; }
  #compass { top: 14px; right: 14px; width: 84px; height: 84px; }
  #time-chip { display: none; }
  #hint { gap: 10px; font-size: 10px; padding: 7px 12px; bottom: 14px; }
  #hint span:nth-child(3), #hint span:nth-child(5) { display: none; }
  .intro-inner { padding: 34px 24px 28px; }
  .controls { gap: 18px; }
  #intro h1 { font-size: 52px; }
}

.catalog-link{display:block;width:fit-content;margin:14px auto;color:#803a2e;font-size:14px;text-underline-offset:4px}