/* ladder.games — minimal, readable, mobile-first */

/* ---- tokens ---- */
:root {
  --bg:          #f8f7f4;
  --surface:     #ffffff;
  --border:      #c9c6be;
  --text:        #1a1a1a;
  --text-mid:    #555555;
  --accent:      #1a1a2e;
  --accent-fg:   #ffffff;
  --bridge-bg:   #e8f0fe;
  --bridge-bdr:  #6b8ade;
  --chip-bg:     #f0ede6;
  --chip-fg:     #555555;
  --gap-bg:      #fafafa;
  --gap-border:  #cccccc;
  --gap-fg:      #999999;
  --link:        #2a5db0;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  margin: 0;
  line-height: 1.6;
}

/* ---- layout ---- */
.site-header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: .75rem 1.5rem;
  background: var(--accent);
  color: var(--accent-fg);
}
.site-logo {
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--accent-fg);
  text-decoration: none;
}
.site-header nav a {
  color: var(--accent-fg);
  opacity: .8;
  text-decoration: none;
}
.site-header nav a:hover { opacity: 1; }

main { max-width: 860px; margin: 0 auto; padding: 2rem 1.5rem; }

.site-footer {
  text-align: center;
  padding: 2rem 1.5rem;
  border-top: 1px solid var(--border);
  color: var(--text-mid);
  font-size: .85rem;
}
.site-footer .bgg-logo { display: inline-block; margin-top: .5rem; }
.site-footer .bgg-credit { margin-top: .25rem; }

/* ---- disclosure banner ---- */
.disclosure-banner {
  background: #fff8e1;
  border-bottom: 1px solid #ffe082;
  padding: .5rem 1.5rem;
  font-size: .85rem;
  color: #555;
}

/* ---- ladder page ---- */
.rung-list { list-style: none; padding: 0; margin: 0; }
.rung { margin-bottom: 1rem; }

.rung-card {
  display: flex;
  gap: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem;
}
.rung--bridge .rung-card {
  background: var(--bridge-bg);
  border-color: var(--bridge-bdr);
}
.rung--target .rung-card {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: var(--accent);
}
.rung--target .rung-card a { color: var(--accent-fg); }

.rung-thumb {
  width: 80px;
  height: 80px;
  object-fit: contain;
  border-radius: 4px;
  flex-shrink: 0;
}
.rung-body { flex: 1; }
.rung-name { margin: 0 0 .25rem; font-size: 1.1rem; }
.rung-weight { margin: 0 0 .25rem; font-size: .85rem; color: var(--text-mid); }
.rung--target .rung-weight { color: rgba(255,255,255,.7); }

.teaches-list { margin: .25rem 0; padding-left: 1.2rem; font-size: .9rem; }
.rung-reason  { margin: .25rem 0; font-size: .85rem; color: var(--text-mid); }
.relaxed-note { margin: .25rem 0; font-size: .85rem; font-style: italic; }

/* ---- gap rung ---- */
.gap-rung {
  border: 2px dashed var(--gap-border);
  background: var(--gap-bg);
  border-radius: 8px;
  padding: 1rem;
  color: var(--gap-fg);
}
.gap-label { font-weight: 600; }
.gap-mechanic { margin: .25rem 0 0; font-size: .85rem; }
.gap-note { margin: .25rem 0 0; font-size: .85rem; font-style: italic; }

/* ---- buy links ---- */
.buy-links { margin-top: .5rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.buy-link {
  display: inline-block;
  padding: .3rem .75rem;
  background: var(--accent);
  color: var(--accent-fg);
  border-radius: 4px;
  text-decoration: none;
  font-size: .85rem;
}
.buy-link:hover { opacity: .85; }
.buy-link--search { background: var(--chip-bg); color: var(--chip-fg); border: 1px solid var(--border); }

/* ---- badges ---- */
.badge {
  display: inline-block;
  padding: .1rem .45rem;
  border-radius: 3px;
  font-size: .75rem;
  font-weight: 600;
  vertical-align: middle;
  margin-left: .3rem;
}
.badge--bridge  { background: var(--bridge-bg); color: var(--bridge-bdr); }
.badge--target  { background: var(--accent); color: var(--accent-fg); }
.badge--relaxed { background: #fff3cd; color: #856404; }
.badge--pinned  { background: #d4edda; color: #155724; }

/* ---- weight / tier chips ---- */
.weight-chip, .weight-badge {
  display: inline-block;
  background: var(--chip-bg);
  color: var(--chip-fg);
  border-radius: 4px;
  padding: .1rem .45rem;
  font-size: .8rem;
  margin-left: .3rem;
}
.tier-chip { font-size: .75rem; margin-left: .2rem; }
.tier--core      { color: #155724; }
.tier--secondary { color: #004085; }

/* ---- home page ---- */
.hero { margin-bottom: 2rem; }
.hero h1 { font-size: 2rem; line-height: 1.2; }
.ladder-list { list-style: none; padding: 0; }
.ladder-list li { padding: .4rem 0; border-bottom: 1px solid var(--border); }
.ladder-list a { font-weight: 600; color: var(--link); }

/* ---- mechanic page ---- */
.game-list { list-style: none; padding: 0; }
.game-item { padding: .35rem 0; border-bottom: 1px solid var(--border); }
.game-item a { color: var(--link); }

/* ---- preview page ---- */
.preview-badge {
  background: #d4edda;
  color: #155724;
  border-radius: 4px;
  padding: .1rem .5rem;
  font-size: .8rem;
  font-weight: 600;
}
.preview-page h1 { color: #856404; }
.park-meta { border-collapse: collapse; }
.park-meta dt { font-weight: 600; margin-top: .5rem; }

/* ---- about page ---- */
.about-page section { margin-bottom: 2rem; }
.disclosure { background: #fff8e1; border-left: 4px solid #ffe082; padding: .5rem 1rem; }

/* ---- share aside ---- */
.share-aside { text-align: center; margin: 2rem 0; }
.share-image { max-width: 100%; border-radius: 8px; }

/* ---- responsive ---- */
@media (max-width: 600px) {
  .rung-card { flex-direction: column; }
  .rung-thumb { width: 60px; height: 60px; }
}