/* The public site (/zoo, /me, /panel): the same jungle night as the stream
   and the demo. One type family (Mikhak), one warm accent, the branch, nest
   and plank from the overlay as the shared artwork. */
@font-face{font-family:Mikhak;src:url(/fonts/Mikhak-FD.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{
  color-scheme:dark;
  --ground:#0c1510; --raise:#122019; --raise-2:#182a20; --raise-3:#1f3427;
  --ink:#efe7d4; --ink-2:#aeb09c; --ink-3:#7d8977;
  --mango:#e3a049; --mango-hi:#efb462; --mango-ink:#1d1206;
  --gilt:#ecdcae;
  --display:Mikhak,Vazirmatn,Tahoma,sans-serif;
}
*{box-sizing:border-box}
html{background:var(--ground)}
/* flow-root: the nav's top margin must not collapse through body and leave a seam above it */
body{margin:0;display:flow-root;min-height:100vh;color:var(--ink);font-family:var(--display);font-size:16px;line-height:1.7;overflow-x:hidden;
  /* grain under everything, then a night that deepens toward the bottom */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .93 0 0 0 0 .9 0 0 0 0 .8 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(180deg,#0f1c15 0,#0c1510 420px,#0b140f 100%)}
[hidden]{display:none!important}
button,input,select{font:inherit;color:inherit}
a{color:inherit}
:focus-visible{outline:2px solid var(--mango-hi);outline-offset:2px;border-radius:6px}
bdi,.ltr{unicode-bidi:isolate}
.wrap{max-width:1180px;margin:0 auto;padding-inline:16px}

/* ---------------------------------------------------------------- canopy + nav */
.canopy{position:absolute;top:0;left:0;width:100%;height:auto;pointer-events:none;z-index:3;display:block}
.canopy svg{display:block;width:100%;height:auto}
.nav{position:relative;z-index:2;display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  margin:clamp(46px,9vw,118px) auto 0;width:max-content;max-width:100%;padding:6px;border-radius:16px;
  background:rgba(18,32,25,.86);box-shadow:inset 0 1px 0 rgba(255,245,220,.06)}
.nav .mark{width:58px;margin-inline:8px 4px;display:block}
.nav .mark svg{width:100%;height:auto;display:block;overflow:visible;transform:scaleX(-1)}
.nav .mark .sk-wing{transform-box:view-box;transform-origin:206px 106px;animation:flap .5s ease-in-out infinite}
.nav .mark .sk-far{animation-delay:-.06s}
@keyframes flap{0%,100%{transform:rotate(-4deg) scaleY(1)}48%{transform:rotate(7deg) scaleY(-.6)}}
.nav a{text-decoration:none;font-weight:700;font-size:15px;color:var(--ink-2);padding:7px 14px;border-radius:11px;transition:color .15s,background-color .15s}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink);background:var(--raise-3)}
.nav a.give{color:var(--mango-ink);background:var(--mango);font-weight:900}
.nav a.give:hover{background:var(--mango-hi)}

/* ---------------------------------------------------------------- the perch (branch, nest, animal) */
.perch{position:relative;aspect-ratio:760/280;width:100%}
.perch>.part{position:absolute}
.perch>.part>svg{display:block;width:100%;height:100%;overflow:visible}
.perch .branch{inset:0}
.perch .nest{left:30.9%;top:-1.4%;width:39.5%;height:50%}
.perch .who{left:34.2%;top:-66.4%;width:32.9%;height:89.3%;display:grid;place-items:end center}
.perch .who img{width:100%;height:100%;object-fit:contain;transform-origin:50% 100%;animation:breathe 2.6s ease-in-out infinite}
.perch .who.shiny img{filter:sepia(1) saturate(3.4) hue-rotate(4deg) brightness(1.18) contrast(1.08)}
.perch.flip{transform:scaleX(-1)}
.perch .egg{left:43.8%;top:-18.6%;width:13.7%;height:46.4%;transform-origin:50% 100%;animation:wobble 3.2s ease-in-out infinite}
.perch .egg svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
@keyframes breathe{50%{transform:scale(1.03,.975)}}
@keyframes wobble{0%,72%,100%{transform:rotate(0)}76%{transform:rotate(-5deg)}82%{transform:rotate(4deg)}88%{transform:rotate(-2deg)}}
.egg-crack{fill:none;stroke:#2a190b;stroke-width:2.8;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}

/* The wooden plank from the stream, as a caption. Same torn silhouette. */
.plank{position:relative;padding:20px 30px 22px;color:#fcf1da;text-align:center;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='440' height='260'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006 0.28' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0.12 0 0 0 0 0.06 0 0 0 0 0.02 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E") 0 0/100% 100%,
    linear-gradient(180deg,#855a37,#6a4528 55%,#553519);
  clip-path:polygon(0.8% 5%,11% 0.6%,36% 3%,62% 0,87% 2.6%,99.4% 0.4%,100% 38%,98.6% 70%,99.6% 97%,71% 99.4%,44% 96.8%,17% 100%,0.4% 97%,1.6% 58%);
  box-shadow:inset 0 3px 0 rgba(255,222,170,.16),inset 0 -4px 0 rgba(20,8,0,.3)}
.plank .t{font-weight:900;font-size:clamp(22px,3vw,30px);line-height:1.3;text-shadow:0 2px 0 rgba(30,14,2,.6);font-variation-settings:"DSTY" 1}
.plank .m{font-weight:700;font-size:16px;color:rgba(252,241,218,.86);text-shadow:0 1px 0 rgba(30,14,2,.55)}
.plank .nail{position:absolute;top:11px;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#d9d2c4,#6d655a 70%)}

/* ---------------------------------------------------------------- sections */
.block{display:flex;flex-direction:column;gap:14px;margin-top:44px}
.block>h2{margin:0;font-weight:900;font-size:clamp(24px,3.2vw,32px);line-height:1.3}
.block>h2 .aside{font-weight:600;font-size:15px;color:var(--ink-3);margin-inline-start:10px}
.lead{margin:0;color:var(--ink-2);max-width:60ch}
.surface{background:var(--raise);border-radius:18px;padding:20px;box-shadow:inset 0 1px 0 rgba(255,245,220,.05)}

/* ---------------------------------------------------------------- shelves */
.shelves{display:flex;flex-direction:column;gap:18px}
.shelf{display:flex;flex-direction:column;gap:6px}
.shelf .tl{font-weight:800;font-size:16px}
.shelf .tl span{color:var(--ink-3);font-weight:600;font-size:14px;margin-inline-start:8px}
.cells{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px}
.cell{position:relative;aspect-ratio:1;border-radius:12px;background:var(--raise-2);display:grid;place-items:center;overflow:hidden}
.cell img{width:74%;height:74%;object-fit:contain;filter:brightness(0) invert(.42) sepia(.25) hue-rotate(60deg);opacity:.5}
.cell.have img{filter:none;opacity:1}
.cell.gold img{filter:sepia(.8) saturate(2.8) hue-rotate(-12deg) brightness(1.07)}
.cell .n{position:absolute;bottom:3px;left:6px;font-size:12px;font-weight:800;color:var(--ink-2)}
.cell.unique{grid-column:span 2;aspect-ratio:auto;padding:10px 8px 8px;gap:2px;grid-template-rows:auto auto auto;text-decoration:none;
  background:linear-gradient(180deg,#2a2618,var(--raise-2));box-shadow:inset 0 1px 0 rgba(236,220,174,.18)}
.cell.unique img{width:68px;height:68px}
.cell.unique .nm{font-size:13px;font-weight:800;color:var(--ink);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cell.unique .own{font-size:13px;font-weight:800;color:var(--gilt);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cell.unique.mine{box-shadow:inset 0 0 0 2px var(--gilt)}

/* ---------------------------------------------------------------- buttons */
.btn{border:0;cursor:pointer;background:var(--mango);color:var(--mango-ink);font-weight:900;font-size:19px;padding:11px 28px 12px;text-decoration:none;
  display:inline-flex;align-items:center;gap:10px;
  clip-path:polygon(0 0,100% 0,100% 72%,94% 100%,0 100%);border-radius:12px 12px 0 12px;transition:background-color .15s}
.btn:hover{background:var(--mango-hi)}
.btn:active{background:#cf8d39}
.btn[aria-disabled="true"]{background:var(--raise-3);color:var(--ink-3);cursor:not-allowed}
.quiet{border:0;cursor:pointer;background:none;color:var(--ink-2);font-weight:700;font-size:15px;padding:6px 4px;border-radius:8px;text-decoration:none}
.quiet:hover{color:var(--ink)}

/* ---------------------------------------------------------------- footer */
.foot{position:relative;margin-top:72px;padding-top:28px;overflow:hidden;text-align:center}
.foot .links{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 22px;color:var(--ink-3);font-size:14px;position:relative;z-index:1}
.foot .links a{color:var(--ink-2);text-decoration:none}
.foot .links a:hover{color:var(--ink)}
.foot .word{display:block;font-weight:900;font-size:clamp(96px,22vw,300px);line-height:.78;margin:24px 0 0;color:var(--raise-2);
  font-variation-settings:"DSTY" 1;letter-spacing:.02em;user-select:none;transform:translateY(12%)}

@media (prefers-reduced-motion:reduce){.nav .mark .sk-wing,.perch .who img,.perch .egg{animation:none}}
@media (max-width:520px){.cells{grid-template-columns:repeat(auto-fill,minmax(50px,1fr))}.surface{padding:14px}}

/* ---------------------------------------------------------------- pixel skin
   Mobin picked cute pixel art (2026-10-02). Stepped 8-bit corners instead of
   rounded ones, one-step hard shadows, crisp pixel images. */
:root{--px:6px;--px-corner:polygon(0 var(--px),var(--px) var(--px),var(--px) 0,calc(100% - var(--px)) 0,calc(100% - var(--px)) var(--px),100% var(--px),100% calc(100% - var(--px)),calc(100% - var(--px)) calc(100% - var(--px)),calc(100% - var(--px)) 100%,var(--px) 100%,var(--px) calc(100% - var(--px)),0 calc(100% - var(--px)))}
.surface,.nav,.cell,.btn,.board li,.empty,.amounts button,.nav a,.typed code,#giveCustom,.plank,.fact,.field input,.field select,.recent li,.stat div,.card,.url{border-radius:0!important;clip-path:var(--px-corner)}
.btn{box-shadow:inset 0 -5px 0 rgba(29,18,6,.35)}
.btn:active{box-shadow:inset 0 5px 0 rgba(29,18,6,.35)}
.title,.block>h2,.top h1{text-shadow:4px 4px 0 #050c08}
.cell img,.board img,.perch .who img,.got img,.recent img,.cell.unique img{image-rendering:pixelated}
.luck span,.tiers span,.tiers i,.odds .bar,.odds .bar i{border-radius:0!important}
.plank{padding:22px 30px 24px}