
#screen-gk {
  position: relative;
  flex: 1 1 0;
  height: calc(100% - 48px);
  padding: 0 0 calc(86px + var(--sa-bottom)) !important;
  background: linear-gradient(#95dafe 0 20%, #a8def8 55%, #eaf3fa 88%, #fff9e9 100%);
  min-height: 0;
}
#screen-gk .res-strip {
  position: absolute;
  z-index: 15;
  top: 13px;
  right: 12px;
  width: 105px;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
}
#screen-gk .res--gold, #screen-gk .res--pass {
  width: 105px;
  height: 32px;
  flex: 0 0 32px;
  padding: 0 1px 0 34px;
  border: 0;
  border-radius: 20px;
  color: #244665;
  background: url('assets/gk-tree/tree_ui_element_02.webp') center / 100% 100% no-repeat;
  box-shadow: none;
  font: 800 13px var(--font-english);
}
#screen-gk .res--pass { background-image: url('assets/gk-tree/tree_ui_element_06.webp'); }
#screen-gk .res--gold .res__icon, #screen-gk .res--pass .res__icon { display: none; }
#screen-gk .res--gold > span:not(.res__icon), #screen-gk .res--pass > span:not(.res__icon) { flex: 1; text-align: center; }
#screen-gk .res__add { width: 32px; height: 32px; opacity: 0; flex: 0 0 32px; }
#screen-gk .res--xp {
  position: absolute;
  top: 82px;
  right: calc(100vw - 213px);
  width: 130px;
  min-width: 0;
  height: 27px;
  padding: 12px 0 0;
  color: #3b6477;
  background: none;
  box-shadow: none;
  border-radius: 0;
}
#screen-gk .res--xp::before {
  content: 'লেভেল';
  position: absolute;
  left: 0;
  top: -8px;
  font: 700 11px var(--font-bangla);
}
#screen-gk .res__star { position: absolute; top: -8px; left: 36px; width: 28px; height: 20px; }
#screen-gk .res__star svg { display: none; }
#screen-gk .res__star span { color: #3b6477; font-size: 11px; text-shadow: none; }
#screen-gk .res__track { flex: 0 0 94px; height: 7px; min-width: 0; margin-top: 0; background: #fff; box-shadow: none; }
#screen-gk .res__fill { background: linear-gradient(90deg, #ffbd46, #52c885); }
#screen-gk .hdr-row2 {
  position: static;
  margin: 0;
}
#screen-gk .ident {
  position: absolute;
  z-index: 15;
  left: 15px;
  top: 13px;
  width: calc(100% - 135px);
  gap: 8px;
}
#screen-gk .ident > div:first-child { width: 53px !important; height: 53px !important; flex-basis: 53px !important; }
#screen-gk #gk-user-avatar { width: 52px !important; height: 52px !important; border: 3px solid #fff !important; }
#screen-gk .ident__name { color: #294e65; font-size: 18px; max-width: 140px; }
#screen-gk .ident__league { color: #4f6f80; font-size: 11px; cursor: pointer; }
#screen-gk .ident__league svg, #screen-gk #gk-hdr-trophy { display: none; }
#screen-gk .ident__league b { color: #4f6f80; }
#screen-gk .hdr-actions {
  position: absolute;
  z-index: 15;
  top: 82px;
  right: 16px;
  gap: 8px;
}
#screen-gk .hdr-orb { width: 46px; height: 46px; background: url('assets/gk-tree/tree_ui_element_04.webp') center / contain no-repeat; border: 0; box-shadow: none; }
#screen-gk .hdr-orb--board { display: none; }
#screen-gk .hdr-orb--league { background-image: url('assets/gk-tree/tree_ui_element_05.webp'); }
#screen-gk .hdr-orb svg, #screen-gk .hdr-orb img { display: none; }

#screen-gk .gk-treehouse {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  min-height: 0;
  height: min(160vw, 680px);
  margin: 125px 0 0;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
}
#screen-gk .gk-treehouse::before, #screen-gk .gk-treehouse::after { display: none; }
.gkt-cloud, .gkt-tree, .gkt-trophy { position: absolute; pointer-events: none; object-fit: contain; }
.gkt-cloud { z-index: 1; top: 0; left: 43%; width: 28%; animation: gktCloud 5s ease-in-out infinite; }
.gkt-tree { z-index: -1; top: 0; left: 0; width: 100%; height: 100%; object-fit: fill; }
.gkt-trophy { z-index: 4; top: 26%; right: 3%; width: 14%; filter: drop-shadow(0 5px 4px #214b6859); }
#screen-gk .gk-treehouse__title {
  position: absolute;
  z-index: 5;
  top: 5%;
  left: 13%;
  right: 13%;
  width: 74%;
  height: 26%;
  min-height: 0;
  padding: 16% 5% 0;
  display: block;
  color: #fff0c8;
  text-align: center;
  border: 0;
  border-radius: 0;
  background: url('assets/gk-tree/tree_ui_element_09.webp') center top / 110% 100% no-repeat;
  box-shadow: none;
  transform-origin: 50% 0;
}
#screen-gk .gk-treehouse__title::before, #screen-gk .gk-treehouse__title::after { display: none; }
#screen-gk .gk-treehouse__title strong { display: block; font: 900 clamp(24px, 7vw, 38px)/1.08 'Anek Bangla', var(--font-bangla); white-space: nowrap; text-shadow: 0 2px 2px #724019; }
#screen-gk .gk-treehouse__title span { display: block; margin-top: 6px; color: #663c21; font-size: clamp(10px, 3vw, 15px); font-weight: 700; white-space: nowrap; }
#screen-gk .gk-treehouse-modes { position: static; display: contents; padding: 0; gap: 0; }
#screen-gk .gk-treehouse .gk-mode-btn {
  position: absolute;
  z-index: 6;
  margin: 0;
  display: block;
  overflow: hidden;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background-color: transparent;
  background-position: center top;
  background-size: 100% auto;
  background-repeat: no-repeat;
  text-align: center;
  transition: transform .18s ease;
}
#screen-gk .gk-treehouse .gk-mode-btn--knockout {
  top: 23%; left: 0; width: 50%; height: 23%;
  color: #24634a;
  background-image: url('assets/gk-tree/tree_ui_element_07.webp');
}
#screen-gk .gk-treehouse .gk-mode-btn--classic {
  top: 49%; right: 0; width: 50%; height: 23%;
  color: #68389c;
  background-image: url('assets/gk-tree/tree_ui_element_08.webp');
}
#screen-gk .gk-treehouse .gk-mode-btn--textbook {
  top: 75%; left: 21%; width: 58%; height: 23%;
  color: #24609b;
  background-image: url('assets/gk-tree/tree_ui_element_12.webp');
}
#screen-gk .gk-mode-copy { position: absolute; left: 11%; right: 11%; top: 45%; display: flex; flex-direction: column; gap: 0; min-width: 0; }
#screen-gk .gk-mode-btn--classic .gk-mode-copy { top: 47%; }
#screen-gk .gk-mode-btn--textbook .gk-mode-copy { top: 36%; }
#screen-gk .gk-mode-copy strong { font-size: clamp(16px, 4.8vw, 24px); line-height: 1.22; font-weight: 900; white-space: nowrap; }
#screen-gk .gk-mode-copy small { font-size: clamp(8px, 2.5vw, 12px); line-height: 1.2; font-weight: 700; opacity: 1; white-space: nowrap; }
#screen-gk .gk-treehouse .fee-emboss {
  position: absolute;
  left: 31%;
  right: auto;
  top: 73%;
  bottom: auto;
  width: 49%;
  height: 19%;
  padding: 2px 0 0;
  color: #fff;
  background: none;
  transform: none;
  font-size: clamp(10px, 3.2vw, 15px);
  font-weight: 900;
  text-shadow: 0 1px 2px #214e424d;
}
#screen-gk .gk-mode-btn--classic .fee-emboss { top: 70%; }
#screen-gk .gk-mode-btn--textbook .fee-emboss { top: 72%; }
#screen-gk .gk-mode-btn::after { display: none; }
#screen-gk .gkt-hanging-note {
  position: absolute;
  z-index: 4;
  top: 52%;
  left: 15%;
  width: 17%;
  height: 10%;
  padding: 0 1%;
  background: none;
  color: #623e25;
  text-align: center;
  font-size: clamp(9px, 2.7vw, 13px);
  font-weight: 800;
  line-height: 1.1;
  transform: rotate(-2deg);
}
#screen-gk .gkt-ground-note {
  position: absolute;
  z-index: 4;
  bottom: 9%;
  right: 3%;
  width: 27%;
  height: 16%;
  padding: 5% 4% 0;
  background: url('assets/gk-tree/tree_ui_element_17.webp') center / 100% 100% no-repeat;
  color: #623e25;
  text-align: center;
  font-size: clamp(9px, 2.65vw, 13px);
  font-weight: 800;
  line-height: 1.25;
  transform: rotate(5deg);
}
#screen-gk #tb-class-row { position: absolute; z-index: 12; top: 75%; left: 11%; width: 78% !important; padding: 10px; border-radius: 18px; background: #fffefa; box-shadow: 0 10px 24px #31583952; }
#screen-gk #tb-class-row .gk-mode-btn { position: relative; width: 100%; min-height: 48px; padding: 8px; border-radius: 12px; }
#screen-gk #tb-class-row .gk-mode-btn span { position: relative; color: #fff; }
#screen-gk.active .gk-treehouse__title { animation: gkTreehouseSign .9s cubic-bezier(.22,1.25,.36,1) .12s both; }
#screen-gk.active .gk-mode-btn--knockout { animation: gkModeLeafIn .65s cubic-bezier(.2,.9,.2,1) .34s backwards, gktVictory 4.5s ease-in-out 1.4s infinite; }
#screen-gk.active .gk-mode-btn--classic { animation: gkModeLeafIn .65s cubic-bezier(.2,.9,.2,1) .48s backwards, gktWisdom 5.4s ease-in-out 1.5s infinite; }
#screen-gk.active .gk-mode-btn--textbook { animation: gkModeLeafIn .65s cubic-bezier(.2,.9,.2,1) .62s backwards, gktPages 4.8s ease-in-out 1.6s infinite; }
#screen-gk.active .gkt-tree { animation: gktTreeIn .85s ease-out both; }
@keyframes gktTreeIn { from { opacity: 0; transform: translateY(15px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes gktCloud { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes gktVictory { 0%,72%,100% { transform: scale(1); } 80% { transform: scale(1.025); } 88% { transform: scale(.995); } }
@keyframes gktWisdom { 0%,100% { transform: rotate(0); } 48% { transform: rotate(.6deg) translateY(-2px); } }
@keyframes gktPages { 0%,68%,100% { transform: translateY(0); } 78% { transform: translateY(-3px) rotate(-.5deg); } 88% { transform: translateY(1px) rotate(.3deg); } }
@media (hover:hover) { #screen-gk .gk-treehouse .gk-mode-btn:hover { transform: translateY(-4px) scale(1.02); box-shadow: none; } }
#phone-screen:has(#screen-gk.active) .app-nav {
  background: url('assets/gk-tree/tree_ui_element_20.webp') center / 100% 100% no-repeat;
  border: 0;
  box-shadow: none;
  height: calc(80px + var(--sa-bottom));
  padding: 0 8px calc(2px + var(--sa-bottom));
}
#phone-screen:has(#screen-gk.active) .app-nav__btn { justify-content: flex-end; }
#phone-screen:has(#screen-gk.active) .app-nav__tile { visibility: hidden; }
#phone-screen:has(#screen-gk.active) .app-nav__label { position: relative; z-index: 1; transform: translateY(-7px); }
#phone-screen:has(#screen-gk.active) .app-nav__tile { width: 42px; height: 39px; border-radius: 50%; background: transparent; box-shadow: none; color: #2587bf; }
#phone-screen:has(#screen-gk.active) .app-nav__btn--home .app-nav__tile { color: #2587bf; background: #d9f2ff; box-shadow: none; }
#phone-screen:has(#screen-gk.active) .app-nav__btn--back .app-nav__tile { color: #514ddb; }
#phone-screen:has(#screen-gk.active) .app-nav__btn--store .app-nav__tile { color: #eb793c; }
#phone-screen:has(#screen-gk.active) .app-nav__btn--settings .app-nav__tile { color: #8658d2; }
#phone-screen:has(#screen-gk.active) .app-nav__label { color: #426785; }
@media (max-width: 350px) {
  #screen-gk .gk-treehouse { height: 175vw; }
  #screen-gk .gk-mode-copy strong { font-size: 17px; }
  #screen-gk .gk-treehouse__title strong { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  #screen-gk.active .gkt-tree, #screen-gk .gkt-cloud,
  #screen-gk.active .gk-mode-btn--knockout,
  #screen-gk.active .gk-mode-btn--classic,
  #screen-gk.active .gk-mode-btn--textbook { animation: none !important; }
}
