/* signal — 信号機 */
.sc-signal { background: #7d88f2; color: #0d0d12; }
.sc-signal::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 70% 30%, rgba(255, 255, 255, .13), transparent 60%), radial-gradient(90% 70% at 10% 100%, rgba(20, 20, 90, .16), transparent 60%);
}

/* 信号機（支点を原点に回る） */
.sc-signal .sg-rig { position: absolute; left: 50%; top: 50%; width: 0; height: 0; will-change: transform; z-index: 4; }
.sc-signal .sg-body {
  position: absolute; max-width: none; left: calc(-22.44 * var(--u)); top: calc(-182.6 * var(--u)); width: calc(44.88 * var(--u)); height: auto;
  filter: drop-shadow(calc(-1 * var(--u)) calc(1.4 * var(--u)) calc(1.1 * var(--u)) rgba(10, 10, 60, .3)); pointer-events: none;
}
.sc-signal .sg-pole {
  position: absolute; left: calc((2.92 - 6.1) * var(--u)); top: calc(-77 * var(--u)); width: calc(12.2 * var(--u)); height: calc(190 * var(--u));
  background: url(/assets/world/signal/pole.webp) top center / 100% auto repeat-y;
}
.sc-signal .sg-lamp {
  position: absolute; width: calc(39.84 * var(--u)); height: calc(39.84 * var(--u)); margin: calc(-19.92 * var(--u)) 0 0 calc(-19.92 * var(--u));
  border-radius: 50%; cursor: pointer; will-change: transform; -webkit-tap-highlight-color: transparent;
  clip-path: circle(42%);
}
.sc-signal .sg-lamp img { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; -webkit-user-drag: none; }
.sc-signal .sg-lamp .sg-on { opacity: 0; transition: opacity .07s linear; }
.sc-signal .sg-lamp:focus-visible { outline: 3px solid #fff; outline-offset: -18%; }

/* stop? wait? go? */
.sc-signal .sg-lab { width: auto; white-space: nowrap; z-index: 6; pointer-events: none; transform-origin: 0 50%; }
.sc-signal .sg-lab b { display: inline-block; font: 400 1em/1 var(--f-marker); letter-spacing: .01em; vertical-align: middle; }
.sc-signal .sg-lab svg { display: inline-block; vertical-align: middle; width: 3.1em; height: 1.24em; margin-left: .12em; overflow: visible; }
.sc-signal .sg-lab path { fill: none; stroke: #0d0d12; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }

/* 見出し */
.sc-signal .sg-head { width: auto; z-index: 5; transform-origin: 0 0; pointer-events: none; }
.sc-signal .sg-head b { display: block; font: 400 1em/.98 var(--f-anton); letter-spacing: .005em; white-space: nowrap; text-transform: uppercase; }
.sc-signal .sg-head b + b { font-size: .96em; margin-top: .06em; }
.sc-signal .sg-head i { display: inline-block; font-style: normal; font-size: .42em; margin-left: .2em; vertical-align: .1em; animation: sg-spin 6s linear infinite; }
@keyframes sg-spin { to { transform: rotate(360deg); } }
.sc-signal .sg-bar { width: auto; z-index: 7; transform-origin: 0 50%; pointer-events: none; }
.sc-signal .sg-bar span {
  display: block; padding: .2em .36em .16em; background: #0d0d12; color: #7d88f2; white-space: nowrap;
  font: 400 1em/1 var(--f-anton); letter-spacing: .04em; box-shadow: .08em .1em 0 rgba(10, 10, 60, .28);
}
.sc-signal .sg-para {
  width: calc(31 * var(--u)); margin: 0; z-index: 5;
  font: 500 calc(max(10.5px, 1.75 * var(--u)))/1.36 var(--f-sans); letter-spacing: .005em; color: #0d0d12;
}
.sc-signal.wide .sg-para { width: calc(34 * var(--u)); font-size: calc(max(12px, 2 * var(--u))); }
.sc-signal:not(.wide) .sg-para { translate: 0 -100%; }
.sc-signal:not(.wide) .sg-long { display: none; }

/* 標識 */
.sc-signal .sg-sign { width: auto; z-index: 3; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sc-signal .sg-sign > span { display: block; transition: transform .25s cubic-bezier(.3, 1.7, .5, 1); filter: drop-shadow(calc(.4 * var(--u)) calc(.6 * var(--u)) 0 rgba(10, 10, 60, .28)); }
.sc-signal .sg-sign:hover > span { transform: rotate(-9deg) scale(1.1); }
.sc-signal .sg-dia > span { width: calc(17 * var(--u)); height: calc(17 * var(--u)); background: #f8d517; border: calc(.7 * var(--u)) solid #0d0d12; border-radius: calc(1.4 * var(--u)); rotate: 45deg; display: grid; place-items: center; outline: calc(.35 * var(--u)) solid #f8d517; }
.sc-signal .sg-dia b { rotate: -45deg; font: 400 calc(3 * var(--u))/1.02 var(--f-anton); letter-spacing: .03em; text-align: center; color: #0d0d12; }
.sc-signal .sg-oct > span { width: calc(15 * var(--u)); height: calc(15 * var(--u)); background: #e3231c; display: grid; place-items: center; clip-path: polygon(29.3% 0, 70.7% 0, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0 70.7%, 0 29.3%); filter: none; }
.sc-signal .sg-oct b { font: 400 calc(6.4 * var(--u))/1 var(--f-anton); color: #fff; letter-spacing: .04em; }
.sc-signal .sg-oct.sg-flip b::after { content: '?'; }
.sc-signal .sg-rnd > span { width: calc(14 * var(--u)); height: calc(14 * var(--u)); border-radius: 50%; background: #1fbf68; border: calc(.9 * var(--u)) solid #fff; display: grid; place-items: center; outline: calc(.3 * var(--u)) solid #0d0d12; }
.sc-signal .sg-rnd b { font: 400 calc(4 * var(--u))/1 var(--f-anton); color: #fff; letter-spacing: .05em; }
.sc-signal .sg-way > span { display: flex; align-items: center; gap: .5em; padding: .42em .7em .36em; background: #fff; border: calc(.45 * var(--u)) solid #0d0d12; border-radius: calc(.5 * var(--u)); font-size: calc(max(11px, 2.5 * var(--u))); white-space: nowrap; }
.sc-signal .sg-way b { font: 400 1em/1 var(--f-anton); letter-spacing: .08em; color: #0d0d12; }
.sc-signal .sg-way i { font-style: normal; font-size: 1.5em; line-height: .7; color: #0d0d12; }
.sc-signal .sg-way2 > span { background: #0d0d12; } .sc-signal .sg-way2 b, .sc-signal .sg-way2 i { color: #fff; }
.sc-signal .sg-way2 i { transform: rotate(-135deg); }
.sc-signal .sg-way1 i { transform: rotate(40deg); }
.sc-signal .sg-way3 > span { background: #f8d517; } .sc-signal .sg-way3 i { transform: rotate(180deg); }
.sc-signal .sg-post { cursor: default; z-index: 8; }
.sc-signal .sg-post > span { position: relative; display: flex; flex-direction: column; align-items: center; gap: calc(.9 * var(--u)); padding-bottom: calc(11 * var(--u)); transition: none; }
.sc-signal .sg-post:hover > span { transform: none; }
.sc-signal .sg-post em { position: absolute; left: 50%; top: calc(-1.5 * var(--u)); bottom: 0; width: calc(1.3 * var(--u)); margin-left: calc(-.65 * var(--u)); background: #0d0d12; z-index: -1; border-radius: calc(.6 * var(--u)) calc(.6 * var(--u)) 0 0; }
.sc-signal .sg-post a {
  display: block; padding: .5em 1.1em .42em; background: #fff; color: #0d0d12; text-decoration: none; white-space: nowrap;
  font: 400 calc(max(14px, 3.1 * var(--u)))/1 var(--f-anton); letter-spacing: .1em; border: calc(.45 * var(--u)) solid #0d0d12;
  transition: transform .18s cubic-bezier(.3, 1.7, .5, 1), background .18s;
}
.sc-signal .sg-post a:first-child { clip-path: polygon(0 0, 88% 0, 100% 50%, 88% 100%, 0 100%); padding-right: 1.6em; margin-left: calc(5 * var(--u)); background: #f8d517; }
.sc-signal .sg-post a:nth-child(2) { clip-path: polygon(12% 0, 100% 0, 100% 100%, 12% 100%, 0 50%); padding-left: 1.6em; margin-right: calc(5 * var(--u)); }
.sc-signal .sg-post a:hover, .sc-signal .sg-post a:focus-visible { transform: scale(1.12) rotate(-3deg); background: #0d0d12; color: #fff; outline: none; }
.sc-signal .sg-note {
  width: auto; margin: 0; padding: .32em .7em .22em; background: #f6f1e4; color: #0d0d12; white-space: nowrap; z-index: 3; pointer-events: none;
  font: 400 calc(max(10px, 1.9 * var(--u)))/1.25 var(--f-type); box-shadow: 2px 3px 0 rgba(10, 10, 60, .25);
}

/* 横断歩道 */
.sc-signal .sg-zebra {
  position: absolute; left: -10%; right: -10%; bottom: 0; height: calc(15 * var(--u)); display: flex; gap: 3.2%; justify-content: center;
  transform-origin: 50% 100%; pointer-events: none; opacity: .9; z-index: 1;
}
.sc-signal .sg-zebra i { flex: 1 1 0; background: #eef0ff; transform: skewX(-24deg); box-shadow: 0 0 0 1px rgba(10, 10, 60, .06); }

/* 上の世界にはみ出す標識 */
.scene-signal .sg-ov { position: absolute; }
.scene-signal .sg-ov1 {
  left: 9%; top: calc(-11 * var(--u)); width: calc(13 * var(--u)); height: calc(13 * var(--u)); background: #f8d517; border: calc(.6 * var(--u)) solid #0d0d12;
  border-radius: calc(1.2 * var(--u)); rotate: 45deg; display: grid; place-items: center; box-shadow: calc(.5 * var(--u)) calc(.5 * var(--u)) 0 rgba(10, 10, 60, .25);
}
.scene-signal .sg-ov1 span { rotate: -45deg; font: 400 calc(6 * var(--u))/1 var(--f-anton); color: #0d0d12; }
.scene-signal .sg-ov2 {
  right: 7%; top: calc(-7 * var(--u)); padding: .4em .8em .3em; background: #f08a1c; color: #0d0d12; border: calc(.45 * var(--u)) solid #0d0d12; rotate: 5deg;
  font: 400 calc(max(13px, 3 * var(--u)))/1 var(--f-anton); letter-spacing: .12em; box-shadow: calc(.5 * var(--u)) calc(.5 * var(--u)) 0 rgba(10, 10, 60, .25);
}
.scene-signal .sg-ov2 i { font-style: normal; margin-left: .4em; }
.scene-signal .sg-ov3 {
  left: 50%; top: calc(-16 * var(--u)); width: calc(1.2 * var(--u)); height: calc(30 * var(--u)); margin-left: calc(-.6 * var(--u));
  background: repeating-linear-gradient(#eef0ff 0 calc(3.4 * var(--u)), transparent calc(3.4 * var(--u)) calc(6 * var(--u))); opacity: .85;
}