/* v5.44: full-size music controls and consistent lesson-title plates. */
#grammarDialog .game-music-control,
#synonymDialog .game-music-control,
#idiomDialog .game-music-control {
  box-sizing: border-box; flex: 0 0 auto;
  width: auto; min-width: 156px; height: auto; min-height: 52px;
  padding: 12px 20px; margin: 0;
  font-size: 18px; font-weight: 800; line-height: 1.25;
  border: 2px solid #ffe5a5; border-radius: 16px;
  background: #252560; color: #fff8de;
  box-shadow: 0 4px 0 #21194f66, inset 0 1px 0 #ffffff30;
  white-space: nowrap;
}
/* Appended buttons used to auto-place in the narrow mascot column. */
#grammarDialog .grammar-hero .game-music-control,
#synonymDialog .synonym-hero .game-music-control {
  grid-column: 2 / -1; justify-self: end; align-self: center;
}
#idiomDialog .ia-topbar { flex-wrap: wrap; }
#idiomDialog .ia-topbar .game-music-control { margin-left: auto; }
#grammarDialog .game-music-control:hover,
#synonymDialog .game-music-control:hover,
#idiomDialog .game-music-control:hover { background: #3e347c; }
#grammarDialog .game-music-control[aria-pressed=false],
#synonymDialog .game-music-control[aria-pressed=false],
#idiomDialog .game-music-control[aria-pressed=false] { background: #30314f; color: #eeebf7; }
@media (max-width:600px) {
  #grammarDialog .game-music-control,
  #synonymDialog .game-music-control,
  #idiomDialog .game-music-control {
    min-width: 148px; min-height: 50px; padding: 11px 18px; font-size: 17px;
  }
}

/* The illustrated ribbons have different crests and curves. A single title
   plate gives every number the same vertical centre and a clear text area. */
.dashboard .quest-panel .quest-scene-title {
  box-sizing: border-box; top: auto; bottom: 6%; height: 12%;
  left: 16%; right: 16%; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 0 2px; margin: 0;
  font-size: clamp(14px,1.35vw,25px);
  font-size: clamp(12px,5.8cqi,28px);
  line-height: 1; font-weight: 800; letter-spacing: 0;
  color: #fff5d4; background: linear-gradient(180deg,#203e80,#102454);
  border: 1px solid #ebc56f; border-radius: 6px;
  box-shadow: 0 1px 3px #06144070, inset 0 1px 0 #fff6dc33;
  text-shadow: 0 1px 1px #061134;
  white-space: nowrap; pointer-events: none;
}
