@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Rubik+Dirt&display=swap&text=GOBLINSLAYER!');

@layer system {
/* // Body
---------------------------------------------------------------------------------------------------- */
body {
  background-image: url(../../_common/img/back-pattern.png), url(../img/back-sword.png);
  background-blend-mode: normal, normal;
  .night & {
    background-blend-mode: hard-light, normal;
  }
  @media screen and (width <= 735px){
    background-size: auto, 80%;
  }
}
/* // Layout
---------------------------------------------------------------------------------------------------- */
@media screen and (width >= 1400px){
  body {
    grid-template-columns: minmax(0, 1fr) minmax(auto, 1800px) minmax(0, 1fr);
  }
  header nav {
    max-width: 1800px;
  }
  article{
    max-width: 1760px;
    display: grid;
    grid-gap: 0 1.2rem;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    padding: 0 1.2rem;
    position: relative;
  }
  #area-name, #tags {
    grid-column: span 2;
  }
  #column-status {
    grid-column: 1;
    grid-row: 3;
  }
  #area-equipment {
    grid-column: 2;
    grid-row: 3;
    align-self: start;
  }
  #area-skills {
    grid-column: 1;
    grid-row: 4;
    align-self: start;
  }
  #area-arts {
    grid-column: 2;
    grid-row: 4;
    align-self: start;
  }
  #free-note {
    grid-column: 1;
    grid-row: 5;
  }
}

/* // Font
---------------------------------------------------------------------------------------------------- */
#character-name,
.words {
  font-family: var(--base-font-family-min);
}
#character-name rt {
  font-family: Arial,var(--base-font-family-min);
}
#level dd {
  font-family: 'Verdana';
}
#personal dd,
#status dd,
#attack-classes table,
#weapons table,
#dodge-classes table,
#block-classes table,
#armor table,
#shield table,
#area-skills table {
  font-family: var(--font-proportional);
}
#history table {
  font-family: "Arial",var(--base-font-family-pr);
}
#cashbook p {
  font-family: var(--base-font-family-mono);
}

/* // Area-Status
---------------------------------------------------------------------------------------------------- */
#area-status {
  min-height: 56.7rem;
  display: grid;
  grid-gap: var(--box-v-gap) var(--box-h-gap);
  grid-template-columns: 0.9fr 0.7fr 1.3fr 2.115fr;
  grid-template-rows: 1fr max-content max-content;
  
  grid-template-areas:
    "PER PER PER IMG"
    "ABL ABL ABL IMG"
    "STT STT STT IMG"
  ;
  @media screen and (width <= 767px){
    grid-gap: calc(var(--box-v-gap) / 2) calc(var(--box-h-gap) / 2);
    grid-template-columns: 0.7fr 0.7fr 1.5fr 2.1fr;
    grid-template-rows: auto;
  
    grid-template-areas:
      "PER PER PER IMG"
      "ABL ABL ABL IMG"
      "STT STT STT IMG"
    ;
  }
  @media screen and (width <= 735px){
    display: grid;
    grid-template-columns: 0.7fr 0.6fr 1.6fr 2.1fr;
    grid-template-rows: auto;
  
    grid-template-areas:
      "PER PER PER PER"
      "ABL ABL ABL IMG"
      "STT STT STT STT"
    ;
  }
  #image-none,
  #image     { grid-area: IMG; }
  #personal  { grid-area: PER; }
  #ability   { grid-area: ABL; }
  #status    { grid-area: STT; }
}


/* Image */
.image-none::after {
  font-family: 'Rubik Dirt','Impact';
  font-size: 6.2rem;
  font-weight: normal;
  line-height: 1;
  letter-spacing: 0;
  transform: scale(1, 2);
}
@media screen and (width <= 735px){
  .image-none::after {
    font-size: 4.8rem;
  }
}

/* Personal */
#personal {
  display: flex;
  gap: var(--box-v-gap) 0;
  flex-wrap: wrap;
  justify-content: space-between;
}
#personal dl {
  flex-basis: 33%;
  #race   { flex-basis: 51%; order: 1; }
  #age    { flex-basis: 23%; order: 2; }
  #gender { flex-basis: 23%; order: 3; }
  #rank   { flex-basis: 30%; order: 4; }
  #career { flex-basis: 42%; order: 5; }
  #faith  { flex-basis: 25%; order: 6; }
  #trait  { flex-basis:100%; order: 6; }
}

#personal dl:is(#race,#age,#gender) {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr;
  align-items: center;
}
#personal dl:is(#race,#age,#gender) dd {
  line-height: 1;
}
#personal dl#race:not(.has-base-race) dd:has(ruby) {
  margin-top: -8px;
}
#personal dl#race dd .small ruby :is(rt,rp) {
  display: none;
}
#personal dl#race .small {
  display: inline-block;
  margin-left: .5em;
}
#personal dl#race.has-base-race {
  grid-template-columns: max-content 1fr;
  grid-template-rows: 1fr 1fr;
  align-items: stretch;
  > dd {
    display: grid;
    align-items: end;
  }
  > .base-race {
    border-top-width: 1px;
    border-top-style: dotted;
  }
  > dt.base-race {
    font-size: 80%;
    line-height: 1;
    padding-top: 2px;
  }
}

#personal dl#rank {
  display: grid;
  grid-template-columns: max-content 1fr;
  grid-template-rows: 1fr;
  > dd {
    align-self: end;
    margin-left: -1em;
  }
  > dd > span {
    display: block;
  }
}

#personal dl#trait {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: max-content 1fr;
  > dd {
    display: grid;
    grid-template-columns: auto max-content;
  }
  > dd > dl {
    align-self: end;
    display: grid;
    grid-template-columns: 1em max-content;
    margin-top: -1em;
  }
  > dd > dl > dt { grid-column: 1; }
  > dd > dl > dd { grid-column: 2; }
  > dd > dl > dd {
    display: grid;
    grid-template-columns: 1em auto 1em;
  }
  > dd > dl > dd > span {
    display: block;
    min-width: 3em;
    max-width: 10em;
  }
}

/* Status */
#ability {
  height: max-content;
}
#ability table {
  width: 100%;
  table-layout: fixed;
  & col:nth-child(1) { width: 1.5em; }
  & :is(th, td) {
    border-style: solid;
    padding: 0;
  }
  & th.status-head {
    border-bottom: hidden;
    > span {
      display: block;
      margin-bottom: -2em;
      padding: 1em .2em;
      font-size: 120%;
      text-align: left;
    }
  }
  & th.status-second-head {
    padding: .2em;
    border-left-width: 2px;
    border-left-style: solid;
  }
  & th.status-first-head {
    background: transparent !important;
  }
  > tbody {
    & tr:first-child {
      border-bottom-width: 2px;
    }
    & tr:nth-of-type(even) th {
      background-color: var(--box-even-rows-bg-color);
    }
  }
  & td:first-of-type,
  & tbody tr:first-child th:nth-of-type(2) {
    border-left-width: 2px;
  }
}
#ability table dl {
  display: grid;
  grid-template-columns: 4em 1fr;
  grid-template-rows: max-content 1fr;
  > dd {
    padding-top: .2em;
    line-height: 1.8;
    font-size: 140%;
    font-weight: normal;
  }
}
#ability table th dl {
  > dt {
    align-self: start;
    margin-left: .2em;
    text-align: left;
  }
  > dd.mod {
    grid-column: 1;
    grid-row: 2;
    line-height: 1;
    font-size: 90%;
    text-align: right;
  }
  > dd:not(.mod) {
    grid-column: 2;
    grid-row: span 2;
  }
}
#ability table td dl dt {
  align-self: center;
  font-size: 85%;
}
@media screen and (width <= 735px){
  #ability table dl {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
  }
  #ability table dl dt {
    flex-basis: 100%;
  }
}

/* Sub-Status */
#status {
  grid-template-rows: auto;
  white-space:nowrap;
  display: grid;
  grid-template-rows: max-content auto;
}
#status dl {
  border-top-width: 1px;
  border-top-style: solid;
  display: grid;
  grid-template-columns: 10em 4em auto;
  > dt {
    padding-left: .5em;
  }
  > dd.total {
    border-right-width: 1px;
    border-right-style: dotted;
  }
  > dd.total b {
    padding-top: .4em;
    line-height: 1;
    font-size: 1.4em;
    font-weight: normal;
    display: inline-block;
  }
  > dd.calc {
    display: grid;
    grid-template-columns: 3.5em 1fr;
    align-items: end;
    padding-bottom: .2em;
    font-size: 85%;
    line-height: 1;
    text-align: left;
    white-space: wrap;
  }
  > dd.calc > b {
    display: block;
    font-size: 1.3em;
    font-weight: normal;
    text-align: center;
  }
  > dd.calc > div > b {
    font-size: 1.2em;
    font-weight: normal;
  }
  &#lifeforce {
    grid-template-columns: 4em 4em 2em 4em auto;
  }
}
@media screen and (1400px <= width <= 1600px){
  #status .shorten { display: none; }
}

/* // Area-Ability
---------------------------------------------------------------------------------------------------- */
#area-classes {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--box-h-gap);
  
  margin-top: var(--box-v-gap);
  line-height: 1.8;
  
  align-items: start;
}

/* Classes */
#classes {
  position: relative;
  > h2::after {
    content: 'レベル /　　経験点';
    position: absolute;
    top: .2em;
    right: 2em;
    font-size: 85%;
  }
  > dl {
    display: grid;
    grid-template-columns: 1fr 3em 5.5em;
    grid-template-rows: auto;
    align-items: end;
  }
  > dl dt {
    grid-column: 1;
    font-weight: normal;
    padding-top: .7em;
    > ruby {
      display: inline-grid;
      text-align: left;
      vertical-align: bottom;
      > rt {
        display: inline-flex;
        grid-row: 1;
        height: 0px;
        line-height: 1;
        transform: translate(-2px,-1.2em);
        user-select: none;
      }
    }
  }
  > dl dd.lv {
    grid-column: 2;
    padding-right: 1em;
    font-size: 1.2em;
    line-height: 1;
    position: relative;
  }
  > dl dd.exp {
    grid-column: 3;
    font-size: 1em;
    line-height: 1.1;
    text-align: right;
  }
  > dl dd.lv::after {
    content: "/";
    position: absolute;
    right: 0;
  }
  .priest-faith {
    display: inline-block;
    font-size: 85%;
    line-height: 1;
  }
  #priest-faith.narrow {
    margin: 0 -10%;
    transform: scaleX(0.8);
  }
}
@media screen and (width <= 735px){
  #area-classes {
    grid-template-columns: 1.1fr 1.9fr;
  }
  #classes h2::after {
    content: 'レベル / 経験点';
    right: 1em;
  }
  #classes dl {
    display: grid;
    grid-template-columns: 1fr 2em 3.5em;
    grid-template-rows: auto;
    align-items: end;
    > dd.exp {
      font-size: .85em;
    }
  }
}
/* Level and Points */
#level-and-points {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--box-v-gap) var(--box-h-gap);
  grid-template-areas:
    "LVL EXP ADP"
    "SSN EXP ADP"
  ;
}

#level     { grid-area: LVL; }
#exp       { grid-area: EXP; }
#adp       { grid-area: ADP; }
#session-total { grid-area: SSN; }
@media screen and (width <= 735px){
  #level-and-points {
    display: grid;
    grid-template-columns: 1.1fr 1.1fr 0.8fr;
  }
}

/* Level */
#level {
  display: flex;
  justify-content: space-between;
}
#level dd {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px 0 2px;
  font-size: 170%;
  line-height: 1;
}
@media screen and (width <= 735px){
  #level dt > span {
    display: inline-block;
    margin-left : -5%;
    margin-right: -5%;
    transform: scaleX(0.9);
  }
  #level dt > span::after {
    content:'Lv'
  }
  #level dt span.shorten {
    display: none;
  }
}

/* EXP */
#exp,#adp {
  display: grid;
}
:is(#exp,#adp) dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  align-items: end;
  margin: 0 5px;
  line-height: 1;
  white-space: nowrap;
}
:is(#exp,#adp) dl > *:not(:last-of-type) {
  border-width: 0 0 .1rem;
  border-style: solid;
}
:is(#exp,#adp) dl dt {
  grid-column: 1;
  font-size: 80%;
  padding: 0 0 .3rem;
}
:is(#exp,#adp) dl dd {
  grid-column: 2;
  text-align: right;
  font-size: 120%;
  padding: .3rem 0 .1rem;
  font-family: var(--font-proportional);
}
/* // Area-Equipment
---------------------------------------------------------------------------------------------------- */
#area-equipment {
}
#area-equipment > .box {
  margin-top: var(--box-v-gap);
}

#area-equipment table.data-table tbody th {
  border-style: none solid hidden;
  background-color: transparent;
}
#area-equipment table.data-table tbody:first-of-type tr:first-of-type th {
  border-top: hidden;
}
#area-equipment table td:not(.name, .note) b {
  font-size: 1.15em;
  word-break: normal;
}

#area-equipment thead th .small {
  display: block;
  margin-bottom: -.15em;
}

#area-equipment .item-name {
  display: block;
  margin: 0 -6%;
  transform:scaleX(0.88);
}

#area-equipment tbody td:is(.type, .usage) {
  font-size: 85%;
  line-height: 1.1;
}
#area-equipment tbody td:is(.type, .usage) > span {
  white-space: nowrap;
}
#area-equipment tbody td.note { font-size: .9em; }

@media screen and (width >= 1400px){
  #area-equipment > .box:first-child {
    margin-top: 0;
  }
}

/* Attack */
#attack-classes {
  width: calc(25% + 19em + 1px);
}
#attack-classes table {
  margin-top: -1.2em;
  table-layout: fixed;
  > colgroup {
    > col:first-child { width: 3.8em; }
    > col.name  { width:  auto; }
    > col.level { width: 5.5em; }
    > col.value { width: 3.5em; }
  }
}

#attack-classes + #weapons {
  margin-top: .3rem;
}

#weapons thead {
  .name  { width:   25%; } /* 名前 */
  .type  { width:   4em; } /* 種別 */
  .usage { width: 3.4em; } /* 用法 */
  .attr  { width: 4.5em; } /* 属性 */
  .hit   { width: 4.5em; } /* 命中 */
  .power { width:   5em; } /* 威力 */
  .range { width: 3.5em; } /* 射程 */
  .note  { width: auto; }  /* 備考 */
}

/* Dodge */
#dodge-classes {
  width: calc(25% + 21em + 1px);
}
#block-classes {
  width: calc(25% + 10em + 1px);
}
.defense-classes table {
  margin-top: -1.5em;
  table-layout: fixed;
  > thead {
    & th:nth-child(1) { width: 3.8em; } /* 見出し */
    & th:nth-child(2) { width:  auto; } /* 名前 */
    & th:nth-child(3) { width:   4em; } /* 回避 */
    & th:nth-child(4) { width: 3.5em; } /* 装甲 */
    & th:nth-child(5) { width: 3.5em; } /* 隠密 */
    & th:nth-child(6) { width:   4em; } /* 移動 */
  }
  > tbody th.small {
    padding-top: 1px;
    line-height: 1.1;
  }
}
.defense-classes + :is(#armor, #shield) {
  margin-top: .3rem;
}

#armor thead {
  .name   { width:   25%; } /* 名前 */
  .type   { width:   6em; } /* 種別 */
  .dodge  { width:   4em; } /* 回避 */
  .armor  { width: 3.5em; } /* 装甲 */
  .stealth{ width: 3.5em; } /* 隠密 */
  .move   { width:   4em; } /* 移動 */
  .note   { width:  auto; } /* 備考 */
}
#shield thead {
  .name   { width:   25%; } /* 名前 */
  .type   { width:   6em; } /* 種別 */
  .block  { width:   4em; } /* 基準値 */
  .armor  { width:   4em; } /* 装甲 */
  .stealth{ width: 3.5em; } /* 隠密 */
  .note   { width:  auto; } /* 備考 */
}


/* // Area-Items
---------------------------------------------------------------------------------------------------- */
#area-items {
  display: grid;
  grid-template-columns: 1fr 12em;
  gap: var(--box-v-gap);
  margin-top: var(--box-v-gap);
  align-items: start;
  line-height: 1.8;
}
@media print {
  #area-items {
    grid-template-columns: auto;
    grid-template-rows: auto auto;

    #items, #money {
      grid-column: 1 / -1;
    }

    #items {
      grid-row: 2 / 3;
    }

    #money {
      grid-row: 1 / 2;
      width: fit-content;
    }
  }
}

/* Money */
#money {
  @media print {
    display: grid;
    grid-template-columns: 1fr 1fr;

    > dl:first-child {
      border-right-width: 1px;
      border-right-style: dotted;
    }
    > dl > dd {
      padding: 0 1em;
    }
  }
}

#money dd > dl {
  display: grid;
  grid-template-columns: 4em 1fr;

  & dt {
    grid-column: 1;
    grid-row: auto;
    text-align: right;
  }
  & dd {
    grid-column: 2;
    grid-row: auto;
  }
}

/* // Area-Skills
---------------------------------------------------------------------------------------------------- */
#area-skills tbody td.note {
  font-size: 90%;
}
#area-skills tbody td.page {
  font-size: 90%;
}
/* // Skills
---------------------------------------------------------------------------------------------------- */
:is(#skills, #general-skills) {
  margin-top: var(--box-v-gap);
  & thead {
    white-space: nowrap;
    .adp    { width:   3em; } /* 成長点 */
    .auto   { width: 2.5em; } /* 種別 */
    .name   { width:  12em; } /* 名前 */
    .grade  { width:   4em; } /* 段階 */
    .note   { width:  auto; } /* 効果 */
    .page   { width:   5em; } /* 参照 */
  }
}


/* // Spells
---------------------------------------------------------------------------------------------------- */
#spell-cast {
  width: max-content;
  margin-top: var(--box-v-gap);
}
#spell-cast table {
  table-layout: auto;
  border-top-width: 1px;
  border-top-style: solid;
  > colgroup {
    .base  { width: 6em; }
    .value { width: 3em; }
    .class { width: 6.5em; }
    .level { width: 5em; }
    .total { width: 4.5em; }
  }
  > tbody {
    & .base,
    & .value,
    & .value + td,
    & .class {
      border-right-style: hidden;
    }
    & .base {
      padding-left: 1em;
    }
    & .class::before {
      content: "+";
      float: left;
      font-weight: normal;
    }
    & .level {
      padding-right: .5em;
      text-align: right;
    }
    & .level::after {
      content: 'レベル';
      font-size: 85%;
      margin-left: .2em;
    }
    & .total {
      font-size: 110%;
      line-height: 1;
    }
  }
}

#spell-cast + #spells {
  margin-top: .3rem;
}
#spells {
  margin-top: var(--box-v-gap);
}
#spells thead {
  white-space: nowrap;
  .name   { width:  12em; } /* 名前 */
  .system { width: 4.5em; } /* 系統 */
  .type   { width: 6.1em; } /* 種別 */
  .dfclt  { width: 3.1em; } /* 難易度 */
  .note   { width:  auto; } /* 効果 */
  .page   { width:   5em; } /* 参照 */
}

/* // Arts
---------------------------------------------------------------------------------------------------- */
#arts {
  margin-top: var(--box-v-gap);
}
#arts thead {
  white-space: nowrap;
  .name   { width:  12em; } /* 名前 */
  .weapon { width:  10em; } /* 武器 */
  .skill  { width: 8.1em; } /* 技能 */
  .cost   { width: 8.1em; } /* 消費 */
  .terms  { width:  auto; } /* 条件 */
  .page   { width:   5em; } /* 参照 */
}

@media screen and (width <= 735px){
  #arts thead {
    .name   { width:   9em; } /* 名前 */
    .weapon { width:   5em; } /* 武器 */
    .skill  { width:   6em; } /* 技能 */
    .cost   { width: 7.5em; font-size: 85%; } /* 消費 */
    .terms  { width:  auto; } /* 条件 */
    .page   { width:   3em; } /* 参照 */
  }
  #arts tbody {
    &:not(.name) { font-size: 85%; }
    &.page   { font-size: 80%; } /* 参照 */
  }
}
/* // Free-Memo
---------------------------------------------------------------------------------------------------- */
#free-note,
#free-history{
  margin-top: var(--box-v-gap);
}


/* // History
---------------------------------------------------------------------------------------------------- */
#history {
  margin-top: var(--box-v-gap);
}
#history table {
  & thead {
    .comp   { width: 2.6em; } /* 達成 */
    .exp    { width: 4.6em; } /* 経験点 */
    .money  { width: 4.5em; } /* 銀貨 */
    .adp    { width:   3em; } /* 成長点 */
  }
  & tr th.comp span.small {
    display: block;
    margin: -1em 0 -.5em;
  }
  & tr td.comp {
    padding-left: 1px;
    padding-right: 1px;
    white-space: nowrap;

    & span.failed {
      opacity: 0.5;
    }
  }
  & tr td.money {
    text-align: right;
    
    &::after {
      content: "枚";
      font-size: 0.9em;
      margin-left: 3px;
      margin-right: 2px;
    }
    &:empty::after {
      content: "";
    }
  }
}

/* // Cashbook
---------------------------------------------------------------------------------------------------- */
#cashbook {
  margin-top: var(--box-v-gap);
  height: max-content;
  overflow: hidden;
}
#cashbook > div {
  max-height: 16em;
  overflow: auto;

  @media print {
    max-height: initial;
  }
}
#cashbook p {
  line-height: 1.5;
  white-space: pre-wrap;
}
#cashbook b.cash {
  padding: 2px 0;
  font-weight: normal;
  background: linear-gradient(to top, rgba(0,100,255,0.5) 0rem, rgba(0,100,255,0.3) .5rem, transparent .5rem);
}
#cashbook b.cash.plus {
  background: linear-gradient(to top, rgba(0,255,100,0.5) 0rem, rgba(0,255,100,0.3) .5rem, transparent .5rem);
}
#cashbook b.cash.minus {
  background: linear-gradient(to top, rgba(255,100,0,0.5) 0rem, rgba(255,100,0,0.3) .5rem, transparent .5rem);
}

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