/* my.yayafan.cn — game-style CRT aesthetic */
:root {
  --bg: #050505;
  --cyan: #5eead4;
  --amber: #f5a524;
  --ink: #d6d6d6;
  --mute: #6a6a6a;
  --font: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 14px;
  overflow: hidden;
  height: 100vh;
}

#stage {
  display: block;
  width: 100vw;
  height: 100vh;
  background: var(--bg);
  cursor: crosshair;
  touch-action: none;
}

/* CRT scanlines */
#stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px, transparent 2px,
    rgba(0,0,0,0.18) 3px, transparent 4px);
  z-index: 5;
  mix-blend-mode: multiply;
}

.hidden { display: none !important; }

.hud {
  position: fixed;
  top: 0; left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 22px;
  z-index: 10;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: linear-gradient(180deg, rgba(5,5,5,0.85), transparent);
  pointer-events: none;
}
.hud > * { pointer-events: auto; }
.hud-left, .hud-right { display: flex; align-items: center; gap: 18px; }
.beat-tag {
  color: var(--bg);
  background: var(--cyan);
  padding: 3px 9px;
  font-weight: 600;
}
.prompt { color: var(--ink); animation: blink 1.2s infinite step-end; }
.progress { color: var(--amber); }
.me-link {
  color: var(--mute);
  text-decoration: none;
  border-bottom: 1px dashed var(--mute);
}
.me-link:hover { color: var(--cyan); }

@keyframes blink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

.noscript {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  text-align: center; padding: 20px;
}
.noscript a { color: var(--cyan); }

body:not(.ready) #hud { opacity: 0; }
body.ready #hud { transition: opacity 0.4s; opacity: 1; }