/* Game details page — extends random_setup parchment via .setup-header */

.details-back {
  max-width: 640px;
  margin: 1.5rem auto;
  text-align: center;
}

/* Edit links */
.details-edit-link {
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  /* Ink, not the rule colour: #b5a382 was 1.7:1 on the parchment, and these
     sit beside Start as "Go back" and "Edit details". */
  color: #65523a;
  text-decoration: none;
  transition: color 0.2s;
}
@media (hover: hover) {
  .details-edit-link:hover {
    color: #3a2a14;
  }
}

/* Inline in narrator-style-badge */
.narrator-style-badge .details-edit-link {
  margin-left: 0.5rem;
}

/* Text input (hero name) */
.details-input {
  width: 100%;
  background: rgba(255, 250, 240, 0.4);
  color: #3a2a14;
  border: 1px solid rgba(138, 115, 84, 0.35);
  padding: 0.5rem 0.75rem;
  font-family: 'Lora', Georgia, serif;
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
}
.details-input:focus {
  border-color: #8a7354;
}

/* Character counter */
.char-counter {
  display: block;
  text-align: right;
  font-family: 'Lora', Georgia, serif;
  font-size: 0.75rem;
  color: #8a7354;
  margin-top: 0.15rem;
  margin-bottom: 0.5rem;
  opacity: 0.7;
}

/* ── A started game's details, in the game's palette (.reference-screen) ── */
.details-title {
  font-family: 'Cinzel', serif; font-weight: 400; font-size: 1rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-bright); margin: 0 0 0.6rem;
}
.details-label {
  display: block; font-family: 'Cinzel', serif; font-size: 0.68rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.2rem;
}
.details-style, .details-world, .details-hero-text {
  font-family: 'Lora', Georgia, serif; font-size: 0.85rem; line-height: 1.6; color: var(--text-mid); margin: 0 0 0.9rem;
}
.details-style { font-style: italic; }
.details-hero { border-top: 1px solid var(--border-subtle); margin-top: 1.2rem; padding-top: 1.2rem; }
.details-hero .hero-portrait { max-width: 220px; margin: 0 auto 0.9rem; }
.details-hero-name {
  font-family: 'Cinzel', serif; font-weight: 400; font-size: 0.9rem; letter-spacing: 0.1em;
  color: var(--theme-accent); margin: 0.9rem 0 0.5rem;
}