/* ==========================================================================
   Tyrone v10 — all games A–Z directory
   ========================================================================== */
.dir-head{margin:16px 0 0;padding:clamp(24px,4vw,44px);border-radius:var(--r-lg);position:relative;overflow:hidden;isolation:isolate;background:var(--panel)}
.dir-head::after{content:"A–Z";position:absolute;right:-10px;bottom:-40px;z-index:-1;font:900 clamp(120px,20vw,260px)/1 var(--display);letter-spacing:-.07em;color:transparent;-webkit-text-stroke:2px color-mix(in srgb,var(--cobalt) 33%,transparent)}
.dir-kicker{margin:0 0 8px;font:800 13px var(--display);color:var(--token)}
.dir-head h1{font-size:clamp(34px,5vw,62px);color:#fff}
.dir-intro{margin:12px 0 0;max-width:60ch;color:var(--text-soft);font-size:16px}
.dir-stat{margin:16px 0 0;font-size:14px;color:var(--text-3)}
.dir-stat b{font:900 22px var(--display);color:var(--text)}

.dir-body{display:grid;grid-template-columns:56px minmax(0,1fr);gap:20px;margin-top:28px;align-items:start}
.dir-rail{position:sticky;top:calc(var(--top) + 16px);display:flex;flex-direction:column;gap:2px;padding:6px;border-radius:999px;background:var(--surface);border:1px solid var(--line);max-height:calc(100vh - var(--top) - 32px);overflow:auto;scrollbar-width:none}
.dir-rail a{display:grid;place-items:center;height:32px;border-radius:999px;font:850 13px var(--display);color:var(--text-2)}
.dir-rail a:hover{background:var(--token);color:var(--night)}
.dir-top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:12px}
.dir-top h2{font-size:clamp(22px,2.4vw,30px);font-weight:900}
.dir-top p{margin:4px 0 0;color:var(--text-2);font-size:14px}
.dir-search{display:flex;align-items:center;gap:8px;height:42px;padding:0 14px;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--text-3)}
.dir-search:focus-within{border-color:var(--cobalt)}
.dir-search input{border:0;outline:0;background:none;color:var(--text);width:200px}

.dir-group{display:grid;grid-template-columns:72px minmax(0,1fr);gap:12px;padding:16px 0;border-top:1px solid var(--line);scroll-margin-top:calc(var(--top) + 16px)}
.dir-letter{font:900 56px/1 var(--display);letter-spacing:-.05em;color:var(--cobalt);position:sticky;top:calc(var(--top) + 16px);align-self:start}
.dir-list{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:4px 12px}
.dir-list a{display:flex;align-items:center;gap:10px;padding:6px;border-radius:14px}
.dir-list a:hover{background:var(--surface)}
.dir-list img{width:44px;height:44px;border-radius:11px;object-fit:cover;flex:none;background:var(--surface)}
.dir-list span{min-width:0;display:flex;flex-direction:column}
.dir-list b{font:750 14px var(--display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dir-list small{font-size:12px;color:var(--text-3)}
.dir-empty{padding:28px;text-align:center;color:var(--text-2)}

.dir-pager{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:32px 0 0}
.dir-pager a,.dir-pager span{min-width:44px;height:44px;display:grid;place-items:center;padding:0 14px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font:800 14px var(--display)}
.dir-pager a:hover{background:var(--raised)}
.dir-pager [aria-current]{background:var(--token);border-color:var(--token);color:var(--night)}
.dir-pager .gap{background:none;border:0;color:var(--text-3)}
.dir-about{margin-top:24px}
.dir-cats{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.dir-cats .t-chip{text-decoration:none!important;color:var(--text)!important}

@media (max-width:700px){
  .dir-body{grid-template-columns:1fr}
  .dir-rail{position:sticky;top:var(--top);z-index:5;flex-direction:row;border-radius:999px;max-height:none;overflow-x:auto}
  .dir-rail a{flex:0 0 32px}
  .dir-group{grid-template-columns:1fr}
  .dir-letter{position:static;font-size:40px}
  .dir-top{flex-wrap:wrap}
  .dir-search input{width:140px}
}