/* ————— NZ Hitster — mobile-first ————— */
:root {
  --bg: #0a0d0c;
  --bg-raise: #121715;
  --card: #171e1b;
  --card-edge: #26302c;
  --ink: #f2f5f2;
  --ink-dim: #9fb0a8;
  --fern: #2dd672;        /* pounamu / fern green */
  --fern-deep: #14803f;
  --gold: #f5c542;
  --bad: #f0564f;
  --radius: 16px;
  --pad: 16px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }

/* ————— Disco mode (opt-in, seizure-gated) ————— */
#disco-layer { display: none; }
#disco-stop { display: none; }
body.disco #app { position: relative; z-index: 1; }
body.disco #disco-layer {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  animation: discoBg 24s ease-in-out infinite;
}
@keyframes discoBg {
  0%   { background: #b1004a; }
  14%  { background: #b35a00; }
  28%  { background: #15803d; }
  42%  { background: #0088a8; }
  57%  { background: #4b1fae; }
  71%  { background: #7a1470; }
  85%  { background: #9a7d00; }
  100% { background: #b1004a; }
}
.disco-strobe {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  animation: discoStrobe 11s steps(1) infinite;
}
/* Mostly dark, with an occasional short burst of a few white flashes. */
@keyframes discoStrobe {
  0%, 87%  { opacity: 0; }
  88%      { opacity: 0.5; }
  89%      { opacity: 0; }
  90.5%    { opacity: 0.5; }
  91.5%    { opacity: 0; }
  93%      { opacity: 0.45; }
  94%, 100% { opacity: 0; }
}
.disco-light {
  position: absolute;
  width: 60vmax; height: 60vmax;
  border-radius: 50%;
  filter: blur(46px);
  mix-blend-mode: screen;
  opacity: 0.6;
}
.disco-light.l1 { background: radial-gradient(circle, #ff1e6e 0%, transparent 60%); top: -20vmax; left: -15vmax; animation: discoSpin1 16s ease-in-out infinite; }
.disco-light.l2 { background: radial-gradient(circle, #16f1ff 0%, transparent 60%); bottom: -20vmax; right: -15vmax; animation: discoSpin2 20s ease-in-out infinite; }
.disco-light.l3 { background: radial-gradient(circle, #b026ff 0%, transparent 60%); top: 10vmax; right: -20vmax; animation: discoSpin1 24s ease-in-out infinite reverse; }
.disco-light.l4 { background: radial-gradient(circle, #eaff00 0%, transparent 60%); bottom: 5vmax; left: -20vmax; animation: discoSpin2 19s ease-in-out infinite reverse; }
@keyframes discoSpin1 { from { transform: translate(0,0) scale(1); } 50% { transform: translate(24vw, 16vh) scale(1.2); } to { transform: translate(0,0) scale(1); } }
@keyframes discoSpin2 { from { transform: translate(0,0) scale(1.15); } 50% { transform: translate(-20vw,-14vh) scale(0.95); } to { transform: translate(0,0) scale(1.15); } }
body.disco #disco-stop {
  display: block;
  position: fixed;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 40;
  padding: 12px 20px;
  border-radius: 999px;
  border: 2px solid #fff;
  background: #000;
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0,0,0,0.6);
}
.warn-box {
  border: 1.5px solid var(--bad);
  background: rgba(240, 86, 79, 0.08);
  border-radius: var(--radius);
  padding: 14px;
  margin: 10px 0;
  font-size: 0.9rem;
  line-height: 1.5;
}
.warn-box .warn-title { color: var(--bad); font-weight: 800; font-size: 1rem; margin-bottom: 6px; }
.ack-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-raise);
  border: 1.5px solid var(--card-edge);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 12px 0;
  cursor: pointer;
  font-size: 0.9rem;
}
.ack-row.on { border-color: var(--fern); }
.ack-box {
  width: 26px; height: 26px;
  flex: none;
  border-radius: 7px;
  border: 2px solid var(--card-edge);
  display: grid; place-items: center;
  font-weight: 900;
  color: #04150a;
}
.ack-row.on .ack-box { background: var(--fern); border-color: var(--fern); }
body {
  background: radial-gradient(1200px 600px at 50% -200px, #12211a 0%, var(--bg) 60%);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  min-height: 100dvh;
}

#app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom);
}

/* ————— Top bar ————— */
#topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: calc(10px + env(safe-area-inset-top)) var(--pad) 10px;
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgba(10, 13, 12, 0.85);
  backdrop-filter: blur(10px);
}
#topbar h1 {
  flex: 1;
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
}
.icon-btn {
  width: 40px; height: 40px;
  border-radius: 12px;
  border: 1px solid var(--card-edge);
  background: var(--bg-raise);
  color: var(--ink);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  flex: none;
}
.icon-btn:active { transform: scale(0.94); }
#back-btn { font-size: 1.6rem; padding-bottom: 4px; }

main#view { flex: 1; padding: 8px var(--pad) 32px; }

/* ————— Generic ————— */
h2 { font-size: 1.35rem; margin: 18px 0 10px; }
.sub { color: var(--ink-dim); font-size: 0.9rem; margin: 4px 0 14px; line-height: 1.45; }
.sub a, .upsell a { color: var(--fern); font-weight: 700; cursor: pointer; text-decoration: underline; }
.upsell {
  background: rgba(45, 214, 114, 0.08);
  border: 1px solid var(--fern-deep);
  border-radius: 12px;
  padding: 10px 12px;
  color: var(--ink);
}

.btn {
  display: block;
  width: 100%;
  padding: 15px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--card-edge);
  background: var(--card);
  color: var(--ink);
  font-size: 1.02rem;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  margin: 10px 0;
}
.btn:active { transform: scale(0.98); }
.btn.primary {
  background: linear-gradient(160deg, var(--fern) 0%, var(--fern-deep) 100%);
  border-color: transparent;
  color: #04150a;
  box-shadow: 0 6px 24px rgba(45, 214, 114, 0.25);
}
.btn.ghost { background: transparent; }
.btn.danger { color: var(--bad); }
.btn[disabled] { opacity: 0.45; pointer-events: none; }
.btn.small { padding: 10px 14px; font-size: 0.9rem; width: auto; display: inline-block; margin: 4px 6px 4px 0; }

.row { display: flex; gap: 10px; }
.row .btn { flex: 1; }

input[type="text"], input[type="password"], textarea {
  width: 100%;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid var(--card-edge);
  background: var(--bg-raise);
  color: var(--ink);
  font-size: 1rem;
  font-family: inherit;
}
textarea { resize: vertical; line-height: 1.4; }
input:focus, textarea:focus { outline: 2px solid var(--fern-deep); }

.list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: var(--radius);
  padding: 14px;
  margin: 8px 0;
}
.list-item .grow { flex: 1; min-width: 0; }
.list-item .title { font-weight: 700; }
.list-item .meta { color: var(--ink-dim); font-size: 0.82rem; margin-top: 2px; }
.list-item.tappable { cursor: pointer; }
.list-item.tappable:active { background: var(--bg-raise); }
.list-item.selected { border-color: var(--fern); }
.pick-check { color: var(--fern); font-weight: 900; font-size: 1.2rem; padding: 0 4px; }

/* ————— Admin console ————— */
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0 12px; }
.stat-card {
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: var(--radius);
  padding: 18px 14px;
  text-align: center;
}
.stat-num { font-size: 2rem; font-weight: 900; color: var(--fern); font-variant-numeric: tabular-nums; }
.stat-label { color: var(--ink-dim); font-size: 0.82rem; margin-top: 2px; }
.admin-bar { display: flex; align-items: center; gap: 10px; margin: 10px 0; }
.admin-bar select {
  flex: 1;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--card-edge);
  background: var(--bg-raise);
  color: var(--ink);
  font-size: 0.95rem;
}
.admin-bar .btn.small, .admin-bar .status-pill { flex: none; margin: 0; }
.year-edit {
  width: 62px !important;
  flex: none;
  padding: 10px 6px !important;
  text-align: center;
  font-weight: 800;
  color: var(--fern) !important;
  font-variant-numeric: tabular-nums;
}
.list-item.removed { opacity: 0.5; }
.rm-tag { color: var(--bad); font-size: 0.7rem; font-weight: 700; }

/* Admin inbox */
.fb-item {
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin: 8px 0;
}
.fb-head { display: flex; align-items: center; gap: 8px; }
.fb-badge { font-size: 0.75rem; font-weight: 800; padding: 3px 8px; border-radius: 999px; }
.fb-badge.k-error { background: rgba(240,86,79,0.15); color: var(--bad); }
.fb-badge.k-sugg { background: rgba(45,214,114,0.14); color: var(--fern); }
.fb-badge.k-gen { background: var(--bg-raise); color: var(--ink-dim); }
.fb-time { color: var(--ink-dim); font-size: 0.78rem; }
.fb-del { width: 34px; height: 34px; font-size: 0.9rem; margin-left: auto; flex: none; }
.fb-song { margin-top: 8px; font-size: 0.88rem; font-weight: 600; }
.fb-id { color: var(--ink-dim); font-weight: 400; font-size: 0.75rem; }
.fb-msg { margin-top: 6px; font-size: 0.92rem; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
.fb-from { margin-top: 8px; font-size: 0.78rem; color: var(--ink-dim); overflow-wrap: anywhere; }

.avatar {
  width: 42px; height: 42px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.3rem;
  background: var(--bg-raise);
  border: 1px solid var(--card-edge);
}

.empty {
  text-align: center;
  color: var(--ink-dim);
  padding: 28px 10px;
  font-size: 0.92rem;
  line-height: 1.5;
}

/* ————— Home hero ————— */
.hero {
  text-align: center;
  padding: 26px 0 8px;
}
.hero .logo { font-size: 3.2rem; }
.hero .brand {
  font-size: 1.9rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1.12;
  margin: 6px 0 2px;
}
.hero .brand em { color: var(--fern); font-style: normal; }
.hero .tag { color: var(--ink-dim); font-size: 0.88rem; }

/* ————— Player select chips ————— */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.chip {
  border: 1px solid var(--card-edge);
  background: var(--card);
  color: var(--ink);
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}
.chip.on {
  background: var(--fern);
  color: #04150a;
  border-color: transparent;
}
.chip .ordinal { opacity: 0.65; font-weight: 800; margin-right: 5px; }

.seg { display: flex; gap: 8px; margin: 10px 0; }
.seg .chip { flex: 1; text-align: center; }

/* ————— Game screen ————— */
.turn-banner {
  text-align: center;
  margin: 8px 0 4px;
}
.turn-banner .who {
  font-size: 1.5rem;
  font-weight: 900;
}
.turn-banner .who span { color: var(--fern); }
.turn-banner .prog { color: var(--ink-dim); font-size: 0.85rem; margin-top: 3px; }

.scorebar {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 8px 2px 10px;
  scrollbar-width: none;
}
.scorebar::-webkit-scrollbar { display: none; }
.score-chip {
  flex: none;
  border-radius: 999px;
  border: 1px solid var(--card-edge);
  background: var(--card);
  color: var(--ink-dim);
  font-size: 0.85rem;
  font-weight: 700;
  padding: 11px 14px;
  cursor: pointer;
}
.score-chip.current { border-color: var(--fern); color: var(--ink); }
.score-chip.viewing { background: var(--bg-raise); color: var(--fern); }
.score-chip b { color: var(--fern); margin-left: 4px; }
.score-chip .tok { margin-left: 5px; font-size: 0.72rem; opacity: 0.9; }
.score-chip.add { border-style: dashed; color: var(--fern); }

.lb-pos { width: 30px; flex: none; text-align: center; font-size: 1.25rem; }
.lb-rank { color: var(--ink-dim); font-weight: 800; font-size: 0.95rem; }
.lb-val {
  flex: none;
  min-width: 46px;
  text-align: right;
  font-size: 1.3rem;
  font-weight: 900;
  color: var(--fern);
  font-variant-numeric: tabular-nums;
}

.mystery.steal { border-color: var(--gold); }
.steal-who { text-align: center; font-weight: 700; font-size: 0.9rem; margin-bottom: 8px; }
.dock .chips { justify-content: center; }
.steal-result {
  text-align: center;
  border-radius: 12px;
  padding: 10px 12px;
  margin: 8px 0;
  font-size: 0.9rem;
  font-weight: 700;
  border: 1px solid;
}
.steal-result.good { color: var(--fern); border-color: var(--fern-deep); background: rgba(45,214,114,0.08); }
.steal-result.bad { color: var(--gold); border-color: var(--gold); background: rgba(245,197,66,0.07); }
.steal-result .tok { color: var(--ink-dim); font-weight: 400; }

.peek-note {
  text-align: center;
  color: var(--gold);
  font-size: 0.82rem;
  margin: 4px 0;
}

/* ————— Timeline ————— */
.timeline { margin: 6px 0 110px; }
.tl-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin: 4px 0;
}
.tl-card .year {
  font-size: 1.3rem;
  font-weight: 900;
  color: var(--fern);
  min-width: 62px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.tl-card .info { min-width: 0; }
.tl-card .song { font-weight: 700; font-size: 0.95rem; }
.tl-card .artist { color: var(--ink-dim); font-size: 0.82rem; margin-top: 1px; }
.tl-card.flash-in { animation: flashIn 0.7s ease; border-color: var(--fern); }
@keyframes flashIn {
  0% { transform: scale(0.92); box-shadow: 0 0 0 rgba(45,214,114,0); }
  40% { box-shadow: 0 0 26px rgba(45,214,114,0.55); }
  100% { transform: scale(1); box-shadow: 0 0 0 rgba(45,214,114,0); }
}

.slot {
  display: block;
  width: 100%;
  border: 1.5px dashed var(--card-edge);
  background: transparent;
  color: var(--ink-dim);
  border-radius: 12px;
  padding: 13px;
  margin: 4px 0;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}
.slot:active { transform: scale(0.98); }
.slot.selected {
  border-style: solid;
  border-color: var(--fern);
  color: var(--fern);
  background: rgba(45, 214, 114, 0.09);
}

/* ————— Bottom action dock ————— */
.dock {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  padding: 10px var(--pad) calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(transparent, rgba(10,13,12,0.92) 26%);
  z-index: 4;
}
.dock .btn { margin: 6px 0 0; }

/* ————— Big play button ————— */
.play-wrap { text-align: center; padding: 10px 0 4px; }
.play-big {
  width: 108px; height: 108px;
  border-radius: 50%;
  border: none;
  background:
    radial-gradient(circle at 50% 50%, #04150a 0 18%, transparent 19%),
    repeating-radial-gradient(circle at 50% 50%, #0d3b21 0 3px, #10502b 3px 6px),
    linear-gradient(160deg, var(--fern), var(--fern-deep));
  color: #eafff2;
  font-size: 2.1rem;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(45, 214, 114, 0.3);
}
.play-big:active { transform: scale(0.95); }
.play-big.spin { animation: spin 2.4s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.play-hint { color: var(--ink-dim); font-size: 0.85rem; margin-top: 8px; }

/* ————— Now playing / mystery card ————— */
.mystery {
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(160deg, #17251d, #101814);
  border: 1px solid var(--fern-deep);
  border-radius: var(--radius);
  padding: 14px;
  margin: 10px 0;
}
.mystery .qmark {
  width: 52px; height: 52px;
  flex: none;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 1.7rem;
  font-weight: 900;
  color: var(--fern);
  background: var(--bg);
  border: 1px dashed var(--fern-deep);
}
.mystery .label { font-weight: 800; }
.mystery .hint { color: var(--ink-dim); font-size: 0.82rem; margin-top: 2px; }
.mystery .grow { flex: 1; }

.eq { display: flex; gap: 3px; align-items: flex-end; height: 26px; flex: none; }
.eq i {
  width: 4px;
  background: var(--fern);
  border-radius: 2px;
  animation: eq 0.9s ease-in-out infinite;
}
.eq i:nth-child(1) { animation-delay: 0s; }
.eq i:nth-child(2) { animation-delay: 0.15s; }
.eq i:nth-child(3) { animation-delay: 0.3s; }
.eq i:nth-child(4) { animation-delay: 0.45s; }
.eq.paused i { animation-play-state: paused; height: 6px !important; }
@keyframes eq {
  0%, 100% { height: 6px; }
  50% { height: 24px; }
}

.audio-ctrls { display: flex; gap: 8px; justify-content: center; margin: 4px 0; }
.audio-ctrls .icon-btn { width: 46px; height: 46px; border-radius: 50%; }

/* ————— Reveal ————— */
.reveal-card {
  text-align: center;
  border-radius: var(--radius);
  padding: 20px 16px;
  margin: 10px 0;
  border: 1.5px solid;
  animation: flashIn 0.6s ease;
}
.reveal-card.good { border-color: var(--fern); background: rgba(45, 214, 114, 0.08); }
.reveal-card.bad { border-color: var(--bad); background: rgba(240, 86, 79, 0.07); }
.reveal-card .verdict { font-size: 1.15rem; font-weight: 900; letter-spacing: 0.03em; }
.reveal-card.good .verdict { color: var(--fern); }
.reveal-card.bad .verdict { color: var(--bad); }
.reveal-card .r-year { font-size: 2.6rem; font-weight: 900; margin: 6px 0 2px; }
.reveal-card .r-song { font-weight: 700; }
.reveal-card .r-artist { color: var(--ink-dim); font-size: 0.88rem; margin-top: 2px; }

/* ————— Winner overlay ————— */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  background: rgba(4, 7, 6, 0.9);
  backdrop-filter: blur(6px);
  padding: 24px;
}
.overlay .panel {
  width: 100%;
  max-width: 380px;
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: 22px;
  padding: 30px 22px;
  text-align: center;
  animation: flashIn 0.6s ease;
}
.overlay .trophy { font-size: 3.4rem; }
.overlay .winner-name { font-size: 1.7rem; font-weight: 900; color: var(--fern); margin: 8px 0 2px; }

/* ————— QR share ————— */
.qr-box {
  width: min(68vw, 260px);
  margin: 6px auto 10px;
  padding: 10px;
  background: #fff;
  border-radius: 14px;
}
.qr-box svg { display: block; width: 100%; height: auto; }
.qr-url {
  color: var(--fern);
  font-size: 0.86rem;
  font-weight: 700;
  word-break: break-all;
  margin: 4px 0 2px;
}

/* ————— Toasts ————— */
#toast-wrap {
  position: fixed;
  top: calc(64px + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  width: calc(100% - 40px);
  max-width: 440px;
  pointer-events: none;
}
.toast {
  background: #1c2521;
  border: 1px solid var(--card-edge);
  color: var(--ink);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 0.9rem;
  margin-bottom: 8px;
  text-align: center;
  animation: toastIn 0.25s ease;
  box-shadow: 0 8px 30px rgba(0,0,0,0.4);
}
.toast.warn { border-color: var(--gold); }
.toast.err { border-color: var(--bad); }
@keyframes toastIn { from { opacity: 0; transform: translateY(-8px); } }

/* ————— Settings bits ————— */
.status-pill {
  display: inline-block;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 0.8rem;
  font-weight: 700;
  background: var(--bg-raise);
  border: 1px solid var(--card-edge);
  color: var(--ink-dim);
}
.status-pill.ok { color: var(--fern); border-color: var(--fern-deep); }
details.help {
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin: 12px 0;
  font-size: 0.88rem;
  color: var(--ink-dim);
  line-height: 1.55;
}
details.help summary { color: var(--ink); font-weight: 700; cursor: pointer; }
details.help ol { padding-left: 20px; margin: 8px 0; }
details.help code {
  background: var(--bg);
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 0.82rem;
  color: var(--fern);
  word-break: break-all;
}

.field-label { font-size: 0.85rem; font-weight: 700; color: var(--ink-dim); margin: 14px 0 6px; display: block; }