/* ═══════════════════════════════════════════════════════════════
   medieval.css — habillage d'Earthy Survival
   Chargé APRÈS style.css pour recouvrir le thème néon du tycoon.

   Earthy Life est un tycoon spatial : néon, cyan, noir. Earthy Survival
   est un RPG médiéval. L'écran de création gardait pourtant l'habillage
   sci-fi, ce qui donnait un menu sans rapport avec le jeu qu'il ouvrait.
   On reprend ici les textures du pack Paper UI et les portraits réels des
   classes, découpés dans les planches Tiny RPG du jeu.
═══════════════════════════════════════════════════════════════ */

:root {
  --parch:      #e8dcc0;
  --parch-dark: #d3c29c;
  --ink:        #3a2a18;
  --ink-soft:   #6b5537;
  --gold:       #b8862f;
  --wood:       #6b4a2a;
}

/* ── Fond de l'écran Survival : clairière au crépuscule ───────── */
#earthy-survival-screen .es-bg {
  background:
    radial-gradient(120% 80% at 50% 0%,  #4a6b52 0%, #2c4034 55%, #1a2620 100%);
}
#earthy-survival-screen .es-stars { opacity: .25; }

/* Les sapins en emoji faisaient bricolage : on les remplace par une
   silhouette de forêt dessinée en dégradés. */
#earthy-survival-screen .es-trees-bg {
  font-size: 0 !important;
  height: 190px;
  background:
    repeating-linear-gradient(90deg,
      transparent 0 34px,
      rgba(20, 34, 24, .85) 34px 40px),
    linear-gradient(180deg, transparent 0%, rgba(14, 24, 18, .9) 78%);
  opacity: .8;
}
#earthy-survival-screen .es-fog {
  background: linear-gradient(180deg, transparent 0%, rgba(232, 220, 192, .07) 100%);
}

/* ── La feuille de parchemin ──────────────────────────────────── */
.es-main-creation .cc-wrap,
.es-welcome {
  background-image: url('../assets/ui-medieval/book_page.png');
  background-size: 100% 100%;
  image-rendering: pixelated;
  border: none;
  border-radius: 0;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .55);
  padding: 46px 54px 40px;
  max-width: 960px;
  color: var(--ink);
}

.cc-title, .es-welcome-title {
  color: var(--ink) !important;
  font-family: Georgia, 'Times New Roman', serif;
  letter-spacing: 1px;
  text-shadow: none !important;
}
.cc-subtitle, .cc-section-label, .cc-name-hint,
.es-welcome-sub, .es-welcome-desc {
  color: var(--ink-soft) !important;
  text-shadow: none !important;
}
.cc-section-label {
  font-family: Georgia, serif;
  border-bottom: 2px solid rgba(107, 74, 42, .35);
  padding-bottom: 5px;
  margin-bottom: 12px;
}

/* ── Indicateur d'étape ───────────────────────────────────────── */
.cc-step {
  background: var(--parch-dark) !important;
  color: var(--ink) !important;
  border: 2px solid var(--wood) !important;
  box-shadow: none !important;
}
.cc-step.active, .cc-step.done {
  background: var(--gold) !important;
  color: #2a1c08 !important;
}
.cc-step-line { background: rgba(107, 74, 42, .4) !important; }
.cc-step-line.active { background: var(--gold) !important; }

/* ── Genre et classes : des emplacements de parchemin ─────────── */
.cc-gender-btn, .cc-class-btn {
  background: rgba(211, 194, 156, .55) !important;
  border: 3px solid var(--wood) !important;
  border-radius: 8px !important;
  color: var(--ink) !important;
  box-shadow: none !important;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.cc-gender-btn:hover, .cc-class-btn:hover {
  background: rgba(232, 220, 192, .85) !important;
  transform: translateY(-3px);
}
.cc-gender-btn.selected, .cc-class-btn.selected {
  background: rgba(245, 236, 214, .95) !important;
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(184, 134, 47, .35) !important;
}
.cc-gender-name, .cc-class-name {
  color: var(--ink) !important;
  font-family: Georgia, serif;
}
.cc-class-desc { color: var(--ink-soft) !important; }

/* Portraits : vraies frames du jeu, jamais lissées. */
.cc-char-sprite, .cc-class-portrait {
  image-rendering: pixelated;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
}
.cc-char-sprite { width: 74px; height: 92px; }
.cc-char-sprite.male   { background-image: url('../assets/ui-medieval/class_warrior_m.png'); }
.cc-char-sprite.female { background-image: url('../assets/ui-medieval/class_warrior_f.png'); }
.cc-class-portrait { width: 86px; height: 104px; margin: 0 auto 6px; }

/* ── Barres de statistiques ───────────────────────────────────── */
.cc-stat-lbl  { color: var(--ink-soft) !important; }
.cc-stat-bar  { background: rgba(107, 74, 42, .25) !important; }
.cc-pro { color: #3f6b33 !important; }
.cc-con { color: #94402f !important; }

/* ── Champ de saisie ──────────────────────────────────────────── */
.cc-input, .codegate-input {
  background: rgba(255, 250, 235, .9) !important;
  border: 3px solid var(--wood) !important;
  border-radius: 6px !important;
  color: var(--ink) !important;
  font-family: Georgia, serif;
  box-shadow: none !important;
}
.cc-input::placeholder { color: rgba(107, 85, 55, .55) !important; }
.cc-input:focus { border-color: var(--gold) !important; outline: none; }

/* ── Boutons ──────────────────────────────────────────────────── */
.cc-btn-next, .cc-btn-confirm, .cc-btn-back,
.cc-random-btn, .codegate-btn-cancel, #es-enter-world {
  background: linear-gradient(180deg, #dcc794 0%, #c2a86e 100%) !important;
  border: 3px solid var(--wood) !important;
  border-radius: 6px !important;
  color: var(--ink) !important;
  font-family: Georgia, serif !important;
  letter-spacing: .5px;
  text-shadow: none !important;
  box-shadow: 0 3px 0 rgba(90, 62, 34, .5) !important;
}
.cc-btn-next:hover:not(:disabled), .cc-btn-confirm:hover:not(:disabled),
.cc-btn-back:hover, #es-enter-world:hover {
  background: linear-gradient(180deg, #f0dcaa 0%, #d4ba80 100%) !important;
  transform: translateY(-1px);
}
.cc-btn-next:disabled, .cc-btn-confirm:disabled {
  filter: grayscale(.6); opacity: .55;
}
.cc-btn-confirm.ready { border-color: var(--gold) !important; }

/* ── Fenêtre du code d'accès ──────────────────────────────────── */
#modal-codegate .modal-box {
  background-image: url('../assets/ui-medieval/panel.png');
  background-size: 100% 100%;
  image-rendering: pixelated;
  border: none !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .6);
  padding: 52px 48px 44px;
}
.codegate-title { color: var(--ink) !important; font-family: Georgia, serif; }
.codegate-sub   { color: var(--ink-soft) !important; }
.codegate-error { color: #94402f !important; }

/* ── Bouton retour ────────────────────────────────────────────── */
.es-btn-back {
  background: rgba(43, 32, 20, .78) !important;
  border: 2px solid var(--gold) !important;
  color: var(--parch) !important;
  font-family: Georgia, serif !important;
}

/* ── Fenêtre de compte ────────────────────────────────────────── */
#modal-account .modal-box {
  background-image: url('../assets/ui-medieval/panel.png');
  background-size: 100% 100%;
  image-rendering: pixelated;
  border: none !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .6);
  padding: 46px 44px 38px;
  max-width: 440px;
}
.account-title {
  font-family: Georgia, serif; font-size: 20px; letter-spacing: 1px;
  color: var(--ink); text-align: center; margin-bottom: 8px;
}
.account-sub {
  color: var(--ink-soft); font-size: 13px; text-align: center;
  line-height: 1.5; margin-bottom: 18px;
}
.account-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.account-tab {
  flex: 1; padding: 9px 6px; cursor: pointer; font-size: 13px;
  font-family: Georgia, serif;
  background: rgba(211, 194, 156, .5); color: var(--ink-soft);
  border: 2px solid var(--wood); border-radius: 6px;
}
.account-tab.active {
  background: linear-gradient(180deg, #dcc794 0%, #c2a86e 100%);
  color: var(--ink); border-color: var(--gold);
}
.account-label {
  display: block; font-size: 12px; color: var(--ink-soft);
  margin: 12px 0 5px; font-family: Georgia, serif; letter-spacing: .5px;
}
.account-error {
  margin-top: 12px; padding: 8px 10px; border-radius: 5px;
  background: rgba(148, 64, 47, .14); color: #7d2f22; font-size: 13px;
}
.account-error.hidden { display: none; }
.account-actions {
  display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px;
}