/*
 * Thème « Livrée de la compagnie » (proposition de thème de base, en attente de validation).
 * Suite de « Couleurs de compagnie » : l'interface porte la livrée de la compagnie, ses deux émaux
 * (data-accent, data-accent2), avec le vocabulaire du héraut d'armes :
 *   - champ d'argent damassé (diaprure en losanges, à peine visible) ;
 *   - bannière du haut frangée de cloches de vair au second émail ;
 *   - panneaux coiffés d'un chef denché (bande dentelée) au premier émail ;
 *   - mercenaires en gonfanons à trois queues, le choisi chargé d'un chef componé ;
 *   - onglets en pennons, caractéristiques en écus, jauges en billettes, titres soulignés d'un lambel ;
 *   - rail en hampe de sable, page active en écu.
 * Aucun dessin n'est une image en couleur : les formes sont des masques, la couleur vient des variables,
 * donc tout suit les émaux choisis et le mode sombre. Rien d'animé (fluidité).
 * Polices : Grenze Gotisch (compagnie), Alegreya (titres), Alegreya SC (rubriques), Alegreya Sans (texte).
 */
:root[data-ui="livree"] {
  --paper: #f3f1ea; --paper-2: #fdfcf8; --paper-3: #e7e3d8;
  --ink: #1d1a17; --ink-soft: #5b564f; --line: #d3cdbf; --line-strong: #1d1a17;
  --btn-top: #fdfcf8; --btn-bot: #fdfcf8; --icon: #1d1a17;
  --sin: #2d7339; --pur: #6b3b74; --az: #24479a; --gu: #a8262b;
  --grid: #dcd7ca; --tile: #ebe7dc; --blocked: #3b3631; --rough: #d8d0bc;
  --player: #24479a; --bot: #a8262b; --front: rgba(45, 115, 57, .16); --back: rgba(168, 38, 43, .12);
  --hp: #2d7339; --ap: #24479a; --ep: #6b3b74; --accent: #a8262b;
  --title: "Alegreya", Georgia, serif; --sc: "Alegreya SC", "Alegreya", Georgia, serif;
  --gothic: "Grenze Gotisch", "Alegreya", serif;
  --body: "Alegreya Sans", "Gill Sans", system-ui, sans-serif;
  --hampe: #1d1a17; --sur-hampe: #f3f1ea; --gonfanon: #e7e3d8; --gonfanon-hover: #d3cdbf;
  /* Émaux : azur et or par défaut (« France ancien »), remplacés par ceux du joueur. */
  --t1: var(--choix, #24479a); --on1: var(--sur-choix, #f7f4ec);
  --t2: var(--choix2, #d6a326); --on2: var(--sur-choix2, #1d1a17);
  /* Diaprure : réseau de losanges pointés, à 5 % d'encre. */
  --diapre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M14 1 27 14 14 27 1 14Z' fill='none' stroke='%231d1a17' stroke-opacity='.05'/%3E%3Ccircle cx='14' cy='14' r='1.3' fill='%231d1a17' fill-opacity='.08'/%3E%3C/svg%3E");
}
:root[data-ui="livree"][data-theme="dark"] {
  --paper: #131210; --paper-2: #1c1a17; --paper-3: #0e0d0b;
  --ink: #eee9dd; --ink-soft: #a9a296; --line: #37332d; --line-strong: #eee9dd; --icon: #eee9dd;
  --btn-top: #1c1a17; --btn-bot: #1c1a17;
  --sin: #5fa66a; --pur: #a97db2; --az: #7c9fe0; --gu: #e0625b;
  --grid: #2a2723; --tile: #201e1a; --blocked: #050504; --rough: #302c26;
  --player: #7c9fe0; --bot: #e0625b; --front: rgba(95, 166, 106, .18); --back: rgba(224, 98, 91, .14);
  --hp: #5fa66a; --ap: #7c9fe0; --ep: #a97db2; --accent: #e0625b;
  --hampe: #050504; --sur-hampe: #d9d2c4; --gonfanon: #26231f; --gonfanon-hover: #312d28;
  --t1: var(--choix, #8fb0ec); --on1: var(--sur-choix, #141316);
  --t2: var(--choix2, #deae48); --on2: var(--sur-choix2, #1b1712);
  --diapre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M14 1 27 14 14 27 1 14Z' fill='none' stroke='%23eee9dd' stroke-opacity='.04'/%3E%3Ccircle cx='14' cy='14' r='1.3' fill='%23eee9dd' fill-opacity='.07'/%3E%3C/svg%3E");
  color-scheme: dark;
}

:root[data-ui="livree"] {
  --act: var(--t1); --on-act: var(--on1);
  /* Formes (masques noirs : seule la forme compte, la couleur vient de background). */
  --vair: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10'%3E%3Cpath d='M4 0h8v4l-2 2v4H6V6L4 4z'/%3E%3C/svg%3E");
  --billettes: repeating-linear-gradient(90deg, #000 0 7px, transparent 7px 9px);
  /* Chef denché : une bande pleine de 7 px puis des dents de 6 px, au premier émail. */
  --chef:
    linear-gradient(135deg, var(--t1) 25%, transparent 25%) 6px 7px / 12px 12px repeat-x,
    linear-gradient(225deg, var(--t1) 25%, transparent 25%) 6px 7px / 12px 12px repeat-x,
    linear-gradient(var(--t1), var(--t1)) top / 100% 7px no-repeat;

  body { background: var(--diapre) var(--paper); font-size: 15px; }
  h1, h2, .title { font-family: var(--title); font-weight: 700; }
  h1 { font-size: 28px; }
  h2 { font-size: 20px; }
  /* Rubriques : losange au second émail, puis un lambel (trait à trois pendants) qui court jusqu'au bord. */
  h3 { font: 500 14px var(--sc); letter-spacing: .08em; color: var(--ink); }
  h3::before { content: ""; width: 7px; height: 7px; flex: none; background: var(--t2); rotate: 45deg; outline: 1px solid var(--ink); }
  h3::after {
    height: 8px; align-self: center; margin-top: 6px;
    background:
      linear-gradient(var(--ink), var(--ink)) right 8px bottom / 4px 6px no-repeat,
      linear-gradient(var(--ink), var(--ink)) right 22px bottom / 4px 6px no-repeat,
      linear-gradient(var(--ink), var(--ink)) right 36px bottom / 4px 6px no-repeat,
      linear-gradient(var(--ink), var(--ink)) top / 100% 2px no-repeat;
  }
  a { color: var(--ink); text-decoration-color: var(--t1); 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 : écussons plats ; l'action principale à l'émail, cernée d'une filière. */
  button, select, input { background: var(--paper-2); border: 2px solid var(--ink); border-radius: 0; }
  button { font: 700 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(--ink); color: var(--on1);
    box-shadow: inset 0 0 0 2px var(--t1), inset 0 0 0 3px var(--on1);
  }
  button.primary:hover:not(:disabled) { background: color-mix(in srgb, var(--t1) 88%, var(--ink)); }
  button.danger { background: var(--gu); border-color: var(--ink); color: #fbf6ee; box-shadow: inset 0 0 0 2px var(--gu), inset 0 0 0 3px #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(--t1); border: 0; }
  a.btn { color: var(--ink); background: var(--paper-2); border: 2px solid var(--ink); font: 700 15px var(--title); }
  button.link { background: none; border: 0; color: var(--ink); text-decoration: underline 2px var(--t1); font: inherit; box-shadow: none; }
  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) 12%, transparent); color: var(--on1); font: 700 15px var(--title); }
  .pill small { font: 500 12px var(--body); opacity: .85; }

  /* Panneaux : champ d'argent cerné, coiffé d'un chef denché. */
  .paper, .panel, .log, .card-pane { background: var(--chef), var(--paper-2); border: 1px solid var(--line); padding-top: 22px; }
  .notice.quiet { background: none; border: 0; padding-top: 0; }

  /* Bannière du haut : la livrée, frangée de cloches de vair au second émail. */
  .topbar { background: var(--t1); color: var(--on1); border-bottom: 3px solid var(--t2); }
  .topbar::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -13px; height: 10px; pointer-events: none;
    background: var(--t2); -webkit-mask: var(--vair) repeat-x; mask: var(--vair) repeat-x;
  }
  @media (max-width: 760px) { .topbar { position: relative; z-index: 5; } }
  .topbar .ibtn { color: var(--on1); }
  .topbar .ibtn:hover:not(:disabled) { background: color-mix(in srgb, var(--on1) 14%, transparent); }
  .topbar .muted, .topbar .small, .topbar .hero-sub { color: var(--on1); opacity: .85; }
  .avatar {
    background: var(--t2); color: var(--on2); font: 600 26px var(--gothic);
    clip-path: polygon(0 0, 100% 0, 100% 60%, 50% 100%, 0 60%);
    box-shadow: inset 0 0 0 3px var(--on1);
  }
  .hero-name { font: 600 26px/1 var(--gothic); }
  .hero-sub { font: 500 13px var(--sc); letter-spacing: .08em; }
  .where .title { font-size: 20px; }
  .live { color: var(--on1); }
  .settings-body { background: var(--chef), var(--paper-2); border: 2px solid var(--ink); color: var(--ink); padding-top: 22px; }
  .settings-body label { font: 500 13px var(--sc); color: var(--muted); }
  .settings-body select { color: var(--text); }

  /* Rail : la hampe, en sable ; la page ouverte est un écu à l'émail. */
  .rail { background: var(--hampe); box-shadow: inset -3px 0 0 var(--t2); }
  .rail .ibtn { color: var(--sur-hampe); }
  .rail .ibtn:hover:not(:disabled) { background: color-mix(in srgb, var(--sur-hampe) 15%, transparent); }
  .rail .ibtn[aria-current="page"] { background: var(--t2); color: var(--on2); clip-path: polygon(0 0, 100% 0, 100% 64%, 50% 100%, 0 64%); }
  .rail hr { border: 0; border-top: 2px dotted color-mix(in srgb, var(--sur-hampe) 40%, transparent); }

  .board { background: var(--chef), var(--paper-2); border: 3px solid var(--ink); padding: 26px 16px 16px; }
  @media (max-width: 760px) { .board { padding: 20px 8px 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(--t1); font-size: 14px; font-style: italic; }
  .message .block + .block { border-top: 2px solid var(--line); }
  .message .block div:first-child { font-weight: 700; }
  .message-line { background: var(--paper-2); border: 2px solid var(--ink); border-left: 6px solid var(--t1); border-radius: 0; }
  dialog.popin { background: var(--chef), var(--paper-2); color: var(--ink); border: 3px solid var(--ink); padding-top: 24px; }

  /* Onglets en pennons ; l'actif au second émail, rayé d'un pal au premier. */
  .side-tabs, .tabs { gap: 4px; }
  .side-tabs button, .tabs button, .look {
    border: 0; padding-right: 26px; background: var(--paper-3); color: var(--ink); font-family: var(--sc); font-weight: 500;
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
  }
  .side-tabs button[aria-pressed="true"], .tabs button[aria-pressed="true"], .look[aria-pressed="true"] {
    background: var(--t2); color: var(--on2); box-shadow: inset 6px 0 0 var(--t1);
  }
  .sheet-tabs { border-bottom: 3px solid var(--ink); }

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

  /* Jauges : rangées de billettes dans une fasce cernée. */
  .bar .label { font: 500 13px var(--sc); letter-spacing: .05em; }
  .bar .track, .gauge, .wear { background: var(--paper-3); outline: 1px solid var(--ink); outline-offset: 1px; height: 10px; }
  .bar .fill, .gauge i, .wear i { -webkit-mask: var(--billettes); mask: var(--billettes); }
  .gauge, .wear { height: 7px; }
  .gauge i { background: var(--ink); }
  .wear i { background: var(--sin); }
  .wear i.low { background: var(--gu); }

  /* Caractéristiques : chacune sur un petit écu. */
  .stats div, .derived div {
    background: var(--paper-3); border-top: 4px solid var(--t1); padding-bottom: 14px;
    clip-path: polygon(0 0, 100% 0, 100% 66%, 50% 100%, 0 66%);
    font: 500 12px var(--sc); letter-spacing: .04em; 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(--t2); 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: 700 15px var(--title); border-left: 4px solid var(--line); }
  .chip small { font: 500 12px var(--body); color: var(--muted); }
  .chip.on { background: var(--t1); color: var(--on1); border-left-color: var(--t2); }
  .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; rotate: 45deg; outline: 1px solid var(--ink); }

  /* Bandeau de la compagnie : son gonfanon. Champ au premier émail, bande en barre au second,
     filière intérieure, nom en gothique. */
  .banner {
    background:
      linear-gradient(115deg, transparent 0 calc(100% - 300px), var(--t2) calc(100% - 300px) calc(100% - 270px),
        transparent calc(100% - 270px) calc(100% - 262px), var(--t2) calc(100% - 262px) calc(100% - 254px), transparent calc(100% - 254px)),
      var(--t1);
    color: var(--on1); border: 2px solid var(--ink);
    box-shadow: inset 0 0 0 4px var(--t1), inset 0 0 0 5px var(--on1);
    padding: 14px 18px;
  }
  @media (max-width: 760px) { .banner { background: var(--t1); } }
  .banner .small, .banner .muted { color: var(--on1); opacity: .88; }
  .banner a:not(.btn) { color: var(--on1); }
  .banner a.btn.primary, .banner button.primary { background: var(--t2); color: var(--on2); box-shadow: inset 0 0 0 2px var(--t2), inset 0 0 0 3px var(--on2); }
  .banner-name { font: 600 36px/1.05 var(--gothic); }
  .gold-pill { background: var(--paper-2); color: var(--ink); font: 700 18px var(--title); border: 2px solid var(--ink); }

  /* Mercenaires : des gonfanons à trois queues ; le choisi prend l'émail, coiffé d'un chef componé. */
  .tile {
    background: linear-gradient(var(--line), var(--line)) top / 100% 5px no-repeat, var(--gonfanon);
    border: 0; font: inherit; text-align: left; padding-top: 12px; padding-bottom: 26px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 83.3% calc(100% - 14px), 66.6% 100%, 50% calc(100% - 14px), 33.3% 100%, 16.6% calc(100% - 14px), 0 100%);
  }
  .tile:hover:not(:disabled) { background: linear-gradient(var(--t1), var(--t1)) top / 100% 5px no-repeat, var(--gonfanon-hover); }
  .tile.on {
    background: repeating-linear-gradient(90deg, var(--t2) 0 14px, var(--on1) 14px 28px) top / 100% 7px no-repeat, var(--t1);
    color: var(--on1);
  }
  .tile.on .small, .tile.on .tile-row, .tile.on .tile-row b, .tile.on .status, .tile.on .tile-role { color: inherit; }
  /* Jauges du mercenaire choisi : peintes dans la couleur posée sur l'émail (--on1), jamais dans la couleur de la
     jauge, qui peut être celle de l'émail (PA en azur sur gonfanon azur). !important : passe devant data-bg. */
  .tile.on .gauge { background: color-mix(in srgb, var(--on1) 22%, transparent); outline-color: var(--on1); }
  .tile.on .gauge i { background: var(--on1) !important; }
  .tile-portrait { background: var(--paper); border: 3px double var(--ink); }
  .tile canvas.skin { border: 0; background: none; }
  .xp-badge { background: var(--t2); color: var(--on2); font: 700 12px var(--title); outline: 1px solid var(--ink); }
  .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: 2px dashed var(--ink-soft); outline-offset: -2px; color: var(--muted); }
  .tile-empty:hover:not(:disabled) { background: var(--paper-3); }
  .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: 500 12.5px var(--sc); 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: 500 13px var(--sc); 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 56px/1 var(--gothic); color: var(--ink); }
  .brand .small { font-style: italic; font-size: 15px; }
  .page .card { background: var(--chef), var(--paper-2); border: 2px solid var(--ink); padding-top: 26px; }
  .page .error { color: var(--gu); font-weight: 700; }
  .page .ok { color: var(--sin); }
  .page dt { color: var(--muted); font: 500 13px var(--sc); }
  .page footer { font-size: 13px; color: var(--muted); }
  .skip { border-top: 2px dashed var(--line); }
  .nav { font: 700 15px var(--title); }
  .nav a { color: var(--muted); text-decoration: none; }
  .nav a[aria-current="page"] { color: var(--ink); text-decoration: underline 3px var(--t1); }
}