@media (max-width: 760px) and (orientation: portrait) and (max-aspect-ratio: 2/3) {
  body { background: var(--app-gradient); }
  #phone-container {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    zoom: 1 !important;
  }
  #phone-screen { border-radius: 0; }
}

@media (max-width: 760px) {
  html.sv-code-keyboard body { background: var(--app-gradient); }
  html.sv-code-keyboard #phone-container {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    zoom: 1 !important;
  }
  html.sv-code-keyboard #phone-screen { border-radius: 0; }
}

#phone-screen:has(#screen-home.active) { background: radial-gradient(ellipse at 5% 36%, #ffffffa6, transparent 32%), var(--app-gradient); }
#phone-screen:has(#screen-home.active) #screen-home { background: transparent; }

html.sv-immersive-android #phone-screen:has(#screen-home.active),
html.sv-immersive-android #phone-screen:has(#screen-gk.active),
html.sv-immersive-android #phone-screen:has(#screen-friends.active),
html.sv-immersive-android #phone-screen:has(#screen-couple.active) { padding-top: 0; }
html.sv-immersive-android #screen-home.cloud-home { padding-top: 8px; }
html.sv-immersive-android #screen-home .cloud-profile { align-items: flex-start; }
html.sv-immersive-android #screen-home .cloud-avatar-wrap,
html.sv-immersive-android #screen-home .cloud-wallets { margin-top: 3px; }
html.sv-immersive-android #screen-home .cloud-identity { padding-top: var(--sa-top); }
html.sv-immersive-android #screen-gk #shared-topbar { top: calc(var(--sa-top) + 2%); }
html.sv-immersive-android #screen-friends #shared-topbar { padding-top: calc(11px + var(--sa-top)); }
html.sv-immersive-android #screen-couple:not([data-phase="playing"]):not([data-phase="complete"]) { padding-top: calc(16px + var(--sa-top)) !important; }
html.sv-immersive-android #screen-couple:is([data-phase="playing"],[data-phase="complete"]) { padding-top: 0 !important; }
html.sv-immersive-android #screen-couple:is([data-phase="playing"],[data-phase="complete"]) #shared-topbar { padding-top: calc(12px + var(--sa-top)); }
#phone-screen:has(#screen-friends.active) { background: url('assets/cloud-play/friends-sky-v288.webp') top center / cover no-repeat, #52b3f8; }
#phone-screen:has(#screen-couple.active) { background: #b7e7ff; }
#phone-screen:has(#screen-gk.active),
#phone-screen:has(#screen-gk-categories.active),
#phone-screen:has(#screen-gk-league.active) { background: #a9dcfa; }
#phone-screen:has(#screen-gk-quiz.active) { background: linear-gradient(#80c9f7, #c2e8ff 43%, #fff1d4 78%); }
#phone-screen:has(#screen-gk-textbook.active) { background: radial-gradient(circle at 50% 36%, #fef7d9 0%, #def5f9 43%, #a7ddf4 100%); }
#phone-screen:has(#screen-leaderboard.active) { background: url('assets/cloud-play/leaderboard-prototype-sky.webp') top center / 100% auto no-repeat, #4ea9ec; }
#phone-screen:has(#screen-loading.active) { background: #0f172a; }
#phone-screen .app-nav {
  height: calc(80px + var(--sa-bottom));
  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, #f0faff);
  box-shadow: 0 -7px 22px #23596326;
}
#phone-screen .app-nav__btn {
  min-height: 62px;
  justify-content: center;
  padding: 0;
  transition: transform .2s ease;
}
#phone-screen .app-nav__label { display: none; }
#phone-screen .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 .app-nav__tile svg {
  width: 28px;
  height: 28px;
  stroke-width: 2.8px;
  transform: rotate(5deg);
  filter: drop-shadow(0 1px 1px #13395475);
}
#phone-screen .app-nav__btn--home .app-nav__tile { background: linear-gradient(145deg, #4fc5f7, #087dc4); }
#phone-screen .app-nav__btn--back .app-nav__tile { background: linear-gradient(145deg, #4adbb5, #009977); }
#phone-screen .app-nav__btn--store .app-nav__tile { background: linear-gradient(145deg, #ffbd59, #f16a25); }
#phone-screen .app-nav__btn--settings .app-nav__tile { background: linear-gradient(145deg, #b38fff, #7449d3); }
#phone-screen .app-nav__btn--cloud-board .app-nav__tile { background: linear-gradient(145deg, #ffc966, #db8b19); }
#phone-screen .app-nav__btn--cloud-profile .app-nav__tile { background: linear-gradient(145deg, #b38fff, #7449d3); }
#phone-screen .app-nav__btn--home .app-nav__tile,
#phone-screen .app-nav__btn--back .app-nav__tile,
#phone-screen .app-nav__btn--store .app-nav__tile,
#phone-screen .app-nav__btn--settings .app-nav__tile,
#phone-screen .app-nav__btn--cloud .app-nav__tile { color: #fff; }

#phone-screen:has(#screen-home.active) .app-nav {
  height: calc(80px + var(--sa-bottom));
  padding: 4px 3% calc(8px + var(--sa-bottom));
  border: 2px solid #fff;
  border-bottom: 0;
  border-radius: 24px 24px 0 0;
  background: linear-gradient(180deg, #fffefa, #f0faff);
  box-shadow: 0 -7px 22px #23596326;
}
#phone-screen:has(#screen-home.active) .app-nav__tile {
  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;
}
#phone-screen:has(#screen-home.active) .app-nav__btn--home .app-nav__tile {
  background: linear-gradient(145deg, #4fc5f7, #087dc4);
  color: #fff;
  box-shadow: inset 0 2px 2px #ffffff8c, inset 0 -4px 1px #1735523b, 0 5px 8px #355d7352;
}
#phone-screen:has(#screen-home.active) .app-nav__btn--cloud-board .app-nav__tile { background: linear-gradient(145deg, #ffc966, #db8b19); color: #fff; }
#phone-screen:has(#screen-home.active) .app-nav__btn--store .app-nav__tile { background: linear-gradient(145deg, #ffbd59, #f16a25); color: #fff; }
#phone-screen:has(#screen-home.active) .app-nav__btn--settings .app-nav__tile { background: linear-gradient(145deg, #b38fff, #7449d3); color: #fff; }
@media (hover: hover) {
  #phone-screen .app-nav__btn:not([disabled]):hover { transform: translateY(-4px); }
}

#shared-topbar .cloud-level { min-height: 8px; }
#shared-topbar .cloud-xp-track { flex: 1 1 auto; }
.profile-xp-stack {
  flex-direction: column;
  align-items: stretch !important;
  gap: 5px !important;
}
.profile-xp-stack > span:last-child { align-self: flex-start; }
@media (max-width: 350px) {
  #phone-screen .app-nav__tile,
  #phone-screen:has(#screen-home.active) .app-nav__tile { width: 48px; height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  #phone-screen .app-nav__btn { transition: none; }
}