/* ==========================================================================
   Table de jeu « Obsidienne » : carte plein écran, chat fixe à droite, fenêtres
   ========================================================================== */
.table-app { position: fixed; inset: 0; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) var(--chat-w); transition: grid-template-columns .25s var(--ease); }
.table-app.chat-collapsed { --chat-w: 0px; }
.table-app.chat-collapsed .chat-column { visibility: hidden; }

/* ---------- Surcouche haute de la carte ---------- */
.hud-top { position: absolute; z-index: 32; left: 14px; right: 14px; top: 14px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: start; pointer-events: none; }
.hud-left { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.hud-center { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.chip-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.chip { height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(21, 23, 26, .96); box-shadow: var(--shadow-1); pointer-events: auto; min-width: 0; }
.chip-brand { width: 44px; padding: 0; justify-content: center; color: inherit; }
.chip-brand:hover { border-color: var(--violet); }
.chip-brand .brand-mark { width: 26px; height: 26px; }
.crumbs strong { font: 700 14.5px var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
.crumbs span { color: var(--text-3); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.crumbs .badge { flex: 0 0 auto; }
.hud-left .stage-hud { position: static; pointer-events: none; flex-wrap: wrap; }
.hud-left .stage-hud > * { pointer-events: auto; }
.view-switch { display: flex; align-items: center; gap: 6px; pointer-events: auto; }
.view-switch .segmented { height: 44px; align-items: center; padding: 4px; border-radius: 12px; background: rgba(21, 23, 26, .96); border-color: var(--line-2); }
.view-switch .segmented button { height: 34px; padding: 0 12px; border-radius: 9px; }
.view-switch select { height: 44px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(21, 23, 26, .96); padding: 0 10px; font-size: 13px; }

/* Ruban d'initiative */
.initiative-ribbon { pointer-events: auto; display: flex; align-items: center; gap: 6px; min-height: 58px; padding: 6px 10px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(21, 23, 26, .96); box-shadow: var(--shadow-2); animation: rise .2s var(--ease); max-width: min(720px, 60vw); overflow-x: auto; scrollbar-width: none; }
.ribbon-round { display: grid; justify-items: center; padding: 0 10px 0 4px; flex: 0 0 auto; }
.ribbon-round span { font: 500 9.5px var(--font-mono); letter-spacing: .08em; color: var(--text-3); }
.ribbon-round b { font: 800 20px/1 var(--font-display); }
.ribbon-item { position: relative; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: 2px solid #4a4f57; background: var(--ink-4); background-size: cover; background-position: center; font: 800 11px var(--font-display); color: var(--text); padding: 0; transition: transform .15s; }
.ribbon-item:hover { transform: translateY(-2px); }
.ribbon-item.enemy { border-color: #c0474f; background-color: #3a1d20; }
.ribbon-item.current { width: 44px; height: 44px; border-color: var(--violet); box-shadow: 0 0 0 4px rgba(139, 108, 239, .25); font-size: 13px; }
.ribbon-item.done { opacity: .45; }
.ribbon-item.mine::after { content: ""; position: absolute; bottom: -6px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--violet-2); }
.ribbon-item.defeated { filter: grayscale(1); opacity: .35; }
.ribbon-item.unknown { border-style: dashed; color: var(--muted); background: var(--ink-3); }
.ribbon-sep { width: 1px; align-self: stretch; margin: 4px 4px; background: var(--line-2); flex: 0 0 auto; }

/* Jets demandés */
.request-stack { display: grid; gap: 8px; justify-items: center; }
.request-card { pointer-events: auto; width: 380px; display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; border-radius: 14px; border: 1px solid var(--violet); background: rgba(21, 23, 26, .98); box-shadow: var(--shadow-2), 0 0 30px rgba(139, 108, 239, .18); animation: rise .25s var(--ease); }
.request-card .glyph { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: rgba(139, 108, 239, .16); color: var(--violet-2); flex: 0 0 auto; }
.request-card .meta { flex: 1; min-width: 0; display: grid; gap: 2px; }
.request-card .meta span { font: 500 10.5px var(--font-mono); color: var(--text-3); letter-spacing: .04em; }
.request-card .meta strong { font: 700 15px var(--font-display); }
.request-card .results { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.request-card .results span { font: 600 11px var(--font-ui); padding: 2px 7px; border-radius: 6px; background: var(--ink-4); color: var(--text-2); letter-spacing: 0; }
.request-card .results span.ok { background: rgba(63, 154, 104, .2); color: #8fdcb0; }
.request-card .results span.ko { background: rgba(224, 96, 106, .18); color: #f2a3a8; }

/* ---------- HUD du joueur (bas de la carte) ---------- */
.player-hud { position: absolute; z-index: 31; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; align-items: stretch; gap: 10px; padding: 10px; border-radius: 18px; border: 1px solid var(--line-2); background: rgba(21, 23, 26, .97); box-shadow: var(--shadow-2); max-width: calc(100% - 300px); animation: rise .2s var(--ease); }
.phud-id { display: flex; align-items: center; gap: 12px; padding-right: 4px; min-width: 0; }
.phud-portrait { width: 52px; height: 52px; flex: 0 0 auto; border-radius: 14px; display: grid; place-items: center; border: 0; background: var(--ink-4); background-size: cover; background-position: center; color: var(--text); font: 800 18px var(--font-display); padding: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.phud-portrait:hover { box-shadow: inset 0 0 0 2px var(--violet); }
.phud-meta { display: grid; gap: 6px; width: 176px; min-width: 0; }
.phud-name { display: flex; align-items: baseline; gap: 8px; font: 700 15px var(--font-display); white-space: nowrap; overflow: hidden; }
.phud-name span { font: 500 11px var(--font-mono); color: var(--text-3); }
.phud-bar { position: relative; height: 9px; border-radius: 9px; background: #2b1416; overflow: hidden; display: flex; }
.phud-bar i { background: linear-gradient(90deg, #3f9a68, #5fc58c); }
.phud-bar i.mid { background: linear-gradient(90deg, #b5893c, #e0b65e); }
.phud-bar i.low { background: linear-gradient(90deg, #8e2c33, #e0606a); }
.phud-bar b { background: repeating-linear-gradient(135deg, #4b7aa8 0 5px, #3d6a95 5px 10px); }
.phud-sub { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font: 500 11px var(--font-mono); color: var(--text-3); }
.phud-sub .cond-pill { font-family: var(--font-ui); }
.phud-sep { width: 1px; background: var(--line-2); flex: 0 0 auto; }
.phud-res { display: flex; align-items: center; gap: 6px; }
.res-btn { display: grid; justify-items: center; gap: 5px; width: 64px; padding: 7px 4px 6px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--ink-1); color: var(--text-2); font: 600 10.5px var(--font-ui); }
.res-btn .gem { width: 12px; height: 12px; border-radius: 3px; transform: rotate(45deg); background: var(--violet); box-shadow: 0 0 10px rgba(139, 108, 239, .5); }
.res-btn.used { color: var(--text-4); }
.res-btn.used .gem { background: transparent; box-shadow: inset 0 0 0 1.5px var(--text-4); }
.res-btn:hover { border-color: #3d424a; }
.res-btn:disabled { cursor: default; opacity: .7; }
.move-meter { display: grid; gap: 6px; width: 118px; padding: 0 4px; align-content: center; }
.move-meter .label { display: flex; justify-content: space-between; font: 500 10.5px var(--font-mono); color: var(--text-3); gap: 6px; white-space: nowrap; }
.move-meter .label b { color: var(--text); font-weight: 600; }
.move-meter .track { height: 6px; border-radius: 6px; background: var(--ink-4); overflow: hidden; }
.move-meter .track i { display: block; height: 100%; background: var(--violet); }
.move-meter .track i.over { background: var(--crimson-2); }
.phud-cta { display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.phud-target { display: flex; align-items: center; gap: 8px; padding: 0 10px; border-radius: 10px; background: rgba(224, 96, 106, .1); border: 1px solid rgba(224, 96, 106, .35); color: #f2a3a8; font-size: 12.5px; font-weight: 600; max-width: 190px; }
.phud-target span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phud-target button { border: 0; background: transparent; color: inherit; padding: 2px; display: grid; }

/* ---------- Colonne de chat ---------- */
.chat-column { position: relative; z-index: 40; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--ink-1); border-left: 1px solid var(--line); overflow: hidden; }
.chat-head { flex: 0 0 auto; display: grid; gap: 10px; padding: 12px 12px 10px; border-bottom: 1px solid var(--line); }
.chat-head-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.chat-head-row .spacer { flex: 1; }
.chat-title { font: 800 17px var(--font-display); }
.chat-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.chat-action { position: relative; width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--line-2); background: var(--ink-2); color: var(--text-2); display: grid; place-items: center; padding: 0; transition: .12s; }
.chat-action:hover { border-color: #3d424a; color: var(--text); background: var(--ink-3); }
.chat-action.on { border-color: var(--violet); color: var(--violet-2); background: rgba(139, 108, 239, .14); }
.chat-action .dot { position: absolute; top: -4px; right: -4px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; display: grid; place-items: center; background: var(--violet); color: var(--on-violet); font: 700 10px var(--font-ui); }
.chat-action.wide { width: auto; display: flex; gap: 8px; padding: 0 12px; font-size: 13px; font-weight: 600; }
.chat-actions .sep { width: 1px; margin: 6px 2px; background: var(--line-2); }
.chat-actions .push { margin-left: auto; }
.chat-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.presence { display: flex; align-items: center; }
.presence .avatar { width: 26px; height: 26px; margin-left: -6px; font-size: 10px; box-shadow: 0 0 0 2px var(--ink-1); }
.presence .avatar:first-child { margin-left: 0; }
.presence .avatar.online { box-shadow: 0 0 0 2px var(--ink-1), 0 0 0 3.5px var(--emerald-2); }
.conn { display: flex; align-items: center; gap: 7px; height: 26px; padding: 0 4px; color: var(--text-3); font-size: 12px; }
.conn-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px rgba(139, 108, 239, .16); animation: pulse 1.2s infinite; }
.conn.online .conn-dot { background: var(--emerald-2); box-shadow: 0 0 0 3px rgba(95, 197, 140, .14); animation: none; }
.conn.offline .conn-dot { background: var(--crimson-2); box-shadow: 0 0 0 3px rgba(224, 96, 106, .16); }
.conn.online .conn-label { display: none; }
.chat-toggle { position: absolute; right: 0; top: 50%; z-index: 33; width: 18px; height: 64px; transform: translateY(-50%); display: grid; place-items: center; padding: 0; border: 1px solid var(--line-2); border-right: 0; border-radius: 9px 0 0 9px; background: var(--ink-2); color: var(--text-3); }
.chat-toggle:hover { color: var(--violet-2); }
.chat-toggle .icon { width: 13px; height: 13px; }

/* ---------- Fenêtres de panneau (scènes, acteurs, combat, journal) ---------- */
.panel-window .float-body { background: var(--ink-1); box-shadow: inset 0 0 0 1px var(--line-2); }
.panel-head { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 8px 0 14px; border-bottom: 1px solid var(--line); background: var(--ink-2); cursor: move; user-select: none; }
.panel-head .glyph { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: rgba(139, 108, 239, .14); color: var(--violet-2); }
.panel-head strong { flex: 1; font: 800 16px var(--font-display); }
.panel-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.panel-body > .dock-panel, .panel-body > .notes-shell { flex: 1; min-height: 0; }
.panel-tabs { flex: 0 0 auto; display: flex; gap: 4px; padding: 8px 10px 0; border-bottom: 1px solid var(--line); }
.panel-tabs button { height: 36px; padding: 0 12px; border: 0; border-radius: 9px 9px 0 0; background: transparent; color: var(--text-3); font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 7px; }
.panel-tabs button:hover { color: var(--text); }
.panel-tabs button.active { color: var(--violet-2); background: var(--ink-2); box-shadow: inset 0 -2px 0 var(--violet); }

/* Chronique et documents */
.chronicle { flex: 1; min-height: 0; overflow: auto; padding: 14px 16px 20px; }
.chronicle h4 { margin: 18px 0 8px; font: 700 12px var(--font-mono); letter-spacing: .06em; color: var(--violet-2); text-transform: uppercase; }
.chronicle h4:first-child { margin-top: 0; }
.chron-entry { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 8px 0; border-bottom: 1px solid var(--line); }
.chron-entry .glyph { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--ink-3); color: var(--text-3); }
.chron-entry .glyph.crit { background: rgba(139, 108, 239, .18); color: var(--violet-2); }
.chron-entry .glyph.fail { background: rgba(224, 96, 106, .16); color: #f2a3a8; }
.chron-entry .glyph .icon { width: 14px; height: 14px; }
.chron-entry p { margin: 3px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.chron-entry time { font: 500 10.5px var(--font-mono); color: var(--text-4); padding-top: 4px; }
.doc-grid { flex: 1; min-height: 0; overflow: auto; padding: 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; align-content: start; }
.doc-card { display: grid; gap: 8px; padding: 8px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--ink-2); color: inherit; text-align: left; }
.doc-card:hover { border-color: var(--violet); }
.doc-card .thumb { height: 96px; border-radius: 8px; background: var(--ink-4) center / cover no-repeat; display: grid; place-items: center; color: var(--text-4); }
.doc-card strong { font: 700 13px var(--font-display); }
.doc-card span { font-size: 11px; color: var(--text-3); }

/* Document montré par le MJ */
.handout-layer { position: fixed; inset: 0; z-index: 220; display: grid; place-items: center; padding: 24px; background: rgba(5, 6, 8, .82); backdrop-filter: blur(6px); animation: fade .2s ease; }
.handout { position: relative; width: min(880px, 100%); max-height: calc(100vh - 48px); overflow: auto; border-radius: 18px; border: 1px solid var(--line-2); background: var(--ink-2); box-shadow: var(--shadow-3); animation: rise .25s var(--ease); }
.handout img { display: block; width: 100%; max-height: 66vh; object-fit: contain; background: #050506; }
.handout-copy { padding: 22px 26px 24px; }
.handout-copy span { font: 500 11px var(--font-mono); color: var(--violet-2); letter-spacing: .06em; }
.handout-copy h2 { margin: 6px 0 12px; font: 800 28px/1.15 var(--font-display); }
.handout-copy p { margin: 0; font: 17px/1.7 var(--font-serif); color: var(--text-2); white-space: pre-wrap; }
.handout-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 0 26px 22px; }
.handout .close { position: absolute; top: 12px; right: 12px; background: rgba(11, 12, 14, .7); }

/* Tutoriel */
.coach-spot { position: fixed; z-index: 500; border-radius: 14px; box-shadow: 0 0 0 9999px rgba(5, 6, 8, .74), 0 0 0 2px var(--violet), 0 0 30px rgba(139, 108, 239, .5); pointer-events: none; transition: all .3s var(--ease); }
.coach-card { position: fixed; z-index: 501; width: 310px; padding: 16px 16px 14px; border-radius: 14px; border: 1px solid var(--violet); background: var(--ink-2); box-shadow: var(--shadow-3); animation: rise .2s var(--ease); }
.coach-card span { font: 500 11px var(--font-mono); color: var(--violet-2); }
.coach-card h3 { margin: 6px 0 6px; font: 800 18px var(--font-display); }
.coach-card p { margin: 0 0 14px; font-size: 13.5px; line-height: 1.55; color: var(--text-2); }
.coach-card .row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }

/* Dés animés */
.dice-stage { position: absolute; inset: 0; z-index: 45; pointer-events: none; overflow: hidden; }
.die3d { position: absolute; left: 50%; top: 46%; width: 70px; height: 70px; margin: -35px 0 0 -35px; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .65)); animation: die-fly 1s cubic-bezier(.15, .8, .25, 1) forwards, die-out .45s ease 2.4s forwards; }
.die3d .face { position: absolute; inset: 0; display: grid; place-items: center; clip-path: var(--shape); background: linear-gradient(145deg, color-mix(in srgb, var(--c) 82%, #fff), var(--c) 55%, color-mix(in srgb, var(--c) 60%, #000)); color: #fff; font: 800 24px var(--font-display); text-shadow: 0 2px 4px rgba(0, 0, 0, .55); }
.die3d .face::after { content: ""; position: absolute; inset: 0; clip-path: var(--shape); background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .45), transparent 45%); }
.die3d.crit .face { box-shadow: none; }
.die3d.crit { filter: drop-shadow(0 0 16px rgba(183, 162, 255, .9)) drop-shadow(0 14px 18px rgba(0, 0, 0, .6)); }
.die3d.fumble .face { --c: #b5404a !important; }
.die3d.dropped { opacity: .45; }
.dice-total { position: absolute; left: 50%; top: 46%; transform: translate(-50%, 54px); padding: 6px 14px; border-radius: 12px; background: rgba(11, 12, 14, .92); border: 1px solid var(--line-2); font: 800 22px var(--font-display); color: #fff; opacity: 0; animation: total-in .3s ease 1.2s forwards, die-out .45s ease 2.6s forwards; white-space: nowrap; }
.dice-total small { font: 500 11px var(--font-mono); color: var(--text-3); margin-left: 8px; }
@keyframes die-fly { from { transform: translate(var(--sx), var(--sy)) rotate(var(--r0)) scale(.55); } 70% { transform: translate(calc(var(--ex) * 1.06), calc(var(--ey) * 1.06)) rotate(calc(var(--r1) * 1.04)) scale(1.04); } to { transform: translate(var(--ex), var(--ey)) rotate(var(--r1)) scale(1); } }
@keyframes die-out { to { opacity: 0; transform: translate(var(--ex), var(--ey)) rotate(var(--r1)) scale(.9); } }
@keyframes total-in { to { opacity: 1; } }

.dock-tabs { flex: 0 0 auto; display: flex; gap: 2px; padding: 8px 8px 0; border-bottom: 1px solid var(--line); }
.dock-tab { position: relative; flex: 1; height: 40px; display: flex; align-items: center; justify-content: center; gap: 7px; border: 0; background: transparent; color: var(--text-3); font-size: 12.5px; font-weight: 600; border-radius: var(--r-2) var(--r-2) 0 0; }
.dock-tab:hover { color: var(--text); background: var(--ink-2); }
.dock-tab.active { color: var(--gold-2); }
.dock-tab.active::after { content: ""; position: absolute; left: 14%; right: 14%; bottom: -1px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.dock-tab .count { min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px; display: grid; place-items: center; background: var(--crimson); color: #fff; font-size: 10px; }
.dock-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.dock-section-head { display: flex; align-items: center; gap: 8px; padding: 14px 14px 8px; }
.dock-section-head .eyebrow { flex: 1; }
.dock-scroll { flex: 1; min-height: 0; overflow: auto; padding: 0 8px 12px; }
.dock-search { margin: 4px 12px 8px; position: relative; }
.dock-search .icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-4); width: 15px; height: 15px; }
.dock-search input { width: 100%; height: 34px; padding: 0 10px 0 32px; border-radius: var(--r-2); border: 1px solid var(--line); background: var(--ink-1); outline: none; font-size: 13px; }
.dock-search input:focus { border-color: var(--gold-3); }

/* ---------- Listes (scènes, acteurs, bestiaire) ---------- */
.list-item { position: relative; display: flex; align-items: center; gap: 11px; padding: 8px 9px; border-radius: var(--r-2); border: 1px solid transparent; cursor: pointer; transition: background .12s, border-color .12s; }
.list-item:hover { background: var(--ink-2); }
.list-item.active { background: linear-gradient(90deg, rgba(139, 108, 239, .11), rgba(139, 108, 239, .02)); border-color: var(--line-gold); }
.list-item .meta { min-width: 0; flex: 1; display: grid; gap: 2px; }
.list-item .meta strong { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-item .meta span { font-size: 11.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-item .actions { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: flex; gap: 2px; padding: 2px; border-radius: 8px; background: rgba(21, 23, 26, .96); box-shadow: -10px 0 12px rgba(21, 23, 26, .9); opacity: 0; pointer-events: none; transition: opacity .12s; }
.list-item:hover .actions { opacity: 1; pointer-events: auto; }
.list-item[data-scene] .meta strong { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; }
.list-item[draggable=true] { cursor: grab; }
.scene-thumb { width: 50px; height: 38px; flex: 0 0 auto; border-radius: 6px; border: 1px solid var(--line-2); background-color: #15171a; background-size: cover; background-position: center; position: relative; overflow: hidden; }
.scene-thumb.pattern { background-image: linear-gradient(rgba(139, 108, 239, .18) 1px, transparent 1px), linear-gradient(90deg, rgba(139, 108, 239, .18) 1px, transparent 1px); background-size: 9px 9px; }
.scene-thumb .live { position: absolute; right: 4px; top: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--emerald-2); box-shadow: 0 0 0 2px rgba(0, 0, 0, .5); }
.portrait { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; font: 700 12px var(--font-display); color: var(--text); border: 1.5px solid var(--ring, var(--gold-3)); background: radial-gradient(circle at 35% 30%, #4b433a, #16181b 70%); background-size: cover; background-position: center; box-shadow: 0 2px 8px rgba(0, 0, 0, .4); }
.portrait.enemy { --ring: var(--crimson-2); background-image: radial-gradient(circle at 35% 30%, #5a2b2f, #1b0f10 70%); }
.portrait.npc { --ring: #7b8796; }
.hp-line { width: 44px; height: 4px; border-radius: 4px; background: #3a1d20; overflow: hidden; flex: 0 0 auto; }
.hp-line i { display: block; height: 100%; background: linear-gradient(90deg, var(--emerald), var(--emerald-2)); }
.hp-line.mid i { background: linear-gradient(90deg, #b5893c, #b7a2ff); }
.hp-line.low i { background: linear-gradient(90deg, var(--crimson), var(--crimson-2)); }
.group-label { padding: 12px 10px 6px; display: flex; align-items: center; gap: 8px; }
.group-label .eyebrow { flex: 1; }

/* ---------- Chat ---------- */
.chat-feed { flex: 1; min-height: 0; overflow: auto; padding: 14px 12px 6px; display: flex; flex-direction: column; gap: 4px; }
.msg { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding: 6px 4px; border-radius: var(--r-2); }
.msg + .msg.same { margin-top: -6px; }
.msg.same .avatar { visibility: hidden; height: 0; }
.msg.same .msg-head { display: none; }
.msg-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; }
.msg-head strong { font-size: 13px; font-weight: 600; }
.msg-head strong.gm { color: var(--gold-2); }
.msg-head time { font-size: 10.5px; color: var(--text-4); }
.msg p { margin: 0; color: var(--text-2); font-size: 13.5px; line-height: 1.5; word-wrap: break-word; }
.msg.emote p { font-style: italic; font-family: var(--font-serif); font-size: 15px; color: var(--text); }
.msg-system { align-self: center; margin: 8px 0; display: flex; align-items: center; gap: 10px; color: var(--violet-2); font: 500 11px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; width: 100%; text-align: center; }
.msg-system::before, .msg-system::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--line-gold), transparent); }

.roll-card { position: relative; margin-top: 3px; border-radius: var(--r-3); border: 1px solid var(--line-2); background: linear-gradient(160deg, #1b1e22, #111315); overflow: hidden; }
.roll-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg, transparent, var(--gold-3), transparent); }
.roll-card.crit-success { border-color: rgba(139, 108, 239, .6); box-shadow: 0 0 24px rgba(139, 108, 239, .12); }
.roll-card.crit-success::before { background: linear-gradient(90deg, transparent, var(--gold-2), transparent); }
.roll-card.crit-fail { border-color: rgba(191, 74, 82, .55); }
.roll-card.crit-fail::before { background: linear-gradient(90deg, transparent, var(--crimson-2), transparent); }
.roll-top { display: flex; align-items: center; gap: 8px; padding: 9px 12px 0; }
.roll-top strong { flex: 1; font: 700 13px var(--font-display); }
.roll-top .badge { height: 18px; font-size: 9px; }
.roll-total { display: flex; align-items: center; gap: 12px; padding: 4px 12px 8px; }
.roll-total b { font: 800 32px/1 var(--font-display); color: var(--text); min-width: 46px; }
.crit-success .roll-total b { color: var(--gold-2); text-shadow: 0 0 18px rgba(183, 162, 255, .4); }
.crit-fail .roll-total b { color: var(--crimson-2); }
.roll-formula { font-size: 11.5px; color: var(--text-3); }
.roll-dice { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 12px 10px; }
.die-chip { min-width: 24px; height: 24px; padding: 0 6px; display: grid; place-items: center; border-radius: 6px; border: 1px solid var(--line-2); background: var(--ink-1); font: 600 11.5px var(--font-ui); color: var(--text-2); }
.die-chip.max { color: var(--gold-2); border-color: var(--line-gold); }
.die-chip.min { color: var(--crimson-2); border-color: rgba(191, 74, 82, .4); }
.die-chip.dropped { opacity: .35; text-decoration: line-through; }
.die-chip.mod { border-style: dashed; background: transparent; }
.roll-actions { display: flex; gap: 6px; padding: 0 12px 10px; }
.roll-secret { display: flex; align-items: center; gap: 6px; padding: 0 12px 8px; font-size: 11px; color: var(--violet); }

.dice-tray { flex: 0 0 auto; display: flex; gap: 4px; padding: 8px 10px 0; }
.die-btn { flex: 1; height: 34px; border-radius: var(--r-2); border: 1px solid var(--line); background: var(--ink-2); color: var(--text-2); font: 700 11px var(--font-display); letter-spacing: .03em; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; transition: .12s; }
.die-btn:hover { border-color: var(--gold-3); color: var(--gold-2); background: var(--ink-3); transform: translateY(-1px); }
.roll-mode { flex: 0 0 auto; display: flex; gap: 6px; padding: 8px 10px 0; align-items: center; }
.roll-mode .segmented { flex: 1; }
.roll-mode .segmented button { height: 26px; font-size: 11px; }
.composer { flex: 0 0 auto; display: flex; gap: 8px; padding: 10px; }
.composer input { flex: 1; min-width: 0; height: 40px; padding: 0 12px; border-radius: var(--r-2); border: 1px solid var(--line-2); background: var(--ink-1); outline: none; font-size: 13.5px; }
.composer input:focus { border-color: var(--gold-3); box-shadow: 0 0 0 3px var(--gold-glow); }
.composer .btn { width: 40px; height: 40px; padding: 0; }

/* ---------- Combat ---------- */
.combat-head { padding: 14px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); }
.round-chip { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; border: 1px solid var(--line-gold); background: radial-gradient(circle at 50% 30%, #262230, #121417); box-shadow: inset 0 0 0 3px #121417, inset 0 0 0 4px rgba(139, 108, 239, .25); }
.round-chip span { font: 600 8.5px var(--font-ui); letter-spacing: .14em; color: var(--text-3); text-transform: uppercase; margin-top: 6px; }
.round-chip b { font: 700 20px/1 var(--font-display); color: var(--gold-2); margin-top: -8px; }
.combat-head .title { flex: 1; min-width: 0; }
.combat-head .title strong { display: block; font: 600 14px var(--font-display); letter-spacing: .05em; }
.combat-head .title span { font-size: 12px; color: var(--text-3); }
.combat-controls { display: flex; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.combat-controls .btn { flex: 1; }
.combatants { flex: 1; min-height: 0; overflow: auto; padding: 10px 8px; display: grid; align-content: start; gap: 4px; }
.combatant { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px 8px 8px; border-radius: var(--r-3); border: 1px solid transparent; background: transparent; transition: background .15s, border-color .15s; }
.combatant:hover { background: var(--ink-2); }
.combatant.current { border-color: var(--line-gold); background: linear-gradient(90deg, rgba(139, 108, 239, .14), rgba(139, 108, 239, .02)); }
.combatant.current::before { content: ""; position: absolute; left: -1px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--gold); box-shadow: 0 0 10px var(--gold); }
.combatant.defeated { opacity: .45; }
.combatant.hidden-c .meta strong::after { content: " · masqué"; color: var(--violet); font-weight: 500; font-size: 11px; }
.combatant .meta { min-width: 0; display: grid; gap: 4px; }
.combatant .meta strong { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.combatant .hp-line { width: 100%; height: 5px; }
.combatant .sub { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-3); }
.init-box { width: 46px; height: 38px; border-radius: var(--r-2); border: 1px solid var(--line-2); background: var(--ink-1); text-align: center; font: 700 16px var(--font-display); color: var(--gold-2); outline: none; }
.init-box:focus { border-color: var(--gold-3); }
.init-roll { height: 38px; padding: 0 10px; border-radius: var(--r-2); border: 1px dashed var(--gold-3); background: rgba(139, 108, 239, .06); color: var(--gold-2); font-size: 11.5px; font-weight: 600; display: flex; align-items: center; gap: 5px; }
.init-roll:hover { background: rgba(139, 108, 239, .14); }
.cond-row { display: flex; flex-wrap: wrap; gap: 3px; }
.cond-pill { height: 16px; padding: 0 5px; border-radius: 4px; font: 700 9px/16px var(--font-ui); color: #111; background: var(--c, #888); }

.turn-banner { position: absolute; z-index: 35; left: 50%; top: 18px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 8px 18px 8px 8px; border-radius: 40px; border: 1px solid var(--line-gold); background: rgba(21, 23, 26, .94); box-shadow: var(--shadow-2), 0 0 30px rgba(139, 108, 239, .12); animation: rise .3s var(--ease); pointer-events: none; }
.turn-banner .portrait { width: 34px; height: 34px; }
.turn-banner span { font-size: 11px; color: var(--text-3); letter-spacing: .12em; text-transform: uppercase; }
.turn-banner strong { display: block; font: 600 15px var(--font-display); letter-spacing: .05em; color: var(--gold-2); }

/* ---------- Notes ---------- */
.notes-shell { flex: 1; min-height: 0; display: grid; grid-template-rows: auto minmax(110px, 38%) minmax(0, 1fr); }
.notes-toolbar { display: flex; gap: 6px; padding: 12px 12px 8px; }
.notes-toolbar select { flex: 1; min-width: 0; height: 32px; border-radius: var(--r-2); border: 1px solid var(--line-2); background: var(--ink-1); padding: 0 8px; font-size: 12.5px; }
.note-list { overflow: auto; padding: 0 8px 8px; border-bottom: 1px solid var(--line); }
.note-list .list-item { padding: 7px 9px; }
.note-glyph { width: 28px; height: 32px; flex: 0 0 auto; border-radius: 4px; display: grid; place-items: center; border: 1px solid var(--line-2); background: linear-gradient(160deg, #22252a, #121417); color: var(--gold); }
.note-glyph .icon { width: 15px; height: 15px; }
.note-editor { min-height: 0; overflow: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.note-editor .title-input { height: 40px; border: 0; border-bottom: 1px solid var(--line); background: transparent; padding: 0 2px; font: 600 17px var(--font-display); letter-spacing: .03em; outline: none; }
.note-editor .title-input:focus { border-color: var(--gold-3); }
.note-editor textarea { flex: 1; min-height: 140px; resize: none; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--ink-1); padding: 12px; font: 15px/1.65 var(--font-serif); color: var(--text); outline: none; }
.note-editor textarea:focus { border-color: var(--gold-3); }
.note-editor .row { display: flex; gap: 6px; }
.note-editor .row select { flex: 1; min-width: 0; height: 32px; border-radius: var(--r-2); border: 1px solid var(--line-2); background: var(--ink-1); padding: 0 8px; font-size: 12px; }
.note-picks { display: flex; flex-wrap: wrap; gap: 5px; }
.note-picks label { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 26px; border: 1px solid var(--line-2); font-size: 12px; color: var(--text-2); cursor: pointer; }
.note-picks label:has(input:checked) { border-color: var(--gold-3); color: var(--gold-2); background: rgba(139, 108, 239, .08); }
.note-picks input { display: none; }
.note-status { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; color: var(--text-4); }

/* ---------- Réglages de campagne ---------- */
.settings-section { margin-bottom: 20px; }
.settings-section h3 { margin: 0 0 10px; font: 600 12px var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.invite-code { display: flex; gap: 8px; align-items: stretch; }
.invite-code code { flex: 1; display: grid; place-items: center; height: 54px; border-radius: var(--r-3); border: 1px dashed var(--gold-3); background: rgba(139, 108, 239, .05); font: 700 24px var(--font-display); letter-spacing: .3em; color: var(--gold-2); }
.member-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) 170px auto; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--line); }
.member-row .meta strong { display: block; font-size: 13px; }
.member-row .meta span { font-size: 11.5px; color: var(--text-3); }
.member-row select { height: 32px; border-radius: var(--r-2); border: 1px solid var(--line-2); background: var(--ink-1); padding: 0 8px; font-size: 12px; min-width: 0; }

/* ---------- Mobile : mode « manette » ---------- */
.mobile-nav { display: none; }
@media (max-width: 1180px) {
  :root { --chat-w: 320px; }
  .player-hud { max-width: calc(100% - 120px); }
  .phud-meta { width: 140px; }
  .res-btn { width: 54px; }
  .move-meter { width: 104px; }
}
@media (max-width: 960px) {
  .player-hud { left: 72px; right: 72px; transform: none; max-width: none; flex-wrap: wrap; justify-content: center; }
  .initiative-ribbon { max-width: 48vw; }
}
@media (max-width: 860px) {
  .table-app { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 62px; }
  .stage { grid-row: 1; }
  .chat-column { position: fixed; left: 0; right: 0; top: 0; bottom: 62px; z-index: 80; display: none; border: 0; }
  .table-app.mobile-chat .chat-column { display: flex; }
  .chat-toggle { display: none; }
  .hud-top { grid-template-columns: minmax(0, 1fr); left: 8px; right: 8px; top: 8px; }
  .hud-center { order: -1; align-items: stretch; }
  .initiative-ribbon { max-width: 100%; }
  .request-card { width: 100%; }
  .crumbs span, .crumbs .badge { display: none; }
  .view-switch .segmented { display: none; }
  .player-hud { left: 8px; right: 8px; bottom: 74px; padding: 8px; gap: 8px; border-radius: 14px; }
  .phud-sep { display: none; }
  .phud-meta { width: auto; flex: 1; }
  .res-btn { width: 52px; }
  .mobile-nav { grid-row: 2; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); background: var(--ink-1); z-index: 90; }
  .mobile-nav button { border: 0; background: transparent; color: var(--text-3); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 10.5px; font-weight: 600; }
  .mobile-nav button.active { color: var(--violet-2); }
  .member-row { grid-template-columns: 32px minmax(0, 1fr); }
  .member-row select, .member-row .btn { grid-column: 2; }
  .zoom-cluster { display: none; }
}

/* Messages privés et cibles */
.msg.whisper { background: rgba(139, 108, 239, .08); box-shadow: inset 0 0 0 1px rgba(139, 108, 239, .25); }
.msg-head .to { font: 500 10.5px var(--font-mono); color: var(--violet-2); }
.roll-target { display: flex; align-items: center; gap: 8px; padding: 0 12px 10px; font-size: 12.5px; color: var(--text-2); }
.roll-target .verdict { padding: 2px 8px; border-radius: 6px; font: 700 11px var(--font-ui); letter-spacing: .04em; }
.roll-target .verdict.hit { background: rgba(63, 154, 104, .22); color: #8fdcb0; }
.roll-target .verdict.miss { background: rgba(224, 96, 106, .18); color: #f2a3a8; }
.roll-apply { display: flex; gap: 4px; padding: 0 12px 10px; flex-wrap: wrap; }
.composer { align-items: center; }
.composer select.to { flex: 0 0 auto; width: auto; max-width: 112px; height: 40px; border-radius: var(--r-2); border: 1px solid var(--line-2); background: var(--ink-2); padding: 0 6px; font-size: 12px; color: var(--text-2); }
.composer select.to.private { border-color: var(--violet); color: var(--violet-2); }

/* Taille du texte choisie par le joueur */
.chat-column, .player-hud, .modal, .initiative-ribbon, .request-stack, .panel-body, .sheet, .token-hud, .handout { zoom: var(--ui-zoom, 1); }
.always-names .token-name { opacity: 1; }
.turn-banner { top: 84px; }
.hud-right { display: flex; justify-content: flex-end; min-width: 0; }
.hud-right > * { pointer-events: auto; }
@media (max-width: 860px) { .hud-right { display: none; } }

/* ---------- Phase d'initiative ---------- */
.ribbon-round.init b { font-size: 16px; color: var(--violet-2); }
.ribbon-item .ini { position: absolute; right: -6px; bottom: -6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; display: grid; place-items: center; font: 700 10px var(--font-mono); font-style: normal; background: var(--ink-1); border: 1px solid var(--line-2); color: var(--text); }
.ribbon-item.waiting { border-style: dashed; opacity: .75; }
.ribbon-item.waiting .ini { color: #e8b36a; border-color: rgba(232, 179, 106, .5); }
.ribbon-item .ini.skull { background: #3a1416; border-color: #c0474f; color: #f0a3a8; }
.ribbon-item .ini.skull svg { width: 11px; height: 11px; }
.ribbon-item.dying { border-color: #c0474f; animation: dying 1.6s ease-in-out infinite; }
@keyframes dying { 50% { box-shadow: 0 0 0 4px rgba(192, 71, 79, .35); } }
.tie-card { border-color: #e8b36a; box-shadow: var(--shadow-2), 0 0 30px rgba(232, 179, 106, .16); }
.tie-card .glyph { background: rgba(232, 179, 106, .14); color: #f0c98b; }
.tie-choices { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
#tieStack { margin-top: 8px; }
.phud-init { display: flex; align-items: center; gap: 10px; padding: 0 6px; }
.phud-init span { font: 500 11px var(--font-mono); color: var(--text-3); }
.phud-init b { font: 800 24px var(--font-display); color: var(--violet-2); }
.phud-init em { font-style: normal; font-size: 12px; color: var(--text-3); }
.phud-init.todo .btn { animation: callout 1.8s ease-in-out infinite; }
@keyframes callout { 50% { box-shadow: 0 0 0 5px rgba(139, 108, 239, .3); } }

/* ---------- Jets contre la mort ---------- */
.phud-death { display: grid; gap: 6px; align-content: center; padding: 4px 10px; border-radius: 12px; border: 1px solid rgba(192, 71, 79, .55); background: linear-gradient(180deg, rgba(142, 44, 51, .22), rgba(142, 44, 51, .08)); min-width: 260px; }
.phud-death.urgent { animation: dying 1.6s ease-in-out infinite; }
.phud-death.stable { border-color: rgba(95, 197, 140, .5); background: linear-gradient(180deg, rgba(63, 154, 104, .2), rgba(63, 154, 104, .06)); }
.phud-death.dead { border-color: #4a4f57; background: var(--ink-2); filter: grayscale(.6); }
.ds-title { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #f0a3a8; }
.phud-death.stable .ds-title { color: #9bdcb2; }
.phud-death.dead .ds-title { color: var(--text-3); }
.ds-rows { display: grid; grid-template-columns: auto auto auto auto; align-items: center; gap: 4px 8px; font: 500 10.5px var(--font-mono); color: var(--text-3); }
.ds-pips { display: flex; gap: 4px; }
.ds-pips i { width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid #4a4f57; background: var(--ink-1); }
.ds-pips.ok i.on { background: var(--emerald-2); border-color: var(--emerald-2); }
.ds-pips.ko i.on { background: var(--crimson-2); border-color: var(--crimson-2); }
.phud-death p { margin: 0; font-size: 12px; color: var(--text-2); max-width: 280px; }
.phud-death .death-btn { justify-self: start; }
.phud-portrait.dying { filter: grayscale(.7) brightness(.7); box-shadow: 0 0 0 2px #c0474f; }
.roll-death { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 3px 9px; border-radius: 8px; font: 600 11.5px var(--font-ui); border: 1px solid var(--line-2); }
.roll-death.revive, .roll-death.stable, .roll-death.success { color: #9bdcb2; border-color: rgba(95, 197, 140, .45); background: rgba(95, 197, 140, .1); }
.roll-death.fail, .roll-death.crit-fail, .roll-death.dead { color: #f0a3a8; border-color: rgba(224, 96, 106, .45); background: rgba(224, 96, 106, .1); }
.round-chip.init b { font-size: 15px; color: var(--violet-2); }
.tie-note { display: flex; gap: 8px; align-items: flex-start; margin: 0 12px 8px; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(232, 179, 106, .4); background: rgba(232, 179, 106, .07); font-size: 12px; color: var(--text-2); }
.tie-note svg { flex: 0 0 auto; color: #f0c98b; margin-top: 1px; }
/* Barre d'actions du chat : une seule ligne même avec beaucoup de boutons */
.chat-actions { flex-wrap: nowrap; gap: 5px; }
.chat-actions .chat-action:not(.wide) { flex: 0 1 38px; width: auto; min-width: 30px; height: 38px; }
.chat-actions .sep { flex: 0 0 1px; margin: 6px 1px; }
.chat-action.wide { flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; }
.dice-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#castStack { margin-top: 8px; }
.spell-card .glyph { background: rgba(139, 108, 239, .2); }
.slot-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.slot-choice { display: grid; gap: 2px; justify-items: start; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--ink-2); color: var(--text); text-align: left; }
.slot-choice:hover:not(:disabled) { border-color: var(--violet); }
.slot-choice:disabled { opacity: .35; }
.slot-choice b { font: 700 14px var(--font-display); }
.slot-choice span { font-size: 11.5px; color: var(--text-3); }
.slot-choice em { font-style: normal; font: 600 12px var(--font-mono); color: var(--violet-2); }
.slot-choice.ritual { border-style: dashed; }

/* ---------- Écran du MJ ---------- */
.gm-screen { padding: 12px; display: grid; gap: 12px; align-content: start; }
.gm-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.gm-secret { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 11px; background: var(--ink-2); border: 1px solid var(--line); font-size: 12.5px; color: var(--text-2); }
.gm-secret > span { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; }
.gm-secret select { height: 30px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--ink-1); color: var(--text); padding: 0 8px; }
.gm-party { display: grid; gap: 6px; }
.gm-pc { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--ink-1); cursor: pointer; }
.gm-pc:hover { border-color: var(--line-2); background: var(--ink-2); }
.gm-pc .portrait { width: 40px; height: 40px; }
.gm-pc-name { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.gm-pc-name strong { font: 700 14px var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-pc-name span { font-size: 11px; color: var(--text-3); white-space: nowrap; }
.gm-pc-hp { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.gm-pc-hp .hp-line { flex: 1; height: 6px; border-radius: 6px; background: var(--ink-4); overflow: hidden; }
.gm-pc-hp .hp-line i { display: block; height: 100%; background: var(--emerald-2); }
.gm-pc-hp .hp-line.mid i { background: #e0b65e; }
.gm-pc-hp .hp-line.low i { background: var(--crimson-2); }
.gm-pc-hp b { font: 600 11.5px var(--font-mono); }
.gm-pc-hp .ds { font-style: normal; font: 600 10.5px var(--font-mono); color: #f0a3a8; }
.gm-pc-conds { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; align-items: center; }
.gm-pc-stats { display: grid; grid-template-columns: repeat(6, 38px); gap: 3px; }
.gm-pc-stats div { display: grid; justify-items: center; padding: 3px 0; border-radius: 7px; background: var(--ink-2); }
.gm-pc-stats b { font: 700 13px var(--font-display); }
.gm-pc-stats span { font: 500 8.5px var(--font-mono); color: var(--text-3); text-transform: uppercase; }
.gm-h { display: flex; align-items: center; gap: 6px; margin: 4px 0 0; font: 650 11px var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.amb-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.amb { display: grid; gap: 6px; padding: 8px; border-radius: 11px; border: 1px solid var(--line); background: var(--ink-1); }
.amb.on { border-color: var(--violet); background: rgba(139, 108, 239, .1); }
.amb-toggle { display: flex; align-items: center; gap: 8px; border: 0; background: transparent; color: var(--text); font-weight: 600; font-size: 13px; padding: 2px; }
.amb input[type=range], .track input[type=range] { width: 100%; }
.track-list { display: grid; gap: 4px; }
.track { display: grid; grid-template-columns: auto minmax(0, 1fr) 110px auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 10px; border: 1px solid var(--line); background: var(--ink-1); }
.track:not(.on) { grid-template-columns: auto minmax(0, 1fr) auto; }
.track.on { border-color: var(--violet); }
.track .name { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ref-dcs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ref-dcs div { display: grid; padding: 8px 10px; border-radius: 10px; background: var(--ink-2); border: 1px solid var(--line); }
.ref-dcs b { font: 800 18px var(--font-display); color: var(--violet-2); }
.ref-dcs span { font-size: 11.5px; color: var(--text-3); }
.ref-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ref-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); color: var(--text-2); vertical-align: top; }
.ref-table td:first-child { white-space: nowrap; color: var(--text); font-weight: 600; }
.ref-conds details { border-radius: 9px; border: 1px solid var(--line); background: var(--ink-1); margin-bottom: 4px; }
.ref-conds summary { padding: 7px 10px; cursor: pointer; font-weight: 600; font-size: 13px; }
.ref-conds p { margin: 0 10px 6px; font-size: 12.5px; color: var(--text-2); }
@media (max-width: 600px) { .gm-pc { grid-template-columns: 40px minmax(0, 1fr); } .gm-pc-stats { grid-column: 1 / -1; grid-template-columns: repeat(6, 1fr); } .amb-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Vampire V5 : jets ---------- */
.v5-tray { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 8px 10px; }
.v5-tray label { display: inline-flex; align-items: center; gap: 4px; font: 600 11px var(--font-ui); color: var(--text-3); }
.v5-tray input { width: 44px; height: 28px; padding: 0 4px; text-align: center; border-radius: 6px; border: 1px solid var(--line-2); background: var(--ink-1); color: var(--text-1); font: 600 13px var(--font-ui); }
.v5-tray label.hunger .icon { color: #d9415a; }
.v5-tray label.hunger input { border-color: rgba(217, 65, 90, .5); color: #f0a0ac; }
.v5-dice { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 12px 10px; }
.v5-card::before { background: linear-gradient(90deg, transparent, #b3263a, transparent); }
.v5-pick { all: unset; cursor: pointer; border-radius: 7px; }
.v5-pick[disabled] { cursor: default; }
.v5-card.picking .v5-pick:not([disabled]) .v5-die { outline: 1px dashed var(--line-2); outline-offset: 1px; }
.v5-card.picking .v5-pick.on .v5-die { outline: 2px solid var(--gold); background: rgba(139, 108, 239, .25); }
.v5-die { min-width: 26px; height: 26px; padding: 0 5px; display: grid; place-items: center; border-radius: 6px; border: 1px solid var(--line-2); background: var(--ink-1); font: 700 12px var(--font-ui); color: var(--text-3); }
.v5-die.hit { color: var(--text-1); background: #2a2f3a; }
.v5-die.ten { color: #1a1206; background: #e8d9a8; border-color: #e8d9a8; }
.v5-die.hunger { background: #4a1119; color: #f0a0ac; }
.v5-die.hunger.hit { background: #7a1a28; color: #fff; }
.v5-die.hunger.ten { background: #d9415a; color: #fff; }
.v5-die.hunger.skull { background: #120406; color: #ff5d74; box-shadow: inset 0 0 0 1px #ff5d74; }
.v5-die.rerolled { box-shadow: inset 0 0 0 2px var(--gold); }
.v5-parts { padding: 0 12px; margin-top: -4px; font-size: 11.5px; color: var(--text-3); }
.v5-note { padding: 0 12px 8px; font-size: 11.5px; color: var(--text-3); display: flex; align-items: center; gap: 5px; }
.v5-verdict { padding: 0 12px 10px; font: 600 12.5px var(--font-ui); }
.v5-card .v5-note + .v5-verdict, .v5-card .v5-verdict + .v5-note { padding-top: 0; }
.v5-verdict.ok { color: #7fc79a; }
.v5-verdict.ko { color: #ff7d8f; }
.v5-card.v5-old { opacity: .55; }
.v5-card.v5-hungry, .v5-card.v5-bestial { border-color: rgba(217, 65, 90, .55); }
.v5-card.v5-messy { border-color: rgba(217, 65, 90, .7); box-shadow: 0 0 18px rgba(217, 65, 90, .2); }
.v5-card.v5-crit { border-color: var(--line-gold); }
.v5-badge.ok { color: #7fc79a; border-color: rgba(127, 199, 154, .4); }
.v5-badge.crit { color: var(--gold-2); border-color: var(--line-gold); }
.v5-badge.messy, .v5-badge.bestial { color: #ff7d8f; border-color: rgba(217, 65, 90, .6); background: rgba(179, 38, 58, .18); }
.v5-badge.ko { color: var(--text-3); }
.gm-pc-stats.v5 { grid-template-columns: repeat(4, 40px); }
.gm-pc-stats.v5 .hot b { color: #ff6b80; }
.gm-pc-stats b small { font-size: 9px; color: #ff7d8f; margin-left: 1px; }
.gm-pc-hp .icon { color: var(--text-3); flex: 0 0 auto; }
.ref-table.bp th { font: 600 10px var(--font-ui); text-align: left; color: var(--text-3); padding: 3px 4px; }
.ref-table.bp td { padding: 3px 4px; }
.phud-hunger { display: inline-flex; gap: 2px; margin-left: 6px; }
.phud-hunger i { width: 7px; height: 10px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: #3a2328; }
.phud-hunger i.on { background: #ff4d67; box-shadow: 0 0 5px rgba(255, 77, 103, .6); }
.phud-levelup.v5 { background: rgba(179, 38, 58, .25); border-color: rgba(217, 65, 90, .55); color: #f0a0ac; }
.order-btns { display: grid; gap: 2px; }
.order-btns button { width: 30px; height: 18px; display: grid; place-items: center; padding: 0; border-radius: 5px; border: 1px solid var(--line-2); background: var(--ink-2); color: var(--text-2); }
.order-btns button:first-child .icon { transform: rotate(180deg); }
.order-btns button:disabled { opacity: .3; }
.order-btns .icon { width: 12px; height: 12px; }
.v5-beast { display: flex; gap: 6px; align-items: flex-start; margin: 0 12px 10px; padding: 7px 9px; border-radius: 8px; background: rgba(179, 38, 58, .16); border: 1px solid rgba(217, 65, 90, .4); font-size: 11.5px; line-height: 1.45; color: #f0c4cb; }
.v5-beast .icon { color: #ff6b80; flex: 0 0 auto; margin-top: 1px; }

/* ---------- Téléphone (campagnes Vampire) ---------- */
.phone { --ph-bg: #0d0a0c; --ph-card: #17121a; --ph-line: #2a2129; --ph-out: #9e2236; --ph-out-2: #c33049; --ph-in: #262028;
  flex: 1; min-height: 0; display: flex; flex-direction: column; background: radial-gradient(120% 60% at 50% 0%, #1d1218 0%, var(--ph-bg) 60%); color: var(--text); }
.phone-bar { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; height: 50px; padding: 0 10px; border-bottom: 1px solid var(--ph-line); }
.phone-bar strong { flex: 1; font: 700 15px var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phone-icon { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border: 0; border-radius: 10px; background: transparent; color: var(--text-2); }
.phone-icon:hover { background: var(--ph-card); color: var(--text); }
.phone-link { border: 0; background: transparent; color: #e98a9a; font-size: 12.5px; font-weight: 600; padding: 4px 6px; border-radius: 7px; }
.phone-link:hover { background: rgba(233, 138, 154, .1); }
.phone-tabs { display: flex; gap: 4px; padding: 8px 10px 0; }
.phone-tabs button { flex: 1; height: 32px; border: 0; border-radius: 9px; background: transparent; color: var(--text-3); font-size: 12.5px; font-weight: 600; }
.phone-tabs button.on { background: var(--ph-card); color: var(--text); }
.phone-mine { display: flex; align-items: center; gap: 8px; margin: 10px 12px 2px; padding: 9px 12px; border-radius: 12px; background: var(--ph-card); font-size: 12.5px; color: var(--text-3); }
.phone-mine b { color: var(--text); font: 600 13px var(--font-mono); flex: 1; }
.phone-list { flex: 1; min-height: 0; overflow: auto; padding: 6px 6px 10px; }
.phone-row { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 8px; border: 0; border-radius: 12px; background: transparent; color: inherit; text-align: left; }
.phone-row:hover { background: var(--ph-card); }
.phone-av { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(160deg, #3a2a35, #221a20); font: 700 14px var(--font-display); color: #f2c7cf; }
.phone-av.masked { background: #1c1c20; color: var(--text-4); }
.phone-av.group { color: #f2c7cf; }
.phone-row-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.phone-row-text b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phone-row-text small { font-size: 12.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phone-row.unread b { color: #fff; }
.phone-row.unread small { color: var(--text-2); }
.phone-badge { flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--ph-out-2); color: #fff; font-size: 11.5px; font-weight: 700; display: grid; place-items: center; }
.phone-h { margin: 14px 8px 4px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-4); }
.phone-num { display: flex; align-items: center; gap: 6px; padding: 7px 8px; border-radius: 10px; }
.phone-num:hover { background: var(--ph-card); }
.phone-num > span { flex: 1; min-width: 0; display: grid; }
.phone-num b { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phone-num small { font: 500 12px var(--font-mono); color: var(--text-3); }
.phone-fab { flex: 0 0 auto; margin: 8px 12px 12px; height: 42px; border: 0; border-radius: 21px; display: flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(180deg, var(--ph-out-2), var(--ph-out)); color: #fff; font-weight: 700; font-size: 13.5px; }
.phone-fab:hover { filter: brightness(1.08); }
.phone-empty { margin: auto; padding: 30px 24px; text-align: center; color: var(--text-3); font-size: 13px; line-height: 1.5; display: grid; justify-items: center; gap: 8px; }
.phone-empty .icon { width: 30px; height: 30px; color: #7a5560; }
.phone-empty strong { color: var(--text); }
.phone-note { margin: 10px 14px; text-align: center; font-size: 12.5px; color: var(--text-3); }
/* Conversation */
.phone-thread { flex: 1; min-height: 0; overflow: auto; padding: 12px 12px 6px; display: flex; flex-direction: column; gap: 3px; }
.bubble-wrap { display: flex; flex-direction: column; max-width: 82%; }
.bubble-wrap.in { align-self: flex-start; align-items: flex-start; }
.bubble-wrap.out { align-self: flex-end; align-items: flex-end; }
.bubble { padding: 8px 12px; border-radius: 18px; font-size: 14px; line-height: 1.38; overflow-wrap: anywhere; }
.bubble-wrap.in .bubble { background: var(--ph-in); border-bottom-left-radius: 6px; }
.bubble-wrap.out .bubble { background: linear-gradient(180deg, var(--ph-out-2), var(--ph-out)); color: #fff; border-bottom-right-radius: 6px; }
.bubble img { display: block; max-width: 100%; max-height: 260px; border-radius: 12px; margin: -2px -6px 4px; cursor: zoom-in; }
.bubble-name { margin: 8px 8px 2px; font-size: 11px; color: var(--text-3); }
.bubble-seen { margin: 2px 6px 4px; font-size: 11px; color: var(--text-4); }
.phone-compose { flex: 0 0 auto; display: flex; align-items: flex-end; gap: 6px; padding: 8px 10px 10px; border-top: 1px solid var(--ph-line); flex-wrap: wrap; }
.phone-compose select { flex: 1 1 100%; height: 30px; border-radius: 8px; background: var(--ph-card); color: var(--text-2); border: 1px solid var(--ph-line); font-size: 12.5px; padding: 0 8px; }
.phone-compose textarea, .phone-dial textarea { flex: 1; min-height: 38px; max-height: 120px; resize: none; padding: 9px 14px; border-radius: 19px; border: 1px solid var(--ph-line); background: var(--ph-card); color: var(--text); font: inherit; font-size: 14px; }
.phone-send { flex: none; width: 38px; height: 38px; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--ph-out-2); color: #fff; }
/* Clavier */
.phone-dial { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 10px; padding: 12px 18px 4px; }
.phone-display { min-height: 44px; display: grid; place-items: center; font: 600 24px var(--font-mono); letter-spacing: .02em; }
.phone-display span { font: 500 14px var(--font-ui); color: var(--text-4); }
.phone-keys { display: grid; grid-template-columns: repeat(3, 64px); justify-content: center; gap: 12px 22px; }
.phone-keys button { width: 64px; height: 64px; border-radius: 50%; border: 0; background: var(--ph-card); color: var(--text); font: 500 24px var(--font-display); }
.phone-keys button:hover { background: #241b23; }
.phone-keys button:active { background: var(--ph-out); }
.phone-known { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.phone-known small { width: 100%; font-size: 11px; color: var(--text-4); letter-spacing: .08em; text-transform: uppercase; }
.phone-dial .phone-fab { margin: 2px 0 12px; }
/* Nouveau message du Conteur */
.phone-form { flex: 1; min-height: 0; overflow: auto; padding: 14px 14px 4px; }
.phone-form .check { margin: -4px 0 12px; }
.phone-picks { display: grid; gap: 6px; padding: 8px 10px; border: 1px solid var(--ph-line); border-radius: 10px; background: var(--ph-card); }
.phone-form .phone-fab { margin: 6px 0 14px; width: 100%; }