:root{--ink: #2b2440;--paper: #fffaf3;--accent: #ff5db1;font-family:Nunito,Avenir Next,Segoe UI,system-ui,sans-serif;color:var(--ink)}*{box-sizing:border-box}html,body,#root{margin:0;height:100%;overflow:hidden;background:#bfe9ff}canvas{display:block}button{font:inherit;cursor:pointer}.screen{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));overflow:auto;background:radial-gradient(circle at 30% 20%,#ffe3f1,#bfe9ff 60%,#c8ffd9)}.screen.start{align-items:start}.start-layout{display:grid;grid-template-columns:minmax(0,760px) auto;gap:16px;align-items:start;justify-content:center;width:100%;max-width:1100px}.start-side{position:sticky;top:12px;margin-top:12px;width:300px}.start-side:empty{display:none}.start-side .friends{background:var(--paper);border:4px solid var(--ink);border-radius:22px;box-shadow:8px 8px 0 var(--ink);padding:16px 18px;margin:0}.start-side .friends:empty{display:none}@media (max-width: 1100px){.start-layout{grid-template-columns:minmax(0,1fr)}.start-side{position:static}.start-side .friends{margin:0 auto 12px;width:min(760px,100%)}}.card{width:min(760px,100%);background:var(--paper);border:4px solid var(--ink);border-radius:28px;box-shadow:10px 10px 0 var(--ink);padding:22px 26px;margin:12px auto}.card h1{font-size:44px;margin:0;letter-spacing:2px}.card h2{font-size:34px;margin:0}.tag{margin:2px 0 14px;opacity:.7;font-weight:700}section{margin:12px 0}section label{display:block;font-weight:800;text-transform:uppercase;font-size:12px;letter-spacing:1.5px;opacity:.7;margin-bottom:6px}section input[type=text],section input:not([type]){font:inherit;font-size:18px;font-weight:800;padding:8px 12px;border:3px solid var(--ink);border-radius:12px;background:#fff;width:240px}.row{display:grid;grid-template-columns:1fr 1fr;gap:16px}@media (max-width: 640px){.row{grid-template-columns:1fr}}.grid{display:flex;flex-wrap:wrap;gap:8px}.grid button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:8px 12px;border:3px solid var(--ink);border-radius:14px;background:#fff;font-weight:800;box-shadow:3px 3px 0 var(--ink);transition:transform .08s}.grid button:hover{transform:translate(-1px,-1px)}.grid button.sel{background:#fff0b3;box-shadow:1px 1px 0 var(--ink);transform:translate(2px,2px)}.grid button small{font-weight:600;opacity:.65;font-size:11px}.grid.breeds button{flex-direction:row;align-items:center;gap:8px}.swatch{width:18px;height:18px;border-radius:50%;border:2px solid var(--ink);display:inline-block}.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:4px 14px;margin-top:10px}.stat{display:flex;justify-content:space-between;font-size:13px;font-weight:700;text-transform:capitalize}.stat i{font-style:normal;letter-spacing:1px;color:var(--accent)}.ability{margin:6px 0 0;font-size:14px}.colors{display:flex;flex-wrap:wrap;gap:8px}.colors button{width:32px;height:32px;border-radius:50%;border:3px solid var(--ink);box-shadow:2px 2px 0 var(--ink)}.colors button.sel{outline:4px solid #fff;outline-offset:-7px;transform:scale(1.15)}.check{display:flex!important;align-items:center;gap:8px;text-transform:none!important;letter-spacing:0!important;font-size:13px!important;margin-top:10px;opacity:1!important}.actions{display:flex;gap:12px;margin-top:18px;flex-wrap:wrap}.primary{font-size:20px;font-weight:900;padding:12px 26px;border:4px solid var(--ink);border-radius:18px;background:var(--accent);color:#fff;box-shadow:5px 5px 0 var(--ink)}.primary:hover{transform:translate(-1px,-1px);box-shadow:6px 6px 0 var(--ink)}.primary:disabled{opacity:.45;transform:none;box-shadow:5px 5px 0 var(--ink);cursor:default}.walk-gate{flex:1 1 100%}.walk-gate .excuse{font-size:15px;line-height:1.55;margin:12px 0 0;font-style:italic}.walk-slot{margin-top:6px}.ghost{font-weight:800;padding:12px 18px;border:3px solid var(--ink);border-radius:18px;background:transparent}.help{font-size:13px;opacity:.7;margin-top:14px;line-height:1.6}kbd{background:#fff;border:2px solid var(--ink);border-radius:6px;padding:0 5px;font-weight:800;font-family:inherit}.summary .big{font-size:56px;font-weight:900;margin:8px 0 0}.summary ul{padding-left:20px;line-height:1.8}.good{color:#1f9d55;font-weight:800}.bad{color:#e03131;font-weight:800}.hud{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;display:flex;flex-direction:column;padding:max(10px,env(safe-area-inset-top)) 12px max(10px,env(safe-area-inset-bottom))}.hud .top{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.pill{background:var(--paper);border:3px solid var(--ink);border-radius:18px;padding:6px 14px;box-shadow:3px 3px 0 var(--ink);display:flex;flex-direction:column;align-items:center;min-width:110px}.pill b{font-size:18px}.pill small{font-size:11px;opacity:.7;font-weight:700}.pill.score{border-width:4px}.meters{position:absolute;left:12px;top:90px;width:min(230px,45vw);display:flex;flex-direction:column;gap:6px}.bar{background:var(--paper);border:3px solid var(--ink);border-radius:12px;padding:4px 8px;box-shadow:3px 3px 0 var(--ink)}.bar span{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:1px}.track{height:10px;background:#eadfd3;border-radius:6px;overflow:hidden;margin-top:2px}.fill{height:100%;transition:width .1s linear;border-radius:6px}.bar.pulse{animation:pulse .6s infinite alternate}@keyframes pulse{0%{transform:scale(1)}to{transform:scale(1.03)}}.sniffing{font-weight:900;font-style:italic;color:var(--ink);background:#fff;border:3px solid var(--ink);border-radius:12px;padding:4px 10px;animation:wiggle .25s infinite alternate}@keyframes wiggle{0%{transform:rotate(-2deg)}to{transform:rotate(2deg)}}.context{position:absolute;right:12px;top:90px;display:flex;flex-direction:column;align-items:flex-end;gap:6px}.hint{background:var(--paper);border:3px solid var(--ink);border-radius:12px;padding:4px 10px;font-size:13px;font-weight:800;box-shadow:3px 3px 0 var(--ink)}.hint.post{background:#fff0b3}.hint.bad{background:#ffd6d6}.hint.buff{background:#d9f7ff}.toasts{position:absolute;left:50%;bottom:150px;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;width:min(520px,92vw)}.toast{background:var(--paper);border:3px solid var(--ink);border-radius:14px;padding:6px 14px;font-weight:800;box-shadow:3px 3px 0 var(--ink);animation:pop .25s ease-out;text-align:center}.toast.good{background:#d9ffe3}.toast.bad{background:#ffd6d6}@keyframes pop{0%{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}.encounter{pointer-events:auto;position:absolute;left:50%;top:32%;transform:translate(-50%);background:var(--paper);border:4px solid var(--ink);border-radius:22px;padding:14px 18px;box-shadow:6px 6px 0 var(--ink);text-align:center;width:min(460px,92vw)}.encounter h3{margin:0 0 4px}.encounter p{margin:0 0 10px}.choices{display:flex;gap:8px}.choices button{flex:1;display:flex;flex-direction:column;padding:8px;border:3px solid var(--ink);border-radius:14px;background:#fff;box-shadow:3px 3px 0 var(--ink)}.choices button small{font-weight:600;font-size:11px;opacity:.7}.controls{margin-top:auto;display:flex;justify-content:space-between;align-items:flex-end;pointer-events:none}.buttons{pointer-events:auto;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-left:auto}.hold{width:92px;height:64px;border:3px solid var(--ink);border-radius:18px;background:var(--paper);box-shadow:3px 3px 0 var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;user-select:none;-webkit-user-select:none;touch-action:none}.hold small{font-size:10px;opacity:.7;font-weight:700}.hold{position:relative;overflow:hidden}.hold .wipe{position:absolute;top:-40%;right:-40%;bottom:-40%;left:-40%;border-radius:50%;pointer-events:none}.hold.recharging b,.hold.recharging small{position:relative;opacity:.55}.hold.ability.on{background:#e6e0ff}.hold.pee{background:#ffe3f1;width:110px;height:80px}.hold.pee.on,.hold.sniff.on{background:#fff0b3;transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}.hold.ability{background:#e9ddff}.hold.ability:not(.on){opacity:.55}.joystick{pointer-events:auto;width:130px;height:130px;border-radius:50%;border:3px solid var(--ink);background:#fffaf399;position:relative;touch-action:none}.knob{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;background:var(--paper);border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}@media (pointer: fine){.hold{width:84px;height:56px}.hold.pee{width:100px;height:70px}}.pill.end{pointer-events:auto;background:#ffe3e3;cursor:pointer}.pill.end:hover{background:#ffd0d0}.side-right{position:absolute;right:12px;top:90px;display:flex;flex-direction:column;align-items:flex-end;gap:8px}.context{top:auto;bottom:200px}.minimap{pointer-events:auto;background:var(--paper);border:3px solid var(--ink);border-radius:14px;padding:4px;box-shadow:3px 3px 0 var(--ink);touch-action:none;display:flex;flex-direction:column;align-items:center;gap:2px}.minimap canvas{display:block;border-radius:8px;image-rendering:auto}.minimap small{font-size:10px;font-weight:800;opacity:.7}.minimap-bar{display:flex;align-items:center;gap:6px}.minimap-bar button{width:20px;height:20px;border-radius:6px;border:2px solid var(--ink);background:#fff;font:inherit;font-weight:900;font-size:13px;line-height:1;padding:0;cursor:pointer}.minimap-bar button:disabled{opacity:.3;cursor:default}.minimap canvas{cursor:zoom-in}.minimap.big canvas{cursor:zoom-out}.minimap.big{position:fixed;right:50%;top:50%;transform:translate(50%,-50%);z-index:5}.minimap.big canvas{max-width:min(86vw,86vh);max-height:min(86vw,86vh);width:auto;height:auto}.zoom{pointer-events:auto;display:flex;flex-direction:column;gap:6px}.zoom button{width:40px;height:40px;border:3px solid var(--ink);border-radius:12px;background:var(--paper);box-shadow:3px 3px 0 var(--ink);font-size:22px;font-weight:900;line-height:1}.bar.ring{background:#fff6e8}.bar.ring.owned{background:#e2ffe9}.bar.ring em{display:block;font-size:11px;font-weight:700;font-style:normal;opacity:.75;margin-top:2px}.bar.ring .track{position:relative}.bar.ring .goal{position:absolute;left:75%;top:-2px;bottom:-2px;width:2px;background:var(--ink)}@media (max-width: 700px){.minimap canvas{width:150px;height:auto}.minimap.big canvas{width:90vw}}.preview-wrap{position:relative;margin:4px 0 10px}.preview{height:240px;border:3px solid var(--ink);border-radius:18px;background:linear-gradient(180deg,#bfe9ff,#e9ffe3);box-shadow:4px 4px 0 var(--ink);overflow:hidden}.preview canvas{width:100%!important;height:100%!important}.preview{cursor:grab}.preview.grabbing{cursor:grabbing}.preview-hint{position:absolute;right:12px;bottom:8px;font-size:11px;font-weight:800;opacity:.55;pointer-events:none}.preview.closeup{position:fixed;top:0;right:0;bottom:0;left:0;height:auto;border:0;border-radius:0;box-shadow:none}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#2b244059;display:grid;place-items:center;z-index:20;pointer-events:auto;animation:fade .15s ease-out}@keyframes fade{0%{opacity:0}to{opacity:1}}.modal{position:relative;width:min(420px,90vw);background:var(--paper);border:4px solid var(--ink);border-radius:24px;box-shadow:8px 8px 0 var(--ink);padding:22px 24px 18px;animation:pop .2s ease-out}.modal.bad{background:#fff3f3}.modal h3{margin:0 0 6px;font-size:24px}.modal p{margin:0 0 14px;line-height:1.5;font-weight:600}.modal .actions{margin-top:6px}.modal-ear{position:absolute;top:-22px;left:26px;width:28px;height:34px;background:var(--paper);border:4px solid var(--ink);border-bottom:0;border-radius:14px 14px 0 0;transform:rotate(-12deg)}.hint.legendary{background:linear-gradient(90deg,#fff0b3,#ffd166);animation:pulse .5s infinite alternate}.hint.water{background:#d9f7ff}.banner{align-self:flex-start;padding:6px 14px;border:3px solid var(--ink);border-radius:12px;background:#fff0b3;font-weight:900;letter-spacing:.04em;box-shadow:3px 3px 0 var(--ink);animation:pulse .4s infinite alternate}@media (pointer: coarse),(max-width: 900px){.hud{padding:max(6px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}.hud .top{gap:6px;flex-wrap:nowrap;justify-content:space-between}.pill{min-width:0;padding:3px 10px;border-width:2px;border-radius:12px;box-shadow:2px 2px 0 var(--ink)}.pill b{font-size:14px}.pill small{font-size:9px}.pill.name{display:none}.pill.score{border-width:3px}.meters{top:54px;left:max(8px,env(safe-area-inset-left));width:136px;gap:4px}.bar{padding:2px 6px;border-width:2px;border-radius:9px;box-shadow:2px 2px 0 var(--ink)}.bar span{font-size:9px;letter-spacing:.5px}.bar span .detail{display:none}.track{height:7px}.bar.ring{position:absolute;left:50%;translate:-50% 0;top:0;width:150px}.bar.ring em{display:none}.meters .bar.ring{position:fixed;top:54px}.banner{position:fixed;left:50%;top:160px;translate:-50% 0;transform:none;font-size:12px;padding:4px 10px;width:max-content;max-width:70vw;text-align:center}.sniffing{position:fixed;left:50%;top:196px;translate:-50% 0;font-size:13px}.side-right{top:54px;right:max(8px,env(safe-area-inset-right));gap:6px}.minimap canvas{width:118px!important;height:auto}.minimap small,.zoom{display:none}.toasts{top:196px;bottom:auto;width:min(360px,80vw);gap:4px}.toast{font-size:12px;padding:4px 10px;border-width:2px;border-radius:10px}.toast:nth-child(n+3){display:none}.context{position:fixed;left:50%;transform:translate(-50%);right:auto;bottom:calc(max(8px,env(safe-area-inset-bottom)) + 128px);flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px;width:92vw}.hint{font-size:11px;padding:3px 8px;border-width:2px;border-radius:9px}.hint.buff:nth-of-type(n+4){display:none}.controls{align-items:flex-end}.buttons{gap:6px}.hold{width:74px;height:54px;border-width:2px;border-radius:14px}.hold.pee{width:84px;height:66px}.hold b{font-size:13px}.joystick{width:112px;height:112px}.knob{width:46px;height:46px;margin:-23px 0 0 -23px}.encounter{top:18%;padding:10px 12px}.encounter h3{font-size:16px}}@media (pointer: coarse) and (orientation: landscape),(max-height: 480px){.meters{top:50px;width:120px}.meters .bar.ring{top:50px}.banner{top:86px}.toasts{top:120px;width:min(340px,40vw)}.side-right{top:50px}.minimap canvas{width:88px!important}.context{bottom:calc(max(8px,env(safe-area-inset-bottom)) + 118px);width:50vw}.joystick{width:100px;height:100px}}.account{margin-top:10px}.account-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.account input{flex:1;min-width:180px;padding:8px 12px;border:3px solid var(--ink);border-radius:12px;font:inherit;font-weight:700;background:#fff}.account .small{padding:8px 14px;font-size:14px}button.apple{display:inline-flex;align-items:center;gap:8px;background:#000;color:#fff;border:3px solid #000;border-radius:12px;padding:10px 18px;font:inherit;font-weight:700;cursor:pointer}button.apple:hover{background:#222}button.apple span{font-size:1.15em;line-height:1}.chip{padding:5px 10px;border:2px solid var(--ink);border-radius:10px;background:#fff;font-size:12px;font-weight:800}.chip.ok{background:#d9ffe3}.help.good{color:#1d7a3b}.help.bad{color:#b3261e}.link{background:none;border:0;padding:0;font:inherit;font-weight:800;text-decoration:underline;color:inherit}.tutorial .steps{text-align:center;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:#8a8577;margin:.2rem 0 .6rem}.tutorial h2{margin:.2rem 0 .8rem;font-size:1.15rem}.tutorial .warn{background:#fff3d6;border:1px solid #ecd9a0;border-radius:10px;padding:.7rem .9rem;font-size:.9rem;line-height:1.45}.tutorial .err{color:#b03a2e;font-size:.85rem}.locked-dog .locked-line{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin:.3rem 0}.swatch.inline{display:inline-block;width:.85rem;height:.85rem;border-radius:50%;margin:0 .15rem;vertical-align:-.1rem}.locked-dog small{color:#8a8577}.leaderboard{margin:10px 0 4px}.leaderboard .lb-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.leaderboard .tabs button{padding:4px 10px;font-size:12px;border-radius:10px;border:2px solid var(--ink);background:#fff;font:inherit;font-weight:800;margin-left:4px;cursor:pointer}.leaderboard .tabs button.sel{background:var(--ink);color:#fff}.leaderboard ol{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:3px}.leaderboard li{display:grid;grid-template-columns:22px 16px auto 1fr auto;align-items:center;gap:8px;padding:4px 8px;border-radius:10px;background:#0000000a;font-size:13px}.leaderboard li.me{background:#ff5db12e;outline:2px solid var(--ink)}.leaderboard li.npc{opacity:.7}.leaderboard .rank{font-weight:900;opacity:.6}.leaderboard small{opacity:.7}.leaderboard .m2{font-weight:800;white-space:nowrap}.friends{margin:10px 0 0}.friends .lb-head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}.friends .lb-head button{white-space:nowrap}.friends ul{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:3px}.friends .row-tools{display:flex;gap:8px;font-size:12px}.friends li{display:grid;grid-template-columns:10px 16px auto 1fr auto;align-items:center;gap:8px;padding:4px 8px;border-radius:10px;background:#0000000a;font-size:13px}.friends .dot{width:10px;height:10px;border-radius:50%;background:#c9c3d6}.friends .dot.on{background:#3ddc84;box-shadow:0 0 0 3px #3ddc8440}.friends small{opacity:.7}.friends .invite-link code{font-size:11px;word-break:break-all}.enc-tools{margin:6px 0 0;font-size:12px;opacity:.7;text-align:center}button.link{background:none;border:none;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}.onboard{position:fixed;left:50%;bottom:150px;translate:-50% 0;z-index:6;pointer-events:none;width:min(440px,92vw)}.onboard-card{pointer-events:auto;background:var(--paper);border:3px solid var(--ink);border-radius:16px;padding:10px 14px 12px;box-shadow:4px 4px 0 var(--ink);animation:onboard-in .35s ease-out}@keyframes onboard-in{0%{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}.onboard-head{display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;opacity:.7}.onboard-card h3{margin:4px 0 2px;font-size:18px}.onboard-card p{margin:0;font-size:14px;line-height:1.35}.onboard-dots{display:flex;gap:4px;margin-top:8px}.onboard-dots i{flex:1;height:4px;border-radius:2px;background:#0000001f}.onboard-dots i.done{background:var(--ink)}.onboard-dots i.now{background:#ff5db1}@media (max-width: 700px){.onboard{bottom:190px}.onboard-card h3{font-size:16px}.onboard-card p{font-size:13px}}@media (max-height: 460px){.onboard{bottom:auto;top:60px;width:min(380px,60vw)}}