/* Chibi Creator - feuille de style
   Le fond est un ciel pixel art : degrade CSS + 3 couches de nuages qui
   defilent a des vitesses differentes (parallaxe). */

:root {
  --ciel-haut: #55a3e6;
  --ciel-bas: #8ccdf3;
  --encre: #12314a;
  --encre-doux: #5b7f9c;
  --accent: #2f7fd4;
  --accent-fonce: #1f5fa8;
  --carte: #ffffff;
  --bord: #d7e6f2;
  --rayon: 16px;
  --ombre: 0 10px 30px rgba(18, 49, 74, 0.18);
  --police: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--police);
  color: var(--encre);
  /* le degrade vit sur .ciel (position: fixed) : background-attachment: fixed
     sur le body provoque des a-coups au defilement */
  background: var(--ciel-bas);
}

/* ---------------------------------------------------------------- le ciel */

.ciel {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(180deg, var(--ciel-haut) 0%, var(--ciel-bas) 100%);
}

.nuages {
  position: absolute;
  left: 0;
  background-repeat: repeat-x;
  /* les PNG sont en basse resolution : c'est l'agrandissement en "pixelated"
     qui donne les gros pixels francs du pixel art */
  image-rendering: pixelated;
  /* Le defilement passe par transform, pas par background-position : transform
     est composite par le GPU, donc fluide. Animer background-position force un
     repaint de toute la bande a chaque image, et ca saccade.
     Pas de will-change : l'animation de transform promeut deja la couche, et le
     will-change ne ferait qu'immobiliser de la memoire GPU en plus. */
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* Chaque couche defile d'exactement une largeur de tuile -> boucle invisible.
   Les agrandissements sont des multiples entiers (x3, x4, x6), sinon les pixels
   bavent au lieu d'etre francs. La bande est plus large que l'ecran d'une tuile,
   sinon elle laisserait un vide a droite en fin de course.
   Plus la couche est "proche", plus ses pixels sont gros et plus elle va vite.

   Les hauteurs collent au plus juste au contenu des tuiles (60/56/52 px de
   source) : chaque pixel de bande en trop est composite a chaque image sur
   TOUTE la largeur de l'ecran, pour rien. Si tu changes la hauteur d'une tuile
   dans make_sky.py, reporte ici hauteur_source x facteur. */
.nuages--loin {
  top: 4%;
  height: 180px;                 /* 60 x3 */
  /* + une tuile (la course) + 8px de marge, pour qu'un arrondi au pixel ne
     laisse jamais un lisere de ciel a droite en fin de cycle */
  width: calc(100% + 1448px);
  background-size: 1440px 180px;
  opacity: 0.8;
  animation-name: derive-loin;
  animation-duration: 200s;
}

.nuages--milieu {
  top: 26%;
  height: 224px;                 /* 56 x4 */
  width: calc(100% + 1928px);
  background-size: 1920px 224px;
  opacity: 0.92;
  animation-name: derive-milieu;
  animation-duration: 130s;
}

.nuages--pres {
  bottom: 0;
  height: 312px;                 /* 52 x6 */
  width: calc(100% + 2888px);
  background-size: 2880px 312px;
  animation-name: derive-pres;
  animation-duration: 80s;
}

@keyframes derive-loin   { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-1440px, 0, 0); } }
@keyframes derive-milieu { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-1920px, 0, 0); } }
@keyframes derive-pres   { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-2880px, 0, 0); } }

@media (prefers-reduced-motion: reduce) {
  .nuages { animation: none !important; }
}

/* --------------------------------------------------------------- structure */

.page {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 16px 56px;
}

.entete {
  text-align: center;
  margin-bottom: 22px;
  color: #fff;
  text-shadow: 0 2px 10px rgba(18, 49, 74, 0.35);
}

.entete h1 {
  margin: 0;
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  letter-spacing: -0.02em;
}

.entete p {
  margin: 6px 0 0;
  font-size: 0.9rem;
  opacity: 0.95;
}

.grille-principale {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

@media (min-width: 900px) {
  .grille-principale { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}

/* Pas de backdrop-filter ici. Un flou d'arriere-plan par-dessus un fond ANIME
   force le navigateur a refaire le flou de chaque carte a chaque image : avec
   8 cartes, ca sature le GPU de toute la machine (les autres onglets rament).
   Fond opaque = simple blit, quasi gratuit. */
.carte {
  background: var(--carte);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
}

/* ------------------------------------------------------------ personnage */

.perso {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 auto 18px;
  padding: 8px 10px;
  width: fit-content;
  border-radius: 999px;
}

.perso__nom { font-size: 1.15rem; font-weight: 700; line-height: 1.15; }
.perso__note { font-size: 0.72rem; color: var(--encre-doux); min-height: 1em; }
.perso__bloc { min-width: 9rem; text-align: center; }

/* --------------------------------------------------------------- boutons */

.rond {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--accent-fonce);
  background: #fff;
  border: 1px solid var(--bord);
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.08s ease, background 0.15s ease;
}

.rond:hover:not(:disabled) { background: #eaf4fd; }
.rond:active:not(:disabled) { transform: scale(0.92); }
.rond:disabled { opacity: 0.3; cursor: default; }

.lien {
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
  padding: 4px;
  flex: 0 0 auto;
}
.lien:hover { text-decoration: underline; }

.bouton-principal {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 14px;
  font: inherit;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-fonce) 100%);
  border: 0;
  border-radius: 12px;
  box-shadow: 0 4px 0 #17497f;
  cursor: pointer;
}
.bouton-principal:hover:not(:disabled) { filter: brightness(1.06); }
.bouton-principal:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 #17497f; }
.bouton-principal:disabled { opacity: 0.45; cursor: default; box-shadow: none; }

.actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.bouton-2 {
  flex: 1;
  padding: 10px;
  font: inherit;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--accent-fonce);
  background: #eef5fc;
  border: 1px solid var(--bord);
  border-radius: 10px;
  cursor: pointer;
}
.bouton-2:hover:not(:disabled) { background: #e0eefb; }
.bouton-2:disabled { opacity: 0.45; cursor: default; }
.bouton-2--occupe { color: var(--encre-doux); }

/* --------------------------------------------------------------- preview */

.scene { padding: 14px; }

.cadre {
  border-radius: 12px;
  overflow: hidden;
  /* damier : rappelle que le PNG exporte a un fond transparent */
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #eef4f8 25%, transparent 25%),
    linear-gradient(-45deg, #eef4f8 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #eef4f8 75%),
    linear-gradient(-45deg, transparent 75%, #eef4f8 75%);
  background-size: 22px 22px;
  background-position: 0 0, 0 11px, 11px -11px, -11px 0;
}

#preview { display: block; width: 100%; height: auto; }

.etat {
  margin: 8px 2px 0;
  font-size: 0.75rem;
  color: var(--encre-doux);
  min-height: 1.1em;
}

/* ------------------------------------------------------------ categories */

.panneau { display: flex; flex-direction: column; gap: 12px; }

.cat { padding: 12px 14px; }

.cat__tete { display: flex; align-items: center; gap: 8px; }

.cat__titre {
  width: 5.5rem;
  flex: 0 0 auto;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--encre-doux);
}

.cat__courant {
  flex: 1 1 auto;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cat__grille {
  display: none;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 8px;
  margin-top: 12px;
  padding: 4px;
  max-height: 260px;
  overflow-y: auto;
}

.cat__grille.ouvert { display: grid; }

.vignette {
  aspect-ratio: 1;
  padding: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #f4f9fd;
  border: 2px solid var(--bord);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.12s ease, transform 0.08s ease;
}

.vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vignette span { font-size: 0.65rem; color: var(--encre-doux); }
.vignette:hover { border-color: #9cc4e6; }
.vignette--actif {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(47, 127, 212, 0.25);
}

.vide { font-size: 0.85rem; color: var(--encre-doux); padding: 6px 2px; }

.pied {
  margin-top: 22px;
  text-align: center;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 6px rgba(18, 49, 74, 0.4);
}