/* La table de jeu — la feuille de l'écran de partie et de ses écrans voisins.
 *
 * Elle n'est chargée que par `index.html`, après `styles.css` dont elle reprend
 * l'identité (sérif, mono en petites capitales, papier crème, filets noirs,
 * aucun arrondi). La page `/stats` ne charge que la base : rien de ce qui est
 * ici ne doit lui être nécessaire.
 *
 * Le plan : trois colonnes plein écran — le plateau à gauche, la séance au
 * centre avec la main posée en bas, la table à droite. */

:root {
  --paper-2: #f6f3ec; /* rails */
  --paper-3: #f2efe7; /* bandeau de main, lignes de bot */
  --paper-4: #efece3; /* cases de numéro, années passées */
  --hatch: rgba(168, 50, 30, .22);
  --hatch-near: rgba(168, 50, 30, .42);
  --shadow-card: 2px 3px 0 rgba(20, 20, 15, .12);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper-2: #1c1c21;
    --paper-3: #212127;
    --paper-4: #26262c;
  }
}

/* Une teinte par jauge : même clarté, même chroma, seule la teinte varie —
   aucune n'attire l'œil plus qu'une autre. Le même attribut sert la piste du
   plateau et chaque chevron d'effet, d'où deux endroits colorés d'un coup. */
[data-gauge="ECOLOGIE"] { --g: oklch(0.5 0.1 150); }
[data-gauge="POPULATION"] { --g: oklch(0.5 0.1 25); }
[data-gauge="ENERGIE"] { --g: oklch(0.5 0.1 80); }
[data-gauge="INDUSTRIE"] { --g: oklch(0.5 0.1 265); }
[data-gauge="RESSOURCES"] { --g: oklch(0.5 0.1 320); }
[data-gauge="TECHNOLOGIE"] { --g: oklch(0.5 0.1 205); }

@media (prefers-color-scheme: dark) {
  [data-gauge="ECOLOGIE"] { --g: oklch(0.72 0.1 150); }
  [data-gauge="POPULATION"] { --g: oklch(0.72 0.1 25); }
  [data-gauge="ENERGIE"] { --g: oklch(0.72 0.1 80); }
  [data-gauge="INDUSTRIE"] { --g: oklch(0.72 0.1 265); }
  [data-gauge="RESSOURCES"] { --g: oklch(0.72 0.1 320); }
  [data-gauge="TECHNOLOGIE"] { --g: oklch(0.72 0.1 205); }
}

/* --- coque ---------------------------------------------------------------
   Plein écran, sans ascenseur de page : chaque colonne défile chez elle. La
   main ne doit jamais passer sous le pli, c'est tout le point de la refonte. */

body {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100vh;
  overflow: hidden;
}
.topbar { position: static; padding: .5rem 1.2rem; }
#app { max-width: none; margin: 0; padding: 0; gap: 0; min-height: 0; }
.screen { gap: 0; min-height: 0; }

/* Les écrans hors partie défilent normalement ; l'écran de partie, jamais. */
#screen-identity,
#screen-lobby,
#screen-room,
#screen-admin,
#screen-cards { overflow: auto; }

#screen-identity { max-width: 34rem; margin: 3rem auto; padding: 0 1.2rem; }

/* --- écran de partie : trois colonnes ------------------------------------ */

#screen-game {
  display: grid;
  grid-template-columns: 390px minmax(0, 1fr) 360px;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 0;
}
#screen-game > .banner,
#screen-game > .actions { grid-column: 1 / -1; }

/* Bandeau d'année : la piste des 12 années tient sur la même ligne que le
   reste au lieu de se jeter sur une seconde. */
.banner {
  border: 0; border-bottom: 1px solid var(--line);
  padding: .5rem 1.2rem; gap: 1rem; align-items: center; flex-wrap: nowrap;
}
.banner .mono { white-space: nowrap; font-size: .72rem; }
.banner .spacer { display: none; }
.years { flex: 1; flex-basis: auto; min-width: 0; }
.years li.past { background: var(--paper-4); }
.years li.now { font-weight: 700; }

#screen-game > .actions {
  margin: 0; padding: .35rem 1.2rem; gap: .5rem;
  border-top: 1px solid var(--line); background: var(--paper-2);
}
#screen-game > .actions button { padding: .3rem .8rem; font-size: .62rem; }

.rail { min-height: 0; display: grid; align-content: start; }

/* Le socle des blocs de rail : filet fin, papier, respiration courte. Chaque
   panneau le raffine ensuite. */
.rail .card-panel { padding: .7rem .85rem; background: var(--paper); }
.rail-left h2,
.rail-right h2,
.panel-hand h2,
.panel-goals h2 {
  font-family: var(--mono); font-size: .62rem; font-weight: 400;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  margin: 0 0 .45rem;
}

/* --- rail gauche : le plateau -------------------------------------------- */

/* Le rail ne scrolle pas : jauges et Événement gardent leur hauteur, et c'est
   la liste des lois — le seul bloc qui grandit sans fin — qui prend le reste et
   porte l'ascenseur. */
.rail-left {
  display: flex; flex-direction: column;
  border-right: 1px solid var(--line); background: var(--paper-2);
  padding: 1rem 1.1rem; gap: .9rem; overflow: hidden;
}
.rail-left > .gauges,
.rail-left > .event { flex: none; }

.gauges {
  border: 1px solid var(--line); background: var(--paper);
  padding: .8rem .85rem; gap: .55rem;
}
.gauge {
  display: grid; grid-template-columns: 6.4rem 1fr 1.6rem;
  align-items: center; gap: .6rem;
}
.gauge-name {
  flex: none; font-size: .6rem; letter-spacing: .1em; color: var(--g, var(--muted));
}
.gauge-value { flex: none; font-size: .85rem; }

/* La piste : vingt cases de 5 %, un cube, et les deux zones mortelles hachurées
   qui disent d'un coup d'œil de quel côté le monde casse. */
.track {
  flex: none; height: 15px; border: 1px solid var(--rule);
  background: repeating-linear-gradient(90deg, var(--paper) 0 calc(5% - 1px), var(--rule) calc(5% - 1px) 5%);
}
.track::before,
.track::after {
  top: 0; bottom: 0; height: auto; width: 10%;
  background: repeating-linear-gradient(45deg, var(--hatch) 0 3px, transparent 3px 6px);
}
.track::before { left: 0; }
.track::after { left: auto; right: 0; }
.cube {
  top: -3px; width: 15px; height: 19px; margin-left: -8px;
  background: var(--g, var(--ink)); border: 1px solid var(--line);
}

/* Une case des deux bouts : la jauge cesse d'avoir sa couleur et prend celle
   de l'alerte, la zone menacée double de largeur. */
.gauge.danger { --g: var(--alert); --hatch: var(--hatch-near); }
.gauge.danger .gauge-name,
.gauge.danger .gauge-value { font-weight: 700; color: var(--alert); }
.gauge.danger .track { border-color: var(--alert); }
.gauge.danger .cube { top: -4px; height: 21px; }
.gauge[data-side="low"] .track::before,
.gauge[data-side="high"] .track::after { width: 20%; }

/* TECHNOLOGIE n'est pas une jauge mais la piste de victoire : pas de seuil
   mortel, un remplissage jusqu'à la valeur, et le trait plus appuyé. */
.gauge[data-gauge="TECHNOLOGIE"] { margin-top: .35rem; }
.gauge[data-gauge="TECHNOLOGIE"] .track { height: 22px; border: 1px solid var(--line); }
.gauge[data-gauge="TECHNOLOGIE"] .track::before {
  width: var(--v, 0%); background: var(--g); opacity: .18;
}
.gauge[data-gauge="TECHNOLOGIE"] .track::after { content: none; }
.gauge[data-gauge="TECHNOLOGIE"] .cube { top: -3px; width: 18px; height: 26px; margin-left: -9px; }
.gauge[data-gauge="TECHNOLOGIE"] .gauge-value { font-family: var(--serif); font-size: 1.1rem; }

.event {
  border: 1px solid var(--line); border-left: 4px solid var(--alert);
  background: var(--paper); padding: .7rem .85rem;
}
.event strong { font-size: 1.15rem; }

/* Titre et total de la phase 5 restent en place, seule la liste défile : le
   chiffre sur lequel on vote ne doit pas partir en haut de l'ascenseur. */
.panel-laws {
  border: 1px solid var(--rule); flex: 1 1 auto; min-height: 0;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto;
}
#g-laws {
  display: grid; gap: .45rem; align-content: start;
  min-height: 0; overflow: auto;
}
#g-laws > li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline; gap: .1rem .5rem; padding: .45rem .6rem;
  border: 1px solid var(--rule); background: var(--paper);
}
#g-laws > li > .grow { grid-column: 1; display: grid; gap: .1rem; }
#g-laws > li > .tag { grid-column: 2; grid-row: 1; border: 0; padding: 0; font-size: .55rem; }
#g-laws strong { font-size: .98rem; }
#g-laws .chev { font-size: .62rem; gap: .6rem; }
#g-laws .tag { font-size: .55rem; }
#g-laws .components { font-size: .55rem; }

/* --- colonne centrale : la séance ---------------------------------------- */

.rail-center {
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 21rem);
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 0;
}
#g-outcome { grid-area: 1 / 1 / 2 / 3; margin: 1rem 1.2rem 0; }
.panel-session { grid-area: 2 / 1 / 3 / 3; }
.panel-hand { grid-area: 3 / 1 / 4 / 2; }
.panel-goals { grid-area: 3 / 2 / 4 / 3; }

.panel-session {
  border: 0; padding: .9rem 1.2rem .6rem; min-height: 0;
  display: grid; gap: .2rem .8rem;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto auto;
}
.panel-session > h2 { grid-area: 1 / 1; margin: 0; align-self: baseline; }
.panel-session > #g-proposals { grid-area: 2 / 1 / 3 / 3; overflow: auto; }
.panel-session > #no-proposals { grid-area: 3 / 1 / 4 / 3; }
.panel-session > #g-vote { grid-area: 4 / 1 / 5 / 3; margin-top: .4rem; }

/* L'invite : ce qu'on attend de toi, encadré en tête de colonne au lieu d'être
   noyé au-dessus de la main. */
#g-prompt {
  grid-area: 1 / 2; justify-self: end; align-self: center; margin: 0;
  border: 1px solid var(--alert); color: var(--alert);
  padding: .2rem .5rem; font-size: .68rem;
}

#g-proposals { display: grid; gap: .7rem; align-content: start; padding: .6rem 0; }
li.prop {
  display: grid; grid-template-columns: 2.6rem minmax(0, 1fr);
  align-items: stretch; gap: 0; padding: 0;
  border: 1px solid var(--line); background: var(--paper);
}
.prop .num {
  display: grid; place-items: center; height: auto; font-size: 1.1rem;
  border: 0; border-right: 1px solid var(--line); background: var(--paper-4);
}
/* Ta proposition : c'est sur elle que tu dois répondre aux amendements. */
li.prop.yours { border: 2px solid var(--alert); }
.prop.yours .num { background: var(--alert); color: var(--paper); border-right-color: var(--alert); }

.prop > .grow {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: .25rem .6rem; padding: .7rem .9rem;
}
.prop > .grow > .chev,
.prop > .grow > .amend,
.prop > .grow > .pending-row { flex: 0 0 100%; }
.prop strong { display: inline; font-size: 1.15rem; }
.prop .pending-row {
  border-top: 1px solid var(--rule); padding-top: .45rem; margin-top: .25rem;
  align-items: center; gap: .8rem;
}
.prop .pending-row .amend { flex: 1; min-width: 18rem; }

/* Un chevron par point, à la teinte de sa jauge : c'est la mise en page qui
   les sépare, pas un séparateur écrit. */
.chev { display: flex; flex-wrap: wrap; gap: .9rem; font-size: .72rem; }
.ef { color: var(--g, inherit); }
.chev.was { opacity: .6; text-decoration: line-through; }
.chev.was .ef { color: var(--muted); }

.extras { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .5rem; }
.components {
  font-family: var(--mono); font-size: .58rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.breakthrough {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid var(--g); color: var(--g); padding: .05rem .35rem;
  --g: oklch(0.5 0.1 205);
}
@media (prefers-color-scheme: dark) { .breakthrough { --g: oklch(0.72 0.1 205); } }
/* Une Percée conditionnelle qui ne donnerait rien maintenant : le cadre reste,
   la promesse s'éteint. C'est ce qui distingue « pas encore » de « en panne ». */
.breakthrough.none { --g: var(--muted); opacity: .65; }
.extras .note { font-size: .58rem; font-style: italic; }

/* --- le bandeau du bas : la main en éventail ----------------------------- */

.panel-hand,
.panel-goals {
  border: 0; border-top: 1px solid var(--line); background: var(--paper-3);
  padding: .7rem 1.2rem; display: grid; gap: .4rem; align-content: end; min-height: 0;
}
.panel-goals { padding-left: 0; align-content: start; }
#g-piles { margin: 0; gap: .5rem; }
#g-hand { display: flex; align-items: flex-end; padding-left: 6px; }
/* De l’air sous l’éventail : les cartes tournées plongent sous leur boîte. */
#g-hand[data-mode="fan"] { padding-bottom: 8px; }
#g-hand:is([data-mode="draw"], [data-mode="discard"]) {
  flex-wrap: wrap; align-items: flex-start; gap: .7rem; padding-left: 0;
}
/* Défausser n’est pas jouer : le bouton prend le trait de l’alerte. */
#g-hand > .card-chip > button.drop {
  background: transparent; color: var(--alert); border-color: var(--alert);
}
/* En session, rendre sa carte en trop n’empêche pas de proposer : les deux
   boutons se partagent la rangée du bas plutôt que de se superposer. */
#g-hand > .card-chip:has(> button.drop) > button:not(.drop) { grid-area: 3 / 1 / 4 / 2; }
#g-hand > .card-chip:not(.off):has(> button:not(.drop)) > button.drop { grid-area: 3 / 2 / 4 / 3; }

/* 63 × 88 mm, le format des planches imprimées. Ne pas s'écarter du ratio. */
#g-hand > .card-chip {
  --rot: 0deg;
  position: relative; flex: none; width: 168px; height: 235px; margin: 0;
  border: 1px solid var(--line); background: var(--paper);
  box-shadow: var(--shadow-card); padding: .6rem .65rem;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr) auto; gap: .35rem;
  transform: rotate(var(--rot));
  transition: transform 120ms ease-out;
}
/* L'éventail : la main s'ouvre autour de son milieu, les cartes se chevauchent
   comme en main. À plat dès qu'on pioche ou qu'on défausse — là on compare. */
#g-hand[data-mode="fan"] > .card-chip {
  --rot: calc((var(--i, 0) - (var(--n, 1) - 1) / 2) * 5deg);
  transform-origin: bottom center;
  margin-right: -22px;
}
#g-hand > .card-chip:hover { transform: translateY(-3px) rotate(var(--rot)); z-index: 3; }
#g-hand > .card-chip.off { opacity: .55; }
/* Injouable : le bouton s'efface, la raison venue du serveur prend sa place. */
#g-hand > .card-chip.off > button:not(.drop) { display: none; }

#g-hand > .card-chip > .tag {
  grid-area: 1 / 1; border: 0; padding: 0;
  font-size: .52rem; letter-spacing: .1em; color: var(--muted);
}
#g-hand > .card-chip > .copies {
  grid-area: 1 / 2; font-family: var(--mono); font-size: .52rem; color: var(--muted);
}
#g-hand > .card-chip > .grow {
  grid-area: 2 / 1 / 3 / 3; display: grid; align-content: start;
  gap: .35rem; min-height: 0; overflow: hidden;
}
#g-hand > .card-chip > button {
  grid-area: 3 / 1 / 4 / 3; padding: .4rem .5rem; font-size: .62rem;
}
#g-hand > .card-chip strong { font-size: 1rem; line-height: 1.15; }
#g-hand > .card-chip .chev { display: grid; gap: 2px; font-size: .58rem; }
#g-hand > .card-chip .ef {
  display: flex; justify-content: space-between; gap: .3rem;
  border: 1px solid var(--rule); padding: .1rem .25rem;
}
#g-hand > .card-chip .ar { font-weight: 700; }
#g-hand > .card-chip .muted { font-size: .72rem; line-height: 1.35; }
#g-hand > .card-chip .why { font-size: .55rem; line-height: 1.3; }
/* Les composantes de la carte imprimée : elles tiennent sous le titre, en une
   ou deux lignes, sans jamais repousser les chevrons hors du cadre. */
#g-hand > .card-chip .extras { gap: .15rem .4rem; margin-top: -.2rem; }
#g-hand > .card-chip .components { font-size: .52rem; letter-spacing: .08em; }
#g-hand > .card-chip .breakthrough { font-size: .52rem; letter-spacing: .06em; }

/* Le sélecteur de cible s'ouvre au-dessus de la carte : la pousser vers le bas
   déplacerait tout le bandeau à chaque clic. */
#g-hand > .card-chip > .picker {
  position: absolute; bottom: calc(100% + 4px); left: 0; z-index: 5;
  min-width: 100%; width: max-content; max-width: 26rem;
  margin: 0; padding: .55rem .6rem;
  border: 1px solid var(--line); background: var(--paper); box-shadow: var(--shadow-card);
}

/* Pioche et défausse : la main est ce sur quoi on agit, elle prend la place
   de la séance au lieu de gonfler le bandeau jusqu’à le faire déborder. */
.drawing .rail-center {
  grid-template-columns: minmax(0, 1fr) minmax(14rem, 17rem);
  grid-template-rows: auto auto minmax(0, 1fr);
}
.drawing .panel-session { padding-bottom: 0; }
.drawing .panel-session > h2,
.drawing .panel-session > #g-proposals,
.drawing .panel-session > #no-proposals,
.drawing .panel-session > #g-vote { display: none; }
.drawing #g-prompt { grid-area: 1 / 1 / 2 / 3; justify-self: start; }
.drawing .panel-hand,
.drawing .panel-goals {
  grid-row: 3; overflow: auto; align-content: start;
  background: transparent; border-top: 1px solid var(--rule);
}

/* --- tes objectifs (coin du bandeau) ------------------------------------- */

#g-objectives { display: grid; gap: .3rem; align-content: start; }
#g-objectives > li {
  border: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  background: var(--paper); padding: .35rem .6rem; gap: .5rem; align-items: baseline;
}
#g-objectives > li:first-child { border-color: var(--line); }
#g-objectives > li.off .tag { color: var(--muted); }
#g-objectives > li > .grow { display: grid; gap: .1rem; }
#g-objectives strong { font-size: 1rem; }
#g-objectives .muted { font-size: .82rem; }

/* Mise en place : le choix des objectifs prend toute la colonne centrale —
   on choisit sa partie en voyant tout à la fois, pas carte après carte. */
.choosing .rail-center { grid-template-rows: auto auto minmax(0, 1fr); }
.choosing .panel-hand { display: none; }
.choosing .panel-goals {
  grid-area: 3 / 1 / 4 / 3; padding: .8rem 1.2rem 1rem;
  background: transparent; overflow: auto;
}
/* Mise en place : la séance n’a rien à montrer, l’invite devient le titre. */
.choosing .panel-session { padding-bottom: 0; }
.choosing .panel-session > h2,
.choosing .panel-session > #g-proposals,
.choosing .panel-session > #no-proposals { display: none; }
.choosing #g-prompt {
  grid-area: 1 / 1 / 2 / 3; justify-self: start;
  border: 0; padding: 0; color: var(--ink);
  font-family: var(--serif); font-size: 1.35rem; font-weight: 600;
  letter-spacing: -0.01em; text-transform: none;
}
.choosing #g-objectives {
  grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr)); gap: .7rem;
}
.choosing #g-objectives > li.prompt,
.choosing #g-objectives > li:last-child {
  grid-column: 1 / -1; border: 0; background: transparent; padding: .4rem 0 0;
}
#g-objectives > li.card-chip {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  width: auto; height: auto; box-shadow: none; margin: 0;
  padding: .8rem .9rem; gap: .5rem; align-items: start; cursor: pointer;
}
#g-objectives > li.card-chip > .grow { display: grid; gap: .2rem; }
#g-objectives > li.card-chip strong { display: block; font-size: 1.1rem; }
#g-objectives > li.card-chip .muted { font-size: .95rem; }
#g-objectives input { accent-color: var(--ink); flex: none; }

/* --- rail droit : la table ----------------------------------------------- */

.rail-right {
  border-left: 1px solid var(--line); background: var(--paper-2);
  grid-template-rows: auto minmax(0, 1fr);
}
.panel-table {
  border: 0; border-bottom: 1px solid var(--rule);
  background: transparent; padding: .8rem 1rem; min-height: 0; overflow: auto;
}
.panel-log {
  border: 0; background: transparent; padding: .8rem 1rem;
  min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr);
}

.roster { display: grid; gap: .3rem; }
.roster li {
  display: flex; align-items: center; gap: .5rem; padding: .35rem .5rem;
  border: 1px solid var(--rule); background: var(--paper); font-size: .92rem;
}
.roster li.you { border-color: var(--alert); }
.roster li.bot { background: var(--paper-3); }
.roster li.bot > .grow { color: var(--muted); }
/* Le Président porte un carré noir. Personne d'autre n'a de pastille : c'est
   le seul rôle du jeu, il ne doit pas se perdre dans une colonne d'icônes. */
.pres {
  flex: none; width: 1.5rem; height: 1.5rem; display: grid; place-items: center;
  background: var(--ink); color: var(--paper); font-family: var(--mono); font-size: .6rem;
}
.self { font-size: .8rem; color: var(--muted); }
.doing {
  flex: none; font-family: var(--mono); font-size: .55rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
.doing.mine { color: var(--alert); }
.rep { display: flex; gap: 2px; flex: none; }
.rep i { display: block; width: 7px; height: 7px; background: var(--ink); }

.log { max-height: none; font-size: .68rem; line-height: 1.8; overflow: auto; }

/* --- lobby (3c) ----------------------------------------------------------- */

#screen-lobby { grid-template-columns: 420px minmax(0, 1fr); }
#screen-lobby > .card-panel { border: 0; padding: 1.4rem 1.6rem; }
#screen-lobby > .card-panel:first-child {
  background: var(--paper-2); border-right: 1px solid var(--line);
}
#room-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr));
  gap: .8rem; margin-top: .8rem;
}
#room-list li {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  border: 1px solid var(--line); background: var(--paper); padding: .85rem .95rem;
}
#room-list li .grow { flex: 1 0 100%; font-family: var(--serif); font-size: 1.2rem; }

/* --- salon d'attente (3d) ------------------------------------------------- */

#screen-room > .card-panel {
  border: 0; padding: 0; display: grid; gap: .6rem 0;
  grid-template-columns: minmax(0, 1fr) 520px;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}
#screen-room > .card-panel > h2 { grid-area: 1 / 1; padding: 1.4rem 1.4rem 0; }
#screen-room > .card-panel > #player-list { grid-area: 2 / 1; padding: 0 1.4rem; }
#screen-room > .card-panel > #host-note { grid-area: 3 / 1; padding: 0 1.4rem; align-self: start; }
#screen-room > .card-panel > .actions { grid-area: 4 / 1; padding: 0 1.4rem 1.4rem; margin: 0; }
/* Les réglages ne sont plus repliés : ils ont leur colonne. */
#tuning {
  grid-area: 1 / 2 / 5 / 3; margin: 0; padding: 1.4rem;
  border: 0; border-left: 1px solid var(--line); background: var(--paper-2);
}
#tuning summary { cursor: default; list-style: none; }
#tuning summary::-webkit-details-marker { display: none; }
.tuning-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }

#player-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .6rem;
}
#player-list li {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  border: 1px solid var(--line); background: var(--paper); padding: .8rem .9rem;
}
#player-list li .grow { flex: 1 0 100%; font-family: var(--serif); font-size: 1.15rem; }

/* --- admin de site (3e) --------------------------------------------------- */

#screen-admin { grid-template-columns: 400px minmax(0, 1fr) 380px; align-items: start; }
#screen-admin > .card-panel { border: 0; border-right: 1px solid var(--rule); padding: 1.4rem 1.2rem; }
#screen-admin > .card-panel:first-child,
#screen-admin > .card-panel:last-child { background: var(--paper-2); }
#screen-admin > .card-panel:last-child { border-right: 0; }

/* --- fin de partie (3b) --------------------------------------------------- */

.outcome {
  border-width: 2px; padding: 1rem 1.1rem; display: grid; gap: .3rem;
  background: color-mix(in srgb, var(--ok) 6%, transparent);
}
.outcome[data-result="defeat"] { background: color-mix(in srgb, var(--alert) 6%, transparent); }
.outcome strong { display: block; font-size: 2rem; font-weight: 600; line-height: 1.1; }

/* --- le deck (catalogue) -------------------------------------------------- */
/* La page défile chez elle, comme les autres écrans hors partie — mais les
   filtres, eux, ne partent pas en haut de l'ascenseur : on lit 214 fiches, on
   doit pouvoir changer de famille sans remonter. */

#screen-cards { gap: 0; align-content: start; }
.deck-head {
  position: sticky; top: 0; z-index: 4;
  border: 0; border-bottom: 1px solid var(--line); background: var(--paper-2);
  padding: .9rem clamp(1.2rem, 3vw, 2.4rem);
}
.deck-head h1 { font-size: 1.5rem; }
.deck { padding: 1.2rem clamp(1.2rem, 3vw, 2.4rem) 3rem; }
#c-empty { padding: 0 clamp(1.2rem, 3vw, 2.4rem) 2rem; }
.deck-grid { grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr)); }

/* La fiche reprend le carton de la main : papier, filet, ombre portée courte.
   Sa hauteur, elle, suit son texte — un Événement porte trois paliers, un
   objectif une phrase, et rien ne gagne à les faire tenir dans 235 px. */
.deck-card { background: var(--paper); box-shadow: var(--shadow-card); padding: .75rem .8rem; }
.deck-card strong { font-size: 1.1rem; }
/* Un effet par ligne, encadré, à la teinte de sa jauge : exactement ce que la
   carte montre en main. */
.deck-card .chev { display: grid; gap: 2px; font-size: .6rem; }
.deck-card .ef {
  display: flex; justify-content: space-between; gap: .3rem;
  border: 1px solid var(--rule); padding: .1rem .3rem;
}
.deck-card .ar { font-weight: 700; }
.deck-card .breakthrough { border-color: var(--g); color: var(--g); }
.deck-card .phase-line .range { color: var(--muted); }
/* Un Événement défavorable porte le filet d'alerte de sa carte imprimée. */
.deck-card[data-polarity="defavorable"] { border-left: 4px solid var(--alert); }
.deck-card[data-polarity="favorable"] { border-left: 4px solid var(--ok); }

/* --- en dessous de la cible ---------------------------------------------- */
/* Cible : 1600 px et plus. En dessous, on replie plutôt que de comprimer. */

@media (max-width: 1400px) {
  #screen-game { grid-template-columns: 340px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto; }
  .rail-right { grid-column: 1 / -1; grid-template-rows: none; border-left: 0; border-top: 1px solid var(--line); }
  #screen-room > .card-panel { grid-template-columns: minmax(0, 1fr) 380px; }
}

@media (max-width: 1100px) {
  body { height: auto; overflow: visible; }
  #screen-game,
  #screen-lobby,
  #screen-admin,
  #screen-room > .card-panel { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .rail,
  .rail-center,
  #g-outcome,
  .panel-session,
  .panel-hand,
  .panel-goals,
  #tuning,
  #screen-room > .card-panel > * { grid-area: auto; grid-template-columns: minmax(0, 1fr); }
  .rail-left { border-right: 0; border-bottom: 1px solid var(--line); overflow: visible; }
  /* Plus de hauteur à répartir : la page entière défile, les lois s'étalent. */
  .panel-laws { grid-template-rows: none; }
  #g-laws { overflow: visible; }
  /* Le deck rend son ascenseur à la page : un bloc collant dans un conteneur
     qui ne défile plus ne collerait à rien. */
  #screen-cards { overflow: visible; }
  .deck-head { position: static; }
}

/* --- total de la phase 5 (sous les lois en vigueur) ----------------------- */
/* Le seul bloc du rail qui porte un trait de 2px : c'est le chiffre sur lequel
   on vote, il ne doit pas se lire comme une quatrième liste. */

.phase5 {
  border: 2px solid var(--line); background: var(--paper-4);
  padding: .5rem .6rem; margin-top: .5rem; display: grid; gap: .28rem;
}
.phase5-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--mono); font-size: .58rem; letter-spacing: .14em; text-transform: uppercase;
}
.phase5-head .muted {
  font-size: .55rem; letter-spacing: .05em; text-transform: none;
}
.p5row {
  display: flex; justify-content: space-between; gap: .5rem;
  font-family: var(--mono); font-size: .62rem;
}
.p5row .ef { color: var(--g, inherit); }
.p5row b { color: var(--ink); font-weight: 700; }
/* Une jauge qui finit à une case du seuil : plus de teinte, de l'alerte. */
.p5row.near { --g: var(--alert); font-weight: 700; }
.p5row.near b { color: var(--alert); }
.p5note {
  font-family: var(--mono); font-size: .55rem; color: var(--alert); line-height: 1.4;
}