/* ---------------------------------------------------------------------------
   library.css — Library, a PC game launcher (assets/js/dash/library.js):
   slate and steel, every game down the side, shelves of capsules beside, a
   game's page with a green PLAY. Under 900px it is a handheld PC's home: the
   list folds into a menu, the cards grow, the corners round and blue leads.
--------------------------------------------------------------------------- */

body.dash[data-theme='library'] {
  --dash-bg: #171d25;
  --dash-ink: #dfe3e6;
  --dash-dim: #8e97a1;
  --dash-line: rgba(255, 255, 255, 0.08);
  --dash-panel: #2a323d;
  --dash-accent: #1a9fff;
  --dash-accent-ink: #fff;
  --dash-radius: 4px;
  --lb-top: #12161c;
  --lb-side: #1c222b;
  --lb-play: linear-gradient(90deg, #6fac1f 0%, #4f8b1a 100%);
}

.lb {
  display: grid;
  grid-template-rows: auto 1fr;
  block-size: 100dvh;
  overflow: hidden;
}

/* --- the top bar ----------------------------------------------------------- */

.lb-top {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  min-width: 0;
  padding: 0.65rem 1.3rem;
  background: var(--lb-top);
  border-block-end: 1px solid var(--dash-line);
}

.lb-menu {
  display: none;
}

.lb-brand {
  color: var(--dash-ink);
  font-weight: 900;
  font-variation-settings: 'wdth' 112;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
}

.lb-tabs {
  display: flex;
  gap: 1.4rem;
}

.lb-tab {
  padding-block: 0.35rem;
  border-block-end: 3px solid transparent;
  color: var(--dash-dim);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
}

.lb-tab:hover {
  color: var(--dash-ink);
}

.lb-tab[aria-current] {
  color: #fff;
  border-color: var(--dash-accent);
}

.lb-top__side {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-inline-start: auto;
  min-width: 0;
}

/* --- the list down the side ------------------------------------------------- */

.lb-body {
  display: grid;
  grid-template-columns: 19rem minmax(0, 1fr);
  min-height: 0;
}

.lb-side {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--lb-side);
  border-inline-end: 1px solid var(--dash-line);
}

.lb-search {
  margin: 0.75rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid transparent;
  border-radius: 3px;
  background: #2b3440;
  color: var(--dash-ink);
  font: inherit;
  font-size: 0.9rem;
}

.lb-search:focus {
  border-color: var(--dash-accent);
  outline: none;
}

.lb-side__list {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding-block-end: 2rem;
  scrollbar-width: thin;
}

.lb-section summary {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0.95rem 0.35rem;
  color: var(--dash-dim);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  list-style: none;
  text-transform: uppercase;
  cursor: pointer;
}

.lb-section summary::-webkit-details-marker {
  display: none;
}

.lb-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.24rem 0.95rem;
  color: #c3c8ce;
  font-size: 0.86rem;
  text-decoration: none;
  white-space: nowrap;
}

.lb-row:hover {
  background: #2c3542;
  color: #fff;
}

.lb-row[aria-current] {
  background: #3d4654;
  color: #fff;
}

.lb-row__icon {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 1.4rem;
  block-size: 1.4rem;
  overflow: hidden;
  border-radius: 2px;
  background: linear-gradient(135deg, var(--g-deep, #333), var(--g-glow, #555));
  color: var(--g-light, #fff);
  font-size: 0.7rem;
  font-weight: 800;
}

.lb-row__icon img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.lb-row__name {
  overflow: hidden;
  text-overflow: ellipsis;
}

.lb-side__none {
  padding: 1rem;
  color: var(--dash-dim);
}

html.is-pad .lb-row:focus,
.lb-row:focus-visible {
  outline: 2px solid var(--dash-accent);
  outline-offset: -2px;
}

.lb-scrim[hidden] {
  display: none;
}

/* --- the main pane ------------------------------------------------------- */

.lb-main {
  min-height: 0;
  overflow: auto;
  padding: 1.5rem 2.2rem 4rem;
  background:
    radial-gradient(90% 60% at 30% 0%, rgba(42, 71, 105, 0.55), transparent 70%),
    var(--dash-bg);
  outline: none;
  scrollbar-width: thin;
}

.lb-shelf {
  margin-block-end: 2.3rem;
}

.lb-shelf__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-block-end: 0.7rem;
}

.lb-shelf__head h2,
.lb-page__sub {
  margin: 0;
  color: #c7ccd1;
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.lb-shelf__more {
  color: var(--dash-accent);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
}

.lb-shelf__row {
  display: flex;
  gap: 1rem;
  padding: 0.35rem 0.25rem 0.9rem;
  margin-inline: -0.25rem;
  overflow-x: auto;
  scrollbar-width: thin;
}

.lb-capsule {
  display: grid;
  align-content: start;
  gap: 0.45rem;
  flex: none;
  inline-size: 9.8rem;
  color: var(--dash-ink);
  text-decoration: none;
}

.lb-capsule__art {
  aspect-ratio: 4 / 5;
  border-radius: var(--dash-radius);
  box-shadow: 0 0.5rem 1.2rem rgba(0, 0, 0, 0.45);
  transition: transform 0.15s ease, filter 0.15s ease;
}

.lb-capsule.is-big {
  inline-size: 14.5rem;
}

.lb-capsule__name {
  overflow: hidden;
  font-size: 0.85rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lb-capsule:hover .lb-capsule__art {
  transform: translateY(-3px);
  filter: brightness(1.1);
}

.lb-capsule:focus,
html.is-pad .lb-capsule:focus {
  outline: none;
}

.lb-capsule:focus-visible .lb-capsule__art,
html.is-pad .lb-capsule:focus .lb-capsule__art {
  outline: 3px solid var(--dash-accent);
  outline-offset: 3px;
  transform: translateY(-3px) scale(1.03);
}

.dash-grid__tiles .lb-capsule {
  inline-size: auto;
}

.lb-wide {
  display: grid;
  align-content: start;
  gap: 0.25rem;
  flex: none;
  inline-size: 22rem;
  overflow: hidden;
  padding-block-end: 0.8rem;
  border-radius: var(--dash-radius);
  background: #222a35;
  color: var(--dash-ink);
  text-decoration: none;
}

.lb-wide__art {
  aspect-ratio: 16 / 9;
  margin-block-end: 0.5rem;
}

.lb-wide__when,
.lb-wide__name,
.lb-wide__line {
  padding-inline: 0.85rem;
}

.lb-wide__when {
  color: var(--dash-accent);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lb-wide__name {
  font-size: 1rem;
}

.lb-wide__line {
  color: var(--dash-dim);
  font-size: 0.85rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lb-wide:hover {
  background: #2a3442;
}

html.is-pad .lb-wide:focus,
.lb-wide:focus-visible {
  outline: 3px solid var(--dash-accent);
  outline-offset: 3px;
}

.lb-shelf--every .dash-grid__tiles {
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
}

.lb-page__title {
  margin: 0 0 1.2rem;
  font-size: 1.6rem;
  font-weight: 850;
}

.lb-page--night {
  display: grid;
  gap: 1.4rem;
}

.lb-friends {
  --dash-accent: #6fac1f;
}

/* --- a game's page ---------------------------------------------------------- */

.lb-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  block-size: clamp(14rem, 40vh, 25rem);
  margin: -1.5rem -2.2rem 0;
  padding: 1.6rem 2.2rem;
  overflow: hidden;
  background: linear-gradient(135deg, var(--g-deep, #1b2838), var(--g-glow, #2a475e));
}

.lb-hero__shot {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.lb-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(23, 29, 37, 0.95) 0%, rgba(23, 29, 37, 0.15) 55%, transparent 100%);
}

.lb-hero__name {
  position: relative;
  z-index: 1;
  margin: 0;
  max-inline-size: 70%;
  font-size: clamp(2rem, 4.6vw, 3.8rem);
  font-weight: 900;
  font-variation-settings: 'wdth' 106;
  line-height: 0.98;
  text-shadow: 0 0.3rem 1.6rem rgba(0, 0, 0, 0.6);
}

.lb-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem 2rem;
  margin: 0 -2.2rem;
  padding: 1rem 2.2rem;
  background: rgba(0, 0, 0, 0.32);
  border-block: 1px solid var(--dash-line);
}

.lb-play {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  block-size: 3.2rem;
  padding: 0 2.5rem;
  border: 0;
  border-radius: 3px;
  background: var(--lb-play);
  color: #fff;
  font: inherit;
  font-size: 1.05rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  cursor: pointer;
}

.lb-play:hover {
  filter: brightness(1.12);
}

html.is-pad .lb-play:focus,
.lb-play:focus-visible,
html.is-pad .lb-button:focus,
.lb-button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.lb-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 2rem;
  margin: 0;
}

.lb-fact {
  display: grid;
  gap: 0.15rem;
}

.lb-fact span {
  color: var(--dash-dim);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lb-fact strong {
  font-size: 0.95rem;
  font-weight: 650;
}

.lb-bar__side {
  display: flex;
  gap: 0.6rem;
  margin-inline-start: auto;
}

.lb-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  block-size: 2.6rem;
  padding: 0 1rem;
  border: 0;
  border-radius: 3px;
  background: #3d4654;
  color: #fff;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.lb-button--round {
  inline-size: 2.6rem;
  padding: 0;
}

.lb-button:hover {
  background: #4b5666;
}

.lb-game__body {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 2rem;
  margin-block: 1.7rem 2.4rem;
}

.lb-about p {
  margin: 0 0 0.9rem;
  color: #c3c9cf;
  line-height: 1.65;
}

.lb-about .lb-about__tagline {
  color: #fff;
  font-size: 1.15rem;
  font-weight: 650;
}

.lb-facts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: 0.9rem 1.4rem;
  margin-block-start: 1.2rem;
}

.lb-stills {
  display: grid;
  gap: 0.6rem;
  align-content: start;
}

.lb-stills img {
  inline-size: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--dash-radius);
}

/* --- a handheld PC (a phone, a small tablet) ---------------------------------- */

@media (max-width: 900px) {
  body.dash[data-theme='library'] {
    --dash-bg: #0e141b;
    --dash-radius: 12px;
    --lb-top: #0e141b;
    --lb-side: #151c25;
    --lb-play: #1a9fff;
  }

  .lb-top {
    gap: 0.8rem;
    padding: 0.7rem 0.9rem;
    flex-wrap: wrap;
  }

  .lb-menu {
    display: grid;
    place-items: center;
    inline-size: 2.6rem;
    block-size: 2.6rem;
    border: 0;
    border-radius: 999px;
    background: #23303f;
    color: #fff;
    cursor: pointer;
  }

  .lb-brand {
    font-size: 0.95rem;
  }

  .lb-tabs {
    order: 3;
    inline-size: 100%;
    gap: 0.5rem;
    overflow-x: auto;
  }

  .lb-tab {
    padding: 0.45rem 0.9rem;
    border: 0;
    border-radius: 999px;
    background: #1b2531;
    font-size: 0.8rem;
  }

  .lb-tab[aria-current] {
    background: var(--dash-accent);
    color: #fff;
  }

  .lb-top__side .views__label,
  .lb-top__side .dash-clock,
  .lb-top__side .friends-cta {
    display: none;
  }

  .lb-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .lb-side {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: 60;
    inline-size: min(21rem, 86vw);
    transform: translateX(-102%);
    transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: 1rem 0 3rem rgba(0, 0, 0, 0.55);
  }

  [dir='rtl'] .lb-side {
    transform: translateX(102%);
  }

  .lb.has-side .lb-side {
    transform: none;
  }

  .lb-scrim {
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(0, 0, 0, 0.55);
  }

  .lb-main {
    padding: 1rem 1rem 3rem;
    background: var(--dash-bg);
  }

  .lb-shelf--recent .lb-capsule {
    inline-size: 38vw;
  }

  .lb-shelf--recent .lb-capsule.is-big {
    inline-size: 56vw;
  }

  .lb-wide {
    inline-size: 76vw;
  }

  .lb-capsule__art {
    border-radius: var(--dash-radius);
  }

  .lb-shelf--every .dash-grid__tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7rem;
  }

  .lb-hero {
    block-size: 32vh;
    margin: -1rem -1rem 0;
    padding: 1rem;
  }

  .lb-hero__name {
    max-inline-size: 100%;
  }

  .lb-bar {
    margin: 0 -1rem;
    padding: 0.9rem 1rem;
    gap: 0.9rem 1.4rem;
  }

  .lb-play {
    flex: 1 1 100%;
    justify-content: center;
    border-radius: 12px;
  }

  .lb-bar__side {
    margin-inline-start: 0;
  }

  .lb-button {
    border-radius: 999px;
  }

  .lb-game__body {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lb-side,
  .lb-capsule__art {
    transition: none;
  }
}