@charset "utf-8";

/* // キャラクター
---------------------------------------------------------------------------------------------------- */
body:not([data-create-type="C"]) .construction-only {
  display: none;
}
body:not([data-create-type="F"]) .fullscratch-only {
  display: none;
}

#regulation dl {
  grid-template-columns: max-content 1fr;
}
#regulation dl dt {
  grid-column: 1;
  grid-row: auto;
  padding-left: .5em;
  padding-right: .2em;
  line-height: 1.8;
  align-self: start;
  text-align: right;
}
#regulation dl dd {
  grid-column: 2;
  grid-row: auto;
  font-size: 1.2rem;
  align-self: start;
  text-align: left;
}
#regulation dl dd label {
  margin-left: 2px;
  font-size: inherit;
  line-height: inherit;
}
#regulation dl dd input[name=history0Exp] {
  width: 5em;
}
#regulation dl dd input[name=stage] {
  width: 16em;
}

#area-status {
  min-height: 0%;
  grid-template-columns: 0.6fr 1.2fr 0.9fr 1.8fr;
  grid-template-rows: auto auto 1fr;
  grid-template-areas:
    "PER PER WKS IMG"
    "SYN SYN SYN IMG"
    "STT STT STT IMG"
  ;
}
#syndrome-status { grid-area: SYN; }


@media screen and (width <= 735px){
  #area-status {
    grid-template-columns: 1fr 1fr 2fr;
    grid-gap: var(--box-v-gap) var(--box-h-gap);
    grid-template-rows: auto auto auto 1fr;

    grid-template-areas:
      "IMG  IMG  IMG"
      "PER  PER  WKS"
      "SYN  SYN  SYN "
      "STT  STT  STT "
    ;
  }
}

body:not(.mode-crc) .crc-only {
  display: none;
}

#syndrome-status table {
  width: 100%;
  & tr {
    border-width: 1px 0 0;
    border-style: solid;
  }
  > thead {
    & th:nth-child(1)   { width: 3.5em; }
    & th:nth-last-child(-n+4) { width:   5em; }
  }
  > tbody {
    & th.breed {
      position: relative;
      border-right-width: 1px;
      border-right-style: solid;
      line-height: 1;
    
      > #breed-value:empty + span {
        display: none;
      }
    }
    & tr.works-row .radio-button > input:not(:checked) + span {
      opacity: 0.3;
    }
    & td.error {
      color: #c00;
      outline: 1px dotted #f00;
      outline-offset: -1px;
      background-color: rgba(255,0,0,0.1);
    }
  }
  > tbody.syndrome-rows tr.auto input,
  > tbody.syndrome-rows tr:not(.auto) td span {
    display: none;
  }
  & tr.pure + tr td:nth-child(n+2) {
    &::after { content: "×2"; }
    & input { display: none; }
  }
}
.night #syndrome-status tbody td.error {
  color: #ea0;
  outline: 1px dotted #f70;
  background-color: rgba(255,0,0,0.1);
}
@media screen and (width <= 735px){
  #syndrome-status table {
    > thead th.breed {
      width: 1.2em;
      > span { display:none }
    }
    > thead th:nth-last-child(-n+4) { width: 3.5em; }
  }
  #breed-value + span { display:none; }
}

#sub-status input {
  width: 3.5em;
}
#sub-status input.auto {
  width: 2.5em;
}
#lifepath {
  margin-top: var(--box-v-gap);
}
#lifepath table {
  table-layout: auto;
  & th:nth-child(1) { width: 5em; }
  & td:nth-child(2) { width: 6em; }
  & th:nth-child(3) { width: 4em; }
  & td.center { width: 4em; }
  & td:last-child   { width: auto; }
}
#lifepath table tbody tr:before {
  display: none;
}
#lifepath table th.small {
  border-bottom-style: solid;
}
#lifepath table th.small.right {
  font-size: 85%;
}
#lifepath table input[type=checkbox] {
  transform: scale(1.4) translateY(.1em);
  margin-right: .2em;
}
@media screen and (width <= 735px){
  #lifepath table,
  #lifepath tbody,
  #lifepath th,
  #lifepath td {
    display: block;
    width: auto !important;
  }
  #lifepath tbody {
    padding: .5em 0;
    border-top-width: 1px;
    border-top-style: solid;
  }
  #lifepath tr {
    display: grid;
  }
  #lifepath tr,
  #lifepath th,
  #lifepath td {
    border-style: none !important;
  }
  #lifepath th {
    padding-top: .3em;
  }
  #lifepath tbody:nth-child(n+1):nth-child(-n+3) tr {
    grid-template-columns: 6em 8em 1fr;
  }
  #lifepath tbody:nth-child(n+1):nth-child(-n+3) tr .left {
    grid-column: span 3;
  }
  #lifepath tbody:nth-child(n+4):nth-child(-n+5) tr {
    grid-template-columns: 6em 1fr 6em 1fr;
  }
  #lifepath tbody:nth-child(n+4):nth-child(-n+5) tr .left {
    grid-column: span 4;
  }
  #lifepath tbody:nth-child(n+6):nth-child(-n+7) tr {
    grid-template-columns: 6em 1fr 6em 1fr;
  }
  #lifepath tbody:nth-child(n+6):nth-child(-n+7) tr .left {
    grid-column: span 4;
  }
  #lifepath tbody:nth-child(5) tr:nth-child(2) th:nth-child(2) {
    display: none;
  }
}

#status > summary #exp-skill.minus {
  color: #e70;
}
#status dl#status-table > *:nth-of-type(even),
#status dl#skill-table > *:nth-of-type(even) {
  background-color: var(--box-even-rows-bg-color);
}
#status dl#status-table {
  display: grid;
  grid-template-columns: 1fr .7fr 1fr .7fr 1fr .7fr 1fr .7fr;

  > dt {
    display: grid;
    place-items: center;
  }
  > dd {
    font-size: 1.3em;
    border-width: 1px 1px 0;
    border-style: solid;
    &:last-child { border-right: hidden; }
  }
}
#status dl#skill-table {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  > dt {
    display: none;
  }
  > dd:not(:last-child) {
    border-right-width: 1px;
    border-right-style: solid;
  }
  > dd > dl {
    display: grid;
    grid-template-columns: 1fr max-content;
  }
  > dd > dl > * {
    border-top-width: 1px;
    border-top-style: solid;
  }
  > dd > dl > dt.left {
    display: grid;
    place-items: center start;
    padding-left: .5em;
    font-weight: normal;
  }
  > dd > dl > dt input {
    font-weight: normal;
  }
  > dd > dl > dd input {
    min-width: 0;
    width: 3.4em;
  }
  > dd > dl > dd input:last-of-type {
    width: 3em;
    margin: 0 -.13em;
    transform: scale(0.9);
  }
}
@media screen and (width <= 735px){
  #status dl#status-table > *:nth-of-type(even) {
    background: none;
  }
  #status dl#skill-table {
    display: block;
    > dt {
      display: block;
      border-top-width: 1px;
      border-top-style: solid;
    }
    > dd dt {
      font-size: inherit;
    }
  }
}

#lois table {
  > colgroup {
    .relation{ width: 6.2em; } /* 関係 */
    .name    { width:  12em; } /* 名前 */
    .emo     { width:   6em; } /* 感情 */
    .slash   { width: 1.2em; }
    .color   { width:   3em; } /* 属性 */
    .note    { width:  auto; } /* 備考 */
    .sperior { width: 1.4em; } /* 状態 */
    .state   { width:   3em; } /* 状態 */
  }
  > thead th.right.small {
    padding-right: 0;
  }
}
#lois table tbody tr:nth-child(4){
  border-top-width: 2px;
}
#lois table tbody td.relation {
  white-space: nowrap;
  .handle {
    display: inline-block;
    width: 1.4em;
    text-align: center;
  }
  .handle + input {
    width: calc(100% - 1.4em - .2rem);
  }
}
#lois table tbody td.emo {
  padding-left: .25em;
  white-space: nowrap;
  &::before { display: none; }
  > input[type=checkbox] {
    margin: 0;
    transform: scale(1.5) translateY(.1em);
  }
  > input[type=checkbox] + input {
    width: calc(100% - 1.4em);
    margin-left: .3em;
  }
}
#lois table tbody td span[data-state] {
  cursor: pointer;
  user-select: none;
}
#lois .lois-reset-buttons {
  position: absolute;
  top: -1px;
  right: -1px;
}
#lois .lois-reset-buttons button {
  padding-bottom: 4px;
}
#memory table {
  table-layout: auto;
}
#memory table tbody td {
  &:nth-child(1) { width: 1.5em; border-right-width: 1px; } /* ✔ */
  &:nth-child(2) { width: 6.2em; border-right-width: 1px; } /* 関係 */
  &:nth-child(3) { width: 14em; border-right-width: 1px; } /* 名前 */
  &:nth-child(4) { width: 4em; border-right-width: 1px; } /* 感情 */
}
#memory table thead tr th:first-child {
  padding-left: 0;
  text-align: center;
}
#memory table tbody tr td:first-child {
  padding-right: .2rem;
  white-space: nowrap;
}
#memory table input[type=checkbox] {
  transform: scale(1.5) translateY(.1em);
}
#memory table tbody tr td span.handle {
  display: inline-block;
  width: 1.4em;
  margin: -.1rem 0;
  text-align: center;
}
@media screen and (width <= 735px){
  #lois summary + div { overflow-x: auto; }
  #lois table {
    table-layout: fixed;
    margin-top: .5em;
    white-space: nowrap;
    > colgroup {
      .relation{ width:   7em; } /* 関係 */
      .name    { width:  10em; } /* 名前 */
      .emo     { width:   6em; } /* 感情 */
      .slash   { width: 1.2em; }
      .color   { width: 3.2em; } /* 属性 */
      .note    { width:  14em; } /* 備考 */
      .sperior { width: 1.4em; } /* 状態 */
      .state   { width:   3em; } /* 状態 */
    }
    > tbody td span[data-state] { padding: .5em 0; }
  }

  #memory summary + div { overflow-x: auto; }
  #memory table  {
    table-layout: fixed;
    margin-top: .5em;
    white-space: nowrap;
    > thead th {
      &:nth-child(1) { width: 1.5em; }
      &:nth-child(2) { width:   7em; }
      &:nth-child(3) { width:  12em; }
      &:nth-child(4) { width:   6em; }
      &:nth-child(5) { width:  14em; }
    }
  }
}

#effect {
  margin-top: var(--box-v-gap);
}
#effect table {
  table-layout: auto;
  > thead th { 
    &:nth-child(1) { width: 1.4em; }
    &:nth-child(2) { width:  auto; } /* 名称 */
    &:nth-child(3) { width:   2em; } /* LV */
    &:nth-child(4) { width: 8.9em; } /* タイミング */
    &:nth-child(5) { width: 8.9em; } /* 技能 */
    &:nth-child(6) { width: 5.9em; } /* 難易度 */
    &:nth-child(7) { width: 6.3em; } /* 対象 */
    &:nth-child(8) { width: 5.3em; } /* 射程 */
    &:nth-child(9) { width: 3.9em; } /* 侵蝕値 */
    &:nth-child(10){ width: 5.4em; } /* 制限 */
  }
}
#effect table tbody td {
  padding: 5px 0 0;
  vertical-align: bottom;
}
#effect table tbody td[rowspan] {
  vertical-align: middle;
}
#effect table tbody td[colspan] {
  padding: 0 0 5px;
  vertical-align: middle;
  text-align: right;
  & div {
    display: grid;
    grid-gap: .1rem;
    grid-template-columns: 2.3em 6.5em 3.8em 3em 2.3em 1fr;
    align-items: end;
  }
  & b {
    display: block;
    font-size: 85%;
    text-align: right;
  }
  & .small {
    font-size: 80%;
    transform: scale(0.8,1);
    white-space: nowrap;
  }
  & b::after {
    content: ":";
    font-size: 1rem;
  }
}
@media screen and (width > 735px){
  #effect table tbody td:nth-child(n+4) input {
    font-size: 12.5px;
  }
}
@media screen and (width <= 735px){
  #effect summary + div { overflow-x: auto; }
  #effect table {
    table-layout: fixed;
  }
  #effect table thead tr,
  #effect table tbody tr {
    display: table-row;
  }
  #effect table tbody td[rowspan],
  #effect table thead th:nth-child(2) {
    display: table-cell;
  }
  #effect table tbody td[colspan] div {
    grid-template-columns: max-content 6.5em max-content 3em max-content 1fr;
  }
  #effect table thead th {
    &:nth-child(1) { width: 1.4em; }
    &:nth-child(2) { width:  14em; } /* 名称 */
    &:nth-child(3) { width: 3.5em; } /* LV */
    &:nth-child(4) { width:   8em; } /* タイミング */
    &:nth-child(5) { width:   8em; } /* 技能 */
    &:nth-child(6) { width:   5em; } /* 難易度 */
    &:nth-child(7) { width:   6em; } /* 対象 */
    &:nth-child(8) { width:   5em; } /* 射程 */
    &:nth-child(9) { width:   4em; } /* 侵蝕値 */
    &:nth-child(10){ width:   5em; } /* 制限 */
  }
  #effect table tbody td {
    border-left: hidden;
    padding: .5em 0 0;
    &[colspan] {
      padding: 0 0 .5em;
    }
  }
  #effect table tbody td b {
    white-space: nowrap;
  }
  #effect table tbody td:nth-child(3) input { min-width: 2em; } /* LV */
}

#magic {
  margin-top: var(--box-v-gap);
}
#magic table thead th {
  &:nth-child(1) { width: 1.4em; }
  &:nth-child(2) { width:  15em; } /* 名称 */
  &:nth-child(3) { width:   7em; } /* 種別 */
  &:nth-child(4) { width: 3.8em; } /* 経験点 */
  &:nth-child(5) { width: 5.5em; } /* 発動値 */
  &:nth-child(6) { width: 3.9em; } /* 侵蝕値 */
}
#magic table thead th,
#magic table tfoot th {
  font-size: 90%;
}
#magic table tbody td {
  padding: .5rem 0;
}
@media screen and (width <= 735px){
  #magic summary + div { overflow-x: auto; }
  #magic table {
    table-layout: fixed;
  }
  #magic table thead tr,
  #magic table tbody tr {
    display: table-row;
  }
  #magic table tbody td[rowspan] {
    display: table-cell;
  }
  #magic table thead th:nth-child(2) {
    display: table-cell;
  }
  #magic table tbody td[colspan] div {
    grid-template-columns: max-content 6.5em max-content 3em max-content 1fr;
  }
  #magic table thead th {
    &:nth-child(1) { width: 1.4em; }
    &:nth-child(2) { width:  15em; } /* 名称 */
    &:nth-child(3) { width:   7em; } /* 種別 */
    &:nth-child(4) { width: 3.8em; } /* 経験点 */
    &:nth-child(5) { width: 5.5em; } /* 発動値 */
    &:nth-child(6) { width: 3.9em; } /* 侵蝕値 */
    &:nth-child(7) { width: 3.9em; } /* 侵蝕値 */
    &:last-child   { width:  16em; } /* 効果 */
  }
}

#combo {
  margin-top: var(--box-v-gap);
}
#combo .combo-table {
  display: grid;
  grid-template-columns: 1.5em 1.5fr 0.8fr 2.2fr;
  grid-template-areas:
    "HNDL NAME COMB COMB"
    "HNDL   IN   IN  OUT"
    "HNDL NOTE NOTE  OUT"
    "HNDL NOTE NOTE OTHR"
  ;
}
#combo .combo-table .handle {
  grid-area: HNDL;
  display: grid;
  place-items: center;
}
#combo .combo-table .combo-other {
  grid-area: OTHR;
  display: flex;
  justify-content: space-between;
  padding: 0 1px 2px .4rem;
  
  > .button {
    font-size: 88%;
    padding: 3px 4px 1px;
    font-family: var(--font-proportional);
  }
}
#combo .combo-table .combo-combo,
#combo .combo-table .combo-in,
#combo .combo-table .combo-out,
#combo .combo-table .combo-note,
#combo .combo-table dl dt,
#combo .combo-table dl dd {
  padding: 0;
  border-width: 0 !important;
}
#combo .combo-table .combo-in,
#combo .combo-table .combo-out {
  margin-top: .5rem;
}
#combo .combo-table textarea,
#combo .combo-table dl dd input,
#combo .combo-table dl dd select {
  width: calc(100% - 1px);
  margin: 0 1px 1px 0;
}
#combo .combo-table .combo-in {
  flex-wrap: wrap;
}
#combo .combo-table .combo-in dl {
  flex-grow: 1 !important;
  &:nth-child(1) { flex-basis: 30%; }
  &:nth-child(2) { flex-basis: 35%; }
  &:nth-child(3) { flex-basis: 35%; }
  &:nth-child(4) { flex-basis: 26%; }
  &:nth-child(5) { flex-basis: 30%; }
  &:nth-child(6) { flex-basis: 26%; }
  &:nth-child(7) { flex-basis: 16%; }
}

#combo .combo-table .combo-out {
  padding-left: .5rem;
  display: grid;
  grid-template-columns: 1.2fr max-content 1fr 0.8fr max-content 1fr 1fr;
  grid-template-rows: max-content auto;
  & .combo-cond     { grid-column: 1; }
  & [id*="Stt"]     { grid-column: 2; }
  & .combo-dice     { grid-column: 3; }
  & .combo-crit     { grid-column: 4; }
  & [id*="SkillLv"] { grid-column: 5; }
  & .combo-fixed    { grid-column: 6; }
  & .combo-atk      { grid-column: 7; }
  
  & dt.combo-dice   { grid-column: 2 / span 2; }
  & dt.combo-fixed  { grid-column: 5 / span 2; }

  > dt {
    align-self: center;
  }
  > dt.combo-fixed {
    line-height: 1;
  }
  > dt.combo-cond .combo-condition-utility {
    width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border: 1px dashed transparent;
    font-size: 75%;
    margin-left: 0.25em;
    overflow: visible;
    position: relative;
    top: 1px;
    &::before {
      font-family: "Material Symbols Outlined";
      font-variation-settings: 'FILL' 1;
      content: '\e5d4';
    }
    &:hover {
      background-color: rgba(240, 248, 255, 0.25);
      border-color: rgba(128, 128, 128, 0.25);
      border-radius: calc((1.5rem - 2px) / 2);
    }
  }
  & dd[id*="Stt"]:not(:empty),
  & dd[id*="SkillLv"]:not(:empty) {
    grid-template-columns: max-content max-content;
    padding-left: .1em;
    text-align: right;
    font-size: .9em;
    font-family: var(--base-font-family-input);
    white-space: nowrap;
  }
  & dd[id*="Stt"]:not(:empty)::after,
  & dd[id*="SkillLv"]:not(:empty)::after {
    content: '+';
    display: inline;
    margin-right: -.1rem;
  }
}
#combo .combo-table .combo-out dd:nth-of-type(n+29) { /* 条件の５行目（デフォルトでは非表示） */
  display: none;
}
#combo.original-renegade-mode .combo-table .combo-out dd:nth-of-type(n+29) { /* 条件の５行目（起源種のみ表示） */
  display: grid;
}
#combo .combo-table .combo-note {
  padding-top: .5rem;
}
#combo .annotate {
  padding-top: .2em;
}
@media screen and (width <= 735px){
  #combo .combo-table {
    padding: .5em 0;
    grid-template-columns: 1.5em 11fr;
    grid-template-areas:
      "HNDL NAME"
      "COMB COMB"
      "  IN   IN"
      " OUT  OUT"
      "NOTE NOTE"
      "OTHR OTHR"
    ;
  }
  #combo .combo-table .combo-name {
    text-align: left;
  }
  #combo .combo-table .combo-combo {
    display: block;
  }
  #combo .combo-table .combo-out .combo-cond .combo-condition-utility::before {
    transform: scale(1.3);
  }
}

.combo-condition-utility-menu {
  display: block;
  position: absolute;
  width: auto;
  height: auto;
  background-color: var(--bg-color);
  border: 1px solid var(--text-color);
  font-size: 80%;
  padding: 1.0rem;
  border-radius: 1.2rem;
  opacity: 0.98;
  @media screen and (width <= 735px) {
    font-size: 120%;
  }
  .item {
    display: flex;
    border-bottom: 1px dotted rgba(128, 128, 128, 0.5);
    justify-content: flex-start;
    align-items: center;
    padding: 0.25em;
    &:last-child {
      border-bottom: none;
    }
    &:hover {
      background-color: rgba(30, 144, 255, 0.2);
      cursor: pointer;
    }
    &::before {
      content: "▸";
    }
  }
}

#items {
  margin-top: var(--box-v-gap);
}
#items table {
  > thead th {
    &:nth-child(1) { width:  11em !important; } /* 名称 */
    &:nth-child(2) { width: 3.4em !important; } /* 常備化 */
    &:nth-child(3) { width: 3.4em !important; } /* 経験点 */
    &:nth-child(4) { width:   7em !important; } /* 種別 */
    &:nth-child(5) { width:   7em !important; } /* 技能 */
    &:nth-child(6) { width: 3.9em !important; } /* 命中  ／ドッジ */
    &:nth-child(7) { width: 5.2em !important; } /* 攻撃力／行動 */
    &:nth-child(8) { width: 3.9em !important; } /* ガード／装甲値 */
    &:nth-child(9) { width: 3.9em !important; } /* 射程 */
    &:last-child   { width: auto !important;  } /* 解説 */
  }
  > tbody td {
    vertical-align: top;
    padding: .4rem 0 0;
  }
  #item-total-stock,
  #item-max-stock { text-wrap: nowrap; }
  
}
@media screen and (width <= 735px){
  #items .box { overflow-x: auto; }
  #items table  {
    table-layout: fixed;
    > thead th {
      &:nth-child(1) { width:  11em !important; } /* 名称 */
      &:nth-child(2) { width:   4em !important; } /* 常備化 */
      &:nth-child(3) { width:   4em !important; } /* 経験点 */
      &:nth-child(4) { width:   8em !important; } /* 種別 */
      &:nth-child(5) { width:   8em !important; } /* 技能 */
      &:nth-child(6) { width: 4.5em !important; } /* 命中  ／ドッジ */
      &:nth-child(7) { width:   6em !important; } /* 攻撃力／行動 */
      &:nth-child(8) { width: 4.5em !important; } /* ガード／装甲値 */
      &:nth-child(9) { width: 4.5em !important; } /* 射程 */
      &:last-child   { width:  16em !important; } /* 解説 */
    }
    > tbody td { width: auto !important; }
  }
}

#history table colgroup {
  :first-child{ width: 1.4em; }
  .date       { width:   6em; }
  .title      { width:  12em; }
  .exp        { width:   6em; }
  .apply      { width: 3.5em; }
  .gm         { width:   6em; }
  .member     { width:  auto; }
}
@media screen and (width <= 735px){
  #history table {
    table-layout: fixed;
    > colgroup {
      .title  { width: 12em; }
      .member { width: 16em; }
    }
  }
}
#history table thead {
  & td.apply {
    border-left: 0px hidden;
    font-size: 83%;
  }
  & td.apply input {
    transform: none;
    vertical-align: text-top;
  }
}
#history table tbody {
  & td.exp input {
    width: 100%;
    border-radius: 5px 0 0 5px;
  }
  & td.apply {
    position: relative;
    & label {
      position: absolute;
      top: .5rem;
      left: 0;
      right: .2rem;
      bottom: .2rem;
      display: block;
      margin: 0;
      border: 1px solid var(--box-input-border-color);
      border-radius: 0 5px 5px 0;
      border-left: 0;
      > input {
        padding: 0;
        vertical-align: text-top;
        transform: none;
      }
      > b {
        font-size: 90%;
      }
      > input:not(:checked) + b {
        opacity: 0.5;
        font-weight: normal;
      }
      &:hover {
        background-color: var(--bg-color);
        > input:not(:checked) + b {
          opacity: 1;
        }
      }
    }
  }
}



#exp-footer {
  position: sticky;
  bottom: 0;
  margin-top: 1em;
  padding: .2rem 0 .5rem;
  border-radius: 0;
  border-width: .2rem 0;
  background: var(--bg-color);
  font-size: 85%;
  font-weight: bold;
  
  .minus {
    color: #e70;
  }
}