/* ゲージバトル(対人戦)画面。**一画面に収める。** レイアウトの考え方は
   lobby.css と同じ（高さは .container にだけ与える。html/body には与えない）。 */

body.pvp-duel .container {
  height: 100dvh;
  box-sizing: border-box;
  padding: 0.4em 0.4em;
  max-width: none;
  display: flex;
  flex-direction: column;
  gap: 0.4em;
}
/* 申込・速さ選び・決着の枠は、これまでどおり読みやすい幅に */
body.pvp-duel .panel { width: 100%; max-width: 30em; margin: 0 auto; box-sizing: border-box; }

.panel {
  background: var(--panel, #fff);
  border: 1px solid var(--border, #e2e4e8);
  border-radius: 0.75em;
  padding: 0.8em 0.9em;
}

/* 上部の3ボタン。**常時操作できる** */
.dl-bar { display: flex; gap: 0.4em; flex: 0 0 auto; }
.dl-btn {
  flex: 1 1 0;
  padding: 0.5em 0.3em;
  font-size: 0.78em;
  border: 1px solid var(--border, #e2e4e8);
  border-radius: 0.6em;
  background: #fafbfc;
  color: var(--text-sub, #6b7280);
  cursor: pointer;
}
.dl-btn.dl-danger { color: #c0392b; }
/* 戻る（左上の ←）。**ミニゲーム一覧・大会のページの ← と同じ形** */
.dl-back { flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 1.8em; height: 1.8em; border-radius: 50%; border: 0; cursor: pointer;
  font-size: 1.15em; font-weight: 900; color: #2b3446; background: rgba(255, 255, 255, .88);
  box-shadow: 0 0.1em 0.4em rgba(0, 0, 0, .18); }
.dl-bar { align-items: center; }
.dl-donenext { font-size: 0.85em; color: var(--text-sub, #6b7280); margin: 0.4em 0 0; }
.dl-btn { position: relative; }
/* チャットに新着。**閉じているあいだだけ点滅させる** */
.dl-dot {
  position: absolute; top: 0.2em; right: 0.35em;
  width: 0.55em; height: 0.55em; border-radius: 50%;
  background: #e0433b;
  animation: dl-blink 1s ease-in-out infinite;
}
@keyframes dl-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

/* 断る前の確認 */
.dl-declineconfirm { text-align: center; margin-top: 0.6em; }
/* **この枠は .panel の中（白地）。** 赤は濃いほうを使う
   （一度、地色を濃紺と取り違えて明るい赤にしてしまった） */
.dl-declinewarn { font-size: 0.85em; color: #c0392b; margin: 0 0 0.5em; }

/* 申込の応答・お断り */
.dl-pending, .dl-rulepick { text-align: center; }
.dl-pending-btns { display: flex; gap: 0.6em; justify-content: center; margin-top: 0.6em; }
/* **「断る」側は自前で色を持つ。**
   .menu-item は文字を白にするが、色のクラスが付いていないと背景が付かない。
   ダイバーズの地色（濃紺）に白文字が溶けて、字が読めなかった */
.dl-pending-btns .menu-item { flex: 1 1 0; min-width: 0; }
.menu-item.dl-no {
  background: #8a5560;                 /* 押しても損をしない色。赤すぎない */
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .25);
}
.menu-item.dl-no:hover { background: #9c616d; }
.dl-timer { font-size: 0.8em; color: var(--text-mute, #9aa1ab); margin: 0.4em 0 0; }

/* 速さ選び */
.dl-speeds { display: flex; flex-wrap: wrap; gap: 0.5em; justify-content: center; margin-top: 0.6em; }
.dl-speed {
  padding: 0.5em 1em; font-size: 0.9em;
  border: 1px solid var(--border, #e2e4e8); border-radius: 0.6em;
  background: #fafbfc; cursor: pointer;
}
.dl-speed:active { background: var(--accent, #4a90d9); color: #fff; }

/* 背景選び。**対CPU戦の背景設定と同じ6つを、3列のサムネイルで** */
.dl-rulehead { font-size: 0.8em; color: var(--text-sub, #6b7280); margin: 0.7em 0 0.2em; }
.dl-bgs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4em; }
.dl-bg { font: inherit; background: none; border: 0.18em solid transparent; border-radius: 0.5em;
  padding: 0.15em; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 0.2em; }
.dl-bg canvas { display: block; width: 100%; height: auto; max-height: 18vh; object-fit: contain; border-radius: 0.3em; }
.dl-bg span { font-size: 0.7em; line-height: 1.2; color: var(--text-sub, #6b7280); }
.dl-bg.on { border-color: #ffb400; }
.dl-bg.on span { color: #b87a00; font-weight: 700; }
/* 決める人でないときは見るだけ */
.dl-bgs.is-off .dl-bg { cursor: default; opacity: .6; }

/* 対戦本体 */
/* **盤面だけが場所を取る。** 名前・点数・速さ・結果・ボタンは盤面の上に重ねる
   （対CPU戦の play.css と同じ考え）。縦に並べていたころは、そのぶん盤面が小さく、
   ボタンが出たり消えたりするたびに盤面の大きさが変わっていた（2026/10/21） */
.dl-battle {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
  align-items: center;
  position: relative;
}
.dl-score, .dl-speedtag, .dl-battle .dl-resultline, .dl-readybtn, .dl-waitopp,
.dl-battle .dl-limit {
  position: absolute; left: 50%; transform: translateX(-50%); z-index: 2;
  white-space: nowrap; margin: 0;
}
.dl-score {
  top: 0.5em;
  display: flex; align-items: center; gap: 0.8em;
  font-size: 0.95em; color: #fff;
  background: rgba(0, 0, 0, .55); border-radius: 1em; padding: 0.2em 0.9em;
}
.dl-name { max-width: 6em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-vs { font-weight: 700; font-size: 1.15em; }
.dl-speedtag {
  top: 2.9em;
  font-size: 0.72em; color: #fff;
  background: rgba(0, 0, 0, .45);
  border-radius: 0.6em; padding: 0.15em 0.7em;
}

.dl-stage {
  position: relative; flex: 1 1 auto; min-height: 0; width: 100%;
  display: flex; align-items: center; justify-content: center;
}
/* **大きさはここだけで決める。JSで測って入れない。**
   入れていたころは、盤面が隠れているあいだ測れず 0px になったり、
   実寸(616x1042)で一度描かれて**はみ出す大きさで出てから縮んだり**していた。
   aspect-ratio なら最初の1枚から正しい（play.css の #g と同じ考え方） */
/* **枠に重ねて置く（position: absolute）。** 流れの中に置いていたころは、
   max-height:100% の「100%」が flex で決まる高さを指すため、ブラウザによっては
   最初の対戦だけ高さが決まらないまま測られ、1回目だけ盤面の大きさが違っていた。
   absolute なら % は枠そのものの大きさで、いつでも決まっている */
#dlCanvas {
  position: absolute; inset: 0; margin: auto;
  display: block;
  /* **縦横の比は canvas 自身が持っている**（width/height 属性の 616x1042）。
     auto と max-* だけにしておけば、入る側に合わせて比のまま縮む。
     height:100% を書くと縦に引き伸ばされる（実測：375x812 になった） */
  width: auto; height: auto;
  max-width: 100%; max-height: 100%;
  touch-action: none;
}

.dl-count {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 3.4em; font-weight: 700; color: #fff;
  text-shadow: 0 0.05em 0.2em rgba(0,0,0,.6);
  pointer-events: none;
}

/* 「ドンっ」のルール表示 */
.dl-don {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 0.2em;
  background: rgba(0,0,0,.55);
  color: #fff; font-weight: 700;
  pointer-events: none;
}
.dl-don .dl-donspeed { font-size: 2.2em; }
.dl-don .dl-donnames { font-size: 1em; opacity: .85; }

/* 盤面の下のほうに重ねる。**文字は暗い帯の上に白で。** どの背景でも読めるように */
.dl-battle .dl-resultline {
  bottom: 24%; text-align: center; font-size: 0.95em; line-height: 1.5;
  color: #fff; background: rgba(0, 0, 0, .6); border-radius: 1em; padding: 0.2em 0.9em;
}
/* **ボタンは transform で寄せない。** .menu-item はマウスを乗せると transform で浮くので、
   寄せる指定が消えてボタンが横へ飛び、押せなかった（2026/10/21）。左右の余白で真ん中に置く */
.dl-battle .dl-readybtn { bottom: 12%; padding: 0.6em 2em;
  left: 0; right: 0; margin: 0 auto; width: max-content; transform: none; }
.dl-waitopp {
  bottom: 13%; font-size: 0.85em; color: #fff;
  background: rgba(0, 0, 0, .55); border-radius: 1em; padding: 0.3em 0.9em;
}

/* 決着 */
.dl-done { text-align: center; flex: 1 1 auto; display: flex;
           flex-direction: column; justify-content: center; gap: 0.6em; }
.dl-donetitle { font-size: 1.3em; font-weight: 700; margin: 0; }

/* チャット */
.dl-chatbox { flex: 0 0 auto; }
.dl-chatlog {
  display: flex; flex-direction: column; gap: 0.15em;
  font-size: 0.85em; max-height: 5em; overflow: auto; margin: 0 0 0.4em;
}
.dl-chatlog .who { color: var(--text-sub, #6b7280); margin-right: 0.4em; }
.dl-chatform { display: flex; gap: 0.4em; }
.dl-chatform input {
  flex: 1 1 auto; min-width: 0; padding: 0.4em 0.6em;
  border: 1px solid var(--border, #e2e4e8); border-radius: 0.5em; font-size: 1em;
}
.dl-chatform button {
  padding: 0.4em 1em; border: 1px solid var(--border, #e2e4e8);
  border-radius: 0.5em; background: var(--accent, #4a90d9); color: #fff; cursor: pointer;
}

/* 勝ち負けの理由。**題の真下に、小さく添える。**
   ここは .panel の中（白地）なので、薄い青だと読めない */
.dl-donewhy {
  font-size: 0.92em; color: #5a6472; margin: 0.25em 0 0.8em;
}

/* ===== 対人戦のランキング（対CPU戦の gauge.css に足すぶんだけ） ===== */
/* 自分の行。**100人並ぶので、印が無いとどこに居るか分からない** */
.pv-you { background: rgba(255, 212, 94, .14); border-radius: .4em; }
/* 100位に入らなかったときだけ、自分のぶんを下に出す */
.pv-mine {
  margin: .8em 0 0; padding: .5em .8em; border-radius: 8px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .18);
  color: #cfe0ff; font-size: .9em; text-align: center;
}

/* **勝敗の数は折り返さない。** 「12勝2敗」が「12勝2 / 敗」に割れていた。
   対CPU戦の「12回」より字数が多いので、こちらだけ幅を確保する */
.pvp-rank .rk-sub { white-space: nowrap; flex: 0 0 auto; }
.pvp-rank .rk-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pvp-rank .rk-val { flex: 0 0 auto; }

/* 速さ決めと「つづける」の残り時間。**小さく、邪魔にならない場所に。**
   高さが出入りすると盤面が動くので、空のときも場所は空けておく */
.dl-limit {
  flex: 0 0 auto;
  min-height: 1.3em;
  text-align: center;
  font-size: 0.72em;
  color: var(--text-sub, #6b7280);
  margin: 0.2em 0 0;
}
/* 対戦中の制限時間は盤面のいちばん下に重ねる。**空のときは帯も出さない** */
.dl-battle .dl-limit { bottom: 5%; min-height: 0; color: #fff; text-shadow: 0 0 0.4em #000; }

/* 「※時間切れのため」。**速さの名前より小さく** */
.dl-speednote { font-size: 0.75em; }
.dl-don .dl-speednote { font-size: 0.4em; }