/* =============================================================================
   TOKEN WAR — Incremental game stylesheet
   Theme: refined "AI control room / terminal" — dark, neon cyan/violet accents.
   Pure CSS, no external deps, system font stacks only. GitHub Pages ready.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. DESIGN TOKENS (palette, typography, spacing) — tweak everything here
   -------------------------------------------------------------------------- */
:root {
  /* --- Base surfaces (very dark, slightly blue) --- */
  --bg-0: #070a0f;          /* page background, deepest */
  --bg-1: #0a0e14;          /* main shell */
  --bg-2: #0f1420;          /* panels */
  --bg-3: #141b2b;          /* raised elements / inputs */
  --bg-hover: #1a2336;

  /* --- Borders & lines --- */
  --line: #1d2738;
  --line-strong: #2a3850;

  /* --- Text --- */
  --text: #dbe4f0;
  --text-dim: #93a1b8;
  --text-mute: #5d6b82;

  /* --- Accents (phase-driven; defaults = startup/cyan) --- */
  --accent: #2ee6d6;        /* primary neon */
  --accent-2: #7c5cff;      /* secondary neon (violet) */
  --accent-soft: rgba(46, 230, 214, 0.14);
  --accent-line: rgba(46, 230, 214, 0.45);
  --glow: rgba(46, 230, 214, 0.55);

  /* --- Semantic --- */
  --good: #4ade80;
  --bad: #ff5c6c;
  --warn: #ffb454;
  --info: #56b6ff;

  /* --- Resource hues (stat tints) --- */
  --c-tokens: #2ee6d6;
  --c-money: #4ade80;
  --c-compute: #7c5cff;
  --c-energy: #ffb454;
  --c-matter: #ff7ac6;

  /* --- Typography --- */
  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue",
    Arial, sans-serif;
  --font-mono: "SF Mono", "JetBrains Mono", "Fira Code", "Cascadia Code",
    ui-monospace, "Menlo", "Consolas", monospace;

  /* --- Radii & shadows --- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --shadow-soft: 0 6px 24px -10px rgba(0, 0, 0, 0.7);
  --shadow-panel: 0 1px 0 rgba(255, 255, 255, 0.03) inset,
    0 12px 36px -18px rgba(0, 0, 0, 0.85);

  /* --- Motion --- */
  --t-fast: 120ms;
  --t-med: 220ms;
  --t-slow: 420ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* --- Layout --- */
  --gutter: clamp(0.75rem, 1.6vw, 1.4rem);
  --topbar-h: 64px;
}

/* -----------------------------------------------------------------------------
   2. PHASE THEMES — body classes shift the accent identity over time
   -------------------------------------------------------------------------- */
body.phase-startup {
  --accent: #2ee6d6;
  --accent-2: #7c5cff;
  --accent-soft: rgba(46, 230, 214, 0.14);
  --accent-line: rgba(46, 230, 214, 0.45);
  --glow: rgba(46, 230, 214, 0.55);
}
body.phase-agi {
  --accent: #9d7bff;
  --accent-2: #2ee6d6;
  --accent-soft: rgba(157, 123, 255, 0.16);
  --accent-line: rgba(157, 123, 255, 0.5);
  --glow: rgba(157, 123, 255, 0.6);
}
body.phase-cosmic {
  --accent: #ffd166;
  --accent-2: #ff7ac6;
  --accent-soft: rgba(255, 209, 102, 0.15);
  --accent-line: rgba(255, 209, 102, 0.5);
  --glow: rgba(255, 209, 102, 0.6);
}
body.phase-bigbang {
  --accent: #ffffff;
  --accent-2: #ff5c6c;
  --accent-soft: rgba(255, 92, 108, 0.18);
  --accent-line: rgba(255, 255, 255, 0.6);
  --glow: rgba(255, 92, 108, 0.7);
  --bg-0: #0d0608;
  --bg-1: #120709;
}

/* -----------------------------------------------------------------------------
   3. RESET & BASE
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
html {
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--line-strong) transparent;
}
body {
  min-height: 100vh;
  font-family: var(--font-sans);
  font-size: clamp(14px, 0.9rem + 0.1vw, 16px);
  line-height: 1.5;
  color: var(--text);
  background:
    radial-gradient(1200px 600px at 80% -10%, var(--accent-soft), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(124, 92, 255, 0.08), transparent 55%),
    var(--bg-1);
  background-attachment: fixed;
  transition: background var(--t-slow) var(--ease);
  -webkit-font-smoothing: antialiased;
  /* No accidental text selection / blue tap flash / iOS long-press callout */
  overflow-x: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
/* Keep inputs/textareas usable (selectable & editable) */
input,
textarea {
  -webkit-user-select: auto;
  -moz-user-select: auto;
  user-select: auto;
}
h1, h2, h3, h4 {
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  cursor: pointer;
}
a {
  color: var(--accent);
  text-decoration: none;
}

/* Focus accessibility */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* -----------------------------------------------------------------------------
   4. SCROLLBARS — discrete, themed (for .log / .item-list mainly)
   -------------------------------------------------------------------------- */
.log::-webkit-scrollbar,
.item-list::-webkit-scrollbar,
.modal-body::-webkit-scrollbar {
  width: 9px;
}
.log::-webkit-scrollbar-track,
.item-list::-webkit-scrollbar-track,
.modal-body::-webkit-scrollbar-track {
  background: transparent;
}
.log::-webkit-scrollbar-thumb,
.item-list::-webkit-scrollbar-thumb,
.modal-body::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.log::-webkit-scrollbar-thumb:hover,
.item-list::-webkit-scrollbar-thumb:hover {
  background: var(--accent-line);
  background-clip: padding-box;
}

/* -----------------------------------------------------------------------------
   5. TOPBAR — fixed header with brand + key stats
   -------------------------------------------------------------------------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: var(--gutter);
  flex-wrap: wrap;
  padding: 0.55rem var(--gutter);
  min-height: var(--topbar-h);
  background: linear-gradient(180deg, rgba(10, 14, 20, 0.92), rgba(10, 14, 20, 0.78));
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 8px 24px -16px rgba(0, 0, 0, 0.9);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: 0 0 auto;
}
.brand-logo {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--r-md);
  background:
    radial-gradient(circle at 30% 25%, var(--accent), transparent 70%),
    linear-gradient(135deg, var(--accent-2), var(--accent));
  box-shadow: 0 0 18px -4px var(--glow);
  color: #06080c;
  font-weight: 800;
  font-family: var(--font-mono);
}
.brand-name {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  font-weight: 750;
  letter-spacing: 0.02em;
  background: linear-gradient(90deg, var(--text), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.brand-phase {
  display: inline-block;
  margin-top: 1px;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-family: var(--font-mono);
}

/* --- Stats bar --- */
.stats-bar {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: 0.5rem 0.9rem;
  justify-content: flex-end;
}
.stat {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  align-items: baseline;
  column-gap: 0.5rem;
  padding: 0.35rem 0.75rem;
  min-width: 116px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border-left: 3px solid var(--stat-c, var(--accent));
  transition: border-color var(--t-med), transform var(--t-fast);
}
.stat:hover {
  transform: translateY(-1px);
  border-color: var(--line-strong);
}
.stat-label {
  grid-column: 1 / -1;
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.stat-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(0.95rem, 1.2vw, 1.15rem);
  font-weight: 600;
  color: var(--stat-c, var(--text));
}
.stat-rate {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.72rem;
  color: var(--text-dim);
}
.stat-rate::before { content: "+"; opacity: 0.6; }

.stat.tokens  { --stat-c: var(--c-tokens); }
.stat.money   { --stat-c: var(--c-money); }
.stat.compute { --stat-c: var(--c-compute); }
.stat.energy  { --stat-c: var(--c-energy); }
.stat.matter  { --stat-c: var(--c-matter); }

/* -----------------------------------------------------------------------------
   6. GAME GRID — 3-column dashboard layout
   -------------------------------------------------------------------------- */
.game-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--gutter);
  align-items: start;
  width: min(1500px, 100%);
  margin-inline: auto;
  padding: var(--gutter);
}
.col {
  display: flex;
  flex-direction: column;
  gap: var(--gutter);
  min-width: 0;
}

/* -----------------------------------------------------------------------------
   7. PANELS — generic dashboard cards
   -------------------------------------------------------------------------- */
.panel {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  box-shadow: var(--shadow-panel);
  overflow: hidden;
  transition: border-color var(--t-med), box-shadow var(--t-med);
}
.panel::before {
  /* hairline gradient top edge */
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-line), transparent);
  opacity: 0.7;
}
.panel:hover {
  border-color: var(--line-strong);
}
.panel-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1rem;
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  border-bottom: 1px solid var(--line);
  cursor: default;
}
.panel-title::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--accent);
  box-shadow: 0 0 10px var(--glow);
}
.panel-body {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

/* Collapsed state */
.panel.collapsed .panel-body { display: none; }
.panel.collapsed .panel-title { border-bottom-color: transparent; cursor: pointer; }

/* -----------------------------------------------------------------------------
   8. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.6rem 1.05rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--bg-3);
  color: var(--text);
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: transform var(--t-fast) var(--ease),
    box-shadow var(--t-med), background var(--t-med), border-color var(--t-med);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.btn:hover:not(:disabled) {
  background: var(--bg-hover);
  border-color: var(--accent-line);
  box-shadow: 0 0 0 1px var(--accent-soft), 0 0 18px -6px var(--glow);
  transform: translateY(-1px);
}
.btn:active:not(:disabled) {
  transform: translateY(0) scale(0.985);
}
.btn:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  filter: grayscale(0.4);
}

/* Primary */
.btn-primary {
  border: none;
  color: #05070b;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 6px 20px -8px var(--glow);
}
.btn-primary:hover:not(:disabled) {
  /* ré-affirme le dégradé : .btn:hover posait un fond sombre sous un texte sombre (illisible) */
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #05070b;
  border-color: transparent;
  box-shadow: 0 8px 28px -6px var(--glow);
}

/* Buy */
.btn-buy {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent);
}
.btn-buy:hover:not(:disabled) {
  background: var(--accent);
  color: #05070b;
}

/* Ghost */
.btn-ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--text-dim);
}
.btn-ghost:hover:not(:disabled) {
  color: var(--text);
  border-color: var(--line-strong);
  box-shadow: none;
}

/* Cost sub-label */
.btn-cost {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.74rem;
  font-weight: 600;
  opacity: 0.85;
  padding-left: 0.4rem;
  border-left: 1px solid currentColor;
}

/* Big central generator button */
.btn-generate {
  width: 100%;
  padding: clamp(1rem, 3vw, 1.6rem);
  font-size: clamp(1.05rem, 2.4vw, 1.4rem);
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(255, 255, 255, 0.18), transparent 60%),
    linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 10px 40px -10px var(--glow), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
  animation: breathe 3.5s var(--ease) infinite;
}
.btn-generate:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 16px 50px -8px var(--glow);
}
.btn-generate:active:not(:disabled) {
  transform: scale(0.97);
  box-shadow: 0 4px 18px -6px var(--glow);
}

/* -----------------------------------------------------------------------------
   9. CONTROLS — sliders & allocation
   -------------------------------------------------------------------------- */
.control-row {
  display: grid;
  grid-template-columns: minmax(90px, auto) 1fr auto;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.85rem;
}
.control-row label {
  color: var(--text-dim);
}
.control-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  font-size: 0.85rem;
  min-width: 3.5ch;
  text-align: right;
}

.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2)) no-repeat,
    var(--bg-3);
  background-size: var(--fill, 50%) 100%;
  cursor: pointer;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--text);
  border: 3px solid var(--accent);
  box-shadow: 0 0 12px -2px var(--glow);
  transition: transform var(--t-fast);
}
.slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
.slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--text);
  border: 3px solid var(--accent);
  box-shadow: 0 0 12px -2px var(--glow);
}

/* Compute allocation bar */
.alloc {
  display: flex;
  width: 100%;
  height: 26px;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-3);
}
.alloc-seg {
  height: 100%;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: #05070b;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-right: 1px solid rgba(0, 0, 0, 0.3);
  transition: flex-basis var(--t-med) var(--ease);
  overflow: hidden;
  white-space: nowrap;
}
.alloc-seg:last-child { border-right: none; }
.alloc-seg:nth-child(2) { background: linear-gradient(135deg, var(--c-compute), var(--accent-2)); }
.alloc-seg:nth-child(3) { background: linear-gradient(135deg, var(--c-energy), var(--c-matter)); }

/* -----------------------------------------------------------------------------
   10. PROGRESS & METERS
   -------------------------------------------------------------------------- */
.progress {
  position: relative;
  width: 100%;
  height: 8px;
  border-radius: 99px;
  background: var(--bg-3);
  overflow: hidden;
  border: 1px solid var(--line);
}
.progress-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 12px -2px var(--glow);
  transition: width var(--t-med) var(--ease);
  position: relative;
  overflow: hidden;
}
.progress-fill::after {
  /* sweeping shimmer */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: translateX(-100%);
  animation: sweep 2.2s linear infinite;
}

.meter {
  width: 100%;
  height: 14px;
  border-radius: var(--r-sm);
  background:
    repeating-linear-gradient(90deg, transparent 0 7px, rgba(0,0,0,0.25) 7px 8px),
    var(--bg-3);
  border: 1px solid var(--line);
  overflow: hidden;
  position: relative;
}
.meter > .progress-fill { box-shadow: none; }

/* -----------------------------------------------------------------------------
   11. ITEM LISTS — upgrades / purchases / projects
   -------------------------------------------------------------------------- */
.item-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  max-height: clamp(260px, 42vh, 520px);
  overflow-y: auto;
  padding-right: 4px;
}
.item {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-2);
  padding: 0.7rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  transition: border-color var(--t-med), transform var(--t-fast),
    box-shadow var(--t-med), opacity var(--t-med);
}
.item-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}
.item-name {
  font-weight: 650;
  color: var(--text);
}
.item-cost {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.82rem;
  color: var(--text-dim);
  white-space: nowrap;
}
.item-desc {
  font-size: 0.82rem;
  color: var(--text-mute);
  line-height: 1.45;
}
.item-effect {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--accent);
}

/* States */
.item.affordable {
  cursor: pointer;
  border-color: var(--accent-line);
  box-shadow: 0 0 0 1px var(--accent-soft);
}
.item.affordable:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 22px -10px var(--glow), 0 0 0 1px var(--accent-line);
}
.item.affordable .item-cost { color: var(--good); }
.item.locked {
  opacity: 0.5;
  filter: grayscale(0.5);
}
.item.locked .item-cost { color: var(--bad); }
.item.owned {
  border-color: var(--line);
  background: linear-gradient(180deg, var(--accent-soft), transparent);
}
.item.owned .item-name::after {
  content: "✓";
  margin-left: 0.4rem;
  color: var(--good);
}

/* -----------------------------------------------------------------------------
   12. BADGES
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.5rem;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 99px;
  background: var(--bg-3);
  color: var(--text-dim);
  border: 1px solid var(--line-strong);
}
.badge-new    { color: #05070b; background: var(--accent); border-color: transparent; }
.badge-warn   { color: #1a1306; background: var(--warn); border-color: transparent; }
.badge-danger {
  color: #fff; background: var(--bad); border-color: transparent;
  animation: pulse 1.4s ease-in-out infinite;
}

/* -----------------------------------------------------------------------------
   13. EVENT LOG
   -------------------------------------------------------------------------- */
.log {
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-height: clamp(220px, 40vh, 460px);
  overflow-y: auto;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.5;
}
.log-entry {
  padding: 0.4rem 0.6rem;
  border-left: 2px solid var(--line-strong);
  color: var(--text-dim);
  background: linear-gradient(90deg, var(--bg-3), transparent 60%);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  animation: slidein var(--t-med) var(--ease);
}
.log-entry::before {
  content: attr(data-time);
  color: var(--text-mute);
  margin-right: 0.5rem;
}
.log-entry.good      { border-left-color: var(--good); color: var(--good); }
.log-entry.bad       { border-left-color: var(--bad); color: var(--bad); }
.log-entry.info      { border-left-color: var(--info); color: var(--info); }
.log-entry.milestone {
  border-left-color: var(--accent);
  color: var(--text);
  background: linear-gradient(90deg, var(--accent-soft), transparent 70%);
  font-weight: 600;
}

/* -----------------------------------------------------------------------------
   14. MODAL — decision events
   -------------------------------------------------------------------------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: var(--gutter);
  background: rgba(5, 7, 11, 0.6);
  backdrop-filter: blur(8px) saturate(120%);
  animation: fade var(--t-med) var(--ease);
}
.modal {
  width: min(92vw, 620px);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.9), 0 0 40px -16px var(--glow);
  overflow: hidden;
  animation: pop var(--t-med) var(--ease);
}
.modal-title {
  padding: 1.1rem 1.3rem;
  font-size: 1.1rem;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--accent-soft), transparent);
}
.modal-body {
  padding: 1.3rem;
  color: var(--text-dim);
  max-height: 60vh;
  overflow-y: auto;
  line-height: 1.6;
}
.modal-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 1.1rem 1.3rem;
  border-top: 1px solid var(--line);
}
.modal-choices .btn.choice { flex: 1 1 160px; }
.modal.urgent {
  border-color: var(--bad);
  animation: pop var(--t-med) var(--ease), urgent-ring 1.3s ease-in-out infinite;
}

/* -----------------------------------------------------------------------------
   15. TOASTS
   -------------------------------------------------------------------------- */
.toast-container {
  position: fixed;
  bottom: var(--gutter);
  right: var(--gutter);
  z-index: 120;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  max-width: min(360px, 90vw);
}
.toast {
  padding: 0.75rem 1rem;
  border-radius: var(--r-md);
  background: var(--bg-2);
  border: 1px solid var(--line-strong);
  border-left: 4px solid var(--accent);
  box-shadow: var(--shadow-soft);
  font-size: 0.85rem;
  animation: toastin var(--t-med) var(--ease);
}
.toast.good { border-left-color: var(--good); }
.toast.bad  { border-left-color: var(--bad); }
.toast.info { border-left-color: var(--info); }

/* -----------------------------------------------------------------------------
   16. TABS
   -------------------------------------------------------------------------- */
.tabs {
  display: flex;
  gap: 0.25rem;
  padding: 0.25rem;
  border-radius: var(--r-md);
  background: var(--bg-3);
  border: 1px solid var(--line);
}
.tab {
  flex: 1;
  padding: 0.45rem 0.75rem;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-mute);
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  background: transparent;
  transition: color var(--t-fast), background var(--t-fast);
}
.tab:hover { color: var(--text-dim); }
.tab.active {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: var(--accent-line);
}

/* -----------------------------------------------------------------------------
   17. ENDING / BIG BANG SCREEN
   -------------------------------------------------------------------------- */
.ending-screen {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 1.5rem;
  padding: var(--gutter);
  background:
    radial-gradient(800px 600px at 50% 40%, var(--accent-soft), transparent 70%),
    var(--bg-0);
  animation: fade var(--t-slow) var(--ease);
}
.ending-title {
  font-size: clamp(2rem, 7vw, 4.5rem);
  font-weight: 800;
  letter-spacing: 0.04em;
  background: linear-gradient(120deg, var(--accent), var(--accent-2), var(--accent));
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 5s linear infinite;
}
.ending-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  max-width: 640px;
  margin-inline: auto;
}
.ending-stats > * {
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-2);
}

/* -----------------------------------------------------------------------------
   18. HELPERS
   -------------------------------------------------------------------------- */
.hidden { display: none !important; }
.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.text-good { color: var(--good); }
.text-bad  { color: var(--bad); }
.text-muted { color: var(--text-mute); }
.glow { text-shadow: 0 0 12px var(--glow); }
.pulse { animation: pulse 1.6s ease-in-out infinite; }

/* -----------------------------------------------------------------------------
   19. KEYFRAMES
   -------------------------------------------------------------------------- */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
@keyframes breathe {
  0%, 100% { box-shadow: 0 10px 40px -10px var(--glow), 0 0 0 1px rgba(255,255,255,0.06) inset; }
  50% { box-shadow: 0 14px 52px -8px var(--glow), 0 0 0 1px rgba(255,255,255,0.12) inset; }
}
@keyframes sweep {
  0% { transform: translateX(-100%); }
  60%, 100% { transform: translateX(100%); }
}
@keyframes slidein {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes toastin {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes pop {
  from { opacity: 0; transform: scale(0.94) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes urgent-ring {
  0%, 100% { box-shadow: 0 30px 80px -20px rgba(0,0,0,0.9), 0 0 0 0 rgba(255,92,108,0.5); }
  50% { box-shadow: 0 30px 80px -20px rgba(0,0,0,0.9), 0 0 0 6px rgba(255,92,108,0); }
}
@keyframes shimmer {
  to { background-position: 200% center; }
}

/* -----------------------------------------------------------------------------
   20. RESPONSIVE — tablet then mobile collapse
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  /* Tablet: 2 columns, right column drops below */
  .game-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .col-right { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  /* Mobile: single column, compact header */
  :root { --topbar-h: auto; }
  .game-grid {
    grid-template-columns: 1fr;
  }
  .col-right { grid-column: auto; }
  .topbar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
  }
  .brand { justify-content: center; flex-wrap: wrap; }
  .stats-bar { justify-content: stretch; }
  .stat {
    flex: 1 1 calc(50% - 0.5rem);
    min-width: 0;
  }
  .modal-choices .btn.choice { flex: 1 1 100%; }
}

@media (max-width: 420px) {
  .stat { flex: 1 1 100%; }
}

/* -----------------------------------------------------------------------------
   21. REDUCED MOTION — accessibility
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* =============================================================================
   CALENDRIER DE SIMULATION + LA UNE (titres de presse)
   ============================================================================= */
.brand-date {
  margin-left: 0.6rem;
  padding: 0.15rem 0.55rem;
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
@media (max-width: 720px) { .brand-date { font-size: 0.74rem; margin-left: 0.4rem; } }

.headlines {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  max-height: clamp(150px, 26vh, 300px);
  overflow-y: auto;
  padding-right: 4px;
}
.headline {
  position: relative;
  padding: 0.5rem 0.7rem 0.5rem 0.85rem;
  border-radius: 8px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--text-dim);
  animation: slidein 0.3s ease;
  line-height: 1.3;
}
.headline.good    { border-left-color: var(--good); }
.headline.bad     { border-left-color: var(--bad); }
.headline.neutral { border-left-color: var(--accent-2); }
.headline-date {
  display: block;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  margin-bottom: 0.15rem;
}
.headline-text { font-size: 0.86rem; font-style: italic; }
.headline.good .headline-text::before    { content: "▲ "; color: var(--good); font-style: normal; }
.headline.bad .headline-text::before      { content: "▼ "; color: var(--bad); font-style: normal; }
.headline.neutral .headline-text::before  { content: "● "; color: var(--accent-2); font-style: normal; font-size: 0.7em; }

@keyframes slidein { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .headline { animation: none; } }

/* =============================================================================
   22. MOBILE / TACTILE — touch ergonomics, single-column flow, wide modals
   Applies on phones/small tablets. Reuses existing design tokens only.
   ============================================================================= */

/* ---- Touch ergonomics on all clickable controls (every screen size) ---- */
.btn-ghost,
.tab,
.item.affordable,
.slider {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Smooth momentum scrolling on every scrollable list */
.log,
.headlines,
.item-list,
.modal-body {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Wider, easier-to-grab slider thumbs on touch devices */
@media (hover: none), (pointer: coarse) {
  .slider { height: 8px; }
  .slider::-webkit-slider-thumb {
    width: 26px;
    height: 26px;
    border-width: 4px;
  }
  .slider::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border-width: 4px;
  }
}

/* ----------------------------------------------------------------------------
   MAIN MOBILE BREAKPOINT — single column + tactile sizing
   ------------------------------------------------------------------------- */
@media (max-width: 760px) {

  /* --- One single, fluid column for the whole dashboard --- */
  .game-grid {
    grid-template-columns: 1fr;
    display: flex;
    flex-direction: column;
    padding: var(--gutter);
  }
  .col {
    grid-column: 1 / -1;
    width: 100%;
  }
  /* Logical vertical order on mobile:
     production -> infra/energy -> R&D -> projects -> press -> log.
     Center column (infra/energy/R&D) sits between production and projects. */
  .col-left   { order: 1; }
  .col-center { order: 2; }
  .col-right  { order: 3; }

  /* Within the right column, keep projects above press above log */
  #panel-projects { order: 1; }
  #panel-press    { order: 2; }
  #panel-log      { order: 3; }

  /* --- Compact, accessible topbar --- */
  .topbar {
    padding: 0.5rem var(--gutter);
  }
  .brand { justify-content: flex-start; }
  .brand-name { font-size: clamp(1rem, 5vw, 1.2rem); }
  .stats-bar {
    gap: 0.45rem;
  }
  .stat {
    min-width: 0;
    padding: 0.4rem 0.6rem;
  }
  .topbar-controls {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
  }

  /* --- Tactile targets: every interactive control >= 48px tall --- */
  .btn,
  .btn-ghost {
    min-height: 48px;
    padding: 0.7rem 1.05rem;
  }
  .btn-buy { min-height: 48px; }
  .btn-generate {
    min-height: 64px;
    padding: clamp(1.1rem, 5vw, 1.5rem);
  }
  .topbar-controls .btn-ghost {
    flex: 1 1 auto;
    min-height: 44px;
    min-width: 56px;
  }
  .tab {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .item.affordable {
    /* generous padding so the whole card is an easy tap target */
    padding: 0.85rem 0.9rem;
  }

  /* Slightly more breathing room between stacked controls */
  .panel-body { gap: 0.95rem; }

  /* --- Scrollable lists: keep heights reasonable in vh on mobile --- */
  .item-list { max-height: clamp(220px, 48vh, 420px); }
  .log       { max-height: clamp(180px, 42vh, 360px); }
  .headlines { max-height: clamp(140px, 34vh, 300px); }

  /* --- Modals: much wider proportionally, comfy padding, full-width choices --- */
  .modal-overlay {
    padding: clamp(0.5rem, 3vw, 1rem);
    align-items: end;            /* sit toward the thumb / bottom-friendly */
  }
  .modal {
    width: min(94vw, 560px);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
  }
  .modal-title {
    padding: clamp(1rem, 4vw, 1.3rem);
    font-size: clamp(1.05rem, 4.5vw, 1.25rem);
  }
  .modal-body {
    padding: clamp(1rem, 4vw, 1.3rem);
    max-height: 85vh;
    overflow-y: auto;
    font-size: clamp(0.92rem, 3.6vw, 1rem);
  }
  .modal-choices {
    flex-direction: column;
    flex-wrap: nowrap;
    padding: clamp(1rem, 4vw, 1.3rem);
    gap: 0.65rem;
  }
  /* Choice buttons: full-width, stacked, big tap targets */
  .modal-choices .btn.choice {
    flex: 1 1 auto;
    width: 100%;
    min-height: 48px;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 0.2rem;
  }
  .choice-label { font-weight: 700; }
  .choice-desc {
    font-size: 0.82rem;
    font-weight: 500;
    opacity: 0.85;
    white-space: normal;
  }

  /* --- Toasts: full-ish width, not clipped, anchored to bottom --- */
  .toast-container {
    left: var(--gutter);
    right: var(--gutter);
    bottom: var(--gutter);
    max-width: none;
    width: auto;
    align-items: stretch;
  }
  .toast { font-size: 0.86rem; }

  /* --- Ending screen stays readable on small screens --- */
  .ending-screen { gap: 1.1rem; padding: clamp(1rem, 5vw, var(--gutter)); }
  .ending-stats { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
}

/* ----------------------------------------------------------------------------
   VERY SMALL PHONES (<= 420px) — stats one per row, tighter spacing
   ------------------------------------------------------------------------- */
@media (max-width: 420px) {
  .game-grid { padding: 0.7rem; }
  .stats-bar { gap: 0.4rem; }
  .modal { width: min(96vw, 560px); }
  .ending-stats { grid-template-columns: 1fr 1fr; }
}

/* =============================================================================
   CHAÎNE D'HÉBERGEMENT · REVENTE · BOURSE · BOUTONS GRISÉS
   ============================================================================= */
/* Boutons non activables : grisés (pas de message d'erreur) */
.btn.locked, .btn-buy.locked {
  opacity: 0.45;
  filter: grayscale(0.5);
  pointer-events: none;
}
/* Bouton de revente du matériel obsolète */
.sell-btn {
  margin-top: 0.45rem;
  padding: 0.34rem 0.7rem;
  font-size: 0.74rem;
  font-weight: 600;
  background: transparent;
  border: 1px solid var(--bad);
  color: var(--bad);
  border-radius: 7px;
  cursor: pointer;
  opacity: 1;
  transition: background 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.sell-btn:hover { background: rgba(255, 92, 108, 0.14); }
.item.locked .sell-btn { opacity: 1; pointer-events: auto; filter: none; } /* la revente reste possible */

/* Bourse */
.stock-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; }
.stock-actions .btn { flex: 1 1 8rem; }
.risk-row { align-items: center; }
.risk-row .tabs { display: flex; gap: 0.3rem; flex: 1 1 auto; }
.risk-row .tab { flex: 1 1 auto; min-height: 38px; }

/* Location de datacenter */
.rent-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem;
  margin-top: 0.45rem; padding-top: 0.45rem;
  border-top: 1px dashed var(--line);
}
.rent-info { flex: 1 1 100%; font-size: 0.74rem; }
.rent-btn { font-size: 0.72rem; padding: 0.3rem 0.6rem; min-height: 34px; }
.rent-btn.locked { opacity: 0.4; pointer-events: none; }

/* Charges journalières + équipe */
.charge-total { border-top: 1px solid var(--line); margin-top: 0.3rem; padding-top: 0.4rem; font-weight: 600; }
#charge-total, #charge-sec { color: var(--bad); }
.rent-row .rent-btn[data-act="hire"] { border-color: var(--good); color: var(--good); }
.rent-row .rent-btn[data-act="hire"]:hover { background: rgba(74,222,128,0.12); }

/* Achat groupé ×10 / ×100 */
.bulk { display: inline-flex; gap: 0.25rem; margin-left: 0.4rem; }
.bulk-btn {
  font-size: 0.66rem; font-weight: 700; line-height: 1;
  padding: 0.2rem 0.4rem; min-height: 30px;
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid var(--accent-line); border-radius: 6px; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.bulk-btn:hover { background: var(--accent); color: #06131a; }
.bulk-btn.locked { opacity: 0.4; pointer-events: none; }

/* Toggle d'auto-achat par élément */
.auto-btn {
  margin-left: 0.4rem; font-size: 0.64rem; font-weight: 700; line-height: 1;
  padding: 0.2rem 0.42rem; min-height: 30px;
  background: transparent; color: var(--text-dim);
  border: 1px solid var(--line-strong); border-radius: 6px; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.auto-btn.on { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); box-shadow: 0 0 0 1px var(--accent-line); }

/* Sparkline de production + succès + outils de sauvegarde */
.spark-wrap { margin-top: 0.55rem; }
#spark { display: block; width: 100%; height: 46px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; }
.spark-legend { display: flex; gap: 0.8rem; align-items: center; font-size: 0.68rem; color: var(--text-dim); margin-top: 0.25rem; }
.spark-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 0.25rem; }
.spark-dot.tok { background: var(--accent); }
.spark-dot.cash { background: var(--good); }
.ach { margin: 0.25rem 0; font-size: 0.85rem; }
.ach.todo { opacity: 0.55; }
.save-tools { border-top: 1px dashed var(--line); padding-top: 0.6rem; }

/* =============================================================================
   CINÉMATIQUE DE FIN · DIRECTIVES PERMANENTES · DATACENTER ORBITAL
   ============================================================================= */
.cine {
  position: fixed; inset: 0; z-index: 300;
  background: #000;
}
.cine canvas { display: block; width: 100%; height: 100%; }
.cine-skip {
  position: absolute; right: clamp(0.8rem, 3vw, 2rem); bottom: clamp(0.8rem, 3vw, 2rem);
  min-height: 44px; padding: 0.5rem 1.1rem;
  background: rgba(10, 14, 20, 0.55); border: 1px solid var(--line-strong);
  color: var(--text-dim); border-radius: 999px; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.cine-skip:hover { color: var(--accent); border-color: var(--accent-line); }

.ending-actions { display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; margin-top: 1rem; }
.ending-actions .btn { min-width: 11rem; min-height: 48px; }
#ending-getalife:disabled { opacity: 0.5; cursor: default; }

/* case « désormais, faire cela » dans les modales */
.auto-choice {
  display: flex; align-items: flex-start; gap: 0.55rem;
  width: 100%; padding: 0.55rem 0.7rem; margin-bottom: 0.2rem;
  font-size: 0.8rem; color: var(--text-dim);
  background: var(--bg-2); border: 1px dashed var(--line-strong); border-radius: 8px;
  cursor: pointer; user-select: none;
}
.auto-choice input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--accent); cursor: pointer; }

/* barre du chantier orbital (se réduit avec le temps) */
.spacedc-bar { margin-top: 0.5rem; }
.spacedc-bar .progress-fill { transition: width 0.4s linear; }

/* Crédit « nostalgie 64k » pendant le scroller + porte de sortie NG+ + bouton fuyant */
.cine-credit {
  position: absolute; left: clamp(0.8rem, 3vw, 2rem); bottom: clamp(0.8rem, 3vw, 2rem);
  max-width: min(62vw, 30rem);
  font-family: var(--font-mono); font-size: clamp(0.66rem, 1.6vw, 0.82rem);
  color: rgba(190, 210, 240, 0.75); text-decoration: none;
  border-bottom: 1px dotted rgba(190, 210, 240, 0.5);
  text-shadow: 0 0 10px rgba(120, 200, 255, 0.45);
  animation: creditIn 1.2s ease both;
}
.cine-credit:hover { color: #fff; border-bottom-color: #fff; }
@keyframes creditIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.ending-ngplus { margin-top: 0.9rem; font-size: 0.8rem; opacity: 0.75; }
.ending-ngplus:hover { opacity: 1; }

/* le bouton « Play again » se dérobe (transition douce, jamais sur écran tactile) */
#ending-restart { transition: transform 180ms cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow var(--t-med) var(--ease); }
@media (hover: none), (prefers-reduced-motion: reduce) {
  #ending-restart { transform: none !important; }
}

/* =====================================================================
   CHANTIERS — rien n'est instantané : badge « en cours de mise en service »
   ===================================================================== */
.badge-build {
  color: #06202a; background: linear-gradient(135deg, #7dd3fc, #38bdf8);
  border-color: transparent; animation: buildPulse 1.6s ease-in-out infinite;
}
@keyframes buildPulse { 0%, 100% { opacity: 0.75; } 50% { opacity: 1; } }

/* petite mention en italique dans les libellés de charges (nature du coût) */
.hint {
  font-style: normal; font-size: 0.66rem; letter-spacing: 0.03em;
  text-transform: uppercase; opacity: 0.55; margin-left: 0.35rem;
}
.infl-row { border-top: 1px dashed var(--line); padding-top: 0.45rem; margin-top: 0.15rem; }
.infl-row .num { font-size: 0.72rem; }

/* =====================================================================
   CRISES — une boîte d'alerte posée au hasard DANS LA PAGE (souvent hors
   du champ de vision), avec un halo rouge qui grossit et bat de plus en
   plus vite tant que personne ne la trouve.
   ===================================================================== */
.crisis-layer {
  position: absolute; top: 0; left: 0; width: 100%; height: 0;
  overflow: visible; pointer-events: none; z-index: 60;
}
.crisis-box {
  --k: 0; --pulse: 1.5s;
  position: absolute; pointer-events: auto;
  width: min(92vw, 25rem);
  isolation: isolate;
}
.crisis-halo {
  position: absolute; inset: -20% ; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 60, 60, 0.55), rgba(255, 40, 40, 0) 68%);
  transform: scale(calc(1 + var(--k) * 1.6));
  animation: crisisHalo var(--pulse) ease-in-out infinite;
  will-change: transform, opacity;
}
@keyframes crisisHalo {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 0.95; }
}
.crisis-inner {
  position: relative;
  background: linear-gradient(160deg, rgba(38, 8, 12, 0.98), rgba(20, 6, 10, 0.98));
  border: 2px solid var(--bad, #ef4444);
  border-radius: 14px; padding: 0.9rem 0.95rem 0.85rem;
  box-shadow: 0 18px 50px -12px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 90, 90, 0.25) inset;
}
.crisis-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.45rem; }
.crisis-icon { font-size: 1.25rem; }
.crisis-title { font-weight: 700; color: #ffd7d7; letter-spacing: 0.01em; }
.crisis-body { font-size: 0.82rem; line-height: 1.45; color: #f0c9c9; margin-bottom: 0.6rem; }
.crisis-meter {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 0.75rem; margin-bottom: 0.6rem;
  border-top: 1px dashed rgba(255, 120, 120, 0.35); padding-top: 0.45rem;
}
.crisis-lost { color: #ff9a9a; font-weight: 700; }
.crisis-fix { width: 100%; flex-direction: column; align-items: flex-start; gap: 0.15rem; text-align: left; }
.crisis-fix .choice-desc { opacity: 0.85; }
.crisis-cost { margin-top: 0.25rem; font-weight: 700; }

/* seul indice discret à l'écran : le liseré rouge qui s'intensifie */
.crisis-vignette {
  position: fixed; inset: 0; pointer-events: none; z-index: 55; opacity: 0;
  box-shadow: inset 0 0 min(18vw, 12rem) rgba(255, 40, 40, 0.85);
  transition: opacity 0.6s linear;
  animation: crisisVignette 2.4s ease-in-out infinite;
}
@keyframes crisisVignette { 0%, 100% { filter: brightness(0.75); } 50% { filter: brightness(1.25); } }

/* =====================================================================
   ANIMATIONS D'INACTIVITÉ — plein écran, jamais cliquables
   ===================================================================== */
.idle-fx {
  position: fixed; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 58; opacity: 0; display: none;
}
.idle-fx.on { display: block; opacity: 1; }
body.fx-invert .game-grid, body.fx-invert .topbar { filter: invert(1) hue-rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
  .idle-fx { display: none !important; }
  .crisis-halo, .crisis-vignette { animation: none; }
  .badge-build { animation: none; }
}

/* arriérés de salaire : compte à rebours avant les démissions */
.arrears-row { border-top: 1px dashed var(--bad); padding-top: 0.45rem; }
.arrears-row .num { font-size: 0.72rem; }

/* optimisations récurrentes : elles n'apparaissent que le jour où elles sont dues */
.item.optim { border-left: 2px solid var(--accent); }
.auto-choice.locked { opacity: 0.7; cursor: not-allowed; border-style: solid; border-color: var(--warn); }
.auto-choice.locked input { cursor: not-allowed; }

/* sélecteur de langue (topbar) */
.lang-select {
  appearance: none;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm, 8px);
  background: var(--bg-3);
  color: var(--text);
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  min-height: 34px;
}
.lang-select:hover { border-color: var(--accent); }
/* langue du navigateur non prise en charge : on signale le sélecteur */
.lang-select.attention {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--glow);
  animation: pulse 1.8s ease-in-out 4;
}
@media (max-width: 760px) { .lang-select { font-size: 0.75rem; max-width: 8.5rem; } }

/* grands programmes : recherche → mise au point → commande → déploiement */
.item.program { border-left: 2px solid var(--accent-2, var(--accent)); }
.program-bar { margin-top: 0.5rem; }
.program-bar .progress-fill { transition: width 0.4s linear; }

/* second marché : crypto */
.crypto-block { margin-top: 0.75rem; border-top: 1px dashed var(--line); padding-top: 0.6rem; }
.crypto-head { font-weight: 600; }

/* =====================================================================
   MODALES QUI DÉBORDENT — l'aide dépassait la hauteur de l'écran et
   devenait illisible : les modales sont désormais bornées à la fenêtre,
   avec un titre et des boutons fixes et un CORPS qui défile entre les deux.
   ===================================================================== */
.modal {
  display: flex;
  flex-direction: column;
  max-height: min(88vh, 100dvh - 2rem);
}
.modal-title { flex: 0 0 auto; }
.modal-choices { flex: 0 0 auto; }
/* le corps prend la place restante et défile de lui-même */
.modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
/* l'aide est longue : on lui laisse plus de largeur et un défilement confortable */
#help-overlay .modal { width: min(94vw, 780px); }
#help-overlay .modal-body:first-of-type { flex: 1 1 auto; }
/* deux corps (aide + succès) : ils partagent la zone défilante */
#help-overlay #achievements-body { flex: 0 0 auto; overflow: visible; }
#help-overlay .modal-scroll {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
}
@media (max-width: 760px) {
  .modal { max-height: min(92vh, 100dvh - 1rem); }
  #help-overlay .modal { width: 96vw; }
}

/* carte de l'univers (phase 3) : les régions virent au bleu à mesure
   qu'elles sont converties en énergie puis en tokens */
.universe-wrap { margin-bottom: 0.75rem; }
#universe-map {
  width: 100%; display: block; border-radius: 10px;
  background: radial-gradient(120% 90% at 50% 40%, #0a0f1d, #04060c 70%);
  border: 1px solid var(--line);
}
.universe-legend {
  display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap;
  margin-top: 0.4rem; font-size: 0.7rem; color: var(--text-mute);
}
.universe-legend .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.universe-legend .dot.raw  { background: #d8d2c4; box-shadow: 0 0 6px rgba(216,210,196,0.6); }
.universe-legend .dot.done { background: #3ba9ff; box-shadow: 0 0 8px rgba(59,169,255,0.9); }
.universe-legend .num { margin-left: auto; color: #7fd0ff; }

/* =====================================================================
   GRAPHES DE MARCHÉ — l'indice réellement calculé, pas une décoration.
   La ligne pointillée marque le niveau auquel le joueur est entré : l'aire
   entre les deux EST sa plus- ou moins-value.
   ===================================================================== */
.market-chart { margin-bottom: 0.55rem; }
.market-chart canvas {
  width: 100%; display: block; border-radius: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.15));
  border: 1px solid var(--line);
}
.market-legend {
  display: flex; align-items: center; gap: 0.45rem;
  margin-top: 0.3rem; font-size: 0.68rem; color: var(--text-mute);
}
.market-legend .num { color: var(--text); }
.market-entry { margin-left: auto; }

/* =====================================================================
   AUTOMATISATIONS — on VOIT la machine agir : la carte pulse à chaque
   action, et la ligne concernée clignote brièvement.
   ===================================================================== */
@keyframes autoFire {
  0%   { box-shadow: 0 0 0 0 var(--glow); border-color: var(--accent); }
  40%  { box-shadow: 0 0 18px 2px var(--glow); border-color: var(--accent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.item.fired { animation: autoFire 620ms var(--ease); }
@keyframes autoHit {
  0%   { background: var(--accent-soft); }
  100% { background: transparent; }
}
.item.auto-hit { animation: autoHit 520ms var(--ease); }
/* panneau Automatisation vide (aucune automatisation encore méritée) */
#panel-auto.empty { display: none; }
@media (prefers-reduced-motion: reduce) {
  .item.fired, .item.auto-hit { animation: none; }
}