.gesture-mode {
  position: fixed;
  right: 18px;
  bottom: calc(74px + env(safe-area-inset-bottom, 0px));
  z-index: 1003;
  pointer-events: none;
  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    "Noto Sans JP",
    sans-serif;
}

.gesture-toggle,
.gesture-panel,
.gesture-status,
.gesture-pip,
.gesture-pip-restore {
  pointer-events: auto;
}

.gesture-toggle {
  appearance: none;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(12, 12, 12, 0.88);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.34);
  cursor: pointer;
  backdrop-filter: blur(12px);
}

.gesture-toggle.is-active {
  border-color: rgba(255, 59, 48, 0.38);
  background: rgba(255, 59, 48, 0.2);
}

.gesture-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  width: min(310px, calc(100vw - 36px));
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(12, 12, 12, 0.94);
  color: #fff;
  box-shadow: 0 22px 56px rgba(0, 0, 0, 0.44);
  backdrop-filter: blur(16px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity 0.18s ease,
    visibility 0.18s ease,
    transform 0.18s ease;
}

.gesture-panel.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.gesture-panel__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  cursor: pointer;
}

.gesture-panel h2 {
  margin: 0 34px 12px 0;
  color: #fff;
  font-size: 18px;
  line-height: 1.35;
}

.gesture-panel p {
  margin: 0 0 8px;
  color: rgba(255, 255, 255, 0.74);
  font-size: 13px;
  line-height: 1.7;
}

.gesture-start {
  appearance: none;
  width: 100%;
  min-height: 42px;
  margin-top: 12px;
  border: 1px solid rgba(255, 59, 48, 0.36);
  border-radius: 999px;
  background: rgba(255, 59, 48, 0.18);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.gesture-status {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  width: max-content;
  max-width: min(280px, calc(100vw - 36px));
  margin: 0;
  padding: 9px 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(12, 12, 12, 0.9);
  color: rgba(255, 255, 255, 0.86);
  font-size: 12px;
  font-weight: 800;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity 0.18s ease,
    visibility 0.18s ease,
    transform 0.18s ease;
}

.gesture-status.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.gesture-pip {
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
  width: min(240px, calc(100vw - 36px));
  padding: 9px;
  border: 1px solid rgba(126, 235, 255, 0.18);
  border-radius: 8px;
  background: rgba(8, 10, 12, 0.9);
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.4),
    0 0 24px rgba(84, 215, 255, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity 0.18s ease,
    visibility 0.18s ease,
    transform 0.18s ease;
}

.gesture-pip.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.gesture-pip.is-hidden {
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
}

.gesture-pip__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
  color: rgba(237, 253, 255, 0.86);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.12em;
}

.gesture-pip__hide,
.gesture-pip-restore {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.gesture-pip__hide {
  min-height: 26px;
  padding: 0 9px;
}

.gesture-pip__canvas {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  background: #050505;
}

.gesture-pip__feedback {
  min-height: 1.5em;
  margin: 7px 0 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.45;
}

.gesture-pip-restore {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  min-height: 34px;
  padding: 0 12px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity 0.18s ease,
    visibility 0.18s ease,
    transform 0.18s ease;
}

.gesture-pip-restore.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.gesture-video,
.gesture-canvas {
  position: fixed;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.gesture-effect-layer {
  position: fixed;
  inset: 0;
  z-index: 1002;
  pointer-events: none;
  overflow: hidden;
}

.gesture-effect {
  position: absolute;
  left: 50%;
  top: 50%;
  color: #fff;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.gesture-effect--motto-crystal {
  display: flex;
  gap: 0.08em;
  align-items: center;
  justify-content: center;
  font-size: clamp(72px, 13vw, 176px);
  font-weight: 950;
  letter-spacing: 0.08em;
  line-height: 1;
  perspective: 900px;
  transform-style: preserve-3d;
  filter:
    drop-shadow(0 0 18px rgba(255, 255, 255, 0.42))
    drop-shadow(0 0 46px rgba(111, 226, 255, 0.5));
  animation: gestureMottoFloat 3.25s ease-out forwards;
}

.gesture-effect--motto-crystal::before {
  content: "";
  position: absolute;
  inset: -0.38em -0.5em;
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.72), rgba(122, 236, 255, 0.24) 34%, transparent 66%);
  transform: translateZ(-60px);
  animation: gestureMottoFlash 0.78s ease-out forwards;
}

.gesture-effect--motto-crystal span {
  position: relative;
  z-index: 2;
  display: inline-block;
  color: transparent;
  background:
    linear-gradient(135deg, #ffffff 0%, #dbfbff 26%, #82ecff 44%, #ffffff 62%, #ffb7b1 100%);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow:
    0 0 18px rgba(255, 255, 255, 0.58),
    0 0 52px rgba(80, 222, 255, 0.68);
  transform-style: preserve-3d;
  animation: gestureCrystalLetter 3.05s cubic-bezier(0.16, 0.82, 0.2, 1) forwards;
}

.gesture-effect--motto-crystal span:nth-of-type(1) {
  --start-x: -44vw;
  --start-y: -32vh;
  --start-r: -48deg;
  animation-delay: 0ms;
}

.gesture-effect--motto-crystal span:nth-of-type(2) {
  --start-x: 36vw;
  --start-y: -26vh;
  --start-r: 42deg;
  animation-delay: 90ms;
}

.gesture-effect--motto-crystal span:nth-of-type(3) {
  --start-x: -38vw;
  --start-y: 28vh;
  --start-r: 34deg;
  animation-delay: 160ms;
}

.gesture-effect--motto-crystal span:nth-of-type(4) {
  --start-x: 42vw;
  --start-y: 30vh;
  --start-r: -38deg;
  animation-delay: 230ms;
}

.gesture-crystal-shard {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(8px, 1.2vw, 18px);
  height: clamp(18px, 2vw, 32px);
  border-radius: 999px 999px 2px 2px;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.95), rgba(112, 234, 255, 0.58), rgba(255, 179, 171, 0.26));
  clip-path: polygon(50% 0, 100% 32%, 82% 100%, 16% 100%, 0 32%);
  opacity: 0;
  transform-origin: center;
  animation: gestureCrystalShard 2.4s cubic-bezier(0.16, 0.82, 0.2, 1) forwards;
  animation-delay: calc(var(--shard-index, 0) * 24ms);
}

.gesture-effect--scanline {
  inset: 0;
  left: 0;
  top: 0;
  transform: none;
  background:
    radial-gradient(circle at 50% 50%, rgba(102, 255, 245, 0.12), transparent 42%),
    linear-gradient(90deg, rgba(102, 255, 245, 0.12), transparent 28%, transparent 72%, rgba(102, 255, 245, 0.12)),
    repeating-linear-gradient(180deg, rgba(118, 244, 255, 0.1) 0 1px, transparent 1px 8px);
  mix-blend-mode: screen;
  animation: gestureScanlineShell 1.42s ease-out forwards;
}

.gesture-effect--scanline::before,
.gesture-effect--scanline::after {
  content: "";
  position: absolute;
  left: -12vw;
  right: -12vw;
  height: clamp(68px, 10vh, 120px);
  background:
    linear-gradient(180deg, transparent 0, rgba(115, 255, 244, 0.16) 18%, rgba(255, 255, 255, 0.92) 50%, rgba(115, 255, 244, 0.16) 82%, transparent 100%);
  filter: blur(1px);
  transform: skewY(-4deg);
  animation: gestureScanSweep 1.1s cubic-bezier(0.16, 0.82, 0.2, 1) forwards;
}

.gesture-effect--scanline::after {
  height: clamp(24px, 4vh, 44px);
  opacity: 0.62;
  animation-delay: 0.16s;
  transform: skewY(3deg);
}

.gesture-scanline__label {
  position: absolute;
  color: rgba(187, 255, 253, 0.86);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(13px, 1.8vw, 22px);
  font-weight: 850;
  letter-spacing: 0.18em;
  text-shadow: 0 0 18px rgba(84, 255, 234, 0.54);
}

.gesture-scanline__label--left {
  left: clamp(24px, 7vw, 96px);
  top: 24vh;
}

.gesture-scanline__label--right {
  right: clamp(24px, 8vw, 110px);
  bottom: 22vh;
}

.gesture-scanline__beam {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(126, 255, 245, 0.82), transparent);
  box-shadow: 0 0 22px rgba(126, 255, 245, 0.7);
  animation: gestureScanBeam 1.18s ease-out forwards;
}

.gesture-scanline__beam--a {
  top: 30%;
}

.gesture-scanline__beam--b {
  top: 50%;
  animation-delay: 0.1s;
}

.gesture-scanline__beam--c {
  top: 70%;
  animation-delay: 0.2s;
}

.gesture-scanline__reticle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(150px, 18vw, 260px);
  height: clamp(150px, 18vw, 260px);
  border: 1px solid rgba(166, 255, 248, 0.34);
  border-radius: 999px;
  transform: translate(-50%, -50%);
  box-shadow:
    0 0 34px rgba(104, 255, 244, 0.22),
    inset 0 0 34px rgba(104, 255, 244, 0.1);
  animation: gestureScanReticle 1.42s ease-out forwards;
}

.gesture-effect--cross {
  font-size: clamp(180px, 35vw, 420px);
  font-weight: 950;
  line-height: 0.8;
  color: rgba(255, 47, 54, 0.98);
  text-shadow:
    0 0 38px rgba(255, 59, 48, 0.58),
    0 0 96px rgba(255, 59, 48, 0.32);
  animation: gestureCrossPop 0.9s ease-out forwards;
}

.gesture-effect--fox {
  font-size: clamp(120px, 22vw, 280px);
  line-height: 1;
  filter:
    drop-shadow(0 0 18px rgba(255, 205, 95, 0.62))
    drop-shadow(0 0 68px rgba(255, 119, 47, 0.42));
  animation: gestureFoxPop 1.42s ease-out forwards;
}

.gesture-effect--auth {
  width: min(680px, calc(100vw - 42px));
  min-height: 420px;
  color: rgba(210, 255, 235, 0.95);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  animation: gestureAuthBoot 2.25s steps(9, end) forwards;
}

.gesture-auth__ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(68vw, 520px);
  height: min(68vw, 520px);
  border: 1px solid rgba(102, 255, 192, 0.28);
  border-radius: 999px;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle, transparent 52%, rgba(102, 255, 192, 0.1) 53% 54%, transparent 55%),
    conic-gradient(from 0deg, transparent 0 12%, rgba(102, 255, 192, 0.46) 12% 13%, transparent 13% 28%, rgba(128, 219, 255, 0.36) 28% 29%, transparent 29% 100%);
  box-shadow:
    0 0 42px rgba(102, 255, 192, 0.18),
    inset 0 0 42px rgba(102, 255, 192, 0.08);
  animation: gestureAuthRing 2.25s linear forwards;
}

.gesture-auth__ring--inner {
  width: min(42vw, 320px);
  height: min(42vw, 320px);
  animation-direction: reverse;
}

.gesture-auth__panel {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  gap: 8px;
  width: min(560px, calc(100vw - 58px));
  padding: 24px;
  border: 1px solid rgba(102, 255, 192, 0.4);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(3, 18, 16, 0.92), rgba(2, 9, 13, 0.82)),
    repeating-linear-gradient(180deg, rgba(97, 255, 202, 0.08) 0 1px, transparent 1px 7px);
  box-shadow:
    0 0 38px rgba(80, 255, 184, 0.28),
    inset 0 0 48px rgba(80, 255, 184, 0.1);
  transform: translate(-50%, -50%);
  overflow: hidden;
}

.gesture-auth__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.18), transparent);
  transform: translateX(-120%);
  animation: gestureAuthShine 1.05s ease-out 0.38s forwards;
}

.gesture-effect--auth b {
  position: relative;
  color: #fff;
  font-size: clamp(18px, 2.5vw, 34px);
  letter-spacing: 0.18em;
  text-shadow: 0 0 22px rgba(102, 255, 192, 0.5);
}

.gesture-effect--auth span {
  position: relative;
  display: block;
  font-size: clamp(12px, 1.5vw, 17px);
  letter-spacing: 0.12em;
}

.gesture-effect--auth strong {
  position: relative;
  display: block;
  margin-top: 4px;
  color: #fff;
  font-size: clamp(16px, 2.2vw, 28px);
  letter-spacing: 0.2em;
  text-shadow:
    0 0 18px rgba(102, 255, 192, 0.66),
    0 0 42px rgba(102, 255, 192, 0.36);
}

.gesture-auth__bar {
  position: relative;
  display: block;
  height: 6px;
  margin-top: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.gesture-auth__bar::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #66ffc0, #91e5ff, #fff);
  box-shadow: 0 0 18px rgba(102, 255, 192, 0.52);
  transform-origin: left;
  animation: gestureAuthBar 1.3s cubic-bezier(0.16, 0.82, 0.2, 1) forwards;
}

.gesture-firework {
  position: absolute;
  width: var(--firework-size, 7px);
  height: var(--firework-size, 7px);
  border-radius: 999px;
  background: hsl(var(--firework-hue, 0), 96%, 68%);
  box-shadow:
    0 0 18px hsl(var(--firework-hue, 0), 96%, 68%),
    0 0 42px hsl(var(--firework-hue, 0), 96%, 68%);
  animation: gestureFirework 1.45s ease-out forwards;
}

@keyframes gestureMottoFloat {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) rotateX(20deg) rotateY(-24deg) scale(0.96);
  }

  58% {
    opacity: 1;
    transform: translate(-50%, -53%) rotateX(10deg) rotateY(-14deg) scale(1.02);
  }

  80% {
    opacity: 1;
    transform: translate(-50%, -58%) rotateX(4deg) rotateY(-8deg) scale(1.03);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -64%) rotateX(0deg) rotateY(0deg) scale(1.08);
  }
}

@keyframes gestureMottoFlash {
  0%,
  30% {
    opacity: 0;
    transform: translateZ(-80px) scale(0.38);
    filter: blur(22px);
  }

  46% {
    opacity: 1;
    transform: translateZ(-70px) scale(1);
    filter: blur(0);
  }

  100% {
    opacity: 0;
    transform: translateZ(-90px) scale(1.38);
    filter: blur(18px);
  }
}

@keyframes gestureCrystalLetter {
  0% {
    opacity: 0;
    transform:
      translate3d(var(--start-x, 0), var(--start-y, 0), -280px)
      rotateX(64deg)
      rotateY(var(--start-r, 0deg))
      scale(0.46);
    filter: blur(12px);
  }

  42% {
    opacity: 1;
    transform:
      translate3d(0, 0, 44px)
      rotateX(18deg)
      rotateY(-16deg)
      scale(1.08);
    filter: blur(0);
  }

  64% {
    transform:
      translate3d(0, -4px, 72px)
      rotateX(9deg)
      rotateY(-10deg)
      scale(1.02);
  }

  100% {
    opacity: 0;
    transform:
      translate3d(0, -26px, 98px)
      rotateX(0deg)
      rotateY(0deg)
      scale(1.05);
  }
}

@keyframes gestureCrystalShard {
  0% {
    opacity: 0;
    transform:
      translate3d(var(--shard-x, 0), var(--shard-y, 0), -180px)
      rotate(30deg)
      scale(0.34);
  }

  44% {
    opacity: 0.9;
    transform:
      translate3d(0, 0, 60px)
      rotate(0deg)
      scale(1);
  }

  100% {
    opacity: 0;
    transform:
      translate3d(0, -36px, 90px)
      rotate(16deg)
      scale(0.72);
  }
}

@keyframes gestureScanlineShell {
  0% {
    opacity: 0;
    filter: blur(8px);
  }

  18%,
  82% {
    opacity: 1;
    filter: blur(0);
  }

  100% {
    opacity: 0;
    filter: blur(6px);
  }
}

@keyframes gestureScanSweep {
  0% {
    opacity: 0;
    transform: translateY(-65vh) skewY(-4deg);
  }

  24% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateY(65vh) skewY(-4deg);
  }
}

@keyframes gestureScanBeam {
  0% {
    opacity: 0;
    transform: translateX(-120%);
  }

  20%,
  70% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateX(120%);
  }
}

@keyframes gestureScanReticle {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.62) rotate(-18deg);
  }

  38%,
  76% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.2) rotate(18deg);
  }
}

@keyframes gestureCrossPop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.46) rotate(-10deg);
  }

  24% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.08) rotate(0deg);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.92) rotate(6deg);
  }
}

@keyframes gestureFoxPop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.58) rotate(-8deg);
  }

  24%,
  72% {
    opacity: 1;
    transform: translate(-50%, -54%) scale(1) rotate(0deg);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -62%) scale(1.08) rotate(8deg);
  }
}

@keyframes gestureAuthBoot {
  0% {
    opacity: 0;
    transform: translate(-50%, -48%) scale(0.94);
    clip-path: inset(50% 0 50% 0);
  }

  24% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }

  78% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -54%) scale(1.02);
    clip-path: inset(0 0 0 0);
  }
}

@keyframes gestureAuthRing {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.72) rotate(0deg);
  }

  18%,
  78% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.08) rotate(230deg);
  }
}

@keyframes gestureAuthShine {
  to {
    transform: translateX(120%);
  }
}

@keyframes gestureAuthBar {
  0% {
    transform: scaleX(0);
  }

  100% {
    transform: scaleX(1);
  }
}

@keyframes gestureFirework {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }

  76% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform:
      translate3d(var(--firework-x, 0px), var(--firework-y, 0px), 0)
      scale(0.08);
  }
}

@media (max-width: 640px) {
  .gesture-mode {
    right: 12px;
    bottom: calc(70px + env(safe-area-inset-bottom, 0px));
  }

  .gesture-pip {
    width: min(210px, calc(100vw - 24px));
  }
}