/* Main plan container */
.plan {
  border: 1px solid gray;
  width: 560px;
  height: 615px;
  display: inline-block;
  margin-left: 4px;
  background-color: #9db79d;
  color: #442f2f;
}

/* Header cell style */
.headcell {
  text-align: center;
  padding-bottom: 15px;
  border-bottom: 1px solid black;
  font-family: cursive;
  margin: 0;
}

/* Chessboard grid line */
.line {
  display: table-cell;
}

/* Board square */
.point {
  width: 70px;
  height: 70px;
  display: table-cell;
  background-color: #dcbda9;
}

/* Chess piece */
.piece {
  width: 66px;
  margin-left: 2px;
  pointer-events: none;
}

/* Alternate square color */
.black {
  background-color: #b87956;
}

/* Container or info block */
.case {
  display: inline-block;
  border: 1px solid gray;
  background-color: #9db79d;
  color: #442f2f;
}

/* Different point type blocks */
.pointW,
.pointB {
  width: 70px;
  height: 70px;
  background-color: #cac4c1;
  display: table-caption;
}

/* Selection highlights */
.select {
  outline: 2px solid #3a3a4c;
}

.kill {
  outline: 2px solid #791b1b;
}

.me {
  outline: 2px solid #204220;
}

/* Play area (game board) */
.play {
  width: 856px;
  height: 615px;
  border: 1px solid black;
  background-color: #72c175;
  position: absolute;
  margin-top: -617px;
}

/* Option panel styles */
.option {
  margin-left: 320px;
  margin-top: 129px;
}

.option h1 {
  color: #dc4e4e;
  font-family: cursive;
}

.option p {
  text-align: center;
  width: 255px;
  color: brown;
  font-family: cursive;
}

/* Selection block */
.chose {
  margin-left: 57px;
}

/* Option square */
.pointsOp {
  width: 70px;
  height: 70px;
  display: inline-block;
}

/* Button styling */
.btn,
.btnR {
  border: 1px solid white;
  width: 100px;
  height: 26px;
  color: #48486b;
  font-family: cursive;
  background: none;
}

.btn {
  margin-left: 68px;
  margin-top: 18px;
}

.btnR {
  position: absolute;
  margin-left: 465px;
  margin-top: -39px;
  width: 88px;
  height: 25px;
}

/* Hover effect for buttons */
.btn:hover,
.btnR:hover {
  color: blue;
  cursor: pointer;
}

/* Winner popup */
.winner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #4d5898;
  width: 235px;
  height: 160px;
  border: 1px solid black;
  text-align: center;
  padding: 10px;
  box-sizing: border-box;
}

.winner p {
  font-family: cursive;
  color: white;
}

/* Title text */
.title {
  text-align: center;
  color: yellowgreen;
  margin: 10px 0 3px;
  font-size: 24px;
}