@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500;1,600&display=swap');
:root{color-scheme:dark;--ink:#17111f;--paper:#f2e9d8;--muted:#b9aaba;--pink:#ef8dcc;--border:#493448}*{box-sizing:border-box}body{margin:0;background:var(--ink);color:var(--paper);font-family:'DM Sans',Arial,sans-serif;overflow-x:hidden}body:before{content:'';position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 90% 0,#4b25422e,transparent 55%);z-index:-1}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid #f7b7df;outline-offset:5px}.site-header{max-width:1480px;margin:auto;display:flex;justify-content:space-between;align-items:center;padding:29px 5vw;border-bottom:1px solid var(--border)}.wordmark{font-size:14px;font-weight:700;letter-spacing:2.8px}.wordmark span{font-weight:400;margin-left:8px;color:var(--pink)}.journal-link{font-size:13px;color:var(--muted)}main{max-width:1480px;margin:auto;padding:40px 5vw 50px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:2.4px;color:var(--pink);margin:0 0 15px}.play-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:26px}.play-heading h1{font-family:'Playfair Display',Georgia,serif;font-weight:500;font-size:clamp(28px,3.5vw,48px);line-height:1.2;margin:0}.play-heading h1 em{color:#dda0c9;font-weight:500}.build-tag{font-size:9px;letter-spacing:1.8px;border:1px solid #78526c;border-radius:3px;padding:9px 12px;white-space:nowrap}.game-shell{position:relative;aspect-ratio:16/9;background:#1b152c;border:1px solid #69506a;box-shadow:0 25px 90px #0005;overflow:hidden;isolation:isolate}.game-shell:fullscreen{width:100vw;height:100dvh;aspect-ratio:auto;border:0;display:flex;align-items:center;justify-content:center;background:#100d16}.game-shell:fullscreen canvas{max-height:100dvh;object-fit:contain}canvas{display:block;width:100%;height:100%;outline:none;touch-action:none}.hud{position:absolute;left:3%;right:3%;top:4%;display:flex;align-items:start;justify-content:space-between;pointer-events:none;text-shadow:0 2px 5px #0009}.hud[hidden]{display:none}.hud-left{display:flex;flex-direction:column;gap:7px}.hud-name{font-family:Georgia,serif;font-size:clamp(10px,1.1vw,17px);letter-spacing:3px}.health{display:flex;gap:5px}.health span{display:block;width:23px;height:5px;background:#9a79944d;transform:skew(-20deg)}.health span.full{background:linear-gradient(90deg,#e780c0,#ffb4d9);box-shadow:0 0 10px #e953a652}.hud-left>span:last-child{font-size:8px;color:#e4cedd;letter-spacing:1.8px}.hud-center{text-align:center;min-width:28%;padding-top:3px}.hud-center>span{font-size:clamp(6px,.7vw,10px);letter-spacing:2px;color:#e4d8e6}.progress-track{height:2px;background:#d8b4d32e;margin-top:10px}.progress-track span{display:block;width:0;height:100%;background:#f69cd7;box-shadow:0 0 7px #ee80c9}.hud-right{display:grid;grid-template-columns:auto auto;column-gap:16px;text-align:right;align-items:center}.hud-right>span{font-family:Georgia,serif;font-size:25px;line-height:1}.hud-right small{grid-row:2;grid-column:1;font-size:7px;letter-spacing:1.4px;color:#d6c1d4}.icon-button{grid-column:2;grid-row:1/3;pointer-events:auto;background:#24172a80;color:#f0d8e9;border:1px solid #9f7c9366;border-radius:50%;width:33px;height:33px;font-size:12px;display:grid;place-items:center}.announcement{position:absolute;top:21%;left:10%;right:10%;text-align:center;color:#fce4f7;font-family:Georgia,serif;font-size:clamp(15px,2vw,28px);letter-spacing:2px;pointer-events:none;opacity:0;transform:translateY(-8px);transition:opacity .2s,transform .2s;text-shadow:0 2px 20px #af208c,0 2px 4px #000}.announcement.visible{opacity:1;transform:translateY(0)}.overlay{position:absolute;inset:0;display:flex;align-items:center;background:linear-gradient(90deg,#181020f5 0%,#201226e8 35%,#1b152c66 69%,#1b152c15);overflow:hidden}.overlay[hidden]{display:none}.overlay-card{position:relative;z-index:2;width:53%;padding:5% 0 5% 6%}.overlay-card h2{font-family:'Playfair Display',Georgia,serif;font-size:clamp(24px,4.6vw,66px);font-weight:500;line-height:1.03;margin:18px 0 22px;letter-spacing:-1.5px}.overlay-card h2 em{font-weight:500;color:#f5b7da}.overlay-card>p:not(.overlay-note){font-size:clamp(10px,1.1vw,15px);line-height:1.75;max-width:360px;color:#d0bfcf;margin-bottom:28px}.primary-button{background:#f0d8c3;color:#241325;border:0;padding:15px 24px;min-width:215px;text-align:left;font-size:12px;font-weight:700;display:flex;justify-content:space-between;align-items:center;gap:25px;transition:background .2s,transform .2s}.primary-button:hover{background:#ffedda;transform:translateY(-2px)}.primary-button span{font-size:21px;font-weight:400}.overlay-note{font-size:9px;color:#b29aad;letter-spacing:.6px;margin-top:17px}.overlay-art{position:absolute;width:69%;height:100%;right:-7%;bottom:0;background-image:url('assets/psylocke-running-slash.png');background-position:60% 50%;background-size:cover;opacity:.73;mask-image:linear-gradient(90deg,transparent,#000 30%);z-index:0}.below-game{display:flex;justify-content:space-between;align-items:center;gap:30px;margin-top:21px}.below-game p{font-size:12px;line-height:1.7;color:var(--muted);margin:0}.below-game strong{font-weight:500;color:#e9d9e4}.text-button{font-size:10px;color:#e9c6db;letter-spacing:1px;background:none;border:0;white-space:nowrap;padding:10px 0}.controls{margin-top:29px;padding:23px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);display:grid;grid-template-columns:1.2fr 1.2fr 1.1fr 1fr 1.3fr;gap:20px}.controls>div>span{font-size:8px;color:#b496ad;letter-spacing:1.7px}.controls p{margin:12px 0 0;white-space:nowrap}kbd{font:10px 'DM Sans',Arial,sans-serif;display:inline-flex;min-width:25px;height:24px;align-items:center;justify-content:center;border:1px solid #695067;border-radius:3px;color:#eee0e8;padding:2px 7px;background:#251c2b}.controls i{font-size:9px;font-style:normal;color:#806b80;padding:0 3px}.prototype-note{font-size:10px;line-height:1.8;color:#8b798c;max-width:800px;margin:19px 0 0}footer{border-top:1px solid var(--border);max-width:1480px;margin:auto;padding:24px 5vw;display:flex;justify-content:space-between;font-size:9px;letter-spacing:1.5px;color:#a28b9f}footer span:last-child{letter-spacing:0;font-family:Georgia,serif;font-style:italic}.touch-controls{display:none;position:absolute;bottom:5%;left:3%;right:3%;justify-content:space-between;align-items:end;pointer-events:none}.touch-group{display:flex;gap:9px;pointer-events:auto}.touch-controls button{width:52px;height:52px;border:1px solid #dba3cb77;border-radius:50%;background:#29192dcc;color:#ffe1f1;touch-action:none;user-select:none;-webkit-user-select:none;font-size:15px}.touch-controls .actions button{font-size:8px;font-weight:700;letter-spacing:1px}.touch-controls .actions button:last-child{width:65px;height:65px;background:#7f2b6da8;border-color:#f493d4aa}.touch-controls button:active,.touch-controls button.held{background:#af488dba}.game-shell[data-state="running"] .touch-controls{display:flex}.game-shell[data-state="running"] .touch-controls:not(.show-touch){display:none}@media(pointer:coarse){.game-shell[data-state="running"] .touch-controls{display:flex!important}.overlay-note{font-size:8px}.controls{grid-template-columns:repeat(3,1fr)}.hud-right>span{font-size:20px}}@media(max-width:700px){.site-header{padding:21px 5vw}.wordmark{font-size:10px;letter-spacing:2px}.journal-link{font-size:10px}main{padding-top:28px}.play-heading{align-items:start;margin-bottom:20px}.play-heading h1{max-width:250px;font-size:30px}.build-tag{font-size:7px;letter-spacing:1px;padding:7px}.eyebrow{font-size:7px;letter-spacing:1.4px;margin-bottom:10px}.game-shell{margin-left:-5.55%;margin-right:-5.55%;border-left:0;border-right:0}.overlay-card{width:60%;padding-left:5%}.overlay-card h2{font-size:clamp(24px,6vw,40px);letter-spacing:-.5px;margin:8px 0 12px}.overlay-card>p:not(.overlay-note){font-size:9px;line-height:1.4;margin-bottom:12px;max-width:230px}.primary-button{min-width:0;padding:8px 12px;font-size:9px;gap:15px}.primary-button span{font-size:16px}.overlay-note{font-size:6px;margin-top:9px}.below-game{align-items:start;gap:15px}.below-game p{font-size:10px}.text-button{font-size:8px}.controls{grid-template-columns:repeat(2,1fr);gap:23px;padding:20px 0}.controls>div>span{font-size:7px}.controls p{margin-top:9px}.prototype-note{font-size:9px}.hud-left>span:last-child{font-size:5px}.hud-center{display:none}.health span{width:14px;height:4px}.health{gap:3px}.hud-name{font-size:8px;letter-spacing:2px}.hud-left{gap:4px}.hud-right{column-gap:9px}.hud-right>span{font-size:17px}.hud-right small{font-size:5px}.icon-button{width:26px;height:26px;font-size:9px}.touch-controls button{width:38px;height:38px;font-size:12px}.touch-controls .actions button{font-size:6px}.touch-controls .actions button:last-child{width:47px;height:47px}.touch-group{gap:6px}footer{font-size:7px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.view-actions{display:flex;gap:20px;align-items:center;flex-shrink:0}@media(max-width:700px){.view-actions{flex-direction:column;gap:0;align-items:end}.view-actions .text-button{padding:5px 0}}
.game-shell{aspect-ratio:10/7}.game-shell:fullscreen{aspect-ratio:auto}.game-shell[data-state="loading"] canvas,.game-shell[data-state="error"] canvas{opacity:0}.primary-button:disabled{cursor:wait;opacity:.55;transform:none}.prototype-note{max-width:900px}.hud-center{min-width:25%}.overlay-card{width:57%}.overlay-art{background-position:66% 50%}.game-shell[data-state="running"] .touch-controls{bottom:3%}
.title-logo{display:block;width:390px;max-width:60vw;height:auto}.menu-logo{display:block;width:490px;max-width:100%;height:auto}.play-heading .game-title{line-height:0;max-width:none}.overlay-card h2:has(.menu-logo){line-height:0;margin-top:4px}@media(max-width:700px){.title-logo{width:270px;max-width:64vw}.menu-logo{width:320px}.overlay-card h2:has(.menu-logo){font-size:0;margin:8px 0 14px}}
/* Keep the game and its painted menu logo in view on ordinary desktop heights. */
main{padding-top:20px;padding-bottom:28px}.play-heading{margin-bottom:14px;align-items:center}.play-heading .eyebrow{margin-bottom:0}.play-heading .game-title{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.game-shell{width:100%;max-width:calc((100dvh - 170px)*10/7);margin-inline:auto;aspect-ratio:10/7}.game-shell canvas{aspect-ratio:10/7}.game-shell:fullscreen{width:100vw;max-width:none;aspect-ratio:auto;margin:0}.below-game{margin-top:16px}@media(max-width:700px){main{padding-top:20px}.game-shell{width:auto;max-width:none;margin-left:-5.55%;margin-right:-5.55%;aspect-ratio:10/7}.play-heading{margin-bottom:14px}}
/* Duck / psychic controls and cooldown remain ordinary accessible interface elements. */
.psi-status{font-size:9px!important;letter-spacing:1.3px!important;color:#d5afea!important}.psi-status[data-ready="true"]{color:#b5f2ef!important}.controls{grid-template-columns:repeat(4,minmax(0,1fr))}.touch-group.actions{display:grid;grid-template-columns:repeat(2,48px);gap:7px}.touch-controls .actions button,.touch-controls .actions button:last-child{width:48px;height:48px;font-size:8px}.touch-controls [data-action="duck"]{font-size:8px;font-weight:700;letter-spacing:.5px}.touch-controls [data-action="psi"]{background:#713c9ed9;border-color:#c6a0f0}.touch-controls [data-action="slash"]{background:#7f2b6da8;border-color:#f493d4aa}@media(max-width:700px){.controls{grid-template-columns:repeat(2,minmax(0,1fr))}.touch-controls{left:3%;right:3%}.touch-group{gap:5px}.touch-group.actions{grid-template-columns:repeat(2,36px);gap:5px}.touch-controls button,.touch-controls .actions button,.touch-controls .actions button:last-child{width:36px;height:36px;font-size:6px}.touch-controls [data-action="left"],.touch-controls [data-action="right"]{font-size:11px}.touch-controls [data-action="duck"]{font-size:6px}.psi-status{font-size:6px!important;letter-spacing:.5px!important}}
#checkpoint-label{font-size:8px;letter-spacing:1.8px;color:#e4cedd}.controls{grid-template-columns:repeat(7,minmax(0,1fr));gap:14px}.controls p{white-space:normal;line-height:2.2}@media(max-width:1100px){.controls{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:700px){#checkpoint-label{font-size:5px;letter-spacing:1.2px}.controls{grid-template-columns:repeat(2,minmax(0,1fr))}}