/* ================================
   Movies & Shows — "Landon's Video", a late-90s video rental store.
   Every section is a part of the store: staff picks shelf, tapes
   recorded off TV, aisles of VHS spines, reserved racks at the counter,
   a TV playing what's rented, and the night drop box.
   ================================ */

@import url('https://fonts.googleapis.com/css2?family=Neonderthaw&family=Permanent+Marker&family=VT323&display=swap');

:root {
  --store-blue: #0b2a78;
  --store-deep: #071a4a;
  --ticket: #ffd200;
  --ticket-dark: #d9a800;
  --neon-pink: #ff4fd8;
  --neon-cyan: #3ef2ff;
  --paper: #fdfcf4;
  --ink: #111;
  --shelf: #9aa9c4;
  --shelf-dark: #5d6d8c;
}

body {
  background-color: var(--store-deep);
  background-image:
    radial-gradient(rgba(255, 210, 0, 0.07) 1px, transparent 1.6px),
    radial-gradient(rgba(62, 242, 255, 0.06) 1px, transparent 1.6px);
  background-size: 22px 22px, 34px 34px;
  background-position: 0 0, 11px 17px;
  background-attachment: scroll;
  color: #fff;
}

/* ---- Nav ---- */
.site-nav { background: var(--store-blue); border-bottom: 3px solid var(--ticket); }
.site-nav-logo { color: var(--ticket); }
.site-nav-link { color: #c9d4f2; }
.site-nav-link:hover { color: #fff; }
.site-nav-link.active { color: var(--ticket); border-bottom-color: var(--ticket); }

.store { max-width: 1180px; margin: 0 auto; padding: 0 16px 3rem; }

/* styles.css doesn't set border-box globally; everything in the store
   is sized assuming padding sits inside the box. */
.store *, .store *::before, .store *::after, .rental-overlay * { box-sizing: border-box; }

/* ================================
   Storefront: brick wall, neon + lightbox sign, OPEN sign
   ================================ */
.storefront {
  position: relative;
  padding: 3rem 1rem 2.5rem;
  background-color: #2a1418;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.6)),
    repeating-linear-gradient(0deg, transparent 0 22px, rgba(0, 0, 0, 0.45) 22px 24px),
    repeating-linear-gradient(90deg, #5a2a26 0 46px, rgba(0, 0, 0, 0.45) 46px 48px);
  border-bottom: 6px solid var(--ticket);
  text-align: center;
  overflow: hidden;
}

/* Every other brick row offset */
.storefront::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0 24px, rgba(0, 0, 0, 0) 24px 48px),
    repeating-linear-gradient(90deg, transparent 0 23px, rgba(0, 0, 0, 0.35) 23px 25px, transparent 25px 48px);
  -webkit-mask: repeating-linear-gradient(0deg, transparent 0 24px, #000 24px 48px);
  mask: repeating-linear-gradient(0deg, transparent 0 24px, #000 24px 48px);
  pointer-events: none;
}

.sign { position: relative; display: inline-block; margin-top: 0.8rem; }

.sign-neon {
  display: block;
  font-family: 'Neonderthaw', cursive;
  font-size: clamp(3rem, 9vw, 5.5rem);
  line-height: 0.8;
  color: #ffe6fb;
  text-shadow: 0 0 4px #fff, 0 0 10px var(--neon-pink), 0 0 22px var(--neon-pink), 0 0 44px var(--neon-pink);
  transform: rotate(-6deg);
  margin-bottom: -0.35em;
  position: relative;
  z-index: 1;
}

.sign-box {
  display: inline-block;
  padding: 0.2rem 1.6rem 0.1rem;
  background: linear-gradient(#123a9e, var(--store-blue));
  border: 6px solid var(--ticket);
  border-radius: 10px;
  box-shadow: 0 0 0 4px #000, 0 0 40px rgba(62, 242, 255, 0.35), inset 0 0 30px rgba(255, 255, 255, 0.15);
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(4rem, 14vw, 8.5rem);
  line-height: 1;
  letter-spacing: 0.08em;
  color: var(--ticket);
  text-shadow: 4px 4px 0 #000;
}

.open-sign {
  position: absolute;
  top: 1.2rem;
  right: 1.4rem;
  padding: 0.25rem 0.8rem;
  border: 3px solid #ff3b3b;
  border-radius: 8px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.6rem;
  letter-spacing: 0.12em;
  color: #ffd9d9;
  text-shadow: 0 0 6px #ff3b3b, 0 0 16px #ff3b3b;
  box-shadow: 0 0 12px #ff3b3b, inset 0 0 12px rgba(255, 59, 59, 0.6);
  animation: flicker 6s infinite;
}

@keyframes flicker {
  0%, 18%, 22%, 62%, 64%, 100% { opacity: 1; }
  20%, 63% { opacity: 0.35; }
}

.tagline {
  margin-top: 1.4rem;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.3rem;
  letter-spacing: 0.18em;
  color: var(--neon-cyan);
  text-shadow: 0 0 8px rgba(62, 242, 255, 0.7);
}

.tagline small { font-family: 'Permanent Marker', cursive; letter-spacing: 0; font-size: 0.8rem; color: #ffd9f6; text-shadow: none; margin-left: 0.4rem; }

/* ================================
   Membership card
   ================================ */
.member-row { display: flex; justify-content: center; margin: -1.6rem 0 2.5rem; position: relative; z-index: 2; }

.member-card {
  width: min(460px, 100%);
  padding: 1rem 1.2rem 0.8rem;
  border-radius: 14px;
  background:
    linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.18) 50%, transparent 60%),
    linear-gradient(135deg, #1747c4, var(--store-blue) 60%, #06184a);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5), inset 0 0 0 2px rgba(255, 255, 255, 0.15);
  transform: rotate(-1.5deg);
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.06em;
}

.member-top { display: flex; justify-content: space-between; align-items: baseline; }
.member-top b { font-weight: 400; color: var(--ticket); font-size: 1.5rem; }
.member-top span { color: #c9d4f2; font-size: 1rem; }

.member-stripe { height: 10px; margin: 0.5rem -1.2rem 0.7rem; background: var(--ticket); }

.member-name { font-size: 1.6rem; }
.member-name small { display: block; font-size: 0.9rem; color: #c9d4f2; }

.member-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.4rem; margin: 0.7rem 0; text-align: center; }
.member-stats div { background: rgba(0, 0, 0, 0.25); border-radius: 6px; padding: 0.3rem 0.2rem; }
.member-stats b { display: block; font-weight: 400; font-size: 1.5rem; color: var(--ticket); line-height: 1; }
.member-stats span { font-size: 0.8rem; color: #c9d4f2; }

.member-bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; }
.barcode { flex: 1; max-width: 190px; height: 34px; background: repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 4px, #fff 4px 5px, transparent 5px 8px, #fff 8px 11px, transparent 11px 12px); border-radius: 2px; opacity: 0.9; }
.late-fees { font-size: 1rem; color: #c9d4f2; text-align: right; }
.late-fees b { font-weight: 400; color: #7dffa8; font-size: 1.2rem; }

/* ================================
   Aisle signs (section headers)
   ================================ */
.aisle { margin-bottom: 3.5rem; }

.aisle-sign {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  width: fit-content;
  max-width: 100%;
  margin: 2.2rem auto 0.5rem;
  padding: 0.35rem 1.4rem 0.2rem;
  background: var(--ticket);
  color: var(--store-blue);
  border: 3px solid #000;
  border-radius: 6px;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.4);
  font-family: 'Bebas Neue', sans-serif;
}

/* hanging chains */
.aisle-sign::before,
.aisle-sign::after {
  content: "";
  position: absolute;
  bottom: 100%;
  width: 3px;
  height: 2.2rem;
  background: repeating-linear-gradient(#aab 0 5px, #667 5px 8px);
}

.aisle-sign::before { left: 18%; }
.aisle-sign::after { right: 18%; }

.aisle-sign .num { font-size: 1rem; letter-spacing: 0.12em; opacity: 0.8; white-space: nowrap; }
.aisle-sign h2 { margin: 0; font-weight: 400; font-size: clamp(1.8rem, 5vw, 2.6rem); letter-spacing: 0.06em; line-height: 1; }

.aisle-note { text-align: center; color: #c9d4f2; margin: 0 0 1.4rem; font-family: 'Permanent Marker', cursive; font-size: 1rem; }

/* ================================
   Staff Picks: face-out cases + handwritten shelf-talkers
   ================================ */
.picks-label { font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.12em; color: var(--ticket); font-size: 1.3rem; margin: 1.4rem 0 0.4rem; text-align: center; }

.picks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 1.6rem 2rem;
  padding: 1.2rem 1rem 0;
  background: linear-gradient(transparent calc(100% - 14px), var(--shelf) calc(100% - 14px), var(--shelf-dark));
}

.pick { position: relative; width: 180px; cursor: pointer; padding-bottom: 14px; display: flex; flex-direction: column; }

.case-face {
  position: relative;
  padding: 6px;
  background: linear-gradient(135deg, #2a2a2a, #0d0d0d);
  border-radius: 4px;
  box-shadow: 0 8px 14px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  transition: transform 0.18s ease;
}

.case-face img { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 2px; }

/* plastic sleeve glare */
.case-face::after {
  content: "";
  position: absolute;
  inset: 6px;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.22), transparent 35%);
  pointer-events: none;
}

.pick:hover .case-face,
.pick:focus-visible .case-face { transform: translateY(-8px) rotate(-1.5deg); }
.pick:focus-visible { outline: none; }
.pick:focus-visible .case-face { box-shadow: 0 0 0 3px var(--ticket), 0 8px 14px rgba(0, 0, 0, 0.5); }


.talker {
  position: relative;
  margin: -10px 6px 0;
  padding: 0.55rem 0.6rem 0.45rem;
  background: var(--paper);
  color: #1d2a6b;
  font-family: 'Permanent Marker', cursive;
  font-size: 0.85rem;
  line-height: 1.25;
  text-align: center;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.35);
  z-index: 1;
  flex: 1;
}

.pick:nth-child(odd) .talker { transform: rotate(-2deg); }
.pick:nth-child(even) .talker { transform: rotate(1.5deg); }

.talker::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  width: 46px;
  height: 16px;
  transform: translateX(-50%) rotate(-3deg);
  background: rgba(255, 244, 170, 0.8);
}

.talker b { display: block; font-weight: 400; color: #d11; font-size: 0.8rem; }

/* ================================
   Taped Off TV: perfect episodes as home-recorded VHS
   ================================ */
.tapes-hint { text-align: center; margin: 0.9rem 0 0; font-family: 'Permanent Marker', cursive; font-size: 0.85rem; color: var(--ticket); }

/* ---- VCR deck (phones) ----
   The window shows the top of the current tape; its bottom is cut off
   right where the slot on the VCR begins, so it looks half inserted. */
.vcr { display: none; max-width: 340px; margin: 0 auto; }
.vcr[hidden] { display: none !important; }

.vcr-window {
  position: relative;
  height: 128px;
  margin: 0 7%;
  overflow: hidden;
  touch-action: pan-y;
}

.vcr-window .home-tape { position: absolute; left: 0; right: 0; top: 6px; }
.vcr-window .home-tape:hover, .vcr-window .home-tape:focus-visible { transform: translateY(-4px); }
.vcr-window .home-tape.in { animation: tapeIn 0.28s ease-out; }
.vcr-window .home-tape.out { animation: tapeOut 0.22s ease-in forwards; }

@keyframes tapeIn { from { transform: translateY(105%); } to { transform: none; } }
@keyframes tapeOut { to { transform: translateY(105%); } }

.vcr-body {
  position: relative;
  padding: 10px 14px 10px;
  background: linear-gradient(#4a4a4a, #262626 45%, #1a1a1a);
  border-radius: 8px 8px 12px 12px;
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.vcr-slot {
  height: 16px;
  margin: 0 3% 12px;
  border-radius: 3px;
  background: linear-gradient(#000, #111 60%, #2a2a2a);
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.9), 0 1px 0 rgba(255, 255, 255, 0.12);
}

.vcr-panel { display: flex; align-items: center; gap: 12px; }

.vcr-display {
  flex: 1;
  padding: 6px 10px 4px;
  background: #061006;
  border-radius: 4px;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.9);
  color: #3cff3c;
  text-shadow: 0 0 6px rgba(60, 255, 60, 0.6);
  font-family: 'VT323', monospace;
  font-size: 1.35rem;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.vcr-buttons { display: flex; gap: 6px; }

.vcr-btn {
  width: 42px;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: linear-gradient(#d9d9d9, #9a9a9a);
  box-shadow: 0 3px 0 #555, inset 0 1px 0 #fff;
  color: #222;
  font-size: 1rem;
  cursor: pointer;
}

.vcr-btn.play { background: linear-gradient(var(--ticket), var(--ticket-dark)); }
.vcr-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #555, inset 0 1px 0 #fff; }
.vcr-btn:focus-visible { outline: 2px solid var(--ticket); outline-offset: 2px; }

.vcr-brand {
  display: flex;
  justify-content: space-between;
  margin-top: 9px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  color: #9a9a9a;
}

.tapes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1.4rem;
}

.home-tape {
  position: relative;
  aspect-ratio: 187 / 102;
  padding: 4% 5% 0;
  background: linear-gradient(#232323, #0e0e0e);
  border-radius: 6px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: transform 0.18s ease;
  text-align: left;
  border: none;
  color: inherit;
  font: inherit;
  width: 100%;
}

.home-tape:hover,
.home-tape:focus-visible { transform: translateY(-4px) rotate(-1deg); outline: none; }
.home-tape:focus-visible { box-shadow: 0 0 0 3px var(--ticket); }

/* Positioned against the tape's own box (not padding %, which is
   relative to width) so it can never slide down into the reels. */
.tape-label {
  position: absolute;
  top: 7%;
  left: 5%;
  right: 5%;
  height: 50%;
  padding: 0.35rem 3.4rem 0.35rem 0.6rem;
  background: var(--paper);
  background-image: repeating-linear-gradient(transparent 0 17px, rgba(40, 80, 200, 0.18) 17px 18px);
  border-radius: 2px;
  color: #1a1a1a;
  font-family: 'Permanent Marker', cursive;
  overflow: hidden;
}

.tape-label .show { font-size: 1.05rem; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tape-label .ep { font-size: 0.78rem; color: #1d3fae; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tape-label .taped { margin-top: 0.1rem; font-size: 0.72rem; color: #555; transform: rotate(-1.5deg); transform-origin: left; }
.tape-label .dont { position: absolute; right: 0.45rem; top: 0.45rem; width: 2.8rem; text-align: center; line-height: 1.1; font-size: 0.7rem; color: #d11; transform: rotate(-4deg); }

/* reel window */
.reels {
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: 8%;
  height: 28%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6%;
  background: #3a3a3a;
  border-radius: 999px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.8);
}

.reels i {
  width: 26%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #111 0 22%, transparent 23%), repeating-conic-gradient(#eee 0 20deg, #bbb 20deg 60deg);
}

.home-tape:hover .reels i { animation: spin 1.2s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ================================
   The aisles: VHS spines on metal shelves
   ================================ */
.aisle-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1.6rem;
}

.aisle-tab {
  padding: 0.35rem 1.2rem 0.2rem;
  background: var(--store-blue);
  color: #c9d4f2;
  border: 3px solid #000;
  border-radius: 6px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.4rem;
  letter-spacing: 0.08em;
  cursor: pointer;
}

.aisle-tab.active { background: var(--ticket); color: var(--store-blue); }

.search-clerk {
  flex: 1 1 220px;
  max-width: 320px;
  padding: 0.55rem 0.8rem;
  border: 3px solid #000;
  border-radius: 6px;
  background: var(--paper);
  color: #111;
  font-family: 'VT323', monospace;
  font-size: 1.25rem;
}

.shelf-count { width: 100%; text-align: center; color: #c9d4f2; font-family: 'VT323', monospace; font-size: 1.15rem; }

/* One grid row per shelf: tapes stand 12px above each row's bottom
   edge, where the repeating gradient paints the metal ledge. */
.shelves {
  --row: 280px;
  display: grid;
  grid-template-columns: repeat(auto-fill, 54px);
  grid-auto-rows: var(--row);
  column-gap: 5px;
  justify-content: center;
  align-items: end;
  padding: 0 12px;
  background:
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--row) - 14px), var(--shelf) calc(var(--row) - 14px) calc(var(--row) - 4px), var(--shelf-dark) calc(var(--row) - 4px) var(--row)),
    linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25));
  border-left: 8px solid var(--shelf-dark);
  border-right: 8px solid var(--shelf-dark);
}

.tape {
  position: relative;
  width: 54px;
  height: 250px;
  margin-bottom: 14px;
  padding: 0;
  border: 2px solid #000;
  border-radius: 3px;
  overflow: hidden;
  background: #111;
  cursor: pointer;
  transition: transform 0.16s ease;
  box-shadow: inset 2px 0 0 rgba(255, 255, 255, 0.15), 2px 0 3px rgba(0, 0, 0, 0.5);
}

.tape img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.2) brightness(0.75); }

.tape::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.55), transparent 30%, transparent 70%, rgba(0, 0, 0, 0.55));
}

.tape-title {
  position: absolute;
  top: 38px;
  bottom: 26px;
  left: 50%;
  z-index: 1;
  transform: translateX(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  max-height: calc(100% - 64px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 4px 3px;
  background: rgba(0, 0, 0, 0.7);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  color: #fff;
}

.tape-rating {
  position: absolute;
  top: 5px;
  left: 50%;
  z-index: 1;
  transform: translateX(-50%);
  width: 42px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ticket);
  color: #000;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.tape-rating.low { background: #ff5a5a; color: #fff; }

.tape-year {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 3px 0 2px;
  background: var(--store-blue);
  color: var(--ticket);
  text-align: center;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
}

.tape:hover,
.tape:focus-visible { transform: translateY(-18px); outline: none; }
.tape:focus-visible { border-color: var(--ticket); }

.empty-shelf { grid-column: 1 / -1; align-self: center; text-align: center; font-family: 'Permanent Marker', cursive; color: #c9d4f2; }

/* ================================
   Counter: reserved racks, mystery tape, TV
   ================================ */

/* Wire rack of face-out cases, each banded "ON HOLD". The track scrolls
   sideways; ◀ ▶ page through it on desktop, phones just swipe. */
.rack {
  margin-bottom: 1.6rem;
  padding: 0.8rem 0.9rem 0;
  background:
    repeating-linear-gradient(90deg, transparent 0 38px, rgba(170, 180, 200, 0.18) 38px 40px),
    linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3));
  border: 3px solid var(--shelf-dark);
  border-radius: 8px;
}

.rack-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.7rem; }
.rack-title b { display: block; font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 1.6rem; letter-spacing: 0.08em; color: var(--ticket); line-height: 1; }
.rack-title span { font-family: 'Permanent Marker', cursive; font-size: 0.85rem; color: #c9d4f2; }
.rack-nav { display: flex; gap: 0.4rem; }

.rack-btn {
  width: 38px;
  height: 34px;
  border: 3px solid #000;
  border-radius: 6px;
  background: var(--ticket);
  color: var(--store-blue);
  font-size: 0.9rem;
  cursor: pointer;
  box-shadow: 0 3px 0 #000;
}

.rack-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #000; }

.rack-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 132px;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 0.4rem 0.2rem 1.1rem;
  /* the metal lip the cases stand on */
  background: linear-gradient(transparent calc(100% - 12px), var(--shelf) calc(100% - 12px), var(--shelf-dark));
  scrollbar-width: thin;
  scrollbar-color: var(--shelf) transparent;
}

.hold-case { scroll-snap-align: start; display: flex; flex-direction: column; gap: 0.35rem; }

.hold-cover {
  position: relative;
  aspect-ratio: 2 / 3;
  padding: 5px;
  background: linear-gradient(135deg, #2a2a2a, #0d0d0d);
  border-radius: 4px;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.hold-cover img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 2px; }
.hold-case:hover .hold-cover { transform: translateY(-5px) rotate(-1deg); }

/* no poster yet: black case, title in marker */
.hold-fallback { display: none; }
.hold-case.no-poster img { display: none; }
.hold-case.no-poster .hold-fallback {
  position: absolute;
  inset: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem;
  text-align: center;
  font-family: 'Permanent Marker', cursive;
  font-size: 1rem;
  line-height: 1.2;
  color: #fff;
  background: #151515;
}

.hold-band {
  position: absolute;
  left: -8%;
  right: -8%;
  top: 60%;
  padding: 0.2rem 0 0.1rem;
  background: var(--paper);
  color: #c0392b;
  text-align: center;
  font-family: 'Permanent Marker', cursive;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transform: rotate(-6deg);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.45);
}

.hold-tag {
  position: absolute;
  top: 9px;
  left: 9px;
  padding: 0.05rem 0.4rem 0;
  background: var(--ticket);
  color: #000;
  border-radius: 3px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.hold-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  line-height: 1.1;
  color: #e2e8f8;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* picked by the Mystery Tape Bin */
.hold-case.picked .hold-cover {
  transform: translateY(-6px) scale(1.04);
  box-shadow: 0 0 0 3px var(--ticket), 0 0 24px rgba(255, 210, 0, 0.8);
}

.counter-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem; margin-top: 2rem; align-items: stretch; }

/* Mystery tape bargain bin */
.bargain {
  padding: 1.2rem;
  background: #c0392b;
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.07) 0 12px, transparent 12px 24px);
  border: 4px solid #000;
  border-radius: 8px;
  text-align: center;
}

.bargain h3 { margin: 0 0 0.2rem; font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 2rem; letter-spacing: 0.06em; color: var(--ticket); text-shadow: 3px 3px 0 #000; }
.bargain p { margin: 0 0 1rem; font-family: 'Permanent Marker', cursive; }

.mystery {
  position: relative;
  width: min(260px, 100%);
  aspect-ratio: 187 / 102;
  margin: 0 auto 1rem;
  border-radius: 6px;
  background: #b08a5a;
  background-image: repeating-linear-gradient(100deg, rgba(0, 0, 0, 0.06) 0 3px, transparent 3px 9px);
  box-shadow: 0 8px 14px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  color: #2a1a08;
  font-family: 'Permanent Marker', cursive;
  font-size: 1.1rem;
  line-height: 1.2;
}

.mystery::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 30%;
  width: 18px;
  background: rgba(230, 210, 150, 0.6);
}

.mystery span { position: relative; }

/* Once picked: the poster sits on the unwrapped tape beside the title */
.mystery.revealed { justify-content: flex-start; gap: 0.8rem; padding: 0.6rem; text-align: left; }
.mystery.revealed::before { display: none; }
.mystery-poster {
  position: relative;
  height: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border: 3px solid #111;
  border-radius: 2px;
  box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.45);
  transform: rotate(-3deg);
  flex: none;
}
.mystery .q { font-size: 3rem; }
.mystery.shake { animation: shake 0.5s ease; }

@keyframes shake {
  0%, 100% { transform: none; }
  20% { transform: rotate(-6deg) translateY(-6px); }
  40% { transform: rotate(5deg); }
  60% { transform: rotate(-4deg) translateY(-3px); }
  80% { transform: rotate(2deg); }
}

.store-btn {
  padding: 0.5rem 1.2rem 0.35rem;
  background: var(--ticket);
  color: var(--store-blue);
  border: 3px solid #000;
  border-radius: 6px;
  box-shadow: 0 4px 0 #000;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.4rem;
  letter-spacing: 0.06em;
  cursor: pointer;
}

.store-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #000; }

/* The TV playing what's currently rented */
.tv {
  padding: 1.1rem 1.1rem 1.6rem;
  background: linear-gradient(#4a4a4a, #2a2a2a);
  border-radius: 18px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5), inset 0 2px 0 rgba(255, 255, 255, 0.12);
  position: relative;
}

.tv::after {
  content: "";
  position: absolute;
  right: 1.4rem;
  bottom: 0.45rem;
  width: 44px;
  height: 7px;
  border-radius: 4px;
  background: repeating-linear-gradient(90deg, #111 0 4px, #555 4px 6px);
}

.tv-screen {
  position: relative;
  min-height: 230px;
  padding: 0.9rem 1rem;
  border-radius: 14px / 20px;
  background: radial-gradient(ellipse at center, #2442e0, #13249a 80%);
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.6);
  font-family: 'VT323', monospace;
  font-size: 1.35rem;
  color: #fff;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.tv-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(transparent 0 2px, rgba(0, 0, 0, 0.18) 2px 3px);
  pointer-events: none;
}

.osd-top { display: flex; justify-content: space-between; }

.osd-play { animation: blink 1.2s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.tv-screen h3 { margin: 0.6rem 0 0.3rem; font-weight: 400; font-size: 1.1rem; color: #b9c6ff; }
.tv-screen ul { list-style: none; margin: 0; padding: 0; }
.tv-screen li::before { content: "▶ "; color: var(--ticket); }
.osd-bottom { position: absolute; left: 1rem; right: 1rem; bottom: 0.7rem; display: flex; justify-content: space-between; }

/* ================================
   Night drop (recommendation form)
   ================================ */
.drop-box {
  max-width: 720px;
  margin: 0 auto;
  padding: 1.4rem;
  background: linear-gradient(#8b95a8, #5f6a80);
  border: 4px solid #000;
  border-radius: 10px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}

.drop-slot {
  margin: 0 auto 1.2rem;
  width: 70%;
  height: 22px;
  border-radius: 6px;
  background: #0b0b0b;
  box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.9), 0 2px 0 rgba(255, 255, 255, 0.3);
}

.drop-plate {
  text-align: center;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.6rem;
  letter-spacing: 0.1em;
  color: #111;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
  margin-bottom: 1rem;
}

/* Suggestion slip: a little carbon-copy form that slides up into the
   slot when submitted. */
.slip {
  max-width: 420px;
  margin: 0 auto;
  padding: 0.9rem 1rem 1rem;
  background: #fff7c9;
  background-image: repeating-linear-gradient(transparent 0 23px, rgba(40, 80, 200, 0.15) 23px 24px);
  color: #1a1a1a;
  border-radius: 3px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: transform 0.55s cubic-bezier(0.5, 0, 0.75, 0), opacity 0.4s ease 0.2s;
}

.slip.dropped { transform: translateY(-140px) scaleY(0.2); opacity: 0; }

.slip-head { display: flex; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; border-bottom: 2px dashed #b9a86a; padding-bottom: 0.4rem; font-family: 'VT323', monospace; font-size: 1.1rem; color: #555; }
.slip-head b { font-weight: 400; color: var(--store-blue); font-family: 'Bebas Neue', sans-serif; font-size: 1.2rem; letter-spacing: 0.08em; }

.slip label { font-family: 'Permanent Marker', cursive; font-size: 1.1rem; color: #1d3fae; }

.slip input {
  width: 100%;
  padding: 0.5rem 0.2rem;
  border: none;
  border-bottom: 2px solid #1a1a1a;
  background: transparent;
  font-family: 'Permanent Marker', cursive;
  font-size: 1.15rem;
  color: #1a1a1a;
  outline: none;
}

.slip input:focus { border-bottom-color: #d11; }
.slip input::placeholder { color: #9a8f6a; }
.slip .store-btn { align-self: center; margin-top: 0.3rem; }
.slip .store-btn[disabled] { opacity: 0.6; cursor: default; }

.slip-status { min-height: 1.4em; margin: 0.8rem 0 0; text-align: center; font-family: 'Permanent Marker', cursive; color: #111; }

.rewind {
  text-align: center;
  margin: 3rem 0 0;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.4rem;
  letter-spacing: 0.2em;
  color: var(--ticket);
}

footer { background: #000; color: #778; text-align: center; padding: 1rem; }

/* ================================
   Rental modal: an open VHS clamshell
   ================================ */
.rental-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
  background: rgba(3, 8, 30, 0.85);
}

.rental-overlay.open { display: flex; }

.clamshell {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 10px;
  width: min(900px, 100%);
  height: min(88vh, 620px);
  padding: 10px;
  background: linear-gradient(135deg, #2c2c2c, #0c0c0c);
  border-radius: 8px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
  animation: caseOpen 0.35s cubic-bezier(0.3, 1.4, 0.6, 1);
  transform-origin: left center;
}

@keyframes caseOpen {
  from { transform: perspective(900px) rotateY(-40deg) scale(0.8); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.clamshell-cover { position: relative; height: 100%; aspect-ratio: 2 / 3; border-radius: 3px; overflow: hidden; background: #000; }
.clamshell-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }

.box-back {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--paper);
  color: #1a1a1a;
  border-radius: 3px;
  overflow: hidden;
}

.box-band {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.4rem 0.8rem;
  background: var(--store-blue);
  color: var(--ticket);
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.1em;
}

.box-scroll { flex: 1; overflow: auto; padding: 0.9rem 1.1rem; }

.box-thumb { display: none; }
.box-title { margin: 0; font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 2.2rem; line-height: 1; letter-spacing: 0.03em; color: var(--store-blue); }
.box-meta { font-family: 'VT323', monospace; font-size: 1.2rem; color: #555; margin: 0.15rem 0 0.4rem; }

.box-rating { font-size: 1.15rem; margin-bottom: 0.7rem; }
.box-rating .empty { opacity: 0.35; filter: grayscale(1); }

.box-seasons { border-top: 2px dashed #bbb; border-bottom: 2px dashed #bbb; padding: 0.4rem 0; margin-bottom: 0.7rem; font-family: 'VT323', monospace; font-size: 1.2rem; }
.box-seasons div { display: flex; justify-content: space-between; gap: 1rem; }

.box-review { font-size: 1rem; line-height: 1.55; white-space: pre-line; }
.box-review.pending { color: #777; font-style: italic; }

.box-footer { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.6rem 1.1rem 0.8rem; border-top: 1px solid #ddd; }
.box-footer .barcode { height: 30px; max-width: 130px; background: repeating-linear-gradient(90deg, #111 0 2px, transparent 2px 4px, #111 4px 5px, transparent 5px 8px, #111 8px 11px, transparent 11px 12px); opacity: 1; }

.returned-stamp {
  padding: 0.15rem 0.5rem;
  border: 3px solid #c0392b;
  border-radius: 4px;
  color: #c0392b;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  transform: rotate(-5deg);
}

/* Closing folds the case shut; swapping titles fades its contents */
.clamshell.closing { animation: caseClose 0.22s ease-in forwards; }

@keyframes caseClose {
  to { transform: perspective(900px) rotateY(-40deg) scale(0.8); opacity: 0; }
}

.clamshell > .clamshell-cover,
.clamshell > .box-back { transition: opacity 0.16s ease, transform 0.16s ease; }

.clamshell.swapping > .clamshell-cover,
.clamshell.swapping > .box-back { opacity: 0; transform: translateX(-10px); }

/* "Customers who rented this also rented" */
.also { margin-top: 1.2rem; padding-top: 0.8rem; border-top: 2px dashed #bbb; }
.also-head { font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.08em; color: var(--store-blue); font-size: 1.05rem; margin-bottom: 0.5rem; }
.also-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.7rem; }

.also-item {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
  color: #1a1a1a;
  font: inherit;
}

.also-item img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border: 3px solid #111;
  border-radius: 2px;
  transition: transform 0.15s ease;
}

.also-item span { font-size: 0.8rem; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.also-item:hover img, .also-item:focus-visible img { transform: translateY(-4px) rotate(-2deg); }
.also-item:focus-visible { outline: none; }
.also-item:focus-visible img { border-color: var(--ticket); }

.rental-close {
  position: absolute;
  top: -14px;
  right: -14px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid #000;
  background: var(--ticket);
  color: #000;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .open-sign, .osd-play, .home-tape:hover .reels i { animation: none; }
  .slip { transition: none; }
  .clamshell.closing { animation: none; }
  .hold-cover { transition: none; }
  .vcr-window .home-tape.in, .vcr-window .home-tape.out { animation: none; }
  .clamshell { animation: none; }
}

/* ================================
   Phones
   ================================ */
@media (max-width: 700px) {
  .storefront { padding: 3.4rem 0.5rem 2.4rem; }
  .open-sign { top: 0.7rem; right: 0.7rem; font-size: 1.2rem; }
  .tagline { font-size: 1rem; letter-spacing: 0.1em; }
  .tagline small { display: block; margin: 0.2rem 0 0; }

  .member-stats { grid-template-columns: repeat(3, 1fr); }
  .member-stats div:nth-child(n+4) { display: none; }

  .aisle-sign { padding: 0.3rem 0.9rem 0.15rem; gap: 0.6rem; }
  .aisle-sign .num { font-size: 0.85rem; }

  .picks { gap: 1.4rem 1rem; padding: 1rem 0.5rem 0; }
  .pick { width: calc(50% - 0.5rem); }

  .shelves { --row: 240px; grid-template-columns: repeat(auto-fill, 44px); column-gap: 4px; padding: 0 6px; border-width: 5px; }
  .tape { width: 44px; height: 212px; }
  .tape-rating { width: 36px; height: 22px; font-size: 0.85rem; }
  .tape-title { font-size: 0.95rem; top: 32px; }

  /* Taped Off TV: the VCR replaces the grid */
  .tapes { display: none; }
  .vcr { display: block; }

  .counter, .counter-row { grid-template-columns: minmax(0, 1fr); }
  .rack { padding: 0.7rem 0.6rem 0; }
  .rack-nav { display: none; }
  .rack-track { grid-auto-columns: 38%; gap: 0.8rem; }
  .hold-band { font-size: 0.7rem; }

  /* Phones: no big cover panel; a small thumbnail sits beside the
     title like the back of a VHS box, and the × is pinned to the
     screen corner so the case's scrolling can't clip it. */
  .rental-overlay { padding: 0.6rem; }
  .clamshell { grid-template-columns: 1fr; grid-template-rows: auto; height: auto; max-height: 88vh; padding: 6px; overflow: auto; }
  .clamshell-cover { display: none; }
  .box-scroll { overflow: visible; padding: 0.8rem 0.9rem; }
  .box-thumb { display: block; float: left; width: 84px; aspect-ratio: 2 / 3; object-fit: cover; margin: 0.15rem 0.8rem 0.5rem 0; border: 3px solid #111; border-radius: 2px; }
  .box-title { font-size: 1.7rem; }
  .box-rating { font-size: 1rem; }
  .box-seasons, .box-review, .also { clear: both; }
  .rental-close { position: fixed; top: 10px; right: 10px; }
  .drop-box { padding: 1rem 0.7rem; }
}