/* cows — 夜の牧場と巨大な手 */
.sc-cows { background: #17255e; }
.sc-cows .cw-sky {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .075) 0 1.1px, transparent 1.6px) 0 0 / 9px 9px,
    radial-gradient(120% 80% at 30% 20%, #20337c 0, #17255e 55%, #101b47 100%);
}
.sc-cows .cw-moon {
  aspect-ratio: 1; border-radius: 50%; background: #f7c81e;
  box-shadow: calc(.35 * var(--u)) calc(.5 * var(--u)) calc(.5 * var(--u)) rgba(5, 8, 30, .4), inset calc(-.5 * var(--u)) calc(-.6 * var(--u)) calc(1.4 * var(--u)) rgba(190, 120, 0, .28);
}
.sc-cows .cw-field { position: absolute; left: 0; right: 0; bottom: 0; top: 0; will-change: transform; }
.sc-cows .cw-grass, .sc-cows .cw-rim {
  position: absolute; left: -1%; right: -1%; bottom: 0; height: 50%;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.sc-cows .cw-rim { background: #fbf8ee; translate: 0 calc(-.55 * var(--u)); filter: drop-shadow(0 calc(-.4 * var(--u)) calc(.6 * var(--u)) rgba(5, 8, 30, .4)); }
.sc-cows .cw-grass { background: #3f7a2c url(/assets/world/cows/grass.webp) center top / cover; }
.sc-cows .cw-grass::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(10, 20, 60, .28), transparent 45%); }
.sc-cows .cw-herd { position: absolute; inset: 0; pointer-events: none; }

.sc-cows .cw-cow { display: block; transform-origin: 50% 100%; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sc-cows .cw-in { display: block; transform-origin: 50% 100%; }
.sc-cows .cw-cow.is-flip .cw-in img { transform: scaleX(-1); }
.sc-cows .cw-in img { width: 100%; height: auto; }
.sc-cows .cw-cow:hover .cw-in { animation: cw-nod .5s ease-in-out infinite alternate; }
.sc-cows .cw-cow.hop .cw-in { animation: cw-hop .6s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes cw-nod { to { transform: rotate(-4deg) translateY(-3%); } }
@keyframes cw-hop { 0% { transform: none; } 35% { transform: translateY(-38%) rotate(-9deg) scale(1.06, .96); } 70% { transform: translateY(0) scale(1.08, .9); } 100% { transform: none; } }

.sc-cows .cw-cap {
  position: absolute; left: 50%; top: 96%; translate: -50% 0; rotate: -3deg; white-space: nowrap; font-style: normal;
  padding: .25em .6em .2em; background: #f7f3e8; color: #141414; font: 700 calc(max(9px, 1.35 * var(--u)))/1.1 var(--f-mono);
  box-shadow: 1px 2px 0 rgba(5, 8, 30, .35); pointer-events: none;
}
.sc-cows .cw-cow:nth-child(odd) .cw-cap { rotate: 3deg; }
.sc-cows .cw-moo {
  position: absolute; left: 50%; bottom: 100%; translate: -50% 0; white-space: nowrap; opacity: 0; pointer-events: none;
  padding: .1em .5em; background: #f7c81e; color: #141414; font: 400 calc(max(13px, 2.6 * var(--u)))/1.2 var(--f-type); rotate: -6deg;
}
.sc-cows .cw-cow.hop .cw-moo { animation: cw-moo 1.1s ease-out; }
@keyframes cw-moo { 0% { opacity: 0; transform: translateY(40%) scale(.5); } 20% { opacity: 1; transform: translateY(-30%) scale(1.1); } 75% { opacity: 1; transform: translateY(-50%); } 100% { opacity: 0; transform: translateY(-90%); } }

.sc-cows .cw-sil { z-index: 19; transform-origin: 50% 100%; }
.sc-cows .cw-sil .cw-cap { top: 98%; left: 60%; rotate: -2deg; }
.sc-cows .cw-fl { z-index: 26; transform-origin: 50% 100%; }
.sc-cows .cw-fig { transform-origin: 50% 6%; }
.sc-cows .cw-hand { transform-origin: 14.6% 93.8%; z-index: 72; pointer-events: none; }
.sc-cows .cw-figcap { left: 70%; top: 24%; rotate: 4deg; }
.sc-cows .cw-ticks { width: calc(26 * var(--u)); height: calc(8 * var(--u)); z-index: 69; transform-origin: 50% 0; }
.sc-cows .cw-ticks i { position: absolute; top: 0; width: calc(.55 * var(--u)); height: calc(4.2 * var(--u)); background: #fbf8ee; border-radius: 1px; rotate: 4deg; }
.sc-cows .cw-ticks i:nth-child(1) { left: 8%; } .sc-cows .cw-ticks i:nth-child(2) { left: 34%; top: 22%; }
.sc-cows .cw-ticks i:nth-child(3) { left: 60%; } .sc-cows .cw-ticks i:nth-child(4) { left: 86%; top: 26%; }

.sc-cows .cw-strip { width: auto; margin: 0; z-index: 60; white-space: nowrap; }
.sc-cows .cw-strip span {
  display: block; padding: .2em .34em .12em; background: #f7f3e8; color: #141414;
  font: 400 calc(max(22px, 4.9 * var(--u)))/1.05 var(--f-type); box-shadow: 2px 3px 0 rgba(5, 8, 30, .38);
}
.sc-cows .cw-strip.cw-r span { font-size: calc(max(17px, 3.6 * var(--u))); }
.sc-cows .cw-strip.cw-foot { z-index: 75; }
.sc-cows .cw-strip.cw-foot span { font-size: calc(max(10.5px, 1.5 * var(--u))); padding: .4em .7em .3em; }

/* 上の世界との境目に立つ牛と月 */
.scene-cows .cw-over { position: absolute; left: 0; right: 0; bottom: 0; height: 0; }
.scene-cows .cw-ocow { position: absolute; left: 36%; bottom: clamp(38px, 7.6vh, 96px); width: clamp(84px, 11vw, 170px); display: block; }
.scene-cows .cw-ocow img { width: 100%; }
.scene-cows .cw-ocow .cw-cap {
  position: absolute; left: 50%; top: 92%; translate: -50% 0; rotate: -3deg; white-space: nowrap; font-style: normal;
  padding: .25em .6em .2em; background: #f7f3e8; color: #141414; font: 700 10px/1.1 var(--f-mono); box-shadow: 1px 2px 0 rgba(5, 8, 30, .35);
}
.scene-cows .cw-omoon { position: absolute; right: 12%; bottom: clamp(10px, 3vh, 40px); width: clamp(46px, 6vw, 90px); aspect-ratio: 1; border-radius: 50%; background: #f7c81e; box-shadow: 3px 4px 5px rgba(5, 8, 30, .35); }

.sc-cows .cw-moon .cw-cap { top: 78%; left: 70%; translate: 0 0; rotate: 4deg; }
.sc-cows.wide .cw-strip span { font-size: calc(6.4 * var(--u)); }
.sc-cows.wide .cw-strip.cw-r span { font-size: calc(4.8 * var(--u)); }
.sc-cows.wide .cw-strip.cw-foot span { font-size: calc(1.9 * var(--u)); }
.sc-cows.wide .cw-cap { font-size: calc(1.7 * var(--u)); }
.sc-cows:not(.wide) .cw-moon[data-i='1'] .cw-cap { left: auto; right: 60%; }