/* デッキ一覧・デッキ閲覧・デッキ構築。 */

body.tp .tp-deck-head {
  margin: var(--tp-5) 0 var(--tp-2);
  color: var(--tp-text-dim);
  letter-spacing: .08em;
}
body.tp .tp-deck-head:first-child { margin-top: 0; }
body.tp .tp-deck-head + .tp-note { margin-bottom: var(--tp-2); }
body.tp .tp-deck-empty { padding: var(--tp-4); text-align: center; }

/* ゲストのままデッキを作った人への案内。押すとユーザー名の登録へ。 */
body.tp .tp-nudge {
  -webkit-appearance: none; appearance: none;
  width: 100%;
  margin-top: var(--tp-3);
  padding: var(--tp-3) var(--tp-4);
  display: flex; align-items: center; justify-content: space-between; gap: var(--tp-3);
  border: 1px dashed var(--tp-line-lit);
  border-radius: var(--tp-r);
  background: transparent;
  color: var(--tp-text-dim);
  font-family: inherit; font-size: 12.5px; line-height: 1.5; text-align: left;
  cursor: pointer;
}
body.tp .tp-nudge:hover { border-color: var(--tp-accent-deep); color: var(--tp-text); }
body.tp .tp-nudge-cta { flex: none; color: var(--tp-accent); font-weight: 700; }

body.tp .tp-foot .tp-hstack { gap: var(--tp-2); }

/* ── カード・眷属一覧 ───────────────────────────
   並べ方（器）だけをここに置く。札1枚・眷属1枚の姿は対局と同じ出典（style.css の
   .zoom-card / .minion-card）が持っていて、こちらでは触らない。 */
body.tp .tp-lib-cards,
body.tp .tp-lib-minions { margin-top: var(--tp-3); }
body.tp .tp-lib-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--tp-3); }
body.tp .tp-lib-minions { display: flex; flex-direction: column; gap: var(--tp-2); }

/* ── カード1枚の行 ───────────────────────────── */
body.tp .tp-cardlist { display: flex; flex-direction: column; gap: var(--tp-2); }

body.tp .tp-cardrow {
  position: relative;
  display: grid;
  /* 色帯 / 絵 / 本文 / 枚数。絵は名前を読む前に「どのカードか」を伝える窓なので、
     本文より先（左）に置く。 */
  grid-template-columns: 3px auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--tp-3);
  padding: var(--tp-3) var(--tp-3) var(--tp-3) 0;
  border: 1px solid var(--tp-line);
  border-radius: var(--tp-r);
  background: var(--tp-surface);
  overflow: hidden;
}
body.tp .tp-cardrow + .tp-cardrow { margin-top: var(--tp-2); }

/* 分類の色は既存のカード色に合わせる（移動=緑 / 蘇生=紫 / 魔法=赤） */
body.tp .tp-cardrow.cat-move   { --row-hue: var(--venom); }
body.tp .tp-cardrow.cat-revive { --row-hue: var(--soul); }
body.tp .tp-cardrow.cat-magic  { --row-hue: var(--blood); }

body.tp .tp-cardrow-bar { align-self: stretch; background: var(--row-hue); opacity: .8; }
/* カードの絵。分類の色で塗って、色帯と合わせて一目で種類が分かるようにする。 */
body.tp .tp-cardrow-art {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  flex: none;
  border-radius: var(--tp-r-sm);
  background: color-mix(in srgb, var(--row-hue) 12%, var(--tp-surface-2));
  color: var(--row-hue);
}
body.tp .tp-cardrow-art svg { width: 24px; height: 24px; }
body.tp .tp-cardrow-art .bone { fill: currentColor; }
body.tp .tp-cardrow-art .pit { fill: var(--tp-surface); }
body.tp .tp-cardrow-main { min-width: 0; }
body.tp .tp-cardrow-head { display: flex; align-items: baseline; gap: var(--tp-2); flex-wrap: wrap; }
body.tp .tp-cardrow-name { font-size: 14.5px; font-weight: 700; }
body.tp .tp-cardrow-cat,
body.tp .tp-cardrow-rare {
  padding: 1px 6px;
  border-radius: var(--tp-r-pill);
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
}
body.tp .tp-cardrow-cat { background: color-mix(in srgb, var(--row-hue) 22%, transparent); color: var(--row-hue); }
body.tp .tp-cardrow-rare { background: rgba(216, 178, 90, .18); color: var(--tp-accent); }
body.tp .tp-cardrow-text {
  display: block;
  margin-top: 3px;
  font-size: 12px; line-height: 1.55;
  color: var(--tp-text-dim);
}
body.tp .tp-cardrow-n {
  min-width: 40px;
  font-family: var(--f-num), var(--f-body);
  font-size: 17px; font-weight: 700;
  text-align: center;
  color: var(--tp-accent);
}

/* ── 枚数の増減 ─────────────────────────────── */
body.tp .tp-step { display: flex; align-items: center; gap: 2px; }
body.tp .tp-step-btn {
  -webkit-appearance: none; appearance: none;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid var(--tp-line-lit);
  border-radius: var(--tp-r-sm);
  background: var(--tp-surface-2);
  color: var(--tp-text);
  cursor: pointer;
}
body.tp .tp-step-btn:disabled { opacity: .28; cursor: default; }
body.tp .tp-step-btn .tp-ico { width: 16px; height: 16px; }
body.tp .tp-step-n {
  min-width: 26px;
  font-family: var(--f-num), var(--f-body);
  font-size: 16px; font-weight: 700;
  text-align: center;
}
body.tp .tp-cardrow.picked { border-color: var(--row-hue); background: color-mix(in srgb, var(--row-hue) 7%, var(--tp-surface)); }

/* ── 構築画面（名前 / 一覧 / 合計＋保存 の3段。スクロールは中央だけ）── */
body.tp .tp-screen[data-screen="deckedit"] { grid-template-rows: minmax(0, 1fr); }
body.tp .tp-deckedit {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}
body.tp .tp-deckedit-top {
  padding: var(--tp-3) max(var(--tp-4), var(--tp-safe-l)) var(--tp-2) max(var(--tp-4), var(--tp-safe-r));
}
body.tp .tp-deckedit-lead { margin-top: var(--tp-2); }
body.tp .tp-deckedit-list {
  padding: 0 max(var(--tp-4), var(--tp-safe-l)) var(--tp-4) max(var(--tp-4), var(--tp-safe-r));
}
body.tp .tp-cardcat {
  margin: var(--tp-4) 0 var(--tp-2);
  padding-left: var(--tp-2);
  border-left: 3px solid var(--tp-line-lit);
  color: var(--tp-text-dim);
  letter-spacing: .08em;
}
body.tp .tp-cardcat:first-child { margin-top: var(--tp-2); }

body.tp .tp-deckedit-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--tp-3);
  border-top: 1px solid var(--tp-line);
  background: var(--tp-surface);
}
body.tp .tp-deckedit-count { display: flex; flex-direction: column; gap: 1px; }
body.tp .tp-deckedit-total { font-size: 14px; letter-spacing: .03em; }
body.tp .tp-deckedit-hint { font-size: 11.5px; color: var(--tp-text-dim); }
body.tp .tp-deckedit-hint.over { color: var(--tp-danger); }