/* game.page.scss */
.game-container {
    --game-primary: #FF9A9E;
    --game-secondary: #A8EDEA;
    --game-accent: #6C5B7B;
  
    height: 100vh;
    overflow: hidden;
  
    .game-mode-switch {
      position: absolute;
      top: 16px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 10;
      width: 80%;
      max-width: 400px;
  
      ion-segment {
        --background: #ff9a9e;
        backdrop-filter: blur(10px);
        height: 40px;
      }
      
    }
  
    .canvas-container {
      width: 100%;
      height: calc(100% - 60px);
      touch-action: none;
    }
  
    .game-panel {
      position: absolute;
      bottom: 20px;
      left: 20px;
      right: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 20px;
      background: rgba(255,255,255,0.9);
      border-radius: 30px;
      backdrop-filter: blur(8px);
  
      .score-board {
        display: flex;
        align-items: center;
        gap: 8px;
        color: var(--game-accent);
        font-weight: 500;
  
        ion-icon {
          color: #FFD700;
          font-size: 24px;
        }
      }
    }
  
    .achievement-toast {
      position: fixed;
      top: -60px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(0,0,0,0.8);
      color: white;
      padding: 12px 24px;
      border-radius: 30px;
      display: flex;
      align-items: center;
      gap: 8px;
      transition: top 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  
      &.show {
        top: 20px;
      }
  
      ion-icon {
        color: #FFD700;
      }
    }
  }
  
  /* 泡泡爆破动画 */
  @keyframes pop {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.5); opacity: 0; }
  }

ion-icon[name^="volume"] {
transition: transform 0.3s ease;

&[name="volume-mute"] {
    animation: shake 0.5s ease;
}
}

@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-3px); }
75% { transform: translateX(3px); }
}