/*
  Tricoti — style.css
  Layout global, structure de page (pas de pixel art ici, voir pixel-art.css)
  Voir docs/tricoti-technical-spec.md section 2
*/

/* ------------------------------------------------------------------ */
/* Palette — relevée dans le pack Cozy Farm                            */
/* Sert uniquement aux petits éléments qui n'ont pas de sprite dédié    */
/* (barre de pousse, gouttes d'eau, ombre portée du texte).            */
/* GDD section 8 : verts du blé, jaune doré de l'épi, bruns terreux    */
/* ------------------------------------------------------------------ */

:root {
  --c-wheat:       #d9a441;  /* doré de l'épi mûr */
  --c-wheat-light: #f2cf72;
  --c-water:       #6ea8d8;
  --c-cream:       #e0c39a;  /* crème du lettrage du pack */
  --c-brown:       #6b4a2f;
  --c-brown-dark:  #3a2a20;  /* contour des sprites du pack */
  --c-warn:        #c85a3c;

  /* Échelle unique de tout le jeu : 1 pixel de dessin = var(--px) pixels
     écran. Sprites, cadres et police partagent cette valeur pour qu'aucun
     élément n'ait des pixels d'une autre taille que ses voisins. */
  --px: 2;
  --unit: 16px;                          /* grille de sprites (GDD section 8) */
  --tile: calc(var(--unit) * var(--px));
}

/* L'échelle suit la hauteur de l'écran, mais uniquement par valeurs entières :
   un facteur fractionnaire rendrait des pixels de tailles inégales.
   Les 4 zones doivent tenir sans défilement.

   Seuils mesurés dans le navigateur sur les DEUX axes, pas estimés. La
   largeur compte autant que la hauteur : c'est elle qui décide si les deux
   colonnes de la Boutique tiennent dans un quart d'écran. Un seuil posé sur
   la seule hauteur laissait la boutique déborder latéralement sans que rien
   ne le signale.

   À remesurer dès qu'une zone gagne une ligne. Les media queries des
   curseurs, dans pixel-art.css, doivent rester calées sur ces valeurs. */
@media (min-width: 1900px) and (min-height: 1075px) { :root { --px: 3; } }
@media (min-width: 2540px) and (min-height: 1430px) { :root { --px: 4; } }

/* ------------------------------------------------------------------ */
/* Reset minimal                                                       */
/* ------------------------------------------------------------------ */

* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
  display: flex;
  flex-direction: column;
  overflow: hidden;

  font-family: "Tricoti", monospace;
  font-size: var(--tile);   /* multiple entier de l'em de 16 px : rendu net */

  /* Les glyphes n'occupent qu'une douzaine des 16 px de l'em. Une hauteur de
     ligne de 1 laisserait 5 px de vide sous chaque texte, ce qui gonfle
     inutilement la barre du haut et les panneaux. */
  line-height: 0.75;
  color: var(--c-brown-dark);

  /* Le jeu se joue au survol : pas de sélection de texte pendant les balayages. */
  user-select: none;
  -webkit-user-select: none;
}

/* Une seule taille de texte : celle de la police, à l'échelle du jeu.
   Sans ça, un h2 hérite de 1.5em et ses pixels sont plus gros que ceux
   des sprites voisins. */
h1, h2, p, button { margin: 0; font: inherit; }

/* ------------------------------------------------------------------ */
/* Structure : barre du haut + 4 zones égales                          */
/* Spec technique section 7                                            */
/* ------------------------------------------------------------------ */

#topbar { flex: 0 0 auto; }

#zones {
  flex: 1 1 auto;
  min-height: 0;

  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: calc(2px * var(--px));
  padding: calc(2px * var(--px));
}