/*
  Telop Experimental Replay - Rails 埋め込み用追加スタイル
  ptcg-telop 本体 (common.css / fonts.css) と共存する Rails 固有の最小 CSS。
  common.css と fonts.css がロードされた前提で、以下を提供する:
    - .ptcg-telop-overlay-root を CSS transform で scale フィットするためのラッパ
    - 実験的ヘッダバー (Experimental badge / テーマセレクタ / 戻り導線) と
      フッター (前後ナビ + position インジケーター) の静的レイアウト
    - 勝敗オーバーレイの Rails 側固有スタイル
*/

/* 外側のビューポート全体を覆う。transform の origin を左上にしてスケール計算を単純化 */
.ptcg-telop-viewport {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background-color: #000;
  z-index: 1;
  display: block;
}

/* モバイル解像度 (< 768px) では viewport を表示しない — ERB の fallback banner のみ出す */
@media (max-width: 767px) {
  .ptcg-telop-viewport {
    display: none;
  }
}

@media (min-width: 768px) {
  [data-telop-mobile-fallback] {
    display: none;
  }
}

/* 1920×1080 の内側コンテンツを scale する中間ラッパ。
   --telop-scale は Stimulus controller が window.innerWidth / 1920 と
   innerHeight / 1080 の小さい方を算出して設定する。 */
.ptcg-telop-scale-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1920px;
  height: 1080px;
  transform: translate(-50%, -50%) scale(var(--telop-scale, 1));
  transform-origin: center center;
}

/* Experimental ヘッダ (scale 範囲外の固定レイヤー) */
.ptcg-telop-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 12px;
  z-index: 10;
  backdrop-filter: blur(4px);
}

.ptcg-telop-header .telop-experimental-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 9999px;
  background-color: #E8CD6F;
  color: #1f1f1f;
  font-weight: bold;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.ptcg-telop-header a {
  color: #d1d1d1;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ptcg-telop-header a:hover {
  color: #fff;
}

.ptcg-telop-header .telop-theme-select {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 12px;
  cursor: pointer;
}

.ptcg-telop-header .telop-theme-select option {
  color: #1f1f1f;
  background: #fff;
}

/* Experimental フッタ (scale 範囲外の固定レイヤー) — ナビ UI */
.ptcg-telop-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 13px;
  z-index: 10;
  backdrop-filter: blur(4px);
}

.ptcg-telop-footer button {
  padding: 4px 12px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
}

.ptcg-telop-footer button:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.22);
}

.ptcg-telop-footer button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.ptcg-telop-footer .telop-position-indicator {
  font-family: 'Sora', monospace;
  font-weight: bold;
  color: #f5f5f5;
}

/* 勝敗オーバーレイ (scale 範囲内、絶対配置で overlay-frame 上に重ねる) */
.ptcg-telop-result-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.72);
  z-index: 50;
  pointer-events: none;
}

.ptcg-telop-result-overlay.is-hidden {
  display: none;
}

.ptcg-telop-result-text {
  font-family: 'PTCG-Attack-JP', 'DelaGothicOne-Regular', sans-serif;
  font-size: 160px;
  font-weight: 900;
  letter-spacing: 0.2em;
  text-shadow: 0 8px 24px rgba(0, 0, 0, 0.9);
}

.ptcg-telop-result-text.tone-win  { color: #22c55e; }
.ptcg-telop-result-text.tone-lose { color: #ef4444; }
.ptcg-telop-result-text.tone-draw { color: #facc15; }
.ptcg-telop-result-text.tone-unknown { color: #e5e7eb; }

/* R5: 差分アニメ用 WebM overlay — .active-slot / .bench-slot 直下に追加され
   スロットを覆って再生、video の ended/error で自動除去される */
.telop-fx-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 400;
  pointer-events: none;
  border-radius: inherit;
}