:root {
  --unit: calc(100 / 13 * 1vmin);
}

@media only screen and (min-width: 375px) {
  :root {
    --unit: calc(100 / 13 * 3.75px);
  }

  #wrapper {
    margin-left: calc((100vw - var(--full-width)) / 2);
  }
}

:root {
  --full-width: calc(var(--unit) * 13);
  --unit-8th: calc(var(--unit) / 8);
  --unit-16th: calc(var(--unit) / 16);
  --quarter-unit: calc(var(--unit) / 4);
  --half-unit: calc(var(--unit) / 2);
  --two-unit: calc(var(--unit) * 2);
  --three-unit: calc(var(--unit) * 3);
  --felt-color: #D7D2CC;
  --interactive-color: #69849B;
  --inactive-color: #999999;
  --negative-color: #B3504B;
  --positive-color: #7CAC59;
  --text-shadow-ok: #9de469;
  --text-shadow-zero: #ff5850;
  --text-shadow-inactive: rgba(255, 255, 255, .4);
  --clickable-shadow: none;
  /*--clickable-shadow: var(--unit-8th) var(--unit-8th) var(--unit-8th) rgba(0, 0, 0, 0.3),*/
  /*0 0 var(--unit-8th) rgba(0, 0, 0, 0.3);*/
  /*--inset-shadow: inset var(--unit-16th) var(--unit-16th) var(--unit-16th) #2e333869;*/
  --inset-shadow-ok: inset 0 0 var(--quarter-unit) var(--unit-8th) #658151;
  --inset-shadow-zero: inset 0 0 var(--quarter-unit) var(--unit-8th) #7d3936;
  --inset-shadow-inactive: inset 0 0 var(--quarter-unit) var(--unit-8th) rgba(0, 0, 0, 0.15);
  --halo-shadow: inset 0 0 0 var(--unit-16th) var(--font-dim-color);
  --inside-border-shadow: inset 0 0 0 var(--unit-8th) white;
  --lock-image: url(../gfx/lock2.png);
  --font-label-color: rgba(0, 0, 0, 0.4);
  --font-dim-color: rgba(0, 0, 0, 0.4);
  --font-dim-color-solid: #666;
  --font-strong-color: rgba(0, 0, 0, 0.8);
}

* {
  margin: 0;
  padding: 0;
  font-size: calc(var(--unit) * 0.65);
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
}

body {
  background-color: var(--felt-color);
  background-image: url(../gfx/noise.png);
  background-blend-mode: overlay;
}

#wrapper {
  width: var(--full-width);
  padding-bottom: var(--unit);
}

#bottom-wrapper {
  width: var(--full-width);
  height: var(--bottom-wrapper-height, 100vh);
  overflow: scroll;
}

#dices {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: calc(var(--full-width) - var(--unit));
  margin-left: var(--half-unit);
  padding-top: var(--half-unit);
  position: relative;
}

@keyframes shakeY2 {

  from,
  to {
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translate3d(0, calc(-2 * var(--quarter-unit)), 0);
  }

  20%,
  40%,
  60%,
  80% {
    transform: translate3d(0, var(--quarter-unit), 0);
  }
}

.dice {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: var(--two-unit);
  min-height: var(--two-unit);
  text-align: center;
  line-height: var(--two-unit);
  background-size: contain;
  border-radius: var(--quarter-unit);
  background-color: var(--interactive-color);
  /*background-color: #d8d8d8;*/
  box-shadow: var(--clickable-shadow);
  cursor: pointer;
}

.dice.blank .pip-row {
  display: none;
}

.dice.inactive {
  background-color: var(--inactive-color);
}

.dice.inactive .pip {
  box-shadow: 0 0 var(--quarter-unit) rgba(0, 0, 0, .2);
}

.dice-inside {
  width: calc(var(--two-unit) - var(--unit-8th));
  height: calc(var(--two-unit) - var(--unit-8th));
  border-radius: var(--half-unit);
  /*background-color: var(--interactive-color);*/
  /*background-color: white;*/
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.dice .pip-row {
  display: flex;
  justify-content: space-between;
}

.dice .pip {
  background-color: white;
  box-shadow: 0 0 var(--quarter-unit) #647687;
  /*background-color: var(--negative-color);*/
  width: calc(2.5 * var(--unit-8th));
  height: calc(2.5 * var(--unit-8th));
  border-radius: var(--quarter-unit);
  margin: 0 var(--quarter-unit);
}

.top-pips .pip {
  margin-top: var(--quarter-unit);
}

.bottom-pips .pip {
  margin-bottom: var(--quarter-unit);
}

.dice.d1 .top-pips, .dice.d1 .bottom-pips, .dice.d1 .middle-pips .pip:first-child {
  display: none;
}

.dice.d1 .dice-inside, .dice.d1 .middle-pips {
  justify-content: center;
}

.dice.d2 .middle-pips, .dice.d2 .bottom-pips .pip:first-child, .dice.d2 .top-pips .pip:first-child {
  display: none;
}

.dice.d2 .top-pips {
  justify-content: flex-start;
}

.dice.d2 .bottom-pips {
  justify-content: flex-end;
}

.dice.d3 .middle-pips .pip:first-child, .dice.d3 .bottom-pips .pip:first-child, .dice.d3 .top-pips .pip:first-child {
  display: none;
}

.dice.d3 .top-pips {
  justify-content: flex-start;
}

.dice.d3 .middle-pips {
  justify-content: center;
}

.dice.d3 .bottom-pips {
  justify-content: flex-end;
}

.dice.d4 .middle-pips {
  display: none;
}

.dice.d5 .middle-pips .pip:first-child {
  display: none;
}

.dice.d5 .middle-pips {
  justify-content: center;
}

.dice.keep {
  transform: rotateZ(-15deg);
}

.dice.animate {
  animation-name: shakeY2;
  animation-duration: var(--animation-duration, 5000ms);
  animation-timing-function: linear;
}

.dice.animate .dice-inside .pip-row {
  display: none;
}

#reroll {
  position: relative;
  border-radius: var(--quarter-unit);
  box-shadow: var(--clickable-shadow);
  background-color: var(--interactive-color);
  width: calc(var(--full-width) - var(--unit));
  min-height: calc(var(--unit) + var(--half-unit));
  margin: var(--half-unit) var(--half-unit) 0;
  color: white;
  text-align: center;
  line-height: calc(var(--unit) + var(--half-unit));
  cursor: pointer;
}

#reroll.new-game {
  background-color: var(--positive-color);
}

.config {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

.config .row {
  display: flex;
  justify-content: space-between;
}

.config .button {
  border-radius: var(--quarter-unit);
  box-shadow: var(--clickable-shadow);
  background-color: var(--interactive-color);
  color: white;
  text-align: center;
  padding: var(--half-unit);
  margin: 0 var(--half-unit) var(--half-unit);
  flex-grow: 1;
  cursor: pointer;
}

.config input {
  border-radius: var(--quarter-unit);
  box-shadow: var(--clickable-shadow);
  background-color: white;
  border: none;
  padding: var(--half-unit);
  margin: 0 var(--half-unit) var(--half-unit);
  flex-grow: 1;
  cursor: pointer;
}

#scoreboard table {
  border-collapse: separate;
  border-spacing: var(--half-unit) var(--unit-8th);
  margin: var(--half-unit) auto;
}

#scoreboard tr {
  height: calc(var(--unit) + var(--half-unit));
  cursor: default;
}

#scoreboard tr:first-child {
  height: var(--unit);
}

#scoreboard th {
  border-radius: var(--quarter-unit);
  background-color: rgba(0, 0, 0, .25);
  color: var(--felt-color);
  font-family: 'Lora', serif;
}

#scoreboard th.active {
  background-color: var(--font-strong-color);
}

#scoreboard td.row-label {
  color: var(--font-label-color);
  font-weight: 500;
}

#scoreboard td.sum {
  min-width: var(--two-unit);
  text-align: center;
  color: var(--font-dim-color);
}

#scoreboard td.sum, #scoreboard td.match {
  font-family: 'Lora', serif;
  font-weight: 600;
  font-size: 1.1em;
}

#scoreboard td.match {
  border-radius: var(--quarter-unit);
  /*box-shadow: var(--inset-shadow);*/
  background-color: white;
  min-width: var(--two-unit);
  text-align: center;
  cursor: pointer;
  color: var(--font-strong-color);
}

#scoreboard td.zero, #scoreboard td.ok {
  /*color: white;*/
}

#scoreboard td.zero {
  /*background-color: var(--negative-color);*/
  /*text-shadow: 0 0 4px var(--text-shadow-zero), 0 0 10px var(--text-shadow-zero), 0 0 16px var(--text-shadow-zero);*/
  /*box-shadow: var(--inset-shadow-zero);*/
  /*box-shadow: var(--inside-border-shadow);*/
  /*color: white;*/
}

#scoreboard td.ok {
  background-color: var(--positive-color);
  text-shadow: 0 0 4px var(--text-shadow-ok), 0 0 10px var(--text-shadow-ok), 0 0 16px var(--text-shadow-ok);
  box-shadow: var(--inset-shadow-ok);
  /*box-shadow: var(--inside-border-shadow);*/
  /*color: white;*/
}

#scoreboard td.ok.inactive {
  background-color: var(--inactive-color);
  color: var(--font-dim-color-solid);
  text-shadow: 0 0 4px var(--text-shadow-inactive), 0 0 10px var(--text-shadow-inactive), 0 0 16px var(--text-shadow-inactive);
  box-shadow: var(--inset-shadow-inactive);
}

#scoreboard td.zero.inactive {
  color: var(--font-dim-color);
}

#scoreboard td.done {
  box-shadow: none !important;
  text-shadow: none !important;
  background-color: transparent !important;
  color: var(--font-dim-color) !important;
  cursor: default;
}

#scoreboard td.last-selected {
  box-shadow: var(--halo-shadow) !important;
}

#scoreboard td.ok.done {
}

#scoreboard td.zero.done {
}

@media only screen and (min-height: 900px) {
  #bottom-wrapper {
    overflow: auto;
  }
}

.hidden {
  display: none !important;
}

.button.inactive, #reroll.inactive {
  background-color: var(--inactive-color);
  color: var(--font-dim-color);
  font-weight: 500;
}

#version {
  color: rgba(0, 0, 0, .4);
  margin-left: var(--half-unit);
}