#poi-loading {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
  transition: opacity .55s ease;
  background-color: var(--poi-bg, #0b0b14);
  background-image:
    radial-gradient(circle 1.2px at 18% 22%, rgba(255, 255, 255, .55) 0%, rgba(0, 0, 0, 0) 100%),
    radial-gradient(circle 1px at 62% 14%, rgba(255, 255, 255, .40) 0%, rgba(0, 0, 0, 0) 100%),
    radial-gradient(circle 1.4px at 82% 34%, rgba(255, 255, 255, .50) 0%, rgba(0, 0, 0, 0) 100%),
    radial-gradient(circle 1px at 38% 40%, rgba(255, 255, 255, .30) 0%, rgba(0, 0, 0, 0) 100%),
    radial-gradient(circle 1.2px at 8% 46%, rgba(255, 255, 255, .35) 0%, rgba(0, 0, 0, 0) 100%),
    radial-gradient(circle 1px at 92% 12%, rgba(255, 255, 255, .35) 0%, rgba(0, 0, 0, 0) 100%),
    radial-gradient(ellipse 120% 55% at 50% calc(100% - var(--poi-ground-h)), rgba(120, 110, 185, .22) 0%, rgba(120, 110, 185, .08) 45%, rgba(0, 0, 0, 0) 72%);
  background-repeat: no-repeat;
  color: var(--poi-accent, #C8963E);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --poi-actor-size: min(46vw, 180px);
  --poi-ground-h: calc(50% - (var(--poi-actor-size) / 2));
}

#poi-loading.poi-done {
  opacity: 0;
  pointer-events: none;
}

.poi-loader-active #unity-loading-bar {
  display: none !important;
}

.poi-scene {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.poi-scene[data-variant="stroll"] {
  --poi-foot-pad: .1426;
}

.poi-scene[data-variant="float"] {
  --poi-foot-pad: .1738;
}

.poi-scene[data-variant="coin"] {
  --poi-foot-pad: .1738;
}

.poi-scene[data-variant="ninja"] {
  --poi-foot-pad: .0801;
}

.poi-scene::before {
  content: '';
  position: absolute;
  top: 14%;
  right: 12%;
  width: calc(var(--poi-actor-size) * .34);
  height: calc(var(--poi-actor-size) * .34);
  border-radius: 50%;
  background-color: #F3EBD2;
  opacity: .85;
  box-shadow: 0 0 calc(var(--poi-actor-size) * .3) rgba(243, 235, 210, .22);
  pointer-events: none;
}

.poi-bg-far,
.poi-bg-near {
  position: absolute;
  left: 0;
  top: 0;
  width: 200%;
  height: calc(100% - var(--poi-ground-h));
  background-repeat: repeat-x;
  background-position: 0 100%;
}

.poi-bg-far {
  background-image: radial-gradient(ellipse 20vw 7vw at 50% 100%, rgba(150, 140, 200, .16) 0%, rgba(150, 140, 200, .16) 60%, rgba(0, 0, 0, 0) 62%);
  background-size: 40vw 100%;
  animation: poi-bg-far calc(6s * var(--poi-anim-speed, 1)) linear infinite;
}

.poi-bg-near {
  background-image: radial-gradient(ellipse 8vw 1.5vw at 50% 100%, rgba(34, 30, 62, .92) 0%, rgba(34, 30, 62, .92) 60%, rgba(0, 0, 0, 0) 62%);
  background-size: 20vw 100%;
  animation: poi-bg-near calc(3s * var(--poi-anim-speed, 1)) linear infinite;
}

.poi-ground {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% - var(--poi-ground-h));
  height: var(--poi-ground-h);
  background-image: linear-gradient(to bottom, rgba(160, 150, 210, .10) 0%, rgba(0, 0, 0, .10) 45%, rgba(0, 0, 0, .28) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
  pointer-events: none;
}

.poi-props {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.poi-props > i {
  display: none;
  position: absolute;
}

.poi-cel {
  display: none;
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.poi-cross {
  position: absolute;
  left: 50%;
  top: 50%;
  animation: poi-cross calc(6s * var(--poi-anim-speed, 1)) linear infinite;
}

.poi-hop {
  position: absolute;
  left: 0;
  top: 0;
  animation: poi-hop calc(.5s * var(--poi-anim-speed, 1)) ease-in-out infinite;
}

.poi-tilt {
  position: absolute;
  left: 0;
  top: 0;
  animation: poi-tilt calc(1s * var(--poi-anim-speed, 1)) ease-in-out infinite;
}

.poi-actor {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--poi-actor-size);
  aspect-ratio: 1 / 1;
  margin-left: calc(var(--poi-actor-size) / -2);
  margin-top: calc(var(--poi-actor-size) * (var(--poi-foot-pad, 0) - .5));
  background-image: var(--poi-img);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .28));
  transform-origin: center center;
  animation: poi-breathe calc(2s * var(--poi-anim-speed, 1)) ease-in-out infinite;
}

.poi-shadow-cross {
  position: absolute;
  left: 50%;
  top: calc(50% + (var(--poi-actor-size) / 2));
  animation: poi-shadow-cross calc(6s * var(--poi-anim-speed, 1)) linear infinite;
}

.poi-shadow {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--poi-actor-size) * .6);
  height: calc(var(--poi-actor-size) * .12);
  margin-left: calc(var(--poi-actor-size) * -.3);
  margin-top: calc(var(--poi-actor-size) * -.06);
  border-radius: 50%;
  background-color: rgba(0, 0, 0, .62);
  transform-origin: center center;
  animation: poi-shadow-scale calc(.5s * var(--poi-anim-speed, 1)) ease-in-out infinite;
}

.poi-foot {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: min(86vw, 420px);
  text-align: center;
  pointer-events: none;
}

.poi-bar {
  width: 100%;
  height: 6px;
  background-color: rgba(255, 255, 255, .12);
  border-radius: 3px;
  overflow: hidden;
}

.poi-bar > i {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background-color: var(--poi-accent, #C8963E);
  transition: transform .35s cubic-bezier(.4, 0, .2, 1);
}
.poi-scene[data-variant] .poi-bg-far,
.poi-scene[data-variant] .poi-bg-near,
.poi-scene[data-variant] .poi-cross,
.poi-scene[data-variant] .poi-hop,
.poi-scene[data-variant] .poi-tilt,
.poi-scene[data-variant] .poi-actor,
.poi-scene[data-variant] .poi-shadow-cross,
.poi-scene[data-variant] .poi-shadow {
  will-change: transform;
}


.poi-txt {
  margin-top: 10px;
  font-size: 13px;
  letter-spacing: .05em;
  opacity: .9;
}

/* --- float --- */
.poi-scene[data-variant="float"] .poi-cross,
.poi-scene[data-variant="float"] .poi-shadow-cross {
  animation: none;
  transform: translateX(0);
}

.poi-scene[data-variant="float"] .poi-hop {
  animation: poi-float calc(3s * var(--poi-anim-speed, 1)) ease-in-out infinite;
}

.poi-scene[data-variant="float"] .poi-tilt {
  animation: poi-sway calc(6s * var(--poi-anim-speed, 1)) ease-in-out infinite;
}

.poi-scene[data-variant="float"] .poi-shadow {
  animation: poi-shadow-float calc(3s * var(--poi-anim-speed, 1)) ease-in-out infinite;
}

.poi-scene[data-variant="float"] .poi-bg-far,
.poi-scene[data-variant="float"] .poi-bg-near {
  animation: none;
}

.poi-scene[data-variant="float"] .poi-bg-far {
  transform: translateX(-40vw);
}

.poi-scene[data-variant="float"] .poi-bg-near {
  transform: translateX(-20vw);
}

.poi-scene[data-variant="float"] .poi-props > i {
  display: block;
  bottom: -8vh;
  width: calc(var(--poi-actor-size) * .1);
  height: calc(var(--poi-actor-size) * .1);
  border-radius: 50%;
  background-image: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, .12) 40%, rgba(0, 0, 0, 0) 72%);
  background-color: rgba(200, 190, 255, .22);
  box-shadow: 0 0 calc(var(--poi-actor-size) * .18) rgba(220, 210, 255, .18);
  opacity: .8;
  will-change: transform, opacity;
  animation: poi-orb calc(6s * var(--poi-anim-speed, 1)) linear infinite;
}

.poi-scene[data-variant="float"] .poi-props > i:nth-child(1) { left: 16vw; --poi-ox: 16vw; animation-delay: -6s; }
.poi-scene[data-variant="float"] .poi-props > i:nth-child(2) { left: 38vw; --poi-ox: 38vw; animation-delay: -1.5s; }
.poi-scene[data-variant="float"] .poi-props > i:nth-child(3) { left: 62vw; --poi-ox: 62vw; animation-delay: -3s; }
.poi-scene[data-variant="float"] .poi-props > i:nth-child(4) { left: 84vw; --poi-ox: 84vw; animation-delay: -4.5s; }

/* --- coin --- */
.poi-scene[data-variant="coin"] .poi-cross,
.poi-scene[data-variant="coin"] .poi-shadow-cross {
  animation: none;
  transform: translateX(0);
}

.poi-scene[data-variant="coin"] .poi-hop {
  animation: poi-hop-coin calc(.75s * var(--poi-anim-speed, 1)) ease-in-out infinite;
}

.poi-scene[data-variant="coin"] .poi-tilt {
  animation: poi-tilt-coin calc(1.5s * var(--poi-anim-speed, 1)) ease-in-out infinite;
}

.poi-scene[data-variant="coin"] .poi-shadow {
  animation: poi-shadow-scale calc(.75s * var(--poi-anim-speed, 1)) ease-in-out infinite;
}

.poi-scene[data-variant="coin"] .poi-bg-far,
.poi-scene[data-variant="coin"] .poi-bg-near {
  animation: none;
}

.poi-scene[data-variant="coin"] .poi-bg-far {
  transform: translateX(-40vw);
}

.poi-scene[data-variant="coin"] .poi-bg-near {
  transform: translateX(-20vw);
}

.poi-scene[data-variant="coin"] .poi-props > i {
  display: block;
  left: calc(50% - (var(--poi-actor-size) * .055));
  top: calc(50% + (var(--poi-actor-size) * (var(--poi-foot-pad) - .055)));
  width: calc(var(--poi-actor-size) * .11);
  height: calc(var(--poi-actor-size) * .11);
  border-radius: 50%;
  background-image:
    radial-gradient(circle at 35% 35%, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 55%),
    radial-gradient(circle, rgba(240, 190, 80, 1) 0%, rgba(180, 130, 30, 1) 62%, rgba(120, 85, 15, 1) 100%);
  background-color: rgba(240, 190, 80, .95);
  box-shadow:
    0 0 calc(var(--poi-actor-size) * .08) rgba(240, 190, 80, .5),
    inset 0 0 0 2px rgba(255, 255, 255, .25),
    inset 0 0 0 4px rgba(200, 150, 40, .55);
  will-change: transform, opacity;
  animation: poi-coin calc(6s * var(--poi-anim-speed, 1)) linear infinite;
}

.poi-scene[data-variant="coin"] .poi-props > i:nth-child(1) { --poi-cx: -18vw; animation-delay: -6s; }
.poi-scene[data-variant="coin"] .poi-props > i:nth-child(2) { --poi-cx: -6vw; animation-delay: -1.5s; }
.poi-scene[data-variant="coin"] .poi-props > i:nth-child(3) { --poi-cx: 6vw; animation-delay: -3s; }
.poi-scene[data-variant="coin"] .poi-props > i:nth-child(4) { --poi-cx: 18vw; animation-delay: -4.5s; }

/* --- heli --- */
.poi-scene[data-variant="heli"] .poi-cross,
.poi-scene[data-variant="heli"] .poi-shadow-cross {
  animation: none;
  transform: translateX(0);
}

.poi-scene[data-variant="heli"] .poi-actor {
  width: calc(var(--poi-actor-size) * 1.45);
  margin-left: calc(var(--poi-actor-size) * -.725);
  margin-top: calc(var(--poi-actor-size) * -1.05);
}

.poi-scene[data-variant="heli"] .poi-hop {
  animation: poi-hover calc(6s * var(--poi-anim-speed, 1)) ease-in-out infinite;
}

.poi-scene[data-variant="heli"] .poi-tilt {
  animation: poi-sway-heli calc(3s * var(--poi-anim-speed, 1)) ease-in-out infinite;
}

.poi-scene[data-variant="heli"] .poi-shadow {
  animation: poi-shadow-heli calc(6s * var(--poi-anim-speed, 1)) ease-in-out infinite;
}

.poi-scene[data-variant="heli"] .poi-bg-far {
  background-image:
    radial-gradient(ellipse 11vw 3.4vw at 24% 26%, rgba(190, 182, 235, .22) 0%, rgba(190, 182, 235, .14) 50%, rgba(0, 0, 0, 0) 80%),
    radial-gradient(ellipse 8vw 2.6vw at 68% 52%, rgba(190, 182, 235, .16) 0%, rgba(190, 182, 235, .10) 50%, rgba(0, 0, 0, 0) 80%);
  background-size:
    40vw 100%,
    40vw 100%;
  background-position:
    0 0,
    0 0;
  background-repeat:
    repeat-x,
    repeat-x;
  animation: poi-bg-far calc(3s * var(--poi-anim-speed, 1)) linear infinite;
}

.poi-scene[data-variant="heli"] .poi-bg-near {
  background-image:
    linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 12%, rgba(34, 34, 60, .85) 12%, rgba(34, 34, 60, .85) 52%, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 30%, rgba(22, 22, 42, .96) 30%, rgba(22, 22, 42, .96) 62%, rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 58%, rgba(34, 34, 60, .85) 58%, rgba(34, 34, 60, .85) 88%, rgba(0, 0, 0, 0) 88%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 6%, rgba(22, 22, 42, .96) 6%, rgba(22, 22, 42, .96) 30%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 100%);
  background-size:
    10vw 20%,
    5vw 28%,
    10vw 14%,
    5vw 24%;
  background-position:
    0 100%,
    2vw 100%,
    6vw 100%,
    12vw 100%;
  background-repeat: repeat-x;
  animation: poi-bg-near-heli calc(1.5s * var(--poi-anim-speed, 1)) linear infinite;
}

.poi-scene[data-variant="heli"] .poi-ground {
  opacity: .55;
}

.poi-scene[data-variant="heli"] .poi-props > i {
  display: none;
}
/* --- ninja --- */
.poi-scene[data-variant="ninja"] .poi-cross {
  z-index: 1;
  animation: poi-ninja-rise calc(6s * var(--poi-anim-speed, 1)) ease-out infinite;
}

.poi-scene[data-variant="ninja"] .poi-hop {
  animation: poi-ninja-breath calc(3s * var(--poi-anim-speed, 1)) ease-in-out infinite;
}

.poi-scene[data-variant="ninja"] .poi-tilt {
  animation: poi-ninja-lean calc(3s * var(--poi-anim-speed, 1)) ease-in-out infinite;
}

.poi-scene[data-variant="ninja"] .poi-shadow-cross {
  animation: none;
  transform: translateX(0);
}

.poi-scene[data-variant="ninja"] .poi-shadow {
  animation: poi-ninja-shadow calc(6s * var(--poi-anim-speed, 1)) ease-in-out infinite;
}

.poi-scene[data-variant="ninja"] .poi-bg-far,
.poi-scene[data-variant="ninja"] .poi-bg-near {
  animation: none;
}

.poi-scene[data-variant="ninja"] .poi-bg-far {
  transform: translateX(-40vw);
}

.poi-scene[data-variant="ninja"] .poi-bg-near {
  transform: translateX(-20vw);
}

.poi-scene[data-variant="ninja"] .poi-props > i:nth-child(1) {
  display: block;
  left: calc(50% - (var(--poi-actor-size) * .09));
  top: calc(50% - (var(--poi-actor-size) * .35));
  width: calc(var(--poi-actor-size) * .18);
  height: calc(var(--poi-actor-size) * .18);
  border-radius: 4px;
  background-image:
    linear-gradient(45deg, rgba(0, 0, 0, 0) 45%, rgba(207, 211, 224, .92) 50%, rgba(0, 0, 0, 0) 55%),
    linear-gradient(135deg, rgba(0, 0, 0, 0) 45%, rgba(207, 211, 224, .92) 50%, rgba(0, 0, 0, 0) 55%),
    radial-gradient(circle, rgba(207, 211, 224, .92) 0%, rgba(207, 211, 224, .92) 22%, rgba(0, 0, 0, 0) 26%);
  background-color: rgba(0, 0, 0, 0);
  box-shadow: 0 0 calc(var(--poi-actor-size) * .06) rgba(207, 211, 224, .35);
  will-change: transform, opacity;
  animation: poi-shuriken calc(6s * var(--poi-anim-speed, 1)) linear infinite;
}

.poi-scene[data-variant="ninja"] .poi-props > i:nth-child(2) {
  display: block;
  z-index: 2;
  left: calc(50% - (var(--poi-actor-size) * .45));
  top: calc(50% - (var(--poi-actor-size) * .45));
  width: calc(var(--poi-actor-size) * .9);
  height: calc(var(--poi-actor-size) * .9);
  border-radius: 50%;
  background-image: radial-gradient(circle, rgba(226, 226, 236, .85) 0%, rgba(226, 226, 236, .45) 40%, rgba(0, 0, 0, 0) 72%);
  filter: blur(calc(var(--poi-actor-size) * .08));
  will-change: transform, opacity;
  animation: poi-smoke calc(6s * var(--poi-anim-speed, 1)) ease-out infinite;
}

.poi-scene[data-variant="ninja"] .poi-props > i:nth-child(3),
.poi-scene[data-variant="ninja"] .poi-props > i:nth-child(4) {
  display: none;
}

/* --- rise --- */
.poi-scene[data-variant="rise"] {
  --poi-foot-pad: .1426;
}

.poi-scene[data-variant="rise"] .poi-cross {
  animation: poi-rise-cross calc(6s * var(--poi-anim-speed, 1)) linear infinite;
}

.poi-scene[data-variant="rise"] .poi-hop {
  animation: poi-rise-hop calc(6s * var(--poi-anim-speed, 1)) ease-in-out infinite;
}

.poi-scene[data-variant="rise"] .poi-tilt {
  animation: poi-rise-tilt calc(6s * var(--poi-anim-speed, 1)) ease-in-out infinite;
}

.poi-scene[data-variant="rise"] .poi-actor {
  background-image: none;
}

.poi-scene[data-variant="rise"] .poi-cel-1,
.poi-scene[data-variant="rise"] .poi-cel-2,
.poi-scene[data-variant="rise"] .poi-cel-3,
.poi-scene[data-variant="rise"] .poi-cel-4 {
  display: block;
}

.poi-scene[data-variant="rise"] .poi-cel-1 {
  background-image: var(--poi-cel-1);
  background-position: center;
  animation: poi-cel-run calc(6s * var(--poi-anim-speed, 1)) steps(1, end) infinite;
}

.poi-scene[data-variant="rise"] .poi-cel-2 {
  background-image: var(--poi-cel-2);
  background-position: center calc(50% + var(--poi-actor-size) * .0176);
  animation: poi-cel-trip calc(6s * var(--poi-anim-speed, 1)) steps(1, end) infinite;
}

.poi-scene[data-variant="rise"] .poi-cel-3 {
  background-image: var(--poi-cel-3);
  background-position: center calc(50% + var(--poi-actor-size) * .1035);
  animation: poi-cel-fallen calc(6s * var(--poi-anim-speed, 1)) steps(1, end) infinite;
}

.poi-scene[data-variant="rise"] .poi-cel-4 {
  background-image: var(--poi-cel-4);
  background-position: center calc(50% + var(--poi-actor-size) * .0312);
  animation: poi-cel-main calc(6s * var(--poi-anim-speed, 1)) steps(1, end) infinite;
}

.poi-scene[data-variant="rise"] .poi-shadow-cross {
  animation: poi-rise-cross calc(6s * var(--poi-anim-speed, 1)) linear infinite;
}

.poi-scene[data-variant="rise"] .poi-shadow {
  animation: poi-rise-shadow calc(6s * var(--poi-anim-speed, 1)) ease-in-out infinite;
}

.poi-scene[data-variant="rise"] .poi-bg-far {
  animation: poi-bg-far-rise calc(6s * var(--poi-anim-speed, 1)) linear infinite;
}

.poi-scene[data-variant="rise"] .poi-bg-near {
  animation: poi-bg-near-rise calc(6s * var(--poi-anim-speed, 1)) linear infinite;
}

.poi-scene[data-variant="rise"] .poi-props > i {
  display: none;
}


@keyframes poi-cross {
  0%, 100% { transform: translateX(calc(50vw + var(--poi-actor-size))); opacity: 0; }
  2%, 97% { opacity: 0; }
  3%, 93% { opacity: 1; }
  93% { transform: translateX(calc(-50vw - var(--poi-actor-size))); }
  95% { transform: translateX(calc(-50vw - var(--poi-actor-size))); }
  98% { transform: translateX(calc(50vw + var(--poi-actor-size))); }
}

@keyframes poi-hop {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

@keyframes poi-tilt {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}

@keyframes poi-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

@keyframes poi-shadow-cross {
  0%, 100% { transform: translateX(calc(50vw + var(--poi-actor-size))); opacity: 0; }
  2%, 97% { opacity: 0; }
  3%, 93% { opacity: 1; }
  93% { transform: translateX(calc(-50vw - var(--poi-actor-size))); }
  95% { transform: translateX(calc(-50vw - var(--poi-actor-size))); }
  98% { transform: translateX(calc(50vw + var(--poi-actor-size))); }
}

@keyframes poi-shadow-scale {
  0%, 100% { transform: scale(1); opacity: .6; }
  50% { transform: scale(.72); opacity: .35; }
}

@keyframes poi-bg-far {
  0% { transform: translateX(-40vw); }
  100% { transform: translateX(0); }
}

@keyframes poi-bg-near {
  0% { transform: translateX(-20vw); }
  100% { transform: translateX(0); }
}

@keyframes poi-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

@keyframes poi-sway {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(2deg); }
}

@keyframes poi-shadow-float {
  0%, 100% { transform: scale(1); opacity: .6; }
  50% { transform: scale(.8); opacity: .4; }
}

@keyframes poi-hop-coin {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-16px); }
}

@keyframes poi-tilt-coin {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}

@keyframes poi-hover {
  0%, 100% { transform: translateY(0); }
  25% { transform: translateY(-16px); }
  50% { transform: translateY(0); }
  75% { transform: translateY(9px); }
}

@keyframes poi-sway-heli {
  0%, 100% { transform: rotate(-2.5deg); }
  50% { transform: rotate(2.5deg); }
}

@keyframes poi-shadow-heli {
  0%, 50%, 100% { transform: scale(1); opacity: .32; }
  25% { transform: scale(.7); opacity: .2; }
  75% { transform: scale(.85); opacity: .28; }
}

@keyframes poi-orb {
  0%, 100% { transform: translateY(0); opacity: 0; }
  12% { opacity: .5; }
  50% { transform: translateY(-70vh); opacity: .15; }
  88% { opacity: 0; }
}

@keyframes poi-coin {
  0%, 100% { transform: translate(var(--poi-cx), -60vh) scale(.9); opacity: 0; }
  3% { opacity: 1; }
  20% { transform: translate(0, 0) scale(.45); opacity: 1; }
  24% { transform: translate(0, 0) scale(0); opacity: 0; }
}

@keyframes poi-bg-near-heli {
  0% { transform: translateX(-20vw); }
  100% { transform: translateX(0); }
}


@keyframes poi-ninja-rise {
  0%, 100% { transform: translate(0, 140px); opacity: 0; }
  5% { transform: translate(0, 0); opacity: 1; }
  90% { transform: translate(0, 0); opacity: 1; }
  95% { transform: translate(0, -12px); opacity: 0; }
}

@keyframes poi-ninja-breath {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes poi-ninja-lean {
  0%, 100% { transform: rotate(-1.5deg); }
  50% { transform: rotate(1.5deg); }
}

@keyframes poi-ninja-shadow {
  0%, 100% { transform: scale(1); opacity: 0; }
  5% { transform: scale(.85); opacity: .5; }
  45% { transform: scale(.92); opacity: .5; }
  90% { transform: scale(.85); opacity: .5; }
  95% { transform: scale(1); opacity: 0; }
}

@keyframes poi-shuriken {
  0%, 41.5% { transform: translateX(60vw) rotate(0deg); opacity: 0; }
  42% { transform: translateX(56vw) rotate(120deg); opacity: 1; }
  52% { transform: translateX(-56vw) rotate(1560deg); opacity: 1; }
  52.5%, 100% { transform: translateX(-60vw) rotate(1680deg); opacity: 0; }
}

@keyframes poi-smoke {
  0%, 88% { transform: scale(0); opacity: 0; }
  91% { transform: scale(1); opacity: .62; }
  98% { transform: scale(1.9); opacity: 0; }
  99%, 100% { transform: scale(0); opacity: 0; }
}

@keyframes poi-rise-cross {
  0% { transform: translateX(26vw); }
  30% { transform: translateX(0); }
  95% { transform: translateX(0); }
  100% { transform: translateX(26vw); }
}

@keyframes poi-rise-hop {
  0%, 2.5% { transform: translateY(0); }
  5% { transform: translateY(-14px); }
  7.5% { transform: translateY(0); }
  10% { transform: translateY(-14px); }
  12.5% { transform: translateY(0); }
  15% { transform: translateY(-14px); }
  17.5% { transform: translateY(0); }
  20% { transform: translateY(-14px); }
  22.5% { transform: translateY(0); }
  25% { transform: translateY(-14px); }
  27.5% { transform: translateY(0); }
  30% { transform: translateY(-14px); }
  58% { transform: translateY(0); }
  66% { transform: translateY(-8px); }
  70% { transform: translateY(0); }
  95% { transform: translateY(0); }
  97.5% { transform: translateY(-14px); }
  100% { transform: translateY(0); }
}

@keyframes poi-rise-tilt {
  0% { transform: rotate(-3deg); }
  5% { transform: rotate(3deg); }
  10% { transform: rotate(-3deg); }
  15% { transform: rotate(3deg); }
  20% { transform: rotate(-3deg); }
  25% { transform: rotate(3deg); }
  30% { transform: rotate(8deg); }
  40% { transform: rotate(16deg); }
  44% { transform: rotate(0deg); }
  58% { transform: rotate(0deg); }
  68% { transform: rotate(360deg); }
  100% { transform: rotate(357deg); }
}

@keyframes poi-rise-shadow {
  0%, 2.5% { transform: scale(1); opacity: .5; }
  5% { transform: scale(.72); opacity: .5; }
  7.5% { transform: scale(1); opacity: .5; }
  10% { transform: scale(.72); opacity: .5; }
  12.5% { transform: scale(1); opacity: .5; }
  15% { transform: scale(.72); opacity: .5; }
  17.5% { transform: scale(1); opacity: .5; }
  20% { transform: scale(.72); opacity: .5; }
  22.5% { transform: scale(1); opacity: .5; }
  25% { transform: scale(.72); opacity: .5; }
  27.5% { transform: scale(1); opacity: .5; }
  30% { transform: scale(.72); opacity: .5; }
  40% { transform: scale(1.5, .6); opacity: .5; }
  44% { transform: scale(1.5, .6); opacity: .5; }
  58% { transform: scale(1.5, .6); opacity: .5; }
  66% { transform: scale(1.2); opacity: .5; }
  70% { transform: scale(1); opacity: .5; }
  95% { transform: scale(1); opacity: .5; }
  97.5% { transform: scale(.72); opacity: .5; }
  100% { transform: scale(1); opacity: .5; }
}

@keyframes poi-bg-far-rise {
  0% { transform: translateX(-40vw); }
  30% { transform: translateX(0); }
  30.01% { transform: translateX(-40vw); }
  100% { transform: translateX(-40vw); }
}

@keyframes poi-bg-near-rise {
  0% { transform: translateX(-20vw); }
  30% { transform: translateX(0); }
  30.01% { transform: translateX(-20vw); }
  100% { transform: translateX(-20vw); }
}

@keyframes poi-cel-run {
  0% { opacity: 1; animation-timing-function: steps(1, end); }
  28% { opacity: 1; animation-timing-function: steps(1, end); }
  32% { opacity: 0; animation-timing-function: steps(1, end); }
  93% { opacity: 0; animation-timing-function: steps(1, end); }
  97% { opacity: 1; animation-timing-function: steps(1, end); }
  100% { opacity: 1; animation-timing-function: steps(1, end); }
}

@keyframes poi-cel-trip {
  0% { opacity: 0; animation-timing-function: steps(1, end); }
  28% { opacity: 0; animation-timing-function: steps(1, end); }
  32% { opacity: 1; animation-timing-function: steps(1, end); }
  38% { opacity: 1; animation-timing-function: steps(1, end); }
  42% { opacity: 0; animation-timing-function: steps(1, end); }
  100% { opacity: 0; animation-timing-function: steps(1, end); }
}

@keyframes poi-cel-fallen {
  0% { opacity: 0; animation-timing-function: steps(1, end); }
  38% { opacity: 0; animation-timing-function: steps(1, end); }
  42% { opacity: 1; animation-timing-function: steps(1, end); }
  60% { opacity: 1; animation-timing-function: steps(1, end); }
  64% { opacity: 0; animation-timing-function: steps(1, end); }
  100% { opacity: 0; animation-timing-function: steps(1, end); }
}

@keyframes poi-cel-main {
  0% { opacity: 0; animation-timing-function: steps(1, end); }
  60% { opacity: 0; animation-timing-function: steps(1, end); }
  64% { opacity: 1; animation-timing-function: steps(1, end); }
  93% { opacity: 1; animation-timing-function: steps(1, end); }
  97% { opacity: 0; animation-timing-function: steps(1, end); }
  100% { opacity: 0; animation-timing-function: steps(1, end); }
}

@media (prefers-reduced-motion: reduce) {
  .poi-cross,
  .poi-shadow-cross {
    animation: none;
    transform: translateX(0);
  }

  .poi-bg-far,
  .poi-bg-near {
    animation: none;
    transform: translateX(-40vw);
  }

  .poi-bg-near {
    transform: translateX(-20vw);
  }

  .poi-tilt {
    animation: none;
    transform: rotate(0);
  }

  .poi-actor {
    animation: none;
    transform: scale(1);
  }

  .poi-hop {
    animation: poi-hop-reduce calc(1.5s * var(--poi-anim-speed, 1)) ease-in-out infinite;
  }

  .poi-shadow {
    animation: poi-shadow-reduce calc(1.5s * var(--poi-anim-speed, 1)) ease-in-out infinite;
  }
  .poi-scene[data-variant="ninja"] .poi-cross {
    animation: poi-ninja-rise-reduce calc(6s * var(--poi-anim-speed, 1)) ease-out infinite;
  }

  .poi-scene[data-variant="ninja"] .poi-hop {
    animation: poi-ninja-breath-reduce calc(3s * var(--poi-anim-speed, 1)) ease-in-out infinite;
  }

  .poi-scene[data-variant="ninja"] .poi-tilt {
    animation: poi-ninja-lean-reduce calc(3s * var(--poi-anim-speed, 1)) ease-in-out infinite;
  }

  .poi-scene[data-variant="ninja"] .poi-shadow {
    animation: poi-ninja-shadow-reduce calc(6s * var(--poi-anim-speed, 1)) ease-in-out infinite;
  }

  .poi-scene[data-variant="ninja"] .poi-props > i:nth-child(1) {
    animation: none;
    opacity: 0;
  }

  .poi-scene[data-variant="ninja"] .poi-props > i:nth-child(2) {
    animation: poi-smoke-reduce calc(6s * var(--poi-anim-speed, 1)) ease-out infinite;
  }

  .poi-scene[data-variant="rise"] .poi-cross {
    animation: poi-rise-cross-reduce calc(6s * var(--poi-anim-speed, 1)) ease-in-out infinite;
  }

  .poi-scene[data-variant="rise"] .poi-hop {
    animation: poi-rise-hop-reduce calc(6s * var(--poi-anim-speed, 1)) ease-in-out infinite;
  }

  .poi-scene[data-variant="rise"] .poi-tilt {
    animation: poi-rise-tilt-reduce calc(6s * var(--poi-anim-speed, 1)) ease-in-out infinite;
  }

  .poi-scene[data-variant="rise"] .poi-shadow {
    animation: poi-rise-shadow-reduce calc(6s * var(--poi-anim-speed, 1)) ease-in-out infinite;
  }

  .poi-scene[data-variant="rise"] .poi-bg-far {
    animation: none;
    transform: translateX(-40vw);
  }

  .poi-scene[data-variant="rise"] .poi-bg-near {
    animation: none;
    transform: translateX(-20vw);
  }

}

@keyframes poi-hop-reduce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes poi-shadow-reduce {
  0%, 100% { transform: scale(1); opacity: .6; }
  50% { transform: scale(.88); opacity: .5; }
}

/* --- reduced-motion overrides for new variants --- */
@media (prefers-reduced-motion: reduce) {
  .poi-scene[data-variant="float"] .poi-hop {
    animation: poi-float-reduce calc(6s * var(--poi-anim-speed, 1)) ease-in-out infinite;
  }

  .poi-scene[data-variant="float"] .poi-tilt,
  .poi-scene[data-variant="heli"] .poi-tilt {
    animation: none;
    transform: rotate(0);
  }

  .poi-scene[data-variant="float"] .poi-shadow {
    animation: poi-shadow-float-reduce calc(6s * var(--poi-anim-speed, 1)) ease-in-out infinite;
  }

  .poi-scene[data-variant="float"] .poi-props > i {
    animation: poi-orb-reduce calc(6s * var(--poi-anim-speed, 1)) linear infinite;
  }

  .poi-scene[data-variant="coin"] .poi-hop {
    animation: poi-hop-reduce calc(1.5s * var(--poi-anim-speed, 1)) ease-in-out infinite;
  }

  .poi-scene[data-variant="coin"] .poi-tilt {
    animation: poi-sway-reduce calc(3s * var(--poi-anim-speed, 1)) ease-in-out infinite;
  }

  .poi-scene[data-variant="coin"] .poi-shadow {
    animation: poi-shadow-reduce calc(1.5s * var(--poi-anim-speed, 1)) ease-in-out infinite;
  }

  .poi-scene[data-variant="coin"] .poi-props > i {
    animation: poi-coin-reduce calc(6s * var(--poi-anim-speed, 1)) linear infinite;
  }

  .poi-scene[data-variant="heli"] .poi-hop {
    animation: poi-hover-reduce calc(6s * var(--poi-anim-speed, 1)) ease-in-out infinite;
  }

  .poi-scene[data-variant="heli"] .poi-shadow {
    animation: poi-shadow-heli-reduce calc(6s * var(--poi-anim-speed, 1)) ease-in-out infinite;
  }

  .poi-scene[data-variant="heli"] .poi-bg-near {
    animation: none;
    transform: translateX(-20vw);
  }
}

@keyframes poi-float-reduce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes poi-sway-reduce {
  0%, 100% { transform: rotate(-1deg); }
  50% { transform: rotate(1deg); }
}

@keyframes poi-shadow-float-reduce {
  0%, 100% { transform: scale(1); opacity: .6; }
  50% { transform: scale(.9); opacity: .5; }
}

@keyframes poi-orb-reduce {
  0%, 100% { transform: translateY(0); opacity: 0; }
  12% { opacity: .2; }
  50% { transform: translateY(-20vh); opacity: .05; }
  88% { opacity: 0; }
}

@keyframes poi-coin-reduce {
  0%, 100% { transform: translate(var(--poi-cx), -20vh) scale(.9); opacity: 0; }
  3% { opacity: 1; }
  20% { transform: translate(0, 0) scale(.6); opacity: 1; }
  24% { transform: translate(0, 0) scale(0); opacity: 0; }
}

@keyframes poi-hover-reduce {
  0%, 100% { transform: translateY(0); }
  25% { transform: translateY(-5px); }
  50% { transform: translateY(0); }
  75% { transform: translateY(3px); }
}

@keyframes poi-shadow-heli-reduce {
  0%, 50%, 100% { transform: scale(1); opacity: .32; }
  25% { transform: scale(.9); opacity: .26; }
  75% { transform: scale(.95); opacity: .29; }
}

@keyframes poi-ninja-rise-reduce {
  0%, 100% { transform: translate(0, 40px); opacity: 0; }
  6% { transform: translate(0, 0); opacity: 1; }
  90% { transform: translate(0, 0); opacity: 1; }
  95% { transform: translate(0, -6px); opacity: 0; }
}

@keyframes poi-ninja-breath-reduce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

@keyframes poi-ninja-lean-reduce {
  0%, 100% { transform: rotate(-.5deg); }
  50% { transform: rotate(.5deg); }
}

@keyframes poi-ninja-shadow-reduce {
  0%, 100% { transform: scale(1); opacity: 0; }
  6% { transform: scale(.9); opacity: .35; }
  90% { transform: scale(.9); opacity: .35; }
  95% { transform: scale(1); opacity: 0; }
}

@keyframes poi-smoke-reduce {
  0%, 88% { transform: scale(0); opacity: 0; }
  91% { transform: scale(1); opacity: .3; }
  98% { transform: scale(1.3); opacity: 0; }
  99%, 100% { transform: scale(0); opacity: 0; }
}

@keyframes poi-rise-cross-reduce {
  0%, 100% { transform: translateX(0); }
}

@keyframes poi-rise-hop-reduce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes poi-rise-tilt-reduce {
  0%, 100% { transform: rotate(-1deg); }
  50% { transform: rotate(1deg); }
}

@keyframes poi-rise-shadow-reduce {
  0%, 100% { transform: scale(1); opacity: .5; }
  50% { transform: scale(.9); opacity: .5; }
}

/* --- knight: 鎧を着たポイ之信がその場で剣を素振りする（NantonaKen専用） [社長確定] 2026-08-29
   「このゲーム専用にポイ之信が鎧着て剣を素振りしているアニメーションを新たに作ってほしい」
   横断移動はさせず、画面中央で構え→振り上げ→振り下ろし→振り切りの4コマを回す --- */
.poi-scene[data-variant="knight"] { --poi-foot-pad: .0469; }

.poi-scene[data-variant="knight"] .poi-cross { animation: none; }

.poi-scene[data-variant="knight"] .poi-hop {
  animation: poi-knight-hop calc(1.6s * var(--poi-anim-speed, 1)) ease-in-out infinite;
}

.poi-scene[data-variant="knight"] .poi-tilt {
  animation: poi-knight-tilt calc(1.6s * var(--poi-anim-speed, 1)) ease-in-out infinite;
}

.poi-scene[data-variant="knight"] .poi-actor {
  background-image: none;
  animation: none;
}

.poi-scene[data-variant="knight"] .poi-cel-1,
.poi-scene[data-variant="knight"] .poi-cel-2,
.poi-scene[data-variant="knight"] .poi-cel-3,
.poi-scene[data-variant="knight"] .poi-cel-4 { display: block; }

.poi-scene[data-variant="knight"] .poi-cel-1 {
  background-image: var(--poi-cel-1);
  animation: poi-cel-k1 calc(1.6s * var(--poi-anim-speed, 1)) steps(1, end) infinite;
}

.poi-scene[data-variant="knight"] .poi-cel-2 {
  background-image: var(--poi-cel-2);
  animation: poi-cel-k2 calc(1.6s * var(--poi-anim-speed, 1)) steps(1, end) infinite;
}

.poi-scene[data-variant="knight"] .poi-cel-3 {
  background-image: var(--poi-cel-3);
  animation: poi-cel-k3 calc(1.6s * var(--poi-anim-speed, 1)) steps(1, end) infinite;
}

.poi-scene[data-variant="knight"] .poi-cel-4 {
  background-image: var(--poi-cel-4);
  animation: poi-cel-k4 calc(1.6s * var(--poi-anim-speed, 1)) steps(1, end) infinite;
}

.poi-scene[data-variant="knight"] .poi-shadow-cross { animation: none; }

.poi-scene[data-variant="knight"] .poi-shadow {
  animation: poi-knight-shadow calc(1.6s * var(--poi-anim-speed, 1)) ease-in-out infinite;
}

.poi-scene[data-variant="knight"] .poi-props > i { display: none; }

@keyframes poi-cel-k1 {
  0% { opacity: 1; }
  30% { opacity: 0; }
  88% { opacity: 1; }
  100% { opacity: 1; }
}

@keyframes poi-cel-k2 {
  0% { opacity: 0; }
  30% { opacity: 1; }
  48% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes poi-cel-k3 {
  0% { opacity: 0; }
  48% { opacity: 1; }
  62% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes poi-cel-k4 {
  0% { opacity: 0; }
  62% { opacity: 1; }
  88% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes poi-knight-hop {
  0% { transform: translateY(0); }
  30% { transform: translateY(0); }
  46% { transform: translateY(-5px); }
  58% { transform: translateY(4px); }
  78% { transform: translateY(1px); }
  100% { transform: translateY(0); }
}

@keyframes poi-knight-tilt {
  0% { transform: rotate(0deg); }
  30% { transform: rotate(0deg); }
  46% { transform: rotate(-3deg); }
  58% { transform: rotate(4deg); }
  78% { transform: rotate(1deg); }
  100% { transform: rotate(0deg); }
}

@keyframes poi-knight-shadow {
  0% { transform: scale(1); opacity: .55; }
  30% { transform: scale(1); opacity: .55; }
  46% { transform: scale(.92); opacity: .48; }
  58% { transform: scale(1.08); opacity: .62; }
  100% { transform: scale(1); opacity: .55; }
}

@media (prefers-reduced-motion: reduce) {
  .poi-scene[data-variant="knight"] .poi-hop,
  .poi-scene[data-variant="knight"] .poi-tilt,
  .poi-scene[data-variant="knight"] .poi-shadow { animation: none; }
}