/* All laptops use the desktop artwork and geometry. Fit the whole panel,
   including its floating title/close button, instead of clipping its contents. */
html:not(.has-touch-controls) {
  --game-popup-max-width: 1040px;
  --game-popup-max-height: 740px;
  --left-hud-width: 80px;
}
html:not(.has-touch-controls) :is(#coinsPerSecondPanel,#speedMultiplierPanel,#trailsButton,#playerTrailsButton,#skinsButton,#giftButton,#backpackToggle) {
  width:var(--left-hud-width);
  box-sizing:border-box;
}
html:not(.has-touch-controls) :is(.character-modal,.daily-modal,.skin-modal,.trail-modal,.settings-modal,.player-name-modal,.sell-confirm-modal) {
  position: fixed;
  top: 50%; left: 50%; margin: 0;
  max-height: none;
  overflow: visible;
  translate: -50% -50%;
  scale: var(--desktop-panel-scale, 1);
  transform: none;
  transform-origin: center;
}
html:not(.has-touch-controls) .character-modal { width:390px; height:620px; }
html:not(.has-touch-controls) :is(.daily-modal,.skin-modal) { width:1040px; }
html:not(.has-touch-controls) .trail-modal { width:760px; }
html:not(.has-touch-controls) .skin-list { flex:none; overflow:visible; }
/* Settings must dim and block every HUD stacking layer, including Backpack. */
#settingsOverlay { z-index:120; }
#playerNameOverlay { z-index:120; }

/* Embedded games and small laptops share one scale for both menu columns. */
@media (max-width:1100px), (max-height:700px) {
  html:not(.has-touch-controls) {
    --compact-menu-scale:var(--game-ui-scale, .75);
    --left-hud-lift:0px;
    --left-hud-top:85px;
    --left-menu-top:calc(var(--left-hud-top) + 122px * var(--compact-menu-scale));
    --left-menu-step:calc(84px * var(--compact-menu-scale));
  }
  /* Scale the 53px rate panels, 76px buttons and their 8px gaps together. */
  html:not(.has-touch-controls) #coinsPerSecondPanel {top:var(--left-hud-top);left:14px;transform:none;}
  html:not(.has-touch-controls) #speedMultiplierPanel {top:calc(var(--left-hud-top) + 61px * var(--compact-menu-scale));left:14px;transform:none;}
  html:not(.has-touch-controls) :is(#coinsPerSecondPanel,#speedMultiplierPanel,.trail-shop-launcher,.player-trail-shop-launcher,.skins-shop-launcher,.daily-rewards-launcher,.emoji-hud-slot) {
    scale:var(--compact-menu-scale);transform-origin:top left;
  }
  html:not(.has-touch-controls) .collection-menu-buttons {
    transform:translateY(-50%) scale(var(--compact-menu-scale));transform-origin:center right;
  }
  html:not(.has-touch-controls) .cycle-hud {
    scale:var(--compact-menu-scale);transform-origin:bottom right;right:12px;bottom:12px;
  }
  html:not(.has-touch-controls) .cycle-announcement {max-width:max(180px,calc(100vw - 400px));font-size:clamp(16px,2vw,22px);}
  html:not(.has-touch-controls) .item-hotbar {max-width:calc(100vw - 290px);}
  /* A full room must not extend underneath the Album launcher. */
  html:not(.has-touch-controls) .leaderboard-body {max-height:70px;}
  html:not(.has-touch-controls):has(.cycle-announcement.is-visible) .first-time-tutorial {visibility:hidden;}
}

/* Very short embeds keep the rate panels in one row above the menu. */
@media (max-height:520px) {
  html:not(.has-touch-controls) {--left-menu-top:calc(var(--left-hud-top) + 61px * var(--compact-menu-scale));}
  html:not(.has-touch-controls) #speedMultiplierPanel {top:var(--left-hud-top);left:calc(14px + 88px * var(--compact-menu-scale));}
}