* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; background: #050403; }
body { font-family: Georgia, 'Times New Roman', serif; color: #e8dcc0; }
#scene { position: fixed; inset: 0; display: block; }
.hidden { display: none !important; }

.overlay {
  position: fixed; inset: 0; z-index: 10;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5, 4, 3, 0.75);
}
.panel {
  background: #14100b;
  border: 1px solid #5a4a30;
  border-radius: 6px;
  padding: 28px 34px;
  box-shadow: 0 0 60px rgba(0,0,0,0.8);
  max-width: 720px;
  width: min(92vw, 720px);
  max-height: 92vh;
  overflow-y: auto;
}

/* start screen */
.start-panel { text-align: center; }
.start-panel h1 { font-size: 2.2em; color: #f0dfb0; letter-spacing: 0.04em; margin-bottom: 12px; }
.tagline { color: #d8b968; font-size: 1.12em; letter-spacing: 0.03em; margin-bottom: 6px; }
.progress { color: #6f6146; font-size: 0.85em; margin-bottom: 18px; }
.progress:empty { display: none; }
.quote { font-style: italic; color: #a89670; margin-bottom: 24px; line-height: 1.5; }
#name-input {
  display: block; margin: 0 auto 14px; padding: 10px 14px; width: 280px;
  background: #0b0906; border: 1px solid #5a4a30; color: #e8dcc0;
  font-family: inherit; font-size: 1em; text-align: center; border-radius: 4px;
}
button {
  background: #3a2d18; border: 1px solid #7a6540; color: #f0dfb0;
  padding: 9px 20px; font-family: inherit; font-size: 1em;
  cursor: pointer; border-radius: 4px;
}
button:hover { background: #52401f; }
#btn-enter { font-size: 1.15em; padding: 12px 34px; }
.controls-list {
  margin-top: 26px; display: flex; flex-wrap: wrap; gap: 8px 22px;
  justify-content: center; color: #8f7d5c; font-size: 0.9em;
}
.controls-list b { color: #cdb98a; }

/* HUD */
#hud > div { position: fixed; z-index: 5; text-shadow: 0 1px 3px #000; }
#hud-addr { top: 14px; left: 18px; color: #cdb98a; font-size: 0.95em; }
#hud-players { top: 14px; right: 18px; color: #8f7d5c; font-size: 0.95em; }
#hud-hint {
  bottom: 40px; left: 50%; transform: translateX(-50%);
  color: #e8dcc0; font-size: 1.05em; background: rgba(5,4,3,0.55);
  padding: 6px 16px; border-radius: 4px; white-space: nowrap;
}
#hud-hint:empty { display: none; }
#crosshair {
  top: 50%; left: 50%; width: 4px; height: 4px; border-radius: 50%;
  background: rgba(240, 223, 176, 0.8); transform: translate(-50%, -50%);
}

/* reader */
.book-panel { max-width: 860px; width: min(94vw, 860px); }
.book-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.book-head h2 { color: #f0dfb0; font-style: italic; font-weight: normal; }
.close { padding: 4px 10px; }
.dim { color: #8f7d5c; font-size: 0.85em; margin: 6px 0 12px; }
#page-text {
  font-family: 'Courier New', monospace; font-size: 11.5px; line-height: 1.35;
  color: #d8c9a3; background: #0b0906; border: 1px solid #3a2f1d;
  padding: 14px; overflow-x: auto; white-space: pre; border-radius: 3px;
}
#page-text mark { background: #7a5c14; color: #fff2c8; }
.book-foot {
  display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap;
}
#page-num { color: #a89670; }
#page-input {
  width: 64px; background: #0b0906; border: 1px solid #5a4a30; color: #e8dcc0;
  padding: 6px; font-family: inherit; border-radius: 4px;
}

/* search */
.search-panel textarea {
  width: 100%; background: #0b0906; border: 1px solid #5a4a30; color: #e8dcc0;
  font-family: 'Courier New', monospace; font-size: 0.95em; padding: 10px;
  border-radius: 4px; resize: vertical; margin-bottom: 10px;
}
.modes { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; color: #a89670; font-size: 0.9em; }
#search-result { margin-top: 16px; line-height: 1.6; }
#search-result .addr { color: #cdb98a; margin: 8px 0 12px; word-break: break-all; }
#search-result button { margin-right: 10px; margin-top: 4px; }
.search-panel hr { border: none; border-top: 1px solid #3a2f1d; margin: 18px 0 4px; }
.goto-row { display: flex; gap: 10px; }
.goto-row input {
  flex: 1; background: #0b0906; border: 1px solid #5a4a30; color: #e8dcc0;
  padding: 8px 10px; font-family: 'Courier New', monospace; border-radius: 4px;
}

/* archive */
.archive-panel { max-width: 760px; }
.tabs { display: flex; gap: 8px; margin: 12px 0 16px; }
.tab { background: #241b0e; border-color: #4a3c24; color: #a89670; }
.tab.active { background: #3a2d18; border-color: #7a6540; color: #f0dfb0; }
.entry-list { max-height: 52vh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.entry {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: #0b0906; border: 1px solid #2e2515; border-radius: 4px;
  padding: 10px 14px;
}
.entry b { font-style: italic; font-weight: normal; color: #e8dcc0; }
.entry .dim { margin: 2px 0 0; word-break: break-all; }
.entry button { white-space: nowrap; }

/* fade for travel */
#fade {
  position: fixed; inset: 0; z-index: 30; background: #000;
  opacity: 0; pointer-events: none; transition: opacity 0.38s ease;
}
#fade.on { opacity: 1; }

/* toast */
#toast {
  position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%);
  background: #2a2113; border: 1px solid #7a6540; color: #f0dfb0;
  padding: 8px 20px; border-radius: 4px; z-index: 20;
}