/* ============================================================
   Canon page (Canon.html)
   Web Audio player card + syntax-highlighted code listing.
   ============================================================ */

/* Width is handled by the shared .content class on the same element;
   do not set max-width here or it overrides .content's max-width:100%
   and breaks the mobile layout. */

.canon h1 {
  font-family: var(--font-display);
  font-size: 3.4em;
  color: var(--heading);
  letter-spacing: 0.02em;
  margin: 0 0 10px;
}

.canon-subtitle {
  font-size: 1.4em;
  color: var(--muted);
  margin: 0 0 44px;
}

/* ── Player card ───────────────────────────────────────────── */
.player-card {
  background: rgba(173, 149, 134, 0.08);
  border: 1px solid rgba(173, 149, 134, 0.25);
  border-radius: 12px;
  padding: 40px;
  text-align: center;
  margin-bottom: 48px;
}

.player-card__title {
  font-family: var(--font-display);
  font-size: 2.2em;
  color: var(--heading);
  margin: 0 0 8px;
}

.player-card__meta {
  font-size: 1.2em;
  color: var(--muted);
  margin: 0 0 30px;
}

/* ── Visualiser ────────────────────────────────────────────── */
.visualiser {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  height: 50px;
  margin-bottom: 30px;
}

.visualiser .bar {
  width: 6px;
  height: 6px;
  border-radius: 3px 3px 0 0;
  background: var(--accent);
  opacity: 0.4;
  transition: height 0.1s ease;
}

.visualiser.playing .bar:nth-child(odd)  { animation: bounce 0.7s ease-in-out infinite alternate; }
.visualiser.playing .bar:nth-child(even) { animation: bounce 0.9s ease-in-out infinite alternate; }
.visualiser.playing .bar:nth-child(3n)   { animation: bounce 0.5s ease-in-out infinite alternate; }
.visualiser.playing .bar:nth-child(5n)   { animation: bounce 1.1s ease-in-out infinite alternate; }

@keyframes bounce {
  from { height: 6px;  opacity: 0.3; }
  to   { height: 44px; opacity: 0.85; }
}

/* ── Buttons ───────────────────────────────────────────────── */
.controls {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.btn {
  font-family: var(--font-body);
  font-size: 1.3em;
  border-radius: 8px;
  cursor: pointer;
  letter-spacing: 0.03em;
  transition: background 0.2s, color 0.2s, opacity 0.2s;
}

.btn-play {
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 18px 52px;
  font-weight: 600;
}

.btn-play:hover:not(:disabled) { background: rgba(173, 149, 134, 0.8); }
.btn-play:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-stop {
  background: transparent;
  color: var(--accent);
  border: 2px solid var(--accent);
  padding: 16px 42px;
}

.btn-stop:hover:not(:disabled) { background: var(--accent); color: #fff; }
.btn-stop:disabled { opacity: 0.35; cursor: not-allowed; }

/* ── Tempo control ─────────────────────────────────────────── */
.tempo {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(173, 149, 134, 0.2);
}

.tempo__label {
  display: block;
  font-size: 1.15em;
  font-weight: 600;
  color: var(--heading);
  margin-bottom: 14px;
}

.tempo__slider {
  width: 320px;
  max-width: 100%;
  height: 6px;
  accent-color: var(--accent);
  cursor: pointer;
  display: block;
  margin: 0 auto 18px;
}

.tempo__presets {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.tempo__presets button {
  background: transparent;
  color: var(--heading);
  border: 1px solid rgba(173, 149, 134, 0.5);
  border-radius: 6px;
  padding: 8px 18px;
  font-family: var(--font-body);
  font-size: 1.05em;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.tempo__presets button:hover { background: var(--accent); color: #fff; }

/* ── Description ───────────────────────────────────────────── */
.canon-description {
  font-size: 1.25em;
  line-height: 1.9;
  color: var(--ink);
  margin-bottom: 44px;
}

.canon-description p { margin: 0 0 14px; }

/* ── Code listing ──────────────────────────────────────────── */
.canon-code h2 {
  font-family: var(--font-display);
  font-size: 1.8em;
  color: var(--heading);
  letter-spacing: 0.02em;
  margin: 0 0 16px;
}

.code-block {
  background: #1e1e1e;
  border-radius: 10px;
  padding: 28px 32px;
  overflow-x: auto;
  line-height: 1.65;
}

.code-block code {
  display: block;
  font-family: 'Courier New', Courier, monospace;
  font-size: 1.05em;
  color: #d4c8be;
  white-space: pre;
}

/* Syntax tints */
.kw  { color: #c792ea; }              /* keywords */
.fn  { color: #82aaff; }              /* function names */
.str { color: #c3e88d; }              /* strings */
.num { color: #f78c6c; }              /* numbers */
.cm  { color: #637777; font-style: italic; } /* comments */
.op  { color: #89ddff; }              /* operators */

/* ── Mobile ────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .canon h1 { font-size: 2.4em; }
  .player-card { padding: 24px 16px; }
  .code-block { padding: 18px 16px; }
  .code-block code { font-size: 0.8em; }
}