@import "modern-normalize.css";

/* Colors */

:root {
  --color-background: sienna;
  --color-highlight: burlywood;
  --color-accent: peru;
  --color-accent-highlight: saddlebrown;
  --color-border: #2F1C19;
}

.food {
  --color-room: #F6C213;
  --color-room-background: #FCED9E;
}

.living {
  --color-room: #881B89;
  --color-room-background: #D89FD8;
}

.utility {
  --color-room: #EA511C;
  --color-room-background: #F9C2A2;
}

.outdoor {
  --color-room: #2A9740;
  --color-room-background: #ADDFBA;
}

.sleeping {
  --color-room: #2F46A2;
  --color-room-background: #ADBAE1;
}

.corridor {
  --color-room: #D5D3E0;
  --color-room-background: #F5F4F8;
}

.downstairs {
  --color-room: #454550;
  --color-room-background: #BDBDC2;
}

.special {
  --color-room: #86181C;
  --color-room-background: #DAA2A5;
}

/* General things */

.icon {
  height: 100%;
}

.popup {
  position: fixed;
  left: 0;
  top: 0;
  transform: translate(calc(50vw - 50%), calc(50vh - 50%));
  max-height: 90vh;
  overflow-y: auto;
  border: 3px solid var(--color-border);
  border-radius: 7px;
  background-color: var(--color-highlight);
  z-index: 1;
  pointer-events: auto;
}

button {
  background-color: var(--color-accent);
  border: 1px solid var(--color-border);
  border-radius: 5px;

  &:hover {
    background-color: var(--color-accent-highlight);
  }
}

.tab {
  padding: 5px;

  &.tab--active {
    background-color: var(--color-accent-highlight);
  }
}

body {
  margin: 1em 0;
  background-color: var(--color-background);

  &:has(.popup) {
    pointer-events: none;
    overflow: hidden;
  }
}

/* Small screens */

@media (height <=600px) or (width <=800px) {
  body {
    font-size: 75%;
  }
}

/* Small components */

.scoring_description {
  display: flex;
  align-items: center;
  justify-content: center;

  .text_per {
    margin: 0 0.35em;
  }

  .icon--room_type,
  .icon--decoration {
    height: 0.9lh;

    &:not(:last-child) {
      margin-right: 0.15em;
    }
  }
}

.positions {
  display: inline-table;
  border-spacing: 1px;
  --positions_height: 1lh;
  height: var(--positions_height);

  td {
    height: calc((var(--positions_height) - 4px)/3);
    width: calc((var(--positions_height) - 4px)/3);
    padding: 0;
  }

  .icon--arow {
    display: block;
    margin: auto;
  }

  .position {
    background: black;
  }

  .position--origin {
    background: white;
    border: 0.01em solid black;
  }
}

/* Castle with tiles */

.castle {
  text-align: center;

  &>header {
    position: relative;
    margin: 0 0.5em 1em;

    .castle__score {
      font-size: 250%;
      font-weight: bold;
    }

    .button--reset {
      /* Float right without taking space */
      position: absolute;
      right: 0;
      top: 50%;
      transform: translate(0, -50%);
      font-size: 150%;
    }
  }
}

.tiles_container {
  overflow: auto;

  .tiles {
    margin: auto;
    padding: 0 0.5em;
    border-spacing: 3px;

    &>*>td {
      height: 8em;
      min-width: 8em;
    }

    .building_spot {
      border: 0.15em dashed black;

      &.throne_room {
        width: calc(16em + 3px);
      }
    }

    .tile {
      position: relative;

      &.inside {
        border: 0.6em solid white;
      }

      &.outside {
        border: 0.6em solid #A2D9F1;
      }

      .tile__top {
        position: absolute;
        top: 0;
        left: 0;
        height: 1lh;
        width: 100%;
        background-color: var(--color-room);

        .icon--room_type {
          float: left;
        }

        .icon--decoration {
          float: right;
        }
      }

      .tile__middle {
        position: absolute;
        top: 1lh;
        bottom: 1lh;
        right: 0;
        left: 0;
        background-color: var(--color-room-background);
        /* Center the score */
        display: flex;
        align-items: center;
        justify-content: center;

        .tile__score {
          font-weight: bold;
        }

        .attendant {
          position: absolute;
          display: flex;
          align-items: center;

          &.attendant--mirror {
            top: 2px;
            left: 2px;
          }

          &.attendant--painting {
            top: 2px;
            right: 2px;
          }

          &.attendant--torch {
            bottom: 2px;
            left: 2px;
          }

          &.attendant--swords {
            bottom: 2px;
            right: 2px;
          }

          .icon--decoration {
            height: 1lh;
            vertical-align: sub;
            margin-right: 0.1em;
          }

          .attendant__selection {
            max-width: 3.5em;
            margin-left: 0.3em;
            font-size: smaller;
          }
        }
      }

      .tile__bottom {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 1lh;
        background-color: #D7BC92;
      }
    }
  }
}

.bonus_card {
  height: 14em;
  width: 10em;
  border: 0.9em solid #EA511C;
  border-radius: 0.7em;
  padding: 1.5em 0.4em;
  background-color: white;

  .bonus_card__points_per {
    font-size: 2em;
  }

  .text_per {
    margin-top: 0.5em;
    margin-bottom: 1em;
  }

  .bonus_card__description {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.2em;

    .text:not(:only-child) {
      vertical-align: middle;
      font-size: 2.5em;
    }

    .icon--room_type {
      width: 3em;
    }

    .positions {
      --positions_height: 2.2em;

      .position--throne_room {
        background-color: #88181E;
        border: none;
      }
    }

    .room_type_square {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 1.5em;
      height: 1.5em;
      border: 2px solid black;
      background: white;
      font-size: 2em;
    }
  }
}

.active_bonus_cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1em;
  margin: 2em 0.5em 0;

  .active_bonus_card__score {
    margin-top: 0.2em;
    font-weight: bold;
  }
}

.add_bonus_card {
  height: 14em;
  width: 10em;
  border: 2px dashed black;
  border-radius: 0.7em;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Pop-ups */

.room_selection {
  width: min(90vw, 38em);
  font-size: larger;

  .room_selection__type {
    .tab_bar {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;

      .tab {
        flex: 1;
        height: 2.5lh;
        border: none;
        border-radius: 0;
      }
    }
  }

  .room_selection__main {
    min-height: 12em;
    display: flex;
    flex-direction: column;
    justify-content: start;
    gap: 1em;
    margin: 1em;

    .tab_bar {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 0.5em;

      .tab {
        height: 3em;
        min-width: 3em;
      }
    }

    .room_selection__axis {
      .positions {
        display: table;
        margin: auto;
        height: 100%;
        width: 100%;
      }
    }
  }

  .submit_buttons {
    display: flex;
    justify-content: space-evenly;
    margin-bottom: 0.5em;
  }
}

.throne_room_selection {
  width: max-content;
  padding: 0.5em;
  font-size: 150%;

  .tab_bar {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    margin-bottom: 1em;

    .tab {
      border-radius: 5px;
    }
  }

  .throne_room_description {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.3em;

    .scoring_description {
      border-right: 1px solid black;
      padding-right: 0.4em;
    }

    .icon--decoration {
      height: 0.9lh;
      width: 0.9lh;
      object-fit: contain;
    }
  }
}

.bonus_card_selection {
  width: 90vw;
  padding: 0.5em;

  .tab_bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;

    .tab {
      border: none;
      background: inherit;
      padding: 0;
      margin: 0.5em;
    }
  }

  .submit_buttons {
    display: flex;
    justify-content: space-evenly;
    margin: 0.5em 0;
  }
}

.bonus_reminder {
  width: min(90vw, 25em);
  font-size: larger;

  .bonus_reminder__type {
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--color-room-background);
    padding-bottom: 0.1lh;
    border-bottom: 2px solid var(--color-border);
    font-size: 150%;
    font-weight: bold;

    .icon--room_type {
      height: 0.8lh;
      margin-left: 0.2em;
    }
  }

  .bonus_reminder__bonus {
    margin: 1em 0.5em;
  }

  button {
    margin-bottom: 0.5em;
  }
}