@font-face{font-family:"Lilita";src:url(/fonts/lilita.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Atkinson";src:url(/fonts/atkinson.woff2) format("woff2");font-weight:400 700;font-display:swap}
:root{--ink:#2b2233;--ink2:#4a3f52;--paper:#fff8ec;--paper2:#f3e7d2;--leaf:#4f8a46;--leaf2:#3b6c35;--mint:#e5f1d8;--sun:#f6c945;--berry:#e86a6a;--sky:#9fd3ec;--wood:#a8703f;--pbh:68px;
  --hd:"Lilita",ui-rounded,"Arial Rounded MT Bold",system-ui,sans-serif;--tx:"Atkinson",system-ui,-apple-system,"Segoe UI",sans-serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:16px/1.55 var(--tx);color:var(--ink);background:var(--mint);padding-bottom:var(--pbh)}
img{max-width:100%}
a{color:var(--leaf2);text-decoration-thickness:2px;text-underline-offset:2px}
a:hover{color:var(--ink)}
:focus-visible{outline:3px solid var(--sun);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ci{display:inline-block;width:.95em;height:.95em;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff3b0 0 18%,var(--sun) 20% 62%,#d99a1e 64%);border:2px solid var(--ink);vertical-align:-.15em;margin-right:.28em;flex:none}
/* ---------- buttons: chunky, square-cornered, pressable ---------- */
.zb,.btn{font:700 15px/1.1 var(--tx);color:var(--ink);background:var(--paper);border:2px solid var(--ink);border-radius:3px;box-shadow:0 3px 0 var(--ink);padding:9px 12px;cursor:pointer;display:inline-flex;align-items:center;justify-content:space-between;gap:10px;text-decoration:none;transition:transform .06s,box-shadow .06s}
.zb:hover,.btn:hover{background:#fff}
.zb:active,.btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.zb em{font-style:normal;display:inline-flex;align-items:center;background:var(--paper2);border:2px solid var(--ink);padding:2px 6px;border-radius:2px;font-size:14px}
.zb.poor em{color:#b23b3b;background:#fbe1dc}
.zb.done{opacity:.7;box-shadow:0 3px 0 rgba(43,34,51,.45);cursor:default}
.zb.warn{background:#fbe1dc}
.btn.go{background:var(--sun);font-size:18px;padding:13px 20px}
.btn.leaf{background:var(--leaf);color:#fff}
/* ---------- the game (home) ---------- */
body.home{overflow:hidden;background:#4a8a42;overscroll-behavior:none}
#game{position:fixed;left:0;right:0;top:0;bottom:var(--pbh);overflow:hidden;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
#game .stage{position:absolute;inset:0}
#zoo-canvas{display:block;touch-action:none;cursor:grab;image-rendering:pixelated;outline:none}
#zoo-canvas.grabbing{cursor:grabbing}
.nogl{margin:20vh auto;max-width:28em;background:var(--paper);border:3px solid var(--ink);padding:20px;border-radius:6px}
.hud{position:absolute;left:10px;right:10px;top:10px;display:flex;justify-content:space-between;align-items:flex-start;gap:8px;pointer-events:none;z-index:5}
.hud>*{pointer-events:auto}
.hcard{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--paper);border:3px solid var(--ink);border-radius:6px;box-shadow:4px 4px 0 rgba(43,34,51,.35);padding:7px 14px}
.brand{font:22px/1 var(--hd);color:var(--leaf2);letter-spacing:.3px}
.coins{display:inline-flex;align-items:center;font:20px/1 var(--hd)}
.coins.shake{animation:shk .35s}
@keyframes shk{25%{transform:translateX(-4px)}50%{transform:translateX(4px)}75%{transform:translateX(-2px)}}
.stars{color:#e8a91e;font-size:17px;letter-spacing:1px;-webkit-text-stroke:.6px var(--ink)}.stars span{color:#e5dccb;-webkit-text-stroke:.6px #b9ad98}
.mini{display:inline-flex;align-items:center;gap:4px;font-size:14px}.mini svg{width:14px;height:14px;fill:var(--ink2)}.mini small{color:var(--ink2)}
.hbtns{display:flex;gap:8px}
.hb{font:18px/1 var(--hd);color:var(--ink);background:var(--sun);border:3px solid var(--ink);border-radius:4px;box-shadow:0 4px 0 var(--ink);padding:9px 14px;cursor:pointer;letter-spacing:.3px}
.hb[data-act=menu]{background:var(--paper)}
.hb:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.goal{position:absolute;left:10px;top:66px;z-index:4;max-width:260px;background:#fffdf6;border:3px solid var(--ink);border-left-width:8px;border-left-color:var(--leaf);border-radius:4px;padding:8px 12px;box-shadow:4px 4px 0 rgba(43,34,51,.3);font-size:14px}
.goal:empty{display:none}
.goal .gh{all:unset;cursor:pointer;display:block}
.goal .gh span{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--leaf2);font-weight:700}
.goal .gh b{font:18px/1.15 var(--hd);font-weight:400}
.goal p{margin:4px 0 0}.goal .rw{display:flex;align-items:center;font-weight:700}
.goal.min p{display:none}
.goal.flash{animation:fl .9s}
@keyframes fl{0%,60%{background:#fff3b0;transform:scale(1.04)}100%{background:#fffdf6}}
.tags{position:absolute;inset:0;pointer-events:none;z-index:2}
.tag{position:absolute;left:0;top:0;pointer-events:auto;font:14px/1 var(--hd);color:var(--ink);background:var(--paper);border:2px solid var(--ink);border-radius:3px;padding:4px 7px;white-space:nowrap;cursor:pointer;box-shadow:0 2px 0 var(--ink);letter-spacing:.2px}
.tag.locked{background:#efe5d3;color:var(--ink2);font-size:12px}
.tag.sale{background:#fff;color:var(--ink);font-size:14px;display:flex;align-items:center;gap:6px}
.tag em{font-style:normal;display:inline-flex;align-items:center;font-family:var(--tx);font-weight:700;font-size:13px}
.tag.sale.poor em{color:#b23b3b}
.tag.on{background:var(--sun)}
.fxl{position:absolute;inset:0;pointer-events:none;z-index:3;overflow:hidden}
.ft{position:absolute;transform:translate(-50%,-50%);font:16px/1 var(--hd);color:#fff;-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;animation:rise 1.3s ease-out forwards;white-space:nowrap}
.ft.gold{color:var(--sun)}.ft.tk{color:#fff3b0;font-size:13px}.ft.love{color:#ffd0dc;font-size:14px}
@keyframes rise{from{opacity:1;margin-top:0}to{opacity:0;margin-top:-34px}}
.zbar{position:absolute;right:10px;bottom:12px;display:flex;flex-direction:column;gap:8px;z-index:4}
.zbar button{width:42px;height:42px;font:24px/1 var(--hd);background:var(--paper);border:3px solid var(--ink);border-radius:4px;box-shadow:0 3px 0 var(--ink);cursor:pointer;display:grid;place-items:center;color:var(--ink)}
.zbar svg{width:16px;height:16px;fill:var(--ink)}
.zbar button:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.sheet{position:absolute;right:62px;top:70px;width:340px;max-height:calc(100% - 84px);overflow:hidden;z-index:6;background:var(--paper);border:3px solid var(--ink);border-radius:6px;box-shadow:6px 6px 0 rgba(43,34,51,.35);display:flex;flex-direction:column}
.sheet .sc{overflow:auto;min-height:0;flex:1 1 auto;padding:0 14px 14px;overscroll-behavior:contain}
.sheet[hidden]{display:none}
.ph{flex:none;display:flex;align-items:center;gap:8px;margin:0 0 10px;padding:10px 12px 9px 14px;background:var(--leaf);color:#fff;border-bottom:3px solid var(--ink)}
.ph h2{font:22px/1.1 var(--hd);font-weight:400;margin:0;flex:1;letter-spacing:.3px}
.lvl{font-size:13px;font-weight:700;background:rgba(0,0,0,.2);padding:2px 7px;border-radius:2px}
.x{width:32px;height:32px;font:22px/1 var(--tx);font-weight:700;background:var(--paper);color:var(--ink);border:2px solid var(--ink);border-radius:3px;cursor:pointer;flex:none}
.pd{margin:6px 0 12px}.lock{background:#efe5d3;border:2px dashed var(--ink2);padding:8px 10px;border-radius:3px}
.track{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:10px;width:100%;padding:6px;border:2px solid var(--ink);border-radius:3px;background:#fff;margin-bottom:10px}
.track img{width:40px;height:40px;border:2px solid var(--ink);image-rendering:auto}
.track span{flex:1;min-width:0}.track b{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--leaf2)}.track small{display:block;font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.track svg{width:26px;height:26px;padding:6px;fill:var(--ink);background:var(--sun);border:2px solid var(--ink);border-radius:2px}
.track:hover{background:#fffbea}
.stats{display:grid;gap:6px;margin-bottom:10px}
.stat{display:grid;grid-template-columns:52px 1fr;align-items:center;gap:8px;font-size:13px;font-weight:700}
.stat i{display:block;height:14px;border:2px solid var(--ink);background:#e9dfcc;border-radius:2px;overflow:hidden}
.stat b{display:block;height:100%;background:repeating-linear-gradient(90deg,var(--leaf) 0 6px,#5f9e55 6px 8px);transition:width .4s}
.stat.low b{background:repeating-linear-gradient(90deg,var(--berry) 0 6px,#f08282 6px 8px)}
.who{margin-bottom:12px;font-size:14px}
.who ul{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:4px 10px}
.who li{display:flex;justify-content:space-between;gap:6px;border-bottom:1px dashed #d6c8ae;padding:2px 0}
.hh{color:#e0567b;letter-spacing:-1px;font-size:13px}
.acts{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.acts .zb{font-size:14px;padding:8px 9px}
.acts.one{grid-template-columns:1fr}
.acts .zb[data-act=feed]{background:#fff2c6}.acts .zb[data-act=adopt]:not(.done){background:#ffe2ea}.acts .zb[data-act=expand]{background:#dff0d4}
.zstats{display:flex;gap:12px;flex-wrap:wrap;font-size:14px;margin-bottom:8px}
.ups{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ups li{display:flex;gap:10px;align-items:center;justify-content:space-between;border:2px solid var(--ink);border-radius:3px;padding:8px 10px;background:#fff}
.ups b{font-size:15px}.ups small{font-weight:400;color:var(--ink2)}.ups p{margin:2px 0 0;font-size:13px;color:var(--ink2)}
.menu nav{display:grid;gap:8px;margin-bottom:10px}
.menu nav a{font:18px/1.2 var(--hd);color:var(--ink);background:#fff;border:2px solid var(--ink);border-radius:3px;padding:10px 12px;text-decoration:none;box-shadow:0 3px 0 var(--ink)}
.menu .keys{font-size:14px}.menu .fine{font-size:13px;color:var(--ink2)}
/* intro */
#intro{position:fixed;inset:0 0 var(--pbh) 0;z-index:20;display:grid;place-items:center;padding:16px;background:rgba(43,34,51,.35)}
#intro[hidden]{display:none}
.card{background:var(--paper);border:4px solid var(--ink);border-radius:8px;box-shadow:8px 8px 0 rgba(43,34,51,.4);max-width:520px;width:100%;padding:0 22px 22px;overflow:hidden;max-height:100%;overflow-y:auto}
.card .band{margin:0 -22px 16px;height:16px;background:repeating-linear-gradient(90deg,var(--leaf) 0 16px,#5f9e55 16px 32px);border-bottom:4px solid var(--ink)}
.card h1{font:48px/1 var(--hd);font-weight:400;margin:6px 0 6px;color:var(--leaf2);letter-spacing:.5px}
.card .lede{font-size:18px;margin:0 0 12px}
.card .wb{background:#fff3b0;border:2px solid var(--ink);padding:8px 10px;border-radius:3px;font-weight:700}
.card ul{margin:0 0 16px;padding-left:20px}
.card .row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.card .fine{font-size:13px;color:var(--ink2);margin:14px 0 0}
/* ---------- player bar ---------- */
#pbar{position:fixed;left:0;right:0;bottom:0;height:var(--pbh);z-index:30;display:flex;align-items:center;gap:12px;padding:0 14px;background:var(--ink);color:#fbf3e4;border-top:4px solid var(--leaf)}
#pbar button,#pbar a{color:#fbf3e4}
.pbcv{width:46px;height:46px;flex:none;border:2px solid #fbf3e4;background:#3d3346;object-fit:cover}
.pbm{min-width:0;flex:0 1 260px}
.pbm b{display:block;font:17px/1.15 var(--hd);font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.2px}
.pbm span{display:block;font-size:12.5px;color:#cfc3d6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pbc{display:flex;gap:6px;align-items:center}
.pbb{width:38px;height:38px;display:grid;place-items:center;background:transparent;border:2px solid #6c5f77;border-radius:3px;cursor:pointer;padding:0}
.pbb svg{width:14px;height:14px;fill:currentColor}
.pbb:hover{border-color:#fbf3e4}
#pb-pp{width:46px;height:46px;background:var(--sun);border-color:#fbf3e4;color:var(--ink)}
#pb-pp svg{width:16px;height:16px}
.pbs{flex:1;display:flex;align-items:center;gap:8px;font-size:12px;color:#cfc3d6;min-width:120px;font-variant-numeric:tabular-nums}
input[type=range]{-webkit-appearance:none;appearance:none;height:16px;background:transparent;cursor:pointer;flex:1;min-width:0;margin:0;--p:0%}
input[type=range]::-webkit-slider-runnable-track{height:8px;border:2px solid #fbf3e4;background:linear-gradient(90deg,var(--sun) var(--p),#3d3346 var(--p));border-radius:1px}
input[type=range]::-moz-range-track{height:4px;border:2px solid #fbf3e4;background:linear-gradient(90deg,var(--sun) var(--p),#3d3346 var(--p))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:16px;margin-top:-6px;background:#fbf3e4;border:2px solid var(--ink);border-radius:1px}
input[type=range]::-moz-range-thumb{width:10px;height:14px;background:#fbf3e4;border:2px solid var(--ink);border-radius:1px}
.pbx{display:flex;align-items:center;gap:6px}
#pb-follow{width:auto;padding:0 9px;gap:6px;display:flex;font:700 13px/1 var(--tx)}
#pb-follow[aria-pressed=true],#pb-shuf[aria-pressed=true]{background:var(--leaf);border-color:#a9d79e}
#pb-mute.off{opacity:.55}
#pb-vol{width:80px;flex:none}
#toast{position:fixed;left:50%;bottom:calc(var(--pbh) + 14px);transform:translate(-50%,20px);opacity:0;pointer-events:none;z-index:40;background:var(--paper);color:var(--ink);border:3px solid var(--ink);border-radius:4px;box-shadow:4px 4px 0 rgba(43,34,51,.35);padding:9px 14px;font-weight:700;max-width:min(92vw,520px);text-align:center;transition:.2s}
#toast.show{opacity:1;transform:translate(-50%,0)}
/* ---------- content pages ---------- */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:980px;margin:0 auto;padding:16px 18px}
.top .logo{font:28px/1 var(--hd);color:var(--leaf2);text-decoration:none;display:flex;align-items:center;gap:10px}
.top .logo img{width:36px;height:36px;image-rendering:pixelated;border:2px solid var(--ink);border-radius:3px}
.top nav{display:flex;gap:8px;flex-wrap:wrap}
.top nav a{font:16px/1 var(--hd);color:var(--ink);text-decoration:none;background:var(--paper);border:2px solid var(--ink);border-radius:3px;padding:8px 12px;box-shadow:0 3px 0 var(--ink)}
.top nav a[aria-current]{background:var(--sun)}
.top nav a.play{background:var(--leaf);color:#fff}
main.pg{max-width:980px;margin:0 auto;padding:8px 18px 40px}
.pg h1{font:clamp(36px,6vw,58px)/1 var(--hd);font-weight:400;margin:10px 0 12px;color:var(--ink);letter-spacing:.4px}
.pg h2{font:28px/1.1 var(--hd);font-weight:400;margin:34px 0 10px}
.pg h3{font:20px/1.2 var(--hd);font-weight:400;margin:0}
.pg .lede{font-size:19px;max-width:44em}
.box{background:var(--paper);border:3px solid var(--ink);border-radius:6px;box-shadow:5px 5px 0 rgba(43,34,51,.25);padding:16px 18px;margin:16px 0}
.box.lic{border-left-width:10px;border-left-color:var(--leaf)}
.hab{display:grid;grid-template-columns:150px 1fr;gap:18px;background:var(--paper);border:3px solid var(--ink);border-radius:6px;box-shadow:5px 5px 0 rgba(43,34,51,.25);padding:16px;margin:18px 0}
.hab .cv{width:150px;height:150px;border:3px solid var(--ink);display:block}
.hab .hh2{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.hab .sp{font-size:14px;color:var(--ink2);margin:0 0 8px}
.hab .ico{width:34px;height:34px;image-rendering:pixelated}
.plp.on{background:var(--sun)}
.trs{list-style:none;margin:10px 0 0;padding:0;columns:2;column-gap:20px}
.tr{display:flex;align-items:center;gap:8px;padding:4px 0;border-bottom:1px dashed #d6c8ae;break-inside:avoid}
.tr .tp{width:28px;height:28px;flex:none;display:grid;place-items:center;background:#fff;border:2px solid var(--ink);border-radius:2px;cursor:pointer;padding:0}
.tr .tp svg{width:10px;height:10px;fill:var(--ink)}
.tr .tt{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr .td{font-size:13px;color:var(--ink2);font-variant-numeric:tabular-nums}
.tr .dl{font-size:12px;font-weight:700}
.tr.on .tp{background:var(--sun)}.tr.on .tt{font-weight:700}
.faq dt{font:19px/1.2 var(--hd);margin-top:18px}.faq dd{margin:6px 0 0}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.credit{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.credit code{background:#fff;border:2px solid var(--ink);padding:6px 9px;border-radius:2px;font-size:14px}
footer.ft2{max-width:980px;margin:0 auto;padding:20px 18px 30px;font-size:14px;color:var(--ink2);border-top:3px solid var(--ink)}
footer.ft2 p{margin:6px 0}
.home-ft{position:absolute;left:10px;bottom:10px;z-index:3;font-size:12px;background:rgba(255,248,236,.92);border:2px solid var(--ink);border-radius:3px;padding:4px 8px;max-width:calc(100% - 80px)}
.home-ft a{color:var(--ink)}
/* ---------- small screens ---------- */
@media (max-width:820px){
  .pbs{display:none}#pb-vol,#pb-mute,#pb-dl,#pb-shuf{display:none}
  .pbm{flex:1}
}
@media (max-width:700px){
  :root{--pbh:64px}
  #pbar{gap:8px;padding:0 8px}
  .pbcv{width:40px;height:40px}
  #pb-follow span{display:none}#pb-follow{padding:0;width:38px;justify-content:center}
  #pb-prev{display:none}
  .hud{left:6px;right:6px;top:6px}
  .hcard{gap:8px 10px;padding:5px 9px}
  .brand{display:none}
  .coins{font-size:18px}.stars{font-size:14px}
  .hb{font-size:16px;padding:7px 10px}
  .goal{top:auto;bottom:10px;left:6px;max-width:calc(100% - 66px);padding:6px 10px}
  .goal .gh b{font-size:16px}
  .home-ft{display:none}
  .sheet{left:0;right:0;top:auto;bottom:0;width:auto;max-height:54%;border-radius:8px 8px 0 0;border-bottom:0;box-shadow:0 -4px 0 rgba(43,34,51,.25)}
  .has-panel .goal,.has-panel .zbar{display:none}
  .card h1{font-size:40px}
  .hab{grid-template-columns:1fr}.hab .cv{width:110px;height:110px}
  .trs{columns:1}
  .cols{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition:none!important}}