@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@800&display=swap');

@layer system {
/* // Body
---------------------------------------------------------------------------------------------------- */
body {
  background-image: url(../../_common/img/back-pattern.png), url(../img/back-dragomakhia.png);
  background-blend-mode: normal, normal;
  background-position: center, bottom -100px right -20px;
  .night & {
    background-blend-mode: hard-light, hard-light;
  }
  @media screen and (width <= 735px){
    background-size: auto, 100%;
    background-position: center, bottom 50px right 0px;
  }
}
/* // 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;
    align-items: start;
    padding: 0 1.2rem;
    position: relative;
  }
  #area-name, #tags {
    grid-column: span 2;
  }
  .column-status{
    grid-row: span 3;
  }
  #area-partner {
    grid-column: 2;
    grid-row: 3;
  }
  #free-note {
    grid-column: 2;
    align-self: normal;
  }
  #history {
    grid-column: 2;
    grid-row: 5;
    align-self: end;
  }
  aside#sidebar-left,
  aside#sidebar-right {
    display:none;
  }
  aside#sidebar-top,
  aside#sidebar-bottom {
    display: block;
  }
}
/* // Font
---------------------------------------------------------------------------------------------------- */
#history {
  font-family: "Kosugi","Arial",var(--base-font-family-jp);
}
#character-name,
.words {
  font-family: var(--base-font-family-min);
}
#character-name rt {
  font-family: Arial,var(--base-font-family-min);
}
#status dl dd,
#magi table {
  font-family: var(--font-proportional);
}

/* // Name
---------------------------------------------------------------------------------------------------- */
#area-name {
  position: relative;
}
h1#character-name {
  padding: 1.7rem 1rem .3rem;
}
h1#character-name:not(:has(ruby)) {
  padding: 1rem;
}
#area-name::before {
  content: "キャラクター名";
  position: absolute;
  top: 0;
  left: .3em;
  line-height: 1;
  font-size: 1.2rem;
  font-weight: bold;
  font-family: var(--base-font-family-jp);
  text-shadow: none;
}

/* // Tags(Clan)
---------------------------------------------------------------------------------------------------- */
#tags .clan {
  position: relative;
  padding-left: calc(3.5em * 0.8 + .2em);
  padding-right: .2em;
  border-width: 2px;
  border-style: solid;
  border-color: #ba95;
  border-radius: 5px;
  font-style: normal;
  background-color: #ba95;
  background-color: var(--bg-color);
  color: inherit;
}
#tags .clan::before {
  content: "クラン";
  width: 3.5em;
  position: absolute;
  inset: 0 auto 0 0;
  display: grid;
  place-items: center;
  background-color: #ba95;
  font-size: 80%;
  line-height: 1;
}

/* // Area-Status
---------------------------------------------------------------------------------------------------- */
#area-status {
  min-height: 56.7rem;
  display: grid;
  grid-gap: var(--box-v-gap) var(--box-h-gap);
  grid-template-columns: .5fr 1.46fr 1.4fr;
  grid-template-rows: auto auto auto auto auto auto auto 1fr;
  grid-template-areas:
    "HED HED IMG"
    "PRF PRF IMG"
    "STT ST2 IMG"
    "SKL SPE SPE"
    "SKL WPN WPN"
    "SKL ARM ARM"
    "SKL FSN FSN"
    "ART ART ART"
  ;
  @media screen and (width <= 767px){
    min-height: 0%;
    grid-gap: .5rem;
  }
  @media screen and (width <= 735px){
    grid-template-columns: 1.66fr .4fr 1.3fr;
    grid-template-areas:
    "HED HED IMG"
    "PRF PRF IMG"
    "STT STT SKL"
    "ST2 ST2 ST2"
    "SPE SPE SPE"
    "WPN WPN WPN"
    "ARM ARM ARM"
    "FSN FSN FSN"
    "ART ART ART"
    ;
  }
  #image-none,
  #image      { grid-area: IMG; }
  #profile    { grid-area: PRF; }
  #head-area  { grid-area: HED; }
  #level      { grid-area: LVL; }
  #status     { grid-area: STT; }
  #status2    { grid-area: ST2; }
  #skill      { grid-area: SKL; }
  #special    { grid-area: SPE; }
  #weapon     { grid-area: WPN; }
  #armor      { grid-area: ARM; }
  #fashion    { grid-area: FSN; }
  #arts       { grid-area: ART; }
}

#area-status dd:empty::before,
#area-status td:empty::before {
  content: '　';
}

/* Image */
.image, .image-none {
  max-height: 56.7rem;
  container-type: inline-size;
}
.image-none::after {
  font-family: 'Montserrat','Impact';
  font-size: 5.8rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.2rem;
  transform: scale(1, 1.1);
}
@container (width <= 320px) {
  .image, .image-none {
    max-height: auto;
  }
  .image-none::after {
    font-size: 4.8rem;
  }
}
@media screen and (width <= 735px){
  .image-none::after {
    font-size: 3.5rem;
  }
}

/* ステージおよび成長ポイント
---------------------------------------------------------------------------------------------------- */
#head-area {
  display: grid;
  grid-gap: var(--box-v-gap) var(--box-h-gap);
  grid-template-columns: .4fr .2fr;
  grid-template-areas: "STG GRW";
  #stage      { grid-area: STG; }
  #grow       { grid-area: GRW; }
}

#stage {
  align-self: start;
}
#stage > table {
  & tbody {
    .name   { width: 5em; font-size: 90%; border-style:solid; }
    .value  { width: auto; font-size: 90%; }
  }
}
#grow {
  align-self: center;
}
#grow > table {
  & tbody {
    .name   { width: 3em; font-size: 90%; border-style:solid; }
    .value  { width: auto; font-size: 90%; }
  }
}


/* // Profile
---------------------------------------------------------------------------------------------------- */
#profile {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
/*  grid-template-rows: repeat(4, 1fr); */
  #taxa { grid-column: 1; }
  & dl:nth-child(n+4) {
    border-top-width: 1px;
    border-top-style: solid;
  }
  & dl:nth-child(3n+1),dl:nth-child(3n+2) {
    border-right-width: 1px;
    border-right-style: dotted;
  }
  & dd {
    word-break: auto-phrase;
    overflow-wrap: break-word;
  }
}
@media screen and (width <= 735px){
  #profile {
    display: block;
    & dl:nth-child(n+2) {
      border-top-width: 1px;
      border-top-style: solid;
    }
    & dl:nth-child(odd) {
      border-right-width: 0;
    }
  }
}

/* // Level
---------------------------------------------------------------------------------------------------- */
#level {
  align-self: end;
  & dl:first-of-type {
    border-bottom-width: 1px;
    border-bottom-style: solid;
  }
  & dl dd {
    line-height: 1;
    font-size: 150%;
  }
}

/* // Status
---------------------------------------------------------------------------------------------------- */
#status > dl {
  display: grid;
/*  grid-template-columns: 3.8em 1fr;*/
}
#status > dl > dt {
  font-size: 110%;
  padding-left: .2em;
}
#status > dl > dd {
  display: grid;
  grid-template-columns: 1fr;
}
#status > dl > dd.status {
  padding: 3px 3px 3px 0px;
  > dl {
    display: grid;
    grid-template-columns: max-content .8fr .2fr;
    border-width: 3px;
    border-style: double;
    margin-left: 3px;
  }
  > dl dt {
    align-self: start;
    padding: 0.5em;
    border-bottom-width: 1px;
    border-bottom-style: solid;
  }
  > dl dd {
    font-size: 180%;
  }
  > dl dd.add {
    margin-left: -12px;
    font-size: 80%;
  }
}
#status > dl > dd.attribute {
  > ul {
    padding: 0 .3em;
    border-left-width: 1px;
    border-left-style: solid;
    line-height: 1.8;
  }
  > ul li:not(:last-child) {
    border-bottom-width: 1px;
    border-bottom-style: dotted;
  }
  > ul li:empty::before {
    content: "　";
  }
  @media screen and (width <= 735px){
    > ul li:empty {
      display:none
    }
    > ul {
      margin-bottom: -1px;
    }
  }
}


/* 副能力値
---------------------------------------------------------------------------------------------------- */
#status2 {
  align-self: start;
}
#status2 > table {
  margin-top: -1em;
  table-layout: fixed;
  padding: 3px 3px 3px 0px;
  & colgroup {
    .name   { width: 4.5em; }
    .value  { width: 3.0em; }
    .calc   { width: auto; }
    .add    { width: 3.0em; }
  }
  & tbody {
    .name   { font-weight: bold; }
    .value  { border-width: 3px; border-style: double; font-size: 120% }
    .calc   { text-align: left; font-size: 90%; margin-left: 3px; }
    .add    { }
  }
}


/* 一般技能
---------------------------------------------------------------------------------------------------- */
#skill {
  align-self: start;
}
#skill > table {
/*  margin-top: -1em;*/
  table-layout: fixed;
  padding: 3px 3px 3px 0px;
  & colgroup {
    .name   { width: 6.0em; }
    .level  { width: 3.0em; }
    .multi  { width: 3.0em; }
  }
  
  & tbody {
    .name   { font-weight: bold;  }
    .level  { }
    .multi  { border-width: 3px; border-style: double; }
  }
}


/* 専門技能
---------------------------------------------------------------------------------------------------- */
#special {
  align-self: start;
}
#special > table {
  margin-top: -1em;
  table-layout: fixed;
  padding: 3px 3px 3px 0px;
  & colgroup {
    .name   { width: 12.0em; }
    .level  { width: 3.0em; }
    .note   { width: auto; }
  }
  
  & tbody {
    .name   { font-weight: bold; }
    .level  { border-width: 3px; border-style: double; }
    .note   { text-align: left; font-size: 90%; margin-left: 3px; }
  }
}


/* 武器
---------------------------------------------------------------------------------------------------- */
#weapon {
  align-self: start;
}
#weapon > table {
  margin-top: -1em;
  table-layout: fixed;
  padding: 3px 3px 3px 0px;
  & colgroup {
    .name   { width: 12.0em; }
    .class  { width: 3.0em; }
    .type   { width: 3.0em; }
    .attack { width: 3.0em; }
    .diff   { width: 3.0em; }
    .pri    { width: 3.0em; }
    .note   { width: auto; }
  }
  
  & tbody {
    .name   { font-weight: bold; }
    .class  { font-size: 90%; }
    .type   { font-size: 90%; }
    .attack { border-width: 3px; border-style: double; }
    .diff   { border-width: 3px; border-style: double; }
    .pri    { }
    .note   { text-align: left; font-size: 90%; margin-left: 3px; }
  }
}

/* 防具
---------------------------------------------------------------------------------------------------- */
#armor {
  align-self: start;
}
#armor > table {
  margin-top: -1em;
  table-layout: fixed;
  padding: 3px 3px 3px 0px;
  & colgroup {
    .name   { width: 12.0em; }
    .class  { width: 3.0em; }
    .deff   { width: 3.0em; }
    .weight { width: 3.0em; }
    .note   { width: auto; }
  }
  
  & tbody {
    .name   { font-weight: bold; }
    .class  { font-size: 90%; }
    .deff   { border-width: 3px; border-style: double; }
    .wieght { border-width: 3px; }
    .note   { text-align: left; font-size: 90%; margin-left: 3px; }
  }
}

/* ファッション
---------------------------------------------------------------------------------------------------- */
#fashion {
  align-self: start;
}
#fashion > table {
  margin-top: -1em;
  table-layout: fixed;
  padding: 3px 3px 3px 0px;
  & colgroup {
    .name   { width: 20.0em; }
    .note   { width: auto; }
  }
  
  & tbody {
    .name   { font-weight: bold; }
    .note   { text-align: left; font-size: 90%; margin-left: 3px; }
  }
}

/* 戦技
---------------------------------------------------------------------------------------------------- */
#arts {
  align-self: start;
}
#arts > table {
  margin-top: -1em;
  table-layout: fixed;
  & colgroup {
    .name     { width: 12em; }
    .attribute{ width: 3em; }
    .timing   { width: 6em; }
    .roll     { width: 4em; }
    .cost     { width: 4em; }
    .note     { width: auto; }
  }
  
  & tbody {
    .name     { font-weight: bold; }
    .attribute{ font-size: 90%; }
    .timing   { font-size: 90%; }
    .roll     { font-size: 90%; }
    .cost     { font-size: 90%; }
    .note     { font-size: 90%; }
    :empty::before {
      content: "　";
    }
  }
  @media screen and (width <= 735px){
    & tr:not(:has(*:not(:empty))) {
      display:none
    }
    & td:empty {
      display:none
    }
  }
}
/* // Free-Memo
---------------------------------------------------------------------------------------------------- */
#free-note,
#free-history{
  margin-top: var(--box-v-gap);
}
@media screen and (width >= 1400px){
  #free-note {
    margin-top: 0;
  }
}


/* // History
---------------------------------------------------------------------------------------------------- */
#history {
  margin-top: var(--box-v-gap);
}
#history table thead {
  .grow   { width: 4.6em; } /* 成長 */
}


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