@charset "UTF-8";
/* 共用音訊開關按鈕（右上角 BGM / SFX）— 由 audio.js 控制 is-off 狀態
   shell index.html 的 .shell-top-right 是容器（見 shell.css）。本檔只負責按鈕本身的視覺。
   設計風格：呼應大廳的品牌色（黃→橘漸層、米色背景、深 ink 文字、圓角 + 柔陰影），
   開啟狀態用淡黃米底 + 深 ink 圖示；關閉狀態用灰調 + 斜線；hover 顯示品牌漸層光暈。 */
.btn-audio {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background:
    linear-gradient(140deg, #FFFFFF 0%, #F5EEDF 100%);
  color: #2D3436;
  cursor: pointer;
  transition: transform .15s ease, background .2s ease, box-shadow .2s ease, color .15s ease;
  box-shadow:
    0 4px 10px rgba(45, 52, 54, .15),
    inset 0 0 0 2px #E6A800;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}
.btn-audio:hover:not(:disabled) {
  transform: translateY(-2px);
  background: linear-gradient(140deg, #FFE48A 0%, #FFB454 100%);
  color: #1B2433;
  box-shadow:
    0 8px 18px rgba(255, 140, 66, .35),
    inset 0 0 0 2px rgba(255, 255, 255, .55);
}
.btn-audio:active:not(:disabled) {
  transform: translateY(0) scale(.94);
  box-shadow:
    0 2px 6px rgba(45, 52, 54, .2),
    inset 0 0 0 2px #E6A800;
}

.btn-audio svg {
  width: 20px;
  height: 20px;
  display: block;
  pointer-events: none;
  /* SVG path 在 24x24 viewBox 內幾何中心偏左（音符 x:3~17、喇叭 x:3~18），
     用 translateX 視覺上推回圓心 */
  transform: translateX(1.5px);
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .6));
}

/* 關閉狀態：去飽和米灰底、深灰圖示、顯示斜線 */
.btn-audio.is-off {
  background: linear-gradient(140deg, #E8E4DC 0%, #D5CFC2 100%);
  color: #4a5057;
  box-shadow:
    0 2px 6px rgba(45, 52, 54, .12),
    inset 0 0 0 2px rgba(45, 52, 54, .12);
}
.btn-audio.is-off:hover:not(:disabled) {
  background: linear-gradient(140deg, #EFEAE0 0%, #DDD6C7 100%);
  color: #2D3436;
  box-shadow:
    0 6px 14px rgba(45, 52, 54, .18),
    inset 0 0 0 2px rgba(45, 52, 54, .14);
}
.btn-audio.is-off .audio-slash { opacity: 1; }
.audio-slash { opacity: 0; transition: opacity .15s ease; }

@media (min-width: 900px) {
  .btn-audio { width: 46px; height: 46px; }
  .btn-audio svg { width: 24px; height: 24px; }
}