/* ==========================================================
   [ CSS MODULE ] MASA_DEV_WORKS UI & CRT Effect
========================================================== */
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;
}