/* hub.css — layout and components for Brain Games Hub. */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  color: var(--bg-text);
  background: var(--bg-page);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--bg-blue-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--sp-5); }

/* ---- Header / nav ---- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(11, 31, 58, 0.96);
  backdrop-filter: blur(8px);
  color: var(--bg-text-invert);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.site-header .container {
  display: flex; align-items: center; justify-content: space-between;
  height: 64px;
}
.brand { display: flex; align-items: center; gap: var(--sp-2); font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; color: #fff; }
.brand:hover { text-decoration: none; }
.brand .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--bg-accent); box-shadow: 0 0 0 4px rgba(245,166,35,0.25); }
.nav { display: flex; gap: var(--sp-5); align-items: center; }
.nav a { color: rgba(255,255,255,0.85); font-weight: 600; font-size: 0.95rem; }
.nav a:hover, .nav a.active { color: #fff; text-decoration: none; }
.nav .cta {
  background: var(--bg-accent); color: #1a1300; padding: 8px 16px;
  border-radius: 999px; font-weight: 700;
}
.nav .cta:hover { background: var(--bg-accent-dark); }
.nav-toggle { display: none; background: none; border: 0; color: #fff; font-size: 1.5rem; cursor: pointer; }

/* ---- Hero ---- */
.hero {
  background: radial-gradient(1200px 500px at 70% -10%, #1d4ed8 0%, var(--bg-navy) 55%);
  color: #fff; padding: var(--sp-8) 0;
}
.hero h1 { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.1; margin: 0 0 var(--sp-4); }
.hero p.lede { font-size: clamp(1.05rem, 2vw, 1.3rem); color: rgba(255,255,255,0.88); max-width: 640px; margin: 0 0 var(--sp-6); }
.hero .price-pill { display:inline-block; background: rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.25); padding: 6px 14px; border-radius:999px; font-weight:700; margin-bottom: var(--sp-5); }
.btn {
  display: inline-block; cursor: pointer; border: 0; font: inherit; font-weight: 700;
  padding: 14px 26px; border-radius: 999px; transition: transform .08s ease, background .15s ease;
  margin-right: var(--sp-3);
}
.btn:hover { transform: translateY(-1px); text-decoration: none; }
.btn-primary { background: var(--bg-accent); color: #1a1300; }
.btn-primary:hover { background: var(--bg-accent-dark); }
.btn-ghost { background: rgba(255,255,255,0.1); color: #fff; border: 1px solid rgba(255,255,255,0.3); }
.btn-blue { background: var(--bg-blue); color: #fff; }
.btn-blue:hover { background: var(--bg-blue-dark); }

/* ---- Sections ---- */
.section { padding: var(--sp-8) 0; }
.section h2 { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.2rem); margin: 0 0 var(--sp-2); }
.section .sub { color: var(--bg-text-muted); margin: 0 0 var(--sp-6); max-width: 640px; }

/* ---- Region chips ---- */
.region-bar { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-6); }
.chip {
  border: 1px solid var(--bg-border); background: var(--bg-card); color: var(--bg-text);
  padding: 8px 14px; border-radius: 999px; font-weight: 600; cursor: pointer; font-size: .9rem;
}
.chip[aria-pressed="true"] { background: var(--bg-navy); color: #fff; border-color: var(--bg-navy); }
.chip .swatch { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; vertical-align: middle; }

/* ---- Game grid ---- */
.grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.game-card {
  background: var(--bg-card); border: 1px solid var(--bg-border); border-radius: var(--radius);
  padding: var(--sp-5); box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
  transition: box-shadow .15s ease, transform .08s ease; position: relative;
}
.game-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); text-decoration: none; }
.game-card .region-tag { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.game-card h3 { font-family: var(--font-display); margin: var(--sp-2) 0 var(--sp-1); font-size: 1.15rem; color: var(--bg-text); }
.game-card p { color: var(--bg-text-muted); font-size: .92rem; margin: 0 0 var(--sp-4); flex: 1; }
.game-card .lock { position: absolute; top: var(--sp-3); right: var(--sp-3); font-size: .72rem; background: var(--bg-card-alt); color: var(--bg-text-muted); border-radius: 999px; padding: 3px 9px; font-weight: 700; }
.game-card .free-badge { position:absolute; top: var(--sp-3); right: var(--sp-3); font-size:.7rem; background:#e7f6ec; color:#0f7a37; border-radius:999px; padding:3px 9px; font-weight:800; }

/* ---- Brain map (dashboard) ---- */
.brainmap { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; }
.region-row { background: var(--bg-card); border:1px solid var(--bg-border); border-radius: var(--radius); padding: var(--sp-4); }
.region-row .head { display:flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--sp-2); }
.region-row .head .name { font-weight: 700; }
.bar { height: 12px; background: var(--bg-card-alt); border-radius: 999px; overflow: hidden; }
.bar > span { display: block; height: 100%; border-radius: 999px; }
.overall {
  background: var(--bg-navy); color: #fff; border-radius: var(--radius-lg);
  padding: var(--sp-6); text-align: center; margin-bottom: var(--sp-5);
}
/* The overall hero figure sits on dark navy where locked black would be invisible;
   the brand approves white for THIS single hero numeral only. Every other numeric
   score uses the locked black .score class on a light surface. */
.overall .num { font-family: var(--font-display); font-size: 3.4rem; font-weight: 800; line-height: 1; color: #fff; }

/* ---- Game runner (play page) ---- */
.runner { max-width: 720px; margin: var(--sp-7) auto; background: var(--bg-card); border:1px solid var(--bg-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: var(--sp-7); text-align:center; }
.runner h1 { font-family: var(--font-display); margin-top: 0; }
.runner .timer { font-weight: 800; color: var(--bg-text); }
.runner .mount { min-height: 280px; display:flex; align-items:center; justify-content:center; }
.bg-symbol { font-size: 5rem; line-height: 1; margin: var(--sp-5) 0; }
.bg-controls { display:flex; gap: var(--sp-4); justify-content:center; margin: var(--sp-5) 0; }
.bg-btn { font: inherit; font-weight:700; cursor:pointer; padding: 14px 30px; border-radius: var(--radius); border:1px solid var(--bg-border); background: var(--bg-card-alt); }
.bg-btn:hover { background: #e6edf7; }
.result-card { text-align:center; }
.result-card .big { font-family: var(--font-display); font-size: 3rem; }

/* ---- Pricing ---- */
.plans { display:grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); max-width: 760px; margin: 0 auto; }
.plan { background: var(--bg-card); border:1px solid var(--bg-border); border-radius: var(--radius-lg); padding: var(--sp-6); }
.plan.pro { border: 2px solid var(--bg-accent); box-shadow: var(--shadow-md); }
.plan h3 { font-family: var(--font-display); margin-top: 0; }
.plan .price { font-family: var(--font-display); font-size: 2.6rem; font-weight: 800; }
.plan ul { padding-left: 1.1em; color: var(--bg-text-muted); }
.plan li { margin: var(--sp-2) 0; }

/* ---- Footer ---- */
.site-footer { background: var(--bg-navy); color: rgba(255,255,255,0.8); padding: var(--sp-7) 0; margin-top: var(--sp-8); }
.site-footer a { color: #fff; }
.site-footer .cols { display:flex; flex-wrap:wrap; gap: var(--sp-7); justify-content: space-between; }

/* ---- Responsive ---- */
@media (max-width: 760px) {
  .nav { position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; background: var(--bg-navy); padding: var(--sp-4); gap: var(--sp-3); display: none; }
  .nav.open { display: flex; }
  .nav-toggle { display: block; }
}

/* server-authoritative runner additions */
.bg-choices { display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); margin-top:18px; }
.bg-choice { min-height:54px; }
.bg-prompt { font-size:1.3rem; white-space:pre-wrap; margin:16px 0; min-height:80px; line-height:1.5; }
.bg-progress { color:var(--bg-text-muted); font-weight:700; margin:0 0 8px; }
.bg-target { width:170px; height:170px; border-radius:50%; border:0; color:#fff; font-size:1.3rem; font-weight:800; cursor:pointer; }
.muted { color:var(--bg-text-muted); }