/* Black canvas, compact category captions and individual landscape brand cards. */
.tile-directory { background:#000; color:#eee; padding-bottom:110px!important; }
.tile-directory .wrap { width:min(1180px,calc(100% - 40px)); }
.tile-directory .topbar { background:#000; border-color:#1c1c1c; }
.tile-directory .topbar-inner { min-height:52px!important; gap:20px!important; }
.tile-directory .logo { font-size:1rem!important; gap:3px!important; }
.tile-directory .logo span { width:24px!important; height:24px!important; font-size:.65rem!important; }
.tile-directory .topbar-inner nav { font-size:.69rem!important; gap:20px!important; }
.tile-directory .quick-link { padding:5px 10px; font-size:.68rem; }
.tile-directory .hero { min-height:0!important; padding:19px 0 17px!important; align-items:center; border:0; }
.tile-directory .hero>div { display:flex; align-items:center; gap:22px; }
.tile-directory .hero .overline { display:none; }
.tile-directory .hero h1 { margin:0!important; font-size:1.6rem!important; line-height:1.03!important; letter-spacing:-.055em; flex-shrink:0; }
.tile-directory .hero h1 br { display:none; }
.tile-directory .hero h1 em { margin-inline-start:7px; color:#67c8ff; }
.tile-directory .hero p:not(.overline) { max-width:300px; margin:0!important; font-size:.68rem!important; line-height:1.6!important; color:#888; }
.tile-directory .hero-arrow { display:none; }
.tile-directory .directory,.tile-directory .featured-directory,.tile-directory .all-directory { padding-top:19px!important; }
.tile-directory .section-title { min-height:18px; margin:0 0 9px!important; align-items:center; flex-direction:row; }
.tile-directory .section-title>div { gap:7px; }
.tile-directory .section-title h2 { font-size:.76rem!important; font-weight:500; letter-spacing:0; color:#bcbcbc; line-height:1.4; }
.tile-directory .section-title>div>span { font-size:.5rem; color:#4e8ab0; }
.tile-directory .section-title>p { font-size:.5rem!important; color:#606060; letter-spacing:.06em; }
.tile-directory .top-links,.tile-directory .logo-grid,.tile-directory .arabic-site-grid,.tile-directory .game-strip { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:12px; border:0; background:transparent; }
.tile-directory .category-grid { display:block; }
.tile-directory .daily-captions { display:flex; gap:16px; flex-wrap:wrap; margin-bottom:8px; color:#929292; font-size:.6rem; }
.tile-directory .daily-tile-grid { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:12px; }
.tile-directory .top-links { grid-template-columns:repeat(6,minmax(0,1fr)); }
.tile-directory .top-links .brand-tile { aspect-ratio:2; }
.tile-directory .category { border:0; background:transparent; }
.tile-directory .category header { min-height:0; padding:0 0 7px; border:0; gap:5px; }
.tile-directory .category-icon { display:none; }
.tile-directory .category header b { color:#929292; font-size:.64rem; font-weight:500; line-height:1.4; }
.tile-directory .category header small { display:none; }
.tile-directory .links { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; padding:0; }
.tile-directory .logo-group { margin-top:15px; }
.tile-directory .logo-group:first-child { margin-top:0; }
.tile-directory .logo-group-heading { margin:0 0 7px; }
.tile-directory .logo-group-heading h3 { font-size:.64rem; font-weight:500; color:#929292; margin:0; }
.tile-directory .logo-group-heading span { font-size:.48rem!important; color:#575757; }
.tile-directory a.brand-tile {
  --tile-color:#192c41;
  position:relative; display:flex; flex-direction:column; justify-content:space-between;
  min-width:0; min-height:0; height:auto; aspect-ratio:1.62;
  padding:0; margin:0; gap:0; overflow:hidden; isolation:isolate;
  border:1px solid #ffffff14; border-radius:11px;
  background:radial-gradient(ellipse at 15% 0%,#ffffff23,transparent 70%),var(--tile-color);
  box-shadow:0 3px 7px #0009; color:#fff;
  transition:transform .18s,border-color .18s,filter .18s;
}
.tile-directory a.brand-tile::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(transparent 40%,#0005); pointer-events:none; }
.tile-directory a.brand-tile:hover { transform:translateY(-3px); border-color:#ffffff65; filter:brightness(1.12); }
.tile-directory a.brand-tile:focus-visible { outline:2px solid #70ceff; outline-offset:3px; }
.tile-directory .tile-art { position:relative; display:grid; place-items:center; flex:1; min-height:0; width:100%; padding:8px 10px 0; }
.tile-directory .tile-icon { display:block; position:relative; width:42px; height:42px; max-height:100%; max-width:76%; border:0; border-radius:8px; padding:3px; object-fit:contain; background:#fff; box-shadow:none; margin:0; flex:none; }
.tile-directory .tile-icon.vector-icon { border-radius:0; padding:0; background:transparent; }
.tile-directory .tile-initial { position:absolute; inset:0; display:grid; place-items:center; font-size:1.65rem; font-weight:800; color:#fff; margin:0; padding:0; direction:rtl; }
.tile-directory .tile-art.has-logo .tile-initial { display:none; }
.tile-directory .tile-icon[hidden] { display:none; }
.tile-directory .tile-label { display:block; flex:none; position:static; width:100%; max-width:100%; margin:0; padding:4px 5px 7px; color:#fff; font-size:.62rem; font-weight:600; line-height:1.15; letter-spacing:0; text-align:center; direction:auto; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
.tile-directory .sports-teaser { background:#0b0f12; border:1px solid #1b2b36; border-radius:10px; padding:12px 15px; }
.tile-directory .sports-teaser-copy b { font-size:.78rem; }
.tile-directory .sports-teaser-copy small { font-size:.58rem; letter-spacing:0; }
.tile-directory .sports-more { background:#14527b; color:#fff; border-color:#286e98; border-radius:7px; }
.tile-directory .all-directory { padding-bottom:30px; }
.tile-directory .live-bar { background:#090b0ef5; backdrop-filter:blur(16px); border-top:1px solid #25292d; }
.tile-directory .footer { min-height:75px; font-size:.7rem; }
@media(min-width:1000px) { .tile-directory #arabic-site-grid { grid-template-columns:repeat(8,minmax(0,1fr)); } }
@media(max-width:999px) {
  .tile-directory .wrap { width:calc(100% - 28px); }
  .tile-directory .top-links,.tile-directory .logo-grid,.tile-directory .arabic-site-grid,.tile-directory .game-strip { grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; }
  .tile-directory .category-grid { gap:10px; }
  .tile-directory .daily-tile-grid { grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; }
  .tile-directory .links { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .tile-directory .hero>div { gap:16px; }
  .tile-directory .hero h1 { font-size:1.4rem!important; }
}
@media(max-width:800px) {
  .tile-directory { padding-bottom:215px!important; }
  .tile-directory .hero>div { display:block; }
  .tile-directory .hero p:not(.overline) { max-width:none; margin-top:5px!important; }
  .tile-directory .tile-icon { width:38px; height:38px; }
}
@media(max-width:540px) {
  .tile-directory .wrap { width:calc(100% - 22px); }
  .tile-directory .topbar-inner { gap:7px!important; padding-block:9px; }
  .tile-directory .topbar-inner nav { gap:15px!important; font-size:.65rem!important; }
  .tile-directory .hero { padding:13px 0 3px!important; }
  .tile-directory .hero h1 { font-size:1.2rem!important; }
  .tile-directory .hero p:not(.overline) { font-size:.6rem!important; }
  .tile-directory .directory,.tile-directory .featured-directory,.tile-directory .all-directory { padding-top:16px!important; }
  .tile-directory .section-title h2 { font-size:.68rem!important; }
  .tile-directory .section-title>p { display:none; }
  .tile-directory .top-links,.tile-directory .logo-grid,.tile-directory .arabic-site-grid,.tile-directory .game-strip { grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
  .tile-directory .category-grid { grid-template-columns:1fr; gap:14px; }
  .tile-directory .daily-tile-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
  .tile-directory .daily-captions { gap:4px 9px; font-size:.55rem; }
  .tile-directory .links { grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
  .tile-directory .tile-icon { width:37px; height:37px; }
  .tile-directory .tile-label { font-size:.55rem; padding-bottom:6px; }
  .tile-directory a.brand-tile { border-radius:9px; }
  .tile-directory .sports-teaser { gap:10px; }
  .tile-directory .live-card small { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
}
@media(prefers-reduced-motion:reduce) { .tile-directory a.brand-tile { transition:none; } .tile-directory .matches-ticker { animation:none; } }