@charset "utf-8";

@layer system {
/* // Body
---------------------------------------------------------------------------------------------------- */
body {
  background-image: url(../../_common/img/back-pattern.png), url(../img/back-moon.png);
  background-blend-mode: normal, hard-light;
  .night & {
    background-blend-mode: hard-light, hard-light;
  }
  @media screen and (width <= 735px){
    background-size: auto, 120%;
    background-position-x: 0, 5vw;
    background-position-y: 0, 110%;
  }
}
/* // 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 2;
  }
  #area-battle {
    grid-row: span 1;
  }
  #free-note {
    grid-column: 1;
  }
  #enc-bonus {
    grid-column: 2;
    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);
}

/* // Area-Status
---------------------------------------------------------------------------------------------------- */
#area-status {
  min-height: 56.7rem;
  display: grid;
  grid-gap: var(--box-v-gap) var(--box-h-gap);
  grid-template-columns: 2fr 1.4fr;
  grid-template-rows: auto auto 1fr auto;
  grid-template-areas:
    "FAC IMG"
    "STT IMG"
    "PER IMG"
    "SCR IMG"
  ;
  @media screen and (width <= 767px){
    min-height: 0%;
    grid-gap: .5rem;
  }
  @media screen and (width <= 735px){
    grid-template-areas:
      "FAC IMG"
      "PER IMG"
      "STT STT"
      "SCR SCR"
    ;
  }
  #image-none,
  #image      { grid-area: IMG; }
  #personal   { grid-area: PER; }
  #factors    { grid-area: FAC; }
  #status     { grid-area: STT; }
  #scar       { grid-area: SCR; }
}

/* Image */
.image-none::after {
  transform: scale(1, 1.5);
}

/* Factor */
#factors {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  > dl:first-child {
    display: grid;
    grid-template-rows: max-content 1fr;
  }
  > dl:not(:first-child) {
    border-left-width: 1px;
  }
  > dl dd {
    align-self: center;
  }
}

/* Personal */
#personal {
  display: grid;
  grid-template-columns: 1fr 1fr;
  & dl:nth-child(2) {
    border-left-width: 1px;
    border-left-style: dotted;
  }
  & dl:nth-child(n+3) {
    grid-column: span 2;
    display: grid;
    grid-template-columns: 2fr 4fr;
    border-top-width: 1px;
    border-top-style: solid;
    & dd:last-child {
      grid-column: 2;
      grid-row: 1 / span 2;
      display: grid;
      align-items: end;
      border-left-width: 1px;
      border-left-style: dotted;
      text-align: left;
      > div {
        padding-top : .5em;
        padding-left: .2em;
      }
    }
  }
  & dl dt:empty::before {
    content: '　';
  }
}

/* Status */
#level dd {
  grid-row: span 2;
  font-size: 200%;
  font-weight: bold;
}
#status {
  display: grid;
  grid-template-columns: 0.5fr 1fr 1.5fr;
  grid-template-rows: auto;
  white-space:nowrap;
}
#status > dl {
  display: grid;
  grid-template-rows: max-content 1fr;
  &:not(:first-child) {
    border-left-width: 1px;
  }
  > dd {
    display: grid;
    align-items: center;

    > dl {
      width: max-content;
      margin: auto;
      display: grid;
      grid-template-columns: max-content auto;
      > dt::after {
        content: ':';
      }
      > dd {
        text-align: left;
      }
    }
  }
  > dd i {
    font-family: var(--base-font-family-min);
    font-style: normal;
    &.spade { color: #007; }
    &.club  { color: #050; }
    &.heart { color: #d03; }
    &.dia   { color: #f30; }
    @media screen {
      .night & {
        &.spade { color: #77a; }
        &.club  { color: #686; }
        &.heart { color: #f36; }
        &.dia   { color: #f63; }
      }
    }
  }
  > dd b {
    display: inline-block;
    min-width: 2.2em;
    padding: 0 .2em;
    transform: scale(1.3);
    text-align: center;
  }
}

/* Scar */
#scar {
  display: grid;
  grid-template-columns: 10.2em auto;

  & dd:last-child {
    grid-column: 2;
    grid-row: 1 / span 2;
    border-left-width: 1px;
    border-left-style: dotted;
  }
  & dd.left {
    text-align: left;
    padding-top : .5em;
    padding-left: .2em;
  }
}

/* // Area-Battle
---------------------------------------------------------------------------------------------------- */
#area-battle {
  position: relative;
  align-self: end;
}
#area-battle > .box {
  margin-top: var(--box-v-gap);
  > table {
    width: 100%;
    border-style: hidden;
  }
  > table tbody tr {
    border-width: 1px 0 0;
    border-style: solid;
  }
  > table tbody td {
    border-left-width: 1px;
    border-style: dotted;
  }
}

/* Arts */
#arts,
#bloodarts {
  position: relative;
  > table {
    margin-top: calc(-1 * var(--box-v-gap));
  }
  > table thead th {
    vertical-align: bottom;
  }
  > table tbody td:nth-child(n+2) {
    font-family: var(--font-proportional);
    font-feature-settings: "palt";
  }
  > table tbody td > span {
    display: inline-block;
  }
  > table tbody td.left {
    padding-left: .5rem;
    font-size: 90%;
  }
}
#bloodarts table thead th {
  &:nth-child(1) { width: 10em; } /* 名称 */
  &:nth-child(2) { width: 5em; font-size: 90%; white-space: nowrap } /* タイミング */
  &:nth-child(3) { width: 4.4em; } /* 対象 */
}
#bloodarts table tbody td {
  &:nth-child(1) { font-weight: bold; } /* 名称 */
  &:nth-child(2) { font-size: 90%; } /* タイミング */
  &:nth-child(3) { font-size: 90%; } /* 対象 */
}

#arts table thead th {
  &:nth-child(1) { width: 10em; } /* 名称 */
  &:nth-child(2) { width: 5em; font-size: 90%; white-space: nowrap } /* タイミング */
  &:nth-child(3) { width: 4.4em; } /* 対象 */
  &:nth-child(4) { width: 4.4em; } /* 代償 */
  &:nth-child(5) { width: 4.4em; } /* 条件 */
}
#arts table tbody td {
  &:nth-child(1) { font-weight: bold; } /* 名称 */
  &:nth-child(2) { font-size: 90%; } /* タイミング */
  &:nth-child(3) { font-size: 90%; } /* 対象 */
  &:nth-child(4) { font-size: 90%; } /* 代償 */
  &:nth-child(5) { font-size: 90%; } /* 条件 */
}
#arts b.arts-scar-head {
  display: block;
  margin-top: -.1em;
  margin-left: .1em;
  margin-bottom: -.2em;
  font-size: 82%;
  line-height: 1;
  text-align: left;
}

/* // Partner
---------------------------------------------------------------------------------------------------- */
.partner {
  display: grid;
  margin-top: var(--box-v-gap);
  grid-gap: calc(var(--box-v-gap) / 2) var(--box-h-gap);
  grid-template-columns: 1fr 4fr;
  grid-template-rows: auto auto 1fr;
  
  --box-head-bg-color: hsla(
    var(--box-head-bg-color-h, 225),
    var(--box-head-bg-color-s,  9%),
    var(--box-head-bg-color-l, 65%),
    var(--box-head-bg-color-a, 0.4)
  );
  --box-base-bg-color: hsla(
    var(--box-base-bg-color-h,   0),
    var(--box-base-bg-color-s,   0%),
    var(--box-base-bg-color-l, 100%),
    var(--box-base-bg-color-a, 0.5)
  );
  --box-outside-border-color: hsl(
    var(--box-head-bg-color-h, 0),
    calc( var(--box-head-bg-color-s,   0%) * 0.15 ), 60%
  );
  --box-inside-border-color: hsl(
    var(--box-base-bg-color-h, 0),
    calc( var(--box-base-bg-color-s,   0%) * 0.3 ), 65%
  );
  @media screen {
    .night & {
      --box-base-bg-color: hsla(
        var(--box-base-bg-color-h,   0),
        var(--box-base-bg-color-s,  0%),
        var(--box-base-bg-color-d, 15%),
        var(--box-base-bg-color-a, 0.5)
      );
      --box-outside-border-color: hsl(
        var(--box-head-bg-color-h, 0),
        calc( var(--box-head-bg-color-s,   0%) * 0.15 ), 35%
      );
      --box-inside-border-color: hsl(
        var(--box-base-bg-color-h, 0),
        calc( var(--box-base-bg-color-s,   0%) * 0.3 ), 25%
      );
    }
  }
  @media screen and (width >= 1400px){
    &:first-child {
      margin-top: 0;
    }
  }
}
.partner .image, 
.partner .image-none {
  grid-column: 1;
  grid-row: 1 / 4;
  @media print {
    break-inside: avoid;
  }
}
.partner .image-none::after {
  font-size: 6rem;
}
.partner > :not(.image):not(.image-none) {
  grid-column: 2;
}
.partner .image p.words, 
.partner .image-none p.words {
  display: none;
}
.partner .partner-name {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  background-image: linear-gradient(to right, var(--box-head-bg-color), var(--box-base-bg-color));
  border-width: 2px 0px 1px;
  border-style: solid;
  border-color: var(--box-outside-border-color, inherit);
}
.partner .partner-name h1 {
  padding-left: .2em;
  font-size: 1.5rem;
  font-family: var(--base-font-family-min);
  text-shadow: var(--bg-color) 0px 0px .5em,
    var(--bg-color)  .1rem .1rem, var(--bg-color) -.1rem -.1rem,
    var(--bg-color) -.1rem .1rem, var(--bg-color)  .1rem -.1rem,
    var(--bg-color)  .0rem .1rem, var(--bg-color)  .0rem -.1rem,
    var(--bg-color) -.1rem .0rem, var(--bg-color)  .1rem  .0rem;
  & a {
    font-size: 1.8rem;
  }
}
.partner .partner-name dl {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  margin: .2em .2em .2em auto;
  line-height: 1;
  align-self: end;
  & dt {
    font-size: 78%;
  }
  & dt::after {
    content: ":";
  }
  & dd {
    font-size: 86%;
    text-align: right;
    flex-grow: 1;
  }
}
.partner-personal {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;

  & dl:not(:first-child) {
    border-left-width: 1px;
    border-left-style: solid;
  }
}
.union h2 { visibility: hidden; }
.seal-details {
  display: grid;
  border-top-width: 1px;
  border-top-style: solid;

  .seal & {
    grid-template-columns: 8em 10em 1fr;
    grid-template-areas:
      "POS EM1 PRM"
      "SHP EM2 PRM"
    ;
  }
  .union & {
    grid-template-columns: 10em 1fr;
    grid-template-areas:
      "EM1 PRM"
      "EM2 PRM"
    ;
  }
  .position { grid-area: POS; }
  .shape    { grid-area: SHP; }
  .emotion1 { grid-area: EM1; }
  .emotion2 { grid-area: EM2; }
  .promise  { grid-area: PRM; }

  & dl {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    border-style: solid;
    .seal & {
      &.position { border-width: 0 0 1px; }
      &.shape    { border-width: 0;         background-color: var(--box-even-rows-bg-color); }
      &.emotion1 { border-width: 0 1px 1px; }
      &.emotion2 { border-width: 0 1px;     background-color: var(--box-even-rows-bg-color); }
      &.promise  { border-width: 0;  }
    }
    .union & {
      &.position { display: none; }
      &.shape    { display: none; }
      &.emotion1 { border-width: 0 1px 1px; }
      &.emotion2 { border-width: 0 1px; background-color: var(--box-even-rows-bg-color); }
      &.promise  { border-width: 0; }
    }
    & dt {
      padding-left: .2em;
    }
  }
}
.partner-personal dd:empty::before,
.seal-details dd:empty::before {
  content: '　';
}
#servant {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
#servant > div:first-child {
  border-width: 0 1px 0 0;
  border-style: solid;
}
#servant.box dl dt {
  padding-left: .2em;
}
#servant-data {
  display: grid;
  grid-template-columns: 2.5fr 1fr;
  border-width: 1px 0 0;
  border-style: solid;
  .class {
    border-width: 0 0 0 1px;
    border-style: solid;
  }
  .background {
    grid-column: span 2;
    border-width: 1px 0 0;
    border-style: solid;
  }
}
#servant .seal-details {
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "POS EM1"
    "SHP EM2"
  ;
  & .position { border-width: 0 0 1px; }
  & .shape    { border-width: 0;         background-color: var(--box-even-rows-bg-color); }
  & .emotion1 { border-width: 0 1px 1px; }
  & .emotion2 { border-width: 0 1px;     background-color: var(--box-even-rows-bg-color); }
}

@media screen and (width > 735px){
  .bigamy {
    display: grid;
    grid-gap: var(--box-v-gap) var(--box-h-gap);
    grid-template-columns: 1fr 1fr;
  }
  .bigamy .box {
    font-size: 90%;
  }
  .bigamy #servant {
    grid-column: span 2;
  }
  .bigamy .partner {
    grid-template-columns: 1fr 2fr;
  }
  .bigamy .partner .image, 
  .bigamy .partner .image-none {
    grid-column: 1;
    grid-row: 2 / 4;
  }
  .bigamy .partner .partner-name {
    grid-column: 1 / 3 !important;
    grid-row: 1;
  }
  .bigamy .partner-personal {
    display: grid;
    grid-auto-flow: dense;
    grid-template-columns: 1fr 1fr;
  }
  .bigamy .partner-personal dl:nth-child(3) {
    grid-column: 2;
    grid-rows: 2;
  }
  .bigamy .partner-personal dl:nth-child(n+3) {
    border-top-width: 1px;
    border-top-style: solid;
  }
  .bigamy .partner-personal dl:nth-child(4) {
    border-left-width: 0;
  }
  .bigamy .seal .seal-details {
    grid-template-columns: 8fr 10fr;
    grid-template-areas:
      "POS EM1"
      "SHP EM2"
      "PRM PRM"
    ;
    & .position { border-width: 0 0 1px; }
    & .shape    { border-width: 0 0 1px; }
    & .emotion1 { border-width: 0 0 1px 1px; }
    & .emotion2 { border-width: 0 0 1px 1px; }
    & .promise  { border-width: 0; }
  }
  .bigamy .union .seal-details {
    grid-template-columns: 1fr;
    grid-template-areas:
      "EM1"
      "EM2"
      "PRM"
    ;
    & .emotion1 { border-width: 0 0 1px 0; }
    & .emotion2 { border-width: 0 0 1px 0; }
    & .promise  { border-width: 0; }
  }
}
@media screen and (width >= 1400px){
  .bigamy .partner {
    margin-top: 0;
  }
}

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


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


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