/* Cairnvale — landing page styles (dark slate + lichen accents). */
:root {
  --ink: #101421;
  --panel: #1a2132;
  --edge: #2c3952;
  --accent: #7fd48f;
  --accent2: #f0b35e;
  --text: #e9eef7;
  --dim: #9fb0c8;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: ui-monospace, "Segoe UI", system-ui, sans-serif;
  color: var(--text); background: var(--ink);
  background-image:
    linear-gradient(150deg, rgba(127, 212, 143, 0.06), rgba(16, 21, 33, 0) 45%),
    linear-gradient(300deg, rgba(240, 179, 94, 0.05), rgba(16, 21, 33, 0) 40%);
  max-width: 1080px;
}
body { padding: 18px 20px 28px; }

#top { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
#top h1 { font-size: 30px; margin: 0; letter-spacing: 0.08em; }
#top nav { display: flex; gap: 14px; font-size: 13px; color: var(--dim); }
#top nav a { color: var(--dim); text-decoration: none; }
#top nav a:hover { color: var(--accent); }

#hero-preview {
  position: relative; overflow: hidden; border-radius: 14px;
  border: 1px solid var(--edge); background: var(--panel);
  min-height: 220px;
}
#hero-preview > canvas { display: block; width: 100%; height: 260px; }
#hero-preview > p {
  position: absolute; left: 14px; bottom: 12px; right: 14px;
  font-size: 13px; color: var(--dim); text-shadow: 0 1px 3px var(--ink);
}
#hero-preview > p b { color: var(--accent2); }

#pitch { max-width: 62ch; }
#pitch p { font-size: 15px; line-height: 1.55; color: var(--dim); margin: 0 0 12px; }
#pitch p:first-of-type { color: var(--text); }

#features {
  list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px;
  margin: 8px 0 0;
}
#features > li {
  padding: 10px 12px; border-radius: 10px; background: var(--panel);
  border: 1px solid var(--edge); font-size: 13px; color: var(--dim);
}
#features > li b { color: var(--text); }
#features > li em { color: var(--accent); font-style: normal; }

#gallery { margin: 18px 0 0; }
#gallery h2 { font-size: 16px; margin: 0 0 10px; color: var(--dim); }
#gallery > div { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
#gallery > div > figure { margin: 0; }
#gallery img { display: block; width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--edge); }
#gallery figcaption { font-size: 12px; color: var(--dim); padding: 4px 2px; }
#gallery > div:empty { min-height: 130px; }

#controls { margin: 16px 0 0; }
#controls h2 { font-size: 16px; margin: 0 0 8px; color: var(--dim); }
#controls dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; }
#controls dt { font-size: 12px; color: var(--accent2); }
#controls dd { font-size: 13px; color: var(--dim); }
#controls kbd {
  font-family: inherit; font-size: 12px; color: var(--text);
  background: var(--panel); border: 1px solid var(--edge); border-radius: 5px;
  padding: 1px 5px;
}

#play-now {
  display: inline-block; margin: 22px 0 0; padding: 12px 20px; border-radius: 12px;
  font-size: 15px; color: #101421; background: var(--accent);
  border: 2px solid #4e9e63; text-decoration: none;
}
#play-now:link { color: #101421; }
#play-now:hover { background: #96e2a6; }
#play-now::after { content: " →"; color: #101421; }

footer { margin: 14px 0 0; font-size: 12px; color: var(--dim); }
footer a { color: var(--accent); text-decoration: none; }

@media (max-width: 700px) {
  body { padding: 12px; }
  #top { flex-direction: column; align-items: start; }
  #top h1 { font-size: 22px; }
  #hero-preview { min-height: 150px; }
  #hero-preview > canvas { height: 170px; }
  #features { grid-template-columns: 1fr; }
  #gallery > div { grid-template-columns: 1fr; }
  #controls dl { grid-template-columns: 1fr; }
}