/* Cassette library v13 polish
   Focus: correct the vertical alignment of tape titles and give the shelf tapes a
   more believable late-VHS physical look without affecting carry/eject behavior.
*/

.tape-library {
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.18)),
    repeating-linear-gradient(90deg, rgba(0,0,0,.16) 0 12px, rgba(255,255,255,.018) 12px 24px),
    linear-gradient(180deg, #462515, #2a140b 52%, #160c07 100%);
  border: 1px solid rgba(223,174,86,.18);
  box-shadow:
    inset 0 0 0 1px rgba(255,226,164,.05),
    inset 0 18px 22px rgba(255,255,255,.03),
    inset 0 -18px 26px rgba(0,0,0,.28),
    0 20px 30px rgba(0,0,0,.38);
}

.tape-library .shelf {
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0) 22%),
    linear-gradient(180deg, #8a4f28, #5e3017 42%, #271209 92%);
  box-shadow:
    inset 0 1px rgba(255,255,255,.16),
    inset 0 -2px 0 rgba(0,0,0,.42),
    0 5px 8px rgba(0,0,0,.34);
}

.tape-stack {
  gap: 9px !important;
  padding: 8px 4px 10px !important;
}

.tape-stack .vhs-tape {
  --shift: 0px !important;
  --tilt: 0deg !important;
  width: 100% !important;
  height: 62px !important;
  margin: 0 !important;
  padding: 0 8px !important;
  border: 1px solid #060606 !important;
  border-radius: 4px !important;
  overflow: hidden;
  align-items: center !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.065), transparent 18%, rgba(0,0,0,.16) 72%, rgba(0,0,0,.5) 100%),
    linear-gradient(90deg, rgba(255,255,255,.03), transparent 10% 90%, rgba(0,0,0,.48)),
    repeating-linear-gradient(0deg, #202020 0 2px, #121212 2px 5px) !important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.08),
    inset 0 -2px 2px rgba(0,0,0,.7),
    0 7px 12px rgba(0,0,0,.48) !important;
}

.tape-stack .vhs-tape::before {
  inset: 6px 8px 12px !important;
  border: 1px solid rgba(11,11,11,.92) !important;
  border-radius: 3px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 18%, rgba(0,0,0,.16) 100%),
    linear-gradient(90deg, rgba(255,255,255,.035) 0 8%, transparent 8% 92%, rgba(0,0,0,.36) 92% 100%),
    linear-gradient(180deg, #363636 0%, #1f1f1f 44%, #171717 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.03),
    inset 0 10px 12px rgba(255,255,255,.02),
    inset 0 -12px 14px rgba(0,0,0,.24),
    0 1px 1px rgba(0,0,0,.32) !important;
}

.tape-stack .vhs-tape::after {
  left: 18px !important;
  right: 18px !important;
  bottom: 4px !important;
  height: 5px !important;
  border-radius: 0 0 3px 3px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.22) 22%, rgba(0,0,0,.82) 100%) !important;
  opacity: .96 !important;
}

.tape-stack .vhs-tape .tape-index,
.tape-stack .vhs-tape .tape-format {
  align-self: center !important;
  margin-top: 0 !important;
  padding-bottom: 12px;
  color: rgba(223,214,191,.9) !important;
  text-shadow: 0 1px rgba(0,0,0,.5) !important;
  font: 800 8.3px/1 var(--mono) !important;
  letter-spacing: .08em !important;
}

.tape-stack .vhs-tape .tape-meta {
  position: relative;
  min-width: 0;
  align-self: stretch;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3px;
  margin: 7px 0 11px;
  padding: 4px 14px 4px !important;
  border: 1px solid rgba(53,36,18,.38);
  border-radius: 2px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,.12) 18%, rgba(0,0,0,.06) 100%),
    linear-gradient(90deg, rgba(0,0,0,.08), transparent 12% 88%, rgba(0,0,0,.12)),
    var(--tape-label);
  box-shadow:
    inset 0 1px rgba(255,255,255,.42),
    inset 0 -1px rgba(0,0,0,.08),
    0 1px 0 rgba(255,255,255,.08);
}

.tape-stack .vhs-tape .tape-title {
  width: 100%;
  overflow: hidden;
  color: #17120d !important;
  font: 900 clamp(8.6px, .82vw, 10.8px)/1.02 var(--ui) !important;
  letter-spacing: .06em !important;
  text-align: center;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 1px rgba(255,255,255,.22);
}

.tape-stack .vhs-tape .tape-code {
  width: 100%;
  overflow: hidden;
  color: rgba(35,24,15,.84) !important;
  font: 800 5.7px/1 var(--mono) !important;
  letter-spacing: .18em !important;
  text-align: center;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.tape-stack .vhs-tape .tape-window {
  left: 50% !important;
  bottom: 7px !important;
  width: 94px !important;
  height: 12px !important;
  transform: translateX(-50%) !important;
  border: 1px solid rgba(15,13,11,.92) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(180deg, rgba(80,80,80,.92), rgba(5,5,5,.98)) !important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.08),
    inset 0 -1px rgba(0,0,0,.28),
    0 1px 2px rgba(0,0,0,.3) !important;
}

.tape-stack .vhs-tape .tape-window::after {
  inset: 2px 30px !important;
  border-radius: 4px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(0,0,0,.16)) !important;
  opacity: .85 !important;
}

.tape-stack .vhs-tape .tape-reel {
  width: 9px !important;
  height: 9px !important;
  margin-top: -4.5px !important;
  background: radial-gradient(circle at center, #d4d4d4 0 1px, #838383 1px 2px, #0d0d0d 2px 100%) !important;
}

.tape-stack .vhs-tape .tape-edge {
  bottom: 9px !important;
  color: rgba(231,222,199,.72) !important;
  font: 800 5.6px/1 var(--mono) !important;
  letter-spacing: .15em !important;
  text-shadow: 0 1px rgba(0,0,0,.42);
}

.tape-stack .vhs-tape .tape-edge-left { left: 11px !important; }
.tape-stack .vhs-tape .tape-edge-right { right: 11px !important; }

.tape-stack .vhs-tape[data-game="golden-keep-sidescroller"] .tape-title,
.tape-stack .vhs-tape[data-game="dark-between-stations"] .tape-title,
.tape-stack .vhs-tape[data-game="prototype-os"] .tape-title {
  font-size: 8.1px !important;
  letter-spacing: .04em !important;
}

.tape-stack .vhs-tape[data-game="prototype-os"] .tape-title {
  font-size: 7.9px !important;
}

.tape-stack .vhs-tape:hover,
.tape-stack .vhs-tape:focus-visible {
  transform: translateX(-5px) translateY(-1px) !important;
  filter: brightness(1.08) !important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.1),
    inset 0 -2px 2px rgba(0,0,0,.64),
    0 10px 16px rgba(0,0,0,.54),
    0 0 0 1px rgba(220,180,88,.34) !important;
}

.tape-stack .vhs-tape.is-out .tape-title::after {
  font: 800 7px/1 var(--mono) !important;
  letter-spacing: .14em !important;
}

@media (max-width: 640px) {
  .tape-stack {
    gap: 8px !important;
    padding: 7px 2px 8px !important;
  }

  .tape-stack .vhs-tape {
    height: 60px !important;
    padding: 0 7px !important;
  }

  .tape-stack .vhs-tape .tape-title {
    font-size: 8.7px !important;
  }

  .tape-stack .vhs-tape[data-game="golden-keep-sidescroller"] .tape-title,
  .tape-stack .vhs-tape[data-game="dark-between-stations"] .tape-title,
  .tape-stack .vhs-tape[data-game="prototype-os"] .tape-title {
    font-size: 7.8px !important;
    letter-spacing: .03em !important;
  }

  .tape-stack .vhs-tape .tape-code {
    font-size: 5.3px !important;
    letter-spacing: .15em !important;
  }

  .tape-stack .vhs-tape .tape-window {
    width: 88px !important;
  }
}