/* sample-blur.css — 未発売SAMPLE画像のイラスト部分を薄くぼかす（一人回し・任意設定）
 *
 * 対象: wrapper に .sample-art が付いたカード（{kind:'image', source:'official_sample'} 由来）のみ。
 *       プロキシ・発売済み画像には .sample-art を付けない。
 * on/off: ルート(body)の data-sample-blur 属性（無ければぼかさない）。既定オフ。
 * 強さ  : --sample-blur-radius（既定 2px。盤面カード約94px幅で実確認。「雰囲気は分かるが細部は見えない」程度）
 *
 * イラスト範囲（実SAMPLE画像 480x700 の画素エッジ実測）:
 *   通常枠（効果/通常/融合等/リンク/魔法罠）: x 12.0〜87.5% ・ y 18.3〜70.0%
 *   ペンデュラム枠                          : x  6.9〜93.1% ・ y 18.3〜62.7%
 *   既定は通常枠。ペンデュラムは sample-blur.js が [data-art-frame="pendulum"] を付ける。
 *   範囲は --sample-blur-inset（clip-path: inset 値）で1か所に定義し、全擬似要素が共用する。
 *
 * 擬似要素の衝突回避:
 *   裏面(.is-set)は components.css の .tier-item-wrapper.is-set::after（z-index 3）が使うため、
 *   :not(.is-set) で除外する。透かし(self-watermark.css)の ::before は SAMPLE には付かない。
 *   clip-path で範囲を切り、要素自体は wrapper 全体に敷く（守備表示の90度回転を .tier-item と同じ
 *   transform で追従させるため）。
 */

:root {
  --sample-blur-radius: 2px;
  /* 通常枠: 上 18.3% / 右 12.5% / 下 30% / 左 12% */
  --sample-blur-inset: inset(18.3% 12.5% 30% 12%);
}

/* ペンデュラム枠: 上 18.3% / 左右 6.9% / 下 37.3% */
[data-art-frame="pendulum"] {
  --sample-blur-inset: inset(18.3% 6.9% 37.3% 6.9%);
}

.sample-art {
  position: relative;
}

[data-sample-blur] .sample-art:not(.is-set)::after {
  content: "";
  position: absolute;
  inset: 0;
  /* img と同じ 1。wrapper は重ね順の層を作らないため、2 にすると後続の重なったカードの
     img(1) より手前に出て隣のカードまでぼかす。同値なら文書順で「自分の img → ぼかし →
     次のカード」の順に描かれる。裏面オーバーレイ(3) より下 */
  z-index: 1;
  pointer-events: none;       /* クリック・ドラッグを阻害しない */
  clip-path: var(--sample-blur-inset);
  -webkit-backdrop-filter: blur(var(--sample-blur-radius));
  backdrop-filter: blur(var(--sample-blur-radius));
  transition: transform 0.3s ease-in-out;
}

/* 守備表示: 画像(.tier-item)と同じ90度回転に追従 */
[data-sample-blur] .tier-item-wrapper.is-defense.sample-art:not(.is-set)::after {
  transform: rotate(-90deg);
  transform-origin: center center;
}

/* カード情報パネルの拡大画像: img に擬似要素は付けられないので JS が .cip-img-wrap で包む */
.cip-img-wrap {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  line-height: 0;
  border-radius: 4px;
}
.cip-img-wrap > .cip-img {
  display: block;
}

/* 設定UI（右パネル「表示」・スマホ⋯メニュー共通のチェックボックス） */
.sol-sample-blur-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--main-color);
}
/* components.css の `p, span, li { color:#333 }` が暗色パネルで読めなくなるのを打ち消す */
.sol-sample-blur-toggle span {
  color: inherit;
}
/* 入力の見た目はオン・オフのスイッチ（solitaire-brand.css の .sol-public-check と共通） */
/* スマホ⋯メニュー内は他のメニュー項目と同じ文字サイズに揃える */
.sol-mobile-menu-item.sol-sample-blur-toggle {
  font-size: 0.92rem;
}