/* The outer viewport letterboxes one fixed-ratio game canvas. */
html:has(body.fairy-game),body.fairy-game{width:100%;height:100%;overflow:hidden;margin:0;background:#28213b}
body{--app-width:1440px;--app-height:810px;--app-scale:1}
#app{position:fixed;left:50%;top:50%;width:var(--app-width);height:var(--app-height);transform:translate(-50%,-50%) scale(var(--app-scale));transform-origin:center;overflow:hidden;border-radius:22px;isolation:isolate}
#app .game-shell{width:100%;height:100%;min-height:0;margin:0;border:0;border-radius:0;overflow:hidden;grid-template-columns:190px minmax(0,1fr)}
#app .game-main{height:100%;min-height:0;padding-bottom:0;display:flex;flex-direction:column;overflow:hidden}
#app .game-rail{height:100%;min-height:0;overflow-y:auto;overflow-x:hidden;padding:20px 12px;gap:13px}
#app .game-rail nav{gap:5px}#app .game-rail nav button{min-height:46px;padding:7px 10px}
#app .game-topbar{height:70px;flex:0 0 70px}
#app #main{min-height:0;flex:1;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;position:relative;scrollbar-width:thin}
#app .game-main.is-home>#main{display:flex;flex-direction:column}
#app #main>.game-home{flex:1;height:auto}
#app #main>.demo-note{flex-shrink:0}
#app .game-home{height:100%;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,48%);grid-template-rows:minmax(0,1fr) 76px;gap:18px;padding:18px 26px}
#app .home-task-panel{grid-column:2;grid-row:1;align-self:center;margin-top:0}
#app .game-home>.doll-stage{grid-column:1;grid-row:1;height:100%;max-height:470px;min-height:0;width:100%;align-self:end;justify-self:center;margin:0}
#app .home-shortcuts{grid-column:1/-1;grid-row:2;padding-left:0}
#app .speech,#app .home-greeting{display:none!important}
body.fairy-game dialog{width:min(560px,calc(var(--frame-screen-width) - 24px));max-height:calc(var(--frame-screen-height) - 24px)}
body.fairy-game #toast{bottom:auto;top:calc(50% + var(--frame-screen-height) / 2 - 85px);max-width:calc(var(--frame-screen-width) - 24px);transform:translate(-50%,-100%)}
#app .game-main.is-home{background-size:cover;background-position:center}
body[data-device="tablet"] #app .game-shell{grid-template-columns:150px minmax(0,1fr)}
body[data-device="tablet"] #app .game-rail .game-logo{font-size:calc(14px * var(--text-scale,1.18));gap:2px}
body[data-device="tablet"] #app .game-logo img{width:27px;height:27px}
body[data-device="tablet"] #app .game-rail nav button{font-size:calc(12px * var(--text-scale,1.18));flex-direction:row;gap:8px}
body[data-device="tablet"] #app .game-rail nav button img{width:26px;height:26px}
body[data-device="tablet"] #app .rail-profile{display:flex;gap:7px}
body[data-device="tablet"] #app .rail-profile .portrait{width:44px;height:44px;border-radius:16px}
body[data-device="tablet"] #app .rail-profile b{font-size:calc(13px * var(--text-scale,1.18))}
body[data-device="tablet"] #app .mini-progress{width:52px}
body[data-device="tablet"] #app .game-home{grid-template-columns:minmax(0,1fr) minmax(320px,48%);padding:16px;gap:14px}
body[data-device="tablet"] #app .home-shortcuts>button.parchment{gap:8px;padding:10px}
body[data-device="tablet"] #app .home-shortcuts img{width:36px;height:36px}
body[data-device="tablet"] #app .home-shortcuts b{font-size:calc(13px * var(--text-scale,1.18))}
body[data-device="tablet"] #app .home-task-panel h2{font-size:calc(20px * var(--text-scale,1.18))}
body[data-device="tablet"] #app .game-home>.doll-stage{max-height:460px}
body[data-device="phone"] #app{border-radius:18px}
body[data-device="phone"] #app .game-shell{display:block}
body[data-device="phone"] #app .game-rail{display:none}
body[data-device="phone"] #app .game-main{padding-bottom:66px}
body[data-device="phone"] #app .game-topbar{height:88px;flex-basis:88px;padding:8px 13px 6px;gap:3px}
body[data-device="phone"] #app .game-main:not(.is-home)>.game-topbar{display:none}
body[data-device="phone"] #app .mobile-profile .portrait{width:39px;height:39px}
body[data-device="phone"] #app .mobile-profile .portrait img{height:88px}
body[data-device="phone"] #app .mobile-profile b{font-size:calc(14px * var(--text-scale,1.18))}
body[data-device="phone"] #app .mobile-profile small{margin:2px 0;font-size:calc(9px * var(--text-scale,1.18))}
body[data-device="phone"] #app .mobile-xp{height:5px;width:90px}
body[data-device="phone"] #app .game-tools{padding:0}
body[data-device="phone"] #app .game-tools button{width:34px;height:34px}
body[data-device="phone"] #app .game-balances>span{min-height:27px;padding-top:1px;padding-bottom:1px}
body[data-device="phone"] #app .game-balances .currency-icon{height:21px!important;width:21px!important}
body[data-device="phone"] #app .game-mobile-nav{position:absolute;inset:auto 0 0;height:66px;padding:5px 10px 6px;border-radius:21px 21px 0 0}
body[data-device="phone"] #app .game-mobile-nav .mobile-add{margin-top:-15px;width:54px;height:54px;min-height:54px;flex-basis:54px}
body[data-device="phone"] #app .game-home{display:grid;height:100%;min-height:0;padding:0 12px 8px;grid-template-columns:1fr;grid-template-rows:32px 174px minmax(0,1fr);gap:0;overflow:hidden}
body[data-device="phone"] #app .game-home>.doll-stage{grid-column:1;grid-row:2;width:100%;height:100%;max-height:none;min-height:0;align-self:stretch;margin:0!important}
body[data-device="phone"] #app .game-home>.doll-stage .doll{height:100%;width:auto;bottom:8px;z-index:2}
body[data-device="phone"] #app .game-home>.doll-stage>.stage-pet{bottom:8px;right:15%;height:36%;width:30%;z-index:3}
body[data-device="phone"] #app .game-home>.doll-stage>.stage-furniture{bottom:8px;left:10%;height:31%;width:30%}
body[data-device="phone"] #app .game-home .stage-platform{display:block;bottom:0;left:8%;width:84%;height:26px;border-radius:50%;filter:none;opacity:1;z-index:1;background:radial-gradient(ellipse at 25% 35%,#d6dd86 0 3%,transparent 4%),radial-gradient(ellipse at 68% 30%,#c9d87d 0 4%,transparent 5%),linear-gradient(#b1cb65,#80a84d);border:2px solid #a5be60;box-shadow:0 5px 0 #8b8058,0 9px 0 #77624d,0 12px 8px #463a4c38}
body[data-device="phone"] #app .home-task-panel{display:block;grid-column:1;grid-row:3;align-self:stretch;margin:0;padding:9px 9px 3px;min-height:0;overflow-y:auto;overscroll-behavior:contain}
body[data-device="phone"] #app .home-task-panel h2{font-size:calc(14px * var(--text-scale,1.18));margin-bottom:3px}
body[data-device="phone"] #app .home-task-panel .game-task{min-height:49px;padding:2px 3px;gap:7px}
body[data-device="phone"] #app .home-task-panel .game-task-icon{width:32px;height:32px}
body[data-device="phone"] #app .home-task-panel .game-task b{font-size:calc(12px * var(--text-scale,1.18))}
body[data-device="phone"] #app .home-task-panel .game-task small{margin-top:2px;font-size:calc(9px * var(--text-scale,1.18))}
body[data-device="phone"] #app .home-task-panel .task-status{min-height:44px;padding:4px 10px;font-size:calc(11px * var(--text-scale,1.18))}
body[data-device="phone"] #app .home-task-panel .all-tasks{min-height:30px;padding:5px;font-size:calc(11px * var(--text-scale,1.18))}
body[data-device="phone"] #app .mobile-home-switch{top:0;right:12px;padding:1px}
body[data-device="phone"] #app .mobile-home-switch button{min-height:29px;padding:4px 9px}
body[data-device="phone"] #app .mobile-pet-link{left:12px;top:0;min-height:30px;padding:0 6px 0 1px}
body[data-device="phone"] #app .mobile-pet-link img{width:26px;height:26px}
body[data-device="phone"] #app .daily-gift{right:115px;top:0}
body[data-device="phone"] #app .daily-gift img{width:30px;height:30px}
body[data-device="phone"] #app .daily-gift span{display:none}
body[data-device="phone"] #app .game-main.is-home{background-size:auto var(--app-height);background-position:center top}
body[data-device="phone"] #app .home-shortcuts{display:none}
body[data-device="phone"].mobile-adventure #app .game-home{display:block;min-height:0;height:100%}
body[data-device="phone"].mobile-adventure #app .game-home>.doll-stage{position:absolute;left:0;right:0;top:35px;bottom:76px;width:100%;height:auto;min-height:0;max-height:none;margin:0!important}
body[data-device="phone"].mobile-adventure #app .home-task-panel{display:none}
body[data-device="phone"].mobile-adventure #app .mobile-claim{bottom:10px;min-height:53px;font-size:calc(22px * var(--text-scale,1.18))}
body[data-device="phone"].mobile-adventure #app .mobile-side-shortcuts{top:30%;right:9px;gap:10px}
body[data-device="phone"].mobile-adventure #app .mobile-side-shortcuts button{min-height:49px;min-width:45px}
body[data-device="phone"].mobile-adventure #app .mobile-side-shortcuts img{width:35px;height:35px}
body[data-device="phone"] #app .page-parchment{min-height:0}
body[data-device="phone"] #app .game-page-title{min-height:54px;padding-top:9px;padding-bottom:9px}
body[data-device="phone"] #app .dress-room{min-height:470px}
body[data-device="phone"] #app .game-main:not(.is-home) #main{padding-bottom:10px}
body[data-device="phone"] #app .demo-note{position:absolute;bottom:0;left:0;right:0;z-index:9;font-size:calc(8px * var(--text-scale,1.18));padding:1px;pointer-events:none}