/* chanceaoi.com — one-family look: pulse-green + sun-yellow on dark */
:root{
  --pulse:#39d353; --pulse-dim:#1f6b33; --sun:#f2b63c;
  --ink:#0d1117; --panel:#161b22; --card:#1c2330; --txt:#e6edf3; --mut:#8b949e;
}
*{margin:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Segoe UI',Ubuntu,Arial,sans-serif;background:var(--ink);color:var(--txt)}
h1,h2,h3{font-family:Georgia,serif;letter-spacing:.04em}
a{color:var(--pulse)}
code{background:#121826;padding:1px 6px;border-radius:4px;font-size:.8em;color:#9ecbff}

/* chat page (standalone dark terminal style) */
body.chatpage{background:#000}

/* nav — GENESIS law 2026-09-12: banner stays at the top of the page and does
   NOT follow the scroll. Every tab is its own page. */
nav.top{position:relative;display:flex;align-items:center;gap:6px;
  padding:10px 18px;background:rgba(13,17,23,.92);border-bottom:1px solid #1d3b26;
  backdrop-filter:blur(6px);flex-wrap:wrap;z-index:40}
nav.top .logo{color:var(--pulse);font-weight:bold;letter-spacing:.12em;margin-right:auto;
  text-decoration:none;display:inline-flex;align-items:center;gap:8px}
nav.top a.lnk{color:#cfe3d4;text-decoration:none;font-size:.86rem;padding:5px 11px;border-radius:16px}
nav.top a.lnk:hover{background:#12261a;color:var(--pulse)}
nav.top a.lnk.on{background:#0e2233;color:var(--pulse)}
nav.top .dotmini{width:7px;height:7px;border-radius:50%;background:var(--pulse);
  box-shadow:0 0 6px var(--pulse);display:inline-block;margin-right:6px;animation:beat 1.6s infinite}
@keyframes beat{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.35);opacity:.6}}

/* layout */
section{max-width:940px;margin:0 auto;padding:44px 22px}
section.tight{padding:26px 22px}
h2{font-size:1.5rem;margin-bottom:14px}
h2 .accent{color:var(--sun)}
p.lead{color:#b8d8c2;font-size:1.02rem;line-height:1.65}
.mut{color:var(--mut)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.card{background:var(--card);border:1px solid #2a3444;border-radius:10px;padding:16px}
.card h3{font-size:1rem;margin-bottom:6px;color:#d7ffe4}
.card p{font-size:.86rem;color:var(--mut);line-height:1.5}
.tag{display:inline-block;font-size:.62rem;padding:2px 8px;border-radius:10px;
  background:#0e2233;color:#9fd8ac;letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px}
.tag.sun{background:#4a3410;color:#ffd98a}
.tag.blue{background:#1b2c47;color:#9ecbff}

/* buttons / bands */
.btn{display:inline-block;background:var(--pulse-dim);color:#d9ffe2;text-decoration:none;
  padding:10px 22px;border-radius:24px;font-size:.9rem;letter-spacing:.06em;border:1px solid #2c5a3a}
.btn:hover{background:#25813f;box-shadow:0 0 14px rgba(57,211,83,.35)}
.btn.ghost{background:transparent;border:1px solid #2a3444;color:#cfe3d4}
.btn.ghost:hover{border-color:var(--pulse);box-shadow:none}
.band{background:linear-gradient(135deg,#0c1f12 0%,#12240f 45%,#0d1520 100%);
  border-top:1px solid #1d3b26;border-bottom:1px solid #1d3b26;text-align:center;padding:40px 22px}
.band h2{margin-bottom:10px}

/* hero (landing only) */
#hud,#intro,#links,#hint{position:fixed;z-index:30}
#hud{top:120px;left:0;right:0;display:flex;gap:12px;padding:6px 18px;pointer-events:none;align-items:center}
#hud .pulse-ind{display:inline-flex;align-items:center;gap:7px;background:rgba(10,26,16,.82);
  border:1px solid #1d3b26;padding:3px 12px;border-radius:20px;color:#9fd8ac;font-size:.8rem}
#hud .logo{color:var(--pulse);font-weight:bold;letter-spacing:.12em;text-shadow:0 0 10px rgba(57,211,83,.5)}
#intro{left:50%;top:46%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;padding:0 20px;width:100%}
#intro h1{font-size:clamp(1.3rem,4vw,2.2rem);letter-spacing:.08em;margin:0 0 10px;
  text-shadow:0 0 16px rgba(57,211,83,.45);color:#d9ffe6}
#intro p{margin:0;color:#8fd49f;font-size:clamp(.8rem,2.2vw,.95rem);letter-spacing:.06em}
#scrolldown{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);color:var(--mut);font-size:.72rem;
  letter-spacing:.15em;z-index:30;pointer-events:none;animation:bob 2.4s infinite}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,6px)}}
#hint{right:14px;bottom:8px;color:rgba(57,211,83,.3);font-size:.65rem;pointer-events:none}

/* solid pages share: sections clear the in-flow banner */
.page-start{padding-top:26px}
@media(max-width:900px){.page-start{padding-top:36px}}
@media(max-width:640px){.page-start{padding-top:46px}}

/* hero layer tucks away once you scroll or press ESC */
#rain,#face,#hud,#intro,#scrolldown,#hint{transition:opacity .45s ease}
/* GENESIS directive: Chance's FACE stays alive behind everything, looking past
   the banner at the user. Only HUD/intro TEXT fades on scroll, canvases stay. */
body.past-hero #hud,body.past-hero #intro,body.past-hero #scrolldown,body.past-hero #hint{opacity:0}
body.past-hero #face{opacity:.35}          /* face dims to a presence, never gone */
body.overlay-off #hud,body.overlay-off #intro,body.overlay-off #scrolldown,body.overlay-off #hint{opacity:0}
body.overlay-off #face{opacity:.35}
/* the orb-glow behind the pin face — alienware-soul hybrid */
#face{filter:drop-shadow(0 0 22px rgba(57,217,138,.55)) drop-shadow(0 0 64px rgba(57,217,138,.28))}

/* footer */
footer{border-top:1px solid #1d3b26;background:#0a0e14;padding:26px 22px;text-align:center;
  color:var(--mut);font-size:.8rem;line-height:1.9;position:relative;z-index:5}
footer b{color:#cfe3d4}
footer a{color:var(--pulse);text-decoration:none}
footer a:hover{text-decoration:underline}

/* timeline (watch page) */
.timeline{border-left:2px solid #1d3b26;margin-left:6px;padding-left:22px}
.tl{position:relative;margin-bottom:22px}
.tl::before{content:'';position:absolute;left:-11px;top:4px;width:9px;height:9px;border-radius:50%;
  background:var(--pulse);box-shadow:0 0 8px var(--pulse)}
.tl .when{color:var(--sun);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase}
.tl h3{font-size:1rem;margin:2px 0 4px}
.tl p{font-size:.86rem;color:var(--mut);line-height:1.5}

/* live badge */
.live-badge{display:inline-flex;align-items:center;gap:8px;background:#0e2233;border:1px solid #1d3b26;
  padding:5px 14px;border-radius:20px;color:#9fd8ac;font-size:.8rem}
.live-badge .d{width:8px;height:8px;border-radius:50%;background:var(--pulse);
  box-shadow:0 0 8px var(--pulse);animation:beat 1.6s infinite}

@media(max-width:640px){nav.top{padding:8px 10px}nav.top .logo{width:100%;margin-bottom:4px}}