:root{font-family:Tahoma,"Noto Sans Thai",sans-serif;color:#4b3026;background:#fbf7ef;font-synthesis:none;--pink:#d98b9a;--brown:#754831}*{box-sizing:border-box}body{margin:0}button,select{font:inherit}button{cursor:pointer}button:focus-visible,select:focus-visible,.garden-scroll:focus-visible{outline:3px solid #a24650;outline-offset:3px}main{max-width:1600px;margin:auto;padding:22px 24px 18px}header{text-align:center;margin-bottom:16px}.eyebrow{font-size:14px;letter-spacing:2px;font-weight:700;color:#866247}.eyebrow span{margin-left:16px;border-left:1px solid #c5b29c;padding-left:16px}h1{font-size:clamp(27px,2.8vw,38px);margin:8px 0 5px;line-height:1.35}header p{font-size:15px;margin:0;color:#826856}.garden-wrap{position:relative;overflow:hidden;border-radius:26px;border:5px solid #fff;box-shadow:0 12px 38px #75573218;background:#a9c884}.garden-scroll{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-color:#a4b982 #edf1df;scrollbar-width:thin}#garden{position:relative;aspect-ratio:1.5;min-width:920px;overflow:hidden}.backdrop{width:100%;height:100%;object-fit:fill;display:block}#flocks{position:absolute;inset:0}.garden-top{position:absolute;z-index:9000;top:14px;left:14px;right:14px;display:flex;justify-content:space-between;align-items:center;gap:12px;pointer-events:none}.garden-top>*{pointer-events:auto}.badge,#pause{background:#fff9ebed;padding:9px 14px;border-radius:22px;font-size:13px;color:#654632;border:1px solid #fff8}.badge{font-family:Georgia,serif;font-style:italic}#pause{cursor:pointer}.flock{position:absolute;left:0;top:0;will-change:transform}.flock-visual{position:relative;display:flex;flex-direction:column;align-items:center;transition:filter .25s ease,transform .25s ease,opacity .25s ease;transform-origin:center bottom;border:0;background:transparent;padding:0;cursor:pointer}.flock-pack{display:grid;grid-template-columns:repeat(var(--columns),var(--dog-size));align-items:end;justify-items:center;column-gap:0}.flock-dog{width:var(--dog-size);height:calc(var(--dog-size)*.78);object-fit:contain;filter:drop-shadow(0 2px 1px #29421c22);transform-origin:center bottom;user-select:none;-webkit-user-drag:none}.flock-name{max-width:180px;margin-top:1px;padding:2px 7px;border-radius:9px;background:#fff8ebd9;color:#543a2c;font-size:10px;line-height:1.25;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 1px 4px #5d43231b}.flock.dimmed .flock-visual{opacity:.35;filter:saturate(.65)}.flock.selected .flock-visual{transform:scale(1.48);filter:drop-shadow(0 0 8px #fff) drop-shadow(0 0 11px #d9798c);z-index:2}.flock.selected .flock-name{background:#fff;color:#7a3143;font-weight:700;box-shadow:0 0 0 2px #eaa9b5}.flock.selected .flock-pack{animation:hello .7s ease-in-out 2}#empty{position:absolute;left:50%;top:62%;transform:translate(-50%,-50%);padding:11px 20px;border-radius:18px;background:#fff9ebdc;color:#74503a;font-size:14px}#tip{position:absolute;z-index:9000;bottom:12px;left:50%;transform:translateX(-50%);max-width:90%;width:max-content;text-align:center;border-radius:18px;background:#fff9ebed;padding:7px 16px;font-size:12px;pointer-events:none}.controls{display:grid;grid-template-columns:auto auto minmax(260px,1fr) auto;align-items:end;gap:26px;padding:20px 8px}.stat{display:flex;align-items:center;gap:10px;min-width:150px}.stat strong{font-family:Georgia,serif;font-weight:400;font-size:46px;color:#87512f}.stat span{font-size:15px}.stat small{display:block;font-size:11px;color:#886e5c;margin-top:3px;white-space:nowrap}.picker>span{display:block;font-size:13px;margin-bottom:7px}.picker select{width:100%;padding:12px 38px 12px 14px;border:1px solid #d6c5b2;border-radius:12px;background:#fffdfa;color:#4b3026;font-size:15px}#refresh{padding:12px 15px;border:1px solid #d7b4b9;border-radius:12px;background:#f9e4e8;color:#713b46;white-space:nowrap}footer{border-top:1px solid #e7dccb;padding-top:14px;display:flex;justify-content:space-between;gap:12px;color:#887363;font-size:12px}footer p{margin:0}@keyframes hello{50%{transform:translateY(-5px) rotate(-1deg)}}@media(prefers-reduced-motion:reduce){.flock-visual,.flock-pack{transition:none!important;animation:none!important}}@media(max-width:800px){main{padding:18px 10px}.garden-wrap{border-radius:18px;border-width:3px}#garden{min-width:920px}.garden-top{position:relative;inset:auto;padding:9px;background:#edf2df}.garden-wrap{display:flex;flex-direction:column}.garden-scroll{order:2}.garden-top{order:1}#tip{position:relative;order:3;bottom:auto;left:auto;transform:none;align-self:center;margin:8px auto;max-width:95%}.controls{grid-template-columns:1fr 1fr;gap:14px 10px;padding:16px 4px}.stat{min-width:0}.stat strong{font-size:39px}.picker{grid-column:1/-1}#refresh{grid-column:1/-1}footer{flex-direction:column;gap:6px}.eyebrow{font-size:12px}header p{font-size:13px}}
#flocks .flock-pack{position:relative;display:block;flex:none}
#flocks .flock-dog{position:absolute;left:0;top:0}
.garden-portrait{position:absolute;z-index:1;right:18px;bottom:4px;width:clamp(110px,12vw,180px);height:auto;aspect-ratio:1;border:0;border-radius:0;box-shadow:none;background:transparent;pointer-events:none;user-select:none}
@media(max-width:800px){.garden-portrait{width:104px;right:12px;bottom:4px}}
#tip{position:absolute;left:12px;bottom:12px;transform:none;margin:0;text-align:left;max-width:calc(100% - 140px)}
#tip:empty{display:none}