@charset "utf-8";

@layer system {
/* // Layout
---------------------------------------------------------------------------------------------------- */
.wide {
  @media screen and (width >= 1400px){
    #column-skills {
      grid-column: 2;
    }
    #battle { margin-top: 0; }
  }
}
/* // Font
---------------------------------------------------------------------------------------------------- */
#level dd {
  font-family: 'Verdana';
}

#classes dd,
#specialities td,
#goods td,
#items td,
#battle td,
#other-rolls tbody th small,
#levelup td {
  font-family: var(--font-proportional);
}
#history table {
  font-family: "Arial",var(--base-font-family-pr);
}

/* // AreaTag
---------------------------------------------------------------------------------------------------- */
#tags .stage {
  font-size: 90%;
}

/* // Area-Status
---------------------------------------------------------------------------------------------------- */
#area-status {
  min-height: 56.7rem;
  display: grid;
  grid-gap: var(--box-v-gap) var(--box-h-gap);
  grid-template-columns: 1.6fr 1.4fr 2.14fr;
  grid-template-rows: auto auto auto auto 1fr;
  
  grid-template-areas:
  "LVL  APP IMG"
  "PER  APP IMG"
  "STT  STT IMG"
  "SPC  SPC IMG"
  "GDS  GDS IMG"
  ;
  @media screen and (width <= 767px){
    grid-gap: .5rem;
  }
  @media screen and (width <= 735px){
    display: grid;
    grid-gap: .5rem;
    grid-template-areas:
    "LVL  APP IMG"
    "PER  APP IMG"
    "STT  STT IMG"
    "SPC  SPC SPC"
    "GDS  GDS GDS"
    ;
  }
}
#image       { grid-area: IMG; }
#levels      { grid-area: LVL; }
#personal    { grid-area: PER; }
#appearance  { grid-area: APP; }
#status      { grid-area: STT; }
#specialities{ grid-area: SPC; }
#goods       { grid-area: GDS; }

/* // Area-Status
---------------------------------------------------------------------------------------------------- */
#levels {
  display: grid;
  grid-template-columns: 4fr 4.5em;
  gap: .5rem;
  > dl {
    display: grid;
    grid-template-rows: max-content 1fr;
    align-items: center;
  }
  > dl#level dd {
    font-size: 150%;
    line-height: 1;
    padding-bottom: .2em;
  }
}
#personal {
  > .box-union + .box-union {
    margin-top: 10px;
  }
  > .box + .box {
    border-top-width: 1px;
  }
  > dl#style {
    margin-top: var(--box-v-gap);
  }
  > dl#style dd > span + span::before {
    content: "／";
  }
  @media screen and (width <= 735px){
    > dl#style dd > span {
      display: block;
    }
    > dl#style dd > span + span::before {
      content: "";
    }
  }
}
/* Appearance */
#appearance {
  display: grid;
  grid-template-rows: max-content 1fr;
  > dl {
    display: grid;
    grid-template-columns: 3.5em 1fr;
    > dt {
      text-align: center;
      border-right-width: 1px;
      border-right-style: dotted;
      font-size: 92%;
    }
    > dt,
    > dd {
      border-top-width: 1px;
      border-top-style: solid;
      display: grid;
      align-items: center;
    }
  }
}
/* Status */
#status {
  display: grid;
  grid-template-columns: 7.2fr 2.8fr;
  gap: 5px;
}
#user-status {
  display: grid;
  grid-template-rows: max-content 1fr;
  > dl {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: max-content 1fr;
    > dt {
      grid-row: 1;
      align-self: end;
      padding: .1em 0 .1em .1em;
      font-size: 87%;
      line-height: 1;
    }
    > dd {
      grid-row: 2;
      font-size: 140%;
      font-weight: bold;
      display: grid;
      place-items: center;
      border-top-width: 1px;
      border-top-style: solid;
      &:not(:first-of-type) {
        border-left-width: 1px;
        border-left-style: dotted;
      }
    }
  }
}
#hp-and-stamina {
  > dl {
    > dd {
      position: relative;
    }
    > dd b {
      font-size: 130%;
      line-height: 1;
    }
    > dd small {
      display: inline-block;
      position: absolute;
      right: 5%;
      bottom: .1em;
    }
    > dd small > b {
      font-size: 120%;
      margin: 0 .1em;
    }
  }
  > dl#stamina {
    border-top-width: 1px;
    border-top-style: solid;
  }
}
@media screen and (width <= 735px){
  #status {
    grid-template-columns: 1fr;
  }
  #hp-and-stamina {
    display: grid;
    grid-template-columns: 1fr 1fr;
    
    > dl#stamina  {
      border-top-style: hidden;
      border-left-width: 1px;
      border-left-style: solid;
    }
  }
}

/* // Area-Specialities
---------------------------------------------------------------------------------------------------- */
#specialities {
  height: max-content;
}
#specialities > table {
  margin-top: -1em;
  & thead th {
    &:nth-child(1) { width: 8.5em; }
    &:nth-child(2) { width: auto; padding-left: .2em; }
  }
  & tbody td.note { font-size: 92%; }
}

/* // Area-Goods
---------------------------------------------------------------------------------------------------- */
#goods {
  align-self: start;
}
#goods > table {
  margin-top: -1em;
  & thead th {
    &:nth-child(1) { width: 8.5em; }
    &:nth-child(2) { width: 3.6em; }
    &:nth-child(3) { width: auto; padding-left: .2em; }
  }
  & tbody td {
    &.type { font-size: 87%; }
    &.note { font-size: 92%; }
  }
}


/* // Area-Goods
---------------------------------------------------------------------------------------------------- */
#items {
  margin-top: var(--box-v-gap);
}
#items > table {
  margin-top: -1em;
  & thead th {
    &:nth-child(1) { width: 12em; }
    &:nth-child(2) { width:3.6em; }
    &:nth-child(3) { width:3.2em; }
    &:nth-child(4) { width: auto; padding-left: .2em; }
  }
  & tbody td {
    &.type { font-size: 87%; }
    &.note { font-size: 92%; }
  }
}

/* // Battle
---------------------------------------------------------------------------------------------------- */
#battle {
  margin-top: var(--box-v-gap);
}
#battle table {
  margin-top: -1em;
  & colgroup {
    &     { width: auto; }
    .head { width:4.5em; }
    .name { width: 14em; }
  }
  & th.right {
    padding-right: .2em;
  }
}
#battle .subtotal td,
#battle .total td,
#battle td#battle-level-value {
  position: relative;
  border-left-width: 1px;
  border-left-style: solid;
}
#battle .total td {
  font-weight: bold;
  font-size: 120%;
}
#battle .subtotal td::before,
#battle .total td::before {
  content: '';
  position: absolute;
  inset: 2px 0;
  border-width: 1px 0;
  border-style: solid;
  border-color: var(--box-inside-border-color);
  pointer-events: none;
}
@media screen and (width <= 735px){
  #battle th { font-size: 92%; }
}

/* // Free-Memo
---------------------------------------------------------------------------------------------------- */
#free-note,
#free-history{
  margin-top: var(--box-v-gap);
}


/* // History
---------------------------------------------------------------------------------------------------- */
#history {
  margin-top: var(--box-v-gap);
}
#history table {
  & thead {
    .result { width: 4.6em; } /* 戦果点 */
  }
}


/* ////////// LayerEnd ////////// */
}