/* Shared phone layout. Keep controls usable without shrinking the page. */
@media screen and (max-width: 900px) {
  .topnav {
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left));
  }
  .topnav-logo .logo-text, .topnav-logo #logoText {
    display: inline-block;
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .topnav-logo { min-height: 44px; }
  .topnav-links {
    order: 3;
    flex: 1 1 100%;
    min-width: 0;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px 12px;
  }
  .topnav-links a { display: inline-flex; align-items: center; min-height: 44px; }
  .topnav .lang-switch { margin-left: auto; }
  .topnav .lang-switch button { min-width: 44px; min-height: 44px; }
  .topnav-cta { min-height: 44px; margin-left: auto; }
  .article, main { overflow-wrap: break-word; }
  .article-body a, .article-body code { overflow-wrap: anywhere; }
  .article-body table { display: block; max-width: 100%; overflow-x: auto; }
  .sheet .row { flex-wrap: wrap; }
  .sheet .seg { max-width: 100%; flex-wrap: wrap; }
  .sheet .seg button, .sheet .row .seg button { min-width: 44px; min-height: 44px; }
  .sheet .box, .modal .box {
    min-width: 0;
    max-height: calc(100vh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    max-height: calc(100dvh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .sheet, .modal {
    padding-top: max(14px, env(safe-area-inset-top));
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }
  .top {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
  .sheet, .modal {
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
  }
  .top .brand { min-width: 0; overflow-wrap: anywhere; }
  .top .tbtn { min-width: 44px; min-height: 44px; flex-shrink: 0; }
  input[type="file"] { max-width: 100%; }
}
@media screen and (max-width: 480px) {
  body[data-preload-world="animals"] .dbtn { min-width: 0; flex-basis: 0; flex-direction: column; gap: 3px; }
  body[data-preload-world="animals"] .dbtn-lbl { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
}
@media screen and (max-height: 500px) and (orientation: landscape) {
  /* Leave reading space below the navigation in landscape. */
  .topnav { position: relative; }
}

/* Illustrated icon for the new academy on the hub and parent dashboard. */
.magic-menu-art{display:inline-block;flex-shrink:0;background-image:url('../scene/magic/sprites.webp');background-size:400% 400%;background-position:100% 100%;background-repeat:no-repeat}
.card-banner .magic-menu-art{width:108px;height:108px}