:root{--pond:#E3EEE6;--line:#A9C7B9;--ink:#1E2A2A;--sub:#4E6B61;--gold:#E0A526;--rare:#5498C8}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--pond);color:var(--ink);font:400 15px/1.5 Geist,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
button,input{font:inherit;color:inherit}button{cursor:pointer;background:none;border:0}
a{color:inherit}
.hidden{display:none!important}
.mono{font-family:'Geist Mono',ui-monospace,monospace}

/* мир-пруд */
.viewport{position:fixed;inset:0;overflow:hidden;cursor:grab;touch-action:none}
.viewport.drag{cursor:grabbing}
.world{position:absolute;left:0;top:0;will-change:transform}
.water{position:absolute;inset:0;margin:0;font:13px/15px 'Geist Mono',monospace;color:var(--line);white-space:pre;overflow:hidden;user-select:none;animation:tide 14s ease-in-out infinite alternate}
@keyframes tide{to{transform:translateX(-18px)}}
.duck{position:absolute;display:flex;flex-direction:column;align-items:center;transition:opacity .3s,filter .3s}
.duck .body{animation:bob var(--d) ease-in-out infinite alternate;animation-delay:var(--dl)}
.duck svg{display:block;width:100%;height:100%}
.duck .rip{width:70%;height:8px;margin-top:-6px;border-radius:50%;border:2px solid #7FB7A3;opacity:.55}
.duck .tag{margin-top:4px;padding:1px 7px;border-radius:99px;background:#ffffffb8;font:500 11px 'Geist Mono';white-space:nowrap;max-width:120px;overflow:hidden;text-overflow:ellipsis}
.duck.rare .tag{background:#DDEFFB;color:#23577F}
.duck.legendary .tag{background:#FFF1BF;color:#7A5306;font-weight:600}
.duck.legendary .body{filter:drop-shadow(0 0 10px #F7C94899) drop-shadow(0 0 2px #F7C948)}
.duck.dim{opacity:.12;filter:grayscale(1)}
.duck.hi .body{filter:drop-shadow(0 0 0 #fff) drop-shadow(0 0 12px #1E2A2A55)}
.duck:hover .body{transform:scale(1.08)}
@keyframes bob{from{transform:translateY(0) rotate(-2deg)}to{transform:translateY(-6px) rotate(2deg)}}

/* интерфейс поверх пруда */
.hud{position:fixed;left:24px;top:22px;max-width:380px;padding:20px 22px;border-radius:18px;background:#F7FBF8ee;border:1px solid #1E2A2A14;box-shadow:0 20px 40px -24px #1E2A2A55;z-index:5}
.hud h1{margin:0;font:400 64px/.95 'Instrument Serif',serif;letter-spacing:-.02em}
.hud h1 i{color:var(--gold)}
.hud p{margin:10px 0 0;color:var(--sub);font-size:14px}
.counts{margin-top:12px;font-size:12px;color:var(--sub);line-height:1.7}.counts b{color:var(--ink);font-weight:600}
.chips{display:flex;gap:6px;margin-top:12px}
.chips button{padding:6px 12px;border-radius:99px;border:1px solid #1E2A2A22;font:500 12px 'Geist Mono'}
.chips button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.topr{position:fixed;right:24px;top:22px;display:flex;gap:8px;align-items:center;z-index:5}
.find{display:flex;background:#F7FBF8ee;border:1px solid #1E2A2A22;border-radius:12px;overflow:hidden}
.find input{width:280px;border:0;outline:0;background:none;padding:10px 12px;font:500 13px 'Geist Mono'}
.find button{padding:0 14px;font-weight:600;border-left:1px solid #1E2A2A22}
.pill{height:40px;padding:0 14px;border-radius:12px;background:#F7FBF8ee;border:1px solid #1E2A2A22;font-weight:600;font-size:13px;white-space:nowrap}
.pill.dark{background:var(--ink);color:#fff;border-color:var(--ink)}

/* карточка утёнка */
.card{position:fixed;right:24px;top:84px;width:340px;max-height:calc(100vh - 110px);overflow:auto;padding:20px;border-radius:18px;background:#FBFDFB;border:1px solid #1E2A2A18;box-shadow:0 30px 60px -30px #1E2A2A66;z-index:6}
.card .x{position:absolute;right:12px;top:10px;width:32px;height:32px;border-radius:50%;font-size:20px}
.card .x:hover{background:#1E2A2A0f}
.card .pic{width:180px;height:180px;margin:0 auto;background:var(--pond);border-radius:50%;padding:18px}
.card .pic svg{width:100%;height:100%}
.card h3{margin:12px 0 0;text-align:center;font:400 38px/1 'Instrument Serif',serif}
.card .nm{text-align:center;color:var(--sub);font-size:13px}
.badge{display:table;margin:10px auto 0;padding:4px 12px;border-radius:99px;font:600 12px 'Geist Mono';letter-spacing:.08em}
.b-common{background:#E9F1EC;color:#2F4A40}.b-rare{background:#DDEFFB;color:#23577F}.b-legendary{background:#FFF1BF;color:#7A5306}.b-egg{background:#F1ECE2;color:#6E5A3A}
.stats{margin-top:14px;display:grid;grid-template-columns:1fr auto;gap:6px 10px;font:500 13px 'Geist Mono'}
.stats span:nth-child(odd){color:var(--sub)}
.why{margin-top:12px;font-size:13px;color:var(--sub);text-align:center}
.cbtns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.cbtns a,.cbtns button{height:40px;border-radius:10px;border:1px solid #1E2A2A22;display:grid;place-items:center;font-weight:600;font-size:13px;text-decoration:none}
.cbtns .dark{background:var(--ink);color:#fff;border-color:var(--ink)}

.hint{position:fixed;left:50%;bottom:34px;transform:translateX(-50%);padding:5px 12px;border-radius:99px;background:#F7FBF8dd;font-size:11px;color:var(--sub);z-index:4;pointer-events:none;transition:opacity .6s}
.foot{position:fixed;left:0;right:0;bottom:0;padding:8px 16px;text-align:center;font-size:10.5px;color:var(--sub);background:#E3EEE6cc;z-index:4}
.ov{position:fixed;inset:0;z-index:20;background:#1E2A2A55;display:none;align-items:center;justify-content:center;padding:16px}
.ov.on{display:flex}
.sheet{position:relative;width:min(620px,100%);max-height:calc(100vh - 32px);overflow:auto;background:#FBFDFB;border-radius:20px;padding:28px}
.sheet.narrow{width:min(420px,100%)}
.sheet h2{margin:0;font:400 44px/1 'Instrument Serif',serif}.sheet h2 i{color:var(--gold)}
.sheet ol{margin:18px 0 0;padding-left:20px;display:grid;gap:10px;color:var(--sub)}.sheet b{color:var(--ink)}
.sheet .x{position:absolute;right:12px;top:10px;width:34px;height:34px;border-radius:50%;font-size:22px}
.small{font-size:14px;color:var(--sub)}
.toast{position:fixed;left:50%;bottom:70px;transform:translate(-50%,10px);opacity:0;transition:.25s;background:var(--ink);color:#fff;padding:9px 14px;border-radius:10px;font-size:13px;pointer-events:none;z-index:30}
.toast.on{opacity:1;transform:translate(-50%,0)}

@media (max-width:760px){
  .hud{left:10px;right:10px;top:10px;max-width:none;padding:14px 16px}.hud h1{font-size:44px}.hud p{display:none}
  .topr{left:10px;right:10px;top:auto;bottom:40px;flex-wrap:wrap}.find{flex:1 1 100%}.find input{width:100%}.pill{flex:1}
  .card{left:10px;right:10px;top:auto;bottom:10px;width:auto;max-height:70vh}
  .hint{bottom:150px}
}