/* Ajouts pour l'outil Cité d'Astrub (base: style.css de l'outil du raid) */
.cell.block { fill: rgba(20, 16, 12, .38); stroke: none; pointer-events: none; }   /* grille: seulement sur les cases de combat */
.nogrid .cell.block { fill: none; stroke: none; }
.plot { stroke-width: 8; pointer-events: none; }
.plot.red { fill: rgba(225, 60, 50, .45); stroke: rgba(255, 120, 110, .95); }
.plot.blue { fill: rgba(50, 110, 230, .45); stroke: rgba(120, 170, 255, .95); }
.diff { fill: none; stroke-width: 9; pointer-events: none; stroke-dasharray: 26 14; }
.diff.mov { stroke: #ffb03a; }
.diff.los { stroke: #c58bff; }
.d2plot { stroke: #fff; stroke-width: 6; pointer-events: none; }
.d2plot.red { fill: #e2463a; }
.d2plot.blue { fill: #3a74e2; }
.pin .base.mon { fill: rgba(200, 40, 30, .45); }
.pin .base.char { fill: rgba(30, 80, 200, .45); }
.pin .disc.mon { fill: #8a3b2e; stroke: #fff; stroke-width: 8; }
.pin .disc.char { fill: #2e4f8a; stroke: #fff; stroke-width: 8; }
.pin .hit { fill: transparent; }
.nohit { pointer-events: none; }
.stats div { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.stats div span { color: var(--muted); }
.stats div b { text-align: right; }
.mapcard { padding: 3px 6px; }
.mapcard small { display: block; }
.legend span { display: inline-flex; align-items: center; gap: 5px; margin-right: 10px; font-size: 12px; }
#monList .card .av, #teamList .card .av { background-size: contain; }

header .primary, header button { width: auto; flex: none; margin-top: 0; padding: 4px 12px; }
#mapList h2 { margin: 12px 0 6px; }
.occ { pointer-events: none; }

/* v2: bulles de la couleur de l'équipe, vues, éditeur */
.pin .base.red { fill: rgba(220, 50, 40, .5); }
.pin .base.blue { fill: rgba(40, 95, 220, .5); }
.btnlink { padding: 4px 12px; border: 1px solid var(--line); border-radius: 6px; text-decoration: none; color: inherit; background: var(--panel); }
#right .checks { display: flex; flex-direction: column; gap: 3px; }
#right .chk { font-size: 13px; }
.varrow { display: flex; align-items: center; gap: 8px; }
.varrow button { width: auto; padding: 2px 10px; margin: 0; }
#right .row button { width: auto; padding: 3px 10px; margin: 4px 4px 0 0; }
.sw.dmov { background: #ffb03a; } .sw.dlos { background: #c58bff; } .sw.dplot { background: #fff; border: 2px solid #3a74e2; border-radius: 50%; }
.items { color: var(--muted); font-size: 11px; }
#viewport.editing { cursor: crosshair; }
/* vue tactique: tout à plat, comme le mode tactique du jeu */
#stage.tactic { background: #2b2622; }
#stage.tactic #mapimg { visibility: hidden; }
/* lumières et ombres du décor (calques « light »): fondues sur l'image du sol, dans le même contexte que #mapimg */
#lights { position: absolute; left: 0; top: 0; pointer-events: none; }
#lights img { position: absolute; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.tile { fill: #d8d0bf; stroke: #b9b09c; stroke-width: 4; pointer-events: none; }
.tile.alt { fill: #cdc4b1; }
.tile.off { fill: #8f877a; }
.cube { pointer-events: none; }
.cube .t { fill: #9a8d7c; stroke: #6b6053; stroke-width: 4; }
.cube .l { fill: #6e6357; stroke: #514840; stroke-width: 3; }
.cube .r { fill: #5a5047; stroke: #463e37; stroke-width: 3; }

/* v3 (2026-11-02): Tactique 2.0 / 3.0, vrais blocs, zones */
.tile.off { stroke: none; }
.tile3 { fill: rgba(255, 250, 236, .2); stroke: none; pointer-events: none; }
.nogrid .tile3 { fill: rgba(255, 250, 236, .14); }
#stage.t3 .cell { stroke: rgba(255, 255, 255, .5); }
#stage.t3.nogrid .cell, #stage.t3 .nogrid .cell { stroke: none; }
.rblock { pointer-events: none; }
#zoneRow { margin: 0 0 6px; font-size: 13px; }
#zoneRow label.full { margin: 0 0 4px; }
#zoneFind { width: 100%; box-sizing: border-box; font: inherit; padding: 3px 6px; }

/* v4 (UI6, propriétaire 20:06 + 20:08 « faire pop out la zone »): barre de vue au-dessus de la carte, panneau sombre
   bordé d'or, vue en boutons segmentés, cases « Masquer » en pastilles; bouton actif et cases cochées pleins */
#center { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
#center #viewport { flex: 1; min-height: 0; }
#viewBar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; margin: 8px 10px; padding: 10px 14px;
  background: linear-gradient(#45332a, #33251d); border: 2px solid #c9a25a; border-radius: 10px;
  box-shadow: 0 3px 10px rgba(40, 25, 10, .45), inset 0 1px 0 rgba(255, 230, 180, .15); color: #f6ead2; }
#viewBar.glow { animation: barGlow 1.4s ease-in-out 2; }
@keyframes barGlow { 50% { box-shadow: 0 0 0 4px rgba(226, 183, 94, .55), 0 0 22px 6px rgba(226, 183, 94, .6); } }
@media (prefers-reduced-motion: reduce) { #viewBar.glow { animation: none; } }
.vgroup { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; min-width: 0; }
.vlabel { font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: #e8c77a; }
.seg { display: inline-flex; border: 1px solid #c9a25a; border-radius: 8px; overflow: hidden; background: #4d3a2e; }
.seg label { position: relative; cursor: pointer; margin: 0; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.seg span { display: block; height: 100%; padding: 8px 16px; font-size: 16px; line-height: 1.25; color: #f6ead2; border-left: 1px solid rgba(201, 162, 90, .55); white-space: nowrap; text-align: center; }
.seg label:first-child span { border-left: 0; }
.seg label.old span { border-left: 3px double #c9a25a; }
.seg span:hover { background: #5e4838; }
.seg input:checked + span { background: #e2b75e; color: #2b1d12; font-weight: 700; }
.seg input:focus-visible + span { outline: 2px solid #fff3d6; outline-offset: -4px; }
.mask { display: flex; flex-wrap: wrap; gap: 6px 10px; }
.mask .chk { font-size: 16px; margin: 0; padding: 6px 13px 6px 10px; border: 1px solid #c9a25a; border-radius: 20px; background: #4d3a2e; color: #f6ead2; }
.mask .chk:hover { background: #5e4838; }
.mask .chk:has(input:checked) { background: #e2b75e; color: #2b1d12; font-weight: 700; }
.mask input { width: 18px; height: 18px; margin: 0; accent-color: #8a3b2e; }
@media (max-width: 900px) {
  html, body { height: auto; }
  main { display: flex; flex-direction: column; height: auto; }
  #center { order: -1; }
  #center #viewport { flex: none; height: 62vh; min-height: 280px; }
  aside { overflow: visible; }
  #left, #right { border: 0; border-top: 1px solid var(--line); }
  header { gap: 6px 10px; padding: 8px 10px; }
  h1 { white-space: normal; }
  #viewBar { margin: 8px; padding: 8px 10px; gap: 8px 16px; }
}
@media (max-width: 520px) {
  .vgroup { width: 100%; }
  .vgroup .seg, .vgroup .mask { flex: 1 1 100%; }
  #viewWrap .seg { display: grid; grid-template-columns: 1fr 1fr; }
  #arenaWrap .seg { display: grid; grid-template-columns: 1fr 1fr 1fr; }
  .seg span { padding: 8px 6px; font-size: 15px; border-top: 1px solid rgba(201, 162, 90, .55); }
  .mask .chk { font-size: 15px; }
  #viewWrap .seg label:nth-child(odd) span { border-left: 0; }
  #viewWrap .seg label:nth-child(-n+2) span, #arenaWrap .seg span { border-top: 0; }
  #viewWrap .seg label.old span, #arenaWrap .seg label.old span { border-left: 1px solid rgba(201, 162, 90, .55); }
}