/* Split-flap board styling (see solari.js). Dark tiles, light letters. */
.displayBase { perspective: 900px; -webkit-perspective: 900px; perspective-origin: 50% 50%; }
.displayBase * { transform-style: preserve-3d; -webkit-transform-style: preserve-3d; }
.display { position: relative; margin: 0 auto; }
.segments { list-style: none; margin: 0; padding: 0; display: flex; }
.segment { position: relative; color: #f5f5f7; text-align: center; flex: none; }
.segment div {
  left: 0; top: 0; width: 100%; height: 50%;
  box-shadow: inset 0 0 40px rgba(0,0,0,.35);
}
.segment .front, .segment .flip-front, .segment .flip-back, .segment .back {
  position: absolute; overflow: hidden; background-color: #1d1d1f;
  text-transform: uppercase; font-weight: 900; letter-spacing: -.02em;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.segment .front { border-radius: 6px 6px 0 0; border-bottom: 1px solid rgba(0,0,0,.9); }
.segment .back  { top: 50%; border-radius: 0 0 6px 6px; }
.segment .flip-back { background-color: #111; border-radius: 6px 6px 0 0; transform-origin: 0 50%; }
.segment .flip-front { line-height: 0; border-radius: 0 0 6px 6px; transform: rotateX(135deg) translateY(50%) translateZ(.1px); }