/* Adapted from the original glitchcraft.studio styles.css for the shared
   GlitchCraft Engine. Changes from the original, in one place rather than
   scattered comments everywhere:
   - .glitch-text (+ keyframes) removed — now the shared "glitch-text"
     effect (Public/effects/glitch-text.css), enabled in site.json.
   - .stars / .noise removed — now the shared "star-field"/"noise-overlay"
     effects, same reason.
   - .page-frame removed — the engine's own tokens.css gives <main>/
     .site-footer the same position:relative;z-index:1 lift generically.
   - .page-hero* removed — About/Devlog now use the shared hero-wave
     component instead of this site's own page-hero markup. Replaced below
     with small overrides on hero-wave's own classes to match the same
     look (kicker/eyebrow, h1, tagline).
   - .footer{...} renamed to .site-footer{...} — the shared footer.leaf
     always renders class="site-footer", not "footer".
   - .log-empty renamed to .section-empty, .log-list/.log-entry/.log-date/
     .log-title/.log-text removed — the devlog now uses the shared timeline
     section kind (real entries render via the engine's own timeline-item
     styling, not these; only the empty state needed a home).
   - .topbar/.topbar-inner/.nav/.nav a* removed — dead against the shared
     nav.leaf markup (it renders .site-nav/.nav-inner and a bare <nav>, not
     these class names); tokens.css's own nav styling already covers the
     same job. .brand and .nav-cta are kept as-is since nav.leaf renders
     those exact class names.
   - New: overrides so the shared prose-section wrapper (used by the
     "herald" section, now real content shared across all 3 pages instead
     of hand-duplicated) and hero-wave (About/Devlog) match this site's
     original bespoke look instead of the engine's generic defaults.
   - New: .section-eyebrow alongside .section-label — same visual pattern,
     the engine's own eyebrow.leaf emits "eyebrow section-eyebrow" for
     herald/entries, while raw sections (games/studio) keep the original
     literal .section-label markup. */

/* ------------------------------------------------------------------ fonts */
/* (theme raw values live in colors.css) */

:root{
  --display: "Cinzel", "Iowan Old Style", Georgia, serif;
  --display-ornate: "Cinzel Decorative", var(--display);
  --body: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}

*{ box-sizing: border-box; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

html{ background: var(--bg); }

body{
  margin:0;
  background:
    radial-gradient(ellipse 70% 45% at 50% -8%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 62%),
    var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a{ color: inherit; text-decoration: none; }

a:focus-visible,
button:focus-visible,
input:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- 3D backdrop (index only) ----------
   z-index: -1, not 0 — these render inside the raw hero section, which is
   inside <main>, and <main> now has its own stacking context (tokens.css
   "main, .site-footer { position: relative; z-index: 1 }"). Within that
   context, a positioned z-index:0 element paints AFTER (on top of) its
   plain non-positioned sibling <section>s (games/studio/herald), not
   before — so at z-index:0 this was actually covering the rest of the
   page. A negative z-index paints before those non-positioned siblings
   instead, which is what "sits behind the real content" actually means
   here. (The original site didn't have this problem: these were direct
   children of <body>, not nested inside a section of <main>.) */
#bg-canvas{
  position: fixed;
  inset: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.bg-scrim{
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: color-mix(in srgb, var(--bg) 40%, transparent);
}

/* ---------- nav ----------
   .brand/.nav-cta match nav.leaf's own class names as-is. The plain nav
   links don't have a class of their own in the shared markup (nav.leaf
   renders a bare <nav><a>...) — retargeting the original .nav/.nav a rules
   onto the shared structure (.nav-inner nav / .nav-inner nav a) instead of
   just dropping them, which is what left these feeling undersized/
   cramped (tokens.css's own generic nav-link styling — 0.92rem, 24px gap —
   was filling in with no override). */
.brand{
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: 0.03em;
  font-size: 15px;
  color: var(--accent-soft);
}
.brand-dot{ color: var(--accent-strong); animation: blinkcursor 1.1s steps(1) infinite; }

.nav-inner nav{ gap: 30px; }
.nav-inner nav a{
  font-family: var(--body);
  font-size: 17px;
  color: var(--ink-dim);
  opacity: 1;
  transition: color .15s ease;
}
.nav-inner nav a:hover{ color: var(--ink); }
.nav-inner nav a[aria-current="page"]{
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 3px;
}

.nav-cta{
  border: 1px solid var(--accent);
  color: var(--accent) !important;
  padding: 8px 16px;
  border-radius: 4px;
}
.nav-cta:hover{ background: var(--accent); color: var(--bg) !important; }

/* ---------- rich hero (index only) ----------
   Full-width now (was max-width:1180px;margin:0 auto directly on .hero) so
   .hero-glow's percentage insets (-15%/-15%) resolve against the real
   viewport and reach the screen edges, not just the 1180px content column.
   The actual content sits in .hero-inner.container instead — same
   full-bleed-background / capped-content-column split the shared hero-wave
   already uses (tokens.css's own .hero-inner already gives it
   position:relative;z-index:1, which is what keeps it above .hero-glow's
   z-index:-1 — no separate rule needed here for that part). */
.hero{
  padding: 110px 0 90px;
  position: relative;
}

.hero-glow{
  position:absolute; inset: -80px -15% auto -15%; height: 560px; z-index:-1;
  background:
    radial-gradient(ellipse 50% 55% at 26% 30%, color-mix(in srgb, var(--accent) 38%, transparent), transparent 70%),
    radial-gradient(ellipse 40% 45% at 78% 12%, color-mix(in srgb, var(--accent-strong) 26%, transparent), transparent 70%);
  filter: blur(50px);
}

.hero-kicker{
  font-family: var(--body);
  font-style: italic;
  color: var(--accent-soft);
  font-size: 19px;
  letter-spacing: 0.02em;
  margin: 0 0 18px;
}

.glitch-text{
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(34px, 6.8vw, 76px);
  line-height: 1.05;
  margin: 0;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.glitch-text.sub{ color: var(--ink-dim); -webkit-text-stroke: 1px var(--ink-dim); color: transparent; }

@keyframes blinkcursor{
  0%, 49%{ opacity:1; } 50%,100%{ opacity:0; }
}

.hero-copy{
  max-width: 560px;
  color: var(--ink-dim);
  font-size: 19px;
  line-height: 1.65;
  margin: 28px 0 36px;
}

.hero-actions{ display:flex; gap: 16px; flex-wrap: wrap; margin-bottom: 40px; }

.btn{
  font-family: var(--body);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 13px 26px;
  border-radius: 5px;
  border: 1px solid transparent;
  display:inline-block;
  transition: all .18s ease;
}
.btn-primary{
  background: var(--accent);
  color: var(--bg);
}
.btn-primary:hover{ background: color-mix(in srgb, var(--accent) 80%, white 20%); transform: translateY(-1px); box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 45%, transparent); }
.btn-ghost{
  border-color: var(--line);
  color: var(--ink);
}
.btn-ghost:hover{ border-color: var(--accent-soft); color: var(--accent-soft); }

.hero-tag{
  display:inline-flex; align-items:center; gap:9px;
  font-family: var(--mono);
  font-size: 12px; letter-spacing: 0.04em; color: var(--ink-dim);
}
.dot{
  width:7px; height:7px; border-radius:50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:0.35; } }

/* ---------- hero-wave overrides (About/Devlog) ----------
   Bring the shared hero-wave component's generic eyebrow/h1/tagline back
   to this site's own kicker/heading/copy look, since tokens.css's defaults
   (monospace uppercase eyebrow, opacity-70% display-font tagline) were
   written for other sites' themes. */
.hero .eyebrow{
  font-family: var(--body);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--accent-soft);
  font-size: 19px;
  margin: 0 0 18px;
}
.hero-wave h1{
  margin: 0 0 20px;
  line-height: 1.1;
  color: var(--ink);
}
.hero-wave .hero-tagline{
  font-family: var(--body);
  font-weight: 400;
  opacity: 1;
  color: var(--ink-dim);
  font-size: 18px;
  line-height: 1.7;
  max-width: 620px;
  margin: 0 auto;
}

/* ---------- section shared ---------- */
.flourish{
  display:flex; align-items:center; gap: 14px;
  max-width: 720px;
  margin: 64px auto 0;
  padding: 0 28px;
  color: var(--accent-strong);
}
.flourish::before,
.flourish::after{
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--line), transparent);
}
.flourish-mark{
  font-family: var(--display-ornate);
  font-size: 16px;
}

.section-label,
.section-eyebrow{
  max-width: 1180px;
  margin: 0 auto 22px;
  padding: 0 28px;
  display:flex; align-items:center; gap: 10px;
  font-family: var(--body);
  font-style: italic;
  font-size: 18px;
  letter-spacing: 0.01em;
  color: var(--accent-soft);
}
.section-label::before,
.section-label::after,
.section-eyebrow::before,
.section-eyebrow::after{
  content: "✦";
  font-family: var(--display-ornate);
  font-size: 12px;
  color: var(--accent-strong);
}

section{ padding-top: 70px; }

/* ---------- games / carts ---------- */
.cart-grid{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 28px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* Was a single fixed narrow centered column (minmax(0,360px)) — now that
   the world card and the gamena.me promo card share one grid (see
   games.html), auto-fit lays them out side by side as two ~360px columns
   on a wide viewport and stacks them (still each capped at 360px, still
   centered) on a narrow one, instead of forcing a vertical stack either
   way. */
.cart-grid-single{
  grid-template-columns: repeat(auto-fit, minmax(280px, 360px));
  justify-content: center;
}

.cart{
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  padding: 24px;
  border-radius: 8px;
  position: relative;
  transition: transform .2s ease, box-shadow .2s ease;
}
.cart:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 32px color-mix(in srgb, var(--accent) 22%, transparent);
}

.cart-top{
  display:flex; justify-content:space-between;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.06em; color: var(--ink-dim);
  margin-bottom: 18px;
}
.cart-status{ color: var(--accent); }

.cart-art{
  height: 120px;
  border: 1px solid var(--line);
  border-radius: 8px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom: 18px;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 32%, transparent), transparent 72%), var(--bg);
}
.cart-glyph{
  font-size: 34px;
  color: var(--accent);
  text-shadow: 0 0 22px var(--accent);
}

.cart-title{
  font-family: var(--display-ornate);
  font-weight: 700;
  font-size: 18px;
  margin: 0 0 12px;
  letter-spacing: 0.01em;
  line-height: 1.3;
}
.cart-desc{
  color: var(--ink-dim);
  font-size: 16px;
  line-height: 1.55;
  margin: 0 0 20px;
}
.cart-meta{
  display:flex; justify-content:space-between;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.04em;
  color: var(--ink-dim);
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

/* ---------- studio ---------- */
.studio-grid{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 28px;
  display:grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 60px;
  align-items: start;
}

.studio-copy h2{
  font-family: var(--display);
  font-size: clamp(28px, 4vw, 42px);
  margin: 0 0 22px;
  line-height: 1.1;
}
.studio-copy p{
  color: var(--ink-dim);
  font-size: 18px;
  line-height: 1.7;
  margin: 0 0 16px;
  max-width: 520px;
}
.studio-copy em{ color: var(--accent); font-style: italic; }

.drop-cap::first-letter{
  font-family: var(--display-ornate);
  font-size: 46px;
  font-weight: 700;
  color: var(--accent-strong);
  float: left;
  line-height: 0.8;
  padding: 4px 8px 0 0;
}

.studio-stats{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.stat{
  background: var(--bg-raised);
  padding: 26px 20px;
  display:flex; flex-direction:column; gap:8px;
}
.stat-num{
  font-family: var(--display);
  font-size: 28px;
  color: var(--accent-soft);
}
.stat-label{ font-family: var(--body); font-style: italic; font-size: 14px; color: var(--ink-dim); }

/* ---------- herald (shared prose section — see header comment) ---------- */
[data-terminal-section="herald"].content-section{ padding-bottom: 90px; }
[data-terminal-section="herald"] .container{
  padding-top: 46px;
  padding-bottom: 46px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
[data-terminal-section="herald"] .section-title{
  font-family: var(--display);
  font-size: clamp(26px, 4vw, 38px);
  margin: 0 0 12px;
}
[data-terminal-section="herald"] .prose{
  color: var(--ink-dim);
  font-size: 18px;
  max-width: 480px;
}
[data-terminal-section="herald"] .prose a{
  color: var(--accent);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
}
[data-terminal-section="herald"] .prose a:hover{ color: var(--accent-soft); border-color: var(--accent-soft); }

/* ---------- devlog empty state ---------- */
.section-empty{
  padding: 40px 28px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--ink-dim);
  font-style: italic;
  text-align: center;
}

/* ---------- footer ---------- */
.site-footer{ padding: 50px 28px 24px; }
.footer-inner{
  max-width: 1180px;
  margin: 0 auto;
  display:flex; justify-content:space-between; flex-wrap: wrap; gap: 40px;
  padding-bottom: 36px;
}
.footer-brand p{ color: var(--ink-dim); font-family: var(--body); font-style: italic; font-size: 15px; margin-top: 10px; max-width: 260px; }
.footer-links{ display:flex; flex-wrap: wrap; gap: 48px; }
.footer-col{ display:flex; flex-direction:column; gap: 12px; }
.footer-heading{ font-family: var(--body); font-style: italic; font-size: 14px; color: var(--ink-dim); margin-bottom: 4px; }
.footer-col a{ font-family: var(--body); font-size: 16px; color: var(--ink-dim); }
.footer-col a:hover{ color: var(--accent); }

.footer-bottom{
  max-width: 1180px;
  margin: 0 auto;
  border-top: 1px solid var(--line);
  padding-top: 20px;
  display:flex; flex-wrap: wrap; justify-content:space-between; gap: 8px 16px;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.04em;
  color: var(--ink-dim);
}
.blink{ animation: pulse 1.4s ease-in-out infinite; color: var(--accent-strong); }

/* ---------- responsive ---------- */
@media (max-width: 860px){
  .nav-inner nav a:not(.nav-cta){ display:none; }
  .cart-grid{ grid-template-columns: 1fr; }
  .studio-grid{ grid-template-columns: 1fr; gap: 34px; }

  .hero{ padding: 70px 0 60px; }
  section{ padding-top: 50px; }
  .flourish{ margin-top: 44px; }
  .site-footer{ padding: 40px 20px 20px; }

  .hero-copy{ font-size: 17px; }
}

@media (max-width: 420px){
  .nav-cta{ padding: 7px 12px; font-size: 15px; }
  .hero{ padding: 56px 0 48px; }
  .studio-stats{ grid-template-columns: 1fr; }
}
