/* Collection client v3 — values and motion taken from XiaoMueTrainer QML. */
@font-face {
  font-family: "DamueTabler";
  src: url("../collection/tabler-icons.ttf") format("truetype");
  font-display: block;
}

.box-library {
  --damue-bg: #eeedf1;
  --damue-panel: #f5f4f7;
  --damue-sidebar: #f5f4f7;
  --damue-card: #f9f8fb;
  --damue-input: #f0eff3;
  --damue-text: #2c2c32;
  --damue-secondary: #65656e;
  --damue-muted: #9898a2;
  --damue-line: #d8d7dc;
  --damue-accent: #7c5ce7;
  --damue-accent-bg: rgba(124,92,231,.10);
  color: var(--damue-text) !important;
  background: var(--damue-bg) !important;
}

[data-theme="dark"] .box-library,
[data-theme="gold"] .box-library {
  --damue-bg: #080808;
  --damue-panel: #0c0c0c;
  --damue-sidebar: #0a0a0a;
  --damue-card: #101010;
  --damue-input: #161310;
  --damue-text: #f5f2eb;
  --damue-secondary: #b5b0a5;
  --damue-muted: #6a6560;
  --damue-line: #1e1e1e;
  --damue-accent: #d4af37;
  --damue-accent-bg: rgba(212,175,55,.10);
}

.box-library-head {
  box-sizing: border-box !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 10px 0 15px !important;
  background: var(--damue-panel) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--damue-line) 50%, transparent) !important;
  box-shadow: none !important;
}

.box-client-identity {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  height: 40px !important;
}

.box-client-logo,
.box-library-head .box-client-logo {
  display: block !important;
  box-sizing: content-box !important;
  width: 22px !important;
  min-width: 22px !important;
  max-width: 22px !important;
  height: 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;
  flex: 0 0 22px !important;
  object-fit: contain !important;
  object-position: center !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.box-client-identity strong {
  display: block !important;
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  color: var(--damue-text) !important;
}

.box-window-actions { gap: 0 !important; }
.box-window-actions i { width: 32px !important; height: 32px !important; border-radius: 8px !important; }
.box-window-actions i::before,.box-window-actions i::after { background: var(--damue-secondary) !important; }

.box-client-body {
  display: grid !important;
  grid-template-columns: 180px minmax(0,1fr) !important;
  min-height: 490px !important;
  background: var(--damue-panel) !important;
}

.box-client-sidebar {
  box-sizing: border-box !important;
  width: 180px !important;
  padding: 10px !important;
  gap: 0 !important;
  background: var(--damue-sidebar) !important;
  border-right: 1px solid var(--damue-line) !important;
  overflow: hidden;
}

.box-client-caption {
  height: 26px !important;
  margin: 0 0 0 12px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: flex-end !important;
  padding-bottom: 6px !important;
  box-sizing: border-box !important;
  color: var(--damue-muted) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: 1.5px !important;
}

.box-client-system {
  height: 34px !important;
  margin-top: 0 !important;
  border-top: 1px solid var(--damue-line) !important;
}

.box-client-sidebar button {
  box-sizing: border-box !important;
  width: 160px !important;
  height: 42px !important;
  min-height: 42px !important;
  margin-top: 4px !important;
  padding: 0 12px 0 14px !important;
  gap: 0 !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--damue-text) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: background .18s ease, color .18s ease, transform .22s cubic-bezier(.16,1,.3,1) !important;
}

.box-client-sidebar button:hover {
  background: color-mix(in srgb, var(--damue-text) 6%, transparent) !important;
  transform: translateX(3px) !important;
}

.box-client-sidebar button i,
.box-client-sidebar button b {
  font-family: "DamueTabler" !important;
  font-style: normal !important;
  font-weight: normal !important;
}

.box-client-sidebar button i {
  width: 30px !important;
  flex: 0 0 30px !important;
  display: grid !important;
  place-items: center !important;
  font-size: 18px !important;
  color: currentColor !important;
}

.box-client-sidebar button span { flex: 1; text-align: left; }
.box-client-sidebar button b { width: 24px; font-size: 15px !important; transform: rotate(90deg); }
.box-client-sidebar button::before { left: -10px !important; top: 10px !important; bottom: 10px !important; width: 3px !important; }

.box-client-sidebar button.is-active {
  color: var(--damue-accent) !important;
  font-weight: 800 !important;
  background: linear-gradient(90deg,color-mix(in srgb,var(--damue-accent) 20%,transparent),color-mix(in srgb,var(--damue-accent) 4%,transparent)) !important;
}

.box-client-sidebar button.is-active::before { background: var(--damue-accent) !important; }
.box-client-sidebar button.is-child { height: 40px !important; min-height: 40px !important; padding-left: 26px !important; font-size: 12px !important; }
.box-client-sidebar button.is-child i { width: 26px !important; flex-basis: 26px !important; font-size: 16px !important; }
.box-client-sidebar button.is-mod { margin-top: auto !important; color: #f59e0b !important; font-weight: 800 !important; }

.box-client-workspace {
  box-sizing: border-box !important;
  padding: 20px 20px 8px 28px !important;
  grid-template-rows: 44px 338px 30px !important;
  gap: 12px !important;
  background: var(--damue-panel) !important;
}

.box-workspace-title {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
}

.box-workspace-title h2 {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  color: var(--damue-text) !important;
  font-size: 24px !important;
  line-height: 32px !important;
  font-weight: 800 !important;
}

.box-library-refresh {
  width: 32px !important;
  height: 32px !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: transparent !important;
  color: color-mix(in srgb,var(--damue-text) 70%,transparent) !important;
  font-family: "DamueTabler" !important;
  font-size: 18px !important;
}

.box-library-refresh:hover { color: var(--damue-accent) !important; background: color-mix(in srgb,var(--damue-accent) 10%,transparent) !important; }

.box-workspace-title .box-search {
  box-sizing: border-box !important;
  width: 220px !important;
  min-width: 180px !important;
  max-width: 360px !important;
  height: 36px !important;
  flex: 0 1 220px !important;
  margin-left: auto !important;
  padding: 0 14px 0 12px !important;
  gap: 8px !important;
  border: 1px solid var(--damue-line) !important;
  border-radius: 18px !important;
  background: color-mix(in srgb,var(--damue-text) 4%,transparent) !important;
  box-shadow: none !important;
}

.box-search > span { font-family: "DamueTabler" !important; color: var(--damue-secondary) !important; font-size: 15px !important; }
.box-search input { color: var(--damue-text) !important; font-size: 13px !important; }
.box-search input::placeholder { color: var(--damue-muted) !important; }
.box-search kbd { display: none !important; }

.box-carousel-viewport {
  height: 338px !important;
  min-height: 338px !important;
  padding-top: 8px !important;
  overflow: hidden !important;
}

.box-game-grid {
  height: 330px !important;
  grid-template-columns: repeat(5,minmax(0,1fr)) !important;
  grid-template-rows: repeat(3,104px) !important;
  grid-auto-rows: 104px !important;
  gap: 8px !important;
  align-content: start !important;
}

.box-game-card {
  height: 104px !important;
  aspect-ratio: 210/110 !important;
  overflow: visible !important;
  contain: layout !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: var(--damue-card) !important;
  box-shadow: 0 3px 0 rgba(18,16,33,.09) !important;
  transform: translate3d(0,0,0) scale(1) !important;
  transition: transform .26s cubic-bezier(.2,.8,.2,1),box-shadow .26s,border-color .2s !important;
}

.box-game-card img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 8px !important;
  object-fit: cover !important;
  transform: none !important;
  filter: none !important;
  clip-path: inset(0 round 8px);
}

.box-game-card::before {
  inset: 0 !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg,rgba(255,255,255,.12),transparent 38%,rgba(0,0,0,.24)) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18) !important;
}

.box-game-card:hover,
.box-game-card.is-selected:hover {
  z-index: 7 !important;
  transform: translate3d(0,-5px,0) scale(1.035) !important;
  box-shadow: 0 12px 24px rgba(13,12,25,.15),0 0 0 1.5px var(--damue-accent) !important;
}

.box-game-card.is-selected {
  transform: translate3d(0,0,0) scale(1) !important;
  box-shadow: 0 0 0 2px var(--damue-accent),0 8px 20px color-mix(in srgb,var(--damue-accent) 18%,transparent) !important;
}

.box-game-card:hover img,.box-game-card.is-selected img,.box-game-card:hover.is-selected img { transform: none !important; filter: none !important; }
.box-card-glare { border-radius: 8px; clip-path: inset(0 round 8px); }

.box-card-favorite {
  position: absolute;
  right: 8px;
  top: 8px;
  z-index: 12;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1.5px solid rgba(255,255,255,.3);
  border-radius: 50%;
  background: rgba(0,0,0,.35);
  color: #f59e0b;
  opacity: .68;
  font-size: 16px;
  line-height: 1;
  transition: opacity .2s,transform .22s cubic-bezier(.16,1,.3,1);
}

.box-game-card:hover .box-card-favorite { opacity: 1; transform: scale(1.08); }

.box-library-foot {
  height: 30px !important;
  color: var(--damue-muted) !important;
  border-top: 1px solid var(--damue-line);
  padding-top: 8px;
}

.box-library-foot p > span { display: none !important; }
.box-library-foot p > strong { color: var(--damue-secondary) !important; font-size: 10px !important; }
.box-library-foot > button { color: var(--damue-muted) !important; font-size: 10px !important; }

@media (max-width: 1450px) {
  .box-client-body { grid-template-columns: 158px minmax(0,1fr) !important; }
  .box-client-sidebar { width: 158px !important; }
  .box-client-sidebar button { width: 138px !important; padding-left: 10px !important; }
  .box-client-sidebar button.is-child { padding-left: 19px !important; }
  .box-client-workspace { padding-left: 18px !important; }
}

@media (max-width: 1120px) {
  .box-client-body { grid-template-columns: 1fr !important; min-height: 0 !important; }
  .box-client-sidebar { display: none !important; }
  .box-client-workspace { grid-template-rows: 44px 338px 30px !important; padding: 14px !important; }
}

@media (max-width: 720px) {
  .box-library-head { height: 40px !important; min-height: 40px !important; }
  .box-client-logo,.box-library-head .box-client-logo { display:block!important;width:22px!important;min-width:22px!important;max-width:22px!important;height:22px!important;min-height:22px!important;max-height:22px!important; }
  .box-workspace-title h2 { font-size: 18px !important; }
  .box-workspace-title .box-search { width: 52% !important; min-width: 0 !important; flex-basis: 52% !important; }
}