/* ==========================================================================
   Fenêtres flottantes + fiche de personnage D&D 5e
   ========================================================================== */
.windows { position: fixed; inset: 0; z-index: 90; pointer-events: none; }
.float-window { position: fixed; pointer-events: auto; display: flex; flex-direction: column; border-radius: 14px; box-shadow: 0 30px 90px rgba(0, 0, 0, .75), 0 0 0 1px rgba(0, 0, 0, .6); animation: rise .2s var(--ease); }
.float-window.closing { animation: toast-out .14s ease forwards; pointer-events: none; }
.float-window.dragging { user-select: none; opacity: .97; }
.float-body { flex: 1; min-height: 0; display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; }
.float-resize { position: absolute; right: 2px; bottom: 2px; width: 16px; height: 16px; cursor: nwse-resize; z-index: 5; background: linear-gradient(135deg, transparent 50%, rgba(120, 100, 70, .55) 50%, rgba(120, 100, 70, .55) 58%, transparent 58%, transparent 70%, rgba(120, 100, 70, .55) 70%, rgba(120, 100, 70, .55) 78%, transparent 78%); border-radius: 0 0 12px 0; }

.sheet {
  --font-display: var(--font-sheet);
  --accent: #8e2c33;
  --parch: #ece3d2;
  --parch-2: #f6f0e4;
  --card: #fbf7ef;
  --ink: #2a221b;
  --ink-soft: #5b4f42;
  --ink-mute: #8c7f6f;
  --rule: #d9ccb4;
  --gilt: #b4955a;
  --gilt-2: #8d7040;
  --sidebar: #1f1c19;
  flex: 1; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); color: var(--ink);
  background:
    radial-gradient(ellipse at 20% 0%, rgba(255, 255, 255, .5), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .36 0 0 0 0 .24 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E"),
    var(--parch);
  font-family: var(--font-ui);
}
.sheet ::selection { background: rgba(142, 44, 51, .25); }

/* ---------- En-tête ---------- */
.sheet-header { position: relative; padding: 14px 22px 54px; color: #f6eee0; cursor: move; overflow: hidden;
  background:
    radial-gradient(ellipse 50% 120% at 85% 0%, rgba(255, 255, 255, .16), transparent 60%),
    radial-gradient(ellipse 70% 140% at 10% 120%, rgba(0, 0, 0, .5), transparent 60%),
    linear-gradient(115deg, color-mix(in srgb, var(--accent) 88%, #000), color-mix(in srgb, var(--accent) 55%, #120c0a));
  border-bottom: 1px solid rgba(0, 0, 0, .5); }
.sheet-header::before { content: ""; position: absolute; inset: 0; opacity: .14; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M32 4 60 32 32 60 4 32Z' fill='none' stroke='%23fff' stroke-width='.8'/%3E%3Cpath d='M32 16 48 32 32 48 16 32Z' fill='none' stroke='%23fff' stroke-width='.5'/%3E%3Ccircle cx='32' cy='32' r='2' fill='%23fff'/%3E%3C/svg%3E");
  mask-image: linear-gradient(90deg, transparent 0%, #000 55%); }
.sheet-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(240, 211, 148, .6), transparent); }
.sheet-topbar { position: relative; z-index: 2; display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.sheet-topbar .spacer { flex: 1; }
.sheet-hbtn { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(0, 0, 0, .28); color: #f1e6d2; transition: .15s; }
.sheet-hbtn:hover { background: rgba(0, 0, 0, .45); border-color: rgba(240, 211, 148, .5); }
.sheet-hbtn.on { background: #f0d394; color: #2a1c0c; border-color: #f0d394; }
.sheet-hbtn .icon { width: 16px; height: 16px; }
.lock-toggle { width: auto; padding: 0 10px 0 8px; gap: 6px; display: flex; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; }
.sheet-identity { position: relative; z-index: 2; display: flex; align-items: flex-end; gap: 20px; }
.sheet-identity .names { flex: 1; min-width: 0; }
.sheet-name { margin: 0; font: 700 34px/1.05 var(--font-display); letter-spacing: .04em; text-shadow: 0 2px 10px rgba(0, 0, 0, .45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet-sub { margin-top: 6px; font: 600 12px var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: rgba(246, 238, 224, .72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet-identity input.edit-name { width: 100%; font: 700 30px var(--font-display); letter-spacing: .04em; color: #fff; background: rgba(0, 0, 0, .25); border: 1px solid rgba(255, 255, 255, .25); border-radius: 8px; padding: 2px 10px; outline: none; }
.sheet-edit-identity { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.sheet-edit-identity label { display: grid; gap: 3px; font: 600 9px var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: rgba(246, 238, 224, .7); }
.sheet-edit-identity input, .sheet-edit-identity select { height: 28px; min-width: 0; border-radius: 6px; border: 1px solid rgba(255, 255, 255, .22); background: rgba(0, 0, 0, .28); color: #fff; padding: 0 7px; font-size: 12px; outline: none; text-transform: none; letter-spacing: 0; }
.sheet-edit-identity select option { color: #111; }
.sheet-level { position: relative; display: grid; justify-items: center; gap: 8px; flex: 0 0 auto; }
.level-medallion { position: relative; width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 35%, #3b342b, #141110 70%);
  box-shadow: 0 0 0 2px #e1c58b, 0 0 0 5px rgba(0, 0, 0, .55), 0 0 0 6px rgba(225, 197, 139, .45), 0 8px 22px rgba(0, 0, 0, .5); }
.level-medallion b { font: 700 28px/1 var(--font-display); color: #f6e7c4; }
.level-medallion span { position: absolute; bottom: -9px; padding: 1px 7px; border-radius: 10px; background: #e1c58b; color: #2a1c0c; font: 700 8.5px var(--font-ui); letter-spacing: .14em; }
.level-medallion input { width: 46px; background: transparent; border: 0; text-align: center; font: 700 26px var(--font-display); color: #fff; outline: none; }
.xp-bar { width: 170px; }
.xp-bar .track { height: 6px; border-radius: 6px; background: rgba(0, 0, 0, .45); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.xp-bar .track i { display: block; height: 100%; background: linear-gradient(90deg, #c9a35a, #f0d394); }
.xp-bar .label { display: flex; justify-content: space-between; margin-top: 4px; font: 600 10px var(--font-ui); color: rgba(246, 238, 224, .75); letter-spacing: .04em; }
.xp-bar input { width: 70px; height: 20px; border-radius: 4px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(0, 0, 0, .3); color: #fff; font-size: 11px; padding: 0 5px; }

/* ---------- Caractéristiques (blasons) ---------- */
.sheet-abilities { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(6, minmax(0, 88px)); justify-content: center; gap: 12px; padding: 0 14px; }
.ability { position: relative; height: 86px; border: 0; padding: 0; background: none; color: var(--ink); cursor: pointer; filter: drop-shadow(0 4px 6px rgba(40, 25, 10, .3)); transition: transform .15s var(--ease); }
.ability:hover { transform: translateY(-2px); }
.ability .shape { position: absolute; inset: 0 0 12px; background: linear-gradient(180deg, #fffaf0, #efe5d1); clip-path: polygon(0 12%, 50% 0, 100% 12%, 100% 82%, 50% 100%, 0 82%); }
.ability .shape::before { content: ""; position: absolute; inset: 0; clip-path: polygon(0 12%, 50% 0, 100% 12%, 100% 82%, 50% 100%, 0 82%); box-shadow: inset 0 0 0 2px var(--gilt); }
.ability .abbr { position: absolute; top: 12px; left: 0; right: 0; text-align: center; font: 700 9.5px var(--font-ui); letter-spacing: .16em; color: var(--ink-mute); }
.ability .mod { position: absolute; top: 25px; left: 0; right: 0; text-align: center; font: 700 24px/1 var(--font-display); color: var(--ink); }
.ability .score { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); min-width: 40px; height: 22px; padding: 0 8px; border-radius: 6px; display: grid; place-items: center; background: #1f1c19; color: #f3e9d6; font: 700 12px var(--font-ui); box-shadow: 0 0 0 1.5px var(--gilt); }
.ability .score input { width: 34px; background: transparent; border: 0; color: #fff; text-align: center; font: 700 12px var(--font-ui); outline: none; }
.ability:hover .shape { background: linear-gradient(180deg, #fff, #f3e7cc); }

/* ---------- Corps ---------- */
.sheet-body { position: relative; z-index: 3; min-height: 0; margin-top: -46px; display: grid; grid-template-columns: 216px minmax(0, 1fr) 46px; }
.sheet-center { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.sheet-content { min-height: 0; overflow: auto; padding: 12px 14px 22px; scrollbar-color: #c6b391 transparent; }
.sheet-rail { display: flex; flex-direction: column; gap: 4px; padding: 58px 6px 14px; border-left: 1px solid transparent; background: linear-gradient(180deg, transparent 46px, rgba(0, 0, 0, .07) 46px); }
.sheet-rail button { width: 34px; height: 36px; display: grid; place-items: center; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--ink-mute); transition: .15s; }
.sheet-rail button:hover { color: var(--ink); background: rgba(255, 255, 255, .55); }
.sheet-rail button.active { color: #fff; background: #23201c; border-color: var(--gilt); box-shadow: 0 3px 8px rgba(0, 0, 0, .25); }

.ov-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 10px; align-items: start; }

/* Colonne sombre */
.sheet-side { min-height: 0; overflow: auto; padding: 0 8px 18px 16px; display: grid; align-content: start; gap: 12px; scrollbar-width: none; }
.side-card { border-radius: 10px; background: linear-gradient(180deg, #2a2621, #1c1916); color: #efe5d3; box-shadow: 0 0 0 1px #0d0b09, 0 0 0 2px rgba(180, 149, 90, .55), 0 12px 26px rgba(30, 18, 8, .35); padding: 12px; }
.portrait-frame { position: relative; aspect-ratio: 1 / 1.08; border-radius: 6px; overflow: hidden; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--accent) 60%, #333), #121010 72%); box-shadow: inset 0 0 0 1px rgba(225, 197, 139, .35), inset 0 0 40px rgba(0, 0, 0, .6); display: grid; place-items: center; background-size: cover; background-position: center; }
.portrait-frame .initials { font: 700 54px var(--font-display); color: rgba(255, 255, 255, .85); text-shadow: 0 6px 20px #000; }
.portrait-frame .upload { position: absolute; inset: auto 8px 8px auto; }
.portrait-frame.editable { cursor: pointer; }
.portrait-frame.editable::after { content: "Changer le portrait"; position: absolute; inset: auto 0 0; padding: 8px; text-align: center; font: 600 11px var(--font-ui); background: linear-gradient(transparent, rgba(0, 0, 0, .8)); opacity: 0; transition: .2s; }
.portrait-frame.editable:hover::after { opacity: 1; }
.ac-row { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; margin: -30px 0 4px; }
.ac-shield { position: relative; width: 60px; height: 68px; display: grid; place-items: center; z-index: 2; }
.ac-shield svg { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .6)); }
.ac-shield b { position: relative; font: 700 24px/1 var(--font-display); color: #f6e7c4; margin-top: -4px; }
.ac-shield span { position: absolute; bottom: 9px; font: 700 7.5px var(--font-ui); letter-spacing: .16em; color: #c9b48a; }
.ac-shield input { position: relative; width: 40px; background: transparent; border: 0; text-align: center; font: 700 22px var(--font-display); color: #fff; outline: none; margin-top: -4px; }
.death { display: flex; gap: 4px; }
.death button { width: 13px; height: 13px; padding: 0; border-radius: 50%; border: 1.5px solid #8a7b62; background: transparent; }
.death.ko button.on { background: #c0474f; border-color: #e07078; box-shadow: 0 0 8px rgba(192, 71, 79, .6); }
.death.ok button.on { background: #5aae78; border-color: #84d6a1; box-shadow: 0 0 8px rgba(90, 174, 120, .6); }
.trio { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: end; gap: 4px; margin: 8px 0 12px; }
.trio-item { display: grid; justify-items: center; gap: 5px; }
.trio-item .val { min-width: 48px; height: 32px; display: grid; place-items: center; font: 700 17px var(--font-display); color: #2a1f12; background: linear-gradient(180deg, #e9d6ae, #c8a76b); clip-path: polygon(14% 0, 86% 0, 100% 50%, 86% 100%, 14% 100%, 0 50%); }
.trio-item .val.round { min-width: 44px; height: 44px; border-radius: 50%; clip-path: none; box-shadow: 0 0 0 2px #1c1916, 0 0 0 3px #c8a76b; font-size: 16px; }
.trio-item .val input { width: 40px; background: transparent; border: 0; text-align: center; font: 700 15px var(--font-display); color: #2a1f12; outline: none; }
.trio-item span { font: 700 8px var(--font-ui); letter-spacing: .14em; color: #b9a98d; text-transform: uppercase; }
.trio-item.click { cursor: pointer; }
.meter-label { display: flex; justify-content: space-between; align-items: baseline; margin: 2px 0 5px; font: 700 9px var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: #b9a98d; }
.meter-label em { font-style: normal; color: #8c7f6f; letter-spacing: .06em; font-weight: 600; }
.hp-meter { position: relative; height: 34px; border-radius: 6px; overflow: hidden; background: #2b1416; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6), 0 0 0 1px rgba(180, 149, 90, .35); display: flex; }
.hp-meter .fill { background: linear-gradient(180deg, #4fa36d, #2f7a4b); transition: width .3s var(--ease); }
.hp-meter .temp { background: repeating-linear-gradient(135deg, #4b7aa8 0 6px, #3d6a95 6px 12px); }
.hp-meter .text { position: absolute; inset: 0; display: flex; align-items: center; gap: 4px; padding: 0 10px; font: 700 16px var(--font-display); color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .8); }
.hp-meter .text small { font: 600 11px var(--font-ui); opacity: .85; }
.hp-meter .text .temp-label { margin-left: auto; font: 700 10px var(--font-ui); letter-spacing: .08em; color: #bcd6f0; }
.hp-quick { display: grid; grid-template-columns: 30px minmax(0, 1fr) 30px; gap: 5px; margin-top: 6px; }
.hp-quick button { height: 28px; border-radius: 6px; border: 1px solid #4a4237; background: #2a2621; color: #e6dac4; display: grid; place-items: center; padding: 0; }
.hp-quick button:hover { border-color: #c8a76b; }
.hp-quick input { min-width: 0; height: 28px; border-radius: 6px; border: 1px solid #4a4237; background: #151311; color: #fff; text-align: center; font-weight: 600; font-size: 12.5px; outline: none; }
.hp-quick input:focus { border-color: #c8a76b; }
.hp-edit-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5px; margin-top: 6px; }
.hp-edit-row label { display: grid; gap: 2px; font: 700 8px var(--font-ui); letter-spacing: .1em; color: #b9a98d; text-transform: uppercase; }
.hp-edit-row input { height: 26px; min-width: 0; border-radius: 5px; border: 1px solid #4a4237; background: #151311; color: #fff; text-align: center; outline: none; font-size: 12px; }
.hd-meter { height: 26px; border-radius: 6px; overflow: hidden; background: #24100f; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6), 0 0 0 1px rgba(180, 149, 90, .3); position: relative; }
.hd-meter i { display: block; height: 100%; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 85%, #fff), var(--accent)); }
.hd-meter b { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 10px; font: 700 13px var(--font-display); color: #fff; text-shadow: 0 1px 2px #000; }

.fav-card { background: var(--card); border-radius: 10px; box-shadow: 0 0 0 1px var(--rule); padding: 8px 10px; }
.fav-card h4 { margin: 2px 0 6px; display: flex; align-items: center; gap: 6px; font: 700 10px var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.fav-card h4 .icon { width: 13px; height: 13px; color: var(--gilt-2); }
.fav-row { display: flex; align-items: center; gap: 8px; padding: 6px 2px; border-top: 1px solid #ece2d0; }
.fav-row:first-of-type { border-top: 0; }
.fav-row .glyph { width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center; background: #23201c; color: #e1c58b; flex: 0 0 auto; }
.fav-row .glyph .icon { width: 14px; height: 14px; }
.fav-row .meta { flex: 1; min-width: 0; }
.fav-row strong { display: block; font: 600 12.5px var(--font-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fav-row span { font-size: 10.5px; color: var(--ink-mute); }
.fav-empty { border: 1.5px dashed #cdbd9f; border-radius: 8px; padding: 12px 8px; text-align: center; font: 600 10px var(--font-ui); letter-spacing: .1em; color: #b0a083; text-transform: uppercase; }

/* Cartes parchemin */
.p-card { position: relative; background: var(--card); border-radius: 12px; padding: 10px 12px 12px;
  box-shadow: 0 0 0 1px var(--gilt), 0 0 0 4px var(--card), 0 0 0 5px rgba(180, 149, 90, .45), 0 10px 22px rgba(70, 50, 20, .12); margin: 5px; }
.p-card + .p-card { margin-top: 18px; }
.p-card-title { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 0 0 8px; font: 700 11px var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.p-card-title .icon { width: 14px; height: 14px; color: var(--gilt-2); }
.p-card-title:has(.aside) { justify-content: flex-start; }
.p-card-title .aside { margin-left: auto; font: 600 10px var(--font-ui); letter-spacing: .02em; color: var(--ink-mute); text-transform: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.p-card-title button.aside { border: 0; background: transparent; color: var(--gilt-2); cursor: pointer; }

.skill { display: grid; grid-template-columns: 16px 32px minmax(0, 1fr) 34px 26px; align-items: center; gap: 4px; height: 29px; padding: 0 4px; border-bottom: 1px solid #ece2d0; border-radius: 4px; cursor: pointer; }
.skill:last-child { border-bottom: 0; }
.skill:hover { background: #f1e8d6; }
.skill .abbr { font: 700 10px var(--font-ui); letter-spacing: .06em; color: var(--ink-mute); }
.skill .name { font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.skill .total { font: 700 14px var(--font-display); text-align: right; color: var(--ink); }
.skill .passive { font-size: 10.5px; color: var(--ink-mute); text-align: right; }
.prof-dot { width: 11px; height: 11px; padding: 0; border-radius: 50%; border: 1.5px solid #a39478; background: transparent; position: relative; }
.prof-dot.p1 { background: #8f7a52; border-color: #8f7a52; }
.prof-dot.p2 { background: #8f7a52; border-color: #8f7a52; box-shadow: 0 0 0 2px var(--card), 0 0 0 3.5px #8f7a52; }
.prof-dot.p05 { background: linear-gradient(90deg, #8f7a52 50%, transparent 50%); border-color: #8f7a52; }
.editing .prof-dot { cursor: pointer; }
.editing .prof-dot:hover { box-shadow: 0 0 0 3px rgba(142, 44, 51, .25); }

.saves { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.save { display: grid; grid-template-columns: 16px 1fr auto; align-items: center; gap: 6px; height: 30px; padding: 0 4px; border-bottom: 1px solid #ece2d0; border-radius: 4px; cursor: pointer; font-size: 13px; }
.save:hover { background: #f1e8d6; }
.save b { font: 700 14px var(--font-display); }
.save .lbl { font-weight: 600; letter-spacing: .04em; }

.pill-card { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; margin: 0 5px 8px; background: linear-gradient(100deg, #fbf7ef 40%, #efe4cd); box-shadow: 0 0 0 1px var(--gilt), 0 4px 10px rgba(70, 50, 20, .08); }
.pill-card .glyph { width: 32px; height: 32px; border-radius: 7px; display: grid; place-items: center; background: #23201c; color: #e1c58b; box-shadow: 0 0 0 1px var(--gilt); flex: 0 0 auto; }
.pill-card .glyph .icon { width: 17px; height: 17px; }
.pill-card strong { display: block; font: 700 14px var(--font-display); letter-spacing: .02em; }
.pill-card span { font-size: 11px; color: var(--ink-mute); }

.trait-block { margin: 12px 5px 0; }
.trait-block h5 { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; padding-bottom: 4px; border-bottom: 1.5px solid #2a221b; font: 700 11px var(--font-ui); letter-spacing: .14em; text-transform: uppercase; }
.trait-block h5 .icon { width: 13px; height: 13px; }
.tags { display: flex; flex-wrap: wrap; gap: 5px; }
.tag { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 4px; border: 1px solid #b6a685; background: #fbf7ef; font: 700 10.5px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.tag.res { background: #2f6b45; border-color: #2f6b45; color: #f1fbf4; }
.tag.imm { background: #23201c; border-color: #23201c; color: #e1c58b; }
.tag.vul { background: #8e2c33; border-color: #8e2c33; color: #fff; }
.tag button { border: 0; background: transparent; padding: 0; color: inherit; opacity: .6; display: grid; }
.tag button:hover { opacity: 1; }
.tag button .icon { width: 12px; height: 12px; }
.tag-input { height: 24px; width: 110px; border-radius: 4px; border: 1px dashed #b6a685; background: transparent; padding: 0 8px; font-size: 11px; outline: none; color: var(--ink); }
.tag-input:focus { border-style: solid; border-color: var(--accent); }
.none { font-size: 11.5px; color: #a89a82; font-style: italic; }

/* Listes (actions, sorts, objets, capacités) */
.row-list { display: grid; }
.entry { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 4px; border-bottom: 1px solid #ece2d0; }
.entry:last-child { border-bottom: 0; }
.entry .glyph { width: 30px; height: 30px; border-radius: 7px; display: grid; place-items: center; background: #23201c; color: #e1c58b; box-shadow: 0 0 0 1px var(--gilt); }
.entry .glyph .icon { width: 15px; height: 15px; }
.entry .meta { min-width: 0; }
.entry .meta strong { display: flex; align-items: center; gap: 6px; font: 700 13.5px var(--font-display); letter-spacing: .01em; }
.entry .meta p { margin: 2px 0 0; font: 13px/1.45 var(--font-serif); color: var(--ink-soft); }
.entry .meta .sub { font: 600 10px var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute); }
.entry .btns { display: flex; gap: 5px; align-items: center; }
.entry.unprepared { opacity: .55; }
.roll-btn { height: 28px; padding: 0 10px; border-radius: 6px; border: 1px solid #b6a685; background: #fffaf1; color: var(--ink); font: 700 12px var(--font-ui); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.roll-btn:hover { background: #23201c; color: #f0d394; border-color: #23201c; }
.roll-btn .icon { width: 13px; height: 13px; }
.roll-btn.dmg { border-color: rgba(142, 44, 51, .45); color: #7c262c; }
.roll-btn.dmg:hover { background: #8e2c33; color: #fff; border-color: #8e2c33; }
.star { border: 0; background: transparent; padding: 2px; color: #c5b597; display: grid; }
.star.on { color: #c9973c; }
.star .icon { width: 15px; height: 15px; }
.star.on .icon { fill: currentColor; }
.mini-icon { border: 0; background: transparent; padding: 3px; color: var(--ink-mute); display: grid; border-radius: 5px; }
.mini-icon:hover { color: var(--accent); background: rgba(142, 44, 51, .08); }
.mini-icon .icon { width: 14px; height: 14px; }
.uses { display: flex; gap: 4px; }
.uses button { width: 14px; height: 14px; padding: 0; transform: rotate(45deg); border: 1.5px solid #8f7a52; background: #8f7a52; border-radius: 2px; }
.uses button.spent { background: transparent; }

/* Formulaires de la fiche (mode édition) */
.edit-entry { display: grid; gap: 6px; padding: 10px; margin: 6px 0; border-radius: 9px; background: #f1e8d6; box-shadow: inset 0 0 0 1px #dccdb0; }
.edit-entry .grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.edit-entry label { display: grid; gap: 3px; font: 700 8.5px var(--font-ui); letter-spacing: .12em; color: var(--ink-mute); text-transform: uppercase; }
.edit-entry .span2 { grid-column: span 2; } .edit-entry .span3 { grid-column: span 3; } .edit-entry .span4 { grid-column: span 4; } .edit-entry .span6 { grid-column: 1 / -1; }
.sheet input.p-input, .sheet select.p-input, .sheet textarea.p-input { min-width: 0; width: 100%; height: 30px; border-radius: 6px; border: 1px solid #cdbd9f; background: #fffdf8; padding: 0 8px; color: var(--ink); font: 500 13px var(--font-ui); outline: none; text-transform: none; letter-spacing: 0; }
.sheet textarea.p-input { height: auto; min-height: 64px; padding: 8px; resize: vertical; font: 14px/1.55 var(--font-serif); }
.sheet .p-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(142, 44, 51, .12); }
.add-row { display: flex; justify-content: center; margin-top: 8px; }
.add-row button { height: 30px; padding: 0 14px; border-radius: 7px; border: 1.5px dashed #b6a685; background: transparent; color: var(--ink-soft); font: 600 12px var(--font-ui); display: inline-flex; align-items: center; gap: 6px; }
.add-row button:hover { border-color: var(--accent); color: var(--accent); }

/* Sorts */
.spell-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 5px 5px 16px; }
.spell-stat { text-align: center; padding: 10px; border-radius: 10px; background: #23201c; color: #f3e9d6; box-shadow: 0 0 0 1px var(--gilt); }
.spell-stat b { display: block; font: 700 22px var(--font-display); color: #f0d394; }
.spell-stat span { font: 700 8.5px var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: #b9a98d; }
.spell-stat select { margin-top: 4px; height: 24px; border-radius: 5px; border: 1px solid #4a4237; background: #151311; color: #fff; font-size: 11px; }
.slot-pips { display: flex; gap: 4px; margin-left: auto; align-items: center; }
.slot-pips button { width: 15px; height: 15px; padding: 0; border-radius: 50%; border: 1.5px solid var(--accent); background: var(--accent); box-shadow: inset 0 0 0 2px var(--card); }
.slot-pips button.spent { background: transparent; box-shadow: none; }
.slot-pips input { width: 38px; height: 22px; border-radius: 5px; border: 1px solid #cdbd9f; text-align: center; font-size: 11px; background: #fffdf8; }
.level-head { display: flex; align-items: center; gap: 10px; margin: 14px 4px 2px; padding-bottom: 5px; border-bottom: 1.5px solid #2a221b; }
.level-head h5 { margin: 0; font: 700 12px var(--font-display); letter-spacing: .1em; text-transform: uppercase; }

/* Inventaire */
.currency { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 5px 5px 14px; }
.coin { display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 9px; background: var(--card); box-shadow: 0 0 0 1px var(--rule); }
.coin i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 700 9px var(--font-ui); color: #2a1f12; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .2), 0 0 0 1px rgba(0, 0, 0, .25); }
.coin input { min-width: 0; width: 100%; border: 0; background: transparent; font: 700 15px var(--font-display); color: var(--ink); outline: none; }
.weight { margin: 0 5px 14px; }
.weight .track { height: 8px; border-radius: 8px; background: #e2d6bf; overflow: hidden; }
.weight .track i { display: block; height: 100%; background: linear-gradient(90deg, #8f7a52, #b4955a); }
.weight .track i.over { background: linear-gradient(90deg, #8e2c33, #c0474f); }
.weight .label { display: flex; justify-content: space-between; margin-bottom: 5px; font: 700 10px var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); }
.equip-toggle { width: 18px; height: 18px; padding: 0; border-radius: 4px; border: 1.5px solid #a39478; background: transparent; display: grid; place-items: center; color: #fff; }
.equip-toggle.on { background: #2f6b45; border-color: #2f6b45; }
.equip-toggle .icon { width: 12px; height: 12px; }
.qty { font: 700 12px var(--font-ui); color: var(--ink-mute); min-width: 34px; text-align: right; }
.qty + .qty { min-width: 56px; }

/* Biographie */
.bio-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 4px; }
.bio-text { font: 15.5px/1.75 var(--font-serif); color: var(--ink); white-space: pre-wrap; margin: 0; }
.bio-text.empty { color: #a89a82; font-style: italic; }
.limited-note { margin: 5px; padding: 12px; border-radius: 10px; background: #23201c; color: #e7dcc6; font-size: 12.5px; display: flex; gap: 8px; align-items: center; }

/* Écran étroit */
@media (max-width: 980px) {
  .ov-grid { grid-template-columns: 1fr; }
  .sheet-abilities { gap: 6px; grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .float-window { left: 0 !important; top: 0 !important; width: 100vw !important; height: 100vh !important; border-radius: 0; }
  .float-body { border-radius: 0; }
  .sheet-header { cursor: default; padding: 12px 14px 54px; }
  .sheet-name { font-size: 24px; }
  .sheet-level .xp-bar { display: none; }
  .level-medallion { width: 50px; height: 50px; }
  .sheet-body { display: flex; flex-direction: column; overflow: auto; margin-top: -40px; }
  .sheet-center { display: contents; }
  .sheet-abilities, .sheet-side, .sheet-content, .sheet-rail { flex-shrink: 0; }
  .sheet-abilities { order: 1; }
  .sheet-side { order: 2; overflow: visible; padding: 14px 12px 0; }
  .sheet-content { order: 3; overflow: visible; padding: 8px 8px 16px; min-height: auto; }
  .sheet-rail { order: 4; position: sticky; bottom: 0; flex-direction: row; justify-content: space-around; padding: 6px; background: var(--parch); border-top: 1px solid var(--rule); z-index: 5; }
  .side-card { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 0 12px; align-items: start; }
  .side-card > .portrait-frame { grid-row: span 2; }
  .side-card > .ac-row { grid-column: 1; margin-top: -26px; }
  .side-card > :not(.portrait-frame):not(.ac-row) { grid-column: 2; }
  .side-card .trio { grid-row: 1; margin-top: 0; }
  .portrait-frame .initials { font-size: 36px; }
  .ability .mod { font-size: 18px; }
  .sheet-edit-identity { grid-template-columns: repeat(2, 1fr); }
  .currency { grid-template-columns: repeat(3, 1fr); }
  .bio-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Fiche sombre : même structure, corps « cuir et encre » au lieu du parchemin clair
   ========================================================================== */
.sheet {
  --parch: #15120f;
  --parch-2: #1b1713;
  --card: #1e1a16;
  --ink: #ece3d3;
  --ink-soft: #c4b7a3;
  --ink-mute: #8c7f6f;
  --rule: #332c24;
  --gilt: #8f7445;
  --gilt-2: #c9a15e;
  --glyph: #2b251f;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .9 0 0 0 0 .75 0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E"),
    var(--parch);
}
.sheet ::selection { background: rgba(201, 161, 94, .3); }
.sheet-content { scrollbar-color: #3a3229 transparent; }

/* Colonne de gauche : largeur maîtrisée et cadres jamais rognés */
.sheet-body { grid-template-columns: 236px minmax(0, 1fr) 46px; }
.sheet-side { grid-template-columns: minmax(0, 1fr); padding: 3px 10px 18px 16px; }
.sheet-side > * { min-width: 0; }
.sheet-side select, .sheet-side input { min-width: 0; max-width: 100%; }
.side-card { background: linear-gradient(180deg, #0f0d0b, #0b0a08); box-shadow: 0 0 0 1px #050403, 0 0 0 2px rgba(201, 161, 94, .45), 0 14px 30px rgba(0, 0, 0, .45); }

/* Blasons des caractéristiques */
.ability { filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .5)); color: var(--ink); }
.ability .shape { background: linear-gradient(180deg, #2a241d, #1a1612); }
.ability .shape::before { box-shadow: inset 0 0 0 2px var(--gilt-2); }
.ability:hover .shape { background: linear-gradient(180deg, #342c23, #211b16); }
.ability .abbr { color: #a8987f; }
.ability .mod { color: #f3e7cf; }
.ability .score { background: #0b0a08; box-shadow: 0 0 0 1.5px var(--gilt-2); }

/* Cartes */
.p-card { background: var(--card); box-shadow: 0 0 0 1px var(--gilt), 0 0 0 4px var(--card), 0 0 0 5px rgba(201, 161, 94, .28), 0 12px 26px rgba(0, 0, 0, .35); }
.fav-card { background: var(--card); box-shadow: 0 0 0 1px var(--rule); }
.fav-row { border-top-color: var(--rule); }
.fav-row .glyph, .entry .glyph, .pill-card .glyph { background: var(--glyph); color: #e1c58b; }
.fav-empty { border-color: #3d352b; color: #7d705f; }
.skill, .save { border-bottom-color: var(--rule); }
.skill:hover, .save:hover { background: #29231d; }
.prof-dot { border-color: #6f6352; }
.prof-dot.p1, .prof-dot.p2 { background: var(--gilt-2); border-color: var(--gilt-2); }
.prof-dot.p2 { box-shadow: 0 0 0 2px var(--card), 0 0 0 3.5px var(--gilt-2); }
.prof-dot.p05 { background: linear-gradient(90deg, var(--gilt-2) 50%, transparent 50%); border-color: var(--gilt-2); }
.pill-card { background: linear-gradient(100deg, #1f1b16 40%, #2a231b); box-shadow: 0 0 0 1px var(--gilt), 0 6px 14px rgba(0, 0, 0, .3); }
.trait-block h5 { border-bottom-color: #4a4034; color: var(--ink); }
.tag { background: #1a1612; border-color: #4a4034; color: var(--ink-soft); }
.tag.imm { background: #0b0a08; border-color: var(--gilt); }
.tag-input { border-color: #4a4034; color: var(--ink); }
.none, .bio-text.empty { color: #7d705f; }
.entry { border-bottom-color: var(--rule); }
.roll-btn { background: #15120f; border-color: #4a4034; color: var(--ink); }
.roll-btn:hover { background: var(--gilt-2); color: #1a130a; border-color: var(--gilt-2); }
.roll-btn.dmg { border-color: rgba(191, 74, 82, .5); color: #e48d93; }
.star { color: #5d5345; }
.star.on { color: #e0b65e; }
.edit-entry { background: #1a1612; box-shadow: inset 0 0 0 1px var(--rule); }
.sheet input.p-input, .sheet select.p-input, .sheet textarea.p-input { background: #0f0d0b; border-color: #3d352b; color: var(--ink); }
.add-row button { border-color: #4a4034; }
.spell-stat { background: #0f0d0b; }
.slot-pips input { background: #0f0d0b; border-color: #3d352b; color: var(--ink); }
.coin { background: var(--card); box-shadow: 0 0 0 1px var(--rule); }
.weight .track { background: #2a241d; }
.equip-toggle { border-color: #6f6352; }
.level-head { border-bottom-color: #4a4034; }
.sheet-rail { background: linear-gradient(180deg, transparent 46px, rgba(0, 0, 0, .25) 46px); }
.sheet-rail button:hover { background: rgba(255, 255, 255, .06); color: var(--ink); }
.sheet-rail button.active { background: #0b0a08; color: #f0d394; }
.uses button { border-color: var(--gilt-2); background: var(--gilt-2); }
.uses button.spent { background: transparent; }
@media (max-width: 760px) { .sheet-rail { background: var(--parch); border-top-color: var(--rule); } }

/* ==========================================================================
   Palette « Obsidienne » : graphite froid + violet (nouvelle direction artistique)
   ========================================================================== */
.sheet {
  --parch: #0e0f11;
  --parch-2: #121417;
  --card: #16181b;
  --ink: #e7e9ec;
  --ink-soft: #c7cbd1;
  --ink-mute: #8a9099;
  --rule: #24272c;
  --gilt: #3a3e45;
  --gilt-2: #8b6cef;
  --violet-2: #b7a2ff;
  --glyph: #22252a;
  background:
    radial-gradient(ellipse 80% 45% at 50% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
    var(--parch);
}
.sheet ::selection { background: rgba(139, 108, 239, .35); }
.sheet-content { scrollbar-color: #2a2d33 transparent; }
.side-card { background: #121417; box-shadow: 0 0 0 1px #2a2d33, 0 16px 34px rgba(0, 0, 0, .5); }
.portrait-frame { box-shadow: inset 0 0 0 1px rgba(139, 108, 239, .35), inset 0 0 40px rgba(0, 0, 0, .6); }
.ac-shield svg path:first-of-type { stroke: #8b6cef; }
.ac-shield svg path:last-of-type { stroke: rgba(183, 162, 255, .35); }
.ac-shield b, .ac-shield input { color: #fff; }
.ac-shield span { color: #b7a2ff; }
.trio-item .val { background: linear-gradient(180deg, #c4b3ff, #8b6cef); color: #120c22; }
.trio-item .val input { color: #120c22; }
.trio-item .val.round { box-shadow: 0 0 0 2px #121417, 0 0 0 3px #8b6cef; }
.trio-item span, .meter-label, .hp-edit-row label { color: #8a9099; }
.hp-quick button, .hp-quick input, .hp-edit-row input { border-color: #2a2d33; background: #0e0f11; }
.hp-quick button:hover, .hp-quick input:focus { border-color: #8b6cef; }
.level-medallion { background: radial-gradient(circle at 50% 35%, #26222f, #0e0f11 70%); box-shadow: 0 0 0 2px #b7a2ff, 0 0 0 5px rgba(0, 0, 0, .55), 0 0 0 6px rgba(183, 162, 255, .4), 0 8px 22px rgba(0, 0, 0, .5); }
.level-medallion b { color: #fff; }
.level-medallion span { background: #b7a2ff; color: #120c22; }
.xp-bar .track i { background: linear-gradient(90deg, #8b6cef, #c4b3ff); }

.ability { filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .55)); }
.ability .shape { background: linear-gradient(180deg, #1f2226, #15171a); }
.ability .shape::before { box-shadow: inset 0 0 0 1.5px #3a3e45; }
.ability:hover .shape { background: linear-gradient(180deg, #262931, #1a1c20); }
.ability:hover .shape::before { box-shadow: inset 0 0 0 1.5px #8b6cef; }
.ability .abbr { color: #8a9099; }
.ability .mod { color: #fff; }
.ability .score { background: #0b0c0e; box-shadow: 0 0 0 1px #3a3e45; }

.p-card { background: var(--card); box-shadow: 0 0 0 1px #2a2d33, 0 12px 28px rgba(0, 0, 0, .35); }
.p-card-title .icon, .fav-card h4 .icon { color: #b7a2ff; }
.fav-card { background: var(--card); box-shadow: 0 0 0 1px #2a2d33; }
.fav-row .glyph, .entry .glyph, .pill-card .glyph { background: #22252a; color: #b7a2ff; box-shadow: none; }
.fav-empty { border-color: #2a2d33; color: #5e646d; }
.skill:hover, .save:hover { background: #1d2024; }
.prof-dot { border-color: #4a4f57; }
.prof-dot.p1, .prof-dot.p2 { background: #8b6cef; border-color: #8b6cef; }
.prof-dot.p2 { box-shadow: 0 0 0 2px var(--card), 0 0 0 3.5px #8b6cef; }
.prof-dot.p05 { background: linear-gradient(90deg, #8b6cef 50%, transparent 50%); border-color: #8b6cef; }
.pill-card { background: #16181b; box-shadow: 0 0 0 1px #2a2d33; }
.trait-block h5 { border-bottom: 1px solid #2a2d33; }
.trait-block h5 .icon { color: #b7a2ff; }
.tag { background: #121417; border-color: #2a2d33; color: #c7cbd1; }
.tag.imm { background: #22252a; border-color: #3a3e45; color: #b7a2ff; }
.tag-input { border-color: #3a3e45; }
.none, .bio-text.empty { color: #5e646d; }
.roll-btn { background: #0e0f11; border-color: #2a2d33; }
.roll-btn:hover { background: #8b6cef; color: #120c22; border-color: #8b6cef; }
.star { color: #4a4f57; }
.star.on { color: #b7a2ff; }
.edit-entry { background: #121417; box-shadow: inset 0 0 0 1px #2a2d33; }
.sheet input.p-input, .sheet select.p-input, .sheet textarea.p-input { background: #0b0c0e; border-color: #2a2d33; }
.sheet .p-input:focus { border-color: #8b6cef; box-shadow: 0 0 0 3px rgba(139, 108, 239, .18); }
.add-row button { border-color: #3a3e45; }
.add-row button:hover { border-color: #8b6cef; color: #b7a2ff; }
.spell-stat { background: #121417; box-shadow: 0 0 0 1px #2a2d33; }
.spell-stat b { color: #b7a2ff; }
.spell-stat span { color: #8a9099; }
.slot-pips button { border-color: #8b6cef; background: #8b6cef; }
.slot-pips button.spent { background: transparent; }
.slot-pips input { background: #0b0c0e; border-color: #2a2d33; }
.coin { box-shadow: 0 0 0 1px #2a2d33; }
.weight .track { background: #22252a; }
.weight .track i { background: linear-gradient(90deg, #8b6cef, #b7a2ff); }
.equip-toggle { border-color: #4a4f57; }
.equip-toggle.on { background: #8b6cef; border-color: #8b6cef; }
.level-head { border-bottom: 1px solid #2a2d33; }
.uses button { border-color: #8b6cef; background: #8b6cef; }
.uses button.spent { background: transparent; }
.sheet-rail { background: linear-gradient(180deg, transparent 46px, rgba(0, 0, 0, .3) 46px); }
.sheet-rail button.active { background: #22252a; color: #b7a2ff; border-color: #8b6cef; }

/* ==========================================================================
   Bloc de stats des créatures (vue simplifiée, façon Monster Manual / Foundry)
   ========================================================================== */
.statblock { --sb-red: #e07a5f; --sb-red-2: #a8432f; --sb-green: #6cc7a8; }
.statblock .sb-header { padding: 12px 20px 16px; cursor: move; }
.sb-ident { position: relative; z-index: 2; display: flex; align-items: center; gap: 16px; }
.sb-portrait { flex: 0 0 auto; width: 84px !important; height: 84px !important; border-radius: 12px; margin: 0 !important; border: 2px solid rgba(240, 211, 148, .55); box-shadow: 0 6px 18px rgba(0, 0, 0, .45); }
.sb-portrait .initials { font-size: 26px; }
.sb-names { flex: 1; min-width: 0; }
.sb-names .sheet-name { font-size: 30px; }
.sb-type { margin-top: 4px; font: italic 500 14px var(--font-serif, Georgia, serif); color: rgba(246, 238, 224, .85); }
.sb-edit-id { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
.sb-cr { flex: 0 0 auto; display: grid; justify-items: center; min-width: 74px; padding: 8px 10px; border-radius: 12px; background: rgba(0, 0, 0, .3); border: 1px solid rgba(240, 211, 148, .4); }
.sb-cr b { font: 700 26px/1 var(--font-display); color: #f0d394; }
.sb-cr span { margin-top: 3px; font: 600 9.5px var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: rgba(246, 238, 224, .75); white-space: nowrap; }
.sb-scroll { min-height: 0; overflow: auto; padding: 14px 22px 26px; }
.sb-attrs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.sb-attr { position: relative; display: grid; align-content: start; gap: 2px; padding: 8px 10px; border-radius: 10px; background: var(--card); border: 1px solid var(--rule); min-width: 0; }
.sb-attr.hp { grid-column: span 2; }
.sb-attr > span { font: 700 9.5px var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--sb-red); }
.sb-attr b { font: 700 22px/1.1 var(--font-display); color: var(--ink); }
.sb-attr b small { font-size: 14px; color: var(--ink-mute); font-weight: 600; }
.sb-attr b small.temp { color: var(--sb-green); }
.sb-attr em { font: italic 11.5px var(--font-ui); color: var(--ink-mute); }
.sb-attr.click { cursor: pointer; }
.sb-attr.click:hover { border-color: var(--sb-red); }
.sb-attr input { width: 100%; height: 28px; border: 1px solid #2f333a; border-radius: 6px; background: #0b0c0e; padding: 0 6px; font: 600 15px var(--font-ui); color: var(--ink); outline: none; }
.sb-attr input:focus, .sb-ab-main input:focus { border-color: var(--sb-red); }
.sb-attr input.sb-small { height: 24px; font: 400 11.5px var(--font-ui); margin-top: 3px; }
.sb-hpedit { display: flex; align-items: center; gap: 4px; }
.sb-hpedit i { color: var(--ink-mute); font-style: normal; }
.sb-hpbar { height: 6px; border-radius: 4px; background: #2a2d33; overflow: hidden; margin: 3px 0 2px; }
.sb-hpbar i { display: block; height: 100%; background: linear-gradient(90deg, #8e2c33, #c0453a); }
.sb-hpq { margin-top: 4px; }
.sb-mini { display: flex; align-items: center; gap: 4px; font: 600 9.5px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-mute); }
.sb-mini input { width: 46px; height: 22px; padding: 0 4px; font-size: 12px; }
.sb-link { border: 0; background: none; padding: 0; color: var(--sb-red); font: inherit; font-weight: 600; cursor: pointer; }
.sb-link:hover { text-decoration: underline; }
.sb-abilities { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.sb-ab { display: grid; gap: 4px; }
.sb-ab-main { display: grid; justify-items: center; gap: 1px; padding: 6px 4px 7px; border-radius: 10px; border: 1px solid var(--rule); background: var(--card); color: var(--ink); cursor: pointer; }
.sb-ab-main:hover { border-color: var(--sb-red); }
.sb-ab-main span { font: 700 10px var(--font-ui); letter-spacing: .14em; color: var(--sb-red); }
.sb-ab-main b { font: 700 20px/1.1 var(--font-display); }
.sb-ab-main em { font: 600 12px var(--font-mono); color: var(--ink-soft); font-style: normal; }
.sb-ab-main input { width: 52px; height: 26px; text-align: center; border: 1px solid #2f333a; border-radius: 6px; background: #0b0c0e; color: var(--ink); font: 700 15px var(--font-ui); outline: none; }
.sb-ab-save { height: 22px; border-radius: 6px; border: 1px dashed var(--rule); background: transparent; color: var(--ink-mute); font: 600 10.5px var(--font-mono); cursor: pointer; }
.sb-ab-save.prof { border-style: solid; border-color: var(--sb-red); color: var(--sb-red); background: rgba(224, 122, 95, .08); }
.sb-rule { height: 3px; margin: 14px 0 10px; background: linear-gradient(90deg, var(--sb-red) 0%, var(--sb-red-2) 60%, transparent 100%); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.sb-lines { display: grid; gap: 4px; font-size: 13px; line-height: 1.5; color: var(--ink); }
.sb-line b { color: var(--sb-red); font-weight: 700; margin-right: 2px; }
.sb-line .tags { display: inline-flex; flex-wrap: wrap; gap: 4px; vertical-align: middle; }
.sb-skills-edit { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.sb-skill-chip { height: 24px; padding: 0 8px; border-radius: 999px; border: 1px dashed var(--rule); background: transparent; color: var(--ink-mute); font: 500 11.5px var(--font-ui); cursor: pointer; }
.sb-skill-chip.p1 { border-style: solid; border-color: var(--sb-red); color: var(--sb-red); background: rgba(224, 122, 95, .08); }
.sb-skill-chip.p2 { border-style: solid; border-color: var(--sb-red); background: var(--sb-red); color: #1a0f0b; }
.sb-skill-chip.p05 { border-style: solid; color: var(--ink-soft); }
.sb-conds { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.sb-conds select { width: auto; height: 26px; font-size: 12px; }
.sb-section { margin-top: 14px; }
.sb-h { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; padding-bottom: 3px; border-bottom: 1px solid var(--sb-red); font: 700 17px var(--font-display); letter-spacing: .04em; color: var(--sb-red); font-variant: small-caps; }
.sb-legend { display: flex; gap: 4px; margin-left: auto; }
.sb-legend button, .sb-uses button { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--sb-red); background: var(--sb-red); padding: 0; cursor: pointer; }
.sb-legend button.spent, .sb-uses button.spent { background: transparent; }
.sb-entry { padding: 6px 0 8px; border-bottom: 1px dotted rgba(224, 122, 95, .18); }
.sb-entry:last-of-type { border-bottom: 0; }
.sb-entry p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink); white-space: pre-line; }
.sb-entry p > b > i { font-weight: 700; color: var(--ink); }
.sb-entry.is-spent p { opacity: .55; }
.sb-range { font: 600 11px var(--font-mono); color: var(--ink-mute); margin-right: 4px; }
.sb-rolls { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.sb-recharge { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; margin-right: 6px; border-radius: 999px; border: 1px solid var(--sb-green); background: rgba(108, 199, 168, .1); color: var(--sb-green); font: 700 10.5px var(--font-ui); letter-spacing: .04em; vertical-align: 1px; cursor: pointer; }
.sb-recharge.spent { border-color: var(--sb-red); background: rgba(224, 122, 95, .1); color: var(--sb-red); }
.sb-recharge .icon { width: 12px; height: 12px; }
.sb-uses { display: inline-flex; align-items: center; gap: 3px; margin-right: 6px; vertical-align: 1px; }
.sb-uses em { font: 600 10.5px var(--font-ui); color: var(--ink-mute); font-style: normal; margin-left: 2px; }
.sb-note { margin: 0 0 6px; font: italic 13px/1.5 var(--font-serif, Georgia, serif); color: var(--ink-soft); white-space: pre-line; }
.sb-spells .spell-stats { margin-top: 0; }
.statblock .add-row { margin-top: 6px; display: flex; gap: 6px; }
@media (max-width: 640px) {
  .sb-attrs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sb-abilities { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sb-edit-id { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (min-width: 641px) { .statblock .sb-attrs { grid-template-columns: 1fr 2fr 1fr 1fr 1fr; } .statblock .sb-attr.hp { grid-column: auto; } }
.statblock textarea.p-input { width: 100%; }

/* Effets actifs */
.effects { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; align-items: center; }
.effect-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 4px 3px 8px; border-radius: 99px; border: 1px solid color-mix(in srgb, var(--violet) 50%, transparent); background: color-mix(in srgb, var(--violet) 12%, transparent); font-size: 12px; }
.effect-chip small { color: var(--text-3); font-size: 11px; }
.effect-chip button { border: 0; background: none; color: inherit; padding: 0 2px; cursor: pointer; display: inline-flex; }
.effect-chip button svg { width: 12px; height: 12px; }
.effects select { height: 28px; font-size: 12px; max-width: 180px; }
.ac-buff { font-style: normal; color: var(--emerald-2, #5fd39a); font-weight: 700; margin-left: 2px; }