html,body{
  margin:0;height:100%;background:#1a1320;overflow:hidden;
  font-family:'Courier New',monospace;color:#f4e9c1;
  -webkit-user-select:none;user-select:none;
}
#wrap{
  position:fixed;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
}
#hud{
  font-size:14px;letter-spacing:1px;padding:6px 10px;
  text-shadow:2px 2px 0 #000;
}
#mute{cursor:pointer;margin-left:8px;}
canvas{
  image-rendering:pixelated;image-rendering:crisp-edges;
  background:#000;touch-action:none;
  box-shadow:0 0 0 4px #2a1f33, 0 0 30px #000;
}
#overlay{
  position:fixed;inset:0;display:none;align-items:center;justify-content:center;
  background:rgba(10,5,15,.78);flex-direction:column;text-align:center;padding:20px;
  z-index:10;
}
#overlay.on{display:flex;}
#overlay h1{
  font-size:28px;margin:0 0 10px;color:#ffd34d;
  text-shadow:3px 3px 0 #000;
}
#overlay p{margin:6px 0;font-size:16px;max-width:480px;line-height:1.4;}
#overlay .legend{opacity:.75;font-size:13px;}
#overlay button{
  margin-top:18px;padding:10px 22px;font-family:inherit;font-size:16px;
  background:#ffd34d;color:#1a1320;border:none;cursor:pointer;letter-spacing:1px;
  box-shadow:4px 4px 0 #000;
}
#overlay button:active{
  transform:translate(2px,2px);box-shadow:2px 2px 0 #000;
}