/* =====================================================================
   プログラミングコンテスト -THE JUDGE-  css/responsive.css
   レスポンシブ微調整と prefers-reduced-motion（§14）。他の css より後に読み込むこと（上書きのため）

   役割分担（設計書 §1.3 / §14）:
     - レイアウト・配色・タイポグラフィ … Tailwind（index.html 内の class）
     - CSS アート・複合 @keyframes・Tailwind 不達時のフォールバック … css/ 配下
   読み込み順（index.html）: base → judges → effects → responsive
   ===================================================================== */

/* =====================================================================
   レスポンシブ微調整
   ===================================================================== */
@media (max-width: 620px) {
  .judge .avatar { scale: 0.82; margin-bottom: -22px; }
  .judge .bubble { min-width: 104px; max-width: 150px; font-size: 11px; }
  #forbiddenBtn { padding: 10px 14px; }
  .fb-text { font-size: 13px; }
  #rankPlate { font-size: 22px; }
}

/* =====================================================================
   prefers-reduced-motion（§14）
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  #spotlight, #forbiddenBtn, .mock-btn, #forbiddenTip,
  .judge.sway .avatar, .judge.hiding .avatar, .judge.hiding .head,
  .judge.panic .avatar, .judge.panic .head, .judge.panic .hand,
  .fx-hand,
  #stage.shake-s, #stage.shake-m, #stage.shake-l,
  .fx-flame-cone, #emergencyLight {
    animation: none !important;
  }
  .card-inner { transition-duration: 0.15s; }
  #rankPlate.slam { animation: none; }
}