/* SPEC: 2025-10-13d sha=9fd2a1b */
/* TriFront Tutorial V2 CSS — 20251216-a
   - V2起動中だけ、誘導オーバーレイと読みやすい説明パネルを表示
   - 既存UIの文言/挙動は変更しない(見た目の“補助”のみ)
*/

html.trfTutV2,
body.trfTutV2 {
  overflow: hidden; /* 誘導中の暴発スクロール抑止 */
}

/* ===== オーバーレイ(暗幕+穴) ===== */
#trfTutV2Layer {
  position: fixed;
  inset: 0;
  z-index: 200000; /* 既存のモーダルより前に */
  pointer-events: none;
  display: none;
}

html.trfTutV2 #trfTutV2Layer {
  display: block;
}

.trfTutV2Dim {
  position: fixed;
  background: rgba(0, 0, 0, 0.72);
  pointer-events: auto; /* スキップ等のクリックはパネル側で拾う */
}

/* ===== 説明パネル ===== */
#trfTutV2Panel {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 200001;
  display: none;
  pointer-events: auto;
  background: rgba(8, 10, 14, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 10px 30px rgba(0,0,0,0.55);
  border-radius: 10px;
  padding: 12px 12px 10px;
  color: rgba(255,255,255,0.92);
}

html.trfTutV2 #trfTutV2Panel {
  display: block;
}

#trfTutV2Title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 6px 0;
  letter-spacing: 0.02em;
}

#trfTutV2Body {
  font-size: 14px;
  line-height: 1.55;
  margin: 0 0 10px 0;
  color: rgba(255,255,255,0.88);
  white-space: pre-line;
}

#trfTutV2Meta {
  font-size: 12px;
  line-height: 1.35;
  color: rgba(255,255,255,0.65);
  margin: 0 0 10px 0;
}

#trfTutV2Btns {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.trfTutBtn {
  appearance: none;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.92);
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.trfTutBtn:active {
  transform: translateY(1px);
}

.trfTutBtnPrimary {
  border-color: rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.14);
}

/* ===== ターンの流れパネル(ラウンド終了まで常時表示) ===== */
#trfTutV2Flow {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 200002;
  display: none;
  pointer-events: auto;
  background: rgba(8, 10, 14, 0.88);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 10px;
  padding: 10px 10px 8px;
  color: rgba(255,255,255,0.92);
  width: min(360px, calc(100vw - 24px));
}

html.trfTutV2 #trfTutV2Flow {
  display: block;
}

#trfTutV2FlowTitle {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.80);
  margin: 0 0 6px 0;
}

#trfTutV2FlowSteps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.trfTutFlowChip {
  font-size: 12px;
  line-height: 1.2;
  padding: 6px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.86);
}

#trfTutV2FlowNote {
  margin: 8px 0 0 0;
  font-size: 11px;
  line-height: 1.35;
  color: rgba(255,255,255,0.62);
  white-space: pre-line;
}

/* ===== 効果ポップアップの“読みやすさ補助”(V2中のみ) ===== */
/* 既存の effPop を壊さないよう、サイズ/行間/背景の補助に限定 */
html.trfTutV2 #effPop,
html.trfTutV2 .effPop,
html.trfTutV2 [id*="effPop"] {
  font-size: 14px !important;
  line-height: 1.6 !important;
}

html.trfTutV2 #effPop,
html.trfTutV2 .effPop {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  background: rgba(10, 12, 16, 0.92) !important;
  border: 1px solid rgba(255,255,255,0.20) !important;
}

/* 小さすぎる場合の余白 */
html.trfTutV2 #effPop *,
html.trfTutV2 .effPop * {
  letter-spacing: 0.01em;
}

/* ===== 小さい画面ではパネル高さを抑える ===== */
@media (max-height: 650px) {
  #trfTutV2Panel {
    padding: 10px 10px 8px;
  }
  #trfTutV2Body {
    font-size: 13px;
  }
}

/* ===== V2: 1ラウンド終了 盤面例(説明用ミニ表示) ===== */
#trfTutV2Panel .trfTutExampleWrap{
  display:flex;
  gap:8px;
  margin-top:10px;
}
#trfTutV2Panel .trfTutExampleLane{
  flex:1 1 0;
  min-width:0;
  padding:8px 8px 7px 8px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
}
#trfTutV2Panel .trfTutExampleLane .lbl{
  font-size:11px;
  font-weight:800;
  letter-spacing:0.05em;
  color: rgba(255,255,255,0.78);
  margin:0 0 6px 0;
}
#trfTutV2Panel .trfTutExampleLane .vs{
  display:flex;
  flex-direction:column;
  gap:2px;
  font-size:12px;
  line-height:1.2;
  color: rgba(255,255,255,0.92);
}
#trfTutV2Panel .trfTutExampleLane .vs .me{
  font-weight:800;
}
#trfTutV2Panel .trfTutExampleLane .res{
  margin-top:6px;
  font-size:11px;
  font-weight:900;
  letter-spacing:0.08em;
  color: rgba(255,255,255,0.80);
}
#trfTutV2Panel .trfTutExampleLane.win{
  box-shadow: inset 0 0 0 1px rgba(160, 255, 200, 0.18);
}
#trfTutV2Panel .trfTutExampleLane.lose{
  box-shadow: inset 0 0 0 1px rgba(255, 180, 180, 0.18);
}
#trfTutV2Panel .trfTutExampleCaption{
  margin-top:8px;
  font-size:12px;
  line-height:1.35;
  color: rgba(255,255,255,0.78);
}