/* =====================================================================
   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;
  --fav:#2E8B9B;   /* favorite-color accent, set on the welcome screen (defaults to teal) */
  --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; }
.confetti-box{ position:fixed; inset:0; pointer-events:none; z-index:9999; overflow:hidden; }
.confetti-box i{ position:absolute; top:-16px; border-radius:2px; opacity:.95; animation:confFall ease-in forwards; }
@keyframes confFall{ to{ transform:translateY(106vh) rotate(720deg); opacity:.85; } }
.confetti-box .snowflake{ position:absolute; top:-20px; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.15); animation:snowDrift linear forwards; }
.confetti-box .sparkle{ position:absolute; top:-22px; animation:snowDrift linear forwards; }
@keyframes snowDrift{ to{ transform:translateY(110vh) translateX(24px) rotate(140deg); } }
.confetti-box .evrise{ position:absolute; bottom:-30px; animation:evRise linear forwards; }
@keyframes evRise{ to{ transform:translateY(-118vh) translateX(18px) rotate(-24deg); opacity:0; } }
.evbanner{ display:flex; align-items:center; gap:12px; max-width:600px; margin:10px auto 2px; padding:11px 16px; border-radius:16px; cursor:pointer; box-shadow:0 8px 20px rgba(0,0,0,.14); color:#fff; }
.evbanner .evb-emoji{ font-size:30px; line-height:1; flex:none; filter:drop-shadow(0 1px 2px rgba(0,0,0,.3)); }
.evbanner .evb-tx b{ display:block; font:800 15px var(--font); text-shadow:0 1px 3px rgba(0,0,0,.35); }
.evbanner .evb-tx span{ font:600 12.5px var(--font); opacity:.96; text-shadow:0 1px 2px rgba(0,0,0,.3); }
.evbanner:active{ transform:translateY(1px); }
/* a family character that bounces up to cheer on a win */
.fampop{ position:fixed; left:50%; bottom:14%; z-index:9999; pointer-events:none;
  transform:translate(-50%,46px) scale(.35); opacity:0; transform-origin:bottom center;
  transition:transform .36s cubic-bezier(.2,1.5,.4,1), opacity .3s; }
.fampop.show{ transform:translate(-50%,0) scale(1); opacity:1; }
/* Size by HEIGHT and cap to the viewport so the whole character — plus the springy
   entrance overshoot and the bob — always stays fully on screen, even on short/landscape
   phones. width:auto keeps the 140:178 aspect; max caps guard tiny/huge viewports. */
.fampop .peng{ height:clamp(126px,32vh,230px); width:auto; max-width:82vw; max-height:64vh;
  filter:drop-shadow(0 12px 20px rgba(0,0,0,.28)); animation:fambob 1s ease-in-out .36s infinite; }
@keyframes fambob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-12px) } }
/* shared "signed in as <name>" byline for personal shared pages (name is set in Settings ⚙️) */
.idbyrow{ text-align:center; margin:0 0 12px; }
.idby{ display:inline-flex; align-items:center; gap:7px; flex-wrap:wrap; justify-content:center; font:600 12.5px var(--font); color:#6a8092; }
body.night .idby{ color:#9fb4c8; }
.idby b{ color:var(--navy); } body.night .idby b{ color:#EAF0FA; }
.idby a{ color:var(--teal); text-decoration:none; font-weight:700; } .idby a:hover{ text-decoration:underline; }
.idby.warn{ color:#a06714; } body.night .idby.warn{ color:#e0b26a; }
.idby-set{ border:none; border-radius:999px; background:var(--teal); color:#fff; font:bold 12px var(--font); padding:4px 11px; cursor:pointer; }
.wave-sweep{ position:fixed; left:0; right:0; bottom:0; height:90px; z-index:9998; pointer-events:none;
  background:linear-gradient(180deg,rgba(46,139,155,0),#2E8B9B 60%,#6FB7D6); opacity:.7; animation:waveUp 2.2s ease forwards; }
@keyframes waveUp{ 0%{ transform:translateY(100%) } 35%{ transform:translateY(0) } 68%{ transform:translateY(0) } 100%{ transform:translateY(100%) } }
.egg-toast{ position:fixed; left:50%; bottom:54px; transform:translate(-50%,8px); background:var(--navy); color:#fff;
  padding:11px 18px; border-radius:14px; font:bold 15px var(--font); box-shadow:0 8px 20px rgba(0,0,0,.3); z-index:10000; opacity:0; transition:opacity .25s, transform .25s; pointer-events:none; }
.egg-toast.show{ opacity:1; transform:translate(-50%,0); }
.secret-door{ position:fixed; left:8px; bottom:8px; width:26px; height:34px; opacity:.28; border:none; background:transparent; cursor:pointer; z-index:50; padding:0; transition:opacity .2s; }
.secret-door:hover{ opacity:.65; }
/* ---- tap/hold the header penguin to make it dance ---- */
.mascot{ display:inline-flex; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.mascot .peng{ transform-origin:50% 92%; }
.mascot.dancing .peng{ animation:pengDance 1s ease; }
@keyframes pengDance{ 0%{transform:rotate(0) translateY(0)} 12%{transform:rotate(-13deg) translateY(-2px)} 28%{transform:rotate(11deg) translateY(-5px)} 44%{transform:rotate(-9deg) translateY(-2px)} 60%{transform:rotate(8deg) translateY(-5px)} 76%{transform:rotate(-5deg) translateY(-1px)} 100%{transform:rotate(0) translateY(0)} }
/* ---- a roaming friend who peeks in from a screen edge ---- */
.peeker{ position:fixed; width:72px; height:92px; border:none; background:transparent; padding:0; cursor:pointer; z-index:48; opacity:0; transition:opacity .4s ease, transform .5s cubic-bezier(.2,1.3,.4,1); }
.peeker svg{ width:100%; height:100%; filter:drop-shadow(0 4px 8px rgba(0,0,0,.18)); }
.peeker.pk-left{ left:-30px; top:50%; transform:translate(-12px,-50%); }
.peeker.pk-left.show{ opacity:1; transform:translate(0,-50%); }
.peeker.pk-right{ right:-30px; top:46%; transform:translate(12px,-50%) scaleX(-1); }
.peeker.pk-right.show{ opacity:1; transform:translate(0,-50%) scaleX(-1); }
.peeker.pk-tl{ left:-26px; top:88px; transform:translateX(-12px); }
.peeker.pk-tl.show{ opacity:1; transform:translateX(0); }
.peeker.found{ animation:peekPop .6s ease forwards; }
@keyframes peekPop{ 0%{transform:scale(1)} 40%{transform:scale(1.3)} 100%{transform:scale(.2);opacity:0} }
.ee-overlay{ position:fixed; inset:0; z-index:10001; background:rgba(15,24,48,.55); display:flex; align-items:center; justify-content:center; padding:20px; }
.ee-card{ position:relative; background:#fff; border-radius:20px; padding:22px 24px; max-width:380px; width:100%; box-shadow:0 18px 44px rgba(0,0,0,.35); }
body.night .ee-card{ background:#28344f; color:#EAF0FA; }
.ee-card h3{ margin:0 0 6px; color:var(--navy); font-size:20px; } body.night .ee-card h3{ color:#EAF0FA; }
.ee-card .ee-x{ position:absolute; top:10px; right:12px; border:none; background:transparent; font-size:18px; cursor:pointer; color:#8a98a2; }
.ee-row{ display:flex; align-items:center; gap:12px; padding:8px 0; border-bottom:1px dashed #d8e0e5; font-size:16px; }
body.night .ee-row{ border-color:#3E5C8A; }
.ee-row:last-child{ border-bottom:none; }
.ee-sym{ font-size:26px; width:34px; text-align:center; flex:none; }
.hero #penP, .hero #penG{ cursor:pointer; }
@keyframes hop{ 0%{ transform:translateY(0) } 30%{ transform:translateY(-16px) rotate(-4deg) } 60%{ transform:translateY(0) } 80%{ transform:translateY(-6px) } 100%{ transform:translateY(0) } }
@keyframes spin{ to{ transform:rotate(360deg); } }
.spin{ animation:spin .8s linear infinite; }
#langToggle{ display:flex; gap:5px; }
.navtoggle{ display:none; border:none; cursor:pointer; background:var(--teal); color:#fff;
  border-radius:13px; font-size:20px; line-height:1; padding:6px 12px; box-shadow:0 2px 0 rgba(0,0,0,.12); }

/* ---- phones: collapse the big menu behind the hamburger,
        but ALWAYS keep the day/night + language toggles visible ---- */
@media (max-width:760px){
  .navtoggle{ display:inline-block; }
  nav.menu{ display:none; }
  nav.menu.open{ display:flex; padding-top:6px; }
  nav.menu .navsep{ display:none; }
  nav.menu a{ font-size:14px; }
  .bar{ flex-wrap:nowrap; }                   /* keep everything on one top row */
  .brand{ min-width:0; }                      /* let the brand shrink, not the toggles */
  .brand span span{ display:none; }           /* hide tagline to keep the bar short */
  .brand b{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:34vw; }
  #langToggle, .themebtn, .navtoggle{ flex:none; }   /* never shrink or hide the controls */
  .themebtn span{ display:none; }             /* icon-only day/night toggle saves room */
  .themebtn{ padding:8px 10px; }
  .brand b{ display:none; }                    /* hide the wordmark on phones — the penguin icon is the home button, and each page shows its own title */
}
@media (max-width:560px){
  .searchform{ display:none; }                /* search hidden on small phones (still on tablet/desktop) */
  .brand .mini{ width:30px; height:38px; }
  .brand b{ max-width:24vw; }
  .bar{ gap:7px; }
  .langbtn{ padding:6px 8px; }
}
.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-postoffice{ background:#E3EDF9; color:#2B5C93; }
nav.menu a.active.g-postoffice{ background:#3E78B2; color:#fff; box-shadow:0 2px 0 rgba(0,0,0,.18); }
body.night nav.menu a.g-postoffice{ background:#233246; color:#a9cdf0; }
body.night nav.menu a.active.g-postoffice{ background:#3E78B2; color:#eaf3ff; }
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; }

/* ---- grouped accordion menu (narrow screens / phone / installed app) ---- */
nav.menu.accordion{ position:fixed; top:0; right:0; bottom:0; left:auto; width:min(330px,86vw); max-width:none; margin:0;
  flex-direction:column; justify-content:flex-start; align-items:stretch; flex-wrap:nowrap; gap:7px; padding:14px 14px 28px;
  overflow-y:auto; -webkit-overflow-scrolling:touch; z-index:1200; background:var(--paper,#fff); box-shadow:-10px 0 30px rgba(0,0,0,.22); }
body.night nav.menu.accordion{ background:#1a233a; }
.navbackdrop{ position:fixed; inset:0; z-index:1190; background:rgba(15,24,48,.42); cursor:pointer; }
.navclose{ align-self:flex-end; border:none; background:transparent; cursor:pointer; font-size:20px; line-height:1; color:var(--navy); padding:2px 6px 4px; }
body.night .navclose{ color:#EAF0FA; }
nav.menu.accordion .navsep{ display:none; }
nav.menu.accordion .navgrp{ width:100%; }
nav.menu.accordion .navgrphead{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:#fff; border:none; border-left:6px solid var(--teal); border-radius:13px; padding:13px 15px;
  cursor:pointer; font:bold 15.5px var(--font); color:var(--navy); box-shadow:0 2px 0 rgba(0,0,0,.08); }
nav.menu.accordion .navgrphead.g-world{   border-left-color:var(--teal); }
nav.menu.accordion .navgrphead.g-connect{ border-left-color:var(--orange); }
nav.menu.accordion .navgrphead.g-agency{  border-left-color:var(--gold); }
nav.menu.accordion .navgrphead.g-play{    border-left-color:var(--green); }
nav.menu.accordion .navgrphead.g-print{   border-left-color:var(--pink); }
nav.menu.accordion .navgrphead.g-postoffice{ border-left-color:#3E78B2; }
nav.menu.accordion .navgrphead .gchev{ color:var(--teal); font-size:14px; transition:transform .15s; }
nav.menu.accordion .navgrp.open .navgrphead .gchev{ transform:rotate(90deg); }
nav.menu.accordion .navgrpitems{ flex-direction:column; gap:5px; padding:7px 0 4px 10px; }
nav.menu.accordion a{ width:100%; box-shadow:none; padding:10px 13px; font-size:14.5px; }
body.night nav.menu.accordion .navgrphead{ background:#28344f; color:#EAF0FA; box-shadow:0 2px 0 rgba(0,0,0,.3); }
nav.menu.accordion .navsearch{ display:flex; width:100%; background:#fff; border-radius:13px; box-shadow:0 2px 0 rgba(0,0,0,.08); padding:4px 6px 4px 12px; margin-bottom:4px; }
nav.menu.accordion .navsearch input{ flex:1; border:none; outline:none; background:transparent; font:15px var(--font); color:var(--ink); padding:8px 0; }
nav.menu.accordion .navsearch button{ border:none; background:transparent; cursor:pointer; font-size:18px; padding:0 6px; }
body.night nav.menu.accordion .navsearch{ background:#28344f; }
body.night nav.menu.accordion .navsearch input{ color:#EAF0FA; }

/* ---------- 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; }
/* phones: reclaim vertical space so interactive content sits higher (less scrolling) */
@media (max-width:600px){
  main{ padding-top:10px; padding-bottom:42px; }
  h1.page{ font-size:clamp(21px,5.6vw,27px); margin:.1em 0 .05em; }
  p.lead{ font-size:14px; line-height:1.4; margin:.15em 0 .75em; }
}
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(--fav); 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; }

/* ===================== PWA install hint ===================== */
.pwahint{ position:fixed; left:12px; right:12px; bottom:12px; z-index:80; margin:0 auto; max-width:560px;
  background:#fff; border:3px solid var(--teal); border-radius:18px; box-shadow:0 12px 30px rgba(0,0,0,.22);
  display:flex; align-items:center; gap:12px; padding:12px 14px;
  transform:translateY(160%); transition:transform .3s cubic-bezier(.2,1.2,.5,1); }
.pwahint.show{ transform:translateY(0); }
.pwahint .pi{ width:34px; height:34px; flex:none; }
.pwahint .pt{ flex:1; font:bold 14px/1.3 var(--font); color:var(--navy); }
.pwahint .px{ flex:none; border:none; background:#EAF3F7; color:#52606b; border-radius:11px;
  font:bold 13px var(--font); padding:8px 12px; cursor:pointer; }
body.night .pwahint{ background:#28344f; }
body.night .pwahint .pt{ color:#EAF0FA; }
body.night .pwahint .px{ background:#1e2a44; color:#9fb0cc; }

/* "you've got mail" pill (Penguin Post) */
.mailpill{ position:fixed; left:14px; bottom:14px; z-index:79; display:inline-flex; align-items:center; gap:8px;
  background:var(--pink); color:#fff; text-decoration:none; border-radius:22px; padding:11px 16px;
  font:bold 14px var(--font); box-shadow:0 10px 24px rgba(0,0,0,.22);
  transform:translateY(180%); transition:transform .35s cubic-bezier(.2,1.2,.5,1); }
.mailpill.show{ transform:translateY(0); animation:mailwob 2.4s ease-in-out 1s infinite; }
.mailpill .mp-i{ font-size:18px; line-height:1; }
@keyframes mailwob{ 0%,100%{ transform:translateY(0) rotate(0); } 50%{ transform:translateY(-3px) rotate(-3deg); } }
@media (max-width:520px){ .mailpill{ left:10px; bottom:10px; padding:10px 14px; font-size:13px; } }

/* rainbow arc (rainbows & hearts effect) */
.rainbow-arc{ position:fixed; top:64px; left:50%; transform:translateX(-50%) translateY(-14px) scale(.96);
  z-index:60; pointer-events:none; opacity:0; transition:opacity .5s ease, transform .6s cubic-bezier(.2,1.2,.5,1);
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.12)); }
.rainbow-arc.show{ opacity:1; transform:translateX(-50%) translateY(0) scale(1); }
/* a cheerful tappable rainbow-heart button (Headquarters) */
.rainbow-btn{ border:none; background:#fff; border-radius:18px; box-shadow:0 6px 16px rgba(0,0,0,.12);
  font-size:26px; line-height:1; padding:9px 16px; cursor:pointer; transition:transform .12s; }
.rainbow-btn:active{ transform:scale(.92); }
body.night .rainbow-btn{ background:#28344f; }

/* ---------- first-run welcome / set-up ---------- */
.wel-ov{ position:fixed; inset:0; z-index:120; background:rgba(20,28,46,.55); display:flex; align-items:center; justify-content:center; padding:16px; opacity:0; transition:opacity .25s; }
.wel-ov.show{ opacity:1; }
.wel-card{ background:#fff; border-radius:24px; box-shadow:0 18px 50px rgba(0,0,0,.3); max-width:440px; width:100%; padding:22px 22px 20px; text-align:center; max-height:92vh; overflow:auto; }
body.night .wel-card{ background:#28344f; color:#EAF0FA; }
.wel-card h2{ margin:.1em 0 .2em; color:var(--navy); font-size:clamp(22px,5vw,28px); } body.night .wel-card h2{ color:#EAF0FA; }
.wel-card .wel-sub{ color:var(--teal); font-weight:bold; margin:0 0 14px; }
.wel-lbl{ display:block; text-align:left; font:bold 12px var(--font); color:var(--teal); text-transform:uppercase; letter-spacing:.5px; margin:14px 0 6px; }
.wel-card input.wel-name{ width:100%; font:16px var(--font); padding:11px 13px; border:2px solid #cfe0e8; border-radius:14px; background:#fff; color:var(--ink); }
body.night .wel-card input.wel-name{ background:#1e2a44; color:#EAF0FA; border-color:#3E5C8A; }
.wel-who{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.wel-who button{ flex:1 1 30%; border:2px solid #cfe0e8; background:#fff; color:var(--navy); border-radius:14px; padding:10px 8px; font:bold 14px var(--font); cursor:pointer; }
body.night .wel-who button{ background:#1e2a44; color:#EAF0FA; border-color:#3E5C8A; }
.wel-who button.on{ border-color:var(--fav); background:#eef7f9; } body.night .wel-who button.on{ background:#3a4f72; }
.wel-colors{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.wel-colors button{ width:40px; height:40px; border-radius:50%; border:4px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,.2); cursor:pointer; }
.wel-colors button.on{ outline:3px solid var(--navy); outline-offset:2px; } body.night .wel-colors button.on{ outline-color:#EAF0FA; }
.wel-go{ margin-top:20px; }
.setup-btn{ border:none; background:#fff; border-radius:14px; box-shadow:0 4px 12px rgba(0,0,0,.12); font-size:18px; line-height:1; padding:8px 12px; cursor:pointer; }
body.night .setup-btn{ background:#28344f; }

/* ===================== BADGES ===================== */
.badgepop{ position:fixed; left:50%; bottom:26px; transform:translate(-50%,140%); z-index:70;
  background:#fff; border-radius:18px; box-shadow:0 12px 30px rgba(0,0,0,.25);
  display:flex; align-items:center; gap:12px; padding:12px 18px; max-width:90vw;
  border:3px solid var(--gold); transition:transform .3s cubic-bezier(.2,1.3,.5,1); }
.badgepop.show{ transform:translate(-50%,0); }
.badgepop .bp-ic{ width:42px; height:42px; flex:none; }
.badgepop b{ color:var(--navy); }
body.night .badgepop{ background:#28344f; color:#EAF0FA; }
body.night .badgepop b{ color:#EAF0FA; }

.rankbar{ background:var(--paper); border-radius:22px; box-shadow:0 8px 20px rgba(0,0,0,.1); padding:18px 22px; max-width:620px; margin:0 auto 22px; text-align:center; }
body.night .rankbar{ background:#28344f; }
.rankbar .big{ font:bold clamp(22px,5vw,34px) var(--font); color:var(--teal); }
.rankbar .track{ height:18px; border-radius:10px; background:#e7eef2; overflow:hidden; margin:12px 0 6px; }
body.night .rankbar .track{ background:#1e2a44; }
.rankbar .fill{ height:100%; background:linear-gradient(90deg,var(--gold),var(--green)); border-radius:10px; transition:width .5s ease; }
.rankbar .master{ font:bold clamp(16px,3vw,20px) var(--font); color:var(--pink); margin-top:8px; }
.badgegrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px; }
.badge{ background:var(--paper); border-radius:20px; box-shadow:0 6px 16px rgba(0,0,0,.09); padding:16px 12px; text-align:center; }
body.night .badge{ background:#28344f; }
.badge .disc{ width:74px; height:74px; margin:0 auto 8px; border-radius:50%; display:grid; place-items:center; background:#FCEFC9; box-shadow:inset 0 0 0 4px var(--gold); }
.badge .disc svg{ width:60%; height:60%; }
.badge.locked .disc{ background:#eef2f4; box-shadow:inset 0 0 0 4px #cdd6dc; filter:grayscale(1); opacity:.6; }
body.night .badge.locked .disc{ background:#1e2a44; }
.badge .bn{ font:bold 15px var(--font); color:var(--navy); } body.night .badge .bn{ color:#EAF0FA; }
.badge .bh{ font-size:12px; color:#6a7780; margin-top:3px; line-height:1.3; }
.badge.locked .bn{ color:#9aa7b2; }

/* ===================== 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 .questbox .qtext{ color:#EAF0FA; }   /* quest text hard-codes --navy (stays dark) — force light in night */
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; }

/* print-only "Made on …" caption for keepsakes (hidden on screen) */
.madestamp{ display:none; }

@media print{
  header.site, footer.site, nav.menu, #langToggle, .backlink, .noprint{ display:none !important; }
  html, body{ background:#fff; min-height:0; height:auto; margin:0; }
  main{ padding:0; max-width:none; margin:0; }
  .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; }
  .madestamp{ display:block !important; text-align:center; font:13px/1.4 var(--font); color:#555; margin:10px auto 0; }
}

/* ===================== dashboard kit — shared by debug.html + reset.html =====================
   Scoped under .dashkit so generic names (.panel/.row/.btn/.chip/.field) never collide site-wide. */
.dashkit{ max-width:1120px; margin:0 auto; }
.dashkit .wcol{ display:flex; flex-direction:column; gap:14px; }
.dashkit .topbar{ display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; justify-content:space-between; margin:2px 0 12px; }
.dashkit .topbar h1{ font:800 20px var(--font); color:var(--navy); margin:0; } body.night .dashkit .topbar h1{ color:#EAF0FA; }
.dashkit .chips{ display:flex; flex-wrap:wrap; gap:7px; }
.dashkit .chip, .dashkit #status{ display:inline-flex; align-items:center; gap:6px; font:700 12px ui-monospace,Menlo,Consolas,monospace;
  padding:5px 11px; border-radius:999px; background:#eef3f8; color:#39506a; border:1px solid #dde7f0; }
body.night .dashkit .chip, body.night .dashkit #status{ background:#243350; color:#cfe0f2; border-color:#33456a; }
.dashkit .chip.ok{ background:#e6f7ee; color:#137a44; border-color:#bfe8d1; }
.dashkit .chip.bad{ background:#fdeceb; color:#c0392b; border-color:#f4c9c4; }
.dashkit .chip.warn{ background:#fdf3e2; color:#a06714; border-color:#f0dcae; }
body.night .dashkit .chip.ok{ background:#12331f; color:#78e0a4; border-color:#245a38; }
body.night .dashkit .chip.bad{ background:#3a1f1c; color:#f19a90; border-color:#63332c; }
body.night .dashkit .chip.warn{ background:#332711; color:#e6b968; border-color:#5a481f; }
.dashkit .dot{ display:inline-block; width:9px; height:9px; border-radius:50%; flex:none; }
.dashkit .dot.on{ background:#2c9f6b; } .dashkit .dot.off{ background:#d0626e; }
.dashkit .dot.A{ background:#2E8B9B; } .dashkit .dot.B{ background:#E8657A; } .dashkit .dot.open{ background:#c7d3de; }
.dashkit .masonry{ column-width:290px; column-gap:14px; margin:0 0 14px; }
.dashkit .masonry > .panel{ break-inside:avoid; -webkit-column-break-inside:avoid; page-break-inside:avoid; margin:0 0 14px; display:block; }
.dashkit .panel{ background:#fff; border:1px solid #e2e9f1; border-radius:14px; overflow:hidden; box-shadow:0 3px 12px rgba(30,60,90,.05); }
body.night .dashkit .panel{ background:#1c2740; border-color:#31425f; }
.dashkit .panel.danger{ border:2px solid #e8657a; }
.dashkit .phead{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px 13px; background:#eef4fa;
  border-bottom:1px solid #e2e9f1; font:800 13px var(--font); color:#37506a; }
body.night .dashkit .phead{ background:#233150; color:#cfe0f2; border-color:#31425f; }
.dashkit .panel.danger .phead{ background:#fdeceb; color:#b23a2e; border-color:#f4c9c4; }
body.night .dashkit .panel.danger .phead{ background:#3a1f1c; color:#f19a90; border-color:#63332c; }
.dashkit .phead .tools{ display:flex; gap:6px; }
.dashkit .pbody{ padding:11px 13px; }
.dashkit .pdesc{ margin:0 0 12px; color:#5c7488; font:600 13px var(--font); line-height:1.5; } body.night .dashkit .pdesc{ color:#a8bccf; }
.dashkit .row{ display:flex; justify-content:space-between; gap:12px; padding:5px 0; border-bottom:1px dashed #eef2f6; font:600 12.5px var(--font); }
body.night .dashkit .row{ border-color:#2b3a56; } .dashkit .row:last-child{ border-bottom:none; }
.dashkit .rk{ color:#6a8095; } body.night .dashkit .rk{ color:#93aac2; }
.dashkit .rv{ color:var(--navy); text-align:right; word-break:break-word; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12px; }
body.night .dashkit .rv{ color:#EAF0FA; }
.dashkit .rv.ok{ color:#159a55; } .dashkit .rv.bad{ color:#c0392b; } .dashkit .rv.warn{ color:#b07414; }
.dashkit .gcards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px; }
.dashkit .gcard{ border:1px solid #e2e9f1; border-radius:11px; padding:9px 11px; background:#f8fbfe; }
body.night .dashkit .gcard{ background:#172033; border-color:#31425f; }
.dashkit .gcard .gt{ font:800 12.5px var(--font); color:var(--navy); display:flex; justify-content:space-between; align-items:center; gap:6px; }
body.night .dashkit .gcard .gt{ color:#EAF0FA; }
.dashkit .gcard .gk{ font:600 9.5px ui-monospace,monospace; color:#9fb1c4; }
.dashkit .pill{ display:inline-block; font:800 10.5px var(--font); padding:2px 8px; border-radius:999px; color:#fff; }
.dashkit .pill.A{ background:#2E8B9B; } .dashkit .pill.B{ background:#E8657A; } .dashkit .pill.win{ background:#e0842a; } .dashkit .pill.mut{ background:#93a6b8; }
.dashkit .seatline{ display:flex; align-items:center; gap:6px; font:600 11px ui-monospace,monospace; color:#5c7488; margin-top:5px; }
body.night .dashkit .seatline{ color:#9fb4c8; }
.dashkit .gbtns{ display:flex; gap:6px; margin-top:8px; }
.dashkit .hbar{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.dashkit .hbar .hbl{ font:800 11.5px var(--font); min-width:70px; color:var(--navy); } body.night .dashkit .hbar .hbl{ color:#EAF0FA; }
.dashkit .hbar .hbt{ flex:1; height:12px; border-radius:7px; background:#eef2f6; overflow:hidden; } body.night .dashkit .hbar .hbt{ background:#26344e; }
.dashkit .hbar .hbf{ height:100%; background:linear-gradient(90deg,#4fc0d0,#2E8B9B); }
.dashkit .hbar.orange .hbf{ background:linear-gradient(90deg,#f0a93a,#e0842a); } .dashkit .hbar.orange .hbn{ color:#e0842a; }
.dashkit .hbar .hbn{ font:800 11px ui-monospace,monospace; color:#2E8B9B; min-width:24px; text-align:right; }
.dashkit .btn{ border:none; border-radius:10px; padding:8px 14px; font:bold 13px var(--font); cursor:pointer; background:#eaf1f7; color:#37506a; margin:0 6px 6px 0; }
body.night .dashkit .btn{ background:#28395c; color:#cfe0f2; }
.dashkit .btn.go{ background:var(--teal); color:#fff; } .dashkit .btn.warn{ background:#f6e3c2; color:#8a5a12; } .dashkit .btn.dang{ background:#f5ccc6; color:#8a241c; }
.dashkit .btn.del{ background:#e8657a; color:#fff; } .dashkit .btn.ghost{ background:#8aa0ab; color:#fff; } .dashkit .btn.big{ background:var(--pink); color:#fff; font-size:14px; padding:11px 20px; }
.dashkit .btn.sm{ padding:5px 9px; font-size:11px; margin:0; }
.dashkit .field{ font:600 12.5px var(--font); padding:8px 11px; border:1px solid #cdd7e0; border-radius:10px; background:#fff; color:var(--navy); }
body.night .dashkit .field{ background:#0f1728; color:#EAF0FA; border-color:#31425f; }
.dashkit .field.wide{ width:100%; box-sizing:border-box; margin-bottom:10px; }
.dashkit pre.json{ background:#0c1322; color:#cfe8da; font:12px/1.55 ui-monospace,Menlo,Consolas,monospace; padding:11px 13px; border-radius:10px; overflow:auto; max-height:340px; margin:8px 0 0; white-space:pre-wrap; word-break:break-word; }
.dashkit pre.json .jk{ color:#7fd0ff; } .dashkit pre.json .js{ color:#f0a878; } .dashkit pre.json .jb{ color:#66b3ff; } .dashkit pre.json .jn{ color:#d08bd6; } .dashkit pre.json .num{ color:#a6e3a1; }
.dashkit .hint{ font-size:11px; color:#8a98a2; margin-top:7px; }
.dashkit .note{ text-align:center; font-size:12px; color:#8a98a2; margin:0 0 12px; }
.dashkit .dz{ text-align:center; font:800 12px var(--font); color:#c0626e; text-transform:uppercase; letter-spacing:.6px; margin:2px 0 0; }
.dashkit .msg{ text-align:center; font:bold 14px var(--font); color:var(--pink); min-height:20px; margin-top:8px; }
.dashkit .warn{ text-align:center; font-size:12px; color:#8a98a2; margin:2px 0 0; }
/* Even panel row for the compact admin pages: equal columns that reflow and collapse
   to one on phones. Avoids the ragged blank space CSS multi-columns can leave behind. */
.dashkit .gridrow{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(244px,1fr)); margin:0 0 14px; align-items:start; }
/* Danger variant of the dotted-bubble note — same bubble as debug's caption, red = warning. */
.dashkit .note.dz{ background:#fdeceb; border-color:#e8657a; color:#b23a2e; font-weight:800; text-transform:uppercase; letter-spacing:.5px; }
body.night .dashkit .note.dz{ background:#3a1f1c; border-color:#a24638; color:#f0a89f; }