#campaignDialog.campaign-map-screen { width:100vw; height:100dvh; max-width:none; max-height:none; margin:0; padding:0; border:0; background:#0a0f17; overflow:auto; }
#campaignDialog.campaign-map-screen[open] { display:grid; grid-template-columns:minmax(0,7fr) minmax(300px,3fr); }
.campaign-city { position:relative; min-height:100dvh; background:linear-gradient(#07101b11,#03060e44),url('assets/campaign-city-map.png') center/cover; isolation:isolate; }
.map-back { position:absolute; top:18px; left:24px; padding:8px 14px; color:white; background:#090e15dc; border:0; cursor:pointer; font:900 17px var(--display); }
.map-heading { position:absolute; left:24px; top:65px; z-index:2; pointer-events:none; }.map-heading h2 { color:#faf7ec; font:900 clamp(36px,5.7vw,84px)/1 var(--display); margin:0 0 12px; text-shadow:4px 5px #090c11; letter-spacing:.025em; }.map-heading>span { display:inline-block; padding:8px 12px; color:#111; background:#b7f20c url('assets/card-wear.svg') center/cover; font:900 clamp(10px,1.3vw,18px) var(--display); transform:rotate(-2deg); }
.map-routes { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }.map-routes path { fill:none; stroke:#aa7bda; stroke-width:.45; stroke-dasharray:1.2 1; opacity:.8; }.map-routes .route-open { stroke:#b7f20c; stroke-dasharray:none; filter:drop-shadow(0 0 2px #b7f20c); }
.map-node { --node:#a57ccf; position:absolute; padding:0; width:155px; transform:translate(-50%,-100%); display:flex; flex-direction:column; align-items:center; border:0; background:none; color:var(--node); cursor:pointer; text-align:center; z-index:3; }
.map-node[data-map-level="1"] { left:22%; top:75%; }.map-node[data-map-level="2"] { left:57%; top:54%; }.map-node[data-map-level="3"] { left:82%; top:30%; }
.map-node.completed { --node:#b7f20c; }.map-node.available { --node:#12d9f4; }.map-node>b { display:grid; place-items:center; width:82px; height:90px; color:#060a11; background:var(--node) url('assets/card-wear.svg') center/cover; border:4px solid #151321; outline:2px solid var(--node); font:900 64px/1 var(--display); clip-path:polygon(14% 0,86% 0,100% 13%,100% 87%,86% 100%,14% 100%,0 87%,0 13%); }.map-node>strong { padding:6px 10px; background:#080d16ed; font:900 17px/1.15 var(--display); }.map-node>small { padding:5px 9px; color:#10121b; background:var(--node); font:900 11px var(--display); }
.map-node[aria-pressed="true"] { filter:drop-shadow(0 0 12px color-mix(in srgb,var(--node) 65%,transparent)); }.map-node[aria-pressed="true"]::after { content:''; width:55px; height:12px; border:2px solid var(--node); border-radius:50%; position:absolute; bottom:-15px; box-shadow:0 0 15px var(--node); }
.map-legend { position:absolute; bottom:20px; left:20px; display:flex; gap:16px; background:#080b14dc; padding:12px; font:12px var(--display); }.map-legend span:nth-child(1) { color:#b7f20c; }.map-legend span:nth-child(2) { color:#12d9f4; }.map-legend span:nth-child(3) { color:#a77be0; }
.map-dossier { position:relative; background:#0a0d12 url('assets/card-wear.svg') center/cover; border-left:5px solid #e7e0d4; display:flex; flex-direction:column; min-width:0; }#mapPortrait { height:30vh; flex:none; background-size:230% auto; background-position:100% 18%; background-repeat:no-repeat; mask-image:linear-gradient(#000 75%,transparent); }#mapProgress { position:absolute; top:18px; right:14px; background:#090d16dd; padding:10px; color:#b7f20c; font:900 18px var(--display); }
.map-details { padding:8px 24px 24px; display:flex; flex-direction:column; gap:10px; flex:1; }.map-details .eyebrow { color:#12d9f4; }.map-details h3 { font:900 clamp(22px,2.6vw,40px)/1.05 var(--display); margin:0; color:#f5f1e7; }#mapEnemy { color:#b48adf; font:900 17px var(--display); }#mapDescription { font-size:12px; line-height:1.5; margin:0; color:#ccd3dd; }.map-objective { padding:12px; border:1px solid #12d9f499; margin:6px 0; }.map-objective small { color:#12d9f4; font:900 11px var(--display); }.map-objective p { margin:8px 0 0; font-size:13px; }.map-rewards { display:flex; flex-direction:column; gap:5px; color:#ffdc38; }.map-rewards>strong { font:900 30px var(--display); }.map-rewards>small,.map-rewards>span { font-size:11px; }#mapPlay { margin-top:auto; min-height:55px; background:#ffdc38 url('assets/card-wear.svg') center/cover; color:#111; font:900 25px var(--display); }#mapPlay:disabled { background-color:#544b65; color:#d5c8e5; font-size:15px; cursor:not-allowed; }
.campaign-map-screen button:focus-visible { outline:3px solid white; outline-offset:4px; }
/* Un parcours sur la ville, avec le même repère pour les routes et les missions. */
#campaignDialog .campaign-city { min-height:max(780px,100dvh); background-position:center; }
.map-network { position:absolute; inset:195px 20px 65px; }
#campaignDialog #mapNodes { position:absolute; inset:0; display:block; padding:0; }
#campaignDialog .map-node { position:absolute; left:var(--map-x); top:var(--map-y); transform:translate(-50%,-50%); width:112px; min-height:0; padding:0; background:none; border:0; }
#campaignDialog .map-node>b { width:54px; height:58px; font-size:32px; }
#campaignDialog .map-node>strong { font-size:12px; background:#08121bed; max-width:112px; line-height:1.2; padding:5px; }
#campaignDialog .map-node>small { font-size:12px; padding:2px 8px; }
#campaignDialog .map-node[aria-pressed="true"] { outline:0; filter:drop-shadow(0 0 8px var(--node)); }
#campaignDialog .map-node[aria-pressed="true"]>b { background-color:white; }
#campaignDialog .map-node[aria-pressed="true"]::after { display:none; }
#campaignDialog .boss-node { --node:#ff315f; }
#campaignDialog .boss-node>b { width:68px; height:72px; }
#campaignDialog .map-routes { display:block; }
#campaignDialog .map-routes path { stroke-width:.55; stroke:#8994ac; stroke-dasharray:1 1; }
#campaignDialog .map-routes .route-open { stroke:var(--acid); stroke-dasharray:none; filter:none; }
#campaignDialog .map-dossier { align-self:start; position:sticky; top:0; min-height:100dvh; }
#campaignDialog #mapDescription,.map-objective p { font-size:14px; }
#campaignDialog #mapPortrait { height:auto; padding:54px 16px 18px; display:grid; place-items:center; background:radial-gradient(ellipse,#173949,#080e18 75%); mask-image:none; }
.map-agent-art { display:block; width:min(220px,100%); aspect-ratio:var(--portrait-ratio,1); background-repeat:no-repeat; border:1px solid #52758a; box-shadow:0 12px 24px #0006; }
@media(max-width:500px) { #campaignDialog .map-node { width:70px; }#campaignDialog .map-node>strong { display:none; }.map-network { inset:180px 10px 70px; }#campaignDialog .map-node>b { width:46px; height:50px; font-size:28px; }#campaignDialog .boss-node>b { width:58px; height:62px; } }
#comicNewEnemy { position:absolute; right:2%; top:14%; width:min(35vw,42vh); height:auto; aspect-ratio:var(--portrait-ratio,1); background-repeat:no-repeat; border:3px solid #12d9f4; box-shadow:0 10px 30px #0008; pointer-events:none; }
#comicNewEnemy[hidden] { display:none; }
.comic-heading,.comic-bubble,.comic-footer,.comic-name,#comicSkip { z-index:5; }
@media(max-width:800px) { #campaignDialog .map-dossier { position:relative; min-height:0; } }
@media(max-height:750px) and (min-width:801px) { #mapPortrait { height:23vh; }.map-details { gap:7px; padding:8px 18px 16px; }.map-heading { top:55px; }.map-node>b { width:65px; height:68px; font-size:48px; }.map-node>strong { font-size:14px; }.map-node { width:135px; }.map-node[data-map-level="3"] { top:35%; } }
@media(max-width:800px) { #campaignDialog.campaign-map-screen[open] { grid-template-columns:1fr; }.campaign-city { min-height:650px; }.map-dossier { border-left:0; border-top:3px solid #dedbd2; }#mapPortrait { height:220px; background-size:160% auto; }.map-heading h2 { font-size:44px; }.map-node { width:125px; }.map-node>strong { font-size:13px; }.map-node[data-map-level="3"] { top:40%; }.map-node[data-map-level="2"] { top:62%; }.map-node[data-map-level="1"] { top:83%; }.map-routes { display:none; }.map-legend { font-size:10px; gap:10px; }.map-details { padding:20px; } }