/* Fantasy theme — site-wide. Painted scene + torn-paper white card. */

:root {
  /* Cool-neutral reading surface. Production's palette is warm (cream/olive);
     against the purple night scene that warmth reads as a brown tint,
     so the preview uses cool grays instead. */
  --bg: #ffffff;
  --surface: #f5f5f5;
  --border: #e3e3e3;
  --border-strong: #c8c8c8;
  --text: #0e0e0e;
  --text-2: #2b2b2b;
  --text-3: #4e4e4e;
  --accent: #5e3d91;
  --accent2: #7a6f9a;
  --ff-serif: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
}

body { background: #1d150e; }

/* Animated code-painted scene (built by fantasy-preview-fx.js) */
#fx-scene {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 1920px;
  height: 1080px;
  z-index: -1;
  pointer-events: none;
}
.fx-layer {
  position: absolute;
  inset: 0;
  will-change: transform;
}
.fx-layer img {
  width: 100%;
  height: 100%;
  display: block;
}
.fx-clouds-drift {
  animation: fx-drift 60s ease-in-out infinite alternate;
}
@keyframes fx-drift {
  from { translate: -110px 0; }
  to { translate: 110px 0; }
}

/* Torn-paper card: the deckled clip-path comes from fx.js at runtime.
   Shadow lives on .app-paper as drop-shadow so it follows the torn shape. */
.app-paper {
  max-width: 820px;
  margin: 2.5rem auto;
  filter: drop-shadow(0 30px 55px rgba(10, 6, 20, 0.6)) drop-shadow(0 4px 12px rgba(10, 6, 20, 0.35));
}
.paper-sheet {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.35 0 0 0 0 0.35 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E"),
    #ffffff; /* white paper + faint fiber grain */
  border: none;
  border-radius: 0;
  box-shadow: inset 0 0 46px rgba(30, 30, 34, 0.07); /* soft shading toward the torn edge */
  margin: 0;
  padding: 2.8rem 2.8rem 4rem;
  max-width: none;
}

header h1 {
  font-family: var(--ff-serif);
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--text);
}

/* Inner surfaces sit slightly darker on the parchment */
.hero-card,
.info-card,
.detail-card,
.seo-section,
.bio-card {
  background: var(--surface);
  border-color: var(--border);
}

/* Purple + gold primary button */
.gen-btn {
  background: linear-gradient(180deg, #5d3a94 0%, #452a71 100%);
  border: 2px solid #c9a75a;
  border-radius: 9px;
  color: #f2effa;
  font-family: var(--ff-serif);
  letter-spacing: 0.06em;
  box-shadow: 0 3px 10px rgba(30, 15, 60, 0.35);
}
.gen-btn:hover { filter: brightness(1.12); }

button, .pill, .chip, select, input {
  border-color: var(--border-strong);
}

input[type='text'], select {
  background: #ffffff;
  color: var(--text);
}

a { color: #5e3d91; }

.site-footer { border-color: var(--border); }

/* Readability: one step up across the whole scale, more air between blocks */
body { font-size: 19px; }

/* uppercase eyebrow labels — bigger and darker than production's 13px */
.section-label,
.detail-label,
.info-key,
.hero-kicker,
.psych-lbl,
.spectrum-group-name,
.character-kicker,
.bar-label,
.locus-end { font-size: 15px; font-weight: 700; color: #2b2b2b; }
.section-label {
  font-family: var(--ff-serif);
  letter-spacing: 0.22em;
  margin-bottom: 1.4rem;
  padding-bottom: 7px;
  border-bottom: 1px solid #dcdcdc;
  display: flex;
  align-items: center;
  gap: 0.6em;
}
.section-label::after {
  content: '❧';
  font-size: 13px;
  color: #8d86a8;
  font-weight: 400;
  letter-spacing: 0;
}
.spectrum-group-name,
.psych-lbl,
.character-kicker { font-family: var(--ff-serif); letter-spacing: 0.18em; }

/* body copy in the output */
.hero-body,
.hero-list li,
.info-val,
.detail-text,
.detail-list,
.priority-text,
.character-copy,
.psych-desc,
.psych-desc-split { font-size: 18px; line-height: 1.72; }
.info-val .note,
.ocean-tip { font-size: 17px; line-height: 1.65; }
.info-val .tell,
.hero-tell,
.psych-blind,
.character-callout { font-size: 16.5px; }

/* trait rows and scales */
.spectrum-row,
.spectrum-trait,
.spectrum-value { font-size: 18px; }
.ocean-name,
.ocean-lbl { font-size: 18px; }
.psych-val { font-size: 22px; }
.character-mini { font-size: 23px; }
.character-name { font-size: 1.4rem; }
.hero-name { font-size: 1.6rem; }
.hero-sub { font-size: 17px; }

/* keep the ink dark on every name/label */
.spectrum-trait,
.ocean-name,
.info-key,
.detail-label,
.psych-name { color: var(--text-2); }
header p { font-size: 17px; color: var(--text-2); }
.last-updated { font-size: 16px; color: var(--text-3); }

/* breathing room between rows */
.spectrum-row { padding: 7px 0; }
.ocean-tip { padding-bottom: 8px; }
.hero-list li { margin-bottom: 4px; }

/* SVG flags in the language switcher */
.lang-switch { align-items: center; }
.lang-switch img { width: 21px; height: 16px; border-radius: 2px; display: block; box-shadow: 0 0 0 1px rgba(0,0,0,0.12); }
.lang-switch a, .lang-switch span { display: block; }
.lang-switch .lang-active img { box-shadow: 0 0 0 2px #5e3d91; }

/* the generators list rides its own small sheet below the card */
.generators-footer.paper-sheet { margin-top: 0; padding: 1.2rem 2rem 1.5rem; }
.generators-footer.paper-sheet .generators-grid a { color: var(--text-2); }