/* ══════════════════════════════════════════════════════════════════════
   CRITTERLAB vnext
   Phone first. The player is a kid on a handset following a link, so the
   small layout is the real one and the desktop layout is the variant.
   Tokens keep v1's names so the artwork and the chrome stay one thing.
════════════════════════════════════════════════════════════════════════ */
:root{
  --ground:#0d1219; --panel:#151c25; --panel-2:#1b232e; --panel-3:#222c39;
  --line:#2a3542; --line-soft:#202935;
  --text:#e9eff5; --muted:#8496a8; --dim:#5e7083;
  --accent:#eda546; --accent-soft:rgba(237,165,70,.14); --accent-ink:#2a1a06;
  --signal:#57cfd8; --signal-soft:rgba(87,207,216,.14); --danger:#e0705e;
  --good:#6fc08a; --pers:#9d8ce0;
  --t0:#7d8fa1; --t1:#6fb06a; --t2:#5b9dd6; --t3:#b47fe0; --t4:#f0925e; --t5:#ff5fa8;
  --pen:#0b0f14;
  --shadow:0 1px 0 rgba(255,255,255,.03), 0 10px 28px rgba(0,0,0,.4);
  --shadow-sm:0 1px 0 rgba(255,255,255,.03), 0 2px 8px rgba(0,0,0,.28);
  --safe-b: env(safe-area-inset-bottom, 0px);
  color-scheme:dark;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --ground:#e9ecf0; --panel:#fff; --panel-2:#f3f6f8; --panel-3:#e7ecf1;
    --line:#d3dae1; --line-soft:#e5eaef;
    --text:#131b24; --muted:#586878; --dim:#8497a7;
    --accent:#b06810; --accent-soft:rgba(176,104,16,.12); --accent-ink:#fff6e8;
    --signal:#137d87; --signal-soft:rgba(19,125,135,.12); --danger:#c2492f;
    --good:#2f7d4f; --pers:#5c48a8;
    --t0:#74849a; --t1:#3a8542; --t2:#2c6aa8; --t3:#7845ab; --t4:#bd4d1c; --t5:#c9186f;
    --pen:#eef1f4;
    --shadow:0 1px 2px rgba(16,28,40,.06), 0 10px 24px rgba(16,28,40,.09);
    --shadow-sm:0 1px 2px rgba(16,28,40,.05), 0 2px 6px rgba(16,28,40,.06);
    color-scheme:light;
  }
}
:root[data-theme="light"]{
  --ground:#e9ecf0; --panel:#fff; --panel-2:#f3f6f8; --panel-3:#e7ecf1;
  --line:#d3dae1; --line-soft:#e5eaef;
  --text:#131b24; --muted:#586878; --dim:#8497a7;
  --accent:#b06810; --accent-soft:rgba(176,104,16,.12); --accent-ink:#fff6e8;
  --signal:#137d87; --signal-soft:rgba(19,125,135,.12); --danger:#c2492f;
  --good:#2f7d4f; --pers:#5c48a8;
  --t0:#74849a; --t1:#3a8542; --t2:#2c6aa8; --t3:#7845ab; --t4:#bd4d1c; --t5:#c9186f;
  --pen:#eef1f4;
  --shadow:0 1px 2px rgba(16,28,40,.06), 0 10px 24px rgba(16,28,40,.09);
  --shadow-sm:0 1px 2px rgba(16,28,40,.05), 0 2px 6px rgba(16,28,40,.06);
  color-scheme:light;
}

*{box-sizing:border-box}
/* .scrim and .sheet set display, which outranks the UA [hidden] rule */
[hidden]{display:none!important}
html,body{margin:0;padding:0}
body{background:var(--ground);color:var(--text);
  font-family:"IBM Plex Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;-webkit-tap-highlight-color:transparent}
h1,h2,h3{font-family:"Bricolage Grotesque","IBM Plex Sans",system-ui,sans-serif;
  font-weight:800;margin:0;letter-spacing:-.015em;text-wrap:balance}
p{margin:0}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.mono{font-family:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums}
.eyebrow{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ══ shell ═════════════════════════════════════════════════════════════ */
.app{max-width:1280px;margin:0 auto;padding:8px 10px calc(74px + var(--safe-b));
  display:flex;flex-direction:column;gap:10px;min-height:100vh}

.bar{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);
  border-radius:13px;padding:9px 11px;box-shadow:var(--shadow-sm);position:sticky;top:6px;z-index:30}
.brand{display:flex;align-items:center;gap:9px;min-width:0}
.mark{width:32px;height:32px;flex:none;border-radius:9px;background:var(--panel-3);
  border:1px solid var(--line);display:grid;place-items:center}
.brand .nm{min-width:0}
.brand h1{font-size:15px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand .code{font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim);white-space:nowrap;
  background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:left;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;display:block}
.brand .code:hover{color:var(--accent)}
.brand .code.out{color:var(--warn,var(--dim))}
.purse{display:flex;gap:2px;margin-left:auto;align-items:center}
.ro{padding:2px 8px;display:flex;flex-direction:column;gap:0;border-left:1px solid var(--line-soft);min-width:0}
.ro:first-child{border-left:none}
.ro-k{font-family:"IBM Plex Mono",monospace;font-size:8.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim)}
.ro-v{font-family:"IBM Plex Mono",monospace;font-size:14px;font-weight:600;line-height:1.2;
  font-variant-numeric:tabular-nums}
.ro-v.coin{color:var(--accent)}
.ro-v.rep{color:var(--signal)}
.ro-v.warn{color:var(--danger)}
.iconbtn{width:36px;height:36px;flex:none;border-radius:10px;border:1px solid var(--line);
  background:var(--panel-2);display:grid;place-items:center;color:var(--muted)}
.iconbtn:hover{color:var(--text);border-color:var(--dim)}
.iconbtn.on{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}
/* Four buttons in the bar is a squeeze on a 390px phone, and the thing
   that gets crushed is the lab name — which carries the code, which is
   the way back to her other labs. So the chrome gives up its padding
   before the name gives up its letters. */
@media (max-width:430px){
  .bar{gap:6px;padding:9px 8px}
  .iconbtn{width:32px;height:32px;border-radius:9px}
  .purse .ro{padding:2px 6px}
}

/* ══ tab bar — bottom on phone, top rail on desktop ═════════════════════ */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;
  grid-template-columns:repeat(7,1fr);gap:0;background:var(--panel);
  border-top:1px solid var(--line);padding:4px 4px calc(4px + var(--safe-b));
  box-shadow:0 -6px 20px rgba(0,0,0,.25)}
.tab{display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 2px 5px;
  border-radius:10px;color:var(--dim);font-family:"IBM Plex Mono",monospace;font-size:9.5px;
  letter-spacing:.06em;text-transform:uppercase;position:relative}
.tab svg{width:19px;height:19px}
.tab[aria-selected="true"]{color:var(--accent);background:var(--accent-soft)}
.tab .dot{position:absolute;top:5px;right:calc(50% - 17px);width:7px;height:7px;border-radius:50%;
  background:var(--danger);border:1.5px solid var(--panel)}
.tab .dot.good{background:var(--signal)}
/* seven tabs on a 390 px phone: 55 px each, so the labels lose a little air
   (six until the Shops tab arrived on 2026-09-20) */
@media (max-width:430px){ .tab{font-size:8.2px;letter-spacing:0;padding:7px 0 5px} .tab svg{width:17px;height:17px} }

/* ══ panels ════════════════════════════════════════════════════════════ */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:13px;box-shadow:var(--shadow-sm)}
.panel-hd{display:flex;align-items:center;gap:8px;padding:10px 12px;
  border-bottom:1px solid var(--line-soft);flex-wrap:wrap}
.panel-hd h2{font-size:14.5px}
.panel-hd .spacer{margin-left:auto}
.cap{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--muted)}
.cap.full{color:var(--danger)}
.body{padding:12px}
.stack{display:flex;flex-direction:column;gap:10px}

.mini{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:7px;
  padding:5px 9px;background:var(--panel-2)}
.mini:hover{color:var(--text);border-color:var(--dim)}
.mini.arm{color:var(--danger);border-color:var(--danger)}
.mini.on{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}
.btn{border-radius:11px;padding:12px 16px;font-weight:600;font-size:15px;display:flex;
  align-items:center;justify-content:center;gap:8px;background:var(--accent);color:var(--accent-ink);
  min-height:46px;width:100%}
.btn:hover:not(:disabled){filter:brightness(1.07)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn .cost{font-family:"IBM Plex Mono",monospace;font-size:12px;opacity:.72}
.btn.ghost{background:var(--panel-2);color:var(--text);border:1px solid var(--line)}
.btn.ghost:hover:not(:disabled){background:var(--panel-3);filter:none}
.btn.go{background:var(--signal);color:var(--pen)}
.btn.sm{min-height:38px;padding:8px 12px;font-size:13.5px;border-radius:9px;width:auto}
.row-btns{display:flex;gap:8px}
.row-btns .btn{flex:1}

.note{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--dim);line-height:1.5;text-align:center}
.note.warn{color:var(--danger)}
.note.ok{color:var(--signal)}
.lead{color:var(--muted);font-size:13.5px;line-height:1.5}

/* ══ the habitat ═══════════════════════════════════════════════════════ */
.habitat{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:9px;padding:11px}
@media (max-width:400px){ .habitat{grid-template-columns:repeat(2,1fr);gap:8px;padding:9px} }

.crit{background:var(--panel-2);border:1px solid var(--line);border-radius:11px;overflow:hidden;
  display:flex;flex-direction:column;position:relative;text-align:left;padding:0;
  transform-style:preserve-3d;
  transform:perspective(700px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease;
  animation:cardin .34s var(--in,0ms) both cubic-bezier(.2,.9,.3,1.1)}
.crit:hover{border-color:var(--dim)}
.crit.picked{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent), 0 6px 18px rgba(0,0,0,.28)}
.crit.picked::after{content:attr(data-slot);position:absolute;top:6px;left:6px;z-index:3;
  font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.1em;background:var(--accent);
  color:var(--accent-ink);padding:1px 6px;border-radius:4px;font-weight:600}
.crit.is-rare{border-color:color-mix(in srgb, var(--t3) 40%, var(--line))}
.crit.is-exotic{border-color:color-mix(in srgb, var(--t4) 48%, var(--line))}
.crit.is-anom{border-color:color-mix(in srgb, var(--t5) 55%, var(--line));
  box-shadow:0 0 0 1px color-mix(in srgb, var(--t5) 30%, transparent), 0 4px 16px rgba(0,0,0,.3)}
@keyframes cardin{from{opacity:0;transform:translateY(9px) scale(.97)}to{opacity:1;transform:none}}

.port{width:100%;aspect-ratio:1/.94;background:var(--pen);border-bottom:1px solid var(--line-soft);
  position:relative;overflow:hidden;display:block;padding:0}
.crit.is-anom .port{background:radial-gradient(circle at 50% 64%, color-mix(in srgb, var(--t5) 15%, var(--pen)), var(--pen))}
.crit.is-exotic .port{background:radial-gradient(circle at 50% 64%, color-mix(in srgb, var(--t4) 11%, var(--pen)), var(--pen))}
.port .sheen{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(220px circle at var(--gx,50%) var(--gy,50%), rgba(255,255,255,.13), transparent 62%);
  transition:opacity .18s}
.crit:hover .sheen{opacity:1}

.idle{position:absolute;inset:0;transform-origin:50% 90%;will-change:transform;
  animation-duration:var(--per,3s);animation-delay:var(--del,0s);
  animation-iteration-count:infinite;animation-timing-function:ease-in-out}
.idle svg{width:100%;height:100%;display:block}

/* ── the repertoire ──────────────────────────────────────────────────── */
.idle--bob{animation-name:i-bob}
.idle--float{animation-name:i-float}
.idle--flap{animation-name:i-flap}
.idle--hop{animation-name:i-hop;animation-timing-function:cubic-bezier(.3,.1,.3,1)}
.idle--sway{animation-name:i-sway}
.idle--bounce{animation-name:i-bounce}
.idle--shiver{animation-name:i-shiver;animation-timing-function:linear}
.idle--doze{animation-name:i-doze}
.idle--peer{animation-name:i-peer}
.idle--strut{animation-name:i-strut}
.idle--wobble{animation-name:i-wobble}

@keyframes i-bob{
  0%,100%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(calc(var(--amp) * -.5)) rotate(var(--tilt))} }
@keyframes i-float{
  0%,100%{transform:translateY(calc(var(--amp) * .4)) rotate(calc(var(--tilt) * -.5))}
  50%{transform:translateY(calc(var(--amp) * -.9)) rotate(var(--tilt))} }
@keyframes i-flap{
  0%,100%{transform:translateY(0) scaleX(1)}
  35%{transform:translateY(calc(var(--amp) * -1)) scaleX(1.05)}
  60%{transform:translateY(calc(var(--amp) * -.3)) scaleX(.97)} }
@keyframes i-hop{
  0%,62%,100%{transform:translateY(0) scaleY(1) scaleX(1)}
  68%{transform:translateY(0) scaleY(.9) scaleX(1.08)}
  80%{transform:translateY(calc(var(--amp) * -1.6)) scaleY(1.07) scaleX(.95)}
  92%{transform:translateY(0) scaleY(.95) scaleX(1.04)} }
@keyframes i-sway{
  0%,100%{transform:translateX(calc(var(--amp) * -.5 * var(--flip))) rotate(calc(var(--tilt) * -1))}
  50%{transform:translateX(calc(var(--amp) * .5 * var(--flip))) rotate(var(--tilt))} }
@keyframes i-bounce{
  0%,100%{transform:translateY(0) scaleY(1)}
  45%{transform:translateY(calc(var(--amp) * -.8)) scaleY(1.05)}
  70%{transform:translateY(0) scaleY(.93) scaleX(1.05)} }
@keyframes i-shiver{
  0%,100%{transform:translate(0,0) rotate(0)}
  20%{transform:translate(calc(var(--amp) * .3), 0) rotate(var(--skew))}
  40%{transform:translate(calc(var(--amp) * -.3), 0) rotate(calc(var(--skew) * -1))}
  60%{transform:translate(calc(var(--amp) * .2), calc(var(--amp) * -.15)) rotate(0)}
  80%{transform:translate(calc(var(--amp) * -.2), 0) rotate(var(--skew))} }
@keyframes i-doze{
  0%,100%{transform:translateY(0) scale(1) rotate(0)}
  40%{transform:translateY(calc(var(--amp) * .35)) scale(1.015,.985) rotate(calc(var(--tilt) * .4))}
  70%{transform:translateY(calc(var(--amp) * -.2)) scale(.99,1.01) rotate(0)} }
@keyframes i-peer{
  0%,100%{transform:rotate(0) translateX(0)}
  25%{transform:rotate(calc(var(--tilt) * 1.6)) translateX(calc(var(--amp) * .3))}
  55%{transform:rotate(calc(var(--tilt) * -1.4)) translateX(calc(var(--amp) * -.3))}
  78%{transform:rotate(0) translateY(calc(var(--amp) * -.25))} }
@keyframes i-strut{
  0%,100%{transform:translateY(0) rotate(0) scale(1)}
  35%{transform:translateY(calc(var(--amp) * -.6)) rotate(calc(var(--tilt) * .6)) scale(1.02)}
  70%{transform:translateY(calc(var(--amp) * -.2)) rotate(calc(var(--tilt) * -.6)) scale(1)} }
@keyframes i-wobble{
  0%,100%{transform:rotate(calc(var(--tilt) * -1)) scaleX(1)}
  30%{transform:rotate(var(--tilt)) scaleX(1.03)}
  60%{transform:rotate(calc(var(--tilt) * -.5)) scaleX(.98)} }

/* ── reactions to being poked ── */
.react-squish{animation:r-squish .5s cubic-bezier(.3,1.4,.4,1) !important}
.react-spin{animation:r-spin .62s ease-in-out !important}
.react-jump{animation:r-jump .58s cubic-bezier(.25,.9,.3,1.3) !important}
.react-shake{animation:r-shake .48s linear !important}
.react-grow{animation:r-grow .5s cubic-bezier(.3,1.5,.4,1) !important}
@keyframes r-squish{0%{transform:scale(1)}35%{transform:scale(1.16,.82)}70%{transform:scale(.94,1.08)}100%{transform:scale(1)}}
@keyframes r-spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
@keyframes r-jump{0%{transform:translateY(0)}30%{transform:translateY(-22%) scaleY(1.08)}60%{transform:translateY(0) scaleY(.93)}100%{transform:translateY(0)}}
@keyframes r-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7%) rotate(-4deg)}40%{transform:translateX(7%) rotate(4deg)}60%{transform:translateX(-4%) rotate(-2deg)}80%{transform:translateX(4%)}}
@keyframes r-grow{0%{transform:scale(1)}40%{transform:scale(1.22)}100%{transform:scale(1)}}

/* ── motes ── */
.motes{position:absolute;inset:0;pointer-events:none}
.motes i{position:absolute;width:var(--msize,3px);height:var(--msize,3px);border-radius:50%;
  background:var(--t3);box-shadow:0 0 6px currentColor;color:var(--t3);opacity:0;
  animation:mote var(--mper,3s) var(--mdel,0s) infinite ease-in-out}
.is-exotic .motes i{background:var(--t4);color:var(--t4)}
.motes--anom i{background:var(--t5);color:var(--t5)}
@keyframes mote{
  0%,100%{opacity:0;transform:translateY(4px) scale(.6)}
  40%{opacity:.95;transform:translateY(-5px) scale(1)}
  70%{opacity:.35;transform:translateY(-11px) scale(.85)} }

.fav{position:absolute;top:5px;right:5px;z-index:3;width:26px;height:26px;border-radius:8px;
  background:rgba(10,14,20,.55);display:grid;place-items:center;color:#8ea0b2;font-size:13px;line-height:1}
.fav.on{color:#ff5fa8;background:rgba(255,95,168,.18)}
.crit-nm{padding:7px 9px 0;display:flex;align-items:baseline;gap:6px}
.crit-nm b{font-family:"Bricolage Grotesque",sans-serif;font-weight:600;font-size:13.5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.crit-nm .gen{font-family:"IBM Plex Mono",monospace;font-size:9px;color:var(--dim);margin-left:auto;flex:none}
.chips{display:flex;flex-wrap:wrap;gap:3px;padding:5px 9px 8px}
.chip{font-family:"IBM Plex Mono",monospace;font-size:9.5px;padding:1px 5px;border-radius:4px;
  background:var(--panel-3);color:var(--muted);white-space:nowrap}
.chip.t1{color:var(--t1);background:color-mix(in srgb, var(--t1) 13%, transparent)}
.chip.t2{color:var(--t2);background:color-mix(in srgb, var(--t2) 15%, transparent)}
.chip.t3{color:var(--t3);background:color-mix(in srgb, var(--t3) 16%, transparent)}
.chip.t4{color:var(--t4);background:color-mix(in srgb, var(--t4) 17%, transparent);font-weight:600}
.chip.t5{color:var(--t5);background:color-mix(in srgb, var(--t5) 18%, transparent);font-weight:600;
  box-shadow:0 0 0 1px color-mix(in srgb, var(--t5) 40%, transparent)}
.chip.pc{color:var(--pers);background:color-mix(in srgb, var(--pers) 15%, transparent)}
.chip.ib{color:var(--danger);background:color-mix(in srgb, var(--danger) 14%, transparent)}
.crit-ax{display:flex;border-top:1px solid var(--line-soft);margin-top:auto}
.crit-ax button{flex:1;padding:9px 4px;font-family:"IBM Plex Mono",monospace;font-size:10px;
  letter-spacing:.05em;text-transform:uppercase;color:var(--muted);border-right:1px solid var(--line-soft)}
.crit-ax button:last-child{border-right:none}
.crit-ax button:hover:not(:disabled){background:var(--panel-3);color:var(--text)}
.crit-ax button:disabled{opacity:.35}
.crit-ax button.arm{color:var(--accent);background:var(--accent-soft)}
.dim{color:var(--dim);font-size:.92em}
.empty{grid-column:1/-1;padding:30px 14px;text-align:center;color:var(--dim)}
.empty p{max-width:34ch;margin:0 auto}

/* ══ bench ═════════════════════════════════════════════════════════════ */
.slots{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;padding:12px 12px 0}
.slot{aspect-ratio:1/1;border-radius:11px;border:1px dashed var(--line);background:var(--pen);
  display:grid;place-items:center;position:relative;overflow:hidden}
.slot.on{border-style:solid;border-color:var(--accent)}
.slot .ph{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--dim);text-align:center;padding:8px}
.slot .clr{position:absolute;top:4px;right:4px;width:24px;height:24px;border-radius:7px;
  background:var(--panel-2);border:1px solid var(--line);display:grid;place-items:center;
  color:var(--muted);font-size:13px;z-index:4}
.slot-nm{position:absolute;left:0;right:0;bottom:0;padding:4px 7px;font-size:11px;font-weight:500;
  background:linear-gradient(to top,rgba(0,0,0,.66),transparent);color:#fff;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;z-index:3}
.cross{font-family:"Bricolage Grotesque",sans-serif;font-size:17px;color:var(--dim)}
.mutag{display:flex;align-items:center;gap:8px;padding:9px 11px;border-radius:9px;
  background:var(--signal-soft);border:1px solid color-mix(in srgb, var(--signal) 32%, transparent);
  font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--signal)}
.mutag label{cursor:pointer;display:flex;align-items:center;gap:8px;flex:1}
.mutag input{accent-color:var(--signal);width:18px;height:18px;margin:0}
.rel{padding:8px 11px;border-radius:9px;font-family:"IBM Plex Mono",monospace;font-size:11px;
  background:var(--panel-2);border:1px solid var(--line-soft);color:var(--muted);text-align:center}
.rel.warn{color:var(--danger);border-color:color-mix(in srgb, var(--danger) 40%, transparent);
  background:color-mix(in srgb, var(--danger) 10%, transparent)}

/* forecast */
.fc{display:flex;flex-direction:column;gap:6px;max-height:280px;overflow-y:auto;padding:2px}
.fc-row{display:flex;align-items:center;gap:8px}
.fc-row .g{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--dim);width:72px;flex:none}
.fc-bar{flex:1;display:flex;height:16px;border-radius:5px;overflow:hidden;background:var(--panel-3)}
.fc-bar span{display:block;height:100%;position:relative}
.fc-bar span[data-t="0"]{background:var(--t0)} .fc-bar span[data-t="1"]{background:var(--t1)}
.fc-bar span[data-t="2"]{background:var(--t2)} .fc-bar span[data-t="3"]{background:var(--t3)}
.fc-bar span[data-t="4"]{background:var(--t4)} .fc-bar span[data-t="5"]{background:var(--t5)}
.fc-leg{font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40%}

/* ══ contracts ═════════════════════════════════════════════════════════ */
.job{border:1px solid var(--line);border-radius:11px;background:var(--panel-2);overflow:hidden}
.job.taken{border-color:color-mix(in srgb, var(--signal) 40%, var(--line))}
.job.ready{border-color:var(--good);box-shadow:0 0 0 1px color-mix(in srgb, var(--good) 35%, transparent)}
.job-hd{display:flex;align-items:baseline;gap:8px;padding:10px 11px 6px}
.job-hd b{font-family:"Bricolage Grotesque",sans-serif;font-size:14px;font-weight:600}
.job-hd .pay{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-weight:600;color:var(--accent);flex:none}
.job .who{padding:0 11px;font-size:12px;color:var(--dim);font-style:italic}
.job ul{margin:8px 0 0;padding:0 11px 0 28px;display:flex;flex-direction:column;gap:3px}
.job li{font-size:12.5px;color:var(--muted);line-height:1.45}
.job li.ok{color:var(--good)}
.job li.ok::marker{content:"✓  "}
.job-ft{display:flex;align-items:center;gap:8px;padding:9px 11px;margin-top:9px;
  border-top:1px solid var(--line-soft);flex-wrap:wrap}
.due{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--muted)}
.due.soon{color:var(--danger)}
.repchip{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--signal)}

/* ══ field ═════════════════════════════════════════════════════════════ */
.biome{display:flex;gap:10px;align-items:center;padding:11px;border:1px solid var(--line);
  border-radius:11px;background:var(--panel-2);width:100%;text-align:left}
.biome[disabled]{opacity:.45}
.biome .swatch{width:44px;height:44px;border-radius:10px;flex:none;border:1px solid var(--line)}
.biome .t{flex:1;min-width:0}
.biome b{font-family:"Bricolage Grotesque",sans-serif;font-size:14px;display:block}
.biome p{font-size:12px;color:var(--muted);line-height:1.4;margin-top:2px}
.biome .go{flex:none;font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--accent)}
.stage{position:fixed;inset:0;z-index:80;background:#000;display:block}
.stage canvas{display:block;width:100%;height:100%;touch-action:none}

/* ══ archive / maker / shop ════════════════════════════════════════════ */
.arch{display:flex;flex-direction:column;gap:12px;max-height:64vh;overflow-y:auto;padding:12px}
.arch-g h3{font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:500;letter-spacing:.11em;
  text-transform:uppercase;color:var(--dim);margin-bottom:6px;display:flex;gap:7px;align-items:baseline}
.arch-g h3 .cnt{margin-left:auto;color:var(--line)}
.arch-r{display:flex;flex-wrap:wrap;gap:4px}
.av{font-family:"IBM Plex Mono",monospace;font-size:10.5px;padding:3px 8px;border-radius:5px;
  border:1px solid var(--line-soft);background:var(--panel-2);color:var(--muted)}
.av.locked{color:var(--line);background:transparent;border-style:dashed}
.av.lab{border:0;background:none;color:var(--dim);padding-left:0;text-transform:uppercase;
  letter-spacing:.08em;font-size:9.5px;align-self:center}
.av.got.t1{color:var(--t1);background:color-mix(in srgb,var(--t1) 13%,transparent);border-color:transparent}
.av.got.t2{color:var(--t2);background:color-mix(in srgb,var(--t2) 15%,transparent);border-color:transparent}
.av.got.t3{color:var(--t3);background:color-mix(in srgb,var(--t3) 16%,transparent);border-color:transparent}
.av.got.t4{color:var(--t4);background:color-mix(in srgb,var(--t4) 17%,transparent);border-color:transparent;font-weight:600}
.av.got.t5{color:var(--t5);background:color-mix(in srgb,var(--t5) 18%,transparent);border-color:transparent;font-weight:600}
.av.got.pc{color:var(--pers);background:color-mix(in srgb,var(--pers) 15%,transparent);border-color:transparent}

.item{display:flex;gap:11px;align-items:center;padding:11px;border:1px solid var(--line);
  border-radius:11px;background:var(--panel-2)}
.item .txt{flex:1;min-width:0}
.item b{font-family:"Bricolage Grotesque",sans-serif;font-weight:600;font-size:13.5px;display:block}
.item p{font-size:12px;color:var(--muted);line-height:1.42;margin-top:2px}
.item .buy{flex:none;font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:600;
  padding:9px 12px;border-radius:8px;border:1px solid var(--accent);color:var(--accent);min-height:40px}
.item .buy:hover:not(:disabled){background:var(--accent);color:var(--accent-ink)}
.item .buy:disabled{opacity:.32}
.item .buy.owned{border-color:var(--line);color:var(--dim)}
.sec{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--dim);margin-top:6px}

/* ══ modals ════════════════════════════════════════════════════════════ */
.scrim{position:fixed;inset:0;background:rgba(5,8,12,.74);-webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);display:flex;align-items:flex-end;justify-content:center;
  padding:0;z-index:90;animation:fade .18s ease}
@media (min-width:620px){ .scrim{align-items:center;padding:18px} }
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet{background:var(--panel);border:1px solid var(--line);border-radius:16px 16px 0 0;
  box-shadow:var(--shadow);width:100%;max-width:470px;max-height:90vh;overflow:auto;
  padding-bottom:var(--safe-b);animation:up .22s cubic-bezier(.2,.9,.3,1)}
@media (min-width:620px){ .sheet{border-radius:16px} }
@keyframes up{from{transform:translateY(18px);opacity:.6}to{transform:none;opacity:1}}
.sheet-hd{display:flex;align-items:center;gap:9px;padding:12px 14px;border-bottom:1px solid var(--line-soft);
  position:sticky;top:0;background:var(--panel);z-index:2}
.sheet-hd h2{font-size:16px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sheet-hd .spacer{margin-left:auto}
.x{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);display:grid;
  place-items:center;color:var(--muted);flex:none}
.big-port{background:var(--pen);border-bottom:1px solid var(--line-soft);position:relative;
  aspect-ratio:1/.8;overflow:hidden}

/* ── the close-up 3D viewer ────────────────────────────────────────────
   Same box as the flat portrait, so nothing under it moves when you swap.
   The stage is a plain hole for world/viewer.js to put its canvas in; the
   portrait only steps aside, because turning 3D off has to be instant.
──────────────────────────────────────────────────────────────────────── */
.port3d{position:absolute;right:8px;bottom:8px;z-index:2;
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;padding:6px 11px;border-radius:8px;
  border:1px solid var(--line);background:var(--panel-2);color:var(--muted);
  box-shadow:var(--shadow-sm)}
.port3d:hover{color:var(--text)}
.port3d.on{border-color:var(--signal);background:var(--signal-soft);color:var(--signal)}
.port3d-stage{position:absolute;inset:0;z-index:1;overflow:hidden}
.big-port.is3d{min-height:260px}
.big-port.is3d .idlewrap,.big-port.is3d .motes{visibility:hidden}
@media (min-width:620px){ .big-port.is3d{min-height:330px} }
.egg-stage.is3d>.popping{visibility:hidden}
.rows{padding:6px 14px 14px}
.row{display:flex;align-items:baseline;gap:10px;padding:6px 0;border-bottom:1px solid var(--line-soft)}
.row:last-child{border-bottom:none}
.row .k{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim);width:78px;flex:none}
.row .v{font-size:13.5px;font-weight:500;min-width:0}
.row .v.rare{color:var(--t5)}
.row .gt{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--muted);
  background:var(--panel-2);padding:1px 7px;border-radius:5px;border:1px solid var(--line-soft);flex:none}
.row .gt.hid{color:var(--line);letter-spacing:.14em}
.persbox{margin:12px 14px 0;padding:10px 11px;border-radius:10px;
  background:color-mix(in srgb,var(--pers) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--pers) 34%,transparent)}
.persbox b{font-family:"Bricolage Grotesque",sans-serif;font-weight:600;font-size:13.5px;color:var(--pers)}
.persbox p{font-size:12.5px;color:var(--muted);line-height:1.45;margin-top:2px}
.anombox{margin:12px 14px 0;padding:11px;border-radius:10px;
  background:color-mix(in srgb,var(--t5) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--t5) 40%,transparent)}
.anombox b{color:var(--t5);font-family:"Bricolage Grotesque",sans-serif;font-size:13.5px}
.anombox p{font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.45}
.anombox .found{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--t5);opacity:.85;margin-top:3px}
.namerow{display:flex;gap:7px;margin-top:9px}
.namerow input{flex:1;min-width:0;font-size:16px;padding:9px 11px;border-radius:9px;
  border:1px solid var(--line);background:var(--panel-2);color:var(--text)}
.namerow input:focus{outline:none;border-color:var(--t5)}
.lineage{padding:11px 14px;border-top:1px solid var(--line-soft);
  font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--dim);line-height:1.65}
.rename{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:16px;
  background:var(--panel-2);border:1px solid var(--line);border-radius:8px;color:var(--text);
  padding:5px 9px;max-width:190px;min-width:0}
.rename:focus{outline:none;border-color:var(--accent);background:var(--panel-3)}

/* hatch theatre */
.hatchbox{background:var(--panel);border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--shadow);width:min(390px,100%);padding:20px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:11px;margin:auto}
.egg-stage{width:min(190px,54vw);height:min(190px,54vw);display:grid;place-items:center;position:relative}
.egg-stage>div{width:100%;height:100%}
@keyframes wobble{0%,100%{transform:rotate(0) translateY(0)}15%{transform:rotate(-7deg) translateY(-3px)}
  30%{transform:rotate(6deg) translateY(0)}45%{transform:rotate(-5deg) translateY(-2px)}
  60%{transform:rotate(4deg) translateY(0)}75%{transform:rotate(-2deg) translateY(-1px)}}
@keyframes pop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.08);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes flash{0%{opacity:0}40%{opacity:1}100%{opacity:0}}
.wobbling{animation:wobble .62s ease-in-out infinite}
.popping{animation:pop .42s cubic-bezier(.2,1.5,.4,1) both}
.burst{position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,var(--signal) 0%,transparent 62%);animation:flash .5s ease-out both}
.burst.rare{background:radial-gradient(circle,var(--t5) 0%,transparent 66%)}
.badges{display:flex;flex-wrap:wrap;gap:5px;justify-content:center}
.badge{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;padding:3px 9px;border-radius:5px;font-weight:600}
.badge.new{background:var(--signal);color:var(--pen)}
.badge.mut{background:var(--accent);color:var(--accent-ink)}
.badge.anom{background:var(--t5);color:#fff}
/* a chaos cross is louder than a mutation and has to look it, so it is the
   only badge with two colours in it */
.badge.chaos{background:linear-gradient(100deg,var(--t5),var(--t3) 55%,var(--signal));color:#fff}
.badge.pc{background:var(--pers);color:#fff}

/* ══ account ═══════════════════════════════════════════════════════════ */
.field{display:flex;flex-direction:column;gap:5px}
.field label{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--dim)}
.field input{font-size:16px;padding:11px 12px;border-radius:10px;border:1px solid var(--line);
  background:var(--panel-2);color:var(--text);width:100%}
.field input:focus{outline:none;border-color:var(--accent)}
.labrow{display:flex;align-items:center;gap:9px;padding:10px 11px;border:1px solid var(--line);
  border-radius:11px;background:var(--panel-2)}
.labrow.cur{border-color:var(--accent)}
.labrow .t{flex:1;min-width:0}
.labrow .code{font-family:"IBM Plex Mono",monospace;font-size:12.5px;font-weight:600;letter-spacing:.04em}
.labrow .meta{font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--dim);margin-top:1px}
/* a named trait on the wall, drawn from the seed and genotype it travels with */
.labrow.trait{border-color:color-mix(in srgb,var(--t5) 32%,var(--line))}
.labrow.trait .code{color:var(--t5)}
.labrow .tport{width:46px;height:46px;flex:none;border-radius:9px;background:var(--pen);
  border:1px solid var(--line-soft);overflow:hidden;display:grid;place-items:center}
.labrow .tport svg{width:100%;height:100%;display:block}
.stake{border:1px solid color-mix(in srgb,var(--warn,#d8a13a) 52%,var(--line));
  background:color-mix(in srgb,var(--warn,#d8a13a) 9%,transparent);
  border-radius:11px;padding:12px;display:flex;flex-direction:column;gap:9px}
.stake p{font-size:13px;line-height:1.5}
.stake .note{margin:0}
.codecard{border:1px solid color-mix(in srgb,var(--accent) 42%,var(--line));background:var(--accent-soft);
  border-radius:11px;padding:13px;text-align:center;display:flex;flex-direction:column;gap:8px}
.codecard .big{font-family:"IBM Plex Mono",monospace;font-size:21px;font-weight:600;
  letter-spacing:.08em;color:var(--accent);word-break:break-all;line-height:1.2}
.codecard .sub{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--muted);line-height:1.5}
textarea.xfer{width:100%;height:82px;resize:vertical;font-family:"IBM Plex Mono",monospace;
  font-size:11px;line-height:1.45;padding:9px;border-radius:9px;border:1px solid var(--line);
  background:var(--pen);color:var(--muted);word-break:break-all}
textarea.xfer:focus{outline:none;border-color:var(--accent);color:var(--text)}

/* ══ log + toasts ══════════════════════════════════════════════════════ */
.log{display:flex;flex-direction:column;gap:3px;padding:0 12px 11px}
.log-i{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--dim);display:flex;gap:7px;line-height:1.5}
.log-i span:first-child{color:var(--line);flex:none}
.log-i.hi{color:var(--signal)}
.log-i.warn{color:var(--danger)}
.log-i.wow{color:var(--t5);font-weight:600}
/* the music panel, hung under the note button by main.js */
.mpop{position:fixed;z-index:96;width:min(280px,calc(100vw - 16px));background:var(--panel);
  border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:12px 13px;
  animation:fade .15s ease}
.mpop-hd{display:flex;align-items:center;gap:8px;font-size:13.5px;margin-bottom:9px;min-width:0}
.mpop-hd b{font-family:"Bricolage Grotesque",sans-serif;font-weight:600;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.mpop-note{color:var(--accent);flex:none}
.mpop-row{display:flex;gap:6px;margin-bottom:10px}
.mpop-row .mini:disabled{opacity:.4}
.mpop-vol{display:flex;align-items:center;gap:8px;font-family:"IBM Plex Mono",monospace;font-size:10px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.mpop-vol input{flex:1;min-width:0;height:28px;accent-color:var(--accent);margin:0}
.mpop-vol[hidden]{display:none}
.toasts{position:fixed;left:0;right:0;bottom:calc(78px + var(--safe-b));z-index:95;
  display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none;padding:0 12px}
.toast{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:9px 13px;
  box-shadow:var(--shadow);font-size:13px;max-width:420px;animation:toastin .22s ease both}
.toast.good{border-color:var(--good);color:var(--good)}
.toast.bad{border-color:var(--danger);color:var(--danger)}
.toast.wow{border-color:var(--t5);color:var(--t5);font-weight:600}
@keyframes toastin{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}

/* ══ desktop ═══════════════════════════════════════════════════════════ */
@media (min-width:900px){
  .app{padding-bottom:20px;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(340px,.95fr);
    grid-template-areas:"bar bar" "nav nav" "main side";gap:12px;
    /* align-items only positions items inside their row; without align-content
       the leftover space from min-height:100vh is shared out BETWEEN the rows,
       which pushes the nav and the panels far apart on a tall window */
    align-items:start;align-content:start}
  .bar{grid-area:bar}
  .col-main{grid-area:main;display:flex;flex-direction:column;gap:12px}
  .col-side{grid-area:side;display:flex;flex-direction:column;gap:12px;position:sticky;top:64px}
  .tabs{position:static;grid-area:nav;display:flex;flex-wrap:wrap;border:1px solid var(--line);
    border-radius:13px;box-shadow:var(--shadow-sm);padding:5px;margin-bottom:-4px}
  .tab{flex:1;min-width:76px;flex-direction:row;gap:6px;justify-content:center;padding:9px 6px}
  .tab .dot{top:4px;right:6px}
  .toasts{bottom:20px}
}
@media (max-width:899px){
  .col-side.hide-sm{display:none}
}

/* ══ motion off ════════════════════════════════════════════════════════ */
.no-motion .idle,.no-motion .motes i,.no-motion .crit,.no-motion .sheet,
.no-motion .toast,.no-motion .wobbling,.no-motion .popping,.no-motion .burst{
  animation:none!important;transition:none!important}
.no-motion .crit{transform:none!important}
.no-motion .burst{display:none}
@media (prefers-reduced-motion: reduce){
  .idle,.motes i{animation:none!important}
  .crit{animation:none!important;transform:none!important}
}

/* ══ the chromosome browser ════════════════════════════════════════════
   Two painted bars per chromosome, one copy from each parent, coloured by
   the founder each stretch traces back to. Bars are percentage-positioned
   so a 130 cM chromosome and an 80 cM one both read at a glance.
════════════════════════════════════════════════════════════════════════ */
.chroms{padding:4px 14px 10px;display:flex;flex-direction:column;gap:13px}
.chrom{display:flex;flex-direction:column;gap:3px}
.ch-hd{display:flex;align-items:baseline;gap:7px;font-size:12px;color:var(--muted)}
.ch-hd b{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--accent);
  min-width:26px;letter-spacing:.06em}
.ch-hd .mono{margin-left:auto;font-size:10px;color:var(--dim)}
.ch-bar{position:relative;height:13px;border-radius:4px;background:var(--panel-3);
  overflow:hidden;border:1px solid var(--line-soft)}
.ch-seg{position:absolute;top:0;bottom:0;display:block;border-right:1px solid rgba(0,0,0,.35)}
.ch-seg:last-child{border-right:none}
.ch-cmp{height:9px;background:transparent;border-color:transparent}
.ch-run{position:absolute;top:2px;bottom:2px;border-radius:3px}
.ch-run.k1{background:color-mix(in srgb,var(--signal) 55%,transparent)}
.ch-run.k2{background:var(--t5)}
.ch-ticks{position:relative;height:15px;margin-top:1px}
.ch-tick{position:absolute;top:0;transform:translateX(-50%);display:flex;
  flex-direction:column;align-items:center}
.ch-tick i{width:1px;height:4px;background:var(--dim);display:block}
.ch-tick label{font-family:"IBM Plex Mono",monospace;font-size:7.5px;letter-spacing:.02em;
  color:var(--dim);white-space:nowrap;transform:scale(.95)}
@media (max-width:430px){ .ch-tick label{display:none} .ch-ticks{height:6px} }

.cmpbox{margin:6px 14px 0;padding:12px;border-radius:11px;background:var(--signal-soft);
  border:1px solid color-mix(in srgb,var(--signal) 34%,transparent)}
.cmpbox b{font-family:"Bricolage Grotesque",sans-serif;font-size:13.5px}
.cmp-nums{display:flex;flex-direction:column;gap:1px;margin-top:5px}
.cmp-nums .big{font-size:24px;font-weight:600;color:var(--signal);line-height:1.1}
.cmp-nums .mono{font-size:10.5px;color:var(--muted)}
.cmpbox .verdict{font-family:"Bricolage Grotesque",sans-serif;font-weight:600;font-size:15px;
  margin-top:7px;color:var(--text)}
.cmpbox .key{font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--dim);margin-top:6px;
  display:flex;align-items:center;gap:5px}
.cmpbox .sw{width:14px;height:8px;border-radius:2px;display:inline-block}
.cmpbox .sw.k1{background:color-mix(in srgb,var(--signal) 55%,transparent)}
.cmpbox .sw.k2{background:var(--t5)}

.anc-row{display:flex;align-items:center;gap:8px;padding:5px 0;
  border-bottom:1px solid var(--line-soft);font-size:13px}
.anc-row:last-child{border-bottom:none}
.anc-row .dot{width:11px;height:11px;border-radius:3px;flex:none}
.anc-row .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.anc-row .mono{font-size:11px;flex:none}
.anc-row .dimmed{color:var(--dim);width:34px;text-align:right}
select.gsel{width:100%;font-size:16px;padding:10px 11px;border-radius:10px;
  border:1px solid var(--line);background:var(--panel-2);color:var(--text);margin-top:6px}
select.gsel:focus{outline:none;border-color:var(--accent)}

/* ══ the escort ════════════════════════════════════════════════════════
   The animal you take into the field is the one you run around as, so it
   gets a proper portrait rather than a line in a dropdown.
════════════════════════════════════════════════════════════════════════ */
.escort{display:flex;gap:11px;padding:12px;align-items:flex-start}
.esc-port{width:92px;height:92px;flex:none;border-radius:11px;background:var(--pen);
  border:1px solid var(--line);position:relative;overflow:hidden}
.esc-txt{flex:1;min-width:0}
.esc-txt b{font-family:"Bricolage Grotesque",sans-serif;font-weight:600;font-size:15px;display:block}
.esc-txt p{font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.4}
.esc-pick{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}

/* the kit row on the Field tab — buying where the need is, not in a menu */
.kit{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:2px 0 4px}
.kit-k{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--dim);margin-right:2px}
.biome .go small{display:block;font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--dim);font-weight:400;margin-top:1px}

/* the maker's live preview is redrawn on every change, so it needs its own
   positioned layer rather than the cached portrait the pen uses */
.mk-prev{position:relative}
.mkart{position:absolute;inset:0}
.mkart svg{width:100%;height:100%;display:block}

/* ══ the maker ═════════════════════════════════════════════════════════
   These were missing entirely — the markup shipped without them, so the
   preview had no size and the rows had no shape. 16px on the selects is
   deliberate: anything smaller and iOS zooms the page when one is tapped.
════════════════════════════════════════════════════════════════════════ */
.mk-stage{display:flex;gap:12px;align-items:center}
.mk-prev{width:118px;height:118px;flex:none;border-radius:11px;background:var(--pen);
  border:1px solid var(--line);overflow:hidden;position:relative}
.mk-side{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}
.mk-price{font-family:"IBM Plex Mono",monospace;font-size:23px;font-weight:600;
  color:var(--accent);line-height:1.05;font-variant-numeric:tabular-nums}
.mk-price small{display:block;font-size:9px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--dim);font-weight:400;margin-top:3px}
.mk-tools{display:flex;gap:6px;flex-wrap:wrap}
.mk-rows{display:flex;flex-direction:column;gap:6px;max-height:46vh;overflow-y:auto;
  padding:10px;border:1px solid var(--line-soft);border-radius:10px;background:var(--panel-2)}
.mk-row{display:flex;align-items:center;gap:8px}
.mk-row .k{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--dim);width:76px;flex:none}
.mk-row select{flex:1;min-width:0;font-size:16px;padding:7px 9px;border-radius:8px;
  border:1px solid var(--line);background:var(--panel-3);color:var(--text)}
.mk-row select:focus{outline:none;border-color:var(--accent)}
.mk-row select:disabled{opacity:.5}
.mk-row .c{font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--dim);
  width:42px;text-align:right;flex:none;font-variant-numeric:tabular-nums}
.mk-row .c.paid{color:var(--accent)}

/* the field brief — what the trip actually asks of you */
.brief{padding:10px 11px;border-radius:10px;background:var(--signal-soft);
  border:1px solid color-mix(in srgb,var(--signal) 30%,transparent)}
.brief b{font-family:"Bricolage Grotesque",sans-serif;font-weight:600;font-size:13.5px;color:var(--signal)}
.brief p{font-size:12.5px;color:var(--muted);line-height:1.45;margin-top:3px}

/* the game each place is running today, named before she pays for the trip */
.biome .t b{display:inline}
.modechip{display:inline-block;margin-left:6px;font-family:"IBM Plex Mono",monospace;
  font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:var(--signal);
  background:var(--signal-soft);border:1px solid color-mix(in srgb,var(--signal) 32%,transparent);
  border-radius:999px;padding:1px 7px;vertical-align:2px;white-space:nowrap}
.biome[disabled] .modechip{opacity:.5}

/* ══ the world (2026-09-12) ═════════════════════════════════════════════
   A tile world the player paints, with the pen's animals wandering in it.
   The ground is a canvas; things and animals are DOM so they can sort by
   their feet. The stage keeps the world's aspect and scales to the panel. */
/* isolation: the sprites, the sky and the bubble sort by z-index INSIDE the
   stage; without its own stacking context those numbers (up to 950) beat the
   inspect sheet's scrim (90) and the animals showed through the sheet */
.w2-stage{position:relative;isolation:isolate;width:100%;aspect-ratio:var(--w2-ar,18/11);background:var(--pen);
  overflow:hidden;border-bottom:1px solid var(--line-soft);user-select:none;-webkit-user-select:none}
.w2-stage.decorating{touch-action:none;cursor:crosshair}
.w2-ground{position:absolute;inset:0;width:100%;height:100%;display:block}
.w2-layer{position:absolute;inset:0}
.w2-sky{position:absolute;inset:0;pointer-events:none;z-index:850}
.w2-sky.dusk{background:linear-gradient(180deg,rgba(255,150,80,.42),rgba(150,60,140,.38));mix-blend-mode:multiply}
.w2-sky.night{background:
  radial-gradient(1.5px 1.5px at 12% 18%,#fff 60%,transparent 62%),
  radial-gradient(1.5px 1.5px at 32% 9%,#fff 60%,transparent 62%),
  radial-gradient(1.2px 1.2px at 58% 22%,#fff 60%,transparent 62%),
  radial-gradient(1.6px 1.6px at 78% 12%,#fff 60%,transparent 62%),
  radial-gradient(1.2px 1.2px at 90% 30%,#fff 60%,transparent 62%),
  radial-gradient(1.2px 1.2px at 44% 34%,#fff 60%,transparent 62%),
  rgba(14,22,62,.5)}
.w2-sky.night::after,.w2-sky.aurora::after{content:"";position:absolute;inset:0;background:rgba(30,40,90,.35);mix-blend-mode:multiply}
.w2-sky.aurora{background:
  radial-gradient(1.5px 1.5px at 22% 14%,#fff 60%,transparent 62%),
  radial-gradient(1.5px 1.5px at 70% 8%,#fff 60%,transparent 62%),
  linear-gradient(100deg,transparent 0%,rgba(90,255,190,.28) 22%,rgba(120,120,255,.26) 42%,rgba(255,120,220,.22) 58%,transparent 78%),
  rgba(10,18,52,.55);background-size:100% 100%,100% 100%,220% 100%,100% 100%;
  animation:w2aurora 14s linear infinite}
@keyframes w2aurora{from{background-position:0 0,0 0,0% 0,0 0}to{background-position:0 0,0 0,200% 0,0 0}}
.w2-wx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:900}
.w2-obj{position:absolute;pointer-events:none;transform:translate(-50%,-100%)}
.w2-obj svg{width:100%;height:100%;display:block;overflow:visible}
.w2-crit{position:absolute;transform:translate(-50%,-92%);touch-action:none;cursor:grab;
  will-change:left,top}
.w2-crit .idlewrap{position:absolute;inset:0}
.w2-crit.face-l{transform:translate(-50%,-92%) scaleX(-1)}
.w2-crit.face-l .w2-tag{transform:translateX(-50%) scaleX(-1)}
.w2-crit.drag{cursor:grabbing;z-index:800!important;filter:drop-shadow(0 10px 8px rgba(0,0,0,.35))}
.w2-crit .idle{transform-origin:50% 100%}
.w2-tag{position:absolute;left:50%;top:100%;transform:translateX(-50%);font-family:"IBM Plex Mono",monospace;
  font-size:9px;letter-spacing:.06em;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.8);white-space:nowrap;
  opacity:0;transition:opacity .2s;pointer-events:none}
.w2-crit:hover .w2-tag,.w2-crit.drag .w2-tag{opacity:1}
.w2-bubble{position:absolute;z-index:950;background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:8px 10px;box-shadow:var(--shadow);min-width:150px;max-width:220px;animation:up .18s cubic-bezier(.2,.9,.3,1)}
.w2-bubble b{font-family:"Bricolage Grotesque",sans-serif;font-size:13.5px;display:block}
.w2-bsub{display:block;font-size:11.5px;color:var(--muted);margin-top:1px}
.w2-brow{display:flex;gap:6px;margin-top:8px}
.w2-tray{display:flex;gap:7px;align-items:center;overflow-x:auto;padding:9px 11px;min-height:46px;
  border-bottom:1px solid var(--line-soft)}
.w2-tr{width:50px;height:50px;flex:none;border-radius:9px;background:var(--pen);border:1px solid var(--line);
  padding:0;overflow:hidden;position:relative}
.w2-tr:hover{border-color:var(--accent)}
.w2-trp{position:absolute;inset:2px}
.w2-trp svg{width:100%;height:100%;display:block}
.w2-hint{font-size:12px;color:var(--muted);white-space:normal;line-height:1.35}
.w2-tools{padding:10px 11px 12px;display:flex;flex-direction:column;gap:9px}
.w2-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.w2-k{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);width:56px;flex:none}
.w2-opts{display:flex;gap:6px;flex-wrap:wrap;flex:1;min-width:0}
.w2-sw{width:28px;height:28px;border-radius:8px;border:2px solid var(--line);padding:0;flex:none}
.w2-sw.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.w2-th{width:36px;height:36px;border-radius:8px;border:2px solid var(--line);background:var(--panel-2);
  padding:3px;flex:none;color:var(--muted)}
.w2-th svg{width:100%;height:100%;display:block}
.w2-th.on{border-color:var(--accent);background:var(--accent-soft)}
.w2-th.erase{font-size:15px;color:var(--danger)}
.w2-sels{gap:10px}
.w2-sels label{display:flex;align-items:center;gap:6px}
.w2-sels .w2-k{width:auto}
.w2-sels select,.w2-name{font-size:13px;padding:6px 8px;border-radius:8px;border:1px solid var(--line);
  background:var(--panel-2);color:var(--text)}
.w2-namelab{display:flex;align-items:center;gap:6px;flex:1;min-width:0}
.w2-name{flex:1;min-width:0;font-size:16px}
.w2-name:focus{outline:none;border-color:var(--accent)}
.mini.on{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}

/* ══ litters (2026-09-12) ═══════════════════════════════════════════════ */
.litter-fc{display:flex;gap:10px;align-items:baseline;padding:8px 10px;border-radius:9px;
  background:var(--panel-2);border:1px solid var(--line-soft);font-size:12.5px}
.litter-fc .k{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim);flex:none}
.litter-fc .v{color:var(--muted)}
.hatchbox.litter{width:min(420px,100%)}
.litter-row{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 10px}
.litter-kid{width:104px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:2px}
.litter-row.n4 .litter-kid{width:96px}
.litter-kid .egg-stage.sm{width:92px;height:92px}
/* one out of a bigger litter still gets the full-size stage */
.litter-row.n1 .litter-kid{width:100%}
.litter-row.n1 .egg-stage.sm{width:min(170px,50vw);height:min(170px,50vw)}
.litter-row.n4 .egg-stage.sm{width:84px;height:84px}
.litter-kid b{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:13px;line-height:1.15}
.litter-kid .chips{justify-content:center}
.litter-kid.anom b{color:var(--t5)}

/* ══ the draw sheet (2026-09-12) ════════════════════════════════════════
   The animal fills a stage with the portrait's own aspect, so a pixel maps
   straight to the viewBox; the canvas over it carries only the live stroke. */
.dw-stage{position:relative;width:min(100%,calc(50vh * 152 / 182));aspect-ratio:152/182;margin:0 auto;
  background:var(--pen);border-bottom:1px solid var(--line-soft);overflow:hidden}
.dw-art{position:absolute;inset:0}
.dw-art svg{width:100%;height:100%;display:block}
.dw-canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair}
.dw-tools{padding:10px 14px 14px;display:flex;flex-direction:column;gap:9px}
.dw-pal{display:flex;flex-wrap:wrap;gap:6px}
.dw-sw{width:28px;height:28px;border-radius:50%;border:2px solid var(--line);padding:0;flex:none}
.dw-sw.tok{border-radius:8px}
.dw-sw.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.dw-row{display:flex;gap:6px;align-items:center}
.dw-k{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);margin-right:4px}
.dw-size{width:32px;height:32px;border-radius:8px;border:2px solid var(--line);background:var(--panel-2);
  display:grid;place-items:center;padding:0;flex:none}
.dw-size i{display:block;border-radius:50%;background:var(--text)}
.dw-size.on{border-color:var(--accent)}
.dw-name{flex:1;min-width:0;font-size:16px;padding:9px 11px;border-radius:9px;border:1px solid var(--line);
  background:var(--panel-2);color:var(--text)}
.dw-name:focus{outline:none;border-color:var(--accent)}
.mk-draw{flex:none}
.mk-draw.on{border-color:var(--t5);color:var(--t5)}

/* ══ worlds, habitats, bonds (2026-09-12, later) ════════════════════════ */
.w2-bar{display:flex;gap:8px;align-items:center;padding:8px 11px;border-bottom:1px solid var(--line-soft);flex-wrap:wrap}
.w2-bar .eyebrow{margin-left:auto}
.w2-wsel{font-size:13px;padding:6px 8px;border-radius:8px;border:1px solid var(--line);background:var(--panel-2);
  color:var(--text);max-width:100%;min-width:0}
.w2-wsel.sm{font-size:12px;padding:5px 7px;margin-top:7px;width:100%}
.w2-mini{width:34px;height:34px;flex:none;border-radius:8px;background:var(--pen);border:1px solid var(--line-soft);
  display:block;overflow:hidden}
.w2-mini svg{width:100%;height:100%;display:block}
.w2-hab{position:absolute;left:50%;bottom:-2px;width:9px;height:9px;border-radius:50%;transform:translateX(-50%);
  border:1.5px solid rgba(255,255,255,.85);box-shadow:0 1px 2px rgba(0,0,0,.4);pointer-events:none}
.w2-heart{position:absolute;right:-2px;top:0;font-size:11px;color:var(--t5);text-shadow:0 1px 2px rgba(0,0,0,.6);
  pointer-events:none;font-style:normal}
.w2-crit.face-l .w2-heart{transform:scaleX(-1)}
.w2-habdot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:middle}
/* habitats */
.hab{border:1px solid var(--line);border-left:4px solid var(--hab,var(--accent));border-radius:11px;background:var(--panel-2);
  padding:10px 11px;display:flex;flex-direction:column;gap:8px}
.hab-hd{display:flex;align-items:center;gap:8px}
.hab-dot{width:12px;height:12px;border-radius:50%;background:var(--hab,var(--accent));flex:none}
.hab-name{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:15px;background:transparent;border:1px solid transparent;
  border-radius:7px;padding:4px 6px;color:var(--text);min-width:0;flex:1}
.hab-name:hover{border-color:var(--line)}
.hab-name:focus{outline:none;border-color:var(--accent);background:var(--panel)}
.hab-sub{display:flex;gap:8px;align-items:baseline;margin-top:2px}
.hab-sub .dim{font-size:12px;color:var(--dim)}
.ranks{margin:0;padding:0 0 0 22px;display:flex;flex-direction:column;gap:4px;font-size:13px}
.ranks li{display:flex;gap:8px;align-items:center}
.ranks li b{font-family:"Bricolage Grotesque",sans-serif;font-weight:700}
.rank-who{color:var(--muted);font-size:12.5px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hab-in{flex:1;min-width:0;font-size:16px;padding:8px 10px;border-radius:9px;border:1px solid var(--line);
  background:var(--panel);color:var(--text)}
.hab-in:focus{outline:none;border-color:var(--accent)}
.hab-members{display:flex;flex-direction:column;gap:6px}
.hab-m{display:flex;gap:8px;align-items:center}
.hab-m b{font-size:13.5px;min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hab-m select,.hab-add{font-size:13px;padding:6px 8px;border-radius:8px;border:1px solid var(--line);background:var(--panel);
  color:var(--text);max-width:46%;min-width:0}
.hab-add{flex:1;max-width:none}
/* bonds */
.bond-me{display:flex;gap:10px;align-items:center;padding:10px 11px;border-radius:11px;background:var(--panel-2);border:1px solid var(--line)}
.bond-me b{font-family:"Bricolage Grotesque",sans-serif;font-size:15px;display:block}
.bonds{display:flex;flex-direction:column;gap:7px}
.bond-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:8px 10px;border-radius:10px;border:1px solid var(--line-soft);background:var(--panel-2)}
.bond-row.has-mate{border-color:color-mix(in srgb,var(--t5) 50%,var(--line))}
.bond-row.has-friend{border-color:color-mix(in srgb,var(--good) 50%,var(--line))}
.bond-row.has-rival{border-color:color-mix(in srgb,var(--danger) 50%,var(--line))}
.bond-t{flex:1;min-width:120px}
.bond-t b{font-size:13.5px;display:block}
.bond-t em{font-style:normal;color:var(--t5)}
.bond-row.has-friend .bond-t em{color:var(--good)}
.bond-row.has-rival .bond-t em{color:var(--danger)}
.bond-btns{display:flex;gap:5px;flex-wrap:wrap}
.bond-btns .mini:disabled{opacity:.4;cursor:not-allowed}

/* ══ the gift-code box (2026-09-12, later) ═════════════════════════════ */
.giftrow{border-top:1px solid var(--line-soft)}
.giftbox{display:flex;gap:7px;align-items:stretch}
.gift-in{flex:1;min-width:0;font-size:16px;padding:9px 11px;border-radius:9px;border:1px solid var(--line);
  background:var(--panel-2);color:var(--text);font-family:"IBM Plex Mono",monospace}
.gift-in:focus{outline:none;border-color:var(--accent)}
.giftbox .btn{flex:none;width:auto;padding-left:14px;padding-right:14px}

/* ══ the small movements (2026-09-12, evening) ═══════════════════════════
   Blinking, ear twitches, wing flaps, a swaying tail and antennae, on the
   parts render2d.js now classes. SVG transforms need fill-box to turn about
   the part itself. Timings are per animal, set by anim.js; the wing flap is
   continuous, the rest is mostly still and moves for a moment. */
.idle .eye{transform-box:fill-box;transform-origin:50% 60%;animation:i-blink var(--blink,5s) var(--del,0s) infinite}
@keyframes i-blink{0%,92.5%,100%{transform:scaleY(1)}95%{transform:scaleY(.06)}97.5%{transform:scaleY(1)}}
.idle .ear{transform-box:fill-box;transform-origin:50% 100%;animation:i-twitch var(--twitch,7s) var(--del,0s) infinite}
.idle .ear-r{animation-delay:calc(var(--del,0s) - 2.3s)}
@keyframes i-twitch{0%,86%,100%{transform:rotate(0)}89%{transform:rotate(-9deg)}93%{transform:rotate(6deg)}97%{transform:rotate(-2deg)}}
.idle .wing{transform-box:fill-box;animation:i-flap var(--flap,1.4s) ease-in-out var(--del,0s) infinite}
.idle .wing-l{transform-origin:100% 55%}
.idle .wing-r{transform-origin:0% 55%;animation-name:i-flap-r}
@keyframes i-flap{0%,100%{transform:rotate(0)}50%{transform:rotate(-15deg)}}
@keyframes i-flap-r{0%,100%{transform:rotate(0)}50%{transform:rotate(15deg)}}
.idle .tail{transform-box:fill-box;transform-origin:12% 60%;animation:i-tail var(--sway,3.2s) ease-in-out var(--del,0s) infinite}
@keyframes i-tail{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(6deg)}}
.idle .ant{transform-box:fill-box;transform-origin:50% 100%;animation:i-ant var(--sway,3.2s) ease-in-out var(--del,0s) infinite}
@keyframes i-ant{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
.no-motion .idle .eye,.no-motion .idle .ear,.no-motion .idle .wing,.no-motion .idle .tail,.no-motion .idle .ant{animation:none!important}
@media (prefers-reduced-motion: reduce){
  .idle .eye,.idle .ear,.idle .wing,.idle .tail,.idle .ant{animation:none!important}
}

/* ══ ages (2026-09-12, evening) ═══════════════════════════════════════ */
.chip.age{background:var(--panel-3);color:var(--text);border-color:var(--line)}
.agebox{margin:12px 14px 0;padding:9px 11px;border-radius:10px;background:var(--panel-2);border:1px solid var(--line-soft);
  display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.agebox b{font-family:"Bricolage Grotesque",sans-serif;font-size:14px;margin-right:2px}
.agebox .dim{font-size:12px;color:var(--dim)}

/* a group member's world, under its name */
.hab-m b small{display:block;font-weight:400;font-size:11px;color:var(--dim);font-family:"IBM Plex Mono",monospace}

.agebox .mini:disabled{opacity:.4;cursor:not-allowed}

/* ══ the draw sheet, second pass ═══════════════════════════════════════ */
.dw-sw.pick{position:relative;overflow:hidden;background:conic-gradient(#ff5252,#ffd23f,#5cc86a,#2bb5b8,#3b7ddd,#8b5cf6,#ff7bc2,#ff5252);
  display:block;cursor:pointer}
.dw-sw.pick input{position:absolute;inset:-6px;width:calc(100% + 12px);height:calc(100% + 12px);opacity:0;cursor:pointer;padding:0;border:0}
.dw-tool.on{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.dw-canvas.erasing{cursor:cell}

/* ══ Adelyn's list (2026-09-12, night): zoom, species, letting go ═══════ */
.dw-view{position:absolute;inset:0;transform-origin:0 0;will-change:transform}
.dw-zoom{min-width:34px;text-align:center;font-size:12px;color:var(--muted)}
.dw-canvas.moving{cursor:grab}
.chip.sp{color:var(--signal);background:var(--signal-soft)}
.sp-genes{display:flex;flex-direction:column;gap:4px}
.sp-gene{border:1px solid var(--line-soft);border-radius:9px;background:var(--panel);padding:0 10px}
.sp-gene summary{display:flex;gap:8px;align-items:baseline;padding:8px 0;cursor:pointer;list-style:none;font-size:13.5px}
.sp-gene summary::-webkit-details-marker{display:none}
.sp-gene summary::before{content:"▸";color:var(--dim);font-size:11px;margin-right:2px}
.sp-gene[open] summary::before{content:"▾"}
.sp-gene .sp-cnt{margin-left:auto;font-size:11.5px}
.sp-gene .row-btns{margin:0 0 6px}
.sp-chips{padding-bottom:10px}
.chip.sp{border:1px solid transparent;cursor:pointer}
.sp-chips .chip.sp{color:var(--dim);background:var(--panel-2);border-color:var(--line-soft);text-decoration:line-through;opacity:.8}
.sp-chips .chip.sp.on{color:var(--signal);background:var(--signal-soft);border-color:color-mix(in srgb,var(--signal) 40%,transparent);text-decoration:none;opacity:1}
.sp-chips .chip.sp.unseen{font-style:italic}
.mk-sp select{flex:1}
.av.gone{opacity:.7;padding-right:4px}
.avx{font-size:10px;margin-left:5px;color:var(--danger);padding:0 3px;border-radius:4px;border:1px solid transparent}
.avx:hover{border-color:var(--danger)}
.avx.arm{background:var(--danger);color:#fff}

/* ══ species, second pass (2026-09-13) ════════════════════════════════
   Chips a finger can hit (they were 18 px tall), a warning colour on a gene
   whose allowed traits are not found yet, and a Maker row that has nothing
   to offer the species on the bench. */
.sp-chips{gap:6px}
.sp-chips .chip.sp{font-size:12px;padding:6px 10px;border-radius:8px;line-height:1.2}
.sp-chips .chip.sp.unseen{border-style:dashed}
.sp-gene .sp-cnt.warn{color:var(--danger)}
.mk-row.gap .k{color:var(--danger)}
.mk-row.gap select{border-color:var(--danger);color:var(--danger)}

/* ══ the voice piano (2026-09-20, ADO #139) ═══════════════════════════
   One octave at a time. A white key is 12.5% of the width so eight of them
   fill it exactly, and the blacks sit over the joins. Keys are big because
   the person playing them is using a thumb on a phone. */
.vc-body{padding:12px 14px 16px;display:flex;flex-direction:column;gap:12px}
.vc-who{display:flex;gap:12px;align-items:center}
.vc-art{width:86px;flex:0 0 86px}
.vc-art svg{width:100%;height:auto;display:block}
.vc-who .note{margin:0;flex:1}
.vc-btns{display:flex;gap:8px;align-items:center}
.vc-btns .btn{flex:1}

.pn{display:flex;flex-direction:column;gap:9px}
.pn-bar{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.pn-bar .spacer{flex:1}
.pn-k{font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--muted);letter-spacing:.06em}
.pn-oct{font-size:11px;color:var(--muted);min-width:34px;text-align:center}
#pnRec.on{color:var(--danger);border-color:var(--danger);background:color-mix(in srgb,var(--danger) 12%,transparent)}
.pn-bpm{flex:0 1 110px;accent-color:var(--accent)}

.pn-strip{display:flex;gap:4px;align-items:center;overflow-x:auto;min-height:30px;
  padding:5px 7px;border:1px solid var(--line-soft);border-radius:9px;background:var(--panel-2)}
.pn-empty{font-size:11px;color:var(--dim)}
.pn-note{font-family:"IBM Plex Mono",monospace;font-size:10px;padding:3px 6px;border-radius:5px;
  background:var(--signal-soft);color:var(--signal);white-space:nowrap}
.pn-note.long{background:var(--accent-soft);color:var(--accent);padding-right:12px}
.pn-len{margin-left:auto;padding-left:8px;font-family:"IBM Plex Mono",monospace;font-size:9.5px;color:var(--dim);white-space:nowrap}

.pn-keys{position:relative;height:132px;border-radius:10px;overflow:hidden;
  border:1px solid var(--line);background:var(--panel-3);touch-action:none;user-select:none}
.pn-w,.pn-b{position:absolute;top:0;padding:0;margin:0;cursor:pointer;touch-action:none}
.pn-w{width:12.5%;height:100%;background:linear-gradient(#fffdf8,#ece7dc);
  border:none;border-right:1px solid rgba(20,26,33,.28);
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:7px}
.pn-w span{font-family:"IBM Plex Mono",monospace;font-size:9.5px;color:#6d7885;pointer-events:none}
.pn-w:last-of-type{border-right:none}
.pn-w.on{background:linear-gradient(var(--accent-soft),#e6dcc8)}
.pn-b{width:7.2%;height:62%;z-index:2;border:none;border-radius:0 0 4px 4px;
  background:linear-gradient(#2b333d,#141a21);box-shadow:0 2px 4px rgba(0,0,0,.4)}
.pn-b.on{background:linear-gradient(var(--accent),#2b333d)}
@media (max-width:420px){ .pn-keys{height:112px} .vc-art{width:64px;flex-basis:64px} }

/* ══ the gallery plate (2026-09-20, ADO #137) ═════════════════════════
   A plate is a printed thing: it stays light and pastel in a dark lab,
   the way the specimen cards do. */
.plate{margin:0;display:flex;flex-direction:column;gap:7px;align-items:center}
.plate-svg{width:100%;height:auto;display:block;border-radius:24px;
  box-shadow:0 2px 6px rgba(0,0,0,.18),0 12px 30px rgba(0,0,0,.22)}
.plate-cap{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.04em;
  color:var(--muted);text-align:center}
.plate-voice{align-self:center}
.plate-world{gap:7px}
.plate-world .mkt-world{width:100%;border-radius:18px;overflow:hidden;
  border:2px solid color-mix(in srgb,var(--line) 70%,transparent)}

/* ══ the market (2026-09-20, ADO #135/#136) ═══════════════════════════ */
.mkt-body{padding:12px 14px 16px;display:flex;flex-direction:column;gap:12px}
.mkt-body .lead,.mkt-body .note{margin:0}
.mkt-find{display:flex;gap:8px}
.mkt-find .gift-in{flex:1}
.mkt-bar{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.mkt-bar .spacer,.mkt-till .spacer,.mkt-card-hd .spacer,.mkt-card-ft .spacer{flex:1}

.mkt-list{display:grid;gap:10px}
.mkt-card{border:1px solid var(--line);border-radius:12px;padding:10px 12px;
  background:var(--panel-2);display:flex;flex-direction:column;gap:6px}
.mkt-card-hd,.mkt-card-ft{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mkt-blurb{margin:0;font-size:12.5px;color:var(--muted)}

.mkt-shelf{display:grid;gap:10px}
.mkt-item{display:grid;grid-template-columns:74px 1fr auto;gap:10px;align-items:center;
  border:1px solid var(--line-soft);border-radius:12px;padding:8px 10px;background:var(--panel-2)}
.mkt-art{width:74px}
.mkt-art svg{width:100%;height:auto;display:block}
.mkt-noart{font-size:10px;color:var(--dim);text-align:center;padding:14px 0}
.mkt-info{min-width:0;display:flex;flex-direction:column;gap:3px}
.mkt-info b{font-size:14px}
.mkt-note{margin:0;font-size:12px;color:var(--muted)}
.mkt-buy{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.mkt-buy .price{font-size:13px;color:var(--accent)}
.mkt-why{font-size:9.5px;max-width:110px;text-align:right;line-height:1.25}

.mkt-plates{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}

.mkt-till{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;
  border:1px solid var(--line);background:var(--panel-2);flex-wrap:wrap}
.mkt-till b{font-size:18px;color:var(--accent);display:block}
.mkt-sales{display:flex;flex-direction:column;gap:4px;padding:8px 10px;border-radius:10px;
  background:var(--panel-2);border:1px solid var(--line-soft)}
.mkt-sale{display:grid;grid-template-columns:1fr auto auto;gap:8px;font-size:12px}
.mkt-sale .mono{color:var(--accent)}

.mkt-form{display:flex;flex-direction:column;gap:8px;padding:10px 12px;border-radius:12px;
  border:1px solid var(--line);background:var(--panel-2)}
.mkt-form .mkt-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.mkt-form label{display:flex;gap:5px;align-items:center;font-size:12.5px;color:var(--muted)}
.mkt-sel{width:100%}
.mkt-price{max-width:90px;margin-left:auto}
.mkt-wsvg{width:100%;height:auto;display:block;border-radius:8px}

@media (max-width:430px){
  .mkt-item{grid-template-columns:60px 1fr}
  .mkt-art{width:60px}
  .mkt-buy{grid-column:1 / -1;flex-direction:row;align-items:center;justify-content:flex-end}
  .mkt-why{max-width:none;text-align:left;flex:1}
  .mkt-plates{grid-template-columns:1fr}
}

/* ══ recording a real noise (2026-09-20, ADO #140) ════════════════════
   Adelyn: "make a function where you can record it's voice." The level bar
   is the important bit — a child needs to see the microphone hearing them,
   or a silent recording just looks like the feature is broken. */
.vc-rec{display:flex;flex-direction:column;gap:8px;padding:10px 12px;border-radius:12px;
  border:1px solid var(--line);background:var(--panel-2)}
.vc-rec .note{margin:0}
.vc-rec-hd{display:flex;align-items:center;gap:8px}
.vc-rec-hd .spacer{flex:1}
.vc-rec-hd .dim{font-family:"IBM Plex Mono",monospace;font-size:10px}
.vc-rec-row{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
#vcRecBtn.on{color:var(--danger);border-color:var(--danger);
  background:color-mix(in srgb,var(--danger) 14%,transparent)}
.vc-level{height:7px;border-radius:99px;background:var(--panel-3);overflow:hidden}
.vc-level i{display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--signal),var(--accent));transition:width .06s linear}

/* which animals in the pen have been given something to say */
.has-noise{font-size:11px;color:var(--accent);margin-left:4px;line-height:1}
.mkt-rename .mkt-row{gap:8px}
.mkt-tip{font-size:9.5px}