/*
::-webkit-scrollbar {
  display: none;
}
*/

.play-layer, .play-layer .player {
  position: absolute;
  overflow: hidden;
}

.play-layer .display {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  color: #2e3436;
  text-align: center;
}

.play-layer { height: 100%; width: 100%; top: 0; }

@media screen and (orientation:portrait) {

.play-layer .player {
  height: 50%;
  width: 100%;
  left: 0;
}

.play-layer #player0 { bottom: 0; }
.play-layer #player1 { top:    0; transform: rotate(180deg); transform-style: preserve-3d; }

}

@media screen and (orientation:landscape) {

.play-layer .player {
  height: 100%;
  width: 50%;
  top: 0;
}

.play-layer #player0 { left:  0; }
.play-layer #player1 { right: 0; }

}

/* options layer */

.options-layer {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  text-align: center;
  overflow: hidden;
  background: #2e3436;
  top: 0;
}

div.options {
  position: absolute;
  top: 10%;
  left: 10%;
  height: 80%;
  width: 80%;
}

div.options > div.input > input {
  width: 100%;
  padding: 0.25vmin;
}

div.options > div.input {
  position: absolute;
  top: 0;
  left: 0;
  height: 40%;
  width: 100%;
}

div.options > a.confirm {
  position: absolute;
  top: 80%;
  left: 0;
  width: 100%;
  height: 20%;
}

div.options > div.colors {
  position: absolute;
  top: 20%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, 0);
}

div.colors > a.button {
  display: block;
  float: left;
  border: 0.5em solid #2e3436;
  border-radius: 0.1em;
}

.clear {
  clear: both;
}

@media screen and (orientation:portrait) {
div.colors > a.button {
  width: 10vw;
  height: 10vw;
  margin: 1vw;
}
}

@media screen and (orientation:landscape) {
div.colors > a.button {
  width: 5vw;
  height: 5vw;
  margin: 0.5vw;
}
}

/*a.button:hover { border-color: #d3d7cf !important; }*/

div.colors > a.checked { border-color: #eeeeec; }

a.confirm > span {
  display: block;
  position: absolute;
  text-align: center;
  width: 100%;
  top: 50%;
  transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  color: #d3d7cf;
  border-radius: 0.15em;
}

/*
a.confirm:hover > span {
  color: #eeeeec;
  background: #555753;
}
*/

/* settings button */

a.settings {
  position: absolute;
  top: 0;
  right: 5%;
  width: 8vmin;
  height: 8vmin;
  margin: 2vmin 2vmin;
}

a.settings > div.bar {
  width: 100%;
  height: 25%;
  border-radius: 0.25vmin;
  background: #eeeeec;
  margin-bottom: 12.5%;
}

a.settings       { opacity: 0.3; }
a.settings:hover { opacity: 0.7; }

/* subtle buttons */

.incdamage-trigger, .decdamage-trigger {
  height: 80%;
  top: 0;
}

.incdamage-trigger, .decdamage-trigger, .incpoison-trigger, .decpoison-trigger {
  opacity: 0.5;
}

.incpoison-trigger, .decpoison-trigger {
  height: 25%;
  bottom: 0;
}

.incdamage-trigger, .decdamage-trigger, .incpoison-trigger, .decpoison-trigger {
  position: absolute;
  width: 50%;
}

.incdamage-trigger, .incpoison-trigger { right: 0; }
.decdamage-trigger, .decpoison-trigger { left:  0; }

/* z-indexing */

.play-layer .incdamage-trigger,
.play-layer .decdamage-trigger,
.play-layer .incpoison-trigger,
.play-layer .decpoison-trigger {
  z-index: 1;
}
#go-prev, #go-next         { z-index: 2; }
.play-layer .settings      { z-index: 3; }
.play-layer .options-layer { z-index: 4; }

.lethal { color: #a40000 !important; }