/*
 * Thème « Registre du maître d'armes » (thème par défaut). Le livre que tient le maître d'armes : page
 * réglée, filets plutôt que cadres, rubrique rouge pour les actions, lapis pour les chiffres, petites
 * capitales pour les libellés, une manicule (☞) pour désigner. Aucun dégradé, aucune ombre, aucun arrondi.
 * Polices : Alegreya (titres), Alegreya SC (libellés), Alegreya Sans (texte et chiffres).
 */
:root[data-ui="registre"] {
  --paper: #eeebe3; --paper-2: #f4f2ec; --paper-3: #e3dfd5;
  --ink: #1f1c18; --ink-soft: #5e574c; --line: #c3baa8; --line-strong: #6f675a;
  --btn-top: transparent; --btn-bot: transparent; --icon: #1f1c18;
  --rub: #a3231a; --lap: #1f3f7a; --or: #8a6612; --on-rub: #f6f1e6;
  --grid: #d9d3c6; --tile: #e7e2d6; --blocked: #5c554b; --rough: #d6cdb9;
  --player: #2b56a6; --bot: #a3231a; --front: rgba(43, 86, 166, .14); --back: rgba(163, 35, 26, .12);
  --hp: #3d6b3f; --ap: #8a6612; --ep: #1f3f7a; --accent: #a3231a;
  --title: "Alegreya", Georgia, serif; --body: "Alegreya Sans", "Gill Sans", system-ui, sans-serif;
  --sc: "Alegreya SC", "Alegreya", Georgia, serif;
}
:root[data-ui="registre"][data-theme="dark"] {
    --paper: #191b1e; --paper-2: #1f2125; --paper-3: #15171a;
    --ink: #e7e1d3; --ink-soft: #a59f92; --line: #3d4046; --line-strong: #8a857a; --icon: #e7e1d3;
    --rub: #e46d5f; --lap: #98b5ee; --or: #d6b35c; --on-rub: #191b1e;
    --grid: #2c2f34; --tile: #23262a; --blocked: #0c0d0f; --rough: #34363a;
    --player: #7fa6ee; --bot: #e46d5f; --front: rgba(127, 166, 238, .16); --back: rgba(228, 109, 95, .14);
    --hp: #7fb07f; --ap: #d6b35c; --ep: #98b5ee; --accent: #e46d5f;
    color-scheme: dark;
}

:root[data-ui="registre"] {
  --act: var(--choix, var(--rub)); --on-act: var(--sur-choix, var(--on-rub));
  body { background: var(--paper); font-size: 15px; line-height: 1.45; }
  h1, h2, .title { font-family: var(--title); font-weight: 500; }
  h1 { font-size: 26px; }
  h2 { font-size: 19px; }
  h3 { font: 500 13px var(--sc); letter-spacing: .06em; color: var(--muted); }
  h3::after { border-top: 1px solid var(--line); }
  a { color: var(--act); text-underline-offset: 3px; }
  .muted { color: var(--muted); }
  .small { font-size: 13px; color: var(--muted); }
  :focus-visible { outline: 2px solid var(--lap); outline-offset: 2px; }
  ::selection { background: color-mix(in srgb, var(--lap) 25%, transparent); }

  /* Contrôles : coins droits, petites capitales ; l'action principale est rubriquée. */
  button, select, input { background: transparent; border: 1px solid var(--line-strong); border-radius: 0; }
  button { font: 500 14px var(--sc); letter-spacing: .03em; }
  button:hover:not(:disabled) { border-color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
  button:active:not(:disabled) { background: color-mix(in srgb, var(--ink) 12%, transparent); }
  button:disabled { opacity: .45; }
  button.primary, a.btn.primary { background: var(--act); border-color: var(--act); color: var(--on-act); }
  button.primary:hover:not(:disabled) { background: var(--act); border-color: var(--ink); }
  button.danger { color: var(--rub); border-color: var(--rub); }
  select { background: var(--paper-2); }
  input[type="text"], input[type="email"], input[type="number"] {
    background: transparent; border-width: 0 0 1px; border-color: var(--ink); padding-left: 2px; padding-right: 2px;
  }
  input[type="range"], input[type="checkbox"], input[type="radio"] { accent-color: var(--act); border: 0; }
  a.btn { color: inherit; border: 1px solid var(--line-strong); font: 500 14px var(--sc); letter-spacing: .03em; }
  button.link { background: none; border: 0; color: var(--act); text-decoration: underline; font: inherit; font-size: 14px; }
  button.mini, .small-btn { font-size: 12.5px; }

  /* Boutons-icônes : sans fond ; la page courante est une lettrine de lapis. */
  .ibtn { color: var(--icon); border: 1px solid transparent; }
  .ibtn:hover { border-color: var(--line-strong); background: none; }
  .ibtn[aria-current="page"] { background: var(--lap); color: var(--paper); border-color: var(--lap); }

  /* Pastilles de la barre du haut : des entrées de registre séparées par des filets. */
  .pills { gap: 0; }
  .pill { border-left: 1px solid var(--line); font: 500 14px var(--body); font-variant-numeric: tabular-nums; }
  .pill:first-child { border-left: 0; padding-left: 0; }
  .pill small { font: 500 12px var(--sc); letter-spacing: .05em; color: var(--muted); }
  .pill.warm { color: var(--or); }
  .pill.alert { color: var(--rub); }

  /* Panneaux : pas de cadre, un filet d'encre en tête. */
  .paper, .panel, .log, .card-pane { background: transparent; border-top: 1px solid var(--ink); }
  .notice.quiet { border: 0; }

  .topbar { background: var(--paper); border-bottom: 3px double var(--ink); }
  .avatar { border: 1px solid var(--ink); outline: 1px solid var(--ink); outline-offset: 2px; font: 700 24px var(--sc); color: var(--paper); background: var(--lap); }
  .hero-name { font: 500 21px/1.1 var(--title); color: var(--ink); }
  .hero-sub { font: 500 12.5px var(--sc); letter-spacing: .05em; color: var(--act); }
  .where .title { font-size: 18px; }
  .live { color: var(--hp); }
  .live.off { color: var(--muted); }
  .settings[open] > summary { border-color: var(--ink); }
  .settings-body { background: var(--paper-2); border: 1px solid var(--ink); }
  .settings-body label { font: 500 12.5px var(--sc); letter-spacing: .04em; color: var(--muted); }
  .settings-body select { color: var(--text); }
  .rail { border-right: 1px solid var(--line); padding-right: 12px; }
  .rail hr { border: 0; border-top: 1px solid var(--line); }
  @media (max-width: 760px) { .rail { border-right: 0; border-bottom: 1px solid var(--line); } }

  /* Plateau : un filet double, rien d'autre ; la carte porte la couleur. */
  .board { background: var(--paper-2); border: 3px double var(--ink); padding: 18px; }
  @media (max-width: 760px) { .board { padding: 8px; } }
  .hint { color: var(--muted); font-size: 13px; }
  .flash { color: var(--rub); font-style: italic; }
  .flash.ok { color: var(--hp); }

  .minimap { border: 1px solid var(--ink); outline: 1px solid var(--ink); outline-offset: 2px; }
  .mm-pulse { border: 2px solid var(--act); border-radius: 50%; }
  .portrait canvas { border: 1px solid var(--ink); outline: 1px solid var(--ink); outline-offset: 3px; background: var(--paper-2); }
  .portrait-name .title { font-size: 26px; }
  .quote { font-style: italic; color: var(--rub); border-left: 1px solid var(--rub); padding-left: 14px; font-size: 14px; }
  .message .block + .block { border-top: 1px dotted var(--line-strong); }
  .message .block div:first-child { font-weight: 700; }

  /* Onglets : des mots ; l'actif est souligné de rouge. */
  .side-tabs, .tabs { gap: 2px 18px; }
  .side-tabs button, .tabs button, .look {
    border: 0; border-bottom: 2px solid transparent; padding-left: 0; padding-right: 0; color: var(--muted); background: none;
  }
  .side-tabs button:hover:not(:disabled), .tabs button:hover:not(:disabled) { background: none; color: var(--ink); }
  .side-tabs button[aria-pressed="true"], .tabs button[aria-pressed="true"], .look[aria-pressed="true"] { color: var(--act); border-bottom-color: var(--act); }
  .side-tabs button { flex: none; }
  .sheet-tabs { border-bottom: 1px solid var(--line); }

  .who strong { font: 500 21px var(--title); }
  .tag { font: 500 12px var(--sc); letter-spacing: .04em; color: var(--paper); }

  /* Jauges : un filet gradué tous les 10 %, l'encre posée dessus. */
  .bar .label { font: 500 12.5px var(--sc); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
  .bar .track {
    height: 8px; background: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 10%) 0 100% / 100% 5px no-repeat,
      linear-gradient(var(--line), var(--line)) 0 100% / 100% 1px no-repeat;
    display: flex; align-items: flex-end;
  }
  .bar .fill { height: 4px; }
  .gauge, .wear { height: 5px; background: linear-gradient(var(--line), var(--line)) 0 100% / 100% 1px no-repeat; display: flex; align-items: flex-end; }
  .gauge i, .wear i { height: 3px; }
  .gauge i { background: var(--ink); }
  .wear i { background: var(--ink); }
  .wear i.low { background: var(--rub); }

  /* Caractéristiques : quatre colonnes séparées par des filets, chiffres en lapis. */
  .stats { gap: 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
  .stats div, .derived div { border-left: 1px solid var(--line); font: 500 12px var(--sc); letter-spacing: .04em; color: var(--muted); }
  .stats div:first-child, .derived div:first-child { border-left: 0; }
  .stats b { font: 500 22px/1.15 var(--title); color: var(--lap); }
  .derived { gap: 0; }
  .derived b { font: 500 18px var(--title); color: var(--lap); }
  .derived b.over { color: var(--rub); }

  /* Journal et rapports : une ligne par fait, la marge dit qui. */
  .log li, .reports li { border-left: 2px solid var(--line); }
  .log li.system { border-color: var(--act); color: var(--muted); font-style: italic; }
  .log li.attack, .reports li.attack { border-color: var(--lap); }
  .log li.defense, .reports li.defense { border-color: var(--rub); }
  .log li.move, .log li.energy, .log li.info, .reports li.move, .reports li.energy, .reports li.info { color: var(--muted); }
  .log details { font-size: 13px; color: var(--muted); }
  .log summary { color: var(--text); font-size: 14px; }
  .log .t { font-size: 12px; color: var(--muted); font-style: italic; }
  .reports { font-size: 14px; }

  .roster.faded { opacity: .75; }
  .chip { border: 1px solid var(--line); font: 500 14px var(--body); text-align: left; }
  .chip small { font-size: 12px; color: var(--muted); }
  .chip.on { border-color: var(--act); color: var(--act); }
  .chip.healing small { color: var(--rub); }
  .chip.map small { color: var(--hp); }
  table.train { font-size: 14px; }
  table.train td { border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
  table.train td:nth-child(2), table.train tr.muted td { color: var(--muted); }

  .arena-head strong { font: 500 20px var(--title); }
  .companies li { border-bottom: 1px solid var(--line); }
  .companies li.mine { color: var(--act); font-weight: 700; }
  .companies small { color: var(--muted); font-weight: 400; }
  .dot { border-radius: 50%; background: var(--act); }

  /* Bandeau de compagnie : titre de registre, or en chiffres. */
  .banner { border-top: 0; border-bottom: 3px double var(--ink); padding-left: 0; padding-right: 0; }
  .banner-name { font: 500 28px/1.1 var(--title); }
  .gold-pill { font: 500 20px var(--body); color: var(--or); font-variant-numeric: tabular-nums; padding-left: 0; }

  /* Mercenaires : des fiches du registre ; le choisi est désigné par la manicule. */
  .tiles { gap: 0 18px; }
  .tile { position: relative; background: none; border: 0; border-top: 1px solid var(--line-strong); font: inherit; letter-spacing: 0; padding-left: 0; padding-right: 0; }
  .tile:hover:not(:disabled) { background: none; border-top-color: var(--ink); }
  .tile.on { border-top: 2px solid var(--act); }
  .tile.on .tile-name { color: var(--act); }
  .tile.on .tile-name::before { content: "☞ "; }
  .tile-portrait { background: none; border: 1px solid var(--line); }
  .tile.on .tile-portrait { border-color: var(--ink); }
  .tile canvas.skin { border: 0; outline: 0; background: none; }
  .xp-badge { background: var(--act); color: var(--on-act); font: 500 12px var(--sc); letter-spacing: .04em; }
  .tile-name { font: 500 19px var(--title); }
  .tile-row { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
  .tile-row b { color: var(--text); font-weight: 500; }
  .tile-empty { border-top: 1px dashed var(--line-strong); color: var(--muted); }
  .tile-empty.on { border-top: 2px solid var(--act); color: var(--act); }
  .tile-plus { font: 400 34px var(--title); }

  /* Fiche : le nom ouvert par une lettrine de lapis. */
  .sheet-name { font: 500 30px/1.1 var(--title); }
  .sheet-name::first-letter { color: var(--paper); background: var(--lap); padding: 0 6px; margin-right: 2px; font-family: var(--sc); font-weight: 700; }
  .train-line { border-bottom: 1px solid var(--line); }
  .stat-line { font-size: 14px; font-variant-numeric: tabular-nums; }
  .stat-line > span:nth-child(3) { color: var(--lap); font-weight: 700; }
  .trait { font-size: 14px; }
  .trait.plus b { color: var(--hp); }
  .trait.minus b { color: var(--rub); }
  .trait.zero { color: var(--muted); }
  .slot { border-top: 1px solid var(--ink); }
  .slot-empty, .slot-taken { border-top-style: dashed; border-top-color: var(--line-strong); }

  canvas.skin { background: none; border: 1px solid var(--ink); outline: 1px solid var(--ink); outline-offset: 2px; }
  canvas.skin.big { outline-offset: 3px; }
  .status { font: 500 12.5px var(--sc); letter-spacing: .04em; color: var(--muted); }
  .status.map { color: var(--lap); }
  .status.ready { color: var(--hp); }
  .status.resting { color: var(--or); }
  .status.healing { color: var(--rub); }
  .warn { color: var(--rub); font-size: 13px; font-style: italic; }
  .gold { color: var(--or); font-weight: 700; }
  .worn { font-size: 14px; }
  .worn th, .worn td { border-bottom: 1px solid var(--line); }
  .worn thead th { font: 500 12.5px var(--sc); letter-spacing: .04em; color: var(--muted); border-bottom-color: var(--ink); }
  .item { border-bottom: 1px solid var(--line); }
  .item:last-child { border-bottom: 0; }

  /* Pages du compte : une page de garde de livre. */
  .brand .title { font: 400 44px/1 var(--title); color: var(--ink); }
  .brand .title::first-letter { color: var(--act); }
  .brand .small { font-style: italic; font-size: 15px; }
  .page .card { background: transparent; border-top: 3px double var(--ink); padding-left: 0; padding-right: 0; }
  .page .error { color: var(--rub); font-style: italic; }
  .page .ok { color: var(--hp); }
  .page dt { color: var(--muted); font: 500 13px var(--sc); letter-spacing: .04em; }
  .page footer { font-size: 13px; color: var(--muted); }
  .skip { border-top: 1px dotted var(--line-strong); }
  .nav { font: 500 14px var(--sc); letter-spacing: .04em; }
  .nav a { color: var(--muted); text-decoration: none; }
  .nav a[aria-current="page"] { color: var(--act); }
}