/* =========================
   BASE RESET
========================= */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

/* =========================
   PAGE BACKGROUND
========================= */
body {
  min-height: 100vh;      /* fallback */
  min-height: 100svh;     /* mobile-safe height */

  background: url("gv.gif") center / cover no-repeat;
  font-family: sans-serif;
  color: white;
  position: relative;
  overflow: hidden;
}

/* =========================
   🗿 STATUE IMAGE (DESKTOP DEFAULT)
========================= */
.statue {
  position: fixed;

  right: 12%;
  bottom: -5%;

  width: 280px;
  max-width: 40vw;

  z-index: 5;
  pointer-events: none;
}

/* =========================
   📺 FILTER OVERLAY
========================= */
:root {
  --filterGif: url("filter3.gif");
}

body::before {
  content: "";
  position: fixed;
  inset: 0;

  z-index: 10;
  background: var(--filterGif) repeat;

  opacity: 0.35;
  mix-blend-mode: screen;
  pointer-events: none;
}

/* =========================
   🔘 UI ELEMENTS
========================= */
#filterBtn {
  position: fixed;
  bottom: 10px;
  right: 10px;

  z-index: 20;
}

.image-button-todo {
  position: fixed;
  top: 15px;
  left: 15px;
  z-index: 9999 !important;
}

.image-button-todo img {
  width: 60px;
  height: auto;
}
.image-button-todo img:hover {
  filter: brightness(1.2);
  
}



/* =========================
   📱 MOBILE OVERRIDES
========================= */
@media (max-width: 768px) {

  body {
     background-position: 70% 100%;
  }

  .statue {
    right: 6%;
    bottom: -8%;

    width: clamp(200px, 60vw, 260px);
    max-width: none;
  }
  
   /* Make the back button slightly bigger on mobile */
  .image-button-todo img {
    width: 60px !important;  /* force override if needed */
  }
}