/* ===== Story Stage — Ink Rice Paper Theme ===== */
:root {
  --bg-color: #F5E6CA;
  --text-color: #2E2E2E;
  --accent-color: #C8553D;
  --secondary: #769656;
  --tertiary: #3F5A8A;
  --card-bg: #FFFAF0;
  --card-border: rgba(200,85,61,0.3);
  --header-bg: rgba(245,230,202,0.94);
  --header-border: rgba(200,85,61,0.2);
  --nav-bg: rgba(255,250,240,0.96);
  --nav-border: rgba(200,85,61,0.15);
  --nav-text-inactive: rgba(46,46,46,0.45);
  --nav-active-bg: rgba(200,85,61,0.1);
  --btn-back-bg: rgba(200,85,61,0.12);
  --btn-primary-bg: linear-gradient(180deg, #D4694E, #C8553D 50%, #8B3A28);
  --btn-primary-text: #FFFAF0;
  --btn-primary-shadow: #5A2418;
  --btn-ghost-bg: rgba(118,150,86,0.15);
  --btn-ghost-text: #3D4E2A;
  --btn-ghost-border: rgba(118,150,86,0.45);
  --glow-color: rgba(200,85,61,0.4);
  --progress-fill: linear-gradient(90deg, #769656, #C8553D);
  --intro-bg-1: rgba(46,46,46,0.92);
  --intro-bg-2: rgba(74,52,38,0.96);
  --intro-color: #F5E6CA;
  --intro-sub-color: #FFFAF0;
  --ai-hint-bg: rgba(118,150,86,0.15);
  --ai-hint-border: rgba(118,150,86,0.35);
}

body {
  font-family: 'Songti SC', 'STSong', 'Noto Serif SC', -apple-system, BlinkMacSystemFont, 'PingFang SC', sans-serif;
  background:
    radial-gradient(ellipse at top, #F0DBB0 0%, transparent 60%),
    radial-gradient(ellipse at bottom, #E8D2A0 0%, transparent 60%),
    linear-gradient(180deg, #F5E6CA 0%, #ECDAB7 100%);
  color: var(--text-color);
}

#bg-ink { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
#bg-ink::before {
  content: ''; position: absolute; top: -50px; right: -40px;
  width: 200px; height: 280px;
  background: radial-gradient(ellipse, rgba(46,46,46,0.06) 0%, transparent 70%);
}

/* ─── Home: Theatre director ──────────────────────────── */
.director-home {
  display: flex; flex-direction: column; gap: 16px;
  padding: 16px 18px 30px;
  animation: core-slideUp 0.5s ease;
}

.director-banner {
  display: flex; align-items: center; gap: 14px;
  background:
    linear-gradient(135deg, #FFFAF0, #F5E6CA);
  border: 3px solid var(--accent-color);
  border-radius: 22px;
  padding: 14px 18px;
  box-shadow: 0 6px 16px rgba(200,85,61,0.18);
  position: relative;
}
.director-banner::before {
  content: '印'; position: absolute; top: -14px; left: 14px;
  background: var(--accent-color); color: #FFFAF0;
  padding: 4px 10px; border-radius: 8px;
  font-size: 14px; font-family: 'Songti SC', serif;
  font-weight: 900; letter-spacing: 2px;
}
.director-avatar { font-size: 54px; line-height: 1; animation: core-float 3s ease-in-out infinite; }
.director-info { flex: 1; }
.director-name { font-size: 17px; font-weight: 900; color: #2E2E2E; }
.director-stats { display: flex; gap: 12px; margin-top: 4px; font-size: 13px; font-weight: 700; color: #5A4A38; }

.scroll-card {
  background:
    repeating-linear-gradient(0deg, transparent 0, transparent 28px, rgba(118,150,86,0.06) 28px, rgba(118,150,86,0.06) 29px),
    linear-gradient(180deg, #FFFAF0, #F5E6CA);
  border: 3px solid var(--accent-color);
  border-radius: 6px 6px 22px 22px;
  padding: 24px 20px 18px;
  position: relative;
  box-shadow:
    0 8px 24px rgba(46,46,46,0.15),
    inset 0 0 30px rgba(200,85,61,0.05);
}
.scroll-card::before {
  content: '今日剧目';
  position: absolute; top: -18px; left: 50%; transform: translateX(-50%);
  background: var(--accent-color); color: #FFFAF0;
  padding: 6px 18px; border-radius: 10px;
  font-size: 14px; font-weight: 900; letter-spacing: 4px;
  font-family: 'Songti SC', serif;
  white-space: nowrap;
}
.scroll-card::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: 8px; height: 1px;
  background: repeating-linear-gradient(90deg, var(--accent-color) 0, var(--accent-color) 4px, transparent 4px, transparent 8px);
  opacity: 0.4;
}

.unit-num-tag {
  display: inline-block;
  background: var(--secondary); color: #FFFAF0;
  padding: 4px 14px; border-radius: 6px;
  font-size: 12px; font-weight: 900; margin-bottom: 10px;
  letter-spacing: 2px; font-family: 'Songti SC', serif;
}
.unit-theme { font-size: 24px; font-weight: 900; color: #2E2E2E; text-align: center;
  margin: 6px 0 12px; font-family: 'Songti SC', serif; letter-spacing: 3px; }
.unit-stage { font-size: 13px; color: #5A4A38; text-align: center; margin-bottom: 12px; font-style: italic; }
.text-chips { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.text-chip {
  background: rgba(118,150,86,0.12);
  border-left: 4px solid var(--secondary);
  padding: 8px 12px; border-radius: 6px;
  font-size: 13px; color: #2E2E2E; font-weight: 700;
}
.text-chip .chip-type { color: var(--accent-color); font-size: 11px; margin-right: 6px; font-weight: 800; }

.curtain-btn {
  width: 100%; padding: 18px 20px;
  background: linear-gradient(180deg, #D4694E, #C8553D 50%, #8B3A28);
  border: 4px solid #F5E6CA;
  border-radius: 22px;
  color: #FFFAF0;
  font-size: 22px; font-weight: 900;
  cursor: pointer; font-family: 'Songti SC', serif;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  box-shadow: 0 6px 0 #5A2418, 0 12px 28px rgba(200,85,61,0.35);
  text-shadow: 2px 2px 0 rgba(0,0,0,0.25);
  animation: core-glow 2.5s ease-in-out infinite;
  letter-spacing: 4px;
}
.curtain-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #5A2418; }
.curtain-btn .lantern-emoji { font-size: 28px; animation: core-bob 1.5s ease-in-out infinite; }

.cast-progress {
  background: rgba(200,85,61,0.1);
  border: 2px solid rgba(200,85,61,0.3);
  border-radius: 14px;
  padding: 12px 16px;
  text-align: center;
}
.cast-progress .progress-track { --track-bg: rgba(46,46,46,0.15); margin-bottom: 6px; }
.cast-progress-text { font-size: 13px; font-weight: 800; color: #8B3A28; letter-spacing: 2px; }

/* ─── Stages list (Unit catalog) ─────────────────────── */
.stage-catalog { padding: 16px 14px 80px; }
.catalog-banner {
  text-align: center; margin-bottom: 20px;
  background: linear-gradient(180deg, #FFFAF0, #F5E6CA);
  border: 3px solid var(--accent-color);
  border-radius: 22px;
  padding: 16px;
}
.catalog-title { font-size: 24px; font-weight: 900; color: var(--accent-color); font-family: 'Songti SC', serif; letter-spacing: 6px; }
.catalog-sub { font-size: 13px; color: #5A4A38; margin-top: 4px; font-weight: 700; }

.stage-list { display: flex; flex-direction: column; gap: 12px; }
.stage-card {
  background: linear-gradient(135deg, #FFFAF0, #F5E6CA);
  border: 3px solid var(--accent-color);
  border-radius: 16px;
  padding: 14px 16px;
  cursor: pointer;
  display: flex; gap: 14px; align-items: center;
  box-shadow: 0 4px 0 rgba(90,36,24,0.4);
  position: relative;
  animation: core-slideUp 0.3s ease backwards;
}
.stage-card:nth-child(1) { animation-delay: 0s; }
.stage-card:nth-child(2) { animation-delay: 0.04s; }
.stage-card:nth-child(3) { animation-delay: 0.08s; }
.stage-card:nth-child(4) { animation-delay: 0.12s; }
.stage-card:nth-child(5) { animation-delay: 0.16s; }
.stage-card:nth-child(6) { animation-delay: 0.2s; }
.stage-card:nth-child(7) { animation-delay: 0.24s; }
.stage-card:nth-child(8) { animation-delay: 0.28s; }

.stage-card:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(90,36,24,0.4); }
.stage-card.current { border-width: 4px; background: linear-gradient(135deg, #FFE6B8, #F5C99A); animation: core-glow 2.5s infinite, core-slideUp 0.3s backwards; }
.stage-card.completed { background: linear-gradient(135deg, #D6E9C5, #BDD8A4); border-color: var(--secondary); }
.stage-card.completed::after { content: '·完·'; position: absolute; top: -8px; right: 12px; background: var(--secondary); color: #FFFAF0; padding: 2px 10px; border-radius: 6px; font-size: 11px; font-weight: 900; letter-spacing: 2px; }
.stage-card.locked { background: linear-gradient(135deg, #D5C8B0, #BFAF95); opacity: 0.5; pointer-events: none; }

.stage-num {
  width: 50px; height: 50px; flex-shrink: 0;
  background: var(--accent-color); color: #FFFAF0;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 900; font-family: 'Songti SC', serif;
}
.stage-card.locked .stage-num { background: #999; }
.stage-card.completed .stage-num { background: var(--secondary); }
.stage-info { flex: 1; min-width: 0; }
.stage-theme { font-size: 16px; font-weight: 900; color: #2E2E2E; }
.stage-setting { font-size: 12px; color: #5A4A38; margin-top: 2px; font-style: italic; }
.stage-meta { font-size: 11px; color: var(--accent-color); margin-top: 4px; }

/* ─── Play stage (gameplay) ─────────────────────────── */
.play-stage { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.play-banner {
  background:
    linear-gradient(135deg, #FFFAF0, #F5E6CA);
  border: 3px solid var(--accent-color);
  border-radius: 18px;
  padding: 14px;
}
.pb-theme { font-size: 18px; font-weight: 900; color: #2E2E2E; font-family: 'Songti SC', serif; letter-spacing: 3px; text-align: center; }
.pb-stage-name { font-size: 12px; color: #5A4A38; text-align: center; margin-top: 4px; font-style: italic; }
.pb-counter { text-align: center; margin-top: 6px; font-size: 13px; color: var(--accent-color); font-weight: 800; }

/* ─── Recitation phase ──────────────────────────────── */
.recite-card {
  background:
    repeating-linear-gradient(0deg, transparent 0, transparent 31px, rgba(118,150,86,0.08) 31px, rgba(118,150,86,0.08) 32px),
    linear-gradient(180deg, #FFFAF0, #F5E6CA);
  border: 3px solid var(--accent-color);
  border-radius: 18px;
  padding: 22px;
  position: relative;
}
.recite-title { font-size: 22px; font-weight: 900; color: var(--accent-color); text-align: center; font-family: 'Songti SC', serif; letter-spacing: 4px; margin-bottom: 4px; }
.recite-author { font-size: 13px; color: #5A4A38; text-align: center; margin-bottom: 14px; font-style: italic; }
.poem-lines { font-size: 19px; font-weight: 700; color: #2E2E2E; text-align: center; line-height: 2; font-family: 'Songti SC', serif; letter-spacing: 3px; white-space: pre-line; }
.recite-actions { display: flex; gap: 10px; justify-content: center; margin-top: 16px; }
.recite-actions .btn { min-width: 120px; }

.scene-card {
  background: linear-gradient(135deg, #FFFAF0, #F5E6CA);
  border: 3px dashed var(--secondary);
  border-radius: 16px;
  padding: 14px;
  margin-top: 12px;
  text-align: center;
}
.scene-prompt { font-size: 13px; color: #3D4E2A; font-style: italic; }
.scene-art {
  margin-top: 10px;
  background: #FFFEF8;
  border: 1px solid rgba(46,46,46,0.15);
  border-radius: 8px;
  padding: 14px;
  font-size: 60px;
}

/* ─── Pencil 田字格 ─────────────────────────────────── */
.tianzige-card {
  background: linear-gradient(135deg, #FFFAF0, #F5E6CA);
  border: 3px solid var(--accent-color);
  border-radius: 18px;
  padding: 18px;
}
.tz-target {
  font-size: 18px; font-weight: 900; color: #2E2E2E; text-align: center;
  margin-bottom: 12px; font-family: 'Songti SC', serif; letter-spacing: 3px;
}
.tz-target .tz-char {
  display: inline-block; padding: 4px 12px;
  background: var(--accent-color); color: #FFFAF0;
  border-radius: 8px; margin-left: 8px; font-size: 28px;
}
.tz-grid-wrap {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
  max-width: 380px; margin: 0 auto;
}
.tz-cell {
  aspect-ratio: 1;
  background: #FFFEF8;
  border: 3px solid var(--accent-color);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}
.tz-cell::before, .tz-cell::after {
  content: ''; position: absolute;
  background: repeating-linear-gradient(90deg, rgba(200,85,61,0.3) 0, rgba(200,85,61,0.3) 4px, transparent 4px, transparent 8px);
}
.tz-cell::before { left: 0; right: 0; top: 50%; height: 1px; }
.tz-cell::after { top: 0; bottom: 0; left: 50%; width: 1px; }
.tz-cell .pencil-pad { width: 100%; height: 100%; border: none; background: transparent; }
.tz-cell .pad-tool { width: 28px; height: 28px; font-size: 14px; }

.tz-actions { display: flex; gap: 10px; margin-top: 14px; }
.tz-actions .btn { flex: 1; }

/* ─── Complete screen ───────────────────────────────── */
.complete-screen {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; padding: 40px 20px;
  text-align: center; animation: core-slideUp 0.5s ease;
  min-height: 60vh;
}
.complete-emoji { font-size: 90px; animation: core-float 1.5s ease-in-out infinite; }
.complete-title { font-size: 28px; font-weight: 900; color: var(--accent-color); font-family: 'Songti SC', serif; letter-spacing: 4px; }
.complete-stars { font-size: 40px; letter-spacing: 6px; }
.complete-coins {
  background: linear-gradient(135deg, var(--accent-color), #8B3A28); color: #FFFAF0;
  padding: 10px 24px; border-radius: 12px; font-size: 18px; font-weight: 900;
}

/* ─── Album (poems collected) ───────────────────────── */
.album-stage { padding: 16px; }
.album-title { font-size: 24px; font-weight: 900; color: var(--accent-color); text-align: center; margin-bottom: 14px; font-family: 'Songti SC', serif; letter-spacing: 6px; }
.album-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.album-card {
  background: linear-gradient(135deg, #FFFAF0, #F5E6CA);
  border: 3px solid var(--accent-color);
  border-radius: 14px;
  padding: 14px 10px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(46,46,46,0.08);
}
.album-poem-title { font-size: 16px; font-weight: 900; color: #2E2E2E; font-family: 'Songti SC', serif; letter-spacing: 2px; }
.album-author { font-size: 11px; color: #8B3A28; margin: 4px 0 8px; font-style: italic; }
.album-art { font-size: 40px; margin: 4px 0; }
.album-card.locked { background: #E5DCC8; opacity: 0.6; }

/* ─── Settings ─────────────────────────────────────── */
.settings-stage { padding: 24px 18px; display: flex; flex-direction: column; gap: 14px; }
.settings-section {
  background: linear-gradient(135deg, #FFFAF0, #F5E6CA);
  border: 3px solid var(--accent-color);
  border-radius: 18px; padding: 18px;
  display: flex; flex-direction: column; gap: 8px;
}
.settings-label { font-size: 14px; font-weight: 900; color: var(--accent-color); font-family: 'Songti SC', serif; letter-spacing: 2px; }
.settings-stat { font-size: 14px; color: #2E2E2E; font-weight: 600; }

@media (min-width: 768px) {
  .tz-grid-wrap { grid-template-columns: repeat(3, 1fr); }
  .album-grid { grid-template-columns: repeat(3, 1fr); }
}