/* Tap Sonic web shell. The stage uses the original 533x320 dp layout space
   (480x320 game area centred with 26 dp side margins). */
:root {
  --bg: #000;
  --text: #fff;
  --dim: #999;
  --accent: #ffcc00;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: var(--bg); color: var(--text);
  font-family: "Roboto", "Segoe UI", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none; touch-action: manipulation;
}
#stage {
  position: absolute; left: 50%; top: 50%;
  width: 533px; height: 320px;
  transform-origin: 0 0;
  overflow: hidden;
  background: #000;
}
.screen { position: absolute; inset: 0; }
.abs { position: absolute; display: block; }
img.abs { pointer-events: none; }
.btn { position: absolute; cursor: pointer; background-size: 100% 100%; background-repeat: no-repeat; }
.btn.disabled { filter: grayscale(1) brightness(.55); cursor: default; }
.txt { position: absolute; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.15; }
/* above the (empty) ingame .screen, which would otherwise take every touch */
canvas#game { position: absolute; left: 26px; top: 0; width: 480px; height: 320px; display: block; z-index: 5; touch-action: none; }

/* fullscreen button in the right 26 dp margin of the stage */
.hud-btn {
  position: absolute; top: 4px; width: 24px; height: 24px; padding: 3px; z-index: 40;
  background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.35); border-radius: 5px; cursor: pointer;
}
.hud-btn svg { display: block; }
.fs-btn { right: 1px; }
#rotate {
  display: none; position: fixed; inset: 0; z-index: 100; background: #000; color: #fff;
  flex-direction: column; align-items: center; justify-content: center; gap: 12px; font-size: 18px; text-align: center;
}
#rotate span { font-size: 54px; }
#version { position: fixed; left: max(8px, env(safe-area-inset-left)); bottom: max(6px, env(safe-area-inset-bottom));
  z-index: 60; pointer-events: none; font: 12px system-ui, sans-serif; letter-spacing: 0.5px; color: rgba(255, 255, 255, 0.55);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9); }
@media (orientation: portrait) and (pointer: coarse) { #rotate { display: flex; } }

/* song list */
.list {
  position: absolute; left: 153px; top: 57px; width: 353px; height: 211px; touch-action: pan-y;
  overflow-y: auto; overflow-x: hidden; scrollbar-width: none;
}
.list::-webkit-scrollbar { display: none; }
.row { position: relative; width: 353px; height: 54px; cursor: pointer; }
.row .bgimg { position: absolute; inset: 0; width: 353px; height: 54px; }
.row .album { position: absolute; left: 17px; top: 9px; width: 42px; height: 42px; object-fit: cover; background: #222; }
.row .t { left: 73px; top: 7px; width: 215px; font-size: 14px; color: #fff; }
.row .a { left: 73px; top: 25px; width: 215px; font-size: 10px; color: #999; }
.row .lv { left: 73px; top: 38px; font-size: 9px; color: #ffcc00; }
.row .rank { position: absolute; left: 319px; top: 9px; width: 31px; height: 33px; }
.row.sel .bgimg { filter: brightness(1.35) hue-rotate(-10deg); }
.filter {
  position: absolute; left: 290px; top: 43px; width: 214px; height: 14px; font-size: 10px;
  background: rgba(0,0,0,.55); color: #fff; border: 1px solid #555; padding: 0 4px; outline: none;
}

.toast {
  position: absolute; left: 50%; top: 150px; transform: translateX(-50%);
  background: rgba(0,0,0,.85); border: 1px solid #666; padding: 6px 12px; font-size: 12px;
  border-radius: 4px; pointer-events: none; transition: opacity .3s; z-index: 50;
}
.popup-shade { position: absolute; inset: 0; background: rgba(0,0,0,.6); z-index: 20; }
.blink { animation: blink 1s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }
.gauge { position: absolute; height: 7px; background-size: 160px 7px; background-repeat: no-repeat; }

.settings {
  position: absolute; left: 96px; top: 50px; width: 340px; height: 220px; z-index: 30;
  background: #111; border: 1px solid #555; border-radius: 6px; padding: 10px 14px; font-size: 11px;
}
.settings h3 { margin: 0 0 8px; font-size: 13px; color: var(--accent); }
.settings label { display: flex; justify-content: space-between; align-items: center; margin: 6px 0; }
.settings input[type=number] { width: 70px; background: #000; color: #fff; border: 1px solid #555; }
.settings .keys { color: var(--dim); margin-top: 6px; line-height: 1.5; }
.settings button {
  position: absolute; right: 12px; bottom: 10px; background: #333; color: #fff; border: 1px solid #777;
  padding: 3px 14px; cursor: pointer;
}
.fatal { position: absolute; inset: 0; padding: 20px; font-size: 12px; color: #f88; background: #000; white-space: pre-wrap; z-index: 99; }