/* ==========================================================================
   Bobby's Colony — feuille de style dédiée à la page /game
   Layout "app shell" plein écran, zéro scroll de page sur desktop.
   Aucune dépendance JS : onglets en radio-hack, overlay en radio-hack.
   Icônes : game-icons.net (CC-BY 3.0), colorées via mask-image + currentColor.
   ========================================================================== */

/* ---------- 1. Icônes masquées (recolorables) ---------- */
.gi {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: none;
  background-color: currentColor;
  -webkit-mask: var(--i) no-repeat center / contain;
  mask: var(--i) no-repeat center / contain;
  vertical-align: -0.14em;
}
/* généré depuis app/static/icons/ — 50 icônes */
.i-banner { --i: url('/static/icons/banner.svg'); }
.i-barracks { --i: url('/static/icons/barracks.svg'); }
.i-calendar { --i: url('/static/icons/calendar.svg'); }
.i-campfire { --i: url('/static/icons/campfire.svg'); }
.i-chart { --i: url('/static/icons/chart.svg'); }
.i-compass { --i: url('/static/icons/compass.svg'); }
.i-farmer { --i: url('/static/icons/farmer.svg'); }
.i-flame { --i: url('/static/icons/flame.svg'); }
.i-food { --i: url('/static/icons/food.svg'); }
.i-gold { --i: url('/static/icons/gold.svg'); }
.i-happiness { --i: url('/static/icons/happiness.svg'); }
.i-hourglass { --i: url('/static/icons/hourglass.svg'); }
.i-house { --i: url('/static/icons/house.svg'); }
.i-journal { --i: url('/static/icons/journal.svg'); }
.i-lock { --i: url('/static/icons/lock.svg'); }
.i-lumber-camp { --i: url('/static/icons/lumber-camp.svg'); }
.i-market { --i: url('/static/icons/market.svg'); }
.i-mine { --i: url('/static/icons/mine.svg'); }
.i-population { --i: url('/static/icons/population.svg'); }
.i-research { --i: url('/static/icons/research.svg'); }
.i-rival { --i: url('/static/icons/rival.svg'); }
.i-role-artisan { --i: url('/static/icons/role-artisan.svg'); }
.i-role-bucheron { --i: url('/static/icons/role-bucheron.svg'); }
.i-role-erudit { --i: url('/static/icons/role-erudit.svg'); }
.i-role-garde { --i: url('/static/icons/role-garde.svg'); }
.i-role-marchand { --i: url('/static/icons/role-marchand.svg'); }
.i-role-mineur { --i: url('/static/icons/role-mineur.svg'); }
.i-role-pretre { --i: url('/static/icons/role-pretre.svg'); }
.i-school { --i: url('/static/icons/school.svg'); }
.i-scroll { --i: url('/static/icons/scroll.svg'); }
.i-season-automne { --i: url('/static/icons/season-automne.svg'); }
.i-season-ete { --i: url('/static/icons/season-ete.svg'); }
.i-season-hiver { --i: url('/static/icons/season-hiver.svg'); }
.i-season-printemps { --i: url('/static/icons/season-printemps.svg'); }
.i-shield { --i: url('/static/icons/shield.svg'); }
.i-skull { --i: url('/static/icons/skull.svg'); }
.i-spyglass { --i: url('/static/icons/spyglass.svg'); }
.i-stone { --i: url('/static/icons/stone.svg'); }
.i-swords { --i: url('/static/icons/swords.svg'); }
.i-temple { --i: url('/static/icons/temple.svg'); }
.i-terrain-forest { --i: url('/static/icons/terrain-forest.svg'); }
.i-terrain-mountain { --i: url('/static/icons/terrain-mountain.svg'); }
.i-terrain-plains { --i: url('/static/icons/terrain-plains.svg'); }
.i-terrain-water { --i: url('/static/icons/terrain-water.svg'); }
.i-tools { --i: url('/static/icons/tools.svg'); }
.i-trophy { --i: url('/static/icons/trophy.svg'); }
.i-trophy-locked { --i: url('/static/icons/trophy-locked.svg'); }
.i-walls { --i: url('/static/icons/walls.svg'); }
.i-wood { --i: url('/static/icons/wood.svg'); }
.i-workshop { --i: url('/static/icons/workshop.svg'); }

/* ---------- 2. Jetons de couleur du jeu ---------- */
body.game-page,
.colony-app {
  --c-food: #6fd36f;
  --c-wood: #c98b5a;
  --c-stone: #9aa7b4;
  --c-tools: #b7c4d4;
  --c-gold: #e3b341;
  --c-research: #a692f0;
  --c-happy: #f778ba;
  --c-pop: #58a6ff;
  --c-day: #79c0ff;
  --c-blood: #f85149;
  --c-leaf: #3fb950;

  --panel-bg: linear-gradient(180deg, #171d27 0%, #10141c 100%);
  --panel-border: #262e3b;
  --panel-radius: 12px;
  --ink-dim: #7d8896;

  --font-display: "Cinzel", "Iowan Old Style", Georgia, serif;
}

/* ---------- 3. Coque plein écran ---------- */
body.game-page {
  max-width: none;
  padding: 0;
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  line-height: 1.45;
  background:
    radial-gradient(1200px 600px at 12% -10%, rgba(63, 185, 80, 0.07), transparent 60%),
    radial-gradient(900px 500px at 92% 4%, rgba(88, 166, 255, 0.08), transparent 60%),
    radial-gradient(700px 500px at 70% 110%, rgba(248, 81, 73, 0.06), transparent 60%),
    var(--bg);
}
body.game-page > header {
  margin: 0;
  padding: 0.45rem 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  border-bottom: 1px solid var(--border);
  background: rgba(13, 17, 23, 0.75);
  backdrop-filter: blur(6px);
  flex: none;
}
body.game-page > header .brand { font-size: 1.05rem; font-family: var(--font-display); letter-spacing: 0.02em; }
body.game-page > header .tagline { display: none; }
body.game-page > header .nav { margin: 0 0 0 auto; padding: 0; border: 0; gap: 1rem; }
body.game-page main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  padding: 0.6rem 0.8rem 0.35rem;
}
body.game-page footer {
  margin: 0;
  padding: 0.25rem 0 0.4rem;
  font-size: 0.7rem;
  flex: none;
  opacity: 0.65;
}

.colony-app {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  position: relative;
}
.app-body { flex: 1 1 auto; }
.tab-input, .sheet-input { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }

/* ---------- 4. Panneaux génériques ---------- */
.panel {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius);
  box-shadow: 0 10px 28px -18px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.03);
  display: flex;
  flex-direction: column;
  min-height: 0;
  position: relative;
  overflow: hidden;
}
.panel-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  padding: 0.42rem 0.65rem;
  border-bottom: 1px solid var(--panel-border);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-dim);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent);
  flex: none;
}
.panel-head .gi { font-size: 0.95rem; color: var(--accent); }
.panel-head .head-extra { margin-left: auto; white-space: nowrap; font-size: 0.72rem; letter-spacing: 0; text-transform: none; color: var(--muted); }
.panel-body { padding: 0.6rem 0.7rem; overflow: auto; min-height: 0; flex: 1 1 auto; }

/* barre de défilement discrète pour tous les conteneurs internes */
.panel-body::-webkit-scrollbar, .tab-body::-webkit-scrollbar, .sheet-body::-webkit-scrollbar { width: 8px; }
.panel-body::-webkit-scrollbar-thumb, .tab-body::-webkit-scrollbar-thumb, .sheet-body::-webkit-scrollbar-thumb {
  background: #2b3442; border-radius: 8px;
}
.panel-body::-webkit-scrollbar-track, .tab-body::-webkit-scrollbar-track, .sheet-body::-webkit-scrollbar-track { background: transparent; }

/* ---------- 5. HUD : identité + bandeau de ressources ---------- */
.hud {
  flex: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.4rem 0.7rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius);
  background:
    linear-gradient(90deg, rgba(227, 179, 65, 0.09), transparent 38%),
    var(--panel-bg);
  box-shadow: 0 14px 34px -24px #000, inset 0 1px 0 rgba(255, 255, 255, 0.04);
  position: relative;
  overflow: hidden;
}
.hud::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.07) 48%, transparent 62%);
  transform: translateX(-120%);
  animation: sheen 9s ease-in-out 1.5s infinite;
  pointer-events: none;
}
@keyframes sheen { 0% { transform: translateX(-120%); } 28%, 100% { transform: translateX(120%); } }

.hud-identity { grid-column: 1; grid-row: 1; display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.crest {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 12px;
  font-size: 1.5rem;
  color: var(--c-gold);
  background: radial-gradient(circle at 50% 30%, rgba(227, 179, 65, 0.22), rgba(227, 179, 65, 0.05) 70%);
  border: 1px solid rgba(227, 179, 65, 0.35);
  box-shadow: inset 0 0 18px rgba(227, 179, 65, 0.15);
  animation: crest-glow 4.5s ease-in-out infinite;
}
@keyframes crest-glow {
  0%, 100% { box-shadow: inset 0 0 18px rgba(227, 179, 65, 0.12), 0 0 0 rgba(227, 179, 65, 0); }
  50% { box-shadow: inset 0 0 22px rgba(227, 179, 65, 0.3), 0 0 16px -4px rgba(227, 179, 65, 0.45); }
}
.colony-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1.1;
  letter-spacing: 0.04em;
  background: linear-gradient(180deg, #fff5d8, #e3b341 55%, #b3811d);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 2px 14px rgba(227, 179, 65, 0.18);
}
.colony-sub { margin: 0.15rem 0 0; font-size: 0.76rem; color: var(--muted); display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.colony-sub .dot { opacity: 0.45; }

.season-badge {
  display: inline-flex; align-items: center; gap: 0.28rem;
  font-size: 0.7rem; font-weight: 600;
  padding: 0.1rem 0.5rem 0.1rem 0.4rem;
  border-radius: 999px;
  text-transform: capitalize;
  border: 1px solid transparent;
}
.season-badge .gi { font-size: 0.85rem; }
.season-printemps { background: rgba(63, 185, 80, 0.14); color: #7ee787; border-color: rgba(63, 185, 80, 0.35); }
.season-ete { background: rgba(227, 179, 65, 0.15); color: #f2cc60; border-color: rgba(227, 179, 65, 0.38); }
.season-automne { background: rgba(248, 149, 73, 0.15); color: #f89549; border-color: rgba(248, 149, 73, 0.35); }
.season-hiver { background: rgba(121, 192, 255, 0.14); color: #a5d6ff; border-color: rgba(121, 192, 255, 0.35); }
.season-ete .gi { animation: spin-slow 22s linear infinite; }
.season-hiver .gi { animation: spin-slow 18s linear infinite reverse; }
@keyframes spin-slow { to { transform: rotate(360deg); } }

/* jetons de ressources */
.stat-rail {
  grid-column: 1 / -1;
  grid-row: 2;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 0.35rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--panel-border);
}
.chip {
  --tone: var(--muted);
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.5rem;
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
  border: 1px solid var(--panel-border);
  border-left: 2px solid var(--tone);
  min-width: 0;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.chip:hover { transform: translateY(-2px); border-color: var(--tone); background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)); }
.chip > .gi { font-size: 1.15rem; color: var(--tone); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--tone) 45%, transparent)); }
.chip-text { min-width: 0; display: flex; flex-direction: column; line-height: 1.1; }
.chip-label { font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip-value { font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; color: #e6edf3; display: flex; align-items: baseline; gap: 0.25rem; }
.delta { font-size: 0.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.delta.up { color: var(--c-leaf); }
.delta.down { color: var(--c-blood); }
.delta.up::before { content: "▲"; font-size: 0.75em; margin-right: 0.1em; }
.delta.down::before { content: "▼"; font-size: 0.75em; margin-right: 0.1em; }

.chip-food { --tone: var(--c-food); }
.chip-wood { --tone: var(--c-wood); }
.chip-stone { --tone: var(--c-stone); }
.chip-tools { --tone: var(--c-tools); }
.chip-gold { --tone: var(--c-gold); }
.chip-research { --tone: var(--c-research); }
.chip-happy { --tone: var(--c-happy); }
.chip-pop { --tone: var(--c-pop); }
.chip-day { --tone: var(--c-day); }

/* jauge fine sous les jetons bornés (moral) */
.chip-gauge { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255, 255, 255, 0.06); border-radius: 0 0 9px 9px; overflow: hidden; }
.chip-gauge > i { display: block; height: 100%; background: var(--tone); width: var(--pct, 0%); animation: gauge-in 1.1s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes gauge-in { from { width: 0; } }

.hud-actions { grid-column: 2; grid-row: 1; display: flex; align-items: center; gap: 0.4rem; }
.sheet-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.74rem; font-weight: 600;
  padding: 0.4rem 0.75rem;
  border-radius: 8px;
  cursor: pointer;
  color: #f2cc60;
  border: 1px solid rgba(227, 179, 65, 0.4);
  background: linear-gradient(180deg, rgba(227, 179, 65, 0.16), rgba(227, 179, 65, 0.05));
  white-space: nowrap;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  user-select: none;
}
.sheet-btn:hover { transform: translateY(-1px); background: linear-gradient(180deg, rgba(227, 179, 65, 0.28), rgba(227, 179, 65, 0.1)); box-shadow: 0 6px 18px -8px rgba(227, 179, 65, 0.7); }
.sheet-btn .gi { font-size: 1rem; }

/* ---------- 6. Corps : 3 colonnes ---------- */
.app-body {
  min-height: 0;
  display: grid;
  grid-template-columns: 238px minmax(0, 1fr) 432px;
  gap: 0.6rem;
}
.rail, .side { min-height: 0; display: grid; gap: 0.6rem; }
.rail { grid-template-rows: minmax(0, 1.34fr) minmax(0, 1fr); }
.side { grid-template-rows: auto minmax(0, 1fr); }

/* ---------- 7. Carte ---------- */
.map-card .panel-body { display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; align-items: center; width: 100%; overflow: hidden; padding: 0.35rem; }
.map-frame {
  height: 100%;
  aspect-ratio: 1;
  max-width: 100%;
  display: grid;
  grid-template-columns: 15px minmax(0, 1fr);
  grid-template-rows: 15px minmax(0, 1fr);
  gap: 3px;
}
.axis { display: grid; font-size: 0.55rem; color: #5d6875; font-variant-numeric: tabular-nums; }
.axis-x { grid-column: 2; grid-template-columns: repeat(var(--n), 1fr); gap: 2px; padding: 0 5px; }
.axis-y { grid-row: 2; grid-template-rows: repeat(var(--n), 1fr); gap: 2px; padding: 5px 0; }
.axis span { display: grid; place-items: center; }

.game-grid {
  grid-column: 2; grid-row: 2;
  display: grid;
  grid-template-columns: repeat(var(--n, 10), 1fr);
  gap: 2px;
  padding: 4px;
  border-radius: 10px;
  position: relative;
  background: #0b0e14;
  border: 1px solid #2a3342;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.9), 0 18px 40px -26px #000;
}
/* voile d'ambiance saisonnier au-dessus de la carte */
.game-grid::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 10px;
  pointer-events: none;
  z-index: 6;
}
.game-grid.season-hiver::after {
  background-image:
    radial-gradient(1.6px 1.6px at 12% 8%, rgba(255, 255, 255, 0.85), transparent),
    radial-gradient(1.4px 1.4px at 38% 22%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1.8px 1.8px at 64% 12%, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(1.3px 1.3px at 84% 30%, rgba(255, 255, 255, 0.65), transparent),
    radial-gradient(1.5px 1.5px at 26% 52%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1.7px 1.7px at 72% 66%, rgba(255, 255, 255, 0.75), transparent),
    radial-gradient(1.2px 1.2px at 48% 84%, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(1.6px 1.6px at 92% 78%, rgba(255, 255, 255, 0.7), transparent),
    linear-gradient(180deg, rgba(165, 214, 255, 0.09), rgba(165, 214, 255, 0.02));
  background-size: 100% 50%, 100% 50%, 100% 50%, 100% 50%, 100% 50%, 100% 50%, 100% 50%, 100% 50%, 100% 100%;
  animation: drift 14s linear infinite;
}
.game-grid.season-automne::after {
  background-image:
    radial-gradient(2px 2px at 18% 14%, rgba(248, 149, 73, 0.55), transparent),
    radial-gradient(1.6px 1.6px at 56% 34%, rgba(227, 179, 65, 0.5), transparent),
    radial-gradient(2.2px 2.2px at 80% 20%, rgba(215, 120, 60, 0.5), transparent),
    radial-gradient(1.8px 1.8px at 34% 70%, rgba(248, 149, 73, 0.45), transparent),
    radial-gradient(1.5px 1.5px at 88% 62%, rgba(227, 179, 65, 0.45), transparent),
    linear-gradient(180deg, rgba(248, 149, 73, 0.07), transparent);
  background-size: 100% 50%, 100% 50%, 100% 50%, 100% 50%, 100% 50%, 100% 100%;
  animation: drift 20s linear infinite;
}
.game-grid.season-printemps::after {
  background-image:
    radial-gradient(1.5px 1.5px at 22% 26%, rgba(126, 231, 135, 0.5), transparent),
    radial-gradient(1.3px 1.3px at 62% 46%, rgba(210, 255, 200, 0.42), transparent),
    radial-gradient(1.6px 1.6px at 84% 16%, rgba(126, 231, 135, 0.4), transparent),
    linear-gradient(180deg, rgba(63, 185, 80, 0.05), transparent);
  background-size: 100% 50%, 100% 50%, 100% 50%, 100% 100%;
  animation: drift 26s linear infinite;
}
.game-grid.season-ete::after {
  background: radial-gradient(120% 80% at 70% -10%, rgba(255, 214, 120, 0.16), transparent 62%);
  animation: haze 7s ease-in-out infinite;
}
@keyframes drift { from { background-position: 0 -50%, 0 -50%, 0 -50%, 0 -50%, 0 -50%, 0 -50%, 0 -50%, 0 -50%, 0 0; } to { background-position: 3% 100%, -2% 100%, 1% 100%, -3% 100%, 2% 100%, -1% 100%, 3% 100%, -2% 100%, 0 0; } }
@keyframes haze { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

.cell {
  position: relative;
  border-radius: 4px;
  display: grid;
  place-items: center;
  overflow: visible;
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 -3px 6px -3px rgba(0, 0, 0, 0.8);
}
.t-plains { background: linear-gradient(160deg, #6c8c33 0%, #4e6a24 55%, #3a521b 100%); }
.t-forest { background: linear-gradient(160deg, #1d5c2c 0%, #123f1d 55%, #0a2712 100%); }
.t-mountain { background: linear-gradient(160deg, #79808f 0%, #4a5162 52%, #2f3441 100%); }
.t-water {
  background: linear-gradient(160deg, #1b6ea8 0%, #14507e 45%, #0f3a5e 100%);
  background-size: 200% 200%;
  animation: ripple 6s ease-in-out infinite;
}
@keyframes ripple {
  0%, 100% { background-position: 0% 0%; }
  50% { background-position: 100% 100%; }
}
.t-water::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 4px;
  background: linear-gradient(115deg, transparent 35%, rgba(190, 232, 255, 0.3) 50%, transparent 65%);
  background-size: 250% 250%;
  animation: glint 5.5s linear infinite;
  animation-delay: calc(var(--d, 0) * 90ms);
  pointer-events: none;
}
@keyframes glint { 0% { background-position: 120% 0; } 55%, 100% { background-position: -40% 0; } }

/* filigrane du terrain */
.cell-terrain {
  position: relative;
  z-index: 1;
  font-size: 62%;
  width: 1em; height: 1em;
  opacity: 0.3;
}
.t-forest .cell-terrain { color: #9ff29f; opacity: 0.34; animation: sway 6s ease-in-out infinite; animation-delay: calc(var(--d, 0) * 70ms); }
.t-mountain .cell-terrain { color: #dbe3ee; opacity: 0.32; }
.t-water .cell-terrain { color: #cdeaff; opacity: 0.3; }
.t-plains .cell-terrain { color: #cff0a0; opacity: 0.22; }
@keyframes sway { 0%, 100% { transform: rotate(-3deg) translateY(0); } 50% { transform: rotate(3deg) translateY(-1px); } }

/* bâtiment posé sur la case */
.cell.built { z-index: 2; }
.cell.built .cell-terrain { opacity: 0.1; }
.cell.built::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1.5px rgba(242, 204, 96, 0.55), inset 0 0 14px -3px rgba(242, 204, 96, 0.55);
  animation: breathe 3.6s ease-in-out infinite;
  animation-delay: calc(var(--d, 0) * 110ms);
  pointer-events: none;
}
@keyframes breathe {
  0%, 100% { box-shadow: inset 0 0 0 1.5px rgba(242, 204, 96, 0.35), inset 0 0 10px -4px rgba(242, 204, 96, 0.35); }
  50% { box-shadow: inset 0 0 0 1.5px rgba(242, 204, 96, 0.8), inset 0 0 18px -2px rgba(242, 204, 96, 0.75); }
}
.cell-build {
  position: absolute;
  z-index: 3;
  font-size: 72%;
  width: 1em; height: 1em;
  color: #fff3d4;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 5px rgba(242, 204, 96, 0.45));
  animation: pop-in 0.5s cubic-bezier(.2, 1.4, .4, 1) both;
  animation-delay: calc(var(--d, 0) * 14ms);
}
@keyframes pop-in { from { transform: scale(0.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.cell:hover { transform: scale(1.14); z-index: 20; filter: saturate(1.25) brightness(1.12); box-shadow: 0 8px 20px -6px #000, inset 0 0 0 1.5px rgba(255, 255, 255, 0.35); }
.cell[data-tip]:hover::before {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 7px);
  transform: translateX(-50%);
  background: #0b0e14;
  border: 1px solid var(--panel-border);
  color: #e6edf3;
  font-size: 0.66rem;
  line-height: 1.35;
  padding: 0.3rem 0.5rem;
  border-radius: 6px;
  white-space: nowrap;
  z-index: 40;
  box-shadow: 0 8px 22px -8px #000;
  pointer-events: none;
  inset: auto auto calc(100% + 7px) 50%;
}
.cell:nth-child(-n + 20)[data-tip]:hover::before { inset: calc(100% + 7px) auto auto 50%; }

.map-legend {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.15rem 0.9rem;
  margin-top: 0.3rem;
  font-size: 0.66rem;
  color: var(--muted);
  flex: none;
}
.map-legend b { color: #c9d1d9; font-weight: 600; font-variant-numeric: tabular-nums; }
.lg { display: inline-flex; align-items: center; gap: 0.3rem; }
.lg::before { content: ""; width: 10px; height: 10px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.lg.t-plains::before { background: linear-gradient(160deg, #6c8c33, #3a521b); }
.lg.t-forest::before { background: linear-gradient(160deg, #1d5c2c, #0a2712); }
.lg.t-water::before { background: linear-gradient(160deg, #1b6ea8, #0f3a5e); }
.lg.t-mountain::before { background: linear-gradient(160deg, #79808f, #2f3441); }
.lg.t-plains::before, .lg.t-forest::before, .lg.t-water::before, .lg.t-mountain::before { animation: none; }
.lg.built::before { background: #1a1f28; box-shadow: inset 0 0 0 1.5px rgba(242, 204, 96, 0.8); }

/* ---------- 8. Rail gauche : constructions + recherche ---------- */
.build-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.build-row {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.16rem 0.4rem;
  border-radius: 7px;
  font-size: 0.75rem;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.build-row:hover { background: rgba(242, 204, 96, 0.08); border-color: rgba(242, 204, 96, 0.28); transform: translateX(2px); }
.build-row .gi { font-size: 0.98rem; color: #f2cc60; flex: none; }
.build-row .name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.count-badge {
  flex: none;
  min-width: 1.4rem; text-align: center;
  font-size: 0.7rem; font-weight: 700; font-variant-numeric: tabular-nums;
  padding: 0.05rem 0.35rem;
  border-radius: 999px;
  color: #0d1117;
  background: linear-gradient(180deg, #f2cc60, #d29922);
}
.terrain-bar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; margin-top: 0.5rem; border: 1px solid var(--panel-border); }
.terrain-bar > i { display: block; height: 100%; animation: gauge-in 1.2s cubic-bezier(.2, .8, .2, 1) both; }
.terrain-bar .s-plains { background: #6c8c33; }
.terrain-bar .s-forest { background: #1d5c2c; }
.terrain-bar .s-water { background: #1b6ea8; }
.terrain-bar .s-mountain { background: #79808f; }
.mini-note { font-size: 0.66rem; color: var(--ink-dim); margin: 0.35rem 0 0; }

.research-top { display: flex; align-items: baseline; gap: 0.4rem; margin-bottom: 0.4rem; }
.research-top .big { font-size: 1.4rem; font-weight: 700; color: var(--c-research); font-variant-numeric: tabular-nums; line-height: 1; }
.research-top .unit { font-size: 0.68rem; color: var(--ink-dim); text-transform: uppercase; letter-spacing: 0.08em; }
.progress {
  position: relative;
  height: 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
  border: 1px solid var(--panel-border);
}
.progress > i {
  display: block; height: 100%;
  width: var(--pct, 0%);
  border-radius: 999px;
  background: linear-gradient(90deg, #6e56cf, #a692f0);
  animation: gauge-in 1.4s cubic-bezier(.2, .8, .2, 1) both;
  position: relative;
}
.progress > i::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  background-size: 60% 100%;
  background-repeat: no-repeat;
  animation: slide-sheen 2.4s linear infinite;
}
@keyframes slide-sheen { from { background-position: -70% 0; } to { background-position: 170% 0; } }
.progress-label { display: flex; justify-content: space-between; font-size: 0.66rem; color: var(--ink-dim); margin-top: 0.28rem; }

.tech-list { list-style: none; margin: 0.45rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.tech {
  display: flex; align-items: center; gap: 0.45rem;
  font-size: 0.71rem;
  padding: 0.18rem 0.4rem;
  border-radius: 7px;
  border: 1px solid var(--panel-border);
  background: rgba(255, 255, 255, 0.02);
}
.tech .gi { font-size: 0.95rem; flex: none; }
.tech .tech-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tech .req { font-size: 0.66rem; font-variant-numeric: tabular-nums; color: var(--ink-dim); flex: none; }
.tech.done { border-color: rgba(63, 185, 80, 0.4); background: rgba(63, 185, 80, 0.08); color: #7ee787; }
.tech.done .gi { color: var(--c-leaf); }
.tech.next { border-color: rgba(166, 146, 240, 0.55); background: rgba(166, 146, 240, 0.1); color: #c9bcff; animation: next-pulse 2.6s ease-in-out infinite; }
.tech.next .gi { color: var(--c-research); }
.tech.locked { color: #6b7480; }
.tech.locked .gi { color: #4d5663; }
@keyframes next-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(166, 146, 240, 0); }
  50% { box-shadow: 0 0 14px -2px rgba(166, 146, 240, 0.55); }
}

/* ---------- 9. Colonne droite : rival + onglets ---------- */
.rival-card {
  border: 1px solid rgba(248, 81, 73, 0.32);
  border-radius: var(--panel-radius);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(248, 81, 73, 0.14), transparent 60%),
    var(--panel-bg);
  padding: 0.55rem 0.7rem;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.55rem;
  align-items: center;
  position: relative;
  overflow: hidden;
  flex: none;
}
.rival-sigil {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 12px;
  font-size: 1.6rem;
  color: #ff8b84;
  background: radial-gradient(circle at 50% 35%, rgba(248, 81, 73, 0.25), rgba(248, 81, 73, 0.04) 70%);
  border: 1px solid rgba(248, 81, 73, 0.35);
}
.rival-card.hostile .rival-sigil { animation: threat 1.9s ease-in-out infinite; }
@keyframes threat {
  0%, 100% { box-shadow: 0 0 0 0 rgba(248, 81, 73, 0.5); transform: scale(1); }
  50% { box-shadow: 0 0 0 7px rgba(248, 81, 73, 0); transform: scale(1.06); }
}
.rival-name { margin: 0; font-family: var(--font-display); font-size: 0.92rem; color: #ffb1ab; letter-spacing: 0.02em; }
.rival-line { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.2rem; }
.posture {
  font-size: 0.63rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  padding: 0.1rem 0.45rem; border-radius: 999px; border: 1px solid currentColor;
}
.posture-belliqueux { color: #ff7b72; background: rgba(248, 81, 73, 0.14); animation: blink-danger 1.6s ease-in-out infinite; }
.posture-prudent { color: #79c0ff; background: rgba(88, 166, 255, 0.12); }
.posture-croissance { color: #7ee787; background: rgba(63, 185, 80, 0.12); }
@keyframes blink-danger { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
.rival-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.3rem; margin-top: 0.4rem; grid-column: 1 / -1; }
.rm { text-align: center; padding: 0.2rem 0.1rem; border-radius: 7px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--panel-border); }
.rm b { display: block; font-size: 0.88rem; font-variant-numeric: tabular-nums; color: #e6edf3; }
.rm span { font-size: 0.56rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-dim); }
.aggro { grid-column: 1 / -1; margin-top: 0.4rem; }
.aggro .progress > i { background: linear-gradient(90deg, #a5382f, #ff7b72); }
.balance { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; grid-column: 1 / -1; margin-top: 0.45rem; font-size: 0.68rem; color: var(--muted); }
.balance .side-val { display: inline-flex; align-items: center; gap: 0.3rem; font-weight: 700; }
.balance .def { color: #79c0ff; }
.balance .atk { color: #ff7b72; }
.balance .vs { font-family: var(--font-display); font-size: 0.7rem; color: var(--ink-dim); }

/* onglets */
.tabs { display: flex; flex-direction: column; min-height: 0; }
.tab-nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  padding: 3px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid var(--panel-border);
  flex: none;
}
.tab-nav label {
  display: flex; align-items: center; justify-content: center; gap: 0.3rem;
  font-size: 0.7rem; font-weight: 600;
  padding: 0.35rem 0.2rem;
  border-radius: 7px;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.tab-nav label .gi { font-size: 0.9rem; }
.tab-nav label:hover { color: #e6edf3; background: rgba(255, 255, 255, 0.05); }
.tab-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 0.55rem 0.65rem; }
.tab-panel { display: none; animation: fade-up 0.35s ease both; }
@keyframes fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

#tab-journal:checked ~ .app-body .tab-nav label[for="tab-journal"],
#tab-peuple:checked ~ .app-body .tab-nav label[for="tab-peuple"],
#tab-faits:checked ~ .app-body .tab-nav label[for="tab-faits"],
#tab-courbes:checked ~ .app-body .tab-nav label[for="tab-courbes"] {
  background: linear-gradient(180deg, rgba(88, 166, 255, 0.22), rgba(88, 166, 255, 0.07));
  color: #cfe6ff;
  box-shadow: inset 0 -2px 0 var(--accent);
}
#tab-journal:checked ~ .app-body .panel-journal,
#tab-peuple:checked ~ .app-body .panel-peuple,
#tab-faits:checked ~ .app-body .panel-faits,
#tab-courbes:checked ~ .app-body .panel-courbes { display: block; }

/* journal */
.log-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.log-entry {
  border: 1px solid var(--panel-border);
  border-left: 2px solid var(--accent);
  border-radius: 8px;
  padding: 0.45rem 0.6rem;
  background: rgba(255, 255, 255, 0.022);
  animation: fade-up 0.45s ease both;
  animation-delay: calc(var(--d, 0) * 45ms);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.log-entry:hover { background: rgba(88, 166, 255, 0.07); border-left-color: #a5d6ff; }
.log-entry.fresh { border-left-color: var(--c-gold); box-shadow: 0 0 22px -12px rgba(242, 204, 96, 0.9); }
.log-head { display: flex; align-items: center; gap: 0.4rem; margin: 0 0 0.2rem; }
.day-badge {
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.05em;
  padding: 0.08rem 0.4rem; border-radius: 999px;
  background: rgba(88, 166, 255, 0.16); color: #a5d6ff;
  font-variant-numeric: tabular-nums;
  flex: none;
}
.log-entry.fresh .day-badge { background: rgba(242, 204, 96, 0.18); color: #f2cc60; }
.log-title { margin: 0; font-size: 0.74rem; font-weight: 600; color: #c9d1d9; text-transform: capitalize; }
.log-narration { margin: 0; font-size: 0.78rem; color: var(--fg); }
.log-event { margin: 0.3rem 0 0; font-size: 0.73rem; color: #f2cc60; display: flex; gap: 0.35rem; align-items: flex-start; }
.log-event .gi { font-size: 0.9rem; margin-top: 0.1rem; flex: none; }

/* peuple */
.citizen-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 0.4rem; }
.citizen-card {
  display: flex; align-items: center; gap: 0.45rem;
  padding: 0.35rem 0.45rem;
  border-radius: 8px;
  border: 1px solid var(--panel-border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  animation: fade-up 0.4s ease both;
  animation-delay: calc(var(--d, 0) * 35ms);
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.citizen-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.citizen-card .gi { font-size: 1.25rem; color: #8fb8e8; flex: none; }
.citizen-id { min-width: 0; line-height: 1.15; }
.citizen-name { display: block; font-size: 0.76rem; font-weight: 600; color: #e6edf3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.citizen-role { display: block; font-size: 0.63rem; color: var(--ink-dim); text-transform: capitalize; }
.roster-head { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.5rem; }
.role-tag { font-size: 0.63rem; padding: 0.1rem 0.45rem; border-radius: 999px; background: rgba(88, 166, 255, 0.1); border: 1px solid rgba(88, 166, 255, 0.25); color: #a5d6ff; display: inline-flex; align-items: center; gap: 0.25rem; text-transform: capitalize; }

/* hauts faits */
.ach-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; }
.ach {
  display: flex; align-items: center; gap: 0.45rem;
  padding: 0.4rem 0.5rem;
  border-radius: 9px;
  font-size: 0.71rem;
  line-height: 1.2;
  border: 1px solid var(--panel-border);
  background: rgba(255, 255, 255, 0.02);
  color: #6b7480;
  animation: fade-up 0.4s ease both;
  animation-delay: calc(var(--d, 0) * 30ms);
}
.ach .gi { font-size: 1.25rem; flex: none; color: #495159; }
.ach.unlocked {
  color: #f2cc60;
  border-color: rgba(227, 179, 65, 0.45);
  background: linear-gradient(180deg, rgba(227, 179, 65, 0.14), rgba(227, 179, 65, 0.03));
  box-shadow: 0 0 20px -12px rgba(242, 204, 96, 0.9);
}
.ach.unlocked .gi { color: #f2cc60; filter: drop-shadow(0 0 6px rgba(242, 204, 96, 0.55)); animation: trophy-shine 3.4s ease-in-out infinite; animation-delay: calc(var(--d, 0) * 220ms); }
@keyframes trophy-shine { 0%, 92%, 100% { transform: none; } 96% { transform: rotate(-8deg) scale(1.08); } }
.ach-progress { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; font-size: 0.7rem; color: var(--muted); }
.ach-progress .progress { flex: 1 1 auto; }
.ach-progress .progress > i { background: linear-gradient(90deg, #d29922, #f2cc60); }

/* courbes */
.chart-block { margin-bottom: 0.7rem; }
.chart-title { display: flex; align-items: center; justify-content: space-between; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--ink-dim); margin: 0 0 0.3rem; }
.chart-title b { font-size: 0.85rem; color: #e6edf3; letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; }
.chart-svg { width: 100%; height: 120px; display: block; border-radius: 9px; border: 1px solid var(--panel-border); background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent); }
.grid-line { stroke: rgba(255, 255, 255, 0.06); stroke-width: 1; vector-effect: non-scaling-stroke; }
.series-line { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 2000; stroke-dashoffset: 2000; animation: draw 1.8s ease-out forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.s-pop { stroke: var(--c-pop); }
.s-food { stroke: var(--c-food); }
.a-pop { fill: url(#gpop); }
.a-food { fill: url(#gfood); }
.series-area { opacity: 0; animation: fade-in 1.4s ease 0.5s forwards; }
@keyframes fade-in { to { opacity: 1; } }
.chart-legend { display: flex; gap: 0.9rem; justify-content: center; font-size: 0.66rem; color: var(--muted); margin-top: 0.3rem; }
.chart-legend span { display: inline-flex; align-items: center; gap: 0.3rem; }
.chart-legend i { width: 12px; height: 3px; border-radius: 2px; display: inline-block; }
.spark-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.45rem; }
.spark-card { border: 1px solid var(--panel-border); border-radius: 9px; padding: 0.35rem 0.45rem; background: rgba(255, 255, 255, 0.02); }
.spark-card .k { font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-dim); display: flex; align-items: center; gap: 0.25rem; }
.spark-card .v { font-size: 0.95rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.spark { width: 100%; height: 26px; display: block; margin-top: 0.15rem; }
.spark polyline { fill: none; stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linejoin: round; }

/* ---------- 10. Feuille de règles (overlay CSS pur) ---------- */
.sheet-scrim {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 50;
  border-radius: var(--panel-radius);
  background: rgba(5, 7, 11, 0.72);
  backdrop-filter: blur(4px);
  padding: 0.2rem;
}
#sheet-regles:checked ~ .sheet-scrim { display: block; animation: fade-in 0.25s ease both; }
.sheet {
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: var(--panel-radius);
  border: 1px solid rgba(227, 179, 65, 0.32);
  background:
    radial-gradient(900px 400px at 12% -10%, rgba(227, 179, 65, 0.09), transparent 65%),
    linear-gradient(180deg, #171208 0%, #12141b 45%, #0e1118 100%);
  box-shadow: 0 40px 90px -40px #000;
  overflow: hidden;
  animation: sheet-in 0.35s cubic-bezier(.2, .9, .3, 1) both;
}
@keyframes sheet-in { from { transform: translateY(14px) scale(0.985); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet-head {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid rgba(227, 179, 65, 0.25);
  background: linear-gradient(90deg, rgba(227, 179, 65, 0.12), transparent 55%);
  flex: none;
}
.sheet-head .gi { font-size: 1.4rem; color: #f2cc60; }
.sheet-head h2 { margin: 0; font-family: var(--font-display); font-size: 1.05rem; color: #f2cc60; letter-spacing: 0.05em; }
.sheet-head p { margin: 0; font-size: 0.72rem; color: var(--muted); }
.sheet-close {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 0.35rem;
  cursor: pointer; user-select: none;
  font-size: 0.72rem; font-weight: 600;
  padding: 0.3rem 0.7rem;
  border-radius: 8px;
  color: #c9d1d9;
  border: 1px solid var(--panel-border);
  background: rgba(255, 255, 255, 0.05);
  transition: background 0.15s ease, color 0.15s ease;
}
.sheet-close:hover { background: rgba(248, 81, 73, 0.18); color: #ffb1ab; border-color: rgba(248, 81, 73, 0.4); }
.sheet-body { overflow: auto; padding: 0.9rem 1.1rem 1.4rem; flex: 1 1 auto; min-height: 0; column-width: 330px; column-gap: 1.6rem; column-rule: 1px solid rgba(255, 255, 255, 0.06); }
.rule-sec { break-inside: avoid-column; margin: 0 0 1.05rem; }
.rule-sec h3 {
  display: flex; align-items: center; gap: 0.4rem;
  margin: 0 0 0.4rem;
  font-family: var(--font-display);
  font-size: 0.88rem;
  color: #f2cc60;
  letter-spacing: 0.04em;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid rgba(227, 179, 65, 0.22);
}
.rule-sec h3 .gi { font-size: 1rem; }
.rule-sec p { margin: 0 0 0.45rem; font-size: 0.76rem; color: #b9c3ce; }
.rule-sec p:last-child { margin-bottom: 0; }
.rule-sec strong { color: #e6edf3; }
.rule-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.28rem; }
.rule-list li { display: flex; gap: 0.45rem; align-items: flex-start; font-size: 0.75rem; color: #b9c3ce; }
.rule-list li .gi { font-size: 1rem; flex: none; margin-top: 0.1rem; color: var(--tone, var(--accent)); }
.rule-list li b { color: #e6edf3; }
.rule-table { width: 100%; border-collapse: collapse; font-size: 0.71rem; }
.rule-table th, .rule-table td { padding: 0.26rem 0.4rem; text-align: left; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.rule-table thead th { color: #f2cc60; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.07em; border-bottom-color: rgba(227, 179, 65, 0.3); }
.rule-table tbody tr:hover { background: rgba(255, 255, 255, 0.04); }
.rule-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.rule-table .b-name { display: flex; align-items: center; gap: 0.35rem; color: #e6edf3; white-space: nowrap; }
.rule-table .b-name .gi { font-size: 0.95rem; color: #f2cc60; }
.cost { display: inline-flex; align-items: center; gap: 0.18rem; margin-right: 0.35rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cost .gi { font-size: 0.8rem; }
.cost.c-wood { color: var(--c-wood); }
.cost.c-stone { color: var(--c-stone); }
.cost.c-tools { color: var(--c-tools); }
.tag-lock { display: inline-flex; align-items: center; gap: 0.2rem; color: var(--c-research); font-variant-numeric: tabular-nums; }
.tag-free { color: #5b6673; }
.terr-chip { font-size: 0.6rem; padding: 0.02rem 0.32rem; border-radius: 4px; margin-right: 0.15rem; display: inline-block; }
.terr-plains { background: rgba(75, 107, 42, 0.45); color: #cbe8a0; }
.terr-forest { background: rgba(36, 82, 42, 0.55); color: #9ff29f; }
.terr-mountain { background: rgba(90, 98, 112, 0.45); color: #dbe3ee; }
.terr-water { background: rgba(27, 110, 168, 0.4); color: #cdeaff; }

/* ---------- 11. Fin de partie ---------- */
.gameover-banner {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.4rem 0.8rem;
  border-radius: 10px;
  border: 1px solid rgba(248, 81, 73, 0.5);
  background: linear-gradient(90deg, rgba(248, 81, 73, 0.22), rgba(248, 81, 73, 0.05));
  color: #ffb1ab;
  font-size: 0.82rem;
  font-weight: 600;
  animation: doom 2.6s ease-in-out infinite;
}
.gameover-banner .gi { font-size: 1.3rem; }
@keyframes doom { 0%, 100% { box-shadow: 0 0 0 0 rgba(248, 81, 73, 0.35); } 50% { box-shadow: 0 0 26px -6px rgba(248, 81, 73, 0.6); } }
.colony-app.over .colony-title { background: linear-gradient(180deg, #ffd7d3, #f85149 60%, #8b2e28); -webkit-background-clip: text; background-clip: text; }
.colony-app.over .game-grid { filter: grayscale(0.55) brightness(0.8); }

.empty-state { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; padding: 1.2rem 0.6rem; color: var(--ink-dim); font-size: 0.76rem; text-align: center; font-style: italic; }
.empty-state .gi { font-size: 1.8rem; opacity: 0.4; }

/* ---------- 12. Responsive / accessibilité ---------- */
@media (max-width: 1180px) {
  body.game-page { height: auto; overflow: auto; }
  body.game-page main { padding: 0.7rem; }
  .app-body { grid-template-columns: 1fr; }
  .rail, .side { grid-template-rows: none; }
  .map-frame { height: auto; width: min(560px, 100%); margin: 0 auto; }
  .map-card .panel-body { overflow: visible; }
  .stat-rail { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); }
  .hud { flex-wrap: wrap; }
  .hud-identity { border-right: 0; }
  .hud-actions { border-left: 0; padding-left: 0; }
  .tab-body { max-height: 420px; }
  .panel-body { max-height: 380px; }
  .sheet-scrim { position: fixed; inset: 0.5rem; }
}
@media (max-width: 620px) {
  .tab-nav { grid-template-columns: repeat(2, 1fr); }
  .tab-nav label span { display: none; }
  .rival-metrics { grid-template-columns: repeat(2, 1fr); }
  .ach-grid { grid-template-columns: 1fr; }
  .colony-title { font-size: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .colony-app *, .colony-app *::before, .colony-app *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* progression des citoyens (XP / niveaux) */
.citizen-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.citizen-card { align-items: flex-start; flex-direction: row; }
.citizen-card .gi { margin-top: 0.15rem; }
.citizen-id { flex: 1 1 auto; }
.citizen-name { display: flex; align-items: center; gap: 0.35rem; }
.lvl-badge {
  flex: none;
  font-family: var(--font-display, inherit);
  font-size: 0.58rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  padding: 0.14rem 0.32rem;
  border-radius: 5px;
  border: 1px solid rgba(227, 179, 65, 0.35);
  background: rgba(227, 179, 65, 0.12);
  color: #f2cc60;
}
.lvl-badge-4 { border-color: rgba(227, 179, 65, 0.5); background: rgba(227, 179, 65, 0.16); }
.lvl-badge-5 { border-color: rgba(242, 204, 96, 0.7); background: rgba(242, 204, 96, 0.22); box-shadow: 0 0 8px -2px rgba(242, 204, 96, 0.7); }
.lvl-title { font-size: 0.6rem; color: #d7b768; font-weight: 600; text-transform: none; display: block; }
.citizen-role { display: flex; flex-direction: column; gap: 0.05rem; }
.xp-bar { height: 5px; margin-top: 0.3rem; }
.xp-bar > i { background: linear-gradient(90deg, #b0851f, #f2cc60); }
.xp-bar.maxed > i { background: linear-gradient(90deg, #f2cc60, #fff3c4); }
.citizen-card.lvl-4 { border-color: rgba(227, 179, 65, 0.28); }
.citizen-card.lvl-5 {
  border-color: rgba(227, 179, 65, 0.5);
  box-shadow: 0 0 18px -12px rgba(242, 204, 96, 0.9);
}
.sf-item { font-size: 0.68rem; color: var(--ink-dim); display: inline-flex; gap: 0.3rem; align-items: baseline; }
.sf-item b { color: #e6edf3; font-weight: 600; }