/* Pony Meadow (kids). Loaded only by games/pony.html. */
.pm{position:absolute;inset:0;display:flex;flex-direction:column;gap:8px;padding:8px}
.pm-tabs{flex:none;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pm-tab{min-height:56px;border:none;border-radius:18px;background:#efe9ff;color:#4a3fb5;font-weight:900;font-size:clamp(15px,4.2vw,22px);box-shadow:0 4px 0 #d3c8ff;padding:0 6px}
.pm-tab.on{background:#4d79ff;color:#fff;box-shadow:0 4px 0 #2f56c9}
.pm-tab:active{transform:translateY(3px);box-shadow:0 1px 0 #d3c8ff}
.pm-stage{position:relative;flex:1;min-height:0;border-radius:22px;overflow:hidden}
.meadow{background:linear-gradient(#bfeaff 0,#e9f9ff 52%,#9ad97a 52%,#7cc55e 100%)}
.barn{background:linear-gradient(#ffe7c4 0,#fff3dd 58%,#e7b98a 58%,#d9a574 100%)}
.ride{background:#9ee3ff;touch-action:none}
.pm-pony{position:absolute;left:3%;right:3%;top:16px;bottom:3%;touch-action:none}
.pm-pony svg{display:block;width:100%;height:100%;max-width:none}
.care-pony{top:86px}
.dress-pony{top:74px}
@media (max-height:500px) and (min-aspect-ratio:4/3){
  .pm{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr)}
  .pm-tabs{grid-column:1/-1}.pm-tab{min-height:56px}
  .pm-stage:last-child{grid-column:1/-1}
  .pm-tools{grid-template-columns:repeat(2,96px);align-content:center}
  .pm-panel{width:min(46vw,330px);overflow-y:auto}
  .pm-swatches{max-height:none}
  .care-pony{top:70px}.dress-pony{top:14px;right:130px}.pm-hint{top:44px}}
.pm-bounce svg{animation:pmhop .55s}
@keyframes pmhop{30%{transform:translateY(-8%) rotate(-2deg)}60%{transform:translateY(0) rotate(1deg)}}
.pm-needs{position:absolute;top:8px;left:8px;right:8px;display:flex;justify-content:center;gap:6px;flex-wrap:wrap}
.pm-need{padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.85);font-weight:900;font-size:clamp(14px,3.8vw,19px);color:#6b5a8e}
.pm-need.done{background:#d8ffe0;color:#1d8a50}
.pm-hint{position:absolute;left:8px;right:8px;top:52px;text-align:center;font-weight:800;font-size:clamp(14px,3.8vw,19px);color:#4a3fb5}
.pm-tools{flex:none;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.pm-tool{min-height:76px;border:none;border-radius:20px;background:#fff;box-shadow:0 5px 0 #e3dcff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-weight:900;color:#4a3fb5}
.pm-tool .te{font-size:clamp(28px,8vw,40px);line-height:1}.pm-tool .tl{font-size:clamp(13px,3.4vw,17px)}
.pm-tool.on{background:#fff4c2;box-shadow:0 5px 0 #f0c94a;outline:3px solid #ffca3a}
.pm-tool:active{transform:translateY(3px)}
.pm-food{position:absolute;left:12%;bottom:-10%;font-size:clamp(40px,12vw,72px);transition:left .6s ease,bottom .6s ease,transform .6s ease;pointer-events:none}
.pm-food.go{left:72%;bottom:46%;transform:scale(.8) rotate(-15deg)}
.pm-food.bucket.go{left:72%;bottom:30%;transform:none}
.pm-heart{position:absolute;font-size:clamp(26px,7vw,40px);pointer-events:none;animation:pmheart 1.6s ease-out forwards}
@keyframes pmheart{0%{opacity:0;transform:translate(0,0) scale(.5)}20%{opacity:1}100%{opacity:0;transform:translate(var(--dx,0),-120px) scale(1.2)}}
.pm-sparkle{position:absolute;font-size:24px;pointer-events:none;transform:translate(-50%,-50%);animation:pmsp .7s forwards}
@keyframes pmsp{to{opacity:0;transform:translate(-50%,-120%) scale(1.4)}}
.pm-done{position:absolute;top:10px;right:10px;min-height:56px;padding:0 18px;border:none;border-radius:18px;background:#2fb36b;color:#fff;font-weight:900;font-size:clamp(16px,4.2vw,22px);box-shadow:0 5px 0 #1d8a50}
.pm-panel{flex:none;display:flex;flex-direction:column;gap:8px}
.pm-cats{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.pm-cat{min-height:60px;border:none;border-radius:16px;background:#fff;box-shadow:0 4px 0 #e3dcff;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:900;color:#4a3fb5;padding:2px}
.pm-cat .ce{font-size:24px;line-height:1}.pm-cat .cl{font-size:clamp(11px,2.9vw,15px);line-height:1.1;text-align:center}
.pm-cat.on{background:#ffca3a;color:#5a3d00;box-shadow:0 4px 0 #d9a400}
.pm-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:8px;max-height:30vh;overflow-y:auto;padding:2px}
.pm-sw{min-height:76px;border:3px solid transparent;border-radius:18px;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-weight:800;font-size:13px;color:#4a3fb5;box-shadow:0 3px 0 #e3dcff}
.pm-sw.on{border-color:#4d79ff;background:#eef3ff}
.pm-sw .dot{width:38px;height:38px;border-radius:50%;border:3px solid rgba(0,0,0,.12);background:#eee}
.pm-sw .dot.none{background:repeating-linear-gradient(45deg,#fff 0 5px,#ffd1dc 5px 10px)}
.pm-sw .dot.rainbow{background:linear-gradient(135deg,#ff6b6b,#ffd23f,#4cd97b,#4da3ff,#b06bff)}
.pm-sw .dot.spotted{background:radial-gradient(circle at 30% 35%,#8a5a33 0 18%,transparent 19%),radial-gradient(circle at 70% 65%,#8a5a33 0 15%,transparent 16%),#fbf7ef}
.pm-canvas{position:absolute;inset:0;display:block}
.pm-hud{position:absolute;top:8px;left:8px;display:flex;gap:8px;pointer-events:none}
.pm-hud span{padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.85);font-weight:900;font-size:clamp(16px,4.4vw,22px);color:#4a3fb5}
.pm-jump{position:absolute;right:10px;bottom:10px;min-width:96px;min-height:72px;border:none;border-radius:24px;background:#ff8a2a;color:#fff;font-weight:900;font-size:clamp(18px,5vw,26px);box-shadow:0 6px 0 #d16a0e;touch-action:none}
.pm-banner{position:absolute;top:22%;left:50%;transform:translateX(-50%);padding:8px 18px;border-radius:999px;background:rgba(255,255,255,.92);font-weight:900;font-size:clamp(18px,5vw,28px);color:#4a3fb5;opacity:0;pointer-events:none;white-space:nowrap}
.pm-banner.show{animation:pmban 2.6s forwards}
@keyframes pmban{0%{opacity:0;transform:translate(-50%,-20px)}12%,75%{opacity:1;transform:translate(-50%,0)}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.pm-bounce svg,.pm-heart,.pm-sparkle,.pm-banner.show{animation-duration:.01s}.pm-food{transition:none}}