@charset "utf-8";

/* // キャラクター
---------------------------------------------------------------------------------------------------- */
#regulation > dl {
  display: grid;
  grid-template-columns: 1fr 1fr 4fr;
  grid-template-rows: auto;
  margin: 10px 0;
  & dt {
    grid-row: 1 / 2;
  }
  & dd {
    grid-row: 2 / 3;
    font-size: 1.2rem;
  }
  @media screen and (width <= 735px){
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    margin: 10px 0;
    > dt:last-of-type {
      grid-column: 1 / span 3;
      grid-row: 3;
    }
    > dd:last-of-type {
      grid-column: 1 / span 3;
      grid-row: 4;
    }
  }
}

#area-status {
  min-height: 0;
  grid-template-columns: 1.9fr 1.6fr 1.5fr;
  grid-template-rows: auto auto auto auto;
  grid-template-areas:
    "LVL  APP IMG"
    "PER  APP IMG"
    "STT  STT IMG"
  ;
  @media screen and (width <= 735px){
    grid-template-columns: 2fr 1fr;
    grid-gap: var(--box-v-gap) var(--box-h-gap);
    grid-template-rows: auto auto auto auto auto;

    grid-template-areas:
      "IMG  IMG "
      "LVL  LVL "
      "PER  PER "
      "APP  APP "
      "STT  STT "
    ;
  }
}


#levels input[name="history0Result"] {
  width: 4.5em;
}
#levels b {
  font-size: 120%;
}

#personal dl {
  display: grid;
  grid-template-columns: 4.5em 1fr;
  > dt {
    text-align: center;
  }
  > dd {
    grid-column: 2;
  }
}
#hp-and-stamina {
  display: grid;
  > dl {
    grid-template-columns: 4.5em 1fr;
  }
  > dl dt {
    grid-column: 1;
  }
  > dl dd {
    grid-column: 2;
    align-self: end;
    text-align: left;
    padding-left: .5em;
  }
  > dl dd input {
    width: 3.5em;
  }
}

@media screen and (width <= 735px){
  #levels {
    grid-template-columns: 1fr 6em;
  }
  #hp-and-stamina dl dd small {
    top: -1.2em;
    right: 0;
    bottom: auto;
    font-size: 75%;
  }
}


#goods,
#battle {
  margin-top: var(--box-v-gap);
}
@media screen and (width <= 735px){
  #specialities {
    margin-top: var(--box-v-gap);
  }
}

#goods table thead th {
  &:nth-child(1) { width:  1em; }
  &:nth-child(2) { width: 14em; }
  &:nth-child(3) { width:  6em; }
  &:nth-child(4) { width:  4em; }
  &:nth-child(5) { width: auto; }
}
#items table thead th {
  &:nth-child(1) { width:  1em; }
  &:nth-child(2) { width: 14em; }
  &:nth-child(3) { width:  6em; }
  &:nth-child(4) { width:  4em; }
  &:nth-child(5) { width:  4em; }
  &:nth-child(6) { width: auto; }
}

#battle table colgroup {
  col   { width: 4.2em; }
  .head { width: 4.5em; }
  .name { width:  auto; }
}
@media screen and (width <= 735px){
  #goods,
  #items,
  #battle { overflow-x: auto; }
  #goods table,
  #items table,
  #battle table { table-layout: fixed; }
  #goods table thead th:nth-child(2),
  #items table thead th:nth-child(2),
  #battle table colgroup col.name { width: 8em; }
  #goods table thead th:nth-child(3),
  #items table thead th:nth-child(3) { width:  5em; }
  #items table thead th:nth-child(4) { width:3.4em; }
  #battle table colgroup col      { width:3.2em; }
}

#history table thead {
  & th:first-child { width: 1.4em; }
  .date       { width:   6em; }
  .title      { width:  14em; }
  .result     { width:   5em; }
  .gm         { width:   6em; }
  .member     { width:  auto; }
}
@media screen and (width <= 735px){
  #history table  { table-layout: fixed; }
  #history table thead th.title  { width: 12em; }
  #history table thead th.member { width: 16em; }
}




#exp-footer {
  position: sticky;
  bottom: 0;
  margin-top: 1em;
  padding: .2rem 0 .5rem;
  border-radius: 0;
  border-width: .2rem 0;
  background: var(--bg-color);
  font-size: 85%;
  font-weight: bold;
}