/* page background & basics */
body {
  background-image: url('../../images/dashboard.png');
  background-size: cover;
  font-family: Arial, sans-serif;
  color: #f0f0f0;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  position: relative; /* stacking context for your content */
}

/* page vars (unchanged) */
.dashboard-mascots{
  --mascot-left-url:  url('/images/mascots/<?= $left ?>.png');
  --mascot-right-url: url('/images/mascots/<?= $left ?>.png');
  --mascot-left-x: 6vw;
  --mascot-right-x: 6vw;
  --mascot-left-bottom: 14vh;
  --mascot-right-bottom: 14vh;
}

/* hard-force positions for this page (html host) */
html.dashboard-mascots.mascot-left::after,
html.dashboard-mascots.mascot-both::after{
  bottom:var(--mascot-left-bottom)!important;
  left:var(--mascot-left-x)!important;
  background-image:var(--mascot-left-url)!important;
}

html.dashboard-mascots.mascot-right::before,
html.dashboard-mascots.mascot-both::before{
  bottom:var(--mascot-right-bottom)!important;
  right:var(--mascot-right-x)!important;
  background-image:var(--mascot-right-url)!important;
}

/* scope the page vars to both html and body so either host gets them */
html.dashboard-mascots,
body.dashboard-mascots{
  --mascot-left-x: 6vw;
  --mascot-right-x: 6vw;
  --mascot-left-bottom: 5vh;  /* tweak here */
  --mascot-right-bottom: 14vh; /* tweak here */
  /* urls can be set via your inline <style> block or here if you prefer */
  /* --mascot-left-url:  url('/images/mascots/LEFT.png'); */
  /* --mascot-right-url: url('/images/mascots/RIGHT.png'); */
}

/* hard-force positions for BOTH hosts (html or body), left = ::after, right = ::before */
html.dashboard-mascots.mascot-left::after,
body.dashboard-mascots.mascot-left::after,
html.dashboard-mascots.mascot-both::after,
body.dashboard-mascots.mascot-both::after{
  left: var(--mascot-left-x) !important;
  bottom: var(--mascot-left-bottom) !important;
  background-image: var(--mascot-left-url) !important;
}

html.dashboard-mascots.mascot-right::before,
body.dashboard-mascots.mascot-right::before,
html.dashboard-mascots.mascot-both::before,
body.dashboard-mascots.mascot-both::before{
  right: var(--mascot-right-x) !important;
  bottom: var(--mascot-right-bottom) !important;
  background-image: var(--mascot-right-url) !important;
}

/* shrink mascots only on the completed page */
html.dashboard-mascots,
body.dashboard-mascots{
  --mascot-size: 360px;   /* try 320–420px; default in base is 540px */
}