/* 対局まわりのテストプレイ版だけの見た目。 */

/* ── 対局をやめる確認 ───────────────────────────
   訊いていることが3行しかないので、上へ張り付けるとボタンとの間が空きすぎて
   「何を訊かれているのか」が目に入らない。縦の中ほどへ置く。
   中央寄せは auto マージンで行う（justify-content: center と違い、文が伸びて
   入りきらなくなったときに頭が切れない）。 */
body.tp .tp-quit-body { display: flex; flex-direction: column; }
body.tp .tp-quit-body > * { margin-block: auto; }

/* 問いかけだけは本文（.tp-p）より強く見せる。ここで手が止まってほしい場所なので、
   下の説明と同じ太さ・同じ色だと読み飛ばされる。 */
body.tp .tp-quit-ask {
  font-size: 16px; font-weight: 700; letter-spacing: .04em;
  color: var(--tp-text);
}
/* 「続きから再開できる」だけは打ち消しの知らせなので、金で目に留める */
body.tp .tp-quit-resume { color: var(--tp-accent); }

/* ── 墓場を選ぶ ───────────────────────────────
   盤上に置かれる墓場とまったく同じアイコンを、少し大きく見せるだけにする。
   選んだものがそのまま盤に置かれる、と目で分かるようにするため。 */
body.tp .pg-tile {
  aspect-ratio: 1 / 1;
  border: 1px solid var(--tp-line-lit);
  border-radius: var(--tp-r);
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, 0)), var(--tp-surface);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
  color: var(--soul-deep);
  overflow: visible;
}
body.tp .pg-tile .pg-corpse { width: 74%; height: 74%; }
body.tp .pg-tile .pg-corpse svg { width: 100%; height: 100%; }
body.tp .pg-tile .pg-corpse .bone { fill: currentColor; }
body.tp .pg-tile .pg-corpse .pit { fill: var(--bg-deep); }

/* 墓石は選んでも動かさない・大きくしない。
   通常版は選択時に translateY(-5px) scale(1.04) するが、実機では「選んでいる最中に
   盤（墓石の並び）の大きさがずれる」と受け取られた。塗りと縁だけで選択を示す。 */
body.tp .pg-tile { transform: none; }
body.tp .pg-tile:hover { border-color: var(--soul); color: var(--soul); transform: none; }

body.tp .pg-tile.sel {
  transform: none;
  border-color: var(--gold);
  color: var(--gold);
  background: linear-gradient(180deg, rgba(216, 178, 90, .2), rgba(216, 178, 90, .05)), var(--tp-surface);
  box-shadow: 0 0 0 1px var(--gold), 0 6px 18px rgba(216, 178, 90, .28);
}
body.tp .pg-tile.sel::after { top: 5px; left: 50%; transform: translateX(-50%); }
/* 選んだ数の表示で数字の幅が変わると、下の行ごと横に動いて画面が揺れて見える */
body.tp .pg-count {
  font-variant-numeric: tabular-nums;
  min-width: 4.2em; text-align: center;
}

/* ── 全画面の覆い（.veil）─────────────────────
   通常版の .veil は画面全体（position:fixed inset:0）を mix-blend-mode: multiply で覆う。
   その真下で魂（粒子）が休みなく動いているので、粒子が1px 動くたびに覆いの下じきが
   変わり、画面いっぱいの混色をやり直すことになる。スクロールや画面遷移が
   引っかかって見える原因がこれ。

   混色をやめ、あらかじめ「掛け算した結果」の色を普通に重ねる。
   multiply の相手は rgba(2,0,8,.55)＝ほぼ黒なので、出てくる色は元の約45%。
   同じ濃さの黒を 55% で重ねたものとほぼ見分けがつかない。
   public/style.css は Render 版と共有しているので触らず、body.tp 配下で上書きする。 */
body.tp .veil {
  mix-blend-mode: normal;
  background: radial-gradient(140% 100% at 50% 45%, transparent 55%, rgba(0, 0, 0, .55) 100%);
}

/* ── 背景の魂（粒子）─────────────────────────
   テストプレイ版はゆっくり漂わせる。速いと視線が奪われて、
   読ませたいメニューやルール本文の邪魔になる。
   秒数の並びは style.css が唯一の出典。ここは倍率だけを上書きする。 */
body.tp .souls i { --soul-scale: 3.4; }

/* 粒子は 3〜7px しかなく、しかも中心から外へ向かって透明になっていく円なので、
   blur(0.5px) を掛けても見た目の差はほとんど無い。一方 filter は
   「合成では済まず塗り直しが要る」側の指定で、10個ぶんが画面上で動き続ける。
   得るものに対して払うものが大きいので、テストプレイ版では外す。
   （style.css は Render 版と共有しているので触らない。） */
body.tp .souls i { filter: none; }

/* 対局に入っているあいだ（body.tp-ingame・public/js/tp/nav.js が付ける）は
   粒子を完全に休ませる。粒子は position:fixed で画面全体に散っていて、
   盤やカードの更新とは無関係に毎フレーム位置と不透明度が変わる。
   CPU の思考や盤の再描画と重なったときのカクつきの下地になっている。

   display:none にはしない。消しているあいだ animation-delay の起点がずれ、
   対局から戻った瞬間に10個が一斉に画面下から湧いて不自然になるため。
   止める（animation-play-state）と透かす（opacity）で、位相を保ったまま眠らせる。

   opacity は粒子（i）ではなく入れ物（.souls）側に置く。粒子の opacity は
   soul-rise がアニメーションとして持っており、アニメーション由来の値は
   通常の宣言より強いので、i 側に書いても効かない（!important が要る）。 */
body.tp.tp-ingame .souls { opacity: 0; }
body.tp.tp-ingame .souls i { animation-play-state: paused; }