:root {
  --bg: #f4f1ea; --panel: #fffdf8; --ink: #2b2620; --muted: #7a7064; --line: #ddd5c6;
  --accent: #8a3b2e; --mv: rgba(70, 170, 90, .45); --dr: rgba(235, 140, 40, .55); --pt: rgba(150, 70, 220, .6);
  --portal: #7b3fe4;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font: 13px/1.4 -apple-system, "Helvetica Neue", Arial, sans-serif; }
header { display: flex; align-items: center; gap: 16px; padding: 8px 14px; border-bottom: 1px solid var(--line); background: var(--panel); }
h1 { font-size: 15px; margin: 0; white-space: nowrap; }
h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 0 8px; }
.tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
button { font: inherit; padding: 5px 10px; border: 1px solid var(--line); background: #fff; border-radius: 6px; cursor: pointer; color: var(--ink); }
button:hover { border-color: #b9ad98; }
button.toggle.on { background: var(--portal); color: #fff; border-color: var(--portal); }
button.primary { background: var(--accent); color: #fff; border-color: var(--accent); width: 100%; margin-top: 8px; padding: 8px; }
button.danger { color: var(--accent); }
main { display: grid; grid-template-columns: 270px 1fr 300px; height: calc(100% - 46px); }
aside { overflow-y: auto; padding: 12px; background: var(--panel); }
#left { border-right: 1px solid var(--line); }
#right { border-left: 1px solid var(--line); }
section { margin-bottom: 18px; }
.hint { color: var(--muted); font-size: 12px; margin: 0 0 8px; }
.chk { display: flex; align-items: center; gap: 6px; margin: 4px 0; cursor: pointer; }
.chk input[type=number] { width: 44px; }
.row { display: flex; gap: 10px; margin: 6px 0; }
.row.wrap { flex-wrap: wrap; }
label input[type=number] { width: 52px; font: inherit; padding: 2px 4px; }
label.full { display: block; margin: 6px 0; }
label.full select { width: 100%; font: inherit; padding: 3px; margin-top: 2px; }
.card { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 5px; cursor: pointer; background: #fff; }
.card:hover { border-color: #b9ad98; }
.card.pending { outline: 2px solid var(--accent); }
.card.sel { background: #f6eadf; }
.card .av { width: 34px; height: 34px; border-radius: 6px; background: #eee5d6 center/contain no-repeat; flex: none; display: grid; place-items: center; font-weight: 600; color: #fff; font-size: 12px; }
.card .nm { flex: 1; min-width: 0; }
.card .nm b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card .nm small { color: var(--muted); }
.card .x { color: var(--muted); font-size: 11px; }
.card input[type=checkbox] { margin: 0; }
#portalList { margin: 0 0 6px; padding-left: 18px; }
#portalList li { margin: 2px 0; }
#portalList button { padding: 0 6px; font-size: 11px; margin-left: 6px; }
#viewport { position: relative; overflow: hidden; background: #111; cursor: grab; }
#viewport.drag { cursor: grabbing; }
#viewport.portal { cursor: crosshair; }
#stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
#mapimg { display: block; user-select: none; -webkit-user-drag: none; }
#svg { position: absolute; left: 0; top: 0; overflow: visible; }
.cell { fill: transparent; stroke: rgba(255,255,255,.32); stroke-width: 4; }
.nogrid .cell { stroke: none; }
.cell.mv { fill: var(--mv); }
.cell.dr { fill: var(--dr); }
.cell.pt { fill: var(--pt); }
.cell.hov { stroke: #fff; stroke-width: 8; }
.cell.red { stroke: rgba(230, 70, 60, .8); stroke-width: 5; }
.cid { font: 600 44px -apple-system, Arial; fill: rgba(255,255,255,.75); text-anchor: middle; dominant-baseline: middle; pointer-events: none; paint-order: stroke; stroke: rgba(0,0,0,.6); stroke-width: 6px; }
.portal { cursor: pointer; }
.portal .pmark { fill: rgba(123, 63, 228, .35); stroke: var(--portal); stroke-width: 10; }
.portal .phit { fill: transparent; }
.portal.sel .phit { stroke: #ffd36b; stroke-width: 8; }
.portal .pnum { font: 700 54px -apple-system, Arial; fill: #fff; text-anchor: middle; dominant-baseline: middle; paint-order: stroke; stroke: var(--portal); stroke-width: 10px; pointer-events: none; }
.portal image { pointer-events: none; }
.glyph { stroke: none; pointer-events: none; }
.glyphedge { stroke-width: 10; stroke-linecap: round; pointer-events: none; filter: brightness(1.6); }
.glyphcfg { margin-top: 8px; }
.glyphcfg summary { cursor: pointer; color: var(--muted); font-size: 12px; }
.glyphcfg input[type=range] { width: 90px; vertical-align: middle; }
.gimg { pointer-events: none; opacity: .9; }
.ghost { fill: rgba(255,255,255,.25); stroke: #fff; stroke-width: 8; pointer-events: none; }
.ghost.bad { fill: rgba(220,60,60,.3); stroke: #e44; }
.lock { font-size: 60px; pointer-events: none; display: none; }
.pin:hover .lock { display: inline; }
.nonames .name { display: none; }
.card.off { opacity: .75; }
.card .ib { padding: 1px 5px; font-size: 12px; line-height: 1.4; border-radius: 5px; flex: none; }
.card .ib.on { background: #f3e3c9; }
.av.avp { background: radial-gradient(circle at 50% 55%, #c9a6ff 0 25%, #7b3fe4 26% 45%, #3a1a7a 46% 60%, transparent 61%) !important; }
#addPortal { margin: 4px 0 8px; }
.pin { cursor: pointer; }
.pin .base { fill: rgba(0,0,0,.35); }
.pin.sel .base { fill: rgba(255, 220, 120, .55); stroke: #ffd36b; stroke-width: 8; }
.lbl { font: 700 52px -apple-system, Arial; fill: #fff; text-anchor: middle; paint-order: stroke; stroke: rgba(0,0,0,.75); stroke-width: 10px; pointer-events: none; }
.pin .disc { stroke: #fff; stroke-width: 8; }
.pin.hidden { display: none; }
.trace { stroke: #fff; stroke-width: 10; stroke-dasharray: 30 20; fill: none; pointer-events: none; }
.trace.exit { stroke: #e2c6ff; }
#tip { position: absolute; pointer-events: none; background: rgba(20,18,15,.9); color: #fff; padding: 4px 8px; border-radius: 6px; font-size: 12px; display: none; white-space: nowrap; }
#status { position: absolute; left: 10px; bottom: 10px; background: rgba(20,18,15,.8); color: #fff; padding: 4px 10px; border-radius: 6px; font-size: 12px; }
.legend { margin: 8px 0; }
.sw { display: inline-block; width: 14px; height: 14px; border-radius: 3px; }
.sw.mv { background: var(--mv); } .sw.dr { background: var(--dr); } .sw.pt { background: var(--pt); }
#selStats, #optOut { margin-top: 8px; padding: 8px; background: #f6f1e7; border-radius: 6px; }
#selStats:empty, #optOut:empty { display: none; }
#optOut button { margin-top: 6px; }

/* retour visuel: survol, prise, glisser, pose */
.pin, .portal { cursor: grab; }
.pin.locked { cursor: not-allowed; }
.pin image, .pin .disc { transition: filter .12s; }
.pin:hover image, .pin:hover .disc { filter: drop-shadow(0 0 14px rgba(255, 230, 150, .95)) brightness(1.08); }
.pin:hover .base { fill: rgba(255, 220, 120, .45); }
.pin.locked:hover image { filter: drop-shadow(0 0 10px rgba(255, 255, 255, .5)); }
.portal:hover .phit, .portal:hover .pmark { fill: rgba(255, 230, 150, .25); stroke: #ffd36b; stroke-width: 8; }
.pin.grabbed image, .pin.grabbed .disc { filter: drop-shadow(0 18px 10px rgba(0,0,0,.6)) brightness(1.12); }
.lifted { opacity: .3; }
#viewport.grabbing, #viewport.grabbing * { cursor: grabbing !important; }
.ghost { fill: rgba(90, 220, 120, .35); stroke: #8dffb0; stroke-width: 10; pointer-events: none; }
.ghost.bad { fill: rgba(230, 60, 60, .35); stroke: #ff6b6b; }
.ghostpin { opacity: .8; pointer-events: none; }
.ghostpin.bad { opacity: .45; }
.ghostpin .lbl { display: none; }
.ghostportal { fill: rgba(123, 63, 228, .45); stroke: #c9a6ff; stroke-width: 10; pointer-events: none; }
.ghostportal.bad { fill: rgba(230, 60, 60, .35); stroke: #ff6b6b; }
.pulse { fill: none; stroke: #8dffb0; stroke-width: 14; pointer-events: none; transform-box: fill-box; transform-origin: center; animation: pulse .7s ease-out forwards; }
.pulse.bad { stroke: #ff6b6b; }
@keyframes pulse { from { opacity: 1; transform: scale(.7); } to { opacity: 0; transform: scale(1.5); } }
.card { transition: border-color .12s, box-shadow .12s; }
.card:hover { box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.card.pending { outline: 2px solid var(--accent); box-shadow: 0 0 0 4px rgba(138, 59, 46, .15); }
.ghost.swap { fill: rgba(120, 180, 255, .3); stroke: #9cc8ff; }
.swapline { stroke: #9cc8ff; stroke-width: 10; stroke-dasharray: 30 18; pointer-events: none; }
.pin.locked.char-lock { cursor: grab; }

/* décor découpé: devant les pions mais ne capte pas la souris */
.occ { pointer-events: none; }
/* chemin du réseau de portails (couleurs des portails du jeu) */
.netglow { fill: none; stroke: rgba(80, 230, 220, .35); stroke-width: 46; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.netline { fill: none; stroke: #9ffcf2; stroke-width: 14; stroke-dasharray: 46 26; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; animation: netflow 1s linear infinite; }
@keyframes netflow { to { stroke-dashoffset: -72; } }
.netarrow { fill: #e9fffc; stroke: #2bb7ad; stroke-width: 6; pointer-events: none; }
.netring { fill: rgba(80, 230, 220, .12); stroke: #9ffcf2; stroke-width: 8; pointer-events: none; }
.netring.entry { stroke: #ffffff; stroke-width: 12; }
.netring.exit { fill: rgba(255, 215, 120, .22); stroke: #ffd36b; stroke-width: 12; }
.netglow.bad, .netline.bad, .netring.bad { stroke: #ff6b6b; }
.netarrow.bad { fill: #ffd0d0; stroke: #c43; }
.netlbl { font: 700 46px -apple-system, Arial; fill: #fff; text-anchor: middle; paint-order: stroke; stroke: #0b5f59; stroke-width: 10px; pointer-events: none; }
.hit { fill: transparent; stroke: none; }
.ghostpin .hit { display: none; }
.pin image.nohit { pointer-events: none; }

body.norange main { grid-template-columns: 270px 1fr 0; }
body.norange #right { display: none; }
body.norange .pin.sel .base { fill: rgba(0,0,0,.35); stroke: none; }
.netlen { font: 700 40px -apple-system, Arial; fill: #dffffb; text-anchor: middle; paint-order: stroke; stroke: #0b5f59; stroke-width: 9px; pointer-events: none; }
.netbonus { font: 800 58px -apple-system, Arial; fill: #ffd36b; text-anchor: middle; paint-order: stroke; stroke: #4a2f00; stroke-width: 11px; pointer-events: none; }
.portal.off image, .portal.off .pmark { opacity: .35; filter: grayscale(1); }
.portal.off .pnum { opacity: .6; }

#slots { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.slot { display: flex; align-items: center; gap: 4px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 14px; background: #fff; cursor: pointer; user-select: none; white-space: nowrap; }
.slot:hover { border-color: #b9ad98; }
.slot.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.slot .sx { border: 0; background: transparent; padding: 0 2px; font-size: 11px; color: inherit; opacity: .6; }
.slot .sx:hover { opacity: 1; }
.slotadd { border-radius: 14px; padding: 3px 10px; font-weight: 700; }
header { flex-wrap: wrap; }
.slot .sname { font: inherit; border: 0; border-radius: 6px; padding: 0 4px; color: var(--ink); width: auto; }
.card .pnumsel { font: inherit; font-size: 12px; padding: 1px 2px; border: 1px solid var(--line); border-radius: 5px; background: #fff; flex: none; }