* {
  box-sizing:border-box
}
html,body {
  margin:0;
  width:100%;
  height:100%;
  overflow:hidden;
  overscroll-behavior:none
}
body {
  font-family:'Trebuchet MS',Arial,sans-serif;
  color:#683a20;
  background:#c7e4d4;
  user-select:none;
  -webkit-user-select:none;
  -webkit-tap-highlight-color:transparent
}
button {
  font:inherit;
  cursor:pointer;
  touch-action:manipulation
}
button:focus-visible {
  outline:4px solid #416c9b;
  outline-offset:4px
}
img {
  user-select:none;
  -webkit-user-drag:none
}
button,dialog {
  color:inherit
}
[hidden] {
  display:none!important
}
.game-shell {
  position:relative;
  isolation:isolate;
  height:100dvh;
  width:100%;
  max-width:500px;
  margin:auto;
  overflow:hidden;
  box-shadow:0 0 80px #37645130
}
.scenery {
  position:absolute;
  inset:0;
  z-index:-2;
  background:url('assets/backgrounds/temporary-meadow.svg') center/cover
}
.cover {
  height:100%;
  display:flex;
  align-items:center;
  flex-direction:column;
  padding:max(22px,env(safe-area-inset-top)) 16px max(20px,env(safe-area-inset-bottom));
  gap:8px
}
.cover-logo {
  width:min(96%,400px);
  height:29%;
  object-fit:contain;
  filter:drop-shadow(0 7px 3px #6a532126)
}
.friends {
  position:relative;
  flex:1;
  width:100%;
  min-height:0;
  max-height:420px
}
.friend {
  position:absolute;
  object-fit:contain;
  filter:drop-shadow(0 9px 4px #41632323)
}
.friend.monkey {
  width:43%;
  height:69%;
  left:1%;
  bottom:28%;
  transform:rotate(-8deg)
}
.friend.cat {
  width:44%;
  height:67%;
  right:0;
  bottom:29%;
  transform:rotate(8deg)
}
.friend.panda {
  width:42%;
  height:63%;
  left:0;
  bottom:0;
  z-index:2;
  transform:rotate(-9deg)
}
.friend.dog {
  width:42%;
  height:63%;
  right:0;
  bottom:0;
  z-index:2;
  transform:rotate(9deg)
}
.friend.rabbit {
  width:53%;
  height:88%;
  left:24%;
  bottom:0;
  z-index:3
}
.cover-heart {
  position:absolute;
  color:#f47b82;
  font-size:30px;
  text-shadow:0 3px 0 #e8646d;
  z-index:4
}
.heart-one {
  left:9%;
  top:4%;
  transform:rotate(-15deg)
}
.heart-two {
  right:7%;
  top:8%;
  transform:rotate(15deg)
}
.play-button {
  flex:none;
  width:77%;
  min-height:80px;
  height:12%;
  max-height:110px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  border:6px solid #fff8d8;
  border-radius:999px;
  background:linear-gradient(#a4e551 0%,#7dcd39 45%,#55af26 100%);
  box-shadow:inset 0 3px 0 #d2f986,inset 0 -8px 0 #4b9c24,0 7px 0 #b68c55,0 11px 15px #5f613426;
  color:#fffdf0;
  text-shadow:0 4px 0 #438c32;
  font-size:clamp(34px,7vh,58px);
  font-weight:1000;
  letter-spacing:2px;
  transition:transform .15s
}
.play-button:hover {
  filter:brightness(1.04)
}
.play-button:active {
  transform:translateY(4px)
}
.play-button svg {
  width:37px;
  height:43px;
  fill:#fffdf0;
  filter:drop-shadow(0 3px 0 #438c32)
}
.studio {
  margin-top:auto;
  padding-top:16px;
  font-size:11px;
  font-weight:900;
  letter-spacing:2px;
  display:flex;
  align-items:center;
  gap:7px;
  color:#3f7043
}
.studio svg {
  width:24px;
  height:22px;
  fill:#fffbdc;
  stroke:#61964c;
  stroke-width:1.5
}
.gameplay {
  display:flex;
  flex-direction:column;
  height:100%;
  padding: max(10px,env(safe-area-inset-top)) 15px max(12px,env(safe-area-inset-bottom));
  touch-action:none
}
.game-header {
  height:82px;
  flex:none;
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  z-index:5
}
.small-logo {
  width:146px;
  height:85px;
  object-fit:contain;
  object-position:left center;
  filter:drop-shadow(0 3px 1px #88692920)
}
.star-counter {
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:7px;
  padding:7px 15px 7px 9px;
  height:49px;
  min-width:82px;
  max-width:150px;
  border-radius:20px;
  background:linear-gradient(#fffae9,#ffe6bb);
  border:3px solid #fff6d7;
  box-shadow:0 4px 0 #d5b285;
  font-size:27px;
  font-weight:900;
  font-variant-numeric:tabular-nums
}
.star-counter img {
  width:32px;
  height:32px
}
.star-counter span {
  min-width:1ch;
  overflow:hidden;
  text-overflow:ellipsis
}
.settings-button {
  width:49px;
  height:49px;
  flex:none;
  border:3px solid #eab879;
  border-radius:50%;
  background:linear-gradient(#e6a35f,#c78544);
  box-shadow:0 4px 0 #9e6938,inset 0 2px 2px #ffe1a3
}
.settings-button svg {
  width:28px;
  height:28px;
  fill:#fff8e9;
  filter:drop-shadow(0 2px 0 #9d6038)
}
.thought-space {
  height:clamp(100px,16.5dvh,145px);
  flex:none;
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:3;
  padding-bottom:15px
}
.thought {
  position:relative;
  width:132px;
  height:100px;
  display:grid;
  place-items:center;
  border-radius:49% 47% 44% 47%;
  background:linear-gradient(150deg,#fffefa,#fff2df);
  box-shadow:inset 0 4px 0 white,0 5px 0 #dfd6bd88;
  transform:rotate(-3deg)
}
.thought:before,.thought:after {
  content:'';
  position:absolute;
  border-radius:50%;
  background:#fff7e8;
  box-shadow:0 3px 0 #dfd6bd55
}
.thought:before {
  width:20px;
  height:20px;
  bottom:-24px;
  left:57%
}
.thought:after {
  width:10px;
  height:10px;
  bottom:-41px;
  left:51%
}
.thought img {
  position:relative;
  width:76px;
  height:77px;
  object-fit:contain;
  transform:rotate(3deg);
  filter:drop-shadow(0 3px 1px #b58e7422)
}
.thought.satisfied {
  opacity:.45
}
.stage {
  flex:1;
  min-height:0;
  position:relative;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding-top:18px;
  padding-bottom:13px
}
.animal-target {
  position:relative;
  width:min(92%,345px);
  height:100%;
  max-height:450px;
  z-index:2;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  transform-origin:center 90%
}
.animal {
  display:block;
  max-width:100%;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center bottom;
  filter:drop-shadow(0 8px 3px #81632c27);
  animation:breathe 3s ease-in-out infinite;
  transform-origin:50% 95%
}
.stump {
  position:absolute;
  bottom:-4px;
  height:43px;
  width:94%;
  border-radius:50% 50% 35% 35%;
  border:3px solid #d7a460;
  background:linear-gradient(#f5d89a 0 40%,#d4a564 43%,#b58042 90%);
  box-shadow:0 7px 10px #44683020
}
.stump:before {
  content:'';
  position:absolute;
  inset:5px 18px 17px;
  border:2px solid #dbb97b;
  border-radius:50%
}
.food-dock {
  flex:none;
  margin-top:17px;
  position:relative;
  border-radius:27px;
  background:linear-gradient(#dfb277,#c28b4d);
  padding:10px 9px 17px;
  box-shadow:inset 0 3px 0 #f5d697,0 5px 0 #a9743f,0 10px 15px #46602c22;
  z-index:4
}
.food-tray {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:11px
}
.food-button {
  aspect-ratio:1;
  min-width:0;
  position:relative;
  display:grid;
  place-items:center;
  border:3px solid #fff9e4;
  border-radius:25%;
  background:linear-gradient(135deg,#fff7e7,#fbe1b5);
  padding:7px;
  box-shadow:inset 0 -4px 0 #e8c291,0 7px 0 #578e3a,0 10px 0 #3f7834;
  touch-action:none;
  transition:filter .2s,transform .2s
}
.food-button:before {
  content:'';
  position:absolute;
  inset:8px -4px -12px;
  border-radius:35% 25%;
  background:#75aa47;
  z-index:-1;
  transform:rotate(-7deg);
  box-shadow:inset 0 -5px 0 #5f933d
}
.food-button img {
  width:100%;
  height:100%;
  max-height:108px;
  object-fit:contain;
  filter:drop-shadow(0 4px 1px #af88672b);
  pointer-events:none
}
.food-button:disabled {
  cursor:default
}
.food-button.drag-source img {
  opacity:.2
}
.drag-ghost {
  position:fixed;
  z-index:30;
  object-fit:contain;
  padding:9px;
  pointer-events:none;
  transform:scale(1.08);
  filter:drop-shadow(0 10px 5px #5d523a40)
}
.ground-flowers {
  height:26px;
  flex:none
}
.animal-target.drop-ready .animal {
  filter:drop-shadow(0 0 9px #fff4a6)
}

.curious-mark {
  position:absolute;
  top:15%;
  right:1%;
  font-size:48px;
  font-weight:900;
  color:#7962a0;
  text-shadow:2px 2px #fff,-2px -2px #fff;
  transform:rotate(12deg)
}
.animal-target[data-state=wrong] .animal {
  animation:curious .8s ease-in-out
}
.animal-target[data-state=eating] .animal {
  animation:munch .32s ease-in-out infinite
}
.animal-target[data-state=success] .animal {
  animation:happy .65s ease-in-out
}
.celebration {
  position:absolute;
  inset:0;
  z-index:5;
  pointer-events:none
}
.celebration strong {
  position:absolute;
  top:6%;
  left:0;
  width:100%;
  text-align:center;
  color:#ffd849;
  font-size:clamp(33px,8.7vw,48px);
  font-weight:1000;
  letter-spacing:-2px;
  -webkit-text-stroke:1px #ac6023;
  text-shadow:0 3px 0 #ab672c,3px 0 #fff,-3px 0 #fff,0 -3px #fff;
  transform:rotate(-6deg);
  animation:nom .35s ease-out
}
.spark {
  position:absolute;
  font-size:32px;
  animation:float-up 1.6s ease-out both;
  color:#ffcc45;
  text-shadow:0 2px 0 #e7a641
}
.s1 {
  top:30%;
  left:3%
}
.s2 {
  top:53%;
  right:2%;
  animation-delay:.2s;
  color:#f57c91
}
.s3 {
  top:72%;
  left:7%;
  animation-delay:.35s
}
.s4 {
  top:23%;
  right:6%;
  animation-delay:.1s;
  color:#f57c91
}
.hint {
  animation:hint 1.8s ease-in-out infinite
}
.paused * {
  animation-play-state:paused!important
}
dialog {
  padding:0;
  border:5px solid #fff6dc;
  border-radius:30px;
  background:#fff2d8;
  box-shadow:0 10px 0 #b98d57,0 20px 80px #294d4744;
  width:min(330px,calc(100% - 40px));
  max-height:calc(100dvh - 40px)
}
dialog::backdrop {
  background:#21474066;
  backdrop-filter:blur(5px)
}
.settings-card {
  padding:24px 20px
}
h1 {
  font-size:26px;
  text-align:center;
  margin:0 0 23px
}
.toggle-row {
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:13px 15px;
  margin:12px 0;
  border:2px solid #eddbb5;
  border-radius:18px;
  background:#fffaf0;
  font-size:21px;
  font-weight:bold;
  min-height:64px
}
.toggle-row>span:first-child {
  display:flex;
  gap:13px;
  align-items:center
}
.toggle-state {
  background:#679b4a;
  color:white;
  border-radius:20px;
  min-width:58px;
  padding:7px 10px;
  font-size:16px;
  box-shadow:inset 0 -3px 0 #477e35
}
.toggle-row[aria-checked=false] .toggle-state {
  background:#bba889;
  box-shadow:inset 0 -3px 0 #938061
}
.back-button {
  background:linear-gradient(#99d751,#72b738);
  border:3px solid #faffd5;
  border-radius:20px;
  box-shadow:0 4px 0 #578e34;
  color:#fff;
  font-size:21px;
  font-weight:bold;
  width:100%;
  padding:16px 10px;
  margin-top:13px;
  text-shadow:0 2px #5b883a
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap
}
@keyframes breathe {
  50% {
    transform:scale(1.018,1.012)
  }
}
@keyframes curious {
  25%,65% {
    transform:rotate(-7deg)
  }
  45%,85% {
    transform:rotate(-4deg)
  }
}
@keyframes munch {
  50% {
    transform:scale(1.035,.97)
  }
}
@keyframes munch-food {
  50% {
    transform:translateY(-6px) rotate(5deg) scale(.95)
  }
}
@keyframes happy {
  50% {
    transform:translateY(-9px) rotate(2deg)
  }
}
@keyframes nom {
  from {
    opacity:0;
    transform:scale(.7) rotate(-6deg)
  }
  to {
    opacity:1;
    transform:scale(1) rotate(-6deg)
  }
}
@keyframes float-up {
  0% {
    opacity:0;
    transform:translateY(18px) scale(.6)
  }
  30% {
    opacity:1
  }
  100% {
    opacity:0;
    transform:translateY(-55px) rotate(15deg)
  }
}
@keyframes hint {
  50% {
    box-shadow:inset 0 -4px 0 #e8c291,0 7px 0 #578e3a,0 0 15px 5px #fff4b3;
    transform:translateY(-3px) rotate(2deg)
  }
}
@media(max-height:720px) {
  .game-header {
    height:70px
  }
  .small-logo {
    width:130px;
    height:73px
  }
  .thought-space {
    height:105px
  }
  .thought {
    width:112px;
    height:80px
  }
  .thought img {
    width:66px;
    height:66px
  }
  .thought:before {
    bottom:-18px;
    width:15px;
    height:15px
  }
  .thought:after {
    bottom:-31px;
    width:8px;
    height:8px
  }
  .food-dock {
    margin-top:8px;
    padding:8px 8px 14px
  }
  .ground-flowers {
    height:10px
  }
  .stage {
    padding-top:12px;
    padding-bottom:8px
  }
  .cover-logo {
    height:28%
  }
  .cover {
    padding-top:12px
  }
  .play-button {
    min-height:74px
  }
  .studio {
    padding-top:10px
  }
}
@media(max-width:360px) {
  .gameplay {
    padding-left:10px;
    padding-right:10px
  }
  .small-logo {
    width:118px
  }
  .game-header {
    gap:8px
  }
  .star-counter {
    font-size:23px;
    padding-right:10px;
    min-width:70px
  }
  .food-tray {
    gap:8px
  }
  .food-button {
    padding:5px
  }
}
@media(max-height:500px) and (orientation:landscape) {
  .game-shell {
    max-width:none
  }
  .gameplay {
    display:grid;
    grid-template-columns:130px 1fr 220px;
    grid-template-rows:70px 1fr;
    gap:6px 15px
  }
  .game-header {
    grid-column:1/4;
    justify-content:flex-end
  }
  .small-logo {
    margin-right:auto
  }
  .thought-space {
    align-self:center;
    height:110px
  }
  .stage {
    height:100%;
    grid-column:2;
    grid-row:2;
    padding:0 0 10px
  }
  .food-dock {
    grid-column:3;
    grid-row:2;
    align-self:center;
    margin:0
  }
  .food-tray {
    gap:7px
  }
  .food-button {
    padding:3px;
    border-width:2px
  }
  .ground-flowers {
    display:none
  }
  .cover {
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:1fr 95px
  }
  .cover-logo {
    width:100%;
    height:100%;
    max-height:190px
  }
  .friends {
    height:100%;
    grid-row:1/3;
    grid-column:2;
    max-height:none
  }
  .play-button {
    grid-column:1;
    grid-row:2;
    justify-self:center;
    min-height:65px;
    width:80%;
    font-size:35px
  }
  .studio {
    display:none
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation:none!important;
    transition:none!important
  }
  .hint {
    outline:4px solid #f8d974;
    outline-offset:2px
  }
}
/* Keep all three plates identical regardless of image proportions. */
.food-tray {
  grid-auto-rows:clamp(88px,25vw,124px)
}
.food-button {
  height:100%;
  aspect-ratio:auto;
  min-height:0
}
.food-button img {
  min-height:0
}
@media(max-height:500px) and (orientation:landscape) {
  .food-tray {
    grid-auto-rows:70px
  }
}
/* Anchor screens and announcements so focus cannot scroll the game shell. */
.cover,.gameplay {
  position:absolute;
  inset:0;
  width:100%
}
.sr-only {
  top:0;
  left:0;
  margin:0
}


/* Complete clean PNG canvases in the existing character stage. */
.animal-target{width:100%;max-width:380px;max-height:none;align-items:center}
.animal-target .animal{width:100%;height:100%;max-width:100%;max-height:100%;aspect-ratio:auto;object-fit:contain;object-position:center;align-self:center;animation:none;transform:none;filter:none;border-radius:0}
.animal-target[data-state] .animal{animation:none;transform:none}