/*
 * 対戦の外の画面（ホーム、マッチング成立後の画面）。
 * 色と金縁の部品は、対戦画面（application.css の時計の板・降参の窓）に合わせている。
 *
 * 積層順（背面から）は対戦画面と同じ:
 *   background-color（フォールバック） → ::before(-3) 背景画像 → ::after(-2) 暗幕
 *   → 昇る粒(-1、.menu-page__particles) → アセンダーの絵(-1) → UI
 * 粒とアセンダーの絵は同じ層なので、粒を DOM の先に置いて絵の後ろに回す。
 */
body:has(.menu-page) {
  background-color: #0b0e13;
  margin: 0;
}

/* 金縁の部品（.menu-button--primary など）の色。対戦の結果の画面（application.css の .battle-result）も同じボタンを使う */
.menu-page,
.battle-result {
  --menu-gold-light: #fff3c4;
  --menu-gold: #f5d27a;
  --menu-gold-mid: #c9962e;
  --menu-gold-dark: #6b420c;
  --menu-plate-light: #4a3310;
  --menu-plate-dark: #140b03;
  --menu-text: #e6edf6;
  --menu-accent-text: #ffe9a8;
}

.menu-page {
  /* ヘッダーの絵の丸いボタン（消音・ホームへ戻る・戻る・ログアウト）の大きさ。押せる範囲が重ならない間の計算（下）でも使う */
  --menu-header-control-height: 1.875rem;
  /* 金縁の板（.menu-button--primary）の文字の大きさと高さ。板を並べる側が、並べた高さを計算するのに使う。 */
  --menu-button-font-size: clamp(1.125rem, 3.4vmin, 1.625rem);
  --menu-button-height: calc(var(--menu-button-font-size) * 3.2);

  background-color: #0b0e13;
  box-sizing: border-box;
  color: var(--menu-text);
  display: grid;
  font-size: clamp(0.875rem, 2.2vmin, 1.125rem);
  grid-template-rows: auto minmax(0, 1fr);
  isolation: isolate;
  min-height: 100dvh;
  overflow: hidden;
  padding: clamp(0.75rem, 2.5vmin, 1.5rem);
  position: relative;
}

.menu-page::before,
.menu-page::after {
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.menu-page::before {
  /* 青い星空の下の、カードの祭壇が浮かぶ広間。左の床にアセンダーが立ち、右の暗い空間にメニューを載せる。 */
  background-image: url("/assets/menu/home-a645f7e2.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -3;
}

/* 絵は元から暗いので、暗幕は薄くする。メニューを載せる右側と、上下の端だけを少し落とす。 */
.menu-page::after {
  background:
    linear-gradient(90deg, rgb(5 7 11 / 0%) 45%, rgb(5 7 11 / 45%)),
    linear-gradient(180deg, rgb(5 7 11 / 35%), rgb(5 7 11 / 0%) 25%, rgb(5 7 11 / 0%) 70%, rgb(5 7 11 / 45%));
  z-index: -2;
}

/* 下から湧いて昇る青い粒（MenuParticles）。暗幕より前、アセンダーの絵より後ろ（同じ層で、絵より先に置く）。 */
.menu-page__particles {
  height: 100%;
  inset: 0;
  pointer-events: none;
  position: absolute;
  width: 100%;
  z-index: -1;
}

.menu-page__header {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  min-height: 2.25em;
}

.menu-page__body {
  align-content: center;
  display: grid;
  gap: clamp(1.25rem, 5vmin, 3rem);
  justify-items: center;
  min-width: 0;
  text-align: center;
}

/* 金縁の暗い板。背景の明るい所に重なっても文字を読めるよう、文章はこの上に置く。作りは降参の窓と同じ。 */
.menu-page__panel {
  background:
    linear-gradient(rgb(18 11 4 / 92%), rgb(18 11 4 / 92%)) 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 / 60%);
  display: grid;
  gap: 1.25em;
  justify-items: center;
  max-width: min(90vw, 28rem);
  padding: 1.75em 2em;
}

.menu-page__title {
  color: var(--menu-accent-text);
  font-size: clamp(1.5rem, 5vmin, 2.5rem);
  letter-spacing: 0.12em;
  margin: 0;
  text-shadow: 0 0 0.6em rgb(255 200 80 / 40%);
}

.menu-page__text {
  margin: 0;
}

/* 左右をとがらせた金縁の板。作りは対戦画面の時計の板と同じ（外側が金の縁、::before が暗い台座）。 */
.menu-button--primary {
  --menu-button-notch: 1.1em;

  background: linear-gradient(180deg, var(--menu-gold-light), var(--menu-gold-mid) 50%, var(--menu-gold-dark));
  border: 0;
  clip-path: polygon(
    var(--menu-button-notch) 0,
    calc(100% - var(--menu-button-notch)) 0,
    100% 50%,
    calc(100% - var(--menu-button-notch)) 100%,
    var(--menu-button-notch) 100%,
    0 50%
  );
  color: var(--menu-accent-text);
  cursor: pointer;
  font: inherit;
  font-size: var(--menu-button-font-size);
  font-weight: 700;
  height: var(--menu-button-height);
  isolation: isolate;
  letter-spacing: 0.3em;
  min-width: 12em;
  padding: 0 2.4em;
  position: relative;
  text-indent: 0.3em;
  text-shadow: 0 1px 0 #2a1804;
}

.menu-button--primary::before {
  background: radial-gradient(ellipse at 50% 0%, var(--menu-plate-light), var(--menu-plate-dark) 75%);
  clip-path: inherit;
  content: "";
  inset: 3px;
  position: absolute;
  z-index: -1;
}

.menu-button--primary:hover:not(:disabled)::before,
.menu-button--primary:focus-visible::before {
  background: radial-gradient(ellipse at 50% 0%, #7a5518, #24150a 75%);
}

/* clip-path で切り抜くと outline は描かれないので、フォーカスは台座の明るさと文字の光で示す。 */
.menu-button--primary:focus-visible {
  outline: none;
  text-shadow: 0 1px 0 #2a1804, 0 0 0.5em rgb(255 200 80 / 90%);
}

/* 押せない板は、透かさずに色だけを落とす。透かすと、明るい背景の上で文字が読めなくなる。 */
.menu-button--primary:disabled {
  color: #a39a86;
  cursor: default;
  filter: grayscale(0.85) brightness(0.75);
}

.menu-button--secondary {
  background-color: rgb(11 14 19 / 55%);
  border: 1px solid rgb(230 237 246 / 60%);
  border-radius: 999px;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 0.4em 1.25em;
}

.menu-button--secondary:hover:not(:disabled) {
  background-color: rgb(230 237 246 / 14%);
}

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

.menu-button--secondary:disabled {
  cursor: default;
  opacity: 0.45;
}

/* ホーム画面。左にプレイヤーのアセンダーの立ち姿、右にメニューを置く。
   絵は ascenders.css の変数から読む（どの変数を使うかは HomePage が ascenders.js の定義から決める）。 */
.home-page__ascender {
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: contain;
  bottom: -8dvh;
  filter: drop-shadow(0 0 1.5rem rgb(0 0 0 / 70%));
  height: 104dvh;
  left: 0;
  pointer-events: none;
  position: absolute;
  width: 50%;
  z-index: -1;
}

/* 元の絵が左向きのアセンダーは、メニューのある右を向くように反転する。 */
.home-page__ascender--mirrored {
  transform: scaleX(-1);
}

.home-page__main {
  align-items: center;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-width: 0;
}

.home-page__panel {
  display: grid;
  gap: clamp(1.25rem, 5vmin, 3rem);
  grid-column: 2;
  justify-items: center;
  min-width: 0;
  text-align: center;
}

.home-page__menu {
  display: grid;
  gap: var(--home-menu-gap);
  justify-items: stretch;
}

.menu-button__note {
  display: block;
  font-size: 0.5em;
  font-weight: 400;
  letter-spacing: 0.2em;
  margin-top: 0.2em;
}

/* 幅の狭い画面では、メニューを中央に置き、絵はその後ろに薄く出す。 */
@media (max-aspect-ratio: 1 / 1) {
  .home-page__ascender {
    opacity: 0.35;
    width: 100%;
  }

  .home-page__main {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-page__panel {
    grid-column: 1;
  }
}

.home-page__matchmaking {
  /* メニューの板の間隔。板の数（--home-menu-items）は HomePage が渡す。 */
  --home-menu-gap: clamp(0.75rem, 2.4vmin, 1.25rem);

  align-content: center;
  display: grid;
  gap: 1.25em;
  justify-items: center;
  /* メニューを並べた高さを常に確保する。探している表示に切り替わっても、位置が上下に動かないようにする。 */
  min-height: calc(
    var(--home-menu-items, 3) * var(--menu-button-height) +
    (var(--home-menu-items, 3) - 1) * var(--home-menu-gap)
  );
}

.home-page__status {
  align-items: center;
  color: var(--menu-accent-text);
  display: flex;
  font-size: 1.2em;
  gap: 0.75em;
  margin: 0;
  text-shadow: 0 1px 0.4em rgb(0 0 0 / 90%);
}

/* 待っている間の印。金の輪が回る。 */
.home-page__status::before {
  animation: home-page-spin 1s linear infinite;
  border: 0.18em solid rgb(245 210 122 / 25%);
  border-radius: 50%;
  border-top-color: var(--menu-gold);
  content: "";
  flex: none;
  height: 1.1em;
  width: 1.1em;
}

@keyframes home-page-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-page__status::before {
    animation: none;
  }
}

/* 対戦相手が見つかった知らせ。待っている間の印（回る輪）は出さず、文字を大きくする。 */
.home-page__status--found {
  font-size: 1.6em;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.home-page__status--found::before {
  content: none;
}

.home-page__error {
  background-color: rgb(60 10 18 / 80%);
  border: 1px solid #ff5a6e;
  border-radius: 0.5rem;
  color: #ffd9de;
  margin: 0;
  max-width: min(90vw, 28rem);
  padding: 0.6em 1em;
}

/* デッキ選択の画面。自分のデッキを縦に並べる。 */
.decks-page__header {
  justify-content: flex-start;
}

/* 左にデッキの一覧を置く。右は、押したデッキのカードを出す場所として空けておく。 */
.decks-page__main {
  align-content: start;
  display: grid;
  gap: clamp(0.5rem, 1.5vmin, 1rem) clamp(1rem, 3vmin, 2rem);
  grid-template-areas:
    ". actions"
    "list cards";
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  min-width: 0;
  overflow-y: auto;
  padding-top: clamp(0.5rem, 2vmin, 1.5rem);
}

/* 左の一覧（と、読み込み中・読み込めなかったときの表示）。右のカードの枠と、上端と高さをそろえる。 */
.decks-page__main > .menu-page__panel,
.decks-page__main > .menu-page__text {
  grid-area: list;
}

.decks-page__panel {
  align-content: start;
  box-sizing: border-box;
  justify-items: stretch;
  max-width: none;
  padding: 1em;
  width: 100%;
}

.decks-page__list {
  display: grid;
  gap: 0.75em;
  list-style: none;
  margin: 0;
  padding: 0;
}

.decks-page__deck {
  align-items: center;
  background-color: rgb(230 237 246 / 6%);
  border: 1px solid rgb(245 210 122 / 35%);
  border-radius: 0.4rem;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em 1em;
  min-height: 5.5em;
  padding: 0.6em 1em 0.6em 0.6em;
}

/* 対戦で使うデッキ。枠を金色に光らせる。 */
.decks-page__deck--active {
  background-color: rgb(245 210 122 / 12%);
  border-color: var(--menu-gold);
  box-shadow: 0 0 0.9em rgb(255 200 80 / 65%), inset 0 0 0.9em rgb(255 200 80 / 22%);
}

/* アセンダーの顔の絵（AscenderPortrait）。切り出す位置と大きさは、部品が絵の定義から決める。 */
.ascender-portrait {
  background-color: rgb(5 7 11 / 60%);
  background-repeat: no-repeat;
  border: 1px solid rgb(245 210 122 / 55%);
  border-radius: 0.3rem;
  flex: none;
  height: 4.3em;
  width: 4.3em;
}

/* カードを右に出しているデッキ。左の端に明るい帯を付ける（対戦で使うデッキの光る枠とは別の印）。 */
.decks-page__deck--viewed {
  border-left: 0.3em solid var(--menu-text);
}

/* デッキの絵と名前。押すと、右にそのデッキのカードを出す。 */
.decks-page__deck-open {
  align-items: center;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: flex;
  flex: 1;
  font: inherit;
  gap: 1em;
  min-width: 0;
  padding: 0;
  text-align: left;
}

.decks-page__deck-open:focus-visible {
  outline: 2px solid var(--menu-gold);
  outline-offset: 2px;
}

.decks-page__deck-name {
  color: var(--menu-accent-text);
  font-size: 1.15em;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.decks-page__deck-actions {
  display: flex;
  flex: none;
  gap: 0.6em;
  margin-left: auto;
}

/* デッキの「編集する」「削除する」。絵だけの丸いボタン。ヘッダーのボタンより控えめにし、デッキの枠の中に収める */
.decks-page__deck-action {
  aspect-ratio: 1;
  background-color: rgb(11 14 19 / 55%);
  border: 1px solid rgb(230 237 246 / 60%);
  border-radius: 50%;
  color: inherit;
  cursor: pointer;
  display: grid;
  height: 2.25em;
  padding: 0;
  place-items: center;
}

.decks-page__deck-action:hover {
  background-color: rgb(230 237 246 / 14%);
}

.decks-page__deck-action:focus-visible {
  outline: 2px solid var(--menu-gold);
  outline-offset: 2px;
}

/* 削除は取り消せないので、重ねたときに赤くして、ほかのボタンと見分ける */
.decks-page__deck-action--delete:hover,
.decks-page__deck-action--delete:focus-visible {
  border-color: #e0605a;
  color: #ff8a84;
}

/* 指で押す端末では、押せる範囲（44px 四方）を見た目の大きさで取る。2 つが並ぶので、広げた範囲が重ならないように */
@media (pointer: coarse) {
  .decks-page__deck-action {
    height: 2.75rem;
  }
}

/* 新しいデッキを作る枠。デッキの枠と同じ大きさで、真ん中に＋を置く。 */
.decks-page__new {
  border-style: dashed;
  color: var(--menu-accent-text);
  cursor: pointer;
  font: inherit;
  font-size: 1em;
  justify-content: center;
  width: 100%;
}

.decks-page__new > span {
  font-size: 2em;
  line-height: 1;
}

.decks-page__new:disabled {
  cursor: default;
  opacity: 0.55;
}

.decks-page__new:focus-visible {
  outline: 2px solid var(--menu-gold);
  outline-offset: 2px;
}

/* 押したデッキのカード。1 段に 10 枚ずつ並べる（30 枚で 3 段）。カードの大きさは、場所の幅から決まる。 */
.deck-card-list {
  align-content: start;
  box-sizing: border-box;
  /* カードの間の隙間を、この場所の幅に比例させる（下の cqi）ための目印。 */
  container-type: inline-size;
  justify-items: stretch;
  max-width: none;
  padding: 1em;
  width: 100%;
}

/*
 * 隙間は、場所の幅に対する割合で決める（カードの大きさと一緒に伸び縮みする）。
 * 印はカードの外へ、左右それぞれカードの幅の 15% ずつはみ出す（cards.css の .card-marks-on-frame。上下にははみ出さない）。
 * 左右の隙間はカードの幅の約 3 割強（2.4 / 7.5）で、隣り合うカードの印が重ならない、ぎりぎりの広さ。
 * 段の間（上下）は、隣のカードとの間（左右）より広く取る。
 */
.deck-card-list__cards {
  column-gap: 2.4cqi;
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  /* 端のカードの印がはみ出す分を、場所の内側に取る。 */
  padding: 1.5cqi;
  row-gap: 3.6cqi;
}

/* カードと同じ縦横の比の枠。幅は列の幅で、高さは比から決まる。 */
.deck-card-list__card {
  aspect-ratio: 5 / 7;
  min-width: 0;
}

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

.deck-card-list__card-button:hover {
  filter: brightness(1.15);
}

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

/* 右の列。押したデッキのカードの枠（左の一覧と上端と高さをそろえる）と、その枠の外の左上に置く操作（対戦で使うデッキにするボタンと、登録できなかったことの知らせ）。 */
.decks-page__viewed {
  display: contents;
}

.decks-page__viewed-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75em 1em;
  grid-area: actions;
}

.decks-page__viewed > .deck-card-list {
  grid-area: cards;
}

/* メニューの金縁の板を、操作のボタンとして小さく使う。 */
.decks-page__activate {
  --menu-button-font-size: clamp(0.75rem, 1.8vmin, 0.95rem);
  --menu-button-height: calc(var(--menu-button-font-size) * 2.6);

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

/* 取り消せない操作の前に出す確認の窓（ConfirmDialog）。作りは、対戦画面の降参の窓と同じ。
   メニューの画面の外でも使えるよう、色の変数には同じ色を既定値として付ける。 */
.confirm-dialog__backdrop {
  background-color: rgb(5 7 11 / 70%);
  display: grid;
  inset: 0;
  place-items: center;
  position: fixed;
  z-index: 10;
}

.confirm-dialog {
  background:
    linear-gradient(rgb(18 11 4 / 96%), rgb(18 11 4 / 96%)) padding-box,
    linear-gradient(90deg, #8a5a12, var(--menu-gold, #f5d27a) 50%, #8a5a12) border-box;
  border: 0.125rem solid transparent;
  border-radius: 0.5rem;
  box-shadow: 0 0.5rem 2rem rgb(0 0 0 / 60%);
  color: var(--menu-text, #e6edf6);
  display: grid;
  gap: 1em;
  max-width: min(90vw, 30rem);
  padding: 1.5em 1.75em;
}

.confirm-dialog:focus {
  outline: none;
}

.confirm-dialog__title {
  color: var(--menu-accent-text, #ffe9a8);
  font-size: 1.2em;
  margin: 0;
  overflow-wrap: anywhere;
}

.confirm-dialog__body p {
  margin: 0 0 0.5em;
}

.confirm-dialog__warning {
  color: #ffd9de;
}

.confirm-dialog__actions {
  display: flex;
  gap: 0.75em;
  justify-content: flex-end;
}

.confirm-dialog__confirm {
  border-color: #ff5a6e;
  color: #ffd9de;
}

/* 押したカードの絵を、切らずに額縁なしで大きく出す（CardArtViewer）。絵は画像の比率のまま、画面の 9 割に収める。 */
.card-art-viewer {
  background: none;
  border: 0;
  cursor: zoom-out;
  margin: auto;
  max-height: 100dvh;
  max-width: 100vw;
  overflow: visible;
  padding: 0;
}

.card-art-viewer::backdrop {
  background-color: rgb(5 7 11 / 85%);
}

.card-art-viewer:focus {
  outline: none;
}

.card-art-viewer__image {
  border-radius: 0.25rem;
  box-shadow: 0 0.5rem 2.5rem rgb(0 0 0 / 70%);
  display: block;
  max-height: 90dvh;
  max-width: 90vw;
  object-fit: contain;
}

.card-art-viewer__close {
  background: rgb(5 7 11 / 70%);
  border: 0.0625rem solid var(--menu-gold, #f5d27a);
  border-radius: 50%;
  color: var(--menu-text, #e6edf6);
  cursor: pointer;
  font-size: 1.4rem;
  height: 2.25rem;
  line-height: 1;
  position: absolute;
  right: -0.75rem;
  top: -0.75rem;
  width: 2.25rem;
}

/*
 * メニュー画面の BGM・効果音の消音のボタン（見た目と押せる範囲は対戦の旗のボタンと共通。application.css の .battle-header-control）。
 * どのメニュー画面でも、ヘッダーの左上に BGM・効果音の順で並べる。デッキ一覧・デッキ編集では、左上の戻るボタンの右（対戦画面の
 * 「旗 → スピーカー → 効果音」と同じ並び。JSX でも戻るボタンの後ろに置き、見た目の順と Tab で移る順をそろえる）。
 * ホームはヘッダーの並びが右寄せ（ログアウトが右上）なので、消音のボタンを JSX の先頭に置き、効果音のボタンの右を空けて左へ寄せる。
 * ボタンどうしの間は、ヘッダーの共通のルール（.menu-page__header の gap）で決める。
 * 大きさは対戦画面の変数（--battle-control-height）に依らず、ここで決める。
 * 指で押す端末で押せる範囲は、対戦と同じく右と下へ広げる（隣どうしの範囲の重なりは、下の .menu-page__header の gap で避ける）
 */
/* ヘッダーの絵の丸いボタン（消音・ホームへ戻る・戻る・ログアウト）は、同じ大きさにそろえる */
.menu-page .menu-bgm-toggle,
.menu-page .menu-sound-effects-toggle,
.menu-page .menu-header-icon {
  height: var(--menu-header-control-height);
}

.home-page .menu-sound-effects-toggle {
  margin-right: auto;
}

/*
 * 指で押す端末では、ヘッダーの絵のボタンの押せる範囲を 44px 四方まで右と下へ広げる（.battle-header-control）。
 * 隣どうしの範囲が重ならないよう、ボタンの間を広げる。ホームのログアウトは右上の端にあるので、左と下へ広げる
 */
@media (pointer: coarse) {
  .menu-page__header {
    gap: max(0.75rem, 2.75rem - var(--menu-header-control-height));
  }

  .home-page .menu-header-icon::after {
    left: auto;
    right: calc(-1 * var(--battle-header-control-border-width));
  }
}

/*
 * メニュー画面の BGM（曲）。メニュー画面のすべてで流す（useMenuBgm。再生は Router が持つ）。
 * 曲はどの部品が描かれているかに依らず読むので :root に置く。置き場所・出所の記録は doc/ascender-assets.md の「BGM」。
 */
:root {
  --menu-bgm: url("/assets/menu/home-d72819a3.mp3");
}