@charset "utf-8";

@import "icons.css" layer(system);

@media screen and (width <= 550px){
  html {
    font-size: 1.8vw;
  }
}

@layer system {
/* // Body
---------------------------------------------------------------------------------------------------- */
body {
  background-image: url(../../_common/img/back-pattern.png), url(../img/back-first.png);
  @media screen and (width <= 735px){
    background-size: auto, 80%;
  }
}
article, .color-set {
  --item-head-bg-color: hsla(
    var(--box-head-bg-color-h, 225),
    calc( var(--box-head-bg-color-s,  9%) * 0.9 ),
    var(--box-head-bg-color-l, 65%),
    var(--box-head-bg-color-a, 0.4)
  );
  --s-icon-color: hsl(
    var(--box-head-bg-color-h, 0),
    calc( var(--box-head-bg-color-s,   0%) * 0.9 ), 40%
  );
  @media screen {
    .night & {
      --s-icon-color: hsl(
        var(--box-head-bg-color-h, 0),
        calc( var(--box-head-bg-color-s,   0%) * 0.9 ), 70%
      );
    }
  }
}

/* // Base
---------------------------------------------------------------------------------------------------- */
article {
  max-width: 800px;
}

/* // Font
---------------------------------------------------------------------------------------------------- */
#area-name h1 {
  font-family: var(--base-font-family-min);
}


/* // Name
---------------------------------------------------------------------------------------------------- */
#area-name {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  
  margin-top: 1.5em;
  padding: 0px;
  border-width: 3px 0 0;
  border-style: solid;
  border-color: var(--box-outside-border-color);
  background-image: linear-gradient(to bottom, var(--bg-color), transparent);
  @media print {
    background-image: none;
  }

  > h1 {
    padding: .25em 1rem 0;
    text-align: left;
    font-size: 160%;
    font-weight: bold;
    > small {
      display: inline-block;
      font-size: 70%;
      line-height: 1;
    }
    > ruby rt {
      margin: 0;
    }
    & .i-icon {
      width: .8em;
      height: .8em;
    }
  }
  & .price {
    flex-grow: 1;
    padding-right: .5em;
    text-align: right;
    font-size: inherit;
  }
}


/* // Item
---------------------------------------------------------------------------------------------------- */
div.data {
  display: grid;
  grid-template-columns: 10em 2fr 18em;
  > dl.reputation {  }
  > dl.shape      {  }
  > dl.category   {  }
  > dl.age        { grid-column: 3/4; grid-row: 2/3; }
  > dl.summary    { grid-column: 1/3; grid-row: 2/3; }
  > dl.effects    { grid-column: 1/4; }

  border-width: 0 1px 1px 0;
  border-style: solid;

  &,
  & * {
    border-color: var(--box-outside-border-color);
  }
  @media screen and (width <= 735px){
    grid-template-columns: 1fr;
  }

  > dl {
    display: grid;
    grid-template-columns: 4.5em 1fr;
    &.shape { grid-template-columns: 3.5em 1fr; }
    &.category,
    &.age   { grid-template-columns: 5.5em 1fr; }

    background: var(--box-base-bg-color);
    border-width: 1px 0 0 1px;
    border-style: solid;

    > dd:not(:has(p)) {
      word-break: auto-phrase;
      overflow-wrap: break-word;
    }
  }
  
  @media screen and (width <= 735px){
    > dl {
      grid-column: 1/2 !important;
      grid-row: auto !important;
      grid-template-columns: 5.5em 1fr !important;
    }
    > dl dd {
      text-align: left !important;
    }
  }
  
  > dl > dt,
  > dl > dd {
    padding: .2em .5em;
  }
  > dl > dt {
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--item-head-bg-color);
  }
  > dl.reputation dd,
  > dl.category   dd,
  > dl.age        dd { text-align: center; }
  > dl.reputation dd,
  > dl.shape      dd,
  > dl.category   dd,
  > dl.age        dd {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  > dl.shape dd {
    justify-content: flex-start;
  }
  > dl.category dd > div {
    width: 100%;
  }
  > dl.category dd > div hr {
    opacity: 0.5;
  }
  @media screen and (width <= 735px){
    > dl.reputation dd,
    > dl.shape      dd,
    > dl.category   dd,
    > dl.age        dd {
      display: block; 
    }
    > dl.category dd hr {
      display: inline;
      border: 0;
    }
    > dl.category dd hr::before {
      content: '／';
      margin: 0 0.3em;
    }
  }
  > dl.effects {
    & dd.box {
      padding: 0;
      border-width: 0;
      border-radius: 0;
      background: none;
      box-shadow: none;
      > *:first-child {
        margin-top: .2em;
      }
    }
    & .s-icon::before {
      color: var(--s-icon-color);
    }
    & table.weapon-table {
      &,
      & th,
      & td {
        margin: .5em;
        border-width: 1px;
        border-style: solid;
      }
      & th,
      & td {
        padding: .2em .5em;
      }
      & th {
        background-color: var(--box-head-bg-color-pale);
        white-space: nowrap;
      }
      & td:not(.left) {
        white-space: nowrap;
      }
      &:not(:has(tbody td.note:not(:empty))) tr > *.note {
        display: none;
      }
      
      &:not(:has(td.range:not(:empty))) {
        :is(th, td).range {
          display: none;
        }
      }
      td.range:empty::before {
        content: "―";
      }
      
      &.armour-table {
        &:not(:has(td.usage:not(:empty))) {
          .usage {
            display: none;
          }
        }
      }
    }
    & > :is(dt,dd):nth-of-type(n+2) {
      border-top-width: 1px;
      border-top-style: solid;
    }
  }
}



/* // Description
---------------------------------------------------------------------------------------------------- */
.description {
  margin-top: 1.5em;
  padding-bottom: .5em;
  border: 0;
  background: var(--box-base-bg-color);
  border-radius: 0;
  box-shadow: none !important;
}
.description h2 {
  margin: 0;
  padding: 0 .3em;
  border-width: 1px 0px;
  border-style: solid;
  border-color: var(--box-outside-border-color);
  background-image: none;
  font-size: 115%;
  &:nth-child(n+2) {
    margin-top: 1em;
  }
}

/* // Author
---------------------------------------------------------------------------------------------------- */
#author {
  width: max-content;
  min-width: 50%;
  margin: 2em 0 0 auto;
  padding: .5em;
  text-align: right;
  border-width: 0 1px 1px 0px;
  border-style: solid;
}


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