/* ---------------------------------------------------------------------------
   shelves.css — the big buttons: Games and Play with friends on the first
   row, then All, Original, Inspired, Tech demos & tools and Surprise me,
   five across.

   Arcade push-buttons. Up: dark plastic standing proud of the panel, with a
   thick lower lip. Pressed: sunk into the panel, lip gone, lit from inside
   with the attract colour, the one hue the chrome is allowed. The shelf you
   are on is never in doubt.
--------------------------------------------------------------------------- */

.shelves {
  display: grid;
  gap: clamp(0.8rem, 0.5rem + 1vw, 1.3rem);
  padding: clamp(1rem, 0.6rem + 1.2vw, 1.6rem) var(--pad-x) 0.4rem;
}

/* Every row is the full width, and the buttons in it share it equally. */
.shelves__row {
  display: flex;
  gap: clamp(0.6rem, 0.3rem + 1vw, 1.1rem);
}

/* Games is the wall; Play with friends, beside it, leads to the Friends view. */
.shelves__row--lead > .shelf--games {
  flex: 2 1 0;
}

.shelf--friends {
  color: var(--light);
  border-color: var(--hair-bright);
  background:
    radial-gradient(90% 140% at 0% 50%, rgba(243, 238, 247, 0.09), transparent 60%),
    linear-gradient(180deg, var(--riser-lit), var(--riser) 70%);
}

.shelf--friends:hover {
  border-color: rgba(243, 238, 247, 0.45);
}

.shelf--friends .shelf__art svg {
  width: 86%;
  height: 86%;
}

.shelf--friends .shelf__count {
  opacity: 0.8;
}

/* Five across is a smaller button than one across. */
.shelves__row:not(.shelves__row--lead) .shelf {
  padding-block: clamp(0.6rem, 0.45rem + 0.5vw, 0.85rem);
}

.shelves__row:not(.shelves__row--lead) .shelf__art {
  width: clamp(2.1rem, 1.6rem + 1.2vw, 2.7rem);
}

.shelves__row:not(.shelves__row--lead) .shelf__label {
  font-size: var(--step-0);
}

.shelf {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: clamp(0.7rem, 0.4rem + 0.8vw, 1.1rem);
  padding: clamp(0.8rem, 0.55rem + 0.7vw, 1.15rem) clamp(0.9rem, 0.6rem + 1vw, 1.4rem);
  border-radius: 10px;
  border: 1px solid var(--edge);
  background: linear-gradient(180deg, var(--riser-lit), var(--riser) 70%);
  color: var(--dust);
  text-align: start;
  /* The lip: a solid ledge under the cap, so pressing it has somewhere to go. */
  box-shadow:
    0 5px 0 0 #0a070e,
    0 5px 0 1px var(--edge),
    0 14px 22px -12px rgba(0, 0, 0, 0.9),
    inset 0 1px 0 rgba(243, 238, 247, 0.07);
  transform: translateY(0);
  transition:
    transform 0.12s var(--ease),
    box-shadow 0.12s var(--ease),
    color 0.16s var(--ease),
    background 0.16s var(--ease),
    border-color 0.16s var(--ease);
  cursor: pointer;
}

.shelf[hidden] {
  display: none;
}

.shelf:hover {
  color: var(--light);
  border-color: var(--hair-bright);
}

.shelf:active {
  transform: translateY(3px);
  box-shadow:
    0 2px 0 0 #0a070e,
    0 2px 0 1px var(--edge),
    0 8px 14px -10px rgba(0, 0, 0, 0.9);
}

.shelf:focus-visible {
  outline: 2px solid var(--attract);
  outline-offset: 4px;
}

.shelf[aria-pressed='true'] {
  transform: translateY(5px);
  border-color: color-mix(in srgb, var(--attract) 70%, #fff);
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(255, 255, 255, 0.35), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--attract) 88%, #fff), var(--attract));
  color: var(--attract-ink);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--attract) 55%, #000),
    0 0 26px -2px color-mix(in srgb, var(--attract) 55%, transparent),
    0 12px 30px -10px color-mix(in srgb, var(--attract) 45%, transparent),
    inset 0 2px 5px rgba(0, 0, 0, 0.18);
  cursor: default;
}

.shelf__art {
  flex: none;
  width: clamp(2.6rem, 1.8rem + 2vw, 3.6rem);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(8, 5, 12, 0.45);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6);
}

.shelf[aria-pressed='true'] .shelf__art {
  background: rgba(42, 28, 5, 0.12);
  box-shadow: inset 0 1px 3px rgba(42, 28, 5, 0.25);
}

.shelf__art svg {
  width: 78%;
  height: 78%;
  overflow: visible;
}

.shelf__text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.shelf__label {
  font-size: var(--step-1);
  font-variation-settings: 'wdth' 112, 'wght' 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.shelf__count {
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  opacity: 0.72;
}

/* Five across stops fitting before a phone does: wrap to three and two. */
@media (max-width: 64rem) {
  .shelves__row {
    flex-wrap: wrap;
  }

  .shelves__row > .shelf {
    flex: 1 1 30%;
  }

  .shelves__row--lead > .shelf--games,
  .shelves__row--lead > .shelf--friends {
    flex: 1 1 40%;
  }
}

/* A phone: art above the label. */
@media (max-width: 40rem) {
  .shelves,
  .shelves__row {
    gap: 0.5rem;
  }

  .shelf {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.45rem;
    padding: 0.7rem 0.4rem 0.75rem;
  }

  .shelf__text {
    align-items: center;
  }

  .shelf__label {
    font-size: var(--step--1);
    font-variation-settings: 'wdth' 100, 'wght' 800;
  }

  .shelf__count {
    font-size: var(--step--2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .shelf {
    transition: none;
  }
}

/* A source with nothing left in it, and Surprise me with nothing to pick. */
.shelf:disabled {
  opacity: 0.4;
  cursor: default;
}