/* =====================================================================
   site.css  —  the look of the whole website
   (colors taken from your Mission Control app)
   ===================================================================== */
:root{
  --navy:#1E2A44; --ink:#243038; --teal:#2E8B9B; --pink:#E8657A; --gold:#FBD45E;
  --green:#6FBE7A; --sky:#6FB7D6; --purple:#B58CD6; --orange:#F2A03D;
  --card1:#FBE08A; --card2:#A9DCEC; --card3:#BFE6C9; --card4:#C9C2EE; --card5:#FFCF9E; --card6:#F6B6C0;
  --paper:#FFFFFF;
  --font:"Trebuchet MS","Segoe UI",system-ui,Verdana,sans-serif;
}
*{ box-sizing:border-box; }
html,body{ margin:0; }
body{
  font-family:var(--font); color:var(--ink);
  background:linear-gradient(#BCE2F4 0%, #CFEAF6 30%, #D9F0DC 60%, #C7E9B6 100%) fixed;
  min-height:100vh;
}
a{ color:var(--teal); }

/* ---------- top bar ---------- */
header.site{
  position:sticky; top:0; z-index:40;
  background:rgba(255,255,255,.86); backdrop-filter:blur(8px);
  box-shadow:0 2px 14px rgba(0,0,0,.10);
}
.bar{ max-width:1080px; margin:0 auto; display:flex; align-items:center; gap:12px;
      padding:9px clamp(12px,3vw,22px); flex-wrap:wrap; }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--navy); margin-right:auto; }
.brand .mini{ width:38px; height:48px; }
.brand b{ font-size:clamp(15px,2.4vw,20px); line-height:1; color:var(--navy); }
.brand span{ display:block; font-size:11px; color:#5A6B78; font-weight:normal; }

.searchform{ display:flex; align-items:center; gap:0; background:#fff; border-radius:13px; box-shadow:0 2px 0 rgba(0,0,0,.10); overflow:hidden; }
.searchform input{ border:none; outline:none; font:14px var(--font); padding:7px 11px; width:clamp(110px,18vw,190px); background:transparent; color:var(--ink); }
.searchform button{ border:none; background:transparent; cursor:pointer; font-size:15px; padding:6px 9px; }
.themebtn{ border:none; cursor:pointer; font:bold 13px var(--font); color:var(--navy); background:#fff; border-radius:13px;
  padding:6px 11px; box-shadow:0 2px 0 rgba(0,0,0,.10); display:flex; align-items:center; gap:6px; }
.themebtn svg{ display:block; }
.ver{ margin-top:8px; font-size:11px; opacity:.6; letter-spacing:.5px; }
#langToggle{ display:flex; gap:5px; }
.langbtn{ border:none; cursor:pointer; font:bold 13px var(--font); color:var(--teal);
  background:#fff; border-radius:11px; padding:6px 10px; box-shadow:0 2px 0 rgba(0,0,0,.10); }
.langbtn.on{ background:var(--teal); color:#fff; }

nav.menu{ width:100%; display:flex; gap:6px; flex-wrap:wrap; justify-content:center;
  padding:2px clamp(12px,3vw,22px) 11px; max-width:1120px; margin:0 auto; align-items:center; }
nav.menu a{ text-decoration:none; font:bold 13.5px var(--font); color:var(--navy);
  background:#fff; border-radius:14px; padding:7px 13px; box-shadow:0 2px 0 rgba(0,0,0,.10);
  display:flex; align-items:center; gap:6px; transition:transform .08s; }
nav.menu a .ni{ width:19px; height:19px; display:inline-grid; place-items:center; }
nav.menu a:hover{ transform:translateY(-2px); }
nav.menu .navsep{ width:1px; height:22px; background:rgba(30,42,68,.14); margin:0 3px; flex:none; }

/* color-coded groups so the bar reads as organized sections */
nav.menu a.g-world{  background:#E4F3F6; color:#1d6f7d; }
nav.menu a.g-agency{ background:#FCF1CF; color:#9A6A12; }
nav.menu a.g-play{   background:#E1F3E4; color:#3c7a48; }
nav.menu a.g-print{  background:#FBE3E8; color:#b14963; }
nav.menu a.g-connect{ background:#FCEFD6; color:#9a6a12; }
nav.menu a.active.g-connect{ background:#F2A03D; color:#fff; box-shadow:0 2px 0 rgba(0,0,0,.18); }
body.night nav.menu a.g-connect{ background:#473a22; color:#f3cf8a; }
body.night nav.menu a.active.g-connect{ background:#F2A03D; color:#3a2800; }
nav.menu a.g-world .ni svg, nav.menu a.g-agency .ni svg, nav.menu a.g-play .ni svg, nav.menu a.g-print .ni svg{ }
nav.menu a.active.g-world{  background:var(--teal);  color:#fff; box-shadow:0 2px 0 rgba(0,0,0,.18); }
nav.menu a.active.g-agency{ background:var(--gold);  color:#5a3d00; }
nav.menu a.active.g-play{   background:var(--green); color:#fff; }
nav.menu a.active.g-print{  background:var(--pink);  color:#fff; }

/* ---------- page shell ---------- */
main{ max-width:1080px; margin:0 auto; padding:clamp(16px,3vw,30px) clamp(14px,3vw,22px) 60px; }
h1.page{ color:var(--navy); font-size:clamp(26px,5vw,42px); margin:.2em 0 .1em; }
p.lead{ color:#3A5169; font-size:clamp(15px,2.4vw,19px); max-width:720px; margin:.2em 0 1.2em; }
h2.sec{ color:var(--navy); font-size:clamp(20px,3.4vw,28px); margin:1.4em 0 .5em; display:flex; align-items:center; gap:10px; }
h2.sec .si{ width:34px; height:34px; }

/* ---------- hero (home) ---------- */
.hero{ display:flex; align-items:flex-end; justify-content:center; gap:clamp(20px,7vw,80px);
  flex-wrap:wrap; margin:6px 0 4px; }
.who{ display:flex; flex-direction:column; align-items:center; }
.who .peng{ width:clamp(110px,20vw,170px); animation:bob 3s ease-in-out infinite; }
.who:nth-child(2) .peng{ animation-delay:.6s; }
@keyframes bob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-9px) } }
.nameTag{ margin-top:6px; text-align:center; background:rgba(255,255,255,.9); padding:6px 14px; border-radius:16px; box-shadow:0 3px 8px rgba(0,0,0,.08); }
.nameTag b{ display:block; color:var(--navy); font-size:17px; }
.nameTag span{ font-size:12px; color:#5A6B78; }

/* ---------- navigation cards (home) ---------- */
.hub{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:clamp(10px,2vw,18px); margin-top:14px; }
.hubcard{ text-decoration:none; color:var(--ink); border-radius:24px; padding:18px 12px;
  display:flex; flex-direction:column; align-items:center; gap:9px; text-align:center;
  box-shadow:0 7px 0 rgba(0,0,0,.12),0 10px 20px rgba(0,0,0,.10); transition:transform .1s; font:bold clamp(15px,2.2vw,19px) var(--font); }
.hubcard:hover{ transform:translateY(-3px); }
.hubcard:active{ transform:translateY(3px); }
.hubcard .ic{ width:64px; height:64px; border-radius:50%; background:#fff; display:grid; place-items:center; }
.hubcard .ic svg{ width:66%; height:66%; }
.hubcard small{ font-weight:normal; font-size:12px; color:#52606b; }
.h1c{background:var(--card1)} .h2c{background:var(--card2)} .h3c{background:var(--card3)}
.h4c{background:var(--card4)} .h5c{background:var(--card5)} .h6c{background:var(--card6)}
.h7c{background:#BfE3EE} .h8c{background:#E7DBF6}

/* ---------- generic cards ---------- */
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:clamp(12px,2vw,18px); }
.card{ background:var(--paper); border-radius:22px; padding:18px 18px 20px;
  box-shadow:0 8px 20px rgba(0,0,0,.10); position:relative; }
.card .top{ display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.card .ic{ width:48px; height:48px; border-radius:14px; background:#F2F8FB; display:grid; place-items:center; flex:none; }
.card .ic svg{ width:74%; height:74%; }
.card h3{ margin:0; color:var(--navy); font-size:19px; }
.card p{ margin:.5em 0 0; line-height:1.5; color:#36434c; }
.card .meta{ font-size:13px; color:#6a7780; margin-top:6px; }
.pill{ display:inline-block; font:bold 12px var(--font); padding:4px 11px; border-radius:12px; margin-top:10px; }
.pill.open{ background:#FCE7B6; color:#9A6A12; }
.pill.solved{ background:#C7EDD0; color:#2E7D42; }

/* story chapters */
.chapter{ background:var(--paper); border-radius:22px; padding:20px 22px; box-shadow:0 8px 20px rgba(0,0,0,.10); margin-bottom:16px; }
.chapter .chead{ display:flex; align-items:center; gap:14px; }
.chapter .ic{ width:54px; height:54px; border-radius:50%; background:#F2F8FB; display:grid; place-items:center; flex:none; }
.chapter .ic svg{ width:74%; height:74%; }
.chapter .num{ font:bold 13px var(--font); color:var(--teal); letter-spacing:.5px; text-transform:uppercase; }
.chapter h3{ margin:2px 0 0; color:var(--navy); font-size:clamp(20px,3vw,26px); }
.chapter p{ line-height:1.65; color:#33414a; font-size:16px; margin:.9em 0 0; }

/* who / bases rows */
.who-row{ display:flex; align-items:center; gap:16px; background:var(--paper); border-radius:22px; padding:14px 18px; box-shadow:0 8px 20px rgba(0,0,0,.10); margin-bottom:12px; }
.who-row .peng{ width:78px; flex:none; }
.who-row .ic{ width:60px; height:60px; flex:none; border-radius:50%; background:#F2F8FB; display:grid; place-items:center; }
.who-row .ic svg{ width:72%; height:72%; }
.who-row h3{ margin:0; color:var(--navy); font-size:20px; }
.who-row .role{ font:bold 13px var(--font); color:var(--teal); }
.who-row p{ margin:.3em 0 0; line-height:1.5; color:#36434c; }

/* glossary */
.gloss{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; }
.gloss .g{ background:var(--paper); border-radius:18px; padding:14px; box-shadow:0 6px 16px rgba(0,0,0,.08); display:flex; gap:12px; align-items:flex-start; }
.gloss .ic{ width:42px; height:42px; flex:none; border-radius:12px; background:#F2F8FB; display:grid; place-items:center; }
.gloss .ic svg{ width:74%; height:74%; }
.gloss b{ color:var(--navy); }
.gloss span{ display:block; color:#48555e; font-size:14px; margin-top:3px; line-height:1.45; }

/* quests */
.questbox{ background:var(--paper); border-radius:26px; padding:24px; text-align:center; box-shadow:0 10px 24px rgba(0,0,0,.12); max-width:560px; margin:0 auto 26px; }
.questbox .qic{ width:96px; height:96px; margin:0 auto 10px; border-radius:50%; background:#F2F8FB; display:grid; place-items:center; }
.questbox .qic svg{ width:74%; height:74%; }
.questbox .qtext{ font:bold clamp(18px,3vw,24px)/1.35 var(--font); color:var(--navy); min-height:2.4em; display:flex; align-items:center; justify-content:center; }
.bigbtn{ border:none; border-radius:26px; padding:14px 30px; font:bold clamp(16px,2.6vw,21px) var(--font); color:#fff; background:var(--teal); cursor:pointer; box-shadow:0 6px 0 rgba(0,0,0,.16); transition:transform .08s; margin-top:8px; }
.bigbtn:active{ transform:translateY(4px); box-shadow:0 2px 0 rgba(0,0,0,.16); }
.qlist{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:10px; }
.qrow{ display:flex; gap:12px; align-items:center; background:var(--paper); border-radius:16px; padding:11px 14px; box-shadow:0 5px 14px rgba(0,0,0,.07); }
.qrow .ic{ width:40px; height:40px; flex:none; border-radius:11px; background:#F2F8FB; display:grid; place-items:center; }
.qrow .ic svg{ width:74%; height:74%; }
.qrow span{ color:#33414a; line-height:1.4; }

/* file links (printables) */
.files{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; }
.filerow{ display:flex; gap:12px; align-items:center; text-decoration:none; background:var(--paper); border-radius:16px; padding:13px 15px; box-shadow:0 6px 16px rgba(0,0,0,.08); color:var(--ink); }
.filerow .ic{ width:44px; height:44px; flex:none; border-radius:12px; background:#FCE7B6; display:grid; place-items:center; font:bold 13px var(--font); color:#9A6A12; }
.filerow b{ color:var(--navy); display:block; }
.filerow small{ color:#6a7780; }

.note{ background:#FFF7DD; border:2px dashed #E7C766; border-radius:18px; padding:14px 18px; color:#6b5618; margin:18px 0; line-height:1.55; }

footer.site{ text-align:center; color:#5A6B78; font-size:13px; padding:24px 12px 40px; }
.backlink{ display:inline-flex; align-items:center; gap:7px; text-decoration:none; font-weight:bold; color:var(--teal); margin-bottom:10px; }

/* ===================== NIGHT THEME ===================== */
body.night{ background:linear-gradient(#16203A 0%, #1E2A44 45%, #243650 75%, #1c3340 100%) fixed; color:#E7EDF7; }
body.night header.site{ background:rgba(26,35,58,.88); }
body.night .brand b{ color:#EAF0FA; }
body.night nav.menu a{ box-shadow:0 2px 0 rgba(0,0,0,.3); }
body.night nav.menu a.g-world{  background:#22414a; color:#9fe0ea; }
body.night nav.menu a.g-agency{ background:#46401f; color:#f3d98a; }
body.night nav.menu a.g-play{   background:#264a2e; color:#a6e0b0; }
body.night nav.menu a.g-print{  background:#4a2a33; color:#f2aebd; }
body.night nav.menu a.active.g-world{  background:var(--teal);  color:#fff; }
body.night nav.menu a.active.g-agency{ background:var(--gold);  color:#3a2800; }
body.night nav.menu a.active.g-play{   background:var(--green); color:#10301a; }
body.night nav.menu a.active.g-print{  background:var(--pink);  color:#fff; }
body.night nav.menu .navsep{ background:rgba(255,255,255,.18); }
body.night .langbtn, body.night .themebtn{ background:#28344f; color:#EAF0FA; box-shadow:0 2px 0 rgba(0,0,0,.3); }
body.night .searchform{ background:#28344f; box-shadow:0 2px 0 rgba(0,0,0,.3); }
body.night .searchform input{ color:#EAF0FA; }
body.night .searchform input::placeholder{ color:#9fb0cc; }
body.night h1.page, body.night h2.sec, body.night .brand span{ color:#EAF0FA; }
body.night p.lead{ color:#BBC8E0; }
body.night .card, body.night .chapter, body.night .who-row, body.night .gloss .g,
body.night .questbox, body.night .qrow, body.night .filerow, body.night .sheet{ background:#28344f; color:#E7EDF7; box-shadow:0 8px 20px rgba(0,0,0,.35); }
body.night .card h3, body.night .chapter h3, body.night .who-row h3, body.night .gloss b, body.night .sheet h3{ color:#EAF0FA; }
body.night .card p, body.night .chapter p, body.night .who-row p, body.night .gloss span, body.night .qrow span, body.night .card .meta, body.night .filerow small{ color:#C3D0E6; }
body.night .card .ic, body.night .chapter .ic, body.night .gloss .ic, body.night .who-row .ic, body.night .questbox .qic, body.night .qrow .ic{ background:#1e2a44; }
body.night .nameTag{ background:rgba(40,52,79,.92); }
body.night .nameTag b{ color:#EAF0FA; } body.night .nameTag span{ color:#AAB8D2; }
body.night .note{ background:#2a3550; border-color:#3E5C8A; color:#D8E2F2; }
body.night .hubcard small{ color:#3a4658; }
body.night .filerow b{ color:#EAF0FA; }
body.night footer.site{ color:#9fb0cc; }

/* ===================== PRINT-READY PAGES ===================== */
.sheet{ background:#fff; border:2px solid #d8e3ea; border-radius:14px; padding:26px 28px; max-width:760px; margin:0 auto 26px; box-shadow:0 8px 20px rgba(0,0,0,.08); }
.sheet h3{ color:var(--navy); margin:0 0 2px; font-size:24px; }
.sheet .tri{ color:var(--teal); font-weight:bold; font-size:14px; margin-bottom:14px; }
.sheet .line{ margin:14px 0; }
.sheet .line .lab{ font-weight:bold; color:var(--navy); font-size:15px; }
.sheet .line .lab .o{ color:#7a8a93; font-weight:normal; }
.sheet .blank{ border-bottom:2px dotted #9bb0bb; height:30px; margin-top:6px; }
.sheet .bigblank{ border:2px dotted #9bb0bb; border-radius:10px; height:130px; margin-top:6px; }
.sheet .feel{ display:flex; gap:18px; font-size:30px; margin-top:6px; }

@media print{
  header.site, footer.site, nav.menu, #langToggle, .backlink, .noprint{ display:none !important; }
  body{ background:#fff; }
  main{ padding:0; max-width:none; }
  .sheet{ box-shadow:none; border:1px solid #bbb; page-break-after:always; margin:0 0 10px; max-width:none; }
  h1.page, p.lead{ display:none; }
}