/* Talk Backwards — styles
   Palette: ink #1d1b3a · paper #f1eefb · pink #ff4f81 · teal #19c2a9 · sun #ffc83d */
:root {
  --ink: #1d1b3a;
  --ink-soft: #5b5878;
  --paper: #f1eefb;
  --card: #ffffff;
  --line: #d9d4ee;
  --pink: #ff4f81;
  --teal: #19c2a9;
  --sun: #ffc83d;
  --radius: 14px;
  --display: 'Bricolage Grotesque', 'Trebuchet MS', system-ui, sans-serif;
  --body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  line-height: 1.5;
}

.app {
  max-width: 520px;
  margin: 0 auto;
  padding: 24px 16px 48px;
  display: grid;
  gap: 16px;
}

/* ---- Brand: the one memorable thing is the mirrored word ---- */
.brand { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
h1 {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.8rem, 7vw, 2.4rem);
  letter-spacing: -0.02em;
}
.flip { display: inline-block; transform: scaleX(-1); color: var(--pink); }

.status { font-size: .8rem; padding: 4px 10px; border-radius: 999px; background: var(--sun); white-space: nowrap; }
.status[data-state="online"] { background: var(--teal); }
.status[data-state="offline"] { background: var(--pink); }

/* ---- Cards & text ---- */
.card {
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  padding: 20px;
  display: grid;
  gap: 12px;
  box-shadow: 4px 4px 0 var(--ink);
}
h2 { margin: 0; font-family: var(--display); font-size: 1.35rem; }
p { margin: 0; }
.muted { color: var(--ink-soft); font-size: .95rem; }
.error { color: #c0173f; font-size: .9rem; min-height: 1.2em; }
label { font-weight: 700; font-size: .9rem; }

/* ---- Inputs & buttons ---- */
input[type="text"] {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  color: var(--ink);
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 10px;
}
input[type="text"]:focus-visible, .btn:focus-visible, audio:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 2px;
}
#code { text-transform: uppercase; letter-spacing: .3em; text-align: center; font-weight: 700; }

.row { display: flex; gap: 10px; }
.row > input { flex: 1; min-width: 0; }

.btn {
  font: inherit;
  font-weight: 700;
  color: var(--ink);
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 10px;
  padding: 12px 18px;
  cursor: pointer;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary { background: var(--pink); }
.btn.ghost { border-color: var(--line); background: transparent; color: var(--ink-soft); }
.btn.record { background: var(--sun); padding: 16px; font-size: 1.05rem; }
.btn.record.is-recording { background: var(--pink); animation: pulse 1s ease-in-out infinite; }
.leave { justify-self: center; }

@keyframes pulse { 50% { transform: scale(1.03); } }

.divider { display: flex; align-items: center; gap: 10px; color: var(--ink-soft); font-size: .85rem; }
.divider::before, .divider::after { content: ''; flex: 1; height: 2px; background: var(--line); }

/* ---- Lobby ---- */
.screen { animation: none; }
.big-code {
  font-family: var(--display);
  font-weight: 800;
  font-size: 3.4rem;
  letter-spacing: .2em;
  text-align: center;
  padding-left: .2em;
}
.pulse-text { animation: fade 1.6s ease-in-out infinite; text-align: center; }
@keyframes fade { 50% { opacity: .4; } }

/* ---- Game ---- */
.scoreboard { grid-template-columns: 1fr auto; align-items: center; padding: 14px 20px; }
.scores { display: flex; gap: 18px; flex-wrap: wrap; }
.score { display: flex; align-items: baseline; gap: 8px; }
.score b { font-family: var(--display); font-size: 1.6rem; }
.score.is-speaker::before { content: '🎤'; }
.score.is-me span { text-decoration: underline; text-decoration-color: var(--teal); text-decoration-thickness: 3px; }

audio { width: 100%; }
.guesses { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.guesses li { background: var(--paper); border-radius: 999px; padding: 4px 12px; text-decoration: line-through; color: var(--ink-soft); }

.big-word { font-family: var(--display); font-weight: 800; font-size: 2rem; word-break: break-word; }

@media (prefers-reduced-motion: reduce) {
  .btn.record.is-recording, .pulse-text { animation: none; }
}

/* ================= Audio player (play / pause / waveform / speed) ================= */
.stack { display: grid; gap: 12px; }
.step { display: grid; gap: 10px; padding-top: 14px; border-top: 2px solid var(--line); }
h3 { margin: 0; font-family: var(--display); font-size: 1.05rem; }

.player {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
}
.player.is-empty { opacity: .55; pointer-events: none; }

.p-btn {
  flex: none;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--ink);
  background: var(--pink);
  border: 2px solid var(--ink);
  border-radius: 50%;
  box-shadow: 2px 2px 0 var(--ink);
  cursor: pointer;
}
.p-btn:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); }
.p-btn:focus-visible, .p-track:focus-visible, .p-speed:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.p-btn svg { width: 24px; height: 24px; fill: currentColor; }
.p-btn .i-pause { display: none; }
.player.is-playing .p-btn .i-play { display: none; }
.player.is-playing .p-btn .i-pause { display: block; }
.player.is-playing .p-btn { background: var(--teal); }

.p-main { flex: 1; min-width: 0; display: grid; gap: 6px; }

.p-track {
  position: relative;
  height: 52px;
  cursor: pointer;
  touch-action: none;       /* lets us drag to seek on phones */
  border-radius: 8px;
}
.p-bars { height: 100%; display: flex; align-items: center; gap: 2px; }
.p-bars span {
  flex: 1;
  min-width: 2px;
  background: #b9b3d6;
  border-radius: 2px;
  transition: background-color .08s linear;
}
.p-bars span.on { background: var(--ink); }

.p-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.p-time { font-variant-numeric: tabular-nums; font-size: .85rem; color: var(--ink-soft); }
.p-speed {
  font: inherit;
  font-size: .8rem;
  font-weight: 700;
  color: var(--ink);
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 2px 10px;
  cursor: pointer;
  min-width: 56px;
}