/* self-watermark.css — 自サイト透かし（cosmetic mitigation）
 *
 * 発売済みクリーン画像にのみ低不透明度の「強欲なラボ」透かしを、カード下部の効果テキスト欄の
 * 中央に横書きで重ね、「明確に非公式」を示す。Konami の "SAMPLE" は模倣しない。
 *
 * テキスト欄の範囲（実カード画像 480x700 で実測。通常/効果/リンク/魔法罠/ペンデュラムで共通）:
 *   x 7%〜93%（幅86%）・y 75%〜94%（高さ19%・中心84.5%）。ペンデュラム枠も下段の効果欄は同位置。
 *
 * 適用範囲（描画側で .wm-released クラスを付与した要素のみ）:
 *   - 検索 hero 画像（#heroImgWrap = .card-hero-img）
 *   - 一人回し盤面のカード（.tier-item-wrapper）
 * 未発売 SAMPLE 画像・プロキシ・裏面カードには付与しない。
 *
 * on/off : ルート要素の data-self-wm 属性（無ければ透かしを出さない）
 * 強度   : --self-watermark-opacity（既定 0.12）
 *
 * 重ね順: 透かしは ::after・z-index 1（img と同じ）。wrapper は重ね順の層を作らないため、
 *         img より上の値にするとカードが重なったとき後続カードの img より手前に出て、
 *         隣のカードに透かしがかかる。同値なら文書順で「自分の img → 透かし → 次のカード」。
 * 裏面: 一人回しの裏面は .tier-item-wrapper.is-set::after（z-index 3）が同じ ::after を使うため、
 *       透かしは :not(.is-set) で裏面カードから外す（裏面には透かしを出さない）。
 */

.wm-released {
  position: relative;
  /* cqw（コンテナ幅基準の単位）で文字サイズをカード幅に連動させる。
     .tier-item-wrapper は proxy-card.css で宣言済み。それ以外の対象にも宣言する */
  container-type: inline-size;
}

[data-self-wm] .wm-released:not(.is-set)::after {
  content: "強欲なラボ";
  position: absolute;
  /* wrapper 全体に敷く（守備表示の90度回転を img と同じ transform で追従させるため。
     sample-blur.css と同じ方式）。文字は内側でテキスト欄の位置に置く */
  inset: 0;
  z-index: 1;                 /* img と同じ（上の「重ね順」参照） */
  display: flex;
  align-items: flex-start;
  justify-content: center;
  /* 文字の縦中心をテキスト欄の中心（高さの84.5%）に合わせる。
     縦のパーセントは幅基準でしか書けないため、カード縦横比 1.455 を使い cqw で指定:
     84.5% × 1.455 × 100cqw − 文字高(15cqw)/2 ≒ 115.4cqw */
  /* cqw 非対応環境向けフォールバック。padding の % は包含ブロック(wrapper)の幅基準なので 115.4% で同値 */
  padding-top: 115.4%;
  padding-top: 115.4cqw;
  box-sizing: border-box;
  font-weight: 700;
  /* 欄の高さ=カード幅の約27.7%。文字高15cqw・幅約48cqwで欄内に収まる。非対応環境は固定px */
  font-size: 9px;
  font-size: 15cqw;
  line-height: 1;
  letter-spacing: 0.08em;
  color: #fff;
  opacity: var(--self-watermark-opacity, 0.12);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
  overflow: hidden;
  pointer-events: none;       /* クリック・ドラッグを阻害しない */
  user-select: none;
  transition: transform 0.3s ease-in-out;  /* img と同じ */
}

/* 守備表示: img(.tier-item)と同じ反時計回りの90度回転に追従（components.css の .is-defense .tier-item） */
[data-self-wm] .tier-item-wrapper.is-defense.wm-released:not(.is-set)::after {
  transform: rotate(-90deg);
  transform-origin: center center;
}