/* Project Epilogue - Mobile-First Interactive Novel Engine Styling */
:root {
  color-scheme: light;
  --bg-main: #f7f3ef;
  --bg-surface: #fffdfa;
  --bg-elevated: #f3ebe7;
  --bg-card: rgba(255, 253, 250, 0.9);
  --border-subtle: rgba(112, 88, 96, 0.18);
  --border-active: rgba(152, 95, 114, 0.48);

  --text-main: #342d31;
  --text-secondary: #4b4247;
  --text-muted: #62585d;
  --text-accent: #7f4559;
  --accent-gold: #8d5266;
  --accent-blue: #435e70;
  --accent-crimson: #8b4157;
  --accent-emerald: #435f4c;
  --accent-tea: #6e513f;
  --tint-rose: #f5e8ec;
  --tint-blue: #e9eff2;
  --tint-sage: #e8efea;
  --tint-violet: #f0e9f1;
  
  --font-serif: 'Noto Serif TC', serif;
  --font-sans: 'Noto Sans TC', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --reader-font-size: 1.125rem;
  --reader-line-height: 2.05;
}

/* 字級改由 JS 的 applyReaderFontSize() 以 px 寫入 --reader-font-size，
   這裡不再用媒體查詢硬覆寫，否則會壓掉玩家在字級控制項上的設定。 */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  width: 100%;
  min-height: 100%;
  background-color: var(--bg-main);
  color: var(--text-main);
  font-family: var(--font-sans);
  /* 必須用 clip 而非 hidden：overflow-x: hidden 會讓 overflow-y 計算成 auto，
     使 body 成為捲動容器，header 與遊戲狀態條的 position: sticky 就完全失效
     （一捲動就整條消失）。clip 同樣防止橫向溢出但不建立捲動容器。 */
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
}

body {
  display: flex;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom, 16px);
  padding-top: env(safe-area-inset-top, 0px);
  background:
    radial-gradient(circle at 10% 4%, rgba(188, 132, 149, 0.12), transparent 31rem),
    radial-gradient(circle at 92% 22%, rgba(120, 145, 128, 0.1), transparent 27rem),
    linear-gradient(180deg, #faf7f4 0%, var(--bg-main) 46%, #f4eeea 100%);
  font-size: 15px;
  line-height: 1.65;
  font-weight: 400;
}

/* 📱 手機端防 iOS Safari 聚焦自動縮放：所有輸入框至少 16px */
input, select, textarea {
  font-size: 16px !important;
}

/* 📱 手機端觸控優化 */
button, a, input, select, textarea, [role="button"] {
  touch-action: manipulation;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--text-accent);
  outline-offset: 3px;
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled,
[aria-disabled="true"] {
  cursor: not-allowed !important;
  opacity: 0.52;
  filter: saturate(0.55);
}

.form-message {
  display: none;
  min-height: 1.25rem;
  padding: 0.55rem 0.75rem;
  border-radius: 0.6rem;
  font-size: 0.75rem;
  line-height: 1.45;
}

.form-message.is-visible {
  display: block;
}

.form-message.is-error {
  color: #874358;
  background: #f9e9ee;
  border: 1px solid #ddb3bf;
}

.form-message.is-success {
  color: #526b59;
  background: #eaf3ec;
  border: 1px solid #b9cdbd;
}

#toast-container > div {
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  transition: opacity 180ms ease, transform 180ms ease;
}

#toast-container > div.toast-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.touch-target {
  min-height: 44px;
  min-width: 44px;
}

/* 📖 小說閱讀流樣式 */
.prose-tc {
  font-family: var(--font-serif);
  font-size: var(--reader-font-size);
  line-height: var(--reader-line-height);
  letter-spacing: 0.035em;
  color: var(--text-main);
}

/* 最新回合曾保留深色主題的 #d8dbe6 淺字，Tailwind CDN 動態樣式會覆蓋
   .prose-tc，導致米白背景上的正文幾乎消失。以具體節點固定高對比閱讀色。 */
#stream-prose-content {
  color: #3e363a !important;
}

.prose-tc p {
  max-width: 68ch;
  margin: 0 auto 1.35rem;
  text-indent: 2em;
  text-align: justify;
  word-break: break-word;
}

.prose-tc p:last-child {
  margin-bottom: 0.5rem;
}

/* 歷史章節略小一號並降低對比，維持「舊章節退後、當前章節在前」的層次 */
.prose-tc.is-past {
  font-size: calc(var(--reader-font-size) * 0.94);
  color: var(--text-muted);
}

/* 對話段落（以引號開頭）不縮排，讓對白與敘述在視覺上分層 */
.prose-tc p.is-dialogue {
  text-indent: 0;
  padding-left: 0.35em;
}

/* 場景分隔：用低彩度灰粉線維持閱讀節奏，不搶正文視線。 */
.prose-tc hr.scene-break {
  border: 0;
  height: 1px;
  width: 38%;
  margin: 2rem auto;
  background: linear-gradient(to right, transparent, rgba(152, 95, 114, 0.42), transparent);
}

@media (max-width: 639px) {
  .prose-tc p {
    text-align: left;
  }

  #auth-modal:focus-within {
    align-items: flex-start;
  }

  #auth-modal:focus-within > div {
    margin-top: max(1rem, env(safe-area-inset-top));
    margin-bottom: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* 彈窗滑動回彈優化 */
.modal-scroll-container {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* 捲軸美化 */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: rgba(112, 88, 96, 0.08);
}
::-webkit-scrollbar-thumb {
  background: rgba(152, 95, 114, 0.28);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(152, 95, 114, 0.5);
}

/* ──────────────────────────────────────────────────────────────────────────
   暖調編輯式介面：讓所有既有畫面與 JS 動態產生元件共享同一套視覺語言
   ────────────────────────────────────────────────────────────────────────── */
::selection {
  color: #fff;
  background: var(--accent-gold);
}

a,
button {
  transition: color 180ms ease, background-color 180ms ease,
    border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

button:not(:disabled):active,
[role="button"]:not([aria-disabled="true"]):active {
  transform: translateY(1px);
}

header {
  background: rgba(255, 253, 250, 0.9) !important;
  border-color: rgba(112, 88, 96, 0.16) !important;
  box-shadow: 0 8px 28px rgba(80, 58, 67, 0.07) !important;
}

main {
  max-width: 60rem !important;
}

.font-mono {
  letter-spacing: 0.055em;
}

.text-xs {
  font-size: 0.8125rem !important;
  line-height: 1.55 !important;
}

body [class~="text-[10px]"] {
  font-size: 0.75rem !important;
  line-height: 1.5 !important;
}

body [class~="text-[11px]"] {
  font-size: 0.78125rem !important;
  line-height: 1.5 !important;
}

.text-sm {
  line-height: 1.7 !important;
}

/* 原介面為深色設計，以下將既有文字 utility 統一映射到淺色閱讀色階。 */
body .text-white,
body .text-slate-100 { color: var(--text-main) !important; }
body .text-slate-950 { color: #292226 !important; }
body .text-slate-900 { color: var(--text-main) !important; }
body .text-slate-800 { color: #3e363a !important; }
body .text-slate-700 { color: #463d42 !important; }
body .text-slate-600 { color: #51484d !important; }
body .text-slate-200 { color: #443b40 !important; }
body .text-slate-300 { color: #51484d !important; }
body .text-slate-400 { color: #5b5156 !important; }
body .text-slate-500 { color: var(--text-muted) !important; }
body [class*="text-brand-gold"] { color: var(--text-accent) !important; }
body [class*="text-amber-1"],
body [class*="text-amber-"],
body [class*="text-yellow-"] { color: #6e513f !important; }
body [class*="text-sky-"],
body [class*="text-blue-"] { color: var(--accent-blue) !important; }
body [class*="text-emerald-"],
body [class*="text-green-"] { color: var(--accent-emerald) !important; }
body [class*="text-purple-"] { color: #6b536f !important; }
body [class*="text-rose-"],
body [class*="text-red-"] { color: var(--accent-crimson) !important; }

/* 實心按鈕保留白字，以符合 WCAG 對比需求。 */
body .bg-brand-gold.text-white,
body .bg-brand-gold.text-slate-950,
body [class*="bg-rose-6"].text-white,
body [class*="bg-red-6"].text-white,
body [class*="bg-slate-7"].text-white,
body [class*="bg-slate-8"].text-white {
  color: #fff !important;
}

body .group:hover .group-hover\:text-slate-950 { color: #fff !important; }

body .hover\:text-white:hover { color: #51474c !important; }
body .hover\:text-yellow-300:hover,
body .hover\:text-yellow-400:hover { color: #7f5261 !important; }

/* 將舊有深色資訊底轉成低彩度色塊；包含 app.js 即時生成的內容。 */
body [class*="bg-slate-8"],
body [class*="bg-slate-9"] { background-color: #eee7e3 !important; }
body [class*="bg-slate-7"] { background-color: #e5dbd6 !important; }
body [class*="bg-amber-9"] { background-color: #f5ede4 !important; }
body [class*="bg-sky-9"],
body [class*="bg-blue-9"] { background-color: var(--tint-blue) !important; }
body [class*="bg-emerald-9"],
body [class*="bg-green-9"] { background-color: var(--tint-sage) !important; }
body [class*="bg-purple-9"] { background-color: var(--tint-violet) !important; }
body [class*="bg-rose-9"],
body [class*="bg-red-9"] { background-color: var(--tint-rose) !important; }
body [class*="border-slate-"] { border-color: #d8cbc5 !important; }
body [class*="border-amber-"] { border-color: #d9c3ad !important; }
body [class*="border-sky-"],
body [class*="border-blue-"] { border-color: #bdcbd2 !important; }
body [class*="border-emerald-"],
body [class*="border-green-"] { border-color: #becdc2 !important; }
body [class*="border-purple-"] { border-color: #d2c1d4 !important; }
body [class*="border-rose-"],
body [class*="border-red-"] { border-color: #dbb9c3 !important; }

/* 彈窗遮罩維持足夠聚焦，但不再像黑幕般壓迫。 */
body [class*="bg-black/"] {
  background-color: rgba(67, 52, 59, 0.38) !important;
  backdrop-filter: blur(5px);
}

#auth-modal,
#app-dialog {
  background-color: rgba(67, 52, 59, 0.42) !important;
}

#loading-overlay {
  color: var(--text-main) !important;
  background-color: rgba(250, 247, 244, 0.93) !important;
}

/* 表單：紙白輸入區、柔和邊界與清楚焦點。 */
input,
select,
textarea {
  color: var(--text-main) !important;
  background-color: rgba(255, 255, 255, 0.88) !important;
  border-color: #d7c9c3 !important;
  border-radius: 0.75rem;
}

input::placeholder,
textarea::placeholder { color: #786e72 !important; }

input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent-gold) !important;
  box-shadow: 0 0 0 3px rgba(152, 95, 114, 0.12) !important;
  outline: none;
}

select option { color: var(--text-main); background: #fffdfa; }

.shadow-md,
.shadow-lg,
.shadow-xl,
.shadow-2xl {
  box-shadow: 0 12px 34px rgba(80, 58, 67, 0.08) !important;
}

/* 首頁：更接近書封與女性雜誌的編輯式層次。 */
#home-view > div:first-child {
  padding-top: clamp(2.4rem, 7vw, 4.7rem) !important;
  padding-bottom: clamp(2.2rem, 6vw, 4rem) !important;
  background:
    linear-gradient(135deg, rgba(255, 253, 250, 0.96), rgba(246, 233, 237, 0.72)),
    var(--bg-surface) !important;
  border-color: rgba(152, 95, 114, 0.22) !important;
  box-shadow: 0 20px 60px rgba(90, 61, 71, 0.09) !important;
}

#home-view h1 {
  color: #784458 !important;
  font-weight: 900;
  letter-spacing: 0.15em;
  text-shadow: none !important;
}

#home-view > div:first-child > p {
  color: #55494f !important;
  max-width: 42rem;
  font-style: normal;
  line-height: 1.95 !important;
}

.home-action-card,
#home-open-guide-btn,
#home-view > div:last-child {
  background: rgba(255, 253, 250, 0.82) !important;
  border-color: rgba(112, 88, 96, 0.18) !important;
  box-shadow: 0 12px 36px rgba(80, 58, 67, 0.065) !important;
}

.home-action-card {
  min-height: 10.5rem;
  padding: 1.5rem !important;
}

.home-action-card:hover,
#home-open-guide-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(152, 95, 114, 0.42) !important;
  box-shadow: 0 17px 42px rgba(80, 58, 67, 0.1) !important;
}

#home-open-guide-btn {
  background: linear-gradient(120deg, #fffdfa, #f3eaf0 50%, #f1eee8) !important;
}

.home-action-card h2 { color: #40363b !important; }
.home-action-card p { color: #5c5157 !important; }
.home-action-card.home-action-primary {
  border-color: rgba(141, 82, 102, 0.62) !important;
  background: linear-gradient(145deg, #fffdfa, #f5e8ed) !important;
  box-shadow: 0 18px 46px rgba(103, 60, 76, 0.15) !important;
}
.home-action-card.home-action-primary .home-card-cta {
  padding: 0.55rem 0.85rem;
  border-radius: 0.7rem;
  color: #fffdfa !important;
  background: #8d5266;
}

.creator-advanced-fields-collapsed .creator-advanced-field { display: none !important; }

/* 遊戲閱讀區：章節像獨立紙頁，選項則像柔和的編輯註記。 */
#gameplay-view {
  width: 100%;
  min-width: 0;
  max-width: 54rem;
  margin-right: auto;
  margin-left: auto;
}

#gameplay-view > .sticky,
#server-status-badge {
  background: rgba(255, 253, 250, 0.9) !important;
  border-color: rgba(112, 88, 96, 0.18) !important;
}

#novel-stream-container,
#active-chapter-card {
  border-color: rgba(112, 88, 96, 0.18) !important;
}

#active-chapter-card {
  background: rgba(255, 253, 250, 0.94) !important;
  box-shadow: 0 20px 56px rgba(80, 58, 67, 0.08) !important;
}

#choices-container button {
  min-height: 3.25rem;
  border-radius: 0.9rem !important;
  border-color: rgba(112, 88, 96, 0.2) !important;
  background: rgba(255, 253, 250, 0.88) !important;
  box-shadow: 0 5px 18px rgba(80, 58, 67, 0.045);
}

#choices-container button:hover {
  background: #f7ecef !important;
  border-color: rgba(152, 95, 114, 0.5) !important;
  transform: translateY(-1px);
}

#stream-status-panel {
  background: linear-gradient(145deg, #f6efec, #fffdfa) !important;
  border-color: rgba(152, 95, 114, 0.2) !important;
}

.chapter-actions-menu > summary::-webkit-details-marker { display: none; }
.chapter-actions-menu[open] > summary { border-color: rgba(141, 82, 102, 0.55); }

/* 抽屜與彈窗卡片保持紙張感。 */
#status-drawer,
#mobile-menu-drawer {
  background-color: var(--bg-surface) !important;
}

[role="dialog"] > div,
#auth-modal > div,
#save-modal > div,
#guide-modal > div {
  border-color: rgba(112, 88, 96, 0.2) !important;
  box-shadow: 0 24px 80px rgba(54, 39, 46, 0.17) !important;
}

#toast-container > div {
  color: var(--text-main) !important;
  background: rgba(255, 253, 250, 0.96) !important;
  border-color: rgba(112, 88, 96, 0.2) !important;
  box-shadow: 0 12px 34px rgba(80, 58, 67, 0.13) !important;
}

@media (max-width: 639px) {
  body { font-size: 14.5px; }
  main { padding: 0.8rem !important; }
  button,
  [role="button"] { min-height: 44px; }
  #home-view > div:first-child { padding-right: 1.2rem !important; padding-left: 1.2rem !important; }
  #home-view h1 { letter-spacing: 0.1em; }
  .home-action-card { min-height: 0; padding: 1.25rem !important; }
  #gameplay-view,
  #gameplay-view > *,
  #novel-stream-container,
  #novel-stream-container > *,
  #decisions-section { min-width: 0; max-width: 100%; }
  #gameplay-view > .sticky { padding: 0.5rem !important; gap: 0.25rem; }
  #back-to-home-btn { width: 2.75rem; padding-right: 0.55rem !important; padding-left: 0.55rem !important; justify-content: center; }
  #back-to-home-btn .back-label { display: none; }
  #gameplay-breadcrumb { max-width: 7.5rem !important; }
  #gameplay-view > .sticky > div:last-child { gap: 0.25rem !important; }
  #gameplay-view > .sticky > div:last-child button { min-width: 2.5rem; padding-right: 0.45rem !important; padding-left: 0.45rem !important; justify-content: center; }
  #server-status-badge { align-items: flex-start; flex-direction: column; gap: 0.35rem; }
  #server-status-badge > div:last-child { width: 100%; justify-content: space-between; }
  #active-chapter-card,
  #novel-stream-container > section { padding: 1.15rem !important; }
  #active-chapter-card > div:first-child { align-items: flex-start; }
  #active-chapter-card h1 { font-size: 1.35rem !important; }
  .chapter-actions-menu > div { position: fixed !important; right: 1rem !important; top: calc(var(--header-height, 52px) + 4.6rem) !important; }
  #decisions-section { padding: 1.1rem !important; }
  #decisions-section > div:first-child { align-items: flex-start; flex-direction: column; }
  #custom-action-input { min-width: 0; }
  #submit-custom-btn { padding-right: 0.85rem !important; padding-left: 0.85rem !important; }
  .prose-tc { letter-spacing: 0.02em; line-height: 2; }
  .prose-tc p { margin-bottom: 1.2rem; }
}