/*....................................................................................................................*/

html
{
  width: 100%;
  height: 100%;
  background: #000;
  font-family: sans-serif;
  font-weight: bold;
  cursor: default;
  user-select: none;
  -moz-user-select: none;
}

body
{
  width: var(--bodyW);
  height: var(--bodyH);
  margin: 0;
}

/*....................................................................................................................*/

.cnt /* center */
{
  display: flex;
  align-items: center;
  justify-content: center;
}

.itf /* interface */
{
  float: left;
  border: var(--borderDouble) solid var(--white);
  box-sizing: border-box;
}

.bul /* bulb */
{
  width: 5%;
  height: var(--cellSize);
  background: #AAA;
  border-radius: 50%;
  position: relative;
  cursor: help;
}

.tra{transition: all 0.3s} /* transition */

/*....................................................................................................................*/

.yes, .no
{
  width: calc(var(--unit) * 150);
  height: calc(var(--unit) * 150);
  background-size: 100%;
  border-radius: 50%;
  cursor: pointer;
}

.yes{background-image: url("../icons/yes.png"); opacity: 0.7}
.no{background-image: url("../icons/no.png"); opacity: 0.7}
.yes:hover{opacity: 1}
.no:hover{opacity: 1}

/*....................................................................................................................*/

.goal
{
  width: 100%;
  height: calc(var(--cellSize) * 8);
  font-size: calc(var(--boardW) / 40);
  color: rgba(255, 255, 255, 0.2);
  flex-direction: column;
  box-sizing: border-box;
  font-weight: bold;
  box-shadow:

    0 0 0 var(--borderHalf) var(--white),
    0 0 0 var(--borderFull) rgba(0, 0, 0, 0.1) inset;
}

.goalBox
{
  width: var(--cellSize);
  height: calc(var(--cellSize) * 10);
}

/*....................................................................................................................*/

.utl
{
  width: 5%;
  height: var(--cellSize);
  color: var(--white);
  background: #986;
  cursor: pointer;
  border-radius: calc(var(--cellSize) / 2);
  font-size: calc(var(--boardW) / 60);
  transition: background 0.3s;
}

.utl:hover{background: #764}

img
{
  width: calc(var(--unit) * 60);
  height: calc(var(--unit) * 60);
  opacity: 0.5;
}

/*....................................................................................................................*/

.bnc /* bench */
{
  width: 5%;
  height: calc(100% / 14);
  background: #AAA;
  border-radius: 50%;
}

.bncFil /* bench fill */
{
  fill: rgba(255, 255, 255, 0.5);
  stroke: #AAA;
}

/*....................................................................................................................*/

.cll /* cell */
{
  width: 5%;
  height: calc(100% / 14);
  color: rgba(255, 255, 255, 0.2);
  float: left;
  border: 0 var(--white) solid;
  box-shadow: 0 0 0 var(--borderFull) rgba(0, 0, 0, 0.1) inset;
  box-sizing: border-box;
}

.cllTxt /* cell text */
{
  font-size: calc(var(--boardW) / 70);
  font-weight: bold;
}

/*....................................................................................................................*/
/* cell colors */

.redLgt{background: #800} /* red light */
.redDrk{background: #700} /* red dark */
.grnLgt{background: #580} /* green light */
.grnDrk{background: #570} /* green dark */
.bluLgt{background: #480080} /* blue light */
.bluDrk{background: #400068} /* blue dark */

/*....................................................................................................................*/

.slc /* select */
{
  border-color: #F80;
  box-sizing: border-box;
  animation: select 0.5s 1 0s ease-in forwards;
  box-shadow:

    0 0 var(--borderDouble) 0 #F40,
    0 0 var(--borderDouble) 0 #F40 inset;
}

@keyframes select
{
  30%{border-width: calc(var(--borderDouble) * 2)}
  70%{border-width: var(--borderFull)}
  100%{border-width: var(--borderDouble)}
}

/*....................................................................................................................*/

.glw{animation: glow 1.5s infinite 0s linear} /* glow */

@keyframes glow
{
  0%{fill: rgba(255, 255, 255, 0.4)}
  50%{fill: var(--white); color: var(--white); text-shadow: 0 0 var(--borderDouble) var(--white)}
  100%{fill: rgba(255, 255, 255, 0.4)}
}

/*....................................................................................................................*/

.pat{animation: path 4s infinite 0s ease-in} /* path */

@keyframes path
{
  0%{border: var(--borderDouble) solid rgba(0, 0, 0, 0.5); border-radius: 0}
  5%{border: calc(var(--borderDouble) * 2) solid var(--white); border-radius: 50%}
  10%{border: calc(var(--borderDouble) * 3) solid var(--white); border-radius: 50%}
  15%{border: calc(var(--borderDouble) * 2) solid var(--white); border-radius: 50%}
  20%{border: var(--borderDouble) solid rgba(0, 0, 0, 0.5); border-radius: 0}
  100%{border: var(--borderDouble) solid rgba(0, 0, 0, 0.5)}
}