/* Enoten lokalni font za vse glasbene znake v Notosledu. */
@font-face{font-family:'GJ Noto Music';src:url('noto-music.woff2') format('woff2');font-weight:400;font-style:normal;font-display:block}

#gj-note-trainer #gjnt-clef-choice .gjnt-clef-option,
#gj-write-note #gjwn-clef-choice .gjwn-clef-option{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  width:100%!important;
  max-width:none!important;
  min-height:56px!important;
  margin:0!important;
  padding:8px 10px!important;
  color:var(--ink)!important;
  background:#fff!important;
}
#gj-note-trainer #gjnt-clef-choice,
#gj-write-note #gjwn-clef-choice{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
#gj-note-trainer #gjnt-clef-choice .gjnt-clef-option:after,
#gj-write-note #gjwn-clef-choice .gjwn-clef-option:after{
  content:none;
  display:none;
  font:800 14px/1 Arial,sans-serif;
}
#gj-note-trainer #gjnt-clef-choice input:checked+.gjnt-clef-option,
#gj-write-note #gjwn-clef-choice input:checked+.gjwn-clef-option{
  color:#fff!important;
  background:var(--gold)!important;
  border-color:var(--gold)!important;
  box-shadow:none;
}
#gj-note-trainer #gjnt-clef-choice input:checked+.gjnt-clef-option:after,
#gj-write-note #gjwn-clef-choice input:checked+.gjwn-clef-option:after{
  content:none;
  display:none;
}
#gj-note-trainer #gjnt-clef-choice .gjnt-clef-icon,
#gj-write-note #gjwn-clef-choice .gjwn-clef-icon{
  position:relative!important;
  left:auto!important;
  top:auto!important;
  display:none!important;
  width:0!important;
  max-width:0!important;
  height:0!important;
  min-height:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:inherit;
  overflow:visible;
  object-fit:contain!important;
  justify-self:start!important;
  transform:none!important;
}
#gj-note-trainer #gjnt-clef-choice input:checked+.gjnt-clef-option .gjnt-clef-icon,
#gj-write-note #gjwn-clef-choice input:checked+.gjwn-clef-option .gjwn-clef-icon{filter:none!important}
#gj-note-trainer #gjnt-clef-choice .gjnt-clef-name,
#gj-write-note #gjwn-clef-choice .gjwn-clef-name{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:100%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  min-height:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:inherit;
  font-size:15px;
  line-height:1.15;
  font-weight:700;
  text-align:center;
  transform:translate(-50%,-50%)!important;
}

/* Keep each clef name visually close to its music symbol.  The doubled root
   selector intentionally overrides older per-page positioning rules. */
#gj-note-trainer#gj-note-trainer #gjnt-clef-choice .gjnt-clef-name,
#gj-write-note#gj-write-note #gjwn-clef-choice .gjwn-clef-name{
  left:50%!important;
}
.gj-clef-inline-symbol,
.staff:before,
.card .symbol{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 24px;
  width:24px;
  height:26px;
  margin-right:5px;
  color:inherit;
  font-family:'GJ Noto Music',serif;
  font-size:22px;
  font-style:normal;
  font-weight:400;
  line-height:1;
}
.gj-clef-inline-symbol.gj-clef-treble{font-size:24px;transform:translateY(-2px)}
.gj-clef-inline-symbol.gj-clef-bass{transform:translateY(0)}
.gj-clef-inline-symbol.gj-clef-alto{transform:translateY(0)}
@media(max-width:600px){
  #gj-note-trainer #gjnt-clef-choice .gjnt-clef-option,
  #gj-write-note #gjwn-clef-choice .gjwn-clef-option{gap:4px!important;padding:6px 3px!important}
  #gj-note-trainer #gjnt-clef-choice .gjnt-clef-name,
  #gj-write-note #gjwn-clef-choice .gjwn-clef-name{font-size:12px!important}
  .gj-clef-inline-symbol{flex-basis:20px;width:20px;height:22px;margin-right:3px;font-size:18px}
  .gj-clef-inline-symbol.gj-clef-treble{font-size:20px}
}

/* Pitch-only notation uses the real whole-note glyph from Noto Music. */
#gj-note-trainer#gj-note-trainer .gjnt-head,
#gj-write-note#gj-write-note .gjwn-head,
#gj-write-note#gj-write-note .gjwn-correct-head{
  fill:none!important;
  stroke:none!important;
}
#gj-note-trainer [data-whole-source],#gj-write-note [data-whole-source]{opacity:0!important}
#gj-note-trainer .gj-static-whole-note,#gj-write-note .gj-static-whole-note{fill:var(--ink);font:88px 'GJ Noto Music',serif;text-anchor:middle;pointer-events:none;transform:translateY(12px)}

/* Optična poravnava violinskega ključa v glavnem notnem črtovju. */
#gj-note-trainer #gjnt-staff .gjnt-clef:not(.bass):not(.alto),
#gj-write-note #gjwn-staff .gjwn-clef:not(.bass):not(.alto){transform:translateY(5px)}
#gj-note-trainer#gj-note-trainer .gjnt-stem,
#gj-write-note#gj-write-note .gjwn-stem,
#gj-write-note#gj-write-note .gjwn-correct-stem{
  display:none!important;
}
#gj-note-trainer .gji-movable .gj-static-whole-note,
#gj-note-trainer .scale-degree.selected .gj-static-whole-note,
#gj-write-note .gjwn-placed-head+.gj-static-whole-note{fill:var(--gold)!important}
#gj-write-note .gjwn-correct-head+.gj-static-whole-note{fill:#2f7d4a!important}
/* Melodic patterns still use quarter notes because they show a sequence. */
#gj-note-trainer#gj-note-trainer #rm-drawing .gjnt-head{
  fill:var(--ink)!important;
  stroke:none!important;
}
#gj-note-trainer#gj-note-trainer #rm-drawing .gjnt-stem{
  display:block!important;
}

/* The treble glyph has a deeper visual bottom than the other clefs. */
#gj-note-trainer #gjnt-range-clef:not(.bass):not(.alto),
#gj-note-trainer #gjnt-clef:not(.bass):not(.alto),
#gj-write-note #gjwn-range-clef:not(.bass):not(.alto),
#gj-write-note #gjwn-clef:not(.bass):not(.alto){
  transform:translateY(-7px);
}

/* One shared, three-row selector for every pitch-selection exercise. */
.gj-tone-picker{display:grid;gap:10px}
.gj-tone-row{display:grid;gap:6px}
.gj-tone-row small{color:var(--muted);font-size:11px;font-weight:800}
.gj-tone-row>div{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.gj-tone-row input{position:absolute;opacity:0;pointer-events:none}
.gj-tone-row label{cursor:pointer}
.gj-tone-row span{display:grid;place-items:center;min-height:42px;padding:5px;border:1px solid var(--line);border-radius:9px;background:#fff;font-size:13px;font-weight:800}
.gj-tone-row input:checked+span{color:#fff;background:var(--gold);border-color:var(--gold)}
.gj-tone-row input:focus-visible+span{outline:3px solid rgba(177,122,18,.28);outline-offset:2px}
@media(max-width:600px){.gj-tone-row>div{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Select valid major/minor key pairs on one circle of fifths. */
#gj-note-trainer .scale-fifths-circle{position:relative;width:min(100%,590px);aspect-ratio:1;margin:16px auto 4px;border:1px solid var(--line);border-radius:50%;background:radial-gradient(circle at center,#fff 0 33%,#f7f2e8 34% 63%,#fff 64%)}
#gj-note-trainer .scale-fifths-circle>label{position:absolute;left:var(--circle-x);top:var(--circle-y);width:82px;transform:translate(-50%,-50%);cursor:pointer}
#gj-note-trainer .scale-fifths-circle input{position:absolute;opacity:0;pointer-events:none}
#gj-note-trainer .scale-fifths-circle label>span{display:grid;grid-template-columns:1fr;place-items:center;min-height:48px;padding:4px 5px;border:1px solid var(--line);border-radius:11px;background:#fff;color:var(--ink);box-shadow:0 2px 8px rgba(56,43,19,.08);line-height:1}
#gj-note-trainer .scale-fifths-circle label b{font-size:13px}
#gj-note-trainer .scale-fifths-circle label small{margin-top:3px;color:var(--muted);font-size:10px;font-weight:800}
#gj-note-trainer .scale-fifths-circle input:checked+span{border-color:var(--gold);background:var(--gold);color:#fff}
#gj-note-trainer .scale-fifths-circle input:checked+span small{color:#fff}
#gj-note-trainer .scale-fifths-circle input:focus-visible+span{outline:3px solid rgba(177,122,18,.28);outline-offset:2px}
#gj-note-trainer .scale-circle-centre{position:absolute;left:50%;top:50%;display:grid;place-items:center;transform:translate(-50%,-50%);color:var(--gold);font-family:Georgia,serif}
#gj-note-trainer .scale-circle-centre strong{font-size:24px}
#gj-note-trainer .scale-circle-centre span{font-size:16px}
@media(max-width:600px){#gj-note-trainer .gjnt-section-body:has(.scale-fifths-circle){padding-left:8px;padding-right:8px}#gj-note-trainer .scale-fifths-circle{width:min(100%,360px)}#gj-note-trainer .scale-fifths-circle>label{width:44px}#gj-note-trainer .scale-fifths-circle label>span{min-height:30px;padding:2px 1px;border-radius:7px}#gj-note-trainer .scale-fifths-circle label b{font-size:9px}#gj-note-trainer .scale-fifths-circle label small{margin-top:1px;font-size:7px}#gj-note-trainer .scale-circle-centre strong{font-size:18px}#gj-note-trainer .scale-circle-centre span{font-size:13px}}

#gj-note-trainer .gji-answer-group{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
#gj-note-trainer .gji-answer-group+.gji-answer-group{margin-top:9px}
#gj-note-trainer .gjnt-answer.selected,
#gj-note-trainer [data-gji-alter].selected{color:#fff!important;background:var(--gold)!important;border-color:var(--gold)!important}
#gj-note-trainer #gji-accidentals{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;margin:12px 0}
#gj-note-trainer #gji-accidentals button{min-height:44px;padding:5px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);font-weight:800;cursor:pointer}
#gj-note-trainer #gji-accidentals .gji-accidental-symbol{display:grid;place-items:center;padding:0 5px;font-family:'GJ Noto Music',serif;font-size:27px;font-weight:400;line-height:1}
#gj-note-trainer #gji-accidentals .gji-accidental-symbol b{display:block;font:inherit;line-height:1}
#gj-note-trainer #gji-accidentals [data-gji-alter="-2"] b,#gj-note-trainer #gji-accidentals [data-gji-alter="-1"] b{transform:translateY(-3px)}
#gj-note-trainer #gji-accidentals [data-gji-alter="1"] b{transform:translateY(-7px)}
#gj-note-trainer #gji-accidentals [data-gji-alter="2"]{font-size:31px}
#gj-note-trainer #gji-accidentals [data-gji-alter="2"] b{transform:translateY(-7px)}
.gj-double-sharp{font-size:58px!important}
@media(max-width:600px){#gj-note-trainer .gji-answer-group{grid-template-columns:repeat(2,minmax(0,1fr))}#gj-note-trainer #gji-accidentals{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Kanonična družina pisave za glasbene glife. !important prepreči, da bi
   starejši slogi posamezne vaje na telefonu izbrali sistemski nadomestni font. */
#gj-note-trainer .gjnt-clef,
#gj-write-note .gjwn-clef,
#gj-note-trainer .gjnt-accidental,
#gj-write-note .gjwn-accidental,
#gj-note-trainer .gj-static-whole-note,
#gj-write-note .gj-static-whole-note,
#gj-note-trainer .gji-accidental-symbol,
#gj-note-trainer .scale-accidental-symbol,
#gj-note-trainer .rm-value b,
.gj-clef-inline-symbol{
  font-family:'GJ Noto Music',serif!important;
  font-style:normal!important;
  font-weight:400!important;
}
#gj-note-trainer #gjnt-sharp+span,
#gj-note-trainer #gjnt-flat+span,
#gj-write-note #gjwn-sharp+span,
#gj-write-note #gjwn-flat+span{
  font-family:'GJ Noto Music',serif;
  font-style:normal;
  font-weight:400;
}