/*
    MT Sound Quest — l'exercice de lecture de notes.

    Une feuille a part : la page d'accueil n'a pas besoin d'un octet de tout
    ceci, et l'exercice ne dependrait de rien d'autre s'il devait demenager.
    Les couleurs, les rayons et les polices viennent des jetons de site.css.

    Rappel : la politique de securite du site interdit le style ecrit dans la
    page. Tout ce qui concerne l'exercice doit vivre ici.
 */

.ex-head { max-width: 720px; }
.ex-head h1 { font-family: var(--display); font-size: clamp(2.2rem, 5vw, 3.4rem); }

/* ------------------------------------------------------------------ carte */

.ex-card {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: clamp(18px, 3vw, 34px);
  max-width: 720px;
  margin: 0 auto;
}

/* ------------------------------------------------------------------ portee */

.ex-staff-box {
  background: var(--paper-2);
  border-radius: var(--radius);
  padding: 6px 0 2px;
}

.ex-staff { width: 100%; height: auto; display: block; }

.ex-line { stroke: #2b2c46; stroke-width: 1.4; }
.ex-ledger-line { stroke: #2b2c46; stroke-width: 1.4; }
.ex-glyph { fill: #16172e; }
.ex-head-note { fill: #16172e; transition: fill .12s ease; }
.ex-head-note.is-right { fill: #2f8f5b; }
.ex-head-note.is-wrong { fill: #c0392b; }

/* ------------------------------------------------------------------ compte */

.ex-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 18px 0 16px;
}

.ex-stat {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 4px 6px;
  text-align: center;
}

.ex-num {
  display: block;
  font-family: var(--display);
  font-size: 1.9rem;
  line-height: 1.1;
  color: var(--ink);
}

.ex-lab {
  display: block;
  font-size: .74rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ------------------------------------------------------------------ clavier */

.ex-keys {
  position: relative;
  display: flex;
  height: clamp(120px, 22vw, 168px);
  margin: 0 auto;
  max-width: 560px;
  user-select: none;
  touch-action: manipulation;
}

.ex-key {
  position: relative;
  flex: 1 1 0;
  margin: 0 2px;
  border: 1px solid #c3c1d9;
  border-top: 0;
  border-radius: 0 0 9px 9px;
  background: linear-gradient(#ffffff, #ebe9f7);
  color: var(--ink-soft);
  font-family: var(--body);
  font-size: .92rem;
  font-weight: 600;
  padding: 0 0 10px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(20, 21, 43, .08);
  transition: background .1s ease, transform .06s ease;
}

.ex-key:hover { background: linear-gradient(#ffffff, #eae9f6); }
.ex-key:active { transform: translateY(1px); }

.ex-key.is-right { background: linear-gradient(#d9f2e3, #b9e6cd); color: #1f6b45; }
.ex-key.is-wrong { background: linear-gradient(#fbdcd8, #f3c3bc); color: #8f2c20; }

.ex-black {
  position: absolute;
  top: 0;
  width: 8.4%;
  height: 62%;
  background: linear-gradient(#3a3b57, #1c1d33);
  border-radius: 0 0 6px 6px;
  box-shadow: 0 2px 4px rgba(20, 21, 43, .35);
  pointer-events: none;
}

.ex-hint {
  text-align: center;
  color: var(--ink-faint);
  font-size: .88rem;
  margin: 16px 0 0;
}

/* ------------------------------------------------------------------ reglages */

.ex-options {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px 22px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.ex-opt { display: flex; flex-direction: column; gap: 6px; }

.ex-opt-lab {
  font-size: .74rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.ex-seg {
  display: inline-flex;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px;
}

.ex-seg button {
  border: 0;
  background: transparent;
  border-radius: 999px;
  padding: 6px 14px;
  font-family: var(--body);
  font-size: .88rem;
  color: var(--ink-soft);
  cursor: pointer;
}

.ex-seg button.on {
  background: var(--brand);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

.ex-reset { margin-left: auto; }

/* ------------------------------------------------------------------ etroit */

@media (max-width: 560px) {
  .ex-stats { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .ex-num { font-size: 1.5rem; }
  .ex-key { font-size: .8rem; margin: 0 1px; }
  .ex-options { gap: 12px 14px; }
  .ex-reset { margin-left: 0; }
}

/* ------------------------------------------------------------------ reponse

   La tete de note est l'image de l'application : on ne la recolore pas. Un
   halo s'allume derriere elle -- vert quand c'est juste, rouge sinon. */

.ex-halo { fill: transparent; transition: fill .12s ease; }
.ex-halo.is-right { fill: rgba(47, 143, 91, .34); }
.ex-halo.is-wrong { fill: rgba(192, 57, 43, .32); }