/* Ghelmyon public site — shared styles */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg: #0a0a0a;
  --bg-raised: #111;
  --bg-card: #151210;
  --border: #2a2418;
  --border-light: #3a3020;
  --gold: #c9963a;
  --gold-bright: #e8a530;
  --gold-dim: #8a7e5a;
  --text: #d4c8a0;
  --text-dim: #8a7e5a;
  --text-bright: #e8d5a3;
  --green: #7a9a5a;
  --blue: #5a8ac9;
  --red: #c44;
  --font-body: 'Georgia', 'Times New Roman', serif;
  --font-mono: 'Courier New', 'Consolas', monospace;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.7;
  min-height: 100vh;
}

/* --- NAV --- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 3.2rem;
}

.site-nav .nav-brand {
  color: var(--gold);
  font-size: 1.1rem;
  text-decoration: none;
  letter-spacing: 0.05em;
}

.site-nav .nav-links {
  display: flex;
  gap: 1.8rem;
  list-style: none;
}

.site-nav .nav-links a {
  color: var(--text-dim);
  text-decoration: none;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: color 0.15s;
}

.site-nav .nav-links a:hover,
.site-nav .nav-links a.active {
  color: var(--gold);
}

.site-nav .nav-links .nav-play {
  color: var(--gold);
  border: 1px solid var(--gold);
  padding: 0.2rem 0.8rem;
  border-radius: 2px;
}

.site-nav .nav-links .nav-play:hover {
  background: var(--gold);
  color: var(--bg);
}

/* Create Character: the standout CTA in the nav (filled, so it reads as the
   primary "try it" action above the outlined Play button). */
.site-nav .nav-links .nav-create {
  color: var(--bg);
  background: var(--gold);
  border: 1px solid var(--gold);
  padding: 0.2rem 0.8rem;
  border-radius: 2px;
  font-weight: bold;
}
.site-nav .nav-links .nav-create:hover {
  background: var(--gold-bright, #e8a530);
  border-color: var(--gold-bright, #e8a530);
  color: var(--bg);
}
.site-nav .nav-links .nav-create .nav-beta {
  font-size: 0.6rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  vertical-align: super;
  margin-left: 0.15rem;
  opacity: 0.8;
}

/* Page hero banner: a clean dark gradient with a soft gold glow. No photo
   background on purpose, the cinematic frames are light book-illustrations that
   do not read as wide banners. */
.page-hero {
  position: relative;
  padding: 4.5rem 1.5rem 3.25rem;
  text-align: center;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2.5rem;
  background:
    radial-gradient(ellipse 70% 120% at 50% -10%,
      rgba(201, 150, 58, 0.18), rgba(201, 150, 58, 0) 60%),
    linear-gradient(to bottom, #15100a 0%, #0d0a07 70%, var(--bg) 100%);
}
.page-hero .page-hero-inner {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
}
.page-hero h1 {
  font-size: 3rem;
  color: var(--gold-bright, #e8a530);
  margin: 0;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 20px rgba(201, 150, 58, 0.25);
}
.page-hero h1::after {
  content: "";
  display: block;
  width: 64px;
  height: 2px;
  margin: 0.8rem auto 0;
  background: var(--gold, #c9963a);
  opacity: 0.65;
}
.page-hero .page-hero-sub {
  color: var(--text-dim, #8a7e5a);
  font-size: 1.15rem;
  font-style: italic;
  margin: 0.65rem 0 0;
}
@media (max-width: 640px) {
  .page-hero { padding: 3rem 1rem 2.25rem; }
  .page-hero h1 { font-size: 2.1rem; }
}

/* Hamburger */
.nav-toggle { display: none; background: none; border: none; color: var(--gold); font-size: 1.4rem; cursor: pointer; }

@media (max-width: 700px) {
  .nav-toggle { display: block; }
  .site-nav .nav-links {
    display: none;
    position: absolute;
    top: 3.2rem;
    left: 0;
    right: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    padding: 1rem 1.5rem;
    gap: 1rem;
  }
  .site-nav .nav-links.open { display: flex; }
}

/* --- CONTAINER --- */
.container {
  max-width: 760px;
  margin: 0 auto;
  padding: 3rem 1.5rem;
}

.container-wide {
  max-width: 960px;
  margin: 0 auto;
  padding: 3rem 1.5rem;
}

/* --- TYPOGRAPHY --- */
h1 {
  font-size: 2.8rem;
  color: var(--gold);
  letter-spacing: 0.05em;
  margin-bottom: 0.3rem;
  font-weight: normal;
}

h2 {
  font-size: 1.4rem;
  color: var(--gold);
  margin: 2.5rem 0 1rem;
  font-weight: normal;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.4rem;
}

h3 {
  font-size: 1.1rem;
  color: var(--text-bright);
  margin: 1.5rem 0 0.5rem;
  font-weight: normal;
}

p { margin-bottom: 1.2rem; }

a { color: var(--gold); }
a:hover { color: var(--gold-bright); }

.subtitle {
  font-size: 1.1rem;
  color: var(--text-dim);
  font-style: italic;
  margin-bottom: 3rem;
}

.highlight { color: var(--text-bright); }

/* --- TERMINAL BLOCK --- */
.terminal {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  padding: 1.2rem 1.5rem;
  margin: 1.5rem 0;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-dim);
  white-space: pre-wrap;
  overflow-x: auto;
}

.terminal .prompt { color: var(--gold); }
.terminal .system { color: var(--green); }
.terminal .narration { color: var(--text); font-style: italic; }
.terminal .damage { color: var(--red); }
.terminal .skill { color: var(--blue); }

/* --- STAT CARDS --- */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.8rem;
  margin: 1.5rem 0;
}

.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 0.8rem 1rem;
  text-align: center;
}

.stat-number {
  font-size: 1.8rem;
  color: var(--gold);
  font-weight: bold;
  display: block;
}

.stat-label {
  font-size: 0.8rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* --- FEATURE LIST --- */
.feature-list {
  list-style: none;
  margin: 1rem 0;
}

.feature-list li {
  padding: 0.5rem 0;
  padding-left: 1.5rem;
  position: relative;
}

.feature-list li::before {
  content: '\25B8';
  color: var(--gold);
  position: absolute;
  left: 0;
}

/* --- CTA --- */
.cta {
  text-align: center;
  margin: 3rem 0 2rem;
  padding: 2rem;
  border: 1px solid var(--border);
  background: var(--bg-card);
}

.cta a, .btn {
  display: inline-block;
  padding: 0.8rem 2rem;
  background: var(--gold);
  color: var(--bg);
  text-decoration: none;
  font-size: 1.1rem;
  font-family: var(--font-body);
  letter-spacing: 0.05em;
  margin: 0.5rem;
  border: none;
  cursor: pointer;
}

.cta a:hover, .btn:hover {
  background: var(--gold-bright);
  color: var(--bg);
}

.cta a.secondary, .btn.secondary {
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--gold);
}

.cta a.secondary:hover, .btn.secondary:hover {
  background: rgba(201, 150, 58, 0.1);
  color: var(--gold-bright);
}

/* --- DIVIDER --- */
.divider {
  border: 0;
  height: 1px;
  background: var(--border);
  margin: 2.5rem 0;
}

/* --- ABOUT NOTE --- */
/* CN103: a small, de-emphasized aside for personal/author material that
   should never lead a page (the /world inversion the owner flagged). Reads
   as a footnote, not a card - deliberately quieter than .terminal. */
.about-note {
  border-top: 1px solid var(--border);
  margin: 2rem 0 0;
  padding: 1.25rem 0 0;
  font-size: 0.85rem;
  color: var(--text-dim);
}

.about-note strong {
  color: var(--gold-dim);
}

/* --- FOOTER --- */
.site-footer {
  text-align: center;
  color: var(--text-dim);
  font-size: 0.8rem;
  padding: 2rem 1.5rem;
  border-top: 1px solid var(--border);
  margin-top: 3rem;
}

.site-footer a {
  color: var(--text-dim);
  text-decoration: none;
  margin: 0 0.8rem;
}

.site-footer a:hover {
  color: var(--gold);
}

/* --- HERO (landing page) --- */
.hero {
  text-align: center;
  padding: 6rem 1.5rem 4rem;
  max-width: 700px;
  margin: 0 auto;
}

.hero h1 {
  font-size: 3.5rem;
  margin-bottom: 1rem;
}

.hero .tagline {
  font-size: 1.2rem;
  color: var(--text-dim);
  margin-bottom: 3rem;
  line-height: 1.8;
}

.hero-nav {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  max-width: 500px;
  margin: 0 auto 2rem;
}

.hero-nav a {
  display: block;
  padding: 1.5rem 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  text-decoration: none;
  text-align: center;
  transition: border-color 0.15s;
}

.hero-nav a:hover {
  border-color: var(--gold);
}

.hero-nav a .nav-title {
  display: block;
  color: var(--gold);
  font-size: 1.1rem;
  margin-bottom: 0.3rem;
}

.hero-nav a .nav-desc {
  display: block;
  color: var(--text-dim);
  font-size: 0.8rem;
}

/* --- PRESS KIT TABLE --- */
.fact-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
}

.fact-table td {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.fact-table td:first-child {
  color: var(--text-dim);
  width: 140px;
  font-size: 0.9rem;
}

/* --- RESPONSIVE --- */
@media (max-width: 600px) {
  h1 { font-size: 2rem; }
  .hero h1 { font-size: 2.4rem; }
  .hero { padding: 3rem 1rem 2rem; }
  .hero-nav { grid-template-columns: 1fr; }
  .container { padding: 2rem 1rem; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* CN103 (2026-09-03): the possibility blurb harvested from the retired
   handout.html into the landing hero. Sits between the tagline and the
   rules line, so the page leads with what you can do and lets the rules
   follow, per the owner's "lead with world, mechanics underneath" ruling. */
.world-possibility,
.hero-possibility {
  max-width: 46rem;
  margin: 1.1rem auto 0;
  line-height: 1.65;
  color: var(--text);
}

.tagline-rules {
  margin-top: 1.1rem;
  opacity: .8;
}

/* ROLLFMT: the [ROLL] badge in documentation examples (mirrors style.css). */
.ansi-roll {
  display: inline-block;
  background: #8be9fd;
  color: #10141a;
  font-weight: bold;
  border-radius: 3px;
  padding: 0 0.35em;
}