@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%;
  }
}
/* // List
---------------------------------------------------------------------------------------------------- */
.list table {
  & tr {
    grid-template-columns: 26rem 0.7fr 6.5em 0.7fr 1.2fr 4em 0.6fr;
  }
  & thead tr {
    grid-template-areas:
      "NAME   PL FACT  GEN BLNG  LVL DATE"
      "NAME   PL FACT  AGE MISS  LVL DATE"
    ;
  }
  & tbody tr {
    grid-template-areas:
      "NAME   PL FACT  GEN BLNG  LVL DATE"
      "NAME   PL FACS  AGE MISS  LVL DATE"
      "NAME TAGS TAGS TAGS TAGS TAGS DATE"
    ;
  }
  & .name    { grid-area: NAME; }
  & .player  { grid-area:   PL; }
  & .race    { grid-area: RACE; }
  & .gender  { grid-area:  GEN; }
  & .age     { grid-area:  AGE; }
  & .factor  { grid-area: FACT; }
  & .factors { grid-area: FACS; }
  & .belong  { grid-area: BLNG; }
  & .missing { grid-area: MISS; }
  & .level   { grid-area:  LVL; }
  & .tags    { grid-area: TAGS; }
  & .date    { grid-area: DATE; }
  
  & td.belong,
  & td.missing {
    font-size: 90%;
  }
  @media screen and (width <= 735px){
    & tr {
      grid-template-columns: 18rem 6em 7em 0.7fr 1fr 2.5em 4em;
    }
    & td.age,
    & td.factors {
      font-size: 90%;
    }
  }
}


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


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