/* Game collection showcase */
body[data-route="library"] #content-inner {
  width: 100%;
  max-width: none;
  padding: 0;
}

.library-showcase,
.library-showcase * {
  box-sizing: border-box;
}

.library-showcase {
  --library-line: rgba(100, 134, 187, .24);
  --library-panel: rgba(6, 16, 31, .87);
  --library-panel-strong: rgba(7, 18, 35, .96);
  --library-gold: #e9bb5a;
  --library-blue: #398fff;
  position: relative;
  isolation: isolate;
  min-height: 100%;
  overflow: hidden;
  padding: clamp(20px, 2vw, 34px);
  color: #e9eef8;
  background:
    linear-gradient(90deg, rgba(2, 9, 19, .97) 0%, rgba(2, 9, 19, .91) 35%, rgba(2, 9, 19, .55) 67%, rgba(2, 9, 19, .86) 100%),
    linear-gradient(180deg, rgba(2, 8, 17, .08), #020813 96%),
    url('../assets/bg.png') center top / cover no-repeat;
}

.library-showcase::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 67% 23%, rgba(38, 116, 255, .15), transparent 24%),
    repeating-linear-gradient(90deg, transparent 0 119px, rgba(69, 106, 157, .025) 120px),
    linear-gradient(180deg, transparent 0 72%, rgba(1, 7, 15, .88) 100%);
}

.library-showcase-glow {
  position: absolute;
  z-index: -1;
  width: min(58vw, 860px);
  aspect-ratio: 1;
  right: 4%;
  top: -21%;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(36, 126, 255, .16), transparent 67%);
  filter: blur(12px);
}

.library-showcase-heading {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}

.library-showcase-rule {
  width: 3px;
  height: 58px;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffd979, #9c651e);
  box-shadow: 0 0 18px rgba(234, 187, 88, .32);
}

.library-showcase-heading h2 {
  margin: 0;
  color: #f6f7fb;
  font-size: clamp(25px, 2.35vw, 38px);
  line-height: 1.08;
  letter-spacing: -.04em;
  text-shadow: 0 2px 18px #02050a;
}

.library-showcase-heading p {
  margin: 7px 0 0;
  color: #7f8ca2;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .22em;
}

.library-showcase-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(270px, 20vw, 320px);
  align-items: start;
  gap: clamp(16px, 1.6vw, 26px);
}

.library-showcase-main {
  min-width: 0;
}

.library-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 28px;
}

.library-stat-card {
  min-width: 0;
  min-height: 86px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 15px;
  border: 1px solid var(--library-line);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(10, 22, 41, .94), rgba(5, 14, 28, .91));
  box-shadow: inset 0 1px rgba(255,255,255,.025), 0 14px 38px rgba(0,0,0,.17);
  backdrop-filter: blur(12px);
}

.library-stat-card:last-child {
  border-color: rgba(207, 158, 67, .25);
}

.library-stat-icon {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(225, 182, 91, .25);
  border-radius: 50%;
  color: #e8b951;
  font-size: 21px;
  font-family: Arial, sans-serif;
  background: radial-gradient(circle at 36% 30%, rgba(236, 191, 92, .22), rgba(94, 63, 22, .16));
  box-shadow: inset 0 0 18px rgba(234, 185, 79, .1);
}

.library-stat-icon.download,
.library-stat-icon.clock {
  color: #67a9ff;
  border-color: rgba(65, 141, 244, .3);
  background: radial-gradient(circle at 36% 30%, rgba(57, 143, 255, .22), rgba(19, 55, 106, .16));
}

.library-stat-card div {
  min-width: 0;
  display: grid;
}

.library-stat-card strong {
  overflow: hidden;
  color: #f3cb73;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: clamp(18px, 1.55vw, 25px);
  font-weight: 800;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.library-stat-card:nth-child(2) strong,
.library-stat-card:nth-child(3) strong {
  color: #6daaff;
}

.library-stat-card b {
  margin-top: 3px;
  color: #bdc7d8;
  font-size: 12px;
  font-weight: 650;
}

.library-stat-card small {
  overflow: hidden;
  margin-top: 3px;
  color: #67748a;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.library-collection-panel {
  min-width: 0;
}

.library-collection-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 16px;
}

.library-collection-title h3 {
  margin: 0;
  color: #eef2f9;
  font-size: 18px;
}

.library-collection-title h3 span {
  color: #6f7c90;
  font-size: 13px;
  font-weight: 500;
}

.library-collection-title p {
  margin: 5px 0 0;
  color: #69778b;
  font-size: 11px;
}

.library-toolbar-controls {
  min-width: 0;
  display: flex;
  justify-content: flex-end;
  gap: 9px;
}

.library-search {
  width: clamp(150px, 17vw, 230px);
  height: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  border: 1px solid rgba(92, 124, 170, .24);
  border-radius: 6px;
  color: #75849b;
  background: rgba(5, 15, 29, .91);
}

.library-search span {
  font-size: 20px;
  line-height: 1;
}

.library-search input {
  min-width: 0;
  width: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  color: #dce6f4;
  font-size: 12px;
  background: transparent;
}

.library-search input::placeholder {
  color: #657187;
}

.library-toolbar-controls select {
  height: 40px;
  min-width: 118px;
  padding: 0 29px 0 11px;
  border: 1px solid rgba(92, 124, 170, .24);
  border-radius: 6px;
  outline: 0;
  color: #aeb9ca;
  font-size: 11px;
  background: rgba(5, 15, 29, .94);
}

.library-view-switch {
  height: 40px;
  display: flex;
  padding: 3px;
  border: 1px solid rgba(92, 124, 170, .24);
  border-radius: 6px;
  background: rgba(5, 15, 29, .94);
}

.library-view-switch button {
  width: 33px;
  border: 0;
  border-radius: 4px;
  color: #68768c;
  font-size: 18px;
  background: transparent;
  cursor: pointer;
}

.library-view-switch button.active {
  color: #edf4ff;
  background: #1b3c69;
  box-shadow: 0 0 14px rgba(45, 124, 229, .18);
}

.library-game-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.library-game-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(99, 127, 166, .25);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(10, 25, 45, .96), rgba(5, 15, 28, .98));
  box-shadow: 0 14px 34px rgba(0, 0, 0, .2);
  cursor: pointer;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.library-game-card:hover,
.library-game-card.selected {
  transform: translateY(-3px);
  border-color: rgba(230, 187, 91, .58);
  box-shadow: 0 17px 38px rgba(0,0,0,.34), 0 0 0 1px rgba(226,180,75,.08);
}

.library-card-art {
  position: relative;
  aspect-ratio: 1 / 1.08;
  overflow: hidden;
  background: #091323;
}

.library-card-art > img,
.library-card-fallback {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .45s ease;
}

.library-card-fallback {
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.78);
  font-size: 48px;
}

.library-game-card:hover .library-card-art > img,
.library-game-card:hover .library-card-fallback {
  transform: scale(1.045);
}

.library-card-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 48%, rgba(1, 8, 17, .9));
  pointer-events: none;
}

.library-favorite {
  position: absolute;
  z-index: 2;
  top: 9px;
  right: 9px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(231, 192, 94, .42);
  border-radius: 5px;
  color: #e8bf60;
  font-size: 19px;
  line-height: 1;
  background: rgba(4, 14, 27, .8);
  cursor: pointer;
  backdrop-filter: blur(6px);
}

.library-favorite.active {
  color: #07101c;
  background: #e8bf60;
  box-shadow: 0 0 16px rgba(232, 191, 96, .45);
}

.library-copy-badge {
  position: absolute;
  z-index: 2;
  top: 10px;
  left: 10px;
  padding: 4px 7px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 4px;
  color: #d6e1f0;
  font-size: 9px;
  font-weight: 700;
  background: rgba(5, 14, 28, .72);
  backdrop-filter: blur(7px);
}

.library-card-action {
  position: absolute;
  z-index: 3;
  right: 10px;
  bottom: 10px;
  left: 10px;
  opacity: 0;
  transform: translateY(9px);
  transition: opacity .2s ease, transform .2s ease;
}

.library-game-card:hover .library-card-action,
.library-game-card.selected .library-card-action {
  opacity: 1;
  transform: none;
}

.library-card-action button {
  width: 100%;
  height: 33px;
  border: 1px solid rgba(238, 195, 99, .7);
  border-radius: 5px;
  color: #11100b;
  font-size: 11px;
  font-weight: 800;
  background: linear-gradient(135deg, #f0cc78, #a56b22);
  box-shadow: 0 7px 18px rgba(0,0,0,.34);
  cursor: pointer;
}

.library-card-body {
  padding: 12px 12px 11px;
}

.library-card-body h4 {
  overflow: hidden;
  margin: 0;
  color: #f0f3f8;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.library-card-body > p {
  overflow: hidden;
  margin: 6px 0 10px;
  color: #67758a;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.library-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  color: #8d9aae;
  font-size: 9px;
}

.library-card-meta b {
  color: #8d9aae;
  font-weight: 600;
  white-space: nowrap;
}

.library-card-meta b.installed {
  color: #4bd08a;
}

.library-selected-action {
  display: none;
}

.library-selected-action button {
  cursor: pointer;
}

.library-game-grid.is-list {
  grid-template-columns: 1fr;
}

.library-game-grid.is-list .library-game-card {
  display: grid;
  grid-template-columns: 150px 1fr;
}

.library-game-grid.is-list .library-card-art {
  aspect-ratio: 16 / 10;
}

.library-game-grid.is-list .library-card-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16px 18px;
}

.library-game-grid.is-list .library-card-action {
  opacity: 1;
  right: 9px;
  bottom: 9px;
  left: 9px;
  transform: none;
}

.library-empty-state {
  grid-column: 1 / -1;
  min-height: 370px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 36px;
  border: 1px dashed rgba(108, 137, 179, .35);
  border-radius: 10px;
  text-align: center;
  background: rgba(5, 15, 29, .72);
  backdrop-filter: blur(8px);
}

.library-empty-state.compact {
  min-height: 250px;
}

.library-empty-state > span {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(230, 187, 91, .35);
  border-radius: 50%;
  color: var(--library-gold);
  font-size: 28px;
  background: rgba(227, 180, 76, .08);
}

.library-empty-state h4 {
  margin: 17px 0 7px;
  color: #e9edf5;
  font-size: 18px;
}

.library-empty-state p {
  margin: 0 0 19px;
  color: #728096;
  font-size: 12px;
}

.library-empty-state button,
.library-gold-button {
  min-width: 150px;
  padding: 10px 18px;
  border: 1px solid rgba(235, 194, 98, .64);
  border-radius: 5px;
  color: #eecb7b;
  text-decoration: none;
  background: rgba(108, 72, 24, .2);
  cursor: pointer;
}

.library-insights {
  display: grid;
  gap: 12px;
}

.library-insight-card {
  border: 1px solid rgba(91, 126, 178, .25);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(8, 20, 39, .94), rgba(5, 15, 29, .95));
  box-shadow: inset 0 1px rgba(255,255,255,.025), 0 18px 45px rgba(0,0,0,.2);
  backdrop-filter: blur(13px);
}

.library-insight-card h3 {
  margin: 0;
  color: #dfe6f1;
  font-size: 14px;
}

.library-level-card {
  min-height: 126px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 17px;
}

.library-level-card > div {
  flex: 1;
  min-width: 0;
}

.library-level-card p {
  margin: 0 0 9px;
  color: #bdc7d7;
  font-size: 13px;
  font-weight: 700;
}

.library-level-card strong {
  color: #f1c96f;
  font-family: Georgia, serif;
  font-size: 22px;
}

.library-xp {
  height: 6px;
  overflow: hidden;
  margin: 10px 0 7px;
  border-radius: 99px;
  background: rgba(72, 99, 139, .33);
}

.library-xp i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2c77eb, #4dd7ff);
  box-shadow: 0 0 12px rgba(55, 151, 255, .7);
}

.library-level-card small {
  color: #78869c;
  font-size: 10px;
}

.library-level-emblem {
  position: relative;
  flex: 0 0 68px;
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  border: 4px double #4c9cff;
  border-radius: 50%;
  color: #f6cb6a;
  font-family: Georgia, serif;
  font-size: 25px;
  font-weight: 800;
  background: radial-gradient(circle, #174f9a 0 37%, #0d254a 38% 58%, #2368bd 59% 64%, #071323 65%);
  box-shadow: 0 0 24px rgba(45, 137, 255, .45), inset 0 0 16px rgba(255,255,255,.14);
}

.library-level-emblem small {
  position: absolute;
  right: -2px;
  bottom: -4px;
  min-width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #071321;
  font-family: Arial, sans-serif;
  font-size: 9px;
  background: #efc66a;
}

.library-value-card,
.library-genre-card,
.library-recent-card {
  padding: 17px;
}

.library-value-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: 17px;
}

.library-value-total strong {
  color: #eac36c;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 21px;
}

.library-value-total span {
  color: #57d18c;
  font-size: 12px;
  font-weight: 750;
}

.library-mini-chart {
  height: 43px;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  margin: 7px 0 5px;
  padding: 0 5px;
  overflow: hidden;
}

.library-mini-chart i {
  width: 17%;
  height: 22%;
  border-top: 2px solid #50b873;
  transform: rotate(-6deg) translateY(-5px);
  filter: drop-shadow(0 0 4px rgba(77, 194, 117, .5));
}

.library-mini-chart i:nth-child(2) { transform: rotate(10deg) translateY(-9px); }
.library-mini-chart i:nth-child(3) { transform: rotate(-14deg) translateY(-7px); }
.library-mini-chart i:nth-child(4) { transform: rotate(7deg) translateY(-14px); }
.library-mini-chart i:nth-child(5) { transform: rotate(-18deg) translateY(-13px); }
.library-mini-chart i:nth-child(6) { transform: rotate(13deg) translateY(-19px); }
.library-mini-chart i:nth-child(7) { transform: rotate(-12deg) translateY(-21px); }

.library-value-card > small {
  color: #67758a;
  font-size: 9px;
}

.library-genre-content {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: center;
  gap: 15px;
  margin-top: 17px;
}

.library-donut {
  width: 94px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--donut));
  box-shadow: 0 0 18px rgba(39, 115, 218, .15);
}

.library-donut::before {
  content: '';
  grid-area: 1 / 1;
  width: 59%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #081527;
  box-shadow: inset 0 0 14px rgba(0,0,0,.55);
}

.library-donut span {
  z-index: 1;
  grid-area: 1 / 1;
  display: grid;
  color: #dfe8f5;
  font-size: 15px;
  font-weight: 750;
  text-align: center;
}

.library-donut span small {
  color: #66758b;
  font-size: 8px;
  font-weight: 500;
}

.library-genre-content ul,
.library-recent-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.library-genre-content li {
  display: grid;
  grid-template-columns: 7px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  margin: 8px 0;
  color: #8290a4;
  font-size: 9px;
}

.library-genre-content li i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.library-genre-content li span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.library-genre-content li b {
  color: #9eabbc;
  font-weight: 600;
}

.library-recent-card li {
  min-height: 48px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(89, 118, 160, .15);
}

.library-recent-card li:last-child {
  border-bottom: 0;
}

.library-recent-card li > img,
.library-recent-card li > span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  object-fit: cover;
}

.library-recent-card li div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.library-recent-card li strong {
  overflow: hidden;
  color: #dbe3ef;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.library-recent-card li small,
.library-recent-card time {
  color: #647287;
  font-size: 8px;
}

.library-recent-empty {
  display: block !important;
  padding: 22px 0;
  color: #6d7a8e;
  font-size: 10px;
  text-align: center;
}

.library-stats-button {
  width: 100%;
  height: 44px;
  border: 1px solid rgba(222, 176, 78, .64);
  border-radius: 6px;
  color: #e7bb5d;
  font-size: 12px;
  font-weight: 700;
  background: rgba(112, 74, 22, .16);
  box-shadow: inset 0 0 20px rgba(227, 176, 65, .04);
  cursor: pointer;
}

.library-stats-button:hover {
  color: #fff0c6;
  background: rgba(159, 105, 29, .24);
}

.library-stats-button span {
  margin-left: 8px;
}

@media (max-width: 1320px) {
  .library-game-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .library-stat-card { padding: 12px; }
  .library-stat-icon { flex-basis: 38px; width: 38px; height: 38px; font-size: 18px; }
  .library-stat-card strong { font-size: 17px; }
}

@media (max-width: 1120px) {
  .library-showcase-layout { grid-template-columns: minmax(0, 1fr) 260px; }
  .library-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .library-collection-toolbar { align-items: flex-start; flex-direction: column; }
  .library-toolbar-controls { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
  .library-search { flex: 1 1 200px; }
  .library-game-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 880px) {
  .library-showcase { background-position: 64% top; }
  .library-showcase-layout { grid-template-columns: 1fr; }
  .library-insights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .library-stats-button { align-self: stretch; height: auto; min-height: 44px; }
}

@media (max-width: 640px) {
  .library-showcase { padding: 17px 13px 26px; }
  .library-showcase-heading { margin-bottom: 18px; }
  .library-showcase-rule { height: 48px; }
  .library-stat-grid { gap: 8px; margin-bottom: 22px; }
  .library-stat-card { min-height: 76px; gap: 9px; padding: 10px; }
  .library-stat-card small { display: none; }
  .library-toolbar-controls select { flex: 1 1 130px; min-width: 0; }
  .library-view-switch { flex: 0 0 auto; }
  .library-game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .library-card-body { padding: 10px; }
  .library-card-body h4 { font-size: 13px; }
  .library-insights { grid-template-columns: 1fr; }
}

@media (max-width: 390px) {
  .library-stat-grid { grid-template-columns: 1fr; }
  .library-game-grid { grid-template-columns: 1fr; }
  .library-card-art { aspect-ratio: 16 / 10; }
  .library-card-action { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .library-game-card,
  .library-card-art > img,
  .library-card-fallback,
  .library-card-action { transition: none; }
}