/* Final overrides, animations and viewport-specific adaptations. */
.window > .window-content {
  height: calc(100% - 2.45rem);
}

.duck-game-window .duck-field {
  min-height: 15rem;
}

.duck-game-window {
  height: min(31rem, calc(100dvh - 5.25rem));
}

@keyframes loading {
  from {
    transform: translateX(-180%);
  }
  to {
    transform: translateX(280%);
  }
}

@keyframes driftCloud {
  0% {
    transform: translateX(-4vw);
  }
  50% {
    transform: translateX(3vw);
  }
  100% {
    transform: translateX(-4vw);
  }
}

@media (min-width: 481px) and (max-height: 800px) {
  .start-menu__banner {
    min-height: 3.65rem;
    padding: 0.55rem 0.8rem 0.45rem;
  }

  .start-menu__body {
    min-height: 0;
  }

  .start-menu__column {
    gap: 0.08rem;
    padding: 0.35rem 0.4rem;
  }

  .start-menu__item {
    grid-template-columns: 1.9rem 1fr;
    min-height: 2.2rem;
    padding: 0.18rem 0.42rem;
  }

  .start-menu__icon,
  .start-menu__icon img {
    width: 1.7rem;
    height: 1.7rem;
  }

  .start-menu__footer {
    padding: 0.35rem 0.55rem;
  }
}

@media (min-width: 481px) and (max-width: 760px) {
  .explorer-layout,
  .msn-layout,
  .hero-card--split,
  .cv-sections,
  .media-layout,
  .gallery-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .explorer-sidebar {
    display: none;
  }

  .contact-sidebar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem 1rem;
    align-items: start;
  }

  .contact-sidebar .profile-bubble,
  .contact-sidebar .contact-facts {
    margin: 0;
  }

  .contact-sidebar .contact-facts {
    grid-column: 1 / -1;
    padding-top: 0.65rem;
  }

  .contact-sidebar .plain-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem 1.5rem;
  }

  .contact-sidebar .plain-list li + li {
    margin-top: 0;
  }

  .start-flyout,
  .start-flyout--programs,
  .start-flyout--nested,
  .start-flyout--nested.opens-left {
    position: fixed;
    inset: auto 0.5rem 3.4rem 0.5rem;
    width: auto;
    min-width: 0;
    max-height: 68dvh;
    overflow: auto;
  }

  .start-flyout--nested,
  .start-flyout--nested.opens-left {
    inset: auto 0.85rem 3.8rem 0.85rem;
    z-index: 10020;
  }
}


@media (max-width: 480px) {
  html,
  body {
    overflow: auto;
  }

  .desktop {
    min-height: 100dvh;
    padding: 1rem 1rem 5rem;
  }

  .desktop-icons {
    position: relative;
    inset: auto;
    min-height: 0;
    width: 100%;
    margin-bottom: 1rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    pointer-events: auto;
  }

  .desktop-icon {
    position: relative;
    left: auto !important;
    top: auto !important;
    width: 100%;
    height: auto;
    min-height: 5.25rem;
    overflow: visible;
  }

  .selection-box {
    display: none !important;
  }

  .window,
  .window.maximized {
    position: relative;
    inset: auto !important;
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 0;
    max-height: none;
    margin-bottom: 1rem;
  }

  .window[data-explorer-window],
  .window.window-browser,
  .image-viewer-window,
  .project-viewer-window {
    width: 100% !important;
    min-width: 0;
    height: auto !important;
    max-height: none;
  }

  .window.active:not(.mobile-front) {
    display: none;
  }

  .window.active.mobile-front,
  .window.active.mobile-front.maximized {
    position: fixed;
    inset: 0.35rem 0.35rem 3.15rem !important;
    z-index: 10010 !important;
    width: auto !important;
    height: auto !important;
    margin: 0;
    overflow: hidden;
  }

  .window.active.mobile-front > .window-content {
    height: calc(100% - 2.15rem);
    overflow: auto;
  }

  .window.active.mobile-front[data-explorer-window] > .window-content,
  .window.active.mobile-front.window-browser > .window-content,
  .window.active.mobile-front.image-viewer-window > .window-content {
    overflow: hidden;
  }

  .window.active.mobile-front .xp-explorer,
  .window.active.mobile-front .browser-layout,
  .window.active.mobile-front .image-viewer {
    height: 100%;
    min-height: 0;
  }

  .start-flyout,
  .start-flyout--programs,
  .start-flyout--nested {
    position: fixed !important;
    inset: auto 0.5rem 3.4rem 0.5rem !important;
    width: auto;
    min-width: 0;
    max-height: 68dvh;
    overflow: auto;
  }

  .start-flyout--nested {
    inset: auto 0.85rem 3.8rem 0.85rem !important;
    z-index: 10020;
  }

  #startMenu .start-flyout__item.has-submenu:not(.is-open) > .start-flyout--nested {
    display: none;
  }

  #startMenu .start-flyout__item.has-submenu.is-open > .start-flyout--nested {
    display: grid;
  }

  .xp-explorer {
    min-height: 31rem;
  }

  .explorer-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .explorer-sidebar {
    display: none;
  }

  .explorer-toolbar {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .explorer-toolbar::-webkit-scrollbar {
    display: none;
  }

  .explorer-toolbar__sep,
  .explorer-toolbar [data-explorer-task="toggle-folders"],
  .explorer-toolbar [data-explorer-task="cycle-view"] {
    display: none;
  }

  .explorer-addressbar {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .notepad-workspace {
    grid-template-columns: 1fr;
  }

  .control-panel-grid,
  .tour-grid {
    grid-template-columns: 1fr;
  }

  .paint-workspace {
    grid-template-columns: 2.7rem minmax(0, 1fr);
  }

  .paint-tools {
    grid-template-columns: 1fr;
  }

  .property-actions,
  .run-actions {
    flex-wrap: wrap;
  }

  .system-specs {
    grid-template-columns: 1fr;
  }

  .system-specs dd {
    margin-bottom: 0.45rem;
  }

  .taskbar-tray {
    gap: 0.05rem;
  }

  .tray-button--updates,
  .taskbar-tray [data-tray-open="network"] {
    display: none;
  }

  .tray-popup {
    right: 0.35rem;
    bottom: 3.45rem;
    max-width: calc(100vw - 0.7rem);
  }

  .poetry-index {
    border-right: 0;
    border-bottom: 1px solid #aebbd0;
  }

  .poetry-index__list {
    max-height: 12rem;
  }

  .image-viewer {
    min-height: 29rem;
  }

  .image-viewer__toolbar {
    grid-template-columns: 1fr 1fr;
  }

  .image-viewer__toolbar > span {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .window-content {
    height: auto;
    overflow: visible;
  }

  .ie-navrow > [data-browser-action="external"] {
    display: none;
  }

  .resize-handle {
    display: none;
  }

  .status-grid,
  .msn-layout,
  .hero-card--split,
  .explorer-strip,
  .drive-grid,
  .cv-sections,
  .interest-grid,
  .media-layout,
  .gallery-grid {
    grid-template-columns: 1fr;
  }

  #taskbarHint {
    display: none;
  }

  .start-button {
    min-width: 5.6rem;
  }

  .taskbar-windows {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .taskbar-windows::-webkit-scrollbar {
    display: none;
  }

  .taskbar-window {
    flex: 0 0 2.7rem;
    width: 2.7rem;
    min-width: 2.7rem;
    padding: 0 0.7rem;
    touch-action: manipulation;
  }

  .taskbar-window span {
    display: none;
  }

  .taskbar-tray {
    gap: 0;
    padding: 0 0.55rem;
  }

  .toast {
    position: static;
    margin: 1rem 0 4rem;
  }
}

@media (max-width: 360px) {
  .desktop-icons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .folder-toolbar,
  .project-row {
    grid-template-columns: 1.5fr 1fr 0.6fr;
    gap: 0.55rem;
    font-size: 0.88rem;
  }

  .chat-form,
  .hero-actions,
  .contact-shortcuts,
  .search-panel {
    flex-direction: column;
  }

  .chat-form__row {
    grid-template-columns: 1fr;
  }

  .ie-menubar {
    display: none;
  }

  .ie-navrow,
  .ie-addressbar,
  .ie-favorites,
  .ie-history {
    align-items: stretch;
    flex-direction: column;
  }

  .ie-history-list {
    flex-direction: column;
    overflow-x: visible;
  }

  .ie-frame-shell {
    min-height: 22rem;
  }

  .ie-frame-fallback {
    inset: 1rem;
    transform: none;
  }

  .taskbar-tray {
    gap: 0.6rem;
    padding: 0 0.75rem;
    font-size: 0.9rem;
  }

  .taskbar-window {
    flex-basis: 7rem;
    min-width: 2.4rem;
  }
}