/* ===========================================
   YouCanBuildTech — Section Hub / Directory Theme
   Scope: /game/ (and reusable for /web/, /app/)
   Mobile-tight, no horizontal drag, card list layout
   =========================================== */

/* ---- Design tokens ---- */
:root{
  --bg:#0b0d12;
  --card:#12161f;
  --ink:#e9eef7;
  --sub:#a7b1c4;
  --muted:#91a0bb;
  --line:#1d2433;

  --brand:#6aa9ff;   /* primary accent */
  --acc:#7cffd6;     /* secondary accent */

  --radius-card:16px;
  --radius-pill:999px;
  --wrap:1100px;
  --space:28px;
  --space-sm:12px;
}

/* ---- Base (overflow-safe) ---- */
*{box-sizing:border-box}
html,body{
  margin:0; padding:0;
  background:var(--bg); color:var(--ink);
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden; /* prevent sideways drag */
}
img{max-width:100%; height:auto; display:block}
a{color:var(--acc); text-decoration:none}

/* ---- Layout wrappers ---- */
.container{max-width:var(--wrap); margin:0 auto; padding:0 var(--space-sm)}
main.container{padding:0 var(--space-sm)}
main{padding-bottom:var(--space)}

/* ---- Header / Nav ---- */
.site-header{padding:var(--space) 0; background:transparent}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.logo{color:var(--ink); font-weight:700}
.main-nav{display:flex; gap:12px; flex-wrap:wrap}
.main-nav a{color:var(--ink); overflow-wrap:anywhere; word-break:break-word}

/* ---- Typography ---- */
h1{font-size:40px; line-height:1.1; margin:0 0 12px}
h2{font-size:22px; margin:0 0 8px}
h3{font-size:16px; margin:0 0 6px}
.page-intro{color:var(--sub); font-size:18px}
.meta-line{margin-top:8px; color:var(--muted); font-size:13px}
p{margin:0 0 10px; color:var(--sub)}
ul, ol{margin:10px 0 0 18px; color:var(--sub)}

/* ---- Hero ---- */
.hero.container{margin-top:28px}
.hero.container > * + *{margin-top:10px}

/* ---- Cards & Lists ---- */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius-card);
  padding:18px;
}

/* Directory list styled as cards with existing markup */
.builder-list{
  list-style:none; margin:16px 0 0; padding:0;
  display:grid; grid-template-columns:1fr; gap:12px;
}
.builder-list > li{
  background:#0f131b; border:1px solid var(--line); border-radius:12px; padding:14px;
}
.builder-list a{color:var(--ink)}
.builder-list .mini{color:var(--sub); font-size:14px; margin-top:4px}

/* ---- Breadcrumbs ---- */
.breadcrumbs{color:var(--muted); font-size:13px; margin-top:8px}
.breadcrumbs a{color:var(--muted)}
.breadcrumbs ol{
  margin:0; padding:0; list-style:none; display:flex; gap:6px; flex-wrap:wrap
}
.breadcrumbs li::after{content:"·"; margin:0 6px; color:var(--muted)}
.breadcrumbs li:last-child::after{content:""}

/* ---- Footer ---- */
.site-footer{margin:40px 0 10px; color:#8692a8; font-size:13px; background:transparent}
.site-footer .container{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.footer-nav{display:flex; gap:12px}

/* ---- Utilities ---- */
.mt-0{margin-top:0} .mt-1{margin-top:8px} .mt-2{margin-top:16px} .mt-3{margin-top:24px} .mt-4{margin-top:32px}
.mb-0{margin-bottom:0} .mb-1{margin-bottom:8px} .mb-2{margin-bottom:16px}

/* ---- Responsive ---- */
@media (max-width:960px){
  h1{font-size:32px}
  .main-nav{width:100%; justify-content:flex-start}
}