:root {
  --bg: #111214;
  --bg-soft: #181a1f;
  --panel: #20232a;
  --panel-2: #272b33;
  --text: #f2f2f2;
  --muted: #a8adb7;
  --orange: #ff8a00;
  --orange-dark: #c95f00;
  --danger: #d94b4b;
  --ok: #4ad27a;
  --border: rgba(255,255,255,.09);
  --shadow: 0 16px 50px rgba(0,0,0,.35);
  /* nouvel en-tête (v1.9) : accent cyan secondaire + polices dédiées,
     n'affecte que la zone marque/navigation/statut/ressources -- le reste
     du jeu garde ses styles d'origine. */
  --cyan: #4fd6f0;
  --cyan-dim: rgba(79,214,240,.12);
  --font-display: 'Chakra Petch', sans-serif;
  --font-mono2: 'IBM Plex Mono', ui-monospace, monospace;
  /* teintes de fond très légères par famille de minerai (~10% d'opacité),
     voir .resource-chip.family-* -- couleurs alignées sur celles déjà
     choisies pour la maquette validée. */
  --tint-iron: rgba(201,138,92,.10);
  --tint-copper: rgba(224,122,74,.10);
  --tint-caterium: rgba(224,193,92,.10);
  --tint-limestone: rgba(180,180,180,.09);
  --tint-coal: rgba(120,130,145,.11);
  --tint-steel: rgba(150,160,168,.12);
  --tint-oil: rgba(60,50,45,.14);
  --tint-misc: rgba(124,201,107,.09);
}

* { box-sizing: border-box; }
.fc-icon {
  display: inline-block;
  width: 1.35em;
  height: 1.35em;
  object-fit: contain;
  vertical-align: -0.25em;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.45));
  pointer-events: none;
  user-select: none;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(255,138,0,.17), transparent 36rem),
    linear-gradient(135deg, #0d0e10, var(--bg));
}

button {
  border: 0;
  border-radius: 12px;
  padding: .75rem 1rem;
  color: #111;
  background: var(--orange);
  font-weight: 800;
  cursor: pointer;
  transition: transform .08s ease, opacity .15s ease, background .15s ease;
}

button:active { transform: translateY(1px); }
button:disabled { opacity: .42; cursor: not-allowed; transform: none; }
button.secondary { color: var(--text); background: var(--panel-2); border: 1px solid var(--border); }
button.danger { color: white; background: var(--danger); }
.account-delete-link {
  background: none;
  border: none;
  color: var(--muted);
  font-size: .74rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}
.account-delete-link:hover { color: var(--danger); }

.save-transfer-card {
  margin-top: 1.25rem;
  padding: 1rem;
  border: 1px solid rgba(79,214,240,.22);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(79,214,240,.075), rgba(255,138,0,.035));
}
.save-transfer-card h3 { margin: 0 0 .35rem; font-size: 1rem; }
.save-transfer-card h4 { margin: 0 0 .35rem; font-size: .92rem; }
.save-management-actions { margin-top: .75rem; }
.save-management-section {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.save-management-danger { border-top-color: rgba(255, 79, 99, .32); }
.save-transfer-source { margin-top: .9rem; }
.save-transfer-code-view {
  margin-top: .75rem;
  padding: .85rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.24);
  text-align: center;
}
.save-transfer-code-view code {
  display: block;
  color: var(--cyan);
  font: 800 clamp(.95rem, 4.5vw, 1.25rem)/1.35 var(--font-mono2);
  letter-spacing: .055em;
  overflow-wrap: anywhere;
  user-select: all;
}
.save-transfer-code-view p { margin: .45rem 0 0; }
.save-transfer-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  margin-top: .75rem;
  flex-wrap: wrap;
}
.save-transfer-divider {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin: 1rem 0;
  color: var(--muted);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.save-transfer-divider::before,
.save-transfer-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.save-transfer-destination { margin: 0; }
.save-transfer-destination input {
  width: 100%;
  font-family: var(--font-mono2);
  text-transform: uppercase;
  letter-spacing: .045em;
}
.save-transfer-security { margin: .85rem 0 0; }

/* tap sur mobile déclenche :hover sans jamais le relâcher (pas de vraie
   souris) : le bouton restait visuellement enfoncé jusqu'au tap suivant
   ailleurs sur la page. Tous les survols passent donc par cette media
   query, qui ne s'active que sur un vrai pointeur précis (souris/trackpad). */
@media (hover: hover) and (pointer: fine) {
  button:hover { transform: translateY(-1px); background: #ffa733; }
  .big-button.biomass:hover { background: #82c94a; }
  .tab-btn:hover { color: var(--text); }
  .lang-btn:hover { opacity: .8; }
  .footer-link:hover { color: var(--orange); }
  .cc-manual-btn:hover:not(:disabled) { transform: translateY(-1px); }
  .restore-server-save-btn:hover { background: rgba(255, 139, 0, .16); }
  .cc-util-btn:hover { border-color: var(--orange); color: var(--orange); }
  .cc-util-discord:hover {
    border-color: #5865f2;
    color: #5865f2;
  }
  .cc-nav-tab:hover { color: var(--text); }
  .cc-more-item:hover { background: rgba(255,255,255,.06); color: var(--text); }
  .shop-sink-buy:hover:not(:disabled) { background:rgba(255,139,0,.16); border-color:var(--orange); }
  .event-choice-btn:hover {
    border-color: var(--orange);
    background: rgba(255, 140, 26, .12);
    transform: translateY(-1px);
  }
  .machine-control-btn:hover:not(:disabled) {
    border-color: var(--orange);
    color: var(--orange);
  }
  .validate-tier-btn:hover { background: rgba(246, 159, 26, .20); }
  .purchase-confirm-btn:hover { background: rgba(246, 159, 26, .20); }
  .purchase-confirm-cancel:hover { border-color: var(--text); color: var(--text); }
  .factory-buy-btn:hover:not(:disabled) { filter: brightness(1.2); border-color: var(--orange); }
  .factory-toolbar button:hover { border-color: var(--orange); color: #fff; }
  .sink-recipe-option:hover:not(:disabled) { border-color:#ffc169; }
  .factory-detail-actions button:hover:not(:disabled) { border-color:#58cbe8; color:#fff; }
}


.app-shell { width: min(1400px, calc(100% - 2rem)); margin: 0 auto; padding: 2rem 0; }
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.eyebrow { color: var(--orange); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 .4rem; font-size: .75rem; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: clamp(2rem, 5vw, 4rem); line-height: .95; }
h2 { font-size: 1.15rem; margin-bottom: 1rem; }
h3 { margin-bottom: .35rem; }
p, small { color: var(--muted); }
.header-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }
.version { background: var(--panel); border: 1px solid var(--border); padding: .55rem .75rem; border-radius: 999px; color: var(--muted); }

.ada-card {
  background: linear-gradient(90deg, rgba(255,138,0,.2), rgba(255,138,0,.04));
  border: 1px solid rgba(255,138,0,.35);
  border-radius: 16px;
  padding: 1rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow);
  font-weight: 700;
}

.grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 1rem;
}
.panel {
  background: rgba(32,35,42,.92);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1.2rem;
  box-shadow: var(--shadow);
}
.production-panel, .shop-panel { grid-column: span 1; }
.shop-panel { grid-row: span 3; }
.big-button {
  width: 100%;
  min-height: 150px;
  font-size: 1.8rem;
  display: grid;
  place-items: center;
  gap: .3rem;
  text-transform: uppercase;
  box-shadow: inset 0 -8px 0 rgba(0,0,0,.16);
}
.big-button small { color: rgba(0,0,0,.7); font-size: .9rem; }
.stats-grid {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .7rem;
}
.stat, .resource-row {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: .8rem;
}
.stat { display: grid; }
.resource-main { display: flex; justify-content: space-between; gap: .8rem; }
.stat span, .resource-list span { color: var(--muted); font-size: .9rem; }
.stat strong, .resource-list strong { color: var(--orange); font-size: 1.2rem; }
.resource-flow { margin-top: .3rem; font-size: .78rem; color: var(--muted); display: flex; gap: .5rem; }
.resource-flow .flow-in { color: var(--ok); }
.resource-flow .flow-out { color: var(--danger); }
.resource-list { display: grid; gap: .7rem; }
.shop-list { display: grid; gap: .8rem; }
.shop-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: center;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1rem;
}
.shop-item p { margin-bottom: .45rem; }
.buy-btn { min-width: 180px; }
.progress-wrap { height: 20px; background: #111; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.progress-bar { width: 0%; height: 100%; background: linear-gradient(90deg, var(--orange-dark), var(--orange)); transition: width .2s ease; }
.progress-label { margin: .7rem 0 1rem; }
.reward { margin-top: .8rem; padding: .8rem; border-radius: 12px; background: rgba(74,210,122,.12); color: var(--ok); border: 1px solid rgba(74,210,122,.3); font-weight: 800; }
.hidden { display: none !important; }
.log-panel ul { margin: 0; padding-left: 1rem; max-height: 250px; overflow: auto; color: var(--muted); }
.log-panel li { margin-bottom: .5rem; }

/* ---- v0.2 : énergie, paliers, événements, sync ---- */

:root {
  --power: #4ad2d2;
  --power-dark: #2f9a9a;
}

.sync-status {
  color: var(--muted);
  font-size: .8rem;
  padding: 0 .3rem;
}

.multi-tab-warning {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(7, 12, 18, .88);
  backdrop-filter: blur(6px);
}

.multi-tab-warning-card {
  width: min(520px, 100%);
  padding: 1.4rem;
  border: 1px solid var(--orange-dark);
  border-radius: 16px;
  background: var(--panel);
  box-shadow: 0 20px 70px rgba(0, 0, 0, .5);
  text-align: center;
}

.multi-tab-warning-card strong { color: var(--orange); font-size: 1.1rem; }
.multi-tab-warning-card p { color: var(--text); line-height: 1.5; }
.multi-tab-warning-card .multi-tab-warning-en { color: var(--muted); font-size: .9rem; }
.multi-tab-warning-card button { margin-top: .4rem; }

.ada-card { position: relative; }
.event-banner {
  margin-top: .6rem;
  padding: .6rem .8rem;
  border-radius: 10px;
  background: rgba(255,255,255,.08);
  border: 1px dashed rgba(255,255,255,.25);
  font-weight: 600;
  font-size: .9rem;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.event-icon { width: 1.1rem; height: 1.1rem; }

.manual-actions { display: grid; gap: .8rem; }
.big-button.biomass { background: #6fae3f; }

.power-panel .power-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .7rem;
  margin-bottom: .8rem;
}
.power-stat {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: .7rem .8rem;
  display: flex;
  justify-content: space-between;
  gap: .5rem;
}
.power-stat span { color: var(--muted); font-size: .85rem; }
.power-stat strong { color: var(--power); }
.power-bar-wrap { height: 16px; background: #111; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.power-bar { width: 100%; height: 100%; background: linear-gradient(90deg, var(--power-dark), var(--power)); transition: width .2s ease, background .2s ease; }
.power-bar.power-warning { background: linear-gradient(90deg, var(--danger), #ff9a5a); }
.power-caption { margin-top: .6rem; font-size: .85rem; }

.shop-category { margin-bottom: 1.2rem; }
.shop-category:last-child { margin-bottom: 0; }
.shop-category h3 {
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .8rem;
  color: var(--muted);
  margin-bottom: .6rem;
}
.shop-item.locked { opacity: .55; }
.shop-item.locked h3 { color: var(--muted); }

.tiers-caption { font-size: .85rem; margin-bottom: 1rem; }

/* --- Fenêtre Options --- */
.options-list { display: flex; flex-direction: column; gap: .8rem; }
.options-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px;
  padding: .9rem 1rem;
}
.options-row strong { display: block; font-size: .92rem; margin-bottom: .2rem; }
.options-row p { margin: 0; font-size: .78rem; color: var(--muted); max-width: 34rem; }
.options-row button { flex-shrink: 0; white-space: nowrap; }

/* --- Mode testeur (v2.12) : discret dans Options, panneau distinct une
   fois débloqué -- pas fait pour attirer l'œil d'un joueur normal. */
.debug-unlock-form { display: flex; gap: .5rem; flex-shrink: 0; }
.debug-unlock-form input {
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px;
  padding: .5rem .7rem; color: var(--text); font-size: .82rem; width: 9rem;
}
.debug-panel {
  margin-top: .8rem; padding: 1rem; border-radius: 12px;
  background: rgba(255,138,0,.06); border: 1px dashed var(--orange-dark);
}
.debug-panel h3 { margin: 0 0 .3rem; font-size: .95rem; color: var(--orange); }
.debug-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .6rem; margin: .8rem 0; }
.debug-field { display: flex; flex-direction: column; gap: .25rem; font-size: .74rem; color: var(--muted); }
.debug-field input {
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px;
  padding: .4rem .55rem; color: var(--text); font-size: .82rem; font-variant-numeric: tabular-nums;
}
.debug-json-details { margin-top: .8rem; }
.debug-json-details summary { cursor: pointer; font-size: .8rem; color: var(--muted); }
.debug-json-details textarea {
  width: 100%; margin-top: .6rem; background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 8px; padding: .6rem; color: var(--text); font-family: var(--font-mono2); font-size: .74rem;
  resize: vertical;
}
.debug-json-details textarea.debug-json-error { border-color: var(--danger); }
.debug-panel-exit { margin-top: 1rem; padding-top: .8rem; border-top: 1px dashed var(--border); }

.report-field { display: flex; flex-direction: column; gap: .4rem; }
.report-field label { font-size: .82rem; color: var(--muted); font-weight: 600; }
.report-field input[type="text"], .report-field input[type="password"], .report-field input[type="email"], .report-field input[type="number"], .report-field textarea {
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px;
  color: var(--text); padding: .6rem .75rem; font: inherit; resize: vertical;
  /* Sans ceci, ces trois types de champ retombent sur le style par défaut
     du navigateur (fond blanc, police système) — jamais couverts jusqu'ici
     puisque seul input[type="text"] était visé, alors que les comptes
     (mot de passe/e-mail) et la contribution aux événements (nombre) s'en
     servent aussi. */
  -webkit-appearance: none;
  appearance: none;
}
.report-field input[type="text"]:focus, .report-field input[type="password"]:focus, .report-field input[type="email"]:focus, .report-field input[type="number"]:focus, .report-field textarea:focus { outline: none; border-color: var(--orange); }
.report-field input[type="password"] { letter-spacing: .15em; }
.report-field input:disabled { opacity: .5; cursor: not-allowed; }
/* Chrome/Edge forcent un fond clair sur un champ auto-rempli, en ignorant
   le background normal — ce délai de transition énorme est le contournement
   standard (le navigateur applique bien le fond, juste "après" une
   transition qui ne finit jamais en pratique). */
.report-field input:-webkit-autofill,
.report-field input:-webkit-autofill:hover,
.report-field input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0px 1000px var(--panel-2) inset;
  transition: background-color 9999s ease-in-out 0s;
}
.report-checkbox-label { display: flex; align-items: center; gap: .5rem; font-size: .85rem; cursor: pointer; }
.report-screenshot-preview { margin-top: .5rem; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); max-width: 320px; }
.report-screenshot-preview img { display: block; width: 100%; height: auto; }
#reportSubmitBtn { align-self: flex-start; }
#reportSubmitBtn:disabled { opacity: .5; cursor: not-allowed; }
#reportStatus:empty { display: none; }
#reportStatus.report-status-error { color: var(--danger); }
#reportStatus.report-status-ok { color: var(--ok); }

/* --- Fenêtre Statistiques --- */
.stats-section { margin-bottom: 1.3rem; }
.stats-section:last-child { margin-bottom: 0; }
.stats-section h3 {
  text-transform: uppercase; letter-spacing: .06em; font-size: .8rem;
  color: var(--muted); margin: 0 0 .6rem;
}
.stats-table { display: flex; flex-direction: column; gap: .3rem; }
.stats-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 1rem; align-items: center;
  padding: .5rem .8rem; border-radius: 9px; background: var(--panel-2);
  font-size: .85rem;
}
.stats-row.stats-header {
  background: transparent; padding: 0 .8rem; font-size: .68rem;
  text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
}
.stats-row-label { display: flex; align-items: center; gap: .4rem; }
.stats-row-run, .stats-row-life { text-align: right; min-width: 5rem; font-weight: 700; }
.stats-row-life { color: var(--orange); }
.stats-header .stats-row-run, .stats-header .stats-row-life { font-weight: 500; }
.stats-prestige-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(145px,1fr)); gap:.55rem; }
.stats-prestige-card { min-height:92px; padding:.7rem .8rem; border:1px solid var(--border); border-radius:10px; background:var(--panel-2); }
.stats-prestige-card.primary { border-color:var(--orange-dark); background:rgba(255,139,0,.08); }
.stats-prestige-card > span { display:block; color:var(--muted); font-size:.67rem; text-transform:uppercase; letter-spacing:.04em; }
.stats-prestige-card > strong { display:block; margin:.25rem 0; color:var(--text); font-size:1.35rem; }
.stats-prestige-card.primary > strong { color:var(--orange); }
.stats-prestige-card > small { display:block; color:var(--muted); font-size:.62rem; line-height:1.35; }

/* --- Fenêtre Statistiques : grille de trophées --- */
.trophy-category { margin-top: 1rem; }
.trophy-category:first-child { margin-top: 0; }
.trophy-category h4 {
  text-transform: uppercase; letter-spacing: .05em; font-size: .72rem;
  color: var(--muted); margin: 0 0 .5rem;
}
.trophy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .6rem; }
.trophy-card {
  display: flex; gap: .65rem; align-items: flex-start;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px;
  padding: .6rem .7rem;
}
.trophy-card.locked { opacity: .55; }
.trophy-card.unlocked { border-color: rgba(255, 138, 0, .4); background: linear-gradient(135deg, rgba(255, 138, 0, .07), var(--panel-2)); }
.trophy-icon { flex-shrink: 0; line-height: 0; }
.trophy-icon-img { width: 2rem; height: 2rem; object-fit: contain; }
.trophy-card.locked .trophy-icon-img { filter: grayscale(1) brightness(.75); }
.trophy-label { font-weight: 700; font-size: .82rem; margin-bottom: .15rem; }
.trophy-card.locked .trophy-label { color: var(--muted); letter-spacing: .08em; }
.trophy-card.unlocked .trophy-label { color: var(--orange); }
.trophy-desc { font-size: .74rem; color: var(--muted); line-height: 1.3; }
.tier-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .8rem;
  padding: .7rem .8rem;
  border-radius: 12px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  margin-bottom: .6rem;
  opacity: .6;
}
.tier-row.unlocked { opacity: 1; border-color: rgba(74,210,122,.35); }
.tier-status { font-size: 1.1rem; display: grid; place-items: center; }
.tier-icon { width: 1.15rem; height: 1.15rem; }
.tier-label { font-weight: 700; }
.tier-progress { color: var(--muted); font-size: .85rem; text-align: right; display: flex; align-items: center; justify-content: flex-end; gap: .5rem; }
.tier-progress-cost { white-space: nowrap; }

.assembly-req { margin-bottom: 1rem; }
.assembly-req:last-of-type { margin-bottom: 1.2rem; }
.assembly-req-label { display: flex; justify-content: space-between; font-size: .85rem; color: var(--muted); margin-bottom: .35rem; }

/* ---- v0.3 : onglets, boutique AWESOME ---- */

.tab-bar {
  display: flex;
  gap: .5rem;
  margin-bottom: 1.2rem;
  border-bottom: 1px solid var(--border);
}
.tab-btn {
  background: transparent;
  border: none;
  color: var(--muted);
  font-weight: 700;
  font-size: .95rem;
  padding: .8rem 1.1rem;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}

.tab-btn.active { color: var(--orange); border-bottom-color: var(--orange); }

.awesome-shop-panel { grid-column: 1 / -1; }
.owned-badge {
  display: inline-block;
  background: rgba(74,210,122,.15);
  color: var(--ok);
  border: 1px solid rgba(74,210,122,.35);
  border-radius: 999px;
  padding: .4rem .9rem;
  font-weight: 700;
  font-size: .85rem;
  white-space: nowrap;
}
.shop-item.locked .buy-upgrade-btn { display: none; }

/* ---- v0.4 : switch de langue ---- */

.lang-switch {
  display: flex;
  gap: .3rem;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .25rem;
}
.lang-btn {
  background: transparent;
  border: none;
  border-radius: 999px;
  padding: .3rem .55rem;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  opacity: .5;
  filter: grayscale(60%);
  transition: opacity .15s ease, filter .15s ease, background .15s ease;
}

.lang-btn.active { opacity: 1; filter: none; background: rgba(255,255,255,.08); }

.app-footer {
  margin-top: 2rem;
  padding: 1.5rem 0 .5rem;
  border-top: 1px solid var(--border);
  text-align: center;
}
.footer-link {
  background: none;
  border: none;
  color: var(--muted);
  font-size: .85rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: .2em;
  padding: .4rem;
}

/* ---- v0.5 : page Évolutions (changelog) ---- */

.changelog-entry {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel-2);
  margin-bottom: .8rem;
  overflow: hidden;
}
.changelog-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .8rem;
  background: transparent;
  border: none;
  color: var(--text);
  padding: .9rem 1.1rem;
  cursor: pointer;
  text-align: left;
  font-size: 1rem;
}
.changelog-version {
  font-weight: 800;
  color: var(--orange);
  min-width: 3.5rem;
}
.changelog-title { flex: 1; font-weight: 600; }
.changelog-chevron { color: var(--muted); transition: transform .15s ease; }
.changelog-entry.open .changelog-chevron { transform: rotate(180deg); }
.changelog-items {
  list-style: disc;
  margin: 0;
  padding: 0 1.4rem 1.1rem 2.2rem;
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.6;
  display: none;
}
.changelog-entry.open .changelog-items { display: block; }
.changelog-items li { margin-bottom: .4rem; }
.changelog-items li:last-child { margin-bottom: 0; }

@media (max-width: 980px) {
  .grid { grid-template-columns: 1fr; }
  .shop-panel { grid-row: auto; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .shop-item { grid-template-columns: 1fr; }
  .topbar { align-items: flex-start; flex-direction: column; }
  .header-actions { justify-content: flex-start; }
}

@media (max-width: 560px) {
  .app-shell { width: min(100% - 1rem, 1400px); padding: .75rem 0; }
  .panel { padding: 1rem; }
  .stats-grid { grid-template-columns: 1fr; }
  .big-button { min-height: 120px; font-size: 1.4rem; }
  .power-panel .power-summary { grid-template-columns: 1fr; }
  .tier-row { grid-template-columns: auto 1fr; }
  .tier-progress { grid-column: span 2; text-align: left; justify-content: flex-start; }
}

/* =========================================================================
 * Branche GRAPH2 — présentation façon Cookie Clicker (rangées + boutique)
 * ========================================================================= */

* { box-sizing: border-box; }
.fc-icon {
  display: inline-block;
  width: 1.35em;
  height: 1.35em;
  object-fit: contain;
  vertical-align: -0.25em;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.45));
  pointer-events: none;
  user-select: none;
}

body { margin: 0; }

.cc-shell {
  display: grid;
  grid-template-columns: 42% 58%;
  height: 100vh;
  overflow: hidden;
  transition: grid-template-columns .25s ease;
}
/* Une fois qu'au moins une Foreuse de Fer automatise le minage, le panneau
   gauche n'a plus besoin de dominer l'écran : on lui laisse une largeur fixe
   modeste et on rend le reste (tableau de bord + boutique) à la Boutique,
   qui est ce que les joueurs regardent réellement une fois lancés. */
.cc-shell.compact {
  grid-template-columns: 260px 1fr;
}

/* ---- Panneau gauche : zone cliquable ---- */
.cc-left {
  background: radial-gradient(circle at 50% 40%, #1c1f26 0%, #0d0e12 100%);
  display: flex;
  flex-direction: column;
  padding: 1rem 1.4rem;
  position: relative;
  overflow: hidden;
}
.cc-left-header { display: flex; justify-content: space-between; align-items: center; }
.cc-left-header .eyebrow { margin: 0; }

.cc-click-zone {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  gap: .6rem;
  transition: gap .2s ease;
}
.cc-clutter {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  --clutter-speed: 2.2s;
}
.cc-clutter span {
  position: absolute;
  opacity: .35;
  filter: saturate(.6);
  animation: clutter-pulse var(--clutter-speed, 2.2s) ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -0.17s); /* déphasage : évite que toutes les icônes pulsent à l'unisson */
  animation-play-state: running;
}
/* Aucune extraction en cours (tout début de partie, avant le premier
   extracteur) : pas de pulsation plutôt qu'un rythme figé à vide. */
.cc-clutter.idle span { animation-play-state: paused; opacity: .28; }
@keyframes clutter-pulse {
  0%, 100% { opacity: .3; filter: saturate(.6) brightness(1); }
  50% { opacity: .75; filter: saturate(.9) brightness(1.4); }
}
.clutter-icon { width: 1.4rem; height: 1.4rem; }

.cc-hint { position: relative; z-index: 1; font-size: .8rem; color: var(--muted); margin: 0; transition: opacity .2s ease, height .2s ease; }

/* Mode compact : le panneau gauche devient un simple rappel, la vraie place
   revient au tableau de bord et à la Boutique dans le panneau droit. */
.cc-shell.compact .cc-click-zone { gap: .3rem; }
.cc-shell.compact .cc-hint { display: none; }
.cc-shell.compact .cc-secondary-actions { transform: none; }

.cc-secondary-actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: .6rem;
  align-items: stretch;
  justify-content: center;
  width: 100%;
  max-width: 220px;
  margin-top: .35rem;
}

.cc-manual-action { width: 100%; }
.cc-auto-explore-toggle {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: .4rem;
  font-size: .72rem;
  color: var(--muted);
  cursor: pointer;
}
.cc-auto-explore-toggle input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 34px;
  height: 19px;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel-2);
  position: relative;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}
.cc-auto-explore-toggle input[type="checkbox"]::before {
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform .18s ease, background .18s ease;
}
.cc-auto-explore-toggle input[type="checkbox"]:checked {
  background: rgba(255, 140, 26, .22);
  border-color: var(--orange);
}
.cc-auto-explore-toggle input[type="checkbox"]:checked::before {
  transform: translateX(15px);
  background: var(--orange);
}
.cc-auto-explore-toggle input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

.options-toggle { display: flex; align-items: center; gap: .5rem; font-size: .82rem; color: var(--text); cursor: pointer; }
.options-toggle input { accent-color: var(--orange); cursor: pointer; width: 18px; height: 18px; }

/* coupe toute animation/transition CSS d'un coup — option Options, pour le
   confort visuel ou les préférences de mouvement réduit. */
body.no-animations *, body.no-animations *::before, body.no-animations *::after {
  animation: none !important;
  transition: none !important;
}
.cc-manual-btn {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: .55rem .7rem;
  border-radius: 12px;
  border: 2px solid var(--tint, var(--orange-dark));
  background: radial-gradient(circle at 20% 20%, #383c44, #202329 75%);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--tint, #ff8a00) 18%, transparent), 0 6px 12px rgba(0,0,0,.35);
  cursor: pointer;
  color: var(--text);
  transition: transform .08s ease;
}

.cc-manual-btn:active:not(:disabled) { transform: scale(.97); }
.cc-manual-btn:disabled { opacity: .5; cursor: not-allowed; }
/* Remplissage de progression À L'INTÉRIEUR du bouton (pas une barre séparée
   en dessous) : une bande colorée avance de gauche à droite au fil du
   minuteur, directement en fond du bouton lui-même. */
.cc-manual-btn-fill {
  position: absolute;
  inset: 0;
  width: 0%;
  z-index: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--tint, var(--orange)) 55%, transparent), color-mix(in srgb, var(--tint, var(--orange)) 30%, transparent));
  transition: width .3s linear;
}
.cc-manual-btn-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
}
.cc-manual-icon { width: 1.7rem; height: 1.7rem; flex-shrink: 0; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
.cc-manual-label { flex: 1; text-align: left; font-size: .82rem; font-weight: 700; }
.cc-manual-dur { font-size: .64rem; color: var(--muted); font-family: ui-monospace, Consolas, monospace; }

.cc-manual-progress { margin-top: .3rem; padding: 0 .2rem; }
.cc-manual-progress-text { display: block; font-size: .62rem; color: var(--muted); text-align: center; }

/* --- Fenêtre Récolter : sélection de ressources + aperçu ---
   Demande explicite : puces "en photo" -- grande icône en avant plutôt
   qu'une icône minuscule à côté du texte. Carte verticale plutôt qu'une
   ligne icône+texte. */
.res-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .6rem; margin: .8rem 0; }
.res-pick-chip {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .45rem;
  padding: .9rem .5rem; border-radius: 12px;
  background: var(--panel-2); border: 1px solid var(--border);
  color: var(--text); font-size: .72rem; font-weight: 600; text-align: center; cursor: pointer;
  transition: border-color .12s ease, background .12s ease, transform .12s ease;
}
.res-pick-chip:hover { transform: translateY(-2px); }
.res-pick-chip.sel { border-color: var(--orange); background: color-mix(in srgb, var(--orange) 12%, var(--panel-2)); }
.res-pick-icon { width: 2.6rem; height: 2.6rem; filter: drop-shadow(0 3px 6px rgba(0,0,0,.4)); }
.yield-preview { background: var(--bg-soft); border-radius: 9px; padding: .6rem .8rem; margin-bottom: .9rem; font-size: .78rem; }
.yield-preview .yield-line { display: flex; justify-content: space-between; padding: .1rem 0; color: var(--ok); }
.yield-preview .yield-malus { color: var(--danger); font-size: .7rem; margin-top: .3rem; }

/* --- Fenêtre Produire : liste de cibles + bannière active --- */
.prod-target-list { display: flex; flex-direction: column; gap: .4rem; margin: .8rem 0; }
.prod-target-row {
  display: flex; align-items: center; gap: .5rem;
  padding: .55rem .7rem; border-radius: 9px;
  background: var(--panel-2); border: 1px solid var(--border);
  color: var(--text); font-size: .8rem; cursor: pointer; text-align: left;
}
.prod-target-row span { flex: 1; }
.prod-target-row b { color: var(--power); }
.prod-target-row.sel { border-color: var(--power); background: color-mix(in srgb, var(--power) 10%, var(--panel-2)); }
.active-banner {
  background: color-mix(in srgb, var(--power) 12%, var(--panel));
  border: 1px solid var(--power); border-radius: 9px;
  padding: .6rem .8rem; font-size: .78rem; margin-top: .6rem;
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
}
.stop-produce-btn { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 7px; padding: .3rem .6rem; font-size: .7rem; cursor: pointer; white-space: nowrap; }

.cc-left-footer {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.cc-left-footer .sync-status { color: var(--muted); font-size: .75rem; margin-right: auto; }
.footer-disclaimer { color: var(--muted); font-size: .7rem; opacity: .65; }
.footer-privacy-link { color: var(--muted); font-size: .7rem; opacity: .65; text-decoration: underline; margin-left: .5rem; }
.footer-privacy-link:hover { opacity: 1; }
.options-disclaimer {
  margin-top: 1.2rem;
  padding-top: .9rem;
  border-top: 1px solid var(--border);
  font-size: .74rem;
  opacity: .75;
}

.help-sections {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.2rem;
}
.help-section h3 {
  margin: 0 0 .3rem;
  font-size: .95rem;
}
.help-section p {
  margin: 0;
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.5;
}
.restore-server-save-btn {
  padding: .45rem .7rem;
  border: 1px solid var(--orange-dark);
  border-radius: 999px;
  background: rgba(255, 139, 0, .08);
  color: var(--orange);
  font-size: .72rem;
  font-weight: 700;
  cursor: pointer;
}

/* ---- Panneau droit ---- */
.cc-right {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border-left: 1px solid var(--border);
  overflow: hidden;
}
/* ===================== En-tête v1.9 (marque + navigation + statut) ===================== */
.cc-header-v2 { background: var(--bg-soft); border-bottom: 1px solid var(--border); }
.cc-brand-row { display: flex; align-items: center; justify-content: space-between; padding: .55rem .9rem .45rem; flex-wrap: wrap; gap: .5rem; }
.cc-brand { display: flex; align-items: center; gap: .5rem; }
.cc-brand-mark {
  width: 26px; height: 26px;
  background: rgba(255,138,0,.15); border: 1px solid rgba(255,138,0,.4);
  clip-path: polygon(20% 0, 100% 0, 100% 80%, 80% 100%, 0 100%, 0 20%);
  display: flex; align-items: center; justify-content: center;
  color: var(--orange); font-family: var(--font-display); font-weight: 700; font-size: .72rem;
}
.cc-brand-word { font-family: var(--font-display); font-weight: 700; font-size: .88rem; letter-spacing: .05em; color: var(--text); }
.cc-brand-word span { color: var(--orange); }
.cc-brand-sub { font-family: var(--font-mono2); font-size: .58rem; color: var(--muted); letter-spacing: .07em; margin-left: .3rem; text-transform: uppercase; }

.cc-util-row { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.cc-util-btn {
  font-family: var(--font-mono2); font-size: .68rem; color: var(--muted);
  background: transparent; border: 1px solid var(--border); border-radius: 3px;
  padding: .3rem .55rem; cursor: pointer; display: inline-flex; align-items: center; gap: .3rem;
  text-decoration: none; transition: border-color .15s, color .15s;
}
.cc-util-discord { color: #8ea6ff; border-color: rgba(142,166,255,.3); }

.cc-more-wrap { position: relative; }
.cc-more-panel {
  position: absolute; top: calc(100% + 5px); right: 0; z-index: 20;
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 6px; padding: .35rem; min-width: 180px;
  box-shadow: var(--shadow); display: grid; gap: .1rem;
}
.cc-more-item {
  display: flex; align-items: center; gap: .5rem;
  padding: .45rem .6rem; border-radius: 4px; cursor: pointer;
  font-size: .78rem; color: var(--muted); background: transparent; border: none;
  text-align: left; width: 100%; transition: background .12s, color .12s;
}
.cc-more-divider { height: 1px; background: var(--border); margin: .25rem .15rem; }

.cc-main-tabs { display: flex; gap: .25rem; padding: 0 .7rem; flex-wrap: wrap; }
.cc-nav-tab {
  font-family: var(--font-display); font-weight: 600; font-size: .74rem; letter-spacing: .01em;
  color: var(--muted); background: transparent; border: none; cursor: pointer;
  padding: .55rem .8rem .5rem;
  clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 8px);
  position: relative; top: 1px;
  display: flex; align-items: center; gap: .4rem;
  transition: color .15s;
}
.cc-tab-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--muted); opacity: .5; flex-shrink: 0; }
.cc-nav-tab.active {
  color: var(--text); background: var(--bg);
  border: 1px solid var(--border); border-bottom: 1px solid var(--bg);
}
.cc-nav-tab.active .cc-tab-dot { background: var(--orange); opacity: 1; box-shadow: 0 0 5px rgba(255,138,0,.7); }
.cc-nav-tab.cc-tab-soon { color: var(--muted); opacity: .6; cursor: default; }
.cc-nav-tab.cc-tab-soon:disabled { pointer-events: none; }
.cc-soon-badge {
  font-family: var(--font-mono2); font-size: .55rem; letter-spacing: .05em;
  color: var(--cyan); background: var(--cyan-dim); border: 1px solid rgba(79,214,240,.35);
  padding: 1px 5px; border-radius: 2px; text-transform: uppercase;
}

.cc-status-strip {
  display: flex; align-items: center; gap: 0; flex-wrap: wrap; row-gap: .4rem;
  padding: .5rem .9rem; border-bottom: 1px solid var(--border); background: var(--panel);
}
.cc-status-ada {
  flex: 1 1 260px; min-width: 200px; display: flex; align-items: center; gap: .5rem;
  font-size: .78rem; color: var(--muted); overflow: hidden;
}
.cc-status-ada-tag {
  font-family: var(--font-mono2); font-size: .58rem; letter-spacing: .08em;
  color: var(--cyan); background: var(--cyan-dim); border: 1px solid rgba(79,214,240,.3);
  padding: 1px 5px; border-radius: 2px; flex-shrink: 0;
}
.cc-status-chip { display: flex; align-items: center; gap: .5rem; padding: .3rem .7rem; margin-left: .3rem; border-left: 1px solid var(--border); }
.cc-status-tier .cc-tier-mini { margin-left: 0; white-space: nowrap; font-size: .7rem; }
.cc-status-tier .cc-tier-mini-bar { width: 90px; max-width: 90px; }

.cc-power-panel, .cc-currency-panel {
  background: transparent; border: none; border-left: 1px solid var(--border);
  border-radius: 0; display: flex; align-items: center; gap: .5rem; padding: .3rem .7rem;
}
/* v2.4.3 : le panneau pouvait grandir sans limite (flex 0 0 auto) et son
   texte ne se repliait jamais -- avec le message de délestage complet
   (« Délestage : 98% alimenté · 295.0 MW demandés »), il débordait à
   droite sur téléphone. Même schéma que le Tableau de bord corrigé en
   v2.4.0-e : nowrap + refus de rétrécir. */
.cc-power-panel { flex: 1 1 auto; min-width: 0; }
.cc-currency-panel { flex: 0 1 auto; min-width: 0; flex-wrap: wrap; row-gap: .3rem; }
.cc-community-event-widget {
  flex: 1 1 260px; min-width: 200px;
  display: flex; align-items: center; gap: .5rem;
  background: linear-gradient(90deg, transparent, rgba(255,138,0,.06));
  border: none; border-left: 1px solid var(--border); border-radius: 0 4px 4px 0;
  padding: .35rem .7rem; margin-left: .3rem; cursor: pointer; color: inherit; font-family: inherit; text-align: left;
}
.cc-community-event-widget:hover { background: linear-gradient(90deg, transparent, rgba(255,140,26,.1)); }
.cc-community-event-widget .fc-icon { width: 1.5rem; height: 1.5rem; flex-shrink: 0; }
.cc-community-event-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.cc-community-event-title { font-size: .68rem; color: var(--orange); white-space: normal; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.cc-community-event-track { display: block; height: 5px; background: #111; border-radius: 999px; overflow: hidden; }
.cc-community-event-end { display: block; font-size: .58rem; color: var(--muted); margin-top: .1rem; }
.cc-community-event-fill { display: block; height: 100%; background: var(--orange); transition: width .3s ease; }
.community-contribute-input-row { display: flex; gap: .5rem; }
.community-contribute-input-row input { flex: 1; min-width: 0; }
.community-contribute-input-row button { flex-shrink: 0; }
@media (max-width: 720px) {
  .cc-community-event-widget { flex-basis: 100%; order: 3; border-left: none; border-top: 1px solid var(--border); margin-left: 0; padding-top: .5rem; }
}
.cc-currency-panel .event-banner { margin-top: 0; }
.cc-power-panel .power-gauge-svg { flex-shrink: 0; }
.cc-power-panel .power-gauge-track { fill: none; stroke: var(--panel-2); }
.cc-power-panel .power-gauge-fill { fill: none; stroke: var(--power); stroke-linecap: round; transition: stroke-dashoffset .6s ease; }
.cc-power-panel.warning .power-gauge-fill { stroke: var(--danger); }
.cc-power-panel .power-gauge-text { display: flex; align-items: baseline; gap: .4rem; line-height: 1.2; white-space: nowrap; font-family: var(--font-mono2); min-width: 0; flex-wrap: wrap; }
.cc-power-panel .power-gauge-value { font-size: .88rem; font-weight: 700; }
.cc-power-panel .power-gauge-value small { font-size: .6rem; color: var(--muted); font-weight: 600; }
.cc-power-panel .power-gauge-sub { font-size: .6rem; color: var(--muted); white-space: normal; min-width: 0; }
/* Sur téléphone, la jauge et son texte passent sur deux niveaux plutôt
   que de se disputer une largeur qui n'existe pas. */
@media (max-width: 720px) {
  .cc-power-panel .power-gauge-text { flex-direction: column; align-items: flex-start; gap: .1rem; }
  .cc-power-panel .power-gauge-sub { font-size: .58rem; line-height: 1.25; }
}
.cc-power-panel.warning .power-gauge-sub { color: var(--danger); }
.cc-power-panel .power-gauge-none { font-size: .7rem; color: var(--muted); }
.cc-currency-panel .cc-currency-icon { margin-left: 0; }

.cc-currency-icon { display: inline-flex; align-items: center; }
.cc-currency-icon .fc-icon { width: 1.25rem; height: 1.25rem; }
.cc-currency-panel strong { font-family: var(--font-mono2); font-size: .92rem; color: var(--orange); }
.cc-tier-mini { font-size: .7rem; color: var(--muted); margin-left: .5rem; font-family: var(--font-mono2); }
.cc-tier-mini-bar { flex: 1; max-width: 180px; height: 6px; background: #111; border-radius: 999px; overflow: hidden; }
.cc-tier-mini-fill { height: 100%; background: var(--orange); }

.cc-body { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0; }

.tab-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--danger);
  border: 1.5px solid var(--bg);
}
.cc-main-panel {
  display: none;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.cc-main-panel.active { display: flex; }

/* ---- Tableau de bord de production : une ligne par bâtiment possédé, avec
   le total agrégé (débit réel, MW consommés/produits). ---- */
.cc-dash-heading {
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  margin: 0;
  padding: .6rem .9rem;
  border-bottom: 1px solid var(--border);
  background: var(--panel-2);
}
.cc-lanes {
  flex: 1;
  overflow-y: auto;
}
.cc-dash-empty {
  padding: 1.2rem;
  color: var(--muted);
  font-size: .82rem;
  text-align: center;
}
.cc-dash-row {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .5rem .9rem;
  border-bottom: 1px solid var(--border);
  border-left: 3px solid var(--dash-tint, var(--border));
  background: color-mix(in srgb, var(--dash-tint, #333) 7%, var(--panel));
}
.cc-dash-row.dragging { opacity: .5; }
.dash-drag-handle {
  cursor: grab;
  color: var(--muted);
  touch-action: none;
  flex-shrink: 0;
  padding: 0 .1rem;
  user-select: none;
  -webkit-user-select: none;
}
.cc-dash-row.dragging .dash-drag-handle { cursor: grabbing; }
.cc-dash-ring-wrap { position: relative; width: 2.1rem; height: 2.1rem; flex-shrink: 0; }
.cc-dash-ring-wrap .cc-dash-icon { width: 1.6rem; height: 1.6rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.cc-dash-ring { position: absolute; inset: 0; }
.cc-dash-ring .ring-track { fill: none; stroke: var(--panel-2); stroke-width: 3; }
.cc-dash-ring .ring-fill { fill: none; stroke: var(--orange); stroke-width: 3; stroke-linecap: round; transition: stroke-dashoffset .5s ease; }
.cc-dash-info { flex: 1; min-width: 0; }
.cc-dash-name { font-size: .82rem; font-weight: 700; display: flex; gap: .4rem; align-items: baseline; flex-wrap: wrap; }
.cc-dash-name .dash-count { color: var(--orange); }
.cc-dash-name .dash-mk { font-size: .64rem; color: var(--ok); }
.cc-dash-name .dash-active { color: var(--muted); font-size: .68rem; }
.cc-dash-detail { font-size: .72rem; color: var(--muted); }
/* Colonne de droite (débits). Signalé : avec les recettes à 3-4 intrants
   des Paliers 5/6 ("0.03/s Cadres Modulaires + 0.03/s Stators
   Électromagnétiques + ..."), l'ancien couple white-space:nowrap +
   flex-shrink:0 exigeait une largeur énorme -- elle débordait de la carte
   ET écrasait la colonne de gauche à quelques pixels, d'où le nom du
   bâtiment qui s'empilait un mot par ligne. Peut désormais se replier et
   rétrécir plutôt que de pousser tout le reste. */
.cc-dash-flow { display: flex; flex-direction: column; align-items: flex-end; gap: .15rem; font-size: .74rem; font-weight: 700; white-space: normal; text-align: right; flex-shrink: 1; min-width: 0; max-width: 55%; overflow-wrap: anywhere; }
.cc-dash-flow .recipe-out { font-size: .8rem; }
.cc-dash-flow .recipe-in { font-weight: 500; font-size: .68rem; }
.cc-dash-flow .recipe-elec { font-weight: 500; font-size: .68rem; }
.cc-dash-flow.warning .recipe-out { color: var(--danger); }
/* Sur téléphone, deux colonnes côte à côte n'ont pas la place : la ligne
   passe sur deux niveaux, les débits sous le nom du bâtiment, alignés à
   gauche comme le reste. */
@media (max-width: 620px) {
  .cc-dash-row { flex-wrap: wrap; }
  .cc-dash-info { flex: 1 1 100%; }
  .cc-dash-flow { max-width: none; flex: 1 1 100%; align-items: flex-start; text-align: left; padding-left: 2.8rem; }
}

.cc-lanes-col {
  flex-direction: column;
  border-bottom: 1px solid var(--border);
}

.cc-shop {
  flex-direction: column;
  width: auto;
  border-left: none;
  padding: 1rem 1.2rem;
  overflow-y: auto;
  background: var(--panel-2);
}
.cc-shop h2 { font-size: 1rem; margin: 0 0 .6rem; }
.cc-qty-toggle { display: flex; align-items: center; gap: .4rem; margin-bottom: .8rem; font-size: .78rem; color: var(--muted); }
.qty-btn {
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: .25rem .6rem;
  cursor: pointer;
  font-size: .78rem;
}
.qty-btn.active { border-color: var(--orange); color: var(--orange); }

.report-type-toggle { display: flex; gap: .5rem; }
.report-type-btn {
  flex: 1;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: .5rem;
  cursor: pointer;
  font-weight: 700;
}
.report-type-btn.active { border-color: var(--orange); color: var(--orange); background: rgba(255, 140, 26, .1); }

#shopList {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: .6rem;
  align-content: start;
  align-items: start;
}
.shop-row {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 4px solid var(--tint, var(--border));
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  width: 100%;
  text-align: left;
  color: var(--text);
  padding: 0;
  transition: border-color .15s;
}
/* Signalé : la carte devenait orange et illisible en interagissant avec.
   Cause probable : la règle générique `button { background: var(--orange); }`
   (pensée pour les gros boutons d'action comme "Acheter") -- la spécificité
   de classe devrait suffire à la repousser en temps normal, mais mieux vaut
   fixer le fond explicitement sur CHAQUE état d'interaction plutôt que de
   compter dessus, au cas où un état précis (focus tactile, etc.) la
   laisserait passer. */
.shop-row,
.shop-row:hover,
.shop-row:focus,
.shop-row:focus-visible,
.shop-row:active {
  background: var(--panel);
}
.shop-row:hover { border-top-color: rgba(255,255,255,.2); border-right-color: rgba(255,255,255,.2); border-bottom-color: rgba(255,255,255,.2); }
.shop-row:focus, .shop-row:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }
.shop-row:disabled { opacity: .4; cursor: not-allowed; }
.shop-row.locked { opacity: .4; cursor: default; padding: .6rem .65rem; }
.shop-row-top { display: flex; align-items: flex-start; gap: .55rem; padding: .55rem .6rem .3rem; }
.shop-row.locked .shop-row-top { padding: 0; }
.shop-row-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.9rem; height: 1.9rem; flex-shrink: 0; margin-top: .1rem;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 5px;
}
.shop-row-icon .fc-icon { width: 1.25rem; height: 1.25rem; }
.shop-row-title-wrap { flex: 1; min-width: 0; }
/* réserve toujours 2 lignes pour le nom, même s'il tient sur une seule --
   sans ça, un nom de bâtiment plus long passant sur 2 lignes décale toute
   la carte vers le bas par rapport à ses voisines dans la même rangée. */
.shop-row-name {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: .82rem; line-height: 1.25; min-height: 2.5em;
}
.shop-row-name .count { color: var(--orange); }
.shop-row-locked-hint { display: block; color: var(--muted); font-size: .68rem; margin-top: .3rem; }
.shop-row-power {
  display: inline-flex; align-items: center; gap: .2rem; margin-top: .3rem;
  font-size: .64rem; font-weight: 600; padding: .1rem .4rem; border-radius: 3px;
  background: rgba(217,75,75,.15); color: #ff9d95; border: 1px solid rgba(217,75,75,.3);
  min-height: 1.2em; box-sizing: content-box;
}
/* Signalé (capture réelle) : un bâtiment sans coût électrique (ex. la toute
   première Foreuse de Fer) faisait complètement disparaître cette ligne
   (display:none), rendant sa carte plus courte que ses voisines qui, elles,
   affichaient un badge -- effet "dents de scie" dans la grille. .empty
   garde exactement le même espace réservé, juste sans contenu ni couleur. */
.shop-row-power.empty { background: transparent; border-color: transparent; }
.shop-row-power .fc-icon { width: .9em; height: .9em; }
/* Segments de recette (IN/OUT) -- rouge doux = consommé (normal, pas une
   alerte), vert = produit. */
.recipe-in { color: #ff9d85; }
.recipe-out { color: var(--ok); font-weight: 700; }
.recipe-arrow { color: var(--muted); margin: 0 .25em; }
/* Réserve toujours 2 lignes, comme pour le titre -- sans ça, une recette
   sur 1 ligne (la plupart) à côté d'une qui déborde sur 2 (nom de ressource
   plus long, ou plusieurs intrants) décale les cartes entre elles. */
/* Signalé (capture réelle) : min-height réservait bien un minimum de 2
   lignes, mais ne plafonnait rien -- une recette avec des noms de
   ressources longs ("Minerai de Caterium", "Lingots de Caterium") pouvait
   déborder sur 3 lignes et repousser la carte plus haut que ses voisines.
   Même technique que le titre : -webkit-line-clamp impose un vrai plafond,
   pas juste un minimum. */
.shop-row-flow {
  padding: 0 .6rem .55rem; color: var(--muted); line-height: 1.35; font-size: .7rem;
  height: 54px; box-sizing: border-box;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.shop-row-buybar {
  margin-top: auto; display: flex; flex-direction: column; gap: .15rem;
  background: var(--panel-2); border-top: 1px solid var(--border);
  padding: .45rem .6rem; font-size: .72rem;
}
.shop-row:hover .shop-row-buybar { background: rgba(255,138,0,.08); }
.shop-row-buy-label { font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--muted); font-size: .68rem; }
.shop-row-price { font-size: .78rem; color: var(--orange); font-weight: 700; white-space: nowrap; }
.sink-shop-row { display:block; cursor:default; padding:.65rem; }
.shop-sink-main { display:flex; flex-direction: column; gap:.5rem; }
.shop-sink-main .shop-row-top { padding: 0; }
.shop-sink-buy { min-width:92px; padding:.45rem .55rem; border:1px solid var(--orange-dark); border-radius:7px; background:rgba(255,139,0,.08); color:var(--orange); cursor:pointer; align-self: flex-start; }

.shop-sink-buy:disabled { opacity:.4; cursor:not-allowed; }
.shop-sink-buy-label { display:block; margin-bottom:.15rem; color:var(--muted); font-size:.58rem; text-transform:uppercase; }
.shop-sink-slot .sink-recipe-selector { margin-top:.65rem; }
.shop-sink-selector .sink-recipe-options { grid-template-columns:1fr; }
.shop-sink-selector .sink-recipe-option { grid-template-columns:1fr; }

/* Signalé (capture mobile) : les cartes de la Boutique réservaient une
   hauteur fixe pour le titre (2 lignes) et la ligne de débit (3 lignes),
   même quand le contenu réel tenait sur une seule -- beaucoup de scroll
   pour peu d'information. Nécessaire sur desktop (#shopList est une grille
   à plusieurs colonnes, il faut que les cartes d'une même rangée
   s'alignent), mais sous 980px la grille passe de toute façon à 1 colonne
   (minmax(230px,1fr) ne laisse plus de place pour un 2e) -- aucune rangée
   à aligner, la réservation ne fait plus que gaspiller de l'espace. */
@media (max-width: 980px) {
  .shop-row-name { min-height: 0; }
  .shop-row-flow { height: auto; min-height: 0; }
}
.shop-sink-selector .sink-recipe-option > strong { grid-column:1; }
/* v2.4.4 : devenu un <button> repliable. Apparence volontairement
   identique à l'ancien titre (même couleur, même cadre, même graisse) --
   seuls la flèche et le compteur s'ajoutent, pour que le changement se
   remarque le moins possible. */
.shop-category-title {
  grid-column: 1 / -1;
  display: inline-flex; width: fit-content;
  align-items: center; gap: .45rem;
  font-family: var(--font-mono2, ui-monospace, monospace);
  text-transform: uppercase;
  font-size: .68rem;
  letter-spacing: .1em;
  color: var(--cyan, #4fd6f0);
  background: var(--cyan-dim, rgba(79,214,240,.12));
  border: 1px solid rgba(79,214,240,.3);
  border-radius: 3px;
  padding: .2rem .55rem;
  margin: .8rem 0 .5rem;
  cursor: pointer;
}
.shop-category-title:hover { background: rgba(79,214,240,.2); }
.shop-category-caret { transition: transform .18s ease; font-size: .8em; }
.shop-category-title.collapsed .shop-category-caret { transform: rotate(-90deg); }
.shop-category-count { opacity: .65; font-weight: 700; }
/* Section repliée : marges resserrées, pour que plusieurs sections
   fermées d'affilée forment une liste compacte et pas une suite de
   pastilles espacées dans le vide. */
.shop-category-title.collapsed { margin: .25rem 0 .1rem; }
/* Les lignes d'une section repliée disparaissent de la grille. */
.shop-row-hidden { display: none !important; }
.shop-category-title:first-child { margin-top: 0; }

/* ---- Modal (partagé avec la branche Graph) ---- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.65);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  /* v2.5.20 : doit rester au-dessus du header/nav mobile sticky
     (z-index 180/210) et du menu burger (400). */
  z-index: 520;
}
.modal-box {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1.6rem;
  padding-top: 2.3rem;
  max-width: 640px;
  width: 100%;
  max-height: 85vh;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal-box.dragging { transition: none; user-select: none; }
.modal-drag-handle {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  color: var(--muted);
  touch-action: none;
  border-radius: 18px 18px 0 0;
}
.modal-drag-handle:active { cursor: grabbing; }
.modal-drag-handle:hover { background: rgba(255, 255, 255, .03); }
.modal-drag-handle span { font-size: .85rem; letter-spacing: .1em; pointer-events: none; }
/* Le bouton fermer (.modal-close, position: absolute par rapport à
   .modal-box) doit rester visible en permanence, même quand le contenu
   d'une longue fenêtre (ex. Statistiques + 50 trophées) dépasse la hauteur
   disponible. Avant, .modal-box portait À LA FOIS le défilement ET le
   bouton — le bouton scrollait avec le reste puisqu'il fait partie du
   contenu qui défile. Désormais, seul ce conteneur interne défile ;
   .modal-box lui-même reste fixe, donc le bouton positionné par rapport à
   lui aussi. */
.modal-scroll {
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0; /* nécessaire pour qu'un enfant flex avec overflow se limite bien à l'espace disponible, sinon il s'étire selon son contenu */
}
.modal-close {
  position: absolute;
  top: 1rem; right: 1rem;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 999px;
  width: 32px; height: 32px;
  min-width: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  cursor: pointer;
  font-size: .9rem;
  z-index: 5;
  flex-shrink: 0;
}
.modal-pane h2 {
  /* Laisse la place au bouton fermer (position absolue) pour que les titres
     longs ne passent pas derrière lui, notamment sur mobile où le modal est
     étroit et le titre peut occuper toute la largeur disponible. */
  padding-right: 2.75rem;
}

.event-choice-list {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  margin-top: 1.2rem;
}
.event-choice-btn {
  text-align: left;
  white-space: normal;
  line-height: 1.35;
  padding: .9rem 1.1rem;
  border-radius: 12px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  font-weight: 700;
}

@media (max-width: 980px) {
  /* Sur mobile, on abandonne complètement la mise en page "app fixe sans
     scroll" du desktop (colonnes figées à 100vh avec overflow:hidden) : le
     contenu (gros bouton, boutons de récolte, boutique...) débordait de la
     hauteur allouée et se retrouvait purement invisible (coupé, pas
     scrollable). À la place : flux de page normal, tout défile ensemble. */
  .cc-shell {
    display: block;
    height: auto;
    overflow: visible;
  }
  .cc-left {
    overflow: visible;
    min-height: auto;
    padding-bottom: 1.5rem;
  }
  .cc-click-zone { flex: none; padding: 1rem 0; }
  .cc-secondary-actions { max-width: 260px; width: 100%; }

  .cc-right {
    overflow: visible;
    border-left: none;
    border-top: 1px solid var(--border);
  }
  .cc-body {
    flex-direction: column;
    overflow: visible;
  }
  .cc-main-tabs { position: sticky; top: 0; z-index: 4; flex-wrap: wrap; }
  .cc-main-panel { display: none; overflow: visible; }
  .cc-main-panel.active { display: flex; }
  .cc-lanes {
    overflow-y: visible;
    max-height: none;
  }
  .cc-lanes-col { overflow: visible; }
  .cc-log-panel { overflow-y: visible; }
  .cc-shop {
    width: auto;
    border-left: none;
    border-top: 0;
    overflow-y: visible;
    max-height: none;
  }
  .cc-brand-row { flex-wrap: wrap; }
  /* Signalé (capture mobile) : le bouton "Plus" finit par passer seul sur sa
     propre ligne (flex-wrap sur .cc-util-row) une fois que Nouveautés/Compte/
     Discord ne tiennent plus sur une seule rangée -- il se retrouve alors
     près du bord GAUCHE de l'écran. Le panneau, ancré en `right:0` sur son
     .cc-more-wrap (large comme le bouton lui-même), s'étalait donc en très
     grande partie hors écran vers la gauche (180px de large, quasi rien à
     gauche du bouton à cet endroit). Corrigé en ouvrant plutôt vers la
     droite du bouton en dessous de 980px, où il y a largement la place. */
  .cc-more-panel { left: 0; right: auto; }
  .cc-status-strip { flex-direction: column; align-items: stretch; }
  /* Signalé (capture mobile) : .cc-status-ada et les autres puces gardaient
     leur flex-grow:1 pensé pour la ligne horizontale desktop -- en colonne,
     ça les fait s'étirer pour remplir tout l'espace vertical restant,
     créant un grand vide entre le texte ADA et le reste. flex:0 0 auto
     leur redonne juste leur hauteur naturelle, comme les autres puces déjà
     corrigées ici pour la bordure/marge. */
  .cc-status-ada, .cc-currency-panel, .cc-community-event-widget { flex: 0 0 auto; }
  .cc-status-chip, .cc-power-panel, .cc-currency-panel, .cc-community-event-widget { border-left: none; border-top: 1px solid var(--border); margin-left: 0; padding-top: .4rem; }
  .cc-power-panel { justify-content: center; }
}

/* ---- graph2 : barre de ressources (version compacte, une ligne par carte) + journal ADA ---- */

/* Bandeau repliable des ressources (v2.4.2). Le bouton existait dans le
   HTML depuis un moment mais n'avait ni style ni code -- il ne servait à
   rien. Signalé : sur téléphone, les 29 ressources occupent tout l'écran
   et il faut faire défiler très bas pour atteindre le jeu. Le bouton
   n'apparaît QUE sur petit écran : sur desktop la barre tient sur
   quelques lignes et masquer serait une gêne inutile. */
.cc-resource-toggle { display: none; }
@media (max-width: 720px) {
  .cc-resource-toggle {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .5rem .9rem;
    border: 0;
    border-bottom: 1px solid var(--border);
    background: #171a20;
    color: var(--muted);
    font: inherit;
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    cursor: pointer;
  }
  .cc-resource-toggle-caret { transition: transform .18s ease; color: var(--orange); font-size: .95rem; line-height: 1; }
  .cc-resource-toggle.collapsed .cc-resource-toggle-caret { transform: rotate(-90deg); }
  .cc-resource-toggle-count { margin-left: auto; color: var(--orange); font-weight: 700; }
  .cc-resource-bar.collapsed { display: none; }
}

.cc-resource-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  padding: .45rem .9rem;
  border-bottom: 1px solid var(--border);
  background: #171a20;
}
.resource-chip {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: 8px;
  padding: .3rem .55rem;
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  grid-template-areas: "handle icon main flow";
  align-items: center;
  column-gap: .4rem;
  min-width: 128px;
  transition: border-left-color .3s ease;
}
/* remplace l'ancienne barre de flux animée par une simple bordure de
   couleur : même signal "produit / consommé / stable" en un coup d'œil,
   sans le coût vertical d'une ligne dédiée. */
.resource-chip.net-pos { border-left-color: var(--ok); }
.resource-chip.net-neg { border-left-color: var(--danger); }
/* teinte de fond très légère par famille de minerai (v1.9) -- superposée
   en linear-gradient plutôt qu'un simple background-color, pour rester au
   dessus de --panel-2 sans avoir à dupliquer sa valeur ici. Reste purement
   décoratif : le signal produit/consommé (bordure) et le contenu textuel
   ne dépendent jamais de cette couche. */
.resource-chip.family-iron { background: linear-gradient(var(--tint-iron), var(--tint-iron)), var(--panel-2); }
.resource-chip.family-copper { background: linear-gradient(var(--tint-copper), var(--tint-copper)), var(--panel-2); }
.resource-chip.family-caterium { background: linear-gradient(var(--tint-caterium), var(--tint-caterium)), var(--panel-2); }
.resource-chip.family-limestone { background: linear-gradient(var(--tint-limestone), var(--tint-limestone)), var(--panel-2); }
.resource-chip.family-coal { background: linear-gradient(var(--tint-coal), var(--tint-coal)), var(--panel-2); }
.resource-chip.family-steel { background: linear-gradient(var(--tint-steel), var(--tint-steel)), var(--panel-2); }
.resource-chip.family-oil { background: linear-gradient(var(--tint-oil), var(--tint-oil)), var(--panel-2); }
.resource-chip.family-misc { background: linear-gradient(var(--tint-misc), var(--tint-misc)), var(--panel-2); }
.chip-drag-handle {
  grid-area: handle;
  cursor: grab;
  color: var(--muted);
  touch-action: none;
  padding: 0 .1rem;
  user-select: none;
  -webkit-user-select: none;
}
.resource-chip.dragging {
  opacity: .5;
  cursor: grabbing;
}
.resource-chip .chip-icon { grid-area: icon; display: inline-flex; }
.resource-chip .chip-icon .fc-icon { width: 1.3rem; height: 1.3rem; }
.resource-chip .chip-main { grid-area: main; display: flex; align-items: baseline; gap: .35rem; min-width: 0; white-space: nowrap; }
.resource-chip .chip-label { font-size: .62rem; color: var(--muted); text-transform: uppercase; letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; }
.resource-chip strong { font-size: .84rem; color: var(--orange); }
.resource-chip .chip-flow { grid-area: flow; font-size: .62rem; display: flex; gap: .35rem; white-space: nowrap; }
.resource-chip .flow-in { color: var(--ok); }
.resource-chip .flow-out { color: var(--danger); }

/* ---- grande barre (option Options) : reprend l'affichage détaillé
   d'origine, sur 4 lignes par carte avec barre de flux animée, pour qui
   préfère plus d'information visible au prix de plus de hauteur. ---- */
.cc-resource-bar.big { padding: .6rem 1rem; gap: .5rem; }
.cc-resource-bar.big .resource-chip {
  border-left-width: 1px;
  border-radius: 10px;
  padding: .35rem .6rem;
  grid-template-columns: auto auto 1fr;
  grid-template-areas: "handle icon label" "handle icon amount" "handle flow flow" "handle bar bar";
  min-width: 96px;
}
.cc-resource-bar.big .resource-chip.net-pos,
.cc-resource-bar.big .resource-chip.net-neg { border-left-color: var(--border); }
.cc-resource-bar.big .resource-chip .chip-icon .fc-icon { width: 1.55rem; height: 1.55rem; }
.cc-resource-bar.big .resource-chip .chip-label { grid-area: label; font-size: .68rem; margin: 0; }
.cc-resource-bar.big .resource-chip strong { grid-area: amount; font-size: .95rem; }
.cc-resource-bar.big .resource-chip .chip-flow { grid-area: flow; font-size: .68rem; margin-top: .2rem; }
.cc-resource-bar.big .resource-chip .flowbar { grid-area: bar; height: 4px; border-radius: 3px; background: var(--panel-2); overflow: hidden; margin-top: .3rem; }
.cc-resource-bar.big .resource-chip .flowbar-fill { display: block; height: 100%; width: 100%; background-image: repeating-linear-gradient(90deg, currentColor 0 8px, transparent 8px 16px); background-size: 32px 100%; }
.cc-resource-bar.big .resource-chip .flowbar-fill.pos { color: var(--ok); animation: flowbar-pos 900ms linear infinite; }
.cc-resource-bar.big .resource-chip .flowbar-fill.neg { color: var(--danger); animation: flowbar-neg 900ms linear infinite; }
.cc-resource-bar.big .resource-chip .flowbar-fill.idle { color: var(--border); }
@keyframes flowbar-pos { from { background-position: 32px 0; } to { background-position: 0 0; } }
@keyframes flowbar-neg { from { background-position: 0 0; } to { background-position: 32px 0; } }

.cc-log-panel {
  flex-direction: column;
  border-top: 0;
  padding: .9rem 1rem;
  overflow-y: auto;
  background: var(--panel-2);
}
.cc-log-panel h2 { font-size: .82rem; margin: 0 0 .4rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.cc-log-panel ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.log-message { display: flex; }
.log-bubble {
  position: relative;
  max-width: 88%;
  background: var(--panel-3, #1c2027);
  border: 1px solid var(--border);
  border-radius: 14px 14px 14px 4px;
  padding: .5rem .7rem .4rem;
}
.log-sender {
  display: block;
  font-size: .65rem;
  font-weight: 800;
  color: var(--orange);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: .15rem;
}
.log-text { margin: 0; font-size: .8rem; color: var(--text); line-height: 1.4; }
.log-time { display: block; text-align: right; font-size: .65rem; color: var(--muted); margin-top: .25rem; }
.report-context-note { display:block; margin-top:.35rem; color:var(--muted); font-size:.68rem; line-height:1.4; }

/* ---- v0.7 : Prestige FICSIT ---- */
.prestige-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  margin: 1.15rem 0;
}
.prestige-stat {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  min-height: 108px;
  padding: .9rem 1rem;
  background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: .35rem;
  text-align: center;
}
.prestige-stat strong {
  display: block;
  color: var(--text);
  font-size: 1.65rem;
  line-height: 1;
}
.prestige-stat span {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-wrap: balance;
}
.prestige-pane .tiers-caption {
  max-width: 54ch;
  line-height: 1.55;
}
.prestige-pane .reward {
  margin: 0 0 1rem;
  padding: .9rem 1rem;
  line-height: 1.4;
  text-align: center;
}
.prestige-pane #confirmPrestigeBtn {
  min-height: 48px;
}
@media (max-width: 360px) {
  .prestige-stats { grid-template-columns: 1fr; }
  .prestige-stat { min-height: 92px; }
}
.hidden { display: none !important; }

.assembly-req-label .req-icon { width: 1.1rem; height: 1.1rem; margin-right: .25rem; }

/* ---- v0.9 : Module de contrôle FICSIT ---- */
.shop-item.system-upgrade {
  margin-bottom: 1.2rem;
}
.machine-control {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: .35rem;
  padding: .25rem .35rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(0,0,0,.18);
  font-size: .72rem;
  color: var(--muted);
}
.machine-control-btn {
  width: 1.45rem;
  height: 1.45rem;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  line-height: 1;
  cursor: pointer;
}

.machine-control-btn:disabled {
  opacity: .35;
  cursor: not-allowed;
}

/* Le bouton reste la cible du pointeur meme quand ses compteurs internes sont
   actualises par le rendu 250 ms. Cela empeche un clic de se perdre entre le
   pointerdown et le pointerup. Le Sink est exclu car il contient son selecteur. */
button.shop-row[data-buy] > *,
button.shop-row[data-buy] > * * {
  pointer-events: none;
}

/* validation manuelle des paliers */
.tier-row.ready {
  opacity: 1;
  border-color: rgba(246, 159, 26, .55);
}
.validate-tier-btn {
  border: 1px solid rgba(246, 159, 26, .55);
  background: rgba(246, 159, 26, .12);
  color: var(--text);
  border-radius: 999px;
  padding: .35rem .7rem;
  font-weight: 800;
  cursor: pointer;
}

/* confirmation d'achat groupé (x5 / x10) */
.purchase-confirm-actions {
  display: flex;
  gap: .7rem;
  margin-top: 1.2rem;
}
.purchase-confirm-btn,
.purchase-confirm-cancel {
  flex: 1;
  padding: .7rem 1rem;
  border-radius: 12px;
  font-weight: 800;
  cursor: pointer;
}
.purchase-confirm-btn {
  border: 1px solid rgba(246, 159, 26, .55);
  background: rgba(246, 159, 26, .12);
  color: var(--text);
}

.purchase-confirm-cancel {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
}

/* ==========================================================================
   PLAN D'USINE
   Blueprint industriel purement visuel, alimenté par l'état existant.
   ========================================================================== */
.cc-factory-panel { flex-direction: column; min-width: 0; background: #111820; }
.factory-panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap;
  padding: .5rem .9rem; border-bottom: 1px solid #294150;
  background: linear-gradient(135deg, rgba(19,46,61,.96), rgba(16,25,33,.96));
}
.factory-panel-head-title { display: flex; align-items: baseline; gap: .5rem; }
.factory-panel-head h2 { margin: 0; font-size: .92rem; color: #d9f4ff; letter-spacing: .04em; }
.factory-kicker { color: #55cce7; font-size: .58rem; font-weight: 800; letter-spacing: .14em; }
.factory-summary { display: flex; gap: .4rem; flex-wrap: wrap; }
.factory-summary span { min-width: 68px; padding: .28rem .45rem; border: 1px solid #31566a; background: rgba(8,20,27,.7); border-radius: 6px; color: #7da4b5; font-size: .56rem; text-transform: uppercase; letter-spacing: .04em; }
.factory-summary strong { display: block; color: #dff8ff; font-size: .82rem; line-height: 1.1; margin-bottom: .1rem; }
.factory-scroll { flex: 1; min-height: 0; overflow: auto; padding: 1rem; background-color: #0d151b; background-image: linear-gradient(rgba(75,145,169,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(75,145,169,.07) 1px, transparent 1px), linear-gradient(rgba(75,145,169,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(75,145,169,.025) 1px, transparent 1px); background-size: 40px 40px, 40px 40px, 8px 8px, 8px 8px; }
.factory-blueprint { min-width: 720px; max-width: 1220px; margin: 0 auto; color: #bfe8f4; }
.factory-hub { width: min(320px, 80%); margin: 0 auto; position: relative; text-align: center; padding: .8rem 1rem; border: 1px solid #48b5cf; background: rgba(17,54,68,.8); box-shadow: 0 0 24px rgba(61,188,218,.09), inset 0 0 20px rgba(61,188,218,.05); clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); }
.factory-hub-badge { display: inline-block; margin-right: .4rem; padding: .16rem .35rem; background: var(--orange); color: #171717; font-weight: 900; font-size: .62rem; transform: skew(-8deg); }
.factory-hub strong { font-size: .88rem; letter-spacing: .09em; }
.factory-hub small { display: block; color: #77a5b6; font-size: .64rem; margin-top: .2rem; }
.factory-trunk { width: 2px; height: 30px; margin: 0 auto; background: #3b9bb5; position: relative; }
.factory-trunk span { position: absolute; width: 7px; height: 7px; left: 50%; bottom: 4px; transform: translateX(-50%) rotate(45deg); border-right: 2px solid #65d2eb; border-bottom: 2px solid #65d2eb; }
.factory-stages { display: grid; gap: .8rem; }
.factory-stage { position: relative; border: 1px solid #27495a; background: rgba(10,25,33,.86); padding: .75rem; box-shadow: inset 0 0 24px rgba(42,129,154,.04); }
.factory-stage::before { content: ''; position: absolute; width: 2px; height: .8rem; left: 50%; top: -.8rem; background: #347e94; }
.factory-stage header { display: flex; align-items: center; gap: .55rem; margin-bottom: .7rem; color: #7fc7dc; text-transform: uppercase; letter-spacing: .12em; font-size: .67rem; }
.factory-stage header span { color: var(--orange); border: 1px solid rgba(255,139,0,.55); padding: .16rem .28rem; font-weight: 900; }
.factory-stage-line { position: absolute; left: 1.1rem; right: 1.1rem; top: 2.8rem; border-top: 1px dashed rgba(92,184,208,.22); }
.factory-node-grid { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(162px, 1fr)); gap: .6rem; }
.factory-node { position: relative; min-height: 108px; padding: .62rem .66rem; border: 1px solid color-mix(in srgb, var(--factory-tint) 55%, #294351); background: linear-gradient(145deg, color-mix(in srgb, var(--factory-tint) 10%, #13212a), #0e171d); clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); transition: transform .12s ease, border-color .12s ease; }
.factory-node.running:hover, .factory-node.stopped:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--factory-tint) 80%, #294351); }
.factory-node::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--factory-tint); opacity: .75; }
.factory-node-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: .35rem; }
.factory-node-icon { width: 30px; height: 30px; border: 1px solid color-mix(in srgb, var(--factory-tint) 60%, #354a55); display: grid; place-items: center; background: rgba(0,0,0,.25); }
.factory-node-icon img { width: 21px; height: 21px; }
.factory-node-state { display: flex; align-items: center; gap: .25rem; color: #73909d; font-size: .58rem; text-transform: uppercase; letter-spacing: .06em; }
.factory-node-state i { width: 6px; height: 6px; border-radius: 50%; background: #65727a; }
.factory-node.running .factory-node-state i { background: #49d889; box-shadow: 0 0 7px rgba(73,216,137,.8); }
.factory-node.stopped .factory-node-state i { background: #ef5b5b; }
.factory-node.available { opacity: .68; border-style: dashed; }
.factory-node.locked { opacity: .3; filter: grayscale(1); }
.factory-node strong { display: block; padding-right: 2.2rem; color: #d8f2f8; font-size: .78rem; line-height: 1.28; }
.factory-node-count { position: absolute; right: .6rem; top: 2.3rem; color: var(--orange); font-weight: 900; font-size: .88rem; }
.factory-node small { display: block; margin-top: .32rem; color: #779aa8; font-size: .64rem; line-height: 1.32; }
.factory-node em { display: block; margin-top: .25rem; color: #ffbd72; font-size: .6rem; font-style: normal; }
.factory-empty { padding: 2rem; border: 1px dashed #31576a; text-align: center; color: #7ca2b2; background: rgba(10,28,37,.7); }
@media (max-width: 900px) {
  .factory-panel-head { flex-direction: column; }
  .factory-summary { justify-content: flex-start; }
  .factory-scroll { overflow-x: auto; }
  .factory-blueprint { min-width: 660px; }
}
@media (max-width: 620px) {
  .factory-panel-head { padding: .7rem; }
  .factory-summary span { min-width: 76px; }
  .factory-scroll { padding: .65rem; }
}
@media (prefers-reduced-motion: reduce) {
  .factory-node-state i { box-shadow: none !important; }
}

/* Boutique et ratios intégrés au plan d'usine */
.factory-node { min-height: 176px; display: flex; flex-direction: column; }
.factory-node-ratios {
  display: grid;
  gap: .2rem;
  margin-top: .48rem;
  padding: .42rem .46rem;
  border: 1px solid rgba(86,154,176,.25);
  background: rgba(4,13,18,.48);
  font-size: .56rem;
  line-height: 1.3;
}
.factory-node-ratios.warning { border-color: rgba(239,91,91,.7); box-shadow: inset 3px 0 0 #ef5b5b; }
.factory-node-ratios span { display: block; overflow-wrap: anywhere; }
.factory-buy-btn {
  width: 100%;
  margin-top: auto;
  padding: .45rem .5rem;
  border: 1px solid color-mix(in srgb, var(--factory-tint) 65%, #2e4d5b);
  background: color-mix(in srgb, var(--factory-tint) 16%, #101b22);
  color: #dff8ff;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  font: inherit;
  font-size: .58rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
/* Filet de sécurité (signalé : capture d'écran, Chrome iOS) -- le bouton
   vit dans un <foreignObject> SVG de hauteur FIXE (FACTORY_CHAIN_BOX_H).
   Un retour à la ligne imprévu ici agrandit la carte au-delà de cette
   hauteur, et le débordement se fait tronquer par le moteur de rendu au
   lieu de simplement s'afficher en dessous -- jamais de retour à la ligne
   ici, quel que soit le contenu (formatNumberCompact limite déjà la
   longueur du texte lui-même, ceci est la protection de dernier recours). */
.factory-buy-btn > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.factory-buy-btn strong { padding: 0; color: #ffd28a; font-size: .58rem; text-align: right; flex-shrink: 0; max-width: 62%; }

.factory-buy-btn:disabled { opacity: .42; cursor: not-allowed; }
.factory-node.locked .factory-node-ratios { display: none; }

/* ==========================================================================
   Plan SVG, zoom et animations industrielles
   ========================================================================== */
.factory-toolbar {
  display: flex; align-items: center; gap: .32rem; flex-wrap: wrap;
}
.factory-toolbar button {
  min-width: 30px; min-height: 26px; border: 1px solid #356479; background: #122934;
  color: #cceef6; cursor: pointer; font: inherit; font-size: .65rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em;
}

.factory-toolbar span { min-width: 46px; text-align: center; color: #73aabd; font-size: .6rem; }
.factory-toolbar button.active { background: var(--orange); border-color: var(--orange); color: #1a1200; }
.factory-svg.cards-locked { outline: 2px solid rgba(255,159,44,.35); outline-offset: -2px; }
/* v2.4.0-b : les cartes ne sont plus DANS le svg, la regle doit partir
   du conteneur commun pour continuer d'atteindre la poignee. */
.factory-blueprint:has(.factory-svg.cards-locked) .factory-drag-zone { cursor: default; }
.factory-scroll { padding: 0; overflow: hidden; touch-action: none; }
/* position:relative : ancre le calque HTML des cartes (v2.4.0-b), qui est en position absolue. */
.factory-blueprint { width: 100%; height: 100%; min-width: 0; max-width: none; margin: 0; position: relative; }
/* v2.5.1 (correctif audit) : min-height fixe à 520px alors que la zone
   réellement visible peut faire 358px (fenêtre 1280×900 avec l'en-tête et
   la barre de ressources au-dessus) -- le SVG dépassait donc le cadre, une
   partie du plan restait hors écran quoi qu'on fasse. Borné par la hauteur
   de fenêtre disponible : on garde 520px quand il y a la place, jamais
   plus que ce que l'écran peut afficher. */
.factory-svg { display: block; width: 100%; height: 100%; min-height: min(520px, 55vh); cursor: grab; user-select: none; }
.factory-svg.panning { cursor: grabbing; }
.factory-stage-svg rect { fill: rgba(9,28,37,.78); stroke: #28536a; stroke-width: 1.5; }
.factory-stage-index { fill: #ff9c2a; font-size: 16px; font-weight: 900; font-family: system-ui, sans-serif; }
.factory-stage-title { fill: #83d2e6; font-size: 16px; font-weight: 800; letter-spacing: 2px; font-family: system-ui, sans-serif; text-transform: uppercase; }

.factory-connector { fill: none; stroke: #317f98; stroke-width: 2; stroke-dasharray: 7 7; opacity: .55; }
.factory-connector.active { stroke: #54cce9; opacity: .95; animation: factory-flow-line 1.5s linear infinite; }
.factory-cargo { fill: #ffad42; filter: url(#factory-glow); pointer-events: none; }
/* v2.4.0-b : calque HTML des cartes, superpose au SVG des connecteurs.
   Suit exactement le meme cadrage (transform pose par
   applyFactoryViewBox). pointer-events none sur le calque pour ne pas
   bloquer le pan/pinch sur le fond, auto sur les cartes elles-memes. */
.factory-cards-layer { position: absolute; inset: 0; transform-origin: 0 0; pointer-events: none; }
.factory-card-pos { position: absolute; pointer-events: auto; }
.factory-drag-zone {
  /* Zone invisible mais volontairement large : le canevas Usine est mis à
     l'échelle pour tenir dans le conteneur visible (souvent 50% ou moins
     de sa taille naturelle dès quelques cartes affichées), donc une petite
     poignée en coin de 18px finissait à 3-7px réels à l'écran --
     pratiquement impossible à viser, d'où le glissement remonté comme
     "il faut y aller tout doucement". Toute la bande supérieure de la
     carte sert maintenant de zone de saisie plutôt qu'une seule icône.
     z-index au-dessus de l'icône/badge : ceux-ci ne sont pas interactifs
     par ailleurs, aucune perte fonctionnelle à les couvrir. */
  position: absolute; top: 0; left: 0; right: 0; height: 52px;
  cursor: grab; z-index: 5; touch-action: none;
}
.factory-drag-zone:hover { background: rgba(84, 204, 233, .06); }
.factory-card-dragging .factory-node { box-shadow: 0 8px 24px rgba(0,0,0,.55); border-color: #54cce9 !important; }
.factory-node {
  box-sizing: border-box; width: 100%; height: 100%; min-height: 0; padding: 10px;
  border-width: 1px; clip-path: polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
  overflow: hidden;
}
.factory-machine-visual { height: 35px; display: flex; align-items: center; position: relative; margin-bottom: 2px; }
.factory-node-icon { width: 32px; height: 32px; position: relative; z-index: 2; }
.factory-node-icon img { width: 23px; height: 23px; }
.factory-machine-pulse { position: absolute; left: 39px; right: 0; height: 3px; background: linear-gradient(90deg,var(--factory-tint),transparent); opacity: .35; }
.factory-machine-smoke { display: none; position: absolute; left: 20px; top: -5px; width: 30px; height: 25px; }
.factory-machine-smoke i { position: absolute; bottom: 0; width: 7px; height: 7px; border-radius: 50%; background: rgba(180,205,212,.45); opacity: 0; }
.factory-machine-smoke i:nth-child(2) { left: 8px; animation-delay: .55s; }
.factory-machine-smoke i:nth-child(3) { left: 15px; animation-delay: 1.05s; }
.factory-node.running.factory-machine-generator .factory-machine-smoke { display: block; }
.factory-node.running.factory-machine-generator .factory-machine-smoke i { animation: factory-smoke 2.2s ease-out infinite; }
.factory-node.running.factory-machine-processor .factory-node-icon { animation: factory-furnace 1.8s ease-in-out infinite; }
.factory-node.running.factory-machine-extractor .factory-node-icon { animation: factory-piston 1.2s ease-in-out infinite; }
.factory-node.running.factory-machine-assembler .factory-machine-pulse { animation: factory-machine-scan 1.6s linear infinite; }
.factory-node.running.factory-machine-sink .factory-node-icon { animation: factory-storage 2.4s ease-in-out infinite; }
.factory-node-top { position: absolute; right: 9px; top: 10px; margin: 0; }
.factory-node-count { top: 49px; right: 10px; }
.factory-node > strong { font-size: 11px; min-height: 27px; }
.factory-node small { font-size: 9px; margin-top: 2px; }
.factory-node em { font-size: 9px; }
.factory-node-ratios { margin-top: 5px; padding: 5px; font-size: 8.5px; gap: 2px; }
.factory-buy-btn { padding: 6px; font-size: 9px; }
.factory-buy-btn strong { font-size: 9px; }
@keyframes factory-flow-line { to { stroke-dashoffset: -28; } }
@keyframes factory-piston { 0%,100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
@keyframes factory-furnace { 0%,100% { filter: drop-shadow(0 0 0 rgba(255,120,20,0)); } 50% { filter: drop-shadow(0 0 8px rgba(255,120,20,.85)); } }
@keyframes factory-machine-scan { from { transform: translateX(-30%); opacity: .15; } 50% { opacity: .75; } to { transform: translateX(30%); opacity: .15; } }
@keyframes factory-storage { 0%,100% { transform: scale(.96); } 50% { transform: scale(1.04); } }
@keyframes factory-smoke { 0% { transform: translate(0,8px) scale(.7); opacity: 0; } 30% { opacity: .55; } 100% { transform: translate(5px,-20px) scale(1.7); opacity: 0; } }
@media (max-width: 700px) {
  .factory-svg { min-height: min(430px, 55vh); }
  .factory-toolbar { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .factory-connector.active, .factory-node-icon, .factory-machine-pulse, .factory-machine-smoke i { animation: none !important; }
  .factory-cargo { display: none; }
}

/* pilotage interactif de l'usine */
.factory-workspace { display:grid; grid-template-columns:minmax(0,1fr) 330px; flex: 1; min-height:0; border-top:1px solid #274856; }
.factory-workspace .factory-scroll { min-width:0; border-right:1px solid #274856; }
.factory-detail { min-height:0; padding:14px; background:linear-gradient(180deg,#0d1b22,#081217); overflow:auto; color:#b9d5df; }
.factory-detail.empty { display:grid; place-items:center; text-align:center; }
.factory-detail-placeholder strong { color:#dff8ff; font-size:.86rem; text-transform:uppercase; letter-spacing:.08em; }
.factory-detail-placeholder p { color:#688b99; font-size:.7rem; line-height:1.55; }
.factory-detail-head { display:flex; gap:10px; align-items:center; padding-bottom:12px; border-bottom:1px solid color-mix(in srgb,var(--factory-tint) 40%,#294653); position:relative; }
.factory-detail-head span { color:#6e9baa; font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; }
.factory-detail-head h3 { margin:2px 28px 0 0; color:#e3fbff; font-size:.9rem; }
.factory-detail-icon { width:42px; height:42px; display:grid; place-items:center; border:1px solid var(--factory-tint); background:color-mix(in srgb,var(--factory-tint) 12%,#0c181e); }
.factory-detail-icon img { width:30px; height:30px; }
.factory-detail-close {
  position:absolute;
  right:0;
  top:0;
  width:26px;
  height:26px;
  padding:0;
  border:1px solid #345463;
  background:#111f26;
  color:#8db2bf;
  cursor:pointer;
  display:grid;
  place-items:center;
  line-height:1;
  font-family:Arial, sans-serif;
  font-size:18px;
  text-align:center;
}
.factory-efficiency { margin:12px 0; padding:10px; border:1px solid #315361; background:#0c181e; }
.factory-efficiency > div:first-child { display:flex; justify-content:space-between; align-items:center; }
.factory-efficiency span { color:#86a9b5; font-size:.62rem; text-transform:uppercase; }
.factory-efficiency strong { color:#54d897; font-size:1rem; }
.factory-efficiency.warning strong { color:#ffb14a; }.factory-efficiency.danger strong { color:#ef6767; }.factory-efficiency.muted strong { color:#73828a; }
.factory-efficiency-bar { height:6px; margin-top:7px; background:#172932; overflow:hidden; }
.factory-efficiency-bar i { display:block; height:100%; background:#54d897; transition:width .25s; }
.factory-efficiency.warning .factory-efficiency-bar i { background:#ffb14a; }.factory-efficiency.danger .factory-efficiency-bar i { background:#ef6767; }.factory-efficiency.muted .factory-efficiency-bar i { background:#66747b; }
.factory-efficiency p { margin:7px 0 0; color:#90adb8; font-size:.65rem; line-height:1.4; }
.factory-detail-grid { display:grid; gap:7px; }
.factory-detail-metric { padding:8px; border:1px solid #253f4a; background:rgba(9,24,31,.75); }
.factory-detail-metric span { display:block; color:#7196a4; font-size:.57rem; text-transform:uppercase; letter-spacing:.06em; }
.factory-detail-metric strong { display:block; margin-top:3px; padding:0; color:#d8f2f8; font-size:.76rem; }
.factory-detail-metric small { display:block; margin-top:2px; color:#557583; font-size:.56rem; }
.sink-recipe-selector { margin-top:12px; padding:10px; border:1px solid #73592f; background:rgba(41,31,15,.5); }
.sink-recipe-selector > div:first-child > strong { display:block; color:#ffd18b; font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; }
.sink-recipe-selector > div:first-child > small { display:block; margin-top:4px; color:#9b835f; font-size:.58rem; line-height:1.4; }
.sink-recipe-options { display:grid; gap:6px; margin-top:9px; }
.sink-recipe-option { display:grid; grid-template-columns:1fr auto; gap:3px 8px; width:100%; padding:8px; text-align:left; border:1px solid #4a4537; background:#151a19; color:#b9c9c8; cursor:pointer; }
.sink-recipe-option > span { display:flex; align-items:center; gap:6px; font-size:.62rem; }
.sink-recipe-option img { width:18px; height:18px; }
.sink-recipe-option > strong { color:#f1d3a2; font-size:.64rem; }
.sink-recipe-option > small { grid-column:1/-1; color:#6f817e; font-size:.54rem; }
.sink-recipe-option.active { border-color:#ff9e31; background:rgba(126,72,18,.24); box-shadow:inset 3px 0 #ff9e31; }
.sink-recipe-option:disabled { opacity:.42; cursor:not-allowed; }

.factory-detail-actions { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:12px; }
.factory-detail-actions button:first-child { grid-column:1/-1; border-color:#d67a21; color:#ffd193; }
.factory-detail-actions button { padding:8px; border:1px solid #315463; background:#12242c; color:#9cc5d2; font-size:.62rem; font-weight:800; text-transform:uppercase; cursor:pointer; }
.factory-detail-actions button:disabled { opacity:.35; cursor:not-allowed; }
.factory-ada-ops { margin-top:12px; padding:10px; border:1px solid #38515b; background:linear-gradient(135deg,rgba(28,49,58,.85),rgba(13,25,31,.9)); }
.factory-ada-ops > span { color:#ff9e31; font-size:.57rem; letter-spacing:.12em; }.factory-ada-ops strong { display:block; margin-top:5px; color:#d8eef4; font-size:.68rem; }.factory-ada-ops p { margin:5px 0 0; color:#6e909c; font-size:.6rem; line-height:1.4; }
.factory-ada-ops.targeted { border-color:#ff9e31; box-shadow:inset 3px 0 0 #ff9e31; }
.factory-node { cursor:pointer; }
/* La card vit dans un foreignObject SVG : les ombres extérieures peuvent être
   rognées par ses limites. La sélection utilise donc un double cadre intérieur,
   visible de façon identique sur toutes les catégories de bâtiments. */
.factory-node.selected {
  border-color:#fff;
  box-shadow:
    inset 0 0 0 2px #fff,
    inset 0 0 0 5px var(--factory-tint),
    inset 0 0 22px color-mix(in srgb,var(--factory-tint) 28%,transparent);
  filter:brightness(1.14);
}
.factory-node.selected::before {
  content:'SELECT';
  position:absolute;
  z-index:7;
  left:50%;
  bottom:5px;
  transform:translateX(-50%);
  padding:2px 7px;
  border:1px solid #fff;
  background:color-mix(in srgb,var(--factory-tint) 82%,#071116);
  color:#fff;
  font-size:7px;
  font-weight:1000;
  letter-spacing:.12em;
  pointer-events:none;
}

.factory-node.ada-target::before { content:'ADA'; position:absolute; z-index:5; left:5px; top:5px; padding:2px 4px; background:#ff941f; color:#15100a; font-size:7px; font-weight:1000; letter-spacing:.08em; }
@media (max-width:980px) { .factory-workspace { grid-template-columns:1fr; }.factory-workspace .factory-scroll { border-right:0; }.factory-detail { border-top:1px solid #274856; max-height:none; }.factory-svg { min-height:min(480px, 55vh); } }

/* fiche bâtiment visible sur mobile : en vue étroite, la carte SVG peut
   mesurer plusieurs écrans de haut, donc le panneau placé après la carte
   était invisible pour les installations des premiers secteurs. Devient
   un tiroir fixé au bas de l'écran. */
@media (max-width: 980px) {
  .factory-detail:not(.empty) {
    position: fixed;
    /* Au-dessus du burger Ressources mobile (170) et de son tiroir (169).
       La fiche bâtiment est l'élément actif : rien du header secondaire ne
       doit recouvrir ses contrôles, notamment le bouton fermer. */
    z-index: 190;
    left: max(8px, env(safe-area-inset-left));
    right: max(8px, env(safe-area-inset-right));
    bottom: max(8px, env(safe-area-inset-bottom));
    max-height: min(72vh, 620px);
    overflow-y: auto;
    border: 1px solid #4c8194;
    border-top: 3px solid #ff9e31;
    box-shadow: 0 -12px 45px rgba(0, 0, 0, .72);
    background: linear-gradient(180deg, #10242d 0%, #081217 100%);
    animation: factory-detail-drawer-in .18s ease-out;
  }

  .factory-detail:not(.empty) .factory-detail-close {
    position: sticky;
    float: right;
    top: 0;
    z-index: 4;
  }
}

@keyframes factory-detail-drawer-in {
  from { transform: translateY(18px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* Volontairement en z-index très élevé et position fixed plein écran : ce
   rattrapage peut tourner plusieurs centaines de ms sur une absence longue
   (jusqu'à ~25 000 itérations pour 30 jours), et sans indicateur visible ça
   donnait l'impression d'un blocage/bug plutôt que d'un calcul en cours. */
.offline-catchup-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem;
  background: rgba(17,18,20,.88); backdrop-filter: blur(2px);
}
.offline-catchup-spinner {
  width: 40px; height: 40px; border-radius: 50%;
  border: 3px solid rgba(255,138,0,.25); border-top-color: var(--orange);
  animation: offline-catchup-spin .8s linear infinite;
}
.offline-catchup-text { color: #cceef6; font-size: .85rem; margin: 0; text-align: center; padding: 0 1.5rem; }
@keyframes offline-catchup-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .factory-detail:not(.empty) { animation: none !important; }
}

/* =========================================================================
 * EXPLORATION — carte
 * Même charpente que la Vue Usine (panel-head / workspace deux colonnes /
 * aside détail) pour rester cohérent, mais palette dédiée "relevé
 * satellite" (grille cyan, halo, sweep radar) plutôt que le bleu blueprint
 * de l'Usine -- la carte est un terrain, pas un plan d'installation.
 * ========================================================================= */
:root {
  /* v2.2 : le relief lui-même est généré en canvas (voir
     generateExplorationTerrainDataUrl), plus par ces variables -- gardées
     seulement pour --terrain-land (repli si canvas indisponible) et
     --terrain-grid (grille de fond, décorative). */
  --terrain-land: #8c8168;
  --terrain-grid: rgba(79,214,240,.06);
}

.cc-exploration-panel { flex-direction: column; min-height: 0; }

/* =========================================================================
 * M.A.M. -- ARBRE TECHNOLOGIQUE (v2.10)
 * Remplace l'ancienne Boutique AWESOME en modale. Même famille visuelle que
 * l'entête EXPLORATION (kicker + titre + sous-menu), coins coupés partagés
 * avec les nœuds de la Vue Usine et les tuiles EXPLORATION.
 * ========================================================================= */
.cc-mam-panel { flex-direction: column; min-height: 0; }
.mam-panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .5rem 1rem; border-bottom: 1px solid #274856; flex-wrap: wrap;
}
.mam-panel-head-title { display: flex; align-items: baseline; gap: .5rem; }
.mam-panel-head h2 { margin: 0; font-size: .92rem; color: #d9f4ff; letter-spacing: .04em; font-family: var(--font-display); }
.mam-kicker { color: #55cce7; font-size: .58rem; font-weight: 800; letter-spacing: .14em; font-family: var(--font-mono2); text-transform: uppercase; }

.mam-subnav { display: flex; gap: .4rem; flex-wrap: wrap; }
.mam-subnav-btn {
  padding: .35rem .7rem; border: 1px solid #274856; background: #0d151b; color: #7196a4;
  font-family: var(--font-mono2); font-size: .62rem; letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer; clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.mam-subnav-btn.active { color: #dff8ff; border-color: var(--cyan); background: rgba(79,214,240,.1); }

.mam-tree-scroll { flex: 1; min-height: 0; overflow: auto; background: var(--bg); }
.mam-tree-host { padding: 1.2rem; display: inline-block; min-width: 100%; }
.mam-tree-svg { display: block; }

.mam-lane-title { fill: var(--cyan); font-size: 11.5px; font-weight: 800; letter-spacing: .5px; font-family: var(--font-mono2); }

.mam-node-shape { fill: var(--panel-2); stroke: #3a4048; stroke-width: 1.6; transition: fill .12s ease, stroke .12s ease; }
.mam-node-icon { filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
.mam-node-label { fill: var(--text); font-size: 12.5px; font-weight: 700; font-family: var(--font-display); }
.mam-node-desc { fill: #8aa2ac; font-size: 10.5px; font-family: var(--font-mono2); }
.mam-node-footer { fill: #8aa2ac; font-size: 10px; font-family: var(--font-mono2); }
.mam-connector { stroke: #3a4048; stroke-width: 2; }
.mam-connector.active { stroke: var(--ok); }

/* Possédé : vert, cohérent avec le badge "Déjà possédé" du Garage. */
.mam-node-owned .mam-node-shape { stroke: var(--ok); fill: color-mix(in srgb, var(--ok) 10%, var(--panel-2)); }
.mam-node-owned .mam-node-label, .mam-node-owned .mam-node-footer { fill: var(--ok); }

/* Disponible (débloqué + prochain achat logique) : orange, comme partout
   ailleurs dans le jeu pour "action possible maintenant". Cliquable. */
/* pointer-events:all explicite : un <g> SVG sans remplissage propre n'a pas
   toujours une zone de clic fiable sur toute sa boîte englobante (repéré en
   testant -- Playwright refusait le clic "élément recouvert" alors qu'il
   ne l'était pas visuellement, même souci probable pour un vrai clic
   souris entre les éléments enfants). */
.mam-node { pointer-events: all; }
.mam-node-available { cursor: pointer; }
.mam-node-available .mam-node-shape { stroke: var(--orange); fill: color-mix(in srgb, var(--orange) 10%, var(--panel-2)); }
.mam-node-available:hover .mam-node-shape, .mam-node-available:focus-visible .mam-node-shape { fill: color-mix(in srgb, var(--orange) 22%, var(--panel-2)); }
.mam-node-available .mam-node-label, .mam-node-available .mam-node-footer { fill: var(--orange); }
.mam-node-available:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* Verrouillé (prérequis manquant, ou bâtiment de base pas encore construit
   pour un repère Mk.1) : gris, jamais cliquable. */
/* v2.5.2 : quatrième état -- débloqué (prérequis remplis) mais pas encore
   payable. Volontairement distinct des trois autres : cyan éteint plutôt
   qu'orange, pour qu'on voie d'un coup d'œil ce qui est à portée de main
   (orange) et ce qui reste un objectif (cyan). Ni le vert de l'acquis, ni
   le gris du verrouillé. Non cliquable, comme un nœud verrouillé. */
.mam-node-unaffordable .mam-node-shape { stroke: #3f7c8c; fill: color-mix(in srgb, #3f7c8c 8%, var(--panel-2)); }
.mam-node-unaffordable .mam-node-label { fill: #6fb3c4; }
.mam-node-unaffordable .mam-node-desc { fill: #5d7d87; }
/* Le coût en rouge éteint : c'est LUI qui bloque, autant le pointer. */
.mam-node-unaffordable .mam-node-footer { fill: #b4685f; }
.mam-node-unaffordable .mam-node-icon { opacity: .7; }
.mam-node-locked .mam-node-label { fill: #5a6672; }
.mam-node-locked .mam-node-desc, .mam-node-locked .mam-node-footer { fill: #4a525a; }
.mam-node-locked .mam-node-icon { opacity: .45; }

/* v2.5.13 — branche Disques durs du M.A.M. */
.hard-drive-mam { display: grid; gap: 1rem; width: min(920px, calc(100vw - 3rem)); color: var(--text); }
.hard-drive-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; }
.hard-drive-summary > div { display: grid; gap: .2rem; padding: .8rem; border: 1px solid #35444c; background: var(--panel-2); }
.hard-drive-summary strong { color: var(--cyan); font: 800 1.25rem/1 var(--font-display); }
.hard-drive-summary span { color: #8aa2ac; font: 700 .67rem/1.3 var(--font-mono2); text-transform: uppercase; letter-spacing: .06em; }
.hard-drive-analysis, .alternate-unlocked { border: 1px solid #3a4048; background: var(--panel-2); padding: 1rem; }
.hard-drive-analysis h3, .alternate-unlocked-list > h3 { margin: 0 0 .75rem; color: var(--cyan); font: 800 .82rem/1.2 var(--font-display); letter-spacing: .05em; text-transform: uppercase; }
.hard-drive-analysis p, .alternate-unlocked p, .hard-drive-empty { color: #a9bbc2; line-height: 1.45; }
.hard-drive-primary, .hard-drive-reroll, .alternate-offer button, .alternate-toggle button { border: 1px solid var(--orange); background: rgba(255,143,31,.1); color: var(--orange); padding: .62rem .85rem; font-weight: 800; cursor: pointer; }
.hard-drive-primary:disabled, .hard-drive-reroll:disabled { opacity: .45; cursor: not-allowed; }
.hard-drive-progress { height: 8px; overflow: hidden; border: 1px solid #35444c; background: #10171b; }
.hard-drive-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--orange)); }
.alternate-offers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin: .8rem 0; }
.alternate-offer { display: grid; align-content: start; gap: .45rem; padding: .85rem; border: 1px solid #48545c; background: #151d22; }
.alternate-offer h4, .alternate-unlocked h4 { margin: 0; color: #e3f5fb; font: 800 .84rem/1.2 var(--font-display); }
.alternate-offer p, .alternate-unlocked p { margin: 0 0 .35rem; font-size: .76rem; }
.alternate-offer small { color: #d2a670; }
.alternate-kind { display: inline-block; width: max-content; color: var(--orange); font: 800 .6rem/1.2 var(--font-mono2); text-transform: uppercase; letter-spacing: .08em; }
.alternate-unlocked-list { display: grid; gap: .65rem; }
.alternate-unlocked { display: grid; grid-template-columns: minmax(170px, .8fr) 1.5fr auto; gap: .8rem; align-items: center; }
.alternate-unlocked.active { border-color: var(--ok); }
.alternate-toggle { display: grid; grid-template-columns: 1fr 1fr; min-width: 240px; }
.alternate-toggle button { border-color: #46535b; color: #8aa2ac; background: transparent; }
.alternate-toggle button.active { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); color: var(--ok); }
.exploration-hard-drive-marker { fill: var(--orange); stroke: #111; stroke-width: 2px; paint-order: stroke; font-size: 19px; }
.exploration-hard-drive-marker.recovered { fill: #65737a; }
.exploration-hard-drive-status { display: grid; gap: .25rem; margin: .75rem 0; padding: .7rem; border: 1px solid var(--orange); background: rgba(255,143,31,.08); }
.exploration-hard-drive-status.recovered { border-color: #4d5a61; background: rgba(100,115,122,.08); }
.exploration-hard-drive-status strong { color: var(--orange); }
.exploration-hard-drive-status.recovered strong { color: #91a0a7; }

@media (max-width: 700px) {
  .hard-drive-mam { width: calc(100vw - 2rem); }
  .hard-drive-summary { grid-template-columns: 1fr; }
  .alternate-offers { grid-template-columns: 1fr; }
  .alternate-unlocked { grid-template-columns: 1fr; }
  .alternate-toggle { min-width: 0; }
}

.exploration-panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .5rem 1rem; border-bottom: 1px solid #274856; flex-wrap: wrap;
}
.exploration-panel-head-title { display: flex; align-items: baseline; gap: .5rem; }
.exploration-panel-head h2 { margin: 0; font-size: .92rem; color: #d9f4ff; letter-spacing: .04em; font-family: var(--font-display); }
.exploration-kicker { color: #55cce7; font-size: .58rem; font-weight: 800; letter-spacing: .14em; font-family: var(--font-mono2); text-transform: uppercase; }

/* Signalé (écran 24") : le panneau de détail (site + liste d'expéditions à
   lancer) se faisait couper en bas, sans barre de défilement -- sans
   grid-template-rows explicite, la seule rangée de la grille se dimensionne
   sur son contenu (auto), pas sur la hauteur réellement disponible ; rien
   ne force alors .exploration-detail à respecter une hauteur bornée, donc
   son overflow:auto ne se déclenche jamais et l'excédent finit coupé net
   par le overflow:hidden d'un ancêtre plus haut (.cc-main-panel). Corrigé
   en forçant la rangée à la hauteur disponible (minmax(0,1fr)) plutôt que
   de la laisser suivre le contenu. */
.exploration-workspace { display: grid; grid-template-columns: minmax(0,1fr) 260px; grid-template-rows: minmax(0,1fr); flex: 1; min-height: 0; }
.exploration-viewport {
  min-width: 0; border-right: 1px solid #274856; background: #0d151b;
  display: flex; align-items: center; justify-content: center; padding: 0;
  touch-action: none; overflow: hidden;
}
/* Signalé (capture) : la carte débordait par-dessus l'entête et la barre
   d'outils. Avant, width:100%/height:auto (purement piloté par la largeur)
   masquait le problème tant que la rangée de la grille grandissait pour
   suivre son contenu -- depuis que grid-template-rows la borde à la
   hauteur réellement disponible (voir plus haut), un SVG carré dimensionné
   seulement sur la largeur peut légitimement devenir plus haut que cette
   hauteur disponible, et rien ne l'empêchait de déborder.
   Premier correctif (aspect-ratio + width/height:auto sur les divs) :
   RÉGRESSION -- des divs sans contenu propre n'ont rien pour calculer une
   taille avec width/height:auto, la carte s'effondrait à une taille
   minuscule. Le bon réflexe : le SVG sait déjà faire ça tout seul. Avec
   son comportement par défaut (preserveAspectRatio="xMidYMid meet", jamais
   modifié ici), un <svg> en width:100%/height:100% dans une boîte non
   carrée se cadre et se centre tout seul en respectant son ratio -- pas
   besoin de bricoler les divs autour, juste leur donner une vraie taille
   à remplir. overflow:hidden sur le viewport reste en filet de sécurité. */
.exploration-map { width: 100%; height: 100%; }
.exploration-stage { position: relative; width: 100%; height: 100%; }
.exploration-map-svg { width: 100%; height: 100%; display: block; cursor: grab; user-select: none; }
.exploration-map-svg.panning { cursor: grabbing; }

.exploration-toolbar { display: flex; align-items: center; gap: .32rem; padding: 0 1rem .6rem; }
.exploration-toolbar button {
  min-width: 30px; min-height: 26px; border: 1px solid #356479; background: #122934;
  color: #cceef6; cursor: pointer; font: inherit; font-size: .65rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em;
}
.exploration-toolbar button:hover { border-color: var(--orange); color: #fff; }
.exploration-toolbar span { min-width: 46px; text-align: center; color: #73aabd; font-size: .6rem; }

.exploration-ring-contour { fill: none; stroke: rgba(79,214,240,.14); stroke-width: 1.5; stroke-dasharray: 3 6; }
.exploration-fog-edge { fill: none; stroke: rgba(168,173,183,.16); stroke-width: 2; stroke-dasharray: 2 10; }
.exploration-road { stroke: rgba(255,138,0,.22); stroke-width: 1.5; stroke-dasharray: 1 7; stroke-linecap: round; }

/* Terrain en canvas (v2.2) relégué en texture de fond discrète -- voir
   échange du 2026-08-05. Fortement désaturé et assombri, teinté vers le
   bleu-cyan sombre du reste de l'UI plutôt que ses couleurs terre/vert
   d'origine, pour lire comme un relevé radar/thermique plutôt qu'une
   carte postale qui ferait concurrence à la grille hexagonale. */
.exploration-terrain-bg { filter: grayscale(.85) brightness(.42) sepia(.35) hue-rotate(150deg) contrast(1.15); opacity: .9; }

.exploration-hex-empty { stroke: rgba(79,214,240,.1); stroke-width: 1; }

.exploration-spawn-core { fill: var(--orange); stroke: #0c0a08; stroke-width: 2.5; } /* liseré sombre : reste visible même sur la rayure orange du fond zébré */
.exploration-hex-spawn { fill: url(#explSpawnZebra); stroke: var(--orange); stroke-width: 3; }

.exploration-site { cursor: pointer; }
.exploration-hex-site { fill: var(--panel-2); stroke: var(--cyan); stroke-width: 1.6; transition: fill .12s ease, stroke .12s ease; }
.exploration-site:hover .exploration-hex-site, .exploration-site:focus-visible .exploration-hex-site { fill: color-mix(in srgb, var(--cyan) 22%, var(--panel-2)); }
.exploration-site.active .exploration-hex-site { stroke: var(--orange); fill: color-mix(in srgb, var(--orange) 22%, var(--panel-2)); }
.exploration-site:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.exploration-site-icon { filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); }

/* Catégorie du site, lisible sans cliquer : minerai = orange (cohérent
   avec les ressources), dépôt de matériel = cyan, danger 2+ = rouge quel
   que soit le type -- le danger prime sur la catégorie. Gisement (v2.8) =
   vert (--ok) : catégorie à part, un bonus permanent de capacité, pas un
   site à "consommer" une fois via une expédition. */
.exploration-site.exploration-hex-ore .exploration-hex-site { fill: #2a1d0c; stroke: var(--orange); }
.exploration-site.exploration-hex-cache .exploration-hex-site { fill: #0f2a2e; stroke: var(--cyan); }
.exploration-site.exploration-hex-danger .exploration-hex-site { fill: #2e1418; stroke: #ff5c5c; }
.exploration-site.exploration-hex-deposit .exploration-hex-site { fill: #102418; stroke: var(--ok); }
.exploration-hex-danger-dots { fill: #8aa2ac; font-size: 11px; text-anchor: middle; }
.exploration-site.exploration-hex-danger .exploration-hex-danger-dots { fill: #ff5c5c; }
.exploration-hex-slots-badge { fill: var(--ok); font-size: 10px; text-anchor: middle; font-family: var(--font-mono2); }

.exploration-hex-fog { fill: rgba(20,28,34,.55); stroke: rgba(168,173,183,.35); stroke-dasharray: 3 3; }
.exploration-site-fog { pointer-events: none; }
.exploration-site-fog .exploration-site-icon { opacity: .45; }

.exploration-compass {
  position: absolute; top: .6rem; right: .6rem; width: 22px; height: 22px;
  display: grid; place-items: center; border: 1px solid rgba(79,214,240,.35); border-radius: 50%;
  color: var(--cyan); font-family: var(--font-mono2); font-size: .6rem; font-weight: 700;
  background: rgba(13,21,27,.6); pointer-events: none;
}

.exploration-detail {
  min-height: 0; max-height: 100%; padding: 14px; background: linear-gradient(180deg,#0d1b22,#081217);
  overflow-y: auto; overflow-x: hidden; color: #b9d5df;
}
.exploration-detail.empty { display: grid; place-items: center; text-align: center; }
.exploration-detail-placeholder strong { color: #dff8ff; font-size: .86rem; text-transform: uppercase; letter-spacing: .08em; }
.exploration-detail-placeholder p { color: #688b99; font-size: .7rem; line-height: 1.55; }
.exploration-detail-head { padding-bottom: 12px; border-bottom: 1px solid #294653; }
.exploration-ring-badge { color: #6e9baa; font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; font-family: var(--font-mono2); }
.exploration-ring-badge-deposit { color: var(--ok); }
.exploration-detail-head h3 { margin: 4px 0 0; color: #e3fbff; font-size: .9rem; }
.exploration-detail-head p { margin: 6px 0 0; color: #7f9fac; font-size: .7rem; line-height: 1.5; }
.exploration-yields { margin-top: 12px; display: grid; gap: 6px; }
.exploration-yields-title { display: block; color: #6e9baa; font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 2px; }
.exploration-yield-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid #253f4a; background: rgba(9,24,31,.75); font-size: .72rem; }
.exploration-yield-row span:first-of-type { flex: 1; }
.exploration-yield-range { color: var(--cyan); font-family: var(--font-mono2); }
.exploration-detail-note { margin-top: 12px; padding-top: 10px; border-top: 1px dashed #253f4a; color: #557583; font-size: .62rem; line-height: 1.5; font-style: italic; }

@media (max-width: 980px) {
  /* grid-template-rows: none annule le minmax(0,1fr) du desktop -- sinon,
     en 1 colonne, la carte (1re rangée) et le détail (2e rangée implicite)
     se partageraient une seule rangée bornée pensée pour 2 colonnes côte à
     côte, écrasant la carte au lieu de la laisser suivre son ratio 1:1. */
  .exploration-workspace { grid-template-columns: 1fr; grid-template-rows: none; }
  .exploration-viewport { border-right: 0; border-bottom: 1px solid #274856; }
}
@media (max-width: 640px) {
  .exploration-panel-head { padding: .5rem .7rem; flex-direction: column; align-items: flex-start; }
}

.exploration-subnav { display: flex; gap: .4rem; margin-top: .3rem; }
.exploration-subnav-btn {
  padding: .35rem .7rem; border: 1px solid #274856; background: #0d151b; color: #7196a4;
  font-family: var(--font-mono2); font-size: .62rem; letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer; clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.exploration-subnav-btn.active { color: #dff8ff; border-color: var(--cyan); background: rgba(79,214,240,.1); }
.exploration-view { display: none; flex: 1; min-height: 0; flex-direction: column; }
.exploration-view.active { display: flex; }

/* Garage : grille de 3 cartes (une par emplacement de flotte). Empilées en
   colonne sur mobile, cf. media query plus bas -- même seuil (980px) que
   les autres panneaux à deux colonnes de ce fichier. */
.garage-intro { margin: 0; padding: .8rem 1rem 0; max-width: 60ch; color: #7196a4; font-size: .68rem; line-height: 1.5; }
.garage-slots { flex: 1; padding: 1rem; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .8rem; align-content: start; }
.garage-slot {
  border: 1px solid #274856; background: linear-gradient(180deg,#0d1b22,#081217);
  padding: .8rem; display: flex; flex-direction: column; gap: .6rem;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.garage-slot-title { color: #6e9baa; font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; font-family: var(--font-mono2); }
.garage-slot-locked { align-items: center; text-align: center; justify-content: center; opacity: .85; }
.garage-lock-icon { width: 28px; height: 28px; opacity: .6; }
.garage-slot-locked-desc { margin: 0; color: #557583; font-size: .64rem; line-height: 1.5; }
.garage-unlock-btn {
  border: 1px solid var(--orange); background: rgba(255,138,0,.1); color: #ffd193;
  padding: .5rem .6rem; font-size: .68rem; font-weight: 700; cursor: pointer;
}
.garage-unlock-btn:disabled { opacity: .35; cursor: not-allowed; }

.garage-vehicle-options { display: flex; flex-direction: column; gap: .5rem; }
.garage-vehicle-option {
  display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: .5rem;
  border: 1px solid #253f4a; background: rgba(9,24,31,.75); color: #b9d5df;
  padding: .5rem .6rem; text-align: left; cursor: pointer; font-family: inherit;
}
.garage-vehicle-option .garage-vehicle-icon { grid-row: 1 / 3; width: 30px; height: 30px; align-self: center; }
.garage-vehicle-name { font-size: .74rem; font-weight: 700; color: #dff8ff; }
.garage-vehicle-stats { display: flex; gap: .6rem; font-size: .58rem; color: #7196a4; font-family: var(--font-mono2); }
.garage-vehicle-footer { grid-column: 2; font-size: .62rem; color: var(--cyan); font-family: var(--font-mono2); }
.garage-vehicle-option.active { border-color: var(--orange); background: rgba(255,138,0,.08); }
.garage-vehicle-option.active .garage-vehicle-footer { color: var(--orange); font-weight: 700; }
.garage-vehicle-option.locked { opacity: .45; cursor: not-allowed; }
.garage-vehicle-option.owned .garage-vehicle-footer { color: var(--ok); font-weight: 700; }
.garage-vehicle-option:disabled:not(.active) { opacity: .4; cursor: not-allowed; }
.garage-vehicle-option:not(:disabled):not(.active):hover { border-color: var(--cyan); }

@media (max-width: 980px) {
  .garage-slots { grid-template-columns: 1fr; }
}

/* Réservoirs (biomasse/munitions) et statut "en expédition" du Garage */
.garage-tanks { display: flex; flex-direction: column; gap: .4rem; padding-bottom: .5rem; border-bottom: 1px dashed #253f4a; }
.garage-tank { display: grid; grid-template-columns: 20px 1fr auto auto; align-items: center; gap: .4rem; }
.garage-tank-icon { width: 18px; height: 18px; }
.garage-tank-bar { height: 6px; background: #0d151b; border: 1px solid #253f4a; overflow: hidden; }
.garage-tank-fill { height: 100%; background: linear-gradient(90deg, var(--cyan), #2ee6d6); }
.garage-tank-label { font-size: .58rem; color: #7196a4; font-family: var(--font-mono2); white-space: nowrap; }
.garage-refuel-btn {
  border: 1px solid #315463; background: #12242c; color: #9cc5d2;
  font-size: .58rem; font-weight: 700; text-transform: uppercase; padding: .25rem .45rem; cursor: pointer;
}
.garage-refuel-btn:disabled { opacity: .35; cursor: not-allowed; }

.garage-slot-away { align-items: center; text-align: center; justify-content: center; }
.garage-away-status { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.garage-away-status .garage-vehicle-icon { width: 34px; height: 34px; }
.garage-away-site { font-size: .68rem; color: #dff8ff; }
.garage-away-countdown { font-family: var(--font-mono2); font-size: .8rem; color: var(--cyan); font-weight: 700; }
.garage-away-risk { font-size: .58rem; color: var(--danger); }

/* Lancement d'expédition, dans le panneau de détail EXPLORATION */
.exploration-launch { margin-top: 12px; padding-top: 10px; border-top: 1px dashed #253f4a; display: grid; gap: 8px; }
.exploration-launch-row { display: grid; grid-template-columns: 30px 1fr auto; gap: 8px; align-items: center; padding: 6px 8px; border: 1px solid #253f4a; background: rgba(9,24,31,.75); }
.exploration-launch-icon { width: 26px; height: 26px; }
.exploration-launch-info { display: flex; flex-direction: column; gap: 2px; }
.exploration-launch-name { font-size: .68rem; font-weight: 700; color: #dff8ff; }
.exploration-launch-stat { font-size: .58rem; color: #7196a4; font-family: var(--font-mono2); }
.exploration-launch-stat.insufficient { color: var(--danger); }
.exploration-launch-duration { font-size: .58rem; color: var(--cyan); font-family: var(--font-mono2); }
.exploration-launch-btn {
  border: 1px solid var(--orange); background: rgba(255,138,0,.12); color: #ffd193;
  padding: .4rem .7rem; font-size: .64rem; font-weight: 800; text-transform: uppercase; cursor: pointer;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.exploration-launch-btn:disabled { opacity: .35; cursor: not-allowed; }

/* v2.5.16 — Directives FICSIT */
.prestige-gain-total{font-weight:700;margin-bottom:10px}
.prestige-missions-title{font-weight:800;letter-spacing:.06em;margin:12px 0 6px}
.prestige-missions-list{display:grid;gap:5px}
.prestige-mission{display:flex;justify-content:space-between;gap:12px;padding:7px 9px;border:1px solid var(--border);border-radius:6px;opacity:.72}
.prestige-mission.done{opacity:1;font-weight:700}
.prestige-mission.major{border-width:2px}
.prestige-missions-hint{font-size:.82rem;opacity:.72;margin-top:8px}

/* v2.5.17 — Directives FICSIT explicites */
.prestige-missions-info{padding:10px 12px;margin:0 0 12px;border:1px solid var(--border);border-radius:8px;line-height:1.4}
.prestige-missions-info-title{font-weight:800;margin-bottom:4px}
.prestige-mission{display:block}
.prestige-mission-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.prestige-mission-desc{font-size:.88rem;opacity:.78;margin:4px 0 6px;line-height:1.35}
.prestige-mission-progress{font-size:.84rem;opacity:.9;margin-top:2px}
.prestige-mission-badge{font-size:.72rem;font-weight:900;letter-spacing:.08em;margin-bottom:5px}


/* =========================================================================
 * v2.5.19 — Interface mobile compacte
 * Desktop inchangé. Sur téléphone, les contrôles permanents sont ramenés à
 * deux barres : actions principales + navigation horizontale.
 * ========================================================================= */
.mobile-game-topbar,
.mobile-game-menu { display: none; }

@media (max-width: 700px) {
  :root { --mobile-controls-height: 100px; }

  /* Bloc de contrôle principal : reste sous le chrome du navigateur pendant
     le scroll, mais ne monopolise plus tout le premier écran. */
  .cc-left {
    position: sticky;
    top: 0;
    z-index: 210;
    min-height: 0;
    padding: .35rem .5rem .4rem;
    overflow: visible;
    background: rgba(13,14,18,.98);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 8px 22px rgba(0,0,0,.3);
  }

  .cc-left-header,
  .cc-left-footer,
  .cc-hint,
  .cc-clutter { display: none !important; }

  .mobile-game-topbar {
    min-height: 36px;
    display: flex;
    align-items: center;
    gap: .45rem;
  }
  .mobile-game-brand {
    display: flex;
    align-items: center;
    gap: .35rem;
    min-width: 0;
    flex: 0 1 auto;
  }
  .mobile-game-mark {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,138,0,.55);
    background: rgba(255,138,0,.12);
    color: var(--orange);
    font-family: var(--font-display);
    font-size: .7rem;
    font-weight: 800;
  }
  .mobile-game-title {
    font-family: var(--font-display);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .04em;
  }
  .mobile-game-version {
    color: var(--muted);
    font-family: var(--font-mono2);
    font-size: .52rem;
  }
  .mobile-game-meters {
    margin-left: auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .55rem;
    overflow: hidden;
  }
  .mobile-meter {
    display: inline-flex;
    align-items: center;
    gap: .18rem;
    white-space: nowrap;
    color: var(--muted);
    font-size: .58rem;
    min-width: 0;
  }
  .mobile-meter strong {
    color: var(--text);
    max-width: 74px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mobile-power-meter { color: var(--cyan); }
  .mobile-coupon-meter { color: var(--orange); }

  .mobile-menu-toggle {
    flex: 0 0 34px;
    width: 34px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    background: var(--panel);
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
  }

  /* Les trois actions essentielles tiennent sur UNE seule ligne. */
  .cc-click-zone {
    flex: none;
    padding: .25rem 0 0;
    gap: 0;
  }
  .cc-secondary-actions {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: stretch;
    gap: .35rem;
    width: 100%;
    max-width: none;
    margin: 0;
  }
  .cc-manual-action {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }
  .cc-manual-btn {
    height: 48px;
    min-height: 48px;
    padding: .3rem .4rem;
    border-width: 1px;
    border-radius: 8px;
    box-shadow: none;
  }
  .cc-manual-btn-content { gap: .28rem; min-width: 0; }
  .cc-manual-icon { width: 1.25rem; height: 1.25rem; }
  .cc-manual-label {
    min-width: 0;
    font-size: .66rem;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .cc-manual-dur {
    flex: 0 0 auto;
    font-size: .51rem;
  }
  .cc-auto-explore-toggle,
  .cc-manual-progress { display: none !important; }

  /* Le header desktop disparaît : seule sa barre de navigation reste, compacte
     et scrollable horizontalement. */
  .cc-header-v2 {
    position: sticky;
    top: var(--mobile-controls-height);
    z-index: 180;
    background: rgba(17,18,22,.98);
    box-shadow: 0 6px 16px rgba(0,0,0,.25);
  }
  .cc-brand-row { display: none !important; }
  .cc-main-tabs {
    position: static;
    display: flex;
    flex-wrap: nowrap;
    gap: .1rem;
    padding: 0 .3rem;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  .cc-main-tabs::-webkit-scrollbar { display: none; }
  .cc-nav-tab {
    flex: 0 0 auto;
    min-height: 40px;
    padding: .42rem .58rem;
    font-size: .65rem;
    clip-path: none;
    white-space: nowrap;
  }
  .cc-tab-dot { display: none; }

  /* L'énergie et les coupons sont déjà résumés dans la barre du haut :
     inutile de leur refaire consommer deux grosses lignes juste dessous. */
  .cc-status-strip {
    padding: .35rem .55rem;
    gap: .25rem;
  }
  .cc-status-ada {
    min-width: 0;
    font-size: .68rem;
  }
  .cc-status-ada-tag { font-size: .52rem; }
  .cc-status-chip { padding: .25rem .2rem; margin: 0; border-left: 0; }
  .cc-status-tier { width: 100%; }
  .cc-status-tier .cc-tier-mini-bar {
    flex: 1;
    width: auto;
    max-width: none;
  }
  .cc-power-panel,
  .cc-currency-panel { display: none !important; }

  /* Menu burger plein panneau mais compact : les fonctions secondaires ne
     prennent plus de hauteur quand on joue. */
  .mobile-game-menu {
    display: block;
    position: fixed;
    z-index: 400;
    top: max(8px, env(safe-area-inset-top));
    left: max(8px, env(safe-area-inset-left));
    right: max(8px, env(safe-area-inset-right));
    max-height: calc(100dvh - 16px);
    overflow-y: auto;
    padding: .75rem;
    border: 1px solid var(--border);
    border-top: 2px solid var(--orange);
    border-radius: 12px;
    background: rgba(22,24,29,.985);
    box-shadow: 0 20px 70px rgba(0,0,0,.72);
  }
  .mobile-game-menu.hidden { display: none !important; }
  .mobile-menu-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .65rem;
    font-family: var(--font-display);
  }
  .mobile-menu-close {
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 1.4rem;
    cursor: pointer;
  }
  .mobile-menu-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .4rem;
  }
  .mobile-menu-item,
  .mobile-prestige-item {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .55rem .65rem;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--panel);
    color: var(--text);
    font-family: var(--font-display);
    font-size: .7rem;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
  }
  .mobile-prestige-item {
    width: 100%;
    margin-top: .55rem;
    border-color: rgba(255,138,0,.45);
    color: var(--orange);
    background: rgba(255,138,0,.08);
    font-weight: 800;
  }
  .mobile-prestige-item.ready {
    background: var(--orange);
    color: #111;
    border-color: var(--orange);
  }
  .mobile-auto-explore {
    margin-top: .55rem;
    padding: .55rem .65rem;
    display: flex;
    align-items: center;
    gap: .55rem;
    border: 1px solid var(--border);
    border-radius: 7px;
    color: var(--muted);
    font-size: .68rem;
  }
  .mobile-auto-explore.hidden { display: none !important; }
  .mobile-auto-explore input { accent-color: var(--orange); }
  .mobile-menu-lang {
    display: flex;
    justify-content: center;
    gap: .35rem;
    margin-top: .55rem;
  }
  .mobile-menu-lang button {
    min-width: 54px;
    padding: .35rem .6rem;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
  }

  /* Retire l'ancien espace entre les deux grandes colonnes sur mobile. */
  .cc-right { border-top: 0; }
}

@media (max-width: 390px) {
  :root { --mobile-controls-height: 96px; }
  .mobile-meter { font-size: .53rem; }
  .mobile-meter strong { max-width: 58px; }
  .cc-manual-btn { height: 44px; min-height: 44px; }
  .cc-manual-label { font-size: .61rem; }
  .cc-manual-dur { font-size: .47rem; }
}

/* v2.5.20 — Modales au-dessus de l'UI mobile sticky */
@media (max-width: 700px) {
  .modal-overlay {
    z-index: 520;
    align-items: flex-start;
    padding:
      max(.55rem, env(safe-area-inset-top))
      max(.55rem, env(safe-area-inset-right))
      max(.55rem, env(safe-area-inset-bottom))
      max(.55rem, env(safe-area-inset-left));
  }

  .modal-box {
    width: 100%;
    max-height: calc(100dvh - max(1.1rem, env(safe-area-inset-top) + env(safe-area-inset-bottom)));
    margin: 0;
  }

  .modal-close,
  .modal-box > .close,
  .modal-box [data-modal-close] {
    z-index: 3;
  }
}

/* v2.5.21 — État électrique visible dans le header mobile */
@media (max-width: 700px) {
  .mobile-power-meter {
    position: relative;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    padding: .1rem .28rem;
    border-radius: 5px;
    transition: background .15s ease, color .15s ease;
  }
  .mobile-power-main {
    display: inline-flex;
    align-items: center;
    gap: .18rem;
    white-space: nowrap;
  }
  .mobile-power-status {
    display: block;
    max-width: 128px;
    margin-top: 1px;
    font-family: var(--font-mono2);
    font-size: .43rem;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: .025em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mobile-power-status.hidden { display: none !important; }

  .mobile-power-meter.strained {
    color: #ffb14a;
    background: rgba(255,177,74,.09);
  }
  .mobile-power-meter.strained strong,
  .mobile-power-meter.strained .mobile-power-status { color: #ffb14a; }

  .mobile-power-meter.brownout {
    color: #ff8a00;
    background: rgba(255,90,20,.15);
    box-shadow: inset 0 0 0 1px rgba(255,120,40,.35);
  }
  .mobile-power-meter.brownout strong,
  .mobile-power-meter.brownout .mobile-power-status { color: #ff9f43; }

  .mobile-power-meter.blackout {
    color: #ff6262;
    background: rgba(255,70,70,.15);
    box-shadow: inset 0 0 0 1px rgba(255,80,80,.42);
  }
  .mobile-power-meter.blackout strong,
  .mobile-power-meter.blackout .mobile-power-status { color: #ff7d7d; }

  /* En alerte, le bloc énergie a priorité sur les coupons : on garde
     l'information critique lisible même sur un écran étroit. */
  .mobile-power-meter.brownout,
  .mobile-power-meter.blackout { flex-shrink: 0; }
  .mobile-game-meters:has(.mobile-power-meter.brownout) .mobile-coupon-meter,
  .mobile-game-meters:has(.mobile-power-meter.blackout) .mobile-coupon-meter {
    display: none;
  }
}

@media (max-width: 390px) {
  .mobile-power-status { max-width: 108px; font-size: .4rem; }
  .mobile-power-meter.brownout #mobilePowerValue,
  .mobile-power-meter.strained #mobilePowerValue { font-size: .5rem; }
}

/* v2.5.25 — Batteries dans la Vue USINE */
.factory-machine-storage .factory-machine-visual {
  background: linear-gradient(135deg, color-mix(in srgb, var(--factory-tint) 18%, #10161b), #10161b);
}
.factory-machine-storage.running .factory-machine-pulse {
  opacity: .45;
}
.factory-machine-storage .recipe-in {
  color: #78dff2;
}

/* v2.5.27 — M.A.M. plus lisible/compact sur téléphone */
@media (max-width: 700px) {
  .mam-tree-host {
    padding: .7rem;
  }

  /* Les cartes SVG gardent leur taille et leur zone tactile.
     Seule la typo est réduite pour éviter les retours trop serrés. */
  .mam-lane-title {
    font-size: 10px;
    letter-spacing: .35px;
  }

  .mam-node-label {
    font-size: 10.5px;
  }

  .mam-node-desc {
    font-size: 8.8px;
  }

  .mam-node-footer {
    font-size: 8.5px;
  }
}

@media (max-width: 390px) {
  .mam-node-label {
    font-size: 10px;
  }

  .mam-node-desc {
    font-size: 8.4px;
  }

  .mam-node-footer {
    font-size: 8.1px;
  }
}

/* v2.5.28 — Typographie M.A.M. uniforme sur TOUTES les branches mobiles */
@media (max-width: 700px) {
  .mam-node-label {
    font-size: 9px !important;
    font-weight: 700;
  }

  .mam-node-desc {
    font-size: 7.4px !important;
  }

  .mam-node-footer {
    font-size: 7.2px !important;
  }

  .mam-lane-title {
    font-size: 8.8px !important;
  }

  .mam-node-icon {
    transform: scale(.88);
    transform-origin: center;
  }
}

@media (max-width: 390px) {
  .mam-node-label { font-size: 8.6px !important; }
  .mam-node-desc { font-size: 7px !important; }
  .mam-node-footer { font-size: 6.9px !important; }
  .mam-lane-title { font-size: 8.4px !important; }
}

/* v2.5.29 — Numéro de version toujours visible dans le header mobile */
@media (max-width: 700px) {
  .mobile-game-brand {
    flex: 0 0 auto;
    min-width: max-content;
  }

  .mobile-game-version {
    display: inline !important;
    flex: 0 0 auto;
    font-size: .50rem;
    line-height: 1;
    white-space: nowrap;
    opacity: .78;
  }

  .mobile-game-meters {
    flex: 1 1 auto;
    min-width: 0;
    margin-left: .2rem;
  }

  .mobile-coupon-meter {
    flex: 0 1 auto;
    min-width: 0;
  }
}

@media (max-width: 390px) {
  .mobile-game-title { font-size: .72rem; }
  .mobile-game-version { font-size: .46rem; }
  .mobile-game-meters { gap: .25rem; }
  .mobile-coupon-meter {
    max-width: 64px;
    overflow: hidden;
  }
}

@media (max-width: 350px) {
  .mobile-game-title { font-size: .68rem; }
  .mobile-game-version { font-size: .43rem; }

  /* Les Coupons cèdent la place avant la version et l'état électrique. */
  .mobile-coupon-meter { display: none; }
}

/* v2.5.30 — Batterie sur la même ligne que « Réseau tendu » */
@media (max-width: 700px) {
  .mobile-power-status {
    max-width: 132px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mobile-power-meter.strained .mobile-power-status {
    letter-spacing: 0;
  }
}

@media (max-width: 390px) {
  .mobile-power-status {
    max-width: 116px;
  }
}

/* v2.5.31 — Pan tactile EXPLORATION depuis n'importe quel hexagone */
.exploration-map-svg {
  touch-action: none;
  -webkit-user-select: none;
}


/* =========================================================================
 * v2.5.33 — Correctif header mobile sans clipping
 * ========================================================================= */
@media (max-width: 700px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }

  .cc-shell,
  .cc-left,
  .cc-right,
  .cc-header-v2,
  .mobile-game-topbar,
  .cc-click-zone,
  .cc-secondary-actions {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  /* IMPORTANT : ne pas mettre overflow:hidden sur .cc-left.
     Le menu burger est positionné depuis ce bloc et doit pouvoir dépasser
     verticalement lorsqu'il est ouvert. */
  .cc-left {
    overflow: visible;
    contain: none;
  }

  .mobile-game-topbar {
    width: 100%;
    min-width: 0;
  }

  /* La marque peut rétrécir sans pousser toute la page horizontalement,
     mais la version reste toujours visible. */
  .mobile-game-brand {
    flex: 0 1 auto;
    min-width: 0;
    max-width: none;
    overflow: visible;
  }

  .mobile-game-title {
    min-width: 0;
    white-space: nowrap;
  }

  .mobile-game-version {
    display: inline !important;
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .mobile-game-meters {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
  }

  .mobile-power-meter {
    min-width: 0;
    overflow: hidden;
  }

  .mobile-power-main,
  .mobile-power-status {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Les Coupons restent visibles : ils se compressent avant de disparaître. */
  .mobile-coupon-meter {
    display: inline-flex !important;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 76px;
    overflow: hidden;
  }

  .mobile-coupon-meter strong {
    min-width: 0;
    max-width: 58px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* La barre d'onglets défile dans sa propre zone sans agrandir la page. */
  .cc-main-tabs {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
}

@media (max-width: 390px) {
  .mobile-game-brand {
    gap: .22rem;
  }

  .mobile-game-title {
    font-size: .68rem;
  }

  .mobile-game-version {
    font-size: .44rem;
  }

  .mobile-game-meters {
    gap: .18rem;
  }

  .mobile-coupon-meter {
    max-width: 64px;
  }

  .mobile-coupon-meter strong {
    max-width: 46px;
  }
}

@media (max-width: 350px) {
  .mobile-game-title {
    font-size: .62rem;
    letter-spacing: .02em;
  }

  .mobile-game-version {
    font-size: .41rem;
  }

  .mobile-coupon-meter {
    max-width: 56px;
  }

  .mobile-coupon-meter strong {
    max-width: 40px;
  }
}

/* =========================================================================
 * v2.5.34 — Sélecteur auto compact directement sur REPÉRER (mobile)
 * ========================================================================= */
@media (max-width: 700px) {
  #exploreAction {
    position: relative;
  }

  /* Le toggle desktop était masqué avec les éléments secondaires mobiles.
     On le réutilise directement sur la carte, sans texte, pour éviter une
     ligne supplémentaire dans le header. */
  #autoExploreToggle:not(.hidden) {
    display: flex !important;
    position: absolute;
    z-index: 4;
    left: 50%;
    bottom: 2px;
    transform: translateX(-50%);
    margin: 0;
    padding: 0;
    width: 28px;
    height: 15px;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }

  #autoExploreToggle > span {
    display: none !important;
  }

  #autoExploreToggle input[type="checkbox"] {
    width: 28px;
    height: 15px;
    border-width: 1px;
  }

  #autoExploreToggle input[type="checkbox"]::before {
    width: 11px;
    height: 11px;
    top: 1px;
    left: 1px;
  }

  #autoExploreToggle input[type="checkbox"]:checked::before {
    transform: translateX(13px);
  }

  /* Quelques pixels de réserve en bas pour que le switch ne gêne jamais
     le texte ou la durée du bouton. */
  #exploreActionBtn .cc-manual-btn-content {
    padding-bottom: 6px;
  }
}

@media (max-width: 390px) {
  #autoExploreToggle:not(.hidden) {
    bottom: 1px;
  }

  #exploreActionBtn .cc-manual-btn-content {
    padding-bottom: 5px;
  }
}


/* =========================================================================
 * v2.5.35 — Tiroir Ressources sur PC
 * Base : v2.5.34. Le comportement mobile existant reste inchangé.
 * ========================================================================= */
@media (min-width: 721px) {
  .cc-resource-toggle {
    display: flex;
    align-items: center;
    gap: .45rem;
    width: 100%;
    min-height: 32px;
    padding: .32rem .75rem;
    border: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    background: #171a20;
    color: var(--muted);
    font: inherit;
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    cursor: pointer;
    text-align: left;
  }

  .cc-resource-toggle:hover {
    background: #1b1f26;
    color: var(--text);
  }

  .cc-resource-toggle-caret {
    transition: transform .18s ease;
    color: var(--orange);
    font-size: .9rem;
    line-height: 1;
  }

  .cc-resource-toggle-label::before {
    content: '☰ ';
    color: var(--cyan);
    font-size: .76rem;
  }

  .cc-resource-toggle.collapsed .cc-resource-toggle-caret {
    transform: rotate(-90deg);
  }

  .cc-resource-toggle-count {
    margin-left: auto;
    color: var(--orange);
    font-weight: 700;
  }

  .cc-resource-bar.collapsed {
    display: none;
  }
}


/* =========================================================================
 * v2.5.36 — Burger Ressources sticky sur mobile
 * ========================================================================= */
@media (max-width: 720px) {
  .cc-resource-toggle {
    position: sticky;
    /* actions principales + navigation mobile (40 px) */
    top: calc(var(--mobile-controls-height) + 40px);
    z-index: 170;
    background: rgba(23,26,32,.99);
    box-shadow: 0 5px 14px rgba(0,0,0,.28);
  }

  /* La barre ADA / Palier / statuts juste au-dessus reste dans le flux :
     elle défile et n'est volontairement pas sticky. */
  .cc-status-strip {
    position: static;
  }

  /* Quand Ressources est ouvert alors que son burger est déjà sticky,
     on transforme la liste en tiroir juste dessous pour qu'elle soit
     immédiatement visible, sans devoir remonter dans la page. */
  .cc-resource-bar.floating-drawer {
    position: fixed;
    z-index: 169;
    left: 0;
    right: 0;
    top: calc(var(--mobile-controls-height) + 80px);
    width: 100%;

    /* v2.5.51
       Ancien comportement : max-height: 46dvh (44dvh sous 390px).
       Dès que le burger atteignait sa position sticky, le panneau ouvert
       se contractait brutalement à environ la moitié de l'écran.

       Désormais le tiroir utilise TOUT l'espace réellement disponible sous
       le header sticky. Les ressources défilent dans cette zone sans laisser
       inutilement réapparaître la Boutique/M.A.M. derrière. */
    max-height: calc(
      100dvh
      - var(--mobile-controls-height)
      - 80px
      - env(safe-area-inset-bottom, 0px)
    );
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: .5rem;
    padding-bottom: max(.5rem, env(safe-area-inset-bottom, 0px));
    background: rgba(23,26,32,.995);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 12px 30px rgba(0,0,0,.48);
  }
}


/* =========================================================================
 * v2.5.40 — Déficits directement dans le burger Ressources mobile
 * ========================================================================= */
.cc-resource-toggle-alert {
  display: none;
}

@media (max-width: 720px) {
  .cc-resource-toggle {
    min-width: 0;
  }

  .cc-resource-toggle-label,
  .cc-resource-toggle-count,
  .cc-resource-toggle-caret {
    flex: 0 0 auto;
  }

  .cc-resource-toggle.collapsed .cc-resource-toggle-alert {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    margin-left: .1rem;
    color: var(--danger);
    font-size: .64rem;
    letter-spacing: .015em;
    text-transform: none;
  }

  .cc-resource-toggle.collapsed .cc-resource-toggle-alert.stable {
    color: var(--ok);
  }

  .cc-resource-alert-track {
    display: inline-flex;
    width: max-content;
    align-items: center;
    gap: 2rem;
    will-change: transform;
  }

  .cc-resource-alert-copy {
    flex: 0 0 auto;
  }

  .cc-resource-toggle-alert:not(.scrolling) .cc-resource-alert-copy-clone {
    display: none;
  }

  .cc-resource-toggle-alert.scrolling .cc-resource-alert-track {
    animation: resource-deficit-ticker var(--resource-ticker-duration, 12s) linear infinite;
  }

  .cc-resource-toggle:hover .cc-resource-alert-track,
  .cc-resource-toggle:focus-visible .cc-resource-alert-track {
    animation-play-state: paused;
  }

  @keyframes resource-deficit-ticker {
    from { transform: translateX(0); }
    to { transform: translateX(calc(-50% - 1rem)); }
  }

  /* Le compteur reste tout à droite, mais ne pousse jamais le ticker hors écran. */
  .cc-resource-toggle-count {
    margin-left: .25rem;
  }
}

@media (max-width: 390px) {
  .cc-resource-toggle.collapsed {
    gap: .35rem;
  }

  .cc-resource-toggle.collapsed .cc-resource-toggle-label {
    font-size: .68rem;
  }

  .cc-resource-toggle.collapsed .cc-resource-toggle-alert {
    font-size: .59rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cc-resource-toggle-alert.scrolling .cc-resource-alert-track {
    animation: none;
  }
}


/* v2.5.41 — défilement horizontal automatique du résumé des déficits */
@media (max-width: 720px) {
  .cc-resource-toggle.collapsed .cc-resource-toggle-alert {
    overflow: hidden;
  }

  .cc-resource-toggle-alert.scrolling .cc-resource-alert-track {
    animation: resource-deficit-ticker var(--resource-ticker-duration, 14s) linear infinite !important;
  }
}


/* v2.5.43 — marquee Ressources piloté en pixels par JS */
@media (max-width: 720px) {
  .cc-resource-toggle-alert.scrolling .cc-resource-alert-track {
    animation: none !important;
    will-change: transform;
  }
}

/* v2.5.56 — aide d'introduction à l'Exploration */
.exploration-intro-pane .exploration-intro-sections{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:14px 0}
.exploration-intro-pane .help-section{margin:0}
.exploration-intro-pane .help-section h3{margin:0 0 6px}
.exploration-intro-pane .help-section p{margin:0}
.exploration-intro-dismiss{display:flex;align-items:center;gap:9px;margin:14px 0 12px;cursor:pointer}
.exploration-intro-dismiss input{width:18px;height:18px;accent-color:var(--orange,#ff8a00)}
#explorationIntroContinue{width:100%}
@media(max-width:700px){
  .exploration-intro-pane .exploration-intro-sections{grid-template-columns:1fr;gap:8px}
  .exploration-intro-pane .help-section{padding:10px 12px}
  .exploration-intro-pane .help-section h3{font-size:.95rem}
  .exploration-intro-pane .help-section p{font-size:.86rem;line-height:1.4}
}

/* v2.5.62 — réponses aux rapports / boîte de réception COMPTE */
#openAccountBtn{position:relative}
.account-message-badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:17px;height:17px;padding:0 4px;margin-left:5px;
  border-radius:999px;background:#ff8a00;color:#111;
  font-size:.68rem;font-weight:800;line-height:1;
}
.account-message-badge.hidden{display:none}
.account-support-card{
  margin:12px 0 6px;padding:13px;border:1px solid rgba(93,202,221,.2);
  border-radius:10px;background:rgba(12,19,24,.42)
}
.account-support-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.account-support-head h3{margin:0 0 4px}
.account-support-messages{display:grid;gap:9px;margin-top:10px}
.account-support-thread{border:1px solid rgba(255,255,255,.09);border-radius:9px;overflow:hidden;background:rgba(0,0,0,.15)}
.account-support-thread-head{display:flex;align-items:center;gap:7px;padding:9px 10px;border-bottom:1px solid rgba(255,255,255,.07)}
.account-support-ref{font-family:monospace;color:#ff9a32;font-weight:700}
.account-support-status{margin-left:auto;font-size:.72rem;opacity:.8}
.account-support-origin{padding:9px 10px;font-size:.83rem;color:#aeb3bd;white-space:pre-wrap}
.account-support-reply{margin:0 9px 9px;padding:9px 10px;border-left:3px solid #ff8a00;background:rgba(255,138,0,.08);border-radius:5px}
.account-support-reply strong{display:block;color:#ff9a32;margin-bottom:3px}
.account-support-time{font-size:.7rem;color:#7f8792;margin-left:6px;font-weight:400}
.account-support-reply-text{white-space:pre-wrap;line-height:1.4}
@media(max-width:700px){
  .account-support-head{align-items:center}
  .account-support-card{padding:10px}
  .account-support-thread-head{flex-wrap:wrap}
  .account-support-status{margin-left:0;width:100%}
}


/* v2.5.65 — indicateur de défilement du Guide Exploration */
.exploration-intro-scroll-hint{
  position:absolute;
  left:50%;
  bottom:8px;
  z-index:7;
  transform:translateX(-50%);
  width:38px;
  height:30px;
  min-width:38px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,138,0,.75);
  border-radius:999px;
  background:rgba(20,22,26,.94);
  color:var(--orange,#ff8a00);
  box-shadow:0 5px 18px rgba(0,0,0,.42);
  cursor:pointer;
  backdrop-filter:blur(4px);
}
.exploration-intro-scroll-hint.hidden{display:none}
.exploration-intro-scroll-hint span{
  display:block;
  font-size:1.55rem;
  line-height:.75;
  transform:translateY(-2px);
  animation:exploration-intro-scroll-cue 1.15s ease-in-out infinite;
  pointer-events:none;
}
@keyframes exploration-intro-scroll-cue{
  0%,100%{transform:translateY(-3px)}
  50%{transform:translateY(3px)}
}
@media (prefers-reduced-motion:reduce){
  .exploration-intro-scroll-hint span{animation:none}
}
@media(max-width:700px){
  .exploration-intro-scroll-hint{
    bottom:6px;
    width:42px;
    height:32px;
  }
}