/*
 * Thème « Astrolabe de l'érudit » : un instrument de mesure réel, pas un grimoire. Cercles concentriques et
 * arcs, graduations régulières, liserés de laiton sur fond minéral, petites étoiles géométriques ; une aiguille
 * à deux extrémités désigne la sélection. Chiffres en chasse fixe partout.
 * Polices : Marcellus (titres, noms), Roboto (texte), Roboto Mono (chiffres, libellés).
 */
:root[data-ui="astrolabe"] {
  --paper: #e3dfd2; --paper-2: #eeebe1; --paper-3: #d2cec0;
  --ink: #28343a; --ink-soft: #57646a; --line: #a6a99e; --line-strong: #657477;
  --btn-top: #eeebe1; --btn-bot: #eeebe1; --icon: #28343a;
  --laiton: #a17a2e; --rouge: #a74645;
  --grid: #9ba9a4; --tile: #c9d0c9; --blocked: #4e5b5b; --rough: #9b8a6c;
  --player: #9b772d; --bot: #8e4c50; --front: rgba(155, 119, 45, .2); --back: rgba(142, 76, 80, .14);
  --hp: #a74645; --ap: #34788b; --ep: #a17a2e; --accent: #34788b;
  --title: "Marcellus", Georgia, serif; --body: "Roboto", system-ui, sans-serif;
  --num: "Roboto Mono", "Courier New", monospace;
}
:root[data-ui="astrolabe"][data-theme="dark"] {
    --paper: #20272d; --paper-2: #2c353c; --paper-3: #182025;
    --ink: #e3e2d6; --ink-soft: #aab7b8; --line: #56666b; --line-strong: #91a4a2; --icon: #e3e2d6;
    --btn-top: #2c353c; --btn-bot: #2c353c;
    --laiton: #c9a050; --rouge: #e47c77;
    --grid: #52676a; --tile: #344449; --blocked: #192329; --rough: #75644b;
    --player: #e2bd65; --bot: #d88788; --front: rgba(226, 189, 101, .16); --back: rgba(216, 135, 136, .14);
    --hp: #e47c77; --ap: #78c0cf; --ep: #e3bd68; --accent: #78c0cf;
    color-scheme: dark;
}

:root[data-ui="astrolabe"] {
  --act: var(--choix, var(--ap)); --on-act: var(--sur-choix, #f2f1ea);
  --aiguille: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 12L12 9.6 21 12 12 14.4z'/%3E%3Ccircle cx='12' cy='12' r='2.4'/%3E%3Ccircle cx='3' cy='12' r='2' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3Ccircle cx='21' cy='12' r='2' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E");
  --graduation: repeating-linear-gradient(90deg, var(--line-strong) 0 1px, transparent 1px 6px),
                repeating-linear-gradient(90deg, var(--line-strong) 0 1px, transparent 1px 30px);
  --cercles: repeating-radial-gradient(circle at 100% 0, transparent 0 15px, color-mix(in srgb, var(--line) 55%, transparent) 15px 16px);

  body { background: var(--paper); font-size: 14px; }
  h1, h2, .title { font-family: var(--title); font-weight: 400; letter-spacing: .02em; }
  h1 { font-size: 28px; }
  h2 { font-size: 20px; }
  h3 { font: 500 11px var(--num); letter-spacing: .14em; text-transform: uppercase; color: var(--line-strong); }
  h3::before { content: "✦ "; color: var(--laiton); }
  h3::after { border-top: 0; height: 6px; background: var(--graduation); opacity: .7; }
  a { color: var(--ink); text-decoration-color: var(--act); text-underline-offset: 3px; }
  .muted { color: var(--muted); }
  .small { font-size: 12.5px; color: var(--muted); }
  :focus-visible { outline: 2px solid var(--act); outline-offset: 2px; }

  /* Boutons : platines au liseré de laiton ; au clic, l'anneau intérieur se serre. */
  button, select, input { background: var(--paper-2); border: 1px solid var(--laiton); border-radius: 6px; }
  button { background: var(--paper-3); color: var(--ink); font: 500 13px var(--num); letter-spacing: .03em; }
  button:hover:not(:disabled) { background: var(--paper-2); }
  button:active:not(:disabled) { box-shadow: inset 0 0 0 3px var(--laiton); }
  button:disabled { opacity: .45; }
  button.primary, a.btn.primary { background: var(--act); border-color: var(--act); color: var(--on-act); box-shadow: inset 0 0 0 2px var(--paper-2); }
  button.danger { background: var(--paper-2); color: var(--rouge); border-color: var(--rouge); }
  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-3); color: var(--ink); border: 1px solid var(--laiton); border-radius: 6px; font: 500 13px var(--num); }
  button.link { background: none; border: 0; box-shadow: none; color: var(--ink); text-decoration: underline 1px var(--act); font: inherit; }
  button.mini, .small-btn { font-size: 12px; }

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

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

  /* Panneaux : platine minérale, cercles gravés dans le coin. */
  .paper, .panel, .log, .card-pane { background: var(--paper-2); background-image: var(--cercles); background-size: 220px 220px; background-repeat: no-repeat; background-position: right top;
    border: 1px solid var(--laiton); border-radius: 8px; }
  .notice.quiet { border: 0; background-image: none; }

  .topbar { background: var(--paper-2); border-bottom: 1px solid var(--laiton); box-shadow: 0 3px 0 -2px var(--line); }
  .topbar .muted, .topbar .small { color: var(--muted); }
  .avatar { background: var(--paper-3); color: var(--ink); border: 1px solid var(--laiton); border-radius: 50%; box-shadow: 0 0 0 3px var(--paper-2), 0 0 0 4px var(--line); font: 400 24px var(--title); }
  .hero-name { font: 400 20px/1 var(--title); }
  .hero-sub { font: 500 10.5px var(--num); 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: 1px solid var(--laiton); border-radius: 8px; }
  .settings-body label { font: 500 10.5px var(--num); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
  .settings-body select { color: var(--text); }
  .rail { border-right: 1px solid var(--laiton); background: var(--paper-3); }
  .rail hr { border: 0; height: 6px; background: var(--graduation); opacity: .7; }
  @media (max-width: 760px) { .rail { border-right: 0; border-bottom: 1px solid var(--laiton); } }

  .board { background: var(--paper-2); border: 1px solid var(--laiton); border-radius: 10px; box-shadow: inset 0 0 0 4px var(--paper-2), inset 0 0 0 5px var(--line); padding: 16px; }
  @media (max-width: 760px) { .board { padding: 8px; } }
  .hint { color: var(--muted); font-size: 12.5px; }
  .flash { color: var(--rouge); font-weight: 500; }
  .flash.ok { color: var(--ap); }

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

  /* Onglets : un repère rond devant chacun ; l'actif est cerclé. */
  .side-tabs, .tabs { gap: 4px; border-bottom: 1px solid var(--line); }
  .side-tabs button, .tabs button, .look { background: none; border: 0; border-radius: 0; box-shadow: none; color: var(--muted); font: 400 14px var(--title); position: relative; }
  .side-tabs button::before, .tabs button::before, .look::before { content: ""; position: absolute; left: 3px; top: 50%; width: 7px; height: 7px; margin-top: -4px; border: 1px solid var(--line-strong); border-radius: 50%; }
  .side-tabs button:active, .tabs button:active, .look:active { box-shadow: none; }
  .side-tabs button[aria-pressed="true"], .tabs button[aria-pressed="true"], .look[aria-pressed="true"] { color: var(--ink); box-shadow: inset 0 -1px 0 var(--act); }
  .side-tabs button[aria-pressed="true"]::before, .tabs button[aria-pressed="true"]::before, .look[aria-pressed="true"]::before {
    background: var(--act); border-color: var(--act); box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--act); }
  .side-tabs { margin-bottom: 8px; }

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

  /* Jauges : règles graduées. */
  .bar .label { font: 500 11px var(--num); letter-spacing: .06em; }
  .bar .track, .gauge, .wear { background: var(--paper-3); border: 1px solid var(--line-strong); border-radius: 6px; height: 12px; position: relative; }
  .bar .track::after, .gauge::after, .wear::after { content: ""; position: absolute; inset: 0; background: var(--graduation); pointer-events: none;
    -webkit-mask: linear-gradient(transparent 55%, #000 55%); mask: linear-gradient(transparent 55%, #000 55%); opacity: .6; }
  .gauge, .wear { height: 8px; }
  .gauge i { background: var(--line-strong); }
  .wear i { background: var(--laiton); }
  .wear i.low { background: var(--rouge); }

  .stats { gap: 6px; }
  .stats div, .derived div { border: 1px solid var(--line); border-radius: 50% / 28%; font: 500 10px var(--num); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
  .stats b, .derived b { font: 500 24px/1.1 var(--num); color: var(--ink); }
  .derived b { font-size: 18px; }
  .derived b.over { color: var(--rouge); }

  .log li, .reports li { border-left: 1px 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(--rouge); }
  .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 11px var(--num); color: var(--muted); }
  .reports { font-size: 13.5px; }

  .roster.faded { opacity: .75; }
  .chip { background: var(--paper-2); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 6px; box-shadow: none; font: 400 15px var(--title); }
  .chip:active { box-shadow: none; }
  .chip small { font: 400 10.5px var(--num); letter-spacing: .06em; color: var(--muted); }
  .chip.on { border-color: var(--act); box-shadow: inset 0 0 0 1px var(--act); }
  .chip.healing small { color: var(--rouge); }
  .chip.map small { color: var(--ap); }
  table.train { font-size: 13.5px; }
  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: 400 22px var(--title); }
  .companies li { border: 1px solid var(--line-strong); border-radius: 6px; }
  .companies li.mine { border-color: var(--act); box-shadow: inset 0 0 0 1px var(--act); }
  .companies small { color: var(--muted); }
  .dot { background: var(--act); border-radius: 50%; }

  .banner { background: var(--paper-2); background-image: var(--cercles); background-size: 300px 300px; background-repeat: no-repeat; background-position: right top; border-bottom: 1px solid var(--laiton); }
  .banner .small, .banner .muted { color: var(--muted); }
  .banner-name { font: 400 34px/1 var(--title); }
  .banner-name::before { content: "✦ "; color: var(--laiton); font-size: .55em; vertical-align: .25em; }
  .gold-pill { font: 500 22px var(--num); color: var(--ink); }

  /* Mercenaires : platines ; le choisi porte l'aiguille. */
  .tile { background: var(--paper-2); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 8px; box-shadow: none; font: inherit; letter-spacing: 0; text-align: left; }
  .tile:hover:not(:disabled) { border-color: var(--laiton); }
  .tile:active:not(:disabled) { box-shadow: none; }
  .tile.on { border-color: var(--act); box-shadow: inset 0 0 0 1px var(--act); }
  .tile.on .tile-portrait::after { content: ""; position: absolute; left: 4px; top: 4px; width: 22px; height: 22px;
    background: var(--act); -webkit-mask: var(--aiguille) center/contain no-repeat; mask: var(--aiguille) center/contain no-repeat; }
  .tile-portrait { background: var(--paper); background-image: repeating-radial-gradient(circle, transparent 0 13px, color-mix(in srgb, var(--line) 50%, transparent) 13px 14px); border: 1px solid var(--line); border-radius: 6px; }
  .tile canvas.skin { border: 0; background: none; border-radius: 0; }
  .xp-badge { background: var(--act); color: var(--on-act); font: 500 10.5px var(--num); border-radius: 10px; }
  .tile-name { font: 400 20px/1.1 var(--title); }
  .tile-row { font-size: 12.5px; color: var(--muted); }
  .tile-row b { color: var(--text); font: 500 12.5px var(--num); }
  .tile-empty { background: none; border-style: dashed; color: var(--muted); }
  .tile-plus { font: 400 36px var(--title); }

  .sheet-name { font: 400 38px/1 var(--title); }
  .train-line { border-bottom: 1px solid var(--line); }
  .stat-line { font-size: 13.5px; }
  .stat-line > span:nth-child(3) { font: 500 15px var(--num); }
  .trait { font-size: 13.5px; }
  .trait.plus b { color: var(--ap); }
  .trait.minus b { color: var(--rouge); }
  .trait.zero { color: var(--muted); }
  .slot { background: var(--paper-2); border: 1px solid var(--line-strong); border-radius: 6px; }
  .slot-empty, .slot-taken { border-style: dashed; background: none; }

  .status { font: 500 10.5px var(--num); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .status.map { color: var(--player); }
  .status.ready { color: var(--ap); }
  .status.resting { color: var(--laiton); }
  .status.healing { color: var(--rouge); }
  .warn { color: var(--rouge); font-size: 12.5px; }
  .gold { font-family: var(--num); font-weight: 500; }
  .worn { font-size: 13.5px; }
  .worn th, .worn td { border-bottom: 1px solid var(--line); }
  .worn thead th { font: 500 10.5px var(--num); letter-spacing: .1em; text-transform: uppercase; color: var(--line-strong); border-bottom: 1px solid var(--laiton); }
  .item { border-bottom: 1px solid var(--line); }
  .item:last-child { border-bottom: 0; }

  .brand .title { font: 400 50px/1 var(--title); color: var(--ink); }
  .brand .small { font-size: 14px; }
  .page .card { background: var(--paper-2); background-image: var(--cercles); background-size: 240px 240px; background-repeat: no-repeat; background-position: right top;
    border: 1px solid var(--laiton); border-radius: 10px; box-shadow: inset 0 0 0 4px var(--paper-2), inset 0 0 0 5px var(--line); }
  .page .error { color: var(--rouge); font-weight: 500; }
  .page .ok { color: var(--ap); }
  .page dt { color: var(--muted); font: 500 10.5px var(--num); letter-spacing: .1em; text-transform: uppercase; }
  .page footer { font-size: 12.5px; color: var(--muted); }
  .skip { border-top: 1px solid var(--line); }
  .nav { font: 400 14px var(--title); }
  .nav a { color: var(--muted); text-decoration: none; }
  .nav a[aria-current="page"] { color: var(--ink); text-decoration: underline 1px var(--act); text-underline-offset: 5px; }
}