@charset "utf-8";

/* // キャラクター
---------------------------------------------------------------------------------------------------- */
#regulation > dl:first-of-type {
  grid-template-columns: 1fr 1fr 4fr;
}
@media screen and (width <= 735px){
  #regulation > dl {
    grid-template-columns: 1fr 1fr 1fr;
  }
  #regulation > dl > dt:last-of-type {
    grid-column: 1 / span 3;
    grid-row: 3;
  }
  #regulation > dl > dd:last-of-type {
    grid-column: 1 / span 3;
    grid-row: 4;
  }
}
dd.area-tags {
  text-align: left;
  padding-right: .3em;
}
.box .tagify-custom {
  --tags-border-color      : var(--box-input-border-color);
  --tags-focus-border-color: var(--text-color);
  --tag-bg   : var(--box-head-bg-color-pale);
  --tag-hover: var(--box-base-bg-color);
  --tag-text-color: var(--text-color);
  --tag-remove-btn-color: var(--text-color);
  --tag-text-color--edit: var(--text-color);
  background-color: var(--input-bg-color);
  border-radius: 5px;
}
.tags-look .tagify__dropdown__wrapper {
  background-color: var(--bg-color);
  border-color: var(--box-input-border-color);
  border-radius: 5px;
  padding: .5em
}
.tags-look .tagify__dropdown__item{
  display: inline-block;
  border-radius: 3px;
  padding: .3em .5em;
  border: 1px solid var(--box-input-border-color);
  background: #F3F3F3;
  color: black;
  margin: .2em;
  font-size: .85em;
  transition: 0s;
}

#area-status {
  min-height: 0;
  grid-template-columns: 2.7fr .5fr 1.8fr;
  grid-template-areas:
    "PER  --- IMG"
    "LPT  LPT IMG"
    "CLS  CLS IMG"
    "STT  STT STT"
  ;
  @media screen and (width <= 735px){
    grid-template-columns: 2fr 1fr;
    grid-gap: var(--box-v-gap) var(--box-h-gap);

    grid-template-areas:
      "IMG  IMG "
      "PER  PER "
      "CLS  CLS "
      "LPT  LPT "
      "STT  STT "
    ;
  }
}

.select-or-input.free select {
  margin-bottom: 0 !important;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.select-or-input.free input  {
  margin-top: 0 !important;
  border-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.select-or-input:not(.free) input { display: none; }

#personal {
  grid-area: PER;
  display: grid;
  grid-template-columns: 1.5fr 2fr;
  gap: 10px;
}
#personal > .box-union {
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-self: end;
}

#lifepath #home {
  grid-template-columns: 1fr 12em;
}
#lifepath tbody th {
  width: 3em;
  text-align: center;
}
#lifepath td:nth-child(2) {
  width: 6em;
}
#lifepath tr:last-child td {
  border-bottom: hidden;
}
#lifepath-earthian {
  border-top-width: 1px;
  border-top-style: dotted;
  padding: .2em .5em;
}

#classes {
  grid-template-columns: 1fr 1fr 1fr;
}
#classes dl:nth-child(n+3) {
  border-left-width: 0;
}
#classes dl:nth-child(n+3):not(:last-child) {
  border-right-width: 1px;
}

#status {
  overflow-x: auto;
  display: grid;
  grid-template-columns: 5.7fr 0.5fr 3.5fr;
}
#status-main {
  grid-column: span 3;
}
#status-sub {
}
#status-weight {
  grid-column: 3;
}
#status table {
  table-layout: fixed;
  
  > colgroup {
    .name   { width: 3em; }
    .text   { width: 4em; }
    .input  { width: 4.5em; }
    .indent1{ width: 1em; }
    .indent2{ width: 2em; }
    .dice   { width: 6em; }
  }
  
  #status-sub td:nth-last-child(3) {
    font-weight: normal;
  }
}

@media screen and (width <= 735px){
  #status {
    grid-template-columns: min-content 1em min-content;
  }
  #status table col.text  { width: 3em; }
  #status table col.total { width: 4em; }
}
#status #make-bonus-total {
  font-style: normal;
}
#status table tbody td:last-child {
  padding-right: 0.2em;
}
#status table tbody td input {
  width: calc(100% - 1em);
}
#status table tbody td.dice input {
  width: calc(100% - 2em);
}
#status table tbody td:not([data-before="="]):not([rowspan]) {
  border-right: hidden;
}
#status table.edit-table tbody td {
  font-size: 1em;
}
#status table tbody td::before {
  content: attr(data-before) !important;
  display: inline-block !important;
  position: static !important;
  border: hidden !important;
  float: left;
  font-size: 90%;
  margin-top: .12em;
}
#status table tbody td::after {
  content: attr(data-after) !important;
  display: inline-block !important;
  position: static !important;
  border: hidden !important;
  float: right;
  font-size: 90%;
  margin-top: .12em;
}
#status table tbody td b {
  display: inline-block;
  transform: scale(1.1);
}
#status-sub {
  border-right-width: 1px;
  border-right-style: solid;
  border-bottom: hidden;
}
#status-weight {
  border-left-width: 1px;
  border-left-style: solid;
}

#levelup {
  margin-top: var(--box-v-gap);
}
#levelup dl {
  display: grid;
  grid-template-columns: max-content 4em;
  align-items: end;
  padding: 0 .2em .2em;
  border-bottom-width: 1px;
  border-bottom-style: solid;
}
#levelup table {
  > thead {
    > th {
      vertical-align: bottom;
    }
    > tr:first-child th:first-child {
      width: 2.5em;
    }
    > tr:last-child th {
      width: 2.2em;
    }
    > tr:first-child th:nth-child(3) {
      width: 9em;
      font-size: 90%;
    }
  }
  > tbody {
    > tr {
      background-color: transparent;
    }
    > tr:nth-last-of-type(even) {
      background-color: var(--box-even-rows-bg-color);
    }
    > td.skill {
      text-align: right;
      position: relative;
    }
    > td.skill input {
      width: calc(100% - 1.5em - 1px);
      border-left: none;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      font-size: inherit;
    }
    > td.skill::before {
      content: attr(data-lv);
      display: grid;
      align-items: center;
      position: absolute;
      left: 0;
      width: 1.5em;
      height: calc(1.2em + 3px * 2);
      line-height: 1.2;
      margin: 1px 0;
      padding: 0;
      border-radius: 5px 0 0 5px;
      border-width: 1px;
      border-style: solid dotted solid solid;
      border-color: var(--box-input-border-color);
      text-align: center;
      background-color: var(--input-bg-color);
    }
    > td.skill[data-lv=""]::before,
    > td.skill:not([data-lv])::before {
      content: 'Lv';
      color: var(--box-input-border-color);
    }
  }
}
@media screen and (width > 735px){
  #levelup .annotate { margin-left: auto; }
}
@media screen and (width <= 735px){
  #levelup summary + div { overflow-x: auto; }
  #levelup table {
    width: 60em;
    > tbody td.skill::before {
      height: calc(1.6em + 2px * 2);
    }
  }
}

#skills {
  margin-top: var(--box-v-gap);
}
#skills 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: 7.4em; } /* 判定 */
    &:nth-child(6) { width: 6.3em; } /* 対象 */
    &:nth-child(7) { width: 5.3em; } /* 射程 */
    &:nth-child(8) { width: 3.9em; } /* コスト */
    &:nth-child(9) { width: 9.4em; } /* 使用条件 */
  }
}
#skills table tbody td {
  padding: 5px 0 0;
  vertical-align: bottom;
}
#skills table tbody td[rowspan] {
  vertical-align: middle;
}
#skills table tbody td[colspan] {
  padding: 0 0 5px;
  vertical-align: middle;
  text-align: right;
  & div {
    display: grid;
    grid-gap: .1rem;
    grid-template-columns: 3.3em 9.5em 2.3em 6.5em 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;
  }
}
#skills table tbody td input[name$='Name'] {
  font-weight: bold;
}
#skills td.calc {
  position: relative;
  &::after {
    content: "\ea5f";
    display: inline-grid;
    place-items: center;
    position: absolute;
    left: 0px;
    top: 4px;
    bottom: 0px;
    font-family: "Material Symbols Outlined";
    font-variation-settings: 'FILL' 1;
    font-size: 150%;
    line-height: 1;
    color: #5ad;
  }
  & input {
    padding-left: calc(1.1em + 4px);
  }
}
#skills table tbody {
  &.race    { background-image: linear-gradient(to right,hsla(120, 70%, 50%,0.2) 1em,transparent 2em) }
  &.style   { background-image: linear-gradient(to right,hsla( 60, 70%, 50%,0.2) 1em,transparent 2em) }
  &.faith   { background-image: linear-gradient(to right,hsla( 80, 70%, 50%,0.2) 1em,transparent 2em) }
  &.general { background-image: linear-gradient(to right,hsla(200,100%, 50%,0.2),transparent) }
  &.geis    { background-image: linear-gradient(to right,hsla(270,100%, 50%,0.2),transparent) }
  &.add     { background-image: linear-gradient(to right,hsla(  0, 20%, 50%,0.1),transparent) }
  &.another { background-image: linear-gradient(to right,hsla(  0,100%, 50%,0.2),transparent) }
  &.power   { background-image: linear-gradient(to right,hsla( 40,100%, 50%,0.2),transparent) }
  .night &.another { background-image: linear-gradient(to right,hsla(  0,100%, 85%,0.2),transparent) }
}

@media screen and (width <= 735px){
  #skills summary + div { overflow-x: auto; overflow-y: hidden;}
  #skills table {
    table-layout: fixed;
  }
  #skills table thead tr,
  #skills table tbody tr {
    display: table-row;
  }
  #skills table tbody td[rowspan] {
    display: table-cell;
  }
  #skills table thead th:nth-child(3) {
    display: table-cell;
  }
  #skills table tbody td[colspan] div {
    grid-template-columns: max-content 7.5em max-content 7.5em max-content 1fr;
  }
  #skills table thead th {
    &:nth-child(1) { width: 1.4em !important; }
    &:nth-child(2) { width:  14em !important; } /* 名称 */
    &:nth-child(3) { width: 3.5em !important; } /* Lv */
    &:nth-child(4) { width:   8em !important; } /* タイミング */
    &:nth-child(5) { width:   8em !important; } /* 判定 */
    &:nth-child(6) { width:   6em !important; } /* 対象 */
    &:nth-child(7) { width:   5em !important; } /* 射程 */
    &:nth-child(8) { width:   4em !important; } /* コスト */
    &:nth-child(9) { width:   8em !important; } /* 制限 */
  }
  #skills table tbody td {
    border-left: hidden;
    padding: .5em 0 0;
    &[colspan] {
      padding: 0 0 .5em;
    }
  }
  #skills table tbody td b {
    white-space: nowrap;
  }
  #skills table tbody td:nth-child(3) input { min-width: 2em; } /* Lv */
}

#battle {
  margin-top: var(--box-v-gap);
}
#battle #armaments tbody th,
#battle #battle-rolls tbody th {
  border-top: unset;
  border-bottom: unset;
}
#battle colgroup {
  .head  { width:   3em; } /* 見出し */
  .name  { width:  11em; } /* 名称 */
  .weight{ width: 3.2em; } /* 重量 */
  .acc   { width: 3.2em; } /* 命中 */
  .atk   { width: 3.2em; } /* 攻撃 */
  .eva   { width: 3.2em; } /* 回避 */
  .def   { width: 3.2em; } /* 物防 */
  .mdef  { width: 3.2em; } /* 魔防 */
  .ini   { width: 3.2em; } /* 行動 */
  .move  { width: 3.2em; } /* 移動 */
  .range { width: 4.7em; } /* 射程 */
  .type  { width: auto; } /* 種別 */
  .usage { width: auto; } /* 部位 */
  .lv    { width: 3.2em; } /* Lv */
}
#battle input[name$="Type"]{ min-width: 4em; }
#battle input[name$="Usage"]{ min-width: 4em; }

#battle #battle-rolls tbody tr td.left {
  vertical-align: top;
}
#battle #battle-rolls tfoot tr td::before {
  left: 0;
}
#battle #battle-rolls tfoot tr:first-child td:not(:nth-child(n+5)):before {
  border-bottom-width: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
#battle-rolls tfoot tr:not(:first-child) td:nth-child(n+2):not(:nth-child(n+5))::before {
  top: 0;
  border-top-width: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
#battle-rolls tfoot tr:not(:last-child) td:nth-child(n+2):not(:nth-child(n+5))::before {
  bottom: 0;
  border-bottom-width: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
#battle-rolls tfoot tr.one-hand td:nth-child(n+2):not(:nth-child(n+4))::before {
  border-top-width: 1px !important;
  border-top-style: dotted;
}
#battle #battle-rolls tfoot tr:last-child td::before {
  left: 0;
  top: 0;
  border-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
#battle #battle-rolls tfoot tr:last-child td {
  padding-top: 0;
  line-height: 1;
}
#battle-rolls tfoot td {
  padding-bottom: .1em;
  > span {
    position: static;
  }
}
#battle-rolls tfoot select[name="handedness"] {
  width: max-content;
}
#battle-rolls tfoot .battle-total-value td {
  > b.hide {
    display: none;
  }
  > b.hide + b {
    border-top-width: 0;
  }
}
#battle-rolls tfoot .battle-total-dice td {
  font-size: .9em;
  > b {
    display: inline;
    font-size: calc(1em / 0.9 * 1.2);
  }
  > b::before {
    display: none;
  }
}
@media screen and (width <= 735px){
  #battle .box { overflow-x: auto; }
  #battle table { table-layout: fixed; }
  #battle colgroup {
    .head  { width: 3.2em; } /* 見出し */
    .name  { width:  11em; } /* 名称 */
    .weight{ width: 3.2em; } /* 重量 */
    .acc   { width: 3.2em; } /* 命中 */
    .atk   { width: 3.2em; } /* 攻撃 */
    .eva   { width: 3.2em; } /* 回避 */
    .def   { width: 3.2em; } /* 物防 */
    .mdef  { width: 3.2em; } /* 魔防 */
    .ini   { width: 3.2em; } /* 行動 */
    .move  { width: 3.2em; } /* 移動 */
    .range { width: 4.7em; } /* 射程 */
    .type  { width: 6.2em; }  /* 種別 */
    .usage { width: 6.2em; }  /* 部位 */
    .note  { width: 17.2em; }  /* 部位 */
  }
  #battle table thead tr,
  #battle table tbody tr,
  #battle table tfoot tr {
    display: table-row;
  }
  #battle table tbody td:last-child {
    border-top: hidden;
  }
}

#other-rolls {
  margin-top: var(--box-v-gap);
}
#other-rolls table {
  border-bottom: hidden;

  & col:first-child { width: 44%; }
  & col:last-child  { width: 5.5em; }

  > tbody td {
    padding-top: 4px;
    padding-bottom: 4px;
  }
  > tbody td.roll > span {
    position: absolute;
    right: 5px;
    bottom: 3px;
    font-size: 80%;
    margin-left :auto;
  }
  > tbody td.roll input {
    width: 4em;
  }
}
@media screen and (width <= 735px){
  #other-rolls {
    display: block;
  }
  #other-rolls table {
    &:first-of-type {
      border-bottom-style: unset;
    }
    &:last-of-type {
      margin-top: 0;
      & thead {
        display: none;
      }
    }
  }
}

#area-items {
  margin-top: var(--box-v-gap);
}
@media screen and (width <= 735px){
  #area-items {
    display: block;
  }
  #area-items > * {
    margin-top: var(--box-v-gap);
  }
}

#connections table col.handle,
#geises      table col.handle {
  width: 1.1em;
}
#geises td {
  vertical-align: top;
}
#geises textarea {
  display: block;
}

@media screen and (width <= 735px){
  #relations {
    display: block;
  }
  #connections,
  #geises { margin-top: var(--box-v-gap); }
  #connections table col.name     { width: 30%; }
  #connections table col.relation { width: 4em; }
  #geises table col.name     { width: 30%; }
  #geises table col.num      { width: 4em; }
}

#weight input {
  width: 4em;
}
#money {
  display: grid;
  grid-template-columns: 1fr max-content;
  > dt {
    grid-column: 1;
    grid-row: 1;
  }
  > dd:has(input[type="checkbox"]){
    padding: 1px 0 0 .5em;
    text-align: left;
    grid-row: 1;
  }
  > dd:has(input[type="text"]){
    grid-column: span 2;
  }
  & input[type="text"] {
    width: calc(100% - 5em);
  }
  & input[readonly] {
    border: hidden;
    margin-bottom: 0;
    padding: 0;
    background: transparent;
    text-align: center;
    color: inherit;
    font-family: inherit;
  }
}
@media screen and (width <= 735px){
  #items-and-money {
    grid-template-columns: 1fr 1fr 2em;
  }
}
#items {
  border-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
#cashbook {
  grid-column: span 3;
  margin-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
#items textarea {
  height: 20em;
}
#cashbook textarea {
  height: 16em;
}
#cashbook-total-value {
  font-size: 120%;
  font-weight: bold;
}
#cashbook p {
  font-size: 90%;
  font-family: inherit;
  white-space: normal;
  text-align: left;
  padding-left: .5em;
}

#history table thead {
  & th:first-child { width: 1.4em; }
  .date       { width:   6em; }
  .title      { width:  12em; }
  .exp        { width:   5em; }
  .pay        { width:   5em; }
  .money      { width:   5em; }
  .gm         { width:   6em; }
  .member     { width:  auto; }
}

@media screen and (width <= 735px){
  #history table  { table-layout: fixed; }
  #history table thead th.title  { width: 12em; }
  #history table thead th.member { width: 16em; }
}

#history table tbody td.money {
  white-space: nowrap;
}
#history table tbody td.money::after {
  margin: 0 2px 0 -3px !important;
  font-size: 1.1rem;
}
#history table tbody td:is(.money,.pay) input {
  width: calc(100% - 0.9em);
}


#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;
}