/* portrait 样式 + BGM 控制按钮
   追加在 style.css 末尾, 沿用设计 token (var(--accent), var(--radius) 等)
*/

/* ============ Portrait ============ */
.portrait {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 8px;
  padding: 8px;
  border-radius: var(--radius);
  transition: all 0.4s ease;
}

.portrait-emoji {
  font-size: inherit;
  line-height: 1;
  display: inline-block;
  transition: all 0.4s ease;
}

.portrait-label {
  font-size: 11px;
  color: var(--fg-2);
  letter-spacing: 0.1em;
}

/* Mood 滤镜 */
.portrait-idle .portrait-emoji { filter: none; }
.portrait-tense .portrait-emoji {
  filter: hue-rotate(180deg) saturate(1.4) brightness(0.9);
  animation: portraitShake 0.4s ease-in-out infinite;
}
.portrait-sad .portrait-emoji {
  filter: grayscale(0.7) brightness(0.7);
  animation: portraitDroop 2s ease-in-out infinite;
}
.portrait-triumph .portrait-emoji {
  filter: drop-shadow(0 0 8px var(--accent));
  animation: portraitGlow 2s ease-in-out infinite;
}
.portrait-reveal .portrait-emoji {
  filter: hue-rotate(280deg) saturate(1.6) drop-shadow(0 0 12px #b066ff);
  animation: portraitSpin 4s linear infinite;
}

@keyframes portraitShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  75% { transform: translateX(2px); }
}
@keyframes portraitDroop {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}
@keyframes portraitGlow {
  0%, 100% { filter: drop-shadow(0 0 4px var(--accent)); }
  50% { filter: drop-shadow(0 0 16px var(--accent)) brightness(1.2); }
}
@keyframes portraitSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 立绘入场 */
.portrait-entering {
  animation: portraitEnter 0.6s ease-out;
}
@keyframes portraitEnter {
  from { opacity: 0; transform: translateY(20px) scale(0.7); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* 立绘卡片 */
.portrait-stage {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 16px 0;
}

/* ============ BGM Toggle ============ */
.bgm-toggle {
  /* 9/8 加: 顶部 header 已有 BGM/TTS 按钮, 浮动按钮 hide (避免重复 + 重叠) */
  display: none !important;
}
.bgm-toggle:hover { border-color: var(--accent); color: var(--accent); }
.bgm-toggle.on { color: var(--accent); border-color: var(--accent); }
.bgm-toggle.muted { color: var(--fg-3); }
/* 9/7 修: mobile 时避开底部 sidebar (sidebar z-index 90, height 64px)
   之前 bgm-toggle bottom 16px + sidebar 64px 重叠, 用户点底部 tab 时喇叭挡住 */
@media (max-width: 768px) {
  .bgm-toggle { bottom: 80px; right: 16px; z-index: 95; }
  .tts-btn { bottom: 80px; right: 70px; z-index: 95; }
}
@media (max-width: 480px) {
  .bgm-toggle { bottom: 72px; right: 12px; width: 40px; height: 40px; font-size: 18px; }
  .tts-btn { bottom: 72px; right: 58px; width: 40px; height: 40px; font-size: 18px; }
}

/* ============ Cue 闪屏 (紧张时刻短暂视觉提示) ============ */
.cue-flash {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 50;
  opacity: 0;
}
.cue-flash.cue-tense {
  background: radial-gradient(circle at center, transparent 30%, rgba(255, 107, 53, 0.25) 100%);
  animation: cueFlashTense 0.6s ease-out;
}
.cue-flash.cue-triumph {
  background: radial-gradient(circle at center, transparent 30%, rgba(212, 175, 55, 0.3) 100%);
  animation: cueFlashTriumph 1.2s ease-out;
}
.cue-flash.cue-sad {
  background: radial-gradient(circle at center, transparent 30%, rgba(80, 80, 100, 0.35) 100%);
  animation: cueFlashSad 1.5s ease-out;
}
@keyframes cueFlashTense {
  0% { opacity: 0; }
  20% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes cueFlashTriumph {
  0% { opacity: 0; }
  20% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes cueFlashSad {
  0% { opacity: 0; }
  30% { opacity: 1; }
  100% { opacity: 0; }
}

/* 9/7 加: mobile disable backdrop-filter (GPU 杀手, 38 处磨砂玻璃会让 mobile 渲染慢)
   mobile 用 solid 背景替代, 性能提升 30-50% */
@media (max-width: 768px) {
  * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  /* 但保留部分关键元素的视觉 */
  .script-card, .ending-card, .modal, .tutorial-card, .minigame-card {
    background: var(--bg-2) !important;
  }
}