@font-face {
  font-family: "Font"; 
  src: url("../shared/KreativeSquare.ttf") format("truetype");
}

:root {
  --you:#ECE;
  --rake:#DCD;
  --void:#987;
  --dirt:#654;
  --thing:#DDB;
  --solid:#321;
  --solidthing:#776;
  --semisolid:#432;
  --pushsolid:#432;
  --garb:#888;
  --leaf1:#6F5;
  --leaf2:#BE5;
  --leaf3:#D85;
  --leaf4:#E65;
  --fire2:#F62;
}

body { 
  font-family: "Font", monospace; 
  margin: auto; 
  width: fit-content;
  text-align: center;
  background: #333;
}

#main {
  background: #999;
  padding: 1ch;
  margin: 1ch;
  border: .25ch solid #000;
}
#ui {
  width:  fit-content;
  text-align: left;
  margin:  auto;
}

#level {
  white-space:pre-wrap; 
  font-size: 24px;
  border: 2px solid black;
  padding: 5vh;
  display:flex;
  flex-wrap: wrap;
  width:fit-content;

  background-color:var(--void);
  color:var(--thing);
}

#undo {
  float:left;
}

#reset {
  float:right;
}

#select {
  width:50%;
  margin: auto;
  padding: 2vh;
}

#leveldesc {
  width: 40em;
  margin:auto;
}

button {
  font-family: "Font", monospace;
  border: 1px solid black;
  display:inline;
}

textarea {
  font-family: "Font", monospace;
}

#next {
  margin-bottom: 1em;
}

#edit, #editmoves  {
  width:fit-content;
  margin:auto ;
}

#editbuts {
  display: block; margin: auto;
  height:100%;
  padding-bottom:.5vh;
}

#rawmvs {
float:clear;
height:1.25em;
}
#movesbut {
  float:right;
}

/* */

.tile.end {
  margin-left: auto;
  width:100%;
  padding:0;
  height:0ex;
}
.complete .tile {
  opacity: 25%;
}

.tile {
  display:inline-block;
  width: 1ch;
  height: 1ch;
}
[data-tile] {
  position:absolute;
  padding: 0;
  margin: 0;
  width:fit-content;
  height:fit-content;
  background: var(--dirt);
  z-index:1;
}

[data-tile='.'].occluded, [data-tile=','].occluded {
  color: var(--dirt);
}

[data-leaf=true]{
  z-index:2;
}

[data-pass=false] {
  background: var(--solid);
  color: var(--solidthing);
}
[data-pass=false][data-poke=true] {
  background: var(--semisolid);
}
[data-pass=false][data-tile=" "] {
  background: none;
}
.tile { }
.base { background: var(--dirt); position:absolute }

[data-tile='░'] { color: var(--leaf1); }
[data-tile='▒'] { color: var(--leaf2); }
[data-tile='▓'] { color: var(--leaf3); background-color: var(--dirt)}
[data-tile='█'] { color: var(--leaf4); }
.player, .rake {background:none; z-index:2;}
.player { color: var(--you) }
.rake { color: var(--rake) }
[data-tile='▲'] { color: var(--fire2); }
[data-tile='●'] {background:var(--pushsolid); color:var(--garb); z-index:2}

[data-leaf=false].ghost {
  animation: .2s 1 ghost;
  color:var(--dirt);
}

@keyframes ghost { to { color:var(--dirt); } }
@keyframes appear { from { color:var(--dirt); } }

.appear { animation: .2s 1 appear; }

@keyframes move { 0% { offset-distance:0; } 100% { offset-distance:100%; } }
@keyframes clockwise { 0% { transform: rotate(-90deg); } 100% { transform: rotate(0deg); } }
@keyframes counterclock { 0% { transform: rotate(90deg); } 100% { transform: rotate(0deg); } }

.move-W, .move-E, .move-N, .move-S { animation: move .2s 1 forwards ease-in-out; }
.move-W.ghost, .move-E.ghost, .move-N.ghost, .move-S.ghost { animation: move .2s Infinite forwards ease-in-out, .2s 1 ghost; }
.blocked-W, .blocked-E, .blocked-N, .blocked-S { animation: move .4s 1 forwards ease-in-out; }
.rake-W, .rake-E, .rake-N, .rake-S { animation: move .3s 1 forwards ease-in; }
.backrake { animation: move .2s 1 forwards ease-out; }

.rake-e { animation: move .3s 1 forwards ease-out, clockwise .3s 1 forwards; }
.rake-q { animation: move .3s 1 forwards ease-out, counterclock .3s 1 forwards; }

.move-W, .rake-W { offset: path('m  36  12 h -23') 1ch 0deg;}
.move-E, .rake-E { offset: path('m -10  12 h  23') 1ch 0deg;}
.move-N, .rake-N { offset: path('m  13  36 v -23') 1ch 0deg;}
.move-S, .rake-S { offset: path('m  13 -10 v  23') 1ch 0deg;}

.rake-e.rake-W { offset: path('m -12  36 q 0  0,  24 -24') 1em 0deg; }
.rake-e.rake-N { offset: path('m -12 -12 q 0  0,  24  24') 1em 0deg; }
.rake-e.rake-E { offset: path('m  36 -12 q 0 18, -24  24') 1em 0deg; }
.rake-e.rake-S { offset: path('m  36  36 q 0  0, -24 -24') 1em 0deg; }
.rake-q.rake-S { offset: path('m -12  36 q 0  0,  24 -24') 1em 0deg; }
.rake-q.rake-W { offset: path('m -12 -12 q 0  0,  24  24') 1em 0deg; }
.rake-q.rake-N { offset: path('m  36 -12 q 0 18, -24  24') 1em 0deg; }
.rake-q.rake-E { offset: path('m  36  36 q 0  0, -24 -24') 1em 0deg; }

.blocked-W { offset: path('m 13 13 h -4 h  16 h -16 h  16 h -16 h  4') 1em 0deg;}
.blocked-E { offset: path('m 13 13 h  4 h -16 h  16 h -16 h  16 h -4') 1em 0deg;}
.blocked-N { offset: path('m 13 13 v -4 v  16 v -16 v  16 v -16 v  4') 1em 0deg;}
.blocked-S { offset: path('m 13 13 v  4 v -16 v  16 v -16 v  16 v -4') 1em 0deg;}