/* ── Reset & base ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:        #0e0e12;
  --bg2:       #16161d;
  --bg3:       #1e1e28;
  --border:    #2a2a3a;
  --text:      #d0d0e0;
  --text-dim:  #666680;
  --text-head: #ffffff;
  --active:    #22c55e;
  --sleeping:  #6b7280;
  --frozen:    #1f2937;
  --danger:    #ef4444;
  --pc:        #60a5fa;
  --accent:    #7c3aed;
  --new:       #fbbf24;
  font-family: "JetBrains Mono", "Fira Mono", "Cascadia Code", monospace;
  font-size: 13px;
  color: var(--text);
  background: var(--bg);
}

a { color: inherit; text-decoration: none; }

/* ── Header ────────────────────────────────────────────────────────────── */
header {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: .6rem 1.2rem;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
}
.logo { color: var(--text-head); font-weight: 700; letter-spacing: .08em; }
nav a {
  color: var(--text-dim);
  font-size: .85rem;
  padding: .2rem .5rem;
  border-radius: 4px;
  transition: color .15s;
}
nav a:hover { color: var(--text); }

/* ── Index page ────────────────────────────────────────────────────────── */
.page-header { padding: 1.5rem 1.2rem .8rem; }
.page-header h1 { font-size: 1.1rem; color: var(--text-head); }

.instance-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  padding: 0 1.2rem 1.5rem;
}
.instance-card {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  padding: .9rem 1.2rem;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  min-width: 200px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.instance-card:hover {
  border-color: var(--accent);
  background: var(--bg3);
}
.inst-name { color: var(--text-head); font-weight: 600; }
.inst-meta { display: flex; gap: .4rem; flex-wrap: wrap; }
.inst-id   { color: var(--text-dim); font-size: .8rem; }

.empty-state {
  padding: 2rem 1.2rem;
  color: var(--text-dim);
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.empty-state code {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: .3rem .6rem;
  color: var(--text);
}

/* ── Badges ─────────────────────────────────────────────────────────────── */
.badge {
  font-size: .72rem;
  padding: .15rem .45rem;
  border-radius: 3px;
  font-weight: 600;
  letter-spacing: .04em;
}
.badge-tick    { background: #1e2440; color: #93c5fd; }
.badge-unit    { background: #1e2440; color: var(--text-dim); }
.badge-active  { background: #14532d; color: var(--active); }
.badge-sleeping{ background: #1f2937; color: var(--sleeping); }
.badge-frozen  { background: #111827; color: #374151; }
.badge-because { background: #2d1d4a; color: #a78bfa; }
.badge-danger  { background: #450a0a; color: #fca5a5; }

/* ── Toolbar ─────────────────────────────────────────────────────────────── */
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .5rem 1rem;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  gap: 1rem;
  flex-wrap: wrap;
}
.toolbar-left  { display: flex; align-items: center; gap: .8rem; }
.toolbar-center{ display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.toolbar-right { display: flex; align-items: center; gap: .6rem; }

.inst-title    { color: var(--text-head); font-weight: 700; font-size: .95rem; }
.tick-counter  { color: var(--text-dim); font-size: .9rem; }
.tick-counter strong { color: var(--new); }
.tick-unit     { color: var(--text-dim); font-size: .8rem; }

.stat          { font-size: .8rem; color: var(--text-dim); }
.stat.active   { color: var(--active); }
.stat.sleeping { color: var(--sleeping); }
.stat.frozen   { color: #374151; }
.stat.chars    { color: var(--pc); }

#btn-tick {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: .4rem .9rem;
  font-family: inherit;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s;
}
#btn-tick:hover   { opacity: .85; }
#btn-tick:disabled{ opacity: .4; cursor: default; }

/* ── Debug layout ───────────────────────────────────────────────────────── */
.debug-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 0;
  height: calc(100vh - 80px);
  overflow: hidden;
}

/* ── Map panel ──────────────────────────────────────────────────────────── */
.map-panel {
  overflow: auto;
  padding: 1rem;
  background: var(--bg);
}
#world-svg { display: block; }

/* ── Zone shapes ────────────────────────────────────────────────────────── */
.zone { cursor: pointer; }

.zone-active  .zone-shape { fill: #052e16; stroke: var(--active); stroke-width: 2; }
.zone-sleeping .zone-shape{ fill: #111827; stroke: #374151;      stroke-width: 1; }
.zone-frozen  .zone-shape { fill: #080810; stroke: #1f2937;      stroke-width: 1; }

.zone:hover .zone-shape   { stroke-width: 2.5; filter: brightness(1.3); }
.zone.selected .zone-shape{ stroke: var(--pc); stroke-width: 3; }

.zone-label {
  fill: var(--text);
  font-family: inherit;
  font-size: 9px;
  text-anchor: middle;
  pointer-events: none;
  dominant-baseline: middle;
}
.zone-active  .zone-label { fill: #bbf7d0; }
.zone-sleeping .zone-label{ fill: #6b7280; }
.zone-frozen  .zone-label { fill: #1f2937; }
.zone-label-sm { font-size: 7.5px; }

/* badge nb personnages */
.char-badge { fill: var(--pc); }
.char-count {
  fill: #fff;
  font-size: 8px;
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
}

/* point PJ */
.pc-dot { fill: var(--pc); }

/* danger dot */
.danger-dot      { fill: #f97316; }
.danger-dot.danger-4 { fill: #ef4444; }
.danger-dot.danger-5 { fill: #dc2626; }

/* lignes de connexion */
.conn-line {
  stroke: #1e2030;
  stroke-width: 1;
  stroke-dasharray: 3 4;
}

/* ── Side panel ─────────────────────────────────────────────────────────── */
.side-panel {
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--border);
  overflow: hidden;
}
.panel-block {
  flex: 1;
  overflow-y: auto;
  padding: .8rem;
  border-bottom: 1px solid var(--border);
}
.panel-block:last-child { border-bottom: none; }

.panel-title {
  font-size: .75rem;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: .6rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.zone-info-name {
  color: var(--text-head);
  font-weight: 700;
  font-size: .95rem;
  margin-bottom: .4rem;
}
.zone-badges { display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: .6rem; }

.entity-section {
  font-size: .72rem;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: .6rem 0 .3rem;
}
.entity-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: .3rem;
  padding: .2rem 0;
  border-bottom: 1px solid var(--border);
  font-size: .8rem;
}
.pc-row  .e-name { color: var(--pc); }
.npc-row .e-name { color: var(--text); }
.e-status        { font-size: .7rem; color: var(--text-dim); }
.e-status.alive  { color: var(--active); }
.e-status.dead   { color: var(--danger); }
.e-attrs         { color: var(--text-dim); font-size: .7rem; }
.more            { color: var(--text-dim); font-size: .75rem; padding-top: .3rem; }
.empty-hint      { color: var(--text-dim); font-size: .8rem; padding: .3rem 0; }

/* ── Event log ──────────────────────────────────────────────────────────── */
#event-log { flex: 1.4; }
#event-list { display: flex; flex-direction: column; gap: 1px; }

.event-row {
  display: grid;
  grid-template-columns: 36px 90px 1fr;
  gap: .3rem;
  padding: .2rem 0;
  border-bottom: 1px solid #0e0e16;
  font-size: .75rem;
  transition: background .3s;
}
.new-event { background: #1a1508; }

.ev-tick     { color: var(--text-dim); }
.ev-type     { color: #a78bfa; font-weight: 600; }
.ev-desc     { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.event-npc_move       .ev-type { color: #60a5fa; }
.event-scenario_trigger .ev-type { color: #f59e0b; }

/* SSE dot */
.sse-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #374151;
  display: inline-block;
  margin-left: auto;
}
.sse-dot.sse-on { background: var(--active); box-shadow: 0 0 4px var(--active); }

/* ── Auto-tick speed buttons ────────────────────────────────────────────── */
.autotick-group { display: flex; gap: 2px; }
.btn-speed {
  background: var(--bg3);
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: .3rem .55rem;
  font-family: inherit;
  font-size: .8rem;
  cursor: pointer;
  transition: background .1s, color .1s;
}
.btn-speed:hover { background: var(--bg2); color: var(--text); }
.btn-speed-active { background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; }

.run-n-group { display: flex; gap: 4px; align-items: center; }
.run-n-input {
  width: 56px;
  background: var(--bg3);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: .3rem .4rem;
  font-family: inherit;
  font-size: .8rem;
}
.btn-secondary {
  background: var(--bg3);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: .35rem .8rem;
  font-family: inherit;
  font-size: .82rem;
  cursor: pointer;
  transition: background .1s;
}
.btn-secondary:hover { background: var(--bg2); }

/* ── Spawn bar ───────────────────────────────────────────────────────────── */
.spawn-bar {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .4rem 1rem;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.spawn-label { font-size: .78rem; color: var(--text-dim); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.sp-select {
  background: var(--bg3);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: .28rem .5rem;
  font-family: inherit;
  font-size: .8rem;
}
.sp-count {
  width: 52px;
  background: var(--bg3);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: .28rem .4rem;
  font-family: inherit;
  font-size: .8rem;
}
.form-status { font-size: .78rem; color: var(--active); }

/* ── New instance panel (index) ──────────────────────────────────────────── */
.new-instance-panel {
  margin: 1.2rem 1.2rem 0;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  max-width: 480px;
}
.panel-title-bar {
  padding: .5rem .9rem;
  font-size: .75rem;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .08em;
  border-bottom: 1px solid var(--border);
}
.new-instance-form { padding: .8rem .9rem; display: flex; flex-direction: column; gap: .5rem; }
.form-row { display: flex; align-items: center; gap: .6rem; }
.form-row label { width: 90px; font-size: .8rem; color: var(--text-dim); flex-shrink: 0; }
.form-row input, .form-row select {
  flex: 1;
  background: var(--bg3);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: .3rem .5rem;
  font-family: inherit;
  font-size: .82rem;
}
.form-row-submit { margin-top: .3rem; }
.btn-primary {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: .4rem 1rem;
  font-family: inherit;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s;
}
.btn-primary:hover    { opacity: .85; }
.btn-primary:disabled { opacity: .4; cursor: default; }

/* ── Heure jour/nuit (toolbar) ───────────────────────────────────────────── */
.time-display {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .15rem .55rem;
  border-radius: 4px;
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--border);
  background: var(--bg3);
  margin-left: .4rem;
  transition: background .4s, color .4s;
}
.time-day   { background: #1a2a1a; color: #86efac; border-color: #166534; }
.time-night { background: #1a1a2e; color: #a5b4fc; border-color: #3730a3; }

/* ── Event types jour/nuit ───────────────────────────────────────────────── */
.event-nightfall .ev-type { color: #818cf8; }
.event-dawn      .ev-type { color: #fbbf24; }

/* ── Archetype badge + HP (zone info panel) ──────────────────────────────── */
.badge-arch { background: #1a1a2e; color: #818cf8; }
.e-hp       { font-size: .7rem; color: var(--active); margin-left: .3rem; }

/* ── Event types supplémentaires ─────────────────────────────────────────── */
.event-combat          .ev-type { color: #f87171; }
.event-death           .ev-type { color: #dc2626; }
.event-flee            .ev-type { color: #fb923c; }
.event-voyageur_arrive .ev-type { color: #34d399; }
.event-escort_missing  .ev-type { color: #fbbf24; }

/* ── Debug layout ajusté (toolbar + spawn bar = ~112px) ──────────────────── */
.debug-layout { height: calc(100vh - 112px); }

/* ── Instance card actions ───────────────────────────────────────────────── */
.inst-actions {
  display: flex;
  gap: .4rem;
  margin-top: .4rem;
  flex-wrap: wrap;
}
.inst-action-btn {
  font-family: inherit;
  font-size: .72rem;
  padding: .18rem .5rem;
  border-radius: 3px;
  border: 1px solid var(--border);
  background: var(--bg3);
  color: var(--text-dim);
  cursor: pointer;
  transition: color .1s, background .1s;
  text-decoration: none;
}
.inst-action-btn:hover       { color: var(--text); background: var(--bg2); }
.inst-action-danger          { border-color: #450a0a; color: #fca5a5; }
.inst-action-danger:hover    { background: #450a0a; color: #fff; }

/* ── Factions page ───────────────────────────────────────────────────────── */
.factions-layout {
  display: flex;
  gap: 1rem;
  padding: 0 1.2rem 1.5rem;
  flex-wrap: wrap;
}
.factions-col        { flex: 0 0 280px; }
.factions-col-wide   { flex: 1; min-width: 300px; }

.faction-card {
  padding: .6rem .9rem;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: .4rem;
  cursor: pointer;
  transition: border-color .15s;
}
.faction-card:hover  { border-color: var(--accent); }
.faction-card.selected { border-color: var(--pc); }
.faction-name        { font-weight: 600; color: var(--text-head); font-size: .9rem; }
.faction-ideology    { font-size: .72rem; color: var(--text-dim); display: block; margin-top: .2rem; }
.faction-meta        { display: flex; gap: .4rem; margin-top: .3rem; flex-wrap: wrap; }

/* Matrice relations */
.rel-table {
  border-collapse: collapse;
  font-size: .78rem;
  width: 100%;
}
.rel-table th, .rel-table td {
  border: 1px solid var(--border);
  padding: .3rem .5rem;
  text-align: center;
  white-space: nowrap;
}
.rel-table th   { background: var(--bg3); color: var(--text-dim); font-size: .72rem; }
.rel-label      { background: var(--bg3); color: var(--text-dim); text-align: left; font-size: .72rem; }
.rel-self       { background: var(--bg); color: #2a2a3a; }
.rel-cell       { cursor: pointer; transition: background .1s; }
.rel-cell:hover { filter: brightness(1.3); }
.rel-neutral    { background: var(--bg2); color: var(--text-dim); }
.rel-allied     { background: #14532d; color: var(--active); }
.rel-hostile    { background: #450a0a; color: #fca5a5; }

/* Tableau PNJs */
.char-filter-bar { display: flex; gap: .5rem; margin-bottom: .6rem; flex-wrap: wrap; }
.char-table { width: 100%; border-collapse: collapse; font-size: .78rem; }
.char-table th, .char-table td {
  border-bottom: 1px solid var(--border);
  padding: .28rem .5rem;
  text-align: left;
}
.char-table th { color: var(--text-dim); font-size: .72rem; font-weight: 600; }
.char-row:hover { background: var(--bg2); }
.hp-cell        { color: var(--active); font-size: .75rem; }

/* ── Scrollbar ──────────────────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb { background: #2a2a3a; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #3a3a50; }