/* === Easy knobs ======================================================= */
:root{
  /* vertical lift of the footer row (increase to move UP) */
  --footer-y: 57px;                   /* adjusted to 57px (was 87px, moved down 30px) */
  /* left offset for the back button (increase to move RIGHT) */
  --back-left-x: 62px;                /* increased from 32px to 62px (+30px) */
  /* right offset for the how-to button */
  --how-to-right-x: -20px;            /* shift how-to button left from center (negative = left) */
  /* reserve space at the bottom so content never hides under buttons */
  --footer-reserve: 97px;             /* adjusted to 97px (was 127px, reduced by 30px) */
}

/* Keep page content from being obscured by the fixed controls */
#play-page {
  padding-bottom: calc(var(--footer-reserve) + env(safe-area-inset-bottom));
}

/* The footer container itself can stay, but we’ll position children explicitly */
#play-footer{
  position: relative;                 /* container for semantics only */
  height: 0;                          /* no extra flow space */
  pointer-events: none;               /* children will re-enable */
  z-index: 1000;
}

/* Back button — fixed bottom-left, using knobs */
#middle-corner-button{
  position: fixed;
  left: var(--back-left-x);
  bottom: calc(var(--footer-y) + max(0px, env(safe-area-inset-bottom)));
  pointer-events: auto;
  margin: 0;                          /* neutralize old margins */
}

/* Help button — fixed and shifted right from center */
#how-to-on-play-wrap{
  position: fixed;
  left: 50%;
  transform: translateX(calc(-50% + var(--how-to-right-x)));
  bottom: calc(var(--footer-y) + max(0px, env(safe-area-inset-bottom)));
  pointer-events: auto;
  margin: 0;
}

/* Make the HELP link look buttony even on dark backgrounds (optional) */
#how-to-on-play-wrap a,
#how-to-on-play-wrap [role="button"]{
  text-decoration: none;
}

/* Small screens: nudge up slightly if needed */
@media (max-width: 480px){
  :root{
    --footer-y: 65px;                 /* adjusted to 65px (was 95px, moved down 30px) */
    --footer-reserve: 109px;          /* adjusted to 109px (was 139px, reduced by 30px) */
  }
}