.hud-bar .btn:first-child{
  background:linear-gradient(#5ee3ca,#00bba8)}
.hud-bar .btn:nth-child(2){
  background:linear-gradient(#b67bf7,#8346d0);
  box-shadow:0 4px 0 #6434a4}
@media(max-aspect-ratio:5/4){.screen.dim{
  background-image:url('../portrait-D4XbiIIh.webp')}.home-inner{
  padding-top:58svh}.home .brand{
  top:0;
  width:min(62vw,270px);
  height:18svh}.brand-image{
  max-height:18svh}}
/* Visual critique pass: match the approved Fox Club composition. */
.screen.menu-scene{
  background:#16d5cb url('../cinematic-landscape-Ch3efO2x.webp') center/cover fixed}
@media(max-aspect-ratio:5/4){.screen.menu-scene{
  background:#16d5cb url('../portrait-D4XbiIIh.webp') center/cover fixed;
  padding-top:calc(var(--safe-top) + 58px)}.menu-surface{
  background:#ffffffeb}}
@media(min-width:1100px) and (min-aspect-ratio:5/4){
 .home-inner{
  width:min(1850px,100%);
  grid-template-columns:40% 28% 32%;
  grid-template-rows:180px 100px 82px 82px 82px;
  gap:12px 20px}
 .home .brand{
  grid-column:2;
  grid-row:1/3;
  width:min(440px,100%);
  align-self:start}
 .home-menu{
  display:contents}
 .home-menu>.home-play{
  grid-column:2;
  grid-row:3;
  width:100%;
  max-width:430px;
  align-self:center}
 .home-menu>.home-modes{
  grid-column:3;
  grid-row:2;
  width:100%}
 .home-menu>.home-utilities:nth-last-child(2){
  grid-column:3;
  grid-row:3;
  width:100%}
 .home-menu>.home-utilities:last-child{
  grid-column:3;
  grid-row:4;
  width:100%}
 .home-modes .btn,.home-utilities .btn{
  min-height:72px;
  font-size:19px;
  border-radius:23px}
 .home-menu .btn svg{
  width:29px;
  height:29px}
}
.victory-wrap.stage{
  background:#063f5388;
  -webkit-backdrop-filter:none;
  backdrop-filter:none}
.stage-panel.result-modal{
  padding:18px 22px;
  background:#fff;
  border:3px solid white;
  border-radius:24px;
  color:#192744;
  box-shadow:0 8px 0 #057c80,0 14px 32px #053e4c55;
  gap:5px}
.victory-wrap .stage-title{
  color:#192744;
  text-shadow:none;
  font-size:clamp(28px,5vw,40px)}
.victory-wrap .stage-rays{
  display:none}
.victory-wrap .victory-hero .mimo{
  height:clamp(76px,16dvh,120px)}
.stage-panel .result{
  text-shadow:none;
  color:#192744}
.stage-panel .stat{
  background:#e7f5fa;
  border:0;
  backdrop-filter:none;
  -webkit-backdrop-filter:none}
.stage-panel .stat .v,.stage-panel .stat .k,.stage-panel .stat .best{
  color:#192744}
.stage-panel .btn.primary,.stage-panel .btn.primary:hover:not(:active):not(.pressed):not([disabled]){
  background:linear-gradient(#ffa624,#ff7900);
  border:3px solid white;
  box-shadow:0 4px 0 #c65a04;
  color:#fff}
@media(min-width:1100px) and (min-aspect-ratio:5/4){.home-menu:has(.home-new)>.home-play{
  grid-row:3}.home-menu:has(.home-new)>.home-new{
  grid-column:2;
  grid-row:4;
  width:100%;
  max-width:430px}}
.home-menu .btn.big{
  flex-direction:row;
  font-size:clamp(23px,2vw,32px)}
.home-menu .btn.big svg{
  width:34px;
  height:34px}
@media(min-width:1100px) and (min-aspect-ratio:5/4){.home-menu>.home-play{
  min-height:90px}.home-menu .grid2 .btn{
  font-size:20px}.home-menu .grid2 .btn svg{
  color:#00ad9c;
  width:32px;
  height:32px}}
@media(min-width:900px) and (min-aspect-ratio:5/4){.screen.menu-scene::before{
  content:'';
  position:fixed;
  left:5vw;
  bottom:2vh;
  width:min(34vw,500px);
  height:min(65vh,600px);
  background:url('../welcome-DpkRwc5-.webp') center bottom/contain no-repeat;
  pointer-events:none;
  filter:drop-shadow(0 6px 8px #00625744)}}
#tutor.big{
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  background:#0c475b77}
#tutor.big .tutor-card .btn.primary,#tutor .btn.primary{
  background:linear-gradient(#ffa624,#ff7900);
  border-color:#fff;
  box-shadow:0 4px 0 #c65a04;
  color:#fff}
.tutor-veil.on{
  background:#073d512e;
  -webkit-backdrop-filter:none;
  backdrop-filter:none}
.tutor-go{
  background:linear-gradient(#ffa624,#ff7900);
  box-shadow:0 4px 0 #c65a04,0 8px 15px #b9550055}
#tutor.big .tutor-card{
  top:auto;
  bottom:calc(var(--safe-bottom) + 78px);
  transform:translateX(-50%);
  flex-direction:row;
  align-items:flex-end;
  width:min(620px,calc(100vw - 24px))}
#tutor.big .tutor-card.pop{
  animation-name:tutor-pop}
#tutor.big .tutor-mochi{
  height:112px!important;
  width:112px;
  margin:0 -8px 0 0}
#tutor.big .tutor-say{
  width:auto;
  padding:14px 16px 20px}
#tutor.big .tutor-say p{
  text-align:left;
  font-size:16px;
  margin-bottom:10px}
#tutor.big .tutor-head{
  justify-content:space-between}
#tutor.big .tutor-tools{
  position:static}
#tutor.big .tutor-foot{
  flex-direction:row;
  justify-content:space-between}
#tutor.big .tutor-go{
  min-height:46px;
  font-size:15px;
  padding:0 14px;
  margin-left:auto}
@media(max-width:430px){#tutor.big .tutor-mochi{
  height:76px!important;
  width:76px}#tutor.big .tutor-say p{
  font-size:15px}}
@media(min-width:1100px) and (min-aspect-ratio:5/4){.home-menu>.home-play{
  height:100px;
  min-height:100px;
  font-size:32px}.home-menu>.home-play svg{
  width:42px;
  height:42px}}
.campaign-progress::before{
  content:'';
  display:block;
  float:left;
  width:128px;
  height:150px;
  margin:-4px 14px 2px -6px;
  background:url('../welcome-DpkRwc5-.webp') center bottom/contain no-repeat}
.campaign-progress::after{
  content:'';
  display:block;
  clear:both}
.daily-panel .daily-hero img{
  height:116px!important;
  width:100px!important;
  object-fit:contain}
@media(max-width:430px){.campaign-progress::before{
  width:82px;
  height:124px;
  margin-right:10px}.daily-panel .daily-hero img{
  height:100px!important;
  width:84px!important}}
#tutor.big .tutor-mochi{
  height:138px!important;
  width:120px}
@media(max-width:430px){#tutor.big .tutor-mochi{
  height:112px!important;
  width:100px}}
.tutor-veil.on{
  background:#073d510d}
.victory-wrap .victory-hero .mimo{
  height:clamp(110px,19dvh,150px)}
.daily-panel .daily-hero canvas{
  width:105px!important;
  height:105px!important;
  object-fit:contain;
  flex:none}
.fox-pause .modal{
  overflow:visible;
  position:relative;
  padding-top:50px;
  margin-top:50px}
.fox-pause .pause-mascot{
  position:absolute;
  left:50%;
  top:-78px;
  transform:translateX(-50%);
  filter:drop-shadow(0 4px 6px #0a455044)}
.fox-pause .stage-menu{
  width:100%}.fox-pause .modal .actions{
  margin-top:12px}.fox-pause .panel-head h2{
  text-align:center}
/* Final composition refinements */
.tutor-spot{
  box-shadow:0 0 0 100vmax #0c263414,0 0 0 3px #fff3a6,0 0 22px 4px #ffd84dbb}
.daily-panel .daily-hero{
  background:linear-gradient(90deg,#16d5cbb0,#fff0),url('../landscape-Df771f1Q.webp') center/cover;
  border-radius:17px;
  padding:8px;
  min-height:130px}
.daily-panel .daily-hero canvas{
  width:120px!important;
  height:120px!important;
  filter:drop-shadow(0 3px 5px #003e4455)}
.daily-panel .daily-hero>div{
  flex:1;
  min-width:130px;
  background:#ffffffdc;
  border-radius:14px;
  padding:10px}
@media(min-height:700px){.stage-panel.result-modal{
  position:relative;
  margin-top:62px;
  padding-top:58px}.victory-wrap .victory-hero{
  position:absolute;
  top:-75px;
  left:50%;
  transform:translateX(-50%)}.victory-wrap .victory-hero .mimo{
  height:130px}}

/* Fox Club menus: one character in the painted scene and real controls above it. */
.screen.menu-scene::before{
  content:none}
.menu-surface{
  background:transparent;
  border:0;
  box-shadow:none;
  padding:0}
.menu-surface>.panel{
  background:#fff;
  box-shadow:0 4px 0 #029b91,0 10px 22px #066a7133;
  border:3px solid #fff;
  padding:18px}
.menu-surface .screen-head{
  margin-bottom:14px}
.screen-head h1{
  color:#122c43;
  text-shadow:-2px -2px #fff,2px -2px #fff,-2px 2px #fff,2px 2px #fff,0 4px 0 #fff}
.screen-collection .screen-head h1,.screen-stats .screen-head h1{
  flex:0 1 auto;
  padding:8px 34px;
  border:3px solid #fff;
  border-radius:38px;
  background:linear-gradient(#bd82f4,#8846d4);
  color:#fff;
  text-align:center;
  text-shadow:0 3px #70309e;
  box-shadow:0 4px 0 #6d309c}
.menu-surface .chapter{
  border:2px solid #e1eff2}
@media(min-width:900px) and (min-aspect-ratio:5/4){
 .screen.menu-scene{
  padding-top:calc(var(--safe-top) + 56px)}
 .menu-surface{
  width:min(760px,52vw)}
 .menu-surface .chapter{
  display:grid;
  grid-template-columns:36% minmax(0,1fr);
  min-height:112px}
 .menu-surface .chapter-thumb{
  height:auto;
  min-height:112px}
 .menu-surface .chapter-thumb .label{
  width:100%;
  font-size:17px;
  background:linear-gradient(0deg,#13243ddd,transparent 85%)}
 .menu-surface .chapter-body{
  align-content:center}
 .campaign-progress::before{
  width:180px;
  height:155px}
}
.daily-panel .daily-hero{
  display:grid;
  grid-template-columns:minmax(100px,35%) minmax(0,1fr);
  gap:12px;
  align-items:center;
  min-height:170px;
  padding:0;
  background:none}
.daily-panel .daily-hero canvas{
  width:100%!important;
  height:160px!important;
  object-fit:contain;
  filter:none}
.daily-panel .daily-hero>div{
  min-width:0;
  background:none;
  padding:0}
.daily-actions{
  display:grid;
  gap:8px;
  margin-top:12px}
.daily-panel>p{
  border-top:1px solid #d7edf0;
  margin-top:14px;
  padding-top:12px;
  text-align:center}
@media(max-width:430px){.daily-panel .daily-hero{
  grid-template-columns:95px minmax(0,1fr);
  min-height:130px}.daily-panel .daily-hero canvas{
  height:130px!important}.daily-hero .date{
  font-size:18px}}
.fox-rules .modal{
  width:min(740px,100%);
  padding:22px 26px;
  position:relative;
  overflow-y:auto}
.fox-rules .rules-mascot{
  display:none}
.rules-body .rule-row{
  display:flex;
  align-items:center;
  gap:18px;
  border-bottom:1px solid #e1eef0;
  padding:11px 0}
.rules-body .rule-row p{
  margin:0;
  flex:1;
  color:var(--ink);
  font-weight:700;
  line-height:1.45}
.rule-suits,.rule-cards{
  width:150px;
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px}
.rule-suits span{
  display:grid;
  place-items:center;
  width:32px;
  height:42px;
  border:2px solid #85daca;
  border-radius:5px;
  color:#00a793;
  font-size:22px;
  background:#effcf8}
.rule-cards img{
  width:48px;
  height:auto;
  filter:drop-shadow(0 3px 2px #15394444)}
.fox-rules .panel-head h2{
  text-align:center}
@media(max-width:1099px){.fox-rules .panel-head{
  position:sticky;
  top:-22px;
  z-index:3;
  background:#fff;
  box-shadow:0 -24px 0 #fff}.fox-rules .modal.scrolled .panel-head{
  box-shadow:0 -24px 0 #fff,0 28px 0 #fff}}
@media(min-width:700px) and (max-width:1099px){.fox-rules .modal.scrolled .panel-head{
  box-shadow:0 -24px 0 #fff,0 40px 0 #fff}}
@media(min-width:1100px){.fox-rules .modal{
  margin-left:180px;
  overflow:visible;
  max-height:calc(100% - 48px)}.fox-rules .rules-body{
  max-height:calc(100vh - 170px);
  overflow-y:auto;
  padding-right:6px}.fox-rules .rules-mascot{
  display:block;
  position:absolute;
  left:-200px;
  bottom:-8px;
  width:230px!important;
  height:230px!important;
  filter:drop-shadow(0 6px 8px #003e4a55)}}
@media(max-width:520px){.fox-rules .modal{
  padding:16px}.fox-rules .panel-head{
  top:-16px}.rule-suits,.rule-cards{
  width:100px;
  gap:2px}.rule-suits span{
  width:22px;
  height:33px;
  font-size:17px}.rule-cards img{
  width:37px}.rules-body .rule-row{
  gap:10px}.rules-body .rule-row p{
  font-size:14px}}
@media(min-width:900px) and (min-aspect-ratio:5/4){.menu-surface .chapter{
  height:125px;
  min-height:125px}.menu-surface .chapter-thumb{
  height:100%;
  min-height:0}.menu-surface .chapter-thumb img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%}.menu-surface .campaign-progress::before{
  height:150px}}
@media(min-width:900px) and (min-aspect-ratio:5/4){.screen-daily .cal-grid .day{
  aspect-ratio:auto;
  height:clamp(44px,6vh,58px)}.screen-collection .thumbs:not(.backs) canvas{
  height:78px;
  object-fit:cover}.screen-collection .thumbs.backs canvas{
  width:min(88px,65%)}.screen-collection .thumb{
  padding:8px;
  gap:5px}.screen-collection .panel h3{
  margin:12px 0 9px}}
/* Campaign and daily use the greenhouse without a second painted mascot. */
@media(min-aspect-ratio:5/4){.screen-campaign.menu-scene,.screen-daily.menu-scene{
  background:#20d6cb var(--fox-greenhouse) center/cover fixed;
  align-items:center}.screen-campaign .menu-surface,.screen-daily .menu-surface{
  width:min(920px,90vw)}}
@media(min-width:900px) and (min-aspect-ratio:5/4){.screen-campaign .campaign-progress::before{
  width:240px;
  height:155px}.screen-campaign .menu-surface .chapter{
  grid-template-columns:32% minmax(0,1fr)}}
.screen-stats .stat-grid .stat{
  display:flex;
  align-items:center;
  gap:14px}
.screen-stats .stat-icon{
  width:36px;
  height:36px;
  flex:none;
  display:grid;
  place-items:center;
  color:#00b99d}
.screen-stats .stat-icon svg{
  width:100%;
  height:100%;
  stroke-width:2.5}
.screen-stats .stat:nth-child(4n+2) .stat-icon{
  color:#ff9800}
.screen-stats .stat:nth-child(4n+3) .stat-icon{
  color:#a348e2}
.screen-stats .stat-copy{
  min-width:0}
@media(max-width:430px){.screen-stats .stat-grid .stat{
  gap:7px;
  padding:10px}.screen-stats .stat-icon{
  width:27px;
  height:27px}.screen-stats .stat .v{
  font-size:22px}}
/* Headings and hero proportions from the approved campaign and daily screens. */
.screen-campaign .screen-head,.screen-daily .screen-head{
  position:relative;
  justify-content:center;
  min-height:50px}
.screen-campaign .screen-head>button,.screen-daily .screen-head>button{
  position:absolute;
  left:0;
  top:0}
.screen-campaign .screen-head h1,.screen-daily .screen-head h1{
  flex:0 1 auto;
  text-align:center;
  padding:0 60px;
  font-size:clamp(27px,3.2vw,40px);
  text-decoration:underline;
  text-decoration-color:#00af8f;
  text-decoration-thickness:4px;
  text-underline-offset:6px}
.screen-campaign .screen-head .hud-brand,.screen-daily .screen-head .hud-brand{
  display:none}
@media(min-width:900px) and (min-aspect-ratio:5/4){.screen-campaign .campaign-progress::before{
  width:260px;
  height:180px;
  margin:-8px 14px -8px -8px}.screen-daily .daily-hero{
  grid-template-columns:35% minmax(0,1fr);
  min-height:190px}.screen-daily .daily-hero canvas{
  height:190px!important}}
#tutor.big{
  background:transparent}
.chapter-locked-content{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px;
  background:#eff4fa}
.screen-campaign .chapter.locked .chapter-name,.screen-campaign .chapter.locked .chapter-locked-content{
  background:#e5ebf5}
.screen-campaign .chapter.locked .chapter-thumb :is(img,canvas){
  filter:saturate(.78) brightness(.88)}
.chapter-lock-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 14px;
  border:2px solid #a65bdd;
  background:white;
  border-radius:18px;
  color:#6c2bb3;
  font-size:14px;
  font-weight:900;
  text-align:center}
.chapter-lock-badge svg{
  width:19px;
  height:19px;
  flex:none}
@media(min-width:900px) and (min-aspect-ratio:5/4){.screen-collection .thumbs:not(.backs) canvas{
  height:90px;
  object-fit:fill}}
.hud-bar .btn:first-child{
  background:linear-gradient(#b67bf7,#8346d0);
  box-shadow:0 4px 0 #6434a4}
.hud-bar .btn:nth-child(2){
  background:linear-gradient(#5ee3ca,#00bba8);
  box-shadow:0 4px 0 #006f7a}
.chapter-list{
  width:100%;
  margin-top:12px}.menu-surface .chapter-list .chapter{
  background:#fff;
  border:3px solid #fff;
  box-shadow:0 4px 0 #07978c,0 8px 18px #06565b38;
  margin-bottom:12px}
@media(min-width:900px) and (min-aspect-ratio:5/4){.screen-campaign .campaign-progress::before{
  width:260px;
  height:210px;
  margin:-14px 14px -15px -8px}.screen-daily .daily-hero{
  min-height:220px}.screen-daily .daily-hero canvas{
  height:220px!important}}
/* Keep all sound controls while matching the compact settings rows. */
.settings .set-grid.one{
  gap:0}
.settings .snd-row{
  grid-template-columns:44px minmax(90px,1fr) minmax(80px,50%);
  grid-template-areas:'b l r';
  gap:12px;
  min-height:68px;
  padding:8px 4px;
  background:transparent;
  border-bottom:1px solid #d9e8eb;
  border-radius:0}
.settings .snd-row:last-child{
  border-bottom:0}
.settings .snd-row>label,.settings .snd-row input[type=range]{
  align-self:center}
.settings .snd-btn{
  width:42px;
  height:42px;
  border-radius:12px;
  background:#e6f5f4;
  color:#008e7e}
.settings .snd-btn svg{
  width:23px;
  height:23px}
.settings .snd-row.off .snd-btn{
  background:#eef3f6;
  color:#76889b}
@media(max-width:380px){.settings .snd-row{
  grid-template-columns:40px minmax(76px,1fr) minmax(80px,44%);
  gap:7px}.settings .snd-row>label{
  font-size:14px}}
@media(min-height:700px) and (max-width:520px){#tutor:not(.big) .tutor-card:not(.top){
  bottom:clamp(86px,20vh,180px)}}
@media(min-width:900px) and (min-aspect-ratio:5/4){.screen-collection.menu-scene{
  background-image:url('../collection-screen-e6k9V6Ie.webp')}.screen-stats.menu-scene{
  background-image:url('../stats-screen-BlajBjYM.webp')}}
.screen-collection .screen-head,.screen-stats .screen-head{
  position:relative;
  justify-content:center;
  min-height:58px}
.screen-collection .screen-head>button,.screen-stats .screen-head>button{
  position:absolute;
  left:0;
  top:0}
@media(min-width:900px) and (min-aspect-ratio:5/4){
 :is(.screen-campaign,.screen-daily,.screen-collection,.screen-stats) .screen-head>button{
  position:fixed;
  left:calc(var(--safe-left) + 28px);
  top:calc(var(--safe-top) + 24px);
  z-index:2}
}
.screen-collection .screen-head h1,.screen-stats .screen-head h1{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  min-width:min(300px,calc(100% - 110px));
  padding:8px 24px;
  font-size:clamp(25px,2.5vw,34px)}
.screen-collection .screen-head h1::before,.screen-collection .screen-head h1::after,.screen-stats .screen-head h1::before,.screen-stats .screen-head h1::after{
  content:'';
  width:17px;
  height:24px;
  flex:none;
  border-radius:90% 8% 90% 8%;
  background:#58d76c;
  border:2px solid #fff;
  transform:rotate(32deg)}
.screen-collection .screen-head h1::after,.screen-stats .screen-head h1::after{
  transform:rotate(212deg)}
@media(max-width:380px){.screen-collection .screen-head h1,.screen-stats .screen-head h1{
  min-width:0;
  padding:8px 14px;
  gap:7px;
  font-size:23px}.screen-collection .screen-head h1::before,.screen-collection .screen-head h1::after,.screen-stats .screen-head h1::before,.screen-stats .screen-head h1::after{
  width:12px;
  height:18px}}
/* Rule screen: the three illustrated basics stay visible; remaining real rules expand in place. */
.fox-rules{
  background:#15d0c4 var(--fox-greenhouse) center/cover;
  backdrop-filter:none;
  -webkit-backdrop-filter:none}
.fox-rules .panel-head h2{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px}
.rules-title-icon{
  display:inline-flex;
  color:#182b48}.rules-title-icon svg{
  width:32px;
  height:32px}
.fox-rules .rules-body>.rule-row{
  min-height:94px;
  padding:14px 0}
.rules-more{
  border-top:1px solid #dbecee;
  margin-top:4px}
.rules-more summary{
  min-height:44px;
  padding:12px 4px;
  color:#087d78;
  font-weight:900;
  cursor:pointer}
.rules-more[open] summary{
  border-bottom:1px solid #dbecee}
@media(min-width:700px) and (max-width:1099px){.fox-rules .modal.scrolled .panel-head{
  box-shadow:0 -24px 0 #fff,0 40px 0 #fff}}
@media(min-width:1100px){.fox-rules .modal{
  margin-left:260px}.fox-rules .rules-mascot{
  left:-295px;
  bottom:-4px;
  width:320px!important;
  height:320px!important}.fox-rules .rules-body{
  max-height:calc(100vh - 210px)}}
@media(max-aspect-ratio:5/4){.fox-rules{
  background-image:var(--fox-greenhouse)}}
@media(max-width:520px){.fox-rules .rules-body>.rule-row{
  min-height:82px;
  padding:10px 0}}
@media(min-width:900px) and (min-height:650px){#tutor:not(.big) .tutor-card{
  width:min(820px,calc(100vw - 40px))}}
.campaign-progress::before{
  background-image:url('../campaign-D255RaV-.webp')}
@media(max-width:430px){.campaign-progress::before{
  width:102px;
  height:112px;
  margin-right:10px}}
.chapter-name{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:3px;
  min-width:0;
  padding:10px 14px;
  color:#172744;
  line-height:1.2;
  overflow-wrap:anywhere}
.chapter-name small{
  font-size:11px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase}
.chapter-name strong{
  font-size:18px;
  font-weight:900}
.chapter-art-lock{
  position:absolute;
  top:10px;
  left:10px;
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border:2px solid #fff;
  border-radius:50%;
  background:#172744e8;
  color:#fff;
  box-shadow:0 2px 6px #17274455}
.chapter-art-lock svg{
  width:18px;
  height:18px}
@media(min-width:900px) and (min-aspect-ratio:5/4){.screen-campaign .menu-surface .chapter{
  grid-template-columns:27% 20% minmax(0,1fr)}.chapter-name{
  padding:8px 12px}.chapter-name strong{
  font-size:clamp(14px,1.25vw,19px)}}
@media(min-width:900px) and (min-aspect-ratio:5/4){.screen-campaign .seal-row{
  display:grid;
  grid-template-columns:repeat(7,36px);
  gap:6px;
  justify-content:start}.screen-campaign .seal-row canvas{
  width:36px!important;
  height:36px!important}}
.settings .snd-row>label,.screen-stats .stat .k{
  min-width:0;
  overflow-wrap:anywhere}
@media(max-width:520px){.settings .snd-row{
  grid-template-columns:42px minmax(0,1fr) minmax(80px,38%)}}
@media(max-width:380px){.settings .snd-row{
  grid-template-columns:40px minmax(0,1fr) minmax(76px,38%)}}
/* Bring the guide closer to the size of the approved daily hero without changing its controls. */
.screen-daily .daily-hero canvas{
  transform:scale(1.22);
  transform-origin:center bottom}
@media(max-width:430px){.screen-daily .daily-hero{
  grid-template-columns:105px minmax(0,1fr);
  gap:8px}.screen-daily .daily-hero canvas{
  transform:scale(1.14)}}
@media(min-width:900px) and (min-aspect-ratio:5/4){.screen-daily .daily-hero .date{
  font-size:28px}.screen-daily .daily-hero .count{
  font-size:17px}.screen-daily .daily-actions .btn{
  font-size:20px;
  min-height:58px}.screen-daily .daily-panel>p{
  font-size:16px!important}.screen-daily .cal-head{
  font-size:21px}.screen-daily .cal-grid .wd{
  font-size:15px}.screen-daily .cal-grid .day{
  font-size:18px}}
/* Desktop tutorial: guide at the left and a low horizontal speech bubble. */
@media(min-width:900px) and (min-height:650px){
 #tutor:not(.big) .tutor-card{
  width:min(1120px,calc(100vw - 40px))}
 #tutor:not(.big) .tutor-say{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center;
  gap:12px;
  padding:16px 18px 16px 52px;
  min-height:90px}
 #tutor:not(.big) .tutor-head{
  grid-column:2;
  grid-row:1;
  margin:0}
 #tutor:not(.big) .tutor-mochi{
  transform:scale(1.3);
  transform-origin:right bottom;
  pointer-events:none}
 #tutor:not(.big) .tutor-card.top .tutor-mochi{
  transform:scale(.85)}
 #tutor:not(.big) .tutor-card:not(.top) .tutor-mochi{
  transform:translate(15px,45px) scale(1.3)}
 #tutor:not(.big) .tutor-name,#tutor:not(.big) .tutor-progress{
  display:none}
 #tutor:not(.big) .tutor-say p{
  grid-column:1;
  grid-row:1;
  margin:0;
  max-width:460px;
  font-size:clamp(20px,1.65vw,24px);
  font-weight:800;
  line-height:1.3}
 #tutor:not(.big) .tutor-say:not(:has(.tutor-go)) p{
  max-width:360px}
 #tutor:not(.big) .tutor-foot{
  grid-column:3;
  grid-row:1}
 #tutor:not(.big) .tutor-skip{
  padding:0 16px;
  border-radius:999px;
  background:#eef4fa;
  color:#172744}
}
@media(min-width:900px) and (max-width:1100px) and (min-height:650px){
 #tutor:not(.big) .tutor-card:not(.top) .tutor-mochi{
  transform:scale(.85)}
 #tutor:not(.big) .tutor-say:has(.tutor-go){
  padding:10px 16px;
  row-gap:6px}
 #tutor:not(.big) .tutor-say:has(.tutor-go) p{
  grid-column:1/4;
  grid-row:1;
  max-width:none;
  font-size:16px;
  line-height:1.3}
 #tutor:not(.big) .tutor-say:has(.tutor-go) .tutor-head,#tutor:not(.big) .tutor-say:has(.tutor-go) .tutor-foot{
  grid-row:2}
}
@media(min-width:900px) and (min-aspect-ratio:5/4){
 .screen-collection .panel h3{
  font-size:20px}
 .screen-collection .thumb{
  font-size:16px}
 .screen-collection .thumb .req{
  font-size:14px}
 .screen-stats .seg button{
  font-size:17px}
 .screen-stats .stat-icon{
  width:42px;
  height:42px}
 .screen-stats .stat .v{
  font-size:30px;
  line-height:1.1}
 .screen-stats .stat .k{
  font-size:16px;
  line-height:1.25}
}
@media(min-width:1100px){.fox-rules .rules-mascot{
  object-fit:contain;
  object-position:bottom}}
@media(min-width:1300px){.fox-rules .rules-mascot{
  left:-340px;
  bottom:-12px;
  width:390px!important;
  height:390px!important}}
@media(min-width:900px){.fox-rules .rule-suits,.fox-rules .rule-cards{
  width:175px}.fox-rules .rule-suits span{
  width:37px;
  height:49px;
  font-size:25px}.fox-rules .rule-cards img{
  width:57px}.fox-rules .rules-body .rule-row p{
  font-size:17px}}
/* The sound overview also exposes the existing frequently used game and visual preferences. */
.settings .set-grid.one .set-quick-pref,.settings .set-grid.one .set-tile{
  background:transparent;
  border-radius:0;
  border-top:1px solid #d9e8eb;
  padding:9px 4px;
  gap:6px}
.settings .set-grid.one .set-tile{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:space-between}
.settings .set-grid.one .set-quick-pref .seg{
  width:100%}
.settings .snd-row input[type=range]{
  background:linear-gradient(to right,#2dc7b6 0 var(--range-progress),#bcd5e3 var(--range-progress) 100%) center/100% 8px no-repeat}
.settings .snd-row.off input[type=range]{
  background:linear-gradient(#d9e4ec,#d9e4ec) center/100% 8px no-repeat}
@media(min-width:900px) and (min-aspect-ratio:5/4){.screen-settings.menu-scene{
  background-image:url('../settings-screen-CeMyiTEe.webp')}}
@media(max-width:520px) and (orientation:portrait){
 #tutor.big .tutor-card{
  bottom:calc(var(--safe-bottom) + 64px)}
 #tutor.big .tutor-mochi{
  position:absolute;
  left:0;
  bottom:calc(100% - 4px);
  width:112px!important;
  height:112px!important;
  margin:0;
  pointer-events:none}
 #tutor.big .tutor-foot{
  gap:4px}
 #tutor.big .tutor-skip{
  font-size:12px}
 #tutor.big .tutor-go{
  font-size:14px;
  padding-inline:10px;
  gap:4px}
 .screen-settings .settings::before{
  content:'';
  display:block;
  width:100%;
  height:120px;
  margin:-8px auto 12px;
  border-radius:15px;
  background:url('../campaign-D255RaV-.webp') center bottom / auto 100% no-repeat,var(--fox-greenhouse) center 28% / cover no-repeat;
  pointer-events:none}
}
@media(min-width:900px) and (min-height:650px){
 #tutor.big .tutor-card{
  width:min(820px,calc(100vw - 40px))}
 #tutor.big .tutor-mochi{
  width:190px!important;
  height:190px!important}
}
@media(min-width:900px) and (min-height:650px) and (max-height:800px){
 #tutor.big .tutor-card{
  width:min(1000px,calc(100vw - 40px));
  bottom:calc(var(--safe-bottom) + 66px)}
 #tutor.big .tutor-mochi{
  width:130px!important;
  height:130px!important}
 #tutor.big.ending .tutor-mochi{
  width:70px!important;
  height:70px!important}
 #tutor.big .tutor-say{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center;
  gap:8px;
  padding:8px 12px}
 #tutor.big .tutor-say p{
  grid-column:1;
  grid-row:1;
  font-size:14px;
  line-height:1.25;
  margin:0}
 #tutor.big .tutor-head{
  grid-column:2;
  grid-row:1;
  margin:0}
 #tutor.big .tutor-foot{
  grid-column:3;
  grid-row:1;
  gap:6px}
 #tutor.big .tutor-skip{
  font-size:12px}
}
@media(max-width:520px) and (max-height:650px) and (orientation:portrait){
 #tutor.big .tutor-mochi{
  width:70px!important;
  height:70px!important}
}
.settings .set-tabs button{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:0}
.settings .seg button.on{
  background:linear-gradient(#284569,#132c52);
  box-shadow:0 2px 0 #0c2444}
.settings .set-tab-icon{
  display:inline-flex;
  flex:none}
.settings .set-tab-icon svg{
  width:21px;
  height:21px}
@media(max-width:350px){
 .settings .set-tabs{
  flex-wrap:nowrap}
 .settings .set-tabs button{
  flex:1 1 0;
  gap:3px;
  padding:6px 3px;
  font-size:12px;
  line-height:1.1;
  overflow-wrap:anywhere}
 .settings .set-tab-icon svg{
  width:17px;
  height:17px}
}
@media(min-width:1100px) and (min-aspect-ratio:5/4){
 .home.painted-home::before{
  content:'';
  position:fixed;
  right:0;
  top:0;
  width:min(28vw,390px);
  height:min(19vw,260px);
  background:url('../home-corner-leaves-axJFXKl0.png') right top / contain no-repeat;
  pointer-events:none}
 .home.painted-home::after{
  content:'';
  position:fixed;
  right:0;
  bottom:0;
  width:min(34vw,480px);
  height:min(28vh,250px);
  background:url('../mobile-floral-frame-gbnrWbVc.webp') right bottom / auto 100% no-repeat;
  pointer-events:none}
 .home.painted-home .home-inner{
  position:relative;
  z-index:1}
}
@media(min-width:1100px) and (max-width:1240px) and (min-aspect-ratio:5/4){
 .home-menu .grid2 .btn{
  font-size:16px;
  gap:5px;
  padding-left:5px;
  padding-right:5px}
}
@media(min-width:1100px){.screen-settings .settings .set-card>label{
  font-size:17px}.screen-settings .settings .seg button{
  font-size:16px;
  overflow-wrap:anywhere}}
@media(max-width:520px) and (min-height:701px) and (orientation:portrait){
 .hud-top{
  top:calc(var(--safe-top) + 4px + clamp(0px,30svh - 210px,40px))}
 body:has(#hud:not(.hidden)) #sysbar{
  top:calc(var(--safe-top) + 6px + clamp(0px,30svh - 210px,40px))}
}
.fox-pause .pause-mascot{
  width:min(260px,75%);
  height:auto;
  top:auto;
  bottom:calc(100% - 16px);
  pointer-events:none}
@media(max-width:360px) and (min-height:501px){
 .hud-info{
  height:auto;
  min-height:40px;
  flex-wrap:wrap;
  gap:0 4px;
  padding:4px 7px;
  font-size:11px;
  line-height:1.1}
 .hud-info .mode{
  flex-basis:100%;
  overflow:visible;
  white-space:normal}
 .hud-info .dot:nth-child(2){
  display:none}
 .fox-pause .stage-menu{
  grid-template-columns:minmax(0,1fr)}
 .fox-pause .stage-menu>*{
  min-width:0}
 .fox-pause .stage-menu>.btn{
  font-size:14px;
  padding:9px 8px;
  gap:6px}
 .fox-pause .stage-menu .row .btn{
  font-size:12px;
  padding:9px 4px;
  gap:4px;
  overflow-wrap:anywhere}
 .fox-pause .stage-menu .row .btn svg{
  width:18px;
  height:18px}
}
@media(max-height:500px) and (min-aspect-ratio:5/4){
 .fox-pause .modal{
  padding:22px 20px 16px;
  margin-top:38px}
 .fox-pause .pause-mascot{
  width:150px}
 .fox-pause .stage-menu{
  gap:6px}
 .fox-pause .modal .actions{
  margin-top:6px}
 .fox-pause .stage-menu .btn{
  min-height:40px;
  padding:7px 10px}
 .fox-pause .stage-menu>.btn:last-child{
  grid-column:1/-1}
}
@media(max-height:350px) and (min-aspect-ratio:5/4){
 .fox-pause .modal{
  padding:8px 16px;
  margin-top:26px}
 .fox-pause .panel-head{
  margin-bottom:4px}
 .fox-pause .panel-head h2{
  font-size:22px}
 .fox-pause .stage-menu{
  gap:3px}
 .fox-pause .stage-menu .btn{
  min-height:40px;
  padding:5px 8px;
  font-size:13px;
  line-height:1.15}
}
.victory-wrap .victory-hero .mimo{
  height:auto;
  aspect-ratio:auto}
@media(min-height:700px){.victory-wrap .victory-hero{
  top:-85px}}
@media(min-height:700px){.stage-panel.result-modal{
  padding-top:28px}}
@media(max-aspect-ratio:5/4) and (min-height:700px){.home-utilities .btn{
  min-height:54px}.home .brand{
  top:20px}}
@media(max-aspect-ratio:5/4){
 .home.painted-home::after{
  content:'';
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  height:min(32vw,150px);
  background:url('../mobile-floral-frame-gbnrWbVc.webp') center bottom/100% auto no-repeat;
  pointer-events:none}
 .home.painted-home .home-inner{
  z-index:1}
 .home.painted-home .home-utilities .btn{
  background:#fff}
}
.home-menu .home-play:has(.sub){
  flex-direction:column;
  gap:2px}
.home-menu .home-play .sub{
  font-size:12px;
  font-weight:700;
  line-height:1.2}
@media(max-aspect-ratio:5/4){.home-menu>.home-play:not(:has(.sub)){
  width:min(260px,max(220px,72%));
  justify-self:center}}
@media(max-width:520px) and (max-height:699px){
 .home-inner:has(.home-new){
  padding-top:40svh}
 .home-menu:has(.home-new){
  gap:6px}
 .home-menu:has(.home-new) .home-play{
  min-height:50px}
 .home-menu:has(.home-new) .home-new,.home-menu:has(.home-new) .grid2 .btn{
  min-height:44px}
}
.screen-collection .collection-heading{
  display:flex;
  align-items:center;
  gap:9px}
.collection-heading-icon{
  display:inline-flex;
  flex:none;
  color:#00b79d}
.collection-heading-icon svg{
  width:24px;
  height:24px}
.screen-collection .thumb,.screen-collection .thumb span{
  min-width:0;
  max-width:100%;
  overflow-wrap:anywhere}
.screen-collection .thumb{
  box-shadow:inset 0 0 0 1px #c7dbe6,0 2px 0 #cbdfe5}
@media(min-width:900px) and (min-aspect-ratio:5/4){.screen-collection .thumbs:not(.backs) canvas{
  height:auto;
  aspect-ratio:17/10;
  object-fit:cover}}
@media(min-width:900px) and (min-aspect-ratio:5/4){
 .screen-collection .menu-surface{
  width:min(850px,58vw)}
 .screen-collection .panel h3.collection-heading{
  font-size:clamp(20px,1.8vw,26px)}
 .screen-collection .collection-heading-icon svg{
  width:29px;
  height:29px}
}
.daily-hero .daily-today{
  font-size:23px;
  line-height:1.15;
  font-weight:900;
  color:#192744}
.daily-hero .date{
  font-size:17px;
  line-height:1.25;
  color:#536580}
@media(max-width:430px){.daily-hero .daily-today{
  font-size:19px}.daily-hero .date{
  font-size:15px}}
@media(min-width:900px) and (min-aspect-ratio:5/4){
 .screen-daily .daily-hero .daily-today{
  font-size:30px}
 .screen-daily .daily-hero .date{
  font-size:20px}
 .screen-daily .cal-grid{
  max-width:650px;
  margin-inline:auto}
}
@media(max-width:360px){.screen-daily .daily-hero{
  grid-template-columns:82px minmax(0,1fr);
  gap:8px}.screen-daily .daily-hero .daily-today{
  font-size:18px}.screen-daily .daily-actions .btn{
  font-size:14px;
  padding-inline:8px}}
@media(max-width:360px){.screen-daily .screen-head h1{
  font-size:22px;
  padding-inline:46px}}
@media(min-width:380px){.screen-daily .screen-head h1::after,.screen-campaign .screen-head h1::after{
  content:'';
  display:inline-block;
  vertical-align:middle;
  width:17px;
  height:23px;
  margin-left:8px;
  border:2px solid #fff;
  border-radius:90% 8% 90% 8%;
  background:#06bd70;
  transform:rotate(34deg)}}
.screen-stats .stat-grid .stat:nth-child(5) .stat-icon{
  color:#a348e2}
.screen-stats .stat-grid .stat:nth-child(7) .stat-icon{
  color:#00b99d}
.screen-stats .stat-grid .stat:nth-child(8) .stat-icon{
  color:#ff9800}
.screen-stats .stat-grid + .stat-grid .stat:first-child .stat-icon{
  color:#ffae00}
.screen-stats .stat-grid + .stat-grid .stat:nth-child(2) .stat-icon{
  color:#a348e2}
@media(min-width:900px) and (min-aspect-ratio:5/4){
 .screen-stats .menu-surface{
  width:min(920px,64vw)}
 .screen-stats .seg button{
  font-size:19px}
 .screen-stats .stat .v{
  font-size:32px}
 .screen-stats .stat .k{
  font-size:17px}
 .screen-stats .panel>p{
  text-align:center;
  font-style:italic;
  font-size:15px!important}
}
.screen-collection .screen-head h1,.screen-stats .screen-head h1{
  border-radius:46% 46% 9% 9% / 34% 34% 42% 42%;
  background:linear-gradient(180deg,#d09bfb 0%,#a45ce7 40%,#7e35ca 100%);
  box-shadow:inset 0 3px 0 #ffffff63,0 4px 0 #6d309c,0 6px 10px #164d6655;
}
@media(min-width:900px) and (min-aspect-ratio:5/4){
 .screen-collection .screen-head h1,.screen-stats .screen-head h1{
  min-width:min(420px,calc(100% - 110px));
  min-height:72px;
  font-size:clamp(30px,2.7vw,40px)}
}
/* Daily reference: a compact portrait-like panel, with a readable calendar. */
@media(min-width:900px) and (min-aspect-ratio:5/4){
 .screen-daily .menu-surface{
  width:min(720px,90vw)}
 .screen-daily .screen-head h1{
  font-size:clamp(38px,3.5vw,50px)}
 .screen-daily .daily-hero{
  grid-template-columns:39% minmax(0,1fr);
  min-height:220px}
  .screen-daily .daily-hero canvas{
  height:220px!important;
  transform:translateY(38px) scale(1.34);
  pointer-events:none}
 .screen-daily .daily-hero .daily-today{
  font-size:34px}
 .screen-daily .daily-actions .btn{
  font-size:24px}
 .screen-daily .cal-grid{
  max-width:550px}
 .screen-daily .cal-head{
  font-size:27px}
 .screen-daily .cal-grid .day{
  font-size:21px;
  height:clamp(44px,5.5vh,54px)}
}
/* The illustrated rules show the actual card backs behind each example. */
.rule-stack{
  position:relative;
  flex:none;
  width:48px;
  height:78px}
.rule-cards .rule-stack img{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:auto}
.rule-cards .rule-stack img:nth-child(2){
  top:5px}
.rule-cards .rule-stack img:nth-child(3){
  top:10px}
.rule-cards .rule-stack.stock img:nth-child(2){
  top:3px;
  left:3px}
.rule-cards .rule-stack.stock img:nth-child(3){
  top:6px;
  left:6px}
@media(min-width:900px){.rule-stack{
  width:57px;
  height:91px}}
@media(max-width:520px){.rule-stack{
  width:37px;
  height:62px}.rule-cards .rule-stack img:nth-child(2){
  top:4px}.rule-cards .rule-stack img:nth-child(3){
  top:8px}}
@media(min-width:1300px) and (min-height:750px){
 .fox-rules .modal{
  width:min(960px,calc(100% - 330px));
  margin-left:300px}
 .fox-rules .panel-head h2{
  font-size:36px}
 .fox-rules .rules-body>.rule-row{
  min-height:135px}
 .fox-rules .rules-body .rule-row p{
  font-size:21px}
 .fox-rules .rule-suits,.fox-rules .rule-cards{
  width:220px}
 .fox-rules .rule-suits span{
  width:46px;
  height:61px;
  font-size:30px}
 .fox-rules .rule-stack{
  width:70px;
  height:110px}
 .fox-rules .rules-mascot{
  left:-465px;
  width:470px!important;
  height:470px!important}
}
.fox-rules .rules-mascot{
  pointer-events:none}
.home-icon,.home-icon-regular,.home-icon-filled{
  display:inline-flex;
  flex:none;
  align-items:center;
  justify-content:center}
.home-icon-filled{
  display:none}
@media(max-aspect-ratio:5/4){
 .home-play .home-icon-regular{
  display:none}
 .home-play .home-icon-filled{
  display:inline-flex}
}
@media(min-width:1100px) and (min-aspect-ratio:5/4){
 .home-inner{
  grid-template-rows:180px repeat(4,82px)}
 .home-icon-regular{
  display:none}
 .home-icon-filled{
  display:inline-flex}
 .home-menu .grid2 .btn{
  font-size:clamp(17px,1.3vw,22px)}
 .home-menu .grid2 .btn svg{
  width:clamp(30px,2.3vw,36px);
  height:clamp(30px,2.3vw,36px)}
 .home-menu .grid2 .home-icon-filled svg{
  filter:drop-shadow(0 1px 0 #007d72a6)}
 .home-menu>.home-play:not(:has(.sub)){
  flex-direction:row-reverse}
}
@media(min-width:1300px) and (min-aspect-ratio:5/4){
 .home-menu .grid2 .btn svg{
  width:36px;
  height:36px}
}
@media(min-width:1100px) and (min-height:720px) and (min-aspect-ratio:5/4){
 .screen-campaign .menu-surface{
  width:min(720px,90vw)}
 .screen-campaign .screen-head h1{
  font-size:clamp(38px,3.5vw,50px)}
 .screen-campaign .campaign-progress{
  min-height:250px}
 .screen-campaign .campaign-progress::before{
  width:270px;
  height:220px;
  margin:-10px 14px -8px -8px}
 .screen-campaign .campaign-progress>p{
  font-size:18px;
  line-height:1.38}
 .screen-campaign .progress-line{
  font-size:18px}
 .screen-campaign .seal-row{
  grid-template-columns:repeat(7,42px)}
 .screen-campaign .seal-row canvas{
  width:42px!important;
  height:42px!important}
 .screen-campaign .menu-surface .chapter{
  height:135px;
  min-height:135px;
  grid-template-columns:30% 28% minmax(0,1fr)}
 .screen-campaign .chapter-name strong{
  font-size:clamp(17px,1.5vw,21px)}
 .screen-campaign .chapter-body{
  padding:8px 5px;
  gap:5px}
}
@media(min-width:1100px) and (min-height:720px) and (max-height:800px) and (min-aspect-ratio:5/4){
 .screen-campaign.menu-scene{
  padding-top:calc(var(--safe-top) + 22px)}
 .screen-campaign .campaign-progress{
  min-height:215px}
 .screen-campaign .campaign-progress::before{
  width:240px;
  height:180px}
 .screen-campaign .menu-surface .chapter{
  height:120px;
  min-height:120px}
}
@media(min-width:900px) and (min-aspect-ratio:5/4){
 .screen-collection .menu-surface>.panel{
  background:#def6f5;
  padding:8px}
 .screen-collection .collection-group{
  background:#fff;
  border-radius:20px;
  padding:8px 10px 10px}
 .screen-collection .collection-group+.collection-group{
  margin-top:8px}
 .screen-collection .panel h3.collection-heading{
  margin:3px 0 10px}
 .screen-collection .collection-group:nth-child(2) .collection-heading-icon{
  color:#172744}
 .screen-collection .thumbs:not(.backs) canvas{
  width:min(100%,22vh,205px);
  height:auto;
  aspect-ratio:3/2;
  object-fit:cover}
 .screen-collection .thumb{
  font-size:18px}
 .screen-collection .thumb .req{
  font-size:15px}
 .screen-collection .thumb .lock{
  width:36px;
  height:36px;
  top:10px;
  right:10px}
 .screen-collection .thumbs:not(.backs) .lock{
  right:calc(50% - min(11vh,102.5px) - 8px)}
 .screen-collection .thumb .lock svg{
  width:21px;
  height:21px}
}
@media(min-width:900px) and (min-aspect-ratio:5/4){.screen-collection.menu-scene{
  padding-top:calc(var(--safe-top) + 40px)}}
@media(min-width:900px) and (max-height:800px) and (min-aspect-ratio:5/4){
 .screen-collection.menu-scene{
  padding-top:calc(var(--safe-top) + 20px)}
 .screen-collection .screen-head h1{
  min-height:56px;
  font-size:28px}
 .screen-collection .thumbs:not(.backs) canvas{
  width:min(100%,20vh,160px)}
 .screen-collection .thumbs:not(.backs) .lock{
  right:calc(50% - min(10vh,80px) - 8px)}
 .screen-collection .thumbs.backs canvas{
  width:min(62px,65%)}
 .screen-collection .thumb{
  gap:4px;
  font-size:16px}
 .screen-collection .thumb .req{
  font-size:13px}
 .screen-collection .thumbs{
  gap:6px}
}
@media(min-width:900px) and (min-aspect-ratio:5/4){
 .screen-stats .stat-grid .stat{
  background:linear-gradient(145deg,#e7f6f6,#dceff1);
  border-radius:22px;
  box-shadow:inset 0 0 0 1px #cde9eb;
  gap:16px}
 .screen-stats .stat-icon{
  width:48px;
  height:48px}
 .screen-stats .stat .v{
  font-size:36px}
 .screen-stats .stat .k{
  font-size:19px}
 .screen-stats .seg{
  background:#dceef7;
  border-radius:18px}
 .screen-stats .seg button.on{
  background:linear-gradient(#284569,#132c52);
  box-shadow:0 3px 0 #0c2444}
}
@media(min-width:900px) and (max-height:800px) and (min-aspect-ratio:5/4){
 .screen-stats .stat-grid .stat{
  padding:8px 13px}
 .screen-stats .stat-icon{
  width:42px;
  height:42px}
 .screen-stats .stat .v{
  font-size:32px}
 .screen-stats .stat .k{
  font-size:17px}
}
.inspect-wrap{
  background:#063d4cab;
  align-items:safe center}
.inspect-wrap .inspect-sheet{
  position:relative;
  inset:auto;
  width:min(480px,100%);
  max-height:min(76dvh,720px);
  border:3px solid #fff;
  border-radius:28px;
  padding:20px 18px;
  box-shadow:0 5px 0 #047e7c,0 14px 30px #083d4c55;
  animation:rise 280ms cubic-bezier(.2,.9,.3,1)}
.inspect-sheet .grab{
  display:none}
.inspect-sheet .panel-head{
  position:relative;
  justify-content:center;
  min-height:44px;
  margin-bottom:8px}
.inspect-sheet .panel-head h2{
  text-align:center;
  padding:0 44px}
@media(max-width:380px){.inspect-sheet .panel-head h2{
  font-size:18px!important;
  padding:0 48px}}
.inspect-sheet .panel-head button{
  position:absolute;
  right:0;
  top:0}
.inspect-sheet>p{
  text-align:center;
  line-height:1.35;
  padding:0 18px}
.inspect-sheet .col-view{
  min-height:0;
  overflow:auto;
  flex:0 1 auto}
.inspect-sheet .stack{
  flex:none}
@media(max-aspect-ratio:5/4){
 .inspect-sheet .col-view{
  flex:0 1 auto;
  align-items:flex-start;
  padding-top:20px}
}
@media(min-aspect-ratio:5/4){.inspect-wrap .inspect-sheet{
  width:min(760px,100%);
  max-height:calc(100dvh - 32px)}}
@media(max-aspect-ratio:5/4){
 .inspect-wrap .inspect-sheet{
  overflow:hidden}
 .inspect-sheet::after{
  content:'';
  position:absolute;
  inset:auto 0 0;
  height:130px;
  background:url('../inspect-flowers-DwqnveAS.webp') center bottom/100% auto no-repeat;
  pointer-events:none}
 .inspect-sheet>*{
  position:relative;
  z-index:1}
}
@media(min-width:1100px) and (min-height:800px) and (min-aspect-ratio:5/4){
 .fox-pause .modal{
  width:min(600px,100%);
  padding:24px;
  margin-top:95px}
 .fox-pause .panel-head h2{
  text-align:left;
  font-size:34px}
 .fox-pause .pause-mascot{
  width:360px}
 .fox-pause .stage-menu .btn{
  min-height:68px;
  font-size:19px}
 .victory-wrap .stage-panel.result-modal{
  width:min(600px,100%);
  padding:30px 24px 22px;
  margin-top:85px}
 .victory-wrap .victory-hero{
  top:-125px}
 .victory-wrap .victory-hero .mimo{
  width:360px}
 .victory-wrap .result .actions .btn{
  min-height:58px;
  font-size:18px}
 .victory-wrap .result .stat .v{
  font-size:36px}
 .victory-wrap .result .stat .k{
  font-size:16px}
 .victory-wrap .reward-copy b{
  font-size:18px}
 .victory-wrap .reward-copy span{
  font-size:15px}
}
@media(min-height:700px){
 .victory-wrap:has(.reward+.reward) .stage-panel.result-modal{
  margin-top:150px}
}
@media(min-width:1100px) and (min-aspect-ratio:5/4){
 .screen-settings .menu-surface{
  margin-right:min(9vw,130px)}
 .screen-settings.menu-scene::before{
  content:'';
  position:fixed;
  inset:0 0 auto auto;
  width:min(22vw,300px);
  height:min(15vw,200px);
  background:url('../home-corner-leaves-axJFXKl0.png') right top / contain no-repeat;
  pointer-events:none}
 .screen-settings.menu-scene::after{
  content:'';
  position:fixed;
  right:-3vw;
  bottom:-3vh;
  width:min(22vw,300px);
  height:min(32vh,280px);
  background:url('../settings-plant-GljHeIAv.png') right bottom / auto 100% no-repeat;
  pointer-events:none}
 .screen-settings .menu-surface{
  position:relative;
  z-index:1}
 .screen-settings .screen-head h1{
  font-size:clamp(32px,3vw,44px);
  color:#142744;
  text-shadow:none}
 .screen-settings .settings .snd-row>label,.screen-settings .settings .set-card>label{
  font-size:19px}
 .screen-settings .settings .seg button{
  font-size:18px}
 .screen-settings .settings .set-tab-icon svg{
  width:25px;
  height:25px}
}
@media(min-width:1100px) and (max-height:800px) and (min-aspect-ratio:5/4){
 .screen-settings.menu-scene{
  padding-top:calc(var(--safe-top) + 24px)}
 .screen-settings .settings .snd-row{
  min-height:46px;
  padding:2px 4px}
 .screen-settings .settings .set-grid.one .set-quick-pref,.screen-settings .settings .set-grid.one .set-tile{
  padding:3px 4px;
  gap:3px}
 .screen-settings .settings .snd-row>label,.screen-settings .settings .set-card>label{
  font-size:17px}
 .screen-settings .settings .seg button{
  font-size:16px}
}
@media(min-width:1100px) and (min-height:700px){
 .hud-bar{
  gap:clamp(18px,2vw,36px)}
 .hud-bar .btn{
  min-width:clamp(175px,15vw,260px);
  min-height:58px;
  border-radius:24px;
  font-size:clamp(18px,1.4vw,24px)}
 .hud-bar .btn svg{
  width:30px;
  height:30px}
}
@media(min-width:1100px) and (min-height:900px){
 .hud-bar .btn{
  min-height:70px;
  border-radius:30px}
 .hud-bar .btn svg{
  width:34px;
  height:34px}
 #toasts{
  bottom:calc(var(--safe-bottom) + 92px)}
}
@media(max-aspect-ratio:5/4) and (max-height:650px){
 .home-inner{
  padding-top:53svh}
}
@media(max-height:650px) and (orientation:portrait){
 .victory-wrap .stage-panel.result-modal{
  position:relative;
  margin-top:76px;
  padding-top:38px}
 .victory-wrap .victory-hero{
  position:absolute;
  top:-70px;
  left:50%;
  transform:translateX(-50%)}
 .victory-wrap .victory-hero .mimo{
  width:min(240px,75vw)}
}
@media(min-width:900px) and (min-aspect-ratio:5/4) and (max-height:800px){
 .screen-daily.menu-scene{
  padding-top:calc(var(--safe-top) + 18px)}
 .screen-daily .screen-head{
  margin-bottom:8px}
 .screen-daily .menu-surface>.panel{
  padding:12px}
 .screen-daily .daily-hero{
  min-height:158px}
 .screen-daily .daily-hero canvas{
  height:158px!important;
  transform:translateY(18px) scale(1.25)}
 .screen-daily .daily-hero .daily-today{
  font-size:28px}
 .screen-daily .daily-actions{
  margin-top:8px}
 .screen-daily .daily-actions .btn{
  font-size:19px;
  min-height:48px}
 .screen-daily .daily-panel>p{
  margin-top:8px;
  padding-top:7px}
 .screen-daily .panel+.panel{
  margin-top:10px}
 .screen-daily .cal-head{
  font-size:22px;
  margin-bottom:5px}
}
@media(max-width:430px) and (orientation:portrait){
 .draw-choice .stage-panel{
  padding-inline:14px;
  gap:12px}
 .draw-choice .stage-title{
  font-size:clamp(19px,6vw,24px)}
 .draw-choice .stage-opt,.draw-choice .stage-opt.last{
  grid-template-columns:64px minmax(0,1fr);
  column-gap:8px;
  padding-inline:8px}
 .draw-choice .stage-hand{
  width:64px}
 .draw-choice .stage-name{
  font-size:19px;
  overflow-wrap:normal}
 .draw-choice .stage-desc{
  font-size:13px;
  overflow-wrap:normal}
}
/* Dialogs sit above the home artwork and controls, including their stacking contexts. */
.modal-wrap{
  z-index:3}
.screen-stats .stat-icon svg{
  stroke:#ffffffd9;
  stroke-width:5px;
  stroke-linejoin:round;
  paint-order:stroke fill;
  filter:drop-shadow(0 2px 0 #19556a55)}
@media(max-width:520px) and (orientation:portrait){
 #screens:has(.screen.menu-scene){
  background:#16d5cb url('../portrait-D4XbiIIh.webp') center / cover fixed}
 #screens:has(.screen-campaign.menu-scene),#screens:has(.screen-daily.menu-scene),.screen-campaign.menu-scene,.screen-daily.menu-scene{
  background-image:var(--fox-greenhouse);
  background-position:25% center}
 .screen.menu-scene{
  top:calc(var(--safe-top) + 52px);
  padding-top:6px}
 .screen-stats .panel::before{
  content:'';
  display:block;
  width:100%;
  height:130px;
  margin:-8px auto 12px;
  border-radius:15px;
  background:url('../stats-mobile-CIhF8S0F.webp') center bottom / auto 100% no-repeat,var(--fox-greenhouse) center 28% / cover no-repeat;
  pointer-events:none}
 .screen-collection .menu-surface>.panel::before{
  content:'';
  display:block;
  width:100%;
  height:144px;
  margin:-8px auto 12px;
  border-radius:15px;
  background:url('../collection-mobile-Iu03iJPT.webp') center bottom / auto 100% no-repeat,var(--fox-greenhouse) center 28% / cover no-repeat;
  pointer-events:none}
 .screen-campaign .campaign-progress{
  display:grid;
  grid-template-columns:clamp(105px,33vw,130px) minmax(0,1fr);
  grid-template-areas:'hero intro' 'progress progress' 'seals seals';
  column-gap:10px}
 .screen-campaign .campaign-progress::before{
  grid-area:hero;
  float:none;
  width:100%;
  height:145px;
  margin:0;
  align-self:center}
 .screen-campaign .campaign-progress>p{
  grid-area:intro;
  align-self:center}
 .screen-campaign .progress-line{
  grid-area:progress}
 .screen-campaign .seal-row{
  grid-area:seals}
 .screen-campaign .campaign-progress::after{
  display:none}
 .screen-campaign .menu-surface .chapter{
  display:grid;
  grid-template-columns:38% minmax(0,1fr);
  grid-template-areas:'art name' 'body body'}
 .screen-campaign .chapter-thumb{
  grid-area:art;
  height:100px}
 .screen-campaign .chapter-name{
  grid-area:name}
 .screen-campaign .chapter-body,.screen-campaign .chapter-locked-content{
  grid-area:body}
 .screen-daily .daily-hero{
  grid-template-columns:clamp(92px,31vw,125px) minmax(0,1fr);
  gap:8px}
 .screen-daily .daily-hero canvas{
  width:100%!important;
  height:auto!important;
  aspect-ratio:1;
  transform:none;
  border-radius:14px;
  background:var(--fox-greenhouse) 25% 28%/auto 160% no-repeat}
}
@media(max-width:350px) and (orientation:portrait){.screen-daily .daily-hero{
  grid-template-columns:82px minmax(0,1fr)}}
@media(max-width:350px){
 .screen-stats .seg{
  flex-wrap:nowrap}
 .screen-stats .seg button{
  flex:1 1 0;
  min-width:0;
  padding:8px 4px;
  font-size:12px;
  overflow-wrap:anywhere}
 .screen-stats .stat-grid .stat{
  gap:4px;
  padding:8px 7px}
 .screen-stats .stat-icon{
  width:23px;
  height:23px}
}
@media(max-width:520px) and (orientation:portrait){
 #tutor:not(.big) .tutor-card:not(.top){
  bottom:calc(var(--safe-bottom) + 64px)}
 #tutor:not(.big) .tutor-say{
  padding:10px 16px 14px}
 #tutor:not(.big) .tutor-head{
  margin-bottom:5px}
 #tutor:not(.big) .tutor-card.top .tutor-head{
  justify-content:flex-start}
 #tutor:not(.big) .tutor-say p{
  margin-bottom:8px;
  line-height:1.4}
 #tutor:not(.big) .tutor-mochi{
  transform:scale(1.1);
  transform-origin:right bottom}
 #tutor:not(.big) .tutor-card.long{
  display:block}
 #tutor:not(.big) .tutor-card.long .tutor-mochi{
  position:absolute;
  top:2px;
  left:43%;
  width:44px!important;
  height:44px!important;
  margin:0;
  transform:none;
  pointer-events:none}
 #tutor:not(.big) .tutor-card.long .tutor-say{
  padding:8px 12px}
 #tutor:not(.big) .tutor-card.long .tutor-say p{
  font-size:14px;
  line-height:1.25;
  margin-bottom:5px}
 #tutor:not(.big) .tutor-card.long .tutor-foot{
  gap:4px}
 #tutor:not(.big) .tutor-card.long .tutor-skip{
  font-size:12px}
 #tutor:not(.big) .tutor-card.long .tutor-go{
  font-size:14px;
  padding-inline:10px;
  gap:4px}
}
@media(min-width:380px) and (max-width:520px) and (min-height:700px) and (orientation:portrait){
 #tutor:not(.big) .tutor-card:not(.long) .tutor-mochi{
  width:120px!important;
  height:120px!important;
  transform:scale(1.05);
  transform-origin:right bottom}
}
@media(max-height:500px) and (orientation:landscape){
 #tutor:not(.big) .tutor-card,#tutor:not(.big) .tutor-card.top{
  top:auto;
  bottom:calc(var(--safe-bottom) + 2px);
  width:min(720px,calc(100vw - 154px))}
 #tutor:not(.big) .tutor-mochi{
  margin-bottom:0}
 #tutor:not(.big) .tutor-say{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  grid-template-rows:auto;
  align-items:center;
  gap:6px;
  padding:6px 10px 9px}
 #tutor:not(.big) .tutor-say p{
  grid-column:1;
  grid-row:1;
  margin:0;
  font-size:13px;
  line-height:1.2}
 #tutor:not(.big) .tutor-head{
  grid-column:2;
  grid-row:1;
  margin:0;
  justify-content:flex-end;
  gap:0}
 #tutor:not(.big) .tutor-name{
  display:none}
 #tutor:not(.big) .tutor-foot{
  grid-column:3;
  grid-row:1;
  gap:6px}
 #tutor:not(.big) .tutor-skip{
  font-size:12px;
  min-height:40px}
 #tutor:not(.big) .tutor-go{
  min-height:40px;
  font-size:13px;
  padding-inline:10px;
  gap:4px}
}
@media(max-width:700px) and (max-height:500px) and (orientation:landscape){
 .compact-land .hud-bar .btn{
  padding-inline:7px;
  gap:4px;
  font-size:13px}
 #tutor:not(.big) .tutor-card,#tutor:not(.big) .tutor-card.top{
  width:calc(100vw - 24px)}
 #tutor:not(.big) .tutor-say{
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-rows:auto auto}
 #tutor:not(.big) .tutor-say p{
  grid-column:1 / 3;
  grid-row:1;
  font-size:12px;
  line-height:1.2}
 #tutor:not(.big) .tutor-head{
  grid-column:1;
  grid-row:2;
  justify-content:flex-start}
 #tutor:not(.big) .tutor-foot{
  grid-column:2;
  grid-row:2}
}
@media(min-width:1100px) and (min-height:700px){
 .hud-bar{
  gap:clamp(48px,5vw,90px)}
 .hud-bar .btn{
  width:clamp(220px,20vw,360px);
  font-size:clamp(19px,1.5vw,25px)}
}
@media(max-width:600px){
 .tutor-hand span{
  left:8px;
  top:-15px;
  width:68px;
  height:68px}
}
@media(min-width:900px) and (min-height:801px) and (min-aspect-ratio:5/4){
 .screen-campaign .campaign-progress::before{
  width:305px;
  height:240px;
  margin-top:-12px}
}
@media(min-width:1100px) and (max-width:1200px) and (min-aspect-ratio:5/4){
 .home-menu>.home-play{
  width:calc(100% - 18px);
  justify-self:end}
 .home-menu .grid2 .btn{
  font-size:16px;
  gap:5px}
}
@media(min-width:900px) and (min-aspect-ratio:5/4){
 .screen-campaign .chal{
  padding-inline:2px}
}
@media(min-width:1100px) and (min-aspect-ratio:5/4){
 .home-menu>.home-play:not(:has(.sub)){
  width:80%;
  justify-self:center;
  border-radius:999px;
  font-size:clamp(36px,3.1vw,48px)}
 .home-menu>.home-play:not(:has(.sub)) svg{
  width:48px;
  height:48px}
}
@media(min-width:1100px) and (max-width:1200px) and (min-aspect-ratio:5/4){
 .home-menu>.home-play:not(:has(.sub)),.home-menu:has(.home-new)>.home-play{
  width:80%;
  justify-self:end}
}
@media(min-width:1201px) and (max-width:1600px) and (min-aspect-ratio:5/4){
 .home-menu:has(.home-new)>.home-play{
  width:80%;
  justify-self:end}
}
@media(max-width:360px) and (max-height:650px) and (orientation:portrait){
 .home-inner:has(.home-new){
  padding-top:44svh}
}
@media(min-width:900px) and (min-aspect-ratio:11/10) and (max-aspect-ratio:5/4){
 .home-inner{
  width:min(420px,48vw);
  align-self:flex-end;
  margin-right:2vw}
 .home .brand{
  width:clamp(220px,25vw,260px);
  height:21svh}
 .home .brand-image{
  max-height:21svh}
 .home-inner:has(.home-new){
  padding-top:40svh}
 .home-menu:has(.home-new)>:is(.home-play,.home-new){
  width:65%;
  justify-self:end}
}
@media(max-aspect-ratio:5/4){
 .home-menu>.home-play:not(:has(.sub)){
  font-size:30px}
 .home-menu>.home-play:not(:has(.sub)) svg{
  width:38px;
  height:38px}
}
@media(max-width:520px) and (orientation:portrait){
 .fox-rules .rules-mascot{
  display:block;
  position:absolute;
  left:4px;
  top:4px;
  z-index:4;
  width:76px!important;
  height:76px!important;
  object-fit:contain}
 .fox-rules .panel-head h2{
  padding-left:52px;
  font-size:clamp(20px,6vw,26px)}
 .fox-rules .rules-body>.rule-row{
  min-height:76px;
  padding:7px 0}
}
@media(max-width:350px) and (orientation:portrait){
 :lang(tr) .fox-rules .rules-mascot,:lang(ru) .fox-rules .rules-mascot{
  left:8px;
  top:8px;
  width:64px!important;
  height:64px!important}
}
@media(max-width:520px) and (min-height:700px) and (orientation:portrait){
 .fox-rules .rules-mascot{
  position:relative;
  left:auto;
  top:auto;
  z-index:auto;
  width:100%!important;
  height:120px!important;
  margin:0 0 8px;
  border-radius:15px;
  background:var(--fox-greenhouse) center 28%/cover no-repeat}
 .fox-rules .panel-head h2{
  padding-left:0}
 .fox-rules .modal:not(.scrolled) .panel-head{
  box-shadow:none}
}
@media(min-width:900px) and (min-aspect-ratio:5/4){
 .screen-collection .thumbs.backs{
  max-width:660px;
  margin-inline:auto}
}
@media(min-width:1100px) and (min-aspect-ratio:5/4){
 .screen-collection .menu-surface{
  width:min(700px,52vw);
  margin-right:clamp(35px,6vw,90px)}
 .screen-collection .thumbs.backs{
  max-width:none;
  margin-inline:auto}
 .screen-collection .thumbs:not(.backs) .lock{
  right:max(6px,calc(50% - min(11vh,102.5px) - 8px))}
}
@media(min-width:1100px) and (max-height:800px) and (min-aspect-ratio:5/4){
 .screen-collection .thumbs:not(.backs) .lock{
  right:max(6px,calc(50% - min(10vh,80px) - 8px))}
}
@media(min-width:900px) and (min-height:801px) and (min-aspect-ratio:5/4){
 .screen-collection .thumbs.backs canvas{
  width:min(92px,65%)}
 .screen-collection .thumbs.backs .thumb{
  padding-block:6px}
}
/* End of src/ui/style-part2.css */
/* End of dist-buyer/assets/ui/style-part2-B7zSvlfD.css */