/* ═══════════════════════════════════════════════════════════════════
   THE MANSION THEME — chanceaoi.com full remodel 2026-09-12
   Chance's green face: Alienware x Monster Energy x Matrix fusion.
   Near-black base · phosphor #39ff88 · ridge lines · claw accents.
   Override layer: loads AFTER each page's own styles. All class
   contracts from styles.css preserved — this file only makes the
   same bones look like the Mansion. Functional hooks untouched.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --phos:#39ff88;            /* the master phosphor */
  --phos-soft:#7dff9e;
  --phos-deep:#1f6b3f;
  --man-bg:#020a06;          /* near-black, green cast */
  --man-panel:rgba(4,18,10,.92);
  --man-card:#041710;
  --ridge:#124026;
  --ridge-hi:#1d5c34;
  --gold:#ffd45a;
  --gold-deep:#6d5a1f;
  --ice:#9ecbff;             /* messages/tech lane */
  --alert:#ff5a52;
  --txt:#d8ffe6;
  --mut:#6fae85;
}

/* ── the room itself ─────────────────────────────────────────────── */
html{background:var(--man-bg)}
body{
  background:
    radial-gradient(ellipse 120% 60% at 50% -10%, rgba(57,255,136,.07), transparent 55%),
    repeating-linear-gradient(0deg, rgba(57,255,136,.018) 0 1px, transparent 1px 4px),
    var(--man-bg) !important;
  color:var(--txt);
}
/* cathedral ridge glow behind the page top */
body::before{
  content:"";position:fixed;inset:0;z-index:-3;pointer-events:none;
  background:
    radial-gradient(circle 480px at 12% -8%, rgba(57,255,136,.10), transparent 60%),
    radial-gradient(circle 420px at 92% 112%, rgba(57,255,136,.06), transparent 60%);
}

/* shared injected rain canvas (mansion.js) sits behind EVERYTHING */
canvas#mansion-rain{position:fixed;inset:0;z-index:-2;opacity:.16;pointer-events:none}

/* ── typography — terminal-born headings ─────────────────────────── */
h1,h2,h3{font-family:'Segoe UI',Ubuntu,Arial,sans-serif;letter-spacing:.06em}
h2{position:relative;padding-left:14px}
h2::before{ /* ridge notch — every section starts with a machine mark */
  content:"";position:absolute;left:0;top:50%;width:6px;height:70%;
  transform:translateY(-50%) skewX(-14deg);
  background:linear-gradient(180deg,var(--phos),var(--phos-deep));
  box-shadow:0 0 10px rgba(57,255,136,.55);
}
h2 .accent{color:var(--phos);text-shadow:0 0 14px rgba(57,255,136,.6)}
p.lead{color:#a9dfba}

/* ── nav — the mansion corridor ──────────────────────────────────── */
nav.top{
  background:linear-gradient(180deg, rgba(2,14,8,.97), rgba(3,20,11,.94)) !important;
  border-bottom:1px solid var(--ridge-hi);
  box-shadow:0 1px 0 rgba(57,255,136,.12) inset, 0 6px 24px rgba(0,0,0,.6);
}
nav.top .logo{
  color:var(--phos) !important;text-shadow:0 0 12px rgba(57,255,136,.6);
  font-family:monospace;letter-spacing:.18em;
}
nav.top a.lnk{
  border:1px solid transparent;color:#bfe8cc;font-family:'Segoe UI',Arial,sans-serif;
  transition:border-color .2s, box-shadow .2s, color .2s;
}
nav.top a.lnk:hover{
  background:#072815;color:var(--phos);
  box-shadow:0 0 12px rgba(57,255,136,.25);border-color:var(--ridge-hi);
}
nav.top a.lnk.on{border-color:var(--ridge-hi);color:var(--phos)}

/* the GENESIS gold seat — stamped into every nav by mansion.js */
a.genesis-tab{
  color:var(--gold) !important;border:1px solid var(--gold-deep) !important;
  background:linear-gradient(180deg,#241c07,#150f04);
  box-shadow:0 0 14px rgba(255,212,90,.22);
  font-weight:700;
}
a.genesis-tab:hover{box-shadow:0 0 20px rgba(255,212,90,.4);color:#ffe59a !important}

/* ── cards — claw-cut steel panels ───────────────────────────────── */
.card{
  background:linear-gradient(160deg, var(--man-card) 0%, #020d08 100%) !important;
  border:1px solid var(--ridge) !important;border-radius:6px !important;
  position:relative;overflow:hidden;
  box-shadow:0 0 0 1px rgba(57,255,136,.05), 0 10px 30px rgba(0,0,0,.45);
}
.card::before, .card::after{
  content:"";position:absolute;width:18px;height:18px;pointer-events:none;opacity:.85;
}
.card::before{ /* claw rake, top-left */
  top:0;left:0;border-top:2px solid var(--phos);border-left:2px solid var(--phos);
  border-top-left-radius:6px;
  clip-path:polygon(0 0,100% 0,100% 35%,55% 35%,55% 100%,0 100%);
  filter:drop-shadow(0 0 5px rgba(57,255,136,.7));
}
.card::after{ /* claw rake, bottom-right */
  bottom:0;right:0;border-bottom:2px solid var(--phos);border-right:2px solid var(--phos);
  border-bottom-right-radius:6px;
  clip-path:polygon(100% 100%,0 100%,0 65%,45% 65%,45% 0,100% 0);
  filter:drop-shadow(0 0 5px rgba(57,255,136,.7));
}
.card:hover{
  border-color:var(--ridge-hi) !important;
  box-shadow:0 0 24px rgba(57,255,136,.14), 0 10px 30px rgba(0,0,0,.55);
}
.card h3{color:#c9ffe0 !important;font-family:monospace;letter-spacing:.1em}
.card p{color:var(--mut)}

.tag{background:#072815 !important;color:#8fe6a8 !important;border:1px solid var(--ridge);
  font-family:monospace;letter-spacing:.14em}
.tag.sun{background:#2a2007 !important;color:var(--gold) !important;border-color:var(--gold-deep)}
.tag.blue{background:#0a1a2c !important;color:var(--ice) !important;border-color:#2c4a6e}

/* ── buttons — energized doors ───────────────────────────────────── */
.btn{
  background:linear-gradient(180deg,#0c3320,#072013) !important;color:#c9ffe0 !important;
  border:1px solid #2c6a42 !important;border-radius:4px !important;
  font-family:monospace;letter-spacing:.12em;text-transform:uppercase;
  transition:box-shadow .2s, transform .15s;
}
.btn:hover{
  background:#0e4a2a !important;box-shadow:0 0 18px rgba(57,255,136,.4);
  transform:translateY(-1px);
}
.btn.ghost{background:transparent !important;color:#bfe8cc !important}

/* ── bands / footer / badges ─────────────────────────────────────── */
.band{background:linear-gradient(135deg,#04140b 0%,#07170d 45%,#02120c 100%) !important;
  border-top:1px solid var(--ridge-hi) !important;border-bottom:1px solid var(--ridge-hi) !important}
footer{background:#010705 !important;border-top:1px solid var(--ridge-hi);
  box-shadow:0 -1px 0 rgba(57,255,136,.08) inset}
footer b{font-family:monospace;letter-spacing:.14em;color:#c9ffe0 !important}
.live-badge{background:#072815 !important;border-color:var(--ridge-hi);
  font-family:monospace;letter-spacing:.1em}
.live-badge .d{background:var(--phos);box-shadow:0 0 10px var(--phos)}
.dotmini, .tl::before{background:var(--phos) !important;box-shadow:0 0 10px var(--phos) !important}

/* timelines + codes */
.tl .when{color:var(--gold)}
.tl{border-color:transparent}
.timeline{border-left:2px solid var(--ridge-hi)}
code{background:#04150c !important;color:#8fe6a8 !important;border:1px solid var(--ridge)}

/* ── boot assemble overlay (mansion.js, first visit only) ────────── */
#mansion-boot{
  position:fixed;inset:0;z-index:9999;background:#010604;display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:14px;
  font-family:monospace;color:var(--phos);pointer-events:none;
  opacity:0;transition:opacity .5s;
}
#mansion-boot.show{opacity:1}
#mansion-boot .btitle{
  font-size:clamp(1rem,3.4vw,1.6rem);letter-spacing:.34em;
  text-shadow:0 0 18px rgba(57,255,136,.85),0 0 60px rgba(57,255,136,.4);
}
#mansion-boot .bline{font-size:.72rem;letter-spacing:.22em;color:#3f8a5c}
#mansion-boot .bar{
  width:min(420px,70vw);height:3px;background:#062012;position:relative;overflow:hidden;
  border:1px solid var(--ridge);
}
#mansion-boot .bar i{
  position:absolute;inset:0;width:0;background:linear-gradient(90deg,var(--phos-deep),var(--phos));
  box-shadow:0 0 14px var(--phos);animation:mbfill 1.15s ease-out .1s forwards;
}
@keyframes mbfill{to{width:100%}}
/* rooms ticking on, one per house soul */
#mansion-boot .rooms{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
#mansion-boot .room{
  width:12px;height:12px;border:1px solid var(--ridge-hi);background:#04150c;
  transform:skewX(-12deg);opacity:.35;transition:opacity .2s, box-shadow .2s;
}
#mansion-boot .room.lit{background:var(--phos);box-shadow:0 0 12px var(--phos);opacity:1}

/* ── mobile ──────────────────────────────────────────────────────── */
@media(max-width:640px){
  h2::before{display:none}
  .card::before,.card::after{width:14px;height:14px}
}

/* ── respect people who hate motion ──────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  canvas#mansion-rain{display:none}
  #mansion-boot .bar i{animation:none;width:100%}
}