/* --------------- */
/* Game Analysis   */
/* --------------- */
.game-analysis {
  padding-bottom: 20px;
  max-width: min(90vmin, 480px);
  margin: 0 auto;
}

.game-analysis p {
  text-align: center;
}

.analysis-class {
  font-weight: bold;
  padding: 12px 0;
  margin-top: 0;
  background-color: var(--color-blue);
  color: var(--color-white);
  border-block: 1px solid var(--color-beige-deep);
}

.tab-content .analysis-class:first-child {
  border-top: none;
}

/* Chart   */
.chart-wrapper {
  width: 90%;
  max-width: 800px;
  height: 300px;
  /* ← ここが本体 */
  margin: 20px auto 10px;
}

.chart-explanation {
  margin: 0 auto 20px;
  width: 70%;
  font-size: 0.6rem;
  text-align: left;
}

.chart-explanation-item {
  margin-bottom: 10px;
}

.chart-label {
  font-weight: bold;
}

/* 5つの力チャート(レーダーチャート) */
/* 高さは幅から決める(2026-10-22)。高さを固定すると、スマホの狭い幅では五角形の大きさが幅で決まり、
   上下が余って隙間になるため */
.radar-wrapper {
  position: relative;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 6 / 5;
  margin: 10px auto;
}

.game-analysis p.radar-note {
  margin: 0 auto 10px;
  width: 70%;
  font-size: 0.6rem;
}

/* チャートの点の出し方・好手と悪手の選び方の説明の表(2026-10-22)。
   見出しの行(thead)が無いので、共通の table(base.css)が thead に任せている上の線と上の角丸をここで付ける */
.explanation-table {
  width: 80%;
  margin: 0 auto 20px;
  font-size: 0.7rem;
  border-top: 1px solid var(--color-beige-dark);
}

.explanation-table th {
  white-space: nowrap;
  font-weight: bold;
}

.explanation-table td {
  text-align: left;
}

.explanation-table tr+tr> :is(th, td) {
  border-top: 1px solid var(--color-beige-dark);
}

.explanation-table>tbody:first-child>tr:first-child> :first-child {
  border-top-left-radius: 5px;
}

.explanation-table>tbody:first-child>tr:first-child> :last-child {
  border-top-right-radius: 5px;
}

/* Moves   */
.moves-class {
  margin-bottom: 5px;
  font-weight: bold;
}

.good-move-wrapper {
  margin-bottom: 30px;
}

.good-move {
  display: flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  margin: 0 auto;
}

.good-move .value {
  font-weight: bold;
  padding-left: 6px;
  color: var(--color-orange);
}

.good-move img {
  width: 25px;
  height: 25px;
}

.mistake-moves-wrapper {
  margin-bottom: 30px;
}

/* Analysis Table   */
.analysis-table {
  table-layout: fixed;
  margin: 0 auto;
  width: 80%;
}

/* thead の背景色(青)は、base.css の table thead th のベージュに全面で覆われて見えていなかったので消した。
   残すと、角丸にした四隅のセルの外に青がのぞく(2026-10-21) */

.analysis-table tr {
  border: 1px solid var(--color-beige-dark);
}

.analysis-table td.move-no div {
  width: fit-content;
  margin: auto auto;
}

.analysis-table td.move-no .row-div {
  gap: 5px;
}

.analysis-table td.your-move {
  color: var(--color-blue-dark);
}

.analysis-table td.better-move {
  color: var(--color-orange);
  position: relative;
}

/* --------------- */
/* Note Wrapper */
/* --------------- */
.analysis-notes {
  border: 1px solid var(--color-beige-deep);
  border-top: none;
}

.analysis-notes .analysis-class {
  border-top: none;
}

.note-wrapper {
  width: 90%;
  margin: 0 auto;
}

.note-sub {
  color: var(--color-red-dark);
  margin-bottom: 0;
}

.note-wrapper ul {
  margin-top: 8px;
  margin-right: 20px;
}

.note-wrapper li {
  margin-bottom: 5px;
}