:root{
 /* Colour formula: warm cream + cocoa for 80% of the screen, ONE orange for actions, mint for "good", butter yellow for highlights, pink only for the draw. */
 --paper:#FFFDF8;--cream:#FFF4E1;--text:#3B2A20;--mute:#7B6556;--ink:#3B2A20;--shadow:#3B2A20;--on:#3B2A20;
 --primary:#FF9F45;--mint:#8ED9A8;--sun:#FFE08A;--pink:#FFB3C6;--lilac:#FFD9A8;--sky:#CFE9FF;--peach:#FFC49B;--grass:#A9DC8C;--grass2:#93CF77;--wood:#D9A066;
 --good:#17794D;--bad:#B8283F;
 box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--paper:#3D2C22;--cream:#271B14;--text:#FFF2E2;--mute:#D9C2A8;--ink:#D8B48C;--shadow:#120B07;--good:#8ED9A8;--bad:#FF9AAA;--grass:#4E8A4C;--grass2:#427B44;--sky:#3F4F73;--lilac:#6B4A2E}}
:root[data-theme="dark"]{--paper:#3D2C22;--cream:#271B14;--text:#FFF2E2;--mute:#D9C2A8;--ink:#D8B48C;--shadow:#120B07;--good:#8ED9A8;--bad:#FF9AAA;--grass:#4E8A4C;--grass2:#427B44;--sky:#3F4F73;--lilac:#6B4A2E}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;padding-bottom:calc(112px + env(safe-area-inset-bottom,0px));background-color:var(--cream);background-image:radial-gradient(circle,rgba(150,110,70,.14) 1.6px,transparent 1.8px);background-size:26px 26px;color:var(--text);font:600 16px/1.55 Nunito,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:Fredoka,Nunito,sans-serif;margin:0;line-height:1.05;font-weight:700;letter-spacing:-.01em}
a{color:inherit}button{font:inherit;color:inherit}
:focus-visible{outline:4px solid var(--sun);outline-offset:3px;border-radius:14px;box-shadow:0 0 0 2px var(--ink)}
.wrap{max-width:1160px;margin:0 auto;padding:0 clamp(16px,4vw,40px)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mono{font-family:ui-monospace,Menlo,monospace;font-size:.85em}.num{font-variant-numeric:tabular-nums}.mute{color:var(--mute)}
/* top bar and dock */
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:var(--cream);border-bottom:3px solid var(--ink)}
.bar .wrap{display:flex;align-items:center;gap:12px;min-height:64px}
.logo{display:flex;align-items:center;gap:10px;font:700 26px Fredoka,sans-serif;text-decoration:none}
.hud{margin-left:auto;display:flex;align-items:center;gap:10px}
.coin{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:3px solid var(--ink);border-radius:999px;background:var(--paper);font:700 15px Fredoka,sans-serif}
.dock{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:40;display:flex;gap:6px;padding:8px;background:var(--paper);border:3px solid var(--ink);border-radius:999px;box-shadow:0 6px 0 var(--shadow);max-width:calc(100vw - 20px)}
.dock a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-width:62px;min-height:56px;padding:4px 8px;border-radius:999px;text-decoration:none;font:700 12px Fredoka,sans-serif;color:var(--mute)}
.dock a svg{width:26px;height:26px}
.dock a.on{background:var(--sun);color:var(--on);box-shadow:inset 0 0 0 3px var(--ink)}
.dock a:hover{background:var(--lilac);color:var(--on)}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 24px;border:3px solid var(--ink);border-radius:999px;background:var(--primary);color:var(--on);font:700 17px Fredoka,sans-serif;cursor:pointer;box-shadow:0 5px 0 var(--shadow);text-decoration:none;transition:transform .08s,box-shadow .08s;white-space:nowrap}
.btn:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--shadow)}.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--shadow)}
.btn.mint{background:var(--mint)}.btn.pink{background:var(--pink)}.btn.sky,.btn.lilac,.btn.ghost{background:var(--paper);color:var(--text)}
.btn.sm{min-height:46px;padding:0 18px;font-size:15px}.btn.block{width:100%}.btn[disabled]{opacity:.55;cursor:not-allowed;box-shadow:0 2px 0 var(--shadow);transform:none}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border:3px solid var(--ink);border-radius:999px;background:var(--paper);font:700 15px Fredoka,sans-serif;cursor:pointer}
.chip.on{background:var(--primary);color:var(--on);box-shadow:0 3px 0 var(--shadow)}
.tag{display:inline-flex;align-items:center;padding:1px 11px;border:2.5px solid var(--ink);border-radius:999px;background:var(--sun);color:var(--on);font:700 13px Fredoka,sans-serif}
.tag.mint{background:var(--mint)}.tag.pink{background:var(--pink)}.tag.sky{background:var(--sky)}.tag.lilac{background:var(--lilac)}
.card{background:var(--paper);border:3px solid var(--ink);border-radius:28px;padding:22px;box-shadow:0 6px 0 var(--shadow)}
.fld{width:100%;min-height:54px;padding:0 18px;border:3px solid var(--ink);border-radius:18px;background:var(--paper);color:var(--text);font:700 17px Nunito,sans-serif}
.fld::placeholder{color:var(--mute);font-weight:600}.lbl{display:block;margin:0 0 6px;font:700 15px Fredoka,sans-serif}
.help{font-size:14px;color:var(--mute);margin-top:6px;font-weight:600}
input[type=range]{width:100%;min-height:48px;accent-color:#7A4DFF;background:transparent}
.h1{font-size:clamp(40px,7vw,84px)}.h2{font-size:clamp(28px,3.6vw,42px)}.h3{font-size:23px}
.lead{font-size:clamp(17px,2vw,21px);color:var(--mute);max-width:52ch}
.page{padding:30px 0 20px}.sec{padding-top:44px}
.row{display:flex;flex-wrap:wrap;gap:24px}.grow{flex:1 1 340px;min-width:0}
.kv{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:2.5px dashed rgba(150,110,70,.35)}.kv:last-child{border:0}
.up{color:var(--good)}.down{color:var(--bad)}
/* pets */
.pet{display:block;width:100%;height:100%;overflow:visible}
.pet *{transform-box:fill-box}
.pet .rig{transform-origin:50% 100%;animation:breathe 3.4s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.025,.975)}}
.pet .blink{transform-origin:50% 50%;animation:blink 5s infinite}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.08)}}
.pet .eyes{transform:translate(var(--lx,0px),var(--ly,0px));transition:transform .1s}
.pet .head{transform-origin:50% 95%}
.pet .gill{transform-origin:100% 50%;animation:wig 2.2s ease-in-out infinite}.pet .gill.r{transform-origin:0 50%;animation-delay:-1.1s}
@keyframes wig{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
.pet .tail{transform-origin:0 50%}
.pet .wing.l{transform-origin:100% 20%}.pet .wing.r{transform-origin:0 20%}
.pet .ear.l{transform-origin:100% 100%}.pet .ear.r{transform-origin:0 100%}
.pet.is-happy .rig{animation:hop .7s cubic-bezier(.3,.7,.4,1) infinite}
@keyframes hop{0%,100%{transform:translateY(0) scale(1.06,.92)}45%{transform:translateY(-26px) scale(.95,1.06)}}
.pet.is-happy .shadow{animation:shad .7s infinite}@keyframes shad{0%,100%{transform:scale(1)}45%{transform:scale(.7);opacity:.08}}
.pet.is-happy .m-smile,.pet.is-eat .m-smile{opacity:0}.pet.is-happy .m-open{opacity:1}
.pet.is-happy .wing.l{animation:flapl .35s infinite}.pet.is-happy .wing.r{animation:flapr .35s infinite}
.pet.is-happy .gill{animation-duration:.6s}
.pet.is-happy .tail,.pet.is-eat .tail{animation:wag .28s ease-in-out infinite}
@keyframes wag{0%,100%{transform:rotate(-16deg)}50%{transform:rotate(16deg)}}
@keyframes flapl{0%,100%{transform:rotate(0)}50%{transform:rotate(-26deg)}}@keyframes flapr{0%,100%{transform:rotate(0)}50%{transform:rotate(26deg)}}
.pet.is-eat .m-open{opacity:1;transform-origin:50% 10%;animation:chew .3s ease-in-out infinite}
@keyframes chew{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
.pet.is-eat .head{animation:nod .3s ease-in-out infinite}@keyframes nod{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(5px) rotate(-3deg)}}
.pet.is-eat .cheek{transform-origin:50% 50%;animation:puff .3s ease-in-out infinite}@keyframes puff{0%,100%{transform:scale(1)}50%{transform:scale(1.28)}}
.pet.is-eat .m-tongue{opacity:1}.pet.is-eat .beak{transform-origin:50% 0;animation:peck .3s infinite}@keyframes peck{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.6)}}
.pet.is-walk .rig{animation:waddle .46s ease-in-out infinite}
@keyframes waddle{0%,100%{transform:rotate(-4deg) translateY(0)}50%{transform:rotate(4deg) translateY(-7px)}}
.pet.is-walk .leg.l{animation:stl .46s infinite}.pet.is-walk .leg.r{animation:str .46s infinite}
@keyframes stl{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes str{0%,100%{transform:translateY(-8px)}50%{transform:translateY(0)}}
.pet.is-jump .rig{animation:jump .65s cubic-bezier(.3,.7,.4,1)}
@keyframes jump{0%{transform:scale(1.15,.8)}30%{transform:translateY(-52px) scale(.9,1.12)}60%{transform:translateY(0) scale(1.12,.88)}100%{transform:scale(1)}}
.pet.is-jump .m-open{opacity:1}.pet.is-jump .m-smile{opacity:0}
.pet.is-sleep .blink{animation:none;transform:scaleY(.1)}.pet.is-sleep .rig{animation:snooze 3.8s ease-in-out infinite}
@keyframes snooze{0%,100%{transform:scale(1,.96) translateY(3px)}50%{transform:scale(1.03,.92) translateY(5px)}}
.pet.is-sad .m-smile{opacity:0}.pet.is-sad .m-sad{opacity:1}.pet.is-sad .eyes{transform:translate(var(--lx,0px),calc(var(--ly,0px) + 4px))}
.pet.is-sad .rig{animation:droop 3s ease-in-out infinite}@keyframes droop{0%,100%{transform:scale(1,.97)}50%{transform:scale(1.01,.94)}}
.float{position:absolute;pointer-events:none;z-index:6;font:700 18px Fredoka,sans-serif;animation:floatup 1.1s ease-out forwards;white-space:nowrap}
@keyframes floatup{from{transform:translateY(0) scale(.6);opacity:1}to{transform:translateY(-60px) scale(1.15);opacity:0}}
.heart{position:absolute;pointer-events:none;z-index:6;width:22px;height:20px;animation:floatup 1.2s ease-out forwards}
.bubble{position:absolute;z-index:7;pointer-events:none;padding:6px 12px;border:3px solid var(--ink);border-radius:16px;background:var(--paper);font:700 14px Fredoka,sans-serif;white-space:nowrap;animation:pop .25s ease-out}
@keyframes pop{from{transform:scale(.4)}to{transform:scale(1)}}
/* home yard */
#yard{position:relative;height:clamp(440px,66vh,600px);overflow:hidden;border-bottom:3px solid var(--ink);background:var(--sky);touch-action:manipulation;cursor:crosshair}
#yard .sun{position:absolute;right:9%;top:9%;width:84px;height:84px;border-radius:50%;background:var(--sun);border:3px solid var(--ink)}
#yard .cloud{position:absolute;width:120px;height:40px;border-radius:30px;background:var(--paper);border:3px solid var(--ink);animation:drift 50s linear infinite alternate}
@keyframes drift{from{transform:translateX(-40px)}to{transform:translateX(80px)}}
#yard .hill{position:absolute;left:-10%;right:-10%;border-radius:50% 50% 0 0/100% 100% 0 0;border:3px solid var(--ink);border-bottom:0}
#yard .grass{position:absolute;left:0;right:0;bottom:0;height:38%;background:var(--grass);border-top:3px solid var(--ink)}
#yard .fence{position:absolute;left:0;right:0;bottom:36%;height:34px;background:repeating-linear-gradient(90deg,var(--wood) 0 16px,transparent 16px 34px);border-top:3px solid var(--ink);opacity:.9}
.sign{position:absolute;left:clamp(12px,3vw,32px);top:clamp(12px,3vw,24px);z-index:5;max-width:min(280px,58%);padding:10px 16px 12px;background:var(--wood);border:3px solid var(--ink);border-radius:18px;box-shadow:0 5px 0 var(--shadow);color:#3B2A20}
.sign h1{font-size:clamp(26px,4vw,38px);color:#FFF5DF;-webkit-text-stroke:1.5px #3B2A20;paint-order:stroke fill}
.sign p{margin:4px 0 0;font-weight:700;font-size:clamp(12px,1.5vw,14px);line-height:1.3}
.btn.xs{min-height:38px;padding:0 14px;font-size:14px;border-width:2.5px;box-shadow:0 3px 0 var(--shadow)}
.walker{position:absolute;width:104px;height:104px;z-index:3;cursor:pointer;will-change:left,bottom}
.walker .pet{pointer-events:none}.walker .flip{width:100%;height:100%;transition:transform .15s}
.kib{position:absolute;z-index:2;width:16px;height:16px;border-radius:46% 54% 50% 50%;background:#C98A4B;border:2.5px solid var(--ink);animation:drop .4s cubic-bezier(.4,0,1,1) both}
@keyframes drop{from{transform:translateY(-300px)}to{transform:translateY(0)}}
.yardhud{position:absolute;right:14px;bottom:14px;z-index:8;display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.tip{position:absolute;left:14px;bottom:14px;z-index:4;padding:6px 14px;border:3px solid var(--ink);border-radius:999px;background:var(--paper);font:700 14px Fredoka,sans-serif;white-space:nowrap;pointer-events:none}
/* tickets */
.tickets{display:flex;gap:16px;overflow-x:auto;padding:8px 4px 18px;scroll-snap-type:x mandatory}
.ticket{position:relative;flex:0 0 230px;scroll-snap-align:start;padding:16px 16px 14px;border:3px solid var(--ink);border-radius:20px;background:var(--paper);box-shadow:0 5px 0 var(--shadow);text-decoration:none;display:flex;flex-direction:column;gap:8px}
.ticket:before,.ticket:after{content:"";position:absolute;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;background:var(--cream);border:3px solid var(--ink)}
.ticket:before{left:-13px}.ticket:after{right:-13px}
.ticket .pic{width:58px;height:58px;border:3px solid var(--ink);border-radius:50%;overflow:hidden;background:var(--sun)}
.meter{height:14px;border:3px solid var(--ink);border-radius:999px;background:var(--paper);overflow:hidden}.meter>i{display:block;height:100%;background:var(--mint);border-right:3px solid var(--ink);transition:width .4s}
/* strips and gallery */
.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.panelc{position:relative;padding:20px;border:3px solid var(--ink);border-radius:22px;background:var(--paper);box-shadow:0 6px 0 var(--shadow);min-height:260px;display:flex;flex-direction:column;justify-content:flex-end}
.panelc:nth-child(1){transform:rotate(-1.4deg)}.panelc:nth-child(3){transform:rotate(1.4deg)}
.panelc .say{position:absolute;top:14px;left:14px;right:14px;padding:10px 14px;border:3px solid var(--ink);border-radius:18px;background:var(--sun);color:var(--on);font:700 15px Fredoka,sans-serif}
.panelc .pp{width:130px;height:130px;margin:60px auto 0}
.gallery{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}
.gbtn{display:flex;flex-direction:column;align-items:center;gap:6px;width:150px;padding:12px 8px 12px;border:3px solid var(--ink);border-radius:26px;background:var(--paper);cursor:pointer;box-shadow:0 5px 0 var(--shadow);position:relative}
.gbtn .gp{width:104px;height:104px;pointer-events:none}.gbtn:hover{background:var(--sun);color:var(--on)}
/* shop */
.shelf{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px;padding:0 6px 22px;margin-top:30px}
.shelf:after{content:"";position:absolute;left:-8px;right:-8px;bottom:0;height:22px;background:var(--wood);border:3px solid var(--ink);border-radius:8px}
.toybox{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 12px 12px;border:3px solid var(--ink);border-radius:20px 20px 8px 8px;background:var(--bgc,var(--paper));color:var(--on);text-decoration:none;box-shadow:0 5px 0 var(--shadow);transition:transform .15s}
.toybox:hover{transform:translateY(-8px) rotate(-1deg)}.toybox .tp{width:124px;height:124px}
.toybox:hover .pet .rig{animation:hop .7s cubic-bezier(.3,.7,.4,1) infinite}
.pricetag{align-self:stretch;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 12px;border:3px dashed var(--ink);border-radius:14px;background:var(--paper);color:var(--text);font:700 15px Fredoka,sans-serif}
/* profile */
.pstage{position:relative;display:flex;align-items:flex-end;justify-content:center;min-height:300px;border:3px solid var(--ink);border-radius:32px;box-shadow:0 6px 0 var(--shadow);overflow:hidden;background:var(--bgc)}
.pstage .ground{position:absolute;left:0;right:0;bottom:0;height:34%;background:var(--grass);border-top:3px solid var(--ink)}
.pstage .big{position:relative;z-index:2;width:min(260px,64%);height:260px;margin-bottom:14px;cursor:pointer}
.stat{display:flex;align-items:center;gap:12px;padding:12px 14px;border:3px solid var(--ink);border-radius:18px;background:var(--paper)}
.stat b{font:700 22px Fredoka,sans-serif}
.chartbox{border:3px solid var(--ink);border-radius:24px;background:var(--paper);padding:14px;box-shadow:0 5px 0 var(--shadow)}
/* zoo */
.habs{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:26px;margin-top:22px}
.hab{position:relative;display:flex;flex-direction:column;gap:12px;padding:16px;border:3px solid var(--ink);border-radius:30px;background:var(--paper);box-shadow:0 7px 0 var(--shadow)}
.hab:nth-child(even){transform:translateY(14px)}
.hab.full{animation:wob 1s ease-in-out infinite}@keyframes wob{0%,100%{transform:rotate(0)}25%{transform:rotate(-.8deg)}75%{transform:rotate(.8deg)}}
.hab .top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.scene{position:relative;height:208px;border:3px solid var(--ink);border-radius:22px;overflow:hidden;background:var(--sc,var(--sky))}
.scene .floor{position:absolute;left:0;right:0;bottom:0;height:36%;background:var(--fl,var(--grass));border-top:3px solid var(--ink)}
.scene .deco{position:absolute;inset:0;width:100%;height:100%}
.scene .pw{position:absolute;left:50%;bottom:34px;width:136px;height:136px;margin-left:-68px;z-index:2;cursor:pointer}
.scene .bw{position:absolute;left:50%;bottom:6px;width:136px;margin-left:-68px;z-index:3;pointer-events:none}
.zzz{position:absolute;left:58%;top:18px;z-index:4;font:700 22px Fredoka,sans-serif;animation:zz 2.4s ease-in-out infinite}
@keyframes zz{0%{transform:translate(0,10px) scale(.6);opacity:0}30%{opacity:1}100%{transform:translate(18px,-18px) scale(1.2);opacity:0}}
.ringbox{position:absolute;right:10px;top:10px;z-index:5;width:56px;height:56px}
.paws{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.paw{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;border:2.5px dashed var(--ink);font:700 11px Fredoka,sans-serif;color:var(--mute)}
.paw.f{border-style:solid;color:#3B2A20}.paw.me{outline:4px solid var(--sun);outline-offset:1px;font-weight:700}
.machine{position:absolute;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;background:var(--sc,var(--sky))}
.machine svg{width:170px;height:190px}.ball{animation:tumble .7s ease-in-out infinite alternate}
@keyframes tumble{from{transform:translate(-5px,3px)}to{transform:translate(6px,-6px)}}
.knob{transform-origin:50% 50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.reveal{position:absolute;inset:0;z-index:8;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;background:rgba(59,42,32,.82);color:#fff;padding:10px;animation:pop .3s ease-out}
.reveal .cap{position:relative;width:78px;height:78px}
.reveal .ct,.reveal .cb{position:absolute;left:0;width:78px;height:39px;border:3px solid #3B2A20;background:var(--pink)}
.reveal .ct{top:0;border-radius:39px 39px 0 0;animation:ctop .7s ease-out forwards}.reveal .cb{bottom:0;border-radius:0 0 39px 39px;background:#fff;animation:cbot .7s ease-out forwards}
@keyframes ctop{to{transform:translate(-28px,-26px) rotate(-28deg)}}@keyframes cbot{to{transform:translate(28px,20px) rotate(24deg)}}
.reveal .face{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;border:3px solid #3B2A20;display:flex;align-items:center;justify-content:center;font:700 14px Fredoka,sans-serif;color:#3B2A20;animation:pop .6s .3s both}
.confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none}.confetti i{position:absolute;top:-14px;width:10px;height:14px;border-radius:3px;animation:fall var(--d) ease-in var(--dl) forwards}
@keyframes fall{to{transform:translate(var(--x),330px) rotate(540deg);opacity:0}}
.fly{position:fixed;z-index:90;width:20px;height:20px;border-radius:46% 54% 50% 50%;background:#C98A4B;border:3px solid #3B2A20;pointer-events:none}
.mailbox li,.board li{list-style:none}
.board{background:#2F5B4C;color:#F4FFF8;border:3px solid var(--ink);border-radius:22px;padding:18px;box-shadow:0 6px 0 var(--shadow)}
.board h2{color:#F4FFF8}.board .rowi{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:2px dashed rgba(244,255,248,.35);font-weight:700}
.board .rowi:last-child{border:0}
/* hatch */
.eggs{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:12px;margin-top:12px}
.eggb{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px 10px;border:3px solid var(--ink);border-radius:22px;background:var(--paper);cursor:pointer}
.eggb svg{width:64px;height:80px}.eggb.on{background:var(--sun);color:var(--on);box-shadow:0 4px 0 var(--shadow)}.eggb.on svg{animation:eggwob .6s ease-in-out infinite}
@keyframes eggwob{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
.payopt{display:flex;flex-direction:column;align-items:flex-start;gap:8px;flex:1 1 250px;padding:18px;border:3px solid var(--ink);border-radius:26px;background:var(--paper);cursor:pointer;text-align:left}
.payopt.on{background:var(--mint);color:var(--on);box-shadow:0 5px 0 var(--shadow)}.payopt .faces{display:flex;gap:2px;height:64px}.payopt .faces>span{width:64px;height:64px;display:block}
.stepper{display:flex;gap:8px;flex-wrap:wrap;margin:22px 0}
.sdot{display:flex;align-items:center;gap:8px;min-height:46px;padding:0 16px 0 6px;border:3px solid var(--ink);border-radius:999px;background:var(--paper);font:700 15px Fredoka,sans-serif;cursor:pointer}
.sdot b{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--cream);border:2.5px solid var(--ink)}
.sdot.on{background:var(--lilac);color:var(--on)}.sdot.done b{background:var(--mint);color:var(--on)}
.hatchwrap{display:flex;flex-direction:column;align-items:center;gap:10px;min-height:220px}
.egg-big{width:130px;height:160px;animation:shake .25s infinite}.egg-big.crack path.cr{opacity:1}
@keyframes shake{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
/* handbook */
.book{display:flex;flex-wrap:wrap;gap:0;margin-top:22px;border:3px solid var(--ink);border-radius:26px;overflow:hidden;box-shadow:0 7px 0 var(--shadow);background:var(--paper)}
.marks{display:flex;flex-direction:column;flex:0 0 190px;background:var(--lilac);border-right:3px solid var(--ink)}
.marks button{min-height:54px;padding:0 16px;border:0;border-bottom:3px solid var(--ink);background:transparent;color:var(--on);font:700 16px Fredoka,sans-serif;text-align:left;cursor:pointer}
.marks button.on{background:var(--sun)}.marks button:last-child{border-bottom:0}
.leaf{flex:1 1 380px;min-width:0;padding:30px clamp(20px,4vw,44px);background-image:repeating-linear-gradient(transparent 0 33px,rgba(150,110,70,.18) 33px 35px);line-height:35px}
.leaf h2{margin-bottom:8px;line-height:1.1}.leaf p,.leaf li{max-width:60ch}
table.t{width:100%;border-collapse:collapse;line-height:1.3}table.t th,table.t td{padding:8px 6px;border-bottom:2.5px dashed rgba(150,110,70,.4);text-align:left}
/* modal and toast */
.modal{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(59,42,32,.6)}
.modal .box{max-width:480px;width:100%;padding:26px;border:3px solid var(--ink);border-radius:30px;background:var(--paper);box-shadow:0 8px 0 var(--shadow);max-height:92vh;overflow:auto}
.toast{position:fixed;left:50%;bottom:calc(112px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:95;max-width:calc(100vw - 28px);padding:12px 20px;border:3px solid var(--ink);border-radius:999px;background:var(--sun);color:var(--on);font:700 16px Fredoka,sans-serif;box-shadow:0 5px 0 var(--shadow);animation:pop .2s ease-out}
.foot{padding:26px 0 8px;color:var(--mute);font-size:14px}
@media (max-width:640px){.hab:nth-child(even){transform:none}.marks{flex:1 1 100%;flex-direction:row;overflow-x:auto;border-right:0;border-bottom:3px solid var(--ink)}.marks button{flex:none;border-bottom:0;border-right:3px solid var(--ink)}.dock a{min-width:54px;font-size:11px}}

/* token lists */
.tlist{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.thead,.trow{display:grid;grid-template-columns:34px 56px minmax(0,1fr) 110px 84px 56px 96px;align-items:center;gap:12px}
.thead{padding:0 16px;font:700 13px Fredoka,sans-serif;color:var(--mute)}
.trow{padding:10px 16px;border:3px solid var(--ink);border-radius:20px;background:var(--paper);text-decoration:none;box-shadow:0 4px 0 var(--shadow);transition:transform .12s}
.trow:hover{transform:translateY(-3px)}
.trow .tpic{width:52px;height:52px;border:3px solid var(--ink);border-radius:50%;overflow:hidden;display:block;padding:4px 4px 0}
.tinfo{display:flex;flex-direction:column;min-width:0}.tinfo b{font:700 18px Fredoka,sans-serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tinfo .tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:2px}.tnum{display:contents}.trow .tm,.trow .tc{font:700 17px Fredoka,sans-serif}
@media (max-width:700px){.thead{display:none}.trow{grid-template-columns:26px 48px minmax(0,1fr) auto;padding:10px 12px;gap:10px}.trow .ta,.trow .tsp{display:none}.tnum{display:flex;flex-direction:column;align-items:flex-end}}
/* official token card */
.official{display:flex;flex-wrap:wrap;gap:22px;align-items:center}
.opic{width:150px;height:150px;border:3px solid var(--ink);border-radius:32px;flex:none;padding:12px 12px 0;overflow:hidden}
.obody{flex:1 1 300px;min-width:0}.ca{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px}
.ostats{display:flex;gap:20px;flex-wrap:wrap;margin-top:12px}.ostats>span{display:flex;flex-direction:column;font-size:13px}.ostats b{font:700 21px Fredoka,sans-serif}
.oact{display:flex;flex-direction:column;gap:10px;flex:0 0 auto}
.sechead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* shims for the trade, rewards and edit panels */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.err{color:var(--bad);font-weight:700;font-size:14px;margin-top:6px}
.panel{background:var(--paper);border:3px solid var(--ink);border-radius:28px;padding:22px;box-shadow:0 6px 0 var(--shadow)}
.panel.flat{box-shadow:none}.h3{font-size:23px}
.btn.pri{background:var(--primary)}
.chartbox{border:3px solid var(--ink);border-radius:24px;background:var(--paper);padding:14px;box-shadow:0 5px 0 var(--shadow)}
textarea.fld{padding:12px 18px;min-height:90px;resize:vertical}
.up{color:var(--good)}.down{color:var(--bad)}
.skel{background:var(--cream);border-radius:12px}

/* images never exceed their box; a logo can never stretch the page */
img{max-width:100%}
.mas{display:block}.mas img{display:block;width:100%;height:100%;object-fit:cover}
html{overflow-x:hidden} /* html only: a scrolling body would stop the sticky header from sticking */
/* header on phones */
.bar .wrap{min-width:0}
.logo{min-width:0;flex:0 1 auto}
.logo svg{flex:none}
@media (max-width:520px){
  .bar .wrap{gap:8px}
  .logo{font-size:22px;gap:6px}
  .logo svg{width:32px;height:32px}
  .hud{gap:6px}
  .hud .wide{display:none}
  .hud .btn.sm{padding:0 14px;min-height:44px}
  .hud .chip{width:42px !important;min-height:44px}
}
@media (max-width:360px){ .logo{font-size:19px} .hud .btn.sm{padding:0 10px} }