html {
  font-size: 12px;
  font-family: 'Roboto', sans-serif;
}

*, *:before, *:after {
  box-sizing: border-box;
}

body, p, a, span, h1, h2, h3, div, button, label, input {
  border: 0;
  margin: 0;
  padding: 0;
}

h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1.5rem;
}

h3 {
  font-size: 1.25rem;
}

body {
  background-color: #000;
  color: #fff;
}

body a {
  color: #9cf;
}

body a:hover {
  color: #8be;
}

button, select, option, input[type=text], input[type=number], label {
  font-size: 100%;
  display: inline-block;
  color: #fff;
  background-color: transparent;
  border: 1px solid #fff;
  border-radius: 0;
  padding: 1px 3px;
}

label {
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-left-style: none;
  border-right-style: none;
}

button:hover, select:hover {
  color: #bbb;
  border-color: #bbb;
}

button:active, select:active {
  color: #777;
  border-color: #777;
}

select, option {
  background-color: #000;
}

select {
  /* in firefox the select box shows as 19px height compared to the button's 17.8px */
  /* this fixes it somehow, making select boxes 17.8px height */
  appearance: menulist-button;
}

option {
  padding: 0;
  border: none;
}

input[type=text], input[type=number] {
  background-color: #111;
}

input[type=number] {
  padding: 1px 0 1px 3px;
}

header p, header h1, header h2, header h3,
footer p, footer h1, footer h2, footer h3 {
  margin-bottom: 0.5rem;
}

header p:last-child, header h1:last-child, header h2:last-child, header h3:last-child,
footer p:last-child, footer h1:last-child, footer h2:last-child, footer h3:last-child {
  margin-bottom: 0;
}

footer {
  width: 100%;
  text-align: center;
}

.positive {
  color: #080;
}

.negative {
  color: #d00;
}

div.pip {
  background-color: #555;
  margin: 3px 0;
  height: 12px;
  width: 6px;
}

div.pip.boosted {
  background-color: #0c0;
}

div.pips {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1px;

  user-select: none;
}

.hide {
  display: none !important;
}

#planner-overlay {
  position: fixed;
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.75);
  user-select: none;
  z-index: 2;
  padding: 4rem;
}

#planner-main button:disabled, #planner-main select:disabled {
  color: #d00;
  border-color: #d00;
}

#planner-main button:disabled:hover, #planner-main select:disabled:hover {
  color: #c00;
  border-color: #c00;
}

#planner-main div.planner-trait,
#planner-main div.planner-profession {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;

  user-select: none;
  padding: 0.25rem 0.5rem;
}

#planner-main div.planner-trait:hover,
#planner-main div.planner-profession:hover,
#planner-main div.planner-profession.selected,
#planner-main div.planner-skill:hover {
  background-color: #222;
}

#planner-main div.planner-trait.unavailable {
  color: #777;
}

#planner-main div.planner-trait-name,
#planner-main div.planner-profession-name {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}

#planner-main div.planner-trait-icon-container {
  display: none;
}

#planner-main div.planner-profession-icon-container {
  display: none;
}

#planner-main div.planner-skill {
  color: #aaa;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  user-select: none;
  padding: 0.25rem 0.5rem;
}

#planner-main span.skill-name {
  display: inline-block;
  width: 100%;
}

#planner-main span.skill-level {
  text-align: center;
  display: inline-block;
  width: 1rem;
  flex-shrink: 0;
}

#planner-main div.skill-level-bar {
  width: 69px;
  flex-shrink: 0;
}

#planner-main span.skill-level.boosted {
  color: #0c0;
  font-weight: bold;
}

#planner-main span.skill-level.reduced {
  color: #d00;
  font-weight: bold;
}

#planner-main div.profession-category {
  color: #9cf;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 0.9em;
  letter-spacing: 0.1em;
  padding: 0.5rem 0.5rem 0.25rem;
  user-select: none;
}

#planner-main span.profession-cost {
  color: #aaa;
  flex-shrink: 0;
  padding-left: 0.5rem;
}

#panel-dice div.dice-effect {
  padding: 0.25rem 0.5rem;
}

#panel-dice div.dice-effect:hover {
  background-color: #222;
}

#panel-dice div.dice-effect-trait {
  font-weight: bold;
  color: #9cf;
}

#panel-dice div.dice-effect-line {
  color: #ccc;
  padding-left: 1rem;
}

#panel-dice div.dice-effect-empty {
  color: #777;
  padding: 0.5rem;
}

#points {
  text-align: right;
  display: inline-block;
  width: 2rem;
}

#planner-controls {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

#planner-settings, #planner-presets {
  display: flex;
  flex-direction: row;
  align-items: baseline;
}

#planner-settings {
  gap: 1rem;
  flex-wrap: wrap;
  margin-right: auto;
}

#planner-presets {
  gap: 0.25rem;
  margin-left: auto;
  min-width: 0;
}

#planner-presets label[for=presets] {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#presets-selector {
  min-width: 16rem;
}

#setting-free-points {
  width: 6rem;
}

#planner-mods {
  display: flex;
  flex-direction: column;
  height: 30rem;
  gap: 0.25rem;
}

#planner-mods-list div.planner-mod {
  user-select: none;
  padding: 0.5rem 0.5rem;
}

#planner-mods-list div.planner-mod:hover {
  background-color: #222;
}

#planner-mods-list div.planner-mod button.mod-enabled {
  background-color: #080;
}

#planner-mods-list div.planner-mod button:hover.mod-enabled {
  background-color: #070;
}

#planner-mods-list div.planner-mod button.mod-disabled {
  background-color: #d00;
}

#planner-mods-list div.planner-mod button:hover.mod-disabled {
  background-color: #c00;
}

#planner-mods-list {
  height: 100%;
}

#planner-mods-list,
div.panel > div.panel-inner {
  border: 1px solid #fff;
  overflow-y: scroll;
}

#planner-mods-list div.planner-mod,
div.panel > div.panel-bottom {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}

@media (hover: none) {
  /* devices that cannot hover */
}

@media (hover: hover) {
  /* devices that can hover */
}

@media only screen and (min-width: 40rem) {
  /* viewports bigger than 40rem (480px) */
  #planner-container {
    display: flex;
    flex-direction: column;

    max-width: 90rem;
    min-width: 30rem;

    padding: 1rem;
    margin: 0 auto;
    gap: 1rem;
  }

  #planner-main {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);

    height: 60rem;

    gap: 1rem;
  }

  div.panel {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    min-height: 0;
  }

  div.panel > div.panel-inner {
    height: 100%;
  }

  #panel-professions,
  #panel-dice,
  #panel-traits-positive,
  #panel-traits-negative,
  #panel-traits-chosen,
  #panel-major-skills {
    grid-area: span 1;
  }
}

@media only screen and not (min-width: 40rem) {
  /* viewports smaller than or equal to 40rem (480px) */
  #planner-container {
    display: flex;
    flex-direction: column;

    width: 100%;
    height: 100%;

    padding: 1rem;
    gap: 1rem;
  }

  #planner-main {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  div.panel {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    height: 30rem;
  }

  div.panel > div.panel-inner {
    height: 100%;
  }
}

div.forage-chooser {
  background-color: #111;
  border: 1px solid #fff;
  padding: 1.5rem;
  max-width: 44rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

div.forage-chooser button.forage-choice {
  text-align: left;
  padding: 0.5rem;
  cursor: pointer;
}

div.forage-chooser button.forage-choice b {
  color: #9cf;
}

div.forage-chooser p.forage-chooser-note {
  color: #777;
  font-size: 0.9em;
}