/* Mo & Pip — the angle games as places (assets/games-c.js). Prefix gc-. */
.gc-scene{position:absolute;inset:0;overflow:hidden}
.gc-sky{position:absolute;inset:0;background:linear-gradient(180deg,#6FBFF0 0%,#A9DDF7 40%,#E3F4FC 70%)}
.gc-sun{position:absolute;right:7%;top:6%;width:15%;padding-bottom:15%;border-radius:50%;background:radial-gradient(circle at 40% 36%,#FFE79A,#FFCE3D 62%);box-shadow:0 0 34px 10px rgba(255,206,61,.45)}
.gc-cloud{position:absolute;width:22%;height:7%;background:#fff;border-radius:999px;opacity:.92;animation:gcDrift 40s linear infinite;filter:drop-shadow(0 3px 0 rgba(20,60,110,.08))}
.gc-cloud::before{content:"";position:absolute;left:16%;top:-60%;width:38%;padding-bottom:38%;background:#fff;border-radius:50%}
.gc-cloud::after{content:"";position:absolute;left:44%;top:-40%;width:34%;padding-bottom:34%;background:#fff;border-radius:50%}
.gc-cloud.c1{left:6%;top:12%}.gc-cloud.c2{left:55%;top:20%;width:18%;animation-duration:55s}
@keyframes gcDrift{from{transform:translateX(0)}to{transform:translateX(30vw)}}
.gc-grass{position:absolute;left:0;right:0;bottom:0;height:calc(var(--cast-h) + 3vh);background:linear-gradient(180deg,#8AD37F,#5FAE58)}
.gc-no{animation:gcNo .5s}
@keyframes gcNo{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.gc-fade{opacity:.3 !important;transition:opacity .4s}

/* ---- odd one out: the garden wall ---- */
.gc-hedge{position:absolute;left:-4%;right:-4%;top:36%;height:22%;border-radius:40% 40% 0 0/60% 60% 0 0;background:radial-gradient(circle at 30% 30%,#7CCB6C,#4FA85C 70%)}
.gc-hedge.low{top:52%;height:16%}
.gc-brick{position:absolute;left:0;right:0;top:54%;height:calc(46% - var(--cast-h) - 3vh + 8px);
  background:
    linear-gradient(90deg,rgba(255,255,255,.14) 1px,transparent 1px) 0 0/48px 100%,
    repeating-linear-gradient(180deg,#D98B5B 0 22px,#C97A48 22px 24px);
  box-shadow:inset 0 10px 0 #E8A070,inset 0 -6px 12px rgba(0,0,0,.15)}
.gc-pots{position:absolute;left:3%;right:3%;top:55%;transform:translateY(-97%);height:28%;display:flex;justify-content:space-around;align-items:flex-end;z-index:3}
.gc-pot{width:23%;max-width:120px;height:100%;border:0;background:none;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent;
  opacity:0;transform:translateY(30px) scale(.7);transition:transform .5s var(--spring),opacity .3s;transition-delay:var(--d,0ms)}
.gc-pot svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 4px 0 rgba(0,0,0,.12))}
.gc-pot.in{opacity:1;transform:none}
.gc-pot.gc-yes{transform:scale(1.14) translateY(-8px) !important}
.gc-pot.gc-yes svg{filter:drop-shadow(0 0 0 #fff) drop-shadow(0 0 14px #FFCE3D)}
.gc-pipsign{position:absolute;right:4%;bottom:calc(var(--cast-h) - 6px);width:18%;max-width:96px;z-index:4}
.gc-pipsign .char svg{width:100%;height:auto;overflow:visible}

/* ---- big and small: the pond ---- */
.gc-reeds{position:absolute;bottom:calc(var(--cast-h) + 2vh);width:14%;height:26%;background:
  repeating-linear-gradient(90deg,transparent 0 30%,#4FA85C 30% 42%,transparent 42% 100%);border-radius:40% 40% 0 0;opacity:.9;z-index:2}
.gc-reeds.l{left:1%}.gc-reeds.r{right:1%;transform:scaleX(-1)}
.gc-water{position:absolute;left:-6%;right:-6%;top:44%;bottom:calc(var(--cast-h) - 2vh);border-radius:50% 50% 0 0/24% 24% 0 0;
  background:linear-gradient(180deg,#8ED1FC,#5FB1DD);box-shadow:inset 0 10px 24px rgba(255,255,255,.4)}
.gc-water i{position:absolute;height:3px;border-radius:2px;background:rgba(255,255,255,.55);animation:gcRipple 3s ease-in-out infinite}
.gc-water i:nth-child(1){left:14%;top:30%;width:18%}.gc-water i:nth-child(2){left:60%;top:48%;width:22%;animation-delay:-1s}.gc-water i:nth-child(3){left:34%;top:70%;width:14%;animation-delay:-2s}
@keyframes gcRipple{0%,100%{transform:scaleX(1);opacity:.5}50%{transform:scaleX(1.5);opacity:.9}}
.gc-bank{position:absolute;left:0;right:0;bottom:0;height:calc(var(--cast-h) - 2vh);background:linear-gradient(180deg,#8AD37F,#5FAE58)}
.gc-mum{position:absolute;left:50%;top:40%;transform:translateX(-50%);width:36%;max-width:190px;z-index:3;transition:transform .8s ease-in-out}
.gc-mum.gc-glad{animation:gcBob .5s var(--spring) 2}
.gc-mum.gc-swim{transform:translateX(60vw)}
.gc-duck{width:100%;height:auto;overflow:visible;filter:drop-shadow(0 4px 0 rgba(0,40,80,.15))}
.gc-ducklings{position:absolute;left:4%;right:4%;top:62%;height:16%;display:flex;justify-content:space-around;align-items:center;z-index:4}
.gc-kid{width:26%;max-width:130px;border:0;background:none;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent;
  opacity:0;transform:translateX(-30px);transition:transform .5s var(--spring),opacity .3s;transition-delay:var(--d,0ms);animation:gcBob 2.4s ease-in-out infinite;animation-delay:calc(var(--i,0) * -.7s)}
.gc-kid.in{opacity:1;transform:none}
.gc-kid.gc-yes{animation:gcBob .5s var(--spring) 2}
.gc-kid.gc-yes .gc-duck{filter:drop-shadow(0 0 0 #fff) drop-shadow(0 0 14px #FFCE3D)}
.gc-kid.gc-swim{transition:transform .8s ease-in-out;transform:translateX(60vw) !important}
@keyframes gcBob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-6px) rotate(-3deg)}}

/* ---- feed the farm ---- */
.gc-field{position:absolute;left:-6%;right:-6%;top:40%;height:24%;border-radius:50% 50% 0 0/100% 100% 0 0;background:#9FD67C}
.gc-fence{position:absolute;left:0;right:0;top:50%;height:9%;background:
  repeating-linear-gradient(90deg,transparent 0 9%,#C9A06A 9% 11%,transparent 11% 100%),
  linear-gradient(180deg,transparent 30%,#C9A06A 30% 42%,transparent 42% 70%,#C9A06A 70% 82%,transparent 82%)}
.gc-yard{position:absolute;left:0;right:0;bottom:0;height:calc(var(--cast-h) + 6vh);background:linear-gradient(180deg,#8AD37F,#5FAE58)}
.gc-cow{position:absolute;right:3%;top:24%;width:40%;max-width:210px;z-index:3;transition:transform .3s var(--spring)}
.gc-cow svg{width:100%;height:auto;overflow:visible;filter:drop-shadow(0 4px 0 rgba(0,0,0,.12))}
.gc-cow.lit{transform:scale(1.06)}
.gc-cow.gc-munch svg{animation:gcMunch .35s ease-in-out 2}
@keyframes gcMunch{50%{transform:translateY(4px) rotate(-2deg)}}
.gc-trough{position:absolute;left:8%;right:8%;bottom:-16%;height:26%;background:linear-gradient(180deg,#B98A50,#8E5F2B);border-radius:6px 6px 12px 12px;box-shadow:0 4px 0 #5C3B1E;display:flex;align-items:center;justify-content:center}
.gc-trough b{font-size:clamp(22px,6vw,32px);color:#fff;background:#3F7FBF;border-radius:10px;padding:2px 12px;border:2px solid #FFF3B0}
.gc-momeal{position:absolute;left:3%;top:30%;width:42%;max-width:220px;z-index:3;transition:transform .3s var(--spring)}
.gc-momeal.lit{transform:scale(1.05)}
.gc-momeal .char{width:70%;margin:0 auto}
.gc-momeal .char svg{width:100%;height:auto;overflow:visible}
.gc-momeal.gc-eat .char{animation:gcMunch .35s ease-in-out 2}
.gc-table{position:relative;margin-top:-8%;height:40px;background:linear-gradient(180deg,#D9A66A,#B98A50);border-radius:8px;box-shadow:0 5px 0 #8E5F2B}
.gc-plate{position:absolute;left:50%;top:-22px;transform:translateX(-50%);width:64%;height:34px;border-radius:50%;background:radial-gradient(circle,#fff 55%,#E8E2D6 56%);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 0 rgba(0,0,0,.15)}
.gc-plate b{font-size:clamp(20px,5.5vw,28px);color:#fff;background:#B23A48;border-radius:9px;padding:0 10px;border:2px solid #FFF3B0;line-height:1.2}
.gc-tray{position:absolute;left:50%;top:70%;transform:translateX(-50%);width:32%;max-width:150px;height:16%;z-index:6}
.gc-food{position:absolute;inset:0;cursor:grab;touch-action:none;opacity:0;transform:scale(.5);transition:transform .45s var(--spring),opacity .3s}
.gc-food svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 6px 0 rgba(0,0,0,.14))}
.gc-food.in{opacity:1;transform:none}
.gc-food.held{transition:none;z-index:9;cursor:grabbing}
.gc-food.demo{pointer-events:none}
.gc-food.gc-fly-mo{transition:transform 1.1s ease-in-out;transform:translate(-90%,-160%) scale(.8)}
.gc-food.gc-fly-cow{transition:transform 1.1s ease-in-out;transform:translate(110%,-150%) scale(.8)}
.gc-food.gc-to-mo,.gc-food.gc-to-cow{transition:transform .5s ease-in,opacity .4s;opacity:0;transform:scale(.2) !important}

/* ---- your letter in your name: the washing line ---- */
.gc-post{position:absolute;top:28%;width:3.5%;height:44%;background:linear-gradient(90deg,#B98A50,#8E5F2B);border-radius:4px;z-index:2}
.gc-post.l{left:4%}.gc-post.r{right:4%}
.gc-rope{position:absolute;left:5%;right:5%;top:31%;height:4px;background:#5C3B1E;border-radius:2px;z-index:2;transform:rotate(-1deg)}
.gc-shirts{position:absolute;left:6%;right:6%;top:29%;height:32%;z-index:3}
.gc-shirt{position:absolute;top:0;left:calc(var(--o) * (100% / var(--n)));width:calc(100% / var(--n));height:100%;border:0;background:none;padding:0 2px;cursor:pointer;-webkit-tap-highlight-color:transparent;
  opacity:0;transform:translateY(-40px);transition:left .7s var(--spring),transform .5s var(--spring),opacity .3s;transition-delay:0s,var(--d,0ms),var(--d,0ms);transform-origin:50% 0}
.gc-shirt svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 4px 0 rgba(0,0,0,.12))}
.gc-shirts.in .gc-shirt{opacity:1;transform:none}
.gc-shirts.gc-wind .gc-shirt{animation:gcSway .9s ease-in-out}
@keyframes gcSway{0%,100%{transform:rotate(0)}30%{transform:rotate(9deg)}70%{transform:rotate(-7deg)}}
.gc-shirt.got svg{filter:drop-shadow(0 0 0 #fff) drop-shadow(0 0 14px #FFCE3D)}
.gc-shirt.got{transform:scale(1.1) !important}
.gc-shirts.all .gc-shirt{animation:gcBob .6s var(--spring)}
.gc-basket{position:absolute;left:8%;bottom:calc(var(--cast-h) - 4px);width:22%;height:12%;background:linear-gradient(180deg,#E8B96E,#C9862A);border-radius:8px 8px 16px 16px;box-shadow:inset 0 6px 0 rgba(255,255,255,.3),0 4px 0 #8E5F2B;z-index:2}