/* ===== INDEX: card stack ===== */
html,body{max-width:100vw;overflow:hidden}

/* prevent mobile rubber-band scrolling */
html{
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  overflow:hidden;
}
body{
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  overflow:hidden;
  width:100%;height:100%;
}

.stack-wrap{
  position:absolute;top:50%;left:50%;
  transform:translate(calc(-50% - 22px), calc(-50% - 28px));
  width:min(460px, 85vw);height:min(300px, 50vw);
  overflow:visible;
}
.card{
  position:absolute;width:100%;height:100%;
  border:3px solid #000;background:#fff;
  cursor:pointer;
  overflow:hidden;
  user-select:none;
}

/* layer 1 — fallback text */
.card-fallback{
  position:absolute;inset:0;z-index:1;
  display:flex;align-items:center;justify-content:center;
  background:#fff;color:#000;
  font-size:22px;letter-spacing:2px;text-transform:uppercase;
}
.card.lowercase .card-fallback{
  text-transform:none;
}

/* layer 2 — image */
.card-image{
  position:absolute;inset:0;z-index:2;
  width:100%;height:100%;
  object-fit:cover;
  border:none;outline:none;
}

@media(max-width:768px){
  .stack-wrap{
    width:80vw;max-width:380px;
    height:46vw;max-height:240px;
    /* shift left + up: keep right edge within screen */
    transform:translate(calc(-50% - 12px), calc(-50% - 28px));
  }
  .card-fallback{font-size:16px;letter-spacing:1px}
  .card{border-width:2px}
}