/* ===== utilities ================================= */
.hidden { display: none !important }       /* anything with this class is invisible */

/* put all absolute overlays *inside* .slot-container in their own layer */
.slot-container { position: relative; }   /* you already have this line */

/* ------------- overall machine wrapper --------------- */
#machine {
  width: 90vw;          /* 90 % of viewport width         */
  max-width: 600px;     /* never grow bigger than desktop */
  margin: 40px auto 0;  /* top margin then auto-center    */
  position: relative;   /* establishes local coord system */
}

body {
    background-color: rgb(255,170,195);
}

/* --- slot shell --- */
.slot img {
    width: 100%;            
    height: 100%;           
    object-fit: contain;    /* keep aspect ratio */
    object-position: center;
    image-rendering: pixelated; /* to stop blur */
  }

  body {
    background-color: rgb(255, 170, 195); /* cute pink */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;        /* full height */
    margin: 0;            /* removing spacing */
  }
  
  /* Wrapper that holds the image; width sets how big it appears */
  .slot-container {
    width: 100%;
    position: relative;  
  }
  
  /* Makeing the shell fill the width while keeping the aspect ratio */
  .slot-shell {
    width: 100%;
    height: auto;
    image-rendering: pixelated; 
    display: block;           /* removes the tiny gap under the img */
  }

  /* --- Spin button --- */
#spin-button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  position: absolute;   
  bottom: 13%;
  left: 50%;
  transform: translateX(-50%); 
}

#spin-button img {
  width: 220px;        
  image-rendering: pixelated;  /* keep crisp edges */
}

/* -------- reel grid -------- */
#reels {
  position: absolute;
  top: 28%;   /* distance from top of cabinet to grid (tweak) */
  left: 14.5%;  /* distance from left side to grid (tweak)      */
  width: 70%; /* grid window width                            */
  aspect-ratio: 5 / 4;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: 1fr;
  overflow: hidden;
}

.cell img {
  width: 80%;
  height: 80%;
  image-rendering: pixelated;
}

/* -------- individual grid square -------- */
.cell {
  display: flex;            /* enables flex alignment                      */
  align-items: center;      /* vertically center the child <img>           */
  justify-content: center;  /* horizontally center the child <img>         */
  overflow: hidden;         /* hides the small overflow during spin shift  */
}

.cell img {
  width: 100%;          /* leaves ~6 % padding on every side (88 + 6 + 6 ≈ 100) */
  height: auto;        /* keep aspect - ratio                                 */
  image-rendering: pixelated;
}
.cell img {
  /* existing lines … */
  margin-top: 1%;   /* positive = nudges DOWN, negative = UP */
}
/* ===== win overlay (covers the cabinet) =========== */
#win-overlay {
  position: absolute;   /* pinned to .slot-container */
  inset: 0;             /* top:0; right:0; bottom:0; left:0 */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;        /* above everything else */
}

/* the YOU-WIN pixel panel itself */
#win-img {
  width: 100%;          /* scales with cabinet */
  max-width: px;
  height: auto;
  image-rendering: pixelated;
}

/* Thanks button sits at bottom-center of the panel */
#thanks-btn {
  position: absolute;
  bottom: 32%;          /* tweak until it sits on the panel */
  left: 38%;
  transform: translateX(-50%);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

#thanks-img {
  width: 400%;          /* tweak until looks good */
  height: auto;
  image-rendering: pixelated;
}