*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: var(--base-font-size, 16px); }
body {
  --base-font-family: Georgia, 'Times New Roman', serif;
  font-family: var(--base-font-family);
  background: #0d0d0d;
  color: #d4d4d4;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  padding: 1rem;
}
@media (max-width: 600px) {
  body { padding: 0.5rem; }
}
#game { max-width: 1200px; width: 100%; }

#stats {
  background: #1a1a1a; border: 1px solid #333; border-radius: 6px;
  padding: 0.5rem; margin-bottom: 1rem;
  display: flex; flex-wrap: wrap; gap: 0.3rem;
}
#stats .menu-btn {
  background: #2a2a2a; color: #aaa; border: 1px solid #444;
  padding: 0.35rem 0.9rem; font-size: 0.82rem;
  font-family: var(--base-font-family);
  transition: background 0.15s, color 0.15s;
}
#stats .menu-btn:hover { background: #3a3a3a; color: #ddd; }
#stats .menu-btn.active {
  background: #8b6914; color: #0d0d0d; border-color: #d4a017;
  font-weight: 600;
}
#stats .sys-btn { font-size: 0.78rem; padding: 0.3rem 0.6rem; }

#main {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#story {
  line-height: 1.7; font-size: 0.95rem;
  min-height: 40px;
}
#story h1 {
  font-size: 1.4rem; color: #e8e0d0; margin-bottom: 0.6rem;
  font-weight: normal; border-bottom: 1px solid #2a2a2a; padding-bottom: 0.4rem;
}
#story h2 {
  font-size: 1.25rem; color: #e0d8c8; margin-bottom: 0.5rem;
  font-weight: normal; border-bottom: 1px solid #2a2a2a; padding-bottom: 0.3rem;
}
#story h3 {
  font-size: 1.15rem; color: #d8d0c0; margin-bottom: 0.4rem;
  font-weight: normal;
}
#story h4 {
  font-size: 1.05rem; color: #d0c8b8; margin-bottom: 0.3rem;
  font-weight: 600;
}
#story h5, #story h6 {
  font-size: 0.95rem; color: #c8c0b0; margin-bottom: 0.3rem;
  font-weight: 600;
}
#story p { margin-bottom: 0.5rem; }
#story .thread { color: #c8b88a; }
#story .textbox {
  display: flex; align-items: center; gap: 0.6rem;
  margin: 0.7rem 0; padding: 0.4rem 0.6rem;
  background: #161616; border: 1px solid #333; border-radius: 4px;
  cursor: text; font-size: 0.95rem;
}
.story-img { max-width: 100%; height: auto; margin: 0.7rem 0; border-radius: 4px; }

#story .textbox span { color: #b8a878; white-space: nowrap; }
#story .textbox input {
  flex: 1; background: #0d0d0d; color: #d4d4d4;
  border: 1px solid #444; border-radius: 3px;
  padding: 0.35rem 0.5rem; font-family: var(--base-font-family); font-size: 0.95rem;
  outline: none; transition: border-color 0.15s;
}
#story .textbox input:focus { border-color: #b8860b; }

#sidebar { min-width: 0; }
#choices { margin-bottom: 0.6rem; }
#choices label {
  display: flex; align-items: baseline; gap: 0.5rem;
  padding: 0.45rem 0.6rem; border-radius: 4px;
  cursor: pointer; transition: background 0.15s; font-size: 0.92rem;
}
#choices label:hover { background: #1f1f1f; }
#choices .choice-btn {
  display: block; width: 100%; margin: 0.3rem 0;
  background: #2a2a2a; color: #d4d4d4; border: 1px solid #555;
  padding: 0.45rem 0.8rem; font-size: 0.9rem;
  font-family: var(--base-font-family);
  border-radius: 4px; cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
#choices .choice-btn:hover { background: #3a3a3a; border-color: #b8860b; color: #e8e0d0; }
#choices input[type="radio"] {
  appearance: none; -webkit-appearance: none;
  width: 16px; height: 16px; border: 2px solid #666;
  border-radius: 50%; flex-shrink: 0; margin-top: 0.2rem;
  position: relative; transition: border-color 0.15s;
}
#choices input[type="radio"]:checked { border-color: #f0c040; }
#choices input[type="radio"]:checked::after {
  content: ''; position: absolute; inset: 2px;
  background: #f0c040; border-radius: 50%;
}

#btn-area {
  text-align: right;
}
#btn-area button {
  background: #b8860b; color: #0d0d0d; border: none;
  padding: 0.6rem 2rem; font-size: 1rem;
  font-family: var(--base-font-family);
  font-weight: 600; border-radius: 4px;
  cursor: pointer; transition: background 0.15s, transform 0.1s;
}
#btn-area button:hover { background: #d4a017; }
#btn-area button:active { transform: scale(0.97); }
#btn-area button:disabled {
  background: #444; color: #777; cursor: not-allowed; transform: none;
}

/* Page transition animation */
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
#story.animating > * {
  animation: fadeSlideIn 0.25s ease-out both;
}
#story.animating > *:nth-child(1) { animation-delay: 0s; }
#story.animating > *:nth-child(2) { animation-delay: 0.04s; }
#story.animating > *:nth-child(3) { animation-delay: 0.08s; }
#story.animating > *:nth-child(4) { animation-delay: 0.12s; }
#story.animating > *:nth-child(5) { animation-delay: 0.16s; }

/* Settings UI */
.setting-row {
  display: flex; align-items: center; gap: 0.5rem;
  margin: 0.6rem 0; padding: 0.4rem 0;
  color: #d4d4d4; font-size: 0.95rem;
}
.setting-row select, .setting-row input[type="text"] {
  background: #1a1a1a; color: #d4d4d4; border: 1px solid #444;
  padding: 0.3rem 0.5rem; border-radius: 3px; font-size: 0.9rem;
  font-family: var(--base-font-family);
}
.setting-row input[type="checkbox"] { width: 16px; height: 16px; }

/* Light mode overrides */
body.light-mode { background: #f5f3f0; color: #333; }
body.light-mode #sidebar { color: #333; }
body.light-mode #story h1,
body.light-mode #story h2,
body.light-mode #story h3,
body.light-mode #story h4,
body.light-mode #story h5,
body.light-mode #story h6 { color: #333; border-color: #ccc; }
body.light-mode #story .thread { color: #5a4e3a; }
body.light-mode #choices label { color: #333; }
body.light-mode #choices input[type="radio"] { border-color: #999; }
body.light-mode #choices input[type="radio"]:checked { border-color: #b8860b; }
body.light-mode #choices input[type="radio"]:checked::after { background: #b8860b; }
body.light-mode #btn-area button { background: #b8860b; color: #fff; }
body.light-mode #btn-area button:disabled { background: #ccc; color: #888; }
body.light-mode .setting-row { color: #333; }
body.light-mode #stats { background: #f0ede8; border-color: #ccc; }
body.light-mode #stats .menu-btn { background: #e8e4dc; color: #444; border-color: #bbb; }
body.light-mode #stats .menu-btn:hover { background: #ddd8ce; }
body.light-mode #stats .menu-btn.active { background: #b8860b; color: #fff; border-color: #b8860b; }
body.light-mode #story p { color: #333; }
body.light-mode #story .textbox { background: #f5f3f0; border-color: #ccc; }
body.light-mode #story .textbox input { background: #fff; color: #222; border-color: #bbb; }
body.light-mode #story .textbox input:focus { border-color: #b8860b; }
body.light-mode #choices label:hover { background: #f0ede8; }
body.light-mode #choices .choice-btn { background: #e8e4dc; color: #444; border-color: #bbb; }
body.light-mode #choices .choice-btn:hover { background: #ddd8ce; border-color: #b8860b; color: #222; }
body.light-mode .setting-row select,
body.light-mode .setting-row input { background: #fff; color: #222; border-color: #bbb; }