/* ============================================================
   Bunny Game — dev.css
   The developer resource page: mechanic sections + code boxes.
   Loaded after page.css.
   ============================================================ */

/* ── Contents index ── */
.toc {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 20px 22px;
  margin-bottom: 12px;
}
.toc h2 {
  margin: 0 0 12px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #64748b;
}
.toc ol {
  margin: 0;
  padding-left: 22px;
  columns: 2;
  column-gap: 28px;
}
.toc li {
  font-size: 0.88rem;
  line-height: 1.55;
  margin-bottom: 7px;
  break-inside: avoid;
  color: #475569;
}
.toc a { color: #1d4ed8; text-decoration: none; }
.toc a:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .toc ol { columns: 1; }
}

/* ── Mechanic section ── */
.mechanic {
  border-top: 1px solid #e5e7eb;
  padding-top: 36px;
  margin-top: 36px;
  scroll-margin-top: 60px;
}

.mechanic-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.mechanic h2 {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.01em;
}

.mechanic-num {
  font-family: 'SF Mono', 'Menlo', Consolas, 'Courier New', monospace;
  font-size: 0.78rem;
  font-weight: 700;
  color: #94a3b8;
}

/* Anchor affordance — the # appears on hover, tap target stays on desktop */
.anchor-link {
  font-size: 0.9rem;
  color: #cbd5e1;
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.12s, color 0.12s;
}
.mechanic:hover .anchor-link { opacity: 1; }
.anchor-link:hover { color: #2563eb; }
.anchor-link:focus { opacity: 1; }

.mechanic-row {
  font-size: 0.94rem;
  line-height: 1.7;
  color: #374151;
  margin-bottom: 12px;
}
.mechanic-row .label {
  font-weight: 700;
  color: #0f172a;
}

.used-in a {
  display: inline-block;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1d4ed8;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  margin: 0 4px 5px 0;
}
.used-in a:hover { background: #dbeafe; color: #1e40af; }

.concepts {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.concepts li {
  font-size: 0.78rem;
  font-weight: 600;
  color: #475569;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 3px 9px;
  margin: 0;
  line-height: 1.5;
}

/* ── Code box ── */
.code-box {
  position: relative;
  background: #1e1e1e;
  border: 1px solid #2d2d2d;
  border-radius: 10px;
  margin: 0 0 8px;
  overflow: hidden;
}

.code-box pre {
  margin: 0;
  padding: 44px 18px 18px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.code-box code {
  font-family: 'SF Mono', 'Menlo', Consolas, 'Courier New', monospace;
  font-size: 0.79rem;
  line-height: 1.62;
  color: #d4d4d4;
  white-space: pre;
  tab-size: 2;
}

.copy-btn {
  position: absolute;
  top: 9px;
  right: 10px;
  background: #2d2d2d;
  border: 1px solid #3f3f3f;
  color: #9cdcfe;
  border-radius: 6px;
  padding: 4px 11px;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  z-index: 2;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s, color 0.12s;
}
.copy-btn:hover  { background: #3a3a3a; color: #ffffff; }
.copy-btn.copied { background: #14532d; border-color: #166534; color: #86efac; }

.code-caption {
  font-size: 0.78rem;
  color: #6b7280;
  margin-bottom: 4px;
}

/* ── Syntax colours (VS Code Dark+) ── */
.tok-comment { color: #6a9955; }
.tok-string  { color: #ce9178; }
.tok-keyword { color: #569cd6; }
.tok-fnname  { color: #dcdcaa; }
.tok-number  { color: #b5cea8; }
.tok-builtin { color: #4ec9b0; }

@media (max-width: 600px) {
  .code-box code { font-size: 0.72rem; }
  .code-box pre  { padding: 42px 14px 14px; }
  .mechanic h2   { font-size: 1.15rem; }
}