/* ===== Video Game Shelf ===== */

/* Pixel font for the page title and console labels (loaded by videogames.html) */

/* Page title, same pixel font and sloped green wedge as the other pages, but level */
.shelf-title {
  position: relative;
  width: min(1600px, 90%);
  margin: calc(var(--rise) + 1.25rem) auto 1.5rem; /* clears the header's sloped edge, which is lowest on the left */
  padding-bottom: calc(var(--rise) * 0.6 + 0.8rem);
  font-family: "Press Start 2P", monospace;
  font-size: clamp(1.1rem, 2.2vw, 1.5rem);
  line-height: 1.5;
  font-weight: normal;
  color: #33ff7a;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.shelf-title::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--rise) * 0.6);
  background-color: #33ff7a;
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

/* The bookcase: dark back panel with a wooden frame */
#shelf {
  --pad: 24px;
  width: min(1600px, 90%);
  margin: 0 auto;
  padding: 0 var(--pad);
  background: linear-gradient(90deg, #17110c, #211812 5%, #211812 95%, #17110c);
  border: 14px solid #3a2a1c;
  border-bottom-width: 18px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

.shelf-row {
  position: relative;
  padding-top: 28px; /* headroom above the tallest box */
}

.row-games {
  display: flex;
  align-items: flex-end; /* every box stands on the shelf */
  gap: 2px;
}

/* shelf.png is drawn at half scale, so it is shown at 2x. 800 x 8 px becomes 1600 x 16 px,
   the widest the shelf ever gets. Pixels stay crisp and it tiles sideways if it's narrower. */
.plank {
  position: relative;
  height: 16px;
  margin: 0 calc(var(--pad) * -1); /* the plank runs edge to edge across the back panel */
  background-color: #6b4a2b; /* shown until shelf.png loads */
  background-image: url("/images/videogames/shelf.png");
  background-repeat: repeat-x;
  background-position: left top;
  background-size: 1600px 16px;
  image-rendering: pixelated;
  box-shadow: 0 8px 14px rgba(0, 0, 0, 0.6);
}

.console-tag {
  position: absolute;
  top: 4px;
  font-family: "Press Start 2P", monospace;
  font-size: 8px;
  line-height: 8px;
  color: #f0dcae;
  text-shadow: 1px 1px 0 #000;
  white-space: nowrap;
  pointer-events: none;
}

/* ===== A game box, drawn in 3D ===== */

/* --d (spine width), --h (height) and --cw (cover width) are set per game by videoGames.js.
   --turn is how far the box turns on hover, --pull how far it slides out. */
.game {
  --turn: 40deg;
  --pull: 90px;
  position: relative;
  flex: none;
  width: var(--d);
  height: var(--h);
  outline: none;
}

.game:hover,
.game:focus-visible {
  z-index: 20; /* pops out over its neighbours */
}

.game.has-review {
  cursor: pointer;
}

.box {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform-origin: 100% 50%; /* hinge on the spine's right edge, where the cover attaches */
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.game:hover .box,
.game:focus-visible .box {
  transform: perspective(1100px) translateZ(var(--pull)) rotateY(calc(var(--turn) * -1));
}

.face {
  position: absolute;
  background-color: var(--box-color, #222);
  background-image: var(--box-texture, none);
  background-size: 64px auto;
  background-repeat: repeat;
  image-rendering: pixelated;
}

/* Spine art faces the room; a stretched image, so the whole spine is always covered */
.spine {
  inset: 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  image-rendering: auto;
  overflow: hidden;
}

/* Cover hangs off the spine's right edge and swings out when the box turns */
.cover {
  left: 100%;
  top: 0;
  width: var(--cw);
  height: 100%;
  transform-origin: left center;
  transform: rotateY(90deg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  image-rendering: auto;
}

.top,
.bottom {
  left: 0;
  width: 100%;
  height: var(--cw);
  transform-origin: top;
  transform: rotateX(-90deg);
  filter: brightness(0.85);
}

.top { top: 0; }
.bottom { top: 100%; }

.left {
  left: 0;
  top: 0;
  width: var(--cw);
  height: 100%;
  transform-origin: left center;
  transform: rotateY(90deg);
  filter: brightness(0.7);
}

.back {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: translateZ(calc(var(--cw) * -1));
  filter: brightness(0.7);
}

/* Title text shows only when a game has no spine art yet */
.spine-title {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
  white-space: nowrap;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 0.75rem;
  color: #f0f0f0;
}

.no-spine-art .spine-title {
  display: block;
}

.shelf-error {
  padding: 2rem;
  text-align: center;
}