/*
  Tricoti — pixel-art.css
  Police pixel, rendu pixelisé (image-rendering: pixelated), découpe des spritesheets
  Voir docs/tricoti-design-doc.md section 8 (direction artistique)

  Règle du projet : tout ce qui s'affiche vient d'un asset. Pas de police
  système, pas de coin arrondi, pas de dégradé, pas d'ombre floue.

  Les sprites du pack Cozy Farm sont des spritesheets : on découpe par
  background-position (spec technique section 6). Les éléments qui doivent se
  répéter (herbe, terre, planches) sont exportés en fichiers autonomes par
  tools/build_ui.py, parce que CSS ne sait pas répéter une sous-région.

  Coordonnées relevées dans les planches (grille 16x16) :
    crops.png (96x592)  — ligne 9 = Blé (10e culture d'item list.txt)
                          colonne 0 = graines, colonnes 1 à 5 = stades de pousse
    items.png (160x192) — (9,0) Blé · (7,6) Gold Nugget · (0,5) White Wool · (4,6) Diamond
*/

/* ------------------------------------------------------------------ */
/* Police — construite par tools/build_font.py à partir du pack        */
/* a–z : « button maker.png » · 0–9 : « UI.png »                       */
/* accents et ponctuation : dessinés dans le même trait                */
/* ------------------------------------------------------------------ */

@font-face {
  font-family: "Tricoti";
  src: url("../assets/fonts/tricoti.ttf") format("truetype");
  font-display: block;
}

/* L'em de la police vaut 16 px de dessin. Une taille multiple de 16 px
   garde donc un rapport entier entre pixel de dessin et pixel écran. */

/* ------------------------------------------------------------------ */
/* Base pixelisée                                                      */
/* ------------------------------------------------------------------ */

.panel,
.plot,
.plot-soil,
.plot-crop,
.icon,
.zone,
body {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* ------------------------------------------------------------------ */
/* Tuiles répétables                                                   */
/* ------------------------------------------------------------------ */

.tile-grass {
  background-image: url("../assets/sprites/ui/grass.png");
  background-size: var(--tile) var(--tile);
  background-repeat: repeat;
}

.tile-plank {
  background-image: url("../assets/sprites/ui/plank.png");
  background-size: calc(9px * var(--px)) calc(77px * var(--px));
  background-repeat: repeat;
}

/* ------------------------------------------------------------------ */
/* Cadres 9 tranches                                                   */
/* ------------------------------------------------------------------ */

/* Les deux cadres ont des tranches médianes d'un seul pixel (voir
   tools/build_ui.py), étirées par `stretch` : un poteau est uniforme sur sa
   hauteur, une poutre sur sa longueur, donc étirer un pixel donne la bonne
   matière sans couture. `repeat` produisait des rayures sur les bords et
   laissait des trous quand la tranche ne tombait pas juste. */

/* Bandeau bois à intérieur beige — titres, compteurs, boutons */
.panel {
  border-style: solid;
  border-width: calc(5px * var(--px));
  border-image-source: url("../assets/sprites/ui/banner.png");
  border-image-slice: 5 fill;
  border-image-repeat: stretch;
  background: none;
}

/* Cadre en poutres — contour des 4 zones, du lopin et du pré */
.zone,
.field-bed,
.pen {
  border-style: solid;
  /* Poutres de 10 px en haut et en bas, poteaux de 9 px sur les côtés : le
     cadre du pack n'est pas symétrique, et forcer 10 px partout laissait
     passer un liseré de fond entre le poteau et le contenu. */
  border-width: calc(10px * var(--px)) calc(9px * var(--px));
  border-image-source: url("../assets/sprites/ui/frame.png");
  border-image-slice: 10 9;
  border-image-repeat: stretch;

  /* Sans ce clip, le fond (terre, herbe) se peint sous toute la bordure et
     déborde dans la gouttière transparente qui longe l'extérieur du poteau. */
  background-clip: padding-box;
}

/* ------------------------------------------------------------------ */
/* Terre d'une parcelle — tuile autonome                               */
/* ------------------------------------------------------------------ */

.plot-soil {
  position: absolute;
  inset: 0;
  background-image: url("../assets/sprites/ui/soil.png");
  background-size: var(--tile) var(--tile);
}

/* ------------------------------------------------------------------ */
/* Blé — crops.png, ligne 9                                            */
/* ------------------------------------------------------------------ */

.plot-crop {
  position: absolute;
  inset: 0;
  background-image: url("../assets/cozy-farm/farming/crops.png");
  background-size: calc(96px * var(--px)) calc(592px * var(--px));
  background-position:
    calc(-16px * var(--px) * var(--stage, 0))
    calc(-144px * var(--px));
  background-repeat: no-repeat;
  opacity: 0;
}

/* --stage n'est pas lisible depuis un data-attribute : on le pose ici. */
.plot[data-stage="1"] { --stage: 1; }
.plot[data-stage="2"] { --stage: 2; }
.plot[data-stage="3"] { --stage: 3; }
.plot[data-stage="4"] { --stage: 4; }
.plot[data-stage="5"] { --stage: 5; }

.plot[data-stage="1"] .plot-crop,
.plot[data-stage="2"] .plot-crop,
.plot[data-stage="3"] .plot-crop,
.plot[data-stage="4"] .plot-crop,
.plot[data-stage="5"] .plot-crop { opacity: 1; }

/* ------------------------------------------------------------------ */
/* Icônes de ressources — 16x16 de items.png / crops.png               */
/* ------------------------------------------------------------------ */

.icon {
  display: inline-block;
  width: var(--tile);
  height: var(--tile);
  flex: 0 0 auto;
  background-repeat: no-repeat;
}

.icon--coin,
.icon--wheat,
.icon--wool,
.icon--skill,
.icon--yarn,
.icon--cloth,
.icon--hay,
.icon--water,
.icon--gem {
  background-image: url("../assets/cozy-farm/ui/items.png");
  background-size: calc(160px * var(--px)) calc(192px * var(--px));
}

.icon--wheat { background-position: calc(-144px * var(--px)) 0; }                          /* (9,0) Wheat */
.icon--coin  { background-position: calc(-112px * var(--px)) calc(-96px * var(--px)); }    /* (7,6) Gold Nugget */
.icon--wool  { background-position: 0 calc(-80px * var(--px)); }                           /* (0,5) White Wool */
.icon--skill { background-position: calc(-64px * var(--px)) calc(-96px * var(--px)); }     /* (4,6) Diamond */

/* Quatre items de plus, pour que les perles de l'arbre se distinguent.
   Tous relevés dans items.png, donc à la même grille 16x16 que le reste. */
.icon--yarn  { background-position: calc(-32px * var(--px)) calc(-80px * var(--px)); }   /* (2,5) White Yarn */
.icon--cloth { background-position: calc(-64px * var(--px)) calc(-80px * var(--px)); }   /* (4,5) White Cloth */
.icon--hay   { background-position: calc(-96px * var(--px)) calc(-80px * var(--px)); }   /* (6,5) Hay */
.icon--water { background-position: calc(-80px * var(--px)) calc(-112px * var(--px)); }  /* (5,7) Water Bottle */

/* Le rubis, pour les succès. Le pack n'a ni coupe ni médaille ; c'est la
   seule gemme encore libre — le diamant sert aux compétences et la pépite
   aux pièces, donc les trois se distinguent au premier coup d'œil. */
.icon--gem { background-position: calc(-80px * var(--px)) calc(-96px * var(--px)); }    /* (5,6) Ruby */

/* Graine de blé : colonne 0 de la ligne Blé de crops.png */
.icon--seed {
  background-image: url("../assets/cozy-farm/farming/crops.png");
  background-size: calc(96px * var(--px)) calc(592px * var(--px));
  background-position: 0 calc(-144px * var(--px));
}

/* Parcelle à acheter : la tuile de terre bordée du sillon des parcelles */
.icon--plot {
  background-image: url("../assets/sprites/ui/plot.png");
  background-size: var(--tile) var(--tile);
}

/* Tricots finis. Le pack s'arrête à la laine brute : ces cinq icônes sont
   les seules de assets/sprites/items/ (voir le README de ce dossier). */
/* L'icône du chantier : le MÊME sprite de 32 px que dans le panneau, occupant
   la place d'une icône de 16.
 *
 * C'est la seule entorse à la règle « une seule échelle » de tout le jeu, et
 * elle est délibérée. Un 16×16 redessiné à la main a été essayé et regardé :
 * lisible, à la bonne échelle, mais sec — le marteau y est deux masses, pas un
 * marteau. Le 32 posé dans la même case est franchement plus joli.
 *
 * Ce n'est PAS une réduction : 32 pixels de dessin sur 32 pixels d'écran, c'est
 * du 1:1, aucun pixel n'est perdu. Ils sont seulement deux fois plus petits que
 * ceux des icônes voisines — et à cette taille, ça ne se voit pas.
 *
 * D'où la taille fixe en pixels d'écran plutôt qu'un multiple de --px : le
 * sprite ne doit jamais être affiché à une échelle fractionnaire. À --px 4 la
 * case fait 64 px et on peut doubler proprement ; à --px 3 elle en fait 48, et
 * l'image reste à 32, centrée, plutôt que d'être étirée d'une fois et demie. */
.icon--chantier {
  background-image: url("../assets/sprites/icons/chantier-32.png");
  background-size: 32px 32px;
  background-position: center;
}

@media (min-width: 2540px) and (min-height: 1430px) {
  .icon--chantier { background-size: 64px 64px; }
}

/* Le même sprite dans l'en-tête du panneau, là où il y a la place de lui donner
   l'échelle du reste du jeu. */
.icon--chantier-grand {
  background-image: url("../assets/sprites/icons/chantier-32.png");
  background-size: calc(32px * var(--px)) calc(32px * var(--px));
  width: calc(32px * var(--px));
  height: calc(32px * var(--px));
}

.icon--pull,
.icon--chaussettes,
.icon--bonnet,
.icon--echarpe,
.icon--gants {
  background-size: var(--tile) var(--tile);
}

.icon--pull        { background-image: url("../assets/sprites/items/pull.png"); }
.icon--chaussettes { background-image: url("../assets/sprites/items/chaussettes.png"); }
.icon--bonnet      { background-image: url("../assets/sprites/items/bonnet.png"); }
.icon--echarpe     { background-image: url("../assets/sprites/items/echarpe.png"); }
.icon--gants       { background-image: url("../assets/sprites/items/gants.png"); }

/* Mouton à acheter : 1re image de la ligne « de face » de la planche.
   La grille des animaux est en 17x17, pas 16x16 (cozy-farm/info.txt). */
.icon--sheep {
  background-image: url("../assets/cozy-farm/animals/sheep animation.png");
  background-size: calc(68px * var(--px)) calc(85px * var(--px));
  background-position: 0 0;
}

/* ------------------------------------------------------------------ */
/* Moutons — animals/sheep animation.png, grille 17x17                 */
/* 4 images par ligne. Ligne 0 : de face. Ligne 4 : assoupi, réutilisée */
/* pour le dépérissement.                                              */
/* ------------------------------------------------------------------ */

.sheep {
  --sheep-unit: 17px;
  --sheep-size: calc(var(--sheep-unit) * var(--px));
  position: relative;
  width: var(--sheep-size);
  height: var(--sheep-size);
}

.sheep-body {
  position: absolute;
  inset: 0;
  image-rendering: pixelated;
  background-repeat: no-repeat;
  background-image: url("../assets/cozy-farm/animals/sheep animation.png");
  background-size: calc(68px * var(--px)) calc(85px * var(--px));
  background-position:
    calc(-17px * var(--px) * var(--frame, 0))
    calc(-17px * var(--px) * var(--row, 0));
}

.sheep[data-frame="0"] { --frame: 0; }
.sheep[data-frame="1"] { --frame: 1; }
.sheep[data-frame="2"] { --frame: 2; }
.sheep[data-frame="3"] { --frame: 3; }

.sheep[data-health="ok"]   { --row: 0; }
.sheep[data-health="weak"] { --row: 4; }

/* Badge d'action au-dessus de la bête : blé s'il a faim, laine si elle a
   repoussé. Jamais les deux — la faim passe toujours avant la tonte. */
.sheep-badge {
  position: absolute;
  left: 50%;
  /* Entièrement au-dessus de la bête : l'icône fait 16 px et le mouton 17,
     donc le moindre chevauchement lui mange la tête. */
  top: calc(-18px * var(--px));
  width: var(--tile);
  height: var(--tile);
  margin-left: calc(var(--tile) / -2);
  pointer-events: none;
  image-rendering: pixelated;
  background-repeat: no-repeat;
  background-size: calc(160px * var(--px)) calc(192px * var(--px));
  background-image: none;
}

.sheep-badge--feed {
  background-image: url("../assets/cozy-farm/ui/items.png");
  background-position: calc(-144px * var(--px)) 0;                        /* Wheat */
}

.sheep-badge--shear {
  background-image: url("../assets/cozy-farm/ui/items.png");
  background-position: 0 calc(-80px * var(--px));                         /* White Wool */
}

/* Cœur du pack quand on le nourrit */
.pop--heart {
  background-image: url("../assets/cozy-farm/animals/heart.png");
  background-size: calc(7px * var(--px)) calc(7px * var(--px));
  width: calc(7px * var(--px));
  height: calc(7px * var(--px));
}

/* ------------------------------------------------------------------ */
/* Curseurs                                                            */
/*                                                                     */
/* Sprites 24x24 issus d'illustrations converties par                  */
/* tools/import_sprite.py. Pas de flèche : le curseur par défaut est   */
/* une pelote de laine dont le fil part en pointe vers le haut-gauche. */
/* C'est l'objet du jeu, et la pointe du fil sert de point chaud.      */
/*                                                                     */
/* Le navigateur n'applique pas image-rendering aux curseurs et ne les */
/* met pas à l'échelle : il faut donc un fichier pré-agrandi par       */
/* échelle de jeu, sinon les pixels du curseur seraient d'une autre    */
/* taille que ceux du décor. D'où les blocs @media ci-dessous, calés   */
/* sur les mêmes seuils que --px (voir style.css).                     */
/*                                                                     */
/* Les points chauds sont posés sur la partie active de l'outil, jamais */
/* au centre : le curseur est aussi large qu'une parcelle et masquerait */
/* celle qu'on survole. Valeurs imprimées par tools/import_sprite.py.  */
/* ------------------------------------------------------------------ */

body                       { cursor: url("../assets/sprites/ui/cursor-yarn@2x.png")    4  4, default; }
.plot.is-sowable           { cursor: url("../assets/sprites/ui/cursor-seed@2x.png")   10  6, default; }
.plot.is-watering          { cursor: url("../assets/sprites/ui/cursor-can@2x.png")     6 30, default; }
.plot[data-state="ready"]  { cursor: url("../assets/sprites/ui/cursor-sickle@2x.png")  6 10, default; }
.sheep[data-action="feed"] { cursor: url("../assets/sprites/ui/cursor-sheaf@2x.png")  42 36, default; }
.sheep[data-action="shear"]{ cursor: url("../assets/sprites/ui/cursor-shears@2x.png")  6  6, default; }

@media (min-width: 1900px) and (min-height: 1075px) {
  body                       { cursor: url("../assets/sprites/ui/cursor-yarn@3x.png")    6  6, default; }
  .plot.is-sowable           { cursor: url("../assets/sprites/ui/cursor-seed@3x.png")   15  9, default; }
  .plot.is-watering          { cursor: url("../assets/sprites/ui/cursor-can@3x.png")     9 45, default; }
  .plot[data-state="ready"]  { cursor: url("../assets/sprites/ui/cursor-sickle@3x.png")  9 15, default; }
  .sheep[data-action="feed"] { cursor: url("../assets/sprites/ui/cursor-sheaf@3x.png")  63 54, default; }
  .sheep[data-action="shear"]{ cursor: url("../assets/sprites/ui/cursor-shears@3x.png")  9  9, default; }
}

@media (min-width: 2540px) and (min-height: 1430px) {
  body                       { cursor: url("../assets/sprites/ui/cursor-yarn@4x.png")    8  8, default; }
  .plot.is-sowable           { cursor: url("../assets/sprites/ui/cursor-seed@4x.png")   20 12, default; }
  .plot.is-watering          { cursor: url("../assets/sprites/ui/cursor-can@4x.png")    12 60, default; }
  .plot[data-state="ready"]  { cursor: url("../assets/sprites/ui/cursor-sickle@4x.png") 12 20, default; }
  .sheep[data-action="feed"] { cursor: url("../assets/sprites/ui/cursor-sheaf@4x.png")  84 72, default; }
  .sheep[data-action="shear"]{ cursor: url("../assets/sprites/ui/cursor-shears@4x.png") 12 12, default; }
}