@font-face{font-family:IsaMenuPixel;src:url('assets/title/isa-menu-pixel.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Mono;src:local('SFMono-Regular'),local('Menlo'),local('Consolas')}
:root{color-scheme:dark;--ink:#0c121b;--blue:#8cb5ff;--paper:#e5e4d8;--muted:#7c8b91;--line:#26313c}
*{box-sizing:border-box}body{margin:0;background:var(--ink);color:var(--paper);font-family:Mono,monospace;min-height:100svh;background-image:radial-gradient(ellipse at 50% 35%,#1a2831 0,transparent 67%)}button,a{-webkit-tap-highlight-color:transparent}button{color:inherit;font:inherit;border:0;background:transparent;cursor:pointer}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:2px solid var(--blue);outline-offset:4px}button:hover{color:var(--blue)}[hidden]{display:none!important}
#app{max-width:min(1220px,calc(177.778svh - 288px));margin:auto;padding:24px 34px 16px}.masthead{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;height:25px}.wordmark{font-size:15px;font-weight:bold;letter-spacing:5px;text-decoration:none;color:var(--paper)}.wordmark span{color:#4f7cff}.mast-actions{display:flex;align-items:center;gap:24px;font-size:10px;letter-spacing:1px}.mast-actions span{color:var(--muted);margin-left:8px}#fullscreen{font-size:25px;line-height:20px}
.game-shell{position:relative;aspect-ratio:16/9;box-shadow:0 24px 90px #0008;isolation:isolate;border:1px solid #314049;background:#171e34;overflow:hidden}canvas{display:block;width:100%;height:100%;image-rendering:pixelated;outline:none!important;touch-action:none}.overlay{position:absolute;inset:0;z-index:2}.title-top,.title-bottom{position:absolute;left:5%;right:5%;display:flex;justify-content:space-between;color:#92a9ae;font-size:clamp(7px,.8vw,10px);letter-spacing:2px}.title-top{top:7%}.title-bottom{bottom:7%;color:#607880}#title{background:linear-gradient(90deg,#0c1621de 0%,#0c162176 48%,#0c162110 100%)}.title-content{position:absolute;left:8%;top:25%}.eyebrow{font-size:clamp(8px,.8vw,11px);letter-spacing:3px;color:#8aa3ad}h1{margin:9px 0 8px;font-family:Georgia,serif;font-weight:normal;letter-spacing:.17em;font-size:clamp(55px,8.4vw,108px);line-height:1.15;color:#e5e4d8;text-shadow:4px 0 #4f7cff22}.title-rule{height:1px;width:40px;background:#8cb5ff;margin:14px 0 24px}.menu{display:flex;flex-direction:column;gap:15px;align-items:flex-start}.menu button{border:1px solid #60788088;background:#182631aa;padding:12px 19px;min-width:158px;text-align:left;font-size:12px;letter-spacing:3px;transition:border .15s,background .15s}.menu button:hover{background:#284154;border-color:#8cb5ff}.menu button span{float:right;color:#8cb5ff}.dialog{background:#0b1427df;backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:17px}.dialog h2{font:normal clamp(23px,4vw,48px) Georgia,serif;letter-spacing:6px;margin:3px 0 17px}.dialog button{font-size:12px;letter-spacing:2px;padding:8px 24px}.dialog p{font-size:10px;color:var(--muted)}.ending-line{width:60px;height:1px;background:#8DDED4;margin-bottom:8px}.loading{background:#101823;display:flex;justify-content:center;align-items:center;letter-spacing:4px;font-size:12px}.loading span{animation:blink 1s steps(2) infinite}@keyframes blink{50%{opacity:.2}}
.below{display:flex;align-items:center;justify-content:space-between;padding:21px 0 18px;border-bottom:1px solid var(--line);font-size:10px;letter-spacing:1.5px;color:var(--muted)}#chapter-label{min-width:240px}#progress{display:flex;gap:5px}#progress i{width:9px;height:3px;background:#2d3c48}#progress i:nth-child(4n){margin-right:8px}#progress i.done{background:#435d60}#progress i.current{background:#8cb5ff}#help{font-size:10px;letter-spacing:1.5px}#help span{margin-left:9px}.controls{display:flex;flex-wrap:wrap;justify-content:space-between;gap:15px;padding:20px 0;color:#8a979e;font-size:8px;letter-spacing:.5px}.controls kbd{display:inline-block;border:1px solid #34424d;padding:4px 5px;font-size:9px;margin-right:4px;color:#c9d1ce;border-bottom-width:2px}footer{display:flex;justify-content:space-between;color:#43545f;font-size:8px;letter-spacing:2px;margin-top:15px}#touch{display:none;justify-content:space-between;padding-top:16px;user-select:none;touch-action:none}#touch>div{display:flex;gap:7px}#touch button{width:44px;height:42px;background:#20303e;border:1px solid #43545f;font-size:22px;touch-action:none}
.controls:not(.open){display:none}.game-shell:fullscreen{width:100vw;height:100vh;aspect-ratio:auto;display:grid;place-items:center;background:#080e15}.game-shell:fullscreen canvas{width:min(100vw,177.777vh);height:min(100vh,56.25vw)}
@media(max-width:700px){#app{padding:15px 12px;max-width:none}.masthead{margin-bottom:15px}.title-rule{margin:8px 0 10px}.menu{gap:6px}.menu button{padding:8px 12px;min-width:125px;font-size:9px}.title-content{top:23%}.title-top,.title-bottom{letter-spacing:1px}.title-bottom{bottom:5%}h1{font-size:clamp(40px,10vw,66px)}.below{font-size:8px;letter-spacing:.5px;padding:15px 0}#chapter-label{min-width:0}#progress i{width:5px}#help{font-size:8px}.controls{justify-content:flex-start;gap:10px}footer{font-size:6px}.dialog{gap:8px}.dialog button{padding:4px 10px;font-size:10px}.dialog h2{margin:0 0 7px}.dialog p{font-size:8px}.eyebrow{letter-spacing:1px}}
@media(pointer:coarse){#touch{display:flex}.controls{display:none}.controls.open{display:flex}}
@media(max-width:700px){.title-content{top:20%}h1{margin:6px 0}.title-rule{margin:6px 0 8px}.menu button{padding:6px 12px}}
@media(max-width:400px){#touch button{width:37px;height:40px}#touch>div{gap:4px}}
#touch button[data-key="ShiftLeft"]{font-size:10px;letter-spacing:.3px}

/* The page is the game stage; keep its aspect ratio with plain letterboxing. */
body{background:#080e15;overflow:hidden}
#app{width:100vw;height:100svh;max-width:none;margin:0;padding:0;display:grid;place-items:center}
.masthead,.below,#controls,footer{display:none!important}
.game-shell{width:min(100vw,100svh);height:min(100vw,100svh);aspect-ratio:1; border:0;box-shadow:none}
.game-shell:fullscreen canvas{width:min(100vw,100vh);height:min(100vw,100vh)}
#touch{position:absolute;inset:auto 12px 12px;padding:0;z-index:3}
.game-shell:has(.overlay:not([hidden])) #touch{display:none}

/* The combat toggle stays within the game frame. */
#combat{position:absolute;right:12px;top:12%;z-index:1;background:#101a27d9;border:1px solid #536778;padding:8px 10px;font-size:10px;letter-spacing:1px;color:#b3c8d6;touch-action:none}
#combat[aria-pressed="true"]{color:#a4ece0;border-color:#89cfc4;background:#17342ee8}
.game-shell:has(.overlay:not([hidden])) #combat{display:none}

/* Minimal title: original pixel lettering over the living laboratory. */
#title{background:none;mix-blend-mode:screen}
.game-shell:has(#title:not([hidden])) #game{filter:brightness(.65)}
.title-content{inset:0;display:block}
#game-name{position:absolute;left:7%;top:13%;overflow:visible;margin:0;width:86%;aspect-ratio:6.9;line-height:1;text-shadow:none}
#game-name img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 46.5%;image-rendering:pixelated}
.menu{align-items:center;gap:14px;margin-top:48px}
.menu button{display:grid;place-items:center;min-width:156px;min-height:44px;padding:13px 20px;border:0;background:transparent;box-shadow:none;transition:color .15s}
.menu button:hover,.menu button:focus-visible{background:transparent;box-shadow:none;outline:none;color:#8dded4}
.title-bottom{justify-content:center;bottom:5%;font-size:9px;letter-spacing:1.5px;color:#acbfc0}
.pixel-label{display:inline-block;vertical-align:middle;overflow:visible}
.dialog button{min-height:38px;display:grid;place-items:center}.dialog h2 .pixel-label{width:180px;height:auto}
#skip-opening{position:absolute;right:22px;bottom:22px;z-index:5;padding:12px;background:#0b1422aa;color:#d0dcd9}
.game-shell:has(#skip-opening:not([hidden])) #touch{display:none}
@media(max-width:500px){.menu{margin-top:32px;gap:12px}.menu button{min-width:140px;min-height:44px}.title-bottom{font-size:8px;letter-spacing:1px}}

/* Two-line arcade credit, matching the earlier game title layout. */
.title-credit{display:block;white-space:nowrap;margin:28px 0 0;color:#e5e4d8}
.title-credit{font:400 32px/36px IsaMenuPixel,monospace;letter-spacing:2px;text-align:center;text-shadow:2px 2px #101a27}
.menu button{font:400 48px/54px IsaMenuPixel,monospace;letter-spacing:2px}
@media(max-width:500px),(max-height:500px){.menu{margin-top:24px;gap:8px}.menu button{padding:6px 12px;font-size:32px;line-height:36px;letter-spacing:1px}.title-credit{margin-top:18px;font-size:20px;line-height:24px;letter-spacing:0}}

/* Match the title menu's original chunky pixel type on the pause overlay. */
#pause h2,#pause button,#pause p{font-family:IsaMenuPixel,monospace;font-weight:400;text-shadow:2px 2px #080e15}
#pause h2{font-size:32px;line-height:36px;letter-spacing:2px}
#pause button{font-size:16px;line-height:18px;letter-spacing:1px}
#pause p{font-size:8px;line-height:12px;letter-spacing:1px;text-transform:uppercase;text-align:center;max-width:90%}
@media(max-width:500px),(max-height:500px){#pause h2{font-size:24px;line-height:27px}}

/* Two crops of the approved artwork meet without stretching or redrawing it. */
.logo-half{position:absolute;inset:0;visibility:hidden}
.logo-blue{clip-path:polygon(0 0,50.3% 0,45.3% 100%,0 100%)}
.logo-steel{clip-path:polygon(50.3% 0,100% 0,100% 100%,45.3% 100%)}
#title.logo-enter .logo-half{animation-duration:1.15s;animation-delay:.12s;animation-timing-function:cubic-bezier(.18,.72,.22,1);animation-fill-mode:both}
#title.logo-enter .logo-blue{animation-name:blue-arrive}
#title.logo-enter .logo-steel{animation-name:steel-arrive}
@keyframes blue-arrive{from{transform:translateX(-110%);visibility:visible}to{transform:translateX(0);visibility:hidden}}
@keyframes steel-arrive{from{transform:translateX(110%);visibility:visible}to{transform:translateX(0);visibility:hidden}}
#title.logo-enter .logo-intact{animation:logo-assembled 1.27s step-end both}
@keyframes logo-assembled{from{visibility:hidden}to{visibility:visible}}
@media(prefers-reduced-motion:reduce){#title.logo-enter .logo-half,#title.logo-enter .logo-intact{animation:none}}

/* Place title, menu and credit independently across the full square stage. */
#title .menu{position:absolute;left:0;right:0;top:37.5%;transform:translateY(-50%);margin:0}
#title .title-credit{position:absolute;left:0;right:0;top:84.5%;transform:translateY(-50%);margin:0}
#title .title-bottom{bottom:4%}

@media(max-width:350px),(max-height:350px){#title .title-credit{font-size:18px;line-height:22px}}

/* Selected title direction B: Cinematic. */
.game-shell{container-type:inline-size}
#game-name{left:11%;top:24%;width:78%}
#title .menu{top:80%;margin:0}
#title .menu button{position:relative;font-size:clamp(16px,3.4cqw,26px);line-height:1.125;padding:8px 12px;min-width:0;min-height:44px;letter-spacing:3px;text-shadow:2px 2px #0a1420}
#title .title-credit{top:92%;left:0;right:0;font:400 clamp(8px,1.8cqw,14px)/1.4 IsaMenuPixel,monospace;letter-spacing:1px;color:#a5b1b6}
.copyright-symbol{font-family:monospace}
#title .title-bottom{top:calc(80% + 2.8cqw);bottom:auto;font-size:clamp(6px,1.25cqw,9px);letter-spacing:1px;color:#84969c}
#title.logo-enter .logo-intact{animation:logo-assembled 1.27s step-end both,steel-glint .27s 1.27s steps(3,end) both}
@keyframes steel-glint{0%,100%{filter:brightness(1)}40%{filter:brightness(1.65)}}
@media(prefers-reduced-motion:reduce){#title.logo-enter .logo-intact{animation:none}}

/* Single logo-assembly flash, followed by the playable title menu. */
#title.logo-preparing .menu{visibility:hidden;pointer-events:none}
#title::after{content:"";position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:5}
#title.logo-flash::after{animation:title-flash .3s ease-out both}
@keyframes title-flash{0%{opacity:.9}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){#title.logo-flash::after{animation:none}}

/* Black -> isolated logo -> white reveal -> title details. */
#title.logo-dark{background:#000;mix-blend-mode:normal}
#title.logo-dark:not(.logo-enter) #game-name{opacity:0}
#title.logo-preparing .title-credit,#title.logo-preparing .title-bottom{visibility:hidden}
#title.logo-enter #game-name{animation:logo-black-hold .45s step-end both}
#title.logo-enter .logo-half{animation-delay:.45s}
#title.logo-enter .logo-intact{animation:logo-assembled 1.6s step-end both,steel-glint .27s 1.6s steps(3,end) both}
@keyframes logo-black-hold{from{opacity:0}to{opacity:1}}
#scene-fade{position:absolute;inset:0;z-index:10;background:#000;opacity:0;pointer-events:auto}
@media(prefers-reduced-motion:reduce){#title.logo-enter #game-name,#title.logo-enter .logo-intact,#title.logo-enter .logo-half{animation:none}}

/* A narrow reflection crosses the original pixels; the assembled logo stays still. */
#game-name .logo-shine{pointer-events:none;opacity:0;filter:brightness(1.9);clip-path:polygon(-24% 0,-12% 0,-20% 100%,-32% 100%)}
#title.logo-enter .logo-shine{animation:steel-reflection 6.5s 3s linear infinite}
@keyframes steel-reflection{
  0%{opacity:.48;clip-path:polygon(-24% 0,-12% 0,-20% 100%,-32% 100%)}
  18%{opacity:.48;clip-path:polygon(132% 0,144% 0,136% 100%,124% 100%)}
  18.01%,100%{opacity:0;clip-path:polygon(132% 0,144% 0,136% 100%,124% 100%)}
}
@media(prefers-reduced-motion:reduce){#title.logo-enter .logo-shine{animation:none;display:none}}

/* One white pixel typeface for the title menu, recommendation and credit. */
#title .menu button,#title .title-bottom,#title .title-credit{font-family:IsaMenuPixel,monospace;font-weight:400;color:#fff}
#title .copyright-symbol{font-family:inherit}

/* A small arcade cursor marks the single menu choice. */
#title #play::before{content:"";position:absolute;right:calc(100% - 4px);top:50%;transform:translateY(-50%);width:clamp(8px,1.6cqw,12px);aspect-ratio:4/7;background:#fff;clip-path:polygon(0 0,25% 0,25% 14.286%,50% 14.286%,50% 28.571%,75% 28.571%,75% 42.857%,100% 42.857%,100% 57.143%,75% 57.143%,75% 71.429%,50% 71.429%,50% 85.714%,25% 85.714%,25% 100%,0 100%);animation:menu-cursor-blink 1.1s step-end infinite;pointer-events:none}
@keyframes menu-cursor-blink{0%,100%{opacity:1}55%{opacity:0}}
@media(prefers-reduced-motion:reduce){#title #play::before{animation:none}}

/* The cinematic is drawn on the canvas; only the final choices sit above it. */
#ending{background:transparent;backdrop-filter:none;flex-direction:row;align-items:flex-end;justify-content:center;padding:0 4% 7%;gap:12px;pointer-events:none;animation:ending-choices .8s ease both}
#ending button{pointer-events:auto;padding:8px 12px;font-size:10px;letter-spacing:1px}
@keyframes ending-choices{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}