/* 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; }
}

/* Figurine cabinet and YouYi Coin */
.library-showcase-heading {
  align-items: center;
}

.library-mode-switch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding: 4px;
  border: 1px solid rgba(103, 139, 190, .28);
  border-radius: 7px;
  background: rgba(3, 11, 23, .72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
}

.library-mode-switch button {
  min-width: 104px;
  min-height: 38px;
  padding: 8px 15px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #8291a7;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.library-mode-switch button:hover {
  color: #d9e7fb;
}

.library-mode-switch button.active {
  color: #f5cf78;
  background: linear-gradient(135deg, rgba(202, 150, 49, .24), rgba(21, 65, 116, .44));
  box-shadow: inset 0 0 0 1px rgba(225, 174, 69, .52), 0 5px 16px rgba(0, 0, 0, .23);
}

.library-figurine-showcase {
  background:
    linear-gradient(180deg, rgba(2, 8, 18, .34), rgba(2, 8, 18, .94) 76%),
    radial-gradient(circle at 57% 23%, rgba(24, 99, 211, .22), transparent 28%),
    url('../assets/bg.png') 63% top / cover no-repeat;
}

.library-figurine-showcase::before {
  background:
    linear-gradient(90deg, rgba(2, 8, 18, .92) 0%, rgba(2, 8, 18, .35) 36%, rgba(2, 8, 18, .28) 69%, rgba(2, 8, 18, .88) 100%),
    linear-gradient(180deg, rgba(2, 8, 18, .16), rgba(2, 8, 18, .92));
}

.figurine-summary-strip {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: clamp(26px, 4.3vw, 72px);
  min-height: 76px;
  margin: -2px 0 18px;
  padding: 4px 5px;
  border-top: 1px solid rgba(225, 175, 71, .18);
  border-bottom: 1px solid rgba(104, 139, 189, .18);
}

.figurine-summary-strip > span {
  display: grid;
  gap: 5px;
}

.figurine-summary-strip small {
  color: #7f90a9;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
}

.figurine-summary-strip strong {
  color: #e6edf8;
  font-size: 19px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.figurine-summary-strip em {
  color: #8190a5;
  font-size: 11px;
  font-style: normal;
}

.figurine-summary-strip .coin strong {
  color: #f0bd4f;
}

.figurine-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(274px, 296px);
  gap: 15px;
}

.figurine-main {
  min-width: 0;
}

.figurine-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(230px, .75fr) minmax(390px, 1.35fr);
  min-height: 390px;
  overflow: hidden;
  border: 1px solid rgba(101, 137, 188, .28);
  border-radius: 9px;
  background:
    radial-gradient(circle at 66% 42%, rgba(39, 118, 255, .2), transparent 30%),
    linear-gradient(135deg, rgba(5, 17, 34, .95), rgba(3, 10, 22, .78));
  box-shadow: 0 18px 42px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .03);
}

.figurine-stage::before {
  position: absolute;
  inset: 0;
  content: '';
  background:
    linear-gradient(90deg, transparent 49.8%, rgba(72, 121, 190, .08) 50%, transparent 50.2%),
    linear-gradient(0deg, transparent 49.8%, rgba(72, 121, 190, .055) 50%, transparent 50.2%);
  background-size: 72px 72px;
  opacity: .6;
  pointer-events: none;
}

.figurine-stage-copy {
  position: relative;
  z-index: 3;
  align-self: center;
  padding: 34px 10px 34px 36px;
}

.figurine-stage-copy > span {
  display: block;
  margin-bottom: 11px;
  color: #4e96ee;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .16em;
}

.figurine-stage-copy h3 {
  max-width: 260px;
  margin: 0 0 8px;
  color: #f3f6fb;
  font-size: clamp(24px, 2.25vw, 36px);
  letter-spacing: .02em;
}

.figurine-stage-copy p {
  margin: 0 0 23px;
  color: #8796ad;
  font-size: 13px;
}

.figurine-stage-copy > div {
  display: flex;
  align-items: center;
  gap: 11px;
}

.figurine-stage-copy b {
  padding: 6px 11px;
  border: 1px solid rgba(230, 178, 67, .55);
  border-radius: 999px;
  color: #f0c767;
  background: rgba(142, 94, 12, .18);
  font-size: 11px;
}

.figurine-stage-copy small {
  color: #5fc895;
  font-size: 11px;
}

.figurine-model {
  position: relative;
  z-index: 2;
  min-height: 390px;
  overflow: hidden;
}

.figurine-model img {
  position: absolute;
  inset: 21px 25px 55px 7px;
  z-index: 2;
  width: calc(100% - 32px);
  height: calc(100% - 76px);
  object-fit: cover;
  object-position: center;
  border: 1px solid rgba(112, 160, 225, .28);
  border-radius: 54% 54% 18px 18px;
  filter: saturate(1.08) contrast(1.07);
  box-shadow: 0 20px 45px rgba(0, 0, 0, .38), inset 0 0 28px rgba(15, 82, 177, .18);
  clip-path: polygon(11% 0, 89% 0, 100% 16%, 94% 100%, 6% 100%, 0 16%);
}

.figurine-model-aura {
  position: absolute;
  z-index: 1;
  inset: 17% 5% 12% 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(29, 118, 255, .42), rgba(19, 75, 171, .12) 40%, transparent 69%);
  filter: blur(4px);
}

.figurine-model-glass {
  position: absolute;
  z-index: 3;
  inset: 21px 25px 55px 7px;
  border-radius: 54% 54% 18px 18px;
  clip-path: polygon(11% 0, 89% 0, 100% 16%, 94% 100%, 6% 100%, 0 16%);
  background: linear-gradient(117deg, rgba(255, 255, 255, .14), transparent 22%, transparent 72%, rgba(91, 151, 235, .13));
  pointer-events: none;
}

.figurine-model > i {
  position: absolute;
  z-index: 4;
  left: 12%;
  right: 10%;
  bottom: 30px;
  height: 32px;
  border: 1px solid rgba(231, 181, 74, .54);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(244, 190, 76, .5), rgba(107, 67, 5, .2) 42%, rgba(7, 17, 31, .96) 70%);
  box-shadow: 0 0 26px rgba(232, 170, 50, .3), inset 0 0 13px rgba(255, 213, 122, .25);
}

.figurine-stage-status {
  position: absolute;
  z-index: 5;
  right: 22px;
  bottom: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border: 1px solid rgba(80, 132, 198, .22);
  border-radius: 5px;
  background: rgba(4, 13, 27, .82);
}

.figurine-stage-status span {
  color: #64d09a;
  font-size: 10px;
  font-weight: 800;
}

.figurine-stage-status small {
  color: #74839a;
  font-size: 9px;
}

.figurine-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 2px 10px;
}

.figurine-section-heading small {
  color: #c69a43;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .13em;
}

.figurine-section-heading h3 {
  margin: 3px 0 0;
  color: #e8eef8;
  font-size: 16px;
}

.figurine-section-heading > span {
  color: #728198;
  font-size: 10px;
}

.figurine-shelf {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.figurine-shelf-item {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  min-width: 0;
  min-height: 76px;
  padding: 7px;
  border: 1px solid rgba(98, 133, 183, .2);
  border-radius: 7px;
  background: rgba(5, 15, 29, .82);
  color: #dce6f5;
  text-align: left;
  cursor: pointer;
  transition: border-color .18s ease, transform .18s ease, background .18s ease;
}

.figurine-shelf-item:hover {
  transform: translateY(-2px);
  border-color: rgba(76, 143, 230, .58);
}

.figurine-shelf-item.active {
  border-color: rgba(225, 172, 61, .68);
  background: linear-gradient(135deg, rgba(56, 37, 7, .54), rgba(7, 25, 48, .9));
  box-shadow: 0 0 18px rgba(226, 168, 48, .1);
}

.figurine-shelf-art {
  width: 62px;
  height: 60px;
  overflow: hidden;
  border-radius: 5px;
  background: #091423;
}

.figurine-shelf-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.figurine-shelf-item > span:last-child {
  min-width: 0;
}

.figurine-shelf-item b,
.figurine-shelf-item small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.figurine-shelf-item b {
  margin-bottom: 6px;
  color: #dfe8f5;
  font-size: 12px;
}

.figurine-shelf-item small {
  color: #78879c;
  font-size: 9px;
}

.figurine-market-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.figurine-market-card {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 92px;
  padding: 8px;
  border: 1px solid rgba(98, 133, 183, .2);
  border-radius: 7px;
  background: rgba(5, 15, 29, .82);
}

.figurine-market-card > img {
  width: 88px;
  height: 74px;
  object-fit: cover;
  border-radius: 5px;
}

.figurine-market-card > div {
  min-width: 0;
}

.figurine-market-card span {
  color: #d2a847;
  font-size: 9px;
  font-weight: 900;
}

.figurine-market-card h4 {
  overflow: hidden;
  margin: 4px 0;
  color: #edf2fa;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.figurine-market-card p {
  overflow: hidden;
  margin: 0;
  color: #77869b;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.figurine-market-card button {
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid rgba(224, 173, 66, .48);
  border-radius: 5px;
  background: rgba(171, 116, 13, .16);
  color: #dfbb6a;
  font-size: 9px;
  cursor: pointer;
}

.figurine-market-card button:hover {
  color: #101724;
  background: #e4b54d;
}

.figurine-market-card button b {
  font-size: 11px;
}

.figurine-market-empty {
  display: grid;
  place-items: center;
  min-height: 92px;
  grid-column: 1 / -1;
  border: 1px dashed rgba(99, 135, 183, .3);
  border-radius: 7px;
  background: rgba(4, 13, 26, .7);
}

.figurine-market-empty strong {
  color: #dfe8f6;
  font-size: 13px;
}

.figurine-market-empty span {
  color: #718198;
  font-size: 10px;
}

.figurine-side {
  display: grid;
  align-content: start;
  gap: 10px;
}

.figurine-coin-card,
.figurine-detail-card,
.figurine-flow-card {
  border: 1px solid rgba(100, 137, 187, .26);
  border-radius: 8px;
  background: rgba(5, 15, 29, .88);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
}

.figurine-coin-card {
  position: relative;
  overflow: hidden;
  padding: 21px;
  background:
    radial-gradient(circle at 88% 3%, rgba(218, 161, 45, .17), transparent 31%),
    linear-gradient(145deg, rgba(8, 26, 50, .96), rgba(5, 14, 28, .94));
}

.figurine-coin-mark {
  position: absolute;
  top: 17px;
  right: 18px;
  display: grid;
  width: 41px;
  height: 41px;
  place-items: center;
  border: 2px solid #d6a842;
  border-radius: 50%;
  color: #f3c65c;
  background: radial-gradient(circle, #173e83, #07162d);
  box-shadow: 0 0 19px rgba(45, 119, 230, .28);
  font-family: Georgia, serif;
  font-size: 19px;
  font-weight: 900;
}

.figurine-coin-card > small {
  color: #648fca;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .13em;
}

.figurine-coin-card h3 {
  margin: 8px 0 10px;
  color: #f2c45b;
  font-size: 31px;
  font-variant-numeric: tabular-nums;
}

.figurine-coin-card h3 em {
  color: #a4874a;
  font-size: 12px;
  font-style: normal;
}

.figurine-coin-card > p {
  margin: 0 0 16px;
  color: #8190a6;
  font-size: 10px;
  line-height: 1.75;
}

.figurine-rate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 0;
  border-top: 1px solid rgba(99, 137, 188, .2);
  border-bottom: 1px solid rgba(99, 137, 188, .2);
  color: #8190a6;
  font-size: 10px;
}

.figurine-rate strong {
  color: #e9bd5e;
  font-size: 11px;
}

.figurine-recharge-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
}

.figurine-recharge-actions button {
  min-height: 36px;
  border: 1px solid rgba(218, 169, 66, .48);
  border-radius: 5px;
  background: rgba(170, 116, 14, .14);
  color: #e6bc64;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.figurine-recharge-actions button:hover {
  background: rgba(207, 151, 35, .26);
}

.figurine-coin-card > a {
  display: flex;
  justify-content: space-between;
  margin-top: 13px;
  color: #71aaf0;
  font-size: 10px;
  text-decoration: none;
}

.figurine-detail-card,
.figurine-flow-card {
  padding: 18px;
}

.figurine-detail-card header {
  display: flex;
  justify-content: space-between;
  color: #7d8da4;
  font-size: 10px;
}

.figurine-detail-card header b {
  color: #e2b859;
}

.figurine-detail-card h3 {
  margin: 12px 0 4px;
  color: #e9eef7;
  font-size: 17px;
}

.figurine-detail-card > p {
  margin: 0 0 14px;
  color: #718198;
  font-size: 10px;
}

.figurine-detail-card dl {
  display: grid;
  gap: 9px;
  margin: 0;
}

.figurine-detail-card dl div {
  display: flex;
  justify-content: space-between;
  color: #78879c;
  font-size: 10px;
}

.figurine-detail-card dt,
.figurine-detail-card dd {
  margin: 0;
}

.figurine-detail-card dd {
  color: #b7c1cf;
}

.figurine-detail-card dd.owned {
  color: #5ec892;
}

.figurine-flow-card h3 {
  margin: 0 0 13px;
  color: #e7edf7;
  font-size: 13px;
}

.figurine-flow-card ol {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.figurine-flow-card li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #8795a9;
  font-size: 10px;
}

.figurine-flow-card li b {
  display: grid;
  flex: 0 0 23px;
  width: 23px;
  height: 23px;
  place-items: center;
  border: 1px solid rgba(210, 159, 54, .43);
  border-radius: 50%;
  color: #dbb45d;
  background: rgba(155, 102, 8, .14);
  font-size: 9px;
}

.figurine-model-3d {
  overflow: visible;
  perspective: 1100px;
}

.figurine-3d-viewer {
  position: absolute;
  z-index: 3;
  inset: 6px 14px 41px 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  outline: none;
  perspective: 980px;
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.figurine-3d-viewer:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(83, 155, 249, .66);
}

.figurine-3d-viewer.is-dragging {
  cursor: grabbing;
}

.figurine-3d-grid {
  position: absolute;
  inset: 14% 3% 5%;
  border-radius: 50%;
  background:
    repeating-radial-gradient(ellipse at 50% 68%, rgba(83, 146, 230, .2) 0 1px, transparent 1px 24px),
    linear-gradient(90deg, transparent 49.8%, rgba(87, 151, 233, .2) 50%, transparent 50.2%);
  transform: rotateX(66deg) translateY(27%);
  opacity: .44;
  filter: drop-shadow(0 0 10px rgba(47, 118, 214, .2));
  pointer-events: none;
}

.figurine-3d-object {
  position: relative;
  z-index: 4;
  width: clamp(230px, 28vw, 344px);
  aspect-ratio: 1;
  transform-style: preserve-3d;
  will-change: transform;
  filter: drop-shadow(0 26px 20px rgba(0, 0, 0, .54)) drop-shadow(0 0 22px rgba(47, 113, 224, .25));
}

.figurine-model .figurine-3d-layer,
.figurine-model .figurine-3d-front {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  box-shadow: inset 0 0 12px rgba(255, 206, 101, .16);
  pointer-events: none;
}

.figurine-model .figurine-3d-layer {
  opacity: .9;
  box-shadow:
    inset 0 0 16px rgba(38, 20, 2, .55),
    inset 0 0 3px rgba(255, 205, 92, .38);
}

.figurine-model .figurine-3d-front {
  z-index: 3;
  transform: translateZ(3px);
  filter: saturate(1.08) contrast(1.05);
}

.figurine-3d-shine {
  position: absolute;
  z-index: 5;
  inset: 7%;
  border-radius: 50%;
  transform: translateZ(6px);
  background: linear-gradient(112deg, rgba(255, 255, 255, .25), transparent 19%, transparent 64%, rgba(71, 147, 255, .12));
  mix-blend-mode: screen;
  opacity: .72;
  pointer-events: none;
}

.figurine-3d-hint {
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: 4px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  border: 1px solid rgba(92, 140, 203, .25);
  border-radius: 999px;
  color: #8292a8;
  background: rgba(3, 12, 25, .78);
  font-size: 9px;
  transform: translateX(-50%);
  white-space: nowrap;
  pointer-events: none;
}

.figurine-3d-hint i {
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #d7a94a;
}

.figurine-model .figurine-3d-base {
  z-index: 2;
  left: 15%;
  right: 12%;
  bottom: 23px;
  height: 38px;
  box-shadow:
    0 0 34px rgba(232, 170, 50, .38),
    inset 0 0 16px rgba(255, 213, 122, .35);
}

.figurine-model-3d::after {
  position: absolute;
  z-index: 1;
  left: 22%;
  right: 20%;
  bottom: 42px;
  height: 34%;
  border-radius: 50%;
  content: '';
  background: linear-gradient(180deg, rgba(32, 111, 229, .32), transparent);
  clip-path: polygon(43% 0, 57% 0, 100% 100%, 0 100%);
  filter: blur(8px);
  opacity: .58;
  pointer-events: none;
}

.library-showcase {
  --scene-x: 0px;
  --scene-y: 0px;
}

.library-showcase-glow {
  transform: translate3d(var(--scene-x), var(--scene-y), 0) scale(1.04);
  transition: transform .32s ease-out;
}

.library-game-card,
.figurine-shelf-item,
.figurine-market-card {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --glow-x: 50%;
  --glow-y: 50%;
  position: relative;
  transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateZ(0);
  transform-style: preserve-3d;
  will-change: transform;
}

.library-game-card::after,
.figurine-shelf-item::after,
.figurine-market-card::after {
  position: absolute;
  z-index: 7;
  inset: 0;
  border-radius: inherit;
  content: '';
  background:
    radial-gradient(circle at var(--glow-x) var(--glow-y), rgba(123, 181, 255, .19), transparent 34%),
    linear-gradient(118deg, transparent 24%, rgba(255, 255, 255, .085) 45%, transparent 63%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}

.library-game-card:hover,
.figurine-shelf-item:hover,
.figurine-market-card:hover {
  transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(-4px) translateZ(6px);
}

.library-game-card:hover::after,
.library-game-card.selected::after,
.figurine-shelf-item:hover::after,
.figurine-shelf-item.active::after,
.figurine-market-card:hover::after {
  opacity: 1;
}

.library-game-card .library-card-art,
.library-game-card .library-card-body,
.figurine-shelf-item > *,
.figurine-market-card > * {
  position: relative;
  z-index: 2;
  transform: translateZ(10px);
}

.library-game-card .library-card-art {
  transform: translateZ(15px);
}

.library-game-card .library-card-art > img {
  filter: saturate(1.08) contrast(1.06);
}

.figurine-3d-shine {
  animation: figurineShineSweep 5.8s ease-in-out infinite;
}

.figurine-model .figurine-3d-base {
  animation: figurineBasePulse 3.2s ease-in-out infinite;
}

@keyframes figurineShineSweep {
  0%,100% { opacity: .42; transform: translateZ(6px) rotate(-4deg); }
  48% { opacity: .86; transform: translateZ(8px) rotate(5deg); }
}

@keyframes figurineBasePulse {
  0%,100% { filter: brightness(.9); opacity: .78; }
  50% { filter: brightness(1.22); opacity: 1; }
}

@media (max-width: 1360px) and (min-width: 769px) {
  .figurine-layout { grid-template-columns: minmax(0, 1fr) 260px; }
  .figurine-stage { grid-template-columns: minmax(205px, .7fr) minmax(320px, 1.3fr); }
  .figurine-stage-copy { padding-left: 26px; }
  .figurine-shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .figurine-market-grid { grid-template-columns: 1fr; }
  .figurine-summary-strip { gap: 28px; }
}

@media (max-width: 1080px) {
  .figurine-layout { grid-template-columns: 1fr; }
  .figurine-side { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .figurine-stage { grid-template-columns: minmax(200px, .75fr) minmax(330px, 1.25fr); }
}

@media (max-width: 768px) {
  .library-showcase-heading { align-items: flex-start; flex-wrap: wrap; }
  .library-mode-switch { width: 100%; margin: 12px 0 0; }
  .library-mode-switch button { flex: 1; }
  .figurine-summary-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; padding: 14px 4px; }
  .figurine-stage { grid-template-columns: 1fr; min-height: 570px; }
  .figurine-stage-copy { padding: 26px 24px 0; }
  .figurine-model { min-height: 390px; }
  .figurine-stage-status { left: 18px; right: 18px; justify-content: space-between; }
  .figurine-shelf,
  .figurine-market-grid,
  .figurine-side { grid-template-columns: 1fr; }
  .figurine-market-card { grid-template-columns: 72px minmax(0, 1fr) auto; }
  .figurine-market-card > img { width: 72px; height: 64px; }
  .figurine-3d-object { width: min(78vw, 320px); }
}

@media (prefers-reduced-motion: reduce) {
  .figurine-3d-object { will-change: auto; }
  .library-showcase-glow,
  .library-game-card,
  .figurine-shelf-item,
  .figurine-market-card { transition: none; transform: none; will-change: auto; }
  .figurine-3d-shine,
  .figurine-model .figurine-3d-base { animation: none; }
}