/*
 * Thème « Atelier de l'armurier » : des objets construits. Plaques à arête de 2 px et quatre rivets,
 * fentes sombres où sont posés les pions (même en mode clair), boutons de laiton à lèvre qui s'enfoncent,
 * jauges en crans. Le pixel est réservé aux détails qui ont un sens (crans, rivets, chiffres).
 * Polices : Jacquard 24 (titres, gothique en pixels), Pixelify Sans (chiffres, boutons), Atkinson
 * Hyperlegible (texte). Aucun flou, aucune lueur.
 */
:root[data-ui="atelier"] {
  --paper: #ddd6ca; --paper-2: #f4eee3; --paper-3: #cfc6b7;
  --ink: #241f1b; --ink-soft: #675d53; --line: #b9ad9b; --line-strong: #2b2622;
  --btn-top: #f4eee3; --btn-bot: #f4eee3; --icon: #241f1b;
  --edge: #2b2622; --rivet: #8d7b67; --slot: #2e2925; --on-slot: #ecdfc5; --brass: #b07d1e; --ember: #b5432e;
  --grid: #cbbfae; --tile: #e6dccb; --blocked: #3a332e; --rough: #c9bba4;
  --player: #3d6aab; --bot: #b5432e; --front: rgba(74, 132, 69, .2); --back: rgba(181, 67, 46, .14);
  --hp: #4a8445; --ap: #b07d1e; --ep: #3d6aab; --accent: #b07d1e;
  --title: "Jacquard 24", "Pixelify Sans", monospace; --pix: "Pixelify Sans", "Courier New", monospace;
  --body: "Atkinson Hyperlegible", system-ui, sans-serif;
}
:root[data-ui="atelier"][data-theme="dark"] {
    --paper: #141217; --paper-2: #26201f; --paper-3: #1b1719;
    --ink: #ecdfc5; --ink-soft: #a99b87; --line: #3c3330; --line-strong: #050404; --icon: #ecdfc5;
    --btn-top: #26201f; --btn-bot: #26201f;
    --edge: #050404; --rivet: #5b4d44; --slot: #110e10; --brass: #deae48; --ember: #e0654f;
    --grid: #2f2826; --tile: #231d1c; --blocked: #070606; --rough: #3a302b;
    --player: #6f9be0; --bot: #e0654f; --front: rgba(111, 180, 106, .18); --back: rgba(224, 101, 79, .16);
    --hp: #6fb46a; --ap: #deae48; --ep: #6f9be0; --accent: #deae48;
    color-scheme: dark;
}

:root[data-ui="atelier"] {
  --act: var(--choix, var(--brass)); --on-act: var(--sur-choix, #241f1b);
  --plate: linear-gradient(var(--rivet), var(--rivet)) 6px 6px / 4px 4px no-repeat,
    linear-gradient(var(--rivet), var(--rivet)) calc(100% - 6px) 6px / 4px 4px no-repeat,
    linear-gradient(var(--rivet), var(--rivet)) 6px calc(100% - 6px) / 4px 4px no-repeat,
    linear-gradient(var(--rivet), var(--rivet)) calc(100% - 6px) calc(100% - 6px) / 4px 4px no-repeat, var(--paper-2);

  body { background: var(--paper); font-size: 15px; }
  h1, h2, .title { font-family: var(--title); font-weight: 400; }
  h1 { font-size: 34px; line-height: 1; }
  h2 { font-size: 26px; line-height: 1.05; }
  h3 { font: 600 14px var(--pix); color: var(--ink-soft); }
  h3::after { border-top: 2px dotted var(--line); }
  a { color: var(--ink); text-decoration-color: var(--act); 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(--act); outline-offset: 1px; }

  /* Boutons de laiton : arête de 2 px, lèvre de 4 px qui s'enfonce au clic. */
  button, select, input { background: var(--paper-2); border: 2px solid var(--edge); border-radius: 0; }
  button { font: 600 14px var(--pix); box-shadow: 0 3px 0 var(--edge); margin-bottom: 3px; }
  button:hover:not(:disabled) { background: color-mix(in srgb, var(--act) 18%, var(--paper-2)); }
  button:active:not(:disabled) { translate: 0 3px; box-shadow: 0 0 0 var(--edge); }
  button:disabled { opacity: .45; }
  button.primary, a.btn.primary { background: var(--act); color: var(--on-act); }
  button.primary:hover:not(:disabled) { background: var(--act); filter: brightness(1.06); }
  button.danger { background: var(--ember); color: #fff6ea; }
  select { box-shadow: none; }
  input[type="text"], input[type="email"], input[type="number"] { background: var(--slot); color: var(--on-slot); box-shadow: none; }
  input[type="range"], input[type="checkbox"], input[type="radio"] { accent-color: var(--act); border: 0; }
  a.btn { color: var(--ink); background: var(--paper-2); border: 2px solid var(--edge); box-shadow: 0 3px 0 var(--edge); font: 600 14px var(--pix); }
  a.btn:active { translate: 0 3px; box-shadow: none; }
  button.link { background: none; border: 0; box-shadow: none; margin: 0; color: var(--ink); text-decoration: underline 2px var(--act); font: inherit; }
  button.link:active { translate: none; }
  button.mini, .small-btn { font-size: 12.5px; }

  .ibtn { color: var(--icon); background: var(--paper-2); border: 2px solid var(--edge); box-shadow: 0 3px 0 var(--edge); }
  .ibtn[aria-current="page"] { background: var(--act); color: var(--on-act); }

  .pill { background: var(--slot); color: var(--on-slot); border: 2px solid var(--edge); font: 600 14px var(--pix); }
  .pill small { font: 400 12px var(--pix); color: #b5a690; }
  .pill.warm b, .pill.warm { color: #e8b84e; }
  .pill.alert { color: #f08a74; }

  /* Plaques rivetées. */
  .paper, .panel, .log, .card-pane, .rail, .page .card { background: var(--plate); border: 2px solid var(--edge); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .1); }
  .paper, .panel, .log, .card-pane { padding: 16px 18px; }
  .notice.quiet { background: none; border: 0; box-shadow: none; }

  .topbar { background: var(--plate); border-bottom: 2px solid var(--edge); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .1); }
  .avatar { background: var(--slot); border: 2px solid var(--edge); color: #e8b84e; font: 400 26px var(--title); }
  .hero-name { font: 400 28px/1 var(--title); }
  .hero-sub { font: 400 13px var(--pix); color: var(--muted); }
  .where .title { font-size: 24px; }
  .live { color: var(--hp); }
  .live.off { color: var(--muted); }
  .settings-body { background: var(--plate); border: 2px solid var(--edge); padding: 16px; }
  .settings-body label { font: 400 13px var(--pix); color: var(--muted); }
  .settings-body select { color: var(--text); }
  .rail hr { border: 0; border-top: 2px dotted var(--line); }

  /* Plateau : posé dans un cadre de métal, double arête. */
  .board { background: var(--paper-3); border: 2px solid var(--edge); padding: 14px; box-shadow: inset 0 0 0 4px var(--paper-3), inset 0 0 0 6px var(--rivet); }
  @media (max-width: 760px) { .board { padding: 8px; } }
  .hint { color: var(--muted); font-size: 13px; }
  .flash { color: var(--ember); font: 600 14px var(--pix); }
  .flash.ok { color: var(--hp); }

  .minimap { border: 2px solid var(--edge); }
  .mm-pulse { border: 2px solid #ffd36a; }
  .portrait canvas, canvas.skin, .tile-portrait { background: var(--slot); border: 2px solid var(--edge); border-radius: 0; }
  .portrait-name .title { font-size: 34px; }
  .quote { background: var(--paper); border-left: 4px solid var(--ember); font-size: 14px; }
  .message .block + .block { border-top: 2px dotted var(--line); }
  .message .block div:first-child { font-weight: 700; }

  /* Onglets en languettes. */
  .side-tabs, .tabs { gap: 4px; }
  .side-tabs button, .tabs button, .look { box-shadow: none; margin-bottom: 0; background: var(--paper); color: var(--muted); }
  .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(--edge); color: var(--paper-2); }
  .sheet-tabs { border-bottom: 2px solid var(--edge); }

  .who strong { font: 400 28px var(--title); }
  .tag { font: 400 12px var(--pix); color: #fff; }

  /* Jauges en crans : la piste est découpée en dix (le cache des crans est posé par-dessus). */
  .bar .label { font: 400 13px var(--pix); }
  .bar .track, .gauge, .wear { position: relative; background: #3a332e; border: 2px solid var(--edge); height: 14px; }
  .bar .track::after, .gauge::after, .wear::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), var(--edge) calc(10% - 2px) 10%);
  }
  .gauge, .wear { height: 10px; }
  .gauge i { background: var(--act); }
  .wear i { background: var(--hp); }
  .wear i.low { background: var(--ember); }

  .stats div, .derived div { background: var(--slot); color: #b5a690; border: 2px solid var(--edge); font: 400 12px var(--pix); }
  .stats b, .derived b { font: 600 20px var(--pix); color: #e8b84e; }
  .derived b.over { color: #f08a74; }

  .log li, .reports li { border-left: 4px solid var(--line); background: color-mix(in srgb, var(--paper) 50%, transparent); }
  .log li.system { border-color: var(--act); color: var(--muted); }
  .log li.attack, .reports li.attack { border-color: var(--player); }
  .log li.defense, .reports li.defense { border-color: var(--ember); }
  .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: 400 12px var(--pix); color: var(--muted); }
  .reports { font-size: 14px; }

  .roster.faded { opacity: .75; }
  .chip { background: var(--slot); color: var(--on-slot); border: 2px solid var(--edge); box-shadow: none; margin: 0; font: 400 14px var(--pix); }
  .chip:active { translate: none; }
  .chip small { font-size: 11.5px; color: #b5a690; }
  .chip.on { outline: 3px solid var(--act); outline-offset: -1px; }
  .chip.healing small { color: #f08a74; }
  .chip.map small { color: #8fd08a; }
  table.train { font-size: 14px; }
  table.train td { border-bottom: 2px dotted var(--line); }
  table.train td:nth-child(2), table.train tr.muted td { color: var(--muted); }

  .arena-head strong { font: 400 26px var(--title); }
  .companies li { background: var(--paper); border: 2px solid var(--edge); }
  .companies li.mine { outline: 2px solid var(--act); font-weight: 700; }
  .companies small { color: var(--muted); font-weight: 400; }
  .dot { background: var(--act); border-radius: 0; }

  .banner-name { font: 400 34px/1 var(--title); }
  .gold-pill { background: var(--slot); color: #e8b84e; border: 2px solid var(--edge); font: 600 16px var(--pix); }

  /* Le râtelier : chaque mercenaire dans sa fente sombre. */
  .tile { background: var(--plate); border: 2px solid var(--edge); box-shadow: 0 3px 0 var(--edge); font: inherit; text-align: left; }
  .tile:hover:not(:disabled) { background: var(--plate); filter: brightness(1.03); }
  .tile.on { outline: 3px solid var(--act); outline-offset: 0; }
  .tile canvas.skin { border: 0; background: none; }
  .xp-badge { background: var(--act); color: var(--on-act); font: 600 12px var(--pix); border: 2px solid var(--edge); }
  .tile-name { font: 400 26px/1 var(--title); }
  .tile-row { font: 400 13px var(--pix); color: var(--muted); }
  .tile-row b { color: var(--text); font-weight: 600; }
  .tile-empty { background: none; border-style: dashed; box-shadow: none; color: var(--muted); }
  .tile-plus { font: 600 34px var(--pix); }

  .sheet-name { font: 400 40px/1 var(--title); }
  .train-line { border-bottom: 2px dotted var(--line); }
  .stat-line { font-size: 14px; }
  .stat-line > span:nth-child(3) { font: 600 15px var(--pix); color: var(--act); }
  .trait { font-size: 14px; }
  .trait.plus b { color: var(--hp); }
  .trait.minus b { color: var(--ember); }
  .trait.zero { color: var(--muted); }
  .slot { background: var(--paper); border: 2px solid var(--edge); }
  .slot-empty, .slot-taken { border-style: dashed; background: none; }

  .status { font: 400 13px var(--pix); color: var(--muted); }
  .status.map { color: var(--player); }
  .status.ready { color: var(--hp); }
  .status.resting { color: var(--ap); }
  .status.healing { color: var(--ember); }
  .warn { color: var(--ember); font: 600 13px var(--pix); }
  .gold { color: var(--ap); font: 600 15px var(--pix); }
  .worn { font-size: 14px; }
  .worn th, .worn td { border-bottom: 2px dotted var(--line); }
  .worn thead th { font: 400 13px var(--pix); color: var(--muted); }
  .item { border-bottom: 2px dotted var(--line); }
  .item:last-child { border-bottom: 0; }

  .brand .title { font: 400 58px/1 var(--title); }
  .brand .small { font: 400 14px var(--pix); }
  .page .card { padding: 24px 26px; }
  .page .error { color: var(--ember); font: 600 14px var(--pix); }
  .page .ok { color: var(--hp); }
  .page dt { color: var(--muted); font: 400 13px var(--pix); }
  .page footer { font-size: 13px; color: var(--muted); }
  .skip { border-top: 2px dotted var(--line); }
  .nav { font: 400 14px var(--pix); }
  .nav a { color: var(--muted); text-decoration: none; }
  .nav a[aria-current="page"] { color: var(--ink); text-decoration: underline 2px var(--act); }
}