:root {
  --bg: #fff;
  --fg: #333;
  --muted: #777;
  --bar: #222;
  --bar-fg: #f5f5f5;
  --border: #ccc;
  --accent: #f5f5f5;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--fg);
  background: var(--bg);
}

.navbar {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0 1rem;
  height: 50px;
  background: var(--bar);
}
.navbar a { color: var(--bar-fg); text-decoration: none; opacity: 0.85; }
.navbar a:hover { opacity: 1; }
.navbar .brand { font-weight: 600; margin-right: auto; }

/* Search progress, visually attached to the navbar (same dark background). */
.progress {
  background: var(--bar);
  padding: 0 0 0.4rem;
}
.progress-track {
  height: 4px;
  background: rgba(255, 255, 255, 0.15);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  width: 0%;
  background: var(--bar-fg);
  transition: width 0.2s linear;
}
.progress-meta {
  margin: 0.35rem 1rem 0;
  color: var(--bar-fg);
  opacity: 0.85;
  font-size: 0.85rem;
  text-align: center;
  min-height: 1.1em;
  font-variant-numeric: tabular-nums;
}

.container {
  max-width: 720px;
  margin: 0 auto;
  padding: 2rem 1rem;
  text-align: center;
}

.monkey-row {
  display: flex;
  justify-content: center;
  min-height: 256px;
}

.input-row {
  display: flex;
  justify-content: center;
  gap: 0;
  margin: 1.5rem auto 0;
  max-width: 360px;
}
.input-row input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  border: 1px solid var(--border);
  border-right: none;
  border-radius: 4px 0 0 4px;
}
.input-row button {
  flex: 0 0 auto;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--accent);
  border-radius: 0 4px 4px 0;
}
.input-row button:hover { background: #e8e8e8; }
.input-row button:disabled { cursor: not-allowed; opacity: 0.5; }
.input-row button:disabled:hover { background: var(--accent); }

/* Inline warning under the input when a word is too long to ever have a seed. */
.input-hint {
  color: #c0392b;
  min-height: 1.1rem;
  margin: 0.5rem auto 0;
  max-width: 420px;
  font-size: 0.9rem;
}

/* "Start over" control shown once a search finishes. */
.controls-row { margin-top: 1rem; }
#start-over {
  padding: 0.5rem 1rem;
  font-size: 1rem;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--accent);
  border-radius: 4px;
}
#start-over:hover { background: #e8e8e8; }

/* Grid of working monkeys — one per running worker. */
.monkeys {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 0.25rem 0.75rem;
  min-height: 160px;
}
.monkey-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 120px;
}
.monkey-best {
  margin-top: -1.25rem; /* tuck the label under the monkey's typewriter */
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  min-height: 1.2em;
  word-break: break-all;
}
.monkey-best .hit { color: var(--fg); font-weight: 700; }
.monkey-best .miss { color: var(--border); }
.monkey-card.winner .monkey-best .hit { color: #2e7d32; }

.status {
  color: var(--muted);
  min-height: 1.25rem;
  margin: 1rem 0 0;
}

#monkey-result-row { margin-top: 1rem; }
#monkey-result {
  display: inline-block;
  max-width: 100%;
  padding: 0.75rem 1rem;
  background: var(--accent);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.95rem;
  word-break: break-all;
  text-align: left;
}

.hidden { display: none !important; }
[hidden] { display: none !important; }

/* ---- Typewriter sprite animation (ported from the original css/index.css) ---- */
.typewriter-monkey.small-monkey {
  width: 256px;
  height: 256px;
  background: url('/assets/typewriter-sprite.png') left center;
  background-size: auto 256px;
}
.typewriter-monkey.small-monkey.animated {
  animation: play-small 1s steps(16) infinite;
}
@keyframes play-small {
  100% { background-position: -4096px; }
}

.typewriter-monkey.large-monkey {
  width: 512px;
  height: 512px;
  background: url('/assets/typewriter-sprite.png') left center;
  background-size: auto 512px;
}
.typewriter-monkey.large-monkey.animated {
  animation: play-large 1s steps(16) infinite;
}
@keyframes play-large {
  100% { background-position: -8192px; }
}

/* Mini monkey: one per worker in the grid (16 frames × 120px). */
.typewriter-monkey.mini-monkey {
  width: 120px;
  height: 120px;
  background: url('/assets/typewriter-sprite.png') left center;
  background-size: auto 120px;
}
.typewriter-monkey.mini-monkey.animated {
  animation: play-mini 1s steps(16) infinite;
}
@keyframes play-mini {
  100% { background-position: -1920px; }
}

/* Show the large monkey on wide screens, the small one on phones. */
.small-monkey { display: none; }
@media (max-width: 600px) {
  .large-monkey { display: none; }
  .small-monkey { display: block; }
  .monkey-row { min-height: 256px; }
}