:root {
  --bg: #07070a;
  --ink: #e9e4da;
  --muted: #8c8778;
  --brass: #c8a96a;
  --line: #24242c;
  --red: #ff4d5e;
  --amber: #ffc857;
  --cyan: #5ee7ff;
  --green: #6dff9c;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 14px/1.45 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
main { max-width: 980px; margin: 0 auto; padding: 14px 10px 40px; }
header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 2px 8px; flex-wrap: wrap; }
.logo { font-weight: 800; letter-spacing: .2em; font-size: 18px; }
.logo b, #flash b { color: var(--brass); }
header .sub { color: var(--muted); font-size: 12px; letter-spacing: .08em; }

#wrap {
  position: relative; width: 100%; aspect-ratio: 960 / 600;
  background: #000; border: 1px solid var(--line); overflow: hidden; user-select: none;
}
canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

#hud { position: absolute; inset: 0; pointer-events: none; font-variant-numeric: tabular-nums; }
#hud.off { display: none; }
#hud-obj {
  position: absolute; left: 10px; top: 8px; max-width: 44%; font-size: 12px; color: #d9d2c3;
  background: #000b; padding: 4px 9px; border-left: 2px solid var(--brass);
}
#hud-time {
  position: absolute; left: 50%; top: 6px; transform: translateX(-50%);
  font: 600 18px ui-monospace, Menlo, Consolas, monospace; letter-spacing: .08em;
  background: #000a; padding: 1px 10px;
}
#hud-alarm {
  position: absolute; right: 10px; top: 8px; font: 600 11px ui-monospace, monospace;
  letter-spacing: .14em; padding: 3px 8px; border: 1px solid; background: #000b;
}
#hud-echo { position: absolute; left: 10px; bottom: 8px; font: 700 16px ui-monospace, monospace; background: #000a; padding: 2px 8px; }
#hud-info {
  position: absolute; right: 10px; bottom: 8px; font-size: 12px; color: #d9d2c3;
  background: #000b; padding: 4px 9px; max-width: 50%; border-right: 2px solid var(--cyan);
}
#hud-info:empty { display: none; }
#toast {
  position: absolute; left: 50%; top: 42px; transform: translateX(-50%);
  background: #000d; border: 1px solid var(--brass); padding: 5px 12px; font-size: 13px;
  opacity: 0; transition: opacity .2s; white-space: nowrap;
}
#toast.on { opacity: 1; }

#subs {
  position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%);
  max-width: 82%; text-align: center; background: #000d; padding: 6px 16px 8px;
  font-size: 15px; opacity: 0; transition: opacity .15s; pointer-events: none; border-top: 1px solid #ffffff14;
  z-index: 5;
}
#overlay { z-index: 4; }
#subs.on { opacity: 1; }
#subs .who { display: block; font-size: 10px; letter-spacing: .22em; color: var(--brass); }
#subs.mara .who { color: var(--cyan); }
#subs.mara .txt { color: #c9f6ff; }
#subs.echo .who { color: #fff; }
#subs.echo .txt { letter-spacing: .04em; }
#subs.nar .txt { font-style: italic; color: var(--muted); }
#subs.pause::after { content: "Enter ▸"; display: block; font-size: 9px; color: var(--muted); letter-spacing: .15em; margin-top: 2px; }

#flash {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 64px; letter-spacing: .25em; pointer-events: none;
  opacity: 0; transition: opacity .4s; text-shadow: 0 0 30px #5ee7ff55;
}
#flash.on { opacity: 1; }

#overlay {
  position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
  flex-direction: column; text-align: center; background: #000f; padding: 24px; overflow: auto;
}
#overlay.on { display: flex; }
#overlay.dim { background: #000d; }
#overlay h1 { font-size: 54px; letter-spacing: .22em; margin: 0 0 4px; font-weight: 800; }
#overlay h1 b { color: var(--brass); }
#overlay h2 { font-size: 13px; letter-spacing: .3em; color: var(--muted); font-weight: 600; margin: 0 0 22px; }
#overlay p { max-width: 560px; color: #cfc8b9; margin: 6px auto; }
#overlay .small { font-size: 12px; color: var(--muted); }
#overlay .card-place { font-size: 12px; letter-spacing: .35em; color: var(--brass); }
#overlay .card-title { font-size: 34px; letter-spacing: .12em; font-weight: 700; margin: 6px 0; }
.btn {
  margin: 14px 6px 0; background: none; color: var(--ink); border: 1px solid var(--brass);
  padding: 8px 18px; font: 600 12px ui-monospace, monospace; letter-spacing: .18em; cursor: pointer;
}
.btn:hover { background: #c8a96a22; }
.score { display: grid; grid-template-columns: auto auto; gap: 3px 28px; text-align: left; margin: 10px auto; font: 13px ui-monospace, monospace; }
.score span:nth-child(odd) { color: var(--muted); }
.rank { font-size: 40px; font-weight: 800; letter-spacing: .3em; color: var(--brass); margin: 10px 0 0; }
.quote { font-style: italic; }

#tl { margin-top: 10px; border: 1px solid var(--line); background: #0b0b0f; padding: 8px 10px 6px; }
#tl-head { display: flex; justify-content: space-between; gap: 10px; font: 600 11px ui-monospace, monospace; letter-spacing: .18em; color: var(--brass); margin-bottom: 4px; flex-wrap: wrap; }
#tl-head .hint { color: var(--muted); letter-spacing: 0; font-weight: 400; }
#tl-rows { position: relative; }
.row { display: flex; align-items: center; height: 22px; border-bottom: 1px solid #15151b; }
.lbl { width: 96px; flex: none; font: 600 11px ui-monospace, monospace; display: flex; align-items: center; gap: 6px; }
.lbl i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.del { margin-left: auto; margin-right: 6px; background: none; border: 0; color: #666; cursor: pointer; font-size: 11px; }
.del:hover { color: var(--red); }
.track { position: relative; flex: 1; height: 100%; }
.ev { position: absolute; top: 4px; width: 2px; height: 14px; background: #ddd; }
.ev span { position: absolute; left: 4px; top: 0; font-size: 9px; white-space: nowrap; color: #bbb; }
.ev.music { background: var(--brass); }
.ev.alarm { background: var(--amber); }
.ev.fail { background: var(--red); }
.ev.goal { background: var(--green); }
.ev.prev { opacity: .3; }
.ev.prev span { display: none; }
.endz { position: absolute; top: 9px; height: 4px; right: 0; background: repeating-linear-gradient(90deg, #3a3a44 0 3px, transparent 3px 6px); }
#tl-play { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--cyan); pointer-events: none; box-shadow: 0 0 6px var(--cyan); }

#keys { color: var(--muted); font-size: 12px; margin: 10px 2px; }
kbd { font: 11px ui-monospace, monospace; border: 1px solid #333; border-bottom-width: 2px; padding: 0 4px; border-radius: 3px; color: var(--ink); }
#k-r.hot { color: var(--amber); }
#k-r.hot kbd { border-color: var(--amber); }

@media (max-width: 640px) {
  #overlay h1 { font-size: 30px; }
  #flash { font-size: 32px; }
  #subs { font-size: 12px; bottom: 30px; }
}