/* beam — 言葉の赤い川 */
.sc-beam { background: #2f7cf0; cursor: crosshair; }
.sc-beam .bm-sky { position: absolute; inset: -6% -12% 0 -12%; background: #2f7cf0 url(/assets/world/beam/sky.webp) center top / cover; will-change: transform; }
.sc-beam .bm-grid {
  position: absolute; inset: 0; pointer-events: none; opacity: .18;
  background-image: linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px);
  background-size: calc(6.25 * var(--u)) calc(6.25 * var(--u));
}
.sc-beam .bm-hill { position: absolute; left: -6%; right: -6%; bottom: -8%; background: center top / cover no-repeat; will-change: transform; filter: drop-shadow(0 calc(-.3 * var(--u)) calc(.4 * var(--u)) rgba(0, 20, 60, .28)); }
.sc-beam .bm-far { background-image: url(/assets/world/beam/hill-far.webp); }
.sc-beam .bm-near { background-image: url(/assets/world/beam/hill-near.webp); }
.sc-beam .bm-man img { filter: drop-shadow(calc(.5 * var(--u)) calc(.7 * var(--u)) calc(.5 * var(--u)) rgba(0, 20, 60, .35)); }

/* 予定の道 */
.sc-beam .bm-exp { translate: -100% -50%; height: calc(.55 * var(--u)); transform-origin: 100% 50%; opacity: 0; }
.sc-beam .bm-exp i { position: absolute; inset: 0 0 0 calc(3 * var(--u)); background: repeating-linear-gradient(90deg, #151515 0 calc(2.8 * var(--u)), transparent calc(2.8 * var(--u)) calc(4.8 * var(--u))); border-radius: 1px; }
.sc-beam .bm-exp b { position: absolute; left: 0; top: 50%; translate: 0 -50%; border: calc(1.5 * var(--u)) solid transparent; border-right: calc(3.2 * var(--u)) solid #151515; border-left: 0; }

/* 川 */
.sc-beam .bm-river { position: absolute; left: 50%; top: 50%; width: 1px; height: 1px; overflow: visible; pointer-events: none; }
.sc-beam .bm-red, .sc-beam .bm-mk, .sc-beam .bm-shadow { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sc-beam .bm-red { stroke: #e3261d; }
.sc-beam .bm-mk { stroke: #fff; }
.sc-beam .bm-shadow { stroke: rgba(0, 0, 0, .2); transform: translate(.6px, .9px); }
.sc-beam .bm-tx { font-family: var(--f-sans); font-weight: 800; letter-spacing: .09em; white-space: pre; }
.sc-beam .bm-tx.pk { fill: #ffa697; } .sc-beam .bm-tx.yl { fill: #ffe14d; }
.sc-beam .bm-tip, .sc-beam .bm-dr { fill: #e3261d; }

/* 紙の札 */
.sc-beam .bm-lab { width: auto; white-space: nowrap; z-index: 6; }
.sc-beam .bm-lab span {
  display: block; padding: .38em .7em .26em; background: #fbf8ee; color: #151515;
  font: 400 calc(max(10.5px, 1.75 * var(--u)))/1.1 var(--f-type); box-shadow: 2px 3px 3px rgba(0, 0, 0, .28);
}
.sc-beam.wide .bm-lab span { font-size: calc(2.05 * var(--u)); }
.sc-beam .bm-l-src i { position: absolute; right: -.2em; top: 100%; font: 400 calc(3.4 * var(--u))/1 var(--f-hand); font-style: normal; color: #151515; }
.sc-beam .bm-l-act, .sc-beam .bm-l-src, .sc-beam .bm-l-still, .sc-beam .bm-l-exp { opacity: 0; }

/* 洪水 */
.sc-beam .bm-flood { position: absolute; left: 0; right: 0; bottom: 0; background: #e3261d; will-change: transform; z-index: 4; }
.sc-beam .bm-wave { position: absolute; left: 0; bottom: calc(100% - 1px); width: 100%; height: calc(9 * var(--u)); display: block; }
.sc-beam .bm-wave path { fill: #e3261d; }
.sc-beam .bm-rows { position: absolute; inset: calc(-4 * var(--u)) 0 0 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-start; gap: calc(1.55 * var(--u)); padding-top: calc(1 * var(--u)); }
.sc-beam .bm-row { white-space: pre; font: 800 calc(max(9px, 2.05 * var(--u)))/1 var(--f-sans); letter-spacing: .12em; }
.sc-beam .bm-row.pk { color: #ffa697; } .sc-beam .bm-row.yl { color: #ffe14d; }
.sc-beam .bm-row span { display: inline-block; animation: bm-mq 60s linear infinite; }
.sc-beam .bm-row.rv span { animation-direction: reverse; }
@keyframes bm-mq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.sc-beam .bm-final {
  position: absolute; left: 0; right: 0; top: calc(12 * var(--u)); margin: 0; text-align: center; opacity: 0; z-index: 2;
  color: #ffe14d; font: 400 calc(8.4 * var(--u))/1.02 var(--f-anton); letter-spacing: .035em; transform-origin: 50% 50%;
}
.sc-beam .bm-final span { display: inline-block; background: #e3261d; padding: .06em .22em 0; box-shadow: 0 0 0 calc(.8 * var(--u)) #e3261d; }
.sc-beam.wide .bm-final { top: calc(11.5 * var(--u)); font-size: calc(min(9.6 * var(--u), 4.3vw)); }
.sc-beam:not(.wide) .bm-final span { display: block; width: max-content; margin: 0 auto calc(.6 * var(--u)); }
.sc-beam .bm-l-dest { position: absolute; left: calc(5 * var(--u)); top: calc(41 * var(--u)); rotate: 2deg; z-index: 3; }
.sc-beam.wide .bm-l-dest { top: calc(27 * var(--u)); left: calc(10 * var(--u)); }

/* 流されてくるもの */
.sc-beam .bm-fl { z-index: 5; opacity: 0; }
.sc-beam .bm-fl img { clip-path: inset(0 0 26% 0); filter: drop-shadow(1px 2px 2px rgba(60, 0, 0, .3)); }
.sc-beam .bm-fl u {
  position: absolute; left: 4%; right: 4%; top: 71%; height: calc(1.5 * var(--u)); border-top: calc(.3 * var(--u)) solid #ffa697; border-radius: 50%;
  box-shadow: 0 calc(-.8 * var(--u)) 0 calc(-.15 * var(--u)) transparent;
}
.sc-beam .bm-fl u::after { content: ''; position: absolute; left: 12%; right: 12%; top: calc(.9 * var(--u)); height: calc(1.2 * var(--u)); border-top: calc(.28 * var(--u)) solid #ffa697; border-radius: 50%; }
.sc-beam .bm-l-cow { position: absolute; left: 50%; bottom: 104%; translate: -50% 0; rotate: -7deg; }
.sc-beam .bm-pigeon img { clip-path: inset(0 0 30% 0); } .sc-beam .bm-pigeon u { top: 67%; }
.sc-beam .bm-flamingo img { clip-path: inset(0 0 20% 0); } .sc-beam .bm-flamingo u { top: 77%; left: 20%; right: 20%; }

/* 星の札・蝶 */
.sc-beam .bm-burst { --w: 30; aspect-ratio: 1; z-index: 7; cursor: pointer; }
.sc-beam.wide .bm-burst { --w: 34; }
.sc-beam .bm-burst svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(2px 3px 2px rgba(0, 20, 60, .3)); }
.sc-beam .bm-burst polygon { fill: #ffe14d; }
.sc-beam .bm-burst b { position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; rotate: -8deg; text-align: center; color: #151515; font: 400 calc(var(--w) * var(--u) * .145)/1 var(--f-archivo); }
.sc-beam .bm-burst em { display: block; font-style: normal; color: #e3261d; font-size: .78em; margin-top: .12em; }
.sc-beam .bm-bfly { z-index: 8; cursor: pointer; }
.sc-beam .bm-bfly img { filter: drop-shadow(1px 2px 2px rgba(0, 20, 60, .3)); }

/* 押したところから出る言葉 */
.sc-beam .bm-pops { position: absolute; inset: 0; pointer-events: none; z-index: 30; }
.sc-beam .bm-pop {
  position: absolute; translate: -50% -50%; padding: .2em .5em .12em; white-space: nowrap;
  font: 400 calc(max(15px, 3.2 * var(--u)))/1 var(--f-archivo); letter-spacing: .02em;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .3); animation: bm-pop 1.4s cubic-bezier(.2, 1.5, .4, 1) forwards;
}
.sc-beam .bm-pop.yl { background: #ffe14d; color: #151515; } .sc-beam .bm-pop.rd { background: #e3261d; color: #ffe14d; }
@keyframes bm-pop {
  0% { transform: scale(0) rotate(0deg); opacity: 1; }
  25% { transform: scale(1.15) rotate(var(--r)); opacity: 1; }
  70% { transform: translateY(-1.2em) scale(1) rotate(var(--r)); opacity: 1; }
  100% { transform: translateY(-2.6em) scale(.9) rotate(var(--r)); opacity: 0; }
}

/* 上の世界にまたがる札 */
.scene-beam .bm-over { position: absolute; right: 7vw; top: -4.2vh; rotate: 3deg; z-index: 2; }
.scene-beam .bm-over span { display: block; padding: .5em .8em .36em; background: #fbf8ee; color: #151515; font: 400 clamp(10px, 1.1vw, 14px)/1.1 var(--f-type); box-shadow: 2px 3px 3px rgba(0, 0, 0, .3); }