/* The title sequence uses the shipped city and sprite art, at native pixel edges. */
.title-screen{position:fixed;inset:0;z-index:12000;isolation:isolate;display:grid;place-items:center;overflow:hidden;background:#100e16;color:#f2e6d5;min-height:100svh;font-family:VT323}
.title-screen[hidden]{display:none}
.title-city{position:absolute;inset:-12%;z-index:-4;background:url('assets/city.png') center 35%/cover no-repeat;image-rendering:pixelated;opacity:.48;animation:city-drift 24s ease-in-out infinite alternate;will-change:transform}
.title-screen:before{content:'';position:absolute;inset:0;z-index:-3;background:linear-gradient(90deg,#0d0e18da,transparent 45%,#0d0e18a8),linear-gradient(0deg,#100d17 0%,#100d17c9 22%,#100d17a0 55%,#100d1755 100%)}
.title-screen:after{content:'';position:absolute;inset:0;z-index:5;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 3px,#08091424 3px 4px);opacity:.6}
.title-content{position:relative;width:min(850px,90vw);text-align:center;padding:30px 0;animation:title-arrive 1.2s ease-out both}
.title-brand{display:block;width:140px;height:auto;margin:0 auto 32px}
.title-edition{font:15px/1 VT323;letter-spacing:5px;color:#f3bd7e;margin:0 0 15px}
.title-lockup{margin:0;display:flex;flex-direction:column;align-items:center;filter:drop-shadow(0 5px 0 #090c15)}
.title-lockup span{font:clamp(38px,7.3vw,86px)/1 Sudo;letter-spacing:2px;color:#ffe8c7;animation:breach-resolve 1s steps(8,end) both}
.title-lockup strong{display:block;font:clamp(112px,20vw,232px)/.92 Pressio,sans-serif;letter-spacing:1px;background:linear-gradient(#ffcd77 3%,#ffad66 32%,#f2717e 68%,#ed579a 95%);background-clip:text;-webkit-background-clip:text;color:transparent;animation:control-rise 1.3s cubic-bezier(.16,1,.3,1) .12s both}
.title-rule{width:min(330px,70%);height:2px;margin:25px auto 14px;background:linear-gradient(90deg,transparent,#ed708d,transparent);position:relative}.title-rule:after{content:'';position:absolute;left:calc(50% - 3px);top:-2px;width:6px;height:6px;background:#ffc67b;transform:rotate(45deg)}
.title-tagline{font:19px/1.2 VT323;letter-spacing:3px;margin:0;color:#dac4d0}
.title-enter{position:relative;min-width:250px;min-height:54px;margin:8px 0 0;padding:12px 35px;border:0;border-top:1px solid #f3ad7f;border-bottom:1px solid #bb607e;border-radius:0;background:#1f141dde;color:#ffe1a6;font:24px/1 VT323;letter-spacing:3px;transition:background .2s,color .2s;box-shadow:none}
.title-enter:before,.title-enter:after{content:'';position:absolute;top:calc(50% - 3px);width:6px;height:6px;background:#fa9b7d}.title-enter:before{left:9px}.title-enter:after{right:9px}
.title-enter:hover,.title-enter:focus-visible{background:#442536;color:#fff2db;border-color:#ffe0a2;outline:2px solid #ffc67b;outline-offset:5px}.title-enter:disabled{opacity:.6;cursor:wait}
.title-enter:not(:disabled) span{animation:entry-breathe 2.8s ease-in-out infinite}
.title-input-note{font:14px/1 VT323;letter-spacing:1px;color:#998a9d;margin:16px 0 0}
.title-corner{position:absolute;bottom:22px;font:12px/1 VT323;letter-spacing:2px;color:#bb8b9c}.title-corner.left{left:24px}.title-corner.right{right:24px;color:#7ab5bb}
.title-embers{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}.title-embers i{position:absolute;left:var(--x);bottom:-15px;width:2px;height:var(--h);background:var(--c);opacity:0;animation:ember-rise var(--duration) linear var(--delay) infinite}
.title-screen.leaving{pointer-events:none;animation:title-exit .5s ease-in forwards}.title-screen.leaving .title-content{animation:title-content-exit .5s ease-in forwards}
@keyframes city-drift{from{transform:translateY(2%) scale(1.02)}to{transform:translateY(-3%) scale(1.06)}}
@keyframes title-arrive{from{opacity:0}to{opacity:1}}
@keyframes breach-resolve{from{opacity:0;transform:translateY(-12px);letter-spacing:12px}to{opacity:1;transform:translateY(0);letter-spacing:2px}}
@keyframes control-rise{from{opacity:0;transform:translateY(30px);clip-path:inset(100% 0 0)}to{opacity:1;transform:translateY(0);clip-path:inset(0)}}
@keyframes title-walk{to{background-position:-192px 0}}
@keyframes ember-rise{0%{opacity:0;transform:translate(0,0)}15%{opacity:.6}80%{opacity:.3}100%{opacity:0;transform:translate(30px,-100vh)}}
@keyframes entry-breathe{50%{opacity:.55}}
@keyframes title-exit{to{opacity:0}}
@keyframes title-content-exit{to{opacity:0;transform:translateY(-12px)}}
@media(max-width:800px){.title-content{width:92vw;padding:20px 0}.title-city{background-size:auto 120%;background-position:center 15%}.title-brand{width:116px;margin-bottom:26px}.title-edition{font-size:12px;letter-spacing:3px}.title-lockup span{font-size:clamp(34px,10vw,70px)}.title-lockup strong{font-size:clamp(96px,28vw,180px)}.title-tagline{font-size:16px;letter-spacing:2px}.title-agents{margin:10px 0 12px;height:92px;gap:26px}.title-enter{font-size:23px;min-height:52px;min-width:240px}.title-corner{font-size:10px;bottom:max(15px,env(safe-area-inset-bottom))}.title-corner.left{left:14px}.title-corner.right{right:14px}.title-input-note{font-size:13px}}
@media(max-height:600px){.title-brand{width:98px;margin-bottom:14px}.title-edition{margin-bottom:8px}.title-lockup span{font-size:34px}.title-lockup strong{font-size:102px}.title-rule{margin:14px auto 10px}.title-agents{height:80px;margin:0 0 6px;transform:scale(.8)}.title-enter{margin:0;min-height:44px}.title-input-note{margin-top:10px}.title-corner{font-size:9px}}
@media(prefers-reduced-motion:reduce){.title-screen *,.title-screen{animation:none!important;transition:none!important}.title-embers{display:none}.title-screen.leaving{opacity:0}}

/* Pedestrians share the exact map projection and the city's color treatment. */
#title-pedestrians{position:absolute;max-width:none;image-rendering:pixelated;pointer-events:none}
/* Outline entry terminal: square top-left/bottom-right, stepped opposite corners. */
.title-enter{display:inline-grid;position:relative;grid-template-columns:1fr 36px;grid-template-rows:15px 30px;column-gap:20px;align-items:center;text-align:left;width:320px;max-width:90vw;min-width:0;height:78px;padding:12px 28px 15px;margin-top:46px;background:#100e10d9;color:#f08092;border:0;clip-path:polygon(0 0,calc(100% - 17px) 0,calc(100% - 17px) 8px,calc(100% - 9px) 8px,calc(100% - 9px) 16px,100% 16px,100% 100%,17px 100%,17px calc(100% - 8px),9px calc(100% - 8px),9px calc(100% - 16px),0 calc(100% - 16px));box-shadow:none;transition:background .18s}
.entry-frame{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.entry-frame path{fill:none;stroke:#b65770;stroke-width:1;vector-effect:non-scaling-stroke}
.entry-frame .entry-weight{stroke:#ee8298;stroke-width:2}.entry-frame .entry-equals{stroke:#ee8298;stroke-width:2}.entry-frame .entry-bracket{stroke:#b65770}
.title-enter .entry-kicker{grid-column:1;font:10px/1 VT323;letter-spacing:1.4px;color:#ae7585;animation:none}
.title-enter #title-enter-label{grid-column:1;grid-row:2;font:25px/1 VT323;letter-spacing:.8px;animation:none}
.entry-icon{grid-column:2;grid-row:1/3;width:28px;height:28px;padding:0;background:none;color:#86d9da;border:0;transition:transform .2s}
.title-enter:before,.title-enter:after{display:none}
.title-enter:hover,.title-enter:focus-visible{background:#291722;color:#ffb0bf;outline:none;transform:none;box-shadow:none}
.title-enter:focus-visible .entry-outline{stroke:#ffb0bf;stroke-width:2}
.title-enter:hover .entry-icon{transform:translateX(3px);color:#b1f2ef}
.entry-trace{position:absolute;bottom:7px;left:29px;width:calc(100% - 58px);height:2px;background:#86d9da;transform:scaleX(0);transform-origin:left;animation:none!important;transition:transform .35s steps(10,end)}
@media(hover:hover){.title-enter:hover .entry-trace{transform:scaleX(1)}.title-enter:hover .entry-bracket{stroke:#86d9da}}
.title-screen .title-input-note{margin-top:18px}
@media(max-width:800px){.title-enter{width:300px;margin-top:42px}.title-enter #title-enter-label{font-size:23px}}
@media(max-height:600px){.title-enter{margin-top:26px}.title-screen .title-input-note{margin-top:12px}}
@media(prefers-reduced-motion:reduce){.title-enter,.entry-icon,.entry-trace{transition:none}.title-enter:hover .entry-icon{transform:none}}

/* Reversible title experiment: restrained RGB separation with brief sliced bursts. */
.title-lockup strong.control-glitch{position:relative;background:none;-webkit-text-fill-color:initial;color:#eeead7;text-shadow:-2px 0 #ee8298,2px 0 #86d9da;isolation:isolate}
.control-glitch:before,.control-glitch:after{content:attr(data-text);position:absolute;inset:0;pointer-events:none;background:none;text-shadow:none;-webkit-text-fill-color:currentColor;opacity:0}
.control-glitch:before{color:#ee8298;animation:control-red-glitch 2.8s steps(1,end) 1.5s infinite}
.control-glitch:after{color:#86d9da;animation:control-cyan-glitch 2.8s steps(1,end) 1.5s infinite}
@keyframes control-red-glitch{0%,87%,100%{opacity:0;transform:translateX(0);clip-path:inset(0)}88%{opacity:1;transform:translateX(-7px);clip-path:inset(16% 0 64%)}90%{opacity:1;transform:translateX(5px);clip-path:inset(62% 0 17%)}92%{opacity:0}95%{opacity:1;transform:translateX(-4px);clip-path:inset(39% 0 52%)}97%{opacity:0}}
@keyframes control-cyan-glitch{0%,87%,100%{opacity:0;transform:translateX(0);clip-path:inset(0)}88%{opacity:1;transform:translateX(6px);clip-path:inset(63% 0 19%)}90%{opacity:1;transform:translateX(-4px);clip-path:inset(18% 0 68%)}92%{opacity:0}95%{opacity:1;transform:translateX(5px);clip-path:inset(40% 0 51%)}97%{opacity:0}}
@media(max-width:800px){.title-lockup strong.control-glitch{text-shadow:-1px 0 #ee8298,1px 0 #86d9da}}
@media(prefers-reduced-motion:reduce){.control-glitch:before,.control-glitch:after{display:none}}
#mission-briefing{box-sizing:border-box;width:min(570px,calc(100vw - 28px));max-height:calc(100dvh - 32px);overflow:auto;margin:auto;padding:30px;background:#171719;color:#eeead7;border:1px solid #89505c;border-top:3px solid #ee8298;border-radius:0;box-shadow:7px 7px 0 #08090c;font:19px/1.25 VT323}
#mission-briefing::backdrop{background:#080a10c9;backdrop-filter:blur(3px)}.mission-kicker{font:13px VT323;letter-spacing:1.5px;color:#ee8298}#mission-title{font:34px/1 VT323;margin:14px 0 18px}#mission-objective{margin:0 0 24px;color:#d3cbd0}.mission-team{display:grid;gap:16px}.mission-team>div{border-left:2px solid var(--agent-color);padding-left:14px}.mission-team span{font:16px VT323;letter-spacing:1px;color:var(--agent-color)}.mission-team p{margin:4px 0 0;font:18px/1.2 VT323;color:#cec6cb}.mission-purpose{border-top:1px dashed #60444d;padding-top:18px;margin:22px 0;font:17px/1.25 VT323;color:#aaa0a9}#mission-continue{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:46px;padding:12px 16px;border:1px solid #ee8298;background:#281d23;color:#eeead7;font:21px VT323;cursor:pointer}#mission-continue span{color:#86d9da}#mission-continue:hover{background:#3a232d}#mission-continue:focus-visible{outline:2px solid #86d9da;outline-offset:4px}
@media(max-width:600px){#mission-briefing{padding:22px;font-size:18px}#mission-title{font-size:30px}.mission-team{gap:12px}.mission-purpose{margin:18px 0;font-size:16px}}