*{box-sizing:border-box}
html,body{margin:0;width:100%;min-height:100%;font-family:system-ui,-apple-system,"Trebuchet MS",sans-serif}
body{background:#102e36}
.app-shell{min-height:100dvh;display:grid;place-items:center}
.home-screen{width:min(100%,430px);height:100dvh;min-height:690px;max-height:1000px;position:relative;overflow:hidden;background:#58c0f5 url('../assets/backgrounds/orchard-home.png') center center/cover no-repeat;isolation:isolate}
.home-screen:after{content:"";position:absolute;inset:58% 0 0;background:linear-gradient(transparent 0%,rgba(6,52,28,.06) 30%,rgba(3,44,38,.62) 100%);z-index:-1}
.sky-glow{position:absolute;inset:0;background:linear-gradient(180deg,rgba(56,167,242,.04),rgba(26,185,255,.03) 48%,rgba(1,74,44,.04));z-index:-1}
.settings-icon{position:absolute;right:5%;top:calc(1.8% + env(safe-area-inset-top));z-index:6;border:2px solid #125191;border-radius:50%;width:42px;height:42px;background:linear-gradient(#399af4,#0755a7);color:white;font-size:25px;box-shadow:0 4px 0 #003c77,0 6px 13px #003c7750}
.settings-icon svg{width:25px;height:25px;stroke:white;stroke-width:1}
.hero{position:absolute;inset:4.5% 0 38%;pointer-events:none}
.logo{position:absolute;top:0;left:3%;width:73%;height:auto;filter:drop-shadow(0 8px 5px #12324840);z-index:4}
.tagline{position:absolute;top:36%;left:10%;font-weight:950;font-style:italic;color:#075085;font-size:clamp(26px,7.5vw,35px);line-height:1.05;transform:rotate(-6deg);text-shadow:1px 2px 0 #b9e7fb90;z-index:5}
.underline{position:absolute;bottom:-9px;right:15px;width:85px;height:6px;background:#ffb32e;transform:rotate(-11deg);border-radius:90%}
.mascot{position:absolute;width:87%;max-width:none;right:-18%;top:27%;filter:drop-shadow(-6px 8px 9px #004c5860);z-index:2}
.hero-fruit-cluster{position:absolute;left:-4.5%;top:56%;width:59%;z-index:4;pointer-events:none;filter:drop-shadow(0 7px 7px rgba(5,61,30,.25))}
.fruit-medley{display:block;width:100%;height:auto}
.actions{position:absolute;bottom:max(2.6%,env(safe-area-inset-bottom));left:4.8%;right:4.8%;display:flex;flex-direction:column;gap:13px;z-index:7}
.game-button{appearance:none;position:relative;width:100%;height:86px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 18px 10px;background:transparent center/100% 100% no-repeat;border:0;cursor:pointer;transition:transform .12s ease,filter .12s ease;filter:drop-shadow(0 4px 4px rgba(0,38,28,.22))}
.game-button.daily{background-image:url('../assets/ui/buttons/daily.svg')}
.game-button.unlimited{background-image:url('../assets/ui/buttons/unlimited.svg')}
.game-button:active{transform:translateY(3px) scale(.995);filter:brightness(.94)}
.game-button.daily:active{background-image:url('../assets/ui/buttons/daily-pressed.svg')}
.game-button.unlimited:active{background-image:url('../assets/ui/buttons/unlimited-pressed.svg')}
.button-icon{flex:0 0 56px;display:grid;place-items:center;font-size:39px;filter:drop-shadow(0 2px 2px #12461e66);margin-left:6px}
.button-icon svg{width:45px;height:45px}
.button-icon.play{color:white;font-size:42px;-webkit-text-stroke:1px #cceeff;text-shadow:0 2px 2px rgba(0,45,83,.5)}
.button-text{flex:1;text-align:left;font-size:clamp(19px,5.5vw,25px);font-weight:900;white-space:nowrap;line-height:1.02;letter-spacing:-.6px;color:#fff;text-shadow:0 2px 2px rgba(0,45,40,.45)}
.button-text small{display:block;font-size:10px;letter-spacing:1.18px;font-weight:800;margin-top:7px;color:#f7fff4;text-shadow:0 1px 2px rgba(0,45,40,.45)}
.chevron{font-family:Arial,sans-serif;font-size:42px;font-weight:700;line-height:1;color:#fff;text-shadow:0 2px 1px rgba(0,45,83,.45);margin-right:12px}
.bottom-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:4px}
.bottom-nav button{appearance:none;position:relative;background:transparent url('../assets/ui/buttons/nav.svg') center/100% 100% no-repeat;border:0;height:78px;color:white;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:10px 2px 12px;cursor:pointer;transition:transform .12s,filter .12s;filter:drop-shadow(0 3px 2px rgba(0,20,33,.28))}
.bottom-nav button:active{transform:translateY(3px);filter:brightness(.9)}
.bottom-nav svg{height:27px;width:27px;fill:white;stroke:white;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 2px 1px #043966)}
.bottom-nav span{font-weight:800;font-size:12px;line-height:1.1;text-shadow:0 1px 1px #071c30}
.version{text-align:center;color:#f2fff2;font-size:10px;margin:3px 0 0;text-shadow:0 1px 3px #003425;font-weight:700}
@media(max-height:750px){
  .hero{top:3%}
  .logo{width:64%}
  .tagline{top:35%;font-size:25px}
  .mascot{width:79%;top:24%;right:-14%}
  .hero-fruit-cluster{top:55%;width:54%;left:-2%}
  .actions{gap:9px}
  .game-button{height:77px}
  .bottom-nav button{height:69px}
}
@media(min-width:500px){.tagline{font-size:34px}.button-text{font-size:25px}}

.bottom-nav button:active{background-image:url('../assets/ui/buttons/nav-pressed.svg')}

/* v14.2: Anchor slogan to the logo, not a percentage of the hero's HEIGHT.
   Prevents the slogan moving into the logo on tall iPhones. */
.brand-lockup{position:absolute;top:0;left:3%;width:73%;z-index:5;pointer-events:none}
.brand-lockup .logo{position:relative;top:auto;left:auto;width:100%;height:auto;display:block}
.brand-lockup .tagline{position:relative;top:auto;left:7%;width:max-content;max-width:110%;margin-top:7px;
 font-size:clamp(23px,6.7vw,31px);line-height:1.04;transform:rotate(-6deg)}
@media(max-height:750px){
 .brand-lockup{width:64%}
 .brand-lockup .tagline{top:auto;font-size:clamp(22px,6.2vw,27px);margin-top:4px}
}

/* v14.2.1: raise tagline midway without moving the logo */
.brand-lockup .tagline{margin-top:-23px}
@media(max-height:750px){.brand-lockup .tagline{margin-top:-19px}}

/* v14.3 responsive home-screen correction. */
.home-screen{min-height:0;height:100dvh;max-height:none}
.home-screen{padding-bottom:env(safe-area-inset-bottom)}
button:focus-visible{outline:3px solid #fff5a4;outline-offset:3px}
@media(max-height:680px){
 .hero{top:2%;bottom:30%}.brand-lockup{width:min(57%,250px)}
 .brand-lockup .tagline{font-size:clamp(17px,5.4vw,23px);margin-top:-15px}
 .mascot{width:68%;top:22%;right:-12%}.hero-fruit-cluster{width:44%;top:58%}
 .actions{gap:5px;bottom:max(1%,env(safe-area-inset-bottom))}
 .game-button{height:clamp(53px,10.5vh,70px);padding-top:4px;padding-bottom:4px}
 .bottom-nav{gap:6px;margin-top:0}.bottom-nav button{height:clamp(47px,8.5vh,59px)}
 .bottom-nav svg{height:21px;width:21px}.bottom-nav span{font-size:10px}
 .button-icon{flex-basis:38px}.button-icon svg{width:32px;height:32px}
 .button-text{font-size:19px}.button-text small{font-size:9px;margin-top:3px}
 .chevron{font-size:30px}.version{font-size:9px;margin:0}
}
@media(max-height:550px){.hero-fruit-cluster{display:none}.mascot{width:57%;top:18%}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* v14.5: full-body mascot illustration can be cropped without truncating the figure. */
.mascot{width:clamp(245px,77%,345px)!important;height:auto;right:-10%!important;top:22%!important;max-height:110%;object-fit:contain;object-position:top center;filter:drop-shadow(-5px 8px 8px #003b5360)}
.hero-fruit-cluster{top:54%;left:-3%;width:55%}
.game-button,.bottom-nav button{filter:drop-shadow(0 5px 3px #003b3260) saturate(1.12)}
@media(max-height:750px){.mascot{width:64%!important;top:18%!important;right:-7%!important}.hero-fruit-cluster{width:45%;top:51%}}


/* v14.5 — replace stitched mascot with a single coherent full-body hero asset */
.hero{inset:4% 0 26%;}
.brand-lockup{left:4%;width:min(74%,320px)}
.brand-lockup .tagline{left:8%;margin-top:-18px;max-width:300px}
.hero-fruit-cluster{display:none!important}
.mascot{width:min(74%,330px);right:-1%;top:24%;max-width:none;z-index:3;filter:drop-shadow(-10px 12px 12px rgba(0,60,70,.32))}
@media (max-height:750px){
  .hero{inset:3% 0 25%}
  .brand-lockup{width:min(70%,285px)}
  .brand-lockup .tagline{font-size:clamp(22px,6vw,28px);margin-top:-15px}
  .mascot{width:min(69%,300px);top:23%;right:0}
}
@media (max-height:680px){
  .hero{inset:2.5% 0 24%}
  .brand-lockup{width:min(58%,240px)}
  .brand-lockup .tagline{font-size:clamp(18px,5.4vw,22px);left:6%;margin-top:-10px}
  .mascot{width:min(58%,255px);top:25%;right:-1%}
}


/* v14.5 — new orchard-road background and coherent hero placement */
.home-screen{background:#58c0f5 url('../assets/backgrounds/orchard-home.png') center center/cover no-repeat}
.home-screen:after{inset:64% 0 0;background:linear-gradient(transparent 0%,rgba(6,52,28,.02) 20%,rgba(3,44,38,.52) 100%)}
.hero{inset:4% 0 24%;}
.brand-lockup{left:4.2%;width:min(72%,315px)}
.brand-lockup .tagline{left:7%;margin-top:-18px;text-shadow:1px 2px 0 #d9f3ff99}
.mascot{width:min(72%,320px);right:-1%;top:26.5%;z-index:3;filter:drop-shadow(-10px 14px 14px rgba(0,52,60,.25))}
.actions{left:4%;right:4%;bottom:max(2.2%,env(safe-area-inset-bottom))}
@media (max-height:750px){
 .hero{inset:3.2% 0 23%}
 .brand-lockup{width:min(68%,282px)}
 .brand-lockup .tagline{font-size:clamp(22px,6.1vw,28px);margin-top:-14px}
 .mascot{width:min(66%,294px);top:26.5%;right:-1%}
}
@media (max-height:680px){
 .hero{inset:2.6% 0 21%}
 .brand-lockup{width:min(56%,235px)}
 .brand-lockup .tagline{font-size:clamp(18px,5.2vw,22px);margin-top:-10px}
 .mascot{width:min(54%,240px);top:28%;right:0}
}

/* v14.5 screen composition — matched to approved three-panel design */
.home-screen{background-position:center center;}
.home-screen::after{inset:68% 0 0;background:linear-gradient(transparent,rgba(4,44,22,.22) 70%,rgba(0,37,28,.55))}
.hero{inset:3.5% 0 21%;}
.brand-lockup{top:2%;left:4%;width:74%;z-index:5}
.brand-lockup .tagline{left:7%;margin-top:-18px;font-size:clamp(22px,6.6vw,30px);line-height:1.02;color:#064b86}
.mascot{width:75%;max-width:330px;right:-1%;top:24%;height:auto;z-index:3;object-fit:contain;filter:drop-shadow(-7px 11px 9px rgba(15,62,40,.22))}
.hero-fruit-cluster{display:none!important}
.actions{left:4.5%;right:4.5%;gap:clamp(7px,1.2vh,13px);bottom:max(2%,env(safe-area-inset-bottom));}
.game-button{height:clamp(67px,9.25vh,87px)}
.bottom-nav{gap:9px;margin-top:4px}.bottom-nav button{height:clamp(63px,8.2vh,77px)}
.game-button,.bottom-nav button{transition:transform .14s ease,filter .14s ease}
.game-button:focus-visible,.bottom-nav button:focus-visible{outline:3px solid #fff1a7;outline-offset:2px}
@media(max-height:760px){
.hero{inset:2.6% 0 23%}.brand-lockup{width:66%}.brand-lockup .tagline{font-size:clamp(19px,5.7vw,25px);margin-top:-12px}
.mascot{width:68%;right:0;top:24%}.actions{gap:6px}.game-button{height:clamp(59px,9vh,72px)}
.bottom-nav button{height:clamp(54px,8vh,64px)}
}
@media(max-height:650px){.brand-lockup{width:57%}.mascot{width:60%;top:27%}.hero{inset:2% 0 25%}.game-button{height:53px}.bottom-nav button{height:48px}}
@media(prefers-reduced-motion:reduce){.game-button,.bottom-nav button{transition:none}}


/* v14.5.1 — ground the home mascot closer to the orchard road */
.hero{inset:3.5% 0 21%;}
.mascot{top:auto!important;bottom:-8px!important;right:-1%!important;width:min(75%,330px)!important;filter:drop-shadow(-7px 12px 10px rgba(15,62,40,.24))!important;}
@media(max-height:750px){.hero{inset:3% 0 20%}.mascot{width:68%!important;bottom:-10px!important;right:0!important;}}
@media(max-height:650px){.hero{inset:2.5% 0 20%}.mascot{width:60%!important;bottom:-6px!important;right:0!important;}}

/* v14.5.3: consolidated mobile composition overrides */
html,body{min-height:100%;background:#75af55}
.app-shell{min-height:100svh;min-height:100dvh;background:#75af55}
.home-screen{height:100svh;height:100dvh;min-height:0;max-height:none;background-position:center center}
.hero{position:absolute;inset:0!important;pointer-events:none}
.brand-lockup{position:absolute;top:max(6%,38px)!important;left:4%!important;width:62%!important;z-index:5}
.brand-lockup .tagline{margin-top:-10px!important;left:5%!important;font-size:clamp(19px,5.8vw,28px)!important}
.mascot{position:absolute;top:29%!important;bottom:auto!important;right:-1%!important;width:56%!important;max-width:260px!important;max-height:none!important;object-fit:contain!important;z-index:3;filter:drop-shadow(-5px 10px 9px rgba(20,65,36,.23))!important}
.actions{z-index:7;bottom:max(1.8%,env(safe-area-inset-bottom))}
@media(max-height:760px){.brand-lockup{top:max(6%,30px)!important;width:59%!important}.brand-lockup .tagline{font-size:clamp(18px,5.5vw,23px)!important}.mascot{top:28%!important;width:52%!important;right:-1%!important}.game-button{height:clamp(57px,9vh,70px)}.bottom-nav button{height:clamp(51px,8vh,61px)}}
@media(max-height:650px){.brand-lockup{top:max(5.5%,23px)!important;width:55%!important}.brand-lockup .tagline{font-size:clamp(16px,5vw,20px)!important}.mascot{top:27%!important;width:46%!important}.actions{gap:5px}.game-button{height:52px}.bottom-nav button{height:47px}.button-text{font-size:clamp(16px,5vw,21px)}.button-icon{flex-basis:39px}}
/* Fine adjustment: character stands behind, not across, primary controls. */
.mascot{top:18%!important;width:58%!important}
@media(max-height:760px){.mascot{top:16%!important;width:56%!important}}
@media(max-height:650px){.mascot{top:16%!important;width:50%!important}}
/* Keep button artwork, label and chevron together at narrow/short viewport sizes. */
.game-button{padding-left:13px;padding-right:16px;gap:5px}
.game-button .button-icon{flex-basis:clamp(35px,10vw,49px);margin-left:0}
.game-button .button-text{min-width:0;font-size:clamp(18px,5.2vw,25px)}
.game-button .chevron{margin-right:3px;flex:0 0 20px;font-size:36px;text-align:center}
@media(max-height:650px){.game-button{padding-left:8px;padding-right:10px;gap:4px}.game-button .button-text{font-size:clamp(16px,4.8vw,20px)}.game-button .button-text small{font-size:8px;letter-spacing:.55px}.game-button .chevron{font-size:28px;flex-basis:15px;margin-right:0}.game-button .button-icon{flex-basis:30px}.game-button .button-icon svg{width:28px;height:28px}.bottom-nav{gap:6px}}


/* v14.5.4 — keep all CTA contents INSIDE the illustrated pill.
   Three explicit grid tracks prevent flex shrink / chevron overflow on phones. */
.game-button{
  display:grid !important;
  grid-template-columns:clamp(34px,10.5vw,48px) minmax(0,1fr) clamp(17px,5.5vw,24px);
  align-items:center;
  column-gap:clamp(5px,1.8vw,10px);
  padding:0 clamp(26px,7vw,38px) 3px clamp(30px,8vw,43px) !important;
  justify-content:initial;
  overflow:hidden;
}
.game-button .button-icon{
  grid-column:1; width:100%; min-width:0; margin:0 !important;
  display:flex;align-items:center;justify-content:center;
  font-size:clamp(25px,7vw,35px);line-height:1;
}
.game-button .button-icon svg{width:clamp(29px,8vw,41px);height:clamp(29px,8vw,41px);max-width:100%}
.game-button .button-text{
  grid-column:2; min-width:0; width:100%; white-space:nowrap;
  font-size:clamp(17px,5vw,25px) !important;
  letter-spacing:-.045em; line-height:1.06;
}
.game-button .button-text small{font-size:clamp(8px,2.15vw,10px);letter-spacing:.07em;white-space:nowrap;margin-top:5px}
.game-button .chevron{
  grid-column:3; display:block; width:100%; min-width:0;
  margin:0 !important; flex:none !important;
  font-size:clamp(25px,7vw,37px) !important;
  text-align:center; line-height:1;
}
@media(max-width:360px){
  .game-button{padding-left:24px !important;padding-right:24px !important;column-gap:4px;grid-template-columns:32px minmax(0,1fr) 18px}
  .game-button .button-text{font-size:clamp(15px,4.7vw,19px) !important}
  .game-button .button-text small{font-size:8px;letter-spacing:0}
}