*{
  box-sizing:border-box;
  margin:0;
  padding:0;
  image-rendering:pixelated;
}

html,body{
  width:100%;
  height:100%;
  overflow:hidden;
  background:#09100a;
  font-family:Verdana,sans-serif;
  color:#d6ffd6;
}

canvas{
  display:block;
}

#bgFx{
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.12;
  z-index: 1;
}

#ui{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index: 2;
}

.window{
  position:absolute;
  pointer-events:auto;
  width:320px;
  background:#0f170f;
  border:3px solid #7cff7c;
  box-shadow:
    0 0 0 3px #0a0f0a,
    0 0 30px rgba(124,255,124,.15);
  border-radius:18px;
  overflow:hidden;
}

.titlebar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px;
  background:linear-gradient(90deg,#69ff69,#2f5f2f);
  color:#071007;
  font-weight:bold;
  font-size:12px;
}

.badge{
  background:#071007;
  color:#a8ffa8;
  padding:4px 8px;
  border-radius:999px;
  font-size:10px;
}

textarea{
  width:calc(100% - 20px);
  margin:10px;
  min-height:150px;
  resize:none;
  border:none;
  outline:none;
  background:#0a120a;
  color:#98ff98;
  border:2px solid #3f913f;
  border-radius:10px;
  padding:10px;
  font-family: monospace;
}

textarea:focus {
  border-color: #7cff7c;
  box-shadow: 0 0 8px rgba(124,255,124,0.3);
}

button{
  border:none;
  background:#7cff7c;
  color:#071007;
  padding:10px;
  border-radius:10px;
  cursor:pointer;
  font-weight:bold;
  flex:1;
}

button:hover{
  filter:brightness(1.1);
}

.row{
  display:flex;
  gap:10px;
  padding:10px;
}

.journal{
  left:20px;
  top:20px;
}

.music{
  right:20px;
  top:20px;
}

.spriteMaker{
  left:20px;
  bottom:20px;
  padding-bottom:12px;
}

.screen{
  margin:12px;
  padding:12px;
  border:2px solid #3f913f;
  border-radius:12px;
  background:#0b110b;
}

.small{
  font-size:11px;
  opacity:.7;
  margin-bottom:6px;
}

.tiny{
  font-size:11px;
  opacity:.7;
  padding:0 12px;
  line-height:1.5;
}

#trackTitle{
  font-weight:bold;
  margin-bottom:4px;
}

#previewCanvas{
  width:160px;
  height:160px;
  margin:12px auto;
  display: block;
  border:2px solid #3f913f;
  background:#081008;
  border-radius:12px;
}

.hoverPlayer{
  position:absolute;
  left:50%;
  bottom:40px;
  transform:translateX(-50%);
  background:rgba(10,20,10,.9);
  border:2px solid #7cff7c;
  border-radius:14px;
  padding:12px;
  min-width:260px;
  pointer-events:none;
  opacity:0;
  transition:.15s;
}

.hoverPlayer.show{
  opacity:1;
}

.hoverLabel{
  font-size:10px;
  opacity:.7;
  margin-bottom:6px;
}

@media(max-width:800px){
  .window{
    width:calc(100vw - 20px);
    position: static;
    margin: 10px auto;
  }
  #ui {
    position: absolute;
    overflow-y: auto;
    pointer-events: auto;
  }
  .window pointer-events:auto;
}