/* ==========================================================================
   Carte : viewport, calques, pions, murs, gabarits, outils
   ========================================================================== */
.stage { user-select: none; -webkit-user-select: none; position: relative; min-width: 0; min-height: 0; overflow: hidden; background: radial-gradient(ellipse 60% 60% at 50% 45%, #121417, #070605 75%); }
.viewport { position: absolute; inset: 0; overflow: hidden; touch-action: none; cursor: default; }
.viewport.tool-pan, .viewport.panning { cursor: grab; }
.viewport.panning:active { cursor: grabbing; }
.viewport.tool-measure, .viewport.tool-template, .viewport.tool-ping, .viewport.tool-walls, .viewport.tool-fog { cursor: crosshair; }
.board { position: absolute; left: 0; top: 0; transform-origin: 0 0; background-color: #16181b; box-shadow: 0 0 0 1px rgba(139, 108, 239, .18), 0 30px 120px rgba(0, 0, 0, .8); user-select: none; -webkit-user-select: none; }
.board * { -webkit-user-drag: none; }
.layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.layer-image { background-position: center; background-repeat: no-repeat; pointer-events: none; }
.layer-grid { pointer-events: none; z-index: 3;
  background-image: linear-gradient(rgba(220, 225, 235, var(--grid-alpha, .18)) 1px, transparent 1px), linear-gradient(90deg, rgba(220, 225, 235, var(--grid-alpha, .18)) 1px, transparent 1px);
  background-size: var(--grid, 56px) var(--grid, 56px); background-position: var(--grid-x, 0) var(--grid-y, 0); }
.layer-templates { z-index: 6; overflow: visible; pointer-events: none; }
.layer-tokens { z-index: 10; pointer-events: none; }
.layer-tokens .token { pointer-events: auto; }
.layer-vision { z-index: 14; pointer-events: none; }
.layer-fog { z-index: 16; pointer-events: none; }
.layer-walls { z-index: 18; overflow: visible; pointer-events: none; }
.layer-overlay { z-index: 22; overflow: visible; pointer-events: none; }

/* Thèmes intégrés (scènes sans image) */
.layer-terrain { z-index: 1; pointer-events: none; }
.theme-catacombs { background: radial-gradient(circle at 42% 44%, rgba(85, 61, 50, .35), transparent 32%), radial-gradient(circle at 72% 65%, rgba(43, 60, 62, .3), transparent 28%), #15171a; }
.theme-manor { background: radial-gradient(circle at 50% 32%, rgba(90, 60, 80, .3), transparent 34%), linear-gradient(125deg, #16171a, #201f24); }
.theme-alley { background: radial-gradient(circle at 45% 45%, rgba(42, 64, 72, .4), transparent 30%), linear-gradient(35deg, #101315, #1e2427); }
.theme-blank { background: radial-gradient(circle at 50% 40%, #1d2024, #111315 75%); }
.room { position: absolute; border: 5px double #454a52; background: rgba(34, 37, 42, .82); box-shadow: inset 0 0 40px rgba(0, 0, 0, .55); }
.room::before { content: ""; position: absolute; inset: 9px; border: 1px solid rgba(160, 165, 175, .16); }
.corridor { position: absolute; background: rgba(36, 39, 44, .85); border: 4px solid #454a52; }
.prop { position: absolute; border: 3px solid #454a52; background: #22252a; }
.prop.round { border-radius: 50%; }
.prop.diamond { transform: rotate(45deg); }
.map-label { position: absolute; font: italic 17px var(--font-serif); color: rgba(190, 195, 205, .42); letter-spacing: .06em; white-space: nowrap; }
.theme-manor .room { border-color: #75604f; background: rgba(50, 39, 36, .84); }
.theme-alley .room { border-color: #4d5e63; background: rgba(30, 38, 42, .84); transform: rotate(-2deg); }

/* ---------- Pions ---------- */
.token { position: absolute; transform: translate(-50%, -50%); border-radius: 50%; cursor: grab; touch-action: none; transition: box-shadow .15s, filter .15s; }
.token.dragging { cursor: grabbing; z-index: 5; transition: none; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .7)); }
.token.animate { transition: left .18s ease-out, top .18s ease-out; }
.token-face { position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
  font: 700 calc(var(--s) * .3) / 1 var(--font-display); color: #f2e9da; letter-spacing: .02em; text-shadow: 0 1px 3px #000;
  background: radial-gradient(circle at 35% 28%, #5d544a, #1c1916 70%); background-size: cover; background-position: center;
  border: calc(var(--s) * .055 + 1px) solid var(--ring); box-shadow: 0 4px 14px rgba(0, 0, 0, .65), inset 0 0 0 1px rgba(0, 0, 0, .5); }
.token { --ring: #b7a2ff; }
.token.npc { --ring: #8796a8; }
.token.enemy { --ring: #c0474f; }
.token.enemy .token-face { background-image: radial-gradient(circle at 35% 28%, #63302f, #1c0f0f 70%); }
.token.has-art .token-face { background-image: var(--art); }
.token.selected .token-face { box-shadow: 0 0 0 3px rgba(210, 198, 255, .85), 0 0 22px rgba(139, 108, 239, .55), 0 4px 14px rgba(0, 0, 0, .65); }
.token.hidden-token { opacity: .5; }
.token.hidden-token::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px dashed var(--violet); }
.token.current-turn::before { content: ""; position: absolute; inset: calc(var(--s) * -.16); border-radius: 50%; border: 2px solid var(--gold-2); box-shadow: 0 0 18px rgba(183, 162, 255, .6); animation: turnring 1.8s ease-in-out infinite; }
@keyframes turnring { 50% { transform: scale(1.06); opacity: .6; } }
.token.dead .token-face { filter: grayscale(1) brightness(.6); }
.token.dead::after { content: "✕"; position: absolute; inset: 0; display: grid; place-items: center; color: rgba(191, 74, 82, .9); font: 700 calc(var(--s) * .7) / 1 var(--font-ui); }
.token-bar { position: absolute; left: 8%; right: 8%; bottom: calc(var(--s) * -.14); height: max(4px, calc(var(--s) * .085)); border-radius: 4px; background: rgba(20, 8, 9, .92); box-shadow: 0 0 0 1px rgba(0, 0, 0, .7); overflow: hidden; }
.token-bar i { display: block; height: 100%; background: linear-gradient(90deg, #3f8f5d, #6cc28b); }
.token-bar.mid i { background: linear-gradient(90deg, #6a51cf, #b7a2ff); }
.token-bar.low i { background: linear-gradient(90deg, #8e2c33, #d1535c); }
.token-bar b { position: absolute; top: 0; bottom: 0; right: 0; background: rgba(93, 141, 189, .85); }
.token-name { position: absolute; left: 50%; top: calc(100% + var(--s) * .12 + 6px); transform: translateX(-50%); padding: 2px 8px; border-radius: 5px; background: rgba(11, 12, 14, .9); border: 1px solid var(--line-2); font: 600 11px var(--font-ui); color: var(--text); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s; }
.token:hover .token-name, .token.selected .token-name, .show-names .token-name { opacity: 1; }
.token-conds { position: absolute; right: calc(var(--s) * -.08); top: calc(var(--s) * -.08); display: flex; flex-direction: column; gap: 2px; }
.token-conds span { width: max(14px, calc(var(--s) * .26)); height: max(14px, calc(var(--s) * .26)); border-radius: 50%; display: grid; place-items: center; background: var(--c); color: #120f0c; font: 800 max(7px, calc(var(--s) * .12)) / 1 var(--font-ui); box-shadow: 0 0 0 1.5px #0d0b0a; }

/* ---------- Murs et portes ---------- */
.layer-walls line { stroke-linecap: round; pointer-events: none; }
.edit-walls .layer-walls line { pointer-events: stroke; cursor: pointer; }
.layer-walls line.wall { stroke: #d65a63; stroke-width: 5; }
.layer-walls line.door { stroke: #b7a2ff; stroke-width: 7; stroke-dasharray: 16 7; }
.layer-walls line.window { stroke: #6aaed4; stroke-width: 6; stroke-dasharray: 5 5; }
.layer-walls line.open { opacity: .35; stroke-dasharray: 3 9; }
.layer-walls line.selected { stroke-width: 9; filter: drop-shadow(0 0 6px #fff); }
.layer-walls .handle { fill: #fff; stroke: #111; stroke-width: 1.5; pointer-events: all; cursor: move; }
.door-marker { pointer-events: all; cursor: pointer; }
.door-marker circle { fill: #121417; stroke: #b7a2ff; stroke-width: 2; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .8)); }
.door-marker path { fill: none; stroke: #d2c6ff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.door-marker.locked circle { stroke: var(--crimson-2); }
.door-marker.locked path { stroke: #f1a3a9; }
.door-marker.open { opacity: .6; }
.door-marker:hover circle { fill: #262230; }
.as-player .layer-walls line { display: none; }

/* ---------- Brouillard (zones MJ) ---------- */
.fog-zone { position: absolute; pointer-events: none; background: repeating-linear-gradient(135deg, rgba(5, 4, 3, .62) 0 8px, rgba(139, 108, 239, .1) 8px 16px); outline: 1px solid rgba(139, 108, 239, .35); }
.fog-zone.ellipse, .fog-part.ellipse { border-radius: 50%; }
.fog-zone.composite { background: none; outline: 0; }
.fog-part { position: absolute; background: repeating-linear-gradient(135deg, rgba(5, 4, 3, .62) 0 8px, rgba(139, 108, 239, .1) 8px 16px); }
.edit-fog .layer-fog .fog-zone:not(.composite), .edit-fog .layer-fog .fog-part { pointer-events: auto; cursor: move; }
.fog-zone.selected { outline: 2px solid var(--gold-2); }
.fog-zone.composite.selected .fog-part { outline: 2px solid var(--gold-2); }

/* ---------- Gabarits, mesure, pings ---------- */
.tpl-shape { fill: var(--c); fill-opacity: .2; stroke: var(--c); stroke-width: 2; stroke-opacity: .9; }
.tpl-shape.selected { stroke-width: 3.5; fill-opacity: .3; filter: drop-shadow(0 0 6px var(--c)); }
.select-templates .tpl-shape { pointer-events: all; cursor: pointer; }
.tpl-label { font: 600 13px var(--font-ui); fill: #fff; paint-order: stroke; stroke: rgba(0, 0, 0, .85); stroke-width: 4px; text-anchor: middle; }
.measure-line { stroke: var(--c, #b7a2ff); stroke-width: 3; stroke-dasharray: 10 6; fill: none; filter: drop-shadow(0 1px 2px #000); }
.measure-dot { fill: var(--c, #b7a2ff); stroke: #000; stroke-width: 1.5; }
.measure-label rect { fill: rgba(11, 12, 14, .92); stroke: var(--c, #b7a2ff); stroke-width: 1; }
.measure-label text { font: 700 14px var(--font-ui); fill: #fff; text-anchor: middle; dominant-baseline: central; }
.measure-label .who { font: 500 10px var(--font-ui); fill: #bcae99; }
.measure-cells rect { fill: var(--c, #b7a2ff); fill-opacity: .16; }
.ping-ring { fill: none; stroke: var(--c, #b7a2ff); stroke-width: 3; animation: ping 1.4s var(--ease) forwards; transform-box: fill-box; transform-origin: center; }
.ping-ring.r2 { animation-delay: .25s; }
@keyframes ping { from { transform: scale(.2); opacity: 1; } to { transform: scale(2.4); opacity: 0; } }
.ping-label { font: 600 12px var(--font-ui); fill: #fff; paint-order: stroke; stroke: #000; stroke-width: 4px; text-anchor: middle; animation: fade 1.6s reverse forwards; }
.draw-preview { stroke: #fff; stroke-width: 3; stroke-dasharray: 7 5; fill: rgba(255, 255, 255, .06); }
.select-box { fill: rgba(139, 108, 239, .08); stroke: var(--gold-2); stroke-width: 1.5; stroke-dasharray: 5 4; }

/* ---------- Barre d'outils ---------- */
.toolbar { position: absolute; z-index: 30; left: 14px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 3px; padding: 6px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(21, 23, 26, .94); box-shadow: var(--shadow-2); backdrop-filter: blur(8px); }
.toolbar .tool { position: relative; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 10px; background: transparent; color: var(--text-3); transition: .12s; }
.toolbar .tool:hover { color: var(--text); background: var(--ink-4); }
.toolbar .tool.active { color: var(--gold-2); background: linear-gradient(180deg, rgba(139, 108, 239, .2), rgba(139, 108, 239, .08)); box-shadow: inset 0 0 0 1px var(--line-gold); }
.toolbar .sep { height: 1px; margin: 4px 6px; background: var(--line-2); }
.toolbar .gm-label { font: 700 8.5px var(--font-ui); letter-spacing: .14em; color: var(--text-4); text-align: center; padding: 2px 0; }

.tool-panel { position: absolute; z-index: 31; left: 72px; top: 50%; transform: translateY(-50%); width: 270px; max-height: calc(100% - 40px); overflow: auto; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(21, 23, 26, .97); box-shadow: var(--shadow-2); animation: rise .18s var(--ease); }
.tool-panel-head { display: flex; align-items: center; gap: 8px; padding: 12px 12px 10px 14px; border-bottom: 1px solid var(--line); }
.tool-panel-head strong { flex: 1; font: 600 12.5px var(--font-display); letter-spacing: .1em; text-transform: uppercase; }
.tool-panel-body { padding: 12px 14px 14px; display: grid; gap: 12px; }
.tool-panel .ctrl { display: grid; gap: 7px; }
.tool-panel .ctrl-top { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-2); }
.tool-panel .ctrl-top output { color: var(--text-3); font-variant-numeric: tabular-nums; }
.tool-panel .row-toggle { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: var(--text-2); }
.tool-panel .hint { font-size: 11.5px; }
.tool-panel .btn-row { display: flex; gap: 6px; }
.tool-panel .btn-row .btn { flex: 1; }
.swatches { display: flex; gap: 6px; }
.swatches button { width: 24px; height: 24px; border-radius: 50%; border: 2px solid transparent; background: var(--c); box-shadow: 0 0 0 1px rgba(0, 0, 0, .5); }
.swatches button.active { border-color: #fff; }

.zoom-cluster { position: absolute; z-index: 30; right: 14px; bottom: 14px; display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(21, 23, 26, .94); box-shadow: var(--shadow-2); }
.zoom-cluster output { min-width: 50px; text-align: center; font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.stage-hud { position: absolute; z-index: 30; left: 14px; top: 14px; display: flex; gap: 8px; align-items: center; pointer-events: none; }
.stage-hud > * { pointer-events: auto; }
.hud-chip { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-2); background: rgba(21, 23, 26, .94); box-shadow: var(--shadow-1); font-size: 12.5px; color: var(--text-2); }
.hud-chip strong { font: 600 13px var(--font-display); letter-spacing: .05em; color: var(--text); }
.hud-chip.warn { border-color: rgba(141, 108, 198, .5); color: #cdb9f0; }
.drop-hint { position: absolute; z-index: 40; inset: 14px; display: grid; place-items: center; border: 2px dashed var(--gold-3); border-radius: 18px; background: rgba(139, 108, 239, .05); color: var(--gold-2); font: 600 15px var(--font-display); letter-spacing: .08em; pointer-events: none; }

/* ---------- HUD de pion ---------- */
.token-hud { position: fixed; z-index: 120; width: 300px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(21, 23, 26, .98); box-shadow: var(--shadow-3); animation: rise .16s var(--ease); }
.token-hud-head { display: flex; align-items: center; gap: 10px; padding: 12px; border-bottom: 1px solid var(--line); }
.token-hud-head .meta { flex: 1; min-width: 0; }
.token-hud-head strong { display: block; font: 600 14px var(--font-display); letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.token-hud-head span { font-size: 11.5px; color: var(--text-3); }
.token-hud-body { padding: 12px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.hp-editor { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-items: center; }
.hp-editor .bar { height: 26px; border-radius: 7px; background: #2a1517; overflow: hidden; position: relative; border: 1px solid var(--line-2); }
.hp-editor .bar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #3f8f5d, #6cc28b); }
.hp-editor .bar b { position: absolute; inset: 0; display: grid; place-items: center; font: 700 13px var(--font-ui); text-shadow: 0 1px 2px #000; }
.hp-delta { display: flex; gap: 6px; }
.hp-delta input { flex: 1; min-width: 0; height: 32px; border-radius: 7px; border: 1px solid var(--line-2); background: var(--ink-1); padding: 0 10px; text-align: center; font-weight: 600; outline: none; }
.hp-delta input:focus { border-color: var(--gold-3); }
.hp-delta .btn { height: 32px; padding: 0 10px; font-size: 12px; }
.cond-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.cond-grid button { height: 30px; border-radius: 7px; border: 1px solid var(--line); background: var(--ink-1); color: var(--text-3); font-size: 10.5px; font-weight: 600; padding: 0 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cond-grid button:hover { color: var(--text); border-color: var(--line-2); }
.cond-grid button.on { color: #120f0c; background: var(--c); border-color: transparent; }
.token-hud-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 0 12px 12px; }
.token-hud-actions button { height: 50px; border-radius: 9px; border: 1px solid var(--line); background: var(--ink-2); color: var(--text-2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 10px; font-weight: 600; }
.token-hud-actions button:hover { color: var(--gold-2); border-color: var(--line-gold); }
.token-hud-actions button.danger:hover { color: #f0a3a8; border-color: rgba(191, 74, 82, .5); }

@media (max-width: 860px) {
  .toolbar { left: 8px; top: auto; bottom: 10px; transform: none; flex-direction: row; max-width: calc(100% - 16px); overflow-x: auto; }
  .toolbar .sep { width: 1px; height: auto; margin: 6px 3px; }
  .toolbar .gm-label { display: none; }
  .tool-panel { left: 8px; right: 8px; top: auto; bottom: 70px; transform: none; width: auto; max-height: 50%; }
  .zoom-cluster { bottom: auto; top: 10px; right: 10px; }
  .stage-hud { top: 10px; left: 10px; }
}

.tool-panel input, .tool-panel textarea { user-select: text; }

/* Ciblage */
.token-reticle { position: absolute; inset: calc(var(--s) * -.2); border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .15s, transform .2s; transform: scale(1.15); }
.token.targeted .token-reticle { opacity: 1; transform: scale(1); background:
  linear-gradient(#e0606a, #e0606a) top / 2px 22% no-repeat,
  linear-gradient(#e0606a, #e0606a) bottom / 2px 22% no-repeat,
  linear-gradient(#e0606a, #e0606a) left / 22% 2px no-repeat,
  linear-gradient(#e0606a, #e0606a) right / 22% 2px no-repeat;
  box-shadow: 0 0 0 2px rgba(224, 96, 106, .85), 0 0 18px rgba(224, 96, 106, .5); animation: reticle 2.4s linear infinite; }
@keyframes reticle { to { transform: rotate(90deg); } }
.token-targets { position: absolute; left: calc(var(--s) * -.08); top: calc(var(--s) * -.08); display: flex; gap: 2px; pointer-events: none; }
.token-targets span { width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1.5px #0b0c0e; }
.token-conds span sup { font-size: 7px; margin-left: 1px; vertical-align: super; }
.cond-grid button em { margin-left: 4px; font-style: normal; font: 700 9px var(--font-mono); padding: 0 4px; border-radius: 6px; background: rgba(0, 0, 0, .35); }
.cond-durations { display: grid; gap: 4px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.cond-durations > span { font: 600 10px var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.cond-durations label { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--text-2); padding-left: 8px; border-left: 3px solid var(--c); }
.cond-durations select { height: 26px; border-radius: 7px; border: 1px solid var(--line-2); background: var(--ink-1); color: var(--text); font-size: 12px; }
.hud-note { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font-size: 12px; color: #9fd8cf; }
/* Éclairage (vue MJ) */
.layer-lights { pointer-events: none; overflow: visible; }
.board.edit-lights .layer-lights { pointer-events: auto; }
.board.edit-lights .layer-lights .light-handle { cursor: grab; }
.layer-lights .light-dim { fill: rgba(255, 200, 120, .06); stroke: rgba(255, 200, 120, .45); stroke-dasharray: 6 6; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.layer-lights .light-bright { fill: rgba(255, 210, 140, .1); stroke: rgba(255, 210, 140, .7); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.layer-lights .light-handle circle { fill: rgba(20, 16, 10, .85); stroke: #ffd08a; stroke-width: 1.5; }
.layer-lights .light-handle path { fill: #ffd08a; }
.layer-lights .light.selected .light-handle circle { stroke: #fff; stroke-width: 2.5; }
.board:not(.edit-lights) .layer-lights .light-handle { opacity: .55; }

/* Fond vidéo et dessin libre */
.layer-image video { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.layer-drawings { z-index: 5; overflow: visible; pointer-events: none; }
.layer-drawings .drawing { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.layer-drawings .drawing.gm-only { stroke-dasharray: 2 6; opacity: .75; }
.viewport.tool-draw { cursor: crosshair; }
.viewport.tool-draw.erasing .layer-drawings { pointer-events: auto; }
.viewport.tool-draw.erasing .layer-drawings .drawing { pointer-events: stroke; cursor: pointer; }
.viewport.tool-draw.erasing .layer-drawings .drawing.filled { pointer-events: visiblePainted; }
.viewport.tool-draw.erasing .layer-drawings .drawing:hover { opacity: .45; }
.tool-panel { overflow-x: hidden; }
.tool-panel .swatches { flex-wrap: wrap; }
.tool-panel .btn-row { flex-wrap: wrap; }
.token-conds span { position: relative; }
.token-conds span svg { width: 68%; height: 68%; color: #120f0c; }
.token-conds span sup { position: absolute; right: -4px; top: -5px; min-width: 11px; height: 11px; border-radius: 6px; background: #0d0b0a; color: #fff; font: 700 8px/11px var(--font-ui); text-align: center; margin: 0; }