/* ================================================================
   kad.me - eras.css
   One visual language per era. The body[data-era] selectors morph
   the global vars (bg/fg/accent/HUD); section rules style content.
   ================================================================ */

/* ================= ERA 1 · THE METAL (CRT) ================= */
body[data-era="metal"] {
  --bg: #050805; --fg: #b9f0b9; --accent: #33ff66;
  --hud-bg: rgba(5,12,5,.85); --hud-border: rgba(51,255,102,.35);
  --hud-font: var(--f-crt); --hud-size: 1.15rem;
}
.era-metal { font-family: var(--f-crt); font-size: 1.25rem; }
.era-metal .era-lede { font-size: 1.45rem; text-shadow: 0 0 6px rgba(51,255,102,.5); }
.metal-title {
  font-family: var(--f-crt); font-size: clamp(3rem, 10vw, 6.5rem);
  color: #33ff66; text-shadow: 0 0 18px rgba(51,255,102,.75);
  letter-spacing: .06em; margin: .5rem 0 1rem;
}
.glitch { position: relative; }
.glitch::before, .glitch::after {
  content: attr(data-text); position: absolute; inset: 0; overflow: hidden;
  opacity: .8; pointer-events: none;
}
.glitch::before { color: #ff3366; transform: translate(-2px, 1px); clip-path: inset(20% 0 55% 0); animation: glitchA 3.1s infinite steps(1); }
.glitch::after  { color: #33ccff; transform: translate(2px, -1px); clip-path: inset(60% 0 15% 0); animation: glitchB 2.7s infinite steps(1); }
@keyframes glitchA { 0%,92%,100% { opacity: 0; } 93%,96% { opacity: .8; } }
@keyframes glitchB { 0%,89%,100% { opacity: 0; } 90%,94% { opacity: .8; } }

.term-window { border: 1px solid rgba(51,255,102,.4); border-radius: 6px; background: rgba(0,10,0,.65); max-width: 620px; margin: 2rem 0; }
.term-bar { padding: 6px 14px; border-bottom: 1px solid rgba(51,255,102,.25); color: #7fdd7f; font-size: 1.1rem; }
.term-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #33ff66; margin-right: 8px; box-shadow: 0 0 6px #33ff66; animation: blinkdot 1.4s infinite; }
@keyframes blinkdot { 50% { opacity: .3; } }
.term-body { padding: 14px 16px; font-family: var(--f-crt); font-size: 1.15rem; line-height: 1.4; color: #b9f0b9; min-height: 240px; white-space: pre-wrap; }
.term-link { display: block; padding: 8px 16px 12px; font-size: 1.05rem; }
.metal-quote {
  margin: 3rem 0 0; font-size: clamp(1.4rem, 3.4vw, 2rem); line-height: 1.5;
  color: #d8ffd8; border-left: 3px solid #33ff66; padding-left: 20px;
  text-shadow: 0 0 10px rgba(51,255,102,.4);
}

/* ================= ERA 2 · THE FOUNDATIONS (XP-ish) ================= */
body[data-era="foundations"] {
  --bg: #dfe9f5; --fg: #1a2433; --accent: #1d5fbf;
  --hud-bg: rgba(236,243,250,.9); --hud-border: rgba(29,95,191,.35);
  --hud-font: var(--f-xp); --hud-size: .95rem;
}
.era-foundations {
  background: linear-gradient(180deg, #5a9ae0 0%, #7fb2e8 12%, #dfe9f5 40%, #eef4fb 100%);
  color: #1a2433; font-family: var(--f-xp);
}
.era-foundations .era-kicker { color: #274a73; }
.fnd-title { font-family: var(--f-ui); font-weight: 900; font-size: clamp(2.4rem, 7vw, 4.2rem); color: #16365c; margin-bottom: .5rem; }
.xp-window {
  max-width: 620px; margin: 2rem 0; border-radius: 8px 8px 4px 4px; overflow: hidden;
  box-shadow: 0 14px 40px rgba(22,54,92,.35); border: 1px solid #3a6ea5; background: #ece9d8;
  font-family: var(--f-xp); font-size: .95rem;
}
.xp-titlebar {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px;
  background: linear-gradient(180deg, #2f7bd9 0%, #1d5fbf 50%, #1a54ab 100%);
  color: #fff; font-weight: 700; text-shadow: 1px 1px 1px rgba(0,0,0,.4);
}
.xp-controls { margin-left: auto; display: flex; gap: 4px; }
.xp-controls i { font-style: normal; width: 21px; height: 21px; display: grid; place-items: center; border-radius: 3px; background: linear-gradient(180deg,#4a90e2,#2a6ac2); border: 1px solid #fff5; font-size: .75rem; }
.xp-controls i:last-child { background: linear-gradient(180deg,#e2574a,#c2382a); }
.xp-menubar { display: flex; gap: 16px; padding: 4px 10px; background: #ece9d8; border-bottom: 1px solid #d4d0c8; color: #333; }
.xp-body { padding: 16px 18px; background: #fff; }
.xp-body ul { margin: 10px 0 10px 22px; line-height: 1.7; }
.xp-note { font-size: .85rem; color: #666; margin-top: 8px; font-style: italic; }
.xp-buttons { display: flex; gap: 10px; margin-top: 14px; }
.xp-btn {
  display: inline-block; padding: 5px 16px; border-radius: 3px; text-decoration: none;
  background: linear-gradient(180deg, #fdfdfd, #e3e3e0); border: 1px solid #8e8f8f;
  color: #222; box-shadow: inset 0 0 0 1px #fff;
}
.xp-btn:hover { border-color: #1d5fbf; }
.xp-btn-disabled { color: #999; cursor: not-allowed; }
.fnd-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 2.4rem; }
.fnd-fact { background: #fff; border: 1px solid #c9d8ec; border-radius: 6px; padding: 14px 16px; box-shadow: 0 3px 10px rgba(22,54,92,.08); }
.fnd-fact b { color: #1d5fbf; display: block; font-size: 1.15rem; margin-bottom: 4px; }
.fnd-fact span { font-size: .9rem; color: #40506a; }

/* ================= ERA 3 · THE PLAY (pixel game) ================= */
body[data-era="play"] {
  --bg: #1a1038; --fg: #ffe9f0; --accent: #ff2d78;
  --hud-bg: rgba(26,16,56,.88); --hud-border: rgba(255,45,120,.4);
  --hud-font: var(--f-pixel); --hud-size: .62rem;
}
.era-play { background: linear-gradient(180deg, #120a2a 0%, #1a1038 55%, #2a1450 100%); color: #ffe9f0; }
.play-title {
  font-family: var(--f-pixel); font-size: clamp(1.6rem, 6vw, 3.4rem);
  color: #ffd23e; margin: .6rem 0 1.6rem;
  text-shadow: 4px 4px 0 #ff2d78, 8px 8px 0 #4b1e8e;
}
.play-lede { color: #e8d9ff; }
.quest-log { border: 4px solid #ffd23e; background: rgba(10,4,28,.85); padding: 16px 18px; max-width: 620px; margin: 1rem 0 2rem; box-shadow: 8px 8px 0 rgba(0,0,0,.45); image-rendering: pixelated; }
.quest-head { font-family: var(--f-pixel); font-size: .7rem; color: #ffd23e; margin-bottom: 12px; letter-spacing: .1em; }
.quest { font-family: var(--f-mono); font-size: .9rem; padding: 7px 0; border-bottom: 1px dashed rgba(255,210,62,.25); line-height: 1.5; }
.quest:last-child { border-bottom: none; }
.q-tag { font-family: var(--f-pixel); font-size: .5rem; padding: 3px 7px; margin-right: 8px; vertical-align: 1px; }
.q-main { background: #ff2d78; color: #fff; }
.q-done { background: #2dd881; color: #06281a; }
.q-pivot { background: #ffd23e; color: #3a2a00; }
.q-side { background: #4fc3ff; color: #04222e; }
.q-ally { background: #b18cff; color: #1d0a3a; }
.cart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; margin: 1.5rem 0; }
.cart {
  display: block; text-decoration: none; color: #ffe9f0;
  background: linear-gradient(180deg, #33245e, #241847);
  border: 3px solid #6a4bbf; border-radius: 6px 6px 14px 14px;
  padding: 18px 16px 14px; position: relative;
  box-shadow: 0 6px 0 #14092e; transition: transform .15s, box-shadow .15s;
}
.cart::before { content: ""; position: absolute; top: 8px; right: 12px; width: 26px; height: 8px; background: repeating-linear-gradient(90deg, #6a4bbf 0 4px, transparent 4px 7px); }
.cart:hover { transform: translateY(-4px); box-shadow: 0 10px 0 #14092e, 0 0 24px rgba(255,45,120,.35); border-color: #ff2d78; }
.cart-label { font-family: var(--f-pixel); font-size: .8rem; color: #ffd23e; margin-bottom: 10px; }
.cart-sub { font-size: .85rem; line-height: 1.5; color: #d9c8ff; min-height: 2.6em; }
.cart-star { font-family: var(--f-mono); font-size: .8rem; color: #2dd881; margin-top: 10px; }
.play-games { font-family: var(--f-mono); font-size: .85rem; color: #b09ae0; margin-top: 1.5rem; letter-spacing: .05em; }
.play-games span { color: #ffd23e; }

/* ================= ERA 4 · THE LAB (blueprint) ================= */
body[data-era="lab"] {
  --bg: #0a1620; --fg: #cfe8f5; --accent: #35d0ff;
  --hud-bg: rgba(8,20,30,.88); --hud-border: rgba(53,208,255,.35);
  --hud-font: var(--f-mono); --hud-size: .85rem;
}
.era-lab {
  background:
    linear-gradient(rgba(53,208,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(53,208,255,.06) 1px, transparent 1px),
    #0a1620;
  background-size: 28px 28px, 28px 28px, auto;
  color: #cfe8f5; font-family: var(--f-mono);
}
.lab-title { font-size: clamp(2rem, 6vw, 3.6rem); font-weight: 600; color: #35d0ff; margin-bottom: .5rem; }
.specimen-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 1.6rem 0; }
.specimen {
  display: block; text-decoration: none; color: inherit;
  border: 1px dashed rgba(53,208,255,.5); border-radius: 4px;
  padding: 16px; background: rgba(10,30,44,.55); position: relative;
  transition: border-color .2s, background .2s;
}
.specimen:hover { border-color: #35d0ff; background: rgba(14,42,60,.8); border-style: solid; }
.sp-id { position: absolute; top: -9px; left: 12px; background: #0a1620; padding: 0 8px; font-size: .65rem; color: #35d0ff; letter-spacing: .15em; }
.specimen b { display: block; margin-bottom: 8px; color: #9fe6ff; letter-spacing: .08em; }
.specimen p { font-size: .85rem; line-height: 1.6; color: #a9c6d6; }
.lab-milestone { display: flex; gap: 18px; align-items: center; border: 1px solid rgba(53,208,255,.4); border-left: 4px solid #35d0ff; border-radius: 4px; padding: 16px 18px; background: rgba(14,42,60,.6); max-width: 640px; }
.lab-year { font-size: 1.6rem; color: #35d0ff; font-weight: 600; }
.lab-milestone p { font-size: .92rem; line-height: 1.6; }

/* ================= ERA 5 · THE AGENTS (glass) ================= */
body[data-era="agents"] {
  --bg: #0b0b14; --fg: #e8e8f4; --accent: #8b7bff;
  --hud-bg: rgba(14,12,26,.7); --hud-border: rgba(139,123,255,.35);
  --hud-font: var(--f-ui); --hud-size: .9rem;
}
.era-agents { background: #0b0b14; color: #e8e8f4; }
.agents-mesh {
  position: absolute; inset: 0; z-index: 1; opacity: .55; filter: blur(70px);
  background:
    radial-gradient(38% 30% at 22% 24%, #5b3fd4 0%, transparent 100%),
    radial-gradient(30% 26% at 78% 30%, #2b6ed4 0%, transparent 100%),
    radial-gradient(34% 30% at 55% 78%, #b03fa8 0%, transparent 100%);
  animation: meshdrift 16s ease-in-out infinite alternate;
}
@keyframes meshdrift { to { transform: translate(3%, -4%) scale(1.08); } }
.agents-title { font-size: clamp(2.4rem, 7vw, 4.6rem); font-weight: 900; line-height: 1.05; background: linear-gradient(120deg, #c8bcff, #8b7bff 40%, #4fc3ff); -webkit-background-clip: text; background-clip: text; color: transparent; margin: .6rem 0 1rem; }
.glass-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 1.6rem 0 2.4rem; }
.glass-card {
  display: block; text-decoration: none; color: #e8e8f4;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px; padding: 20px; backdrop-filter: blur(10px);
  transition: transform .2s, border-color .2s, background .2s;
}
.glass-card:hover { transform: translateY(-4px); border-color: rgba(139,123,255,.6); background: rgba(139,123,255,.1); }
.glass-hero { grid-column: 1 / -1; }
.gc-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.gc-head b { font-size: 1.15rem; }
.gc-star { font-family: var(--f-mono); color: #ffd23e; font-size: .85rem; }
.glass-card p { font-size: .92rem; line-height: 1.6; color: #bdbdd6; }
.glass-card code { display: inline-block; margin-top: 12px; font-family: var(--f-mono); font-size: .8rem; color: #8b7bff; background: rgba(139,123,255,.1); padding: 4px 10px; border-radius: 6px; }
.agents-quote { margin-top: 2.6rem; font-size: 1.25rem; line-height: 1.7; color: #cfc8f5; border-left: 3px solid #8b7bff; padding-left: 20px; white-space: pre-line; }
.agents-quote b { color: #fff; }

/* agent chat */
.agent-chat { border: 1px solid rgba(139,123,255,.35); border-radius: 14px; overflow: hidden; background: rgba(10,10,22,.75); backdrop-filter: blur(10px); max-width: 620px; }
.ac-head { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-bottom: 1px solid rgba(139,123,255,.2); font-family: var(--f-mono); font-size: .8rem; color: #bdb2ff; }
.ac-dot { width: 8px; height: 8px; border-radius: 50%; background: #2dd881; box-shadow: 0 0 8px #2dd881; }
.ac-mode { margin-left: auto; opacity: .55; font-size: .68rem; }
.ac-log { padding: 14px 16px; max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.ac-msg { font-size: .9rem; line-height: 1.55; padding: 9px 13px; border-radius: 10px; max-width: 88%; }
.ac-bot { background: rgba(139,123,255,.14); border: 1px solid rgba(139,123,255,.25); align-self: flex-start; }
.ac-user { background: rgba(79,195,255,.14); border: 1px solid rgba(79,195,255,.3); align-self: flex-end; }
.ac-msg .cursor { display: inline-block; width: 8px; background: #8b7bff; animation: blinkdot .8s infinite; }
.ac-form { display: flex; border-top: 1px solid rgba(139,123,255,.2); }
#ac-input { flex: 1; background: none; border: none; outline: none; color: #fff; padding: 12px 16px; font-family: var(--f-mono); font-size: .9rem; }
.ac-form button { background: none; border: none; color: #8b7bff; font-size: 1rem; padding: 0 18px; cursor: pointer; }
.ac-form button:hover { color: #fff; }

/* ================= ERA 6 · THE MARKETS (trading) ================= */
body[data-era="markets"] {
  --bg: #07090d; --fg: #d7e2ea; --accent: #26de81;
  --hud-bg: rgba(7,10,14,.9); --hud-border: rgba(38,222,129,.3);
  --hud-font: var(--f-mono); --hud-size: .85rem;
}
.era-markets { background: #07090d; color: #d7e2ea; font-family: var(--f-mono); }
.mkt-title { font-size: clamp(2.2rem, 6vw, 4rem); font-weight: 600; color: #26de81; margin-bottom: .5rem; }
.ticker { overflow: hidden; border-block: 1px solid rgba(38,222,129,.25); margin: 1.6rem 0; background: rgba(38,222,129,.04); }
.ticker-track { display: inline-flex; gap: 3rem; padding: 9px 0; white-space: nowrap; animation: tick 30s linear infinite; font-size: .85rem; }
@keyframes tick { to { transform: translateX(-50%); } }
.ticker-track .up { color: #26de81; } .ticker-track .dn { color: #fc5c65; }
.chart-wrap { border: 1px solid rgba(38,222,129,.25); border-radius: 8px; background: #0a0e14; padding: 14px 16px; margin: 1.4rem 0 2rem; }
.chart-head { font-size: .9rem; color: #8fa3b0; margin-bottom: 10px; }
.chart-head b { color: #fff; }
.chart-up { color: #26de81; margin-left: 10px; }
#mkt-chart { width: 100%; height: auto; display: block; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 10px; font-size: .7rem; color: #6d8291; }
.chart-legend span b { color: #26de81; }
.mkt-card { border: 1px solid rgba(38,222,129,.3); border-radius: 8px; padding: 20px; background: #0a0e14; max-width: 640px; }
.mkt-card-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.mkt-card-head b { font-size: 1.3rem; color: #fff; }
.mkt-star { color: #ffd23e; }
.acquired-stamp {
  font-size: .7rem; letter-spacing: .18em; color: #26de81; border: 2px solid #26de81;
  padding: 4px 10px; border-radius: 3px; transform: rotate(-3deg);
  box-shadow: 0 0 14px rgba(38,222,129,.3);
}
.mkt-card > p { font-size: .9rem; line-height: 1.65; color: #a9bcc9; }
.mkt-code { margin: 14px 0; background: #060a0f; border: 1px solid #14202c; border-radius: 6px; padding: 12px 16px; }
.mkt-code code { font-size: .85rem; color: #d7e2ea; line-height: 1.7; }
.mkt-code .c { color: #5b7284; }
.mkt-link { display: block; margin-top: 8px; font-size: .85rem; }

/* ================= NOW · CONTACT ================= */
body[data-era="now"] {
  --bg: #0d0d10; --fg: #f0f0f2; --accent: #ffb02e;
  --hud-bg: rgba(13,13,16,.85); --hud-border: rgba(255,176,46,.3);
  --hud-font: var(--f-ui); --hud-size: .9rem;
}
.era-now { background: radial-gradient(60% 50% at 50% 0%, #1c1206 0%, #0d0d10 60%); color: #f0f0f2; display: flex; align-items: center; }
.now-inner { text-align: center; width: 100%; }
.now-avatar { border-radius: 50%; border: 3px solid #ffb02e; box-shadow: 0 0 34px rgba(255,176,46,.35); margin-bottom: 1rem; }
.now-name { font-size: clamp(2rem, 6vw, 3.6rem); font-weight: 900; letter-spacing: -.02em; }
.now-role { margin-top: .6rem; color: #c9c9d4; font-size: 1.05rem; }
.now-role a { color: #ffb02e; text-decoration: none; }
.now-loc { margin-top: .4rem; color: #8f8f9d; font-size: .95rem; }
.now-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin: 2.2rem 0; }
.now-links a {
  display: flex; flex-direction: column; gap: 4px; min-width: 150px;
  padding: 16px 20px; border: 1px solid #2c2c34; border-radius: 12px;
  text-decoration: none; color: #f0f0f2; background: #131318;
  transition: transform .2s, border-color .2s;
}
.now-links a:hover { transform: translateY(-4px); border-color: #ffb02e; }
.now-links b { font-size: 1rem; }
.now-links span { font-family: var(--f-mono); font-size: .8rem; color: #9a9aa8; }
.now-footer { color: #8f8f9d; font-size: .9rem; }
.reboot-btn { background: none; border: 1px solid #3a3a44; color: #ffb02e; border-radius: 6px; padding: 5px 12px; cursor: pointer; font-family: var(--f-mono); font-size: .8rem; margin-left: 6px; }
.reboot-btn:hover { border-color: #ffb02e; }
.now-hint {
  margin-top: 3.2rem; display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-family: var(--f-mono); font-size: 1.4rem; letter-spacing: .3em; text-indent: .3em;
  color: #ffb02e;
}
.now-hint span { text-shadow: 0 0 14px color-mix(in srgb, #ffb02e 55%, transparent); }
.now-hint i {
  font-style: normal; font-size: 1.15rem; line-height: .95;
  animation: cue-blink 1.5s infinite;
  text-shadow: 0 0 8px currentColor;
}

/* first iteration (landing) hides the reboot button; the finale clone keeps it */
#era-now .now-footer .reboot-btn { display: none; }
.now-hint i:nth-of-type(2) { animation-delay: .25s; }
.now-hint i:nth-of-type(3) { animation-delay: .5s; }

/* loop buffer: matches era 1's backdrop so the wrap frame is invisible */
.loop-buffer { background: #050805; }