:root {
  --maze-block-size: 1.4rem;
}

#mazecontainer {
  position: relative;
  margin: var(--maze-block-size) auto;
  width: fit-content;
}
#maze {
  position: relative;
  background-color: #a0b0c0;
}
#maze div {
  display: flex;
}
#maze div div {
  position: relative;
  width: var(--maze-block-size);
  height: var(--maze-block-size);
}
#maze div div::after {
  position: absolute;
  left: -3px;
  top: 0px;
  text-align: center;
  text-shadow: 0 0 1px black;
  font-size: calc( var(--maze-block-size) * 1.2 );
  z-index: 10;
}
#maze div div.door.exit::after {
  content: "\effd";
  font-family: "Material Icons Sharp";
  color: #dcdc6c;
  top: -11px !important;
  transition: 0.5s all;
}
#maze div div.door.exit.open::after {
  content: "\eb4f";
  color: #ffc06a;
  animation: exitPulsatingColor 4s infinite;
}
@keyframes exitPulsatingColor {
  0%   { color: #dcdc6c; }
  50%  { color: var(--om-green); }
  100% { color: #dcdc6c; }
}
#maze div div.nubbin::after {
  content: "\1F33C";
}
#maze div.nubbin:nth-of-type(3n)::after {
  content: "\1F344";
}
#maze div.nubbin:nth-of-type(5n)::after {
  content: "\1F33B";
}
#maze div.nubbin:nth-of-type(7n)::after {
  content: "\1F48E";
}
#maze div.nubbin:nth-of-type(13n)::after {
  content: "\1F381";
}
#maze div.hero {
  animation: cardAnimation 5s infinite;
  z-index: 100;
}
#maze div div.hero::after {
  /* https://angel-rs.github.io/css-color-filter-generator/ */
  filter: brightness(0) saturate(100%) invert(16%) sepia(12%) saturate(5293%) hue-rotate(149deg) brightness(90%) contrast(102%);
  width:  0.85em;
  height: 0.85em;
  left: -1px;
  top: -11px;
  animation: heroAnimation 2s infinite;
}
@keyframes heroAnimation {
  0%   { filter: brightness(10%) saturate(100%) invert(16%) sepia(12%) saturate(5293%) hue-rotate(149deg) brightness(100%) contrast(102%); }
  50%  { filter: brightness(0) saturate(100%) invert(16%) sepia(12%) saturate(5293%) hue-rotate(149deg) brightness(90%) contrast(102%); }
  100% { filter: brightness(10%) saturate(100%) invert(16%) sepia(12%) saturate(5293%) hue-rotate(149deg) brightness(100%) contrast(102%); }
}
#maze.cir div.hero::after { content: url(../../../images/shape_cir_white.svg); }
#maze.squ div.hero::after { content: url(../../../images/shape_squ_white.svg); }
#maze.rec div.hero::after { content: url(../../../images/shape_rec_white.svg); }
#maze.tri div.hero::after { content: url(../../../images/shape_tri_white.svg); }
#maze.tra div.hero::after { content: url(../../../images/shape_tra_white.svg); }
#maze.rho div.hero::after { content: url(../../../images/shape_rho_white.svg); }

#maze {
  background-color: #a7c53f;
  border: 1em solid #001818;
  border-spacing: 3px;
}

.mazebackground #maze {
  background-image: radial-gradient(circle at 0% 0%, transparent 50%, rgba(0,0,0,0.1) 50%), radial-gradient(circle at center, rgba(0,0,0,0.1) 50%, transparent 50%), radial-gradient(circle at 100% 100%, transparent 50%, rgba(0,0,0,0.1) 50%), radial-gradient(circle at 0% 100%, transparent 50%, rgba(0,0,0,0.1) 50%), radial-gradient(circle at 100% 0%, transparent 50%, rgba(0,0,0,0.1) 50%);
  background-size: 200% 200%;
  background-position: 50% 50%;
}

#maze.l1 { background-color: var(--om-exhibitionhall-atutazok); }
#maze.l2 { background-color: var(--om-exhibitionhall-otthon); }
#maze.l3 { background-color: var(--om-exhibitionhall-gyermekkor); }
#maze.l4 { background-color: var(--om-exhibitionhall-bekoltozo); }
#maze.l5 { background-color: var(--om-exhibitionhall-sors); }

#maze.face-up div.hero {
}
#maze.face-right div.hero {
}
#maze.face-down div.hero {
}
#maze.face-left div.hero {
}

#maze div div.wall, #maze div div.nubbin.wall, #maze div div.door.exit {
  /* background-color: #454545c0; */
  /* background-image: linear-gradient(45deg, rgba(0,0,0,0.1) 45%, transparent 55%); */
  background-color: #003138b0;
  background-size: var(--maze-block-size) var(--maze-block-size);
  z-index: 1;
}

/*
#maze.squ div div.wall { background-color: #384BA2c0; }
#maze.cir div div.wall { background-color: #EAE9E5c0; }
#maze.tri div div.wall { background-color: #73282Cc0; }
#maze.rec div div.wall { background-color: #471C00c0; }
#maze.tra div div.wall { background-color: #FBBD6Fc0; }
#maze.rho div div.wall { background-color: #9F280Ac0; }
*/

#maze {
  /*
  border-width: var(--maze-block-size);
  border-style: solid;
  border-top-color: #dcdc6c;
  border-left-color: #33A458;
  border-bottom-color: #CA3926;
  border-right-color: #30614D;
  */
}
#maze div div.nubbin.wall::after {
  content: "";
}
#maze div div.sentinel.wall {
  background: transparent;
}
#maze div div.sentinel.wall::after {
  content: "\1F40A";
}
#maze div.sentinel.wall:nth-of-type(3n)::after {
  content: "\1F40D";
}
#maze div div.key::after {
  content: "\e73c";
  font-family: "Material Icons Outlined";
  transform: rotateZ(55deg);
  color: gold;
  text-shadow: 0 0 4px rgb(127, 64, 12), 0 0 4px rgb(127, 64, 12);
  top: -9px !important;
  left: -1px !important;
  font-size: 1.60rem;
}

#maze div div:nth-child(odd) {
  width: var(--maze-block-size);
}
#maze div:nth-child(odd) div {
  height: var(--maze-block-size);
}

#maze.finished::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: rgba(0,0,0,0.4);
  text-align: center;
  text-transform: uppercase;
  font-family: monospace;
  font-size: 5em;
  text-shadow: 2px 2px 2px rgba(0,0,0,0.8);
  color: #fff;
  z-index: 10;
}

#maze_output {
}
#maze_score, #maze_message {
  font-weight: 400;
}
#maze_score {
  white-space: nowrap;
  text-align: center;
}
#maze_score::before {
  content: "Megtalált kulcsok: "
}

#maze_score.has-key::after {
}
#maze_score::after {
  content: " -";
  margin-left: 0.5em;
  letter-spacing: 0.5em;
  vertical-align: bottom;
}
#maze_score.has-key1::after {
  font-family: "Material Icons Outlined";
  content: "\e73c";
}
#maze_score.has-key2::after {
  font-family: "Material Icons Outlined";
  content: "\e73c \e73c";
}
#maze_score.has-key3::after {
  font-family: "Material Icons Outlined";
  content: "\e73c \e73c \e73c";
}
#maze_message {
  text-align: center;
  width: 100%;
}