/* ===================================
   Theme: Novel — 日本ADV/ノベルゲーム風
   =================================== */

html[data-theme="novel"] {
  /* Colors — light parchment, ink-like contrast */
  --color-bg: #f0ebe3;
  --color-bg-light: #e8e0d4;
  --color-surface: #ffffff;
  --color-surface-light: rgba(255, 255, 255, 0.95);
  --color-primary: #8b2500;
  --color-primary-hover: #b03020;
  --color-secondary: #2c4a3e;
  --color-secondary-hover: #3a6050;
  --color-text: #2a2520;
  --color-text-dim: #7a7068;
  --color-text-dark: #2a2520;
  --color-accent-gold: #6b4423;
  --color-border: rgba(107, 68, 35, 0.2);
  --color-success: #2c6e49;
  --color-warning: #b8860b;
  --color-danger: #8b2500;

  /* Typography — mincho/serif, literary feel */
  --font-main: 'Noto Serif JP', 'Yu Mincho', 'Hiragino Mincho ProN', serif;
  --font-title: 'Noto Serif JP', 'Yu Mincho', 'Hiragino Mincho ProN', serif;

  /* Spacing — sharp, rectangular */
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;

  /* Shadows — minimal, paper-like */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* --- Title Screen --- */
html[data-theme="novel"] .title-slideshow::after {
  background: radial-gradient(ellipse at center, rgba(240, 235, 227, 0.4) 0%, rgba(240, 235, 227, 0.88) 100%);
}

html[data-theme="novel"] .game-title {
  color: var(--color-text);
  font-size: 2.8rem;
  text-shadow: none;
  font-weight: 400;
  letter-spacing: 0.2em;
}

html[data-theme="novel"] .game-subtitle {
  color: var(--color-text-dim);
  letter-spacing: 0.3em;
  font-size: 0.9rem;
}

html[data-theme="novel"] .title-menu {
  gap: 12px;
}

/* --- Buttons — thin border, rectangular, literary --- */
html[data-theme="novel"] .btn {
  border: 1px solid rgba(107, 68, 35, 0.3);
  font-family: var(--font-title);
  font-weight: 400;
  letter-spacing: 0.1em;
  border-radius: 0;
  transition: all 0.2s ease;
}

html[data-theme="novel"] .btn-primary {
  background: var(--color-primary);
  color: #f0ebe3;
  border-color: var(--color-primary);
}

html[data-theme="novel"] .btn-primary:hover:not(:disabled) {
  background: var(--color-primary-hover);
}

html[data-theme="novel"] .btn-secondary {
  background: transparent;
  color: var(--color-text);
  border: 1px solid rgba(107, 68, 35, 0.4);
}

html[data-theme="novel"] .btn-secondary:hover {
  background: rgba(107, 68, 35, 0.06);
  border-color: rgba(107, 68, 35, 0.6);
}

html[data-theme="novel"] .btn-back {
  border-color: rgba(107, 68, 35, 0.25);
  color: var(--color-text-dim);
}

html[data-theme="novel"] .btn-back:hover {
  color: var(--color-text);
  border-color: rgba(107, 68, 35, 0.5);
}

/* --- Panels — white paper, sharp --- */
html[data-theme="novel"] .panel {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(107, 68, 35, 0.15);
  border-radius: 0;
  box-shadow: var(--shadow-md);
}

html[data-theme="novel"] .panel h2 {
  color: var(--color-text);
  font-weight: 400;
  letter-spacing: 0.15em;
  border-bottom: 1px solid rgba(107, 68, 35, 0.15);
  padding-bottom: 12px;
}

/* --- Form elements --- */
html[data-theme="novel"] .form-group label {
  color: var(--color-text-dim);
}

html[data-theme="novel"] .form-group input[type="number"],
html[data-theme="novel"] .text-input,
html[data-theme="novel"] .select-input {
  background: #f8f4ee;
  border: 1px solid rgba(107, 68, 35, 0.2);
  color: var(--color-text);
  border-radius: 0;
}

html[data-theme="novel"] .section-heading {
  color: var(--color-accent-gold);
  border-bottom-color: rgba(107, 68, 35, 0.15);
}

html[data-theme="novel"] .icon-preset-btn {
  background: #f8f4ee;
  border: 1px solid rgba(107, 68, 35, 0.2);
  border-radius: 0;
}

html[data-theme="novel"] .icon-preset-btn.selected {
  border-color: var(--color-primary);
  background: rgba(139, 37, 0, 0.06);
  box-shadow: none;
}

/* --- Scenario cards --- */
html[data-theme="novel"] .scenario-item {
  background: #f8f4ee;
  border: 1px solid rgba(107, 68, 35, 0.12);
  border-radius: 0;
}

html[data-theme="novel"] .scenario-item:hover {
  border-color: rgba(107, 68, 35, 0.35);
}

html[data-theme="novel"] .scenario-item.selected {
  border-color: var(--color-primary);
  box-shadow: none;
  border-width: 2px;
}

html[data-theme="novel"] .scenario-item .scenario-title {
  color: var(--color-text);
}

html[data-theme="novel"] .scenario-item .scenario-desc {
  color: var(--color-text-dim);
}

/* --- Filter buttons --- */
html[data-theme="novel"] .filter-btn {
  border-radius: 0;
  border: 1px solid rgba(107, 68, 35, 0.2);
  background: #f8f4ee;
  color: var(--color-text-dim);
}

html[data-theme="novel"] .filter-btn.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #f0ebe3;
}

html[data-theme="novel"] .scenario-sort select {
  background: #f8f4ee;
  border: 1px solid rgba(107, 68, 35, 0.2);
  color: var(--color-text);
  border-radius: 0;
}

/* --- Upload area --- */
html[data-theme="novel"] .upload-area {
  border: 1px dashed rgba(107, 68, 35, 0.3);
  color: var(--color-text-dim);
}

html[data-theme="novel"] .upload-area:hover,
html[data-theme="novel"] .upload-area.dragover {
  border-color: var(--color-primary);
  background: rgba(139, 37, 0, 0.03);
}

/* --- Character cards --- */
html[data-theme="novel"] .character-card {
  background: #f8f4ee;
  border: 1px solid rgba(107, 68, 35, 0.12);
  border-radius: 0;
}

html[data-theme="novel"] .character-card .char-name {
  color: var(--color-text);
}

html[data-theme="novel"] .character-card .char-role {
  color: var(--color-text-dim);
}

/* --- Play Screen --- */
html[data-theme="novel"] .play-background {
  filter: brightness(0.7) saturate(0.8);
}

html[data-theme="novel"] .play-layout {
  background: rgba(240, 235, 227, 0.15);
}

/* --- Objective widget --- */
html[data-theme="novel"] .objective-widget {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(107, 68, 35, 0.12);
  border-radius: 0;
}

html[data-theme="novel"] .objective-label {
  color: var(--color-primary);
  font-family: var(--font-title);
  letter-spacing: 0.2em;
}

html[data-theme="novel"] .objective-text {
  color: var(--color-text);
}

/* --- Progress bar --- */
html[data-theme="novel"] .progress-bar {
  background: rgba(107, 68, 35, 0.1);
}

html[data-theme="novel"] .progress-fill {
  background: linear-gradient(90deg, var(--color-primary), #b03020);
}

/* --- Dialogue — VN textbox style --- */
html[data-theme="novel"] .dialogue-bubble .bubble-content {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(107, 68, 35, 0.1);
  border-radius: 0;
  color: var(--color-text);
}

html[data-theme="novel"] .dialogue-bubble.player .bubble-content {
  background: rgba(139, 37, 0, 0.06);
  border-color: rgba(139, 37, 0, 0.15);
  border-right: 3px solid var(--color-primary);
}

html[data-theme="novel"] .dialogue-bubble.gm .bubble-content {
  background: rgba(107, 68, 35, 0.04);
  border: none;
  border-left: 2px solid rgba(107, 68, 35, 0.3);
  font-style: italic;
  color: var(--color-text);
}

html[data-theme="novel"] .dialogue-bubble.npc .bubble-content {
  background: rgba(44, 74, 62, 0.06);
  border-color: rgba(44, 74, 62, 0.15);
}

html[data-theme="novel"] .bubble-speaker {
  color: var(--color-primary);
}

html[data-theme="novel"] .bubble-text {
  color: var(--color-text);
  line-height: 1.8;
}

/* --- Emotion borders --- */
html[data-theme="novel"] .dialogue-bubble.emotion-happy .bubble-content { border-left: 2px solid #b8860b; }
html[data-theme="novel"] .dialogue-bubble.emotion-angry .bubble-content { border-left: 2px solid #8b2500; }
html[data-theme="novel"] .dialogue-bubble.emotion-sad .bubble-content { border-left: 2px solid #4a6fa5; }
html[data-theme="novel"] .dialogue-bubble.emotion-scared .bubble-content { border-left: 2px solid #6b3a6b; }
html[data-theme="novel"] .dialogue-bubble.emotion-surprised .bubble-content { border-left: 2px solid #b8860b; }

/* --- Turn separator --- */
html[data-theme="novel"] .turn-separator {
  color: var(--color-text-dim);
  font-size: 0.8rem;
}

html[data-theme="novel"] .turn-separator::before,
html[data-theme="novel"] .turn-separator::after {
  background: linear-gradient(to right, transparent, rgba(107, 68, 35, 0.2), transparent);
}

/* --- Choice panel --- */
html[data-theme="novel"] .choice-panel {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(107, 68, 35, 0.12);
  border-radius: 0;
}

html[data-theme="novel"] .choice-btn {
  background: #f8f4ee;
  border: 1px solid rgba(107, 68, 35, 0.15);
  border-radius: 0;
  color: var(--color-text);
}

html[data-theme="novel"] .choice-btn:hover {
  border-color: var(--color-primary);
  background: rgba(139, 37, 0, 0.04);
}

/* --- Chat input --- */
html[data-theme="novel"] .chat-input-area input {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(107, 68, 35, 0.2);
  border-radius: 0;
  color: var(--color-text);
  font-family: var(--font-main);
}

html[data-theme="novel"] .chat-input-area input::placeholder {
  color: var(--color-text-dim);
}

html[data-theme="novel"] .chat-input-area input:focus {
  border-color: var(--color-primary);
  outline: none;
}

html[data-theme="novel"] .btn-send {
  background: var(--color-primary);
  color: #f0ebe3;
  border-radius: 0;
}

/* --- Character select bar --- */
html[data-theme="novel"] .char-select-btn {
  background: #f8f4ee;
  border: 1px solid rgba(107, 68, 35, 0.15);
  border-radius: 0;
  color: var(--color-text-dim);
}

/* --- Toolbar --- */
html[data-theme="novel"] .btn-icon {
  background: rgba(255, 255, 255, 0.8);
  color: var(--color-text);
  border-radius: 0;
}

html[data-theme="novel"] .btn-icon:hover {
  background: rgba(255, 255, 255, 0.95);
}

/* --- Modal --- */
html[data-theme="novel"] .modal {
  background: rgba(240, 235, 227, 0.7);
}

html[data-theme="novel"] .modal-content {
  background: #ffffff;
  border: 1px solid rgba(107, 68, 35, 0.15);
  border-radius: 0;
}

html[data-theme="novel"] .modal-content h3 {
  color: var(--color-text);
  font-weight: 400;
  letter-spacing: 0.1em;
}

/* --- Party info modal --- */
html[data-theme="novel"] .party-info-card {
  background: #f8f4ee;
  border: 1px solid rgba(107, 68, 35, 0.12);
  border-radius: 0;
}

html[data-theme="novel"] .party-info-card .info-name {
  color: var(--color-text);
}

/* --- Ending screen --- */
html[data-theme="novel"] .ending-title {
  color: var(--color-text);
  text-shadow: none;
  font-weight: 400;
  letter-spacing: 0.15em;
}

html[data-theme="novel"] .ending-summary {
  color: var(--color-text);
}

html[data-theme="novel"] #ending-background {
  filter: brightness(0.7) saturate(0.7);
}

/* --- Ending fade --- */
html[data-theme="novel"] .ending-fade-overlay.fade-white {
  background: #f0ebe3;
}

/* --- Debug panel --- */
html[data-theme="novel"] .debug-panel {
  background: rgba(255, 255, 255, 0.95);
  border-color: var(--color-primary);
  color: var(--color-text);
}

html[data-theme="novel"] .debug-title {
  color: var(--color-primary);
}

/* --- Autosave indicator --- */
html[data-theme="novel"] .autosave-indicator {
  background: rgba(44, 110, 73, 0.9);
  border-radius: 0;
}

/* --- Timeout overlay --- */
html[data-theme="novel"] .timeout-content {
  background: #ffffff;
  border: 1px solid rgba(107, 68, 35, 0.15);
  border-radius: 0;
  color: var(--color-text);
}

html[data-theme="novel"] .timeout-content p {
  color: var(--color-text);
}

/* --- Beat transition --- */
html[data-theme="novel"] .beat-transition-overlay {
  background: rgba(240, 235, 227, 0.85);
}

html[data-theme="novel"] .beat-transition-name {
  color: var(--color-text);
  text-shadow: none;
  letter-spacing: 0.2em;
}

html[data-theme="novel"] .beat-transition-objective {
  color: var(--color-text-dim);
}

/* --- Scrollbar --- */
html[data-theme="novel"] ::-webkit-scrollbar-thumb {
  background: rgba(107, 68, 35, 0.2);
}

/* --- Mis-choice flash — subtler for light theme --- */
html[data-theme="novel"] .mis-warn-1 {
  animation: novelMisFlash1 1s ease;
}
html[data-theme="novel"] .mis-warn-2 {
  animation: novelMisFlash2 1s ease;
}
html[data-theme="novel"] .mis-warn-3 {
  animation: novelMisFlash3 1s ease;
}

@keyframes novelMisFlash1 {
  0%, 100% { box-shadow: none; }
  50% { box-shadow: inset 0 0 30px rgba(184, 134, 11, 0.2); }
}
@keyframes novelMisFlash2 {
  0%, 100% { box-shadow: none; }
  50% { box-shadow: inset 0 0 40px rgba(176, 48, 32, 0.25); }
}
@keyframes novelMisFlash3 {
  0%, 100% { box-shadow: none; }
  50% { box-shadow: inset 0 0 50px rgba(139, 37, 0, 0.35); }
}

/* --- Replay bar --- */
html[data-theme="novel"] .replay-bar {
  background: rgba(139, 37, 0, 0.06);
  border-top-color: rgba(139, 37, 0, 0.15);
}

html[data-theme="novel"] .replay-bar-label {
  color: var(--color-primary);
}

/* --- Validation result --- */
html[data-theme="novel"] .validation-result.success {
  background: rgba(44, 110, 73, 0.08);
  border-color: var(--color-success);
  color: var(--color-success);
}

html[data-theme="novel"] .validation-result.error {
  background: rgba(139, 37, 0, 0.06);
  border-color: var(--color-danger);
  color: var(--color-danger);
}