/* ==========================================================================
   Tyrone v10 — "library" pages: all games A–Z, all unblocked, browser games,
   SEO collections, per-category SEO lists
   Long hand-written copy, game walls between it, a rail on the right.
   ========================================================================== */
.lib{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:start;margin-top:20px}
.lib-main{min-width:0}
.lib-main > .player{display:contents}

/* the page title opens the column as a poster */
.lib-main > h1:first-of-type,.lib-main > .player > h1:first-of-type{position:relative;margin:0 0 20px;padding:clamp(28px,4vw,48px) clamp(24px,4vw,44px);border-radius:var(--r-lg);
  font-size:clamp(34px,4.8vw,60px);color:#fff;overflow:hidden;isolation:isolate;background:linear-gradient(125deg,var(--a2) 0%,var(--cobalt) 45%,var(--a-alt) 100%)}
.lib-main > h1:first-of-type::after,.lib-main > .player > h1:first-of-type::after{content:"";position:absolute;right:-40px;bottom:-80px;width:260px;height:260px;border-radius:40px;transform:rotate(18deg);
  background:repeating-linear-gradient(45deg,#ffffff14 0 10px,transparent 10px 20px);z-index:-1}
.lib-main > p,.lib-main > .player > p,.lib-main .seo-text p,.lib-main .seo-bottom-text p{max-width:72ch;font:16px/1.8 var(--text-font);color:var(--text-soft);margin:0 0 14px}
.lib-main a:not(.t-card):not(.lib-chips a){color:var(--token);text-decoration:underline;text-decoration-color:#FFC83D66;text-underline-offset:3px}
.lib-main strong{color:var(--text)}
.lib-main h2{display:flex;align-items:center;gap:14px;font-size:clamp(22px,2.4vw,30px);margin:44px 0 16px}
.lib-main h2::after{content:"";flex:1;height:1px;background:var(--line)}
.lib-main h3:not(.t-card-name){font-size:19px;margin:24px 0 8px}
.lib-main .trend-header{margin:0}
.lib-main .seo-text,.lib-main .seo-bottom-text{margin:36px 0 0;padding:clamp(20px,3vw,36px);border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line)}
.lib-main .seo-text h2:first-child,.lib-main .seo-bottom-text h2:first-child{margin-top:0}

/* category chips */
.lib-chips{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 20px}
.lib-chips a{display:inline-flex;align-items:center;height:38px;padding:0 15px;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--text)!important;font:750 13px var(--display);text-decoration:none!important}
.lib-chips a:hover,.lib-chips a.highlight{border-color:var(--token);color:var(--token)!important}

/* walls + A–Z letter breaks */
.lib-wall{margin-top:8px}
.lib-letter{grid-column:1/-1;display:flex;align-items:center;gap:16px;margin:26px 0 2px;font:900 64px/1 var(--display);letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:2px var(--cobalt)}
.lib-letter:first-child{margin-top:0}
.lib-letter::after{content:"";flex:1;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--cobalt),transparent)}

/* pagination as a page dial */
.lib-main .pagination{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:32px 0 0}
.lib-main .pagination a{min-width:44px;height:44px;display:inline-grid;place-items:center;padding:0 14px;border-radius:999px;background:var(--surface);border:1px solid var(--line);
  color:var(--text)!important;font:800 14px var(--display);text-decoration:none!important}
.lib-main .pagination a:hover{background:var(--raised)}
.lib-main .pagination a.active{background:var(--token);border-color:var(--token);color:var(--night)!important}

/* rail */
.lib-side{position:sticky;top:calc(var(--top) + 16px);display:grid;grid-template-columns:minmax(0,1fr);gap:16px;min-width:0}
.lib-side .t-ad{margin:0}
.lib-list{min-width:0;padding:16px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line)}
.lib-list h2{font-size:17px;margin:0 0 8px;display:block}
.lib-list h2::after{display:none}
.lib-list a{display:flex;align-items:center;gap:10px;padding:6px;border-radius:12px}
.lib-list a:hover{background:var(--raised)}
.lib-list img{width:48px;height:48px;border-radius:11px;object-fit:cover;flex:none}
.lib-list span{min-width:0;display:flex;flex-direction:column}
.lib-list b{font:750 14px var(--display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lib-list small{font-size:12px;color:var(--text-3)}

@media (max-width:1200px){
  .lib{grid-template-columns:1fr}
  .lib-side{position:static;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
  .lib-side .t-ad{justify-self:center}
}
@media (max-width:560px){
  .lib-letter{font-size:44px}
}