/* ==========================================================
   [ CSS MODULE ] MASA_DEV_WORKS UI & CRT Effect   2026.07.03 14:59 ver UP
========================================================== */
body,
html {
  background-color: #0a0a0a;
  color: #d4d4d4;
  overscroll-behavior: none;
  touch-action: none;
  width: 100%;
  height: 100%;
  position: fixed;
  overflow: hidden;
}

.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #00ffcc;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

@keyframes crt-collapse {
  0% {
    transform: scaleY(1);
    opacity: 1;
    filter: brightness(1);
  }

  50% {
    transform: scaleY(0.02);
    opacity: 1;
    filter: brightness(3) drop-shadow(0 0 10px #00ffcc);
    background-color: #fff;
  }

  100% {
    transform: scaleY(0);
    opacity: 0;
    filter: brightness(1);
  }
}

@keyframes crt-expand {
  0% {
    transform: scaleY(0);
    opacity: 0;
    filter: brightness(3);
  }

  50% {
    transform: scaleY(0.02);
    opacity: 1;
    filter: brightness(3) drop-shadow(0 0 10px #00ffcc);
    background-color: #fff;
  }

  100% {
    transform: scaleY(1);
    opacity: 1;
    filter: brightness(1);
  }
}

.crt-switch-out {
  animation: crt-collapse 0.15s ease-in forwards;
  pointer-events: none;
}

.crt-switch-in {
  animation: crt-expand 0.15s ease-out forwards;
}

.neon-text-orange {
  text-shadow: 0 0 8px rgba(255, 153, 0, 0.8);
}

.neon-border-green {
  box-shadow: 0 0 8px rgba(0, 255, 204, 0.5);
}

.drag-over {
  border-top: 2px solid #00ffcc;
  padding-top: 2px;
}

/* ==========================================================
   [ CSS MODULE ] オープニングアニメーション
========================================================== */
.intro-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(10, 10, 10, 1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  cursor: pointer;
  transition: background-color 2.0s ease-out, backdrop-filter 2.0s ease-out, -webkit-backdrop-filter 2.0s ease-out;
}

.intro-logo-group {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  position: relative;
  user-select: none;
  transform-origin: center center;
}

.intro-logo {
  font-family: 'Courier New', Courier, monospace;
  font-weight: bold;
  letter-spacing: 2px;
  font-size: 2rem;
  white-space: nowrap;
  transform: rotate(-180deg);
  color: #666;
  text-shadow: none;
  animation: flipAndNeon 4s ease-in-out forwards;
  line-height: 1;
}

@keyframes flipAndNeon {
  0% {
    transform: rotate(-180deg);
    color: #666;
    text-shadow: none;
  }

  60% {
    transform: rotate(5deg);
    color: #666;
    text-shadow: none;
  }

  68% {
    transform: rotate(-2deg);
    color: #666;
    text-shadow: none;
  }

  75% {
    transform: rotate(0deg);
    color: #666;
    text-shadow: none;
  }

  76% {
    transform: rotate(0deg);
    color: #ff9900;
    text-shadow: 0 0 5px #ff9900, 0 0 15px #ff9900, 0 0 30px rgba(255, 153, 0, 0.8), 0 0 50px rgba(255, 153, 0, 0.5);
  }

  80% {
    transform: rotate(0deg);
    color: #666;
    text-shadow: none;
  }

  85% {
    transform: rotate(0deg);
    color: #ff9900;
    text-shadow: 0 0 5px #ff9900, 0 0 15px #ff9900, 0 0 30px rgba(255, 153, 0, 0.8), 0 0 50px rgba(255, 153, 0, 0.5);
  }

  90% {
    transform: rotate(0deg);
    color: #666;
    text-shadow: none;
  }

  100% {
    transform: rotate(0deg);
    color: #ff9900;
    text-shadow: 0 0 5px #ff9900, 0 0 10px #ff9900, 0 0 20px rgba(255, 153, 0, 0.9), 0 0 40px rgba(255, 153, 0, 0.6), 0 0 60px rgba(255, 153, 0, 0.3);
  }
}

.intro-gmint-logo {
  font-family: 'Courier New', Courier, monospace;
  font-size: 1.4rem;
  color: #00ffcc;
  letter-spacing: 2px;
  text-shadow: none;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateY(10px);
  animation: gmintAppear 0.5s ease-out 3.0s forwards;
  margin-top: -2px;
  line-height: 1;
}

@keyframes gmintAppear {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.intro-hint {
  position: absolute;
  bottom: -50px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(0, 255, 204, 0.5);
  font-size: 0.8rem;
  letter-spacing: 1px;
  pointer-events: none;
  opacity: 0;
  animation: showHint 1s ease-in-out 3.5s forwards;
  white-space: nowrap;
}

@keyframes showHint {
  to {
    opacity: 1;
  }
}

@keyframes flashEffect {
  0% {
    filter: brightness(1);
    transform: scale(1);
  }

  50% {
    filter: brightness(2) drop-shadow(0 0 10px #ff9900) drop-shadow(0 0 15px #00ffcc);
    transform: scale(1.05);
  }

  100% {
    filter: brightness(1);
    transform: scale(1);
  }
}

.flash-effect {
  animation: flashEffect 0.3s ease-out;
}

@keyframes particle-fade {
  0% {
    opacity: 1;
    filter: blur(0px);
    transform: translateX(-50%) scale(1);
    letter-spacing: 1px;
  }

  50% {
    opacity: 0.8;
    filter: blur(2px) drop-shadow(0 0 8px #00ffcc);
    transform: translateX(-50%) scale(1.1);
    letter-spacing: 5px;
    color: #00ffcc;
  }

  100% {
    opacity: 0;
    filter: blur(10px);
    transform: translateX(-50%) scale(1.5) translateY(-20px);
    letter-spacing: 10px;
    color: transparent;
  }
}

.fade-out-particles {
  animation: particle-fade 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

@keyframes modal-appear {
  0% {
    transform: scale(0.9);
    opacity: 0;
    filter: blur(5px);
  }

  100% {
    transform: scale(1);
    opacity: 1;
    filter: blur(0px);
  }
}

.animate-modal {
  animation: modal-appear 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* アイコン追加時の出現アニメーション */
@keyframes fly-in-from-bottom {
  0% {
    transform: translateY(var(--fly-in-dist, 400px));
    opacity: 0;
  }

  1% {
    transform: translateY(var(--fly-in-dist, 400px));
    opacity: 1;
  }

  12% {
    transform: translateY(var(--fly-in-dist, 400px));
    opacity: 1;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.animate-fly-in {
  animation: fly-in-from-bottom 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* ==========================================================
   [ CSS MODULE ] くねくね＆ドラッグアクション
========================================================== */
/* くねくね割り込みアニメーション（横入りバージョン） */
@keyframes kune-kune {
  0% {
    transform: scale(1) translateY(0) rotate(0deg);
  }

  20% {
    transform: scale(0.95) translateY(-6px) rotate(-8deg);
  }

  40% {
    transform: scale(1.05) translateY(6px) rotate(8deg);
  }

  60% {
    transform: scale(0.98) translateY(-4px) rotate(-4deg);
  }

  80% {
    transform: scale(1.02) translateY(4px) rotate(4deg);
  }

  100% {
    transform: scale(1) translateY(0) rotate(0deg);
  }
}

.animate-kunekune {
  /* ここがキモ！回転と揺れの「軸」を左辺の真ん中に固定する */
  transform-origin: left center !important;
  animation: kune-kune 0.45s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
}

/* ドラッグオーバー時に押しのけられる（場所を空ける）動き */
.drag-over-target {
  transform: translateY(12px) scale(0.95) !important;
  box-shadow: 0 -15px 10px -5px rgba(0, 255, 204, 0.3) !important;
  border-top-color: #00ffcc !important;
  opacity: 0.8;
}

/* ★追加：沈み込んだ時にマウスから逃げないように、透明なクッションを上に伸ばす */
.drag-over-target::before {
  content: "";
  position: absolute;
  top: -24px;
  /* 上に24px分、当たり判定を伸ばす */
  left: -10px;
  right: -10px;
  bottom: -10px;
  z-index: 10;
}