/* Eve + Vault prototype — Best Regards aesthetic. Placeholder build. */
@font-face{ font-family:'Cal Sans'; src:url('/assets/CalSansVF.woff2') format('woff2'); font-weight:400 800; font-display:swap; }
:root{
  --paper:#f1efec; --shell:#fcfbfa; --panel:#f4f3f0; --ink:#1d1d1f;
  --ink-soft:#515154; --muted:#86868b; --line:#e3e0da; --accent:#0a5c99;
  --display:'Cal Sans','Inter',-apple-system,system-ui,sans-serif;
  --body:'Inter',-apple-system,system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}
html[data-vtheme="dark"]{ --paper:#000; --shell:#0c0c0d; --panel:#1d1d20; --ink:#f2f2f4; --ink-soft:#9fa2a6; --muted:#6d7075; --line:#242428; }
html[data-vtheme="vintage"]{ --paper:#3a332e; --shell:#232019; --panel:#1a1815; --ink:#f2ede6; --ink-soft:#c9c0b4; --muted:#9a9188; --line:rgba(255,255,255,.1); --accent:#ff5a1f; }
*{ box-sizing:border-box; margin:0; padding:0; }
body{ background:var(--paper); color:var(--ink); font:400 16px/1.65 var(--body); min-height:100vh; }
a{ color:inherit; }
h1,h2,h3{ font-family:var(--display); font-weight:600; letter-spacing:-0.015em; }
.shell{ max-width:1180px; margin:16px auto 26px; background:var(--shell); border:1px solid var(--line); border-radius:24px; overflow:clip; min-height:82vh; }
.wrap{ max-width:1000px; margin:0 auto; padding:0 clamp(18px,4vw,48px); }
.topnav{ display:flex; justify-content:space-between; align-items:center; padding:18px clamp(18px,4vw,48px); border-bottom:1px solid var(--line); }
.mark{ font-family:var(--display); font-size:17px; display:flex; align-items:center; gap:9px; text-decoration:none; }
.chip{ background:var(--ink); color:var(--paper); border-radius:6px; font:500 10px var(--mono); padding:4px 7px; }
.navlinks{ display:flex; gap:22px; font-size:12.5px; color:var(--ink-soft); }
.navlinks a{ text-decoration:none; }
.simnote{ font:500 10px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); background:var(--panel); border:1px solid var(--line); border-radius:100px; padding:5px 12px; }
.hero{ padding:70px 0 40px; }
.hero h1{ font-size:clamp(30px,4.6vw,52px); max-width:700px; line-height:1.1; }
.hero p{ margin-top:20px; max-width:540px; color:var(--ink-soft); }
.cells{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:30px 0 70px; }
.cell{ background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:22px; }
.cell h3{ font-size:17px; margin-bottom:8px; }
.cell p{ font-size:14px; color:var(--ink-soft); }
@media(max-width:760px){ .cells{ grid-template-columns:1fr; } }

/* ---- Eve presence + panel ---- */
#evePresence{
  position:fixed; right:26px; bottom:26px; z-index:60;
  width:16px; height:16px; border-radius:50%;
  background:var(--ink); opacity:0; transform:scale(.4);
  transition:opacity 1.8s ease, transform 1.8s ease;
  cursor:pointer; border:none;
}
#evePresence.here{ opacity:1; transform:scale(1); animation:breathe 4.5s ease-in-out infinite; }
@keyframes breathe{ 50%{ transform:scale(1.25); } }
#evePresence:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; }

#evePanel{
  position:fixed; right:22px; bottom:22px; z-index:70;
  width:min(400px,92vw); max-height:min(600px,80vh);
  background:var(--shell); border:1px solid var(--line); border-radius:20px;
  box-shadow:0 24px 70px -24px rgba(0,0,0,.35);
  display:none; flex-direction:column; overflow:hidden;
}
#evePanel.open{ display:flex; }
.eve-head{ display:flex; justify-content:space-between; align-items:center; padding:14px 18px; border-bottom:1px solid var(--line); }
.eve-name{ font-family:var(--display); font-size:15px; display:flex; align-items:center; gap:9px; }
.eve-dot{ width:9px; height:9px; border-radius:50%; background:var(--ink); animation:breathe 4.5s ease-in-out infinite; }
.eve-close{ background:none; border:none; color:var(--muted); cursor:pointer; font-size:16px; padding:4px 8px; }
.eve-log{ flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:10px; }
.msg{ max-width:85%; padding:10px 15px; border-radius:15px; font-size:14.5px; line-height:1.55; opacity:0; transform:translateY(6px); animation:arrive .5s ease forwards; }
@keyframes arrive{ to{ opacity:1; transform:none; } }
.msg.eve{ background:var(--panel); border:1px solid var(--line); align-self:flex-start; border-bottom-left-radius:5px; }
.msg.you{ background:var(--ink); color:var(--paper); align-self:flex-end; border-bottom-right-radius:5px; }
.typing{ align-self:flex-start; padding:12px 16px; }
.typing span{ display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--muted); margin-right:4px; animation:tp 1.2s infinite; }
.typing span:nth-child(2){ animation-delay:.2s } .typing span:nth-child(3){ animation-delay:.4s }
@keyframes tp{ 30%{ transform:translateY(-4px); } }
.eve-input{ padding:12px; border-top:1px solid var(--line); }
.choices{ display:flex; flex-wrap:wrap; gap:8px; }
.choice{ background:var(--panel); border:1px solid var(--line); border-radius:100px; padding:9px 16px; font:400 13.5px var(--body); color:var(--ink); cursor:pointer; transition:background .15s, border-color .15s; }
.choice:hover, .choice.picked{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.choice:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.freewrap{ display:flex; gap:8px; }
.freetext{ flex:1; border:1px solid var(--line); border-radius:12px; background:var(--panel); color:var(--ink); font:400 14.5px var(--body); padding:11px 14px; resize:none; }
.sendbtn{ background:var(--ink); color:var(--paper); border:none; border-radius:12px; padding:0 18px; cursor:pointer; font-size:14px; }

/* ---- games ---- */
.game{ padding:6px 0; }
.mm-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.mm-card{ aspect-ratio:1; border:1px solid var(--line); border-radius:12px; background:var(--panel); cursor:pointer; display:flex; align-items:center; justify-content:center; font:500 12px var(--body); text-align:center; padding:6px; color:transparent; transition:background .2s; }
.mm-card.up{ color:var(--ink); background:var(--shell); }
.mm-card.done{ color:var(--muted); background:var(--shell); border-style:dashed; cursor:default; }
.tot-row{ display:flex; gap:8px; margin:6px 0; }
.tot-row .choice{ flex:1; text-align:center; }
.stack-list{ display:flex; flex-direction:column; gap:8px; }
.stack-item{ border:1px solid var(--line); border-radius:12px; background:var(--panel); padding:10px 14px; font-size:14px; cursor:pointer; display:flex; justify-content:space-between; }
.stack-item .rank{ font:500 12px var(--mono); color:var(--accent); }

/* ---- roadmap ---- */
#roadmap{
  position:fixed; left:22px; bottom:22px; z-index:55;
  width:min(340px,88vw); max-height:70vh; overflow-y:auto;
  background:var(--shell); border:1px solid var(--line); border-radius:20px;
  padding:20px; display:none;
  box-shadow:0 24px 70px -24px rgba(0,0,0,.3);
}
#roadmap.open{ display:block; animation:arrive .6s ease; }
#roadmap h3{ font-size:13px; font-family:var(--mono); font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
#roadmap .goal{ font-family:var(--display); font-size:19px; margin:8px 0 14px; line-height:1.3; }
.rm-item{ border:1px solid var(--line); border-radius:12px; padding:10px 14px; margin-bottom:8px; font-size:13.5px; background:var(--panel); display:flex; justify-content:space-between; align-items:center; gap:8px; opacity:0; animation:arrive .5s ease forwards; }
.rm-item .tag{ font:500 9.5px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); white-space:nowrap; }
.rm-item.notyet{ opacity:.55; border-style:dashed; }
.rm-item.notyet .tag{ color:var(--accent); }

/* ---- vault ---- */
.vault-hero{ padding:80px 0 30px; text-align:center; }
.vault-hero .keyart{ font-size:44px; }
.vault-hero h1{ font-size:clamp(28px,4vw,44px); margin-top:16px; }
.vault-manifesto{ max-width:460px; margin:18px auto 0; color:var(--ink-soft); font-size:15.5px; }
.vgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:44px 0 70px; }
@media(max-width:820px){ .vgrid{ grid-template-columns:1fr; } }
.vcard{ background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:22px; min-height:130px; }
.vcard h3{ font-size:16px; margin-bottom:8px; }
.vcard p, .vcard li{ font-size:13.5px; color:var(--ink-soft); }
.vcard ul{ padding-left:16px; }
.vcard textarea{ width:100%; min-height:90px; border:1px solid var(--line); border-radius:10px; background:var(--shell); color:var(--ink); font:400 13.5px var(--body); padding:10px; }
.prompt-box{ background:var(--shell); border:1px solid var(--line); border-radius:10px; padding:12px; font:400 12.5px var(--mono); margin-top:10px; max-height:130px; overflow:auto; white-space:pre-wrap; }
.copybtn{ margin-top:8px; background:none; border:1px solid var(--line); border-radius:8px; color:var(--ink-soft); font:500 11.5px var(--mono); padding:5px 12px; cursor:pointer; }
.theme-row{ display:flex; gap:8px; }
.keyfield{ letter-spacing:6px; text-align:center; font:500 20px var(--mono); }
.radio-frame{ width:100%; height:420px; border:1px solid var(--line); border-radius:14px; }
.vfoot{ border-top:1px solid var(--line); padding:20px clamp(18px,4vw,48px); font-size:12px; color:var(--muted); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }