/* Installed app (PWA) controls in the top bar, from /games/pwa.js */
.ix-pwa{display:flex;flex:none;align-items:center;gap:6px;margin-right:auto;position:relative}
.ix-pwa-btn[hidden]{display:none!important}
.ix-pwa-btn{width:36px;height:36px;flex:none;display:inline-grid;place-items:center;border-radius:10px;color:var(--text);background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--line)}
.ix-pwa-btn svg{width:20px;height:20px}
.ix-pwa-back{margin-right:-8px}
.ix-pwa-btn:hover{background:var(--bg-3)}
.ix-pwa-toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translate(-50%,16px);opacity:0;pointer-events:none;z-index:60;padding:10px 16px;border-radius:10px;background:var(--bg-3);color:var(--text);font-size:14px;box-shadow:inset 0 0 0 1px #34343a;transition:opacity .2s,transform .2s}
.ix-pwa-toast.on{opacity:1;transform:translate(-50%,0)}
/* phones: the top bar's left column is ~216px next to the "Mod your PC games" button. In the app the logo keeps only its
   icon, the app's name is already on screen. */
@media (max-width:560px){
  html.ix-app nav .logo{font-size:0;gap:0}
  html.ix-app nav .logo .dotl{display:none}
  .ix-pwa{gap:4px}
}
/* running as an app: no browser chrome, so keep clear of the notch, rounded corners and the home indicator */
@media (display-mode:standalone),(display-mode:window-controls-overlay),(display-mode:fullscreen){
  body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);padding-bottom:env(safe-area-inset-bottom)}
  body>header{padding-top:env(safe-area-inset-top)}
}