@font-face{font-family:'Gluten';src:url('fonts/MatchaWorldColor.ttf') format('truetype');font-weight:100 900;font-display:block}
:root{color-scheme:light;--ink:#563b2b;--tube-w:80px;--tube-h:188px;font-family:'Gluten','Trebuchet MS','Segoe UI',sans-serif;color:var(--ink)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{background:#b2c578}button,input,summary{font:inherit}button{color:inherit;cursor:pointer;touch-action:manipulation;border:0}button:focus-visible,summary:focus-visible,input:focus-visible{outline:3px solid #346f78;outline-offset:4px}button:disabled{cursor:default;opacity:.48}button:active:not(:disabled){transform:translateY(2px)}[hidden]{display:none!important}h1,h2,p{margin:0}h1,h2{font-family:'Gluten',Georgia,serif;font-weight:700}h1{font-size:26px}h2{font-size:30px;line-height:1.12}.screen{position:absolute;inset:0;background-position:center;background-size:cover;display:flex;flex-direction:column;align-items:center;overflow:hidden;padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
.home{background-image:url('cozy/Backgrounds/bg_main_menu.png')}.home-content{width:min(100%,400px);flex:1;min-height:0;display:flex;align-items:center;flex-direction:column;justify-content:center;gap:14px}.logo{width:112%;max-width:460px;aspect-ratio:2;object-fit:contain;flex-shrink:0}.tagline{font-size:15px;font-weight:700;color:#3f5e2c;text-shadow:0 1px 3px #faffde}.friends{display:flex;align-items:flex-end;justify-content:center;height:125px;margin:10px 0 14px}.friends img{width:100px;max-height:125px;object-fit:contain;filter:drop-shadow(0 7px 3px #52652c30)}.friends img:nth-child(2){width:120px;z-index:1;margin:0 -13px -10px}.wood-button{background:transparent url('cozy/panel_popup.png') center/100% 100% no-repeat;min-height:78px;width:min(295px,100%);padding:20px 40px 22px;font-size:23px;font-weight:800;text-shadow:0 1px #fff5d6;flex-shrink:0}.soft-button{background:#fff3dce8;border:1px solid #8b6f4260;border-bottom:3px solid #8b6f4280;border-radius:18px;min-height:46px;padding:10px 25px;font-size:16px;font-weight:700}.small-pill{font-size:12px;padding:6px 12px;border-radius:30px;background:#f7ffe2c9;color:#486735}.icon-button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;background:transparent;font-size:11px;font-weight:800;min-width:52px;min-height:58px;padding:0 3px}.icon-button img{width:48px;height:47px;object-fit:contain}.home .icon-button{margin-top:8px}.home .icon-button span{color:#3c562c}footer{width:100%;display:flex;justify-content:center;align-items:center;padding:10px 8px 3px;font-size:11px;color:#344d25;font-weight:700}
.screen-header{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:640px;gap:6px;text-align:center;background:#fff2d7ed;padding:8px;border-radius:22px;box-shadow:0 3px 12px #4a2c2120}.header-spacer{width:52px}.eyebrow{font-size:10px;letter-spacing:1.8px;line-height:1.5;font-weight:800;color:#657b42}.levels{background-image:url('cozy/Backgrounds/bg_level_select.png')}#levelScreen.ocean{background-image:url('cozy/Backgrounds/world2/bg_level_select.png')}
/* Ocean: header, progress pill and part pager take a very light sea-green tint instead of cream. */
#levelScreen.ocean .screen-header{background:#e6f6f1ed}#levelScreen.ocean .level-intro{background:#e9f8f3e8}#levelScreen.ocean #partPager{background:#dcf1ebed}.level-intro{background:#fff7e4e8;padding:8px 14px;border-radius:20px;font-size:13px;margin:13px 0}.level-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));width:min(100%,560px);gap:8px;overflow-y:auto;min-height:0;align-content:start;padding:5px 4px 20px;scrollbar-width:thin}.level-tile{position:relative;aspect-ratio:1;background:transparent;isolation:isolate;display:grid;place-items:center;padding:0}.level-tile>img.tile-art{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:-1}.level-tile>span{font-size:25px;font-weight:800;text-shadow:0 1px #fff4d8;padding-bottom:3px}.level-grid.ocean .tile-art{--tint:hue-rotate(175deg) saturate(.85) brightness(1.08)}
.level-tile .level-state{position:absolute;width:27px;height:27px;right:-1px;bottom:-1px}.level-tile:disabled{opacity:.7;filter:saturate(.45)}.level-tile[aria-current=true]{filter:drop-shadow(0 0 4px #fff8bf)}
.level-mascot{width:clamp(140px,28vw,240px);height:clamp(140px,28vw,240px);object-fit:contain;margin:auto 0 0;flex-shrink:0;filter:drop-shadow(0 4px 3px #4b332530)}
.game{background-image:url('cozy/Backgrounds/bg_gameplay_a.png')}.game.hard{background-image:url('cozy/Backgrounds/bg_gameplay_hard.png')}.game.alt{background-image:url('cozy/Backgrounds/bg_gameplay_b.png')}
/* Worlds 1 (Farmland) and 2 (Ocean) have their own sets; .hard/.alt are reused here to mean "milestone" /
   "second normal variant" instead of difficulty — see game.js's updateStats(). */
.game.farm{background-image:url('cozy/Backgrounds/world1/bg_normal_a.png')}
.game.farm.alt{background-image:url('cozy/Backgrounds/world1/bg_normal_b.png')}
.game.farm.hard{background-image:url('cozy/Backgrounds/world1/bg_milestone.png')}
.game.ocean{background-image:url('cozy/Backgrounds/world2/bg_normal_a.png')}
.game.ocean.alt{background-image:url('cozy/Backgrounds/world2/bg_normal_b.png')}
.game.ocean.hard{background-image:url('cozy/Backgrounds/world2/bg_milestone.png')}.game-header{display:flex;flex-shrink:0;align-items:center;justify-content:space-between;width:100%;max-width:760px;gap:8px;background:#fff6e8ed;border:1px solid #fff9e8c0;border-radius:23px;padding:6px 9px;box-shadow:0 3px 10px #413e2420}.level-heading{text-align:center}.level-heading h1{font-size:27px}.level-heading>p:last-child{font-size:11px;margin-top:3px}.instruction{font-size:12px;text-align:center;background:#fff7e3e8;padding:7px 12px;margin:9px 0 2px;border-radius:20px;max-width:95%;flex-shrink:0}#boardViewport{width:min(100%,800px);min-height:0;flex:1;overflow:auto;display:flex;padding:8px 2px;align-items:safe center;justify-content:safe center}#tubeArea{display:grid;gap:12px 8px;align-content:center;justify-content:center;margin:auto;flex-shrink:0}.tube{position:relative;width:var(--tube-w);height:var(--tube-h);min-width:44px;background:transparent url('cozy/slot_container.png') center/100% 100% no-repeat;padding:0 0 calc(var(--tube-h)*.1);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;transition:filter .15s,transform .15s;touch-action:manipulation}.tube.selected{transform:translateY(-7px);filter:drop-shadow(0 0 4px #fff8cb) drop-shadow(0 0 5px #5b7940)}.tube.valid-target{filter:drop-shadow(0 0 5px #d6f98d)}.tube.complete:after{content:'✓';position:absolute;bottom:0;font-size:15px;font-weight:900;color:#35552d;background:#f5f0c5;border-radius:50%;width:20px;height:20px;line-height:20px;box-shadow:0 1px 2px #0003}.critter{height:calc(var(--tube-h)*.202);width:84%;object-fit:contain;pointer-events:none;flex-shrink:0;user-select:none;transform-origin:50% 90%;filter:drop-shadow(0 2px 1px #4b33251a)}.ball-drop{animation:landing .34s ease-out}.hint-flash{animation:hintFlash .55s ease 3}.shake{animation:shake .23s ease}.game-actions{display:flex;gap:clamp(22px,8vw,58px);align-items:center;justify-content:center;background:#fff4dde8;border:1px solid #fff7e4c9;border-radius:24px;min-height:70px;padding:4px 22px;flex-shrink:0}.game-actions .icon-button img{height:43px;width:46px}.game-status{font-size:11px;line-height:1.3;text-align:center;min-height:27px;padding:4px 8px;margin:3px 0;color:#304820;text-shadow:0 1px 2px #fbffec}.hard .game-status{color:#fff3dc;text-shadow:0 1px 3px #000}
.modal{position:fixed;inset:0;z-index:10;background:#26312088;backdrop-filter:blur(5px);display:grid;place-items:center;padding:20px;overflow:auto}.modal-box{position:relative;width:min(360px,100%);background:#fff4dd;border:5px solid #a77749;border-radius:30px;box-shadow:0 9px 0 #674527,0 14px 50px #0004;text-align:center;padding:32px 22px 23px;display:flex;flex-direction:column;align-items:center;gap:14px;max-height:95dvh;overflow:auto}.modal-box h2{padding:0 10px}.modal-box>p{font-size:14px;line-height:1.5}.modal-box .wood-button{min-height:66px;font-size:21px}.close-button{position:absolute;right:6px;top:5px;background:transparent;width:39px;height:39px;padding:0}.close-button img{width:100%;height:100%;object-fit:contain}.celebration-friend{width:110px;height:92px;object-fit:contain}.setting{width:100%;display:flex;justify-content:space-between;align-items:center;gap:10px;text-align:left;font-size:14px;padding:11px 0;border-bottom:1px solid #c3a17466}.setting input{width:22px;height:22px;accent-color:#67834b}.text-button{background:transparent;padding:9px 8px;text-decoration:underline;min-height:40px;font-size:13px}.danger{color:#a14540}.credit-note{font-size:12px!important;color:#746550}.build-label{font-size:11px!important;color:#857865}details{font-size:12px;width:100%;text-align:left}summary{cursor:pointer;padding:8px}pre{white-space:pre-wrap;max-height:190px;overflow:auto;font:11px/1.5 monospace}.save-warning{position:fixed;z-index:30;bottom:0;left:0;right:0;background:#fff2a6;color:#4e3027;font-size:12px;padding:10px;text-align:center}.sparkle{position:fixed;pointer-events:none;z-index:20;color:#ffdb75;animation:sparkle .9s ease-out forwards;font-size:24px}
@keyframes landing{0%{transform:translateY(-25px) scale(.9,1.1)}55%{transform:scale(1.13,.85)}80%{transform:scale(.96,1.04)}100%{transform:scale(1)}}@keyframes hintFlash{50%{filter:drop-shadow(0 0 10px #fff29c);transform:translateY(-5px)}}@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}@keyframes sparkle{to{transform:translateY(-80px) rotate(70deg);opacity:0}}
@media(max-height:700px){.home-content{gap:7px}.logo{max-width:370px}.friends{height:85px;margin:3px 0 7px}.friends img{width:80px;max-height:92px}.friends img:nth-child(2){width:98px}.home .icon-button{margin-top:0}.home .wood-button{min-height:68px}.game-header{padding:4px 7px}.instruction{margin-top:5px;font-size:11px}.game-actions{min-height:61px}.game-actions .icon-button img{width:38px;height:36px}.game-status{min-height:23px;font-size:10px}.level-heading h1{font-size:24px}}
@media(orientation:landscape) and (max-height:550px){.home-content{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:min(730px,96%);align-content:center}.logo{grid-column:1;width:100%;grid-row:1/4}.tagline,.friends{display:none}.home-content>.icon-button{display:none}.game-header{max-width:600px}.game-header .icon-button img{width:30px;height:30px}.game-header .icon-button{min-height:40px}.instruction{display:none}.game-actions{position:absolute;right:10px;top:90px;bottom:20px;flex-direction:column;gap:8px;padding:5px}.game #boardViewport{width:calc(100% - 90px);margin-right:80px}.game-status{margin-right:80px}.level-grid{grid-template-columns:repeat(5,minmax(0,1fr));max-width:760px}.level-intro{margin:5px 0}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* MVP: generous tablet typography, supplied wooden surfaces, compact phone controls. */
:root{--ui:clamp(1rem,1.65vw,1.45rem)}
.home-content{width:min(78vw,680px);gap:clamp(10px,2vh,24px);padding-top:40px}
.logo{width:110%;max-width:720px}.friends{height:clamp(100px,16vh,190px);margin:0 0 12px}
.friends img{width:clamp(90px,13vw,160px);max-height:190px}.friends img:nth-child(2){width:clamp(110px,16vw,190px)}
.home .wood-button{width:min(70%,320px);min-height:clamp(64px,8vh,88px);font-size:clamp(20px,2.4vw,28px)}
#homeSettingsBtn{position:absolute;right:max(18px,env(safe-area-inset-right));top:max(14px,env(safe-area-inset-top));margin:0}
.icon-button{font-size:clamp(12px,1.6vw,18px);min-width:52px;min-height:54px}.icon-button img{width:clamp(42px,5vw,64px);height:clamp(42px,5vw,64px)}
.signature{display:flex;align-items:center;gap:7px}.signature img{width:40px;height:40px;object-fit:contain}footer{font-size:clamp(12px,1.6vw,16px)}footer button{font-size:inherit;min-height:44px}
.credits-logo{width:120px;height:120px;object-fit:contain}
.wallet{display:flex;align-items:center;justify-content:center;gap:20px;font-size:clamp(16px,2vw,24px);font-weight:bold;background:#f5e6c9ed;border-radius:20px;padding:5px 12px;flex-shrink:0;min-height:40px}
.hearts,.coins{display:flex;align-items:center;gap:3px}.wallet img{width:clamp(24px,3vw,38px);height:clamp(24px,3vw,38px);object-fit:contain}.wallet small{margin-left:5px;font-size:.7em}
.screen-header{max-width:1100px;padding:12px 18px;min-height:80px}h1{font-size:clamp(24px,3vw,38px)}h2{font-size:clamp(28px,3.5vw,42px)}
.level-grid{width:min(100%,1080px);grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(5px,1.5vw,20px)}
.level-tile>span{font-size:clamp(24px,4vw,44px)}.level-tile .level-state{width:clamp(24px,3.5vw,40px);height:clamp(24px,3.5vw,40px)}
.level-intro{font-size:clamp(12px,1.7vw,18px)}.eyebrow{font-size:clamp(9px,1.4vw,15px);letter-spacing:1px}
.world-grid{width:min(100%,1050px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,3vw,32px);padding:24px 4px;min-height:0;overflow:auto;margin:auto}
.world-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:clamp(18px,3vw,38px) 10px;background:#f5e5c4ed;border:4px solid #b88955;border-radius:30px;min-height:200px;box-shadow:0 6px #76523255}
/* Looks locked like a normal :disabled card, but stays tappable so a tap can explain why. */
.world-card.coming-soon{opacity:.48}
.world-card img{height:clamp(72px,14vh,150px);width:70%;object-fit:contain}.world-card h2{font-size:clamp(23px,3vw,35px)}.world-card p{font-size:clamp(12px,1.8vw,19px)}
.game-header{max-width:1200px;background:#f3e3c7ed;min-height:76px}.level-heading h1{font-size:clamp(25px,3.3vw,40px)}.level-heading>p:last-child{font-size:clamp(12px,1.7vw,20px)}
.instruction{font-size:clamp(12px,1.7vw,20px);background:#f5e5c9ed;margin:7px 0 0}
#boardViewport{width:min(100%,1400px);padding:8px 2px}.game-status{font-size:clamp(12px,1.7vw,18px);padding:4px 8px;min-height:24px;max-width:1000px}
.game-actions{gap:clamp(28px,9vw,120px);background:#f0dfbfed;min-height:64px;padding:3px 28px;margin-top:14px}.game-actions .icon-button img{width:clamp(36px,4.5vw,58px);height:clamp(36px,4.5vw,58px)}
.helper-actions{display:flex;gap:clamp(8px,2vw,25px);justify-content:center;flex-shrink:0;margin-top:-3px;background:#f0dfbfed;border-radius:20px;padding:3px 10px}
.helper{display:flex;align-items:center;justify-content:center;flex-direction:column;background:transparent;gap:2px;min-width:64px;min-height:64px;padding:4px}.helper img{width:clamp(60px,8vw,104px);height:clamp(60px,8vw,104px);object-fit:contain}.helper b{background:#e7bd73;padding:2px 7px;border-radius:8px;font-size:clamp(12px,1.8vw,20px)}
/* Icon-only: gameplay actions/helpers/defeat options communicate by icon alone now. */
.game-actions .icon-button span,.helper span,#settingsModal .settings-nav .icon-button span{display:none}
.modal-box{width:min(560px,100%);padding:38px 28px 24px;gap:16px;border:0;border-radius:28px;background:#f5e5c8;box-shadow:0 7px 0 #745033,0 15px 55px #0005}
.modal-box:before{content:'';display:block;width:calc(100% + 56px);min-height:86px;margin:-38px -28px -14px;background:url('cozy/button_main.png') center top/100% auto no-repeat;pointer-events:none}
.modal-box>p,.setting{font-size:clamp(15px,2vw,21px)}.modal-box .wood-button{min-height:80px;font-size:clamp(22px,2.8vw,30px);width:min(360px,100%)}
.soft-button{font-size:clamp(16px,2vw,22px);min-height:48px;background:#eddbb9}.text-button{font-size:clamp(14px,1.8vw,19px);min-height:44px}.setting input{width:28px;height:28px}.close-button{width:44px;height:44px;z-index:1}
.shop{width:min(720px,100%)}#shopItems{width:100%}.shop-row{display:grid;grid-template-columns:54px 1fr 95px;gap:12px;align-items:center;text-align:left;padding:14px 0;border-bottom:1px solid #bb986555}.shop-row>img{width:54px;height:54px;object-fit:contain}.shop-row strong{font-size:var(--ui)}.shop-row p{font-size:clamp(12px,1.6vw,17px);line-height:1.3;margin-top:4px}.price-button{background:url('cozy/Icons/badge_price_small.png') center/100% 100% no-repeat;min-height:54px;font-size:15px;font-weight:800;padding:8px}.small-note{font-size:13px!important}.dev-badge{position:fixed;pointer-events:none;z-index:40;bottom:0;left:0;font-size:10px;background:#583e2c;color:#fff4d6;padding:2px 6px}
@media(min-width:700px) and (min-height:650px){.icon-button,.helper{font-size:18px}.helper img{width:96px;height:96px}.helper{min-width:130px}.game-actions .icon-button img{width:52px;height:52px}.game-actions{min-height:80px}.game-header{min-height:100px}.level-heading>p:last-child{font-size:18px}.eyebrow{font-size:13px}.game-status,.instruction{font-size:17px}.wallet{font-size:22px;min-height:45px}.wallet img{width:33px;height:33px}.modal-box>p,.setting{font-size:20px}.soft-button{font-size:21px}.level-tile>span{font-size:38px}}
@keyframes landing{0%{transform:translateY(-22px) scale(.96,1.04)}45%{transform:translateY(0) scale(1.1,.87)}72%{transform:translateY(-5px) scale(.98,1.04)}100%{transform:translateY(0) scale(1)}}
@media(max-width:420px){.home-content{width:90vw}.home-wallet{gap:8px;padding:5px 8px;font-size:15px}.wallet img{width:24px;height:24px}.modal{padding:12px}.modal-box{padding:32px 20px 20px;gap:12px}.modal-box:before{width:calc(100% + 40px);margin:-32px -20px -10px}.shop-row{grid-template-columns:42px 1fr 76px;gap:8px}.shop-row>img{width:42px;height:42px}.price-button{font-size:12px}.screen-header{padding:8px;gap:5px}.screen-header h1{font-size:22px}}
@media(max-height:730px){.home-content{gap:4px;padding-top:40px}.home .logo{max-height:180px}.home .friends{height:85px;margin:0}.home .friends img{max-height:90px}.home .wood-button{min-height:68px}.home-shop{bottom:58px}.game-header{min-height:62px}.game-header .icon-button{min-height:48px}.game-header .icon-button img{width:34px;height:34px}.game .instruction{display:none}.game-status{font-size:11px;min-height:20px;margin:0}.game-actions{min-height:51px}.game-actions .icon-button{min-height:46px}.game-actions .icon-button img{width:30px;height:30px}.helper-actions{margin-top:4px}.helper{min-width:56px;min-height:56px}.helper img{width:52px;height:52px}#gameWallet{min-height:30px;font-size:14px;margin-top:4px;padding:2px 9px}#gameWallet img{width:21px;height:21px}.level-heading>p:last-child{font-size:11px}.level-heading h1{font-size:24px}}
@media(orientation:landscape) and (max-height:600px){.home-content{display:grid;grid-template-columns:1fr 1fr;width:min(100%,950px);gap:4px 20px;padding:42px 20px 0}.home .logo{grid-column:1;grid-row:1/3;width:100%;max-height:220px}.home .friends{display:none}.home .wood-button{min-height:70px}.home-content>#homeSettingsBtn{display:flex}.home-shop{bottom:55px}.game-header{max-width:calc(100% - 100px);align-self:flex-start;min-height:54px}.game-header .icon-button{min-height:42px}.game-header .eyebrow{display:none}.game #boardViewport{width:calc(100% - 110px);margin-right:110px}.game-actions{position:absolute;right:12px;top:20px;bottom:auto;flex-direction:column;gap:0;padding:4px 10px}.helper-actions{position:absolute;right:12px;bottom:12px;flex-direction:column;gap:0;padding:3px 6px}.helper{flex-direction:row;min-height:60px;font-size:10px;min-width:80px}.helper img{width:52px;height:52px}.helper b{margin:0}.game-status{margin-right:110px;min-height:17px;font-size:10px}#gameWallet{position:absolute;top:61px;left:20px;font-size:12px;background:#f2e3c8c9;min-height:25px}#gameWallet img{width:18px;height:18px}.level-grid{grid-template-columns:repeat(5,minmax(0,1fr));max-width:1100px}.world-grid{grid-template-columns:repeat(4,minmax(0,1fr));padding:10px 0}.world-card{min-height:150px;padding:12px 8px}.world-card img{height:65px}.world-card p{font-size:11px}.world-card h2{font-size:20px}}
/* Nine-slice the supplied popup frame at render time; its PNG is unchanged. */
.modal-box{background:none;border:solid transparent;border-width:90px 36px 38px;border-image:url('cozy/button_main.png') 120 48 48 fill / 90px 36px 38px / 0 stretch;border-radius:0;padding:8px 12px 16px;box-shadow:none}
.modal-box:before{display:none}
/* Anchored to the popup's own corner (not the tablet's), and large enough to find easily. */
.modal-box .close-button{position:absolute;right:6px;top:6px;background:#f5e5c8;border-radius:50%;width:56px;height:56px;z-index:2}
.price-button{min-height:70px;background-size:contain;display:flex;align-items:flex-end;justify-content:center;padding:0 5px 8px;font-size:13px;white-space:nowrap}
@media(max-width:420px){.modal-box{border-width:70px 25px 30px;border-image-width:70px 25px 30px;padding:6px 4px 12px}.price-button{min-height:58px;padding-bottom:6px;font-size:11px}.shop-row{grid-template-columns:36px 1fr 70px;gap:6px}.shop-row>img{width:36px;height:36px}}
#boardPager{display:flex;align-items:center;justify-content:center;gap:12px;height:44px;flex-shrink:0;background:#f5e5c9ed;border-radius:16px;font-size:12px}
#boardPager button{min-width:44px;min-height:44px;background:transparent;font-size:28px}
/* Level parts: whole-page navigation, mirrors #boardPager's proven pattern. */
#partPager{display:flex;align-items:center;justify-content:center;gap:16px;min-height:44px;flex-shrink:0;background:#f5e5c9ed;border-radius:16px;font-size:16px;font-weight:800;width:min(200px,60%);margin-bottom:8px}
#partPager button{min-width:44px;min-height:44px;background:transparent;font-size:28px}
@media(orientation:portrait) and (max-width:600px) and (max-height:730px){
 .game-actions{position:absolute;bottom:10px;left:6px;right:6px;min-height:60px;padding:2px 0;gap:0;justify-content:flex-start;flex-direction:row}
 .game-actions .icon-button{min-width:44px;width:44px;min-height:54px;font-size:10px;padding:0}
 .helper-actions{position:absolute;bottom:10px;right:6px;min-height:60px;max-width:176px;padding:2px 0;gap:0;margin:0;background:transparent}
 .helper{width:auto;min-width:52px;min-height:60px;font-size:8px;padding:0;justify-content:center}.helper img{width:52px;height:52px}.helper b{margin-left:0;padding:0 2px}
 .game-status{margin-bottom:64px}.game-header .eyebrow{font-size:8px}.game-header{min-height:56px}
}
/* QA fixes: header wallet slot, settings hub, decluttered victory/store, buy-more popup. */
.game-header .wallet.header-wallet{min-height:auto;padding:5px 10px;gap:6px;flex-shrink:0}
.game-header{gap:4px}
.game-header .level-heading{flex:1;min-width:0}
.level-heading h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.level-heading p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:420px){.game-header .wallet.header-wallet{gap:3px;padding:4px 6px}.game-header .wallet.header-wallet .hearts small{display:none}.level-heading h1{font-size:18px}}
/* button_main.png is 465x399 (~1.166:1). Instead of the nine-slice border-image every
   other modal uses (which stretches its edge strips to match whatever box size results
   from the content), size THIS box to the image's own ratio and paint it as a plain
   background at 100%/100% — since the box ratio equals the image's ratio, that scales it
   by one uniform factor in both directions, so the artwork is never stretched out of shape. */
/* No fallback fill color: the source PNG's corners are genuinely transparent (leaves/
   flowers meant to sit over whatever is behind), a solid color there would paint them in. */
/* justify-content:center spreads any leftover vertical space evenly above/below the
   content instead of leaving it all pooled at the bottom (the padding stays as a floor
   so content never creeps up into the ribbon art, regardless of how much there is). */
#settingsModal .modal-box{background:transparent url('cozy/button_main.png') center/100% 100% no-repeat;border:0;border-radius:0;box-shadow:none;aspect-ratio:465/399;height:auto;width:min(880px,98vw);padding:calc(20% + 30px) 9% 4%;gap:6px;justify-content:center;transform:translateY(-15px)}
#settingsModal .settings-nav{margin-bottom:0}
/* Close (X) button nudged down/left, only for this modal. The icon art already has its
   own wood-tile background baked in, so drop the generic circular chip behind it.
   Positioned in % of the box (not px) so it scales together with the panel artwork
   instead of drifting into the content when the box resizes at different screen sizes. */
#settingsModal .close-button{top:11.3%;right:5.9%;background:transparent;border-radius:0}
/* In-level variant: Redeem Code is hidden here (no room with the extra Home/Shop row),
   so the panel sits 10px higher than the main-menu variant (overrides the -15px above)
   and rows get more breathing room with the freed-up space. Scoped to .in-level only. */
#settingsModal .modal-box.in-level{transform:translateY(-10px);gap:14px}
#settingsModal .in-level .settings-nav{margin-bottom:4px}
/* Home/Shop icons now match the Music/SFX/VFX row below them. */
#settingsModal .settings-nav .icon-button img{width:clamp(56px,9vw,84px);height:clamp(56px,9vw,84px)}
/* The in-level variant (nav row + two icon rows + Credits + Reset) is the tallest
   version of this panel; on narrow phones the fixed-ratio box is too short for all
   of it, so tighten rows here specifically rather than let Reset spill past the frame. */
@media(max-width:420px){
  #settingsModal .modal-box.in-level{gap:0;padding-top:calc(20% + 12px);padding-bottom:1%}
  #settingsModal .in-level .settings-nav,#settingsModal .in-level .av-toggle-row{margin-bottom:0}
  #settingsModal .in-level .settings-nav .icon-button img,#settingsModal .in-level .icon-toggle img{width:38px;height:38px}
  #settingsModal .in-level .wood-button{min-height:46px;font-size:15px}
  #settingsModal .in-level #resetProgressBtn{min-height:32px;font-size:12px}
}
/* Shop: welcome offer banner + three coin-pack tiles (icon, amount, Google Play price). */
.welcome-offer{display:grid;grid-template-columns:84px 1fr auto;align-items:center;gap:10px;width:100%;margin:10px 0 4px;padding:10px 12px;background:#fff9ec;border:3px solid #e8b34f;border-radius:20px;box-shadow:0 4px 0 #c98f2e}
.welcome-offer>img{width:84px;height:84px;object-fit:contain}
.welcome-grants{display:flex;flex-wrap:wrap;gap:6px 10px;justify-content:center}
.pack-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:100%;margin:10px 0 4px}
.pack-tile{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 6px;background:#fff9ec;border:2px solid #e2c79a;border-radius:18px}
.pack-tile>img{width:clamp(72px,19vw,110px);height:clamp(72px,19vw,110px);object-fit:contain}
.pack-amount{display:inline-flex;align-items:center;gap:3px;font-weight:800;font-size:clamp(15px,2vw,19px);color:#5b3d22}
.pack-amount img{width:20px;height:20px}
.pack-price{background:#7d994b;color:#fffbf1;border-radius:999px;box-shadow:0 3px 0 #56702f;min-width:72px;padding:5px 12px;font-size:clamp(13px,1.8vw,16px);font-weight:800;white-space:nowrap}
.pack-tile:disabled .pack-price,.welcome-offer:disabled .pack-price{background:#b9b09b;box-shadow:0 3px 0 #8e8672}
#removeAdsBtn{display:flex;align-items:center;justify-content:center;gap:8px}
#removeAdsBtn img{width:26px;height:26px;object-fit:contain}
.win-choice{display:flex;flex-direction:column;gap:10px;width:100%}
/* Both tiles share one pill size/baseline in the source art; the AD tile is a taller
   canvas only because of its extra ribbon on top. So: equal WIDTH (not a forced equal
   height box, which would rescale the pills to different apparent sizes), bottom-aligned
   so the shared pill baseline lines up and the ribbon simply extends upward. */
.win-gift{margin:2px 0 6px;display:flex;justify-content:center}
.win-gift .redeem-grant{background:#fff9ec;border:2px solid #e2c79a;border-radius:16px;padding:4px 12px}
.win-choice-row{display:flex;flex-direction:row;gap:12px;width:100%;justify-content:center;align-items:flex-end}
.reward-tile{background:transparent;padding:0;flex:1;max-width:190px}
.reward-tile img{width:100%;height:auto;object-fit:contain;display:block}
/* At least 3x the prior 80px signature by default, kept responsive so it never clips. */
.signature img{width:clamp(140px,60vw,240px);height:clamp(140px,60vw,240px);object-fit:contain}
@media(max-height:700px){.signature img{width:clamp(90px,35vw,150px);height:clamp(90px,35vw,150px)}}
@media(orientation:landscape) and (max-height:600px){.signature img{width:clamp(60px,20vw,100px);height:clamp(60px,20vw,100px)}}
.toggle-setting{background:transparent}
.toggle-setting img{width:28px;height:28px;object-fit:contain;flex-shrink:0}
#aboutModal details,#aboutModal summary{text-align:center}
#aboutModal pre{text-align:left;margin:8px 4px;padding:20px;background:#0000000c;border-radius:14px}
#buyHelperConfirm{display:flex;align-items:center;justify-content:center;gap:10px}
#buyHelperConfirm img{width:30px;height:30px;object-fit:contain}
.defeat-row{display:flex;gap:clamp(8px,2vw,25px);justify-content:center;flex-wrap:wrap;background:#f0dfbfed;border-radius:20px;padding:8px 10px;width:100%}
.defeat-row .helper{min-width:64px}
.shop .wallet{justify-content:center}
/* Settings restructure: icon-only Music/SFX row, Home/Shop as icon buttons, Redeem Code tile. */
/* Same gap formula as .av-toggle-row below it, and no forced flex/max-width on the
   buttons, so a 2-icon row and a 3-icon row read as one consistent, centered pair
   instead of two independently-spaced rows. */
.settings-nav{display:flex;gap:clamp(20px,6vw,48px);width:100%;justify-content:center;margin-bottom:2px}
.av-toggle-row{display:flex;gap:clamp(20px,6vw,48px);width:100%;justify-content:center;margin-bottom:4px}
.icon-toggle{background:transparent;padding:6px}
.icon-toggle img{width:clamp(56px,9vw,84px);height:clamp(56px,9vw,84px);object-fit:contain}
/* Plain wood-border/cream-fill button (no stretched or tiled artwork) so it can never look
   distorted. Same physical size as the Credits button below it. */
.redeem-button{background:#f5e5c4ed;border:3px solid #b88955;border-radius:18px;padding:6px;font-size:clamp(14px,1.8vw,18px);font-weight:800;color:#5b3d22;text-shadow:0 1px #fff5d6}
.redeem-button,#settingsAboutBtn{width:min(200px,70%);min-height:56px}
.world-nav{display:flex;gap:clamp(24px,7vw,72px);justify-content:center;width:100%;margin:clamp(10px,3vh,26px) 0;margin-top:calc(clamp(10px,3vh,26px) + 40px)}
/* At least 3x the normal icon-button size on this row specifically. */
.world-nav .icon-button img{width:clamp(126px,15vw,192px);height:clamp(126px,15vw,192px)}
.redeem-input{width:100%;min-height:52px;border:3px solid #b88955;border-radius:16px;background:#fffaf0;padding:6px 14px;font-size:clamp(16px,2.2vw,22px);font-weight:800;letter-spacing:2px;text-align:center;text-transform:uppercase;color:#5b3d22}
.redeem-input::placeholder{color:#b8a077;letter-spacing:2px}
/* Reward feedback is icon+number, not a sentence, to match the rest of the app's icon-only style. */
#redeemStatus{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;align-items:center;min-height:24px}
.redeem-grant{display:inline-flex;align-items:center;gap:4px;font-size:clamp(16px,2vw,20px);font-weight:800;color:#5b3d22}
.redeem-grant img{width:clamp(24px,3.5vw,34px);height:clamp(24px,3.5vw,34px);object-fit:contain}


/* Shop: her dedicated 971x1619 panel, shown at its own proportions (never stretched).
   Padding (in % of width) keeps content inside the cream interior; it scrolls there. */
#shopModal .modal-box.shop{background:transparent url('cozy/panel_shop.png') center/100% 100% no-repeat;border:0;border-image:none;border-radius:0;box-shadow:none;aspect-ratio:971/1619;height:auto;max-height:none;width:min(600px,94vw,calc(94dvh*971/1619));padding:25% 15.5% 22%;overflow:hidden;display:flex;gap:0}
#shopModal .modal-box.shop:before{display:none}
#shopModal .shop-scroll{flex:1;min-height:0;width:100%;overflow-y:auto;display:flex;flex-direction:column;align-items:center;gap:10px;padding:0 2px 8px;scrollbar-width:thin}
#shopModal .close-button{top:11%;right:9%;width:clamp(36px,8%,52px);height:auto;aspect-ratio:1;background:transparent;border-radius:0}

/* ---- 0.5.0 frames (her art). button_main is reserved for the level-complete window only. ---- */
/* Other dialogs: her square flower tile, 9-sliced so the flower corners never distort. */
.modal-box{border:solid transparent;border-width:44px;border-image:url('cozy/tile_square.png') 140 fill / 44px / 0 stretch;padding:10px 14px 14px}
.modal-box:before{display:none}
.modal-box.victory{border-width:90px 36px 38px;border-image:url('cozy/button_main.png') 120 48 48 fill / 90px 36px 38px / 0 stretch;padding:8px 12px 16px}
@media(max-width:420px){.modal-box{border-width:34px;border-image-width:34px;padding:6px 8px 10px}.modal-box.victory{border-width:70px 25px 30px;border-image-width:70px 25px 30px;padding:6px 4px 12px}}
/* Settings: the ribbon panel, at its own proportions like the shop. */
#settingsModal .modal-box{background:transparent url('cozy/panel_shop.png') center/100% 100% no-repeat;border:0;border-image:none;aspect-ratio:971/1619;width:min(600px,94vw,calc(94dvh*971/1619));padding:25% 15.5% 20%;gap:10px;justify-content:center;overflow:hidden}
#settingsModal .modal-box.in-level{padding:25% 15.5% 20%;gap:10px}
#settingsModal .close-button{top:11%;right:9%;width:clamp(36px,8%,52px);height:auto;aspect-ratio:1}
/* Tags: small = prices, medium = shop coin counter, big = wide action buttons. */
.pack-price,.welcome-offer .pack-price{background:url('cozy/tag_small.png') center/100% 100% no-repeat;box-shadow:none;border-radius:0;color:#4a3324;aspect-ratio:2;width:clamp(84px,92%,132px);min-width:0;padding:0;display:grid;place-items:center;font-size:clamp(12px,1.8vw,16px)}
.pack-tile:disabled .pack-price,.welcome-offer:disabled .pack-price{background:url('cozy/tag_small.png') center/100% 100% no-repeat;box-shadow:none;filter:grayscale(.8);opacity:.7}
.shop .wallet{background:url('cozy/tag_medium.png') center/100% 100% no-repeat;aspect-ratio:2.25;width:clamp(120px,40%,170px);min-height:0;padding:0;justify-content:center;box-shadow:none;border:0}
#removeAdsBtn{background:url('cozy/tag_big.png') center/100% 100% no-repeat;border:0;box-shadow:none;border-radius:0;aspect-ratio:2.6;width:min(300px,92%);min-height:0;padding:0 16%}
#removeAdsBtn:disabled{filter:grayscale(.6)}
.redeem-button{background:url('cozy/tag_big.png') center/100% 100% no-repeat;border:0;border-radius:0;aspect-ratio:2.6;width:min(230px,78%);min-height:0;padding:0 16%}
/* Shop cards: square tile for packs, rectangular tile for the welcome offer. */
.pack-tile{background:none;border:solid transparent;border-width:20px;border-image:url('cozy/tile_square.png') 140 fill / 20px / 0 stretch;border-radius:0;padding:0 0 4px}
.welcome-offer{background:none;border:solid transparent;border-width:24px;border-image:url('cozy/tile_rect.png') 150 fill / 24px / 0 stretch;border-radius:0;box-shadow:none;padding:0 4px}
/* Dialog ✖ sits on the tile's top-right flower corner, never over the title. */
.modal-box .close-button{top:0;right:0;width:44px;height:44px;background:transparent;border-radius:0}
.modal-box:has(>.close-button)>h2,.modal-box:has(>.close-button)>.eyebrow{padding-inline:44px}
@media(max-width:420px){.modal-box .close-button{width:40px;height:40px}.modal-box:has(>.close-button)>h2,.modal-box:has(>.close-button)>.eyebrow{padding-inline:40px}}
/* Settings in the ribbon panel: bigger Music/SFX/VFX and Home/Shop icons. */
#settingsModal .av-toggle-row,#settingsModal .settings-nav{gap:clamp(8px,3vw,24px)}
#settingsModal .icon-toggle img,#settingsModal .settings-nav .icon-button img,#settingsModal .in-level .icon-toggle img,#settingsModal .in-level .settings-nav .icon-button img{width:clamp(64px,17vw,104px);height:clamp(64px,17vw,104px)}
/* Shop: thinner card frames on phones and readable price tags. */
.pack-tile{border-width:14px;border-image-width:14px}
.pack-row{gap:6px}
.pack-price,.welcome-offer .pack-price{width:100%;font-size:clamp(13px,2vw,17px);font-weight:900}
.welcome-offer{grid-template-columns:72px 1fr 104px;gap:6px}
.welcome-offer>img{width:72px;height:72px}
/* Dialog buttons use her three tags at their own proportions (never stretched):
   small = short words (Okay, Buy), medium = Redeem / Credits / Next level, big = long labels. */
.modal-box .wood-button.tag-s,.modal-box .wood-button.tag-m,.modal-box .wood-button.tag-b,#settingsModal .in-level .wood-button.tag-m{min-height:0;height:auto;padding:0 12%;display:flex;align-items:center;justify-content:center;gap:6px;font-weight:800;color:#4a3324;flex-shrink:0}
.modal-box .wood-button.tag-s{background:url('cozy/tag_small.png') center/100% 100% no-repeat;aspect-ratio:2;width:clamp(140px,46%,170px);font-size:clamp(17px,2.2vw,21px)}
.modal-box .wood-button.tag-m,#settingsModal .in-level .wood-button.tag-m{background:url('cozy/tag_medium.png') center/100% 100% no-repeat;aspect-ratio:2.25;width:clamp(170px,60%,220px);font-size:clamp(16px,2.2vw,21px)}
.modal-box .wood-button.tag-b{background:url('cozy/tag_big.png') center/100% 100% no-repeat;aspect-ratio:2.6;width:clamp(220px,80%,290px);font-size:clamp(15px,2vw,19px);padding:0 15%}
.modal-box .wood-button.tag-s img,.modal-box .wood-button.tag-m img{width:1.3em;height:1.3em;object-fit:contain}
/* Shop layout that fits any width: welcome offer = gift + rewards, price centred below;
   on phones the three packs become full-width rows (icon · amount · price). */
#shopModal .shop-scroll{overflow-x:hidden}
.welcome-offer{grid-template-columns:72px 1fr;justify-items:center}
.welcome-offer .pack-price{grid-column:1 / -1;width:clamp(96px,40%,132px)}
@media(max-width:520px){
 .pack-row{grid-template-columns:minmax(0,1fr);gap:6px}
 .pack-tile{display:grid;grid-template-columns:52px minmax(0,1fr) 84px;align-items:center;justify-items:center;padding:0;gap:2px;min-width:0;border-width:10px;border-image-width:10px}
 .pack-tile>img{width:52px;height:52px}
 .pack-tile .pack-price{width:84px}
 .welcome-offer{grid-template-columns:60px 1fr}
 .welcome-offer>img{width:60px;height:60px}
}
.coin-inline{width:1.25em;height:1.25em;object-fit:contain;vertical-align:-.3em;margin-right:3px}
#buyHelperPrice{font-size:clamp(18px,2.4vw,22px)!important;font-weight:800;display:flex;align-items:center;justify-content:center}
.shop-section{margin:10px 0 0;width:100%;font-size:clamp(20px,2.6vw,26px);color:#5b3d22;text-align:center;border-top:2px dashed #d9bd8f;padding-top:10px}
#shopItems .shop-row{padding:8px 0}
#shopModal .shop-scroll>*{flex-shrink:0}
/* Shop: coins + lives sit top-left over the panel, exactly like the in-game header wallet. */
#shopModal #shopWallet{position:absolute;top:10.5%;left:7%;z-index:2;background:#fff6e8f0;aspect-ratio:auto;width:auto;min-height:0;padding:3px 8px;border-radius:14px;box-shadow:0 2px 6px #4a2c2130;gap:6px;font-size:clamp(13px,1.8vw,17px)}
#shopModal #shopWallet img{width:clamp(18px,2.6vw,24px);height:clamp(18px,2.6vw,24px)}
#shopModal .shop-scroll{padding-top:14px}
.life-row .life-ad:disabled{opacity:.45}
.life-ad{background:transparent;padding:0}.life-ad img{width:58px;height:58px;object-fit:contain}
#livesModal .celebration-friend{width:90px;height:84px}
#livesTimer{display:flex;align-items:center;justify-content:center;gap:4px;font-weight:800}
.helper b .coin-inline,#lifePrice .coin-inline{width:1.25em!important;height:1.25em!important;margin:0 3px 0 0}#lifePrice{display:inline-flex;align-items:center;font-size:clamp(15px,2vw,19px)}
/* Main menu buttons: her big tag at its own 2.6:1 proportions (never stretched). */
.home .wood-button{background:url('cozy/tag_big.png') center/100% 100% no-repeat;aspect-ratio:2.6;height:auto;min-height:0;width:clamp(240px,72%,360px);padding:0 16%;display:flex;align-items:center;justify-content:center;font-size:clamp(20px,2.6vw,28px)}
@media(max-height:730px){.home .wood-button{width:clamp(220px,62%,320px);min-height:0}}
.home .wood-button{font-size:clamp(24px,3.4vw,36px)}
.modal-box .wood-button.tag-s,.modal-box .wood-button.tag-m{font-size:clamp(19px,2.6vw,24px)}
.modal-box .wood-button.tag-b{font-size:clamp(17px,2.3vw,22px)}
/* Gluten is wide: keep one-line labels on one line inside the tags. */
.home .wood-button,.modal-box .wood-button.tag-s,.modal-box .wood-button.tag-m,.modal-box .wood-button.tag-b,#removeAdsBtn,.redeem-button,.pack-price{white-space:nowrap}
.home .wood-button{font-size:clamp(21px,3vw,32px);font-weight:700}
.home .wood-button{font-size:clamp(19px,2.8vw,30px);padding:0 18%}
@media(max-height:730px){.home .wood-button{font-size:clamp(16px,2.6vh,20px);padding:0 19%}}
/* Win rewards: both tags drawn at the SAME scale (width follows each image's own pixel width), 10px apart. */
#winRewardChoice{gap:10px}
#winRewardChoice .reward-tile{flex:525 1 0;max-width:178px;min-width:0}
#winRewardChoice #rewardAdBtn{flex:528 1 0;max-width:179px}
#winRewardChoice #rewardAdBtn[hidden]{display:none}
/* Shop: watch an ad for 50 coins (3 per day) — full-width row at the top, apart from the paid packs. */
#adCoinsBtn{display:grid;grid-template-columns:52px minmax(0,1fr) 84px;align-items:center;justify-items:center;width:100%;margin:4px 0 18px;border-width:10px;border-image-width:10px;padding:0}
#adCoinsBtn>img{width:52px;height:52px}
#adCoinsBtn .pack-price{width:84px;gap:3px;font-size:13px;display:flex;align-items:center;justify-content:center}
#adCoinsBtn .ad-badge{background:#e04b4b;color:#fff8ec;border-radius:6px;padding:0 4px;font-size:.78em;line-height:1.45}
#adCoinsBtn:disabled{filter:grayscale(.6);opacity:.75}
#adCoinsBtn .ad-amount{display:flex;flex-direction:column;align-items:center;line-height:1.1}
#adCoinsBtn .ad-left{font-size:12px;color:#8a6a4f;font-weight:800}
#adCoinsBtn .ad-badge{font-size:1em;padding:0 8px}
/* Calendar accessories: the one dressed critter per level (see dressUp in game.js). */
.critter.dressed{position:relative;display:block;overflow:visible}
.critter.dressed .critter-base{display:block;width:100%;height:100%;object-fit:contain}
.critter.dressed .accessory{position:absolute;max-width:none;pointer-events:none;user-select:none}
/* Daily gifts calendar */
#homeGiftBtn{position:absolute;left:max(18px,env(safe-area-inset-left));top:max(14px,env(safe-area-inset-top));margin:0}
#homeGiftBtn img{object-fit:contain}
#homeGiftBtn .gift-dot{position:absolute;top:2px;right:6px;width:14px;height:14px;border-radius:50%;background:#e04b4b;border:2px solid #fff8ec;box-shadow:0 1px 2px #0004}
#homeGiftBtn .gift-dot[hidden]{display:none}
.modal-box.calendar{width:min(460px,96vw);gap:10px}
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;width:100%}
.cal-grid.welcome{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.cal-day{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:1px;min-width:0;aspect-ratio:.8;padding:3px 1px;border-radius:10px;background:#fff6e4;border:2px solid #e4cfa8;color:#5b3d26}
.cal-grid.welcome .cal-day{aspect-ratio:.9;padding:6px 2px}
.cal-num{font-size:10px;line-height:1;opacity:.75}
.cal-reward{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0 2px;flex:1}
.cal-item{display:inline-flex;align-items:center;font-size:10px;font-weight:800;line-height:1}
.cal-item img{width:18px;height:18px;object-fit:contain}
.cal-grid.welcome .cal-item{font-size:14px}.cal-grid.welcome .cal-item img{width:28px;height:28px}.cal-grid.welcome .cal-num{font-size:12px}
.cal-acc{width:100%;max-width:44px;object-fit:contain}
.cal-day.week{background:#fdeccb;border-color:#d9b46a}
.cal-day.big{background:#ffe7b0;border-color:#c9953a;box-shadow:0 0 0 2px #f4d27a inset}
.cal-grid.welcome .cal-day.big{grid-column:span 1}
.cal-day.today{border-color:#6f9a3e;box-shadow:0 0 0 2px #b9dc7a,0 0 10px #d6f98d;transform:translateY(-2px)}
.cal-day.got{opacity:.55}.cal-day.missed{opacity:.35;filter:grayscale(.8)}
.cal-check{position:absolute;right:1px;bottom:1px;width:16px;height:16px}
.cal-grid.welcome .cal-check{width:24px;height:24px}
.cal-goal{display:flex;align-items:center;gap:5px;font-weight:800;color:#5b3d26;margin:0}
.cal-goal img{width:20px;height:20px}.cal-goal.lost{opacity:.5}.cal-goal[hidden]{display:none}
.cal-got{display:inline-flex;gap:8px;align-items:center;font-weight:800}.cal-got .cal-item{font-size:16px}.cal-got .cal-item img{width:30px;height:30px}.cal-got .cal-acc{width:48px}
.cal-grid.welcome{display:flex;flex-wrap:wrap;justify-content:center}.cal-grid.welcome .cal-day{width:calc(25% - 6px)}
.modal-box.calendar{box-sizing:border-box;width:min(460px,calc(100vw - 24px));max-width:calc(100vw - 24px)}
.cal-grid:not(.welcome){gap:3px}
.cal-grid:not(.welcome) .cal-day{overflow:hidden;border-width:1.5px;border-radius:8px;padding:2px 0}
.cal-grid:not(.welcome) .cal-item{flex-direction:column;font-size:9px}
.cal-grid:not(.welcome) .cal-item img{width:16px;height:16px}
.cal-grid:not(.welcome) .cal-reward{flex-direction:column;flex-wrap:nowrap;gap:0}
.cal-grid:not(.welcome) .cal-day.week .cal-reward{flex-direction:row;flex-wrap:wrap}
.cal-grid:not(.welcome) .cal-check{width:13px;height:13px}
/* Home corner buttons are icon-only (the words stay as accessible labels). */
#homeGiftBtn>span,#homeSettingsBtn>span{display:none}
/* Amount first, then a coin the size of the text. */
.pack-amount img{width:1.05em;height:1.05em}
.cal-coins{gap:1px}
.cal-grid:not(.welcome) .cal-coins{flex-direction:row;font-size:11px}
.cal-grid:not(.welcome) .cal-coins img{width:11px;height:11px}
.cal-grid.welcome .cal-coins{font-size:16px}.cal-grid.welcome .cal-coins img{width:16px;height:16px}
.cal-got .cal-coins{font-size:20px}.cal-got .cal-coins img{width:20px;height:20px}
/* More air between the days; Claim lower, the 24-day counter under it. */
.cal-grid:not(.welcome){gap:6px}
.cal-grid.welcome{gap:10px}
#calendarClaim{margin-top:14px}
.cal-goal{margin-top:2px}
/* Victory reward tags stay inside the window. */
#winRewardChoice{padding:0 10px;box-sizing:border-box}
#winRewardChoice .reward-tile{max-width:150px}
#winRewardChoice #rewardAdBtn{max-width:151px}
#winRewardChoice{padding:0 18px}
#winRewardChoice .reward-tile{max-width:138px}
#winRewardChoice #rewardAdBtn{max-width:139px}
/* Welcome gifts: Critter Hop's layout — two rows of wooden tiles, day 7 twice as wide; tap today's tile. */
.cal-grid.welcome{display:grid;grid-template-columns:repeat(4,68px);gap:10px;justify-content:center;width:auto;margin:6px 0 4px}
.cal-grid.welcome .cal-day{width:auto;height:84px;aspect-ratio:auto;padding:0;background:none;border-radius:0;box-shadow:none;transform:none;opacity:1;
  border:solid transparent;border-width:12px;border-image:url('cozy/tile_square.png') 140 fill / 12px / 0 stretch;justify-content:center}
.cal-grid.welcome .cal-day.big{grid-column:span 2;background:none;border-color:transparent}
.cal-grid.welcome .cal-reward{flex:none;flex-direction:row;gap:4px}
.cal-grid.welcome .cal-num{position:absolute;top:-8px;left:-5px;font-size:13px;opacity:.7}
.cal-grid.welcome .cal-check{right:-14px;bottom:-14px;width:28px;height:28px}
.cal-grid.welcome .cal-day.later,.cal-grid.welcome .cal-day.next{opacity:.55}
.cal-grid.welcome .cal-day.today{cursor:pointer;animation:calGlow .9s ease-in-out infinite;filter:drop-shadow(0 0 6px #f4c542) drop-shadow(0 0 3px #f4c542)}
@keyframes calGlow{50%{transform:scale(1.06)}}
#calendarClaim[hidden]{display:none}
/* Victory: the same ribbon panel as Settings. */
#levelCompleteOverlay .modal-box.victory{background:transparent url('cozy/panel_shop.png') center/100% 100% no-repeat;border:0;border-image:none;border-radius:0;box-shadow:none;aspect-ratio:971/1619;height:auto;width:min(600px,94vw,calc(94dvh*971/1619));padding:25% 15.5% 20%;gap:8px;justify-content:center;overflow:hidden}
#levelCompleteOverlay #winRewardChoice{padding:0}
/* Shop wallet: pinned where the wallet always sits (top-left, like the in-game header), not on the panel. */
#shopModal #shopWallet{position:fixed;top:34px;left:max(22px,calc((100vw - 760px)/2 + 9px));z-index:12;background:#f5e6c9ed;padding:4px 6px;border-radius:16px;min-height:32px;font-size:16px;gap:4px;box-shadow:0 2px 6px #4a2c2130}
#shopModal #shopWallet img{width:24px;height:24px}
.cal-grid.welcome{grid-template-columns:repeat(4,minmax(0,60px));gap:9px;width:100%;padding:8px 4px}
.cal-grid.welcome .cal-day{height:76px}
.modal .close-button:focus{outline:none}
.cal-grid.welcome{grid-template-columns:repeat(4,minmax(0,66px));gap:8px;padding:10px 0}
.cal-grid.welcome .cal-day{height:82px}
.cal-grid.welcome .cal-item img{width:34px;height:34px}
.cal-grid.welcome .cal-coins{font-size:18px}.cal-grid.welcome .cal-coins img{width:18px;height:18px}
.cal-grid.welcome .cal-num{font-size:14px;top:-9px;left:-6px;opacity:.8}
.cal-grid.welcome .cal-day.big .cal-acc{max-width:none;width:84px}
/* ---- Halloween event world (her art): backgrounds, level list, and tubes with their own proportions ---- */
#levelScreen.halloween{background-image:url('cozy/Backgrounds/halloween/bg_level_select.png')}
#levelScreen.halloween .screen-header{background:#f0e5f7ed}
#levelScreen.halloween .level-intro{background:#f2e8f8e8}
#levelScreen.halloween #partPager{background:#e7d9f1ed}
.level-grid.halloween .tile-art{--tint:hue-rotate(250deg) saturate(.8) brightness(1.02)}
.game.halloween{background-image:url('cozy/Backgrounds/halloween/bg_normal_a.png')}
.game.halloween.alt{background-image:url('cozy/Backgrounds/halloween/bg_normal_b.png')}
.game.halloween.hard{background-image:url('cozy/Backgrounds/halloween/bg_milestone.png')}
/* Their containers hold the critters in a 50%-wide, 67%-tall window, so the stack is scaled to it. */
#tubeArea[data-theme="halloween"] .tube{padding-bottom:calc(var(--tube-h)*.17)}
#tubeArea[data-theme="halloween"] .critter{height:calc(var(--tube-h)*.163);width:50%}
.world-card.event{background:#eadff3ed;border-color:#7d5aa8;box-shadow:0 6px #4d356e66}
.world-card.event.locked{opacity:.8}
/* The event card is a wide banner above the four campaign worlds. */
.world-card.event{grid-column:1/-1;order:-1;flex-direction:row;min-height:96px;gap:18px;padding:10px 20px}
.world-card.event img{height:68px;width:auto;flex:none}
.world-card.event .event-text{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0}
.world-card.event .event-text h2{font-size:clamp(24px,3.4vw,36px)}

.game.halloween .level-heading h1{font-size:16px}
/* ---- Halloween home: spooky background, her Halloween friends, swaying vector webs, a dangling spider ---- */
.hw-decor{display:none}
.home.halloween{background-image:url('cozy/Backgrounds/halloween/bg_normal_a.png')}
.home.halloween .hw-decor{display:block}
.hw-web{position:absolute;top:0;width:clamp(120px,34vw,190px);height:auto;pointer-events:none;z-index:0;filter:drop-shadow(0 1px 2px #0006);animation:hwSway 5.5s ease-in-out infinite alternate}
.hw-web-l{left:0;transform-origin:0 0}
.hw-web-r{right:0;transform-origin:100% 0;animation-delay:-2.7s}
@keyframes hwSway{from{transform:rotate(-1.8deg)}to{transform:rotate(1.8deg)}}
.hw-dangler{position:absolute;top:0;right:max(76px,19vw);width:46px;z-index:0;pointer-events:none;display:flex;flex-direction:column;align-items:center;transform-origin:50% 0;animation:hwDangle 3s ease-in-out infinite alternate}
.hw-dangler i{display:block;width:1.5px;height:clamp(60px,11vh,100px);background:#ffffffd9;box-shadow:0 0 2px #0008}
.hw-dangler img{width:46px;height:auto;margin-top:-2px;filter:drop-shadow(0 2px 2px #0007)}
@keyframes hwDangle{from{transform:rotate(-8deg)}to{transform:rotate(8deg)}}
.home.halloween #homeSettingsBtn,.home.halloween #homeGiftBtn{z-index:2}
.home.halloween .home-content{position:relative;z-index:1}
/* The spider hangs down the left edge, clear of the logo. */
.hw-dangler{left:5px;right:auto;top:82px;z-index:1}
.hw-dangler i{height:clamp(110px,27vh,280px)}
/* Settings now holds four round toggles (music, sound, effects, notifications). */
#settingsModal .av-toggle-row{gap:clamp(2px,1.5vw,14px)}
#settingsModal .av-toggle-row .icon-toggle{padding:2px}
#settingsModal .av-toggle-row .icon-toggle img,#settingsModal .in-level .av-toggle-row .icon-toggle img{width:clamp(46px,12.5vw,84px);height:clamp(46px,12.5vw,84px)}
/* "A new world has opened!" window */
.world-open{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.world-open-friend{width:clamp(96px,30%,150px);height:auto;object-fit:contain}
/* Level numbers sit in the middle of each tile's own plate. Measured from the art (alpha + colour scan):
   the square's plate centre is 49.7% down its box, the star's 53.1%, the red star's 52.8%. Gluten digits
   draw about 3.2px above the middle of their line (Chrome rounds the font metrics, so it is measured per
   size, not as a fraction of it), so every number is nudged down by --k. Sizes are whole pixels on purpose. */
.level-tile>span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:0;line-height:1;font-size:24px;--k:3.2px;transform:translateY(calc(var(--dy,0%) + var(--k)))}
@media(min-width:700px){.level-tile>span{font-size:32px;--k:3.5px}}
@media(min-width:700px) and (min-height:650px){.level-tile>span{font-size:38px;--k:3.3px}}
.level-tile.tile-plain{--dy:-.3%}
.level-tile.tile-star{--dy:2.9%}
.level-tile.tile-red{--dy:2.7%}
/* Worlds that are not out yet: the critter is a pure black silhouette under a "Coming soon" title. */
.world-card.coming-soon{opacity:.85}
.world-card.coming-soon img.silhouette{filter:brightness(0);opacity:.92}
.world-card.coming-soon h2{opacity:.75}
.world-card p[hidden]{display:none}
/* In-game header: the title and the stats line may take two lines instead of being cut with "..".
   (The wallet and the Settings button leave only ~110-130px for them on a phone.) */
.game-header .level-heading h1{white-space:normal;overflow:visible;text-overflow:clip;max-width:none;line-height:1.05;text-wrap:balance;font-size:16px}
.game-header .level-heading>p:last-child{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.15;text-wrap:balance;font-size:11px}
.game.halloween .level-heading h1{font-size:15px}
@media(min-width:700px) and (min-height:650px){.game-header .level-heading h1{font-size:clamp(25px,3.3vw,40px);white-space:nowrap}.game-header .level-heading>p:last-child{font-size:clamp(12px,1.7vw,20px);white-space:nowrap}}

/* Closed levels, like Sleepy Critters: the tile is darkened (not faded), has no number, and two chains
   cross it corner to corner with a gold padlock in the middle (her chain + padlock art). */
.tile-art{--tint:brightness(1);--dim:brightness(1);filter:var(--tint) var(--dim)}
.level-tile:disabled{opacity:1;filter:none}
.level-tile:disabled .tile-art{--dim:brightness(.76) saturate(.85) hue-rotate(-8deg)}
.level-tile .lock-x{position:absolute;inset:0;pointer-events:none}
.level-tile .lock-x .chain{position:absolute;left:50%;top:50%;width:116%;height:auto;max-width:none;transform:translate(-50%,-50%) rotate(45deg);filter:drop-shadow(0 1px 1px #0005)}
.level-tile .lock-x .chain-b{transform:translate(-50%,-50%) rotate(-45deg)}
.level-tile .lock-x .padlock{position:absolute;left:50%;top:50%;width:50%;height:auto;transform:translate(-50%,-50%);filter:drop-shadow(0 2px 2px #0006)}
/* The in-game title is now just "L" + the level, so it fits on one line and can be bigger. */
.game-header .level-heading h1,.game.halloween .level-heading h1{white-space:nowrap;font-size:26px;line-height:1.1}
@media(min-width:700px) and (min-height:650px){.game-header .level-heading h1,.game.halloween .level-heading h1{font-size:clamp(28px,3.6vw,44px)}}

/* Home: when the stack (logo, friends, buttons) is taller than a short, wide phone, align it to the top instead of
   centring it, so the logo is never cut off above the screen. */
.home-content{justify-content:safe center}
.home-content>.logo{flex-shrink:1;min-height:0;object-fit:contain}
@media(max-height:790px) and (min-width:400px){.home .logo{max-height:clamp(150px,24vh,190px);width:auto;max-width:110%}}
/* Calendar: the weekly gift cells hold two items; make them fit the small cells on narrow phones. */
.cal-grid:not(.welcome) .cal-day.week .cal-reward{flex-direction:row;flex-wrap:wrap;gap:0;justify-content:center;align-content:center}
.cal-grid:not(.welcome) .cal-day.week .cal-item{font-size:9px}
.cal-grid:not(.welcome) .cal-day.week .cal-item img{width:14px;height:14px}
.cal-grid:not(.welcome) .cal-day.week .cal-coins{font-size:10px;gap:0}
.cal-grid:not(.welcome) .cal-day.week .cal-coins img{width:10px;height:10px}
.cal-grid:not(.welcome) .cal-day.week .cal-acc{max-width:30px}
/* Calendar tidy-up: a claimed day shows just a clean tick in the middle; the accessory of day 28 fits its cell. */
.cal-grid:not(.welcome) .cal-day.got .cal-reward{visibility:hidden}
.cal-grid:not(.welcome) .cal-day.got .cal-check{right:auto;bottom:auto;left:50%;top:56%;width:24px;height:24px;transform:translate(-50%,-50%)}
.cal-grid:not(.welcome) .cal-day.week .cal-acc,.cal-grid:not(.welcome) .cal-day.big .cal-acc{max-width:24px}
@media(max-width:340px){.cal-grid:not(.welcome) .cal-day.week .cal-item img{width:11px;height:11px}.cal-grid:not(.welcome) .cal-day.week .cal-item{font-size:8px}}
@media(max-width:340px){.cal-grid:not(.welcome) .cal-day.big .cal-acc{max-width:19px}}
/* Claimed days: the cell is softened, the reward is hidden, and a single green tick (full colour, not faded) sits in the middle. */
.cal-day.got{opacity:1;background:#efe2c8;border-color:#dccaa6}
.cal-day.got .cal-num{opacity:.55}
.cal-day.got .cal-reward{visibility:hidden}
.cal-day.big.got{background:#f1dfb0;border-color:#d9bd78}
.cal-tick{position:absolute;left:50%;top:56%;width:26px;height:26px;transform:translate(-50%,-50%);overflow:visible;filter:drop-shadow(0 1px 1px #0003)}
.cal-grid.welcome .cal-tick{width:40px;height:40px;top:54%}
.cal-tick path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.cal-tick .o{stroke:#1f6a2c;stroke-width:6.4}
.cal-tick .f{stroke:#5fd14f;stroke-width:3.8}
/* ONE bar for the five game buttons — undo, restart, hint, auto organize, extra space — side by side, same size,
   always at the bottom (they used to sit in two groups at opposite corners on short phones). */
nav.game-toolbar{position:static;display:flex;flex-direction:row;align-items:flex-start;justify-content:center;flex-shrink:0;
  gap:clamp(4px,1.6vw,12px);width:auto;max-width:100%;min-height:0;margin:4px 0 0;padding:6px 14px 4px;box-sizing:border-box;
  background:#f0dfbfed;border-radius:22px;--tb:clamp(46px,14.2vw,88px)}
nav.game-toolbar>button{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:2px;
  width:auto;min-width:0;min-height:0;padding:0;margin:0;background:transparent;font-size:12px}
nav.game-toolbar>button[hidden]{display:none}
nav.game-toolbar>button>img{width:var(--tb);height:var(--tb);max-width:none;object-fit:contain}
nav.game-toolbar>button>span{display:none}
nav.game-toolbar>button>b{font-size:clamp(11px,3.2vw,17px);line-height:1;padding:2px 7px;margin:0}
.game .game-status{margin-bottom:2px}
/* A phone turned sideways (the web preview; the Android app itself is locked to portrait): the same single bar lives
   in the strip on the right, as a small block of buttons of the same size. */
@media(orientation:landscape) and (max-height:600px){
  nav.game-toolbar{position:absolute;right:8px;top:78px;bottom:auto;left:auto;width:100px;flex-direction:row;flex-wrap:wrap;justify-content:center;
    align-items:flex-start;gap:4px;padding:5px 4px;margin:0;--tb:40px;border-radius:16px}
  nav.game-toolbar>button>b{font-size:10px;padding:1px 5px}
  .game .game-status{margin-bottom:2px}
}

/* Matcha World colour font: the shine is a white COLR layer (tools/make-color-font.py, free Khurasan font). */
/* No black outline (too dark, small text unreadable): text keeps the soft cream edge the wood buttons use. Chubby font: extra space between words. */
h1,h2{text-shadow:0 1px 0 #fff5d6}
:root{word-spacing:.18em}

/* Settings: title at the top of the panel, the rest centred below it; sound/notification toggles in a 2x2 grid. */
#settingsModal .modal-box{justify-content:flex-start}
#settingsModal #settingsTitle{margin-top:2%}
#settingsModal .settings-nav,#settingsModal .settings-nav[hidden]+.av-toggle-row{margin-top:auto}
#settingsModal #resetProgressBtn{margin-bottom:auto}
#settingsModal .av-toggle-row{display:grid;grid-template-columns:repeat(2,auto);justify-content:center;gap:clamp(8px,3vw,20px) clamp(20px,8vw,48px)}
#settingsModal .av-toggle-row .icon-toggle img,#settingsModal .in-level .av-toggle-row .icon-toggle img{width:clamp(64px,17vw,96px);height:clamp(64px,17vw,96px)}

/* NORMA (all Sailor Lux games): the studio logo on the home screen is small, at most 30% of the screen width and 120px. */
.signature img{width:clamp(80px,30vw,120px);height:clamp(80px,30vw,120px)}
@media(max-height:700px){.signature img{width:clamp(60px,18vw,80px);height:clamp(60px,18vw,80px)}}

/* Victory: friend at the top and bigger, content spread over the panel; Next level centred. */
#levelCompleteOverlay .modal-box.victory{justify-content:space-evenly;padding-top:22%;padding-bottom:18%}
#levelCompleteOverlay .celebration-friend{width:min(55%,200px);height:auto;aspect-ratio:1;margin-top:0}
#levelCompleteOverlay .win-choice{align-items:center}
/* Matcha World is wider than Gluten: medium tags grow to fit their word instead of spilling out. */
.modal-box .wood-button.tag-m,#settingsModal .in-level .wood-button.tag-m{width:auto;min-width:clamp(170px,60%,220px);white-space:nowrap}

/* Home: tag_big.png has ~13% empty rows top and bottom, so the two buttons looked far apart. Pull the second one up. */
.home #levelsBtn{margin-top:-26px}
/* Big tags too: grow to fit the words, flowers at the ends stay clear. */
.modal-box .wood-button.tag-b{width:auto;min-width:clamp(220px,80%,290px);padding:0 50px}

/* Same visible size for icon tiles: settings toggles match Home/Shop; the bell and the revive-with-ad
   PNGs draw their wooden tile at ~85% of the image, so they are scaled up to match their neighbours. */
#settingsModal .av-toggle-row .icon-toggle img,#settingsModal .in-level .av-toggle-row .icon-toggle img{width:clamp(64px,17vw,104px);height:clamp(64px,17vw,104px)}
#notifToggle img{transform:scale(1.15)}
#reviveAdBtn img{transform:translateX(7%) scale(1.17)}
/* Victory reward buttons (new 10 / AD 30 art): use the full panel width. */
#levelCompleteOverlay #winRewardChoice{gap:6px;width:112%;margin:0 -6%}
#levelCompleteOverlay #winRewardChoice .reward-tile{max-width:none}

/* Stars (victory panel and level map). */
.win-stars{display:flex;justify-content:center;align-items:flex-end;gap:2px;flex-shrink:0}
.win-stars img{width:clamp(52px,15vw,72px);height:auto;aspect-ratio:240/231}
.win-stars img:nth-child(2){width:clamp(62px,18vw,86px);margin-bottom:10px}
.win-stars img.pop{animation:starPop .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes starPop{0%{transform:scale(.2);opacity:.3}60%{transform:scale(1.18);opacity:1}100%{transform:scale(1)}}
#levelCompleteOverlay .celebration-friend{width:min(42%,160px)}
#rewardAdBtn{position:relative}
#rewardAdBtn .ad-badge{position:absolute;left:50%;top:0;width:30%;height:auto;transform:translate(-50%,-62%);pointer-events:none}
.level-tile>span.tile-stars{position:absolute;inset:auto auto -13px 50%;transform:translateX(-50%);display:flex;gap:0;padding:0;pointer-events:none}
.level-tile>span.tile-stars img{width:clamp(12px,3.2vw,20px);height:auto}
.level-grid{row-gap:clamp(14px,3.5vw,26px)}

/* Website demo: no ads, purchases or phone reminders. */
body.demo .life-row,body.demo #adCoinsBtn,body.demo #welcomeOffer,body.demo #packItems,body.demo #removeAdsBtn,body.demo #restoreBtn,body.demo #billingStatus,body.demo .life-ad,body.demo #rewardAdBtn,body.demo #reviveAdBtn,body.demo #lifeAdBtn,body.demo #notifToggle{display:none!important}
#noticePlayBtn{text-decoration:none;padding:0 48px}