/* ════════════════════════════════════════════════════════
   prompts.css — styling for the /prompts page
   Builds on legal.css (page chrome, nav, container) and adds
   prompt-specific components: game sections, AI-tool prompt
   blocks, copy buttons, and monospace prompt text.
   ════════════════════════════════════════════════════════ */

/* Intro blurb under the H1 */
.prompts-intro {
  font-size: 1rem;
  color: #cbd5e1;
  line-height: 1.7;
  margin-bottom: 2.5rem;
}

/* Each game gets a section card */
.game-prompt-section {
  background: #120c20;
  border: 1.5px solid #2a1f3a;
  border-radius: 14px;
  padding: 1.8rem 1.6rem;
  margin-bottom: 2.5rem;
}

.game-prompt-header {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 0.4rem;
  flex-wrap: wrap;
}

.game-prompt-emoji { font-size: 2rem; line-height: 1; }

.game-prompt-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
}

.game-prompt-desc {
  color: #94a3b8;
  font-size: 0.92rem;
  line-height: 1.6;
  margin: 0.5rem 0 1.5rem;
}

.game-prompt-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.5rem;
}
.game-prompt-tag {
  background: rgba(139, 92, 246, 0.15);
  color: #a78bfa;
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 12px;
  font-size: 0.72rem;
  padding: 2px 10px;
}

/* AI tool prompt block */
.prompt-block {
  margin-bottom: 1.4rem;
}
.prompt-block:last-child { margin-bottom: 0; }

.prompt-tool-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.55rem;
  flex-wrap: wrap;
}

.prompt-tool-name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 0.95rem;
}

/* Per-tool accent colors on the small logo dot */
.prompt-tool-badge {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  flex-shrink: 0;
}
.prompt-tool-badge.chatgpt { background: #10a37f; color: #fff; }
.prompt-tool-badge.gemini  { background: linear-gradient(135deg, #4285f4, #9b72cb, #d96570); color: #fff; }
.prompt-tool-badge.claude  { background: #d97757; color: #fff; }

.prompt-tool-label {
  font-size: 0.72rem;
  font-weight: 500;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* The actual prompt text — monospace block */
.prompt-text {
  position: relative;
  background: #0a0612;
  border: 1.5px solid #2a1f3a;
  border-radius: 10px;
  padding: 1rem 1.1rem;
  font-family: 'SF Mono', 'Fira Code', Monaco, Menlo, monospace;
  font-size: 0.82rem;
  line-height: 1.65;
  color: #d4d4d8;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
}

/* Copy button in the tool header */
.prompt-copy-btn {
  background: transparent;
  border: 1.5px solid #3b2d5a;
  color: #c4b5fd;
  border-radius: 6px;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 4px 12px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  font-family: inherit;
}
.prompt-copy-btn:hover { background: #3b2d5a; color: #fff; }
.prompt-copy-btn.copied { background: #16a34a; border-color: #16a34a; color: #fff; }

/* "Why this works" note under a prompt */
.prompt-note {
  margin-top: 0.6rem;
  font-size: 0.82rem;
  color: #94a3b8;
  line-height: 1.6;
  padding-left: 0.9rem;
  border-left: 2px solid #2a1f3a;
}
.prompt-note strong { color: #c4b5fd; }

/* Tip callout at the bottom */
.prompts-tip {
  background: rgba(139, 92, 246, 0.08);
  border-left: 3px solid #8b5cf6;
  border-radius: 4px;
  padding: 1rem 1.25rem;
  margin-top: 1rem;
  font-size: 0.9rem;
  color: #cbd5e1;
  line-height: 1.6;
}
.prompts-tip strong { color: #fff; }

@media (max-width: 640px) {
  .game-prompt-section { padding: 1.3rem 1.1rem; }
  .game-prompt-title { font-size: 1.25rem; }
  .prompt-text { font-size: 0.76rem; padding: 0.85rem 0.9rem; }
}