/* TODO: variable-ize colors */

@font-face {
  font-family: 'Conv_Consolas';
  src: url('font/Consolas.eot');
  src: local('☺'), url('font/Consolas.woff') format('woff'), url('font/Consolas.ttf') format('truetype'), url('font/Consolas.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

* {
  margin:0px;
  padding:0px;
  box-sizing: border-box;
}


html {
  width:100%;
  height: 100%;
}

body {
  background: #1f1f1f;
  
  margin: 0px;
  padding: 0px;
  color: #cccccc;
  font-family: Consolas, Conv_Consolas, monaco, monospace;
  font-size: min(1.7vw, 1.5vh, 22px);
  line-height: 1.6em;
  letter-spacing: 0.12em;
  overflow: auto;
  
  width:100%;
  height: 100%;
  /*
  min-width: 640px;
  */
  white-space: normal;
  vertical-align: top;
}


img {
  border: none;
  vertical-align: top;
}

input[type=button]{
  cursor: pointer;
}

table {
  margin-left: auto;
  margin-right: auto;
  
  border-spacing: 0px;
  border: 0px;
  
}

th, td {
  padding: 0px;
  text-align: center;
}


a {
  color: inherit;
  text-decoration:none;
  outline: none;
  font-weight: bold;
}

/* TODO: use media query, for mobile make a fade out animation on click */
a:hover, .btn:hover{
  color: #ffbb33; /* ffffff */
}

a:hover{
  text-decoration:underline; 
}

.btn:hover{
  text-decoration:none; 
}

.btn{
  cursor: pointer;
  -webkit-user-select: none;
	-moz-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -moz-tap-highlight-color: transparent;
}

.disabled.btn, .disabled.btn:hover{
  color:inherit;
  cursor:unset;
  opacity: 0.3;
}

#main a{
  text-decoration:underline; 
}

.clearFix:after {
  content: "";
  display: table;
  clear: both;
}

.vCenterA {
    display: table;
    height: 100%;
}

.vCenterB {
    display: table-cell;
    vertical-align: middle;
}

.bold{
  font-weight: bold;
}

.fine_print{
  font-size: 0.66em;
}

.hidden{
  display: none !important;
}

.no_wrap{
  white-space: nowrap;
}

.break_block{
  display: inline-block;
}

.centered{
  display: table;
  margin-left: auto;
  margin-right: auto;
}

/* --- */ 

#containAll{
  --staticTextSize: 32px; /* 22 */
  min-width: 100%;
	width: 100%;
	
	overflow:hidden;
	/*
	min-height: 100%;
	*/
	height: 100%;
	position: relative;
}

#boardContain{
  position: absolute;
  left:0;
  top:0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  perspective: 5000px;
  touch-action: none;
}

#board{
	--size: 35em; /*28em;*/
  --half-size: calc(var(--size) * 0.5);
  width: var(--size);
  height: var(--size);
  position: relative;
  transform: rotateZ(0deg) rotateX(-35deg) rotateY(-45deg);
  transform-style: preserve-3d;
}

/* --- */

.panel, .mazeLayer, .canvasLayer{
  position: absolute;
  width: var(--size);
  height: var(--size);
}

.mazeLayer{
  display:flex;
  flex-direction: column;
}

#yPanel{
  transform: rotateX(90deg) rotateZ(90deg) translate3d(0, 0, var(--half-size))
}

#zPanel{
  transform: translate3d(0, 0, var(--half-size));
}

#xPanel{
  transform: rotateY(90deg) rotateZ(-90deg) translate3d(0, 0, var(--half-size));
}

#beaconPanel{
  transform: rotateY(45deg) rotateX(35deg) translate3d(-6em, -24em, var(--size));
}

#beaconPanel, #canvas-beacon-fg {
  width: calc(var(--size) * 1.5);
  height: calc(var(--size) * 1.5);
}

.bottomNotch, .leftNotch{
  --notchRadius: 40%;
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.bottomNotch{
  top: 0;
  right: -1px;
}

.leftNotch{
  right: 0;
  top: -1px;
}

.notchMark {
  width: 100%;
  height: 100%;
}

.leftDirMark, .rightDirMark {
  width: 50%;
  height: 50%;
  position: absolute;
  background: none;
  transition: border 0.4s;
}

/* leftNotch */

.leftNotch .leftDirMark, .leftNotch .rightDirMark {
  border-top: solid 3px #ffffff;
}

.leftNotch .leftDirMark {
  left: 1px;
  top: 0px;
  border-top-right-radius: var(--notchRadius);
}

.leftNotch .rightDirMark {
  right: 1px;
  top: 0px;
  border-top-left-radius: var(--notchRadius);
}

.leftNotch .maskMark {
  position: absolute;
  width: 25%;
  height: 4px;
  background-color: #1f1f1f;
  top: 0;
  left: 37.5%;
}

/* bottom notch */

.bottomNotch .leftDirMark, .bottomNotch .rightDirMark {
  border-right: solid 3px #ffffff;
}

.bottomNotch .leftDirMark {
  right: 0px;
  bottom: 1px;
  border-top-right-radius: var(--notchRadius);
}

.bottomNotch .rightDirMark {
  right: 0px;
  top: 1px;
  border-bottom-right-radius: var(--notchRadius);
}

.bottomNotch .maskMark {
  position: absolute;
  height: 25%;
  width: 4px;
  background-color: #1f1f1f;
  top: 37.5%;
  right: 0;
}

/* highlight intended move direction */
.rightMove #yPanel .bottomNotch .rightDirMark,
.rightMove #zPanel .leftNotch .rightDirMark,
.leftMove #yPanel .bottomNotch .leftDirMark,
.leftMove #zPanel .leftNotch .leftDirMark,

.upMove #xPanel .leftNotch .rightDirMark,
.upMove #zPanel .bottomNotch .rightDirMark,
.downMove #xPanel .leftNotch .leftDirMark,
.downMove #zPanel .bottomNotch .leftDirMark,

.forwardMove #xPanel .bottomNotch .rightDirMark,
.forwardMove #yPanel .leftNotch .rightDirMark,
.backMove #xPanel .bottomNotch .leftDirMark,
.backMove #yPanel .leftNotch .leftDirMark
{
  border-color: #ffbb33;
  border-width: calc(3px + 0.2em);
}

/* highlight the notch when the marker runs into it */
.xRedNotch #zPanel .bottomNotch .rightDirMark,
.xRedNotch #zPanel .bottomNotch .leftDirMark,
.xRedNotch #yPanel .leftNotch .rightDirMark,
.xRedNotch #yPanel .leftNotch .leftDirMark,

.yRedNotch #xPanel .bottomNotch .rightDirMark,
.yRedNotch #xPanel .bottomNotch .leftDirMark,
.yRedNotch #zPanel .leftNotch .rightDirMark,
.yRedNotch #zPanel .leftNotch .leftDirMark,

.zRedNotch #yPanel .bottomNotch .rightDirMark,
.zRedNotch #yPanel .bottomNotch .leftDirMark,
.zRedNotch #xPanel .leftNotch .rightDirMark,
.zRedNotch #xPanel .leftNotch .leftDirMark
{
  border-color: #bb0000;
  transition: border-color 0.0s;
}

/* - */

.row{
  display: flex;
  box-sizing: border-box;
  flex-grow: 1;
  flex-direction: row;
}

.cell{
  --wall-thickness: 2px;
  box-sizing: border-box;
  flex-grow: 1;
  position: relative;
}

.cell.bTop{
  border-top: solid var(--wall-thickness) #cccccc;
}

.cell.bRight{
  border-right: solid var(--wall-thickness) #cccccc;
}

.wallT, .wallR, .wallB, .wallL {
  position: absolute;
  background-color: #cccccc;
  transition: background-color 0.4s, width 0.4s, height 0.4s;
  display: none;
}

.wallIs {
  display: block;
}

.wallT {
  width: 100%;
  height: var(--wall-thickness);
  top: 0;
  left: 0;
}

.wallR {
  width: var(--wall-thickness);
  height: 100%;
  top: 0;
  right: 0;
}

.wallB {
  width: 100%;
  height: var(--wall-thickness);
  bottom: 0;
  left: 0;
}

.wallL {
  width: var(--wall-thickness);
  height: 100%;
  top: 0;
  left: 0;
}

.wallT.redWall, .wallB.redWall {
  height: 7px;
}

.wallR.redWall, .wallL.redWall {
  width: 7px;
}

.wallT.redWall, .wallR.redWall, .wallB.redWall, .wallL.redWall {
  background-color: #bb0000;
  transition: background-color 0.0s, width 0.0s, height 0.0s;
}

.edgeWall {
  background-color: #ffffff;
  display: block;
}

.goal{
  width: 75%;
  height: 75%;
  border: solid var(--wall-thickness) #cccccc;
  box-sizing: border-box;
  border-radius: 100%;
  position: absolute;
  left: 12.5%;
  top: 12.5%;
}

.playerMark{
  width: 75%;
  height: 75%;
  border: solid var(--wall-thickness) #ffffff;
  background-color: #ffffff;
  box-sizing: border-box;
  border-radius: 100%;
  position: absolute;
  left: 12.5%;
  top: 12.5%;
  transition: background-color 0.4s, border 0.4s;
}

.atGoal .playerMark{
  border: solid var(--wall-thickness) #ffbb33; /*66cc44*/
  background-color: #ffbb33;
}

.redWall .playerMark{
  border: solid calc(var(--wall-thickness) * 3) #bb0000; /*66cc44*/
  /*background-color: #bb0000;*/
  transition: background-color 0.0s, border 0.0s;
}

.redText {
  color: #bb0000;
}

.markContain, .notchContain{
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  bottom: 0;
}

.markContain{
  z-index: 110;
}

.notchContain{
  z-index: 100;
}

.torchMark .markContain{
  display: none;
}

/* --- menu etc --- */

#menuContain{
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  /*font-size: min(1.0em, 18px);*/
}

#menuContain, #debug, #loadingScreen, .textSize{
  font-size: var(--staticTextSize);
  line-height: 1.6em;
  letter-spacing: 0.12em;
}

#menu{
  position: absolute;
  top: 0;
  left: 0;
  padding: 0em 2.2em 1em 1em;
  line-height: 3em;
  background-color: #1f1f1fee;
  border: solid 1px #333333;
  border-top: none;
  border-left: none;
  width: max-content;
  max-width: 96vw;
}

#menu.closed{
  bottom: -2em;
  right: -2.7em;
  top:unset;
  left: unset;
}

.larger{
  font-size: 1.5em;
  vertical-align: middle;
}

#menuOpen{
  display: none;
}

#menu.closed #menuClose{
  display: none;
}

#menu.closed #menuOpen{
  display: block;
}

.menuCornerBtn{
  position: absolute;
  right: 0;
  bottom: 0;
  line-height: 1.2em;
  padding-right: 0.25em;
  padding-bottom: 0.25em;
}

#debug {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 1em;
}

#loadingScreen{
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  text-align: center;
  background-color: #000000cc;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#loadingContain{
  background: #000000;
  border: solid 1px #cccccc;
  width: 256px;
  height: 256px;
  border-radius: 128px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* --- link copy --- */


/*.btnShare {}*/

.btnShareSuccess {
  color: #ffbb33;
}

/*.btnShareFail {}*/

@keyframes flashShow {
  0% {
    opacity: 100%;
    display: unset;
  }
  75% {
    opacity: 100%;
    display: unset;
  }
  99% {
    opacity: 0%;
    display: none;
  }
  100% {
    opacity: 0%;
    display: none;
  }
}

.shareMenuItem.showBtn .btnShareFail, 
.shareMenuItem.showBtn .btnShareSuccess {
  display:none;
}

.shareMenuItem.flashSuccess .btnShare,
.shareMenuItem.flashSuccess .btnShareFail {
  display: none;
}

.shareMenuItem.flashSuccess .btnShareSuccess {
  animation: flashShow 2s forwards;
}

.shareMenuItem.flashFail .btnShare,
.shareMenuItem.flashFail .btnShareSuccess {
  display: none;
}

.shareMenuItem.flashFail .btnShareFail {
  animation: flashShow 2s forwards;
}

/* --- how to --- */

.initHidden {
  display: none !important;
}

@keyframes fadeToHidden {
  0% {
    opacity: 100%;
  }
  99% {
    opacity: 0%;
    display: none;
  }
  100% {
    opacity: 0%;
    display: none;
  }
}

.overlay {
  background: #1f1f1fee;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.fadeToHidden {
  animation: fadeToHidden 0.5s forwards;
}

.overlayContent {
  position: relative;
  width: 100%;
  height: 100%;
  padding: var(--staticTextSize);
  padding-top: calc(var(--staticTextSize) * 2.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

}

#howtoPages {
  flex: 1 1;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.howtoPg {
  position: absolute;
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
}

#howToScroll {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  overflow-x: visible;
}

.animatedScroll {
  transition: left 0.5s cubic-bezier(0, 0, 0.1, 1.0);
}

#howtoPg1 {
  left: 0%;
}

#howtoPg2 {
  left: 100%;
}

#howtoPg3 {
  left: 200%;
}

#howtoPg4 {
  left: 300%;
}

#howtoMenu {
  display: flex;
  z-index: 10;
}

.howtoImg {
  width: 36em;
}

.howtoCornerBtn{
  position: absolute;
  right: 0;
  top: 0;
  line-height: 1.2em;
  padding-right: 0.25em;
  padding-top: 0.25em;
}

/* - portrait layout - */
.howtoPg {
  flex-direction: column;
}

.howtoImgBlock, .howtoTextBlock {
  flex: 1 1;
  padding: var(--staticTextSize);
  display: flex;
  justify-content: center;
}

.howtoImgBlock {
  align-items: end;
}

.howtoTextBlock {
  align-items: start;
}

/* - landscape layout - */

@media (min-aspect-ratio: 1/1) {
  .howtoPg {
    flex-direction: row;
  }
}

/* - new maze - */

#newMazeOverlay {
  background: none;
}

#newMaze {
  background: #1f1f1fee;
  position:absolute;
  left:0;
  right:0;
  bottom:0;
}

#newMazeContent {
  padding: 1em 2.2em 1em 2.2em;
  border-top: solid 1px #333333;
  text-align: center;
}