@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Crimson+Text:ital,wght@0,400;0,600;1,400&display=swap");

/* Pico's classless styles (in the layout) themed dark and gold, with Cinzel headings. */
:root,
[data-theme="dark"] {
  /* backgrounds */
  --pico-background-color: #0e0c12;
  --pico-card-background-color: #16131f;
  --pico-dropdown-background-color: #16131f;
  --pico-code-background-color: #1c1826;

  /* text */
  --pico-color: #ddd5c0;
  --pico-muted-color: #8a7f6e;
  --pico-muted-border-color: #2e2840;

  /* accent: deep gold */
  --pico-primary: #c49a2a;
  --pico-primary-background: #c49a2a;
  --pico-primary-border: #c49a2a;
  --pico-primary-hover: #e0b93a;
  --pico-primary-hover-background: #e0b93a;
  --pico-primary-hover-border: #e0b93a;
  --pico-primary-underline: rgba(196, 154, 42, 0.5);
  --pico-primary-focus: rgba(196, 154, 42, 0.3);
  --pico-primary-inverse: #0e0c12;

  /* borders and shadows */
  --pico-border-color: #2e2840;
  --pico-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);

  /* forms */
  --pico-form-element-background-color: #16131f;
  --pico-form-element-border-color: #2e2840;
  --pico-form-element-color: #ddd5c0;
  --pico-form-element-focus-color: #c49a2a;

  /* typography */
  --pico-font-family: "Crimson Text", Georgia, serif;
  --pico-font-size: 1.1rem;
  --pico-line-height: 1.6;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Cinzel", "Times New Roman", serif;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #e8d5a0;
}

/* The site name in the header. */
header nav .site-name strong {
  font-family: "Cinzel", serif;
  font-size: 1.2rem;
  color: #c49a2a;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

header nav form {
  margin: 0;
}

article.alert {
  border-left: 3px solid #b84a3a;
}

/* Small, low-key buttons, as for a row's actions. */
button.compact,
input[type="submit"].compact {
  width: auto;
  margin: 0;
  padding: 0.15rem 0.6rem;
  font-size: 0.85rem;
}

/* Quieter buttons, outlined, for actions beside the main one. */
button.secondary,
input[type="submit"].secondary {
  --pico-background-color: transparent;
  --pico-border-color: #4a4060;
  --pico-color: #ddd5c0;
}

button.secondary:hover,
input[type="submit"].secondary:hover {
  --pico-background-color: transparent;
  --pico-border-color: #c49a2a;
  --pico-color: #e0b93a;
}

/* The front page: the name, large. */
.hero {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.hero h1 {
  margin: 0 0 2rem;
  font-size: clamp(4rem, 18vw, 10rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #e0b93a;
  text-shadow:
    0 0 24px rgba(196, 154, 42, 0.35),
    0 4px 0 #5a4210;
}

/* Your characters: each a card with its picture beside its name. */
.character-list {
  list-style: none;
  margin: 0 0 var(--pico-spacing);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.character-list li {
  list-style: none;
  display: flex;
  gap: 1rem;
  align-items: center;
  margin: 0;
  padding: 0.5rem 1rem 0.5rem 0.5rem;
  background: var(--pico-card-background-color);
  border: 1px solid var(--pico-muted-border-color);
  border-radius: 6px;
}

.character-picture {
  width: 120px;
  height: 200px;
  flex: none;
  background: linear-gradient(#b8cfe0, #9cc0de 86%, #6f8c4e 86%);
  border-radius: 4px;
}

.character-about {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.character-about strong {
  font-family: "Cinzel", serif;
  font-size: 1.4rem;
  color: #e8d5a0;
}

.character-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.character-actions form {
  margin: 0;
}

/* The worlds a character played last, on the right of its card: each joins that world as it. */
.character-worlds {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: stretch;
  min-width: 10rem;
}

.character-worlds [role="button"] {
  padding: 0.35rem 0.9rem;
  text-align: center;
  overflow-wrap: anywhere;
}

.character-list li {
  flex-wrap: wrap;
}

/* On a narrow screen they go under the picture and name, in rows. */
@media (max-width: 640px) {
  .character-worlds {
    margin-left: 0;
    min-width: 0;
    flex: 1 1 100%;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .character-worlds [role="button"] {
    flex: 1 1 8rem;
  }
}

/* Links under a section of /home, the main one a button. */
.section-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  align-items: center;
}

.muted {
  color: var(--pico-muted-color);
}

/* Your worlds on /home: a row each. */
.world-list {
  padding: 0;
}

.world-list li {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  align-items: baseline;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--pico-muted-border-color);
}

.world-list strong {
  font-family: "Cinzel", serif;
  color: #e8d5a0;
}

.world-list a:first-of-type {
  margin-left: auto;
}

/* A world's page (/worlds/:id): its published versions, and what importing each found. */
.versions button.small,
.import-list button.small {
  margin: 0;
  padding: 0.2rem 0.7rem;
  font-size: 0.85rem;
}

.versions .moved {
  color: #e0a040;
}

.import-list {
  padding: 0;
}

.import-list > li {
  list-style: none;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--pico-muted-border-color);
}

.import-list p {
  margin: 0 0 0.3rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  align-items: baseline;
}

.status-passed {
  color: #8c8;
}

.status-failed,
.status-error {
  color: #e88;
}

.problems li.warning {
  color: #db8;
}

/* Buttons that destroy something, red so you don't press them by mistake. */
button.danger,
input[type="submit"].danger {
  width: auto;
  --pico-background-color: #8a2a20;
  --pico-border-color: #b84a3a;
  --pico-color: #f5e6e0;
}

button.danger:hover,
input[type="submit"].danger:hover {
  --pico-background-color: #a8352a;
  --pico-border-color: #d0604f;
}