@font-face {
  font-family: 'LilitaOne';
  src: url('assets/fonts/lilita-one.woff2') format('woff2');
  font-display: block;
}
html, body {
  margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden;
  background: #8e529a; touch-action: none; -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent; overscroll-behavior: none;
}
body { position: fixed; inset: 0; }
#game { position: absolute; left: 0; top: 0; display: block; touch-action: none; }
#ui {
  position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; pointer-events: none;
  font-family: 'LilitaOne', 'Arial Black', 'Arial Rounded MT Bold', Arial, sans-serif; color: #fff;
}
#ui * { box-sizing: border-box; }
.layer { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.n { position: absolute; }
.hit { pointer-events: auto; cursor: pointer; }
.block { pointer-events: auto; }
.pic { background-repeat: no-repeat; background-position: center; background-size: contain; }
.fillpic { background-repeat: no-repeat; background-position: center; background-size: 100% 100%; }
.cover { background-repeat: no-repeat; background-position: center; background-size: cover; }
.txt {
  display: flex; align-items: center; justify-content: center; text-align: center; white-space: nowrap;
  line-height: 1; paint-order: stroke fill; letter-spacing: 0.01em; overflow: visible;
}
.txt.wrap { white-space: pre-line; line-height: 1.05; }
.txt.left { justify-content: flex-start; text-align: left; }
.round { border-radius: 50%; }
.hidden { display: none !important; }
.dis { filter: grayscale(0.6) brightness(0.8); opacity: 0.75; }
#loadbar { position: absolute; left: 20%; width: 60%; height: 10px; bottom: 9%; border-radius: 6px; background: rgba(0,0,0,0.25); overflow: hidden; }
#loadbar > div { height: 100%; width: 0; background: #ffd21e; border-radius: 6px; transition: width 0.15s; }