/* Pib's start-menu idles (see idles.js). Everything is prefixed ix- so it can't collide with the lobby or game screens.
   The body colors (.g-limb, .g-body, .g-icing ...) come from host.css; the --pib-* flavor vars are copied onto each .ix-pib. */

/* the title's letters are split into spans so Pib can steal the O and perch on the E */
.gate-title .ix-l { display: inline-block; line-height: 1; }

.ix-stage { position: absolute; inset: 0; pointer-events: none; overflow: hidden; container-type: inline-size; z-index: 2; }
.ix-pib { position: absolute; transform-origin: 50% 100%; z-index: 3; }
.ix-pib svg { display: block; width: 100%; height: auto; overflow: visible; }
.ix-eye-white { fill: #fff; stroke: var(--pib-icing-line); stroke-width: 4.5; }
.ix-lid { fill: var(--pib-icing); }

.ix-pop { position: absolute; font-family: var(--display); white-space: nowrap; z-index: 8; text-shadow: 0 .08em 0 var(--pink), 0 .15em 0 var(--ink); }
.ix-dust { position: absolute; width: 3cqw; height: 3cqw; border-radius: 50%; background: rgba(255,246,229,.75); z-index: 6; }

/* strike */
.ix-lane { position: absolute; left: 0; right: 0; top: 86%; bottom: 0; background: linear-gradient(180deg, rgba(255,210,140,.16), rgba(255,210,140,.05)); border-top: .25cqw solid rgba(255,230,190,.3); }
.ix-pin { position: absolute; width: 2.5%; transform-origin: 50% 100%; z-index: 2; }
.ix-pin svg { display: block; width: 100%; height: auto; }

/* fishing */
.ix-ov { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 2; }
.ix-bigfish { position: absolute; width: 46%; z-index: 9; }
.ix-bigfish svg { display: block; width: 100%; height: auto; }
.ix-note { position: absolute; font-size: 2.4cqw; color: var(--cream); z-index: 4; }

/* rooftop */
.ix-building { position: absolute; left: 82%; width: 16%; top: 36%; bottom: -3%; z-index: 1; background: #2c1756; border: .35cqw solid var(--ink); border-bottom: 0;
  box-shadow: inset .9cqw 0 0 rgba(255,255,255,.05); display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1cqw; padding: 2.2cqw 1.5cqw; align-content: start; }
.ix-building::before { content: ""; position: absolute; left: -.9cqw; right: -.9cqw; top: -1.3cqw; height: 1.3cqw; background: #3d2470; border: .35cqw solid var(--ink); border-radius: .3cqw; }
.ix-win { height: 2.6cqw; background: #1b0e36; border-radius: .3cqw; }
.ix-win.on { background: var(--yellow); box-shadow: 0 0 1cqw rgba(255,210,63,.55); }
.ix-stars { position: absolute; width: 8cqw; height: 2.4cqw; z-index: 6; }
.ix-stars span { position: absolute; left: 50%; top: 50%; font-size: 1.8cqw; color: var(--yellow); animation: ixOrbit 1.1s linear infinite; }
.ix-stars span:nth-child(2) { animation-delay: -.37s; }
.ix-stars span:nth-child(3) { animation-delay: -.73s; }
@keyframes ixOrbit { from { transform: translate(-50%,-50%) rotate(0) translateX(3.4cqw) rotate(0); } to { transform: translate(-50%,-50%) rotate(360deg) translateX(3.4cqw) rotate(-360deg); } }