/* デッキを作る・編集する画面。上に名前・アセンダー・枚数・保存、左にカードの一覧、右にデッキのカード。 */
.deck-editor {
  height: 100dvh;
}

.deck-editor .deck-editor__header {
  justify-content: flex-start;
}

.deck-editor .deck-editor__main {
  display: grid;
  gap: clamp(0.5rem, 1.5vmin, 1rem) clamp(1rem, 3vmin, 2rem);
  grid-template-areas:
    "bar bar"
    "pool deck";
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  min-width: 0;
  padding-top: clamp(0.5rem, 2vmin, 1.5rem);
}

.deck-editor .deck-editor__main > .menu-page__text,
.deck-editor .deck-editor__main > .menu-page__panel:not(.deck-editor__pool, .deck-editor__deck) {
  grid-column: 1 / -1;
  justify-self: center;
}

.deck-editor .deck-editor__bar {
  align-items: center;
  display: flex;
  gap: 0.75em 1.5em;
  grid-area: bar;
}

.deck-editor .deck-editor__name {
  flex: none;
}

.deck-editor .deck-editor__name input {
  background-color: rgb(11 14 19 / 75%);
  border: 1px solid rgb(245 210 122 / 55%);
  border-radius: 0.3rem;
  color: var(--menu-accent-text);
  font: inherit;
  font-size: 1.15em;
  font-weight: 700;
  padding: 0.35em 0.6em;
  width: 16em;
}

.deck-editor .deck-editor__name input:focus-visible {
  outline: 2px solid var(--menu-gold);
  outline-offset: 2px;
}

.deck-editor .deck-editor__ascender {
  align-items: center;
  flex: none;
  display: flex;
  font-weight: 700;
  gap: 0.6em;
}

.deck-editor .deck-editor__ascender .ascender-portrait,
.deck-editor .deck-editor__ascender-empty {
  height: 2.8em;
  width: 2.8em;
}

.deck-editor .deck-editor__ascender-empty {
  align-items: center;
  border: 1px dashed rgb(245 210 122 / 55%);
  border-radius: 0.3rem;
  color: rgb(230 237 246 / 60%);
  display: flex;
  justify-content: center;
}

.deck-editor .deck-editor__count {
  font-size: 1em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  margin: 0;
}

/* 30 枚を超えている間は、枚数を赤くする。 */
.deck-editor .deck-editor__count--over {
  color: #ff7a8a;
}

.deck-editor .deck-editor__save {
  --menu-button-font-size: clamp(0.75rem, 1.8vmin, 0.95rem);
  --menu-button-height: calc(var(--menu-button-font-size) * 2.6);

  margin-left: auto;
  letter-spacing: 0.15em;
  min-width: 0;
  padding: 0 1.8em;
  text-indent: 0.15em;
}

.deck-editor .deck-editor__pool,
.deck-editor .deck-editor__deck {
  align-content: start;
  box-sizing: border-box;
  container-type: inline-size;
  justify-items: stretch;
  max-width: none;
  min-height: 0;
  overflow-y: auto;
  padding: 1em;
  width: 100%;
}

.deck-editor .deck-editor__pool {
  grid-area: pool;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.deck-editor .deck-editor__pool-scroll {
  min-height: 0;
  overflow-y: auto;
}

.deck-editor .deck-editor__deck {
  grid-area: deck;
}

/* デッキの枠の一番上。アセンションのボタン。 */
.deck-editor .deck-editor__deck-head {
  align-items: center;
  display: flex;
  gap: 1em;
}

.deck-editor .deck-editor__tabs {
  display: flex;
  gap: 0.5em;
}

.deck-editor .deck-editor__tab {
  background-color: rgb(11 14 19 / 55%);
  border: 1px solid rgb(230 237 246 / 40%);
  border-radius: 0.3rem 0.3rem 0 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 0.4em 1.4em;
}

.deck-editor .deck-editor__tab--selected {
  background-color: rgb(245 210 122 / 18%);
  border-color: var(--menu-gold);
  color: var(--menu-accent-text);
  font-weight: 700;
}

.deck-editor .deck-editor__tab:focus-visible {
  outline: 2px solid var(--menu-gold);
  outline-offset: 2px;
}

/* 種別ごとの区切り（ユニット・アクション・フィールド）。名前は出さず、線だけで分ける。 */
.deck-editor .deck-editor__section + .deck-editor__section {
  border-top: 1px solid rgb(245 210 122 / 35%);
  margin-top: 0.5em;
  padding-top: 0.5em;
}

/* カードの一覧は 1 段に 6 枚、デッキは 1 段に 6 枚。印がはみ出す分の隙間は、デッキ選択の画面と同じ考え方で取る。 */
.deck-editor .deck-editor__pool-cards,
.deck-editor .deck-editor__deck-cards {
  column-gap: 4cqi;
  display: grid;
  list-style: none;
  margin: 0;
  padding: 2.5cqi;
  row-gap: 5cqi;
}

.deck-editor .deck-editor__pool-cards {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.deck-editor .deck-editor__deck-cards {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.deck-editor .deck-editor__card {
  aspect-ratio: 5 / 7;
  min-width: 0;
  position: relative;
}

/* 見た目はデッキ選択の .deck-card-list__card-button（menu.css）とそろえる。変えるときは両方を直す */
.deck-editor .deck-editor__card-button {
  background: none;
  border: 0;
  cursor: pointer;
  display: block;
  height: 100%;
  padding: 0;
  width: 100%;
}

.deck-editor .deck-editor__card-button:hover {
  filter: brightness(1.15);
}

.deck-editor .deck-editor__card-button:focus-visible {
  outline: 2px solid var(--menu-gold);
  outline-offset: 3px;
}

/* デッキの側で、同じカードの枚数。 */
.deck-editor .deck-editor__in-deck {
  background-color: rgb(5 7 11 / 85%);
  border: 1px solid var(--menu-gold);
  border-radius: 999px;
  bottom: -0.5em;
  color: var(--menu-accent-text);
  font-size: 0.85em;
  font-weight: 700;
  left: 50%;
  padding: 0 0.6em;
  pointer-events: none;
  position: absolute;
  transform: translateX(-50%);
}

/* 保存を止める理由のあるカード（別のアセンダーの専用・入れられない・使えない）。 */
.deck-editor .deck-editor__card--flagged .card {
  filter: grayscale(0.7) brightness(0.7);
}

/* 禁止の印。赤い丸に斜めの線を、カードの真ん中に重ねる。 */
.deck-editor .deck-editor__forbidden {
  aspect-ratio: 1;
  border: 0.15em solid #ff4d63;
  border-radius: 50%;
  box-shadow: 0 0 0.4em rgb(0 0 0 / 80%);
  box-sizing: border-box;
  left: 50%;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
}

.deck-editor .deck-editor__forbidden::after {
  background-color: #ff4d63;
  content: "";
  height: 0.15em;
  /* 円の内側の幅（直径）と同じ長さにして、両端を円の縁に付ける（はみ出さない） */
  left: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
  width: 100%;
}

/* カードの一覧に無いカードの仮の枠。カードと同じ大きさ。 */
.deck-editor .deck-editor__unknown {
  align-items: center;
  background-color: rgb(30 30 36 / 90%);
  border: 1px dashed rgb(230 237 246 / 50%);
  border-radius: 0.3rem;
  box-sizing: border-box;
  color: rgb(230 237 246 / 75%);
  display: flex;
  font-size: 0.75em;
  height: 100%;
  justify-content: center;
  text-align: center;
}

/* 画面の真ん中に重ねる知らせ（30 枚を超えた・保存できなかった理由）。押す操作は下のカードへ通す。 */
.deck-editor .deck-editor__message {
  border: 0.125rem solid;
  border-radius: 0.5rem;
  font-size: 1.15em;
  font-weight: 700;
  left: 50%;
  padding: 0.9em 1.6em;
  pointer-events: none;
  position: fixed;
  text-align: center;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
}

.deck-editor .deck-editor__message p {
  margin: 0;
}

/* 保存できなかった理由。デッキ選択の画面のエラー（.home-page__error）と同じ赤。 */
.deck-editor .deck-editor__message--error {
  background-color: rgb(60 10 18 / 95%);
  border-color: #ff5a6e;
  box-shadow: 0 0.5rem 2rem rgb(0 0 0 / 70%);
  color: #ffd9de;
}

/* 30 枚を超えた知らせ。暗い琥珀色に、外側へうっすら光る金の縁（周りの黒と金の枠と見分ける）。 */
.deck-editor .deck-editor__message--notice {
  background-color: rgb(92 58 8 / 96%);
  border-color: var(--menu-gold);
  box-shadow: 0 0 1.2em rgb(255 200 80 / 60%), 0 0.5rem 2rem rgb(0 0 0 / 70%);
  color: var(--menu-gold-light);
}

.deck-editor .deck-editor__message p + p {
  margin-top: 0.4em;
}

/*
 * アセンションの絵（AscensionArt）。縦長の六角形に、金の縁を付けて窓の絵（.ascension-soul__window、
 * キーごとの絵は ascenders.css）を入れる。デッキの枠の上のボタンと、アセンションを選ぶ窓で使う
 */
.ascension-art {
  --ascension-shape: polygon(50% 0, 100% 18%, 100% 82%, 50% 100%, 0 82%, 0 18%);

  aspect-ratio: 0.66;
  background: linear-gradient(160deg, #f5d27a, #8a5a12);
  box-sizing: border-box;
  clip-path: var(--ascension-shape);
  display: block;
  flex: none;
  padding: 0.12em;
}

/* デッキの枠の上の、選んでいるアセンションのボタン。絵と名前を並べる */
.deck-editor .deck-editor__ascension {
  align-items: center;
  display: inline-flex;
  gap: 0.5em;
}

.deck-editor .deck-editor__ascension-art {
  height: 1.8em;
}

/* アセンションを選ぶ窓。候補を縦に並べ、多いときは窓の中でスクロールする */
.ascension-picker {
  max-width: min(92vw, 36rem);
  width: 100%;
}

.ascension-picker__list {
  display: grid;
  gap: 0.75em;
  list-style: none;
  margin: 0;
  max-height: 60vh;
  overflow-y: auto;
  padding: 0;
}

.ascension-picker__option {
  align-items: center;
  background: rgb(255 255 255 / 4%);
  border: 1px solid rgb(245 210 122 / 30%);
  border-radius: 0.4rem;
  box-sizing: border-box;
  color: inherit;
  cursor: pointer;
  display: flex;
  font: inherit;
  gap: 1em;
  padding: 0.75em;
  text-align: left;
  width: 100%;
}

.ascension-picker__option:hover {
  border-color: rgb(245 210 122 / 70%);
}

.ascension-picker__option:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* 選んでいる候補は、金の縁と薄い金の地にする */
.ascension-picker__option--selected {
  background: rgb(245 210 122 / 12%);
  border-color: var(--menu-gold, #f5d27a);
  box-shadow: inset 0 0 0 1px var(--menu-gold, #f5d27a);
}

.ascension-picker__art {
  height: 6.5em;
}

.ascension-picker__text {
  display: grid;
  gap: 0.3em;
}

.ascension-picker__name {
  color: var(--menu-accent-text, #ffe9a8);
  font-size: 1.1em;
  font-weight: 700;
}

.ascension-picker__soul {
  color: var(--menu-gold, #f5d27a);
  font-size: 0.9em;
  font-variant-numeric: tabular-nums;
}

.ascension-picker__description {
  font-size: 0.9em;
  line-height: 1.5;
}

/*
 * カードを運ぶ元。指では、縦に動かすと一覧のスクロール、横に動かすと運ぶ（一覧は左、デッキは右）。
 * 押したまま止めたときの長押しのメニューと文字の選択は、対戦の手札と同じく止める（運ぶ操作を取り上げるため）。
 */
.deck-editor .deck-editor__card-button {
  -webkit-touch-callout: none;
  touch-action: pan-y;
  user-select: none;
}

/* 運んでいるカードの写し。位置は usePointerDrag が transform で書く。離した位置の下の要素として拾わないよう、押す操作を通す */
.deck-editor .deck-editor__drag-ghost {
  left: 0;
  pointer-events: none;
  position: fixed;
  top: 0;
  z-index: 20;
}

.deck-editor .deck-editor__drag-ghost .deck-editor__card {
  filter: drop-shadow(0 0.4rem 0.8rem rgb(0 0 0 / 70%));
  left: 0;
  position: absolute;
  top: 0;
}

/* デッキのカードは、下に − と ＋ を置く分だけ、段の間と最後の段の下を広げる */
.deck-editor .deck-editor__deck-cards {
  padding-bottom: calc(2.5cqi + 2.4em);
  row-gap: calc(5cqi + 2.4em);
}

/*
 * − と ＋。カードの下に、カードの幅いっぱいに左右へ分けて置く（押しやすさのため、間に枚数を挟まない）。
 * 大きさはデッキの枠の幅（cqi）に合わせ、1 段に 6 枚並んでも隣と重ならない
 */
.deck-editor .deck-editor__count-controls {
  display: grid;
  font-size: clamp(0.65rem, 3cqi, 0.95rem);
  gap: 12%;
  grid-template-columns: 1fr 1fr;
  left: 0;
  position: absolute;
  right: 0;
  top: calc(100% + 0.35em);
  user-select: none;
}

/* 枚数はカードの下端の内側、真ん中に重ねる（− と ＋ の行と重ならない） */
.deck-editor .deck-editor__card .deck-editor__in-deck {
  bottom: 6%;
  font-size: clamp(0.55rem, 2.4cqi, 0.8rem);
}

.deck-editor .deck-editor__count-button {
  align-items: center;
  background-color: rgb(11 14 19 / 85%);
  border: 1px solid rgb(245 210 122 / 70%);
  border-radius: 0.4em;
  color: var(--menu-accent-text);
  cursor: pointer;
  display: flex;
  font: inherit;
  font-weight: 700;
  height: 1.7em;
  justify-content: center;
  padding: 0;
  width: 100%;
}

.deck-editor .deck-editor__count-button:hover:not(:disabled) {
  background-color: rgb(245 210 122 / 25%);
}

.deck-editor .deck-editor__count-button:disabled {
  cursor: default;
  opacity: 0.4;
}

.deck-editor .deck-editor__count-button:focus-visible {
  outline: 2px solid var(--menu-gold);
  outline-offset: 2px;
}

/*
 * 押したカードの説明。一覧とデッキの上に重ね、左に大きなカード、右に説明の板（CardDetail）を置く。
 * ヘッダーと上の段（名前・保存）は押せるまま残す。閉じている間は箱を作らない
 */
.deck-editor .deck-editor__detail {
  display: contents;
}

.deck-editor .deck-editor__detail--open {
  background:
    linear-gradient(rgb(18 11 4 / 97%), rgb(18 11 4 / 97%)) padding-box,
    linear-gradient(90deg, #8a5a12, var(--menu-gold) 50%, #8a5a12) border-box;
  border: 0.125rem solid transparent;
  border-radius: 0.5rem;
  box-shadow: 0 0.5rem 2rem rgb(0 0 0 / 70%);
  box-sizing: border-box;
  display: grid;
  gap: clamp(0.6rem, 2vmin, 1.25rem);
  grid-column: 1 / -1;
  grid-row: 2;
  grid-template-columns: auto minmax(0, 1fr);
  min-height: 0;
  padding: clamp(0.5rem, 2vmin, 1rem);
  z-index: 4;
}

/*
 * 大きなカード。カードの箱の外へ、額縁の絵が上下にカードの高さの約 7%（アクション・フィールドは上にさらに 5%）、
 * 印が左右にカードの幅の 15% はみ出す（cards.css）。カードの高さを置き場所の 80% にして上下に 10% ずつ空け、
 * 置き場所の幅を「カードの幅 × 1.3」（高さに対して 0.8 × 5/7 × 1.3 ≒ 0.75）にして左右を空ける
 */
.deck-editor .deck-editor__detail-card {
  align-items: center;
  aspect-ratio: 0.75;
  display: flex;
  height: 100%;
  justify-content: center;
  min-height: 0;
}

.deck-editor .deck-editor__detail-card .deck-editor__card {
  height: 80%;
}

/* 説明の板。箱の中では対戦の盤面での置き方（grid-area・上寄せ）を外し、高さいっぱいに使う */
.deck-editor .deck-editor__detail .card-detail {
  align-self: stretch;
  background: none;
  border: 0;
  box-shadow: none;
  font-size: clamp(0.85rem, 2.6vmin, 1.1rem);
  grid-area: auto;
  height: 100%;
  max-height: 100%;
  padding: 0;
}

/* 板の下の、枚数と「外す」「入れる」 */
.deck-editor .card-detail__actions {
  align-items: center;
  border-top: 1px solid rgb(201 150 46 / 45%);
  display: flex;
  flex: none;
  gap: 0.6em;
  justify-content: flex-end;
  /* 文が短くても、板の下端にそろえる */
  margin-top: auto;
  padding-top: 0.4rem;
}

.deck-editor .card-detail__actions .menu-button--primary,
.deck-editor .card-detail__actions .menu-button--secondary {
  --menu-button-font-size: 0.85rem;
  --menu-button-height: 2.2em;

  min-width: 0;
  padding: 0 1.4em;
}

.deck-editor .deck-editor__detail-count {
  color: #e2c47a;
  font-variant-numeric: tabular-nums;
  margin: 0 auto 0 0;
}

/* デッキに入れられないカードの説明で、「入れる」の代わりに出す文 */
.deck-editor .deck-editor__detail-unbuildable {
  color: #ff9b9b;
  font-size: 0.85rem;
  margin: 0;
  white-space: nowrap;
}

.deck-editor .card-detail__actions button {
  white-space: nowrap;
}

/*
 * デッキの枠が狭いとき（iPhone の横向きなど）は、デッキを 1 列に並べる（ユーザーの決定、2026-10-23）。
 * 1 行に「カードの絵・枚数・−・＋」。格子では − と ＋ が指で押せないほど小さくなるため、ボタンを大きく取る。
 * 広い画面は 1 段 6 枚の格子のまま
 */
@container (max-width: 440px) {
  .deck-editor .deck-editor__deck-cards {
    grid-template-columns: minmax(0, 1fr);
    padding: 0.4rem 0.6rem;
    row-gap: 0.5rem;
  }

  .deck-editor .deck-editor__deck-cards .deck-editor__card {
    align-items: center;
    aspect-ratio: auto;
    column-gap: 0.75rem;
    display: grid;
    /* 左端は、カードの印が左へはみ出す分（カードの幅の 15%）を空ける */
    grid-template-columns: 4.2rem minmax(0, 1fr) auto;
    padding-left: 0.7rem;
  }

  .deck-editor .deck-editor__deck-cards .deck-editor__card-button {
    aspect-ratio: 5 / 7;
    height: auto;
  }

  /* 禁止の印は、行の真ん中ではなくカードの絵に重ねる */
  .deck-editor .deck-editor__deck-cards .deck-editor__forbidden {
    left: calc(0.7rem + 2.1rem);
    width: 3rem;
  }

  .deck-editor .deck-editor__deck-cards .deck-editor__in-deck {
    background: none;
    border: 0;
    bottom: auto;
    font-size: 1.1rem;
    /* 枚数はカードの絵のすぐ右に置く */
    justify-self: start;
    left: auto;
    padding: 0;
    position: static;
    transform: none;
  }

  .deck-editor .deck-editor__deck-cards .deck-editor__count-controls {
    font-size: 1.1rem;
    gap: 0.6rem;
    grid-template-columns: 2.75rem 2.75rem;
    position: static;
  }

  .deck-editor .deck-editor__deck-cards .deck-editor__count-button {
    height: 2.75rem;
  }
}