:root {
  --bg: #0a0612;
  --panel: #161024;
  --line: #2c2142;
  --text: #f1eaff;
  --dim: #9a8cb8;
  --accent: #ff4fa3;
  --accent2: #3fd7ff;
  --good: #5ef09a;
  --bad: #ff6b6b;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; background: var(--bg); color: var(--text);
  font: 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%; overscroll-behavior: none;
}
body { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
#app { flex: 1; min-height: 0; position: relative; }
.screen {
  position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: calc(16px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
  max-width: 560px; margin: 0 auto;
}
.screen[hidden] { display: none !important; }

button, input, select {
  font: inherit; color: var(--text); background: #1d1530; border: 1px solid var(--line); border-radius: 10px; padding: 8px 14px;
}
input { font-size: 16px; }
button { cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
button:disabled { opacity: 0.45; cursor: default; }
button.primary { background: linear-gradient(180deg, #ff5fb0, #d93487); border-color: #ff8cc6; color: #fff; font-weight: 700; }
button.big { display: block; width: 100%; min-height: 54px; font-size: 19px; font-weight: 700; margin: 10px 0; }
@media (pointer: coarse) { button, input { min-height: 44px; } }
.good { color: var(--good); } .bad { color: var(--bad); } .dim { color: var(--dim); }
.fine { color: var(--dim); font-size: 13px; }
kbd { border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; font-size: 13px; }

/* home */
#home { display: flex; flex-direction: column; justify-content: center; text-align: center; }
.logo {
  font: 900 58px/0.95 Impact, "Arial Black", "Helvetica Neue", sans-serif; letter-spacing: 2px; margin: 8px 0 12px;
  color: #fff; text-shadow: 0 0 18px #ff4fa3, 0 0 3px #ff4fa3; transform: rotate(-3deg);
}
.logo span { display: block; color: var(--accent2); text-shadow: 0 0 18px #3fd7ff, 0 0 3px #3fd7ff; font-size: 64px; }
.tag { color: var(--dim); margin: 0 0 14px; }
.field { display: block; text-align: left; color: var(--dim); font-size: 14px; margin: 6px 0; }
.field input { display: block; width: 100%; margin-top: 4px; }
.joinrow { display: flex; gap: 8px; align-items: center; }
.joinrow input { flex: 0 0 40%; min-width: 0; text-transform: uppercase; letter-spacing: 3px; text-align: center; min-height: 54px; }
.joinrow button { flex: 1; }
.row { display: flex; gap: 8px; justify-content: center; margin-top: 10px; }
.row.small button { flex: 1; }
.col { display: flex; flex-direction: column; }

/* setup */
.bar { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.bar h2 { margin: 0; font-size: 20px; }
h3 { margin: 18px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: 2px; color: var(--dim); }
.songs { display: flex; flex-direction: column; gap: 8px; }
.song {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; text-align: left; padding: 10px 12px; border-radius: 12px; width: 100%;
}
.song .t { font-weight: 700; font-size: 17px; }
.song .b { grid-column: 1 / -1; color: var(--dim); font-size: 13px; }
.song .m { color: var(--dim); font-size: 13px; text-align: right; }
.song .tiers { grid-column: 1 / -1; font-size: 12px; color: var(--dim); display: flex; gap: 12px; flex-wrap: wrap; }
.song .tiers b { color: #ffd23f; font-weight: normal; letter-spacing: 1px; }
.song .best { color: var(--good); font-size: 12px; text-align: right; }
.song.on, .seg button.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; background: #2a1335; }
.seg { display: flex; gap: 6px; margin: 6px 0; }
.seg button { flex: 1; padding: 8px 4px; font-weight: 600; }
.seg button small { display: block; font-weight: normal; color: var(--dim); font-size: 11px; }
.check { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 4px; }
.check input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--accent); flex: none; min-height: 0; }
.check .fine { display: block; }
.go { position: sticky; bottom: calc(-16px - env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--bg) 30%); padding: 18px 0 calc(6px + env(safe-area-inset-bottom)); margin-top: 8px; }
#band-box { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 8px 0; }
.code-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.code-row > div { flex: 1; font-size: 15px; }
#band-code { font-size: 24px; letter-spacing: 4px; color: var(--accent2); }
#qr { background: #fff; border-radius: 10px; padding: 8px; margin: 10px auto 0; width: min(240px, 70vw); }
#qr svg { display: block; width: 100%; height: auto; }
#members { list-style: none; margin: 10px 0 0; padding: 0; }
#members li { display: flex; gap: 8px; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--line); }
#members li .n { font-weight: 700; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#members li .p { color: var(--dim); font-size: 14px; }
#members li .r { font-size: 13px; min-width: 52px; text-align: right; }

/* stage */
#stage { padding: 0; max-width: none; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
#cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.corner {
  position: absolute; top: calc(8px + env(safe-area-inset-top)); left: calc(8px + env(safe-area-inset-left));
  width: 44px; height: 44px; padding: 0; border-radius: 22px; background: rgba(20, 12, 36, 0.7); font-weight: 900;
}
#b-boost {
  position: absolute; right: calc(10px + env(safe-area-inset-right)); top: calc(40% - 30px);
  width: 76px; height: 76px; border-radius: 38px; padding: 0; font-weight: 900; font-size: 15px; letter-spacing: 1px;
  background: radial-gradient(circle at 50% 35%, #8fe9ff, #1d8fd6 70%); border: 2px solid #c9f6ff; color: #fff;
  box-shadow: 0 0 22px #3fd7ff; animation: pulse 0.9s ease-in-out infinite alternate;
}
@keyframes pulse { from { transform: scale(0.94); } to { transform: scale(1.04); } }

/* results */
#results h2 { font: 900 34px/1 Impact, "Arial Black", sans-serif; letter-spacing: 1px; margin: 16px 0 4px; color: #fff; text-shadow: 0 0 14px #ff4fa3; }
#res-band { font-size: 18px; margin: 10px 0; }
#res-list { list-style: none; padding: 0; margin: 0; }
#res-list li { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 8px 0; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; }
#res-list .n { font-weight: 700; font-size: 17px; }
#res-list .s { font-size: 22px; font-weight: 800; text-align: right; }
#res-list .st { color: #ffd23f; letter-spacing: 2px; }
#res-list .d { color: var(--dim); font-size: 13px; grid-column: 1 / -1; }

/* dialogs */
dialog {
  background: var(--panel); color: var(--text); border: 1px solid var(--accent); border-radius: 14px; padding: 16px;
  width: min(460px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow-y: auto;
}
dialog::backdrop { background: rgba(5, 2, 10, 0.75); }
dialog h2 { margin-top: 0; color: var(--accent); }
dialog label { display: block; margin: 10px 0; }
dialog input[type=range] { display: block; width: 100%; padding: 0; accent-color: var(--accent); }
dialog .row { justify-content: flex-end; }
dialog .row button { min-width: 96px; }
dialog form { margin-top: 12px; text-align: right; }
dialog li { margin: 6px 0; }
.cal { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.cal > div { flex: 1; }
#cal-box { background: #0f0a1a; border-radius: 10px; padding: 10px; margin: 8px 0; text-align: center; }
#cal-pad { min-height: 120px; font-size: 24px; }
#cal-pad.flash { background: #3a1d4d; }
#t-note { font: 900 72px/1 Impact, "Arial Black", sans-serif; text-align: center; margin: 10px 0; }
#t-meter { position: relative; height: 34px; border-radius: 8px; background: linear-gradient(90deg, #ff6b6b, #ffd23f 40%, #5ef09a 50%, #ffd23f 60%, #ff6b6b); margin: 8px 0; }
#t-needle { position: absolute; top: -4px; bottom: -4px; width: 4px; left: calc(50% - 2px); background: #fff; border-radius: 2px; box-shadow: 0 0 6px #000; transition: left 0.08s; }
#t-hz { text-align: center; }

/* your music */
#live-box { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 8px 0; }
#sp-chosen { font-size: 14px; overflow: hidden; text-overflow: ellipsis; }
#sp-results { list-style: none; padding: 0; margin: 10px 0; }
#sp-results button { width: 100%; text-align: left; margin: 4px 0; display: block; }
#sp-results button small { display: block; color: var(--dim); font-size: 12px; }
#sp-results button.on { border-color: var(--accent); background: #2a1335; }
#sp-device { display: block; width: 100%; margin-top: 4px; }
#sp-search input { flex: 1; text-transform: none; letter-spacing: normal; text-align: left; }
#sp-search button { flex: 0 0 auto; width: auto; padding: 0 18px; }
[hidden] { display: none !important; }