/* キャラクターシート：基本情報・判定・判定表・忍法などの箱 */

/* ---- basics ---- */
/* 基本情報：2 列（左に名前〜流儀、右に表の顔〜功績点）。右の「背景」が余った高さを引き受ける。狭い画面は 1 列 */
#basics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
  align-items: stretch;
}
.basics-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
#basics .row {
  display: flex;
  align-items: stretch;
  min-height: 38px;
}
#basics .row[hidden] {
  display: none;
}
#basics .row.grow {
  flex: 1 1 auto;
  min-height: 120px;
}
#basics .row.last {
  margin-bottom: 10px;
}
#basics .caption {
  flex: 0 0 7em;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-s) 0 0 var(--radius-s);
  background-color: var(--color-dark);
  color: var(--color-light);
  font-size: .95em;
}
/* 流派・背景の見出しは押すと入力補助の窓が開く（しま模様） */
#basics .caption.form {
  background: repeating-linear-gradient(-45deg, var(--color-dark), var(--color-dark) 2px, var(--color-disabled) 2px, var(--color-disabled) 4px);
  cursor: pointer;
}
#basics .item {
  flex: 1;
  min-width: 0;
  display: flex;
}
#basics .item > * {
  width: 100%;
  height: 100%;
  min-height: 38px;
  padding: 0 10px;
  border: var(--border-dark);
  border-left: none;
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  background-color: var(--color-bg);
  color: var(--color-text);
}
#basics .item > textarea {
  padding: 8px 10px;
  resize: vertical;
  line-height: 1.5;
}
#basics .item > [disabled] {
  background-color: var(--color-field-disabled);
  color: var(--color-disabled);
}
/* 種別を選ぶまでは、入力欄の代わりに案内を出す */
.basics-empty {
  display: none;
  width: 100%;
  padding: 28px 16px;
  border: 1px dashed var(--color-line);
  border-radius: var(--radius);
  color: var(--color-muted);
  text-align: center;
}
#basics:not(:has(.row:not([hidden]))) + .basics-empty {
  display: block;
}
@media screen and (max-width: 999px) {
  #basics {
    grid-template-columns: 1fr;
  }
  #basics .row.grow {
    flex: none;
    min-height: 160px;
  }
}

/* ---- judgement ---- */
/* 判定：左に切り替えの箱、まん中に判定の表、右に使用特技。追加の判定はその下 */
.judgement-container {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 250px;
  gap: 12px;
  align-items: start;
}
.switch-judgement {
  height: 81px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: var(--border-enabled);
  border-radius: var(--radius-s);
  background-color: var(--color-bg);
  transition: var(--trans-default);
}
.switch-judgement label {
  cursor: pointer;
}
.switch-judgement .caption {
  font-size: 1.1em;
  color: var(--color-enabled);
  font-weight: bold;
  transition: var(--trans-default);
}
.switch-judgement[disabled] {
  border: var(--border-disabled);
}
.switch-judgement[disabled] .caption {
  color: var(--color-disabled);
}
/* 表の外周だけ角を丸める：外の枠は箱（.judgement-box）が描き、表の外側のセルの線は消す（border-style: hidden） */
.judgement-box {
  border: var(--border-enabled);
  border-radius: var(--radius-s);
  overflow: hidden;
  transition: var(--trans-default);
}
.judgement-box:has(td[disabled]) {
  border-color: var(--color-disabled);
}
#judgement {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border-style: hidden;
}
#judgement td {
  height: 40px;
  text-align: center;
  vertical-align: middle;
}
#judgement td input {
  height: 100%;
  width: 100%;
  padding: 1px 0px 0px 14px;
  font-weight: bold;
}
#judgement .caption {
  font-size: 1em;
  border-right: var(--border-light);
}
@media screen and (max-width: 999px) {
  .judgement-container {
    grid-template-columns: 96px minmax(0, 1fr);
  }
}

/* ---- judgement-palette ---- */
#judgement-palette {
  display: none;
  grid-column: 1 / 3;
}
#switch-judgement-container:has( #switch-judgement:checked) ~ #judgement-palette {
  display: block;
}
/* 追加の判定の行は、上の判定とそろえる：左は「使用」のボタン（判定の箱 96px＋間 12px）、右は 5 つの数の表（5 等分）。
   数の表だけを箱（.palette-box）で囲み、外周の角を丸める（判定の表と同じ作り。2026-10-26） */
.palette-grid {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  align-items: start;
}
.palette-buttons {
  width: 100%;
}
.palette-box {
  border: var(--border-enabled);
  border-radius: var(--radius-s);
  overflow: hidden;
}
.palette-box:has(#judgement-palette-rows:empty) {
  display: none;   /* 0 行のときは枠も出さない */
}
.palette-values {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border-style: hidden;   /* 外側のセルの線は箱が描く */
}
#judgement-palette td {
  height: 40px;
  text-align: center;
  vertical-align: middle;
}
#judgement-palette td input {
  height: 100%;
}
#judgement-palette td input[type="number"] {
  width: 100%;
  padding: 1px 0px 0px 14px;
  font-weight: bold;
}
/* 「使用」のボタン。右端を判定の箱の右端にそろえる */
#judgement-palette td input[type="button"] {
  width: 50px;
  height: 30px;
  padding-top: 3px;
  font-size: 14px;
  border: var(--border-enabled);
  border-radius: var(--radius-xs);
  text-align: center;
  cursor: pointer;
}
#judgement-palette td input[type="button"]:hover {
  background-color: var(--color-enabled-trans);
  color: white;
}
#judgement-palette td.none {
  border: none;
  background-color: transparent;
  color: var(--color-enabled);
  text-align: right;
  padding-right: 12px;
}
/* 追加の判定の枠を増やす・減らすボタン（0〜5 行） */
#judgement-palette .palette-ctrl {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  color: var(--color-enabled);
  font-weight: bold;
}
#judgement-palette .palette-ctrl span {
  flex: 0 0 96px;
  margin-right: 4px;
  text-align: right;
}
#judgement-palette .palette-ctrl input[type="button"] {
  width: 40px;
  height: 28px;
  border: var(--border-enabled);
  border-radius: var(--radius-xs);
  color: var(--color-enabled);
  text-align: center;
  font-weight: bold;
  cursor: pointer;
}
#judgement-palette .palette-ctrl input[type="button"]:hover:not([disabled]) {
  background-color: var(--color-enabled-trans);
  color: white;
}
#judgement-palette .palette-ctrl input[type="button"][disabled] {
  border: var(--border-disabled);
  color: var(--color-disabled);
  cursor: default;
}
/* 使用特技（判定がオンのときだけ出す）。「使用特技」は見出しの行、選ぶ箱は値の行とそろえる */
#judgement-source-container {
  display: none;
  flex-direction: column;
}
#switch-judgement-container:has( #switch-judgement:checked) ~ #judgement-source-container {
  display: flex;
}
#judgement-source-container label {
  display: flex;
  align-items: center;
  height: 40px;
  margin-top: 1px;
  color: var(--color-enabled);
  font-weight: bold;
  white-space: nowrap;
}
#judgement-source {
  height: 40px;
  padding: 0 12px;
  border: var(--border-enabled);
  border-radius: var(--radius-s);
  color: var(--color-enabled);
}
#judgement-source[disabled] {
  border: var(--border-disabled);
  color: var(--color-disabled);
}
@media screen and (max-width: 999px) {
  #judgement-source-container {
    grid-column: 1 / 3;
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }
  #judgement-source-container label {
    height: auto;
    margin: 0;
  }
  #judgement-source {
    flex: 1;
    min-width: 0;
  }
}

/* ---- skill-table ---- */
/* 特技表：見出しの行（器術〜妖術。角丸）と、特技の表（番号・特技・木蘭。四角）を別の表にする。
   特技の表の線は、各セルの線だけで描く（2026-10-27。箱の枠と左下の切り取りは、線が消えたり飛び出したりしたのでやめた） */
#skill-table-container {
  overflow-x: auto;
  overflow-y: hidden;   /* 縦には送らない（文字の高さの丸めで 1px はみ出しても、スクロールバーを出さない） */
}
#skill-table {
  min-width: 640px;
}
#skill-table table {
  width: 100%;
  table-layout: fixed;
}
#skill-table td {
  text-align: center;
  vertical-align: middle;
}
#skill-table td[column="0"],
#skill-table .index {
  width: 4%;
}
#skill-table td[column$=".5"] {
  width: 2%;
}
#skill-table .caption,
#skill-table .skill {
  width: 14%;
}
.skill-captions {
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: 12px;
}
#skill-table .caption {
  height: 40px;
  border: var(--border-disabled);
  border-radius: var(--radius-xs);
  background-color: var(--color-disabled);
  padding-top: 2px;
  font-size: 1.05em;
  color: var(--color-light);
  transition: var(--trans-default);
}
#skill-table[active] .caption {
  border-color: var(--color-enabled);
  background-color: var(--color-enabled);
  cursor: pointer;
}
#skill-table[active] .caption.lost {
  border: var(--border-disabled);
  background-color: var(--color-disabled);
}
.skill-grid {
  border-collapse: collapse;   /* 外側の線も各セルが描く（番号の列の下と木蘭の行の左は、セルに線がないので空く） */
}
#skill-table .index {
  background-color: var(--color-disabled);
  border: var(--border-disabled);
  border-bottom: var(--border-light);
  color: var(--color-light);
  transition: var(--trans-default);
}
#skill-table[active] .index {
  background-color: var(--color-enabled);
  border-color: var(--color-enabled);
  border-bottom-color: var(--color-bg);
}
#skill-table .index.last {
  border-bottom: var(--border-disabled);   /* 番号の列のいちばん下は、表の線と同じ色で閉じる */
}
#skill-table[active] .index.last {
  border-bottom-color: var(--color-enabled);
}
/* 左下（番号の列の下、木蘭の行の左）は使わないので、何も描かない */
#skill-table .index-foot {
  background: transparent;
  border: none;
}
#skill-table .skill {
  height: 40px;
}
#skill-table .gap {
  width: 2%;
}
#skill-table .mokulane-item {
  height: 17px;
  border-bottom: var(--border-disabled);
  cursor: pointer;
  transition: var(--trans-default);
}
#skill-table[active] .mokulane-item {
  border-bottom: var(--border-enabled);
}
#skill-table .mokulane-item[column='1'] {
  border-left: var(--border-disabled);
}
#skill-table .mokulane-item[column='6'] {
  border-right: var(--border-disabled);
}
#skill-table[active] .mokulane-item[column='1'] {
  border-left: var(--border-enabled);
}
#skill-table[active] .mokulane-item[column='6'] {
  border-right: var(--border-enabled);
}
#skill-table .mokulane-item.active-mokulane {
  background-color: var(--color-dark);
  border-color: var(--color-dark);
}
#skill-table[active] .mokulane-item.active-mokulane {
  background-color: var(--color-disabled);
  border-color: var(--color-disabled);
}

/* ---- skill-table-main ---- */
#skill-table .main .gap {
  border-top: var(--border-disabled);
  border-bottom: var(--border-disabled);
  background-color: transparent;
  transition: var(--trans-default);
  cursor: pointer;
}
#skill-table .main .gap.active-gap {
  border-color: var(--color-dark);
  background-color: var(--color-dark);
}
#skill-table[active] .main .gap {
  border-color: var(--color-enabled);
}
#skill-table[active] .main .gap.active-gap {
  border-color: var(--color-disabled);
  background-color: var(--color-disabled);
}
#skill-table .main .skill {
  border: var(--border-disabled);
  font-size: 1em;
  color: var(--color-disabled);
  cursor: cell;
  background-color: var(--color-bg);
  transition: var(--trans-default);
}
#skill-table .main .skill.active-skill {
  color: var(--color-light);
  background-color: var(--color-disabled);
}
#skill-table .main .skill.active-skill.upper-active-skill {
  border-bottom-color: var(--color-bg);
}
#skill-table[active] .main .skill {
  border-color: var(--color-enabled);
  color: var(--color-text);
}
#skill-table[active] .main .skill.active-skill {
  background-color: var(--color-enabled);
  color: var(--color-light);
}
#skill-table[active] .main .skill.active-skill.lost-skill {
  background-color: var(--color-disabled);
}
/* マヒ（判定中に Shift＋クリック）：修得しているが使えない。判定がオフのときの修得の色（灰色）にする */
#skill-table[active] .main .skill.active-skill.paralyzed-skill {
  background-color: var(--color-disabled);
}
/* 判定がオンのときだけ、特技表の下に Shift＋クリックの説明を出す */
#skill-table-note {
  display: none;
  margin-top: 10px;
  font-size: 0.8em;
  color: var(--color-enabled);
}
#skill-table[active] ~ #skill-table-note {
  display: block;
}
/* 説明は 1 行ずつ「※」で始め、折り返したら「※」の後ろにそろえる */
#skill-table-note span {
  display: block;
  padding-left: 1em;
  text-indent: -1em;
}
#skill-table[active] .main .skill.selected-skill {
  border-color: var(--color-selected);
  box-shadow: var(--shadow-selected);
  transition: none;
}
#skill-table[active] .main .skill.upper-selected-skill {
  border-bottom-color: var(--color-selected);
  transition: none;
}
#skill-table .main .skill .item {
  height: 100%;
  width: 100%;
  padding: 0;
  padding-left: 9%;
}
#skill-table .main .skill .item .name,
#skill-table .main .skill .item .value {
  height: 100%;
  padding-top: 1%;
}
#skill-table .main .skill .item .name {
  justify-content: flex-start;
  width: 70%;
}
#skill-table .main .skill .item .value {
  justify-content: center;
  width: 30%;
  opacity: 0;
  transition: opacity .3s;
}
#skill-table[active] .main .skill .item .value {
  opacity: 1;
}
@media screen and (max-width: 767px) {
  #skill-table .main .skill {
    font-size: .85em;
  }
}

/* ---- simple-container ---- */
/* 忍法・奥義・忍具・設定・備考：見出しと枠。角を少し丸める */
.simple-container {
  color: var(--color-text);
}
.simple-container .caption {
  height: 36px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--border-dark);
  border-bottom: none;
  border-radius: var(--radius-s) var(--radius-s) 0 0;
  background-color: var(--color-dark);
  color: var(--color-light);
  font-weight: bold;
}
/* 忍法・奥義・忍具の見出しは押すと入力補助の窓が開く（しま模様） */
.simple-container .caption.form-switch {
  background: repeating-linear-gradient(-45deg, var(--color-dark), var(--color-dark) 2px, var(--color-disabled) 2px, var(--color-disabled) 4px);
  cursor: pointer;
}
.simple-container .value {
  width: 100%;
  border: var(--border-dark);
  border-radius: 0 0 var(--radius-s) var(--radius-s);
  padding: 10px;
}
.simple-container .value textarea {
  resize: vertical;
  height: 200px;
  width: 100%;
  line-height: 1.5;
}
/* 忍法と奥義は同じ高さ。奥義のはじめの案内（placeholder。10 行＝240px）がスクロールなしで読める 250px にそろえる（2026-10-27） */
#public-art,
#private-art {
  height: 250px;
}