/*
  PTCG Telop - PTCGLReplayer Theme (プロジェクト独自)

  プロジェクト既存パレット (app/assets/tailwind/application.css の @theme) に
  由来する配色で、公式 4 テーマと並んで選択できる第 5 テーマ。
  背景 PNG は同梱せず、element/ の共通素材を半透明で流用。
*/

.theme-ptcgl-replayer {
  /* 既存 player-* 変数由来:
   *   player-neutral #7C6FE8 → メインカラー (violet)
   *   player-blue    #6F8BE8 → 補助色 (cool violet)
   *   player-accent  #E8CD6F → ストローク (gold)
   */
  --main-color: #3A2E7A;
  --first-color: #7C6FE8;
  --second-color: rgba(124, 111, 232, 0.74);
  --third-color: rgba(58, 46, 122, 0.51);
  --stroke-color: #E8CD6F;
  --ability-tag-color: #E8906F;

  /* 背景画像は element/ の共通素材を借用 (テーマ固有の PNG は同梱せず軽量化) */
  --bg-active-slot:  url("/assets/ptcg_telop/element/active-bg-c1d6ec6e.png");
  --bg-bench-slot:   url("/assets/ptcg_telop/element/bench-bg-dfab59d7.png");
  --bg-player-area:  url("/assets/ptcg_telop/element/panel-bg-eeb98e72.png");
  --bg-side-area:    url("/assets/ptcg_telop/element/side-bg-a28fa8f4.png");
  --bg-extra-slot:   url("/assets/ptcg_telop/element/extra-bg-5c0c9fcd.png");
  --bg-card-slot:    url("/assets/ptcg_telop/element/card-bg-d2c590f2.png");

  color: var(--stroke-color);
}

/* element/ の元画像は青系が基調なのでカラーフィルタで紫寄りに寄せる */
.theme-ptcgl-replayer .active-slot,
.theme-ptcgl-replayer .bench-slot,
.theme-ptcgl-replayer .player-area {
  filter: hue-rotate(-30deg) saturate(0.9);
}

.theme-ptcgl-replayer .player-info {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
}