/*
 * Thème « Vitrail du sanctuaire » : une verrière de panneaux de verre sertis de plomb. Baguettes sombres et
 * épaisses, aplats francs, rosaces, symétrie ; un quadrilobe désigne la sélection, les jauges sont des
 * suites de petits panneaux. Aucun dégradé, aucune transparence décorative, aucune lueur.
 * Polices : Bodoni Moda (titres, noms), Jost (texte), Forum (libellés, chiffres).
 */
:root[data-ui="vitrail"] {
  --paper: #e8e2d3; --paper-2: #f1ece0; --paper-3: #d8d1c2;
  --ink: #24262a; --ink-soft: #55545c; --line: #77716a; --line-strong: #292a2c;
  --btn-top: #f1ece0; --btn-bot: #f1ece0; --icon: #24262a;
  --plomb: #292a2c; --verre-1: #c9d5e3; --verre-2: #ead6a6; --verre-3: #e2c3bd; --pourpre-v: #a83f39;
  --grid: #292a2c; --tile: #d6d1c2; --blocked: #55545a; --rough: #9a7956;
  --player: #a83f39; --bot: #315e91; --front: rgba(192, 165, 107, .3); --back: rgba(49, 94, 145, .16);
  --hp: #a83f39; --ap: #315e91; --ep: #a17a29; --accent: #315e91;
  --title: "Bodoni Moda", Georgia, serif; --body: "Jost", system-ui, sans-serif;
  --sc: "Forum", Georgia, serif;
}
:root[data-ui="vitrail"][data-theme="dark"] {
    --paper: #202329; --paper-2: #2b3039; --paper-3: #181b20;
    --ink: #eee9dd; --ink-soft: #b7b4b0; --line: #646a73; --line-strong: #0a0b0d; --icon: #eee9dd;
    --btn-top: #2b3039; --btn-bot: #2b3039;
    --plomb: #0a0b0d; --verre-1: #24405f; --verre-2: #5e4a1f; --verre-3: #5a2a28; --pourpre-v: #e47a70;
    --grid: #0a0b0d; --tile: #343c43; --blocked: #171a20; --rough: #776247;
    --player: #e47a70; --bot: #7fa9df; --front: rgba(224, 189, 100, .2); --back: rgba(127, 169, 223, .16);
    --hp: #e47a70; --ap: #7fa9df; --ep: #e0bd64; --accent: #7fa9df;
    color-scheme: dark;
}

:root[data-ui="vitrail"] {
  --act: var(--choix, var(--bot)); --on-act: var(--sur-choix, #f4f3ef);
  --octo: polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px);
  --quadrilobe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1a5 5 0 0 1 5 5 5 5 0 0 1 0 12 5 5 0 0 1-10 0A5 5 0 0 1 7 6a5 5 0 0 1 5-5zm0 7a4 4 0 1 0 0 8 4 4 0 1 0 0-8z'/%3E%3C/svg%3E");
  --pavage: conic-gradient(from 45deg, var(--verre-1) 0 25%, var(--verre-2) 0 50%, var(--verre-1) 0 75%, var(--verre-2) 0) 0 0 / 30px 30px;
  --rosace: conic-gradient(var(--verre-1) 0 12%, var(--plomb) 0 13%, var(--verre-3) 0 24.5%, var(--plomb) 0 25.5%, var(--verre-2) 0 37%, var(--plomb) 0 38%,
    var(--verre-1) 0 49.5%, var(--plomb) 0 50.5%, var(--verre-3) 0 62%, var(--plomb) 0 63%, var(--verre-2) 0 74.5%, var(--plomb) 0 75.5%,
    var(--verre-1) 0 87%, var(--plomb) 0 88%, var(--verre-3) 0 99%, var(--plomb) 0);

  body { background: var(--paper); font-size: 14.5px; }
  h1, h2, .title { font-family: var(--title); font-weight: 800; }
  h1 { font-size: 28px; }
  h2 { font-size: 20px; font-weight: 600; }
  h3 { font: 400 14px var(--sc); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
  h3::after { border-top: 4px solid var(--plomb); }
  a { color: var(--ink); text-decoration-color: var(--act); text-decoration-thickness: 2px; text-underline-offset: 3px; }
  .muted { color: var(--muted); }
  .small { font-size: 12.5px; color: var(--muted); }
  :focus-visible { outline: 3px solid var(--act); outline-offset: 2px; }

  /* Boutons : panneaux octogonaux sertis ; au clic, le verre s'éteint. */
  button, select, input { background: var(--paper-2); border: 3px solid var(--plomb); border-radius: 0; }
  button { color: var(--ink); font: 400 14px var(--sc); letter-spacing: .1em; text-transform: uppercase; clip-path: var(--octo); }
  button:hover:not(:disabled) { background: var(--verre-2); }
  button:active:not(:disabled) { background: var(--plomb); color: var(--paper-2); }
  button:disabled { opacity: .45; }
  button.primary, a.btn.primary { background: var(--act); color: var(--on-act); }
  button.danger { background: var(--verre-3); color: var(--ink); }
  select, input[type="text"], input[type="email"], input[type="number"] { color: var(--ink); font-family: var(--body); }
  input[type="range"], input[type="checkbox"], input[type="radio"] { accent-color: var(--act); border: 0; }
  a.btn { background: var(--paper-2); color: var(--ink); border: 3px solid var(--plomb); clip-path: var(--octo); font: 400 14px var(--sc); letter-spacing: .1em; text-transform: uppercase; }
  button.link { background: none; border: 0; clip-path: none; color: var(--ink); text-decoration: underline 2px var(--act); font: inherit; letter-spacing: 0; text-transform: none; }
  button.mini, .small-btn { font-size: 12.5px; }

  .ibtn { background: none; color: var(--icon); border: 3px solid transparent; clip-path: none; }
  .ibtn:hover:not(:disabled) { border-color: var(--plomb); background: none; }
  .ibtn[aria-current="page"] { background: var(--act); color: var(--on-act); border-color: var(--plomb); }

  .pills { gap: 0; }
  .pill { border-left: 3px solid var(--plomb); font: 500 13px var(--body); padding: 2px 9px; }
  .pill:first-child { border-left: 0; }
  .pill small { font: 400 11.5px var(--sc); letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
  .pill.warm, .pill.alert { color: var(--act); }

  /* Panneaux : verre clair serti d'une baguette épaisse. */
  .paper, .panel, .log, .card-pane { background: var(--paper-2); border: 4px solid var(--plomb); }
  .notice.quiet { border: 0; }

  /* Barre du haut : une frise de verre. */
  .topbar { background: var(--pavage); border-bottom: 5px solid var(--plomb); }
  .topbar .muted, .topbar .small { color: var(--ink); }
  .avatar { background: var(--rosace); color: var(--ink); border: 3px solid var(--plomb); font: 800 22px var(--title); }
  .hero-name { font: 800 20px/1 var(--title); background: var(--paper-2); padding: 0 4px; }
  .hero-sub { font: 400 12px var(--sc); letter-spacing: .12em; text-transform: uppercase; }
  .where .title { font-size: 17px; }
  .live { color: var(--act); }
  .settings-body { background: var(--paper-2); color: var(--ink); border: 4px solid var(--plomb); }
  .settings-body label { font: 400 12.5px var(--sc); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
  .settings-body select { color: var(--text); }
  .rail { border-right: 5px solid var(--plomb); background: var(--paper-3); }
  .rail hr { border: 0; border-top: 4px solid var(--plomb); }
  @media (max-width: 760px) { .rail { border-right: 0; border-bottom: 5px solid var(--plomb); } }

  .board { background: var(--paper-2); border: 6px solid var(--plomb); outline: 3px solid var(--verre-2); padding: 16px; }
  @media (max-width: 760px) { .board { padding: 8px; } }
  .hint { color: var(--muted); font-size: 12.5px; }
  .flash { color: var(--pourpre-v); font-weight: 600; }
  .flash.ok { color: var(--ap); }

  .minimap { border: 4px solid var(--plomb); }
  .mm-pulse { border: 3px solid var(--act); border-radius: 50%; }
  .portrait canvas, canvas.skin { background: var(--paper-2); border: 4px solid var(--plomb); }
  .portrait-name .title { font-size: 30px; }
  .quote { font-style: italic; border-left: 4px solid var(--plomb); font-size: 13.5px; }
  .message .block + .block { border-top: 3px solid var(--plomb); }
  .message .block div:first-child { font-weight: 600; }

  /* Onglets : panneaux verticaux séparés de plomb ; l'actif prend l'émail et le quadrilobe. */
  .side-tabs, .tabs { gap: 0; border: 3px solid var(--plomb); background: var(--plomb); width: fit-content; max-width: 100%; }
  .side-tabs button, .tabs button, .look { background: var(--paper-2); border: 0; clip-path: none; color: var(--ink); margin-left: 3px; position: relative; }
  .side-tabs button:first-child, .tabs button:first-child, .look:first-child { margin-left: 0; }
  .side-tabs button:active, .tabs button:active, .look:active { background: var(--paper-2); color: var(--ink); }
  .side-tabs button[aria-pressed="true"], .tabs button[aria-pressed="true"], .look[aria-pressed="true"] { background: var(--act); color: var(--on-act); }
  .side-tabs button[aria-pressed="true"]::before, .tabs button[aria-pressed="true"]::before, .look[aria-pressed="true"]::before {
    content: ""; position: absolute; left: 2px; top: 50%; width: 11px; height: 11px; margin-top: -6px;
    background: var(--on-act); -webkit-mask: var(--quadrilobe) center/contain no-repeat; mask: var(--quadrilobe) center/contain no-repeat; }
  .side-tabs { margin-bottom: 8px; }

  .who strong { font: 800 24px var(--title); }
  .tag { font: 400 12px var(--sc); letter-spacing: .06em; color: #fff; }

  /* Jauges : petits panneaux sertis. */
  .bar .label { font: 400 12.5px var(--sc); letter-spacing: .1em; text-transform: uppercase; }
  .bar .track, .gauge, .wear { background: var(--paper-3); border: 3px solid var(--plomb); height: 15px; position: relative; }
  .bar .track::after, .gauge::after, .wear::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: repeating-linear-gradient(90deg, transparent 0 14px, var(--plomb) 14px 17px); }
  .gauge, .wear { height: 10px; }
  .gauge::after, .wear::after { background: repeating-linear-gradient(90deg, transparent 0 9px, var(--plomb) 9px 11px); }
  .gauge i { background: var(--verre-1); }
  .wear i { background: var(--verre-2); }
  .wear i.low { background: var(--pourpre-v); }

  /* Caractéristiques : vitraux alternés. */
  .stats { gap: 0; border: 3px solid var(--plomb); }
  .stats div, .derived div { border-left: 3px solid var(--plomb); font: 400 12px var(--sc); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
  .stats div:first-child, .derived div:first-child { border-left: 0; }
  .stats div:nth-child(odd) { background: var(--verre-1); }
  .stats div:nth-child(even) { background: var(--verre-2); }
  .stats b, .derived b { font: 800 26px/1.05 var(--title); color: var(--ink); }
  .derived { gap: 0; }
  .derived b { font-size: 19px; }
  .derived b.over { color: var(--pourpre-v); }

  .log li, .reports li { border-left: 4px 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(--plomb); }
  .log li.defense, .reports li.defense { border-color: var(--pourpre-v); }
  .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: 12.5px; color: var(--muted); }
  .log summary { color: var(--text); font-size: 13.5px; }
  .log .t { font: 400 12px var(--sc); letter-spacing: .06em; color: var(--muted); }
  .reports { font-size: 13.5px; }

  .roster.faded { opacity: .75; }
  .chip { background: var(--paper-2); color: var(--ink); border: 3px solid var(--plomb); clip-path: none; font: 600 15px var(--title); letter-spacing: 0; text-transform: none; }
  .chip:active { background: var(--paper-2); color: var(--ink); }
  .chip small { font: 400 11px var(--sc); letter-spacing: .08em; color: var(--muted); }
  .chip.on { background: var(--verre-2); }
  .chip.healing small { color: var(--pourpre-v); }
  .chip.map small { color: var(--ap); }
  table.train { font-size: 13.5px; }
  table.train td { border-bottom: 2px solid var(--plomb); }
  table.train td:nth-child(2), table.train tr.muted td { color: var(--muted); }

  .arena-head strong { font: 800 22px var(--title); }
  .companies li { border: 3px solid var(--plomb); }
  .companies li.mine { background: var(--verre-1); }
  .companies small { color: var(--muted); }
  .dot { background: var(--act); border: 2px solid var(--plomb); }

  .banner { background: var(--pavage); border-bottom: 5px solid var(--plomb); }
  .banner .small, .banner .muted { color: var(--ink); }
  .banner-name { font: 800 34px/1 var(--title); background: var(--paper-2); border: 3px solid var(--plomb); padding: 0 8px; }
  .gold-pill { font: 800 22px var(--title); color: var(--ink); }

  /* Mercenaires : panneaux sertis ; le choisi devient d'or et porte le quadrilobe. */
  .tile { background: var(--paper-2); color: var(--ink); border: 4px solid var(--plomb); clip-path: none; font: inherit; letter-spacing: 0; text-transform: none; text-align: left; }
  .tile:hover:not(:disabled) { background: var(--paper-3); }
  .tile:active:not(:disabled) { background: var(--paper-2); color: var(--ink); }
  .tile.on { background: var(--verre-2); }
  .tile.on .tile-portrait::after { content: ""; position: absolute; left: 4px; top: 4px; width: 20px; height: 20px;
    background: var(--act); -webkit-mask: var(--quadrilobe) center/contain no-repeat; mask: var(--quadrilobe) center/contain no-repeat; }
  .tile-portrait { background: var(--verre-1); border: 3px solid var(--plomb); }
  .tile canvas.skin { border: 0; background: none; }
  .xp-badge { background: var(--act); color: var(--on-act); border: 2px solid var(--plomb); font: 400 12px var(--sc); }
  .tile-name { font: 800 21px/1.05 var(--title); }
  .tile-row { font-size: 12.5px; color: var(--muted); }
  .tile-row b { color: var(--text); font-weight: 600; }
  .tile-empty { background: var(--paper-3); border-style: dashed; color: var(--muted); }
  .tile-plus { font: 800 36px var(--title); }

  .sheet-name { font: 800 40px/1 var(--title); }
  .train-line { border-bottom: 2px solid var(--plomb); }
  .stat-line { font-size: 13.5px; }
  .stat-line > span:nth-child(3) { font-weight: 600; font-size: 16px; }
  .trait { font-size: 13.5px; }
  .trait.plus b { color: var(--ap); }
  .trait.minus b { color: var(--pourpre-v); }
  .trait.zero { color: var(--muted); }
  .slot { background: var(--paper-2); border: 3px solid var(--plomb); }
  .slot-empty, .slot-taken { border-style: dashed; background: none; }

  .status { font: 400 12px var(--sc); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .status.map { color: var(--player); }
  .status.ready { color: var(--ap); }
  .status.resting { color: var(--ep); }
  .status.healing { color: var(--pourpre-v); }
  .warn { color: var(--pourpre-v); font-size: 12.5px; }
  .gold { font-weight: 600; }
  .worn { font-size: 13.5px; }
  .worn th, .worn td { border-bottom: 2px solid var(--plomb); }
  .worn thead th { font: 400 12px var(--sc); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); border-bottom: 4px solid var(--plomb); }
  .item { border-bottom: 2px solid var(--plomb); }
  .item:last-child { border-bottom: 0; }

  .brand .title { font: 800 50px/1 var(--title); color: var(--ink); }
  .brand .small { font-size: 14px; }
  .page .card { background: var(--paper-2); border: 5px solid var(--plomb); outline: 4px solid var(--verre-1); }
  .page .error { color: var(--pourpre-v); font-weight: 600; }
  .page .ok { color: var(--ap); }
  .page dt { color: var(--muted); font: 400 12px var(--sc); letter-spacing: .1em; text-transform: uppercase; }
  .page footer { font-size: 12.5px; color: var(--muted); }
  .skip { border-top: 3px solid var(--plomb); }
  .nav { font: 400 14px var(--sc); letter-spacing: .1em; text-transform: uppercase; }
  .nav a { color: var(--muted); text-decoration: none; }
  .nav a[aria-current="page"] { color: var(--ink); text-decoration: underline 4px var(--act); }
}