/* Comptoir — le commerce des provinces
   Copyright (c) 2026 Tristan Cazenave. Tous droits réservés — voir LICENSE.

   La carte prend la largeur ; tout le reste s'arrange autour d'elle, et rien
   ne descend en dessous de 44 px sous le pouce. */

:root {
  /* ── LE CODE COULEUR DES JEUX DE GO ────────────────────────────────────────
     CELUI DE LA PORTE. golois.com et nestedplay.com ouvrent sur la même page
     d'accueil ; les huit jeux en reprennent les couleurs, au lieu que la porte
     prenne les leurs. Le gris calme laisse le BOIS DES GOBANS être la seule
     chose chaude de l'écran — et il ressort mieux sur ce gris (1,25:1) qu'il ne
     ressortait sur un fond beige (1,09:1), où il se noyait.

     Trois états, trois traitements, et jamais la couleur seule :
       à prendre    fond `--choix`, bord `--bord-choix`      3,9:1
       retenu       fond `--accent`, texte clair, gras       8,4:1
       impossible   `--texte-doux`, sans bord
     ──────────────────────────────────────────────────────────────────────── */
  --fond: #E6E7E1;         /* le gris de la porte */
  --surface: #F6F6F1;      /* une carte posée dessus */
  --ligne: #CDCEC5;
  --texte: #171A20;        /* 16,1:1 sur la carte */
  --texte-doux: #4E5663;   /*  6,8:1 sur la carte */
  --choix: #EDEDE6;        /* le fond d'un choix qu'on peut prendre */
  --bord-choix: #6E7684;   /* 3,9:1 sur ce fond — un vrai contour */
  --focus: #1d4ed8;        /* 5,7:1 sur un choix */
  --accent: #2C4E7E;       /* CE QUI EST RETENU, et rien d'autre */
  --accent-clair: #DCE6F2;
  --sur-accent: #fff;      /* ce qui s'écrit SUR l'accent */
  --ble: #e6c463; --vigne: #8e3b52; --bois: #4f7548; --pierre: #9aa0a6;
  --sel: #dfe6ea; --desert: #cdbf9d;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #13161B; --surface: #1B1F26; --ligne: #333A45;
    --texte: #E8E9E4; --texte-doux: #A5ACB8;
    --choix: #232830; --bord-choix: #7C8797;
    --accent: #8CB0E2; --accent-clair: #22304A; --sur-accent: #0E1620;
  }
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--fond); color: var(--texte);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%; }
button, input, select { font: inherit; color: inherit; }
.ecran { display: flex; flex-direction: column; min-height: 100%; }
/* `display:flex` écrase la règle du navigateur pour [hidden] : sans cette
   ligne, les deux écrans se superposent. */
.ecran[hidden] { display: none; }
.pousse { flex: 1; }

.btn { appearance: none; background: var(--surface); border: 1px solid var(--ligne);
  color: var(--texte); border-radius: 10px; padding: 10px 14px; cursor: pointer;
  min-height: 44px; }
.btn:disabled { opacity: .4; cursor: default; }
.btn-primaire { background: var(--accent); border-color: var(--accent);
  color: var(--sur-accent); font-weight: 650; }
.btn-mini { padding: 6px 10px; min-height: 36px; font-size: 13px; }
.seg { display: inline-flex; border: 1px solid var(--ligne); border-radius: 999px;
  overflow: hidden; }
.seg button { appearance: none; background: transparent; border: 0;
  color: var(--texte-doux); font-size: 12px; letter-spacing: .08em;
  padding: 6px 10px; cursor: pointer; min-height: 36px; }
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--sur-accent); }

.boite { background: var(--surface); border: 1px solid var(--ligne);
  border-radius: 16px; margin: 16px auto; max-width: 34rem; width: calc(100% - 24px); }
.boite-tete { padding: 16px 18px 0; }
.boite-tete h1 { margin: 8px 0 0; font-size: 30px; }
.sous-titre { margin: 8px 0 0; color: var(--texte-doux); font-size: 14px; }
.sous-titre .rappel { opacity: .8; font-size: 13px; }
.boite-corps { padding: 16px 18px; }
.boite-pied { display: flex; gap: 8px; padding: 0 18px 18px; }
.champ label { font-weight: 600; }
#sieges { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.siege { display: flex; align-items: center; gap: 10px; }
.pion { width: 18px; height: 18px; border-radius: 50%; flex: none;
  border: 2px solid var(--ligne); }
.siege select { flex: 1; min-height: 44px; border-radius: 10px;
  border: 1px solid var(--ligne); background: var(--surface); padding: 0 10px; }

#barre { display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  border-bottom: 1px solid var(--ligne); }
#phase { font-weight: 650; font-size: 14px; }
#scores { display: flex; gap: 6px; }
#scores span { font-size: 12px; font-weight: 650; color: #fff;
  border-radius: 999px; padding: 3px 8px; font-variant-numeric: tabular-nums; }

#zone-carte { padding: 6px; display: flex; justify-content: center; }
#carte { width: 100%; max-width: 560px; height: auto; touch-action: manipulation; }

.region { stroke: #8a7f6a; stroke-width: 1.2; }
.region.ble { fill: var(--ble); } .region.vigne { fill: var(--vigne); }
.region.bois { fill: var(--bois); } .region.pierre { fill: var(--pierre); }
.region.sel { fill: var(--sel); } .region.desert { fill: var(--desert); }
.region.offerte { stroke: var(--texte); stroke-width: 4; cursor: pointer; }
.region.brigande { filter: grayscale(.75) brightness(.75); }
/* Chaque route est doublee : un socle dessous, le trait dessus. C'est le socle
   qui detache la route du bordeaux du vignoble et du vert de la foret, ou un
   trait rouge ou vert se perdait. Les couleurs des regions ne suivent pas le
   theme du systeme : socle et trait sont donc ecrits en dur, jamais pris dans
   les variables, qui changent avec le theme. */
.socle { stroke: #fffdf5; stroke-linecap: round; stroke-width: 10; opacity: .92; }
.socle.offerte { stroke-width: 12.5; opacity: .95; }
/* Une route prise se cerne de sombre et se double de clair : entre les deux,
   la couleur du joueur se lit sur le vignoble comme sur le blé — l'or sur le
   blé n'a pas d'autre secours. */
.socle.prise { stroke: #14110c; stroke-width: 16; opacity: 1; }
/* Le choix se signale en noir et blanc, jamais en bordeaux : l'accent du
   site est justement la couleur du vignoble, et la route choisie y
   disparaitrait. */
.socle.choisie { stroke: #14110c; stroke-width: 16; opacity: 1; }
.lisere { stroke: #fffdf5; stroke-width: 12.5; stroke-linecap: round; }
.route { stroke: #453d30; stroke-width: 4; stroke-linecap: round; opacity: .9; }
.route.offerte { stroke: #1e1a14; opacity: 1; stroke-dasharray: 7 5; stroke-width: 6; }
.route.prise { opacity: 1; stroke-width: 7; }
.route.choisie { stroke: #fffdf5; stroke-dasharray: none; stroke-width: 8; opacity: 1; }
/* Rien de ce qui est pose sur les regions ne prend le toucher : le brigand se
   pose sur la region, et une route ou un comptoir sous le doigt ne doit pas
   avaler le geste. Le reste se vise par la geometrie, jamais par la cible. */
.socle, .lisere, .route, .halo, .noeud, .jeton, .jeton-n, .brigand { pointer-events: none; }
.jeton { fill: #fdf7e6; stroke: #5a5040; stroke-width: 1.2; }
.jeton-n { font: 700 13px system-ui; text-anchor: middle; dominant-baseline: central;
  fill: #2b2620; }
.brigand { font: 700 17px system-ui; text-anchor: middle; dominant-baseline: central;
  fill: #12100c; }
.halo { fill: none; stroke: #fffdf5; stroke-width: 5; opacity: .95; }
.noeud { fill: #fff; stroke: #2b2620; stroke-width: 2; }
.noeud.triple { fill: #2b2620; stroke: #fff; }
.noeud.offert { stroke: var(--accent); stroke-width: 5; }
.noeud.choisi { stroke: var(--accent); stroke-width: 7; }
.noeud.comptoir, .noeud.ville { stroke: #12100c; stroke-width: 2.5; }

.dit { margin: 0; padding: 6px 14px 0; color: var(--texte-doux); font-size: 14px;
  min-height: 2.4em; }
.main { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 12px; }
.denree { display: inline-flex; align-items: center; gap: 5px; font-size: 13px;
  border: 1px solid var(--ligne); border-radius: 999px; padding: 5px 10px;
  background: var(--surface); font-variant-numeric: tabular-nums; }
.denree i { width: 12px; height: 12px; border-radius: 3px; display: block; }
.actions { display: flex; flex-wrap: wrap; gap: 8px;
  padding: 8px 12px calc(12px + env(safe-area-inset-bottom)); }

.modale { position: fixed; inset: 0; background: #0b0e0a99; display: flex;
  align-items: center; justify-content: center; padding: 16px; z-index: 20; }
.modale[hidden] { display: none; }
.modale-boite { background: var(--surface); border-radius: 14px; max-width: 34rem;
  width: 100%; max-height: 88vh; display: flex; flex-direction: column; }
.modale-tete { display: flex; align-items: center; gap: 10px; padding: 14px 16px;
  border-bottom: 1px solid var(--ligne); }
.modale-tete h2 { margin: 0; font-size: 18px; flex: 1; }
.modale-corps { padding: 14px 16px; overflow: auto; }
.modale-corps h3 { font-size: 14px; color: var(--accent); margin: 14px 0 6px; }
.modale-corps p, .modale-corps li { font-size: 14px; }
.modale-corps table { border-collapse: collapse; font-size: 14px; }
.modale-corps td { padding: 3px 12px 3px 0; }
.modale-pied { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px;
  border-top: 1px solid var(--ligne); }