/* ================================================================
   异乡人 · 垂直切片 — UI 层
   原则：反馈长在世界里，UI 越少越好；出现的每一处文字都要有纸感。
   ================================================================ */

@font-face { font-family: '__fallback'; src: local('Songti SC'); }

:root {
  --paper: #ede8db;
  --paper-dim: #b9b2a2;
  --ink: #17191c;
  --seal: #b0563e;          /* 印章红，唯一强调色 */
  --scrim: rgba(10, 12, 15, 0.0);
  --serif: 'Noto Serif SC', 'Songti SC', 'STSong', 'SimSun', serif;
}

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

html, body {
  width: 100%; height: 100%;
  background: #0b0d10;
  overflow: hidden;
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-user-select: none;
}

#stage {
  position: absolute;
  /* set by JS to keep 16:9, centered */
  background: #0b0d10;
  overflow: hidden;
}

#cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ---------------- letterbox ---------------- */
#bars { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
#bars .bar {
  position: absolute; left: 0; right: 0; height: 0;
  background: #060708;
  transition: height 1.1s cubic-bezier(.6,0,.3,1);
}
#bars .bar.top { top: 0; }
#bars .bar.bot { bottom: 0; }
#bars.on .bar { height: 7.4%; }

/* ---------------- vignette ---------------- */
#vignette {
  position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: radial-gradient(ellipse at 50% 42%,
    rgba(0,0,0,0) 52%, rgba(4,6,8,0.34) 88%, rgba(2,3,4,0.55) 100%);
}

/* ---------------- gaze / 凝视文本 ---------------- */
#gaze {
  position: absolute; left: 50%; top: 34%;
  transform: translate(-50%, -50%);
  width: 72%;
  text-align: center;
  color: var(--paper);
  font-size: clamp(15px, 2.05vmin, 22px);
  line-height: 2.15;
  letter-spacing: 0.16em;
  text-shadow: 0 1px 14px rgba(0,0,0,0.85), 0 0 3px rgba(0,0,0,0.6);
  opacity: 0;
  transition: opacity 0.9s ease;
  pointer-events: none;
  z-index: 6;
  white-space: pre-line;
}
#gaze.on { opacity: 1; }

/* ---------------- dialogue ---------------- */
#dlg {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 31%;
  z-index: 7;
  display: flex; align-items: flex-end; justify-content: center;
  background: linear-gradient(to top, rgba(6,8,10,0.88) 0%, rgba(6,8,10,0.55) 55%, rgba(6,8,10,0) 100%);
  opacity: 0; pointer-events: none;
  transition: opacity 0.45s ease;
}
#dlg.on { opacity: 1; pointer-events: auto; }
#dlg-inner {
  width: min(760px, 82%);
  padding-bottom: 4.6%;
  position: relative;
}
#speaker {
  color: var(--seal);
  font-size: clamp(13px, 1.75vmin, 18px);
  letter-spacing: 0.42em;
  margin-bottom: 0.7em;
  opacity: 0.95;
  height: 1.3em;
}
#line {
  color: var(--paper);
  font-size: clamp(17px, 2.5vmin, 26px);
  line-height: 1.95;
  letter-spacing: 0.12em;
  min-height: 2.2em;
  text-shadow: 0 1px 10px rgba(0,0,0,0.7);
}
#line .narr { color: var(--paper-dim); font-size: 0.88em; letter-spacing: 0.15em; }
#adv {
  position: absolute; right: 0; bottom: 4.6%;
  color: var(--paper-dim);
  font-size: 15px;
  animation: bob 1.5s ease-in-out infinite;
  opacity: 0; transition: opacity 0.3s;
}
#adv.on { opacity: 0.75; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* ---------------- choices ---------------- */
#choices {
  position: absolute; left: 50%; bottom: 12%;
  transform: translateX(-50%);
  z-index: 8;
  display: none;
  flex-direction: column;
  gap: clamp(8px, 1.3vmin, 14px);
  align-items: center;
  padding: 3.2em 5em;
  background: radial-gradient(ellipse at center,
    rgba(7,9,11,0.78) 0%, rgba(7,9,11,0.52) 55%, rgba(7,9,11,0) 78%);
}
#choices.on { display: flex; }
.choice {
  color: var(--paper);
  font-size: clamp(15px, 2.15vmin, 22px);
  letter-spacing: 0.22em;
  padding: 0.55em 2.2em;
  cursor: pointer;
  position: relative;
  opacity: 0;
  transform: translateY(8px);
  animation: chIn 0.5s ease forwards;
  transition: color 0.25s, letter-spacing 0.25s;
  text-shadow: 0 1px 8px rgba(0,0,0,0.8);
  white-space: nowrap;
}
.choice::before, .choice::after {
  content: ''; position: absolute; top: 50%; width: 0em; height: 1px;
  background: var(--seal); opacity: 0; transition: all 0.3s ease;
}
.choice::before { left: 0.4em; }
.choice::after  { right: 0.4em; }
.choice:hover, .choice.kbd {
  color: #fff; letter-spacing: 0.3em;
}
.choice:hover::before, .choice:hover::after,
.choice.kbd::before, .choice.kbd::after { width: 1.1em; opacity: 0.9; }
@keyframes chIn { to { opacity: 1; transform: translateY(0); } }

/* ---------------- name input ---------------- */
#namebox {
  position: absolute; left: 50%; bottom: 15%;
  transform: translateX(-50%);
  z-index: 9;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
#namebox.on { display: flex; }
#name-prompt { color: var(--paper-dim); font-size: clamp(13px,1.8vmin,17px); letter-spacing: 0.3em; }
#name-input {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(237,232,219,0.45);
  color: var(--paper);
  font-family: var(--serif);
  font-size: clamp(20px, 3vmin, 30px);
  letter-spacing: 0.3em;
  text-align: center;
  width: 7.5em;
  padding: 0.2em 0;
  outline: none;
  caret-color: var(--seal);
}
#name-input:focus { border-bottom-color: rgba(237,232,219,0.85); }
#name-btns { display: flex; gap: 3.2em; margin-top: 0.4em; }
.nbtn {
  color: var(--paper);
  font-size: clamp(15px, 2.1vmin, 21px);
  letter-spacing: 0.35em;
  cursor: pointer;
  padding: 0.35em 1.1em;
  transition: color 0.25s;
}
.nbtn:hover { color: #fff; }
.nbtn.ghost { color: var(--paper-dim); }
.nbtn.ghost:hover { color: var(--paper); }

/* ---------------- hint ---------------- */
#hintbar {
  position: absolute; left: 50%; bottom: 7.5%;
  transform: translateX(-50%);
  z-index: 5;
  color: rgba(237,232,219,0.72);
  font-size: clamp(13px, 1.7vmin, 17px);
  letter-spacing: 0.3em;
  text-shadow: 0 1px 6px rgba(0,0,0,0.9);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
  white-space: nowrap;
}
#hintbar.on { opacity: 1; }
#hintbar em { font-style: normal; color: rgba(237,232,219,0.45); font-size: 0.82em; margin-left: 1.2em; }

#movehint {
  position: absolute; left: 50%; top: 8%;
  transform: translateX(-50%);
  color: rgba(237,232,219,0.5);
  font-size: clamp(12px, 1.6vmin, 16px);
  letter-spacing: 0.32em;
  z-index: 5;
  opacity: 0;
  transition: opacity 1.2s;
  pointer-events: none;
  text-shadow: 0 1px 6px rgba(0,0,0,0.9);
}
#movehint.on { opacity: 1; }

/* ---------------- day card ---------------- */
#card {
  position: absolute; inset: 0;
  background: #060708;
  z-index: 20;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.15s ease;
}
#card.on { opacity: 1; pointer-events: auto; }
#card-text {
  color: var(--paper);
  font-size: clamp(20px, 3.4vmin, 34px);
  letter-spacing: 0.75em;
  text-indent: 0.75em;
  opacity: 0;
  transition: opacity 1.6s ease;
  white-space: pre-line;
  text-align: center;
  line-height: 2.4;
}
#card.on #card-text { opacity: 0.92; }
#card-text .small { font-size: 0.55em; letter-spacing: 0.4em; color: var(--paper-dim); }

/* ---------------- title ---------------- */
#title {
  position: absolute; inset: 0;
  z-index: 30;
  background:
    radial-gradient(ellipse at 50% 120%, rgba(58,70,74,0.5), rgba(0,0,0,0) 60%),
    linear-gradient(to bottom, #11161a 0%, #1b2327 46%, #232b2c 72%, #171d1f 100%);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 2.2s ease;
}
#title.off { opacity: 0; pointer-events: none; }
#title-fog {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 30% at 30% 60%, rgba(190,200,195,0.10), transparent 70%),
    radial-gradient(ellipse 55% 26% at 75% 45%, rgba(190,200,195,0.08), transparent 70%),
    radial-gradient(ellipse 70% 32% at 50% 80%, rgba(190,200,195,0.09), transparent 70%);
  animation: fogDrift 26s ease-in-out infinite alternate;
}
@keyframes fogDrift {
  from { transform: translateX(-2.5%) scale(1.02); }
  to   { transform: translateX(2.5%)  scale(1.06); }
}
#title-inner { text-align: center; position: relative; z-index: 2; }
#title-name {
  color: var(--paper);
  font-size: clamp(46px, 10vmin, 96px);
  letter-spacing: 0.55em;
  text-indent: 0.55em;
  font-weight: 600;
  text-shadow: 0 2px 30px rgba(0,0,0,0.6);
  opacity: 0; animation: tIn 2.4s ease 0.4s forwards;
}
#title-sub {
  color: var(--paper-dim);
  font-size: clamp(14px, 2.2vmin, 20px);
  letter-spacing: 0.6em;
  text-indent: 0.6em;
  margin-top: 2.2em;
  opacity: 0; animation: tIn 2.4s ease 1.3s forwards;
}
#title-return {
  color: rgba(176,86,62,0.85);
  font-size: clamp(13px, 1.9vmin, 17px);
  letter-spacing: 0.4em;
  margin-top: 1.6em;
  height: 1.4em;
  opacity: 0; animation: tIn 2.4s ease 1.9s forwards;
}
#title-start {
  display: inline-block;
  margin-top: 3.4em;
  color: var(--paper);
  font-size: clamp(17px, 2.6vmin, 25px);
  letter-spacing: 0.9em;
  text-indent: 0.9em;
  padding: 0.7em 2.4em;
  border: 1px solid rgba(237,232,219,0.28);
  cursor: pointer;
  transition: border-color 0.4s, color 0.4s, box-shadow 0.4s;
  opacity: 0; animation: tIn 2.4s ease 2.4s forwards;
}
#title-start:hover {
  border-color: rgba(237,232,219,0.7);
  color: #fff;
  box-shadow: 0 0 26px rgba(237,232,219,0.08) inset;
}
#title-tip {
  color: rgba(185,178,162,0.5);
  font-size: clamp(11px, 1.5vmin, 14px);
  letter-spacing: 0.35em;
  margin-top: 2.6em;
  opacity: 0; animation: tIn 2.4s ease 3.1s forwards;
}
@keyframes tIn { to { opacity: 1; } }

/* ---------------- epilogue ---------------- */
#epi {
  position: absolute; inset: 0;
  z-index: 25;
  background: #08090b;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 2.4s ease;
  overflow: hidden;
}
#epi.on { opacity: 1; pointer-events: auto; }
#epi-inner { text-align: center; width: min(680px, 86%); }
#epi-lines {
  color: var(--paper-dim);
  font-size: clamp(14px, 2vmin, 19px);
  line-height: 2.9;
  letter-spacing: 0.22em;
}
#epi-lines div { opacity: 0; transition: opacity 1.8s ease; }
#epi-lines div.on { opacity: 1; }
#epi-addr {
  color: var(--paper);
  font-size: clamp(19px, 3vmin, 28px);
  letter-spacing: 0.4em;
  margin-top: 2.2em;
  opacity: 0; transition: opacity 2s ease;
}
#epi-addr.on { opacity: 1; }
#epi-addr b { color: var(--seal); font-weight: 600; }
#epi-end {
  color: rgba(185,178,162,0.6);
  font-size: clamp(12px, 1.6vmin, 15px);
  letter-spacing: 0.5em;
  margin-top: 3em;
  opacity: 0; transition: opacity 2s ease;
}
#epi-end.on { opacity: 1; }
#epi-restart {
  display: inline-block;
  margin-top: 2.4em;
  color: var(--paper-dim);
  font-size: clamp(13px, 1.9vmin, 17px);
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  padding: 0.55em 1.8em;
  border: 1px solid rgba(237,232,219,0.18);
  cursor: pointer;
  opacity: 0;
  transition: opacity 2s ease, color 0.3s, border-color 0.3s;
}
#epi-restart.on { opacity: 1; }
#epi-restart:hover { color: var(--paper); border-color: rgba(237,232,219,0.5); }

/* ---------------- mute ---------------- */
#mute {
  position: absolute; top: 3.2%; right: 2.6%;
  z-index: 40;
  color: rgba(237,232,219,0.4);
  font-size: clamp(13px, 1.8vmin, 17px);
  width: 2.1em; height: 2.1em;
  border: 1px solid rgba(237,232,219,0.22);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: color 0.3s, border-color 0.3s;
}
#mute:hover { color: rgba(237,232,219,0.85); border-color: rgba(237,232,219,0.5); }
#mute.off { text-decoration: line-through; opacity: 0.55; }