:root{color-scheme:dark;font-family:system-ui,-apple-system,"Noto Sans TC",sans-serif;background:#0a181e;color:#f8f2e4;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 0,#224a48,transparent 70%),#0a181e}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;font-size:14px;color:inherit;border:1px solid #ffffff35;background:#173238;border-radius:12px;min-height:44px;padding:10px 16px;cursor:pointer}button:disabled{opacity:.55;cursor:wait}a{color:#d9e7db;text-underline-offset:4px}button:focus-visible,a:focus-visible,summary:focus-visible,.stage:focus-visible{outline:3px solid #ffcc67;outline-offset:4px}[hidden]{display:none!important}
.escape-shell{width:min(100% - 40px,960px);margin:auto;padding:20px 0 max(28px,env(safe-area-inset-bottom));}.topline,.heading,.hud,.journey{display:flex;align-items:center;justify-content:space-between;gap:12px}.topline{font-size:14px;margin-bottom:22px}.topline span{color:#a8c4c2}.heading{margin-bottom:20px}.eyebrow{font-size:12px;letter-spacing:.12em;color:#ecc47b;margin:0 0 6px}h1{font-size:clamp(27px,4vw,40px);letter-spacing:-.04em;margin:0;line-height:1.2}h2{font-size:clamp(24px,3vw,32px);margin:0;line-height:1.35}.hud{margin:0 0 8px}#lives{font-size:24px;letter-spacing:4px;color:#ff9990;white-space:nowrap}.hud strong{font-size:28px;font-variant-numeric:tabular-nums}.hud small{font-size:14px;color:#d2dbce;margin-left:7px;font-weight:500}.journey{font-size:14px;color:#c5d9d6;margin:10px 0 7px}#journey{display:block;appearance:none;width:100%;height:5px;border:0;border-radius:3px;overflow:hidden;background:#294449;margin-bottom:14px}#journey::-webkit-progress-bar{background:#294449}#journey::-webkit-progress-value{background:#ffc767}#journey::-moz-progress-bar{background:#ffc767}
.stage{position:relative;width:100%;aspect-ratio:2;isolation:isolate;overflow:hidden;border-radius:18px;border:1px solid #648580;box-shadow:0 16px 44px #0004;touch-action:none;user-select:none;-webkit-user-select:none;background:#122b2c}.backdrop{position:absolute;inset:0;z-index:-2;background:url('/game-assets/apartment-night.webp') repeat-x 0 0/auto 100%;filter:brightness(.9);transition:filter .8s}.stage[data-area=window] .backdrop{filter:brightness(1.05) hue-rotate(12deg)}.stage[data-area=chase] .backdrop{filter:brightness(.82) sepia(.25)}.floor{position:absolute;bottom:0;height:13.333%;width:100%;background:linear-gradient(#10251b33,#10251b88);border-top:1px solid #e8da9840;z-index:-1}
.world{--finish-cat-x:67%;position:absolute;inset:0;width:100%;height:100%;isolation:isolate}.cat{position:absolute;width:15%;height:23.333%;left:18.542%;bottom:13.333%;z-index:4;transform:translateZ(0)}.cat img{width:100%;height:100%;object-fit:contain;object-position:center bottom;position:absolute;inset:0}.cat.invulnerable{opacity:.65;filter:drop-shadow(0 0 7px #ff8d70)}
.entity{position:absolute;pointer-events:none;z-index:3}.entity img{width:100%;height:100%;object-fit:contain;object-position:center bottom}.entity.tuna{filter:drop-shadow(0 1px 5px #0006)}.entity.high img{filter:drop-shadow(0 0 8px #ffe9a4)}.entity.high b{position:absolute;right:-5%;top:-10%;background:#ffd073;color:#342308;border-radius:5px;padding:1px 4px;font-size:clamp(10px,1.3vw,13px);line-height:1.3}.entity.vacuum.warning:after{content:"!";position:absolute;left:36%;top:-25%;font-size:clamp(14px,2vw,26px);font-weight:900;color:#ff876c;text-shadow:0 0 8px #000}.entity.vacuum.charging{filter:drop-shadow(5px 0 4px #ff5c4280)}.entity.box.warning img{transform:rotate(-9deg)}.entity.box.charging img{transform:rotate(9deg)}
.stage[data-phase=escaped] .cat{transition:left .7s ease}
.elder{position:absolute;left:-3%;bottom:10%;width:19%;height:66%;z-index:2;transition:left 1.4s ease;pointer-events:none}.elder img{width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(4px 0 5px #0008)}.finish-door{position:absolute;right:-30%;bottom:13.333%;height:60%;width:14%;border:3px solid #c8b080;border-radius:20px 20px 0 0;background:#1c403fdd;color:#ffe8ae;display:grid;place-items:center;z-index:2;box-shadow:0 0 30px #faef9270}.finish-door span{font-size:clamp(12px,2vw,22px);font-weight:700;text-align:center;line-height:1.5}
.cue{position:absolute;top:6%;left:50%;transform:translateX(-50%);color:#ffe29a;background:#0b1d24dc;border:1px solid #f7c06970;border-radius:999px;padding:6px 12px;font-size:clamp(12px,1.8vw,17px);max-width:calc(100% - 20px);text-align:center;line-height:1.4;opacity:0;transition:opacity .12s;z-index:5}.cue.visible{opacity:1}.pickup{position:absolute;left:25%;bottom:40%;color:#ffd275;font-size:clamp(18px,3vw,28px);font-weight:800;opacity:0;z-index:5}.pickup.visible{opacity:1}
.overlay{position:absolute;inset:0;background:linear-gradient(100deg,#081c24e6,#081c2488);z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:18px}.overlay p{margin:0;font-size:clamp(14px,2vw,19px);line-height:1.6}.overlay small{font-size:14px;color:#bdd3cd}.primary{background:#ffcb70;color:#273031;border:1px solid #ffdc98;font-weight:750;min-height:48px}.countdown{position:absolute;inset:0;display:grid;place-items:center;background:#0b1b2770;font-size:clamp(50px,10vw,90px);font-weight:800;z-index:7}
.playing-controls{margin:18px auto 0;max-width:480px;text-align:center}.jump-button{width:100%;min-height:70px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:20px;background:#dce8dc;color:#18322d;border:1px solid #eff6df;touch-action:none;user-select:none;-webkit-user-select:none}.jump-button b{font-size:22px;z-index:1}.jump-button span{font-size:14px;z-index:1}.jump-button i{position:absolute;inset:0;transform:scaleX(0);transform-origin:left center;background:#ffd06a;opacity:.8}.jump-button.is-held{box-shadow:0 0 0 3px #ffd06a66}.message{min-height:1.6em;font-size:14px;line-height:1.6;margin:10px 0;color:#cee2d6}.instructions{margin-top:18px;padding:14px 0;border-top:1px solid #ffffff24;color:#a9c4c4;font-size:14px;line-height:1.8}.instructions summary{cursor:pointer;min-height:44px;display:flex;align-items:center;width:fit-content}.instructions p{max-width:66ch;margin:6px 0}
.overlay{overflow:auto;justify-content:safe center}
.result{margin-top:22px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:26px;align-items:center;border-top:1px solid #ffffff2b;padding-top:24px}.result>img{width:100%;height:240px;object-fit:contain;border-radius:14px;background:#132f32}.result p{font-size:15px;line-height:1.7;color:#c4dcd6;margin:10px 0}.result-total{display:flex;align-items:baseline;gap:9px;margin:10px 0}.result-total strong{font-size:48px;color:#ffd373}.result-total span{font-size:16px}.result-actions{display:flex;gap:10px;flex-wrap:wrap}.result-actions button{flex:1;white-space:nowrap}
/* Portrait uses a 640-unit camera on the same 960×480 world. Scale both axes
   together: larger art, unchanged collision boxes and jump trajectories. */
@media(max-width:600px){
  .escape-shell{width:calc(100% - 24px);padding-top:max(10px,env(safe-area-inset-top));padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
  .topline{margin-bottom:10px;font-size:14px}.topline span,.heading .eyebrow{display:none}
  .heading{margin-bottom:12px}h1{font-size:25px}.heading button{flex-shrink:0}
  .stage{aspect-ratio:4/3;border-radius:14px}.world{width:150%;--finish-cat-x:44.667%}
  .overlay{gap:10px;padding:14px}.overlay p{font-size:16px}.overlay small{font-size:14px}.overlay h2{font-size:23px}.overlay button{min-height:48px}
  .hud strong{font-size:25px}#lives{font-size:21px;letter-spacing:2px}.journey{font-size:14px}#journey{margin-bottom:10px}
  .playing-controls{margin-top:12px}.jump-button{min-height:76px;gap:16px}.jump-button b{font-size:24px}.jump-button span{font-size:14px}
  .message{font-size:14px;margin:8px 0;min-height:3.2em}.result{grid-template-columns:1fr;gap:16px}.result>img{height:170px}.result h2{font-size:26px}.result-actions button{font-size:14px}.instructions{margin-top:12px}.cue{padding:6px 10px;font-size:14px}
}
/* Keep a short landscape screen playable without moving the jump button offscreen. */
@media(orientation:landscape) and (max-height:540px){
  .escape-shell{width:min(calc(100% - 24px),960px);display:grid;grid-template-columns:minmax(0,1fr) 140px;gap:6px 12px;padding-top:max(6px,env(safe-area-inset-top));padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
  .topline,.heading,.instructions{display:none}.hud,.journey,#journey,.stage{grid-column:1}.hud{margin:0}.hud button{min-height:44px}.journey{margin:0;font-size:14px}#journey{margin-bottom:2px}
  .stage{aspect-ratio:2;width:min(100%,calc((100dvh - 116px)*2));justify-self:center}.world{width:100%;--finish-cat-x:67%}
  .playing-controls{grid-column:2;grid-row:1/5;margin:0;align-self:center}.jump-button{min-height:112px;flex-direction:column;gap:8px;padding:12px}.jump-button span{font-size:14px}.message{font-size:14px;line-height:1.5}.result{grid-column:1/-1}
  #sound{position:fixed;right:max(12px,env(safe-area-inset-right));top:max(8px,env(safe-area-inset-top));z-index:9}.heading{display:contents}.heading>div{display:none}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}

/* Interface polish only; the world and all sprite geometry stay above. */
.escape-shell{padding-top:max(18px,env(safe-area-inset-top));padding-bottom:max(24px,env(safe-area-inset-bottom))}
.topline{margin-bottom:18px}.topline a{display:inline-flex;align-items:center;gap:8px;min-height:28px;text-decoration:none;font-weight:600}.topline a:before{content:'←';color:#ffcb70}.topline span{font-size:.75rem;letter-spacing:.08em}
.heading{margin-bottom:18px}.heading #sound{border-radius:999px;background:#ffffff09;font-size:.875rem}.heading #sound[aria-pressed=false]{color:#aac1be}
.run-status{padding:14px 18px 0;margin-bottom:14px;border:1px solid #a2c9ba2c;border-radius:16px;background:linear-gradient(110deg,#24433d88,#122c3188);overflow:hidden}
.hud{margin:0;gap:14px}.life-stat{display:flex;flex-direction:column;gap:2px}.life-stat small{font-size:.75rem;color:#b2cebf;letter-spacing:.06em;margin:0}.hud strong{font-size:30px;line-height:1.2;color:#ffe1a0}.hud small{font-size:.875rem}.hud #pause{background:#ffffff09;border-radius:999px;min-width:64px;font-size:.875rem}#lives{font-size:22px;line-height:1.2;letter-spacing:2px}
.journey{margin:12px 0 9px;font-size:.875rem;gap:10px}#area{min-width:0;overflow-wrap:anywhere}#remaining{white-space:nowrap;font-variant-numeric:tabular-nums;color:#f0e2c0}#journey{height:4px;width:calc(100% + 36px);margin:0 -18px;background:#122c31}#journey::-webkit-progress-bar{background:#122c31}#journey::-webkit-progress-value{background:linear-gradient(90deg,#88b7a1,#ffd073)}
.run-status[data-area=chase]{border-color:#e3a36170}.run-status[data-area=chase] #area{color:#ffd073}
.stage{border-color:#739c8b80;box-shadow:0 12px 36px #0004}.intro-steps{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.intro-steps span{font-size:.75rem;padding:5px 10px;border:1px solid #ffffff35;border-radius:999px;background:#0e252da6;color:#d2e7dd}.overlay .primary{min-width:164px;box-shadow:0 5px 18px #0004;border-radius:999px}.overlay small{font-size:.875rem}.overlay p{max-width:28ch;text-wrap:balance}
.playing-controls{max-width:560px;margin-top:16px}.jump-button{min-height:80px;border-radius:18px;background:linear-gradient(110deg,#e0edda,#c4dacb);border-color:#efffe5;color:#18352c;box-shadow:0 4px 0 #4e7765,0 10px 24px #0003;transition:box-shadow .12s,background .12s}.jump-button b{font-size:1.5rem;white-space:nowrap}.jump-button span{font-size:.875rem;line-height:1.5}.jump-button.is-held{background:#ffe0a0;box-shadow:0 2px 0 #9b763b,0 0 0 3px #ffcf6966}.jump-button i{background:linear-gradient(90deg,#ffdd8999,#ffbb4d);opacity:.75}.jump-button:disabled{opacity:.6;box-shadow:0 2px 0 #314f48}.message{font-size:.875rem;color:#cde0d2;margin:12px 0 0;min-height:3.2em;text-wrap:balance}
.instructions{font-size:.9375rem;padding-top:12px;margin-top:16px;color:#bdd3cd}.instructions summary{font-weight:600;list-style:none;gap:10px}.instructions summary:after{content:'＋';font-size:20px;color:#ffd073}.instructions[open] summary:after{content:'−'}.instructions p{margin:10px 0}
.result{padding:22px;background:#15332f;border:1px solid #769e8560;border-radius:20px;margin-top:20px;scroll-margin-block:16px}.result>img{background:#102a26;box-shadow:inset 0 0 0 1px #ffffff15}.result .eyebrow{display:block}.result-actions button{min-height:48px;border-radius:12px}.result-detail{font-variant-numeric:tabular-nums}
@media(max-width:600px){
 .escape-shell{padding-top:max(10px,env(safe-area-inset-top))}.topline{margin-bottom:6px}.heading{margin-bottom:12px}h1{font-size:26px}
 .run-status{padding:10px 12px 0;margin-bottom:10px;border-radius:14px}.hud{gap:10px}.hud strong{font-size:28px}.life-stat small{font-size:.75rem}#lives{font-size:20px}.journey{margin:8px 0;font-size:.875rem;line-height:1.4}#journey{width:calc(100% + 24px);margin:0 -12px}
 .playing-controls{margin-top:12px}.jump-button{min-height:78px;gap:14px;padding:12px}.message{margin-top:10px;min-height:3.2em}.overlay{gap:10px;padding:14px}.intro-steps span{padding:4px 9px}.overlay p{font-size:1rem}.overlay button{min-height:48px}.result{padding:16px;gap:14px}.result>img{height:160px}.result h2{font-size:1.5rem}.instructions{margin-top:12px}
}
@media(orientation:landscape) and (max-height:540px){
 .escape-shell{grid-template-columns:minmax(0,1fr) 164px;grid-template-rows:auto auto minmax(0,1fr);gap:6px 14px;padding-top:max(6px,env(safe-area-inset-top));padding-bottom:max(8px,env(safe-area-inset-bottom))}
 .topline{display:flex;grid-column:1;grid-row:1;margin:0;min-height:44px;font-size:.75rem}.topline a{min-height:44px}.topline span{display:none}.heading{display:contents}.heading>div{display:none}#sound{position:static;grid-column:2;grid-row:1;justify-self:end;min-height:44px;padding:6px 14px;font-size:.75rem}
 .run-status{grid-column:1;grid-row:2;margin:0;padding:6px 12px 0;border-radius:12px}.hud{gap:10px}.life-stat{flex-direction:row;align-items:center;gap:8px}.life-stat small{display:none}.hud strong{font-size:22px}#lives{font-size:19px}.hud #pause{min-height:36px;padding:6px 12px;font-size:.75rem}.journey{margin:4px 0 6px;font-size:.75rem;line-height:1.3}#journey{width:calc(100% + 24px);margin:0 -12px;height:3px}
 .stage{grid-column:1;grid-row:3;width:min(100%,calc((100dvh - 160px)*2));aspect-ratio:2;align-self:start;justify-self:center}.world{width:100%;--finish-cat-x:67%}.playing-controls{grid-column:2;grid-row:2/4;margin:0;align-self:center}.jump-button{min-height:112px;flex-direction:column;gap:8px;padding:12px;border-radius:16px}.jump-button span{font-size:.875rem}.message{font-size:.875rem;margin-top:12px;min-height:0}.instructions{display:none}.result{grid-column:1/-1;grid-row:4}.overlay{padding:12px;gap:8px}.overlay p{font-size:.9375rem}.overlay h2{font-size:1.25rem}.overlay small{font-size:.75rem}.intro-steps span{font-size:.75rem;padding:3px 8px}
}
@media(prefers-reduced-motion:reduce){.jump-button{transition:none}}

.area-copy{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap}#pace{font-size:.75rem;line-height:1.3;padding:3px 6px;border:1px solid #ffd07355;border-radius:5px;color:#ffd073;font-variant-numeric:tabular-nums}
/* Long translations and enlarged text must never squeeze the area to zero. */
.journey{flex-wrap:wrap;align-items:flex-start}
.area-copy{flex:1 1 12ch}
#remaining{max-width:100%;margin-left:auto;white-space:normal;overflow-wrap:anywhere}
/* Account for the generated robot's transparent safety margin; align its
   visible base with the floor and its body with the existing collision box. */
.entity.vacuum img{transform:translateY(17%) scale(1.17);transform-origin:center bottom}
/* The finish is Amao's cave, with a brief run into the opening before results. */
.finish-door{right:-40%;width:28%;height:58%;border:0;border-radius:0;background:none;box-shadow:none;display:block;z-index:5;pointer-events:none}
.finish-door img{width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 4px 8px #0006)}
.finish-door span{position:absolute;left:50%;top:-4px;transform:translateX(-50%);white-space:nowrap;padding:5px 9px;border:1px solid #fff1ad66;border-radius:999px;background:#17342dda;color:#ffe4a0;font-size:.75rem;line-height:1.4}
.stage[data-phase=escaped] .cat{opacity:0;transition:left .7s ease-in,opacity .18s .6s}
@media(max-width:600px){.finish-door{width:36%;height:65%}}
@media(orientation:landscape) and (max-height:540px){.finish-door{width:28%;height:58%}}
@media(prefers-reduced-motion:reduce){.stage[data-phase=escaped] .cat{transition:none}}

/* Keep the shared brand header separate from the game's sound controls. */
:root body .escape-shell>.amao-site-header{margin-block-end:20px}
@media(orientation:landscape) and (max-height:540px){
 :root body .escape-shell{row-gap:12px}
 :root body .escape-shell>.amao-site-header{margin-block-end:0}
 :root body .escape-shell #sound{grid-column:2;grid-row:2;align-self:start;justify-self:end}
 :root body .escape-shell .playing-controls{grid-row:3}
}
