/* =====================================================================
   プログラミングコンテスト -THE JUDGE-  css/base.css
   共通：Tailwind 不達時のフォールバック、タイトル、選択肢ボタンなど基本 UI

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

/* ---------- フォールバック（Tailwind CDN が読めなくても進行可能に） ---------- */
[hidden] { display: none !important; }
body {
  margin: 0;
  background: #120b26;
  color: #fff;
  font-family: "Yu Gothic", "Hiragino Sans", Meiryo, sans-serif;
  overflow-x: hidden;
}
#app { max-width: 960px; margin: 0 auto; padding: 0 12px 130px; }
#stage { position: relative; background: #1a1233; border-radius: 16px; overflow: hidden; }
#judgesRow { display: flex; justify-content: space-around; align-items: flex-end; }
button { cursor: pointer; font-family: inherit; color: inherit; background: none; border: none; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- スポットライト（A2） ---------- */
#spotlight {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 55% 42% at 50% 18%, rgba(255, 215, 94, 0.16), transparent 70%),
    radial-gradient(ellipse 80% 55% at 50% 110%, rgba(0, 0, 0, 0.55), transparent 70%);
  animation: spotSway 7s ease-in-out infinite alternate;
}
@keyframes spotSway {
  from { transform: translateX(-2.5%); }
  to   { transform: translateX(2.5%); }
}
#stage.dim #spotlight { opacity: 0.35; }
#stage.dim { filter: brightness(0.8); }

/* ---------- タイトルロゴ ---------- */
.title-logo {
  color: #ffd75e;
  text-shadow: 0 2px 0 #7a5a00, 0 6px 24px rgba(255, 215, 94, 0.35);
}