/* Mission control map. All art is CSS so the screen works offline. */
.map-screen{position:relative;isolation:isolate;max-width:1360px;padding-top:36px;overflow:visible}
.map-atmosphere{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(circle at 48% 43%,#2a4c6840,transparent 49%),radial-gradient(circle at 85% 19%,#4a2c7140,transparent 30%),linear-gradient(90deg,#76d8e70a 1px,transparent 1px),linear-gradient(#76d8e70a 1px,transparent 1px);background-size:auto,auto,44px 44px,44px 44px;mask-image:linear-gradient(transparent,#000 13%,#000 86%,transparent)}
.map-screen:after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 5px,#76d8e706 6px 7px);opacity:.65}
.map-screen .map-header{display:grid;grid-template-columns:minmax(0,1fr) 315px;align-items:end;gap:35px;margin:35px 0 37px}
.map-screen .map-header h1{font-size:clamp(56px,6.7vw,92px);line-height:.95;letter-spacing:-.08em;text-transform:uppercase;text-shadow:0 0 34px #4ce7ee25}
.map-title-dot{color:var(--red)}
.map-screen .map-header p{font-size:16px;margin:15px 0 0;max-width:550px}
.map-screen .map-status{padding:0;border:1px solid #416d80;background:linear-gradient(145deg,#163346,#0c1c2b);box-shadow:0 0 26px #45d8e414,inset 0 0 28px #5ceaf008;white-space:normal;font-family:Consolas,'Courier New',monospace;letter-spacing:.08em}
.map-status-title{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #365e70;padding:13px 16px;color:#b2d3dc;font-size:10px}
.map-status-title .pulse-dot{margin-right:6px}.map-status-title>span:last-child{margin-left:auto;color:var(--cyan)}
.map-status-row{display:flex;justify-content:space-between;gap:12px;padding:11px 16px;border-bottom:1px solid #2b4b5e;color:#85a9b9;font-size:10px}
.map-status-row strong{color:#e7f9fa}.map-status-row .integrity-critical{color:#ff8590}.map-status-row .integrity-unstable{color:#ffc582}.map-status-row .integrity-stabilising{color:#b5afff}.map-status-row .integrity-restored{color:#96f2d9}
.map-status-objective{padding:11px 16px 14px;display:grid;gap:5px}.map-status-objective span{font-size:9px;color:#7498aa}.map-status-objective strong{font-size:12px;color:var(--cyan);letter-spacing:.04em}
.map-route-heading{display:flex;justify-content:space-between;gap:15px;margin-bottom:12px;color:#80acbc;font:700 10px Consolas,'Courier New',monospace;letter-spacing:.14em}.map-route-heading b{color:var(--cyan);padding:0 6px}
.map-screen .map-path{display:grid;grid-template-columns:minmax(0,1fr) 46px minmax(0,1fr) 46px minmax(0,1fr);align-items:stretch;gap:0;position:relative}
.map-screen .map-path:before{content:"";position:absolute;left:0;right:0;top:49%;height:1px;background:#4ecedb22;z-index:-1}
.map-screen .map-sector{--sector-accent:#67e4ee;width:100%;min-width:0;min-height:355px;padding:19px;display:flex;flex-direction:column;gap:0;position:relative;overflow:hidden;text-align:left;background:linear-gradient(155deg,#153247,#0d1c2d 66%);border:1px solid #4b8496;box-shadow:inset 0 0 32px #68deec0c;color:#ecf8f8;transition:transform .2s,border-color .2s,box-shadow .2s,filter .2s}
.map-screen .map-sector:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 37%,color-mix(in srgb,var(--sector-accent) 16%,transparent),transparent 59%);pointer-events:none}
.map-screen .map-sector:after{content:"";position:absolute;left:0;top:0;width:55px;height:55px;border:0;border-left:2px solid var(--sector-accent);border-top:2px solid var(--sector-accent);border-radius:0;box-shadow:none;pointer-events:none}
.map-screen .map-sector:hover{transform:translateY(-4px);border-color:var(--sector-accent);box-shadow:0 0 27px color-mix(in srgb,var(--sector-accent) 25%,transparent),inset 0 0 34px #69e9f00b}
.map-screen .map-sector:focus-visible{outline:2px solid #fff;outline-offset:4px}
.map-screen .map-sector--available{border-color:var(--sector-accent);box-shadow:0 0 21px color-mix(in srgb,var(--sector-accent) 24%,transparent),inset 0 0 32px #68deec10;animation:mapCardPulse 4s ease-in-out infinite}
.map-screen .map-sector--restored{border-color:#89e4d4;background:linear-gradient(155deg,#164149,#11272f 70%)}
.map-screen .map-sector--locked{opacity:.7;filter:saturate(.6);border-color:#4f6273}.map-screen .map-sector--locked:hover{opacity:.9}
.map-screen .sector-double{--sector-accent:#b29afb;background:linear-gradient(155deg,#29274b,#131d31 68%)}
.map-screen .sector-core{--sector-accent:#9ce5f6;background:linear-gradient(155deg,#202f4c,#111c31 68%)}
.map-screen .sector-index{font:700 10px Consolas,'Courier New',monospace;letter-spacing:.12em;display:flex;gap:10px;align-items:center;color:#a5dce5;white-space:nowrap;position:relative;z-index:1}
.map-screen .sector-line{height:1px;min-width:8px;background:#5a94a7}
.sector-state{border:1px solid #4a8d9f;color:#a9e7ed;background:#153b4b;padding:5px 6px;font-size:9px}
.map-sector--locked .sector-state{border-color:#718091;color:#c0cbd3;background:#293547}.map-sector--restored .sector-state{border-color:#79d9c6;color:#b9ffe9;background:#1e524c}
.map-screen .sector-art{display:block;position:relative;height:128px;margin:15px 0 14px;overflow:hidden;border-top:1px solid #7fdded1b;border-bottom:1px solid #7fdded35;flex:none}
.sector-art b{position:absolute;bottom:4px;left:0;right:0;font:700 9px Consolas,'Courier New',monospace;letter-spacing:.11em;color:#8cb8c9;text-align:center;z-index:2}
.glitch-art{background:radial-gradient(circle at 50% 86%,#2d86a64a,transparent 56%),repeating-linear-gradient(0deg,transparent 0 12px,#e58d9530 13px 14px,transparent 15px 31px)}
.glitch-art i{position:absolute;bottom:16px;width:15%;background:linear-gradient(90deg,#153447,#32617a,#122d42);border:1px solid #78c8d664;box-shadow:0 0 16px #3ebfdb2e}
.glitch-art i:after{content:"";position:absolute;inset:12px 16%;background:repeating-linear-gradient(90deg,#80e8ec9c 0 3px,transparent 3px 12px),repeating-linear-gradient(0deg,transparent 0 10px,#103247 10px 17px);opacity:.75}
.glitch-art i:nth-child(1){left:5%;height:52%}.glitch-art i:nth-child(2){left:24%;height:73%}.glitch-art i:nth-child(3){left:43%;height:45%}.glitch-art i:nth-child(4){left:62%;height:84%}.glitch-art i:nth-child(5){left:81%;height:58%}
.glitch-art:after{content:"";position:absolute;left:8%;right:12%;top:35%;height:3px;background:#f77d8655;box-shadow:16px 15px #e3627944,-22px 43px #e3627944;transform:skewX(-35deg)}
.portal-art{background:radial-gradient(circle at 25% 50%,#4389d133,transparent 32%),radial-gradient(circle at 74% 50%,#c569a93b,transparent 34%)}
.portal-art i{position:absolute;width:33%;max-width:92px;aspect-ratio:1;border:2px solid #75bbff;border-radius:50%;left:7%;top:13px;box-shadow:0 0 18px #62b9ff9c,inset 0 0 20px #62b9ff60;animation:mapPortalBreath 4s ease-in-out infinite}
.portal-art i:after{content:"";position:absolute;inset:9px;border:1px dashed currentColor;border-radius:50%}
.portal-art i:nth-child(2){left:auto;right:7%;border-color:#e8a07e;box-shadow:0 0 18px #e879b484,inset 0 0 20px #e879b460;animation-delay:1s}
.portal-art>span{position:absolute;left:37%;right:37%;top:54px;height:2px;background:linear-gradient(90deg,#6db8ff,#d594ef,#e79977);box-shadow:0 0 15px #bc93fd}
.core-art{background:radial-gradient(circle at 50% 45%,#996adc48,transparent 43%),repeating-linear-gradient(90deg,transparent 0 22px,#7ebaf31c 23px 24px,transparent 25px 46px)}
.core-art i{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:98px;height:98px;border:1px solid #9de6f1;border-radius:50%;box-shadow:0 0 17px #8ee3f17d,inset 0 0 17px #8ee3f14d}
.core-art i:before,.core-art i:after{content:"";position:absolute;width:6px;height:6px;border-radius:50%;background:#bcf7f4;box-shadow:0 0 8px #8deef0}.core-art i:before{top:2px;left:15px}.core-art i:after{right:8px;bottom:7px}
.core-art i:nth-child(2){width:70px;height:70px;border-color:#c6a0f3;box-shadow:0 0 18px #a586f5a6,inset 0 0 18px #a586f565}
.core-art i:nth-child(3){width:34px;height:34px;background:#a3e8ef61;border:2px solid #a7f0f0;box-shadow:0 0 25px #95ebef}
.map-screen .sector-name{color:var(--sector-accent);font-size:10px;letter-spacing:.14em;margin:0 0 7px;position:relative;z-index:1}
.map-screen .map-sector>strong{font-size:clamp(21px,2.3vw,28px);line-height:1.08;letter-spacing:-.04em;position:relative;z-index:1}
.map-screen .sector-footer{padding:10px 11px;margin-top:auto;margin-bottom:0;border:1px solid #477587;background:#173a4b;color:#e0f9f9;font:700 10px Consolas,'Courier New',monospace;letter-spacing:.08em;align-items:center;gap:8px;position:relative;z-index:1}
.map-screen .map-sector--available .sector-footer{border-color:var(--sector-accent);background:#225467;color:#eaffff}.map-screen .map-sector--restored .sector-footer{border-color:#60bea9;background:#1d4d49}.map-screen .map-sector--locked .sector-footer{border-color:#53697d;background:#253747;color:#d5e0e6}
.map-screen .sector-footer b{font-size:16px;color:var(--sector-accent)}
.map-screen .path-link{width:auto;min-height:100%;display:grid;place-items:center;position:relative;color:#63899a}.map-screen .path-link:before{height:2px;width:100%;background:#48687b}.map-screen .path-link.lit:before{background:var(--cyan);box-shadow:0 0 13px var(--cyan)}
.map-screen .path-link .path-node{width:10px;height:10px;position:absolute;left:9px;top:50%;transform:translateY(-50%) rotate(45deg);border:1px solid #5e8495;background:#152c3c}.map-screen .path-link.lit .path-node{border-color:var(--cyan);box-shadow:0 0 11px var(--cyan)}
.map-screen .path-link b{font:700 18px Consolas,monospace;position:absolute;right:0;top:50%;transform:translateY(-50%);color:#60879a}.map-screen .path-link.lit b{color:var(--cyan)}
.map-route-end{display:flex;align-items:center;gap:10px;margin-top:13px;color:#6891a1;font:700 10px Consolas,monospace;letter-spacing:.14em}.map-route-end i{height:1px;flex:1;background:#345b6a}.map-route-end .ready{color:var(--cyan);text-shadow:0 0 12px var(--cyan)}
.map-screen .map-notice{min-height:0;margin:12px 0 0}.map-screen .map-notice:not(.visible){display:none}.map-screen .map-notice.visible{border-color:var(--cyan);background:#153646;color:#d0fbf7}
.map-screen .map-bottom{display:grid;grid-template-columns:200px 1fr;gap:20px;align-items:center;margin-top:30px;padding-top:23px;border-top:1px solid #3e6574}.map-screen .map-bottom h2{font-size:20px;margin:0}.map-screen .map-bottom h2 span{display:block;margin:7px 0 0;font-size:11px}
.map-screen .keys{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.map-screen .key-card{min-width:0;min-height:65px;padding:10px 12px;position:relative;overflow:visible;border:1px solid #405c70;background:linear-gradient(135deg,#13273a,#0d1d2f);color:#a7bdc9;gap:12px}
.map-screen .key-card.owned{border-color:#65d9dc;background:linear-gradient(135deg,#1b4e55,#102a39);color:#e7ffff;box-shadow:0 0 16px #4ddbe536}
.map-screen .key-card:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}.map-screen .key-symbol{width:36px;height:36px;display:grid;place-items:center;border:1px solid #547587;transform:rotate(45deg);color:#638da0;font-size:21px;flex:none}.map-screen .key-symbol::first-letter{transform:rotate(-45deg)}.map-screen .owned .key-symbol{color:var(--cyan);border-color:var(--cyan);box-shadow:0 0 14px #60e8e950}
.map-screen .key-label{min-width:0}.map-screen .key-label span{font-size:10px;line-height:1.3}.map-screen .key-card small{font-size:9px}.map-screen .key-tip{position:absolute;bottom:calc(100% + 7px);left:5px;right:5px;background:#0c2433;border:1px solid var(--cyan);padding:8px;color:#d7fbfa;font:11px/1.4 Arial,sans-serif;letter-spacing:0;text-align:center;opacity:0;visibility:hidden;transform:translateY(5px);transition:.15s;z-index:5;pointer-events:none}.map-screen .key-card:hover .key-tip,.map-screen .key-card:focus .key-tip{opacity:1;visibility:visible;transform:translateY(0)}
.map-screen .map-exit{margin-top:19px}
@keyframes mapCardPulse{50%{box-shadow:0 0 28px color-mix(in srgb,var(--sector-accent) 35%,transparent),inset 0 0 38px #68deec16}}
@keyframes mapPortalBreath{50%{filter:brightness(1.25);transform:scale(1.04)}}
@media(max-width:1050px){.map-screen .map-header{grid-template-columns:minmax(0,1fr) 270px}.map-screen .map-path{grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr) 30px minmax(0,1fr)}.map-screen .map-sector{padding:15px;min-height:332px}.map-screen .map-sector>strong{font-size:21px}.map-screen .sector-index{font-size:9px}.map-screen .sector-state{font-size:8px}.map-screen .sector-art{height:115px}.map-screen .sector-footer{font-size:9px}}
@media(max-width:850px){.map-screen .map-header{grid-template-columns:1fr;gap:20px;margin:28px 0}.map-screen .map-status{max-width:none}.map-screen .map-path{grid-template-columns:1fr}.map-screen .map-path:before{display:none}.map-screen .map-sector{min-height:205px;display:grid;grid-template-columns:165px 1fr;grid-template-rows:auto auto auto 1fr;column-gap:20px}.map-screen .sector-index{grid-column:1/-1;grid-row:1}.map-screen .sector-art{grid-column:1;grid-row:2/5;height:135px;margin:13px 0 0}.map-screen .sector-name{grid-column:2;grid-row:2;align-self:end;margin-top:14px}.map-screen .map-sector>strong{grid-column:2;grid-row:3}.map-screen .sector-footer{grid-column:2;grid-row:4;align-self:end;margin-top:15px}.map-screen .path-link{height:34px;min-height:34px;width:100%}.map-screen .path-link:before{width:2px;height:100%}.map-screen .path-link .path-node{left:50%;top:50%;transform:translate(-50%,-50%) rotate(45deg)}.map-screen .path-link b{top:auto;bottom:0;right:calc(50% - 9px);transform:rotate(90deg);font-size:17px}.map-screen .map-bottom{grid-template-columns:1fr}.map-screen .keys{margin-top:0}.map-route-heading span:last-child{display:none}.map-route-end{display:none}}
@media(max-width:600px){.map-screen .map-header h1{font-size:58px}.map-screen .map-sector{grid-template-columns:112px 1fr;column-gap:13px;min-height:190px;padding:14px}.map-screen .sector-art{height:115px}.map-screen .map-sector>strong{font-size:20px}.map-screen .sector-footer{font-size:8px;padding:8px}.map-screen .keys{grid-template-columns:1fr}.map-screen .key-card{min-height:56px}.map-screen .key-tip{left:42px;right:5px}.map-screen .map-status-row,.map-status-objective{font-size:10px}}
@media(prefers-reduced-motion:reduce){.map-screen .map-sector--available,.map-screen .portal-art i{animation:none!important}.map-screen *{transition-duration:.01ms!important}}

/* Keep the full route, tokens and exit action in one normal desktop viewport.
   Below this height, the map returns to its natural scrolling layout. */
@media (min-width:851px) and (min-height:640px){
  .map-screen{min-height:calc(100vh - 112px);min-height:calc(100dvh - 112px - env(safe-area-inset-bottom,0px));height:auto;display:flex;flex-direction:column;justify-content:space-between;padding-top:10px;padding-bottom:10px}
  .map-screen>.section-kicker{flex:none;font-size:10px;line-height:1.2}
  .map-screen .map-header{flex:none;grid-template-columns:minmax(0,1fr) minmax(350px,440px);align-items:center;gap:22px;margin:7px 0 9px}
  .map-screen .map-header .section-number{margin-bottom:5px;font-size:10px}
  .map-screen .map-header h1{font-size:clamp(49px,4.8vw,68px);line-height:.91}
  .map-screen .map-header p{font-size:13px;line-height:1.35;margin:6px 0 0}
  .map-screen .map-status{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .map-screen .map-status-title{grid-column:1/-1;min-height:26px;padding:5px 10px;font-size:9px}
  .map-screen .map-status-row{min-height:28px;padding:6px 9px;font-size:9px;align-items:center}
  .map-screen .map-status-row:nth-child(2){border-right:1px solid #2b4b5e}
  .map-screen .map-status-objective{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:29px;padding:6px 10px}
  .map-screen .map-status-objective strong{font-size:11px;text-align:right}
  .map-screen .map-route-heading{flex:none;margin-bottom:5px;font-size:9px;line-height:1.2}
  .map-screen .map-path{flex:none;height:clamp(230px,calc(100dvh - 445px),560px);min-height:0;max-height:none}
  .map-screen .map-sector{height:100%;min-height:0;padding:11px 13px}
  .map-screen .sector-index{font-size:9px;gap:7px}
  .map-screen .sector-state{padding:4px 5px;font-size:8px}
  .map-screen .sector-art{height:clamp(88px,13dvh,136px);margin:6px 0 8px}
  .map-screen .portal-art i{top:5px}
  .map-screen .portal-art>span{top:45px}
  .map-screen .sector-name{margin-bottom:4px;font-size:9px}
  .map-screen .map-sector>strong{font-size:clamp(20px,2vw,26px)}
  .map-screen .sector-footer{min-height:33px;padding:7px 9px;font-size:9px}
  .map-screen .map-route-end{flex:none;margin-top:5px;font-size:9px}
  .map-screen .map-notice{flex:none;margin-top:6px;font-size:12px}
  .map-screen .map-notice.visible{padding:6px 10px}
  .map-screen .map-bottom{flex:none;grid-template-columns:185px 1fr;gap:14px;margin-top:9px;padding-top:8px}
  .map-screen .map-token-heading .section-number{margin-bottom:4px;font-size:10px}
  .map-screen .map-bottom h2{font-size:17px;line-height:1.2}
  .map-screen .map-bottom h2 span{display:inline;margin:0 0 0 5px;font-size:10px}
  .map-screen .keys{gap:7px}
  .map-screen .key-card{min-height:51px;padding:6px 10px;gap:10px}
  .map-screen .key-symbol{width:29px;height:29px;font-size:17px}
  .map-screen .key-card small{margin-top:3px}
  .map-screen .map-exit{flex:none;min-height:42px;margin-top:7px;padding:0 15px}
}
@media (min-width:851px) and (min-height:640px) and (max-height:739px){
  .map-screen .map-header h1{font-size:clamp(47px,4.3vw,59px)}
  .map-screen .map-header p{font-size:12px}
  .map-screen .map-header{margin:5px 0 7px}
  .map-screen .map-status-title{min-height:22px;padding:4px 9px}
  .map-screen .map-status-row{min-height:24px;padding:4px 8px}
  .map-screen .map-status-objective{min-height:26px;padding:4px 9px}
  .map-screen .map-path{min-height:230px}
  .map-screen .sector-art{height:clamp(82px,12dvh,96px);margin:5px 0 6px}
  .map-screen .map-sector{padding:9px 12px}
  .map-screen .map-bottom{margin-top:7px;padding-top:6px}
  .map-screen .key-card{min-height:47px;padding:5px 9px}
  .map-screen .map-exit{min-height:39px;margin-top:5px}
}