/* آکوردیاب — the chord finder's stage.
 *
 * The same two lamps as the player (blue, violet) and nothing else: the page
 * is dark, the light comes from the chord. While a chord sounds the lamps
 * come up (.is-live); when the hands leave, the last chord rests, dimmed
 * (.is-resting). Amber, the site's accent, stays out of the stage.
 */

.chords-page main { padding: 0 16px; }

.cf {
  --blue: 90, 176, 255;
  --violet: 208, 102, 255;
  position: relative;
  isolation: isolate;
  max-width: 1200px;
  margin: 4px auto 36px;
  min-height: clamp(560px, calc(100vh - 96px), 860px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  border: 1px solid #1c2230;
  border-radius: 24px;
  overflow: hidden;
  background: #06080d;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}

/* The lamps: one blue, one violet, low in the room, and a faint wash between. */
.cf-lamps {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 55% at 12% 100%, rgba(var(--blue), 0.30), transparent 70%),
    radial-gradient(60% 55% at 88% 100%, rgba(var(--violet), 0.28), transparent 70%),
    radial-gradient(50% 40% at 50% 38%, rgba(140, 150, 255, 0.10), transparent 70%);
  opacity: 0.5;
  transition: opacity 0.6s ease;
}
.cf.is-live .cf-lamps { opacity: 1; }
.cf.is-resting .cf-lamps { opacity: 0.7; }

.cf-sparks {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* ---- the head: the name of the tool, and its switches ---- */

.cf-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 18px 22px 0;
}
.cf-title { margin: 0; font-size: 1.25rem; font-weight: 800; }
.cf-title span { display: block; font-size: 0.8rem; font-weight: 500; color: var(--muted); }
.cf-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.cf-chip, .cf-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid #252d3d;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  font: inherit;
  font-size: 12.5px;
}
.cf-btn { cursor: pointer; color: var(--text); }
.cf-btn:hover { border-color: rgba(var(--blue), 0.6); }
.cf-chip.is-on { color: #bfe0ff; border-color: rgba(var(--blue), 0.5); }
.cf-chip kbd {
  font: inherit;
  font-size: 11px;
  padding: 0 5px;
  border: 1px solid #333c4e;
  border-radius: 4px;
  color: var(--text);
}
.cf-chip-keys::after { content: attr(data-octave); color: #bfe0ff; margin-inline-start: 2px; }

/* ---- the board: staff | name | circle — left to right in any language ---- */

.cf-board {
  position: relative;
  z-index: 1;
  direction: ltr;
  display: grid;
  grid-template-columns: minmax(170px, 1fr) minmax(0, 1.6fr) minmax(190px, 1fr);
  align-items: center;
  gap: 12px;
  padding: 8px 22px;
}
.cf-staff, .cf-circle { margin: 0; display: grid; place-items: center; }
.cf-staff svg { width: min(100%, 250px); height: auto; overflow: visible; }
.cf-staff svg .vf-stavenote { filter: drop-shadow(0 0 6px rgba(var(--blue), 0.9)); }
.cf-circle svg { width: min(100%, 290px); height: auto; overflow: visible; }

/* The name. */
.cf-reading { direction: rtl; text-align: center; display: grid; justify-items: center; gap: 10px; }
.cf-symbol {
  min-height: 1.25em;
  font-size: clamp(54px, 8.5vw, 124px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  display: grid;
  place-items: center;
}
.cf-word {
  display: inline-flex;
  align-items: baseline;
  background: linear-gradient(180deg, #ffffff 0%, #d9ecff 40%, #9fc8ff 70%, #c79bff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 18px rgba(var(--blue), 0.55)) drop-shadow(0 0 42px rgba(var(--violet), 0.35));
  transition: opacity 0.5s ease, filter 0.5s ease;
  white-space: nowrap;
}
.cf-suffix { font-size: 0.62em; margin-inline-start: 0.04em; }
.cf-slash { font-size: 0.52em; margin-inline-start: 0.08em; opacity: 0.85; }
.cf-acc {
  font-family: "Apple Symbols", "Segoe UI Symbol", "Noto Sans Symbols 2", "Noto Music", serif;
  font-size: 0.78em;
  font-weight: 400;
  margin: 0 -0.02em;
  vertical-align: 0.08em;
}
.cf-word.is-new { animation: cf-reveal 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes cf-reveal {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(1.07);
    letter-spacing: 0.14em;
    filter: blur(14px) drop-shadow(0 0 30px rgba(var(--blue), 1));
  }
  55% { opacity: 1; filter: blur(0) drop-shadow(0 0 34px rgba(234, 246, 255, 0.95)) drop-shadow(0 0 60px rgba(var(--violet), 0.6)); }
  100% { transform: none; letter-spacing: -0.01em; }
}
.cf.is-resting .cf-word { opacity: 0.55; filter: drop-shadow(0 0 10px rgba(var(--blue), 0.3)); }

.cf-prompt {
  font-size: 0.38em;
  font-weight: 700;
  color: rgba(232, 236, 244, 0.35);
  animation: cf-breathe 3.2s ease-in-out infinite;
}
@keyframes cf-breathe {
  0%, 100% { opacity: 0.45; text-shadow: 0 0 0 transparent; }
  50% { opacity: 1; text-shadow: 0 0 24px rgba(var(--blue), 0.6); }
}

.cf-fa { margin: 0; min-height: 1.6em; color: #c4cbe0; font-size: 15px; }
.cf-degrees { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; direction: ltr; }
.cf-degrees li {
  display: grid;
  justify-items: center;
  min-width: 46px;
  padding: 6px 10px 5px;
  border: 1px solid rgba(var(--blue), 0.45);
  border-radius: 12px;
  background: rgba(var(--blue), 0.10);
  box-shadow: 0 0 16px rgba(var(--blue), 0.18) inset;
}
.cf-degrees li.is-bass { border-color: rgba(var(--violet), 0.55); background: rgba(var(--violet), 0.12); box-shadow: 0 0 16px rgba(var(--violet), 0.2) inset; }
.cf-degrees b { font-size: 16px; color: #eaf6ff; }
.cf-degrees small { font-size: 11px; color: #9fb4d6; }
.cf-alt { margin: 0; color: var(--muted); font-size: 14px; }
.cf-share {
  border: 0;
  background: none;
  color: #9fc8ff;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  padding: 4px 8px;
}
.cf-share:hover { color: #eaf6ff; }

/* The circle of fifths: faint names, and the chord's notes lit and joined. */
.cf-ring { fill: none; stroke: rgba(255, 255, 255, 0.06); stroke-width: 1; }
.cf-shape {
  fill: rgba(var(--blue), 0.08);
  stroke: rgba(var(--blue), 0.85);
  stroke-width: 2;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(var(--blue), 0.9));
  transition: fill 0.3s;
}
.cf-node circle { fill: rgba(255, 255, 255, 0.025); stroke: none; transition: fill 0.25s, filter 0.25s; }
.cf-node text { fill: rgba(232, 236, 244, 0.32); font: 600 12px var(--font-ui); transition: fill 0.25s; direction: ltr; }
.cf-node.is-on circle { fill: rgb(var(--blue)); filter: drop-shadow(0 0 10px rgba(var(--blue), 0.95)); }
.cf-node.is-on text { fill: #06121f; }
.cf-node.is-bass circle { fill: rgb(var(--violet)); filter: drop-shadow(0 0 10px rgba(var(--violet), 0.95)); }
.cf-node.is-root circle { stroke: #eaf6ff; stroke-width: 2.5; }
.cf.is-resting .cf-node.is-on circle, .cf.is-resting .cf-shape { opacity: 0.55; }

/* ---- the keys ---- */

.cf-octave {
  position: absolute;
  z-index: 2;
  inset-inline: 12px;
  bottom: calc(clamp(120px, 20vh, 180px) + 36px);
  display: flex;
  justify-content: space-between;
  direction: ltr;
  pointer-events: none;
}
.cf-octave .cf-btn { pointer-events: auto; width: 38px; justify-content: center; font-size: 18px; }

.cf-keys {
  position: relative;
  z-index: 1;
  direction: ltr;
  height: clamp(120px, 20vh, 180px);
  margin-top: 26px; /* room for the names over lit keys */
  border-top: 1px solid rgba(var(--blue), 0.25);
  box-shadow: 0 -1px 24px rgba(var(--blue), 0.15);
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
.cf.is-live .cf-keys { border-top-color: rgba(var(--blue), 0.6); box-shadow: 0 -2px 30px rgba(var(--blue), 0.35); }
.cf-key {
  position: absolute;
  top: 0;
  cursor: pointer;
  border-radius: 0 0 6px 6px;
  transition: background 0.08s, box-shadow 0.12s;
}
.cf-key.white {
  height: 100%;
  background: linear-gradient(#f3f5f9, #dfe3ea);
  border: 1px solid #0b0d12;
  border-top: 0;
  z-index: 1;
}
.cf-key.black {
  height: 62%;
  background: linear-gradient(#2a2f3a, #0c0e13);
  border: 1px solid #000;
  border-top: 0;
  z-index: 2;
}
.cf-key b {
  position: absolute;
  bottom: 6px;
  inset-inline: 0;
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  color: #8a93a5;
  direction: ltr;
}
/* The note's name floats over its key while it is lit, like the picture. */
.cf-key i {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  color: #bfe0ff;
  white-space: nowrap;
  text-shadow: 0 0 8px rgba(var(--blue), 0.9);
  pointer-events: none;
}
.cf-key.black i { bottom: calc(100% + 6px + 0px); }
.cf-key.is-on.white { background: linear-gradient(#e3f2ff, #5aa8ff); box-shadow: 0 0 22px rgba(var(--blue), 0.75), inset 0 -6px 18px rgba(var(--blue), 0.6); }
.cf-key.is-on.black { background: linear-gradient(#7cb8ff, #2a5fc8); box-shadow: 0 0 20px rgba(var(--blue), 0.8); }
.cf-key.is-on.is-bass.white { background: linear-gradient(#f4e4ff, #b86cf5); box-shadow: 0 0 22px rgba(var(--violet), 0.75), inset 0 -6px 18px rgba(var(--violet), 0.6); }
.cf-key.is-on.is-bass.black { background: linear-gradient(#cf98ff, #6f33b8); box-shadow: 0 0 20px rgba(var(--violet), 0.8); }
.cf-key.is-bass i { color: #ecd2ff; text-shadow: 0 0 8px rgba(var(--violet), 0.9); }
.cf-key.is-ghost.white { background: linear-gradient(#e6effa, #b9cff0); }
.cf-key.is-ghost.black { background: linear-gradient(#3a4c6e, #1a2336); }
.cf-key.is-ghost i { opacity: 0.6; }

/* ---- the words under the stage ---- */

.cf-about { max-width: 68ch; margin: 0 auto 48px; }
.cf-about h2 { margin-top: 1.6em; }

/* ---- narrower ---- */

@media (max-width: 900px) {
  .cf-board {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "name name" "staff circle";
    padding: 8px 14px;
  }
  .cf-reading { grid-area: name; }
  .cf-staff { grid-area: staff; }
  .cf-circle { grid-area: circle; }
  .cf-staff svg { width: min(100%, 200px); }
  .cf-circle svg { width: min(100%, 210px); }
}
@media (max-width: 640px) {
  .chords-page main { padding: 0 8px; }
  .cf { border-radius: 18px; min-height: calc(100svh - 80px); }
  .cf-head { padding: 14px 14px 0; }
  .cf-chip-keys { display: none; }
  .cf-symbol { font-size: clamp(48px, 15vw, 80px); }
  .cf-fa { font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .cf-prompt { animation: none; }
}