/* gd-basis.css · Bausteine aus dem Prototypen-Lab (tutorial.css: Code-Kästen, Syntaxfarben, Weiter/Zurück; lab.css: Knöpfe), nur was Game-Design 101 braucht. Quelle: maschine-hub web/prototypen, © Michaelangelo Zünd (MIT). */
.code { margin: 1rem 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: #0a0a10; }
.code figcaption { font-size: .75rem; color: #8a8794; padding: .45rem .9rem; border-bottom: 1px solid rgba(255,255,255,.08);
  font-family: ui-monospace, monospace; overflow-wrap: anywhere; }
.code pre { margin: 0; padding: .9rem; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.code code { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: .82rem;
  line-height: 1.55; color: #e6e4dc; white-space: pre; tab-size: 2; }
.tk-c { color: #6f7a6f; font-style: italic; }
.tk-s { color: #9fd88a; }
.tk-n { color: #f0a35a; }
.tk-k { color: #ff6b6b; font-weight: 600; }
.tk-t { color: #7cc7ff; }
.pager { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: space-between; margin: 2rem 0 1rem; }
.pager .btn { flex: 1 1 220px; text-align: center; overflow-wrap: break-word; }
.btn { display: inline-block; padding: .8rem 1.5rem; border-radius: 12px; text-decoration: none; font-weight: 600; border: 1px solid var(--border); background: var(--surface); color: var(--text); transition: transform .2s, border-color .2s; }
.btn:hover { transform: translateY(-2px); border-color: var(--accent); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }