/* AniJams — late-night broadcast aesthetic
   Palette: midnight indigo / neon magenta / signal cyan / warm cream */

:root {
  --night: #14122b;
  --panel: #1e1b3e;
  --panel-edge: #2e2a5c;
  --neon: #ff4d8f;
  --cyan: #53e8ff;
  --cream: #fff3df;
  --cream-dim: #b9b2d0;
  --good: #5df0a8;
  --font-display: "DotGothic16", monospace;
  --font-body: "Zen Kaku Gothic New", system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* custom cursors: neon arrow (default) and cyan arrow (interactive) */
body { cursor: url("cursor.svg") 4 2, auto; }
a, button, .suggestions li, input[type="range"], .mode-tab, .archive-item {
  cursor: url("cursor-hand.svg") 4 2, pointer;
}
input[type="text"] { cursor: text; }

html { color-scheme: dark; }

body {
  background: var(--night);
  background-image:
    repeating-linear-gradient(0deg, transparent 0 2px, rgb(0 0 0 / 0.12) 2px 4px);
  color: var(--cream);
  font-family: var(--font-body);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem 1rem 2rem;
}

/* ---------- masthead ---------- */

.masthead { text-align: center; margin-bottom: 1.75rem; }

.broadcast-tag {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  color: var(--cyan);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}

.rec-dot {
  width: 0.55em; height: 0.55em;
  border-radius: 50%;
  background: var(--neon);
  animation: blink 1.6s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0.2; } }

.logo {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 10vw, 4.2rem);
  line-height: 1.05;
  color: var(--neon);
  text-shadow:
    0 0 18px rgb(255 77 143 / 0.45),
    -2px 0 0 rgb(83 232 255 / 0.3),
    2px 0 0 rgb(255 77 143 / 0.3);
  margin-top: 0.2em;
}
.logo-latin { color: var(--cream); }

.tagline { color: var(--cream-dim); font-size: 0.95rem; margin-top: 0.3em; }

.mode-tabs {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}
.mode-tab {
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: var(--cream-dim);
  text-decoration: none;
  border: 1px solid var(--panel-edge);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  transition: color 0.15s, border-color 0.15s;
}
.mode-tab:hover { color: var(--cyan); border-color: var(--cyan); }
.mode-tab.active {
  color: var(--night);
  background: var(--neon);
  border-color: var(--neon);
}

.header-tools {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 0.7rem;
}
.tool-btn {
  font-family: var(--font-body);
  font-size: 0.8rem;
  background: none;
  border: none;
  color: var(--cream-dim);
  padding: 0.2rem 0.4rem;
}
.tool-btn:hover, .tool-btn:focus-visible { color: var(--cyan); }

.archive-note {
  text-align: center;
  font-size: 0.85rem;
  color: var(--cream-dim);
  border: 1px dashed var(--panel-edge);
  border-radius: 8px;
  padding: 0.5rem;
}
.archive-note a { color: var(--cyan); }
.archive-note[hidden] { display: none; }

.endless-hud {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-display);
  font-size: 0.9rem;
  color: var(--cream-dim);
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 10px;
  padding: 0.6rem 1rem;
}
.endless-hud[hidden] { display: none; }
.endless-hud b { color: var(--cyan); font-weight: 400; font-size: 1.1rem; }
#endless-lives { color: var(--neon); letter-spacing: 0.15em; font-size: 1.05rem; }

/* ---------- stage ---------- */

.stage { width: 100%; max-width: 30rem; display: flex; flex-direction: column; gap: 1.1rem; }

.player-panel {
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 14px;
  padding: 1.2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.play-btn {
  flex: none;
  width: 3.6rem; height: 3.6rem;
  border-radius: 50%;
  border: 2px solid var(--neon);
  background: transparent;
  color: var(--neon);
  display: grid;
  place-items: center;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.play-btn:hover, .play-btn:focus-visible {
  background: var(--neon);
  color: var(--night);
  box-shadow: 0 0 22px rgb(255 77 143 / 0.5);
}
.play-btn svg { width: 1.6rem; height: 1.6rem; fill: currentColor; }
.play-btn .icon-stop { display: none; }
.play-btn.playing .icon-play { display: none; }
.play-btn.playing .icon-stop { display: block; }

/* cassette-counter progress: six segments sized by unlock duration */

.tape-counter { flex: 1; }

.tape-track {
  display: flex;
  gap: 3px;
  height: 1.4rem;
  border-radius: 4px;
  overflow: hidden;
}

.tape-seg { position: relative; background: rgb(255 243 223 / 0.09); }
.tape-seg.unlocked { background: rgb(83 232 255 / 0.22); }
.tape-seg .fill {
  position: absolute; inset: 0;
  transform-origin: left;
  transform: scaleX(0);
  background: var(--cyan);
}
.tape-seg.filling .fill { transform: scaleX(1); transition: transform linear; }

.tape-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--font-display);
  font-size: 0.7rem;
  color: var(--cream-dim);
  margin-top: 0.4rem;
}

#volume {
  flex: 1;
  max-width: 8rem;
  accent-color: var(--neon);
  height: 3px;
}

/* ---------- hints ---------- */

.hints { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.hints:empty { display: none; }
.hint-chip {
  font-size: 0.8rem;
  color: var(--cyan);
  border: 1px solid rgb(83 232 255 / 0.35);
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
}
#clip-length { color: var(--cyan); }

/* ---------- attempts ---------- */

.attempts { display: flex; flex-direction: column; gap: 0.45rem; min-height: 0; }

.attempt {
  border: 1px solid var(--panel-edge);
  border-radius: 8px;
  padding: 0.55rem 0.8rem;
  font-size: 0.92rem;
  display: flex;
  gap: 0.6em;
  align-items: baseline;
  color: var(--cream-dim);
}
.attempt .mark { font-family: var(--font-display); flex: none; }
.attempt.wrong .mark { color: var(--neon); }
.attempt.skip { font-style: italic; }
.attempt.correct { border-color: var(--good); color: var(--good); }
.attempt.correct .mark { color: var(--good); }

/* ---------- guess form ---------- */

.guess-form { display: flex; flex-direction: column; gap: 0.7rem; }

.guess-box { position: relative; }

#guess-input {
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 10px;
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.85rem 1rem;
}
#guess-input:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 1px;
}
#guess-input::placeholder { color: var(--cream-dim); }

.suggestions {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0; right: 0;
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 10px;
  list-style: none;
  max-height: 13rem;
  overflow-y: auto;
  display: none;
  z-index: 5;
  box-shadow: 0 -8px 24px rgb(0 0 0 / 0.45);
}
.suggestions.open { display: block; }
.suggestions li {
  padding: 0.6rem 1rem;
  font-size: 0.95rem;
}
.suggestions li:hover, .suggestions li[aria-selected="true"] {
  background: rgb(83 232 255 / 0.12);
  color: var(--cyan);
}

.guess-actions { display: flex; gap: 0.7rem; }

.giveup {
  align-self: center;
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--cream-dim);
  opacity: 0.75;
  padding: 0.2rem 0.5rem;
}
.giveup:hover, .giveup:focus-visible { color: var(--neon); opacity: 1; }
.giveup[data-armed="1"] { color: var(--neon); opacity: 1; }
.giveup[hidden] { display: none; }

.btn-ghost, .btn-solid {
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  border-radius: 10px;
  padding: 0.75rem 1.1rem;
  transition: filter 0.15s, background 0.15s;
}

.btn-ghost {
  flex: 1;
  background: transparent;
  border: 1px solid var(--panel-edge);
  color: var(--cream-dim);
}
.btn-ghost:hover, .btn-ghost:focus-visible { border-color: var(--cyan); color: var(--cyan); }

.btn-solid {
  flex: 1;
  background: var(--neon);
  border: none;
  color: var(--night);
}
.btn-solid:disabled { filter: saturate(0.2) brightness(0.6); cursor: not-allowed; }
.btn-solid:not(:disabled):hover { filter: brightness(1.15); }

/* ---------- endcard ---------- */

.endcard[hidden], .guess-form[hidden] { display: none; }

.endcard {
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 14px;
  padding: 1.4rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.endcard-verdict { font-family: var(--font-display); font-size: 1.3rem; color: var(--cyan); }
.endcard.won .endcard-verdict { color: var(--good); }

.answer-song { font-weight: 700; font-size: 1.1rem; }
.answer-anime { color: var(--cream-dim); font-size: 0.95rem; }

.btn-share { flex: none; }

.countdown { font-size: 0.85rem; color: var(--cream-dim); }
.countdown span { font-family: var(--font-display); color: var(--cream); }

/* ---------- colophon / toast ---------- */

.colophon { margin-top: auto; padding-top: 2rem; font-size: 0.78rem; color: var(--cream-dim); }
.colophon a { color: var(--cyan); }

.toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  translate: -50% 0;
  background: var(--cream);
  color: var(--night);
  font-weight: 700;
  padding: 0.7rem 1.2rem;
  border-radius: 10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}
.toast.show { opacity: 1; }

/* ---------- modal ---------- */

.overlay {
  position: fixed;
  inset: 0;
  background: rgb(10 8 25 / 0.75);
  display: grid;
  place-items: center;
  z-index: 20;
  padding: 1rem;
}
.overlay[hidden] { display: none; }

.modal {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 14px;
  padding: 1.5rem;
  width: min(26rem, 100%);
  max-height: 80dvh;
  overflow-y: auto;
}

.modal-close {
  position: absolute;
  top: 0.8rem; right: 0.9rem;
  background: none;
  border: none;
  color: var(--cream-dim);
  font-size: 1rem;
}
.modal-close:hover, .modal-close:focus-visible { color: var(--neon); }

.modal-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--cyan);
  margin-bottom: 1rem;
}

.stat-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  text-align: center;
}
.stat-tile { display: flex; flex-direction: column; gap: 0.15rem; }
.stat-num { font-family: var(--font-display); font-size: 1.5rem; color: var(--cream); }
.stat-label { font-size: 0.7rem; color: var(--cream-dim); }

.dist-title { font-size: 0.85rem; color: var(--cream-dim); margin: 1.2rem 0 0.5rem; }
.dist-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.3rem; }
.dist-row > span { font-family: var(--font-display); font-size: 0.8rem; width: 1em; color: var(--cream-dim); }
.dist-bar {
  background: var(--panel-edge);
  color: var(--cream);
  font-size: 0.75rem;
  border-radius: 4px;
  padding: 0.15rem 0.5rem;
  min-width: 1.4rem;
  text-align: right;
}

.archive-list { display: flex; flex-direction: column; gap: 0.3rem; }
.archive-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-decoration: none;
  color: var(--cream);
  border: 1px solid var(--panel-edge);
  border-radius: 8px;
  padding: 0.5rem 0.8rem;
  font-size: 0.9rem;
}
.archive-item:hover { border-color: var(--cyan); }
.archive-num { font-family: var(--font-display); }
.archive-status { font-size: 0.8rem; color: var(--cream-dim); }

/* ---------- CRT ambience: phosphor glow, refresh bar, grain, vignette ---------- */

.masthead, .stage, .colophon { position: relative; z-index: 1; }

.ambience {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.ambience i {
  position: absolute;
  width: 55vmax;
  height: 55vmax;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.09;
}
.ambience i:first-child {
  background: var(--neon);
  top: -22vmax; left: -16vmax;
  animation: drift-a 26s ease-in-out infinite alternate;
}
.ambience i:last-child {
  background: var(--cyan);
  bottom: -26vmax; right: -18vmax;
  animation: drift-b 34s ease-in-out infinite alternate;
}
@keyframes drift-a { to { transform: translate(9vmax, 7vmax) scale(1.15); } }
@keyframes drift-b { to { transform: translate(-8vmax, -6vmax) scale(0.9); } }

/* rolling refresh bar — the slow scan sweep of an old tube */
body::before {
  content: "";
  position: fixed;
  left: 0; right: 0; top: 0;
  height: 16vh;
  z-index: 13;
  pointer-events: none;
  background: linear-gradient(to bottom,
    transparent,
    rgb(83 232 255 / 0.03) 35%,
    rgb(255 255 255 / 0.05) 50%,
    rgb(83 232 255 / 0.03) 65%,
    transparent);
  transform: translateY(-20vh);
  animation: crt-roll 8s linear infinite;
}
@keyframes crt-roll { to { transform: translateY(110vh); } }

/* tube vignette — darkened corners, slight depth */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 12;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgb(0 0 0 / 0.32) 100%);
}

/* animated grain — broadcast static, barely there */
html::before {
  content: "";
  position: fixed;
  inset: -48px;
  z-index: 14;
  pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  animation: grain 0.9s steps(3) infinite;
}
@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  33% { transform: translate(-22px, 14px); }
  66% { transform: translate(16px, -20px); }
}

/* ---------- CRT channel-switch transition ---------- */

.crt {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  background: #000;
  opacity: 0;
}
.crt::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 3px;
  background: #fff;
  box-shadow: 0 0 24px 6px rgb(255 255 255 / 0.9), 0 0 60px 10px rgb(83 232 255 / 0.6);
  transform: scaleX(0);
}
.crt.on {
  opacity: 1;
  transition: opacity 0.12s steps(3);
}
.crt.on::after {
  transform: scaleX(1);
  transition: transform 0.16s ease-in;
}
.crt.off {
  opacity: 0;
  transition: opacity 0.22s steps(4);
}
.crt.off::after {
  transform: scaleX(0) scaleY(60);
  transition: transform 0.2s ease-out;
}

/* ---------- confetti / boot ---------- */

.confetti {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
}

.stage { transition: opacity 0.3s ease, translate 0.3s ease; }
.stage.booting { opacity: 0; translate: 0 8px; }

/* ---------- equalizer viz (plays while audio runs) ---------- */

.viz {
  display: none;
  align-items: flex-end;
  gap: 2px;
  height: 0.85em;
  margin-left: 0.4em;
}
body.playing .viz { display: inline-flex; }
.viz i {
  width: 3px;
  background: var(--cyan);
  animation: viz-bounce 0.5s steps(3) infinite alternate;
}
.viz i:nth-child(1) { animation-delay: 0s; }
.viz i:nth-child(2) { animation-delay: 0.12s; }
.viz i:nth-child(3) { animation-delay: 0.24s; }
.viz i:nth-child(4) { animation-delay: 0.06s; }
.viz i:nth-child(5) { animation-delay: 0.18s; }
@keyframes viz-bounce { from { height: 20%; } to { height: 100%; } }

body.playing .play-btn {
  box-shadow: 0 0 26px rgb(255 77 143 / 0.55);
}

/* ---------- streak flame / hard toggle / endless timer ---------- */

.streak-flame {
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: #ff9d4d;
  margin-top: 0.4rem;
}

.tool-btn.active { color: var(--neon); }
.tool-btn[aria-pressed="true"] { color: var(--neon); }

.endless-timer { color: var(--cream-dim); }
.endless-timer b { color: var(--cream); }
.endless-timer.urgent b { color: var(--neon); animation: blink 0.5s steps(2) infinite; }
.endless-timer[hidden] { display: none; }

/* ---------- endcard actions / howto / backup ---------- */

.endcard-actions {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.howto p { margin-bottom: 0.7rem; font-size: 0.95rem; line-height: 1.45; }

.backup-row {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.2rem;
}
.backup-row .btn-ghost { flex: 1; font-size: 0.75rem; padding: 0.55rem 0.6rem; }

/* ---------- suggestions year tag ---------- */

.suggestions li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.6rem;
}
.suggestions li small { color: var(--cream-dim); font-size: 0.75rem; }

/* ---------- god ear ---------- */

body.god .logo {
  animation: god-hue 3s linear infinite;
}
@keyframes god-hue { to { filter: hue-rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .crt.on, .crt.off, .crt.on::after, .crt.off::after { transition: none; }
  body::before, html::before, .ambience i { animation: none; }
  body::before { display: none; }
  .viz i { animation: none; height: 60%; }
  body.god .logo { animation: none; }
  .rec-dot { animation: none; }
  .tape-seg.filling .fill { transition: none; }
}