/*
 * Thème « Couleurs de compagnie » : l'héraldique comme système. L'interface est d'argent (blanc) et de
 * sable (noir) ; les deux émaux choisis par le joueur (data-accent, data-accent2) font la bannière, la
 * sélection et les actions. Champs plats à bords francs, onglets en flammes, mercenaires en bannières.
 * Les jauges gardent des couleurs fixes (sinople, azur, pourpre) qui ne dépendent pas des émaux.
 * Polices : Grenze Gotisch (nom de compagnie), Grenze (titres, chiffres), Alegreya Sans (texte).
 */
:root[data-ui="couleurs"] {
  --paper: #f4f3ef; --paper-2: #ffffff; --paper-3: #e4e2db;
  --ink: #18171b; --ink-soft: #55535a; --line: #cfccc4; --line-strong: #18171b;
  --btn-top: #fff; --btn-bot: #fff; --icon: #18171b;
  --sin: #2d7339; --pur: #6b3b74; --az: #24479a; --gu: #b1282e;
  --grid: #dcd9d1; --tile: #e9e6de; --blocked: #3a383e; --rough: #d6d1c3;
  --player: #24479a; --bot: #b1282e; --front: rgba(45, 115, 57, .16); --back: rgba(177, 40, 46, .12);
  --hp: #2d7339; --ap: #24479a; --ep: #6b3b74; --accent: #b1282e;
  --title: "Grenze", Georgia, serif; --gothic: "Grenze Gotisch", "Grenze", serif;
  --body: "Alegreya Sans", "Gill Sans", system-ui, sans-serif;
}
:root[data-ui="couleurs"][data-theme="dark"] {
    --paper: #141316; --paper-2: #1d1c20; --paper-3: #0f0e11;
    --ink: #efece4; --ink-soft: #a7a4ac; --line: #35333a; --line-strong: #efece4; --icon: #efece4;
    --btn-top: #1d1c20; --btn-bot: #1d1c20;
    --sin: #4f9a5b; --pur: #a070aa; --az: #6f93dc; --gu: #e0605c;
    --grid: #2a282e; --tile: #1f1e22; --blocked: #050506; --rough: #2f2d33;
    --player: #6f93dc; --bot: #e0605c; --front: rgba(79, 154, 91, .18); --back: rgba(224, 96, 92, .14);
    --hp: #4f9a5b; --ap: #6f93dc; --ep: #a070aa; --accent: #e0605c;
    color-scheme: dark;
}

:root[data-ui="couleurs"] {
  /* Émaux de la compagnie : or et gueules par défaut. */
  --t1: var(--choix, #d6a326); --on1: var(--sur-choix, #18171b);
  --t2: var(--choix2, #b1282e); --on2: var(--sur-choix2, #fbf6ee);
  --act: var(--t1); --on-act: var(--on1);

  body { background: var(--paper); font-size: 15px; }
  h1, h2, .title { font-family: var(--title); font-weight: 700; }
  h1 { font-size: 28px; }
  h2 { font-size: 20px; }
  h3 { font: 600 13px var(--title); text-transform: uppercase; letter-spacing: .1em; color: var(--ink); }
  h3::after { border-top: 3px solid var(--ink); }
  a { color: var(--ink); text-decoration-color: var(--t2); text-decoration-thickness: 2px; text-underline-offset: 3px; }
  .muted { color: var(--muted); }
  .small { font-size: 13px; color: var(--muted); }
  :focus-visible { outline: 3px solid var(--t2); outline-offset: 2px; }

  /* Boutons : aplats, sans ombre ni arrondi. */
  button, select, input { background: var(--paper-2); border: 2px solid var(--ink); border-radius: 0; }
  button { font: 600 15px var(--title); }
  button:hover:not(:disabled) { background: var(--paper-3); }
  button:active:not(:disabled) { translate: 0 1px; }
  button:disabled { opacity: .45; }
  button.primary, a.btn.primary { background: var(--t1); border-color: var(--t1); color: var(--on1); }
  button.primary:hover:not(:disabled) { background: var(--t1); border-color: var(--ink); }
  button.danger { background: var(--gu); border-color: var(--gu); color: #fbf6ee; }
  input[type="text"], input[type="email"], input[type="number"] { background: var(--paper-2); }
  input[type="range"], input[type="checkbox"], input[type="radio"] { accent-color: var(--t2); border: 0; }
  a.btn { color: var(--ink); background: var(--paper-2); border: 2px solid var(--ink); font: 600 15px var(--title); }
  button.link { background: none; border: 0; color: var(--ink); text-decoration: underline 2px var(--t2); font: inherit; }
  button.mini, .small-btn { font-size: 13px; }

  .ibtn { color: var(--icon); background: none; border: 2px solid transparent; }
  .ibtn:hover:not(:disabled) { background: var(--paper-3); }
  .ibtn[aria-current="page"] { background: var(--t2); color: var(--on2); }

  .pill { background: color-mix(in srgb, var(--on1) 10%, transparent); color: var(--on1); font: 600 15px var(--title); }
  .pill small { font: 500 12px var(--body); opacity: .8; }

  /* Panneaux : champs plats, un « chef » (bande du haut) à l'émail de la compagnie. */
  .paper, .panel, .log, .card-pane { background: var(--paper-2); border-top: 8px solid var(--t1); }
  .notice.quiet { background: none; border: 0; }

  /* La bannière de la compagnie couvre toute la barre du haut. */
  .topbar { background: var(--t1); color: var(--on1); }
  .topbar .ibtn { color: var(--on1); }
  .topbar .muted, .topbar .small, .topbar .hero-sub { color: var(--on1); opacity: .85; }
  .avatar { background: var(--t2); color: var(--on2); border: 3px solid var(--on1); font: 600 26px var(--gothic); clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%); }
  .hero-name { font: 600 26px/1 var(--gothic); }
  .hero-sub { font: 600 13px var(--title); text-transform: uppercase; letter-spacing: .08em; }
  .where .title { font-size: 20px; }
  .live { color: var(--on1); }
  .settings-body { background: var(--paper-2); border: 2px solid var(--ink); color: var(--ink); }
  .settings-body label { font: 600 13px var(--title); color: var(--muted); }
  .settings-body select { color: var(--text); }
  .rail { background: var(--ink); }
  .rail .ibtn { color: var(--paper); }
  .rail .ibtn:hover:not(:disabled) { background: color-mix(in srgb, var(--paper) 15%, transparent); }
  .rail .ibtn[aria-current="page"] { background: var(--t2); color: var(--on2); }
  .rail hr { border: 0; border-top: 2px solid color-mix(in srgb, var(--paper) 30%, transparent); }

  .board { background: var(--paper-2); border: 3px solid var(--ink); border-top: 10px solid var(--t1); padding: 16px; }
  @media (max-width: 760px) { .board { padding: 8px; } }
  .hint { color: var(--muted); font-size: 13px; }
  .flash { color: var(--gu); font-weight: 700; }
  .flash.ok { color: var(--sin); }

  .minimap { border: 3px solid var(--ink); }
  .mm-pulse { border: 3px solid var(--t2); border-radius: 50%; }
  .portrait canvas, canvas.skin { background: var(--paper); border: 3px solid var(--ink); }
  .portrait-name .title { font-size: 28px; }
  .quote { background: var(--paper-3); border-left: 4px solid var(--t2); font-size: 14px; }
  .message .block + .block { border-top: 2px solid var(--line); }
  .message .block div:first-child { font-weight: 700; }

  /* Onglets en flammes ; l'actif prend le second émail. */
  .side-tabs, .tabs { gap: 4px; }
  .side-tabs button, .tabs button, .look {
    border: 0; padding-right: 26px; background: var(--paper-3); color: var(--ink);
    clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 0 100%);
  }
  .side-tabs button[aria-pressed="true"], .tabs button[aria-pressed="true"], .look[aria-pressed="true"] { background: var(--t2); color: var(--on2); }
  .sheet-tabs { border-bottom: 3px solid var(--ink); }

  .who strong { font: 700 24px var(--title); }
  .tag { font: 600 12px var(--title); color: #fff; }

  /* Jauges larges coupées en quarts. */
  .bar .label { font: 600 13px var(--title); text-transform: uppercase; letter-spacing: .06em; }
  .bar .track, .gauge, .wear { position: relative; background: var(--grid); height: 12px; }
  .bar .track::after, .gauge::after, .wear::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: repeating-linear-gradient(90deg, transparent 0 calc(25% - 3px), var(--paper-2) calc(25% - 3px) 25%);
  }
  .gauge, .wear { height: 8px; }
  .gauge i { background: var(--ink); }
  .wear i { background: var(--sin); }
  .wear i.low { background: var(--gu); }

  .stats div, .derived div { border: 2px solid var(--ink); background: var(--paper-2); font: 600 12px var(--title); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
  .stats b, .derived b { font: 700 22px var(--title); color: var(--ink); letter-spacing: 0; }
  .derived b.over { color: var(--gu); }

  .log li, .reports li { border-left: 4px solid var(--line); }
  .log li.system { border-color: var(--t1); color: var(--muted); }
  .log li.attack, .reports li.attack { border-color: var(--az); }
  .log li.defense, .reports li.defense { border-color: var(--gu); }
  .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); }
  .reports { font-size: 14px; }

  .roster.faded { opacity: .75; }
  .chip { background: var(--paper-3); border: 0; font: 600 15px var(--title); }
  .chip small { font: 500 12px var(--body); color: var(--muted); }
  .chip.on { background: var(--t1); color: var(--on1); }
  .chip.on small, .chip.on.map small { color: inherit; opacity: .85; }
  .chip.healing small { color: var(--gu); }
  .chip.map small { color: var(--sin); }
  table.train { font-size: 14px; }
  table.train td { border-bottom: 1px solid var(--line); }
  table.train td:nth-child(2), table.train tr.muted td { color: var(--muted); }

  .arena-head strong { font: 700 22px var(--title); }
  .companies li { background: var(--paper-3); }
  .companies li.mine { background: var(--t1); color: var(--on1); font-weight: 700; }
  .companies li.mine small { color: inherit; }
  .companies small { color: var(--muted); font-weight: 400; }
  .dot { background: var(--t2); border-radius: 0; }

  /* Bandeau : nom de compagnie en gothique, sur son émail. */
  .banner { background: var(--t1); color: var(--on1); border-top: 0; }
  .banner .small, .banner .muted { color: var(--on1); opacity: .85; }
  .banner a:not(.btn) { color: var(--on1); }
  .banner a.btn.primary, .banner button.primary { background: var(--t2); border-color: var(--t2); color: var(--on2); }
  .banner-name { font: 600 34px/1.05 var(--gothic); }
  .gold-pill { background: var(--paper-2); color: var(--ink); font: 700 18px var(--title); }

  /* Mercenaires : des bannières à queue d'aronde ; la choisie prend l'émail de la compagnie. */
  .tile {
    background: var(--paper-3); border: 0; font: inherit; text-align: left; padding-bottom: 28px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 16px), 0 100%);
  }
  .tile:hover:not(:disabled) { background: var(--line); }
  .tile.on { background: var(--t1); color: var(--on1); }
  .tile.on .small, .tile.on .tile-row, .tile.on .tile-row b, .tile.on .status { color: inherit; }
  .tile-portrait { background: var(--paper); border: 3px solid var(--ink); }
  .tile canvas.skin { border: 0; background: none; }
  .xp-badge { background: var(--t2); color: var(--on2); font: 700 12px var(--title); }
  .tile-name { font: 700 20px var(--title); }
  .tile-row { font-size: 13px; color: var(--muted); }
  .tile-row b { color: var(--text); }
  .tile-empty { background: none; clip-path: none; padding-bottom: 10px; outline: 3px dashed var(--ink); outline-offset: -3px; color: var(--muted); }
  .tile-plus { font: 600 38px var(--gothic); }

  .sheet-name { font: 700 32px/1.05 var(--title); }
  .train-line { border-bottom: 1px solid var(--line); }
  .stat-line { font-size: 14px; }
  .stat-line > span:nth-child(3) { font: 700 15px var(--title); }
  .trait { font-size: 14px; }
  .trait.plus b { color: var(--sin); }
  .trait.minus b { color: var(--gu); }
  .trait.zero { color: var(--muted); }
  .slot { background: var(--paper-2); border: 2px solid var(--ink); }
  .slot-empty, .slot-taken { border-style: dashed; background: none; }

  .status { font: 600 12.5px var(--title); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
  .status.map { color: var(--az); }
  .status.ready { color: var(--sin); }
  .status.resting { color: var(--pur); }
  .status.healing { color: var(--gu); }
  .warn { color: var(--gu); font-size: 13px; font-weight: 700; }
  .gold { font-weight: 700; }
  .worn { font-size: 14px; }
  .worn th, .worn td { border-bottom: 1px solid var(--line); }
  .worn thead th { font: 600 12.5px var(--title); text-transform: uppercase; letter-spacing: .05em; color: var(--ink); border-bottom: 3px solid var(--ink); }
  .item { border-bottom: 1px solid var(--line); }
  .item:last-child { border-bottom: 0; }

  .brand .title { font: 600 54px/1 var(--gothic); color: var(--ink); }
  .brand .small { font-style: italic; font-size: 15px; }
  .page .card { background: var(--paper-2); border-top: 10px solid var(--t1); }
  .page .error { color: var(--gu); font-weight: 700; }
  .page .ok { color: var(--sin); }
  .page dt { color: var(--muted); font: 600 13px var(--title); }
  .page footer { font-size: 13px; color: var(--muted); }
  .skip { border-top: 2px dashed var(--line); }
  .nav { font: 600 15px var(--title); }
  .nav a { color: var(--muted); text-decoration: none; }
  .nav a[aria-current="page"] { color: var(--ink); text-decoration: underline 3px var(--t2); }
}