/* Website-only layout. The look is the Android app's (css/dg.css); this file only
   gives the browser a proper desktop shell: a sidebar on the right and a wide content area. */
html{background:var(--bg)}
body{background:radial-gradient(1100px 520px at 88% -8%,#ffe8a6 0,transparent 62%),radial-gradient(900px 480px at 0% 100%,#ffe3bd 0,transparent 58%),var(--bg);background-attachment:fixed}

@media (min-width:1024px){
  #home{max-width:none;margin:0;padding:0 276px 56px 36px}
  #mtop{margin:0;padding:18px 0 14px 0;min-height:76px;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
  #mtop .logo{display:none}
  #mtop .account-chip,#mtop > *:not(.logo){margin-inline-end:auto}
  #mbody{max-width:1040px;margin-inline:auto}

  #mnav{position:fixed;top:0;bottom:0;right:0;left:auto;width:244px;max-width:none;margin:0;
    display:flex;flex-direction:column;align-items:stretch;gap:6px;padding:96px 14px 24px;
    border:0;border-left:1px solid var(--line);border-radius:0;
    background:color-mix(in srgb,var(--s1) 96%,transparent);box-shadow:-14px 0 40px -28px rgba(120,80,0,.35)}
  #mnav::before{content:"DrawGuess";position:absolute;top:24px;right:18px;left:18px;height:44px;display:flex;align-items:center;
    padding-right:54px;background:url(../assets/img/logo.svg) right center/42px 42px no-repeat;
    font-family:var(--font-display);font-size:27px;color:var(--pri-3);line-height:1}
  #mnav .nv{flex-direction:row;justify-content:flex-start;gap:14px;min-height:50px;padding:0 16px;font-size:15px;border-radius:16px}
  #mnav .nv svg{width:23px;height:23px}
  #mnav .nv:hover:not(.on){background:var(--s2);color:var(--ink)}

  #th,#snd{top:auto;bottom:22px;left:auto;z-index:60}
  #th{right:24px}
  #snd{right:72px}

  .game-front-card{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:28px;padding:34px 40px}
  .game-front-art{order:2}
  #p-shop .shop-top{max-width:none}
}
@media (min-width:1500px){
  #mbody{max-width:1180px}
}