@media (min-width: 1024px) {
  html, body {
    overflow: hidden;
  }
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
  background: #111;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  font-family: "Arial", sans-serif;
}

main {
    flex: 1; /* pushes footer down */
}

:root {
  --zone-top: 255, 210, 120;       /* warm amber (R,G,B) */
  --zone-left: 255, 160, 140;      /* soft coral */
  --zone-right: 150, 230, 190;     /* seafoam */
  --zone-bottom: 170, 180, 255;    /* periwinkle */
  --zone-glow-alpha: 0.35;         /* global glow opacity */
  --zone-glow-blur: 60px;         /* global glow blur radius */
  --zone-hover-border-alpha: 0.28;
}

.card-container {
  display: flex;
  width: min(30vw, 600px);
  height: 65vh;
  justify-content: center;
  align-items: center;
  transform: translateY(4%);
}

#card-stack {
  position: relative;
  perspective: 1000px;
  z-index: 10;
  transform: translateY(-10px);
}

.card-link {
    display: block;
    width: 100%;
    height: 100%;
}

/* create an isolated stacking context so overlay blending doesn't reveal other cards */
.card {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background: #000; /* fallback so nothing behind shows through */
  box-shadow: 0 10px 10px rgba(0,0,0,0.4);
  transition: transform 0.3s ease, opacity 0.3s ease;
  overflow: hidden;
  isolation: isolate;
  display: block;
}

.active-card:hover {
  transform: translateY(-4px);
}

.active-card {
  touch-action: none; /* prevent scrolling while dragging on touch devices */
}

.active-card.dragging {
    transition: none; /* cancel any CSS transitions while dragging */
}

.active-card,
.active-card * {
    cursor: grab;
    user-select: none;
}

.active-card.dragging,
.active-card.dragging * {
    cursor: grabbing;
}

.active-card img {
    -webkit-user-drag: none;
    pointer-events: none;
}

/* full-bleed image (keep the entire poster visible) */
.card-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 12px; /* 🔥 THE FIX */
}

/* translucent bottom overlay for title + optional reasons
   make it dark enough near the text so underlying cards aren't visible */
.card-overlay {
  position: absolute;
  bottom: 5px;
  left: 5px; 
  right: 5px;
  padding: 12px;
  z-index: 20;
  color: #fff;
  border-radius: 12px;
  /* darker, more readable gradient (keeps some translucency at top) */
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.98) 0%,
    rgba(0,0,0,0.92) 18%,
    rgba(0,0,0,0.8) 45%,
    rgba(0,0,0,0.45) 75%,
    rgba(0,0,0,0.18) 100%
  );
  pointer-events: none;
  backdrop-filter: blur(1px);
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

/* new layout: title left, rating right */
.card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.card-title {
  margin: 0;
  font-size: 1rem;
  line-height: 1.1;
  text-align: left;
  flex: 1 1 auto;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* rating pill */
.card-rating {
  flex: 0 0 auto;
  margin-left: 8px;
  padding: 4px 8px;
  background: rgba(255,255,255,0.06);
  color: #fff;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset;
}

/* reasons: single-line ellipsis, full text on hover via title attr */
.card-overlay .because {
  margin: 6px 0 0 0;
  font-size: 0.85rem;
  color: #ddd;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.center-cell {
  position: relative;
  z-index: 40;
  padding: 0;
  margin: 0;
}
.center-cell #card-stack {
  width: 100%;   /* fill the grid column */
  height: 100%;  /* fill the grid row */
}

button {
  background: none;
  border: 2px solid white;
  border-radius: 50%;
  color: white;
  font-size: 2rem;
  cursor: pointer;
}

.btn-disabled {
    filter: grayscale(100%);
    opacity: 0.6;
    cursor: not-allowed;
    /* keep pointer-events so hover/focus styles won't apply while visually disabled */
    pointer-events: none;
    transition: opacity 0.15s ease, filter 0.15s ease;
}

.card-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.zones-grid {
  display: grid;
  height: 65vh;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  grid-template-columns: 3fr 10fr 3fr;
  grid-template-rows: 1fr 5fr 1fr;   /* top / card / bottom */
  justify-items: center; /* center whole grid */
  align-items: center;
}

/* make each cell a full-size container so children can stretch */
.zone-cell {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: stretch;   /* let children fill vertically */
  justify-content: stretch; /* let children fill horizontally */
  padding: 0;
  margin: 0;
}

.zone {
  position: relative;
  width: 100%;
  height: 100%;
  background: none; /* remove color */
  border: 1px dashed transparent; /* dashed border, hidden by default */
  border-radius: 12px; /* fallback radius; individual zones override below */
  cursor: pointer;
  transition: border-color 150ms ease, transform 120ms ease, opacity 120ms ease;
}

.zone.active {
  transform: translateY(-4px) scale(1.2);
  opacity: 0.98;
}

.zone.active::before {
  opacity: 0.95;
  filter: blur(50px);
}

/* GLOW LAYERS */
.zone::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none; /* don't block clicks */
  filter: blur(var(--zone-glow-blur));
  opacity: var(--zone-glow-alpha);
  transition: opacity .18s ease, transform .18s ease;
  z-index: 0;
}

/* keyboard focus for accessibility */
.zone:focus {
  outline: 2px solid rgba(255,255,255,0.12);
  outline-offset: 2px;
}

#zone-top::before {
  background: radial-gradient(circle,
      rgba(var(--zone-top),0.9) 100%,
      rgba(var(--zone-top),0) 100%);
  transform: translateY(40%);
}

#zone-bottom::before {
  background: radial-gradient(circle,
      rgba(var(--zone-bottom),0.9) 100%,
      rgba(var(--zone-bottom),0) 100%);
  transform: translateY(-40%);
}

#zone-left::before {
  background: radial-gradient(circle,
      rgba(var(--zone-left),0.9) 100%,
      rgba(var(--zone-left),0) 100%);
  transform: translateX(40%);
}

#zone-right::before {
  background: radial-gradient(circle,
      rgba(var(--zone-right),0.9) 100%,
      rgba(var(--zone-right),0) 100%);
  transform: translateX(-40%);
}

/* per-zone border colors that match the glow */
#zone-top { border-radius: 100% 100% 0 0; }

#zone-bottom { border-radius: 0 0 100% 100%; }

#zone-left { border-radius: 100% 0 0 100%; }

#zone-right { border-radius: 0 100% 100% 0; }

#zone-top.active { 
  border-color: rgba(var(--zone-top),0.30); }
#zone-bottom.active{ border-color: rgba(var(--zone-bottom),0.30); }
#zone-left.active { border-color: rgba(var(--zone-left),0.30); }
#zone-right.active { border-color: rgba(var(--zone-right),0.30); }


/* keep disabled/greyed behaviour if you use the disabled attribute or btn-disabled class */
.zone[disabled],
.zone.btn-disabled {
  pointer-events: none;
  opacity: 0.45;
  background: rgba(255, 255, 255, 0.01);
  border-color: transparent !important;
  transition: none !important;
}

@media (max-width: 800px) {

  .zones-grid {
    width: 100vw;

    /* 3 columns: left zone | card | right zone */
    grid-template-columns: 18% 64% 18%;

    /* 3 rows: top zone | card | bottom zone */
    grid-template-rows: 18% 64% 18%;
  }

  #card-stack {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4; /* keeps same card shape */
  }

  .card-container {
    width: 100%;
    height: 100%;
    padding: 0;
    transform: none;
  }

  .zone.active::before {
    filter: blur(20px) !important;     /* from 50px → 20px */
  }

  .zone::before {
    filter: blur(20px) !important;     /* from your variable → safer size */
  }

  .card-overlay .because {
    font-size: 0.6rem;
  }
}

/* Small phones */
@media (max-width: 480px) {

  .zones-grid {
    grid-template-columns: 20% 60% 20%;
    grid-template-rows: 16% 68% 16%;
  }

  #card-stack {
    aspect-ratio: 1 / 2;
  }

  .card-title {
    font-size: 0.8rem;
  }
  .card-rating {
    font-size: 0.75rem;
    padding: 2px 5px;
  }

  button.zone i {
    font-size: 1.4rem;
  }
}

/* Ultra small phones (old SE, 320px screens) */
@media (max-width: 360px) {
  .zones-grid {
    grid-template-columns: 22% 56% 22%;
    grid-template-rows: 18% 64% 18%;
  }
}