/* Game library: white base, colorful accents */
body.page-games {
  --l-ink: #1f2a44;
  --l-muted: #6b7690;
  --l-line: #edf0f6;
  background: #fff;
  color: var(--l-ink);
}
.lib3 {
  position: relative;
  background:
    radial-gradient(420px 260px at 0% 0%, #ffe3ec 0, transparent 70%),
    radial-gradient(420px 280px at 100% 12%, #e4ecff 0, transparent 70%),
    radial-gradient(460px 320px at 50% 100%, #e3f8ef 0, transparent 70%),
    #fff;
  box-shadow: none;
}

/* Top bar */
.lib3-top {
  position: sticky;
  top: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: 52px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  background: #ffffffd9;
  backdrop-filter: blur(14px);
  border-bottom: 1px solid #f1f3f8;
}
.lib3-home {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 17px;
  background: linear-gradient(135deg, #ff8a3d, #ff5c8a);
  color: #fff;
  box-shadow: 0 8px 18px -8px #ff5c8a;
}
.lib3-home svg { width: 26px; height: 26px; }
.lib3-title { min-width: 0; }
.lib3-title small { display: block; color: #ff5c8a; font-size: 13px; font-weight: 800; letter-spacing: .02em; }
.lib3-title strong { display: block; font-size: 24px; font-weight: 800; line-height: 1.25; }
.lib3-coins {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 46px;
  padding: 0 16px;
  border-radius: 999px;
  background: linear-gradient(135deg, #fff4cc, #ffe08a);
  color: #92400e;
  font-size: 18px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: inset 0 0 0 2px #fff7d6, 0 6px 14px -8px #f59e0b;
}

/* Hero */
.lib3-hero {
  margin: 16px 20px 0;
  border-radius: 26px;
  box-shadow: 0 16px 34px -20px #7c3aed;
}

/* Catalog */
.lib3-catalog {
  margin-top: 0;
  padding: 22px 20px 40px;
  border-radius: 0;
  background: transparent;
}
.lib3-heading h1 { font-size: 26px; font-weight: 800; line-height: 1.35; }
.lib3-heading p { margin-top: 2px; color: var(--l-muted); font-size: 16px; }

.lib3-search {
  position: relative;
  display: block;
  margin: 16px 0 14px;
}
.lib3-search svg {
  position: absolute;
  top: 50%;
  left: 18px;
  width: 24px;
  height: 24px;
  color: #8b5cf6;
  transform: translateY(-50%);
  pointer-events: none;
}
.lib3-search #library-search {
  min-height: 58px;
  padding: 14px 18px 14px 54px;
  border: 2px solid #ece8ff;
  border-radius: 20px;
  background: #fff;
  font-size: 18px;
  box-shadow: 0 8px 20px -14px #8b5cf6;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.lib3-search #library-search:focus {
  border-color: #8b5cf6;
  outline: none;
  box-shadow: 0 0 0 4px #ede7ff;
}

/* Filters */
.lib3-filters { gap: 10px; margin-bottom: 20px; }
.lib3-filters .lib3-filter {
  --f1: #8b5cf6;
  --f2: #6366f1;
  --fs: #f1ecff;
  flex: 0 0 auto;
  min-height: 54px;
  padding: 8px 12px 8px 16px;
  border: 2px solid var(--fs);
  border-radius: 999px;
  background: #fff;
  color: var(--l-ink);
  font-size: 17px;
  box-shadow: none;
}
.lib3-filters .lib3-filter svg { width: 24px; height: 24px; color: var(--f1); }
.lib3-filters .lib3-filter b {
  display: grid;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  place-items: center;
  border-radius: 999px;
  background: var(--fs);
  color: var(--f1);
  font-size: 14px;
}
.lib3-filters .lib3-filter.filter-knowledge { --f1: #3b82f6; --f2: #06b6d4; --fs: #e6f0ff; }
.lib3-filters .lib3-filter.filter-brain { --f1: #f97316; --f2: #ff5c8a; --fs: #fff0e6; }
.lib3-filters .lib3-filter.filter-fortune { --f1: #ec4899; --f2: #a855f7; --fs: #fdeaf5; }
.lib3-filters .lib3-filter:hover { border-color: var(--f1); }
.lib3-filters .lib3-filter.selected {
  border-color: transparent;
  background: linear-gradient(135deg, var(--f1), var(--f2));
  color: #fff;
  box-shadow: 0 10px 20px -12px var(--f1);
}
.lib3-filters .lib3-filter.selected svg { color: #fff; }
.lib3-filters .lib3-filter.selected b { background: #ffffff33; color: #fff; }

/* Cards */
.lib3-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.lib3-card {
  --c1: #ff8a3d;
  --c2: #ff5c8a;
  --soft: #fff1e7;
  --ink: #c2410c;
  border: 1px solid var(--l-line);
  border-radius: 26px;
  background: #fff;
  color: var(--l-ink);
  box-shadow: 0 10px 26px -18px #1f2a44;
}
.lib3-card.tone-1 { --c1: #ec4899; --c2: #f472b6; --soft: #fdebf5; --ink: #be185d; }
.lib3-card.tone-2 { --c1: #8b5cf6; --c2: #a78bfa; --soft: #f1ecff; --ink: #6d28d9; }
.lib3-card.tone-3 { --c1: #3b82f6; --c2: #22d3ee; --soft: #e6f0ff; --ink: #1d4ed8; }
.lib3-card.tone-4 { --c1: #10b981; --c2: #34d399; --soft: #e3f8ef; --ink: #047857; }
.lib3-card.tone-5 { --c1: #f59e0b; --c2: #facc15; --soft: #fff6d9; --ink: #b45309; }
.lib3-card:hover { transform: translateY(-5px); box-shadow: 0 20px 34px -18px var(--c1); }

.lib3-art {
  position: relative;
  aspect-ratio: 4 / 3;
  margin: 10px 10px 0;
  overflow: hidden;
  border-radius: 20px;
  background:
    radial-gradient(circle at 30% 20%, #ffffffcc 0, transparent 55%),
    linear-gradient(145deg, var(--soft), color-mix(in srgb, var(--c2) 35%, #fff));
}
.lib3-art img { object-fit: contain; padding: 6px; }
.lib3-group {
  position: absolute;
  top: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px 5px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--c1), var(--c2));
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 6px 14px -8px var(--c1);
}
.lib3-group svg { width: 17px; height: 17px; }

.lib3-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px 16px;
}
.lib3-card h2 {
  padding: 0;
  color: var(--l-ink);
  font-size: 21px;
  line-height: 1.35;
  text-align: left;
  text-shadow: none;
}
.lib3-body p {
  display: -webkit-box;
  overflow: hidden;
  color: var(--l-muted);
  font-size: 15px;
  line-height: 1.6;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.lib3-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.lib3-chip {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--soft);
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}
.lib3-chip.level-easy { background: #e3f8ef; color: #047857; }
.lib3-chip.level-medium { background: #fff6d9; color: #b45309; }
.lib3-chip.level-hard { background: #ffe9ed; color: #be123c; }
.lib3-play {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  margin-top: auto;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--c1), var(--c2));
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  box-shadow: 0 10px 18px -12px var(--c1);
}
.lib3-play b { font-size: 13px; }

.lib3-empty {
  display: grid;
  gap: 8px;
  padding: 36px 16px;
  border: 2px dashed #ece8ff;
  border-radius: 22px;
  background: #fff;
  font-size: 17px;
}
.lib3-empty span { font-size: 36px; }

/* Bottom nav */
.page-games .library-bottom { background: #ffffffee; border-top: 1px solid #f1f3f8; box-shadow: 0 -10px 30px -18px #8b5cf6; }
.page-games .library-bottom [aria-current] { color: #db2777; background: linear-gradient(#fff, #fdebf5); }
.page-games :is(button, a, input):focus-visible { outline: 3px solid #8b5cf6; outline-offset: 3px; }

@media (max-width: 820px) {
  .lib3-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}
@media (max-width: 600px) {
  .lib3-top { grid-template-columns: 46px 1fr auto; padding: 10px 14px; }
  .lib3-home { width: 46px; height: 46px; border-radius: 15px; }
  .lib3-title strong { font-size: 20px; }
  .lib3-title small { font-size: 11px; }
  .lib3-coins { min-height: 40px; padding: 0 12px; font-size: 15px; }
  .lib3-hero { margin: 12px 14px 0; border-radius: 20px; }
  .lib3-catalog { padding: 18px 14px 30px; }
  .lib3-heading h1 { font-size: 22px; }
  .lib3-heading p { font-size: 14px; }
  .lib3-search #library-search { min-height: 52px; font-size: 16px; }
  .lib3-filters { gap: 8px; margin-bottom: 16px; }
  .lib3-filters .lib3-filter { min-height: 48px; font-size: 15px; }
  .lib3-card { border-radius: 20px; }
  .lib3-art { margin: 8px 8px 0; border-radius: 15px; aspect-ratio: 1 / 1; }
  .lib3-group { top: 7px; left: 7px; padding: 3px 8px 3px 6px; font-size: 11px; }
  .lib3-group svg { width: 14px; height: 14px; }
  .lib3-body { gap: 6px; padding: 10px 10px 12px; }
  .lib3-card h2 { font-size: 17px; }
  .lib3-body p { font-size: 13px; }
  .lib3-chip { padding: 3px 8px; font-size: 11px; }
  .lib3-play { min-height: 44px; font-size: 16px; border-radius: 13px; }
}
@media (max-width: 360px) {
  .lib3-grid { grid-template-columns: 1fr; }
}