:root{color-scheme:dark;--gold:#e6bd79;--ivory:#f4e3c4;--ink:#101b1c;--display:'Cormorant Garamond',Georgia,serif;--text:'Manrope',sans-serif}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#0c1315}body{font-family:var(--text);color:var(--ivory);-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none}button:focus-visible{outline:2px solid #fff0c1;outline-offset:5px}button:disabled{opacity:.35;cursor:default}h1,h2,p{margin:0}button:focus:not(:focus-visible){outline:none}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#runner{position:relative;isolation:isolate;height:100%;height:100svh;width:100%;max-width:640px;margin:auto;overflow:hidden;touch-action:none;background:#152025}
.hallway{position:absolute;inset:-2%;background:#122126 url('/assets/runner/hallway.webp') center 40% /cover no-repeat;transition:filter 1.2s,transform .4s;z-index:-3}.hallway::after{content:'';position:absolute;inset:0;background:linear-gradient(#070e1180,transparent 35%,#120d0733 65%,#0b1014b0)}
#world{position:absolute;inset:0;width:100%;height:100%;z-index:-2}
#track{position:absolute;inset:0;width:100%;height:100%;z-index:-1}.scene-vignette{position:absolute;inset:0;pointer-events:none;z-index:1;box-shadow:inset 0 0 95px #03080a90;background:linear-gradient(#07121665,transparent 21% 74%,#061012bd)}
#ui{position:absolute;inset:0;z-index:4;pointer-events:none}#ui button,#ui [role=dialog]{pointer-events:auto}.eyebrow{font-size:10px;letter-spacing:.23em;text-transform:uppercase;color:#d3b47e;font-weight:600}.ornament{display:flex;align-items:center;justify-content:center;gap:12px;color:var(--gold);font-size:12px;margin:20px 0}.ornament:before,.ornament:after{content:'';width:39px;height:1px;background:#b7955969}
.intro-heading{position:absolute;top:max(7.5%,35px);left:20px;right:20px;text-align:center;animation:rise .8s both}.intro-heading h1{font:600 clamp(66px,14vw,91px)/.9 var(--display);letter-spacing:-.04em;color:#f2d49a;text-shadow:0 4px 30px #000;margin:20px 0 15px}.intro-heading .subtitle{font:500 23px var(--display);text-shadow:0 2px 10px #000}
.intro-bottom{position:absolute;left:25px;right:25px;bottom:max(4%,env(safe-area-inset-bottom,20px));text-align:center;animation:rise .8s .15s both}.intro-story{font:500 23px/1.18 var(--display);text-shadow:0 2px 15px #000;margin:0 auto 18px;max-width:350px}.intro-story em{color:#f5d698;font-style:normal}.instruction{font-size:12px;line-height:1.8;color:#d9d0bd}.instruction strong{color:#f7e7c9;font-weight:600}.gold-button{position:relative;min-height:56px;width:100%;border:1px solid #e7c080;border-radius:3px;background:linear-gradient(115deg,#e8c58a,#c89954);color:#33220f;font:700 24px var(--display);box-shadow:inset 0 0 0 3px #57391e1a,0 3px 0 #65421e,0 4px 25px #0003;padding:13px 18px;transition:transform .15s,filter .15s}.gold-button:hover{filter:brightness(1.1)}.gold-button:active{transform:translateY(2px)}.start-button{max-width:330px;margin:22px auto 13px;display:flex;justify-content:center;align-items:center;gap:22px}.start-button span{font-family:var(--text);font-size:21px;font-weight:400}.tiny-note{font-size:10px;line-height:1.6;color:#b2aa96}.sound-toggle{display:inline-flex;gap:6px;align-items:center;border:0;background:none;color:#e0cfaf;font-size:11px;min-height:44px;padding:5px 12px}.sound-toggle svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5}
.cat-duo{position:absolute;z-index:2;width:240px;height:230px;left:50%;top:34%;transform:translateX(-50%);transform-origin:50% 90%;pointer-events:none;will-change:transform}.cat{position:absolute;filter:drop-shadow(0 9px 5px #0007)}.cat img{display:block;width:100%;height:100%;object-fit:fill}.maxi{width:158px;height:165px;left:0;bottom:29px}.maxi img{clip-path:polygon(34% 2%,46% 8%,52% 8%,63% 10%,70% 10%,76% 15%,98% 15%,93% 25%,91% 32%,82% 39%,78% 44%,80% 52%,85% 55%,90% 64%,92% 74%,88% 90%,90% 99%,4% 99%,12% 85%,13% 70%,28% 60%,32% 48%,37% 43%,30% 37%,25% 29%,28% 16%)}.josephine{width:188px;height:136px;right:-26px;bottom:24px}.josephine img{clip-path:polygon(46% 46%,57% 56%,68% 51%,78% 53%,83% 60%,86% 74%,87% 87%,81% 99%,39% 99%,37% 91%,39% 83%,40% 74%,44% 67%)}.cat-names{position:absolute;bottom:0;left:0;right:0;text-align:center;color:#e8c98f;font:italic 17px var(--display);text-shadow:0 2px 7px #000}.stolen-envelope{position:absolute;width:67px;height:44px;left:104px;bottom:58px;transform:rotate(-10deg);border:1px solid #c5a46b;background:#e0c393;box-shadow:0 4px 7px #0007}.stolen-envelope::before{content:'';position:absolute;inset:0;background:linear-gradient(148deg,transparent 49%,#a9895766 50%,transparent 52%),linear-gradient(212deg,transparent 49%,#a9895766 50%,transparent 52%)}.stolen-envelope i{position:absolute;inset:0;clip-path:polygon(0 0,100% 0,50% 62%);background:#eed8b2;border-bottom:1px solid #b99762}.stolen-envelope b{position:absolute;left:27px;top:20px;width:14px;height:14px;display:grid;place-items:center;border-radius:50%;background:#8c322a;color:#ddb97a;font-size:9px}
[data-screen=running] .cat-names,[data-screen=paused] .cat-names{display:none}[data-screen=running] .cat{animation:cat-run .3s infinite alternate}[data-screen=running] .josephine{animation-delay:-.16s}[data-screen=running] .stolen-envelope{animation:envelope-run .4s infinite alternate}[data-screen=failed] .cat-duo{opacity:.5;transition:opacity .5s}
.run-hud{position:absolute;top:max(23px,env(safe-area-inset-top));left:23px;right:23px;display:flex;align-items:center;gap:17px}.chase-progress{flex:1}.chase-progress .eyebrow{font-size:8px;letter-spacing:.17em}.progress-line{height:3px;background:#ddbb7e25;margin:10px 0;position:relative}.progress-fill{height:100%;width:0;background:#e5c38b;box-shadow:0 0 7px #e7ba7570}.progress-fill::after{content:'';float:right;width:5px;height:5px;margin-top:-1px;border-radius:50%;background:#ffe8b8}.time-left{font-variant-numeric:tabular-nums;font-size:11px;color:#eddfc6;letter-spacing:.05em}.lives{display:flex;gap:5px;margin-top:7px}.life{width:13px;height:13px;border:1px solid #e1c38b;transform:rotate(45deg);background:#d7b77e}.life.lost{background:transparent;opacity:.26}.pause-button{width:44px;height:44px;border:1px solid #e7c78955;border-radius:50%;background:#0b161b70;display:grid;place-items:center}.pause-button svg{height:16px;width:16px;fill:currentColor}
.run-message{position:absolute;left:25px;right:25px;top:16%;text-align:center;font:italic 23px/1.2 var(--display);color:#f4dbad;text-shadow:0 3px 12px #000;min-height:29px}.run-controls{position:absolute;bottom:max(23px,env(safe-area-inset-bottom));left:23px;right:23px;display:flex;align-items:end;justify-content:space-between;gap:14px}.steer{width:77px;height:65px;border:1px solid #e3c38d66;background:linear-gradient(#13232bb3,#0b141cdb);border-radius:5px;box-shadow:inset 0 0 20px #e4bf6810,0 3px 15px #0004;display:grid;place-items:center;touch-action:none}.steer svg{width:30px;height:23px;stroke:#f4d8a0;stroke-width:1.4;fill:none}.steer:active{background:#a47c36aa}.lane-indicator{display:flex;gap:7px;align-items:center;align-self:center;margin-top:5px}.lane-indicator i{width:24px;height:3px;background:#ddc89d30;transition:background .12s,box-shadow .12s}.lane-indicator i.active{background:#f6d18d;box-shadow:0 0 10px #e7c38c66}.controls-hint{position:absolute;bottom:83px;left:0;right:0;text-align:center;font-size:9px;color:#cabd9c;letter-spacing:.06em;pointer-events:none}.bottom-status{display:flex;flex-direction:column;gap:13px;text-align:center;padding-bottom:7px}.bottom-status span{font-size:9px;color:#cfbe9b}.upcoming{position:absolute;left:20px;right:20px;bottom:19%;text-align:center;font-size:10px;letter-spacing:.02em;color:#cbbc9e;text-shadow:0 2px 9px #000}
.screen-shade{position:absolute;inset:0;background:linear-gradient(#07121588,#08121888 42%,#071017ed);pointer-events:none}.result-panel{position:absolute;left:24px;right:24px;bottom:max(7%,28px);text-align:center;animation:rise .7s both}.result-panel h2{font:600 clamp(44px,10vw,62px)/.95 var(--display);letter-spacing:-.02em;color:#f0d49c;margin:16px 0}.result-panel p{font-size:12px;line-height:1.9;color:#d4c6ac;max-width:350px;margin:0 auto}.result-panel .gold-button{max-width:330px;margin:24px auto 12px}.quiet-button{min-height:44px;padding:10px 18px;background:none;border:0;color:#c8b894;font-size:11px;text-decoration:underline;text-underline-offset:5px}.pause-panel{top:33%;bottom:auto}.pause-panel h2{font-size:52px}.caught-panel{bottom:6%}[data-screen=caught] .cat-duo{top:22%}.caught-panel .eyebrow{color:#e1bb79}.envelope-display{position:relative;width:210px;height:133px;margin:28px auto 18px;perspective:600px;filter:drop-shadow(0 10px 22px #0006)}.envelope-body{position:absolute;inset:0;border:1px solid #b99963;background:#dcc295;box-shadow:inset 0 0 30px #9c794a36}.envelope-body:after{content:'';position:absolute;inset:0;background:linear-gradient(148deg,transparent 49.4%,#a5865555 50%,transparent 50.8%),linear-gradient(212deg,transparent 49.4%,#a5865555 50%,transparent 50.8%)}.envelope-flap{position:absolute;inset:0;background:#e9d2ac;clip-path:polygon(0 0,100% 0,50% 68%);transform-origin:top;z-index:2}.wax-seal{position:absolute;left:calc(50% - 20px);top:65px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#8e3a30;color:#e0b783;border:3px double #b45b45;box-shadow:1px 3px 3px #623c3755;z-index:3;font-size:19px}.envelope-letter{position:absolute;inset:8px 10px;background:#f5ead0;z-index:1;transform:translateY(0);color:#566c7a;display:grid;place-items:center;font:italic 27px var(--display)}
[data-screen=opening] .envelope-display{animation:envelope-anticipation 6.5s ease-in-out both}[data-screen=opening] .envelope-flap{animation:flap-open 1.4s 2.1s ease-in-out forwards}[data-screen=opening] .wax-seal{animation:seal-away .65s 1.3s ease-in forwards}[data-screen=opening] .envelope-letter{animation:letter-rise 1.65s 3.5s ease-in-out forwards}[data-screen=opening] .hallway{filter:brightness(.6)}[data-screen=opening][data-opening-paused=true] .opening-panel *{animation-play-state:paused!important}.opening-word{font:italic 28px var(--display);text-align:center;color:#ead7b3;margin-top:35px}.opening-panel{position:absolute;left:20px;right:20px;top:48%;transform:translateY(-20%)}
@keyframes envelope-anticipation{from{transform:scale(1)}to{transform:scale(1.07)}}
[data-screen=reveal] .hallway{filter:brightness(.4) saturate(.65)}.reveal-light{position:absolute;inset:-30%;background:conic-gradient(from 0deg,transparent,#7fc7ff20,transparent 17%,#d6ecff1a,transparent 37%,#7fc7ff20,transparent 60%,#fff4c51a,transparent 85%);animation:light-turn 35s linear infinite;mix-blend-mode:screen;pointer-events:none}.reveal-glow{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 41%,#9bd7ff45,transparent 60%);animation:reveal-bloom 2s both}.reveal-heading{position:absolute;top:12%;left:20px;right:20px;text-align:center;animation:reveal-arrive 1.3s both}.reveal-heading .eyebrow{color:#d2eaff;font-size:9px}.reveal-heading h2{font:500 clamp(58px,14vw,88px)/.9 var(--display);letter-spacing:-.025em;color:#e1f2ff;margin:23px 0 21px;text-shadow:0 0 40px #b8dcff44}.reveal-heading h2 strong{display:block;font-weight:600;font-size:1.47em;color:#a5d8ff;margin-top:8px;text-shadow:0 0 45px #89c9ff66}.reveal-heading p{font:italic 26px var(--display);color:#d3e9f6}.reveal-bottom{position:absolute;left:25px;right:25px;bottom:max(6%,28px);text-align:center;animation:rise 1.3s .5s both}.reveal-bottom p{font:500 25px/1.25 var(--display);max-width:300px;margin:0 auto 20px;color:#f0e8d8}.reveal-bottom .quiet-button{color:#bed7e5}.reveal-bottom .eyebrow{font-size:9px;color:#b4d1e3;margin-bottom:17px}[data-screen=reveal] .cat-duo{top:44%;animation:rise .9s .4s both}[data-screen=reveal] .cat-names{color:#dbedf7}[data-screen=reveal] .stolen-envelope{display:none}
#impact{position:absolute;inset:0;pointer-events:none;z-index:6;opacity:0;box-shadow:inset 0 0 90px #e6aa7a;background:#bf693d22}#impact.hit{animation:impact .55s both}#celebration{position:fixed;inset:0;width:100%;height:100%;z-index:8;pointer-events:none}.noscript{position:fixed;inset:30% 20px auto;padding:25px;background:#13242c;color:var(--ivory);text-align:center}
@keyframes rise{from{opacity:0;translate:0 15px}to{opacity:1;translate:0 0}}@keyframes cat-run{from{translate:0 0;rotate:-1deg}to{translate:0 -6px;rotate:1deg}}@keyframes envelope-run{to{translate:0 -5px;rotate:3deg}}@keyframes impact{0%{opacity:0}20%{opacity:.8}100%{opacity:0}}@keyframes flap-open{to{transform:rotateX(180deg);z-index:0}}@keyframes seal-away{to{translate:0 28px;rotate:20deg;opacity:0}}@keyframes letter-rise{to{transform:translateY(-76px)}}@keyframes light-turn{to{rotate:360deg}}@keyframes reveal-bloom{from{opacity:0}to{opacity:1}}@keyframes reveal-arrive{from{opacity:0;scale:.88;filter:blur(7px)}to{opacity:1;scale:1;filter:blur(0)}}
/* Sprite poses replace the original static cutout presentation in this variant.
   Each sheet has six leg phases followed by deliberate throw and catch poses. */
.cat-duo{width:420px;height:290px;top:28%;transform-origin:50% 0}
.cat{animation:none!important;filter:drop-shadow(0 8px 4px #0007)}
.cat canvas{display:block;width:100%;height:100%}
.maxi{width:210px;height:210px;left:5px;top:25px;bottom:auto}
.josephine{width:180px;height:226px;left:240px;top:40px;right:auto;bottom:auto}
.stolen-envelope{width:42px;height:28px;left:130px;top:112px;bottom:auto;animation:none!important;z-index:3;box-shadow:0 3px 4px #0006}
.stolen-envelope b{left:17px;top:13px;width:10px;height:10px;font-size:6px}
.stolen-envelope.in-flight{filter:drop-shadow(-3px 3px 3px #f7d39a55)}
.cat-duo:before,.cat-duo:after{content:'';position:absolute;bottom:50px;height:12px;background:#02080a60;border-radius:50%;filter:blur(5px)}
.cat-duo:before{left:30px;width:113px}.cat-duo:after{right:11px;width:116px}
[data-screen=running] .cat-duo::before,[data-screen=running] .cat-duo::after,
[data-screen=paused] .cat-duo::before,[data-screen=paused] .cat-duo::after,
[data-screen=failed] .cat-duo::before,[data-screen=failed] .cat-duo::after{display:none}
[data-screen=running] .cat,[data-screen=paused] .cat,[data-screen=failed] .cat{filter:none}
[data-screen=caught] .cat-duo,[data-screen=opening] .cat-duo{top:13%}
#runner:not([data-screen=intro]) .cat-names{display:none}
.envelope-body{z-index:2}.envelope-letter{z-index:1}.envelope-flap{z-index:3}.wax-seal{z-index:4}
.result-actions{display:flex;flex-direction:column;gap:12px;max-width:330px;margin:24px auto 14px}.result-actions .gold-button{margin:0;max-width:none}.secondary-button{width:100%;min-height:48px;padding:12px 14px;border:1px solid #d6b47b99;border-radius:3px;background:#132128c9;color:#f0d7aa;font-size:12px;line-height:1.5}.secondary-button:hover{background:#263435}.secondary-button:active{transform:translateY(1px)}.failed-panel .tiny-note{font-size:10px;color:#b2aa96}
[data-screen=reveal] .cat-duo{top:45%;animation:none}
[data-screen=caught] .stolen-envelope,[data-screen=opening] .stolen-envelope{display:none}
[data-screen=running] .hallway,[data-screen=paused] .hallway,[data-screen=failed] .hallway{background:none}
@media(min-width:641px){#runner{box-shadow:0 0 100px #0008}.intro-heading h1{font-size:90px}.hallway{background-position:center 40%}.intro-bottom{bottom:5%}.intro-story{font-size:25px}}
@media(max-height:700px){.intro-heading{top:5%}.intro-heading h1{font-size:65px;margin:13px 0 10px}.intro-heading .subtitle{font-size:20px}.intro-heading .ornament{margin:12px 0}.cat-duo{top:28%}.intro-bottom{bottom:2%}.intro-story{font-size:21px;margin-bottom:9px}.instruction{font-size:11px}.start-button{margin:13px auto 7px}.gold-button{min-height:50px;padding:10px 14px}.intro-bottom .tiny-note{font-size:9px}.result-panel{bottom:3%}.caught-panel h2{font-size:42px;margin:10px 0}.caught-panel .envelope-display{margin:14px auto 5px;width:160px;height:101px}.caught-panel .wax-seal{top:48px}.caught-panel .gold-button{margin-top:15px}[data-screen=caught] .cat-duo{top:15%}.reveal-heading{top:8%}.reveal-heading h2{font-size:61px;margin:17px 0}.reveal-heading p{font-size:21px}[data-screen=reveal] .cat-duo{top:39%}.reveal-bottom{bottom:3%}.reveal-bottom p{font-size:21px;margin-bottom:10px}.reveal-bottom .eyebrow{margin-bottom:8px}}
@media(max-height:700px){[data-screen=intro] .cat-duo{top:24%}[data-screen=intro] .cat-names{display:none}.intro-heading h1{font-size:60px}.intro-heading .subtitle{font-size:18px}[data-screen=caught] .cat-duo,[data-screen=opening] .cat-duo{top:max(7%,calc(100% - 560px))}}
@media(max-height:620px){.intro-heading{top:4%}.intro-heading h1{font-size:52px;margin:10px 0}.intro-heading .subtitle{font-size:17px}.intro-heading .ornament{margin:9px 0}.intro-story{font-size:18px}.instruction{font-size:10px;line-height:1.65}.intro-bottom{left:20px;right:20px}.start-button{margin:10px auto 6px}.intro-bottom .tiny-note{font-size:8.5px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.reveal-light{display:none}.cat{animation:none!important}}