/* Grimoire — dark fantasy, mono-thème. Porté de web/app/globals.css (sans Tailwind). */

:root {
  --bg: #15100b;
  --bg2: #1d1610;
  --panel: #221a12;
  --panel2: #2b2118;
  --panel3: #332616;

  --ink: #e9dcc2;
  --ink-dim: #a8977a;
  --ink-faint: #6d5f4b;

  --line: #3a2e21;
  --line2: #4a3b2a;

  --gold: #f2c85a;
  --gold-deep: #c9982f;

  --sacre: #f2c85a;
  --prot: #7aa6cf;
  --vind: #d0603f;

  --t-objet: #f2c85a;
  --t-ennemi: #d0603f;
  --t-pnj: #7aa6cf;
  --t-event: #9b8cf0;
  --t-lieu: #7fb069;

  --hp: #cf6b5a;
  --mana: #7aa6cf;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "SFMono-Regular", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  background:
    radial-gradient(1200px 700px at 50% -10%, #2a1f12, transparent 55%),
    radial-gradient(900px 600px at 85% 110%, #241a2a, transparent 50%),
    var(--bg);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* ---- primitives partagées (mêmes noms que web/) ---- */
.eyebrow {
  font-family: var(--serif);
  text-transform: uppercase;
  letter-spacing: 0.4em;
  font-size: 11.5px;
  color: var(--gold);
}
.display {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #fff4d6, #e0b24d);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sec-title {
  font-family: var(--serif);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 11.5px;
  color: var(--gold);
  font-weight: 600;
}
.card {
  background: linear-gradient(180deg, var(--panel), var(--bg2));
  border: 1px solid var(--line);
  border-radius: 14px;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--line2);
  color: var(--ink-dim);
  background: #140e08;
}
.reveal {
  border: 1px solid var(--gold-deep);
  background: linear-gradient(180deg, #33260f, #1c140b);
  box-shadow: 0 0 26px -10px var(--gold);
}
.btn-gold, .btn-ghost {
  cursor: pointer;
  font-family: var(--serif);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 12px;
  padding: 10px 14px;
  border-radius: 9px;
}
.btn-gold {
  border: 1px solid var(--gold-deep);
  background: linear-gradient(180deg, #f3cd63, #c99327);
  color: #241705;
  font-weight: 600;
}
.btn-ghost {
  border: 1px solid var(--line2);
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  color: var(--ink-dim);
}
.tabular { font-variant-numeric: tabular-nums; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 6px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---- coquille (étape 1) ---- */
.bar {
  display: grid;
  grid-template-columns: auto 64px 1fr 120px;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--panel), var(--bg2));
}
.brand { font-family: var(--serif); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); font-size: 13px; }
.chip.role { text-align: center; font-size: 11px; padding: 2px 0; border: 1px solid var(--line2); border-radius: 999px; color: var(--ink-dim); }
.bar-title { font-family: var(--serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.net { display: flex; align-items: center; justify-content: flex-end; gap: 6px; font-size: 12px; color: var(--ink-dim); white-space: nowrap; }
.net i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-faint); flex: none; }
.net-open i { background: var(--t-lieu); }
.net-closed i, .net-connecting i { background: var(--gold); }
.net-revoked i { background: var(--hp); }

.page { max-width: 760px; margin: 0 auto; padding: 16px; }
.tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.tab { min-width: 96px; min-height: 44px; cursor: pointer; border: 1px solid var(--line2); border-radius: 9px; background: var(--panel); color: var(--ink-dim); font-family: var(--serif); }
.tab.on { border-color: var(--gold-deep); color: var(--gold); }

.chars { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.char {
  display: grid;
  grid-template-columns: 1fr repeat(3, 64px);
  gap: 8px;
  align-items: center;
  padding: 12px 14px;
  background: linear-gradient(180deg, var(--panel), var(--bg2));
  border: 1px solid var(--line);
  border-radius: 14px;
}
button.char { width: 100%; font: inherit; color: inherit; text-align: left; cursor: pointer; }
button.char:hover { border-color: var(--gold-deep); }
.char-id { min-width: 0; display: flex; flex-direction: column; }
.char-id b { font-family: var(--serif); font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.char-id small { color: var(--ink-dim); font-size: 12px; }
.vital { display: flex; flex-direction: column; align-items: center; font-variant-numeric: tabular-nums; }
.vital span { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-faint); }
.vital b { font-size: 16px; }
.vital small { color: var(--ink-faint); font-weight: 400; }
.vital.hp b { color: var(--hp); }
.vital.mana b { color: var(--mana); }
.vital.def b { color: var(--prot); }
.empty { color: var(--ink-dim); }

.stage { min-height: calc(100vh - 52px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 16px; }
.stage h1 { font-family: var(--serif); color: var(--gold); letter-spacing: 0.06em; margin: 0 0 8px; }
.stage p { color: var(--ink-dim); max-width: 40ch; }

@media (max-width: 480px) {
  .bar { grid-template-columns: 64px 1fr 104px; }
  .brand { display: none; }
  .char { grid-template-columns: 1fr repeat(3, 52px); padding: 10px 12px; }
}