body{--bg:#273453;--ink:#fff0d8;--accent:#ffa877;--button-ink:#29314a;--line:#ecb69759;--ambient:#df957d50;--pattern:#e5b6a31c;--icon-bg:#39436345;--home-shade:linear-gradient(#27334c10,transparent 48%,#192d51aa 100%);--panel:#33415c;--subtle:#e1b29412;--radius:22px;--button-shadow:0 5px 0 #814f52;--play-bg:linear-gradient(#354667,#29314b);--result-bg:linear-gradient(145deg,#4f557d,#28354f 80%);--arena-radius:16px}.cat .wordmark{color:#29374c;text-shadow:0 1px #efcbb2}.cat .home-nav .icon{color:#2c3853;background:#ffe0c166;border-color:#33415a66}.sky-title{position:absolute;top:16%;left:8%;right:5%;color:#263650}.sky-title h1{font-size:clamp(35px,10vw,49px);line-height:1.45;letter-spacing:.02em;text-shadow:0 2px 0 #efbf9faa}.sky-title h1 span{font-size:.84em;letter-spacing:.02em}.sky-title .eyebrow{letter-spacing:3px;margin-bottom:10px;font-size:8px}.sky-title>p:last-child{font-size:12px;font-weight:700;margin-top:8px;line-height:1.8}.roof-badge{position:absolute;top:47%;left:8%;padding:8px 11px;background:#f7dab899;color:#384463;border-radius:40px 40px 8px 8px;display:flex;align-items:center;gap:6px;transform:rotate(-7deg)}.roof-badge strong{font:500 34px Georgia,serif}.roof-badge span{font-size:7px;line-height:1.6;letter-spacing:1px}.cat-dock{position:absolute;left:8%;right:8%;bottom:43px;display:flex;flex-direction:column;align-items:flex-end;gap:19px}.cat-dock .start{width:auto;min-width:73%;border-radius:60px;padding:15px 22px;box-shadow:0 5px 0 #513b50}.cat-ticket{display:flex;width:100%;align-items:center;justify-content:space-between;padding:10px 15px;background:#233451ce;border-radius:14px;border:1px solid #ffd6b22e}.cat-ticket .best{display:flex;align-items:center;gap:14px}.cat-ticket .best strong{font-family:Georgia,serif;font-size:26px}.cat .result-art{border-radius:70px 12px 70px 12px}.cat .score-ticket{background:#54617c55;border:0}.cat .home-art{object-position:48% 50%}@media(max-height:590px){.sky-title{top:14%}.sky-title h1{font-size:34px;line-height:1.3}.sky-title .eyebrow{margin-bottom:7px}.sky-title>p:last-child{font-size:11px;margin-top:7px}.cat-dock{bottom:31px;gap:12px}.cat-ticket{padding:5px 12px}.cat-dock .start{padding:11px 18px}.roof-badge{top:46%;padding:5px 9px}.roof-badge strong{font-size:28px}}

.cat-hud{gap:10px;align-items:center;min-height:72px}.cat-hud>div{flex:1;min-width:0}.cat-hud strong{font-size:30px;line-height:1.1;white-space:nowrap}.cat-hud em{font-style:normal;font-size:12px;font-weight:650;color:#ddc4b5}.cat-hud small{font-size:10px;font-weight:800;letter-spacing:.4px}.cat-hud .fish-counter{padding:7px 9px;background:#4c486399;border:1px solid #e3b39177;border-radius:13px}.fish-counter small:before{content:'◀ ';color:#ffdfa5}.fish-counter>span,.distance-counter>span{font-size:9px;display:block;margin-top:4px;color:#e8c9ae}.fish-counter.complete{border-color:#eaf0b4;background:#56695188}.fish-counter.complete>span{color:#eff4c5}.distance-counter{padding-left:3px}.cat-hud .pause-button{width:40px;height:44px;flex:none}.cat-route{position:relative;flex:none;height:6px;background:#192d4580;border-radius:6px;margin:0 12px 2px 1px}.cat-route>i{display:block;height:100%;width:0;background:#ffd4a4;border-radius:6px}.cat-route>span{position:absolute;right:-10px;top:-6px;color:#f9bcc0;font-size:16px}.cat-play .run-status{min-height:17px}.cat-play #health{font-size:11px;letter-spacing:2px;color:#ffe7c6}.cat-play #bonus{font-size:10px;letter-spacing:.4px}.cat-footer{text-align:center;min-height:48px;padding:0 3px}.cat-footer #stage-hint{font-size:11px;color:#ffe2c3;line-height:1.5}.cat-footer .jump-hint{font-size:9px;margin-top:6px;color:#d6c5c4}.meeting-actions{margin-top:8px}.meeting-actions[hidden],.meeting-actions button[hidden]{display:none}.meeting-actions button{width:100%;min-height:44px;font-size:14px}.cat-play .ready{font-size:35px}
@media(max-height:590px){.cat-hud{min-height:65px;gap:7px}.cat-hud strong{font-size:25px}.cat-hud small{font-size:9px}.cat-hud em{font-size:10px}.cat-hud .fish-counter{padding:6px 8px}.cat-hud .pause-button{width:38px}.cat-footer #stage-hint{font-size:10px}.cat-footer{min-height:40px}.cat-play .run-status{min-height:17px}.cat-footer .jump-hint{margin-top:4px;font-size:8px}.cat-hud>div>span{font-size:8px}}
/* Reserve the hand-off area so the canvas never jumps when meeting Mimi. */
.cat-footer{display:grid;grid-template-rows:30px 48px;height:78px;min-height:78px;flex:none;align-items:center}.cat-footer #stage-hint{grid-row:1}.cat-footer .meeting-actions,.cat-footer .jump-hint{grid-row:2;grid-column:1;margin:0}.cat-footer .meeting-actions button{min-height:44px}.cat-footer .jump-hint{padding:10px 0}
@media(max-height:590px){.cat-footer{height:72px;min-height:72px;grid-template-rows:25px 47px}}

/* Gameplay fills the available viewport; the HUD floats above the world. */
.game-shell[data-screen="play"]{width:100vw;height:100dvh;max-height:none;max-width:none;box-shadow:none}
[data-screen="play"] .screen.play{padding:0;gap:0}
[data-screen="play"] .arena-slot{position:absolute;inset:0;z-index:0;overflow:hidden}
[data-screen="play"] canvas{border:0;border-radius:0;box-shadow:none;outline-offset:-4px}
[data-screen="play"] .play-header{position:absolute;z-index:2;top:max(10px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));padding:8px 10px;min-height:60px;border:1px solid #fff2;background:var(--panel);border-radius:16px;box-shadow:0 3px 18px #0002;pointer-events:none}
[data-screen="play"] .play-header button{pointer-events:auto}
[data-screen="play"] .run-status{position:absolute;top:calc(max(10px,env(safe-area-inset-top)) + 72px);left:16px;right:16px;z-index:2;padding:4px 9px;background:var(--panel);border:1px solid #fff2;border-radius:12px;pointer-events:none}
[data-screen="play"] .phase-caption{position:absolute;top:calc(max(10px,env(safe-area-inset-top)) + 106px);left:18px;right:18px;z-index:2;text-align:center;pointer-events:none;text-shadow:0 2px 4px #000;background:none}
[data-screen="play"] .play-footer{position:absolute;z-index:2;bottom:max(10px,env(safe-area-inset-bottom));left:16px;right:16px;min-height:0;padding:8px 12px;border-radius:12px;background:var(--panel);pointer-events:none;border:1px solid #fff2}
[data-screen="play"] .play-footer button{pointer-events:auto}
body.touch-play{touch-action:none;overscroll-behavior:none}

.cat-play .play-header.cat-hud{height:82px;padding:8px 10px;background:#303e59d9;color:#fff1d9}.cat-play .cat-hud small,.cat-play .cat-hud em,.cat-play #fish-goal,.cat-play #stage-label{color:#fff1d9}.cat-play .cat-route{position:absolute;z-index:2;top:calc(max(10px,env(safe-area-inset-top)) + 91px);left:24px;right:24px;pointer-events:none}.cat-play .run-status{display:none}.cat-play .play-footer.cat-footer{display:block;grid-template-rows:none;height:auto;min-height:0;padding:8px 12px;background:#303e59d9;color:#fff1d9}.cat-play .cat-footer #stage-hint{min-height:0;margin:0;font-size:11px}.cat-play .jump-hint{display:none}.cat-play .meeting-actions{display:grid;grid-template-columns:1fr 1fr;position:static;margin-top:8px;gap:6px}.cat-play .meeting-actions button{min-height:44px}.cat-play .play-footer:has(.meeting-actions:not([hidden])){bottom:max(10px,env(safe-area-inset-bottom))}

[data-screen="play"] .hud-stack{position:absolute;z-index:3;top:max(10px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));display:flex;flex-direction:column;gap:6px;pointer-events:none}
[data-screen="play"] .hud-stack .play-header,[data-screen="play"] .hud-stack .run-status,[data-screen="play"] .hud-stack .phase-caption,[data-screen="play"] .hud-stack .cat-route{position:relative;inset:auto;width:100%;margin:0;flex:none}
[data-screen="play"] .hud-stack .play-header{border-radius:16px;min-height:60px;height:auto}
[data-screen="play"] .hud-stack .run-status{min-height:28px;gap:8px}
[data-screen="play"] .hud-stack .phase-caption{font-size:11px;min-height:17px;line-height:1.5;padding:3px 8px;border-radius:8px;background:var(--panel);text-shadow:none}
.boss-status{border:1px solid var(--accent);padding:5px 10px;border-radius:10px;background:var(--panel);display:flex;align-items:center;gap:10px;font-size:11px;font-weight:800}.boss-status>span{flex:none}.boss-status progress{min-width:40px;flex:1;height:9px;accent-color:var(--accent);border:0;border-radius:8px;overflow:hidden}.boss-status progress::-webkit-progress-bar{background:#152b2b}.boss-status progress::-webkit-progress-value{background:var(--accent)}

[data-screen="play"] .hud-stack .cat-hud{min-height:82px}.cat-play .hud-stack .cat-route{width:calc(100% - 22px);margin:0 11px}.cat-play .meeting-actions:has(button[hidden]){grid-template-columns:1fr}

/* Brief chapter card, followed by an unobstructed run. */
.cat-play .chapter-ready{display:grid;gap:8px;width:min(300px,82vw);text-align:center;white-space:normal;transform:translate(-50%,-50%);border-radius:24px;background:#fff0d9;color:#33415a;box-shadow:0 8px 0 #ba7f76,0 14px 40px #24354a66;padding:20px 14px}
.chapter-ready small{font-size:13px;line-height:1.4;letter-spacing:.05em}.chapter-ready strong{font-size:32px}.chapter-ready span{font-size:12px;letter-spacing:.1em}
.journey-clear{position:absolute;top:29%;left:50%;transform:translateX(-50%);width:min(340px,90vw);padding:18px 16px 20px;text-align:center;border:2px solid #ffe2a2;border-radius:32px;background:linear-gradient(145deg,#fff4dedf,#ffd9c9f2);box-shadow:0 10px 45px #34355155;color:#343c59;pointer-events:none;animation:clear-arrival .65s cubic-bezier(.2,.9,.3,1.2) both}.journey-clear .clear-crown{display:block;font-size:42px;line-height:1;color:#a7693e}.journey-clear p{font-size:14px;letter-spacing:.28em;font-weight:850;margin:8px 0}.journey-clear h2{font-size:22px;line-height:1.45}.journey-clear>span:last-child{display:block;font-size:11px;line-height:1.5;margin-top:10px}.journey-won{background:radial-gradient(ellipse at 50% 0,#966d84,#303e5d 75%)}.journey-won .result-heading h1{color:#ffe5aa;font-size:23px;line-height:1.35}.journey-won .result-medal{font-size:13px;letter-spacing:1px;padding:6px 14px}.journey-won .result-art{border:2px solid #ffe3a7}.journey-won .score-ticket{border-color:#f5d3a1}
@keyframes clear-arrival{from{opacity:0;transform:translate(-50%,18px) scale(.82)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
@media(max-height:590px){.journey-clear{top:26%;padding:12px}.journey-clear .clear-crown{font-size:32px}.journey-clear h2{font-size:20px}.journey-clear p{margin:5px 0}}