/* pages.css - shared styling for Cryptune's static HTML pages
   These pages sit outside React, so this file is deliberately standalone.
   Colours and fonts are copied from the game's light theme so the pages
   feel like part of Cryptune. */

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

:root {
  --bg:            #FAFAF7;
  --bg-alt:        #F3F2EE;
  --surface:       #FFFFFF;
  --border:        rgba(0,0,0,0.08);
  --border-strong: rgba(0,0,0,0.14);

  --amber:         #F59E0B;
  --amber-light:   #FEF3C7;
  --amber-dark:    #D97706;

  --text:          #1A1A1A;
  --text-secondary:#4B5563;
  --muted:         #9CA3AF;

  --radius-sm:     8px;
  --radius-md:     14px;
  --radius-lg:     22px;

  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'Space Mono', monospace;
}

html { font-size: 16px; scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* ── Layout ── */
.wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 20px 20px 80px;
}

/* ── Top bar ── */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0 28px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 36px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  flex-shrink: 0;
}

.brand__icon {
  font-size: 1.4rem;
  color: var(--amber);
  line-height: 1;
}

.brand__text {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.02em;
}

.brand:hover .brand__text { color: var(--text); }

.play {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #FFFFFF;
  background: var(--amber-dark);
  text-decoration: none;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  transition: background 0.2s;
}

.play:hover { background: var(--amber); }

/* ── Headings and text ── */
.label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  margin-bottom: 10px;
}

h1 {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}

h2 {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 44px 0 14px;
}

h3 {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 600;
  margin: 28px 0 8px;
}

p {
  margin-bottom: 18px;
  color: var(--text-secondary);
  font-size: 1.05rem;
}

p strong { color: var(--text); font-weight: 600; }

a { color: var(--amber-dark); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--amber); }

ul, ol { margin: 0 0 20px 22px; color: var(--text-secondary); }
li { margin-bottom: 9px; font-size: 1.05rem; }

.lead {
  font-size: 1.18rem;
  color: var(--text);
  margin-bottom: 28px;
}

/* ── Note box ── */
.note {
  background: var(--amber-light);
  border-left: 3px solid var(--amber);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  margin: 32px 0;
}

.note p:last-child { margin-bottom: 0; }

/* ── Card ── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 22px 24px;
  margin: 26px 0;
}

.card p:last-child { margin-bottom: 0; }

/* ── Stats grid, used by the generated pages ── */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin: 26px 0;
}

.stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px 16px;
  text-align: center;
}

.stat__num {
  display: block;
  font-family: var(--font-mono);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--amber-dark);
  line-height: 1.2;
}

.stat__label {
  display: block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  margin-top: 6px;
}

/* ── Worked clue examples, used by the clue school pages ── */
.example {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 20px 22px;
  margin: 22px 0;
}

.example__clue {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}

.example__arrow {
  color: var(--amber-dark);
  font-weight: 700;
  margin: 0 8px;
}

.example__note {
  font-size: 0.98rem;
  color: var(--text-secondary);
  margin: 10px 0 0;
}

/* ── Answer lists ── */
.answer-list {
  columns: 2;
  column-gap: 30px;
  margin: 24px 0;
  padding: 0;
  list-style: none;
}

.answer-list li {
  break-inside: avoid;
  font-size: 0.97rem;
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
  margin: 0;
  color: var(--text-secondary);
}

.answer-list .yr {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--muted);
  margin-left: 6px;
}

/* ── Link grid, used by the hub pages ── */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin: 28px 0;
}

.grid a {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px;
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.2s, transform 0.2s;
}

.grid a:hover {
  border-color: var(--amber);
  transform: translateY(-2px);
}

.grid__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  display: block;
  margin-bottom: 4px;
}

.grid__sub {
  font-size: 0.88rem;
  color: var(--muted);
}

/* ── Call to action ── */
.cta {
  display: inline-block;
  background: var(--amber-dark);
  color: #FFFFFF;
  font-weight: 600;
  text-decoration: none;
  padding: 14px 26px;
  border-radius: var(--radius-sm);
  margin: 30px 0 10px;
  transition: background 0.2s;
}

.cta:hover { background: var(--amber); color: #FFFFFF; }

/* ── Footer ── */
footer {
  margin-top: 64px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}

footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-bottom: 18px;
}

footer nav a {
  font-size: 0.92rem;
  color: var(--text-secondary);
  text-decoration: none;
}

footer nav a:hover { color: var(--amber-dark); text-decoration: underline; }

footer p {
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 4px;
}

/* ── Small screens ── */
@media (max-width: 600px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.35rem; }
  .wrap { padding: 16px 16px 60px; }
  .answer-list { columns: 1; }
  .brand__text { font-size: 1.1rem; }
  .brand__icon { font-size: 1.25rem; }
  .play { padding: 9px 14px; font-size: 0.74rem; }
}