/* ==========================================================================
   Glassmorphism Shaders & Multifaceted Crystal Textures
   ========================================================================== */

/* Grid Cell Container */
.grid-cell {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Base Glass Block */
.glass-block {
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  border-radius: 3px;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.08s ease-out, filter 0.15s ease-out;
}

/* Glass Reflection Layer 1: Top-Left Specular Highlight */
.glass-block::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 3px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.45) 0%,
    rgba(255, 255, 255, 0.1) 40%,
    transparent 60%,
    rgba(255, 255, 255, 0.1) 100%
  );
  pointer-events: none;
  z-index: 2;
}

/* Glass Reflection Layer 2: Sharp Corner Bevel */
.glass-block::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;
  width: 55%;
  height: 55%;
  border-radius: 3px 0 0 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.6) 0%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 3;
}

/* --------------------------------------------------------------------------
   7 Color Themes with Crystal Textures, Specular Depth & Neon Aura
   -------------------------------------------------------------------------- */

/* I - Cyan (青色水晶玻璃) */
.glass-cyan {
  background-color: #00f2fe;
  background-image: url('../assets/glass_cyan.webp');
  box-shadow: 0 0 10px rgba(0, 242, 254, 0.75), inset 0 0 15px rgba(255, 255, 255, 0.35);
  color: #00f2fe;
}

/* O - Yellow (金黄晶体玻璃) */
.glass-yellow {
  background-color: #ffd700;
  background-image: url('../assets/glass_yellow.webp');
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.75), inset 0 0 15px rgba(255, 255, 255, 0.35);
  color: #ffd700;
}

/* T - Purple (紫水晶玻璃) */
.glass-purple {
  background-color: #9d4edd;
  background-image: url('../assets/glass_purple.webp');
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.75), inset 0 0 15px rgba(255, 255, 255, 0.35);
  color: #c084fc;
}

/* S - Green (翡翠绿玻璃) */
.glass-green {
  background-color: #10b981;
  background-image: url('../assets/glass_green.webp');
  box-shadow: 0 0 10px rgba(50, 205, 50, 0.75), inset 0 0 15px rgba(255, 255, 255, 0.35);
  color: #34d399;
}

/* Z - Red (红宝石玻璃) */
.glass-red {
  background-color: #ef4444;
  background-image: url('../assets/glass_red.webp');
  box-shadow: 0 0 10px rgba(255, 50, 50, 0.75), inset 0 0 15px rgba(255, 255, 255, 0.35);
  color: #f87171;
}

/* J - Blue (蓝宝石玻璃) */
.glass-blue {
  background-color: #3b82f6;
  background-image: url('../assets/glass_blue.webp');
  box-shadow: 0 0 10px rgba(30, 144, 255, 0.75), inset 0 0 15px rgba(255, 255, 255, 0.35);
  color: #60a5fa;
}

/* L - Orange (蜜蜡橙玻璃) */
.glass-orange {
  background-color: #f97316;
  background-image: url('../assets/glass_orange.webp');
  box-shadow: 0 0 10px rgba(255, 165, 0, 0.75), inset 0 0 15px rgba(255, 255, 255, 0.35);
  color: #fb923c;
}

/* --------------------------------------------------------------------------
   Active Falling Piece (Intense Neon Outline Bloom like Reference Image)
   -------------------------------------------------------------------------- */
.glass-block.glass-active {
  box-shadow: 
    0 0 14px currentColor,
    0 0 6px #ffffff,
    inset 0 0 12px rgba(255, 255, 255, 0.8) !important;
  border: 1px solid #ffffff !important;
  filter: brightness(1.25) contrast(1.1) !important;
  z-index: 10;
}

/* --------------------------------------------------------------------------
   Ghost Piece (投影方块)
   -------------------------------------------------------------------------- */
.glass-ghost {
  background-image: none !important;
  background-color: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.08) !important;
  filter: none !important;
  opacity: 0.55;
  animation: ghostPulse 2s infinite ease-in-out;
}

.glass-ghost::before,
.glass-ghost::after {
  display: none !important;
}

@keyframes ghostPulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.65; }
}

/* --------------------------------------------------------------------------
   Clearing Row Flash & Screen Shake
   -------------------------------------------------------------------------- */
.glass-clearing {
  filter: brightness(2.6) contrast(1.3) !important;
  box-shadow: 0 0 24px #ffffff, inset 0 0 16px #ffffff !important;
  border-color: #ffffff !important;
  animation: clearFlash 0.3s ease-out forwards;
}

@keyframes clearFlash {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.08); opacity: 0.95; }
  100% { transform: scale(0.9); opacity: 0; }
}

/* Screen Shake Effect */
.screen-shake {
  animation: boardShake 0.3s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes boardShake {
  10%, 90% { transform: translate3d(-2px, -3px, 0); }
  20%, 80% { transform: translate3d(3px, 1px, 0); }
  30%, 50%, 70% { transform: translate3d(-3px, -2px, 0); }
  40%, 60% { transform: translate3d(3px, 3px, 0); }
}

/* Screen Flash Effect */
.screen-flash {
  animation: flashWhite 0.25s ease-out;
}

@keyframes flashWhite {
  0% { filter: brightness(1.7); }
  100% { filter: brightness(1); }
}