/* Gallery / hashtag / "best" grid view styles.
   Sits on top of twitter.css + tweet-card.css. */

.gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:8px;
  margin:14px 0 28px;
}
@media (min-width:900px){
  .gallery-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));}
}

.g-tile{
  position:relative;
  display:block;
  aspect-ratio: 1 / 1;
  background:#0b0b0b;
  border:1px solid var(--border, #2a2a2a);
  border-radius:6px;
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  transition: transform .15s, border-color .15s;
}
.g-tile:hover{
  transform: translateY(-1px);
  border-color: var(--cyan, #38bdf8);
}
.g-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  background:#0b0b0b;
}
.g-badge{
  position:absolute;
  top:6px;right:6px;
  background:rgba(0,0,0,.65);
  color:#fff;
  padding:2px 6px;
  border-radius:3px;
  font-family:'Space Mono', monospace;
  font-size:11px;
  line-height:1;
}
.g-badge.g-video{
  top:6px;left:6px;right:auto;
  font-size:14px;
  padding:3px 7px;
}
.g-badge.g-more{top:6px;right:6px}
.g-meta{
  position:absolute;
  left:0;right:0;bottom:0;
  display:flex;justify-content:space-between;align-items:center;
  padding:4px 6px;
  background:linear-gradient(transparent,rgba(0,0,0,.78));
  color:#e5e5e5;
  font-family:'Space Mono', monospace;
  font-size:10px;
  opacity:0;
  transition: opacity .15s;
}
.g-tile:hover .g-meta{ opacity:1; }
.g-tile:focus .g-meta{ opacity:1; }
.g-date{ opacity:.82 }
.g-stats{ display:flex; gap:8px; }
.g-fav{ color:#ffb86b }
.g-rt{ color:#5cf08a }

.paginator{
  display:flex;justify-content:center;align-items:center;gap:14px;
  margin:18px 0 36px;
  font-family:'Space Mono', monospace;
  font-size:13px;
}
.paginator a{
  color: var(--cyan, #38bdf8);
  text-decoration:none;
  padding:6px 10px;
  border:1px solid rgba(56,189,248,.3);
  border-radius:3px;
}
.paginator a:hover{ color: var(--amber, #fbbf24); border-color: var(--amber, #fbbf24); }
.paginator span{ color: var(--muted, #9aa); }

.section-h{
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.3rem;
  color: var(--cyan, #38bdf8);
  border-bottom: 1px solid var(--border, #2a2a2a);
  padding-bottom: 8px;
  margin: 28px 0 14px;
}

/* hashtag era distribution bar */
.hashtag-era-bar{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap:8px;
  margin: 8px 0 20px;
}
.he-cell{
  display:block;
  padding:8px 10px;
  background: rgba(255,255,255,.03);
  border:1px solid var(--border, #2a2a2a);
  border-radius:5px;
  text-decoration:none;
  color: inherit;
  font-family:'Space Mono', monospace;
  font-size:11px;
}
.he-cell:hover{ border-color: var(--cyan, #38bdf8); }
.he-name{ color: var(--text, #e5e5e5); margin-bottom:4px; font-weight:600; }
.he-bar{ height:5px; background: rgba(255,255,255,.06); border-radius:3px; overflow:hidden; margin: 4px 0 3px; }
.he-fill{ height:100%; background: var(--cyan, #38bdf8); }
.he-n{ color: var(--muted, #9aa); font-size:10px; }

/* hashtag index landing list */
.h-list{ display:grid; gap:6px; max-width:600px; }
.h-row{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:10px 14px;
  background: rgba(255,255,255,.03);
  border:1px solid var(--border, #2a2a2a);
  border-radius:5px;
  color: inherit;
  text-decoration:none;
  font-family:'Space Grotesk', sans-serif;
}
.h-row:hover{ border-color: var(--cyan, #38bdf8); }
.h-tag{ font-weight:600; font-size:1.05rem; }
.h-count{ font-family:'Space Mono', monospace; font-size:.85rem; color: var(--muted, #9aa); }

/* slim per-tweet page video-poster fallback */
.tw-video-poster{
  display:block;
  position:relative;
  width:100%;
  background-size:cover;
  background-position:center;
  aspect-ratio: 16 / 9;
  border-radius:4px;
  text-decoration:none;
}
.tw-vp-play{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  background:rgba(0,0,0,.65);
  color:#fff;
  border-radius:50%;
  width:54px;height:54px;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;
}