/* ============================================================
   CHRONIQUE DU MAITRE — socle de style
   Reprend le langage visuel de l'outil de temps : memes variables,
   memes composants. Le cadran et les scenes arriveront en Phase 4.
   ============================================================ */

:root{
  --bg:        #05060a;
  --panel:     #0d1016;
  --panel-2:   #12161e;
  --panel-3:   #1a1f2a;
  --line:      #232936;
  --line-2:    #333c4c;

  --gold:      #b08d4f;
  --gold-lt:   #e3c78d;
  --gold-dk:   #6d5730;

  --txt:       #e4dfd2;
  --txt-2:     #a9a396;
  --muted:     #737a88;

  --danger:    #b1402f;
  --ok:        #6f9558;

  --serif: "Cinzel","Trajan Pro","Bookman Old Style","Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;
  --sans: "Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono: "Consolas","SF Mono","Roboto Mono",Menlo,monospace;

  --r-sm: 6px;
  --r:    10px;
  --r-lg: 16px;

  --shadow: 0 18px 45px -12px rgba(0,0,0,.8);
  --inset: inset 0 1px 0 rgba(255,255,255,.045);
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family:var(--sans);
  font-size:14px;
  line-height:1.5;
  color:var(--txt);
  background-color:var(--bg);
  background-image:
    radial-gradient(900px 520px at 10% -12%, rgba(176,141,79,.11), transparent 62%),
    radial-gradient(820px 640px at 108% 4%, rgba(63,80,136,.13), transparent 64%),
    radial-gradient(680px 460px at 50% 118%, rgba(189,82,56,.08), transparent 66%),
    linear-gradient(180deg,#05060a 0%,#080a10 42%,#040509 100%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}

body::before{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(120% 92% at 50% 42%, transparent 52%, rgba(0,0,0,.55) 100%);
}

::selection{ background:rgba(176,141,79,.32); color:#fff; }

*::-webkit-scrollbar{ width:9px; height:9px; }
*::-webkit-scrollbar-track{ background:rgba(0,0,0,.25); border-radius:99px; }
*::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:99px; }

/* --------------------------- Ossature --------------------------- */

#app{ position:relative; z-index:1; min-height:100%; }

.gate{
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:26px 18px;
}

.gate-card{
  width:100%; max-width:430px;
  background:
    linear-gradient(180deg, rgba(176,141,79,.035), transparent 140px),
    linear-gradient(180deg, var(--panel-2), var(--panel));
  border:1px solid var(--line);
  border-top:1px solid rgba(176,141,79,.3);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow), var(--inset);
  position:relative;
}

/* Equerres de ferronnerie, comme sur les panneaux de l'outil de temps */
.gate-card::before, .gate-card::after{
  content:""; position:absolute; width:15px; height:15px; pointer-events:none;
  border:1px solid rgba(176,141,79,.4);
}
.gate-card::before{ top:6px; left:6px; border-right:0; border-bottom:0; border-radius:5px 0 0 0; }
.gate-card::after{ bottom:6px; right:6px; border-left:0; border-top:0; border-radius:0 0 5px 0; }

.gate-head{ text-align:center; padding:30px 26px 4px; }

.gate-sigil{
  width:52px; height:52px; margin:0 auto 14px;
  display:grid; place-items:center; border-radius:50%;
  border:1px solid rgba(176,141,79,.45);
  background:radial-gradient(circle at 34% 28%, #3a2f1d, #14161f 72%);
  box-shadow:0 0 0 4px rgba(176,141,79,.07), inset 0 0 14px rgba(176,141,79,.18);
}
.gate-sigil svg{ width:28px; height:28px; }

.gate-head h1{
  margin:0; font-family:var(--serif); font-size:21px; font-weight:600;
  letter-spacing:.055em; color:var(--gold-lt);
  text-shadow:0 1px 0 #000, 0 0 22px rgba(176,141,79,.22);
}
.gate-head p{
  margin:5px 0 0; font-size:11.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted);
}

.gate-body{ padding:22px 26px 26px; }
.gate-foot{
  padding:15px 26px; border-top:1px solid var(--line);
  background:rgba(0,0,0,.24); border-radius:0 0 var(--r-lg) var(--r-lg);
  text-align:center; font-size:12.5px; color:var(--txt-2);
}

/* --------------------------- Formulaires --------------------------- */

.field{ display:grid; gap:6px; margin-bottom:15px; }
.field > label{
  font-size:10.5px; letter-spacing:.17em; text-transform:uppercase;
  color:var(--muted); font-weight:600;
}

.input{
  width:100%; padding:11px 12px; font-family:inherit; font-size:14px; color:var(--txt);
  background:rgba(0,0,0,.42); border:1px solid var(--line-2); border-radius:var(--r-sm);
  transition:border-color .15s, box-shadow .15s;
}
.input:focus{
  outline:none; border-color:var(--gold-dk);
  box-shadow:0 0 0 3px rgba(176,141,79,.13);
}
.input[aria-invalid="true"]{ border-color:var(--danger); }

.field-error{ font-size:11.5px; color:#e9a396; min-height:0; }

.hint{ font-size:11.5px; color:var(--muted); line-height:1.55; }

/* --------------------------- Boutons --------------------------- */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 16px; font-family:var(--sans); font-size:11.5px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--txt);
  background:linear-gradient(180deg, var(--panel-3), var(--panel));
  border:1px solid var(--line-2); border-radius:var(--r); cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 2px 0 rgba(0,0,0,.45);
  transition:border-color .16s, transform .09s, filter .16s, color .16s;
  white-space:nowrap; -webkit-user-select:none; user-select:none;
  text-decoration:none;   /* .btn sert aussi sur des <a> */
}
.btn:hover{ border-color:var(--gold-dk); color:var(--gold-lt); }
.btn:active{ transform:translateY(1px); }
.btn:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.btn[disabled]{ opacity:.45; cursor:not-allowed; transform:none; }

.btn-gold{
  color:#191204;
  background:linear-gradient(180deg, #e9d0a0 0%, var(--gold) 48%, #8f7134 100%);
  border-color:#cdae74; text-shadow:0 1px 0 rgba(255,255,255,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.3),
             0 6px 20px -8px rgba(176,141,79,.6);
}
.btn-gold:hover{ color:#191204; filter:brightness(1.1); border-color:#efd9ab; }
.btn-block{ width:100%; }
.btn-lg{ padding:14px 24px; font-size:12.5px; letter-spacing:.16em; }

.link{
  color:var(--gold-lt); text-decoration:none;
  border-bottom:1px solid rgba(176,141,79,.35);
  background:none; border-top:0; border-left:0; border-right:0;
  font:inherit; cursor:pointer; padding:0;
}
.link:hover{ border-bottom-color:var(--gold-lt); }

/* --------------------------- Encadres --------------------------- */

.notice{
  display:flex; gap:11px; padding:12px 14px; margin-bottom:16px;
  border:1px solid var(--line-2); border-left:3px solid var(--gold);
  border-radius:var(--r-sm);
  background:linear-gradient(90deg, rgba(176,141,79,.08), rgba(0,0,0,.24));
  font-size:12.5px; line-height:1.6; color:var(--txt-2);
}
.notice svg{ width:17px; height:17px; flex:none; color:var(--gold); margin-top:1px; }
.notice.danger{
  border-left-color:var(--danger);
  background:linear-gradient(90deg, rgba(208,80,63,.13), rgba(0,0,0,.24));
  color:#e9b4a9;
}
.notice.danger svg{ color:var(--danger); }
.notice.ok{
  border-left-color:var(--ok);
  background:linear-gradient(90deg, rgba(111,149,88,.12), rgba(0,0,0,.24));
  color:#bcd0ac;
}
.notice.ok svg{ color:var(--ok); }

/* --------------------------- Divers --------------------------- */

.center{ text-align:center; }
.muted{ color:var(--muted); }
.small{ font-size:11.5px; }
.hidden{ display:none !important; }
/* L'attribut `hidden` ne vaut que tant qu'aucune regle ne fixe `display` : une
   seule `.panel{display:grid}` ajoutee un jour ferait reapparaitre tous les
   panneaux masques. On le rend definitif. */
[hidden]{ display:none !important; }
.stack{ display:grid; gap:14px; }

.spinner{
  width:15px; height:15px; border-radius:50%;
  border:2px solid rgba(0,0,0,.25); border-top-color:currentColor;
  animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* Barre du haut, une fois connecte */
.topbar{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:13px 20px; margin-bottom:20px;
  background:linear-gradient(180deg, rgba(43,33,24,.6), rgba(19,22,31,.86));
  border:1px solid var(--line);
  border-top:1px solid rgba(176,141,79,.28);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow), var(--inset);
}
.topbar .brand-txt h1{
  margin:0; font-family:var(--serif); font-size:18px; font-weight:600;
  letter-spacing:.055em; color:var(--gold-lt);
}
.topbar .spacer{ margin-left:auto; }
.topbar .who{ font-size:12.5px; color:var(--txt-2); }
.topbar .who strong{ color:var(--gold-lt); font-weight:600; }

.app-shell{ max-width:1100px; margin:0 auto; padding:22px 22px 56px; }

.panel{
  background:linear-gradient(180deg, var(--panel-2), var(--panel));
  border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow), var(--inset);
  padding:26px;
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
  }
}

/* ============================================================
   PHASE 2 — Campagnes
   ============================================================ */

.panel + .panel{ margin-top:20px; }

/* Les salles dont l'ordre change en cours de route (salle de campagne, fiche) :
   l'ecart vient de la grille et non du voisinage, pour qu'un panneau deplace ou
   masque ne laisse ni trou ni panneaux colles. */
.campaign-blocks, .sheet-blocks{ display:grid; gap:20px; min-width:0; }
.campaign-blocks > .panel + .panel, .sheet-blocks > .panel + .panel{ margin-top:0; }

.panel-title{
  margin:0 0 16px; font-family:var(--serif); font-size:15px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold);
  text-shadow:0 1px 0 #000;
}
.panel-head-row{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:16px;
}
.panel-head-row .panel-title{ margin:0; }
/* Le dernier élément est repoussé à droite — sauf s'il est aussi le premier :
   sans cette réserve, un titre seul (panneau sans bouton) se retrouverait
   collé au bord droit. */
.panel-head-row > :last-child:not(:first-child){ margin-left:auto; }

.section-title{
  margin:0 0 10px; font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted); font-weight:600;
}

.btn-sm{ padding:7px 12px; font-size:11px; letter-spacing:.08em; }

/* --------------------------- Liste des campagnes --------------------------- */

.campaign-list{ display:grid; gap:10px; }

.campaign-card{
  display:flex; align-items:center; gap:14px; padding:14px 16px;
  border:1px solid var(--line); border-left:3px solid var(--season, var(--gold));
  border-radius:var(--r); background:rgba(0,0,0,.26);
  text-decoration:none; color:inherit;
  transition:border-color .16s, background .16s, transform .12s;
}
.campaign-card:hover{
  background:rgba(255,255,255,.03); border-color:var(--line-2);
  border-left-color:var(--season, var(--gold)); transform:translateX(2px);
}
.campaign-card:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

.cc-main{ min-width:0; flex:1; }
.cc-name{
  font-family:var(--serif); font-size:16px; color:var(--gold-lt);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cc-meta{ font-size:11.5px; color:var(--muted); margin-top:4px; }
.cc-arrow{ flex:none; color:var(--muted); display:grid; place-items:center; }
.cc-arrow svg{ width:18px; height:18px; }

.tag{
  display:inline-block; padding:2px 8px; margin-right:4px; border-radius:99px;
  font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  border:1px solid var(--line-2); color:var(--txt-2); background:rgba(0,0,0,.3);
}
.tag.gm{ color:var(--gold-lt); border-color:var(--gold-dk); }

.empty-state{ text-align:center; padding:30px 16px; color:var(--muted); font-size:13px; }
.empty-state svg{ width:34px; height:34px; opacity:.4; margin-bottom:10px; }

/* --------------------------- Membres --------------------------- */

.member-list{ display:grid; gap:8px; }
.member{
  display:flex; align-items:center; gap:12px; padding:10px 13px;
  border:1px solid var(--line); border-radius:var(--r); background:rgba(0,0,0,.26);
}
.member-ico{
  width:30px; height:30px; flex:none; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--line-2); background:rgba(0,0,0,.42); color:var(--muted);
}
.member-ico svg{ width:15px; height:15px; }
.member-ico.gm{ color:var(--gold); border-color:var(--gold-dk); }
.member-name{ font-family:var(--serif); font-size:14.5px; color:var(--txt); }
.member-role{ font-size:11px; color:var(--muted); margin-top:1px; }

/* --------------------------- Calendrier --------------------------- */

.cal-head{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:14px 15px; margin-bottom:14px;
  border:1px solid var(--line); border-left:3px solid var(--season, var(--gold));
  border-radius:var(--r);
  background:linear-gradient(90deg, rgba(255,255,255,.03), rgba(0,0,0,.28));
}
.cal-day{
  font-family:var(--serif); font-size:21px; line-height:1.15; color:var(--gold-lt);
  text-shadow:0 1px 0 #000;
}
.cal-year{ margin-top:3px; font-size:12px; color:var(--muted); }
.season-badge{
  margin-left:auto; flex:none;
  display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:99px;
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; font-weight:600;
  border:1px solid currentColor; background:rgba(0,0,0,.42);
}

.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; }
.stat{ padding:12px 13px; border:1px solid var(--line); border-radius:var(--r); background:rgba(0,0,0,.26); }
.stat .s-label{ font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.stat .s-value{
  margin-top:4px; font-family:var(--serif); font-size:15px; color:var(--gold-lt);
  font-variant-numeric:tabular-nums;
}

/* --------------------------- Choix et selecteurs --------------------------- */

.choice-grid{ display:grid; gap:10px; }
.choice-grid.cols-2{ grid-template-columns:repeat(2,1fr); }
.choice-grid.cols-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:560px){
  .choice-grid.cols-4{ grid-template-columns:repeat(2,1fr); }
  .choice-grid.cols-2{ grid-template-columns:1fr; }
}

.choice{
  display:flex; flex-direction:column; gap:5px; align-items:flex-start;
  padding:13px 14px; text-align:left; border:1px solid var(--line-2); border-radius:var(--r);
  background:rgba(0,0,0,.3); cursor:pointer; font-family:inherit; color:inherit;
  transition:border-color .16s, background .16s, box-shadow .16s;
}
.choice:hover{ border-color:var(--gold-dk); }
.choice:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.choice[aria-pressed="true"]{
  border-color:var(--gold);
  background:linear-gradient(180deg, rgba(176,141,79,.16), rgba(0,0,0,.32));
  box-shadow:0 0 0 3px rgba(176,141,79,.12);
}
.choice .c-top{ display:flex; align-items:center; gap:8px; width:100%; }
.choice .c-top svg{ width:17px; height:17px; flex:none; }
.choice .c-name{ font-family:var(--serif); font-size:14px; color:var(--txt); letter-spacing:.04em; }
.choice .c-desc{ font-size:11.5px; color:var(--muted); line-height:1.5; }

.select{
  width:100%; padding:11px 12px; font-family:inherit; font-size:14px; color:var(--txt);
  background:rgba(0,0,0,.42); border:1px solid var(--line-2); border-radius:var(--r-sm);
  appearance:none; cursor:pointer; padding-right:34px;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b08d4f' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; background-size:15px;
  transition:border-color .15s, box-shadow .15s;
}
.select:focus{ outline:none; border-color:var(--gold-dk); box-shadow:0 0 0 3px rgba(176,141,79,.13); }
.select option{ background:#13161f; color:var(--txt); }
.select:disabled{ cursor:not-allowed; }

/* Mois / quantieme / annee : le mois a besoin de plus de large que les deux autres */
.date-row{ display:grid; gap:10px; grid-template-columns:1.7fr 1fr 1fr; }
@media (max-width:520px){ .date-row{ grid-template-columns:1fr; } }

/* ============================================================
   PHASE 3 — Invitations et QR
   ============================================================ */

.field-label{
  display:block; margin-bottom:6px;
  font-size:10.5px; letter-spacing:.17em; text-transform:uppercase;
  color:var(--muted); font-weight:600;
}

.invite-grid{
  display:grid; gap:22px; align-items:start;
  grid-template-columns:minmax(0,1fr) auto;
}
@media (max-width:620px){ .invite-grid{ grid-template-columns:1fr; } }

.invite-url{ display:flex; gap:8px; }
.invite-url .input{ flex:1; min-width:0; font-size:12.5px; }
.mono{ font-family:var(--mono); }

/* Le QR a besoin d'un fond clair et d'une zone de silence : sur le parchemin
   sombre du reste de l'interface, un lecteur ne le trouverait pas. */
.qr-block{ text-align:center; }
.qr{
  display:inline-block; padding:8px; border-radius:var(--r);
  background:#f2ecdd; border:1px solid var(--line-2);
  box-shadow:0 8px 24px -10px rgba(0,0,0,.8);
  line-height:0;
}
.qr svg{ display:block; width:172px; height:172px; }

/* --------------------------- Écran d'invitation --------------------------- */

.invite-summary{
  padding:16px; margin-bottom:18px;
  border:1px solid var(--line-2); border-left:3px solid var(--gold);
  border-radius:var(--r);
  background:linear-gradient(90deg, rgba(176,141,79,.09), rgba(0,0,0,.28));
  text-align:center;
}
.is-name{
  font-family:var(--serif); font-size:19px; color:var(--gold-lt);
  text-shadow:0 1px 0 #000; line-height:1.25;
}
.is-meta{ font-size:12px; color:var(--muted); margin-top:6px; }
.is-meta strong{ color:var(--txt-2); font-weight:600; }

/* ============================================================
   PHASE 4 — Horloge, cadran, activites, journal
   ============================================================ */

.campaign-head{ margin-bottom:18px; }
.campaign-title{
  margin:0; font-family:var(--serif); font-size:24px; font-weight:600;
  letter-spacing:.05em; color:var(--gold-lt); text-shadow:0 1px 0 #000;
}

/* --------------------------- Cadran --------------------------- */

.clock-stage{ display:flex; flex-direction:column; align-items:center; padding:8px 0 4px; }

.clock-wrap{
  position:relative; width:min(430px, 84vw); aspect-ratio:1/1;
  filter:drop-shadow(0 30px 46px rgba(0,0,0,.75)); touch-action:none;
}
.clock-wrap svg{ display:block; width:100%; height:100%; overflow:visible; }
.clock-wrap.interactive svg{ cursor:grab; }
.clock-wrap.dragging svg{ cursor:grabbing; }

.clock-center{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:5px;
  pointer-events:none; text-align:center;
}

.phase-badge{
  display:inline-flex; align-items:center; gap:7px; padding:4px 13px; border-radius:99px;
  font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; font-weight:600;
  border:1px solid currentColor; background:rgba(0,0,0,.42); transition:color .6s ease;
}
.phase-badge .pb-icon{ width:13px; height:13px; }

.time-read{
  font-family:var(--serif); font-size:clamp(31px, 7.5vw, 48px); font-weight:600;
  letter-spacing:.05em; line-height:1.02; color:#f2ecdd;
  text-shadow:0 2px 3px #000, 0 0 38px rgba(227,199,141,.34);
  font-variant-numeric:tabular-nums;
}
.time-read .sec{ font-size:.54em; color:var(--gold); margin-left:3px; }

.day-read{
  font-family:var(--serif); font-size:12.5px; letter-spacing:.3em;
  text-transform:uppercase; color:var(--txt-2); text-shadow:0 1px 0 #000;
}
.next-phase{ font-size:10.5px; color:var(--muted); letter-spacing:.08em; max-width:172px; }

.paused-flag{
  margin-top:2px; font-size:10px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--danger); opacity:0; transition:opacity .3s ease;
}
.paused-flag.on{ opacity:1; animation:pulse 2.1s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.35} }

/* --------------------------- Commandes --------------------------- */

.clock-controls{ width:100%; max-width:520px; margin-top:20px; }
.controls-row{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.playpause{ min-width:190px; }
.playpause svg{ width:15px; height:15px; }

.quick-adjust{
  display:flex; align-items:center; gap:9px; justify-content:center; flex-wrap:wrap;
  padding:11px 13px; border:1px dashed var(--line-2); border-radius:var(--r);
  background:rgba(0,0,0,.2);
}
.quick-adjust .qa-label{
  font-size:10px; letter-spacing:.19em; text-transform:uppercase; color:var(--muted);
}

.row-end{ display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; }

/* --------------------------- Modes --------------------------- */

.modes{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
@media (max-width:560px){ .modes{ grid-template-columns:1fr; } }

.mode-card{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:16px 12px 14px; border:1px solid var(--line-2); border-radius:var(--r);
  background:linear-gradient(180deg, var(--panel-3), rgba(10,12,17,.9));
  cursor:pointer; text-align:center; font-family:inherit; color:inherit;
  transition:border-color .2s, transform .12s, box-shadow .2s;
}
.mode-card::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 50% 118%, var(--accent, var(--gold)), transparent 66%);
  opacity:.13; transition:opacity .25s;
}
.mode-card:hover{
  border-color:var(--accent, var(--gold)); transform:translateY(-2px);
  box-shadow:0 14px 30px -14px var(--accent,var(--gold));
}
.mode-card:hover::before{ opacity:.28; }
.mode-card .mc-ico{ position:relative; color:var(--accent,var(--gold)); line-height:0; }
.mode-card .mc-ico svg{ width:28px; height:28px; }
.mode-card .mc-title{
  position:relative; font-family:var(--serif); font-size:14px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--txt);
}

/* --------------------------- Activite --------------------------- */

.activity{
  padding:16px; border:1px solid var(--line-2); border-radius:var(--r);
  background:rgba(0,0,0,.24);
}
.activity-head{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.activity-tag{
  padding:4px 12px; border-radius:99px; font-size:10.5px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  border:1px solid currentColor; background:rgba(0,0,0,.35);
}
.activity-tag.combat{ color:#d98a72; }
.activity-tag.travel{ color:#8fb98a; }
.activity-tag.rest{ color:#8ba7d6; }

.round-block{ text-align:center; }
.round-tag{
  font-family:var(--serif); font-size:10.5px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--muted);
}
.round-num{
  font-family:var(--serif); font-size:50px; line-height:1; color:var(--gold-lt);
  text-shadow:0 2px 3px #000, 0 0 32px rgba(176,141,79,.45);
  font-variant-numeric:tabular-nums;
}

.readout{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(118px,1fr)); gap:1px;
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--line);
}
.readout .ro{
  padding:12px 13px; text-align:center;
  background:linear-gradient(180deg, rgba(26,31,42,.96), rgba(13,16,22,.96));
}
.readout .ro-label{
  font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}
.readout .ro-value{
  margin-top:4px; font-family:var(--serif); font-size:19px; color:var(--gold-lt);
  font-variant-numeric:tabular-nums; line-height:1.15;
}
.readout .ro.alert{ background:linear-gradient(180deg,#2a1210,#1a0b0a); }
.readout .ro.alert .ro-value{ color:var(--danger); }

.segments{ display:grid; gap:7px; }
.segment{
  display:flex; align-items:center; gap:10px; padding:9px 12px;
  border:1px solid var(--line); border-radius:var(--r-sm);
  background:rgba(0,0,0,.28); font-size:12.5px;
}
.segment.interrupt{ border-color:#5c2a24; background:#24100d; color:#e5b3aa; }
.segment.pending{ border-style:dashed; color:var(--muted); }
.segment.stale{ opacity:.55; }
.segment .sg-note{ font-size:11px; color:var(--muted); }
.segment .sg-dur{ margin-left:auto; font-family:var(--mono); font-size:12px; color:var(--txt-2); }

.interrupt-zone{
  display:grid; gap:12px; padding:14px; border:1px dashed var(--line-2);
  border-radius:var(--r); background:rgba(0,0,0,.2);
}
.field-row{ display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }

/* --------------------------- Widget joueur --------------------------- */

.widget-bar{ margin-bottom:20px; }

.time-widget{
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  padding:14px 20px;
  background:linear-gradient(180deg, rgba(43,33,24,.6), rgba(19,22,31,.86));
  border:1px solid var(--line); border-top:1px solid rgba(176,141,79,.28);
  border-radius:var(--r-lg); box-shadow:var(--shadow), var(--inset);
}
.tw-main{ display:flex; align-items:center; gap:14px; }
.tw-time{
  font-family:var(--serif); font-size:34px; line-height:1; color:#f2ecdd;
  font-variant-numeric:tabular-nums; text-shadow:0 2px 3px #000, 0 0 26px rgba(227,199,141,.3);
}
.tw-phase{
  display:inline-flex; align-items:center; gap:7px; padding:4px 12px; border-radius:99px;
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; font-weight:600;
  border:1px solid currentColor; background:rgba(0,0,0,.42); transition:color .6s ease;
}
.tw-icon{ line-height:0; }
.tw-icon svg{ width:13px; height:13px; }
.tw-side{ margin-left:auto; text-align:right; }
.tw-date{ font-family:var(--serif); font-size:14px; color:var(--gold-lt); }
.tw-next{ font-size:11px; color:var(--muted); margin-top:3px; }
.tw-state{ font-size:11px; margin-top:4px; letter-spacing:.14em; text-transform:uppercase; }
.tw-state.paused{ color:var(--danger); }
.tw-state.active{ color:var(--gold); }
/* La main est au joueur : impossible de le manquer, sans clignoter pour autant. */
.tw-state.your-turn{
  display:inline-block; padding:3px 10px; border-radius:99px;
  color:#1a1408; background:linear-gradient(180deg, var(--gold-lt), var(--gold)); font-weight:700;
}

/* Ordre d'initiative, console du MJ. */
.initiative{ display:grid; gap:8px; padding:12px; border:1px solid var(--line-2); border-radius:var(--r); background:rgba(0,0,0,.2); }
.init-head{ display:flex; align-items:center; gap:10px; }
.init-head .btn, .init-head .small{ margin-left:auto; }
.init-row{ display:grid; grid-template-columns:minmax(0,1fr) 70px auto; gap:8px; align-items:center; }
.init-name{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.init-input{ width:100%; }
.init-order{ list-style:none; margin:0; padding:0; display:grid; gap:4px; }
.init-entry{
  display:grid; grid-template-columns:38px minmax(0,1fr) auto 26px; gap:8px; align-items:center;
  padding:6px 8px; border:1px solid var(--line); border-radius:var(--r-sm); background:rgba(0,0,0,.25);
}
.init-entry.npc .init-name{ color:#e9b4a9; }
.init-entry.current{ border-color:var(--gold); background:rgba(176,141,79,.14); }
.init-value{ font-family:var(--mono); text-align:center; color:var(--gold-lt); }
.init-turn{ font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-lt); }
@media (max-width:560px){
  .tw-side{ margin-left:0; text-align:left; width:100%; }
}

/* --------------------------- Journal --------------------------- */

.journal{ display:grid; gap:0; max-height:340px; overflow-y:auto; }
.log{
  display:flex; gap:11px; padding:10px 4px 10px 2px;
  border-bottom:1px solid rgba(42,48,64,.55);
}
.log:last-child{ border-bottom:0; }
.log-ico{
  width:27px; height:27px; flex:none; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--line-2); background:rgba(0,0,0,.42); color:var(--muted);
}
.log-ico svg{ width:14px; height:14px; }
.log-ico.combat{ color:#d98a72; border-color:#5c3128; }
.log-ico.voyage{ color:#8fb98a; border-color:#2f4a2c; }
.log-ico.repos{ color:#8ba7d6; border-color:#2c3a58; }
.log-ico.temps{ color:var(--gold); border-color:var(--gold-dk); }
.log-ico.recit{ color:var(--txt-2); }
.log-ico.bourse{ color:var(--gold-lt); border-color:var(--gold-dk); }
.log-body{ min-width:0; flex:1; }
.log-txt{ font-size:12.5px; color:var(--txt-2); line-height:1.5; }
.log-txt strong{ color:var(--txt); font-weight:600; }
.log-txt .red{ color:var(--danger); }
.log-time{
  font-family:var(--mono); font-size:10.5px; color:var(--muted);
  letter-spacing:.05em; margin-top:2px;
}

.journal-compose{ display:flex; gap:8px; margin-bottom:14px; }
.journal-compose .input{ flex:1; min-width:0; }

.stat.warn{ border-color:#5c2a24; background:#24100d; }
.stat.warn .s-value{ color:var(--danger); }

.cal-fest-tag{
  display:inline-block; margin-left:9px; padding:2px 9px; border-radius:99px;
  font-family:var(--sans); font-size:9.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold); border:1px solid var(--gold-dk);
  background:rgba(0,0,0,.35); vertical-align:3px;
}

.copy-note{ display:block; margin-top:8px; font-size:11.5px; color:var(--gold-lt); }

/* ============================================================
   PHASE 5 — Fiche de personnage
   ============================================================ */

.sheet-identity{
  display:grid; gap:12px;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
}
.sheet-identity .field{ margin-bottom:0; }

/* align-items:start — sans quoi les deux colonnes s'étirent à la hauteur de
   la plus haute, et le panneau des sauvegardes traîne une longue zone vide
   sous ses six lignes. */
.sheet-columns{
  display:grid; gap:20px; align-items:start;
  grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);
}
@media (max-width:820px){ .sheet-columns{ grid-template-columns:1fr; } }
.sheet-columns .panel + .panel{ margin-top:0; }

/* --------------------------- Caracteristiques --------------------------- */

.abilities{
  display:grid; gap:12px;
  grid-template-columns:repeat(6, 1fr);
}
@media (max-width:720px){ .abilities{ grid-template-columns:repeat(3, 1fr); } }
@media (max-width:400px){ .abilities{ grid-template-columns:repeat(2, 1fr); } }

.ability{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:12px 8px 10px;
  border:1px solid var(--line-2); border-radius:var(--r);
  background:linear-gradient(180deg, var(--panel-3), rgba(10,12,17,.9));
}
.ability-name{
  font-family:var(--serif); font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted);
}
.ability-score{
  width:100%; max-width:74px; padding:6px 4px;
  font-family:var(--serif); font-size:26px; text-align:center; color:var(--txt);
  background:rgba(0,0,0,.42); border:1px solid var(--line-2); border-radius:var(--r-sm);
  font-variant-numeric:tabular-nums;
  -moz-appearance:textfield;
}
.ability-score::-webkit-outer-spin-button,
.ability-score::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.ability-score:focus{
  outline:none; border-color:var(--gold-dk); box-shadow:0 0 0 3px rgba(176,141,79,.13);
}

/* Le modificateur est une lecture, jamais une saisie : pas de bordure de champ,
   et une pastille qui le detache visuellement du score. */
.ability-mod{
  min-width:52px; padding:3px 10px; border-radius:99px;
  font-family:var(--serif); font-size:17px; text-align:center;
  color:var(--gold-lt); background:rgba(0,0,0,.45);
  border:1px solid var(--gold-dk); font-variant-numeric:tabular-nums;
}

.derived-row{ display:flex; gap:12px; margin-top:14px; flex-wrap:wrap; }
.derived-box{
  flex:1; min-width:150px; padding:12px; text-align:center;
  border:1px solid var(--line); border-radius:var(--r); background:rgba(0,0,0,.26);
}
.db-value{
  font-family:var(--serif); font-size:24px; color:var(--gold-lt);
  font-variant-numeric:tabular-nums;
}
.db-label{
  margin-top:2px; font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted);
}

/* --------------------------- Maitrises --------------------------- */

.prof-list{ display:grid; gap:4px; }

.prof-row{
  display:flex; align-items:center; gap:10px;
  padding:7px 10px; border:1px solid transparent; border-radius:var(--r-sm);
  background:rgba(0,0,0,.22); font-size:13px; color:var(--txt-2);
  cursor:pointer; text-align:left; width:100%; font-family:inherit;
  transition:background .14s, border-color .14s, color .14s;
}
.prof-row:hover{ background:rgba(255,255,255,.03); border-color:var(--line-2); }
.prof-row:focus-visible{ outline:2px solid var(--gold); outline-offset:1px; }
.prof-row.on,
.prof-row.prof,
.prof-row.expert{ color:var(--txt); border-color:var(--gold-dk); }
.prof-row.expert{ background:linear-gradient(90deg, rgba(176,141,79,.14), rgba(0,0,0,.24)); }

.prof-row input[type=checkbox]{ accent-color:var(--gold); width:15px; height:15px; flex:none; }

.prof-mark{ width:14px; flex:none; text-align:center; color:var(--gold); font-size:12px; }
.prof-value{
  min-width:34px; flex:none; text-align:right;
  font-family:var(--mono); font-size:13px; color:var(--gold-lt);
  font-variant-numeric:tabular-nums;
}
.prof-name{ flex:1; min-width:0; }
.prof-abil{
  flex:none; font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted);
}

/* --------------------------- Combat --------------------------- */

.combat-grid{
  display:grid; gap:12px;
  grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));
}

/* Bouton d'un geste qui blesse ou qui detruit : degats, abandon. */
.btn-danger{ border-color:#5c2a24; color:#f0b3a6; }
.btn-danger:hover{ border-color:var(--danger); color:#ffd2c8; }

/* Degats, soins, jets contre la mort, des de vie. */
.vitals{ display:grid; gap:10px; margin-top:14px; }
.vitals-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.vitals-amount{ width:90px; flex:none; }
.vitals-crit{ display:flex; align-items:center; gap:5px; }
.hit-dice-row{ padding-top:10px; border-top:1px solid var(--line); }
.hit-dice-row .small{ margin-right:auto; }

.death-saves{
  display:grid; gap:8px; padding:12px 14px; border-radius:var(--r);
  border:1px solid #5c2a24; background:rgba(177,64,47,.08);
}
.death-saves.stable{ border-color:#2f4a2c; background:rgba(143,185,138,.07); }
.death-saves.dead{ border-color:var(--danger); background:rgba(36,16,13,.6); }
.ds-head{ display:flex; align-items:center; gap:10px; }
.ds-state{
  margin-left:auto; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:#e9b4a9;
}
.death-saves.stable .ds-state{ color:#8fb98a; }
.ds-row{ display:flex; align-items:center; gap:8px; }
.ds-label{ width:64px; font-size:11px; color:var(--muted); }
.ds-pip{
  width:22px; height:22px; border-radius:50%; cursor:pointer; padding:0;
  border:1px solid var(--line-2); background:rgba(0,0,0,.35);
}
.ds-row.success .ds-pip.on{ background:#8fb98a; border-color:#8fb98a; }
.ds-row.failure .ds-pip.on{ background:var(--danger); border-color:var(--danger); }
.ds-pip:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.conc-check{ margin:0; }
.combat-stat{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:14px 10px 11px;
  border:1px solid var(--line-2); border-radius:var(--r);
  background:linear-gradient(180deg, var(--panel-3), rgba(10,12,17,.9));
}
.cs-value{
  font-family:var(--serif); font-size:26px; color:var(--gold-lt);
  font-variant-numeric:tabular-nums; line-height:1.1;
}
.cs-input{
  width:100%; max-width:84px; padding:4px;
  font-family:var(--serif); font-size:24px; text-align:center; color:var(--txt);
  background:rgba(0,0,0,.42); border:1px solid var(--line-2); border-radius:var(--r-sm);
  font-variant-numeric:tabular-nums; -moz-appearance:textfield;
}
.cs-input::-webkit-outer-spin-button,
.cs-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.cs-input:focus{
  outline:none; border-color:var(--gold-dk); box-shadow:0 0 0 3px rgba(176,141,79,.13);
}
.cs-label{
  font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); text-align:center;
}

/* --------------------------- Indicateur d'enregistrement --------------------------- */

.save-state{ display:flex; align-items:center; gap:8px; }
.save-dot{
  width:8px; height:8px; border-radius:50%; flex:none;
  background:var(--ok); box-shadow:0 0 9px var(--ok);
  transition:background .3s, box-shadow .3s, opacity .5s;
}
.save-dot.idle,
.save-dot.saved{ opacity:.3; box-shadow:none; }
.save-dot.pending{ background:var(--gold); box-shadow:0 0 9px var(--gold); opacity:1; }
.save-dot.saving{ background:var(--gold-lt); box-shadow:0 0 9px var(--gold-lt); opacity:1; }
.save-dot.error{ background:var(--danger); box-shadow:0 0 9px var(--danger); opacity:1; }
.save-label{ font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }

textarea.input{ resize:vertical; min-height:60px; font-family:inherit; line-height:1.5; }

/* ============================================================
   PHASE 6 — Equipement, attaques, bourse, charge
   ============================================================ */

.input.tiny, .select.tiny{
  padding:5px 6px; font-size:12.5px; text-align:center;
  -moz-appearance:textfield;
}
.input.tiny::-webkit-outer-spin-button,
.input.tiny::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.select.tiny{ padding-right:22px; background-size:12px; background-position:right 5px center; }

.add-row{ display:flex; gap:8px; margin-top:14px; }
.add-row .input{ flex:1; min-width:0; }

/* Le contenu est un trace SVG, pas le caractere « × ».
   Ce caractere est un signe mathematique : son encre se pose autour de l'axe
   des operateurs, nettement au-dessus de la ligne de base. Le navigateur
   centre la boite de ligne, pas l'encre, et la croix tombait 1,5 px trop bas
   dans un bouton de 24 px. Un decalage compense a la main aurait dependu de
   la police installee sur le poste ; le trace, lui, est symetrique autour de
   son centre partout. */
.btn-icon-x,
.btn-icon-info{
  flex:none;
  display:flex; align-items:center; justify-content:center;
  width:24px; height:24px; padding:0; line-height:1;
  color:var(--muted);
  background:transparent; border:1px solid var(--line-2); border-radius:var(--r-sm);
  cursor:pointer; transition:color .15s, border-color .15s, background .15s;
}
.btn-icon-x svg,
.btn-icon-info svg{ display:block; width:13px; height:13px; }
.btn-icon-x:hover{ color:#e9b4a9; border-color:var(--danger); background:rgba(177,64,47,.12); }

/* Le « i » consulte, il ne detruit rien : survol dore, pas rouge. Rond, pour
   qu'a cote de la croix carree les deux gestes ne se confondent pas. */
.btn-icon-info{ border-radius:50%; }
.btn-icon-info:hover{ color:var(--gold-lt); border-color:var(--gold-dk); background:rgba(176,141,79,.12); }
.btn-icon-x:focus-visible,
.btn-icon-info:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

/* --------------------------- Attaques --------------------------- */

.attack-list{ display:grid; gap:5px; }

.attack-row{
  display:grid; align-items:center; gap:8px;
  grid-template-columns:minmax(0,1fr) 68px 62px 64px 64px minmax(0,1.1fr) 30px;
  padding:7px 10px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:rgba(0,0,0,.22); font-size:13px;
}
.attack-row.head{
  background:none; border-color:transparent; padding-bottom:2px;
  font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.attack-row.head span{ text-align:center; }
.attack-row.head .at-name{ text-align:left; }

.at-name{ min-width:0; }
.at-name strong{ color:var(--txt); font-weight:600; display:block; }
.at-props{ display:block; font-size:10.5px; color:var(--muted); margin-top:1px; }
/* Arme maison : ses des et son poids se reglent sur la ligne meme. */
.at-custom{ display:flex; align-items:center; gap:5px; flex-wrap:wrap; margin-top:4px; }
.at-custom .select.tiny{ width:auto; min-width:66px; }
.at-custom .at-weight{ width:58px; }
.at-custom .unit{ font-size:10.5px; color:var(--muted); }
.at-custom-tag{
  font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  margin-right:2px;
}
.at-abil, .at-prof, .at-bonus, .at-del{ display:flex; justify-content:center; }
.at-prof input[type=checkbox]{ accent-color:var(--gold); width:15px; height:15px; }

.at-hit.value, .at-dmg.value{
  font-family:var(--mono); color:var(--gold-lt); text-align:center;
  font-variant-numeric:tabular-nums;
}
.at-hit.value{ font-size:15px; }
.at-dmg.value{ font-size:12.5px; }

/*
 * Telephone : une carte par arme, et non plus une rangee ecrasee.
 *
 *   Nom de l'arme ............................. ×
 *   CARAC. [FOR]   MAITRISE [x]   BONUS [ 0 ]
 *   ATTAQUE +5     DEGATS 1d8 + 3 tranchant
 *
 * L'en-tete des colonnes disparait : chaque case porte son intitule (data-label).
 */
@media (max-width:760px){
  .attack-row{
    grid-template-columns:repeat(3, minmax(0,1fr)) auto;
    grid-template-areas:
      "name name name del"
      "abil prof bonus bonus"
      "hit dmg dmg dmg";
    row-gap:10px; padding:10px 12px;
  }
  .attack-row.head{ display:none; }
  .attack-row .at-name{ grid-area:name; }
  .attack-row .at-del{ grid-area:del; align-self:start; }
  .attack-row .at-abil{ grid-area:abil; }
  .attack-row .at-prof{ grid-area:prof; }
  .attack-row .at-bonus{ grid-area:bonus; }
  .attack-row .at-hit{ grid-area:hit; }
  .attack-row .at-dmg{ grid-area:dmg; }

  .attack-row [data-label]{
    display:flex; flex-direction:column; align-items:flex-start; gap:3px; text-align:left !important;
  }
  .attack-row [data-label]::before{
    content:attr(data-label); font-family:var(--sans, inherit); font-size:9px; letter-spacing:.14em;
    text-transform:uppercase; color:var(--muted);
  }
  .attack-row .at-bonus .input.tiny{ width:64px; }
}

/* --------------------------- Inventaire --------------------------- */

.item-list{ display:grid; gap:4px; }

.item-row{
  display:grid; align-items:center; gap:10px;
  grid-template-columns:64px minmax(0,1fr) 96px 74px 30px;
  padding:6px 10px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:rgba(0,0,0,.22); font-size:13px;
}
.item-row.head{
  background:none; border-color:transparent; padding-block:0 2px;
  font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.item-row.head .it-name, .item-row.head .it-weight, .item-row.head .it-total{ color:var(--muted); }
.it-name{ min-width:0; color:var(--txt); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.it-weight{ display:flex; align-items:center; gap:5px; }
.it-weight .unit{ font-size:10.5px; color:var(--muted); }
.it-total{
  text-align:right; font-family:var(--mono); font-size:12px; color:var(--txt-2);
  font-variant-numeric:tabular-nums;
}
.it-del{ display:flex; justify-content:center; }

@media (max-width:620px){
  .item-row{ grid-template-columns:56px minmax(0,1fr) 30px; }
  .item-row.head{ display:none; }
  .it-weight, .it-total{ grid-column:2 / 3; }
}

/* --------------------------- Bourse --------------------------- */

.purse{ display:grid; gap:10px; grid-template-columns:repeat(5, 1fr); }
@media (max-width:560px){ .purse{ grid-template-columns:repeat(3, 1fr); } }

.coin{
  display:flex; flex-direction:column; align-items:center; gap:5px;
  padding:11px 8px 9px; border-radius:var(--r);
  border:1px solid var(--line-2);
  background:linear-gradient(180deg, var(--panel-3), rgba(10,12,17,.9));
}
.coin-name{
  font-family:var(--serif); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted);
}
.coin-input{
  width:100%; max-width:82px; padding:5px 4px;
  font-family:var(--serif); font-size:19px; text-align:center; color:var(--txt);
  background:rgba(0,0,0,.42); border:1px solid var(--line-2); border-radius:var(--r-sm);
  font-variant-numeric:tabular-nums; -moz-appearance:textfield;
}
.coin-input::-webkit-outer-spin-button,
.coin-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.coin-input:focus{
  outline:none; border-color:var(--gold-dk); box-shadow:0 0 0 3px rgba(176,141,79,.13);
}
.coin-full{ font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }

/* Chaque monnaie porte sa teinte : on repere sa colonne sans lire l'etiquette. */
.coin.pc .coin-name{ color:#b87333; }
.coin.pa .coin-name{ color:#c0c8d0; }
.coin.pe .coin-name{ color:#9fd4c8; }
.coin.po .coin-name{ color:var(--gold-lt); }
.coin.pp .coin-name{ color:#e2e6ee; }

/* --------------------------- Charge --------------------------- */

.weight-box{ display:grid; gap:10px; }

.weight-head{ display:flex; align-items:baseline; gap:12px; }
.weight-value{
  font-family:var(--serif); font-size:22px; color:var(--gold-lt);
  font-variant-numeric:tabular-nums;
}
.weight-label{
  margin-left:auto; padding:3px 12px; border-radius:99px;
  font-size:10px; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  border:1px solid currentColor; background:rgba(0,0,0,.35); color:var(--ok);
}
.weight-label.encumbered{ color:var(--gold); }
.weight-label.heavy{ color:#d98a72; }
.weight-label.over{ color:var(--danger); }

.weight-bar{
  position:relative; height:12px; border-radius:99px; overflow:hidden;
  border:1px solid var(--line-2); background:rgba(0,0,0,.4);
}
.weight-fill{
  height:100%; border-radius:99px 0 0 99px;
  background:linear-gradient(90deg, #4a6b3d, var(--ok));
  transition:width .25s ease, background .25s ease;
}
.weight-fill.encumbered{ background:linear-gradient(90deg, #8a7038, var(--gold)); }
.weight-fill.heavy{ background:linear-gradient(90deg, #8a4a38, #d98a72); }
.weight-fill.over{ background:linear-gradient(90deg, #6b2018, var(--danger)); }

/* Les deux seuils d'encombrement, marques sur la barre : on voit la limite
   venir au lieu de la decouvrir en la franchissant. */
.weight-mark{
  position:absolute; top:0; bottom:0; width:1px;
  background:rgba(255,255,255,.35);
}

.weight-scale{
  display:flex; justify-content:space-between; gap:10px;
  font-size:10.5px; color:var(--muted);
}

/* ============================================================
   PHASE 7 — Sorts
   ============================================================ */

.cast-stats{
  display:grid; gap:12px;
  grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
}
.cast-stat{
  display:flex; flex-direction:column; align-items:center; gap:5px;
  padding:14px 10px 11px;
  border:1px solid var(--line-2); border-radius:var(--r);
  background:linear-gradient(180deg, var(--panel-3), rgba(10,12,17,.9));
  text-align:center;
}

/* --------------------------- Emplacements --------------------------- */

.slots{ display:grid; gap:7px; }

.slot-row{
  display:flex; align-items:center; gap:14px;
  padding:9px 13px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:rgba(0,0,0,.22);
}
.slot-level{
  flex:none; width:62px;
  font-family:var(--serif); font-size:12.5px; color:var(--txt-2);
}
.slot-pips{ display:flex; gap:6px; flex-wrap:wrap; flex:1; }
.slot-count{
  flex:none; font-family:var(--mono); font-size:12px; color:var(--gold-lt);
  font-variant-numeric:tabular-nums;
}

/* Une case = un emplacement. Pleine quand il reste, creusee quand il est
   depense : on lit l'etat d'un coup d'oeil, sans compter. */
.pip{
  width:17px; height:17px; padding:0; cursor:pointer;
  border-radius:50%; border:1px solid var(--gold-dk);
  background:radial-gradient(circle at 35% 30%, #e9d0a0, var(--gold) 70%);
  box-shadow:0 0 8px -2px rgba(176,141,79,.8);
  transition:background .15s, box-shadow .15s, transform .1s;
}
.pip:hover{ transform:scale(1.12); }
.pip:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.pip.spent{
  background:rgba(0,0,0,.45); border-color:var(--line-2); box-shadow:none;
}

/* --------------------------- Grimoire --------------------------- */

.spellbook{ display:grid; gap:18px; }
.spell-group{ display:grid; gap:4px; }

.spell{
  border:1px solid var(--line); border-radius:var(--r-sm);
  background:rgba(0,0,0,.22); overflow:hidden;
}
.spell-row{
  display:grid; align-items:center; gap:10px;
  grid-template-columns:28px minmax(0,1fr) auto auto;
  padding:7px 10px;
}
.spell-prep{ display:flex; justify-content:center; }
.spell-prep input[type=checkbox]{ accent-color:var(--gold); width:15px; height:15px; }
.spell-prep .always{ color:var(--gold); font-size:12px; }

.spell-name{
  display:flex; align-items:center; gap:7px; min-width:0;
  padding:0; background:none; border:0; cursor:pointer;
  font-family:var(--serif); font-size:14px; color:var(--txt); text-align:left;
}
.spell-title{ display:flex; align-items:center; gap:8px; min-width:0; }
.spell-name:hover{ color:var(--gold-lt); }
.spell-name:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

.spell-tag{
  flex:none; padding:1px 5px; border-radius:4px;
  font-family:var(--sans); font-size:9px; font-weight:600; letter-spacing:.08em;
  border:1px solid currentColor;
}
.spell-tag.conc{ color:#8ba7d6; }
.spell-tag.rit{ color:#8fb98a; }
.spell-tag.en{ color:var(--muted); }

.spell-school{
  font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
}
.spell-del{ display:flex; justify-content:center; }
.spell-actions{ display:flex; align-items:center; gap:8px; justify-content:flex-end; }
.spell-cast{ padding-block:3px; }

/* Choisir l'emplacement : une bande sous le sort. */
.cast-strip{ padding:8px 12px 10px 48px; border-top:1px dashed var(--line); background:rgba(0,0,0,.18); }
.cast-options{ display:flex; gap:6px; flex-wrap:wrap; }

/* Le sort qui tient la concentration, et le rappel en tete du panneau. */
.spell.concentrating{ border-color:#5b4a86; box-shadow:inset 3px 0 0 #8d7bd1; }
.concentration{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 14px;
  padding:8px 12px; border-radius:var(--r-sm); border:1px solid #5b4a86; background:rgba(141,123,209,.1);
  font-size:13px; color:var(--txt-2);
}
.concentration strong{ color:var(--txt); }
.concentration .btn{ margin-left:auto; }
.conc-mark{
  display:inline-grid; place-items:center; width:20px; height:20px; border-radius:50%;
  background:#8d7bd1; color:#12101c; font-size:11px; font-weight:700;
}

.spell-details{
  padding:12px 14px 14px; border-top:1px solid var(--line);
  background:rgba(0,0,0,.28);
}
.spell-meta{
  display:grid; gap:10px; margin-bottom:10px;
  grid-template-columns:repeat(auto-fit, minmax(130px, 1fr));
}
.sm-label{
  display:block; font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
}
.sm-value{ display:block; font-size:12.5px; color:var(--txt-2); margin-top:2px; }
.spell-text{ margin:0; font-size:12.5px; line-height:1.6; color:var(--txt-2); }

@media (max-width:620px){
  .spell-row{ grid-template-columns:28px minmax(0,1fr) auto; }
  .spell-school{ display:none; }
  .cast-strip{ padding-left:12px; }
}

/* --------------------------- Recherche --------------------------- */

/* « Ajouter un sort » : le titre et son bouton sur une ligne ; la recherche dessous. */
.spell-add-head{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:20px; }
.spell-add-head .section-title{ margin:0; }
.spell-add-head .btn{ margin-left:auto; }
.spell-search-box{ margin-top:12px; }

.spell-search{ display:flex; gap:8px; margin-bottom:12px; }
.spell-search .input{ flex:1; min-width:0; }
.spell-search .select{ flex:none; width:160px; }

.spell-results{ display:grid; gap:3px; max-height:300px; overflow-y:auto; }

/* Deux boutons par rangee — ajouter, et le « i ». Le fond et le survol vivent
   sur la rangee, pour qu'elle reste lue comme UN resultat. */
.result{
  display:flex; align-items:center; gap:6px;
  padding-right:6px; border:1px solid transparent; border-radius:var(--r-sm);
  background:rgba(0,0,0,.18); color:var(--txt-2);
  transition:background .14s, border-color .14s, color .14s;
}
.result:hover{ background:rgba(176,141,79,.12); border-color:var(--gold-dk); color:var(--txt); }

.result-add{
  flex:1; min-width:0;
  display:flex; align-items:center; gap:10px;
  padding:6px 10px; background:none; border:0; cursor:pointer;
  font-family:inherit; font-size:12.5px; color:inherit; text-align:left;
}
.result-add:focus-visible{ outline:2px solid var(--gold); outline-offset:1px; border-radius:var(--r-sm); }

.r-level{
  flex:none; width:20px; height:20px; display:grid; place-items:center;
  border-radius:4px; background:rgba(0,0,0,.4); border:1px solid var(--line-2);
  font-family:var(--mono); font-size:10.5px; color:var(--gold-lt);
}
.r-name{ flex:1; min-width:0; font-family:var(--serif); font-size:13.5px; color:var(--txt); }
.r-school{
  flex:none; font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted);
}

/* ============================================================
   PHASE 8 — Console du MJ, etats
   ============================================================ */

/* Etats cote joueur : lecture seule, voir « Etats : lecture seule sur la fiche » plus bas. */

/* --------------------------- Console du MJ --------------------------- */

.gm-table{ display:grid; gap:12px; }

.gm-card{
  border:1px solid var(--line); border-left:3px solid var(--ok);
  border-radius:var(--r); background:rgba(0,0,0,.24); overflow:hidden;
  transition:border-color .2s;
}
.gm-card.hurt{ border-left-color:var(--gold); }
.gm-card.critical{ border-left-color:#d98a72; }
.gm-card.down{ border-left-color:var(--danger); background:rgba(36,16,13,.5); }

.gm-summary{ padding:13px 15px; display:grid; gap:10px; }

/* Le visage d'abord : la vignette ouvre la carte, comme le nom. */
.gm-head{ display:flex; align-items:center; gap:12px; min-width:0; }
.gm-head-text{ display:grid; gap:3px; min-width:0; }
.gm-avatar{
  flex:none; width:56px; height:56px; padding:0; overflow:hidden; cursor:pointer;
  border-radius:50%; border:1px solid var(--gold-dk); background:rgba(0,0,0,.4);
  box-shadow:0 0 0 3px rgba(0,0,0,.35);
}
.gm-avatar img{ display:block; width:100%; height:100%; object-fit:cover; }
.gm-avatar.empty{
  display:grid; place-items:center; border-color:var(--line-2);
  font-family:var(--serif); font-size:18px; color:var(--muted);
}
.gm-avatar:hover{ border-color:var(--gold); }
.gm-avatar:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

/* Le portrait en grand, a cote des caracteristiques ; au-dessus sur telephone. */
.gm-detail-top{ display:grid; grid-template-columns:150px minmax(0,1fr); gap:14px; align-items:start; }
.gm-portrait{
  display:block; aspect-ratio:1; max-width:100%; overflow:hidden;
  border-radius:var(--r); border:1px solid var(--line-2); background:rgba(0,0,0,.4);
}
.gm-portrait img{ display:block; width:100%; height:100%; object-fit:cover; }
.gm-detail-top .gm-abilities{ grid-template-columns:repeat(3, 1fr); }
@media (max-width:560px){
  .gm-detail-top{ grid-template-columns:minmax(0,1fr); }
  .gm-portrait{ width:min(200px, 100%); justify-self:center; }
}

/* Bourse, cote MJ : la pile actuelle en grand, le mouvement en dessous. */
.gm-purse{ display:grid; gap:10px; }
.gm-coins{ display:grid; gap:8px; grid-template-columns:repeat(5, minmax(0,1fr)); }
@media (max-width:560px){ .gm-coins{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
.gm-coins .coin{ padding:8px 6px; gap:4px; }
.gm-coin-value{
  font-family:var(--serif); font-size:17px; color:var(--txt); line-height:1.1;
  font-variant-numeric:tabular-nums; max-width:100%; overflow:hidden; text-overflow:ellipsis;
}
.gm-coin-input{ width:100%; max-width:84px; }

.gm-name{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  padding:0; background:none; border:0; cursor:pointer; text-align:left;
}
.gm-name:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.gm-char{
  font-family:var(--serif); font-size:17px; color:var(--gold-lt);
  text-shadow:0 1px 0 #000;
}
.gm-name:hover .gm-char{ color:#f3dfab; }
.gm-player{ font-size:11.5px; color:var(--muted); }
.gm-class{ font-size:11.5px; color:var(--txt-2); }

.gm-vitals{
  display:grid; gap:8px;
  grid-template-columns:repeat(auto-fit, minmax(84px, 1fr));
}
.gm-vital{
  padding:8px 6px; text-align:center; border-radius:var(--r-sm);
  border:1px solid var(--line); background:rgba(0,0,0,.28);
}
.gv-value{
  font-family:var(--serif); font-size:17px; color:var(--gold-lt);
  font-variant-numeric:tabular-nums; line-height:1.1;
}
.gv-label{
  margin-top:2px; font-size:9px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
}
.gm-vital.hurt .gv-value{ color:var(--gold); }
.gm-vital.critical .gv-value{ color:#e09a84; }
.gm-vital.down .gv-value{ color:var(--danger); }

/* Barre de points de vie : la couleur seule suffit a reperer, de loin, qui va
   mal — sans avoir a lire les chiffres. */
.gm-bar{
  height:5px; border-radius:99px; overflow:hidden;
  background:rgba(0,0,0,.5); border:1px solid var(--line);
}
.gm-fill{ height:100%; background:linear-gradient(90deg, #4a6b3d, var(--ok)); transition:width .3s ease; }
.gm-fill.hurt{ background:linear-gradient(90deg, #8a7038, var(--gold)); }
.gm-fill.critical{ background:linear-gradient(90deg, #8a4a38, #d98a72); }
.gm-fill.down{ background:var(--danger); }

.gm-conditions{ display:flex; gap:6px; flex-wrap:wrap; }
.gm-conditions.empty{ font-size:10.5px; color:var(--muted); font-style:italic; }
.cond-chip{
  padding:2px 9px; border-radius:99px;
  font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:#e9b4a9; border:1px solid #5c2a24; background:rgba(177,64,47,.14);
  /*
   * `flex:none` ET `white-space:nowrap`, les deux ensemble.
   *
   * Le conteneur est en flex : ses enfants se laissent RÉTRÉCIR sous la
   * largeur de leur contenu (flex-shrink vaut 1 par défaut). Avec le seul
   * nowrap, le texte cesse de se couper en deux mais déborde d’une pastille
   * écrasée — le symptôme se déplace au lieu de disparaître. `flex:none`
   * interdit ce rétrécissement ; le retour à la ligne reste assuré par le
   * `flex-wrap` du conteneur.
   */
  flex:none;
  white-space:nowrap;
}
.cond-chip.exh{ color:#f0a396; border-color:var(--danger); }
.cond-chip.death.dying{ color:#fff; background:rgba(177,64,47,.55); border-color:var(--danger); }
.cond-chip.death.stable{ color:#8fb98a; border-color:#2f4a2c; background:rgba(143,185,138,.1); }
.cond-chip.death.dead{ color:#fff; background:#3a1512; border-color:var(--danger); }
.cond-chip.conc{ color:#cfc4f5; border-color:#5b4a86; background:rgba(141,123,209,.12); text-transform:none; letter-spacing:.02em; }

/* --------------------------- Detail deplie --------------------------- */

.gm-detail{
  padding:14px 15px 16px; border-top:1px solid var(--line);
  background:rgba(0,0,0,.3); display:grid; gap:16px;
}

.gm-abilities{
  display:grid; gap:8px;
  grid-template-columns:repeat(6, 1fr);
}
@media (max-width:640px){ .gm-abilities{ grid-template-columns:repeat(3, 1fr); } }

.gm-ab{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:8px 4px; border-radius:var(--r-sm);
  border:1px solid var(--line); background:rgba(0,0,0,.26);
}
.ab-name{ font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.ab-score{ font-family:var(--serif); font-size:16px; color:var(--txt); }
.ab-mod{ font-family:var(--mono); font-size:11.5px; color:var(--gold-lt); }

.gm-grid{
  display:grid; gap:8px;
  grid-template-columns:repeat(auto-fit, minmax(110px, 1fr));
}
.gm-block{
  padding:9px 8px; text-align:center; border-radius:var(--r-sm);
  border:1px solid var(--line); background:rgba(0,0,0,.26);
}
.gb-value{ font-family:var(--serif); font-size:15px; color:var(--gold-lt); }
.gb-label{
  margin-top:2px; font-size:9px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted);
}

.gm-section{ display:grid; gap:8px; }
.gm-section-title{
  margin:0; font-size:9.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted); font-weight:600;
}

.gm-chips{ display:flex; gap:6px; flex-wrap:wrap; }
.gm-chip{
  padding:3px 10px; border-radius:99px; font-size:11px;
  color:var(--txt-2); border:1px solid var(--line-2); background:rgba(0,0,0,.28);
}
.gm-chip.expert{ color:var(--gold-lt); border-color:var(--gold-dk); }

.gm-attacks{ display:grid; gap:4px; }
.gm-attack{
  display:grid; align-items:center; gap:10px;
  grid-template-columns:minmax(0,1fr) 52px minmax(0,1.2fr);
  padding:6px 10px; border-radius:var(--r-sm);
  border:1px solid var(--line); background:rgba(0,0,0,.26); font-size:12.5px;
}
.ga-name{ color:var(--txt); min-width:0; }
.ga-hit{
  text-align:center; font-family:var(--mono); font-size:13px; color:var(--gold-lt);
}
.ga-dmg{ font-family:var(--mono); font-size:11.5px; color:var(--txt-2); }

.gm-spells{ display:grid; gap:5px; }
.gm-spell-line{
  display:flex; align-items:baseline; gap:10px;
  padding:5px 10px; border-radius:var(--r-sm);
  border:1px solid var(--line); background:rgba(0,0,0,.26);
}
.gs-level{
  flex:none; width:20px; height:20px; display:grid; place-items:center;
  border-radius:4px; background:rgba(0,0,0,.45); border:1px solid var(--line-2);
  font-family:var(--mono); font-size:10.5px; color:var(--gold-lt);
}
.gs-names{ font-size:12px; color:var(--txt-2); line-height:1.5; }

/* ============================================================
   Portrait de personnage
   ============================================================ */

.portrait-block{
  display:flex; gap:18px; align-items:flex-start;
  margin-bottom:18px; flex-wrap:wrap;
}

.portrait{
  width:128px; height:128px; flex:none;
  border-radius:var(--r); overflow:hidden;
  border:1px solid var(--line-2);
  background:linear-gradient(180deg, var(--panel-3), rgba(10,12,17,.9));
  box-shadow:0 10px 28px -14px rgba(0,0,0,.9);
}
.portrait img{ display:block; width:100%; height:100%; object-fit:cover; }

.portrait-empty{
  width:100%; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  color:var(--muted);
}
.portrait-empty svg{ width:30px; height:30px; opacity:.5; }

.portrait-actions{
  display:flex; flex-direction:column; align-items:flex-start; gap:8px;
  padding-top:4px;
}
/* Le champ de fichier natif est masque : c'est le <label> qui sert de bouton,
   pour garder l'aspect des autres commandes. */
.portrait-actions input[type=file]{ display:none; }
.portrait-status{ font-size:11.5px; color:var(--gold-lt); }

/* Portee du catalogue de sorts */
.spell-scope{
  display:flex; align-items:center; gap:8px;
  margin:0 0 12px; cursor:pointer;
  font-size:11.5px; color:var(--muted);
}
.spell-scope input[type=checkbox]{ accent-color:var(--gold); width:14px; height:14px; }
.spell-scope:hover{ color:var(--txt-2); }

/* ------------------------------------------------------------------ */
/*  Barres collantes : le temps et l'experience                        */
/* ------------------------------------------------------------------ */

/* Les deux barres restent en haut pendant qu'on fait defiler la fiche, qui est
   longue. `top:0` et non une valeur negative : la barre du haut, elle, defile
   normalement — c'est l'heure de jeu et l'experience qu'on consulte en cours de
   partie, pas le nom du compte connecte.

   Le fond est opaque : sans lui, le texte des panneaux transparaitrait sous la
   barre pendant le defilement. */
.sticky-bars{
  position:sticky; top:0; z-index:20;
  display:flex; flex-direction:column; gap:10px;
  margin:-8px -8px 20px; padding:8px;
  background:linear-gradient(180deg, var(--bg) 76%, transparent);
}

/* Conserve pour la salle commune, ou la barre n'a pas besoin de coller. */
.widget-bar{ margin-bottom:20px; }

/* ------------------------------------------------------------------ */
/*  Barre d'experience                                                 */
/* ------------------------------------------------------------------ */

.xp-go{ margin-left:6px; padding-block:2px; vertical-align:baseline; }

.xp-block{
  padding:11px 18px 13px;
  background:linear-gradient(180deg, rgba(43,33,24,.6), rgba(19,22,31,.86));
  border:1px solid var(--line); border-top:1px solid rgba(176,141,79,.28);
  border-radius:var(--r-lg); box-shadow:var(--shadow), var(--inset);
}
.xp-head{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  margin-bottom:8px;
}
.xp-title{
  font-family:var(--serif); font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted);
}
.xp-label{
  margin-left:auto; font-size:12.5px; color:var(--gold-lt);
  font-variant-numeric:tabular-nums;
}

.xp-track{
  height:8px; border-radius:99px; overflow:hidden;
  background:rgba(0,0,0,.5); border:1px solid var(--line-2);
}
.xp-fill{
  height:100%; border-radius:99px;
  background:linear-gradient(90deg, var(--gold-dk), var(--gold-lt));
  transition:width .4s ease;
}

/* Le palier atteint se signale par la barre elle-meme, pas seulement par une
   ligne de texte qu'on peut ne pas lire. */
.xp-block.ready .xp-fill,
.xp-track.ready .xp-fill{
  background:linear-gradient(90deg, #7a5c22, #f0d9a4);
  box-shadow:0 0 10px rgba(227,199,141,.45);
}

@media (prefers-reduced-motion:reduce){
  .xp-fill{ transition:none; }
}

/* ------------------------------------------------------------------ */
/*  Bonus de race sur les caracteristiques                             */
/* ------------------------------------------------------------------ */

/* Les bonus raciaux font partie du score affiche : une seule note, sous les six
   encarts, dit d'ou ils viennent. */
.ability-note{
  margin:12px 0 0; padding:9px 12px;
  font-size:12px; line-height:1.55; color:var(--txt-2);
  border-left:2px solid var(--gold-dk); border-radius:0 var(--r-sm) var(--r-sm) 0;
  background:rgba(0,0,0,.22);
}
.ability-note strong{ color:var(--gold-lt); font-weight:600; }

/* ------------------------------------------------------------------ */
/*  Traits de race                                                     */
/* ------------------------------------------------------------------ */

.race-facts{
  display:grid; gap:10px; margin-bottom:18px;
  grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));
}
.race-fact{
  padding:10px 12px; text-align:center;
  border:1px solid var(--line-2); border-radius:var(--r);
  background:rgba(0,0,0,.28);
}
.rf-value{
  font-family:var(--serif); font-size:15px; color:var(--gold-lt);
  font-variant-numeric:tabular-nums;
}
.rf-label{
  margin-top:3px; font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
}

.race-traits{ display:flex; flex-direction:column; gap:12px; }
.race-trait{
  padding:11px 14px;
  border-left:2px solid var(--gold-dk); border-radius:0 var(--r) var(--r) 0;
  background:rgba(0,0,0,.24);
}
.rt-name{
  font-family:var(--serif); font-size:13px; color:var(--gold-lt);
  margin-bottom:4px;
}
.rt-text{ font-size:12.5px; line-height:1.6; color:var(--txt-2); }

/* Une maitrise venue de la race se distingue d'une maitrise cochee : sans quoi
   le joueur la prendrait pour une case qu'il aurait oublie de decocher. */
.prof-row.skill.granted .prof-mark{ color:var(--gold-dk); }
/* La source d'une maitrise accordee — race, historique, don — lue sur le nom. */
.prof-name[data-source]::after{
  content:attr(data-source); margin-left:7px;
  font-size:9px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); vertical-align:middle;
}

/* ------------------------------------------------------------------ */
/*  Attribution d'experience, console du MJ                            */
/* ------------------------------------------------------------------ */

.gm-xp{ display:flex; flex-direction:column; gap:10px; }
.xp-give{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.xp-give .input{ flex:1 1 130px; min-width:0; }
.xp-give .xp-amount{ flex:0 0 110px; }

/* ------------------------------------------------------------------ */
/*  Demarrage de la campagne                                           */
/* ------------------------------------------------------------------ */

.start-row{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }

.start-state{
  display:flex; gap:12px; align-items:center; flex-wrap:wrap;
  margin-bottom:16px;
}

.start-tally{
  display:grid; gap:12px;
  grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
}
.start-count{
  padding:12px 14px; text-align:center;
  border:1px solid var(--line-2); border-radius:var(--r);
  background:rgba(0,0,0,.28);
}
.sc-value{
  font-family:var(--serif); font-size:24px; color:var(--gold-lt);
  font-variant-numeric:tabular-nums;
}
.sc-label{
  margin-top:3px; font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
}

/* Un champ ferme doit se lire comme ferme, sans qu'on ait a cliquer dedans
   pour s'en apercevoir. */
.field .input:disabled,
.field .select:disabled,
.ability-score:disabled{
  opacity:.55; cursor:not-allowed;
  background:rgba(0,0,0,.6); border-style:dashed;
}
.prof-row input:disabled{ cursor:not-allowed; }
.prof-row.skill:disabled{ opacity:.62; cursor:not-allowed; }

/* ------------------------------------------------------------------ */
/*  Experience du groupe, console du MJ                                */
/* ------------------------------------------------------------------ */

/* Un encadre distinct des cartes de fiche : c'est la seule commande de ce
   panneau, tout le reste est en lecture. */
.party-xp{
  margin-bottom:18px; padding:14px 16px;
  border:1px solid var(--line-2); border-left:3px solid var(--gold-dk);
  border-radius:var(--r); background:rgba(0,0,0,.28);
}
.party-head{
  display:flex; align-items:baseline; gap:12px;
  margin-bottom:12px;
}
.party-title{
  font-family:var(--serif); font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold-lt);
}
.party-head .small{ margin-left:auto; }

.party-row{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.party-row .xp-amount{ flex:0 0 110px; }
.party-row .select{ flex:0 0 132px; }
.party-row .input[type="text"]{ flex:1 1 160px; min-width:0; }

.party-presets{ display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }
.party-presets .btn{ padding:4px 11px; font-size:11.5px; }

@media (max-width:560px){
  .party-row .xp-amount,
  .party-row .select,
  .party-row .input[type="text"]{ flex:1 1 100%; }
}

/* ------------------------------------------------------------------ */
/*  Fiche d'un sort (bouton « i »)                                     */
/* ------------------------------------------------------------------ */

/* Aucune marge interieure sur le <dialog> lui-meme : tout le contenu vit dans
   .si-body. C'est ce qui permet a un clic dont la cible est le dialogue de
   signifier « clic sur le voile » — voir spell-info.js. */
.spell-info{
  padding:0; overflow:hidden;
  width:min(580px, calc(100vw - 32px));
  border:1px solid var(--line-2); border-top:1px solid rgba(176,141,79,.35);
  border-radius:var(--r-lg);
  background:linear-gradient(180deg, var(--panel-2), var(--panel));
  color:var(--txt); box-shadow:var(--shadow);
}
.spell-info::backdrop{ background:rgba(5,6,10,.72); }

.si-body{
  max-height:min(86vh, 760px); overflow-y:auto;
  padding:0 24px 22px;
}

/* L'en-tete reste visible pendant qu'on fait defiler une longue description :
   la croix de fermeture ne doit jamais sortir de l'ecran. */
.si-head{
  position:sticky; top:0; z-index:1;
  display:flex; align-items:flex-start; gap:16px;
  margin:0 -24px 16px; padding:20px 24px 14px;
  background:var(--panel-2); border-bottom:1px solid var(--line);
}
.si-titles{ flex:1; min-width:0; }
.si-name{
  margin:0; font-family:var(--serif); font-size:21px; font-weight:600;
  line-height:1.25; color:var(--gold-lt);
}
.si-kind{
  margin-top:8px; font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--txt-2);
}
.si-tags{ display:flex; gap:6px; flex-wrap:wrap; margin-top:9px; }
.si-tags .spell-tag{ font-size:9.5px; padding:2px 7px; }

.si-meta{
  padding:12px 14px; margin-bottom:4px;
  border:1px solid var(--line); border-radius:var(--r);
  background:rgba(0,0,0,.24);
}

.si-section{ margin-top:18px; }
.si-section-title{
  margin:0 0 8px; font-family:var(--serif); font-size:10.5px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold);
}
.si-text{ margin:0; font-size:13.5px; line-height:1.7; color:var(--txt); }

.si-notes{ margin:0; padding:0; list-style:none; display:grid; gap:8px; }
.si-notes li{
  padding:8px 12px; font-size:12.5px; line-height:1.6; color:var(--txt-2);
  border-left:2px solid var(--gold-dk); border-radius:0 var(--r-sm) var(--r-sm) 0;
  background:rgba(0,0,0,.2);
}
.si-notes li strong{ color:var(--txt); font-weight:600; }
.si-notes li.warn{ border-left-color:var(--danger); }
.si-notes li.warn strong{ color:#e9b4a9; }

.si-classes{
  margin:18px 0 0; padding-top:12px; border-top:1px solid var(--line);
  font-size:12.5px; color:var(--txt-2);
}

/* Fiche d'un don : chaque effet chiffre dit s'il est deja sur la fiche. */
.fi-tag{
  display:inline-block; margin-left:8px; padding:0 6px; vertical-align:1px;
  font-size:9px; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap;
  border-radius:3px; border:1px solid var(--gold-dk); color:var(--gold-lt);
}
.fi-tag.auto{ border-color:#2f4a2c; color:#8fb98a; }
.fi-unmet{ margin:8px 0 0; font-size:12.5px; color:#e9b4a9; }

/* Le « i » d'un don, a droite de sa ligne dans la liste. */
.feat-row-main{ display:flex; align-items:flex-start; gap:8px; }
.feat-row-main .feat-head{ flex:1; min-width:0; }
.feat-row-main .btn-icon-info{ margin-top:2px; }
.si-classes .sm-label{ margin-bottom:3px; }

@media (max-width:480px){
  .si-body{ padding:0 16px 18px; }
  .si-head{ margin:0 -16px 14px; padding:16px 16px 12px; }
}
/* ------------------------------------------------------------------ */
/*  Sous-classe : aptitudes par niveau, sorts de sous-classe           */
/* ------------------------------------------------------------------ */

.sub-features{ display:flex; flex-direction:column; gap:10px; }
.sub-feature{
  display:grid; grid-template-columns:52px minmax(0,1fr); gap:12px; align-items:start;
  padding:11px 14px;
  border-left:2px solid var(--gold-dk); border-radius:0 var(--r) var(--r) 0;
  background:rgba(0,0,0,.24);
}
.sf-level{
  display:inline-block; padding:2px 0; text-align:center;
  font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-lt);
  border:1px solid var(--gold-dk); border-radius:var(--r-sm);
  font-variant-numeric:tabular-nums;
}
.sf-body{ min-width:0; }
.sf-later{
  margin-left:8px; padding:1px 6px; border-radius:4px;
  font-family:var(--sans); font-size:9px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); border:1px solid var(--line-2); vertical-align:middle;
}

/* Ce qui reste a venir se lit, mais en retrait : on sait ou mene la voie sans
   confondre ce qu'on a et ce qu'on aura. */
.sub-feature.later{ border-left-color:var(--line-2); background:rgba(0,0,0,.12); }
.sub-feature.later .rt-name,
.sub-feature.later .rt-text{ opacity:.55; }
.sub-feature.later .sf-level{ color:var(--muted); border-color:var(--line-2); }

.sub-spells{ margin-top:22px; }
.sub-spell-group{ margin-top:10px; }
.ssg-label{
  margin-bottom:4px; font-family:var(--serif); font-size:12px; color:var(--gold-lt);
}
.sub-spell-row{
  display:grid; grid-template-columns:52px minmax(0,1fr); gap:12px; align-items:center;
  padding:5px 0; border-bottom:1px solid var(--line);
  font-size:12.5px; color:var(--txt);
}
.sub-spell-row.later{ color:var(--muted); }
.sub-spell-row.later .sf-level{ color:var(--muted); border-color:var(--line-2); }
/* ------------------------------------------------------------------ */
/*  Choix de la sous-classe : un bloc par voie                         */
/* ------------------------------------------------------------------ */

.sub-cards{
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
}

.sub-card{
  display:flex; flex-direction:column; gap:8px;
  padding:16px 18px;
  border:1px solid var(--line-2); border-radius:var(--r);
  background:linear-gradient(180deg, var(--panel-3), rgba(10,12,17,.9));
}
.sub-card.current{ border-color:var(--gold-dk); }
/* La confirmation se voit : c'est le seul moment ou le choix devient definitif. */
.sub-card.confirming{
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(176,141,79,.15);
}

.sc-name{
  margin:0; font-family:var(--serif); font-size:16px; font-weight:600;
  color:var(--gold-lt);
}
.sc-summary{ margin:0; font-size:13px; line-height:1.55; color:var(--txt); }
.sc-note{ margin:0; font-size:12px; line-height:1.5; color:var(--txt-2); font-style:italic; }

.sc-heading{
  margin-top:6px; font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted);
}
.sc-list{ margin:0; padding:0; list-style:none; display:grid; gap:6px; }
.sc-list li{ font-size:12.5px; line-height:1.5; color:var(--txt-2); }
.sc-list li strong{ color:var(--txt); font-weight:600; }
.sc-list.later li{ display:flex; align-items:center; gap:8px; color:var(--muted); }
.sc-list.later .sf-level{ flex:none; width:52px; }

.sc-warning{ margin:2px 0 0; font-size:12px; color:var(--gold-lt); }

/* Les boutons tombent en bas du bloc, alignes d'un bloc a l'autre. */
.sc-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:auto; padding-top:8px; }

/* ------------------------------------------------------------------ */
/*  Progression : niveaux, multiclassage, ameliorations et dons        */
/* ------------------------------------------------------------------ */

/* Le conteneur des sous-classes n'est qu'un regroupement de code : ses panneaux
   s'espacent comme les autres panneaux de la fiche. */
.subclass-panels{ display:contents; }

.class-chips{ display:flex; gap:8px; flex-wrap:wrap; }
.class-chip{
  padding:5px 11px; border-radius:99px; font-size:12.5px; color:var(--txt-2);
  border:1px solid var(--line-2); background:rgba(0,0,0,.25);
}
.class-chip strong{ color:var(--txt); font-weight:600; }
.class-chip.primary{ border-color:var(--gold-dk); }

/* Un choix en attente se voit : c'est ce que le joueur doit faire maintenant. */
.choice-block{
  margin-top:18px; padding:16px 18px;
  border:1px solid var(--gold-dk); border-left:3px solid var(--gold);
  border-radius:var(--r); background:rgba(176,141,79,.06);
}
.choice-title{
  margin:0 0 12px; font-family:var(--serif); font-size:15px; font-weight:600; color:var(--gold-lt);
}

.levelup-options{ display:grid; gap:8px; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); }
.levelup-option{
  display:flex; flex-direction:column; gap:3px; text-align:left; cursor:pointer;
  padding:10px 12px; border:1px solid var(--line-2); border-radius:var(--r-sm);
  background:rgba(0,0,0,.3); color:var(--txt); font-family:inherit;
}
.levelup-option:hover{ border-color:var(--gold-dk); }
.levelup-option.selected{ border-color:var(--gold); box-shadow:0 0 0 3px rgba(176,141,79,.15); }
.lo-name{ font-family:var(--serif); font-size:14px; color:var(--gold-lt); }
.lo-detail{ font-size:12px; color:var(--txt-2); }

/* Un bloc qui informe sans rien demander : pas de bordure doree pleine. */
.choice-block.quiet{ border-color:var(--line-2); border-left-color:var(--gold-dk); background:rgba(0,0,0,.18); }
.choice-block.quiet .choice-title{ color:var(--txt); }

/* Repartition de creation : une ligne par classe, le compte a droite. */
.split-list{ display:grid; gap:6px; }
.split-row{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center;
  padding:8px 12px; border:1px solid var(--line-2); border-radius:var(--r-sm); background:rgba(0,0,0,.26);
}
.split-row.primary{ border-color:var(--gold-dk); }
.split-name{ display:grid; gap:2px; min-width:0; }
.split-name strong{ color:var(--txt); font-weight:600; }
.split-count{
  min-width:30px; text-align:center; font-family:var(--serif); font-size:17px;
  color:var(--gold-lt); font-variant-numeric:tabular-nums;
}
/* Le compte de la classe d'origine s'aligne sur celui des lignes a boutons. */
.split-row.primary > .split-count{ margin-right:36px; }

/* La liste des classes a rejoindre, cadree : on voit ou elle finit, et comment la fermer. */
.multiclass-frame{
  margin-top:12px; padding:10px 12px 12px;
  border:1px solid var(--line-2); border-radius:var(--r); background:rgba(0,0,0,.16);
}
.mc-frame-head{ display:flex; align-items:center; gap:10px; }
/* Le compte prend la place qui reste : la croix ne passe jamais a la ligne. */
.mc-frame-head .small{ flex:1; min-width:0; }
.mc-frame-title{
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--txt-2); font-weight:600;
}
.mc-frame-head .btn-icon-x{ margin-left:auto; }
.mc-frame-close{ margin-top:10px; }

.multiclass-list{ display:grid; gap:8px; margin-top:12px; }
.multiclass-row{
  padding:10px 12px; border:1px solid var(--line-2); border-radius:var(--r-sm); background:rgba(0,0,0,.22);
}
.multiclass-row.unmet{ opacity:.7; }
.multiclass-row.selected{ border-color:var(--gold); }
.mc-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.mc-head .btn{ margin-left:auto; }
.mc-conditions{ display:flex; gap:6px; flex-wrap:wrap; margin:6px 0; }
.cond{ font-size:11px; padding:2px 7px; border-radius:4px; border:1px solid currentColor; }
.cond.met{ color:#8fb98a; }
.cond.unmet{ color:#e9b4a9; }

.confirm-strip{
  margin-top:12px; padding:12px 14px; border-radius:var(--r-sm);
  border:1px solid var(--gold); background:rgba(176,141,79,.1); font-size:13px;
}
.row-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.mc-notes{ margin:8px 0 0; padding-left:18px; font-size:12.5px; line-height:1.6; color:var(--txt-2); }

.tabs{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.tab{
  padding:6px 12px; border-radius:99px; cursor:pointer; font-family:inherit; font-size:12.5px;
  border:1px solid var(--line-2); background:transparent; color:var(--txt-2);
}
.tab.on{ border-color:var(--gold); color:var(--gold-lt); background:rgba(176,141,79,.12); }

.asi-grid{ display:grid; gap:6px; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); }
.asi-row{
  display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:10px; align-items:center;
  padding:6px 10px; border:1px solid var(--line); border-radius:var(--r-sm);
}
.asi-row.on{ border-color:var(--gold-dk); background:rgba(176,141,79,.08); }
.asi-score{ font-variant-numeric:tabular-nums; color:var(--gold-lt); }
.asi-stepper{ display:flex; align-items:center; gap:6px; }
.asi-stepper .btn{ min-width:30px; padding:3px 8px; }
.asi-add{ min-width:22px; text-align:center; font-variant-numeric:tabular-nums; }

.feat-filter{ display:flex; align-items:center; gap:6px; margin-bottom:10px; }
.feat-list{ display:grid; gap:6px; max-height:420px; overflow-y:auto; padding-right:4px; }
.feat-row{ border:1px solid var(--line); border-radius:var(--r-sm); padding:6px 10px; }
.feat-row.selected{ border-color:var(--gold); background:rgba(176,141,79,.08); }
.feat-row.unmet{ opacity:.6; }
.feat-head{
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; width:100%;
  background:none; border:0; padding:2px 0; cursor:pointer; text-align:left; font-family:inherit; color:var(--txt);
}
.feat-head:disabled{ cursor:not-allowed; }
.feat-name{ font-family:var(--serif); font-size:14px; color:var(--gold-lt); }
.feat-bonus{ margin-left:auto; font-size:11.5px; color:var(--txt-2); }
.feat-text{ margin:6px 0 2px; font-size:12.5px; line-height:1.55; color:var(--txt-2); }
.feat-ability{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-top:10px; }

.history-block{ margin-top:18px; }
.history-row{
  display:grid; grid-template-columns:62px minmax(0,1fr) auto; gap:10px; align-items:start;
  padding:8px 0; border-bottom:1px solid var(--line); font-size:13px;
}

.rules-block{ margin-top:16px; }
.rules-block summary{ cursor:pointer; font-size:12.5px; color:var(--gold-lt); }

/* Incantation d'un multiclasse : une ligne par classe lanceuse. */
.cast-classes{ display:grid; gap:12px; }
.cast-class{ padding:10px 12px; border:1px solid var(--line); border-radius:var(--r-sm); }
.cast-class.inactive{ opacity:.65; }
.cc-title{ margin-bottom:8px; font-size:13px; }
.spell-tag.cls{ color:var(--gold-lt); }

/* ------------------------------------------------------------------ */
/*  Bandeaux d'evenement : experience, pieces                          */
/* ------------------------------------------------------------------ */

/* Au-dessus de tout, barres collantes comprises ; le conteneur ne prend aucun
   clic, seul le bandeau en prend. */
.event-banners{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  display:flex; justify-content:center; pointer-events:none;
  padding:0 16px;
}
.event-banner{
  pointer-events:auto; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center;
  width:min(340px, 100%); margin-top:14px; padding:18px 22px 16px;
  border:1px solid var(--gold-dk); border-top:3px solid var(--gold);
  border-radius:0 0 var(--r-lg) var(--r-lg);
  background:linear-gradient(180deg, var(--panel-2), var(--panel));
  box-shadow:0 18px 40px rgba(0,0,0,.55);
  transform:translateY(calc(-100% - 30px)); opacity:0;
  transition:transform .45s cubic-bezier(.2,.9,.25,1.15), opacity .3s ease;
}
.event-banner.in{ transform:translateY(0); opacity:1; }
.event-banner.out{ transform:translateY(calc(-100% - 30px)); opacity:0; transition:transform .4s ease-in, opacity .35s ease-in; }
.event-banner:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

.eb-circle{
  display:grid; place-items:center; width:64px; height:64px; margin-bottom:6px;
  border-radius:50%; border:2px solid var(--gold);
  background:radial-gradient(circle at 35% 30%, rgba(236,206,142,.35), rgba(0,0,0,.4) 70%);
  box-shadow:0 0 0 4px rgba(176,141,79,.15), 0 0 22px rgba(236,206,142,.25);
  font-family:var(--serif); font-size:17px; font-weight:700; letter-spacing:.08em; color:var(--gold-lt);
}
.eb-amount{ font-family:var(--serif); font-size:24px; font-weight:700; color:var(--gold-lt); font-variant-numeric:tabular-nums; }
.eb-reason{ font-size:13px; color:var(--txt-2); line-height:1.45; }
.eb-note{
  margin-top:6px; padding:2px 10px; border-radius:99px; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:#1a1408; background:linear-gradient(180deg, var(--gold-lt), var(--gold)); font-weight:700;
}

/* Pieces : le cercle prend la teinte de l'or ; perte : teinte d'alerte. */
.event-banner.money .eb-circle{ border-color:#d4b25e; color:#f3dc9a; }
.event-banner.negative{ border-top-color:var(--danger); border-color:#5c2a24; }
.event-banner.negative .eb-circle{ border-color:var(--danger); color:#f0b3a6; box-shadow:0 0 0 4px rgba(177,64,47,.15); background:rgba(0,0,0,.4); }
.event-banner.negative .eb-amount{ color:#f0b3a6; }
.event-banner.negative .eb-note{ color:#fff; background:#5c2a24; }

@media (prefers-reduced-motion: reduce){
  .event-banner, .event-banner.out{ transition:opacity .01s; transform:none; }
}

/* ------------------------------------------------------------------ */
/*  Fiche a imprimer                                                   */
/* ------------------------------------------------------------------ */

/* A l'ecran, un apercu : une feuille blanche sur le fond sombre. Au papier, la
   feuille seule, noir sur blanc, sans barre ni bouton. */
.print-page{ padding:20px 16px 60px; }
.print-toolbar{
  max-width:210mm; margin:0 auto 14px; display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.print-toolbar .btn-gold{ margin-left:auto; }

.print-sheet{
  --ink:#1b1712; --faint:#6b645a; --rule:#c9c1b3;
  max-width:210mm; margin:0 auto; padding:12mm; box-sizing:border-box;
  background:#fff; color:var(--ink); font-size:10.5pt; line-height:1.35;
  box-shadow:0 10px 40px rgba(0,0,0,.5);
  display:grid; gap:4mm;
}
.print-sheet *{ color:inherit; }

.pr-head{ display:flex; gap:5mm; align-items:flex-start; border-bottom:2px solid var(--ink); padding-bottom:3mm; }
.pr-portrait{ width:28mm; height:28mm; flex:none; border:1px solid var(--rule); overflow:hidden; }
.pr-portrait img{ width:100%; height:100%; object-fit:cover; display:block; }
.pr-identity{ flex:1; min-width:0; }
.pr-name{ margin:0; font-family:var(--serif); font-size:20pt; line-height:1.1; }
.pr-line{ margin-top:1mm; font-weight:600; }
.pr-facts{ display:flex; flex-wrap:wrap; gap:1.5mm 6mm; margin-top:2mm; font-size:9.5pt; }
.pr-fact{ display:inline-flex; gap:1.5mm; align-items:baseline; }
.pr-label{ font-size:7pt; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); }

.pr-abilities{ display:grid; grid-template-columns:repeat(6, 1fr); gap:2mm; }
.pr-ability{ border:1px solid var(--ink); border-radius:2mm; text-align:center; padding:1.5mm 0 2mm; }
.pr-ab-name{ font-size:7.5pt; letter-spacing:.1em; font-weight:700; }
.pr-ab-mod{ font-family:var(--serif); font-size:16pt; font-weight:700; line-height:1.1; }
.pr-ab-score{ display:inline-block; margin-top:.5mm; padding:0 2.5mm; border:1px solid var(--rule); border-radius:99px; font-size:9pt; }

.pr-keys{ display:grid; grid-template-columns:repeat(6, 1fr); gap:2mm; }
.pr-key{ border:1px solid var(--rule); border-radius:1.5mm; text-align:center; padding:1.5mm 1mm; }
.pr-key-value{ font-weight:700; font-size:11.5pt; }
.pr-cast{ grid-template-columns:repeat(4, 1fr); margin-bottom:2mm; }

.pr-vitals{ display:grid; grid-template-columns:1.2fr 1fr 1.4fr; gap:2mm; }
.pr-box{ border:1px solid var(--ink); border-radius:1.5mm; padding:1.5mm 2mm; min-height:14mm; display:flex; flex-direction:column; gap:1mm; }
.pr-blank{ flex:1; }
.pr-death{ display:grid; gap:1mm; font-size:9pt; }
.pr-tick{ display:inline-block; width:3.2mm; height:3.2mm; margin-left:1.2mm; border:1px solid var(--ink); border-radius:50%; vertical-align:-.5mm; }

.pr-columns{ display:grid; grid-template-columns:1fr 1.3fr; gap:5mm; }
.pr-block{ break-inside:avoid; }
.pr-title{
  margin:0 0 1.5mm; padding-bottom:.8mm; border-bottom:1px solid var(--ink);
  font-family:var(--serif); font-size:9.5pt; letter-spacing:.12em; text-transform:uppercase;
}
.pr-list{ list-style:none; margin:0; padding:0; display:grid; gap:.6mm; font-size:9.5pt; }
.pr-list li{ display:flex; align-items:center; gap:2mm; }
.pr-skills{ grid-template-columns:1fr; }
.pr-num{ width:8mm; text-align:right; font-weight:700; font-variant-numeric:tabular-nums; }
.pr-abil{ margin-left:auto; font-size:7.5pt; color:var(--faint); }
.pr-mark{ width:2.6mm; height:2.6mm; flex:none; border:1px solid var(--ink); border-radius:50%; }
.pr-mark.on{ background:var(--ink); }
.pr-mark.double{ box-shadow:0 0 0 .6mm #fff, 0 0 0 1mm var(--ink); }

.pr-table{ width:100%; border-collapse:collapse; font-size:9.5pt; }
.pr-table th{ text-align:left; font-size:7pt; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); border-bottom:1px solid var(--rule); padding:.8mm 1.5mm; }
.pr-table td{ border-bottom:1px solid var(--rule); padding:1mm 1.5mm; }

.pr-slots{ display:flex; flex-wrap:wrap; gap:1.5mm 5mm; margin-bottom:2mm; font-size:9pt; }
.pr-spell-level{ display:grid; grid-template-columns:22mm 1fr; gap:2mm; padding:.8mm 0; border-bottom:1px dotted var(--rule); font-size:9.5pt; }
.pr-coins{ display:flex; flex-wrap:wrap; gap:2mm 5mm; font-size:10.5pt; }
.pr-note{ margin:1.5mm 0 0; font-size:8.5pt; color:var(--faint); }
.pr-empty{ margin:0; color:var(--faint); }

.pr-features{ margin:0; columns:2; column-gap:6mm; font-size:9pt; }
.pr-features dt{ font-weight:700; break-after:avoid; }
.pr-features dd{ margin:0 0 1.5mm; break-inside:avoid; }
.pr-from{ font-weight:400; color:var(--faint); font-size:8pt; }
.pr-notes{ margin:0; display:grid; grid-template-columns:22mm 1fr; gap:1mm 3mm; font-size:9.5pt; }
.pr-notes dt{ font-weight:700; }
.pr-notes dd{ margin:0; white-space:pre-wrap; }

@media (max-width:760px){
  .print-sheet{ padding:6mm; }
  .pr-abilities, .pr-keys{ grid-template-columns:repeat(3, 1fr); }
  .pr-columns, .pr-vitals{ grid-template-columns:1fr; }
  .pr-features{ columns:1; }
}

@media print{
  /* Pas de marge de page : Chrome la peint avec le fond de l’application. La marge
     vit dans la feuille. */
  @page{ size:A4 portrait; margin:0; }
  /* Le fond sombre et son vignettage (body::before) n'ont rien à faire sur le
     papier : ils imprimaient des marges noires et un halo sur chaque page. */
  html, body, #app{ background:#fff !important; background-image:none !important; }
  body::before, body::after{ display:none !important; content:none !important; }
  body *{ visibility:visible; }
  .no-print, .event-banners{ display:none !important; }
  .print-page{ padding:0; }
  .print-sheet{ max-width:none; padding:10mm 11mm; box-shadow:none; -webkit-box-decoration-break:clone; box-decoration-break:clone; }
  .pr-abilities, .pr-keys{ grid-template-columns:repeat(6, 1fr); }
  .pr-columns{ grid-template-columns:1fr 1.3fr; }
  .pr-vitals{ grid-template-columns:1.2fr 1fr 1.4fr; }
  .pr-features{ columns:2; }
}

/* ------------------------------------------------------------------ */
/*  Etats : lecture seule sur la fiche, commandes sur la carte du MJ   */
/* ------------------------------------------------------------------ */

.condition-readout{ display:grid; gap:10px; }
.condition-list{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.condition-list li, .condition-exhaustion{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.condition-text{ font-size:12.5px; line-height:1.5; color:var(--txt-2); flex:1 1 240px; }

.gm-conditions{ align-items:center; }
.gm-none{ font-size:10.5px; color:var(--muted); font-style:italic; }
.gm-cond-controls{ display:inline-flex; gap:6px; margin-left:auto; flex-wrap:wrap; }
.gm-cond-controls .select.tiny{ width:auto; text-align:left; }
.cond-chip.removable{ display:inline-flex; align-items:center; gap:4px; padding-right:3px; }
.chip-x{
  display:inline-grid; place-items:center; width:16px; height:16px; padding:0; cursor:pointer;
  border:0; border-radius:50%; background:transparent; color:inherit;
}
.chip-x svg{ width:9px; height:9px; }
.chip-x:hover{ background:rgba(177,64,47,.35); }
.chip-x:focus-visible{ outline:2px solid var(--gold); outline-offset:1px; }

/* Bandeau d'un etat retire : le soulagement, pas l'alerte. */
.event-banner.relief{ border-top-color:#8fb98a; border-color:#2f4a2c; }
.event-banner.relief .eb-circle{ border-color:#8fb98a; color:#cfe6cb; box-shadow:0 0 0 4px rgba(143,185,138,.15); background:rgba(0,0,0,.4); }
.event-banner.relief .eb-amount{ color:#cfe6cb; }

/* ------------------------------------------------------------------ */
/*  Classe : aptitudes par niveau, listes de choix                     */
/* ------------------------------------------------------------------ */

.class-block + .class-block{ margin-top:26px; padding-top:22px; border-top:1px solid var(--line); }
.class-block-title{
  margin:0 0 10px; font-family:var(--serif); font-size:16px; font-weight:600; color:var(--gold-lt);
}
.class-equipment{ margin:2px 0 6px; padding-left:18px; font-size:12.5px; line-height:1.6; color:var(--txt-2); }
.class-later-toggle{ margin-top:12px; }
.class-later-toggle + .sub-features{ margin-top:12px; }

/* Le « i » d'une aptitude se range a droite de son nom, sans le decaler. */
.sub-feature .rt-name{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.sub-feature .rt-name .btn-icon-info{ width:20px; height:20px; margin-left:auto; }
.sub-feature .rt-name .btn-icon-info svg{ width:11px; height:11px; }

.opt-note{ margin:0 0 12px; font-size:12.5px; color:var(--txt-2); }
.opt-filter{ margin:0 0 12px; }
.opt-list{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.opt-row{
  padding:9px 12px;
  border-left:2px solid var(--gold-dk); border-radius:0 var(--r-sm) var(--r-sm) 0;
  background:rgba(0,0,0,.2);
}
.opt-head{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.opt-name{ font-family:var(--serif); font-size:13.5px; font-weight:600; color:var(--gold-lt); }
.opt-prereq{
  font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  border:1px solid var(--line-2); border-radius:4px; padding:0 6px;
}
.opt-text{ margin:4px 0 0; font-size:12.5px; line-height:1.6; color:var(--txt-2); }

/* Une suggestion se choisit d'un clic : toute la ligne est le bouton. */
.opt-pick{
  display:flex; align-items:baseline; gap:10px; width:100%; text-align:left; cursor:pointer;
  padding:9px 12px; font:inherit; color:inherit;
  border:0; border-left:2px solid var(--gold-dk); border-radius:0 var(--r-sm) var(--r-sm) 0;
  background:rgba(0,0,0,.2);
}
.opt-pick .opt-text{ margin:0; flex:1; }
.opt-pick:hover{ background:rgba(176,141,79,.12); }
.opt-pick:focus-visible{ outline:2px solid var(--gold); outline-offset:1px; }

/* ------------------------------------------------------------------ */
/*  Langues et maitrises ; suggestions de personnalite                 */
/* ------------------------------------------------------------------ */

.prof-sources{ margin-bottom:4px; }
.prof-chips{ display:flex; gap:6px; flex-wrap:wrap; }
.prof-chip{
  display:inline-flex; align-items:center; gap:4px; flex:none; white-space:nowrap;
  padding:3px 4px 3px 10px; border-radius:99px;
  font-size:12px; color:var(--txt); border:1px solid var(--line-2); background:rgba(0,0,0,.24);
}
.prof-chip.lang{ color:var(--gold-lt); border-color:var(--gold-dk); background:rgba(176,141,79,.1); }

.note-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.note-head .note-suggest{ padding:2px 9px; font-size:10.5px; }

/* Bandeau du tour de combat : la couleur du sang et de l'urgence, pas celle de l'or. */
.event-banner.turn{ border-top-color:#d0563f; border-color:#6b2b22; }
.event-banner.turn .eb-circle{
  border-color:#d0563f; color:#f7c9bd; font-size:15px;
  background:radial-gradient(circle at 35% 30%, rgba(208,86,63,.4), rgba(0,0,0,.45) 70%);
  box-shadow:0 0 0 4px rgba(208,86,63,.18), 0 0 22px rgba(208,86,63,.35);
}
.event-banner.turn .eb-amount{ color:#f7c9bd; }
.event-banner.turn .eb-note{ color:#fff; background:#6b2b22; }