@charset "utf-8";

@layer system {
/* // Body
---------------------------------------------------------------------------------------------------- */
body {
  background-image: url(../../_common/img/back-pattern.png), url(../img/back-kiz.png);
  background-blend-mode: normal, normal;
  .night & {
    background-blend-mode: hard-light, hard-light;
  }
  @media screen and (width <= 735px){
    background-size: auto, 100%;
  }
}
/* // List
---------------------------------------------------------------------------------------------------- */
.list table tr {
  grid-template-columns: 26rem 0.7fr 0.7fr minmax(6.5em, 0.7fr) 1fr 0.6fr;
  grid-template-areas:
    "NAME   PL  GEN TYPE BLNG DATE"
    "NAME   PL  AGE  NGI  KIZ DATE"
    "NAME TAGS TAGS TAGS TAGS DATE"
  ;
  @media screen and (width <= 735px){
    grid-template-columns: 18rem 6em 7em 0.7fr 1fr 4em;
  }
  .name    { grid-area: NAME; }
  .player  { grid-area:   PL; }
  .race    { grid-area: RACE; }
  .gender  { grid-area:  GEN; }
  .age     { grid-area:  AGE; }
  .type    { grid-area: TYPE; }
  .negai   { grid-area:  NGI; }
  .belong  { grid-area: BLNG; }
  .kizuna  { grid-area:  KIZ; }
  .tags    { grid-area: TAGS; }
  .date    { grid-area: DATE; }
}


/* // List-Simple
---------------------------------------------------------------------------------------------------- */
.list ul li a::before {
  content: attr(data-type);
}


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