@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-scramble.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: 1.66fr .3fr 1.4fr;
  grid-template-rows: auto auto 1fr;
  grid-template-areas:
    "PRF LVL IMG"
    "STT STT IMG"
    "MAG MAG IMG"
  ;
  @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:
    "PRF LVL IMG"
    "STT STT STT"
    "MAG MAG MAG"
    ;
  }
  #image-none,
  #image      { grid-area: IMG; }
  #profile    { grid-area: PRF; }
  #level      { grid-area: LVL; }
  #status     { grid-area: STT; }
  #magi       { grid-area: MAG; }
}

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

/* // Profile
---------------------------------------------------------------------------------------------------- */
#profile {
  display: grid;
  grid-template-columns: 1fr 1fr;
  #taxa { grid-column: 1; }
  & dl:nth-child(n+3) {
    border-top-width: 1px;
    border-top-style: solid;
  }
  & dl:nth-child(odd) {
    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 1fr 1fr;
}
#status > dl > dd.status {
  padding: 3px 3px 3px 0px;
  > dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    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%;
  }
}
#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;
    }
  }
}

/* // Magi
---------------------------------------------------------------------------------------------------- */
#magi {
  align-self: start;
}
#magi > table {
  margin-top: -1em;
  table-layout: fixed;
  & colgroup {
    .name   { width: 9.2em; }
    .timing { width: auto; }
    .target { width: auto; }
    .cond   { width: auto; }
  }
  
  & tbody {
    .name   { font-weight: bold; }
    .timing {  }
    .target { font-size: 90%; }
    .cond   { 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 ////////// */
}