:root {
  --fg-h: 340px; /* foreground height */
  --ground-baseline: var(--fg-h); /* fallback baseline, JS will update to measured pixel value */
  --duck-w: 90px;
  --duck-h: 80px;
  --duck-elev: 80px; /* how much higher than ground the duck flies */
  --dog-w: 60px;
  --dog-h: 56px;
  --dog-offset: 18px; /* visual alignment offset: increase if dog still floats, decrease if feet get cut off */
  --hud-h: 86px;
}

html, body {
  background: #000 !important;
}
#gameWrap {
  background: #000 !important;
}

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden; /* prevent page scrolling on iOS */
  background: #7fb0ff; /* neutral fallback outside gameWrap */
}

body{
  min-height: 100svh;
  font-family: Arial, sans-serif;
  user-select: none;
}

/* Keep the design wrapper unchanged (no scale added) */
#gameWrap {
  width: 390px;
  height: 844px;
  position: absolute;
  left: 50%;
  top: env(safe-area-inset-top, 0);
  transform-origin: top left;
  -webkit-transform-origin: 0 0;
  overflow: hidden;
  background: black;
  z-index: 1;
}

#gameWrap .sky {
  position: relative;
  background-image: url("/DRANKHUNT/resources/sprites/background/sky1.png");
  background-size: cover;
  background-position: center;
  min-height: 100%;
  width: 100%;
  background-color: transparent;
  background-repeat: no-repeat;
  cursor: crosshair;
}

#winOverlay{
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
}

/* Keep pixel-art crisp */
#gameWrap, #gameWrap * {
  image-rendering: pixelated;
  -webkit-font-smoothing: none;
}

/* FOREGROUND (bushes/grass) — ground reference */
.bushes{
    z-index: 2;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: var(--fg-h); /* default desktop px baseline */
    background-image: url("/DRANKHUNT/resources/sprites/background/bushes.png");
    background-size: 100% var(--fg-h);
    background-position: bottom center;
    background-repeat: repeat-x;
    image-rendering: pixelated;
}

/* DUCK: anchored relative to the ground (foreground) — original baseline restored */
.duck{
    left: 48%;
    bottom: calc(var(--ground-baseline) + var(--duck-elev)); /* baseline: top of grass + elevation */
    background-image: url("/DRANKHUNT/resources/sprites/duck/png/left1.png");
    position: absolute;
    animation-timing-function: linear;
    width: var(--duck-w);
    height: var(--duck-h);
    background-size: 100%;
}

/* DOG: anchored relative to the ground (foreground) — original baseline restored */
.dog{
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
}

#dog1{
    width: var(--dog-w);
    height: var(--dog-h);
    z-index: 3;
    left: 20px;
    bottom: calc(var(--ground-baseline, 30vh) - var(--dog-offset)); /* baseline: top of grass; apply visual offset */
    background-image: url("/DRANKHUNT/resources/sprites/dog/walk1.png");
    animation-duration: 0.7s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    content: url("/DRANKHUNT/resources/sprites/dog/walk1.png") url("/DRANKHUNT/resources/sprites/dog/sniff1.png") url("/DRANKHUNT/resources/sprites/dog/jump1.png");
}

#dog2{
    width: var(--dog-w);
    height: var(--dog-h);
    left: 180px;
    bottom: calc(var(--ground-baseline, 30vh) - var(--dog-offset)); /* baseline: top of grass; apply visual offset */
}

#pointsCounter{
    text-align: right;
    left: 28px;
    bottom: calc(var(--fg-h) - 20px);
    background-image: url("/DRANKHUNT/resources/sprites/scoreImages/round.png");
    background-size: 100% 100%;
    width: 120px;
    height: 50px;
    position: absolute;
    z-index: 3;
}

#levelCount{
    margin: 0;
    margin-right: 5%;
    margin-left: 50%;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

/* Minimal mobile adjustments only (strict, per your request):
   - Keep the original visual system (no JS scaling, no new transform: scale, no math-heavy viewport calculations).
   - Make the ground visually larger (30vh) on small screens and keep it pinned to bottom.
   - JS will measure the actual .bushes height and set --ground-baseline at runtime.
*/
@media (max-width: 499px) {
  /* Make bushes/grass exactly 30vh on small screens, pinned to bottom */
  .bushes {
    height: 30vh;
    background-size: 100% 30vh;
  }
}

/* Make the game wrap a real fixed game screen */
#gameWrap {
  position: relative;
  width: 390px;
  height: 844px;
  margin: 0 auto;
  overflow: hidden;
}

/* Ensure sky fills the wrap */
#sky.sky {
  height: 100%;
  min-height: 100%;
}