/* The Entertainment room's furniture — the DVD case, the shelf it stands on,
   and the ticket that names the room. Shared by entertainment.html (the store
   front) and entertainment-library.html (the whole catalogue), because a case
   drawn two different ways in one room is two cases.

   Hard rule 3 forbids flattening the SITE into one stylesheet. This is one
   ROOM's furniture, the same way assets/climbing/climbing.css is the climbing room's.

   The tokens it expects from the page: --bg --panel --raised --line --line-hi
   --ink --dim --gold --gold-dk --ease --sans --mono, plus --case-w --case-h
   --front-w for the case itself. */

/* ── the ticket ──
   The room's sign is a slightly worn picture-house ticket rather than a gold
   button: printed border, paper grain, numbered stub, side punches and a
   shallow curl where it has been sitting on the counter. */
.ticket {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 66px;
  padding: 11px 18px 11px 15px;
  border: 1px solid rgba(92,62,0,0.72);
  border-radius: 6px;
  background:
    radial-gradient(circle at 1px 1px, rgba(91,59,0,0.14) 0 0.7px, transparent 0.9px) 0 0 / 5px 5px,
    linear-gradient(103deg, transparent 0 57%, rgba(255,255,255,0.23) 64%, transparent 72%),
    linear-gradient(160deg, #ffe477 0%, #f5c518 40%, #dca907 78%, #bd8c03 100%);
  color: #1a1204;
  text-decoration: none;
  transform: perspective(700px) rotateX(9deg) rotateZ(-1.25deg);
  transform-origin: 50% 100%;
  box-shadow:
    0 0 0 2px rgba(255,239,159,0.58) inset,
    0 0 0 4px rgba(74,46,0,0.24) inset,
    0 1px 0 rgba(255,255,255,0.72) inset,
    0 -3px 2px rgba(101,68,0,0.38) inset,
    0 12px 24px rgba(0,0,0,0.58),
    0 3px 0 #8d6802;
  transition: transform 0.28s cubic-bezier(0.22,0.72,0.2,1),
              box-shadow 0.28s var(--ease), filter 0.28s var(--ease);
}
.ticket:hover {
  transform: perspective(700px) rotateX(3deg) rotateZ(-0.45deg) translateY(-4px) scale(1.012);
  filter: saturate(1.04) brightness(1.025);
  box-shadow:
    0 0 0 2px rgba(255,244,186,0.66) inset,
    0 0 0 4px rgba(74,46,0,0.22) inset,
    0 1px 0 rgba(255,255,255,0.78) inset,
    0 -3px 2px rgba(101,68,0,0.34) inset,
    0 18px 32px rgba(0,0,0,0.64),
    0 2px 0 #8d6802;
}
.ticket:focus-visible {
  outline: 2px solid #fff4ba;
  outline-offset: 4px;
}
/* the two punched notches */
.ticket::before, .ticket::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 13px; height: 13px;
  margin-top: -6.5px;
  border-radius: 50%;
  background: var(--bg);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.35) inset;
}
.ticket::before { left: -7px; }
.ticket::after { right: -7px; }

.ticket .stub {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 40px;
  padding-right: 12px;
  border-right: 1px dashed rgba(26,18,4,0.62);
  font: 800 0.58rem/1 var(--mono);
  letter-spacing: 0.14em;
  text-align: center;
  text-shadow: 0 1px rgba(255,255,255,0.26);
}
.ticket .stub::after {
  content: "No. 019";
  position: absolute;
  right: -6px;
  bottom: -7px;
  padding: 0 2px;
  background: #e7b20d;
  font: 700 0.42rem/1 var(--mono);
  letter-spacing: 0.06em;
  opacity: 0.72;
}
.ticket .stub svg {
  display: block;
  width: 17px;
  height: 17px;
  padding: 3px;
  border: 1px solid rgba(26,18,4,0.55);
  border-radius: 50%;
}
.ticket .words {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.05;
}
.ticket .words b {
  font: 800 1.08rem/0.96 var(--display, var(--sans));
  letter-spacing: -0.015em;
  text-shadow: 0 1px rgba(255,255,255,0.3);
}
.ticket .words span {
  font: 700 0.6rem/1 var(--mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.72;
  margin-top: 3px;
}
.ticket .words::after {
  content: "PICTURE HOUSE  ·  SCREEN 01";
  margin-top: 6px;
  padding-top: 4px;
  border-top: 1px solid rgba(26,18,4,0.24);
  font: 700 0.43rem/1 var(--mono);
  letter-spacing: 0.08em;
  white-space: nowrap;
  opacity: 0.64;
}
@media (max-width: 520px) {
  .ticket { min-height: 60px; padding: 9px 12px 9px 10px; gap: 8px; }
  .ticket .words b { font-size: 0.9rem; }
  .ticket .stub { min-width: 34px; font-size: 0.5rem; padding-right: 8px; }
  .ticket .stub::after, .ticket .words::after { display: none; }
}

/* ── THE VIDEO STORE ──────────────────────────────────────────────────
   The room is a shelf of DVDs, because that is how anybody has ever
   actually chosen a film: you walk along a wall of spines, something
   catches you, you pull it out and turn it over.

   A case is a real box in 3D, not a picture of one. The spine faces out
   — that is all you see on a full shelf — and the front cover is hinged
   to the spine's right edge, folded back at 90° where it is invisible
   edge-on. Pulling the case out rotates the whole box about that hinge,
   so the cover swings round to face you and the spine narrows to a
   sliver, exactly as it does in your hand.

   Hover does it on a mouse. On a touch screen there is no hover, so the
   first tap pulls the case out and the second opens it — which is also
   what you do with a real one. */
.store {
  /* the wall behind the shelves */
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(245,197,24,0.07), transparent 60%),
    linear-gradient(#131313, #0d0d0d);
  padding: 8px 0 60px;
}

.shelf { margin: 0 0 6px; }
.shelf-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  padding: 26px 20px 0;
}
.shelf-head h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.shelf-head .n {
  font: 600 0.72rem/1 var(--mono);
  color: var(--dim);
  letter-spacing: 0.06em;
}
.shelf-head .all {
  margin-left: auto;
  font: 700 0.75rem/1 var(--sans);
  color: var(--dim);
  text-decoration: none;
  white-space: nowrap;
}
.shelf-head .all:hover { color: var(--gold); }

.rack-wrap { position: relative; }
.rack {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  /* Headroom, and it has to be real padding rather than overflow. A box with
     overflow-x: auto and overflow-y: visible is not a thing CSS will do — the
     `visible` is silently promoted to `auto`, which is how these shelves ended
     up scrollable UP AND DOWN by the exact height a pulled case sticks out.
     Clip the vertical axis and pad instead of overflowing it. */
  padding: 74px 20px 0;
  overflow-x: auto;
  /* `clip` rather than `hidden`: hidden makes the box a scroll container that
     script can still scroll, clip simply does not scroll at all. */
  overflow-y: clip;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 20px;
  scroll-behavior: smooth;
  scrollbar-width: none;
  perspective: 1500px;
  perspective-origin: 50% 28%;
}
.rack::-webkit-scrollbar { display: none; }
.case {
  flex: 0 0 auto;
  /* each case its own thickness, seeded off the film — a shelf where every
     box is identical is the tell that it is not a shelf */
  width: var(--t, var(--case-w));
  height: calc(var(--case-h) + var(--dh, 0px));
  position: relative;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  transform-style: preserve-3d;
  font: inherit;
  color: inherit;
}
/* Transparent to every layout below it: same box as the case, and it must
   preserve 3D or wrapping the box in it would flatten the whole thing.

   It also takes no pointer events, and that is not a detail. Once a case is
   pulled out, its artwork is drawn hundreds of pixels from the slot it came
   from — right on top of other cases' slots. If that artwork is hoverable it
   holds its OWN case open while the cursor has long since moved on, and it
   steals the hover from whatever it is covering: two cases open at once and
   one of them apparently stuck. Only the case's own stationary box decides
   what is being pointed at. */
.lift {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  pointer-events: none;
  /* Returning a case happens in reverse: the cover closes first, then the
     case settles into its slot. The delay here is the second half of that
     small piece of choreography. */
  transition: transform 0.32s cubic-bezier(0.3,0.72,0.22,1) 0.10s;
}
/* decoration, never a target */
.under { pointer-events: none; }
.box {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform-origin: right center;
  transform: rotate(var(--lean, 0deg));   /* a used shelf leans */
  /* Out slower than back. A pull wants weight; a release wants to be over —
     matching the two durations is the commonest way motion feels wooden. */
  transition: transform 0.34s cubic-bezier(0.3, 0.7, 0.2, 1);
}
.face {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  overflow: hidden;
  backface-visibility: hidden;
  /* Nudge each face onto its own layer so a turn composites instead of
     repainting. NOT will-change: three hundred cases each demanding a
     permanent layer is how a page runs out of memory and stutters — this
     costs nothing until something actually moves. */
  transform-style: preserve-3d;
}
/* Off-screen cases keep their slot and drop their box. The case sets its own
   width and height and .lift and .under are absolutely positioned inside it,
   so nothing on the shelf moves when a case comes near and fills in. The
   contact shadow goes too: it overlaps the 3D box, so it is a layer of its
   own on every case. See NEAR in the core. */
.case.far .lift, .case.far .under { display: none; }

/* Only the one being pointed at is promoted, and only while it moves. */
.case:hover .box, .case.out .box, .case:focus-visible .box { will-change: transform; }

/* ── the spine: what faces you on a full shelf ── */
.spine {
  width: 100%;
  border-radius: 2px 3px 3px 2px;
  background: linear-gradient(90deg,
              #050505 0 1px,
              rgba(0,0,0,0.48) 2px 12%,
              rgba(255,255,255,0.1) 40%,
              rgba(0,0,0,0.4) 86%,
              #030303 100%),
              var(--tint, #1d1d1d);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.09),
    inset 2px 0 2px rgba(0,0,0,0.7),
    inset -2px 0 2px rgba(0,0,0,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
}
.spine-art {
  position: absolute;
  inset: 3px 2px 4px;
  background-size: cover;
  background-position: 50% 40%;
  opacity: 0.7;
  filter: saturate(1.18) contrast(1.08) brightness(0.88);
}
/* Raised polypropylene lips and hinge knuckles. The tiny horizontal breaks are
   the giveaway on a real moulded case; a printed rectangle never has them. */
.spine::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  background:
    linear-gradient(to bottom,
      rgba(255,255,255,0.2) 0 1px, #101010 1px 3px,
      transparent 3px calc(100% - 4px),
      #080808 calc(100% - 4px) calc(100% - 1px),
      rgba(255,255,255,0.09) calc(100% - 1px)),
    linear-gradient(to bottom,
      transparent 0 12%, rgba(0,0,0,0.8) 12% 16%,
      rgba(255,255,255,0.1) 16% 17%, transparent 17% 82%,
      rgba(255,255,255,0.09) 82% 83%, rgba(0,0,0,0.82) 83% 87%,
      transparent 87%);
  box-shadow: inset 2px 0 0 rgba(255,255,255,0.06),
              inset -2px 0 0 rgba(0,0,0,0.7);
  pointer-events: none;
}
/* the clear sheath: one hard specular line at the hinge, one soft wash */
.spine::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.28) 0 1px, transparent 2px),
    linear-gradient(90deg, transparent 44%, rgba(255,255,255,0.13) 64%, transparent 88%);
  pointer-events: none;
}
.spine-txt {
  position: relative;
  z-index: 2;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  max-height: calc(100% - 34px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 700 0.78rem/1 var(--display, var(--sans));
  letter-spacing: 0.03em;
  text-shadow: 0 1px 3px rgba(0,0,0,0.95), 0 0 10px rgba(0,0,0,0.8);
  color: #fff;
}
.spine-foot {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 9px;
  background: linear-gradient(90deg, #050505, #252525 45%, #080808);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16),
              inset 0 -2px 0 rgba(0,0,0,0.72);
  z-index: 2;
}

/* ── the printed front, hinged on the spine's right edge ── */
.front {
  width: var(--front-w);
  left: 100%;
  transform-origin: left center;
  transform: rotateY(90deg);
  background: #080808;
  /* the hinge edge is square, the opening edge is moulded round */
  border-radius: 1px 6px 6px 1px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}
.front img {
  position: absolute;
  inset: 3px 4px 4px 3px;
  width: calc(100% - 7px);
  height: calc(100% - 7px);
  object-fit: cover;
  display: block;
  border-radius: 1px 3px 3px 1px;
}
.front .noart {
  position: absolute;
  inset: 3px 4px 4px 3px;
  display: flex;
  align-items: flex-end;
  padding: 12px;
  font: 800 1rem/1.15 var(--sans);
  border-radius: 1px 3px 3px 1px;
  background: linear-gradient(160deg, rgba(255,255,255,0.06), rgba(0,0,0,0.3)), var(--tint, #1a1a1a);
}
/* The black case is outside the printed wrap. These rails and the two shallow
   latch dents on the opening side stop the front reading like a floating jpeg. */
.front::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  box-shadow:
    inset 0 3px 0 rgba(4,4,4,0.92),
    inset 0 -4px 0 rgba(2,2,2,0.94),
    inset -4px 0 0 rgba(3,3,3,0.94),
    inset 3px 0 0 rgba(8,8,8,0.82),
    inset 0 0 0 1px rgba(255,255,255,0.12);
  background:
    radial-gradient(7px 18px at calc(100% - 1px) 31%, rgba(255,255,255,0.1), transparent 58%),
    radial-gradient(7px 18px at calc(100% - 1px) 69%, rgba(255,255,255,0.08), transparent 58%);
  pointer-events: none;
}
/* A clear PVC sleeve sits over the paper insert: a fine lit seam around the
   wrap and a soft reflection that follows the cover rather than the artwork. */
.front::after {
  content: "";
  position: absolute;
  inset: 3px 4px 4px 3px;
  z-index: 3;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 1px 3px 3px 1px;
  background:
    linear-gradient(112deg, rgba(255,255,255,0.1), transparent 15% 69%, rgba(255,255,255,0.05) 80%, transparent),
    linear-gradient(to bottom, rgba(255,255,255,0.07), transparent 8% 92%, rgba(255,255,255,0.035));
  box-shadow: inset 1px 0 0 rgba(255,255,255,0.08);
  pointer-events: none;
}
/* where the wrap folds round the hinge — a real case creases there */
.crease {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 9px;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(90deg,
              rgba(0,0,0,0.55) 0, rgba(0,0,0,0.16) 55%,
              rgba(255,255,255,0.05) 85%, transparent);
}
/* the sheen on the plastic over the cover, seen only once it is turned */
.gloss {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.55s var(--ease);
  background:
    linear-gradient(103deg,
      transparent 30%, rgba(255,255,255,0.16) 42%,
      rgba(255,255,255,0.055) 49%, transparent 60%),
    linear-gradient(88deg, transparent 0 84%, rgba(255,255,255,0.08) 92%, transparent);
}

/* ── the reverse of the wrap ──
   Without a back face you see straight through the case as it turns. */
.back {
  width: var(--front-w);
  left: 0;
  transform-origin: left center;
  transform: rotateY(90deg);
  background: #080808;
  border-radius: 5px 1px 1px 5px;
  box-shadow: inset 0 0 0 3px #070707,
              inset 0 0 0 4px rgba(255,255,255,0.08);
}
.back-art {
  position: absolute;
  inset: 3px 3px 4px 4px;
  background-size: cover;
  background-position: 50% 40%;
  /* The same artwork, turned the way you would be looking at it and a shade
     down because this face is away from the light. Not greyed or blurred: a
     back cover generally matches the front. */
  opacity: 0.82;
  filter: brightness(0.62) saturate(0.9);
  transform: scaleX(-1);
}

/* ── the opening side: the plastic opposite the spine ── */
.edge {
  width: 100%;
  transform: translateZ(calc(var(--front-w) * -1)) rotateY(180deg);
  border-radius: 3px 2px 2px 3px;
  background:
    linear-gradient(to bottom,
      transparent 0 10%, rgba(255,255,255,0.1) 10% 10.5%,
      rgba(0,0,0,0.6) 10.5% 15%, transparent 15% 85%,
      rgba(0,0,0,0.7) 85% 89.5%, rgba(255,255,255,0.08) 89.5% 90%,
      transparent 90%),
    linear-gradient(90deg, #050505, #242424 42%, #090909 82%, #020202);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08),
              inset 2px 0 2px rgba(255,255,255,0.045);
}

/* ── the top edge ──
   You look slightly down at a shelf, so this sliver is always in view, and it
   is the surface that makes the thing a box rather than a picture of one. */
.top {
  width: 100%;
  height: var(--front-w);
  transform-origin: top center;
  transform: rotateX(-90deg);
  border-radius: 1px 1px 4px 4px;
  /* Across the thickness: the sheath's lit lip, then the black plastic, and
     at the far side the cut edge of the printed wrap — the pale line you can
     always see along the top of a case on a shelf. */
  background: linear-gradient(90deg,
              rgba(255,255,255,0.13) 0 1px,
              #1f1f1f 2px,
              #0d0d0d 42%,
              #050505 86%,
              rgba(222,214,198,0.62) 96%,
              rgba(160,152,138,0.38) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18),
              inset 0 -1px 0 rgba(0,0,0,0.8);
}

/* The lower plane becomes visible during the little upward tilt. Without it,
   the case is convincing at rest but turns hollow as soon as it moves. */
.bottom {
  top: auto;
  bottom: 0;
  width: 100%;
  height: var(--front-w);
  transform-origin: bottom center;
  transform: rotateX(90deg);
  border-radius: 4px 4px 1px 1px;
  background: linear-gradient(90deg,
              #050505, #171717 18%, #080808 82%,
              rgba(192,184,169,0.34) 96%, rgba(120,114,104,0.28));
  box-shadow: inset 0 -1px 0 rgba(255,255,255,0.08);
}

/* ── the mark for a film his partner put on the list ──
   Absolutely placed at the head of the spine: the spine centres its contents,
   so an unpositioned badge lands in the middle of the title. */
.together {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* has to sit inside a 15px spine without crowding the title */
  width: 13px;
  height: 13px;
  border-radius: 3px;
  background: var(--gold);
  color: #0f0f0f;
  box-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
.together svg { width: 9px; height: 9px; }
/* on the cover there is room for it to sit in the corner */
.front .together {
  top: 7px;
  left: 7px;
  transform: none;
  width: auto;
  height: auto;
  padding: 4px 6px;
}

/* where the case meets the plank */
.under {
  position: absolute;
  left: -3px; right: -3px; bottom: -4px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(50% 100% at 50% 0, rgba(0,0,0,0.85), transparent 75%);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}

/* ── pulling one off the shelf ── */
.case.out, .case:focus-visible { z-index: 6; }
.case.out .box,
.case:focus-visible .box {
  transition-duration: 0.5s;
  transition-delay: 0.07s;
  transition-timing-function: cubic-bezier(0.2, 0.86, 0.26, 1.08);
  transform: translate3d(-11px, -19px, 34px) rotateY(-74deg) rotateX(2deg) rotate(0deg);
}
.case.out .lift,
.case:focus-visible .lift {
  transform: translate3d(0, -13px, 72px);
  transition-duration: 0.36s;
  transition-delay: 0s;
}
.case.out .gloss, .case:focus-visible .gloss { opacity: 1; }
.case.out .front, .case:focus-visible .front {
  box-shadow: 0 30px 48px rgba(0,0,0,0.7),
              0 3px 10px rgba(0,0,0,0.5),
              inset 0 0 0 1px rgba(255,255,255,0.09);
}
.case.out .under, .case:focus-visible .under {
  opacity: 0.35;
  transform: translateY(10px) scaleX(1.5);
}
@media (hover: hover) {
  .case:hover { z-index: 6; }
  .case:hover .box {
    transition-duration: 0.5s;
    transition-delay: 0.07s;
    transition-timing-function: cubic-bezier(0.2, 0.86, 0.26, 1.08);
    transform: translate3d(-11px, -19px, 34px) rotateY(-74deg) rotateX(2deg) rotate(0deg);
  }
  .case:hover .lift {
    transform: translate3d(0, -13px, 72px);
    transition-duration: 0.36s;
    transition-delay: 0s;
  }
  .case:hover .gloss { opacity: 1; }
  .case:hover .front {
    box-shadow: 0 30px 48px rgba(0,0,0,0.7),
                0 3px 10px rgba(0,0,0,0.5),
                inset 0 0 0 1px rgba(255,255,255,0.09);
  }
  .case:hover .under { opacity: 0.35; transform: translateY(10px) scaleX(1.5); }
}

/* The library stacks row after row of these, so its rows are bays too. */
.shelf-row { position: relative; }

/* ── the bay ──
   A shelf is not a plank floating on a page: it is a recess with a back to it,
   uprights either side and light coming from above. Without the back panel the
   cases read as stickers; with it they are standing in something. */
.rail-wrap,
.shelf-row {
  position: relative;
  border-radius: 8px 8px 4px 4px;
  border: 1px solid rgba(129,91,53,0.18);
  background:
    /* warm pools from the little lamps above a shop display */
    radial-gradient(34% 74% at 18% -8%, rgba(255,224,159,0.16), transparent 62%),
    radial-gradient(34% 74% at 52% -8%, rgba(255,224,159,0.12), transparent 62%),
    radial-gradient(34% 74% at 86% -8%, rgba(255,224,159,0.14), transparent 62%),
    /* old veneered back boards */
    repeating-linear-gradient(90deg,
      rgba(0,0,0,0.34) 0 1px, transparent 1px 76px),
    repeating-linear-gradient(0deg,
      rgba(255,255,255,0.012) 0 1px, transparent 1px 17px),
    linear-gradient(#2b1e14, #1a110b 64%, #100906);
  box-shadow:
    inset 0 18px 30px -16px rgba(0,0,0,0.9),
    inset 0 0 0 1px rgba(255,236,196,0.035),
    0 12px 30px rgba(0,0,0,0.26);
}
/* the uprights the shelf is fixed between */
.rail-wrap::before, .rail-wrap::after,
.shelf-row::before, .shelf-row::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 12px;
  z-index: 4;
  pointer-events: none;
}
.rail-wrap::before, .shelf-row::before {
  left: 0;
  border-radius: 7px 0 0 3px;
  background:
    repeating-linear-gradient(0deg, transparent 0 19px, rgba(0,0,0,0.28) 20px 21px),
    linear-gradient(90deg, #6b4a2f, #382414 72%, #1a0e07);
  box-shadow: inset 1px 0 rgba(255,255,255,0.12), 2px 0 8px rgba(0,0,0,0.68);
}
.rail-wrap::after, .shelf-row::after {
  right: 0;
  border-radius: 0 7px 3px 0;
  background:
    repeating-linear-gradient(0deg, transparent 0 19px, rgba(0,0,0,0.28) 20px 21px),
    linear-gradient(270deg, #6b4a2f, #382414 72%, #1a0e07);
  box-shadow: inset -1px 0 rgba(255,255,255,0.12), -2px 0 8px rgba(0,0,0,0.68);
}

/* ── the plank ──
   Two surfaces you can actually see: the top it stands on, foreshortened to a
   sliver, and the front edge showing the board's thickness. A single flat bar
   is the thing that looks drawn rather than built. */
.shelf-board {
  position: relative;
  height: 18px;
  margin: 0 11px;
  border-radius: 0 0 4px 4px;
  /* the front edge: sawn timber, darker at the bottom where it turns away */
  background:
    repeating-linear-gradient(91deg,
      rgba(0,0,0,0.24) 0 1px, transparent 1px 11px,
      rgba(255,255,255,0.035) 12px 13px, transparent 13px 31px),
    linear-gradient(#805c39 0 2px, #624324 3px, #442b16 58%, #251507);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.32),
    inset 0 -3px 4px rgba(0,0,0,0.64),
    0 3px 0 #190d05,
    0 16px 24px rgba(0,0,0,0.7);
}
/* the top surface, seen almost edge-on */
.shelf-board::before {
  content: "";
  position: absolute;
  left: -3px; right: -3px;
  top: -6px;
  height: 7px;
  border-radius: 3px 3px 0 0;
  background:
    repeating-linear-gradient(92deg, transparent 0 32px, rgba(0,0,0,0.14) 33px 34px),
    linear-gradient(#a1784c, #755230 56%, #4c3019);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.48), 0 -1px 0 rgba(0,0,0,0.5);
}
/* the dark under the shelf, which is what gives the bay depth */
.shelf-board::after {
  content: "";
  position: absolute;
  left: 5px; right: 5px; top: 100%;
  height: 34px;
  background:
    radial-gradient(12px 24px at 12% 0, rgba(34,19,8,0.95) 0 32%, transparent 35%),
    radial-gradient(12px 24px at 88% 0, rgba(34,19,8,0.95) 0 32%, transparent 35%),
    linear-gradient(rgba(0,0,0,0.68), transparent 76%);
  pointer-events: none;
}

/* ── the display rack ──
   A faced stand is not the same joinery as a shelf. It is a raked deck with a
   rail along the front that the cases lean back against, and a lit ledge under
   them — the thing that in a shop makes a wall of covers read as a display
   rather than as wallpaper. */
.rack.faced {
  background:
    /* the light that falls on a display */
    radial-gradient(32% 110% at 18% -18%, rgba(255,232,183,0.15), transparent 62%),
    radial-gradient(32% 110% at 52% -18%, rgba(255,232,183,0.11), transparent 62%),
    radial-gradient(32% 110% at 86% -18%, rgba(255,232,183,0.13), transparent 62%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 16px),
    /* the raked deck the cases sit on, darker at the back */
    linear-gradient(#17100d 0%, #261a13 62%, #352318 100%);
  box-shadow: inset 0 24px 30px -20px rgba(0,0,0,0.92),
              inset 0 -22px 28px -22px rgba(201,145,82,0.34);
}
/* the rail: a moulded strip standing proud of the deck, catching the light
   along its top edge the way a real one does */
.rack.faced + .shelf-board {
  height: 20px;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.2) 0 1px, transparent 1px 11px),
    repeating-linear-gradient(91deg, transparent 0 27px, rgba(0,0,0,0.2) 28px 29px),
    linear-gradient(#b78a59 0 2px, #805b36 3px, #58391e 44%, #301b0b);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    inset 0 -2px 3px rgba(0,0,0,0.55),
    0 3px 0 #1d1208,
    0 17px 25px rgba(0,0,0,0.68);
}
.rack.faced + .shelf-board::before {
  top: -11px;
  height: 12px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(#c49a63, #8a6440 38%, #5a3f24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6),
              0 -2px 7px rgba(0,0,0,0.55);
}
/* each case throws a little shadow back onto the deck it leans on */
.faced .under {
  left: -4px; right: -4px; bottom: -3px;
  height: 12px;
  background: radial-gradient(52% 100% at 50% 0, rgba(0,0,0,0.85), transparent 74%);
}

@media (prefers-reduced-motion: reduce) {
  .lift, .box, .under, .gloss { transition: none; }
}

/* ── FACED OUT ────────────────────────────────────────────────────────────
   The same box, turned cover-out and stood on a rack — the new-release wall
   rather than the catalogue shelf.

   Nothing rotates to get here. The cover simply becomes the face at z=0 and
   the rest of the case is built BACKWARD from it: the spine hinges on the
   cover's left edge and runs away from you, the opening edge does the same on
   the right, and the top closes the gap between them. So the art is square-on
   and unforeshortened, which is the whole point of facing a title out, while
   the case still has its thickness where you can see it.

   The rack itself leans back a few degrees like a real display stand, with a
   lip along the front for the cases to rest against. */
.rack.faced {
  align-items: flex-end;
  gap: 13px;
  padding: 46px 20px 0;
  perspective: 1600px;
  perspective-origin: 50% 30%;
}
.case.faced {
  width: var(--faced-w, 132px);
  height: calc(var(--faced-w, 132px) * 1.41);   /* 135 × 190mm */
}
.faced .box {
  transform-origin: 50% 100%;
  /* Straight, and leaning BACK on the rail — which is what a case on a stand
     actually does. It was also turned to the side and carrying the shelf's
     random lean, so every case looked like it was toppling to the right. The
     lean belongs on a packed spine shelf, not on a display stand, and the
     tip-back alone shows the top edge, which is all the depth it needs. */
  transform: rotateX(-9deg);
}
.faced .front {
  left: 0;
  width: 100%;
  transform: none;
  border-radius: 2px 4px 4px 2px;
}
.faced .front img { border-radius: inherit; }
/* The spine runs BACK from the cover's left edge. rotateY(+90) about that
   edge sends the face into -z, away from the reader; -90 sends it toward
   them, which puts the spine in front of the artwork and on the wrong side. */
.faced .spine {
  width: var(--t, 16px);
  left: 0;
  transform-origin: left center;
  transform: rotateY(90deg);
}
/* ...and the opening edge does the same from the right */
.faced .edge {
  width: var(--t, 16px);
  left: 100%;
  transform-origin: left center;
  transform: rotateY(90deg);
}
/* the top closes the two, and is the sliver that proves it is a box */
.faced .top {
  width: 100%;
  height: var(--t, 16px);
  transform-origin: top center;
  transform: rotateX(90deg);
  background: linear-gradient(180deg,
              rgba(255,255,255,0.16) 0 1px,
              #191919 2px, #0c0c0c 60%,
              rgba(214,206,190,0.5) 94%, rgba(150,142,128,0.3) 100%);
}
.faced .back { display: none; }               /* never in view, faced out */
.faced .crease { width: 7px; }
/* the cover already shows the name; the caption is for the extra facts */
.faced .front-tag {
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.faced .under {
  left: 2px; right: 2px; bottom: -5px;
  height: 9px;
  background: radial-gradient(50% 100% at 50% 0, rgba(0,0,0,0.8), transparent 72%);
}

/* lifting one off the rack: it comes forward and stands up straight */
.case.faced.out, .case.faced:focus-visible { z-index: 6; }
.case.faced.out .box,
.case.faced:focus-visible .box {
  transition-duration: 0.44s;
  transition-delay: 0.06s;
  transition-timing-function: cubic-bezier(0.2, 0.86, 0.26, 1.08);
  transform: translate3d(0, -7px, 24px) rotateX(-1.5deg) scale(1.025);
}
.case.faced.out .lift,
.case.faced:focus-visible .lift {
  transform: translate3d(0, -11px, 54px);
  transition-duration: 0.34s;
  transition-delay: 0s;
}
.case.faced.out .front-tag, .case.faced:focus-visible .front-tag { opacity: 1; }
.case.faced.out .gloss, .case.faced:focus-visible .gloss { opacity: 1; }
.case.faced.out .under, .case.faced:focus-visible .under {
  opacity: 0.4;
  transform: translateY(8px) scaleX(1.25);
}
@media (hover: hover) {
  .case.faced:hover { z-index: 6; }
  .case.faced:hover .box {
    transition-duration: 0.44s;
    transition-delay: 0.06s;
    transition-timing-function: cubic-bezier(0.2, 0.86, 0.26, 1.08);
    transform: translate3d(0, -7px, 24px) rotateX(-1.5deg) scale(1.025);
  }
  .case.faced:hover .lift {
    transform: translate3d(0, -11px, 54px);
    transition-duration: 0.34s;
    transition-delay: 0s;
  }
  .case.faced:hover .front-tag { opacity: 1; }
  .case.faced:hover .gloss { opacity: 1; }
  .case.faced:hover .under { opacity: 0.4; transform: translateY(8px) scaleX(1.25); }
}

/* the rack's front lip, which the cases lean on */
.rack.faced + .shelf-board::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -7px;
  height: 8px;
  border-radius: 3px 3px 0 0;
  background:
    repeating-linear-gradient(91deg, transparent 0 29px, rgba(0,0,0,0.14) 30px 31px),
    linear-gradient(#987047, #654525 58%, #3b240f);
  box-shadow: 0 -1px 0 rgba(255,255,255,0.24) inset,
              0 -3px 8px rgba(0,0,0,0.46);
}

@media (max-width: 760px) {
  .case.faced { width: var(--faced-w, 116px); height: calc(var(--faced-w, 116px) * 1.41); }
  .rack.faced { gap: 10px; }
}

/* ── STACKED ──────────────────────────────────────────────────────────────
   A case lying flat is not a different object and does not want a different
   model. It is the shelf case — all six surfaces, the hinge, the plastic —
   turned a quarter anticlockwise and set down. So that is literally what this
   does: the same box, rotated in the plane, and everything on it comes along.
   The spine art, the distributor's band, the title that read bottom-to-top
   standing up and now reads left-to-right, all of it falls out of the one
   rotation instead of being re-specified.

   The turn is CLOCKWISE, and that is not arbitrary. A spine reads
   bottom-to-top; turn it anticlockwise and the start of the title lands on
   the right, so every title comes out mirrored. Clockwise puts the foot of
   the spine on the left and the text runs the way text runs.

   Hovering lifts it out and STANDS IT UP — the quarter turn unwinds as the
   cover swings round, which is exactly what your hands do with a case off a
   pile. Leaving the box turned would show the artwork on its side; unwinding
   the rotation is both the correct picture and the honest gesture.

   An earlier version slid the case sideways out of the pile instead. Good
   imitation of the movement, useless as an interface: you want to SEE what
   you are pointing at, and sliding shows you the same spine slightly further
   along. */
/* ── how things move ──
   One pull is two movements, not one: the case comes clear of the pile, and
   then it turns. Firing both at once reads as a single blunt slide, and the
   difference between that and staggering them by nine hundredths of a second
   is the whole of whether this feels like a hand or a CSS transition.

   Coming back it unwinds in the opposite order — it turns flat FIRST, then
   drops back into the stack — which is why the delays live on both the rest
   and hover states rather than only on hover.

   The turn is given a little overshoot so it settles rather than stopping
   dead. The slide is not: a case that overshoots its slot looks dropped. */
.rack.stacked {
  --ease-pull: cubic-bezier(0.22, 0.72, 0.24, 1);
  --ease-turn: cubic-bezier(0.34, 1.16, 0.42, 1);
  display: block;
  padding: 0;
  perspective: 1700px;
  perspective-origin: 50% 45%;
  overflow: visible;
}
.case.stacked {
  display: block;
  /* Lying down, its length is its height standing up — scaled up so a single
     column is worth looking at. Length and thickness scale TOGETHER, so it is
     still a DVD case, just a nearer one. */
  width: calc((var(--case-h) + var(--dh, 0px)) * var(--stack-scale, 1.5));
  height: calc((var(--t, 16px) + 2px) * var(--stack-scale, 1.5));
  margin: 0;
}
/* The box keeps its standing dimensions and is turned in place, which is why
   every face, gradient and hinge inside it still works untouched. */
.stacked .lift {
  /* going back, the slide waits for the turn to finish */
  transition: transform 0.42s var(--ease-pull) 0.1s;
}
.stacked .box {
  /* ── never put a filter on this element ──
     `filter` forces transform-style: flat, whatever preserve-3d says. A
     drop-shadow here silently collapses the case into a plane, so the cover
     stays edge-on at 90° and all you see is the spine. The shadow belongs on
     a face, as a box-shadow, which does not flatten anything. */
  transition: transform 0.52s var(--ease-turn) 0s;
  inset: auto;
  top: 50%;
  left: 50%;
  width: calc(var(--t, 16px) * var(--stack-scale, 1.5));
  height: calc((var(--case-h) + var(--dh, 0px)) * var(--stack-scale, 1.5));
  transform-origin: 50% 50%;
  transform: translate(-50%, -50%) rotate(90deg);
}
/* the cover comes up at the same scale as the case it came out of */
.stacked .front, .stacked .back {
  width: calc(var(--front-w) * var(--stack-scale, 1.5));
}
.stacked .top { height: calc(var(--front-w) * var(--stack-scale, 1.5)); }
.stacked .edge {
  transform: translateZ(calc(var(--front-w) * var(--stack-scale, 1.5) * -1)) rotateY(180deg);
}
.stacked .spine-txt { font-size: 0.82rem; letter-spacing: 0.01em; }
.stacked .under { display: none; }

/* turning one to look at it — the same move the shelf makes, in the same
   local axes, because it is the same box */
.case.stacked.out, .case.stacked:focus-visible { z-index: 8; }
/* coming out, the slide goes first and the turn follows it */
.case.stacked.out .lift,
.case.stacked:focus-visible .lift {
  transform: translate3d(var(--pull, 210px), 0, 0);
  transition-delay: 0s;
}
.case.stacked.out .box,
.case.stacked:focus-visible .box {
  transition-delay: 0.09s;
  /* Out to the SIDE, not up over the pile. Running the mouse down a column
     should show you one cover after another with the stack still readable
     beside it — a case that rears up over its neighbours hides the very
     thing you are scanning. rotate(0) unwinds the pile's quarter turn on the
     way, so the artwork arrives upright. */
  transform: translate(-50%, -50%) rotate(0deg) translateZ(120px) rotateY(-68deg);
}
.case.stacked.out .gloss, .case.stacked:focus-visible .gloss { opacity: 1; }
.case.stacked.out .front, .case.stacked:focus-visible .front {
  box-shadow: 0 22px 40px rgba(0,0,0,0.7), inset 0 0 0 1px rgba(255,255,255,0.09);
}
@media (hover: hover) {
  .case.stacked:hover { z-index: 8; }
  .case.stacked:hover .lift {
    transform: translate3d(var(--pull, 210px), 0, 0);
    transition-delay: 0s;
  }
  .case.stacked:hover .box {
    transition-delay: 0.09s;
    transform: translate(-50%, -50%) rotate(0deg) translateZ(120px) rotateY(-68deg);
  }
  .case.stacked:hover .gloss { opacity: 1; }
  .case.stacked:hover .front {
    box-shadow: 0 22px 40px rgba(0,0,0,0.7), inset 0 0 0 1px rgba(255,255,255,0.09);
  }
}

/* ── a pile ──
   Several piles across rather than one tower: 363 cases in a single column is
   a six-thousand-pixel scroll, and nobody stacks them that high anyway. */
.piles {
  display: grid;
  /* One column, as wide as a case is long, and pushed left of centre so the
     cover has somewhere to come out to. */
  grid-template-columns: max-content;
  justify-content: start;
  /* No gap: there is one pile now. The catalogue used to be cut into stacks
     of thirty, which left a band of empty page between each one — exactly
     where the shelf used to be, which is what made it look like a shelf was
     missing rather than deliberately absent. */
  gap: 0;
  margin: 0;
  padding: 26px 20px 60px;
  list-style: none;
}
.pile {
  position: relative;
  overflow: visible;
  padding: 0;
  /* Nothing behind a pile and nothing under it. It had a lit wooden bay and
     then a plank, which is furniture for cases that STAND — a stack just sits
     there, and every bit of joinery drawn around it was making it look like a
     shelf with the cases lying down on it. */
  background: none;
  box-shadow: none;
}

@media (max-width: 560px) {
  .piles { padding: 20px 10px 50px; justify-content: center; }
  .rack.stacked { --stack-scale: 1.05; --pull: 0px; }
}

/* ── on a phone, the column opens ──
   There is nowhere beside a column on a phone, and a case that rears up over
   its neighbours is worse there than anywhere. So instead the pile makes room:
   the case turns face-up where it lies and the stack parts around it, the ones
   above riding up and the ones below pushed down. Nothing overlaps anything,
   and you never lose your place in the list.

   Height is the one thing here that costs layout rather than just compositing,
   so it is the ONLY property allowed to change — the turn is still a transform,
   the list is plain blocks with nothing to reflow, and `contain` stops the
   work escaping the pile. */
@media (hover: none) {
  .rack.stacked { contain: layout paint; }
  .case.stacked {
    transition: height 0.4s cubic-bezier(0.3, 0.72, 0.22, 1),
                transform 0.4s cubic-bezier(0.3, 0.72, 0.22, 1);
  }
  .case.stacked.out {
    /* as tall as the case is standing, so the cover has somewhere to be */
    height: calc((var(--case-h) + var(--dh, 0px)) * var(--stack-scale, 1.05) + 14px);
    z-index: 3;
  }
  .case.stacked.out .lift { transform: none; }
  .case.stacked.out .box,
  .case.stacked:focus-visible .box {
    /* At rotate(0) it is the SPINE that faces you — the cover is hinged and
       folded back, so it takes the same ~75° turn as everywhere else to bring
       it round. Square-ish on, because a phone has no room for a dramatic
       angle and the artwork is the point. */
    transform: translate(-50%, -50%) rotate(0deg) translateZ(30px)
               rotateY(-76deg) translateX(-6px);
  }
  .case.stacked.out .front-tag { opacity: 1; }
}

/* ── the SEEN sticker ──
   The label a rental shop slaps on a case. Slightly off-square, because one
   applied by hand never is, and worn enough to look stuck on rather than
   printed in. It answers the only question you have about a title you half
   recognise. */
.seen-tag {
  position: absolute;
  z-index: 4;
  padding: 3px 6px;
  border-radius: 2px;
  background: linear-gradient(#f6efdc, #ddd2b4);
  color: #23180a;
  font: 800 0.66rem/1 var(--display, var(--sans));
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: 0 1px 2px rgba(0,0,0,0.6), inset 0 -1px 0 rgba(0,0,0,0.16);
  pointer-events: none;
}
/* on a cover it goes in the corner, as a sticker does */
.front .seen-tag {
  top: 9px;
  right: 8px;
  transform: rotate(3.5deg);
}
/* on a spine there is only the foot to spare */
.spine .seen-tag {
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%) rotate(-1.5deg) scale(0.82);
  padding: 2px 4px;
  letter-spacing: 0.08em;
}
/* laid flat the spine runs the other way, so the sticker goes to its end */
.stacked .spine .seen-tag {
  left: auto;
  bottom: auto;
  right: 34px;
  top: 50%;
  transform: translateY(-50%) rotate(-1.5deg) scale(0.8);
}

/* ── the aisle sign ──
   A shelf label in a video shop is a sign, not a paragraph: a plate bolted
   above the run, lit from the front, with the category in condensed caps
   because that is what fits on a sign. */
.shelf-head {
  position: relative;
  align-items: center !important;
  gap: 0 14px !important;
  padding: 30px 20px 12px !important;
}
.shelf-head h2 {
  position: relative;
  font-family: var(--display, var(--sans));
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 9px 18px 8px;
  border-radius: 3px;
  color: #ffd84a !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.09), transparent 55%),
    linear-gradient(#1d2b47, #142036 60%, #0d1524);
  box-shadow:
    inset 0 0 0 1px rgba(255,216,74,0.35),
    inset 0 1px 0 rgba(255,255,255,0.16),
    0 6px 14px rgba(0,0,0,0.6);
  text-shadow: 0 0 14px rgba(255,216,74,0.45), 0 1px 0 rgba(0,0,0,0.5);
}
/* the brackets holding the plate up */
.shelf-head h2::before,
.shelf-head h2::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 5px; height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #d8c48a, #6d5a2c);
  box-shadow: 0 1px 1px rgba(0,0,0,0.7);
}
.shelf-head h2::before { left: 6px; }
.shelf-head h2::after { right: 6px; }
.shelf-head h2 svg { vertical-align: -1px; margin-right: 4px; }

@media (max-width: 560px) {
  .shelf-head h2 { padding: 7px 13px 6px; font-size: 0.98rem !important; }
  .shelf-head h2::before, .shelf-head h2::after { display: none; }
}

/* ── a franchise's run of films ──
   The row wears the first film's cover because a series has none of its own,
   so opening one has to show what it actually stands for. */
.run { margin: 0 0 18px; }
.run h4 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 11px;
  font: 800 0.72rem/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}
.run-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 12px 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.run-list li { min-width: 0; }
.run-art {
  display: block;
  aspect-ratio: 2 / 3;
  border-radius: 4px;
  overflow: hidden;
  background: var(--raised);
  border: 1px solid var(--line);
}
.run-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.run-list b {
  display: block;
  margin-top: 5px;
  font: 700 0.74rem/1.2 var(--display, var(--sans));
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.run-list span {
  display: block;
  font: 600 0.68rem/1.2 var(--mono);
  color: var(--dim);
}

/* ══════════════════════════════════════════════════════════════════════════
   CONTROLS
   Everything you can press, in one place and in one language, because the
   buttons were written before the room was and still looked it.

   Three kinds, and only three:

     gold    the one thing this control does — Play, Add, the chosen tab.
             The ticket's own gradient, so the sign at the top of the page
             and the button under your finger are made of the same stuff.
     plate   everything else. Charcoal with a hairline and a lit top edge,
             like the signs on the shelves.
     sign    a control that is currently ON reads as the blue aisle placard,
             which is the room's way of saying "this is the one".

   All of them share a height, a radius, the condensed face for their label,
   and the same lit-top-edge trick, so a row of mixed controls lines up
   instead of looking assembled from parts.
   ══════════════════════════════════════════════════════════════════════════ */

.btn,
.seg button,
select.pick,
.clearfilter,
.sheet-own button,
.wchip,
.head .back,
.addbox input,
.addbox select {
  font-family: var(--display, var(--sans));
  letter-spacing: 0.035em;
  border-radius: 7px;
  transition: background 0.16s var(--ease), border-color 0.16s var(--ease),
              color 0.16s var(--ease), transform 0.12s var(--ease);
}

/* ── plate: the default ── */
.btn,
select.pick,
.clearfilter,
.sheet-own button,
.wchip.rent,
.search,
.find {
  border: 1px solid #3a3a3a;
  background: linear-gradient(#242424, #1a1a1a 62%, #151515);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.09),
              0 1px 2px rgba(0,0,0,0.5);
}
.btn:hover,
select.pick:hover,
.clearfilter:hover,
.sheet-own button:hover,
.wchip.rent:hover {
  border-color: #585858;
  background: linear-gradient(#2c2c2c, #202020 62%, #1a1a1a);
  color: var(--ink);
}
.btn:active, .sheet-own button:active { transform: translateY(1px); }

/* ── gold: the one thing it does ── */
.btn-gold,
.wchip.on {
  border: 1px solid #b9900c;
  background: linear-gradient(#ffe066 0%, #f5c518 42%, #d9a406 100%);
  color: #1a1204;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6),
              inset 0 -2px 0 rgba(120,88,0,0.35),
              0 2px 5px rgba(0,0,0,0.45);
  text-shadow: none;
}
.btn-gold:hover, .wchip.on:hover {
  background: linear-gradient(#fff08c, #ffd230 42%, #e3ae09 100%);
  border-color: #d3a50e;
  color: #1a1204;
}

/* ── sign: a control that is switched on ── */
.seg button[aria-pressed="true"],
.brand[aria-pressed="true"] {
  color: #ffd84a;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.09), transparent 55%),
    linear-gradient(#1d2b47, #142036 60%, #0d1524);
  border-color: rgba(255,216,74,0.45);
  box-shadow: inset 0 0 0 1px rgba(255,216,74,0.3),
              inset 0 1px 0 rgba(255,255,255,0.14);
  text-shadow: 0 0 10px rgba(255,216,74,0.4);
}
.seg {
  border: 1px solid #333;
  background: #141414;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.seg button { border: 1px solid transparent; color: var(--dim); }
.seg button:hover:not([aria-pressed="true"]) { color: var(--ink); background: #1e1e1e; }

/* ── fields ── */
.search, .find, .addbox input, .addbox select {
  border-radius: 7px;
}
.addbox input, .addbox select {
  border: 1px solid #3a3a3a;
  background: #141414;
  color: var(--ink);
  font-family: var(--sans);
  letter-spacing: 0;
}
.addbox input:focus, .addbox select:focus,
.search:focus-within, .find:focus-within {
  border-color: var(--gold-dk);
  outline: none;
}
.search input, .find input { font-family: var(--sans); letter-spacing: 0; }

/* ── the rail arrows, which were the odd ones out entirely ── */
.nudge {
  color: #1a1204;
}
.nudge::before {
  content: "";
  position: absolute;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(#ffe066, #f5c518 55%, #d9a406);
  box-shadow: 0 2px 8px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.55);
}
.nudge svg { position: relative; }

/* ── the back link reads as a control, not a stray anchor ── */
.head .back {
  padding: 8px 13px;
  border: 1px solid #3a3a3a;
  border-radius: 7px;
  background: linear-gradient(#242424, #1a1a1a 62%, #151515);
  color: var(--gold);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.09);
}
.head .back:hover { border-color: var(--gold-dk); text-decoration: none; }

/* the service blocks keep their own colour, but sit on the same plate */
.brand {
  border-radius: 7px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 1px 2px rgba(0,0,0,0.5);
}
.brand b { font-family: var(--display, var(--sans)); letter-spacing: 0.02em; }

/* one focus ring for the whole room */
:where(.btn, .seg button, select.pick, .case, .brand, .clearfilter,
       .sheet-own button, .wchip, .nudge, .head .back):focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ── the type floor ──
   The room's rule is that nothing sets type under 11px, and three things had
   drifted under it: the ticket's stub at 8px, its strapline at 9.6, and the
   SEEN sticker at 10.6 — that last one on 336 cases, so it was the rule's
   biggest breach by a distance. Raised, with the padding brought in to match
   so nothing grew. */
.ticket .stub { font-size: 0.7rem; letter-spacing: 0.1em; }
.ticket .words span { font-size: 0.7rem; letter-spacing: 0.14em; }
.seen-tag { font-size: 0.7rem; padding: 3px 5px; }
.spine .seen-tag { transform: translateX(-50%) rotate(-1.5deg); padding: 2px 4px; }
.stacked .spine .seen-tag { transform: translateY(-50%) rotate(-1.5deg); }
@media (max-width: 520px) {
  .ticket .stub { font-size: 0.7rem; }
}

/* a cover that does not exist says so once, rather than repeating the title
   the sheet is already showing */
.plate.is-bare { align-items: center; justify-content: center; }
.no-cover {
  font: 700 0.72rem/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7c7c7c;
}

/* ── a film in a run that is not out yet ──
   A run holds the whole series, which includes films nobody has seen. Left
   looking like the rest, a row marked "seen" appears to claim them. */
.run-list li.soon { opacity: 0.55; }
.run-list li.soon .run-art { border-style: dashed; }
.run-list li.soon b { color: var(--dim); }
.soon-tag {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 3px 2px;
  background: rgba(10,10,10,0.86);
  color: var(--gold);
  font: 800 0.7rem/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}
.run-art { position: relative; }

/* ── the add button ──
   Always in the bar, because the owner panel is at the foot of a very long
   page and scrolling the length of the store to type a title is what stops a
   list getting kept. Only Ric ever sees it. */
.addbtn {
  flex: none;
  margin-left: auto;
  padding: 8px 14px;
  border: 1px solid #b9900c;
  border-radius: 7px;
  background: linear-gradient(#ffe066 0%, #f5c518 42%, #d9a406 100%);
  color: #1a1204;
  font: 700 0.84rem/1 var(--display, var(--sans));
  letter-spacing: 0.03em;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 2px 5px rgba(0,0,0,0.45);
}
.addbtn:hover { background: linear-gradient(#fff08c, #ffd230 42%, #e3ae09 100%); }
.addbtn[hidden] { display: none; }
/* the room list keeps its own right-hand slot */
.bar .addbtn + .marquee { margin-left: 14px; }

/* ── the quick-add sheet ── */
dialog.quick { width: min(440px, calc(100vw - 32px)); }
.quick-in {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 20px;
}
.quick-in h3 {
  grid-column: 1 / -1;
  margin: 0;
  font: 700 1.3rem/1 var(--display, var(--sans));
  letter-spacing: -0.01em;
}
.quick-in label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font: 700 0.72rem/1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dim);
}
.quick-in label.wide { grid-column: 1 / -1; }
.quick-in label.check {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  text-transform: none;
  letter-spacing: 0;
  font: 600 0.85rem/1 var(--sans);
  color: var(--ink);
}
.quick-in .hint {
  text-transform: none;
  letter-spacing: 0;
  font: 500 0.68rem/1 var(--sans);
  color: #7c7c7c;
}
.quick-in input, .quick-in select {
  padding: 10px 11px;
  border: 1px solid #3a3a3a;
  border-radius: 7px;
  background: #141414;
  color: var(--ink);
  font: 500 0.95rem/1.2 var(--sans);
}
.quick-in input[type="checkbox"] { padding: 0; width: 16px; height: 16px; accent-color: var(--gold); }
.quick-in input:focus, .quick-in select:focus { border-color: var(--gold-dk); outline: none; }
.quick-said {
  grid-column: 1 / -1;
  margin: 0;
  min-height: 1.2em;
  font: 600 0.8rem/1.3 var(--sans);
  color: var(--gold);
}
.quick-acts { grid-column: 1 / -1; display: flex; gap: 9px; }
@media (max-width: 460px) {
  .quick-in { grid-template-columns: 1fr; }
}