/* Public Pattern Game page shell — /pattern-game/.
   Self-contained the same way /course/course.css is: tokens, nav, footer and
   card language are copied from the landing page (public/index.html) so the
   game reads as the same product. The game widget itself is styled by
   /pattern-game/game.css, which is shared with the dashboard. */

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

:root {
  --bg:      #06090e;
  --sidebar: #090d14;
  --surface: #0e141d;
  --border:  #1c2531;
  --accent:  #00d4ff;
  --accent-2:#7a9bff;
  --violet:  #a78bfa;
  --buy:     #00e676;
  --sell:    #ff3d57;
  --text:    #cbd7e4;
  --muted:   #55677d;
  --mono:    'Roboto Mono', monospace;
  --sans:    'Inter', -apple-system, 'Segoe UI', sans-serif;
  --display: 'Space Grotesk', 'Inter', sans-serif;
  --sub-color: #8ba0b8;
  --card-bg: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012));
  --card-border: rgba(255,255,255,0.08);
  --ring: rgba(0,212,255,0.35);
}

html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 450;
  font-size: 15px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: rgba(0,212,255,0.25); color: #fff; }
img { max-width: 100%; }

/* ── NAV ───────────────────────────────────────────────────────────── */
nav.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: 64px;
  background: rgba(6,9,14,0.72);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 32px; gap: 16px;
}
.nav-logo {
  font-family: var(--display);
  font-size: 19px; font-weight: 700; letter-spacing: 2.5px; color: #fff;
  text-decoration: none; white-space: nowrap;
}
.nav-logo span { color: var(--accent); }
.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-link {
  font-family: var(--sans);
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em; color: #b7c5d6;
  text-decoration: none; padding: 8px 10px; border-radius: 8px;
  transition: color .15s ease, background .15s ease; white-space: nowrap;
}
.nav-link:hover { color: #fff; background: rgba(255,255,255,0.06); }
.nav-link.active { color: var(--accent); }
.nav-cta-group { display: flex; align-items: center; gap: 10px; }
.btn-ghost {
  font-family: var(--sans); font-size: 12px; font-weight: 650; letter-spacing: 0.07em;
  padding: 9px 18px; border: 1px solid rgba(255,255,255,0.14); border-radius: 10px;
  background: rgba(255,255,255,0.03); color: #eaf2fa; cursor: pointer;
  transition: border-color .15s, background .15s; text-decoration: none; display: inline-block;
}
.btn-ghost:hover { border-color: var(--ring); background: rgba(0,212,255,0.06); }
.btn-accent {
  font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.07em;
  padding: 9px 18px; border: none; border-radius: 10px;
  background: linear-gradient(135deg, #22ddff, #00a9e8);
  color: #001018; cursor: pointer;
  box-shadow: 0 4px 18px rgba(0,212,255,0.28), inset 0 1px 0 rgba(255,255,255,0.35);
  transition: transform .15s, box-shadow .15s; text-decoration: none; display: inline-block;
}
.btn-accent:hover { transform: translateY(-1px); box-shadow: 0 8px 26px rgba(0,212,255,0.4), inset 0 1px 0 rgba(255,255,255,0.35); }
.nav-hamburger {
  display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  width: 42px; height: 42px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.12); border-radius: 10px;
  cursor: pointer; padding: 0; flex-shrink: 0;
}
.nav-mobile-ctas { display: none; }
.nav-hamburger span { display: block; width: 18px; height: 2px; background: #cbd7e4; border-radius: 2px; }

/* ── SHARED SECTION HEADERS ────────────────────────────────────────── */
.section-eyebrow {
  font-family: var(--mono);
  font-size: 11px; font-weight: 600; letter-spacing: 0.24em; color: var(--accent);
  margin-bottom: 18px;
}
.section-title {
  font-family: var(--display);
  font-size: clamp(28px, 3.6vw, 46px); font-weight: 700; color: #f4f9ff; line-height: 1.1;
  letter-spacing: -0.022em; margin-bottom: 18px;
}
.section-title span {
  background: linear-gradient(100deg, #22ddff, #eaf6ff 94%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.section-sub { font-size: 15px; font-weight: 450; color: var(--sub-color); line-height: 1.75; }

main { padding-top: 64px; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 32px; }

/* ── HERO + GAME ───────────────────────────────────────────────────── */
.pg-hero {
  position: relative;
  padding: 54px 0 40px;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.pg-hero::before {
  content: ''; position: absolute; top: -180px; left: 50%; transform: translateX(-50%);
  width: 900px; height: 620px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(0,212,255,0.14), transparent 72%);
}
.pg-hero-grid {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 46px; align-items: start;
  /* Deliberately wider than the 1160px .wrap the rest of the page uses: the hero
     now carries the card AND the leaderboard beside it, and at 1160 the copy
     column would be squeezed under 400px. Drops back to 1160 below 1300px, where
     the board moves under the card. */
  max-width: 1400px;
}
.pg-hero-copy { max-width: 620px; }
.pg-hero h1 {
  font-family: var(--display);
  font-size: clamp(31px, 4.4vw, 52px); font-weight: 700; line-height: 1.06;
  letter-spacing: -0.028em; color: #f4f9ff; margin-bottom: 20px;
}
.pg-hero h1 span {
  background: linear-gradient(100deg, #22ddff, #eaf6ff 94%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pg-hero-lead { font-size: 16px; line-height: 1.75; color: var(--sub-color); margin-bottom: 22px; }
.pg-hero-lead strong { color: #dfeaf6; font-weight: 620; }

.pg-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.pg-fact {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: 9px;
  background: rgba(255,255,255,0.035); border: 1px solid var(--card-border);
  font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em;
  color: #b7c5d6;
}
.pg-fact svg { width: 14px; height: 14px; color: var(--accent); flex: none; }

.pg-rules { display: grid; gap: 10px; }
.pg-rule {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 14px 16px; border-radius: 13px;
  background: var(--card-bg); border: 1px solid var(--card-border);
}
.pg-rule-num {
  flex: none; width: 27px; height: 27px; border-radius: 8px;
  display: grid; place-items: center;
  background: rgba(0,212,255,0.1); border: 1px solid rgba(0,212,255,0.28);
  font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--accent);
}
.pg-rule-body h3 { font-size: 13.5px; font-weight: 650; color: #eaf2fa; margin-bottom: 4px; }
.pg-rule-body p { font-size: 13px; line-height: 1.65; color: var(--sub-color); }

/* Card + leaderboard travel together in the right-hand hero column, so the board
   sits directly beside the card a visitor is playing rather than a scroll away. */
.pg-play {
  position: sticky; top: 84px;
  display: grid; grid-template-columns: 400px 320px; gap: 26px; align-items: start;
  justify-content: center;
}
.pg-play-lb { min-width: 0; }
.pg-play .pg-lb { max-width: none; }
.pg-play .pg-lb-head { margin-bottom: 14px; }
.pg-play .pg-lb-title { font-size: 17.5px; }
.pg-play .pg-lb-sub-title { font-size: 11.5px; }
/* Tighter rows so a nickname still gets a readable width in a 320px column. */
.pg-play .pg-lb-row { padding: 10px 11px; gap: 9px; }
.pg-play .pg-lb-rank { width: 24px; font-size: 11.5px; }
.pg-play .pg-lb-av { width: 28px; height: 28px; font-size: 9.5px; }
.pg-play .pg-lb-gate-title { font-size: 15.5px; }

/* ── GENERIC CONTENT SECTIONS ──────────────────────────────────────── */
.pg-section { padding: 68px 0; border-bottom: 1px solid var(--border); }
.pg-section-head { max-width: 760px; margin-bottom: 38px; }
.pg-prose { max-width: 820px; }
.pg-prose p { font-size: 15px; line-height: 1.82; color: var(--sub-color); margin-bottom: 18px; }
.pg-prose p:last-child { margin-bottom: 0; }
.pg-prose strong { color: #dfeaf6; font-weight: 620; }
.pg-prose a { color: var(--accent); text-decoration: none; border-bottom: 1px solid rgba(0,212,255,0.28); }
.pg-prose a:hover { border-bottom-color: var(--accent); }
.pg-prose h3 {
  font-family: var(--display);
  font-size: 19px; font-weight: 650; color: #eaf2fa; margin: 30px 0 12px; letter-spacing: -0.012em;
}
.pg-prose ul { list-style: none; display: grid; gap: 10px; margin: 4px 0 20px; }
.pg-prose li { position: relative; padding-left: 20px; font-size: 14.5px; line-height: 1.7; color: var(--sub-color); }
.pg-prose li::before { content: '→'; position: absolute; left: 0; color: var(--accent); }

.pg-cards3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pg-tile {
  padding: 22px 20px; border-radius: 16px;
  background: var(--card-bg); border: 1px solid var(--card-border);
}
.pg-tile-ico {
  width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center;
  background: rgba(0,212,255,0.09); border: 1px solid rgba(0,212,255,0.22);
  color: var(--accent); margin-bottom: 14px;
}
.pg-tile-ico svg { width: 19px; height: 19px; }
.pg-tile h3 { font-family: var(--display); font-size: 16.5px; font-weight: 650; color: #eaf2fa; margin-bottom: 9px; }
.pg-tile p { font-size: 13.5px; line-height: 1.7; color: var(--sub-color); }

/* level table */
.pg-table-wrap { overflow-x: auto; }
.pg-table {
  width: 100%; min-width: 520px; border-collapse: collapse;
  border: 1px solid var(--card-border); border-radius: 14px; overflow: hidden;
}
.pg-table th, .pg-table td { padding: 14px 16px; text-align: left; border-bottom: 1px solid rgba(255,255,255,0.06); }
.pg-table th {
  font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.16em;
  color: #fff; background: rgba(255,255,255,0.04);
}
.pg-table td { font-size: 13.5px; color: var(--sub-color); }
.pg-table td:first-child { font-family: var(--mono); font-weight: 700; color: var(--accent); letter-spacing: 0.08em; }
.pg-table tr:last-child td { border-bottom: none; }

/* allowance grid */
.pg-alw { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.pg-alw-item {
  padding: 20px 18px; border-radius: 15px; text-align: center;
  background: var(--card-bg); border: 1px solid var(--card-border);
}
.pg-alw-item.hot { border-color: rgba(0,212,255,0.35); background: linear-gradient(180deg, rgba(0,212,255,0.09), rgba(0,212,255,0.02)); }
.pg-alw-n { font-family: var(--display); font-size: 30px; font-weight: 700; color: #f4f9ff; line-height: 1; }
.pg-alw-t { font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.16em; color: var(--accent); margin: 10px 0 8px; }
.pg-alw-d { font-size: 12.5px; line-height: 1.6; color: var(--sub-color); }

/* FAQ */
.pg-faq { display: grid; gap: 10px; max-width: 860px; }
.pg-faq details {
  border: 1px solid var(--card-border); border-radius: 13px;
  background: var(--card-bg); overflow: hidden;
}
.pg-faq summary {
  list-style: none; cursor: pointer; padding: 17px 20px;
  font-size: 14.5px; font-weight: 600; color: #eaf2fa;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.pg-faq summary::-webkit-details-marker { display: none; }
.pg-faq summary::after { content: '+'; color: var(--accent); font-size: 19px; font-weight: 400; flex: none; }
.pg-faq details[open] summary::after { content: '−'; }
.pg-faq-a { padding: 0 20px 18px; font-size: 14px; line-height: 1.75; color: var(--sub-color); }
.pg-faq-a a { color: var(--accent); text-decoration: none; }

/* related links */
.pg-related { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 860px; }
.pg-related a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 18px; border-radius: 12px;
  background: var(--card-bg); border: 1px solid var(--card-border);
  color: #cfe0f0; font-size: 14px; font-weight: 550; text-decoration: none;
  transition: border-color .2s, transform .2s, color .2s;
}
.pg-related a::after { content: '→'; color: var(--accent); flex: none; }
.pg-related a:hover { border-color: rgba(0,212,255,0.32); transform: translateX(4px); color: #fff; }

/* final CTA */
.pg-cta {
  margin: 0 auto; max-width: 860px; text-align: center;
  padding: 44px 34px; border-radius: 20px;
  background: linear-gradient(160deg, rgba(0,212,255,0.1), rgba(122,155,255,0.06) 55%, rgba(255,255,255,0.02));
  border: 1px solid rgba(0,212,255,0.24);
}
.pg-cta h2 { font-family: var(--display); font-size: clamp(23px, 3vw, 33px); font-weight: 700; color: #f4f9ff; margin-bottom: 14px; letter-spacing: -0.02em; }
.pg-cta p { font-size: 14.5px; line-height: 1.75; color: var(--sub-color); max-width: 560px; margin: 0 auto 24px; }
.pg-cta-note { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; color: var(--muted); margin-top: 16px; }

.pg-disclaimer {
  max-width: 860px; margin: 34px auto 0;
  font-size: 12px; line-height: 1.7; color: var(--muted); text-align: center;
}

/* ── FOOTER ────────────────────────────────────────────────────────── */
footer.site-footer {
  border-top: 1px solid var(--border);
  background: var(--sidebar);
  padding: 64px 32px 34px;
}
.footer-grid {
  max-width: 1160px; margin: 0 auto;
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 48px;
}
.footer-brand { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.footer-logo { font-family: var(--display); font-size: 19px; font-weight: 700; letter-spacing: 2.5px; color: #fff; text-decoration: none; }
.footer-logo span { color: var(--accent); }
.footer-tagline { font-size: 13.5px; font-weight: 450; color: var(--sub-color); line-height: 1.7; max-width: 300px; }
.footer-col-title { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.22em; color: #fff; margin-bottom: 18px; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.footer-col a { color: #8ba0b8; font-size: 13.5px; font-weight: 480; text-decoration: none; transition: color .15s; }
.footer-col a:hover { color: var(--accent); }
.footer-bottom {
  max-width: 1160px; margin: 48px auto 0; padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.footer-copy { font-size: 12.5px; font-weight: 450; color: var(--muted); }
.footer-risk-note { font-size: 12px; font-weight: 500; color: #b06a76; line-height: 1.5; text-align: right; max-width: 620px; }

/* ── RESPONSIVE ────────────────────────────────────────────────────── */
/* Below this the copy column cannot hold a readable measure next to a 400px card
   AND a 320px board, so the board drops under the card and the hero returns to
   the same 1160px wrap as every other section. */
@media (max-width: 1300px) {
  .pg-hero-grid { max-width: 1160px; }
  .pg-play { grid-template-columns: minmax(0, 400px); gap: 20px; }
}
@media (max-width: 1080px) {
  .pg-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 38px; }
  .pg-play { position: static; }
  .pg-hero-copy { max-width: none; }
  .pg-cards3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-alw { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  nav.site-nav { padding: 0 18px; }
  .nav-hamburger { display: flex; }
  .nav-cta-group { display: none; }
  .nav-links {
    display: none;
    position: fixed; top: 64px; left: 0; right: 0;
    background: rgba(6,9,14,0.97);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    flex-direction: column; align-items: stretch; gap: 2px; padding: 12px 18px 20px;
  }
  .nav-links.open { display: flex; }
  .nav-link { padding: 12px 10px; font-size: 12.5px; }
  .nav-mobile-ctas { display: flex; gap: 10px; margin-top: 12px; }
  .nav-mobile-ctas > a { flex: 1; text-align: center; }
  footer.site-footer { padding: 52px 18px 28px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px 20px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .footer-risk-note { text-align: left; }
}
@media (max-width: 700px) {
  .wrap { padding: 0 18px; }
  .pg-hero { padding: 34px 0 30px; }
  .pg-section { padding: 48px 0; }
  .pg-cards3 { grid-template-columns: minmax(0, 1fr); }
  .pg-alw { grid-template-columns: minmax(0, 1fr); }
  .pg-related { grid-template-columns: minmax(0, 1fr); }
  .pg-cta { padding: 32px 20px; border-radius: 16px; }
  .pg-rule { padding: 13px 14px; gap: 11px; }
}