:root{color-scheme:light;--ink:#224e47;--cream:#fff7dc;--yellow:#ffce57}*{box-sizing:border-box}body{margin:0;background:#deeddf;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 #fff7dc}h1 span{color:#d3623e}h1 i{font-size:50px;position:absolute;bottom:0;right:15px;color:#d49c30}.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}.instruction{display:flex;gap:14px;align-items:center;margin:14px 0;font-size:13px}.instruction b{border:1px solid #8bab93;border-radius:50%;width:28px;height:28px;display:grid;place-items:center;font-size:10px}.seal{margin-top:40px;font-size:10px;font-weight:bold;letter-spacing:1px}.seal span{margin:0 14px;font-size:22px}.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:#d3623e}.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;background:linear-gradient(#e9f5df33,#fff7dcdd 43%,#fff7dcf5 77%,#fff7dc11)}[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}.cats{display:flex;width:100%;gap:8px;margin:12px 0 19px}.cat-choice{width:33.33%;padding:10px 2px 9px;background:#fffaf0;border:2px solid #c6d4bd;border-radius:15px;transition:transform .15s}.cat-choice[aria-pressed=true]{background:#ffe397;border-color:var(--ink);transform:translateY(-5px);box-shadow:0 4px 0 var(--ink)}.cat-choice canvas{width:100%;height:auto}.cat-choice strong{font-size:12px;display:block}.cat-choice 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}.mobile-note{display:none}.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}.cat-choice{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}.instruction{font-size:11px}}
@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,.instruction,.seal{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}.cats{gap:3px;margin:5px 0 10px}.cat-choice{padding:3px}.cat-choice small,.hint{display:none}.cat-choice strong{font-size:10px}.primary{padding:10px;font-size:12px;min-height:44px}}
@media(prefers-reduced-motion:reduce){.cat-choice{transition:none}}

.side-toot{margin-top:20px;max-width:280px;touch-action: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:#c6e9df}
 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:#c6e9df;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}.cats{gap:10px;margin:18px 0 24px}.cat-choice{padding:10px 3px}.cat-choice strong{font-size:13px}.cat-choice 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,.cat-choice small{display:none}.cats{margin:8px 0 14px;max-width:340px}.cat-choice{padding:3px}.cat-choice canvas{max-height:68px;object-fit:contain}.primary{max-width:340px;padding:10px;min-height:44px}}

#paw-layer{position:absolute;inset:0;pointer-events:none;z-index:2;overflow:hidden}.paw-mark{position:absolute;width:54px;height:54px;pointer-events:none;animation:toe-beans .52s ease-out both;will-change:transform,opacity}.paw-mark svg{width:100%;height:100%;display:block}@keyframes toe-beans{0%{transform:translate(-50%,-50%) scale(.68);opacity:.8}65%{opacity:.35}100%{transform:translate(-50%,-50%) scale(1.13);opacity:0}}
.scores{font-size:8px;letter-spacing:.6px}.treat-total{display:flex;justify-content:center;align-items:baseline;gap:10px}.treat-total strong{font-size:36px;line-height:1}.treat-total span{font-size:10px;font-weight:bold;letter-spacing:1.4px}#feast{max-width:360px;width:100%}#feast-art{width:100%;height:auto;max-height:154px;object-fit:contain}#feast-caption{margin:1px 0 6px;font-size:11px}.results .pill{display:none}.results h2{font-size:27px;margin:10px 0 4px}.results #message{margin:0 0 9px}.results .cats{margin:9px 0 17px}.results .hint{margin-top:14px}
@media(max-height:740px){.overlay.results{justify-content:flex-start;overflow:auto}.results h2{display:none}.results #message{margin:0 0 4px;font-size:11px}.results #feast-art{max-height:105px}.results .treat-total strong{font-size:28px}.results .cat-choice canvas{max-height:62px;object-fit:contain}.results .cat-choice{padding:5px 2px}.results .cat-choice small,.results .hint{display:none}.results .cats{margin:6px 0 13px}.results .primary{min-height:46px;padding:11px}}
@media(prefers-reduced-motion:reduce){.paw-mark{animation:toe-beans-reduced .18s ease-out both}@keyframes toe-beans-reduced{from{transform:translate(-50%,-50%);opacity:.7}to{transform:translate(-50%,-50%);opacity:0}}}

/* 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:#c6e9df}: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) .mobile-note,: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:#c6e9df}: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) .results h2{font-size:27px}: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}
@media(max-height:740px){:is(.native,.web-play) .overlay.results{justify-content:flex-start}:is(.native,.web-play) .overlay.results h2{display:none}}

/* Six stable slots; custom previews live in a separate, cancellable editor. */
.cats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.cat-choice{width:100%;min-width:0;padding:5px 3px;display:flex;flex-direction:column;align-items:center;justify-content:center}.cat-choice canvas{height:65px;width:100%;object-fit:contain}.cat-choice strong{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.cat-choice small{font-size:7px}.empty-cat{border-style:dashed;background:#fff9e5}.empty-cat>span{font-size:30px;line-height:1.2}.empty-cat strong{white-space:normal;font-size:11px}.empty-cat small{font-size:6px}.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}#adopt-preview{display:block;width:100%;height:auto;max-height:145px;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:1px solid #9eb397;border-radius:50%;background:#e7edcc;font-size:20px}.style-cycle output{font-weight:bold;font-size:14px;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}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)}#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}.adopt-actions .primary{flex:1;min-width:0;font-size:13px;padding:12px}.local-note{font-size:10px;text-align:center;margin:17px 0 0}#treats-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}#treats-dialog p{font-size:12px;line-height:1.5}#treat-list{padding:0;list-style:none;margin:15px 0 0}#treat-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}#treat-list canvas{width:44px;height:44px}#treat-list strong{font-size:12px;overflow-wrap:anywhere}#treat-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}.cats,.results .cats{margin:8px 0 12px}.cat-choice canvas,.results .cat-choice canvas{max-height:47px}.cat-choice small{display:none}.cat-choice{padding:5px 2px}.hint{display:none}.menu-tools{margin-bottom:8px}.results #feast-art{max-height:85px}.results #feast-caption{font-size:10px}.results .treat-total strong{font-size:25px}dialog{padding:14px}dialog h2{font-size:20px}#adopt-preview{max-height:100px}#reroll{margin:4px auto 8px}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-treats{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-treats span{display:block}.topbar #best-treats b{display:block;font-size:20px}.topbar #best-treats:hover{background:#dce5c4}.scores{align-items:center;gap:12px}.topbar #best-treats:focus-visible{outline-offset:0}
#treats-dialog{padding-top:0}#treats-dialog header{position:sticky;top:0;z-index:1;background:var(--cream);padding:14px 0 10px;margin:0}#treats-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-treats 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-treats 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:linear-gradient(#e9f5df99,#fff7dcf7 35%,#fff7dcf7 90%,#fff7dccc)}
.gameover>*{width:100%;max-width:390px;min-width:0;min-height:0}.gameover h2{font-size:32px;line-height:1.1;margin:0}.gameover #feast{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:8px;width:100%;height:100%;min-height:0;max-width:480px;overflow:hidden}.gameover #feast-art{width:100%;height:100%;max-height:none;min-height:0;object-fit:contain}.gameover .treat-total{flex-wrap:wrap;gap:8px}.gameover .treat-total strong{font-size:44px;overflow-wrap:anywhere}.gameover #feast-caption{font-size:12px;line-height:1.3;margin:0}.gameover .primary{min-height:52px;box-shadow:0 4px 0 var(--ink)}
#menu,#paused{overflow:hidden}#menu{gap:10px;padding:16px 24px 24px;justify-content:center}#menu>h2,#menu>p,#menu>.cats,#menu>.menu-tools{margin:0}#menu>.cats{flex:0 1 220px;min-height:104px;align-self:center;grid-auto-rows:minmax(44px,1fr)}#menu .cat-choice{min-height:0;overflow:hidden}#menu .cat-choice canvas{flex:1;min-height:0;max-height:65px;object-fit:contain}#menu .cat-choice 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>.cats{flex-basis:180px}#menu .cat-choice canvas{max-height:60px}#menu .menu-tools{margin:0}.gameover h2{font-size:28px}.gameover .treat-total strong{font-size:38px}}
@media(max-height:460px){#menu>h2,#menu>#message{display:none}#menu>.cats{flex:1;min-height:92px}#menu .cat-choice canvas{max-height:32px}#menu .cat-choice strong{font-size:10px}#menu .empty-cat>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 .treat-total strong{font-size:28px}.gameover .treat-total span{font-size:10px}.gameover #feast{gap:3px;grid-template-rows:auto minmax(0,1fr)}.gameover #feast-caption{display:none}.gameover .primary{min-height:46px;padding:10px}:is(.native,.web-play) .gameover{padding-top:8px}}


/* Public homepage preserves the original woodland cabinet. /play/ is a real full viewport. */
html.home,html.home body{height:auto;min-height:100svh;overflow:auto;background-color:#deeddf;background-image:radial-gradient(#b9d4be 1px,transparent 1px);background-size:24px 24px}
.home .home-play{max-width:340px;margin:0 0 24px;font-size:14px}.home main{display:flex;min-height:100svh;height:auto;align-items:center;justify-content:center;padding:28px;gap:clamp(30px,5vw,90px)}.home .story{display:block;max-width:360px;width:30vw}.home .cabinet{position:relative;width:min(460px,calc((100dvh - 120px)*.6));height:auto;min-width:290px;border:3px solid var(--ink);border-radius:23px;box-shadow:10px 13px 0 #224e4722;background:var(--cream)}.home .stage{position:relative;inset:auto;aspect-ratio:420/700;width:100%;height:auto}.home .topbar{position:static;height:55px;border-radius:0;box-shadow:none;background:var(--cream);padding:0 12px;gap:8px}.home .cabinet>footer{display:flex}.home #menu{top:0;padding:16px 20px 20px;gap:8px}.home #menu h2{font-size:28px}.home #menu>.cats{flex-basis:190px}.home #menu>.pill{font-size:8px}.home .topbar #best-treats b{font-size:20px}
.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}.local-ad-mock{max-width:390px;text-align:center}.local-ad-mock p{line-height:1.5}
@media(max-width:760px){.home main{flex-direction:column;padding:28px 18px 36px;gap:30px}.home .story{width:100%;max-width:420px}.home .story h1{font-size:80px;letter-spacing:-5px;margin:28px 0}.home .story .tagline{font-size:25px;margin-top:28px}.home .story .description{font-size:13px}.home .home-play{max-width:none}.home .instruction{display:flex}.home .seal{display:block;margin-top:26px}.home .cabinet{width:min(420px,100%);min-width:0}.home .topbar{padding:0 8px}.home .topbar button{min-width:36px;min-height:40px}.home .overlay>*{max-width:none}.home #menu h2{font-size:29px}.home #menu>.pill{display:none}.home .mobile-note{display:block;text-align:center}}
@media(max-height:740px) and (min-width:761px){.home #menu .pill,.home #menu>.hint{display:none}.home #menu h2{font-size:21px}.home #menu #message{font-size:10px}.home #menu>.cats{min-height:92px;flex-basis:140px}.home #menu .cat-choice canvas{max-height:38px}.home #menu>.primary{padding:10px;min-height:44px;font-size:13px}.home .home-play{margin-bottom:15px}.home .story h1{font-size:70px}.home .story .tagline{font-size:21px;margin-top:20px}.home .description{margin-bottom:15px}.home .seal{margin-top:20px}}