/* =========================================================================
   Theme partage — style "Animal Crossing" : teal/creme/jaune, coins
   arrondis, boutons "chunky" en relief. Utilise par overlay / panneau /
   encyclopedie / bac a sable.
   ========================================================================= */
:root {
  /* Fonds */
  --sky-1:  #cfeef7;
  --sky-2:  #e7f4e2;
  --sand:   #f3eeda;
  --cream:  #f6efd6;   /* cartes cremes (type ACNH) */
  --card:   #fffdf5;   /* cartes claires */
  --line:   rgba(60,50,30,0.10);
  --line-2: rgba(60,50,30,0.18);

  /* Teal principal */
  --teal:      #35b6a3;
  --teal-d:    #1f9282;   /* ombre bouton */
  --teal-deep: #0e6f62;   /* bouton fonce (type "Proceed") */

  /* Accents */
  --leaf:   #8ccf5a;
  --leaf-d: #6cb23e;
  --yellow: #fcd85f;
  --yellow-d:#e4be3f;
  --coral:  #ef8f8f;
  --coral-d:#d76a6a;

  /* Texte */
  --ink:   #4b4838;
  --ink-2: #6a6656;
  --muted: #97917f;
  --on-teal:#ffffff;

  /* Rarete (conserve les noms utilises par le JS) */
  --commun: #35b6a3;
  --rare:   #9b7ee0;
  --rare2:  #f0b429;

  --radius:   22px;
  --radius-sm:14px;
  --shadow:   0 6px 0 rgba(60,50,30,0.06), 0 12px 26px rgba(60,50,30,0.12);
}

* { box-sizing: border-box; }

body {
  font-family: 'Baloo 2', system-ui, -apple-system, sans-serif;
  color: var(--ink);
}

/* Fond "ciel -> prairie -> sable" pour les pages de contenu */
.bg-acnh {
  background: linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 42%, var(--sand) 100%) fixed;
  min-height: 100vh;
}

/* --- Boutons chunky -------------------------------------------------------- */
.btn {
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800; font-size: 16px; line-height: 1;
  color: #fff; background: var(--teal);
  border: none; cursor: pointer;
  border-radius: 999px;
  padding: 13px 24px;
  box-shadow: 0 5px 0 var(--teal-d);
  transition: transform .06s ease, box-shadow .06s ease, filter .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { filter: brightness(1.05); }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--teal-d); }
.btn:disabled { opacity: .5; cursor: default; box-shadow: 0 5px 0 var(--teal-d); transform: none; }

.btn--deep   { background: var(--teal-deep); box-shadow: 0 5px 0 #0a5147; }
.btn--deep:active { box-shadow: 0 1px 0 #0a5147; }
.btn--yellow { background: var(--yellow); color: #6a5312; box-shadow: 0 5px 0 var(--yellow-d); }
.btn--yellow:active { box-shadow: 0 1px 0 var(--yellow-d); }
.btn--leaf   { background: var(--leaf); color: #2f4d16; box-shadow: 0 5px 0 var(--leaf-d); }
.btn--leaf:active { box-shadow: 0 1px 0 var(--leaf-d); }
.btn--ghost  { background: #fff; color: var(--ink); box-shadow: 0 5px 0 var(--line-2); }
.btn--ghost:active { box-shadow: 0 1px 0 var(--line-2); }
.btn--danger { background: var(--coral); color: #fff; box-shadow: 0 5px 0 var(--coral-d); }
.btn--danger:active { box-shadow: 0 1px 0 var(--coral-d); }

/* --- Cartes ---------------------------------------------------------------- */
.card {
  background: var(--card);
  border: 3px solid #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card--cream { background: var(--cream); }
.card-header {
  background: var(--teal);
  color: #fff; font-weight: 800; text-align: center;
  padding: 12px 16px; font-size: 18px;
  border-radius: calc(var(--radius) - 3px) calc(var(--radius) - 3px) 0 0;
}

/* --- Pastilles / onglets --------------------------------------------------- */
.pill {
  font-weight: 800; font-size: 15px; cursor: pointer;
  color: var(--ink-2); background: #fff;
  border: 2px solid var(--line);
  padding: 9px 16px; border-radius: 999px;
  transition: transform .06s, box-shadow .06s, background .12s, color .12s;
  box-shadow: 0 3px 0 var(--line);
}
.pill:hover { color: var(--ink); }
.pill.active { color: #fff; background: var(--teal); border-color: transparent; box-shadow: 0 3px 0 var(--teal-d); }
.pill.active.pill--yellow { color: #6a5312; background: var(--yellow); box-shadow: 0 3px 0 var(--yellow-d); }

/* --- Avatar ---------------------------------------------------------------- */
.avatar-ring img, .avatar-ring div { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--teal); }

/* --- Champs ---------------------------------------------------------------- */
.field {
  font-family: 'Baloo 2'; font-weight: 600; font-size: 16px; color: var(--ink);
  background: #fff; border: 2px solid var(--line-2); border-radius: 14px;
  padding: 11px 15px; outline: none;
}
.field:focus { border-color: var(--teal); }
.field.invalid { border-color: var(--coral); }

/* Barres de defilement discretes */
* { scrollbar-color: var(--teal) transparent; }