* { margin: 0; padding: 0; box-sizing: border-box; }
/* Text is never below 12px and always uses --text or --muted, which pass
   WCAG AA (4.5:1) on the theme background (Lighthouse on fgotier.com). */
:root { --line: color-mix(in srgb, var(--text) 12%, transparent); --faint: color-mix(in srgb, var(--muted) 70%, var(--bg)); }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background: var(--bg); color: var(--text); line-height: 1.5; -webkit-text-size-adjust: 100%; }
a { color: var(--accent); }
.container { max-width: 1040px; margin: 0 auto; padding: 1.25rem 1rem 4rem; }

header { margin-bottom: 0.9rem; }
/* Hero banner (tierkit.banner): the art is 4:1 and its text sits bottom-left
   on a shade so it reads over any artwork. */
.hero { position: relative; border-radius: 12px; overflow: hidden; margin-bottom: 1rem; background: var(--panel); }
.hero img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 1; object-fit: cover; }
.hero-text { position: absolute; left: 0; bottom: 0; top: 0; display: flex; flex-direction: column; justify-content: flex-end;
  gap: 0.15rem; padding: 1rem 1.2rem; max-width: 62%;
  background: linear-gradient(to right, color-mix(in srgb, var(--bg) 70%, transparent), transparent); }
.hero-tag { align-self: flex-start; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: #111; background: var(--accent); padding: 0.05rem 0.45rem; border-radius: 4px; }
.hero-name { font-size: 1.5rem; font-weight: 800; color: #fff; text-decoration: none; line-height: 1.15; text-shadow: 0 1px 4px #000; }
.hero-name:hover { text-decoration: underline; }
.hero-tier { font-size: 0.85rem; color: #fff; text-shadow: 0 1px 3px #000; }
.hero-tier b { background: var(--tier); color: #111; border-radius: 4px; padding: 0 0.35rem; text-shadow: none; margin-right: 0.2rem; }
.brand { display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none; margin-bottom: 0.3rem; }
h1 { font-size: 1.6rem; line-height: 1.2; }
h2 { font-size: 1.1rem; margin: 1.4rem 0 0.6rem; }
h3 { font-size: 0.95rem; margin: 1rem 0 0.4rem; }
.desc { color: var(--muted); font-size: 0.9rem; margin-top: 0.35rem; }
.meta { color: var(--muted); font-size: 0.75rem; margin-top: 0.25rem; }

.page-tabs { display: flex; overflow-x: auto; scrollbar-width: none; box-shadow: inset 0 -2px 0 var(--line); margin-bottom: 1rem; }
.page-tabs::-webkit-scrollbar { display: none; }
.ptab { padding: 0.55rem 0.85rem; color: var(--muted); font-size: 0.88rem; font-weight: 600; text-decoration: none;
  white-space: nowrap; border-bottom: 2px solid transparent; }
.ptab:hover { color: var(--text); }
.ptab.active { color: var(--text); border-bottom-color: var(--accent); }

/* Ad slots: space is reserved before the ad loads so nothing shifts (CLS),
   and they are kept clear of tabs and filters so taps don't land on an ad. */
.ad-slot { display: none; }
.ads-on .ad-slot { display: flex; align-items: center; justify-content: center; margin: 1.25rem auto; width: 100%;
  overflow: hidden; background: color-mix(in srgb, var(--panel) 60%, transparent); border-radius: 8px; }
.ads-on .ad-top { min-height: 100px; }
.ads-on .ad-mid, .ads-on .ad-bottom { min-height: 280px; }
@media (min-width: 768px) { .ads-on .ad-top { min-height: 90px; } .ads-on .ad-mid, .ads-on .ad-bottom { min-height: 250px; } }

.controls { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 0.9rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.chip { border: 1px solid var(--line); background: var(--panel); color: var(--muted); border-radius: 999px; padding: 0.3rem 0.7rem;
  font: inherit; font-size: 0.8rem; cursor: pointer; min-height: 32px; }
.chip[style]::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c); margin-right: 0.35rem; }
.chip.active { color: var(--text); border-color: var(--accent); }
#search { flex: 1 1 180px; min-height: 36px; background: var(--panel); border: 1px solid var(--line); color: var(--text);
  border-radius: 8px; padding: 0.4rem 0.7rem; font: inherit; font-size: 0.9rem; }

.tierlist { display: flex; flex-direction: column; gap: 4px; }
.tier-row { display: flex; background: var(--panel); border-radius: 8px; overflow: hidden; min-height: 96px; }
.tier-label { flex: 0 0 64px; background: var(--tier); color: #111; font-weight: 800; font-size: 1.5rem; display: flex;
  flex-direction: column; align-items: center; justify-content: center; }
.tier-label small { font-size: 0.75rem; font-weight: 700; }
.tier-cards { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; align-content: flex-start; }
.tier-empty { color: var(--muted); padding: 0.5rem; }
.card { width: 76px; display: flex; flex-direction: column; align-items: center; gap: 3px; text-decoration: none; color: var(--text);
  position: relative; }
.card[hidden] { display: none; }
.pic { position: relative; width: 64px; height: 64px; border-radius: 10px; overflow: hidden; display: flex; align-items: center;
  justify-content: center; background: linear-gradient(145deg, color-mix(in srgb, var(--f) 55%, var(--panel)), var(--panel));
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--f) 70%, transparent); }
.pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pic .ini { font-weight: 800; font-size: 1.1rem; color: var(--text); opacity: 0.85; }
.pic.big { width: 128px; height: 128px; flex: 0 0 128px; border-radius: 16px; }
.pic.big .ini { font-size: 2rem; }
.card .name { font-size: 0.75rem; line-height: 1.15; text-align: center; max-width: 76px; overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.card:hover .name { color: var(--accent); }
.chg { position: absolute; top: -4px; right: 2px; font-size: 0.75rem; font-weight: 800; padding: 0 4px; border-radius: 4px; background: var(--bg); }
.chg-up { color: #4ade80; } .chg-down { color: #f87171; } .chg-new { color: var(--accent); text-transform: uppercase; }
.empty-note, .notes { color: var(--muted); font-size: 0.9rem; margin: 1rem 0; }

.seo-copy, .analysis, .doc { max-width: 720px; color: var(--muted); font-size: 0.92rem; }
.seo-copy { margin-top: 2rem; }
.seo-copy p, .analysis p, .doc p { margin-bottom: 0.75rem; }
.analysis { color: var(--text); margin: 1rem 0; }
.doc h2 { color: var(--text); }
.doc-date { color: var(--muted); font-size: 0.8rem; }
.thresholds { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.src-tier { border-left: 4px solid var(--tier); background: var(--panel); padding: 0.15rem 0.5rem; border-radius: 4px; font-size: 0.8rem; }
.top-list { padding-left: 1.3rem; columns: 2; font-size: 0.9rem; }
.t { display: inline-block; min-width: 1.6em; text-align: center; border-radius: 4px; background: var(--tier); color: #111;
  font-weight: 800; font-size: 0.75rem; padding: 0 4px; }

.group-title { display: flex; align-items: center; gap: 0.5rem; }
.group-title::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.group .tier-cards { padding: 0; }

.entity-head { display: flex; gap: 1.1rem; align-items: flex-start; background: var(--panel); border-radius: 12px; padding: 1rem; }
.tier-badge b { display: inline-block; background: var(--tier); color: #111; border-radius: 6px; padding: 0.05rem 0.55rem;
  font-size: 1.3rem; margin-right: 0.3rem; }
.score-line { color: var(--muted); font-size: 0.85rem; margin: 0.3rem 0 0.6rem; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 0.8rem; font-size: 0.85rem; }
.facts dt { color: var(--muted); }
.grid { width: 100%; max-width: 720px; border-collapse: collapse; font-size: 0.88rem; }
.grid th, .grid td { text-align: left; padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--line); }
.grid th { color: var(--muted); font-weight: 600; }
.moves { list-style: none; display: flex; flex-wrap: wrap; gap: 0.8rem; }
.moves li { display: flex; flex-direction: column; align-items: center; font-size: 0.8rem; color: var(--muted); }
.back { margin-top: 1.5rem; }

.site-footer { margin-top: 3rem; border-top: 1px solid var(--line); padding-top: 1rem; color: var(--muted); font-size: 0.8rem; }
.site-footer p { margin-bottom: 0.5rem; }
.site-footer a { color: var(--muted); }

@media (max-width: 560px) {
  h1 { font-size: 1.3rem; }
  .hero img { aspect-ratio: 2.4 / 1; object-position: 85% center; }
  .hero-text { padding: 0.6rem 0.8rem; max-width: 70%; }
  .hero-name { font-size: 1.1rem; }
  /* Tabs and filter chips scroll sideways on phones; the fade shows there's more. */
  .page-tabs, .chips { -webkit-mask-image: linear-gradient(to right, #000 88%, transparent);
    mask-image: linear-gradient(to right, #000 88%, transparent); }
  .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-right: 1.5rem; width: 100%; }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: 0 0 auto; }
  .tier-label { flex-basis: 44px; font-size: 1.2rem; }
  .card { width: 64px; }
  .pic { width: 54px; height: 54px; }
  .top-list { columns: 1; }
  .entity-head { flex-direction: column; }
}