/* House style from Farty Cats. Theme colors are overridden at runtime from game.config.json (src/config.js). */
:root{color-scheme:light;--ink:#224e47;--cream:#fff7dc;--yellow:#ffce57;--highlight:#d3623e;--bg:#deeddf;--playfield:#c6e9df}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Trebuchet MS',Arial,sans-serif;background-image:radial-gradient(#b9d4be 1px,transparent 1px);background-size:24px 24px}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;cursor:pointer;color:inherit}
button:focus-visible,canvas:focus-visible,a:focus-visible{outline:4px solid #d55431;outline-offset:3px}
main{min-height:100svh;display:flex;align-items:center;justify-content:center;gap:clamp(40px,7vw,120px);padding:28px}
.story{max-width:480px}
.eyebrow{font-size:11px;font-weight:bold;letter-spacing:3px}
h1{font-family:'Arial Black','Trebuchet MS',sans-serif;font-weight:1000;font-size:clamp(65px,7.8vw,112px);line-height:.83;letter-spacing:-7px;margin:32px 0;transform:rotate(-4deg);position:relative;text-shadow:3px 4px 0 var(--cream)}
.tagline{font-size:27px;font-weight:bold;line-height:1.16;margin-top:42px}
.description{font-size:14px;line-height:1.8;margin-bottom:27px}
.cabinet{width:min(420px,calc((100svh - 104px)*.6));min-width:290px;border:3px solid var(--ink);border-radius:23px;overflow:hidden;background:var(--cream);box-shadow:10px 13px 0 #224e4722;flex-shrink:0}
.topbar{height:55px;display:flex;align-items:center;padding:0 15px;gap:10px;background:var(--cream)}
.topbar a{font-size:23px;font-weight:1000;color:var(--ink);text-decoration:none;letter-spacing:-2px}
.topbar a span{font-size:14px;color:var(--highlight)}
.scores{display:flex;gap:17px;margin:auto;font-size:9px;font-weight:bold;letter-spacing:1px}
.scores b{font-size:20px;display:block;letter-spacing:0}
.topbar button{border:1px solid #c5cfb3;background:transparent;border-radius:50%;min-width:36px;min-height:36px;font-size:20px}
.stage{position:relative;aspect-ratio:420/700;overflow:hidden}
canvas{display:block;width:100%;height:100%;touch-action:none}
.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:20px}
[hidden]{display:none!important}
.pill{font-size:9px;letter-spacing:1.6px;font-weight:bold;padding:8px 12px;border-radius:20px;background:var(--ink);color:var(--cream)}
h2{font-size:clamp(27px,3vw,38px);letter-spacing:-1.6px;line-height:1.08;margin:20px 0 8px;font-weight:1000}
.overlay p{font-size:12px}
.picker{display:flex;width:100%;gap:8px;margin:12px 0 19px}
.pick{width:33.33%;padding:10px 2px 9px;background:#fffaf0;border:2px solid #c6d4bd;border-radius:15px;transition:transform .15s}
.pick[aria-pressed=true]{background:#ffe397;border-color:var(--ink);transform:translateY(-5px);box-shadow:0 4px 0 var(--ink)}
.pick canvas{width:100%;height:auto}
.pick strong{font-size:12px;display:block}
.pick small{font-size:8px;display:block;margin-top:4px}
.primary{width:100%;background:var(--yellow);border:2px solid var(--ink);box-shadow:0 5px 0 var(--ink);border-radius:13px;padding:16px;font-size:16px;font-weight:1000;letter-spacing:1px}
.primary:hover{background:#ffdc7c}
.primary:active{transform:translateY(3px);box-shadow:0 2px 0 var(--ink)}
.primary span{float:right}
.hint{font-size:8px!important;letter-spacing:.8px;margin-top:22px}
footer{height:30px;display:flex;justify-content:space-between;align-items:center;padding:0 15px;font-weight:bold;font-size:7px;letter-spacing:1px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@media(max-width:760px){main{padding:12px;min-height:100svh}.story{display:none}.cabinet{width:min(420px,calc((100svh - 100px)*.6));min-width:0}.topbar{padding:0 10px}.overlay{padding:17px}h2{font-size:30px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.overlay{overflow:auto}
/* Adaptive shell: no orientation lock; retain the same fair course on every display. */
html,body{overscroll-behavior:none}
body{min-width:280px}
main{padding: max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));gap:clamp(20px,4vw,70px)}
.cabinet{width:min(460px,calc(100vw - 28px),calc((100dvh - 120px)*.6));min-width:0}
.topbar button{min-width:44px;min-height:44px}
.story{max-width:360px}
.stage{isolation:isolate}
.primary{min-height:48px}
.pick{min-height:48px}
.hint{line-height:1.5}
@media(min-width:680px){.story{display:block;width:30vw}.story h1{font-size:clamp(45px,8vw,90px);letter-spacing:-4px}.story .tagline{font-size:23px}.description{font-size:12px}}
@media(max-height:600px) and (min-width:600px){main{align-items:center}.story{display:block;width:45vw}.story h1{font-size:54px;margin:18px 0}.story .tagline{font-size:20px;margin:20px 0}.story .description{display:none}.cabinet{width:calc((100dvh - 108px)*.6);border-radius:15px}.topbar{height:45px;padding:0 5px;gap:3px}.topbar a{font-size:16px}.scores{gap:6px;font-size:7px}.scores b{font-size:15px}.topbar button{min-width:32px;min-height:40px}footer{height:22px;font-size:5px;padding:0 5px}.overlay{padding:8px;justify-content:flex-start}.pill{display:none}h2{font-size:21px;margin:8px 0}.overlay p{font-size:10px;margin:5px 0}.picker{gap:3px;margin:5px 0 10px}.pick{padding:3px}.pick small,.hint{display:none}.pick strong{font-size:10px}.primary{padding:10px;font-size:12px;min-height:44px}}
@media(prefers-reduced-motion:reduce){.pick{transition:none}}
/* Phones and fold cover screens: the forest is the app, with a floating HUD. */
@media(max-width:679px),(max-height:599px) and (max-width:999px){
 html,body{width:100%;height:100%;min-width:0;overflow:hidden;background:var(--playfield)}
 main{display:block;width:100%;height:100vh;height:100dvh;min-height:0;padding:0;gap:0}
 .story,.mobile-note,.cabinet>footer{display:none}
 .cabinet{position:relative;width:100%;height:100%;min-width:0;border:0;border-radius:0;box-shadow:none;background:var(--playfield);overflow:hidden}
 .stage{position:absolute;inset:0;aspect-ratio:auto;width:100%;height:100%}
 .topbar{position:absolute;z-index:3;top:max(12px,env(safe-area-inset-top),var(--safe-area-inset-top,0px),var(--native-safe-top,0px));left:max(12px,env(safe-area-inset-left),var(--safe-area-inset-left,0px),var(--native-safe-left,0px));right:max(12px,env(safe-area-inset-right),var(--safe-area-inset-right,0px),var(--native-safe-right,0px));height:52px;padding:4px 8px;gap:10px;background:#fff7dce8;border-radius:16px;box-shadow:0 2px 8px #224e4712}
 .topbar a{font-size:23px}.scores{font-size:9px;gap:18px}.scores b{font-size:23px}.topbar button{min-width:44px;min-height:44px}
 .overlay{padding:max(84px,calc(env(safe-area-inset-top) + 76px),calc(var(--safe-area-inset-top,0px) + 76px),calc(var(--native-safe-top,0px) + 76px)) max(24px,env(safe-area-inset-right),var(--safe-area-inset-right,0px),var(--native-safe-right,0px)) max(30px,calc(env(safe-area-inset-bottom) + 18px),calc(var(--safe-area-inset-bottom,0px) + 18px),calc(var(--native-safe-bottom,0px) + 18px)) max(24px,env(safe-area-inset-left),var(--safe-area-inset-left,0px),var(--native-safe-left,0px));justify-content:center}
 .overlay>*{width:100%;max-width:390px}.overlay .pill{width:auto;display:block}.overlay h2{font-size:36px;margin:22px 0 10px}.overlay p{font-size:13px}.picker{gap:10px;margin:18px 0 24px}.pick{padding:10px 3px}.pick strong{font-size:13px}.pick small{display:block;font-size:8px}.primary{min-height:52px;padding:16px;font-size:16px}.hint{display:block;font-size:9px!important}
}
#mute{font-size:11px;font-weight:bold;letter-spacing:.3px}
@media(max-height:599px) and (max-width:999px){.overlay{padding:74px 24px 20px}.overlay h2{font-size:26px;margin:5px 0}.overlay .pill,.overlay .hint,.pick small{display:none}.picker{margin:8px 0 14px;max-width:340px}.pick{padding:3px}.pick canvas{max-height:68px;object-fit:contain}.primary{max-width:340px;padding:10px;min-height:44px}}
.scores{font-size:8px;letter-spacing:.6px}
.result-total{display:flex;justify-content:center;align-items:baseline;gap:10px}
.result-total strong{font-size:36px;line-height:1}
.result-total span{font-size:10px;font-weight:bold;letter-spacing:1.4px}
#result{max-width:360px;width:100%}
#result-art{width:100%;height:auto;max-height:154px;object-fit:contain}
#result-caption{margin:1px 0 6px;font-size:11px}
/* Native Android is a full-screen game at every window size. Browser desktop keeps the cabinet. */
:is(.native,.web-play),:is(.native,.web-play) body{width:100%;height:100%;min-width:0;overflow:hidden;background:var(--playfield)}
:is(.native,.web-play) main{display:block;width:100%;height:100vh;height:100dvh;min-height:0;padding:0;gap:0}
:is(.native,.web-play) .story,:is(.native,.web-play) .cabinet>footer{display:none}
:is(.native,.web-play) .cabinet{position:relative;width:100%;height:100%;min-width:0;border:0;border-radius:0;box-shadow:none;background:var(--playfield)}
:is(.native,.web-play) .stage{position:absolute;inset:0;aspect-ratio:auto;width:100%;height:100%}
:is(.native,.web-play) .topbar{position:absolute;z-index:3;top:max(12px,env(safe-area-inset-top),var(--native-safe-top,0px));left:max(12px,env(safe-area-inset-left),var(--native-safe-left,0px));right:max(12px,env(safe-area-inset-right),var(--native-safe-right,0px));height:52px;padding:4px 8px;gap:10px;background:#fff7dce8;border-radius:16px;box-shadow:0 2px 8px #224e4712}
:is(.native,.web-play) .topbar button{min-width:44px;min-height:44px}
:is(.native,.web-play) .overlay{padding:max(84px,calc(var(--native-safe-top,0px) + 76px)) max(24px,var(--native-safe-right,0px)) max(30px,calc(var(--native-safe-bottom,0px) + 18px)) max(24px,var(--native-safe-left,0px));justify-content:center}
:is(.native,.web-play) .overlay>*{max-width:390px;width:100%}
:is(.native,.web-play) .overlay .pill{width:auto}
:is(.native,.web-play) .overlay h2{font-size:36px}
:is(.native,.web-play) .scores{font-size:8px}
:is(.native,.web-play) .scores b{font-size:23px}
:is(.native,.web-play) .topbar a{font-size:23px}
/* Six stable slots; custom previews live in a separate, cancellable editor. */
.picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pick{width:100%;min-width:0;padding:5px 3px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.pick canvas{height:65px;width:100%;object-fit:contain}
.pick strong{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
.pick small{font-size:7px}
.empty-pick{border-style:dashed;background:#fff9e5}
.empty-pick>span{font-size:30px;line-height:1.2}
.empty-pick strong{white-space:normal;font-size:11px}
.empty-pick small{font-size:6px}
.locked-pick{background:#f3efe3;opacity:.8}
.menu-tools{display:flex;justify-content:center;gap:8px;margin:0 0 10px}
.menu-tools button{min-height:38px;flex:1;max-width:100%;border:1px solid #a8bba0;background:#fff8df;border-radius:10px;padding:7px;font-size:11px}
.menu-tools button[hidden]{display:none}
.topbar #champion-link{width:44px;height:44px;flex-shrink:0;display:block}
.topbar #champion{width:44px;height:44px;pointer-events:none}
dialog{color:var(--ink);background:var(--cream);border:2px solid var(--ink);border-radius:18px;padding:20px;width:min(410px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;overscroll-behavior:contain;box-shadow:0 10px 60px #224e4755}
dialog::backdrop{background:#173d3bb3}
dialog h2{font-size:25px;line-height:1.1;letter-spacing:-.8px;margin:0 0 12px}
dialog label{display:block;font-size:13px;font-weight:bold;margin:8px 0}
dialog input{display:block;width:100%;font:inherit;font-size:16px;min-height:46px;padding:10px;border:2px solid #8ca47f;border-radius:10px;background:white;color:var(--ink)}
.local-note{font-size:10px;text-align:center;margin:17px 0 0}
#scores-dialog header{display:flex;align-items:center;justify-content:space-between;gap:12px}
#scores-back{min-height:42px;border:1px solid #9eb397;border-radius:10px;background:transparent;padding:8px 14px}
#scores-dialog p{font-size:12px;line-height:1.5}
#score-list{padding:0;list-style:none;margin:15px 0 0}
#score-list li{display:grid;grid-template-columns:22px 44px minmax(0,1fr) auto;gap:8px;align-items:center;border-top:1px solid #d2d8bc;min-height:60px;padding:6px 0}
#score-list canvas{width:44px;height:44px}
#score-list strong{font-size:12px;overflow-wrap:anywhere}
#score-list .run-total{font-size:12px;font-weight:bold}
.rank{font-size:14px;font-weight:bold}
@media(max-height:740px){.overlay:not(#paused),:is(.native,.web-play) .overlay:not(#paused){justify-content:flex-start;overflow:auto}.overlay:not(#paused)>.pill{display:none}.overlay h2,:is(.native,.web-play) .overlay h2{font-size:25px;margin:6px 0}.overlay #message{font-size:11px;margin:5px 0}.picker{margin:8px 0 12px}.pick canvas{max-height:47px}.pick small{display:none}.pick{padding:5px 2px}.hint{display:none}.menu-tools{margin-bottom:8px}dialog{padding:14px}dialog h2{font-size:20px}dialog .local-note{display:none}}
/* Dialog controls stay inside native cutout and gesture safe bounds too. */
:is(.native,.web-play) dialog{inset:max(12px,calc(var(--native-safe-top,0px) + 12px)) max(12px,calc(var(--native-safe-right,0px) + 12px)) max(12px,calc(var(--native-safe-bottom,0px) + 12px)) max(12px,calc(var(--native-safe-left,0px) + 12px));margin:auto;max-width:calc(100vw - var(--native-safe-left,0px) - var(--native-safe-right,0px) - 24px);max-height:calc(100dvh - var(--native-safe-top,0px) - var(--native-safe-bottom,0px) - 24px)}
/* The menu starts below the measured HUD, never underneath it when content scrolls. */
#menu{justify-content:flex-start;padding-top:20px}
#menu>*{flex-shrink:0}
#menu h2{margin-top:0}
.topbar #best-score{border:0;border-radius:8px;background:transparent;min-width:0;min-height:44px;padding:3px 5px;text-align:left;font-size:8px;font-weight:bold;letter-spacing:.6px}
.topbar #best-score span{display:block}
.topbar #best-score b{display:block;font-size:20px}
.topbar #best-score:hover{background:#dce5c4}
.scores{align-items:center;gap:12px}
.topbar #best-score:focus-visible{outline-offset:0}
#scores-dialog{padding-top:0}
#scores-dialog header{position:sticky;top:0;z-index:1;background:var(--cream);padding:14px 0 10px;margin:0}
#scores-dialog header h2{margin:0}
.empty-score{color:#6a7b69}
.empty-portrait{width:40px;height:40px;border:1px dashed #a4b39b;border-radius:50%;display:grid;place-items:center;font-size:22px}
:is(.native,.web-play) #menu{top:var(--hud-clearance,90px);padding-top:16px}
:is(.native,.web-play) #menu h2{margin-top:0}
:is(.native,.web-play) .topbar #best-score b{font-size:23px}
@media(max-width:679px),(max-height:599px) and (max-width:999px){#menu{top:var(--hud-clearance,90px);padding-top:16px}#menu h2{margin-top:0}.topbar #best-score b{font-size:23px}}
:is(.native,.web-play) #menu{top:max(var(--hud-clearance,90px),calc(max(12px,var(--native-safe-top,0px)) + 66px))}
@media(max-width:679px),(max-height:599px) and (max-width:999px){#menu{top:max(var(--hud-clearance,90px),calc(max(12px,env(safe-area-inset-top)) + 66px))}:is(.native,.web-play) #menu{top:max(var(--hud-clearance,90px),calc(max(12px,var(--native-safe-top,0px)) + 66px))}}
/* A separate results screen: three bounded rows, no chooser and no scrolling. */
html,body{height:100%;overflow:hidden}
.gameover{position:absolute;inset:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;justify-items:center;gap:12px;padding:18px 24px 24px;overflow:hidden;text-align:center;background:none}
.gameover>*{width:100%;max-width:390px;min-width:0;min-height:0}
.gameover h2{font:900 clamp(36px,8.4vmin,68px)/1.05 "Arial Black","Trebuchet MS",sans-serif;margin:0;color:#fff;letter-spacing:-.02em;-webkit-text-stroke:.14em var(--ink);paint-order:stroke fill;text-shadow:0 .09em 0 var(--ink);transform:rotate(-2deg);animation:results-pop .5s cubic-bezier(.2,1.6,.4,1) both}
.gameover #result{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:6px;width:100%;height:100%;min-height:0;max-width:640px;overflow:visible}
.gameover #result-art{width:100%;height:100%;max-height:none;min-height:0;object-fit:contain}
.gameover .result-total{justify-self:center;flex-wrap:nowrap;align-items:center;gap:8px;padding:6px 22px 9px;background:var(--cream);border:3px solid var(--ink);border-radius:18px;box-shadow:0 4px 0 var(--ink);animation:results-pop .5s .08s cubic-bezier(.2,1.6,.4,1) both}
.gameover .result-total strong{font-size:44px;overflow-wrap:anywhere}
.gameover #result-caption{justify-self:center;width:fit-content;max-width:100%;font-size:14px;font-weight:bold;line-height:1.3;margin:0;padding:3px 14px;color:var(--ink);background:var(--cream);border:2px solid var(--ink);border-radius:999px}
.gameover .primary{min-height:60px;font-size:20px;box-shadow:0 5px 0 var(--ink);animation:results-go 1s ease-in-out infinite}
.gameover .secondary{background:var(--cream);border:3px solid var(--ink);color:var(--ink);box-shadow:0 4px 0 var(--ink)}
@keyframes results-pop{from{opacity:0;transform:scale(.4) rotate(-8deg)}}
@keyframes results-go{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@media(prefers-reduced-motion:reduce){.gameover h2,.gameover .result-total,.gameover .primary{animation:none}}
#menu,#paused{overflow:hidden}
#menu{gap:10px;padding:16px 24px 24px;justify-content:center}
#menu>h2,#menu>p,#menu>.picker,#menu>.menu-tools{margin:0}
#menu>.picker{flex:0 1 220px;min-height:104px;align-self:center;grid-auto-rows:minmax(44px,1fr)}
#menu .pick{min-height:0;overflow:hidden}
#menu .pick canvas{flex:1;min-height:0;max-height:65px;object-fit:contain}
#menu .pick small{flex-shrink:0}
#menu .primary{flex-shrink:0}
#menu>.hint{margin:0}
:is(.native,.web-play) #menu,:is(.native,.web-play) .gameover{padding:16px max(24px,calc(var(--native-safe-right,0px) + 12px)) max(20px,calc(var(--native-safe-bottom,0px) + 12px)) max(24px,calc(var(--native-safe-left,0px) + 12px))}
:is(.native,.web-play) .gameover{top:max(var(--hud-clearance,90px),calc(max(12px,var(--native-safe-top,0px)) + 66px))}
@media(max-width:679px),(max-height:599px) and (max-width:999px){.gameover{top:max(var(--hud-clearance,90px),calc(max(12px,env(safe-area-inset-top)) + 66px));padding-bottom:max(20px,calc(env(safe-area-inset-bottom) + 12px))}:is(.native,.web-play) .gameover{top:max(var(--hud-clearance,90px),calc(max(12px,var(--native-safe-top,0px)) + 66px))}}
@media(max-height:740px){#menu,#menu.overlay,:is(.native,.web-play) #menu.overlay{overflow:hidden;justify-content:center;gap:8px}#menu>.pill,#menu>.hint{display:none}#menu h2,:is(.native,.web-play) #menu h2{font-size:25px;margin:0}#menu #message{margin:0}#menu>.picker{flex-basis:180px}#menu .pick canvas{max-height:60px}#menu .menu-tools{margin:0}.gameover h2{font-size:28px}.gameover .result-total strong{font-size:38px}}
@media(max-height:460px){#menu>h2,#menu>#message{display:none}#menu>.picker{flex:1;min-height:92px}#menu .pick canvas{max-height:32px}#menu .pick strong{font-size:10px}#menu .empty-pick>span{font-size:20px}#menu .menu-tools button{min-height:36px;padding:5px}#menu .primary{min-height:44px;padding:10px}.gameover{gap:7px;padding-top:8px;padding-bottom:16px}.gameover h2{font-size:23px}.gameover .result-total strong{font-size:28px}.gameover .result-total span{font-size:10px}.gameover #result{gap:3px;grid-template-rows:auto minmax(0,1fr)}.gameover #result-caption{display:none}.gameover .primary{min-height:46px;padding:10px}:is(.native,.web-play) .gameover{padding-top:8px}}
/* Mode choice stays outside gameplay input. No Classic save keys are repurposed. */
.modes{display:flex;gap:4px;padding:4px;border:1px solid #9aaf91;border-radius:14px;background:#e3eacb;flex-shrink:0}
.modes button{flex:1;min-height:38px;border:0;border-radius:10px;background:transparent;color:var(--ink);font:700 13px 'Trebuchet MS',sans-serif}
.modes button[aria-pressed="true"]{background:#fff8df;box-shadow:0 1px 4px #224e4722}
.modes small{font-size:8px;color:#896329;margin-left:4px}
@media(max-height:740px){#menu{gap:6px}#menu>.picker{flex-basis:145px;min-height:96px}#menu .modes button{min-height:34px}#menu #message{font-size:10px}}
@media(max-height:460px){#menu{gap:4px}#menu>.picker{min-height:80px}.modes{padding:2px}#menu .modes button{min-height:30px;font-size:12px}}
.web-play{--native-safe-top:env(safe-area-inset-top,0px);--native-safe-right:env(safe-area-inset-right,0px);--native-safe-bottom:env(safe-area-inset-bottom,0px);--native-safe-left:env(safe-area-inset-left,0px)}
.web-play .menu-tools button{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.secondary{min-height:44px;border:1px solid #9eb397;border-radius:10px;background:var(--cream);padding:10px 18px;margin-top:14px}
/* Adventure status sits on the ground strip{top:auto;left:50%;bottom:max(10px,calc(var(--native-safe-bottom,0px) + 10px));transform:translateX(-50%);max-width:calc(100% - 28px);padding:4px 9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
/* Full-viewport illustrated atlas: only the map surface pans, while controls
   remain outside it and inside genuine device safe areas. */
.stop-complete-dialog{border:3px solid #244b48;border-radius:18px;background:#fff8de;color:#244b48;box-shadow:0 14px 0 #183d3c55;width:min(94vw,640px);max-height:calc(100dvh - var(--native-safe-top,0px) - var(--native-safe-bottom,0px) - 22px);padding:14px;overflow:hidden}
dialog.journey-map-dialog,:is(html.native,html.web-play) dialog.journey-map-dialog{position:fixed;inset:0;margin:0;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;box-sizing:border-box;border:0;border-radius:0;background:#fff8de;color:#244b48;box-shadow:none;padding:max(8px,env(safe-area-inset-top),var(--native-safe-top,0px)) max(8px,env(safe-area-inset-right),var(--native-safe-right,0px)) max(8px,env(safe-area-inset-bottom),var(--native-safe-bottom,0px)) max(8px,env(safe-area-inset-left),var(--native-safe-left,0px));overflow:hidden}
.journey-map-dialog[open]{display:flex;flex-direction:column;gap:8px}
.journey-map-dialog::backdrop,.stop-complete-dialog::backdrop{background:#183b3cbd}
.journey-map-dialog header{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-shrink:0}
.journey-map-dialog h2{font-size:clamp(18px,4vw,27px);margin:0}
.stop-complete-dialog h2{font-size:clamp(21px,4vw,29px);margin:0}
.journey-map-dialog header button{min-height:44px;border:1px solid #8ea993;border-radius:9px;background:#f2ebd2;padding:7px 13px}
.journey-map-art{position:relative;min-height:0;flex:1;background:linear-gradient(145deg,#473678,#223b68 46%,#146967);overflow:hidden;touch-action:none;cursor:grab;outline-offset:-4px}
.journey-map-art:active{cursor:grabbing}
.journey-map-art:focus-visible{outline:3px solid #f6bf40}
.journey-map-art svg{position:absolute;left:0;top:0;display:block;max-width:none;max-height:none;min-height:0;transform-origin:0 0;touch-action:none;user-select:none;-webkit-user-select:none}
.map-stop-marker{cursor:pointer}
.map-stop-marker:focus-visible .map-progress-ring{stroke:#f6cb45;stroke-width:13}
.map-progress-ring{fill:none;stroke:transparent;stroke-width:9}
.journey-map-art .current .map-progress-ring{stroke:#fff;filter:drop-shadow(0 0 7px #5024b4)}
.journey-map-art .selected .map-progress-ring{stroke:#ffcf5f;stroke-width:12}
.journey-map-art .map-stop-marker[aria-disabled="true"]{cursor:default;opacity:.55}
.map-you-flag,.map-earned-check{display:none}
.journey-map-art .current .map-you-flag,.journey-map-art .earned:not(.current) .map-earned-check{display:block}
.map-you-flag rect{fill:#332467;stroke:#fff5bb;stroke-width:3}
.map-you-flag text{fill:white;font:bold 25px 'Trebuchet MS',sans-serif}
.map-earned-check{font:bold 47px 'Trebuchet MS',sans-serif;fill:#1d673e;stroke:#fff8dc;stroke-width:5;paint-order:stroke}
.journey-map-status{flex-shrink:0;font-size:clamp(11px,2vw,14px);line-height:1.25;text-align:center;margin:2px 0}
.journey-actions{display:flex;gap:8px;flex-shrink:0}
.journey-actions button{min-height:46px}
.journey-map-dialog .journey-actions .primary,.stop-complete-dialog .journey-actions .primary{max-width:none}
.journey-map-dialog .journey-actions .primary{padding:10px}
.stop-complete-dialog[open]{display:flex;flex-direction:column;align-items:center;gap:13px;text-align:center;justify-content:center}
.stop-badge{width:86px;height:86px;display:grid;place-items:center;border:4px solid #244b48;border-radius:50%;background:#ffcf5f;font-size:45px;box-shadow:0 6px 0 #244b48}
.stop-summary{font-size:15px;line-height:1.45;max-width:38ch;margin:0}
.stop-complete-dialog .journey-actions{width:100%;flex-direction:column}
.stop-complete-dialog .journey-actions button{margin:0;padding:12px}
@media(max-height:610px){.journey-map-dialog[open]{gap:4px}.journey-map-status{font-size:11px}.stop-badge{width:62px;height:62px;font-size:32px}.stop-complete-dialog[open]{gap:6px}}
@media(prefers-reduced-motion:reduce){.journey-map-art svg{scroll-behavior:auto}}
/* Keep all five scores ahead of optional sharing settings on a Fold cover display. */
#scores-dialog header{padding:8px 0 5px}
#scores-dialog>p{margin:4px 0;font-size:11px;line-height:1.25}
#score-list{margin:3px 0 0}
#score-list li{min-height:48px;padding:2px 0;grid-template-columns:20px 38px minmax(0,1fr) auto;gap:2px 6px}
#score-list canvas{width:38px;height:38px}
#score-list .empty-portrait{width:36px;height:36px}
@media(max-height:600px){#score-list li{min-height:44px}#scores-dialog{padding-bottom:9px}}
/* Ten rows scroll in their own pane; title, Back, tabs and connection stay put. */
#scores-dialog[open]{display:flex;flex-direction:column;height:min(700px,calc(100dvh - var(--native-safe-top,0px) - var(--native-safe-bottom,0px) - 24px));overflow:hidden}
#scores-dialog header,#scores-dialog>p{flex-shrink:0}
#scores-dialog #score-list{overflow-y:auto;overscroll-behavior:contain;min-height:0;flex:1}
/* Mobile browser toolbars can make 100dvh taller than the visible game area.
   Keep the results action clear of the Android gesture strip even when the
   browser reports no CSS safe-area inset. The flexible feast art yields space. */
.web-play main{height:var(--web-visible-height,100dvh)}
@media(max-width:760px),(pointer:coarse){.web-play .gameover{padding-bottom:max(56px,calc(var(--native-safe-bottom,0px) + 28px))}}
/* Every scoreboard uses the same fixed title, tabs{display:contents}
#scores-dialog header{order:0;flex-shrink:0}
#scores-dialog #score-list{order:2;flex:1 1 0;min-height:0;overflow-y:auto;overscroll-behavior:contain;margin:4px 0 0}
/* All score rows share one inset. The self highlight sits behind the content,
   so its green edge never touches the rank, including the first row. */
#score-list li{padding:4px 10px;align-items:center}
/* Keep the full playfield. Build information lives in collapsed score details. */
.native #app-version{position:static;inset:auto;z-index:auto;display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:44px;pointer-events:auto;text-shadow:none}
.native #app-version-details{order:11;flex-shrink:0;border-top:1px solid #d2d8bc;margin-top:3px;font-size:11px}
.native #app-version-details summary{min-height:32px;padding:8px 0;font-weight:700;cursor:pointer}
.native #app-version-details #app-version{padding:4px 0 8px}
/* On normal-height phones{.native #menu{gap:4px}.native #menu>.picker{flex:0 0 195px;min-height:195px;grid-auto-rows:minmax(0,1fr)}.native #menu .pick{padding:3px}.native #menu .pick canvas{flex:0 0 60px;height:60px;max-height:60px}.native #menu .pick small{display:block;flex-shrink:0}}
@media(min-height:600px){.native #menu>.picker{flex:0 0 200px;min-height:200px;grid-auto-rows:minmax(0,1fr)}.native #menu .pick canvas{flex:0 0 52px;height:52px;max-height:52px}.native #menu .pick small{display:block;flex-shrink:0}.native #menu .empty-pick>span{flex-shrink:0}.native #menu .pick strong{flex-shrink:0;line-height:1.2}}
/* Results keep the score centered and offer two clear paths back through the
   normal selection state. Only the results pane changes; the menu stays intact. */
.gameover .result-total{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}
.gameover .result-total strong{display:block;line-height:1}
.gameover .result-total span{display:block;line-height:1.2;white-space:nowrap}
.gameover .result-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-items:stretch}
.gameover .result-actions button{min-width:0;min-height:50px;margin:0;padding:9px 4px;font-size:clamp(11px,2.8vw,14px);font-weight:800;letter-spacing:0}
.gameover .result-actions .primary{min-height:60px;font-size:clamp(16px,4.2vw,20px);font-weight:900}
.gameover .result-actions #results-leaderboards{background:#fff8df;box-shadow:0 3px 0 var(--ink)}
.journey-map-art{background:var(--map-ground,#bfe3a5)}
/* Full-screen map: the map runs edge to edge under the system bars, and the
   title, Back, status and Start float over it inside the safe area. */
dialog.journey-map-dialog,:is(html.native,html.web-play) dialog.journey-map-dialog{padding:0;background:var(--map-ground,#bfe3a5)}
.journey-map-dialog[open]{display:block}
.journey-map-dialog .journey-map-art{position:absolute;inset:0;z-index:0}
.journey-map-dialog header,.journey-map-footer{position:absolute;z-index:2;left:max(10px,env(safe-area-inset-left),var(--native-safe-left,0px));right:max(10px,env(safe-area-inset-right),var(--native-safe-right,0px));pointer-events:none}
.journey-map-dialog header{top:max(10px,env(safe-area-inset-top),var(--native-safe-top,0px));align-items:flex-start}
.journey-map-footer{bottom:max(12px,env(safe-area-inset-bottom),var(--native-safe-bottom,0px));display:flex;flex-direction:column;align-items:center;gap:8px}
.journey-map-dialog header>*,.journey-map-footer>*{pointer-events:auto}
.journey-map-dialog h2{background:#fff8deeb;border:3px solid #244b48;border-radius:16px;padding:6px 14px;box-shadow:0 4px 0 #244b4840}
.journey-map-dialog header button{background:#fff8de;border:3px solid #244b48;border-radius:14px;font-weight:800;box-shadow:0 4px 0 #244b4840}
.journey-map-footer .journey-map-status{margin:0;max-width:min(100%,560px);background:#fff8deeb;border:2px solid #244b4866;border-radius:14px;padding:5px 12px}
.journey-map-footer .journey-actions{width:min(100%,560px)}
.journey-map-art .map-surface[data-depth]{pointer-events:none}
.journey-map-art .map-surface{will-change:transform}
.journey-map-art .current .map-progress-ring{filter:none;stroke:#fff;stroke-width:10}
.journey-map-art .cartoon-map-title{font:800 19px system-ui,sans-serif;fill:#294c45;letter-spacing:.2px}
.journey-map-art .map-stop-number{font:900 19px system-ui,sans-serif;fill:#38275b;stroke:#fff9de;stroke-width:2px;paint-order:stroke}
.journey-map-art .map-unknown-player{font:900 30px system-ui,sans-serif;fill:#8d7396}
.journey-map-art .map-player-name{font:800 14px system-ui,sans-serif;fill:#34305b;stroke:#fff9e7;stroke-width:3px;paint-order:stroke}
.journey-map-art .map-route-progress{fill:none;stroke:#f6be4d;stroke-width:12;stroke-linecap:round;opacity:0;pointer-events:none}
.journey-map-art .map-route-progress.complete{opacity:1}
.journey-map-art .map-player-portrait,.journey-map-art .map-cartoon-art{pointer-events:none}
.journey-map-art .map-stop-marker[aria-disabled="true"]{opacity:1}
.journey-map-art .map-stop-marker[aria-disabled="true"]>circle:first-child{fill:#f4eedb;stroke:#294c45}
.journey-map-art .map-stop-marker[aria-disabled="true"] .map-stop-number{display:none}
.journey-map-art .map-stop-marker[aria-disabled="true"] .map-unknown-player{fill:#7b8f86}
.journey-map-art .map-water{animation:map-water-drift 3s ease-in-out infinite alternate}
.journey-map-art .map-wheel{transform-box:view-box;transform-origin:0 0;animation:map-wheel-turn 14s linear infinite}
.journey-map-art .map-flag{transform-box:fill-box;transform-origin:left center;animation:map-flag-wave 1.1s ease-in-out infinite alternate}
.journey-map-art :is(.map-smoke,.map-rock,.map-snow,.map-sway,.map-bob){transform-box:view-box;transform-origin:0 0}
.journey-map-art .map-smoke{animation:map-smoke 3.3s ease-out infinite}
.journey-map-art .map-rock{animation:map-rock 2.4s ease-in-out infinite alternate}
.journey-map-art .map-snow{animation:map-snow 4s linear infinite}
.journey-map-art .map-sway{animation:map-sway 2.8s ease-in-out infinite alternate}
.journey-map-art .map-bob{animation:map-bob 1.9s ease-in-out infinite alternate}
.journey-map-art .map-flutter{animation:map-flutter 2.4s ease-in-out infinite alternate}
.journey-map-art .map-bubble{animation:map-bubble-rise 3.2s ease-in-out infinite alternate}
.journey-map-art .map-flame{transform-box:fill-box;transform-origin:top center;animation:map-flame 0.5s ease-in-out infinite alternate}
.journey-map-art .map-glow{animation:map-glow 2.6s ease-in-out infinite alternate}
.journey-map-art .map-twinkle{transform-box:fill-box;transform-origin:center;animation:map-twinkle 2.2s ease-in-out infinite alternate}
@keyframes map-water-drift{to{translate:0 5px}}
@keyframes map-wheel-turn{to{rotate:360deg}}
@keyframes map-flag-wave{from{scale:1 .9}to{scale:.62 1.12}}
@keyframes map-smoke{from{translate:0 0;scale:.5;opacity:.9}to{translate:-10px -54px;scale:1.5;opacity:0}}
@keyframes map-rock{from{rotate:-7deg}to{rotate:7deg}}
@keyframes map-snow{from{translate:0 -10px;opacity:0}20%{opacity:1}to{translate:-8px 70px;opacity:0}}
@keyframes map-sway{from{rotate:-6deg}to{rotate:6deg}}
@keyframes map-bob{from{translate:0 4px}to{translate:0 -10px}}
@keyframes map-flutter{to{translate:-10px -8px}}
@keyframes map-bubble-rise{to{translate:0 -12px}}
@keyframes map-flame{to{scale:.85 1.25}}
@keyframes map-glow{from{opacity:.25}to{opacity:.7}}
@keyframes map-twinkle{from{scale:.7;opacity:.55}to{scale:1.1;opacity:1}}
.journey-map-dialog:not([open]) .map-cartoon-art *,.journey-map-dialog.map-paused .map-cartoon-art *{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.journey-map-art .map-cartoon-art *{animation:none}}
.update-dialog{text-align:center;width:min(380px,calc(100vw - 24px))}
.update-dialog .update-icon{display:block;width:150px;max-width:60%;height:auto;margin:0 auto 4px;animation:update-pop .7s cubic-bezier(.2,1.6,.4,1) both}
.update-dialog h2{font-size:27px;margin:6px 0 8px}
.update-dialog p{font-size:15px;line-height:1.5;margin:0 0 18px}
.update-dialog .primary{min-height:54px;font-size:18px}
.update-dialog .primary:disabled{opacity:.7;cursor:default}
@keyframes update-pop{0%{transform:scale(.2) rotate(-20deg);opacity:0}60%{transform:scale(1.2) rotate(6deg);opacity:1}100%{transform:none}}
@media (prefers-reduced-motion:reduce){.update-dialog .update-icon{animation:none}}
.native .privacy-choices{order:12;display:block;width:100%;min-height:40px;margin-top:6px;border:1px solid #9eb397;border-radius:10px;background:transparent;font-size:12px}

/* Scaffold additions */
#instructions{margin:4px 0}.story-step{display:flex;gap:14px;align-items:center;margin:14px 0;font-size:13px}.story-step b{border:1px solid #8bab93;border-radius:50%;width:28px;height:28px;display:grid;place-items:center;font-size:10px}
.story .seal{margin-top:40px;font-size:10px;font-weight:bold;letter-spacing:1px}.story .seal span{margin:0 14px;font-size:22px}
#paused .secondary{margin-top:14px}
.privacy-choices{display:block;margin:12px auto 0;min-height:38px;border:1px solid #a8bba0;background:#fff8df;border-radius:10px;padding:7px 12px;font-size:11px}
/* Longer game names than FARTY need a smaller desktop title. */
.story h1{font-size:clamp(36px,4.6vw,56px);letter-spacing:0;text-shadow:none;width:fit-content}
/* The menu blurb changes with the mode (Classic is short, Adventure wraps on phones). Reserve two
   lines so switching modes never shifts or squeezes the player picker. */
#menu #message{line-height:1.35;min-height:2.7em;text-wrap:balance}

/* The logo (branding/logo.html): in the side panel on wide screens, atop the menu everywhere else
   (the apps, phones, the Fold). Its size comes from here; its look from branding/logo.css. */
.story h1 .logo{font-size:inherit}
#menu>.menu-logo{display:flex;justify-content:center;margin:0 0 2px}
.menu-logo .logo{align-items:center;font-size:clamp(34px,10.5vw,50px);transform:rotate(-3deg)}
.menu-logo .logo-2{margin-left:0}
@media(min-width:761px) and (min-height:600px){html:not(.native) #menu>.menu-logo{display:none}}
@media(max-height:700px){.menu-logo .logo{font-size:clamp(30px,8.6vw,40px)}#menu>.pill{display:none}}
/* The mode switch and tool buttons line up with the player picker: full width in the framed (desktop)
   cabinet, and centered at the picker's width on short landscape screens. */
#menu>.modes,#menu>.menu-tools{align-self:center;width:100%}
@media(max-height:599px) and (max-width:999px){#menu>.modes,#menu>.menu-tools{max-width:340px}}
/* Desktop: the map and level cards open inside the framed cabinet (level-map-ui.js sets --cab-*). */
html dialog.journey-map-dialog.in-cabinet{inset:auto;top:var(--cab-top);left:var(--cab-left);width:var(--cab-width);max-width:var(--cab-width);height:var(--cab-height);max-height:var(--cab-height);border-radius:20px;overflow:hidden}
html dialog.stop-complete-dialog.in-cabinet{position:fixed;inset:auto;margin:0;left:calc(var(--cab-left) + 12px);width:calc(var(--cab-width) - 24px);top:calc(var(--cab-top) + var(--cab-height) / 2);transform:translateY(-50%);max-height:calc(var(--cab-height) - 24px)}

/* Website game (/play/, src/web-entry.js): the "Get the full game" panel, store badges and the
   ways back to the homepage (menu, pause menu, atop the desktop side panel). */
.get-app-dialog p{font-size:14px;line-height:1.5;margin:0 0 8px}
.get-app-dialog ul{margin:0 0 14px;padding-left:20px;font-weight:bold;line-height:1.6}
.get-app-dialog .primary{width:100%;margin-top:14px}
.badge-row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 18px;margin:0}
.badge-row figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:4px}
.badge-row a{display:block}
.badge-row img{display:block;height:48px;width:auto}
.badge-row figure.soon img{opacity:.55}
.badge-row figcaption{font-size:11px;font-weight:bold;letter-spacing:1.5px;text-transform:uppercase}
.web-home-link{display:block;margin-top:12px;color:var(--ink);font-size:13px;font-weight:bold;text-underline-offset:3px}
.menu-tools .menu-home{display:flex;align-items:center;justify-content:center;min-height:36px;flex:0 0 auto;padding:5px 12px;border:1px solid #a8bba0;background:#fff8df;border-radius:10px;font-size:11px;font-weight:bold;color:var(--ink);text-decoration:none}
.story-home{display:flex;width:fit-content;align-items:center;min-height:44px;padding:8px 16px;margin-bottom:22px;border:2px solid var(--ink);border-radius:12px;background:var(--cream);box-shadow:3px 4px 0 var(--ink);color:var(--ink);font-weight:bold;font-size:14px;text-decoration:none}
.story-home:hover{transform:translate(-1px,-1px);box-shadow:4px 5px 0 var(--ink)}
.story .badge-row{justify-content:flex-start;margin:4px 0 26px}
@media(max-height:780px) and (min-width:680px){.story .tagline{margin-top:22px}.story .seal{margin-top:14px}.story .badge-row{margin-bottom:14px}.story-home{margin-bottom:12px}}
/* ── Badges: the level-complete reveal (badge-reveal.js) and the collection page (badge-collection.js) ── */
.journey-map-tools{display:flex;gap:6px;align-items:center}
.stop-complete-dialog{position:fixed}
.badge-reveal{--badge-size:clamp(92px,min(46vw,30dvh),210px);position:relative;width:var(--badge-size);height:var(--badge-size);flex-shrink:0;display:grid;place-items:center}
.badge-reveal[hidden]{display:none}
.badge-reveal-art{position:relative;z-index:1;width:100%;height:100%;display:block;filter:drop-shadow(0 5px 0 #183d3c44)}
.badge-reveal.quiet{--badge-size:clamp(78px,min(32vw,22dvh),136px)}
.badge-reveal-rays{position:absolute;inset:-34%;border-radius:50%;opacity:0;background:repeating-conic-gradient(from 0deg,#ffe28acc 0 9deg,#ffe28a00 9deg 22deg);-webkit-mask:radial-gradient(circle,#000 30%,#0000 70%);mask:radial-gradient(circle,#000 30%,#0000 70%)}
.badge-reveal-shine{position:absolute;z-index:2;inset:9% 9% 16%;border-radius:50%;overflow:hidden;pointer-events:none}
.badge-reveal-shine::before{content:'';position:absolute;top:-20%;bottom:-20%;width:38%;left:-60%;background:linear-gradient(100deg,#fff0,#fffc 45%,#fff0);transform:skewX(-18deg);opacity:0}
.badge-reveal.big .badge-reveal-art{animation:badge-pop .9s cubic-bezier(.2,.9,.3,1.25) both}
.badge-reveal.big .badge-reveal-rays{animation:badge-rays-in .6s .25s ease-out forwards,badge-rays-spin 16s linear infinite}
.badge-reveal.big .badge-reveal-shine::before{animation:badge-shine .8s .75s ease-in-out both}
.badge-reveal.quiet .badge-reveal-art{animation:badge-settle .45s ease-out both}
.badge-confetti{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
.stop-complete-dialog.badge-new h2{font-family:'Arial Black','Trebuchet MS',sans-serif;font-weight:1000;font-size:clamp(24px,6.4vw,38px);line-height:1.02;letter-spacing:-1px;max-width:16ch;animation:badge-title .55s .35s ease-out both}
.stop-all-badges{border:0;background:none;padding:6px 10px;min-height:40px;font-size:13px;font-weight:bold;text-decoration:underline;text-underline-offset:3px;color:inherit}
.stop-all-badges[hidden]{display:none}
@keyframes badge-pop{0%{transform:scale(.1) rotate(-30deg);opacity:0}45%{transform:scale(1.18) rotate(6deg);opacity:1}68%{transform:scale(.93) rotate(-2deg)}84%{transform:scale(1.04)}100%{transform:none}}
@keyframes badge-rays-in{to{opacity:1}}
@keyframes badge-rays-spin{to{rotate:360deg}}
@keyframes badge-shine{0%{left:-60%;opacity:1}100%{left:125%;opacity:1}}
@keyframes badge-settle{from{transform:scale(.7);opacity:0}to{transform:none;opacity:1}}
@keyframes badge-title{from{transform:translateY(10px) scale(.9);opacity:0}to{transform:none;opacity:1}}
@media(max-height:610px){.badge-reveal{--badge-size:clamp(80px,26dvh,150px)}.badge-reveal.quiet{--badge-size:clamp(64px,18dvh,100px)}.stop-complete-dialog.badge-new h2{font-size:clamp(20px,5vh,30px)}.stop-all-badges{min-height:32px;padding:2px}}
@media(prefers-reduced-motion:reduce){.badge-reveal .badge-reveal-art,.badge-reveal.big .badge-reveal-art,.badge-reveal.quiet .badge-reveal-art,.stop-complete-dialog.badge-new h2{animation:badge-fade .3s ease-out both}.badge-reveal.big .badge-reveal-rays{animation:none;opacity:.7}.badge-reveal.big .badge-reveal-shine::before{animation:none}}
@keyframes badge-fade{from{opacity:0}to{opacity:1}}
#scores-badges{flex-shrink:0;width:100%;font-weight:bold;margin-top:10px}
#badges-dialog{width:min(760px,calc(100vw - 24px));padding-top:0}
#badges-dialog[open]{display:flex;flex-direction:column;height:min(860px,calc(100dvh - var(--native-safe-top,0px) - var(--native-safe-bottom,0px) - 24px));overflow:hidden}
#badges-dialog header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-shrink:0;padding:12px 0 6px}
#badges-dialog header h2{margin:0}
#badges-dialog header button{min-height:42px;border:1px solid #9eb397;border-radius:10px;background:transparent;padding:8px 14px}
.badges-progress,.badges-note{flex-shrink:0;margin:2px 0 6px;font-size:13px;line-height:1.35}
.badges-progress{font-weight:bold}
.badges-note{background:#fff0c4;border:1px solid #e3c26a;border-radius:10px;padding:7px 10px;font-size:12px}
.badges-note[hidden]{display:none}
.badge-grid{list-style:none;margin:4px 0 0;padding:4px 2px 12px;display:grid;grid-template-columns:repeat(auto-fill,minmax(102px,1fr));gap:12px 8px;overflow-y:auto;overscroll-behavior:contain;min-height:0;flex:1}
.badge-card-body{display:flex;flex-direction:column;align-items:center;gap:3px;width:100%;height:100%;text-align:center;border:0;background:none;padding:4px 2px;border-radius:12px;font:inherit;color:inherit}
button.badge-card-body:hover{background:#f6edcc}
.badge-card-art{position:relative;width:min(100%,120px);aspect-ratio:1}
.badge-card-art img{width:100%;height:100%;display:block}
.badge-card:not(.earned) .badge-card-art img{filter:grayscale(1) contrast(.7) brightness(1.12);opacity:.5}
.badge-lock{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);font-size:28px;filter:drop-shadow(0 2px 0 #fff8de)}
.badge-card strong{font-size:13px;line-height:1.15}
.badge-card small{font-size:11px;line-height:1.25;color:#4f6b62}
.badge-card:not(.earned) strong{color:#667a71}
.badge-paid-tag{font-style:normal;font-size:10px;font-weight:bold;letter-spacing:.5px;text-transform:uppercase;background:#ffce57;border:1.5px solid var(--ink);border-radius:999px;padding:1px 8px;margin-top:2px}
@media(max-width:380px){.badge-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 4px}.badge-card strong{font-size:12px}.badge-card small{font-size:10px}}
/* Short landscape screens: badge beside the words, so nothing is pushed off the card. */
.stop-complete-dialog[open]{justify-content:safe center}
@media(max-height:500px) and (min-width:540px){
 .stop-complete-dialog[open]{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:18px;row-gap:6px;align-content:center;align-items:center;text-align:left}
 .stop-complete-dialog>.stop-badge,.stop-complete-dialog>.badge-reveal{grid-column:1;grid-row:1/span 4;justify-self:center}
 .stop-complete-dialog>:not(.stop-badge,.badge-reveal,.badge-confetti){grid-column:2}
 .badge-reveal{--badge-size:clamp(96px,min(30vw,60dvh),190px)}.badge-reveal.quiet{--badge-size:clamp(80px,40dvh,130px)}
 .stop-complete-dialog.badge-new h2{max-width:none;font-size:clamp(20px,6.5vh,30px)}
 .stop-all-badges{justify-self:start}
}

/* Adopt a cat */
.menu-tools .edit-cat{font-weight:bold}
#adopt-preview{display:block;width:100%;height:auto;max-height:150px;object-fit:contain}
.style-cycle{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:6px 0}
.style-cycle button{width:44px;height:44px;border:2px solid var(--ink);border-radius:50%;background:var(--yellow);font-size:20px;color:var(--ink)}
.style-cycle output{font-weight:bold;font-size:15px;text-align:center}
#reroll{display:block;min-height:42px;margin:8px auto 14px;padding:8px 14px;border:1px dashed #91aa88;border-radius:10px;background:transparent;font-size:13px;color:var(--ink)}
#adopt-dialog label{display:block;font-size:13px;font-weight:bold;margin:8px 0}
#adopt-dialog input{display:block;width:100%;box-sizing:border-box;font:inherit;font-size:16px;min-height:46px;padding:10px;border:2px solid #8ca47f;border-radius:10px;background:white;color:var(--ink)}
#adopt-error{font-size:12px;color:#a23d28;min-height:16px;margin:5px 0}
.adopt-actions{display:flex;gap:10px;align-items:center}
.adopt-actions button{min-height:46px}
.adopt-actions #adopt-cancel{border:1px solid #9eb397;border-radius:10px;padding:12px;background:transparent;color:var(--ink)}
.adopt-actions .primary{flex:1;min-width:0;font-size:13px;padding:12px}
#adopt-dialog .local-note{font-size:10px;text-align:center;margin:14px 0 0}
@media(max-height:640px){#adopt-dialog{padding:14px}#adopt-preview{max-height:100px}#reroll{margin:4px auto 8px}#adopt-dialog .local-note{display:none}}

/* Gear cyclers in the adopt dialog (suit, helmet): a touch tighter than the coat row. */
.gear-cycle{margin:2px 0}
.gear-cycle button{width:38px;height:38px;font-size:17px}
.gear-cycle output{font-size:14px}
@media(max-height:640px){.gear-cycle button{width:34px;height:34px}}
/* Map pages (games with more than 30 levels): the sector name between two arrows, under the title bar. */
.journey-map-pager{position:absolute;left:50%;top:calc(100% + 8px);transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:4px;border:3px solid var(--ink);border-radius:999px;background:#fff8de;box-shadow:0 4px 0 var(--ink);pointer-events:auto}
.journey-map-pager[hidden]{display:none}
.journey-map-dialog .journey-map-pager button{min-height:0;padding:0;width:40px;height:40px;border:2px solid var(--ink);border-radius:50%;background:var(--yellow);color:var(--ink);font-size:16px;line-height:1}
.journey-map-dialog .journey-map-pager button:disabled{opacity:.35}
.map-page-label{min-width:150px;text-align:center;font:900 14px 'Arial Black',sans-serif;color:var(--ink);white-space:nowrap}
.overlay{background:none}
/* No pale wash behind the menus: the game stays in full color, so words on it wear an outline or a chip. */
.overlay h2{color:#fff;-webkit-text-stroke:.14em var(--ink);paint-order:stroke fill;text-shadow:0 .09em 0 var(--ink)}
.overlay p,.overlay .hint{width:fit-content;max-width:100%;padding:3px 12px;color:var(--ink);background:var(--cream);border-radius:999px}
.overlay p:empty{display:none}
#paused .billing-entry{flex:0 0 auto;margin-top:10px}
/* The results show: everything arrives in turn, the score lands with a bump, a new best glows. */
.gameover h2{animation:results-pop .5s cubic-bezier(.2,1.6,.4,1) both,results-wobble 2.8s .6s ease-in-out infinite}
.gameover #result-caption{animation:results-pop .45s .25s cubic-bezier(.2,1.6,.4,1) both}
.gameover .result-actions{animation:results-rise .45s .4s cubic-bezier(.2,1.4,.4,1) both}
.gameover .result-total.landed{animation:results-land .5s cubic-bezier(.2,1.8,.4,1)}
.gameover.record #result-caption{font-family:'Arial Black','Trebuchet MS',sans-serif;background:var(--yellow);animation:results-pop .45s .25s cubic-bezier(.2,1.6,.4,1) both,results-best .6s .7s ease-in-out infinite alternate}
.results-rain{position:absolute;inset:0;width:100%!important;height:100%;max-width:none!important;pointer-events:none}
/* The big scene gets the room: the title stays on one line where it can, and on a phone on its side the hero takes the left half. */
.gameover h2{max-width:min(100%,900px)}
@media(max-height:520px){.gameover{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;column-gap:16px}.gameover #result{display:contents}.gameover #result-art{grid-column:1;grid-row:1/4;align-self:center}.gameover h2{grid-column:2;grid-row:1;font-size:clamp(24px,8vmin,34px)}.gameover .result-total{grid-column:2;grid-row:2;align-self:center;padding:3px 18px 5px}.gameover .result-total strong{font-size:34px}.gameover #result-caption{display:none}.gameover .result-actions{grid-column:2;grid-row:3;max-width:none}}
@keyframes results-wobble{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg) scale(1.03)}}
@keyframes results-rise{from{opacity:0;transform:translateY(46px)}}
@keyframes results-land{0%{transform:scale(1)}35%{transform:scale(1.38) rotate(-3deg)}100%{transform:scale(1)}}
@keyframes results-best{to{transform:scale(1.1)}}
/* A tap shows no keyboard ring on the button that was focused for it. */
@media(pointer:coarse){.gameover .primary:focus-visible{outline:none}}
@media(prefers-reduced-motion:reduce){.gameover h2,.gameover #result-caption,.gameover .result-actions,.gameover .result-total.landed,.gameover.record #result-caption{animation:none}}
/* Wide, short screens (an unfolded phone): the cat cards take the height that's left, so BLAST OFF always fits. */
@media(min-width:680px) and (min-height:521px) and (max-height:820px){html #menu>.picker,html:is(.native,.web-play) #menu>.picker{flex:1 1 0;min-height:0;grid-auto-rows:minmax(0,1fr);grid-template-rows:repeat(2,minmax(0,1fr))}#menu .pick{min-height:0;overflow:hidden}}

/* The menu in full color: logo, then straight to the cats, who are always on show. Each card has its
   own color (--a,--b; retheme them per game), the chosen cat stands on a spinning sunburst, adopt cards glow, every control is chunky.
   The whole style, part by part: docs/MENU-STYLE.md. */
#menu>.pill,#menu>#title,#menu>#message,#menu>.hint{display:none!important}
#menu,#menu.overlay,:is(.native,.web-play) #menu.overlay{justify-content:flex-start;background:none}
#menu>.menu-logo{position:relative;margin-top:max(6px,1.5vh)}
#menu>.menu-logo::before{content:"";position:absolute;left:50%;top:50%;width:min(118%,560px);aspect-ratio:2/1;translate:-50% -50%;background:radial-gradient(closest-side,#fff0a8cc,#ffb52e66 50%,#ff5a6a26 72%,#0000);animation:menu-halo 2.4s ease-in-out infinite alternate;pointer-events:none}
#menu>.menu-logo .logo{position:relative;font-size:clamp(40px,13vw,60px)}
@media(max-height:760px){#menu>.menu-logo .logo{font-size:clamp(32px,10vw,46px)}}
@media(min-width:761px) and (min-height:600px){html:not(.native) #menu>.menu-logo{display:flex}html:not(.native) #menu>.menu-logo .logo{font-size:44px}}
/* The picker never squeezes its cats: natural height on every screen, cats at least 72px tall. */
#menu>.picker,:is(.native,.web-play) #menu>.picker{flex:0 0 auto;min-height:0;width:100%}
#menu .picker .pick canvas{flex-shrink:1;width:100%;height:min(150px,17vh);max-height:min(150px,17vh);min-height:72px}
@media(min-width:600px){#menu>.picker,#menu>.modes,#menu>.menu-tools,#menu>#start{max-width:620px}#menu .picker .pick canvas{height:min(190px,18vh);max-height:min(190px,18vh)}}
#menu .pick{position:relative;padding:0;gap:0;justify-content:flex-start;border:3px solid var(--ink);border-radius:18px;overflow:hidden;box-shadow:0 4px 0 var(--ink);--a:#f0846a;--b:#c9503f;background:radial-gradient(circle at 16% 14%,#ffffff55 0 3px,#0000 3.6px),radial-gradient(circle at 84% 22%,#fff3a066 0 4px,#0000 4.6px),linear-gradient(165deg,var(--a),var(--b))}
#menu .pick:nth-child(6n+2){--a:#6bbfd6;--b:#2f7fa8}
#menu .pick:nth-child(6n+3){--a:#a78be8;--b:#6048b4}
#menu .pick:nth-child(6n+4){--a:#7ccb8a;--b:#3a8f62}
#menu .pick:nth-child(6n+5){--a:#f4a84e;--b:#d0702a}
#menu .pick:nth-child(6n){--a:#ee8ab4;--b:#b84a84}
#menu .pick[aria-pressed=true]{z-index:1;background:radial-gradient(circle at 50% 44%,#fff8c8,#ffd257 52%,#ff9c2e);transform:translateY(-3px) rotate(-1.5deg) scale(1.03);animation:menu-chosen 1.3s ease-in-out infinite alternate}
#menu .pick strong{position:relative;z-index:1;flex-shrink:0;align-self:center;width:fit-content;max-width:92%;margin:-14px auto 5px;padding:1px 10px;font-size:12px;font-weight:900;color:var(--ink);background:var(--cream);border:2px solid var(--ink);border-radius:999px}
#menu .pick small{display:none!important}
#menu .empty-pick,#menu .empty-pick[aria-pressed]{justify-content:center;gap:4px;border:3px dashed #fff0a0;box-shadow:0 0 12px 2px #ffe27a99;background:radial-gradient(circle at 14% 22%,#fff 0 1.4px,#0000 2px),radial-gradient(circle at 84% 72%,#ffe27a 0 1.6px,#0000 2.2px),linear-gradient(165deg,#3f6f62,#1f4a44);animation:menu-adopt 1.6s ease-in-out infinite alternate}
#menu .empty-pick>span{display:grid;place-items:center;flex-shrink:0;width:36px;height:36px;font-size:24px;font-weight:900;line-height:1;color:var(--ink);background:linear-gradient(#ffe27a,#ffb52e);border:3px solid var(--ink);border-radius:50%;animation:menu-plus 1.2s ease-in-out infinite alternate}
#menu .empty-pick strong{margin:0 auto;padding:0 4px;font-size:12px;white-space:normal;color:var(--cream);background:none;border:0}
#menu .locked-pick,#menu .locked-pick[aria-pressed]{opacity:1;background:linear-gradient(165deg,#5a7168,#2f4a42);border-color:#cfe0c8;box-shadow:none;animation:none}
#menu .locked-pick>span{background:#fff7dc;animation:none;font-size:18px}
#menu .modes{padding:4px;border:3px solid var(--ink);border-radius:16px;background:#2f6a5c;box-shadow:0 4px 0 var(--ink)}
#menu .modes button{font-size:14px;font-weight:900;color:var(--cream);transition:background .15s}
#menu .modes button[aria-pressed=true]{color:var(--ink);background:linear-gradient(#ffe27a,#ffb52e);box-shadow:0 2px 0 #0003}
#menu .menu-tools button{font-size:12px;font-weight:900;color:var(--ink);background:var(--cream);border:3px solid var(--ink);border-radius:12px;box-shadow:0 3px 0 var(--ink)}
#menu #start{position:relative;overflow:hidden;font-family:'Arial Black','Trebuchet MS',sans-serif;font-size:18px;background:linear-gradient(#fff0a0,#ffc23a 55%,#ff9c2e);border:3px solid var(--ink);box-shadow:0 5px 0 var(--ink);animation:results-go 1s ease-in-out infinite}
#menu #start::before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,#fff0 40%,#fffc 50%,#fff0 60%);translate:-100% 0;animation:menu-sweep 3s ease-in-out infinite}
#menu #start::after{content:"";display:inline-block;width:1.3em;height:1.15em;margin-left:.5em;vertical-align:-.15em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 90'%3E%3Cellipse cx='50' cy='60' rx='26' ry='22' fill='%23efac59' stroke='%23294c45' stroke-width='6'/%3E%3Ccircle cx='20' cy='34' r='11' fill='%23efac59' stroke='%23294c45' stroke-width='6'/%3E%3Ccircle cx='38' cy='18' r='11' fill='%23efac59' stroke='%23294c45' stroke-width='6'/%3E%3Ccircle cx='62' cy='18' r='11' fill='%23efac59' stroke='%23294c45' stroke-width='6'/%3E%3Ccircle cx='80' cy='34' r='11' fill='%23efac59' stroke='%23294c45' stroke-width='6'/%3E%3Cellipse cx='50' cy='62' rx='12' ry='9' fill='%23f5b3c4'/%3E%3C/svg%3E") center/contain no-repeat;transform-origin:50% 100%;animation:menu-stomp .8s cubic-bezier(.5,0,.6,1) infinite}
#menu .menu-tools :is(button,a):active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
#menu #start:active{animation:none;transform:translateY(3px);box-shadow:0 2px 0 var(--ink)}
#menu .pick{transition:transform .15s}
/* The menu rests while something covers it. */
html:has(dialog[open]) #menu :is(*,*::before,*::after){animation-play-state:paused}
@keyframes menu-halo{from{opacity:.6;scale:.94}to{opacity:1;scale:1.06}}
@keyframes menu-chosen{from{box-shadow:0 5px 0 var(--ink),0 0 8px 1px #ffd257}to{box-shadow:0 5px 0 var(--ink),0 0 24px 6px #ffd257}}
@keyframes menu-adopt{from{box-shadow:0 0 6px 1px #ffe27a66}to{box-shadow:0 0 16px 4px #ffe27acc}}
@keyframes menu-plus{from{transform:scale(.92) rotate(-6deg)}to{transform:scale(1.1) rotate(6deg)}}
@keyframes menu-sweep{0%{translate:-100% 0}45%,100%{translate:100% 0}}
@keyframes menu-nod{from{transform:rotate(-8deg)}to{transform:rotate(8deg)}}
@keyframes menu-stomp{0%,100%{transform:translateY(0) scale(1.08,.92)}45%{transform:translateY(-.32em) rotate(-10deg) scale(.96,1.05)}70%{transform:translateY(0) scale(1.12,.88)}}
@media(prefers-reduced-motion:reduce){#menu>.menu-logo::before,#menu .pick[aria-pressed=true],#menu .empty-pick,#menu .empty-pick>span,#menu #start,#menu #start::before,#menu #start::after{animation:none}}
/* Wide: all six cats in one line, left to right, every cat the same size. An unfolded phone held wide, then a phone on its side. */
@media(min-width:680px) and (min-height:521px) and (max-height:820px){html:is(.native,.web-play) #menu>.picker{flex:1 1 0;min-height:0;max-width:min(1040px,94vw);grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:minmax(0,1fr);grid-auto-rows:0}html:is(.native,.web-play) #menu .picker .pick canvas{flex:1 1 0;height:auto;max-height:none;min-height:0}html:is(.native,.web-play) #menu>.modes,html:is(.native,.web-play) #menu>.menu-tools,html:is(.native,.web-play) #menu>#start{max-width:min(1040px,94vw)}}
@media(max-height:520px){#menu>.menu-logo{display:none}html #menu>.picker,html:is(.native,.web-play) #menu>.picker{flex:1 1 0;min-height:0;max-width:760px;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:minmax(0,1fr);grid-auto-rows:0}#menu .picker .pick canvas{flex:1 1 0;height:auto;max-height:none;min-height:0}#menu .empty-pick>span{width:28px;height:28px;font-size:18px}#menu>.modes,#menu>.menu-tools,#menu>#start{max-width:760px}}
/* The app has the status bar to clear too: a little less cat height, so the start button is never cut off on a Fold's cover screen. */
@media(max-height:820px) and (max-width:679px){html.native #menu .picker .pick canvas{height:15.3vh;max-height:15.3vh}}

/* The share panel and SHARE buttons (src/share.js, docs/SHARE-STYLE.md). SHARE sits between Scores and Play again,
   on the level card and under the boss party's card. The panel slides up from the bottom with the picture and the
   phone's own share sheet (Share…), Copy image, or Save image on a desktop browser. */
.gameover .result-actions{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.45fr)}
.share-button,.stop-share,.boss-party-share{background:#a9e4f2;color:var(--ink);border:3px solid var(--ink);box-shadow:0 4px 0 var(--ink);font-weight:900}
.share-button{display:inline-flex;align-items:center;justify-content:center;gap:5px}
.share-icon{width:1.25em;height:1.25em;flex:none;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.gameover .result-actions .share-button{background:#a9e4f2;box-shadow:0 4px 0 var(--ink)}
.stop-complete-dialog .journey-actions .stop-share{border-radius:13px}
.boss-party-share{position:absolute;z-index:7;left:50%;bottom:max(22px,calc(var(--native-safe-bottom,0px) + 14px));transform:translateX(-50%);min-width:170px;min-height:52px;margin:0;padding:10px 26px;border-radius:999px;font:900 18px "Arial Black","Trebuchet MS",sans-serif;letter-spacing:.04em;animation:share-pop .35s cubic-bezier(.2,1.6,.4,1) both}
.boss-party-share:active{transform:translateX(-50%) translateY(3px);box-shadow:0 1px 0 var(--ink)}
.share-dialog{position:fixed;inset:auto 0 0;margin:0 auto;width:min(520px,100vw);max-width:100vw;max-height:100dvh;overflow:hidden;border:3px solid var(--ink);border-bottom:0;border-radius:26px 26px 0 0;padding:22px 18px max(16px,calc(var(--native-safe-bottom,0px) + 12px));box-shadow:0 -8px 40px #173d3b66}
.share-dialog::before{content:"";position:absolute;top:8px;left:50%;width:46px;height:5px;margin-left:-23px;border-radius:9px;background:var(--ink);opacity:.25}
.share-dialog[open]{display:flex;flex-direction:column;align-items:center;gap:10px;animation:share-up .34s cubic-bezier(.2,1.15,.4,1) both}
.share-dialog::backdrop{background:#173d3b99}
.share-dialog h2{margin:0;font:900 22px/1.1 "Arial Black","Trebuchet MS",sans-serif}
.share-preview{display:flex;justify-content:center;min-height:0;flex:0 1 auto}
.share-preview img{display:block;height:min(56dvh,600px);width:auto;max-width:100%;aspect-ratio:9/16;object-fit:contain;border:3px solid var(--ink);border-radius:16px;box-shadow:0 6px 0 var(--ink);background:var(--playfield);-webkit-touch-callout:default;-webkit-user-select:auto;user-select:auto}
.share-dialog.hold-to-save .share-preview img{height:min(66dvh,680px)}
.share-status{min-height:1.3em;margin:0;font-size:15px;font-weight:bold;text-align:center}
.share-actions{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:10px;width:100%}
.share-actions button{margin:0;min-height:54px;padding:10px 8px;font-size:17px;font-weight:900;border-radius:13px}
.share-actions .secondary{border:3px solid var(--ink);box-shadow:0 4px 0 var(--ink)}
.share-dialog.busy .share-actions{opacity:.55;pointer-events:none}
.share-dialog.making .share-preview img{animation:share-wait 1s ease-in-out infinite alternate}
@keyframes share-wait{from{opacity:.45}to{opacity:.9}}
.share-close{margin:0;padding:6px 18px;background:none;border:0;font-weight:800;text-decoration:underline;text-underline-offset:3px}
@media(max-height:560px){.share-dialog{width:min(760px,100vw)}.share-dialog[open]{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto 1fr auto auto;column-gap:18px;align-items:center}.share-preview{grid-row:1/5;grid-column:1}.share-preview img{height:calc(100dvh - 60px)}.share-actions{grid-auto-flow:row}}
@media(max-height:560px){.boss-party-share{left:auto;right:max(22px,calc(var(--native-safe-right,0px) + 14px));bottom:max(16px,calc(var(--native-safe-bottom,0px) + 10px));transform:none;animation:none}.boss-party-share:active{transform:translateY(3px)}}
@keyframes share-up{from{transform:translateY(100%)}to{transform:none}}
@keyframes share-pop{from{opacity:0;transform:translateX(-50%) scale(.6)}to{opacity:1;transform:translateX(-50%) scale(1)}}
@media(prefers-reduced-motion:reduce){.share-dialog[open],.boss-party-share,.share-dialog.making .share-preview img{animation:none}}