#phone-screen:has(#screen-gk.active) {
  background: #a8dfff;
}
#screen-gk {
  height: 100% !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #a8dfff url('assets/gk-tree/treehouse-approved-v266.webp') center / 100% 100% no-repeat !important;
  isolation: isolate;
}

#screen-gk #shared-topbar {
  position: absolute;
  z-index: 30;
  top: 2%;
  left: 4.5%;
  right: 4.5%;
}
#screen-gk #shared-topbar .cloud-header,
#screen-gk #shared-topbar .cloud-progress-row { position: relative; z-index: 1; }
#screen-gk #shared-topbar .cloud-wallet { background: #fffdf2; }

#screen-gk::before {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 0 0 auto;
  height: 19%;
  pointer-events: none;
  background: linear-gradient(180deg, #aee5ff 0%, #a5dfff 66%, #a8dfffd9 81%, #a8dfff00 100%);
}
#screen-gk::after {
  content: '';
  position: absolute;
  z-index: 2;
  top: 12.7%;
  left: 72%;
  width: 17%;
  height: 3%;
  background: #a7e0ff;
  pointer-events: none;
}
#screen-gk .res-strip, #screen-gk .ident, #screen-gk .hdr-actions { z-index: 20; }
#screen-gk .res-strip { display: contents; }
#screen-gk .res--gold, #screen-gk .res--pass {
  position: absolute;
  z-index: 20;
  right: 4.5%;
  width: 105px;
}
#screen-gk .res--gold { top: 1.8%; }
#screen-gk .res--pass { top: 6.2%; }
#screen-gk .res--xp {
  z-index: 20;
  top: 8.15%;
  right: auto;
  left: 20%;
  width: 118px;
  height: 41px;
  padding: 0;
}
#screen-gk .res--xp .res__track {
  position: absolute;
  top: 0;
  left: 0;
  width: 94px;
  height: 7px;
  margin: 0;
}
#screen-gk .res--xp::before { top: 15px; left: 0; }
#screen-gk .res--xp .res__star { top: 15px; left: 37px; }
#screen-gk .ident { top: 2%; left: 4.5%; }
#screen-gk .hdr-actions { top: 9.4%; right: 4.5%; }
#screen-gk .gk-treehouse {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100% !important;
  margin: 0;
  overflow: visible;
  isolation: auto;
}
#screen-gk .gkt-tree, #screen-gk .gkt-trophy,
#screen-gk .gkt-hanging-note, #screen-gk .gkt-ground-note {
  display: none;
}
#screen-gk .gkt-trophy-link {
  position: absolute;
  z-index: 24;
  left: 76%;
  top: 30%;
  width: 22%;
  height: 13%;
  padding: 0;
  border: 0;
  border-radius: 45%;
  background: transparent;
  cursor: pointer;
}
#screen-gk .gkt-trophy-link:focus-visible { outline: 3px solid #146db0; outline-offset: 3px; }
#screen-gk .gkt-cloud {
  z-index: 4;
  top: 11%;
  left: 44%;
  width: 23%;
  height: auto;
  animation: gktCloud 5s ease-in-out infinite;
}
#screen-gk .gk-treehouse__title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  padding: 0;
  background: none;
  animation: none !important;
}
#screen-gk .gk-treehouse .gk-mode-btn {
  position: absolute;
  z-index: 7;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: none !important;
  box-shadow: none !important;
  animation: none !important;
  transition: transform .2s ease, filter .2s ease;
  overflow: visible;
}
#screen-gk .gk-treehouse .gk-mode-btn--knockout {
  top: 32%; left: 2%; width: 48%; height: 19%;
}
#screen-gk .gk-treehouse .gk-mode-btn--classic {
  top: 41%; left: 51%; width: 48%; height: 20%;
}
#screen-gk .gk-treehouse .gk-mode-btn--textbook {
  top: 56%; left: 26%; width: 49%; height: 19%;
}

#screen-gk .gk-mode-copy { opacity: 0; }
#screen-gk .gk-treehouse .fee-emboss {
  position: absolute;
  z-index: 2;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 3px;
  left: 29%;
  top: 68%;
  width: 46%;
  height: 16%;
  padding: 0 3px;
  border-radius: 99px;
  background: linear-gradient(#378d5b, #247349);
  color: #fff;
  font: 700 clamp(8px, 2.8vw, 12px)/1 var(--font-bangla);
  white-space: nowrap;
  text-shadow: none;
  box-shadow: inset 0 1px 2px #ffffff70, 0 2px 2px #22563250;
}
#screen-gk .gk-treehouse .fee-emboss::before {
  content: '★';
  display: grid;
  place-items: center;
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
  border: 1px solid #e9aa37;
  border-radius: 50%;
  color: #af6616;
  background: linear-gradient(#ffdf74, #ffc248);
  font: 700 10px/1 sans-serif;
}
#screen-gk .gk-mode-btn--classic .fee-emboss {
  top: 60%;
  left: 30%;
  width: 45%;
  background: linear-gradient(#9b53d2, #7938ac);
}
#screen-gk .gk-mode-btn--textbook .fee-emboss {
  top: 69%;
  left: 29%;
  width: 44%;
  background: linear-gradient(#438be5, #286cc6);
}
@media (hover:hover) {
  #screen-gk .gk-treehouse .gk-mode-btn:hover { transform: scale(1.015); filter: brightness(1.04); }
}
#screen-gk > div:last-child { display: none !important; }
#phone-screen:has(#screen-gk.active) .app-nav {
  height: 9.3%;
  padding: 4px 3% calc(8px + var(--sa-bottom));
  align-items: center;
  border: 2px solid #fff;
  border-bottom: 0;
  border-radius: 24px 24px 0 0;
  background: linear-gradient(180deg, #fffefa 0%, #f0faff 100%);
  box-shadow: 0 -7px 22px #23596326;
}
#phone-screen:has(#screen-gk.active) .app-nav__btn {
  opacity: 1;
  min-height: 62px;
  justify-content: center;
  padding: 0;
  transition: transform .2s ease;
}
#phone-screen:has(#screen-gk.active) .app-nav__label { display: none; }
#phone-screen:has(#screen-gk.active) .app-nav__tile {
  visibility: visible;
  width: 53px;
  height: 53px;
  border: 2px solid #fff;
  border-radius: 17px 17px 21px 21px;
  color: #fff;
  box-shadow: inset 0 2px 2px #ffffff8c, inset 0 -4px 1px #1735523b, 0 5px 8px #355d7352;
  transform: rotate(-5deg);
}
#phone-screen:has(#screen-gk.active) .app-nav__tile svg {
  width: 28px;
  height: 28px;
  stroke-width: 2.8px;
  transform: rotate(5deg);
  filter: drop-shadow(0 1px 1px #13395475);
}
#phone-screen:has(#screen-gk.active) .app-nav__btn--home .app-nav__tile { background: linear-gradient(145deg, #4fc5f7, #087dc4); }
#phone-screen:has(#screen-gk.active) .app-nav__btn--back .app-nav__tile { background: linear-gradient(145deg, #4adbb5, #009977); }
#phone-screen:has(#screen-gk.active) .app-nav__btn--store .app-nav__tile { background: linear-gradient(145deg, #ffbd59, #f16a25); }
#phone-screen:has(#screen-gk.active) .app-nav__btn--settings .app-nav__tile { background: linear-gradient(145deg, #b38fff, #7449d3); }
#phone-screen:has(#screen-gk.active) .app-nav__btn--home .app-nav__tile,
#phone-screen:has(#screen-gk.active) .app-nav__btn--back .app-nav__tile,
#phone-screen:has(#screen-gk.active) .app-nav__btn--store .app-nav__tile,
#phone-screen:has(#screen-gk.active) .app-nav__btn--settings .app-nav__tile { color: #fff; }
@media (hover: hover) {
  #phone-screen:has(#screen-gk.active) .app-nav__btn:hover { transform: translateY(-4px); }
}
#phone-screen:has(#screen-gk.active) .app-nav__btn--cloud { display: none; }
@media (prefers-reduced-motion: reduce) {
  #screen-gk .gkt-cloud { animation: none !important; }
  #screen-gk .gk-treehouse .gk-mode-btn { transition: none; }
}


#screen-gk-textbook {
  display: none;
  align-items: center;
  padding: 20px 12px calc(98px + var(--sa-bottom)) !important;
  overflow: hidden;
  background: radial-gradient(circle at 50% 36%,#fef7d9 0%,#def5f9 43%,#a7ddf4 100%);
}
#screen-gk-textbook.active { display: flex; }
.tb-book-heading {
  margin: 18px auto 0;
  width: min(86%,360px);
  min-height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff7de;
  text-shadow: 0 2px 2px #603817;
  font-size: clamp(22px,6vw,30px);
  font-weight: 900;
  line-height: 1.2;
  overflow: hidden;
  background: url('assets/gk-tree/tree_ui_element_09.webp') center top / 100% 114% no-repeat;
}
.tb-book-heading small { color: #704722; text-shadow: none; font-size: 12px; font-weight: 800; white-space: nowrap; }
.tb-book-stage { position: relative; width: min(100%,520px); aspect-ratio: 240 / 160; margin: clamp(24px,6vh,56px) auto 0; perspective: 900px; filter: drop-shadow(0 15px 12px #3a6e8066); }
.tb-book-art { display: block; width: 100%; height: 100%; object-fit: contain; }
.tb-book-pages { position: absolute; inset: 19% 10% 20%; display: grid; grid-template-columns: 1fr 1fr; gap: 11%; }
.tb-book-pages button { min-width: 0; appearance: none; border: 0; border-radius: 0; padding: 6px 3px; background: transparent; color: #73543a; box-shadow: none; font-family: 'Anek Bangla', var(--font-bangla); font-weight: 650; cursor: pointer; text-shadow: 0 1px 0 #fff8e9; }
.tb-book-pages button span { display: block; font-size: clamp(13px,3.6vw,18px); line-height: 1.28; }
.tb-book-pages button small { display: block; margin-top: 4px; color: #8b6547; font-size: clamp(10px,2.7vw,12px); font-weight: 600; }
.tb-book-pages button:first-child span { transform: rotate(-3deg) skewY(-2deg); }
.tb-book-pages button:first-child small { transform: rotate(-1deg); }
.tb-book-pages button:last-child span { transform: rotate(3deg) skewY(2deg); }
.tb-book-pages button:last-child small { transform: rotate(1deg); }
.tb-book-pages button:active { transform: scale(.97); }
.tb-book-pages button:focus-visible { outline: 3px solid #127cbd; outline-offset: 2px; }
.tb-page-turn { position: absolute; z-index: 2; left: 51%; top: 19%; width: 39%; height: 61%; border-radius: 4px 35% 35% 5px; background: linear-gradient(100deg,#e2cba0,#fff7dd 23%,#fffdf0 85%); box-shadow: 5px 2px 8px #795c3e44; transform-origin: left center; pointer-events: none; opacity: 0; }
#screen-gk-textbook.active .tb-page-turn { animation: tbTurnPage .9s ease-in-out both; }
#screen-gk-textbook.active .tb-book-pages { animation: tbRevealChoices .35s ease-out .67s both; }
@keyframes tbTurnPage { 0% { opacity: 1; transform: rotateY(0); } 75% { opacity: 1; } 100% { opacity: 0; transform: rotateY(-170deg); } }
@keyframes tbRevealChoices { from { opacity: 0; } to { opacity: 1; } }
.tb-book-stack { display: block; width: clamp(110px,40%,190px); margin: clamp(22px,5vh,48px) auto 0; clip-path: inset(4px 8px 6px); filter: drop-shadow(0 9px 8px #3a6e8055); }
@media (prefers-reduced-motion: reduce) {
  #screen-gk-textbook.active .tb-page-turn { animation: none; }
  #screen-gk-textbook.active .tb-book-pages { animation: none; }
}