/*
 * Thème « Placard de l'arène » : l'affiche du crieur, gravée sur bois en deux encres (noir et ocre rouge).
 * Bandes inversées plutôt que panneaux, filets épais, gros chiffres, hachures de graveur pour les jauges.
 * La seconde encre est décalée de 2 à 4 px sous les titres et les boutons, comme un tirage mal calé.
 * Mode sombre : tirage en négatif. Polices : Uncial Antiqua (titres, noms), Spectral (texte, chiffres),
 * Spectral SC (libellés).
 */
:root[data-ui="placard"] {
  --paper: #e8e5dd; --paper-2: #efece5; --paper-3: #dcd8ce;
  --ink: #141312; --ink-soft: #4d4944; --line: #9d978c; --line-strong: #141312;
  --btn-top: #141312; --btn-bot: #141312; --icon: #141312;
  --ocre: #9c3d22;
  --grid: #d2cdc2; --tile: #e2ded5; --blocked: #2a2826; --rough: #cfc8b9;
  --player: #2c4f86; --bot: #9c3d22; --front: rgba(20, 19, 18, .1); --back: rgba(156, 61, 34, .14);
  --hp: #3a5f37; --ap: #9c6a1e; --ep: #2c4f86; --accent: #9c3d22;
  --title: "Uncial Antiqua", Georgia, serif; --body: "Spectral", Georgia, serif;
  --sc: "Spectral SC", "Spectral", Georgia, serif;
}
:root[data-ui="placard"][data-theme="dark"] {
    --paper: #121110; --paper-2: #1a1917; --paper-3: #0c0b0a;
    --ink: #ebe6db; --ink-soft: #b1aa9e; --line: #4a4640; --line-strong: #ebe6db; --icon: #ebe6db;
    --btn-top: #ebe6db; --btn-bot: #ebe6db;
    --ocre: #d37650;
    --grid: #2a2825; --tile: #1c1b19; --blocked: #000; --rough: #2f2c28;
    --player: #86a7de; --bot: #d37650; --front: rgba(235, 230, 219, .1); --back: rgba(211, 118, 80, .16);
    --hp: #8cb886; --ap: #d6a75a; --ep: #86a7de; --accent: #d37650;
    color-scheme: dark;
}

:root[data-ui="placard"] {
  --act: var(--choix, var(--ocre)); --on-act: var(--sur-choix, #fbf6ee);
  --hachures: repeating-linear-gradient(-45deg, var(--ink) 0 2px, transparent 2px 5px);

  body { background: var(--paper); font-size: 15.5px; }
  h1, h2, .title { font-family: var(--title); font-weight: 400; }
  h1 { font-size: 30px; text-shadow: 2px 2px 0 var(--act); }
  h2 { font-size: 21px; }
  h3 { font: 600 13px var(--sc); letter-spacing: .12em; color: var(--ink); }
  h3::after { border-top: 3px solid var(--ink); }
  a { color: var(--ink); text-decoration-color: var(--act); text-decoration-thickness: 2px; text-underline-offset: 3px; }
  .muted { color: var(--muted); }
  .small { font-size: 13.5px; color: var(--muted); }
  :focus-visible { outline: 3px solid var(--act); outline-offset: 2px; }

  /* Boutons : pavés d'encre avec la seconde encre décalée, qui se recalent au clic. */
  button, select, input { background: var(--paper-2); border: 2px solid var(--ink); border-radius: 0; }
  button { background: var(--ink); color: var(--paper); font: 600 14px var(--sc); letter-spacing: .08em; box-shadow: 3px 3px 0 var(--act); }
  button:hover:not(:disabled) { box-shadow: 4px 4px 0 var(--act); }
  button:active:not(:disabled) { translate: 2px 2px; box-shadow: 1px 1px 0 var(--act); }
  button:disabled { opacity: .45; box-shadow: none; }
  button.primary, a.btn.primary { background: var(--act); border-color: var(--act); color: var(--on-act); box-shadow: 3px 3px 0 var(--ink); }
  button.danger { background: var(--paper-2); color: var(--ocre); border-color: var(--ocre); }
  select, input[type="text"], input[type="email"], input[type="number"] { background: var(--paper-2); color: var(--ink); }
  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: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--act); font: 600 14px var(--sc); letter-spacing: .08em; }
  button.link { background: none; border: 0; box-shadow: none; color: var(--ink); text-decoration: underline 2px var(--act); font: inherit; letter-spacing: 0; }
  button.mini, .small-btn { font-size: 12.5px; }

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

  .pills { gap: 0; }
  .pill { border-left: 1px solid color-mix(in srgb, var(--paper) 40%, transparent); font: 600 14px var(--body); padding: 2px 9px; }
  .pill:first-child { border-left: 0; }
  .pill small { font: 600 11.5px var(--sc); letter-spacing: .08em; opacity: .8; }
  .pill.warm, .pill.alert { color: var(--act); }

  /* Panneaux : des bandes, un filet épais en tête. */
  .paper, .panel, .log, .card-pane { background: transparent; border-top: 3px solid var(--ink); }
  .notice.quiet { border: 0; }

  /* Barre du haut et rail : bandeaux inversés. */
  .topbar { background: var(--ink); color: var(--paper); }
  .topbar .ibtn { color: var(--paper); }
  .topbar .ibtn:hover:not(:disabled) { border-color: var(--paper); }
  .topbar .muted, .topbar .small { color: color-mix(in srgb, var(--paper) 75%, transparent); }
  .avatar { background: var(--paper); color: var(--ink); border: 2px solid var(--paper); box-shadow: 3px 3px 0 var(--act); font: 400 26px var(--title); }
  .hero-name { font: 400 22px/1 var(--title); text-shadow: 2px 2px 0 var(--act); }
  .hero-sub { font: 600 12px var(--sc); letter-spacing: .12em; }
  .where .title { font-size: 18px; }
  .live { color: var(--paper); }
  .settings-body { background: var(--paper-2); color: var(--ink); border: 3px solid var(--ink); }
  .settings-body label { font: 600 12.5px var(--sc); letter-spacing: .08em; color: var(--muted); }
  .settings-body select { color: var(--text); }
  .rail { border-right: 3px solid var(--ink); }
  .rail hr { border: 0; border-top: 3px solid var(--ink); }
  @media (max-width: 760px) { .rail { border-right: 0; border-bottom: 3px solid var(--ink); } }

  .board { background: var(--paper-2); border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--act); padding: 16px; }
  @media (max-width: 760px) { .board { padding: 8px; box-shadow: 3px 3px 0 var(--act); } }
  .hint { color: var(--muted); font-size: 13.5px; }
  .flash { color: var(--ocre); font-style: italic; font-weight: 600; }
  .flash.ok { color: var(--hp); }

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

  /* Onglets : bande noire, l'actif à la seconde encre. */
  .side-tabs, .tabs { gap: 0; background: var(--ink); padding: 3px; }
  .side-tabs button, .tabs button, .look { background: none; border: 0; box-shadow: none; color: var(--paper); }
  .side-tabs button:active, .tabs button:active, .look:active { translate: none; }
  .side-tabs button[aria-pressed="true"], .tabs button[aria-pressed="true"], .look[aria-pressed="true"] { background: var(--act); color: var(--on-act); }
  .side-tabs { margin-bottom: 8px; }
  .sheet-tabs { padding-bottom: 3px; }

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

  /* Jauges : hachures de graveur dans un cadre épais ; le remplissage garde sa couleur, hachée. */
  .bar .label { font: 600 12.5px var(--sc); letter-spacing: .08em; }
  .bar .track, .gauge, .wear { background: var(--paper-2); border: 2px solid var(--ink); height: 14px; }
  .bar .fill, .gauge i, .wear i { -webkit-mask: var(--hachures); mask: var(--hachures); }
  .bar .fill { -webkit-mask: none; mask: none; background-image: var(--hachures) !important; background-blend-mode: multiply; }
  .gauge, .wear { height: 9px; }
  .gauge i { background: var(--ink); }
  .wear i { background: var(--ink); }
  .wear i.low { background: var(--ocre); }

  .stats { gap: 0; border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); }
  .stats div, .derived div { border-left: 1px solid var(--ink); font: 600 11.5px var(--sc); letter-spacing: .1em; color: var(--ink); }
  .stats div:first-child, .derived div:first-child { border-left: 0; }
  .stats b, .derived b { font: 600 30px/1.05 var(--body); color: var(--ink); letter-spacing: 0; }
  .derived { gap: 0; }
  .derived b { font-size: 22px; }
  .derived b.over { color: var(--ocre); }

  .log li, .reports li { border-left: 3px 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(--ink); }
  .log li.defense, .reports li.defense { border-color: var(--ocre); }
  .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: 13.5px; color: var(--muted); }
  .log summary { color: var(--text); font-size: 14.5px; }
  .log .t { font: 600 12px var(--sc); letter-spacing: .06em; color: var(--muted); }
  .reports { font-size: 14.5px; }

  .roster.faded { opacity: .75; }
  .chip { background: var(--paper-2); color: var(--ink); border: 1px solid var(--ink); box-shadow: none; font: 400 16px var(--title); letter-spacing: 0; }
  .chip:active { translate: none; }
  .chip small { font: 600 11px var(--sc); letter-spacing: .08em; color: var(--muted); }
  .chip.on { background: var(--ink); color: var(--paper); }
  .chip.on small, .chip.on.map small { color: inherit; opacity: .85; }
  .chip.healing small { color: var(--ocre); }
  .chip.map small { color: var(--hp); }
  table.train { font-size: 14.5px; }
  table.train td { border-bottom: 1px solid var(--ink); }
  table.train td:nth-child(2), table.train tr.muted td { color: var(--muted); }

  .arena-head strong { font: 400 24px var(--title); }
  .companies li { border: 1px solid var(--ink); }
  .companies li.mine { background: var(--ink); color: var(--paper); }
  .companies li.mine small { color: inherit; }
  .companies small { color: var(--muted); }
  .dot { background: var(--act); border-radius: 0; }

  .banner { background: var(--ink); color: var(--paper); border-top: 0; }
  .banner .small, .banner .muted { color: color-mix(in srgb, var(--paper) 78%, transparent); }
  .banner a { color: var(--paper); }
  .banner a.btn { color: var(--ink); }
  .banner-name { font: 400 36px/1 var(--title); text-shadow: 3px 3px 0 var(--act); }
  .gold-pill { font: 600 26px var(--body); color: var(--paper); }

  /* Mercenaires : des bandes d'affiche ; la choisie s'inverse. */
  .tile { background: var(--paper-2); color: var(--ink); border: 2px solid var(--ink); box-shadow: none; font: inherit; letter-spacing: 0; text-align: left; }
  .tile:hover:not(:disabled) { box-shadow: 4px 4px 0 var(--act); }
  .tile:active:not(:disabled) { translate: none; }
  .tile.on { background: var(--ink); color: var(--paper); box-shadow: 4px 4px 0 var(--act); }
  .tile.on .small, .tile.on .tile-row, .tile.on .tile-row b, .tile.on .status { color: inherit; }
  .tile-portrait { background: var(--paper); border: 2px solid var(--ink); }
  .tile canvas.skin { border: 0; box-shadow: none; background: none; }
  .xp-badge { background: var(--act); color: var(--on-act); font: 600 12px var(--sc); letter-spacing: .06em; }
  .tile-name { font: 400 24px/1.05 var(--title); }
  .tile-row { font-size: 13.5px; color: var(--muted); }
  .tile-row b { color: var(--text); font-weight: 600; }
  .tile-empty { background: none; border-style: dashed; color: var(--muted); }
  .tile-plus { font: 400 40px var(--title); }

  .sheet-name { font: 400 46px/1 var(--title); text-shadow: 3px 3px 0 var(--act); }
  .train-line { border-bottom: 1px solid var(--ink); }
  .stat-line { font-size: 14.5px; }
  .stat-line > span:nth-child(3) { font-weight: 600; font-size: 17px; }
  .trait { font-size: 14.5px; }
  .trait.plus b { color: var(--hp); }
  .trait.minus b { color: var(--ocre); }
  .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 12px var(--sc); letter-spacing: .08em; color: var(--muted); }
  .status.map { color: var(--player); }
  .status.ready { color: var(--hp); }
  .status.resting { color: var(--ap); }
  .status.healing { color: var(--ocre); }
  .warn { color: var(--ocre); font-size: 13.5px; font-style: italic; }
  .gold { font-weight: 600; }
  .worn { font-size: 14.5px; }
  .worn th, .worn td { border-bottom: 1px solid var(--ink); }
  .worn thead th { font: 600 12px var(--sc); letter-spacing: .08em; color: var(--ink); border-bottom: 3px solid var(--ink); }
  .item { border-bottom: 1px solid var(--ink); }
  .item:last-child { border-bottom: 0; }

  .brand .title { font: 400 56px/1 var(--title); color: var(--ink); text-shadow: 4px 4px 0 var(--act); }
  .brand .small { font-style: italic; font-size: 15.5px; }
  .page .card { background: var(--paper-2); border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--act); }
  .page .error { color: var(--ocre); font-style: italic; font-weight: 600; }
  .page .ok { color: var(--hp); }
  .page dt { color: var(--muted); font: 600 12.5px var(--sc); letter-spacing: .08em; }
  .page footer { font-size: 13.5px; color: var(--muted); }
  .skip { border-top: 1px solid var(--ink); }
  .nav { font: 600 14px var(--sc); letter-spacing: .08em; }
  .nav a { color: var(--muted); text-decoration: none; }
  .nav a[aria-current="page"] { color: var(--ink); text-decoration: underline 3px var(--act); }
}