/* What Do I Hear — app styles on top of neal.css.
   One accent: coral rgb(255,121,121), reserved for the dropzone + the payoff. */

[hidden] { display: none !important; }

/* ── the one-sentence interface ─────────────────────────────── */
.hear-title {
  color: var(--ink); font-size: 32px; font-weight: 700; line-height: 1.9;
  margin: 96px auto 6px; max-width: 860px; padding: 0 20px; text-align: center;
}

.dropzone {
  background: var(--card); border: 2px dashed rgb(178, 190, 195); border-radius: var(--r-btn);
  color: var(--ink-soft); cursor: pointer; display: inline-flex; align-items: center;
  font-family: var(--sans); font-size: 24px; font-weight: 700;
  margin: 0 6px; padding: 8px 18px; vertical-align: middle;
  transition: border-color 0.15s ease-in-out, transform var(--t-hover), box-shadow var(--t-hover);
}
@media (hover: hover) {
  .dropzone:hover { border-color: var(--coral); box-shadow: var(--hover-shadow); transform: scale(var(--hover-scale)); }
}
.dropzone:active { transform: scale(var(--press-scale)); }
.dropzone.dragover { background: rgb(255, 240, 240); border-color: var(--coral); border-style: solid; }
.dropzone.shake { animation: nealShake 0.08s alternate 6; }
.dropzone--filled { padding: 5px; }
.dropzone-thumb { border-radius: 3px; display: block; height: 46px; width: auto; }

/* idle invite: barely-there breathe until the first photo lands */
.dropzone--idle .dropzone-label { animation: softBlink 3s ease-in-out infinite; display: inline-block; }
@keyframes softBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.8; } }

/* subtle hint text under the title */
.title-tagline { color: rgb(160, 165, 175); font-size: 14px; }

/* ── the photo ──────────────────────────────────────────────── */
.photo-card {
  animation: nealFadeIn 0.5s ease-in-out forwards;
  background: var(--card); border-radius: var(--r-card);
  margin: 26px auto 0; max-width: 520px; padding: 12px;
}
.photo-card img { border-radius: 6px; display: block; width: 100%; }

/* ── listening state (no spinners in this house) ────────────── */
.listening {
  color: var(--ink-soft); font-family: var(--sans-light); font-size: 21px;
  margin: 26px auto 0; text-align: center;
}
.listening .ear { animation: nealPulse 0.8s ease-in-out alternate infinite; display: inline-block; font-size: 40px; margin-right: 10px; vertical-align: middle; }

/* ── the reveal ─────────────────────────────────────────────── */
.scene-line {
  animation: nealFadeIn 0.5s ease-in-out forwards;
  font-size: 19px; line-height: 2; margin: 20px auto 0; max-width: 620px; text-align: center;
}
.scene-line b {
  background: rgb(238, 238, 238); border-radius: 2px; box-decoration-break: clone;
  -webkit-box-decoration-break: clone; padding: 2px 6px; white-space: nowrap;
}
.scene-line--place b { background: rgb(255, 233, 233); }

.hear-header {
  animation: nealFadeIn 0.5s ease-in-out forwards;
  color: var(--ink); font-size: 26px; font-weight: 700; margin: 30px auto 16px; text-align: center;
}

.sound-list { display: grid; gap: 10px; margin: 0 auto; max-width: 580px; }
.sound-row {
  align-items: center; background: var(--card); border: 1px solid rgb(0, 0, 0);
  border-radius: var(--r-btn); cursor: pointer; display: grid; font-size: 18px;
  gap: 14px; grid-template-columns: 40px 1fr; line-height: 1.45em; opacity: 0;
  padding: 12px 16px; text-align: left;
  transition: transform var(--t-hover), box-shadow var(--t-hover);
}
.sound-row.in { animation: soundIn 0.45s ease-out forwards; }
@media (hover: hover) {
  .sound-row:hover { box-shadow: var(--hover-shadow); transform: scale(var(--hover-scale)); }
}
.sound-row:active { transform: scale(var(--press-scale)); }
.sound-row.speaking { animation: nealHeartbeat 0.6s var(--spring) 1; border-color: var(--coral); }
.sound-emoji { font-size: 26px; text-align: center; }

@keyframes soundIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── reset + error + footer ─────────────────────────────────── */
.reset-btn { display: block; font-size: 18px; margin: 30px auto 0; padding: 10px 20px; }
#error-card { max-width: 520px; }


/* ── responsive: nothing hidden, things just stack ──────────── */
@media only screen and (max-width: 700px) {
  .hear-title { font-size: 24px; margin-top: 76px; }
  .dropzone { font-size: 19px; padding: 7px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .sound-row, .scene-line, .hear-header { opacity: 1 !important; }
}